feat(catalog) : M7 — écran Modification d'un stockage /admin/storages/{id}/edit (ERP-218)

- Route /admin/storages/{id}/edit, gate catalog.storages.manage, détail via useStorage (GET /api/storages/{id})
- Formulaire factorisé create/edit dans useStorageForm : prefill + bouton « Enregistrer » → PATCH /api/storages/{id} (RG-7.08)
- Mêmes champs/validations que l'ajout (RG-7.01→7.06), erreurs 422 inline par champ
- 409 doublon (site, type, numéro, exclut le courant côté back) → inline sous Numéro + toast
- Pas d'onglets (HP-M7-06) ; libellés i18n edit.* + toast.updateSuccess
- Tests Vitest useStorageForm mode édition (prefill + PATCH + 409)

config/sidebar.php

@@ -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',

config/version.yaml

@@ -1,2 +1,2 @@
 parameters:
-    app.version: '0.1.161'
+    app.version: '0.1.162'

frontend/i18n/locales/fr.json

@@ -54,7 +54,7 @@
         "catalog": {
             "categories": "Gestion des catégories",
             "products": "Catalogue produits",
-            "storages": "Gestion des stockages"
+            "storages": "Catalogue stockages"
         }
     },
     "dashboard": {
@@ -1091,6 +1091,55 @@
                 "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"
+            },
+            "form": {
+                "title": "Ajouter un stockage",
+                "back": "Retour à la liste",
+                "submit": "Valider",
+                "site": "Site",
+                "storageType": "Type de stockage",
+                "numero": "Numéro",
+                "states": "État du type de stockage",
+                "duplicateNumero": "Un stockage avec ce site, ce type et ce numéro existe déjà."
+            },
+            "edit": {
+                "title": "Modifier le stockage",
+                "back": "Retour à la liste",
+                "save": "Enregistrer",
+                "loading": "Chargement du stockage…",
+                "notFound": "Stockage introuvable."
+            },
+            "toast": {
+                "error": "Une erreur est survenue. Réessayez.",
+                "exportError": "L'export du répertoire stockage a échoué. Réessayez.",
+                "createSuccess": "Stockage créé avec succès",
+                "updateSuccess": "Stockage mis à jour avec succès"
+            }
         }
     }
 }

frontend/modules/catalog/composables/__tests__/useStorageForm.spec.ts

@@ -0,0 +1,249 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { useFormErrors } from '~/shared/composables/useFormErrors'
+import { useStorageForm } from '../useStorageForm'
+
+// Stubs des auto-imports Nuxt consommes par le composable + ses dependances.
+const mockGet = vi.hoisted(() => vi.fn())
+const mockPost = vi.hoisted(() => vi.fn())
+const mockPatch = vi.hoisted(() => vi.fn())
+const mockToastSuccess = vi.hoisted(() => vi.fn())
+const mockToastError = vi.hoisted(() => vi.fn())
+
+vi.stubGlobal('useApi', () => ({
+    get: mockGet,
+    post: mockPost,
+    put: vi.fn(),
+    patch: mockPatch,
+    delete: vi.fn(),
+}))
+vi.stubGlobal('useToast', () => ({
+    success: mockToastSuccess,
+    error: mockToastError,
+}))
+// useFormErrors est un auto-import Nuxt : on expose l'implementation reelle
+// (elle consomme useToast/useI18n deja stubbes) pour tester l'integration 422/409.
+vi.stubGlobal('useFormErrors', useFormErrors)
+vi.stubGlobal('useI18n', () => ({
+    t: (key: string, params?: Record<string, unknown>) =>
+        params ? `${key}::${JSON.stringify(params)}` : key,
+}))
+
+/** Referentiel PLAT des types de stockage (renvoye tel quel, sans filtre site). */
+const STORAGE_TYPES = {
+    member: [
+        { '@id': '/api/storage_types/9', label: 'Cellule' },
+        { '@id': '/api/storage_types/5', label: 'Tas' },
+    ],
+}
+
+describe('useStorageForm', () => {
+    beforeEach(() => {
+        mockGet.mockReset()
+        mockPost.mockReset()
+        mockPatch.mockReset()
+        mockToastSuccess.mockReset()
+        mockToastError.mockReset()
+
+        // Routage des GET par url (referentiels). Le type de stockage est un
+        // referentiel plat : meme reponse quelle que soit la requete.
+        mockGet.mockImplementation((url: string) => {
+            if (url === '/sites') {
+                return Promise.resolve({ member: [{ '@id': '/api/sites/1', name: 'Chatellerault' }] })
+            }
+            if (url === '/storage_types') {
+                return Promise.resolve(STORAGE_TYPES)
+            }
+            return Promise.resolve({ member: [] })
+        })
+    })
+
+    describe('referentiel plat — pas de cascade Site->Type (RG-7.03 non portee back)', () => {
+        it('loadReferentials charge les sites et TOUS les types, sans filtre site', async () => {
+            const { siteOptions, storageTypeOptions, loadReferentials } = useStorageForm()
+            await loadReferentials()
+
+            const storageCall = mockGet.mock.calls.find(c => c[0] === '/storage_types')
+            expect(storageCall).toBeDefined()
+            // Aucun filtre siteId envoye (referentiel plat).
+            expect(storageCall?.[1]).not.toHaveProperty('siteId[]')
+
+            expect(siteOptions.value.map(o => o.value)).toEqual(['/api/sites/1'])
+            expect(storageTypeOptions.value.map(o => o.value)).toEqual([
+                '/api/storage_types/9',
+                '/api/storage_types/5',
+            ])
+        })
+
+        it('changer de site ne recharge pas les types ni ne purge la selection', async () => {
+            const { form, setSite, setStorageType, loadReferentials } = useStorageForm()
+            await loadReferentials()
+            const callsBefore = mockGet.mock.calls.filter(c => c[0] === '/storage_types').length
+
+            setStorageType('/api/storage_types/9')
+            setSite('/api/sites/1')
+
+            expect(form.siteIri).toBe('/api/sites/1')
+            // Selection conservee : pas de cascade ni de purge par site.
+            expect(form.storageTypeIri).toBe('/api/storage_types/9')
+            const callsAfter = mockGet.mock.calls.filter(c => c[0] === '/storage_types').length
+            expect(callsAfter).toBe(callsBefore)
+        })
+    })
+
+    describe('submit — POST /storages', () => {
+        function fillValidForm(form: ReturnType<typeof useStorageForm>['form']): void {
+            form.siteIri = '/api/sites/1'
+            form.storageTypeIri = '/api/storage_types/9'
+            form.numero = '12'
+            form.states = ['RECEPTION', 'PRODUCTION']
+        }
+
+        it('poste le payload (relations en IRI) et retourne true au succes', async () => {
+            mockPost.mockResolvedValueOnce({ id: 42 })
+            const { form, submit } = useStorageForm()
+            fillValidForm(form)
+
+            const ok = await submit()
+
+            expect(ok).toBe(true)
+            expect(mockPost).toHaveBeenCalledWith(
+                '/storages',
+                {
+                    numero: '12',
+                    states: ['RECEPTION', 'PRODUCTION'],
+                    site: '/api/sites/1',
+                    storageType: '/api/storage_types/9',
+                },
+                expect.objectContaining({ toast: false }),
+            )
+            expect(mockToastSuccess).toHaveBeenCalled()
+        })
+
+        it('omet `site` / `storageType` du payload quand la relation n\'est pas choisie', async () => {
+            // Envoyer null casserait la denormalisation back (IRI attendu) et
+            // court-circuiterait les autres violations -> on omet la cle.
+            mockPost.mockResolvedValueOnce({ id: 43 })
+            const { form, submit } = useStorageForm()
+            fillValidForm(form)
+            form.siteIri = null
+            form.storageTypeIri = null
+
+            await submit()
+
+            const payload = mockPost.mock.calls[0][1]
+            expect(payload).not.toHaveProperty('site')
+            expect(payload).not.toHaveProperty('storageType')
+            // numero envoye en chaine vide si non saisi (NotBlank cote back).
+            expect(payload).toHaveProperty('numero')
+        })
+
+        it('mappe un 409 doublon (site, type, numero) sur errors.numero + toast explicite', async () => {
+            mockPost.mockRejectedValueOnce({ response: { status: 409, _data: {} } })
+            const { form, errors, submit } = useStorageForm()
+            fillValidForm(form)
+
+            const ok = await submit()
+
+            expect(ok).toBe(false)
+            expect(errors.numero).toBe('admin.storages.form.duplicateNumero')
+            expect(mockToastError).toHaveBeenCalled()
+        })
+
+        it('mappe une 422 inline par champ (errors.numero) sans toast', async () => {
+            mockPost.mockRejectedValueOnce({
+                response: {
+                    status: 422,
+                    _data: { violations: [{ propertyPath: 'numero', message: 'Le numéro du stockage est obligatoire.' }] },
+                },
+            })
+            const { form, errors, submit } = useStorageForm()
+            fillValidForm(form)
+            form.numero = null
+
+            const ok = await submit()
+
+            expect(ok).toBe(false)
+            expect(errors.numero).toBe('Le numéro du stockage est obligatoire.')
+            expect(mockToastError).not.toHaveBeenCalled()
+        })
+
+        it('mappe une 422 sur site / storageType / states (NotNull / Count)', async () => {
+            mockPost.mockRejectedValueOnce({
+                response: {
+                    status: 422,
+                    _data: { violations: [
+                        { propertyPath: 'site', message: 'Le site est obligatoire.' },
+                        { propertyPath: 'storageType', message: 'Le type de stockage est obligatoire.' },
+                        { propertyPath: 'states', message: 'Sélectionnez au moins un état.' },
+                    ] },
+                },
+            })
+            const { form, errors, submit } = useStorageForm()
+            fillValidForm(form)
+
+            await submit()
+
+            expect(errors.site).toBe('Le site est obligatoire.')
+            expect(errors.storageType).toBe('Le type de stockage est obligatoire.')
+            expect(errors.states).toBe('Sélectionnez au moins un état.')
+        })
+    })
+
+    describe('RG-7.08 — mode edition (prefill + PATCH)', () => {
+        // Stockage charge (memes cles que la reponse reelle § 4.0.bis : @id sur les relations).
+        const STORAGE = {
+            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' },
+            createdAt: '', updatedAt: '',
+        }
+
+        it('pre-remplit le formulaire depuis le stockage (relations en IRI)', () => {
+            const { form, storageId, prefill } = useStorageForm()
+            prefill(STORAGE)
+
+            expect(storageId.value).toBe(42)
+            expect(form.siteIri).toBe('/api/sites/1')
+            expect(form.storageTypeIri).toBe('/api/storage_types/9')
+            expect(form.numero).toBe('12')
+            expect(form.states).toEqual(['RECEPTION', 'PRODUCTION'])
+        })
+
+        it('soumet un PATCH /storages/{id} apres prefill (RG-7.08)', async () => {
+            mockPatch.mockResolvedValueOnce({ ...STORAGE })
+            const { prefill, submit } = useStorageForm()
+            prefill(STORAGE)
+
+            const ok = await submit()
+
+            expect(ok).toBe(true)
+            expect(mockPost).not.toHaveBeenCalled()
+            expect(mockPatch).toHaveBeenCalledWith(
+                '/storages/42',
+                {
+                    numero: '12',
+                    states: ['RECEPTION', 'PRODUCTION'],
+                    site: '/api/sites/1',
+                    storageType: '/api/storage_types/9',
+                },
+                expect.objectContaining({ toast: false }),
+            )
+            expect(mockToastSuccess).toHaveBeenCalled()
+        })
+
+        it('mappe un 409 doublon sur errors.numero aussi en edition (exclut le courant cote back)', async () => {
+            mockPatch.mockRejectedValueOnce({ response: { status: 409, _data: {} } })
+            const { errors, prefill, submit } = useStorageForm()
+            prefill(STORAGE)
+
+            const ok = await submit()
+
+            expect(ok).toBe(false)
+            expect(errors.numero).toBe('admin.storages.form.duplicateNumero')
+            expect(mockToastError).toHaveBeenCalled()
+        })
+    })
+})

frontend/modules/catalog/composables/useStorage.ts

@@ -0,0 +1,41 @@
+import { ref } from 'vue'
+import type { Storage } from '~/modules/catalog/types/storage'
+
+/**
+ * Chargement d'un stockage unique (ecran « Modification stockage », M7 — ERP-218).
+ * Lit le detail via `GET /api/storages/{id}` — meme structure que la ligne de liste
+ * (site / storageType embarques + displayName, § 4.0.bis).
+ *
+ * L'en-tete `Accept: application/ld+json` est impose pour obtenir le payload Hydra
+ * complet (IRI `@id` des relations, necessaires au pre-remplissage des selects).
+ * Etat 100 % local a l'instance (refs) — aucune persistance URL.
+ */
+export function useStorage(id: number | string) {
+    const api = useApi()
+
+    const storage = ref<Storage | null>(null)
+    const loading = ref(false)
+    const error = ref(false)
+
+    /** Charge le detail du stockage. En cas d'echec : `error = true`, `storage = null`. */
+    async function load(): Promise<void> {
+        loading.value = true
+        error.value = false
+        try {
+            storage.value = await api.get<Storage>(
+                `/storages/${id}`,
+                {},
+                { headers: { Accept: 'application/ld+json' }, toast: false },
+            )
+        }
+        catch {
+            error.value = true
+            storage.value = null
+        }
+        finally {
+            loading.value = false
+        }
+    }
+
+    return { storage, loading, error, load }
+}

frontend/modules/catalog/composables/useStorageForm.ts

@@ -0,0 +1,172 @@
+/**
+ * Composable du formulaire de creation d'un stockage (M7 — ERP-217).
+ *
+ * Porte l'etat du formulaire principal (a plat, PAS d'onglets — HP-M7-06), les
+ * referentiels des selects et la soumission `POST /api/storages` avec mapping des
+ * erreurs 422/409 inline (useFormErrors, ERP-101). Reference : ecran « Ajouter un
+ * produit » (M6) / ecran Client.
+ *
+ * Referentiel des types de stockage : PLAT (RG-6.06 / decision back). Le concept
+ * type<->site a ete retire en M6 (jointure storage_type_site droppee, migration
+ * Version20260626100000) et `StorageType` n'a plus de relation Site ; le provider
+ * ignore tout filtre `?siteId[]`. La cascade Site->Type de RG-7.03 n'est donc PAS
+ * portee (decision produit du 30/06 : referentiel plat, fidele au back ; RG-7.03 a
+ * reclarifier cote spec). On charge donc TOUS les types une fois, Site et Type
+ * independants.
+ *
+ * Etat 100 % local a l'instance.
+ */
+import { reactive, ref } from 'vue'
+import {
+    useSiteOptions,
+    useStorageTypeOptions,
+} from '~/modules/catalog/composables/useProductOptions'
+import type { Storage } from '~/modules/catalog/types/storage'
+
+/** Etats d'un stockage (miroir de l'enum back Storage::STATE_*, RG-7.04). */
+export const STORAGE_STATES = ['RECEPTION', 'PRODUCTION', 'TRIAGE'] as const
+
+export function useStorageForm() {
+    const api = useApi()
+    const { t } = useI18n()
+    const toast = useToast()
+    const formErrors = useFormErrors()
+
+    const sites = useSiteOptions()
+    const storageTypes = useStorageTypeOptions()
+
+    // ── Etat du formulaire ───────────────────────────────────────────────────
+    // Les relations (site, storageType) sont stockees en IRI (envoyees telles
+    // quelles au POST) ; `states` porte les codes enum.
+    const form = reactive({
+        siteIri: null as string | null,
+        storageTypeIri: null as string | null,
+        numero: null as string | null,
+        states: [] as string[],
+    })
+
+    const submitting = ref(false)
+
+    // Id du stockage edite (null = creation). Pilote l'URL/methode du submit
+    // (RG-7.08 : « Modification » = meme formulaire/regles que « Ajouter »,
+    // bouton « Enregistrer » → PATCH).
+    const storageId = ref<number | null>(null)
+
+    /** Met a jour le site (select simple, RG-7.02). */
+    function setSite(iri: string | null): void {
+        form.siteIri = iri
+    }
+
+    /** Met a jour le type de stockage (select simple, referentiel plat). */
+    function setStorageType(iri: string | null): void {
+        form.storageTypeIri = iri
+    }
+
+    /** Met a jour les etats (multi-select, >= 1, RG-7.04). */
+    function setStates(states: string[]): void {
+        form.states = states
+    }
+
+    /**
+     * Charge les referentiels (sites + TOUS les types de stockage). Resilient :
+     * un referentiel en echec reste vide sans casser l'autre. Pas de cascade par
+     * site (referentiel plat, cf. docblock).
+     */
+    async function loadReferentials(): Promise<void> {
+        await Promise.allSettled([sites.load(), storageTypes.load()])
+    }
+
+    /**
+     * Pre-remplit le formulaire depuis un stockage charge (mode edition, RG-7.08).
+     * Les relations sont reprises via leur IRI `@id` (= valeur d'option des selects).
+     * Le referentiel de types est plat (charge par loadReferentials) : prefill se
+     * contente de mapper la selection courante (pas de cascade par site).
+     */
+    function prefill(storage: Storage): void {
+        storageId.value = storage.id
+        form.siteIri = storage.site?.['@id'] ?? null
+        form.storageTypeIri = storage.storageType?.['@id'] ?? null
+        form.numero = storage.numero
+        form.states = [...storage.states]
+    }
+
+    /**
+     * Soumet le formulaire. Retourne true au succes (la page redirige), false sinon.
+     * Creation → `POST /storages` ; edition (storageId non nul, RG-7.08) →
+     * `PATCH /storages/{id}` (mode merge-patch gere par useApi). 422 → mapping inline
+     * par champ (useFormErrors, `{ toast: false }`) ; 409 doublon du triplet (site,
+     * type, numero, RG-7.01 — le back exclut le stockage courant en PATCH) → erreur
+     * inline sur `numero` (propertyPath exploitable cote back) + toast explicite.
+     */
+    async function submit(): Promise<boolean> {
+        if (submitting.value) {
+            return false
+        }
+        submitting.value = true
+        formErrors.clearErrors()
+        const editing = storageId.value !== null
+        try {
+            const payload: Record<string, unknown> = {
+                // Chaine vide (jamais null) : le setter back setNumero attend un
+                // `string` non-nullable -> envoyer null leverait une erreur de type
+                // (denormalisation) qui court-circuiterait les autres violations.
+                // Avec '', la contrainte NotBlank renvoie un message propre par champ.
+                numero: form.numero ?? '',
+                states: form.states,
+            }
+            // `site` / `storageType` attendent un IRI (string) : envoyer null
+            // declencherait une erreur de denormalisation API Platform qui
+            // court-circuiterait TOUTES les autres violations. On omet la cle quand
+            // la relation n'est pas choisie -> la contrainte NotNull renvoie un
+            // message propre, et les autres champs sont valides dans la meme 422.
+            if (form.siteIri) {
+                payload.site = form.siteIri
+            }
+            if (form.storageTypeIri) {
+                payload.storageType = form.storageTypeIri
+            }
+
+            const options = { headers: { Accept: 'application/ld+json' }, toast: false }
+            if (editing) {
+                await api.patch(`/storages/${storageId.value}`, payload, options)
+                toast.success({ title: t('admin.storages.toast.updateSuccess') })
+            }
+            else {
+                await api.post('/storages', payload, options)
+                toast.success({ title: t('admin.storages.toast.createSuccess') })
+            }
+            return true
+        }
+        catch (error) {
+            const status = (error as { response?: { status?: number } })?.response?.status
+            if (status === 409) {
+                // Doublon (site, type, numero) RG-7.01 : inline sur `numero` + toast.
+                const message = t('admin.storages.form.duplicateNumero')
+                formErrors.setError('numero', message)
+                toast.error({ title: t('admin.storages.toast.error'), message })
+            }
+            else {
+                formErrors.handleApiError(error, { fallbackMessage: t('admin.storages.toast.error') })
+            }
+            return false
+        }
+        finally {
+            submitting.value = false
+        }
+    }
+
+    return {
+        form,
+        storageId,
+        errors: formErrors.errors,
+        submitting,
+        siteOptions: sites.options,
+        storageTypeOptions: storageTypes.options,
+        setSite,
+        setStorageType,
+        setStates,
+        loadReferentials,
+        prefill,
+        submit,
+    }
+}

frontend/modules/catalog/pages/__tests__/storagesIndex.spec.ts

@@ -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 })
+    })
+})

frontend/modules/catalog/pages/admin/storages/[id]/edit.vue

@@ -0,0 +1,150 @@
+<template>
+    <div>
+        <!-- En-tete : retour vers la liste + nom du stockage. -->
+        <div class="flex items-center gap-3 pt-11">
+            <MalioButtonIcon
+                icon="mdi:arrow-left-bold"
+                icon-size="24"
+                variant="ghost"
+                :title="t('admin.storages.edit.back')"
+                v-bind="{ ariaLabel: t('admin.storages.edit.back') }"
+                @click="goBack"
+            />
+            <h1 class="text-[30px] font-semibold text-m-primary">{{ headerTitle }}</h1>
+        </div>
+
+        <!-- Etats de chargement / introuvable. -->
+        <p v-if="loading" class="mt-12 text-center text-black/60">{{ t('admin.storages.edit.loading') }}</p>
+        <p v-else-if="error" class="mt-12 text-center text-m-danger">{{ t('admin.storages.edit.notFound') }}</p>
+
+        <template v-else-if="storage">
+            <!-- ── Formulaire principal pre-rempli (a plat, PAS d'onglets — HP-M7-06),
+                 memes champs/regles que l'ajout (RG-7.01→7.06). Bouton
+                 « Enregistrer » → PATCH (RG-7.08). -->
+            <div class="mt-[48px] grid grid-cols-3 xl:grid-cols-4 gap-x-[44px] gap-y-4">
+                <!-- Site : select simple obligatoire (RG-7.02). -->
+                <MalioSelect
+                    :model-value="form.siteIri"
+                    :options="siteOptions"
+                    :label="t('admin.storages.form.site')"
+                    empty-option-label=""
+                    :required="true"
+                    :error="errors.site"
+                    @update:model-value="(v: string | number | null) => setSite(v === null || v === '' ? null : String(v))"
+                />
+                <!-- Type de stockage : select simple obligatoire. Referentiel plat :
+                     tous les types (pas de cascade par site, RG-7.03 non portee back). -->
+                <MalioSelect
+                    :model-value="form.storageTypeIri"
+                    :options="storageTypeOptions"
+                    :label="t('admin.storages.form.storageType')"
+                    empty-option-label=""
+                    :required="true"
+                    :error="errors.storageType"
+                    @update:model-value="(v: string | number | null) => setStorageType(v === null || v === '' ? null : String(v))"
+                />
+                <!-- Numero : texte libre obligatoire (RG-7.01, normalise trim cote serveur). -->
+                <MalioInputText
+                    v-model="form.numero"
+                    :mask="FREE_TEXT_MASK"
+                    :label="t('admin.storages.form.numero')"
+                    :required="true"
+                    :error="errors.numero"
+                />
+                <!-- Etat du type de stockage : multi-select obligatoire (>= 1, RG-7.04). -->
+                <MalioSelectCheckbox
+                    :model-value="form.states"
+                    :options="stateOptions"
+                    :max-tags="3"
+                    :label="t('admin.storages.form.states')"
+                    :display-tag="true"
+                    :required="true"
+                    :error="errors.states"
+                    @update:model-value="(v: (string | number)[]) => setStates(v.map(String))"
+                />
+            </div>
+
+            <div class="mt-12 flex justify-center">
+                <MalioButton
+                    variant="primary"
+                    :label="t('admin.storages.edit.save')"
+                    :disabled="submitting"
+                    @click="onSubmit"
+                />
+            </div>
+
+            <!-- Onglets de la maquette : HORS perimetre HP-M7-06 (idem ajout). -->
+        </template>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted } from 'vue'
+import { useStorageForm, STORAGE_STATES } from '~/modules/catalog/composables/useStorageForm'
+import { useStorage } from '~/modules/catalog/composables/useStorage'
+import { FREE_TEXT_MASK } from '~/shared/utils/textSanitize'
+
+const { t } = useI18n()
+const route = useRoute()
+const router = useRouter()
+const { can } = usePermissions()
+
+const storageId = route.params.id as string
+
+// Gating de la route : la modification est reservee a `manage` (admin-only) ; sinon
+// retour a la liste (pas d'ecran de consultation au M7).
+if (!can('catalog.storages.manage')) {
+    await navigateTo('/admin/storages')
+}
+
+const { storage, loading, error, load } = useStorage(storageId)
+
+const {
+    form,
+    errors,
+    submitting,
+    siteOptions,
+    storageTypeOptions,
+    setSite,
+    setStorageType,
+    setStates,
+    loadReferentials,
+    prefill,
+    submit,
+} = useStorageForm()
+
+// Titre : libelle d'affichage du stockage (RG-7.05) sinon titre generique.
+const headerTitle = computed(() => storage.value?.displayName ?? t('admin.storages.edit.title'))
+
+useHead({ title: headerTitle })
+
+// Options de l'etat : libelles i18n (la valeur d'option = code enum).
+const stateOptions = computed(() =>
+    STORAGE_STATES.map(code => ({ value: code, label: t(`admin.storages.state.${code}`) })),
+)
+
+/** Retour vers la liste des stockages (fleche d'en-tete). */
+function goBack(): void {
+    router.push('/admin/storages')
+}
+
+/** Soumet la modification (PATCH) ; au succes, retour a la liste. */
+async function onSubmit(): Promise<void> {
+    const ok = await submit()
+    if (ok) {
+        router.push('/admin/storages')
+    }
+}
+
+onMounted(async () => {
+    // Referentiels (selects) + detail du stockage charges en parallele.
+    await Promise.all([
+        loadReferentials().catch(() => {}),
+        load(),
+    ])
+    // Pre-remplissage une fois le stockage charge (echec de chargement => message).
+    if (storage.value) {
+        prefill(storage.value)
+    }
+})
+</script>

frontend/modules/catalog/pages/admin/storages/index.vue

@@ -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>

frontend/modules/catalog/pages/admin/storages/new.vue

@@ -0,0 +1,127 @@
+<template>
+    <div>
+        <!-- En-tete : retour vers la liste + titre. -->
+        <div class="flex items-center gap-3 pt-11">
+            <MalioButtonIcon
+                icon="mdi:arrow-left-bold"
+                icon-size="24"
+                variant="ghost"
+                :title="t('admin.storages.form.back')"
+                v-bind="{ ariaLabel: t('admin.storages.form.back') }"
+                @click="goBack"
+            />
+            <h1 class="text-[30px] font-semibold text-m-primary">{{ t('admin.storages.form.title') }}</h1>
+        </div>
+
+        <!-- ── Formulaire principal de creation (a plat, PAS d'onglets — HP-M7-06)
+             Bouton « Valider » TOUJOURS actif (ERP-101) : la validation
+             autoritaire est serveur, les erreurs 422 reviennent inline. -->
+        <div class="mt-[48px] grid grid-cols-3 xl:grid-cols-4 gap-x-[44px] gap-y-4">
+            <!-- Site : select simple obligatoire (RG-7.02). -->
+            <MalioSelect
+                :model-value="form.siteIri"
+                :options="siteOptions"
+                :label="t('admin.storages.form.site')"
+                empty-option-label=""
+                :required="true"
+                :error="errors.site"
+                @update:model-value="(v: string | number | null) => setSite(v === null || v === '' ? null : String(v))"
+            />
+            <!-- Type de stockage : select simple obligatoire. Referentiel plat :
+                 tous les types (pas de cascade par site, RG-7.03 non portee back). -->
+            <MalioSelect
+                :model-value="form.storageTypeIri"
+                :options="storageTypeOptions"
+                :label="t('admin.storages.form.storageType')"
+                empty-option-label=""
+                :required="true"
+                :error="errors.storageType"
+                @update:model-value="(v: string | number | null) => setStorageType(v === null || v === '' ? null : String(v))"
+            />
+            <!-- Numero : texte libre obligatoire (RG-7.01, normalise trim cote serveur). -->
+            <MalioInputText
+                v-model="form.numero"
+                :mask="FREE_TEXT_MASK"
+                :label="t('admin.storages.form.numero')"
+                :required="true"
+                :error="errors.numero"
+            />
+            <!-- Etat du type de stockage : multi-select obligatoire (>= 1, RG-7.04). -->
+            <MalioSelectCheckbox
+                :model-value="form.states"
+                :options="stateOptions"
+                :max-tags="3"
+                :label="t('admin.storages.form.states')"
+                :display-tag="true"
+                :required="true"
+                :error="errors.states"
+                @update:model-value="(v: (string | number)[]) => setStates(v.map(String))"
+            />
+        </div>
+
+        <div class="mt-12 flex justify-center">
+            <MalioButton
+                variant="primary"
+                :label="t('admin.storages.form.submit')"
+                :disabled="submitting"
+                @click="onSubmit"
+            />
+        </div>
+
+        <!-- Onglets de la maquette (Clients / Règles / Etiquette / Comptabilité) :
+             HORS perimetre HP-M7-06 — aucune barre d'onglets a l'ajout. -->
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted } from 'vue'
+import { useStorageForm, STORAGE_STATES } from '~/modules/catalog/composables/useStorageForm'
+import { FREE_TEXT_MASK } from '~/shared/utils/textSanitize'
+
+const { t } = useI18n()
+const router = useRouter()
+const { can } = usePermissions()
+
+useHead({ title: t('admin.storages.form.title') })
+
+// Gating de la route : la creation est reservee a `manage` (repertoire admin-only).
+if (!can('catalog.storages.manage')) {
+    await navigateTo('/admin/storages')
+}
+
+const {
+    form,
+    errors,
+    submitting,
+    siteOptions,
+    storageTypeOptions,
+    setSite,
+    setStorageType,
+    setStates,
+    loadReferentials,
+    submit,
+} = useStorageForm()
+
+// Options de l'etat : libelles i18n (la valeur d'option = code enum).
+const stateOptions = computed(() =>
+    STORAGE_STATES.map(code => ({ value: code, label: t(`admin.storages.state.${code}`) })),
+)
+
+/** Retour vers la liste des stockages (fleche d'en-tete). */
+function goBack(): void {
+    router.push('/admin/storages')
+}
+
+/** Soumet la creation ; au succes, retour a la liste. */
+async function onSubmit(): Promise<void> {
+    const ok = await submit()
+    if (ok) {
+        router.push('/admin/storages')
+    }
+}
+
+onMounted(() => {
+    // Echec du chargement des referentiels non bloquant : les selects restent vides.
+    loadReferentials().catch(() => {})
+})
+</script>

frontend/modules/catalog/types/storage.ts

@@ -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
+}

infra/dev/Dockerfile

@@ -52,12 +52,19 @@ RUN apt-get update && apt-get install -y \
             xsl
 
 
-# Installation de node
+# Installation de node — architecture detectee a la volee
-RUN wget -qO-  "https://nodejs.org/dist/v${DOCKER_NODE_VERSION}/node-v${DOCKER_NODE_VERSION}-linux-x64.tar.xz" | tar xJC /tmp/ && \
+# (x64 sur Intel/amd64, arm64 sur Apple Silicon) pour que le build passe sur les deux.
-    cp -r /tmp/node-v${DOCKER_NODE_VERSION}-linux-x64/bin /usr/ && \
+RUN NODE_ARCH="$(dpkg --print-architecture)" && \
-    cp -r /tmp/node-v${DOCKER_NODE_VERSION}-linux-x64/include /usr/ && \
+    case "$NODE_ARCH" in \
-    cp -r /tmp/node-v${DOCKER_NODE_VERSION}-linux-x64/lib /usr/ && \
+        amd64) NODE_ARCH="x64" ;; \
-    cp -r /tmp/node-v${DOCKER_NODE_VERSION}-linux-x64/share /usr/ && \
+        arm64) NODE_ARCH="arm64" ;; \
+        *) echo "Architecture Node non supportee : $NODE_ARCH" && exit 1 ;; \
+    esac && \
+    wget -qO- "https://nodejs.org/dist/v${DOCKER_NODE_VERSION}/node-v${DOCKER_NODE_VERSION}-linux-${NODE_ARCH}.tar.xz" | tar xJC /tmp/ && \
+    cp -r /tmp/node-v${DOCKER_NODE_VERSION}-linux-${NODE_ARCH}/bin /usr/ && \
+    cp -r /tmp/node-v${DOCKER_NODE_VERSION}-linux-${NODE_ARCH}/include /usr/ && \
+    cp -r /tmp/node-v${DOCKER_NODE_VERSION}-linux-${NODE_ARCH}/lib /usr/ && \
+    cp -r /tmp/node-v${DOCKER_NODE_VERSION}-linux-${NODE_ARCH}/share /usr/ && \
     npm install --global yarn
 
 # installation/activation d'extensions php

makefile

@@ -74,7 +74,7 @@ help:
 	@printf "\n  Plus de details : \033[4mREADME.md\033[0m, \033[4mCLAUDE.md\033[0m\n\n"
 
 env-init:
-	@cp --update=none $(ENV_DEFAULT) $(ENV_LOCAL)
+	@test -f $(ENV_LOCAL) || cp $(ENV_DEFAULT) $(ENV_LOCAL)
 
 # Lance le container
 start: env-init