end animation + dropdown menu

package.json

@@ -12,8 +12,14 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@floating-ui/react": "^0.27.16",
+    "@mui/material": "^7.3.6",
+    "bootstrap": "^5.3.8",
     "chart.js": "^4.5.1",
     "react": "^19.1.1",
+    "react-bootstrap": "^2.10.10",
     "react-chartjs-2": "^5.3.1",
     "react-dom": "^19.1.1",
     "react-router": "^7.9.4"

src/pages/Stat/StatPage.jsx

@@ -1,27 +1,37 @@
 import React, { useState } 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 { readUsedSize } from "chart.js/helpers";
+import { MenuItem, Select, FormControl, InputLabel } from "@mui/material";
 
-// Enregistrer les éléments nécessaires
 Chart.register(ArcElement);
 
 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) => {
@@ -39,8 +49,8 @@ function StatPage() {
         data: [participationRate, 100 - participationRate],
         backgroundColor: ["#1e60f9ff", "#ffffffff"],
         borderWidth: 0,
-        weight:10,
+        weight: 10,
-        cutout: "90%",
+        cutout: "95%",
         circumference: 360,
         rotation: -90,
       },
@@ -67,38 +77,57 @@ function StatPage() {
     <div className={styles.container}>
       <div className={`${styles.leftBlock} glassCard`}>
         <div className={styles.participationHeader}>
-          <div className={styles.partiText}>
+          <div className={`${styles.partiText} glassCard`}>
-          <label htmlFor="months">Taux de participation </label>
+            <label htmlFor={styles.months}>Taux de participation depuis :</label>
-          <label htmlFor="months2">depuis : </label>
             
-          <select
+            <FormControl>
-            id="months"
+              <Select
-            value={months}
+    value={selected}
-            onChange={(e) => setMonths(e.target.value)}
+    onChange={(e) => setSelected(e.target.value)}
-            className={styles.monthsDropdown}
+    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
   >
-            <option value="1">1 mois</option>
+    <MenuItem value="1" sx={{ fontSize: "18px" }}>1 mois</MenuItem>
-            <option value="3">3 mois</option>
+    <MenuItem value="3" sx={{ fontSize: "18px" }}>3 mois</MenuItem>
-            <option value="6">6 mois</option>
+    <MenuItem value="6" sx={{ fontSize: "18px" }}>6 mois</MenuItem>
-            <option value="12">12 mois</option>
+    <MenuItem value="12" sx={{ fontSize: "18px" }}>12 mois</MenuItem>
-          </select>
+  </Select>
-          </div>
+</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={{
+            <div className={styles.chartPercentage}>
-                position: "absolute",
-                top: "50%",
-                left: "50%",
-                textAlign:"center",
-                transform: "translate(-50%, -50%)",
-                fontSize: "60px",
-                fontWeight: "bold",
-                color: "#333",
-              }}
-            >
               {participationRate}%
             </div>
           </div> 

src/pages/Stat/StatPage.module.css

@@ -6,6 +6,7 @@
   box-sizing: border-box;
   gap: 20px;
 }
+
 /* style a montrer a giovanni prcq il est + bo */
 /*.glassCard {
   background: rgba(255, 255, 255, 0.2);
@@ -27,41 +28,80 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  height:fit-content;
+  height: fit-content;
 }
 
 .participationHeader {
   display: flex;
   align-items: center;
-  margin-bottom: 20px;
+  /*justify-content: center;*/
-  width: 100%;
-}
-.partiText{
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-}
-.participationHeader label{
-  font-size:20px;
   text-align: center;
+  margin-bottom: 0px;
+  width: 100%;
+}
+.participationHeader #months{
+  text-align:center;
 }
 
-.monthsDropdown {
+.partiText {
-  width:25%;
+  display: flex;
-  border-radius: 5px;
+  align-items: center;
-  opacity: 1;
+  justify-content: center;
-  background-color: transparent;
+  margin-bottom: 2%;
-  border:none;
+  margin-top: 2%;
+  animation: slideInEvent 2s;
+}
+
+.partiText label {
+  transition: all 0.3s ease;
+}
+
+
+.participationHeader label {
+  font-size: 20px;
+  text-align: right;
+}
+.participationHeader p{
+  width:fit-content;
 }
 
 
 .chartContainer {
-  
   max-width: 80%;
   margin: 0 auto;
   position: relative;
+
+  animation: slideEvent2 2s;
 }
 
+@keyframes slideEvent2 {
+  from {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+.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;
+}
 
 .circularProgress {
   width: 100%;
@@ -82,7 +122,6 @@
   font-family: Arial, sans-serif;
 }
 
-
 .rightSection {
   width: 60%;
   display: flex;
@@ -93,8 +132,9 @@
 .rightBlock {
   width: 100%;
 }
-.rightBlock>h2{
+
-  font-size:29px;
+.rightBlock > h2 {
+  font-size: 29px;
 }
 
 .eventsContainer {
@@ -102,46 +142,165 @@
   flex-direction: row;
   gap: 10px;
   margin-top: 15px;
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding-bottom: 10px;
+  scroll-behavior: smooth;
 }
 
+/* Style de la scrollbar horizontale */
+.eventsContainer::-webkit-scrollbar {
+  height: 8px;
+}
+
+.eventsContainer::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.1);
+  border-radius: 10px;
+}
+
+.eventsContainer::-webkit-scrollbar-thumb {
+  background: rgba(30, 96, 249, 0.5);
+  border-radius: 10px;
+}
+
+.eventsContainer::-webkit-scrollbar-thumb:hover {
+  background: rgba(30, 96, 249, 0.7);
+}
 
 .eventCard {
-  flex: 1;
+  min-width: calc((100% - 20px) / 3);
+  max-width: calc((100% - 20px) / 3);
+  flex-shrink: 0;
   padding: 10px;
   text-align: center;
-  padding-bottom:200px;
+  padding-bottom: 200px;
+  box-sizing: border-box;
+  opacity: 0;
+  transform: translateX(20px);
+  animation: slideInEvent 1s ease forwards;
 }
-.eventCard>h3{
+
+/* animation card */
+.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;
+}
+
+
+@keyframes slideInEvent {
+  from {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.eventCard > h3 {
   font-size: 24px;
 }
+
 .membersContainer {
   display: flex;
   flex-direction: column;
   gap: 10px;
   margin-top: 15px;
+  max-height: 181px;
+  overflow-y: auto;
+  padding-right: 5px;
+  scroll-behavior: smooth;
 }
 
+/* style scrollbar */ 
+.membersContainer.membersContainer::-webkit-scrollbar {
+  width: 8px;
+}
+
+.membersContainer.membersContainer::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.1);
+  border-radius: 10px;
+}
+
+.membersContainer.membersContainer::-webkit-scrollbar-thumb {
+  background: red;
+  border-radius: 10px;
+}
+
+.membersContainer.membersContainer::-webkit-scrollbar-thumb:hover {
+  background: rgba(125, 249, 30, 0.7);
+}
+
+/*//////*/
 .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 p{
+
+/* Animation différée pour chaque carte de membre */
+.memberCard:nth-child(1) {
+  animation-delay: 0s;
+}
+
+.memberCard:nth-child(2) {
+  animation-delay: 0.1s;
+}
+
+.memberCard:nth-child(3) {
+  animation-delay: 0.2s;
+}
+
+
+
+
+@keyframes slideInMember {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.memberCard p {
   font-weight: bold;
   font-size: 20px;
 }
 
-
 .buttonGroup {
   display: flex;
   gap: 10px;
   justify-content: right;
 }
 
-
-
-
 @media screen and (max-width: 760px) {
   .container {
     flex-direction: column;
@@ -151,16 +310,14 @@
   .leftBlock {
     width: 100%;
     margin-bottom: 20px;
-    height:fit-content;
+    height: fit-content;
   }
   
   .rightSection {
     width: 100%;
   }
   
-  .eventsContainer {
+  
-    flex-direction: column;
-  }
   
   .eventCard {
     width: 100%;
@@ -175,7 +332,6 @@
     flex-direction: column;
     align-items: flex-start;
     gap: 10px;
-    
   }
   
   .buttonGroup {
@@ -189,6 +345,8 @@
     text-align: center;
     padding: 8px;
   }
+
+  .membersContainer {
+    max-height: 300px;
+  }
 }
-
-    

src/pages/Stat/test.jsx

@@ -0,0 +1,26 @@
+import React, { useState } from "react";
+import { MenuItem, Select, FormControl, InputLabel } from "@mui/material";
+
+function TestDropdown() {
+  const [selected, setSelected] = useState("3");
+
+  return (
+    <div style={{ padding: "20px" }}>
+      <FormControl fullWidth>
+        <InputLabel>Mois</InputLabel>
+        <Select
+          value={selected}
+          label="Mois"
+          onChange={(e) => setSelected(e.target.value)}
+        >
+          <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>
+  );
+}
+
+export default TestDropdown;

src/router.js

@@ -3,6 +3,7 @@ import Layout from "./layout.jsx";
 import HomePage from "./pages/Home/HomePage";
 import LoginPage from "./pages/Login/LoginPage";
 import StatPage from "./pages/Stat/StatPage";
+import testPage from "./pages/Stat/test.jsx"
 
 const router = createBrowserRouter([
     {
@@ -20,6 +21,10 @@ const router = createBrowserRouter([
             {
                 path: "/stat",
                 Component:StatPage,
+            },
+            {
+                path: "/test",
+                Component:testPage,
             }
         ]
     }