feat(front) : page liste entrée/sortie avec entrées en attente

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-29 10:05:24 +02:00
parent 07d174398d
commit ab1f9a3308
1 changed files with 104 additions and 0 deletions
--- a/frontend/pages/entry-exit/index.vue
+++ b/frontend/pages/entry-exit/index.vue
@@ -0,0 +1,104 @@
+<template>
+    <div class="px-[86px]">
+        <div class="flex items-center justify-start gap-10 relative">
+            <Icon
+                @click="router.push('/')"
+                name="gg:arrow-left-o"
+                size="44"
+                class="cursor-pointer text-primary-500 absolute -left-[60px]"
+            />
+            <h1 class="font-bold text-3xl uppercase text-primary-500">Entrée / Sortie</h1>
+        </div>
+
+        <section class="mt-8">
+            <h2 class="text-xl font-bold uppercase text-primary-500 mb-4">Entrées en attente</h2>
+            <UiDataTable
+                v-model:page="entryPage"
+                v-model:per-page="entryPerPage"
+                :columns="entryColumns"
+                :items="entries"
+                :total-items="totalEntries"
+                :loading="entriesLoading"
+                row-clickable
+                @row-click="goToEntry"
+            >
+                <template #cell-receptionDate="{ item }">
+                    {{ formatDate(item.receptionDate) }}
+                </template>
+                <template #cell-declaredCount="{ item }">
+                    {{ declaredCount(item) }}
+                </template>
+                <template #cell-registeredBovineCount="{ item }">
+                    {{ item.registeredBovineCount ?? 0 }}
+                </template>
+            </UiDataTable>
+        </section>
+
+        <section class="mt-12 mb-16">
+            <h2 class="text-xl font-bold uppercase text-primary-500 mb-4">Sorties en attente</h2>
+            <div class="rounded border border-dashed border-slate-300 p-8 text-center text-slate-500">
+                À venir
+            </div>
+        </section>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { ReceptionData } from '~/services/dto/reception-data'
+import { useDataTableServerState } from '~/composables/useDataTableServerState'
+
+const router = useRouter()
+
+const {
+    items: entries,
+    totalItems: totalEntries,
+    page: entryPage,
+    perPage: entryPerPage,
+    loading: entriesLoading,
+    reload
+} = useDataTableServerState<ReceptionData>(
+    'receptions',
+    {
+        'isValid': 'true',
+        'entryCompleted': 'false',
+        'receptionType.code': 'BOVINS'
+    },
+    { initialPerPage: 10 }
+)
+
+const entryColumns = [
+    { key: 'receptionDate', label: 'Date réception', width: '160px' },
+    { key: 'supplier.name', label: 'Fournisseur', width: '1.5fr' },
+    { key: 'declaredCount', label: 'Bovins déclarés', width: '140px' },
+    { key: 'registeredBovineCount', label: 'Bovins saisis', width: '140px' }
+]
+
+const declaredCount = (reception: ReceptionData): number => {
+    const fromTypes = (reception.bovinesTypes ?? []).reduce((sum: number, bt: any) => {
+        return sum + (typeof bt.quantity === 'number' ? bt.quantity : 0)
+    }, 0)
+    const fromOther = parseInt(reception.bovineDetail ?? '0', 10) || 0
+    return fromTypes + fromOther
+}
+
+const formatDate = (date: string | null) => {
+    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',
+        hour: '2-digit',
+        minute: '2-digit'
+    })
+}
+
+const goToEntry = (reception: ReceptionData) => {
+    router.push(`/entry-exit/entry/${reception.id}`)
+}
+
+onMounted(() => {
+    reload()
+})
+</script>