cut into components

src/pages/Stat/StatPage.jsx

@@ -1,172 +1,24 @@
-import Dropdown from 'react-bootstrap/Dropdown';
-import { Doughnut } from "react-chartjs-2";
-import { Chart, ArcElement } from "chart.js";
+import React, { useState } from "react";
 import styles from "./StatPage.module.css";
-import Button from "./../../components/ui/button/button";
-import { readUsedSize } from "chart.js/helpers";
-import { MenuItem, Select, FormControl, InputLabel } from "@mui/material";
-import React, { useState, useEffect, useRef } from "react";
-
-
-Chart.register(ArcElement);
+// Importez les composants avec une majuscule
+import ParticipationChart from "../../components/chart/ParticipationChart.jsx";
+import IncompleteEvents from "../../components/IncompleteEvent/IncompleteEvent.jsx";
+import PendingMembers from "../../components/PendingMembers/PendingMembers.jsx";
 
 function StatPage() {
-  const [months, setMonths] = useState(3);
   const [selected, setSelected] = useState("3");
   const [participationRate, setParticipationRate] = useState(89);
- 
-  const incompleteEvents = [
-    { 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) => {
-    console.log(`Valider ${name}`);
-  };
-  const handleReject = (name) => {
-    console.log(`Refuser ${name}`);
-  };
-  const chartData = {
-    labels: ["Progress", "Background"],
-    datasets: [
-      {
-        data: [participationRate, 100 - participationRate],
-        backgroundColor: ["#1e60f9ff", "#ffffffff"],
-        borderWidth: 0,
-        weight: 10,
-        cutout: "93%",
-        circumference: 360,
-        rotation: -90,
-      },
-    ],
-  };
-  const chartOptions = {
-    responsive: true,
-    plugins: {
-      legend: {
-        display: false,
-      },
-      tooltip: {
-        enabled: false,
-      },
-    },
-    animation: {
-      animateScale: true,
-      animateRotate: true,
-    },
-  };
   return (
     <div className={styles.container}>
-      <div className={`${styles.leftBlock} glassCard`}>
-        <div className={styles.participationHeader}>
-          <div className={`${styles.partiText} glassCard`}>
-            <label htmlFor={styles.months}>Taux de participation depuis :</label>
-            <div className={styles.formControl}>
-            <FormControl className={styles.formDesign}>
-              <Select
-    value={selected}
-    onChange={(e) => 
-      setSelected(e.target.value)
-      }
-    sx={{
-      width: "100px",
-      height: "35px",
-      fontSize: "19px",
-      paddingBottom:"-2px",
-      
-      "& .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>
-        <div className={styles.chartContainer}>
-          <div className={styles.chartWrapper}>
-            <Doughnut data={chartData} options={chartOptions} />
-            <div className={styles.chartPercentage}>
-              {participationRate}%
-            </div>
-          </div> 
-        </div>
-      </div>
+      <ParticipationChart
+        selected={selected}
+        setSelected={setSelected}
+        participationRate={participationRate}
+      />
       <div className={styles.rightSection}>
-        <div className={`${styles.rightBlock} glassCard`}>
-          <h2>Événements incomplets</h2>
-          <div className={styles.eventsContainer}>
-            {incompleteEvents.map((event, index) => (
-              <div key={index} className={`glassCard ${styles.eventCard}`}>
-                <h3>{event.title}</h3>
-                <p>{event.tasks}</p>
-              </div>
-            ))}
-          </div>
-        </div>
-        <div className={`${styles.rightBlock} glassCard`}>
-          <h2>Membres en attente de validation</h2>
-          <div className={styles.membersContainer}>
-            {pendingMembers.map((member, index) => (
-              <div key={index} className={`glassCard ${styles.memberCard}`}>
-                <p>{member.name}</p>
-                <div className={styles.buttonGroup}>
-                  <Button
-                    onClick={() => handleValidate(member.name)}
-                    variant="primary"
-                  >
-                    Valider
-                  </Button>
-                  <Button
-                    onClick={() => handleReject(member.name)}
-                    variant="danger"
-                  >
-                    Refuser
-                  </Button>
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
+        <IncompleteEvents />
+        <PendingMembers />
       </div>
     </div>
   );