From 38cedfccdf11a8fc1cf581b7a0ae6f6c561e6891 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Wed, 29 Apr 2026 10:12:54 +0200
Subject: [PATCH] =?UTF-8?q?feat(front)=20:=20tableau=20r=C3=A9cap=20des=20?=
 =?UTF-8?q?bovins=20saisis=20avec=20suppression?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 frontend/pages/entry-exit/entry/[id].vue | 75 +++++++++++++++++++++++-
 1 file changed, 74 insertions(+), 1 deletion(-)

diff --git a/frontend/pages/entry-exit/entry/[id].vue b/frontend/pages/entry-exit/entry/[id].vue
index 58fc83c..499d8f4 100644
--- a/frontend/pages/entry-exit/entry/[id].vue
+++ b/frontend/pages/entry-exit/entry/[id].vue
@@ -73,7 +73,44 @@
             </UiButton>
         </form>
 
-        <div class="text-slate-400 italic mt-6">Tableau récap à venir</div>
+        <UiDataTable
+            v-model:page="recapPage"
+            v-model:per-page="recapPerPage"
+            :columns="recapColumns"
+            :items="savedBovines"
+            :total-items="savedBovines.length"
+            :show-actions="true"
+        >
+            <template #cell-birthDate="{ item }">
+                {{ formatDate(item.birthDate) }}
+            </template>
+            <template #cell-arrivalDate="{ item }">
+                {{ formatDate(item.arrivalDate) }}
+            </template>
+            <template #cell-finalPrice="{ item }">
+                {{ formatPrice(item.finalPrice) }}
+            </template>
+            <template #cell-pricePerKg="{ item }">
+                {{ formatPrice(item.pricePerKg) }}
+            </template>
+            <template #cell-buildingCase.building.label="{ item }">
+                {{ item.effectiveBuilding?.label ?? '—' }}
+            </template>
+            <template #cell-buildingCase.caseNumber="{ item }">
+                {{ item.buildingCase?.caseNumber ?? '—' }}
+            </template>
+            <template #cell-bovineType.label="{ item }">
+                {{ item.bovineType?.label ?? '—' }}
+            </template>
+            <template #actions="{ item }">
+                <Icon
+                    name="mdi:delete-outline"
+                    size="24"
+                    class="cursor-pointer text-red-500 hover:text-red-700"
+                    @click="confirmDeleteBovine(item)"
+                />
+            </template>
+        </UiDataTable>
 
         <div class="flex justify-end mt-8 mb-16">
             <UiButton
@@ -107,6 +144,42 @@ const buildings = ref<BuildingData[]>([])
 const savedBovines = ref<BovineData[]>([])
 
 const isAdding = ref(false)
+const recapPage = ref(1)
+const recapPerPage = ref(50)
+
+const recapColumns = [
+    { key: 'nationalNumber', label: 'N° National', width: '110px' },
+    { key: 'workNumber', label: 'N° Travail', width: '90px' },
+    { key: 'bovineType.label', label: 'Race', width: '110px' },
+    { key: 'sex', label: 'Sexe', width: '60px' },
+    { key: 'birthDate', label: 'Né le', width: '90px' },
+    { key: 'receivedWeight', label: 'Poids', width: '70px' },
+    { key: 'arrivalDate', label: 'Entrée le', width: '90px' },
+    { key: 'pricePerKg', label: 'Prix/kg', width: '80px' },
+    { key: 'finalPrice', label: 'Prix total', width: '90px' },
+    { key: 'buildingCase.building.label', label: 'Bâtiment', width: '1fr' },
+    { key: 'buildingCase.caseNumber', label: 'Case', width: '60px' }
+]
+
+const formatDate = (date: string | null | undefined) => {
+    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' })
+}
+
+const formatPrice = (price: number | null | undefined) => {
+    if (price === null || price === undefined) return '—'
+    return `${price.toLocaleString('fr-FR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} €`
+}
+
+const confirmDeleteBovine = async (bovine: BovineData) => {
+    const confirmed = window.confirm(`Supprimer le bovin ${bovine.nationalNumber} ?`)
+    if (!confirmed) return
+
+    await api.delete(`bovines/${bovine.id}`)
+    await loadSavedBovines()
+}
 
 interface FormState {
     nationalNumber: string