feat(front) : add usePaginatedList composable + paginate all admin lists via MalioDataTable

- frontend/shared/composables/usePaginatedList.ts : composable generique de liste paginee serveur (Hydra), branche directement sur MalioDataTable
- 22 tests Vitest (navigation, bornes, parse Hydra, hors-borne, reset, filtres, tri, swallow erreur)
- Migration des pages admin existantes : sites, users, roles, categories
- Refactor de useCategoriesAdmin pour ne porter que le referentiel CategoryType (charge en une fois via ?pagination=false)
- Etat page/tri/filtre 100% local dans le composable (respect regle ABSOLUE n°6 — pas de persistance URL)
- Section dediee dans .claude/rules/frontend.md documentant le pattern obligatoire pour toute nouvelle liste

ERP-73 — volet front de la pagination, depend du back ERP-72 deja merge.

frontend/modules/core/pages/admin/roles.vue

@@ -13,14 +13,19 @@
             </template>
         </PageHeader>
 
-        <!-- Table des roles -->
+        <!-- Table des roles — pagination serveur via usePaginatedList (#73). -->
         <MalioDataTable
             :columns="columns"
             :items="roleItems"
-            :total-items="roles.length"
+            :total-items="totalItems"
+            :page="currentPage"
+            :per-page="itemsPerPage"
+            :per-page-options="itemsPerPageOptions"
             :row-clickable="canManage"
             :empty-message="t('admin.roles.noRoles')"
             @row-click="onRowClick"
+            @update:page="goToPage"
+            @update:per-page="setItemsPerPage"
         >
             <template #cell-code="{ item }">
                 <span class="font-mono text-xs">{{ item.code }}</span>
@@ -66,8 +71,17 @@ const canManage = computed(() => can('core.roles.manage'))
 
 useHead({ title: t('admin.roles.title') })
 
-const roles = ref<Role[]>([])
-const loading = ref(false)
+// Pagination serveur via le composable partage (#73).
+const {
+    items: roles,
+    totalItems,
+    currentPage,
+    itemsPerPage,
+    itemsPerPageOptions,
+    fetch: loadRoles,
+    goToPage,
+    setItemsPerPage,
+} = usePaginatedList<Role>({ url: '/roles' })
 
 const columns = [
     { key: 'label', label: t('admin.roles.table.label') },
@@ -102,25 +116,6 @@ const deleteModalOpen = ref(false)
 const roleToDelete = ref<Role | null>(null)
 const deleting = ref(false)
 
-// Charger la liste des roles
-async function loadRoles() {
-    loading.value = true
-    try {
-        const data = await api.get<{ member: Role[] }>(
-            '/roles',
-            {},
-            { toast: false },
-        )
-        roles.value = data.member
-    } catch {
-        // Reset sur echec pour ne pas afficher de donnees stale (ancienne
-        // requete reussie avant une perte reseau ou 403).
-        roles.value = []
-    } finally {
-        loading.value = false
-    }
-}
-
 function openCreateDrawer() {
     selectedRole.value = null
     drawerOpen.value = true

frontend/modules/core/pages/admin/users.vue

@@ -2,14 +2,19 @@
     <div>
         <PageHeader>{{ t('admin.users.title') }}</PageHeader>
 
-        <!-- Table des utilisateurs -->
+        <!-- Table des utilisateurs — pagination serveur via usePaginatedList (#73). -->
         <MalioDataTable
             :columns="columns"
             :items="userItems"
-            :total-items="users.length"
+            :total-items="totalItems"
+            :page="currentPage"
+            :per-page="itemsPerPage"
+            :per-page-options="itemsPerPageOptions"
             :row-clickable="canManage"
             :empty-message="t('admin.users.noUsers')"
             @row-click="onRowClick"
+            @update:page="goToPage"
+            @update:per-page="setItemsPerPage"
         >
             <template #cell-admin="{ item }">
                 <span
@@ -34,15 +39,26 @@
 import type { UserListItem } from '~/shared/types/rbac'
 
 const { t } = useI18n()
-const api = useApi()
 const { can } = usePermissions()
 
 useHead({ title: t('admin.users.title') })
 
 const canManage = computed(() => can('core.users.manage'))
 
-const users = ref<UserListItem[]>([])
-const loading = ref(false)
+// Pagination serveur via le composable partage (#73). Le payload `users`
+// reste leger (pas de detail RBAC dans la liste — cf. commentaire colonne
+// "Sites" plus bas) ce qui rend la pagination 10/25/50 par page confortable.
+const {
+    items: users,
+    totalItems,
+    currentPage,
+    itemsPerPage,
+    itemsPerPageOptions,
+    fetch: loadUsers,
+    goToPage,
+    setItemsPerPage,
+} = usePaginatedList<UserListItem>({ url: '/users' })
+
 const drawerOpen = ref(false)
 const selectedUser = ref<UserListItem | null>(null)
 
@@ -67,21 +83,6 @@ const userItems = computed(() =>
     })),
 )
 
-async function loadUsers() {
-    loading.value = true
-    try {
-        const usersData = await api.get<{ member: UserListItem[] }>('/users', {}, { toast: false })
-        users.value = usersData.member
-    } catch {
-        // Reset sur echec pour ne pas afficher de donnees stale (ancienne
-        // requete reussie avant une perte reseau ou 403). Pas de toast par
-        // design ici : on laisse la liste vide parler d'elle-meme.
-        users.value = []
-    } finally {
-        loading.value = false
-    }
-}
-
 function getUserById(id: number): UserListItem | undefined {
     return users.value.find(u => u.id === id)
 }