mirror of
https://git.v0id.ovh/n3wt-innov/n3wt-school.git
synced 2026-01-28 15:33:22 +00:00
feat: Amélioration du dashboard
This commit is contained in:
N3WT DE COMPET
@ -1,6 +1,6 @@
|
||||
{
|
||||
"dashboard": "Tableau de bord",
|
||||
"totalStudents": "Total des étudiants",
|
||||
"totalStudents": "Total d'étudiants inscrits",
|
||||
"pendingRegistrations": "Inscriptions en attente",
|
||||
"reInscriptionRate": "Taux de réinscription",
|
||||
"structureCapacity": "Capacité de la structure",
|
||||
|
||||
@ -1,10 +1,8 @@
|
||||
'use client';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { Users, Clock, CalendarCheck, School, TrendingUp } from 'lucide-react';
|
||||
import { Users, Clock, CalendarCheck, School } from 'lucide-react';
|
||||
import Loader from '@/components/Loader';
|
||||
import ClasseDetails from '@/components/ClasseDetails';
|
||||
import { fetchClasses } from '@/app/actions/schoolAction';
|
||||
import StatCard from '@/components/StatCard';
|
||||
import logger from '@/utils/logger';
|
||||
import {
|
||||
@ -13,8 +11,9 @@ import {
|
||||
} from '@/app/actions/subscriptionAction';
|
||||
import { fetchUpcomingEvents } from '@/app/actions/planningAction';
|
||||
import { useEstablishment } from '@/context/EstablishmentContext';
|
||||
import { useNotification } from '@/context/NotificationContext';
|
||||
import Attendance from '@/components/Grades/Attendance';
|
||||
import LineChart from '@/components/Charts/LineChart';
|
||||
import PieChart from '@/components/Charts/PieChart';
|
||||
|
||||
// Composant EventCard pour afficher les événements
|
||||
const EventCard = ({ title, date, description, type }) => (
|
||||
@ -30,60 +29,95 @@ const EventCard = ({ title, date, description, type }) => (
|
||||
</div>
|
||||
);
|
||||
|
||||
const mockCompletionRate = 72; // en pourcentage
|
||||
|
||||
export default function DashboardPage() {
|
||||
const t = useTranslations('dashboard');
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [totalStudents, setTotalStudents] = useState(0);
|
||||
const [pendingRegistration, setPendingRegistration] = useState(0);
|
||||
const [structureCapacity, setStructureCapacity] = useState(0);
|
||||
const [currentYearRegistrationCount, setCurrentYearRegistrationCount] =
|
||||
useState(0);
|
||||
const [upcomingEvents, setUpcomingEvents] = useState([]);
|
||||
const [monthlyStats, setMonthlyStats] = useState({
|
||||
inscriptions: [],
|
||||
completionRate: 0,
|
||||
});
|
||||
|
||||
const [classes, setClasses] = useState([]);
|
||||
const [absencesToday, setAbsencesToday] = useState([]);
|
||||
const { selectedEstablishmentId, selectedEstablishmentTotalCapacity } =
|
||||
useEstablishment();
|
||||
const { showNotification } = useNotification();
|
||||
|
||||
const [statusDistribution, setStatusDistribution] = useState([
|
||||
{ label: 'Non envoyé', value: 0 },
|
||||
{ label: 'En attente', value: 0 },
|
||||
{ label: 'En validation', value: 0 },
|
||||
{ label: 'Validé', value: 0 },
|
||||
]);
|
||||
const [monthlyRegistrations, setMonthlyRegistrations] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!selectedEstablishmentId) return;
|
||||
|
||||
setIsLoading(true); // Début du chargement
|
||||
|
||||
// Fetch des classes
|
||||
fetchClasses(selectedEstablishmentId)
|
||||
.then((data) => {
|
||||
setClasses(data);
|
||||
logger.info('Classes fetched:', data);
|
||||
|
||||
const nbMaxStudents = data.reduce(
|
||||
(acc, classe) => acc + classe.number_of_students,
|
||||
0
|
||||
);
|
||||
const nbStudents = data.reduce(
|
||||
(acc, classe) => acc + classe.students.length,
|
||||
0
|
||||
);
|
||||
setStructureCapacity(nbMaxStudents);
|
||||
setTotalStudents(nbStudents);
|
||||
})
|
||||
.catch((error) => {
|
||||
logger.error('Error fetching classes:', error);
|
||||
showNotification(
|
||||
'Error fetching classes: ' + error.message,
|
||||
'error',
|
||||
'Erreur'
|
||||
);
|
||||
});
|
||||
|
||||
// Fetch des formulaires d'inscription
|
||||
fetchRegisterForms(selectedEstablishmentId)
|
||||
.then((data) => {
|
||||
logger.info('Pending registrations fetched:', data);
|
||||
setPendingRegistration(data.count);
|
||||
setCurrentYearRegistrationCount(data.count);
|
||||
const forms = data.registerForms;
|
||||
|
||||
// Filtrage des statuts
|
||||
const distribution = [
|
||||
{
|
||||
label: 'Non envoyé',
|
||||
value: forms.filter((f) => f.status === 1).length,
|
||||
},
|
||||
{
|
||||
label: 'En attente',
|
||||
value: forms.filter((f) => f.status === 2 || f.status === 7).length,
|
||||
},
|
||||
{
|
||||
label: 'En validation',
|
||||
value: forms.filter((f) => f.status === 3 || f.status === 8).length,
|
||||
},
|
||||
{
|
||||
label: 'Validé',
|
||||
value: forms.filter((f) => f.status === 5).length,
|
||||
},
|
||||
];
|
||||
setStatusDistribution(distribution);
|
||||
|
||||
// Calcul des inscriptions validées par mois
|
||||
const validForms = forms.filter(
|
||||
(f) => f.status === 5 && f.formatted_last_update
|
||||
);
|
||||
// Format attendu : "29-05-2025 09:23"
|
||||
const monthLabels = [
|
||||
'Janv',
|
||||
'Fév',
|
||||
'Mars',
|
||||
'Avr',
|
||||
'Mai',
|
||||
'Juin',
|
||||
'Juil',
|
||||
'Août',
|
||||
'Sept',
|
||||
'Oct',
|
||||
'Nov',
|
||||
'Déc',
|
||||
];
|
||||
const monthlyCount = Array(12).fill(0);
|
||||
|
||||
validForms.forEach((f) => {
|
||||
const [day, month, yearAndTime] = f.formatted_last_update.split('-');
|
||||
const monthIdx = parseInt(month, 10) - 1;
|
||||
if (monthIdx >= 0 && monthIdx < 12) {
|
||||
monthlyCount[monthIdx]++;
|
||||
}
|
||||
});
|
||||
|
||||
const monthlyData = monthLabels.map((label, idx) => ({
|
||||
month: label,
|
||||
value: monthlyCount[idx],
|
||||
}));
|
||||
|
||||
setMonthlyRegistrations(monthlyData);
|
||||
})
|
||||
.catch((error) => {
|
||||
logger.error('Error fetching pending registrations:', error);
|
||||
@ -123,6 +157,13 @@ export default function DashboardPage() {
|
||||
});
|
||||
}, [selectedEstablishmentId]);
|
||||
|
||||
// Calculs à partir de statusDistribution
|
||||
const totalStudents =
|
||||
statusDistribution.find((s) => s.label === 'Validé')?.value || 0;
|
||||
const pendingRegistrationCount = statusDistribution
|
||||
.filter((s) => s.label !== 'Validé')
|
||||
.reduce((acc, s) => acc + s.value, 0);
|
||||
|
||||
if (isLoading) return <Loader />;
|
||||
|
||||
return (
|
||||
@ -138,13 +179,13 @@ export default function DashboardPage() {
|
||||
/>
|
||||
<StatCard
|
||||
title={t('pendingRegistrations')}
|
||||
value={`${pendingRegistration} `}
|
||||
value={pendingRegistrationCount}
|
||||
icon={<Clock className="text-green-500" size={24} />}
|
||||
color="green"
|
||||
/>
|
||||
<StatCard
|
||||
title={t('structureCapacity')}
|
||||
value={`${selectedEstablishmentTotalCapacity}`}
|
||||
value={selectedEstablishmentTotalCapacity}
|
||||
icon={<School className="text-green-500" size={24} />}
|
||||
color="emerald"
|
||||
/>
|
||||
@ -152,7 +193,7 @@ export default function DashboardPage() {
|
||||
title={t('capacityRate')}
|
||||
value={
|
||||
selectedEstablishmentTotalCapacity > 0
|
||||
? `${((totalStudents / selectedEstablishmentTotalCapacity) * 100).toFixed(1)}%`
|
||||
? `${((totalStudents / selectedEstablishmentTotalCapacity) * 100).toFixed(2)}%`
|
||||
: 0
|
||||
}
|
||||
icon={<School className="text-orange-500" size={24} />}
|
||||
@ -161,15 +202,19 @@ export default function DashboardPage() {
|
||||
</div>
|
||||
|
||||
{/* Événements et KPIs */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
|
||||
{/* Graphique des inscriptions */}
|
||||
<div className="lg:col-span-2 bg-stone-50 p-6 rounded-lg shadow-sm border border-gray-100">
|
||||
<h2 className="text-lg font-semibold mb-4">
|
||||
<div className="lg:col-span-1 bg-stone-50 p-6 rounded-lg shadow-sm border border-gray-100">
|
||||
<h2 className="text-lg font-semibold mb-6">
|
||||
{t('inscriptionTrends')}
|
||||
</h2>
|
||||
{/* Insérer ici un composant de graphique */}
|
||||
<div className="h-64 bg-gray-50 rounded flex items-center justify-center mb-6">
|
||||
<TrendingUp size={48} className="text-gray-300" />
|
||||
<div className="flex flex-row gap-4">
|
||||
<div className="flex-1 p-6">
|
||||
<LineChart data={monthlyRegistrations} />
|
||||
</div>
|
||||
<div className="flex-1 flex items-center justify-center">
|
||||
<PieChart data={statusDistribution} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -183,7 +228,9 @@ export default function DashboardPage() {
|
||||
</div>
|
||||
|
||||
{/* Ajout du composant Attendance en dessous, en lecture seule */}
|
||||
<Attendance absences={absencesToday} readOnly={true} />
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
|
||||
<Attendance absences={absencesToday} readOnly={true} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
45
Front-End/src/components/Charts/LineChart.js
Normal file
45
Front-End/src/components/Charts/LineChart.js
Normal file
@ -0,0 +1,45 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function LineChart({ data }) {
|
||||
if (!data || data.length === 0) {
|
||||
return <div className="text-gray-400 text-center">Aucune donnée</div>;
|
||||
}
|
||||
|
||||
// Hauteur max du graphique en pixels
|
||||
const chartHeight = 120;
|
||||
const maxValue = Math.max(...data.map((d) => d.value), 1);
|
||||
|
||||
// Trouver les indices des barres ayant la valeur max (pour gérer les égalités)
|
||||
const maxIndices = data
|
||||
.map((d, idx) => (d.value === maxValue ? idx : -1))
|
||||
.filter((idx) => idx !== -1);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="w-full flex items-end space-x-4"
|
||||
style={{ height: chartHeight }}
|
||||
>
|
||||
{data.map((point, idx) => {
|
||||
const barHeight = Math.max((point.value / maxValue) * chartHeight, 8); // min 8px
|
||||
const isMax = maxIndices.includes(idx);
|
||||
return (
|
||||
<div key={idx} className="flex flex-col items-center flex-1">
|
||||
{/* Valeur au-dessus de la barre */}
|
||||
<span className="text-xs mb-1 text-gray-700 font-semibold">
|
||||
{point.value}
|
||||
</span>
|
||||
<div
|
||||
className={`${isMax ? 'bg-emerald-400' : 'bg-blue-400'} rounded-t w-4`}
|
||||
style={{
|
||||
height: `${barHeight}px`,
|
||||
transition: 'height 0.3s',
|
||||
}}
|
||||
title={`${point.month}: ${point.value}`}
|
||||
/>
|
||||
<span className="text-xs mt-1 text-gray-600">{point.month}</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
67
Front-End/src/components/Charts/PieChart.js
Normal file
67
Front-End/src/components/Charts/PieChart.js
Normal file
@ -0,0 +1,67 @@
|
||||
import React from 'react';
|
||||
|
||||
const COLORS = [
|
||||
'fill-blue-400 text-blue-400',
|
||||
'fill-orange-400 text-orange-400',
|
||||
'fill-purple-400 text-purple-400',
|
||||
'fill-emerald-400 text-emerald-400',
|
||||
];
|
||||
|
||||
export default function PieChart({ data }) {
|
||||
if (!data || data.length === 0) {
|
||||
return <div className="text-gray-400 text-center">Aucune donnée</div>;
|
||||
}
|
||||
|
||||
const total = data.reduce((acc, d) => acc + d.value, 0);
|
||||
if (total === 0) {
|
||||
return <div className="text-gray-400 text-center">Aucune donnée</div>;
|
||||
}
|
||||
|
||||
let cumulative = 0;
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-center w-full">
|
||||
<svg width={100} height={100} viewBox="0 0 32 32">
|
||||
{data.map((slice, idx) => {
|
||||
const value = (slice.value / total) * 100;
|
||||
const startAngle = (cumulative / 100) * 360;
|
||||
const endAngle = ((cumulative + value) / 100) * 360;
|
||||
const largeArc = value > 50 ? 1 : 0;
|
||||
const x1 = 16 + 16 * Math.cos((Math.PI * (startAngle - 90)) / 180);
|
||||
const y1 = 16 + 16 * Math.sin((Math.PI * (startAngle - 90)) / 180);
|
||||
const x2 = 16 + 16 * Math.cos((Math.PI * (endAngle - 90)) / 180);
|
||||
const y2 = 16 + 16 * Math.sin((Math.PI * (endAngle - 90)) / 180);
|
||||
const pathData = `
|
||||
M16,16
|
||||
L${x1},${y1}
|
||||
A16,16 0 ${largeArc} 1 ${x2},${y2}
|
||||
Z
|
||||
`;
|
||||
cumulative += value;
|
||||
return (
|
||||
<path
|
||||
key={idx}
|
||||
d={pathData}
|
||||
className={COLORS[idx % COLORS.length].split(' ')[0]}
|
||||
stroke="#fff"
|
||||
strokeWidth="0.5"
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</svg>
|
||||
<div className="ml-4 flex flex-col space-y-1">
|
||||
{data.map((slice, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className={`flex items-center text-xs font-semibold ${COLORS[idx % COLORS.length].split(' ')[1]}`}
|
||||
>
|
||||
<span
|
||||
className={`inline-block w-3 h-3 mr-2 rounded ${COLORS[idx % COLORS.length].split(' ')[0]}`}
|
||||
/>
|
||||
{slice.label} : {slice.value}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user