add filters VM and classroom to each page

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

@@ -1,16 +1,53 @@
-import React from 'react';
+import React, { useState } from 'react';
 
-// import ClassroomDetailsCard from './cards/ClassroomDetailsCard/ClassroomDetailsCard';
-import BarCharts from './charts/BarCharts';
-
-const barChartData = [{ data: [4, 3, 5] }, { data: [1, 6, 3] }, { data: [2, 5, 6] }];
+import ClassroomDropdown from './filters/ClassroomDropdown';
+import CountriesDropdown from './filters/CountriesDropdown';
+import PhaseDropdown from './filters/PhaseDropdown';
+import VillageDropdown from './filters/VillageDropdown';
+import { mockClassroomsStats } from './mocks/mocks';
+import { PelicoCard } from './pelico-card';
+import styles from './styles/charts.module.css';
 
 const ClassroomStats = () => {
+  const [selectedCountry, setSelectedCountry] = useState<string>('');
+  const [selectedVillage, setSelectedVillage] = useState<string>('');
+  const [selectedClassroom, setSelectedClassroom] = useState<string>();
+
+  const pelicoMessage = 'Merci de sélectionner une classe pour analyser ses statistiques ';
+
+  const countriesMap = mockClassroomsStats.map((country) => country.classroomCountryCode);
+  const countries = [...new Set(countriesMap)]; // avoid duplicates
+  const handleCountryChange = (country: string) => {
+    setSelectedCountry(country);
+  };
+  const villagesMap = mockClassroomsStats.map((village) => village.villageName);
+  const villages = [...new Set(villagesMap)];
+  const handleVillageChange = (village: string) => {
+    setSelectedVillage(village);
+  };
+  const classroomsMap = mockClassroomsStats.map((classroom) => classroom.classroomId);
+  const classrooms = [...new Set(classroomsMap)];
+  const handleClassroomChange = (classroom: string) => {
+    setSelectedClassroom(classroom);
+  };
+
   return (
     <>
-      <h1>Classe</h1>
-      {/* <ClassroomDetailsCard /> */}
-      <BarCharts barChartData={barChartData} />
+      <div className={styles.filtersContainer}>
+        <div className={styles.phaseFilter}>
+          <PhaseDropdown />
+        </div>
+        <div className={styles.countryFilter}>
+          <CountriesDropdown countries={countries} onCountryChange={handleCountryChange} />
+        </div>
+        <div className={'styles.countryFilter'}>
+          <VillageDropdown villages={villages} onVillageChange={handleVillageChange} />
+        </div>
+        <div className={'styles.countryFilter'}>
+          <ClassroomDropdown classrooms={classrooms} onClassroomChange={handleClassroomChange} />
+        </div>
+      </div>
+      {!selectedClassroom ? <PelicoCard message={pelicoMessage} /> : null}
     </>
   );
 };

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

@@ -1,5 +1,45 @@
+import React, { useState } from 'react';
+
+import CountriesDropdown from './filters/CountriesDropdown';
+import PhaseDropdown from './filters/PhaseDropdown';
+import VillageDropdown from './filters/VillageDropdown';
+import { mockClassroomsStats } from './mocks/mocks';
+import { PelicoCard } from './pelico-card';
+import styles from './styles/charts.module.css';
+
 const VillageStats = () => {
-  return null;
+  const [selectedCountry, setSelectedCountry] = useState<string>('');
+  const [selectedVillage, setSelectedVillage] = useState<string>('');
+
+  const pelicoMessage = 'Merci de sélectionner un village-monde pour analyser ses statistiques ';
+
+  const countriesMap = mockClassroomsStats.map((country) => country.classroomCountryCode);
+  const countries = [...new Set(countriesMap)]; // avoid duplicates
+  const handleCountryChange = (country: string) => {
+    setSelectedCountry(country);
+  };
+  const villagesMap = mockClassroomsStats.map((village) => village.villageName);
+  const villages = [...new Set(villagesMap)];
+  const handleVillageChange = (village: string) => {
+    setSelectedVillage(village);
+  };
+
+  return (
+    <>
+      <div className={styles.filtersContainer}>
+        <div className={styles.phaseFilter}>
+          <PhaseDropdown />
+        </div>
+        <div className={styles.countryFilter}>
+          <CountriesDropdown countries={countries} onCountryChange={handleCountryChange} />
+        </div>
+        <div className={'styles.countryFilter'}>
+          <VillageDropdown villages={villages} onVillageChange={handleVillageChange} />
+        </div>
+      </div>
+      {!selectedVillage ? <PelicoCard message={pelicoMessage} /> : null}
+    </>
+  );
 };
 
 export default VillageStats;

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

@@ -0,0 +1,38 @@
+import * as React from 'react';
+
+import Box from '@mui/material/Box';
+import FormControl from '@mui/material/FormControl';
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import type { SelectChangeEvent } from '@mui/material/Select';
+import Select from '@mui/material/Select';
+
+interface ClassroomDropdownProps {
+  classrooms: number[];
+  onClassroomChange: (classrooms: string) => void;
+}
+
+export default function ClassroomDropdown({ classrooms, onClassroomChange }: ClassroomDropdownProps) {
+  const [classroom, setClassroom] = React.useState('');
+
+  const handleChange = (event: SelectChangeEvent) => {
+    const selectedClassroom = event.target.value as string;
+    setClassroom(selectedClassroom);
+    onClassroomChange(selectedClassroom);
+  };
+
+  return (
+    <Box sx={{ minWidth: 150, maxWidth: 200 }}>
+      <FormControl fullWidth size="small">
+        <InputLabel id="classroom-menu-select">Classe</InputLabel>
+        <Select labelId="classroom-menu-select" id="classroom-select" value={classroom} label="Classe" onChange={handleChange}>
+          {classrooms.map((classroom) => (
+            <MenuItem key={classroom} value={classroom}>
+              {classroom}
+            </MenuItem>
+          ))}
+        </Select>
+      </FormControl>
+    </Box>
+  );
+}

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

@@ -22,11 +22,10 @@ export default function CountriesDropdown({ countries, onCountryChange }: Countr
   };
 
   return (
-    <Box sx={{ maxWidth: 120 }}>
+    <Box sx={{ minWidth: 150, maxWidth: 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}>
-          <MenuItem value="">Tous les pays</MenuItem>
           {countries.map((country) => (
             <MenuItem key={country} value={country}>
               {country}

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

@@ -15,7 +15,7 @@ export default function PhaseDropdown() {
   };
 
   return (
-    <Box sx={{ maxWidth: 120 }}>
+    <Box sx={{ minWidth: 150, maxWidth: 200 }}>
       <FormControl fullWidth size="small">
         <InputLabel id="phase-menu-select">Phase</InputLabel>
         <Select labelId="phase-menu-select" id="phase-menu" value={phase} label="Phase" onChange={handleChange}>

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

@@ -0,0 +1,38 @@
+import * as React from 'react';
+
+import Box from '@mui/material/Box';
+import FormControl from '@mui/material/FormControl';
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import type { SelectChangeEvent } from '@mui/material/Select';
+import Select from '@mui/material/Select';
+
+interface VillageDropdownProps {
+  villages: string[];
+  onVillageChange: (vm: string) => void;
+}
+
+export default function VillageDropdown({ villages, onVillageChange }: VillageDropdownProps) {
+  const [village, setVillage] = React.useState('');
+
+  const handleChange = (event: SelectChangeEvent) => {
+    const selectedVillage = event.target.value as string;
+    setVillage(selectedVillage);
+    onVillageChange(selectedVillage);
+  };
+
+  return (
+    <Box sx={{ minWidth: 150, maxWidth: 200 }}>
+      <FormControl fullWidth size="small">
+        <InputLabel id="village-menu-select">Village-monde</InputLabel>
+        <Select labelId="village-menu-select" id="village-select" value={village} label="Village" onChange={handleChange}>
+          {villages.map((village) => (
+            <MenuItem key={village} value={village}>
+              {village}
+            </MenuItem>
+          ))}
+        </Select>
+      </FormControl>
+    </Box>
+  );
+}

src/components/admin/dashboard-statistics/styles/charts.module.css

@@ -9,17 +9,11 @@
 
 .filtersContainer {
   display: flex;
+  justify-content: flex-start;
+  gap: 20px;
   padding-bottom: 5%;
 }
 
-.phaseFilter {
-  flex: 1;
-}
-
-.countryFilter {
-  flex: 2;
-}
-
 .horizontalBars {
   display: flex;
   flex-direction: column;