Added table for floating accounts stats, review on styles

parlemonde · Oct 14, 2024 · d49bc31 · d49bc31
1 parent b8f0c69
commit d49bc31
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 36 deletions.
diff --git a/server/controllers/statistics.ts b/server/controllers/statistics.ts
@@ -16,7 +16,13 @@ import {
   getMinConnections,
   getMinDuration,
 } from '../stats/sessionStats';
-import { getChildrenCodesCount, getFamilyAccountsCount, getConnectedFamiliesCount, getFamiliesWithoutAccount } from '../stats/villageStats';
+import {
+  getChildrenCodesCount,
+  getFamilyAccountsCount,
+  getConnectedFamiliesCount,
+  getFamiliesWithoutAccount,
+  getFloatingAccounts,
+} from '../stats/villageStats';
 import { Controller } from './controller';
 
 export const statisticsController = new Controller('/statistics');
@@ -52,5 +58,6 @@ statisticsController.get({ path: '/villages/:villageId' }, async (_req, res) =>
     childrenCodesCount: await getChildrenCodesCount(villageId),
     connectedFamiliesCount: await getConnectedFamiliesCount(villageId),
     familiesWithoutAccount: await getFamiliesWithoutAccount(villageId),
+    floatingAccounts: await getFloatingAccounts(villageId),
   });
 });
diff --git a/server/stats/villageStats.ts b/server/stats/villageStats.ts
@@ -58,3 +58,13 @@ export const getFamiliesWithoutAccount = async (villageId: number) => {
 
   return familiesWithoutAccount;
 };
+
+export const getFloatingAccounts = async (villageId: number) => {
+  const floatingAccounts = await userRepository
+    .createQueryBuilder('user')
+    .where('user.villageId = :villageId', { villageId })
+    .andWhere('user.hasStudentLinked = 0')
+    .select(['user.id', 'user.firstname', 'user.lastname', 'user.language', 'user.email'])
+    .getMany();
+  return floatingAccounts;
+};
diff --git a/src/components/admin/OneVillageTable.tsx b/src/components/admin/OneVillageTable.tsx
@@ -1,16 +1,16 @@
 import React from 'react';
 
 import RemoveRedEyeIcon from '@mui/icons-material/RemoveRedEye';
-import { Paper, TableContainer } from '@mui/material';
+import { Box, Paper, TableContainer, TableSortLabel, useTheme } from '@mui/material';
 import NoSsr from '@mui/material/NoSsr';
 import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
 import TableCell from '@mui/material/TableCell';
 import TableHead from '@mui/material/TableHead';
 import TablePagination from '@mui/material/TablePagination';
 import TableRow from '@mui/material/TableRow';
-import TableSortLabel from '@mui/material/TableSortLabel';
-import { useTheme } from '@mui/material/styles';
+
+import { primaryColorLight } from 'src/styles/variables.const';
 
 function paginate<T>(array: T[], pageSize: number, pageNumber: number): T[] {
   // human-readable page numbers usually start with 1, so we reduce 1 in the first argument
@@ -37,7 +37,7 @@ interface OneVillageTableProps {
 export const OneVillageTable = ({ 'aria-label': ariaLabel, emptyPlaceholder, admin, data, columns, actions, titleContent }: OneVillageTableProps) => {
   const theme = useTheme();
   const color = admin ? 'white' : 'black';
-  const backgroundColor = admin ? theme.palette.secondary.main : 'white';
+  const backgroundColor = admin ? theme.palette.secondary.main : primaryColorLight;
   const [options, setTableOptions] = React.useState<TableOptions>({
     page: 1,
     limit: 10,
@@ -70,7 +70,12 @@ export const OneVillageTable = ({ 'aria-label': ariaLabel, emptyPlaceholder, adm
 
   return (
     <NoSsr>
-      <TableContainer component={Paper}>
+      <TableContainer component={Paper} sx={{ mb: '1rem' }}>
+        {titleContent && (
+          <Box sx={{ fontWeight: 'bold', display: 'flex', border: 'none', backgroundColor, p: '8px' }}>
+            <RemoveRedEyeIcon sx={{ mr: '6px' }} /> {titleContent}
+          </Box>
+        )}
         <Table size="medium" aria-label={ariaLabel}>
           {data.length === 0 ? (
             <TableBody>
@@ -84,15 +89,14 @@ export const OneVillageTable = ({ 'aria-label': ariaLabel, emptyPlaceholder, adm
             <>
               <TableHead
                 style={{ borderBottom: '1px solid white' }}
-                sx={{ fontWeight: 'bold', minHeight: 'unset', padding: '8px 8px 8px 16px', color, backgroundColor }}
+                sx={{
+                  fontWeight: 'bold',
+                  minHeight: 'unset',
+                  padding: '8px 8px 8px 16px',
+                  color,
+                  backgroundColor: admin ? backgroundColor : 'white',
+                }}
               >
-                {titleContent && (
-                  <TableRow>
-                    <TableCell sx={{ fontWeight: 'bold', display: 'flex', border: 'none' }}>
-                      <RemoveRedEyeIcon sx={{ mr: '6px' }} /> {titleContent}
-                    </TableCell>
-                  </TableRow>
-                )}
                 <TableRow>
                   {columns.map((c) => (
                     <TableCell key={c.key} style={{ color, fontWeight: 'bold' }}>

diff --git a/src/components/admin/dashboard-statistics/VillageStats.tsx b/src/components/admin/dashboard-statistics/VillageStats.tsx
@@ -14,6 +14,7 @@ import styles from './styles/charts.module.css';
 import { useGetVillagesStats } from 'src/api/statistics/statistics.get';
 import { useCountries } from 'src/services/useCountries';
 import { useVillages } from 'src/services/useVillages';
+import type { FamiliesWithoutAccount, FloatingAccount, OneVillageTableRow } from 'types/statistics.type';
 import type { VillageFilter } from 'types/village.type';
 
 const VillageStats = () => {
@@ -33,13 +34,16 @@ const VillageStats = () => {
     });
   }, [selectedCountry]);
 
-  const [rows, setRows] = React.useState<Array<{ id: string | number; [key: string]: string | boolean | number | React.ReactNode }>>([]);
+  const [familiesWithoutAccountRows, setFamiliesWithoutAccountRows] = React.useState<Array<OneVillageTableRow>>([]);
+  const [floatingAccountsRows, setFloatingAccountsRows] = React.useState<Array<OneVillageTableRow>>([]);
   React.useEffect(() => {
     if (villagesStats.data?.familiesWithoutAccount) {
-      setRows([]);
-      setRows(createRows(villagesStats.data?.familiesWithoutAccount));
+      setFamiliesWithoutAccountRows([]);
+      setFloatingAccountsRows([]);
+      setFamiliesWithoutAccountRows(createFamiliesWithoutAccountRows(villagesStats.data?.familiesWithoutAccount));
+      setFloatingAccountsRows(createFloatingAccountsRows(villagesStats.data?.floatingAccounts));
     }
-  }, [villagesStats.data?.familiesWithoutAccount]);
+  }, [villagesStats.data?.familiesWithoutAccount, villagesStats.data?.floatingAccounts]);
 
   const handleCountryChange = (country: string) => {
     setSelectedCountry(country);
@@ -73,6 +77,12 @@ const VillageStats = () => {
     { key: 'country', label: 'Pays', sortable: true },
     { key: 'creationDate', label: 'Date de création identifiant', sortable: true },
   ];
+  const FloatingAccountsHeaders = [
+    { key: 'family', label: 'Nom Prénom Famille', sortable: true },
+    { key: 'language', label: 'Langue', sortable: true },
+    { key: 'email', label: 'Mail', sortable: true },
+    { key: 'creationDate', label: 'Date de création compte', sortable: true },
+  ];
   function CustomTabPanel(props: TabPanelProps) {
     const { children, value, index, ...other } = props;
 
@@ -86,24 +96,26 @@ const VillageStats = () => {
       </div>
     );
   }
-  function createRows(
-    data: Array<{
-      student_id: string | number;
-      student_firstname: string;
-      student_lastname: string;
-      village_name: string;
-      classroom_name: string;
-      classroom_country: string;
-    }>,
-  ): Array<{ id: string | number; [key: string]: string | boolean | number | React.ReactNode }> {
+  function createFamiliesWithoutAccountRows(data: Array<FamiliesWithoutAccount>): Array<OneVillageTableRow> {
+    return data.map((row) => {
+      return {
+        id: row.student_id,
+        student: `${row.student_firstname} ${row.student_lastname}`,
+        vm: row.village_name,
+        classroom: row.classroom_name,
+        country: row.classroom_country,
+        creationDate: 'À venir',
+      };
+    });
+  }
+  function createFloatingAccountsRows(data: Array<FloatingAccount>): Array<OneVillageTableRow> {
     return data.map((row) => {
       return {
-        id: row.student_id, // id is string | number
-        student: `${row.student_firstname} ${row.student_lastname}`, // string
-        vm: row.village_name, // string
-        classroom: row.classroom_name, // string
-        country: row.classroom_country, // string
-        creationDate: 'À venir', // string
+        id: row.id,
+        family: `${row.firstname} ${row.lastname}`,
+        language: row.language,
+        email: row.email,
+        creationDate: 'À venir',
       };
     });
   }
@@ -142,9 +154,16 @@ const VillageStats = () => {
             <OneVillageTable
               admin={false}
               emptyPlaceholder={<p>{pelicoMessage}</p>}
-              data={rows}
+              data={familiesWithoutAccountRows}
               columns={FamiliesWithoutAccountHeaders}
-              titleContent={`À surveiller : comptes non créés (${rows.length})`}
+              titleContent={`À surveiller : comptes non créés (${familiesWithoutAccountRows.length})`}
+            />
+            <OneVillageTable
+              admin={false}
+              emptyPlaceholder={<p>{pelicoMessage}</p>}
+              data={floatingAccountsRows}
+              columns={FloatingAccountsHeaders}
+              titleContent={`À surveiller : comptes flottants (${floatingAccountsRows.length})`}
             />
             <Box
               className={styles.classroomStats}

diff --git a/types/statistics.type.ts b/types/statistics.type.ts
@@ -31,6 +31,7 @@ export interface VillageStats {
   familyAccountsCount: number;
   connectedFamiliesCount: number;
   familiesWithoutAccount: FamiliesWithoutAccount[];
+  floatingAccounts: FloatingAccount[];
 }
 
 export interface FamiliesWithoutAccount {
@@ -41,3 +42,16 @@ export interface FamiliesWithoutAccount {
   classroom_name: string;
   classroom_country: string;
 }
+
+export interface FloatingAccount {
+  id: number;
+  email: string;
+  firstname: string;
+  lastname: string;
+  language: string;
+}
+
+export interface OneVillageTableRow {
+  id: string | number;
+  [key: string]: string | boolean | number | React.ReactNode;
+}