feat: inventaire bovins (!49)

| Numéro du ticket | Titre du ticket | |------------------|-----------------| | | | ## Description de la PR ## Modification du .env ## Check list - [ ] Pas de régression - [ ] TU/TI/TF rédigée - [ ] TU/TI/TF OK - [ ] CHANGELOG modifié Reviewed-on: #49 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>
2026-04-24 07:53:06 +00:00
parent 023d71381e
commit f05fcc5c15
19 changed files with 704 additions and 21 deletions
--- a/frontend/components/ui/UiDataTable.vue
+++ b/frontend/components/ui/UiDataTable.vue
@@ -19,7 +19,10 @@
                        v-for="(item, index) in paginatedItems"
                        :key="item.id ?? index"
                        class="grid gap-6 px-4 py-3 text-sm border-t border-slate-200"
-                        :class="rowClickable ? 'hover:bg-slate-50 cursor-pointer' : ''"
+                        :class="[
+                            rowClickable ? 'hover:bg-slate-50 cursor-pointer' : '',
+                            rowClass ? rowClass(item) : ''
+                        ]"
                        :style="{ gridTemplateColumns: gridCols }"
                        :role="rowClickable ? 'button' : undefined"
                        :tabindex="rowClickable ? 0 : undefined"
@@ -83,12 +86,12 @@
            <nav aria-label="Pagination" class="flex items-center gap-1">
                <button
                    type="button"
-                    class="h-10 px-3 text-sm text-primary-500 hover:underline disabled:cursor-not-allowed disabled:text-slate-400 disabled:no-underline"
+                    class="h-10 rounded border border-primary-500 bg-white px-3 text-sm text-primary-500 hover:bg-primary-500 hover:text-white disabled:cursor-not-allowed disabled:border-slate-300 disabled:text-slate-400 disabled:hover:bg-white disabled:hover:text-slate-400"
                    :disabled="currentPage <= 1"
                    aria-label="Page précédente"
                    @click="goToPage(currentPage - 1)"
                >
-                    Prev
+                    Précédent
                </button>

                <template v-for="(entry, i) in visiblePages" :key="`${typeof entry}-${entry}-${i}`">
@@ -113,12 +116,12 @@

                <button
                    type="button"
-                    class="h-10 px-3 text-sm text-primary-500 hover:underline disabled:cursor-not-allowed disabled:text-slate-400 disabled:no-underline"
+                    class="h-10 rounded border border-primary-500 bg-white px-3 text-sm text-primary-500 hover:bg-primary-500 hover:text-white disabled:cursor-not-allowed disabled:border-slate-300 disabled:text-slate-400 disabled:hover:bg-white disabled:hover:text-slate-400"
                    :disabled="currentPage >= totalPages"
                    aria-label="Page suivante"
                    @click="goToPage(currentPage + 1)"
                >
-                    Next
+                    Suivant
                </button>
            </nav>
        </div>
@@ -145,6 +148,7 @@ const props = withDefaults(defineProps<{
    showActions?: boolean
    emptyMessage?: string
    loading?: boolean
+    rowClass?: (item: T) => string | undefined
 }>(), {
    totalItems: undefined,
    page: 1,
@@ -153,7 +157,8 @@ const props = withDefaults(defineProps<{
    rowClickable: false,
    showActions: false,
    emptyMessage: 'Aucune donnée',
-    loading: false
+    loading: false,
+    rowClass: undefined
 })

 const emit = defineEmits<{
--- a/frontend/components/ui/UiDateMaskedInput.vue
+++ b/frontend/components/ui/UiDateMaskedInput.vue
@@ -0,0 +1,108 @@
+<template>
+    <div :class="['flex flex-col', wrapperClass]">
+        <label
+            v-if="label"
+            :for="id"
+            class="font-bold uppercase text-xl text-primary-700"
+            :class="labelClass"
+        >
+            {{ label }}
+        </label>
+        <input
+            :id="id"
+            v-maska="'##/##/####'"
+            type="text"
+            inputmode="numeric"
+            :value="displayValue"
+            :placeholder="placeholder"
+            :disabled="disabled"
+            v-bind="attrs"
+            class="w-full min-w-0 border-b border-primary-700 bg-transparent"
+            :class="[
+                sizeClass,
+                isEmpty ? 'text-neutral-400' : 'text-primary-700',
+                disabled ? 'cursor-not-allowed' : 'cursor-text',
+                inputClass
+            ]"
+            @input="onInput"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { vMaska } from 'maska/vue'
+import { computed, ref, useAttrs, watch } from 'vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+    defineProps<{
+        id?: string
+        label?: string
+        modelValue: string | null | undefined
+        placeholder?: string
+        disabled?: boolean
+        size?: 'default' | 'compact'
+        wrapperClass?: string
+        labelClass?: string
+        inputClass?: string
+    }>(),
+    {
+        placeholder: 'JJ/MM/AAAA',
+        disabled: false,
+        size: 'default',
+        wrapperClass: '',
+        labelClass: '',
+        inputClass: ''
+    }
+)
+
+const emit = defineEmits<{
+    (event: 'update:modelValue', value: string): void
+}>()
+
+const attrs = useAttrs()
+
+const toDisplay = (iso: string | null | undefined): string => {
+    if (!iso) return ''
+    const parts = iso.split('-')
+    if (parts.length !== 3) return ''
+    const [year, month, day] = parts
+    if (year.length !== 4 || month.length !== 2 || day.length !== 2) return ''
+    return `${day}/${month}/${year}`
+}
+
+const toIso = (display: string): string | null => {
+    const match = display.match(/^(\d{2})\/(\d{2})\/(\d{4})$/)
+    if (!match) return null
+    const [, day, month, year] = match
+    return `${year}-${month}-${day}`
+}
+
+const displayValue = ref(toDisplay(props.modelValue))
+
+watch(() => props.modelValue, (newIso) => {
+    const expected = toDisplay(newIso)
+    if (expected !== displayValue.value) {
+        displayValue.value = expected
+    }
+})
+
+const isEmpty = computed(() => !displayValue.value)
+const sizeClass = computed(() =>
+    props.size === 'compact'
+        ? 'text-sm h-8 font-normal normal-case tracking-normal'
+        : 'text-xl py-[6px]'
+)
+
+const onInput = (event: Event) => {
+    const target = event.target as HTMLInputElement
+    displayValue.value = target.value
+    if (target.value === '') {
+        emit('update:modelValue', '')
+        return
+    }
+    const iso = toIso(target.value)
+    emit('update:modelValue', iso ?? '')
+}
+</script>
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -18,9 +18,9 @@
        <card-link label="CASES" link="/infrastructure/case" iconName="material-symbols:bottom-sheets-outline" />
        <card-link label="RÉCEPTIONS FINIES" link="/reception/finish-reception" iconName="mdi:truck-check-outline" />
        <card-link label="EXPÉDITIONS FINIES" link="/shipment/finish-shipment" iconName="mdi:truck-delivery-outline" />
-        <card-link link="/" iconName="mdi:cow">
+        <card-link link="/inventory" iconName="mdi:cow">
            <template #label>
-                PASSEPORT<br>DU BOVIN
+                INVENTAIRE<br>BOVINS
            </template>
        </card-link>
    </div>
--- a/frontend/pages/infrastructure/case.vue
+++ b/frontend/pages/infrastructure/case.vue
@@ -59,7 +59,7 @@
                    />
                </template>
                <template #header-arrivalDate>
-                    <UiDateInput v-model="arrivalDateFilter" size="compact" />
+                    <UiDateMaskedInput v-model="arrivalDateFilter" placeholder="Date d'arrivée" size="compact" />
                </template>
                <template #cell-arrivalDate="{ item }">
                    {{ formatDate(item.arrivalDate) }}
--- a/frontend/pages/inventory.vue
+++ b/frontend/pages/inventory.vue
@@ -0,0 +1,217 @@
+<template>
+    <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"
+                />
+            </div>
+            <h1 class="font-bold text-3xl uppercase text-primary-500">Inventaire bovins</h1>
+            <button
+                v-if="auth.isAdmin"
+                type="button"
+                :disabled="syncing"
+                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 disabled:cursor-not-allowed disabled:opacity-60"
+                @click="syncInventory"
+            >
+                <Icon name="mdi:sync" size="28" :class="syncing ? 'animate-spin' : ''" />
+                Rafraîchir
+            </button>
+        </div>
+
+        <div class="mt-6 mb-16">
+            <UiDataTable
+                v-model:page="page"
+                v-model:per-page="perPage"
+                :columns="columns"
+                :items="items"
+                :total-items="totalItems"
+                :loading="loading"
+                :row-class="rowClass"
+            >
+                <template #header-nationalNumber>
+                    <UiTextInput
+                        v-model="filters.nationalNumber"
+                        placeholder="N° National"
+                        size="compact"
+                    />
+                </template>
+                <template #header-workNumber>
+                    <UiTextInput
+                        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-breedCode>
+                    <UiTextInput
+                        v-model="filters.breedCode"
+                        placeholder="Race"
+                        size="compact"
+                    />
+                </template>
+                <template #header-arrivalDate>
+                    <UiDateMaskedInput v-model="arrivalDateFilter" size="compact" placeholder="Entrée le" />
+                </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-age>
+                    <UiTextInput :model-value="''" placeholder="Age" size="compact" disabled />
+                </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-buildingCase.building.label="{ item }">
+                    {{ item.buildingCase?.building?.label ?? '—' }}
+                </template>
+                <template #cell-buildingCase.caseNumber="{ item }">
+                    {{ item.buildingCase?.caseNumber ?? '—' }}
+                </template>
+            </UiDataTable>
+        </div>
+    </div>
+</template>
+
+
+<script setup lang="ts">
+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 router = useRouter()
+const auth = useAuthStore()
+const api = useApi()
+const toast = useToast()
+
+interface SyncResult {
+    created: number
+    updated: number
+    exited: number
+    total: number
+}
+
+const syncing = ref(false)
+
+const syncInventory = async () => {
+    if (syncing.value) return
+    const confirmed = window.confirm(
+        "Lancer la synchronisation avec EDNOTIF ?\n\nLes bovins absents de la réponse seront marqués comme sortis."
+    )
+    if (!confirmed) return
+
+    syncing.value = true
+    try {
+        const result = await api.post<SyncResult>('bovines/sync-inventory')
+        toast.success({
+            title: 'Inventaire synchronisé',
+            message: `Créés : ${result.created} · Mis à jour : ${result.updated} · Sortis : ${result.exited} · Total EDNOTIF : ${result.total}`
+        })
+        reload()
+    } catch {
+        // error toast already handled by useApi onResponseError
+    } finally {
+        syncing.value = false
+    }
+}
+
+const { items, totalItems, page, perPage, filters, loading, reload } =
+    useDataTableServerState<BovineData>(
+        'bovines',
+        {
+            'exists[exitedAt]': 'false',
+            nationalNumber: '',
+            workNumber: '',
+            breedCode: '',
+            sex: '',
+            'arrivalDate[after]': '',
+            'arrivalDate[strictly_before]': '',
+            'birthDate[after]': '',
+            'birthDate[strictly_before]': ''
+        }
+    )
+
+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 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)
+        }
+    })
+
+const arrivalDateFilter = singleDateFilter('arrivalDate[after]', 'arrivalDate[strictly_before]')
+const birthDateFilter = singleDateFilter('birthDate[after]', 'birthDate[strictly_before]')
+
+const columns = [
+    { 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 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 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 ''
+}
+
+onMounted(reload)
+</script>
--- a/frontend/pages/reception/finish-reception.vue
+++ b/frontend/pages/reception/finish-reception.vue
@@ -24,8 +24,9 @@
                    />
                </template>
                <template #header-receptionDate>
-                    <UiDateInput
+                    <UiDateMaskedInput
                        v-model="receptionDateFilter"
+                        placeholder="Date"
                        size="compact"
                    />
                </template>
@@ -119,7 +120,7 @@ const receptionDateFilter = computed<string>({

 const columns = [
    { key: 'identificationNumber', label: 'Numéro', width: '75px' },
-    { key: 'receptionDate', label: 'Date et heure', width: '120px' },
+    { key: 'receptionDate', label: 'Date', width: '120px' },
    { key: 'supplier.name', label: 'Fournisseur', width: '1.5fr' },
    { key: 'address.fullAddress', label: 'Adresse', width: '2fr' },
    { key: 'receptionType.label', label: 'Type réception', width: '0.9fr' },
--- a/frontend/pages/reception/waiting-reception.vue
+++ b/frontend/pages/reception/waiting-reception.vue
@@ -18,7 +18,7 @@
                @row-click="goToReception"
            >
                <template #header-receptionDate>
-                    <UiDateInput v-model="receptionDateFilter" size="compact" />
+                    <UiDateMaskedInput v-model="receptionDateFilter" placeholder="Date" size="compact" />
                </template>
                <template #header-supplier.name>
                    <UiTextInput
@@ -122,7 +122,7 @@ const receptionDateFilter = computed<string>({
 })

 const columns = [
-    { key: 'receptionDate', label: 'Date et heure', width: '120px' },
+    { key: 'receptionDate', label: 'Date', width: '120px' },
    { key: 'supplier.name', label: 'Fournisseur', width: '1.5fr' },
    { key: 'address.fullAddress', label: 'Adresse', width: '2fr' },
    { key: 'receptionType.label', label: 'Type réception', width: '1.1fr' },
--- a/frontend/pages/shipment/finish-shipment.vue
+++ b/frontend/pages/shipment/finish-shipment.vue
@@ -24,7 +24,7 @@
                    />
                </template>
                <template #header-shipmentDate>
-                    <UiDateInput v-model="shipmentDateFilter" size="compact" />
+                    <UiDateMaskedInput v-model="shipmentDateFilter" placeholder="Date" size="compact" />
                </template>
                <template #header-customer.name>
                    <UiTextInput
--- a/frontend/pages/shipment/waiting-shipment.vue
+++ b/frontend/pages/shipment/waiting-shipment.vue
@@ -18,7 +18,7 @@
                @row-click="goToShipment"
            >
                <template #header-shipmentDate>
-                    <UiDateInput v-model="shipmentDateFilter" size="compact" />
+                    <UiDateMaskedInput v-model="shipmentDateFilter" placeholder="Date" size="compact" />
                </template>
                <template #header-customer.name>
                    <UiTextInput
@@ -134,7 +134,7 @@ const shipmentDateFilter = computed<string>({
 })

 const columns = [
-    { key: 'shipmentDate', label: 'Date et heure', width: '120px' },
+    { key: 'shipmentDate', label: 'Date', width: '120px' },
    { key: 'customer.name', label: 'Client', width: '1.5fr' },
    { key: 'address.fullAddress', label: 'Adresse', width: '2fr' },
    { key: 'shipmentType.label', label: "Type d'expé.", width: '1.1fr' },
--- a/frontend/services/dto/bovine-data.ts
+++ b/frontend/services/dto/bovine-data.ts
@@ -1,10 +1,22 @@
+export interface BovineBuildingCaseRef {
+    caseNumber: number | null
+    building: { label: string } | null
+}
+
 export interface BovineData {
    id: number
    nationalNumber: string
    receivedWeight: number | null
    arrivalDate: string | null
-    buildingCase: string | null
+    exitDate: string | null
+    buildingCase: BovineBuildingCaseRef | null
    supplier: string | null
+    workNumber: string | null
+    birthDate: string | null
+    breedCode: string | null
+    sex: string | null
+    ageMonths: number | null
+    exitedAt: string | null
 }

 export type BovinePayload = {
--- a/frontend/utils/bovine-age.ts
+++ b/frontend/utils/bovine-age.ts
@@ -0,0 +1,10 @@
+export const formatAgeLabel = (months: number | null | undefined): string => {
+    if (months === null || months === undefined) return '—'
+    const years = Math.floor(months / 12)
+    const remaining = months % 12
+    let label = ''
+    if (years > 0) label = `${years} an${years > 1 ? 's' : ''}`
+    if (remaining > 0) label += `${label ? ' ' : ''}${remaining} mois`
+    if (!label) label = '< 1 mois'
+    return label
+}