feat : filtres tableau (texte, date, select) et largeurs de colonnes

- DateFilter + SearchFilter sur Reception (identificationNumber, supplier.name, receptionType.id, receptionDate)
- Prop width sur les colonnes du UiDataTable
- Prop size compact sur UiTextInput/UiSelect/UiDateInput
- Option placeholder re-sélectionnable sur UiSelect (clear du filtre)
- Loader inline quand no items, overlay quand refetch

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

frontend/pages/reception/finish-reception.vue

@@ -16,6 +16,50 @@
                 row-clickable
                 @row-click="goToReception"
             >
+                <template #header-identificationNumber>
+                    <UiTextInput
+                        v-model="filters.identificationNumber"
+                        placeholder="Numéro"
+                        size="compact"
+                    />
+                </template>
+                <template #header-receptionDate>
+                    <UiDateInput
+                        v-model="receptionDateFilter"
+                        size="compact"
+                    />
+                </template>
+                <template #header-supplier.name>
+                    <UiTextInput
+                        v-model="filters['supplier.name']"
+                        placeholder="Fournisseur"
+                        size="compact"
+                    />
+                </template>
+                <template #header-address.fullAddress>
+                    <UiTextInput
+                        :model-value="''"
+                        placeholder="Adresse"
+                        size="compact"
+                        disabled
+                    />
+                </template>
+                <template #header-receptionType.label>
+                    <UiSelect
+                        v-model="filters['receptionType.id']"
+                        placeholder="Type réception"
+                        :options="receptionTypeOptions"
+                        size="compact"
+                    />
+                </template>
+                <template #header-weighing>
+                    <UiTextInput
+                        :model-value="''"
+                        placeholder="Poids"
+                        size="compact"
+                        disabled
+                    />
+                </template>
                 <template #cell-receptionDate="{ item }">
                     {{ formatDate(item.receptionDate) }}
                 </template>
@@ -29,24 +73,57 @@
 
 <script setup lang="ts">
 import type { ReceptionData } from '~/services/dto/reception-data'
+import type { ReceptionTypeData } from '~/services/dto/reception-type-data'
+import { getReceptionTypeList } from '~/services/reception-type'
 import { useDataTableServerState } from '~/composables/useDataTableServerState'
 
 const router = useRouter()
+const receptionTypes = ref<ReceptionTypeData[]>([])
 
-const { items, totalItems, page, perPage, loading, reload } =
+const receptionTypeOptions = computed(() =>
+    receptionTypes.value.map(rt => ({ value: rt.id, label: rt.label }))
+)
+
+const { items, totalItems, page, perPage, filters, loading, reload } =
     useDataTableServerState<ReceptionData>(
         'receptions',
-        { isValid: true },
-        { initialPerPage: 5 }
+        {
+            isValid: true,
+            'identificationNumber': '',
+            'supplier.name': '',
+            'receptionType.id': '',
+            'receptionDate[after]': '',
+            'receptionDate[strictly_before]': ''
+        },
+        { initialPerPage: 10 }
     )
 
+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 receptionDateFilter = computed<string>({
+    get: () => (filters.value['receptionDate[after]'] as string) ?? '',
+    set: (value: string) => {
+        if (!value) {
+            filters.value['receptionDate[after]'] = ''
+            filters.value['receptionDate[strictly_before]'] = ''
+            return
+        }
+        filters.value['receptionDate[after]'] = value
+        filters.value['receptionDate[strictly_before]'] = addOneDay(value)
+    }
+})
+
 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' }
+    { key: 'identificationNumber', label: 'Numéro', width: '75px' },
+    { key: 'receptionDate', label: 'Date et heure', 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' },
+    { key: 'weighing', label: 'Poids', width: '82px' }
 ]
 
 const formatDate = (date: string | null) => {
@@ -77,5 +154,8 @@ const goToReception = (reception: ReceptionData) => {
     router.push(`/reception/update/${reception.id}`)
 }
 
-onMounted(reload)
+onMounted(async () => {
+    receptionTypes.value = await getReceptionTypeList()
+    reload()
+})
 </script>