Fixed bugs on Calendar

components/CalendrierTrajets.tsx

@@ -1,6 +1,9 @@
 'use client';
 
 import { useState, useEffect } from 'react';
+import { DndContext, DragEndEvent, DragOverlay, DragStartEvent, useDraggable, useDroppable } from '@dnd-kit/core';
+import { CSS } from '@dnd-kit/utilities';
+import TrajetDetailModal from './TrajetDetailModal';
 
 interface Trajet {
   id: string;
@@ -28,12 +31,135 @@ interface CalendrierTrajetsProps {
   refreshTrigger?: number;
 }
 
+// Composant draggable pour un événement de trajet
+function DraggableTrajetEvent({ trajet, onClick }: { trajet: Trajet; onClick: (e: React.MouseEvent, trajet: Trajet) => void }) {
+  // Empêcher le drag pour les trajets annulés ou validés
+  const canDrag = trajet.statut !== 'Annulé' && trajet.statut !== 'Validé' && trajet.statut !== 'Terminé';
+  
+  const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({
+    id: trajet.id,
+    data: { trajet },
+    disabled: !canDrag,
+  });
+
+  const style = {
+    transform: CSS.Translate.toString(transform),
+    opacity: isDragging ? 0.5 : 1,
+  };
+
+  const getStatutStyle = (statut: string) => {
+    switch (statut) {
+      case 'Validé':
+        return {
+          bg: 'bg-purple-500',
+          text: 'text-white',
+          border: 'border-purple-600',
+        };
+      case 'Terminé':
+        return {
+          bg: 'bg-green-500',
+          text: 'text-white',
+          border: 'border-green-600',
+        };
+      case 'En cours':
+        return {
+          bg: 'bg-blue-500',
+          text: 'text-white',
+          border: 'border-blue-600',
+        };
+      case 'Annulé':
+        return {
+          bg: 'bg-red-500',
+          text: 'text-white',
+          border: 'border-red-600',
+        };
+      default:
+        return {
+          bg: 'bg-lblue',
+          text: 'text-white',
+          border: 'border-lblue',
+        };
+    }
+  };
+
+  const formatTime = (dateString: string) => {
+    const date = new Date(dateString);
+    return date.toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' });
+  };
+
+  const styleObj = getStatutStyle(trajet.statut);
+
+  return (
+    <button
+      ref={setNodeRef}
+      style={style}
+      {...listeners}
+      {...attributes}
+      onClick={(e) => onClick(e, trajet)}
+      className={`text-[10px] px-1.5 py-0.5 rounded border ${styleObj.bg} ${styleObj.text} ${styleObj.border} font-semibold truncate w-full text-left transition-all flex items-center gap-1 ${canDrag ? 'hover:shadow-md cursor-grab active:cursor-grabbing' : 'cursor-default opacity-75'} ${isDragging ? 'opacity-50' : ''}`}
+      title={`${trajet.adherent.prenom} ${trajet.adherent.nom} - ${trajet.chauffeur ? `${trajet.chauffeur.prenom} ${trajet.chauffeur.nom}` : 'Sans chauffeur'} - ${trajet.statut}`}
+    >
+      <span className="font-bold">
+        {trajet.chauffeur
+          ? `${trajet.chauffeur.prenom.charAt(0)}${trajet.chauffeur.nom.charAt(0)}`
+          : '?'}
+      </span>
+      <span className="opacity-90">•</span>
+      <span className="opacity-90">{formatTime(trajet.date)}</span>
+    </button>
+  );
+}
+
+// Composant droppable pour une cellule de jour
+function DroppableDayCell({ 
+  date, 
+  children, 
+  isToday, 
+  isSelected, 
+  onDateClick 
+}: { 
+  date: Date; 
+  children: React.ReactNode;
+  isToday: boolean;
+  isSelected: boolean;
+  onDateClick: (date: Date) => void;
+}) {
+  // Créer un ID basé sur les composants de date pour éviter les problèmes de fuseau horaire
+  const dayId = `day-${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
+  
+  const { setNodeRef, isOver } = useDroppable({
+    id: dayId,
+    data: { date },
+  });
+
+  return (
+    <button
+      ref={setNodeRef}
+      onClick={() => onDateClick(date)}
+      className={`h-24 p-2 rounded-lg border-2 transition-all flex flex-col ${
+        isSelected
+          ? 'border-lblue bg-lblue/10'
+          : isToday
+          ? 'border-lblue bg-lblue/5'
+          : isOver
+          ? 'border-lgreen bg-lgreen/20 border-2'
+          : 'border-gray-200 hover:border-gray-300 hover:bg-gray-50'
+      }`}
+    >
+      {children}
+    </button>
+  );
+}
+
 export default function CalendrierTrajets({ refreshTrigger }: CalendrierTrajetsProps) {
   const [trajets, setTrajets] = useState<Trajet[]>([]);
   const [loading, setLoading] = useState(true);
   const [currentDate, setCurrentDate] = useState(new Date());
   const [selectedDate, setSelectedDate] = useState<Date | null>(null);
   const [selectedTrajets, setSelectedTrajets] = useState<Trajet[]>([]);
+  const [selectedTrajet, setSelectedTrajet] = useState<Trajet | null>(null);
+  const [activeId, setActiveId] = useState<string | null>(null);
+  const [draggedTrajet, setDraggedTrajet] = useState<Trajet | null>(null);
 
   const month = currentDate.getMonth();
   const year = currentDate.getFullYear();
@@ -47,11 +173,13 @@ export default function CalendrierTrajets({ refreshTrigger }: CalendrierTrajetsP
   const adjustedStartingDay = startingDayOfWeek === 0 ? 6 : startingDayOfWeek - 1;
 
   useEffect(() => {
-    fetchTrajets();
+    fetchTrajets(true);
   }, [currentDate, refreshTrigger]);
 
-  const fetchTrajets = async () => {
-    setLoading(true);
+  const fetchTrajets = async (showLoading = true) => {
+    if (showLoading) {
+      setLoading(true);
+    }
     try {
       const startDate = new Date(year, month, 1).toISOString();
       const endDate = new Date(year, month + 1, 0, 23, 59, 59).toISOString();
@@ -62,19 +190,45 @@ export default function CalendrierTrajets({ refreshTrigger }: CalendrierTrajetsP
       if (response.ok) {
         const data = await response.json();
         setTrajets(data);
+        
+        // Mettre à jour la liste des trajets du jour sélectionné après le fetch
+        if (selectedDate) {
+          const trajetsDuJour = data.filter((t: Trajet) => {
+            const trajetDate = new Date(t.date);
+            return (
+              trajetDate.getDate() === selectedDate.getDate() &&
+              trajetDate.getMonth() === selectedDate.getMonth() &&
+              trajetDate.getFullYear() === selectedDate.getFullYear()
+            );
+          });
+          setSelectedTrajets(trajetsDuJour);
+        }
+      } else {
+        console.error('Erreur lors de la récupération des trajets:', response.statusText);
       }
     } catch (error) {
       console.error('Erreur lors du chargement des trajets:', error);
+      // Ne pas vider les trajets en cas d'erreur
     } finally {
-      setLoading(false);
+      if (showLoading) {
+        setLoading(false);
+      }
     }
   };
 
   const getTrajetsForDate = (date: Date): Trajet[] => {
-    const dateStr = date.toISOString().split('T')[0];
+    // Utiliser les composants de date directement pour éviter les problèmes de fuseau horaire
+    const targetYear = date.getFullYear();
+    const targetMonth = date.getMonth();
+    const targetDay = date.getDate();
+    
     return trajets.filter((trajet) => {
-      const trajetDate = new Date(trajet.date).toISOString().split('T')[0];
-      return trajetDate === dateStr;
+      const trajetDate = new Date(trajet.date);
+      return (
+        trajetDate.getFullYear() === targetYear &&
+        trajetDate.getMonth() === targetMonth &&
+        trajetDate.getDate() === targetDay
+      );
     });
   };
 
@@ -84,6 +238,89 @@ export default function CalendrierTrajets({ refreshTrigger }: CalendrierTrajetsP
     setSelectedTrajets(trajetsDuJour);
   };
 
+  const handleTrajetClick = (e: React.MouseEvent, trajet: Trajet) => {
+    e.stopPropagation(); // Empêcher le clic sur la date
+    setSelectedTrajet(trajet);
+  };
+
+  const handleDragStart = (event: DragStartEvent) => {
+    setActiveId(event.active.id as string);
+    const trajet = event.active.data.current?.trajet as Trajet;
+    setDraggedTrajet(trajet);
+  };
+
+  const handleDragEnd = async (event: DragEndEvent) => {
+    const { active, over } = event;
+    setActiveId(null);
+    setDraggedTrajet(null);
+
+    if (!over || !active.data.current?.trajet) {
+      return;
+    }
+
+    const trajet = active.data.current.trajet as Trajet;
+    
+    // Vérifier que le trajet peut être déplacé
+    if (trajet.statut === 'Annulé' || trajet.statut === 'Validé' || trajet.statut === 'Terminé') {
+      return;
+    }
+
+    const targetDayId = over.id as string;
+
+    // Extraire la date de la cible (format: "day-2026-01-23")
+    if (typeof targetDayId === 'string' && targetDayId.startsWith('day-')) {
+      const dateStr = targetDayId.replace('day-', '');
+      const [year, month, day] = dateStr.split('-').map(Number);
+      
+      // Vérifier que les composants de date sont valides
+      if (isNaN(year) || isNaN(month) || isNaN(day)) {
+        return;
+      }
+
+      // Conserver l'heure du trajet original, changer seulement la date
+      const originalDate = new Date(trajet.date);
+      
+      // Créer la nouvelle date avec les composants locaux pour correspondre exactement au calendrier
+      // Note: month - 1 car les mois sont indexés à partir de 0 en JavaScript
+      // On crée la date directement avec l'heure originale mais la date cible
+      // Pour éviter les problèmes de fuseau horaire, on crée d'abord à midi puis on ajuste
+      const newDate = new Date(year, month - 1, day, 12, 0, 0, 0);
+      newDate.setHours(originalDate.getHours(), originalDate.getMinutes(), originalDate.getSeconds(), originalDate.getMilliseconds());
+
+      // Vérifier que la date a changé
+      const originalDateOnly = new Date(originalDate.getFullYear(), originalDate.getMonth(), originalDate.getDate());
+      const newDateOnly = new Date(newDate.getFullYear(), newDate.getMonth(), newDate.getDate());
+      
+      if (originalDateOnly.getTime() === newDateOnly.getTime()) {
+        return; // Même jour, pas besoin de mettre à jour
+      }
+
+      // Mettre à jour le trajet
+      try {
+        const response = await fetch(`/api/trajets/${trajet.id}`, {
+          method: 'PUT',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            date: newDate.toISOString(),
+          }),
+        });
+
+        if (response.ok) {
+          // Utiliser fetchTrajets sans loading pour éviter de vider les trajets pendant le chargement
+          await fetchTrajets(false);
+        } else {
+          const error = await response.json();
+          alert(error.error || 'Erreur lors du déplacement du trajet');
+        }
+      } catch (error) {
+        console.error('Erreur lors du déplacement:', error);
+        alert('Erreur lors du déplacement du trajet');
+      }
+    }
+  };
+
   const goToPreviousMonth = () => {
     setCurrentDate(new Date(year, month - 1, 1));
   };
@@ -162,71 +399,80 @@ export default function CalendrierTrajets({ refreshTrigger }: CalendrierTrajetsP
         <div className="text-center py-8 text-gray-500">Chargement...</div>
       ) : (
         <>
-          {/* Grille du calendrier */}
-          <div className="grid grid-cols-7 gap-2 mb-6">
-            {/* En-têtes des jours */}
-            {days.map((day) => (
-              <div key={day} className="text-center text-sm font-semibold text-gray-600 py-2">
-                {day}
-              </div>
-            ))}
+          {/* Grille du calendrier avec drag and drop */}
+          <DndContext onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
+            <div className="grid grid-cols-7 gap-2 mb-6">
+              {/* En-têtes des jours */}
+              {days.map((day) => (
+                <div key={day} className="text-center text-sm font-semibold text-gray-600 py-2">
+                  {day}
+                </div>
+              ))}
 
-            {/* Jours du calendrier */}
-            {calendarDays.map((date, index) => {
-              if (!date) {
-                return <div key={`empty-${index}`} className="h-24" />;
-              }
+              {/* Jours du calendrier */}
+              {calendarDays.map((date, index) => {
+                if (!date) {
+                  return <div key={`empty-${index}`} className="h-24" />;
+                }
 
-              const trajetsDuJour = getTrajetsForDate(date);
-              const isToday =
-                date.getDate() === new Date().getDate() &&
-                date.getMonth() === new Date().getMonth() &&
-                date.getFullYear() === new Date().getFullYear();
-              const isSelected =
-                selectedDate &&
-                date.getDate() === selectedDate.getDate() &&
-                date.getMonth() === selectedDate.getMonth() &&
-                date.getFullYear() === selectedDate.getFullYear();
+                const trajetsDuJour = getTrajetsForDate(date);
+                const isToday =
+                  date.getDate() === new Date().getDate() &&
+                  date.getMonth() === new Date().getMonth() &&
+                  date.getFullYear() === new Date().getFullYear();
+                const isSelected =
+                  selectedDate &&
+                  date.getDate() === selectedDate.getDate() &&
+                  date.getMonth() === selectedDate.getMonth() &&
+                  date.getFullYear() === selectedDate.getFullYear();
 
-              return (
-                <button
-                  key={date.toISOString()}
-                  onClick={() => handleDateClick(date)}
-                  className={`h-24 p-2 rounded-lg border-2 transition-all flex flex-col ${
-                    isSelected
-                      ? 'border-lblue bg-lblue/10'
-                      : isToday
-                      ? 'border-lblue bg-lblue/5'
-                      : 'border-gray-200 hover:border-gray-300 hover:bg-gray-50'
-                  }`}
-                >
-                  <div className="text-sm font-medium text-gray-900 mb-1">
-                    {date.getDate()}
-                  </div>
-                  {trajetsDuJour.length > 0 && (
-                    <div className="space-y-1 flex-1 overflow-hidden">
-                      {trajetsDuJour.slice(0, 2).map((trajet) => (
-                        <div
-                          key={trajet.id}
-                          className="text-xs px-1.5 py-0.5 rounded bg-lblue text-white truncate"
-                          title={`${trajet.adherent.prenom} ${trajet.adherent.nom} - ${trajet.chauffeur ? `${trajet.chauffeur.prenom} ${trajet.chauffeur.nom}` : 'Sans chauffeur'}`}
-                        >
-                          {trajet.chauffeur
-                            ? `${trajet.chauffeur.prenom.charAt(0)}. ${trajet.chauffeur.nom.charAt(0)}`
-                            : 'Sans ch.'}
-                        </div>
-                      ))}
-                      {trajetsDuJour.length > 2 && (
-                        <div className="text-xs text-gray-500 font-medium">
-                          +{trajetsDuJour.length - 2}
-                        </div>
-                      )}
+                return (
+                  <DroppableDayCell
+                    key={date.toISOString()}
+                    date={date}
+                    isToday={isToday}
+                    isSelected={isSelected}
+                    onDateClick={handleDateClick}
+                  >
+                    <div className="text-sm font-medium text-gray-900 mb-1">
+                      {date.getDate()}
                     </div>
-                  )}
-                </button>
-              );
-            })}
-          </div>
+                    {trajetsDuJour.length > 0 && (
+                      <div className="space-y-1 flex-1 overflow-hidden">
+                        {trajetsDuJour.slice(0, 3).map((trajet) => (
+                          <DraggableTrajetEvent
+                            key={trajet.id}
+                            trajet={trajet}
+                            onClick={handleTrajetClick}
+                          />
+                        ))}
+                        {trajetsDuJour.length > 3 && (
+                          <div className="text-[10px] text-gray-500 font-semibold text-center pt-0.5">
+                            +{trajetsDuJour.length - 3}
+                          </div>
+                        )}
+                      </div>
+                    )}
+                  </DroppableDayCell>
+                );
+              })}
+            </div>
+
+            {/* Overlay pour l'élément en cours de drag */}
+            <DragOverlay>
+              {draggedTrajet ? (
+                <div className="text-[10px] px-2 py-1 rounded-lg border-2 bg-lblue text-white border-lblue font-semibold flex items-center gap-1 shadow-2xl transform rotate-2">
+                  <span className="font-bold">
+                    {draggedTrajet.chauffeur
+                      ? `${draggedTrajet.chauffeur.prenom.charAt(0)}${draggedTrajet.chauffeur.nom.charAt(0)}`
+                      : '?'}
+                  </span>
+                  <span>•</span>
+                  <span>{formatTime(draggedTrajet.date)}</span>
+                </div>
+              ) : null}
+            </DragOverlay>
+          </DndContext>
 
           {/* Détails des trajets du jour sélectionné */}
           {selectedDate && selectedTrajets.length > 0 && (
@@ -235,68 +481,81 @@ export default function CalendrierTrajets({ refreshTrigger }: CalendrierTrajetsP
                 Trajets du {formatDate(selectedDate)}
               </h3>
               <div className="space-y-3">
-                {selectedTrajets.map((trajet) => (
-                  <div
-                    key={trajet.id}
-                    className="p-4 bg-gray-50 rounded-lg border border-gray-200"
-                  >
-                    <div className="flex items-start justify-between">
-                      <div className="flex-1">
-                        <div className="flex items-center gap-2 mb-2">
-                          <span className="text-sm font-semibold text-gray-900">
-                            {trajet.adherent.prenom} {trajet.adherent.nom}
-                          </span>
-                          <span className="px-2 py-0.5 text-xs font-medium rounded bg-lblue/10 text-lblue">
-                            {formatTime(trajet.date)}
-                          </span>
-                          <span
-                            className={`px-2 py-0.5 text-xs font-medium rounded ${
-                              trajet.statut === 'Terminé'
-                                ? 'bg-green-100 text-green-700'
-                                : trajet.statut === 'En cours'
-                                ? 'bg-blue-100 text-blue-700'
-                                : trajet.statut === 'Annulé'
-                                ? 'bg-red-100 text-red-700'
-                                : 'bg-gray-100 text-gray-700'
-                            }`}
-                          >
-                            {trajet.statut}
-                          </span>
-                        </div>
-                        <div className="text-sm text-gray-600 mb-1">
-                          <span className="font-medium">Départ:</span> {trajet.adresseDepart}
-                        </div>
-                        <div className="text-sm text-gray-600 mb-2">
-                          <span className="font-medium">Arrivée:</span> {trajet.adresseArrivee}
-                        </div>
-                        {trajet.chauffeur ? (
-                          <div className="flex items-center gap-2 mt-2">
-                            <svg className="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 17a2 2 0 11-4 0 2 2 0 014 0zM19 17a2 2 0 11-4 0 2 2 0 014 0z" />
-                            </svg>
-                            <span className="text-sm font-medium text-gray-900">
-                              Chauffeur: {trajet.chauffeur.prenom} {trajet.chauffeur.nom}
+                {selectedTrajets.map((trajet) => {
+                  const getStatutColor = (statut: string) => {
+                    switch (statut) {
+                      case 'Validé':
+                        return 'bg-purple-100 text-purple-700 border-purple-200';
+                      case 'Terminé':
+                        return 'bg-green-100 text-green-700 border-green-200';
+                      case 'En cours':
+                        return 'bg-blue-100 text-blue-700 border-blue-200';
+                      case 'Annulé':
+                        return 'bg-red-100 text-red-700 border-red-200';
+                      default:
+                        return 'bg-gray-100 text-gray-700 border-gray-200';
+                    }
+                  };
+
+                  return (
+                    <button
+                      key={trajet.id}
+                      onClick={() => setSelectedTrajet(trajet)}
+                      className="w-full p-4 bg-gray-50 rounded-lg border border-gray-200 hover:border-gray-300 hover:shadow-sm transition-all text-left"
+                    >
+                      <div className="flex items-start justify-between">
+                        <div className="flex-1">
+                          <div className="flex items-center gap-2 mb-2">
+                            <span className="text-sm font-semibold text-gray-900">
+                              {trajet.adherent.prenom} {trajet.adherent.nom}
+                            </span>
+                            <span className="px-2 py-0.5 text-xs font-medium rounded bg-lblue/10 text-lblue">
+                              {formatTime(trajet.date)}
+                            </span>
+                            <span
+                              className={`px-2 py-0.5 text-xs font-medium rounded border ${getStatutColor(trajet.statut)}`}
+                            >
+                              {trajet.statut}
                             </span>
                           </div>
-                        ) : (
-                          <div className="flex items-center gap-2 mt-2">
-                            <svg className="w-4 h-4 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
-                            </svg>
-                            <span className="text-sm text-orange-600 font-medium">
-                              Aucun chauffeur assigné
-                            </span>
+                          <div className="text-sm text-gray-600 mb-1">
+                            <span className="font-medium">Départ:</span> {trajet.adresseDepart}
                           </div>
-                        )}
-                        {trajet.commentaire && (
-                          <div className="mt-2 text-sm text-gray-500 italic">
-                            {trajet.commentaire}
+                          <div className="text-sm text-gray-600 mb-2">
+                            <span className="font-medium">Arrivée:</span> {trajet.adresseArrivee}
                           </div>
-                        )}
+                          {trajet.chauffeur ? (
+                            <div className="flex items-center gap-2 mt-2">
+                              <svg className="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 17a2 2 0 11-4 0 2 2 0 014 0zM19 17a2 2 0 11-4 0 2 2 0 014 0z" />
+                              </svg>
+                              <span className="text-sm font-medium text-gray-900">
+                                Chauffeur: {trajet.chauffeur.prenom} {trajet.chauffeur.nom}
+                              </span>
+                            </div>
+                          ) : (
+                            <div className="flex items-center gap-2 mt-2">
+                              <svg className="w-4 h-4 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                              </svg>
+                              <span className="text-sm text-orange-600 font-medium">
+                                Aucun chauffeur assigné
+                              </span>
+                            </div>
+                          )}
+                          {trajet.commentaire && (
+                            <div className="mt-2 text-sm text-gray-500 italic line-clamp-2">
+                              {trajet.commentaire}
+                            </div>
+                          )}
+                        </div>
+                        <svg className="w-5 h-5 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                        </svg>
                       </div>
-                    </div>
-                  </div>
-                ))}
+                    </button>
+                  );
+                })}
               </div>
             </div>
           )}
@@ -308,6 +567,18 @@ export default function CalendrierTrajets({ refreshTrigger }: CalendrierTrajetsP
           )}
         </>
       )}
+
+      {/* Modal de détails du trajet */}
+      {selectedTrajet && (
+        <TrajetDetailModal
+          trajet={selectedTrajet}
+          onClose={() => setSelectedTrajet(null)}
+          onUpdate={() => {
+            fetchTrajets();
+            setSelectedTrajet(null);
+          }}
+        />
+      )}
     </div>
   );
 }