From 2e72f93f295bae69aacf31f824a4a6cbe50b669d Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Fri, 24 Apr 2026 10:57:25 +0200
Subject: [PATCH] feat : harmonisation des pages infrastructure avec le pattern
 UiDataTable
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Page case : mêmes colonnes, filtres et alertes âge que la page inventaire
- Page building : header aligné sur le pattern case.vue (wrapper px-86, arrow en absolute)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 frontend/pages/infrastructure/building.vue |  11 +-
 frontend/pages/infrastructure/case.vue     | 111 ++++++++++++++++-----
 2 files changed, 93 insertions(+), 29 deletions(-)

diff --git a/frontend/pages/infrastructure/building.vue b/frontend/pages/infrastructure/building.vue
index 16651c5..351bdaf 100644
--- a/frontend/pages/infrastructure/building.vue
+++ b/frontend/pages/infrastructure/building.vue
@@ -1,19 +1,18 @@
 <template>
-    <div class="min-h-screen">
-        <!-- En-tête de page avec retour et titre -->
-        <div class="flex items-center justify-between mb-8">
-            <div class="flex items-center gap-10">
+    <div class="px-[86px]">
+        <div class="flex items-center justify-between relative">
+            <div class="flex flex-row absolute -left-[60px]">
                 <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">bâtiments</h1>
             </div>
+            <h1 class="text-3xl font-bold uppercase text-primary-500">bâtiments</h1>
         </div>
 
-        <div class="px-[86px] space-y-6">
+        <div class="mt-6 space-y-6">
             <!-- Liste des bâtiments + rendu du plan de chaque bâtiment -->
             <div
                 v-for="entry in buildingLayouts"
diff --git a/frontend/pages/infrastructure/case.vue b/frontend/pages/infrastructure/case.vue
index 6e0d4a0..652e1ac 100644
--- a/frontend/pages/infrastructure/case.vue
+++ b/frontend/pages/infrastructure/case.vue
@@ -40,6 +40,7 @@
                 :items="items"
                 :total-items="totalItems"
                 :loading="loading"
+                :row-class="rowClass"
                 :row-clickable="auth.isAdmin"
                 empty-message="Aucun bovin dans cette case."
                 @row-click="goToBovine"
@@ -47,25 +48,61 @@
                 <template #header-nationalNumber>
                     <UiTextInput
                         v-model="filters.nationalNumber"
-                        placeholder="Numéro national"
+                        placeholder="N° National"
                         size="compact"
                     />
                 </template>
-                <template #header-receivedWeight>
+                <template #header-workNumber>
                     <UiTextInput
-                        v-model="filters.receivedWeight"
-                        placeholder="Poids (kg)"
+                        v-model="filters.workNumber"
+                        placeholder="N° Travail"
                         size="compact"
                     />
                 </template>
+                <template #header-sex>
+                    <UiSelect
+                        v-model="filters.sex"
+                        placeholder="Sexe"
+                        :options="sexOptions"
+                        size="compact"
+                    />
+                </template>
+                <template #header-birthDate>
+                    <UiDateMaskedInput v-model="birthDateFilter" size="compact" placeholder="Né le" />
+                </template>
+                <template #header-age>
+                    <UiTextInput :model-value="''" placeholder="Age" size="compact" disabled />
+                </template>
+                <template #header-breedCode>
+                    <UiTextInput
+                        v-model="filters.breedCode"
+                        placeholder="Race"
+                        size="compact"
+                    />
+                </template>
+                <template #header-buildingCase.building.label>
+                    <UiTextInput :model-value="''" placeholder="Bâtiment" size="compact" disabled />
+                </template>
+                <template #header-buildingCase.caseNumber>
+                    <UiTextInput :model-value="''" placeholder="Case" size="compact" disabled />
+                </template>
                 <template #header-arrivalDate>
-                    <UiDateMaskedInput v-model="arrivalDateFilter" placeholder="Date d'arrivée" size="compact" />
+                    <UiDateMaskedInput v-model="arrivalDateFilter" size="compact" placeholder="Entrée le" />
+                </template>
+                <template #cell-birthDate="{ item }">
+                    {{ formatDate(item.birthDate) }}
+                </template>
+                <template #cell-age="{ item }">
+                    {{ formatAgeLabel(item.ageMonths) }}
                 </template>
                 <template #cell-arrivalDate="{ item }">
                     {{ formatDate(item.arrivalDate) }}
                 </template>
-                <template #cell-receivedWeight="{ item }">
-                    {{ item.receivedWeight ?? '—' }}
+                <template #cell-buildingCase.building.label="{ item }">
+                    {{ item.buildingCase?.building?.label ?? '—' }}
+                </template>
+                <template #cell-buildingCase.caseNumber="{ item }">
+                    {{ item.buildingCase?.caseNumber ?? '—' }}
                 </template>
             </UiDataTable>
         </div>
@@ -77,6 +114,7 @@ import type { BuildingCaseData } from '~/services/dto/building-case-data'
 import type { BovineData } from '~/services/dto/bovine-data'
 import { useAuthStore } from '~/stores/auth'
 import { useDataTableServerState } from '~/composables/useDataTableServerState'
+import { formatAgeLabel } from '~/utils/bovine-age'
 
 const route = useRoute()
 const router = useRouter()
@@ -93,38 +131,58 @@ const { items, totalItems, page, perPage, filters, loading, reload } =
     useDataTableServerState<BovineData>(
         'bovines',
         {
+            'exists[exitedAt]': 'false',
             buildingCase: '',
             nationalNumber: '',
-            receivedWeight: '',
+            workNumber: '',
+            breedCode: '',
+            sex: '',
             'arrivalDate[after]': '',
-            'arrivalDate[strictly_before]': ''
+            'arrivalDate[strictly_before]': '',
+            'birthDate[after]': '',
+            'birthDate[strictly_before]': ''
         },
         { initialPerPage: 10 }
     )
 
+const sexOptions = [
+    { value: 'M', label: 'Mâle' },
+    { value: 'F', label: 'Femelle' }
+]
+
 const addOneDay = (dateString: string): string => {
     const [year, month, day] = dateString.split('-').map(Number)
     const next = new Date(Date.UTC(year, month - 1, day + 1))
     return next.toISOString().slice(0, 10)
 }
 
-const arrivalDateFilter = computed<string>({
-    get: () => (filters.value['arrivalDate[after]'] as string) ?? '',
-    set: (value: string) => {
-        if (!value) {
-            filters.value['arrivalDate[after]'] = ''
-            filters.value['arrivalDate[strictly_before]'] = ''
-            return
+const singleDateFilter = (afterKey: string, beforeKey: string) =>
+    computed<string>({
+        get: () => (filters.value[afterKey] as string) ?? '',
+        set: (value: string) => {
+            if (!value) {
+                filters.value[afterKey] = ''
+                filters.value[beforeKey] = ''
+                return
+            }
+            filters.value[afterKey] = value
+            filters.value[beforeKey] = addOneDay(value)
         }
-        filters.value['arrivalDate[after]'] = value
-        filters.value['arrivalDate[strictly_before]'] = addOneDay(value)
-    }
-})
+    })
+
+const arrivalDateFilter = singleDateFilter('arrivalDate[after]', 'arrivalDate[strictly_before]')
+const birthDateFilter = singleDateFilter('birthDate[after]', 'birthDate[strictly_before]')
 
 const columns = [
-    { key: 'nationalNumber', label: 'Numéro national' },
-    { key: 'receivedWeight', label: "Poids à l'arrivée (kg)" },
-    { key: 'arrivalDate', label: "Date d'arrivée" }
+    { key: 'nationalNumber', label: 'N° National', width: '160px' },
+    { key: 'workNumber', label: 'N° Travail', width: '85px' },
+    { key: 'sex', label: 'Sexe', width: '70px' },
+    { key: 'birthDate', label: 'Né le', width: '120px' },
+    { key: 'age', label: 'Age', width: '110px' },
+    { key: 'breedCode', label: 'Race' },
+    { key: 'buildingCase.building.label', label: 'Bâtiment', width: '1.5fr' },
+    { key: 'buildingCase.caseNumber', label: 'Case', width: '80px' },
+    { key: 'arrivalDate', label: 'Entrée le', width: '120px' }
 ]
 
 const title = computed(() => {
@@ -150,6 +208,13 @@ const formatDate = (date: string | null) => {
     })
 }
 
+const rowClass = (item: BovineData): string => {
+    if (item.ageMonths === null || item.ageMonths === undefined) return ''
+    if (item.ageMonths >= 24) return 'bg-red-100 hover:bg-red-200'
+    if (item.ageMonths >= 22) return 'bg-orange-100 hover:bg-orange-200'
+    return ''
+}
+
 const loadCase = async () => {
     if (!hasCaseId.value) {
         buildingCase.value = null