feat(catalog) : M6 — écran consultation produit + onglets conditionnés + édition sans redirection

- Nouvel écran de consultation lecture seule /admin/products/{id} (calque
  client/fournisseur) : clic sur une ligne ouvre la consultation (plus l'édition
  directe), bouton « Modifier » → édition.
- Règle ERP-193 en consultation : champs vides / checkbox non cochées masqués
  (isFilled) ; onglets vides masqués → les coquilles Fournisseurs/Clients
  (placeholder, module Contrat inexistant) ne sont pas rendues en consultation.
- Onglets Fournisseurs/Clients : non affichés à l'ajout (avant validation du
  formulaire principal) ; visibilité conditionnée par l'état (spec C3, « Aucun »
  = OTHER) : Fournisseurs si Achat/Aucun, Clients si Vendu/Aucun.
- Édition : après « Enregistrer » on reste sur l'écran (l'utilisateur garde la
  main, calque client/fournisseur) ; réaffichage des valeurs normalisées serveur
  (RG-6.07) via re-prefill, plus de redirection.
- i18n consultation + tests (consultation, onglets, no-redirect) ; spec écran 8.bis.

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

@@ -0,0 +1,139 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { mount, flushPromises } from '@vue/test-utils'
+import { defineComponent, h, Suspense } from 'vue'
+
+// Produit charge simule (cles de la reponse reelle § 4.0.bis).
+const PRODUCT = {
+    id: 34,
+    code: 'BLE-01',
+    name: 'Blé tendre',
+    states: ['PURCHASE', 'SALE'],
+    manufactured: true,
+    containsMolasses: false,
+    category: { '@id': '/api/categories/12', id: 12, name: 'Céréales', code: 'CEREALES' },
+    sites: [{ '@id': '/api/sites/1', id: 1, name: 'Chatellerault' }],
+    storageTypes: [{ '@id': '/api/storage_types/9', id: 9, code: 'TAS', label: 'Tas' }],
+    createdAt: '', updatedAt: '',
+}
+
+const fx = vi.hoisted(() => ({ load: vi.fn() }))
+
+vi.mock('~/modules/catalog/composables/useProduct', async () => {
+    const { ref } = await import('vue')
+    return {
+        useProduct: () => ({
+            product: ref(PRODUCT),
+            loading: ref(false),
+            error: ref(false),
+            load: fx.load,
+        }),
+    }
+})
+
+// ── Auto-imports Nuxt stubbes globalement ───────────────────────────────────
+const mockPush = vi.hoisted(() => vi.fn())
+const mockNavigateTo = vi.hoisted(() => vi.fn())
+const mockCan = vi.hoisted(() => vi.fn())
+
+vi.stubGlobal('useI18n', () => ({ t: (key: string) => key }))
+vi.stubGlobal('useHead', () => undefined)
+vi.stubGlobal('useRoute', () => ({ params: { id: '34' } }))
+vi.stubGlobal('useRouter', () => ({ push: mockPush }))
+vi.stubGlobal('usePermissions', () => ({ can: mockCan }))
+vi.stubGlobal('navigateTo', mockNavigateTo)
+
+const ViewPage = (await import('../admin/products/[id]/index.vue')).default
+
+const ButtonStub = defineComponent({
+    props: { label: { type: String, default: '' } },
+    emits: ['click'],
+    setup(props, { emit }) {
+        return () => h('button', { 'data-label': props.label, onClick: () => emit('click') }, props.label)
+    },
+})
+// Input lecture seule : expose le label + la valeur affichee (model-value).
+const InputStub = defineComponent({
+    props: { label: { type: String, default: '' }, modelValue: { default: null } },
+    setup(props) { return () => h('input', { 'data-label': props.label, 'data-value': String(props.modelValue ?? '') }) },
+})
+const CheckboxStub = defineComponent({
+    props: { label: { type: String, default: '' }, modelValue: { type: Boolean, default: false } },
+    setup(props) { return () => h('input', { 'type': 'checkbox', 'data-label': props.label }) },
+})
+const TabsStub = defineComponent({ setup() { return () => h('div', { 'data-testid': 'placeholder-tabs' }) } })
+
+const stubs = {
+    MalioButtonIcon: ButtonStub,
+    MalioButton: ButtonStub,
+    MalioInputText: InputStub,
+    MalioCheckbox: CheckboxStub,
+    ProductPlaceholderTabs: TabsStub,
+}
+
+async function mountPage() {
+    const wrapper = mount(defineComponent({
+        components: { ViewPage },
+        setup: () => () => h(Suspense, null, { default: () => h(ViewPage) }),
+    }), { global: { stubs } })
+    await flushPromises()
+    return wrapper
+}
+
+describe('Écran Consultation produit (page /admin/products/{id})', () => {
+    beforeEach(() => {
+        fx.load.mockReset().mockResolvedValue(undefined)
+        mockPush.mockReset()
+        mockNavigateTo.mockReset()
+        mockCan.mockReset().mockReturnValue(true)
+    })
+
+    it('charge le produit au montage', async () => {
+        await mountPage()
+        expect(fx.load).toHaveBeenCalled()
+    })
+
+    it('redirige vers la liste sans la permission view', async () => {
+        mockCan.mockReturnValue(false)
+        await mountPage()
+        expect(mockNavigateTo).toHaveBeenCalledWith('/admin/products')
+    })
+
+    it('affiche les champs en lecture seule (libelles mappes)', async () => {
+        const wrapper = await mountPage()
+        const valueOf = (label: string) =>
+            wrapper.find(`[data-label="${label}"]`).attributes('data-value')
+        expect(valueOf('admin.products.form.name')).toBe('Blé tendre')
+        expect(valueOf('admin.products.form.code')).toBe('BLE-01')
+        expect(valueOf('admin.products.form.category')).toBe('Céréales')
+        expect(valueOf('admin.products.form.sites')).toBe('Chatellerault')
+        expect(valueOf('admin.products.form.storageTypes')).toBe('Tas')
+        // Etats : libelles i18n joints.
+        expect(valueOf('admin.products.form.states')).toBe('admin.products.state.PURCHASE, admin.products.state.SALE')
+    })
+
+    it('bouton « Modifier » (manage) → ecran d\'edition', async () => {
+        const wrapper = await mountPage()
+        await wrapper.find('[data-label="admin.products.action.edit"]').trigger('click')
+        expect(mockPush).toHaveBeenCalledWith('/admin/products/34/edit')
+    })
+
+    it('masque « Modifier » sans la permission manage', async () => {
+        // view OK mais manage refuse.
+        mockCan.mockImplementation((perm: string) => perm === 'catalog.products.view')
+        const wrapper = await mountPage()
+        expect(wrapper.find('[data-label="admin.products.action.edit"]').exists()).toBe(false)
+    })
+
+    it('n\'affiche AUCUN onglet en consultation (coquilles vides masquees, ERP-193)', async () => {
+        const wrapper = await mountPage()
+        expect(wrapper.find('[data-testid="placeholder-tabs"]').exists()).toBe(false)
+    })
+
+    it('masque un champ vide / une checkbox non cochee (ERP-193, isFilled)', async () => {
+        const wrapper = await mountPage()
+        // containsMolasses = false dans le fixture => case masquee.
+        expect(wrapper.find('[data-label="admin.products.form.containsMolasses"]').exists()).toBe(false)
+        // manufactured = true => case affichee.
+        expect(wrapper.find('[data-label="admin.products.form.manufactured"]').exists()).toBe(true)
+    })
+})

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

@@ -133,18 +133,19 @@ describe('Écran Modifier un produit (page /admin/products/{id}/edit)', () => {
         expect(fx.prefill).toHaveBeenCalledWith(PRODUCT)
     })
 
-    it('redirige vers la liste sans la permission manage', async () => {
+    it('redirige vers la consultation sans la permission manage', async () => {
         mockCan.mockReturnValue(false)
         await mountPage()
-        expect(mockNavigateTo).toHaveBeenCalledWith('/admin/products')
+        expect(mockNavigateTo).toHaveBeenCalledWith('/admin/products/34')
     })
 
-    it('bouton « Enregistrer » : submit (PATCH) puis retour a la liste', async () => {
+    it('bouton « Enregistrer » : submit (PATCH) SANS redirection (l\'utilisateur garde la main)', async () => {
         const wrapper = await mountPage()
         await wrapper.find('[data-label="admin.products.edit.save"]').trigger('click')
         await flushPromises()
         expect(fx.submit).toHaveBeenCalled()
-        expect(mockPush).toHaveBeenCalledWith('/admin/products')
+        // On reste sur l'ecran d'edition : aucune navigation au succes (calque client/fournisseur).
+        expect(mockPush).not.toHaveBeenCalled()
     })
 
     it('affiche les onglets placeholder (rendu sans appel API)', async () => {

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

@@ -139,4 +139,9 @@ describe('Écran Ajouter un produit (page /admin/products/new)', () => {
         await flushPromises()
         expect(mockPush).not.toHaveBeenCalled()
     })
+
+    it('n\'affiche PAS les onglets Fournisseurs/Clients a l\'ajout (avant validation)', async () => {
+        const wrapper = await mountPage()
+        expect(wrapper.find('[data-testid="placeholder-tabs"]').exists()).toBe(false)
+    })
 })

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

@@ -188,11 +188,11 @@ describe('Catalogue produit (page /admin/products)', () => {
         expect(wrapper.find('[data-label="admin.products.add"]').exists()).toBe(false)
     })
 
-    it('navigue vers l\'édition au clic sur une ligne', async () => {
+    it('navigue vers la consultation au clic sur une ligne', async () => {
         const wrapper = mountPage()
         await flushPromises()
         await wrapper.find('tr[data-row-id="34"]').trigger('click')
-        expect(mockPush).toHaveBeenCalledWith('/admin/products/34/edit')
+        expect(mockPush).toHaveBeenCalledWith('/admin/products/34')
     })
 
     it('navigue vers la création au clic sur « + Ajouter »', async () => {

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

@@ -102,8 +102,10 @@
                 />
             </div>
 
-            <!-- Onglets Fournisseurs / Clients en placeholder (HP-M6-01). -->
-            <ProductPlaceholderTabs />
+            <!-- Onglets Fournisseurs / Clients en placeholder (HP-M6-01). Visibilite
+                 conditionnee par l'etat : Fournisseurs si Achat/Aucun, Clients si
+                 Vendu/Aucun (cf. ProductPlaceholderTabs). -->
+            <ProductPlaceholderTabs :states="form.states" />
         </template>
     </div>
 </template>
@@ -119,13 +121,14 @@ 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
 
+// Gating de la route : la modification est reservee a `manage` ; sinon retour
+// consultation (la lecture seule reste accessible avec `view`).
+if (!can('catalog.products.manage')) {
+    await navigateTo(`/admin/products/${productId}`)
+}
+
 const { product, loading, error, load } = useProduct(productId)
 
 const {
@@ -154,17 +157,19 @@ const stateOptions = computed(() =>
     PRODUCT_STATES.map(code => ({ value: code, label: t(`admin.products.state.${code}`) })),
 )
 
-/** Retour vers le catalogue produit (fleche d'en-tete). */
+/** Retour vers la consultation du produit (fleche d'en-tete). */
 function goBack(): void {
-    router.push('/admin/products')
+    router.push(`/admin/products/${productId}`)
 }
 
-/** Soumet la modification (PATCH) ; au succes, retour a la liste. */
+/**
+ * Soumet la modification (PATCH). Au succes : on RESTE sur l'ecran d'edition
+ * (l'utilisateur garde la main, calque client/fournisseur) — le toast de succes et
+ * la reaffichage des valeurs normalisees sont geres par `submit()`. La navigation
+ * reste manuelle (fleche retour -> consultation).
+ */
 async function onSubmit(): Promise<void> {
-    const ok = await submit()
-    if (ok) {
-        router.push('/admin/products')
-    }
+    await submit()
 }
 
 onMounted(async () => {

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

@@ -0,0 +1,155 @@
+<template>
+    <div>
+        <!-- En-tete : retour catalogue + nom du produit + action « Modifier ». -->
+        <div class="flex items-center gap-3 pt-11">
+            <MalioButtonIcon
+                icon="mdi:arrow-left-bold"
+                icon-size="24"
+                variant="ghost"
+                :title="t('admin.products.consultation.back')"
+                v-bind="{ ariaLabel: t('admin.products.consultation.back') }"
+                @click="goBack"
+            />
+            <h1 class="text-[30px] font-semibold text-m-primary">{{ headerTitle }}</h1>
+
+            <div class="ml-auto flex items-center gap-12">
+                <MalioButton
+                    v-if="canManage"
+                    variant="secondary"
+                    icon-name="mdi:pencil-outline"
+                    icon-position="left"
+                    :label="t('admin.products.action.edit')"
+                    @click="goEdit"
+                />
+            </div>
+        </div>
+
+        <!-- Etats de chargement / introuvable. -->
+        <p v-if="loading" class="mt-12 text-center text-black/60">{{ t('admin.products.consultation.loading') }}</p>
+        <p v-else-if="error" class="mt-12 text-center text-m-danger">{{ t('admin.products.consultation.notFound') }}</p>
+
+        <template v-else-if="product">
+            <!-- ── Bloc principal (lecture seule) — meme disposition que l'ajout/edition.
+                 Champs non remplis masques (ERP-193, isFilled). -->
+            <div class="mt-[48px] grid grid-cols-3 xl:grid-cols-4 gap-x-[44px] gap-y-4">
+                <MalioInputText
+                    v-if="isFilled(statesLabel)"
+                    :model-value="statesLabel"
+                    :label="t('admin.products.form.states')"
+                    disabled
+                />
+                <MalioInputText
+                    v-if="isFilled(sitesLabel)"
+                    :model-value="sitesLabel"
+                    :label="t('admin.products.form.sites')"
+                    disabled
+                />
+                <MalioInputText
+                    v-if="isFilled(product.name)"
+                    :model-value="product.name"
+                    :label="t('admin.products.form.name')"
+                    disabled
+                />
+                <MalioInputText
+                    v-if="isFilled(product.code)"
+                    :model-value="product.code"
+                    :label="t('admin.products.form.code')"
+                    disabled
+                />
+                <MalioInputText
+                    v-if="isFilled(categoryLabel)"
+                    :model-value="categoryLabel"
+                    :label="t('admin.products.form.category')"
+                    disabled
+                />
+                <MalioInputText
+                    v-if="isFilled(storageTypesLabel)"
+                    :model-value="storageTypesLabel"
+                    :label="t('admin.products.form.storageTypes')"
+                    disabled
+                />
+                <!-- RG-6.03 : « Fabriqué » / « Contient de la mélasse » affiches
+                     uniquement si l'etat contient « Vendu » ET la case est cochee. -->
+                <div v-if="isSale && isFilled(product.manufactured)" class="flex h-12 items-center">
+                    <MalioCheckbox
+                        id="product-view-manufactured"
+                        :label="t('admin.products.form.manufactured')"
+                        :model-value="product.manufactured"
+                        disabled
+                        :reserve-message-space="false"
+                    />
+                </div>
+                <div v-if="isSale && isFilled(product.containsMolasses)" class="flex h-12 items-center">
+                    <MalioCheckbox
+                        id="product-view-molasses"
+                        :label="t('admin.products.form.containsMolasses')"
+                        :model-value="product.containsMolasses"
+                        disabled
+                        :reserve-message-space="false"
+                    />
+                </div>
+            </div>
+
+            <!-- Pas d'onglet en consultation (ERP-193) : on masque les onglets vides.
+                 Les onglets Fournisseurs / Clients sont des coquilles non implementees
+                 (placeholder, module Contrat inexistant, HP-M6-01) => aucune donnee a
+                 afficher, donc rien n'est rendu ici. Ils restent visibles a l'edition
+                 (preview + regle d'etat). Quand le module Contrat existera, ce bloc
+                 affichera les onglets effectivement remplis (calque client/fournisseur). -->
+        </template>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted } from 'vue'
+import { useProduct } from '~/modules/catalog/composables/useProduct'
+import { isFilled } from '~/shared/utils/consultationDisplay'
+
+const { t } = useI18n()
+const route = useRoute()
+const router = useRouter()
+const { can } = usePermissions()
+
+// Gating de la route : la consultation est reservee a `view` (catalogue admin-only).
+if (!can('catalog.products.view')) {
+    await navigateTo('/admin/products')
+}
+
+const productId = route.params.id as string
+
+const { product, loading, error, load } = useProduct(productId)
+
+// L'edition est reservee a `manage` ; le bouton « Modifier » suit cette permission.
+const canManage = computed(() => can('catalog.products.manage'))
+
+const headerTitle = computed(() => product.value?.name ?? t('admin.products.consultation.title'))
+
+useHead({ title: t('admin.products.consultation.title') })
+
+// RG-6.03 : « Vendu » conditionne l'affichage des booleens fabriqué / mélasse.
+const isSale = computed(() => product.value?.states.includes('SALE') ?? false)
+
+// ── Libelles lecture seule (relations embarquees mappees en texte) ───────────
+const statesLabel = computed(() =>
+    (product.value?.states ?? []).map(code => t(`admin.products.state.${code}`)).join(', '),
+)
+const sitesLabel = computed(() =>
+    (product.value?.sites ?? []).map(site => site.name).join(', '),
+)
+const categoryLabel = computed(() => product.value?.category?.name ?? '')
+const storageTypesLabel = computed(() =>
+    (product.value?.storageTypes ?? []).map(type => type.label).join(', '),
+)
+
+/** Retour vers le catalogue produit (fleche d'en-tete). */
+function goBack(): void {
+    router.push('/admin/products')
+}
+
+/** Bascule vers l'ecran de modification. */
+function goEdit(): void {
+    router.push(`/admin/products/${productId}/edit`)
+}
+
+onMounted(load)
+</script>

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

@@ -186,9 +186,9 @@ const columns = [
     { key: 'categoryName', label: t('admin.products.column.category') },
 ]
 
-/** Clic sur une ligne → ecran d'edition (route imbriquee /admin/products/{id}/edit). */
+/** Clic sur une ligne → ecran de consultation (lecture seule) /admin/products/{id}. */
 function onRowClick(item: Record<string, unknown>): void {
-    router.push(`/admin/products/${item.id}/edit`)
+    router.push(`/admin/products/${item.id}`)
 }
 
 function goToCreate(): void {

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

@@ -97,9 +97,9 @@
             />
         </div>
 
-        <!-- Onglets Fournisseurs / Clients en placeholder (HP-M6-01) : presents
-             des l'ajout pour coherence avec l'ecran de modification. -->
-        <ProductPlaceholderTabs />
+        <!-- Onglets Fournisseurs / Clients (placeholder, HP-M6-01) : NON affiches a
+             l'ajout. Ils n'apparaissent qu'apres validation du formulaire principal
+             (ecran de modification), une fois le produit cree. -->
     </div>
 </template>