Pierre/MAD-Platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Optimization on Calendar Page

Browse Source
This commit is contained in:
Pierre
2026-02-15 15:37:31 +01:00
parent 5772a358f5
commit 0c908a21ac
5 changed files with 354 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/layout.tsx
View File

@@ -14,6 +14,9 @@ const poppins = Poppins({
export const metadata: Metadata = {
title: "Platform SaaS",
description: "Plateforme SaaS",
icons: {
icon: "/logo.svg",
},
};
export default function RootLayout({

172
components/BudgetContent.tsx
View File

@@ -145,7 +145,7 @@ export default function BudgetContent() {
if (loading) {
return (
<div className="bg-white rounded-lg shadow-sm p-8">
<div className="bg-white rounded-lg shadow-sm p-4 sm:p-6 md:p-8">
<div className="text-center text-sm text-gray-500">Chargement...</div>
</div>
);
@@ -153,15 +153,15 @@ export default function BudgetContent() {
if (!data || data.prescripteurs.length === 0) {
return (
<div className="bg-white rounded-lg shadow-sm p-8">
<div className="bg-white rounded-lg shadow-sm p-4 sm:p-6 md:p-8">
<div className="text-center text-gray-500">
<p className="mb-4">Aucun prescripteur configuré.</p>
<p className="text-sm mb-6">
<p className="mb-3 sm:mb-4 text-sm sm:text-base">Aucun prescripteur configuré.</p>
<p className="text-xs sm:text-sm mb-4 sm:mb-6 px-2">
Ajoutez des prescripteurs dans la configuration pour pouvoir définir leurs budgets.
</p>
<Link
href="/dashboard/parametres/configuration"
className="inline-flex items-center gap-2 px-4 py-2 bg-lblue text-white rounded-lg hover:bg-dblue transition-colors text-sm font-medium"
className="inline-flex items-center justify-center gap-2 px-4 py-2.5 sm:py-2 bg-lblue text-white rounded-lg hover:bg-dblue transition-colors text-sm font-medium w-full sm:w-auto"
>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
@@ -177,7 +177,7 @@ export default function BudgetContent() {
const { global, prescripteurs } = data;
return (
<div className="space-y-6">
<div className="space-y-4 sm:space-y-6">
{/* Blocs budget global - style dashboard */}
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4 sm:gap-5">
<div className="bg-white rounded-xl shadow-sm p-4 sm:p-6 border border-gray-100 hover:shadow-lg hover:border-dyellow/30 transition-all duration-300 group">
@@ -225,26 +225,28 @@ export default function BudgetContent() {
{/* Liste des budgets par prescripteur */}
<div className="bg-white rounded-lg shadow-sm overflow-hidden">
<div className="px-6 py-4 border-b border-gray-200">
<h2 className="text-lg font-semibold text-gray-900">Budget par prescripteur</h2>
<p className="text-sm text-gray-500 mt-1">
Cliquez sur un prescripteur pour voir l&apos;historique des participations. Utilisez « Ajouter » pour créditer le budget.
<div className="px-4 sm:px-6 py-3 sm:py-4 border-b border-gray-200">
<h2 className="text-base sm:text-lg font-semibold text-gray-900">Budget par prescripteur</h2>
<p className="text-xs sm:text-sm text-gray-500 mt-1">
Cliquez sur un prescripteur pour voir l&apos;historique. Utilisez « Ajouter » pour créditer le budget.
</p>
</div>
<div className="overflow-x-auto">
{/* Vue desktop - Tableau */}
<div className="hidden md:block overflow-x-auto">
<table className="min-w-full divide-y divide-gray-200">
<thead className="bg-gray-50">
<tr>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
<th className="px-4 sm:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Prescripteur
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
<th className="px-4 sm:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Consommé
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
<th className="px-4 sm:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Restant
</th>
<th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider w-56">
<th className="px-4 sm:px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider min-w-[180px]">
Actions
</th>
</tr>
@@ -257,7 +259,7 @@ export default function BudgetContent() {
className="hover:bg-gray-50 cursor-pointer"
onClick={() => setExpandedPrescripteur(expandedPrescripteur === item.value ? null : item.value)}
>
<td className="px-6 py-4 whitespace-nowrap">
<td className="px-4 sm:px-6 py-3 sm:py-4 whitespace-nowrap">
<div className="flex items-center gap-2">
<span className="text-sm font-medium text-gray-900">{item.value}</span>
{item.historique.length > 0 && (
@@ -274,10 +276,10 @@ export default function BudgetContent() {
)}
</div>
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-orange-600 font-medium">
<td className="px-4 sm:px-6 py-3 sm:py-4 whitespace-nowrap text-sm text-orange-600 font-medium">
{formatEuro(item.consommé)}
</td>
<td className="px-6 py-4 whitespace-nowrap">
<td className="px-4 sm:px-6 py-3 sm:py-4 whitespace-nowrap">
<span
className={`text-sm font-medium ${
item.consommé > item.montant || (item.montant > 0 && item.restant < item.montant * 0.2)
@@ -288,7 +290,7 @@ export default function BudgetContent() {
{formatEuro(item.restant)}
</span>
</td>
<td className="px-6 py-4 whitespace-nowrap text-right" onClick={(e) => e.stopPropagation()}>
<td className="px-4 sm:px-6 py-3 sm:py-4 whitespace-nowrap text-right" onClick={(e) => e.stopPropagation()}>
<div className="flex items-center gap-2 justify-end">
<button
onClick={() => {
@@ -320,12 +322,12 @@ export default function BudgetContent() {
</tr>
{expandedPrescripteur === item.value && item.historique.length > 0 && (
<tr key={`${item.value}-hist`} className="bg-gray-50">
<td colSpan={4} className="px-6 py-4">
<td colSpan={4} className="px-4 sm:px-6 py-4">
<div className="space-y-2">
<h4 className="text-xs font-semibold text-gray-700 uppercase tracking-wide">
Historique des participations
</h4>
<div className="rounded-lg border border-gray-200 overflow-hidden">
<div className="rounded-lg border border-gray-200 overflow-x-auto">
<table className="min-w-full text-sm">
<thead className="bg-gray-100">
<tr>
@@ -362,7 +364,7 @@ export default function BudgetContent() {
)}
{expandedPrescripteur === item.value && item.historique.length === 0 && (
<tr className="bg-gray-50">
<td colSpan={4} className="px-6 py-4">
<td colSpan={4} className="px-4 sm:px-6 py-4">
<p className="text-sm text-gray-500 italic">Aucune participation enregistrée pour ce prescripteur.</p>
</td>
</tr>
@@ -373,7 +375,111 @@ export default function BudgetContent() {
</table>
</div>
<div className="px-6 py-3 bg-gray-50 border-t border-gray-200">
{/* Vue mobile - Cartes */}
<div className="md:hidden divide-y divide-gray-200">
{prescripteurs.map((item) => (
<div key={item.value} className="p-4">
<button
type="button"
className="w-full text-left"
onClick={() => setExpandedPrescripteur(expandedPrescripteur === item.value ? null : item.value)}
>
<div className="flex items-center justify-between gap-2 mb-3">
<span className="font-medium text-gray-900">{item.value}</span>
{item.historique.length > 0 && (
<svg
className={`w-4 h-4 text-gray-400 flex-shrink-0 transition-transform ${expandedPrescripteur === item.value ? 'rotate-90' : ''}`}
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
</svg>
)}
</div>
<div className="grid grid-cols-2 gap-2 text-sm">
<div>
<span className="text-xs text-gray-500 uppercase">Consommé</span>
<p className="text-orange-600 font-medium">{formatEuro(item.consommé)}</p>
</div>
<div>
<span className="text-xs text-gray-500 uppercase">Restant</span>
<p
className={`font-medium ${
item.consommé > item.montant || (item.montant > 0 && item.restant < item.montant * 0.2)
? 'text-red-600'
: 'text-lgreen'
}`}
>
{formatEuro(item.restant)}
</p>
</div>
</div>
</button>
<div className="flex flex-col sm:flex-row gap-2 pt-3 border-t border-gray-200 mt-3" onClick={(e) => e.stopPropagation()}>
<button
onClick={() => {
setAddModalPrescripteur(item.value);
setAddAmount('');
}}
className="flex-1 inline-flex items-center justify-center gap-1.5 px-3 py-2.5 text-sm font-medium text-white bg-lgreen rounded-lg hover:bg-dgreen transition-colors"
>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
</svg>
Ajouter
</button>
<button
onClick={() => {
setRectifierModalPrescripteur(item);
setRectifierBudget(item.montant.toString().replace('.', ','));
setRectifierAjustement((item.ajustementConsomme ?? 0).toString().replace('.', ','));
}}
className="flex-1 inline-flex items-center justify-center gap-1.5 px-3 py-2.5 text-sm font-medium text-white bg-lblue rounded-lg hover:bg-dblue transition-colors"
>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
</svg>
Rectifier
</button>
</div>
{expandedPrescripteur === item.value && item.historique.length > 0 && (
<div className="mt-4 pt-3 border-t border-gray-200 space-y-2">
<h4 className="text-xs font-semibold text-gray-700 uppercase tracking-wide">Historique</h4>
<div className="space-y-1 max-h-48 overflow-y-auto">
{item.historique.map((h) => (
<div
key={h.id}
className="flex items-center justify-between gap-2 py-2 px-3 bg-gray-50 rounded-lg text-sm"
>
<div className="min-w-0 flex-1">
<p className="font-medium text-gray-900 truncate">{h.adherentNom}</p>
<p className="text-xs text-gray-500">{formatDate(h.date)}</p>
</div>
<div className="flex items-center gap-2 flex-shrink-0">
<span className="text-orange-600 font-medium">{formatEuro(h.montant)}</span>
<Link
href="/dashboard/factures"
className="text-lblue hover:underline text-xs font-medium"
>
Voir
</Link>
</div>
</div>
))}
</div>
</div>
)}
{expandedPrescripteur === item.value && item.historique.length === 0 && (
<p className="mt-4 pt-3 border-t border-gray-200 text-sm text-gray-500 italic">
Aucune participation enregistrée.
</p>
)}
</div>
))}
</div>
<div className="px-4 sm:px-6 py-3 bg-gray-50 border-t border-gray-200">
<p className="text-xs text-gray-500">
Les prescripteurs sont définis dans{' '}
<Link href="/dashboard/parametres/configuration" className="text-lblue hover:underline">
@@ -387,7 +493,7 @@ export default function BudgetContent() {
{/* Modal Rectifier */}
{rectifierModalPrescripteur && (
<div
className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50"
className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 overflow-y-auto"
onClick={() => {
setRectifierModalPrescripteur(null);
setRectifierBudget('');
@@ -395,7 +501,7 @@ export default function BudgetContent() {
}}
>
<div
className="bg-white rounded-xl shadow-xl max-w-sm w-full p-6"
className="bg-white rounded-xl shadow-xl max-w-sm w-full p-6 my-4"
onClick={(e) => e.stopPropagation()}
role="dialog"
aria-modal="true"
@@ -442,21 +548,21 @@ export default function BudgetContent() {
</div>
</div>
</div>
<div className="flex gap-3 justify-end">
<div className="flex flex-col-reverse sm:flex-row gap-3 justify-end">
<button
onClick={() => {
setRectifierModalPrescripteur(null);
setRectifierBudget('');
setRectifierAjustement('');
}}
className="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors"
className="w-full sm:w-auto px-4 py-2.5 sm:py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors"
>
Annuler
</button>
<button
onClick={handleRectifier}
disabled={savingId === rectifierModalPrescripteur.value}
className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-lblue rounded-lg hover:bg-dblue disabled:opacity-50 transition-colors"
className="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-4 py-2.5 sm:py-2 text-sm font-medium text-white bg-lblue rounded-lg hover:bg-dblue disabled:opacity-50 transition-colors"
>
{savingId === rectifierModalPrescripteur.value ? (
<>
@@ -483,14 +589,14 @@ export default function BudgetContent() {
{/* Modal Ajouter de l'argent */}
{addModalPrescripteur && (
<div
className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50"
className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 overflow-y-auto"
onClick={() => {
setAddModalPrescripteur(null);
setAddAmount('');
}}
>
<div
className="bg-white rounded-xl shadow-xl max-w-sm w-full p-6"
className="bg-white rounded-xl shadow-xl max-w-sm w-full p-6 my-4"
onClick={(e) => e.stopPropagation()}
role="dialog"
aria-modal="true"
@@ -514,20 +620,20 @@ export default function BudgetContent() {
/>
<span className="text-sm text-gray-500">€</span>
</div>
<div className="flex gap-3 justify-end">
<div className="flex flex-col-reverse sm:flex-row gap-3 justify-end">
<button
onClick={() => {
setAddModalPrescripteur(null);
setAddAmount('');
}}
className="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors"
className="w-full sm:w-auto px-4 py-2.5 sm:py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors"
>
Annuler
</button>
<button
onClick={handleAddMoney}
disabled={savingId === addModalPrescripteur}
className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-lgreen rounded-lg hover:bg-dgreen disabled:opacity-50 transition-colors"
className="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-4 py-2.5 sm:py-2 text-sm font-medium text-white bg-lgreen rounded-lg hover:bg-dgreen disabled:opacity-50 transition-colors"
>
{savingId === addModalPrescripteur ? (
<>

10
components/CalendrierPageContent.tsx
View File

@@ -12,14 +12,14 @@ export default function CalendrierPageContent() {
};
return (
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
{/* Calendrier - Prend 2 colonnes sur grand écran */}
<div className="lg:col-span-2">
<div className="flex flex-col gap-6 sm:gap-8">
{/* Calendrier en haut */}
<div>
<CalendrierTrajets refreshTrigger={refreshTrigger} />
</div>
{/* Liste des derniers trajets - Prend 1 colonne sur grand écran */}
<div className="lg:col-span-1">
{/* Liste des trajets en bas, triable par période */}
<div>
<ListeTrajets onTrajetCreated={handleTrajetCreated} />
</div>
</div>

8
components/DashboardLayout.tsx
View File

@@ -208,8 +208,8 @@ export default function DashboardLayout({ user, children }: DashboardLayoutProps
/>
)}
{/* Sidebar */}
<aside className={`fixed lg:static inset-y-0 left-0 z-50 w-64 bg-white flex flex-col h-screen border-r border-gray-200 transform transition-transform duration-300 ease-in-out ${
{/* Sidebar - fixe sur tous les écrans, seul le contenu principal défile */}
<aside className={`fixed inset-y-0 left-0 z-50 w-64 bg-white flex flex-col h-screen border-r border-gray-200 transform transition-transform duration-300 ease-in-out ${
sidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'
}`}>
{/* Logo Section */}
@@ -289,8 +289,8 @@ export default function DashboardLayout({ user, children }: DashboardLayoutProps
</div>
</aside>
{/* Main Content Area */}
<div className="flex-1 flex flex-col">
{/* Main Content Area - marge gauche sur desktop pour la sidebar fixe */}
<div className="flex-1 flex flex-col lg:ml-64 min-h-screen">
{/* Top Navbar */}
<header className="bg-white border-b border-gray-200 px-4 sm:px-6 py-3 sm:py-4">
<div className="flex items-center justify-between">

353
components/ListeTrajets.tsx
View File

@@ -25,54 +25,91 @@ interface Trajet {
} | null;
}
type FilterPeriod = 'derniers' | 'jour' | 'mois' | 'an' | 'personnalise';
interface ListeTrajetsProps {
onTrajetCreated?: () => void;
compact?: boolean;
}
export default function ListeTrajets({ onTrajetCreated }: ListeTrajetsProps) {
export default function ListeTrajets({ onTrajetCreated, compact }: ListeTrajetsProps) {
const [trajets, setTrajets] = useState<Trajet[]>([]);
const [loading, setLoading] = useState(true);
const [search, setSearch] = useState('');
const [showFilters, setShowFilters] = useState(false);
const [filterStatut, setFilterStatut] = useState<string>('');
const [filterPeriod, setFilterPeriod] = useState<FilterPeriod>('derniers');
const [filterDate, setFilterDate] = useState<string>(() => {
const d = new Date();
return d.toISOString().split('T')[0];
});
const [filterMonth, setFilterMonth] = useState<string>(() => {
const d = new Date();
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`;
});
const [filterYear, setFilterYear] = useState<string>(() => String(new Date().getFullYear()));
const [startDate, setStartDate] = useState<string>('');
const [endDate, setEndDate] = useState<string>('');
const [showTrajetForm, setShowTrajetForm] = useState(false);
const getDateRange = (): { start: string; end: string } | null => {
switch (filterPeriod) {
case 'derniers':
return null;
case 'jour': {
const [y, m, d] = filterDate.split('-').map(Number);
return {
start: new Date(y, m - 1, d, 0, 0, 0).toISOString(),
end: new Date(y, m - 1, d, 23, 59, 59).toISOString(),
};
}
case 'mois': {
const [y, m] = filterMonth.split('-').map(Number);
return {
start: new Date(y, m - 1, 1).toISOString(),
end: new Date(y, m, 0, 23, 59, 59).toISOString(),
};
}
case 'an': {
const y = parseInt(filterYear, 10);
return {
start: new Date(y, 0, 1).toISOString(),
end: new Date(y, 11, 31, 23, 59, 59).toISOString(),
};
}
case 'personnalise':
if (startDate && endDate) {
const start = new Date(startDate);
start.setHours(0, 0, 0, 0);
const end = new Date(endDate);
end.setHours(23, 59, 59, 999);
return { start: start.toISOString(), end: end.toISOString() };
}
return null;
default:
return null;
}
};
const dateRange = getDateRange();
useEffect(() => {
fetchTrajets();
}, [startDate, endDate]);
}, [filterPeriod, filterDate, filterMonth, filterYear, startDate, endDate]);
const fetchTrajets = async () => {
setLoading(true);
try {
const params = new URLSearchParams();
// Si des filtres de date sont appliqués, ne pas limiter les résultats
// Sinon, limiter à 10 pour afficher les derniers trajets créés
if (!startDate && !endDate) {
if (!dateRange) {
params.append('limit', '10');
} else {
params.append('startDate', dateRange.start);
params.append('endDate', dateRange.end);
}
if (startDate) {
// Ajouter l'heure au début de la journée (00:00:00)
const start = new Date(startDate);
start.setHours(0, 0, 0, 0);
params.append('startDate', start.toISOString());
}
if (endDate) {
// Ajouter l'heure à la fin de la journée (23:59:59)
const end = new Date(endDate);
end.setHours(23, 59, 59, 999);
params.append('endDate', end.toISOString());
}
const response = await fetch(`/api/trajets?${params.toString()}`);
if (response.ok) {
const data = await response.json();
// L'API retourne déjà les trajets triés par date de création (plus récents en premier)
// ou par date du trajet si un filtre de date est appliqué
setTrajets(data);
}
} catch (error) {
@@ -117,199 +154,215 @@ export default function ListeTrajets({ onTrajetCreated }: ListeTrajetsProps) {
return `${prenom.charAt(0)}${nom.charAt(0)}`.toUpperCase();
};
const periodLabels: Record<FilterPeriod, string> = {
derniers: 'Derniers',
jour: 'Jour',
mois: 'Mois',
an: 'Année',
personnalise: 'Personnalisé',
};
return (
<div className="bg-white rounded-lg shadow-sm overflow-hidden">
<div
className={`bg-white rounded-lg shadow-sm overflow-hidden flex flex-col ${
compact ? 'h-full min-h-0' : ''
}`}
>
{/* Bloc d'actions */}
<div className="p-4 sm:p-6 border-b border-gray-200">
<div className="flex flex-col gap-3 sm:gap-4">
<div className={`border-b border-gray-200 flex-shrink-0 ${compact ? 'p-3' : 'p-4 sm:p-6'}`}>
<div className="flex flex-col gap-2 sm:gap-3">
{/* Barre de recherche */}
<div className="relative">
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg className="h-4 w-4 sm:h-5 sm:w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="h-4 w-4 text-gray-400" 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>
<input
type="text"
placeholder="Rechercher un trajet..."
placeholder="Rechercher..."
value={search}
onChange={(e) => setSearch(e.target.value)}
className="block w-full pl-10 sm:pl-12 pr-4 py-3 text-base border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-lblue focus:border-lblue transition-all max-w-full"
className="block w-full pl-9 pr-3 py-2 text-sm border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-lblue focus:border-lblue transition-all"
/>
</div>
{/* Filtres par période - rapides et clairs */}
<div>
<label className="block text-xs font-medium text-gray-700 mb-1.5">Période</label>
<div className="flex flex-wrap gap-1.5">
{(['derniers', 'jour', 'mois', 'an', 'personnalise'] as FilterPeriod[]).map((p) => (
<button
key={p}
onClick={() => setFilterPeriod(p)}
className={`px-2.5 py-1.5 text-xs font-medium rounded-lg transition-colors ${
filterPeriod === p
? 'bg-lblue text-white'
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
}`}
>
{periodLabels[p]}
</button>
))}
</div>
</div>
{/* Champs de date selon la période */}
{filterPeriod === 'jour' && (
<div>
<label className="block text-xs font-medium text-gray-700 mb-1">Date</label>
<input
type="date"
value={filterDate}
onChange={(e) => setFilterDate(e.target.value)}
className="block w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-lblue"
/>
</div>
)}
{filterPeriod === 'mois' && (
<div>
<label className="block text-xs font-medium text-gray-700 mb-1">Mois</label>
<input
type="month"
value={filterMonth}
onChange={(e) => setFilterMonth(e.target.value)}
className="block w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-lblue"
/>
</div>
)}
{filterPeriod === 'an' && (
<div>
<label className="block text-xs font-medium text-gray-700 mb-1">Année</label>
<select
value={filterYear}
onChange={(e) => setFilterYear(e.target.value)}
className="block w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-lblue"
>
{Array.from({ length: 6 }, (_, i) => new Date().getFullYear() - 2 + i).map((y) => (
<option key={y} value={y}>
{y}
</option>
))}
</select>
</div>
)}
{filterPeriod === 'personnalise' && (
<div className="grid grid-cols-2 gap-2">
<div>
<label className="block text-xs font-medium text-gray-700 mb-1">Début</label>
<input
type="date"
value={startDate}
onChange={(e) => setStartDate(e.target.value)}
className="block w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-lblue"
/>
</div>
<div>
<label className="block text-xs font-medium text-gray-700 mb-1">Fin</label>
<input
type="date"
value={endDate}
onChange={(e) => setEndDate(e.target.value)}
min={startDate || undefined}
className="block w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-lblue"
/>
</div>
</div>
)}
{/* Actions */}
<div className="flex items-center gap-2">
<div className="flex items-center gap-2 pt-1">
<button
onClick={() => setShowTrajetForm(true)}
className="flex-1 flex items-center justify-center gap-1.5 sm:gap-2 px-3 sm:px-4 py-2 sm:py-2.5 bg-lgreen text-white text-xs sm:text-sm font-medium rounded-lg hover:bg-dgreen transition-colors"
className="flex-1 flex items-center justify-center gap-1.5 px-3 py-2 bg-lgreen text-white text-xs font-medium rounded-lg hover:bg-dgreen transition-colors"
>
<svg className="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
</svg>
<span className="hidden sm:inline">Nouveau trajet</span>
<span className="sm:hidden">Nouveau</span>
Nouveau trajet
</button>
<button
onClick={() => setShowFilters(!showFilters)}
className={`px-3 sm:px-4 py-2 sm:py-2.5 text-xs sm:text-sm font-medium rounded-lg transition-colors flex items-center gap-1.5 sm:gap-2 ${
showFilters || filterStatut || startDate || endDate
className={`px-3 py-2 text-xs font-medium rounded-lg transition-colors flex items-center gap-1.5 ${
showFilters || filterStatut
? 'bg-lblue text-white hover:bg-dblue'
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
}`}
>
<svg className="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
</svg>
<span className="hidden sm:inline">Filtrer</span>
Statut
</button>
</div>
{/* Filtres */}
{/* Filtre par statut (replié par défaut) */}
{showFilters && (
<div className="pt-3 border-t border-gray-200 space-y-3 sm:space-y-4">
{/* Filtre par plage de dates */}
<div>
<div className="flex items-center justify-between mb-2">
<label className="block text-xs sm:text-sm font-medium text-gray-700">
Plage de dates
</label>
{(startDate || endDate) && (
<button
onClick={() => {
setStartDate('');
setEndDate('');
}}
className="text-[10px] sm:text-xs font-medium text-gray-600 hover:text-gray-900 transition-colors flex items-center gap-1"
>
<svg className="w-2.5 h-2.5 sm:w-3 sm:h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
</svg>
Réinitialiser
</button>
)}
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2 sm:gap-3">
<div className="min-w-0">
<label className="block text-xs font-medium text-gray-700 mb-1.5">Date de début</label>
<input
type="date"
value={startDate}
onChange={(e) => setStartDate(e.target.value)}
className="block w-full px-3 py-2 text-sm sm:text-base border border-gray-300 rounded-lg bg-white text-gray-900 focus:outline-none focus:ring-2 focus:ring-lblue focus:border-lblue transition-all max-w-full box-border"
/>
</div>
<div className="min-w-0">
<label className="block text-xs font-medium text-gray-700 mb-1.5">Date de fin</label>
<input
type="date"
value={endDate}
onChange={(e) => setEndDate(e.target.value)}
min={startDate || undefined}
className="block w-full px-3 py-2 text-sm sm:text-base border border-gray-300 rounded-lg bg-white text-gray-900 focus:outline-none focus:ring-2 focus:ring-lblue focus:border-lblue transition-all max-w-full box-border"
/>
</div>
</div>
</div>
{/* Filtre par statut */}
<div>
<label className="block text-xs sm:text-sm font-medium text-gray-700 mb-2">
Statut
</label>
<div className="flex flex-wrap gap-1.5 sm:gap-2">
<div className="pt-2 border-t border-gray-200">
<div className="flex flex-wrap gap-1.5">
{['', 'Planifié', 'En cours', 'Terminé', 'Annulé'].map((s) => (
<button
onClick={() => setFilterStatut('')}
className={`px-2 sm:px-3 py-1.5 sm:py-2 text-[10px] sm:text-xs font-medium rounded transition-colors ${
!filterStatut
key={s || 'tous'}
onClick={() => setFilterStatut(s)}
className={`px-2.5 py-1.5 text-xs font-medium rounded transition-colors ${
filterStatut === s
? 'bg-lblue text-white'
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
}`}
>
Tous
{s || 'Tous'}
</button>
<button
onClick={() => setFilterStatut('Planifié')}
className={`px-2 sm:px-3 py-1.5 sm:py-2 text-[10px] sm:text-xs font-medium rounded transition-colors ${
filterStatut === 'Planifié'
? 'bg-lblue text-white'
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
}`}
>
Planifié
</button>
<button
onClick={() => setFilterStatut('En cours')}
className={`px-2 sm:px-3 py-1.5 sm:py-2 text-[10px] sm:text-xs font-medium rounded transition-colors ${
filterStatut === 'En cours'
? 'bg-lblue text-white'
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
}`}
>
En cours
</button>
<button
onClick={() => setFilterStatut('Terminé')}
className={`px-2 sm:px-3 py-1.5 sm:py-2 text-[10px] sm:text-xs font-medium rounded transition-colors ${
filterStatut === 'Terminé'
? 'bg-lblue text-white'
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
}`}
>
Terminé
</button>
<button
onClick={() => setFilterStatut('Annulé')}
className={`px-2 sm:px-3 py-1.5 sm:py-2 text-[10px] sm:text-xs font-medium rounded transition-colors ${
filterStatut === 'Annulé'
? 'bg-lblue text-white'
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
}`}
>
Annulé
</button>
</div>
))}
</div>
</div>
)}
</div>
</div>
{/* Liste des trajets */}
<div className="p-4 sm:p-6">
<div className="flex items-center justify-between mb-4 sm:mb-6">
<h2 className="text-lg sm:text-xl font-semibold text-gray-900">
Derniers trajets créés
{/* Liste des trajets avec scrollbar */}
<div
className={`flex-1 min-h-0 overflow-y-auto ${compact ? 'p-3' : 'p-4 sm:p-6'}`}
style={{ scrollbarGutter: 'stable' }}
>
<div className="flex items-center justify-between mb-3">
<h2 className="text-base font-semibold text-gray-900">
{filterPeriod === 'derniers' ? 'Derniers trajets créés' : 'Trajets'}
</h2>
<button
onClick={fetchTrajets}
className="text-xs sm:text-sm text-lblue hover:text-dblue font-medium flex items-center gap-1 sm:gap-2"
className="text-xs text-lblue hover:text-dblue font-medium flex items-center gap-1"
title="Actualiser"
>
<svg className="w-3.5 h-3.5 sm:w-4 sm:h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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>
<span className="hidden sm:inline">Actualiser</span>
</button>
</div>
{loading ? (
<div className="text-center py-6 sm:py-8 text-sm text-gray-500">Chargement...</div>
<div className="text-center py-6 text-sm text-gray-500">Chargement...</div>
) : filteredTrajets.length === 0 ? (
<div className="text-center py-6 sm:py-8 text-xs sm:text-sm text-gray-500">
<div className="text-center py-6 text-xs text-gray-500">
{trajets.length === 0
? 'Aucun trajet créé récemment'
? filterPeriod === 'derniers'
? 'Aucun trajet créé récemment'
: 'Aucun trajet pour cette période'
: 'Aucun trajet ne correspond à votre recherche'}
</div>
) : (
<div className="space-y-2 sm:space-y-3">
<div className="space-y-2">
{filteredTrajets.map((trajet) => (
<div
key={trajet.id}
className="p-3 sm:p-4 bg-gray-50 rounded-lg border border-gray-200 hover:border-gray-300 transition-colors"
className={`bg-gray-50 rounded-lg border border-gray-200 hover:border-gray-300 transition-colors ${
compact ? 'p-2.5' : 'p-3 sm:p-4'
}`}
>
<div className="flex items-start gap-3 sm:gap-4">
<div className={`flex items-start ${compact ? 'gap-2' : 'gap-3 sm:gap-4'}`}>
{/* Avatar adhérent */}
<div className="w-10 h-10 sm:w-12 sm:h-12 rounded-full bg-lgreen flex items-center justify-center text-white text-xs sm:text-sm font-semibold flex-shrink-0">
<div className={`rounded-full bg-lgreen flex items-center justify-center text-white font-semibold flex-shrink-0 ${
compact ? 'w-9 h-9 text-xs' : 'w-10 h-10 sm:w-12 sm:h-12 text-xs sm:text-sm'
}`}>
{getInitials(trajet.adherent.nom, trajet.adherent.prenom)}
</div>