-
-
-
-
- {trajet.adherent.prenom} {trajet.adherent.nom}
-
-
- {formatTime(trajet.date)}
-
-
- {trajet.statut}
-
-
-
- Départ: {trajet.adresseDepart}
-
-
- Arrivée: {trajet.adresseArrivee}
-
- {trajet.chauffeur ? (
-
-
-
- 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 (
+
+ );
+ })}
)}
@@ -308,6 +567,18 @@ export default function CalendrierTrajets({ refreshTrigger }: CalendrierTrajetsP
)}
)}
+
+ {/* Modal de détails du trajet */}
+ {selectedTrajet && (
+
setSelectedTrajet(null)}
+ onUpdate={() => {
+ fetchTrajets();
+ setSelectedTrajet(null);
+ }}
+ />
+ )}
);
}
diff --git a/components/TrajetDetailModal.tsx b/components/TrajetDetailModal.tsx
new file mode 100644
index 0000000..48be88a
--- /dev/null
+++ b/components/TrajetDetailModal.tsx
@@ -0,0 +1,316 @@
+'use client';
+
+import { useState } from 'react';
+import TrajetForm from './TrajetForm';
+import ValidationModal from './ValidationModal';
+
+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 TrajetDetailModalProps {
+ trajet: Trajet;
+ onClose: () => void;
+ onUpdate: () => void;
+}
+
+export default function TrajetDetailModal({ trajet, onClose, onUpdate }: TrajetDetailModalProps) {
+ const [showEditForm, setShowEditForm] = useState(false);
+ const [showValidationModal, setShowValidationModal] = useState(false);
+ const [loading, setLoading] = useState(false);
+
+ const formatDate = (dateString: string) => {
+ const date = new Date(dateString);
+ 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 handleCancel = async () => {
+ if (!confirm('Êtes-vous sûr de vouloir annuler ce trajet ?')) {
+ return;
+ }
+
+ setLoading(true);
+ try {
+ const response = await fetch(`/api/trajets/${trajet.id}`, {
+ method: 'PUT',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({
+ statut: 'Annulé',
+ }),
+ });
+
+ if (response.ok) {
+ onUpdate();
+ onClose();
+ } else {
+ const error = await response.json();
+ alert(error.error || 'Erreur lors de l\'annulation du trajet');
+ }
+ } catch (error) {
+ console.error('Erreur lors de l\'annulation:', error);
+ alert('Erreur lors de l\'annulation du trajet');
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ const getInitials = (nom: string, prenom: string) => {
+ return `${prenom.charAt(0)}${nom.charAt(0)}`.toUpperCase();
+ };
+
+ const getStatutColor = (statut: string) => {
+ switch (statut) {
+ 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';
+ case 'Validé':
+ return 'bg-purple-100 text-purple-700 border-purple-200';
+ default:
+ return 'bg-gray-100 text-gray-700 border-gray-200';
+ }
+ };
+
+ if (showEditForm) {
+ return (
+
setShowEditForm(false)}
+ onSuccess={() => {
+ onUpdate();
+ setShowEditForm(false);
+ onClose();
+ }}
+ trajetToEdit={trajet}
+ />
+ );
+ }
+
+ if (showValidationModal) {
+ return (
+ setShowValidationModal(false)}
+ onSuccess={() => {
+ onUpdate();
+ setShowValidationModal(false);
+ onClose();
+ }}
+ />
+ );
+ }
+
+ return (
+
+
+ {/* Header */}
+
+
+
+
Détails du trajet
+
Informations complètes du trajet
+
+
+
+
+
+ {/* Content */}
+
+
+ {/* Statut */}
+
+ Statut
+
+ {trajet.statut}
+
+
+
+ {/* Adhérent */}
+
+
+
+
+ {getInitials(trajet.adherent.nom, trajet.adherent.prenom)}
+
+
+
+ {trajet.adherent.prenom} {trajet.adherent.nom}
+
+
{trajet.adherent.email}
+
{trajet.adherent.telephone}
+
+
+
+
+ {/* Chauffeur */}
+ {trajet.chauffeur ? (
+
+
+
+
+ {getInitials(trajet.chauffeur.nom, trajet.chauffeur.prenom)}
+
+
+
+ {trajet.chauffeur.prenom} {trajet.chauffeur.nom}
+
+
{trajet.chauffeur.telephone}
+
+
+
+ ) : (
+
+
+
+
+
+
Aucun chauffeur assigné
+
+
+
+ )}
+
+ {/* Date et heure */}
+
+
+
+
+
+
{formatDate(trajet.date)}
+
+
+
+
+
+
+
{formatTime(trajet.date)}
+
+
+
+
+ {/* Adresses */}
+
+
+
+
+
+ A
+
+
{trajet.adresseDepart}
+
+
+
+
+
+
+
+
+
+ B
+
+
{trajet.adresseArrivee}
+
+
+
+
+ {/* Commentaire */}
+ {trajet.commentaire && (
+
+ )}
+
+
+
+ {/* Footer */}
+
+
+
+
+
+ {trajet.chauffeur && trajet.statut === 'Planifié' && (
+
+ )}
+
+
+
+
+
-
Nouveau trajet
-
Créez un nouveau trajet pour un adhérent
+
+ {trajetToEdit ? 'Modifier le trajet' : 'Nouveau trajet'}
+
+
+ {trajetToEdit ? 'Modifiez les informations du trajet' : 'Créez un nouveau trajet pour un adhérent'}
+
diff --git a/components/ValidationModal.tsx b/components/ValidationModal.tsx
new file mode 100644
index 0000000..b1d6a49
--- /dev/null
+++ b/components/ValidationModal.tsx
@@ -0,0 +1,259 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+
+interface Trajet {
+ id: string;
+ date: string;
+ adresseDepart: string;
+ adresseArrivee: string;
+ chauffeur?: {
+ id: string;
+ nom: string;
+ prenom: string;
+ } | null;
+}
+
+interface ValidationModalProps {
+ trajet: Trajet;
+ onClose: () => void;
+ onSuccess: () => void;
+}
+
+export default function ValidationModal({ trajet, onClose, onSuccess }: ValidationModalProps) {
+ const [loading, setLoading] = useState(false);
+ const [dureeTrajet, setDureeTrajet] = useState
(null);
+
+ // Calculer la durée du trajet en heures
+ const calculateDuration = async () => {
+ if (!trajet.adresseDepart || !trajet.adresseArrivee) {
+ return;
+ }
+
+ try {
+ // Géocoder l'adresse de départ
+ const departResponse = await fetch(
+ `https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(trajet.adresseDepart)}&limit=1&countrycodes=fr`,
+ {
+ headers: {
+ 'User-Agent': 'MAD Platform',
+ 'Accept-Language': 'fr-FR,fr;q=0.9',
+ },
+ }
+ );
+
+ if (!departResponse.ok) {
+ return;
+ }
+
+ // Attendre avant la deuxième requête
+ await new Promise(resolve => setTimeout(resolve, 1000));
+
+ const arriveeResponse = await fetch(
+ `https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(trajet.adresseArrivee)}&limit=1&countrycodes=fr`,
+ {
+ headers: {
+ 'User-Agent': 'MAD Platform',
+ 'Accept-Language': 'fr-FR,fr;q=0.9',
+ },
+ }
+ );
+
+ if (departResponse.ok && arriveeResponse.ok) {
+ const [departData, arriveeData] = await Promise.all([
+ departResponse.json(),
+ arriveeResponse.json(),
+ ]);
+
+ if (departData.length > 0 && arriveeData.length > 0) {
+ const lat1 = parseFloat(departData[0].lat);
+ const lon1 = parseFloat(departData[0].lon);
+ const lat2 = parseFloat(arriveeData[0].lat);
+ const lon2 = parseFloat(arriveeData[0].lon);
+
+ // Calcul de la distance (Haversine)
+ const R = 6371; // Rayon de la Terre en km
+ const dLat = ((lat2 - lat1) * Math.PI) / 180;
+ const dLon = ((lon2 - lon1) * Math.PI) / 180;
+ const a =
+ Math.sin(dLat / 2) * Math.sin(dLat / 2) +
+ Math.cos((lat1 * Math.PI) / 180) *
+ Math.cos((lat2 * Math.PI) / 180) *
+ Math.sin(dLon / 2) *
+ Math.sin(dLon / 2);
+ const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+ const distance = R * c; // Distance en km
+
+ // Estimation du temps : vitesse moyenne de 50 km/h en ville
+ // On multiplie par 1.3 pour tenir compte des détours
+ const distanceWithDetour = distance * 1.3;
+ const vitesseMoyenne = 50; // km/h
+ const dureeEnHeures = distanceWithDetour / vitesseMoyenne;
+
+ setDureeTrajet(Math.round(dureeEnHeures * 10) / 10); // Arrondir à 1 décimale
+ }
+ }
+ } catch (error) {
+ console.error('Erreur lors du calcul de la durée:', error);
+ }
+ };
+
+ useEffect(() => {
+ calculateDuration();
+ }, []);
+
+ const handleValidate = async () => {
+ if (!trajet.chauffeur || !dureeTrajet) {
+ alert('Impossible de calculer la durée du trajet');
+ return;
+ }
+
+ setLoading(true);
+ try {
+ const response = await fetch(`/api/trajets/${trajet.id}/validate`, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({
+ dureeHeures: dureeTrajet,
+ }),
+ });
+
+ if (response.ok) {
+ onSuccess();
+ onClose();
+ } else {
+ const error = await response.json();
+ alert(error.error || 'Erreur lors de la validation du trajet');
+ }
+ } catch (error) {
+ console.error('Erreur lors de la validation:', error);
+ alert('Erreur lors de la validation du trajet');
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ return (
+
+
+ {/* Header */}
+
+
+
+
Valider le trajet
+
Confirmer la validation du trajet
+
+
+
+
+
+ {/* Content */}
+
+
+
+
+
+
+
+ En validant ce trajet, les heures seront déduites du contrat du chauffeur.
+
+
+ Cette action ne peut pas être annulée.
+
+
+
+
+
+ {trajet.chauffeur && (
+
+
+
+
+ {trajet.chauffeur.prenom} {trajet.chauffeur.nom}
+
+
+
+ )}
+
+ {dureeTrajet !== null ? (
+
+
+
+
+ Temps estimé
+
+ {dureeTrajet.toFixed(1)}h
+
+
+
+
+ {dureeTrajet.toFixed(1)} heure{dureeTrajet >= 2 ? 's' : ''} sera{dureeTrajet < 2 ? '' : 'ont'} déduite{dureeTrajet < 2 ? '' : 's'} des heures disponibles du chauffeur.
+
+
+
+
+ ) : (
+
+
+
+
Calcul de la durée du trajet...
+
+
+ )}
+
+
+
+ {/* Footer */}
+
+
+
+
+
+
+
+