fix: Mise à jour des upcomming events

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 && (