fix: Mise à jour des upcomming events

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 (
+    <div className="bg-white p-4 rounded-lg shadow-sm border border-gray-200 mb-3 hover:shadow-md transition-shadow">
+      <div className="flex items-start gap-3">
+        <div className="flex-shrink-0 mt-1">
+          <CalendarCheck className="text-emerald-500" size={20} />
+        </div>
+        <div className="flex-1">
+          <h4 className="font-medium text-gray-900 mb-1">{title}</h4>
+          <div className="flex flex-col text-sm text-gray-500">
+            <span className="font-medium text-emerald-600">{dayName}</span>
+            <span>{formattedDate}</span>
+            {timeRange && (
+              <span className="text-xs text-gray-600 mt-1">{timeRange}</span>
+            )}
+            {timeIndicator && (
+              <span className="text-xs text-blue-600 mt-1 font-medium">
+                {timeIndicator}
+              </span>
+            )}
+          </div>
+          {description && (
+            <p className="text-sm mt-2 text-gray-700">{description}</p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default EventCard;