(feat) voyageur ticket scanner

app_transport_front/src/components/user/TravelTickets.vue

@@ -45,6 +45,9 @@
                   <span :class="getTicketStatusClass(ticket)" class="px-3 py-1 text-xs font-medium rounded-full">
                     {{ getTicketStatusText(ticket) }}
                   </span>
+                  <div v-if="ticket.qrcode?.scannedAt" class="mt-2 text-blue-100 text-xs">
+                    Scanné le {{ formatScannedDate(ticket.qrcode.scannedAt) }} à {{ formatScannedTime(ticket.qrcode.scannedAt) }}
+                  </div>
                 </div>
               </div>
             </div>
@@ -63,7 +66,7 @@
                   </p>
                   <p class="text-sm">
                     <i class="fas fa-clock mr-1"></i>
-                    {{ formatTime(ticket.trajet.departAt.date) }}
+                    {{ formatScannedTime(ticket.trajet.departAt.date) }}
                   </p>
                 </div>
 
@@ -78,7 +81,7 @@
                   </p>
                   <p class="text-sm">
                     <i class="fas fa-clock mr-1"></i>
-                    {{ formatTime(ticket.trajet.arriveAt.date) }}
+                    {{ formatScannedTime(ticket.trajet.arriveAt.date) }}
                   </p>
                 </div>
               </div>
@@ -91,7 +94,7 @@
                 </div>
                 <div>
                   <p class="text-blue-100 text-xs uppercase">Véhicule</p>
-                  <p class="font-medium">{{ ticket.trajet.vehicle?.name }}</p>
+                  <p class="font-medium">{{ ticket.trajet.vehicule?.name }}</p>
                 </div>
                 <div>
                   <p class="text-blue-100 text-xs uppercase">Places</p>
@@ -287,6 +290,11 @@ const isToday = (date: string) => {
 }
 
 const getTicketStatusClass = (ticket: Reservation) => {
+  // Vérifier d'abord si le ticket a été scanné
+  if (ticket.qrcode?.scannedAt) {
+    return 'bg-purple-500 text-white'
+  }
+  
   const now = new Date()
   const departureDate = new Date(ticket.trajet.departAt.date)
   
@@ -300,6 +308,11 @@ const getTicketStatusClass = (ticket: Reservation) => {
 }
 
 const getTicketStatusText = (ticket: Reservation) => {
+  // Vérifier d'abord si le ticket a été scanné
+  if (ticket.qrcode?.scannedAt) {
+    return 'SCANNÉ'
+  }
+  
   const now = new Date()
   const departureDate = new Date(ticket.trajet.departAt.date)
   
@@ -348,6 +361,22 @@ const formatTime = (time: string) => {
   })
 }
 
+const formatScannedDate = (isoDate: string) => {
+  return new Date(isoDate).toLocaleDateString('fr-FR', {
+    weekday: 'short',
+    day: '2-digit',
+    month: 'short',
+    year: 'numeric'
+  })
+}
+
+const formatScannedTime = (isoDate: string) => {
+  return new Date(isoDate).toLocaleTimeString('fr-FR', {
+    hour: '2-digit',
+    minute: '2-digit'
+  })
+}
+
 const downloadTicket = async (ticket: Reservation) => {
   try {
     // Créer un canvas temporaire pour le ticket complet