feat(changelog) : add v1.9.4 release notes (detail views)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

app/components/ComponentItem.vue

@@ -127,7 +127,7 @@
           </div>
           <NuxtLink
             v-if="component.product?.id"
-            :to="`/product/${component.product.id}/edit`"
+            :to="`/product/${component.product.id}`"
             class="btn btn-ghost btn-xs shrink-0"
           >
             Voir le produit

app/components/DetailHeader.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
+    <div class="flex flex-col gap-2">
+      <h1 class="text-3xl font-bold">{{ title }}</h1>
+      <p v-if="subtitle" class="text-sm text-base-content/70">{{ subtitle }}</p>
+    </div>
+    <div class="flex items-center gap-2">
+      <button
+        v-if="canEdit"
+        class="btn btn-primary"
+        :class="{ 'btn-outline': isEditMode }"
+        @click="$emit('toggle-edit')"
+      >
+        <IconLucideSquarePen v-if="!isEditMode" class="w-5 h-5 mr-2" aria-hidden="true" />
+        <IconLucideEye v-else class="w-5 h-5 mr-2" aria-hidden="true" />
+        {{ isEditMode ? 'Voir détails' : 'Modifier' }}
+      </button>
+      <NuxtLink :to="backLink" class="btn btn-ghost btn-sm md:btn-md">
+        Retour au catalogue
+      </NuxtLink>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import IconLucideSquarePen from '~icons/lucide/square-pen'
+import IconLucideEye from '~icons/lucide/eye'
+
+defineProps<{
+  title: string
+  subtitle?: string
+  isEditMode: boolean
+  canEdit: boolean
+  backLink: string
+}>()
+
+defineEmits<{
+  'toggle-edit': []
+}>()
+</script>

app/components/PieceItem.vue

@@ -180,7 +180,7 @@
             </p>
             <NuxtLink
               v-if="selectedProduct.id"
-              :to="`/product/${selectedProduct.id}/edit`"
+              :to="`/product/${selectedProduct.id}`"
               class="link link-primary text-xs"
             >
               Ouvrir la fiche produit

app/composables/useComponentCreate.ts

@@ -344,7 +344,7 @@ export function useComponentCreate() {
           selectedDocuments.value = []
         }
         toast.showSuccess('Composant créé avec succès')
-        await router.replace(`/component/${createdComponent.id}/edit`)
+        await router.replace(`/component/${createdComponent.id}?edit=true`)
       }
       else if (result.error) {
         toast.showError(result.error)

app/composables/useComponentEdit.ts

@@ -269,95 +269,78 @@ export function useComponentEdit(componentId: string) {
     }
   })
 
-  // --- Slot selection entries (for selectors) ---
+  // --- Slot local edits (saved on submit, not auto-saved) ---
+
+  const slotEdits = reactive<{
+    pieces: Record<string, { selectedPieceId?: string | null, quantity?: number }>
+    products: Record<string, { selectedProductId?: string | null }>
+    subcomponents: Record<string, { selectedComposantId?: string | null }>
+  }>({ pieces: {}, products: {}, subcomponents: {} })
 
   const pieceSlotEntries = computed(() => {
     const structure = component.value?.structure
     if (!structure?.pieces) return []
-    return (structure.pieces as any[]).map((slot: any, i: number) => ({
-      slotId: slot.slotId,
-      typePieceId: slot.typePieceId,
-      selectedPieceId: slot.selectedPieceId ?? null,
-      quantity: slot.quantity ?? 1,
-      position: slot.position ?? i,
-      label: pieceTypeLabelMap.value[slot.typePieceId] || `Pièce #${i + 1}`,
-    }))
+    return (structure.pieces as any[]).map((slot: any, i: number) => {
+      const edits = slotEdits.pieces[slot.slotId]
+      return {
+        slotId: slot.slotId,
+        typePieceId: slot.typePieceId,
+        selectedPieceId: edits && 'selectedPieceId' in edits ? edits.selectedPieceId : (slot.selectedPieceId ?? null),
+        quantity: edits && 'quantity' in edits ? edits.quantity! : (slot.quantity ?? 1),
+        position: slot.position ?? i,
+        label: pieceTypeLabelMap.value[slot.typePieceId] || `Pièce #${i + 1}`,
+      }
+    })
   })
 
   const productSlotEntries = computed(() => {
     const structure = component.value?.structure
     if (!structure?.products) return []
-    return (structure.products as any[]).map((slot: any, i: number) => ({
-      slotId: slot.slotId,
-      typeProductId: slot.typeProductId,
-      selectedProductId: slot.selectedProductId ?? null,
-      familyCode: slot.familyCode,
-      position: slot.position ?? i,
-      label: productTypeLabelMap.value[slot.typeProductId] || `Produit #${i + 1}`,
-    }))
+    return (structure.products as any[]).map((slot: any, i: number) => {
+      const edits = slotEdits.products[slot.slotId]
+      return {
+        slotId: slot.slotId,
+        typeProductId: slot.typeProductId,
+        selectedProductId: edits && 'selectedProductId' in edits ? edits.selectedProductId : (slot.selectedProductId ?? null),
+        familyCode: slot.familyCode,
+        position: slot.position ?? i,
+        label: productTypeLabelMap.value[slot.typeProductId] || `Produit #${i + 1}`,
+      }
+    })
   })
 
   const subcomponentSlotEntries = computed(() => {
     const structure = component.value?.structure
     if (!structure?.subcomponents) return []
-    return (structure.subcomponents as any[]).map((slot: any, i: number) => ({
-      slotId: slot.slotId,
-      typeComposantId: slot.typeComposantId,
-      selectedComponentId: slot.selectedComponentId ?? null,
-      alias: slot.alias,
-      familyCode: slot.familyCode,
-      position: slot.position ?? i,
-      label: slot.alias || `Sous-composant #${i + 1}`,
-    }))
+    return (structure.subcomponents as any[]).map((slot: any, i: number) => {
+      const edits = slotEdits.subcomponents[slot.slotId]
+      return {
+        slotId: slot.slotId,
+        typeComposantId: slot.typeComposantId,
+        selectedComponentId: edits && 'selectedComposantId' in edits ? edits.selectedComposantId : (slot.selectedComponentId ?? null),
+        alias: slot.alias,
+        familyCode: slot.familyCode,
+        position: slot.position ?? i,
+        label: slot.alias || `Sous-composant #${i + 1}`,
+      }
+    })
   })
 
-  const savePieceSlotSelection = async (slotId: string, selectedPieceId: string | null) => {
-    const result = await patch(`/composant-piece-slots/${slotId}`, { selectedPieceId })
-    if (result.success) {
-      const structure = component.value?.structure
-      if (structure?.pieces) {
-        const slot = (structure.pieces as any[]).find((s: any) => s.slotId === slotId)
-        if (slot) slot.selectedPieceId = selectedPieceId
-      }
-      toast.showSuccess('Pièce mise à jour')
-    }
+  const setPieceSlotSelection = (slotId: string, selectedPieceId: string | null) => {
+    slotEdits.pieces[slotId] = { ...slotEdits.pieces[slotId], selectedPieceId }
   }
 
-  const saveProductSlotSelection = async (slotId: string, selectedProductId: string | null) => {
-    const result = await patch(`/composant-product-slots/${slotId}`, { selectedProductId })
-    if (result.success) {
-      const structure = component.value?.structure
-      if (structure?.products) {
-        const slot = (structure.products as any[]).find((s: any) => s.slotId === slotId)
-        if (slot) slot.selectedProductId = selectedProductId
-      }
-      toast.showSuccess('Produit mis à jour')
-    }
+  const setProductSlotSelection = (slotId: string, selectedProductId: string | null) => {
+    slotEdits.products[slotId] = { ...slotEdits.products[slotId], selectedProductId }
   }
 
-  const saveSubcomponentSlotSelection = async (slotId: string, selectedComposantId: string | null) => {
-    const result = await patch(`/composant-subcomponent-slots/${slotId}`, { selectedComposantId })
-    if (result.success) {
-      const structure = component.value?.structure
-      if (structure?.subcomponents) {
-        const slot = (structure.subcomponents as any[]).find((s: any) => s.slotId === slotId)
-        if (slot) slot.selectedComponentId = selectedComposantId
-      }
-      toast.showSuccess('Sous-composant mis à jour')
-    }
+  const setSubcomponentSlotSelection = (slotId: string, selectedComposantId: string | null) => {
+    slotEdits.subcomponents[slotId] = { ...slotEdits.subcomponents[slotId], selectedComposantId }
   }
 
-  const saveSlotQuantity = async (slotId: string, quantity: number) => {
+  const setSlotQuantity = (slotId: string, quantity: number) => {
     if (!slotId || quantity < 1) return
-    const result = await patch(`/composant-piece-slots/${slotId}`, { quantity: Math.max(1, quantity) })
-    if (result.success) {
-      const structure = component.value?.structure
-      if (structure?.pieces) {
-        const slot = (structure.pieces as any[]).find((s: any) => s.slotId === slotId)
-        if (slot) slot.quantity = quantity
-      }
-      toast.showSuccess('Quantité mise à jour')
-    }
+    slotEdits.pieces[slotId] = { ...slotEdits.pieces[slotId], quantity: Math.max(1, quantity) }
   }
 
   const submitEdition = async () => {
@@ -403,6 +386,54 @@ export function useComponentEdit(componentId: string) {
           ],
           { customFieldInputs, upsertCustomFieldValue, updateCustomFieldValue, toast },
         )
+
+        // Save slot edits
+        const slotPromises: Promise<any>[] = []
+        for (const [slotId, edits] of Object.entries(slotEdits.pieces)) {
+          if (Object.keys(edits).length) {
+            slotPromises.push(patch(`/composant-piece-slots/${slotId}`, {
+              ...'selectedPieceId' in edits ? { selectedPieceId: edits.selectedPieceId } : {},
+              ...'quantity' in edits ? { quantity: edits.quantity } : {},
+            }))
+          }
+        }
+        for (const [slotId, edits] of Object.entries(slotEdits.products)) {
+          if ('selectedProductId' in edits) {
+            slotPromises.push(patch(`/composant-product-slots/${slotId}`, { selectedProductId: edits.selectedProductId }))
+          }
+        }
+        for (const [slotId, edits] of Object.entries(slotEdits.subcomponents)) {
+          if ('selectedComposantId' in edits) {
+            slotPromises.push(patch(`/composant-subcomponent-slots/${slotId}`, { selectedComposantId: edits.selectedComposantId }))
+          }
+        }
+        await Promise.all(slotPromises)
+
+        // Apply slot edits to local structure so UI reflects saved values
+        const structure = component.value?.structure
+        if (structure) {
+          for (const [slotId, edits] of Object.entries(slotEdits.pieces)) {
+            const slot = (structure.pieces as any[])?.find((s: any) => s.slotId === slotId)
+            if (slot) {
+              if ('selectedPieceId' in edits) slot.selectedPieceId = edits.selectedPieceId
+              if ('quantity' in edits) slot.quantity = edits.quantity
+            }
+          }
+          for (const [slotId, edits] of Object.entries(slotEdits.products)) {
+            const slot = (structure.products as any[])?.find((s: any) => s.slotId === slotId)
+            if (slot && 'selectedProductId' in edits) slot.selectedProductId = edits.selectedProductId
+          }
+          for (const [slotId, edits] of Object.entries(slotEdits.subcomponents)) {
+            const slot = (structure.subcomponents as any[])?.find((s: any) => s.slotId === slotId)
+            if (slot && 'selectedComposantId' in edits) slot.selectedComponentId = edits.selectedComposantId
+          }
+        }
+
+        // Reset local slot edits
+        slotEdits.pieces = {}
+        slotEdits.products = {}
+        slotEdits.subcomponents = {}
+
         toast.showSuccess('Composant mis à jour avec succès.')
       }
     }
@@ -538,10 +569,11 @@ export function useComponentEdit(componentId: string) {
     handleFilesAdded,
     refreshDocuments,
     submitEdition,
-    saveSlotQuantity,
-    savePieceSlotSelection,
-    saveProductSlotSelection,
-    saveSubcomponentSlotSelection,
+    fetchComponent,
+    setSlotQuantity,
+    setPieceSlotSelection,
+    setProductSlotSelection,
+    setSubcomponentSlotSelection,
     resolvePieceLabel,
     resolveProductLabel,
     resolveSubcomponentLabel,

app/composables/useEntityHistory.ts

@@ -23,6 +23,7 @@ export type EntityHistoryEntry = {
 }
 
 const ENTITY_ENDPOINTS: Record<string, string> = {
+  machine: '/machines',
   composant: '/composants',
   piece: '/pieces',
   product: '/products',
@@ -35,7 +36,7 @@ const extractItems = (payload: any): EntityHistoryEntry[] => {
   return []
 }
 
-export function useEntityHistory(entityType: 'composant' | 'piece' | 'product') {
+export function useEntityHistory(entityType: 'machine' | 'composant' | 'piece' | 'product') {
   const { get } = useApi()
   const basePath = ENTITY_ENDPOINTS[entityType]
 

app/composables/usePieceEdit.ts

@@ -467,6 +467,7 @@ export function usePieceEdit(pieceId: string) {
     handleFilesAdded,
     setProductSelection,
     submitEdition,
+    fetchPiece,
     formatPieceStructurePreview,
   }
 }

app/pages/changelog.vue

@@ -72,6 +72,32 @@ const badgeClass = (type: ChangeType) => {
 };
 
 const releases: Release[] = [
+    {
+        version: "v1.9.4",
+        date: "2026-03-25",
+        changes: [
+            {
+                type: "feat",
+                text: "Pages de consultation détaillées pour les pièces, composants et produits : vue lecture seule avec affichage propre des informations, fournisseurs, champs personnalisés et documents",
+            },
+            {
+                type: "feat",
+                text: "Bouton bascule Modifier / Voir détails sur les fiches pièces, composants et produits, identique au fonctionnement de la fiche machine",
+            },
+            {
+                type: "feat",
+                text: "Bouton « Détails » sur les catalogues pièces, composants et produits pour accéder directement à la vue consultation",
+            },
+            {
+                type: "feat",
+                text: "Masquage automatique des champs vides et de la section documents en mode consultation",
+            },
+            {
+                type: "feat",
+                text: "Accès direct au mode édition via le paramètre ?edit=true dans l'URL",
+            },
+        ],
+    },
     {
         version: "v1.9.2",
         date: "2026-03-23",

app/pages/comments.vue

@@ -243,9 +243,9 @@ const handleResolve = async (commentId: string) => {
 
 const ENTITY_ROUTE_MAP: Record<string, (id: string) => string> = {
   machine: (id: string) => `/machine/${id}`,
-  piece: (id: string) => `/pieces/${id}/edit`,
-  composant: (id: string) => `/component/${id}/edit`,
-  product: (id: string) => `/product/${id}/edit`,
+  piece: (id: string) => `/piece/${id}`,
+  composant: (id: string) => `/component/${id}`,
+  product: (id: string) => `/product/${id}`,
   piece_category: (id: string) => `/piece-category/${id}/edit`,
   component_category: (id: string) => `/component-category/${id}/edit`,
   product_category: (id: string) => `/product-category/${id}/edit`,

app/pages/component-catalog.vue

@@ -96,12 +96,14 @@
 
           <template #cell-actions="{ row }">
             <div class="flex items-center justify-end gap-2">
-              <NuxtLink
-                :to="`/component/${row.component.id}/edit`"
+              <button
+                v-if="canEdit"
+                type="button"
                 class="btn btn-ghost btn-xs"
+                @click="navigateTo(`/component/${row.component.id}?edit=true`)"
               >
                 Modifier
-              </NuxtLink>
+              </button>
               <button
                 v-if="canEdit"
                 type="button"
@@ -111,6 +113,12 @@
               >
                 Supprimer
               </button>
+              <NuxtLink
+                :to="`/component/${row.component.id}`"
+                class="btn btn-primary btn-xs"
+              >
+                Détails
+              </NuxtLink>
             </div>
           </template>
         </DataTable>

app/pages/component/[id]/edit.vue

@@ -198,7 +198,7 @@
                       :model-value="slot.selectedPieceId"
                       :disabled="!canEdit || saving"
                       :type-piece-id="slot.typePieceId"
-                      @update:model-value="(value) => savePieceSlotSelection(slot.slotId, value)"
+                      @update:model-value="(value) => setPieceSlotSelection(slot.slotId, value)"
                     />
                   </div>
                   <div class="w-20 shrink-0">
@@ -209,7 +209,7 @@
                       class="input input-bordered input-sm w-full text-center"
                       :disabled="!canEdit || saving"
                       title="Quantité"
-                      @change="(e) => saveSlotQuantity(slot.slotId, Number((e.target as HTMLInputElement).value))"
+                      @change="(e) => setSlotQuantity(slot.slotId, Number((e.target as HTMLInputElement).value))"
                     >
                   </div>
                 </div>
@@ -232,7 +232,7 @@
                   :model-value="slot.selectedProductId"
                   :disabled="!canEdit || saving"
                   :type-product-id="slot.typeProductId"
-                  @update:model-value="(value) => saveProductSlotSelection(slot.slotId, value)"
+                  @update:model-value="(value) => setProductSlotSelection(slot.slotId, value)"
                 />
               </div>
             </div>
@@ -253,7 +253,7 @@
                   :model-value="slot.selectedComponentId"
                   :disabled="!canEdit || saving"
                   :type-composant-id="slot.typeComposantId"
-                  @update:model-value="(value) => saveSubcomponentSlotSelection(slot.slotId, value)"
+                  @update:model-value="(value) => setSubcomponentSlotSelection(slot.slotId, value)"
                 />
               </div>
             </div>
@@ -381,10 +381,10 @@ const {
   removeDocument,
   handleFilesAdded,
   submitEdition,
-  saveSlotQuantity,
-  savePieceSlotSelection,
-  saveProductSlotSelection,
-  saveSubcomponentSlotSelection,
+  setSlotQuantity,
+  setPieceSlotSelection,
+  setProductSlotSelection,
+  setSubcomponentSlotSelection,
   resolvePieceLabel,
   resolveProductLabel,
   resolveSubcomponentLabel,

app/pages/component/[id]/index.vue

@@ -0,0 +1,517 @@
+<template>
+  <div>
+    <DocumentPreviewModal
+      :document="previewDocument"
+      :visible="previewVisible"
+      :documents="componentDocuments"
+      @close="closePreview"
+    />
+    <DocumentEditModal
+      :visible="editModalVisible"
+      :document="editingDocument"
+      @close="editModalVisible = false"
+      @updated="handleDocumentUpdated"
+    />
+    <main class="container mx-auto px-6 py-10">
+      <div v-if="loading" class="flex flex-col items-center gap-4 py-20 text-center">
+        <span class="loading loading-spinner loading-lg" aria-hidden="true" />
+        <p class="text-sm text-base-content/70">Chargement du composant…</p>
+      </div>
+
+      <div v-else-if="!component" class="max-w-xl mx-auto">
+        <div class="alert alert-error shadow-lg">
+          <div>
+            <h2 class="font-semibold text-lg">Composant introuvable</h2>
+            <p class="text-sm text-base-content/80">
+              Nous n'avons pas pu retrouver le composant demandé. Il a peut-être été supprimé.
+            </p>
+          </div>
+        </div>
+        <button type="button" class="btn btn-primary mt-6" @click="$router.back()">
+          Retour au catalogue
+        </button>
+      </div>
+
+      <section v-else class="card border border-base-200 bg-base-100 shadow-sm max-w-5xl mx-auto">
+        <div class="card-body space-y-6">
+          <DetailHeader
+            :title="isEditMode ? 'Modifier le composant' : component.name"
+            :subtitle="isEditMode ? 'Ajustez les informations du composant et ses champs personnalisés.' : undefined"
+            :is-edit-mode="isEditMode"
+            :can-edit="canEdit"
+            back-link="/component-catalog"
+            @toggle-edit="isEditMode = !isEditMode"
+          />
+
+          <!-- Catégorie (always shown) -->
+          <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+            <div class="form-control">
+              <label class="label">
+                <span class="label-text">Catégorie de composant</span>
+              </label>
+              <template v-if="isEditMode">
+                <div class="flex items-center gap-2">
+                  <select
+                    v-model="selectedTypeId"
+                    class="select select-bordered select-sm md:select-md flex-1"
+                    disabled
+                  >
+                    <option value="">Sélectionner une catégorie</option>
+                    <option
+                      v-for="type in componentTypeList"
+                      :key="type.id"
+                      :value="type.id"
+                    >
+                      {{ type.name }}
+                    </option>
+                  </select>
+                  <NuxtLink
+                    v-if="selectedTypeId"
+                    :to="`/component-category/${selectedTypeId}/edit`"
+                    class="btn btn-ghost btn-sm"
+                    title="Voir la catégorie"
+                  >
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
+                      <path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z" />
+                      <path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z" />
+                    </svg>
+                  </NuxtLink>
+                </div>
+                <p class="text-xs text-base-content/60 mt-1">
+                  La catégorie d'origine ne peut pas être modifiée depuis cette page.
+                </p>
+              </template>
+              <div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center">
+                {{ selectedType?.name || '—' }}
+              </div>
+            </div>
+          </div>
+
+          <!-- Nom (always shown) -->
+          <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+            <div class="form-control">
+              <label class="label">
+                <span class="label-text">Nom du composant</span>
+              </label>
+              <input
+                v-if="isEditMode"
+                v-model="editionForm.name"
+                type="text"
+                class="input input-bordered input-sm md:input-md"
+                :disabled="!canEdit || saving"
+                placeholder="Nom affiché dans le catalogue"
+                required
+              >
+              <div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center">
+                {{ component.name }}
+              </div>
+            </div>
+          </div>
+
+          <!-- Description (if value or edit mode) -->
+          <div v-if="isEditMode || component.description" class="form-control">
+            <label class="label">
+              <span class="label-text">Description</span>
+            </label>
+            <textarea
+              v-if="isEditMode"
+              v-model="editionForm.description"
+              class="textarea textarea-bordered textarea-sm md:textarea-md"
+              :disabled="!canEdit || saving"
+              placeholder="Description du composant (optionnel)"
+              rows="3"
+            />
+            <div v-else class="textarea textarea-bordered textarea-sm md:textarea-md bg-base-200">
+              {{ component.description }}
+            </div>
+          </div>
+
+          <!-- Référence + Fournisseurs (if value or edit mode) -->
+          <div
+            v-if="isEditMode || component.reference || editionForm.constructeurIds.length"
+            class="grid grid-cols-1 gap-4 md:grid-cols-2"
+          >
+            <div v-if="isEditMode || component.reference" class="form-control">
+              <label class="label">
+                <span class="label-text">Référence</span>
+              </label>
+              <input
+                v-if="isEditMode"
+                v-model="editionForm.reference"
+                type="text"
+                class="input input-bordered input-sm md:input-md"
+                :disabled="!canEdit || saving"
+                placeholder="Référence interne ou fournisseur"
+              >
+              <div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center">
+                {{ component.reference }}
+              </div>
+            </div>
+
+            <div v-if="isEditMode || editionForm.constructeurIds.length" class="form-control">
+              <label class="label">
+                <span class="label-text">Fournisseur</span>
+              </label>
+              <ConstructeurSelect
+                v-if="isEditMode"
+                v-model="editionForm.constructeurIds"
+                class="w-full"
+                :disabled="!canEdit || saving"
+                placeholder="Rechercher un ou plusieurs fournisseurs..."
+                :initial-options="component?.constructeurs || []"
+              />
+              <div v-else class="flex flex-wrap gap-2">
+                <span
+                  v-for="id in editionForm.constructeurIds"
+                  :key="id"
+                  class="badge badge-outline"
+                >
+                  {{ getConstructeurById(id)?.name || id }}
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <!-- Prix (if value or edit mode) -->
+          <div v-if="isEditMode || component.prix" class="grid grid-cols-1 gap-4 md:grid-cols-2">
+            <div class="form-control">
+              <label class="label">
+                <span class="label-text">Prix indicatif (€)</span>
+              </label>
+              <input
+                v-if="isEditMode"
+                v-model="editionForm.prix"
+                type="number"
+                step="0.01"
+                min="0"
+                class="input input-bordered input-sm md:input-md"
+                :disabled="!canEdit || saving"
+                placeholder="Valeur indicatrice"
+              >
+              <div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center">
+                {{ component.prix }} €
+              </div>
+            </div>
+          </div>
+
+          <!-- Skeleton preview (edit mode only) -->
+          <StructureSkeletonPreview
+            v-if="isEditMode && selectedType"
+            :structure="selectedTypeStructure"
+            :description="selectedType.description || 'Ce squelette définit la structure et les contraintes du composant.'"
+            :preview-badge="formatStructurePreview(selectedTypeStructure)"
+            variant="component"
+            show-empty-state
+            :resolve-piece-label="resolvePieceLabel"
+            :resolve-product-label="resolveProductLabel"
+            :resolve-subcomponent-label="resolveSubcomponentLabel"
+          />
+
+          <!-- Skeleton slot selections (edit mode only) -->
+          <div
+            v-if="isEditMode && (pieceSlotEntries.length || productSlotEntries.length || subcomponentSlotEntries.length)"
+            class="space-y-3 rounded-lg border border-base-200 bg-base-200/30 p-4"
+          >
+            <header class="space-y-1">
+              <h2 class="font-semibold text-base-content">Sélections du squelette</h2>
+              <p class="text-xs text-base-content/70">
+                Choisissez les pièces, produits et sous-composants pour chaque emplacement requis par la catégorie.
+              </p>
+            </header>
+
+            <div v-if="pieceSlotEntries.length" class="space-y-2">
+              <h3 class="font-semibold text-sm text-base-content">Pièces</h3>
+              <div class="grid grid-cols-1 gap-3 md:grid-cols-2">
+                <div
+                  v-for="slot in pieceSlotEntries"
+                  :key="`piece-slot-${slot.slotId}`"
+                  class="form-control"
+                >
+                  <label class="label">
+                    <span class="label-text text-xs font-medium">{{ slot.label }}</span>
+                  </label>
+                  <div class="flex items-start gap-2">
+                    <div class="flex-1">
+                      <PieceSelect
+                        :model-value="slot.selectedPieceId"
+                        :disabled="!canEdit || saving"
+                        :type-piece-id="slot.typePieceId"
+                        @update:model-value="(value) => setPieceSlotSelection(slot.slotId, value)"
+                      />
+                    </div>
+                    <div class="w-20 shrink-0">
+                      <input
+                        type="number"
+                        :value="slot.quantity"
+                        min="1"
+                        class="input input-bordered input-sm w-full text-center"
+                        :disabled="!canEdit || saving"
+                        title="Quantité"
+                        @change="(e) => setSlotQuantity(slot.slotId, Number((e.target as HTMLInputElement).value))"
+                      >
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div v-if="productSlotEntries.length" class="space-y-2">
+              <h3 class="font-semibold text-sm text-base-content">Produits</h3>
+              <div class="grid grid-cols-1 gap-3 md:grid-cols-2">
+                <div
+                  v-for="slot in productSlotEntries"
+                  :key="`product-slot-${slot.slotId}`"
+                  class="form-control"
+                >
+                  <label class="label">
+                    <span class="label-text text-xs font-medium">{{ slot.label }}</span>
+                  </label>
+                  <ProductSelect
+                    :model-value="slot.selectedProductId"
+                    :disabled="!canEdit || saving"
+                    :type-product-id="slot.typeProductId"
+                    @update:model-value="(value) => setProductSlotSelection(slot.slotId, value)"
+                  />
+                </div>
+              </div>
+            </div>
+
+            <div v-if="subcomponentSlotEntries.length" class="space-y-2">
+              <h3 class="font-semibold text-sm text-base-content">Sous-composants</h3>
+              <div class="grid grid-cols-1 gap-3 md:grid-cols-2">
+                <div
+                  v-for="slot in subcomponentSlotEntries"
+                  :key="`sub-slot-${slot.slotId}`"
+                  class="form-control"
+                >
+                  <label class="label">
+                    <span class="label-text text-xs font-medium">{{ slot.label }}</span>
+                  </label>
+                  <ComposantSelect
+                    :model-value="slot.selectedComponentId"
+                    :disabled="!canEdit || saving"
+                    :type-composant-id="slot.typeComposantId"
+                    @update:model-value="(value) => setSubcomponentSlotSelection(slot.slotId, value)"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Custom fields -->
+          <div v-if="visibleCustomFields.length" class="space-y-4 rounded-lg border border-base-200 bg-base-200/40 p-4">
+            <header class="space-y-1">
+              <h2 class="font-semibold text-base-content">Champs personnalisés</h2>
+              <p v-if="isEditMode" class="text-xs text-base-content/70">
+                Mettez à jour les valeurs propres à ce composant.
+              </p>
+            </header>
+            <template v-if="isEditMode">
+              <CustomFieldInputGrid :fields="customFieldInputs" :disabled="!canEdit || saving" />
+            </template>
+            <template v-else>
+              <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+                <div
+                  v-for="field in visibleCustomFields"
+                  :key="field.customFieldValueId || field.id || field.name"
+                  class="form-control"
+                >
+                  <label class="label">
+                    <span class="label-text text-sm">{{ field.name }}</span>
+                  </label>
+                  <div class="input input-bordered input-sm bg-base-200 flex items-center">
+                    {{ field.value }}
+                  </div>
+                </div>
+              </div>
+            </template>
+          </div>
+
+          <!-- Documents -->
+          <div
+            v-if="isEditMode || componentDocuments.length > 0"
+            class="space-y-4 rounded-lg border border-base-200 bg-base-200/40 p-4"
+          >
+            <header class="flex flex-col gap-1 md:flex-row md:items-center md:justify-between">
+              <div>
+                <h2 class="font-semibold text-base-content">Documents</h2>
+                <p class="text-xs text-base-content/70">
+                  {{ isEditMode ? 'Gérez les documents associés à ce composant.' : 'Documents associés à ce composant.' }}
+                </p>
+              </div>
+              <span v-if="isEditMode && selectedFiles.length" class="badge badge-outline">
+                {{ selectedFiles.length }} document{{ selectedFiles.length > 1 ? 's' : '' }} prêt{{ selectedFiles.length > 1 ? 's' : '' }} à être ajouté{{ selectedFiles.length > 1 ? 's' : '' }}
+              </span>
+            </header>
+            <template v-if="isEditMode">
+              <div :class="{ 'pointer-events-none opacity-60': !canEdit || saving || uploadingDocuments }">
+                <DocumentUpload
+                  v-model="selectedFiles"
+                  title="Déposer vos fichiers"
+                  subtitle="Formats acceptés : PDF, images, documents…"
+                  @files-added="handleFilesAdded"
+                />
+              </div>
+              <p v-if="uploadingDocuments" class="text-xs text-base-content/70">
+                Téléversement des documents en cours…
+              </p>
+              <p v-else-if="loadingDocuments" class="text-xs text-base-content/70">
+                Chargement des documents en cours…
+              </p>
+              <DocumentListInline
+                v-else
+                :documents="componentDocuments"
+                :can-delete="canEdit"
+                :can-edit="true"
+                :delete-disabled="uploadingDocuments"
+                empty-text="Aucun document n'est associé à ce composant pour le moment."
+                @preview="openPreview"
+                @edit="openEditModal"
+                @delete="removeDocument"
+              />
+            </template>
+            <template v-else>
+              <p v-if="loadingDocuments" class="text-xs text-base-content/70">
+                Chargement des documents en cours…
+              </p>
+              <DocumentListInline
+                v-else
+                :documents="componentDocuments"
+                :can-delete="false"
+                :can-edit="false"
+                empty-text="Aucun document n'est associé à ce composant pour le moment."
+                @preview="openPreview"
+              />
+            </template>
+          </div>
+
+          <EntityHistorySection
+            :entries="history"
+            :loading="historyLoading"
+            :error="historyError"
+            :field-labels="historyFieldLabels"
+          />
+
+          <!-- Save buttons (edit mode only) -->
+          <div v-if="isEditMode" class="flex flex-col gap-3 md:flex-row md:justify-end">
+            <button type="button" class="btn btn-ghost" :class="{ 'btn-disabled': saving }" @click="isEditMode = false">
+              Annuler
+            </button>
+            <button type="button" class="btn btn-primary" :disabled="!canSubmit" @click="submitEdition">
+              <span v-if="saving" class="loading loading-spinner loading-sm mr-2" />
+              Enregistrer les modifications
+            </button>
+          </div>
+
+          <!-- Comments -->
+          <div class="mt-4">
+            <CommentSection
+              entity-type="composant"
+              :entity-id="String(route.params.id)"
+              :entity-name="component?.name"
+              show-resolved
+            />
+          </div>
+        </div>
+      </section>
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { useRoute } from '#imports'
+import { useComponentEdit } from '~/composables/useComponentEdit'
+import { useDocuments } from '~/composables/useDocuments'
+import { usePermissions } from '~/composables/usePermissions'
+import { useConstructeurs } from '~/composables/useConstructeurs'
+
+const route = useRoute()
+const { canEdit } = usePermissions()
+const { getConstructeurById } = useConstructeurs()
+const { updateDocument } = useDocuments()
+
+const isEditMode = ref(false)
+
+const {
+  component,
+  loading,
+  saving,
+  selectedFiles,
+  uploadingDocuments,
+  loadingDocuments,
+  componentDocuments,
+  previewDocument,
+  previewVisible,
+  selectedTypeId,
+  editionForm,
+  customFieldInputs,
+  historyFieldLabels,
+  canSubmit,
+  componentTypeList,
+  selectedType,
+  selectedTypeStructure,
+  pieceSlotEntries,
+  productSlotEntries,
+  subcomponentSlotEntries,
+  history,
+  historyLoading,
+  historyError,
+  openPreview,
+  closePreview,
+  removeDocument,
+  handleFilesAdded,
+  submitEdition: _submitEdition,
+  fetchComponent,
+  setSlotQuantity,
+  setPieceSlotSelection,
+  setProductSlotSelection,
+  setSubcomponentSlotSelection,
+  resolvePieceLabel,
+  resolveProductLabel,
+  resolveSubcomponentLabel,
+  formatStructurePreview,
+} = useComponentEdit(String(route.params.id))
+
+const submitEdition = async () => {
+  await _submitEdition()
+  if (!saving.value) {
+    await fetchComponent()
+    isEditMode.value = false
+  }
+}
+
+const editingDocument = ref<any | null>(null)
+const editModalVisible = ref(false)
+
+const visibleCustomFields = computed(() => {
+  if (isEditMode.value) return customFieldInputs.value
+  return customFieldInputs.value.filter(
+    (f) => f.value !== null && f.value !== undefined && f.value !== '',
+  )
+})
+
+const openEditModal = (doc: any) => {
+  editingDocument.value = doc
+  editModalVisible.value = true
+}
+
+const handleDocumentUpdated = async (data: { name?: string; type?: string }) => {
+  if (!editingDocument.value?.id) return
+  const result = await updateDocument(editingDocument.value.id, data)
+  if (result.success) {
+    const idx = componentDocuments.value.findIndex((d: any) => d.id === editingDocument.value?.id)
+    if (idx !== -1) {
+      componentDocuments.value[idx] = { ...componentDocuments.value[idx], ...data }
+    }
+  }
+  editModalVisible.value = false
+  editingDocument.value = null
+}
+
+onMounted(() => {
+  if (route.query.edit === 'true' && canEdit.value) {
+    isEditMode.value = true
+  }
+})
+</script>

app/pages/machine/[id].vue

@@ -138,6 +138,14 @@
         @confirm="handleAddEntity"
       />
 
+      <!-- Historique -->
+      <EntityHistorySection
+        :entries="history"
+        :loading="historyLoading"
+        :error="historyError"
+        :field-labels="historyFieldLabels"
+      />
+
       <!-- Comments -->
       <div class="mt-4">
         <CommentSection
@@ -181,6 +189,7 @@
 import { computed, ref, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
 import { useMachineDetailData } from '~/composables/useMachineDetailData'
+import { useEntityHistory } from '~/composables/useEntityHistory'
 import DocumentPreviewModal from '~/components/DocumentPreviewModal.vue'
 import PageHero from '~/components/PageHero.vue'
 import MachinePrintSelectionModal from '~/components/MachinePrintSelectionModal.vue'
@@ -191,6 +200,7 @@ import MachineProductsCard from '~/components/machine/MachineProductsCard.vue'
 import MachineComponentsCard from '~/components/machine/MachineComponentsCard.vue'
 import MachinePiecesCard from '~/components/machine/MachinePiecesCard.vue'
 import AddEntityToMachineModal from '~/components/machine/AddEntityToMachineModal.vue'
+import EntityHistorySection from '~/components/common/EntityHistorySection.vue'
 import IconLucideAlertTriangle from '~icons/lucide/alert-triangle'
 
 const route = useRoute()
@@ -203,6 +213,21 @@ if (!machineId) {
 
 const d = useMachineDetailData(machineId)
 
+const {
+  history,
+  loading: historyLoading,
+  error: historyError,
+  loadHistory,
+} = useEntityHistory('machine')
+
+const historyFieldLabels = {
+  name: 'Nom',
+  reference: 'Référence',
+  prix: 'Prix',
+  site: 'Site',
+  constructeurIds: 'Fournisseurs',
+}
+
 const addModalOpen = ref(false)
 const addModalKind = ref('component')
 
@@ -228,6 +253,7 @@ const machineViewTitle = computed(() => {
 onMounted(() => {
   d.loadMachineData()
   d.loadInitialData()
+  loadHistory(String(machineId)).catch(() => {})
 
   if (route.query.edit === 'true' && canEdit.value) {
     d.isEditMode.value = true

app/pages/piece/[id].vue

@@ -0,0 +1,449 @@
+<template>
+  <div>
+    <DocumentPreviewModal
+      :document="previewDocument"
+      :visible="previewVisible"
+      :documents="pieceDocuments"
+      @close="closePreview"
+    />
+    <DocumentEditModal
+      :visible="editModalVisible"
+      :document="editingDocument"
+      @close="editModalVisible = false"
+      @updated="handleDocumentUpdated"
+    />
+    <main class="container mx-auto px-6 py-10">
+      <div v-if="loading" class="flex flex-col items-center gap-4 py-20 text-center">
+        <span class="loading loading-spinner loading-lg" aria-hidden="true" />
+        <p class="text-sm text-base-content/70">Chargement de la pièce…</p>
+      </div>
+
+      <div v-else-if="!piece" class="max-w-xl mx-auto">
+        <div class="alert alert-error shadow-lg">
+          <div>
+            <h2 class="font-semibold text-lg">Pièce introuvable</h2>
+            <p class="text-sm text-base-content/80">
+              Nous n'avons pas pu retrouver la pièce demandée. Elle a peut-être été supprimée.
+            </p>
+          </div>
+        </div>
+        <button type="button" class="btn btn-primary mt-6" @click="$router.back()">
+          Retour au catalogue
+        </button>
+      </div>
+
+      <section v-else class="card border border-base-200 bg-base-100 shadow-sm max-w-5xl mx-auto">
+        <div class="card-body space-y-6">
+          <DetailHeader
+            :title="isEditMode ? 'Modifier la pièce' : piece.name"
+            :subtitle="isEditMode ? 'Ajustez les informations de la pièce et ses champs personnalisés.' : undefined"
+            :is-edit-mode="isEditMode"
+            :can-edit="canEdit"
+            back-link="/pieces-catalog"
+            @toggle-edit="isEditMode = !isEditMode"
+          />
+
+          <!-- Catégorie (always shown) -->
+          <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+            <div class="form-control">
+              <label class="label">
+                <span class="label-text">Catégorie de pièce</span>
+              </label>
+              <template v-if="isEditMode">
+                <select
+                  v-model="selectedTypeId"
+                  class="select select-bordered select-sm md:select-md"
+                  disabled
+                >
+                  <option value="">Sélectionner une catégorie</option>
+                  <option
+                    v-for="type in pieceTypeList"
+                    :key="type.id"
+                    :value="type.id"
+                  >
+                    {{ type.name }}
+                  </option>
+                </select>
+                <p class="text-xs text-base-content/60 mt-1">
+                  La catégorie d'origine ne peut pas être modifiée depuis cette page.
+                </p>
+              </template>
+              <div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center">
+                {{ selectedType?.name || '—' }}
+              </div>
+            </div>
+          </div>
+
+          <!-- Nom (always shown) -->
+          <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+            <div class="form-control">
+              <label class="label">
+                <span class="label-text">Nom de la pièce</span>
+              </label>
+              <input
+                v-if="isEditMode"
+                v-model="editionForm.name"
+                type="text"
+                class="input input-bordered input-sm md:input-md"
+                :disabled="!canEdit || saving"
+                placeholder="Nom affiché dans le catalogue"
+                required
+              >
+              <div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center">
+                {{ piece.name }}
+              </div>
+            </div>
+          </div>
+
+          <!-- Description (if value or edit mode) -->
+          <div v-if="isEditMode || piece.description" class="form-control">
+            <label class="label">
+              <span class="label-text">Description</span>
+            </label>
+            <textarea
+              v-if="isEditMode"
+              v-model="editionForm.description"
+              class="textarea textarea-bordered textarea-sm md:textarea-md"
+              :disabled="!canEdit || saving"
+              placeholder="Description de la pièce (optionnel)"
+              rows="3"
+            />
+            <div v-else class="textarea textarea-bordered textarea-sm md:textarea-md bg-base-200">
+              {{ piece.description }}
+            </div>
+          </div>
+
+          <!-- Référence + Fournisseurs (if value or edit mode) -->
+          <div
+            v-if="isEditMode || piece.reference || editionForm.constructeurIds.length"
+            class="grid grid-cols-1 gap-4 md:grid-cols-2"
+          >
+            <div v-if="isEditMode || piece.reference" class="form-control">
+              <label class="label">
+                <span class="label-text">Référence</span>
+              </label>
+              <input
+                v-if="isEditMode"
+                v-model="editionForm.reference"
+                type="text"
+                class="input input-bordered input-sm md:input-md"
+                :disabled="!canEdit || saving"
+                placeholder="Référence interne ou fournisseur"
+              >
+              <div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center">
+                {{ piece.reference }}
+              </div>
+            </div>
+
+            <div v-if="isEditMode || editionForm.constructeurIds.length" class="form-control">
+              <label class="label">
+                <span class="label-text">Fournisseur</span>
+              </label>
+              <ConstructeurSelect
+                v-if="isEditMode"
+                v-model="editionForm.constructeurIds"
+                class="w-full"
+                :disabled="!canEdit || saving"
+                placeholder="Rechercher un ou plusieurs fournisseurs..."
+                :initial-options="piece?.constructeurs || []"
+              />
+              <div v-else class="flex flex-wrap gap-2">
+                <span
+                  v-for="id in editionForm.constructeurIds"
+                  :key="id"
+                  class="badge badge-outline"
+                >
+                  {{ getConstructeurById(id)?.name || id }}
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <!-- Prix (if value or edit mode) -->
+          <div v-if="isEditMode || piece.prix" class="grid grid-cols-1 gap-4 md:grid-cols-2">
+            <div class="form-control">
+              <label class="label">
+                <span class="label-text">Prix indicatif (€)</span>
+              </label>
+              <input
+                v-if="isEditMode"
+                v-model="editionForm.prix"
+                type="number"
+                step="0.01"
+                min="0"
+                class="input input-bordered input-sm md:input-md"
+                :disabled="!canEdit || saving"
+                placeholder="Valeur indicatrice"
+              >
+              <div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center">
+                {{ piece.prix }} €
+              </div>
+            </div>
+          </div>
+
+          <!-- Product requirements (edit mode only) -->
+          <div
+            v-if="isEditMode && structureProducts.length"
+            class="space-y-3 rounded-lg border border-base-200 bg-base-200/40 p-4"
+          >
+            <header class="space-y-1">
+              <h2 class="font-semibold text-base-content">
+                Produit requis par le squelette
+              </h2>
+              <p class="text-xs text-base-content/70">
+                Cette pièce doit rester liée à un produit catalogue répondant aux critères suivants.
+              </p>
+            </header>
+            <ul class="space-y-2 text-sm text-base-content/80">
+              <li
+                v-for="(description, index) in productRequirementDescriptions"
+                :key="`edit-requirement-${index}`"
+                class="flex items-start gap-2"
+              >
+                <span class="mt-0.5 inline-flex h-2 w-2 flex-shrink-0 rounded-full bg-primary"></span>
+                <span>{{ description }}</span>
+              </li>
+            </ul>
+            <div class="grid grid-cols-1 gap-3 md:grid-cols-2">
+              <div
+                v-for="entry in productRequirementEntries"
+                :key="entry.key"
+                class="form-control"
+              >
+                <label class="label">
+                  <span class="label-text text-xs font-medium">
+                    {{ entry.label }}
+                  </span>
+                </label>
+                <ProductSelect
+                  :model-value="productSelections[entry.index] || null"
+                  :disabled="!canEdit || saving"
+                  :type-product-id="entry.typeProductId"
+                  helper-text="Un produit valide est requis pour cette pièce."
+                  @update:model-value="(value) => setProductSelection(entry.index, value)"
+                />
+              </div>
+            </div>
+          </div>
+
+          <!-- Skeleton preview (edit mode only) -->
+          <StructureSkeletonPreview
+            v-if="isEditMode && (selectedType || resolvedStructure)"
+            :structure="resolvedStructure"
+            :description="selectedType?.description || 'Ce squelette définit la structure et les champs personnalisés de la pièce.'"
+            :preview-badge="formatPieceStructurePreview(resolvedStructure)"
+            variant="piece"
+          />
+
+          <!-- Custom fields -->
+          <div v-if="visibleCustomFields.length" class="space-y-4 rounded-lg border border-base-200 bg-base-200/40 p-4">
+            <header class="space-y-1">
+              <h2 class="font-semibold text-base-content">Champs personnalisés</h2>
+              <p v-if="isEditMode" class="text-xs text-base-content/70">
+                Mettez à jour les valeurs propres à cette pièce.
+              </p>
+            </header>
+            <template v-if="isEditMode">
+              <CustomFieldInputGrid :fields="customFieldInputs" :disabled="!canEdit || saving" />
+            </template>
+            <template v-else>
+              <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+                <div
+                  v-for="field in visibleCustomFields"
+                  :key="field.customFieldValueId || field.id || field.name"
+                  class="form-control"
+                >
+                  <label class="label">
+                    <span class="label-text text-sm">{{ field.name }}</span>
+                  </label>
+                  <div class="input input-bordered input-sm bg-base-200 flex items-center">
+                    {{ field.value }}
+                  </div>
+                </div>
+              </div>
+            </template>
+          </div>
+
+          <!-- Documents -->
+          <div
+            v-if="isEditMode || pieceDocuments.length > 0"
+            class="space-y-4 rounded-lg border border-base-200 bg-base-200/40 p-4"
+          >
+            <header class="flex flex-col gap-1 md:flex-row md:items-center md:justify-between">
+              <div>
+                <h2 class="font-semibold text-base-content">Documents</h2>
+                <p class="text-xs text-base-content/70">
+                  {{ isEditMode ? 'Gérez les documents associés à cette pièce.' : 'Documents associés à cette pièce.' }}
+                </p>
+              </div>
+              <span v-if="isEditMode && selectedFiles.length" class="badge badge-outline">
+                {{ selectedFiles.length }} document{{ selectedFiles.length > 1 ? 's' : '' }} prêt{{ selectedFiles.length > 1 ? 's' : '' }} à être ajouté{{ selectedFiles.length > 1 ? 's' : '' }}
+              </span>
+            </header>
+            <template v-if="isEditMode">
+              <div :class="{ 'pointer-events-none opacity-60': !canEdit || saving || uploadingDocuments }">
+                <DocumentUpload
+                  v-model="selectedFiles"
+                  title="Déposer vos fichiers"
+                  subtitle="Formats acceptés : PDF, images, documents…"
+                  @files-added="handleFilesAdded"
+                />
+              </div>
+              <p v-if="uploadingDocuments" class="text-xs text-base-content/70">
+                Téléversement des documents en cours…
+              </p>
+              <p v-else-if="loadingDocuments" class="text-xs text-base-content/70">
+                Chargement des documents en cours…
+              </p>
+              <DocumentListInline
+                v-else
+                :documents="pieceDocuments"
+                :can-delete="canEdit"
+                :can-edit="true"
+                :delete-disabled="uploadingDocuments"
+                empty-text="Aucun document n'est associé à cette pièce pour le moment."
+                @preview="openPreview"
+                @edit="openEditModal"
+                @delete="removeDocument"
+              />
+            </template>
+            <template v-else>
+              <p v-if="loadingDocuments" class="text-xs text-base-content/70">
+                Chargement des documents en cours…
+              </p>
+              <DocumentListInline
+                v-else
+                :documents="pieceDocuments"
+                :can-delete="false"
+                :can-edit="false"
+                empty-text="Aucun document n'est associé à cette pièce pour le moment."
+                @preview="openPreview"
+              />
+            </template>
+          </div>
+
+          <EntityHistorySection
+            :entries="history"
+            :loading="historyLoading"
+            :error="historyError"
+            :field-labels="historyFieldLabels"
+          />
+
+          <!-- Save buttons (edit mode only) -->
+          <div v-if="isEditMode" class="flex flex-col gap-3 md:flex-row md:justify-end">
+            <button type="button" class="btn btn-ghost" :class="{ 'btn-disabled': saving }" @click="isEditMode = false">
+              Annuler
+            </button>
+            <button type="button" class="btn btn-primary" :disabled="!canSubmit" @click="submitEdition">
+              <span v-if="saving" class="loading loading-spinner loading-sm mr-2" />
+              Enregistrer les modifications
+            </button>
+          </div>
+
+          <!-- Comments -->
+          <div class="mt-4">
+            <CommentSection
+              entity-type="piece"
+              :entity-id="String(route.params.id)"
+              :entity-name="piece?.name"
+              show-resolved
+            />
+          </div>
+        </div>
+      </section>
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { useRoute } from '#imports'
+import { usePieceEdit } from '~/composables/usePieceEdit'
+import { useDocuments } from '~/composables/useDocuments'
+import { usePermissions } from '~/composables/usePermissions'
+import { useConstructeurs } from '~/composables/useConstructeurs'
+
+const route = useRoute()
+const { canEdit } = usePermissions()
+const { getConstructeurById } = useConstructeurs()
+const { updateDocument } = useDocuments()
+
+const isEditMode = ref(false)
+
+const {
+  piece,
+  loading,
+  saving,
+  selectedFiles,
+  uploadingDocuments,
+  loadingDocuments,
+  pieceDocuments,
+  previewDocument,
+  previewVisible,
+  selectedTypeId,
+  editionForm,
+  productSelections,
+  customFieldInputs,
+  pieceTypeList,
+  selectedType,
+  resolvedStructure,
+  structureProducts,
+  productRequirementDescriptions,
+  productRequirementEntries,
+  canSubmit,
+  historyFieldLabels,
+  history,
+  historyLoading,
+  historyError,
+  openPreview,
+  closePreview,
+  removeDocument,
+  handleFilesAdded,
+  setProductSelection,
+  submitEdition: _submitEdition,
+  fetchPiece,
+  formatPieceStructurePreview,
+} = usePieceEdit(String(route.params.id))
+
+const submitEdition = async () => {
+  await _submitEdition()
+  if (!saving.value) {
+    await fetchPiece()
+    isEditMode.value = false
+  }
+}
+
+const editingDocument = ref<any | null>(null)
+const editModalVisible = ref(false)
+
+const visibleCustomFields = computed(() => {
+  if (isEditMode.value) return customFieldInputs.value
+  return customFieldInputs.value.filter(
+    (f) => f.value !== null && f.value !== undefined && f.value !== '',
+  )
+})
+
+const openEditModal = (doc: any) => {
+  editingDocument.value = doc
+  editModalVisible.value = true
+}
+
+const handleDocumentUpdated = async (data: { name?: string; type?: string }) => {
+  if (!editingDocument.value?.id) return
+  const result = await updateDocument(editingDocument.value.id, data)
+  if (result.success) {
+    const idx = pieceDocuments.value.findIndex((d: any) => d.id === editingDocument.value?.id)
+    if (idx !== -1) {
+      pieceDocuments.value[idx] = { ...pieceDocuments.value[idx], ...data }
+    }
+  }
+  editModalVisible.value = false
+  editingDocument.value = null
+}
+
+onMounted(() => {
+  if (route.query.edit === 'true' && canEdit.value) {
+    isEditMode.value = true
+  }
+})
+</script>

app/pages/pieces-catalog.vue

@@ -119,12 +119,14 @@
 
           <template #cell-actions="{ row }">
             <div class="flex items-center justify-end gap-2">
-              <NuxtLink
-                :to="`/pieces/${row.piece.id}/edit`"
+              <button
+                v-if="canEdit"
+                type="button"
                 class="btn btn-ghost btn-xs"
+                @click="navigateTo(`/piece/${row.piece.id}?edit=true`)"
               >
                 Modifier
-              </NuxtLink>
+              </button>
               <button
                 v-if="canEdit"
                 type="button"
@@ -134,6 +136,12 @@
               >
                 Supprimer
               </button>
+              <NuxtLink
+                :to="`/piece/${row.piece.id}`"
+                class="btn btn-primary btn-xs"
+              >
+                Détails
+              </NuxtLink>
             </div>
           </template>
         </DataTable>

app/pages/pieces/create.vue

@@ -466,7 +466,7 @@ const submitCreation = async () => {
         selectedDocuments.value = []
       }
       toast.showSuccess('Pièce créée avec succès')
-      await router.replace(`/pieces/${createdPiece.id}/edit`)
+      await router.replace(`/piece/${createdPiece.id}?edit=true`)
     } else if (result.error) {
       toast.showError(result.error)
     }

app/pages/product-catalog.vue

@@ -116,12 +116,14 @@
 
           <template #cell-actions="{ row }">
             <div class="flex items-center justify-end gap-2">
-              <NuxtLink
-                :to="`/product/${row.product.id}/edit`"
+              <button
+                v-if="canEdit"
+                type="button"
                 class="btn btn-ghost btn-xs"
+                @click="navigateTo(`/product/${row.product.id}?edit=true`)"
               >
                 Modifier
-              </NuxtLink>
+              </button>
               <button
                 v-if="canEdit"
                 type="button"
@@ -130,6 +132,12 @@
               >
                 Supprimer
               </button>
+              <NuxtLink
+                :to="`/product/${row.product.id}`"
+                class="btn btn-primary btn-xs"
+              >
+                Détails
+              </NuxtLink>
             </div>
           </template>
         </DataTable>

app/pages/product/[id]/index.vue

@@ -0,0 +1,609 @@
+<template>
+  <div>
+    <DocumentPreviewModal
+      :document="previewDocument"
+      :visible="previewVisible"
+      :documents="productDocuments"
+      @close="closePreview"
+    />
+    <DocumentEditModal
+      :visible="editModalVisible"
+      :document="editingDocument"
+      @close="editModalVisible = false"
+      @updated="handleDocumentUpdated"
+    />
+    <main class="container mx-auto px-6 py-10">
+      <div v-if="loading" class="flex flex-col items-center gap-4 py-20 text-center">
+        <span class="loading loading-spinner loading-lg" aria-hidden="true" />
+        <p class="text-sm text-base-content/70">Chargement du produit…</p>
+      </div>
+
+      <div v-else-if="!product" class="max-w-xl mx-auto">
+        <div class="alert alert-error shadow-lg">
+          <div>
+            <h2 class="font-semibold text-lg">Produit introuvable</h2>
+            <p class="text-sm text-base-content/80">
+              Nous n'avons pas pu trouver le produit demandé. Il a peut-être été supprimé.
+            </p>
+          </div>
+        </div>
+        <button type="button" class="btn btn-primary mt-6" @click="$router.back()">
+          Retour au catalogue
+        </button>
+      </div>
+
+      <section v-else class="card border border-base-200 bg-base-100 shadow-sm max-w-5xl mx-auto">
+        <div class="card-body space-y-6">
+          <DetailHeader
+            :title="isEditMode ? 'Modifier le produit' : product.name"
+            :subtitle="isEditMode ? 'Ajustez les informations du produit et ses champs personnalisés.' : undefined"
+            :is-edit-mode="isEditMode"
+            :can-edit="canEdit"
+            back-link="/product-catalog"
+            @toggle-edit="isEditMode = !isEditMode"
+          />
+
+          <!-- Catégorie (always shown) -->
+          <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+            <div class="form-control">
+              <label class="label">
+                <span class="label-text">Catégorie de produit</span>
+              </label>
+              <template v-if="isEditMode">
+                <input
+                  :value="product?.typeProduct?.name || 'Catégorie inconnue'"
+                  type="text"
+                  class="input input-bordered input-sm md:input-md bg-base-200"
+                  disabled
+                >
+                <p class="text-xs text-base-content/60 mt-1">
+                  La catégorie d'origine ne peut pas être modifiée depuis cette page.
+                </p>
+              </template>
+              <div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center">
+                {{ product?.typeProduct?.name || '—' }}
+              </div>
+            </div>
+          </div>
+
+          <!-- Nom (always shown) -->
+          <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+            <div class="form-control">
+              <label class="label">
+                <span class="label-text">Nom du produit</span>
+              </label>
+              <input
+                v-if="isEditMode"
+                v-model="editionForm.name"
+                type="text"
+                class="input input-bordered input-sm md:input-md"
+                :disabled="!canEdit || saving"
+                placeholder="Nom affiché dans le catalogue"
+                required
+              >
+              <div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center">
+                {{ product.name }}
+              </div>
+            </div>
+          </div>
+
+          <!-- Référence + Fournisseurs (if value or edit mode) -->
+          <div
+            v-if="isEditMode || product.reference || editionForm.constructeurIds.length"
+            class="grid grid-cols-1 gap-4 md:grid-cols-2"
+          >
+            <div v-if="isEditMode || product.reference" class="form-control">
+              <label class="label">
+                <span class="label-text">Référence</span>
+              </label>
+              <input
+                v-if="isEditMode"
+                v-model="editionForm.reference"
+                type="text"
+                class="input input-bordered input-sm md:input-md"
+                :disabled="!canEdit || saving"
+                placeholder="Référence interne ou fournisseur"
+              >
+              <div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center">
+                {{ product.reference }}
+              </div>
+            </div>
+
+            <div v-if="isEditMode || editionForm.constructeurIds.length" class="form-control">
+              <label class="label">
+                <span class="label-text">Fournisseurs</span>
+              </label>
+              <ConstructeurSelect
+                v-if="isEditMode"
+                v-model="editionForm.constructeurIds"
+                class="w-full"
+                :disabled="!canEdit || saving"
+                placeholder="Rechercher un ou plusieurs fournisseurs..."
+                :initial-options="product?.constructeurs || []"
+              />
+              <div v-else class="flex flex-wrap gap-2">
+                <span
+                  v-for="id in editionForm.constructeurIds"
+                  :key="id"
+                  class="badge badge-outline"
+                >
+                  {{ getConstructeurById(id)?.name || id }}
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <!-- Prix fournisseur (if value or edit mode) -->
+          <div v-if="isEditMode || product.supplierPrice" class="grid grid-cols-1 gap-4 md:grid-cols-2">
+            <div class="form-control">
+              <label class="label">
+                <span class="label-text">Prix fournisseur indicatif (€)</span>
+              </label>
+              <input
+                v-if="isEditMode"
+                v-model="editionForm.supplierPrice"
+                type="number"
+                step="0.01"
+                min="0"
+                class="input input-bordered input-sm md:input-md"
+                :disabled="!canEdit || saving"
+                placeholder="Valeur indicatrice"
+              >
+              <div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center">
+                {{ product.supplierPrice }} €
+              </div>
+            </div>
+          </div>
+
+          <!-- Structure preview (edit mode only) -->
+          <div v-if="isEditMode && structurePreview" class="space-y-3 rounded-lg border border-base-200 bg-base-200/40 p-4">
+            <div class="flex items-center justify-between gap-4">
+              <div>
+                <h2 class="font-semibold text-base-content">Champs définis par la catégorie</h2>
+                <p class="text-xs text-base-content/70">
+                  {{ productType?.description || 'Le squelette de catégorie contrôle les champs personnalisés disponibles.' }}
+                </p>
+              </div>
+              <span class="badge badge-outline">{{ structurePreview }}</span>
+            </div>
+          </div>
+
+          <!-- Custom fields -->
+          <div v-if="visibleCustomFields.length" class="space-y-4 rounded-lg border border-base-200 bg-base-200/40 p-4">
+            <header class="space-y-1">
+              <h2 class="font-semibold text-base-content">Champs personnalisés</h2>
+              <p v-if="isEditMode" class="text-xs text-base-content/70">
+                Mettez à jour les valeurs propres à ce produit.
+              </p>
+            </header>
+            <template v-if="isEditMode">
+              <CustomFieldInputGrid :fields="customFieldInputs" :disabled="!canEdit || saving" />
+            </template>
+            <template v-else>
+              <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+                <div
+                  v-for="field in visibleCustomFields"
+                  :key="field.customFieldValueId || field.id || field.name"
+                  class="form-control"
+                >
+                  <label class="label">
+                    <span class="label-text text-sm">{{ field.name }}</span>
+                  </label>
+                  <div class="input input-bordered input-sm bg-base-200 flex items-center">
+                    {{ field.value }}
+                  </div>
+                </div>
+              </div>
+            </template>
+          </div>
+
+          <!-- Documents -->
+          <div
+            v-if="isEditMode || productDocuments.length > 0"
+            class="space-y-4 rounded-lg border border-base-200 bg-base-200/40 p-4"
+          >
+            <header class="flex flex-col gap-1 md:flex-row md:items-center md:justify-between">
+              <div>
+                <h2 class="font-semibold text-base-content">Documents</h2>
+                <p class="text-xs text-base-content/70">
+                  {{ isEditMode ? 'Gérez les documents associés à ce produit.' : 'Documents associés à ce produit.' }}
+                </p>
+              </div>
+              <span v-if="isEditMode && selectedFiles.length" class="badge badge-outline">
+                {{ selectedFiles.length }} document{{ selectedFiles.length > 1 ? 's' : '' }} prêt{{ selectedFiles.length > 1 ? 's' : '' }} à être ajouté{{ selectedFiles.length > 1 ? 's' : '' }}
+              </span>
+            </header>
+            <template v-if="isEditMode">
+              <div :class="{ 'pointer-events-none opacity-60': !canEdit || saving || uploadingDocuments }">
+                <DocumentUpload
+                  v-model="selectedFiles"
+                  title="Déposer vos fichiers"
+                  subtitle="Formats acceptés : PDF, images, documents…"
+                  @files-added="handleFilesAdded"
+                />
+              </div>
+              <p v-if="uploadingDocuments" class="text-xs text-base-content/70">
+                Téléversement des documents en cours…
+              </p>
+              <p v-else-if="loadingDocuments" class="text-xs text-base-content/70">
+                Chargement des documents en cours…
+              </p>
+              <DocumentListInline
+                v-else
+                :documents="productDocuments"
+                :can-delete="canEdit"
+                :can-edit="true"
+                :delete-disabled="uploadingDocuments || saving"
+                empty-text="Aucun document n'est associé à ce produit pour le moment."
+                @preview="openPreview"
+                @edit="openEditModal"
+                @delete="removeDocument"
+              />
+            </template>
+            <template v-else>
+              <p v-if="loadingDocuments" class="text-xs text-base-content/70">
+                Chargement des documents en cours…
+              </p>
+              <DocumentListInline
+                v-else
+                :documents="productDocuments"
+                :can-delete="false"
+                :can-edit="false"
+                empty-text="Aucun document n'est associé à ce produit pour le moment."
+                @preview="openPreview"
+              />
+            </template>
+          </div>
+
+          <EntityHistorySection
+            :entries="history"
+            :loading="historyLoading"
+            :error="historyError"
+            :field-labels="historyFieldLabels"
+          />
+
+          <!-- Save buttons (edit mode only) -->
+          <div v-if="isEditMode" class="flex flex-col gap-3 md:flex-row md:justify-end">
+            <button type="button" class="btn btn-ghost" :class="{ 'btn-disabled': saving }" @click="isEditMode = false">
+              Annuler
+            </button>
+            <button type="button" class="btn btn-primary" :disabled="!canSubmit" @click="submitEdition">
+              <span v-if="saving" class="loading loading-spinner loading-sm mr-2" />
+              Enregistrer les modifications
+            </button>
+          </div>
+          <p v-if="isEditMode && product && !requiredCustomFieldsFilled" class="text-xs text-error text-right">
+            Merci de renseigner tous les champs personnalisés obligatoires.
+          </p>
+
+          <!-- Comments -->
+          <div class="mt-4">
+            <CommentSection
+              entity-type="product"
+              :entity-id="String(route.params.id)"
+              :entity-name="product?.name"
+              show-resolved
+            />
+          </div>
+        </div>
+      </section>
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { useRoute, useRouter } from '#imports'
+import ConstructeurSelect from '~/components/ConstructeurSelect.vue'
+import DocumentUpload from '~/components/DocumentUpload.vue'
+import DocumentPreviewModal from '~/components/DocumentPreviewModal.vue'
+import { useProducts } from '~/composables/useProducts'
+import { useCustomFields } from '~/composables/useCustomFields'
+import { useToast } from '~/composables/useToast'
+import { humanizeError } from '~/shared/utils/errorMessages'
+import { useDocuments } from '~/composables/useDocuments'
+import { useConstructeurs } from '~/composables/useConstructeurs'
+import { useProductHistory } from '~/composables/useProductHistory'
+import { usePermissions } from '~/composables/usePermissions'
+import { formatProductStructurePreview, normalizeProductStructureForSave } from '~/shared/modelUtils'
+import { uniqueConstructeurIds } from '~/shared/constructeurUtils'
+import { getModelType } from '~/services/modelTypes'
+import type { ProductModelStructure } from '~/shared/types/inventory'
+import { canPreviewDocument } from '~/utils/documentPreview'
+import {
+  type CustomFieldInput,
+  buildCustomFieldInputs,
+  requiredCustomFieldsFilled as _requiredCustomFieldsFilled,
+  saveCustomFieldValues as _saveCustomFieldValues,
+} from '~/shared/utils/customFieldFormUtils'
+
+const { canEdit } = usePermissions()
+const route = useRoute()
+const router = useRouter()
+const toast = useToast()
+const { getProduct, updateProduct } = useProducts()
+const { upsertCustomFieldValue, updateCustomFieldValue } = useCustomFields()
+const {
+  loadDocumentsByProduct,
+  uploadDocuments: uploadProductDocuments,
+  deleteDocument: deleteProductDocument,
+  updateDocument,
+} = useDocuments()
+const { ensureConstructeurs, getConstructeurById } = useConstructeurs()
+const {
+  history,
+  loading: historyLoading,
+  error: historyError,
+  loadHistory,
+} = useProductHistory()
+
+const isEditMode = ref(false)
+
+const product = ref<any | null>(null)
+const productType = ref<any | null>(null)
+const structure = ref<ProductModelStructure | null>(null)
+const customFieldInputs = ref<CustomFieldInput[]>([])
+const loading = ref(true)
+const saving = ref(false)
+const selectedFiles = ref<File[]>([])
+const uploadingDocuments = ref(false)
+const loadingDocuments = ref(false)
+const productDocuments = ref<any[]>([])
+const previewDocument = ref<any | null>(null)
+const previewVisible = ref(false)
+const editingDocument = ref<any | null>(null)
+const editModalVisible = ref(false)
+
+const historyFieldLabels: Record<string, string> = {
+  name: 'Nom',
+  reference: 'Référence',
+  supplierPrice: 'Prix fournisseur',
+  typeProduct: 'Catégorie',
+  constructeurIds: 'Fournisseurs',
+}
+
+const refreshCustomFieldInputs = (
+  structureOverride?: ProductModelStructure | null,
+  valuesOverride?: any[] | null,
+) => {
+  const nextStructure = structureOverride ?? structure.value ?? null
+  const nextValues = valuesOverride ?? product.value?.customFieldValues ?? null
+  customFieldInputs.value = buildCustomFieldInputs(nextStructure, nextValues)
+}
+
+const editionForm = reactive({
+  name: '' as string,
+  reference: '' as string,
+  constructeurIds: [] as string[],
+  supplierPrice: '' as string,
+})
+
+const requiredCustomFieldsFilled = computed(() =>
+  _requiredCustomFieldsFilled(customFieldInputs.value),
+)
+
+const canSubmit = computed(() =>
+  Boolean(canEdit.value && product.value && editionForm.name.trim().length >= 2 && requiredCustomFieldsFilled.value && !saving.value),
+)
+
+const structurePreview = computed(() => formatProductStructurePreview(structure.value))
+
+const visibleCustomFields = computed(() => {
+  if (isEditMode.value) return customFieldInputs.value
+  return customFieldInputs.value.filter(
+    (f) => f.value !== null && f.value !== undefined && f.value !== '',
+  )
+})
+
+const openPreview = (doc: any) => {
+  if (!doc || !canPreviewDocument(doc)) return
+  previewDocument.value = doc
+  previewVisible.value = true
+}
+const closePreview = () => { previewVisible.value = false; previewDocument.value = null }
+
+const openEditModal = (doc: any) => {
+  editingDocument.value = doc
+  editModalVisible.value = true
+}
+const handleDocumentUpdated = async (data: { name?: string; type?: string }) => {
+  if (!editingDocument.value?.id) return
+  const result = await updateDocument(editingDocument.value.id, data)
+  if (result.success) {
+    const idx = productDocuments.value.findIndex((d: any) => d.id === editingDocument.value?.id)
+    if (idx !== -1) {
+      productDocuments.value[idx] = { ...productDocuments.value[idx], ...data }
+    }
+  }
+  editModalVisible.value = false
+  editingDocument.value = null
+}
+
+const loadProduct = async () => {
+  const id = route.params.id
+  if (!id || typeof id !== 'string') {
+    product.value = null
+    loading.value = false
+    return
+  }
+  const result = await getProduct(id)
+  if (result.success && result.data) {
+    product.value = result.data
+    productDocuments.value = Array.isArray(result.data.documents) ? result.data.documents : []
+
+    await loadProductType()
+
+    const customValues = Array.isArray(result.data?.customFieldValues) ? result.data.customFieldValues : []
+    refreshCustomFieldInputs(undefined, customValues)
+
+    hydrateForm()
+
+    loadHistory(result.data.id).catch(() => {})
+  } else {
+    product.value = null
+  }
+  loading.value = false
+}
+
+const refreshDocuments = async () => {
+  if (!product.value?.id) {
+    return
+  }
+  loadingDocuments.value = true
+  try {
+    const result = await loadDocumentsByProduct(product.value.id, { updateStore: false })
+    if (result.success) {
+      productDocuments.value = Array.isArray(result.data) ? result.data : []
+    }
+  } finally {
+    loadingDocuments.value = false
+  }
+}
+
+const removeDocument = async (documentId: string | number | null | undefined) => {
+  if (!documentId) {
+    return
+  }
+  const result = await deleteProductDocument(documentId, { updateStore: false })
+  if (result.success) {
+    productDocuments.value = productDocuments.value.filter((doc) => doc.id !== documentId)
+    toast.showSuccess('Document supprimé')
+  }
+}
+
+const handleFilesAdded = async (files: File[]) => {
+  if (!files?.length || !product.value?.id) {
+    return
+  }
+  uploadingDocuments.value = true
+  try {
+    const result = await uploadProductDocuments(
+      {
+        files,
+        context: { productId: product.value.id },
+      },
+      { updateStore: false },
+    )
+    if (result.success) {
+      selectedFiles.value = []
+      await refreshDocuments()
+      toast.showSuccess('Document(s) ajouté(s)')
+    } else if (result.error) {
+      toast.showError(result.error)
+    }
+  } finally {
+    uploadingDocuments.value = false
+  }
+}
+
+const loadProductType = async () => {
+  const embedded = product.value?.typeProduct
+  if (embedded && typeof embedded === 'object' && embedded.id) {
+    const embeddedStructure = embedded.structure ?? null
+    if (embeddedStructure) {
+      productType.value = embedded
+      structure.value = normalizeProductStructureForSave(embeddedStructure)
+      return
+    }
+  }
+
+  if (!product.value?.typeProductId) {
+    productType.value = embedded ?? null
+    structure.value = normalizeProductStructureForSave(embedded?.structure ?? null)
+    return
+  }
+  try {
+    const type = await getModelType(product.value.typeProductId)
+    productType.value = type
+    structure.value = normalizeProductStructureForSave(type?.structure ?? null)
+  } catch (error) {
+    console.error('Erreur lors du chargement du type de produit:', error)
+    productType.value = embedded ?? null
+    structure.value = normalizeProductStructureForSave(embedded?.structure ?? null)
+  }
+}
+
+const hydrateForm = () => {
+  if (!product.value) {
+    return
+  }
+  editionForm.name = product.value.name || ''
+  editionForm.reference = product.value.reference || ''
+  editionForm.constructeurIds = uniqueConstructeurIds(
+    product.value,
+    Array.isArray(product.value.constructeurs) ? product.value.constructeurs : [],
+  )
+  editionForm.supplierPrice = product.value.supplierPrice !== null && product.value.supplierPrice !== undefined
+    ? String(product.value.supplierPrice)
+    : ''
+  refreshCustomFieldInputs(structure.value, product.value.customFieldValues)
+  if (editionForm.constructeurIds.length) {
+    ensureConstructeurs(editionForm.constructeurIds).catch(() => {})
+  }
+}
+
+watch(
+  () => product.value?.documents,
+  (docs) => {
+    if (Array.isArray(docs)) {
+      productDocuments.value = docs
+    }
+  },
+  { immediate: true },
+)
+
+const submitEdition = async () => {
+  if (!product.value) {
+    return
+  }
+
+  const constructeurIds = uniqueConstructeurIds(editionForm.constructeurIds)
+
+  const payload: Record<string, any> = {
+    name: editionForm.name.trim(),
+    reference: editionForm.reference.trim() || null,
+    constructeurIds,
+  }
+
+  const rawPrice = typeof editionForm.supplierPrice === 'string'
+    ? editionForm.supplierPrice.trim()
+    : editionForm.supplierPrice
+  payload.supplierPrice = rawPrice !== '' && rawPrice !== null && rawPrice !== undefined
+    ? Number.isNaN(Number(rawPrice))
+      ? null
+      : String(Number(rawPrice))
+    : null
+
+  saving.value = true
+  try {
+    const result = await updateProduct(product.value.id, payload)
+    if (result.success && result.data?.id) {
+      product.value = result.data
+      const failedFields = await _saveCustomFieldValues(
+        'product',
+        result.data.id,
+        [result.data?.typeProduct?.structure?.customFields],
+        { customFieldInputs, upsertCustomFieldValue, updateCustomFieldValue, toast },
+      )
+      if (failedFields.length) {
+        toast.showError(`Impossible d'enregistrer ${failedFields.length} champ(s): ${failedFields.join(', ')}`)
+        return
+      }
+      toast.showSuccess('Produit mis à jour avec succès')
+      await loadProduct()
+      isEditMode.value = false
+    }
+  } catch (error: any) {
+    toast.showError(humanizeError(error?.message) || 'Impossible de mettre à jour le produit')
+  } finally {
+    saving.value = false
+  }
+}
+
+onMounted(async () => {
+  await loadProduct()
+  if (route.query.edit === 'true' && canEdit.value) {
+    isEditMode.value = true
+  }
+})
+</script>

app/pages/product/create.vue

@@ -330,7 +330,7 @@ const submitCreation = async () => {
       const failedFields = await saveCustomFieldValues(result.data.id)
       if (failedFields.length) {
         toast.showError(`Produit créé, mais impossible d'enregistrer ${failedFields.length} champ(s): ${failedFields.join(', ')}`)
-        await router.replace(`/product/${result.data.id}/edit`)
+        await router.replace(`/product/${result.data.id}?edit=true`)
         return
       }
       if (selectedDocuments.value.length) {
@@ -352,7 +352,7 @@ const submitCreation = async () => {
         }
       }
       toast.showSuccess('Produit créé avec succès')
-      await router.replace(`/product/${productId}/edit`)
+      await router.replace(`/product/${productId}?edit=true`)
     }
   } catch (error: any) {
     toast.showError(error?.message || 'Erreur lors de la création du produit')