From 92141c65644ec7711b2831626edf0b0ee765c0db Mon Sep 17 00:00:00 2001
From: Matthieu <mtholot19@gmail.com>
Date: Wed, 25 Mar 2026 10:09:44 +0100
Subject: [PATCH] feat(detail) : add consultation pages for piece, composant,
 product

Add read-only detail pages with edit/view toggle for piece, composant and
product, matching the existing machine detail pattern. Empty fields and
documents section are hidden in consultation mode. Catalogs and cross-links
updated to point to the new detail pages.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 app/components/ComponentItem.vue      |   2 +-
 app/components/DetailHeader.vue       |  40 ++
 app/components/PieceItem.vue          |   2 +-
 app/composables/useComponentCreate.ts |   2 +-
 app/composables/useComponentEdit.ts   |   1 +
 app/composables/usePieceEdit.ts       |   1 +
 app/pages/comments.vue                |   6 +-
 app/pages/component-catalog.vue       |  14 +-
 app/pages/component/[id]/index.vue    | 517 ++++++++++++++++++++++
 app/pages/piece/[id].vue              | 449 +++++++++++++++++++
 app/pages/pieces-catalog.vue          |  14 +-
 app/pages/pieces/create.vue           |   2 +-
 app/pages/product-catalog.vue         |  14 +-
 app/pages/product/[id]/index.vue      | 609 ++++++++++++++++++++++++++
 app/pages/product/create.vue          |   4 +-
 15 files changed, 1659 insertions(+), 18 deletions(-)
 create mode 100644 app/components/DetailHeader.vue
 create mode 100644 app/pages/component/[id]/index.vue
 create mode 100644 app/pages/piece/[id].vue
 create mode 100644 app/pages/product/[id]/index.vue

diff --git a/app/components/ComponentItem.vue b/app/components/ComponentItem.vue
index da8c2dc..6de2d7b 100644
--- a/app/components/ComponentItem.vue
+++ b/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
diff --git a/app/components/DetailHeader.vue b/app/components/DetailHeader.vue
new file mode 100644
index 0000000..d54869a
--- /dev/null
+++ b/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>
diff --git a/app/components/PieceItem.vue b/app/components/PieceItem.vue
index 4d72aeb..579c535 100644
--- a/app/components/PieceItem.vue
+++ b/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
diff --git a/app/composables/useComponentCreate.ts b/app/composables/useComponentCreate.ts
index cd7c6c4..40ab58f 100644
--- a/app/composables/useComponentCreate.ts
+++ b/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)
diff --git a/app/composables/useComponentEdit.ts b/app/composables/useComponentEdit.ts
index 48dafc6..48e9afe 100644
--- a/app/composables/useComponentEdit.ts
+++ b/app/composables/useComponentEdit.ts
@@ -569,6 +569,7 @@ export function useComponentEdit(componentId: string) {
     handleFilesAdded,
     refreshDocuments,
     submitEdition,
+    fetchComponent,
     setSlotQuantity,
     setPieceSlotSelection,
     setProductSlotSelection,
diff --git a/app/composables/usePieceEdit.ts b/app/composables/usePieceEdit.ts
index 99226c4..8053dc0 100644
--- a/app/composables/usePieceEdit.ts
+++ b/app/composables/usePieceEdit.ts
@@ -467,6 +467,7 @@ export function usePieceEdit(pieceId: string) {
     handleFilesAdded,
     setProductSelection,
     submitEdition,
+    fetchPiece,
     formatPieceStructurePreview,
   }
 }
diff --git a/app/pages/comments.vue b/app/pages/comments.vue
index a6ca3fc..05f31e7 100644
--- a/app/pages/comments.vue
+++ b/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`,
diff --git a/app/pages/component-catalog.vue b/app/pages/component-catalog.vue
index 4920fd0..a6ef97b 100644
--- a/app/pages/component-catalog.vue
+++ b/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>
diff --git a/app/pages/component/[id]/index.vue b/app/pages/component/[id]/index.vue
new file mode 100644
index 0000000..819f4b3
--- /dev/null
+++ b/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>
diff --git a/app/pages/piece/[id].vue b/app/pages/piece/[id].vue
new file mode 100644
index 0000000..59e9db5
--- /dev/null
+++ b/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>
diff --git a/app/pages/pieces-catalog.vue b/app/pages/pieces-catalog.vue
index e9ca1bf..3bcb89c 100644
--- a/app/pages/pieces-catalog.vue
+++ b/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>
diff --git a/app/pages/pieces/create.vue b/app/pages/pieces/create.vue
index efd3832..759ff05 100644
--- a/app/pages/pieces/create.vue
+++ b/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)
     }
diff --git a/app/pages/product-catalog.vue b/app/pages/product-catalog.vue
index ebd98f1..a344232 100644
--- a/app/pages/product-catalog.vue
+++ b/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>
diff --git a/app/pages/product/[id]/index.vue b/app/pages/product/[id]/index.vue
new file mode 100644
index 0000000..872b332
--- /dev/null
+++ b/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>
diff --git a/app/pages/product/create.vue b/app/pages/product/create.vue
index f95a10d..a0653ef 100644
--- a/app/pages/product/create.vue
+++ b/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')