Add history for solidarity transport and organized carpool

config.yaml

@@ -99,6 +99,7 @@ views:
         - web/layouts/beneficiaries/_partials/beneficiary-organizations.html
         - web/layouts/beneficiaries/_partials/beneficiary-wallet.html
         - web/layouts/beneficiaries/_partials/beneficiary-solidarity-transport.html
+        - web/layouts/beneficiaries/_partials/beneficiary-organized-carpool.html
         - web/layouts/beneficiaries/display.html
     update:
       files:
@@ -345,6 +346,8 @@ views:
         - web/layouts/_partials/address_autocomplete.html
         - web/layouts/organized_carpool/_partials/driver_availabilities.html
         - web/layouts/organized_carpool/_partials/driver_documents.html
+        - web/layouts/organized_carpool/_partials/driver_wallet.html
+        - web/layouts/organized_carpool/_partials/driver_history.html
         - web/layouts/organized_carpool/driver_display.html
     journey:
       files:

web/layouts/beneficiaries/_partials/beneficiary-organized-carpool.html

@@ -0,0 +1,73 @@
+{{define "beneficiary_organized_carpool"}}
+<div class="py-6">
+  {{if .ViewState.organized_carpool_stats}}
+  <div class="py-5 text-center">
+    <p class="text-lg">Trajets réalisés : {{ .ViewState.organized_carpool_stats.count }}</p>
+    <p class="text-lg">Kilomètres réalisés : {{ .ViewState.organized_carpool_stats.km}} km</p>
+  </div>
+  {{end}}
+
+  <div class="text-center py-5">
+    <a href="/app/journeys/?passengerid={{.ViewState.beneficiary.ID}}" 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">Chercher un trajet</button>
+    </a>
+  </div>
+
+  {{if .ViewState.organized_carpool_bookings}}
+  <div class="py-5">
+    <h4 class="text-lg font-medium text-gray-900 mb-4 text-center">Historique des covoiturages solidaires</h4>
+    <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">Date</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">Arrivée</th>
+          <th scope="col" 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"></th>
+        </tr>
+      </thead>
+      <tbody class="divide-y divide-gray-200 bg-white">
+        {{range .ViewState.organized_carpool_bookings}}
+        {{if or (eq .Status.String "CONFIRMED") (eq .Status.String "WAITING_DRIVER_CONFIRMATION")}}
+        <tr>
+          <td class="py-4 pl-4 pr-3 text-sm sm:pl-6">
+            {{timeFormat .PassengerPickupDate.AsTime "02/01/2006 15:04"}}
+          </td>
+          <td class="py-4 pl-4 pr-3 text-sm sm:pl-6">
+            {{if .Driver}}
+              <a class="text-co-blue" href="/app/organized-carpool/drivers/{{.Driver.Id}}">
+                {{ (index $.ViewState.organized_carpool_drivers_map .Driver.Id).Data.first_name }}
+                {{ (index $.ViewState.organized_carpool_drivers_map .Driver.Id).Data.last_name }}
+              </a>
+            {{end}}
+          </td>
+          <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">
+            {{if eq .Status.String "CONFIRMED"}}
+              <span class="p-1 px-2 text-xs bg-co-green rounded-2xl">Confirmé</span>
+            {{else if eq .Status.String "WAITING_DRIVER_CONFIRMATION"}}
+              <span class="p-1 px-2 text-xs bg-gray-300 rounded-2xl">Attente confirmation</span>
+            {{end}}
+          </td>
+          <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
+            <a class="text-co-blue" href="/app/organized-carpool/bookings/{{.Id}}">Voir</a>
+          </td>
+        </tr>
+        {{end}}
+        {{end}}
+      </tbody>
+    </table>
+  </div>
+  {{else}}
+  <div class="py-5">
+    <p class="text-sm text-gray-500 text-center">Aucun covoiturage solidaire enregistré</p>
+  </div>
+  {{end}}
+</div>
+{{end}}

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

@@ -1,10 +1,75 @@
 {{define "beneficiary_solidarity_transport"}}
-<div class="px-4 py-6 sm:px-6 text-center">
+<div class="py-6">
-  <p class="text-center text-lg">Trajets réalisés : {{ .ViewState.solidarity_transport_stats.count }}</p>
+  {{if .ViewState.solidarity_transport_stats}}
-  <p class="text-center text-lg">Kilomètres réalisés : {{ .ViewState.solidarity_transport_stats.km}} km</p>
+  <div class="py-5 text-center">
+    <p class="text-lg">Trajets réalisés : {{ .ViewState.solidarity_transport_stats.count }}</p>
+    <p class="text-lg">Kilomètres réalisés : {{ .ViewState.solidarity_transport_stats.km}} km</p>
+  </div>
+  {{end}}
 
-  <a href="/app/journeys/?passengerid={{.ViewState.beneficiary.ID}}" class="inline-flex">
+  <div class="text-center py-5">
-    <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 href="/app/journeys/?passengerid={{.ViewState.beneficiary.ID}}" class="inline-flex">
-  </a>
+      <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">Chercher un trajet</button>
+    </a>
+  </div>
+
+  {{if .ViewState.solidarity_transport_bookings}}
+  <div class="py-5">
+    <h4 class="text-lg font-medium text-gray-900 mb-4 text-center">Historique des transports solidaires</h4>
+    <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">Date</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">Arrivée</th>
+          <th scope="col" 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"></th>
+        </tr>
+      </thead>
+      <tbody class="divide-y divide-gray-200 bg-white">
+        {{range .ViewState.solidarity_transport_bookings}}
+        {{if or (eq .Status "VALIDATED") (eq .Status "WAITING_CONFIRMATION")}}
+        <tr>
+          <td class="py-4 pl-4 pr-3 text-sm sm:pl-6">
+            {{if .Journey}}
+              {{timeFormat .Journey.PassengerPickupDate "02/01/2006 15:04"}}
+            {{end}}
+          </td>
+          <td class="py-4 pl-4 pr-3 text-sm sm:pl-6">
+            {{if .DriverId}}
+              <a class="text-co-blue" href="/app/solidarity-transport/drivers/{{.DriverId}}">
+                {{ (index $.ViewState.solidarity_transport_drivers_map .DriverId).Data.first_name }}
+                {{ (index $.ViewState.solidarity_transport_drivers_map .DriverId).Data.last_name }}
+              </a>
+            {{end}}
+          </td>
+          <td class="py-4 pl-4 pr-3 text-sm sm:pl-6">
+            {{if .Journey}}{{if .Journey.PassengerPickup}}{{.Journey.PassengerPickup.Properties.label}}{{end}}{{end}}
+          </td>
+          <td class="py-4 pl-4 pr-3 text-sm sm:pl-6">
+            {{if .Journey}}{{if .Journey.PassengerDrop}}{{.Journey.PassengerDrop.Properties.label}}{{end}}{{end}}
+          </td>
+          <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
+            {{if eq .Status "VALIDATED"}}
+              <span class="p-1 px-2 text-xs bg-co-green rounded-2xl">Validé</span>
+            {{else if eq .Status "WAITING_CONFIRMATION"}}
+              <span class="p-1 px-2 text-xs bg-gray-300 rounded-2xl">Attente confirmation</span>
+            {{end}}
+          </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</a>
+          </td>
+        </tr>
+        {{end}}
+        {{end}}
+      </tbody>
+    </table>
+  </div>
+  {{else}}
+  <div class="py-5">
+    <p class="text-sm text-gray-500 text-center">Aucun transport solidaire enregistré</p>
+  </div>
+  {{end}}
 </div>
 {{end}}

web/layouts/beneficiaries/display.html

@@ -189,6 +189,12 @@
                                             Transport solidaire </a>
                                         {{end}}
 
+                                        {{if moduleAvailable "organized_carpool"}}
+                                        <a href="#" @click="tab = 'organized_carpool'"
+                                            class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
+                                            :class="tab == 'organized_carpool' ? 'border-co-blue text-co-blue' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'">
+                                            Covoiturage solidaire </a>
+                                        {{end}}
 
                                         <a href="#" @click="tab = 'organizations'"
                                             class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
@@ -208,6 +214,7 @@
                         <div x-show="tab == 'notes'">{{template "beneficiary_notes" .}}</div>
                         <div x-show="tab == 'wallet'">{{template "beneficiary_wallet" .}}</div>
                         {{if moduleAvailable "solidarity_transport"}}<div x-show="tab == 'solidarity_transport'">{{template "beneficiary_solidarity_transport" .}}</div>{{end}}
+                        {{if moduleAvailable "organized_carpool"}}<div x-show="tab == 'organized_carpool'">{{template "beneficiary_organized_carpool" .}}</div>{{end}}
                         <div x-show="tab == 'organizations'">{{template "beneficiary_organizations" .}}</div>
                     </div>
                 </div>

web/layouts/organized_carpool/_partials/driver_history.html

@@ -0,0 +1,61 @@
+{{define "organized_carpool_driver_history"}}
+<div class="py-6">
+  {{if .ViewState.stats}}
+  <div class="py-5 text-center">
+    <p class="text-lg">Covoiturages réalisés : {{ .ViewState.stats.bookings.confirmed }}</p>
+    <p class="text-lg">Kilomètres parcourus : {{ .ViewState.stats.bookings.km }} km</p>
+  </div>
+  {{end}}
+
+  {{if .ViewState.bookings}}
+  <div class="py-5">
+    <h4 class="text-lg font-medium text-gray-900 mb-4 text-center">Historique des covoiturages</h4>
+    <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">Date</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">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">Arrivée</th>
+          <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">Actions</th>
+        </tr>
+      </thead>
+      <tbody class="divide-y divide-gray-200 bg-white">
+        {{range .ViewState.bookings}}
+        {{if eq .Status.String "CONFIRMED"}}
+        <tr>
+          <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
+            {{if .PassengerPickupDate}}
+              {{timeFormat .PassengerPickupDate.AsTime "02/01/2006 15:04"}}
+            {{end}}
+          </td>
+          <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
+            {{if .Passenger}}
+              <a class="text-co-blue" href="/app/beneficiaries/{{.Passenger.Id}}">
+                {{ (index $.ViewState.beneficiaries_map .Passenger.Id).Data.first_name }}
+                {{ (index $.ViewState.beneficiaries_map .Passenger.Id).Data.last_name }}
+              </a>
+            {{end}}
+          </td>
+          <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">
+            <a class="text-co-blue" href="/app/organized-carpool/bookings/{{.Id}}">Voir</a>
+          </td>
+        </tr>
+        {{end}}
+        {{end}}
+      </tbody>
+    </table>
+  </div>
+  {{else}}
+  <div class="py-5">
+    <p class="text-sm text-gray-500 text-center">Aucun covoiturage enregistré</p>
+  </div>
+  {{end}}
+</div>
+{{end}}

web/layouts/organized_carpool/_partials/driver_wallet.html

@@ -0,0 +1,113 @@
+{{define "organized_carpool_driver_wallet"}}
+<div class="py-6"
+  x-data="{
+    walletdialog: false
+  }">
+  <div class="py-5 text-center">
+    <p class="text-lg">Solde : {{ printf "%.2f" .ViewState.wallet_balance }} €</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>
+
+  <!-- Wallet Operations History -->
+  {{if .ViewState.driver.Data.wallet_history}}
+  <div class="py-5">
+    <h4 class="text-lg font-medium text-gray-900 mb-4 text-center">Historique des opérations</h4>
+    <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">Date</th>
+          <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">Crédit</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ébit</th>
+          <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">Moyen de paiement</th>
+          <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">Description</th>
+        </tr>
+      </thead>
+      <tbody class="divide-y divide-gray-200 bg-white">
+        <!-- Initial Balance Row -->
+        <tr class="bg-gray-50">
+          <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm text-gray-500 italic sm:pl-6">
+            Solde initial
+          </td>
+          <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">
+            {{if .ViewState.driver.Data.wallet}}{{ printf "%.2f" .ViewState.driver.Data.wallet }} €{{else}}0.00 €{{end}}
+          </td>
+          <td class="py-4 pl-4 pr-3 text-sm text-gray-500 sm:pl-6">
+            -
+          </td>
+          <td class="py-4 pl-4 pr-3 text-sm text-gray-500 sm:pl-6">
+            -
+          </td>
+          <td class="py-4 pl-4 pr-3 text-sm text-gray-500 sm:pl-6">
+            -
+          </td>
+        </tr>
+        {{range $index, $operation := .ViewState.driver.Data.wallet_history}}
+        <tr>
+          <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
+            {{if $operation.timestamp}}{{timeFormat $operation.timestamp "02/01/2006 15:04"}}{{end}}
+          </td>
+          <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-green-600 sm:pl-6">
+            {{if $operation.amount}}
+              {{if or (eq $operation.operation_type "credit") (not $operation.operation_type)}}
+                {{ printf "%.2f" $operation.amount }} €
+              {{end}}
+            {{end}}
+          </td>
+          <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-red-600 sm:pl-6">
+            {{if eq $operation.operation_type "debit"}}
+              {{ printf "%.2f" $operation.amount }} €
+            {{end}}
+          </td>
+          <td class="py-4 pl-4 pr-3 text-sm sm:pl-6">
+            {{$operation.payment_method}}
+          </td>
+          <td class="py-4 pl-4 pr-3 text-sm sm:pl-6">
+            {{$operation.description}}
+          </td>
+        </tr>
+        {{end}}
+      </tbody>
+    </table>
+  </div>
+  {{else}}
+  <div class="py-5">
+    <p class="text-sm text-gray-500 text-center">Aucune opération enregistrée</p>
+  </div>
+  {{end}}
+
+</div>
+{{end}}

web/layouts/organized_carpool/booking_display.html

@@ -134,6 +134,14 @@
               {{ timeFormat .ViewState.booking.PassengerPickupDate.AsTime "02/01/2006 15:04" }}
             </dd>
           </div>
+          {{if .ViewState.booking.Distance}}
+          <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">Distance</dt>
+            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+              {{ .ViewState.booking.Distance }} km
+            </dd>
+          </div>
+          {{end}}
           <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 (passager)</dt>
             <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">

web/layouts/organized_carpool/driver_display.html

@@ -97,7 +97,7 @@
             </section>
 
             <section aria-labelledby="functionalities-title" x-data="{
-                    tab: 'documents',
+                    tab: '{{ if .ViewState.tab }}{{ .ViewState.tab }}{{ else }}documents{{ end }}',
                     to(event) {
                         this.tab = event.target.value
                     }
@@ -118,6 +118,10 @@
                                     <option value="events">Dispositifs</option> -->
 
                                     <option value="documents">Documents</option>
+
+                                    <option value="wallet">Compte mobilité</option>
+
+                                    <option value="history">Covoiturage solidaire</option>
                                 </select>
                             </div>
                             <div class="hidden sm:block">
@@ -134,12 +138,24 @@
                                         :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'">
+                                        Covoiturage solidaire </a>
+
                                     </nav>
                                 </div>
                             </div>
                         </div>
 
                         <div x-show="tab == 'documents'">{{template "driver_files" .}}</div>
+                        <div x-show="tab == 'wallet'">{{template "organized_carpool_driver_wallet" .}}</div>
+                        <div x-show="tab == 'history'">{{template "organized_carpool_driver_history" .}}</div>
 
                     </div>
                 </div>

web/layouts/solidarity_transport/_partials/driver_history.html

@@ -1,7 +1,69 @@
 {{define "driver_history"}}
-<div class="px-4 py-6 sm:px-6 text-center">
+<div class="py-6">
-  <p class="text-center text-lg">Trajets réalisés : {{ .ViewState.stats.bookings.count }}</p>
+  {{if .ViewState.stats}}
-  <p class="text-center text-lg">Kilomètres réalisés : {{ .ViewState.stats.bookings.km}} km</p>
+  <div class="py-5 text-center">
+    <p class="text-lg">Trajets réalisés : {{ .ViewState.stats.bookings.count }}</p>
+    <p class="text-lg">Kilomètres réalisés : {{ .ViewState.stats.bookings.km}} km</p>
+  </div>
+  {{end}}
 
+  {{if .ViewState.bookings}}
+  <div class="py-5">
+    <h4 class="text-lg font-medium text-gray-900 mb-4 text-center">Historique des transports solidaires</h4>
+    <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">Date</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">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">Arrivée</th>
+          <th scope="col" 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"></th>
+        </tr>
+      </thead>
+      <tbody class="divide-y divide-gray-200 bg-white">
+        {{range .ViewState.bookings}}
+        {{if or (eq .Status "VALIDATED") (eq .Status "WAITING_CONFIRMATION")}}
+        <tr>
+          <td class="py-4 pl-4 pr-3 text-sm sm:pl-6">
+            {{if .Journey}}
+              {{timeFormat .Journey.PassengerPickupDate "02/01/2006 15:04"}}
+            {{end}}
+          </td>
+          <td class="py-4 pl-4 pr-3 text-sm sm:pl-6">
+            {{if .PassengerId}}
+              <a class="text-co-blue" href="/app/beneficiaries/{{.PassengerId}}">
+                {{ (index $.ViewState.beneficiaries_map .PassengerId).Data.first_name }}
+                {{ (index $.ViewState.beneficiaries_map .PassengerId).Data.last_name }}
+              </a>
+            {{end}}
+          </td>
+          <td class="py-4 pl-4 pr-3 text-sm sm:pl-6">
+            {{if .Journey}}{{if .Journey.PassengerPickup}}{{.Journey.PassengerPickup.Properties.label}}{{end}}{{end}}
+          </td>
+          <td class="py-4 pl-4 pr-3 text-sm sm:pl-6">
+            {{if .Journey}}{{if .Journey.PassengerDrop}}{{.Journey.PassengerDrop.Properties.label}}{{end}}{{end}}
+          </td>
+          <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
+            {{if eq .Status "VALIDATED"}}
+              <span class="p-1 px-2 text-xs bg-co-green rounded-2xl">Validé</span>
+            {{else if eq .Status "WAITING_CONFIRMATION"}}
+              <span class="p-1 px-2 text-xs bg-gray-300 rounded-2xl">Attente confirmation</span>
+            {{end}}
+          </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</a>
+          </td>
+        </tr>
+        {{end}}
+        {{end}}
+      </tbody>
+    </table>
+  </div>
+  {{else}}
+  <div class="py-5">
+    <p class="text-sm text-gray-500 text-center">Aucun transport solidaire enregistré</p>
+  </div>
+  {{end}}
 </div>
 {{end}}

web/layouts/solidarity_transport/driver_display.html

@@ -148,7 +148,7 @@
             </section>
 
             <section aria-labelledby="functionalities-title" x-data="{
-                    tab: 'documents',
+                    tab: '{{ if .ViewState.tab }}{{ .ViewState.tab }}{{ else }}documents{{ end }}',
                     to(event) {
                         this.tab = event.target.value
                     }
@@ -172,7 +172,7 @@
 
                                     <option value="wallet">Compte mobilité</option>
 
-                                    <option value="history">Historique</option>
+                                    <option value="history">Transports solidaires</option>
                                 </select>
                             </div>
                             <div class="hidden sm:block">
@@ -197,7 +197,7 @@
                                         <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'">
-                                        Transport solidaires </a>
+                                        Transports solidaires </a>
 
                                     </nav>
                                 </div>

web/layouts/solidarity_transport/driver_journey.html

@@ -31,7 +31,7 @@
 <div class="max-w-7xl m-auto px-4 sm:px-6 md:px-8 flex flex-col justify-items-center">
   {{if .ViewState.passenger}}
   {{if lt .ViewState.passenger_wallet_balance .ViewState.pricing_result.passenger.Amount}}
-    <p class="text-xl text-co-red text-center p-4">Le solde du compte mobilité est insuffisant.</p>
+    <p class="text-xl text-co-red text-center p-4">Le solde du compte mobilité est insuffisant. <a href="/app/beneficiaries/{{.ViewState.passenger.ID}}?tab=wallet" class="underline text-co-blue">Créditer le compte</a></p>
     {{end}}
   <form method="POST">
     {{if not .ViewState.driver_journey.Noreturn}}

web/public/css/main.css

@@ -6,9 +6,13 @@
       "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
+    --color-red-100: oklch(0.936 0.032 17.717);
     --color-red-500: oklch(0.637 0.237 25.331);
     --color-red-600: oklch(0.577 0.245 27.325);
+    --color-red-800: oklch(0.444 0.177 26.899);
     --color-red-900: oklch(0.396 0.141 25.723);
+    --color-yellow-100: oklch(0.973 0.071 103.193);
+    --color-yellow-800: oklch(0.476 0.114 61.907);
     --color-green-100: oklch(0.962 0.044 156.743);
     --color-green-600: oklch(0.627 0.194 149.214);
     --color-green-800: oklch(0.448 0.119 151.328);
@@ -472,6 +476,9 @@
   .mx-auto {
     margin-inline: auto;
   }
+  .-my-1 {
+    margin-block: calc(var(--spacing) * -1);
+  }
   .-my-1\.5 {
     margin-block: calc(var(--spacing) * -1.5);
   }
@@ -520,6 +527,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);
   }
@@ -550,6 +560,9 @@
   .mb-4 {
     margin-bottom: calc(var(--spacing) * 4);
   }
+  .mb-6 {
+    margin-bottom: calc(var(--spacing) * 6);
+  }
   .mb-10 {
     margin-bottom: calc(var(--spacing) * 10);
   }
@@ -728,9 +741,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%);
   }
@@ -1744,6 +1763,9 @@
   .bg-indigo-600 {
     background-color: var(--color-indigo-600);
   }
+  .bg-red-100 {
+    background-color: var(--color-red-100);
+  }
   .bg-red-500 {
     background-color: var(--color-red-500);
   }
@@ -1756,6 +1778,9 @@
   .bg-white {
     background-color: var(--color-white);
   }
+  .bg-yellow-100 {
+    background-color: var(--color-yellow-100);
+  }
   .-bg-conic {
     --tw-gradient-position: in oklab;
     background-image: conic-gradient(var(--tw-gradient-stops));
@@ -1967,6 +1992,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);
   }
@@ -2003,6 +2031,9 @@
   .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);
   }
@@ -2302,9 +2333,15 @@
   .text-red-600 {
     color: var(--color-red-600);
   }
+  .text-red-800 {
+    color: var(--color-red-800);
+  }
   .text-white {
     color: var(--color-white);
   }
+  .text-yellow-800 {
+    color: var(--color-yellow-800);
+  }
   .capitalize {
     text-transform: capitalize;
   }