feat(commercial) : filtres répertoire clients via drawer (recherche, catégories, sites, archivés)

Front :
- Bouton « Filtres » (à droite d'Ajouter) ouvrant un drawer accordion (façon
  audit-log) : Recherche, Catégories (multi), Sites (multi), Statut (archivés).
  État brouillon → appliqué, 100 % local. Compteur de filtres actifs sur le bouton.
- Suppression du toggle « Voir les archivés » (remplacé par le bool du drawer).
- Export et liste partagent les mêmes filtres.
- useClientsRepository redevient un simple wrapper de usePaginatedList.

Back (contrat liste partagé liste + export) :
- createListQueryBuilder : categoryCodes[] (OR), siteIds[] (clients ayant ≥1
  adresse sur le site), archivedOnly (archives seules, prioritaire sur
  includeArchived). search inchangé.
- ClientProvider + ClientExportController lisent les nouveaux params (valeur
  unique ou liste ?key[]=). Tests fonctionnels (catégories multi, site, archivés).

frontend/i18n/locales/fr.json

@@ -49,7 +49,6 @@
             "title": "Répertoire clients",
             "add": "Ajouter",
             "export": "Exporter",
-            "showArchived": "Voir les archivés",
             "empty": "Aucun client pour l'instant.",
             "column": {
                 "companyName": "Nom",
@@ -57,6 +56,16 @@
                 "sites": "Site",
                 "lastActivity": "Dernière activité"
             },
+            "filters": {
+                "title": "Filtres",
+                "search": "Recherche",
+                "categories": "Catégories",
+                "sites": "Sites",
+                "status": "Statut",
+                "archivedOnly": "Voir les archivés",
+                "apply": "Appliquer",
+                "reset": "Réinitialiser"
+            },
             "tab": {
                 "information": "Information",
                 "contact": "Contact",

frontend/modules/commercial/composables/__tests__/useClientsRepository.spec.ts

@@ -29,11 +29,10 @@ describe('useClientsRepository', () => {
         mockGet.mockResolvedValue(makeHydra(25))
     })
 
-    it('charge /clients sans includeArchived par defaut (clients actifs)', async () => {
+    it('cible la ressource /clients en page 1 par defaut', async () => {
         const repo = useClientsRepository()
         await repo.fetch()
 
-        expect(repo.includeArchived.value).toBe(false)
         expect(mockGet).toHaveBeenLastCalledWith(
             '/clients',
             { page: 1, itemsPerPage: 10 },
@@ -41,35 +40,42 @@ describe('useClientsRepository', () => {
         )
     })
 
-    it('pousse le filtre serveur includeArchived=true quand le toggle est actif', async () => {
-        const repo = useClientsRepository()
-        await repo.fetch()
-        await repo.setIncludeArchived(true)
-
-        expect(repo.includeArchived.value).toBe(true)
-        expect(mockGet).toHaveBeenLastCalledWith(
-            '/clients',
-            { includeArchived: true, page: 1, itemsPerPage: 10 },
-            expect.objectContaining({ toast: false }),
-        )
-    })
-
-    it('retombe en page 1 lorsqu on bascule le toggle archives', async () => {
+    it('pousse les filtres du drawer (categories multi, sites, archives) et retombe en page 1', async () => {
         const repo = useClientsRepository()
         await repo.fetch()
         await repo.goToPage(2)
         expect(repo.currentPage.value).toBe(2)
 
-        await repo.setIncludeArchived(true)
+        await repo.setFilters(
+            {
+                search: 'acme',
+                'categoryCode[]': ['DISTRIBUTEUR', 'COURTIER'],
+                'siteId[]': ['1', '2'],
+                archivedOnly: true,
+            },
+            { replace: true },
+        )
+
         expect(repo.currentPage.value).toBe(1)
+        expect(mockGet).toHaveBeenLastCalledWith(
+            '/clients',
+            {
+                search: 'acme',
+                'categoryCode[]': ['DISTRIBUTEUR', 'COURTIER'],
+                'siteId[]': ['1', '2'],
+                archivedOnly: true,
+                page: 1,
+                itemsPerPage: 10,
+            },
+            expect.objectContaining({ toast: false }),
+        )
     })
 
-    it('retire le filtre (query propre) quand le toggle repasse a false', async () => {
+    it('repasse a une query propre apres reinitialisation des filtres', async () => {
         const repo = useClientsRepository()
-        await repo.setIncludeArchived(true)
-        await repo.setIncludeArchived(false)
+        await repo.setFilters({ search: 'acme', archivedOnly: true }, { replace: true })
+        await repo.setFilters({}, { replace: true })
 
-        expect(repo.includeArchived.value).toBe(false)
         expect(mockGet).toHaveBeenLastCalledWith(
             '/clients',
             { page: 1, itemsPerPage: 10 },

frontend/modules/commercial/composables/useClientsRepository.ts

@@ -1,4 +1,3 @@
-import { ref } from 'vue'
 import { usePaginatedList } from '~/shared/composables/usePaginatedList'
 
 /**
@@ -41,11 +40,8 @@ export interface Client {
  * sur la ressource `/clients` (RG-13 : pagination serveur obligatoire ; jamais
  * de chargement integral en memoire).
  *
- * N'ajoute qu'un seul comportement metier : le toggle « Voir les archivés ».
- * Desactive par defaut (la liste n'expose que les clients actifs — RG-1.24).
- * Active, il pousse le filtre serveur `?includeArchived=true` (consomme par le
- * ClientProvider, RG-1.25) et — garantie de `usePaginatedList` — retombe en
- * page 1.
+ * Les filtres (recherche, categories, sites, archives) sont pilotes par la page
+ * via `setFilters` du composable partage — la remise en page 1 est garantie.
  *
  * Volontairement PAR INSTANCE (pas de singleton module-level) : l'etat tableau
  * est propre a l'ecran Repertoire et meurt avec lui, comme tout consommateur de
@@ -53,28 +49,5 @@ export interface Client {
  * gerer.
  */
 export function useClientsRepository() {
-    // Etat local du toggle « Voir les archivés » — JAMAIS reflete dans l'URL
-    // (regle ABSOLUE n°6).
-    const includeArchived = ref(false)
-
-    const list = usePaginatedList<Client>({ url: '/clients' })
-
-    /**
-     * Bascule l'inclusion des clients archives et relance la liste. La remise
-     * en page 1 est assuree par `setFilters` (usePaginatedList). Quand le toggle
-     * repasse a false, on RETIRE le filtre (valeur `undefined`) plutot que
-     * d'envoyer `includeArchived=false`, pour une query propre.
-     */
-    async function setIncludeArchived(value: boolean): Promise<void> {
-        includeArchived.value = value
-        await list.setFilters(
-            value ? { includeArchived: true } : { includeArchived: undefined },
-        )
-    }
-
-    return {
-        ...list,
-        includeArchived,
-        setIncludeArchived,
-    }
+    return usePaginatedList<Client>({ url: '/clients' })
 }

frontend/modules/commercial/pages/clients/index.vue

@@ -11,20 +11,19 @@
                     icon-position="left"
                     @click="goToCreate"
                 />
+                <!-- Bouton Filtres a DROITE d'Ajouter : ouvre le drawer. Le compteur
+                     reflete le nombre de filtres actifs (etat applique). -->
+                <MalioButton
+                    v-if="canView"
+                    variant="tertiary"
+                    :label="filterButtonLabel"
+                    icon-name="mdi:tune"
+                    icon-position="left"
+                    @click="openFilters"
+                />
             </template>
         </PageHeader>
 
-        <!-- Toggle « Voir les archivés » : etat 100 % local (regle ABSOLUE n°6),
-             desactive par defaut (clients actifs uniquement). -->
-        <div class="mb-4">
-            <MalioCheckbox
-                id="clients-include-archived"
-                :label="t('commercial.clients.showArchived')"
-                :model-value="includeArchived"
-                @update:model-value="onToggleArchived"
-            />
-        </div>
-
         <!-- Datatable branchee sur usePaginatedList via useClientsRepository :
              pagination serveur, tri companyName ASC par defaut (cote back). -->
         <MalioDataTable
@@ -65,6 +64,7 @@
                 {{ formatLastActivity(item) }}
             </template>
         </MalioDataTable>
+
         <div class="flex justify-center mt-6">
             <MalioButton
                 v-if="canView"
@@ -74,12 +74,93 @@
                 @click="exportXlsx"
             />
         </div>
+
+        <!-- Drawer de filtres : etat BROUILLON, applique uniquement au clic sur
+             « Appliquer ». Meme pattern que l'audit-log. Etat 100 % local, jamais
+             dans l'URL (regle ABSOLUE n°6). -->
+        <MalioDrawer
+            v-model="filterDrawerOpen"
+            drawer-class="max-w-[450px]"
+            body-class="p-0"
+            footer-class="justify-between border-t border-black p-6"
+        >
+            <template #header>
+                <h2 class="text-[24px] font-bold uppercase">{{ t('commercial.clients.filters.title') }}</h2>
+            </template>
+
+            <MalioAccordion>
+                <!-- Recherche : nom societe + contact + email (param `search`). -->
+                <MalioAccordionItem :title="t('commercial.clients.filters.search')" value="search">
+                    <MalioInputText
+                        v-model="draftSearch"
+                        icon-name="mdi:magnify"
+                    />
+                </MalioAccordionItem>
+
+                <!-- Categories : cases a cocher (multi). Valeur = code stable. -->
+                <MalioAccordionItem :title="t('commercial.clients.filters.categories')" value="categories">
+                    <div class="flex flex-col">
+                        <MalioCheckbox
+                            v-for="opt in categoryOptions"
+                            :id="`filter-category-${opt.value}`"
+                            :key="opt.value"
+                            :label="opt.label"
+                            :model-value="draftCategoryCodes.includes(opt.value)"
+                            @update:model-value="(val: boolean) => toggleCategory(opt.value, val)"
+                        />
+                    </div>
+                </MalioAccordionItem>
+
+                <!-- Sites : cases a cocher (multi). Valeur = id du site. -->
+                <MalioAccordionItem :title="t('commercial.clients.filters.sites')" value="sites">
+                    <div class="flex flex-col">
+                        <MalioCheckbox
+                            v-for="opt in siteOptions"
+                            :id="`filter-site-${opt.value}`"
+                            :key="opt.value"
+                            :label="opt.label"
+                            :model-value="draftSiteIds.includes(opt.value)"
+                            @update:model-value="(val: boolean) => toggleSite(opt.value, val)"
+                        />
+                    </div>
+                </MalioAccordionItem>
+
+                <!-- Statut : bool unique. Coche = archives uniquement, sinon actifs. -->
+                <MalioAccordionItem :title="t('commercial.clients.filters.status')" value="status">
+                    <MalioCheckbox
+                        id="filter-archived-only"
+                        :label="t('commercial.clients.filters.archivedOnly')"
+                        :model-value="draftArchivedOnly"
+                        @update:model-value="(val: boolean) => draftArchivedOnly = val"
+                    />
+                </MalioAccordionItem>
+            </MalioAccordion>
+
+            <template #footer>
+                <MalioButton
+                    variant="tertiary"
+                    :label="t('commercial.clients.filters.reset')"
+                    @click="resetFilters"
+                />
+                <MalioButton
+                    variant="primary"
+                    :label="t('commercial.clients.filters.apply')"
+                    @click="applyFilters"
+                />
+            </template>
+        </MalioDrawer>
     </div>
 </template>
 
 <script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
 import type { Client, ClientSite } from '~/modules/commercial/composables/useClientsRepository'
 
+interface FilterOption {
+    value: string
+    label: string
+}
+
 const { t } = useI18n()
 const api = useApi()
 const router = useRouter()
@@ -88,8 +169,8 @@ const { can } = usePermissions()
 
 useHead({ title: t('commercial.clients.title') })
 
-// Bouton « + Ajouter » reserve a `manage` (POST /clients garde manage seul →
-// Compta / Usine ne creent pas). « Exporter » suit `view`.
+// Bouton « Ajouter » reserve a `manage` (POST /clients garde manage seul →
+// Compta / Usine ne creent pas). « Exporter » et « Filtres » suivent `view`.
 const canManage = computed(() => can('commercial.clients.manage'))
 const canView = computed(() => can('commercial.clients.view'))
 
@@ -99,11 +180,10 @@ const {
     currentPage,
     itemsPerPage,
     itemsPerPageOptions,
-    includeArchived,
     fetch: loadClients,
     goToPage,
     setItemsPerPage,
-    setIncludeArchived,
+    setFilters,
 } = useClientsRepository()
 
 // Mappe les clients en objets « plats » pour MalioDataTable (items typees
@@ -153,12 +233,127 @@ function goToCreate(): void {
     router.push('/clients/new')
 }
 
-function onToggleArchived(value: boolean): void {
-    setIncludeArchived(value)
+// ── Filtres (drawer) ────────────────────────────────────────────────────────
+// Deux niveaux d'etat (pattern audit-log) :
+//  - APPLIED : pilote la liste/l'export + le compteur du bouton. Modifie
+//    uniquement au clic « Appliquer » / « Réinitialiser ».
+//  - DRAFT : edite librement dans le drawer ; recopie vers applied a la validation.
+const filterDrawerOpen = ref(false)
+
+const draftSearch = ref('')
+const draftCategoryCodes = ref<string[]>([])
+const draftSiteIds = ref<string[]>([])
+const draftArchivedOnly = ref(false)
+
+const appliedSearch = ref('')
+const appliedCategoryCodes = ref<string[]>([])
+const appliedSiteIds = ref<string[]>([])
+const appliedArchivedOnly = ref(false)
+
+// Options des selects multi, chargees une fois (referentiels courts).
+const categoryOptions = ref<FilterOption[]>([])
+const siteOptions = ref<FilterOption[]>([])
+
+const activeFilterCount = computed(() => {
+    let count = 0
+    if (appliedSearch.value.trim() !== '') count++
+    if (appliedCategoryCodes.value.length > 0) count++
+    if (appliedSiteIds.value.length > 0) count++
+    if (appliedArchivedOnly.value) count++
+    return count
+})
+
+const filterButtonLabel = computed(() => {
+    const base = t('commercial.clients.filters.title')
+    return activeFilterCount.value > 0 ? `${base} (${activeFilterCount.value})` : base
+})
+
+// Recopie l'etat applique vers le brouillon puis ouvre le drawer : la
+// reouverture reflete les filtres actifs.
+function openFilters(): void {
+    draftSearch.value = appliedSearch.value
+    draftCategoryCodes.value = [...appliedCategoryCodes.value]
+    draftSiteIds.value = [...appliedSiteIds.value]
+    draftArchivedOnly.value = appliedArchivedOnly.value
+    filterDrawerOpen.value = true
 }
 
-// Export XLSX : memes filtres que la vue (includeArchived). La colonne SIREN
-// n'est dans le fichier que si l'utilisateur a accounting.view (gere cote back).
+function toggleCategory(code: string, selected: boolean): void {
+    draftCategoryCodes.value = selected
+        ? [...draftCategoryCodes.value, code]
+        : draftCategoryCodes.value.filter(c => c !== code)
+}
+
+function toggleSite(id: string, selected: boolean): void {
+    draftSiteIds.value = selected
+        ? [...draftSiteIds.value, id]
+        : draftSiteIds.value.filter(s => s !== id)
+}
+
+/**
+ * Construit le payload de filtres serveur a partir de l'etat applique. Cles
+ * `categoryCode[]` / `siteId[]` pour que PHP les parse en tableaux (OR cote back).
+ * Les filtres vides sont omis pour une query propre.
+ */
+function buildFilterPayload(): Record<string, string | string[] | boolean> {
+    const payload: Record<string, string | string[] | boolean> = {}
+    if (appliedSearch.value.trim() !== '') payload.search = appliedSearch.value.trim()
+    if (appliedCategoryCodes.value.length > 0) payload['categoryCode[]'] = [...appliedCategoryCodes.value]
+    if (appliedSiteIds.value.length > 0) payload['siteId[]'] = [...appliedSiteIds.value]
+    if (appliedArchivedOnly.value) payload.archivedOnly = true
+    return payload
+}
+
+// « Appliquer » : recopie brouillon → applied, pousse les filtres (retombe en
+// page 1 via usePaginatedList) et ferme le drawer.
+function applyFilters(): void {
+    appliedSearch.value = draftSearch.value.trim()
+    appliedCategoryCodes.value = [...draftCategoryCodes.value]
+    appliedSiteIds.value = [...draftSiteIds.value]
+    appliedArchivedOnly.value = draftArchivedOnly.value
+
+    setFilters(buildFilterPayload(), { replace: true })
+    filterDrawerOpen.value = false
+}
+
+// « Réinitialiser » : vide brouillon ET applied, recharge la liste complete.
+// Le drawer reste ouvert pour montrer le formulaire vide.
+function resetFilters(): void {
+    draftSearch.value = ''
+    draftCategoryCodes.value = []
+    draftSiteIds.value = []
+    draftArchivedOnly.value = false
+
+    appliedSearch.value = ''
+    appliedCategoryCodes.value = []
+    appliedSiteIds.value = []
+    appliedArchivedOnly.value = false
+
+    setFilters({}, { replace: true })
+}
+
+/** Charge les referentiels du drawer (categories + sites) via ?pagination=false. */
+async function loadFilterOptions(): Promise<void> {
+    const [cats, sites] = await Promise.all([
+        api.get<{ member?: Array<{ code: string, name: string }> }>(
+            '/categories',
+            { pagination: 'false' },
+            { headers: { Accept: 'application/ld+json' }, toast: false },
+        ),
+        api.get<{ member?: Array<{ id: number, name: string }> }>(
+            '/sites',
+            { pagination: 'false' },
+            { headers: { Accept: 'application/ld+json' }, toast: false },
+        ),
+    ])
+
+    categoryOptions.value = (cats.member ?? []).map(c => ({ value: c.code, label: c.name }))
+    siteOptions.value = (sites.member ?? []).map(s => ({ value: String(s.id), label: s.name }))
+}
+
+// ── Export XLSX ─────────────────────────────────────────────────────────────
+// Memes filtres que la vue. La colonne SIREN n'est dans le fichier que si
+// l'utilisateur a accounting.view (gere cote back).
 const exporting = ref(false)
 
 async function exportXlsx(): Promise<void> {
@@ -167,16 +362,11 @@ async function exportXlsx(): Promise<void> {
     }
     exporting.value = true
     try {
-        const query: Record<string, unknown> = {}
-        if (includeArchived.value) {
-            query.includeArchived = true
-        }
-
         // useApi type ses options en JSON ; l'export renvoie un binaire, donc on
         // force responseType:'blob' (transmis tel quel a ofetch au runtime). Cast
         // contenu faute d'overload blob sur le client partage — a generaliser via
         // un ticket dedie si d'autres exports binaires arrivent.
-        const blob = await api.get<Blob>('/clients/export.xlsx', query, {
+        const blob = await api.get<Blob>('/clients/export.xlsx', buildFilterPayload(), {
             responseType: 'blob',
             toast: false,
         } as unknown as Parameters<typeof api.get>[2])
@@ -208,5 +398,11 @@ function triggerDownload(blob: Blob, filename: string): void {
 
 onMounted(() => {
     loadClients()
+    // Echec du chargement des referentiels non bloquant : la liste s'affiche,
+    // l'utilisateur perd juste les options de filtre.
+    loadFilterOptions().catch(() => {
+        categoryOptions.value = []
+        siteOptions.value = []
+    })
 })
 </script>