add responsive+ delete inline style

src/components/IncompleteEvent/IncompleteEvent.module.css

@@ -27,7 +27,7 @@
   list-style-type: circle;
 }
 
-.eventsContainer::-webkit-scrollbar {
+/*.eventsContainer::-webkit-scrollbar {
   height: 8px;
 }
 
@@ -43,7 +43,7 @@
 
 .eventsContainer::-webkit-scrollbar-thumb:hover {
   background: rgba(30, 96, 249, 0.7);
-}
+}*/
 
 .eventCard {
   min-width: calc((100% - 20px) / 3);

src/components/PendingMembers/PendingMembers.jsx

@@ -1,8 +1,10 @@
-import React, { useState, useEffect } from "react";
+/*import React, { useState, useEffect } from "react";
 import Button from "../ui/button/button";
 import styles from "./PendingMembers.module.css";
 import getInvalidUsers from "../../utils/users/getUserToValidate";
 import getUserById from "../../utils/users/getUserById";
+import validateUser from "../../utils/users/validateUser";
+import deleteUser from "../../utils/users/deleteUser";
 
 function pendingMembers() {
   const [pendingMembers, setPendingMembers] = useState([]);
@@ -30,15 +32,31 @@ function pendingMembers() {
     fetchPendingMembers();
   }, []);
 
-  const handleValidate = async (id) => {
+const handleReject = async (id) => {
-    console.log(`Valider l'utilisateur ID: ${id}`);
+  const res = await deleteUser(id);
-    setPendingMembers(pendingMembers.filter(member => member.id !== id));
+
-  };
+  if (!res.ok) {
+    console.error(res.status, res.data);
+    alert(res.data?.message || "Action refusée");
+    return;
+  }
+
+  setPendingMembers(prev => prev.filter(u => u.id !== id));
+};
+
+const handleValidate = async (id) => {
+  const res = await validateUser(id);
+
+  if (!res.ok) {
+    alert(res.data?.message || "Validation refusée");
+    return;
+  }
+
+  setPendingMembers(prev => prev.filter(u => u.id !== id));
+};
+
+
 
-  const handleReject = async (id) => {
-    console.log(`Refuser l'utilisateur ID: ${id}`);
-    setPendingMembers(pendingMembers.filter(member => member.id !== id));
-  };
 
   if (loading) {
     return <div>Chargement des membres en attente...</div>;
@@ -65,4 +83,103 @@ function pendingMembers() {
     </div>
   );
 }
-export default pendingMembers;
+export default pendingMembers;*/ 
+import React, { useState, useEffect } from "react";
+import Button from "../ui/button/button";
+import styles from "./PendingMembers.module.css";
+
+import getInvalidUsers from "../../utils/users/getUserToValidate";
+import getUserById from "../../utils/users/getUserById";
+import validateUser from "../../utils/users/validateUser";
+import deleteUser from "../../utils/users/deleteUser";
+
+function PendingMembers() {
+  const [pendingMembers, setPendingMembers] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchPendingMembers = async () => {
+      setLoading(true);
+
+      const userIds = await getInvalidUsers();
+
+      if (userIds && userIds.length > 0) {
+        const users = await Promise.all(
+          userIds.map((id) => getUserById(id))
+        );
+        setPendingMembers(users.filter(Boolean));
+      } else {
+        setPendingMembers([]);
+      }
+
+      setLoading(false);
+    };
+
+    fetchPendingMembers();
+  }, []);
+
+  const handleValidate = async (id) => {
+    const ok = await validateUser(id);
+
+    if (!ok) return; 
+
+    setPendingMembers((prev) =>
+      prev.filter((member) => member.id !== id)
+    );
+  };
+
+  const handleReject = async (id) => {
+    const ok = await deleteUser(id);
+
+    if (!ok) return;
+
+    setPendingMembers((prev) =>
+      prev.filter((member) => member.id !== id)
+    );
+  };
+
+  if (loading) {
+    return <div>Chargement des membres en attente...</div>;
+  }
+
+  return (
+    <div className={`${styles.rightBlock} glassCard`}>
+      <h2>Membres en attente de validation</h2>
+
+      <div className={styles.membersContainer}>
+        {pendingMembers.length === 0 && (
+          <p>Aucun membre en attente</p>
+        )}
+
+        {pendingMembers.map((member) => (
+          <div
+            key={member.id}
+            className={`glassCard ${styles.memberCard}`}
+          >
+            <p>
+              {member.name} {member.lastname}
+            </p>
+
+            <div className={styles.buttonGroup}>
+              <Button
+                onClick={() => handleValidate(member.id)}
+                variant="primary"
+              >
+                Valider
+              </Button>
+
+              <Button
+                onClick={() => handleReject(member.id)}
+                variant="danger"
+              >
+                Refuser
+              </Button>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default PendingMembers;

src/components/PendingMembers/PendingMembers.module.css

@@ -18,7 +18,7 @@
 }
 
 
-.membersContainer::-webkit-scrollbar {
+/*.membersContainer::-webkit-scrollbar {
   width: 8px;
 }
 
@@ -34,7 +34,7 @@
 
 .membersContainer::-webkit-scrollbar-thumb:hover {
   background: rgba(125, 249, 30, 0.7);
-}
+}*/
 
 .memberCard {
   display: flex;

src/components/chart/ParticipationChart.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+/*import React, { useState } from "react";
 import { Doughnut } from "react-chartjs-2";
 import { Chart, ArcElement } from "chart.js";
 import { MenuItem, Select, FormControl } from "@mui/material";
@@ -87,4 +87,83 @@ function participationChart() {
   );
 }
 
-export default participationChart;
+export default participationChart;*/
+import React, { useState } from "react";
+import { Doughnut } from "react-chartjs-2";
+import { Chart, ArcElement } from "chart.js";
+import { MenuItem, Select, FormControl } from "@mui/material";
+import styles from "./ParticipationChart.module.css";
+
+Chart.register(ArcElement);
+
+function ParticipationChart() {
+  const [selected, setSelected] = useState("3");
+  const [participationRate, setParticipationRate] = useState(78);
+
+  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,
+    maintainAspectRatio: true,
+    plugins: {
+      legend: { display: false },
+      tooltip: { enabled: false },
+    },
+    animation: {
+      animateScale: true,
+      animateRotate: true,
+    },
+  };
+
+  return (
+    <div className={`${styles.leftBlock} glassCard`}>
+      <div className={styles.participationHeader}>
+        <div className={`${styles.partiText} glassCard`}>
+          <label htmlFor="months">Taux de participation depuis :</label>
+          <div className={styles.formControl}>
+            <FormControl className={styles.formDesign}>
+              <Select
+                value={selected}
+                onChange={(e) => setSelected(e.target.value)}
+                className={styles.selectRoot}
+                MenuProps={{
+               classes: {paper: styles.selectMenuPaper,},
+                  MenuListProps: {
+                  className: styles.selectMenuList,},
+  }}
+                displayEmpty
+              >
+                <MenuItem value="1">1 mois</MenuItem>
+                <MenuItem value="3">3 mois</MenuItem>
+                <MenuItem value="6">6 mois</MenuItem>
+                <MenuItem value="12">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>
+  );
+}
+
+export default ParticipationChart;
+

src/components/chart/ParticipationChart.module.css

@@ -3,15 +3,18 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  height: calc(100vh - 260px);
+  height: 100%;
-  /* Exemple: calc(100vh - 60px) */
+  min-height: calc(100vh - 260px);
-  margin-bottom: auto;
+  box-sizing: border-box;
+  padding: 20px;
+  margin: 0;
 }
 
 .participationHeader {
   display: flex;
   align-items: center;
   width: 100%;
+  margin-bottom: 10px;
 }
 
 .partiText {
@@ -27,14 +30,15 @@
 
 .partiText label {
   font-size: 20px;
-  text-align: right;
+  text-align: center;
   transition: all 0.3s ease;
+  width: 100%;
 }
-
 .chartContainer {
-  max-width: 80%;
+  width: 80%;
-  width: 400px;
+  max-width: 400px;
   height: auto;
+  aspect-ratio: 1/1;
   margin: 0 auto;
   position: relative;
   animation: slideEvent2 2s;
@@ -59,12 +63,70 @@
   color: #333;
 }
 
+.formControl {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  margin-top: 10px;
+}
+
+.formDesign {
+  margin: 0 auto;
+  width: fit-content;
+}
+
+.selectRoot {
+  width: 100px;
+  height: 35px;
+  font-size: 19px;
+  border:none;
+}
+
+.selectRoot .MuiOutlinedInput-notchedOutline {
+  border: none;
+}
+
+.selectRoot .MuiSelect-select {
+  padding: 8px;
+  padding-right: 24px;
+}
+
+.selectRoot .MuiSvgIcon-root {
+  font-size: 20px;
+}
+
+.selectRoot .MuiMenu-paper {
+  border-radius: 7px;
+  width: 100px;
+  max-width: 100px;
+}
+
+.selectRoot .MuiMenuItem-root {
+  font-size: 18px;
+}
+
+.selectMenuPaper {
+  border-radius: 7px;
+  width: 100px;
+  max-width: 120px;
+  max-height: 300px;
+  overflow-y: auto;
+  border:none;
+}
+
+.selectMenuItem {
+  font-size: 18px;
+  min-height: 40px;
+  display: flex;
+  align-items: center;
+}
+
+
 @keyframes slideEvent2 {
   from {
     opacity: 0;
     transform: translateX(-20px);
   }
-
   to {
     opacity: 1;
     transform: translateX(0);
@@ -76,45 +138,32 @@
     opacity: 0;
     transform: translateX(20px);
   }
-
   to {
     opacity: 1;
     transform: translateX(0);
   }
 }
 
-.formControl {
-  display: flex;
-  justify-content: center;
-  width: 100%;
-}
-
-.formDesign {
-  margin: 0 auto;
-  width: fit-content;
-}
-
 @media screen and (max-width: 760px) {
-  .partiText {
+  .leftBlock {
-    flex-direction: column;
+    width: 100%;
-    justify-content: center;
+    height: auto;
+    min-height: auto;
+    margin-bottom: 20px;
+  }
+
+  .chartContainer {
+    width: 90%;
+    max-width: 300px;
+    height: auto;
+    aspect-ratio: 1/1;
   }
 
   .partiText label {
-    text-align: center;
+    font-size: 18px;
   }
 
-  .leftBlock {
+  .chartPercentage {
-    width: 100%;
+    font-size: 48px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    height: fit-content;
-    margin-bottom: auto;
-    margin-top: 30px;
   }
-  .chartContainer{
+}
-    height:fit-content;
-  }
-
-}

src/utils/users/deleteUser.js

@@ -1,22 +1,14 @@
 export default async function deleteUser(userId) {
-  try {
+  const res = await fetch(
-    const res = await fetch(`http://${import.meta.env.VITE_API_URL}/api/users/${userId}`, {
+    `http://${import.meta.env.VITE_API_URL}/api/users/${userId}`,
-      method: 'DELETE',
+    {
-      credentials: 'include',
+      method: "DELETE",
+      credentials: "include",
       headers: {
-        'Accept': 'application/json',
+        Accept: "application/json",
-        'Content-Type': 'application/json',
       },
-    });
-
-    if (!res.ok) {
-      throw new Error(`Erreur serveur : ${res.status}`);
     }
+  );
 
-    const data = await res.json();
+  return res.ok;
-    return data;
-  } catch (err) {
-    console.error('Erreur lors de la suppression :', err);
-    return null;
-  }
 }

src/utils/users/validateUser

@@ -1,22 +1,14 @@
 export default async function validateUser(userId) {
-  try {
+  const res = await fetch(
-    const res = await fetch(`http://${import.meta.env.VITE_API_URL}/api/users/${userId}/validate`, {
+    `http://${import.meta.env.VITE_API_URL}/api/users/${userId}/validate`,
-      method: 'POST',
+    {
-      credentials: 'include',
+      method: "POST",
+      credentials: "include",
       headers: {
-        'Accept': 'application/json',
+        Accept: "application/json",
-        'Content-Type': 'application/json',
       },
-    });
-
-    if (!res.ok) {
-      throw new Error(`Erreur serveur : ${res.status}`);
     }
+  );
 
-    const data = await res.json();
+  return res.ok;
-    return data;
-  } catch (err) {
-    console.error('Erreur lors de la validation :', err);
-    return null;
-  }
 }