From 8d2ca79bc5e1cf55c7246e5a1432a0d5a2af8549 Mon Sep 17 00:00:00 2001
From: Maxime <maxime.parisi@coopgo.fr>
Date: Thu, 20 Feb 2025 11:16:46 +0100
Subject: [PATCH] update UX

---
 web/layouts/beneficiaries/list.html           |  6 +--
 .../_partials/beneficiary-list.html           | 38 ++++++++++++++++---
 .../_partials/booking-list.html               |  9 ++---
 .../_partials/driver-list.html                |  9 ++---
 web/layouts/solidarity_service/main.html      |  4 +-
 5 files changed, 45 insertions(+), 21 deletions(-)

diff --git a/web/layouts/beneficiaries/list.html b/web/layouts/beneficiaries/list.html
index f04d466..74ac772 100644
--- a/web/layouts/beneficiaries/list.html
+++ b/web/layouts/beneficiaries/list.html
@@ -61,10 +61,8 @@
                                 </th>
                                 <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
                                     Labels
-                                </th>
-                                <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6">
-                                    <span class="sr-only">Modifier</span>
-                                </th>
+                                </th>                                
+                               
                             </tr>
                         </thead>
                         <tbody class="divide-y divide-gray-200 bg-white">
diff --git a/web/layouts/solidarity_service/_partials/beneficiary-list.html b/web/layouts/solidarity_service/_partials/beneficiary-list.html
index 4e2c074..98f5366 100644
--- a/web/layouts/solidarity_service/_partials/beneficiary-list.html
+++ b/web/layouts/solidarity_service/_partials/beneficiary-list.html
@@ -1,9 +1,7 @@
 {{define "beneficiary_solidarity_list"}}
 <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">
-            Bénéficiaires Silvermobi
-        </h1>
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8 px-4 py-5 sm:px-6" >
+        <h1 class="text-2xl font-semibold text-gray-900">Bénéficiaires Silvermobi</h1>
     </div>
                 <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="{
@@ -24,12 +22,36 @@
                                     this.current=page-1
                                 }
                             }">
-                            <div class="border-t border-gray-200 px-4 py-5 sm:px-6">
+                            <div class=" 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">
+                                                    <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">
+                                                                Nom
+                                                            </th>
+                                                            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
+                                                                Téléphone
+                                                            </th>
+                                                            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
+                                                                Adresse
+                                                            </th>
+                                                            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
+                                                                Labels
+                                                            </th>
+                                                            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
+                                                                Option
+                                                            </th>
+                                                            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
+                                                                Info
+                                                            </th>
+                                                          
+                                                        </tr>
+                                                    </thead>
                                                     <tbody class="divide-y divide-gray-200 bg-white">
                                                         <template x-for="beneficiary in state.beneficiariessolidarity.passenger">
                                                             <tr>
@@ -57,6 +79,12 @@
                                                                         class="text-co-blue hover:text-co-blue">Demande de trajet<span class="sr-only">
                                                                     </a>
                                                                 </td>
+                                                                <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                                                                    <div class="text-gray-900" x-text="beneficiary.phone_number"></div>
+                                                                </td>
+                                                                <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500"
+                                                                    x-text="beneficiary.data.address ? beneficiary.address.properties.label : ''">
+                                                                </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
diff --git a/web/layouts/solidarity_service/_partials/booking-list.html b/web/layouts/solidarity_service/_partials/booking-list.html
index 83999c1..a2eeced 100644
--- a/web/layouts/solidarity_service/_partials/booking-list.html
+++ b/web/layouts/solidarity_service/_partials/booking-list.html
@@ -1,6 +1,6 @@
 {{define "booking_solidarity_list" }}
 <main>              
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8" x-data="{
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8 px-4 py-5 sm:px-6" x-data="{
         state: {{.ViewState.JSONWithLimits 0 10}},
         current: 0,
         nb_pages() {
@@ -18,10 +18,9 @@
             this.current=page-1
         }            
     }">
-    <h2 class="text-lg font-medium text-gray-900 p-4 sm:px-6">
-        Conducteurs
-    </h2>
-    <div class="border-t border-gray-200 px-4 py-5 sm:px-6">
+    <h1 class="text-2xl font-semibold text-gray-900">Transports
+    </h1>
+    <div class="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">
diff --git a/web/layouts/solidarity_service/_partials/driver-list.html b/web/layouts/solidarity_service/_partials/driver-list.html
index 5f5f768..33b0e9c 100644
--- a/web/layouts/solidarity_service/_partials/driver-list.html
+++ b/web/layouts/solidarity_service/_partials/driver-list.html
@@ -2,7 +2,7 @@
 {{define "driver_solidarity_list" }}
 <main>
                         
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8" x-data="{
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8 px-4 py-5 sm:px-6" x-data="{
             state: {{.ViewState.JSONWithLimits 0 10}},
             current: 0,
             nb_pages() {
@@ -21,10 +21,9 @@
             }
 
         }">
-        <h2 class="text-lg font-medium text-gray-900 p-4 sm:px-6">
-            Conducteurs
-        </h2>
-        <div class="border-t border-gray-200 px-4 py-5 sm:px-6">
+        <h1 class="text-2xl font-semibold text-gray-900">            Conducteurs
+        </h1>
+        <div class="px-4 py-5 sm:px-6">
             <a
              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" 
              href="driver/create">Ajouter un conducteur solidaire</a>
diff --git a/web/layouts/solidarity_service/main.html b/web/layouts/solidarity_service/main.html
index e558c8e..2d21210 100644
--- a/web/layouts/solidarity_service/main.html
+++ b/web/layouts/solidarity_service/main.html
@@ -1,6 +1,6 @@
 {{define "content"}}
 <main>
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8 px-4 py-5 sm:px-6">
         <h1 class="text-2xl font-semibold text-gray-900">
             Transport Solidaire
         </h1>
@@ -11,7 +11,7 @@
             this.tab = event.target.value
         }
     }">
-    <div class="bg-white shadow sm:rounded-lg sm:overflow-hidden">
+    <div class="bg-white shadow sm:rounded-lg sm:overflow-hidden px-4 py-5 sm:px-6">
         <div class="divide-y divide-gray-200">
             <div>
                 <div class="hidden sm:block">