149 lines
4.3 KiB
React
149 lines
4.3 KiB
React
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;
|