feat : UiDataTable avec pagination server-side et loader

- Composant UiDataTable (pagination, slots header/cell/actions/empty)
- Composable useDataTableServerState (token anti-race, debounce filtres)
- Migration de la page réceptions finies sur le nouveau pattern
- pagination_client_items_per_page activé globalement

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

frontend/pages/reception/finish-reception.vue

@@ -5,42 +5,50 @@
     </div>
 
     <div class="px-[86px]">
-        <div class="mt-6 border border-slate-200 mb-16 ">
-            <div class="grid grid-cols-6 gap-4 bg-slate-100 px-4 py-3 text-sm font-semibold uppercase tracking-wide">
-                <div>Numéro</div>
-                <div>Date et heure</div>
-                <div>Fournisseur</div>
-                <div>Adresse</div>
-                <div>Type réception</div>
-                <div>Poids</div>
-            </div>
-            <div
-                v-for="reception in receptionList"
-                :key="reception.id"
-                class="grid grid-cols-6 gap-4 px-4 py-3 text-sm hover:bg-slate-50 cursor-pointer border-t border-slate-200"
-                role="button"
-                tabindex="0"
-                @click="goToReception(reception.id)"
+        <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-clickable
+                @row-click="goToReception"
             >
-                <div>{{ reception.identificationNumber}}</div>
-                <div>{{ formatDate(reception.receptionDate) }}</div>
-                <div>{{ reception.supplier?.name }}</div>
-                <div>{{ reception.address?.fullAddress }}</div>
-                <div>{{ reception.receptionType?.label }}</div>
-                <div>{{ formatWeighing(reception) }}</div>
-            </div>
+                <template #cell-receptionDate="{ item }">
+                    {{ formatDate(item.receptionDate) }}
+                </template>
+                <template #cell-weighing="{ item }">
+                    {{ formatWeighing(item) }}
+                </template>
+            </UiDataTable>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
-import type {ReceptionData} from "~/services/dto/reception-data";
-import {getReceptionList} from "~/services/reception";
-import type {ShipmentData} from "~/services/dto/shipment-data";
+import type { ReceptionData } from '~/services/dto/reception-data'
+import { useDataTableServerState } from '~/composables/useDataTableServerState'
 
-const receptionList = ref<ReceptionData[]>()
 const router = useRouter()
 
+const { items, totalItems, page, perPage, loading, reload } =
+    useDataTableServerState<ReceptionData>(
+        'receptions',
+        { isValid: true },
+        { initialPerPage: 5 }
+    )
+
+const columns = [
+    { key: 'identificationNumber', label: 'Numéro' },
+    { key: 'receptionDate', label: 'Date et heure' },
+    { key: 'supplier.name', label: 'Fournisseur' },
+    { key: 'address.fullAddress', label: 'Adresse' },
+    { key: 'receptionType.label', label: 'Type réception' },
+    { key: 'weighing', label: 'Poids' }
+]
+
 const formatDate = (date: string | null) => {
     if (!date) return '—'
     const d = new Date(date.replace(' ', 'T'))
@@ -65,11 +73,9 @@ const formatWeighing = (reception: ReceptionData) => {
     return `${gross - tare} kg`
 }
 
-const goToReception = (id: number) => {
-    router.push(`/reception/update/${id}`)
+const goToReception = (reception: ReceptionData) => {
+    router.push(`/reception/update/${reception.id}`)
 }
 
-onMounted(async () => {
-    receptionList.value = await getReceptionList(true)
-})
+onMounted(reload)
 </script>