adapt incompleteEvents responsive

src/components/IncompleteEvent/IncompleteEvent.jsx

@@ -3,13 +3,18 @@ import styles from "./IncompleteEvent.module.css";
 
 function IncompleteEvent() {
   const incompleteEvents = [
-    { title: "Événement A", tasks: "Préparation des flyers" },
+  { title: "Événement A", tasks: ["Communication sur les réseaux", "Enormément de comm", "Toujours + de comm,Communication sur les réseaux",
-    { title: "Événement B", tasks: "Réservation de la salle" },
+     "Enormément de comm", "Toujours + de comm","Communication sur les réseaux", "Enormément de comm", "Toujours + de comm","Communication sur les réseaux", "Enormément de comm", "Toujours + de comm]"] },
-    { title: "Événement C", tasks: "Communication sur les réseaux" },
+  { title: "Événement B", tasks: ["Réservation de la salle", "Vérification du matériel"] },
-    { title: "Événement D", tasks: "Communication sur les réseaux" },
+  { title: "Événement C", tasks: ["Communication sur les réseaux", "Enormément de comm", "Toujours + de comm"] },
-    { title: "Événement E", tasks: "Communication sur les réseaux" },
+  { title: "Événement D", tasks: ["Communication sur les réseaux", "Enormément de comm", "Toujours + de comm"] },
-    { title: "Événement F", tasks: "Communication sur les réseaux" },
+  { title: "Événement E", tasks: ["Communication sur les réseaux", "Enormément de comm", "Toujours + de comm,Communication sur les réseaux",
-  ];
+     "Enormément de comm", "Toujours + de comm","Communication sur les réseaux", "Enormément de comm", "Toujours + de comm","Communication sur les réseaux", "Enormément de comm", "Toujours + de comm]"] },
+  { title: "Événement F", tasks: ["Communication sur les réseaux", "Enormément de comm", "Toujours + de comm,Communication sur les réseaux",
+     "Enormément de comm", "Toujours + de comm","Communication sur les réseaux", "Enormément de comm", "Toujours + de comm","Communication sur les réseaux", "Enormément de comm", "Toujours + de comm]"] },
+  { title: "Événement G", tasks: ["Communication sur les réseaux", "Enormément de comm", "Toujours + de comm,Communication sur les réseaux",
+     "Enormément de comm", "Toujours + de comm","Communication sur les réseaux", "Enormément de comm", "Toujours + de comm","Communication sur les réseaux", "Enormément de comm", "Toujours + de comm]"] },
+];
 
   return (
     <div className={`${styles.rightBlock} glassCard`}>
@@ -18,7 +23,11 @@ function IncompleteEvent() {
         {incompleteEvents.map((event, index) => (
           <div key={index} className={`glassCard ${styles.eventCard}`}>
             <h3>{event.title}</h3>
-            <p>{event.tasks}</p>
+            <ul className={styles.tasksList}>
+            {event.tasks.map((task, taskIndex) => (
+              <li key={taskIndex}>{task}</li>
+            ))}
+          </ul>
           </div>
         ))}
       </div>

src/components/IncompleteEvent/IncompleteEvent.module.css

@@ -2,7 +2,7 @@
   width: 100%;
 }
 
-.rightBlock > h2 {
+.rightBlock>h2 {
   font-size: 29px;
 }
 
@@ -10,13 +10,23 @@
   display: flex;
   flex-direction: row;
   gap: 10px;
-  margin-top: 15px;
+  margin-top: 5px;
   overflow-x: auto;
   overflow-y: hidden;
   padding-bottom: 10px;
   scroll-behavior: smooth;
 }
 
+.eventCard ul {
+  align-items: center;
+  margin-left: 8%;
+}
+
+.eventCard ul li {
+  text-align: left;
+  list-style-type: circle;
+}
+
 .eventsContainer::-webkit-scrollbar {
   height: 8px;
 }
@@ -38,7 +48,9 @@
 .eventCard {
   min-width: calc((100% - 20px) / 3);
   max-width: calc((100% - 20px) / 3);
-  flex-shrink: 0;
+  min-height: 250px;
+  max-height: 250px;
+  overflow-y: auto;
   padding: 10px;
   text-align: center;
   padding-bottom: 200px;
@@ -46,31 +58,78 @@
   opacity: 0;
   transform: translateX(20px);
   animation: slideInEvent 1s ease forwards;
+
+  flex-shrink: 1;
+  padding: 10px;
+  text-align: center;
+  box-sizing: border-box;
 }
 
-.eventCard:nth-child(1) { animation-delay: 0s; }
+.eventCard:nth-child(1) {
-.eventCard:nth-child(2) { animation-delay: 0.1s; }
+  animation-delay: 0s;
-.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; }
 
-.eventCard > h3 {
+.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;
+}
+
+.eventCard>h3 {
   font-size: 24px;
 }
 
 @keyframes slideInEvent {
-  from { opacity: 0; transform: translateX(20px); }
+  from {
-  to { opacity: 1; transform: translateX(0); }
+    opacity: 0;
+    transform: translateX(20px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
 }
 
 @media screen and (max-width: 760px) {
   .eventCard {
-    width: 100%;
+    min-width: 100%;
-    height: 200px;
+    min-height: 200px;
+    max-height: fit-content;
+    padding-bottom: 0px;
   }
 
   .eventCard h3 {
     font-size: 17px;
   }
+
+  .eventsContainer {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    max-height: 300px;
+    margin-top: 15px;
+    height: fit-content;
+    overflow-y: auto;
+    padding-bottom: 0px;
+    scroll-behavior: smooth;
+  }
+
+  .rightBlock>h2 {
+    font-size: 18px;
+  }
 }

src/components/PendingMembers/PendingMembers.module.css

@@ -10,13 +10,14 @@
   display: flex;
   flex-direction: column;
   gap: 10px;
-  margin-top: 0px;
+  margin-top: 20px;
   max-height: 185px;
   overflow-y: auto;
   padding-right: 5px;
   scroll-behavior: smooth;
 }
 
+
 .membersContainer::-webkit-scrollbar {
   width: 8px;
 }
@@ -70,4 +71,11 @@
   .membersContainer {
     max-height: 200px;
   }
+  .rightBlock > h2{
+    font-size:18px;
+  }
+
+  .memberCard p{
+    font-size: 15px;
+  }
 }

src/components/chart/ParticipationChart.jsx

@@ -8,7 +8,7 @@ Chart.register(ArcElement);
 
 function participationChart() {
   const [selected, setSelected] = useState("3");
-  const [participationRate, setParticipationRate] = useState(89);
+  const [participationRate, setParticipationRate] = useState(78);
 
   const chartData = {
     labels: ["Progress", "Background"],

src/components/chart/ParticipationChart.module.css

@@ -3,7 +3,9 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  height: fit-content;
+  height: calc(100vh - 260px);
+  /* Exemple: calc(100vh - 60px) */
+  margin-bottom: auto;
 }
 
 .participationHeader {
@@ -14,6 +16,8 @@
 
 .partiText {
   display: flex;
+  width: 100%;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
   margin-bottom: 2%;
@@ -29,6 +33,8 @@
 
 .chartContainer {
   max-width: 80%;
+  width: 400px;
+  height: auto;
   margin: 0 auto;
   position: relative;
   animation: slideEvent2 2s;
@@ -54,13 +60,27 @@
 }
 
 @keyframes slideEvent2 {
-  from { opacity: 0; transform: translateX(-20px); }
+  from {
-  to { opacity: 1; transform: translateX(0); }
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
 }
 
 @keyframes slideInEvent {
-  from { opacity: 0; transform: translateX(20px); }
+  from {
-  to { opacity: 1; transform: translateX(0); }
+    opacity: 0;
+    transform: translateX(20px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
 }
 
 .formControl {
@@ -83,7 +103,18 @@
   .partiText label {
     text-align: center;
   }
-  .leftBlock{
+
-    width:100%;
+  .leftBlock {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: fit-content;
+    margin-bottom: auto;
+    margin-top: 30px;
   }
+  .chartContainer{
+    height:fit-content;
+  }
+
 }

src/layout.jsx

@@ -12,7 +12,7 @@ function Layout(){
     const { user, loading } = useContext(AuthContext);
 
     if (loading) return <p>Loading</p>;
-    if (!user) return <Navigate to="/login" />;
+   // if (!user) return <Navigate to="/login" />;
 
     return (
         <div>

src/pages/Admin/AdminPage.jsx

@@ -1,10 +1,10 @@
 import React, { useState } from "react";
-import styles from "./StatPage.module.css";
+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";
 
-function StatPage() {
+function AdminPage() {
   const [selected, setSelected] = useState("3");
   const [participationRate, setParticipationRate] = useState(89);
 
@@ -23,4 +23,4 @@ function StatPage() {
   );
 }
 
-export default StatPage;
+export default AdminPage;

src/router.js

@@ -2,12 +2,11 @@ import { createBrowserRouter } from "react-router";
 import Layout from "./layout.jsx";
 import HomePage from "./pages/Home/HomePage";
 import LoginPage from "./pages/Login/LoginPage";
-import StatPage from "./pages/Stat/StatPage";
 import RegisterPage from "./pages/Register/RegisterPage.jsx";
 import VolunteersPage from "./pages/Volunteers/VolunteersPage";
 import ProfilePage from "./pages/Profile/ProfilePage";
 import EventsPage from "./pages/Events/EventsPage.jsx";
-
+import AdminPage from "./pages/Admin/AdminPage.jsx";
 
 const router = createBrowserRouter([
     {
@@ -28,7 +27,7 @@ const router = createBrowserRouter([
             },
             {
                 path: "/admin",
-                Component:StatPage,
+                Component:AdminPage,
             },
             {
                 path:"/profile",
@@ -42,10 +41,6 @@ const router = createBrowserRouter([
                 path: "/volunteers",
                 Component: VolunteersPage,
             },
-            {
-                path: "/stat",
-                Component:StatPage,
-            },
         ]
     }
 ])