solidarity bookings filters + duplicate solidarity trip + notification when refused

config.yaml

@@ -255,6 +255,7 @@ views:
     overview:
       files:
         - web/layouts/solidarity_transport/_partials/drivers_list.html
+        - web/layouts/solidarity_transport/_partials/booking_filters.html
         - web/layouts/solidarity_transport/_partials/bookings_list.html
         - web/layouts/solidarity_transport/_partials/bookings_history.html
         - web/layouts/solidarity_transport/overview.html
@@ -454,16 +455,16 @@ emails:
         - emails/layout.html
         - emails/onboarding/delete-subscriber.html
   solidarity_transport:
-    boking_driver_accept:
+    booking_driver_accept:
       subject: Trajet accepté par un conducteur
       files:
         - emails/layout.html
         - emails/solidarity_transport/booking_driver_accept.html
-    boking_driver_decline:
+    booking_driver_decline:
       subject: Trajet accepté par un conducteur
       files:
         - emails/layout.html
-        - emails/solidarity_transport/booking_driver_accept.html
+        - emails/solidarity_transport/booking_driver_decline.html
 
 sms:
   solidarity_transport:

emails/solidarity_transport/booking_driver_decline.html

@@ -1,5 +1,5 @@
 {{define "content"}}
 <p>Bonjour,</p>
 <p>Trajet refusé par un conducteur.</p>
-<p>Voir le trajet : <a href="{{ .baseUrl }}/solidarity-transport/bookings/{{.bookingid}}">{{ .baseUrl }}/solidarity-transport/bookings/{{.bookingid}}</a></p>
+<p>Voir le trajet : <a href="{{ .baseUrl }}/app/solidarity-transport/bookings/{{.bookingid}}">{{ .baseUrl }}/app/solidarity-transport/bookings/{{.bookingid}}</a></p>
 {{end}}

web/layouts/administration/bookings_stats.html

@@ -8,7 +8,7 @@
             
         </div>
         <div class="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
-            <a href="/app/administration/stats/bookings/export">
+            <a href="/exports/fleets/bookings">
                 <button type="button"
                     class="inline-flex items-center justify-center bg-white hover:bg-gray-50 border-gray-300 border px-4 py-2 text-gray-700 flex items-center text-sm rounded-2xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-co-blue">
                     Export

web/layouts/beneficiaries/_partials/beneficiary-solidarity-transport.html

@@ -3,5 +3,8 @@
   <p class="text-center text-lg">Trajets réalisés : {{ .ViewState.solidarity_transport_stats.count }}</p>
   <p class="text-center text-lg">Kilomètres réalisés : {{ .ViewState.solidarity_transport_stats.km}} km</p>
 
+  <a href="/app/journeys/?passengerid={{.ViewState.beneficiary.ID}}" class="inline-flex">
+    <button type="button" class="m-10 w-full px-4 py-2 border border-transparent text-sm font-medium rounded-2xl shadow-sm text-white bg-co-blue hover:bg-co-blue focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-co-blue">Chercher un trajet</button>
+  </a>
 </div>
 {{end}}

web/layouts/beneficiaries/_partials/beneficiary-wallet.html

@@ -4,7 +4,7 @@
     walletdialog: false
   }">
   <div class="px-4 py-5 sm:px-6">
-    <p class="text-center text-lg">Solde : {{if .ViewState.beneficiary.Data.wallet}}{{ .ViewState.beneficiary.Data.wallet }}{{else}}0{{end}} €</p>
+    <p class="text-center text-lg">Solde : {{if .ViewState.beneficiary.Data.wallet}}{{ printf "%.2f" .ViewState.beneficiary.Data.wallet }}{{else}}0{{end}} €</p>
   <button  @click="walletdialog = !walletdialog" 
     class="rounded-2xl border border-transparent bg-co-blue px-4 py-2 my-4 mt-8 w-full 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">
     Créditer le compte
@@ -26,7 +26,7 @@
             </div>
           <form method="POST" action="/app/wallets/{{.ViewState.beneficiary.ID}}/credit" class="my-4">
               <div class="my-8">
-                <input type="number" id="amount" name="amount" value="0"
+                <input type="number" step="0.01" id="amount" name="amount" value="0"
                        class="w-full shadow-sm focus:ring-co-blue focus:border-co-blue px-2 p-1 sm:text-sm border-gray-300 rounded-2xl">
               </div>
               <div class="mt-5 sm:mt-6">

web/layouts/beneficiaries/display.html

@@ -40,6 +40,7 @@
                     </div>
                     <div class="border-t border-gray-200 px-4 py-5 sm:px-6">
                         <dl class="grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-2">
+                            {{if moduleAvailable "solidarity_transport"}}
                             <div class="sm:col-span-1">
                                 <dt class="text-sm font-medium text-gray-500">Profil validé</dt>
                                 <dd class="mt-1 text-sm text-gray-900">
@@ -50,6 +51,7 @@
                                   {{end}}
                                 </dd>
                             </div>
+                            {{end}}
                             {{if .ViewState.beneficiary.Data.email}}
                             <div class="sm:col-span-1">
                                 <dt class="text-sm font-medium text-gray-500">Email</dt>
@@ -175,12 +177,13 @@
                                         :class="tab == 'documents' ? 'border-co-blue text-co-blue' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'">
                                         Documents </a>
 
+                                        {{if moduleAvailable "solidarity_transport"}}
                                         <a href="#" @click="tab = 'wallet'"
                                         class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
                                         :class="tab == 'wallet' ? 'border-co-blue text-co-blue' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'">
                                         Compte mobilité </a>
                                         
-                                        {{if moduleAvailable "solidarity_transport"}}<a href="#" @click="tab = 'solidarity_transport'"
+                                        <a href="#" @click="tab = 'solidarity_transport'"
                                             class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
                                             :class="tab == 'solidarity_transport' ? 'border-co-blue text-co-blue' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'">
                                             Transport solidaire </a>

web/layouts/dashboard/_partials/bookings-widget.html

@@ -1,12 +1,9 @@
 {{define "bookings_widget"}}
-<div class="col-span-1 bg-white rounded-2xl shadow divide-y divide-gray-200 flex flex-col">
+<!--<div class="col-span-1 bg-white rounded-2xl shadow divide-y divide-gray-200 flex flex-col">
     <div class="-ml-4 -mt-2 px-4 py-2 flex items-center justify-between flex-wrap sm:flex-nowrap">
         <div class="ml-4 mt-2">
             <h3 class="text-lg leading-6 font-medium text-gray-900">Prochaines réservations</h3>
         </div>
-        <!-- <div class="ml-4 mt-2 flex-shrink-0">
-          <button type="button" class="relative inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-co-blue hover:bg-co-blue focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-co-blue">Voir</button>
-        </div> -->
     </div>
     <ul role="list" class="divide-y divide-gray-200 flex-1">
         {{range .}}
@@ -28,5 +25,5 @@
             Reservation des véhicules
         </button>
     </a>
-</div>
+</div>-->
 {{end}}

web/layouts/journeys/_partials/journeys-others.html

@@ -1,5 +1,14 @@
 {{define "journeys_others"}}
-
+<!--KNOWLEDGE BASE-->
+<div class="p-10">
+  {{ range .ViewState.kb_data }}
+    <div class="m-4">
+      <h2 class="text-sm font-bold">{{.title}}</h2>
+      <p class="text-sm">{{.description}}</p>
+      <p class="text-sm text-co-blue"><a href="{{.url}}">Voir plus ...</a></p>
+    </div>
+  {{ end }}
+</div>
 <!--VEHICLES-->
 {{if moduleAvailable "vehicles"}}
 <div class="p-4 flex text-sm text-grey-900">
@@ -16,7 +25,6 @@
       <tr>
         <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6 md:pl-0">Véhicule</th>
         <th scope="col" class="py-3.5 px-3 text-left text-sm font-semibold text-gray-900">Numéro</th>
-        <th scope="col" class="py-3.5 px-3 text-left text-sm font-semibold text-gray-900">Gestionnaire</th>
         <th scope="col" class="py-3.5 px-3 text-left text-sm font-semibold text-gray-900">Lieu</th>
       </tr>
     </thead>
@@ -25,7 +33,6 @@
       <tr>
         <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6 md:pl-0">{{.Data.name}}</td>
         <td class="whitespace-nowrap py-4 px-3 text-sm text-gray-500">{{.Data.licence_plate}}</td>
-        <td class="whitespace-nowrap py-4 px-3 text-sm text-gray-500">COOPGO</td>
         <td class="whitespace-nowrap py-4 px-3 text-sm text-gray-500">{{if .Data.address}}{{.Data.address.properties.label}}{{end}}</td>
       </tr>
       {{end}}

web/layouts/journeys/_partials/journeys-solidarity-transport.html

@@ -40,11 +40,11 @@
     {{ $driver := (index $.ViewState.solidarity_drivers .DriverId)}}
 
     <tr>
-      <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">{{ $driver.Data.first_name }} {{ $driver.Data.last_name }}</td>
+      <td class="py-4 pl-4 pr-3 text-sm sm:pl-6">{{ $driver.Data.first_name }} {{ $driver.Data.last_name }}</td>
-      <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">{{ .DriverDistance }} km</td>
+      <td class="py-4 pl-4 pr-3 text-sm sm:pl-6">{{ .DriverDistance }} km</td>
-      <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">{{ .PassengerDistance }} km</td>
+      <td class="py-4 pl-4 pr-3 text-sm sm:pl-6">{{ .PassengerDistance }} km</td>
-      <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">{{if $driver.Data.other_properties}}{{ $driver.Data.other_properties.comment }}{{end}}</td>
+      <td class="py-4 pl-4 pr-3 text-sm sm:pl-6">{{if $driver.Data.other_properties}}{{ $driver.Data.other_properties.comment }}{{end}}</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">
         {{if solidarityDriverValidatedProfile $driver (solidarityDocuments $driver.ID) }}
         <span class="p-1 px-2 text-xs bg-co-green rounded-2xl">Oui</span>
         {{else}}
@@ -53,7 +53,7 @@
       </td>
       <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
         <a class="text-co-blue hover:text-co-blue" 
-          href="/app/solidarity-transport/drivers/{{$driver.ID}}/journeys/{{.Id}}">
+		href="/app/solidarity-transport/drivers/{{$driver.ID}}/journeys/{{.Id}}{{if ne $.ViewState.passengerid ""}}?passengerid={{$.ViewState.passengerid}}{{end}}">
           Organiser
         </a>
       </td>

web/layouts/journeys/search.html

@@ -33,6 +33,9 @@
                         {{ $destination := .ViewState.destination }}
                         {{ template "address_autocomplete" dict "FieldName" $destinationField "FieldLabel" $destinationLabel "Address" $destination }}
                         
+			{{if ne .ViewState.passengerid "" }}
+			<input type="hidden" value="{{.ViewState.passengerid}}" name="passengerid" />
+			{{end}}
 
                         <div class="py-4 grid grid-cols-2">
                             <div class="lg:col-span-1">

web/layouts/solidarity_transport/_partials/booking_filters.html

@@ -0,0 +1,43 @@
+{{ define "booking_filters" }}
+{{$tab := or .tab "solidarityTransport"}}
+
+<form>
+
+<input type="hidden" name="tab" value="{{$tab}}" />
+
+<div class="flex flex-row justify-end flex-wrap">
+
+<div class="m-4">
+<div>
+  <label for="{{$tab}}_date_start" class="block text-sm/6 font-medium text-gray-900 dark:text-white">Dates (début / fin)</label>
+  <div class="mt-2 flex">
+	  <input id="{{$tab}}_date_start" type="date" name="date_start" class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:placeholder:text-gray-500 dark:focus:outline-co-blue" value="{{.filters.date_start}}" onchange="this.form.submit()" />
+	  <input id="{{$tab}}_date_end" type="date" name="date_end" class="mx-2 block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:placeholder:text-gray-500 dark:focus:outline-co-blue" value="{{.filters.date_end}}" onchange="this.form.submit()" />
+  </div>
+</div>
+</div>
+
+<div class="m-4">
+<label for="{{$tab}}_status" class="block text-sm/6 font-medium text-gray-900 dark:text-white">Statut</label>
+<div class="mt-2 grid grid-cols-1">
+<select id="{{$tab}}_status" name="status" class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-1.5 pr-8 pl-3 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-indigo-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:*:bg-gray-800 dark:focus-visible:outline-co-blue" onchange="this.form.submit()">
+    <option></option>
+    <option value="VALIDATED"{{if eq .filters.status "VALIDATED"}} selected{{end}}>Validé</option>
+    <option value="CANCELLED"{{if eq .filters.status "CANCELLED"}} selected{{end}}>Annulé</option>
+    <option value="WAITING_CONFIRMATION"{{if eq .filters.status "WAITING_CONFIRMATION"}} selected{{end}}>Attente confirmation</option>
+  </select>
+  <svg viewBox="0 0 16 16" fill="currentColor" data-slot="icon" aria-hidden="true" class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-gray-500 sm:size-4 dark:text-gray-400">
+    <path d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" fill-rule="evenodd" />
+  </svg>
+</div>
+</div>
+
+
+<div class="m-4">
+  
+</div>
+
+</div>
+
+</form>
+{{ end }}

web/layouts/solidarity_transport/_partials/bookings_history.html

@@ -1,5 +1,6 @@
 
 {{ define "solidarity_bookings_history" }}
+{{template "booking_filters" dict "tab" "solidarityHistory" "filters" .ViewState.hist_filters }}
 {{if eq (len .ViewState.bookings_history) 0}}
 <div class="m-10 text-center text-gray-600">Aucun trajet dans le passé</div>
 {{else}}
@@ -30,6 +31,10 @@
           class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">
           Statut
       </th>
+      <th scope="col"
+          class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">
+          Prix 
+      </th>
       <th scope="col"
           class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">
           &nbsp;
@@ -69,6 +74,9 @@
         <span class="p-1 text-xs bg-co-red text-white rounded-xl">Annulé</span>
         {{ end }}
       </td>
+      <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
+        {{ .Journey.Price.Amount }} {{ .Journey.Price.Currency }}
+      </td>
       <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
         <a class="text-co-blue" href="/app/solidarity-transport/bookings/{{.Id}}">
           Voir

web/layouts/solidarity_transport/_partials/bookings_list.html

@@ -1,5 +1,7 @@
 
 {{ define "solidarity_bookings_list" }}
+{{template "booking_filters" dict "tab" "solidarityService" "filters" .ViewState.filters }}
+
 {{if eq (len .ViewState.bookings) 0}}
 <div class="m-10 text-center text-gray-600">Aucun trajet déclaré</div>
 {{else}}

web/layouts/solidarity_transport/_partials/journey_preview.html

@@ -249,7 +249,7 @@
                             {{end}}
                             <div class="sm:col-span-1">
                                 <dt class="text-sm font-medium text-gray-500">Compte mobilié (solde)</dt>
-                                <dd class="mt-1 text-sm text-gray-900">{{if .passenger.Data.wallet}}{{ .passenger.Data.wallet }}{{else}}0{{end}} EUR</dd>
+                                <dd class="mt-1 text-sm text-gray-900">{{if .passenger.Data.wallet}}{{ printf "%.2f" .passenger.Data.wallet }}{{else}}0{{end}} EUR</dd>
                             </div>
                         </dl>
                     </div>

web/layouts/solidarity_transport/booking_display.html

@@ -56,8 +56,10 @@
 
   <!-- <button type="button"
        class="inline-flex items-center justify-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-2xl text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-co-blue">Supprimer</button> -->
+  <a href="/app/journeys/?departure={{json .ViewState.booking.Journey.PassengerPickup}}&destination={{ json .ViewState.booking.Journey.PassengerDrop }}&passengerid={{.ViewState.booking.PassengerId}}" class="inline-flex"><button type="button"
+     class="w-full px-4 py-2 border border-transparent text-sm font-medium rounded-2xl shadow-sm bg-white text-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-co-blue">Dupliquer</button></a>
   {{if eq .ViewState.booking.Status "CANCELLED" }}
-    <a href="/app/journeys/?departure={{json .ViewState.booking.Journey.PassengerPickup}}&destination={{ json .ViewState.booking.Journey.PassengerDrop }}&departuredate={{ .ViewState.booking.Journey.PassengerPickupDate.Format "2006-01-02"}}&departuretime={{ .ViewState.booking.Journey.PassengerPickupDate.Format "15:04"}}" class="inline-flex"><button type="button"
+  <a href="/app/journeys/?departure={{json .ViewState.booking.Journey.PassengerPickup}}&destination={{ json .ViewState.booking.Journey.PassengerDrop }}&departuredate={{ .ViewState.booking.Journey.PassengerPickupDate.Format "2006-01-02"}}&departuretime={{ (timeFrom .ViewState.booking.Journey.PassengerPickupDate).Format "15:04"}}&passengerid={{.ViewState.booking.PassengerId}}&solidarity_transport_exclude_driver={{.ViewState.booking.DriverId}}" class="inline-flex"><button type="button"
      class="w-full px-4 py-2 border border-transparent text-sm font-medium rounded-2xl shadow-sm bg-white text-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-co-blue">Solliciter un autre conducteur</button></a>
   {{end}}
   {{if eq .ViewState.booking.Status "WAITING_CONFIRMATION" }}

web/layouts/solidarity_transport/ext/booking_proposal.html

@@ -14,6 +14,7 @@
   <script src="https://cdn.jsdelivr.net/npm/@protomaps/basemaps@5/dist/basemaps.js" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/@turf/turf@7/turf.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/polyline@0.2.0/src/polyline.js"></script>
+  <meta name=viewport content="width=device-width" />
   <!--<script defer type="text/javascript" src="/public/js/main.js" defer></script>-->
     </head>
     <body class="h-full">

web/layouts/solidarity_transport/overview.html

@@ -1,10 +1,10 @@
 {{ define "content" }}
-
+{{$defaultTab := "solidarityService"}}
 <div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
   <h1 class="text-2xl font-semibold text-gray-900">Transport solidaire</h1>
 
     <div class="bg-white shadow sm:rounded-lg sm:overflow-hidden my-4" x-data="{
-        tab: 'drivers',
+	    tab: '{{or .ViewState.tab $defaultTab}}',
         to(event) {
             this.tab = event.target.value
         }
@@ -14,6 +14,11 @@
                 <div class="hidden sm:block">
                     <div class="border-b border-gray-200 pl-4">
                         <nav class="-mb-px flex space-x-8" aria-label="Tabs"> 
+                            <a href="#" @click="tab = 'solidarityService'"
+                                class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
+                                :class="tab == 'solidarityService' ? 'border-co-blue text-co-blue' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'">
+                                Trajets </a>
+                            
                             <a href="#" @click="tab = 'drivers'"
                                 class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
                                 :class="tab == 'drivers' ? 'border-co-blue text-co-blue' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'">
@@ -24,11 +29,6 @@
                                 :class="tab == 'beneficiaries' ? 'border-co-blue text-co-blue' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'">
                                 Bénéficiaires </a>-->
 
-                            <a href="#" @click="tab = 'solidarityService'"
-                                class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
-                                :class="tab == 'solidarityService' ? 'border-co-blue text-co-blue' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'">
-                                Trajets </a>
-                            
                             <a href="#" @click="tab = 'solidarityHistory'"
                                 class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
                                 :class="tab == 'solidarityHistory' ? 'border-co-blue text-co-blue' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'">

web/layouts/vehicles_management/booking-display.html

@@ -189,11 +189,11 @@
                                     <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                                         {{.ViewState.vehicle.Data.licence_plate}}</dd>
                                 </div>
-                                <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4">
+                                <!--<div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4">
                                     <dt class="text-sm font-medium text-gray-500">Kilométrage</dt>
                                     <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                                         {{.ViewState.vehicle.Data.kilometers}} km</dd>
-                                </div>
+                                </div>-->
                                 <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4">
                                     <dt class="text-sm font-medium text-gray-500">Type</dt>
                                     <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">

web/public/css/main.css

@@ -1,11 +1,11 @@
-/*! tailwindcss v4.0.8 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.0.9 | MIT License | https://tailwindcss.com */
 @layer theme, base, components, utilities;
 @layer theme {
   :root, :host {
-    --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
-    'Noto Color Emoji';
+      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
+    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
-    monospace;
+      "Courier New", monospace;
     --color-red-500: oklch(0.637 0.237 25.331);
     --color-green-100: oklch(0.962 0.044 156.743);
     --color-green-800: oklch(0.448 0.119 151.328);
@@ -67,10 +67,16 @@
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --default-font-family: var(--font-sans);
     --default-font-feature-settings: var(--font-sans--font-feature-settings);
-    --default-font-variation-settings: var(--font-sans--font-variation-settings);
+    --default-font-variation-settings: var(
+      --font-sans--font-variation-settings
+    );
     --default-mono-font-family: var(--font-mono);
-    --default-mono-font-feature-settings: var(--font-mono--font-feature-settings);
+    --default-mono-font-feature-settings: var(
-    --default-mono-font-variation-settings: var(--font-mono--font-variation-settings);
+      --font-mono--font-feature-settings
+    );
+    --default-mono-font-variation-settings: var(
+      --font-mono--font-variation-settings
+    );
     --color-co-blue: #243887;
     --color-co-red: #ff1300;
     --color-co-green: #6cc11f;
@@ -89,7 +95,7 @@
     line-height: 1.5;
     -webkit-text-size-adjust: 100%;
     tab-size: 4;
-    font-family: var( --default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' );
+    font-family: var( --default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" );
     font-feature-settings: var(--default-font-feature-settings, normal);
     font-variation-settings: var( --default-font-variation-settings, normal );
     -webkit-tap-highlight-color: transparent;
@@ -119,7 +125,7 @@
     font-weight: bolder;
   }
   code, kbd, samp, pre {
-    font-family: var( --default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace );
+    font-family: var( --default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace );
     font-feature-settings: var( --default-mono-font-feature-settings, normal );
     font-variation-settings: var( --default-mono-font-variation-settings, normal );
     font-size: 1em;
@@ -209,13 +215,13 @@
   :-moz-ui-invalid {
     box-shadow: none;
   }
-  button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button {
+  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
     appearance: button;
   }
   ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
     height: auto;
   }
-  [hidden]:where(:not([hidden='until-found'])) {
+  [hidden]:where(:not([hidden="until-found"])) {
     display: none !important;
   }
 }
@@ -349,6 +355,9 @@
   .col-span-full {
     grid-column: 1 / -1;
   }
+  .col-start-1 {
+    grid-column-start: 1;
+  }
   .col-start-auto {
     grid-column-start: auto;
   }
@@ -361,6 +370,9 @@
   .row-span-full {
     grid-row: 1 / -1;
   }
+  .row-start-1 {
+    grid-row-start: 1;
+  }
   .row-start-auto {
     grid-row-start: auto;
   }
@@ -451,12 +463,12 @@
   .-mx-4 {
     margin-inline: calc(var(--spacing) * -4);
   }
+  .mx-2 {
+    margin-inline: calc(var(--spacing) * 2);
+  }
   .mx-auto {
     margin-inline: auto;
   }
-  .-my-1 {
-    margin-block: calc(var(--spacing) * -1);
-  }
   .-my-1\.5 {
     margin-block: calc(var(--spacing) * -1.5);
   }
@@ -505,9 +517,6 @@
   .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);
   }
@@ -658,6 +667,10 @@
   .aspect-square {
     aspect-ratio: 1 / 1;
   }
+  .size-5 {
+    width: calc(var(--spacing) * 5);
+    height: calc(var(--spacing) * 5);
+  }
   .h-0 {
     height: calc(var(--spacing) * 0);
   }
@@ -703,27 +716,15 @@
   .max-h-screen {
     max-height: 100vh;
   }
-  .min-h-10 {
-    min-height: calc(var(--spacing) * 10);
-  }
-  .min-h-50 {
-    min-height: calc(var(--spacing) * 50);
-  }
   .min-h-full {
     min-height: 100%;
   }
   .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%);
   }
@@ -760,9 +761,6 @@
   .w-48 {
     width: calc(var(--spacing) * 48);
   }
-  .w-50 {
-    width: calc(var(--spacing) * 50);
-  }
   .w-100 {
     width: calc(var(--spacing) * 100);
   }
@@ -1913,6 +1911,9 @@
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
+  .p-10 {
+    padding: calc(var(--spacing) * 10);
+  }
   .p-12 {
     padding: calc(var(--spacing) * 12);
   }
@@ -1934,6 +1935,9 @@
   .py-1 {
     padding-block: calc(var(--spacing) * 1);
   }
+  .py-1\.5 {
+    padding-block: calc(var(--spacing) * 1.5);
+  }
   .py-2 {
     padding-block: calc(var(--spacing) * 2);
   }
@@ -1961,9 +1965,6 @@
   .py-12 {
     padding-block: calc(var(--spacing) * 12);
   }
-  .pt-1 {
-    padding-top: calc(var(--spacing) * 1);
-  }
   .pt-1\.5 {
     padding-top: calc(var(--spacing) * 1.5);
   }
@@ -1991,6 +1992,9 @@
   .pr-4 {
     padding-right: calc(var(--spacing) * 4);
   }
+  .pr-8 {
+    padding-right: calc(var(--spacing) * 8);
+  }
   .pr-9 {
     padding-right: calc(var(--spacing) * 9);
   }
@@ -2097,6 +2101,10 @@
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
+  .text-sm\/6 {
+    font-size: var(--text-sm);
+    line-height: calc(var(--spacing) * 6);
+  }
   .leading-4 {
     --tw-leading: calc(var(--spacing) * 4);
     line-height: calc(var(--spacing) * 4);
@@ -2490,6 +2498,16 @@
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
   }
+  .outline-1 {
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+  }
+  .-outline-offset-1 {
+    outline-offset: calc(1px * -1);
+  }
+  .outline-gray-300 {
+    outline-color: var(--color-gray-300);
+  }
   .blur {
     --tw-blur: blur(8px);
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
@@ -2780,6 +2798,11 @@
       }
     }
   }
+  .placeholder\:text-gray-400 {
+    &::placeholder {
+      color: var(--color-gray-400);
+    }
+  }
   .focus-within\:text-gray-600 {
     &:focus-within {
       color: var(--color-gray-600);
@@ -2994,6 +3017,22 @@
       --tw-ring-offset-color: var(--color-gray-100);
     }
   }
+  .focus\:outline-2 {
+    &:focus {
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
+    }
+  }
+  .focus\:-outline-offset-2 {
+    &:focus {
+      outline-offset: calc(2px * -1);
+    }
+  }
+  .focus\:outline-indigo-600 {
+    &:focus {
+      outline-color: var(--color-indigo-600);
+    }
+  }
   .focus\:outline-none {
     &:focus {
       --tw-outline-style: none;
@@ -3005,6 +3044,22 @@
       --tw-ring-inset: inset;
     }
   }
+  .focus-visible\:outline-2 {
+    &:focus-visible {
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
+    }
+  }
+  .focus-visible\:-outline-offset-2 {
+    &:focus-visible {
+      outline-offset: calc(2px * -1);
+    }
+  }
+  .focus-visible\:outline-indigo-600 {
+    &:focus-visible {
+      outline-color: var(--color-indigo-600);
+    }
+  }
   .disabled\:cursor-not-allowed {
     &:disabled {
       cursor: not-allowed;
@@ -3110,6 +3165,12 @@
       display: none;
     }
   }
+  .sm\:size-4 {
+    @media (width >= 40rem) {
+      width: calc(var(--spacing) * 4);
+      height: calc(var(--spacing) * 4);
+    }
+  }
   .sm\:w-auto {
     @media (width >= 40rem) {
       width: auto;
@@ -3319,6 +3380,12 @@
       line-height: var(--tw-leading, var(--text-sm--line-height));
     }
   }
+  .sm\:text-sm\/6 {
+    @media (width >= 40rem) {
+      font-size: var(--text-sm);
+      line-height: calc(var(--spacing) * 6);
+    }
+  }
   .md\:fixed {
     @media (width >= 48rem) {
       position: fixed;
@@ -3557,6 +3624,61 @@
       background-color: var(--color-gray-800);
     }
   }
+  .dark\:bg-white\/5 {
+    @media (prefers-color-scheme: dark) {
+      background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
+    }
+  }
+  .dark\:text-gray-400 {
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-gray-400);
+    }
+  }
+  .dark\:text-white {
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-white);
+    }
+  }
+  .dark\:outline-white\/10 {
+    @media (prefers-color-scheme: dark) {
+      outline-color: color-mix(in oklab, var(--color-white) 10%, transparent);
+    }
+  }
+  .dark\:\*\:bg-gray-800 {
+    @media (prefers-color-scheme: dark) {
+      :is(& > *) {
+        background-color: var(--color-gray-800);
+      }
+    }
+  }
+  .dark\:placeholder\:text-gray-500 {
+    @media (prefers-color-scheme: dark) {
+      &::placeholder {
+        color: var(--color-gray-500);
+      }
+    }
+  }
+  .dark\:focus\:outline-co-blue {
+    @media (prefers-color-scheme: dark) {
+      &:focus {
+        outline-color: var(--color-co-blue);
+      }
+    }
+  }
+  .dark\:focus-visible\:outline-co-blue {
+    @media (prefers-color-scheme: dark) {
+      &:focus-visible {
+        outline-color: var(--color-co-blue);
+      }
+    }
+  }
+  .dark\:focus-visible\:outline-indigo-500 {
+    @media (prefers-color-scheme: dark) {
+      &:focus-visible {
+        outline-color: var(--color-indigo-500);
+      }
+    }
+  }
 }
 @font-face {
   font-family: "Manometer";