adding dropdown on countryStat page

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

@@ -4,6 +4,7 @@ import BarCharts from './charts/BarCharts';
 import DashboardTable from './charts/DashboardTable';
 import HorizontalBars from './charts/HorizontalCharts';
 import PieCharts from './charts/PieCharts';
+import PhaseDropdown from './filters/PhaseDropdown'
 import styles from './styles/charts.module.css';
 
 const pieChartData = {
@@ -19,6 +20,7 @@ const barChartData = [{ data: [4, 3, 5] }, { data: [1, 6, 3] }, { data: [2, 5, 6
 const CountryStats = () => {
   return (
     <>
+      <PhaseDropdown />
       <h1>Statut: Observateur</h1>
       <div className={styles.chartsContainer}>
         <HorizontalBars />

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

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
+
+export default function PhaseDropdown() {
+  const [phase, setPhase] = React.useState('');
+
+  const handleChange = (event: SelectChangeEvent) => {
+    setPhase(event.target.value as string);
+  };
+
+  return (
+    <Box sx={{ maxWidth: 120 }}>
+      <FormControl fullWidth>
+        <InputLabel id="phase-menu-select">Phase</InputLabel>
+        <Select
+          labelId="phase-menu-select"
+          id="phase-menu"
+          value={phase}
+          label="Phase"
+          onChange={handleChange}
+        >
+          <MenuItem value={3}>Toutes les phases</MenuItem>
+          <MenuItem value={0}>Phase 1</MenuItem>
+          <MenuItem value={1}>Phase 2</MenuItem>
+          <MenuItem value={2}>Phase 3</MenuItem>
+        </Select>
+      </FormControl>
+    </Box>
+  );
+}