many updates

2025-09-25 08:13:43 +02:00 · 2025-09-25 08:13:43 +02:00 · 9280f36a62
parent d3e534fa72
commit 9280f36a62
14 changed files with 512 additions and 54 deletions
--- a/config.yaml
+++ b/config.yaml
@ -226,7 +226,7 @@ views:
        - web/layouts/journeys/_partials/journeys-vehicles.html
        - web/layouts/journeys/_partials/journeys-local-solutions.html
        - web/layouts/journeys/_partials/journeys-carpool.html
-        - web/layouts/journeys/_partials/journeys-public-transit-motis.html
+        - web/layouts/journeys/_partials/journeys-public-transit-transitous.html
        - web/layouts/journeys/_partials/journeys-solidarity-transport.html
        - web/layouts/journeys/_partials/journeys-organized-carpools.html
        - web/layouts/journeys/search.html
@ -302,6 +302,7 @@ views:
        - web/layouts/solidarity_transport/_partials/driver_availabilities.html
        - web/layouts/solidarity_transport/_partials/driver_history.html
        - web/layouts/solidarity_transport/_partials/driver_documents.html
+        - web/layouts/solidarity_transport/_partials/driver_wallet.html
        - web/layouts/solidarity_transport/driver_display.html
    driver_journey:
      files:
@ -348,8 +349,14 @@ views:
        - web/layouts/organized_carpool/driver_display.html
    journey:
      files:
+        - sms/organized_carpool/request_driver.tmpl
+        - web/layouts/_partials/submit_with_sms.html
        - web/layouts/organized_carpool/_partials/journey_preview.html
        - web/layouts/organized_carpool/journey.html
+    booking_display:
+      files:
+        - web/layouts/organized_carpool/_partials/booking_map.html
+        - web/layouts/organized_carpool/booking_display.html

  administration:
    home:
@ -439,6 +446,8 @@ icons:
    tabler-icons:walk: <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-walk %s" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="13" cy="4" r="1" /><line x1="7" y1="21" x2="10" y2="17" /><path d="M16 21l-2 -4l-3 -3l1 -6" /><path d="M6 12l2 -3l4 -1l3 3l3 1" /></svg>
    tabler-icons:bus: <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-bus %s" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="6" cy="17" r="2" /><circle cx="18" cy="17" r="2" /><path d="M4 17h-2v-11a1 1 0 0 1 1 -1h14a5 7 0 0 1 5 7v5h-2m-4 0h-8" /><polyline points="16 5 17.5 12 22 12" /><line x1="2" y1="10" x2="17" y2="10" /><line x1="7" y1="5" x2="7" y2="10" /><line x1="12" y1="5" x2="12" y2="10" /></svg>
    tabler-icons:train: <svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-train %s"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M21 13c0 -3.87 -3.37 -7 -10 -7h-8" /><path d="M3 15h16a2 2 0 0 0 2 -2" /><path d="M3 6v5h17.5" /><path d="M3 11v4" /><path d="M8 11v-5" /><path d="M13 11v-4.5" /><path d="M3 19h18" /></svg>
+    hero:outline/map-pin: <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 10.5a3 3 0 11-6 0 3 3 0 016 0z" /><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25s-7.5-4.108-7.5-11.25a7.5 7.5 0 1115 0z" /></svg>
+    hero:outline/flag: <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 3v1.5M3 21v-6m0 0l2.77-.693a9 9 0 016.208.682l.108.054a9 9 0 006.086.71l3.114-.732a48.524 48.524 0 01-.005-10.499l-3.11.732a9 9 0 01-6.085-.711l-.108-.054a9 9 0 00-6.208-.682L3 4.5M3 15V4.5" /></svg>

 emails:
  onboarding:
@ -503,3 +512,6 @@ sms:
  solidarity_transport:
    request_driver:
      - sms/solidarity_transport/request_driver.tmpl
+  organized_carpool:
+    request_driver:
+      - sms/organized_carpool/request_driver.tmpl
--- a/sms/organized_carpool/request_driver.tmpl
+++ b/sms/organized_carpool/request_driver.tmpl
@ -0,0 +1,2 @@
+{{ define "sms_template" }}[{{ .name }}] Nouvelle demande de covoiturage solidaire le {{ .datetime }}.
+Acceptez ou refusez sur {{ .baseUrl }}/ext/oc/bp/{booking_id}{{ end }}
--- a/web/layouts/journeys/_partials/journeys-all.html
+++ b/web/layouts/journeys/_partials/journeys-all.html
@ -21,8 +21,8 @@
    <div class="px-4 pt-4 flex text-sm text-grey-900 font-bold">
        <div class="flex-1">
            {{.IconSet.Icon "tabler-icons:bus" "h-6 w-6 inline-flex mr-4"}}
-            {{$itinerary.StartTime.Format "15:04"}} - {{$itinerary.EndTime.Format "15:04"}}
-            ({{divideInt $itinerary.Duration 60}} Minutes)
+            {{ timeFormat $itinerary.StartTime "15:04" }} - {{ timeFormat $itinerary.EndTime "15:04" }}
+            ({{shortDuration $itinerary.Duration}})
        </div>
        <div></div>
    </div>
--- a/web/layouts/journeys/_partials/journeys-organized-carpools.html
+++ b/web/layouts/journeys/_partials/journeys-organized-carpools.html
@ -5,13 +5,12 @@
 <p class="p-12 text-gray-500 text-center text-md">Aucun covoitureur solidaire disponible pour ce trajet.</p>
 {{else}}

-<h3 class="p-4 text-lg">Covoitureurs solidaires</h3>
 <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">
-          Covoitureurs disponibles
+          Covoitureurs solidaires
      </th>
      <th scope="col"
          class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">
@ -41,7 +40,7 @@
      <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">{{ .Distance }} km</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/organized-carpool/drivers/{{$driver.ID}}/journeys/{{.Id}}?{{unescapeHTML $.ViewState.querystring}}">
+          href="/app/organized-carpool/drivers/{{$driver.ID}}/journeys/{{.Id}}">
          Organiser
        </a>
      </td>
--- a/web/layouts/journeys/_partials/journeys-public-transit-transitous.html
+++ b/web/layouts/journeys/_partials/journeys-public-transit-transitous.html
@ -2,8 +2,8 @@
 {{ range .ViewState.journeys }}
 <div class="p-4 pb-8">
    <div class="flex text-md text-grey-900 font-bold">
-        <div class="flex-1">{{ .StartTime.Format "15:04" }} - {{ .EndTime.Format "15:04" }}</div>
-        <div>{{ divideInt .Duration 60 }} Minutes</div>
+        <div class="flex-1">{{ timeFormat .StartTime "15:04" }} - {{ timeFormat .EndTime "15:04" }}</div>
+        <div>{{ shortDuration .Duration }}</div>
    </div>
    <div class="flow-root">
        <ul role="list" class="-mb-8">
@ -30,7 +30,7 @@
                          </div>
                          {{ else }}
                          <div>
-                            <p class="text-xs text-gray-500">Attendre  <a href="#" class="font-medium text-gray-900">{{ divideInt .Duration 60 }} minutes</a></p>
+                            <p class="text-xs text-gray-500">Attendre  <a href="#" class="font-medium text-gray-900">{{ shortDuration .Duration }}</a></p>
                          </div>
                          {{ end }}
                        </div>
@ -57,7 +57,7 @@
                      </div>
                      <div class="ml-16 pt-2">
                        <div>
-                            <p class="text-sm text-gray-500">Départ <a href="#" class="font-medium text-gray-900">{{.StartTime.Format "15:04"}}</a> - Arrivée <a href="#" class="font-medium text-gray-900">{{.EndTime.Format "15:04"}}</a></p>
+                            <p class="text-sm text-gray-500">Départ <a href="#" class="font-medium text-gray-900">{{timeFormat .StartTime "15:04"}}</a> - Arrivée <a href="#" class="font-medium text-gray-900">{{timeFormat .EndTime "15:04"}}</a></p>
                          </div>
                          <div>
                            <p class="text-sm text-gray-500">De <a href="#" class="font-medium text-gray-900">{{.From.Name}}</a> à <a href="#" class="font-medium text-gray-900">{{.To.Name}}</a></p>
@ -87,7 +87,7 @@
                      </div>
                      <div class="ml-16 pt-2">
                        <div>
-                            <p class="text-sm text-gray-500">Départ <a href="#" class="font-medium text-gray-900">{{.StartTime.Format "15:04"}}</a> - Arrivée <a href="#" class="font-medium text-gray-900">{{.EndTime.Format "15:04"}}</a></p>
+                            <p class="text-sm text-gray-500">Départ <a href="#" class="font-medium text-gray-900">{{timeFormat .StartTime "15:04"}}</a> - Arrivée <a href="#" class="font-medium text-gray-900">{{timeFormat .EndTime "15:04"}}</a></p>
                          </div>
                          <div>
                            <p class="text-sm text-gray-500">De <a href="#" class="font-medium text-gray-900">{{.From.Name}}</a> à <a href="#" class="font-medium text-gray-900">{{.To.Name}}</a></p>
--- a/web/layouts/organized_carpool/_partials/booking_map.html
+++ b/web/layouts/organized_carpool/_partials/booking_map.html
@ -0,0 +1,180 @@
+{{ define "organized_carpool_map" }}
+<div id="map" class="w-full h-full min-h-96"></div>
+<script>
+  let protocol = new pmtiles.Protocol();
+  maplibregl.addProtocol("pmtiles",protocol.tile);
+  var map = new maplibregl.Map({
+    container: 'map', // container id
+    style: "/public/maps/protomaps-light/style.json",
+  });
+
+  const geojsonPoints = {
+    "type": "FeatureCollection",
+    "features": [
+      {
+        "type": "Feature",
+        "geometry": {
+          "type": "Point",
+          "coordinates": [{{ .booking.PassengerPickupLng }}, {{ .booking.PassengerPickupLat }}]
+        },
+        "properties": {
+          "label": "{{ .booking.PassengerPickupAddress }}",
+          "type": "pickup"
+        }
+      },
+      {
+        "type": "Feature",
+        "geometry": {
+          "type": "Point",
+          "coordinates": [{{ .booking.PassengerDropLng }}, {{ .booking.PassengerDropLat }}]
+        },
+        "properties": {
+          "label": "{{ .booking.PassengerDropAddress }}",
+          "type": "drop"
+        }
+      }
+    ]
+  }
+
+  map.on('load', async () => {
+    // Add route polyline if available
+    // Add driver route if available
+    {{if .booking.DriverRoute}}
+    console.log("DriverRoute found");
+    try {
+      const driverRoute = JSON.parse(`{{ .booking.DriverRoute.Serialized }}`);
+      console.log("Parsed driverRoute:", driverRoute);
+      console.log("DriverRoute type:", driverRoute.type);
+      console.log("DriverRoute features:", driverRoute.features);
+      console.log("DriverRoute features count:", driverRoute.features ? driverRoute.features.length : 0);
+      console.log("DriverRoute keys:", Object.keys(driverRoute));
+      if (driverRoute.features && driverRoute.features.length > 0) {
+        console.log("First feature:", driverRoute.features[0]);
+        console.log("LineString features:", driverRoute.features.filter(f => f.geometry && f.geometry.type === 'LineString'));
+      } else {
+        console.log("No features found, checking alternative structure");
+        console.log("All driverRoute properties:", driverRoute);
+      }
+
+      map.addSource('driver_route', {
+        type: "geojson",
+        data: driverRoute
+      });
+
+      map.addLayer({
+        'id': 'driver_route',
+        'type': 'line',
+        'source': 'driver_route',
+        'filter': ['==', ['geometry-type'], 'LineString'], // Only show LineString geometries
+        'layout': {
+          'line-join': 'round',
+          'line-cap': 'round',
+        },
+        'paint': {
+          'line-color': '#243887', // Blue - main application color
+          'line-width': 3
+        },
+      });
+      console.log("Driver route layer added successfully");
+    } catch (error) {
+      console.error("Error adding driver route:", error);
+    }
+    {{else}}
+    console.log("No DriverRoute available");
+    {{end}}
+
+    // Add passenger route if available
+    {{if .booking.PassengerRoute}}
+    console.log("PassengerRoute found");
+    try {
+      const passengerRoute = JSON.parse(`{{ .booking.PassengerRoute.Serialized }}`);
+      console.log("Parsed passengerRoute:", passengerRoute);
+      console.log("PassengerRoute type:", passengerRoute.type);
+      console.log("PassengerRoute features count:", passengerRoute.features ? passengerRoute.features.length : 0);
+
+      map.addSource('passenger_route', {
+        type: "geojson",
+        data: passengerRoute
+      });
+
+      map.addLayer({
+        'id': 'passenger_route',
+        'type': 'line',
+        'source': 'passenger_route',
+        'filter': ['==', ['geometry-type'], 'LineString'], // Only show LineString geometries
+        'layout': {
+          'line-join': 'round',
+          'line-cap': 'round',
+        },
+        'paint': {
+          'line-color': '#243887', // Blue - main application color
+          'line-width': 3
+        },
+      });
+      console.log("Passenger route layer added successfully");
+    } catch (error) {
+      console.error("Error adding passenger route:", error);
+    }
+    {{else}}
+    console.log("No PassengerRoute available");
+    {{end}}
+
+    map.addSource('carpool_points', {
+      type: "geojson",
+      data: geojsonPoints
+    })
+
+    // Add pickup point
+    map.addLayer({
+      'id': 'pickup_point',
+      'type': 'circle',
+      'source': 'carpool_points',
+      'filter': ['==', ['get', 'type'], 'pickup'],
+      'paint': {
+        'circle-color': '#243887', // Blue - main application color
+        'circle-radius': 8,
+        'circle-stroke-color': '#fff',
+        'circle-stroke-width': 2
+      },
+    });
+
+    // Add drop point
+    map.addLayer({
+      'id': 'drop_point',
+      'type': 'circle',
+      'source': 'carpool_points',
+      'filter': ['==', ['get', 'type'], 'drop'],
+      'paint': {
+        'circle-color': '#243887', // Blue - main application color
+        'circle-radius': 8,
+        'circle-stroke-color': '#fff',
+        'circle-stroke-width': 2
+      },
+    });
+
+    // Add popup on click
+    map.on('click', 'pickup_point', (e) => {
+      new maplibregl.Popup()
+        .setLngLat(e.lngLat)
+        .setHTML(`<strong>Point de départ</strong><br>${e.features[0].properties.label}`)
+        .addTo(map);
+    });
+
+    map.on('click', 'drop_point', (e) => {
+      new maplibregl.Popup()
+        .setLngLat(e.lngLat)
+        .setHTML(`<strong>Destination</strong><br>${e.features[0].properties.label}`)
+        .addTo(map);
+    });
+
+    // Change cursor on hover
+    map.on('mouseenter', 'pickup_point', () => map.getCanvas().style.cursor = 'pointer');
+    map.on('mouseleave', 'pickup_point', () => map.getCanvas().style.cursor = '');
+    map.on('mouseenter', 'drop_point', () => map.getCanvas().style.cursor = 'pointer');
+    map.on('mouseleave', 'drop_point', () => map.getCanvas().style.cursor = '');
+
+    var bbox = turf.bbox(geojsonPoints)
+    map.fitBounds(bbox, { padding: 50 })
+  })
+</script>
+{{ end }}
--- a/web/layouts/organized_carpool/_partials/bookings_list.html
+++ b/web/layouts/organized_carpool/_partials/bookings_list.html
@ -40,32 +40,32 @@
    {{range .ViewState.bookings}}
    <tr>
      <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
-        <a class="text-co-blue" href="/app/organized-carpool/drivers/{{.DriverId}}">
-        {{ (index $.ViewState.drivers_map .DriverId).Data.first_name }} 
-        {{ (index $.ViewState.drivers_map .DriverId).Data.last_name }}
+        <a class="text-co-blue" href="/app/organized-carpool/drivers/{{.Driver.Id}}">
+        {{ (index $.ViewState.drivers_map .Driver.Id).Data.first_name }}
+        {{ (index $.ViewState.drivers_map .Driver.Id).Data.last_name }}
        </a>
      </td>
      <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
-        <a class="text-co-blue" href="/app/beneficiaries/{{.PassengerId}}">
-        {{ (index $.ViewState.passengers_map .PassengerId).Data.first_name }} 
-        {{ (index $.ViewState.passengers_map .PassengerId).Data.last_name }}
+        <a class="text-co-blue" href="/app/beneficiaries/{{.Passenger.Id}}">
+        {{ (index $.ViewState.passengers_map .Passenger.Id).Data.first_name }}
+        {{ (index $.ViewState.passengers_map .Passenger.Id).Data.last_name }}
        </a>
      </td>
-      <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
-        {{ .Journey.PassengerPickup.Properties.label }} 
+      <td class="py-4 pl-4 pr-3 text-sm sm:pl-6">
+        {{ .PassengerPickupAddress }}
+      </td>
+      <td class="py-4 pl-4 pr-3 text-sm sm:pl-6">
+        {{ .PassengerDropAddress }}
      </td>
      <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
-        {{ .Journey.PassengerDrop.Properties.label }} 
+        {{ timeFormat .PassengerPickupDate.AsTime "02/01/2006 15:04" }}
      </td>
      <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
-        {{ .Journey.PassengerPickupDate.Format "02/01/2006 15:04" }} 
-      </td>
-      <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
-        {{ if eq .Status "WAITING_CONFIRMATION"}}
+        {{ if eq .Status.String "WAITING_DRIVER_CONFIRMATION"}}
        <span class="p-1 text-xs bg-gray-300 rounded-xl">Attente confirmation</span>
-        {{ else if eq .Status "VALIDATED"}}
+        {{ else if eq .Status.String "VALIDATED"}}
        <span class="p-1 text-xs bg-co-green rounded-xl">Validé</span>
-        {{ else if eq .Status "CANCELLED"}}
+        {{ else if eq .Status.String "CANCELLED"}}
        <span class="p-1 text-xs bg-co-red text-white rounded-xl">Annulé</span>
        {{ end }}
      </td>
--- a/web/layouts/organized_carpool/_partials/journey_preview.html
+++ b/web/layouts/organized_carpool/_partials/journey_preview.html
@ -12,11 +12,23 @@
                        <dl class="grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-2">
                            <div class="sm:col-span-1">
                                <dt class="text-sm font-medium text-gray-500">Départ passager</dt>
-            <dd class="mt-1 text-sm text-gray-900">{{(index .journey.Features 0).Properties.MustString "label"}}</dd>
+            <dd class="mt-1 text-sm text-gray-900">
+              {{ if .journey.ExtraMembers.passenger_pickup }}
+                {{ .journey.ExtraMembers.passenger_pickup.properties.label }}
+              {{ else }}
+                Adresse non disponible
+              {{ end }}
+            </dd>
                            </div>
                            <div class="sm:col-span-1">
                                <dt class="text-sm font-medium text-gray-500">Destination passager</dt>
-            <dd class="mt-1 text-sm text-gray-900">{{(index .journey.Features 1).Properties.MustString "label"}}</dd>
+            <dd class="mt-1 text-sm text-gray-900">
+              {{ if .journey.ExtraMembers.passenger_drop }}
+                {{ .journey.ExtraMembers.passenger_drop.properties.label }}
+              {{ else }}
+                Adresse non disponible
+              {{ end }}
+            </dd>
                            </div>
                            <div class="sm:col-span-1">
                                <dt class="text-sm font-medium text-gray-500">Départ conducteur</dt>
--- a/web/layouts/organized_carpool/booking_display.html
+++ b/web/layouts/organized_carpool/booking_display.html
@ -0,0 +1,168 @@
+{{define "content"}}
+<div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
+    <h1 class="text-2xl font-semibold text-gray-900">
+      Covoiturage solidaire
+    </h1>
+
+    {{ if eq .ViewState.booking.Status.String "WAITING_DRIVER_CONFIRMATION"}}
+    <div class="mt-4"><span class="p-2 text-sm bg-gray-300 rounded-2xl px-4">Attente confirmation</span></div>
+    {{ else if eq .ViewState.booking.Status.String "CONFIRMED"}}
+    <div class="mt-4"><span class="p-1 text-sm bg-co-green rounded-2xl px-4">Confirmé</span></div>
+    {{ else if eq .ViewState.booking.Status.String "CANCELLED"}}
+    <div class="mt-4"><span class="p-1 text-sm bg-co-red text-white rounded-2xl px-4">Annulé</span></div>
+    {{ end }}
+
+    <div class="mt-6 flex justify-end space-x-3">
+      {{if eq .ViewState.booking.Status.String "WAITING_DRIVER_CONFIRMATION" }}
+      <a href="/app/organized-carpool/bookings/{{.ViewState.booking.Id}}/confirm" class="inline-flex">
+        <button type="button" class="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">
+          Confirmer
+        </button>
+      </a>
+      {{end}}
+
+      {{if ne .ViewState.booking.Status.String "WAITING_DRIVER_CONFIRMATION" }}
+      <a href="/app/organized-carpool/bookings/{{.ViewState.booking.Id}}/waitconfirmation" class="inline-flex">
+        <button type="button" class="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">
+          Remettre en attente
+        </button>
+      </a>
+      {{end}}
+
+      {{if ne .ViewState.booking.Status.String "CANCELLED" }}
+      {{$dialog := "cancel"}}
+      <div x-data="{ {{ $dialog }}: false}">
+        <button @click="{{ $dialog }} = !{{ $dialog }}" type="button" class="bg-co-red border-gray-300 border px-4 py-2 text-white items-center text-sm rounded-2xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-co-blue">
+          Annuler
+        </button>
+        <div x-show="{{$dialog}}" class="relative z-10" aria-labelledby="modal-title" role="dialog" aria-modal="true">
+          <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
+
+          <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 max-w-lg sm:p-6">
+                <form method="POST" action="/app/organized-carpool/bookings/{{.ViewState.booking.Id}}/cancel">
+                  <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-co bg-co-blue text-white">
+                    {{$.IconSet.Icon "hero:outline/information-circle" "h-6 w-6"}}
+                  </div>
+                  <div class="mt-3 text-center sm:mt-5">
+                    <h3 class="text-lg font-medium leading-6 text-gray-900" id="modal-title">Annuler</h3>
+                    <div class="mt-2">
+                      <p class="text-sm text-gray-500">Êtes-vous sûr de vouloir annuler ce covoiturage ?</p>
+                    </div>
+                  </div>
+                  <div class="mt-5 sm:mt-6 sm:grid sm:grid-flow-row-dense sm:grid-cols-2">
+                    <button @click="{{$dialog}} = !{{$dialog}}" type="button" class="mt-3 inline-flex w-full justify-center rounded-l-2xl border border-gray-300 bg-white px-4 py-2 text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-co-blue focus:ring-offset-2 sm:col-start-1 sm:mt-0 sm:text-sm">Annuler</button>
+                    <button type="submit" class="inline-flex w-full justify-center rounded-r-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:col-start-2 sm:text-sm">Confirmer</button>
+                  </div>
+                </form>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      {{end}}
+
+      <a href='/app/journeys/?departure={"type":"Feature","geometry":{"type":"Point","coordinates":[{{.ViewState.booking.PassengerPickupLng}},{{.ViewState.booking.PassengerPickupLat}}]},"properties":{"label":"{{.ViewState.booking.PassengerPickupAddress}}"}}&destination={"type":"Feature","geometry":{"type":"Point","coordinates":[{{.ViewState.booking.PassengerDropLng}},{{.ViewState.booking.PassengerDropLat}}]},"properties":{"label":"{{.ViewState.booking.PassengerDropAddress}}"}}&passengerid={{.ViewState.passenger.ID}}' class="inline-flex">
+        <button type="button" class="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.String "CANCELLED" }}
+      <a href='/app/journeys/?departure={"type":"Feature","geometry":{"type":"Point","coordinates":[{{.ViewState.booking.PassengerPickupLng}},{{.ViewState.booking.PassengerPickupLat}}]},"properties":{"label":"{{.ViewState.booking.PassengerPickupAddress}}"}}&destination={"type":"Feature","geometry":{"type":"Point","coordinates":[{{.ViewState.booking.PassengerDropLng}},{{.ViewState.booking.PassengerDropLat}}]},"properties":{"label":"{{.ViewState.booking.PassengerDropAddress}}"}}&departuredate={{ timeFormat .ViewState.booking.PassengerPickupDate.AsTime "2006-01-02"}}&departuretime={{ timeFormat .ViewState.booking.PassengerPickupDate.AsTime "15:04"}}&passengerid={{.ViewState.passenger.ID}}&organized_carpool_exclude_driver={{.ViewState.driver.ID}}' class="inline-flex">
+        <button type="button" class="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}}
+    </div>
+</div>
+
+<div class="max-w-7xl mx-auto py-8 px-4 sm:px-6 md:px-8">
+  <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+    <!-- Booking Details -->
+    <div class="bg-white shadow overflow-hidden sm:rounded-lg">
+      <div class="px-4 py-5 sm:px-6">
+        <h3 class="text-lg leading-6 font-medium text-gray-900">Détails du covoiturage</h3>
+        <p class="mt-1 max-w-2xl text-sm text-gray-500">Informations sur le trajet</p>
+      </div>
+      <div class="border-t border-gray-200 px-4 py-5 sm:p-0">
+        <dl class="sm:divide-y sm:divide-gray-200">
+          <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+            <dt class="text-sm font-medium text-gray-500">Conducteur</dt>
+            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+		    <a class="text-co-blue" href="/app/organized-carpool/drivers/{{ .ViewState.driver.ID }}">{{ .ViewState.driver.Data.first_name }} {{ .ViewState.driver.Data.last_name }}</a>
+            </dd>
+          </div>
+          <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+            <dt class="text-sm font-medium text-gray-500">Passager</dt>
+            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+		    <a class="text-co-blue" href="/app/beneficiaries/{{ .ViewState.driver.ID }}">{{ .ViewState.passenger.Data.first_name }} {{ .ViewState.passenger.Data.last_name }}</a>
+            </dd>
+          </div>
+          <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+            <dt class="text-sm font-medium text-gray-500">Départ conducteur</dt>
+            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+                {{ .ViewState.driverDepartureAddress }}
+            </dd>
+          </div>
+          <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+            <dt class="text-sm font-medium text-gray-500">Prise en charge passager</dt>
+            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+              {{ .ViewState.booking.PassengerPickupAddress }}
+            </dd>
+          </div>
+          <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+            <dt class="text-sm font-medium text-gray-500">Dépose passager</dt>
+            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+              {{ .ViewState.booking.PassengerDropAddress }}
+            </dd>
+          </div>
+          <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+            <dt class="text-sm font-medium text-gray-500">Arrivée conducteur</dt>
+            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+              {{ if .ViewState.driverArrivalAddress }}
+                {{ .ViewState.driverArrivalAddress }}
+              {{ end }}
+            </dd>
+          </div>
+          <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+            <dt class="text-sm font-medium text-gray-500">Date et heure</dt>
+            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+              {{ timeFormat .ViewState.booking.PassengerPickupDate.AsTime "02/01/2006 15:04" }}
+            </dd>
+          </div>
+          <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+            <dt class="text-sm font-medium text-gray-500">Prix</dt>
+            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+              {{ if .ViewState.booking.Price }}
+                {{ if eq .ViewState.booking.Price.Type.String "FREE" }}
+                  <span class="text-co-green font-medium">Gratuit</span>
+                {{ else if eq .ViewState.booking.Price.Type.String "PAYING" }}
+                  <span class="font-medium">{{ printf "%.2f" .ViewState.booking.Price.Amount }} {{ .ViewState.booking.Price.Currency }}</span>
+                {{ else }}
+                  <span class="text-gray-500">Prix non défini</span>
+                {{ end }}
+              {{ else }}
+                <span class="text-gray-500">Prix non disponible</span>
+              {{ end }}
+            </dd>
+          </div>
+        </dl>
+      </div>
+    </div>
+
+    <!-- Map -->
+    <div class="bg-white shadow overflow-hidden sm:rounded-lg">
+      <div class="border-t border-gray-200 h-full">
+        <div class="h-full min-h-96">
+          {{ template "organized_carpool_map" .ViewState }}
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+{{ end }}
--- a/web/layouts/organized_carpool/journey.html
+++ b/web/layouts/organized_carpool/journey.html
@ -5,11 +5,32 @@
 <div class="max-w-7xl mx-auto py-8 px-4 sm:px-6 md:px-8">
  {{template "journey_preview" (dict "journey" .ViewState.journey "driver" .ViewState.driver "passenger" .ViewState.passenger "beneficiaries" .ViewState.beneficiaries)}}
 {{if ne .ViewState.passenger.ID ""}}
-<div class="max-w-7xl m-auto px-4 sm:px-6 md:px-8 flex justify-items-center">
+<div class="max-w-7xl m-auto px-4 sm:px-6 md:px-8 flex flex-col justify-items-center">
  <form method="POST">
-    <button class="w-100 bg-co-blue  border-gray-300 border px-4 py-2 text-white items-center text-sm rounded-2xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-co-blue">
-      Envoyer la mise en relation
-    </button>
+    <div class="m-auto text-center">
+      <label for="motivation" class="block text-sm font-medium text-gray-700">Motif du trajet</label>
+      <select name="motivation" id="motivation"
+          class="p-2 mt-1 mb-4 focus:ring-co-blue focus:border-co-blue block shadow-sm sm:text-sm  rounded-2xl bg-white m-auto">
+        <option value="Administratif">Administratif</option>
+        <option value="Commerce">Commerce</option>
+        <option value="Courses">Courses</option>
+        <option value="Insertion">Insertion</option>
+        <option value="Loisirs">Loisirs</option>
+        <option value="Travail">Travail</option>
+        <option value="Formation">Formation</option>
+        <option value="Visite à un proche">Visite à un proche</option>
+        <option value="Santé">Santé</option>
+        <option selected="selected" value="">Autre&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option>
+      </select>
+    </div>
+    {{template "submit_with_sms"
+      dict  "IconSet" .IconSet
+            "Viewstate" .ViewState
+            "ComponentState" (dict "submitText" "Envoyer la demande de covoiturage"
+                                   "doNotSendOption" true)
+            "SMSState" (dict "name" (.ViewState.config.GetString "service_name")
+                             "datetime" (or (timeFormat .ViewState.journey.ExtraMembers.departure_date "02/01/2006") "À définir")
+                             "baseUrl" (.ViewState.config.GetString "base_url") )}}
  </form>
 </div>
 {{end}}
--- a/web/layouts/organized_carpool/overview.html
+++ b/web/layouts/organized_carpool/overview.html
@ -4,7 +4,7 @@
  <h1 class="text-2xl font-semibold text-gray-900">Covoiturage solidaire</h1>

    <div class="bg-white shadow sm:rounded-lg sm:overflow-hidden my-4" x-data="{
-        tab: 'drivers',
+        tab: 'trips',
        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 = 'trips'"
+                                class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
+                                :class="tab == 'trips' ? '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'">
@ -23,21 +28,16 @@
                                class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
                                :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 = 'trips'"
-                                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>
                        </nav>
                    </div>
                </div>
            </div>

+            <div x-show="tab == 'trips'">{{template "carpool_bookings_list" .}}</div>
+
            <div x-show="tab == 'drivers'">{{template "carpool_drivers_list" .}}</div>

-
            <div x-show="tab == 'beneficiaries'">1</div>
-            <div x-show="tab == 'trips'">{{template "carpool_bookings_list" .}}</div>

        </div>
    </div>
--- a/web/layouts/solidarity_transport/_partials/driver_wallet.html
+++ b/web/layouts/solidarity_transport/_partials/driver_wallet.html
@ -0,0 +1,46 @@
+{{define "driver_wallet"}}
+<div class="px-4 py-6 sm:px-6 text-center"
+  x-data="{
+    walletdialog: false
+  }">
+  <div class="px-4 py-5 sm:px-6">
+    <p class="text-center text-lg">Solde : {{if .ViewState.driver.Data.wallet}}{{ printf "%.2f" .ViewState.driver.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
+  </button>
+  <div class="relative z-10" aria-labelledby="modal-title" role="dialog" aria-modal="true"
+       x-show="walletdialog">
+    <div class="fixed inset-0 bg-gray-900 opacity-30 transition-opacity"></div>
+
+    <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="mt-3 text-center sm:mt-5">
+              <h3 class="text-lg font-medium leading-6 text-gray-900" id="modal-title">Créditer le compte</h3>
+                <div class="mt-2">
+                  <p class="text-sm text-gray-500">Créditer le compte mobilité du conducteur</p>
+                </div>
+              </div>
+            </div>
+          <form method="POST" action="/app/wallets/{{.ViewState.driver.ID}}/credit" class="my-4">
+              <div class="my-8">
+                <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">
+                <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">Ajouter</button>
+              </div>
+              <div class="mt-5 sm:mt-6">
+                <button @click="walletdialog=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>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+</div>
+{{end}}
--- a/web/layouts/solidarity_transport/driver_display.html
+++ b/web/layouts/solidarity_transport/driver_display.html
@ -129,6 +129,8 @@

                                    <option value="documents">Documents</option>

+                                    <option value="wallet">Compte mobilité</option>
+
                                    <option value="history">Historique</option>
                                </select>
                            </div>
@ -146,6 +148,11 @@
                                        :class="tab == 'documents' ? 'border-co-blue text-co-blue' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'">
                                        Documents </a>

+                                        <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>
+
                                        <a href="#" @click="tab = 'history'"
                                        class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
                                        :class="tab == 'history' ? 'border-co-blue text-co-blue' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'">
@ -157,6 +164,7 @@
                        </div>

                        <div x-show="tab == 'documents'">{{template "driver_files" .}}</div>
+                        <div x-show="tab == 'wallet'">{{template "driver_wallet" .}}</div>
                        <div x-show="tab == 'history'">{{template "driver_history" .}}</div>

                    </div>
--- a/web/public/css/main.css
+++ b/web/public/css/main.css
@ -701,6 +701,9 @@
  .h-50 {
    height: calc(var(--spacing) * 50);
  }
+  .h-96 {
+    height: calc(var(--spacing) * 96);
+  }
  .h-full {
    height: 100%;
  }
@ -716,6 +719,12 @@
  .max-h-screen {
    max-height: 100vh;
  }
+  .min-h-96 {
+    min-height: calc(var(--spacing) * 96);
+  }
+  .min-h-100 {
+    min-height: calc(var(--spacing) * 100);
+  }
  .min-h-full {
    min-height: 100%;
  }
@ -761,9 +770,6 @@
  .w-48 {
    width: calc(var(--spacing) * 48);
  }
-  .w-100 {
-    width: calc(var(--spacing) * 100);
-  }
  .w-auto {
    width: auto;
  }
@ -803,6 +809,9 @@
  .min-w-full {
    min-width: 100%;
  }
+  .min-w-max {
+    min-width: max-content;
+  }
  .min-w-screen {
    min-width: 100vw;
  }
@ -1243,6 +1252,9 @@
  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }
+  .gap-8 {
+    gap: calc(var(--spacing) * 8);
+  }
  .-space-y-px {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
@ -3594,6 +3606,11 @@
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }
  }
+  .lg\:grid-cols-2 {
+    @media (width >= 64rem) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
  .lg\:grid-cols-3 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
@ -3672,13 +3689,6 @@
      }
    }
  }
-  .dark\:focus-visible\:outline-indigo-500 {
-    @media (prefers-color-scheme: dark) {
-      &:focus-visible {
-        outline-color: var(--color-indigo-500);
-      }
-    }
-  }
 }
@font-face {
  font-family: "Manometer";