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/components/ui/UiDataTable.vue

@@ -2,10 +2,10 @@
     <div class="w-full">
         <div class="relative border border-slate-200">
             <div
-                class="grid gap-4 bg-slate-100 px-4 py-3 text-sm font-semibold uppercase tracking-wide"
+                class="grid items-center gap-6 bg-slate-100 px-4 py-3 text-sm font-semibold uppercase tracking-wide"
                 :style="{ gridTemplateColumns: gridCols }"
             >
-                <div v-for="col in columns" :key="col.key">
+                <div v-for="col in columns" :key="col.key" class="min-w-0">
                     <slot :name="`header-${col.key}`" :column="col">{{ col.label }}</slot>
                 </div>
                 <div v-if="showActions">Actions</div>
@@ -16,7 +16,7 @@
                     <div
                         v-for="(item, index) in paginatedItems"
                         :key="item.id ?? index"
-                        class="grid gap-4 px-4 py-3 text-sm border-t border-slate-200"
+                        class="grid gap-6 px-4 py-3 text-sm border-t border-slate-200"
                         :class="rowClickable ? 'hover:bg-slate-50 cursor-pointer' : ''"
                         :style="{ gridTemplateColumns: gridCols }"
                         :role="rowClickable ? 'button' : undefined"
@@ -25,7 +25,7 @@
                         @keydown.enter="onRowClick(item)"
                         @keydown.space.prevent="onRowClick(item)"
                     >
-                        <div v-for="col in columns" :key="col.key">
+                        <div v-for="col in columns" :key="col.key" class="min-w-0 truncate">
                             <slot :name="`cell-${col.key}`" :item="item" :column="col">
                                 {{ getNestedValue(item, col.key) }}
                             </slot>
@@ -71,7 +71,7 @@
                 <select
                     :id="perPageId"
                     :value="currentPerPage"
-                    class="rounded border border-slate-300 bg-white px-2 py-1 text-sm text-primary-700"
+                    class="h-10 rounded border border-slate-300 bg-white px-2 text-sm text-primary-700"
                     @change="onPerPageChange(($event.target as HTMLSelectElement).value)"
                 >
                     <option v-for="n in perPageOptions" :key="n" :value="n">{{ n }}</option>
@@ -129,6 +129,7 @@ import { computed, useId } from 'vue'
 interface Column {
     key: string
     label: string
+    width?: string
 }
 
 const props = withDefaults(defineProps<{
@@ -145,8 +146,8 @@ const props = withDefaults(defineProps<{
 }>(), {
     totalItems: undefined,
     page: 1,
-    perPage: 5,
-    perPageOptions: () => [5, 10, 25],
+    perPage: 10,
+    perPageOptions: () => [10, 25, 50],
     rowClickable: false,
     showActions: false,
     emptyMessage: 'Aucune donnée',
@@ -178,7 +179,7 @@ const paginatedItems = computed(() => {
 })
 
 const gridCols = computed(() => {
-    const dataCols = props.columns.map(() => '1fr').join(' ')
+    const dataCols = props.columns.map(c => c.width ?? '1fr').join(' ')
     return props.showActions ? `${dataCols} 60px` : dataCols
 })