From 80d87b7c9bbcbab70eaf8a89856f92ca2db0886e Mon Sep 17 00:00:00 2001
From: sroy <sebastien@yuno.malio.fr>
Date: Thu, 5 Feb 2026 07:19:46 +0000
Subject: [PATCH] =?UTF-8?q?[#268]=20Lister=20les=20r=C3=A9ceptions=20termi?=
 =?UTF-8?q?n=C3=A9es=20(!10)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

| 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: https://gitea.malio.fr/MALIO-DEV/Ferme/pulls/10
Co-authored-by: sroy <sebastien@yuno.malio.fr>
Co-committed-by: sroy <sebastien@yuno.malio.fr>
---
 CHANGELOG.md                                  |  1 +
 frontend/components/card-link.vue             |  4 +-
 frontend/pages/index.vue                      | 18 +++----
 frontend/pages/reception/finish-reception.vue | 53 +++++++++++++++++++
 4 files changed, 65 insertions(+), 11 deletions(-)
 create mode 100644 frontend/pages/reception/finish-reception.vue

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7e0dfd9..e88d430 100644
--- a/CHANGELOG.md
+++ b/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
 
diff --git a/frontend/components/card-link.vue b/frontend/components/card-link.vue
index f711703..b44d4f3 100644
--- a/frontend/components/card-link.vue
+++ b/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>
diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index 9dad9cf..fd54a9a 100644
--- a/frontend/pages/index.vue
+++ b/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>
diff --git a/frontend/pages/reception/finish-reception.vue b/frontend/pages/reception/finish-reception.vue
new file mode 100644
index 0000000..63fbc20
--- /dev/null
+++ b/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>