feat(frontend): add analysis dashboard

frontend/src/App.tsx

@@ -33,12 +33,17 @@ import UsersView from './views/Users/UsersView';
 import TerritoryEstablishmentsView from './views/TerritoryEstablishments/TerritoryEstablishmentsView';
 import SmallHeader from './components/Header/SmallHeader';
 import Header from './components/Header/Header';
+import AnalysisView from './views/Analysis/AnalysisView';
 
 const authenticatedRoutes: RouteProps[] = [
   {
     path: '/parc-de-logements',
     component: HousingListView
   },
+  {
+    path: '/analyses',
+    component: AnalysisView
+  },
   // TODO: remove this
   { path: '/parc-de-logements/campagnes/:id', component: CampaignView },
   { path: '/groupes/:id', component: GroupView },
@@ -100,15 +105,16 @@ function App() {
     }
   }, [dispatch, isSomeQueryPending]);
 
-  const routes = (isAuthenticated ? authenticatedRoutes : guestRoutes)
-    .map((route) => (
+  const routes = (isAuthenticated ? authenticatedRoutes : guestRoutes).map(
+    (route) => (
       <Route
         exact
         path={route.path}
         component={route.component}
         key={`route_${route.path}`}
       />
-    ));
+    )
+  );
 
   const redirection = isAuthenticated ? '/parc-de-logements' : '/connexion';
 

frontend/src/components/Header/Header.tsx

@@ -1,6 +1,4 @@
 import { Header as DSFRHeader } from '@codegouvfr/react-dsfr/Header';
-import { useMatomo } from '@jonkoops/matomo-tracker-react';
-import { useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
 import LoadingBar from 'react-redux-loading-bar';
 
@@ -17,15 +15,10 @@ import { Container } from '../_dsfr';
 function Header() {
   const location = useLocation();
   const dispatch = useAppDispatch();
-  const { trackPageView } = useMatomo();
   const { isAdmin, isVisitor, isAuthenticated } = useUser();
 
   const { authUser } = useAppSelector((state) => state.authentication);
 
-  useEffect(() => {
-    trackPageView({});
-  }, [location]); //eslint-disable-line react-hooks/exhaustive-deps
-
   function displayName(): string {
     return authUser
       ? authUser.user.firstName && authUser.user.lastName
@@ -40,11 +33,11 @@ function Header() {
     linkProps: {
       to: getUserNavItem(navItem).url,
       'data-testid': `fr-header-nav-item-${getUserNavItem(
-        navItem,
-      ).url.substring(1)}`,
+        navItem
+      ).url.substring(1)}`
     },
     text: getUserNavItem(navItem).label,
-    isActive: location.pathname.startsWith(getUserNavItem(navItem).url),
+    isActive: location.pathname.startsWith(getUserNavItem(navItem).url)
   });
 
   return (
@@ -55,23 +48,23 @@ function Header() {
             Ministère <br />
             du Logement <br />
             et de la Rénovation <br />
-            urbaine 
+            urbaine
           </>
         }
         homeLinkProps={{
           to: '/',
-          title: 'Accueil - Zéro Logement Vacant',
+          title: 'Accueil - Zéro Logement Vacant'
         }}
         serviceTitle="Zéro Logement Vacant"
         serviceTagline={
           isAuthenticated ? (
-            (isAdmin || isVisitor) ? (
+            isAdmin || isVisitor ? (
               <EstablishmentSearchableSelect
                 initialEstablishmentOption={
                   authUser
                     ? {
                         value: authUser.establishment.id,
-                        label: authUser.establishment.name,
+                        label: authUser.establishment.name
                       }
                     : undefined
                 }
@@ -104,24 +97,25 @@ function Header() {
                       <AccountSideMenu />
                     </Container>
                   }
-                />,
+                />
               ]
             : [
                 {
                   iconId: 'fr-icon-user-fill',
                   linkProps: {
-                    to: '/connexion',
+                    to: '/connexion'
                   },
-                  text: 'Connexion',
-                },
+                  text: 'Connexion'
+                }
               ]
         }
         navigation={
           isAuthenticated
             ? [
                 getMainNavigationItem(UserNavItems.HousingList),
+                getMainNavigationItem(UserNavItems.Analysis),
                 getMainNavigationItem(UserNavItems.Campaign),
-                getMainNavigationItem(UserNavItems.Resources),
+                getMainNavigationItem(UserNavItems.Resources)
               ]
             : withNavItems && []
         }

frontend/src/components/Header/SmallHeader.tsx

@@ -1,7 +1,7 @@
 import Button from '@codegouvfr/react-dsfr/Button';
 import {
   MainNavigation,
-  MainNavigationProps,
+  MainNavigationProps
 } from '@codegouvfr/react-dsfr/MainNavigation';
 import Paper from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
@@ -23,18 +23,19 @@ import logo from '../../assets/images/zlv.svg';
 function SmallHeader() {
   const dispatch = useAppDispatch();
   const location = useLocation();
-  const { displayName, establishment, isAdmin, isVisitor, isAuthenticated } = useUser();
+  const { displayName, establishment, isAdmin, isVisitor, isAuthenticated } =
+    useUser();
 
   function getMainNavigationItem(
-    navItem: UserNavItems,
+    navItem: UserNavItems
   ): MainNavigationProps.Item {
     const link = getUserNavItem(navItem);
     return {
       linkProps: {
-        to: link.url,
+        to: link.url
       },
       text: link.label,
-      isActive: location.pathname.startsWith(link.url),
+      isActive: location.pathname.startsWith(link.url)
     };
   }
 
@@ -45,7 +46,7 @@ function SmallHeader() {
         square
         sx={(theme) => ({
           position: 'sticky',
-          zIndex: theme.zIndex.appBar,
+          zIndex: theme.zIndex.appBar
         })}
       >
         <Grid
@@ -69,27 +70,28 @@ function SmallHeader() {
             classes={{
               root: styles.root,
               list: styles.linkList,
-              link: styles.link,
+              link: styles.link
             }}
             items={
               isAuthenticated
                 ? [
                     getMainNavigationItem(UserNavItems.HousingList),
+                    getMainNavigationItem(UserNavItems.Analysis),
                     getMainNavigationItem(UserNavItems.Campaign),
-                    getMainNavigationItem(UserNavItems.Resources),
+                    getMainNavigationItem(UserNavItems.Resources)
                   ]
                 : []
             }
           />
           <Grid alignItems="center" display="flex" ml="auto">
             {isAuthenticated ? (
-              (isAdmin || isVisitor) ? (
+              isAdmin || isVisitor ? (
                 <EstablishmentSearchableSelect
                   initialEstablishmentOption={
                     establishment
                       ? {
                           value: establishment.id,
-                          label: establishment.name,
+                          label: establishment.name
                         }
                       : undefined
                   }
@@ -124,7 +126,7 @@ function SmallHeader() {
               <Button
                 iconId="fr-icon-user-fill"
                 linkProps={{
-                  to: '/connexion',
+                  to: '/connexion'
                 }}
                 priority="tertiary no outline"
                 size="small"

frontend/src/models/UserNavItem.tsx

@@ -2,6 +2,7 @@ export enum UserNavItems {
   Campaign,
   HousingList,
   Resources,
+  Analysis
 }
 
 export interface UserNavItem {
@@ -17,6 +18,8 @@ export const getUserNavItem = (userNavItem: UserNavItems): UserNavItem => {
       return { url: '/parc-de-logements', label: 'Parc de logements' };
     case UserNavItems.Resources:
       return { url: '/ressources', label: 'Ressources' };
+    case UserNavItems.Analysis:
+      return { url: '/analyses', label: 'Analyses' };
     default:
       return { url: '/', label: 'Accueil' };
   }

frontend/src/views/Analysis/AnalysisView.tsx

@@ -0,0 +1,28 @@
+import Skeleton from '@mui/material/Skeleton';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+
+import { useDocumentTitle } from '../../hooks/useDocumentTitle';
+import MainContainer from '../../components/MainContainer/MainContainer';
+
+function AnalysisView() {
+  useDocumentTitle('Analyse');
+
+  const isLoading = true;
+
+  return (
+    <MainContainer>
+      {isLoading ? <Loading /> : <Typography variant="h1">Analyse</Typography>}
+    </MainContainer>
+  );
+}
+
+function Loading() {
+  return (
+    <Stack spacing={1} width="100%">
+      <Skeleton animation="wave" height={600} variant="rectangular" />
+    </Stack>
+  );
+}
+
+export default AnalysisView;