feat(catalog) : M6 — écran Modification produit + onglets placeholder (ERP-206)

Écran de modification (ajout pré-rempli, bouton « Enregistrer ») et pose des
onglets Fournisseurs/Clients en placeholder « en cours de développement ».

- route /admin/products/{id}/edit : useProduct(id) charge le détail, prefill du formulaire principal
- RG-6.08 : useProductForm en mode édition → PATCH /products/{id} (merge-patch), bouton « Enregistrer »
- unicité du code re-validée serveur en édition (409 doublon mappé inline)
- onglets Fournisseurs + Clients : ComingSoonPlaceholder, aucun appel API ni champ (HP-M6-01 / RG-6.10)
- mêmes onglets placeholder posés sur l'écran Ajouter (cohérence)
- i18n admin.products.edit / tab ; 11 tests Vitest (prefill + PATCH + placeholder)

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

@@ -0,0 +1,182 @@
+<template>
+    <div>
+        <!-- En-tete : retour vers le catalogue + nom du produit. -->
+        <div class="flex items-center gap-3 pt-11">
+            <MalioButtonIcon
+                icon="mdi:arrow-left-bold"
+                icon-size="24"
+                variant="ghost"
+                :title="t('admin.products.edit.back')"
+                v-bind="{ ariaLabel: t('admin.products.edit.back') }"
+                @click="goBack"
+            />
+            <h1 class="text-[30px] font-semibold text-m-primary">{{ headerTitle }}</h1>
+        </div>
+
+        <!-- Etats de chargement / introuvable. -->
+        <p v-if="loading" class="mt-12 text-center text-black/60">{{ t('admin.products.edit.loading') }}</p>
+        <p v-else-if="error" class="mt-12 text-center text-m-danger">{{ t('admin.products.edit.notFound') }}</p>
+
+        <template v-else-if="product">
+            <!-- ── Formulaire principal pre-rempli (mêmes champs/regles que l'ajout,
+                 RG-6.01→6.07). Bouton « Enregistrer » → PATCH (RG-6.08). -->
+            <div class="mt-[48px] grid grid-cols-3 xl:grid-cols-4 gap-x-[44px] gap-y-4">
+                <!-- Etat du produit : multi-select obligatoire (>= 1, RG-6.02). -->
+                <MalioSelectCheckbox
+                    :model-value="form.states"
+                    :options="stateOptions"
+                    :label="t('admin.products.form.states')"
+                    :display-tag="true"
+                    :required="true"
+                    :error="errors.states"
+                    @update:model-value="(v: (string | number)[]) => setStates(v.map(String))"
+                />
+                <!-- Sites de disponibilite : multi-select obligatoire (>= 1, RG-6.04).
+                     Pilote la cascade Type de stockage (RG-6.06). -->
+                <MalioSelectCheckbox
+                    :model-value="form.siteIris"
+                    :options="siteOptions"
+                    :label="t('admin.products.form.sites')"
+                    :display-tag="true"
+                    :required="true"
+                    :error="errors.sites"
+                    @update:model-value="(v: (string | number)[]) => setSites(v.map(String))"
+                />
+                <MalioInputText
+                    v-model="form.name"
+                    :mask="FREE_TEXT_MASK"
+                    :label="t('admin.products.form.name')"
+                    :required="true"
+                    :error="errors.name"
+                />
+                <!-- Code modifiable techniquement ; l'unicite reste re-validee serveur (RG-6.01). -->
+                <MalioInputText
+                    v-model="form.code"
+                    :mask="CODE_ALNUM_MASK"
+                    :label="t('admin.products.form.code')"
+                    :required="true"
+                    :error="errors.code"
+                />
+                <!-- Categorie produit : select simple obligatoire, filtre type PRODUIT (RG-6.05). -->
+                <MalioSelect
+                    :model-value="form.categoryIri"
+                    :options="categoryOptions"
+                    :label="t('admin.products.form.category')"
+                    empty-option-label=""
+                    :required="true"
+                    :error="errors.category"
+                    @update:model-value="(v: string | number | null) => setCategory(v === null || v === '' ? null : String(v))"
+                />
+                <!-- Type de stockage : multi-select obligatoire (>= 1), options filtrees
+                     par les sites selectionnes (RG-6.06). -->
+                <MalioSelectCheckbox
+                    :model-value="form.storageTypeIris"
+                    :options="storageTypeOptions"
+                    :label="t('admin.products.form.storageTypes')"
+                    :display-tag="true"
+                    :required="true"
+                    :error="errors.storageTypes"
+                    @update:model-value="(v: (string | number)[]) => setStorageTypes(v.map(String))"
+                />
+                <!-- RG-6.03 : « Fabriqué » + « Contient de la mélasse » visibles
+                     uniquement si l'Etat contient « Vendu ». -->
+                <MalioCheckbox
+                    v-if="isSale"
+                    v-model="form.manufactured"
+                    :label="t('admin.products.form.manufactured')"
+                    group-class="self-center"
+                />
+                <MalioCheckbox
+                    v-if="isSale"
+                    v-model="form.containsMolasses"
+                    :label="t('admin.products.form.containsMolasses')"
+                    group-class="self-center"
+                />
+            </div>
+
+            <div class="mt-12 flex justify-center">
+                <MalioButton
+                    variant="primary"
+                    :label="t('admin.products.edit.save')"
+                    :disabled="submitting"
+                    @click="onSubmit"
+                />
+            </div>
+
+            <!-- Onglets Fournisseurs / Clients en placeholder (HP-M6-01). -->
+            <ProductPlaceholderTabs />
+        </template>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted } from 'vue'
+import { useProductForm, PRODUCT_STATES } from '~/modules/catalog/composables/useProductForm'
+import { useProduct } from '~/modules/catalog/composables/useProduct'
+import { CODE_ALNUM_MASK, FREE_TEXT_MASK } from '~/shared/utils/textSanitize'
+
+const { t } = useI18n()
+const route = useRoute()
+const router = useRouter()
+const { can } = usePermissions()
+
+// Gating de la route : la modification est reservee a `manage` (catalogue admin-only).
+if (!can('catalog.products.manage')) {
+    await navigateTo('/admin/products')
+}
+
+const productId = route.params.id as string
+
+const { product, loading, error, load } = useProduct(productId)
+
+const {
+    form,
+    errors,
+    submitting,
+    isSale,
+    siteOptions,
+    categoryOptions,
+    storageTypeOptions,
+    setStates,
+    setCategory,
+    setStorageTypes,
+    setSites,
+    loadReferentials,
+    prefill,
+    submit,
+} = useProductForm()
+
+const headerTitle = computed(() => product.value?.name ?? t('admin.products.edit.title'))
+
+useHead({ title: headerTitle })
+
+// Options de l'etat : libelles i18n (la valeur d'option = code enum).
+const stateOptions = computed(() =>
+    PRODUCT_STATES.map(code => ({ value: code, label: t(`admin.products.state.${code}`) })),
+)
+
+/** Retour vers le catalogue produit (fleche d'en-tete). */
+function goBack(): void {
+    router.push('/admin/products')
+}
+
+/** Soumet la modification (PATCH) ; au succes, retour a la liste. */
+async function onSubmit(): Promise<void> {
+    const ok = await submit()
+    if (ok) {
+        router.push('/admin/products')
+    }
+}
+
+onMounted(async () => {
+    // Referentiels (selects) + detail du produit charges en parallele.
+    await Promise.all([
+        loadReferentials().catch(() => {}),
+        load(),
+    ])
+    // Pre-remplissage une fois le produit charge (echec de chargement => message).
+    if (product.value) {
+        await prefill(product.value)
+    }
+})
+</script>

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

@@ -97,6 +97,10 @@
                 @click="onSubmit"
             />
         </div>
+
+        <!-- Onglets Fournisseurs / Clients en placeholder (HP-M6-01) : presents
+             des l'ajout pour coherence avec l'ecran de modification. -->
+        <ProductPlaceholderTabs />
     </div>
 </template>