(feat) company amélioration design

app_transport_front/src/views/TripView.vue

@@ -78,7 +78,9 @@
               </tr>
             </thead>
             <tbody>
-              <tr v-for="trip in filteredTrips" :key="trip.id">
+              <tr v-for="trip in filteredTrips" :key="trip.id" 
+                  class="cursor-pointer hover:bg-gradient-to-r hover:from-blue-200 hover:to-indigo-200 hover:shadow-xl hover:border-l-4 hover:border-blue-100 transition-all duration-300 transform hover:scale-[1.02] hover:z-10 relative hover:ring-2 hover:ring-blue-300 hover:ring-opacity-50" 
+                  @click="viewTrip(trip)">
                 <td>{{ getStationName(trip.departStationId) }}</td>
                 <td>{{ getStationName(trip.arriveStationId) }}</td>
                 <td>{{ formatDateTime(trip.departAt) }}</td>
@@ -91,15 +93,16 @@
                     {{ getStatusLabel(trip) }}
                   </span>
                 </td>
-                <td class="actions-cell">
-                  <button class="view-button" @click="viewTrip(trip)">
-                    <i class="fas fa-eye"></i>
-                  </button>
+                <td class="actions-cell" @click.stop>
                   <button class="edit-button" @click="editTrip(trip)">
                     <i class="fas fa-edit"></i>
                   </button>
-                  <button class="delete-button" @click="confirmDelete(trip)">
-                    <i class="fas fa-trash"></i>
+                  <button 
+                    class="delete-button" 
+                    :disabled="!canDeleteTrip(trip)"
+                    :class="{ 'disabled': !canDeleteTrip(trip) }"
+                    @click="confirmDelete(trip)">
+                    <i class="fas fa-trash hover:text-red-600"></i>
                   </button>
                 </td>
               </tr>
@@ -290,12 +293,12 @@
                     <div class="info-value text-green-700 font-bold text-lg">{{ (viewingTrip.pricePerSeat || 0) * ((viewingTrip.vehicule?.number_places || 0) - (viewingTrip.availableSeats || 0)) }} FCFA</div>
                   </div>
                     <!-- Ajout des sommes -->
-                  <div class="info-item cursor-pointer hover:bg-blue-50 transition-colors duration-200" @click="openReservationsModal">
+                  <div class="info-item cursor-pointer bg-gradient-to-r from-blue-100 to-blue-200 hover:bg-blue-50 hover:border-blue-300 border-2 border-transparent transition-all duration-200 rounded-lg shadow-sm hover:shadow-md transform hover:scale-[1.02]" @click="openReservationsModal">
                     <div class="info-label flex items-center">
-                      <span>Totale des places réservées</span>
-                      <i class="fas fa-eye ml-2 text-blue-500"></i>
+                      <span class="text-blue-700 font-semibold">Totale des places réservées</span>
+                      <i class="fas fa-eye ml-2 text-blue-500 animate-pulse"></i>
                     </div>
-                    <div class="info-value text-blue-600">{{ ((viewingTrip.vehicule?.number_places || 0) - (viewingTrip.availableSeats || 0)) }} </div>
+                    <div class="info-value text-blue-600 font-bold text-lg">{{ ((viewingTrip.vehicule?.number_places || 0) - (viewingTrip.availableSeats || 0)) }} </div>
                   </div>
                   <div class="info-item">
                     <div class="info-label">Totale des paiements en ligne</div>
@@ -699,6 +702,18 @@ const getStatusClass = (trip: any): string => {
   }
 }
 
+// Fonction pour vérifier si un voyage peut être supprimé
+const canDeleteTrip = (trip: any): boolean => {
+  // Un voyage peut être supprimé seulement si son statut est "À venir"
+  // et que les inscriptions ne sont pas fermées
+  if (trip.registrationClosed) {
+    return false
+  }
+  
+  const status = trip.status || 'upcoming'
+  return status === 'upcoming'
+}
+
 // Fonctions pour gérer le formulaire
 const closeForm = () => {
   showAddForm.value = false
@@ -835,6 +850,12 @@ const viewTrip = (trip: Trip) => {
 }
 
 const confirmDelete = (trip: Trip) => {
+  // Vérifier si le voyage peut être supprimé
+  if (!canDeleteTrip(trip)) {
+    error('Impossible de supprimer un voyage qui n\'est pas "À venir"')
+    return
+  }
+  
   tripToDelete.value = trip
   showDeleteConfirm.value = true
 }
@@ -1238,6 +1259,16 @@ watch(() => formData.value.vehicleId, (newVehicleId) => {
   border-radius: 5px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   overflow-x: auto;
+  transition: all 0.3s ease;
+}
+
+.trip-table-container:hover {
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* Internet Explorer 10+ */
+}
+
+.trip-table-container:hover::-webkit-scrollbar {
+  display: none; /* WebKit */
 }
 
 .trip-table {
@@ -1319,10 +1350,28 @@ watch(() => formData.value.vehicleId, (newVehicleId) => {
   color: #e74a3b;
 }
 
-.view-button:hover, .edit-button:hover, .delete-button:hover {
+.view-button:hover, .edit-button:hover {
   background-color: #f8f9fc;
 }
 
+.delete-button:hover {
+  background-color: white;
+  color: #dc3545;
+  box-shadow: 0 2px 4px rgba(220, 53, 69, 0.2);
+  transform: scale(1.05);
+  transition: all 0.2s ease;
+}
+
+.delete-button.disabled {
+  color: #d1d3e2;
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.delete-button.disabled:hover {
+  background-color: transparent;
+}
+
 .loading-state {
   display: flex;
   flex-direction: column;