Merge branch 'features/stat' into 'dev'

Features/stat

See merge request sae-but2/2025-26/gestion-benevoles-association/Frontend!24

package-lock.json

@@ -8,7 +8,9 @@
       "name": "sae-front",
       "version": "0.0.0",
       "dependencies": {
+        "chart.js": "^4.5.1",
         "react": "^19.1.1",
+        "react-chartjs-2": "^5.3.1",
         "react-dom": "^19.1.1",
         "react-router": "^7.9.4"
       },

package.json

@@ -12,7 +12,9 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "chart.js": "^4.5.1",
     "react": "^19.1.1",
+    "react-chartjs-2": "^5.3.1",
     "react-dom": "^19.1.1",
     "react-router": "^7.9.4"
   },
@@ -26,17 +28,17 @@
     "@types/react": "^19.1.16",
     "@types/react-dom": "^19.1.9",
     "@vitejs/plugin-react": "^5.0.4",
+    "@vitest/browser-playwright": "^4.0.8",
+    "@vitest/coverage-v8": "^4.0.8",
     "eslint": "^9.36.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.22",
     "eslint-plugin-storybook": "^10.0.6",
     "globals": "^16.4.0",
+    "playwright": "^1.56.1",
     "prop-types": "^15.8.1",
     "storybook": "^10.0.6",
     "vite": "^7.1.7",
-    "vitest": "^4.0.8",
-    "playwright": "^1.56.1",
-    "@vitest/browser-playwright": "^4.0.8",
-    "@vitest/coverage-v8": "^4.0.8"
+    "vitest": "^4.0.8"
   }
 }

src/pages/Stat/StatPage.jsx

@@ -0,0 +1,148 @@
+import React, { useState } from "react";
+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";
+
+// Enregistrer les éléments nécessaires
+Chart.register(ArcElement);
+
+function StatPage() {
+  const [months, setMonths] = 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" },
+  ];
+
+  const pendingMembers = [
+    { name: "Antoine Ordonneau" },
+    { name: "Giovanni Josserand" },
+    { 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: "90%",
+        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}>
+          <label htmlFor="months">Taux de participation </label>
+          <label htmlFor="months2">depuis : </label>
+
+          <select
+            id="months"
+            value={months}
+            onChange={(e) => setMonths(e.target.value)}
+            className={styles.monthsDropdown}
+          >
+            <option value="1">1 mois</option>
+            <option value="3">3 mois</option>
+            <option value="6">6 mois</option>
+            <option value="12">12 mois</option>
+          </select>
+          </div>
+          
+        </div>
+        <div className={styles.chartContainer}>
+          <div style={{ position: "relative", width: "100%", height: "100%" }}>
+            <Doughnut data={chartData} options={chartOptions} />
+            <div style={{
+                position: "absolute",
+                top: "50%",
+                left: "50%",
+                textAlign:"center",
+                transform: "translate(-50%, -50%)",
+                fontSize: "60px",
+                fontWeight: "bold",
+                color: "#333",
+              }}
+            >
+              {participationRate}%
+            </div>
+          </div>
+        </div>
+      </div>
+      <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>
+      </div>
+    </div>
+  );
+}
+
+export default StatPage;

src/pages/Stat/StatPage.module.css

@@ -0,0 +1,194 @@
+.container {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  padding: 20px;
+  box-sizing: border-box;
+  gap: 20px;
+}
+/* style a montrer a giovanni prcq il est + bo */
+/*.glassCard {
+  background: rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(10px);
+  border-radius: 10px;
+  padding: 15px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+}*/ 
+
+.block {
+  border-radius: 10px;
+  padding: 15px;
+  box-sizing: border-box;
+}
+
+.leftBlock {
+  width: 40%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height:fit-content;
+}
+
+.participationHeader {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+  width: 100%;
+}
+.partiText{
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.participationHeader label{
+  font-size:20px;
+  text-align: center;
+}
+
+.monthsDropdown {
+  width:25%;
+  border-radius: 5px;
+  opacity: 1;
+  background-color: transparent;
+  border:none;
+}
+
+
+.chartContainer {
+  
+  max-width: 80%;
+  margin: 0 auto;
+  position: relative;
+}
+
+
+.circularProgress {
+  width: 100%;
+  height: 100%;
+}
+
+.progressBackground {
+  opacity: 0.3;
+}
+
+.progressBar {
+  transition: stroke-dasharray 0.5s ease; 
+  stroke-linecap: round;
+}
+
+.progressText {
+  font-weight: bold;
+  font-family: Arial, sans-serif;
+}
+
+
+.rightSection {
+  width: 60%;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.rightBlock {
+  width: 100%;
+}
+.rightBlock>h2{
+  font-size:29px;
+}
+
+.eventsContainer {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  margin-top: 15px;
+}
+
+
+.eventCard {
+  flex: 1;
+  padding: 10px;
+  text-align: center;
+  padding-bottom:200px;
+}
+.eventCard>h3{
+  font-size: 24px;
+}
+.membersContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-top: 15px;
+}
+
+.memberCard {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+}
+.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;
+    padding: 10px;
+  }
+
+  .leftBlock {
+    width: 100%;
+    margin-bottom: 20px;
+    height:fit-content;
+  }
+
+  .rightSection {
+    width: 100%;
+  }
+
+  .eventsContainer {
+    flex-direction: column;
+  }
+
+  .eventCard {
+    width: 100%;
+  }
+
+  .donutChart {
+    width: 120px;
+    height: 120px;
+  }
+
+  .memberCard {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+    
+  }
+
+  .buttonGroup {
+    width: 100%;
+    justify-content: space-between;
+  }
+
+  .validateButton,
+  .rejectButton {
+    flex: 1;
+    text-align: center;
+    padding: 8px;
+  }
+}
+
+    

src/router.js

@@ -2,6 +2,7 @@ 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";
@@ -28,6 +29,10 @@ const router = createBrowserRouter([
                 path: "/login",
                 Component: LoginPage,
             },
+            {
+                path: "/stat",
+                Component:StatPage,
+            },
             {
                 path:"/profile",
                 Component:ProfilePage,