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/bovin/bovin-list.vue

@@ -1,33 +1,31 @@
 <template>
-    <div class="flex items-center justify-between ">
+    <div class="flex items-center justify-between">
         <h1 class="text-4xl font-bold uppercase text-primary-500">Liste des types bovins</h1>
     </div>
-    <div class="mt-7 border border-slate-200 mb-11 ">
-        <div class="grid grid-cols-2 gap-4 text-primary-700 bg-slate-100 px-4 py-3 text-sm font-semibold uppercase tracking-wide">
-            <div>Nom</div>
-            <div>Code</div>
-        </div>
-        <div v-if="!auth.isAdmin" class="px-4 py-6 text-slate-400">
-            Accès réservé aux administrateurs.
-        </div>
-        <div v-else-if="bovinList.length === 0" class="px-4 py-6 text-slate-400">
-            Aucun type de bovin.
-        </div>
-        <template v-else>
-            <div
-                v-for="bovin in bovinList"
-                :key="bovin.id"
-                class="grid grid-cols-2 text-primary-700 gap-4 px-4 py-3 text-sm hover:bg-slate-50 cursor-pointer border-t border-slate-200"
-                role="button"
-                tabindex="0"
-                @click="goToBovin(bovin.id)"
-                @keydown.enter="goToBovin(bovin.id)"
-            >
-                <div>{{ bovin.label }}</div>
-                <div>{{ bovin.code }}</div>
-            </div>
-        </template>
+
+    <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="goToBovin"
+        >
+            <template #header-label>
+                <UiTextInput v-model="filters.label" placeholder="Nom" size="compact" />
+            </template>
+            <template #header-code>
+                <UiTextInput v-model="filters.code" placeholder="Code" 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/bovin"
@@ -35,24 +33,37 @@
             :class="auth.isAdmin ? '' : 'cursor-not-allowed opacity-60'"
             @click="handleAddClick"
         >
-            <Icon name="mdi:plus" size="28"  />
+            <Icon name="mdi:plus" size="28" />
             Ajouter
         </NuxtLink>
     </div>
 </template>
 
 <script setup lang="ts">
-import { getBovineTypeList } from "~/services/bovine-type"
-import type { BovineTypeData } from "~/services/dto/bovine-type-data"
-import { useAuthStore } from "~/stores/auth"
+import type { BovineTypeData } from '~/services/dto/bovine-type-data'
+import { useAuthStore } from '~/stores/auth'
+import { useDataTableServerState } from '~/composables/useDataTableServerState'
 
-const bovinList = ref<BovineTypeData[]>([])
 const router = useRouter()
 const auth = useAuthStore()
 
-const goToBovin = (id: number) => {
+const { items, totalItems, page, perPage, filters, loading, reload } =
+    useDataTableServerState<BovineTypeData>(
+        'bovine_types',
+        {
+            label: '',
+            code: ''
+        }
+    )
+
+const columns = [
+    { key: 'label', label: 'Nom' },
+    { key: 'code', label: 'Code' }
+]
+
+const goToBovin = (bovin: BovineTypeData) => {
     if (!auth.isAdmin) return
-    router.push(`/admin/bovin/${id}`)
+    router.push(`/admin/bovin/${bovin.id}`)
 }
 
 const handleAddClick = (event: Event) => {
@@ -60,8 +71,7 @@ const handleAddClick = (event: Event) => {
     event.preventDefault()
 }
 
-onMounted(async () => {
-    if (!auth.isAdmin) return
-    bovinList.value = await getBovineTypeList()
+onMounted(() => {
+    if (auth.isAdmin) reload()
 })
 </script>