add stat prototype

src/pages/Stat/StatPage.jsx

@@ -0,0 +1,115 @@
+import React, { useState } from "react";
+import styles from "./StatPage.module.css";
+
+function StatPage() {
+  const [months, setMonths] = useState(3);
+  const participationRate = 90;
+
+  // les event incomplets
+  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" },
+  ];
+/* c la liste des membres en attente*/
+  const pendingMembers = [
+    { name: "Alice Dupont" },
+    { name: "Bob Martin" },
+    { name: "Charlie Durand" },
+  ];
+
+  const handleValidate = (name) => {
+    console.log(`Valider ${name}`);
+  };
+
+  const handleReject = (name) => {
+    console.log(`Refuser ${name}`);
+  };
+
+  return (
+    <div className={styles.container}>
+      <div className={`${styles.leftBlock} glassCard`}>
+        <div className={styles.participationHeader}>
+          <label htmlFor="months">Taux de participation 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 className={styles.chartContainer}>
+          <svg viewBox="0 0 100 100" className={styles.donutChart}>
+            <circle
+              cx="50"
+              cy="50"
+              r="40"
+              fill="none"
+              stroke="#e0e0e0"
+              strokeWidth="20"
+            />
+            <circle
+              cx="50"
+              cy="50"
+              r="40"
+              fill="none"
+              stroke="#4CAF50"
+              strokeWidth="20"
+              strokeDasharray={`${participationRate} 100`}
+              transform="rotate(-90 50 50)"
+            />
+            <text x="50" y="50" textAnchor="middle" dy="5" fontSize="16">
+              {participationRate}%
+            </text>
+          </svg>
+        </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
+                    className={styles.validateButton}
+                    onClick={() => handleValidate(member.name)}
+                  >
+                    Valider
+                  </button>
+                  <button
+                    className={styles.rejectButton}
+                    onClick={() => handleReject(member.name)}
+                  >
+                    Refuser
+                  </button>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default StatPage;

src/pages/Stat/StatPage.module.css

@@ -0,0 +1,119 @@
+.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;
+}
+
+.participationHeader {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+  width: 100%;
+}
+
+.monthsDropdown {
+  margin-left: 10px;
+  padding: 5px;
+  border-radius: 5px;
+  border: 1px solid #ccc;
+}
+
+.chartContainer {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.donutChart {
+  width: 150px;
+  height: 150px;
+}
+
+.rightSection {
+  width: 60%;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.rightBlock {
+  width: 100%;
+}
+
+.eventsContainer {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  margin-top: 15px;
+}
+
+.eventCard {
+  flex: 1;
+  padding: 10px;
+  text-align: center;
+  padding-bottom:200px;
+}
+
+.membersContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-top: 15px;
+}
+
+.memberCard {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+}
+
+.buttonGroup {
+  display: flex;
+  gap: 10px;
+}
+
+.validateButton {
+  background-color: #4CAF50;
+  color: white;
+  border: none;
+  padding: 5px 10px;
+  border-radius: 15px;
+  cursor: pointer;
+  width:200px;
+}
+
+.rejectButton {
+  background-color: #f44336;
+  color: white;
+  border: none;
+  padding: 5px 10px;
+  border-radius: 15px;
+  cursor: pointer;
+  width:200px;
+}

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";
 
 const router = createBrowserRouter([
     {
@@ -15,6 +16,10 @@ const router = createBrowserRouter([
             {
                 path: "/login",
                 Component: LoginPage,
+            },
+            {
+                path: "/stat",
+                Component:StatPage,
             }
         ]
     }