Responsive

server/controllers/village.ts

@@ -2,7 +2,7 @@ import type { JSONSchemaType } from 'ajv';
 import type { NextFunction, Request, Response } from 'express';
 
 import { UserType } from '../entities/user';
-import { Village, VillagePhase } from '../entities/village';
+import { Village } from '../entities/village';
 import { createVillagesFromPLM } from '../legacy-plm/api';
 import { AppError, ErrorCode } from '../middlewares/handleErrors';
 import { valueOrDefault } from '../utils';
@@ -15,22 +15,17 @@ const villageController = new Controller('/villages');
 //--- Get all villages ---
 villageController.get({ path: '', userType: UserType.OBSERVATOR }, async (_req: Request, res: Response) => {
   const countryIsoCode = _req.query.countryIsoCode as string;
-  const phase = _req.query.phase as string;
   try {
     const villageRepository = AppDataSource.getRepository(Village);
-    let query;
-    if (countryIsoCode && phase) {
-      query = villageRepository.createQueryBuilder('village');
+    let villages;
+    if (countryIsoCode) {
+      const query = villageRepository.createQueryBuilder('village');
       query.where('village.countryCodes LIKE :countryIsoCode', { countryIsoCode: `%${countryIsoCode.toUpperCase()}%` });
 
-      if (Object.values(VillagePhase).includes(+phase)) {
-        query.andWhere('village.activePhase = :phase', { phase });
-      }
+      villages = await query.getMany();
     } else {
-      query = villageRepository.createQueryBuilder('student');
+      villages = await villageRepository.find();
     }
-
-    const villages = await query.getMany();
     res.sendJSON(villages);
   } catch (e) {
     console.error(e);

src/components/admin/dashboard-statistics/ClassroomStats.tsx

@@ -16,7 +16,7 @@ const ClassroomStats = () => {
   const [selectedVillage, setSelectedVillage] = useState<string>('');
   const [selectedClassroom, setSelectedClassroom] = useState<string>();
   const [selectedPhase, setSelectedPhase] = useState<string>('4');
-  const [options, setOptions] = useState<VillageFilter>({ countryIsoCode: '', phase: '' });
+  const [options, setOptions] = useState<VillageFilter>({ countryIsoCode: '' });
 
   const pelicoMessage = 'Merci de sélectionner une classe pour analyser ses statistiques ';
 
@@ -32,7 +32,6 @@ const ClassroomStats = () => {
   React.useEffect(() => {
     setOptions({
       countryIsoCode: selectedCountry,
-      phase: selectedPhase,
     });
   }, [selectedCountry, selectedPhase]);
 

src/components/admin/dashboard-statistics/VillageStats.tsx

@@ -7,7 +7,6 @@ import Typography from '@mui/material/Typography';
 
 import StatsCard from './cards/StatsCard/StatsCard';
 import CountriesDropdown from './filters/CountriesDropdown';
-import PhaseDropdown from './filters/PhaseDropdown';
 import VillageDropdown from './filters/VillageDropdown';
 import { PelicoCard } from './pelico-card';
 import styles from './styles/charts.module.css';
@@ -19,8 +18,7 @@ import type { VillageFilter } from 'types/village.type';
 const VillageStats = () => {
   const [selectedCountry, setSelectedCountry] = useState<string>('');
   const [selectedVillage, setSelectedVillage] = useState<string>('');
-  const [selectedPhase, setSelectedPhase] = useState<string>('4');
-  const [options, setOptions] = useState<VillageFilter>({ countryIsoCode: '', phase: '' });
+  const [options, setOptions] = useState<VillageFilter>({ countryIsoCode: '' });
 
   const pelicoMessage = 'Merci de sélectionner un village-monde pour analyser ses statistiques ';
 
@@ -32,9 +30,8 @@ const VillageStats = () => {
   React.useEffect(() => {
     setOptions({
       countryIsoCode: selectedCountry,
-      phase: selectedPhase,
     });
-  }, [selectedCountry, selectedPhase]);
+  }, [selectedCountry]);
 
   const handleCountryChange = (country: string) => {
     setSelectedCountry(country);
@@ -45,10 +42,6 @@ const VillageStats = () => {
     setSelectedVillage(village);
   };
 
-  const handlePhaseChange = (phase: string) => {
-    setSelectedPhase(phase);
-  };
-
   interface TabPanelProps {
     children?: React.ReactNode;
     index: number;
@@ -82,18 +75,27 @@ const VillageStats = () => {
 
   return (
     <>
-      <div className={styles.filtersContainer}>
-        <div className={styles.phaseFilter}>
-          <PhaseDropdown onPhaseChange={handlePhaseChange} />
-        </div>
+      <Box
+        className={styles.filtersContainer}
+        sx={{
+          display: 'flex',
+          flexDirection: {
+            xs: 'column',
+            md: 'row',
+          },
+          gap: 2,
+        }}
+      >
         <div className={styles.countryFilter}>
           <CountriesDropdown countries={countries} onCountryChange={handleCountryChange} />
         </div>
         <div className={styles.countryFilter}>
           <VillageDropdown villages={villages} onVillageChange={handleVillageChange} />
         </div>
+      </Box>
+      <div>
+        <p>Tableau à venir</p>
       </div>
-      <p>Tableau à venir</p>
       <Tabs value={value} onChange={handleTabChange} aria-label="basic tabs example" sx={{ py: 3 }}>
         <Tab label="En classe" {...a11yProps(0)} />
         <Tab label="En famille" {...a11yProps(1)} />
@@ -105,11 +107,21 @@ const VillageStats = () => {
         {!selectedVillage ? (
           <PelicoCard message={pelicoMessage} />
         ) : (
-          <div className={styles.classroomStats}>
+          <Box
+            className={styles.classroomStats}
+            sx={{
+              display: 'flex',
+              flexDirection: {
+                xs: 'column', // Column direction for small devices
+                md: 'row', // Row direction for medium and larger devices
+              },
+              gap: 2, // Adds spacing between the child elements
+            }}
+          >
             <StatsCard data={villagesStats.data?.familyAccountsCount}>Nombre de profs ayant créé des comptes famille</StatsCard>
             <StatsCard data={villagesStats.data?.childrenCodesCount}>Nombre de codes enfant créés</StatsCard>
             <StatsCard data={villagesStats.data?.connectedFamiliesCount}>Nombre de familles connectées</StatsCard>
-          </div>
+          </Box>
         )}
       </CustomTabPanel>
     </>

src/components/admin/dashboard-statistics/cards/StatsCard/StatsCard.module.css

@@ -6,7 +6,6 @@
     width: auto;
     color: #FFF;
     flex: 1;
-    margin: 0 1rem;
     display: flex;
     flex-direction: column;
     justify-content: space-between;

src/components/admin/dashboard-statistics/cards/StatsCard/StatsCard.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import Box from '@mui/material/Box';
+
 import styles from './StatsCard.module.css';
 
 interface StatsCardProps {
@@ -8,10 +10,18 @@ interface StatsCardProps {
 }
 const StatsCard = ({ children, data }: StatsCardProps) => {
   return (
-    <div className={styles.cardContainer}>
+    <Box
+      className={styles.cardContainer}
+      sx={{
+        margin: {
+          xs: '0',
+          md: '0 1rem',
+        },
+      }}
+    >
       <p>{children}</p>
       <p>{data}</p>
-    </div>
+    </Box>
   );
 };
 

src/components/admin/dashboard-statistics/filters/CountriesDropdown.tsx

@@ -24,7 +24,18 @@ export default function CountriesDropdown({ countries, onCountryChange }: Countr
   };
 
   return (
-    <Box sx={{ minWidth: 150, maxWidth: 200 }}>
+    <Box
+      sx={{
+        minWidth: {
+          xs: 'none',
+          md: 150,
+        },
+        maxWidth: {
+          xs: 'none',
+          md: 200,
+        },
+      }}
+    >
       <FormControl fullWidth size="small">
         <InputLabel id="country-menu-select">Pays</InputLabel>
         <Select labelId="country-menu-select" id="country-select" value={country} label="Pays" onChange={handleChange}>

src/components/admin/dashboard-statistics/filters/VillageDropdown.tsx

@@ -22,7 +22,18 @@ export default function VillageDropdown({ villages, onVillageChange }: VillageDr
   };
 
   return (
-    <Box sx={{ minWidth: 150, maxWidth: 200 }}>
+    <Box
+      sx={{
+        minWidth: {
+          xs: 'none',
+          md: 150,
+        },
+        maxWidth: {
+          xs: 'none',
+          md: 200,
+        },
+      }}
+    >
       <FormControl fullWidth size="small">
         <InputLabel
           id="village-menu-select"

src/services/useVillages.ts

@@ -10,11 +10,10 @@ export const useVillages = (options?: VillageFilter): { villages: Village[]; set
   const queryClient = useQueryClient();
   const buildUrl = () => {
     if (!options) return '/villages';
-    const { countryIsoCode, phase } = options;
+    const { countryIsoCode } = options;
     const queryParams = [];
 
     if (countryIsoCode) queryParams.push(`countryIsoCode=${countryIsoCode}`);
-    if (phase) queryParams.push(`phase=${phase}`);
 
     return queryParams.length ? `/villages?${queryParams.join('&')}` : '/villages';
   };

types/village.type.ts

@@ -17,5 +17,4 @@ export interface Village {
 
 export interface VillageFilter {
   countryIsoCode: string;
-  phase: string;
 }