+ {/* Section des événements à venir */}
+ {upcomingEvents.length > 0 && (
+
+
+
+ {upcomingEvents.slice(0, 3).map((event, index) => (
+
+ ))}
+
+
+ )}
+
{/* Composant FileUpload et bouton Valider en dessous du tableau */}
{uploadState === 'on' && uploadingStudentId && (
diff --git a/Front-End/src/components/EventCard.js b/Front-End/src/components/EventCard.js
new file mode 100644
index 0000000..ccc2639
--- /dev/null
+++ b/Front-End/src/components/EventCard.js
@@ -0,0 +1,131 @@
+import React from 'react';
+import { CalendarCheck } from 'lucide-react';
+
+/**
+ * Formate une date en format français avec jour de la semaine
+ * @param {string} startDateString - Date de début au format ISO
+ * @param {string} endDateString - Date de fin au format ISO (optionnel)
+ * @returns {object} Objet contenant la date formatée et le jour
+ */
+const formatEventDate = (startDateString, endDateString) => {
+ if (!startDateString)
+ return { formattedDate: '', dayName: '', timeIndicator: '', timeRange: '' };
+
+ try {
+ const startDate = new Date(startDateString);
+ const endDate = endDateString ? new Date(endDateString) : null;
+ const now = new Date();
+ const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+ const eventDate = new Date(
+ startDate.getFullYear(),
+ startDate.getMonth(),
+ startDate.getDate()
+ );
+
+ // Options pour le formatage de la date
+ const dateOptions = {
+ day: 'numeric',
+ month: 'long',
+ year: 'numeric',
+ };
+
+ const dayOptions = {
+ weekday: 'long',
+ };
+
+ const timeOptions = {
+ hour: '2-digit',
+ minute: '2-digit',
+ };
+
+ const formattedDate = startDate.toLocaleDateString('fr-FR', dateOptions);
+ const dayName = startDate.toLocaleDateString('fr-FR', dayOptions);
+
+ // Formatage de l'heure
+ let timeRange = '';
+ if (endDate) {
+ const startTime = startDate.toLocaleTimeString('fr-FR', timeOptions);
+ const endTime = endDate.toLocaleTimeString('fr-FR', timeOptions);
+ timeRange = `${startTime} - ${endTime}`;
+ } else {
+ timeRange = startDate.toLocaleTimeString('fr-FR', timeOptions);
+ }
+
+ // Calcul des jours restants
+ const diffTime = eventDate - today;
+ const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+
+ let timeIndicator = '';
+ if (diffDays === 0) {
+ timeIndicator = "Aujourd'hui";
+ } else if (diffDays === 1) {
+ timeIndicator = 'Demain';
+ } else if (diffDays > 0 && diffDays <= 7) {
+ timeIndicator = `Dans ${diffDays} jours`;
+ }
+
+ return {
+ formattedDate,
+ dayName: dayName.charAt(0).toUpperCase() + dayName.slice(1),
+ timeIndicator,
+ timeRange,
+ };
+ } catch (error) {
+ // logger.error('Erreur lors du formatage de la date:', error);
+ return {
+ formattedDate: startDateString,
+ dayName: '',
+ timeIndicator: '',
+ timeRange: '',
+ };
+ }
+};
+
+/**
+ * Composant EventCard pour afficher les événements à venir
+ * @param {string} title - Titre de l'événement
+ * @param {string} start - Date de début de l'événement (format ISO)
+ * @param {string} end - Date de fin de l'événement (format ISO)
+ * @param {string} date - Date de l'événement (pour compatibilité)
+ * @param {string} description - Description de l'événement
+ * @param {string} type - Type d'événement (optionnel)
+ * @returns {JSX.Element} Carte d'événement
+ */
+const EventCard = ({ title, start, end, date, description, type }) => {
+ // Utiliser start si disponible, sinon date pour compatibilité
+ const eventDate = start || date;
+ const { formattedDate, dayName, timeIndicator, timeRange } = formatEventDate(
+ eventDate,
+ end
+ );
+
+ return (
+
+
+
+
+
+
+
{title}
+
+ {dayName}
+ {formattedDate}
+ {timeRange && (
+ {timeRange}
+ )}
+ {timeIndicator && (
+
+ {timeIndicator}
+
+ )}
+
+ {description && (
+
{description}
+ )}
+
+
+
+ );
+};
+
+export default EventCard;