Fix TS errors during lint

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

@@ -7,6 +7,8 @@ import VillageDropdown from './filters/VillageDropdown';
 import { mockClassroomsStats } from './mocks/mocks';
 import { PelicoCard } from './pelico-card';
 import styles from './styles/charts.module.css';
+import { useCountries } from 'src/services/useCountries';
+import { useVillages } from 'src/services/useVillages';
 
 const ClassroomStats = () => {
   const [selectedCountry, setSelectedCountry] = useState<string>('');
@@ -15,18 +17,15 @@ const ClassroomStats = () => {
 
   const pelicoMessage = 'Merci de sélectionner une classe pour analyser ses statistiques ';
 
-  const countriesMap = mockClassroomsStats.map((country) => country.classroomCountryCode);
-  const countries = [...new Set(countriesMap)];
+  const { countries } = useCountries();
+  const { villages } = useVillages(selectedCountry);
 
   const handleCountryChange = (country: string) => {
     setSelectedCountry(country);
     setSelectedVillage('');
     setSelectedClassroom('');
   };
 
-  const villagesMap = mockClassroomsStats.filter((village) => village.classroomCountryCode === selectedCountry).map((village) => village.villageName);
-  const villages = [...new Set(villagesMap)];
-
   const handleVillageChange = (village: string) => {
     setSelectedVillage(village);
     setSelectedClassroom('');

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

@@ -18,6 +18,7 @@ import { mockClassroomsStats, mockConnectionsStats } from './mocks/mocks';
 import { PelicoCard } from './pelico-card';
 import styles from './styles/charts.module.css';
 import { sumContribution } from './utils/sumData';
+import { useCountries } from 'src/services/useCountries';
 
 const pieChartData = {
   data: [
@@ -34,9 +35,7 @@ const ContributionBarChartTitle = 'Contribution des classes';
 const CountryStats = () => {
   const [selectedCountry, setSelectedCountry] = useState<string>('');
   const pelicoMessage = 'Merci de sélectionner un pays pour analyser ses statistiques ';
-
-  const countriesMap = mockClassroomsStats.map((country) => country.classroomCountryCode);
-  const countries = [...new Set(countriesMap)]; // avoid duplicates
+  const { countries } = useCountries();
   const handleCountryChange = (country: string) => {
     setSelectedCountry(country);
   };

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

@@ -14,26 +14,25 @@ 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 { Country } from 'types/country.type';
 
 const VillageStats = () => {
-  const [selectedCountry, setSelectedCountry] = useState<string>(''); // Default to 'FR' initially
-  const [selectedVillage, setSelectedVillage] = useState<number | null>(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 { countries } = useCountries();
 
-  const { villages } = useVillages(selectedCountry); // Dynamically pass the selected country
-  const villagesStats = useGetVillagesStats(selectedVillage);
+  const { villages } = useVillages(selectedCountry);
+  const villagesStats = useGetVillagesStats(+selectedVillage);
 
-  const handleCountryChange = (country: Country) => {
-    setSelectedCountry(country.isoCode);
-    setSelectedVillage(null);
+  const handleCountryChange = (country: string) => {
+    setSelectedCountry(country);
+    setSelectedVillage('');
   };
 
-  const handleVillageChange = (village: { name: string; id: number }) => {
-    setSelectedVillage(village.id);
+  const handleVillageChange = (village: string) => {
+    setSelectedVillage(village);
   };
 
   interface TabPanelProps {

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

@@ -11,24 +11,23 @@ import type { Country } from 'types/country.type';
 
 interface CountriesDropdownProps {
   countries: Country[];
-  onCountryChange: (country: Country) => void;
+  onCountryChange: (country: string) => void;
 }
 
 export default function CountriesDropdown({ countries, onCountryChange }: CountriesDropdownProps) {
-  const [country, setCountry] = React.useState<Country>({ name: '', isoCode: '' });
+  const [country, setCountry] = React.useState<string>('');
 
   const handleChange = (event: SelectChangeEvent) => {
-    const selectedCountry = event.target.value;
-    const currentSelection = countries.find((c) => c.isoCode === selectedCountry) as Country;
-    setCountry(currentSelection);
-    onCountryChange(currentSelection);
+    const selectedCountry = event.target.value as string;
+    setCountry(selectedCountry);
+    onCountryChange(selectedCountry);
   };
 
   return (
     <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.isoCode} label="Pays" onChange={handleChange}>
+        <Select labelId="country-menu-select" id="country-select" value={country} label="Pays" onChange={handleChange}>
           {countries.map((c) => (
             <MenuItem key={c.isoCode} value={c.isoCode}>
               {c.name}

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

@@ -9,26 +9,23 @@ import Select from '@mui/material/Select';
 
 interface VillageDropdownProps {
   villages: { name: string; id: number }[];
-  onVillageChange: (vm: { name: string; id: number }) => void;
+  onVillageChange: (vm: string) => void;
 }
 
 export default function VillageDropdown({ villages, onVillageChange }: VillageDropdownProps) {
-  const [village, setVillage] = React.useState<{ name: string; id: number }>({ name: '', id: 0 });
+  const [village, setVillage] = React.useState<string>('');
 
   const handleChange = (event: SelectChangeEvent) => {
-    const selectedVillage = event.target.value;
-    const currentSelection = villages.find((vil) => vil.id === +selectedVillage);
-    if (currentSelection) {
-      setVillage(currentSelection);
-      onVillageChange(currentSelection);
-    }
+    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?.id}`} label="Village" onChange={handleChange}>
+        <Select labelId="village-menu-select" id="village-select" value={`${village}`} label="Village" onChange={handleChange}>
           {villages.map((v) => (
             <MenuItem key={v.id} value={v.id}>
               {v.name}