feat(Modifications): add modifications page

ui/src/App.js

@@ -17,6 +17,7 @@ import StatsPage from "./stats/StatsPage.jsx";
 import SearchProvider from "./common/SearchProvider";
 import ModificationsPage from "./ModificationsPage.jsx";
 import CorrectionsPage from "./CorrectionsPage.jsx";
+import SuiviModificationsPage from "./SuiviModificationsPage.jsx";
 import { useScrollToTop } from "./common/hooks/useScrollToTop.js";
 import { UserProvider } from "./common/UserProvider.jsx";
 
@@ -57,6 +58,7 @@ function App() {
                   <Route path="" element={<OrganismePage />} />
                   <Route path=":tab" element={<OrganismePage />} />
                 </Route>
+                <Route path="/suivi-modifications" element={<SuiviModificationsPage />} />
               </Route>
               <Route path="/dsfr" element={<DesignPage />} />
               <Route path="/stats" element={<StatsPage />} />

ui/src/SuiviModificationsPage.jsx

@@ -0,0 +1,67 @@
+import React, { useContext } from "react";
+import { DateTime } from "luxon";
+
+import TitleLayout from "./common/layout/TitleLayout.jsx";
+import ContentLayout from "./common/layout/ContentLayout.jsx";
+import Page from "./common/Page.jsx";
+import { UserContext } from "./common/UserProvider.jsx";
+import ApiPagination from "./common/ApiPagination.jsx";
+import { useSearch } from "./common/hooks/useSearch.js";
+import { Box } from "./common/Flexbox.jsx";
+
+function formatDate(date) {
+  return DateTime.fromISO(date).setLocale("fr").toLocaleString({
+    day: "2-digit",
+    month: "2-digit",
+    year: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+}
+
+export default function SuiviModificationsPage() {
+  const [userContext] = useContext(UserContext);
+
+  const { response } = useSearch(
+    { ordre: "desc", page: 1, items_par_page: 25 },
+    { path: "/modifications", entity: "modifications" },
+    userContext.token
+  );
+  const pagination = response?.data?.pagination;
+
+  if (!response.data.modifications.length) return null;
+
+  return (
+    <Page>
+      <TitleLayout title={"Suivi des modifications"} />
+      <ContentLayout>
+        <Box align="center" direction="column" width="100%">
+          <div class="fr-table">
+            <table>
+              <thead>
+                <tr>
+                  <th scope="col">SIRET</th> <th scope="col">Date</th> <th scope="col">Auteur</th>
+                  <th scope="col">Email</th>
+                  <th scope="col">Original</th> <th scope="col">Nouveau</th>
+                </tr>
+              </thead>
+              <tbody>
+                {response.data.modifications.map((modification, index) => {
+                  return (
+                    <tr key={index}>
+                      <td>{modification?.siret}</td> <td>{formatDate(modification?.date)}</td>
+                      <td>{modification?.auteur}</td>
+                      <td>{modification?.email}</td>
+                      <td>{modification.original?.uai}</td> <td>{modification.changements?.uai}</td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+          <ApiPagination pagination={pagination} />
+        </Box>
+      </ContentLayout>
+    </Page>
+  );
+}

ui/src/common/UserProvider.jsx

@@ -27,6 +27,7 @@ const UserProvider = (props) => {
         token: token,
         loading: false,
         isAnonymous: false,
+        isAdmin: decodedToken.isAdmin,
       });
     } else {
       setUser((oldValues) => {

ui/src/common/hooks/useFetch.js

@@ -1,7 +1,7 @@
 import { useCallback, useContext, useEffect, useReducer } from "react";
 import { ApiContext } from "../ApiProvider";
 
-export function useFetch(url, initialState = {}) {
+export function useFetch(url, initialState = {}, token = null) {
   const { httpClient } = useContext(ApiContext);
 
   function fetchReducer(state, action) {
@@ -27,13 +27,13 @@ export function useFetch(url, initialState = {}) {
     try {
       console.info(`Requesting ${url}`);
       dispatch({ type: "loading" });
-      const data = await httpClient._get(url);
+      const data = await httpClient._get(url, {}, token);
       dispatch({ type: "data", data });
     } catch (error) {
       console.error(error);
       dispatch({ type: "error", error });
     }
-  }, [httpClient, url]);
+  }, [httpClient, url, token]);
 
   useEffect(() => {
     async function fetchData() {

ui/src/common/hooks/useSearch.js

@@ -21,7 +21,7 @@ function adaptParamsForAPI(params) {
   }, {});
 }
 
-export function useSearch(defaults, options = {}) {
+export function useSearch(defaults, options = {}, token = null) {
   const { query, setQuery } = useQuery();
   const location = useLocation();
   const { setSearch } = useContext(SearchContext);
@@ -36,16 +36,22 @@ export function useSearch(defaults, options = {}) {
     }
   }, [options.silent, previous, search, setSearch]);
 
-  const url = buildUrl(config.apiUrl + `/organismes`, adaptParamsForAPI(search.params));
-  const [response] = useFetch(url, {
-    organismes: [],
-    pagination: {
-      page: 0,
-      resultats_par_page: 0,
-      nombre_de_page: 0,
-      total: 0,
+  const path = options?.path ? options.path : `/organismes`;
+  const url = buildUrl(config.apiUrl + path, adaptParamsForAPI(search.params));
+  const entity = options?.entity ? options.entity : "organismes";
+  const [response] = useFetch(
+    url,
+    {
+      [entity]: [],
+      pagination: {
+        page: 0,
+        resultats_par_page: 0,
+        nombre_de_page: 0,
+        total: 0,
+      },
     },
-  });
+    token
+  );
 
   return {
     response,

ui/src/common/layout/Layout.jsx

@@ -31,6 +31,7 @@ export default function Layout({ children }) {
           <Nav>
             <NavLink to={"/"}>Accueil</NavLink>
             {!userContext.isAnonymous && <NavLink to={"/tableau-de-bord"}>Tableau de bord</NavLink>}
+            {userContext.isAdmin && <NavLink to={"/suivi-modifications"}>Tableau de suivi des modifications</NavLink>}
             <NavLink to={"/organismes"}>Référentiel national</NavLink>
             <NavLink to={"/construction"}>Construction du référentiel</NavLink>
             <NavLink to={"/corrections"}>Correction et fiabilisation des données</NavLink>

ui/src/common/layout/TitleLayout.jsx

@@ -36,6 +36,7 @@ export default function TitleLayout({ title, details, getDetailsMessage, message
               { path: "/construction", breadcrumb: "Construction du référentiel" },
               { path: "/corrections", breadcrumb: "Correction et fiabilisation des données" },
               { path: "/modifications", breadcrumb: "Journal des modifications" },
+              { path: "/suivi-modifications", breadcrumb: "Tableau de suivi des modifications" },
               { path: "/stats", breadcrumb: "Statistiques" },
               { path: "/organismes", breadcrumb: "Liste des organismes" },
               { path: "/organismes/:siret", breadcrumb: OrganismeBreadcrumb },

ui/src/common/organismes/filtres/DepartementsFilter.jsx

@@ -7,9 +7,10 @@ export default function DepartementsFilter() {
   const data = useContext(DataContext);
   const [userContext] = useContext(UserContext);
 
-  const departements = userContext.isAnonymous
-    ? data.departements
-    : data[`${userContext.type}s`].find((r) => r.code === userContext.code)?.departements || [];
+  const departements =
+    userContext.isAnonymous || userContext.isAdmin
+      ? data?.departements
+      : data[`${userContext.type}s`]?.find((r) => r.code === userContext.code)?.departements || [];
 
   return (
     <Filter