Optimization on Calendar Page

app/layout.tsx

@@ -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({

components/BudgetContent.tsx

@@ -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="mb-3 sm:mb-4 text-sm sm:text-base">Aucun prescripteur configuré.</p>
-          <p className="text-sm mb-6">
+          <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">
+        <div className="px-4 sm:px-6 py-3 sm:py-4 border-b border-gray-200">
-          <h2 className="text-lg font-semibold text-gray-900">Budget par prescripteur</h2>
+          <h2 className="text-base sm:text-lg font-semibold text-gray-900">Budget par prescripteur</h2>
-          <p className="text-sm text-gray-500 mt-1">
+          <p className="text-xs sm: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.
+            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 ? (
                   <>

components/CalendrierPageContent.tsx

@@ -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">
+    <div className="flex flex-col gap-6 sm:gap-8">
-      {/* Calendrier - Prend 2 colonnes sur grand écran */}
+      {/* Calendrier en haut */}
-      <div className="lg:col-span-2">
+      <div>
         <CalendrierTrajets refreshTrigger={refreshTrigger} />
       </div>
 
-      {/* Liste des derniers trajets - Prend 1 colonne sur grand écran */}
+      {/* Liste des trajets en bas, triable par période */}
-      <div className="lg:col-span-1">
+      <div>
         <ListeTrajets onTrajetCreated={handleTrajetCreated} />
       </div>
     </div>

components/DashboardLayout.tsx

@@ -208,8 +208,8 @@ export default function DashboardLayout({ user, children }: DashboardLayoutProps
         />
       )}
 
-      {/* Sidebar */}
+      {/* Sidebar - fixe sur tous les écrans, seul le contenu principal défile */}
-      <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 ${
+      <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 */}
+      {/* Main Content Area - marge gauche sur desktop pour la sidebar fixe */}
-      <div className="flex-1 flex flex-col">
+      <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">

components/ListeTrajets.tsx

@@ -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();
-      
+      if (!dateRange) {
-      // 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) {
         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={`border-b border-gray-200 flex-shrink-0 ${compact ? 'p-3' : 'p-4 sm:p-6'}`}>
-        <div className="flex flex-col gap-3 sm:gap-4">
+        <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>
+              Nouveau trajet
-              <span className="sm:hidden">Nouveau</span>
             </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 ${
+              className={`px-3 py-2 text-xs font-medium rounded-lg transition-colors flex items-center gap-1.5 ${
-                showFilters || filterStatut || startDate || endDate
+                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">
+            <div className="pt-2 border-t border-gray-200">
-              {/* Filtre par plage de dates */}
+              <div className="flex flex-wrap gap-1.5">
-              <div>
+                {['', 'Planifié', 'En cours', 'Terminé', 'Annulé'].map((s) => (
-                <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">
                   <button
-                    onClick={() => setFilterStatut('')}
+                    key={s || 'tous'}
-                    className={`px-2 sm:px-3 py-1.5 sm:py-2 text-[10px] sm:text-xs font-medium rounded transition-colors ${
+                    onClick={() => setFilterStatut(s)}
-                      !filterStatut
+                    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 */}
+      {/* Liste des trajets avec scrollbar */}
-      <div className="p-4 sm:p-6">
+      <div
-        <div className="flex items-center justify-between mb-4 sm:mb-6">
+        className={`flex-1 min-h-0 overflow-y-auto ${compact ? 'p-3' : 'p-4 sm:p-6'}`}
-          <h2 className="text-lg sm:text-xl font-semibold text-gray-900">
+        style={{ scrollbarGutter: 'stable' }}
-            Derniers trajets créés
+      >
+        <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>