feat : écran d'ajout bovin + feed bovin + fix pesées expéditions

frontend/pages/infrastructure/case.vue

@@ -1,21 +1,118 @@
 <template>
-    <div class="flex justify-center items-center">
-        <UiButton
-            class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
-            :disabled="!hasCaseId"
-            @click="printCaseReport"
-        >
-            Imprimer
-        </UiButton>
+    <div class="px-[86px]">
+        <div class="flex items-center justify-between relative">
+            <div class="flex flex-row absolute -left-[60px]">
+                <Icon
+                    @click="router.push('/infrastructure/building')"
+                    name="gg:arrow-left-o"
+                    size="44"
+                    class="cursor-pointer text-primary-500"
+                />
+            </div>
+            <div class="flex items-center gap-4">
+                <h1 class="font-bold text-4xl text-primary-500 uppercase">
+                    {{ title }}
+                </h1>
+                <div
+                    v-if="hasCaseId"
+                    class="bg-primary-500 p-1 rounded-md flex items-center cursor-pointer"
+                    title="Imprimer"
+                    @click="printCaseReport"
+                >
+                    <Icon name="mdi:printer-outline" size="32" class="text-white" />
+                </div>
+            </div>
+            <NuxtLink
+                v-if="hasCaseId"
+                :to="addBovineRoute"
+                class="inline-flex items-center justify-center text-xl text-white uppercase bg-primary-500 h-[50px] px-6 rounded hover:opacity-80 gap-2"
+                :class="auth.isAdmin ? '' : 'cursor-not-allowed opacity-60 pointer-events-none'"
+            >
+                <Icon name="mdi:plus" size="28" />
+                Ajouter
+            </NuxtLink>
+        </div>
+
+        <div class="mt-8 border border-slate-200 mb-16">
+            <div
+                class="grid grid-cols-3 gap-4 bg-slate-100 px-4 py-3 text-sm font-semibold uppercase tracking-wide"
+            >
+                <div>Numéro national</div>
+                <div>Poids à l'arrivée (kg)</div>
+                <div>Date d'arrivée</div>
+            </div>
+            <template v-if="bovines.length > 0">
+                <div
+                    v-for="bovine in bovines"
+                    :key="bovine.id"
+                    class="grid grid-cols-3 gap-4 px-4 py-3 text-sm border-t border-slate-200"
+                    :class="auth.isAdmin ? 'cursor-pointer hover:bg-slate-50' : ''"
+                    :role="auth.isAdmin ? 'button' : undefined"
+                    :tabindex="auth.isAdmin ? 0 : undefined"
+                    @click="goToBovine(bovine.id)"
+                    @keydown.enter="goToBovine(bovine.id)"
+                >
+                    <div>{{ bovine.nationalNumber }}</div>
+                    <div>{{ bovine.receivedWeight ?? '—' }}</div>
+                    <div>{{ formatDate(bovine.arrivalDate) }}</div>
+                </div>
+            </template>
+            <div
+                v-else
+                class="px-4 py-3 text-sm border-t border-slate-200 text-slate-500"
+            >
+                Aucun bovin dans cette case.
+            </div>
+        </div>
     </div>
 </template>
 <script setup lang="ts">
+import type { BuildingCaseData } from '~/services/dto/building-case-data'
+import { useAuthStore } from '~/stores/auth'
+
 const route = useRoute()
+const router = useRouter()
 const { printPdf } = usePdfPrinter()
+const api = useApi()
+const auth = useAuthStore()
 
 const caseId = computed(() => Number(route.query.id))
 const hasCaseId = computed(() => Number.isFinite(caseId.value) && caseId.value > 0)
 
+const buildingCase = ref<BuildingCaseData | null>(null)
+const bovines = computed(() => buildingCase.value?.bovines ?? [])
+
+const title = computed(() => {
+    if (!buildingCase.value) return ''
+    const buildingLabel = buildingCase.value.building?.label ?? ''
+    const caseNumber = buildingCase.value.caseNumber ?? ''
+    return `${buildingLabel} case ${caseNumber}`.trim()
+})
+
+const addBovineRoute = computed(() => ({
+    path: '/infrastructure/bovine',
+    query: { caseId: String(caseId.value) }
+}))
+
+const formatDate = (date: string | null) => {
+    if (!date) return '—'
+    const d = new Date(date)
+    if (isNaN(d.getTime())) return date
+    return d.toLocaleDateString('fr-FR', {
+        day: '2-digit',
+        month: '2-digit',
+        year: 'numeric'
+    })
+}
+
+const loadCase = async () => {
+    if (!hasCaseId.value) {
+        buildingCase.value = null
+        return
+    }
+    buildingCase.value = await api.get<BuildingCaseData>(`/building_cases/${caseId.value}`)
+}
+
 const printCaseReport = async () => {
     if (!hasCaseId.value) {
         return
@@ -24,4 +121,14 @@ const printCaseReport = async () => {
     const filename = `tableau_poids_case_${caseId.value}.pdf`
     await printPdf(`/building_cases/${caseId.value}/weights-report`, filename)
 }
+
+const goToBovine = (id: number) => {
+    if (!auth.isAdmin) return
+    router.push({
+        path: '/infrastructure/bovine',
+        query: { id: String(id), caseId: String(caseId.value) }
+    })
+}
+
+watch(caseId, loadCase, { immediate: true })
 </script>