From 5d1a44469780b5a3a11725ae7ff668a3a0bc9aae Mon Sep 17 00:00:00 2001
From: Maxime <maxime.parisi@coopgo.fr>
Date: Fri, 22 Nov 2024 17:35:58 +0100
Subject: [PATCH] add templates for journey, beneficiaries and
 solidarity_service

---
 config.yaml                                   |  24 +-
 default                                       |   1 +
 .../_partials/beneficiary-events.html         |  26 +-
 web/layouts/beneficiaries/create.html         |   2 +-
 web/layouts/beneficiaries/display.html        |   7 +
 web/layouts/beneficiaries/list.html           |   1 +
 .../journeys/_partials/journeys-all.html      |  42 +--
 .../journeys-solidarity-service.html          | 208 +++++++++++++
 web/layouts/journeys/search.html              |  12 +-
 .../beneficiary-solidarity.html               |  36 +++
 web/layouts/solidarity_service/main.html      | 290 ++++++++++++++++++
 11 files changed, 596 insertions(+), 53 deletions(-)
 create mode 120000 default
 create mode 100644 web/layouts/journeys/_partials/journeys-solidarity-service.html
 create mode 100644 web/layouts/solidarity_service/beneficiary-solidarity.html
 create mode 100644 web/layouts/solidarity_service/main.html

diff --git a/config.yaml b/config.yaml
index bae16d7..af8d537 100644
--- a/config.yaml
+++ b/config.yaml
@@ -28,7 +28,9 @@ views:
         - web/layouts/beneficiaries/_partials/beneficiary-events.html
         - web/layouts/beneficiaries/_partials/beneficiary-files.html
         - web/layouts/beneficiaries/_partials/beneficiary-organizations.html
+        - web/layouts/solidarity_service/beneficiary-solidarity.html
         - web/layouts/beneficiaries/display.html
+
     update:
       files:
         - web/layouts/_partials/address_autocomplete.html
@@ -84,18 +86,19 @@ views:
     fleet_update:
       files:
         - web/layouts/_partials/address_autocomplete.html
+        - web/layouts/agenda/_partials/address.html
         - web/layouts/vehicles_management/_partials/vehicle-type-select.html
         - web/layouts/vehicles_management/fleet-update.html
     booking_display: 
       files: 
         - web/layouts/vehicles_management/booking-display.html
+    delete_booking: 
+      files: 
+        - web/layouts/vehicles_management/delete-booking.html
   agenda: 
     list: 
       files: 
         - web/layouts/agenda/home.html
-    history: 
-      files: 
-        - web/layouts/agenda/history.html
     display_event: 
       files: 
         - web/layouts/agenda/_partials/subscribers-table.html
@@ -129,7 +132,8 @@ views:
         - web/layouts/journeys/_partials/journeys-all.html
         - web/layouts/journeys/_partials/journeys-others.html
         - web/layouts/journeys/_partials/journeys-carpool.html
-        - web/layouts/journeys/_partials/journeys-public-transit.html
+        #- web/layouts/journeys/_partials/journeys-public-transit.html
+        - web/layouts/journeys/_partials/journeys-solidarity-service.html
         - web/layouts/journeys/search.html
     list:
       files:
@@ -184,10 +188,6 @@ views:
     vehicles_list:
       files:
         - web/layouts/administration/vehicles_stats.html
-    bookings_list:
-      files:
-        - web/layouts/administration/_partials/bookings_list.html
-        - web/layouts/administration/bookings_stats.html
     settings: 
       files:
         - web/layouts/administration/_partials/groups_admins.html
@@ -215,7 +215,11 @@ views:
       ko: 
         files:
           - web/layouts/auth/onboarding-ko.html
-
+  solidarity_service: 
+    list:
+      files:
+        - web/layouts/_partials/address_autocomplete.html
+        - web/layouts/solidarity_service/main.html
 icons:
   svg:
     coopgo:parcoursmob/monogram: <svg xmlns="http://www.w3.org/2000/svg" class="%s" viewBox="0 0 61.85 33.58"><defs><style>.cls-1{fill:#ff1300;}.cls-2{fill:#243887;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><path class="cls-1" d="M44.978,0C31.337,0,28.1,6.824,27.875,15.505H39.536V9.434a.727.727,0,0,1,1.123-.607L52.6,16.453,40.659,24.08a.729.729,0,0,1-1.123-.608v-6.1H27.865c.075,8.427,1.527,16.213,17.113,16.213,14.867,0,16.872-7.764,16.872-17.032C61.85,7.91,59.894,0,44.978,0Z"/><polygon class="cls-1" points="41.412 21.385 49.133 16.453 41.412 11.521 41.412 21.385"/><path class="cls-2" d="M14.175,11.4l-.019,4.151H26.311a14.781,14.781,0,0,0,.819-5.141C27.046,3.767,22.545,0,14.764,0H1.052A1.147,1.147,0,0,0,0,1.24V31.87a1.149,1.149,0,0,0,1.094,1.239H11.525a1.145,1.145,0,0,0,1.051-1.239V10.41h.758C13.88,10.41,14.175,10.756,14.175,11.4Z"/><path class="cls-2" d="M14.148,17.3l-.015,3.514H18.97A7.521,7.521,0,0,0,25.458,17.3Z"/></g></g></svg>
@@ -293,4 +297,4 @@ emails:
       subject: PARCOURSMOB - Un bénéficiaire a été retiré d'un dispositif
       files:
         - emails/layout.html
-        - emails/onboarding/delete-subscriber.html
+        - emails/onboarding/delete-subscriber.html
\ No newline at end of file
diff --git a/default b/default
new file mode 120000
index 0000000..331d858
--- /dev/null
+++ b/default
@@ -0,0 +1 @@
+default
\ No newline at end of file
diff --git a/web/layouts/beneficiaries/_partials/beneficiary-events.html b/web/layouts/beneficiaries/_partials/beneficiary-events.html
index 0b1562a..d869e87 100644
--- a/web/layouts/beneficiaries/_partials/beneficiary-events.html
+++ b/web/layouts/beneficiaries/_partials/beneficiary-events.html
@@ -8,7 +8,7 @@
     <div class="border-t border-gray-200">
         {{ $eventCount := len .ViewState.event }}
         <ul role="list" class="divide-y divide-gray-200 flex-1">
-            {{if eq $eventCount 0}}
+            {{if eq $eventCount 0}} 
                 <li class="py-2 px-4">
                     <p class="py-5 mt-1 max-w-2xl text-sm text-gray-500">Aucun dispositif n'est prévu pour le moment.</p>
                 </li>
@@ -53,11 +53,33 @@
                                 <p class="mt-1 text-sm text-gray-900">{{.Type}} - {{.Name}}</p>
                             </div>
                         </a>
-                    </li>
+                    </li> 
                 {{end}}
                 {{end}}
             {{end}}
         </ul>
     </div>
+      <div class="max-w-3xl mx-auto px-4 sm:px-6 md:flex md:items-center md:justify-between md:space-x-5 lg:max-w-7xl lg:px-8">
+        <div class="flex items-center space-x-5">
+            <div class="flex-shrink-0">
+                <div class="relative">
+                    <span class="absolute inset-0 shadow-inner rounded-full" aria-hidden="true"></span>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="max-w-3xl mx-auto px-4 sm:px-6 md:flex md:items-center md:justify-between md:space-x-5 lg:max-w-7xl lg:px-8">
+        <div class="flex items-center space-x-5">
+            <div class="flex-shrink-0">
+                <div class="relative">
+                    <!-- <img class="h-16 w-16 rounded-co" src="/app/beneficiaries/solidarity_service{{.ViewState.Passenger.Id}}/picture" alt=""> -->
+                    <span class="absolute inset-0 shadow-inner rounded-full" aria-hidden="true"></span>
+                </div>
+            </div>
+        </div>
+        <div
+            class="mt-6 flex flex-col-reverse justify-stretch space-y-4 space-y-reverse sm:flex-row-reverse sm:justify-end sm:space-x-reverse sm:space-y-0 sm:space-x-3 md:mt-0 md:flex-row md:space-x-3">
+        </div>
+    </div>
 </div>
 {{end}}
\ No newline at end of file
diff --git a/web/layouts/beneficiaries/create.html b/web/layouts/beneficiaries/create.html
index a725af1..201c755 100644
--- a/web/layouts/beneficiaries/create.html
+++ b/web/layouts/beneficiaries/create.html
@@ -167,7 +167,7 @@
 
                 </div>
             </div>
-        </div>
+        </div> 
 
         <div class="flex justify-end">
             <p x-show="! isFormValid" class="px-4 py-2 text-sm text-co-red">Certains champs de sont pas valides.</p>
diff --git a/web/layouts/beneficiaries/display.html b/web/layouts/beneficiaries/display.html
index 3be8ddf..ba3ab8c 100644
--- a/web/layouts/beneficiaries/display.html
+++ b/web/layouts/beneficiaries/display.html
@@ -137,6 +137,11 @@
                                             class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
                                             :class="tab == 'organizations' ? 'border-co-blue text-co-blue' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'">
                                             Gestionnaires </a>
+                                        
+                                        <a href="#" @click="tab = 'solidarityService'"
+                                        class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
+                                        :class="tab == 'solidarityService' ? 'border-co-blue text-co-blue' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'">
+                                        Transport Solidaire </a>
                                     </nav>
                                 </div>
                             </div>
@@ -145,6 +150,8 @@
                         <div x-show="tab == 'documents'">{{template "beneficiary_files" .}}</div>
                         <div x-show="tab == 'notes'">{{template "beneficiary_notes" .}}</div>
                         <div x-show="tab == 'organizations'">{{template "beneficiary_organizations" .}}</div>
+                        <div x-show="tab == 'solidarityService'">{{template "beneficiary_solidarity" .}}</div>
+
                     </div>
                 </div>
             </section>
diff --git a/web/layouts/beneficiaries/list.html b/web/layouts/beneficiaries/list.html
index da8bbad..f04d466 100644
--- a/web/layouts/beneficiaries/list.html
+++ b/web/layouts/beneficiaries/list.html
@@ -96,6 +96,7 @@
                                                 class="inline-flex rounded-full bg-green-100 px-2 text-xs font-semibold leading-5 text-green-800"
                                                 x-text="tag"></span>
                                         </template>
+
                                     </td>
                                     <td
                                         class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
diff --git a/web/layouts/journeys/_partials/journeys-all.html b/web/layouts/journeys/_partials/journeys-all.html
index c340373..fb59d1e 100644
--- a/web/layouts/journeys/_partials/journeys-all.html
+++ b/web/layouts/journeys/_partials/journeys-all.html
@@ -51,46 +51,10 @@
     </div>
     
 
-    {{end}}
-
-    {{ if gt (len .ViewState.journeys.Journeys) 0}}
-    <div class="px-4 pt-4 flex text-sm text-grey-900 font-bold border-t-2">
-        <div class="flex-1">
-            {{.IconSet.Icon "tabler-icons:bus" "h-6 w-6 inline-flex mr-4"}}
-            {{(timeFrom (index .ViewState.journeys.Journeys 0).Departure).Format "15:04"}} - {{(timeFrom (index .ViewState.journeys.Journeys 0).Arrival).Format "15:04"}}
-            ({{(index .ViewState.journeys.Journeys 0).Duration.Minutes | printf "%.0f"}} Minutes)
-        </div>
-        <div></div>
-    </div>
-    <div class="p-4 pb-8 flex">
-        {{$firstwalk := true}}
-        {{range (index .ViewState.journeys.Journeys 0).Sections}}
-        {{if eq .Type "street_network"}}
-        <span class="ml-2 mt-1 h-5 w-5 rounded-co bg-gray-200 flex items-center justify-center ring-8 ring-white text-white">
-            {{$.IconSet.Icon "tabler-icons:walk" "h-4 w-4 stroke-gray-800"}}
-        </span>
-        {{if $firstwalk}}
-        {{$firstwalk = false}}
-        {{$.IconSet.Icon "hero:outline/chevron-right" "h-3 w-3 stroke-gray-800 m-2"}}
-        {{end}}
-        {{end}}
-        {{if eq .Type "public_transport"}}
-        <span class="ml-2 rounded-xl px-2 py-1 bg-co-blue flex items-center justify-center ring-8 ring-white text-sm text-white whitespace-nowrap">
-            {{if eq .Display.Network "Antibes - Envibus"}}Envibus{{else}}{{.Display.Network}}{{end}} Ligne {{.Display.Label}}
-        </span>
-        {{$.IconSet.Icon "hero:outline/chevron-right" "h-3 w-3 stroke-gray-800 m-2"}}
-        {{end}}
-        {{end}}
-        <div class="flex-1"></div>
-        <button class="text-sm px-2 py-1 bg-gray-200 text-co-blue rounded-xl" @click="tab = 'public-transit'">Voir le détail</button>
-    </div>
-    <div class="p-4 text-center">
-        <button class="rounded-xl text-md px-4 py-1 bg-gray-200 text-co-blue" @click="tab = 'public-transit'">{{ len .ViewState.journeys.Journeys}} solutions en transports en commun : les voir toutes</button>
-    </div>
-
     {{end}}
 
     <!--VEHICLES-->
+
     <div class="px-4 pt-16 flex text-sm text-grey-900  border-t-2">
         <div class="flex-1">
             {{.IconSet.Icon "tabler-icons:car" "h-6 w-6 inline-flex mr-4"}}
@@ -102,4 +66,6 @@
         <a href="/app/vehicles/"><button class="text-md px-4 py-1 bg-gray-200 text-co-blue rounded-xl">Réserver un véhicule</button></a>
     </div>
 </div>
-{{end}}
\ No newline at end of file
+{{end}}
+
+
diff --git a/web/layouts/journeys/_partials/journeys-solidarity-service.html b/web/layouts/journeys/_partials/journeys-solidarity-service.html
new file mode 100644
index 0000000..f33006e
--- /dev/null
+++ b/web/layouts/journeys/_partials/journeys-solidarity-service.html
@@ -0,0 +1,208 @@
+{{define "journeys_solidarity_service"}}
+
+<form class="space-y-6" method="POST" name="create_booking">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8" >
+        <div class="bg-white shadow sm:rounded-2xl">
+            <h2 class="text-lg font-medium text-gray-900 p-4 sm:px-6">
+                Bénéficiaires
+            </h2>
+            <div class="border-t border-gray-200 px-4 py-5 sm:px-6">
+                <div class="mt-8 flex flex-col">
+                    <div class="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
+                        <div class="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
+                            <div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
+                                <table class="min-w-full divide-y divide-gray-300">
+                                    <tbody class="divide-y divide-gray-200 bg-white">
+                                        {{range $beneficiary := .ViewState.solidarity_results.Beneficiaries}}
+                                        <tr>
+                                            <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
+                                                <div class="flex items-center">
+                                                    <button type="button" @click="
+                                                    document.getElementById('passenger_id').value = '{{$beneficiary.Id}}'
+                                                    document.getElementById('passenger_name').textContent = '{{$beneficiary.FirstName}}{{$beneficiary.LastName}}'" class="ml-4">                                                              
+                                                        <div class="font-medium text-gray-900">
+                                                            <span>
+                                                                {{$beneficiary.FirstName}}
+                                                            </span>
+                                                            <span>
+                                                                {{$beneficiary.LastName}}
+                                                            </span>
+                                                        </div>
+                                                    </button>
+                                                </div>
+                                            </td>
+                                            <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                                            
+                                            </td>
+                                            <td
+                                                class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
+                                            
+                                            </td>
+                                        </tr>
+                                        {{end}}
+                                        <!-- More people... -->
+                                    </tbody>
+                                </table>
+                                <div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
+                                    <div class="flex-1 flex justify-between sm:hidden">
+                                        <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
+                                        @click="paginate(current)"> Previous </a>
+                                        <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
+                                        @click="paginate(current+2)"> Next </a>
+                                    </div>
+                                    <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
+                                    <div>
+                                        <p class="text-sm text-gray-700">
+                                            Résultats
+                                            <span class="font-medium" x-text="Math.min((current * 10)+1, state.count)"></span>
+                                            à
+                                            <span class="font-medium" x-text="Math.min((current * 10)+10, state.count)"></span>
+                                            sur
+                                            <span class="font-medium" x-text="state.count"></span>
+                                        </p>
+                                    </div>
+                                    <div>
+                                        <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
+                                        <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
+                                            @click="paginate(current)">
+                                            <span class="sr-only">Previous</span>
+                                            <!-- Heroicon name: solid/chevron-left -->
+                                            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                                            <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
+                                            </svg>
+                                        </a>
+                                        <template x-for="i in nb_pages">
+                                            <a href="#" @click="paginate(i)"
+                                            class="relative inline-flex items-center px-4 py-2 border text-sm font-medium"
+                                            :class="i == current+1 ? 'z-10 bg-indigo-50 border-co-blue text-co-blue' : 'bg-white border-gray-300 text-gray-500 hover:bg-gray-50'"
+                                            x-text="i"></a>
+                                        </template>
+                                        <!-- Current: "z-10 bg-indigo-50 border-indigo-500 text-indigo-600", Default: "bg-white border-gray-300 text-gray-500 hover:bg-gray-50" -->
+                                        <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
+                                            @click="paginate(current+2)">
+                                            <span class="sr-only">Next</span>
+                                            <!-- Heroicon name: solid/chevron-right -->
+                                            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                                            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
+                                            </svg>
+                                        </a>
+                                        </nav>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <p id="passenger_name"></p>
+        <input type="hidden" id="passenger_id" name="passenger_id" >             
+    </div>
+</div>                
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8" x-data="{
+    }">
+    <h2 class="text-lg font-medium text-gray-900 p-4 sm:px-6">
+        Sélectionner un Conducteurs
+    </h2>
+    <div class="border-t border-gray-200 px-4 py-5 sm:px-6">
+
+        <div class="mt-8 flex flex-col">
+            <div class="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
+                <div class="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
+                    <div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
+                        <table class="min-w-full divide-y divide-gray-300">
+                            <tbody class="divide-y divide-gray-200 bg-white">
+                                {{ if gt (len .ViewState.solidarity_results.Drivers) 0}}
+                                {{range $driver := .ViewState.solidarity_results.Drivers}}
+                                <tr>
+                                    <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
+                                        <div class="flex items-center">
+                                            <button type="button" @click="
+                                            document.getElementById('driver_id').value = '{{$driver.User.Id}}'
+                                            document.getElementById('driver_name').textContent = '{{$driver.User.FirstName}}{{$driver.User.LastName}}'" class="ml-4">                                                              
+                                                <div class="font-medium text-gray-900">
+                                                    <span>
+                                                        {{$driver.User.FirstName}}
+                                                    </span>
+                                                    <span>
+                                                        {{$driver.User.LastName}}
+                                                    </span>
+                                                </div>
+                                            </button>
+                                        </div>
+                                    </td>
+                                    <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                                    
+                                    </td>
+                                    <td
+                                        class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
+                                    
+                                    </td>
+                                </tr>
+                                {{end}}
+                                {{end}}
+                                <!-- More people... -->
+                            </tbody>
+                        </table>
+                        <div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
+                            <div class="flex-1 flex justify-between sm:hidden">
+                            <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
+                            @click="paginate(current)"> Previous </a>
+                            <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
+                            @click="paginate(current+2)"> Next </a>
+                            </div>
+                            <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
+                                <div>
+                                    <p class="text-sm text-gray-700">
+                                    Résultats
+                                    <span class="font-medium" x-text="Math.min((current * 10)+1, state.count)"></span>
+                                    à
+                                    <span class="font-medium" x-text="Math.min((current * 10)+10, state.count)"></span>
+                                    sur
+                                    <span class="font-medium" x-text="state.count"></span>
+                                    </p>
+                                </div>
+                                <div>
+                                    <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
+                                    <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
+                                        @click="paginate(current)">
+                                        <span class="sr-only">Previous</span>
+                                        <!-- Heroicon name: solid/chevron-left -->
+                                        <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                                        <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
+                                        </svg>
+                                    </a>
+                                    <template x-for="i in nb_pages">
+                                        <a href="#" @click="paginate(i)"
+                                        class="relative inline-flex items-center px-4 py-2 border text-sm font-medium"
+                                        :class="i == current+1 ? 'z-10 bg-indigo-50 border-co-blue text-co-blue' : 'bg-white border-gray-300 text-gray-500 hover:bg-gray-50'"
+                                        x-text="i"></a>
+                                    </template>
+                                    <!-- Current: "z-10 bg-indigo-50 border-indigo-500 text-indigo-600", Default: "bg-white border-gray-300 text-gray-500 hover:bg-gray-50" -->
+                                    <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
+                                        @click="paginate(current+2)">
+                                        <span class="sr-only">Next</span>
+                                        <!-- Heroicon name: solid/chevron-right -->
+                                        <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                                        <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
+                                        </svg>
+                                    </a>
+                                    </nav>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <p id="driver_name"></p>
+        <input type="hidden" id="driver_id" name="driver_id" >
+        <input type="submit"
+        class="inline-flex items-center justify-center rounded-2xl border border-transparent bg-co-blue px-4 py-2 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-ci-blue focus:ring-offset-2 sm:w-auto" 
+        value="Confirmer">
+        </div>
+</div>
+
+</form>
+{{end}}
+
diff --git a/web/layouts/journeys/search.html b/web/layouts/journeys/search.html
index ab091d9..d050701 100644
--- a/web/layouts/journeys/search.html
+++ b/web/layouts/journeys/search.html
@@ -81,6 +81,8 @@
 
                                 <option value="public-transit">Transports</option>
 
+                                <option value="solidarity-service">Transports Solidaire</option>
+
                                 <!-- <option value="active-modes">Modes actifs</option> -->
 
                                 <option value="others">Autres</option>
@@ -104,6 +106,11 @@
                                         class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
                                         :class="tab == 'public-transit' ? 'border-co-blue text-co-blue' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'">
                                         Transports </a>
+                                    
+                                    <a href="#" @click="tab = 'solidarity-service'"
+                                        class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
+                                        :class="tab == 'solidarity-service' ? 'border-co-blue text-co-blue' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'">
+                                        Transports Solidaire </a>
 
                                     <!-- <a href="#" @click="tab = 'active-modes'"
                                         class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
@@ -121,7 +128,7 @@
 
                     <div x-show="tab == 'all'">{{template "journeys_all" .}}</div>
                     <div x-show="tab == 'carpool'">{{template "journeys_carpool" .}}</div>
-                    <div x-show="tab == 'public-transit'">{{template "journeys_public_transit" .}}</div>
+                    <div x-show="tab == 'solidarity-service'">{{template "journeys_solidarity_service" .}}</div>
                     <div x-show="tab == 'others'">{{template "journeys_others" .}}</div>
                 </div>
             </div>
@@ -131,4 +138,5 @@
     </div>
  
 </div>
-{{end}}
\ No newline at end of file
+{{end}}
+
diff --git a/web/layouts/solidarity_service/beneficiary-solidarity.html b/web/layouts/solidarity_service/beneficiary-solidarity.html
new file mode 100644
index 0000000..2a79893
--- /dev/null
+++ b/web/layouts/solidarity_service/beneficiary-solidarity.html
@@ -0,0 +1,36 @@
+{{define "beneficiary_solidarity"}}
+<div class="px-4 py-6 sm:px-6">
+    <h3 class="text-lg">Transport solidaire</h3>
+        {{ $bookingSolidarity := len .ViewState.bookingSolidarity }}
+        {{if eq $bookingSolidarity 0}} 
+        <p class="py-5 mt-1 max-w-2xl text-sm text-gray-500">Aucune course Silvermobi n'est prévue pour le moment.</p>
+        <div>
+            <form method="POST" @submit="submit">
+            <button
+                type="submit"
+                class="inline-flex items-center justify-center rounded-2xl border border-transparent bg-co-blue px-4 py-2 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-ci-blue focus:ring-offset-2 sm:w-auto">
+                Transport Solidaire
+            </button>
+            </form>
+        </div>
+        {{else}}
+            <ul class="divide-y divide-gray-200 flex-1">
+                <li class="py-5 px-4 flex">Conducteur</li>
+                <li>______</li>
+                <li class="py-5 px-4 flex">Passager</li>
+                <li>______</li>
+                <li class="py-5 px-4 flex">Date</li>
+            </ul>
+            {{range .ViewState.bookingSolidarity}}
+            <ul class="divide-y divide-gray-200 flex-1">     
+                <li class="py-5 px-4 flex">{{.Driver.FirstName}} {{.Driver.LastName}}</li>
+                <li>______</li>
+                <li class="py-5 px-4 flex">{{.Passenger.Id}} </li>
+                <li>______</li>
+                <li class="py-5 px-4 flex">{{( .PassengerPickupDate)}}</li>
+                <li>____________</li>   
+            </ul>
+            {{end}}
+        {{end}}
+    </div>
+{{end}}
\ No newline at end of file
diff --git a/web/layouts/solidarity_service/main.html b/web/layouts/solidarity_service/main.html
new file mode 100644
index 0000000..3444e40
--- /dev/null
+++ b/web/layouts/solidarity_service/main.html
@@ -0,0 +1,290 @@
+{{define "content"}}
+<main>
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
+        <h1 class="text-2xl font-semibold text-gray-900">
+            Transport Solidaire
+        </h1>
+    </div>
+    <div>
+        <div class="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
+            <div class="mt-8 max-w-3xl mx-auto grid grid-cols-1 gap-6 lg:max-w-7xl lg:grid-flow-col-dense lg:grid-cols-3">
+                <form class="space-y-6" method="GET" name="driver_journeys" @submit="submit">                
+                    <div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8" x-data="{
+                                state: {{.ViewState.JSONWithLimits 0 10}},
+                                current: 0,
+                                nb_pages() {
+                                    let nbEl = this.state.count 
+                                    return Math.ceil(nbEl/10)
+                                },
+                                async paginate(page) {
+                                    let start = (page-1)*10
+                                    if(start < 0|| start > this.state.count) {
+                                        return
+                                    }
+                                    let resp = await fetch('/api/cache/' + this.state.cache_id + '?limits.min=' + start + '&limits.max=' + (start+10))
+                                    let data = await resp.json()
+                                    this.state.beneficiariessolidarity = data
+                                    this.current=page-1
+                                }
+                            }">
+                        <div class="bg-white shadow sm:rounded-2xl">
+                            <h2 class="text-lg font-medium text-gray-900 p-4 sm:px-6">
+                                Bénéficiaires
+                            </h2>
+                            <div class="border-t border-gray-200 px-4 py-5 sm:px-6">
+                                <div class="mt-8 flex flex-col">
+                                    <div class="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
+                                        <div class="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
+                                            <div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
+                                                <table class="min-w-full divide-y divide-gray-300">
+                                                    <tbody class="divide-y divide-gray-200 bg-white">
+                                                        <template x-for="beneficiary in state.beneficiariessolidarity.passenger">
+                                                            <tr>
+                                                                <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
+                                                                    <div class="flex items-center">
+                                                                        <button type="button" @click="
+                                                                                document.getElementById('passenger_id').value = beneficiary.id;
+                                                                                document.getElementById('passenger_name').textContent = beneficiary.first_name+' '+beneficiary.last_name" class="ml-4">
+                                                                            <div class="font-medium text-gray-900">
+                                                                                <span
+                                                                                    x-text="beneficiary.first_name" >
+                                                                                </span>
+                                                                                <span
+                                                                                    x-text="beneficiary.last_name">
+                                                                                </span>
+                                                                            </div>
+                                                                            <div class="text-gray-500" x-text="beneficiary.email">                                                                
+                                                                            </div>
+                                                                        </button>
+                                                                    </div>
+                                                                </td>
+                                                                <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                                                                    <template x-for="tag in beneficiary.data.tags">
+                                                                        <span
+                                                                            class="inline-flex rounded-full bg-green-100 px-2 text-xs font-semibold leading-5 text-green-800"
+                                                                            x-text="tag">
+                                                                        </span>
+                                                                    </template>
+                                                                </td>
+                                                                <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
+                                                                    <a :href="'/app/beneficiaries/' + beneficiary.id"
+                                                                        class="text-co-blue hover:text-co-blue">Voir<span class="sr-only">, <span
+                                                                                x-text="beneficiary.first_name"></span> <span
+                                                                                x-text="beneficiary.last_name"></span>
+                                                                    </a>
+                                                                </td>
+                                                            </tr>
+                                                        </template>
+                                                        <!-- More people... -->
+                                                    </tbody>
+                                                </table>
+                                                <div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
+                                                    <div class="flex-1 flex justify-between sm:hidden">
+                                                        <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
+                                                        @click="paginate(current)"> Previous </a>
+                                                        <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
+                                                        @click="paginate(current+2)"> Next </a>
+                                                    </div>
+                                                    <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
+                                                    <div>
+                                                        <p class="text-sm text-gray-700">
+                                                            Résultats
+                                                            <span class="font-medium" x-text="Math.min((current * 10)+1, state.count)"></span>
+                                                            à
+                                                            <span class="font-medium" x-text="Math.min((current * 10)+10, state.count)"></span>
+                                                            sur
+                                                            <span class="font-medium" x-text="state.count"></span>
+                                                        </p>
+                                                    </div>
+                                                    <div>
+                                                        <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
+                                                        <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
+                                                            @click="paginate(current)">
+                                                            <span class="sr-only">Previous</span>
+                                                            <!-- Heroicon name: solid/chevron-left -->
+                                                            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                                                            <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
+                                                            </svg>
+                                                        </a>
+                                                        <template x-for="i in nb_pages">
+                                                            <a href="#" @click="paginate(i)"
+                                                            class="relative inline-flex items-center px-4 py-2 border text-sm font-medium"
+                                                            :class="i == current+1 ? 'z-10 bg-indigo-50 border-co-blue text-co-blue' : 'bg-white border-gray-300 text-gray-500 hover:bg-gray-50'"
+                                                            x-text="i"></a>
+                                                        </template>
+                                                        <!-- Current: "z-10 bg-indigo-50 border-indigo-500 text-indigo-600", Default: "bg-white border-gray-300 text-gray-500 hover:bg-gray-50" -->
+                                                        <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
+                                                            @click="paginate(current+2)">
+                                                            <span class="sr-only">Next</span>
+                                                            <!-- Heroicon name: solid/chevron-right -->
+                                                            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                                                            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
+                                                            </svg>
+                                                        </a>
+                                                        </nav>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="border-t border-gray-200 px-4 py-5 sm:px-6">
+                            <div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
+                                <p class="divide-y divide-gray-200 bg-white" id="passenger_name">Sélectionner un Passager</p>
+                            </div>
+                            {{ $departureField := "departure" }}
+                            {{ $departureLabel := "Départ" }}
+                            {{ template "address_autocomplete" dict "FieldName" $departureField "FieldLabel" $departureLabel }}
+                    
+                            {{ $destinationField := "destination" }}
+                            {{ $destinationLabel := "Destination" }}
+                            {{ template "address_autocomplete" dict "FieldName" $destinationField "FieldLabel" $destinationLabel }}
+    
+                            <div class="py-4 grid grid-cols-2">
+                                <div class="lg:col-span-1">
+                                    <label for="date" class="block text-sm font-medium text-gray-700">Le</label>
+                                    <div class="mt-1">
+                                        <input type="datetime-local" id="date" name="date" 
+                                            class="shadow-sm focus:ring-co-blue focus:border-co-blue block w-full sm:text-sm border-gray-300 rounded-l-2xl border-r-1">
+                                    </div>
+                                </div> 
+                            </div>
+                            <input type="hidden" id="passenger_id" name="passenger_id" >
+                            <input type="submit"
+                                    class="inline-flex items-center justify-center rounded-2xl border border-transparent bg-co-blue px-4 py-2 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-ci-blue focus:ring-offset-2 sm:w-auto" 
+                                    value="Chercher un Conducteurs">               
+                        </div>
+                    </div>
+                </div>
+                </form>
+                <div class="bg-white shadow sm:rounded-2xl">
+
+                    <form class="space-y-6" method="POST" name="create_booking">
+                    
+                        <div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8" x-data="{
+                            state: {{.ViewState.JSONWithLimits 0 10}},
+                            current: 0,
+                            nb_pages() {
+                                let nbEl = this.state.count 
+                                return Math.ceil(nbEl/10)
+                            },
+                            async paginate(page) {
+                                let start = (page-1)*10
+                                if(start < 0|| start > this.state.count) {
+                                    return
+                                }
+                                let resp = await fetch('/api/cache/' + this.state.cache_id + '?limits.min=' + start + '&limits.max=' + (start+10))
+                                let data = await resp.json()
+                                this.state.drivers = data
+                                this.current=page-1
+                            }
+                        }">
+                        <h2 class="text-lg font-medium text-gray-900 p-4 sm:px-6">
+                            Sélectionner un Conducteurs
+                        </h2>
+                        <div class="border-t border-gray-200 px-4 py-5 sm:px-6">
+
+                            <div class="mt-8 flex flex-col">
+                                <div class="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
+                                    <div class="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
+                                        <div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
+                                            <table class="min-w-full divide-y divide-gray-300">
+                                                <tbody class="divide-y divide-gray-200 bg-white">
+                                                    <template x-for="driver in state.drivers.driver_journeys">
+                                                        <tr>
+                                                            <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
+                                                                <div class="flex items-center">
+                                                                    <button type="button" @click="
+                                                                    document.getElementById('driver_id').value = driver.user.id
+                                                                    document.getElementById('driver_name').textContent = driver.user.first_name+' '+driver.user.last_name" class="ml-4">                                                              
+                                                                        <div class="font-medium text-gray-900">
+                                                                            <span
+                                                                            x-text="driver.user.first_name">
+                                                                            </span>
+                                                                            <span
+                                                                                x-text="driver.user.last_name">
+                                                                            </span>
+                                                                        </div>
+                                                                    </button>
+                                                                </div>
+                                                            </td>
+                                                            <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                                                            
+                                                            </td>
+                                                            <td
+                                                                class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
+                                                            
+                                                            </td>
+                                                        </tr>
+                                                    </template>
+                        
+                                                    <!-- More people... -->
+                                                </tbody>
+                                            </table>
+                                            <div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
+                                                <div class="flex-1 flex justify-between sm:hidden">
+                                                <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
+                                                @click="paginate(current)"> Previous </a>
+                                                <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
+                                                @click="paginate(current+2)"> Next </a>
+                                                </div>
+                                                <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
+                                                    <div>
+                                                        <p class="text-sm text-gray-700">
+                                                        Résultats
+                                                        <span class="font-medium" x-text="Math.min((current * 10)+1, state.count)"></span>
+                                                        à
+                                                        <span class="font-medium" x-text="Math.min((current * 10)+10, state.count)"></span>
+                                                        sur
+                                                        <span class="font-medium" x-text="state.count"></span>
+                                                        </p>
+                                                    </div>
+                                                    <div>
+                                                        <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
+                                                        <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
+                                                            @click="paginate(current)">
+                                                            <span class="sr-only">Previous</span>
+                                                            <!-- Heroicon name: solid/chevron-left -->
+                                                            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                                                            <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
+                                                            </svg>
+                                                        </a>
+                                                        <template x-for="i in nb_pages">
+                                                            <a href="#" @click="paginate(i)"
+                                                            class="relative inline-flex items-center px-4 py-2 border text-sm font-medium"
+                                                            :class="i == current+1 ? 'z-10 bg-indigo-50 border-co-blue text-co-blue' : 'bg-white border-gray-300 text-gray-500 hover:bg-gray-50'"
+                                                            x-text="i"></a>
+                                                        </template>
+                                                        <!-- Current: "z-10 bg-indigo-50 border-indigo-500 text-indigo-600", Default: "bg-white border-gray-300 text-gray-500 hover:bg-gray-50" -->
+                                                        <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
+                                                            @click="paginate(current+2)">
+                                                            <span class="sr-only">Next</span>
+                                                            <!-- Heroicon name: solid/chevron-right -->
+                                                            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                                                            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
+                                                            </svg>
+                                                        </a>
+                                                        </nav>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <p id="driver_name"></p>
+                            <input type="hidden" id="driver_id" name="driver_id" >
+                            <input type="submit"
+                            class="inline-flex items-center justify-center rounded-2xl border border-transparent bg-co-blue px-4 py-2 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-ci-blue focus:ring-offset-2 sm:w-auto" 
+                            value="Confirmer">
+                            </div>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+</main>
+{{end}}
\ No newline at end of file