feat : migration des 5 écrans admin sur UiDataTable

- Filtres SearchFilter/BooleanFilter ajoutés sur User, Supplier, Customer, Carrier, BovineType
- Pagination activée sur l'opération admin/users
- UiTextInput et license-plate-input utilisent border-primary-700 pour la cohérence visuelle

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

frontend/pages/admin/supplier/supplier-list.vue

@@ -3,37 +3,35 @@
         <h1 class="text-4xl font-bold uppercase text-primary-500">Liste des fournisseurs</h1>
     </div>
 
-    <div v-if="auth.isAdmin" class="mt-7 border border-slate-200 mb-11">
-        <div class="max-h-96 overflow-y-auto">
-            <div
-                class="sticky text-primary-700 top-0 z-10 grid grid-cols-4 gap-4 bg-slate-100 px-4 py-3 text-sm font-semibold uppercase tracking-wide"
-            >
-                <div>Nom</div>
-                <div>Téléphone</div>
-                <div>Mail</div>
-                <div>Créé par</div>
-            </div>
-
-            <div v-if="supplierList.length === 0" class="px-4 py-6 text-slate-400">
-                Aucun fournisseur.
-            </div>
-
-            <div
-                v-for="supplier in supplierList"
-                :key="supplier.id"
-                class="grid grid-cols-4 text-primary-700 hover:bg-slate-50 border-t gap-4 px-4 py-2 cursor-pointer"
-                @click="goToSupplier(supplier.id)"
-            >
-                <div class="truncate">{{ supplier.name || "—" }}</div>
-                <div class="truncate">{{ supplier.phone || "—" }}</div>
-                <div class="truncate">{{ supplier.email || "—" }}</div>
-                <div class="truncate">{{ supplier.createdBy?.username || "—" }}</div>
-            </div>
-        </div>
+    <div v-if="auth.isAdmin" class="mt-7 mb-11">
+        <UiDataTable
+            v-model:page="page"
+            v-model:per-page="perPage"
+            :columns="columns"
+            :items="items"
+            :total-items="totalItems"
+            :loading="loading"
+            row-clickable
+            @row-click="goToSupplier"
+        >
+            <template #header-name>
+                <UiTextInput v-model="filters.name" placeholder="Nom" size="compact" />
+            </template>
+            <template #header-phone>
+                <UiTextInput v-model="filters.phone" placeholder="Téléphone" size="compact" />
+            </template>
+            <template #header-email>
+                <UiTextInput v-model="filters.email" placeholder="Mail" size="compact" />
+            </template>
+            <template #header-createdBy.username>
+                <UiTextInput v-model="filters['createdBy.username']" placeholder="Créé par" size="compact" />
+            </template>
+        </UiDataTable>
     </div>
     <div v-else class="mt-7 border border-slate-200 mb-11 px-4 py-6 text-slate-400">
         Accès réservé aux administrateurs.
     </div>
+
     <div class="flex justify-center items-center">
         <NuxtLink
             to="/admin/supplier"
@@ -48,17 +46,34 @@
 </template>
 
 <script setup lang="ts">
-import { getSupplierList } from "~/services/supplier"
-import type { SupplierData } from "~/services/dto/supplier-data"
-import { useAuthStore } from "~/stores/auth"
+import type { SupplierData } from '~/services/dto/supplier-data'
+import { useAuthStore } from '~/stores/auth'
+import { useDataTableServerState } from '~/composables/useDataTableServerState'
 
-const supplierList = ref<SupplierData[]>([])
 const router = useRouter()
 const auth = useAuthStore()
 
-const goToSupplier = (id: number) => {
+const { items, totalItems, page, perPage, filters, loading, reload } =
+    useDataTableServerState<SupplierData>(
+        'suppliers',
+        {
+            name: '',
+            phone: '',
+            email: '',
+            'createdBy.username': ''
+        }
+    )
+
+const columns = [
+    { key: 'name', label: 'Nom' },
+    { key: 'phone', label: 'Téléphone' },
+    { key: 'email', label: 'Mail' },
+    { key: 'createdBy.username', label: 'Créé par' }
+]
+
+const goToSupplier = (supplier: SupplierData) => {
     if (!auth.isAdmin) return
-    router.push(`/admin/supplier/${id}`)
+    router.push(`/admin/supplier/${supplier.id}`)
 }
 
 const handleAddClick = (event: Event) => {
@@ -66,8 +81,7 @@ const handleAddClick = (event: Event) => {
     event.preventDefault()
 }
 
-onMounted(async () => {
-    if (!auth.isAdmin) return
-    supplierList.value = await getSupplierList()
+onMounted(() => {
+    if (auth.isAdmin) reload()
 })
 </script>