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/catalog/composables/__tests__/useCategoriesAdmin.spec.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest'
-import type { Category, CategoryType } from '~/modules/catalog/types/category'
+import type { CategoryType } from '~/modules/catalog/types/category'
 import type { HydraCollection } from '~/shared/utils/api'
 
 // Mock du store auth : useCategoriesAdmin s'auto-enregistre via
@@ -28,27 +28,6 @@ const { useCategoriesAdmin } = await import('../useCategoriesAdmin')
 const TYPE_VENTE: CategoryType = { id: 1, code: 'VENTE', label: 'Vente' }
 const TYPE_ACHAT: CategoryType = { id: 2, code: 'ACHAT', label: 'Achat' }
 
-const CAT_A: Category = {
-    id: 10,
-    name: 'Vis',
-    categoryType: TYPE_VENTE,
-    deletedAt: null,
-    createdAt: '2026-01-01T10:00:00+00:00',
-    updatedAt: '2026-01-01T10:00:00+00:00',
-    createdBy: null,
-    updatedBy: null,
-}
-const CAT_B: Category = {
-    id: 11,
-    name: 'Boulons',
-    categoryType: TYPE_VENTE,
-    deletedAt: null,
-    createdAt: '2026-01-02T10:00:00+00:00',
-    updatedAt: '2026-01-02T10:00:00+00:00',
-    createdBy: null,
-    updatedBy: null,
-}
-
 function makeHydra<T>(items: T[]): HydraCollection<T> {
     return {
         totalItems: items.length,
@@ -56,113 +35,32 @@ function makeHydra<T>(items: T[]): HydraCollection<T> {
     }
 }
 
+/**
+ * Apres ERP-73, `useCategoriesAdmin` ne porte plus la liste paginee des
+ * categories (elle est geree par `usePaginatedList<Category>` cote page).
+ * Le composable se concentre sur le referentiel CategoryType (lecture
+ * seule, ≤ 5 entrees connues) charge en une fois via `?pagination=false`.
+ */
 describe('useCategoriesAdmin', () => {
     beforeEach(() => {
         mockGet.mockReset()
         // Reset systematique du state singleton entre tests : sans ca,
-        // les categories chargees dans un test fuiteraient dans le suivant.
+        // les types charges dans un test fuiteraient dans le suivant.
         const { resetCategoriesAdmin } = useCategoriesAdmin()
         resetCategoriesAdmin()
     })
 
-    describe('fetchAll', () => {
-        it('appelle GET /categories avec itemsPerPage=999 par defaut', async () => {
-            mockGet.mockResolvedValueOnce(makeHydra<Category>([]))
-            const { fetchAll } = useCategoriesAdmin()
-
-            await fetchAll()
-
-            expect(mockGet).toHaveBeenCalledTimes(1)
-            expect(mockGet).toHaveBeenCalledWith(
-                '/categories',
-                { itemsPerPage: 999 },
-                { toast: false },
-            )
-        })
-
-        it('peuple categories.value depuis le champ Hydra member', async () => {
-            mockGet.mockResolvedValueOnce(makeHydra([CAT_A, CAT_B]))
-            const { fetchAll, categories } = useCategoriesAdmin()
-
-            await fetchAll()
-
-            expect(categories.value).toEqual([CAT_A, CAT_B])
-        })
-
-        it('exclut les soft-deleted par defaut (pas de query includeDeleted)', async () => {
-            mockGet.mockResolvedValueOnce(makeHydra<Category>([]))
-            const { fetchAll } = useCategoriesAdmin()
-
-            await fetchAll()
-
-            const queryArg = mockGet.mock.calls[0]?.[1] as Record<string, unknown>
-            expect(queryArg).not.toHaveProperty('includeDeleted')
-        })
-
-        it('ajoute includeDeleted=true quand demande explicitement', async () => {
-            mockGet.mockResolvedValueOnce(makeHydra<Category>([]))
-            const { fetchAll } = useCategoriesAdmin()
-
-            await fetchAll(true)
-
-            expect(mockGet).toHaveBeenCalledWith(
-                '/categories',
-                { itemsPerPage: 999, includeDeleted: 'true' },
-                { toast: false },
-            )
-        })
-
-        it('passe loading a true pendant la requete et false apres', async () => {
-            let resolveRequest: (v: HydraCollection<Category>) => void = () => {}
-            mockGet.mockImplementationOnce(
-                () => new Promise((resolve) => { resolveRequest = resolve }),
-            )
-            const { fetchAll, loading } = useCategoriesAdmin()
-
-            const pending = fetchAll()
-            expect(loading.value).toBe(true)
-
-            resolveRequest(makeHydra<Category>([]))
-            await pending
-
-            expect(loading.value).toBe(false)
-        })
-
-        it('peuple error.value et vide categories en cas d echec', async () => {
-            mockGet.mockRejectedValueOnce(new Error('Network down'))
-            const { fetchAll, categories, error, loading } = useCategoriesAdmin()
-            // Pre-charge volontairement quelque chose pour verifier la purge.
-            categories.value = [CAT_A]
-
-            await fetchAll()
-
-            expect(categories.value).toEqual([])
-            expect(error.value).toBe('Network down')
-            expect(loading.value).toBe(false)
-        })
-
-        it('gere une reponse sans champ member (fallback tableau vide)', async () => {
-            mockGet.mockResolvedValueOnce({
-                totalItems: 0,
-            } as unknown as HydraCollection<Category>)
-            const { fetchAll, categories } = useCategoriesAdmin()
-
-            await fetchAll()
-
-            expect(categories.value).toEqual([])
-        })
-    })
-
     describe('fetchTypes', () => {
-        it('appelle GET /category_types avec itemsPerPage=999', async () => {
+        it('appelle GET /category_types avec ?pagination=false (echappatoire selects)', async () => {
             mockGet.mockResolvedValueOnce(makeHydra<CategoryType>([]))
             const { fetchTypes } = useCategoriesAdmin()
 
             await fetchTypes()
 
+            expect(mockGet).toHaveBeenCalledTimes(1)
             expect(mockGet).toHaveBeenCalledWith(
                 '/category_types',
-                { itemsPerPage: 999 },
+                { pagination: 'false' },
                 { toast: false },
             )
         })
@@ -203,48 +101,55 @@ describe('useCategoriesAdmin', () => {
 
             expect(loadingTypes.value).toBe(false)
         })
+
+        it('gere une reponse sans champ member (fallback tableau vide)', async () => {
+            mockGet.mockResolvedValueOnce({
+                totalItems: 0,
+            } as unknown as HydraCollection<CategoryType>)
+            const { fetchTypes, types } = useCategoriesAdmin()
+
+            await fetchTypes()
+
+            expect(types.value).toEqual([])
+        })
     })
 
     describe('resetCategoriesAdmin', () => {
-        it('vide categories, types, loading, loadingTypes et error', () => {
-            const { resetCategoriesAdmin, categories, types, loading, loadingTypes, error }
+        it('vide types, loadingTypes et error', () => {
+            const { resetCategoriesAdmin, types, loadingTypes, error }
                 = useCategoriesAdmin()
             // Pre-peuple le state pour verifier la purge effective.
-            categories.value = [CAT_A]
             types.value = [TYPE_VENTE]
-            loading.value = true
             loadingTypes.value = true
             error.value = 'oops'
 
             resetCategoriesAdmin()
 
-            expect(categories.value).toEqual([])
             expect(types.value).toEqual([])
-            expect(loading.value).toBe(false)
             expect(loadingTypes.value).toBe(false)
             expect(error.value).toBeNull()
         })
     })
 
     describe('singleton', () => {
-        it('deux appels a useCategoriesAdmin() partagent la meme ref categories', () => {
+        it('deux appels a useCategoriesAdmin() partagent la meme ref types', () => {
             const a = useCategoriesAdmin()
             const b = useCategoriesAdmin()
 
             // Les fonctions sont reinstanciees a chaque appel mais les refs
             // doivent etre rigoureusement les memes (state au niveau module).
-            expect(a.categories).toBe(b.categories)
             expect(a.types).toBe(b.types)
-            expect(a.loading).toBe(b.loading)
+            expect(a.loadingTypes).toBe(b.loadingTypes)
+            expect(a.error).toBe(b.error)
         })
 
         it('une mutation via une instance est visible depuis une autre instance', () => {
             const a = useCategoriesAdmin()
             const b = useCategoriesAdmin()
 
-            a.categories.value = [CAT_A]
+            a.types.value = [TYPE_VENTE]
 
-            expect(b.categories.value).toEqual([CAT_A])
+            expect(b.types.value).toEqual([TYPE_VENTE])
         })
     })
 })

frontend/modules/catalog/composables/useCategoriesAdmin.ts

@@ -1,96 +1,56 @@
 /**
- * Composable d'administration des categories (M0 — Gestion des categories).
+ * Composable de chargement du referentiel CategoryType (M0 — Gestion des
+ * categories).
  *
- * Centralise le chargement et le state des deux ressources lues par la page
- * `/admin/categories` : la liste des categories et le referentiel
- * CategoryType (utilise dans le select du drawer).
+ * Apres ERP-73 (composable de liste paginee), la liste des categories
+ * elle-meme passe par `usePaginatedList<Category>` directement dans
+ * `admin/categories.vue` — c'est un etat propre a la page (pagination,
+ * filtres, tri locaux). Ce composable se concentre donc sur le
+ * referentiel CategoryType : petite collection lue une fois et reutilisee
+ * dans le drawer (select de type) → singleton volontaire pour eviter de
+ * la recharger a chaque ouverture du drawer.
  *
- * State singleton au niveau module (meme convention que `useSidebar` /
- * `useModules` / `useAuditLog`) : reset automatique au logout via
- * `onAuthSessionCleared` (cf. CLAUDE.md regle frontend.md : « composables
- * avec state singleton doivent etre reinitialises au logout »), et reset
- * explicite expose via `resetCategoriesAdmin()` appele depuis
- * `modules/core/pages/logout.vue`.
+ * State singleton au niveau module : reset automatique au logout via
+ * `onAuthSessionCleared` (cf. CLAUDE.md regle frontend.md), et reset
+ * explicite via `resetCategoriesAdmin()` appele depuis logout.vue.
  */
 import { ref } from 'vue'
-import type { Category, CategoryType } from '~/modules/catalog/types/category'
+import type { CategoryType } from '~/modules/catalog/types/category'
 import type { HydraCollection } from '~/shared/utils/api'
 import { onAuthSessionCleared } from '~/shared/stores/auth'
 
 /**
- * Dette M0 : pas de pagination serveur sur les ressources Catalog (volumetrie
- * cible ≤ 300). On force une page geante via `itemsPerPage` pour recuperer
- * toute la liste en un coup. A basculer en pagination serveur quand la
- * volumetrie reelle depassera ce plafond — meme pattern que sites.vue.
+ * CategoryType est un referentiel lecture-seule (RG-1.06) avec une
+ * cardinalite minuscule (≤ 5 entrees connues). On force `pagination=false`
+ * pour recuperer toutes les entrees en un appel et alimenter le select du
+ * drawer sans pagination — echappatoire prevue par
+ * `pagination_client_enabled: true` cote API Platform.
  */
-const HYDRA_NO_PAGINATION = 999
+const NO_PAGINATION_QUERY = { pagination: 'false' } as const
 
-// State singleton — partage entre tous les composants qui appellent le
-// composable dans la meme session. Les refs sont declarees au niveau module
-// (pas dans la fonction `useCategoriesAdmin()`) pour eviter qu'une nouvelle
-// instance soit creee a chaque appel.
-const categories = ref<Category[]>([])
 const types = ref<CategoryType[]>([])
-const loading = ref(false)
 const loadingTypes = ref(false)
 const error = ref<string | null>(null)
 
 function resetCategoriesAdminState(): void {
-    categories.value = []
     types.value = []
-    loading.value = false
     loadingTypes.value = false
     error.value = null
 }
 
-// Auto-enregistrement singleton : purge le state sur 401/clearSession pour
-// eviter qu'un user suivant (connecte sur le meme onglet) voie l'etat de
-// l'ancien. Le logout volontaire (page logout.vue) appelle directement
-// `resetCategoriesAdmin()` ci-dessous.
+// Auto-enregistrement singleton : purge le state sur 401/clearSession
+// pour eviter qu'un user suivant (connecte sur le meme onglet) voie le
+// referentiel de l'ancien tenant. Le logout volontaire (page logout.vue)
+// appelle directement `resetCategoriesAdmin()` ci-dessous.
 onAuthSessionCleared(resetCategoriesAdminState)
 
 export function useCategoriesAdmin() {
     const api = useApi()
 
     /**
-     * Charge la liste des categories. Le serveur exclut les soft-deleted par
-     * defaut (RG-1.08) et trie par name ASC (RG-1.10). Pas de pagination
-     * serveur (volumetrie ≤ 300, pagination front via MalioDataTable).
-     *
-     * `includeDeleted=true` permet a un user avec `catalog.categories.manage`
-     * de voir les soft-deleted (RG-1.09) — au M0 la page n'utilise pas cette
-     * option mais on l'expose pour la suite (corbeille future).
-     *
-     * Swallow volontaire : un 403 (user sans permission view) ne doit pas
-     * toaster — la sidebar masque deja l'entree pour ces users, on tombe sur
-     * la page seulement par URL directe et on affiche un tableau vide propre.
-     */
-    async function fetchAll(includeDeleted = false): Promise<void> {
-        loading.value = true
-        error.value = null
-        try {
-            const query: Record<string, unknown> = { itemsPerPage: HYDRA_NO_PAGINATION }
-            if (includeDeleted) {
-                query.includeDeleted = 'true'
-            }
-            const data = await api.get<HydraCollection<Category>>(
-                '/categories',
-                query,
-                { toast: false },
-            )
-            categories.value = data.member ?? []
-        } catch (e) {
-            categories.value = []
-            error.value = (e as Error)?.message ?? 'Erreur de chargement'
-        } finally {
-            loading.value = false
-        }
-    }
-
-    /**
-     * Charge le referentiel CategoryType (lecture seule, RG-1.06). Appele a
-     * l'ouverture de la page admin pour que le select du drawer ait deja les
-     * options pretes au moment de la creation/edition.
+     * Charge le referentiel CategoryType. Appele a l'ouverture de la page
+     * admin pour que le select du drawer ait deja les options pretes au
+     * moment de la creation/edition.
      *
      * Toast desactive : on stocke l'erreur dans `error` plutot que de
      * spammer un toast — le drawer affichera l'erreur inline s'il y a lieu.
@@ -100,7 +60,7 @@ export function useCategoriesAdmin() {
         try {
             const data = await api.get<HydraCollection<CategoryType>>(
                 '/category_types',
-                { itemsPerPage: HYDRA_NO_PAGINATION },
+                NO_PAGINATION_QUERY,
                 { toast: false },
             )
             types.value = data.member ?? []
@@ -113,21 +73,18 @@ export function useCategoriesAdmin() {
     }
 
     /**
-     * Reset explicite — appele depuis `logout.vue` apres `auth.logout()` pour
-     * garantir que la prochaine session reparte sur un state propre meme si
-     * `clearSession()` n'a pas ete declenche (cas logout volontaire).
+     * Reset explicite — appele depuis `logout.vue` apres `auth.logout()`
+     * pour garantir que la prochaine session reparte sur un state propre
+     * meme si `clearSession()` n'a pas ete declenche (cas logout volontaire).
      */
     function resetCategoriesAdmin(): void {
         resetCategoriesAdminState()
     }
 
     return {
-        categories,
         types,
-        loading,
         loadingTypes,
         error,
-        fetchAll,
         fetchTypes,
         resetCategoriesAdmin,
     }

frontend/modules/catalog/pages/admin/categories.vue

@@ -13,18 +13,23 @@
             </template>
         </PageHeader>
 
-        <!-- Table des categories. Affichage exhaustif (volumetrie cible
-             <= 300, cf. spec § 4.1) — tri 100% serveur via CategoryProvider
-             (name ASC, RG-1.10). La barre de pagination du MalioDataTable
-             reste cosmetique tant qu'aucun slice client n'est cable : a
-             traiter cote @malio/layer-ui le jour ou la volumetrie monte. -->
+        <!-- Table des categories. Tri serveur (name ASC, RG-1.10) +
+             pagination serveur via usePaginatedList (#73). Le composable
+             remplace l'ancien chargement « tout en un coup » a volumetrie
+             cible ≤ 300 — la pagination est desormais alignee sur la regle
+             projet (toute collection paginee, regle ABSOLUE n°13). -->
         <MalioDataTable
             :columns="columns"
             :items="categoryItems"
-            :total-items="categories.length"
+            :total-items="totalItems"
+            :page="currentPage"
+            :per-page="itemsPerPage"
+            :per-page-options="itemsPerPageOptions"
             :row-clickable="true"
             :empty-message="t('admin.categories.noCategories')"
             @row-click="onRowClick"
+            @update:page="goToPage"
+            @update:per-page="setItemsPerPage"
         />
 
         <!-- Drawer creation / consultation / edition. -->
@@ -50,13 +55,27 @@ import type { Category } from '~/modules/catalog/types/category'
 
 const { t } = useI18n()
 const { can } = usePermissions()
-const { categories, fetchAll, fetchTypes } = useCategoriesAdmin()
+const { fetchTypes } = useCategoriesAdmin()
 const { submitDelete } = useCategoryForm()
 
 useHead({ title: t('admin.categories.title') })
 
 const canManage = computed(() => can('catalog.categories.manage'))
 
+// Pagination serveur via le composable partage (#73). Le CategoryProvider
+// applique deja name ASC (RG-1.10) — pas besoin de defaultSort cote front
+// tant qu'aucun OrderFilter n'est expose.
+const {
+    items: categories,
+    totalItems,
+    currentPage,
+    itemsPerPage,
+    itemsPerPageOptions,
+    fetch: fetchCategories,
+    goToPage,
+    setItemsPerPage,
+} = usePaginatedList<Category>({ url: '/categories' })
+
 const drawerOpen = ref(false)
 const selectedCategory = ref<Category | null>(null)
 const deleteModalOpen = ref(false)
@@ -118,7 +137,7 @@ async function handleDelete(): Promise<void> {
             deleteModalOpen.value = false
             categoryToDelete.value = null
             drawerOpen.value = false
-            await fetchAll()
+            await fetchCategories()
         }
     } finally {
         deleting.value = false
@@ -126,14 +145,14 @@ async function handleDelete(): Promise<void> {
 }
 
 function onCategorySaved() {
-    fetchAll()
+    fetchCategories()
 }
 
 // Chargement initial des deux ressources (liste + referentiel des types).
 // Le referentiel est pre-charge ici (et pas dans le drawer) pour que le
 // select soit pret au moment ou l'utilisateur clique sur « + Ajouter ».
 onMounted(() => {
-    fetchAll()
+    fetchCategories()
     fetchTypes()
 })
 </script>