feat : lister les expeditions terminees

frontend/pages/index.vue

@@ -6,7 +6,7 @@
         <card-link label="NOUVELLE EXPÉDITION" link="/shipment" iconName="mdi:truck-fast-outline" />
         <card-link label="PLAN DE SITE" link="/" iconName="mdi:warehouse" />
         <card-link label="RÉCEPTIONS EN ATTENTE" link="/reception/waiting-reception" iconName="mdi:truck-remove-outline" />
-        <card-link label="EXPÉDITIONS EN ATTENTE" link="/" iconName="mdi:truck-cargo-container" />
+        <card-link label="EXPÉDITIONS EN ATTENTE" link="/shipment/waiting-shipment" iconName="mdi:truck-cargo-container" />
         <card-link label="CASES" link="/" iconName="mdi:cube-outline" />
         <card-link label="RÉCEPTIONS FINIES" link="/reception/finish-reception" iconName="mdi:truck-check-outline" />
         <card-link label="EXPÉDITIONS FINIES" link="/shipment/finish-shipment" iconName="mdi:truck-delivery-outline" />

frontend/pages/shipment/waiting-shipment.vue

@@ -0,0 +1,73 @@
+<template>
+    <div class="flex items-center justify-between ">
+        <div class="flex items-center gap-10">
+            <Icon @click="router.push('/')" name="gg:arrow-left-o" style="color: black" size="44"/>
+            <h1 class="text-3xl font-bold uppercase">listes des expéditions en attente</h1>
+        </div>
+    </div>
+
+    <div class="ps-20 ">
+        <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?.label }}</div>
+                <div>{{ shipment.address?.fullAddress }}</div>
+                <div>
+                    <template v-if="formatBovinShipmentLines(shipment).length">
+                        <div
+                            v-for="(line, index) in formatBovinShipmentLines(shipment)"
+                            :key="index"
+                            class="leading-5"
+                        >
+                            {{ line }}
+                        </div>
+                    </template>
+                </div>
+                <div>{{ shipment.carrier?.name }}</div>
+                <div>{{ shipment.licencePlate }}</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+
+import type {ShipmentData} from "~/services/dto/shipment-data";
+import {getShipmentList} from "~/services/shipment";
+
+const shipmentList = ref<ShipmentData[]>()
+const router = useRouter()
+
+const goToShipment = (id: number) => {
+    router.push(`/shipment/${id}`)
+}
+const formatBovinShipmentLines = (shipment: ShipmentData) => {
+    if (!shipment.bovinShipments?.length) {
+        return []
+    }
+    return shipment.bovinShipments.map((entry) => {
+        const label = typeof entry.shipmentType === 'string'
+            ? entry.shipmentType
+            : entry.shipmentType?.label
+        return `${label ?? '—'} : ${entry.nbBovinSend ?? '—'}`
+    })
+}
+
+onMounted(async () => {
+    shipmentList.value = await getShipmentList(false)
+})
+</script>