From 27ce05a91a0fc8c0cc1006c5a5ddc21077438cf9 Mon Sep 17 00:00:00 2001
From: Arnaud Delcasse <arnaud.delcasse@mobicoop.org>
Date: Thu, 25 Sep 2025 13:25:33 +0200
Subject: [PATCH] Configurable fields in solidarity driver profile + wallet
 details display + change SMS

---
 sms/solidarity_transport/driver_accept.tmpl   |   2 +-
 .../_partials/beneficiary-wallet.html         | 109 ++++++++++++++++--
 .../_partials/driver_wallet.html              |  73 +++++++++++-
 .../_partials/journey_preview.html            |   2 +-
 .../solidarity_transport/booking_display.html |   2 +-
 .../solidarity_transport/driver_create.html   |  53 ++++++---
 .../solidarity_transport/driver_display.html  |  61 ++++++++--
 .../solidarity_transport/driver_journey.html  |   5 +-
 .../solidarity_transport/driver_update.html   |  53 ++++++---
 web/public/css/main.css                       |  62 ++++++++++
 10 files changed, 353 insertions(+), 69 deletions(-)

diff --git a/sms/solidarity_transport/driver_accept.tmpl b/sms/solidarity_transport/driver_accept.tmpl
index d435dff..8f6480d 100644
--- a/sms/solidarity_transport/driver_accept.tmpl
+++ b/sms/solidarity_transport/driver_accept.tmpl
@@ -1 +1 @@
-{{ define "sms_template" }}[{{ .name }}] {{ .driver_first_name }} {{ .driver_last_name }} vient d'accepter votre trajet vers {{.address}} le {{.date}}.{{ end }}
+{{ define "sms_template" }}[{{ .name }}] {{ .driver_first_name }} {{ .driver_last_name }} vient d'accepter votre trajet vers {{.address}} le {{.date}}. Le conducteur vous contactera pour organiser le trajet.{{ end }}
diff --git a/web/layouts/beneficiaries/_partials/beneficiary-wallet.html b/web/layouts/beneficiaries/_partials/beneficiary-wallet.html
index 1ed85c8..af7718e 100644
--- a/web/layouts/beneficiaries/_partials/beneficiary-wallet.html
+++ b/web/layouts/beneficiaries/_partials/beneficiary-wallet.html
@@ -1,11 +1,11 @@
 {{define "beneficiary_wallet"}}
-<div class="px-4 py-6 sm:px-6 text-center"
+<div class="py-6"
   x-data="{
     walletdialog: false
   }">
-  <div class="px-4 py-5 sm:px-6">
-    <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" 
+  <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>
@@ -15,7 +15,7 @@
                                 
     <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 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-lg 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>
@@ -25,15 +25,33 @@
               </div>
             </div>
           <form method="POST" action="/app/wallets/{{.ViewState.beneficiary.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 class="space-y-4">
+                <div>
+                  <label for="amount" class="block text-sm font-medium text-gray-700">Montant</label>
+                  <input type="number" step="0.01" id="amount" name="amount" value="0"
+                         class="mt-1 w-full shadow-sm focus:ring-co-blue focus:border-co-blue px-3 py-2 sm:text-sm border-gray-300 rounded-2xl">
+                </div>
+
+                <div>
+                  <label for="payment_method" class="block text-sm font-medium text-gray-700">Moyen de paiement</label>
+                  <select id="payment_method" name="payment_method"
+                          class="mt-1 w-full shadow-sm focus:ring-co-blue focus:border-co-blue px-3 py-2 sm:text-sm border-gray-300 rounded-2xl">
+                    <option value="Paiement en espèce (MMS)">Paiement en espèce (MMS)</option>
+                    <option value="Virement bancaire">Virement bancaire</option>
+                    <option value="Autre">Autre</option>
+                  </select>
+                </div>
+
+                <div>
+                  <label for="description" class="block text-sm font-medium text-gray-700">Description</label>
+                  <textarea id="description" name="description" rows="3" placeholder="Description de l'opération..."
+                            class="mt-1 w-full shadow-sm focus:ring-co-blue focus:border-co-blue px-3 py-2 sm:text-sm border-gray-300 rounded-2xl"></textarea>
+                </div>
               </div>
-              <div class="mt-5 sm:mt-6">
+
+              <div class="mt-6 flex flex-col space-y-3">
                 <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>
+                <button @click="walletdialog=false" type="button" class="inline-flex w-full justify-center 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>
@@ -42,5 +60,72 @@
     </div>
   </div>
 
+  <!-- Wallet Operations History -->
+  {{if .ViewState.beneficiary.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.beneficiary.Data.wallet}}{{ printf "%.2f" .ViewState.beneficiary.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.beneficiary.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}}
diff --git a/web/layouts/solidarity_transport/_partials/driver_wallet.html b/web/layouts/solidarity_transport/_partials/driver_wallet.html
index 5b7251f..5f44dcf 100644
--- a/web/layouts/solidarity_transport/_partials/driver_wallet.html
+++ b/web/layouts/solidarity_transport/_partials/driver_wallet.html
@@ -1,10 +1,10 @@
 {{define "driver_wallet"}}
-<div class="px-4 py-6 sm:px-6 text-center"
+<div class="py-6"
   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>
+  <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
@@ -42,5 +42,72 @@
     </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}}
\ No newline at end of file
diff --git a/web/layouts/solidarity_transport/_partials/journey_preview.html b/web/layouts/solidarity_transport/_partials/journey_preview.html
index 69d0833..fae5e3b 100644
--- a/web/layouts/solidarity_transport/_partials/journey_preview.html
+++ b/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}}{{ printf "%.2f" .passenger.Data.wallet }}{{else}}0{{end}} EUR</dd>
+                                <dd class="mt-1 text-sm text-gray-900">{{ printf "%.2f" .passenger_wallet_balance }} EUR</dd>
                             </div>
                         </dl>
                     </div>
diff --git a/web/layouts/solidarity_transport/booking_display.html b/web/layouts/solidarity_transport/booking_display.html
index 5541154..cb64024 100644
--- a/web/layouts/solidarity_transport/booking_display.html
+++ b/web/layouts/solidarity_transport/booking_display.html
@@ -120,7 +120,7 @@
 </div>
 </div>
 <div class="max-w-7xl mx-auto py-8 px-4 sm:px-6 md:px-8">
-  {{template "journey_preview" (dict "driver_journey" .ViewState.booking.Journey "driver" .ViewState.driver "passenger" .ViewState.passenger "beneficiaries" .ViewState.beneficiaries)}}
+  {{template "journey_preview" (dict "driver_journey" .ViewState.booking.Journey "driver" .ViewState.driver "passenger" .ViewState.passenger "beneficiaries" .ViewState.beneficiaries "passenger_wallet_balance" .ViewState.passenger_wallet_balance)}}
 </div>
 
 {{ end }}
diff --git a/web/layouts/solidarity_transport/driver_create.html b/web/layouts/solidarity_transport/driver_create.html
index 82c4288..0422c63 100644
--- a/web/layouts/solidarity_transport/driver_create.html
+++ b/web/layouts/solidarity_transport/driver_create.html
@@ -116,31 +116,46 @@
                 <div class="mt-5 space-y-6 md:mt-0 md:col-span-2">
                     <div class="grid grid-cols-6 gap-6">
 
+                        {{range .ViewState.profile_optional_fields}}
                         <div class="col-span-6 sm:col-span-3">
-                            <label for="gender" class="block text-sm font-medium text-gray-700">Genre</label>
+                            <label for="{{.name}}" class="block text-sm font-medium text-gray-700">{{.label}}</label>
+                            {{if eq .type "select"}}
                             <div class="sm:mt-0 sm:col-span-2">
-                                <select id="gender" name="gender" autocomplete="gender" x-model="gender"
+                                <select id="{{.name}}" name="{{.name}}"
+                                    {{if eq .name "gender"}}x-model="gender"{{else}}x-model="other_properties.{{.name}}"{{end}}
                                     class="p-2 max-w-lg mt-1 block focus:ring-co-blue focus:border-co-blue w-full shadow-sm sm:max-w-xs sm:text-sm border-gray-300 rounded-2xl">
-                                    <option value="0">Inconnu</option>
-                                    <option value="1">Masculin</option>
-                                    <option value="2">Féminin</option>
-                                    <option value="9">Sans objet</option>
+                                    {{range .options}}
+                                    <option value="{{.value}}">{{.label}}</option>
+                                    {{end}}
                                 </select>
                             </div>
+                            {{else if eq .type "textarea"}}
+                            <textarea id="{{.name}}" name="{{.name}}" rows="3" x-model="other_properties.{{.name}}"
+                                class="mt-1 focus:ring-co-blue focus:border-co-blue block w-full shadow-sm sm:text-sm border-gray-300 rounded-2xl"></textarea>
+                            {{else if eq .type "multicheckbox"}}
+                            <div class="mt-1 space-y-2">
+				{{$name := .name}}
+                                {{range .options}}
+                                <label class="flex items-center">
+                                    <input type="checkbox" name="{{$name}}[]" value="{{.value}}"
+				    x-model="other_properties.{{$name}}___{{.value}}"
+                                           class="h-4 w-4 text-co-blue focus:ring-co-blue border-co-blue rounded">
+                                    <span class="ml-2 text-sm text-gray-700">{{.label}}</span>
+                                </label>
+                                {{end}}
+                            </div>
+                            {{else if eq .type "date"}}
+                            <input type="date" id="{{.name}}" name="{{.name}}" x-model="other_properties.{{.name}}"
+                                class="mt-1 focus:ring-co-blue focus:border-co-blue block w-full shadow-sm sm:text-sm border-gray-300 rounded-2xl">
+                            {{else if eq .type "number"}}
+                            <input type="number" id="{{.name}}" name="{{.name}}" x-model="other_properties.{{.name}}"
+                                class="mt-1 focus:ring-co-blue focus:border-co-blue block w-full shadow-sm sm:text-sm border-gray-300 rounded-2xl">
+                            {{else}}
+                            <input type="text" id="{{.name}}" name="{{.name}}" x-model="other_properties.{{.name}}"
+                                class="mt-1 focus:ring-co-blue focus:border-co-blue block w-full shadow-sm sm:text-sm border-gray-300 rounded-2xl">
+                            {{end}}
                         </div>
-                        
-                        <div class="col-span-6 sm:col-span-3">
-                            <label for="last_subscription_date" class="block text-sm font-medium text-gray-700">Date de dernière adhésion</label>
-                            <input type="date" name="last_subscription_date" id="last_subscription_date" autocomplete="last_subscription_date" placeholder="JJ/MM/AAAA"
-                                class="mt-1 focus:ring-co-blue focus:border-co-blue block w-full shadow-sm sm:text-sm rounded-2xl"
-                                x-model="other_properties.last_subscription_date">
-                        </div>
-                        <div class="col-span-6 sm:col-span-3">
-                            <label for="comment" class="block text-sm font-medium text-gray-700">Commentaire</label>
-                            <textarea name="comment" id="comment"
-                                class="mt-1 focus:ring-co-blue focus:border-co-blue block w-full shadow-sm sm:text-sm rounded-2xl"
-                                x-model="other_properties.comment"></textarea>
-                        </div>
+                        {{end}}
 
                         <!-- <div class="col-span-3 sm:col-span-3">
                             <label class="block text-sm font-medium text-gray-700"> Photo </label>
diff --git a/web/layouts/solidarity_transport/driver_display.html b/web/layouts/solidarity_transport/driver_display.html
index 45992d2..0a45959 100644
--- a/web/layouts/solidarity_transport/driver_display.html
+++ b/web/layouts/solidarity_transport/driver_display.html
@@ -89,17 +89,58 @@
                                 <dd class="mt-1 text-sm text-gray-900">{{.ViewState.driver.Data.file_number}}</dd>
                             </div>
                             {{end}}
-                            {{if and .ViewState.driver.Data.other_properties .ViewState.driver.Data.other_properties.last_subscription_date}}
-                            <div class="sm:col-span-1">
-                                <dt class="text-sm font-medium text-gray-500">Dernière adhésion</dt>
-                                <dd class="mt-1 text-sm text-gray-900">{{ .ViewState.driver.Data.other_properties.last_subscription_date}}</dd>
-                            </div>
+                            {{range .ViewState.profile_optional_fields}}
+                            {{$fieldName := .name}}
+                            {{$fieldLabel := .label}}
+                            {{$fieldType := .type}}
+                            {{if eq .type "multicheckbox"}}
+                                {{$hasValues := false}}
+                                {{range .options}}
+                                    {{$optionKey := printf "%s___%s" $fieldName .value}}
+                                    {{if index $.ViewState.driver.Data.other_properties $optionKey}}{{$hasValues = true}}{{end}}
+                                {{end}}
+                                {{if $hasValues}}
+                                <div class="sm:col-span-2">
+                                    <dt class="text-sm font-medium text-gray-500">{{$fieldLabel}}</dt>
+                                    <dd class="mt-1 text-sm text-gray-900">
+                                        <div class="flex flex-wrap gap-2">
+                                            {{range .options}}
+                                            {{$optionKey := printf "%s___%s" $fieldName .value}}
+                                            {{if index $.ViewState.driver.Data.other_properties $optionKey}}
+                                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-200 text-gray-800">
+                                                {{.label}}
+                                            </span>
+                                            {{end}}
+                                            {{end}}
+                                        </div>
+                                    </dd>
+                                </div>
+                                {{end}}
+                            {{else if eq .type "select"}}
+                                {{$fieldValue := index $.ViewState.driver.Data.other_properties $fieldName}}
+                                {{if and $fieldValue (ne $fieldValue "0") (ne $fieldValue "")}}
+                                <div class="sm:col-span-1">
+                                    <dt class="text-sm font-medium text-gray-500">{{$fieldLabel}}</dt>
+                                    <dd class="mt-1 text-sm text-gray-900">
+                                        {{if eq $fieldName "gender"}}
+                                            {{genderISO5218 $fieldValue}}
+                                        {{else}}
+                                            {{range .options}}
+                                                {{if eq .value $fieldValue}}{{.label}}{{end}}
+                                            {{end}}
+                                        {{end}}
+                                    </dd>
+                                </div>
+                                {{end}}
+                            {{else}}
+                                {{$fieldValue := index $.ViewState.driver.Data.other_properties $fieldName}}
+                                {{if $fieldValue}}
+                                <div class="sm:col-span-1">
+                                    <dt class="text-sm font-medium text-gray-500">{{$fieldLabel}}</dt>
+                                    <dd class="mt-1 text-sm text-gray-900">{{$fieldValue}}</dd>
+                                </div>
+                                {{end}}
                             {{end}}
-                            {{if and .ViewState.driver.Data.other_properties .ViewState.driver.Data.other_properties.comment}}
-                            <div class="sm:col-span-1">
-                                <dt class="text-sm font-medium text-gray-500">Commentaire</dt>
-                                <dd class="mt-1 text-sm text-gray-900">{{ .ViewState.driver.Data.other_properties.comment}}</dd>
-                            </div>
                             {{end}}
                         </dl>
                     </div>
diff --git a/web/layouts/solidarity_transport/driver_journey.html b/web/layouts/solidarity_transport/driver_journey.html
index c3a5678..510f699 100644
--- a/web/layouts/solidarity_transport/driver_journey.html
+++ b/web/layouts/solidarity_transport/driver_journey.html
@@ -26,12 +26,11 @@
       </div>
 </div>
 <div class="max-w-7xl mx-auto py-8 px-4 sm:px-6 md:px-8">
-  {{template "journey_preview" (dict "driver_journey" .ViewState.driver_journey "driver" .ViewState.driver "passenger" .ViewState.passenger "beneficiaries" .ViewState.beneficiaries)}}
+  {{template "journey_preview" (dict "driver_journey" .ViewState.driver_journey "driver" .ViewState.driver "passenger" .ViewState.passenger "beneficiaries" .ViewState.beneficiaries "passenger_wallet_balance" .ViewState.passenger_wallet_balance)}}
           {{if ne .ViewState.passenger.ID ""}}
 <div class="max-w-7xl m-auto px-4 sm:px-6 md:px-8 flex flex-col justify-items-center">
   {{if .ViewState.passenger}}
-  {{$wallet := (or .ViewState.passenger.Data.wallet 0.0)}}
-  {{if lt $wallet .ViewState.driver_journey.Price.Amount}}
+  {{if lt .ViewState.passenger_wallet_balance .ViewState.driver_journey.Price.Amount}}
     <p class="text-xl text-co-red text-center p-4">Le solde du compte mobilité est insuffisant.</p>
     {{end}}
   <form method="POST">
diff --git a/web/layouts/solidarity_transport/driver_update.html b/web/layouts/solidarity_transport/driver_update.html
index e4b54fa..642a2e8 100644
--- a/web/layouts/solidarity_transport/driver_update.html
+++ b/web/layouts/solidarity_transport/driver_update.html
@@ -121,31 +121,46 @@
                 <div class="mt-5 space-y-6 md:mt-0 md:col-span-2">
                     <div class="grid grid-cols-6 gap-6">
 
+                        {{range .ViewState.profile_optional_fields}}
                         <div class="col-span-6 sm:col-span-3">
-                            <label for="gender" class="block text-sm font-medium text-gray-700">Genre</label>
+                            <label for="{{.name}}" class="block text-sm font-medium text-gray-700">{{.label}}</label>
+                            {{if eq .type "select"}}
                             <div class="sm:mt-0 sm:col-span-2">
-                                <select id="gender" name="gender" autocomplete="gender" x-model="gender"
+                                <select id="{{.name}}" name="{{.name}}"
+                                    {{if eq .name "gender"}}x-model="gender"{{else}}x-model="other_properties.{{.name}}"{{end}}
                                     class="p-2 max-w-lg mt-1 block focus:ring-co-blue focus:border-co-blue w-full shadow-sm sm:max-w-xs sm:text-sm border-gray-300 rounded-2xl">
-                                    <option value="0">Inconnu</option>
-                                    <option value="1">Masculin</option>
-                                    <option value="2">Féminin</option>
-                                    <option value="9">Sans objet</option>
+                                    {{range .options}}
+                                    <option value="{{.value}}">{{.label}}</option>
+                                    {{end}}
                                 </select>
                             </div>
+                            {{else if eq .type "textarea"}}
+                            <textarea id="{{.name}}" name="{{.name}}" rows="3" x-model="other_properties.{{.name}}"
+                                class="mt-1 focus:ring-co-blue focus:border-co-blue block w-full shadow-sm sm:text-sm border-gray-300 rounded-2xl"></textarea>
+                            {{else if eq .type "multicheckbox"}}
+                            <div class="mt-1 space-y-2">
+				{{$name := .name}}
+                                {{range .options}}
+                                <label class="flex items-center">
+                                    <input type="checkbox" name="{{$name}}[]" value="{{.value}}"
+				    x-model="other_properties.{{$name}}___{{.value}}"
+                                           class="h-4 w-4 text-co-blue focus:ring-co-blue border-co-blue rounded">
+                                    <span class="ml-2 text-sm text-gray-700">{{.label}}</span>
+                                </label>
+                                {{end}}
+                            </div>
+                            {{else if eq .type "date"}}
+                            <input type="date" id="{{.name}}" name="{{.name}}" x-model="other_properties.{{.name}}"
+                                class="mt-1 focus:ring-co-blue focus:border-co-blue block w-full shadow-sm sm:text-sm border-gray-300 rounded-2xl">
+                            {{else if eq .type "number"}}
+                            <input type="number" id="{{.name}}" name="{{.name}}" x-model="other_properties.{{.name}}"
+                                class="mt-1 focus:ring-co-blue focus:border-co-blue block w-full shadow-sm sm:text-sm border-gray-300 rounded-2xl">
+                            {{else}}
+                            <input type="text" id="{{.name}}" name="{{.name}}" x-model="other_properties.{{.name}}"
+                                class="mt-1 focus:ring-co-blue focus:border-co-blue block w-full shadow-sm sm:text-sm border-gray-300 rounded-2xl">
+                            {{end}}
                         </div>
-                        
-                        <div class="col-span-6 sm:col-span-3">
-                            <label for="last_subscription_date" class="block text-sm font-medium text-gray-700">Date de dernière adhésion</label>
-                            <input type="date" name="last_subscription_date" id="last_subscription_date" autocomplete="last_subscription_date" placeholder="JJ/MM/AAAA"
-                                class="mt-1 focus:ring-co-blue focus:border-co-blue block w-full shadow-sm sm:text-sm rounded-2xl"
-                                x-model="other_properties.last_subscription_date">
-                        </div>
-                        <div class="col-span-6 sm:col-span-3">
-                            <label for="comment" class="block text-sm font-medium text-gray-700">Commentaire</label>
-                            <textarea name="comment" id="comment"
-                                class="mt-1 focus:ring-co-blue focus:border-co-blue block w-full shadow-sm sm:text-sm rounded-2xl"
-                                x-model="other_properties.comment"></textarea>
-                        </div>
+                        {{end}}
 
                         <!-- <div class="col-span-3 sm:col-span-3">
                             <label class="block text-sm font-medium text-gray-700"> Photo </label>
diff --git a/web/public/css/main.css b/web/public/css/main.css
index c339a31..4c1b062 100644
--- a/web/public/css/main.css
+++ b/web/public/css/main.css
@@ -7,7 +7,9 @@
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
     --color-red-500: oklch(0.637 0.237 25.331);
+    --color-red-600: oklch(0.577 0.245 27.325);
     --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);
     --color-blue-500: oklch(0.623 0.214 259.815);
     --color-blue-700: oklch(0.488 0.243 264.376);
@@ -55,6 +57,7 @@
     --font-weight-extrabold: 800;
     --tracking-tight: -0.025em;
     --tracking-wide: 0.025em;
+    --tracking-wider: 0.05em;
     --radius-md: 0.375rem;
     --radius-lg: 0.5rem;
     --radius-xl: 0.75rem;
@@ -469,6 +472,9 @@
   .mx-auto {
     margin-inline: auto;
   }
+  .-my-1 {
+    margin-block: calc(var(--spacing) * -1);
+  }
   .-my-1\.5 {
     margin-block: calc(var(--spacing) * -1.5);
   }
@@ -517,6 +523,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);
   }
@@ -731,9 +740,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%);
   }
@@ -1243,6 +1258,9 @@
   .justify-items-stretch {
     justify-items: stretch;
   }
+  .gap-2 {
+    gap: calc(var(--spacing) * 2);
+  }
   .gap-4 {
     gap: calc(var(--spacing) * 4);
   }
@@ -1269,6 +1287,20 @@
       margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .space-y-2 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
+  .space-y-3 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .space-y-4 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -1935,6 +1967,9 @@
   .px-2 {
     padding-inline: calc(var(--spacing) * 2);
   }
+  .px-2\.5 {
+    padding-inline: calc(var(--spacing) * 2.5);
+  }
   .px-3 {
     padding-inline: calc(var(--spacing) * 3);
   }
@@ -1944,6 +1979,12 @@
   .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);
+  }
   .py-1 {
     padding-block: calc(var(--spacing) * 1);
   }
@@ -1977,6 +2018,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);
   }
@@ -2161,6 +2205,10 @@
     --tw-tracking: var(--tracking-wide);
     letter-spacing: var(--tracking-wide);
   }
+  .tracking-wider {
+    --tw-tracking: var(--tracking-wider);
+    letter-spacing: var(--tracking-wider);
+  }
   .text-balance {
     text-wrap: balance;
   }
@@ -2258,15 +2306,24 @@
   .text-gray-700 {
     color: var(--color-gray-700);
   }
+  .text-gray-800 {
+    color: var(--color-gray-800);
+  }
   .text-gray-900 {
     color: var(--color-gray-900);
   }
+  .text-green-600 {
+    color: var(--color-green-600);
+  }
   .text-green-800 {
     color: var(--color-green-800);
   }
   .text-indigo-600 {
     color: var(--color-indigo-600);
   }
+  .text-red-600 {
+    color: var(--color-red-600);
+  }
   .text-white {
     color: var(--color-white);
   }
@@ -3193,6 +3250,11 @@
       width: 100%;
     }
   }
+  .sm\:max-w-lg {
+    @media (width >= 40rem) {
+      max-width: var(--container-lg);
+    }
+  }
   .sm\:max-w-md {
     @media (width >= 40rem) {
       max-width: var(--container-md);