[#268] Lister les réceptions terminées (!10)

| Numéro du ticket | Titre du ticket |
|------------------|-----------------|
|       #268           |        Lister les réceptions terminées         |

## Description de la PR

## Modification du .env

## Check list

- [x] Pas de régression
- [ ] TU/TI/TF rédigée
- [x] TU/TI/TF OK
- [x] CHANGELOG modifié

Reviewed-on: #10
Co-authored-by: sroy <sebastien@yuno.malio.fr>
Co-committed-by: sroy <sebastien@yuno.malio.fr>

CHANGELOG.md

@@ -28,6 +28,7 @@ Ajouter dans le fichier .env du frontend
 * Ajout de composant UI
 * Finalisation de la partie réception de marchandise
 * [#267] Lister les réceptions en attente
+* [#268] Lister les réceptions terminées
 
 ### Changed
 

frontend/components/card-link.vue

@@ -5,7 +5,7 @@
         <div class="w-[324px] h-[228px] border border-black rounded-md p-6 flex flex-col justify-between">
             <div class="flex justify-between">
                 <div class="rounded-full w-[80px] h-[80px] bg-neutral-400 flex justify-center items-center">
-                    <Icon :name="nomIcone" style="color: black" size="44" />
+                    <Icon :name="iconName" style="color: black" size="44" />
                 </div>
                 <div>
                     <Icon name="mdi:plus" style="color: black" size="44"  />
@@ -23,7 +23,7 @@
 <script setup lang="ts">
 const props = defineProps<{
     link: string
-    nomIcone: string
+    iconName: string
     label: string
 }>()
 </script>

frontend/pages/index.vue

@@ -2,15 +2,15 @@
 </script>
 <template>
     <div class="grid grid-cols-3 gap-x-20 gap-y-10 ">
-        <card-link label="NOUVELLE RÉCEPTION" link="/reception" nomIcone="mdi:truck-outline" />
-        <card-link label="NOUVELLE EXPÉDITION" link="/" nomIcone="mdi:truck-fast-outline" />
-        <card-link label="PLAN DE SITE" link="/" nomIcone="mdi:warehouse" />
-        <card-link label="RÉCEPTIONS EN ATTENTE" link="/reception/waiting-reception" nomIcone="mdi:truck-remove-outline" />
-        <card-link label="EXPÉDITIONS EN ATTENTE" link="/" nomIcone="mdi:truck-cargo-container" />
-        <card-link label="CASES" link="/" nomIcone="mdi:cube-outline" />
-        <card-link label="RÉCEPTIONS FINIES" link="/reception/finish-reception" nomIcone="mdi:truck-check-outline" />
-        <card-link label="EXPÉDITIONS FINIES" link="/" nomIcone="mdi:truck-delivery-outline" />
-        <card-link label="PASSEPORT DU BOVIN" link="/" nomIcone="mdi:cow" />
+        <card-link label="NOUVELLE RÉCEPTION" link="/reception" iconName="mdi:truck-outline" />
+        <card-link label="NOUVELLE EXPÉDITION" link="/" 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="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="/" iconName="mdi:truck-delivery-outline" />
+        <card-link label="PASSEPORT DU BOVIN" link="/" iconName="mdi:cow" />
 
     </div>
 </template>

frontend/pages/reception/finish-reception.vue

@@ -0,0 +1,53 @@
+<template>
+    <div class="flex items-center justify-start 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 réceptions finie</h1>
+    </div>
+
+    <div class="ps-20 " >
+        <div class="mt-6 border border-slate-200 mb-16 ">
+            <div class="grid grid-cols-6 gap-4 bg-slate-100 px-4 py-3 text-sm font-semibold uppercase tracking-wide">
+                <div>Numéro</div>
+                <div>Date</div>
+                <div>Fournisseur</div>
+                <div>Adresse</div>
+                <div>Type réception</div>
+                <div>Poids</div>
+            </div>
+            <div
+                v-for="reception in receptionList"
+                :key="reception.id"
+                class="grid grid-cols-6 gap-4 px-4 py-3 text-sm hover:bg-slate-50 cursor-pointer border-t border-slate-200"
+                role="button"
+                tabindex="0"
+            >
+                <div>{{ reception.identificationNumber}}</div>
+                <div>{{ reception.receptionDate}}</div>
+                <div>{{ reception.supplier?.name }}</div>
+                <div>{{ reception.address?.fullAddress }}</div>
+                <div>{{ reception.receptionType?.label }}</div>
+                <div>{{ formatWeighing(reception, 'gross') }} | {{ formatWeighing(reception, 'tare') }}</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type {ReceptionData} from "~/services/dto/reception-data";
+import {getReceptionList} from "~/services/reception";
+
+const receptionList = ref<ReceptionData[]>()
+const router = useRouter()
+
+const formatWeighing = (reception: ReceptionData, type: 'gross' | 'tare') => {
+    const entry = reception.weights?.find((weight) => weight.type === type)
+    if (!entry || entry.weight == null || entry.dsd == null) {
+        return '—'
+    }
+    return `${entry.weight} kg`
+}
+
+onMounted(async () => {
+    receptionList.value = await getReceptionList(true)
+})
+</script>