314 lines
12 KiB
TypeScript
314 lines
12 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { useState, useEffect } from 'react';
|
||
|
|
|
||
|
|
interface Trajet {
|
||
|
|
id: string;
|
||
|
|
date: string;
|
||
|
|
adresseDepart: string;
|
||
|
|
adresseArrivee: string;
|
||
|
|
commentaire?: string | null;
|
||
|
|
statut: string;
|
||
|
|
adherent: {
|
||
|
|
id: string;
|
||
|
|
nom: string;
|
||
|
|
prenom: string;
|
||
|
|
telephone: string;
|
||
|
|
email: string;
|
||
|
|
};
|
||
|
|
chauffeur?: {
|
||
|
|
id: string;
|
||
|
|
nom: string;
|
||
|
|
prenom: string;
|
||
|
|
telephone: string;
|
||
|
|
} | null;
|
||
|
|
}
|
||
|
|
|
||
|
|
interface CalendrierTrajetsProps {
|
||
|
|
refreshTrigger?: number;
|
||
|
|
}
|
||
|
|
|
||
|
|
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 month = currentDate.getMonth();
|
||
|
|
const year = currentDate.getFullYear();
|
||
|
|
|
||
|
|
const firstDayOfMonth = new Date(year, month, 1);
|
||
|
|
const lastDayOfMonth = new Date(year, month + 1, 0);
|
||
|
|
const daysInMonth = lastDayOfMonth.getDate();
|
||
|
|
const startingDayOfWeek = firstDayOfMonth.getDay();
|
||
|
|
|
||
|
|
// Ajuster pour que lundi soit le premier jour (0 = lundi)
|
||
|
|
const adjustedStartingDay = startingDayOfWeek === 0 ? 6 : startingDayOfWeek - 1;
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
fetchTrajets();
|
||
|
|
}, [currentDate, refreshTrigger]);
|
||
|
|
|
||
|
|
const fetchTrajets = async () => {
|
||
|
|
setLoading(true);
|
||
|
|
try {
|
||
|
|
const startDate = new Date(year, month, 1).toISOString();
|
||
|
|
const endDate = new Date(year, month + 1, 0, 23, 59, 59).toISOString();
|
||
|
|
|
||
|
|
const response = await fetch(
|
||
|
|
`/api/trajets?startDate=${startDate}&endDate=${endDate}`
|
||
|
|
);
|
||
|
|
if (response.ok) {
|
||
|
|
const data = await response.json();
|
||
|
|
setTrajets(data);
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error('Erreur lors du chargement des trajets:', error);
|
||
|
|
} finally {
|
||
|
|
setLoading(false);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const getTrajetsForDate = (date: Date): Trajet[] => {
|
||
|
|
const dateStr = date.toISOString().split('T')[0];
|
||
|
|
return trajets.filter((trajet) => {
|
||
|
|
const trajetDate = new Date(trajet.date).toISOString().split('T')[0];
|
||
|
|
return trajetDate === dateStr;
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleDateClick = (date: Date) => {
|
||
|
|
setSelectedDate(date);
|
||
|
|
const trajetsDuJour = getTrajetsForDate(date);
|
||
|
|
setSelectedTrajets(trajetsDuJour);
|
||
|
|
};
|
||
|
|
|
||
|
|
const goToPreviousMonth = () => {
|
||
|
|
setCurrentDate(new Date(year, month - 1, 1));
|
||
|
|
};
|
||
|
|
|
||
|
|
const goToNextMonth = () => {
|
||
|
|
setCurrentDate(new Date(year, month + 1, 1));
|
||
|
|
};
|
||
|
|
|
||
|
|
const goToToday = () => {
|
||
|
|
setCurrentDate(new Date());
|
||
|
|
};
|
||
|
|
|
||
|
|
const formatDate = (date: Date) => {
|
||
|
|
return date.toLocaleDateString('fr-FR', {
|
||
|
|
weekday: 'long',
|
||
|
|
day: 'numeric',
|
||
|
|
month: 'long',
|
||
|
|
year: 'numeric',
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
const formatTime = (dateString: string) => {
|
||
|
|
const date = new Date(dateString);
|
||
|
|
return date.toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' });
|
||
|
|
};
|
||
|
|
|
||
|
|
const days = ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim'];
|
||
|
|
const calendarDays = [];
|
||
|
|
|
||
|
|
// Ajouter les jours vides du début
|
||
|
|
for (let i = 0; i < adjustedStartingDay; i++) {
|
||
|
|
calendarDays.push(null);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Ajouter les jours du mois
|
||
|
|
for (let day = 1; day <= daysInMonth; day++) {
|
||
|
|
calendarDays.push(new Date(year, month, day));
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="bg-white rounded-lg shadow-sm p-6">
|
||
|
|
{/* En-tête du calendrier */}
|
||
|
|
<div className="flex items-center justify-between mb-6">
|
||
|
|
<h2 className="text-xl font-semibold text-gray-900">
|
||
|
|
{currentDate.toLocaleDateString('fr-FR', { month: 'long', year: 'numeric' })}
|
||
|
|
</h2>
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<button
|
||
|
|
onClick={goToPreviousMonth}
|
||
|
|
className="p-2 rounded-lg hover:bg-gray-100 transition-colors"
|
||
|
|
title="Mois précédent"
|
||
|
|
>
|
||
|
|
<svg className="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
onClick={goToToday}
|
||
|
|
className="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors"
|
||
|
|
>
|
||
|
|
Aujourd'hui
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
onClick={goToNextMonth}
|
||
|
|
className="p-2 rounded-lg hover:bg-gray-100 transition-colors"
|
||
|
|
title="Mois suivant"
|
||
|
|
>
|
||
|
|
<svg className="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{loading ? (
|
||
|
|
<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>
|
||
|
|
))}
|
||
|
|
|
||
|
|
{/* 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();
|
||
|
|
|
||
|
|
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>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</button>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Détails des trajets du jour sélectionné */}
|
||
|
|
{selectedDate && selectedTrajets.length > 0 && (
|
||
|
|
<div className="mt-6 pt-6 border-t border-gray-200">
|
||
|
|
<h3 className="text-lg font-semibold text-gray-900 mb-4">
|
||
|
|
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}
|
||
|
|
</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">
|
||
|
|
{trajet.commentaire}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{selectedDate && selectedTrajets.length === 0 && (
|
||
|
|
<div className="mt-6 pt-6 border-t border-gray-200 text-center text-gray-500">
|
||
|
|
Aucun trajet prévu pour le {formatDate(selectedDate)}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|