From bc5fc5806e026f18f3c76e54b009369924815cfc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?St=C3=A9phan=20Mestach?= <smestach@bluesquare.org>
Date: Fri, 6 May 2022 17:17:40 +0200
Subject: [PATCH 01/55] WIP tree selection

---
 package.json                                  |   8 +-
 src/components/App.js                         |  51 +-
 .../invoices/InvoiceSelectionContainer.js     |  37 +-
 src/components/shared/AppContent.js           |   2 +
 .../orgunit_picker/OrgUnitTreePicker.js       | 155 ++++
 yarn.lock                                     | 812 ++++++++++++++++--
 6 files changed, 962 insertions(+), 103 deletions(-)
 create mode 100644 src/components/shared/orgunit_picker/OrgUnitTreePicker.js

diff --git a/package.json b/package.json
index cae04b94..576413a4 100644
--- a/package.json
+++ b/package.json
@@ -37,8 +37,6 @@
     "@babel/preset-react": "^7.9.4",
     "@babel/runtime": "^7.9.6",
     "@date-io/moment": "2.13.1",
-    "@material-ui/core": "4.11.0",
-    "@material-ui/icons": "4.9.1",
     "@rollup/plugin-babel": "^5.0.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-json": "^4.0.3",
@@ -81,8 +79,12 @@
     "dist"
   ],
   "dependencies": {
-    "@material-ui/lab": "^4.0.0-alpha.56",
+    "react-intl": "^5.10.16",
+    "@material-ui/core": "^4.11.4",
+    "@material-ui/icons": "^4.2.1",
+    "@material-ui/lab": "^4.0.0-alpha.48",
     "@material-ui/pickers": "^3.2.10",
+    "bluesquare-components": "link:../bluesquare-components",    
     "history": "^5.0.0",
     "moment": "^2.27.0",
     "notistack": "^0.9.17",
diff --git a/src/components/App.js b/src/components/App.js
index 02df9607..0aab10a0 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -11,6 +11,7 @@ import { I18nextProvider } from "react-i18next";
 import { createMuiTheme, MuiThemeProvider } from "@material-ui/core/styles";
 import { MuiPickersUtilsProvider } from "@material-ui/pickers";
 import { store } from "./redux/store";
+import { IntlProvider } from "react-intl";
 
 import AppDrawer from "./shared/RawAppDrawer";
 import AppToolBar from "./shared/RawAppToolBar";
@@ -42,18 +43,58 @@ const queryClient = new QueryClient({
   },
 });
 
-const App = ({ classes, incentivesDescriptors, dataElementGroups, drawerLinks, defaultPathName }) => {
+const rawTheme = {
+  typography: {
+      useNextVariants: true,
+  },
+  textColor: '#333',
+  palette: {
+      primary: {
+          main: '#006699',
+          secondary: '#0066cc',
+          background: '#F5F5F5',
+      },
+      gray: {
+          main: '#666',
+          border: 'rgba(0,0,0,0.02)',
+          background: 'rgba(0,0,0,0.03)',
+      },
+      mediumGray: {
+          main: '#A2A2A2',
+      },
+      ligthGray: {
+          main: '#F7F7F7',
+          border: 'rgba(0, 0, 0, 0.12)',
+          background: 'rgba(0, 0, 0, 0.012)',
+      },
+      error: {
+          main: 'rgb(215, 25, 28)',
+          background: 'rgba(215, 25, 28, 0.2)',
+          backgroundHard: 'rgba(215, 25, 28, 0.7)',
+      },
+      success: {
+          main: '#4caf50',
+          background: 'rgba(#4caf50, 0.2)',
+      },
+  },
+};
+
+const defaultTheme = createMuiTheme(rawTheme);
+
+const App = ({ classes, incentivesDescriptors, dataElementGroups, drawerLinks, defaultPathName, children }) => {
   const registry = PluginRegistry;
 
   const invoices = registry.extension("invoices.invoices");
   const dhis2 = registry.extension("core.dhis2");
   const config = registry.extension("core.config");
   const i18n = registry.extension("core.i18n");
-  const theme = registry.extension("core.theme") || createMuiTheme();
+  const theme = registry.extension("core.theme")
+
 
   return (
+    <IntlProvider messages={{}} locale="en" defaultLocale="en">
     <MuiPickersUtilsProvider utils={MomentUtils}>
-      <MuiThemeProvider theme={theme}>
+      <MuiThemeProvider theme={defaultTheme}>
         <I18nextProvider i18n={i18n}>
           <QueryClientProvider client={queryClient}>
             <SnackbarProvider
@@ -76,7 +117,8 @@ const App = ({ classes, incentivesDescriptors, dataElementGroups, drawerLinks, d
                         invoices={invoices}
                         incentivesDescriptors={incentivesDescriptors}
                         dataElementGroups={dataElementGroups}
-                      />
+                      >{children}</AppContent>
+                      
                     </div>
                   </div>
                 </Router>
@@ -88,6 +130,7 @@ const App = ({ classes, incentivesDescriptors, dataElementGroups, drawerLinks, d
         </I18nextProvider>
       </MuiThemeProvider>
     </MuiPickersUtilsProvider>
+    </IntlProvider>
   );
 };
 
diff --git a/src/components/invoices/InvoiceSelectionContainer.js b/src/components/invoices/InvoiceSelectionContainer.js
index d0df2397..7f2549ef 100644
--- a/src/components/invoices/InvoiceSelectionContainer.js
+++ b/src/components/invoices/InvoiceSelectionContainer.js
@@ -11,6 +11,8 @@ import searchOrgunit from "./searchOrgunit";
 import SelectionResultsContainer from "./SelectionResultsContainer";
 
 import useDebounce from "../shared/useDebounce";
+import OrgUnitTreePicker from "../shared/orgunit_picker/OrgUnitTreePicker";
+import InvoiceLinks from "./InvoiceLinks";
 
 const styles = (theme) => ({
   paper: theme.mixins.gutters({
@@ -101,16 +103,47 @@ const InvoiceSelectionContainer = (props) => {
   const onParentOrganisationUnit = (orgUnitId) => {
     updateHistory(history, orgUnitId, period, debouncedSearchValue, defaultPathName);
   };
+
+  const [selectedOrgUnits, setSelectedOrgUnits] = useState([]);
   const classes = useStyles();
   const { t } = useTranslation();
   const SelectionResults = resultsElements || SelectionResultsContainer;
-
+  const onOrgUnitChange = (orgunits) => {
+    setSelectedOrgUnits(orgunits);
+  };
   return (
     <Paper className={classes.paper} square>
       <Typography variant="h6" component="h6" gutterBottom>
         {t("invoices.search.title")}
       </Typography>
       <div className={classes.filters}>
+        <div style={{ display: "flex" }}>
+          <div style={{ margin: "10px", width: "500px" }}>
+            <OrgUnitTreePicker onChange={onOrgUnitChange}></OrgUnitTreePicker>
+          </div>
+          <div>
+            {selectedOrgUnits &&
+              selectedOrgUnits.map((ou) => (
+                <div>
+                  <h2>{ou.name}</h2>
+                  <h3>Contrats</h3>
+                  {ou.activeContracts &&
+                    ou.activeContracts
+                      .filter((c) => c.matchPeriod(searchPeriod))
+                      .map((c) => (
+                        <div>
+                          {c.startPeriod} {c.endPeriod} {c.codes} {c.codes}
+                        </div>
+                      ))}
+                </div>
+              ))}
+            <h3>Factures</h3>
+
+            {selectedOrgUnits && selectedOrgUnits[0] && (
+              <InvoiceLinks {...props} t={t} orgUnit={selectedOrgUnits[0]} period={searchPeriod}></InvoiceLinks>
+            )}
+          </div>
+        </div>
         <OrgUnitAutoComplete
           organisationUnits={topLevelsOrgUnits}
           onChange={onParentOrganisationUnit}
@@ -127,7 +160,7 @@ const InvoiceSelectionContainer = (props) => {
       <br />
       <br />
       <br />
-      <SelectionResults {...props} orgUnits={orgUnits?.organisationUnits} pager={orgUnits?.pager}/>
+      <SelectionResults {...props} orgUnits={orgUnits?.organisationUnits} pager={orgUnits?.pager} />
     </Paper>
   );
 };
diff --git a/src/components/shared/AppContent.js b/src/components/shared/AppContent.js
index c2024e72..56a97d74 100644
--- a/src/components/shared/AppContent.js
+++ b/src/components/shared/AppContent.js
@@ -107,6 +107,7 @@ class AppContent extends React.Component {
       dispatch,
       drawerOpen,
       period,
+      children
     } = this.props;
 
     const frequency = period.includes("S") ? "sixMonthly" : "quarterly";
@@ -130,6 +131,7 @@ class AppContent extends React.Component {
         })}
       >
         {(!currentUser || isLoading) && <LoadingSpinner fixed />}
+        {children}
         <div className={classes.drawerHeader + " no-print"} />
         {currentUser && (
           <Switch>
diff --git a/src/components/shared/orgunit_picker/OrgUnitTreePicker.js b/src/components/shared/orgunit_picker/OrgUnitTreePicker.js
new file mode 100644
index 00000000..a4a32725
--- /dev/null
+++ b/src/components/shared/orgunit_picker/OrgUnitTreePicker.js
@@ -0,0 +1,155 @@
+import React, { useState } from "react";
+import { getInstance } from "d2/lib/d2";
+import { TreeViewWithSearch } from "bluesquare-components";
+import PluginRegistry from "../../core/PluginRegistry";
+
+// act as a cache to speed up first levels click
+const loadedOrgUnitsById = {};
+let contractsByOrgUnitId = {};
+
+const defaultOrgUnitFields =
+  "id,name,ancestors[id,name],children[id,name,ancestors[id,name],children[id,name,ancestors[id,name],children]]";
+
+const withHasChildren = (organisationUnits) => {
+  for (let ou of organisationUnits) {
+    ou.has_children = ou.children && ou.children.length > 0;
+    ou.activeContracts = contractsByOrgUnitId[ou.id];
+    if (ou.activeContracts) {
+      debugger;
+    }
+    loadedOrgUnitsById[ou.id] = ou;
+  }
+  organisationUnits.sort((a, b) => a.name.localeCompare(b.name));
+  return organisationUnits;
+};
+
+export const getRootData = async (id, type = "source") => {
+  if (Object.keys(contractsByOrgUnitId).length == 0) {
+    const contractService = PluginRegistry.extension("contracts.service");
+    const allContracts = await contractService.findAll();
+    contractsByOrgUnitId = _.groupBy(allContracts, (c) => c.orgUnit.id);
+  }
+
+  const d2 = await getInstance();
+  const api = await d2.Api.getApi();
+  const resp = await api.get("organisationUnits", {
+    filter: "level:eq:1",
+    fields: defaultOrgUnitFields,
+    paging: false,
+  });
+
+  return withHasChildren(resp.organisationUnits);
+};
+
+export const label = (data) => {
+  return data.name;
+};
+
+export const getChildrenData = async (id) => {
+  const loadedOrgUnit = loadedOrgUnitsById[id];
+  if (loadedOrgUnit && loadedOrgUnit.children && loadedOrgUnit.children[0].children) {
+    return withHasChildren(loadedOrgUnit.children);
+  }
+  const d2 = await getInstance();
+  const api = await d2.Api.getApi();
+  const resp = await api.get("organisationUnits", {
+    filter: "parent.id:eq:" + id,
+    fields: defaultOrgUnitFields,
+    paging: false,
+  });
+
+  return withHasChildren(resp.organisationUnits);
+};
+
+const search = (input1, input2, type) => {
+  debugger;
+  console.log(input1, input2, type);
+  return [];
+};
+
+const request = async (value, count, source, version) => {
+  const d2 = await getInstance();
+  const api = await d2.Api.getApi();
+  const resp = await api.get("organisationUnits", {
+    filter: "name:ilike:" + value,
+    fields: defaultOrgUnitFields,
+  });
+
+  return withHasChildren(resp.organisationUnits);
+};
+const makeDropDownText = (orgUnit) => {
+  return (
+    <div>
+      <span display="block">
+        {orgUnit.name} <code style={{ color: "lightgrey" }}>{orgUnit.id}</code>
+      </span>
+      <pre style={{ fontSize: "8px" }}>
+        {orgUnit.ancestors
+          .slice(1)
+          .map((o) => o.name)
+          .join(" > ")}
+      </pre>
+      <hr></hr>
+    </div>
+  );
+};
+const onOrgUnitSelect = (orgUnit) => {
+  debugger;
+  alert("Selected " + orgUnit.name);
+  return [];
+};
+
+const parseNodeIds = (orgUnit) => {
+  const parsed = orgUnit.ancestors.map((a) => [a.id, a]).concat([[orgUnit.id, orgUnit]]);
+  debugger;
+  return new Map(parsed);
+};
+
+const formatInitialSelectedIds = (selection) => [];
+const formatInitialSelectedParents = (selection) => new Map();
+
+const OrgUnitTreePicker = ({ initialSelection, onChange }) => {
+  const [selectedOrgUnits, setSelectedOrgUnits] = useState(initialSelection);
+
+  const [selectedOrgUnitsIds, setSelectedOrgUnitsIds] = useState(formatInitialSelectedIds(initialSelection));
+  // Using this value to generate TruncatedTree and tell the Treeview which nodes are already expanded
+  const [selectedOrgUnitParents, setSelectedOrgUnitParents] = useState(formatInitialSelectedParents(initialSelection));
+
+  const onUpdate = (orgUnitIds, parentsData, orgUnits) => {
+    setSelectedOrgUnitsIds(orgUnitIds);
+    setSelectedOrgUnitParents(parentsData);
+    if (orgUnits) {
+      setSelectedOrgUnits(orgUnits);
+    }
+    if (onChange) {
+      onChange(orgUnits);
+    }
+  };
+
+  const treeProps = {
+    getRootData,
+    label,
+    getChildrenData,
+    search,
+    request,
+    makeDropDownText,
+    onSelect: onOrgUnitSelect,
+    onUpdate: onUpdate,
+    parseNodeIds: parseNodeIds,
+    toggleOnLabelClick: false,
+    isSelectable: () => true,
+  };
+
+  return (
+    <div>
+      <TreeViewWithSearch
+        {...treeProps}
+        preselected={selectedOrgUnitsIds}
+        preexpanded={selectedOrgUnitParents}
+        selectedData={selectedOrgUnits}
+      />
+    </div>
+  );
+};
+
+export default OrgUnitTreePicker;
diff --git a/yarn.lock b/yarn.lock
index ba19f46e..9ab87be5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,6 +2,14 @@
 # yarn lockfile v1
 
 
+"@ampproject/remapping@^2.1.0":
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.2.0.tgz#56c133824780de3174aed5ab6834f3026790154d"
+  integrity sha512-qRmjj8nj9qmLTQXXmaR1cck3UXSRMPrbsLJAasZpF+t3riI71BXed5ebIOYwQntykeZuhjsdweEc9BxH5Jc26w==
+  dependencies:
+    "@jridgewell/gen-mapping" "^0.1.0"
+    "@jridgewell/trace-mapping" "^0.3.9"
+
 "@babel/cli@^7.8.4":
   version "7.12.10"
   resolved "https://registry.yarnpkg.com/@babel/cli/-/cli-7.12.10.tgz#67a1015b1cd505bde1696196febf910c4c339a48"
@@ -33,11 +41,23 @@
   dependencies:
     "@babel/highlight" "^7.10.4"
 
+"@babel/code-frame@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.16.7.tgz#44416b6bd7624b998f5b1af5d470856c40138789"
+  integrity sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==
+  dependencies:
+    "@babel/highlight" "^7.16.7"
+
 "@babel/compat-data@^7.12.5", "@babel/compat-data@^7.12.7", "@babel/compat-data@^7.9.0":
   version "7.12.7"
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.12.7.tgz#9329b4782a7d6bbd7eef57e11addf91ee3ef1e41"
   integrity sha512-YaxPMGs/XIWtYqrdEOZOCPsVWfEoriXopnsz3/i7apYPXQ3698UFhS6dVT1KN5qOsWmVgw/FOrmQgpRaZayGsw==
 
+"@babel/compat-data@^7.13.11", "@babel/compat-data@^7.17.10":
+  version "7.17.10"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.17.10.tgz#711dc726a492dfc8be8220028b1b92482362baab"
+  integrity sha512-GZt/TCsG70Ms19gfZO1tM4CVnXsPgEPBCpJu+Qz3L0LUDsY5nZqFZglIoPC1kIYOtNBZlrnFT+klg12vFGZXrw==
+
 "@babel/core@7.9.0":
   version "7.9.0"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.9.0.tgz#ac977b538b77e132ff706f3b8a4dbad09c03c56e"
@@ -81,6 +101,27 @@
     semver "^5.4.1"
     source-map "^0.5.0"
 
+"@babel/core@^7.10.4":
+  version "7.17.10"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.17.10.tgz#74ef0fbf56b7dfc3f198fc2d927f4f03e12f4b05"
+  integrity sha512-liKoppandF3ZcBnIYFjfSDHZLKdLHGJRkoWtG8zQyGJBQfIYobpnVGI5+pLBNtS6psFLDzyq8+h5HiVljW9PNA==
+  dependencies:
+    "@ampproject/remapping" "^2.1.0"
+    "@babel/code-frame" "^7.16.7"
+    "@babel/generator" "^7.17.10"
+    "@babel/helper-compilation-targets" "^7.17.10"
+    "@babel/helper-module-transforms" "^7.17.7"
+    "@babel/helpers" "^7.17.9"
+    "@babel/parser" "^7.17.10"
+    "@babel/template" "^7.16.7"
+    "@babel/traverse" "^7.17.10"
+    "@babel/types" "^7.17.10"
+    convert-source-map "^1.7.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.2"
+    json5 "^2.2.1"
+    semver "^6.3.0"
+
 "@babel/generator@^7.12.10", "@babel/generator@^7.12.11", "@babel/generator@^7.4.0", "@babel/generator@^7.9.0":
   version "7.12.11"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.12.11.tgz#98a7df7b8c358c9a37ab07a24056853016aba3af"
@@ -90,6 +131,15 @@
     jsesc "^2.5.1"
     source-map "^0.5.0"
 
+"@babel/generator@^7.17.10":
+  version "7.17.10"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.17.10.tgz#c281fa35b0c349bbe9d02916f4ae08fc85ed7189"
+  integrity sha512-46MJZZo9y3o4kmhBVc7zW7i8dtR1oIK/sdO5NcfcZRhTGYi+KKJRtHNgsU6c4VUcJmUNV/LQdebD/9Dlv4K+Tg==
+  dependencies:
+    "@babel/types" "^7.17.10"
+    "@jridgewell/gen-mapping" "^0.1.0"
+    jsesc "^2.5.1"
+
 "@babel/helper-annotate-as-pure@^7.10.4", "@babel/helper-annotate-as-pure@^7.12.10":
   version "7.12.10"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.12.10.tgz#54ab9b000e60a93644ce17b3f37d313aaf1d115d"
@@ -97,6 +147,13 @@
   dependencies:
     "@babel/types" "^7.12.10"
 
+"@babel/helper-annotate-as-pure@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.7.tgz#bb2339a7534a9c128e3102024c60760a3a7f3862"
+  integrity sha512-s6t2w/IPQVTAET1HitoowRGXooX8mCgtuP5195wD/QJPV6wYjpujCGF7JuMODVX2ZAJOf1GT6DT9MHEZvLOFSw==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-builder-binary-assignment-operator-visitor@^7.10.4":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.10.4.tgz#bb0b75f31bf98cbf9ff143c1ae578b87274ae1a3"
@@ -115,6 +172,16 @@
     browserslist "^4.14.5"
     semver "^5.5.0"
 
+"@babel/helper-compilation-targets@^7.13.0", "@babel/helper-compilation-targets@^7.17.10":
+  version "7.17.10"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.17.10.tgz#09c63106d47af93cf31803db6bc49fef354e2ebe"
+  integrity sha512-gh3RxjWbauw/dFiU/7whjd0qN9K6nPJMqe6+Er7rOavFh0CQUSwhAE3IcTho2rywPJFxej6TUUHDkWcYI6gGqQ==
+  dependencies:
+    "@babel/compat-data" "^7.17.10"
+    "@babel/helper-validator-option" "^7.16.7"
+    browserslist "^4.20.2"
+    semver "^6.3.0"
+
 "@babel/helper-create-class-features-plugin@^7.12.1", "@babel/helper-create-class-features-plugin@^7.8.3":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.12.1.tgz#3c45998f431edd4a9214c5f1d3ad1448a6137f6e"
@@ -126,6 +193,19 @@
     "@babel/helper-replace-supers" "^7.12.1"
     "@babel/helper-split-export-declaration" "^7.10.4"
 
+"@babel/helper-create-class-features-plugin@^7.16.7":
+  version "7.17.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.17.9.tgz#71835d7fb9f38bd9f1378e40a4c0902fdc2ea49d"
+  integrity sha512-kUjip3gruz6AJKOq5i3nC6CoCEEF/oHH3cp6tOZhB+IyyyPyW0g1Gfsxn3mkk6S08pIA2y8GQh609v9G/5sHVQ==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.16.7"
+    "@babel/helper-environment-visitor" "^7.16.7"
+    "@babel/helper-function-name" "^7.17.9"
+    "@babel/helper-member-expression-to-functions" "^7.17.7"
+    "@babel/helper-optimise-call-expression" "^7.16.7"
+    "@babel/helper-replace-supers" "^7.16.7"
+    "@babel/helper-split-export-declaration" "^7.16.7"
+
 "@babel/helper-create-regexp-features-plugin@^7.12.1":
   version "7.12.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.12.7.tgz#2084172e95443fa0a09214ba1bb328f9aea1278f"
@@ -143,6 +223,27 @@
     "@babel/types" "^7.10.5"
     lodash "^4.17.19"
 
+"@babel/helper-define-polyfill-provider@^0.3.1":
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.3.1.tgz#52411b445bdb2e676869e5a74960d2d3826d2665"
+  integrity sha512-J9hGMpJQmtWmj46B3kBHmL38UhJGhYX7eqkcq+2gsstyYt341HmPeWspihX43yVRA0mS+8GGk2Gckc7bY/HCmA==
+  dependencies:
+    "@babel/helper-compilation-targets" "^7.13.0"
+    "@babel/helper-module-imports" "^7.12.13"
+    "@babel/helper-plugin-utils" "^7.13.0"
+    "@babel/traverse" "^7.13.0"
+    debug "^4.1.1"
+    lodash.debounce "^4.0.8"
+    resolve "^1.14.2"
+    semver "^6.1.2"
+
+"@babel/helper-environment-visitor@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.16.7.tgz#ff484094a839bde9d89cd63cba017d7aae80ecd7"
+  integrity sha512-SLLb0AAn6PkUeAfKJCCOl9e1R53pQlGAfc4y4XuMRZfqeMYLE0dM1LMhqbGAlGQY0lfw5/ohoYWAe9V1yibRag==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-explode-assignable-expression@^7.10.4":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.12.1.tgz#8006a466695c4ad86a2a5f2fb15b5f2c31ad5633"
@@ -159,6 +260,14 @@
     "@babel/template" "^7.12.7"
     "@babel/types" "^7.12.11"
 
+"@babel/helper-function-name@^7.17.9":
+  version "7.17.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.17.9.tgz#136fcd54bc1da82fcb47565cf16fd8e444b1ff12"
+  integrity sha512-7cRisGlVtiVqZ0MW0/yFB4atgpGLWEHUVYnb448hZK4x+vih0YO5UoS11XIYtZYqHd0dIPMdUSv8q5K4LdMnIg==
+  dependencies:
+    "@babel/template" "^7.16.7"
+    "@babel/types" "^7.17.0"
+
 "@babel/helper-get-function-arity@^7.12.10":
   version "7.12.10"
   resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.12.10.tgz#b158817a3165b5faa2047825dfa61970ddcc16cf"
@@ -173,6 +282,13 @@
   dependencies:
     "@babel/types" "^7.10.4"
 
+"@babel/helper-hoist-variables@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.16.7.tgz#86bcb19a77a509c7b77d0e22323ef588fa58c246"
+  integrity sha512-m04d/0Op34H5v7pbZw6pSKP7weA6lsMvfiIAMeIvkY/R4xQtBSMFEigu9QTZ2qB/9l22vsxtM8a+Q8CzD255fg==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-member-expression-to-functions@^7.12.1", "@babel/helper-member-expression-to-functions@^7.12.7":
   version "7.12.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.12.7.tgz#aa77bd0396ec8114e5e30787efa78599d874a855"
@@ -180,6 +296,13 @@
   dependencies:
     "@babel/types" "^7.12.7"
 
+"@babel/helper-member-expression-to-functions@^7.16.7", "@babel/helper-member-expression-to-functions@^7.17.7":
+  version "7.17.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.17.7.tgz#a34013b57d8542a8c4ff8ba3f747c02452a4d8c4"
+  integrity sha512-thxXgnQ8qQ11W2wVUObIqDL4p148VMxkt5T/qpN5k2fboRyzFGFmKsTGViquyM5QHKUy48OZoca8kw4ajaDPyw==
+  dependencies:
+    "@babel/types" "^7.17.0"
+
 "@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.10.4", "@babel/helper-module-imports@^7.12.1", "@babel/helper-module-imports@^7.12.5", "@babel/helper-module-imports@^7.8.3":
   version "7.12.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.12.5.tgz#1bfc0229f794988f76ed0a4d4e90860850b54dfb"
@@ -187,6 +310,13 @@
   dependencies:
     "@babel/types" "^7.12.5"
 
+"@babel/helper-module-imports@^7.12.13", "@babel/helper-module-imports@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.16.7.tgz#25612a8091a999704461c8a222d0efec5d091437"
+  integrity sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-module-transforms@^7.12.1", "@babel/helper-module-transforms@^7.9.0":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.12.1.tgz#7954fec71f5b32c48e4b303b437c34453fd7247c"
@@ -202,6 +332,20 @@
     "@babel/types" "^7.12.1"
     lodash "^4.17.19"
 
+"@babel/helper-module-transforms@^7.17.7":
+  version "7.17.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.17.7.tgz#3943c7f777139e7954a5355c815263741a9c1cbd"
+  integrity sha512-VmZD99F3gNTYB7fJRDTi+u6l/zxY0BE6OIxPSU7a50s6ZUQkHwSDmV92FfM+oCG0pZRVojGYhkR8I0OGeCVREw==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.16.7"
+    "@babel/helper-module-imports" "^7.16.7"
+    "@babel/helper-simple-access" "^7.17.7"
+    "@babel/helper-split-export-declaration" "^7.16.7"
+    "@babel/helper-validator-identifier" "^7.16.7"
+    "@babel/template" "^7.16.7"
+    "@babel/traverse" "^7.17.3"
+    "@babel/types" "^7.17.0"
+
 "@babel/helper-optimise-call-expression@^7.10.4", "@babel/helper-optimise-call-expression@^7.12.10":
   version "7.12.10"
   resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.12.10.tgz#94ca4e306ee11a7dd6e9f42823e2ac6b49881e2d"
@@ -209,11 +353,23 @@
   dependencies:
     "@babel/types" "^7.12.10"
 
+"@babel/helper-optimise-call-expression@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.16.7.tgz#a34e3560605abbd31a18546bd2aad3e6d9a174f2"
+  integrity sha512-EtgBhg7rd/JcnpZFXpBy0ze1YRfdm7BnBX4uKMBd3ixa3RGAE002JZB66FJyNH7g0F38U05pXmA5P8cBh7z+1w==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.4.tgz#2f75a831269d4f677de49986dff59927533cf375"
   integrity sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg==
 
+"@babel/helper-plugin-utils@^7.13.0", "@babel/helper-plugin-utils@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.16.7.tgz#aa3a8ab4c3cceff8e65eb9e73d87dc4ff320b2f5"
+  integrity sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA==
+
 "@babel/helper-remap-async-to-generator@^7.12.1":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.12.1.tgz#8c4dbbf916314f6047dc05e6a2217074238347fd"
@@ -233,6 +389,17 @@
     "@babel/traverse" "^7.12.10"
     "@babel/types" "^7.12.11"
 
+"@babel/helper-replace-supers@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.16.7.tgz#e9f5f5f32ac90429c1a4bdec0f231ef0c2838ab1"
+  integrity sha512-y9vsWilTNaVnVh6xiJfABzsNpgDPKev9HnAgz6Gb1p6UUwf9NepdlsV7VXGCftJM+jqD5f7JIEubcpLjZj5dBw==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.16.7"
+    "@babel/helper-member-expression-to-functions" "^7.16.7"
+    "@babel/helper-optimise-call-expression" "^7.16.7"
+    "@babel/traverse" "^7.16.7"
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-simple-access@^7.12.1":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.12.1.tgz#32427e5aa61547d38eb1e6eaf5fd1426fdad9136"
@@ -240,6 +407,13 @@
   dependencies:
     "@babel/types" "^7.12.1"
 
+"@babel/helper-simple-access@^7.17.7":
+  version "7.17.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.17.7.tgz#aaa473de92b7987c6dfa7ce9a7d9674724823367"
+  integrity sha512-txyMCGroZ96i+Pxr3Je3lzEJjqwaRC9buMUgtomcrLe5Nd0+fk1h0LLA+ixUF5OW7AhHuQ7Es1WcQJZmZsz2XA==
+  dependencies:
+    "@babel/types" "^7.17.0"
+
 "@babel/helper-skip-transparent-expression-wrappers@^7.12.1":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.12.1.tgz#462dc63a7e435ade8468385c63d2b84cce4b3cbf"
@@ -254,16 +428,33 @@
   dependencies:
     "@babel/types" "^7.12.11"
 
+"@babel/helper-split-export-declaration@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.16.7.tgz#0b648c0c42da9d3920d85ad585f2778620b8726b"
+  integrity sha512-xbWoy/PFoxSWazIToT9Sif+jJTlrMcndIsaOKvTA6u7QEo7ilkRZpjew18/W3c7nm8fXdUDXh02VXTbZ0pGDNw==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-validator-identifier@^7.10.4", "@babel/helper-validator-identifier@^7.12.11":
   version "7.12.11"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz#c9a1f021917dcb5ccf0d4e453e399022981fc9ed"
   integrity sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw==
 
+"@babel/helper-validator-identifier@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz#e8c602438c4a8195751243da9031d1607d247cad"
+  integrity sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==
+
 "@babel/helper-validator-option@^7.12.1", "@babel/helper-validator-option@^7.12.11":
   version "7.12.11"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.12.11.tgz#d66cb8b7a3e7fe4c6962b32020a131ecf0847f4f"
   integrity sha512-TBFCyj939mFSdeX7U7DDj32WtzYY7fDcalgq8v3fBZMNOJQNn7nOYzMaUCiPxPYfCup69mtIpqlKgMZLvQ8Xhw==
 
+"@babel/helper-validator-option@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.16.7.tgz#b203ce62ce5fe153899b617c08957de860de4d23"
+  integrity sha512-TRtenOuRUVo9oIQGPC5G9DgK4743cdxvtOw0weQNpZXaS16SCBi5MNjZF8vba3ETURjZpTbVn7Vvcf2eAwFozQ==
+
 "@babel/helper-wrap-function@^7.10.4":
   version "7.12.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.12.3.tgz#3332339fc4d1fbbf1c27d7958c27d34708e990d9"
@@ -283,6 +474,15 @@
     "@babel/traverse" "^7.12.5"
     "@babel/types" "^7.12.5"
 
+"@babel/helpers@^7.17.9":
+  version "7.17.9"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.17.9.tgz#b2af120821bfbe44f9907b1826e168e819375a1a"
+  integrity sha512-cPCt915ShDWUEzEp3+UNRktO2n6v49l5RSnG9M5pS24hA+2FAc5si+Pn1i4VVbQQ+jh+bIZhPFQOJOzbrOYY1Q==
+  dependencies:
+    "@babel/template" "^7.16.7"
+    "@babel/traverse" "^7.17.9"
+    "@babel/types" "^7.17.0"
+
 "@babel/highlight@^7.10.4", "@babel/highlight@^7.8.3":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.10.4.tgz#7d1bdfd65753538fabe6c38596cdb76d9ac60143"
@@ -292,11 +492,25 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
+"@babel/highlight@^7.16.7":
+  version "7.17.9"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.17.9.tgz#61b2ee7f32ea0454612def4fccdae0de232b73e3"
+  integrity sha512-J9PfEKCbFIv2X5bjTMiZu6Vf341N05QIY+d6FvVKynkG1S7G0j3I0QoRtWIrXhZ+/Nlb5Q0MzqL7TokEJ5BNHg==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.16.7"
+    chalk "^2.0.0"
+    js-tokens "^4.0.0"
+
 "@babel/parser@^7.1.0", "@babel/parser@^7.12.10", "@babel/parser@^7.12.11", "@babel/parser@^7.12.7", "@babel/parser@^7.4.3", "@babel/parser@^7.7.0", "@babel/parser@^7.9.0", "@babel/parser@^7.9.4":
   version "7.12.11"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.12.11.tgz#9ce3595bcd74bc5c466905e86c535b8b25011e79"
   integrity sha512-N3UxG+uuF4CMYoNj8AhnbAcJF0PiuJ9KHuy1lQmkYsxTer/MAH9UBNHsBoAX/4s6NvlDD047No8mYVGGzLL4hg==
 
+"@babel/parser@^7.16.7", "@babel/parser@^7.17.10":
+  version "7.17.10"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.17.10.tgz#873b16db82a8909e0fbd7f115772f4b739f6ce78"
+  integrity sha512-n2Q6i+fnJqzOaq2VkdXxy2TCPCWQZHiCo0XqmrCvDWcZQKRyZzYi4Z0yxlBuN0w+r2ZHmre+Q087DSrw3pbJDQ==
+
 "@babel/plugin-proposal-async-generator-functions@^7.12.1", "@babel/plugin-proposal-async-generator-functions@^7.8.3":
   version "7.12.12"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.12.12.tgz#04b8f24fd4532008ab4e79f788468fd5a8476566"
@@ -494,6 +708,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
+"@babel/plugin-syntax-jsx@7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.16.7.tgz#50b6571d13f764266a113d77c82b4a6508bbe665"
+  integrity sha512-Esxmk7YjA8QysKeT3VhTXvF6y77f/a91SIs4pWb4H2eWGQkCKFgQaG6hdoEVZtGsrAcb2K5BW66XsOErD4WU3Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
 "@babel/plugin-syntax-jsx@^7.12.1":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.12.1.tgz#9d9d357cc818aa7ae7935917c1257f67677a0926"
@@ -557,6 +778,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
 
+"@babel/plugin-syntax-typescript@^7.16.7":
+  version "7.17.10"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.17.10.tgz#80031e6042cad6a95ed753f672ebd23c30933195"
+  integrity sha512-xJefea1DWXW09pW4Tm9bjwVlPDyYA2it3fWlmEjpYz6alPvTUjL0EOzNzI/FEOyI3r4/J7uVH5UqKgl1TQ5hqQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
 "@babel/plugin-transform-arrow-functions@^7.12.1", "@babel/plugin-transform-arrow-functions@^7.8.3":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.12.1.tgz#8083ffc86ac8e777fbe24b5967c4b2521f3cb2b3"
@@ -834,6 +1062,18 @@
     resolve "^1.8.1"
     semver "^5.5.1"
 
+"@babel/plugin-transform-runtime@^7.17.0":
+  version "7.17.10"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.17.10.tgz#b89d821c55d61b5e3d3c3d1d636d8d5a81040ae1"
+  integrity sha512-6jrMilUAJhktTr56kACL8LnWC5hx3Lf27BS0R0DSyW/OoJfb/iTHeE96V3b1dgKG3FSFdd/0culnYWMkjcKCig==
+  dependencies:
+    "@babel/helper-module-imports" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.16.7"
+    babel-plugin-polyfill-corejs2 "^0.3.0"
+    babel-plugin-polyfill-corejs3 "^0.5.0"
+    babel-plugin-polyfill-regenerator "^0.3.0"
+    semver "^6.3.0"
+
 "@babel/plugin-transform-runtime@^7.9.6":
   version "7.12.10"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.12.10.tgz#af0fded4e846c4b37078e8e5d06deac6cd848562"
@@ -879,6 +1119,15 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
 
+"@babel/plugin-transform-typescript@^7.16.7":
+  version "7.16.8"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.16.8.tgz#591ce9b6b83504903fa9dd3652c357c2ba7a1ee0"
+  integrity sha512-bHdQ9k7YpBDO2d0NVfkj51DpQcvwIzIusJ7mEUaMlbZq3Kt/U47j24inXZHQ5MDiYpCs+oZiwnXyKedE8+q7AQ==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/plugin-syntax-typescript" "^7.16.7"
+
 "@babel/plugin-transform-typescript@^7.9.0":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.12.1.tgz#d92cc0af504d510e26a754a7dbc2e5c8cd9c7ab4"
@@ -1083,6 +1332,15 @@
     "@babel/helper-plugin-utils" "^7.8.3"
     "@babel/plugin-transform-typescript" "^7.9.0"
 
+"@babel/preset-typescript@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.16.7.tgz#ab114d68bb2020afc069cd51b37ff98a046a70b9"
+  integrity sha512-WbVEmgXdIyvzB77AQjGBEyYPZx+8tTsO50XtfozQrkW8QB2rLJpH2lgx0TRw5EJrBxOZQ+wCcyPVQvS8tjEHpQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-validator-option" "^7.16.7"
+    "@babel/plugin-transform-typescript" "^7.16.7"
+
 "@babel/runtime-corejs3@^7.12.1":
   version "7.12.5"
   resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.12.5.tgz#ffee91da0eb4c6dae080774e94ba606368e414f4"
@@ -1112,6 +1370,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.17.2":
+  version "7.17.9"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.9.tgz#d19fbf802d01a8cb6cf053a64e472d42c434ba72"
+  integrity sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.10.4", "@babel/template@^7.12.7", "@babel/template@^7.4.0", "@babel/template@^7.8.6":
   version "7.12.7"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.12.7.tgz#c817233696018e39fbb6c491d2fb684e05ed43bc"
@@ -1121,6 +1386,31 @@
     "@babel/parser" "^7.12.7"
     "@babel/types" "^7.12.7"
 
+"@babel/template@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.7.tgz#8d126c8701fde4d66b264b3eba3d96f07666d155"
+  integrity sha512-I8j/x8kHUrbYRTUxXrrMbfCa7jxkE7tZre39x3kjr9hvI82cK1FfqLygotcWN5kdPGWcLdWMHpSBavse5tWw3w==
+  dependencies:
+    "@babel/code-frame" "^7.16.7"
+    "@babel/parser" "^7.16.7"
+    "@babel/types" "^7.16.7"
+
+"@babel/traverse@7", "@babel/traverse@^7.13.0", "@babel/traverse@^7.16.7", "@babel/traverse@^7.17.10", "@babel/traverse@^7.17.3", "@babel/traverse@^7.17.9":
+  version "7.17.10"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.17.10.tgz#1ee1a5ac39f4eac844e6cf855b35520e5eb6f8b5"
+  integrity sha512-VmbrTHQteIdUUQNTb+zE12SHS/xQVIShmBPhlNP12hD5poF2pbITW1Z4172d03HegaQWhLffdkRJYtAzp0AGcw==
+  dependencies:
+    "@babel/code-frame" "^7.16.7"
+    "@babel/generator" "^7.17.10"
+    "@babel/helper-environment-visitor" "^7.16.7"
+    "@babel/helper-function-name" "^7.17.9"
+    "@babel/helper-hoist-variables" "^7.16.7"
+    "@babel/helper-split-export-declaration" "^7.16.7"
+    "@babel/parser" "^7.17.10"
+    "@babel/types" "^7.17.10"
+    debug "^4.1.0"
+    globals "^11.1.0"
+
 "@babel/traverse@^7.1.0", "@babel/traverse@^7.10.4", "@babel/traverse@^7.12.1", "@babel/traverse@^7.12.10", "@babel/traverse@^7.12.5", "@babel/traverse@^7.4.3", "@babel/traverse@^7.7.0", "@babel/traverse@^7.9.0":
   version "7.12.12"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.12.12.tgz#d0cd87892704edd8da002d674bc811ce64743376"
@@ -1145,6 +1435,14 @@
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.16.7", "@babel/types@^7.17.0", "@babel/types@^7.17.10":
+  version "7.17.10"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.17.10.tgz#d35d7b4467e439fcf06d195f8100e0fea7fc82c4"
+  integrity sha512-9O26jG0mBYfGkUYCYZRnBwbVLd1UZOICEr2Em6InB6jVfsAv1GKgwXHmrSg+WFWDmeKTA6vyTZiN8tCSM5Oo3A==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.16.7"
+    to-fast-properties "^2.0.0"
+
 "@cnakazawa/watch@^1.0.3":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.4.tgz#f864ae85004d0fcab6f50be9141c4da368d1656a"
@@ -1257,6 +1555,87 @@
   resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
   integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
 
+"@formatjs/ecma402-abstract@1.11.4":
+  version "1.11.4"
+  resolved "https://registry.yarnpkg.com/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.4.tgz#b962dfc4ae84361f9f08fbce411b4e4340930eda"
+  integrity sha512-EBikYFp2JCdIfGEb5G9dyCkTGDmC57KSHhRQOC3aYxoPWVZvfWCDjZwkGYHN7Lis/fmuWl906bnNTJifDQ3sXw==
+  dependencies:
+    "@formatjs/intl-localematcher" "0.2.25"
+    tslib "^2.1.0"
+
+"@formatjs/fast-memoize@1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@formatjs/fast-memoize/-/fast-memoize-1.2.1.tgz#e6f5aee2e4fd0ca5edba6eba7668e2d855e0fc21"
+  integrity sha512-Rg0e76nomkz3vF9IPlKeV+Qynok0r7YZjL6syLz4/urSg0IbjPZCB/iYUMNsYA643gh4mgrX3T7KEIFIxJBQeg==
+  dependencies:
+    tslib "^2.1.0"
+
+"@formatjs/icu-messageformat-parser@2.1.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.1.0.tgz#a54293dd7f098d6a6f6a084ab08b6d54a3e8c12d"
+  integrity sha512-Qxv/lmCN6hKpBSss2uQ8IROVnta2r9jd3ymUEIjm2UyIkUCHVcbUVRGL/KS/wv7876edvsPe+hjHVJ4z8YuVaw==
+  dependencies:
+    "@formatjs/ecma402-abstract" "1.11.4"
+    "@formatjs/icu-skeleton-parser" "1.3.6"
+    tslib "^2.1.0"
+
+"@formatjs/icu-skeleton-parser@1.3.6":
+  version "1.3.6"
+  resolved "https://registry.yarnpkg.com/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.3.6.tgz#4ce8c0737d6f07b735288177049e97acbf2e8964"
+  integrity sha512-I96mOxvml/YLrwU2Txnd4klA7V8fRhb6JG/4hm3VMNmeJo1F03IpV2L3wWt7EweqNLES59SZ4d6hVOPCSf80Bg==
+  dependencies:
+    "@formatjs/ecma402-abstract" "1.11.4"
+    tslib "^2.1.0"
+
+"@formatjs/intl-displaynames@5.4.3":
+  version "5.4.3"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl-displaynames/-/intl-displaynames-5.4.3.tgz#e468586694350c722c7efab1a31fcde68aeaed8b"
+  integrity sha512-4r12A3mS5dp5hnSaQCWBuBNfi9Amgx2dzhU4lTFfhSxgb5DOAiAbMpg6+7gpWZgl4ahsj3l2r/iHIjdmdXOE2Q==
+  dependencies:
+    "@formatjs/ecma402-abstract" "1.11.4"
+    "@formatjs/intl-localematcher" "0.2.25"
+    tslib "^2.1.0"
+
+"@formatjs/intl-listformat@6.5.3":
+  version "6.5.3"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl-listformat/-/intl-listformat-6.5.3.tgz#f29da613a8062dc3e4e3d847ba890c3ea745f051"
+  integrity sha512-ozpz515F/+3CU+HnLi5DYPsLa6JoCfBggBSSg/8nOB5LYSFW9+ZgNQJxJ8tdhKYeODT+4qVHX27EeJLoxLGLNg==
+  dependencies:
+    "@formatjs/ecma402-abstract" "1.11.4"
+    "@formatjs/intl-localematcher" "0.2.25"
+    tslib "^2.1.0"
+
+"@formatjs/intl-localematcher@0.2.25":
+  version "0.2.25"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl-localematcher/-/intl-localematcher-0.2.25.tgz#60892fe1b271ec35ba07a2eb018a2dd7bca6ea3a"
+  integrity sha512-YmLcX70BxoSopLFdLr1Ds99NdlTI2oWoLbaUW2M406lxOIPzE1KQhRz2fPUkq34xVZQaihCoU29h0KK7An3bhA==
+  dependencies:
+    tslib "^2.1.0"
+
+"@formatjs/intl@2.2.1":
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl/-/intl-2.2.1.tgz#6daf4dabed055b17f467f0aa1bc073a626bc9189"
+  integrity sha512-vgvyUOOrzqVaOFYzTf2d3+ToSkH2JpR7x/4U1RyoHQLmvEaTQvXJ7A2qm1Iy3brGNXC/+/7bUlc3lpH+h/LOJA==
+  dependencies:
+    "@formatjs/ecma402-abstract" "1.11.4"
+    "@formatjs/fast-memoize" "1.2.1"
+    "@formatjs/icu-messageformat-parser" "2.1.0"
+    "@formatjs/intl-displaynames" "5.4.3"
+    "@formatjs/intl-listformat" "6.5.3"
+    intl-messageformat "9.13.0"
+    tslib "^2.1.0"
+
+"@formatjs/ts-transformer@3.9.4":
+  version "3.9.4"
+  resolved "https://registry.yarnpkg.com/@formatjs/ts-transformer/-/ts-transformer-3.9.4.tgz#14b43628d082cb8cd8bc15c4893197b59903ec2c"
+  integrity sha512-S5q/zsTodaKtxVxNvbRQ9APenJtm5smXE76usS+5yF2vWQdZHkagmOKWfgvfIbesP4SR2B+i3koqlnlpqSIp5w==
+  dependencies:
+    "@formatjs/icu-messageformat-parser" "2.1.0"
+    "@types/node" "14 || 16 || 17"
+    chalk "^4.0.0"
+    tslib "^2.1.0"
+    typescript "^4.5"
+
 "@hapi/address@2.x.x":
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"
@@ -1437,38 +1816,69 @@
     "@types/istanbul-reports" "^1.1.1"
     "@types/yargs" "^13.0.0"
 
-"@material-ui/core@4.11.0":
-  version "4.11.0"
-  resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.11.0.tgz#b69b26e4553c9e53f2bfaf1053e216a0af9be15a"
-  integrity sha512-bYo9uIub8wGhZySHqLQ833zi4ZML+XCBE1XwJ8EuUVSpTWWG57Pm+YugQToJNFsEyiKFhPh8DPD0bgupz8n01g==
+"@jridgewell/gen-mapping@^0.1.0":
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz#e5d2e450306a9491e3bd77e323e38d7aff315996"
+  integrity sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w==
+  dependencies:
+    "@jridgewell/set-array" "^1.0.0"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+
+"@jridgewell/resolve-uri@^3.0.3":
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.0.7.tgz#30cd49820a962aff48c8fffc5cd760151fca61fe"
+  integrity sha512-8cXDaBBHOr2pQ7j77Y6Vp5VDT2sIqWyWQ56TjEq4ih/a4iST3dItRe8Q9fp0rrIl9DoKhWQtUQz/YpOxLkXbNA==
+
+"@jridgewell/set-array@^1.0.0":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.1.1.tgz#36a6acc93987adcf0ba50c66908bd0b70de8afea"
+  integrity sha512-Ct5MqZkLGEXTVmQYbGtx9SVqD2fqwvdubdps5D3djjAkgkKwT918VNOz65pEHFaYTeWcukmJmH5SwsA9Tn2ObQ==
+
+"@jridgewell/sourcemap-codec@^1.4.10":
+  version "1.4.13"
+  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.13.tgz#b6461fb0c2964356c469e115f504c95ad97ab88c"
+  integrity sha512-GryiOJmNcWbovBxTfZSF71V/mXbgcV3MewDe3kIMCLyIh5e7SKAeUZs+rMnJ8jkMolZ/4/VsdBmMrw3l+VdZ3w==
+
+"@jridgewell/trace-mapping@^0.3.9":
+  version "0.3.10"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.10.tgz#db436f0917d655393851bc258918c00226c9b183"
+  integrity sha512-Q0YbBd6OTsXm8Y21+YUSDXupHnodNC2M4O18jtd3iwJ3+vMZNdKGols0a9G6JOK0dcJ3IdUUHoh908ZI6qhk8Q==
+  dependencies:
+    "@jridgewell/resolve-uri" "^3.0.3"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+
+"@material-ui/core@^4.11.4":
+  version "4.12.4"
+  resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.12.4.tgz#4ac17488e8fcaf55eb6a7f5efb2a131e10138a73"
+  integrity sha512-tr7xekNlM9LjA6pagJmL8QCgZXaubWUwkJnoYcMKd4gw/t4XiyvnTkjdGrUVicyB2BsdaAv1tvow45bPM4sSwQ==
   dependencies:
     "@babel/runtime" "^7.4.4"
-    "@material-ui/styles" "^4.10.0"
-    "@material-ui/system" "^4.9.14"
-    "@material-ui/types" "^5.1.0"
-    "@material-ui/utils" "^4.10.2"
+    "@material-ui/styles" "^4.11.5"
+    "@material-ui/system" "^4.12.2"
+    "@material-ui/types" "5.1.0"
+    "@material-ui/utils" "^4.11.3"
     "@types/react-transition-group" "^4.2.0"
     clsx "^1.0.4"
     hoist-non-react-statics "^3.3.2"
     popper.js "1.16.1-lts"
     prop-types "^15.7.2"
-    react-is "^16.8.0"
+    react-is "^16.8.0 || ^17.0.0"
     react-transition-group "^4.4.0"
 
-"@material-ui/icons@4.9.1":
-  version "4.9.1"
-  resolved "https://registry.yarnpkg.com/@material-ui/icons/-/icons-4.9.1.tgz#fdeadf8cb3d89208945b33dbc50c7c616d0bd665"
-  integrity sha512-GBitL3oBWO0hzBhvA9KxqcowRUsA0qzwKkURyC8nppnC3fw54KPKZ+d4V1Eeg/UnDRSzDaI9nGCdel/eh9AQMg==
+"@material-ui/icons@^4.2.1":
+  version "4.11.3"
+  resolved "https://registry.yarnpkg.com/@material-ui/icons/-/icons-4.11.3.tgz#b0693709f9b161ce9ccde276a770d968484ecff1"
+  integrity sha512-IKHlyx6LDh8n19vzwH5RtHIOHl9Tu90aAAxcbWME6kp4dmvODM3UvOHJeMIDzUbd4muuJKHmlNoBN+mDY4XkBA==
   dependencies:
     "@babel/runtime" "^7.4.4"
 
-"@material-ui/lab@^4.0.0-alpha.56":
-  version "4.0.0-alpha.57"
-  resolved "https://registry.yarnpkg.com/@material-ui/lab/-/lab-4.0.0-alpha.57.tgz#e8961bcf6449e8a8dabe84f2700daacfcafbf83a"
-  integrity sha512-qo/IuIQOmEKtzmRD2E4Aa6DB4A87kmY6h0uYhjUmrrgmEAgbbw9etXpWPVXuRK6AGIQCjFzV6WO2i21m1R4FCw==
+"@material-ui/lab@^4.0.0-alpha.48":
+  version "4.0.0-alpha.61"
+  resolved "https://registry.yarnpkg.com/@material-ui/lab/-/lab-4.0.0-alpha.61.tgz#9bf8eb389c0c26c15e40933cc114d4ad85e3d978"
+  integrity sha512-rSzm+XKiNUjKegj8bzt5+pygZeckNLOr+IjykH8sYdVk7dE9y2ZuUSofiMV2bJk3qU+JHwexmw+q0RyNZB9ugg==
   dependencies:
     "@babel/runtime" "^7.4.4"
-    "@material-ui/utils" "^4.11.2"
+    "@material-ui/utils" "^4.11.3"
     clsx "^1.0.4"
     prop-types "^15.7.2"
     react-is "^16.8.0 || ^17.0.0"
@@ -1485,47 +1895,47 @@
     react-transition-group "^4.0.0"
     rifm "^0.7.0"
 
-"@material-ui/styles@^4.10.0":
-  version "4.11.2"
-  resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.11.2.tgz#e70558be3f41719e8c0d63c7a3c9ae163fdc84cb"
-  integrity sha512-xbItf8zkfD3FuGoD9f2vlcyPf9jTEtj9YTJoNNV+NMWaSAHXgrW6geqRoo/IwBuMjqpwqsZhct13e2nUyU9Ljw==
+"@material-ui/styles@^4.11.5":
+  version "4.11.5"
+  resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.11.5.tgz#19f84457df3aafd956ac863dbe156b1d88e2bbfb"
+  integrity sha512-o/41ot5JJiUsIETME9wVLAJrmIWL3j0R0Bj2kCOLbSfqEkKf0fmaPt+5vtblUh5eXr2S+J/8J3DaCb10+CzPGA==
   dependencies:
     "@babel/runtime" "^7.4.4"
     "@emotion/hash" "^0.8.0"
-    "@material-ui/types" "^5.1.0"
-    "@material-ui/utils" "^4.11.2"
+    "@material-ui/types" "5.1.0"
+    "@material-ui/utils" "^4.11.3"
     clsx "^1.0.4"
     csstype "^2.5.2"
     hoist-non-react-statics "^3.3.2"
-    jss "^10.0.3"
-    jss-plugin-camel-case "^10.0.3"
-    jss-plugin-default-unit "^10.0.3"
-    jss-plugin-global "^10.0.3"
-    jss-plugin-nested "^10.0.3"
-    jss-plugin-props-sort "^10.0.3"
-    jss-plugin-rule-value-function "^10.0.3"
-    jss-plugin-vendor-prefixer "^10.0.3"
+    jss "^10.5.1"
+    jss-plugin-camel-case "^10.5.1"
+    jss-plugin-default-unit "^10.5.1"
+    jss-plugin-global "^10.5.1"
+    jss-plugin-nested "^10.5.1"
+    jss-plugin-props-sort "^10.5.1"
+    jss-plugin-rule-value-function "^10.5.1"
+    jss-plugin-vendor-prefixer "^10.5.1"
     prop-types "^15.7.2"
 
-"@material-ui/system@^4.9.14":
-  version "4.11.2"
-  resolved "https://registry.yarnpkg.com/@material-ui/system/-/system-4.11.2.tgz#7f0a754bba3673ed5fdbfa02fe438096c104b1f6"
-  integrity sha512-BELFJEel5E+5DMiZb6XXT3peWRn6UixRvBtKwSxqntmD0+zwbbfCij6jtGwwdJhN1qX/aXrKu10zX31GBaeR7A==
+"@material-ui/system@^4.12.2":
+  version "4.12.2"
+  resolved "https://registry.yarnpkg.com/@material-ui/system/-/system-4.12.2.tgz#f5c389adf3fce4146edd489bf4082d461d86aa8b"
+  integrity sha512-6CSKu2MtmiJgcCGf6nBQpM8fLkuB9F55EKfbdTC80NND5wpTmKzwdhLYLH3zL4cLlK0gVaaltW7/wMuyTnN0Lw==
   dependencies:
     "@babel/runtime" "^7.4.4"
-    "@material-ui/utils" "^4.11.2"
+    "@material-ui/utils" "^4.11.3"
     csstype "^2.5.2"
     prop-types "^15.7.2"
 
-"@material-ui/types@^5.1.0":
+"@material-ui/types@5.1.0":
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/@material-ui/types/-/types-5.1.0.tgz#efa1c7a0b0eaa4c7c87ac0390445f0f88b0d88f2"
   integrity sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A==
 
-"@material-ui/utils@^4.10.2", "@material-ui/utils@^4.11.2":
-  version "4.11.2"
-  resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-4.11.2.tgz#f1aefa7e7dff2ebcb97d31de51aecab1bb57540a"
-  integrity sha512-Uul8w38u+PICe2Fg2pDKCaIG7kOyhowZ9vjiC1FsVwPABTW8vPPKfF6OvxRq3IiBaI1faOJmgdvMG7rMJARBhA==
+"@material-ui/utils@^4.11.3":
+  version "4.11.3"
+  resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-4.11.3.tgz#232bd86c4ea81dab714f21edad70b7fdf0253942"
+  integrity sha512-ZuQPV4rBK/V1j2dIkSSEcH5uT6AaHuKWFfotADHsC0wVL1NLd2WkFCm4ZZbX33iO4ydl6V0GPngKm8HZQ2oujg==
   dependencies:
     "@babel/runtime" "^7.4.4"
     prop-types "^15.7.2"
@@ -1736,6 +2146,17 @@
     "@svgr/plugin-svgo" "^4.3.1"
     loader-utils "^1.2.3"
 
+"@types/babel__core@*", "@types/babel__core@^7.1.7":
+  version "7.1.19"
+  resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.19.tgz#7b497495b7d1b4812bdb9d02804d0576f43ee460"
+  integrity sha512-WEOTgRsbYkvA/KCsDwVEGkd7WAr1e3g31VHQ8zy5gul/V1qKullU/BU5I68X5v7V3GnB9eotmom4v5a5gjxorw==
+  dependencies:
+    "@babel/parser" "^7.1.0"
+    "@babel/types" "^7.0.0"
+    "@types/babel__generator" "*"
+    "@types/babel__template" "*"
+    "@types/babel__traverse" "*"
+
 "@types/babel__core@^7.1.0":
   version "7.1.12"
   resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.12.tgz#4d8e9e51eb265552a7e4f1ff2219ab6133bdfb2d"
@@ -1754,6 +2175,13 @@
   dependencies:
     "@babel/types" "^7.0.0"
 
+"@types/babel__helper-plugin-utils@^7.10.0":
+  version "7.10.0"
+  resolved "https://registry.yarnpkg.com/@types/babel__helper-plugin-utils/-/babel__helper-plugin-utils-7.10.0.tgz#dcd2416f9c189d5837ab2a276368cf67134efe78"
+  integrity sha512-60YtHzhQ9HAkToHVV+TB4VLzBn9lrfgrsOjiJMtbv/c1jPdekBxaByd6DMsGBzROXWoIL6U3lEFvvbu69RkUoA==
+  dependencies:
+    "@types/babel__core" "*"
+
 "@types/babel__template@*":
   version "7.4.0"
   resolved "https://registry.yarnpkg.com/@types/babel__template/-/babel__template-7.4.0.tgz#0c888dd70b3ee9eebb6e4f200e809da0076262be"
@@ -1840,6 +2268,11 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-14.14.16.tgz#3cc351f8d48101deadfed4c9e4f116048d437b4b"
   integrity sha512-naXYePhweTi+BMv11TgioE2/FXU4fSl29HAH1ffxVciNsH3rYXjNP2yM8wqmSm7jS20gM8TIklKiTen+1iVncw==
 
+"@types/node@14 || 16 || 17":
+  version "17.0.31"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.31.tgz#a5bb84ecfa27eec5e1c802c6bbf8139bdb163a5d"
+  integrity sha512-AR0x5HbXGqkEx9CadRH3EBYx/VkiUgZIhP4wvPn/+5KIsgpNoyFaRlVe0Zlx9gRtg8fA06a9tskE2MSN7TcG4Q==
+
 "@types/parse-json@^4.0.0":
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
@@ -1870,6 +2303,15 @@
     "@types/prop-types" "*"
     csstype "^3.0.2"
 
+"@types/react@16 || 17 || 18":
+  version "18.0.8"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.8.tgz#a051eb380a9fbcaa404550543c58e1cf5ce4ab87"
+  integrity sha512-+j2hk9BzCOrrOSJASi5XiOyBbERk9jG5O73Ya4M0env5Ixi6vUNli4qy994AINcEF+1IEHISYFfIT4zwr++LKw==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
 "@types/resolve@0.0.8":
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-0.0.8.tgz#f26074d238e02659e323ce1a13d041eee280e194"
@@ -1877,6 +2319,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/scheduler@*":
+  version "0.16.2"
+  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
+  integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
+
 "@types/stack-utils@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
@@ -2571,6 +3018,22 @@ babel-plugin-emotion@^10.0.27:
     find-root "^1.1.0"
     source-map "^0.5.7"
 
+babel-plugin-formatjs@^10.3.18:
+  version "10.3.20"
+  resolved "https://registry.yarnpkg.com/babel-plugin-formatjs/-/babel-plugin-formatjs-10.3.20.tgz#0d3072241751be319003d7f85cf29d9a9d3d4ae5"
+  integrity sha512-TZEDmnH3DbkUmbfw1QAviUILj7YOqD31boHkpvReKEfvRD2M/3T2h/cFm5GCBU1pamm0yNbzvt6USXELGZ0WJw==
+  dependencies:
+    "@babel/core" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-jsx" "7"
+    "@babel/traverse" "7"
+    "@babel/types" "^7.12.11"
+    "@formatjs/icu-messageformat-parser" "2.1.0"
+    "@formatjs/ts-transformer" "3.9.4"
+    "@types/babel__core" "^7.1.7"
+    "@types/babel__helper-plugin-utils" "^7.10.0"
+    tslib "^2.1.0"
+
 babel-plugin-istanbul@^5.1.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-5.2.0.tgz#df4ade83d897a92df069c4d9a25cf2671293c854"
@@ -2602,6 +3065,30 @@ babel-plugin-named-asset-import@^0.3.6:
   resolved "https://registry.yarnpkg.com/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.7.tgz#156cd55d3f1228a5765774340937afc8398067dd"
   integrity sha512-squySRkf+6JGnvjoUtDEjSREJEBirnXi9NqP6rjSYsylxQxqBTz+pkmf395i9E2zsvmYUaI40BHo6SqZUdydlw==
 
+babel-plugin-polyfill-corejs2@^0.3.0:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.3.1.tgz#440f1b70ccfaabc6b676d196239b138f8a2cfba5"
+  integrity sha512-v7/T6EQcNfVLfcN2X8Lulb7DjprieyLWJK/zOWH5DUYcAgex9sP3h25Q+DLsX9TloXe3y1O8l2q2Jv9q8UVB9w==
+  dependencies:
+    "@babel/compat-data" "^7.13.11"
+    "@babel/helper-define-polyfill-provider" "^0.3.1"
+    semver "^6.1.1"
+
+babel-plugin-polyfill-corejs3@^0.5.0:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.5.2.tgz#aabe4b2fa04a6e038b688c5e55d44e78cd3a5f72"
+  integrity sha512-G3uJih0XWiID451fpeFaYGVuxHEjzKTHtc9uGFEjR6hHrvNzeS/PX+LLLcetJcytsB5m4j+K3o/EpXJNb/5IEQ==
+  dependencies:
+    "@babel/helper-define-polyfill-provider" "^0.3.1"
+    core-js-compat "^3.21.0"
+
+babel-plugin-polyfill-regenerator@^0.3.0:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.3.1.tgz#2c0678ea47c75c8cc2fbb1852278d8fb68233990"
+  integrity sha512-Y2B06tvgHYt1x0yz17jGkGeeMr5FeKUu+ASJ+N6nB5lQ8Dapfg42i0OVrf8PNGJ3zKL4A23snMi1IRwrqqND7A==
+  dependencies:
+    "@babel/helper-define-polyfill-provider" "^0.3.1"
+
 babel-plugin-syntax-jsx@^6.18.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
@@ -2739,6 +3226,10 @@ bluebird@^3.5.5, bluebird@^3.7.2:
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
   integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
 
+"bluesquare-components@link:../bluesquare-components":
+  version "0.0.0"
+  uid ""
+
 bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.11.9:
   version "4.12.0"
   resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.12.0.tgz#775b3f278efbb9718eec7361f483fb36fbbfea88"
@@ -2806,7 +3297,7 @@ braces@^2.3.1, braces@^2.3.2:
     split-string "^3.0.2"
     to-regex "^3.0.1"
 
-braces@~3.0.2:
+braces@^3.0.2, braces@~3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
   integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
@@ -2926,6 +3417,17 @@ browserslist@^4.0.0, browserslist@^4.12.0, browserslist@^4.14.5, browserslist@^4
     escalade "^3.1.1"
     node-releases "^1.1.67"
 
+browserslist@^4.20.2, browserslist@^4.20.3:
+  version "4.20.3"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.20.3.tgz#eb7572f49ec430e054f56d52ff0ebe9be915f8bf"
+  integrity sha512-NBhymBQl1zM0Y5dQT/O+xiLP9/rzOIQdKM/eMJBAq7yBgaB6krIYLGejrwVYnSHZdqjscB1SPuAjHwxjvN6Wdg==
+  dependencies:
+    caniuse-lite "^1.0.30001332"
+    electron-to-chromium "^1.4.118"
+    escalade "^3.1.1"
+    node-releases "^2.0.3"
+    picocolors "^1.0.0"
+
 bser@2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/bser/-/bser-2.1.1.tgz#e6787da20ece9d07998533cfd9de6f5c38f4bc05"
@@ -3102,6 +3604,11 @@ caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001035, can
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001170.tgz#0088bfecc6a14694969e391cc29d7eb6362ca6a7"
   integrity sha512-Dd4d/+0tsK0UNLrZs3CvNukqalnVTRrxb5mcQm8rHL49t7V5ZaTygwXkrq+FB+dVDf++4ri8eJnFEJAB8332PA==
 
+caniuse-lite@^1.0.30001332:
+  version "1.0.30001338"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001338.tgz#b5dd7a7941a51a16480bdf6ff82bded1628eec0d"
+  integrity sha512-1gLHWyfVoRDsHieO+CaeYe7jSo/MT7D7lhaXUiwwbuR5BwQxORs0f1tAwUSQr3YbxRXJvxHM/PA5FfPQRnsPeQ==
+
 capture-exit@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/capture-exit/-/capture-exit-2.0.0.tgz#fb953bfaebeb781f62898239dabb426d08a509a4"
@@ -3155,6 +3662,14 @@ chalk@^1.1.3:
     strip-ansi "^3.0.0"
     supports-color "^2.0.0"
 
+chalk@^4.0.0:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
+  integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
 chalk@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.0.tgz#4e14870a618d9e2edd97dd8345fd9d9dc315646a"
@@ -3556,6 +4071,14 @@ copy-descriptor@^0.1.0:
   resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
   integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
 
+core-js-compat@^3.21.0:
+  version "3.22.4"
+  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.22.4.tgz#d700f451e50f1d7672dcad0ac85d910e6691e579"
+  integrity sha512-dIWcsszDezkFZrfm1cnB4f/J85gyhiCpxbgBdohWCDtSVuAaChTSpPV7ldOQf/Xds2U5xCIJZOK82G4ZPAIswA==
+  dependencies:
+    browserslist "^4.20.3"
+    semver "7.0.0"
+
 core-js-compat@^3.6.2, core-js-compat@^3.8.0:
   version "3.8.1"
   resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.8.1.tgz#8d1ddd341d660ba6194cbe0ce60f4c794c87a36e"
@@ -4388,6 +4911,11 @@ electron-to-chromium@^1.3.378, electron-to-chromium@^1.3.621:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.633.tgz#16dd5aec9de03894e8d14a1db4cda8a369b9b7fe"
   integrity sha512-bsVCsONiVX1abkWdH7KtpuDAhsQ3N3bjPYhROSAXE78roJKet0Y5wznA14JE9pzbwSZmSMAW6KiKYf1RvbTJkA==
 
+electron-to-chromium@^1.4.118:
+  version "1.4.136"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.136.tgz#b6a3595a9c29d6d8f60e092d40ac24f997e4e7ef"
+  integrity sha512-GnITX8rHnUrIVnTxU9UlsTnSemHUA2iF+6QrRqxFbp/mf0vfuSc/goEyyQhUX3TUUCE3mv/4BNuXOtaJ4ur0eA==
+
 elliptic@^6.5.3:
   version "6.5.4"
   resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.4.tgz#da37cebd31e79a1367e941b592ed1fbebd58abbb"
@@ -4442,6 +4970,14 @@ enhanced-resolve@^4.1.0:
     memory-fs "^0.5.0"
     tapable "^1.0.0"
 
+enhanced-resolve@^5.0.0:
+  version "5.9.3"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.9.3.tgz#44a342c012cbc473254af5cc6ae20ebd0aae5d88"
+  integrity sha512-Bq9VSor+kjvW3f9/MiiR4eE3XYgOl7/rS8lnSxbRbF3kS0B2r+Y9w5krBWxZgDxASVZbdYrn5wT4j/Wb0J9qow==
+  dependencies:
+    graceful-fs "^4.2.4"
+    tapable "^2.2.0"
+
 entities@^1.1.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.2.tgz#bdfa735299664dfafd34529ed4f8522a275fea56"
@@ -5497,7 +6033,7 @@ functional-red-black-tree@^1.0.1:
   resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
   integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=
 
-gensync@^1.0.0-beta.1:
+gensync@^1.0.0-beta.1, gensync@^1.0.0-beta.2:
   version "1.0.0-beta.2"
   resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
   integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==
@@ -5652,6 +6188,11 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.4.tgz#2256bde14d3632958c465ebc96dc467ca07a29fb"
   integrity sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==
 
+graceful-fs@^4.2.4:
+  version "4.2.10"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.10.tgz#147d3a006da4ca3ce14728c7aefc287c367d7a6c"
+  integrity sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==
+
 growly@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
@@ -6090,13 +6631,6 @@ imurmurhash@^0.1.4:
   resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
   integrity sha1-khi5srkoojixPcT7a21XbyMUU+o=
 
-indefinite-observable@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/indefinite-observable/-/indefinite-observable-2.0.1.tgz#574af29bfbc17eb5947793797bddc94c9d859400"
-  integrity sha512-G8vgmork+6H9S8lUAg1gtXEj2JxIQTo0g2PbFiYOdjkziSI0F7UYBiVwhZRuixhBCNGczAls34+5HJPyZysvxQ==
-  dependencies:
-    symbol-observable "1.2.0"
-
 indent-string@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-4.0.0.tgz#624f8f4497d619b2d9768531d58f4122854d7251"
@@ -6195,6 +6729,16 @@ internal-slot@^1.0.2:
     has "^1.0.3"
     side-channel "^1.0.2"
 
+intl-messageformat@9.13.0:
+  version "9.13.0"
+  resolved "https://registry.yarnpkg.com/intl-messageformat/-/intl-messageformat-9.13.0.tgz#97360b73bd82212e4f6005c712a4a16053165468"
+  integrity sha512-7sGC7QnSQGa5LZP7bXLDhVDtQOeKGeBFGHF2Y8LVBwYZoQZCgWeKoPGTa5GMG8g/TzDgeXuYJQis7Ggiw2xTOw==
+  dependencies:
+    "@formatjs/ecma402-abstract" "1.11.4"
+    "@formatjs/fast-memoize" "1.2.1"
+    "@formatjs/icu-messageformat-parser" "2.1.0"
+    tslib "^2.1.0"
+
 invariant@^2.2.2, invariant@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
@@ -7193,6 +7737,11 @@ json5@^2.1.2:
   dependencies:
     minimist "^1.2.5"
 
+json5@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.1.tgz#655d50ed1e6f95ad1a3caababd2b0efda10b395c"
+  integrity sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==
+
 jsonfile@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-4.0.0.tgz#8771aae0799b64076b76640fca058f9c10e33ecb"
@@ -7215,74 +7764,73 @@ jsprim@^1.2.2:
     json-schema "0.2.3"
     verror "1.10.0"
 
-jss-plugin-camel-case@^10.0.3:
-  version "10.5.0"
-  resolved "https://registry.yarnpkg.com/jss-plugin-camel-case/-/jss-plugin-camel-case-10.5.0.tgz#4b0a9c85e65e5eb72cbfba59373686c604d88f72"
-  integrity sha512-GSjPL0adGAkuoqeYiXTgO7PlIrmjv5v8lA6TTBdfxbNYpxADOdGKJgIEkffhlyuIZHlPuuiFYTwUreLUmSn7rg==
+jss-plugin-camel-case@^10.5.1:
+  version "10.9.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-camel-case/-/jss-plugin-camel-case-10.9.0.tgz#4921b568b38d893f39736ee8c4c5f1c64670aaf7"
+  integrity sha512-UH6uPpnDk413/r/2Olmw4+y54yEF2lRIV8XIZyuYpgPYTITLlPOsq6XB9qeqv+75SQSg3KLocq5jUBXW8qWWww==
   dependencies:
     "@babel/runtime" "^7.3.1"
     hyphenate-style-name "^1.0.3"
-    jss "10.5.0"
+    jss "10.9.0"
 
-jss-plugin-default-unit@^10.0.3:
-  version "10.5.0"
-  resolved "https://registry.yarnpkg.com/jss-plugin-default-unit/-/jss-plugin-default-unit-10.5.0.tgz#e9f2e89741b0118ba15d52b4c13bda2b27262373"
-  integrity sha512-rsbTtZGCMrbcb9beiDd+TwL991NGmsAgVYH0hATrYJtue9e+LH/Gn4yFD1ENwE+3JzF3A+rPnM2JuD9L/SIIWw==
+jss-plugin-default-unit@^10.5.1:
+  version "10.9.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-default-unit/-/jss-plugin-default-unit-10.9.0.tgz#bb23a48f075bc0ce852b4b4d3f7582bc002df991"
+  integrity sha512-7Ju4Q9wJ/MZPsxfu4T84mzdn7pLHWeqoGd/D8O3eDNNJ93Xc8PxnLmV8s8ZPNRYkLdxZqKtm1nPQ0BM4JRlq2w==
   dependencies:
     "@babel/runtime" "^7.3.1"
-    jss "10.5.0"
+    jss "10.9.0"
 
-jss-plugin-global@^10.0.3:
-  version "10.5.0"
-  resolved "https://registry.yarnpkg.com/jss-plugin-global/-/jss-plugin-global-10.5.0.tgz#eb357ccd35cb4894277fb2117a78d1e498668ad6"
-  integrity sha512-FZd9+JE/3D7HMefEG54fEC0XiQ9rhGtDHAT/ols24y8sKQ1D5KIw6OyXEmIdKFmACgxZV2ARQ5pAUypxkk2IFQ==
+jss-plugin-global@^10.5.1:
+  version "10.9.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-global/-/jss-plugin-global-10.9.0.tgz#fc07a0086ac97aca174e37edb480b69277f3931f"
+  integrity sha512-4G8PHNJ0x6nwAFsEzcuVDiBlyMsj2y3VjmFAx/uHk/R/gzJV+yRHICjT4MKGGu1cJq2hfowFWCyrr/Gg37FbgQ==
   dependencies:
     "@babel/runtime" "^7.3.1"
-    jss "10.5.0"
+    jss "10.9.0"
 
-jss-plugin-nested@^10.0.3:
-  version "10.5.0"
-  resolved "https://registry.yarnpkg.com/jss-plugin-nested/-/jss-plugin-nested-10.5.0.tgz#790c506432a23a63c71ceb5044e2ac85f0958702"
-  integrity sha512-ejPlCLNlEGgx8jmMiDk/zarsCZk+DV0YqXfddpgzbO9Toamo0HweCFuwJ3ZO40UFOfqKwfpKMVH/3HUXgxkTMg==
+jss-plugin-nested@^10.5.1:
+  version "10.9.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-nested/-/jss-plugin-nested-10.9.0.tgz#cc1c7d63ad542c3ccc6e2c66c8328c6b6b00f4b3"
+  integrity sha512-2UJnDrfCZpMYcpPYR16oZB7VAC6b/1QLsRiAutOt7wJaaqwCBvNsosLEu/fUyKNQNGdvg2PPJFDO5AX7dwxtoA==
   dependencies:
     "@babel/runtime" "^7.3.1"
-    jss "10.5.0"
+    jss "10.9.0"
     tiny-warning "^1.0.2"
 
-jss-plugin-props-sort@^10.0.3:
-  version "10.5.0"
-  resolved "https://registry.yarnpkg.com/jss-plugin-props-sort/-/jss-plugin-props-sort-10.5.0.tgz#5bcc3bd8e68cd3e2dafb47d67db28fd5a4fcf102"
-  integrity sha512-kTLRvrOetFKz5vM88FAhLNeJIxfjhCepnvq65G7xsAQ/Wgy7HwO1BS/2wE5mx8iLaAWC6Rj5h16mhMk9sKdZxg==
+jss-plugin-props-sort@^10.5.1:
+  version "10.9.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-props-sort/-/jss-plugin-props-sort-10.9.0.tgz#30e9567ef9479043feb6e5e59db09b4de687c47d"
+  integrity sha512-7A76HI8bzwqrsMOJTWKx/uD5v+U8piLnp5bvru7g/3ZEQOu1+PjHvv7bFdNO3DwNPC9oM0a//KwIJsIcDCjDzw==
   dependencies:
     "@babel/runtime" "^7.3.1"
-    jss "10.5.0"
+    jss "10.9.0"
 
-jss-plugin-rule-value-function@^10.0.3:
-  version "10.5.0"
-  resolved "https://registry.yarnpkg.com/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.5.0.tgz#60ee8240dfe60418e1ba4729adee893cbe9be7a3"
-  integrity sha512-jXINGr8BSsB13JVuK274oEtk0LoooYSJqTBCGeBu2cG/VJ3+4FPs1gwLgsq24xTgKshtZ+WEQMVL34OprLidRA==
+jss-plugin-rule-value-function@^10.5.1:
+  version "10.9.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.9.0.tgz#379fd2732c0746fe45168011fe25544c1a295d67"
+  integrity sha512-IHJv6YrEf8pRzkY207cPmdbBstBaE+z8pazhPShfz0tZSDtRdQua5jjg6NMz3IbTasVx9FdnmptxPqSWL5tyJg==
   dependencies:
     "@babel/runtime" "^7.3.1"
-    jss "10.5.0"
+    jss "10.9.0"
     tiny-warning "^1.0.2"
 
-jss-plugin-vendor-prefixer@^10.0.3:
-  version "10.5.0"
-  resolved "https://registry.yarnpkg.com/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.5.0.tgz#01f04cfff31f43f153f5d71972f5800b10a2eb84"
-  integrity sha512-rux3gmfwDdOKCLDx0IQjTwTm03IfBa+Rm/hs747cOw5Q7O3RaTUIMPKjtVfc31Xr/XI9Abz2XEupk1/oMQ7zRA==
+jss-plugin-vendor-prefixer@^10.5.1:
+  version "10.9.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.9.0.tgz#aa9df98abfb3f75f7ed59a3ec50a5452461a206a"
+  integrity sha512-MbvsaXP7iiVdYVSEoi+blrW+AYnTDvHTW6I6zqi7JcwXdc6I9Kbm234nEblayhF38EftoenbM+5218pidmC5gA==
   dependencies:
     "@babel/runtime" "^7.3.1"
     css-vendor "^2.0.8"
-    jss "10.5.0"
+    jss "10.9.0"
 
-jss@10.5.0, jss@^10.0.3:
-  version "10.5.0"
-  resolved "https://registry.yarnpkg.com/jss/-/jss-10.5.0.tgz#0c2de8a29874b2dc8162ab7f34ef6573a87d9dd3"
-  integrity sha512-B6151NvG+thUg3murLNHRPLxTLwQ13ep4SH5brj4d8qKtogOx/jupnpfkPGSHPqvcwKJaCLctpj2lEk+5yGwMw==
+jss@10.9.0, jss@^10.5.1:
+  version "10.9.0"
+  resolved "https://registry.yarnpkg.com/jss/-/jss-10.9.0.tgz#7583ee2cdc904a83c872ba695d1baab4b59c141b"
+  integrity sha512-YpzpreB6kUunQBbrlArlsMpXYyndt9JATbt95tajx0t4MTJJcCJdd4hdNpHmOIDiUJrF/oX5wtVFrS3uofWfGw==
   dependencies:
     "@babel/runtime" "^7.3.1"
     csstype "^3.0.2"
-    indefinite-observable "^2.0.1"
     is-in-browser "^1.1.3"
     tiny-warning "^1.0.2"
 
@@ -7796,6 +8344,14 @@ micromatch@^3.1.10, micromatch@^3.1.4:
     snapdragon "^0.8.1"
     to-regex "^3.0.2"
 
+micromatch@^4.0.0:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.5.tgz#bc8999a7cbbf77cdc89f132f6e467051b49090c6"
+  integrity sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==
+  dependencies:
+    braces "^3.0.2"
+    picomatch "^2.3.1"
+
 microseconds@0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/microseconds/-/microseconds-0.2.0.tgz#233b25f50c62a65d861f978a4a4f8ec18797dc39"
@@ -8144,6 +8700,11 @@ node-releases@^1.1.52, node-releases@^1.1.67:
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.67.tgz#28ebfcccd0baa6aad8e8d4d8fe4cbc49ae239c12"
   integrity sha512-V5QF9noGFl3EymEwUYzO+3NTDpGfQB4ve6Qfnzf3UNydMhjQRVPR1DZTuvWiLzaFJYw2fmDwAfnRNEVb64hSIg==
 
+node-releases@^2.0.3:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.4.tgz#f38252370c43854dc48aa431c766c6c398f40476"
+  integrity sha512-gbMzqQtTtDz/00jQzZ21PQzdI9PyLYqUSvD0p3naOhX4odFji0ZxYdnVwPTxmSwkmxhcFImpozceidSG+AgoPQ==
+
 normalize-package-data@^2.3.2:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
@@ -8694,11 +9255,21 @@ performance-now@^2.1.0:
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
   integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
 
+picocolors@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
+  integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
+
 picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
   integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==
 
+picomatch@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
+  integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
+
 pify@^2.0.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
@@ -9807,7 +10378,28 @@ react-input-autosize@^2.2.2:
   dependencies:
     prop-types "^15.5.8"
 
-react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6:
+react-intersection-observer@^8.26.1:
+  version "8.34.0"
+  resolved "https://registry.yarnpkg.com/react-intersection-observer/-/react-intersection-observer-8.34.0.tgz#6f6e67831c52e6233f6b6cc7eb55814820137c42"
+  integrity sha512-TYKh52Zc0Uptp5/b4N91XydfSGKubEhgZRtcg1rhTKABXijc4Sdr1uTp5lJ8TN27jwUsdXxjHXtHa0kPj704sw==
+
+react-intl@^5.10.16:
+  version "5.25.1"
+  resolved "https://registry.yarnpkg.com/react-intl/-/react-intl-5.25.1.tgz#68a73aefc485c9bf70062381ae7f6f4791680879"
+  integrity sha512-pkjdQDvpJROoXLMltkP/5mZb0/XqrqLoPGKUCfbdkP8m6U9xbK40K51Wu+a4aQqTEvEK5lHBk0fWzUV72SJ3Hg==
+  dependencies:
+    "@formatjs/ecma402-abstract" "1.11.4"
+    "@formatjs/icu-messageformat-parser" "2.1.0"
+    "@formatjs/intl" "2.2.1"
+    "@formatjs/intl-displaynames" "5.4.3"
+    "@formatjs/intl-listformat" "6.5.3"
+    "@types/hoist-non-react-statics" "^3.3.1"
+    "@types/react" "16 || 17 || 18"
+    hoist-non-react-statics "^3.3.2"
+    intl-messageformat "9.13.0"
+    tslib "^2.1.0"
+
+react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -10644,7 +11236,7 @@ selfsigned@^1.10.7:
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
   integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
 
-semver@6.3.0, semver@^6.0.0, semver@^6.1.2, semver@^6.2.0, semver@^6.3.0:
+semver@6.3.0, semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.2.0, semver@^6.3.0:
   version "6.3.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
   integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
@@ -10661,6 +11253,13 @@ semver@^7.3.2:
   dependencies:
     lru-cache "^6.0.0"
 
+semver@^7.3.4:
+  version "7.3.7"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.7.tgz#12c5b649afdbf9049707796e22a4028814ce523f"
+  integrity sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==
+  dependencies:
+    lru-cache "^6.0.0"
+
 send@0.17.1:
   version "0.17.1"
   resolved "https://registry.yarnpkg.com/send/-/send-0.17.1.tgz#c1d8b059f7900f7466dd4938bdc44e11ddb376c8"
@@ -11333,7 +11932,7 @@ svgo@^1.0.0, svgo@^1.2.2:
     unquote "~1.1.1"
     util.promisify "~1.0.0"
 
-symbol-observable@1.2.0, symbol-observable@^1.2.0:
+symbol-observable@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
   integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==
@@ -11363,6 +11962,11 @@ tapable@^1.0.0, tapable@^1.1.3:
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"
   integrity sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==
 
+tapable@^2.2.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.1.tgz#1967a73ef4060a82f12ab96af86d52fdb76eeca0"
+  integrity sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==
+
 terser-webpack-plugin@2.3.8:
   version "2.3.8"
   resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-2.3.8.tgz#894764a19b0743f2f704e7c2a848c5283a696724"
@@ -11543,6 +12147,16 @@ trim-repeated@^1.0.0:
   dependencies:
     escape-string-regexp "^1.0.2"
 
+ts-loader@^9.2.8:
+  version "9.3.0"
+  resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-9.3.0.tgz#980f4dbfb60e517179e15e10ed98e454b132159f"
+  integrity sha512-2kLLAdAD+FCKijvGKi9sS0OzoqxLCF3CxHpok7rVgCZ5UldRzH0TkbwG9XECKjBzHsAewntC5oDaI/FwKzEUog==
+  dependencies:
+    chalk "^4.1.0"
+    enhanced-resolve "^5.0.0"
+    micromatch "^4.0.0"
+    semver "^7.3.4"
+
 ts-pnp@1.1.6:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.1.6.tgz#389a24396d425a0d3162e96d2b4638900fdc289a"
@@ -11573,6 +12187,11 @@ tslib@^2.0.3:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.0.3.tgz#8e0741ac45fc0c226e58a17bfc3e64b9bc6ca61c"
   integrity sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ==
 
+tslib@^2.1.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
+  integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
+
 tsutils@^3.17.1:
   version "3.17.1"
   resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.17.1.tgz#ed719917f11ca0dee586272b2ac49e015a2dd759"
@@ -11637,6 +12256,11 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
+typescript@^4.5:
+  version "4.6.4"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.6.4.tgz#caa78bbc3a59e6a5c510d35703f6a09877ce45e9"
+  integrity sha512-9ia/jWHIEbo49HfjrLGfKbZSuWo9iTMwXO+Ca3pRsSpbsMbc7/IU8NKdCZVRRBafVPGnoJeFL76ZOAA84I9fEg==
+
 uc.micro@^1.0.1, uc.micro@^1.0.5:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac"

From ca1b35f365b2a8980de2bd03c3edb0be198b8cad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?St=C3=A9phan=20Mestach?= <smestach@bluesquare.org>
Date: Tue, 10 May 2022 09:08:48 +0200
Subject: [PATCH 02/55] Hide usual form

---
 src/components/invoices/InvoiceSelectionContainer.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/invoices/InvoiceSelectionContainer.js b/src/components/invoices/InvoiceSelectionContainer.js
index 7f2549ef..8eba1d6c 100644
--- a/src/components/invoices/InvoiceSelectionContainer.js
+++ b/src/components/invoices/InvoiceSelectionContainer.js
@@ -144,6 +144,7 @@ const InvoiceSelectionContainer = (props) => {
             )}
           </div>
         </div>
+        {/*
         <OrgUnitAutoComplete
           organisationUnits={topLevelsOrgUnits}
           onChange={onParentOrganisationUnit}
@@ -156,11 +157,14 @@ const InvoiceSelectionContainer = (props) => {
         </FormControl>
         <br />
         {loading ? <LinearProgress variant="query" /> : ""}
+            */}
       </div>
       <br />
       <br />
       <br />
+      {/*
       <SelectionResults {...props} orgUnits={orgUnits?.organisationUnits} pager={orgUnits?.pager} />
+          */}
     </Paper>
   );
 };

From 2e2e7099345e055d2ffef1272450da0ceba32d07 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?St=C3=A9phan=20Mestach?= <smestach@bluesquare.org>
Date: Thu, 9 Jun 2022 16:26:23 +0200
Subject: [PATCH 03/55] shared bluesquare-components

---
 rollup.config.js                                          | 1 +
 src/components/shared/orgunit_picker/OrgUnitTreePicker.js | 4 ++--
 yarn.lock                                                 | 7 +++++++
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/rollup.config.js b/rollup.config.js
index b24dbde1..0d3a3bb4 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -20,6 +20,7 @@ export default {
   external: [
       ...Object.keys(pkg.dependencies || {}),
       ...Object.keys(pkg.peerDependencies || {}),
+      "bluesquare-components",
       "i18next",
       "papaparse",
       "mui-datatables",
diff --git a/src/components/shared/orgunit_picker/OrgUnitTreePicker.js b/src/components/shared/orgunit_picker/OrgUnitTreePicker.js
index a4a32725..6557daea 100644
--- a/src/components/shared/orgunit_picker/OrgUnitTreePicker.js
+++ b/src/components/shared/orgunit_picker/OrgUnitTreePicker.js
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { getInstance } from "d2/lib/d2";
-import { TreeViewWithSearch } from "bluesquare-components";
+import { TreeViewWithSearch }  from "bluesquare-components";
 import PluginRegistry from "../../core/PluginRegistry";
 
 // act as a cache to speed up first levels click
@@ -139,7 +139,7 @@ const OrgUnitTreePicker = ({ initialSelection, onChange }) => {
     toggleOnLabelClick: false,
     isSelectable: () => true,
   };
-
+  debugger;
   return (
     <div>
       <TreeViewWithSearch
diff --git a/yarn.lock b/yarn.lock
index 9ab87be5..c6fcb4dc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10620,6 +10620,13 @@ react-virtualized@^9.21.2:
     prop-types "^15.7.2"
     react-lifecycles-compat "^3.0.4"
 
+react-visibility-sensor@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/react-visibility-sensor/-/react-visibility-sensor-5.1.1.tgz#5238380960d3a0b2be0b7faddff38541e337f5a9"
+  integrity sha512-cTUHqIK+zDYpeK19rzW6zF9YfT4486TIgizZW53wEZ+/GPBbK7cNS0EHyJVyHYacwFEvvHLEKfgJndbemWhB/w==
+  dependencies:
+    prop-types "^15.7.2"
+
 react@^16.13.1, react@^16.3.0:
   version "16.14.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"

From d6744eb934bda2c650f9d92ecd4e673c53d4bdda Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?St=C3=A9phan=20Mestach?= <smestach@bluesquare.org>
Date: Fri, 10 Jun 2022 07:58:48 +0200
Subject: [PATCH 04/55] Align minimum node/npm version

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 9cd44552..93f8ff0b 100644
--- a/package.json
+++ b/package.json
@@ -9,8 +9,8 @@
   "module": "dist/index.es.js",
   "jsnext:main": "dist/index.es.js",
   "engines": {
-    "node": ">=12",
-    "npm": ">=6"
+    "node": ">=14.17.0",
+    "npm": ">=7"
   },
   "jest": {
     "collectCoverageFrom": [

From 1663690085df224f368a0b230313bd072ecc8eba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?St=C3=A9phan=20Mestach?= <smestach@bluesquare.org>
Date: Fri, 10 Jun 2022 08:00:02 +0200
Subject: [PATCH 05/55] Adapt ci to use node 14

---
 .github/workflows/build.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index d832bb88..1eacc758 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -6,10 +6,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@master
-      - name: Use Node.js 12.x
+      - name: Use Node.js 14.x
         uses: actions/setup-node@v1
         with:
-            node-version: 12.x
+            node-version: 14.x
       - run: yarn install
       - run: curl -L https://codeclimate.com/downloads/test-reporter/test-reporter-latest-linux-amd64 > "./cc-test-reporter"
       - run: chmod +x "./cc-test-reporter"

From 10fc1546d3111c915a64eb34af636adea4299364 Mon Sep 17 00:00:00 2001
From: Madeline OLeary <madeline.w.oleary@gmail.com>
Date: Mon, 13 Jun 2022 10:15:30 +0200
Subject: [PATCH 06/55] toggling traditional vs tree views

---
 .../invoices/InvoiceSelectionContainer.js     | 113 ++++++++++--------
 .../invoices/InvoiceTraditionalView.js        |  49 ++++++++
 src/components/invoices/InvoiceTreeView.js    |  41 +++++++
 3 files changed, 150 insertions(+), 53 deletions(-)
 create mode 100644 src/components/invoices/InvoiceTraditionalView.js
 create mode 100644 src/components/invoices/InvoiceTreeView.js

diff --git a/src/components/invoices/InvoiceSelectionContainer.js b/src/components/invoices/InvoiceSelectionContainer.js
index 8eba1d6c..1bd49ba4 100644
--- a/src/components/invoices/InvoiceSelectionContainer.js
+++ b/src/components/invoices/InvoiceSelectionContainer.js
@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import { FormControl, LinearProgress, Paper, Typography } from "@material-ui/core";
+import { Button, FormControl, LinearProgress, Paper, Typography } from "@material-ui/core";
+import CachedIcon from "@material-ui/icons/Cached";
 
 import { makeStyles } from "@material-ui/styles";
 import OrgUnitAutoComplete from "./OrgUnitAutoComplete";
@@ -11,8 +12,8 @@ import searchOrgunit from "./searchOrgunit";
 import SelectionResultsContainer from "./SelectionResultsContainer";
 
 import useDebounce from "../shared/useDebounce";
-import OrgUnitTreePicker from "../shared/orgunit_picker/OrgUnitTreePicker";
-import InvoiceLinks from "./InvoiceLinks";
+import InvoiceTreeView from "./InvoiceTreeView";
+import InvoiceTraditionalView from "./InvoiceTraditionalView";
 
 const styles = (theme) => ({
   paper: theme.mixins.gutters({
@@ -61,6 +62,7 @@ const InvoiceSelectionContainer = (props) => {
   const [searchValue, setSearchValue] = useState(ouSearchValue);
   const [searchPeriod, setSearchPeriod] = useState(period);
   const [debouncedSearchValue, setDebouncedSearchValue] = useDebounce(ouSearchValue);
+  const [traditionalView, setTraditionalView] = useState(true);
 
   useEffect(() => {
     const search = async () => {
@@ -88,7 +90,17 @@ const InvoiceSelectionContainer = (props) => {
     };
 
     search();
-  }, [debouncedSearchValue, currentUser, period, parent, contractedOrgUnitGroupId, dhis2, defaultPathName, history]);
+  }, [
+    debouncedSearchValue,
+    currentUser,
+    period,
+    parent,
+    contractedOrgUnitGroupId,
+    dhis2,
+    defaultPathName,
+    history,
+    traditionalView,
+  ]);
 
   const onOuSearchChange = async (event) => {
     setDebouncedSearchValue(event.target.value);
@@ -104,67 +116,62 @@ const InvoiceSelectionContainer = (props) => {
     updateHistory(history, orgUnitId, period, debouncedSearchValue, defaultPathName);
   };
 
-  const [selectedOrgUnits, setSelectedOrgUnits] = useState([]);
   const classes = useStyles();
   const { t } = useTranslation();
   const SelectionResults = resultsElements || SelectionResultsContainer;
-  const onOrgUnitChange = (orgunits) => {
-    setSelectedOrgUnits(orgunits);
+
+  const toggleView = (useTraditionalView) => {
+    setTraditionalView(useTraditionalView);
   };
+
+  const switchToTreeView = "Switch to orgunit tree view";
+  const switchToTraditionalView = "Switch to traditional view";
+  const viewLabel = traditionalView ? switchToTreeView : switchToTraditionalView;
+
   return (
     <Paper className={classes.paper} square>
       <Typography variant="h6" component="h6" gutterBottom>
         {t("invoices.search.title")}
       </Typography>
-      <div className={classes.filters}>
-        <div style={{ display: "flex" }}>
-          <div style={{ margin: "10px", width: "500px" }}>
-            <OrgUnitTreePicker onChange={onOrgUnitChange}></OrgUnitTreePicker>
-          </div>
-          <div>
-            {selectedOrgUnits &&
-              selectedOrgUnits.map((ou) => (
-                <div>
-                  <h2>{ou.name}</h2>
-                  <h3>Contrats</h3>
-                  {ou.activeContracts &&
-                    ou.activeContracts
-                      .filter((c) => c.matchPeriod(searchPeriod))
-                      .map((c) => (
-                        <div>
-                          {c.startPeriod} {c.endPeriod} {c.codes} {c.codes}
-                        </div>
-                      ))}
-                </div>
-              ))}
-            <h3>Factures</h3>
-
-            {selectedOrgUnits && selectedOrgUnits[0] && (
-              <InvoiceLinks {...props} t={t} orgUnit={selectedOrgUnits[0]} period={searchPeriod}></InvoiceLinks>
-            )}
-          </div>
-        </div>
-        {/*
-        <OrgUnitAutoComplete
-          organisationUnits={topLevelsOrgUnits}
-          onChange={onParentOrganisationUnit}
-          selected={parent}
-        />
-        <br />
-        <OuPicker onOuSearchChange={onOuSearchChange} ouSearchValue={searchValue} />{" "}
-        <FormControl className={classes.periodContainer}>
-          <PeriodPicker period={searchPeriod} onPeriodChange={onPeriodChange} periodFormat={periodFormat} />
-        </FormControl>
-        <br />
-        {loading ? <LinearProgress variant="query" /> : ""}
-            */}
-      </div>
+      <Button onClick={() => toggleView(!traditionalView)} startIcon={<CachedIcon />}>
+        {viewLabel}
+      </Button>
       <br />
       <br />
       <br />
-      {/*
-      <SelectionResults {...props} orgUnits={orgUnits?.organisationUnits} pager={orgUnits?.pager} />
-          */}
+      <div className={classes.filters}>
+        {!traditionalView && <InvoiceTreeView invoiceLinksProps={props} searchPeriod={searchPeriod} t={t} />}
+        {traditionalView && (
+          // topLevelsOrgUnits,
+          // onParentOrganisationUnit,
+          // parent,
+          // onOuSearchChange,
+          // searchValue,
+          // classes,
+          // searchPeriod,
+          // onPeriodChange,
+          // periodFormat,
+          // loading,
+          // orgUnits,
+          // selectionResultsProps,
+
+          <InvoiceTraditionalView
+            topLevelsOrgUnits={topLevelsOrgUnits}
+            onParentOrganisationUnit={onParentOrganisationUnit}
+            parent={parent}
+            onOuSearchChange={onOuSearchChange}
+            searchValue={searchValue}
+            classes={classes}
+            searchPeriod={searchPeriod}
+            onPeriodChange={onPeriodChange}
+            periodFormat={periodFormat}
+            loading={loading}
+            orgUnits={orgUnits}
+            selectionResultsProps={props}
+            resultsElements={resultsElements}
+          />
+        )}
+      </div>
     </Paper>
   );
 };
diff --git a/src/components/invoices/InvoiceTraditionalView.js b/src/components/invoices/InvoiceTraditionalView.js
new file mode 100644
index 00000000..245697f5
--- /dev/null
+++ b/src/components/invoices/InvoiceTraditionalView.js
@@ -0,0 +1,49 @@
+import React from "react";
+import { FormControl, LinearProgress } from "@material-ui/core";
+import OrgUnitAutoComplete from "./OrgUnitAutoComplete";
+import OuPicker from "./OuPicker";
+import PeriodPicker from "../shared/PeriodPicker";
+import SelectionResultsContainer from "./SelectionResultsContainer";
+
+
+
+const InvoiceTraditionalView = ({
+  topLevelsOrgUnits,
+  onParentOrganisationUnit,
+  parent,
+  onOuSearchChange,
+  searchValue,
+  classes,
+  searchPeriod,
+  onPeriodChange,
+  periodFormat,
+  loading,
+  orgUnits,
+  selectionResultsProps,
+  resultsElements
+}) => {
+  const SelectionResults = resultsElements || SelectionResultsContainer;
+
+  return (
+    <>
+      <OrgUnitAutoComplete
+        organisationUnits={topLevelsOrgUnits}
+        onChange={onParentOrganisationUnit}
+        selected={parent}
+      />
+      <br />
+      <OuPicker onOuSearchChange={onOuSearchChange} ouSearchValue={searchValue} />{" "}
+      <FormControl className={classes.periodContainer}>
+        <PeriodPicker period={searchPeriod} onPeriodChange={onPeriodChange} periodFormat={periodFormat} />
+      </FormControl>
+      <br />
+      {loading ? <LinearProgress variant="query" /> : ""}
+      <br />
+      <br />
+      <br />
+      <SelectionResults {...selectionResultsProps} orgUnits={orgUnits?.organisationUnits} pager={orgUnits?.pager} />
+    </>
+  )
+};
+
+export default InvoiceTraditionalView;
diff --git a/src/components/invoices/InvoiceTreeView.js b/src/components/invoices/InvoiceTreeView.js
new file mode 100644
index 00000000..5aac76cc
--- /dev/null
+++ b/src/components/invoices/InvoiceTreeView.js
@@ -0,0 +1,41 @@
+import React, { useState } from "react";
+import OrgUnitTreePicker from "../shared/orgunit_picker/OrgUnitTreePicker";
+import InvoiceLinks from "./InvoiceLinks";
+
+const InvoiceTreeView = ({ invoiceLinksProps, searchPeriod, t }) => {
+  const [selectedOrgUnits, setSelectedOrgUnits] = useState([]);
+  const onOrgUnitChange = (orgunits) => {
+    setSelectedOrgUnits(orgunits);
+  };
+  return (
+    <div style={{ display: "flex" }}>
+      <div style={{ margin: "10px", width: "500px" }}>
+        <OrgUnitTreePicker onChange={onOrgUnitChange} />
+      </div>
+      <div>
+        {selectedOrgUnits &&
+          selectedOrgUnits.map((ou) => (
+            <div>
+              <h2>{ou.name}</h2>
+              <h3>Contrats</h3>
+              {ou.activeContracts &&
+                ou.activeContracts
+                  .filter((c) => c.matchPeriod(searchPeriod))
+                  .map((c) => (
+                    <div>
+                      {c.startPeriod} {c.endPeriod} {c.codes} {c.codes}
+                    </div>
+                  ))}
+            </div>
+          ))}
+        <h3>Factures</h3>
+
+        {selectedOrgUnits && selectedOrgUnits[0] && (
+          <InvoiceLinks {...invoiceLinksProps} t={t} orgUnit={selectedOrgUnits[0]} period={searchPeriod} />
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default InvoiceTreeView;

From d995c4bb290a35631d0847bbabbdf169744a52ca Mon Sep 17 00:00:00 2001
From: Madeline OLeary <madeline.w.oleary@gmail.com>
Date: Mon, 13 Jun 2022 10:22:29 +0200
Subject: [PATCH 07/55] spacing between header buttons

---
 .../invoices/InvoiceSelectionContainer.js     | 39 +++++++------------
 1 file changed, 13 insertions(+), 26 deletions(-)

diff --git a/src/components/invoices/InvoiceSelectionContainer.js b/src/components/invoices/InvoiceSelectionContainer.js
index 1bd49ba4..fcbf4c07 100644
--- a/src/components/invoices/InvoiceSelectionContainer.js
+++ b/src/components/invoices/InvoiceSelectionContainer.js
@@ -1,13 +1,9 @@
 import React, { useState, useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import { Button, FormControl, LinearProgress, Paper, Typography } from "@material-ui/core";
+import { Button, Paper, Typography } from "@material-ui/core";
 import CachedIcon from "@material-ui/icons/Cached";
 
 import { makeStyles } from "@material-ui/styles";
-import OrgUnitAutoComplete from "./OrgUnitAutoComplete";
-import OuPicker from "./OuPicker";
-
-import PeriodPicker from "../shared/PeriodPicker";
 import searchOrgunit from "./searchOrgunit";
 import SelectionResultsContainer from "./SelectionResultsContainer";
 
@@ -31,6 +27,10 @@ const styles = (theme) => ({
     margin: theme.spacing(2, 1, 1, 1),
     width: 300,
   },
+  headerButtons: {
+    display: "flex",
+    justifyContent: "space-between",
+  },
 });
 
 const useStyles = makeStyles(styles);
@@ -118,8 +118,6 @@ const InvoiceSelectionContainer = (props) => {
 
   const classes = useStyles();
   const { t } = useTranslation();
-  const SelectionResults = resultsElements || SelectionResultsContainer;
-
   const toggleView = (useTraditionalView) => {
     setTraditionalView(useTraditionalView);
   };
@@ -130,31 +128,20 @@ const InvoiceSelectionContainer = (props) => {
 
   return (
     <Paper className={classes.paper} square>
-      <Typography variant="h6" component="h6" gutterBottom>
-        {t("invoices.search.title")}
-      </Typography>
-      <Button onClick={() => toggleView(!traditionalView)} startIcon={<CachedIcon />}>
-        {viewLabel}
-      </Button>
+      <div className={classes.headerButtons}>
+        <Typography variant="h6" component="h6" gutterBottom>
+          {t("invoices.search.title")}
+        </Typography>
+        <Button onClick={() => toggleView(!traditionalView)} startIcon={<CachedIcon />}>
+          {viewLabel}
+        </Button>
+      </div>
       <br />
       <br />
       <br />
       <div className={classes.filters}>
         {!traditionalView && <InvoiceTreeView invoiceLinksProps={props} searchPeriod={searchPeriod} t={t} />}
         {traditionalView && (
-          // topLevelsOrgUnits,
-          // onParentOrganisationUnit,
-          // parent,
-          // onOuSearchChange,
-          // searchValue,
-          // classes,
-          // searchPeriod,
-          // onPeriodChange,
-          // periodFormat,
-          // loading,
-          // orgUnits,
-          // selectionResultsProps,
-
           <InvoiceTraditionalView
             topLevelsOrgUnits={topLevelsOrgUnits}
             onParentOrganisationUnit={onParentOrganisationUnit}

From 18411e9de5776d5a1fd86cdb669387a339b903bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?St=C3=A9phan=20Mestach?= <smestach@bluesquare.org>
Date: Mon, 13 Jun 2022 15:55:34 +0200
Subject: [PATCH 08/55] Use github

---
 package.json |  2 +-
 yarn.lock    | 14 +++++++++++---
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 93f8ff0b..870617a9 100644
--- a/package.json
+++ b/package.json
@@ -84,7 +84,7 @@
     "@material-ui/icons": "^4.2.1",
     "@material-ui/lab": "^4.0.0-alpha.48",
     "@material-ui/pickers": "^3.2.10",
-    "bluesquare-components": "link:../bluesquare-components",    
+    "bluesquare-components": "https://github.com/BLSQ/bluesquare-components",    
     "history": "^5.0.0",
     "moment": "^2.27.0",
     "notistack": "^0.9.17",
diff --git a/yarn.lock b/yarn.lock
index c6fcb4dc..21aba406 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3226,9 +3226,17 @@ bluebird@^3.5.5, bluebird@^3.7.2:
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
   integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
 
-"bluesquare-components@link:../bluesquare-components":
-  version "0.0.0"
-  uid ""
+"bluesquare-components@https://github.com/BLSQ/bluesquare-components":
+  version "0.2.0"
+  resolved "https://github.com/BLSQ/bluesquare-components#a6cc1cba06dba41b5f2ac3b247af79803047334c"
+  dependencies:
+    "@babel/plugin-transform-runtime" "^7.17.0"
+    "@babel/preset-typescript" "^7.16.7"
+    "@babel/runtime" "^7.17.2"
+    babel-plugin-formatjs "^10.3.18"
+    react-intersection-observer "^8.26.1"
+    react-visibility-sensor "^5.1.1"
+    ts-loader "^9.2.8"
 
 bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.11.9:
   version "4.12.0"

From a0869baaf43c633d6a401886a353cca24b30d65f Mon Sep 17 00:00:00 2001
From: Madeline OLeary <madeline.w.oleary@gmail.com>
Date: Mon, 13 Jun 2022 16:07:26 +0200
Subject: [PATCH 09/55] using viewType in url to manage toggle

---
 .../invoices/InvoiceSelectionContainer.js     | 32 ++++++++++++-------
 src/components/invoices/invoiceRoutes.js      |  2 +-
 2 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/src/components/invoices/InvoiceSelectionContainer.js b/src/components/invoices/InvoiceSelectionContainer.js
index fcbf4c07..760dd16b 100644
--- a/src/components/invoices/InvoiceSelectionContainer.js
+++ b/src/components/invoices/InvoiceSelectionContainer.js
@@ -35,10 +35,11 @@ const styles = (theme) => ({
 
 const useStyles = makeStyles(styles);
 
-const updateHistory = (history, parent, period, searchValue, defaultPathName) => {
+const updateHistory = (history, parent, period, searchValue, defaultPathName, viewType) => {
   const parentParam = parent ? "&parent=" + parent : "";
+  const path = defaultPathName || `/select/${viewType}`;
   history.replace({
-    pathname: defaultPathName,
+    pathname: path,
     search: "?q=" + searchValue + "&period=" + period + parentParam,
   });
 };
@@ -56,13 +57,16 @@ const InvoiceSelectionContainer = (props) => {
     topLevelsOrgUnits,
     periodFormat,
     resultsElements,
+    match,
   } = props;
   const [orgUnits, setOrgUnits] = useState();
   const [loading, setLoading] = useState(false);
   const [searchValue, setSearchValue] = useState(ouSearchValue);
   const [searchPeriod, setSearchPeriod] = useState(period);
   const [debouncedSearchValue, setDebouncedSearchValue] = useDebounce(ouSearchValue);
-  const [traditionalView, setTraditionalView] = useState(true);
+
+  const [viewType, setViewType] = useState(match.params.viewType);
+  const [useTraditionalView, setUseTraditionalView] = useState(viewType === "traditional");
 
   useEffect(() => {
     const search = async () => {
@@ -82,7 +86,7 @@ const InvoiceSelectionContainer = (props) => {
 
         setOrgUnits(newOrgUnits);
         if (debouncedSearchValue !== ouSearchValue) {
-          updateHistory(history, parent, period, debouncedSearchValue, defaultPathName);
+          updateHistory(history, parent, period, debouncedSearchValue, defaultPathName, viewType);
         }
       } finally {
         setLoading(false);
@@ -99,7 +103,7 @@ const InvoiceSelectionContainer = (props) => {
     dhis2,
     defaultPathName,
     history,
-    traditionalView,
+    viewType,
   ]);
 
   const onOuSearchChange = async (event) => {
@@ -109,22 +113,26 @@ const InvoiceSelectionContainer = (props) => {
 
   const onPeriodChange = (newPeriod) => {
     setSearchPeriod(newPeriod);
-    updateHistory(history, parent, newPeriod, debouncedSearchValue, defaultPathName);
+    updateHistory(history, parent, newPeriod, debouncedSearchValue, defaultPathName, viewType);
   };
 
   const onParentOrganisationUnit = (orgUnitId) => {
-    updateHistory(history, orgUnitId, period, debouncedSearchValue, defaultPathName);
+    updateHistory(history, orgUnitId, period, debouncedSearchValue, defaultPathName, viewType);
   };
 
   const classes = useStyles();
   const { t } = useTranslation();
   const toggleView = (useTraditionalView) => {
-    setTraditionalView(useTraditionalView);
+    setUseTraditionalView(useTraditionalView);
+    const viewToUse = useTraditionalView ? "traditional" : "tree";
+    setViewType(viewToUse);
+    const newUrl = window.location.href.replace(`/${viewType}`, `/${viewToUse}`);
+    window.history.replaceState({}, "", newUrl);
   };
 
   const switchToTreeView = "Switch to orgunit tree view";
   const switchToTraditionalView = "Switch to traditional view";
-  const viewLabel = traditionalView ? switchToTreeView : switchToTraditionalView;
+  const viewLabel = useTraditionalView ? switchToTreeView : switchToTraditionalView;
 
   return (
     <Paper className={classes.paper} square>
@@ -132,7 +140,7 @@ const InvoiceSelectionContainer = (props) => {
         <Typography variant="h6" component="h6" gutterBottom>
           {t("invoices.search.title")}
         </Typography>
-        <Button onClick={() => toggleView(!traditionalView)} startIcon={<CachedIcon />}>
+        <Button onClick={() => toggleView(!useTraditionalView)} startIcon={<CachedIcon />}>
           {viewLabel}
         </Button>
       </div>
@@ -140,8 +148,8 @@ const InvoiceSelectionContainer = (props) => {
       <br />
       <br />
       <div className={classes.filters}>
-        {!traditionalView && <InvoiceTreeView invoiceLinksProps={props} searchPeriod={searchPeriod} t={t} />}
-        {traditionalView && (
+        {!useTraditionalView && <InvoiceTreeView invoiceLinksProps={props} searchPeriod={searchPeriod} t={t} />}
+        {useTraditionalView && (
           <InvoiceTraditionalView
             topLevelsOrgUnits={topLevelsOrgUnits}
             onParentOrganisationUnit={onParentOrganisationUnit}
diff --git a/src/components/invoices/invoiceRoutes.js b/src/components/invoices/invoiceRoutes.js
index f44fdacd..dac4d6f0 100644
--- a/src/components/invoices/invoiceRoutes.js
+++ b/src/components/invoices/invoiceRoutes.js
@@ -44,7 +44,7 @@ const invoiceRoutes = (props) => {
     />,
     <Route
       key="invoiceSelectionRoute"
-      path="/select"
+      path="/select/:viewType"
       exact
       component={(routerProps) => {
         const params = new URLSearchParams(routerProps.location.search.substring(1));

From b1e206d99bfe154d06cf0a901c06cdec33f84a2f Mon Sep 17 00:00:00 2001
From: Madeline OLeary <madeline.w.oleary@gmail.com>
Date: Mon, 13 Jun 2022 16:27:06 +0200
Subject: [PATCH 10/55] adds periodPicker to tree view

---
 .../invoices/InvoiceSelectionContainer.js     | 11 +++-
 .../invoices/InvoiceTraditionalView.js        |  2 -
 src/components/invoices/InvoiceTreeView.js    | 61 +++++++++++--------
 3 files changed, 45 insertions(+), 29 deletions(-)

diff --git a/src/components/invoices/InvoiceSelectionContainer.js b/src/components/invoices/InvoiceSelectionContainer.js
index 760dd16b..b55528cf 100644
--- a/src/components/invoices/InvoiceSelectionContainer.js
+++ b/src/components/invoices/InvoiceSelectionContainer.js
@@ -148,7 +148,16 @@ const InvoiceSelectionContainer = (props) => {
       <br />
       <br />
       <div className={classes.filters}>
-        {!useTraditionalView && <InvoiceTreeView invoiceLinksProps={props} searchPeriod={searchPeriod} t={t} />}
+        {!useTraditionalView && (
+          <InvoiceTreeView
+            invoiceLinksProps={props}
+            searchPeriod={searchPeriod}
+            t={t}
+            classes={classes}
+            onPeriodChange={onPeriodChange}
+            periodFormat={periodFormat}
+          />
+        )}
         {useTraditionalView && (
           <InvoiceTraditionalView
             topLevelsOrgUnits={topLevelsOrgUnits}
diff --git a/src/components/invoices/InvoiceTraditionalView.js b/src/components/invoices/InvoiceTraditionalView.js
index 245697f5..527c374a 100644
--- a/src/components/invoices/InvoiceTraditionalView.js
+++ b/src/components/invoices/InvoiceTraditionalView.js
@@ -5,8 +5,6 @@ import OuPicker from "./OuPicker";
 import PeriodPicker from "../shared/PeriodPicker";
 import SelectionResultsContainer from "./SelectionResultsContainer";
 
-
-
 const InvoiceTraditionalView = ({
   topLevelsOrgUnits,
   onParentOrganisationUnit,
diff --git a/src/components/invoices/InvoiceTreeView.js b/src/components/invoices/InvoiceTreeView.js
index 5aac76cc..a764ba80 100644
--- a/src/components/invoices/InvoiceTreeView.js
+++ b/src/components/invoices/InvoiceTreeView.js
@@ -1,40 +1,49 @@
 import React, { useState } from "react";
 import OrgUnitTreePicker from "../shared/orgunit_picker/OrgUnitTreePicker";
 import InvoiceLinks from "./InvoiceLinks";
+import PeriodPicker from "../shared/PeriodPicker";
+import { FormControl } from "@material-ui/core";
 
-const InvoiceTreeView = ({ invoiceLinksProps, searchPeriod, t }) => {
+const InvoiceTreeView = ({ invoiceLinksProps, searchPeriod, t, classes, onPeriodChange, periodFormat }) => {
   const [selectedOrgUnits, setSelectedOrgUnits] = useState([]);
   const onOrgUnitChange = (orgunits) => {
     setSelectedOrgUnits(orgunits);
   };
   return (
-    <div style={{ display: "flex" }}>
-      <div style={{ margin: "10px", width: "500px" }}>
-        <OrgUnitTreePicker onChange={onOrgUnitChange} />
-      </div>
-      <div>
-        {selectedOrgUnits &&
-          selectedOrgUnits.map((ou) => (
-            <div>
-              <h2>{ou.name}</h2>
-              <h3>Contrats</h3>
-              {ou.activeContracts &&
-                ou.activeContracts
-                  .filter((c) => c.matchPeriod(searchPeriod))
-                  .map((c) => (
-                    <div>
-                      {c.startPeriod} {c.endPeriod} {c.codes} {c.codes}
-                    </div>
-                  ))}
-            </div>
-          ))}
-        <h3>Factures</h3>
+    <>
+      <FormControl className={classes.periodContainer}>
+        <PeriodPicker period={searchPeriod} onPeriodChange={onPeriodChange} periodFormat={periodFormat} />
+      </FormControl>
+      <br />
+      <br />
+      <div style={{ display: "flex" }}>
+        <div style={{ margin: "10px", width: "500px" }}>
+          <OrgUnitTreePicker onChange={onOrgUnitChange} />
+        </div>
+        <div>
+          {selectedOrgUnits &&
+            selectedOrgUnits.map((ou) => (
+              <div>
+                <h2>{ou.name}</h2>
+                <h3>Contrats</h3>
+                {ou.activeContracts &&
+                  ou.activeContracts
+                    .filter((c) => c.matchPeriod(searchPeriod))
+                    .map((c) => (
+                      <div>
+                        {c.startPeriod} {c.endPeriod} {c.codes} {c.codes}
+                      </div>
+                    ))}
+              </div>
+            ))}
+          <h3>Factures</h3>
 
-        {selectedOrgUnits && selectedOrgUnits[0] && (
-          <InvoiceLinks {...invoiceLinksProps} t={t} orgUnit={selectedOrgUnits[0]} period={searchPeriod} />
-        )}
+          {selectedOrgUnits && selectedOrgUnits[0] && (
+            <InvoiceLinks {...invoiceLinksProps} t={t} orgUnit={selectedOrgUnits[0]} period={searchPeriod} />
+          )}
+        </div>
       </div>
-    </div>
+    </>
   );
 };
 

From ca08f92580094ffb25a0c6ba3c21217e7b2114cd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?St=C3=A9phan=20Mestach?= <smestach@bluesquare.org>
Date: Mon, 13 Jun 2022 19:43:11 +0200
Subject: [PATCH 11/55] Keep /select route and use query param instead of path

---
 package.json                                  |  1 +
 src/components/App.js                         |  4 +-
 src/components/contracts/wizard/Step2.js      |  2 +-
 .../invoices/InvoiceSelectionContainer.js     | 26 ++++----
 src/components/invoices/invoiceRoutes.js      | 63 ++++++++++---------
 src/components/shared/AppContent.js           |  4 +-
 .../orgunit_picker/OrgUnitTreePicker.js       | 19 +++---
 7 files changed, 61 insertions(+), 58 deletions(-)

diff --git a/package.json b/package.json
index 870617a9..5f11ac45 100644
--- a/package.json
+++ b/package.json
@@ -72,6 +72,7 @@
     "react-scripts": "3.4.4",
     "react-select": "^3.1.0",
     "react-test-renderer": "^16.6.3",
+    "react-table":"7.8.0",
     "recharts": "1.8.5",
     "rollup": "^2.10.0"
   },
diff --git a/src/components/App.js b/src/components/App.js
index 0aab10a0..2d2e0eb9 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -8,7 +8,7 @@ import { withStyles } from "@material-ui/core/styles";
 import { Provider } from "react-redux";
 import { SnackbarProvider } from "notistack";
 import { I18nextProvider } from "react-i18next";
-import { createMuiTheme, MuiThemeProvider } from "@material-ui/core/styles";
+import { createTheme, MuiThemeProvider } from "@material-ui/core/styles";
 import { MuiPickersUtilsProvider } from "@material-ui/pickers";
 import { store } from "./redux/store";
 import { IntlProvider } from "react-intl";
@@ -79,7 +79,7 @@ const rawTheme = {
   },
 };
 
-const defaultTheme = createMuiTheme(rawTheme);
+const defaultTheme = createTheme(rawTheme);
 
 const App = ({ classes, incentivesDescriptors, dataElementGroups, drawerLinks, defaultPathName, children }) => {
   const registry = PluginRegistry;
diff --git a/src/components/contracts/wizard/Step2.js b/src/components/contracts/wizard/Step2.js
index 5ef975ca..10be4c0f 100644
--- a/src/components/contracts/wizard/Step2.js
+++ b/src/components/contracts/wizard/Step2.js
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import MUIDataTable from "mui-datatables";
 import PluginRegistry from "../../core/PluginRegistry";
-import { createMuiTheme, MuiThemeProvider } from "@material-ui/core";
+import { createTheme, MuiThemeProvider } from "@material-ui/core";
 
 function isIsoDate(str) {
   const isMatchingYYYYMMDD = /\d{4}-\d{2}-\d{2}/.test(str);
diff --git a/src/components/invoices/InvoiceSelectionContainer.js b/src/components/invoices/InvoiceSelectionContainer.js
index b55528cf..54dbeb04 100644
--- a/src/components/invoices/InvoiceSelectionContainer.js
+++ b/src/components/invoices/InvoiceSelectionContainer.js
@@ -37,10 +37,10 @@ const useStyles = makeStyles(styles);
 
 const updateHistory = (history, parent, period, searchValue, defaultPathName, viewType) => {
   const parentParam = parent ? "&parent=" + parent : "";
-  const path = defaultPathName || `/select/${viewType}`;
+  const path = defaultPathName
   history.replace({
     pathname: path,
-    search: "?q=" + searchValue + "&period=" + period + parentParam,
+    search: "?q=" + searchValue + "&period=" + period + parentParam+"&mode="+viewType,
   });
 };
 
@@ -57,7 +57,6 @@ const InvoiceSelectionContainer = (props) => {
     topLevelsOrgUnits,
     periodFormat,
     resultsElements,
-    match,
   } = props;
   const [orgUnits, setOrgUnits] = useState();
   const [loading, setLoading] = useState(false);
@@ -65,8 +64,7 @@ const InvoiceSelectionContainer = (props) => {
   const [searchPeriod, setSearchPeriod] = useState(period);
   const [debouncedSearchValue, setDebouncedSearchValue] = useDebounce(ouSearchValue);
 
-  const [viewType, setViewType] = useState(match.params.viewType);
-  const [useTraditionalView, setUseTraditionalView] = useState(viewType === "traditional");
+  const [viewType, setViewType] = useState(props.viewType);
 
   useEffect(() => {
     const search = async () => {
@@ -122,25 +120,23 @@ const InvoiceSelectionContainer = (props) => {
 
   const classes = useStyles();
   const { t } = useTranslation();
-  const toggleView = (useTraditionalView) => {
-    setUseTraditionalView(useTraditionalView);
-    const viewToUse = useTraditionalView ? "traditional" : "tree";
+  const toggleView = () => {
+    const viewToUse = viewType === "tree" ? "table" : "tree";
     setViewType(viewToUse);
-    const newUrl = window.location.href.replace(`/${viewType}`, `/${viewToUse}`);
-    window.history.replaceState({}, "", newUrl);
+    updateHistory(history, parent, period, debouncedSearchValue, defaultPathName, viewToUse)
   };
 
   const switchToTreeView = "Switch to orgunit tree view";
   const switchToTraditionalView = "Switch to traditional view";
-  const viewLabel = useTraditionalView ? switchToTreeView : switchToTraditionalView;
-
+  const viewLabel = viewType === "table" ? switchToTreeView : switchToTraditionalView;
+  debugger;
   return (
     <Paper className={classes.paper} square>
       <div className={classes.headerButtons}>
         <Typography variant="h6" component="h6" gutterBottom>
           {t("invoices.search.title")}
         </Typography>
-        <Button onClick={() => toggleView(!useTraditionalView)} startIcon={<CachedIcon />}>
+        <Button onClick={() => toggleView()} startIcon={<CachedIcon />}>
           {viewLabel}
         </Button>
       </div>
@@ -148,7 +144,7 @@ const InvoiceSelectionContainer = (props) => {
       <br />
       <br />
       <div className={classes.filters}>
-        {!useTraditionalView && (
+        {viewType === "tree" && (
           <InvoiceTreeView
             invoiceLinksProps={props}
             searchPeriod={searchPeriod}
@@ -158,7 +154,7 @@ const InvoiceSelectionContainer = (props) => {
             periodFormat={periodFormat}
           />
         )}
-        {useTraditionalView && (
+        {viewType === "table" && (
           <InvoiceTraditionalView
             topLevelsOrgUnits={topLevelsOrgUnits}
             onParentOrganisationUnit={onParentOrganisationUnit}
diff --git a/src/components/invoices/invoiceRoutes.js b/src/components/invoices/invoiceRoutes.js
index dac4d6f0..bbb035d2 100644
--- a/src/components/invoices/invoiceRoutes.js
+++ b/src/components/invoices/invoiceRoutes.js
@@ -7,6 +7,7 @@ import PluginRegistry from "../core/PluginRegistry";
 import Approvals from "../approvals/Approvals";
 
 const invoiceRoutes = (props) => {
+  debugger;
   return [
     <Route
       key="reportRoute"
@@ -43,36 +44,38 @@ const invoiceRoutes = (props) => {
       }}
     />,
     <Route
-      key="invoiceSelectionRoute"
-      path="/select/:viewType"
-      exact
-      component={(routerProps) => {
-        const params = new URLSearchParams(routerProps.location.search.substring(1));
-        const period = params.get("period");
-        const parent = params.get("parent");
-        let ouSearchValue = params.get("q");
-        if (!ouSearchValue) {
-          ouSearchValue = "";
-        }
-        const invoices = PluginRegistry.extension("invoices.invoices");
-        return (
-          <InvoiceSelectionContainer
-            key="InvoiceSelectionContainer"
-            {...routerProps}
-            invoices={invoices}
-            currentUser={props.currentUser}
-            onPeriodChange={props.onPeriodChange}
-            orgUnits={props.orgUnits}
-            period={period || props.period}
-            {...props.config.global}
-            dhis2={props.dhis2}
-            topLevelsOrgUnits={props.topLevelsOrgUnits}
-            parent={parent}
-            ouSearchValue={ouSearchValue}
-          />
-        );
-      }}
-    />,
+    key="invoiceSelectionRoute"
+    path="/select"
+    exact
+    component={(routerProps) => {
+      const params = new URLSearchParams(routerProps.location.search.substring(1));
+      const period = params.get("period");
+      const parent = params.get("parent");
+      const viewType = params.get("mode") || "table";
+      let ouSearchValue = params.get("q");
+      if (!ouSearchValue) {
+        ouSearchValue = "";
+      }
+      const invoices = PluginRegistry.extension("invoices.invoices");
+      return (
+        <InvoiceSelectionContainer
+          key="InvoiceSelectionContainer"
+          {...routerProps}
+          invoices={invoices}
+          currentUser={props.currentUser}
+          onPeriodChange={props.onPeriodChange}
+          orgUnits={props.orgUnits}
+          period={period || props.period}
+          {...props.config.global}
+          dhis2={props.dhis2}
+          topLevelsOrgUnits={props.topLevelsOrgUnits}
+          parent={parent}
+          ouSearchValue={ouSearchValue}
+          viewType={viewType}
+        />
+      );
+    }}
+  />,
     <Route key="approvalsRoute" path="/approvals/:workflowids/:period" exact component={Approvals} />,
   ];
 };
diff --git a/src/components/shared/AppContent.js b/src/components/shared/AppContent.js
index 56a97d74..e5401e90 100644
--- a/src/components/shared/AppContent.js
+++ b/src/components/shared/AppContent.js
@@ -152,8 +152,8 @@ AppContent.propTypes = {
   dhis2: PropTypes.object.isRequired,
   config: PropTypes.object.isRequired,
   invoices: PropTypes.any.isRequired,
-  incentivesDescriptors: PropTypes.any.isRequired,
-  dataElementGroups: PropTypes.any.isRequired,
+  incentivesDescriptors: PropTypes.any,
+  dataElementGroups: PropTypes.any,
   currentUser: PropTypes.object,
   dispatch: PropTypes.func.isRequired,
   isLoading: PropTypes.bool.isRequired,
diff --git a/src/components/shared/orgunit_picker/OrgUnitTreePicker.js b/src/components/shared/orgunit_picker/OrgUnitTreePicker.js
index 6557daea..d8b10b27 100644
--- a/src/components/shared/orgunit_picker/OrgUnitTreePicker.js
+++ b/src/components/shared/orgunit_picker/OrgUnitTreePicker.js
@@ -7,6 +7,12 @@ import PluginRegistry from "../../core/PluginRegistry";
 const loadedOrgUnitsById = {};
 let contractsByOrgUnitId = {};
 
+let currentPeriod = undefined
+
+const setPeriod = (argPeriod) => {
+  currentPeriod = argPeriod
+}
+
 const defaultOrgUnitFields =
   "id,name,ancestors[id,name],children[id,name,ancestors[id,name],children[id,name,ancestors[id,name],children]]";
 
@@ -14,9 +20,7 @@ const withHasChildren = (organisationUnits) => {
   for (let ou of organisationUnits) {
     ou.has_children = ou.children && ou.children.length > 0;
     ou.activeContracts = contractsByOrgUnitId[ou.id];
-    if (ou.activeContracts) {
-      debugger;
-    }
+    
     loadedOrgUnitsById[ou.id] = ou;
   }
   organisationUnits.sort((a, b) => a.name.localeCompare(b.name));
@@ -62,7 +66,6 @@ export const getChildrenData = async (id) => {
 };
 
 const search = (input1, input2, type) => {
-  debugger;
   console.log(input1, input2, type);
   return [];
 };
@@ -94,21 +97,22 @@ const makeDropDownText = (orgUnit) => {
   );
 };
 const onOrgUnitSelect = (orgUnit) => {
-  debugger;
   alert("Selected " + orgUnit.name);
   return [];
 };
 
 const parseNodeIds = (orgUnit) => {
   const parsed = orgUnit.ancestors.map((a) => [a.id, a]).concat([[orgUnit.id, orgUnit]]);
-  debugger;
   return new Map(parsed);
 };
 
 const formatInitialSelectedIds = (selection) => [];
 const formatInitialSelectedParents = (selection) => new Map();
 
-const OrgUnitTreePicker = ({ initialSelection, onChange }) => {
+const OrgUnitTreePicker = ({ initialSelection, onChange, period }) => {
+
+  setPeriod(period)
+
   const [selectedOrgUnits, setSelectedOrgUnits] = useState(initialSelection);
 
   const [selectedOrgUnitsIds, setSelectedOrgUnitsIds] = useState(formatInitialSelectedIds(initialSelection));
@@ -139,7 +143,6 @@ const OrgUnitTreePicker = ({ initialSelection, onChange }) => {
     toggleOnLabelClick: false,
     isSelectable: () => true,
   };
-  debugger;
   return (
     <div>
       <TreeViewWithSearch

From ab8126325947a003150784fb7221968cf614f00a Mon Sep 17 00:00:00 2001
From: Madeline OLeary <madeline.w.oleary@gmail.com>
Date: Tue, 14 Jun 2022 10:57:29 +0200
Subject: [PATCH 12/55] extracts backend tree picker functions

---
 .../orgunit_picker/OrgUnitTreePicker.js       | 75 ++-----------------
 .../orgunit_picker/orgUnitTreeBackend.js      | 63 ++++++++++++++++
 2 files changed, 70 insertions(+), 68 deletions(-)
 create mode 100644 src/components/shared/orgunit_picker/orgUnitTreeBackend.js

diff --git a/src/components/shared/orgunit_picker/OrgUnitTreePicker.js b/src/components/shared/orgunit_picker/OrgUnitTreePicker.js
index d8b10b27..1d0c057e 100644
--- a/src/components/shared/orgunit_picker/OrgUnitTreePicker.js
+++ b/src/components/shared/orgunit_picker/OrgUnitTreePicker.js
@@ -1,85 +1,24 @@
 import React, { useState } from "react";
-import { getInstance } from "d2/lib/d2";
-import { TreeViewWithSearch }  from "bluesquare-components";
-import PluginRegistry from "../../core/PluginRegistry";
+import { TreeViewWithSearch } from "bluesquare-components";
+import { getRootData, getChildrenData, request } from "./orgUnitTreeBackend";
 
 // act as a cache to speed up first levels click
-const loadedOrgUnitsById = {};
-let contractsByOrgUnitId = {};
 
-let currentPeriod = undefined
+let currentPeriod = undefined;
 
 const setPeriod = (argPeriod) => {
-  currentPeriod = argPeriod
-}
-
-const defaultOrgUnitFields =
-  "id,name,ancestors[id,name],children[id,name,ancestors[id,name],children[id,name,ancestors[id,name],children]]";
-
-const withHasChildren = (organisationUnits) => {
-  for (let ou of organisationUnits) {
-    ou.has_children = ou.children && ou.children.length > 0;
-    ou.activeContracts = contractsByOrgUnitId[ou.id];
-    
-    loadedOrgUnitsById[ou.id] = ou;
-  }
-  organisationUnits.sort((a, b) => a.name.localeCompare(b.name));
-  return organisationUnits;
-};
-
-export const getRootData = async (id, type = "source") => {
-  if (Object.keys(contractsByOrgUnitId).length == 0) {
-    const contractService = PluginRegistry.extension("contracts.service");
-    const allContracts = await contractService.findAll();
-    contractsByOrgUnitId = _.groupBy(allContracts, (c) => c.orgUnit.id);
-  }
-
-  const d2 = await getInstance();
-  const api = await d2.Api.getApi();
-  const resp = await api.get("organisationUnits", {
-    filter: "level:eq:1",
-    fields: defaultOrgUnitFields,
-    paging: false,
-  });
-
-  return withHasChildren(resp.organisationUnits);
+  currentPeriod = argPeriod;
 };
 
 export const label = (data) => {
   return data.name;
 };
 
-export const getChildrenData = async (id) => {
-  const loadedOrgUnit = loadedOrgUnitsById[id];
-  if (loadedOrgUnit && loadedOrgUnit.children && loadedOrgUnit.children[0].children) {
-    return withHasChildren(loadedOrgUnit.children);
-  }
-  const d2 = await getInstance();
-  const api = await d2.Api.getApi();
-  const resp = await api.get("organisationUnits", {
-    filter: "parent.id:eq:" + id,
-    fields: defaultOrgUnitFields,
-    paging: false,
-  });
-
-  return withHasChildren(resp.organisationUnits);
-};
-
 const search = (input1, input2, type) => {
   console.log(input1, input2, type);
   return [];
 };
 
-const request = async (value, count, source, version) => {
-  const d2 = await getInstance();
-  const api = await d2.Api.getApi();
-  const resp = await api.get("organisationUnits", {
-    filter: "name:ilike:" + value,
-    fields: defaultOrgUnitFields,
-  });
-
-  return withHasChildren(resp.organisationUnits);
-};
 const makeDropDownText = (orgUnit) => {
   return (
     <div>
@@ -92,10 +31,11 @@ const makeDropDownText = (orgUnit) => {
           .map((o) => o.name)
           .join(" > ")}
       </pre>
-      <hr></hr>
+      <hr />
     </div>
   );
 };
+
 const onOrgUnitSelect = (orgUnit) => {
   alert("Selected " + orgUnit.name);
   return [];
@@ -110,8 +50,7 @@ const formatInitialSelectedIds = (selection) => [];
 const formatInitialSelectedParents = (selection) => new Map();
 
 const OrgUnitTreePicker = ({ initialSelection, onChange, period }) => {
-
-  setPeriod(period)
+  setPeriod(period);
 
   const [selectedOrgUnits, setSelectedOrgUnits] = useState(initialSelection);
 
diff --git a/src/components/shared/orgunit_picker/orgUnitTreeBackend.js b/src/components/shared/orgunit_picker/orgUnitTreeBackend.js
new file mode 100644
index 00000000..d21c9f36
--- /dev/null
+++ b/src/components/shared/orgunit_picker/orgUnitTreeBackend.js
@@ -0,0 +1,63 @@
+import { getInstance } from "d2/lib/d2";
+import PluginRegistry from "../../core/PluginRegistry";
+
+const loadedOrgUnitsById = {};
+let contractsByOrgUnitId = {};
+const defaultOrgUnitFields =
+  "id,name,ancestors[id,name],children[id,name,ancestors[id,name],children[id,name,ancestors[id,name],children]]";
+
+export const getRootData = async (id, type = "source") => {
+  if (Object.keys(contractsByOrgUnitId).length === 0) {
+    const contractService = PluginRegistry.extension("contracts.service");
+    const allContracts = await contractService.findAll();
+    contractsByOrgUnitId = _.groupBy(allContracts, (c) => c.orgUnit.id);
+  }
+
+  const d2 = await getInstance();
+  const api = await d2.Api.getApi();
+  const resp = await api.get("organisationUnits", {
+    filter: "level:eq:1",
+    fields: defaultOrgUnitFields,
+    paging: false,
+  });
+
+  return withHasChildren(resp.organisationUnits);
+};
+
+const withHasChildren = (organisationUnits) => {
+  for (let ou of organisationUnits) {
+    ou.has_children = ou.children && ou.children.length > 0;
+    ou.activeContracts = contractsByOrgUnitId[ou.id];
+
+    loadedOrgUnitsById[ou.id] = ou;
+  }
+  organisationUnits.sort((a, b) => a.name.localeCompare(b.name));
+  return organisationUnits;
+};
+
+export const getChildrenData = async (id) => {
+  const loadedOrgUnit = loadedOrgUnitsById[id];
+  if (loadedOrgUnit && loadedOrgUnit.children && loadedOrgUnit.children[0].children) {
+    return withHasChildren(loadedOrgUnit.children);
+  }
+  const d2 = await getInstance();
+  const api = await d2.Api.getApi();
+  const resp = await api.get("organisationUnits", {
+    filter: "parent.id:eq:" + id,
+    fields: defaultOrgUnitFields,
+    paging: false,
+  });
+
+  return withHasChildren(resp.organisationUnits);
+};
+
+export const request = async (value, count, source, version) => {
+  const d2 = await getInstance();
+  const api = await d2.Api.getApi();
+  const resp = await api.get("organisationUnits", {
+    filter: "name:ilike:" + value,
+    fields: defaultOrgUnitFields,
+  });
+
+  return withHasChildren(resp.organisationUnits);
+};

From 537ff7eecff98ad098261ba273591fa0076d6926 Mon Sep 17 00:00:00 2001
From: Madeline OLeary <madeline.w.oleary@gmail.com>
Date: Tue, 14 Jun 2022 15:45:49 +0200
Subject: [PATCH 13/55] computes props in backend lib, handles period filter

---
 .../invoices/InvoiceSelectionContainer.js     |  6 +-
 src/components/invoices/InvoiceTreeView.js    | 14 ++---
 .../orgunit_picker/OrgUnitTreePicker.js       | 55 +------------------
 .../orgunit_picker/orgUnitTreeBackend.js      | 52 +++++++++++++++++-
 4 files changed, 61 insertions(+), 66 deletions(-)

diff --git a/src/components/invoices/InvoiceSelectionContainer.js b/src/components/invoices/InvoiceSelectionContainer.js
index 54dbeb04..4bf6eaa1 100644
--- a/src/components/invoices/InvoiceSelectionContainer.js
+++ b/src/components/invoices/InvoiceSelectionContainer.js
@@ -5,8 +5,6 @@ import CachedIcon from "@material-ui/icons/Cached";
 
 import { makeStyles } from "@material-ui/styles";
 import searchOrgunit from "./searchOrgunit";
-import SelectionResultsContainer from "./SelectionResultsContainer";
-
 import useDebounce from "../shared/useDebounce";
 import InvoiceTreeView from "./InvoiceTreeView";
 import InvoiceTraditionalView from "./InvoiceTraditionalView";
@@ -123,13 +121,13 @@ const InvoiceSelectionContainer = (props) => {
   const toggleView = () => {
     const viewToUse = viewType === "tree" ? "table" : "tree";
     setViewType(viewToUse);
-    updateHistory(history, parent, period, debouncedSearchValue, defaultPathName, viewToUse)
+    updateHistory(history, parent, period, debouncedSearchValue, defaultPathName, viewToUse);
   };
 
   const switchToTreeView = "Switch to orgunit tree view";
   const switchToTraditionalView = "Switch to traditional view";
   const viewLabel = viewType === "table" ? switchToTreeView : switchToTraditionalView;
-  debugger;
+
   return (
     <Paper className={classes.paper} square>
       <div className={classes.headerButtons}>
diff --git a/src/components/invoices/InvoiceTreeView.js b/src/components/invoices/InvoiceTreeView.js
index a764ba80..c7d1dd77 100644
--- a/src/components/invoices/InvoiceTreeView.js
+++ b/src/components/invoices/InvoiceTreeView.js
@@ -18,7 +18,7 @@ const InvoiceTreeView = ({ invoiceLinksProps, searchPeriod, t, classes, onPeriod
       <br />
       <div style={{ display: "flex" }}>
         <div style={{ margin: "10px", width: "500px" }}>
-          <OrgUnitTreePicker onChange={onOrgUnitChange} />
+          <OrgUnitTreePicker onChange={onOrgUnitChange} period={searchPeriod} />
         </div>
         <div>
           {selectedOrgUnits &&
@@ -27,13 +27,11 @@ const InvoiceTreeView = ({ invoiceLinksProps, searchPeriod, t, classes, onPeriod
                 <h2>{ou.name}</h2>
                 <h3>Contrats</h3>
                 {ou.activeContracts &&
-                  ou.activeContracts
-                    .filter((c) => c.matchPeriod(searchPeriod))
-                    .map((c) => (
-                      <div>
-                        {c.startPeriod} {c.endPeriod} {c.codes} {c.codes}
-                      </div>
-                    ))}
+                  ou.activeContracts.map((c) => (
+                    <div>
+                      {c.startPeriod} {c.endPeriod} {c.codes} {c.codes}
+                    </div>
+                  ))}
               </div>
             ))}
           <h3>Factures</h3>
diff --git a/src/components/shared/orgunit_picker/OrgUnitTreePicker.js b/src/components/shared/orgunit_picker/OrgUnitTreePicker.js
index 1d0c057e..6b0aea04 100644
--- a/src/components/shared/orgunit_picker/OrgUnitTreePicker.js
+++ b/src/components/shared/orgunit_picker/OrgUnitTreePicker.js
@@ -1,51 +1,12 @@
 import React, { useState } from "react";
 import { TreeViewWithSearch } from "bluesquare-components";
-import { getRootData, getChildrenData, request } from "./orgUnitTreeBackend";
-
-// act as a cache to speed up first levels click
-
-let currentPeriod = undefined;
-
-const setPeriod = (argPeriod) => {
-  currentPeriod = argPeriod;
-};
-
-export const label = (data) => {
-  return data.name;
-};
-
-const search = (input1, input2, type) => {
-  console.log(input1, input2, type);
-  return [];
-};
-
-const makeDropDownText = (orgUnit) => {
-  return (
-    <div>
-      <span display="block">
-        {orgUnit.name} <code style={{ color: "lightgrey" }}>{orgUnit.id}</code>
-      </span>
-      <pre style={{ fontSize: "8px" }}>
-        {orgUnit.ancestors
-          .slice(1)
-          .map((o) => o.name)
-          .join(" > ")}
-      </pre>
-      <hr />
-    </div>
-  );
-};
+import { setPeriod, treeProps } from "./orgUnitTreeBackend";
 
 const onOrgUnitSelect = (orgUnit) => {
   alert("Selected " + orgUnit.name);
   return [];
 };
 
-const parseNodeIds = (orgUnit) => {
-  const parsed = orgUnit.ancestors.map((a) => [a.id, a]).concat([[orgUnit.id, orgUnit]]);
-  return new Map(parsed);
-};
-
 const formatInitialSelectedIds = (selection) => [];
 const formatInitialSelectedParents = (selection) => new Map();
 
@@ -69,19 +30,6 @@ const OrgUnitTreePicker = ({ initialSelection, onChange, period }) => {
     }
   };
 
-  const treeProps = {
-    getRootData,
-    label,
-    getChildrenData,
-    search,
-    request,
-    makeDropDownText,
-    onSelect: onOrgUnitSelect,
-    onUpdate: onUpdate,
-    parseNodeIds: parseNodeIds,
-    toggleOnLabelClick: false,
-    isSelectable: () => true,
-  };
   return (
     <div>
       <TreeViewWithSearch
@@ -89,6 +37,7 @@ const OrgUnitTreePicker = ({ initialSelection, onChange, period }) => {
         preselected={selectedOrgUnitsIds}
         preexpanded={selectedOrgUnitParents}
         selectedData={selectedOrgUnits}
+        onUpdate={onUpdate}
       />
     </div>
   );
diff --git a/src/components/shared/orgunit_picker/orgUnitTreeBackend.js b/src/components/shared/orgunit_picker/orgUnitTreeBackend.js
index d21c9f36..62fa9b03 100644
--- a/src/components/shared/orgunit_picker/orgUnitTreeBackend.js
+++ b/src/components/shared/orgunit_picker/orgUnitTreeBackend.js
@@ -1,6 +1,12 @@
 import { getInstance } from "d2/lib/d2";
 import PluginRegistry from "../../core/PluginRegistry";
 
+let currentPeriod = undefined;
+
+export const setPeriod = (argPeriod) => {
+  currentPeriod = argPeriod;
+};
+
 const loadedOrgUnitsById = {};
 let contractsByOrgUnitId = {};
 const defaultOrgUnitFields =
@@ -27,7 +33,7 @@ export const getRootData = async (id, type = "source") => {
 const withHasChildren = (organisationUnits) => {
   for (let ou of organisationUnits) {
     ou.has_children = ou.children && ou.children.length > 0;
-    ou.activeContracts = contractsByOrgUnitId[ou.id];
+    ou.activeContracts = (contractsByOrgUnitId[ou.id] || []).filter((c) => c.matchPeriod(currentPeriod));
 
     loadedOrgUnitsById[ou.id] = ou;
   }
@@ -61,3 +67,47 @@ export const request = async (value, count, source, version) => {
 
   return withHasChildren(resp.organisationUnits);
 };
+
+export const label = (data) => {
+  return data.name;
+};
+
+export const search = (input1, input2, type) => {
+  console.log(input1, input2, type);
+  return [];
+};
+
+export const makeDropDownText = (orgUnit) => {
+  return (
+    <div>
+      <span display="block">
+        {orgUnit.name} <code style={{ color: "lightgrey" }}>{orgUnit.id}</code>
+      </span>
+      <pre style={{ fontSize: "8px" }}>
+        {orgUnit.ancestors
+          .slice(1)
+          .map((o) => o.name)
+          .join(" > ")}
+      </pre>
+      <hr />
+    </div>
+  );
+};
+
+const parseNodeIds = (orgUnit) => {
+  const parsed = orgUnit.ancestors.map((a) => [a.id, a]).concat([[orgUnit.id, orgUnit]]);
+  return new Map(parsed);
+};
+
+
+export const treeProps = {
+  getRootData,
+  label,
+  getChildrenData,
+  search,
+  request,
+  makeDropDownText,
+  parseNodeIds: parseNodeIds,
+  toggleOnLabelClick: false,
+  isSelectable: () => true,
+};

From 105600a50dde255b84d99e22ce5c19be38c25eb2 Mon Sep 17 00:00:00 2001
From: Madeline OLeary <madeline.w.oleary@gmail.com>
Date: Tue, 14 Jun 2022 16:22:08 +0200
Subject: [PATCH 14/55] adds ou as query param to tree view

---
 src/components/invoices/InvoiceTreeView.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/components/invoices/InvoiceTreeView.js b/src/components/invoices/InvoiceTreeView.js
index c7d1dd77..064e3d90 100644
--- a/src/components/invoices/InvoiceTreeView.js
+++ b/src/components/invoices/InvoiceTreeView.js
@@ -3,10 +3,17 @@ import OrgUnitTreePicker from "../shared/orgunit_picker/OrgUnitTreePicker";
 import InvoiceLinks from "./InvoiceLinks";
 import PeriodPicker from "../shared/PeriodPicker";
 import { FormControl } from "@material-ui/core";
+import { anchorQueryParams, urlWith } from "../shared/tables/urlParams";
 
 const InvoiceTreeView = ({ invoiceLinksProps, searchPeriod, t, classes, onPeriodChange, periodFormat }) => {
   const [selectedOrgUnits, setSelectedOrgUnits] = useState([]);
   const onOrgUnitChange = (orgunits) => {
+    const queryParams = anchorQueryParams();
+    queryParams.set("ou", orgunits[0].id);
+    const newUrl = urlWith(queryParams);
+    if (newUrl !== window.location.toString()) {
+      window.history.replaceState({}, "", urlWith(queryParams));
+    }
     setSelectedOrgUnits(orgunits);
   };
   return (

From 708ff1f8ad0506abfd6b609ef75c9c8b12174435 Mon Sep 17 00:00:00 2001
From: Madeline OLeary <madeline.w.oleary@gmail.com>
Date: Tue, 14 Jun 2022 16:45:06 +0200
Subject: [PATCH 15/55] individual component for active contracts, implements
 in tree view

---
 src/components/invoices/InvoiceTreeView.js    |  3 +-
 .../contracts/ActiveContractContainer.js      | 28 +++++++++++++++++++
 2 files changed, 30 insertions(+), 1 deletion(-)
 create mode 100644 src/components/shared/contracts/ActiveContractContainer.js

diff --git a/src/components/invoices/InvoiceTreeView.js b/src/components/invoices/InvoiceTreeView.js
index 064e3d90..f5397dd5 100644
--- a/src/components/invoices/InvoiceTreeView.js
+++ b/src/components/invoices/InvoiceTreeView.js
@@ -4,6 +4,7 @@ import InvoiceLinks from "./InvoiceLinks";
 import PeriodPicker from "../shared/PeriodPicker";
 import { FormControl } from "@material-ui/core";
 import { anchorQueryParams, urlWith } from "../shared/tables/urlParams";
+import ActiveContractContainer from "../shared/contracts/ActiveContractContainer";
 
 const InvoiceTreeView = ({ invoiceLinksProps, searchPeriod, t, classes, onPeriodChange, periodFormat }) => {
   const [selectedOrgUnits, setSelectedOrgUnits] = useState([]);
@@ -36,7 +37,7 @@ const InvoiceTreeView = ({ invoiceLinksProps, searchPeriod, t, classes, onPeriod
                 {ou.activeContracts &&
                   ou.activeContracts.map((c) => (
                     <div>
-                      {c.startPeriod} {c.endPeriod} {c.codes} {c.codes}
+                      <ActiveContractContainer orgUnit={ou} contract={c} t={t} />
                     </div>
                   ))}
               </div>
diff --git a/src/components/shared/contracts/ActiveContractContainer.js b/src/components/shared/contracts/ActiveContractContainer.js
new file mode 100644
index 00000000..2dc1e9b1
--- /dev/null
+++ b/src/components/shared/contracts/ActiveContractContainer.js
@@ -0,0 +1,28 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { Chip, IconButton } from "@material-ui/core";
+import InfoIcon from "@material-ui/icons/Info";
+
+const ActiveContractContainer = ({ orgUnit, contract, t }) => {
+  return (
+    <div>
+      {t("dataEntry.contractFrom")} <code>{contract.startPeriod}</code> {t("dataEntry.contractTo")}{" "}
+      <code>{contract.endPeriod}</code>{" "}
+      <Link
+        to={
+          "/contracts/" +
+          ((contract && contract.fieldValues && contract.fieldValues.contract_main_orgunit) || orgUnit.id)
+        }
+      >
+        <IconButton>
+          <InfoIcon color="action" />
+        </IconButton>
+      </Link>{" "}
+      {contract.codes.map((c, index) => (
+        <Chip key={c + "_" + index} label={c} style={{ margin: "5px" }} />
+      ))}
+    </div>
+  );
+};
+
+export default ActiveContractContainer;

From 0bed22d89210189aeb52c18f1bfa77c9ee6ea008 Mon Sep 17 00:00:00 2001
From: Madeline OLeary <madeline.w.oleary@gmail.com>
Date: Tue, 14 Jun 2022 17:01:42 +0200
Subject: [PATCH 16/55] adds breadcrumbs (should the link maintain tree mode?)

---
 src/components/invoices/InvoiceTreeView.js | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/src/components/invoices/InvoiceTreeView.js b/src/components/invoices/InvoiceTreeView.js
index f5397dd5..8dd410e7 100644
--- a/src/components/invoices/InvoiceTreeView.js
+++ b/src/components/invoices/InvoiceTreeView.js
@@ -5,6 +5,7 @@ import PeriodPicker from "../shared/PeriodPicker";
 import { FormControl } from "@material-ui/core";
 import { anchorQueryParams, urlWith } from "../shared/tables/urlParams";
 import ActiveContractContainer from "../shared/contracts/ActiveContractContainer";
+import { Link } from "react-router-dom";
 
 const InvoiceTreeView = ({ invoiceLinksProps, searchPeriod, t, classes, onPeriodChange, periodFormat }) => {
   const [selectedOrgUnits, setSelectedOrgUnits] = useState([]);
@@ -17,6 +18,11 @@ const InvoiceTreeView = ({ invoiceLinksProps, searchPeriod, t, classes, onPeriod
     }
     setSelectedOrgUnits(orgunits);
   };
+
+  const generateLink = (ancestorId) => {
+
+  };
+
   return (
     <>
       <FormControl className={classes.periodContainer}>
@@ -32,6 +38,19 @@ const InvoiceTreeView = ({ invoiceLinksProps, searchPeriod, t, classes, onPeriod
           {selectedOrgUnits &&
             selectedOrgUnits.map((ou) => (
               <div>
+                <div style={{ fontFamily: "monospace" }}>
+                  {ou &&
+                    ou.ancestors.slice(1, ou.ancestors.length - 1).map((ancestor, index) => {
+                      return (
+                        <span key={"ancestor" + index}>
+                          <Link to={"/select/?q=&period=" + searchPeriod + "&parent=" + ancestor.id}>
+                            {ancestor.name}
+                          </Link>
+                          {index < ou.ancestors.length - 3 && "  >  "}
+                        </span>
+                      );
+                    })}
+                </div>
                 <h2>{ou.name}</h2>
                 <h3>Contrats</h3>
                 {ou.activeContracts &&

From 6ec62e4f4ad12c0ec4c7e977cf5b790008d09b0d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?St=C3=A9phan=20Mestach?= <smestach@bluesquare.org>
Date: Wed, 15 Jun 2022 09:17:30 +0200
Subject: [PATCH 17/55] Add some identation

---
 src/components/invoices/InvoiceTreeView.js | 40 +++++++++++++---------
 1 file changed, 24 insertions(+), 16 deletions(-)

diff --git a/src/components/invoices/InvoiceTreeView.js b/src/components/invoices/InvoiceTreeView.js
index 8dd410e7..ce254666 100644
--- a/src/components/invoices/InvoiceTreeView.js
+++ b/src/components/invoices/InvoiceTreeView.js
@@ -19,9 +19,7 @@ const InvoiceTreeView = ({ invoiceLinksProps, searchPeriod, t, classes, onPeriod
     setSelectedOrgUnits(orgunits);
   };
 
-  const generateLink = (ancestorId) => {
-
-  };
+  const generateLink = (ancestorId) => {};
 
   return (
     <>
@@ -38,7 +36,8 @@ const InvoiceTreeView = ({ invoiceLinksProps, searchPeriod, t, classes, onPeriod
           {selectedOrgUnits &&
             selectedOrgUnits.map((ou) => (
               <div>
-                <div style={{ fontFamily: "monospace" }}>
+                <h2>{ou.name}</h2>
+                <div style={{ fontFamily: "monospace", marginLeft: "20px" }}>
                   {ou &&
                     ou.ancestors.slice(1, ou.ancestors.length - 1).map((ancestor, index) => {
                       return (
@@ -51,21 +50,30 @@ const InvoiceTreeView = ({ invoiceLinksProps, searchPeriod, t, classes, onPeriod
                       );
                     })}
                 </div>
-                <h2>{ou.name}</h2>
-                <h3>Contrats</h3>
-                {ou.activeContracts &&
-                  ou.activeContracts.map((c) => (
-                    <div>
-                      <ActiveContractContainer orgUnit={ou} contract={c} t={t} />
-                    </div>
-                  ))}
+                <div style={{ marginLeft: "20px" }}>
+                  <h3>Contrats</h3>
+                  {ou.activeContracts &&
+                    ou.activeContracts.map((c) => (
+                      <div style={{ marginLeft: "20px", marginTop: "-10px" }}>
+                        <ActiveContractContainer orgUnit={ou} contract={c} t={t} />
+                      </div>
+                    ))}
+                  {(ou.activeContracts == undefined || ou.activeContracts.length == 0) && (
+                    <div style={{ marginLeft: "20px"}}>Pas de contrats pour cette période </div>
+                  )}
+                </div>
               </div>
             ))}
-          <h3>Factures</h3>
 
-          {selectedOrgUnits && selectedOrgUnits[0] && (
-            <InvoiceLinks {...invoiceLinksProps} t={t} orgUnit={selectedOrgUnits[0]} period={searchPeriod} />
-          )}
+          <div style={{ marginLeft: "20px" }}>
+            <h3>Factures</h3>
+
+            <div style={{ marginLeft: "20px", marginTop: "-10px" }}>
+              {selectedOrgUnits && selectedOrgUnits[0] && (
+                <InvoiceLinks {...invoiceLinksProps} t={t} orgUnit={selectedOrgUnits[0]} period={searchPeriod} />
+              )}
+            </div>
+          </div>
         </div>
       </div>
     </>

From aeac339e8c1f0d39002306bda2cb4fd987b74a48 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?St=C3=A9phan=20Mestach?= <smestach@bluesquare.org>
Date: Wed, 15 Jun 2022 09:25:39 +0200
Subject: [PATCH 18/55] Fix textual search

---
 src/components/shared/orgunit_picker/orgUnitTreeBackend.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/shared/orgunit_picker/orgUnitTreeBackend.js b/src/components/shared/orgunit_picker/orgUnitTreeBackend.js
index 62fa9b03..74c2a6aa 100644
--- a/src/components/shared/orgunit_picker/orgUnitTreeBackend.js
+++ b/src/components/shared/orgunit_picker/orgUnitTreeBackend.js
@@ -1,4 +1,5 @@
 import { getInstance } from "d2/lib/d2";
+import React from "react";
 import PluginRegistry from "../../core/PluginRegistry";
 
 let currentPeriod = undefined;

From 00506fc4126a7aaf8c47447062d9f1491d5c3cfa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?St=C3=A9phan=20Mestach?= <smestach@bluesquare.org>
Date: Wed, 15 Jun 2022 09:47:05 +0200
Subject: [PATCH 19/55] Handle case where the general error has no message

---
 src/components/dataentry/DataEntrySelectionPage.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/dataentry/DataEntrySelectionPage.js b/src/components/dataentry/DataEntrySelectionPage.js
index 91628d37..c19edf87 100644
--- a/src/components/dataentry/DataEntrySelectionPage.js
+++ b/src/components/dataentry/DataEntrySelectionPage.js
@@ -27,12 +27,13 @@ const checkOverlaps = (contracts) => {
 };
 
 const ErrorTogglable = ({ generalError }) => {
-  const lines = generalError.message.split("\n");
+  const message = generalError.message ? generalError.message : "Sorry something went wrong : \n"+JSON.stringify(generalError)
+  const lines = message.split("\n");
   const [fullDisplay, setFullDisplay] = useState(false);
   return (
     <div>
       <pre style={{ color: "red" }} title={generalError.stack}>
-        {fullDisplay ? generalError.message : lines[0]}
+        {fullDisplay ? message : lines[0]}
       </pre>{" "}
       {lines.length > 1 && <Button onClick={() => setFullDisplay(!fullDisplay)}>...</Button>}
     </div>

From a9ffad9ff63f27154771bec528e7a9a733a3869e Mon Sep 17 00:00:00 2001
From: Madeline OLeary <madeline.w.oleary@gmail.com>
Date: Wed, 15 Jun 2022 10:14:19 +0200
Subject: [PATCH 20/55] renames component to ContractSummary

---
 src/components/invoices/InvoiceTreeView.js                  | 6 ++----
 .../{ActiveContractContainer.js => ContractSummary.js}      | 4 ++--
 2 files changed, 4 insertions(+), 6 deletions(-)
 rename src/components/shared/contracts/{ActiveContractContainer.js => ContractSummary.js} (88%)

diff --git a/src/components/invoices/InvoiceTreeView.js b/src/components/invoices/InvoiceTreeView.js
index ce254666..13583030 100644
--- a/src/components/invoices/InvoiceTreeView.js
+++ b/src/components/invoices/InvoiceTreeView.js
@@ -4,7 +4,7 @@ import InvoiceLinks from "./InvoiceLinks";
 import PeriodPicker from "../shared/PeriodPicker";
 import { FormControl } from "@material-ui/core";
 import { anchorQueryParams, urlWith } from "../shared/tables/urlParams";
-import ActiveContractContainer from "../shared/contracts/ActiveContractContainer";
+import ContractSummary from "../shared/contracts/ContractSummary";
 import { Link } from "react-router-dom";
 
 const InvoiceTreeView = ({ invoiceLinksProps, searchPeriod, t, classes, onPeriodChange, periodFormat }) => {
@@ -19,8 +19,6 @@ const InvoiceTreeView = ({ invoiceLinksProps, searchPeriod, t, classes, onPeriod
     setSelectedOrgUnits(orgunits);
   };
 
-  const generateLink = (ancestorId) => {};
-
   return (
     <>
       <FormControl className={classes.periodContainer}>
@@ -55,7 +53,7 @@ const InvoiceTreeView = ({ invoiceLinksProps, searchPeriod, t, classes, onPeriod
                   {ou.activeContracts &&
                     ou.activeContracts.map((c) => (
                       <div style={{ marginLeft: "20px", marginTop: "-10px" }}>
-                        <ActiveContractContainer orgUnit={ou} contract={c} t={t} />
+                        <ContractSummary orgUnit={ou} contract={c} t={t} />
                       </div>
                     ))}
                   {(ou.activeContracts == undefined || ou.activeContracts.length == 0) && (
diff --git a/src/components/shared/contracts/ActiveContractContainer.js b/src/components/shared/contracts/ContractSummary.js
similarity index 88%
rename from src/components/shared/contracts/ActiveContractContainer.js
rename to src/components/shared/contracts/ContractSummary.js
index 2dc1e9b1..a18ed8a8 100644
--- a/src/components/shared/contracts/ActiveContractContainer.js
+++ b/src/components/shared/contracts/ContractSummary.js
@@ -3,7 +3,7 @@ import { Link } from "react-router-dom";
 import { Chip, IconButton } from "@material-ui/core";
 import InfoIcon from "@material-ui/icons/Info";
 
-const ActiveContractContainer = ({ orgUnit, contract, t }) => {
+const ContractSummary = ({ orgUnit, contract, t }) => {
   return (
     <div>
       {t("dataEntry.contractFrom")} <code>{contract.startPeriod}</code> {t("dataEntry.contractTo")}{" "}
@@ -25,4 +25,4 @@ const ActiveContractContainer = ({ orgUnit, contract, t }) => {
   );
 };
 
-export default ActiveContractContainer;
+export default ContractSummary;

From 5da92fb8e7ef70621d7427c1779500b0343595eb Mon Sep 17 00:00:00 2001
From: Madeline OLeary <madeline.w.oleary@gmail.com>
Date: Wed, 15 Jun 2022 10:39:38 +0200
Subject: [PATCH 21/55] uses ContractSummary in data entry selection page

---
 .../dataentry/DataEntrySelectionPage.js        | 18 ++----------------
 1 file changed, 2 insertions(+), 16 deletions(-)

diff --git a/src/components/dataentry/DataEntrySelectionPage.js b/src/components/dataentry/DataEntrySelectionPage.js
index c19edf87..ec047a01 100644
--- a/src/components/dataentry/DataEntrySelectionPage.js
+++ b/src/components/dataentry/DataEntrySelectionPage.js
@@ -14,6 +14,7 @@ import { withRouter } from "react-router";
 import PeriodPicker from "../shared/PeriodPicker";
 import LinkedContract from "./LinkedContract";
 import { buildFormData } from "./forms";
+import ContractSummary from "../shared/contracts/ContractSummary";
 
 const checkOverlaps = (contracts) => {
   for (let contract1 of contracts) {
@@ -192,22 +193,7 @@ const DataEntrySelectionPage = ({ history, match, periodFormat, dhis2 }) => {
           <div>
             {t("dataEntry.contractFrom")} <code>{orgUnit.activeContracts[0].startPeriod}</code>{" "}
             {t("dataEntry.contractTo")} <code>{orgUnit.activeContracts[0].endPeriod}</code>{" "}
-            <Link
-              to={
-                "/contracts/" +
-                ((orgUnit.activeContracts[0] &&
-                  orgUnit.activeContracts[0].fieldValues &&
-                  orgUnit.activeContracts[0].fieldValues.contract_main_orgunit) ||
-                  orgUnit.id)
-              }
-            >
-              <IconButton>
-                <InfoIcon color="action" />
-              </IconButton>
-            </Link>{" "}
-            {orgUnit.activeContracts[0].codes.map((c, index) => (
-              <Chip key={c + "_" + index} label={c} style={{ margin: "5px" }} />
-            ))}
+            <ContractSummary orgUnit={orgUnit} contract={orgUnit.activeContracts[0]} t={t} />
           </div>
           {linkedContracts && linkedContracts.length > 1 && (
             <div>

From f02110f83fd1282a6a99f8cec64c0b5786257410 Mon Sep 17 00:00:00 2001
From: Madeline OLeary <madeline.w.oleary@gmail.com>
Date: Wed, 15 Jun 2022 11:02:19 +0200
Subject: [PATCH 22/55] fixes undefined error on orgunits[0].id

---
 src/components/invoices/InvoiceTreeView.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/invoices/InvoiceTreeView.js b/src/components/invoices/InvoiceTreeView.js
index 13583030..9024b349 100644
--- a/src/components/invoices/InvoiceTreeView.js
+++ b/src/components/invoices/InvoiceTreeView.js
@@ -10,13 +10,13 @@ import { Link } from "react-router-dom";
 const InvoiceTreeView = ({ invoiceLinksProps, searchPeriod, t, classes, onPeriodChange, periodFormat }) => {
   const [selectedOrgUnits, setSelectedOrgUnits] = useState([]);
   const onOrgUnitChange = (orgunits) => {
-    const queryParams = anchorQueryParams();
-    queryParams.set("ou", orgunits[0].id);
-    const newUrl = urlWith(queryParams);
-    if (newUrl !== window.location.toString()) {
-      window.history.replaceState({}, "", urlWith(queryParams));
+    if (orgunits.length) {
+      const queryParams = anchorQueryParams();
+      queryParams.set("ou", orgunits[0].id);
+      const newUrl = urlWith(queryParams);
+      window.history.replaceState({}, "", newUrl);
+      setSelectedOrgUnits(orgunits);
     }
-    setSelectedOrgUnits(orgunits);
   };
 
   return (

From 1bae03d580c184e916baa594693df661b60a7109 Mon Sep 17 00:00:00 2001
From: Madeline OLeary <madeline.w.oleary@gmail.com>
Date: Wed, 15 Jun 2022 11:21:18 +0200
Subject: [PATCH 23/55] moves makeDropDownText back into tree picker

---
 .../orgunit_picker/OrgUnitTreePicker.js       | 18 +++++++++++
 .../orgunit_picker/orgUnitTreeBackend.js      | 30 ++++---------------
 2 files changed, 23 insertions(+), 25 deletions(-)

diff --git a/src/components/shared/orgunit_picker/OrgUnitTreePicker.js b/src/components/shared/orgunit_picker/OrgUnitTreePicker.js
index 6b0aea04..f360061d 100644
--- a/src/components/shared/orgunit_picker/OrgUnitTreePicker.js
+++ b/src/components/shared/orgunit_picker/OrgUnitTreePicker.js
@@ -10,6 +10,23 @@ const onOrgUnitSelect = (orgUnit) => {
 const formatInitialSelectedIds = (selection) => [];
 const formatInitialSelectedParents = (selection) => new Map();
 
+const makeDropDownText = (orgUnit) => {
+  return (
+    <div>
+      <span display="block">
+        {orgUnit.name} <code style={{ color: "lightgrey" }}>{orgUnit.id}</code>
+      </span>
+      <pre style={{ fontSize: "8px" }}>
+        {orgUnit.ancestors
+          .slice(1)
+          .map((o) => o.name)
+          .join(" > ")}
+      </pre>
+      <hr />
+    </div>
+  );
+};
+
 const OrgUnitTreePicker = ({ initialSelection, onChange, period }) => {
   setPeriod(period);
 
@@ -34,6 +51,7 @@ const OrgUnitTreePicker = ({ initialSelection, onChange, period }) => {
     <div>
       <TreeViewWithSearch
         {...treeProps}
+        makeDropDownText={makeDropDownText}
         preselected={selectedOrgUnitsIds}
         preexpanded={selectedOrgUnitParents}
         selectedData={selectedOrgUnits}
diff --git a/src/components/shared/orgunit_picker/orgUnitTreeBackend.js b/src/components/shared/orgunit_picker/orgUnitTreeBackend.js
index 74c2a6aa..ab2c2fbf 100644
--- a/src/components/shared/orgunit_picker/orgUnitTreeBackend.js
+++ b/src/components/shared/orgunit_picker/orgUnitTreeBackend.js
@@ -1,5 +1,4 @@
 import { getInstance } from "d2/lib/d2";
-import React from "react";
 import PluginRegistry from "../../core/PluginRegistry";
 
 let currentPeriod = undefined;
@@ -13,7 +12,7 @@ let contractsByOrgUnitId = {};
 const defaultOrgUnitFields =
   "id,name,ancestors[id,name],children[id,name,ancestors[id,name],children[id,name,ancestors[id,name],children]]";
 
-export const getRootData = async (id, type = "source") => {
+const getRootData = async (id, type = "source") => {
   if (Object.keys(contractsByOrgUnitId).length === 0) {
     const contractService = PluginRegistry.extension("contracts.service");
     const allContracts = await contractService.findAll();
@@ -42,7 +41,7 @@ const withHasChildren = (organisationUnits) => {
   return organisationUnits;
 };
 
-export const getChildrenData = async (id) => {
+const getChildrenData = async (id) => {
   const loadedOrgUnit = loadedOrgUnitsById[id];
   if (loadedOrgUnit && loadedOrgUnit.children && loadedOrgUnit.children[0].children) {
     return withHasChildren(loadedOrgUnit.children);
@@ -58,7 +57,7 @@ export const getChildrenData = async (id) => {
   return withHasChildren(resp.organisationUnits);
 };
 
-export const request = async (value, count, source, version) => {
+const request = async (value, count, source, version) => {
   const d2 = await getInstance();
   const api = await d2.Api.getApi();
   const resp = await api.get("organisationUnits", {
@@ -69,45 +68,26 @@ export const request = async (value, count, source, version) => {
   return withHasChildren(resp.organisationUnits);
 };
 
-export const label = (data) => {
+const label = (data) => {
   return data.name;
 };
 
-export const search = (input1, input2, type) => {
+const search = (input1, input2, type) => {
   console.log(input1, input2, type);
   return [];
 };
 
-export const makeDropDownText = (orgUnit) => {
-  return (
-    <div>
-      <span display="block">
-        {orgUnit.name} <code style={{ color: "lightgrey" }}>{orgUnit.id}</code>
-      </span>
-      <pre style={{ fontSize: "8px" }}>
-        {orgUnit.ancestors
-          .slice(1)
-          .map((o) => o.name)
-          .join(" > ")}
-      </pre>
-      <hr />
-    </div>
-  );
-};
-
 const parseNodeIds = (orgUnit) => {
   const parsed = orgUnit.ancestors.map((a) => [a.id, a]).concat([[orgUnit.id, orgUnit]]);
   return new Map(parsed);
 };
 
-
 export const treeProps = {
   getRootData,
   label,
   getChildrenData,
   search,
   request,
-  makeDropDownText,
   parseNodeIds: parseNodeIds,
   toggleOnLabelClick: false,
   isSelectable: () => true,

From 9b75edf6e0d43c0c4141dd3599918be176f52d1b Mon Sep 17 00:00:00 2001
From: Madeline OLeary <madeline.w.oleary@gmail.com>
Date: Wed, 15 Jun 2022 13:23:42 +0200
Subject: [PATCH 24/55] extracting DataEntryLinks component, adds to invoice
 tree view

---
 .../dataentry/DataEntrySelectionPage.js       | 43 +++++--------------
 src/components/invoices/InvoiceTreeView.js    | 28 +++++++++++-
 .../shared/data_entries/DataEntryLinks.js     | 40 +++++++++++++++++
 3 files changed, 77 insertions(+), 34 deletions(-)
 create mode 100644 src/components/shared/data_entries/DataEntryLinks.js

diff --git a/src/components/dataentry/DataEntrySelectionPage.js b/src/components/dataentry/DataEntrySelectionPage.js
index ec047a01..7f65def4 100644
--- a/src/components/dataentry/DataEntrySelectionPage.js
+++ b/src/components/dataentry/DataEntrySelectionPage.js
@@ -15,6 +15,7 @@ import PeriodPicker from "../shared/PeriodPicker";
 import LinkedContract from "./LinkedContract";
 import { buildFormData } from "./forms";
 import ContractSummary from "../shared/contracts/ContractSummary";
+import DataEntryLinks from "../shared/data_entries/DataEntryLinks";
 
 const checkOverlaps = (contracts) => {
   for (let contract1 of contracts) {
@@ -208,39 +209,15 @@ const DataEntrySelectionPage = ({ history, match, periodFormat, dhis2 }) => {
           <h2>{t("dataEntry.dataEntries")}</h2>
           <table>
             <tbody>
-              {dataEntries &&
-                dataEntries.map((dataEntry) => {
-                  const isCurrent =
-                    dataEntry.dataEntryType.code == match.params.dataEntryCode &&
-                    dataEntry.period == match.params.period;
-                  return (
-                    <tr>
-                      <td>
-                        {" "}
-                        <Typography variant="overline" gutterBottom>
-                          {dataEntry.dataEntryType.name}
-                        </Typography>
-                      </td>
-                      <td>
-                        <Button
-                          key={dataEntry.dataEntryType.code + "-" + dataEntry.period + "-" + orgUnit.id}
-                          variant="text"
-                          color="primary"
-                          size="small"
-                          component={Link}
-                          style={isCurrent ? { backgroundColor: "lightyellow" } : {}}
-                          to={"/dataEntry/" + orgUnit.id + "/" + dataEntry.period + "/" + dataEntry.dataEntryType.code}
-                          title={dataEntry.period}
-                        >
-                          {DatePeriods.displayName(
-                            dataEntry.period,
-                            periodFormat[DatePeriods.detect(dataEntry.period)],
-                          )}
-                        </Button>
-                      </td>
-                    </tr>
-                  );
-                })}
+              {dataEntries && (
+                <DataEntryLinks
+                  dataEntries={dataEntries}
+                  dataEntryCode={match.params.dataEntryCode}
+                  period={match.params.period}
+                  orgUnit={orgUnit}
+                  periodFormat={periodFormat}
+                />
+              )}
             </tbody>
           </table>
         </Grid>
diff --git a/src/components/invoices/InvoiceTreeView.js b/src/components/invoices/InvoiceTreeView.js
index 9024b349..b703eba2 100644
--- a/src/components/invoices/InvoiceTreeView.js
+++ b/src/components/invoices/InvoiceTreeView.js
@@ -6,15 +6,25 @@ import { FormControl } from "@material-ui/core";
 import { anchorQueryParams, urlWith } from "../shared/tables/urlParams";
 import ContractSummary from "../shared/contracts/ContractSummary";
 import { Link } from "react-router-dom";
+import PluginRegistry from "../core/PluginRegistry";
+import DataEntryLinks from "../shared/data_entries/DataEntryLinks";
 
 const InvoiceTreeView = ({ invoiceLinksProps, searchPeriod, t, classes, onPeriodChange, periodFormat }) => {
   const [selectedOrgUnits, setSelectedOrgUnits] = useState([]);
+  const [dataEntries, setDataEntries] = useState([]);
+  const dataEntryRegistry = PluginRegistry.extension("dataentry.dataEntries");
+
   const onOrgUnitChange = (orgunits) => {
     if (orgunits.length) {
       const queryParams = anchorQueryParams();
       queryParams.set("ou", orgunits[0].id);
       const newUrl = urlWith(queryParams);
       window.history.replaceState({}, "", newUrl);
+      const activeContracts = orgunits[0].activeContracts;
+      if (activeContracts.length) {
+        const expectedDataEntries = dataEntryRegistry.getExpectedDataEntries(activeContracts[0], searchPeriod);
+        setDataEntries(expectedDataEntries);
+      }
       setSelectedOrgUnits(orgunits);
     }
   };
@@ -57,7 +67,7 @@ const InvoiceTreeView = ({ invoiceLinksProps, searchPeriod, t, classes, onPeriod
                       </div>
                     ))}
                   {(ou.activeContracts == undefined || ou.activeContracts.length == 0) && (
-                    <div style={{ marginLeft: "20px"}}>Pas de contrats pour cette période </div>
+                    <div style={{ marginLeft: "20px" }}>Pas de contrats pour cette période </div>
                   )}
                 </div>
               </div>
@@ -72,6 +82,22 @@ const InvoiceTreeView = ({ invoiceLinksProps, searchPeriod, t, classes, onPeriod
               )}
             </div>
           </div>
+
+          <div style={{ marginLeft: "20px" }}>
+            <h3>Saisie de données</h3>
+
+            <div style={{ marginLeft: "20px", marginTop: "-10px" }}>
+              {dataEntries && (
+                <DataEntryLinks
+                  dataEntries={dataEntries}
+                  dataEntryCode={undefined}
+                  period={searchPeriod}
+                  orgUnit={selectedOrgUnits[0] || []}
+                  periodFormat={periodFormat}
+                />
+              )}
+            </div>
+          </div>
         </div>
       </div>
     </>
diff --git a/src/components/shared/data_entries/DataEntryLinks.js b/src/components/shared/data_entries/DataEntryLinks.js
new file mode 100644
index 00000000..e4569619
--- /dev/null
+++ b/src/components/shared/data_entries/DataEntryLinks.js
@@ -0,0 +1,40 @@
+import React from "react";
+import DatePeriods from "../../../support/DatePeriods";
+import { Button, Typography } from "@material-ui/core";
+import { Link } from "react-router-dom";
+
+const DataEntryLinks = ({ dataEntries, dataEntryCode, period, orgUnit, periodFormat }) => {
+  return (
+    <>
+      {dataEntries.map((dataEntry) => {
+        const isCurrent = dataEntry.dataEntryType.code === dataEntryCode && dataEntry.period === period;
+        return (
+          <tr>
+            <td>
+              {" "}
+              <Typography variant="overline" gutterBottom>
+                {dataEntry.dataEntryType.name}
+              </Typography>
+            </td>
+            <td>
+              <Button
+                key={dataEntry.dataEntryType.code + "-" + dataEntry.period + "-" + orgUnit.id}
+                variant="text"
+                color="primary"
+                size="small"
+                component={Link}
+                style={isCurrent ? { backgroundColor: "lightyellow" } : {}}
+                to={"/dataEntry/" + orgUnit.id + "/" + dataEntry.period + "/" + dataEntry.dataEntryType.code}
+                title={dataEntry.period}
+              >
+                {DatePeriods.displayName(dataEntry.period, periodFormat[DatePeriods.detect(dataEntry.period)])}
+              </Button>
+            </td>
+          </tr>
+        );
+      })}
+    </>
+  );
+};
+
+export default DataEntryLinks;

From 5a0cdffeac8e6cc20b2b676ec5fc7fca22573148 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?St=C3=A9phan=20Mestach?= <smestach@bluesquare.org>
Date: Wed, 15 Jun 2022 14:39:34 +0200
Subject: [PATCH 25/55] Extract sections

---
 src/components/invoices/InvoiceTreeView.js | 66 ++++++++++++----------
 1 file changed, 37 insertions(+), 29 deletions(-)

diff --git a/src/components/invoices/InvoiceTreeView.js b/src/components/invoices/InvoiceTreeView.js
index b703eba2..82f69e79 100644
--- a/src/components/invoices/InvoiceTreeView.js
+++ b/src/components/invoices/InvoiceTreeView.js
@@ -8,6 +8,17 @@ import ContractSummary from "../shared/contracts/ContractSummary";
 import { Link } from "react-router-dom";
 import PluginRegistry from "../core/PluginRegistry";
 import DataEntryLinks from "../shared/data_entries/DataEntryLinks";
+import { useTranslation } from "react-i18next";
+
+const OrgunitRelatedSection = ({ messageKey, children }) => {
+  const { t } = useTranslation();
+  return (
+    <div style={{ marginLeft: "20px" }}>
+      <h3>{t(messageKey)}</h3>
+      {children}
+    </div>
+  );
+};
 
 const InvoiceTreeView = ({ invoiceLinksProps, searchPeriod, t, classes, onPeriodChange, periodFormat }) => {
   const [selectedOrgUnits, setSelectedOrgUnits] = useState([]);
@@ -24,6 +35,8 @@ const InvoiceTreeView = ({ invoiceLinksProps, searchPeriod, t, classes, onPeriod
       if (activeContracts.length) {
         const expectedDataEntries = dataEntryRegistry.getExpectedDataEntries(activeContracts[0], searchPeriod);
         setDataEntries(expectedDataEntries);
+      } else {
+        setDataEntries([]);
       }
       setSelectedOrgUnits(orgunits);
     }
@@ -40,9 +53,9 @@ const InvoiceTreeView = ({ invoiceLinksProps, searchPeriod, t, classes, onPeriod
         <div style={{ margin: "10px", width: "500px" }}>
           <OrgUnitTreePicker onChange={onOrgUnitChange} period={searchPeriod} />
         </div>
-        <div>
-          {selectedOrgUnits &&
-            selectedOrgUnits.map((ou) => (
+        {selectedOrgUnits && selectedOrgUnits.length > 0 && (
+          <div>
+            {selectedOrgUnits.map((ou) => (
               <div>
                 <h2>{ou.name}</h2>
                 <div style={{ fontFamily: "monospace", marginLeft: "20px" }}>
@@ -58,8 +71,8 @@ const InvoiceTreeView = ({ invoiceLinksProps, searchPeriod, t, classes, onPeriod
                       );
                     })}
                 </div>
-                <div style={{ marginLeft: "20px" }}>
-                  <h3>Contrats</h3>
+
+                <OrgunitRelatedSection messageKey={"Contrats"}>
                   {ou.activeContracts &&
                     ou.activeContracts.map((c) => (
                       <div style={{ marginLeft: "20px", marginTop: "-10px" }}>
@@ -69,36 +82,31 @@ const InvoiceTreeView = ({ invoiceLinksProps, searchPeriod, t, classes, onPeriod
                   {(ou.activeContracts == undefined || ou.activeContracts.length == 0) && (
                     <div style={{ marginLeft: "20px" }}>Pas de contrats pour cette période </div>
                   )}
-                </div>
+                </OrgunitRelatedSection>
               </div>
             ))}
 
-          <div style={{ marginLeft: "20px" }}>
-            <h3>Factures</h3>
-
-            <div style={{ marginLeft: "20px", marginTop: "-10px" }}>
-              {selectedOrgUnits && selectedOrgUnits[0] && (
+            <OrgunitRelatedSection messageKey={"Factures"}>
+              <div style={{ marginLeft: "20px", marginTop: "-10px" }}>
                 <InvoiceLinks {...invoiceLinksProps} t={t} orgUnit={selectedOrgUnits[0]} period={searchPeriod} />
-              )}
-            </div>
-          </div>
-
-          <div style={{ marginLeft: "20px" }}>
-            <h3>Saisie de données</h3>
+              </div>
+            </OrgunitRelatedSection>
 
-            <div style={{ marginLeft: "20px", marginTop: "-10px" }}>
-              {dataEntries && (
-                <DataEntryLinks
-                  dataEntries={dataEntries}
-                  dataEntryCode={undefined}
-                  period={searchPeriod}
-                  orgUnit={selectedOrgUnits[0] || []}
-                  periodFormat={periodFormat}
-                />
-              )}
-            </div>
+            <OrgunitRelatedSection messageKey={"Saisie de données"}>
+              <div style={{ marginLeft: "20px", marginTop: "-10px" }}>
+                {dataEntries && (
+                  <DataEntryLinks
+                    dataEntries={dataEntries}
+                    dataEntryCode={undefined}
+                    period={searchPeriod}
+                    orgUnit={selectedOrgUnits[0] || []}
+                    periodFormat={periodFormat}
+                  />
+                )}
+              </div>
+            </OrgunitRelatedSection>
           </div>
-        </div>
+        )}
       </div>
     </>
   );

From b9053077377fc1375711aca81beb4bd3f0dfa500 Mon Sep 17 00:00:00 2001
From: Madeline OLeary <madeline.w.oleary@gmail.com>
Date: Wed, 15 Jun 2022 16:14:58 +0200
Subject: [PATCH 26/55] extracted sections for data entries, invoice links,
 contracts

---
 src/components/invoices/InvoiceTreeView.js | 96 +++++++++++++---------
 1 file changed, 58 insertions(+), 38 deletions(-)

diff --git a/src/components/invoices/InvoiceTreeView.js b/src/components/invoices/InvoiceTreeView.js
index 82f69e79..a66bc150 100644
--- a/src/components/invoices/InvoiceTreeView.js
+++ b/src/components/invoices/InvoiceTreeView.js
@@ -20,10 +20,58 @@ const OrgunitRelatedSection = ({ messageKey, children }) => {
   );
 };
 
+const DataEntriesSection = ({ orgUnit, period, periodFormat }) => {
+  const dataEntryRegistry = PluginRegistry.extension("dataentry.dataEntries");
+  let dataEntries = [];
+  if (orgUnit.activeContracts && orgUnit.activeContracts[0]) {
+    const expectedDataEntries = dataEntryRegistry.getExpectedDataEntries(orgUnit.activeContracts[0], period);
+    dataEntries = expectedDataEntries;
+  }
+  return (
+    <OrgunitRelatedSection messageKey={"Saisie de données"}>
+      <div style={{ marginLeft: "20px", marginTop: "-10px" }}>
+        {dataEntries && (
+          <DataEntryLinks
+            dataEntries={dataEntries}
+            dataEntryCode={undefined}
+            period={period}
+            orgUnit={orgUnit}
+            periodFormat={periodFormat}
+          />
+        )}
+      </div>
+    </OrgunitRelatedSection>
+  );
+};
+
+const InvoiceLinksSection = ({ invoiceLinksProps, t, orgUnit, period }) => {
+  return (
+    <OrgunitRelatedSection messageKey={"Factures"}>
+      <div style={{ marginLeft: "20px", marginTop: "-10px" }}>
+        <InvoiceLinks {...invoiceLinksProps} t={t} orgUnit={orgUnit} period={period} />
+      </div>
+    </OrgunitRelatedSection>
+  );
+};
+
+const ContractsSection = ({orgUnit, t}) => {
+  return (
+    <OrgunitRelatedSection messageKey={"Contrats"}>
+      {orgUnit.activeContracts &&
+        orgUnit.activeContracts.map((c) => (
+          <div style={{ marginLeft: "20px", marginTop: "-10px" }}>
+            <ContractSummary orgUnit={orgUnit} contract={c} t={t} />
+          </div>
+        ))}
+      {(orgUnit.activeContracts === undefined || orgUnit.activeContracts.length === 0) && (
+        <div style={{ marginLeft: "20px" }}>Pas de contrats pour cette période </div>
+      )}
+    </OrgunitRelatedSection>
+  );
+};
+
 const InvoiceTreeView = ({ invoiceLinksProps, searchPeriod, t, classes, onPeriodChange, periodFormat }) => {
   const [selectedOrgUnits, setSelectedOrgUnits] = useState([]);
-  const [dataEntries, setDataEntries] = useState([]);
-  const dataEntryRegistry = PluginRegistry.extension("dataentry.dataEntries");
 
   const onOrgUnitChange = (orgunits) => {
     if (orgunits.length) {
@@ -31,13 +79,6 @@ const InvoiceTreeView = ({ invoiceLinksProps, searchPeriod, t, classes, onPeriod
       queryParams.set("ou", orgunits[0].id);
       const newUrl = urlWith(queryParams);
       window.history.replaceState({}, "", newUrl);
-      const activeContracts = orgunits[0].activeContracts;
-      if (activeContracts.length) {
-        const expectedDataEntries = dataEntryRegistry.getExpectedDataEntries(activeContracts[0], searchPeriod);
-        setDataEntries(expectedDataEntries);
-      } else {
-        setDataEntries([]);
-      }
       setSelectedOrgUnits(orgunits);
     }
   };
@@ -72,39 +113,18 @@ const InvoiceTreeView = ({ invoiceLinksProps, searchPeriod, t, classes, onPeriod
                     })}
                 </div>
 
-                <OrgunitRelatedSection messageKey={"Contrats"}>
-                  {ou.activeContracts &&
-                    ou.activeContracts.map((c) => (
-                      <div style={{ marginLeft: "20px", marginTop: "-10px" }}>
-                        <ContractSummary orgUnit={ou} contract={c} t={t} />
-                      </div>
-                    ))}
-                  {(ou.activeContracts == undefined || ou.activeContracts.length == 0) && (
-                    <div style={{ marginLeft: "20px" }}>Pas de contrats pour cette période </div>
-                  )}
-                </OrgunitRelatedSection>
+                <ContractsSection orgUnit={ou} t={t} />
               </div>
             ))}
 
-            <OrgunitRelatedSection messageKey={"Factures"}>
-              <div style={{ marginLeft: "20px", marginTop: "-10px" }}>
-                <InvoiceLinks {...invoiceLinksProps} t={t} orgUnit={selectedOrgUnits[0]} period={searchPeriod} />
-              </div>
-            </OrgunitRelatedSection>
+            <InvoiceLinksSection
+              invoiceLinksProps={invoiceLinksProps}
+              t={t}
+              orgUnit={selectedOrgUnits[0]}
+              period={searchPeriod}
+            />
 
-            <OrgunitRelatedSection messageKey={"Saisie de données"}>
-              <div style={{ marginLeft: "20px", marginTop: "-10px" }}>
-                {dataEntries && (
-                  <DataEntryLinks
-                    dataEntries={dataEntries}
-                    dataEntryCode={undefined}
-                    period={searchPeriod}
-                    orgUnit={selectedOrgUnits[0] || []}
-                    periodFormat={periodFormat}
-                  />
-                )}
-              </div>
-            </OrgunitRelatedSection>
+            <DataEntriesSection orgUnit={selectedOrgUnits[0]} period={searchPeriod} periodFormat={periodFormat} />
           </div>
         )}
       </div>

From 2212be5eb9900c8bebcdb4e13de143c8ffe46bd6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?St=C3=A9phan=20Mestach?= <smestach@bluesquare.org>
Date: Thu, 16 Jun 2022 08:16:13 +0200
Subject: [PATCH 27/55] Display orgunit contract in text search

---
 src/components/shared/contracts/ContractSummary.js        | 4 +++-
 src/components/shared/orgunit_picker/OrgUnitTreePicker.js | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/shared/contracts/ContractSummary.js b/src/components/shared/contracts/ContractSummary.js
index a18ed8a8..46e628bf 100644
--- a/src/components/shared/contracts/ContractSummary.js
+++ b/src/components/shared/contracts/ContractSummary.js
@@ -2,8 +2,10 @@ import React from "react";
 import { Link } from "react-router-dom";
 import { Chip, IconButton } from "@material-ui/core";
 import InfoIcon from "@material-ui/icons/Info";
+import { useTranslation } from "react-i18next";
 
-const ContractSummary = ({ orgUnit, contract, t }) => {
+const ContractSummary = ({ orgUnit, contract }) => {
+  const { t } = useTranslation();
   return (
     <div>
       {t("dataEntry.contractFrom")} <code>{contract.startPeriod}</code> {t("dataEntry.contractTo")}{" "}
diff --git a/src/components/shared/orgunit_picker/OrgUnitTreePicker.js b/src/components/shared/orgunit_picker/OrgUnitTreePicker.js
index f360061d..f30b4812 100644
--- a/src/components/shared/orgunit_picker/OrgUnitTreePicker.js
+++ b/src/components/shared/orgunit_picker/OrgUnitTreePicker.js
@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import { TreeViewWithSearch } from "bluesquare-components";
 import { setPeriod, treeProps } from "./orgUnitTreeBackend";
+import ContractSummary from "../contracts/ContractSummary";
 
 const onOrgUnitSelect = (orgUnit) => {
   alert("Selected " + orgUnit.name);
@@ -12,7 +13,7 @@ const formatInitialSelectedParents = (selection) => new Map();
 
 const makeDropDownText = (orgUnit) => {
   return (
-    <div>
+    <div key={orgUnit.id}>
       <span display="block">
         {orgUnit.name} <code style={{ color: "lightgrey" }}>{orgUnit.id}</code>
       </span>
@@ -22,6 +23,7 @@ const makeDropDownText = (orgUnit) => {
           .map((o) => o.name)
           .join(" > ")}
       </pre>
+      {orgUnit.activeContracts && orgUnit.activeContracts[0] && <ContractSummary orgUnit={orgUnit} contract={orgUnit.activeContracts[0]} />}
       <hr />
     </div>
   );

From 45f57e7e26a06fa84e98c072af655e8ea3b521a6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?St=C3=A9phan=20Mestach?= <smestach@bluesquare.org>
Date: Thu, 16 Jun 2022 08:18:13 +0200
Subject: [PATCH 28/55] Uniformize the Section signature orgUnit period, don't
 pass translation function

---
 src/components/invoices/InvoiceTreeView.js | 53 +++++++++++-----------
 1 file changed, 26 insertions(+), 27 deletions(-)

diff --git a/src/components/invoices/InvoiceTreeView.js b/src/components/invoices/InvoiceTreeView.js
index a66bc150..08e87ba3 100644
--- a/src/components/invoices/InvoiceTreeView.js
+++ b/src/components/invoices/InvoiceTreeView.js
@@ -20,6 +20,22 @@ const OrgunitRelatedSection = ({ messageKey, children }) => {
   );
 };
 
+const LocationBreadCrumb = ({ orgUnit, period }) => {
+  return (
+    <div style={{ fontFamily: "monospace", marginLeft: "20px" }}>
+      {orgUnit &&
+        orgUnit.ancestors.slice(1, orgUnit.ancestors.length - 1).map((ancestor, index) => {
+          return (
+            <span key={"ancestor" + index}>
+              <Link to={"/select/?q=&period=" + period + "&ou=" + ancestor.id + "&mode=tree"}>{ancestor.name}</Link>
+              {index < orgUnit.ancestors.length - 3 && "  >  "}
+            </span>
+          );
+        })}
+    </div>
+  );
+};
+
 const DataEntriesSection = ({ orgUnit, period, periodFormat }) => {
   const dataEntryRegistry = PluginRegistry.extension("dataentry.dataEntries");
   let dataEntries = [];
@@ -44,7 +60,8 @@ const DataEntriesSection = ({ orgUnit, period, periodFormat }) => {
   );
 };
 
-const InvoiceLinksSection = ({ invoiceLinksProps, t, orgUnit, period }) => {
+const InvoiceLinksSection = ({ invoiceLinksProps, orgUnit, period }) => {
+  const { t } = useTranslation();
   return (
     <OrgunitRelatedSection messageKey={"Factures"}>
       <div style={{ marginLeft: "20px", marginTop: "-10px" }}>
@@ -54,7 +71,9 @@ const InvoiceLinksSection = ({ invoiceLinksProps, t, orgUnit, period }) => {
   );
 };
 
-const ContractsSection = ({orgUnit, t}) => {
+const ContractsSection = ({ orgUnit }) => {
+  const { t } = useTranslation();
+
   return (
     <OrgunitRelatedSection messageKey={"Contrats"}>
       {orgUnit.activeContracts &&
@@ -70,7 +89,7 @@ const ContractsSection = ({orgUnit, t}) => {
   );
 };
 
-const InvoiceTreeView = ({ invoiceLinksProps, searchPeriod, t, classes, onPeriodChange, periodFormat }) => {
+const InvoiceTreeView = ({ invoiceLinksProps, searchPeriod, classes, onPeriodChange, periodFormat }) => {
   const [selectedOrgUnits, setSelectedOrgUnits] = useState([]);
 
   const onOrgUnitChange = (orgunits) => {
@@ -96,34 +115,14 @@ const InvoiceTreeView = ({ invoiceLinksProps, searchPeriod, t, classes, onPeriod
         </div>
         {selectedOrgUnits && selectedOrgUnits.length > 0 && (
           <div>
-            {selectedOrgUnits.map((ou) => (
-              <div>
-                <h2>{ou.name}</h2>
-                <div style={{ fontFamily: "monospace", marginLeft: "20px" }}>
-                  {ou &&
-                    ou.ancestors.slice(1, ou.ancestors.length - 1).map((ancestor, index) => {
-                      return (
-                        <span key={"ancestor" + index}>
-                          <Link to={"/select/?q=&period=" + searchPeriod + "&parent=" + ancestor.id}>
-                            {ancestor.name}
-                          </Link>
-                          {index < ou.ancestors.length - 3 && "  >  "}
-                        </span>
-                      );
-                    })}
-                </div>
-
-                <ContractsSection orgUnit={ou} t={t} />
-              </div>
-            ))}
-
+            <h2>{selectedOrgUnits[0].name}</h2>
+            <LocationBreadCrumb orgUnit={selectedOrgUnits[0]} period={searchPeriod} />
+            <ContractsSection orgUnit={selectedOrgUnits[0]} />
             <InvoiceLinksSection
-              invoiceLinksProps={invoiceLinksProps}
-              t={t}
               orgUnit={selectedOrgUnits[0]}
               period={searchPeriod}
+              invoiceLinksProps={invoiceLinksProps}
             />
-
             <DataEntriesSection orgUnit={selectedOrgUnits[0]} period={searchPeriod} periodFormat={periodFormat} />
           </div>
         )}

From f6385be6f93a4f697e56b80ba237ffb9b4581e3a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?St=C3=A9phan=20Mestach?= <smestach@bluesquare.org>
Date: Thu, 16 Jun 2022 08:19:25 +0200
Subject: [PATCH 29/55] Unused code

---
 src/components/shared/orgunit_picker/OrgUnitTreePicker.js | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/components/shared/orgunit_picker/OrgUnitTreePicker.js b/src/components/shared/orgunit_picker/OrgUnitTreePicker.js
index f30b4812..15495696 100644
--- a/src/components/shared/orgunit_picker/OrgUnitTreePicker.js
+++ b/src/components/shared/orgunit_picker/OrgUnitTreePicker.js
@@ -3,11 +3,6 @@ import { TreeViewWithSearch } from "bluesquare-components";
 import { setPeriod, treeProps } from "./orgUnitTreeBackend";
 import ContractSummary from "../contracts/ContractSummary";
 
-const onOrgUnitSelect = (orgUnit) => {
-  alert("Selected " + orgUnit.name);
-  return [];
-};
-
 const formatInitialSelectedIds = (selection) => [];
 const formatInitialSelectedParents = (selection) => new Map();
 

From 324670afe16ddad50ba73b9eeb5d690dc16f5d0b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?St=C3=A9phan=20Mestach?= <smestach@bluesquare.org>
Date: Thu, 16 Jun 2022 08:58:30 +0200
Subject: [PATCH 30/55] Make orgunit name more visible in the search results

---
 src/components/shared/orgunit_picker/OrgUnitTreePicker.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/shared/orgunit_picker/OrgUnitTreePicker.js b/src/components/shared/orgunit_picker/OrgUnitTreePicker.js
index 15495696..915326e7 100644
--- a/src/components/shared/orgunit_picker/OrgUnitTreePicker.js
+++ b/src/components/shared/orgunit_picker/OrgUnitTreePicker.js
@@ -10,7 +10,7 @@ const makeDropDownText = (orgUnit) => {
   return (
     <div key={orgUnit.id}>
       <span display="block">
-        {orgUnit.name} <code style={{ color: "lightgrey" }}>{orgUnit.id}</code>
+        <b>{orgUnit.name}</b> <code style={{ color: "lightgrey" }}>{orgUnit.id}</code>
       </span>
       <pre style={{ fontSize: "8px" }}>
         {orgUnit.ancestors

From 15dda56a69c1d97c5ab3a40426e9684e06b16e5d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?St=C3=A9phan=20Mestach?= <smestach@bluesquare.org>
Date: Thu, 16 Jun 2022 09:06:12 +0200
Subject: [PATCH 31/55] Display all orgunits

---
 src/components/invoices/InvoiceTreeView.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/invoices/InvoiceTreeView.js b/src/components/invoices/InvoiceTreeView.js
index 08e87ba3..a9563962 100644
--- a/src/components/invoices/InvoiceTreeView.js
+++ b/src/components/invoices/InvoiceTreeView.js
@@ -65,7 +65,7 @@ const InvoiceLinksSection = ({ invoiceLinksProps, orgUnit, period }) => {
   return (
     <OrgunitRelatedSection messageKey={"Factures"}>
       <div style={{ marginLeft: "20px", marginTop: "-10px" }}>
-        <InvoiceLinks {...invoiceLinksProps} t={t} orgUnit={orgUnit} period={period} />
+        <InvoiceLinks {...invoiceLinksProps} t={t} orgUnit={orgUnit} period={period} maxInvoiceLength={100} />
       </div>
     </OrgunitRelatedSection>
   );

From 67d51aeda2c3a01b9ec6cb3af70def5c8e13690d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?St=C3=A9phan=20Mestach?= <smestach@bluesquare.org>
Date: Thu, 16 Jun 2022 09:11:04 +0200
Subject: [PATCH 32/55] reuse data entry page translations

---
 src/components/invoices/InvoiceTreeView.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/invoices/InvoiceTreeView.js b/src/components/invoices/InvoiceTreeView.js
index a9563962..b5fbc744 100644
--- a/src/components/invoices/InvoiceTreeView.js
+++ b/src/components/invoices/InvoiceTreeView.js
@@ -44,7 +44,7 @@ const DataEntriesSection = ({ orgUnit, period, periodFormat }) => {
     dataEntries = expectedDataEntries;
   }
   return (
-    <OrgunitRelatedSection messageKey={"Saisie de données"}>
+    <OrgunitRelatedSection messageKey="dataEntry.dataEntries">
       <div style={{ marginLeft: "20px", marginTop: "-10px" }}>
         {dataEntries && (
           <DataEntryLinks
@@ -63,7 +63,7 @@ const DataEntriesSection = ({ orgUnit, period, periodFormat }) => {
 const InvoiceLinksSection = ({ invoiceLinksProps, orgUnit, period }) => {
   const { t } = useTranslation();
   return (
-    <OrgunitRelatedSection messageKey={"Factures"}>
+    <OrgunitRelatedSection messageKey="dataEntry.invoices">
       <div style={{ marginLeft: "20px", marginTop: "-10px" }}>
         <InvoiceLinks {...invoiceLinksProps} t={t} orgUnit={orgUnit} period={period} maxInvoiceLength={100} />
       </div>

From 4f8f2ba4519b0aa175966cc7ea7a9bc1996585d0 Mon Sep 17 00:00:00 2001
From: Madeline OLeary <madeline.w.oleary@gmail.com>
Date: Thu, 16 Jun 2022 10:46:57 +0200
Subject: [PATCH 33/55] adds translations

---
 src/components/invoices/InvoiceSelectionContainer.js | 4 ++--
 src/components/invoices/InvoiceTreeView.js           | 7 +++----
 src/locales/en.json                                  | 5 ++++-
 src/locales/fr.json                                  | 5 ++++-
 4 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/components/invoices/InvoiceSelectionContainer.js b/src/components/invoices/InvoiceSelectionContainer.js
index 4bf6eaa1..95a394b0 100644
--- a/src/components/invoices/InvoiceSelectionContainer.js
+++ b/src/components/invoices/InvoiceSelectionContainer.js
@@ -124,8 +124,8 @@ const InvoiceSelectionContainer = (props) => {
     updateHistory(history, parent, period, debouncedSearchValue, defaultPathName, viewToUse);
   };
 
-  const switchToTreeView = "Switch to orgunit tree view";
-  const switchToTraditionalView = "Switch to traditional view";
+  const switchToTreeView = t("invoices.toggleTreeView");
+  const switchToTraditionalView = t("invoices.toggleTableView");
   const viewLabel = viewType === "table" ? switchToTreeView : switchToTraditionalView;
 
   return (
diff --git a/src/components/invoices/InvoiceTreeView.js b/src/components/invoices/InvoiceTreeView.js
index b5fbc744..4b71c22d 100644
--- a/src/components/invoices/InvoiceTreeView.js
+++ b/src/components/invoices/InvoiceTreeView.js
@@ -73,17 +73,16 @@ const InvoiceLinksSection = ({ invoiceLinksProps, orgUnit, period }) => {
 
 const ContractsSection = ({ orgUnit }) => {
   const { t } = useTranslation();
-
   return (
-    <OrgunitRelatedSection messageKey={"Contrats"}>
+    <OrgunitRelatedSection messageKey={"dataEntry.activeContracts"}>
       {orgUnit.activeContracts &&
         orgUnit.activeContracts.map((c) => (
           <div style={{ marginLeft: "20px", marginTop: "-10px" }}>
-            <ContractSummary orgUnit={orgUnit} contract={c} t={t} />
+            <ContractSummary orgUnit={orgUnit} contract={c} />
           </div>
         ))}
       {(orgUnit.activeContracts === undefined || orgUnit.activeContracts.length === 0) && (
-        <div style={{ marginLeft: "20px" }}>Pas de contrats pour cette période </div>
+        <div style={{ marginLeft: "20px" }}>{t("noActiveContracts")}</div>
       )}
     </OrgunitRelatedSection>
   );
diff --git a/src/locales/en.json b/src/locales/en.json
index ef63f3f8..134b43c7 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -126,7 +126,9 @@
       "title": "Search reports & invoices"
     },
     "refineYourQuery": "There are more results, refine your query to find the orgunit you are looking for.",
-    "displayStatus": "{{displayCount}} orgunits displayed, {{omitedCount}} without invoices."
+    "displayStatus": "{{displayCount}} orgunits displayed, {{omitedCount}} without invoices.",
+    "toggleTreeView": "Switch to tree view",
+    "toggleTableView": "Switch to table view"
   },  
   "invoicing": {
     "job": {
@@ -141,6 +143,7 @@
   "limit_org_unit_under": "Limit to the children organisation units of ...",
   "missing_invoice_types": "Missing invoice...",
   "name": "Name",
+  "noActiveContracts": "There are no active contracts for this period.",
   "noResult": "No result",
   "orgUnit": "Organisation Unit",
   "orgUnit_name": "Organisation Unit name",
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 7219d752..bd5d0b8f 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -122,7 +122,9 @@
       "title": "Recherche de rapports & factures"
     },
     "refineYourQuery": "Il y a plus de résultats, si besoin, affinez vos critères de recherche.",
-    "displayStatus": "{{displayCount}} unités affichées, {{omitedCount}} sans facture."
+    "displayStatus": "{{displayCount}} unités affichées, {{omitedCount}} sans facture.",
+    "toggleTreeView": "Passer en arborescence",
+    "toggleTableView": "Passer en vue tableau"
   },
   "invoicing": {
     "job": {
@@ -137,6 +139,7 @@
   "limit_org_unit_under": "Limiter aux unités d'organisation enfant de ...",
   "missing_invoice_types": "Facture introuvable...",
   "name": "Nom",
+  "noActiveContracts": "Pas de contrats pour cette période",
   "noResult": "Aucun résultat",
   "orgUnit": "Unité d'organisation",
   "orgUnit_name": "Nom d'unité d'organisation",

From 8e5055e75901a46f1eea10f3824c7be90d75405a Mon Sep 17 00:00:00 2001
From: Madeline OLeary <madeline.w.oleary@gmail.com>
Date: Thu, 16 Jun 2022 15:34:19 +0200
Subject: [PATCH 34/55] adds sections to their relevant plugin directories

---
 src/components/contracts/ContractsSection.js  | 23 +++++++
 .../dataentry/DataEntriesSection.js           | 30 ++++++++
 .../invoices/InvoiceLinksSection.js           | 17 +++++
 src/components/invoices/InvoiceTreeView.js    | 69 +------------------
 .../shared/OrgunitRelatedSection.js           | 14 ++++
 5 files changed, 87 insertions(+), 66 deletions(-)
 create mode 100644 src/components/contracts/ContractsSection.js
 create mode 100644 src/components/dataentry/DataEntriesSection.js
 create mode 100644 src/components/invoices/InvoiceLinksSection.js
 create mode 100644 src/components/shared/OrgunitRelatedSection.js

diff --git a/src/components/contracts/ContractsSection.js b/src/components/contracts/ContractsSection.js
new file mode 100644
index 00000000..8791eafa
--- /dev/null
+++ b/src/components/contracts/ContractsSection.js
@@ -0,0 +1,23 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import OrgunitRelatedSection from "../shared/OrgunitRelatedSection";
+import ContractSummary from "../shared/contracts/ContractSummary";
+
+const ContractsSection = ({ orgUnit }) => {
+  const { t } = useTranslation();
+  return (
+    <OrgunitRelatedSection messageKey={"dataEntry.activeContracts"}>
+      {orgUnit.activeContracts &&
+        orgUnit.activeContracts.map((c) => (
+          <div style={{ marginLeft: "20px", marginTop: "-10px" }}>
+            <ContractSummary orgUnit={orgUnit} contract={c} />
+          </div>
+        ))}
+      {(orgUnit.activeContracts === undefined || orgUnit.activeContracts.length === 0) && (
+        <div style={{ marginLeft: "20px" }}>{t("noActiveContracts")}</div>
+      )}
+    </OrgunitRelatedSection>
+  );
+};
+
+export default ContractsSection;
diff --git a/src/components/dataentry/DataEntriesSection.js b/src/components/dataentry/DataEntriesSection.js
new file mode 100644
index 00000000..b1a54aeb
--- /dev/null
+++ b/src/components/dataentry/DataEntriesSection.js
@@ -0,0 +1,30 @@
+import React from "react";
+import PluginRegistry from "../core/PluginRegistry";
+import OrgunitRelatedSection from "../shared/OrgunitRelatedSection";
+import DataEntryLinks from "../shared/data_entries/DataEntryLinks";
+
+const DataEntriesSection = ({ orgUnit, period, periodFormat }) => {
+  const dataEntryRegistry = PluginRegistry.extension("dataentry.dataEntries");
+  let dataEntries = [];
+  if (orgUnit.activeContracts && orgUnit.activeContracts[0]) {
+    const expectedDataEntries = dataEntryRegistry.getExpectedDataEntries(orgUnit.activeContracts[0], period);
+    dataEntries = expectedDataEntries;
+  }
+  return (
+    <OrgunitRelatedSection messageKey="dataEntry.dataEntries">
+      <div style={{ marginLeft: "20px", marginTop: "-10px" }}>
+        {dataEntries && (
+          <DataEntryLinks
+            dataEntries={dataEntries}
+            dataEntryCode={undefined}
+            period={period}
+            orgUnit={orgUnit}
+            periodFormat={periodFormat}
+          />
+        )}
+      </div>
+    </OrgunitRelatedSection>
+  );
+};
+
+export default DataEntriesSection;
diff --git a/src/components/invoices/InvoiceLinksSection.js b/src/components/invoices/InvoiceLinksSection.js
new file mode 100644
index 00000000..9a574ad7
--- /dev/null
+++ b/src/components/invoices/InvoiceLinksSection.js
@@ -0,0 +1,17 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import OrgunitRelatedSection from "../shared/OrgunitRelatedSection";
+import InvoiceLinks from "./InvoiceLinks";
+
+const InvoiceLinksSection = ({ invoiceLinksProps, orgUnit, period }) => {
+  const { t } = useTranslation();
+  return (
+    <OrgunitRelatedSection messageKey="dataEntry.invoices">
+      <div style={{ marginLeft: "20px", marginTop: "-10px" }}>
+        <InvoiceLinks {...invoiceLinksProps} t={t} orgUnit={orgUnit} period={period} maxInvoiceLength={100} />
+      </div>
+    </OrgunitRelatedSection>
+  );
+};
+
+export default InvoiceLinksSection;
diff --git a/src/components/invoices/InvoiceTreeView.js b/src/components/invoices/InvoiceTreeView.js
index 4b71c22d..96a8a59e 100644
--- a/src/components/invoices/InvoiceTreeView.js
+++ b/src/components/invoices/InvoiceTreeView.js
@@ -1,24 +1,13 @@
 import React, { useState } from "react";
 import OrgUnitTreePicker from "../shared/orgunit_picker/OrgUnitTreePicker";
-import InvoiceLinks from "./InvoiceLinks";
 import PeriodPicker from "../shared/PeriodPicker";
 import { FormControl } from "@material-ui/core";
 import { anchorQueryParams, urlWith } from "../shared/tables/urlParams";
-import ContractSummary from "../shared/contracts/ContractSummary";
 import { Link } from "react-router-dom";
-import PluginRegistry from "../core/PluginRegistry";
-import DataEntryLinks from "../shared/data_entries/DataEntryLinks";
-import { useTranslation } from "react-i18next";
+import ContractsSection from "../contracts/ContractsSection";
+import DataEntriesSection from "../dataentry/DataEntriesSection";
+import InvoiceLinksSection from "./InvoiceLinksSection";
 
-const OrgunitRelatedSection = ({ messageKey, children }) => {
-  const { t } = useTranslation();
-  return (
-    <div style={{ marginLeft: "20px" }}>
-      <h3>{t(messageKey)}</h3>
-      {children}
-    </div>
-  );
-};
 
 const LocationBreadCrumb = ({ orgUnit, period }) => {
   return (
@@ -36,58 +25,6 @@ const LocationBreadCrumb = ({ orgUnit, period }) => {
   );
 };
 
-const DataEntriesSection = ({ orgUnit, period, periodFormat }) => {
-  const dataEntryRegistry = PluginRegistry.extension("dataentry.dataEntries");
-  let dataEntries = [];
-  if (orgUnit.activeContracts && orgUnit.activeContracts[0]) {
-    const expectedDataEntries = dataEntryRegistry.getExpectedDataEntries(orgUnit.activeContracts[0], period);
-    dataEntries = expectedDataEntries;
-  }
-  return (
-    <OrgunitRelatedSection messageKey="dataEntry.dataEntries">
-      <div style={{ marginLeft: "20px", marginTop: "-10px" }}>
-        {dataEntries && (
-          <DataEntryLinks
-            dataEntries={dataEntries}
-            dataEntryCode={undefined}
-            period={period}
-            orgUnit={orgUnit}
-            periodFormat={periodFormat}
-          />
-        )}
-      </div>
-    </OrgunitRelatedSection>
-  );
-};
-
-const InvoiceLinksSection = ({ invoiceLinksProps, orgUnit, period }) => {
-  const { t } = useTranslation();
-  return (
-    <OrgunitRelatedSection messageKey="dataEntry.invoices">
-      <div style={{ marginLeft: "20px", marginTop: "-10px" }}>
-        <InvoiceLinks {...invoiceLinksProps} t={t} orgUnit={orgUnit} period={period} maxInvoiceLength={100} />
-      </div>
-    </OrgunitRelatedSection>
-  );
-};
-
-const ContractsSection = ({ orgUnit }) => {
-  const { t } = useTranslation();
-  return (
-    <OrgunitRelatedSection messageKey={"dataEntry.activeContracts"}>
-      {orgUnit.activeContracts &&
-        orgUnit.activeContracts.map((c) => (
-          <div style={{ marginLeft: "20px", marginTop: "-10px" }}>
-            <ContractSummary orgUnit={orgUnit} contract={c} />
-          </div>
-        ))}
-      {(orgUnit.activeContracts === undefined || orgUnit.activeContracts.length === 0) && (
-        <div style={{ marginLeft: "20px" }}>{t("noActiveContracts")}</div>
-      )}
-    </OrgunitRelatedSection>
-  );
-};
-
 const InvoiceTreeView = ({ invoiceLinksProps, searchPeriod, classes, onPeriodChange, periodFormat }) => {
   const [selectedOrgUnits, setSelectedOrgUnits] = useState([]);
 
diff --git a/src/components/shared/OrgunitRelatedSection.js b/src/components/shared/OrgunitRelatedSection.js
new file mode 100644
index 00000000..1c3e63c5
--- /dev/null
+++ b/src/components/shared/OrgunitRelatedSection.js
@@ -0,0 +1,14 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+const OrgunitRelatedSection = ({ messageKey, children }) => {
+  const { t } = useTranslation();
+  return (
+    <div style={{ marginLeft: "20px" }}>
+      <h3>{t(messageKey)}</h3>
+      {children}
+    </div>
+  );
+};
+
+export default OrgunitRelatedSection;

From 42fa07e2b92996e77f5be451f7a599bc832974b8 Mon Sep 17 00:00:00 2001
From: Madeline OLeary <madeline.w.oleary@gmail.com>
Date: Thu, 16 Jun 2022 18:13:03 +0200
Subject: [PATCH 35/55] handles initial selected ids

---
 .../shared/orgunit_picker/OrgUnitTreePicker.js    | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/shared/orgunit_picker/OrgUnitTreePicker.js b/src/components/shared/orgunit_picker/OrgUnitTreePicker.js
index 915326e7..643b603b 100644
--- a/src/components/shared/orgunit_picker/OrgUnitTreePicker.js
+++ b/src/components/shared/orgunit_picker/OrgUnitTreePicker.js
@@ -3,8 +3,15 @@ import { TreeViewWithSearch } from "bluesquare-components";
 import { setPeriod, treeProps } from "./orgUnitTreeBackend";
 import ContractSummary from "../contracts/ContractSummary";
 
-const formatInitialSelectedIds = (selection) => [];
-const formatInitialSelectedParents = (selection) => new Map();
+const formatInitialSelectedIds = (selection) => {
+  if (!selection) return [];
+  if (!Array.isArray(selection)) return [selection];
+  return selection;
+};
+
+const formatInitialSelectedParents = (selection) => {
+  return new Map();
+};
 
 const makeDropDownText = (orgUnit) => {
   return (
@@ -18,7 +25,9 @@ const makeDropDownText = (orgUnit) => {
           .map((o) => o.name)
           .join(" > ")}
       </pre>
-      {orgUnit.activeContracts && orgUnit.activeContracts[0] && <ContractSummary orgUnit={orgUnit} contract={orgUnit.activeContracts[0]} />}
+      {orgUnit.activeContracts && orgUnit.activeContracts[0] && (
+        <ContractSummary orgUnit={orgUnit} contract={orgUnit.activeContracts[0]} />
+      )}
       <hr />
     </div>
   );

From 30be6dcfd3f6fa15ddedc4efab35bbd1764447b2 Mon Sep 17 00:00:00 2001
From: Madeline OLeary <madeline.w.oleary@gmail.com>
Date: Thu, 16 Jun 2022 18:13:42 +0200
Subject: [PATCH 36/55] implements sections for data entry selection page

---
 .../dataentry/DataEntrySelectionPage.js       | 49 +++++++------------
 1 file changed, 18 insertions(+), 31 deletions(-)

diff --git a/src/components/dataentry/DataEntrySelectionPage.js b/src/components/dataentry/DataEntrySelectionPage.js
index 7f65def4..aa38a91a 100644
--- a/src/components/dataentry/DataEntrySelectionPage.js
+++ b/src/components/dataentry/DataEntrySelectionPage.js
@@ -2,20 +2,19 @@ import React, { useEffect, useState } from "react";
 import DatePeriods from "../../support/DatePeriods";
 import PluginRegistry from "../core/PluginRegistry";
 import { Link } from "react-router-dom";
-import { Button, Paper, Typography, Chip, Grid, IconButton } from "@material-ui/core";
+import { Button, Paper, Grid } from "@material-ui/core";
 import AssignmentIcon from "@material-ui/icons/Assignment";
-import InfoIcon from "@material-ui/icons/Info";
 import { Alert } from "@material-ui/lab";
 
 import FormDataContext from "./FormDataContext";
-import InvoiceLinks from "../invoices/InvoiceLinks";
 import { useTranslation } from "react-i18next";
 import { withRouter } from "react-router";
 import PeriodPicker from "../shared/PeriodPicker";
 import LinkedContract from "./LinkedContract";
 import { buildFormData } from "./forms";
-import ContractSummary from "../shared/contracts/ContractSummary";
-import DataEntryLinks from "../shared/data_entries/DataEntryLinks";
+import ContractsSection from "../contracts/ContractsSection";
+import DataEntriesSection from "./DataEntriesSection";
+import InvoiceLinksSection from "../invoices/InvoiceLinksSection";
 
 const checkOverlaps = (contracts) => {
   for (let contract1 of contracts) {
@@ -29,7 +28,9 @@ const checkOverlaps = (contracts) => {
 };
 
 const ErrorTogglable = ({ generalError }) => {
-  const message = generalError.message ? generalError.message : "Sorry something went wrong : \n"+JSON.stringify(generalError)
+  const message = generalError.message
+    ? generalError.message
+    : "Sorry something went wrong : \n" + JSON.stringify(generalError);
   const lines = message.split("\n");
   const [fullDisplay, setFullDisplay] = useState(false);
   return (
@@ -42,7 +43,7 @@ const ErrorTogglable = ({ generalError }) => {
   );
 };
 const DataEntrySelectionPage = ({ history, match, periodFormat, dhis2 }) => {
-  const { t, i18n } = useTranslation();
+  const { t } = useTranslation();
   const dataEntryRegistry = PluginRegistry.extension("dataentry.dataEntries");
   const [orgUnit, setOrgUnit] = useState(undefined);
   const [dataEntries, setDataEntries] = useState(undefined);
@@ -151,7 +152,7 @@ const DataEntrySelectionPage = ({ history, match, periodFormat, dhis2 }) => {
 
   return (
     <Paper style={{ minHeight: "90vh", paddingLeft: "14px", paddingTop: "1px" }}>
-      {generalError && <ErrorTogglable generalError={generalError}></ErrorTogglable>}
+      {generalError && <ErrorTogglable generalError={generalError} />}
       {error && (
         <div>
           <Link to={error.link}>{error.message}</Link>
@@ -189,13 +190,9 @@ const DataEntrySelectionPage = ({ history, match, periodFormat, dhis2 }) => {
           })}
       </div>
 
-      {orgUnit && orgUnit.activeContracts && (
+      {orgUnit && (
         <React.Fragment>
-          <div>
-            {t("dataEntry.contractFrom")} <code>{orgUnit.activeContracts[0].startPeriod}</code>{" "}
-            {t("dataEntry.contractTo")} <code>{orgUnit.activeContracts[0].endPeriod}</code>{" "}
-            <ContractSummary orgUnit={orgUnit} contract={orgUnit.activeContracts[0]} t={t} />
-          </div>
+          <ContractsSection orgUnit={orgUnit} />
           {linkedContracts && linkedContracts.length > 1 && (
             <div>
               <LinkedContract period={quarterPeriod} orgUnit={orgUnit} linkedContracts={linkedContracts} />
@@ -209,28 +206,18 @@ const DataEntrySelectionPage = ({ history, match, periodFormat, dhis2 }) => {
           <h2>{t("dataEntry.dataEntries")}</h2>
           <table>
             <tbody>
-              {dataEntries && (
-                <DataEntryLinks
-                  dataEntries={dataEntries}
-                  dataEntryCode={match.params.dataEntryCode}
-                  period={match.params.period}
-                  orgUnit={orgUnit}
-                  periodFormat={periodFormat}
-                />
-              )}
+              <DataEntriesSection
+                dataEntryCode={match.params.dataEntryCode}
+                period={match.params.period}
+                orgUnit={orgUnit}
+                periodFormat={periodFormat}
+              />
             </tbody>
           </table>
         </Grid>
         <Grid item>
           <h2>{t("dataEntry.invoices")}</h2>
-          {orgUnit && (
-            <InvoiceLinks
-              t={t}
-              orgUnit={orgUnit}
-              period={period}
-              invoices={PluginRegistry.extension("invoices.invoices")}
-            />
-          )}
+          {orgUnit && <InvoiceLinksSection orgUnit={orgUnit} period={period} />}
         </Grid>
       </Grid>
       <div>

From 9848fbcb883d502d937a385f47696d3fa87d16f7 Mon Sep 17 00:00:00 2001
From: Madeline OLeary <madeline.w.oleary@gmail.com>
Date: Thu, 16 Jun 2022 18:14:04 +0200
Subject: [PATCH 37/55] makes style on org unit related section modular

---
 src/components/contracts/ContractsSection.js  |  6 ++---
 .../dataentry/DataEntriesSection.js           | 11 ++++----
 .../invoices/InvoiceLinksSection.js           |  6 ++---
 src/components/invoices/InvoiceTreeView.js    | 27 ++++++++++++++++---
 .../shared/OrgunitRelatedSection.js           |  5 ++--
 5 files changed, 38 insertions(+), 17 deletions(-)

diff --git a/src/components/contracts/ContractsSection.js b/src/components/contracts/ContractsSection.js
index 8791eafa..450a2e26 100644
--- a/src/components/contracts/ContractsSection.js
+++ b/src/components/contracts/ContractsSection.js
@@ -3,13 +3,13 @@ import { useTranslation } from "react-i18next";
 import OrgunitRelatedSection from "../shared/OrgunitRelatedSection";
 import ContractSummary from "../shared/contracts/ContractSummary";
 
-const ContractsSection = ({ orgUnit }) => {
+const ContractsSection = ({ orgUnit, orgUnitSectionStyle }) => {
   const { t } = useTranslation();
   return (
-    <OrgunitRelatedSection messageKey={"dataEntry.activeContracts"}>
+    <OrgunitRelatedSection messageKey={"dataEntry.activeContracts"} orgUnitSectionStyle={orgUnitSectionStyle}>
       {orgUnit.activeContracts &&
         orgUnit.activeContracts.map((c) => (
-          <div style={{ marginLeft: "20px", marginTop: "-10px" }}>
+          <div>
             <ContractSummary orgUnit={orgUnit} contract={c} />
           </div>
         ))}
diff --git a/src/components/dataentry/DataEntriesSection.js b/src/components/dataentry/DataEntriesSection.js
index b1a54aeb..bef679e9 100644
--- a/src/components/dataentry/DataEntriesSection.js
+++ b/src/components/dataentry/DataEntriesSection.js
@@ -3,20 +3,21 @@ import PluginRegistry from "../core/PluginRegistry";
 import OrgunitRelatedSection from "../shared/OrgunitRelatedSection";
 import DataEntryLinks from "../shared/data_entries/DataEntryLinks";
 
-const DataEntriesSection = ({ orgUnit, period, periodFormat }) => {
+const DataEntriesSection = ({ orgUnit, period, dataEntryCode, periodFormat, orgUnitSectionStyle }) => {
   const dataEntryRegistry = PluginRegistry.extension("dataentry.dataEntries");
   let dataEntries = [];
-  if (orgUnit.activeContracts && orgUnit.activeContracts[0]) {
+  if (orgUnit && orgUnit.activeContracts && orgUnit.activeContracts[0]) {
     const expectedDataEntries = dataEntryRegistry.getExpectedDataEntries(orgUnit.activeContracts[0], period);
     dataEntries = expectedDataEntries;
   }
+
   return (
-    <OrgunitRelatedSection messageKey="dataEntry.dataEntries">
-      <div style={{ marginLeft: "20px", marginTop: "-10px" }}>
+    <OrgunitRelatedSection messageKey="dataEntry.dataEntries" orgUnitSectionStyle={orgUnitSectionStyle}>
+      <div>
         {dataEntries && (
           <DataEntryLinks
             dataEntries={dataEntries}
-            dataEntryCode={undefined}
+            dataEntryCode={dataEntryCode || undefined}
             period={period}
             orgUnit={orgUnit}
             periodFormat={periodFormat}
diff --git a/src/components/invoices/InvoiceLinksSection.js b/src/components/invoices/InvoiceLinksSection.js
index 9a574ad7..e8776dec 100644
--- a/src/components/invoices/InvoiceLinksSection.js
+++ b/src/components/invoices/InvoiceLinksSection.js
@@ -3,11 +3,11 @@ import { useTranslation } from "react-i18next";
 import OrgunitRelatedSection from "../shared/OrgunitRelatedSection";
 import InvoiceLinks from "./InvoiceLinks";
 
-const InvoiceLinksSection = ({ invoiceLinksProps, orgUnit, period }) => {
+const InvoiceLinksSection = ({ invoiceLinksProps, orgUnit, period, orgUnitSectionStyle }) => {
   const { t } = useTranslation();
   return (
-    <OrgunitRelatedSection messageKey="dataEntry.invoices">
-      <div style={{ marginLeft: "20px", marginTop: "-10px" }}>
+    <OrgunitRelatedSection messageKey="dataEntry.invoices" orgUnitSectionStyle={orgUnitSectionStyle}>
+      <div>
         <InvoiceLinks {...invoiceLinksProps} t={t} orgUnit={orgUnit} period={period} maxInvoiceLength={100} />
       </div>
     </OrgunitRelatedSection>
diff --git a/src/components/invoices/InvoiceTreeView.js b/src/components/invoices/InvoiceTreeView.js
index 96a8a59e..0261d981 100644
--- a/src/components/invoices/InvoiceTreeView.js
+++ b/src/components/invoices/InvoiceTreeView.js
@@ -8,7 +8,6 @@ import ContractsSection from "../contracts/ContractsSection";
 import DataEntriesSection from "../dataentry/DataEntriesSection";
 import InvoiceLinksSection from "./InvoiceLinksSection";
 
-
 const LocationBreadCrumb = ({ orgUnit, period }) => {
   return (
     <div style={{ fontFamily: "monospace", marginLeft: "20px" }}>
@@ -26,6 +25,8 @@ const LocationBreadCrumb = ({ orgUnit, period }) => {
 };
 
 const InvoiceTreeView = ({ invoiceLinksProps, searchPeriod, classes, onPeriodChange, periodFormat }) => {
+  const queryParams = anchorQueryParams();
+  const ou = queryParams.get("ou");
   const [selectedOrgUnits, setSelectedOrgUnits] = useState([]);
 
   const onOrgUnitChange = (orgunits) => {
@@ -47,19 +48,37 @@ const InvoiceTreeView = ({ invoiceLinksProps, searchPeriod, classes, onPeriodCha
       <br />
       <div style={{ display: "flex" }}>
         <div style={{ margin: "10px", width: "500px" }}>
-          <OrgUnitTreePicker onChange={onOrgUnitChange} period={searchPeriod} />
+          <OrgUnitTreePicker onChange={onOrgUnitChange} initialSelection={ou} period={searchPeriod} />
         </div>
         {selectedOrgUnits && selectedOrgUnits.length > 0 && (
           <div>
             <h2>{selectedOrgUnits[0].name}</h2>
             <LocationBreadCrumb orgUnit={selectedOrgUnits[0]} period={searchPeriod} />
-            <ContractsSection orgUnit={selectedOrgUnits[0]} />
+            <ContractsSection
+              orgUnit={selectedOrgUnits[0]}
+              orgUnitSectionStyle={{
+                marginLeft: "20px",
+                marginTop: "-10px",
+              }}
+            />
             <InvoiceLinksSection
               orgUnit={selectedOrgUnits[0]}
               period={searchPeriod}
               invoiceLinksProps={invoiceLinksProps}
+              orgUnitSectionStyle={{
+                marginLeft: "20px",
+                marginTop: "-10px",
+              }}
+            />
+            <DataEntriesSection
+              orgUnit={selectedOrgUnits[0]}
+              period={searchPeriod}
+              periodFormat={periodFormat}
+              orgUnitSectionStyle={{
+                marginLeft: "20px",
+                marginTop: "-10px",
+              }}
             />
-            <DataEntriesSection orgUnit={selectedOrgUnits[0]} period={searchPeriod} periodFormat={periodFormat} />
           </div>
         )}
       </div>
diff --git a/src/components/shared/OrgunitRelatedSection.js b/src/components/shared/OrgunitRelatedSection.js
index 1c3e63c5..1acf1049 100644
--- a/src/components/shared/OrgunitRelatedSection.js
+++ b/src/components/shared/OrgunitRelatedSection.js
@@ -1,10 +1,11 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 
-const OrgunitRelatedSection = ({ messageKey, children }) => {
+const OrgunitRelatedSection = ({ messageKey, children, orgUnitSectionStyle }) => {
   const { t } = useTranslation();
+  debugger;
   return (
-    <div style={{ marginLeft: "20px" }}>
+    <div style={orgUnitSectionStyle ? orgUnitSectionStyle : { margin: "inherit" }}>
       <h3>{t(messageKey)}</h3>
       {children}
     </div>

From 658b6ba18969d2c513240ffbffb8a5c481924f5b Mon Sep 17 00:00:00 2001
From: Madeline OLeary <madeline.w.oleary@gmail.com>
Date: Thu, 16 Jun 2022 18:26:11 +0200
Subject: [PATCH 38/55] adding data entries, sections to org unit invoice
 selection page

---
 .../invoices/OrgUnitInvoiceSelectionPage.js   | 11 ++--
 src/components/invoices/invoiceRoutes.js      | 65 +++++++++----------
 2 files changed, 37 insertions(+), 39 deletions(-)

diff --git a/src/components/invoices/OrgUnitInvoiceSelectionPage.js b/src/components/invoices/OrgUnitInvoiceSelectionPage.js
index cca23223..b1cf12e2 100644
--- a/src/components/invoices/OrgUnitInvoiceSelectionPage.js
+++ b/src/components/invoices/OrgUnitInvoiceSelectionPage.js
@@ -1,5 +1,4 @@
 import React, { useState } from "react";
-import { useTranslation } from "react-i18next";
 import { useQuery } from "react-query";
 import AssignmentIcon from "@material-ui/icons/Assignment";
 import DatePeriods from "../../support/DatePeriods";
@@ -7,10 +6,10 @@ import PeriodPicker from "../shared/PeriodPicker";
 import { Link } from "react-router-dom";
 import { Paper, Grid } from "@material-ui/core";
 import PluginRegistry from "../core/PluginRegistry";
-import InvoiceLinks from "./InvoiceLinks";
+import InvoiceLinksSection from "./InvoiceLinksSection";
+import DataEntriesSection from "../dataentry/DataEntriesSection";
 
 const OrgUnitInvoiceSelectionPage = ({ history, match, periodFormat, dhis2, currentUser, invoices }) => {
-  const { t, i18n } = useTranslation();
   const [error, setError] = useState(undefined);
 
   const period = match.params.period;
@@ -87,9 +86,9 @@ const OrgUnitInvoiceSelectionPage = ({ history, match, periodFormat, dhis2, curr
       </div>
 
       <Grid container>
-        <Grid item>
-          <h2>{t("dataEntry.invoices")}</h2>
-          {orgUnit && <InvoiceLinks t={t} orgUnit={orgUnit} period={period} maxInvoiceLength={100} />}
+        <Grid item>{orgUnit && <InvoiceLinksSection orgUnit={orgUnit} period={period} />}</Grid>
+        <Grid item style={{ marginLeft: "20px" }}>
+          <DataEntriesSection period={period} orgUnit={orgUnit} periodFormat={periodFormat} />
         </Grid>
       </Grid>
     </Paper>
diff --git a/src/components/invoices/invoiceRoutes.js b/src/components/invoices/invoiceRoutes.js
index bbb035d2..01eca451 100644
--- a/src/components/invoices/invoiceRoutes.js
+++ b/src/components/invoices/invoiceRoutes.js
@@ -7,7 +7,6 @@ import PluginRegistry from "../core/PluginRegistry";
 import Approvals from "../approvals/Approvals";
 
 const invoiceRoutes = (props) => {
-  debugger;
   return [
     <Route
       key="reportRoute"
@@ -44,38 +43,38 @@ const invoiceRoutes = (props) => {
       }}
     />,
     <Route
-    key="invoiceSelectionRoute"
-    path="/select"
-    exact
-    component={(routerProps) => {
-      const params = new URLSearchParams(routerProps.location.search.substring(1));
-      const period = params.get("period");
-      const parent = params.get("parent");
-      const viewType = params.get("mode") || "table";
-      let ouSearchValue = params.get("q");
-      if (!ouSearchValue) {
-        ouSearchValue = "";
-      }
-      const invoices = PluginRegistry.extension("invoices.invoices");
-      return (
-        <InvoiceSelectionContainer
-          key="InvoiceSelectionContainer"
-          {...routerProps}
-          invoices={invoices}
-          currentUser={props.currentUser}
-          onPeriodChange={props.onPeriodChange}
-          orgUnits={props.orgUnits}
-          period={period || props.period}
-          {...props.config.global}
-          dhis2={props.dhis2}
-          topLevelsOrgUnits={props.topLevelsOrgUnits}
-          parent={parent}
-          ouSearchValue={ouSearchValue}
-          viewType={viewType}
-        />
-      );
-    }}
-  />,
+      key="invoiceSelectionRoute"
+      path="/select"
+      exact
+      component={(routerProps) => {
+        const params = new URLSearchParams(routerProps.location.search.substring(1));
+        const period = params.get("period");
+        const parent = params.get("parent");
+        const viewType = params.get("mode") || "table";
+        let ouSearchValue = params.get("q");
+        if (!ouSearchValue) {
+          ouSearchValue = "";
+        }
+        const invoices = PluginRegistry.extension("invoices.invoices");
+        return (
+          <InvoiceSelectionContainer
+            key="InvoiceSelectionContainer"
+            {...routerProps}
+            invoices={invoices}
+            currentUser={props.currentUser}
+            onPeriodChange={props.onPeriodChange}
+            orgUnits={props.orgUnits}
+            period={period || props.period}
+            {...props.config.global}
+            dhis2={props.dhis2}
+            topLevelsOrgUnits={props.topLevelsOrgUnits}
+            parent={parent}
+            ouSearchValue={ouSearchValue}
+            viewType={viewType}
+          />
+        );
+      }}
+    />,
     <Route key="approvalsRoute" path="/approvals/:workflowids/:period" exact component={Approvals} />,
   ];
 };

From 1208b7e5f7c3d5e04c9cbba2a8d4235cf61ed99e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?St=C3=A9phan=20Mestach?= <smestach@bluesquare.org>
Date: Fri, 17 Jun 2022 08:51:33 +0200
Subject: [PATCH 39/55] Remove periodFormat props use the config

---
 src/components/dataentry/DataEntriesSection.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/dataentry/DataEntriesSection.js b/src/components/dataentry/DataEntriesSection.js
index bef679e9..a32a62b8 100644
--- a/src/components/dataentry/DataEntriesSection.js
+++ b/src/components/dataentry/DataEntriesSection.js
@@ -3,8 +3,10 @@ import PluginRegistry from "../core/PluginRegistry";
 import OrgunitRelatedSection from "../shared/OrgunitRelatedSection";
 import DataEntryLinks from "../shared/data_entries/DataEntryLinks";
 
-const DataEntriesSection = ({ orgUnit, period, dataEntryCode, periodFormat, orgUnitSectionStyle }) => {
+const DataEntriesSection = ({ orgUnit, period, dataEntryCode, orgUnitSectionStyle }) => {
   const dataEntryRegistry = PluginRegistry.extension("dataentry.dataEntries");
+  const config = PluginRegistry.extension("core.config");
+  
   let dataEntries = [];
   if (orgUnit && orgUnit.activeContracts && orgUnit.activeContracts[0]) {
     const expectedDataEntries = dataEntryRegistry.getExpectedDataEntries(orgUnit.activeContracts[0], period);
@@ -20,7 +22,7 @@ const DataEntriesSection = ({ orgUnit, period, dataEntryCode, periodFormat, orgU
             dataEntryCode={dataEntryCode || undefined}
             period={period}
             orgUnit={orgUnit}
-            periodFormat={periodFormat}
+            periodFormat={config.global.periodFormat}
           />
         )}
       </div>

From 0b5f481c44e9b24170bf4fa853535fb8c5102d78 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?St=C3=A9phan=20Mestach?= <smestach@bluesquare.org>
Date: Fri, 17 Jun 2022 08:52:46 +0200
Subject: [PATCH 40/55] Use flex for section display, use List for invoice and
 data entry list

---
 src/components/contracts/ContractsSection.js  |  2 +-
 .../dataentry/DataEntrySelectionPage.js       | 43 +++++++------------
 src/components/invoices/InvoiceLinks.js       | 15 ++++---
 src/components/invoices/InvoiceTreeView.js    |  3 +-
 .../invoices/OrgUnitInvoiceSelectionPage.js   |  2 +-
 .../shared/data_entries/DataEntryLinks.js     | 21 +++++----
 6 files changed, 36 insertions(+), 50 deletions(-)

diff --git a/src/components/contracts/ContractsSection.js b/src/components/contracts/ContractsSection.js
index 450a2e26..a4201bf5 100644
--- a/src/components/contracts/ContractsSection.js
+++ b/src/components/contracts/ContractsSection.js
@@ -9,7 +9,7 @@ const ContractsSection = ({ orgUnit, orgUnitSectionStyle }) => {
     <OrgunitRelatedSection messageKey={"dataEntry.activeContracts"} orgUnitSectionStyle={orgUnitSectionStyle}>
       {orgUnit.activeContracts &&
         orgUnit.activeContracts.map((c) => (
-          <div>
+          <div  style={{paddingTop : "0px"}}>
             <ContractSummary orgUnit={orgUnit} contract={c} />
           </div>
         ))}
diff --git a/src/components/dataentry/DataEntrySelectionPage.js b/src/components/dataentry/DataEntrySelectionPage.js
index aa38a91a..71e77863 100644
--- a/src/components/dataentry/DataEntrySelectionPage.js
+++ b/src/components/dataentry/DataEntrySelectionPage.js
@@ -190,36 +190,23 @@ const DataEntrySelectionPage = ({ history, match, periodFormat, dhis2 }) => {
           })}
       </div>
 
-      {orgUnit && (
-        <React.Fragment>
-          <ContractsSection orgUnit={orgUnit} />
-          {linkedContracts && linkedContracts.length > 1 && (
-            <div>
-              <LinkedContract period={quarterPeriod} orgUnit={orgUnit} linkedContracts={linkedContracts} />
-            </div>
+      <div style={{ display: "flex", gap: "20px", flexWrap: "wrap" }}>
+        <div>
+          {orgUnit && (
+            <React.Fragment>
+              <ContractsSection orgUnit={orgUnit} />
+              {linkedContracts && linkedContracts.length > 1 && (
+                <div>
+                  <LinkedContract period={quarterPeriod} orgUnit={orgUnit} linkedContracts={linkedContracts} />
+                </div>
+              )}
+            </React.Fragment>
           )}
-        </React.Fragment>
-      )}
+        </div>
 
-      <Grid container>
-        <Grid item xs={3}>
-          <h2>{t("dataEntry.dataEntries")}</h2>
-          <table>
-            <tbody>
-              <DataEntriesSection
-                dataEntryCode={match.params.dataEntryCode}
-                period={match.params.period}
-                orgUnit={orgUnit}
-                periodFormat={periodFormat}
-              />
-            </tbody>
-          </table>
-        </Grid>
-        <Grid item>
-          <h2>{t("dataEntry.invoices")}</h2>
-          {orgUnit && <InvoiceLinksSection orgUnit={orgUnit} period={period} />}
-        </Grid>
-      </Grid>
+        <DataEntriesSection dataEntryCode={match.params.dataEntryCode} period={match.params.period} orgUnit={orgUnit} />
+        {orgUnit && <InvoiceLinksSection orgUnit={orgUnit} period={period} />}
+      </div>
       <div>
         {formData && (
           <FormDataContext.Provider value={formData}>
diff --git a/src/components/invoices/InvoiceLinks.js b/src/components/invoices/InvoiceLinks.js
index d0294a5a..50204d63 100644
--- a/src/components/invoices/InvoiceLinks.js
+++ b/src/components/invoices/InvoiceLinks.js
@@ -53,16 +53,17 @@ const InvoiceLinks = ({ t, orgUnit, period, hideCurrentInvoice, invoiceCode, max
 
   return (
     <>
-      {!showAll && <InvoiceButton invoiceDataLinks={invoiceDataLinks} orgUnit={orgUnit}/>}
+      {!showAll && <InvoiceButton invoiceDataLinks={invoiceDataLinks} orgUnit={orgUnit} />}
 
-      {showAll &&
-        invoiceDataLinks.map((link, linkIndex) => (
-          <List key={link.invoiceName + "-" + linkIndex}>
-            <li >
+      {showAll && (
+        <List  style={{paddingTop : "0px"}}>
+          {invoiceDataLinks.map((link, linkIndex) => (
+            <li key={link.invoiceName + "-" + linkIndex}>
               <InvoiceAnchors invoiceDataLink={link} />
             </li>
-          </List>
-        ))}
+          ))}
+        </List>
+      )}
     </>
   );
 };
diff --git a/src/components/invoices/InvoiceTreeView.js b/src/components/invoices/InvoiceTreeView.js
index 0261d981..07007ef8 100644
--- a/src/components/invoices/InvoiceTreeView.js
+++ b/src/components/invoices/InvoiceTreeView.js
@@ -72,8 +72,7 @@ const InvoiceTreeView = ({ invoiceLinksProps, searchPeriod, classes, onPeriodCha
             />
             <DataEntriesSection
               orgUnit={selectedOrgUnits[0]}
-              period={searchPeriod}
-              periodFormat={periodFormat}
+              period={searchPeriod}             
               orgUnitSectionStyle={{
                 marginLeft: "20px",
                 marginTop: "-10px",
diff --git a/src/components/invoices/OrgUnitInvoiceSelectionPage.js b/src/components/invoices/OrgUnitInvoiceSelectionPage.js
index b1cf12e2..356fade1 100644
--- a/src/components/invoices/OrgUnitInvoiceSelectionPage.js
+++ b/src/components/invoices/OrgUnitInvoiceSelectionPage.js
@@ -88,7 +88,7 @@ const OrgUnitInvoiceSelectionPage = ({ history, match, periodFormat, dhis2, curr
       <Grid container>
         <Grid item>{orgUnit && <InvoiceLinksSection orgUnit={orgUnit} period={period} />}</Grid>
         <Grid item style={{ marginLeft: "20px" }}>
-          <DataEntriesSection period={period} orgUnit={orgUnit} periodFormat={periodFormat} />
+          <DataEntriesSection period={period} orgUnit={orgUnit} />
         </Grid>
       </Grid>
     </Paper>
diff --git a/src/components/shared/data_entries/DataEntryLinks.js b/src/components/shared/data_entries/DataEntryLinks.js
index e4569619..0dae518a 100644
--- a/src/components/shared/data_entries/DataEntryLinks.js
+++ b/src/components/shared/data_entries/DataEntryLinks.js
@@ -1,22 +1,21 @@
 import React from "react";
 import DatePeriods from "../../../support/DatePeriods";
-import { Button, Typography } from "@material-ui/core";
+import { Button, List, Typography } from "@material-ui/core";
 import { Link } from "react-router-dom";
 
 const DataEntryLinks = ({ dataEntries, dataEntryCode, period, orgUnit, periodFormat }) => {
   return (
-    <>
-      {dataEntries.map((dataEntry) => {
+    <List style={{paddingTop : "0px"}}>
+    {dataEntries.map((dataEntry) => {
         const isCurrent = dataEntry.dataEntryType.code === dataEntryCode && dataEntry.period === period;
         return (
-          <tr>
-            <td>
-              {" "}
+          <li style={{display: "flex"}}>
+            <div>
               <Typography variant="overline" gutterBottom>
                 {dataEntry.dataEntryType.name}
               </Typography>
-            </td>
-            <td>
+            </div>
+            <div>
               <Button
                 key={dataEntry.dataEntryType.code + "-" + dataEntry.period + "-" + orgUnit.id}
                 variant="text"
@@ -29,11 +28,11 @@ const DataEntryLinks = ({ dataEntries, dataEntryCode, period, orgUnit, periodFor
               >
                 {DatePeriods.displayName(dataEntry.period, periodFormat[DatePeriods.detect(dataEntry.period)])}
               </Button>
-            </td>
-          </tr>
+            </div>
+          </li>
         );
       })}
-    </>
+    </List>
   );
 };
 

From 487165ca28283a626928c163a43b3dc098b6a6a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?St=C3=A9phan=20Mestach?= <smestach@bluesquare.org>
Date: Fri, 17 Jun 2022 09:14:38 +0200
Subject: [PATCH 41/55] Move contracts upper

---
 src/components/dataentry/DataEntrySelectionPage.js | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/dataentry/DataEntrySelectionPage.js b/src/components/dataentry/DataEntrySelectionPage.js
index 71e77863..4ecfa0ba 100644
--- a/src/components/dataentry/DataEntrySelectionPage.js
+++ b/src/components/dataentry/DataEntrySelectionPage.js
@@ -189,24 +189,24 @@ const DataEntrySelectionPage = ({ history, match, periodFormat, dhis2 }) => {
             );
           })}
       </div>
-
-      <div style={{ display: "flex", gap: "20px", flexWrap: "wrap" }}>
-        <div>
+      <div>
           {orgUnit && (
-            <React.Fragment>
+            <div>
               <ContractsSection orgUnit={orgUnit} />
               {linkedContracts && linkedContracts.length > 1 && (
                 <div>
                   <LinkedContract period={quarterPeriod} orgUnit={orgUnit} linkedContracts={linkedContracts} />
                 </div>
               )}
-            </React.Fragment>
+            </div>
           )}
-        </div>
-
+        </div>  
+      <div style={{ display: "flex", gap: "20px", flexWrap: "wrap" }}>
         <DataEntriesSection dataEntryCode={match.params.dataEntryCode} period={match.params.period} orgUnit={orgUnit} />
         {orgUnit && <InvoiceLinksSection orgUnit={orgUnit} period={period} />}
       </div>
+      
+
       <div>
         {formData && (
           <FormDataContext.Provider value={formData}>

From a9173fc038b7b81baa310543c361144fe08f9bd6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?St=C3=A9phan=20Mestach?= <smestach@bluesquare.org>
Date: Fri, 17 Jun 2022 09:45:35 +0200
Subject: [PATCH 42/55] Display contract counts

---
 .../shared/orgunit_picker/orgUnitTreeBackend.js    | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/components/shared/orgunit_picker/orgUnitTreeBackend.js b/src/components/shared/orgunit_picker/orgUnitTreeBackend.js
index ab2c2fbf..4b8bad62 100644
--- a/src/components/shared/orgunit_picker/orgUnitTreeBackend.js
+++ b/src/components/shared/orgunit_picker/orgUnitTreeBackend.js
@@ -9,6 +9,7 @@ export const setPeriod = (argPeriod) => {
 
 const loadedOrgUnitsById = {};
 let contractsByOrgUnitId = {};
+let contractsByLevelUid = {};
 const defaultOrgUnitFields =
   "id,name,ancestors[id,name],children[id,name,ancestors[id,name],children[id,name,ancestors[id,name],children]]";
 
@@ -17,6 +18,17 @@ const getRootData = async (id, type = "source") => {
     const contractService = PluginRegistry.extension("contracts.service");
     const allContracts = await contractService.findAll();
     contractsByOrgUnitId = _.groupBy(allContracts, (c) => c.orgUnit.id);
+
+    for (let contract of allContracts.filter((c) => c.matchPeriod(currentPeriod))) {
+      debugger;
+      if (contract.orgUnit && contract.orgUnit.ancestors) {
+        for (let ancestor of contract.orgUnit.ancestors) {
+          contractsByLevelUid[ancestor.id] ||= 0;
+          contractsByLevelUid[ancestor.id] += 1;
+        }
+      }
+    }
+  
   }
 
   const d2 = await getInstance();
@@ -69,7 +81,7 @@ const request = async (value, count, source, version) => {
 };
 
 const label = (data) => {
-  return data.name;
+  return data.name + (contractsByLevelUid[data.id] ? " (" + contractsByLevelUid[data.id] + ")": "");
 };
 
 const search = (input1, input2, type) => {

From 25f59e1d7287a39cf2490b413d516aaafa8f6fa0 Mon Sep 17 00:00:00 2001
From: Madeline OLeary <madeline.w.oleary@gmail.com>
Date: Fri, 17 Jun 2022 15:56:00 +0200
Subject: [PATCH 43/55] testing preselected ou

---
 src/components/invoices/InvoiceTreeView.js    | 720 +++++++++++++++++-
 .../shared/OrgunitRelatedSection.js           |   1 -
 .../orgunit_picker/OrgUnitTreePicker.js       |  20 +-
 .../orgunit_picker/orgUnitTreeBackend.js      |   1 -
 4 files changed, 734 insertions(+), 8 deletions(-)

diff --git a/src/components/invoices/InvoiceTreeView.js b/src/components/invoices/InvoiceTreeView.js
index 07007ef8..bc66bce6 100644
--- a/src/components/invoices/InvoiceTreeView.js
+++ b/src/components/invoices/InvoiceTreeView.js
@@ -26,7 +26,725 @@ const LocationBreadCrumb = ({ orgUnit, period }) => {
 
 const InvoiceTreeView = ({ invoiceLinksProps, searchPeriod, classes, onPeriodChange, periodFormat }) => {
   const queryParams = anchorQueryParams();
-  const ou = queryParams.get("ou");
+  // const ou = queryParams.get("ou");
+  const ou = {
+    "name": "bu Bas Uele DPS",
+    "id": "rWrCdr321Qu",
+    "children": [
+        {
+            "name": "bu Ganga Zone de Santé",
+            "id": "C2yvpeOlAue",
+            "children": [
+                {
+                    "id": "mb8GSxakxA2"
+                },
+                {
+                    "id": "PmQL4SeDB6D"
+                },
+                {
+                    "id": "mAE5GGXZ1v4"
+                },
+                {
+                    "id": "SrTMJlpfxPi"
+                },
+                {
+                    "id": "ebVLzCmZe9U"
+                },
+                {
+                    "id": "MTQqtvQWI67"
+                },
+                {
+                    "id": "DTca5oMrZ7K"
+                },
+                {
+                    "id": "qXfgPrWWVGB"
+                },
+                {
+                    "id": "ExBABqlyXqN"
+                },
+                {
+                    "id": "zSHo0zGz0Y5"
+                },
+                {
+                    "id": "fr38UJWCS21"
+                },
+                {
+                    "id": "xXu4T1SV9ae"
+                },
+                {
+                    "id": "Kuj0idLQHDn"
+                },
+                {
+                    "id": "aScUWDteVTz"
+                },
+                {
+                    "id": "Pq9JDrVjNpA"
+                },
+                {
+                    "id": "v7nT6nMD5lc"
+                },
+                {
+                    "id": "N6MW0JiEZAW"
+                }
+            ],
+            "ancestors": [
+                {
+                    "name": "République Démocratique du Congo",
+                    "id": "pL5A7C1at1M"
+                },
+                {
+                    "name": "bu Bas Uele DPS",
+                    "id": "rWrCdr321Qu"
+                }
+            ]
+        },
+        {
+            "name": "bu Poko Zone de Santé",
+            "id": "RGODwLmODlf",
+            "children": [
+                {
+                    "id": "ELZk4IuxhtZ"
+                },
+                {
+                    "id": "OblAWcqMi2A"
+                },
+                {
+                    "id": "lKt31FEDsz5"
+                },
+                {
+                    "id": "G6r41YumgKb"
+                },
+                {
+                    "id": "KzhLBDitm3C"
+                },
+                {
+                    "id": "DGiZ6IocedZ"
+                },
+                {
+                    "id": "QTedVrMeLxo"
+                },
+                {
+                    "id": "zVWAprHD0dh"
+                },
+                {
+                    "id": "nJys5XuVeLV"
+                },
+                {
+                    "id": "U8m4YlvRwRE"
+                },
+                {
+                    "id": "En8bzjDRHia"
+                },
+                {
+                    "id": "Kaq7qng7HMj"
+                },
+                {
+                    "id": "tEwyMbJ0GFP"
+                },
+                {
+                    "id": "CL2yswTqOW7"
+                },
+                {
+                    "id": "uRpIEI42mMZ"
+                },
+                {
+                    "id": "Mw6rsOUptp2"
+                },
+                {
+                    "id": "zoauaKitcvr"
+                },
+                {
+                    "id": "yCIuytRbCQC"
+                }
+            ],
+            "ancestors": [
+                {
+                    "name": "République Démocratique du Congo",
+                    "id": "pL5A7C1at1M"
+                },
+                {
+                    "name": "bu Bas Uele DPS",
+                    "id": "rWrCdr321Qu"
+                }
+            ]
+        },
+        {
+            "name": "bu Viadana Zone de Santé",
+            "id": "aUkcT7hFIgU",
+            "children": [
+                {
+                    "id": "Si0KpfNPePg"
+                },
+                {
+                    "id": "LvaY2QZvKo7"
+                },
+                {
+                    "id": "CwQGRfqcXYT"
+                },
+                {
+                    "id": "TRIsG773bii"
+                },
+                {
+                    "id": "SLa9K8ituvc"
+                },
+                {
+                    "id": "kJNXL54oJHn"
+                },
+                {
+                    "id": "S6US16c0QvO"
+                },
+                {
+                    "id": "d6TLCnJXGIr"
+                },
+                {
+                    "id": "iQnZfStmkCX"
+                },
+                {
+                    "id": "utPBNENDJOO"
+                },
+                {
+                    "id": "jkrdIWqqA64"
+                },
+                {
+                    "id": "HnKDtS2Lmmi"
+                },
+                {
+                    "id": "ZXgmjj98sR7"
+                }
+            ],
+            "ancestors": [
+                {
+                    "name": "République Démocratique du Congo",
+                    "id": "pL5A7C1at1M"
+                },
+                {
+                    "name": "bu Bas Uele DPS",
+                    "id": "rWrCdr321Qu"
+                }
+            ]
+        },
+        {
+            "name": "bu Monga Zone de Santé",
+            "id": "pMrfFaKk3yp",
+            "children": [
+                {
+                    "id": "Uuwo9amxIHt"
+                },
+                {
+                    "id": "kQ203t2V4H4"
+                },
+                {
+                    "id": "CQOaMQiScJf"
+                },
+                {
+                    "id": "Dm3PJBgRVAU"
+                },
+                {
+                    "id": "SoymXbxU3nG"
+                },
+                {
+                    "id": "oCX50lzv3hg"
+                },
+                {
+                    "id": "Ipdr2cczuPl"
+                },
+                {
+                    "id": "rrsNjqU2pdS"
+                },
+                {
+                    "id": "ruKgNYUhm6R"
+                },
+                {
+                    "id": "ZXWPG1M1cQW"
+                }
+            ],
+            "ancestors": [
+                {
+                    "name": "République Démocratique du Congo",
+                    "id": "pL5A7C1at1M"
+                },
+                {
+                    "name": "bu Bas Uele DPS",
+                    "id": "rWrCdr321Qu"
+                }
+            ]
+        },
+        {
+            "name": "bu Buta Zone de Santé",
+            "id": "uXYavdjVi2G",
+            "children": [
+                {
+                    "id": "CcSEaVKbTMf"
+                },
+                {
+                    "id": "EuG9OxMvBYb"
+                },
+                {
+                    "id": "AijiF45XPBj"
+                },
+                {
+                    "id": "iPIA0XsObtz"
+                },
+                {
+                    "id": "Qe8dn1COiqb"
+                },
+                {
+                    "id": "q9Z58EwANdQ"
+                },
+                {
+                    "id": "YFE6KCniuW4"
+                },
+                {
+                    "id": "CEKJTeDVOKT"
+                },
+                {
+                    "id": "GvjnNnx5I8T"
+                },
+                {
+                    "id": "MIwzL67m8mI"
+                },
+                {
+                    "id": "LQUtxA6eB96"
+                },
+                {
+                    "id": "UwAmCtcg6pv"
+                },
+                {
+                    "id": "aDZYDp6u5je"
+                },
+                {
+                    "id": "gEHSVwyFhWa"
+                },
+                {
+                    "id": "ZuRG5IO5iwU"
+                },
+                {
+                    "id": "DpKZVJFbkgh"
+                }
+            ],
+            "ancestors": [
+                {
+                    "name": "République Démocratique du Congo",
+                    "id": "pL5A7C1at1M"
+                },
+                {
+                    "name": "bu Bas Uele DPS",
+                    "id": "rWrCdr321Qu"
+                }
+            ]
+        },
+        {
+            "name": "bu Aketi Zone de Santé",
+            "id": "gjyO7pgLjyk",
+            "children": [
+                {
+                    "id": "QAEKX98nmri"
+                },
+                {
+                    "id": "JOCatpaWvYU"
+                },
+                {
+                    "id": "C2WCaMjzQUJ"
+                },
+                {
+                    "id": "IxF8bgmIJ1c"
+                },
+                {
+                    "id": "eqyNuCwObHc"
+                },
+                {
+                    "id": "S6flGA0GGCH"
+                },
+                {
+                    "id": "LjJbZenjWRV"
+                },
+                {
+                    "id": "RAIEYko0wzY"
+                },
+                {
+                    "id": "I7DlAlutkW7"
+                },
+                {
+                    "id": "C0tnhYmRpHv"
+                },
+                {
+                    "id": "iLIu0wsDtEp"
+                },
+                {
+                    "id": "xHUtSvQPsen"
+                },
+                {
+                    "id": "Pww7wcs85ux"
+                },
+                {
+                    "id": "GZP29KfCDnB"
+                },
+                {
+                    "id": "caeFvfFuM8S"
+                },
+                {
+                    "id": "pCfpKXoGBF8"
+                },
+                {
+                    "id": "u3ShgO0ra3u"
+                }
+            ],
+            "ancestors": [
+                {
+                    "name": "République Démocratique du Congo",
+                    "id": "pL5A7C1at1M"
+                },
+                {
+                    "name": "bu Bas Uele DPS",
+                    "id": "rWrCdr321Qu"
+                }
+            ]
+        },
+        {
+            "name": "bu Likati Zone de Santé",
+            "id": "uL5UB0huzD7",
+            "children": [
+                {
+                    "id": "WWG1jeSDfme"
+                },
+                {
+                    "id": "vaCUHM0MTzl"
+                },
+                {
+                    "id": "TXdlYnJclW5"
+                },
+                {
+                    "id": "AfXWa7aIj3p"
+                },
+                {
+                    "id": "BroODngoa14"
+                },
+                {
+                    "id": "U7afSVbw7pT"
+                },
+                {
+                    "id": "gSXTXfH3JGK"
+                },
+                {
+                    "id": "blODjMDq64N"
+                },
+                {
+                    "id": "jv62cMVVgrM"
+                },
+                {
+                    "id": "lXKvm3ipBN1"
+                }
+            ],
+            "ancestors": [
+                {
+                    "name": "République Démocratique du Congo",
+                    "id": "pL5A7C1at1M"
+                },
+                {
+                    "name": "bu Bas Uele DPS",
+                    "id": "rWrCdr321Qu"
+                }
+            ]
+        },
+        {
+            "name": "bu Ango Zone de Santé",
+            "id": "VtuoUiUgwSz",
+            "children": [
+                {
+                    "id": "l8jztHpvwX7"
+                },
+                {
+                    "id": "YQzmc3EVElV"
+                },
+                {
+                    "id": "ZhdDD8TH8oH"
+                },
+                {
+                    "id": "ZnJnw2pZ4oM"
+                },
+                {
+                    "id": "JzllAJFi4Dq"
+                },
+                {
+                    "id": "t89zd8Oq91N"
+                },
+                {
+                    "id": "TYKwhufm9rp"
+                },
+                {
+                    "id": "ZP9qxPbvhiI"
+                },
+                {
+                    "id": "ocsmvPBxfv6"
+                },
+                {
+                    "id": "RTZC5jhk4yE"
+                },
+                {
+                    "id": "U2mnlRsKWZo"
+                },
+                {
+                    "id": "qbEd1COmN8W"
+                },
+                {
+                    "id": "jADqRUN5PGt"
+                },
+                {
+                    "id": "GqHsYDhHCDM"
+                },
+                {
+                    "id": "NSIfV0jUkBM"
+                },
+                {
+                    "id": "cm6JOZMtD5G"
+                },
+                {
+                    "id": "n6GUa4jPasW"
+                },
+                {
+                    "id": "nTc1gY6C9UC"
+                },
+                {
+                    "id": "ApNtH5ZDNIT"
+                },
+                {
+                    "id": "Vhj83FOXMaZ"
+                },
+                {
+                    "id": "VJH6voJICqz"
+                },
+                {
+                    "id": "UoBe9ETtYMa"
+                },
+                {
+                    "id": "zEOSwW0J7TV"
+                }
+            ],
+            "ancestors": [
+                {
+                    "name": "République Démocratique du Congo",
+                    "id": "pL5A7C1at1M"
+                },
+                {
+                    "name": "bu Bas Uele DPS",
+                    "id": "rWrCdr321Qu"
+                }
+            ]
+        },
+        {
+            "name": "bu Bili Zone de Santé",
+            "id": "zT6cLwtGLuv",
+            "children": [
+                {
+                    "id": "YZiQ5bfxIAe"
+                },
+                {
+                    "id": "tPOzqTjMpwG"
+                },
+                {
+                    "id": "T1f9d7EIxRG"
+                },
+                {
+                    "id": "ivCmDHOnJWp"
+                },
+                {
+                    "id": "JxSjeGqjnYs"
+                },
+                {
+                    "id": "NhXIo3Wnwao"
+                },
+                {
+                    "id": "EFLVlvRQ27J"
+                },
+                {
+                    "id": "sp58j5YBfuK"
+                },
+                {
+                    "id": "wdj60PqsokN"
+                },
+                {
+                    "id": "Sn7TEcGmH2A"
+                },
+                {
+                    "id": "CWWsfzCK2OY"
+                }
+            ],
+            "ancestors": [
+                {
+                    "name": "République Démocratique du Congo",
+                    "id": "pL5A7C1at1M"
+                },
+                {
+                    "name": "bu Bas Uele DPS",
+                    "id": "rWrCdr321Qu"
+                }
+            ]
+        },
+        {
+            "name": "bu Bondo Zone de Santé",
+            "id": "wQ6ec9O8n2D",
+            "children": [
+                {
+                    "id": "ejB70yjXmST"
+                },
+                {
+                    "id": "H9d4yw8Z3oS"
+                },
+                {
+                    "id": "BVFzLou3fhv"
+                },
+                {
+                    "id": "sOO0qB1R4pR"
+                },
+                {
+                    "id": "MNU7hH6EHd7"
+                },
+                {
+                    "id": "ZmPrsrNkKia"
+                },
+                {
+                    "id": "EEvm5lp9vQi"
+                },
+                {
+                    "id": "imGNRBiGBAA"
+                },
+                {
+                    "id": "glTlFCCxjsi"
+                },
+                {
+                    "id": "eNilo3FDO6W"
+                },
+                {
+                    "id": "JZqIqfDRTFH"
+                },
+                {
+                    "id": "QnyhovEJami"
+                },
+                {
+                    "id": "OvZFs5IobKq"
+                }
+            ],
+            "ancestors": [
+                {
+                    "name": "République Démocratique du Congo",
+                    "id": "pL5A7C1at1M"
+                },
+                {
+                    "name": "bu Bas Uele DPS",
+                    "id": "rWrCdr321Qu"
+                }
+            ]
+        },
+        {
+            "name": "bu Titule Zone de Santé",
+            "id": "Qwh3w16VpUj",
+            "children": [
+                {
+                    "id": "dcxGEiG6LX1"
+                },
+                {
+                    "id": "KNpepMf3WKx"
+                },
+                {
+                    "id": "rPDvZv5GXL6"
+                },
+                {
+                    "id": "rLjX1yx1PzR"
+                },
+                {
+                    "id": "WRpbruHON2h"
+                },
+                {
+                    "id": "W6iHRiRggZf"
+                },
+                {
+                    "id": "Jt8hCMz9sWq"
+                },
+                {
+                    "id": "YafoHGFoECv"
+                },
+                {
+                    "id": "V2LHJ5U9vG9"
+                },
+                {
+                    "id": "lJsWeyrYMYc"
+                },
+                {
+                    "id": "clhofR2snkq"
+                }
+            ],
+            "ancestors": [
+                {
+                    "name": "République Démocratique du Congo",
+                    "id": "pL5A7C1at1M"
+                },
+                {
+                    "name": "bu Bas Uele DPS",
+                    "id": "rWrCdr321Qu"
+                }
+            ]
+        }
+    ],
+    "ancestors": [
+        {
+            "name": "République Démocratique du Congo",
+            "id": "pL5A7C1at1M"
+        }
+    ],
+    "has_children": true,
+    "activeContracts": [
+        {
+            "fieldValues": {
+                "id": "kSr5lgIm42C",
+                "contract_start_date": "2019-06-30T22:00:00.000Z",
+                "contract_end_date": "2024-09-30T21:59:59.999Z",
+                "contract_type": "PCA",
+                "orgUnit": {
+                    "id": "rWrCdr321Qu",
+                    "name": "bu Bas Uele DPS",
+                    "path": "/pL5A7C1at1M/rWrCdr321Qu",
+                    "ancestors": [
+                        {
+                            "id": "pL5A7C1at1M",
+                            "name": "République Démocratique du Congo"
+                        },
+                        {
+                            "id": "rWrCdr321Qu",
+                            "name": "bu Bas Uele DPS"
+                        }
+                    ],
+                    "codes": [
+                        "PCA"
+                    ]
+                }
+            },
+            "id": "kSr5lgIm42C",
+            "orgUnit": {
+                "id": "rWrCdr321Qu",
+                "name": "bu Bas Uele DPS",
+                "path": "/pL5A7C1at1M/rWrCdr321Qu",
+                "ancestors": [
+                    {
+                        "id": "pL5A7C1at1M",
+                        "name": "République Démocratique du Congo"
+                    },
+                    {
+                        "id": "rWrCdr321Qu",
+                        "name": "bu Bas Uele DPS"
+                    }
+                ],
+                "codes": [
+                    "PCA"
+                ]
+            },
+            "startPeriod": "201906",
+            "endPeriod": "202409",
+            "codes": [
+                "PCA"
+            ]
+        }
+    ]
+}
   const [selectedOrgUnits, setSelectedOrgUnits] = useState([]);
 
   const onOrgUnitChange = (orgunits) => {
diff --git a/src/components/shared/OrgunitRelatedSection.js b/src/components/shared/OrgunitRelatedSection.js
index 1acf1049..354c0f7a 100644
--- a/src/components/shared/OrgunitRelatedSection.js
+++ b/src/components/shared/OrgunitRelatedSection.js
@@ -3,7 +3,6 @@ import { useTranslation } from "react-i18next";
 
 const OrgunitRelatedSection = ({ messageKey, children, orgUnitSectionStyle }) => {
   const { t } = useTranslation();
-  debugger;
   return (
     <div style={orgUnitSectionStyle ? orgUnitSectionStyle : { margin: "inherit" }}>
       <h3>{t(messageKey)}</h3>
diff --git a/src/components/shared/orgunit_picker/OrgUnitTreePicker.js b/src/components/shared/orgunit_picker/OrgUnitTreePicker.js
index 643b603b..e77c8a7f 100644
--- a/src/components/shared/orgunit_picker/OrgUnitTreePicker.js
+++ b/src/components/shared/orgunit_picker/OrgUnitTreePicker.js
@@ -5,12 +5,19 @@ import ContractSummary from "../contracts/ContractSummary";
 
 const formatInitialSelectedIds = (selection) => {
   if (!selection) return [];
-  if (!Array.isArray(selection)) return [selection];
-  return selection;
+  if (!Array.isArray(selection)) return [selection.id];
+  return selection.map((ou) => ou.id);
 };
 
 const formatInitialSelectedParents = (selection) => {
-  return new Map();
+  // return new Map();
+  const selectedParents = new Map();
+  const parentsMap = new Map();
+  selectedParents.set(selection.id, parentsMap);
+  for (const ancestor of selection.ancestors) {
+    parentsMap.set(ancestor.id, ancestor);
+  }
+  return selectedParents;
 };
 
 const makeDropDownText = (orgUnit) => {
@@ -40,9 +47,12 @@ const OrgUnitTreePicker = ({ initialSelection, onChange, period }) => {
 
   const [selectedOrgUnitsIds, setSelectedOrgUnitsIds] = useState(formatInitialSelectedIds(initialSelection));
   // Using this value to generate TruncatedTree and tell the Treeview which nodes are already expanded
-  const [selectedOrgUnitParents, setSelectedOrgUnitParents] = useState(formatInitialSelectedParents(initialSelection));
+  const formattedSelection = formatInitialSelectedParents(initialSelection);
+  const [selectedOrgUnitParents, setSelectedOrgUnitParents] = useState(formattedSelection);
 
   const onUpdate = (orgUnitIds, parentsData, orgUnits) => {
+    console.log(formattedSelection);
+    debugger;
     setSelectedOrgUnitsIds(orgUnitIds);
     setSelectedOrgUnitParents(parentsData);
     if (orgUnits) {
@@ -58,7 +68,7 @@ const OrgUnitTreePicker = ({ initialSelection, onChange, period }) => {
       <TreeViewWithSearch
         {...treeProps}
         makeDropDownText={makeDropDownText}
-        preselected={selectedOrgUnitsIds}
+        preselected={selectedOrgUnitsIds[0]}
         preexpanded={selectedOrgUnitParents}
         selectedData={selectedOrgUnits}
         onUpdate={onUpdate}
diff --git a/src/components/shared/orgunit_picker/orgUnitTreeBackend.js b/src/components/shared/orgunit_picker/orgUnitTreeBackend.js
index 4b8bad62..57c85fdc 100644
--- a/src/components/shared/orgunit_picker/orgUnitTreeBackend.js
+++ b/src/components/shared/orgunit_picker/orgUnitTreeBackend.js
@@ -20,7 +20,6 @@ const getRootData = async (id, type = "source") => {
     contractsByOrgUnitId = _.groupBy(allContracts, (c) => c.orgUnit.id);
 
     for (let contract of allContracts.filter((c) => c.matchPeriod(currentPeriod))) {
-      debugger;
       if (contract.orgUnit && contract.orgUnit.ancestors) {
         for (let ancestor of contract.orgUnit.ancestors) {
           contractsByLevelUid[ancestor.id] ||= 0;

From 301ad20dbfc7d1c6c3feeddb10f5c169cf853485 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?St=C3=A9phan=20Mestach?= <smestach@bluesquare.org>
Date: Fri, 17 Jun 2022 16:24:11 +0200
Subject: [PATCH 44/55] Load by id

---
 src/components/invoices/InvoiceTreeView.js    | 721 +-----------------
 .../orgunit_picker/OrgUnitTreePicker.js       |  21 +-
 .../orgunit_picker/orgUnitTreeBackend.js      |  11 +
 3 files changed, 30 insertions(+), 723 deletions(-)

diff --git a/src/components/invoices/InvoiceTreeView.js b/src/components/invoices/InvoiceTreeView.js
index bc66bce6..18b24ba3 100644
--- a/src/components/invoices/InvoiceTreeView.js
+++ b/src/components/invoices/InvoiceTreeView.js
@@ -26,725 +26,8 @@ const LocationBreadCrumb = ({ orgUnit, period }) => {
 
 const InvoiceTreeView = ({ invoiceLinksProps, searchPeriod, classes, onPeriodChange, periodFormat }) => {
   const queryParams = anchorQueryParams();
-  // const ou = queryParams.get("ou");
-  const ou = {
-    "name": "bu Bas Uele DPS",
-    "id": "rWrCdr321Qu",
-    "children": [
-        {
-            "name": "bu Ganga Zone de Santé",
-            "id": "C2yvpeOlAue",
-            "children": [
-                {
-                    "id": "mb8GSxakxA2"
-                },
-                {
-                    "id": "PmQL4SeDB6D"
-                },
-                {
-                    "id": "mAE5GGXZ1v4"
-                },
-                {
-                    "id": "SrTMJlpfxPi"
-                },
-                {
-                    "id": "ebVLzCmZe9U"
-                },
-                {
-                    "id": "MTQqtvQWI67"
-                },
-                {
-                    "id": "DTca5oMrZ7K"
-                },
-                {
-                    "id": "qXfgPrWWVGB"
-                },
-                {
-                    "id": "ExBABqlyXqN"
-                },
-                {
-                    "id": "zSHo0zGz0Y5"
-                },
-                {
-                    "id": "fr38UJWCS21"
-                },
-                {
-                    "id": "xXu4T1SV9ae"
-                },
-                {
-                    "id": "Kuj0idLQHDn"
-                },
-                {
-                    "id": "aScUWDteVTz"
-                },
-                {
-                    "id": "Pq9JDrVjNpA"
-                },
-                {
-                    "id": "v7nT6nMD5lc"
-                },
-                {
-                    "id": "N6MW0JiEZAW"
-                }
-            ],
-            "ancestors": [
-                {
-                    "name": "République Démocratique du Congo",
-                    "id": "pL5A7C1at1M"
-                },
-                {
-                    "name": "bu Bas Uele DPS",
-                    "id": "rWrCdr321Qu"
-                }
-            ]
-        },
-        {
-            "name": "bu Poko Zone de Santé",
-            "id": "RGODwLmODlf",
-            "children": [
-                {
-                    "id": "ELZk4IuxhtZ"
-                },
-                {
-                    "id": "OblAWcqMi2A"
-                },
-                {
-                    "id": "lKt31FEDsz5"
-                },
-                {
-                    "id": "G6r41YumgKb"
-                },
-                {
-                    "id": "KzhLBDitm3C"
-                },
-                {
-                    "id": "DGiZ6IocedZ"
-                },
-                {
-                    "id": "QTedVrMeLxo"
-                },
-                {
-                    "id": "zVWAprHD0dh"
-                },
-                {
-                    "id": "nJys5XuVeLV"
-                },
-                {
-                    "id": "U8m4YlvRwRE"
-                },
-                {
-                    "id": "En8bzjDRHia"
-                },
-                {
-                    "id": "Kaq7qng7HMj"
-                },
-                {
-                    "id": "tEwyMbJ0GFP"
-                },
-                {
-                    "id": "CL2yswTqOW7"
-                },
-                {
-                    "id": "uRpIEI42mMZ"
-                },
-                {
-                    "id": "Mw6rsOUptp2"
-                },
-                {
-                    "id": "zoauaKitcvr"
-                },
-                {
-                    "id": "yCIuytRbCQC"
-                }
-            ],
-            "ancestors": [
-                {
-                    "name": "République Démocratique du Congo",
-                    "id": "pL5A7C1at1M"
-                },
-                {
-                    "name": "bu Bas Uele DPS",
-                    "id": "rWrCdr321Qu"
-                }
-            ]
-        },
-        {
-            "name": "bu Viadana Zone de Santé",
-            "id": "aUkcT7hFIgU",
-            "children": [
-                {
-                    "id": "Si0KpfNPePg"
-                },
-                {
-                    "id": "LvaY2QZvKo7"
-                },
-                {
-                    "id": "CwQGRfqcXYT"
-                },
-                {
-                    "id": "TRIsG773bii"
-                },
-                {
-                    "id": "SLa9K8ituvc"
-                },
-                {
-                    "id": "kJNXL54oJHn"
-                },
-                {
-                    "id": "S6US16c0QvO"
-                },
-                {
-                    "id": "d6TLCnJXGIr"
-                },
-                {
-                    "id": "iQnZfStmkCX"
-                },
-                {
-                    "id": "utPBNENDJOO"
-                },
-                {
-                    "id": "jkrdIWqqA64"
-                },
-                {
-                    "id": "HnKDtS2Lmmi"
-                },
-                {
-                    "id": "ZXgmjj98sR7"
-                }
-            ],
-            "ancestors": [
-                {
-                    "name": "République Démocratique du Congo",
-                    "id": "pL5A7C1at1M"
-                },
-                {
-                    "name": "bu Bas Uele DPS",
-                    "id": "rWrCdr321Qu"
-                }
-            ]
-        },
-        {
-            "name": "bu Monga Zone de Santé",
-            "id": "pMrfFaKk3yp",
-            "children": [
-                {
-                    "id": "Uuwo9amxIHt"
-                },
-                {
-                    "id": "kQ203t2V4H4"
-                },
-                {
-                    "id": "CQOaMQiScJf"
-                },
-                {
-                    "id": "Dm3PJBgRVAU"
-                },
-                {
-                    "id": "SoymXbxU3nG"
-                },
-                {
-                    "id": "oCX50lzv3hg"
-                },
-                {
-                    "id": "Ipdr2cczuPl"
-                },
-                {
-                    "id": "rrsNjqU2pdS"
-                },
-                {
-                    "id": "ruKgNYUhm6R"
-                },
-                {
-                    "id": "ZXWPG1M1cQW"
-                }
-            ],
-            "ancestors": [
-                {
-                    "name": "République Démocratique du Congo",
-                    "id": "pL5A7C1at1M"
-                },
-                {
-                    "name": "bu Bas Uele DPS",
-                    "id": "rWrCdr321Qu"
-                }
-            ]
-        },
-        {
-            "name": "bu Buta Zone de Santé",
-            "id": "uXYavdjVi2G",
-            "children": [
-                {
-                    "id": "CcSEaVKbTMf"
-                },
-                {
-                    "id": "EuG9OxMvBYb"
-                },
-                {
-                    "id": "AijiF45XPBj"
-                },
-                {
-                    "id": "iPIA0XsObtz"
-                },
-                {
-                    "id": "Qe8dn1COiqb"
-                },
-                {
-                    "id": "q9Z58EwANdQ"
-                },
-                {
-                    "id": "YFE6KCniuW4"
-                },
-                {
-                    "id": "CEKJTeDVOKT"
-                },
-                {
-                    "id": "GvjnNnx5I8T"
-                },
-                {
-                    "id": "MIwzL67m8mI"
-                },
-                {
-                    "id": "LQUtxA6eB96"
-                },
-                {
-                    "id": "UwAmCtcg6pv"
-                },
-                {
-                    "id": "aDZYDp6u5je"
-                },
-                {
-                    "id": "gEHSVwyFhWa"
-                },
-                {
-                    "id": "ZuRG5IO5iwU"
-                },
-                {
-                    "id": "DpKZVJFbkgh"
-                }
-            ],
-            "ancestors": [
-                {
-                    "name": "République Démocratique du Congo",
-                    "id": "pL5A7C1at1M"
-                },
-                {
-                    "name": "bu Bas Uele DPS",
-                    "id": "rWrCdr321Qu"
-                }
-            ]
-        },
-        {
-            "name": "bu Aketi Zone de Santé",
-            "id": "gjyO7pgLjyk",
-            "children": [
-                {
-                    "id": "QAEKX98nmri"
-                },
-                {
-                    "id": "JOCatpaWvYU"
-                },
-                {
-                    "id": "C2WCaMjzQUJ"
-                },
-                {
-                    "id": "IxF8bgmIJ1c"
-                },
-                {
-                    "id": "eqyNuCwObHc"
-                },
-                {
-                    "id": "S6flGA0GGCH"
-                },
-                {
-                    "id": "LjJbZenjWRV"
-                },
-                {
-                    "id": "RAIEYko0wzY"
-                },
-                {
-                    "id": "I7DlAlutkW7"
-                },
-                {
-                    "id": "C0tnhYmRpHv"
-                },
-                {
-                    "id": "iLIu0wsDtEp"
-                },
-                {
-                    "id": "xHUtSvQPsen"
-                },
-                {
-                    "id": "Pww7wcs85ux"
-                },
-                {
-                    "id": "GZP29KfCDnB"
-                },
-                {
-                    "id": "caeFvfFuM8S"
-                },
-                {
-                    "id": "pCfpKXoGBF8"
-                },
-                {
-                    "id": "u3ShgO0ra3u"
-                }
-            ],
-            "ancestors": [
-                {
-                    "name": "République Démocratique du Congo",
-                    "id": "pL5A7C1at1M"
-                },
-                {
-                    "name": "bu Bas Uele DPS",
-                    "id": "rWrCdr321Qu"
-                }
-            ]
-        },
-        {
-            "name": "bu Likati Zone de Santé",
-            "id": "uL5UB0huzD7",
-            "children": [
-                {
-                    "id": "WWG1jeSDfme"
-                },
-                {
-                    "id": "vaCUHM0MTzl"
-                },
-                {
-                    "id": "TXdlYnJclW5"
-                },
-                {
-                    "id": "AfXWa7aIj3p"
-                },
-                {
-                    "id": "BroODngoa14"
-                },
-                {
-                    "id": "U7afSVbw7pT"
-                },
-                {
-                    "id": "gSXTXfH3JGK"
-                },
-                {
-                    "id": "blODjMDq64N"
-                },
-                {
-                    "id": "jv62cMVVgrM"
-                },
-                {
-                    "id": "lXKvm3ipBN1"
-                }
-            ],
-            "ancestors": [
-                {
-                    "name": "République Démocratique du Congo",
-                    "id": "pL5A7C1at1M"
-                },
-                {
-                    "name": "bu Bas Uele DPS",
-                    "id": "rWrCdr321Qu"
-                }
-            ]
-        },
-        {
-            "name": "bu Ango Zone de Santé",
-            "id": "VtuoUiUgwSz",
-            "children": [
-                {
-                    "id": "l8jztHpvwX7"
-                },
-                {
-                    "id": "YQzmc3EVElV"
-                },
-                {
-                    "id": "ZhdDD8TH8oH"
-                },
-                {
-                    "id": "ZnJnw2pZ4oM"
-                },
-                {
-                    "id": "JzllAJFi4Dq"
-                },
-                {
-                    "id": "t89zd8Oq91N"
-                },
-                {
-                    "id": "TYKwhufm9rp"
-                },
-                {
-                    "id": "ZP9qxPbvhiI"
-                },
-                {
-                    "id": "ocsmvPBxfv6"
-                },
-                {
-                    "id": "RTZC5jhk4yE"
-                },
-                {
-                    "id": "U2mnlRsKWZo"
-                },
-                {
-                    "id": "qbEd1COmN8W"
-                },
-                {
-                    "id": "jADqRUN5PGt"
-                },
-                {
-                    "id": "GqHsYDhHCDM"
-                },
-                {
-                    "id": "NSIfV0jUkBM"
-                },
-                {
-                    "id": "cm6JOZMtD5G"
-                },
-                {
-                    "id": "n6GUa4jPasW"
-                },
-                {
-                    "id": "nTc1gY6C9UC"
-                },
-                {
-                    "id": "ApNtH5ZDNIT"
-                },
-                {
-                    "id": "Vhj83FOXMaZ"
-                },
-                {
-                    "id": "VJH6voJICqz"
-                },
-                {
-                    "id": "UoBe9ETtYMa"
-                },
-                {
-                    "id": "zEOSwW0J7TV"
-                }
-            ],
-            "ancestors": [
-                {
-                    "name": "République Démocratique du Congo",
-                    "id": "pL5A7C1at1M"
-                },
-                {
-                    "name": "bu Bas Uele DPS",
-                    "id": "rWrCdr321Qu"
-                }
-            ]
-        },
-        {
-            "name": "bu Bili Zone de Santé",
-            "id": "zT6cLwtGLuv",
-            "children": [
-                {
-                    "id": "YZiQ5bfxIAe"
-                },
-                {
-                    "id": "tPOzqTjMpwG"
-                },
-                {
-                    "id": "T1f9d7EIxRG"
-                },
-                {
-                    "id": "ivCmDHOnJWp"
-                },
-                {
-                    "id": "JxSjeGqjnYs"
-                },
-                {
-                    "id": "NhXIo3Wnwao"
-                },
-                {
-                    "id": "EFLVlvRQ27J"
-                },
-                {
-                    "id": "sp58j5YBfuK"
-                },
-                {
-                    "id": "wdj60PqsokN"
-                },
-                {
-                    "id": "Sn7TEcGmH2A"
-                },
-                {
-                    "id": "CWWsfzCK2OY"
-                }
-            ],
-            "ancestors": [
-                {
-                    "name": "République Démocratique du Congo",
-                    "id": "pL5A7C1at1M"
-                },
-                {
-                    "name": "bu Bas Uele DPS",
-                    "id": "rWrCdr321Qu"
-                }
-            ]
-        },
-        {
-            "name": "bu Bondo Zone de Santé",
-            "id": "wQ6ec9O8n2D",
-            "children": [
-                {
-                    "id": "ejB70yjXmST"
-                },
-                {
-                    "id": "H9d4yw8Z3oS"
-                },
-                {
-                    "id": "BVFzLou3fhv"
-                },
-                {
-                    "id": "sOO0qB1R4pR"
-                },
-                {
-                    "id": "MNU7hH6EHd7"
-                },
-                {
-                    "id": "ZmPrsrNkKia"
-                },
-                {
-                    "id": "EEvm5lp9vQi"
-                },
-                {
-                    "id": "imGNRBiGBAA"
-                },
-                {
-                    "id": "glTlFCCxjsi"
-                },
-                {
-                    "id": "eNilo3FDO6W"
-                },
-                {
-                    "id": "JZqIqfDRTFH"
-                },
-                {
-                    "id": "QnyhovEJami"
-                },
-                {
-                    "id": "OvZFs5IobKq"
-                }
-            ],
-            "ancestors": [
-                {
-                    "name": "République Démocratique du Congo",
-                    "id": "pL5A7C1at1M"
-                },
-                {
-                    "name": "bu Bas Uele DPS",
-                    "id": "rWrCdr321Qu"
-                }
-            ]
-        },
-        {
-            "name": "bu Titule Zone de Santé",
-            "id": "Qwh3w16VpUj",
-            "children": [
-                {
-                    "id": "dcxGEiG6LX1"
-                },
-                {
-                    "id": "KNpepMf3WKx"
-                },
-                {
-                    "id": "rPDvZv5GXL6"
-                },
-                {
-                    "id": "rLjX1yx1PzR"
-                },
-                {
-                    "id": "WRpbruHON2h"
-                },
-                {
-                    "id": "W6iHRiRggZf"
-                },
-                {
-                    "id": "Jt8hCMz9sWq"
-                },
-                {
-                    "id": "YafoHGFoECv"
-                },
-                {
-                    "id": "V2LHJ5U9vG9"
-                },
-                {
-                    "id": "lJsWeyrYMYc"
-                },
-                {
-                    "id": "clhofR2snkq"
-                }
-            ],
-            "ancestors": [
-                {
-                    "name": "République Démocratique du Congo",
-                    "id": "pL5A7C1at1M"
-                },
-                {
-                    "name": "bu Bas Uele DPS",
-                    "id": "rWrCdr321Qu"
-                }
-            ]
-        }
-    ],
-    "ancestors": [
-        {
-            "name": "République Démocratique du Congo",
-            "id": "pL5A7C1at1M"
-        }
-    ],
-    "has_children": true,
-    "activeContracts": [
-        {
-            "fieldValues": {
-                "id": "kSr5lgIm42C",
-                "contract_start_date": "2019-06-30T22:00:00.000Z",
-                "contract_end_date": "2024-09-30T21:59:59.999Z",
-                "contract_type": "PCA",
-                "orgUnit": {
-                    "id": "rWrCdr321Qu",
-                    "name": "bu Bas Uele DPS",
-                    "path": "/pL5A7C1at1M/rWrCdr321Qu",
-                    "ancestors": [
-                        {
-                            "id": "pL5A7C1at1M",
-                            "name": "République Démocratique du Congo"
-                        },
-                        {
-                            "id": "rWrCdr321Qu",
-                            "name": "bu Bas Uele DPS"
-                        }
-                    ],
-                    "codes": [
-                        "PCA"
-                    ]
-                }
-            },
-            "id": "kSr5lgIm42C",
-            "orgUnit": {
-                "id": "rWrCdr321Qu",
-                "name": "bu Bas Uele DPS",
-                "path": "/pL5A7C1at1M/rWrCdr321Qu",
-                "ancestors": [
-                    {
-                        "id": "pL5A7C1at1M",
-                        "name": "République Démocratique du Congo"
-                    },
-                    {
-                        "id": "rWrCdr321Qu",
-                        "name": "bu Bas Uele DPS"
-                    }
-                ],
-                "codes": [
-                    "PCA"
-                ]
-            },
-            "startPeriod": "201906",
-            "endPeriod": "202409",
-            "codes": [
-                "PCA"
-            ]
-        }
-    ]
-}
+  const ou = queryParams.get("ou");
+  
   const [selectedOrgUnits, setSelectedOrgUnits] = useState([]);
 
   const onOrgUnitChange = (orgunits) => {
diff --git a/src/components/shared/orgunit_picker/OrgUnitTreePicker.js b/src/components/shared/orgunit_picker/OrgUnitTreePicker.js
index e77c8a7f..f43664a0 100644
--- a/src/components/shared/orgunit_picker/OrgUnitTreePicker.js
+++ b/src/components/shared/orgunit_picker/OrgUnitTreePicker.js
@@ -2,6 +2,9 @@ import React, { useState } from "react";
 import { TreeViewWithSearch } from "bluesquare-components";
 import { setPeriod, treeProps } from "./orgUnitTreeBackend";
 import ContractSummary from "../contracts/ContractSummary";
+import { useQuery, useMutation, useQueryClient } from "react-query";
+
+
 
 const formatInitialSelectedIds = (selection) => {
   if (!selection) return [];
@@ -10,14 +13,14 @@ const formatInitialSelectedIds = (selection) => {
 };
 
 const formatInitialSelectedParents = (selection) => {
-  // return new Map();
-  const selectedParents = new Map();
+  return new Map();
+  /*const selectedParents = new Map();
   const parentsMap = new Map();
   selectedParents.set(selection.id, parentsMap);
   for (const ancestor of selection.ancestors) {
     parentsMap.set(ancestor.id, ancestor);
   }
-  return selectedParents;
+  return selectedParents;*/
 };
 
 const makeDropDownText = (orgUnit) => {
@@ -50,6 +53,16 @@ const OrgUnitTreePicker = ({ initialSelection, onChange, period }) => {
   const formattedSelection = formatInitialSelectedParents(initialSelection);
   const [selectedOrgUnitParents, setSelectedOrgUnitParents] = useState(formattedSelection);
 
+  const fetchSelectionQuery = useQuery(["fetchSelectionQuery",initialSelection], async () => {
+    const rootData = await treeProps.getOrgUnitById(initialSelection)
+    debugger;
+    return {
+      preselected: initialSelection,
+      preexpanded: rootData,
+    }
+  });
+  
+
   const onUpdate = (orgUnitIds, parentsData, orgUnits) => {
     console.log(formattedSelection);
     debugger;
@@ -61,7 +74,7 @@ const OrgUnitTreePicker = ({ initialSelection, onChange, period }) => {
     if (onChange) {
       onChange(orgUnits);
     }
-  };
+  };  
 
   return (
     <div>
diff --git a/src/components/shared/orgunit_picker/orgUnitTreeBackend.js b/src/components/shared/orgunit_picker/orgUnitTreeBackend.js
index 57c85fdc..64b86ab1 100644
--- a/src/components/shared/orgunit_picker/orgUnitTreeBackend.js
+++ b/src/components/shared/orgunit_picker/orgUnitTreeBackend.js
@@ -68,6 +68,16 @@ const getChildrenData = async (id) => {
   return withHasChildren(resp.organisationUnits);
 };
 
+
+const getOrgUnitById = async (id) => {
+  const resp = await api.get("organisationUnits", {
+    filter: "id" + id,
+    fields: defaultOrgUnitFields,
+    paging: false,
+  });
+  return withHasChildren(resp.organisationUnits);
+}
+
 const request = async (value, count, source, version) => {
   const d2 = await getInstance();
   const api = await d2.Api.getApi();
@@ -102,4 +112,5 @@ export const treeProps = {
   parseNodeIds: parseNodeIds,
   toggleOnLabelClick: false,
   isSelectable: () => true,
+  getOrgUnitById
 };

From 9704b91b82fa8d821211c6d9eebe972ecf0a505a Mon Sep 17 00:00:00 2001
From: Madeline OLeary <madeline.w.oleary@gmail.com>
Date: Mon, 20 Jun 2022 16:29:02 +0200
Subject: [PATCH 45/55] retrieving orgunit and parents

---
 .../orgunit_picker/OrgUnitTreePicker.js       | 41 ++++++++++---------
 .../orgunit_picker/orgUnitTreeBackend.js      |  8 ++--
 2 files changed, 26 insertions(+), 23 deletions(-)

diff --git a/src/components/shared/orgunit_picker/OrgUnitTreePicker.js b/src/components/shared/orgunit_picker/OrgUnitTreePicker.js
index f43664a0..8528942f 100644
--- a/src/components/shared/orgunit_picker/OrgUnitTreePicker.js
+++ b/src/components/shared/orgunit_picker/OrgUnitTreePicker.js
@@ -4,8 +4,6 @@ import { setPeriod, treeProps } from "./orgUnitTreeBackend";
 import ContractSummary from "../contracts/ContractSummary";
 import { useQuery, useMutation, useQueryClient } from "react-query";
 
-
-
 const formatInitialSelectedIds = (selection) => {
   if (!selection) return [];
   if (!Array.isArray(selection)) return [selection.id];
@@ -13,14 +11,13 @@ const formatInitialSelectedIds = (selection) => {
 };
 
 const formatInitialSelectedParents = (selection) => {
-  return new Map();
-  /*const selectedParents = new Map();
+  const selectedParents = new Map();
   const parentsMap = new Map();
   selectedParents.set(selection.id, parentsMap);
   for (const ancestor of selection.ancestors) {
     parentsMap.set(ancestor.id, ancestor);
   }
-  return selectedParents;*/
+  return selectedParents;
 };
 
 const makeDropDownText = (orgUnit) => {
@@ -50,22 +47,28 @@ const OrgUnitTreePicker = ({ initialSelection, onChange, period }) => {
 
   const [selectedOrgUnitsIds, setSelectedOrgUnitsIds] = useState(formatInitialSelectedIds(initialSelection));
   // Using this value to generate TruncatedTree and tell the Treeview which nodes are already expanded
-  const formattedSelection = formatInitialSelectedParents(initialSelection);
-  const [selectedOrgUnitParents, setSelectedOrgUnitParents] = useState(formattedSelection);
+  // const formattedSelection = formatInitialSelectedParents(initialSelection);
+  const [selectedOrgUnitParents, setSelectedOrgUnitParents] = useState(null);
 
-  const fetchSelectionQuery = useQuery(["fetchSelectionQuery",initialSelection], async () => {
-    const rootData = await treeProps.getOrgUnitById(initialSelection)
-    debugger;
-    return {
-      preselected: initialSelection,
-      preexpanded: rootData,
+  const fetchSelectionQuery = useQuery("fetchSelectionQuery", async () => {
+    if (initialSelection) {
+      const rootData = await treeProps.getOrgUnitById(initialSelection);
+      let parents;
+      if (rootData[0] && rootData[0].ancestors.length) {
+        parents = formatInitialSelectedParents(rootData[0]);
+        setSelectedOrgUnitParents(parents);
+      }
+      return {
+        preselected: initialSelection,
+        preexpanded: rootData,
+      };
     }
   });
-  
+
+  const preselected = fetchSelectionQuery?.data?.preselected;
+  const preexpanded = fetchSelectionQuery?.data?.preexpanded;
 
   const onUpdate = (orgUnitIds, parentsData, orgUnits) => {
-    console.log(formattedSelection);
-    debugger;
     setSelectedOrgUnitsIds(orgUnitIds);
     setSelectedOrgUnitParents(parentsData);
     if (orgUnits) {
@@ -74,15 +77,15 @@ const OrgUnitTreePicker = ({ initialSelection, onChange, period }) => {
     if (onChange) {
       onChange(orgUnits);
     }
-  };  
+  };
 
   return (
     <div>
       <TreeViewWithSearch
         {...treeProps}
         makeDropDownText={makeDropDownText}
-        preselected={selectedOrgUnitsIds[0]}
-        preexpanded={selectedOrgUnitParents}
+        preselected={preselected}
+        preexpanded={preexpanded}
         selectedData={selectedOrgUnits}
         onUpdate={onUpdate}
       />
diff --git a/src/components/shared/orgunit_picker/orgUnitTreeBackend.js b/src/components/shared/orgunit_picker/orgUnitTreeBackend.js
index 64b86ab1..ec774379 100644
--- a/src/components/shared/orgunit_picker/orgUnitTreeBackend.js
+++ b/src/components/shared/orgunit_picker/orgUnitTreeBackend.js
@@ -27,7 +27,6 @@ const getRootData = async (id, type = "source") => {
         }
       }
     }
-  
   }
 
   const d2 = await getInstance();
@@ -68,15 +67,16 @@ const getChildrenData = async (id) => {
   return withHasChildren(resp.organisationUnits);
 };
 
-
 const getOrgUnitById = async (id) => {
+  const d2 = await getInstance();
+  const api = await d2.Api.getApi();
   const resp = await api.get("organisationUnits", {
-    filter: "id" + id,
+    filter: "id:eq:" + id,
     fields: defaultOrgUnitFields,
     paging: false,
   });
   return withHasChildren(resp.organisationUnits);
-}
+};
 
 const request = async (value, count, source, version) => {
   const d2 = await getInstance();

From 86375feaa8297882216cd8d69780be8cff7442cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?St=C3=A9phan=20Mestach?= <smestach@bluesquare.org>
Date: Wed, 22 Jun 2022 11:04:44 +0200
Subject: [PATCH 46/55] Make preselection work

---
 src/components/invoices/InvoiceTreeView.js    | 58 +++++++-------
 .../orgunit_picker/OrgUnitTreePicker.js       | 76 ++++++++++++-------
 2 files changed, 78 insertions(+), 56 deletions(-)

diff --git a/src/components/invoices/InvoiceTreeView.js b/src/components/invoices/InvoiceTreeView.js
index 18b24ba3..5fb7c22f 100644
--- a/src/components/invoices/InvoiceTreeView.js
+++ b/src/components/invoices/InvoiceTreeView.js
@@ -24,10 +24,31 @@ const LocationBreadCrumb = ({ orgUnit, period }) => {
   );
 };
 
+const OrgUnitDetails = ({ orgUnit, searchPeriod, invoiceLinksProps }) => {
+  return (
+    <div>
+      <h2>{orgUnit.name}</h2>
+      <LocationBreadCrumb orgUnit={orgUnit} period={searchPeriod} />
+      <ContractsSection
+        orgUnit={orgUnit}
+      />
+      <InvoiceLinksSection
+        orgUnit={orgUnit}
+        period={searchPeriod}
+        invoiceLinksProps={invoiceLinksProps}
+      />
+      <DataEntriesSection
+        orgUnit={orgUnit}
+        period={searchPeriod}
+      />
+    </div>
+  );
+};
+
 const InvoiceTreeView = ({ invoiceLinksProps, searchPeriod, classes, onPeriodChange, periodFormat }) => {
   const queryParams = anchorQueryParams();
   const ou = queryParams.get("ou");
-  
+
   const [selectedOrgUnits, setSelectedOrgUnits] = useState([]);
 
   const onOrgUnitChange = (orgunits) => {
@@ -51,35 +72,12 @@ const InvoiceTreeView = ({ invoiceLinksProps, searchPeriod, classes, onPeriodCha
         <div style={{ margin: "10px", width: "500px" }}>
           <OrgUnitTreePicker onChange={onOrgUnitChange} initialSelection={ou} period={searchPeriod} />
         </div>
-        {selectedOrgUnits && selectedOrgUnits.length > 0 && (
-          <div>
-            <h2>{selectedOrgUnits[0].name}</h2>
-            <LocationBreadCrumb orgUnit={selectedOrgUnits[0]} period={searchPeriod} />
-            <ContractsSection
-              orgUnit={selectedOrgUnits[0]}
-              orgUnitSectionStyle={{
-                marginLeft: "20px",
-                marginTop: "-10px",
-              }}
-            />
-            <InvoiceLinksSection
-              orgUnit={selectedOrgUnits[0]}
-              period={searchPeriod}
-              invoiceLinksProps={invoiceLinksProps}
-              orgUnitSectionStyle={{
-                marginLeft: "20px",
-                marginTop: "-10px",
-              }}
-            />
-            <DataEntriesSection
-              orgUnit={selectedOrgUnits[0]}
-              period={searchPeriod}             
-              orgUnitSectionStyle={{
-                marginLeft: "20px",
-                marginTop: "-10px",
-              }}
-            />
-          </div>
+        {selectedOrgUnits && selectedOrgUnits[0] && (
+          <OrgUnitDetails
+            orgUnit={selectedOrgUnits[0]}
+            searchPeriod={searchPeriod}
+            invoiceLinksProps={invoiceLinksProps}
+          />
         )}
       </div>
     </>
diff --git a/src/components/shared/orgunit_picker/OrgUnitTreePicker.js b/src/components/shared/orgunit_picker/OrgUnitTreePicker.js
index 8528942f..5185c326 100644
--- a/src/components/shared/orgunit_picker/OrgUnitTreePicker.js
+++ b/src/components/shared/orgunit_picker/OrgUnitTreePicker.js
@@ -1,9 +1,13 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { TreeViewWithSearch } from "bluesquare-components";
 import { setPeriod, treeProps } from "./orgUnitTreeBackend";
 import ContractSummary from "../contracts/ContractSummary";
 import { useQuery, useMutation, useQueryClient } from "react-query";
 
+function sleep(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
 const formatInitialSelectedIds = (selection) => {
   if (!selection) return [];
   if (!Array.isArray(selection)) return [selection.id];
@@ -17,6 +21,8 @@ const formatInitialSelectedParents = (selection) => {
   for (const ancestor of selection.ancestors) {
     parentsMap.set(ancestor.id, ancestor);
   }
+  // if not there, a parent is missing
+  parentsMap.set(selection.id, selection);
   return selectedParents;
 };
 
@@ -44,23 +50,34 @@ const OrgUnitTreePicker = ({ initialSelection, onChange, period }) => {
   setPeriod(period);
 
   const [selectedOrgUnits, setSelectedOrgUnits] = useState(initialSelection);
-
-  const [selectedOrgUnitsIds, setSelectedOrgUnitsIds] = useState(formatInitialSelectedIds(initialSelection));
-  // Using this value to generate TruncatedTree and tell the Treeview which nodes are already expanded
-  // const formattedSelection = formatInitialSelectedParents(initialSelection);
-  const [selectedOrgUnitParents, setSelectedOrgUnitParents] = useState(null);
-
+  const onUpdate = (orgUnitIds, parentsData, orgUnits) => {
+    console.log("onUpdate", orgUnitIds, parentsData, orgUnits)
+    if (orgUnits) {
+      setSelectedOrgUnits(orgUnits);
+    }
+    if (onChange) {
+      onChange(orgUnits);
+    }
+  };
   const fetchSelectionQuery = useQuery("fetchSelectionQuery", async () => {
     if (initialSelection) {
       const rootData = await treeProps.getOrgUnitById(initialSelection);
+      if (rootData[0] && rootData[0].ancestors.length) {
+        const loadedAncestors = [];
+        for (let ancestor of rootData[0].ancestors) {
+          let loadedAncestor = await treeProps.getOrgUnitById(ancestor.id);
+          loadedAncestors.push(loadedAncestor[0]);
+        }
+        rootData[0].ancestors = loadedAncestors;
+      }
       let parents;
       if (rootData[0] && rootData[0].ancestors.length) {
         parents = formatInitialSelectedParents(rootData[0]);
-        setSelectedOrgUnitParents(parents);
       }
       return {
+        rootData: rootData,
         preselected: initialSelection,
-        preexpanded: rootData,
+        preexpanded: parents,
       };
     }
   });
@@ -68,27 +85,34 @@ const OrgUnitTreePicker = ({ initialSelection, onChange, period }) => {
   const preselected = fetchSelectionQuery?.data?.preselected;
   const preexpanded = fetchSelectionQuery?.data?.preexpanded;
 
-  const onUpdate = (orgUnitIds, parentsData, orgUnits) => {
-    setSelectedOrgUnitsIds(orgUnitIds);
-    setSelectedOrgUnitParents(parentsData);
-    if (orgUnits) {
-      setSelectedOrgUnits(orgUnits);
+  useEffect(() => {
+    if (preselected) {
+      onUpdate(undefined, undefined, fetchSelectionQuery?.data?.rootData);
     }
-    if (onChange) {
-      onChange(orgUnits);
-    }
-  };
+  }, [preselected]);
 
+  if (preselected || preexpanded) {
+    console.log("preselected", preselected, " preexpanded", preexpanded);
+  }
+  if (initialSelection && preselected == undefined) {
+    return <span>Loading...</span>;
+  }
   return (
     <div>
-      <TreeViewWithSearch
-        {...treeProps}
-        makeDropDownText={makeDropDownText}
-        preselected={preselected}
-        preexpanded={preexpanded}
-        selectedData={selectedOrgUnits}
-        onUpdate={onUpdate}
-      />
+      {fetchSelectionQuery.status === "loading" ? (
+        <span>Loading...</span>
+      ) : fetchSelectionQuery.status === "error" ? (
+        <span>Error: {error.message}</span>
+      ) : (
+        <TreeViewWithSearch
+          {...treeProps}
+          makeDropDownText={makeDropDownText}
+          preselected={preselected}
+          preexpanded={preexpanded}
+          selectedData={selectedOrgUnits}
+          onUpdate={onUpdate}
+        />
+      )}
     </div>
   );
 };

From f91041d12a4461f3963b28177db5aa417a4aa058 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?St=C3=A9phan=20Mestach?= <smestach@bluesquare.org>
Date: Wed, 22 Jun 2022 11:20:06 +0200
Subject: [PATCH 47/55] Make contracted orgunit more visible

---
 .../shared/orgunit_picker/orgUnitTreeBackend.js        | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/shared/orgunit_picker/orgUnitTreeBackend.js b/src/components/shared/orgunit_picker/orgUnitTreeBackend.js
index ec774379..468c5f0d 100644
--- a/src/components/shared/orgunit_picker/orgUnitTreeBackend.js
+++ b/src/components/shared/orgunit_picker/orgUnitTreeBackend.js
@@ -1,3 +1,4 @@
+import React from "react"
 import { getInstance } from "d2/lib/d2";
 import PluginRegistry from "../../core/PluginRegistry";
 
@@ -90,7 +91,12 @@ const request = async (value, count, source, version) => {
 };
 
 const label = (data) => {
-  return data.name + (contractsByLevelUid[data.id] ? " (" + contractsByLevelUid[data.id] + ")": "");
+  const activeContractsDecorator = data.activeContracts && data.activeContracts.length > 0
+  const contractsUnder = contractsByLevelUid[data.id] ? " (" + contractsByLevelUid[data.id] + ")" : "";
+  if (activeContractsDecorator) {
+    return <span><b>{data.name}</b>{contractsUnder}</span>
+  }
+  return  data.name + contractsUnder  
 };
 
 const search = (input1, input2, type) => {
@@ -112,5 +118,5 @@ export const treeProps = {
   parseNodeIds: parseNodeIds,
   toggleOnLabelClick: false,
   isSelectable: () => true,
-  getOrgUnitById
+  getOrgUnitById,
 };

From 0d0dd4665bdaa54b58bc42461bcf4bc19270731b Mon Sep 17 00:00:00 2001
From: Madeline OLeary <madeline.w.oleary@gmail.com>
Date: Thu, 23 Jun 2022 09:59:17 +0200
Subject: [PATCH 48/55] implements ancestors breadcrumb component

---
 src/components/contracts/ContractPage.js      |  9 ++---
 .../dataentry/DataEntrySelectionPage.js       | 34 +++++++------------
 src/components/invoices/InvoiceTreeView.js    | 31 +++++------------
 .../invoices/OrgUnitInvoiceSelectionPage.js   | 11 ++----
 src/components/shared/AncestorsBreadcrumb.js  | 25 ++++++++++++++
 5 files changed, 51 insertions(+), 59 deletions(-)
 create mode 100644 src/components/shared/AncestorsBreadcrumb.js

diff --git a/src/components/contracts/ContractPage.js b/src/components/contracts/ContractPage.js
index c14c90ee..f7f46df4 100644
--- a/src/components/contracts/ContractPage.js
+++ b/src/components/contracts/ContractPage.js
@@ -36,6 +36,7 @@ import linksStyles from "../styles/links";
 import Table from "../shared/Table";
 import Filter from "../shared/Filter";
 import { filtersConfig, activeToday } from "./filters";
+import AncestorsBreadcrumbs from "../shared/AncestorsBreadcrumb";
 
 const styles = (theme) => ({
   ...linksStyles(theme),
@@ -176,13 +177,7 @@ const ContractPage = ({ match, location, t, history, currentUser }) => {
           <LocationOnIcon color="secondary" />
           &nbsp;
           <Typography className={classes.wrapIcon} color="secondary">
-            {orgUnit &&
-              orgUnit.ancestors.slice(1).map((a, index) => (
-                <span>
-                  <a href={"./index.html#/contracts?under_orgunit=" + a.id}>{a.name}</a>
-                  {index + 1 < orgUnit.ancestors.length - 1 && " > "}
-                </span>
-              ))}
+            <AncestorsBreadcrumbs orgUnit={orgUnit} linkHead={"./index.html#/contracts?under_orgunit="} />
           </Typography>
           {orgUnit && (
             <Button
diff --git a/src/components/dataentry/DataEntrySelectionPage.js b/src/components/dataentry/DataEntrySelectionPage.js
index 4ecfa0ba..7785ef80 100644
--- a/src/components/dataentry/DataEntrySelectionPage.js
+++ b/src/components/dataentry/DataEntrySelectionPage.js
@@ -15,6 +15,7 @@ import { buildFormData } from "./forms";
 import ContractsSection from "../contracts/ContractsSection";
 import DataEntriesSection from "./DataEntriesSection";
 import InvoiceLinksSection from "../invoices/InvoiceLinksSection";
+import AncestorsBreadcrumbs from "../shared/AncestorsBreadcrumb";
 
 const checkOverlaps = (contracts) => {
   for (let contract1 of contracts) {
@@ -179,33 +180,24 @@ const DataEntrySelectionPage = ({ history, match, periodFormat, dhis2 }) => {
       </div>
 
       <div style={{ fontFamily: "monospace" }}>
-        {orgUnit &&
-          orgUnit.ancestors.slice(1, orgUnit.ancestors.length - 1).map((ancestor, index) => {
-            return (
-              <span key={"ancestor" + index}>
-                <Link to={"/select/?q=&period=" + quarterPeriod + "&parent=" + ancestor.id}>{ancestor.name}</Link>
-                {index < orgUnit.ancestors.length - 3 && "  >  "}
-              </span>
-            );
-          })}
+        <AncestorsBreadcrumbs orgUnit={orgUnit} linkHead={`/select/?q=&period=${quarterPeriod}&parent=`} />
       </div>
       <div>
-          {orgUnit && (
-            <div>
-              <ContractsSection orgUnit={orgUnit} />
-              {linkedContracts && linkedContracts.length > 1 && (
-                <div>
-                  <LinkedContract period={quarterPeriod} orgUnit={orgUnit} linkedContracts={linkedContracts} />
-                </div>
-              )}
-            </div>
-          )}
-        </div>  
+        {orgUnit && (
+          <div>
+            <ContractsSection orgUnit={orgUnit} />
+            {linkedContracts && linkedContracts.length > 1 && (
+              <div>
+                <LinkedContract period={quarterPeriod} orgUnit={orgUnit} linkedContracts={linkedContracts} />
+              </div>
+            )}
+          </div>
+        )}
+      </div>
       <div style={{ display: "flex", gap: "20px", flexWrap: "wrap" }}>
         <DataEntriesSection dataEntryCode={match.params.dataEntryCode} period={match.params.period} orgUnit={orgUnit} />
         {orgUnit && <InvoiceLinksSection orgUnit={orgUnit} period={period} />}
       </div>
-      
 
       <div>
         {formData && (
diff --git a/src/components/invoices/InvoiceTreeView.js b/src/components/invoices/InvoiceTreeView.js
index 5fb7c22f..8a6dac5e 100644
--- a/src/components/invoices/InvoiceTreeView.js
+++ b/src/components/invoices/InvoiceTreeView.js
@@ -3,23 +3,19 @@ import OrgUnitTreePicker from "../shared/orgunit_picker/OrgUnitTreePicker";
 import PeriodPicker from "../shared/PeriodPicker";
 import { FormControl } from "@material-ui/core";
 import { anchorQueryParams, urlWith } from "../shared/tables/urlParams";
-import { Link } from "react-router-dom";
 import ContractsSection from "../contracts/ContractsSection";
 import DataEntriesSection from "../dataentry/DataEntriesSection";
 import InvoiceLinksSection from "./InvoiceLinksSection";
+import AncestorsBreadcrumbs from "../shared/AncestorsBreadcrumb";
 
 const LocationBreadCrumb = ({ orgUnit, period }) => {
   return (
     <div style={{ fontFamily: "monospace", marginLeft: "20px" }}>
-      {orgUnit &&
-        orgUnit.ancestors.slice(1, orgUnit.ancestors.length - 1).map((ancestor, index) => {
-          return (
-            <span key={"ancestor" + index}>
-              <Link to={"/select/?q=&period=" + period + "&ou=" + ancestor.id + "&mode=tree"}>{ancestor.name}</Link>
-              {index < orgUnit.ancestors.length - 3 && "  >  "}
-            </span>
-          );
-        })}
+      <AncestorsBreadcrumbs
+        orgUnit={orgUnit}
+        linkHead={`/select/?q=&period=" + ${period} + "&ou=`}
+        linkEnd={"&mode=tree"}
+      />
     </div>
   );
 };
@@ -29,18 +25,9 @@ const OrgUnitDetails = ({ orgUnit, searchPeriod, invoiceLinksProps }) => {
     <div>
       <h2>{orgUnit.name}</h2>
       <LocationBreadCrumb orgUnit={orgUnit} period={searchPeriod} />
-      <ContractsSection
-        orgUnit={orgUnit}
-      />
-      <InvoiceLinksSection
-        orgUnit={orgUnit}
-        period={searchPeriod}
-        invoiceLinksProps={invoiceLinksProps}
-      />
-      <DataEntriesSection
-        orgUnit={orgUnit}
-        period={searchPeriod}
-      />
+      <ContractsSection orgUnit={orgUnit} />
+      <InvoiceLinksSection orgUnit={orgUnit} period={searchPeriod} invoiceLinksProps={invoiceLinksProps} />
+      <DataEntriesSection orgUnit={orgUnit} period={searchPeriod} />
     </div>
   );
 };
diff --git a/src/components/invoices/OrgUnitInvoiceSelectionPage.js b/src/components/invoices/OrgUnitInvoiceSelectionPage.js
index 356fade1..e2c8c6e8 100644
--- a/src/components/invoices/OrgUnitInvoiceSelectionPage.js
+++ b/src/components/invoices/OrgUnitInvoiceSelectionPage.js
@@ -8,6 +8,7 @@ import { Paper, Grid } from "@material-ui/core";
 import PluginRegistry from "../core/PluginRegistry";
 import InvoiceLinksSection from "./InvoiceLinksSection";
 import DataEntriesSection from "../dataentry/DataEntriesSection";
+import AncestorsBreadcrumb from "../shared/AncestorsBreadcrumb";
 
 const OrgUnitInvoiceSelectionPage = ({ history, match, periodFormat, dhis2, currentUser, invoices }) => {
   const [error, setError] = useState(undefined);
@@ -74,15 +75,7 @@ const OrgUnitInvoiceSelectionPage = ({ history, match, periodFormat, dhis2, curr
       </div>
 
       <div style={{ fontFamily: "monospace" }}>
-        {orgUnit &&
-          orgUnit.ancestors.slice(1, orgUnit.ancestors.length - 1).map((ancestor, index) => {
-            return (
-              <span key={"ancestor" + index}>
-                <Link to={"/select/?q=&period=" + quarterPeriod + "&parent=" + ancestor.id}>{ancestor.name}</Link>
-                {index < orgUnit.ancestors.length - 3 && "  >  "}
-              </span>
-            );
-          })}
+        <AncestorsBreadcrumb orgUnit={orgUnit} linkHead={`select/?q=&period=" + ${quarterPeriod} + "&parent=`} />
       </div>
 
       <Grid container>
diff --git a/src/components/shared/AncestorsBreadcrumb.js b/src/components/shared/AncestorsBreadcrumb.js
new file mode 100644
index 00000000..628cbc69
--- /dev/null
+++ b/src/components/shared/AncestorsBreadcrumb.js
@@ -0,0 +1,25 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+const AncestorsBreadcrumbs = ({orgUnit, linkHead, linkEnd}) => {
+  // link head
+  // link end
+  // <a href={"./index.html#/contracts?under_orgunit=" + a.id}>{a.name}</a>
+  // <Link to={"/select/?q=&period=" + quarterPeriod + "&parent=" + ancestor.id}>{ancestor.name}</Link>
+
+  return (
+    <>
+      {orgUnit &&
+        orgUnit.ancestors.slice(1, orgUnit.ancestors.length - 1).map((ancestor, index) => {
+          return (
+            <span key={"ancestor" + index}>
+              <Link to={linkHead + ancestor.id + linkEnd}>{ancestor.name}</Link>
+              {index < orgUnit.ancestors.length - 3 && "  >  "}
+            </span>
+          );
+        })}
+    </>
+  );
+};
+
+export default AncestorsBreadcrumbs;

From 9e51cd004b1f4c1bd4caad63e3e98cdd01083b6d Mon Sep 17 00:00:00 2001
From: Madeline OLeary <madeline.w.oleary@gmail.com>
Date: Thu, 23 Jun 2022 15:48:14 +0200
Subject: [PATCH 49/55] NOT WORKING: filtering orgunits by user access

---
 .../invoices/InvoiceSelectionContainer.js     |  1 +
 src/components/invoices/InvoiceTreeView.js    |  9 ++-
 .../orgunit_picker/OrgUnitTreePicker.js       | 13 ++--
 .../orgunit_picker/orgUnitTreeBackend.js      | 65 ++++++++++++++-----
 4 files changed, 63 insertions(+), 25 deletions(-)

diff --git a/src/components/invoices/InvoiceSelectionContainer.js b/src/components/invoices/InvoiceSelectionContainer.js
index 95a394b0..41592064 100644
--- a/src/components/invoices/InvoiceSelectionContainer.js
+++ b/src/components/invoices/InvoiceSelectionContainer.js
@@ -150,6 +150,7 @@ const InvoiceSelectionContainer = (props) => {
             classes={classes}
             onPeriodChange={onPeriodChange}
             periodFormat={periodFormat}
+            currentUser={currentUser}
           />
         )}
         {viewType === "table" && (
diff --git a/src/components/invoices/InvoiceTreeView.js b/src/components/invoices/InvoiceTreeView.js
index 8a6dac5e..3f2d28f5 100644
--- a/src/components/invoices/InvoiceTreeView.js
+++ b/src/components/invoices/InvoiceTreeView.js
@@ -32,7 +32,7 @@ const OrgUnitDetails = ({ orgUnit, searchPeriod, invoiceLinksProps }) => {
   );
 };
 
-const InvoiceTreeView = ({ invoiceLinksProps, searchPeriod, classes, onPeriodChange, periodFormat }) => {
+const InvoiceTreeView = ({ invoiceLinksProps, searchPeriod, classes, onPeriodChange, periodFormat, currentUser }) => {
   const queryParams = anchorQueryParams();
   const ou = queryParams.get("ou");
 
@@ -57,7 +57,12 @@ const InvoiceTreeView = ({ invoiceLinksProps, searchPeriod, classes, onPeriodCha
       <br />
       <div style={{ display: "flex" }}>
         <div style={{ margin: "10px", width: "500px" }}>
-          <OrgUnitTreePicker onChange={onOrgUnitChange} initialSelection={ou} period={searchPeriod} />
+          <OrgUnitTreePicker
+            onChange={onOrgUnitChange}
+            initialSelection={ou}
+            period={searchPeriod}
+            user={currentUser}
+          />
         </div>
         {selectedOrgUnits && selectedOrgUnits[0] && (
           <OrgUnitDetails
diff --git a/src/components/shared/orgunit_picker/OrgUnitTreePicker.js b/src/components/shared/orgunit_picker/OrgUnitTreePicker.js
index 5185c326..3d8d5f83 100644
--- a/src/components/shared/orgunit_picker/OrgUnitTreePicker.js
+++ b/src/components/shared/orgunit_picker/OrgUnitTreePicker.js
@@ -1,8 +1,9 @@
 import React, { useState, useEffect } from "react";
 import { TreeViewWithSearch } from "bluesquare-components";
-import { setPeriod, treeProps } from "./orgUnitTreeBackend";
+import { setPeriod, treeProps, setUser } from "./orgUnitTreeBackend";
 import ContractSummary from "../contracts/ContractSummary";
 import { useQuery, useMutation, useQueryClient } from "react-query";
+import { useSelector } from "react-redux";
 
 function sleep(ms) {
   return new Promise((resolve) => setTimeout(resolve, ms));
@@ -46,12 +47,14 @@ const makeDropDownText = (orgUnit) => {
   );
 };
 
-const OrgUnitTreePicker = ({ initialSelection, onChange, period }) => {
+const OrgUnitTreePicker = ({ initialSelection, onChange, period, user }) => {
   setPeriod(period);
+  const currentUser = useSelector((state) => state.currentUser.profile);
+  setUser(currentUser);
 
   const [selectedOrgUnits, setSelectedOrgUnits] = useState(initialSelection);
   const onUpdate = (orgUnitIds, parentsData, orgUnits) => {
-    console.log("onUpdate", orgUnitIds, parentsData, orgUnits)
+    console.log("onUpdate", orgUnitIds, parentsData, orgUnits);
     if (orgUnits) {
       setSelectedOrgUnits(orgUnits);
     }
@@ -61,11 +64,11 @@ const OrgUnitTreePicker = ({ initialSelection, onChange, period }) => {
   };
   const fetchSelectionQuery = useQuery("fetchSelectionQuery", async () => {
     if (initialSelection) {
-      const rootData = await treeProps.getOrgUnitById(initialSelection);
+      const rootData = await treeProps.getOrgUnitById(initialSelection, currentUser);
       if (rootData[0] && rootData[0].ancestors.length) {
         const loadedAncestors = [];
         for (let ancestor of rootData[0].ancestors) {
-          let loadedAncestor = await treeProps.getOrgUnitById(ancestor.id);
+          let loadedAncestor = await treeProps.getOrgUnitById(ancestor.id, currentUser);
           loadedAncestors.push(loadedAncestor[0]);
         }
         rootData[0].ancestors = loadedAncestors;
diff --git a/src/components/shared/orgunit_picker/orgUnitTreeBackend.js b/src/components/shared/orgunit_picker/orgUnitTreeBackend.js
index 468c5f0d..ef801010 100644
--- a/src/components/shared/orgunit_picker/orgUnitTreeBackend.js
+++ b/src/components/shared/orgunit_picker/orgUnitTreeBackend.js
@@ -1,13 +1,18 @@
-import React from "react"
+import React from "react";
 import { getInstance } from "d2/lib/d2";
 import PluginRegistry from "../../core/PluginRegistry";
 
-let currentPeriod = undefined;
-
+let currentPeriod;
 export const setPeriod = (argPeriod) => {
   currentPeriod = argPeriod;
 };
 
+let user;
+export const setUser = (argUser) => {
+  console.log(argUser);
+  user = argUser;
+};
+
 const loadedOrgUnitsById = {};
 let contractsByOrgUnitId = {};
 let contractsByLevelUid = {};
@@ -30,13 +35,7 @@ const getRootData = async (id, type = "source") => {
     }
   }
 
-  const d2 = await getInstance();
-  const api = await d2.Api.getApi();
-  const resp = await api.get("organisationUnits", {
-    filter: "level:eq:1",
-    fields: defaultOrgUnitFields,
-    paging: false,
-  });
+  const resp = await getFilteredOrgUnits("level:eq:3");
 
   return withHasChildren(resp.organisationUnits);
 };
@@ -68,35 +67,62 @@ const getChildrenData = async (id) => {
   return withHasChildren(resp.organisationUnits);
 };
 
-const getOrgUnitById = async (id) => {
+const getOrgUnitById = async (id, currentUser) => {
   const d2 = await getInstance();
   const api = await d2.Api.getApi();
+  let userOrgUnitsFilter;
+  const orgUnits = currentUser.dataViewOrganisationUnits;
+  if (orgUnits && orgUnits.length === 1) {
+    userOrgUnitsFilter = "&path:like:" + orgUnits[0].id;
+  } else if (orgUnits && orgUnits.length > 0) {
+    userOrgUnitsFilter = "&filter=ancestors.id:in:[" + orgUnits.map((ou) => ou.id).join(",") + "]";
+  }
   const resp = await api.get("organisationUnits", {
-    filter: "id:eq:" + id,
+    filter: "id:eq:" + id + userOrgUnitsFilter,
     fields: defaultOrgUnitFields,
     paging: false,
   });
   return withHasChildren(resp.organisationUnits);
 };
 
-const request = async (value, count, source, version) => {
+const getFilteredOrgUnits = async (filterStart) => {
   const d2 = await getInstance();
   const api = await d2.Api.getApi();
+  
+  let userOrgUnitsFilter;
+  const orgUnits = user.dataViewOrganisationUnits;
+  if (orgUnits && orgUnits.length === 1) {
+    userOrgUnitsFilter = ["path:like:" + orgUnits[0].id];
+  } else if (orgUnits && orgUnits.length > 0) {
+    userOrgUnitsFilter = ["ancestors.id:in:[" + orgUnits.map((ou) => ou.id).join(",") + "]"];
+  }
+  debugger;
   const resp = await api.get("organisationUnits", {
-    filter: "name:ilike:" + value,
+    filter: userOrgUnitsFilter.concat([filterStart]),
     fields: defaultOrgUnitFields,
+    paging: false,
   });
+  return resp;
+};
+
+const request = async (value, count, source, version) => {
+  const resp = await getFilteredOrgUnits("name:ilike:" + value);
 
   return withHasChildren(resp.organisationUnits);
 };
 
 const label = (data) => {
-  const activeContractsDecorator = data.activeContracts && data.activeContracts.length > 0
+  const activeContractsDecorator = data.activeContracts && data.activeContracts.length > 0;
   const contractsUnder = contractsByLevelUid[data.id] ? " (" + contractsByLevelUid[data.id] + ")" : "";
   if (activeContractsDecorator) {
-    return <span><b>{data.name}</b>{contractsUnder}</span>
+    return (
+      <span>
+        <b>{data.name}</b>
+        {contractsUnder}
+      </span>
+    );
   }
-  return  data.name + contractsUnder  
+  return data.name + contractsUnder;
 };
 
 const search = (input1, input2, type) => {
@@ -105,7 +131,10 @@ const search = (input1, input2, type) => {
 };
 
 const parseNodeIds = (orgUnit) => {
-  const parsed = orgUnit.ancestors.map((a) => [a.id, a]).concat([[orgUnit.id, orgUnit]]);
+  const parsed = orgUnit.ancestors
+    .slice(2)
+    .map((a) => [a.id, a])
+    .concat([[orgUnit.id, orgUnit]]);
   return new Map(parsed);
 };
 

From f3b2a686bdf0829966e85859bea1a4130c2e792b Mon Sep 17 00:00:00 2001
From: Madeline OLeary <madeline.w.oleary@gmail.com>
Date: Thu, 23 Jun 2022 16:13:22 +0200
Subject: [PATCH 50/55] NOT WORKING: playing with levels for users with
 restricted orgunit access

---
 .../shared/orgunit_picker/orgUnitTreeBackend.js      | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/shared/orgunit_picker/orgUnitTreeBackend.js b/src/components/shared/orgunit_picker/orgUnitTreeBackend.js
index ef801010..0bed586b 100644
--- a/src/components/shared/orgunit_picker/orgUnitTreeBackend.js
+++ b/src/components/shared/orgunit_picker/orgUnitTreeBackend.js
@@ -8,9 +8,15 @@ export const setPeriod = (argPeriod) => {
 };
 
 let user;
+let topLevel;
 export const setUser = (argUser) => {
-  console.log(argUser);
   user = argUser;
+  if (user) {
+    const levels = user.dataViewOrganisationUnits.map((o) => {
+      return o.ancestors ? o.ancestors.length : 0;
+    });
+    topLevel = Math.min(...levels) + 1;
+  }
 };
 
 const loadedOrgUnitsById = {};
@@ -35,7 +41,7 @@ const getRootData = async (id, type = "source") => {
     }
   }
 
-  const resp = await getFilteredOrgUnits("level:eq:3");
+  const resp = await getFilteredOrgUnits("level:eq:" + (topLevel + 1));
 
   return withHasChildren(resp.organisationUnits);
 };
@@ -132,7 +138,7 @@ const search = (input1, input2, type) => {
 
 const parseNodeIds = (orgUnit) => {
   const parsed = orgUnit.ancestors
-    .slice(2)
+    .slice(topLevel - 1)
     .map((a) => [a.id, a])
     .concat([[orgUnit.id, orgUnit]]);
   return new Map(parsed);

From ab42e7c48d30acbc5ec95abd8b049d3201e1d82c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?St=C3=A9phan=20Mestach?= <smestach@bluesquare.org>
Date: Fri, 24 Jun 2022 08:53:06 +0200
Subject: [PATCH 51/55] Make tree work with limited user access

---
 src/components/invoices/InvoiceTreeView.js    |  8 ++--
 .../orgunit_picker/OrgUnitTreePicker.js       | 27 +-------------
 .../orgunit_picker/orgUnitTreeBackend.js      | 37 +++++++++++++------
 3 files changed, 32 insertions(+), 40 deletions(-)

diff --git a/src/components/invoices/InvoiceTreeView.js b/src/components/invoices/InvoiceTreeView.js
index 3f2d28f5..2abb96f0 100644
--- a/src/components/invoices/InvoiceTreeView.js
+++ b/src/components/invoices/InvoiceTreeView.js
@@ -25,9 +25,11 @@ const OrgUnitDetails = ({ orgUnit, searchPeriod, invoiceLinksProps }) => {
     <div>
       <h2>{orgUnit.name}</h2>
       <LocationBreadCrumb orgUnit={orgUnit} period={searchPeriod} />
-      <ContractsSection orgUnit={orgUnit} />
-      <InvoiceLinksSection orgUnit={orgUnit} period={searchPeriod} invoiceLinksProps={invoiceLinksProps} />
-      <DataEntriesSection orgUnit={orgUnit} period={searchPeriod} />
+      <div style={{ marginLeft: "20px" }}>
+        <ContractsSection orgUnit={orgUnit} />
+        <InvoiceLinksSection orgUnit={orgUnit} period={searchPeriod} invoiceLinksProps={invoiceLinksProps} />
+        <DataEntriesSection orgUnit={orgUnit} period={searchPeriod} />
+      </div>
     </div>
   );
 };
diff --git a/src/components/shared/orgunit_picker/OrgUnitTreePicker.js b/src/components/shared/orgunit_picker/OrgUnitTreePicker.js
index 3d8d5f83..d0855433 100644
--- a/src/components/shared/orgunit_picker/OrgUnitTreePicker.js
+++ b/src/components/shared/orgunit_picker/OrgUnitTreePicker.js
@@ -1,31 +1,11 @@
 import React, { useState, useEffect } from "react";
 import { TreeViewWithSearch } from "bluesquare-components";
-import { setPeriod, treeProps, setUser } from "./orgUnitTreeBackend";
+import { setPeriod, treeProps, setUser, formatInitialSelectedParents } from "./orgUnitTreeBackend";
 import ContractSummary from "../contracts/ContractSummary";
 import { useQuery, useMutation, useQueryClient } from "react-query";
 import { useSelector } from "react-redux";
 
-function sleep(ms) {
-  return new Promise((resolve) => setTimeout(resolve, ms));
-}
 
-const formatInitialSelectedIds = (selection) => {
-  if (!selection) return [];
-  if (!Array.isArray(selection)) return [selection.id];
-  return selection.map((ou) => ou.id);
-};
-
-const formatInitialSelectedParents = (selection) => {
-  const selectedParents = new Map();
-  const parentsMap = new Map();
-  selectedParents.set(selection.id, parentsMap);
-  for (const ancestor of selection.ancestors) {
-    parentsMap.set(ancestor.id, ancestor);
-  }
-  // if not there, a parent is missing
-  parentsMap.set(selection.id, selection);
-  return selectedParents;
-};
 
 const makeDropDownText = (orgUnit) => {
   return (
@@ -73,7 +53,7 @@ const OrgUnitTreePicker = ({ initialSelection, onChange, period, user }) => {
         }
         rootData[0].ancestors = loadedAncestors;
       }
-      let parents;
+      let parents = new Map();
       if (rootData[0] && rootData[0].ancestors.length) {
         parents = formatInitialSelectedParents(rootData[0]);
       }
@@ -94,9 +74,6 @@ const OrgUnitTreePicker = ({ initialSelection, onChange, period, user }) => {
     }
   }, [preselected]);
 
-  if (preselected || preexpanded) {
-    console.log("preselected", preselected, " preexpanded", preexpanded);
-  }
   if (initialSelection && preselected == undefined) {
     return <span>Loading...</span>;
   }
diff --git a/src/components/shared/orgunit_picker/orgUnitTreeBackend.js b/src/components/shared/orgunit_picker/orgUnitTreeBackend.js
index 0bed586b..b77b99cd 100644
--- a/src/components/shared/orgunit_picker/orgUnitTreeBackend.js
+++ b/src/components/shared/orgunit_picker/orgUnitTreeBackend.js
@@ -25,6 +25,18 @@ let contractsByLevelUid = {};
 const defaultOrgUnitFields =
   "id,name,ancestors[id,name],children[id,name,ancestors[id,name],children[id,name,ancestors[id,name],children]]";
 
+export const formatInitialSelectedParents = (selection) => {
+  const selectedParents = new Map();
+  const parentsMap = new Map();
+  selectedParents.set(selection.id, parentsMap);
+  for (const ancestor of selection.ancestors.slice(topLevel - 1)) {
+    parentsMap.set(ancestor.id, ancestor);
+  }
+  // if not there, a parent is missing
+  parentsMap.set(selection.id, selection);
+  return selectedParents;
+};
+
 const getRootData = async (id, type = "source") => {
   if (Object.keys(contractsByOrgUnitId).length === 0) {
     const contractService = PluginRegistry.extension("contracts.service");
@@ -41,7 +53,14 @@ const getRootData = async (id, type = "source") => {
     }
   }
 
-  const resp = await getFilteredOrgUnits("level:eq:" + (topLevel + 1));
+  const d2 = await getInstance();
+  const api = await d2.Api.getApi();
+
+  const resp = await api.get("organisationUnits", {
+    filter: "id:in:[" + user.dataViewOrganisationUnits.map((ou) => ou.id).join(",") + "]",
+    fields: defaultOrgUnitFields,
+    paging: false,
+  });
 
   return withHasChildren(resp.organisationUnits);
 };
@@ -73,18 +92,12 @@ const getChildrenData = async (id) => {
   return withHasChildren(resp.organisationUnits);
 };
 
-const getOrgUnitById = async (id, currentUser) => {
+const getOrgUnitById = async (id) => {
   const d2 = await getInstance();
   const api = await d2.Api.getApi();
-  let userOrgUnitsFilter;
-  const orgUnits = currentUser.dataViewOrganisationUnits;
-  if (orgUnits && orgUnits.length === 1) {
-    userOrgUnitsFilter = "&path:like:" + orgUnits[0].id;
-  } else if (orgUnits && orgUnits.length > 0) {
-    userOrgUnitsFilter = "&filter=ancestors.id:in:[" + orgUnits.map((ou) => ou.id).join(",") + "]";
-  }
+  
   const resp = await api.get("organisationUnits", {
-    filter: "id:eq:" + id + userOrgUnitsFilter,
+    filter: "id:eq:" + id ,
     fields: defaultOrgUnitFields,
     paging: false,
   });
@@ -94,7 +107,7 @@ const getOrgUnitById = async (id, currentUser) => {
 const getFilteredOrgUnits = async (filterStart) => {
   const d2 = await getInstance();
   const api = await d2.Api.getApi();
-  
+
   let userOrgUnitsFilter;
   const orgUnits = user.dataViewOrganisationUnits;
   if (orgUnits && orgUnits.length === 1) {
@@ -102,7 +115,7 @@ const getFilteredOrgUnits = async (filterStart) => {
   } else if (orgUnits && orgUnits.length > 0) {
     userOrgUnitsFilter = ["ancestors.id:in:[" + orgUnits.map((ou) => ou.id).join(",") + "]"];
   }
-  debugger;
+  
   const resp = await api.get("organisationUnits", {
     filter: userOrgUnitsFilter.concat([filterStart]),
     fields: defaultOrgUnitFields,

From d652b408ac05e43c4e6cf293e38c1a51e10b5eff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?St=C3=A9phan=20Mestach?= <smestach@bluesquare.org>
Date: Mon, 27 Jun 2022 09:07:11 +0200
Subject: [PATCH 52/55] Fix bug when no ancestors at all

---
 src/components/shared/AncestorsBreadcrumb.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/shared/AncestorsBreadcrumb.js b/src/components/shared/AncestorsBreadcrumb.js
index 628cbc69..d72e48cf 100644
--- a/src/components/shared/AncestorsBreadcrumb.js
+++ b/src/components/shared/AncestorsBreadcrumb.js
@@ -9,7 +9,7 @@ const AncestorsBreadcrumbs = ({orgUnit, linkHead, linkEnd}) => {
 
   return (
     <>
-      {orgUnit &&
+      {orgUnit && orgUnit.ancestors && 
         orgUnit.ancestors.slice(1, orgUnit.ancestors.length - 1).map((ancestor, index) => {
           return (
             <span key={"ancestor" + index}>

From cd9d4415e28d6f80277d81ca68bfd600e6331f87 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?St=C3=A9phan=20Mestach?= <smestach@bluesquare.org>
Date: Wed, 29 Jun 2022 11:27:58 +0200
Subject: [PATCH 53/55] Replace linkHead linkEnd with a link function

---
 src/components/contracts/ContractPage.js               | 2 +-
 src/components/dataentry/DataEntrySelectionPage.js     | 2 +-
 src/components/invoices/InvoiceTreeView.js             | 3 +--
 src/components/invoices/OrgUnitInvoiceSelectionPage.js | 2 +-
 src/components/shared/AncestorsBreadcrumb.js           | 9 ++-------
 5 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/src/components/contracts/ContractPage.js b/src/components/contracts/ContractPage.js
index f7f46df4..606cb854 100644
--- a/src/components/contracts/ContractPage.js
+++ b/src/components/contracts/ContractPage.js
@@ -177,7 +177,7 @@ const ContractPage = ({ match, location, t, history, currentUser }) => {
           <LocationOnIcon color="secondary" />
           &nbsp;
           <Typography className={classes.wrapIcon} color="secondary">
-            <AncestorsBreadcrumbs orgUnit={orgUnit} linkHead={"./index.html#/contracts?under_orgunit="} />
+            <AncestorsBreadcrumbs orgUnit={orgUnit} link={(ancestor) => `/contracts?under_orgunit=${ancestor.id}`} />
           </Typography>
           {orgUnit && (
             <Button
diff --git a/src/components/dataentry/DataEntrySelectionPage.js b/src/components/dataentry/DataEntrySelectionPage.js
index 7785ef80..acb1637c 100644
--- a/src/components/dataentry/DataEntrySelectionPage.js
+++ b/src/components/dataentry/DataEntrySelectionPage.js
@@ -180,7 +180,7 @@ const DataEntrySelectionPage = ({ history, match, periodFormat, dhis2 }) => {
       </div>
 
       <div style={{ fontFamily: "monospace" }}>
-        <AncestorsBreadcrumbs orgUnit={orgUnit} linkHead={`/select/?q=&period=${quarterPeriod}&parent=`} />
+        <AncestorsBreadcrumbs orgUnit={orgUnit} link={(ancestor) => `/select/?q=&period=${quarterPeriod}&parent=${ancestor.id}`} />
       </div>
       <div>
         {orgUnit && (
diff --git a/src/components/invoices/InvoiceTreeView.js b/src/components/invoices/InvoiceTreeView.js
index 2abb96f0..081dc7c2 100644
--- a/src/components/invoices/InvoiceTreeView.js
+++ b/src/components/invoices/InvoiceTreeView.js
@@ -13,8 +13,7 @@ const LocationBreadCrumb = ({ orgUnit, period }) => {
     <div style={{ fontFamily: "monospace", marginLeft: "20px" }}>
       <AncestorsBreadcrumbs
         orgUnit={orgUnit}
-        linkHead={`/select/?q=&period=" + ${period} + "&ou=`}
-        linkEnd={"&mode=tree"}
+        link={(ancestor) => `/select/?q=&period=${period}&ou=${ancestor.id}&mode=tree`}
       />
     </div>
   );
diff --git a/src/components/invoices/OrgUnitInvoiceSelectionPage.js b/src/components/invoices/OrgUnitInvoiceSelectionPage.js
index e2c8c6e8..ace45357 100644
--- a/src/components/invoices/OrgUnitInvoiceSelectionPage.js
+++ b/src/components/invoices/OrgUnitInvoiceSelectionPage.js
@@ -75,7 +75,7 @@ const OrgUnitInvoiceSelectionPage = ({ history, match, periodFormat, dhis2, curr
       </div>
 
       <div style={{ fontFamily: "monospace" }}>
-        <AncestorsBreadcrumb orgUnit={orgUnit} linkHead={`select/?q=&period=" + ${quarterPeriod} + "&parent=`} />
+        <AncestorsBreadcrumb orgUnit={orgUnit} link={a => `/select/?q=&period=${quarterPeriod}&parent=${a.id}`} />
       </div>
 
       <Grid container>
diff --git a/src/components/shared/AncestorsBreadcrumb.js b/src/components/shared/AncestorsBreadcrumb.js
index d72e48cf..65cc2f9a 100644
--- a/src/components/shared/AncestorsBreadcrumb.js
+++ b/src/components/shared/AncestorsBreadcrumb.js
@@ -1,19 +1,14 @@
 import React from "react";
 import { Link } from "react-router-dom";
 
-const AncestorsBreadcrumbs = ({orgUnit, linkHead, linkEnd}) => {
-  // link head
-  // link end
-  // <a href={"./index.html#/contracts?under_orgunit=" + a.id}>{a.name}</a>
-  // <Link to={"/select/?q=&period=" + quarterPeriod + "&parent=" + ancestor.id}>{ancestor.name}</Link>
-
+const AncestorsBreadcrumbs = ({orgUnit, link}) => {
   return (
     <>
       {orgUnit && orgUnit.ancestors && 
         orgUnit.ancestors.slice(1, orgUnit.ancestors.length - 1).map((ancestor, index) => {
           return (
             <span key={"ancestor" + index}>
-              <Link to={linkHead + ancestor.id + linkEnd}>{ancestor.name}</Link>
+              <Link to={link(ancestor)}>{ancestor.name}</Link>
               {index < orgUnit.ancestors.length - 3 && "  >  "}
             </span>
           );

From 79dd683db9acc8c706d6f78bb6dba5a9a0a50dab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?St=C3=A9phan=20Mestach?= <smestach@bluesquare.org>
Date: Wed, 29 Jun 2022 12:31:18 +0200
Subject: [PATCH 54/55] Refetch on period change

---
 .../orgunit_picker/OrgUnitTreePicker.js       |  4 ++--
 .../orgunit_picker/orgUnitTreeBackend.js      | 22 ++++++++++++-------
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/components/shared/orgunit_picker/OrgUnitTreePicker.js b/src/components/shared/orgunit_picker/OrgUnitTreePicker.js
index d0855433..1cb88474 100644
--- a/src/components/shared/orgunit_picker/OrgUnitTreePicker.js
+++ b/src/components/shared/orgunit_picker/OrgUnitTreePicker.js
@@ -74,11 +74,11 @@ const OrgUnitTreePicker = ({ initialSelection, onChange, period, user }) => {
     }
   }, [preselected]);
 
-  if (initialSelection && preselected == undefined) {
+  if (initialSelection && fetchSelectionQuery.isFetching) {
     return <span>Loading...</span>;
   }
   return (
-    <div>
+    <div key={period}>
       {fetchSelectionQuery.status === "loading" ? (
         <span>Loading...</span>
       ) : fetchSelectionQuery.status === "error" ? (
diff --git a/src/components/shared/orgunit_picker/orgUnitTreeBackend.js b/src/components/shared/orgunit_picker/orgUnitTreeBackend.js
index b77b99cd..c8e8320e 100644
--- a/src/components/shared/orgunit_picker/orgUnitTreeBackend.js
+++ b/src/components/shared/orgunit_picker/orgUnitTreeBackend.js
@@ -2,13 +2,22 @@ import React from "react";
 import { getInstance } from "d2/lib/d2";
 import PluginRegistry from "../../core/PluginRegistry";
 
+let loadedOrgUnitsById = {};
+let contractsByOrgUnitId = {};
+let contractsByLevelUid = {};
 let currentPeriod;
+let user;
+let topLevel;
+
 export const setPeriod = (argPeriod) => {
+  if (argPeriod !== currentPeriod) {
+    loadedOrgUnitsById = {};
+    contractsByOrgUnitId = {};
+    contractsByLevelUid = {};
+  }
   currentPeriod = argPeriod;
 };
 
-let user;
-let topLevel;
 export const setUser = (argUser) => {
   user = argUser;
   if (user) {
@@ -19,9 +28,6 @@ export const setUser = (argUser) => {
   }
 };
 
-const loadedOrgUnitsById = {};
-let contractsByOrgUnitId = {};
-let contractsByLevelUid = {};
 const defaultOrgUnitFields =
   "id,name,ancestors[id,name],children[id,name,ancestors[id,name],children[id,name,ancestors[id,name],children]]";
 
@@ -95,9 +101,9 @@ const getChildrenData = async (id) => {
 const getOrgUnitById = async (id) => {
   const d2 = await getInstance();
   const api = await d2.Api.getApi();
-  
+
   const resp = await api.get("organisationUnits", {
-    filter: "id:eq:" + id ,
+    filter: "id:eq:" + id,
     fields: defaultOrgUnitFields,
     paging: false,
   });
@@ -115,7 +121,7 @@ const getFilteredOrgUnits = async (filterStart) => {
   } else if (orgUnits && orgUnits.length > 0) {
     userOrgUnitsFilter = ["ancestors.id:in:[" + orgUnits.map((ou) => ou.id).join(",") + "]"];
   }
-  
+
   const resp = await api.get("organisationUnits", {
     filter: userOrgUnitsFilter.concat([filterStart]),
     fields: defaultOrgUnitFields,

From 27d09a6bb737899e66d48f82698467570653102f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?St=C3=A9phan=20Mestach?= <smestach@bluesquare.org>
Date: Wed, 29 Jun 2022 12:31:57 +0200
Subject: [PATCH 55/55] Upgrade caniuse

---
 package.json |  6 +++---
 yarn.lock    | 18 +++++++++---------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/package.json b/package.json
index 5f11ac45..f0a09c4b 100644
--- a/package.json
+++ b/package.json
@@ -71,8 +71,8 @@
     "react-router-dom": "^4.3.1",
     "react-scripts": "3.4.4",
     "react-select": "^3.1.0",
+    "react-table": "7.8.0",
     "react-test-renderer": "^16.6.3",
-    "react-table":"7.8.0",
     "recharts": "1.8.5",
     "rollup": "^2.10.0"
   },
@@ -80,16 +80,16 @@
     "dist"
   ],
   "dependencies": {
-    "react-intl": "^5.10.16",
     "@material-ui/core": "^4.11.4",
     "@material-ui/icons": "^4.2.1",
     "@material-ui/lab": "^4.0.0-alpha.48",
     "@material-ui/pickers": "^3.2.10",
-    "bluesquare-components": "https://github.com/BLSQ/bluesquare-components",    
+    "bluesquare-components": "https://github.com/BLSQ/bluesquare-components",
     "history": "^5.0.0",
     "moment": "^2.27.0",
     "notistack": "^0.9.17",
     "qs": "^6.9.4",
+    "react-intl": "^5.10.16",
     "react-query": "^3.34.12",
     "react-redux": "^7.2.1",
     "react-router-redux": "^4.0.8",
diff --git a/yarn.lock b/yarn.lock
index 21aba406..6752dd28 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3607,15 +3607,10 @@ caniuse-api@^3.0.0:
     lodash.memoize "^4.1.2"
     lodash.uniq "^4.5.0"
 
-caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001035, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001165:
-  version "1.0.30001170"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001170.tgz#0088bfecc6a14694969e391cc29d7eb6362ca6a7"
-  integrity sha512-Dd4d/+0tsK0UNLrZs3CvNukqalnVTRrxb5mcQm8rHL49t7V5ZaTygwXkrq+FB+dVDf++4ri8eJnFEJAB8332PA==
-
-caniuse-lite@^1.0.30001332:
-  version "1.0.30001338"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001338.tgz#b5dd7a7941a51a16480bdf6ff82bded1628eec0d"
-  integrity sha512-1gLHWyfVoRDsHieO+CaeYe7jSo/MT7D7lhaXUiwwbuR5BwQxORs0f1tAwUSQr3YbxRXJvxHM/PA5FfPQRnsPeQ==
+caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001035, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001165, caniuse-lite@^1.0.30001332:
+  version "1.0.30001361"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001361.tgz"
+  integrity sha512-ybhCrjNtkFji1/Wto6SSJKkWk6kZgVQsDq5QI83SafsF6FXv2JB4df9eEdH6g8sdGgqTXrFLjAxqBGgYoU3azQ==
 
 capture-exit@^2.0.0:
   version "2.0.0"
@@ -10579,6 +10574,11 @@ react-sortable-tree@^2.7.1:
     react-lifecycles-compat "^3.0.4"
     react-virtualized "^9.21.2"
 
+react-table@7.8.0:
+  version "7.8.0"
+  resolved "https://registry.yarnpkg.com/react-table/-/react-table-7.8.0.tgz#07858c01c1718c09f7f1aed7034fcfd7bda907d2"
+  integrity sha512-hNaz4ygkZO4bESeFfnfOft73iBUj8K5oKi1EcSHPAibEydfsX2MyU6Z8KCr3mv3C9Kqqh71U+DhZkFvibbnPbA==
+
 react-test-renderer@^16.6.3:
   version "16.14.0"
   resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.14.0.tgz#e98360087348e260c56d4fe2315e970480c228ae"