feat: Amélioration du dashboard

Front-End/src/app/[locale]/admin/page.js

@@ -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>
   );
 }