add stat prototype

2025-11-23 18:11:16 +01:00
1 parent dcc78353f2
commit 5248d51b05
@@ -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;