fix: Mise à jour des upcomming events

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

@@ -1,9 +1,17 @@
 'use client';
 import React, { useState, useEffect } from 'react';
 import { useTranslations } from 'next-intl';
-import { Users, Clock, CalendarCheck, School, AlertTriangle, CheckCircle2 } from 'lucide-react';
+import {
+  Users,
+  Clock,
+  CalendarCheck,
+  School,
+  AlertTriangle,
+  CheckCircle2,
+} from 'lucide-react';
 import Loader from '@/components/Loader';
 import StatCard from '@/components/StatCard';
+import EventCard from '@/components/EventCard';
 import logger from '@/utils/logger';
 import {
   fetchRegisterForms,
@@ -15,20 +23,6 @@ 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 }) => (
-  <div className="bg-stone-50 p-4 rounded-lg shadow-sm border border-gray-100 mb-4">
-    <div className="flex items-center gap-3">
-      <CalendarCheck className="text-blue-500" size={20} />
-      <div>
-        <h4 className="font-medium">{title}</h4>
-        <p className="text-sm text-gray-500">{date}</p>
-        <p className="text-sm mt-1">{description}</p>
-      </div>
-    </div>
-  </div>
-);
-
 const mockCompletionRate = 72; // en pourcentage
 
 export default function DashboardPage() {
@@ -39,8 +33,11 @@ export default function DashboardPage() {
   const [upcomingEvents, setUpcomingEvents] = useState([]);
 
   const [absencesToday, setAbsencesToday] = useState([]);
-  const { selectedEstablishmentId, selectedEstablishmentTotalCapacity, apiDocuseal } =
-    useEstablishment();
+  const {
+    selectedEstablishmentId,
+    selectedEstablishmentTotalCapacity,
+    apiDocuseal,
+  } = useEstablishment();
 
   const [statusDistribution, setStatusDistribution] = useState([
     { label: 'Non envoyé', value: 0 },

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

@@ -2,7 +2,14 @@
 import React, { useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import Table from '@/components/Table';
-import { Edit3, Users, Download, Eye, Upload, CalendarDays } from 'lucide-react';
+import {
+  Edit3,
+  Users,
+  Download,
+  Eye,
+  Upload,
+  CalendarDays,
+} from 'lucide-react';
 import StatusLabel from '@/components/StatusLabel';
 import FileUpload from '@/components/FileUpload';
 import { FE_PARENTS_EDIT_SUBSCRIPTION_URL } from '@/utils/Url';
@@ -10,17 +17,16 @@ import {
   fetchChildren,
   editRegisterForm,
 } from '@/app/actions/subscriptionAction';
+import { fetchUpcomingEvents } from '@/app/actions/planningAction';
 import logger from '@/utils/logger';
 import { BASE_URL } from '@/utils/Url';
 import { useEstablishment } from '@/context/EstablishmentContext';
 import { useCsrfToken } from '@/context/CsrfContext';
 import { useClasses } from '@/context/ClassesContext';
-import {
-  PlanningProvider,
-  PlanningModes
-} from '@/context/PlanningContext';
+import { PlanningProvider, PlanningModes } from '@/context/PlanningContext';
 import SectionHeader from '@/components/SectionHeader';
 import ParentPlanningSection from '@/components/ParentPlanningSection';
+import EventCard from '@/components/EventCard';
 
 export default function ParentHomePage() {
   const [children, setChildren] = useState([]);
@@ -30,6 +36,7 @@ export default function ParentHomePage() {
   const [uploadState, setUploadState] = useState('off'); // État "on" ou "off" pour l'affichage du composant
   const [showPlanning, setShowPlanning] = useState(false);
   const [planningClassName, setPlanningClassName] = useState(null);
+  const [upcomingEvents, setUpcomingEvents] = useState([]);
   const router = useRouter();
   const csrfToken = useCsrfToken();
   const [reloadFetch, setReloadFetch] = useState(false);
@@ -43,7 +50,20 @@ export default function ParentHomePage() {
       });
       setReloadFetch(false);
     }
-  }, [selectedEstablishmentId, reloadFetch]);
+  }, [selectedEstablishmentId, reloadFetch, user]);
+
+  useEffect(() => {
+    if (selectedEstablishmentId) {
+      // Fetch des événements à venir
+      fetchUpcomingEvents(selectedEstablishmentId)
+        .then((data) => {
+          setUpcomingEvents(data);
+        })
+        .catch((error) => {
+          logger.error('Error fetching upcoming events:', error);
+        });
+    }
+  }, [selectedEstablishmentId]);
 
   function handleView(eleveId) {
     logger.debug(`View dossier for student id: ${eleveId}`);
@@ -106,7 +126,9 @@ export default function ParentHomePage() {
   };
 
   const showClassPlanning = (student) => {
-    setPlanningClassName(`${student.associated_class_name} - ${getNiveauLabel(student.level)}`);
+    setPlanningClassName(
+      `${student.associated_class_name} - ${getNiveauLabel(student.level)}`
+    );
     setShowPlanning(true);
   };
 
@@ -143,7 +165,7 @@ export default function ParentHomePage() {
     {
       name: 'Classe',
       transform: (row) => (
-        <div className="text-center">{(row.student.associated_class_name)}</div>
+        <div className="text-center">{row.student.associated_class_name}</div>
       ),
     },
     {
@@ -276,25 +298,36 @@ export default function ParentHomePage() {
               modeSet={PlanningModes.CLASS_SCHEDULE}
               readOnly={true}
             >
-              <ParentPlanningSection
-                planningClassName={planningClassName}
-              />
+              <ParentPlanningSection planningClassName={planningClassName} />
             </PlanningProvider>
           </div>
         </>
       ) : (
         // Affichage classique avec le tableau des enfants
         <div>
+          {/* Section des événements à venir */}
+          {upcomingEvents.length > 0 && (
+            <div className="mb-6">
+              <SectionHeader
+                icon={CalendarDays}
+                title="Événements à venir"
+                description="Prochains événements de l'établissement"
+              />
+              <div className="bg-stone-50 p-4 rounded-lg shadow-sm border border-gray-100">
+                {upcomingEvents.slice(0, 3).map((event, index) => (
+                  <EventCard key={index} {...event} />
+                ))}
+              </div>
+            </div>
+          )}
+
           <SectionHeader
             icon={Users}
             title="Vos enfants"
             description="Suivez le parcours de vos enfants"
           />
           <div className="overflow-x-auto">
-            <Table
-              data={children}
-              columns={childrenColumns}
-            />
+            <Table data={children} columns={childrenColumns} />
           </div>
           {/* Composant FileUpload et bouton Valider en dessous du tableau */}
           {uploadState === 'on' && uploadingStudentId && (