Added optimizations for mobile
This commit is contained in:
@@ -130,8 +130,8 @@ export default function ArchivesTrajets() {
|
||||
|
||||
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 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>
|
||||
);
|
||||
}
|
||||
@@ -139,18 +139,18 @@ export default function ArchivesTrajets() {
|
||||
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="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-4 py-2.5 pl-10 border border-gray-300 rounded-lg focus:ring-2 focus:ring-lblue focus:border-transparent"
|
||||
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-5 h-5 text-gray-400 absolute left-3 top-1/2 transform -translate-y-1/2"
|
||||
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"
|
||||
@@ -162,73 +162,73 @@ export default function ArchivesTrajets() {
|
||||
</div>
|
||||
|
||||
{/* Liste des trajets archivés */}
|
||||
<div className="p-6">
|
||||
<div className="p-3 md:p-4 lg:p-6">
|
||||
{filteredTrajets.length === 0 ? (
|
||||
<div className="text-center py-12 text-gray-500">
|
||||
<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-4">
|
||||
<div className="space-y-3 md:space-y-4">
|
||||
{filteredTrajets.map((trajet) => (
|
||||
<div
|
||||
key={trajet.id}
|
||||
className="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow"
|
||||
className="border border-gray-200 rounded-lg p-3 md:p-4 hover:shadow-md transition-shadow"
|
||||
>
|
||||
<div className="flex items-start justify-between">
|
||||
<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-3 mb-3">
|
||||
<div className="w-10 h-10 rounded-full bg-lgreen flex items-center justify-center text-white font-semibold text-sm">
|
||||
<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>
|
||||
<div className="font-semibold text-gray-900">
|
||||
<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-sm text-gray-500">
|
||||
<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)}`}>
|
||||
<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-3 mb-3">
|
||||
<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-6 h-6 rounded-full bg-lgreen flex items-center justify-center text-white text-xs font-bold mt-0.5 flex-shrink-0">
|
||||
<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>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="text-xs text-gray-500">Départ</div>
|
||||
<div className="text-sm text-gray-900">{trajet.adresseDepart}</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-6 h-6 rounded-full bg-lblue flex items-center justify-center text-white text-xs font-bold mt-0.5 flex-shrink-0">
|
||||
<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>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="text-xs text-gray-500">Arrivée</div>
|
||||
<div className="text-sm text-gray-900">{trajet.adresseArrivee}</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-sm text-gray-600">
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<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>Chauffeur: {trajet.chauffeur.prenom} {trajet.chauffeur.nom}</span>
|
||||
<span className="truncate">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"
|
||||
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-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<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
|
||||
|
||||
Reference in New Issue
Block a user