Merge pull request #18 from dataesr/init-finance-dashboard

feat(finance): init finances folder

client/src/pages/finance-university/components/filters/index.tsx

@@ -0,0 +1,78 @@
+import { Button, Modal, ModalContent, ModalTitle } from '@dataesr/dsfr-plus';
+import { useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
+
+import filtersConfig from './filters-config.json';
+
+type ItemProps = {
+  uai: string,
+  idPaysage: string,
+  libelle: string,
+}[]
+
+export default function Filters() {
+  const [filterId, setFilterId] = useState('');
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [title, setTitle] = useState();
+  const [values, setValues] = useState<ItemProps>([]);
+
+  const openModal = (key: string) => {
+    setTitle(filtersConfig[key].title);
+    setValues(filtersConfig[key].values);
+    setFilterId(key);
+    setIsOpen(true);
+  }
+
+  const selectItem = (item: { id: string }) => {
+    setSearchParams({ [filterId]: item.id });
+    setIsOpen(false);
+  };
+
+  return (
+    <>
+      {
+        [...searchParams].map((param) => {
+          const [key, value] = param;
+          const filter = filtersConfig[key];
+          if (!filter) return null;
+          return (
+            <Button
+              className="fr-mr-1w"
+              color='purple-glycine'
+              icon={filter.icon}
+              key={key}
+              onClick={() => openModal(key)}
+              size='sm'
+            >
+              {`${filter.label} : ${filter.values.find((item) => item.uai === value)?.libelle ?? 'inconnu'}`}
+            </Button>
+          );
+        })
+      }
+
+      <Modal isOpen={isOpen} hide={() => setIsOpen(false)} size="lg">
+        <ModalTitle>{title}</ModalTitle>
+        <ModalContent>
+          <select
+            className="fr-select"
+            id="select"
+            name="select"
+            onChange={(e) => selectItem({ id: e.target.value })}
+          >
+            {
+              values.map((value) => (
+                <option
+                  key={value.uai}
+                  value={value.uai}
+                >
+                  {value.libelle}
+                </option>
+              ))
+            }
+          </select>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+}

client/src/pages/finance-university/components/side-menu.tsx

@@ -0,0 +1,48 @@
+import { SideMenu, Link, Container, Row, Col } from '@dataesr/dsfr-plus';
+import { Outlet, useLocation } from 'react-router-dom';
+import './styles.scss';
+
+export default function CustomSideMenu() {
+  const { pathname } = useLocation();
+
+  if (!pathname) return null;
+
+  const is = (str: string): boolean => pathname?.startsWith(str)
+  return (
+    <Container as="nav">
+      <Row>
+        <Col xs={12} md={3} className="fr-pl-2w">
+          <SideMenu title="" sticky fullHeight className="padded-sidemenu">
+            <Link
+              current={is('/finance-universite/grands-indicateurs')}
+              href={'/finance-universite/grands-indicateurs'}
+            >
+              Grands indicateurs
+            </Link>
+            <Link
+              current={is('/finance-universite/recettes-propres')}
+              href={'/finance-universite/recettes-propres'}
+            >
+              Recettes Propres
+            </Link>
+            <Link
+              current={is('/finance-universite/masse-salariale')}
+              href={'/finance-universite/masse-salariale'}
+            >
+              Masse salariale
+            </Link>
+            <Link
+              current={is('/finance-universite/consommation')}
+              href={'/finance-universite/consommation'}
+            >
+              Consommation
+            </Link>
+          </SideMenu>
+        </Col>
+        <Col xs={12} md={8} className="fr-pt-6w">
+          <Outlet />
+        </Col>
+      </Row>
+    </Container>
+  )
+}

client/src/pages/finance-university/components/styles.scss

@@ -0,0 +1,9 @@
+.padded-sidemenu {
+  .fr-sidemenu__inner {
+    padding-top: 3rem;
+  }
+}
+
+.text-right {
+  text-align: right;
+}

client/src/pages/finance-university/index.tsx

@@ -0,0 +1,28 @@
+import { Container, Row, Col } from "@dataesr/dsfr-plus";
+import { useSearchParams } from "react-router-dom";
+import { useEffect } from "react";
+import CustomSideMenu from "./components/side-menu";
+import Filters from "./components/filters";
+
+export default function Main() {
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  useEffect(() => {
+    if (!searchParams.get('structure_code')) {
+      setSearchParams({ structure_code: '0752744A' });
+    }
+  }, [searchParams, setSearchParams]);
+
+  return (
+    <main>
+      <Container>
+        <Row>
+          <Col className="fr-ml-1w">
+            <Filters />
+          </Col>
+        </Row>
+      </Container>
+      <CustomSideMenu />
+    </main>
+  );
+}

client/src/pages/finance-university/routes.tsx

@@ -0,0 +1,16 @@
+import { Routes, Route } from 'react-router-dom';
+
+import Main from './index.tsx';
+
+export default function FinanceUniversityRoutes() {
+  return (
+    <Routes>
+      <Route path="/" element={<Main />}>
+        <Route path="/grands-indicateurs" element={<div>Les grands indicateurs</div>} />
+        <Route path="/recettes-propres" element={<div>Les recettes propres</div>} />
+        <Route path="/masse-salariale" element={<div>La masse salariale</div>} />
+        <Route path="/consommation" element={<div>La consommation</div>} />
+      </Route>
+    </Routes>
+  );
+}

client/src/pages/home-page.tsx

@@ -156,6 +156,13 @@ export default function HomePage() {
               title="TEDS"
               to="/teds" />
           </Col>
+          <Col md={4}>
+            <GenericCard
+              description="Tableau de bord financier des universités"
+              image={<img className="fr-responsive-img" src={atlasImg} alt="" />}
+              title="Finance"
+              to="/finance-universite" />
+          </Col>
         </Row>
       </Container>
       <footer className="fr-footer fr-mt-5w" role="contentinfo" id="footer">

client/src/router.tsx

@@ -7,6 +7,7 @@ import HomePage from './pages/home-page.tsx';
 import Integration from './pages/integration/index.tsx';
 import OpenAlexRoutes from './pages/open-alex/routes.tsx';
 import TedsRoutes from './pages/teds/routes.tsx';
+import FinanceUniversityRoutes from './pages/finance-university/routes.tsx';
 
 export default function Router() {
   return (
@@ -17,6 +18,7 @@ export default function Router() {
         <Route path="/european-projects/*" element={<EuropeanProjectsRoutes />} />
         <Route path="/open-alex/*" element={<OpenAlexRoutes />} />
         <Route path="/teds/*" element={<TedsRoutes />} />
+        <Route path="/finance-universite/*" element={< FinanceUniversityRoutes />} />
       </Route>
       <Route path="/integration" element={<Integration />} />
       <Route path="*" element={<div>404 atlas</div>} />