116 lines
3.5 KiB
React
116 lines
3.5 KiB
React
import React, { useState } from "react";
|
|
import styles from "./StatPage.module.css";
|
|
|
|
function StatPage() {
|
|
const [months, setMonths] = useState(3);
|
|
const participationRate = 77;
|
|
|
|
// 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="#07f60fff"
|
|
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;
|