Added Chat Page
This commit is contained in:
258
components/ArchivesTrajets.tsx
Normal file
258
components/ArchivesTrajets.tsx
Normal file
@@ -0,0 +1,258 @@
|
||||
'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-8">
|
||||
<div className="text-center text-gray-500">Chargement des archives...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-white rounded-lg shadow-sm">
|
||||
{/* Barre de recherche */}
|
||||
<div className="p-6 border-b border-gray-200">
|
||||
<div className="flex items-center 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-4 py-2.5 pl-10 border border-gray-300 rounded-lg focus:ring-2 focus:ring-lblue focus:border-transparent"
|
||||
/>
|
||||
<svg
|
||||
className="w-5 h-5 text-gray-400 absolute 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-6">
|
||||
{filteredTrajets.length === 0 ? (
|
||||
<div className="text-center py-12 text-gray-500">
|
||||
{searchTerm ? 'Aucun trajet trouvé' : 'Aucun trajet archivé'}
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{filteredTrajets.map((trajet) => (
|
||||
<div
|
||||
key={trajet.id}
|
||||
className="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow"
|
||||
>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<div className="w-10 h-10 rounded-full bg-lgreen flex items-center justify-center text-white font-semibold text-sm">
|
||||
{getInitials(trajet.adherent.nom, trajet.adherent.prenom)}
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-semibold text-gray-900">
|
||||
{trajet.adherent.prenom} {trajet.adherent.nom}
|
||||
</div>
|
||||
<div className="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)}`}>
|
||||
{trajet.statut}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3 mb-3">
|
||||
<div className="flex items-start gap-2">
|
||||
<div className="w-6 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>
|
||||
<div className="text-xs text-gray-500">Départ</div>
|
||||
<div className="text-sm text-gray-900">{trajet.adresseDepart}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<div className="w-6 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>
|
||||
<div className="text-xs text-gray-500">Arrivée</div>
|
||||
<div className="text-sm text-gray-900">{trajet.adresseArrivee}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{trajet.chauffeur && (
|
||||
<div className="flex items-center gap-2 text-sm text-gray-600">
|
||||
<svg className="w-4 h-4" 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>Chauffeur: {trajet.chauffeur.prenom} {trajet.chauffeur.nom}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => handleRestoreClick(trajet.id)}
|
||||
className="ml-4 px-4 py-2 text-sm font-medium text-lgreen hover:text-dgreen transition-colors flex items-center gap-2"
|
||||
>
|
||||
<svg className="w-4 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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user