rebase & resolve conflicts

src/pages/Stat/StatPage.jsx

@@ -1,12 +1,15 @@
+
 import React, { useState, useEffect, useContext } from "react";
+import Dropdown from 'react-bootstrap/Dropdown';
 import { Doughnut } from "react-chartjs-2";
 import { Chart, ArcElement } from "chart.js";
 import styles from "./StatPage.module.css";
 import Button from "./../../components/ui/button/button";
 import { AuthContext } from "../../contexts/auth/AuthContext.js";
 import { useNavigate } from "react-router";
+import { readUsedSize } from "chart.js/helpers";
+import { MenuItem, Select, FormControl, InputLabel } from "@mui/material";
 
-// Enregistrer les éléments nécessaires
 Chart.register(ArcElement);
 
 function StatPage() {
@@ -15,6 +18,7 @@ function StatPage() {
   const navigate = useNavigate();
 
   const [months, setMonths] = useState(3);
+  const [selected, setSelected] = useState("3");
   const [participationRate, setParticipationRate] = useState(89);
 
   useEffect(() => {
@@ -25,12 +29,20 @@ function StatPage() {
     { title: "Événement A", tasks: "Préparation des flyers" },
     { title: "Événement B", tasks: "Réservation de la salle" },
     { title: "Événement C", tasks: "Communication sur les réseaux" },
+    { title: "Événement D", tasks: "Communication sur les réseaux" },
+    { title: "Événement E", tasks: "Communication sur les réseaux" },
+    { title: "Événement F", tasks: "Communication sur les réseaux" },
+
   ];
 
   const pendingMembers = [
     { name: "Antoine Ordonneau" },
     { name: "Giovanni Josserand" },
     { name: "Quentin T'Jampens" },
+    { name: "Quentin T'Jampens" },
+    { name: "Quentin T'Jampens" },
+    { name: "Quentin T'Jampens" },
+    { name: "Quentin T'Jampens" }
   ];
 
   const handleValidate = (name) => {
@@ -48,8 +60,8 @@ function StatPage() {
         data: [participationRate, 100 - participationRate],
         backgroundColor: ["#1e60f9ff", "#ffffffff"],
         borderWidth: 0,
-        weight:10,
-        cutout: "90%",
+        weight: 10,
+        cutout: "95%",
         circumference: 360,
         rotation: -90,
       },
@@ -76,41 +88,60 @@ function StatPage() {
     <div className={styles.container}>
       <div className={`${styles.leftBlock} glassCard`}>
         <div className={styles.participationHeader}>
-          <div className={styles.partiText}>
-          <label htmlFor="months">Taux de participation </label>
-          <label htmlFor="months2">depuis : </label>
-
-          <select
-            id="months"
-            value={months}
-            onChange={(e) => setMonths(e.target.value)}
-            className={styles.monthsDropdown}
-          >
-            <option value="1">1 mois</option>
-            <option value="3">3 mois</option>
-            <option value="6">6 mois</option>
-            <option value="12">12 mois</option>
-          </select>
-          </div>
+          <div className={`${styles.partiText} glassCard`}>
+            <label htmlFor={styles.months}>Taux de participation depuis :</label>
+            
+            <FormControl>
+              <Select
+    value={selected}
+    onChange={(e) => setSelected(e.target.value)}
+    sx={{
+      width: "100px",
+      height: "35px",
+      fontSize: "19px",
+      paddingBottom:"2.5px",
+      
+      "& .MuiOutlinedInput-notchedOutline": {
+        border: "none",
+      },
+      "& .MuiSelect-select": {
+        padding: "8px",
+        paddingRight: "24px !important",
+      },
+      "& .MuiSvgIcon-root": {
+        fontSize: "20px",
+      },
+    }}
+    MenuProps={{
+      PaperProps: {
+        sx: {
+          className: "glassCard",
+          borderRadius:"7px",
+          background: "rgba(255, 255, 255, 0.65)",
+          width: "100px",
+          maxWidth: "100px",
           
+        },
+      },
+    }}
+    displayEmpty
+  >
+    <MenuItem value="1" sx={{ fontSize: "18px" }}>1 mois</MenuItem>
+    <MenuItem value="3" sx={{ fontSize: "18px" }}>3 mois</MenuItem>
+    <MenuItem value="6" sx={{ fontSize: "18px" }}>6 mois</MenuItem>
+    <MenuItem value="12" sx={{ fontSize: "18px" }}>12 mois</MenuItem>
+  </Select>
+</FormControl>
+
+          </div>
         </div>
         <div className={styles.chartContainer}>
-          <div style={{ position: "relative", width: "100%", height: "100%" }}>
+          <div className={styles.chartWrapper}>
             <Doughnut data={chartData} options={chartOptions} />
-            <div style={{
-                position: "absolute",
-                top: "50%",
-                left: "50%",
-                textAlign:"center",
-                transform: "translate(-50%, -50%)",
-                fontSize: "60px",
-                fontWeight: "bold",
-                color: "#333",
-              }}
-            >
+            <div className={styles.chartPercentage}>
               {participationRate}%
             </div>
-          </div>
+          </div> 
         </div>
       </div>
       <div className={styles.rightSection}>