259 lines
10 KiB
TypeScript
259 lines
10 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { useNotification } from './NotificationProvider';
|
|
import ConfirmModal from './ConfirmModal';
|
|
|
|
interface Trajet {
|
|
id: string;
|
|
date: string;
|
|
adresseDepart: string;
|
|
adresseArrivee: string;
|
|
commentaire?: string | null;
|
|
statut: string;
|
|
archived: boolean;
|
|
adherent: {
|
|
id: string;
|
|
nom: string;
|
|
prenom: string;
|
|
telephone: string;
|
|
email: string;
|
|
};
|
|
chauffeur?: {
|
|
id: string;
|
|
nom: string;
|
|
prenom: string;
|
|
telephone: string;
|
|
} | null;
|
|
}
|
|
|
|
export default function ArchivesTrajets() {
|
|
const { showNotification } = useNotification();
|
|
const [trajets, setTrajets] = useState<Trajet[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
const [showRestoreConfirm, setShowRestoreConfirm] = useState(false);
|
|
const [trajetToRestore, setTrajetToRestore] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
fetchTrajets();
|
|
}, []);
|
|
|
|
const fetchTrajets = async () => {
|
|
setLoading(true);
|
|
try {
|
|
const response = await fetch('/api/trajets/archives');
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
setTrajets(data);
|
|
}
|
|
} catch (error) {
|
|
console.error('Erreur lors du chargement des archives:', error);
|
|
showNotification('error', 'Erreur lors du chargement des archives');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleRestoreClick = (trajetId: string) => {
|
|
setTrajetToRestore(trajetId);
|
|
setShowRestoreConfirm(true);
|
|
};
|
|
|
|
const handleRestore = async () => {
|
|
if (!trajetToRestore) return;
|
|
|
|
setShowRestoreConfirm(false);
|
|
try {
|
|
const response = await fetch(`/api/trajets/${trajetToRestore}/archive`, {
|
|
method: 'DELETE',
|
|
});
|
|
|
|
if (response.ok) {
|
|
showNotification('success', 'Trajet restauré avec succès');
|
|
fetchTrajets();
|
|
} else {
|
|
const error = await response.json();
|
|
showNotification('error', error.error || 'Erreur lors de la restauration du trajet');
|
|
}
|
|
} catch (error) {
|
|
console.error('Erreur lors de la restauration:', error);
|
|
showNotification('error', 'Erreur lors de la restauration du trajet');
|
|
} finally {
|
|
setTrajetToRestore(null);
|
|
}
|
|
};
|
|
|
|
const formatDate = (dateString: string) => {
|
|
const date = new Date(dateString);
|
|
return date.toLocaleDateString('fr-FR', {
|
|
day: '2-digit',
|
|
month: '2-digit',
|
|
year: 'numeric',
|
|
});
|
|
};
|
|
|
|
const formatTime = (dateString: string) => {
|
|
const date = new Date(dateString);
|
|
return date.toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' });
|
|
};
|
|
|
|
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';
|
|
}
|
|
};
|
|
|
|
const getInitials = (nom: string, prenom: string) => {
|
|
return `${prenom.charAt(0)}${nom.charAt(0)}`.toUpperCase();
|
|
};
|
|
|
|
const filteredTrajets = trajets.filter((trajet) => {
|
|
const searchLower = searchTerm.toLowerCase();
|
|
return (
|
|
trajet.adherent.nom.toLowerCase().includes(searchLower) ||
|
|
trajet.adherent.prenom.toLowerCase().includes(searchLower) ||
|
|
trajet.adresseDepart.toLowerCase().includes(searchLower) ||
|
|
trajet.adresseArrivee.toLowerCase().includes(searchLower) ||
|
|
(trajet.chauffeur && `${trajet.chauffeur.prenom} ${trajet.chauffeur.nom}`.toLowerCase().includes(searchLower))
|
|
);
|
|
});
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="bg-white rounded-lg shadow-sm p-4 md:p-8">
|
|
<div className="text-center text-sm md:text-base text-gray-500">Chargement des archives...</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="bg-white rounded-lg shadow-sm">
|
|
{/* Barre de recherche */}
|
|
<div className="p-3 md:p-4 lg:p-6 border-b border-gray-200">
|
|
<div className="flex items-center gap-2 md:gap-4">
|
|
<div className="flex-1 relative">
|
|
<input
|
|
type="text"
|
|
placeholder="Rechercher dans les archives..."
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
className="w-full px-3 md:px-4 py-2 md:py-2.5 pl-9 md:pl-10 text-sm md:text-base border border-gray-300 rounded-lg focus:ring-2 focus:ring-lblue focus:border-transparent"
|
|
/>
|
|
<svg
|
|
className="w-4 h-4 md:w-5 md:h-5 text-gray-400 absolute left-2.5 md:left-3 top-1/2 transform -translate-y-1/2"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Liste des trajets archivés */}
|
|
<div className="p-3 md:p-4 lg:p-6">
|
|
{filteredTrajets.length === 0 ? (
|
|
<div className="text-center py-8 md:py-12 text-sm md:text-base text-gray-500">
|
|
{searchTerm ? 'Aucun trajet trouvé' : 'Aucun trajet archivé'}
|
|
</div>
|
|
) : (
|
|
<div className="space-y-3 md:space-y-4">
|
|
{filteredTrajets.map((trajet) => (
|
|
<div
|
|
key={trajet.id}
|
|
className="border border-gray-200 rounded-lg p-3 md:p-4 hover:shadow-md transition-shadow"
|
|
>
|
|
<div className="flex flex-col md:flex-row md:items-start md:justify-between gap-3 md:gap-4">
|
|
<div className="flex-1">
|
|
<div className="flex items-center gap-2 md:gap-3 mb-2 md:mb-3 flex-wrap">
|
|
<div className="w-8 h-8 md:w-10 md:h-10 rounded-full bg-lgreen flex items-center justify-center text-white font-semibold text-xs md:text-sm flex-shrink-0">
|
|
{getInitials(trajet.adherent.nom, trajet.adherent.prenom)}
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="font-semibold text-sm md:text-base text-gray-900 truncate">
|
|
{trajet.adherent.prenom} {trajet.adherent.nom}
|
|
</div>
|
|
<div className="text-xs md:text-sm text-gray-500">
|
|
{formatDate(trajet.date)} à {formatTime(trajet.date)}
|
|
</div>
|
|
</div>
|
|
<span className={`px-2 py-1 text-xs font-medium rounded border ${getStatutColor(trajet.statut)} flex-shrink-0`}>
|
|
{trajet.statut}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-3 mb-2 md:mb-3">
|
|
<div className="flex items-start gap-2">
|
|
<div className="w-5 h-5 md:w-6 md:h-6 rounded-full bg-lgreen flex items-center justify-center text-white text-xs font-bold mt-0.5 flex-shrink-0">
|
|
A
|
|
</div>
|
|
<div className="min-w-0 flex-1">
|
|
<div className="text-xs text-gray-500">Départ</div>
|
|
<div className="text-xs md:text-sm text-gray-900 break-words">{trajet.adresseDepart}</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-start gap-2">
|
|
<div className="w-5 h-5 md:w-6 md:h-6 rounded-full bg-lblue flex items-center justify-center text-white text-xs font-bold mt-0.5 flex-shrink-0">
|
|
B
|
|
</div>
|
|
<div className="min-w-0 flex-1">
|
|
<div className="text-xs text-gray-500">Arrivée</div>
|
|
<div className="text-xs md:text-sm text-gray-900 break-words">{trajet.adresseArrivee}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{trajet.chauffeur && (
|
|
<div className="flex items-center gap-2 text-xs md:text-sm text-gray-600">
|
|
<svg className="w-3.5 h-3.5 md:w-4 md:h-4 flex-shrink-0" 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="truncate">Chauffeur: {trajet.chauffeur.prenom} {trajet.chauffeur.nom}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<button
|
|
onClick={() => handleRestoreClick(trajet.id)}
|
|
className="md:ml-4 px-3 md:px-4 py-2 text-xs md:text-sm font-medium text-lgreen hover:text-dgreen transition-colors flex items-center justify-center gap-1.5 md:gap-2 w-full md:w-auto"
|
|
>
|
|
<svg className="w-3.5 h-3.5 md:w-4 md:h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
|
</svg>
|
|
Restaurer
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<ConfirmModal
|
|
isOpen={showRestoreConfirm}
|
|
title="Restaurer le trajet"
|
|
message="Êtes-vous sûr de vouloir restaurer ce trajet ? Il sera à nouveau visible dans le calendrier."
|
|
confirmText="Restaurer"
|
|
cancelText="Annuler"
|
|
confirmColor="primary"
|
|
onConfirm={handleRestore}
|
|
onCancel={() => {
|
|
setShowRestoreConfirm(false);
|
|
setTrajetToRestore(null);
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|