Move adminPage components

src/pages/Admin/AdminPage.jsx

@@ -1,8 +1,8 @@
 import { useState, useContext } from "react";
 import styles from "./AdminPage.module.css";
-import ParticipationChart from "../../components/chart/ParticipationChart.jsx";
-import IncompleteEvents from "../../components/IncompleteEvent/IncompleteEvent.jsx";
-import PendingMembers from "../../components/PendingMembers/PendingMembers.jsx";
+import ParticipationChart from "./components/chart/ParticipationChart.jsx";
+import IncompleteEvents from "./components/IncompleteEvent/IncompleteEvent.jsx";
+import PendingMembers from "./components/pendingMembers/PendingMembers.jsx";
 import { AuthContext } from "../../contexts/auth/AuthContext.js";
 import { useNavigate } from "react-router";
 

src/pages/Admin/components/IncompleteEvent/IncompleteEvent.jsx

@@ -0,0 +1,59 @@
+import React, { useState, useEffect } from "react";
+import styles from "./IncompleteEvent.module.css";
+import getAllEvents from "../../../../utils/events/getAllEvents.js";
+
+function IncompleteEvent() {
+  const [events, setEvents] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchEvents = async () => {
+      const data = await getAllEvents();
+      setEvents(data?.data || data || []);
+      setLoading(false);
+    };
+    fetchEvents();
+  }, []);
+
+  if (loading) {
+    return (
+      <div className={`${styles.rightBlock} glassCard`}>
+        <h2>Derniers événements</h2>
+        <div className={styles.eventsContainer}>
+          <div className={`${styles.emptyEvent} glassCard`}>
+            <p>Chargement des événements...</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`${styles.rightBlock} glassCard`}>
+      <h2>Derniers événements</h2>
+      <div className={styles.eventsContainer}>
+        {events.map((event) => (
+          <div key={event.id} className={`glassCard ${styles.eventCard}`}>
+            <h3>{event.name}</h3>
+            <p className={styles.eventDate}>
+              {new Date(event.start).toLocaleDateString("fr-FR")} - {new Date(event.end).toLocaleDateString("fr-FR")}
+            </p>
+            <p className={styles.eventDescription}>{event.description}</p>
+            <h4>Tâches associées :</h4>
+            <ul className={styles.tasksList}>
+              {event.tasks?.length ? (
+                event.tasks.map((task, taskIndex) => (
+                  <li key={taskIndex}>{task.name}</li>
+                ))
+              ) : (
+                <li>Aucune tâche associée.</li>
+              )}
+            </ul>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default IncompleteEvent;

src/pages/Admin/components/IncompleteEvent/IncompleteEvent.module.css

@@ -0,0 +1,113 @@
+.rightBlock {
+  width: 100%;
+}
+
+.rightBlock > h2 {
+  font-size: 29px;
+}
+
+.eventsContainer {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  margin-top: 5px;
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding-bottom: 10px;
+  scroll-behavior: smooth;
+}
+
+.eventCard {
+  min-width: calc((100% - 20px) / 3);
+  max-width: calc((100% - 20px) / 3);
+  min-height: 250px;
+  max-height: 250px;
+  overflow-y: auto;
+  text-align: center;
+  box-sizing: border-box;
+  opacity: 0;
+  transform: translateX(20px);
+  animation: slideInEvent 1s ease forwards;
+  flex-shrink: 0;
+}
+
+.eventCard ul {
+  align-items: center;
+  margin-left: 8%;
+  padding-left: 15px;
+}
+
+.eventCard ul li {
+  text-align: left;
+  list-style-type: circle;
+}
+
+.eventCard > h3 {
+  font-size: 24px;
+}
+
+/* Animation des cartes avec délais */
+.eventCard:nth-child(1) { animation-delay: 0s; }
+.eventCard:nth-child(2) { animation-delay: 0.1s; }
+.eventCard:nth-child(3) { animation-delay: 0.2s; }
+.eventCard:nth-child(4) { animation-delay: 0.3s; }
+.eventCard:nth-child(5) { animation-delay: 0.4s; }
+.eventCard:nth-child(6) { animation-delay: 0.5s; }
+
+.emptyEvent {
+  min-width: calc((100% - 20px) / 3);
+  max-width: calc((100% - 20px) / 3);
+  min-height: 250px;
+  max-height: 250px;
+  padding: 10px;
+  text-align: center;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  opacity: 1;
+  flex-shrink: 0;
+}
+
+@keyframes slideInEvent {
+  from {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@media screen and (max-width: 760px) {
+  .eventCard {
+    min-width: 100%;
+    min-height: 200px;
+    max-height: fit-content;
+    padding-bottom: 0;
+  }
+
+  .eventCard h3 {
+    font-size: 17px;
+  }
+
+  .eventsContainer {
+    flex-direction: column;
+    max-height: 300px;
+    margin-top: 15px;
+    height: fit-content;
+    overflow-y: auto;
+    padding-bottom: 0;
+  }
+
+  .rightBlock > h2 {
+    font-size: 18px;
+  }
+
+  .emptyEvent {
+    min-width: 100%;
+    min-height: 200px;
+    max-height: fit-content;
+  }
+}

src/pages/Admin/components/chart/ParticipationChart.jsx

@@ -0,0 +1,85 @@
+import React, { useState, useEffect } 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";
+import getAllEvents from "../../../../utils/events/getAllEvents.js";
+
+Chart.register(ArcElement);
+
+function ParticipationChart() {
+  const [selected, setSelected] = useState("3");
+
+  const [eventsCount, setEventsCount] = useState(0); 
+  const [participationRate, setParticipationRate] = useState(0);
+
+  useEffect(() => {
+    const fetchEvents = async () => {
+      const res = await getAllEvents();
+
+      const eventsArray = res?.data ?? [];
+
+      setEventsCount(eventsArray.length);
+
+      const rate = Math.min(eventsArray.length, 100);
+      setParticipationRate(rate);
+    };
+
+    fetchEvents();
+  }, []);
+
+  const chartData = {
+    labels: ["Progress", "Background"],
+    datasets: [
+      {
+        data: [participationRate, 100 - participationRate],
+        backgroundColor: ["#1e60f9ff", "#ffffffff"],
+        borderWidth: 0,
+        cutout: "93%",
+        rotation: -90,
+      },
+    ],
+  };
+
+  const chartOptions = {
+    responsive: true,
+    plugins: {
+      legend: { display: false },
+      tooltip: { enabled: false },
+    },
+  };
+
+  return (
+    <div className={`${styles.leftBlock} glassCard`}>
+      <div className={styles.participationHeader}>
+        <div className={`${styles.partiText} glassCard`}>
+          <label>Taux de participation depuis :</label>
+
+          <FormControl className={styles.formDesign}>
+            <Select
+              value={selected}
+              onChange={(e) => setSelected(e.target.value)}
+              className={styles.selectRoot}
+            >
+              <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 className={styles.chartContainer}>
+        <div className={styles.chartWrapper}>
+          <Doughnut data={chartData} options={chartOptions} />
+          <div className={styles.chartPercentage}>
+            {eventsCount} events
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ParticipationChart;

src/pages/Admin/components/chart/ParticipationChart.module.css

@@ -0,0 +1,187 @@
+.leftBlock {
+  width: 40%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 100%;
+  min-height: calc(100vh - 260px);
+  box-sizing: border-box;
+  padding: 20px;
+  margin: 0;
+}
+
+.participationHeader {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  margin-bottom: 10px;
+}
+
+.partiText {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 2%;
+  margin-top: 2%;
+  animation: slideInEvent 2s;
+}
+
+.partiText label {
+  font-size: 20px;
+  text-align: center;
+  transition: all 0.3s ease;
+  width: 100%;
+}
+.chartContainer {
+  width: 80%;
+  max-width: 400px;
+  height: auto;
+  aspect-ratio: 1/1;
+  margin: 0 auto;
+  position: relative;
+  animation: slideEvent2 2s;
+}
+
+.chartWrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.chartPercentage {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  text-align: center;
+  transform: translate(-50%, -50%);
+  font-size: 60px;
+  font-weight: bold;
+  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);
+  }
+}
+
+@keyframes slideInEvent {
+  from {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@media screen and (max-width: 760px) {
+  .leftBlock {
+    width: 100%;
+    height: auto;
+    min-height: auto;
+  }
+
+  .chartContainer {
+    width: 90%;
+    max-width: 300px;
+    height: auto;
+    aspect-ratio: 1/1;
+  }
+
+  .partiText label {
+    font-size: 18px;
+  }
+
+  .chartPercentage {
+    font-size: 48px;
+  }
+}
+::-webkit-scrollbar {
+  width: 8px; 
+  height: 8px; 
+}
+
+::-webkit-scrollbar-track {
+  background: transparent; 
+  border-radius: 10px; 
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(100, 100, 100, 0.3);
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(100, 100, 100, 0.5);
+}
+

src/pages/Admin/components/pendingMembers/PendingMembers.jsx

@@ -0,0 +1,110 @@
+import React, { useState, useEffect } from "react";
+import Button from "../../../../components/ui/button/button.jsx";
+import styles from "./PendingMembers.module.css";
+
+import getUserToValidate from "../../../../utils/users/getUserToValidate.js";
+import getUserById from "../../../../utils/users/getUserById.js";
+import validateUser from "../../../../utils/users/validateUser.js";
+import deleteOtherUser from "../../../../utils/users/deleteOtherUser.js";
+
+function PendingMembers() {
+  const [pendingMembers, setPendingMembers] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [actionLoading, setActionLoading] = useState(null);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    const fetchPendingMembers = async () => {
+      setLoading(true);
+      const userIds = await getUserToValidate();
+      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 removeMember = (id) => {
+    setPendingMembers(prevMembers =>
+      prevMembers.filter(member => member.id !== id)
+    );
+  };
+
+const handleValidate = async (id) => {
+  setActionLoading(id);
+  setError(null);
+  try {
+    const result = await validateUser(id);
+    if (result === true) { 
+      removeMember(id);
+    } else {
+      setError("Échec de la validation.");
+    }
+  } catch (err) {
+    setError("Erreur lors de la validation.");
+  } finally {
+    setActionLoading(null);
+  }
+};
+
+const handleReject = async (id) => {
+  setActionLoading(id);
+  setError(null);
+  try {
+    const result = await deleteUser(id);
+    if (result.status >= 200 && result.status < 300) {
+      removeMember(id);
+    } else {
+      setError(result.errors || "Échec de la suppression.");
+    }
+  } catch (err) {
+    setError("Erreur lors de la suppression.");
+  } finally {
+    setActionLoading(null);
+  }
+};
+
+
+  if (loading) {
+    return <div>Chargement des membres en attente...</div>;
+  }
+
+  return (
+    <div className={`${styles.rightBlock} glassCard`}>
+      <h2>Membres en attente de validation</h2>
+      {error && <p style={{ color: "red" }}>{error}</p>}
+
+      <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"
+                disabled={actionLoading === member.id}
+              >
+                {actionLoading === member.id ? "En cours..." : "Valider"}
+              </Button>
+              <Button
+                onClick={() => handleReject(member.id)}
+                variant="danger"
+                disabled={actionLoading === member.id}
+              >
+                {actionLoading === member.id ? "En cours..." : "Refuser"}
+              </Button>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default PendingMembers;

src/pages/Admin/components/pendingMembers/PendingMembers.module.css

@@ -0,0 +1,75 @@
+.rightBlock {
+  width: 100%;
+}
+
+.rightBlock > h2 {
+  font-size: 29px;
+}
+
+.membersContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-top: 20px;
+  max-height: 185px;
+  overflow-y: auto;
+  padding-right: 5px;
+  scroll-behavior: smooth;
+}
+
+.memberCard {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+  flex-shrink: 0;
+  opacity: 0;
+  transform: translateY(20px);
+  animation: slideInMember 0.5s ease forwards;
+}
+
+.memberCard:nth-child(1) { animation-delay: 0s; }
+.memberCard:nth-child(2) { animation-delay: 0.1s; }
+.memberCard:nth-child(3) { animation-delay: 0.2s; }
+
+.memberCard p {
+  font-weight: bold;
+  font-size: 20px;
+  white-space: nowrap;    
+  overflow: hidden;         
+  text-overflow: ellipsis;    
+  max-width: 250px;          
+}
+
+.buttonGroup {
+  display: flex;
+  gap: 10px;
+  justify-content: right;
+}
+
+@keyframes slideInMember {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@media screen and (max-width: 760px) {
+  .membersContainer {
+    max-height: 200px;
+  }
+
+  .rightBlock > h2{
+    font-size: 18px;
+  }
+  .memberCard p{
+    font-size: 15px;
+    max-width: 150px; 
+  }
+}
+@media screen and (min-width: 761px) {
+  .memberCard p{
+    white-space: normal;
+    overflow: visible;
+    text-overflow: clip;
+    max-width: none;
+  }
+}