Просмотр исходного кода

(feat) ajout du prix du trajet chez les employées

Brin AMONKONAN 1 год назад
Родитель
Сommit
dc4e9fc609
1 измененных файлов с 108 добавлено и 61 удалено
  1. 108 61
      app_transport_front/src/views/EmployeeDashboard.vue

+ 108 - 61
app_transport_front/src/views/EmployeeDashboard.vue

@@ -144,30 +144,38 @@
               <i class="fas fa-calendar-times text-gray-400 text-4xl mb-4"></i>
               <p class="text-gray-500">Aucun trajet assigné pour aujourd'hui</p>
             </div>
-            <div v-else class="space-y-4">
-              <div
-                v-for="trip in todayTrips"
-                :key="trip.id"
-                :class="[
-                  'border rounded-lg p-4 transition-all duration-200',
-                  trip.registrationClosed 
-                    ? 'border-gray-300 bg-gray-50 opacity-60 cursor-pointer' 
-                    : 'border-gray-200 hover:shadow-md cursor-pointer'
-                ]"
-                @click="selectTrip(trip)"
-              >
-                <div class="flex items-center justify-between">
-                  <div class="flex-1">
-                    <div class="flex items-center space-x-4">
-                      <div class="flex-shrink-0">
-                        <div 
-                          :class="[
-                            'w-3 h-3 rounded-full',
-                            trip.registrationClosed ? 'bg-gray-400' : 'bg-green-500'
-                          ]"
-                        ></div>
-                      </div>
-                      <div class="flex-1 min-w-0">
+            <div v-else>
+              <!-- En-têtes du tableau -->
+              <div class="grid grid-cols-5 gap-4 text-sm font-medium text-gray-500 border-b pb-2 mb-4">
+                <div>Départ → Arrivée</div>
+                <div>Dates</div>
+                <div>Véhicule</div>
+                <div>Passagers</div>
+                <div>Prix</div>
+              </div>
+              <!-- Lignes du tableau -->
+              <div class="space-y-4">
+                <div
+                  v-for="trip in todayTrips"
+                  :key="trip.id"
+                  :class="[
+                    'border rounded-lg p-4 transition-all duration-200 cursor-pointer',
+                    trip.registrationClosed 
+                      ? 'border-gray-300 bg-gray-50 opacity-60' 
+                      : 'border-gray-200 hover:shadow-md'
+                  ]"
+                  @click="selectTrip(trip)"
+                >
+                  <div class="grid grid-cols-5 gap-4 items-center">
+                    <!-- Départ → Arrivée -->
+                    <div class="flex items-center space-x-2">
+                      <div 
+                        :class="[
+                          'w-3 h-3 rounded-full flex-shrink-0',
+                          trip.registrationClosed ? 'bg-gray-400' : 'bg-green-500'
+                        ]"
+                      ></div>
+                      <div class="min-w-0">
                         <p 
                           :class="[
                             'text-sm font-medium truncate',
@@ -175,46 +183,85 @@
                           ]"
                         >
                           {{ trip.departure }} → {{ trip.arrival }}
-                          <span v-if="trip.registrationClosed" class="ml-2 text-xs font-normal text-red-500">
-                            (Enregistrement fermé)
-                          </span>
-                        </p>
-                        <p 
-                          :class="[
-                            'text-sm',
-                            trip.registrationClosed ? 'text-gray-400' : 'text-gray-500'
-                          ]"
-                        >
-                          {{ formatDateTime(trip.departureDateTime) }} - {{ formatDateTime(trip.arrivalDateTime) }}
-                        </p>
-                        <p v-if="trip.vehicule" 
-                          :class="[
-                            'text-xs mt-1',
-                            trip.registrationClosed ? 'text-gray-400' : 'text-gray-400'
-                          ]"
-                        >
-                          {{ trip.vehicule.type }} - {{ trip.vehicule.immatriculation }}
                         </p>
+                        <span v-if="trip.registrationClosed" class="text-xs text-red-500">
+                          (Fermé)
+                        </span>
                       </div>
                     </div>
-                  </div>
-                  <div class="flex items-center space-x-4">
-                    <span 
-                      :class="[
-                        'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium',
-                        trip.registrationClosed 
-                          ? 'bg-gray-200 text-gray-600' 
-                          : 'bg-blue-100 text-blue-800'
-                      ]"
-                    >
-                      {{ trip.passengers }}/{{ trip.vehicule?.number_places || trip.capacity || 'N/A' }} passagers
-                    </span>
-                    <i 
-                      :class="[
-                        'fas fa-chevron-right',
-                        trip.registrationClosed ? 'text-gray-300' : 'text-gray-400'
-                      ]"
-                    ></i>
+                    
+                    <!-- Dates -->
+                    <div>
+                      <p 
+                        :class="[
+                          'text-sm',
+                          trip.registrationClosed ? 'text-gray-400' : 'text-gray-600'
+                        ]"
+                      >
+                        {{ formatDateTime(trip.departureDateTime) }}
+                      </p>
+                      <p 
+                        :class="[
+                          'text-xs',
+                          trip.registrationClosed ? 'text-gray-400' : 'text-gray-500'
+                        ]"
+                      >
+                        {{ formatDateTime(trip.arrivalDateTime) }}
+                      </p>
+                    </div>
+                    
+                    <!-- Véhicule -->
+                    <div v-if="trip.vehicule">
+                      <p 
+                        :class="[
+                          'text-sm',
+                          trip.registrationClosed ? 'text-gray-400' : 'text-gray-600'
+                        ]"
+                      >
+                        {{ trip.vehicule.type }}
+                      </p>
+                      <p 
+                        :class="[
+                          'text-xs',
+                          trip.registrationClosed ? 'text-gray-400' : 'text-gray-500'
+                        ]"
+                      >
+                        {{ trip.vehicule.immatriculation }}
+                      </p>
+                    </div>
+                    <div v-else class="text-sm text-gray-400">N/A</div>
+                    
+                    <!-- Passagers -->
+                    <div>
+                      <span 
+                        :class="[
+                          'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium',
+                          trip.registrationClosed 
+                            ? 'bg-gray-200 text-gray-600' 
+                            : 'bg-blue-100 text-blue-800'
+                        ]"
+                      >
+                        {{ trip.passengers }}/{{ trip.vehicule?.number_places || trip.capacity || 'N/A' }}
+                      </span>
+                    </div>
+                    
+                    <!-- Prix -->
+                    <div class="flex items-center justify-between">
+                      <span 
+                        :class="[
+                          'text-sm font-medium',
+                          trip.registrationClosed ? 'text-gray-400' : 'text-green-600'
+                        ]"
+                      >
+                        {{ trip.pricePerSeat ? trip.pricePerSeat + ' €' : 'N/A' }}
+                      </span>
+                      <i 
+                        :class="[
+                          'fas fa-chevron-right',
+                          trip.registrationClosed ? 'text-gray-300' : 'text-gray-400'
+                        ]"
+                      ></i>
+                    </div>
                   </div>
                 </div>
               </div>