fix : correction des retours de la V0

frontend/pages/shipment/waiting-shipment.vue

@@ -1,73 +1,85 @@
 <template>
-    <div class="flex items-center justify-between">
-        <div class="flex items-center gap-10">
-            <Icon @click="router.push('/')" name="gg:arrow-left-o" size="44" class="cursor-pointer text-primary-500"/>
-            <h1 class="text-3xl font-bold uppercase text-primary-500">listes des expéditions en attente</h1>
-        </div>
-    </div>
-
-    <div class="px-[86px]">
-        <div class="mt-6 border border-slate-200 mb-16 ">
-            <div class="grid grid-cols-5 gap-4 bg-slate-100 px-4 py-3 text-sm font-semibold uppercase tracking-wide">
-                <div>Client</div>
-                <div>Adresse</div>
-                <div>Type d'expéditions</div>
-                <div>Transporteur</div>
-                <div>Immatriculation</div>
-            </div>
-            <div
-                v-for="shipment in shipmentList"
-                :key="shipment.id"
-                class="grid grid-cols-5 gap-4 px-4 py-3 text-sm hover:bg-slate-50 cursor-pointer border-t border-slate-200"
-                role="button"
-                tabindex="0"
-                @click="goToShipment(shipment.id)"
-                @keydown.enter="goToShipment(shipment.id)"
-            >
-                <div>{{ shipment.customer?.name }}</div>
-                <div>{{ shipment.address?.fullAddress }}</div>
-                <div>
-                    <template v-if="formatShipmentLines(shipment).length">
-                        <div
-                            v-for="(line, index) in formatShipmentLines(shipment)"
-                            :key="index"
-                            class="leading-5"
-                        >
-                            {{ line }}
-                        </div>
-                    </template>
+    <WorkflowWaitingList
+        title="listes des expéditions en attente"
+        :columns="columns"
+        :items="shipmentList ?? []"
+        route-prefix="/shipment"
+        show-actions
+    >
+        <template #cell-shipmentDate="{ item }">
+            {{ formatDate(item.shipmentDate) }}
+        </template>
+        <template #cell-shipmentType="{ item }">
+            <template v-if="formatShipmentLines(item).length">
+                <div
+                    v-for="(line, index) in formatShipmentLines(item)"
+                    :key="index"
+                    class="leading-5"
+                >
+                    {{ line }}
                 </div>
-                <div>{{ shipment.carrier?.name }}</div>
-                <div>{{ shipment.licensePlate }}</div>
-            </div>
-        </div>
-    </div>
+            </template>
+            <template v-else>—</template>
+        </template>
+        <template #actions="{ item }">
+            <Icon
+                name="mdi:delete-outline"
+                size="24"
+                class="cursor-pointer text-red-500 hover:text-red-700"
+                @click="confirmDelete(item)"
+            />
+        </template>
+    </WorkflowWaitingList>
 </template>
 
 <script setup lang="ts">
+import type { ShipmentData } from '~/services/dto/shipment-data'
+import { getShipmentList, deleteShipment } from '~/services/shipment'
 
-import type {ShipmentData} from "~/services/dto/shipment-data";
-import {getShipmentList} from "~/services/shipment";
+const columns = [
+    { key: 'shipmentDate', label: 'Date et heure' },
+    { key: 'customer.name', label: 'Client' },
+    { key: 'address.fullAddress', label: 'Adresse' },
+    { key: 'shipmentType', label: "Type d'expé." },
+    { key: 'carrier.name', label: 'Transporteur' },
+    { key: 'licensePlate', label: 'Immatriculation' }
+]
 
 const shipmentList = ref<ShipmentData[]>()
-const router = useRouter()
 
-const goToShipment = (id: number) => {
-    router.push(`/shipment/${id}`)
+const formatDate = (date: string | null) => {
+    if (!date) return '—'
+    const d = new Date(date.replace(' ', 'T'))
+    if (isNaN(d.getTime())) return date
+    return d.toLocaleDateString('fr-FR', {
+        day: '2-digit',
+        month: '2-digit',
+        year: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit'
+    })
 }
 
 const formatShipmentLines = (shipment: ShipmentData) => {
     if (!shipment.shipmentType && shipment.nbBovinSend == null) {
         return []
     }
-
     const label = typeof shipment.shipmentType === 'string'
         ? shipment.shipmentType
         : shipment.shipmentType?.label
-
     return [`${label ?? '—'} : ${shipment.nbBovinSend ?? '—'}`]
 }
 
+const confirmDelete = async (shipment: ShipmentData) => {
+    const confirmed = window.confirm(
+        `Êtes-vous sûr de vouloir supprimer l'expédition ${shipment.identificationNumber ?? `#${shipment.id}`} ? Toutes les données liées seront supprimées.`
+    )
+    if (!confirmed) return
+
+    await deleteShipment(shipment.id)
+    shipmentList.value = shipmentList.value?.filter(s => s.id !== shipment.id)
+}
+
 onMounted(async () => {
     shipmentList.value = await getShipmentList(false)
 })