From 3f209fe461375fe47c80c9a3724d1451f98db23b Mon Sep 17 00:00:00 2001
From: Arnaud Delcasse <arnaud.delcasse@mobicoop.org>
Date: Thu, 18 Dec 2025 09:44:23 +0100
Subject: [PATCH] display updates

---
 config.yaml                                   |   3 +
 .../_partials/beneficiaries-widget.html       |  10 +-
 web/layouts/layout.html                       |   4 +-
 .../_partials/bookings_history.html           |  14 +-
 .../_partials/bookings_list.html              |  14 +-
 .../solidarity_transport/driver_journey.html  |   3 +
 .../solidarity_transport/driver_update.html   |   2 +-
 web/layouts/vehicles/search.html              | 123 ++++++++++----
 web/public/css/main.css                       | 156 ++++++++++++++++++
 9 files changed, 274 insertions(+), 55 deletions(-)

diff --git a/config.yaml b/config.yaml
index 9ee614e..f2cdd30 100644
--- a/config.yaml
+++ b/config.yaml
@@ -405,6 +405,7 @@ icons:
     hero:outline/calendar: <svg xmlns="http://www.w3.org/2000/svg" class="%s" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
     hero:outline/chevron-right: <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="%s"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" /></svg>
     hero:outline/cog: <svg xmlns="http://www.w3.org/2000/svg" class="%s" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" 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" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
+    hero:outline/document: <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="%s"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" /></svg>
     hero:outline/document-arrow-down: <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="%s"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m.75 12l3 3m0 0l3-3m-3 3v-6m-1.5-9H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" /></svg>
     hero:outline/document-text: <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="%s"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" /></svg>
     hero:outline/folder-plus: <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="%s"><path stroke-linecap="round" stroke-linejoin="round" d="M12 10.5v6m3-3H9m4.06-7.19l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z" /></svg>
@@ -417,8 +418,10 @@ icons:
     hero:outline/plus-circle: <svg xmlns="http://www.w3.org/2000/svg" class="%s" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
     hero:outline/shield-check: <svg xmlns="http://www.w3.org/2000/svg" class="%s" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" /></svg>
     hero:outline/table-cells: <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="%s"><path stroke-linecap="round" stroke-linejoin="round" d="M3.375 19.5h17.25m-17.25 0a1.125 1.125 0 01-1.125-1.125M3.375 19.5h7.5c.621 0 1.125-.504 1.125-1.125m-9.75 0V5.625m0 12.75v-1.5c0-.621.504-1.125 1.125-1.125m18.375 2.625V5.625m0 12.75c0 .621-.504 1.125-1.125 1.125m1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125m0 3.75h-7.5A1.125 1.125 0 0112 18.375m9.75-12.75c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125m19.5 0v1.5c0 .621-.504 1.125-1.125 1.125M2.25 5.625v1.5c0 .621.504 1.125 1.125 1.125m0 0h17.25m-17.25 0h7.5c.621 0 1.125.504 1.125 1.125M3.375 8.25c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125m17.25-3.75h-7.5c-.621 0-1.125.504-1.125 1.125m8.625-1.125c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125m-17.25 0h7.5m-7.5 0c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125M12 10.875v-1.5m0 1.5c0 .621-.504 1.125-1.125 1.125M12 10.875c0 .621.504 1.125 1.125 1.125m-2.25 0c.621 0 1.125.504 1.125 1.125M13.125 12h7.5m-7.5 0c-.621 0-1.125.504-1.125 1.125M20.625 12c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125m-17.25 0h7.5M12 14.625v-1.5m0 1.5c0 .621-.504 1.125-1.125 1.125M12 14.625c0 .621.504 1.125 1.125 1.125m-2.25 0c.621 0 1.125.504 1.125 1.125m0 1.5v-1.5m0 0c0-.621.504-1.125 1.125-1.125m0 0h7.5" /></svg>
+    hero:outline/user: <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="%s"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" /></svg>
     hero:outline/user-group: <svg xmlns="http://www.w3.org/2000/svg" class="%s" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" /></svg>
     hero:outline/x: <svg class="%s text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
+    hero:solid/check-circle: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="%s"><path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z" clip-rule="evenodd" /></svg>
     hero:solid/chevron-right: <svg class="%s text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" /></svg>
     hero:solid/question-mark-icon: <svg class="%s" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd"  d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" /></svg>
     hero:solid/search: <svg class="%s" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" /></svg>
diff --git a/web/layouts/dashboard/_partials/beneficiaries-widget.html b/web/layouts/dashboard/_partials/beneficiaries-widget.html
index 1505693..5ae5f66 100644
--- a/web/layouts/dashboard/_partials/beneficiaries-widget.html
+++ b/web/layouts/dashboard/_partials/beneficiaries-widget.html
@@ -10,12 +10,12 @@
         </div> -->
     </div>
     <ul role="list" class="divide-y divide-gray-200 flex-1">
-        {{range .latest}}
+	{{range $index, $el := .latest}}{{if gt $index 4}}{{break}}{{end}}
             <li class="py-2 px-4 flex">
-                <a href="/app/beneficiaries/{{.ID}}" class="flex w-full">
-                <img class="h-6 w-6 rounded-co" src="/app/beneficiaries/{{.ID}}/picture" alt="">
+                <a href="/app/beneficiaries/{{$el.ID}}" class="flex w-full">
+                <img class="h-6 w-6 rounded-co" src="/app/beneficiaries/{{$el.ID}}/picture" alt="">
                 <div class="ml-3">
-                    <p class="text-sm font-medium text-gray-900">{{.Data.first_name}} {{.Data.last_name}}</p>
+                    <p class="text-sm font-medium text-gray-900">{{$el.Data.first_name}} {{$el.Data.last_name}}</p>
                 </div>
             </a>
             </li>
@@ -28,4 +28,4 @@
         </button>
     </a>
 </div>
-{{end}}
\ No newline at end of file
+{{end}}
diff --git a/web/layouts/layout.html b/web/layouts/layout.html
index 43f85e6..9ee4914 100644
--- a/web/layouts/layout.html
+++ b/web/layouts/layout.html
@@ -40,7 +40,7 @@
         </div>
 
         <div class="flex-shrink-0 flex items-center px-4">
-          <img class="h-8 w-auto" src="/public/images/main_logo.svg" alt="PARCOURSMOB">
+          <img class="h-8 w-auto" src="/public/images/mobicoop-solidaire.png" alt="Mobicoop Solidaire">
         </div>
         <div class="mt-5 flex-1 h-0 overflow-y-auto">
 
@@ -60,7 +60,7 @@
     <!-- Sidebar component, swap this element with another sidebar if you like -->
     <div class="flex flex-col flex-grow pt-5 bg-co-blue overflow-y-auto">
       <div class="flex items-center flex-shrink-0 px-4">
-        <img class="h-8 w-auto" src="/public/images/parcoursmob_logo_whitered.svg" alt="PARCOURSMOB">
+        <img class="h-8 w-auto" src="/public/images/mobicoop-solidaire.png" alt="Mobicoop Solidaire">
       </div>
       <div class="mt-5 flex-1 flex flex-col">
         {{ template "mainmenu" . }}
diff --git a/web/layouts/solidarity_transport/_partials/bookings_history.html b/web/layouts/solidarity_transport/_partials/bookings_history.html
index f3bb966..cb032a5 100644
--- a/web/layouts/solidarity_transport/_partials/bookings_history.html
+++ b/web/layouts/solidarity_transport/_partials/bookings_history.html
@@ -60,8 +60,8 @@
 <table class="min-w-full divide-y divide-gray-300 border-gray-300 border-t-1">
   <thead class="bg-gray-50">
     <tr>
-      <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">Conducteur</th>
       <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">Passager</th>
+      <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">Conducteur</th>
       <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">Départ</th>
       <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">Destination</th>
       <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">Date</th>
@@ -73,16 +73,16 @@
   <tbody class="divide-y divide-gray-200 bg-white">
     <template x-for="booking in paginatedBookings" :key="booking.id">
       <tr :class="booking.replacedBy ? 'bg-gray-200' : ''">
-        <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
-          <a class="text-co-blue" :href="'/app/solidarity-transport/drivers/' + booking.driverId">
-            <span x-text="booking.driverFirstName + ' ' + booking.driverLastName"></span>
-          </a>
-        </td>
-        <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
+        <td class="py-4 pl-4 pr-3 text-sm sm:pl-6">
           <a class="text-co-blue" :href="'/app/beneficiaries/' + booking.passengerId">
             <span x-text="booking.passengerFirstName + ' ' + booking.passengerLastName"></span>
           </a>
         </td>
+        <td class="py-4 pl-4 pr-3 text-sm sm:pl-6">
+          <a class="text-co-blue" :href="'/app/solidarity-transport/drivers/' + booking.driverId">
+            <span x-text="booking.driverFirstName + ' ' + booking.driverLastName"></span>
+          </a>
+        </td>
         <td class="py-4 pl-4 pr-3 text-sm sm:pl-6" x-text="booking.pickupLabel"></td>
         <td class="py-4 pl-4 pr-3 text-sm sm:pl-6" x-text="booking.dropLabel"></td>
         <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6" x-text="booking.pickupDate"></td>
diff --git a/web/layouts/solidarity_transport/_partials/bookings_list.html b/web/layouts/solidarity_transport/_partials/bookings_list.html
index 6706215..080050b 100644
--- a/web/layouts/solidarity_transport/_partials/bookings_list.html
+++ b/web/layouts/solidarity_transport/_partials/bookings_list.html
@@ -58,8 +58,8 @@
 <table class="min-w-full divide-y divide-gray-300 border-gray-300 border-t-1">
   <thead class="bg-gray-50">
     <tr>
-      <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">Conducteur</th>
       <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">Passager</th>
+      <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">Conducteur</th>
       <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">Départ</th>
       <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">Destination</th>
       <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">Date</th>
@@ -70,16 +70,16 @@
   <tbody class="divide-y divide-gray-200 bg-white">
     <template x-for="booking in paginatedBookings" :key="booking.id">
       <tr>
-        <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
-          <a class="text-co-blue" :href="'/app/solidarity-transport/drivers/' + booking.driverId">
-            <span x-text="booking.driverFirstName + ' ' + booking.driverLastName"></span>
-          </a>
-        </td>
-        <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
+        <td class="py-4 pl-4 pr-3 text-sm sm:pl-6">
           <a class="text-co-blue" :href="'/app/beneficiaries/' + booking.passengerId">
             <span x-text="booking.passengerFirstName + ' ' + booking.passengerLastName"></span>
           </a>
         </td>
+        <td class="py-4 pl-4 pr-3 text-sm sm:pl-6">
+          <a class="text-co-blue" :href="'/app/solidarity-transport/drivers/' + booking.driverId">
+            <span x-text="booking.driverFirstName + ' ' + booking.driverLastName"></span>
+          </a>
+        </td>
         <td class="py-4 pl-4 pr-3 text-sm sm:pl-6" x-text="booking.pickupLabel"></td>
         <td class="py-4 pl-4 pr-3 text-sm sm:pl-6" x-text="booking.dropLabel"></td>
         <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6" x-text="booking.pickupDate"></td>
diff --git a/web/layouts/solidarity_transport/driver_journey.html b/web/layouts/solidarity_transport/driver_journey.html
index 768277a..6e5eda5 100644
--- a/web/layouts/solidarity_transport/driver_journey.html
+++ b/web/layouts/solidarity_transport/driver_journey.html
@@ -8,6 +8,9 @@
         </div>
         <div class="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
           <form method="POST" action="/app/solidarity-transport/drivers/{{.ViewState.driver.ID}}/journeys/{{.ViewState.driver_journey.Id}}/noreturn">
+            {{if .ViewState.passenger.ID}}
+            <input type="hidden" name="passengerid" value="{{.ViewState.passenger.ID}}" />
+            {{end}}
             {{if .ViewState.driver_journey.Noreturn}}
             <button type="submit"
               class="inline-flex items-center justify-center rounded-2xl border border-transparent bg-co-blue px-4 py-2 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-co-blue focus:ring-offset-2 sm:w-auto">
diff --git a/web/layouts/solidarity_transport/driver_update.html b/web/layouts/solidarity_transport/driver_update.html
index 642a2e8..ab8d114 100644
--- a/web/layouts/solidarity_transport/driver_update.html
+++ b/web/layouts/solidarity_transport/driver_update.html
@@ -14,7 +14,7 @@
           birthdate: {{if .ViewState.driver.Data.birthdate}}'{{ (timeFrom .ViewState.driver.Data.birthdate).Format "2006-01-02" }}'{{else}}null{{end}},
         },
         other_properties: {{if .ViewState.driver.Data.other_properties}}{{ json .ViewState.driver.Data.other_properties }}{{else}}{}{{end}},
-        other_properties_serialized: '{{ json .ViewState.driver.Data.other_properties }}',
+        other_properties_serialized: {{ json .ViewState.driver.Data.other_properties }},
         rules: {
             first_name: ['required'],
             last_name: ['required'],
diff --git a/web/layouts/vehicles/search.html b/web/layouts/vehicles/search.html
index 6c33862..bfc79da 100644
--- a/web/layouts/vehicles/search.html
+++ b/web/layouts/vehicles/search.html
@@ -209,46 +209,103 @@
                                 
                                   <div class="fixed inset-0 z-10 overflow-y-auto">
                                     <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-                                      <div class="relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6">
-                                        <div>
-                                          <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-co bg-co-blue">
-                                            {{$.IconSet.Icon "hero:outline/folder-plus" "h-6 w-6 text-white"}}
-                                          </div>
-                                          <div class="mt-3 text-center sm:mt-5">
-                                            <h3 class="text-lg font-medium leading-6 text-gray-900" id="modal-title">Documents demandés</h3>
-                                            <div class="mt-2">
-                                              <p class="text-sm text-gray-500">Ajoutez des documents pour finaliser</p>
+                                      <div class="relative transform overflow-hidden rounded-2xl bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
+                                        <!-- Header -->
+                                        <div class="bg-co-blue px-6 py-5">
+                                          <div class="flex items-center">
+                                            <div class="flex-shrink-0 flex h-12 w-12 items-center justify-center rounded-xl bg-white/20 backdrop-blur">
+                                              {{$.IconSet.Icon "hero:outline/document-text" "h-6 w-6 text-white"}}
+                                            </div>
+                                            <div class="ml-4">
+                                              <h3 class="text-lg font-semibold text-white" id="modal-title">Documents demandés</h3>
+                                              <p class="text-sm text-white/70">{{len $.ViewState.search.mandatory_documents}} document(s) requis pour cette réservation</p>
                                             </div>
                                           </div>
                                         </div>
+
                                         <form enctype="multipart/form-data" method="POST" action="/app/vehicles/v/{{.ID}}/b/{{$.ViewState.search.beneficiary.ID}}?startdate={{(timeFrom $.ViewState.search.startdate).Format "2006-01-02"}}&enddate={{(timeFrom $.ViewState.search.enddate).Format "2006-01-02"}}&starttime={{(timeFrom $.ViewState.search.startdate).Format "15:04"}}&endtime={{(timeFrom $.ViewState.search.enddate).Format "15:04"}}">
-                                          {{range $.ViewState.search.mandatory_documents}}
-                                          {{$type := .}}
-                                          <div class="p-2"
-                                            x-data="{
-                                              select: '{{index $.ViewState.search.documents_defaults $type}}'
-                                            }">
-                                            <label for="type" class="block text-sm font-medium text-gray-700">{{index $.ViewState.search.file_types_map $type}}</label>
-                                            <select x-model="select" id="type-{{$type}}" name="type-{{$type}}" class="mt-1 block w-full rounded-2xl border-gray-300 py-2 pl-3 pr-10 text-base focus:border-co-blue focus:outline-none focus:ring-co-blue sm:text-sm">
-                                            {{range $.ViewState.search.beneficiary_documents}}
-                                              {{if eq $type .Metadata.Type}}
-                                              <option value="{{.Key}}">Fichier bénéficiaire : {{.Metadata.Name}}</option>
-                                              {{end}}
-                                            {{end}}
-                                              <option value="">Ajouter un fichier</option>
-                                            </select>
-                                            <div x-show="select == ''" class="p-2">
-                                              <input type="file" name="doc-{{$type}}" />
+                                          <div class="px-6 py-5 space-y-4 max-h-96 overflow-y-auto">
+                                            {{range $type := $.ViewState.search.mandatory_documents}}
+                                            <div class="bg-gray-50 rounded-2xl p-4 border border-gray-200"
+                                              x-data="{
+                                                select: '{{index $.ViewState.search.documents_defaults $type}}',
+                                                dragover: false
+                                              }">
+                                              <div class="flex items-start justify-between mb-3">
+                                                <div class="flex items-center">
+                                                  <span class="flex-shrink-0 inline-flex items-center justify-center h-8 w-8 rounded-xl bg-co-blue text-white">
+                                                    {{$.IconSet.Icon "hero:outline/document" "h-4 w-4"}}
+                                                  </span>
+                                                  <div class="ml-3">
+                                                    <label for="type-{{$type}}" class="block text-sm font-semibold text-gray-900">{{index $.ViewState.search.file_types_map $type}}</label>
+                                                    <p class="text-xs text-gray-500">Document obligatoire</p>
+                                                  </div>
+                                                </div>
+                                                <span x-show="select !== ''" class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-co-green/20 text-co-green">
+                                                  {{$.IconSet.Icon "hero:solid/check-circle" "h-3.5 w-3.5 mr-1"}}
+                                                  Sélectionné
+                                                </span>
+                                              </div>
+
+                                              <select x-model="select" id="type-{{$type}}" name="type-{{$type}}"
+                                                class="block w-full rounded-2xl border-gray-300 py-2.5 pl-3 pr-10 text-sm focus:border-co-blue focus:outline-none focus:ring-2 focus:ring-co-blue/20 transition-shadow">
+                                                {{range $.ViewState.search.beneficiary_documents}}
+                                                  {{if eq $type .Metadata.Type}}
+                                                  <option value="{{.Key}}">{{.Metadata.Name}}</option>
+                                                  {{end}}
+                                                {{end}}
+                                                <option value="">Téléverser un nouveau fichier</option>
+                                              </select>
+
+                                              <!-- File upload area -->
+                                              <div x-show="select == ''" x-transition class="mt-3"
+                                                x-data="{ fileName: '' }">
+                                                <input type="file" name="doc-{{$type}}" x-ref="fileInput"
+                                                  @change="fileName = $event.target.files[0]?.name || ''"
+                                                  class="hidden" />
+                                                <!-- Empty state: drop zone -->
+                                                <div x-show="!fileName"
+                                                  class="relative border-2 border-dashed rounded-2xl p-4 text-center transition-colors cursor-pointer"
+                                                  :class="dragover ? 'border-co-blue bg-co-blue/5' : 'border-gray-300 hover:border-gray-400'"
+                                                  @click="$refs.fileInput.click()"
+                                                  @dragover.prevent="dragover = true"
+                                                  @dragleave.prevent="dragover = false"
+                                                  @drop.prevent="dragover = false; $refs.fileInput.files = $event.dataTransfer.files; fileName = $event.dataTransfer.files[0]?.name || ''">
+                                                  <div class="space-y-1">
+                                                    {{$.IconSet.Icon "hero:outline/cloud-arrow-up" "mx-auto h-8 w-8 text-gray-400"}}
+                                                    <p class="text-sm text-gray-600">Glissez un fichier ou <span class="text-co-blue font-medium">parcourir</span></p>
+                                                    <p class="text-xs text-gray-400">PDF, JPG, PNG jusqu'à 10Mo</p>
+                                                  </div>
+                                                </div>
+                                                <!-- File selected state -->
+                                                <div x-show="fileName" class="flex items-center justify-between p-3 bg-co-green/10 border border-co-green/30 rounded-2xl">
+                                                  <div class="flex items-center min-w-0 cursor-pointer flex-1" @click="$refs.fileInput.click()">
+                                                    {{$.IconSet.Icon "hero:solid/document-check" "h-5 w-5 text-co-green flex-shrink-0"}}
+                                                    <span class="ml-2 text-sm text-gray-800 truncate" x-text="fileName"></span>
+                                                    <span class="ml-2 text-xs text-co-green hover:text-co-green/80">(modifier)</span>
+                                                  </div>
+                                                  <button type="button" @click="fileName = ''; $refs.fileInput.value = ''" class="ml-2 flex-shrink-0 text-co-red hover:text-co-red/80">
+                                                    {{$.IconSet.Icon "hero:outline/x-mark" "h-5 w-5"}}
+                                                  </button>
+                                                </div>
+                                              </div>
                                             </div>
+                                            {{end}}
                                           </div>
-                                          {{end}}
-                                          <div class="mt-5 sm:mt-6">
-                                            <button type="submit" class="inline-flex w-full justify-center rounded-2xl border border-transparent bg-co-blue px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-co-blue focus:outline-none focus:ring-2 focus:ring-co-blue focus:ring-offset-2 sm:text-sm">Réserver</button>
+
+                                          <!-- Footer -->
+                                          <div class="bg-gray-50 px-6 py-4 flex flex-col-reverse sm:flex-row sm:justify-end gap-3 border-t border-gray-200">
+                                            <button @click="documentsdialog=false" type="button"
+                                              class="w-full sm:w-auto inline-flex justify-center items-center px-4 py-2.5 border border-gray-300 rounded-2xl text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-co-blue transition-colors">
+                                              Annuler
+                                            </button>
+                                            <button type="submit"
+                                              class="w-full sm:w-auto inline-flex justify-center items-center px-6 py-2.5 border border-transparent rounded-2xl text-sm font-medium text-white bg-co-blue hover:bg-co-blue/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-co-blue shadow-sm transition-colors">
+                                              {{$.IconSet.Icon "hero:outline/check" "h-4 w-4 mr-2"}}
+                                              Confirmer la réservation
+                                            </button>
                                           </div>
                                         </form>
-                                        <div class="mt-5 sm:mt-6">
-                                          <button @click="documentsdialog=false" type="button" class="inline-flex w-full justify-center max-w-xs bg-white hover:bg-gray-50 border-gray-300 border px-4 py-2 text-gray-700 items-center text-sm rounded-2xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-co-blue">Annuler</button>
-                                        </div>
                                       </div>
                                     </div>
                                   </div>
@@ -266,4 +323,4 @@
         </div>
     </div>
 </div>
-{{end}}
\ No newline at end of file
+{{end}}
diff --git a/web/public/css/main.css b/web/public/css/main.css
index 960d886..51e5689 100644
--- a/web/public/css/main.css
+++ b/web/public/css/main.css
@@ -13,7 +13,9 @@
     --color-orange-50: oklch(0.98 0.016 73.684);
     --color-orange-200: oklch(0.901 0.076 70.697);
     --color-yellow-50: oklch(0.987 0.026 102.212);
+    --color-green-50: oklch(0.982 0.018 155.826);
     --color-green-100: oklch(0.962 0.044 156.743);
+    --color-green-200: oklch(0.925 0.084 155.995);
     --color-green-600: oklch(0.627 0.194 149.214);
     --color-green-800: oklch(0.448 0.119 151.328);
     --color-blue-50: oklch(0.97 0.014 254.604);
@@ -487,6 +489,9 @@
   .mx-auto {
     margin-inline: auto;
   }
+  .-my-1 {
+    margin-block: calc(var(--spacing) * -1);
+  }
   .-my-1\.5 {
     margin-block: calc(var(--spacing) * -1.5);
   }
@@ -511,6 +516,9 @@
   .-mt-4 {
     margin-top: calc(var(--spacing) * -4);
   }
+  .mt-0 {
+    margin-top: calc(var(--spacing) * 0);
+  }
   .mt-0\.5 {
     margin-top: calc(var(--spacing) * 0.5);
   }
@@ -538,6 +546,9 @@
   .mt-10 {
     margin-top: calc(var(--spacing) * 10);
   }
+  .-mr-1 {
+    margin-right: calc(var(--spacing) * -1);
+  }
   .-mr-1\.5 {
     margin-right: calc(var(--spacing) * -1.5);
   }
@@ -710,6 +721,9 @@
   .h-3 {
     height: calc(var(--spacing) * 3);
   }
+  .h-3\.5 {
+    height: calc(var(--spacing) * 3.5);
+  }
   .h-4 {
     height: calc(var(--spacing) * 4);
   }
@@ -743,6 +757,9 @@
   .max-h-60 {
     max-height: calc(var(--spacing) * 60);
   }
+  .max-h-96 {
+    max-height: calc(var(--spacing) * 96);
+  }
   .max-h-none {
     max-height: none;
   }
@@ -758,9 +775,15 @@
   .min-h-screen {
     min-height: 100vh;
   }
+  .w-0 {
+    width: calc(var(--spacing) * 0);
+  }
   .w-0\.5 {
     width: calc(var(--spacing) * 0.5);
   }
+  .w-1 {
+    width: calc(var(--spacing) * 1);
+  }
   .w-1\/2 {
     width: calc(1/2 * 100%);
   }
@@ -776,6 +799,9 @@
   .w-3 {
     width: calc(var(--spacing) * 3);
   }
+  .w-3\.5 {
+    width: calc(var(--spacing) * 3.5);
+  }
   .w-4 {
     width: calc(var(--spacing) * 4);
   }
@@ -1747,6 +1773,12 @@
   .border-co-blue {
     border-color: var(--color-co-blue);
   }
+  .border-co-green {
+    border-color: var(--color-co-green);
+  }
+  .border-co-green\/30 {
+    border-color: color-mix(in oklab, var(--color-co-green) 30%, transparent);
+  }
   .border-co-lightblue {
     border-color: var(--color-co-lightblue);
   }
@@ -1762,6 +1794,9 @@
   .border-gray-300 {
     border-color: var(--color-gray-300);
   }
+  .border-green-200 {
+    border-color: var(--color-green-200);
+  }
   .border-indigo-500 {
     border-color: var(--color-indigo-500);
   }
@@ -1804,9 +1839,18 @@
   .bg-co-blue {
     background-color: var(--color-co-blue);
   }
+  .bg-co-blue\/5 {
+    background-color: color-mix(in oklab, var(--color-co-blue) 5%, transparent);
+  }
   .bg-co-green {
     background-color: var(--color-co-green);
   }
+  .bg-co-green\/10 {
+    background-color: color-mix(in oklab, var(--color-co-green) 10%, transparent);
+  }
+  .bg-co-green\/20 {
+    background-color: color-mix(in oklab, var(--color-co-green) 20%, transparent);
+  }
   .bg-co-lightblue {
     background-color: var(--color-co-lightblue);
   }
@@ -1840,6 +1884,9 @@
   .bg-gray-900 {
     background-color: var(--color-gray-900);
   }
+  .bg-green-50 {
+    background-color: var(--color-green-50);
+  }
   .bg-green-100 {
     background-color: var(--color-green-100);
   }
@@ -1870,6 +1917,9 @@
   .bg-white {
     background-color: var(--color-white);
   }
+  .bg-white\/20 {
+    background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
+  }
   .bg-yellow-50 {
     background-color: var(--color-yellow-50);
   }
@@ -1881,6 +1931,10 @@
     --tw-gradient-position: in oklab;
     background-image: conic-gradient(var(--tw-gradient-stops));
   }
+  .bg-gradient-to-r {
+    --tw-gradient-position: to right in oklab;
+    background-image: linear-gradient(var(--tw-gradient-stops));
+  }
   .bg-radial {
     --tw-gradient-position: in oklab;
     background-image: radial-gradient(var(--tw-gradient-stops));
@@ -1891,6 +1945,14 @@
   .via-none {
     --tw-gradient-via-stops: initial;
   }
+  .from-co-blue {
+    --tw-gradient-from: var(--color-co-blue);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+  .to-blue-600 {
+    --tw-gradient-to: var(--color-blue-600);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
   .box-decoration-clone {
     -webkit-box-decoration-break: clone;
     box-decoration-break: clone;
@@ -2096,6 +2158,9 @@
   .px-6 {
     padding-inline: calc(var(--spacing) * 6);
   }
+  .py-0 {
+    padding-block: calc(var(--spacing) * 0);
+  }
   .py-0\.5 {
     padding-block: calc(var(--spacing) * 0.5);
   }
@@ -2108,6 +2173,9 @@
   .py-2 {
     padding-block: calc(var(--spacing) * 2);
   }
+  .py-2\.5 {
+    padding-block: calc(var(--spacing) * 2.5);
+  }
   .py-3 {
     padding-block: calc(var(--spacing) * 3);
   }
@@ -2392,6 +2460,9 @@
   .\[color\:red\]\/50\! {
     color: color-mix(in oklab, red 50%, transparent) !important;
   }
+  .text-blue-100 {
+    color: var(--color-blue-100);
+  }
   .text-blue-800 {
     color: var(--color-blue-800);
   }
@@ -2443,6 +2514,9 @@
   .text-white {
     color: var(--color-white);
   }
+  .text-white\/70 {
+    color: color-mix(in oklab, var(--color-white) 70%, transparent);
+  }
   .capitalize {
     text-transform: capitalize;
   }
@@ -3040,6 +3114,13 @@
       }
     }
   }
+  .hover\:border-gray-400 {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-gray-400);
+      }
+    }
+  }
   .hover\:bg-blue-700 {
     &:hover {
       @media (hover: hover) {
@@ -3054,6 +3135,13 @@
       }
     }
   }
+  .hover\:bg-co-blue\/90 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in oklab, var(--color-co-blue) 90%, transparent);
+      }
+    }
+  }
   .hover\:bg-co-red {
     &:hover {
       @media (hover: hover) {
@@ -3110,6 +3198,20 @@
       }
     }
   }
+  .hover\:text-co-green\/80 {
+    &:hover {
+      @media (hover: hover) {
+        color: color-mix(in oklab, var(--color-co-green) 80%, transparent);
+      }
+    }
+  }
+  .hover\:text-co-red\/80 {
+    &:hover {
+      @media (hover: hover) {
+        color: color-mix(in oklab, var(--color-co-red) 80%, transparent);
+      }
+    }
+  }
   .hover\:text-gray-500 {
     &:hover {
       @media (hover: hover) {
@@ -3138,6 +3240,13 @@
       }
     }
   }
+  .hover\:text-green-800 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-green-800);
+      }
+    }
+  }
   .hover\:text-inherit {
     &:hover {
       @media (hover: hover) {
@@ -3234,6 +3343,11 @@
       --tw-ring-color: var(--color-co-blue);
     }
   }
+  .focus\:ring-co-blue\/20 {
+    &:focus {
+      --tw-ring-color: color-mix(in oklab, var(--color-co-blue) 20%, transparent);
+    }
+  }
   .focus\:ring-co-red {
     &:focus {
       --tw-ring-color: var(--color-co-red);
@@ -4066,6 +4180,48 @@
   inherits: false;
   initial-value: 0;
 }
+@property --tw-gradient-position {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-from {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-via {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-to {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-stops {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-via-stops {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-from-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0%;
+}
+@property --tw-gradient-via-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 50%;
+}
+@property --tw-gradient-to-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
 @property --tw-leading {
   syntax: "*";
   inherits: false;