From 29ee4e9fd0f7e6e96eb97620c25f4b867fca93c2 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Tue, 2 Jun 2026 17:25:09 +0200
Subject: [PATCH] feat(front) : page ajouter un client (formulaire principal +
 onglets) (ERP-63)

- pages/clients/new.vue : route /clients/new gatee par commercial.clients.manage.
  Formulaire principal (POST /clients) puis validation incrementale des onglets
  via MalioTabList ; un onglet valide passe en lecture seule, passage automatique
  au suivant. Information (PATCH groupe information), Contact/Adresse (sous-ressources
  contacts/addresses), Comptabilite (PATCH scalaires accounting + POST ribs, gate
  accounting.view/manage), onglets coquille auto-avances. Mode strict RG-1.28 :
  chaque requete ne porte que les champs de son groupe.
- i18n : cles commercial.clients.form.* (formulaire, onglets, confirmation, toasts).

RG-1.04 (Information obligatoire pour la Commerciale) : non miroitee cote front
(roles = IRIs dans /api/me, Bureau == Commerciale en permissions) ; appliquee de
maniere fiable par le back. A rebrancher quand un code de role sera expose.
---
 frontend/i18n/locales/fr.json                 |  84 ++
 .../modules/commercial/pages/clients/new.vue  | 891 ++++++++++++++++++
 2 files changed, 975 insertions(+)
 create mode 100644 frontend/modules/commercial/pages/clients/new.vue

diff --git a/frontend/i18n/locales/fr.json b/frontend/i18n/locales/fr.json
index b3c0490..a01ee69 100644
--- a/frontend/i18n/locales/fr.json
+++ b/frontend/i18n/locales/fr.json
@@ -99,6 +99,90 @@
                 "phoneFormat": "Format de téléphone invalide (attendu : XX XX XX XX XX).",
                 "emailFormat": "Format d'email invalide.",
                 "addressCategoryForbidden": "Une catégorie « Distributeur » ou « Courtier » ne peut pas qualifier une adresse."
+            },
+            "form": {
+                "title": "Ajouter un client",
+                "submit": "Valider",
+                "duplicateCompany": "Un client portant ce nom de société existe déjà.",
+                "main": {
+                    "companyName": "Nom de l'entreprise",
+                    "firstName": "Prénom",
+                    "lastName": "Nom",
+                    "email": "Email",
+                    "phonePrimary": "Téléphone",
+                    "phoneSecondary": "Téléphone (2)",
+                    "addPhone": "Ajouter un numéro",
+                    "categories": "Catégories",
+                    "relation": "Relation",
+                    "relationNone": "Aucune",
+                    "relationDistributor": "Distributeur",
+                    "relationBroker": "Courtier",
+                    "distributorName": "Nom du distributeur",
+                    "brokerName": "Nom du courtier",
+                    "triageService": "Prestation de triage"
+                },
+                "information": {
+                    "description": "Description",
+                    "competitors": "Concurrents",
+                    "foundedAt": "Date de création",
+                    "employeesCount": "Nombre de salariés",
+                    "revenueAmount": "Chiffre d'affaires",
+                    "profitAmount": "Résultat",
+                    "directorName": "Dirigeant"
+                },
+                "contact": {
+                    "title": "Contact {n}",
+                    "lastName": "Nom",
+                    "firstName": "Prénom",
+                    "jobTitle": "Fonction",
+                    "email": "Email",
+                    "phonePrimary": "Téléphone",
+                    "phoneSecondary": "Téléphone (2)",
+                    "addPhone": "Ajouter un numéro",
+                    "remove": "Supprimer le contact",
+                    "add": "Nouveau contact"
+                },
+                "address": {
+                    "title": "Adresse {n}",
+                    "prospect": "Prospect",
+                    "delivery": "Adresse de livraison",
+                    "billing": "Facturation",
+                    "categories": "Catégorie",
+                    "country": "Pays",
+                    "postalCode": "Code postal",
+                    "city": "Ville",
+                    "street": "Adresse",
+                    "streetComplement": "Adresse complémentaire",
+                    "sites": "Sites Starseed",
+                    "contacts": "Contact(s) rattaché(s)",
+                    "billingEmail": "Email de facturation",
+                    "remove": "Supprimer l'adresse",
+                    "add": "Nouvelle adresse",
+                    "degraded": "Service d'adresse indisponible : saisie de la ville et de l'adresse en mode libre."
+                },
+                "accounting": {
+                    "siren": "SIREN",
+                    "accountNumber": "Numéro de compte",
+                    "tvaMode": "Mode de TVA",
+                    "nTva": "N° de TVA",
+                    "paymentDelay": "Délai de règlement",
+                    "paymentType": "Type de règlement",
+                    "bank": "Banque",
+                    "ribTitle": "RIB {n}",
+                    "ribLabel": "Libellé",
+                    "ribBic": "BIC",
+                    "ribIban": "IBAN",
+                    "addRib": "Ajouter un RIB",
+                    "removeRib": "Supprimer le RIB"
+                },
+                "confirmDelete": {
+                    "title": "Confirmer la suppression",
+                    "contact": "Supprimer ce contact ?",
+                    "address": "Supprimer cette adresse ?",
+                    "rib": "Supprimer ce RIB ?",
+                    "cancel": "Annuler",
+                    "confirm": "Confirmer"
+                }
             }
         }
     },
diff --git a/frontend/modules/commercial/pages/clients/new.vue b/frontend/modules/commercial/pages/clients/new.vue
new file mode 100644
index 0000000..f7b782c
--- /dev/null
+++ b/frontend/modules/commercial/pages/clients/new.vue
@@ -0,0 +1,891 @@
+<template>
+    <div>
+        <PageHeader>{{ t('commercial.clients.form.title') }}</PageHeader>
+
+        <!-- ── 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. -->
+        <section class="mb-8 rounded-md border border-neutral-200 bg-white p-6">
+            <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+                <MalioInputText
+                    v-model="main.companyName"
+                    :label="t('commercial.clients.form.main.companyName')"
+                    :required="true"
+                    :readonly="mainLocked"
+                />
+                <MalioInputEmail
+                    v-model="main.email"
+                    :label="t('commercial.clients.form.main.email')"
+                    :required="true"
+                    :readonly="mainLocked"
+                />
+                <MalioInputText
+                    v-model="main.lastName"
+                    :label="t('commercial.clients.form.main.lastName')"
+                    :readonly="mainLocked"
+                />
+                <MalioInputText
+                    v-model="main.firstName"
+                    :label="t('commercial.clients.form.main.firstName')"
+                    :readonly="mainLocked"
+                />
+                <MalioInputPhone
+                    v-model="main.phonePrimary"
+                    :label="t('commercial.clients.form.main.phonePrimary')"
+                    :mask="PHONE_MASK"
+                    :required="true"
+                    :readonly="mainLocked"
+                    :addable="!main.hasSecondaryPhone && !mainLocked"
+                    :add-button-label="t('commercial.clients.form.main.addPhone')"
+                    @add="main.hasSecondaryPhone = true"
+                />
+                <MalioInputPhone
+                    v-if="main.hasSecondaryPhone"
+                    v-model="main.phoneSecondary"
+                    :label="t('commercial.clients.form.main.phoneSecondary')"
+                    :mask="PHONE_MASK"
+                    :readonly="mainLocked"
+                />
+                <MalioSelectCheckbox
+                    :model-value="main.categoryIris"
+                    :options="referentials.categories.value"
+                    :label="t('commercial.clients.form.main.categories')"
+                    :display-tag="true"
+                    :disabled="mainLocked"
+                    @update:model-value="(v: (string | number)[]) => main.categoryIris = v.map(String)"
+                />
+                <MalioSelect
+                    :model-value="main.relationType"
+                    :options="relationOptions"
+                    :label="t('commercial.clients.form.main.relation')"
+                    :disabled="mainLocked"
+                    @update:model-value="onRelationChange"
+                />
+                <MalioSelect
+                    v-if="main.relationType === 'distributeur'"
+                    :model-value="main.distributorIri"
+                    :options="referentials.distributors.value"
+                    :label="t('commercial.clients.form.main.distributorName')"
+                    :disabled="mainLocked"
+                    @update:model-value="(v: string | number | null) => main.distributorIri = v === null ? null : String(v)"
+                />
+                <MalioSelect
+                    v-if="main.relationType === 'courtier'"
+                    :model-value="main.brokerIri"
+                    :options="referentials.brokers.value"
+                    :label="t('commercial.clients.form.main.brokerName')"
+                    :disabled="mainLocked"
+                    @update:model-value="(v: string | number | null) => main.brokerIri = v === null ? null : String(v)"
+                />
+            </div>
+
+            <div class="mt-4 flex items-center gap-6">
+                <MalioCheckbox
+                    v-model="main.triageService"
+                    :label="t('commercial.clients.form.main.triageService')"
+                    :readonly="mainLocked"
+                />
+                <MalioButton
+                    v-if="!mainLocked"
+                    class="ml-auto"
+                    variant="primary"
+                    :label="t('commercial.clients.form.submit')"
+                    :disabled="!isMainValid || mainSubmitting"
+                    @click="submitMain"
+                />
+            </div>
+        </section>
+
+        <!-- ── Onglets a validation incrementale ─────────────────────────────-->
+        <MalioTabList v-model="activeTab" :tabs="tabs">
+            <!-- Onglet Information -->
+            <template #information>
+                <div class="rounded-md border border-neutral-200 bg-white p-6">
+                    <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+                        <MalioInputTextArea
+                            v-model="information.description"
+                            :label="t('commercial.clients.form.information.description')"
+                            :disabled="isValidated('information')"
+                            group-class="md:col-span-2"
+                        />
+                        <MalioInputText
+                            v-model="information.competitors"
+                            :label="t('commercial.clients.form.information.competitors')"
+                            :readonly="isValidated('information')"
+                        />
+                        <MalioDate
+                            v-model="information.foundedAt"
+                            :label="t('commercial.clients.form.information.foundedAt')"
+                            :readonly="isValidated('information')"
+                        />
+                        <MalioInputNumber
+                            v-model="information.employeesCount"
+                            :label="t('commercial.clients.form.information.employeesCount')"
+                            min="0"
+                            :disabled="isValidated('information')"
+                        />
+                        <MalioInputText
+                            v-model="information.directorName"
+                            :label="t('commercial.clients.form.information.directorName')"
+                            :readonly="isValidated('information')"
+                        />
+                        <MalioInputAmount
+                            v-model="information.revenueAmount"
+                            :label="t('commercial.clients.form.information.revenueAmount')"
+                            :disabled="isValidated('information')"
+                        />
+                        <MalioInputAmount
+                            v-model="information.profitAmount"
+                            :label="t('commercial.clients.form.information.profitAmount')"
+                            :disabled="isValidated('information')"
+                        />
+                    </div>
+                    <div v-if="!isValidated('information')" class="mt-4 flex justify-end">
+                        <MalioButton
+                            variant="primary"
+                            :label="t('commercial.clients.form.submit')"
+                            :disabled="tabSubmitting"
+                            @click="submitInformation"
+                        />
+                    </div>
+                </div>
+            </template>
+
+            <!-- Onglet Contact -->
+            <template #contact>
+                <div class="flex flex-col gap-4">
+                    <ClientContactBlock
+                        v-for="(contact, index) in contacts"
+                        :key="index"
+                        :model-value="contact"
+                        :title="t('commercial.clients.form.contact.title', { n: index + 1 })"
+                        :removable="index > 0"
+                        :readonly="isValidated('contact')"
+                        @update:model-value="(v) => contacts[index] = v"
+                        @remove="askRemoveContact(index)"
+                    />
+                    <div v-if="!isValidated('contact')" class="flex items-center justify-between">
+                        <MalioButton
+                            variant="secondary"
+                            icon-name="mdi:plus"
+                            icon-position="left"
+                            :label="t('commercial.clients.form.contact.add')"
+                            :disabled="!canAddContact"
+                            @click="addContact"
+                        />
+                        <MalioButton
+                            variant="primary"
+                            :label="t('commercial.clients.form.submit')"
+                            :disabled="!canValidateContacts || tabSubmitting"
+                            @click="submitContacts"
+                        />
+                    </div>
+                </div>
+            </template>
+
+            <!-- Onglet Adresse -->
+            <template #address>
+                <div class="flex flex-col gap-4">
+                    <ClientAddressBlock
+                        v-for="(address, index) in addresses"
+                        :key="index"
+                        :model-value="address"
+                        :title="t('commercial.clients.form.address.title', { n: index + 1 })"
+                        :category-options="addressCategoryOptions"
+                        :site-options="referentials.sites.value"
+                        :contact-options="contactOptions"
+                        :country-options="countryOptions"
+                        :removable="index > 0"
+                        :readonly="isValidated('address')"
+                        @update:model-value="(v) => addresses[index] = v"
+                        @remove="askRemoveAddress(index)"
+                        @degraded="onAddressDegraded"
+                    />
+                    <div v-if="!isValidated('address')" class="flex items-center justify-between">
+                        <MalioButton
+                            variant="secondary"
+                            icon-name="mdi:plus"
+                            icon-position="left"
+                            :label="t('commercial.clients.form.address.add')"
+                            @click="addAddress"
+                        />
+                        <MalioButton
+                            variant="primary"
+                            :label="t('commercial.clients.form.submit')"
+                            :disabled="!canValidateAddresses || tabSubmitting"
+                            @click="submitAddresses"
+                        />
+                    </div>
+                </div>
+            </template>
+
+            <!-- Onglet Comptabilite (present uniquement si accounting.view) -->
+            <template v-if="canAccountingView" #accounting>
+                <div class="flex flex-col gap-4">
+                    <div class="rounded-md border border-neutral-200 bg-white p-6">
+                        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+                            <MalioInputText
+                                v-model="accounting.siren"
+                                :label="t('commercial.clients.form.accounting.siren')"
+                                :mask="SIREN_MASK"
+                                :readonly="accountingReadonly"
+                            />
+                            <MalioInputText
+                                v-model="accounting.accountNumber"
+                                :label="t('commercial.clients.form.accounting.accountNumber')"
+                                :readonly="accountingReadonly"
+                            />
+                            <MalioSelect
+                                :model-value="accounting.tvaModeIri"
+                                :options="referentials.tvaModes.value"
+                                :label="t('commercial.clients.form.accounting.tvaMode')"
+                                :disabled="accountingReadonly"
+                                empty-option-label=""
+                                @update:model-value="(v: string | number | null) => accounting.tvaModeIri = v === null ? null : String(v)"
+                            />
+                            <MalioInputText
+                                v-model="accounting.nTva"
+                                :label="t('commercial.clients.form.accounting.nTva')"
+                                :readonly="accountingReadonly"
+                            />
+                            <MalioSelect
+                                :model-value="accounting.paymentDelayIri"
+                                :options="referentials.paymentDelays.value"
+                                :label="t('commercial.clients.form.accounting.paymentDelay')"
+                                :disabled="accountingReadonly"
+                                empty-option-label=""
+                                @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.clients.form.accounting.paymentType')"
+                                :disabled="accountingReadonly"
+                                empty-option-label=""
+                                @update:model-value="onPaymentTypeChange"
+                            />
+                            <MalioSelect
+                                v-if="isBankRequired"
+                                :model-value="accounting.bankIri"
+                                :options="referentials.banks.value"
+                                :label="t('commercial.clients.form.accounting.bank')"
+                                :disabled="accountingReadonly"
+                                empty-option-label=""
+                                @update:model-value="(v: string | number | null) => accounting.bankIri = v === null ? null : String(v)"
+                            />
+                        </div>
+                    </div>
+
+                    <!-- Blocs RIB (0..n) — obligatoires si type de reglement = LCR. -->
+                    <div
+                        v-for="(rib, index) in ribs"
+                        :key="index"
+                        class="rounded-md border border-neutral-200 bg-white p-6"
+                    >
+                        <div class="mb-4 flex items-center justify-between">
+                            <h3 class="text-lg font-bold">{{ t('commercial.clients.form.accounting.ribTitle', { n: index + 1 }) }}</h3>
+                            <!-- ariaLabel via v-bind objet (prop camelCase ; aria-* serait un attribut HTML). -->
+                            <MalioButtonIcon
+                                v-if="!accountingReadonly"
+                                icon="mdi:trash-can-outline"
+                                variant="ghost"
+                                v-bind="{ ariaLabel: t('commercial.clients.form.accounting.removeRib') }"
+                                @click="askRemoveRib(index)"
+                            />
+                        </div>
+                        <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
+                            <MalioInputText
+                                v-model="rib.label"
+                                :label="t('commercial.clients.form.accounting.ribLabel')"
+                                :readonly="accountingReadonly"
+                            />
+                            <MalioInputText
+                                v-model="rib.bic"
+                                :label="t('commercial.clients.form.accounting.ribBic')"
+                                :readonly="accountingReadonly"
+                            />
+                            <MalioInputText
+                                v-model="rib.iban"
+                                :label="t('commercial.clients.form.accounting.ribIban')"
+                                :readonly="accountingReadonly"
+                            />
+                        </div>
+                    </div>
+
+                    <div v-if="!accountingReadonly" class="flex items-center justify-between">
+                        <MalioButton
+                            variant="secondary"
+                            icon-name="mdi:plus"
+                            icon-position="left"
+                            :label="t('commercial.clients.form.accounting.addRib')"
+                            @click="addRib"
+                        />
+                        <MalioButton
+                            variant="primary"
+                            :label="t('commercial.clients.form.submit')"
+                            :disabled="!canValidateAccounting || tabSubmitting"
+                            @click="submitAccounting"
+                        />
+                    </div>
+                </div>
+            </template>
+
+            <!-- Onglets non encore implementes : frame vide, passage automatique. -->
+            <template #transport><TabPlaceholderBlank /></template>
+            <template #statistics><TabPlaceholderBlank /></template>
+            <template #reports><TabPlaceholderBlank /></template>
+            <template #exchanges><TabPlaceholderBlank /></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.clients.form.confirmDelete.title') }}</h2>
+            </template>
+            <p>{{ confirmModal.message }}</p>
+            <template #footer>
+                <MalioButton
+                    variant="secondary"
+                    button-class="flex-1"
+                    :label="t('commercial.clients.form.confirmDelete.cancel')"
+                    @click="confirmModal.open = false"
+                />
+                <MalioButton
+                    variant="danger"
+                    button-class="flex-1"
+                    :label="t('commercial.clients.form.confirmDelete.confirm')"
+                    @click="runConfirm"
+                />
+            </template>
+        </MalioModal>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { useClientReferentials, type RefOption } from '~/modules/commercial/composables/useClientReferentials'
+import {
+    buildClientFormTabKeys,
+    CLIENT_FORM_PLACEHOLDER_TABS,
+    hasAtLeastOneValidContact,
+    isBankRequiredForPaymentType,
+    isBillingEmailRequired,
+    isContactNamed,
+    isRibRequiredForPaymentType,
+} from '~/modules/commercial/utils/clientFormRules'
+import {
+    emptyAddress,
+    emptyContact,
+    emptyRib,
+    type AddressFormDraft,
+    type ContactFormDraft,
+    type RibFormDraft,
+} from '~/modules/commercial/types/clientForm'
+import { formatPhoneFR } from '~/shared/utils/phone'
+
+// Masques de saisie (la normalisation finale reste serveur).
+const PHONE_MASK = '## ## ## ## ##'
+const SIREN_MASK = '#########'
+
+// Codes de categorie interdits sur une adresse (RG-1.29, ERP-78).
+const FORBIDDEN_ADDRESS_CATEGORY_CODES = ['DISTRIBUTEUR', 'COURTIER']
+
+const { t } = useI18n()
+const api = useApi()
+const toast = useToast()
+const { can } = usePermissions()
+
+useHead({ title: t('commercial.clients.form.title') })
+
+// Gating de la route : la creation est reservee a `manage`. Compta (accounting
+// seul) et Usine sont rediriges vers le repertoire (cf. §0 du ticket).
+if (!can('commercial.clients.manage')) {
+    await navigateTo('/clients')
+}
+
+const canAccountingView = computed(() => can('commercial.clients.accounting.view'))
+const canAccountingManage = computed(() => can('commercial.clients.accounting.manage'))
+
+const referentials = useClientReferentials()
+
+// ── Etat du client cree ────────────────────────────────────────────────────
+const clientId = 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,
+    firstName: null as string | null,
+    lastName: null as string | null,
+    email: null as string | null,
+    phonePrimary: null as string | null,
+    phoneSecondary: null as string | null,
+    hasSecondaryPhone: false,
+    categoryIris: [] as string[],
+    relationType: 'aucun' as 'aucun' | 'distributeur' | 'courtier',
+    distributorIri: null as string | null,
+    brokerIri: null as string | null,
+    triageService: false,
+})
+
+const relationOptions = computed<RefOption[]>(() => [
+    { value: 'aucun', label: t('commercial.clients.form.main.relationNone') },
+    { value: 'distributeur', label: t('commercial.clients.form.main.relationDistributor') },
+    { value: 'courtier', label: t('commercial.clients.form.main.relationBroker') },
+])
+
+// RG-1.01 : firstName OU lastName, + companyName / email / phonePrimary requis.
+const isMainValid = computed(() => {
+    const filled = (v: string | null) => v !== null && v.trim() !== ''
+    return filled(main.companyName)
+        && filled(main.email)
+        && filled(main.phonePrimary)
+        && (filled(main.firstName) || filled(main.lastName))
+})
+
+async function onRelationChange(value: string | number | null): Promise<void> {
+    const relation = String(value ?? 'aucun') as typeof main.relationType
+    main.relationType = relation
+    // Reinitialise la FK non concernee (une seule remplie a la fois, RG-1.03).
+    if (relation !== 'distributeur') main.distributorIri = null
+    if (relation !== 'courtier') main.brokerIri = null
+
+    if (relation === 'distributeur') await referentials.loadDistributors()
+    if (relation === 'courtier') await referentials.loadBrokers()
+}
+
+/** POST /clients (groupe client:write:main). Au succes : verrouille + bascule Information. */
+async function submitMain(): Promise<void> {
+    if (!isMainValid.value || mainSubmitting.value) return
+    mainSubmitting.value = true
+    try {
+        const payload: Record<string, unknown> = {
+            companyName: main.companyName,
+            firstName: main.firstName || null,
+            lastName: main.lastName || null,
+            email: main.email,
+            phonePrimary: main.phonePrimary,
+            phoneSecondary: main.hasSecondaryPhone ? (main.phoneSecondary || null) : null,
+            categories: main.categoryIris,
+            distributor: main.relationType === 'distributeur' ? main.distributorIri : null,
+            broker: main.relationType === 'courtier' ? main.brokerIri : null,
+            triageService: main.triageService,
+        }
+        const created = await api.post<ClientResponse>('/clients', payload, {
+            headers: { Accept: 'application/ld+json' },
+            toast: false,
+        })
+
+        clientId.value = created.id
+        // Reaffiche les valeurs normalisees renvoyees par le serveur.
+        main.companyName = created.companyName ?? main.companyName
+        main.firstName = created.firstName ?? null
+        main.lastName = created.lastName ?? null
+        main.email = created.email ?? main.email
+        main.phonePrimary = formatPhoneFR(created.phonePrimary) || main.phonePrimary
+        main.phoneSecondary = formatPhoneFR(created.phoneSecondary) || null
+
+        // Pre-remplit le 1er contact a partir du formulaire principal (editable).
+        prefillFirstContact()
+
+        mainLocked.value = true
+        unlockedIndex.value = 0
+        activeTab.value = 'information'
+        toast.success({ title: t('commercial.clients.toast.createSuccess') })
+    }
+    catch (error) {
+        // 409 = doublon nom de societe (RG d'unicite) → message explicite.
+        const status = (error as { response?: { status?: number } })?.response?.status
+        toast.error({
+            title: t('commercial.clients.toast.error'),
+            message: status === 409 ? t('commercial.clients.form.duplicateCompany') : undefined,
+        })
+    }
+    finally {
+        mainSubmitting.value = false
+    }
+}
+
+// ── Onglets : ordre + gating progressif ─────────────────────────────────────
+const activeTab = ref('information')
+// Index du dernier onglet deverrouille (-1 tant que le client n'est pas cree).
+const unlockedIndex = ref(-1)
+// Onglets valides (passent en lecture seule).
+const validated = reactive<Record<string, boolean>>({})
+
+const tabKeys = computed(() => buildClientFormTabKeys(canAccountingView.value))
+
+const tabs = computed(() => tabKeys.value.map((key, index) => ({
+    key,
+    label: t(`commercial.clients.tab.${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, deverrouille et avance automatiquement au suivant. */
+function completeTab(key: string): void {
+    validated[key] = true
+    const next = tabKeys.value[tabIndex(key) + 1]
+    unlockedIndex.value = Math.max(unlockedIndex.value, tabIndex(key) + 1)
+    if (next) activeTab.value = next
+}
+
+// Passage automatique sur les onglets coquille (Transport, Stats, Rapports, Echanges).
+watch(activeTab, (key) => {
+    if ((CLIENT_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,
+})
+
+/** PATCH /clients/{id} — mode strict : uniquement les champs du groupe information. */
+async function submitInformation(): Promise<void> {
+    if (clientId.value === null || tabSubmitting.value) return
+    tabSubmitting.value = true
+    try {
+        await api.patch(`/clients/${clientId.value}`, {
+            description: information.description || null,
+            competitors: information.competitors || null,
+            foundedAt: information.foundedAt || null,
+            employeesCount: information.employeesCount ? Number(information.employeesCount) : null,
+            revenueAmount: information.revenueAmount || null,
+            profitAmount: information.profitAmount || null,
+            directorName: information.directorName || null,
+        }, { toast: false })
+        completeTab('information')
+        toast.success({ title: t('commercial.clients.toast.updateSuccess') })
+    }
+    catch {
+        toast.error({ title: t('commercial.clients.toast.error') })
+    }
+    finally {
+        tabSubmitting.value = false
+    }
+}
+
+// ── Onglet Contact ──────────────────────────────────────────────────────────
+const contacts = ref<ContactFormDraft[]>([emptyContact()])
+
+/** Pre-remplit le 1er contact depuis le formulaire principal (apres creation). */
+function prefillFirstContact(): void {
+    const first = contacts.value[0]
+    if (!first) return
+    first.lastName = main.lastName
+    first.firstName = main.firstName
+    first.email = main.email
+    first.phonePrimary = main.phonePrimary
+}
+
+// « + 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)
+})
+
+// RG-1.14 : au moins un contact nomme pour finaliser l'onglet.
+const canValidateContacts = computed(() => hasAtLeastOneValidContact(contacts.value))
+
+function addContact(): void {
+    if (canAddContact.value) contacts.value.push(emptyContact())
+}
+
+function askRemoveContact(index: number): void {
+    askConfirm(t('commercial.clients.form.confirmDelete.contact'), () => {
+        contacts.value.splice(index, 1)
+    })
+}
+
+/** POST/PATCH des contacts sur la sous-ressource /clients/{id}/contacts. */
+async function submitContacts(): Promise<void> {
+    if (clientId.value === null || !canValidateContacts.value || tabSubmitting.value) return
+    tabSubmitting.value = true
+    try {
+        for (const contact of contacts.value) {
+            // On ignore les blocs totalement vides (ni nom ni prenom).
+            if (!isContactNamed(contact)) continue
+
+            const body = {
+                firstName: contact.firstName || null,
+                lastName: contact.lastName || null,
+                jobTitle: contact.jobTitle || null,
+                phonePrimary: contact.phonePrimary || null,
+                phoneSecondary: contact.hasSecondaryPhone ? (contact.phoneSecondary || null) : null,
+                email: contact.email || null,
+            }
+
+            if (contact.id === null) {
+                const created = await api.post<ContactResponse>(
+                    `/clients/${clientId.value}/contacts`,
+                    body,
+                    { headers: { Accept: 'application/ld+json' }, toast: false },
+                )
+                contact.id = created.id
+                contact.iri = created['@id'] ?? null
+            }
+            else {
+                await api.patch(`/client_contacts/${contact.id}`, body, { toast: false })
+            }
+        }
+        completeTab('contact')
+        toast.success({ title: t('commercial.clients.toast.updateSuccess') })
+    }
+    catch {
+        toast.error({ title: t('commercial.clients.toast.error') })
+    }
+    finally {
+        tabSubmitting.value = false
+    }
+}
+
+// ── Onglet Adresse ──────────────────────────────────────────────────────────
+const addresses = ref<AddressFormDraft[]>([emptyAddress()])
+const addressDegradedNotified = ref(false)
+
+// Categories autorisees sur une adresse : toutes SAUF DISTRIBUTEUR/COURTIER (RG-1.29).
+const addressCategoryOptions = computed(() =>
+    referentials.categories.value.filter(c => !FORBIDDEN_ADDRESS_CATEGORY_CODES.includes(c.code)),
+)
+
+// 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 ?? ''),
+        })),
+)
+
+// France par defaut au M1 (liste pays minimale ; a etendre quand le besoin viendra).
+const countryOptions: RefOption[] = [{ value: 'France', label: 'France' }]
+
+// RG-1.10 (>= 1 site) + RG-1.11 (email facturation si Facturation) sur chaque adresse.
+const canValidateAddresses = computed(() =>
+    addresses.value.length > 0
+    && addresses.value.every((a) => {
+        const filledBillingEmail = a.billingEmail !== null && a.billingEmail.trim() !== ''
+        return a.siteIris.length >= 1 && (!isBillingEmailRequired(a) || filledBillingEmail)
+    }),
+)
+
+function addAddress(): void {
+    addresses.value.push(emptyAddress())
+}
+
+function askRemoveAddress(index: number): void {
+    askConfirm(t('commercial.clients.form.confirmDelete.address'), () => {
+        addresses.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.clients.toast.error'),
+        message: t('commercial.clients.form.address.degraded'),
+    })
+}
+
+/** POST des adresses sur la sous-ressource /clients/{id}/addresses. */
+async function submitAddresses(): Promise<void> {
+    if (clientId.value === null || !canValidateAddresses.value || tabSubmitting.value) return
+    tabSubmitting.value = true
+    try {
+        for (const address of addresses.value) {
+            const body = {
+                isProspect: address.isProspect,
+                isDelivery: address.isDelivery,
+                isBilling: address.isBilling,
+                country: address.country,
+                postalCode: address.postalCode || null,
+                city: address.city || null,
+                street: address.street || null,
+                streetComplement: address.streetComplement || null,
+                categories: address.categoryIris,
+                sites: address.siteIris,
+                contacts: address.contactIris,
+                billingEmail: isBillingEmailRequired(address) ? (address.billingEmail || null) : null,
+            }
+
+            if (address.id === null) {
+                const created = await api.post<{ id: number }>(
+                    `/clients/${clientId.value}/addresses`,
+                    body,
+                    { headers: { Accept: 'application/ld+json' }, toast: false },
+                )
+                address.id = created.id
+            }
+            else {
+                await api.patch(`/client_addresses/${address.id}`, body, { toast: false })
+            }
+        }
+        completeTab('address')
+        toast.success({ title: t('commercial.clients.toast.updateSuccess') })
+    }
+    catch {
+        toast.error({ title: t('commercial.clients.toast.error') })
+    }
+    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<RibFormDraft[]>([])
+
+// 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-1.12 / RG-1.13).
+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))
+
+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-1.12).
+    if (!isBankRequired.value) accounting.bankIri = null
+}
+
+function ribIsComplete(rib: RibFormDraft): boolean {
+    const filled = (v: string | null) => v !== null && v.trim() !== ''
+    return filled(rib.label) && filled(rib.bic) && filled(rib.iban)
+}
+
+// RG-1.12 : banque requise si VIREMENT. RG-1.13 : >= 1 RIB complet si LCR.
+const canValidateAccounting = computed(() => {
+    if (isBankRequired.value && (accounting.bankIri === null)) return false
+    if (isRibRequired.value && !ribs.value.some(ribIsComplete)) return false
+    return true
+})
+
+function addRib(): void {
+    ribs.value.push(emptyRib())
+}
+
+function askRemoveRib(index: number): void {
+    askConfirm(t('commercial.clients.form.confirmDelete.rib'), () => {
+        ribs.value.splice(index, 1)
+    })
+}
+
+/**
+ * Valide l'onglet Comptabilite : PATCH des scalaires (groupe client:write:accounting)
+ * PUIS POST des RIB sur /clients/{id}/ribs. Deux appels distincts (mode strict
+ * RG-1.28 : il n'existe pas d'endpoint /accounting, cf. recon back).
+ */
+async function submitAccounting(): Promise<void> {
+    if (clientId.value === null || !canValidateAccounting.value || tabSubmitting.value) return
+    tabSubmitting.value = true
+    try {
+        await api.patch(`/clients/${clientId.value}`, {
+            siren: accounting.siren || null,
+            accountNumber: accounting.accountNumber || null,
+            tvaMode: accounting.tvaModeIri,
+            nTva: accounting.nTva || null,
+            paymentDelay: accounting.paymentDelayIri,
+            paymentType: accounting.paymentTypeIri,
+            bank: isBankRequired.value ? accounting.bankIri : null,
+        }, { toast: false })
+
+        for (const rib of ribs.value) {
+            if (!ribIsComplete(rib)) continue
+            if (rib.id === null) {
+                const created = await api.post<{ id: number }>(
+                    `/clients/${clientId.value}/ribs`,
+                    { label: rib.label, bic: rib.bic, iban: rib.iban },
+                    { headers: { Accept: 'application/ld+json' }, toast: false },
+                )
+                rib.id = created.id
+            }
+            else {
+                await api.patch(`/client_ribs/${rib.id}`, { label: rib.label, bic: rib.bic, iban: rib.iban }, { toast: false })
+            }
+        }
+
+        completeTab('accounting')
+        toast.success({ title: t('commercial.clients.toast.updateSuccess') })
+    }
+    catch {
+        toast.error({ title: t('commercial.clients.toast.error') })
+    }
+    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 ClientResponse {
+    id: number
+    companyName: string | null
+    firstName: string | null
+    lastName: string | null
+    email: string | null
+    phonePrimary: string | null
+    phoneSecondary: string | null
+}
+
+interface ContactResponse {
+    '@id'?: string
+    id: number
+}
+
+onMounted(() => {
+    // Echec du chargement des referentiels non bloquant : les selects restent vides.
+    referentials.loadCommon().catch(() => {})
+})
+</script>