feat(catalog) : M7 — page liste des stockages /admin/storages (ERP-216)

- Page /admin/storages (MalioDataTable + usePaginatedList), colonnes Nom (displayName, RG-7.05) et Site, gate catalog.storages.view - Bouton Ajouter (catalog.storages.manage) → /admin/storages/new, clic ligne → /admin/storages/{id}/edit - Export XLSX via useApi() et drawer de filtres (search, type, état, sites), état 100 % local - Type Storage, libellés i18n, item sidebar « Catalogue stockages » sous Catalogue produits - Tests Vitest de la page (mapping colonnes, gates, navigation, export, filtres)
2026-06-30 10:45:00 +02:00
parent 444d118e4f
commit fd6b7e4c79
5 changed files with 747 additions and 11 deletions
@@ -144,6 +144,16 @@ return [
                'module'     => 'catalog',
                'permission' => 'catalog.products.view',
            ],
+            // Stockage (M7, ERP-210). Admin-only : gate par `catalog.storages.view`
+            // et son module owner `catalog`. Reutilise le referentiel StorageType
+            // du M6. Place juste sous le Catalogue produits (items Catalog groupes).
+            [
+                'label'      => 'sidebar.catalog.storages',
+                'to'         => '/admin/storages',
+                'icon'       => 'mdi:warehouse',
+                'module'     => 'catalog',
+                'permission' => 'catalog.storages.view',
+            ],
            [
                'label'      => 'sidebar.core.roles',
                'to'         => '/admin/roles',
@@ -172,16 +182,6 @@ return [
                'module'     => 'catalog',
                'permission' => 'catalog.categories.view',
            ],
-            // Stockage (M7, ERP-210). Admin-only : gate par `catalog.storages.view`
-            // et son module owner `catalog`. Reutilise le referentiel StorageType
-            // du M6. Place pres des autres items Catalog (produits, categories).
-            [
-                'label'      => 'sidebar.catalog.storages',
-                'to'         => '/admin/storages',
-                'icon'       => 'mdi:warehouse',
-                'module'     => 'catalog',
-                'permission' => 'catalog.storages.view',
-            ],
            [
                'label'      => 'sidebar.core.audit_log',
                'to'         => '/admin/audit-log',
@@ -54,7 +54,7 @@
        "catalog": {
            "categories": "Gestion des catégories",
            "products": "Catalogue produits",
-            "storages": "Gestion des stockages"
+            "storages": "Catalogue stockages"
        }
    },
    "dashboard": {
@@ -1091,6 +1091,36 @@
                "createSuccess": "Produit créé avec succès",
                "updateSuccess": "Produit mis à jour avec succès"
            }
+        },
+        "storages": {
+            "title": "Gestion des stockages",
+            "add": "Ajouter",
+            "export": "Exporter",
+            "empty": "Aucun stockage pour l'instant.",
+            "column": {
+                "name": "Nom",
+                "site": "Site"
+            },
+            "state": {
+                "RECEPTION": "Réception",
+                "PRODUCTION": "Production",
+                "TRIAGE": "Triage"
+            },
+            "filters": {
+                "title": "Filtres",
+                "search": "Recherche",
+                "type": "Type de stockage",
+                "typeAll": "Tous les types",
+                "state": "État",
+                "stateAll": "Tous les états",
+                "site": "Sites",
+                "apply": "Voir les résultats",
+                "reset": "Réinitialiser"
+            },
+            "toast": {
+                "error": "Une erreur est survenue. Réessayez.",
+                "exportError": "L'export du répertoire stockage a échoué. Réessayez."
+            }
        }
    }
 }
@@ -0,0 +1,270 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { mount, flushPromises } from '@vue/test-utils'
+import { defineComponent, h, ref } from 'vue'
+
+// ── Auto-imports Nuxt stubbes globalement ───────────────────────────────────
+// La page ne les importe pas (auto-import) : on les expose en globals pour le
+// runtime de test (happy-dom). Meme philosophie que la spec Catalogue produit.
+const mockPush = vi.hoisted(() => vi.fn())
+const mockApiGet = vi.hoisted(() => vi.fn())
+const mockCan = vi.hoisted(() => vi.fn())
+const mockSetFilters = vi.hoisted(() => vi.fn())
+const mockFetch = vi.hoisted(() => vi.fn())
+const mockToastError = vi.hoisted(() => vi.fn())
+
+vi.stubGlobal('useI18n', () => ({ t: (key: string) => key }))
+vi.stubGlobal('useHead', () => undefined)
+vi.stubGlobal('useApi', () => ({ get: mockApiGet }))
+vi.stubGlobal('useRouter', () => ({ push: mockPush }))
+vi.stubGlobal('useToast', () => ({ error: mockToastError, success: vi.fn() }))
+vi.stubGlobal('usePermissions', () => ({ can: mockCan }))
+// usePaginatedList est l'auto-import pilotant la liste : on controle items +
+// setFilters + fetch. La ligne reproduit le contrat JSON reel (§ 4.0.bis) :
+// site et storageType embarques, displayName virtuel (RG-7.05).
+vi.stubGlobal('usePaginatedList', () => ({
+    items: ref<Array<Record<string, unknown>>>([
+        {
+            id: 42,
+            numero: '12',
+            states: ['RECEPTION', 'PRODUCTION'],
+            displayName: 'Cellule 12',
+            site: { '@id': '/api/sites/1', id: 1, name: 'Chatellerault', code: '86' },
+            storageType: { '@id': '/api/storage_types/9', id: 9, code: 'CELLULE', label: 'Cellule' },
+        },
+    ]),
+    totalItems: ref(1),
+    currentPage: ref(1),
+    itemsPerPage: ref(10),
+    itemsPerPageOptions: ref([10, 25, 50]),
+    fetch: mockFetch,
+    goToPage: vi.fn(),
+    setItemsPerPage: vi.fn(),
+    setFilters: mockSetFilters,
+}))
+
+// happy-dom n'implemente pas createObjectURL : on ajoute les methodes statiques
+// sur la classe URL existante (sans la remplacer — sinon `new URL()` casse).
+globalThis.URL.createObjectURL = vi.fn(() => 'blob:fake')
+globalThis.URL.revokeObjectURL = vi.fn()
+
+// Import APRES les stubs (la page resout les auto-imports au top-level du module).
+const StoragesIndex = (await import('../admin/storages/index.vue')).default
+
+// ── Stubs de composants ──────────────────────────────────────────────────────
+const ButtonStub = defineComponent({
+    props: { label: { type: String, default: '' }, disabled: { type: Boolean, default: false } },
+    emits: ['click'],
+    setup(props, { emit }) {
+        return () => h('button', { 'data-label': props.label, onClick: () => emit('click') }, props.label)
+    },
+})
+
+const DataTableStub = defineComponent({
+    props: { items: { type: Array, default: () => [] } },
+    emits: ['row-click', 'update:page', 'update:per-page'],
+    setup(props, { emit }) {
+        return () => h('div', { 'data-testid': 'datatable' },
+            (props.items as Array<Record<string, unknown>>).map(it =>
+                h('tr', {
+                    'data-row-id': it.id,
+                    'data-name': it.displayName,
+                    'data-site': it.siteLabel,
+                    'onClick': () => emit('row-click', it),
+                }),
+            ),
+        )
+    },
+})
+
+const DrawerStub = defineComponent({
+    props: { modelValue: { type: Boolean, default: false } },
+    setup(_, { slots }) {
+        return () => h('div', {}, [slots.header?.(), slots.default?.(), slots.footer?.()])
+    },
+})
+
+const SlotStub = defineComponent({ setup(_, { slots }) { return () => h('div', {}, slots.default?.()) } })
+
+const PageHeaderStub = defineComponent({
+    setup(_, { slots }) { return () => h('div', {}, [slots.default?.(), slots.actions?.()]) },
+})
+
+const CheckboxStub = defineComponent({
+    props: { id: { type: String, default: '' }, modelValue: { type: Boolean, default: false } },
+    emits: ['update:model-value'],
+    setup(props, { emit }) {
+        return () => h('input', {
+            'type': 'checkbox',
+            'data-id': props.id,
+            'onChange': (e: Event) => emit('update:model-value', (e.target as HTMLInputElement).checked),
+        })
+    },
+})
+
+const SelectStub = defineComponent({
+    props: {
+        modelValue: { type: [String, Number, null] as unknown as () => string | number | null, default: null },
+        options: { type: Array, default: () => [] },
+        emptyOptionLabel: { type: String, default: '' },
+    },
+    emits: ['update:model-value'],
+    setup(props, { emit }) {
+        return () => h('select', {
+            'data-empty-label': props.emptyOptionLabel,
+            'onChange': (e: Event) => emit('update:model-value', (e.target as HTMLSelectElement).value),
+        }, (props.options as Array<{ value: string | number, label: string }>).map(o =>
+            h('option', { value: o.value }, o.label),
+        ))
+    },
+})
+
+const InputTextStub = defineComponent({ setup() { return () => h('input') } })
+
+function mountPage() {
+    return mount(StoragesIndex, {
+        global: {
+            stubs: {
+                PageHeader: PageHeaderStub,
+                MalioButton: ButtonStub,
+                MalioDataTable: DataTableStub,
+                MalioDrawer: DrawerStub,
+                MalioAccordion: SlotStub,
+                MalioAccordionItem: SlotStub,
+                MalioInputText: InputTextStub,
+                MalioSelect: SelectStub,
+                MalioCheckbox: CheckboxStub,
+            },
+        },
+    })
+}
+
+describe('Répertoire stockage (page /admin/storages)', () => {
+    beforeEach(() => {
+        mockPush.mockReset()
+        mockApiGet.mockReset().mockImplementation((url: string) => {
+            if (url === '/storage_types') {
+                return Promise.resolve({ member: [{ '@id': '/api/storage_types/9', id: 9, label: 'Cellule' }] })
+            }
+            if (url === '/sites') {
+                return Promise.resolve({ member: [{ id: 1, name: 'Chatellerault' }] })
+            }
+            return Promise.resolve({ member: [] })
+        })
+        mockCan.mockReset().mockReturnValue(true)
+        mockSetFilters.mockReset()
+        mockFetch.mockReset()
+        mockToastError.mockReset()
+    })
+
+    it('charge la liste au montage', async () => {
+        mountPage()
+        await flushPromises()
+        expect(mockFetch).toHaveBeenCalled()
+    })
+
+    it('mappe les colonnes Nom / Site sur le JSON réel (§ 4.0.bis)', async () => {
+        const wrapper = mountPage()
+        await flushPromises()
+        const row = wrapper.find('tr[data-row-id="42"]')
+        // displayName = libelle type + numero (RG-7.05).
+        expect(row.attributes('data-name')).toBe('Cellule 12')
+        // Site formate « Nom (Code) », miroir de l'export back.
+        expect(row.attributes('data-site')).toBe('Chatellerault (86)')
+    })
+
+    it('affiche « + Ajouter » uniquement avec la permission manage', async () => {
+        mockCan.mockImplementation((perm: string) => perm === 'catalog.storages.manage')
+        const wrapper = mountPage()
+        await flushPromises()
+        expect(wrapper.find('[data-label="admin.storages.add"]').exists()).toBe(true)
+    })
+
+    it('masque « + Ajouter » sans la permission manage (view seul)', async () => {
+        mockCan.mockImplementation((perm: string) => perm === 'catalog.storages.view')
+        const wrapper = mountPage()
+        await flushPromises()
+        expect(wrapper.find('[data-label="admin.storages.add"]').exists()).toBe(false)
+    })
+
+    it('navigue vers l\'édition au clic sur une ligne', async () => {
+        const wrapper = mountPage()
+        await flushPromises()
+        await wrapper.find('tr[data-row-id="42"]').trigger('click')
+        expect(mockPush).toHaveBeenCalledWith('/admin/storages/42/edit')
+    })
+
+    it('navigue vers la création au clic sur « + Ajouter »', async () => {
+        const wrapper = mountPage()
+        await flushPromises()
+        await wrapper.find('[data-label="admin.storages.add"]').trigger('click')
+        expect(mockPush).toHaveBeenCalledWith('/admin/storages/new')
+    })
+
+    it('appelle l\'export XLSX sur /storages/export.xlsx en blob', async () => {
+        const wrapper = mountPage()
+        await flushPromises()
+        await wrapper.find('[data-label="admin.storages.export"]').trigger('click')
+        await flushPromises()
+        expect(mockApiGet).toHaveBeenCalledWith(
+            '/storages/export.xlsx',
+            expect.any(Object),
+            expect.objectContaining({ responseType: 'blob', toast: false }),
+        )
+    })
+
+    it('répercute les sites cochés dans setFilters (filtre multi, clé siteId[])', async () => {
+        const wrapper = mountPage()
+        await flushPromises()
+
+        await wrapper.find('input[data-id="filter-site-1"]').setValue(true)
+        await wrapper.find('[data-label="admin.storages.filters.apply"]').trigger('click')
+
+        expect(mockSetFilters).toHaveBeenLastCalledWith(
+            { 'siteId[]': ['1'] },
+            { replace: true },
+        )
+        // Etat 100 % local (regle n°6) : aucune navigation/query string declenchee.
+        expect(mockPush).not.toHaveBeenCalled()
+    })
+
+    it('répercute l\'état sélectionné dans setFilters (param state)', async () => {
+        const wrapper = mountPage()
+        await flushPromises()
+
+        await wrapper.find('select[data-empty-label="admin.storages.filters.stateAll"]').setValue('RECEPTION')
+        await wrapper.find('[data-label="admin.storages.filters.apply"]').trigger('click')
+
+        expect(mockSetFilters).toHaveBeenLastCalledWith(
+            { state: 'RECEPTION' },
+            { replace: true },
+        )
+    })
+
+    it('répercute le type sélectionné dans setFilters (param storageTypeId)', async () => {
+        const wrapper = mountPage()
+        await flushPromises()
+
+        await wrapper.find('select[data-empty-label="admin.storages.filters.typeAll"]').setValue('9')
+        await wrapper.find('[data-label="admin.storages.filters.apply"]').trigger('click')
+
+        expect(mockSetFilters).toHaveBeenLastCalledWith(
+            { storageTypeId: '9' },
+            { replace: true },
+        )
+    })
+
+    it('badge filtres actifs + Réinitialiser vide l\'état appliqué', async () => {
+        const wrapper = mountPage()
+        await flushPromises()
+
+        await wrapper.find('input[data-id="filter-site-1"]').setValue(true)
+        await wrapper.find('[data-label="admin.storages.filters.apply"]').trigger('click')
+
+        // Le libelle du bouton Filtrer porte le compteur (1 filtre actif).
+        expect(wrapper.find('[data-label="admin.storages.filters.title (1)"]').exists()).toBe(true)
+
+        // Réinitialiser → query propre (setFilters avec objet vide).
+        await wrapper.find('[data-label="admin.storages.filters.reset"]').trigger('click')
+        expect(mockSetFilters).toHaveBeenLastCalledWith({}, { replace: true })
+    })
+})
@@ -0,0 +1,386 @@
+<template>
+    <div>
+        <PageHeader>
+            {{ t('admin.storages.title') }}
+            <template #actions>
+                <!-- gap-8 = 32px d'espacement entre Filtrer et Ajouter (meme
+                     design que le Catalogue produit / les repertoires M1→M5). -->
+                <div class="flex items-center gap-8">
+                    <!-- Bouton Filtrer a GAUCHE d'Ajouter. Le compteur reflete les filtres actifs. -->
+                    <MalioButton
+                        v-if="canView"
+                        variant="tertiary"
+                        :label="filterButtonLabel"
+                        icon-name="mdi:tune"
+                        icon-position="left"
+                        icon-size="24"
+                        @click="openFilters"
+                    />
+                    <MalioButton
+                        v-if="canManage"
+                        variant="secondary"
+                        :label="t('admin.storages.add')"
+                        icon-name="mdi:add-bold"
+                        icon-position="left"
+                        @click="goToCreate"
+                    />
+                </div>
+            </template>
+        </PageHeader>
+
+        <!-- Datatable branchee sur usePaginatedList : pagination serveur, tri
+             site.code / storageType.label / numero ASC par defaut (cote back,
+             § 4.1). Colonnes Nom (displayName, RG-7.05) / Site (spec § 4.0). -->
+        <MalioDataTable
+            :columns="columns"
+            :items="rows"
+            :total-items="totalItems"
+            :page="currentPage"
+            :per-page="itemsPerPage"
+            :per-page-options="itemsPerPageOptions"
+            row-clickable
+            :empty-message="t('admin.storages.empty')"
+            @row-click="onRowClick"
+            @update:page="goToPage"
+            @update:per-page="setItemsPerPage"
+        />
+
+        <div class="flex justify-center mt-4">
+            <MalioButton
+                v-if="canView"
+                variant="primary"
+                :label="t('admin.storages.export')"
+                :disabled="exporting"
+                @click="exportXlsx"
+            />
+        </div>
+
+        <!-- Drawer de filtres : etat BROUILLON, applique uniquement au clic sur
+             « Voir les résultats ». Meme pattern que le Catalogue produit.
+             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('admin.storages.filters.title') }}</h2>
+            </template>
+
+            <MalioAccordion>
+                <!-- Recherche : numero (param `search`, partiel insensible a la casse). -->
+                <MalioAccordionItem :title="t('admin.storages.filters.search')" value="search">
+                    <MalioInputText
+                        v-model="draftSearch"
+                        icon-name="mdi:magnify"
+                    />
+                </MalioAccordionItem>
+
+                <!-- Type de stockage : select simple (param `storageTypeId`). -->
+                <MalioAccordionItem :title="t('admin.storages.filters.type')" value="type">
+                    <MalioSelect
+                        :model-value="draftStorageTypeId"
+                        :options="storageTypeOptions"
+                        :empty-option-label="t('admin.storages.filters.typeAll')"
+                        @update:model-value="(v: string | number | null) => draftStorageTypeId = v === null || v === '' ? null : Number(v)"
+                    />
+                </MalioAccordionItem>
+
+                <!-- Etat : select simple (param `state`, enum RECEPTION / PRODUCTION / TRIAGE). -->
+                <MalioAccordionItem :title="t('admin.storages.filters.state')" value="state">
+                    <MalioSelect
+                        :model-value="draftState"
+                        :options="stateOptions"
+                        :empty-option-label="t('admin.storages.filters.stateAll')"
+                        @update:model-value="(v: string | number | null) => draftState = v === null || v === '' ? null : String(v)"
+                    />
+                </MalioAccordionItem>
+
+                <!-- Site(s) : cases a cocher (multi, param `siteId[]`). Un stockage
+                     remonte s'il est rattache a AU MOINS UN des sites coches (OR). -->
+                <MalioAccordionItem :title="t('admin.storages.filters.site')" value="site">
+                    <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>
+            </MalioAccordion>
+
+            <template #footer>
+                <MalioButton
+                    variant="tertiary"
+                    :label="t('admin.storages.filters.reset')"
+                    button-class="w-m-btn-action"
+                    @click="resetFilters"
+                />
+                <MalioButton
+                    variant="primary"
+                    :label="t('admin.storages.filters.apply')"
+                    button-class="w-[170px]"
+                    @click="applyFilters"
+                />
+            </template>
+        </MalioDrawer>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import type { Storage } from '~/modules/catalog/types/storage'
+
+interface FilterOption {
+    value: number
+    label: string
+}
+
+const { t } = useI18n()
+const api = useApi()
+const router = useRouter()
+const toast = useToast()
+const { can } = usePermissions()
+
+useHead({ title: t('admin.storages.title') })
+
+// Repertoire stockage admin-only (spec § 5) : « + Ajouter » reserve a `manage`.
+// « Filtrer » / « Exporter » suivent `view` (gate page-level). L'item sidebar est
+// deja masque cote back pour les roles sans `view` (RBAC § 5.2, ERP-219).
+const canManage = computed(() => can('catalog.storages.manage'))
+const canView = computed(() => can('catalog.storages.view'))
+
+// Pagination serveur via le composable partage. Le StorageProvider applique deja
+// le tri (site.code, storageType.label, numero ASC, § 4.1) — pas de defaultSort
+// cote front tant qu'aucun OrderFilter n'est expose.
+const {
+    items: storages,
+    totalItems,
+    currentPage,
+    itemsPerPage,
+    itemsPerPageOptions,
+    fetch: loadStorages,
+    goToPage,
+    setItemsPerPage,
+    setFilters,
+} = usePaginatedList<Storage>({ url: '/storages' })
+
+// Mappe les stockages en objets « plats » pour MalioDataTable (items typees
+// Record<string, unknown>[]) : un objet litteral porte une signature d'index
+// implicite, contrairement a l'interface Storage. Meme pattern que le Catalogue.
+const rows = computed(() => storages.value.map(storage => ({
+    id: storage.id,
+    displayName: storage.displayName,
+    siteLabel: formatSite(storage.site),
+})))
+
+const columns = [
+    { key: 'displayName', label: t('admin.storages.column.name') },
+    { key: 'siteLabel', label: t('admin.storages.column.site') },
+]
+
+/**
+ * Libelle du site « Nom (Code) » (ex. « Chatellerault (86) »), miroir de
+ * l'export back (StorageExportController::formatSite). Le code peut etre absent :
+ * on retombe alors sur le seul nom.
+ */
+function formatSite(site: Storage['site']): string {
+    if (!site) {
+        return ''
+    }
+    return site.code ? `${site.name} (${site.code})` : site.name
+}
+
+/** Clic sur une ligne → ecran d'edition /admin/storages/{id}/edit (pas de consultation au M7). */
+function onRowClick(item: Record<string, unknown>): void {
+    router.push(`/admin/storages/${item.id}/edit`)
+}
+
+function goToCreate(): void {
+    router.push('/admin/storages/new')
+}
+
+// ── Referentiels des filtres ─────────────────────────────────────────────────
+// Charges une fois (pagination desactivee, referentiels bornes) : tous les types
+// de stockage et tous les sites.
+const storageTypeOptions = ref<FilterOption[]>([])
+const siteOptions = ref<FilterOption[]>([])
+
+// Etats stockage (miroir de l'enum back Storage::STATE_*). Le libelle est resolu
+// par i18n. Select simple cote filtre (`?state=` n'accepte qu'une valeur).
+const STORAGE_STATES = ['RECEPTION', 'PRODUCTION', 'TRIAGE'] as const
+
+const stateOptions = computed(() =>
+    STORAGE_STATES.map(code => ({ value: code, label: t(`admin.storages.state.${code}`) })),
+)
+
+interface HydraMember { '@id': string, id: number, name?: string, label?: string }
+
+/** Recupere une collection complete (pagination desactivee) en Hydra. */
+async function fetchAll<T extends HydraMember>(
+    url: string,
+    query: Record<string, string> = {},
+): Promise<T[]> {
+    const res = await api.get<{ member?: T[] }>(
+        url,
+        { pagination: 'false', ...query },
+        { headers: { Accept: 'application/ld+json' }, toast: false },
+    )
+    return res.member ?? []
+}
+
+/**
+ * Charge les referentiels des filtres en parallele et de maniere resiliente :
+ * un referentiel en echec (403/500) reste vide sans casser l'autre.
+ */
+async function loadFilterReferentials(): Promise<void> {
+    await Promise.allSettled([
+        fetchAll('/storage_types')
+            .then((types) => { storageTypeOptions.value = types.map(s => ({ value: s.id, label: s.label ?? '' })) }),
+        fetchAll('/sites')
+            .then((sitesList) => { siteOptions.value = sitesList.map(s => ({ value: s.id, label: s.name ?? '' })) }),
+    ])
+}
+
+// ── Filtres (drawer) ─────────────────────────────────────────────────────────
+// Deux niveaux d'etat (pattern Catalogue produit / repertoires M1→M5) :
+//  - APPLIED : pilote la liste/l'export + le compteur du bouton. Modifie
+//    uniquement au clic « Voir les résultats » / « Réinitialiser ».
+//  - DRAFT : edite librement dans le drawer ; recopie vers applied a la validation.
+const filterDrawerOpen = ref(false)
+
+const draftSearch = ref('')
+const draftStorageTypeId = ref<number | null>(null)
+const draftState = ref<string | null>(null)
+const draftSiteIds = ref<number[]>([])
+
+const appliedSearch = ref('')
+const appliedStorageTypeId = ref<number | null>(null)
+const appliedState = ref<string | null>(null)
+const appliedSiteIds = ref<number[]>([])
+
+const activeFilterCount = computed(() => {
+    let count = 0
+    if (appliedSearch.value.trim() !== '') count++
+    if (appliedStorageTypeId.value !== null) count++
+    if (appliedState.value !== null) count++
+    if (appliedSiteIds.value.length > 0) count++
+    return count
+})
+
+const filterButtonLabel = computed(() => {
+    const base = t('admin.storages.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
+    draftStorageTypeId.value = appliedStorageTypeId.value
+    draftState.value = appliedState.value
+    draftSiteIds.value = [...appliedSiteIds.value]
+    filterDrawerOpen.value = true
+}
+
+/** Coche / decoche un site dans le brouillon (filtre multi). */
+function toggleSite(id: number, 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. Cle
+ * `siteId[]` pour que PHP la parse en tableau (OR cote back). Les filtres vides
+ * sont omis pour une query propre.
+ */
+function buildFilterPayload(): Record<string, string | string[]> {
+    const payload: Record<string, string | string[]> = {}
+    if (appliedSearch.value.trim() !== '') payload.search = appliedSearch.value.trim()
+    if (appliedStorageTypeId.value !== null) payload.storageTypeId = String(appliedStorageTypeId.value)
+    if (appliedState.value !== null) payload.state = appliedState.value
+    if (appliedSiteIds.value.length > 0) payload['siteId[]'] = appliedSiteIds.value.map(String)
+    return payload
+}
+
+// « Voir les résultats » : recopie brouillon → applied, pousse les filtres
+// (retombe en page 1 via usePaginatedList) et ferme le drawer.
+function applyFilters(): void {
+    appliedSearch.value = draftSearch.value.trim()
+    appliedStorageTypeId.value = draftStorageTypeId.value
+    appliedState.value = draftState.value
+    appliedSiteIds.value = [...draftSiteIds.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 = ''
+    draftStorageTypeId.value = null
+    draftState.value = null
+    draftSiteIds.value = []
+
+    appliedSearch.value = ''
+    appliedStorageTypeId.value = null
+    appliedState.value = null
+    appliedSiteIds.value = []
+
+    setFilters({}, { replace: true })
+}
+
+// ── Export XLSX ──────────────────────────────────────────────────────────────
+// Memes filtres que la vue : l'export reflete exactement ce que l'utilisateur voit.
+const exporting = ref(false)
+
+async function exportXlsx(): Promise<void> {
+    if (exporting.value) {
+        return
+    }
+    exporting.value = true
+    try {
+        // 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 (meme pattern Catalogue).
+        const blob = await api.get<Blob>('/storages/export.xlsx', buildFilterPayload(), {
+            responseType: 'blob',
+            toast: false,
+        } as unknown as Parameters<typeof api.get>[2])
+
+        triggerDownload(blob, 'repertoire-stockage.xlsx')
+    }
+    catch {
+        toast.error({
+            title: t('admin.storages.toast.error'),
+            message: t('admin.storages.toast.exportError'),
+        })
+    }
+    finally {
+        exporting.value = false
+    }
+}
+
+/** Declenche le telechargement d'un blob via un lien temporaire. */
+function triggerDownload(blob: Blob, filename: string): void {
+    const url = URL.createObjectURL(blob)
+    const link = document.createElement('a')
+    link.href = url
+    link.download = filename
+    document.body.appendChild(link)
+    link.click()
+    link.remove()
+    URL.revokeObjectURL(url)
+}
+
+onMounted(() => {
+    loadStorages()
+    loadFilterReferentials()
+})
+</script>
@@ -0,0 +1,50 @@
+/**
+ * Types front du module Catalog (M7 — Repertoire stockage).
+ *
+ * Contrats API consommes :
+ *   - GET /api/storages             → HydraCollection<Storage>
+ *   - GET /api/storages/{id}        → Storage
+ *   - GET /api/storages/export.xlsx → binaire XLSX (export complet, filtres actifs)
+ *
+ * Notes (cf. spec-back § 4.0.bis, contrat JSON capture en ERP-215) :
+ *   - `site` et `storageType` sont embarques (objets bornes, pas IRI) — embed
+ *     autorise (ne viole pas la regle n°13, ensembles bornes).
+ *   - `displayName` = libelle du type + numero (RG-7.05), expose en lecture seule.
+ *   - `states` est un tableau de chaines (RECEPTION / PRODUCTION / TRIAGE, RG-7.04).
+ *   - `skip_null_values` actif cote back : ne pas presumer la presence des nulls.
+ */
+
+/** Site embarque dans un stockage (groupe `site:read`, sous-ensemble utile au front). */
+export interface StorageSite {
+    /** IRI Hydra, ex. `/api/sites/1` — utilise pour pre-selectionner le select en edition. */
+    '@id': string
+    id: number
+    name: string
+    code: string | null
+}
+
+/** Type de stockage embarque dans un stockage (referentiel borne, groupe `storage_type:read`). */
+export interface StorageStorageType {
+    /** IRI Hydra, ex. `/api/storage_types/9` — utilise pour pre-selectionner le select en edition. */
+    '@id': string
+    id: number
+    code: string
+    label: string
+}
+
+/**
+ * Stockage metier — tel qu'il est lu depuis l'API. L'entite porte le pattern
+ * Timestampable+Blamable (cf. spec-back § 2.8).
+ */
+export interface Storage {
+    id: number
+    numero: string
+    /** Etats : sous-ensemble non vide de RECEPTION / PRODUCTION / TRIAGE (RG-7.04). */
+    states: string[]
+    /** Libelle d'affichage = libelle du type + numero (RG-7.05). */
+    displayName: string
+    site: StorageSite | null
+    storageType: StorageStorageType | null
+    createdAt: string
+    updatedAt: string
+}