Merge branch 'develop' into feature/ERP-116-country-referentiel

frontend/modules/commercial/pages/__tests__/suppliersIndex.spec.ts

@@ -0,0 +1,205 @@
+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 les autres specs commercial.
+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 }))
+
+// Le repository est lui aussi un auto-import : on controle items + setFilters.
+vi.stubGlobal('useSuppliersRepository', () => ({
+    items: ref([
+        {
+            id: 7,
+            companyName: 'ACME',
+            categories: [{ code: 'NEG', name: 'Négociant' }],
+            sites: [{ id: 86, name: '86', color: '#123456' }],
+            updatedAt: '2026-01-15T10:00:00+00:00',
+        },
+    ]),
+    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 SuppliersIndex = (await import('../suppliers/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<{ id: number }>).map(it =>
+                h('tr', { 'data-row-id': it.id, 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 InputTextStub = defineComponent({ setup() { return () => h('input') } })
+
+function mountPage() {
+    return mount(SuppliersIndex, {
+        global: {
+            stubs: {
+                PageHeader: PageHeaderStub,
+                MalioButton: ButtonStub,
+                MalioDataTable: DataTableStub,
+                MalioDrawer: DrawerStub,
+                MalioAccordion: SlotStub,
+                MalioAccordionItem: SlotStub,
+                MalioInputText: InputTextStub,
+                MalioCheckbox: CheckboxStub,
+            },
+        },
+    })
+}
+
+describe('Répertoire fournisseurs (page /suppliers)', () => {
+    beforeEach(() => {
+        mockPush.mockReset()
+        mockApiGet.mockReset().mockResolvedValue({ 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('affiche « + Ajouter » uniquement avec la permission manage', async () => {
+        mockCan.mockImplementation((perm: string) => perm === 'commercial.suppliers.manage')
+        const wrapper = mountPage()
+        await flushPromises()
+        expect(wrapper.find('[data-label="commercial.suppliers.add"]').exists()).toBe(true)
+    })
+
+    it('masque « + Ajouter » sans la permission manage (view seul)', async () => {
+        mockCan.mockImplementation((perm: string) => perm === 'commercial.suppliers.view')
+        const wrapper = mountPage()
+        await flushPromises()
+        expect(wrapper.find('[data-label="commercial.suppliers.add"]').exists()).toBe(false)
+    })
+
+    it('navigue vers la consultation au clic sur une ligne', async () => {
+        const wrapper = mountPage()
+        await flushPromises()
+        await wrapper.find('tr[data-row-id="7"]').trigger('click')
+        expect(mockPush).toHaveBeenCalledWith('/suppliers/7')
+    })
+
+    it('charge les categories de type FOURNISSEUR pour le filtre', async () => {
+        mountPage()
+        await flushPromises()
+        expect(mockApiGet).toHaveBeenCalledWith(
+            '/categories',
+            expect.objectContaining({ pagination: 'false', typeCode: 'FOURNISSEUR' }),
+            expect.objectContaining({ toast: false }),
+        )
+    })
+
+    it('appelle l\'export XLSX sur /suppliers/export.xlsx en blob', async () => {
+        const wrapper = mountPage()
+        await flushPromises()
+        await wrapper.find('[data-label="commercial.suppliers.export"]').trigger('click')
+        await flushPromises()
+        expect(mockApiGet).toHaveBeenCalledWith(
+            '/suppliers/export.xlsx',
+            expect.any(Object),
+            expect.objectContaining({ responseType: 'blob', toast: false }),
+        )
+    })
+
+    it('repercute le filtre « Inclure les archivés » dans setFilters sans toucher l\'URL', async () => {
+        const wrapper = mountPage()
+        await flushPromises()
+
+        // Coche « Inclure les archivés » puis applique les filtres.
+        await wrapper.find('input[data-id="filter-include-archived"]').setValue(true)
+        await wrapper.find('[data-label="commercial.suppliers.filters.apply"]').trigger('click')
+
+        expect(mockSetFilters).toHaveBeenLastCalledWith(
+            { includeArchived: true },
+            { replace: true },
+        )
+        // Etat 100 % local (regle n°6) : aucune navigation/query string declenchee.
+        expect(mockPush).not.toHaveBeenCalled()
+    })
+
+    it('badge filtres actifs + Réinitialiser vide l\'etat applique', async () => {
+        const wrapper = mountPage()
+        await flushPromises()
+
+        await wrapper.find('input[data-id="filter-include-archived"]').setValue(true)
+        await wrapper.find('[data-label="commercial.suppliers.filters.apply"]').trigger('click')
+
+        // Le libelle du bouton Filtrer porte le compteur (1 filtre actif).
+        expect(wrapper.find('[data-label="commercial.suppliers.filters.title (1)"]').exists()).toBe(true)
+
+        // Réinitialiser → query propre (setFilters avec objet vide).
+        await wrapper.find('[data-label="commercial.suppliers.filters.reset"]').trigger('click')
+        expect(mockSetFilters).toHaveBeenLastCalledWith({}, { replace: true })
+    })
+})

frontend/modules/commercial/pages/clients/[id]/edit.vue

@@ -303,7 +303,7 @@
                             class="relative bg-white py-4 pl-[28px] pr-[60px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]"
                         >
                             <MalioButtonIcon
-                                v-if="!accountingReadonly"
+                                v-if="!accountingReadonly && visibleRibs.length > 1"
                                 icon="mdi:delete-outline"
                                 variant="ghost"
                                 button-class="absolute top-3 right-3"
@@ -700,7 +700,7 @@ async function submitMain(): Promise<void> {
     mainSubmitting.value = true
     mainErrors.clearErrors()
     try {
-        const updated = await api.patch<ClientDetail>(`/clients/${clientId}`, buildMainPayload(main), {
+        const updated = await api.patch<ClientDetail>(`/clients/${clientId}`, buildMainPayload(main, { forUpdate: true }), {
             headers: { Accept: 'application/ld+json' },
             toast: false,
         })
@@ -870,7 +870,10 @@ async function submitAddresses(): Promise<void> {
             addresses.value,
             addressErrors,
             async (address) => {
-                const body = buildAddressPayload(address, isBillingEmailRequired(address))
+                // Edition d'une adresse existante : champ requis vide envoye en `''`
+                // (NotBlank 422) au lieu d'etre omis — sinon le PATCH garderait
+                // l'ancienne valeur (faux 200). Creation (id null) : omit classique.
+                const body = buildAddressPayload(address, isBillingEmailRequired(address), { forUpdate: address.id !== null })
                 if (address.id === null) {
                     const created = await api.post<{ id: number }>(
                         `/clients/${clientId}/addresses`,
@@ -961,13 +964,18 @@ async function submitAccounting(): Promise<void> {
     try {
         // 1) POST/PATCH des RIB d'abord (erreurs inline par ligne, tous les blocs
         // tentes). Le back exige >=1 RIB persiste pour valider une LCR a l'etape 2.
-        // Seuls les blocs RIB TOTALEMENT vides sont ignores : un RIB partiel (ex.
-        // IBAN seul) est soumis -> 422 NotBlank (label / bic / iban) inline.
+        // On ne saute une amorce neuve vide QUE s'il reste un autre RIB soumettable :
+        // sinon (ex. l'unique RIB existant supprime, remplace par un bloc vide), on la
+        // soumet pour declencher la 422 NotBlank inline plutot que de laisser le DELETE
+        // echouer en « dernier RIB d'une LCR » (message plat sans propertyPath).
+        const hasSubmittableRib = ribs.value.some(r => r.id !== null || !isRibBlank(r))
         const ribHasError = await submitRows(
             ribs.value,
             ribErrors,
             async (rib) => {
-                const body = buildRibPayload(rib)
+                // Edition d'un RIB existant : champ requis vide envoye en `''` (NotBlank
+                // 422) au lieu d'etre omis (sinon le PATCH garderait l'ancienne valeur).
+                const body = buildRibPayload(rib, { forUpdate: rib.id !== null })
                 if (rib.id === null) {
                     const created = await api.post<{ id: number }>(
                         `/clients/${clientId}/ribs`,
@@ -981,10 +989,10 @@ async function submitAccounting(): Promise<void> {
                 }
             },
             error => showError(error),
-            // On ne saute QUE les amorces neuves (id null) totalement vides. Un
-            // RIB existant vide est soumis -> 422 NotBlank inline (sinon la modif
-            // serait perdue en silence avec un faux toast de succes).
-            rib => rib.id === null && isRibBlank(rib),
+            // On ne saute une amorce neuve (id null) totalement vide que si un autre RIB
+            // est soumettable. Un RIB existant vide est toujours soumis -> 422 NotBlank
+            // inline (sinon la modif serait perdue en silence avec un faux toast succes).
+            rib => hasSubmittableRib && rib.id === null && isRibBlank(rib),
         )
         if (ribHasError) return
 

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

@@ -302,7 +302,7 @@
                     >
                         <!-- ariaLabel via v-bind objet (prop camelCase ; aria-* serait un attribut HTML). -->
                         <MalioButtonIcon
-                            v-if="!accountingReadonly"
+                            v-if="!accountingReadonly && visibleRibs.length > 1"
                             icon="mdi:delete-outline"
                             variant="ghost"
                             button-class="absolute top-3 right-3"
@@ -926,8 +926,9 @@ async function submitAccounting(): Promise<void> {
     try {
         // 1) POST/PATCH des RIB d'abord (erreurs inline par ligne, tous les blocs
         // tentes). Le back exige >=1 RIB persiste pour valider une LCR a l'etape 2.
-        // Seuls les blocs RIB TOTALEMENT vides sont ignores : un RIB partiel (ex.
-        // IBAN seul) est soumis -> 422 NotBlank (label / bic / iban) inline.
+        // On ne saute une amorce neuve vide QUE s'il reste un autre RIB soumettable :
+        // sinon (LCR sans aucun RIB rempli) on la soumet -> 422 NotBlank inline.
+        const hasSubmittableRib = ribs.value.some(r => r.id !== null || !isRibBlank(r))
         const ribHasError = await submitRows(
             ribs.value,
             ribErrors,
@@ -947,10 +948,10 @@ async function submitAccounting(): Promise<void> {
                 }
             },
             error => toast.error({ title: t('commercial.clients.toast.error'), message: apiErrorMessage(error) }),
-            // On ne saute QUE les amorces neuves (id null) totalement vides. Un
-            // RIB existant vide est soumis -> 422 NotBlank inline (sinon la modif
-            // serait perdue en silence avec un faux toast de succes).
-            rib => rib.id === null && isRibBlank(rib),
+            // On ne saute une amorce neuve (id null) totalement vide que si un autre RIB
+            // est soumettable. Un RIB existant vide est toujours soumis -> 422 NotBlank
+            // inline (sinon la modif serait perdue en silence avec un faux toast succes).
+            rib => hasSubmittableRib && rib.id === null && isRibBlank(rib),
         )
         if (ribHasError) return
 

frontend/modules/commercial/pages/suppliers/[id]/edit.vue

@@ -0,0 +1,927 @@
+<template>
+    <div>
+        <!-- En-tete : retour consultation + nom du fournisseur. -->
+        <div class="flex items-center gap-3 pt-11">
+            <MalioButtonIcon
+                icon="mdi:arrow-left-bold"
+                icon-size="24"
+                variant="ghost"
+                v-bind="{ ariaLabel: t('commercial.suppliers.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('commercial.suppliers.edit.loading') }}</p>
+        <p v-else-if="error" class="mt-12 text-center text-m-danger">{{ t('commercial.suppliers.edit.notFound') }}</p>
+
+        <template v-else-if="supplier">
+            <!-- ── Bloc principal (pre-rempli, editable si `manage`) ──────────────
+                 Conserve en modification (miroir client) ; edite via son propre
+                 PATCH scope sur le groupe supplier:write:main. Readonly pour les
+                 roles sans `manage` (ex. Compta). Pas de contact inline (ERP-106). -->
+            <div class="mt-[48px] grid grid-cols-3 xl:grid-cols-4 gap-x-[44px] gap-y-4">
+                <MalioInputText
+                    v-model="main.companyName"
+                    :label="t('commercial.suppliers.form.main.companyName')"
+                    :required="true"
+                    :readonly="businessReadonly"
+                    :error="mainErrors.errors.companyName"
+                />
+                <MalioSelectCheckbox
+                    :model-value="main.categoryIris"
+                    :options="mainCategoryOptions"
+                    :label="t('commercial.suppliers.form.main.categories')"
+                    :display-tag="true"
+                    :readonly="businessReadonly"
+                    :required="true"
+                    :error="mainErrors.errors.categories"
+                    @update:model-value="(v: (string | number)[]) => main.categoryIris = v.map(String)"
+                />
+            </div>
+
+            <div v-if="!businessReadonly" class="mt-12 flex justify-center">
+                <MalioButton
+                    variant="primary"
+                    :label="t('commercial.suppliers.edit.save')"
+                    :disabled="mainSubmitting"
+                    @click="submitMain"
+                />
+            </div>
+
+            <!-- ── Onglets : navigation LIBRE, edition independante par onglet ──── -->
+            <MalioTabList v-model="activeTab" :tabs="tabs" :max-visible-tabs="5" :max-width="1100" class="mt-[60px]">
+                <!-- Onglet Information -->
+                <template #information>
+                    <div class="mt-12 grid grid-cols-4 gap-x-[44px] gap-y-4 bg-white py-4 pl-[28px] pr-[60px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]">
+                        <!-- pt-1/pb-1 alignent le textarea (h-full) sur les inputs. -->
+                        <MalioInputTextArea
+                            v-model="information.description"
+                            :label="t('commercial.suppliers.form.information.description')"
+                            resize="none"
+                            group-class="row-span-2 pt-1 pb-1"
+                            text-input="h-full text-lg"
+                            :readonly="businessReadonly"
+                            :error="informationErrors.errors.description"
+                        />
+                        <MalioInputText
+                            v-model="information.competitors"
+                            :label="t('commercial.suppliers.form.information.competitors')"
+                            :readonly="businessReadonly"
+                            :error="informationErrors.errors.competitors"
+                        />
+                        <MalioDate
+                            v-model="information.foundedAt"
+                            :label="t('commercial.suppliers.form.information.foundedAt')"
+                            :readonly="businessReadonly"
+                            :editable="true"
+                            :error="informationErrors.errors.foundedAt"
+                        />
+                        <MalioInputText
+                            v-model="information.employeesCount"
+                            :label="t('commercial.suppliers.form.information.employeesCount')"
+                            :mask="EMPLOYEES_MASK"
+                            :readonly="businessReadonly"
+                            :error="informationErrors.errors.employeesCount"
+                        />
+                        <MalioInputAmount
+                            v-model="information.revenueAmount"
+                            :label="t('commercial.suppliers.form.information.revenueAmount')"
+                            :readonly="businessReadonly"
+                            :error="informationErrors.errors.revenueAmount"
+                        />
+                        <MalioInputText
+                            v-model="information.directorName"
+                            :label="t('commercial.suppliers.form.information.directorName')"
+                            :readonly="businessReadonly"
+                            :error="informationErrors.errors.directorName"
+                        />
+                        <MalioInputAmount
+                            v-model="information.profitAmount"
+                            :label="t('commercial.suppliers.form.information.profitAmount')"
+                            :readonly="businessReadonly"
+                            :error="informationErrors.errors.profitAmount"
+                        />
+                        <!-- Volume previsionnel : specifique fournisseur (entier). -->
+                        <MalioInputText
+                            v-model="information.volumeForecast"
+                            :label="t('commercial.suppliers.form.information.volumeForecast')"
+                            :mask="VOLUME_FORECAST_MASK"
+                            :readonly="businessReadonly"
+                            :error="informationErrors.errors.volumeForecast"
+                        />
+                    </div>
+                    <div v-if="!businessReadonly" class="mt-12 flex justify-center">
+                        <MalioButton
+                            variant="primary"
+                            :label="t('commercial.suppliers.edit.save')"
+                            :disabled="tabSubmitting"
+                            @click="submitInformation"
+                        />
+                    </div>
+                </template>
+
+                <!-- Onglet Contacts -->
+                <template #contacts>
+                    <div class="mt-12 flex flex-col gap-6">
+                        <SupplierContactBlock
+                            v-for="(contact, index) in contacts"
+                            :key="contact.id ?? `new-${index}`"
+                            :model-value="contact"
+                            :title="t('commercial.suppliers.form.contact.title', { n: index + 1 })"
+                            :removable="contacts.length > 1"
+                            :readonly="businessReadonly"
+                            :errors="contactErrors[index]"
+                            @update:model-value="(v) => contacts[index] = v"
+                            @remove="askRemoveContact(index)"
+                        />
+                        <div v-if="!businessReadonly" class="flex justify-center gap-6">
+                            <MalioButton
+                                variant="secondary"
+                                icon-name="mdi:add-bold"
+                                icon-position="left"
+                                :label="t('commercial.suppliers.form.contact.add')"
+                                :disabled="!canAddContact"
+                                @click="addContact"
+                            />
+                            <MalioButton
+                                variant="primary"
+                                :label="t('commercial.suppliers.edit.save')"
+                                :disabled="tabSubmitting"
+                                @click="submitContacts"
+                            />
+                        </div>
+                    </div>
+                </template>
+
+                <!-- Onglet Adresses -->
+                <template #addresses>
+                    <div class="mt-12 flex flex-col gap-6">
+                        <SupplierAddressBlock
+                            v-for="(address, index) in addresses"
+                            :key="address.id ?? `new-${index}`"
+                            :model-value="address"
+                            :title="t('commercial.suppliers.form.address.title', { n: index + 1 })"
+                            :category-options="mainCategoryOptions"
+                            :site-options="siteOptions"
+                            :contact-options="contactOptions"
+                            :country-options="countryOptions"
+                            :removable="addresses.length > 1"
+                            :readonly="businessReadonly"
+                            :errors="addressErrors[index]"
+                            @update:model-value="(v) => addresses[index] = v"
+                            @remove="askRemoveAddress(index)"
+                            @degraded="onAddressDegraded"
+                        />
+                        <div v-if="!businessReadonly" class="flex justify-center gap-6">
+                            <MalioButton
+                                variant="secondary"
+                                icon-name="mdi:add-bold"
+                                icon-position="left"
+                                :label="t('commercial.suppliers.form.address.add')"
+                                :disabled="!canAddAddress"
+                                @click="addAddress"
+                            />
+                            <MalioButton
+                                variant="primary"
+                                :label="t('commercial.suppliers.edit.save')"
+                                :disabled="tabSubmitting"
+                                @click="submitAddresses"
+                            />
+                        </div>
+                    </div>
+                </template>
+
+                <!-- Onglet Comptabilite (present uniquement si accounting.view ;
+                     editable uniquement si accounting.manage). -->
+                <template v-if="canAccountingView" #accounting>
+                    <div class="mt-12 flex flex-col gap-6">
+                        <div class="bg-white py-4 pl-[28px] pr-[60px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]">
+                            <div class="grid grid-cols-4 gap-x-[44px] gap-y-4">
+                                <MalioInputText
+                                    v-model="accounting.siren"
+                                    :label="t('commercial.suppliers.form.accounting.siren')"
+                                    :mask="SIREN_MASK"
+                                    :readonly="accountingReadonly"
+                                    :required="true"
+                                    :error="accountingErrors.errors.siren"
+                                />
+                                <MalioInputText
+                                    v-model="accounting.accountNumber"
+                                    :label="t('commercial.suppliers.form.accounting.accountNumber')"
+                                    :readonly="accountingReadonly"
+                                    :required="true"
+                                    :error="accountingErrors.errors.accountNumber"
+                                />
+                                <MalioSelect
+                                    :model-value="accounting.tvaModeIri"
+                                    :options="tvaModeOptions"
+                                    :label="t('commercial.suppliers.form.accounting.tvaMode')"
+                                    :readonly="accountingReadonly"
+                                    empty-option-label=""
+                                    :required="true"
+                                    :error="accountingErrors.errors.tvaMode"
+                                    @update:model-value="(v: string | number | null) => accounting.tvaModeIri = v === null ? null : String(v)"
+                                />
+                                <MalioInputText
+                                    v-model="accounting.nTva"
+                                    :label="t('commercial.suppliers.form.accounting.nTva')"
+                                    :readonly="accountingReadonly"
+                                    :required="true"
+                                    :error="accountingErrors.errors.nTva"
+                                />
+                                <MalioSelect
+                                    :model-value="accounting.paymentDelayIri"
+                                    :options="paymentDelayOptions"
+                                    :label="t('commercial.suppliers.form.accounting.paymentDelay')"
+                                    :readonly="accountingReadonly"
+                                    empty-option-label=""
+                                    :required="true"
+                                    :error="accountingErrors.errors.paymentDelay"
+                                    @update:model-value="(v: string | number | null) => accounting.paymentDelayIri = v === null ? null : String(v)"
+                                />
+                                <MalioSelect
+                                    :model-value="accounting.paymentTypeIri"
+                                    :options="paymentTypeOptions"
+                                    :label="t('commercial.suppliers.form.accounting.paymentType')"
+                                    :readonly="accountingReadonly"
+                                    empty-option-label=""
+                                    :required="true"
+                                    :error="accountingErrors.errors.paymentType"
+                                    @update:model-value="onPaymentTypeChange"
+                                />
+                                <MalioSelect
+                                    v-if="isBankRequired"
+                                    :model-value="accounting.bankIri"
+                                    :options="bankOptions"
+                                    :label="t('commercial.suppliers.form.accounting.bank')"
+                                    :readonly="accountingReadonly"
+                                    empty-option-label=""
+                                    :required="true"
+                                    :error="accountingErrors.errors.bank"
+                                    @update:model-value="(v: string | number | null) => accounting.bankIri = v === null ? null : String(v)"
+                                />
+                            </div>
+                        </div>
+
+                        <!-- Blocs RIB — affiches uniquement si type de reglement = LCR (RG-2.08). -->
+                        <div
+                            v-for="(rib, index) in visibleRibs"
+                            :key="rib.id ?? `new-${index}`"
+                            class="relative bg-white py-4 pl-[28px] pr-[60px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]"
+                        >
+                            <MalioButtonIcon
+                                v-if="!accountingReadonly && visibleRibs.length > 1"
+                                icon="mdi:delete-outline"
+                                variant="ghost"
+                                button-class="absolute top-3 right-3"
+                                v-bind="{ ariaLabel: t('commercial.suppliers.form.accounting.removeRib') }"
+                                @click="askRemoveRib(index)"
+                            />
+                            <div class="grid grid-cols-4 gap-x-[44px] gap-y-4">
+                                <MalioInputText
+                                    v-model="rib.label"
+                                    :label="t('commercial.suppliers.form.accounting.ribLabel')"
+                                    :readonly="accountingReadonly"
+                                    :required="isRibRequired"
+                                    :error="ribErrors[index]?.label"
+                                />
+                                <MalioInputText
+                                    v-model="rib.bic"
+                                    :label="t('commercial.suppliers.form.accounting.ribBic')"
+                                    :readonly="accountingReadonly"
+                                    :required="isRibRequired"
+                                    :error="ribErrors[index]?.bic"
+                                />
+                                <MalioInputText
+                                    v-model="rib.iban"
+                                    :label="t('commercial.suppliers.form.accounting.ribIban')"
+                                    :readonly="accountingReadonly"
+                                    :required="isRibRequired"
+                                    :error="ribErrors[index]?.iban"
+                                />
+                            </div>
+                        </div>
+
+                        <div v-if="!accountingReadonly" class="flex justify-center gap-6">
+                            <MalioButton
+                                v-if="isRibRequired"
+                                variant="secondary"
+                                icon-name="mdi:add-bold"
+                                icon-position="left"
+                                :label="t('commercial.suppliers.form.accounting.addRib')"
+                                :disabled="!canAddRib"
+                                @click="addRib"
+                            />
+                            <MalioButton
+                                variant="primary"
+                                :label="t('commercial.suppliers.edit.save')"
+                                :disabled="tabSubmitting"
+                                @click="submitAccounting"
+                            />
+                        </div>
+                    </div>
+                </template>
+
+                <!-- Onglets non encore implementes : frame vide (navigation libre). -->
+                <template #transport><ComingSoonPlaceholder /></template>
+                <template #statistics><ComingSoonPlaceholder /></template>
+                <template #reports><ComingSoonPlaceholder /></template>
+                <template #exchanges><ComingSoonPlaceholder /></template>
+            </MalioTabList>
+        </template>
+
+        <!-- Modal de confirmation generique (suppression contact / adresse / RIB). -->
+        <MalioModal v-model="confirmModal.open" modal-class="max-w-md">
+            <template #header>
+                <h2 class="text-[24px] font-bold">{{ t('commercial.suppliers.form.confirmDelete.title') }}</h2>
+            </template>
+            <p>{{ confirmModal.message }}</p>
+            <template #footer>
+                <MalioButton
+                    variant="secondary"
+                    button-class="flex-1"
+                    :label="t('commercial.suppliers.form.confirmDelete.cancel')"
+                    @click="confirmModal.open = false"
+                />
+                <MalioButton
+                    variant="danger"
+                    button-class="flex-1"
+                    :label="t('commercial.suppliers.form.confirmDelete.confirm')"
+                    @click="runConfirm"
+                />
+            </template>
+        </MalioModal>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref } from 'vue'
+import { useSupplier } from '~/modules/commercial/composables/useSupplier'
+import { useSupplierReferentials, type CategoryOption, type RefOption } from '~/modules/commercial/composables/useSupplierReferentials'
+import { useSupplierFormErrors } from '~/modules/commercial/composables/useSupplierFormErrors'
+import {
+    canEditSupplier,
+    categoryOptionsOf,
+    referentialOptionOf,
+    siteOptionsOf,
+    mapContactToDraft,
+    mapAddressToDraft,
+    mapRibToDraft,
+    type SupplierDetail,
+} from '~/modules/commercial/utils/supplierConsultation'
+import {
+    buildAccountingPayload,
+    buildAddressPayload,
+    buildContactPayload,
+    buildInformationPayload,
+    buildMainPayload,
+    buildRibPayload,
+    mapAccountingFormDraft,
+    mapInformationDraft,
+    mapMainDraft,
+    resolveTabEditability,
+    type AccountingFormDraft,
+    type InformationFormDraft,
+    type MainFormDraft,
+    type SupplierEditAbilities,
+} from '~/modules/commercial/utils/supplierEdit'
+import {
+    buildSupplierFormTabKeys,
+    isAddressValid,
+    isBankRequiredForPaymentType,
+    isContactBlank,
+    isContactNamed,
+    isRibBlank,
+    isRibComplete,
+    isRibRequiredForPaymentType,
+} from '~/modules/commercial/utils/supplierFormRules'
+import {
+    emptyAddress,
+    emptyContact,
+    emptyRib,
+    type SupplierAddressFormDraft,
+    type SupplierContactFormDraft,
+    type SupplierRibFormDraft,
+} from '~/modules/commercial/types/supplierForm'
+import { extractApiErrorMessage } from '~/shared/utils/api'
+import { readHistoryTab } from '~/shared/utils/historyTab'
+
+// Masques de saisie (la normalisation finale reste serveur).
+const SIREN_MASK = '#########'
+const EMPLOYEES_MASK = '#######'
+// Volume previsionnel : champ texte borne aux chiffres (entier >= 0 cote back).
+const VOLUME_FORECAST_MASK = '##########'
+
+const { t } = useI18n()
+const api = useApi()
+const toast = useToast()
+const route = useRoute()
+const router = useRouter()
+const { can, canAny } = usePermissions()
+
+// Gating de la route : l'edition exige de pouvoir editer au moins un onglet
+// (`manage` OU `accounting.manage`). Usine et roles en lecture seule sont
+// rediriges vers le repertoire (lui-meme protege).
+if (!canEditSupplier(canAny)) {
+    await navigateTo('/suppliers')
+}
+
+const supplierId = route.params.id as string
+
+const { supplier, loading, error, load } = useSupplier(supplierId)
+const referentials = useSupplierReferentials()
+
+// ── Permissions / editabilite par zone (option 1 ERP-74) ────────────────────
+const abilities = computed<SupplierEditAbilities>(() => ({
+    canManage: can('commercial.suppliers.manage'),
+    canAccountingView: can('commercial.suppliers.accounting.view'),
+    canAccountingManage: can('commercial.suppliers.accounting.manage'),
+}))
+const editability = computed(() => resolveTabEditability(abilities.value))
+// Bloc principal + onglets Information / Contacts / Adresses.
+const businessReadonly = computed(() => !editability.value.businessEditable)
+const canAccountingView = computed(() => editability.value.accountingVisible)
+const accountingReadonly = computed(() => !editability.value.accountingEditable)
+
+const headerTitle = computed(() => supplier.value?.companyName ?? t('commercial.suppliers.edit.title'))
+
+// ── Brouillons editables (pre-remplis depuis le detail) ─────────────────────
+const main = reactive<MainFormDraft>(mapMainDraft({} as SupplierDetail))
+const information = reactive<InformationFormDraft>(mapInformationDraft({} as SupplierDetail))
+const accounting = reactive<AccountingFormDraft>(mapAccountingFormDraft({} as SupplierDetail))
+const contacts = ref<SupplierContactFormDraft[]>([])
+const addresses = ref<SupplierAddressFormDraft[]>([])
+const ribs = ref<SupplierRibFormDraft[]>([])
+
+// Ids des sous-ressources existantes supprimees (DELETE differe au « Valider »).
+const removedContactIds = ref<number[]>([])
+const removedAddressIds = ref<number[]>([])
+const removedRibIds = ref<number[]>([])
+
+const mainSubmitting = ref(false)
+const tabSubmitting = ref(false)
+const addressDegradedNotified = ref(false)
+
+/** Recopie le detail charge dans les brouillons editables. */
+function hydrate(detail: SupplierDetail): void {
+    Object.assign(main, mapMainDraft(detail))
+    Object.assign(information, mapInformationDraft(detail))
+    Object.assign(accounting, mapAccountingFormDraft(detail))
+    contacts.value = (detail.contacts ?? []).map(mapContactToDraft)
+    addresses.value = (detail.addresses ?? []).map(mapAddressToDraft)
+    ribs.value = (detail.ribs ?? []).map(mapRibToDraft)
+    // Chaque bloc reste visible meme vide : si une collection est vide, on amorce
+    // un bloc vierge (non persiste tant qu'incomplet — cf. submit*/canAdd*).
+    if (contacts.value.length === 0) contacts.value.push(emptyContact())
+    if (addresses.value.length === 0) addresses.value.push(emptyAddress())
+    // RIB : amorce un bloc vide seulement si le type de reglement est une LCR
+    // (sinon la section reste masquee — RG-2.08).
+    if (isRibRequired.value && ribs.value.length === 0) ribs.value.push(emptyRib())
+}
+
+// ── Options de selects (referentiels UNION valeurs courantes de l'embed) ─────
+// L'union garantit que les valeurs deja posees s'affichent meme quand le
+// referentiel complet n'est pas chargeable (roles metier sans
+// catalog.categories.view / sites.view → 403, cf. matrice § 2.7).
+function mergeOptions<T extends { value: string }>(primary: T[], extra: T[]): T[] {
+    const seen = new Set(primary.map(o => o.value))
+    return [...primary, ...extra.filter(o => !seen.has(o.value))]
+}
+
+// Categories issues de l'embed (fournisseur + adresses), role-independantes.
+const embedCategoryOptions = computed<CategoryOption[]>(() => {
+    const fromSupplier = categoryOptionsOf(supplier.value?.categories)
+    const fromAddresses = (supplier.value?.addresses ?? []).flatMap(a => categoryOptionsOf(a.categories))
+    return mergeOptions(fromSupplier, fromAddresses)
+})
+// Toutes les categories de type FOURNISSEUR sont autorisees, sur le bloc principal
+// comme sur une adresse (pas de restriction Distributeur/Courtier comme au M1 — RG-2.10).
+const mainCategoryOptions = computed(() => mergeOptions(referentials.categories.value, embedCategoryOptions.value))
+
+const embedSiteOptions = computed<RefOption[]>(() =>
+    mergeOptions([], (supplier.value?.addresses ?? []).flatMap(a => siteOptionsOf(a.sites))),
+)
+const siteOptions = computed(() => mergeOptions(referentials.sites.value, embedSiteOptions.value))
+
+// Contacts deja persistes (iri non null), rattachables a une adresse (M2M).
+const contactOptions = computed<RefOption[]>(() =>
+    contacts.value
+        .filter(c => c.iri !== null)
+        .map(c => ({
+            value: c.iri as string,
+            label: [c.firstName, c.lastName].filter(Boolean).join(' ') || (c.email ?? ''),
+        })),
+)
+
+const countryOptions: RefOption[] = [
+    { value: 'France', label: 'France' },
+    { value: 'Espagne', label: 'Espagne' },
+]
+
+// Selects comptables : referentiel UNION valeur courante de l'embed (libelle).
+const tvaModeOptions = computed(() => mergeOptions(referentials.tvaModes.value, referentialOptionOf(supplier.value?.tvaMode)))
+const paymentDelayOptions = computed(() => mergeOptions(referentials.paymentDelays.value, referentialOptionOf(supplier.value?.paymentDelay)))
+const paymentTypeOptions = computed(() => mergeOptions(
+    referentials.paymentTypes.value.map(p => ({ value: p.value, label: p.label })),
+    referentialOptionOf(supplier.value?.paymentType),
+))
+const bankOptions = computed(() => mergeOptions(referentials.banks.value, referentialOptionOf(supplier.value?.bank)))
+
+// ── Onglets : navigation libre (3 actifs + Compta + 4 coquilles) ────────────
+const tabKeys = computed(() => buildSupplierFormTabKeys(canAccountingView.value, { includeEditOnlyTabs: true }))
+
+const TAB_ICONS: Record<string, string> = {
+    information: 'mdi:account-outline',
+    contacts: 'mdi:account-box-plus-outline',
+    addresses: 'mdi:map-marker-outline',
+    transport: 'mdi:truck-delivery-outline',
+    accounting: 'mdi:bank-circle-outline',
+    statistics: 'mdi:finance',
+    reports: 'mdi:file-document-edit-outline',
+    exchanges: 'mdi:account-group-outline',
+}
+
+const tabs = computed(() => tabKeys.value.map(key => ({
+    key,
+    label: t(`commercial.suppliers.tab.${key}`),
+    icon: TAB_ICONS[key],
+})))
+
+// Onglet initial : repris de la consultation (history.state), sinon Information.
+const activeTab = ref(readHistoryTab(tabKeys.value) ?? 'information')
+
+// ── Navigation ──────────────────────────────────────────────────────────────
+/** Retour consultation en conservant l'onglet courant (via history.state). */
+function goBack(): void {
+    router.push({ path: `/suppliers/${supplierId}`, state: { tab: activeTab.value } })
+}
+
+/**
+ * Message d'erreur a afficher : violation 422 / detail renvoye par le serveur,
+ * sinon un libelle generique. Le 409 d'unicite de nom (bloc principal) est
+ * traduit explicitement par l'appelant.
+ */
+function apiErrorMessage(e: unknown): string {
+    const data = (e as { data?: unknown })?.data
+    return extractApiErrorMessage(data) || t('commercial.suppliers.toast.error')
+}
+
+function showError(e: unknown): void {
+    toast.error({ title: t('commercial.suppliers.toast.error'), message: apiErrorMessage(e) })
+}
+
+// ── Erreurs de validation par champ (ERP-101) ───────────────────────────────
+const {
+    mainErrors,
+    informationErrors,
+    accountingErrors,
+    contactErrors,
+    addressErrors,
+    ribErrors,
+    submitRows,
+} = useSupplierFormErrors()
+
+// ── Bloc principal ───────────────────────────────────────────────────────────
+/** PATCH /suppliers/{id} — groupe supplier:write:main UNIQUEMENT (mode strict). */
+async function submitMain(): Promise<void> {
+    if (businessReadonly.value || mainSubmitting.value) return
+    mainSubmitting.value = true
+    mainErrors.clearErrors()
+    try {
+        const updated = await api.patch<SupplierDetail>(`/suppliers/${supplierId}`, buildMainPayload(main, { forUpdate: true }), {
+            headers: { Accept: 'application/ld+json' },
+            toast: false,
+        })
+        // Reaffiche les valeurs normalisees renvoyees par le serveur (UPPERCASE, RG-2.12).
+        Object.assign(main, mapMainDraft(updated))
+        toast.success({ title: t('commercial.suppliers.toast.updateSuccess') })
+    }
+    catch (e) {
+        // 409 = doublon nom de societe → erreur inline + toast ; 422 → mapping
+        // inline par champ ; autre → toast de fallback. Cf. ERP-101.
+        const status = (e as { response?: { status?: number } })?.response?.status
+        if (status === 409) {
+            const message = t('commercial.suppliers.form.duplicateCompany')
+            mainErrors.setError('companyName', message)
+            toast.error({ title: t('commercial.suppliers.toast.error'), message })
+        }
+        else {
+            mainErrors.handleApiError(e, { fallbackMessage: t('commercial.suppliers.toast.error') })
+        }
+    }
+    finally {
+        mainSubmitting.value = false
+    }
+}
+
+// ── Onglet Information ───────────────────────────────────────────────────────
+/** PATCH /suppliers/{id} — groupe supplier:write:information UNIQUEMENT. */
+async function submitInformation(): Promise<void> {
+    if (businessReadonly.value || tabSubmitting.value) return
+    tabSubmitting.value = true
+    informationErrors.clearErrors()
+    try {
+        await api.patch(`/suppliers/${supplierId}`, buildInformationPayload(information), { toast: false })
+        toast.success({ title: t('commercial.suppliers.toast.updateSuccess') })
+    }
+    catch (e) {
+        informationErrors.handleApiError(e, { fallbackMessage: t('commercial.suppliers.toast.error') })
+    }
+    finally {
+        tabSubmitting.value = false
+    }
+}
+
+// ── Onglet Contacts ───────────────────────────────────────────────────────────
+const canAddContact = computed(() => {
+    const last = contacts.value[contacts.value.length - 1]
+    return last === undefined || isContactNamed(last)
+})
+function addContact(): void {
+    if (canAddContact.value) contacts.value.push(emptyContact())
+}
+
+function askRemoveContact(index: number): void {
+    askConfirm(t('commercial.suppliers.form.confirmDelete.contact'), () => {
+        const removed = contacts.value[index]
+        if (removed?.id != null) removedContactIds.value.push(removed.id)
+        contacts.value.splice(index, 1)
+        contactErrors.value.splice(index, 1)
+        // Garde au moins un bloc visible (cf. amorce a l'hydratation).
+        if (contacts.value.length === 0) contacts.value.push(emptyContact())
+    })
+}
+
+/**
+ * Valide l'onglet Contacts : DELETE des contacts retires (existants), puis
+ * POST/PATCH des blocs restants sur la sous-ressource. Strictement scope a la
+ * collection contacts (endpoints supplier_contact dedies).
+ */
+async function submitContacts(): Promise<void> {
+    if (businessReadonly.value || tabSubmitting.value) return
+    tabSubmitting.value = true
+    contactErrors.value = []
+    try {
+        for (const id of removedContactIds.value) {
+            await api.delete(`/supplier_contacts/${id}`, {}, { toast: false })
+        }
+        removedContactIds.value = []
+
+        // RG-2.13 : au moins un contact requis. Si l'onglet ne contient QUE des
+        // amorces neuves vides, on les soumet -> 422 RG-2.04 inline (nom OU prenom).
+        const hasSubmittableContact = contacts.value.some(c => c.id !== null || !isContactBlank(c))
+        const hasError = await submitRows(
+            contacts.value,
+            contactErrors,
+            async (contact) => {
+                const body = buildContactPayload(contact)
+                if (contact.id === null) {
+                    const created = await api.post<{ '@id'?: string, id: number }>(
+                        `/suppliers/${supplierId}/contacts`,
+                        body,
+                        { headers: { Accept: 'application/ld+json' }, toast: false },
+                    )
+                    contact.id = created.id
+                    contact.iri = created['@id'] ?? null
+                }
+                else {
+                    await api.patch(`/supplier_contacts/${contact.id}`, body, { toast: false })
+                }
+            },
+            error => showError(error),
+            contact => hasSubmittableContact && contact.id === null && isContactBlank(contact),
+        )
+        if (hasError) return
+        toast.success({ title: t('commercial.suppliers.toast.updateSuccess') })
+    }
+    catch (e) {
+        showError(e)
+    }
+    finally {
+        tabSubmitting.value = false
+    }
+}
+
+// ── Onglet Adresses ───────────────────────────────────────────────────────────
+// « + Adresse » desactive tant que la derniere adresse n'est pas valide.
+const canAddAddress = computed(() => {
+    const last = addresses.value[addresses.value.length - 1]
+    return last !== undefined && isAddressValid(last)
+})
+
+function addAddress(): void {
+    if (canAddAddress.value) addresses.value.push(emptyAddress())
+}
+
+function askRemoveAddress(index: number): void {
+    askConfirm(t('commercial.suppliers.form.confirmDelete.address'), () => {
+        const removed = addresses.value[index]
+        if (removed?.id != null) removedAddressIds.value.push(removed.id)
+        addresses.value.splice(index, 1)
+        addressErrors.value.splice(index, 1)
+        // Garde au moins un bloc visible (cf. amorce a l'hydratation).
+        if (addresses.value.length === 0) addresses.value.push(emptyAddress())
+    })
+}
+
+function onAddressDegraded(): void {
+    if (addressDegradedNotified.value) return
+    addressDegradedNotified.value = true
+    toast.warning({
+        title: t('commercial.suppliers.toast.error'),
+        message: t('commercial.suppliers.form.address.degraded'),
+    })
+}
+
+/** Valide l'onglet Adresses : DELETE des adresses retirees puis POST/PATCH. */
+async function submitAddresses(): Promise<void> {
+    if (businessReadonly.value || tabSubmitting.value) return
+    tabSubmitting.value = true
+    addressErrors.value = []
+    try {
+        for (const id of removedAddressIds.value) {
+            await api.delete(`/supplier_addresses/${id}`, {}, { toast: false })
+        }
+        removedAddressIds.value = []
+
+        const hasError = await submitRows(
+            addresses.value,
+            addressErrors,
+            async (address) => {
+                // Edition d'une adresse existante : champ requis vide envoye en `''`
+                // (NotBlank 422) au lieu d'etre omis — sinon le PATCH garderait
+                // l'ancienne valeur (faux 200). Creation (id null) : omit classique.
+                const body = buildAddressPayload(address, { forUpdate: address.id !== null })
+                if (address.id === null) {
+                    const created = await api.post<{ id: number }>(
+                        `/suppliers/${supplierId}/addresses`,
+                        body,
+                        { headers: { Accept: 'application/ld+json' }, toast: false },
+                    )
+                    address.id = created.id
+                }
+                else {
+                    await api.patch(`/supplier_addresses/${address.id}`, body, { toast: false })
+                }
+            },
+            error => showError(error),
+        )
+        if (hasError) return
+        toast.success({ title: t('commercial.suppliers.toast.updateSuccess') })
+    }
+    catch (e) {
+        showError(e)
+    }
+    finally {
+        tabSubmitting.value = false
+    }
+}
+
+// ── Onglet Comptabilite ──────────────────────────────────────────────────────
+const selectedPaymentTypeCode = computed(() =>
+    referentials.paymentTypes.value.find(p => p.value === accounting.paymentTypeIri)?.code ?? null,
+)
+const isBankRequired = computed(() => isBankRequiredForPaymentType(selectedPaymentTypeCode.value))
+const isRibRequired = computed(() => isRibRequiredForPaymentType(selectedPaymentTypeCode.value))
+
+// Les blocs RIB ne sont affiches que pour une LCR (RG-2.08).
+const visibleRibs = computed(() => isRibRequired.value ? ribs.value : [])
+
+function onPaymentTypeChange(value: string | number | null): void {
+    accounting.paymentTypeIri = value === null ? null : String(value)
+    if (!isBankRequired.value) accounting.bankIri = null
+    // Les RIB n'ont de sens que pour une LCR (RG-2.08) : on amorce un bloc vide
+    // quand LCR est choisi, sinon on vide la liste — les RIB deja persistes sont
+    // marques pour suppression serveur au prochain enregistrement.
+    if (isRibRequired.value) {
+        if (ribs.value.length === 0) ribs.value.push(emptyRib())
+    }
+    else {
+        for (const rib of ribs.value) {
+            if (rib.id != null) removedRibIds.value.push(rib.id)
+        }
+        ribs.value = []
+        ribErrors.value = []
+    }
+}
+
+// « + RIB » desactive tant que le dernier bloc RIB n'est pas complet.
+const canAddRib = computed(() => {
+    const last = ribs.value[ribs.value.length - 1]
+    return last !== undefined && isRibComplete(last)
+})
+
+function addRib(): void {
+    if (canAddRib.value) ribs.value.push(emptyRib())
+}
+
+function askRemoveRib(index: number): void {
+    askConfirm(t('commercial.suppliers.form.confirmDelete.rib'), () => {
+        const removed = ribs.value[index]
+        if (removed?.id != null) removedRibIds.value.push(removed.id)
+        ribs.value.splice(index, 1)
+        ribErrors.value.splice(index, 1)
+        // Garde au moins un bloc RIB visible (cf. amorce a l'hydratation).
+        if (ribs.value.length === 0) ribs.value.push(emptyRib())
+    })
+}
+
+/**
+ * Valide l'onglet Comptabilite : POST/PATCH des RIB sur la sous-ressource PUIS
+ * PATCH des scalaires (groupe supplier:write:accounting, exige accounting.manage
+ * cote back) PUIS DELETE des RIB retires. Les RIB crees d'abord : le back valide
+ * RG-2.08 (LCR => au moins un RIB persiste) sur le PATCH scalaires. Aucun champ
+ * main/information dans le payload (mode strict RG-2.16 : sinon 403 sur tout le payload).
+ */
+async function submitAccounting(): Promise<void> {
+    if (accountingReadonly.value || tabSubmitting.value) return
+    tabSubmitting.value = true
+    accountingErrors.clearErrors()
+    try {
+        // 1) POST/PATCH des RIB d'abord (erreurs inline par ligne, tous les blocs
+        // tentes). On ne saute une amorce neuve vide QUE s'il reste un autre RIB
+        // soumettable : sinon (ex. l'unique RIB existant supprime, remplace par un
+        // bloc vide), on la soumet pour declencher la 422 NotBlank inline plutot que
+        // de laisser le DELETE echouer en « dernier RIB d'une LCR » (message plat).
+        const hasSubmittableRib = ribs.value.some(r => r.id !== null || !isRibBlank(r))
+        const ribHasError = await submitRows(
+            ribs.value,
+            ribErrors,
+            async (rib) => {
+                // Edition d'un RIB existant : champ requis vide envoye en `''` (NotBlank
+                // 422) au lieu d'etre omis (sinon le PATCH garderait l'ancienne valeur).
+                const body = buildRibPayload(rib, { forUpdate: rib.id !== null })
+                if (rib.id === null) {
+                    const created = await api.post<{ id: number }>(
+                        `/suppliers/${supplierId}/ribs`,
+                        body,
+                        { headers: { Accept: 'application/ld+json' }, toast: false },
+                    )
+                    rib.id = created.id
+                }
+                else {
+                    await api.patch(`/supplier_ribs/${rib.id}`, body, { toast: false })
+                }
+            },
+            error => showError(error),
+            rib => hasSubmittableRib && rib.id === null && isRibBlank(rib),
+        )
+        if (ribHasError) return
+
+        // 2) PATCH des scalaires comptables (erreurs inline sur leurs champs).
+        try {
+            await api.patch(`/suppliers/${supplierId}`, buildAccountingPayload(accounting, isBankRequired.value), { toast: false })
+        }
+        catch (error) {
+            accountingErrors.handleApiError(error, { fallbackMessage: t('commercial.suppliers.toast.error') })
+            return
+        }
+
+        // 3) DELETE des RIB retires : APRES le PATCH scalaires (si on quitte LCR, le
+        // guard back n'autorise la suppression du dernier RIB qu'une fois le type change).
+        for (const id of removedRibIds.value) {
+            await api.delete(`/supplier_ribs/${id}`, {}, { toast: false })
+        }
+        removedRibIds.value = []
+
+        toast.success({ title: t('commercial.suppliers.toast.updateSuccess') })
+    }
+    catch (e) {
+        showError(e)
+    }
+    finally {
+        tabSubmitting.value = false
+    }
+}
+
+// ── Modal de confirmation generique ──────────────────────────────────────────
+const confirmModal = reactive({
+    open: false,
+    message: '',
+    action: null as null | (() => void),
+})
+
+function askConfirm(message: string, action: () => void): void {
+    confirmModal.message = message
+    confirmModal.action = action
+    confirmModal.open = true
+}
+
+function runConfirm(): void {
+    confirmModal.action?.()
+    confirmModal.action = null
+    confirmModal.open = false
+}
+
+useHead({ title: headerTitle })
+
+onMounted(async () => {
+    // Referentiels en best-effort (echec non bloquant : l'embed alimente les
+    // libelles des valeurs courantes).
+    referentials.loadCommon().catch(() => {})
+    await load()
+    if (supplier.value) hydrate(supplier.value)
+})
+</script>

frontend/modules/commercial/pages/suppliers/[id]/index.vue

@@ -0,0 +1,454 @@
+<template>
+    <div>
+        <!-- En-tete : retour repertoire + nom du fournisseur + actions (Modifier / Archiver|Restaurer). -->
+        <div class="flex items-center gap-3 pt-11">
+            <MalioButtonIcon
+                icon="mdi:arrow-left-bold"
+                icon-size="24"
+                variant="ghost"
+                v-bind="{ ariaLabel: t('commercial.suppliers.consultation.back') }"
+                @click="goBack"
+            />
+            <h1 class="text-[30px] font-semibold text-m-primary">{{ headerTitle }}</h1>
+
+            <!-- gap-12 = 48px : meme espacement que Ajouter / Filtres du repertoire. -->
+            <div class="ml-auto flex items-center gap-12">
+                <MalioButton
+                    v-if="canEdit"
+                    variant="secondary"
+                    icon-name="mdi:pencil-outline"
+                    icon-position="left"
+                    :label="t('commercial.suppliers.action.edit')"
+                    @click="goEdit"
+                />
+                <MalioButton
+                    v-if="showArchive"
+                    variant="secondary"
+                    icon-name="mdi:archive-arrow-down-outline"
+                    icon-position="left"
+                    :label="t('commercial.suppliers.action.archive')"
+                    @click="askToggleArchive"
+                />
+                <MalioButton
+                    v-if="showRestore"
+                    variant="secondary"
+                    icon-name="mdi:archive-arrow-up-outline"
+                    icon-position="left"
+                    :label="t('commercial.suppliers.action.restore')"
+                    @click="askToggleArchive"
+                />
+            </div>
+        </div>
+
+        <!-- Etats de chargement / introuvable. -->
+        <p v-if="loading" class="mt-12 text-center text-black/60">{{ t('commercial.suppliers.consultation.loading') }}</p>
+        <p v-else-if="error" class="mt-12 text-center text-m-danger">{{ t('commercial.suppliers.consultation.notFound') }}</p>
+
+        <template v-else-if="supplier">
+            <!-- ── Formulaire principal (lecture seule) ──────────────────────── -->
+            <div class="mt-[48px] grid grid-cols-3 xl:grid-cols-4 gap-x-[44px] gap-y-4">
+                <MalioInputText
+                    :model-value="supplier.companyName"
+                    :label="t('commercial.suppliers.form.main.companyName')"
+                    readonly
+                />
+                <MalioSelectCheckbox
+                    :model-value="categoryIris"
+                    :options="mainCategoryOptions"
+                    :label="t('commercial.suppliers.form.main.categories')"
+                    :display-tag="true"
+                    readonly
+                />
+            </div>
+
+            <!-- ── Onglets (navigation libre, tout en lecture seule) ─────────── -->
+            <MalioTabList v-model="activeTab" :tabs="tabs" :max-visible-tabs="5" :max-width="1100" class="mt-[60px]">
+                <!-- Onglet Information -->
+                <template #information>
+                    <div class="mt-12 grid grid-cols-4 gap-x-[44px] gap-y-4 bg-white py-4 pl-[28px] pr-[60px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]">
+                        <!-- pt-1/pb-1 alignent le textarea (h-full) en haut ET en bas
+                             sur les inputs (champ 40px centre dans un h-12). -->
+                        <MalioInputTextArea
+                            :model-value="information.description"
+                            :label="t('commercial.suppliers.form.information.description')"
+                            resize="none"
+                            group-class="row-span-2 pt-1 pb-1"
+                            text-input="h-full text-lg"
+                            readonly
+                        />
+                        <MalioInputText
+                            :model-value="information.competitors"
+                            :label="t('commercial.suppliers.form.information.competitors')"
+                            readonly
+                        />
+                        <MalioDate
+                            :model-value="information.foundedAt"
+                            :label="t('commercial.suppliers.form.information.foundedAt')"
+                            readonly
+                        />
+                        <MalioInputText
+                            :model-value="information.employeesCount"
+                            :label="t('commercial.suppliers.form.information.employeesCount')"
+                            readonly
+                        />
+                        <MalioInputAmount
+                            :model-value="information.revenueAmount"
+                            :label="t('commercial.suppliers.form.information.revenueAmount')"
+                            readonly
+                        />
+                        <MalioInputText
+                            :model-value="information.directorName"
+                            :label="t('commercial.suppliers.form.information.directorName')"
+                            readonly
+                        />
+                        <MalioInputAmount
+                            :model-value="information.profitAmount"
+                            :label="t('commercial.suppliers.form.information.profitAmount')"
+                            readonly
+                        />
+                        <!-- Volume previsionnel : specifique fournisseur (entier). -->
+                        <MalioInputText
+                            :model-value="information.volumeForecast"
+                            :label="t('commercial.suppliers.form.information.volumeForecast')"
+                            readonly
+                        />
+                    </div>
+                </template>
+
+                <!-- Onglet Contacts -->
+                <template #contacts>
+                    <div class="mt-12 flex flex-col gap-6">
+                        <SupplierContactBlock
+                            v-for="(contact, index) in contacts"
+                            :key="contact.id ?? index"
+                            :model-value="contact"
+                            :title="t('commercial.suppliers.form.contact.title', { n: index + 1 })"
+                            readonly
+                        />
+                    </div>
+                </template>
+
+                <!-- Onglet Adresses -->
+                <template #addresses>
+                    <div class="mt-12 flex flex-col gap-6">
+                        <SupplierAddressBlock
+                            v-for="(view, index) in addressViews"
+                            :key="view.draft.id ?? index"
+                            :model-value="view.draft"
+                            :title="t('commercial.suppliers.form.address.title', { n: index + 1 })"
+                            :category-options="view.categoryOptions"
+                            :site-options="allSiteOptions"
+                            :contact-options="contactOptions"
+                            :country-options="countryOptions"
+                            readonly
+                        />
+                    </div>
+                </template>
+
+                <!-- Onglet Comptabilite (present uniquement si accounting.view). -->
+                <template v-if="canAccountingView" #accounting>
+                    <div class="mt-12 flex flex-col gap-6">
+                        <div class="bg-white py-4 pl-[28px] pr-[60px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]">
+                            <div class="grid grid-cols-4 gap-x-[44px] gap-y-4">
+                                <MalioInputText
+                                    :model-value="accounting.siren"
+                                    :label="t('commercial.suppliers.form.accounting.siren')"
+                                    :mask="SIREN_MASK"
+                                    readonly
+                                />
+                                <MalioInputText
+                                    :model-value="accounting.accountNumber"
+                                    :label="t('commercial.suppliers.form.accounting.accountNumber')"
+                                    readonly
+                                />
+                                <MalioSelect
+                                    :model-value="accounting.tvaModeIri"
+                                    :options="tvaModeOptions"
+                                    :label="t('commercial.suppliers.form.accounting.tvaMode')"
+                                    empty-option-label=""
+                                    readonly
+                                />
+                                <MalioInputText
+                                    :model-value="accounting.nTva"
+                                    :label="t('commercial.suppliers.form.accounting.nTva')"
+                                    readonly
+                                />
+                                <MalioSelect
+                                    :model-value="accounting.paymentDelayIri"
+                                    :options="paymentDelayOptions"
+                                    :label="t('commercial.suppliers.form.accounting.paymentDelay')"
+                                    empty-option-label=""
+                                    readonly
+                                />
+                                <MalioSelect
+                                    :model-value="accounting.paymentTypeIri"
+                                    :options="paymentTypeOptions"
+                                    :label="t('commercial.suppliers.form.accounting.paymentType')"
+                                    empty-option-label=""
+                                    readonly
+                                />
+                                <MalioSelect
+                                    v-if="accounting.bankIri"
+                                    :model-value="accounting.bankIri"
+                                    :options="bankOptions"
+                                    :label="t('commercial.suppliers.form.accounting.bank')"
+                                    empty-option-label=""
+                                    readonly
+                                />
+                            </div>
+                        </div>
+
+                        <!-- Blocs RIB (0..n), lecture seule. -->
+                        <div
+                            v-for="(rib, index) in ribs"
+                            :key="rib.id ?? index"
+                            class="bg-white py-4 pl-[28px] pr-[60px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]"
+                        >
+                            <div class="grid grid-cols-4 gap-x-[44px] gap-y-4">
+                                <MalioInputText
+                                    :model-value="rib.label"
+                                    :label="t('commercial.suppliers.form.accounting.ribLabel')"
+                                    readonly
+                                />
+                                <MalioInputText
+                                    :model-value="rib.bic"
+                                    :label="t('commercial.suppliers.form.accounting.ribBic')"
+                                    readonly
+                                />
+                                <MalioInputText
+                                    :model-value="rib.iban"
+                                    :label="t('commercial.suppliers.form.accounting.ribIban')"
+                                    readonly
+                                />
+                            </div>
+                        </div>
+                    </div>
+                </template>
+
+                <!-- Onglets non encore implementes : frame vide (navigation libre). -->
+                <template #transport><ComingSoonPlaceholder /></template>
+                <template #statistics><ComingSoonPlaceholder /></template>
+                <template #reports><ComingSoonPlaceholder /></template>
+                <template #exchanges><ComingSoonPlaceholder /></template>
+            </MalioTabList>
+        </template>
+
+        <!-- Modal de confirmation Archiver / Restaurer. -->
+        <MalioModal v-model="confirmOpen" modal-class="max-w-md">
+            <template #header>
+                <h2 class="text-[24px] font-bold">
+                    {{ isArchived ? t('commercial.suppliers.consultation.confirmRestore.title') : t('commercial.suppliers.consultation.confirmArchive.title') }}
+                </h2>
+            </template>
+            <p>{{ isArchived ? t('commercial.suppliers.consultation.confirmRestore.message') : t('commercial.suppliers.consultation.confirmArchive.message') }}</p>
+            <template #footer>
+                <MalioButton
+                    variant="secondary"
+                    button-class="flex-1"
+                    :label="t('commercial.suppliers.form.confirmDelete.cancel')"
+                    @click="confirmOpen = false"
+                />
+                <MalioButton
+                    :variant="isArchived ? 'primary' : 'danger'"
+                    button-class="flex-1"
+                    :label="t('commercial.suppliers.form.confirmDelete.confirm')"
+                    :disabled="toggling"
+                    @click="confirmToggleArchive"
+                />
+            </template>
+        </MalioModal>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { useSupplier } from '~/modules/commercial/composables/useSupplier'
+import { buildSupplierFormTabKeys } from '~/modules/commercial/utils/supplierFormRules'
+import { readHistoryTab } from '~/shared/utils/historyTab'
+import {
+    canEditSupplier,
+    categoryOptionsOf,
+    contactOptionsOf,
+    emptyAddress,
+    mapAccountingDraft,
+    mapAddressView,
+    mapContactToDraft,
+    mapRibToDraft,
+    referentialOptionOf,
+    showArchiveAction,
+    showRestoreAction,
+    type SelectOption,
+    type SupplierDetail,
+} from '~/modules/commercial/utils/supplierConsultation'
+import { emptyContact } from '~/modules/commercial/types/supplierForm'
+
+// Masque d'affichage (purement visuel, la donnee reste celle du serveur).
+const SIREN_MASK = '#########'
+
+const { t } = useI18n()
+const route = useRoute()
+const router = useRouter()
+const toast = useToast()
+const { can, canAny } = usePermissions()
+const authStore = useAuthStore()
+
+// Gating de la route : la consultation exige `view`. Usine (sans view) est
+// redirige vers le repertoire (lui-meme protege). Cf. matrice § 2.7.
+if (!can('commercial.suppliers.view')) {
+    await navigateTo('/suppliers')
+}
+
+const supplierId = route.params.id as string
+
+const { supplier, loading, error, load, archive, restore } = useSupplier(supplierId)
+
+// ── Permissions / visibilite des actions ───────────────────────────────────
+const canAccountingView = computed(() => can('commercial.suppliers.accounting.view'))
+const canEdit = computed(() => canEditSupplier(canAny))
+const isArchived = computed(() => supplier.value?.isArchived === true)
+const showArchive = computed(() => showArchiveAction(can, isArchived.value))
+const showRestore = computed(() => showRestoreAction(can, isArchived.value))
+
+const headerTitle = computed(() => supplier.value?.companyName ?? t('commercial.suppliers.consultation.title'))
+
+// ── Donnees derivees du payload (lecture seule) ────────────────────────────
+const categoryIris = computed(() => (supplier.value?.categories ?? []).map(c => c['@id']))
+
+const information = computed(() => ({
+    description: supplier.value?.description ?? null,
+    competitors: supplier.value?.competitors ?? null,
+    // MalioDate attend strictement YYYY-MM-DD : on tronque l'ISO datetime renvoye.
+    foundedAt: supplier.value?.foundedAt ? supplier.value.foundedAt.slice(0, 10) : null,
+    employeesCount: supplier.value?.employeesCount != null ? String(supplier.value.employeesCount) : null,
+    revenueAmount: supplier.value?.revenueAmount ?? null,
+    profitAmount: supplier.value?.profitAmount ?? null,
+    directorName: supplier.value?.directorName ?? null,
+    volumeForecast: supplier.value?.volumeForecast != null ? String(supplier.value.volumeForecast) : null,
+}))
+
+// Chaque bloc reste visible meme vide en consultation : si la collection est
+// vide, on affiche un bloc vierge en lecture seule (pas de message « Aucun … »).
+const contacts = computed(() => {
+    const list = (supplier.value?.contacts ?? []).map(mapContactToDraft)
+    return list.length ? list : [emptyContact()]
+})
+// Vue par adresse : brouillon + options (sites/categories) propres a l'adresse.
+const addressViews = computed(() => {
+    const views = (supplier.value?.addresses ?? []).map(mapAddressView)
+    return views.length ? views : [{ draft: emptyAddress(), siteOptions: [], categoryOptions: [] }]
+})
+// Exception au placeholder ci-dessus : on n'affiche AUCUN bloc RIB quand le
+// fournisseur n'en a pas (un RIB n'existe que pour un reglement LCR — RG-2.08).
+const ribs = computed(() => (supplier.value?.ribs ?? []).map(mapRibToDraft))
+// Draft comptable (tout null si l'utilisateur n'a pas accounting.view).
+const accounting = computed(() => mapAccountingDraft(supplier.value ?? ({} as SupplierDetail)))
+
+// ── Options des selects (construites depuis l'EMBED, jamais via un GET de
+//    referentiel : /categories et /sites sont en 403 pour les roles metier
+//    non-admin, ce qui laisserait les libelles vides). ───────────────────────
+const mainCategoryOptions = computed(() => categoryOptionsOf(supplier.value?.categories))
+const contactOptions = computed(() => contactOptionsOf(supplier.value?.contacts))
+
+// Liste COMPLETE des sites disponibles, issue de /api/me (groupe me:read — donc
+// pas de 403 pour les roles metier, contrairement a GET /sites). Libelle = numero
+// de departement (2 premiers chiffres du code postal). Permet d'afficher TOUJOURS
+// toutes les cases « Sites » (86 / 17 / 82) dans le bloc adresse, meme celles non
+// rattachees a l'adresse consultee (les rattachees restent cochees via siteIris).
+const allSiteOptions = computed<SelectOption[]>(() =>
+    (authStore.user?.sites ?? []).map(s => ({
+        value: `/api/sites/${s.id}`,
+        label: (s.postalCode ?? '').slice(0, 2),
+    })),
+)
+
+const countryOptions: SelectOption[] = [
+    { value: 'France', label: 'France' },
+    { value: 'Espagne', label: 'Espagne' },
+]
+
+// Selects comptables : libelle issu de l'embed (option unique ou vide).
+const tvaModeOptions = computed(() => referentialOptionOf(supplier.value?.tvaMode))
+const paymentDelayOptions = computed(() => referentialOptionOf(supplier.value?.paymentDelay))
+const paymentTypeOptions = computed(() => referentialOptionOf(supplier.value?.paymentType))
+const bankOptions = computed(() => referentialOptionOf(supplier.value?.bank))
+
+// ── Onglets : navigation LIBRE (pas de sequence forcee en consultation) ────
+// 3 onglets actifs (Information, Contacts, Adresses, + Comptabilite si droit) et
+// 4 coquilles (Transport, Statistiques, Rapports, Echanges).
+const tabKeys = computed(() => buildSupplierFormTabKeys(canAccountingView.value, { includeEditOnlyTabs: true }))
+
+const TAB_ICONS: Record<string, string> = {
+    information: 'mdi:account-outline',
+    contacts: 'mdi:account-box-plus-outline',
+    addresses: 'mdi:map-marker-outline',
+    transport: 'mdi:truck-delivery-outline',
+    accounting: 'mdi:bank-circle-outline',
+    statistics: 'mdi:finance',
+    reports: 'mdi:file-document-edit-outline',
+    exchanges: 'mdi:account-group-outline',
+}
+
+const tabs = computed(() => tabKeys.value.map(key => ({
+    key,
+    label: t(`commercial.suppliers.tab.${key}`),
+    icon: TAB_ICONS[key],
+})))
+
+// Onglet initial : repris de l'edition au retour (history.state), sinon Information.
+const activeTab = ref(readHistoryTab(tabKeys.value) ?? 'information')
+
+// ── Navigation ─────────────────────────────────────────────────────────────
+function goBack(): void {
+    router.push('/suppliers')
+}
+
+/** Bascule en edition en conservant l'onglet courant (via history.state). */
+function goEdit(): void {
+    router.push({ path: `/suppliers/${supplierId}/edit`, state: { tab: activeTab.value } })
+}
+
+// ── Archivage / Restauration ────────────────────────────────────────────────
+const confirmOpen = ref(false)
+const toggling = ref(false)
+
+function askToggleArchive(): void {
+    confirmOpen.value = true
+}
+
+/**
+ * Confirme l'archivage ou la restauration (PATCH isArchived seul). Gere le 409
+ * de conflit d'homonyme actif a la restauration avec un message dedie.
+ */
+async function confirmToggleArchive(): Promise<void> {
+    if (toggling.value) return
+    toggling.value = true
+    const restoring = isArchived.value
+    try {
+        if (restoring) {
+            await restore()
+            toast.success({ title: t('commercial.suppliers.toast.restoreSuccess') })
+        }
+        else {
+            await archive()
+            toast.success({ title: t('commercial.suppliers.toast.archiveSuccess') })
+        }
+        confirmOpen.value = false
+    }
+    catch (e) {
+        const status = (e as { response?: { status?: number } })?.response?.status
+        toast.error({
+            title: t('commercial.suppliers.toast.error'),
+            message: restoring && status === 409
+                ? t('commercial.suppliers.toast.restoreConflict')
+                : t('commercial.suppliers.toast.error'),
+        })
+    }
+    finally {
+        toggling.value = false
+    }
+}
+
+useHead({ title: headerTitle })
+
+onMounted(load)
+</script>

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

@@ -0,0 +1,434 @@
+<template>
+    <div>
+        <PageHeader>
+            {{ t('commercial.suppliers.title') }}
+            <template #actions>
+                <!-- gap-8 = 32px d'espacement entre Filtres et Ajouter. -->
+                <div class="flex items-center gap-8">
+                    <!-- Bouton Filtres 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('commercial.suppliers.add')"
+                        icon-name="mdi:add-bold"
+                        icon-position="left"
+                        @click="goToCreate"
+                    />
+                </div>
+            </template>
+        </PageHeader>
+
+        <!-- Datatable branchee sur usePaginatedList via useSuppliersRepository :
+             pagination serveur, tri companyName ASC par defaut (cote back). -->
+        <MalioDataTable
+            :columns="columns"
+            :items="rows"
+            :total-items="totalItems"
+            :page="currentPage"
+            :per-page="itemsPerPage"
+            :per-page-options="itemsPerPageOptions"
+            row-clickable
+            table-class="table-fixed suppliers-table"
+            :empty-message="t('commercial.suppliers.empty')"
+            @row-click="onRowClick"
+            @update:page="goToPage"
+            @update:per-page="setItemsPerPage"
+        >
+            <!-- Categories : libelles (name) separes par une virgule (spec M2). -->
+            <template #cell-categories="{ item }">
+                {{ formatCategories(item) }}
+            </template>
+
+            <!-- Sites : badges colores (name + color), agreges des adresses. -->
+            <template #cell-sites="{ item }">
+                <span class="flex flex-wrap gap-1">
+                    <span
+                        v-for="site in (item.sites as SupplierSite[])"
+                        :key="site.id"
+                        class="inline-flex items-center rounded-full px-2 py-0.5 font-medium text-white"
+                        :style="{ backgroundColor: site.color }"
+                    >
+                        {{ site.name }}
+                    </span>
+                </span>
+            </template>
+
+            <!-- Derniere activite : date de derniere modification (updatedAt). -->
+            <template #cell-lastActivity="{ item }">
+                {{ formatLastActivity(item) }}
+            </template>
+        </MalioDataTable>
+
+        <div class="flex justify-center mt-4">
+            <MalioButton
+                v-if="canView"
+                variant="primary"
+                :label="t('commercial.suppliers.export')"
+                :disabled="exporting"
+                @click="exportXlsx"
+            />
+        </div>
+
+        <!-- Drawer de filtres : etat BROUILLON, applique uniquement au clic sur
+             « Appliquer ». Meme pattern que le repertoire clients. Etat 100 % local,
+             jamais dans l'URL (regle ABSOLUE n°6). -->
+        <MalioDrawer
+            v-model="filterDrawerOpen"
+            drawer-class="max-w-[450px]"
+            body-class="p-0"
+            footer-class="justify-between border-t border-black p-6"
+        >
+            <template #header>
+                <h2 class="text-[24px] font-bold uppercase">{{ t('commercial.suppliers.filters.title') }}</h2>
+            </template>
+
+            <MalioAccordion>
+                <!-- Recherche : nom societe + contact + email (param `search`, decision D1). -->
+                <MalioAccordionItem :title="t('commercial.suppliers.filters.search')" value="search">
+                    <MalioInputText
+                        v-model="draftSearch"
+                        icon-name="mdi:magnify"
+                    />
+                </MalioAccordionItem>
+
+                <!-- Categories : cases a cocher (multi). Valeur = code stable. -->
+                <MalioAccordionItem :title="t('commercial.suppliers.filters.categories')" value="categories">
+                    <div class="flex flex-col">
+                        <MalioCheckbox
+                            v-for="opt in categoryOptions"
+                            :id="`filter-category-${opt.value}`"
+                            :key="opt.value"
+                            :label="opt.label"
+                            :model-value="draftCategoryCodes.includes(opt.value)"
+                            @update:model-value="(val: boolean) => toggleCategory(opt.value, val)"
+                        />
+                    </div>
+                </MalioAccordionItem>
+
+                <!-- Sites : cases a cocher (multi). Valeur = id du site. -->
+                <MalioAccordionItem :title="t('commercial.suppliers.filters.sites')" value="sites">
+                    <div class="flex flex-col">
+                        <MalioCheckbox
+                            v-for="opt in siteOptions"
+                            :id="`filter-site-${opt.value}`"
+                            :key="opt.value"
+                            :label="opt.label"
+                            :model-value="draftSiteIds.includes(opt.value)"
+                            @update:model-value="(val: boolean) => toggleSite(opt.value, val)"
+                        />
+                    </div>
+                </MalioAccordionItem>
+
+                <!-- Statut : bool unique. Coche = inclut aussi les archives (sinon actifs seuls). -->
+                <MalioAccordionItem :title="t('commercial.suppliers.filters.status')" value="status">
+                    <MalioCheckbox
+                        id="filter-include-archived"
+                        :label="t('commercial.suppliers.filters.includeArchived')"
+                        :model-value="draftIncludeArchived"
+                        @update:model-value="(val: boolean) => draftIncludeArchived = val"
+                    />
+                </MalioAccordionItem>
+            </MalioAccordion>
+
+            <template #footer>
+                <MalioButton
+                    variant="tertiary"
+                    :label="t('commercial.suppliers.filters.reset')"
+                    button-class="w-m-btn-action"
+                    @click="resetFilters"
+                />
+                <MalioButton
+                    variant="primary"
+                    :label="t('commercial.suppliers.filters.apply')"
+                    button-class="w-[170px]"
+                    @click="applyFilters"
+                />
+            </template>
+        </MalioDrawer>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import type { Supplier, SupplierSite } from '~/modules/commercial/composables/useSuppliersRepository'
+
+interface FilterOption {
+    value: string
+    label: string
+}
+
+const { t } = useI18n()
+const api = useApi()
+const router = useRouter()
+const toast = useToast()
+const { can } = usePermissions()
+
+useHead({ title: t('commercial.suppliers.title') })
+
+// Bouton « Ajouter » reserve a `manage` (POST /suppliers garde manage seul →
+// Compta / Usine ne creent pas). « Exporter » et « Filtres » suivent `view`.
+const canManage = computed(() => can('commercial.suppliers.manage'))
+const canView = computed(() => can('commercial.suppliers.view'))
+
+const {
+    items: suppliers,
+    totalItems,
+    currentPage,
+    itemsPerPage,
+    itemsPerPageOptions,
+    fetch: loadSuppliers,
+    goToPage,
+    setItemsPerPage,
+    setFilters,
+} = useSuppliersRepository()
+
+// Mappe les fournisseurs en objets « plats » pour MalioDataTable (items typees
+// Record<string, unknown>[]) : un objet litteral porte une signature d'index
+// implicite, contrairement a l'interface Supplier. Meme pattern que clients.
+const rows = computed(() => suppliers.value.map(supplier => ({
+    id: supplier.id,
+    companyName: supplier.companyName,
+    categories: supplier.categories,
+    sites: supplier.sites,
+    updatedAt: supplier.updatedAt,
+})))
+
+const columns = [
+    { key: 'companyName', label: t('commercial.suppliers.column.companyName') },
+    { key: 'categories', label: t('commercial.suppliers.column.categories') },
+    { key: 'sites', label: t('commercial.suppliers.column.sites') },
+    { key: 'lastActivity', label: t('commercial.suppliers.column.lastActivity') },
+]
+
+/** Libelles des categories du fournisseur, separes par une virgule (spec M2 : name). */
+function formatCategories(item: Record<string, unknown>): string {
+    const categories = (item.categories as Supplier['categories']) ?? []
+    return categories.map(c => c.name).join(', ')
+}
+
+/**
+ * Derniere activite : faute de suivi d'activite metier au M2, on affiche la
+ * date de derniere modification de la fiche (updatedAt, expose en liste via
+ * default:read). Format court francais jj/mm/aaaa.
+ */
+function formatLastActivity(item: Record<string, unknown>): string {
+    const value = item.updatedAt as string | null | undefined
+    if (!value) {
+        return ''
+    }
+
+    // Garde-fou date invalide : un updatedAt mal forme donnerait « Invalid Date ».
+    const date = new Date(value)
+    if (Number.isNaN(date.getTime())) {
+        return ''
+    }
+
+    return date.toLocaleDateString('fr-FR')
+}
+
+/** Clic sur une ligne → ecran Consultation (route a plat /suppliers/{id}). */
+function onRowClick(item: Record<string, unknown>): void {
+    router.push(`/suppliers/${item.id}`)
+}
+
+function goToCreate(): void {
+    router.push('/suppliers/new')
+}
+
+// ── Filtres (drawer) ────────────────────────────────────────────────────────
+// Deux niveaux d'etat (pattern repertoire clients) :
+//  - APPLIED : pilote la liste/l'export + le compteur du bouton. Modifie
+//    uniquement au clic « Appliquer » / « Réinitialiser ».
+//  - DRAFT : edite librement dans le drawer ; recopie vers applied a la validation.
+const filterDrawerOpen = ref(false)
+
+const draftSearch = ref('')
+const draftCategoryCodes = ref<string[]>([])
+const draftSiteIds = ref<string[]>([])
+const draftIncludeArchived = ref(false)
+
+const appliedSearch = ref('')
+const appliedCategoryCodes = ref<string[]>([])
+const appliedSiteIds = ref<string[]>([])
+const appliedIncludeArchived = ref(false)
+
+// Options des selects multi, chargees une fois (referentiels courts).
+const categoryOptions = ref<FilterOption[]>([])
+const siteOptions = ref<FilterOption[]>([])
+
+const activeFilterCount = computed(() => {
+    let count = 0
+    if (appliedSearch.value.trim() !== '') count++
+    if (appliedCategoryCodes.value.length > 0) count++
+    if (appliedSiteIds.value.length > 0) count++
+    if (appliedIncludeArchived.value) count++
+    return count
+})
+
+const filterButtonLabel = computed(() => {
+    const base = t('commercial.suppliers.filters.title')
+    return activeFilterCount.value > 0 ? `${base} (${activeFilterCount.value})` : base
+})
+
+// Recopie l'etat applique vers le brouillon puis ouvre le drawer : la
+// reouverture reflete les filtres actifs.
+function openFilters(): void {
+    draftSearch.value = appliedSearch.value
+    draftCategoryCodes.value = [...appliedCategoryCodes.value]
+    draftSiteIds.value = [...appliedSiteIds.value]
+    draftIncludeArchived.value = appliedIncludeArchived.value
+    filterDrawerOpen.value = true
+}
+
+function toggleCategory(code: string, selected: boolean): void {
+    draftCategoryCodes.value = selected
+        ? [...draftCategoryCodes.value, code]
+        : draftCategoryCodes.value.filter(c => c !== code)
+}
+
+function toggleSite(id: string, selected: boolean): void {
+    draftSiteIds.value = selected
+        ? [...draftSiteIds.value, id]
+        : draftSiteIds.value.filter(s => s !== id)
+}
+
+/**
+ * Construit le payload de filtres serveur a partir de l'etat applique. Cles
+ * `categoryCode[]` / `siteId[]` pour que PHP les parse en tableaux (OR cote back).
+ * Les filtres vides sont omis pour une query propre.
+ */
+function buildFilterPayload(): Record<string, string | string[] | boolean> {
+    const payload: Record<string, string | string[] | boolean> = {}
+    if (appliedSearch.value.trim() !== '') payload.search = appliedSearch.value.trim()
+    if (appliedCategoryCodes.value.length > 0) payload['categoryCode[]'] = [...appliedCategoryCodes.value]
+    if (appliedSiteIds.value.length > 0) payload['siteId[]'] = [...appliedSiteIds.value]
+    if (appliedIncludeArchived.value) payload.includeArchived = true
+    return payload
+}
+
+// « Appliquer » : recopie brouillon → applied, pousse les filtres (retombe en
+// page 1 via usePaginatedList) et ferme le drawer.
+function applyFilters(): void {
+    appliedSearch.value = draftSearch.value.trim()
+    appliedCategoryCodes.value = [...draftCategoryCodes.value]
+    appliedSiteIds.value = [...draftSiteIds.value]
+    appliedIncludeArchived.value = draftIncludeArchived.value
+
+    setFilters(buildFilterPayload(), { replace: true })
+    filterDrawerOpen.value = false
+}
+
+// « Réinitialiser » : vide brouillon ET applied, recharge la liste complete.
+// Le drawer reste ouvert pour montrer le formulaire vide.
+function resetFilters(): void {
+    draftSearch.value = ''
+    draftCategoryCodes.value = []
+    draftSiteIds.value = []
+    draftIncludeArchived.value = false
+
+    appliedSearch.value = ''
+    appliedCategoryCodes.value = []
+    appliedSiteIds.value = []
+    appliedIncludeArchived.value = false
+
+    setFilters({}, { replace: true })
+}
+
+/** Charge les referentiels du drawer (categories FOURNISSEUR + sites) via ?pagination=false. */
+async function loadFilterOptions(): Promise<void> {
+    const [cats, sites] = await Promise.all([
+        api.get<{ member?: Array<{ code: string, name: string }> }>(
+            '/categories',
+            // Taxonomie multi-types (ERP-84) : le filtre du repertoire fournisseurs
+            // ne propose que les categories de type FOURNISSEUR (pas les CLIENT).
+            { pagination: 'false', typeCode: 'FOURNISSEUR' },
+            { headers: { Accept: 'application/ld+json' }, toast: false },
+        ),
+        api.get<{ member?: Array<{ id: number, name: string }> }>(
+            '/sites',
+            { pagination: 'false' },
+            { headers: { Accept: 'application/ld+json' }, toast: false },
+        ),
+    ])
+
+    categoryOptions.value = (cats.member ?? []).map(c => ({ value: c.code, label: c.name }))
+    siteOptions.value = (sites.member ?? []).map(s => ({ value: String(s.id), label: s.name }))
+}
+
+// ── Export XLSX ─────────────────────────────────────────────────────────────
+// Memes filtres que la vue. La colonne SIREN n'est dans le fichier que si
+// l'utilisateur a accounting.view (gere cote back).
+const exporting = ref(false)
+
+async function exportXlsx(): Promise<void> {
+    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 — a generaliser via
+        // un ticket dedie si d'autres exports binaires arrivent.
+        const blob = await api.get<Blob>('/suppliers/export.xlsx', buildFilterPayload(), {
+            responseType: 'blob',
+            toast: false,
+        } as unknown as Parameters<typeof api.get>[2])
+
+        triggerDownload(blob, 'repertoire-fournisseurs.xlsx')
+    }
+    catch {
+        toast.error({
+            title: t('commercial.suppliers.toast.error'),
+            message: t('commercial.suppliers.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(() => {
+    loadSuppliers()
+    // Echec du chargement des referentiels non bloquant : la liste s'affiche,
+    // l'utilisateur perd juste les options de filtre.
+    loadFilterOptions().catch(() => {
+        categoryOptions.value = []
+        siteOptions.value = []
+    })
+})
+</script>
+
+<style scoped>
+/*
+ * Colonne Sites uniquement (3e colonne : companyName, categories, SITES,
+ * lastActivity) : ses badges rendent la cellule trop haute. On reduit le padding
+ * vertical de SON td (16px Malio -> 8px) sans toucher les autres colonnes ni les
+ * couleurs/tailles (qui restent sur les defauts Malio).
+ */
+:deep(.suppliers-table tbody td:nth-child(3)) {
+    padding-top: 8px;
+    padding-bottom: 8px;
+}
+</style>

frontend/modules/commercial/pages/suppliers/new.vue

@@ -0,0 +1,866 @@
+<template>
+    <div>
+        <!-- En-tete : retour vers le repertoire + titre. -->
+        <div class="flex items-center gap-3 pt-11">
+            <MalioButtonIcon
+                icon="mdi:arrow-left-bold"
+                icon-size="24"
+                variant="ghost"
+                v-bind="{ ariaLabel: t('commercial.suppliers.form.back') }"
+                @click="goBack"
+            />
+            <h1 class="text-[30px] font-semibold text-m-primary">{{ t('commercial.suppliers.form.title') }}</h1>
+        </div>
+
+        <!-- ── Formulaire principal (pre-onglets) ─────────────────────────────
+             Sans validation de ce bloc, les onglets restent inaccessibles. Au
+             succes du POST, les champs passent en lecture seule et on bascule
+             automatiquement sur l'onglet Information. Pas de contact inline (ERP-106). -->
+        <div class="mt-[48px] grid grid-cols-3 xl:grid-cols-4 gap-x-[44px] gap-y-4">
+            <MalioInputText
+                v-model="main.companyName"
+                :label="t('commercial.suppliers.form.main.companyName')"
+                :required="true"
+                :readonly="mainLocked"
+                :error="mainErrors.errors.companyName"
+            />
+            <MalioSelectCheckbox
+                :model-value="main.categoryIris"
+                :options="referentials.categories.value"
+                :label="t('commercial.suppliers.form.main.categories')"
+                :display-tag="true"
+                :readonly="mainLocked"
+                :required="true"
+                :error="mainErrors.errors.categories"
+                @update:model-value="(v: (string | number)[]) => main.categoryIris = v.map(String)"
+            />
+        </div>
+
+        <div v-if="!mainLocked" class="mt-12 flex justify-center">
+            <MalioButton
+                variant="primary"
+                :label="t('commercial.suppliers.form.submit')"
+                :disabled="mainSubmitting"
+                @click="submitMain"
+            />
+        </div>
+
+        <!-- ── Onglets a validation incrementale ─────────────────────────────-->
+        <MalioTabList v-model="activeTab" :tabs="tabs" class="mt-[60px]">
+            <!-- Onglet Information -->
+            <template #information>
+                <div class="mt-12 grid grid-cols-4 gap-x-[44px] gap-y-4 bg-white py-4 pl-[28px] pr-[60px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]">
+                    <MalioInputTextArea
+                        v-model="information.description"
+                        :label="t('commercial.suppliers.form.information.description')"
+                        resize="none"
+                        group-class="row-span-2 pt-1 pb-1"
+                        text-input="h-full text-lg"
+                        :readonly="isValidated('information')"
+                        :error="informationErrors.errors.description"
+                    />
+                    <MalioInputText
+                        v-model="information.competitors"
+                        :label="t('commercial.suppliers.form.information.competitors')"
+                        :readonly="isValidated('information')"
+                        :error="informationErrors.errors.competitors"
+                    />
+                    <MalioDate
+                        v-model="information.foundedAt"
+                        :label="t('commercial.suppliers.form.information.foundedAt')"
+                        :readonly="isValidated('information')"
+                        :editable="true"
+                        :error="informationErrors.errors.foundedAt"
+                    />
+                    <MalioInputText
+                        v-model="information.employeesCount"
+                        :label="t('commercial.suppliers.form.information.employeesCount')"
+                        :mask="EMPLOYEES_MASK"
+                        :readonly="isValidated('information')"
+                        :error="informationErrors.errors.employeesCount"
+                    />
+                    <MalioInputAmount
+                        v-model="information.revenueAmount"
+                        :label="t('commercial.suppliers.form.information.revenueAmount')"
+                        :readonly="isValidated('information')"
+                        :error="informationErrors.errors.revenueAmount"
+                    />
+                    <MalioInputText
+                        v-model="information.directorName"
+                        :label="t('commercial.suppliers.form.information.directorName')"
+                        :readonly="isValidated('information')"
+                        :error="informationErrors.errors.directorName"
+                    />
+                    <MalioInputAmount
+                        v-model="information.profitAmount"
+                        :label="t('commercial.suppliers.form.information.profitAmount')"
+                        :readonly="isValidated('information')"
+                        :error="informationErrors.errors.profitAmount"
+                    />
+                    <!-- Volume previsionnel : specifique fournisseur. Champ texte
+                         masque (chiffres uniquement) ; l'entier est resolu au PATCH. -->
+                    <MalioInputText
+                        v-model="information.volumeForecast"
+                        :label="t('commercial.suppliers.form.information.volumeForecast')"
+                        :mask="VOLUME_FORECAST_MASK"
+                        :readonly="isValidated('information')"
+                        :error="informationErrors.errors.volumeForecast"
+                    />
+                </div>
+                <div v-if="!isValidated('information')" class="mt-12 flex justify-center">
+                    <MalioButton
+                        variant="primary"
+                        :label="t('commercial.suppliers.form.submit')"
+                        :disabled="tabSubmitting || supplierId === null"
+                        @click="submitInformation"
+                    />
+                </div>
+            </template>
+
+            <!-- Onglet Contacts -->
+            <template #contacts>
+                <div class="mt-12 flex flex-col gap-6">
+                    <SupplierContactBlock
+                        v-for="(contact, index) in contacts"
+                        :key="index"
+                        :model-value="contact"
+                        :title="t('commercial.suppliers.form.contact.title', { n: index + 1 })"
+                        :removable="index > 0"
+                        :readonly="isValidated('contacts')"
+                        :errors="contactErrors[index]"
+                        @update:model-value="(v) => contacts[index] = v"
+                        @remove="askRemoveContact(index)"
+                    />
+                    <div v-if="!isValidated('contacts')" class="flex justify-center gap-6">
+                        <MalioButton
+                            variant="secondary"
+                            icon-name="mdi:add-bold"
+                            icon-position="left"
+                            :label="t('commercial.suppliers.form.contact.add')"
+                            :disabled="!canAddContact"
+                            @click="addContact"
+                        />
+                        <MalioButton
+                            variant="primary"
+                            :label="t('commercial.suppliers.form.submit')"
+                            :disabled="tabSubmitting"
+                            @click="submitContacts"
+                        />
+                    </div>
+                </div>
+            </template>
+
+            <!-- Onglet Adresses -->
+            <template #addresses>
+                <div class="mt-12 flex flex-col gap-6">
+                    <SupplierAddressBlock
+                        v-for="(address, index) in addresses"
+                        :key="index"
+                        :model-value="address"
+                        :title="t('commercial.suppliers.form.address.title', { n: index + 1 })"
+                        :category-options="referentials.categories.value"
+                        :site-options="referentials.sites.value"
+                        :contact-options="contactOptions"
+                        :country-options="countryOptions"
+                        :removable="index > 0"
+                        :readonly="isValidated('addresses')"
+                        :errors="addressErrors[index]"
+                        @update:model-value="(v) => addresses[index] = v"
+                        @remove="askRemoveAddress(index)"
+                        @degraded="onAddressDegraded"
+                    />
+                    <div v-if="!isValidated('addresses')" class="flex justify-center gap-6">
+                        <MalioButton
+                            variant="secondary"
+                            icon-name="mdi:add-bold"
+                            icon-position="left"
+                            :label="t('commercial.suppliers.form.address.add')"
+                            :disabled="!canAddAddress"
+                            @click="addAddress"
+                        />
+                        <MalioButton
+                            variant="primary"
+                            :label="t('commercial.suppliers.form.submit')"
+                            :disabled="tabSubmitting"
+                            @click="submitAddresses"
+                        />
+                    </div>
+                </div>
+            </template>
+
+            <!-- Onglet Comptabilite (present uniquement si accounting.view) -->
+            <template v-if="canAccountingView" #accounting>
+                <div class="mt-12 flex flex-col gap-6">
+                    <div class="bg-white py-4 pl-[28px] pr-[60px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]">
+                        <div class="grid grid-cols-4 gap-x-[44px] gap-y-4">
+                            <MalioInputText
+                                v-model="accounting.siren"
+                                :label="t('commercial.suppliers.form.accounting.siren')"
+                                :mask="SIREN_MASK"
+                                :readonly="accountingReadonly"
+                                :required="true"
+                                :error="accountingErrors.errors.siren"
+                            />
+                            <MalioInputText
+                                v-model="accounting.accountNumber"
+                                :label="t('commercial.suppliers.form.accounting.accountNumber')"
+                                :readonly="accountingReadonly"
+                                :required="true"
+                                :error="accountingErrors.errors.accountNumber"
+                            />
+                            <MalioSelect
+                                :model-value="accounting.tvaModeIri"
+                                :options="referentials.tvaModes.value"
+                                :label="t('commercial.suppliers.form.accounting.tvaMode')"
+                                :readonly="accountingReadonly"
+                                empty-option-label=""
+                                :required="true"
+                                :error="accountingErrors.errors.tvaMode"
+                                @update:model-value="(v: string | number | null) => accounting.tvaModeIri = v === null ? null : String(v)"
+                            />
+                            <MalioInputText
+                                v-model="accounting.nTva"
+                                :label="t('commercial.suppliers.form.accounting.nTva')"
+                                :readonly="accountingReadonly"
+                                :required="true"
+                                :error="accountingErrors.errors.nTva"
+                            />
+                            <MalioSelect
+                                :model-value="accounting.paymentDelayIri"
+                                :options="referentials.paymentDelays.value"
+                                :label="t('commercial.suppliers.form.accounting.paymentDelay')"
+                                :readonly="accountingReadonly"
+                                empty-option-label=""
+                                :required="true"
+                                :error="accountingErrors.errors.paymentDelay"
+                                @update:model-value="(v: string | number | null) => accounting.paymentDelayIri = v === null ? null : String(v)"
+                            />
+                            <MalioSelect
+                                :model-value="accounting.paymentTypeIri"
+                                :options="referentials.paymentTypes.value"
+                                :label="t('commercial.suppliers.form.accounting.paymentType')"
+                                :readonly="accountingReadonly"
+                                empty-option-label=""
+                                :required="true"
+                                :error="accountingErrors.errors.paymentType"
+                                @update:model-value="onPaymentTypeChange"
+                            />
+                            <MalioSelect
+                                v-if="isBankRequired"
+                                :model-value="accounting.bankIri"
+                                :options="referentials.banks.value"
+                                :label="t('commercial.suppliers.form.accounting.bank')"
+                                :readonly="accountingReadonly"
+                                empty-option-label=""
+                                :required="true"
+                                :error="accountingErrors.errors.bank"
+                                @update:model-value="(v: string | number | null) => accounting.bankIri = v === null ? null : String(v)"
+                            />
+                        </div>
+                    </div>
+
+                    <!-- Blocs RIB — affiches uniquement si type de reglement = LCR (RG-2.08). -->
+                    <div
+                        v-for="(rib, index) in visibleRibs"
+                        :key="index"
+                        class="relative bg-white py-4 pl-[28px] pr-[60px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]"
+                    >
+                        <MalioButtonIcon
+                            v-if="!accountingReadonly && visibleRibs.length > 1"
+                            icon="mdi:delete-outline"
+                            variant="ghost"
+                            button-class="absolute top-3 right-3"
+                            v-bind="{ ariaLabel: t('commercial.suppliers.form.accounting.removeRib') }"
+                            @click="askRemoveRib(index)"
+                        />
+                        <div class="grid grid-cols-4 gap-x-[44px] gap-y-4">
+                            <MalioInputText
+                                v-model="rib.label"
+                                :label="t('commercial.suppliers.form.accounting.ribLabel')"
+                                :readonly="accountingReadonly"
+                                :required="isRibRequired"
+                                :error="ribErrors[index]?.label"
+                            />
+                            <MalioInputText
+                                v-model="rib.bic"
+                                :label="t('commercial.suppliers.form.accounting.ribBic')"
+                                :readonly="accountingReadonly"
+                                :required="isRibRequired"
+                                :error="ribErrors[index]?.bic"
+                            />
+                            <MalioInputText
+                                v-model="rib.iban"
+                                :label="t('commercial.suppliers.form.accounting.ribIban')"
+                                :readonly="accountingReadonly"
+                                :required="isRibRequired"
+                                :error="ribErrors[index]?.iban"
+                            />
+                        </div>
+                    </div>
+
+                    <div v-if="!accountingReadonly" class="flex justify-center gap-6">
+                        <MalioButton
+                            v-if="isRibRequired"
+                            variant="secondary"
+                            icon-name="mdi:add-bold"
+                            icon-position="left"
+                            :label="t('commercial.suppliers.form.accounting.addRib')"
+                            :disabled="!canAddRib"
+                            @click="addRib"
+                        />
+                        <MalioButton
+                            variant="primary"
+                            :label="t('commercial.suppliers.form.submit')"
+                            :disabled="tabSubmitting"
+                            @click="submitAccounting"
+                        />
+                    </div>
+                </div>
+            </template>
+
+            <!-- Onglet placeholder : frame vide, passage automatique. -->
+            <template #transport><ComingSoonPlaceholder /></template>
+        </MalioTabList>
+
+        <!-- Modal de confirmation generique (suppression contact/adresse/RIB). -->
+        <MalioModal v-model="confirmModal.open" modal-class="max-w-md">
+            <template #header>
+                <h2 class="text-[24px] font-bold">{{ t('commercial.suppliers.form.confirmDelete.title') }}</h2>
+            </template>
+            <p>{{ confirmModal.message }}</p>
+            <template #footer>
+                <MalioButton
+                    variant="secondary"
+                    button-class="flex-1"
+                    :label="t('commercial.suppliers.form.confirmDelete.cancel')"
+                    @click="confirmModal.open = false"
+                />
+                <MalioButton
+                    variant="danger"
+                    button-class="flex-1"
+                    :label="t('commercial.suppliers.form.confirmDelete.confirm')"
+                    @click="runConfirm"
+                />
+            </template>
+        </MalioModal>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { useSupplierReferentials, type RefOption } from '~/modules/commercial/composables/useSupplierReferentials'
+import { useSupplierFormErrors } from '~/modules/commercial/composables/useSupplierFormErrors'
+import {
+    buildSupplierFormTabKeys,
+    SUPPLIER_FORM_PLACEHOLDER_TABS,
+    isAddressValid,
+    isBankRequiredForPaymentType,
+    isContactBlank,
+    isContactNamed,
+    isRibBlank,
+    isRibComplete,
+    isRibRequiredForPaymentType,
+    lastFillableTabKey,
+} from '~/modules/commercial/utils/supplierFormRules'
+import {
+    buildAccountingPayload,
+    buildAddressPayload,
+    buildContactPayload,
+    buildInformationPayload,
+    buildMainPayload,
+    buildRibPayload,
+} from '~/modules/commercial/utils/supplierEdit'
+import {
+    emptyAddress,
+    emptyContact,
+    emptyRib,
+    type SupplierAddressFormDraft,
+    type SupplierContactFormDraft,
+    type SupplierRibFormDraft,
+} from '~/modules/commercial/types/supplierForm'
+import { extractApiErrorMessage } from '~/shared/utils/api'
+
+// Masques de saisie (la normalisation finale reste serveur).
+const SIREN_MASK = '#########'
+const EMPLOYEES_MASK = '#######'
+// Volume previsionnel : champ texte borne aux chiffres (entier >= 0 cote back).
+const VOLUME_FORECAST_MASK = '##########'
+
+const { t } = useI18n()
+const api = useApi()
+const toast = useToast()
+const router = useRouter()
+const { can } = usePermissions()
+
+/** Retour vers le repertoire fournisseurs (fleche d'en-tete). */
+function goBack(): void {
+    router.push('/suppliers')
+}
+
+/**
+ * Message d'erreur a afficher dans un toast a partir d'une erreur d'API. Retourne
+ * TOUJOURS une chaine (le composant de toast plante sur `undefined`).
+ */
+function apiErrorMessage(error: unknown): string {
+    const data = (error as { data?: unknown })?.data
+    return extractApiErrorMessage(data) || t('commercial.suppliers.toast.error')
+}
+
+// ── Erreurs de validation par champ (ERP-101) ───────────────────────────────
+const {
+    mainErrors,
+    informationErrors,
+    accountingErrors,
+    contactErrors,
+    addressErrors,
+    ribErrors,
+    submitRows,
+} = useSupplierFormErrors()
+
+useHead({ title: t('commercial.suppliers.form.title') })
+
+// Gating de la route : la creation est reservee a `manage`. Compta (accounting
+// seul) et Usine sont rediriges vers le repertoire.
+if (!can('commercial.suppliers.manage')) {
+    await navigateTo('/suppliers')
+}
+
+const canAccountingView = computed(() => can('commercial.suppliers.accounting.view'))
+const canAccountingManage = computed(() => can('commercial.suppliers.accounting.manage'))
+
+const referentials = useSupplierReferentials()
+
+// ── Etat du fournisseur cree ────────────────────────────────────────────────
+const supplierId = ref<number | null>(null)
+const mainLocked = ref(false)
+const mainSubmitting = ref(false)
+const tabSubmitting = ref(false)
+
+// ── Formulaire principal ────────────────────────────────────────────────────
+const main = reactive({
+    companyName: null as string | null,
+    categoryIris: [] as string[],
+})
+
+/** POST /suppliers (groupe supplier:write:main). Au succes : verrouille + bascule Information. */
+async function submitMain(): Promise<void> {
+    if (mainSubmitting.value) return
+    mainSubmitting.value = true
+    mainErrors.clearErrors()
+    try {
+        const created = await api.post<SupplierResponse>('/suppliers', buildMainPayload(main), {
+            headers: { Accept: 'application/ld+json' },
+            toast: false,
+        })
+
+        supplierId.value = created.id
+        // Reaffiche la valeur normalisee renvoyee par le serveur (UPPERCASE, RG-2.12).
+        main.companyName = created.companyName ?? main.companyName
+
+        mainLocked.value = true
+        // Information est facultatif : on deverrouille jusqu'a Contacts (index 1).
+        unlockedIndex.value = tabIndex('contacts')
+        activeTab.value = 'information'
+        toast.success({ title: t('commercial.suppliers.toast.createSuccess') })
+    }
+    catch (error) {
+        // 409 = doublon nom de societe (RG d'unicite) → erreur inline + toast ;
+        // 422 → mapping inline par champ ; autre → toast de fallback (ERP-101).
+        const status = (error as { response?: { status?: number } })?.response?.status
+        if (status === 409) {
+            const message = t('commercial.suppliers.form.duplicateCompany')
+            mainErrors.setError('companyName', message)
+            toast.error({ title: t('commercial.suppliers.toast.error'), message })
+        }
+        else {
+            mainErrors.handleApiError(error, { fallbackMessage: t('commercial.suppliers.toast.error') })
+        }
+    }
+    finally {
+        mainSubmitting.value = false
+    }
+}
+
+// ── Onglets : ordre + gating progressif ─────────────────────────────────────
+const activeTab = ref('information')
+// Index du dernier onglet deverrouille (-1 tant que le fournisseur n'est pas cree).
+const unlockedIndex = ref(-1)
+// Onglets valides (passent en lecture seule).
+const validated = reactive<Record<string, boolean>>({})
+
+const tabKeys = computed(() => buildSupplierFormTabKeys(canAccountingView.value))
+
+// Dernier onglet REMPLISSABLE par le role : sa validation cloture l'ajout.
+const lastFillableTab = computed(() => lastFillableTabKey(tabKeys.value))
+
+// Icone (Iconify) affichee dans l'onglet, par cle.
+const TAB_ICONS: Record<string, string> = {
+    information: 'mdi:account-outline',
+    contacts: 'mdi:account-box-plus-outline',
+    addresses: 'mdi:map-marker-outline',
+    transport: 'mdi:truck-delivery-outline',
+    accounting: 'mdi:bank-circle-outline',
+}
+
+const tabs = computed(() => tabKeys.value.map((key, index) => ({
+    key,
+    label: t(`commercial.suppliers.tab.${key}`),
+    icon: TAB_ICONS[key],
+    disabled: index > unlockedIndex.value,
+})))
+
+function isValidated(key: string): boolean {
+    return validated[key] === true
+}
+
+function tabIndex(key: string): number {
+    return tabKeys.value.indexOf(key)
+}
+
+/**
+ * Marque l'onglet valide. Si c'est le dernier onglet remplissable, l'ajout est
+ * termine : toast final + redirection vers la liste, et on retourne true. Sinon,
+ * deverrouille et avance a l'onglet suivant, et retourne false.
+ */
+function completeTab(key: string): boolean {
+    validated[key] = true
+    if (key === lastFillableTab.value) {
+        toast.success({ title: t('commercial.suppliers.toast.addComplete') })
+        router.push('/suppliers')
+        return true
+    }
+    const next = tabKeys.value[tabIndex(key) + 1]
+    unlockedIndex.value = Math.max(unlockedIndex.value, tabIndex(key) + 1)
+    if (next) activeTab.value = next
+    return false
+}
+
+// Passage automatique sur les onglets coquille (Transport).
+watch(activeTab, (key) => {
+    if ((SUPPLIER_FORM_PLACEHOLDER_TABS as readonly string[]).includes(key)) {
+        const next = tabKeys.value[tabIndex(key) + 1]
+        unlockedIndex.value = Math.max(unlockedIndex.value, tabIndex(key) + 1)
+        if (next) activeTab.value = next
+    }
+})
+
+// ── Onglet Information ──────────────────────────────────────────────────────
+const information = reactive({
+    description: null as string | null,
+    competitors: null as string | null,
+    foundedAt: null as string | null,
+    employeesCount: null as string | null,
+    revenueAmount: null as string | null,
+    profitAmount: null as string | null,
+    directorName: null as string | null,
+    volumeForecast: null as string | null,
+})
+
+/** PATCH /suppliers/{id} — mode strict : uniquement les champs du groupe information. */
+async function submitInformation(): Promise<void> {
+    if (supplierId.value === null || tabSubmitting.value) return
+    tabSubmitting.value = true
+    informationErrors.clearErrors()
+    try {
+        await api.patch(`/suppliers/${supplierId.value}`, buildInformationPayload(information), { toast: false })
+        if (completeTab('information')) return
+        toast.success({ title: t('commercial.suppliers.toast.updateSuccess') })
+    }
+    catch (error) {
+        informationErrors.handleApiError(error, { fallbackMessage: t('commercial.suppliers.toast.error') })
+    }
+    finally {
+        tabSubmitting.value = false
+    }
+}
+
+// ── Onglet Contacts ─────────────────────────────────────────────────────────
+const contacts = ref<SupplierContactFormDraft[]>([emptyContact()])
+
+// « + Nouveau contact » desactive tant que le dernier bloc n'a ni nom ni prenom.
+const canAddContact = computed(() => {
+    const last = contacts.value[contacts.value.length - 1]
+    return last !== undefined && isContactNamed(last)
+})
+
+function addContact(): void {
+    if (canAddContact.value) contacts.value.push(emptyContact())
+}
+
+function askRemoveContact(index: number): void {
+    askConfirm(t('commercial.suppliers.form.confirmDelete.contact'), () => {
+        contacts.value.splice(index, 1)
+        contactErrors.value.splice(index, 1)
+    })
+}
+
+/** POST/PATCH des contacts sur la sous-ressource /suppliers/{id}/contacts. */
+async function submitContacts(): Promise<void> {
+    if (supplierId.value === null || tabSubmitting.value) return
+    tabSubmitting.value = true
+    try {
+        // RG-2.13 : au moins un contact requis. Si l'onglet ne contient QUE des
+        // amorces vides, on les soumet pour declencher la 422 RG-2.04 inline.
+        const hasSubmittableContact = contacts.value.some(c => c.id !== null || !isContactBlank(c))
+        const hasError = await submitRows(
+            contacts.value,
+            contactErrors,
+            async (contact) => {
+                const body = buildContactPayload(contact)
+                if (contact.id === null) {
+                    const created = await api.post<ContactResponse>(
+                        `/suppliers/${supplierId.value}/contacts`,
+                        body,
+                        { headers: { Accept: 'application/ld+json' }, toast: false },
+                    )
+                    contact.id = created.id
+                    contact.iri = created['@id'] ?? null
+                }
+                else {
+                    await api.patch(`/supplier_contacts/${contact.id}`, body, { toast: false })
+                }
+            },
+            error => toast.error({ title: t('commercial.suppliers.toast.error'), message: apiErrorMessage(error) }),
+            contact => hasSubmittableContact && contact.id === null && isContactBlank(contact),
+        )
+        if (hasError) return
+        if (completeTab('contacts')) return
+        toast.success({ title: t('commercial.suppliers.toast.updateSuccess') })
+    }
+    finally {
+        tabSubmitting.value = false
+    }
+}
+
+// ── Onglet Adresses ─────────────────────────────────────────────────────────
+const addresses = ref<SupplierAddressFormDraft[]>([emptyAddress()])
+const addressDegradedNotified = ref(false)
+
+// Contacts deja crees, rattachables a une adresse (M2M, via leur IRI).
+const contactOptions = computed<RefOption[]>(() =>
+    contacts.value
+        .filter(c => c.iri !== null)
+        .map(c => ({
+            value: c.iri as string,
+            label: [c.firstName, c.lastName].filter(Boolean).join(' ') || (c.email ?? ''),
+        })),
+)
+
+// Pays disponibles (France preselectionnee par defaut sur chaque adresse).
+const countryOptions: RefOption[] = [
+    { value: 'France', label: 'France' },
+    { value: 'Espagne', label: 'Espagne' },
+]
+
+// « + Adresse » desactive tant que la derniere adresse n'est pas valide.
+const canAddAddress = computed(() => {
+    const last = addresses.value[addresses.value.length - 1]
+    return last !== undefined && isAddressValid(last)
+})
+
+function addAddress(): void {
+    if (canAddAddress.value) addresses.value.push(emptyAddress())
+}
+
+function askRemoveAddress(index: number): void {
+    askConfirm(t('commercial.suppliers.form.confirmDelete.address'), () => {
+        addresses.value.splice(index, 1)
+        addressErrors.value.splice(index, 1)
+    })
+}
+
+/** Avertit une seule fois quand l'autocompletion d'adresse bascule en degrade. */
+function onAddressDegraded(): void {
+    if (addressDegradedNotified.value) return
+    addressDegradedNotified.value = true
+    toast.warning({
+        title: t('commercial.suppliers.toast.error'),
+        message: t('commercial.suppliers.form.address.degraded'),
+    })
+}
+
+/** POST/PATCH des adresses sur la sous-ressource /suppliers/{id}/addresses. */
+async function submitAddresses(): Promise<void> {
+    if (supplierId.value === null || tabSubmitting.value) return
+    tabSubmitting.value = true
+    try {
+        const hasError = await submitRows(
+            addresses.value,
+            addressErrors,
+            async (address) => {
+                const body = buildAddressPayload(address)
+                if (address.id === null) {
+                    const created = await api.post<{ id: number }>(
+                        `/suppliers/${supplierId.value}/addresses`,
+                        body,
+                        { headers: { Accept: 'application/ld+json' }, toast: false },
+                    )
+                    address.id = created.id
+                }
+                else {
+                    await api.patch(`/supplier_addresses/${address.id}`, body, { toast: false })
+                }
+            },
+            error => toast.error({ title: t('commercial.suppliers.toast.error'), message: apiErrorMessage(error) }),
+        )
+        if (hasError) return
+        if (completeTab('addresses')) return
+        toast.success({ title: t('commercial.suppliers.toast.updateSuccess') })
+    }
+    finally {
+        tabSubmitting.value = false
+    }
+}
+
+// ── Onglet Comptabilite ─────────────────────────────────────────────────────
+const accounting = reactive({
+    siren: null as string | null,
+    accountNumber: null as string | null,
+    tvaModeIri: null as string | null,
+    nTva: null as string | null,
+    paymentDelayIri: null as string | null,
+    paymentTypeIri: null as string | null,
+    bankIri: null as string | null,
+})
+const ribs = ref<SupplierRibFormDraft[]>([])
+
+// L'onglet est editable seulement avec accounting.manage (sinon lecture seule).
+const accountingReadonly = computed(() => isValidated('accounting') || !canAccountingManage.value)
+
+// Code du type de reglement selectionne (pour RG-2.07 / RG-2.08).
+const selectedPaymentTypeCode = computed(() =>
+    referentials.paymentTypes.value.find(p => p.value === accounting.paymentTypeIri)?.code ?? null,
+)
+const isBankRequired = computed(() => isBankRequiredForPaymentType(selectedPaymentTypeCode.value))
+const isRibRequired = computed(() => isRibRequiredForPaymentType(selectedPaymentTypeCode.value))
+
+// Les blocs RIB ne sont affiches que pour une LCR (RG-2.08).
+const visibleRibs = computed(() => isRibRequired.value ? ribs.value : [])
+
+function onPaymentTypeChange(value: string | number | null): void {
+    accounting.paymentTypeIri = value === null ? null : String(value)
+    // La banque n'a de sens que pour un virement : on la vide sinon (RG-2.07).
+    if (!isBankRequired.value) accounting.bankIri = null
+    // Les RIB n'ont de sens que pour une LCR (RG-2.08) : amorce un bloc vide quand
+    // LCR est choisi, vide la liste sinon (pas de RIB fantome soumis).
+    if (isRibRequired.value) {
+        if (ribs.value.length === 0) ribs.value.push(emptyRib())
+    }
+    else {
+        ribs.value = []
+        ribErrors.value = []
+    }
+}
+
+// « + RIB » desactive tant que le dernier bloc RIB n'est pas complet.
+const canAddRib = computed(() => {
+    const last = ribs.value[ribs.value.length - 1]
+    return last !== undefined && isRibComplete(last)
+})
+
+function addRib(): void {
+    if (canAddRib.value) ribs.value.push(emptyRib())
+}
+
+function askRemoveRib(index: number): void {
+    askConfirm(t('commercial.suppliers.form.confirmDelete.rib'), () => {
+        ribs.value.splice(index, 1)
+        ribErrors.value.splice(index, 1)
+        // Garde au moins un bloc RIB visible.
+        if (ribs.value.length === 0) ribs.value.push(emptyRib())
+    })
+}
+
+/**
+ * Valide l'onglet Comptabilite : POST/PATCH des RIB sur /suppliers/{id}/ribs PUIS
+ * PATCH des scalaires (groupe supplier:write:accounting). Les RIB d'abord : le back
+ * valide RG-2.08 (LCR => au moins un RIB persiste) sur le PATCH scalaires, les RIB
+ * doivent donc exister en base AVANT. Deux appels distincts (mode strict).
+ */
+async function submitAccounting(): Promise<void> {
+    if (supplierId.value === null || tabSubmitting.value) return
+    tabSubmitting.value = true
+    accountingErrors.clearErrors()
+    try {
+        // 1) POST/PATCH des RIB d'abord (erreurs inline par ligne). On ne saute une
+        // amorce neuve vide QUE s'il reste un autre RIB soumettable : sinon (LCR sans
+        // aucun RIB rempli) on la soumet pour declencher la 422 NotBlank inline.
+        const hasSubmittableRib = ribs.value.some(r => r.id !== null || !isRibBlank(r))
+        const ribHasError = await submitRows(
+            ribs.value,
+            ribErrors,
+            async (rib) => {
+                const body = buildRibPayload(rib)
+                if (rib.id === null) {
+                    const created = await api.post<{ id: number }>(
+                        `/suppliers/${supplierId.value}/ribs`,
+                        body,
+                        { headers: { Accept: 'application/ld+json' }, toast: false },
+                    )
+                    rib.id = created.id
+                }
+                else {
+                    await api.patch(`/supplier_ribs/${rib.id}`, body, { toast: false })
+                }
+            },
+            error => toast.error({ title: t('commercial.suppliers.toast.error'), message: apiErrorMessage(error) }),
+            rib => hasSubmittableRib && rib.id === null && isRibBlank(rib),
+        )
+        if (ribHasError) return
+
+        // 2) PATCH des scalaires comptables (erreurs inline sur leurs champs).
+        try {
+            await api.patch(
+                `/suppliers/${supplierId.value}`,
+                buildAccountingPayload(accounting, isBankRequired.value),
+                { toast: false },
+            )
+        }
+        catch (error) {
+            accountingErrors.handleApiError(error, { fallbackMessage: t('commercial.suppliers.toast.error') })
+            return
+        }
+
+        if (completeTab('accounting')) return
+        toast.success({ title: t('commercial.suppliers.toast.updateSuccess') })
+    }
+    finally {
+        tabSubmitting.value = false
+    }
+}
+
+// ── Modal de confirmation generique ─────────────────────────────────────────
+const confirmModal = reactive({
+    open: false,
+    message: '',
+    action: null as null | (() => void),
+})
+
+function askConfirm(message: string, action: () => void): void {
+    confirmModal.message = message
+    confirmModal.action = action
+    confirmModal.open = true
+}
+
+function runConfirm(): void {
+    confirmModal.action?.()
+    confirmModal.action = null
+    confirmModal.open = false
+}
+
+// ── Types de reponse API ────────────────────────────────────────────────────
+interface SupplierResponse {
+    id: number
+    companyName: string | null
+}
+
+interface ContactResponse {
+    '@id'?: string
+    id: number
+}
+
+onMounted(() => {
+    // Echec du chargement des referentiels non bloquant : les selects restent vides.
+    referentials.loadCommon().catch(() => {})
+})
+</script>