feat: add product catalogue and product-aware UI

- introduce product catalogue pages, management view entries and shared product composables\n- wire product selection into component/piece flows and machine skeleton requirements\n- display linked product metadata and documents across machine, component and piece views\n- generalize model type tooling to handle PRODUCT category
2025-11-05 15:35:02 +01:00
parent 3af6c50892
commit d860f24e69
42 changed files with 6052 additions and 142 deletions
--- a/app/pages/component-catalog.vue
+++ b/app/pages/component-catalog.vue
@@ -94,6 +94,7 @@
                <th class="w-24">Aperçu</th>
                <th>Nom</th>
                <th>Référence</th>
+                <th>Type de composant</th>
                <th>Actions</th>
              </tr>
            </thead>
@@ -107,6 +108,7 @@
                </td>
                <td>{{ component.name || 'Composant sans nom' }}</td>
                <td>{{ component.reference || '—' }}</td>
+                <td>{{ resolveComponentType(component) }}</td>
                <td>
                  <div class="flex items-center gap-2">
                    <NuxtLink
@@ -178,6 +180,17 @@ const resolvePreviewAlt = (component: Record<string, any>) => {
  return 'Aperçu du document'
 }

+const resolveComponentType = (component: Record<string, any>) => {
+  const type = component?.typeComposant
+  if (type?.name) {
+    return type.name
+  }
+  if (component?.typeComposantLabel) {
+    return component.typeComposantLabel
+  }
+  return '—'
+}
+
 const resolveDeleteGuard = (component: Record<string, any>) => {
  const blockingReasons: string[] = []
  const machineLinks = Array.isArray(component?.machineLinks)
--- a/app/pages/component/[id]/edit.vue
+++ b/app/pages/component/[id]/edit.vue
@@ -445,7 +445,6 @@ const loadingDocuments = ref(false)
 const componentDocuments = ref<any[]>([])
 const previewDocument = ref<any | null>(null)
 const previewVisible = ref(false)
-
 const selectedTypeId = ref<string>('')
 const editionForm = reactive({
  name: '' as string,
--- a/app/pages/component/create.vue
+++ b/app/pages/component/create.vue
@@ -148,6 +148,18 @@
                </ul>
              </div>

+              <div v-if="getStructureProducts(selectedTypeStructure).length" class="space-y-2">
+                <h3 class="font-semibold text-sm text-base-content">Produits imposés</h3>
+                <ul class="list-disc list-inside space-y-1">
+                  <li
+                    v-for="(product, index) in getStructureProducts(selectedTypeStructure)"
+                    :key="product.role || product.typeProductId || product.familyCode || index"
+                  >
+                    {{ resolveProductLabel(product) }}
+                  </li>
+                </ul>
+              </div>
+
              <div v-if="getStructureSubcomponents(selectedTypeStructure).length" class="space-y-2">
                <h3 class="font-semibold text-sm text-base-content">Sous-composants</h3>
                <ul class="list-disc list-inside space-y-1">
@@ -189,14 +201,16 @@
            class="flex items-center gap-3 rounded-md border border-base-200 bg-base-100 p-3 text-sm text-base-content/70"
          >
            <span class="loading loading-spinner loading-sm" aria-hidden="true"></span>
-            Chargement du catalogue de pièces et de composants…
+            Chargement du catalogue de pièces, produits et composants…
          </div>
          <ComponentStructureAssignmentNode
            v-else-if="structureAssignments"
            :assignment="structureAssignments"
            :pieces="availablePieces"
+            :products="availableProducts"
            :components="availableComponents"
            :pieces-loading="piecesLoading"
+            :products-loading="productsLoading"
            :components-loading="componentsLoading"
          />
          <p v-else class="text-xs text-error">
@@ -335,6 +349,7 @@ import SearchSelect from '~/components/common/SearchSelect.vue'
 import { useComponentTypes } from '~/composables/useComponentTypes'
 import { useComposants } from '~/composables/useComposants'
 import { usePieces } from '~/composables/usePieces'
+import { useProducts } from '~/composables/useProducts'
 import { useToast } from '~/composables/useToast'
 import { useCustomFields } from '~/composables/useCustomFields'
 import { useDocuments } from '~/composables/useDocuments'
@@ -342,6 +357,7 @@ import { formatStructurePreview, normalizeStructureForEditor } from '~/shared/mo
 import { uniqueConstructeurIds } from '~/shared/constructeurUtils'
 import type {
  ComponentModelPiece,
+  ComponentModelProduct,
  ComponentModelStructure,
  ComponentModelStructureNode,
 } from '~/shared/types/inventory'
@@ -367,6 +383,11 @@ const {
  loadPieces,
  loading: piecesLoading,
 } = usePieces()
+const {
+  products: productCatalogRef,
+  loadProducts,
+  loading: productsLoading,
+} = useProducts()
 const toast = useToast()
 const { upsertCustomFieldValue, updateCustomFieldValue } = useCustomFields()
 const { uploadDocuments } = useDocuments()
@@ -387,9 +408,10 @@ const selectedDocuments = ref<File[]>([])
 const uploadingDocuments = ref(false)

 const availablePieces = computed(() => pieceCatalogRef.value ?? [])
+const availableProducts = computed(() => productCatalogRef.value ?? [])
 const availableComponents = computed(() => componentCatalogRef.value ?? [])
 const structureDataLoading = computed(
-  () => piecesLoading.value || componentsLoading.value,
+  () => piecesLoading.value || componentsLoading.value || productsLoading.value,
 )

 watch(
@@ -486,6 +508,21 @@ const extractPiecesFromNode = (
  )
 }

+const extractProductsFromNode = (
+  definition: ComponentModelStructure | ComponentModelStructureNode | null | undefined,
+): ComponentModelProduct[] => {
+  if (!definition || typeof definition !== 'object') {
+    return []
+  }
+  const raw = Array.isArray((definition as any).products)
+    ? (definition as any).products
+    : []
+  return raw.filter(
+    (item: unknown): item is ComponentModelProduct =>
+      !!item && typeof item === 'object',
+  )
+}
+
 const buildAssignmentNode = (
  definition: ComponentModelStructureNode | ComponentModelStructure,
  path: string,
@@ -496,6 +533,12 @@ const buildAssignmentNode = (
    selectedPieceId: '',
  }))

+  const products = extractProductsFromNode(definition).map((product, index) => ({
+    path: `${path}:product-${index}`,
+    definition: product,
+    selectedProductId: '',
+  }))
+
  const subcomponents = extractSubcomponents(definition).map(
    (child, index) => buildAssignmentNode(child, `${path}:sub-${index}`),
  )
@@ -505,6 +548,7 @@ const buildAssignmentNode = (
    definition,
    selectedComponentId: '',
    pieces,
+    products,
    subcomponents,
  }
 }
@@ -522,7 +566,7 @@ const hasAssignments = (node: StructureAssignmentNode | null): boolean => {
  if (!node) {
    return false
  }
-  if (node.pieces.length > 0 || node.subcomponents.length > 0) {
+  if (node.pieces.length > 0 || node.products.length > 0 || node.subcomponents.length > 0) {
    return true
  }
  return node.subcomponents.some((child) => hasAssignments(child))
@@ -539,13 +583,21 @@ const isAssignmentNodeComplete = (
  const piecesComplete = node.pieces.every(
    (piece) => !!piece.selectedPieceId && piece.selectedPieceId.length > 0,
  )
+  const productsComplete = node.products.every(
+    (product) => !!product.selectedProductId && product.selectedProductId.length > 0,
+  )
  const subcomponentsComplete = node.subcomponents.every(
    (child) =>
      !!child.selectedComponentId &&
      child.selectedComponentId.length > 0 &&
      isAssignmentNodeComplete(child, false),
  )
-  return piecesComplete && subcomponentsComplete && (isRootNode || !!node.selectedComponentId)
+  return (
+    piecesComplete &&
+    productsComplete &&
+    subcomponentsComplete &&
+    (isRootNode || !!node.selectedComponentId)
+  )
 }

 const structureSelectionsComplete = computed(() => {
@@ -588,6 +640,15 @@ const sanitizePieceDefinition = (definition: ComponentModelPiece) =>
    familyCode: (definition as any).familyCode ?? null,
  })

+const sanitizeProductDefinition = (definition: ComponentModelProduct) =>
+  stripNullish({
+    role: (definition as any).role ?? null,
+    typeProductId: definition.typeProductId ?? null,
+    typeProductLabel: (definition as any).typeProductLabel ?? null,
+    reference: (definition as any).reference ?? null,
+    familyCode: (definition as any).familyCode ?? null,
+  })
+
 const serializeStructureAssignments = (
  root: StructureAssignmentNode | null,
 ) => {
@@ -609,6 +670,16 @@ const serializeStructureAssignments = (
        }),
      )

+    const serializedProducts = assignment.products
+      .filter((product) => !!product.selectedProductId)
+      .map((product) =>
+        stripNullish({
+          path: product.path,
+          definition: sanitizeProductDefinition(product.definition),
+          selectedProductId: product.selectedProductId,
+        }),
+      )
+
    const serializedSubcomponents = assignment.subcomponents
      .map((child) => serializeNode(child, false))
      .filter((child) => Object.keys(child).length > 0)
@@ -624,6 +695,9 @@ const serializeStructureAssignments = (
    if (serializedPieces.length) {
      base.pieces = serializedPieces
    }
+    if (serializedProducts.length) {
+      base.products = serializedProducts
+    }
    if (serializedSubcomponents.length) {
      base.subcomponents = serializedSubcomponents
    }
@@ -634,6 +708,7 @@ const serializeStructureAssignments = (
  const serializedRoot = serializeNode(root, true)
  if (
    (!serializedRoot.pieces || serializedRoot.pieces.length === 0) &&
+    (!serializedRoot.products || serializedRoot.products.length === 0) &&
    (!serializedRoot.subcomponents || serializedRoot.subcomponents.length === 0)
  ) {
    return null
@@ -682,6 +757,10 @@ const getStructurePieces = (structure: ComponentModelStructure | null) => {
  return Array.isArray(structure?.pieces) ? structure.pieces : []
 }

+const getStructureProducts = (structure: ComponentModelStructure | null) => {
+  return Array.isArray(structure?.products) ? structure.products : []
+}
+
 const getStructureSubcomponents = (structure: ComponentModelStructure | null) => {
  if (Array.isArray(structure?.subcomponents)) {
    return structure.subcomponents
@@ -709,6 +788,25 @@ const resolvePieceLabel = (piece: Record<string, any>) => {
  return parts.length ? parts.join(' • ') : 'Pièce'
 }

+const resolveProductLabel = (product: Record<string, any>) => {
+  const parts: string[] = []
+  if (product.role) {
+    parts.push(product.role)
+  }
+  if (product.typeProduct?.name) {
+    parts.push(product.typeProduct.name)
+  } else if (product.typeProductLabel) {
+    parts.push(product.typeProductLabel)
+  } else if (product.typeProduct?.code) {
+    parts.push(`Catégorie ${product.typeProduct.code}`)
+  } else if (product.familyCode) {
+    parts.push(`Catégorie ${product.familyCode}`)
+  } else if (product.typeProductId) {
+    parts.push(`#${product.typeProductId}`)
+  }
+  return parts.length ? parts.join(' • ') : 'Produit'
+}
+
 const resolveSubcomponentLabel = (node: Record<string, any>) => {
  const parts: string[] = []
  if (node.alias) {
@@ -776,8 +874,17 @@ const submitCreation = async () => {
    }
  }

+  const rootProductSelection =
+    structureAssignments.value?.products?.find(
+      (product) => typeof product.selectedProductId === 'string' && product.selectedProductId.trim().length > 0,
+    ) ?? null
+
+  if (rootProductSelection?.selectedProductId) {
+    payload.productId = rootProductSelection.selectedProductId.trim()
+  }
+
  if (structureHasRequirements.value && !structureSelectionsComplete.value) {
-    toast.showError('Complétez la sélection des pièces et sous-composants.')
+    toast.showError('Complétez la sélection des pièces, produits et sous-composants.')
    return
  }

@@ -829,6 +936,7 @@ onMounted(async () => {
    loadComponentTypes(),
    loadPieces(),
    loadComposants(),
+    loadProducts(),
  ])
 })

--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -423,6 +423,12 @@
                  selectedMachineType.pieceRequirements?.length || 0
                }}</span>
              </div>
+              <div class="flex items-center gap-2">
+                <span class="font-medium">Produits requis :</span>
+                <span class="badge badge-sm">{{
+                  selectedMachineType.productRequirements?.length || 0
+                }}</span>
+              </div>
              <div class="flex items-center gap-2">
                <span class="font-medium">Catégorie :</span>
                <span class="badge badge-outline badge-sm">{{
--- a/app/pages/machine-skeleton/index.vue
+++ b/app/pages/machine-skeleton/index.vue
@@ -58,6 +58,13 @@
                  pièces</span
                >
              </div>
+              <div class="flex items-center gap-2">
+                <IconLucideBox class="w-4 h-4" aria-hidden="true" />
+                <span
+                  >{{ type.productRequirements?.length || 0 }} produit(s)
+                  requis</span
+                >
+              </div>
            </div>
            <div class="card-actions justify-end mt-4">
              <button
@@ -99,6 +106,7 @@ import { useToast } from "~/composables/useToast";
 import IconLucidePlus from "~icons/lucide/plus";
 import IconLucidePackage from "~icons/lucide/package";
 import IconLucideLayoutGrid from "~icons/lucide/layout-grid";
+import IconLucideBox from "~icons/lucide/box";

 const { machineTypes, loading, loadMachineTypes, deleteMachineType } =
  useMachineTypesApi();
--- a/app/pages/machine-skeleton/new.vue
+++ b/app/pages/machine-skeleton/new.vue
@@ -65,6 +65,10 @@
                    <IconLucideList class="h-4 w-4" aria-hidden="true" />
                    {{ type.pieceRequirements?.length || 0 }} groupe(s) de pièces
                  </span>
+                  <span class="inline-flex items-center gap-1">
+                    <IconLucideBox class="h-4 w-4" aria-hidden="true" />
+                    {{ type.productRequirements?.length || 0 }} produit(s)
+                  </span>
                </div>
              </div>
            </article>
@@ -85,6 +89,7 @@ import { useToast } from '~/composables/useToast'
 import IconLucidePlus from '~icons/lucide/plus'
 import IconLucideClipboardList from '~icons/lucide/clipboard-list'
 import IconLucideList from '~icons/lucide/list'
+import IconLucideBox from '~icons/lucide/box'

 const { machineTypes, loadMachineTypes, createMachineType } = useMachineTypesApi()
 const { showError } = useToast()
@@ -100,7 +105,8 @@ const createEmptyType = () => ({
  maintenanceFrequency: '',
  customFields: [],
  componentRequirements: [],
-  pieceRequirements: []
+  pieceRequirements: [],
+  productRequirements: []
 })

 const draftType = ref(createEmptyType())
@@ -187,6 +193,21 @@ const normalizePieceRequirements = (requirements = []) =>
    .sort((a, b) => (a.orderIndex ?? 0) - (b.orderIndex ?? 0))
    .map((req, index) => ({ ...req, orderIndex: index }))

+const normalizeProductRequirements = (requirements = []) =>
+  requirements
+    .filter(req => req?.typeProductId)
+    .map((req, index) => ({
+      typeProductId: req.typeProductId,
+      label: req.label?.trim() ? req.label.trim() : undefined,
+      minCount: toIntegerOrNull(req.minCount, 0),
+      maxCount: toIntegerOrNull(req.maxCount, null),
+      required: req.required ?? false,
+      allowNewModels: req.allowNewModels ?? true,
+      orderIndex: typeof req.orderIndex === 'number' ? req.orderIndex : index
+    }))
+    .sort((a, b) => (a.orderIndex ?? 0) - (b.orderIndex ?? 0))
+    .map((req, index) => ({ ...req, orderIndex: index }))
+
 const buildPayload = typeData => ({
  name: typeData.name,
  description: typeData.description,
@@ -194,7 +215,8 @@ const buildPayload = typeData => ({
  maintenanceFrequency: typeData.maintenanceFrequency,
  customFields: normalizeCustomFields(typeData.customFields),
  componentRequirements: normalizeComponentRequirements(typeData.componentRequirements),
-  pieceRequirements: normalizePieceRequirements(typeData.pieceRequirements)
+  pieceRequirements: normalizePieceRequirements(typeData.pieceRequirements),
+  productRequirements: normalizeProductRequirements(typeData.productRequirements)
 })

 const resetForm = () => {
--- a/app/pages/machine/[id].vue
+++ b/app/pages/machine/[id].vue
--- a/app/pages/machines/new.vue
+++ b/app/pages/machines/new.vue
@@ -90,13 +90,17 @@
                  <span class="font-medium">Groupes de pièces :</span>
                  <span class="badge badge-sm">{{ selectedMachineType.pieceRequirements?.length || 0 }}</span>
                </span>
+                <span class="inline-flex items-center gap-2">
+                  <span class="font-medium">Produits requis :</span>
+                  <span class="badge badge-sm">{{ selectedMachineType.productRequirements?.length || 0 }}</span>
+                </span>
                <span class="inline-flex items-center gap-2">
                  <span class="font-medium">Catégorie :</span>
                  <span class="badge badge-outline badge-sm">{{ selectedMachineType.category || 'N/A' }}</span>
                </span>
              </div>
              <p
-                v-if="(selectedMachineType.componentRequirements?.length || 0) === 0 && (selectedMachineType.pieceRequirements?.length || 0) === 0"
+                v-if="(selectedMachineType.componentRequirements?.length || 0) === 0 && (selectedMachineType.pieceRequirements?.length || 0) === 0 && (selectedMachineType.productRequirements?.length || 0) === 0"
                class="text-xs text-gray-500"
              >
                Ce type n'a pas encore de familles configurées. La machine héritera de la structure legacy du type.
@@ -304,10 +308,130 @@
                    
                    </div>
                  </div>
+            </div>
+          </div>
+        </div>
+        <div v-if="selectedMachineType?.productRequirements?.length" class="space-y-4">
+          <h4 class="text-sm font-semibold">
+            Produits catalogue requis
+          </h4>
+
+          <div
+            v-for="requirement in selectedMachineType.productRequirements"
+            :id="`product-group-${requirement.id}`"
+            :key="requirement.id"
+            class="border border-base-200 rounded-lg p-4 space-y-3"
+          >
+            <div class="flex flex-wrap items-start justify-between gap-3">
+              <div class="space-y-1">
+                <h5 class="font-medium text-sm">
+                  {{ requirement.label || requirement.typeProduct?.name || 'Groupe de produits' }}
+                </h5>
+                <p class="text-xs text-gray-500">
+                  Catégorie : {{ requirement.typeProduct?.name || 'Non définie' }} · Min : {{ requirement.minCount ?? (requirement.required ? 1 : 0) }}
+                  · Max : {{ requirement.maxCount ?? '∞' }}
+                </p>
+                <p
+                  v-if="(requirement.allowNewModels ?? true) === false"
+                  class="text-xs text-error"
+                >
+                  Sélection de produits existants uniquement.
+                </p>
+              </div>
+
+              <button
+                type="button"
+                class="btn btn-sm btn-outline"
+                :disabled="requirement.maxCount !== null && getProductRequirementEntries(requirement.id).length >= requirement.maxCount"
+                @click="addProductSelectionEntry(requirement)"
+              >
+                <IconLucidePlus class="w-4 h-4 mr-2" aria-hidden="true" />
+                Ajouter
+              </button>
+            </div>
+
+            <div v-if="getProductRequirementEntries(requirement.id).length === 0" class="text-xs text-gray-500">
+              Aucun produit sélectionné pour ce groupe.
+            </div>
+
+            <div
+              v-for="(entry, entryIndex) in getProductRequirementEntries(requirement.id)"
+              :key="`${requirement.id}-product-${entryIndex}`"
+              class="bg-base-200/60 rounded-md p-3 space-y-4"
+            >
+              <div class="flex flex-wrap items-center justify-between gap-2 text-xs text-gray-500">
+                <span>
+                  Catégorie appliquée :
+                  {{ requirement.typeProduct?.name || 'Non définie' }}
+                </span>
+                <button
+                  type="button"
+                  class="btn btn-square btn-xs btn-error"
+                  @click="removeProductSelectionEntry(requirement.id, entryIndex)"
+                >
+                  <IconLucideX class="w-4 h-4" aria-hidden="true" />
+                </button>
+              </div>
+
+              <div class="grid grid-cols-1 gap-3">
+                <div class="space-y-2">
+                  <div class="form-control">
+                    <label class="label">
+                      <span class="label-text text-xs">Produit existant</span>
+                    </label>
+                    <ProductSelect
+                      :model-value="entry.productId || ''"
+                      :type-product-id="requirement.typeProductId || requirement.typeProduct?.id || null"
+                      :placeholder="productsLoading ? 'Chargement…' : 'Sélectionner un produit…'"
+                      empty-text="Aucun produit disponible pour cette catégorie"
+                      :disabled="productsLoading"
+                      @update:modelValue="setProductRequirementProduct(requirement, entryIndex, $event || '')"
+                    />
+                  </div>
+                  <p
+                    v-if="!productsLoading && getProductOptions(requirement).length === 0"
+                    class="text-xs text-error"
+                  >
+                    Aucun produit existant pour cette catégorie. Créez-en un depuis le catalogue.
+                  </p>
+                </div>
+
+                <div
+                  v-if="entry.productId"
+                  class="bg-base-300/60 rounded-md p-3 text-xs text-gray-600 space-y-1"
+                >
+                  <div class="font-medium">
+                    {{ findProductById(entry.productId)?.name || 'Produit' }}
+                  </div>
+                  <div>
+                    Référence : {{ findProductById(entry.productId)?.reference || "—" }}
+                  </div>
+                  <div>
+                    Prix indicatif :
+                    <span
+                      v-if="findProductById(entry.productId)?.supplierPrice !== undefined && findProductById(entry.productId)?.supplierPrice !== null"
+                    >
+                      {{ Number(findProductById(entry.productId)?.supplierPrice).toFixed(2) }} €
+                    </span>
+                    <span v-else>
+                      —
+                    </span>
+                  </div>
+                  <div>
+                    Fournisseurs :
+                    <span v-if="findProductById(entry.productId)?.constructeurs?.length">
+                      {{ findProductById(entry.productId)?.constructeurs.map(constructeur => constructeur?.name).filter(Boolean).join(', ') }}
+                    </span>
+                    <span v-else>
+                      —
+                    </span>
+                  </div>
                </div>
              </div>
            </div>
-            <div v-if="machinePreview" class="space-y-4">
+          </div>
+        </div>
+        <div v-if="machinePreview" class="space-y-4">
              <div class="border border-base-200 rounded-lg bg-base-100/80">
                <div class="p-4 space-y-4">
                  <div class="flex items-center justify-between gap-3">
@@ -486,6 +610,73 @@
                    Aucun groupe de pièces à configurer pour ce type.
                  </div>

+                  <div v-if="machinePreview.productGroups.length" class="space-y-3">
+                    <h5 class="text-xs font-semibold uppercase tracking-wide text-gray-500">
+                      Produits requis
+                    </h5>
+                    <div
+                      v-for="group in machinePreview.productGroups"
+                      :key="group.id"
+                      :id="`product-group-${group.id}`"
+                      class="border border-base-200 rounded-md p-3 space-y-3"
+                    >
+                      <div class="flex flex-wrap items-start justify-between gap-2">
+                        <div>
+                          <p class="text-sm font-semibold">
+                            {{ group.label }}
+                          </p>
+                          <p class="text-xs text-gray-500">
+                            Catégorie : {{ group.typeName }} · Min {{ group.min }} ·
+                            {{ group.max !== null ? `Max ${group.max}` : 'Max ∞' }}
+                          </p>
+                        </div>
+                        <div class="flex flex-wrap items-center gap-2">
+                          <span class="badge badge-sm" :class="getStatusBadgeClass(group.status)">
+                            Couverture : {{ group.count }}
+                          </span>
+                          <span class="badge badge-ghost badge-sm">
+                            Direct {{ group.completed }} / {{ group.total || 0 }}
+                          </span>
+                        </div>
+                      </div>
+
+                      <div v-if="group.issues.length" class="rounded bg-warning/10 border border-warning/30 p-2 text-[11px] text-warning">
+                        <ul class="list-disc pl-4 space-y-1">
+                          <li v-for="issue in group.issues" :key="issue.message">
+                            {{ issue.message }}
+                          </li>
+                        </ul>
+                      </div>
+
+                      <ul v-if="group.entries?.length" class="space-y-2">
+                        <li
+                          v-for="entry in group.entries"
+                          :key="entry.key"
+                          class="flex items-start gap-3"
+                        >
+                          <component
+                            :is="entry.status === 'complete' ? IconLucideCheckCircle2 : IconLucideCircle"
+                            class="w-4 h-4 mt-0.5"
+                            :class="entry.status === 'complete' ? 'text-success' : 'text-gray-400'"
+                            aria-hidden="true"
+                          />
+                          <div class="flex-1">
+                            <p class="text-sm font-medium" :class="entry.status === 'complete' ? 'text-gray-900' : 'text-gray-500'">
+                              {{ entry.title }}
+                            </p>
+                            <p v-if="entry.subtitle" class="text-xs text-gray-500">
+                              {{ entry.subtitle }}
+                            </p>
+                          </div>
+                        </li>
+                      </ul>
+
+                      <p v-else class="text-xs text-gray-500">
+                        Couverture assurée via composants ou pièces liés.
+                      </p>
+                    </div>
+                  </div>
+
                  <div
                    v-if="machinePreview.issues.length && machinePreview.status !== 'ready'"
                    class="rounded-md border border-warning/30 bg-warning/10 p-3 text-xs text-warning"
@@ -551,9 +742,11 @@ import { useSites } from '~/composables/useSites'
 import { useMachineTypesApi } from '~/composables/useMachineTypesApi'
 import { useComposants } from '~/composables/useComposants'
 import { usePieces } from '~/composables/usePieces'
+import { useProducts } from '~/composables/useProducts'
 import { useToast } from '~/composables/useToast'
 import { sanitizeDefinitionOverrides } from '~/shared/modelUtils'
 import SearchSelect from '~/components/common/SearchSelect.vue'
+import ProductSelect from '~/components/ProductSelect.vue'
 import IconLucidePlus from '~icons/lucide/plus'
 import IconLucideX from '~icons/lucide/x'
 import IconLucideEye from '~icons/lucide/eye'
@@ -566,6 +759,7 @@ const { sites, loadSites } = useSites()
 const { machineTypes, loadMachineTypes, loading: machineTypesLoading } = useMachineTypesApi()
 const { composants, loadComposants, loading: composantsLoading } = useComposants()
 const { pieces, loadPieces, loading: piecesLoading } = usePieces()
+const { products, loadProducts, loading: productsLoading } = useProducts()
 const toast = useToast()

 const submitting = ref(false)
@@ -579,6 +773,7 @@ const newMachine = reactive({

 const componentRequirementSelections = reactive({})
 const pieceRequirementSelections = reactive({})
+const productRequirementSelections = reactive({})

 const selectedMachineType = computed(() => {
  if (!newMachine.typeMachineId) {
@@ -604,7 +799,12 @@ const machineTypeDescription = (type) => {
  }
  const componentCount = type.componentRequirements?.length ?? 0
  const pieceCount = type.pieceRequirements?.length ?? 0
-  parts.push(`${componentCount} composant(s)`, `${pieceCount} pièce(s)`)
+  const productCount = type.productRequirements?.length ?? 0
+  parts.push(
+    `${componentCount} composant(s)`,
+    `${pieceCount} pièce(s)`,
+    `${productCount} produit(s)`
+  )
  return parts.join(' • ')
 }

@@ -630,6 +830,17 @@ const pieceById = computed(() => {

 const componentInventory = computed(() => composants.value || [])
 const pieceInventory = computed(() => pieces.value || [])
+const productInventory = computed(() => products.value || [])
+
+const productById = computed(() => {
+  const map = new Map()
+  ;(productInventory.value || []).forEach((product) => {
+    if (product?.id) {
+      map.set(product.id, product)
+    }
+  })
+  return map
+})

 const isPlainObject = value => value !== null && typeof value === 'object' && !Array.isArray(value)

@@ -904,6 +1115,11 @@ const componentOptionDescription = (component) => {
  if (machineAssignments.length) {
    parts.push(`Machines: ${formatAssignmentList(machineAssignments)}`)
  }
+  const productTypeName = component.product?.typeProduct?.name
+  const productLabel = component.product?.name || component.product?.reference
+  if (productTypeName || productLabel) {
+    parts.push(`Produit: ${productTypeName || productLabel}`)
+  }
  return parts.join(' • ')
 }

@@ -929,9 +1145,83 @@ const pieceOptionDescription = (piece) => {
  if (componentAssignments.length) {
    parts.push(`Composants: ${formatAssignmentList(componentAssignments)}`)
  }
+  const productTypeName = piece.product?.typeProduct?.name
+  const productLabel = piece.product?.name || piece.product?.reference
+  if (productTypeName || productLabel) {
+    parts.push(`Produit: ${productTypeName || productLabel}`)
+  }
  return parts.join(' • ')
 }

+const getProductOptions = (requirement) => {
+  const requirementTypeId = requirement?.typeProductId || requirement?.typeProduct?.id || null
+  return productInventory.value.filter((product) => {
+    if (!product?.id) {
+      return false
+    }
+    if (!requirementTypeId) {
+      return true
+    }
+    const productTypeId =
+      product.typeProductId ||
+      product.typeProduct?.id ||
+      null
+    return productTypeId === requirementTypeId
+  })
+}
+
+const productOptionLabel = (product) => product?.name || product?.reference || 'Produit'
+
+const productOptionDescription = (product) => {
+  if (!product) {
+    return ''
+  }
+  const parts = []
+  if (product.reference) {
+    parts.push(`Réf. ${product.reference}`)
+  }
+  if (product.constructeurs?.length) {
+    const label = product.constructeurs
+      .map((constructeur) => constructeur?.name)
+      .filter(Boolean)
+      .join(', ')
+    if (label) {
+      parts.push(`Fournisseurs: ${label}`)
+    }
+  }
+  if (product.supplierPrice !== undefined && product.supplierPrice !== null) {
+    const price = Number(product.supplierPrice)
+    if (!Number.isNaN(price)) {
+      parts.push(`${price.toFixed(2)} €`)
+    }
+  }
+  return parts.join(' • ')
+}
+
+const getProductTypeIdFromComponent = (component) => {
+  if (!component || typeof component !== 'object') {
+    return null
+  }
+  return (
+    component.product?.typeProductId ||
+    component.product?.typeProduct?.id ||
+    component.productTypeId ||
+    null
+  )
+}
+
+const getProductTypeIdFromPiece = (piece) => {
+  if (!piece || typeof piece !== 'object') {
+    return null
+  }
+  return (
+    piece.product?.typeProductId ||
+    piece.product?.typeProduct?.id ||
+    piece.productTypeId ||
+    null
+  )
+}
+
 const setComponentRequirementComponent = (requirement, index, componentId) => {
  const entries = getComponentRequirementEntries(requirement.id)
  const entry = entries[index]
@@ -971,6 +1261,13 @@ const findPieceById = (id) => {
  }
  return pieceById.value.get(id) || null
 }
+
+const findProductById = (id) => {
+  if (!id) {
+    return null
+  }
+  return productById.value.get(id) || null
+}
 const getStatusBadgeClass = (status) => {
  if (status === 'ready') {
    return 'badge-success'
@@ -1003,6 +1300,7 @@ const resolvePieceRequirementTypeLabel = (requirement, entry) => {

 const getComponentRequirementEntries = requirementId => componentRequirementSelections[requirementId] || []
 const getPieceRequirementEntries = requirementId => pieceRequirementSelections[requirementId] || []
+const getProductRequirementEntries = requirementId => productRequirementSelections[requirementId] || []

 const createComponentSelectionEntry = (requirement, source = null) => ({
  typeComposantId: requirement?.typeComposantId || requirement?.typeComposant?.id || null,
@@ -1016,6 +1314,170 @@ const createPieceSelectionEntry = (requirement, source = null) => ({
  definition: {},
 })

+const createProductSelectionEntry = (requirement, source = null) => ({
+  typeProductId:
+    source?.typeProductId ||
+    requirement?.typeProductId ||
+    requirement?.typeProduct?.id ||
+    null,
+  productId: source?.productId || null,
+})
+
+const computeProductUsageFromSelections = (type) => {
+  const usage = new Map()
+
+  const increment = (typeProductId) => {
+    if (!typeProductId) {
+      return
+    }
+    usage.set(typeProductId, (usage.get(typeProductId) ?? 0) + 1)
+  }
+
+  for (const requirement of type.componentRequirements || []) {
+    const entries = getComponentRequirementEntries(requirement.id)
+    entries.forEach((entry) => {
+      if (!entry?.composantId) {
+        return
+      }
+      const component = findComponentById(entry.composantId)
+      const typeProductId = getProductTypeIdFromComponent(component)
+      increment(typeProductId)
+    })
+  }
+
+  for (const requirement of type.pieceRequirements || []) {
+    const entries = getPieceRequirementEntries(requirement.id)
+    entries.forEach((entry) => {
+      if (!entry?.pieceId) {
+        return
+      }
+      const piece = findPieceById(entry.pieceId)
+      const typeProductId = getProductTypeIdFromPiece(piece)
+      increment(typeProductId)
+    })
+  }
+
+  for (const requirement of type.productRequirements || []) {
+    const entries = getProductRequirementEntries(requirement.id)
+    entries.forEach((entry) => {
+      if (!entry?.productId) {
+        return
+      }
+      const product = findProductById(entry.productId)
+      const typeProductId =
+        product?.typeProductId ||
+        product?.typeProduct?.id ||
+        entry?.typeProductId ||
+        requirement?.typeProductId ||
+        requirement?.typeProduct?.id ||
+        null
+      increment(typeProductId)
+    })
+  }
+
+  return usage
+}
+
+const buildProductRequirementStats = (type) => {
+  const usage = computeProductUsageFromSelections(type)
+
+  const stats = (type.productRequirements || []).map((requirement) => {
+    const typeProductId =
+      requirement.typeProductId ||
+      requirement.typeProduct?.id ||
+      null
+
+    const label =
+      requirement.label?.trim() ||
+      requirement.typeProduct?.name ||
+      requirement.typeProduct?.code ||
+      'Produit requis'
+
+    const typeName = requirement.typeProduct?.name || 'Non défini'
+
+    const min = requirement.minCount ?? (requirement.required ? 1 : 0)
+    const max = requirement.maxCount ?? null
+    const count = typeProductId ? usage.get(typeProductId) ?? 0 : 0
+    const rawEntries = getProductRequirementEntries(requirement.id)
+    const normalizedEntries = rawEntries.map((entry, index) => {
+      const product = entry?.productId ? findProductById(entry.productId) : null
+      const subtitleParts = []
+      if (product?.reference) {
+        subtitleParts.push(`Réf. ${product.reference}`)
+      }
+      if (product?.supplierPrice !== undefined && product?.supplierPrice !== null) {
+        const price = Number(product.supplierPrice)
+        if (!Number.isNaN(price)) {
+          subtitleParts.push(`${price.toFixed(2)} €`)
+        }
+      }
+      if (Array.isArray(product?.constructeurs) && product.constructeurs.length) {
+        const label = product.constructeurs.map((constructeur) => constructeur?.name).filter(Boolean).join(', ')
+        if (label) {
+          subtitleParts.push(`Fournisseurs: ${label}`)
+        }
+      }
+      return {
+        key: `${requirement.id}-${index}`,
+        status: product ? 'complete' : 'pending',
+        title: product?.name || product?.reference || `Sélection #${index + 1}`,
+        subtitle: subtitleParts.length ? subtitleParts.join(' • ') : null,
+      }
+    })
+
+    const issues = []
+    if (count < min) {
+      issues.push({
+        message: `Le produit "${label}" nécessite au moins ${min} sélection(s). Actuellement ${count}.`,
+        kind: 'error',
+        anchor: `product-group-${requirement.id}`,
+      })
+    }
+    if (max !== null && count > max) {
+      issues.push({
+        message: `Le produit "${label}" ne peut pas dépasser ${max} sélection(s). Actuellement ${count}.`,
+        kind: 'error',
+        anchor: `product-group-${requirement.id}`,
+      })
+    }
+
+    if (normalizedEntries.length > 0 && normalizedEntries.some((entry) => entry.status !== 'complete')) {
+      issues.push({
+        message: 'Sélectionner un produit pour chaque entrée ajoutée.',
+        kind: 'error',
+        anchor: `product-group-${requirement.id}`,
+      })
+    }
+
+    const completed = normalizedEntries.filter((entry) => entry.status === 'complete').length
+    const total = normalizedEntries.length
+
+    const status = issues.some((issue) => issue.kind === 'error')
+      ? 'error'
+      : issues.some((issue) => issue.kind === 'warning')
+        ? 'warning'
+        : 'ready'
+
+    return {
+      id: requirement.id,
+      requirement,
+      label,
+      typeName,
+      count,
+      min,
+      max,
+      completed,
+      total,
+      entries: normalizedEntries,
+      issues,
+      allowNewModels: requirement.allowNewModels ?? true,
+      status,
+    }
+  })
+
+  return { stats, usage }
+}
+
 const clearRequirementSelections = () => {
  Object.keys(componentRequirementSelections).forEach((key) => {
    delete componentRequirementSelections[key]
@@ -1023,6 +1485,9 @@ const clearRequirementSelections = () => {
  Object.keys(pieceRequirementSelections).forEach((key) => {
    delete pieceRequirementSelections[key]
  })
+  Object.keys(productRequirementSelections).forEach((key) => {
+    delete productRequirementSelections[key]
+  })
 }

 const addComponentSelectionEntry = (requirement) => {
@@ -1061,6 +1526,51 @@ const removePieceSelectionEntry = (requirementId, index) => {
  pieceRequirementSelections[requirementId] = entries.filter((_, i) => i !== index)
 }

+const addProductSelectionEntry = (requirement) => {
+  const entries = getProductRequirementEntries(requirement.id)
+  const max = requirement.maxCount ?? null
+  if (max !== null && entries.length >= max) {
+    toast.showError(`Vous ne pouvez pas ajouter plus de ${max} produit(s) pour ${requirement.label || requirement.typeProduct?.name || 'ce groupe'}`)
+    return
+  }
+  productRequirementSelections[requirement.id] = [
+    ...entries,
+    createProductSelectionEntry(requirement),
+  ]
+}
+
+const removeProductSelectionEntry = (requirementId, index) => {
+  const entries = getProductRequirementEntries(requirementId)
+  productRequirementSelections[requirementId] = entries.filter((_, i) => i !== index)
+}
+
+const setProductRequirementProduct = (requirement, index, productId) => {
+  const entries = getProductRequirementEntries(requirement.id)
+  const entry = entries[index]
+  if (!entry) {
+    return
+  }
+
+  const normalizedProductId = productId || null
+  entry.productId = normalizedProductId
+
+  if (normalizedProductId) {
+    const product = findProductById(normalizedProductId)
+    entry.typeProductId =
+      product?.typeProductId ||
+      product?.typeProduct?.id ||
+      entry.typeProductId ||
+      requirement?.typeProductId ||
+      requirement?.typeProduct?.id ||
+      null
+  } else {
+    entry.typeProductId =
+      requirement?.typeProductId ||
+      requirement?.typeProduct?.id ||
+      null
+  }
+}
+
 const extractParentIdentifiers = (source) => {
  if (!isPlainObject(source)) {
    return {}
@@ -1113,6 +1623,7 @@ const validateRequirementSelections = (type) => {
  const errors = []
  const componentLinksPayload = []
  const pieceLinksPayload = []
+  const productLinksPayload = []

  for (const requirement of type.componentRequirements || []) {
    const entries = getComponentRequirementEntries(requirement.id)
@@ -1216,6 +1727,58 @@ const validateRequirementSelections = (type) => {
    })
  }

+  const { stats: productStats } = buildProductRequirementStats(type)
+  for (const requirement of type.productRequirements || []) {
+    const entries = getProductRequirementEntries(requirement.id)
+    const max = requirement.maxCount ?? null
+
+    if (max !== null && entries.length > max) {
+      errors.push(`Le groupe "${requirement.label || requirement.typeProduct?.name || 'Produits'}" ne peut dépasser ${max} entrée(s) directe(s).`)
+    }
+
+    entries.forEach((entry) => {
+      if (!entry.productId) {
+        errors.push(`Sélectionner un produit pour "${requirement.label || requirement.typeProduct?.name || 'Produits'}".`)
+        return
+      }
+
+      const product = findProductById(entry.productId)
+      if (!product) {
+        errors.push(`Le produit sélectionné est introuvable (ID: ${entry.productId}).`)
+        return
+      }
+
+      const requiredTypeId = requirement.typeProductId || requirement.typeProduct?.id || null
+      const productTypeId =
+        product.typeProductId ||
+        product.typeProduct?.id ||
+        entry.typeProductId ||
+        null
+
+      if (requiredTypeId && productTypeId && productTypeId !== requiredTypeId) {
+        errors.push(`Le produit "${product.name || product.reference || product.id}" n'appartient pas à la catégorie attendue.`)
+        return
+      }
+
+      const payload = {
+        requirementId: requirement.id,
+        productId: entry.productId,
+      }
+
+      Object.assign(payload, extractParentIdentifiers(requirement), extractParentIdentifiers(entry))
+
+      productLinksPayload.push(payload)
+    })
+  }
+
+  productStats.forEach((stat) => {
+    stat.issues
+      .filter((issue) => issue.kind === 'error')
+      .forEach((issue) => {
+        errors.push(issue.message)
+      })
+  })
+
  if (errors.length > 0) {
    return { valid: false, error: errors[0] }
  }
@@ -1224,6 +1787,7 @@ const validateRequirementSelections = (type) => {
    valid: true,
    componentLinks: componentLinksPayload,
    pieceLinks: pieceLinksPayload,
+    productLinks: productLinksPayload,
  }
 }

@@ -1425,20 +1989,24 @@ const machinePreview = computed(() => {
      issues,
      completed,
      total: entries.length,
-      status
-    }
-  })
+    status
+  }
+})
+
+  const { stats: productGroups } = buildProductRequirementStats(type)

  const aggregatedIssues = [
    ...baseIssues.map(issue => ({ ...issue, scope: 'Informations générales' })),
    ...componentGroups.flatMap(group => group.issues.map(issue => ({ ...issue, scope: group.label }))),
-    ...pieceGroups.flatMap(group => group.issues.map(issue => ({ ...issue, scope: group.label })))
+    ...pieceGroups.flatMap(group => group.issues.map(issue => ({ ...issue, scope: group.label }))),
+    ...productGroups.flatMap(group => group.issues.map(issue => ({ ...issue, scope: group.label }))),
  ]

  const statuses = [
    baseStatus,
    ...componentGroups.map(group => group.status),
-    ...pieceGroups.map(group => group.status)
+    ...pieceGroups.map(group => group.status),
+    ...productGroups.map(group => group.status),
  ]

  const overallStatus = statuses.includes('error')
@@ -1455,11 +2023,14 @@ const machinePreview = computed(() => {
    },
    componentGroups,
    pieceGroups,
+    productGroups,
    type: {
      name: type.name,
      category: type.category || null,
      hasStructuredDefinition:
-        (type.componentRequirements?.length || 0) > 0 || (type.pieceRequirements?.length || 0) > 0
+        (type.componentRequirements?.length || 0) > 0 ||
+        (type.pieceRequirements?.length || 0) > 0 ||
+        (type.productRequirements?.length || 0) > 0
    },
    status: overallStatus,
    ready: overallStatus === 'ready',
@@ -1508,6 +2079,7 @@ const handleIssueClick = (issue) => {
 const initializeRequirementSelections = (type) => {
  const componentRequirements = type.componentRequirements || []
  const pieceRequirements = type.pieceRequirements || []
+  const productRequirements = type.productRequirements || []

  componentRequirements.forEach((requirement) => {
    const min = requirement.minCount ?? (requirement.required ? 1 : 0)
@@ -1528,6 +2100,19 @@ const initializeRequirementSelections = (type) => {
      pieceRequirementSelections[requirement.id] = []
    }
  })
+
+  productRequirements.forEach((requirement) => {
+    const min = requirement.minCount ?? (requirement.required ? 1 : 0)
+    const initialCount = Math.max(min, requirement.required ? 1 : 0)
+    if (initialCount > 0) {
+      productRequirementSelections[requirement.id] = Array.from(
+        { length: initialCount },
+        () => createProductSelectionEntry(requirement),
+      )
+    } else {
+      productRequirementSelections[requirement.id] = []
+    }
+  })
 }

 const finalizeMachineCreation = async () => {
@@ -1553,10 +2138,14 @@ const finalizeMachineCreation = async () => {
      typeMachineId: type.id
    }

-    const hasRequirements = (type.componentRequirements?.length || 0) > 0 || (type.pieceRequirements?.length || 0) > 0
+    const hasRequirements =
+      (type.componentRequirements?.length || 0) > 0 ||
+      (type.pieceRequirements?.length || 0) > 0 ||
+      (type.productRequirements?.length || 0) > 0

    let componentLinks = []
    let pieceLinks = []
+    let productLinks = []

    if (hasRequirements) {
      const validationResult = validateRequirementSelections(type)
@@ -1566,6 +2155,7 @@ const finalizeMachineCreation = async () => {
      }
      componentLinks = validationResult.componentLinks
      pieceLinks = validationResult.pieceLinks
+      productLinks = validationResult.productLinks
    }

    const payload = {
@@ -1573,7 +2163,8 @@ const finalizeMachineCreation = async () => {
      ...(hasRequirements
        ? {
            componentLinks,
-            pieceLinks
+            pieceLinks,
+            productLinks
          }
        : {})
    }
@@ -1621,7 +2212,8 @@ onMounted(async () => {
    loadSites(),
    loadMachineTypes(),
    loadComposants(),
-    loadPieces()
+    loadPieces(),
+    loadProducts()
  ])
 })
 </script>
--- a/app/pages/pieces-catalog.vue
+++ b/app/pages/pieces-catalog.vue
@@ -93,6 +93,7 @@
                <th class="w-24">Aperçu</th>
                <th>Nom</th>
                <th>Référence</th>
+                <th>Type de pièce</th>
                <th>Actions</th>
              </tr>
            </thead>
@@ -106,6 +107,7 @@
                </td>
                <td>{{ piece.name || 'Pièce sans nom' }}</td>
                <td>{{ piece.reference || '—' }}</td>
+                <td>{{ resolvePieceType(piece) }}</td>
                <td>
                  <div class="flex items-center gap-2">
                    <NuxtLink
@@ -180,6 +182,17 @@ const resolvePreviewAlt = (piece: Record<string, any>) => {
  return 'Aperçu du document'
 }

+const resolvePieceType = (piece: Record<string, any>) => {
+  const type = piece?.typePiece
+  if (type?.name) {
+    return type.name
+  }
+  if (piece?.typePieceLabel) {
+    return piece.typePieceLabel
+  }
+  return '—'
+}
+
 const resolveDeleteGuard = (piece: Record<string, any>) => {
  const blockingReasons: string[] = []
  const machineLinks = Array.isArray(piece?.machineLinks)
--- a/app/pages/pieces/[id]/edit.vue
+++ b/app/pages/pieces/[id]/edit.vue
@@ -123,6 +123,36 @@
          </div>
        </div>

+        <div
+          v-if="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>
+          <ProductSelect
+            v-model="editionForm.productId"
+            :disabled="saving"
+            :type-product-id="primaryProductRequirement?.typeProductId || null"
+            helper-text="Un produit valide est requis pour cette pièce."
+          />
+        </div>
+
        <div v-if="selectedType" 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>
@@ -356,6 +386,7 @@ import { useRoute, useRouter } from '#imports'
 import ConstructeurSelect from '~/components/ConstructeurSelect.vue'
 import DocumentUpload from '~/components/DocumentUpload.vue'
 import DocumentPreviewModal from '~/components/DocumentPreviewModal.vue'
+import ProductSelect from '~/components/ProductSelect.vue'
 import { usePieceTypes } from '~/composables/usePieceTypes'
 import { usePieces } from '~/composables/usePieces'
 import { useCustomFields } from '~/composables/useCustomFields'
@@ -366,7 +397,7 @@ import { getFileIcon } from '~/utils/fileIcons'
 import { canPreviewDocument, isImageDocument, isPdfDocument } from '~/utils/documentPreview'
 import { formatPieceStructurePreview } from '~/shared/modelUtils'
 import { uniqueConstructeurIds } from '~/shared/constructeurUtils'
-import type { PieceModelStructure } from '~/shared/types/inventory'
+import type { PieceModelProduct, PieceModelStructure } from '~/shared/types/inventory'
 import type { ModelType } from '~/services/modelTypes'

 interface PieceCatalogType extends ModelType {
@@ -411,6 +442,7 @@ const editionForm = reactive({
  reference: '' as string,
  constructeurIds: [] as string[],
  prix: '' as string,
+  productId: null as string | null,
 })

 const customFieldInputs = ref<CustomFieldInput[]>([])
@@ -542,6 +574,42 @@ const selectedType = computed(() => {
  return pieceTypeList.value.find((type) => type.id === selectedTypeId.value) ?? null
 })

+const structureProducts = computed(() =>
+  getStructureProducts(selectedType.value?.structure ?? null),
+)
+
+const requiresProductSelection = computed(() => structureProducts.value.length > 0)
+
+const primaryProductRequirement = computed(() => structureProducts.value[0] ?? null)
+
+const describeProductRequirement = (requirement: PieceModelProduct, index: number) => {
+  if (!requirement) {
+    return `Produit ${index + 1}`
+  }
+  const parts: string[] = []
+  if (requirement.role) {
+    parts.push(requirement.role)
+  }
+  if (requirement.typeProductLabel) {
+    parts.push(requirement.typeProductLabel)
+  } else if (requirement.typeProductId) {
+    parts.push(`Catégorie #${requirement.typeProductId}`)
+  }
+  if (requirement.familyCode) {
+    parts.push(`Famille ${requirement.familyCode}`)
+  }
+  if (parts.length === 0) {
+    parts.push(`Produit ${index + 1}`)
+  }
+  return parts.join(' • ')
+}
+
+const productRequirementDescriptions = computed(() =>
+  structureProducts.value.map((requirement, index) =>
+    describeProductRequirement(requirement, index),
+  ),
+)
+
 const requiredCustomFieldsFilled = computed(() =>
  customFieldInputs.value.every((field) => {
    if (!field.required) {
@@ -554,12 +622,15 @@ const requiredCustomFieldsFilled = computed(() =>
  }),
 )

-const canSubmit = computed(() => Boolean(
-  piece.value &&
-  editionForm.name &&
-  requiredCustomFieldsFilled.value &&
-  !saving.value,
-))
+const canSubmit = computed(() =>
+  Boolean(
+    piece.value &&
+    editionForm.name &&
+    requiredCustomFieldsFilled.value &&
+    (!requiresProductSelection.value || editionForm.productId) &&
+    !saving.value,
+  ),
+)

 const toFieldString = (value: unknown): string => {
  if (value === null || value === undefined) {
@@ -610,6 +681,7 @@ watch(
      currentPiece.constructeur ? [currentPiece.constructeur] : [],
    )
    editionForm.prix = currentPiece.prix !== null && currentPiece.prix !== undefined ? String(currentPiece.prix) : ''
+    editionForm.productId = currentPiece.product?.id || currentPiece.productId || null

    customFieldInputs.value = buildCustomFieldInputs(
      currentType?.structure ?? null,
@@ -636,6 +708,11 @@ const submitEdition = async () => {
    return
  }

+  if (requiresProductSelection.value && !editionForm.productId) {
+    toast.showError('Sélectionnez un produit conforme au squelette.')
+    return
+  }
+
  const rawPrice = typeof editionForm.prix === 'string'
    ? editionForm.prix.trim()
    : editionForm.prix === null || editionForm.prix === undefined
@@ -650,6 +727,12 @@ const submitEdition = async () => {
  payload.reference = reference ? reference : null
  payload.constructeurIds = uniqueConstructeurIds(editionForm.constructeurIds)

+  const selectedProductId =
+    typeof editionForm.productId === 'string'
+      ? editionForm.productId.trim()
+      : ''
+  payload.productId = selectedProductId || null
+
  if (rawPrice) {
    const parsed = Number(rawPrice)
    if (!Number.isNaN(parsed)) {
@@ -841,7 +924,11 @@ const formatDefaultValue = (type: string, defaultValue: any): string => {
  return String(defaultValue)
 }

-const getStructureCustomFields = (structure: PieceModelStructure | null) => Array.isArray(structure?.customFields) ? structure.customFields : []
+const getStructureProducts = (structure: PieceModelStructure | null) =>
+  Array.isArray(structure?.products) ? structure.products : []
+
+const getStructureCustomFields = (structure: PieceModelStructure | null) =>
+  Array.isArray(structure?.customFields) ? structure.customFields : []

 const buildCustomFieldMetadata = (field: CustomFieldInput) => ({
  customFieldName: field.name,
--- a/app/pages/pieces/create.vue
+++ b/app/pages/pieces/create.vue
@@ -71,10 +71,10 @@
              <span class="label-text">Fournisseur</span>
            </label>
            <ConstructeurSelect
-              v-model="creationForm.constructeurId"
+              v-model="creationForm.constructeurIds"
              class="w-full"
              :disabled="submitting || !selectedType"
-              placeholder="Rechercher un fournisseur..."
+              placeholder="Rechercher un ou plusieurs fournisseurs..."
            />
          </div>
        </div>
@@ -96,6 +96,36 @@
          </div>
        </div>

+        <div
+          v-if="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">
+              Sélectionnez un produit catalogue compatible avec les exigences ci-dessous.
+            </p>
+          </header>
+          <ul class="space-y-2 text-sm text-base-content/80">
+            <li
+              v-for="(description, index) in productRequirementDescriptions"
+              :key="`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>
+          <ProductSelect
+            v-model="creationForm.productId"
+            :disabled="submitting || !selectedType"
+            :type-product-id="primaryProductRequirement?.typeProductId || null"
+            helper-text="Un produit est requis pour cette pièce."
+          />
+        </div>
+
        <div v-if="selectedType" 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>
@@ -253,6 +283,7 @@ 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 ProductSelect from '~/components/ProductSelect.vue'
 import SearchSelect from '~/components/common/SearchSelect.vue'
 import { usePieceTypes } from '~/composables/usePieceTypes'
 import { usePieces } from '~/composables/usePieces'
@@ -261,7 +292,7 @@ import { useCustomFields } from '~/composables/useCustomFields'
 import { useDocuments } from '~/composables/useDocuments'
 import { formatPieceStructurePreview } from '~/shared/modelUtils'
 import { uniqueConstructeurIds } from '~/shared/constructeurUtils'
-import type { PieceModelStructure } from '~/shared/types/inventory'
+import type { PieceModelProduct, PieceModelStructure } from '~/shared/types/inventory'
 import type { ModelType } from '~/services/modelTypes'

 interface PieceCatalogType extends ModelType {
@@ -286,6 +317,7 @@ const creationForm = reactive({
  reference: '' as string,
  constructeurIds: [] as string[],
  prix: '' as string,
+  productId: null as string | null,
 })

 const lastSuggestedName = ref('')
@@ -332,6 +364,42 @@ const selectedType = computed(() => {
  return pieceTypeList.value.find((type) => type.id === selectedTypeId.value) ?? null
 })

+const structureProducts = computed(() =>
+  getStructureProducts(selectedType.value?.structure ?? null),
+)
+
+const requiresProductSelection = computed(() => structureProducts.value.length > 0)
+
+const primaryProductRequirement = computed(() => structureProducts.value[0] ?? null)
+
+const describeProductRequirement = (requirement: PieceModelProduct, index: number) => {
+  if (!requirement) {
+    return `Produit ${index + 1}`
+  }
+  const parts: string[] = []
+  if (requirement.role) {
+    parts.push(requirement.role)
+  }
+  if (requirement.typeProductLabel) {
+    parts.push(requirement.typeProductLabel)
+  } else if (requirement.typeProductId) {
+    parts.push(`Catégorie #${requirement.typeProductId}`)
+  }
+  if (requirement.familyCode) {
+    parts.push(`Famille ${requirement.familyCode}`)
+  }
+  if (parts.length === 0) {
+    parts.push(`Produit ${index + 1}`)
+  }
+  return parts.join(' • ')
+}
+
+const productRequirementDescriptions = computed(() =>
+  structureProducts.value.map((requirement, index) =>
+    describeProductRequirement(requirement, index),
+  ),
+)
+
 watch(selectedType, (type) => {
  if (!type) {
    clearCreationForm()
@@ -343,6 +411,7 @@ watch(selectedType, (type) => {
  }
  lastSuggestedName.value = creationForm.name
  customFieldInputs.value = normalizeCustomFieldInputs(type.structure)
+  creationForm.productId = null
 })

 const requiredCustomFieldsFilled = computed(() =>
@@ -357,12 +426,15 @@ const requiredCustomFieldsFilled = computed(() =>
  }),
 )

-const canSubmit = computed(() => Boolean(
-  selectedType.value &&
-  creationForm.name &&
-  requiredCustomFieldsFilled.value &&
-  !submitting.value,
-))
+const canSubmit = computed(() =>
+  Boolean(
+    selectedType.value &&
+    creationForm.name &&
+    requiredCustomFieldsFilled.value &&
+    (!requiresProductSelection.value || creationForm.productId) &&
+    !submitting.value,
+  ),
+)

 const toFieldString = (value: unknown): string => {
  if (value === null || value === undefined) {
@@ -377,13 +449,18 @@ const toFieldString = (value: unknown): string => {
  return ''
 }

-const getStructureCustomFields = (structure: PieceModelStructure | null) => Array.isArray(structure?.customFields) ? structure.customFields : []
+const getStructureCustomFields = (structure: PieceModelStructure | null) =>
+  Array.isArray(structure?.customFields) ? structure.customFields : []
+
+const getStructureProducts = (structure: PieceModelStructure | null) =>
+  Array.isArray(structure?.products) ? structure.products : []

 const clearCreationForm = () => {
  creationForm.name = ''
  creationForm.reference = ''
  creationForm.constructeurIds = []
  creationForm.prix = ''
+  creationForm.productId = null
  lastSuggestedName.value = ''
 }

@@ -392,6 +469,12 @@ const submitCreation = async () => {
    toast.showError('Sélectionnez une catégorie de pièce.')
    return
  }
+
+  if (requiresProductSelection.value && !creationForm.productId) {
+    toast.showError('Sélectionnez un produit conforme au squelette.')
+    return
+  }
+
  const payload: Record<string, any> = {
    name: creationForm.name.trim(),
    typePieceId: selectedType.value.id,
@@ -406,6 +489,14 @@ const submitCreation = async () => {
    payload.constructeurIds = uniqueConstructeurIds(creationForm.constructeurIds)
  }

+  const selectedProductId =
+    typeof creationForm.productId === 'string'
+      ? creationForm.productId.trim()
+      : ''
+  if (selectedProductId) {
+    payload.productId = selectedProductId
+  }
+
  const rawPrice = typeof creationForm.prix === 'string'
    ? creationForm.prix.trim()
    : creationForm.prix === null || creationForm.prix === undefined
--- a/app/pages/product-catalog.vue
+++ b/app/pages/product-catalog.vue
@@ -0,0 +1,254 @@
+<template>
+  <main class="container mx-auto px-6 py-10 space-y-8">
+    <header class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+      <div>
+        <h1 class="text-3xl font-semibold text-base-content">Catalogue des produits</h1>
+        <p class="text-sm text-base-content/70">
+          Retrouvez l'ensemble des produits du catalogue, leurs informations fournisseurs et leurs catégories.
+        </p>
+      </div>
+      <div class="flex flex-wrap gap-2">
+        <NuxtLink to="/product/create" class="btn btn-primary btn-sm md:btn-md">
+          Ajouter un produit
+        </NuxtLink>
+        <NuxtLink to="/product-category" class="btn btn-outline btn-sm md:btn-md">
+          Gérer les catégories
+        </NuxtLink>
+      </div>
+    </header>
+
+    <section class="card border border-base-200 bg-base-100 shadow-sm">
+      <div class="card-body space-y-4">
+        <div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
+          <div class="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center">
+            <label class="w-full sm:w-72">
+              <span class="text-xs font-semibold uppercase tracking-wide text-base-content/70">Recherche</span>
+              <input
+                v-model="searchTerm"
+                type="text"
+                class="input input-bordered input-sm w-full mt-1"
+                placeholder="Nom ou référence…"
+              />
+            </label>
+            <div class="flex items-center gap-2">
+              <label class="text-xs font-semibold uppercase tracking-wide text-base-content/70" for="product-sort">Trier par</label>
+              <select
+                id="product-sort"
+                v-model="sortField"
+                class="select select-bordered select-sm"
+              >
+                <option value="name">Nom</option>
+                <option value="createdAt">Date de création</option>
+              </select>
+            </div>
+            <div class="flex items-center gap-2">
+              <label class="text-xs font-semibold uppercase tracking-wide text-base-content/70" for="product-dir">Ordre</label>
+              <select
+                id="product-dir"
+                v-model="sortDirection"
+                class="select select-bordered select-sm"
+              >
+                <option value="asc">Ascendant</option>
+                <option value="desc">Descendant</option>
+              </select>
+            </div>
+          </div>
+          <p class="text-xs text-base-content/60 lg:text-right">
+            {{ filteredCount }} / {{ totalCount }} résultat{{ filteredCount > 1 ? 's' : '' }}
+          </p>
+        </div>
+
+        <div v-if="loading" class="flex justify-center py-10">
+          <span class="loading loading-spinner" aria-hidden="true" />
+        </div>
+
+        <div
+          v-else-if="errorMessage"
+          class="alert alert-error"
+        >
+          <div class="flex flex-col gap-1">
+            <span class="font-semibold">Impossible de charger les produits</span>
+            <span class="text-sm">{{ errorMessage }}</span>
+          </div>
+          <button type="button" class="btn btn-ghost btn-sm ml-auto" @click="reload">
+            Réessayer
+          </button>
+        </div>
+
+        <p v-else-if="!hasLoaded" class="text-sm text-base-content/70">
+          Chargement du catalogue…
+        </p>
+
+        <p v-else-if="!normalizedProducts.length" class="text-sm text-base-content/70">
+          Aucun produit n'a encore été enregistré.
+        </p>
+
+        <p v-else-if="filteredProducts.length === 0" class="text-sm text-base-content/70">
+          Aucun produit ne correspond à votre recherche.
+        </p>
+
+        <div v-else class="overflow-x-auto">
+          <table class="table table-sm md:table-md">
+            <thead>
+              <tr>
+                <th>Nom</th>
+                <th>Référence</th>
+                <th>Type de produit</th>
+                <th>Fournisseurs</th>
+                <th class="text-right">Prix indicatif</th>
+                <th class="w-32 text-right">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="product in filteredProducts" :key="product.id">
+                <td class="font-medium">{{ product.name }}</td>
+                <td>{{ product.reference || '—' }}</td>
+                <td>{{ product.typeProduct?.name || '—' }}</td>
+                <td>
+                  <span v-if="product.constructeurs?.length" class="text-sm">
+                    {{ formatConstructeurs(product.constructeurs) }}
+                  </span>
+                  <span v-else class="text-sm text-base-content/50">—</span>
+                </td>
+                <td class="text-right">
+                  {{ formatPrice(product.supplierPrice) }}
+                </td>
+                <td class="text-right space-x-2">
+                  <NuxtLink
+                    :to="`/product/${product.id}/edit`"
+                    class="btn btn-ghost btn-xs"
+                  >
+                    Modifier
+                  </NuxtLink>
+                  <button
+                    type="button"
+                    class="btn btn-ghost btn-xs text-error"
+                    @click="confirmDelete(product)"
+                  >
+                    Supprimer
+                  </button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </section>
+  </main>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { useHead } from '#imports'
+import { useProducts } from '~/composables/useProducts'
+import { useToast } from '~/composables/useToast'
+
+useHead(() => ({
+  title: 'Catalogue des produits',
+}))
+
+const {
+  products,
+  total,
+  loading,
+  loaded,
+  error,
+  loadProducts,
+  deleteProduct,
+} = useProducts()
+const toast = useToast()
+
+const searchTerm = ref('')
+const sortField = ref<'name' | 'createdAt'>('name')
+const sortDirection = ref<'asc' | 'desc'>('asc')
+
+const normalizedProducts = computed(() => (Array.isArray(products.value) ? products.value : []))
+const hasLoaded = computed(() => loaded.value)
+const errorMessage = computed(() => (typeof error.value === 'string' && error.value.length ? error.value : null))
+
+const filteredProducts = computed(() => {
+  const term = searchTerm.value.trim().toLowerCase()
+  const items = normalizedProducts.value.slice()
+
+  const filtered = term
+    ? items.filter((product) => {
+        const name = (product?.name || '').toLowerCase()
+        const reference = (product?.reference || '').toLowerCase()
+        const typeName = (product?.typeProduct?.name || '').toLowerCase()
+        return (
+          name.includes(term) ||
+          reference.includes(term) ||
+          typeName.includes(term)
+        )
+      })
+    : items
+
+  const direction = sortDirection.value === 'asc' ? 1 : -1
+
+  return filtered.sort((a, b) => {
+    if (sortField.value === 'name') {
+      return (
+        (a?.name || '').localeCompare(b?.name || '', 'fr', { sensitivity: 'base' })
+      ) * direction
+    }
+
+    const dateA = a?.createdAt ? new Date(a.createdAt).getTime() : 0
+    const dateB = b?.createdAt ? new Date(b.createdAt).getTime() : 0
+    return (dateA - dateB) * direction
+  })
+})
+
+const filteredCount = computed(() => filteredProducts.value.length)
+const totalCount = computed(() => {
+  const reported = Number(total.value)
+  if (!Number.isFinite(reported) || reported < 0) {
+    return normalizedProducts.value.length
+  }
+  return reported
+})
+
+const priceFormatter = new Intl.NumberFormat('fr-FR', {
+  style: 'currency',
+  currency: 'EUR',
+  currencyDisplay: 'narrowSymbol',
+})
+
+const formatPrice = (value: any) => {
+  if (value === null || value === undefined || value === '') {
+    return '—'
+  }
+  const number = Number(value)
+  if (Number.isNaN(number)) {
+    return '—'
+  }
+  return priceFormatter.format(number)
+}
+
+const formatConstructeurs = (constructeurs: Array<Record<string, any>>) =>
+  constructeurs
+    .map((constructeur) => constructeur?.name)
+    .filter((name): name is string => Boolean(name))
+    .join(', ')
+
+const reload = async () => {
+  await loadProducts({ force: true })
+}
+
+const confirmDelete = async (product: Record<string, any>) => {
+  const confirmed = window.confirm(
+    `Voulez-vous vraiment supprimer le produit "${product.name}" ?\n\nCette action est irréversible.`,
+  )
+  if (!confirmed) {
+    return
+  }
+
+  const result = await deleteProduct(product.id)
+  if (result.success) {
+    toast.showSuccess(`Produit "${product.name}" supprimé`)
+  }
+}
+
+onMounted(async () => {
+  await loadProducts()
+})
+</script>
--- a/app/pages/product-category/[id]/edit.vue
+++ b/app/pages/product-category/[id]/edit.vue
@@ -0,0 +1,122 @@
+<template>
+  <main class="mx-auto flex w-full max-w-4xl flex-col gap-8 px-4 py-8 sm:px-6 lg:px-8">
+    <header class="space-y-2">
+      <div class="flex items-center justify-between gap-4">
+        <div>
+          <h1 class="text-3xl font-bold text-base-content">{{ title }}</h1>
+          <p class="text-base text-base-content/70">
+            Mettez à jour la structure et les champs personnalisés de cette catégorie de produit pour préparer les futures créations.
+          </p>
+        </div>
+        <NuxtLink class="btn btn-ghost" to="/product-category">
+          Retour au catalogue
+        </NuxtLink>
+      </div>
+    </header>
+
+    <section class="rounded-xl border border-base-300 bg-base-100 p-6 shadow-sm">
+      <div v-if="loading" class="flex items-center justify-center py-16">
+        <span class="loading loading-spinner loading-lg" aria-hidden="true"></span>
+        <span class="ml-3 text-sm text-base-content/70">Chargement de la catégorie…</span>
+      </div>
+      <ModelTypeForm
+        v-else
+        mode="edit"
+        initial-category="PRODUCT"
+        :initial-data="initialData"
+        :lock-category="true"
+        :saving="saving"
+        @submit="handleSubmit"
+        @cancel="handleCancel"
+      />
+    </section>
+  </main>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { useHead, useRoute, useRouter } from '#imports'
+import ModelTypeForm from '~/components/model-types/ModelTypeForm.vue'
+import { getModelType, updateModelType, type ModelTypePayload } from '~/services/modelTypes'
+import { useToast } from '~/composables/useToast'
+
+const route = useRoute()
+const router = useRouter()
+const { showError, showSuccess } = useToast()
+
+const loading = ref(true)
+const saving = ref(false)
+const initialData = ref<Partial<ModelTypePayload> | null>(null)
+
+const title = computed(() =>
+  initialData.value?.name ? `Modifier « ${initialData.value.name} »` : 'Modifier une catégorie de produit',
+)
+
+useHead(() => ({
+  title: title.value,
+}))
+
+const navigateBackToList = async () => {
+  await router.push('/product-category').catch(() => {
+    showError("Navigation impossible vers la liste des catégories.")
+  })
+}
+
+const normalizeError = (error: any) => {
+  const message = error?.data?.message || error?.message || 'Une erreur est survenue.'
+  return Array.isArray(message) ? message[0] : message
+}
+
+const loadCategory = async () => {
+  loading.value = true
+  try {
+    const id = String(route.params.id)
+    const response = await getModelType(id)
+
+    if (response.category !== 'PRODUCT') {
+      showError("Cette catégorie n'est pas un produit.")
+      await navigateBackToList()
+      return
+    }
+
+    initialData.value = {
+      name: response.name,
+      code: response.code,
+      category: response.category,
+      notes: response.notes ?? response.description ?? '',
+      structure: response.structure ?? undefined,
+    }
+  } catch (error) {
+    showError(normalizeError(error))
+    await navigateBackToList()
+  } finally {
+    loading.value = false
+  }
+}
+
+const handleCancel = () => {
+  navigateBackToList()
+}
+
+const handleSubmit = async (payload: Parameters<typeof updateModelType>[1]) => {
+  const id = String(route.params.id)
+  saving.value = true
+  try {
+    const enrichedPayload = {
+      ...payload,
+      description: payload?.notes ?? null,
+    }
+    await updateModelType(id, enrichedPayload)
+    showSuccess('Catégorie de produit mise à jour avec succès.')
+    await navigateBackToList()
+  } catch (error) {
+    showError(normalizeError(error))
+  } finally {
+    saving.value = false
+  }
+}
+
+onMounted(() => {
+  loadCategory()
+})
+</script>
--- a/app/pages/product-category/index.vue
+++ b/app/pages/product-category/index.vue
@@ -0,0 +1,11 @@
+<template>
+  <ManagementView
+    category="PRODUCT"
+    heading="Catégories de produit"
+    description="Gérez les catégories de produits et leurs champs personnalisés communs."
+  />
+</template>
+
+<script setup lang="ts">
+import ManagementView from '~/components/model-types/ManagementView.vue'
+</script>
--- a/app/pages/product-category/new.vue
+++ b/app/pages/product-category/new.vue
@@ -0,0 +1,68 @@
+<template>
+  <main class="mx-auto flex w-full max-w-4xl flex-col gap-8 px-4 py-8 sm:px-6 lg:px-8">
+    <header class="space-y-2">
+      <div class="flex items-center justify-between gap-4">
+        <div>
+          <h1 class="text-3xl font-bold text-base-content">Nouvelle catégorie de produit</h1>
+          <p class="text-base text-base-content/70">
+            Définissez les champs personnalisés et le squelette appliqué lors de la création des produits de cette catégorie.
+          </p>
+        </div>
+        <NuxtLink class="btn btn-ghost" to="/product-category">
+          Retour au catalogue
+        </NuxtLink>
+      </div>
+    </header>
+
+    <section class="rounded-xl border border-base-300 bg-base-100 p-6 shadow-sm">
+      <ModelTypeForm
+        mode="create"
+        initial-category="PRODUCT"
+        :lock-category="true"
+        :saving="saving"
+        @submit="handleSubmit"
+        @cancel="handleCancel"
+      />
+    </section>
+  </main>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useHead, useRouter } from '#imports'
+import ModelTypeForm from '~/components/model-types/ModelTypeForm.vue'
+import { createModelType } from '~/services/modelTypes'
+import { useToast } from '~/composables/useToast'
+
+useHead(() => ({
+  title: 'Nouvelle catégorie de produit',
+}))
+
+const router = useRouter()
+const { showError, showSuccess } = useToast()
+const saving = ref(false)
+
+const handleCancel = () => {
+  router.push('/product-category').catch(() => {
+    showError("Navigation impossible vers la liste des catégories.")
+  })
+}
+
+const handleSubmit = async (payload: Parameters<typeof createModelType>[0]) => {
+  saving.value = true
+  try {
+    const enrichedPayload = {
+      ...payload,
+      description: payload.notes ?? null,
+    }
+    await createModelType(enrichedPayload)
+    showSuccess('Catégorie de produit créée avec succès.')
+    await router.push('/product-category')
+  } catch (error: any) {
+    const message = error?.data?.message || error?.message || 'Une erreur est survenue lors de la création.'
+    showError(Array.isArray(message) ? message[0] : message)
+  } finally {
+    saving.value = false
+  }
+}
+</script>
--- a/app/pages/product/[id]/edit.vue
+++ b/app/pages/product/[id]/edit.vue
@@ -0,0 +1,747 @@
+<template>
+  <DocumentPreviewModal
+    :document="previewDocument"
+    :visible="previewVisible"
+    @close="closePreview"
+  />
+  <main class="container mx-auto px-6 py-10">
+    <div v-if="loading" class="flex flex-col items-center gap-4 py-16 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>
+      <NuxtLink to="/product-catalog" class="btn btn-primary mt-6">
+        Retour au catalogue
+      </NuxtLink>
+    </div>
+
+    <section v-else class="card border border-base-200 bg-base-100 shadow-sm max-w-4xl mx-auto">
+      <div class="card-body space-y-6">
+        <header class="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
+          <div>
+            <h1 class="text-3xl font-semibold text-base-content">Modifier le produit</h1>
+            <p class="text-sm text-base-content/70">
+              Mettez à jour les informations du produit et ses champs personnalisés.
+            </p>
+          </div>
+          <NuxtLink to="/product-catalog" class="btn btn-ghost btn-sm md:btn-md self-start">
+            Retour au catalogue
+          </NuxtLink>
+        </header>
+
+        <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>
+            <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>
+          </div>
+        </div>
+
+        <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-model="editionForm.name"
+              type="text"
+              class="input input-bordered input-sm md:input-md"
+              :disabled="saving"
+              required
+            >
+          </div>
+        </div>
+
+        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+          <div class="form-control">
+            <label class="label">
+              <span class="label-text">Référence</span>
+            </label>
+            <input
+              v-model="editionForm.reference"
+              type="text"
+              class="input input-bordered input-sm md:input-md"
+              :disabled="saving"
+            >
+          </div>
+
+          <div class="form-control">
+            <label class="label">
+              <span class="label-text">Fournisseurs</span>
+            </label>
+            <ConstructeurSelect
+              v-model="editionForm.constructeurIds"
+              class="w-full"
+              :disabled="saving"
+              placeholder="Rechercher un ou plusieurs fournisseurs..."
+            />
+          </div>
+        </div>
+
+        <div 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-model="editionForm.supplierPrice"
+              type="number"
+              step="0.01"
+              min="0"
+              class="input input-bordered input-sm md:input-md"
+              :disabled="saving"
+            >
+          </div>
+        </div>
+
+        <div v-if="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>
+
+        <div v-if="customFieldInputs.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 class="text-xs text-base-content/70">
+              Mettez à jour les valeurs propres à ce produit.
+            </p>
+          </header>
+          <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+            <div
+              v-for="(field, index) in customFieldInputs"
+              :key="fieldKey(field, index)"
+              class="form-control"
+            >
+              <label class="label">
+                <span class="label-text">{{ field.name }}</span>
+                <span v-if="field.required" class="label-text-alt text-error">*</span>
+              </label>
+              <input
+                v-if="field.type === 'text'"
+                v-model="field.value"
+                type="text"
+                class="input input-bordered input-sm md:input-md"
+                :required="field.required"
+                :disabled="saving"
+              >
+              <input
+                v-else-if="field.type === 'number'"
+                v-model="field.value"
+                type="number"
+                step="0.01"
+                class="input input-bordered input-sm md:input-md"
+                :required="field.required"
+                :disabled="saving"
+              >
+              <select
+                v-else-if="field.type === 'select'"
+                v-model="field.value"
+                class="select select-bordered select-sm md:select-md"
+                :required="field.required"
+                :disabled="saving"
+              >
+                <option value="">Sélectionner...</option>
+                <option
+                  v-for="option in field.options"
+                  :key="option"
+                  :value="option"
+                >
+                  {{ option }}
+                </option>
+              </select>
+              <div v-else-if="field.type === 'boolean'" class="flex items-center gap-2">
+                <input
+                  v-model="field.value"
+                  type="checkbox"
+                  class="checkbox checkbox-sm"
+                  true-value="true"
+                  false-value="false"
+                  :disabled="saving"
+                >
+                <span class="text-sm">{{ field.value === 'true' ? 'Oui' : 'Non' }}</span>
+              </div>
+              <input
+                v-else-if="field.type === 'date'"
+                v-model="field.value"
+                type="date"
+                class="input input-bordered input-sm md:input-md"
+                :required="field.required"
+                :disabled="saving"
+              >
+              <input
+                v-else
+                v-model="field.value"
+                type="text"
+                class="input input-bordered input-sm md:input-md"
+                :required="field.required"
+                :disabled="saving"
+              >
+            </div>
+          </div>
+        </div>
+
+        <div 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">
+                Gérez les documents associés à ce produit.
+              </p>
+            </div>
+            <span v-if="selectedFiles.length" class="badge badge-outline">
+              {{ selectedFiles.length }} document{{ selectedFiles.length > 1 ? 's' : '' }} sélectionné{{ selectedFiles.length > 1 ? 's' : '' }}
+            </span>
+          </header>
+          <div :class="{ 'pointer-events-none opacity-60': 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…
+          </p>
+          <div v-else-if="productDocuments.length" class="space-y-2">
+            <div
+              v-for="document in productDocuments"
+              :key="document.id || document.path || document.name"
+              class="flex items-center justify-between rounded border border-base-200 bg-base-100 px-3 py-2"
+            >
+              <div class="flex items-center gap-3 text-sm">
+                <div
+                  class="flex-shrink-0 overflow-hidden rounded-md border border-base-200 bg-base-200/70 flex items-center justify-center"
+                  :class="documentThumbnailClass(document)"
+                >
+                  <img
+                    v-if="isImageDocument(document) && document.path"
+                    :src="document.path"
+                    class="h-full w-full object-cover"
+                    :alt="`Aperçu de ${document.name}`"
+                  >
+                  <iframe
+                    v-else-if="shouldInlinePdf(document)"
+                    :src="documentPreviewSrc(document)"
+                    class="h-full w-full border-0 bg-white"
+                    title="Aperçu PDF"
+                  />
+                  <component
+                    v-else
+                    :is="documentIcon(document).component"
+                    class="h-6 w-6"
+                    :class="documentIcon(document).colorClass"
+                    aria-hidden="true"
+                  />
+                </div>
+                <div>
+                  <div class="font-medium">
+                    {{ document.name }}
+                  </div>
+                  <div class="text-xs text-base-content/70">
+                    {{ document.mimeType || 'Inconnu' }} • {{ formatSize(document.size) }}
+                  </div>
+                </div>
+              </div>
+              <div class="flex items-center gap-2">
+                <button
+                  type="button"
+                  class="btn btn-ghost btn-xs"
+                  :disabled="!canPreviewDocument(document)"
+                  :title="canPreviewDocument(document) ? 'Consulter le document' : 'Aucun aperçu disponible pour ce type'"
+                  @click="openPreview(document)"
+                >
+                  Consulter
+                </button>
+                <button type="button" class="btn btn-ghost btn-xs" @click="downloadDocument(document)">
+                  Télécharger
+                </button>
+                <button
+                  type="button"
+                  class="btn btn-error btn-xs"
+                  :disabled="uploadingDocuments || saving"
+                  @click="removeDocument(document.id)"
+                >
+                  Supprimer
+                </button>
+              </div>
+            </div>
+          </div>
+          <p v-else class="text-xs text-base-content/70">
+            Aucun document n'est associé à ce produit pour le moment.
+          </p>
+        </div>
+
+        <div class="flex flex-col gap-3 md:flex-row md:justify-end">
+          <NuxtLink to="/product-catalog" class="btn btn-ghost" :class="{ 'btn-disabled': saving }">
+            Annuler
+          </NuxtLink>
+          <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="product && !requiredCustomFieldsFilled" class="text-xs text-error text-right">
+          Merci de renseigner tous les champs personnalisés obligatoires.
+        </p>
+      </div>
+    </section>
+  </main>
+</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 { useDocuments } from '~/composables/useDocuments'
+import { formatProductStructurePreview, normalizeProductStructureForSave } from '~/shared/modelUtils'
+import { uniqueConstructeurIds } from '~/shared/constructeurUtils'
+import { getModelType } from '~/services/modelTypes'
+import type { ProductModelStructure } from '~/shared/types/inventory'
+import { getFileIcon } from '~/utils/fileIcons'
+import { canPreviewDocument, isImageDocument, isPdfDocument } from '~/utils/documentPreview'
+
+interface CustomFieldInput {
+  id: string | null
+  name: string
+  type: string
+  required: boolean
+  options: string[]
+  value: string
+  customFieldId: string | null
+  customFieldValueId: string | null
+  orderIndex: number
+}
+
+const route = useRoute()
+const router = useRouter()
+const toast = useToast()
+const { getProduct, updateProduct } = useProducts()
+const { upsertCustomFieldValue, updateCustomFieldValue } = useCustomFields()
+const {
+  loadDocumentsByProduct,
+  uploadDocuments: uploadProductDocuments,
+  deleteDocument: deleteProductDocument,
+} = useDocuments()
+
+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 editionForm = reactive({
+  name: '' as string,
+  reference: '' as string,
+  constructeurIds: [] as string[],
+  supplierPrice: '' as string,
+})
+
+const requiredCustomFieldsFilled = computed(() =>
+  customFieldInputs.value.every((field) => {
+    if (!field.required) {
+      return true
+    }
+    if (field.type === 'boolean') {
+      return field.value === 'true' || field.value === 'false'
+    }
+    return field.value.trim().length > 0
+  }),
+)
+
+const canSubmit = computed(() =>
+  Boolean(product.value && editionForm.name.trim().length >= 2 && requiredCustomFieldsFilled.value && !saving.value),
+)
+
+const structurePreview = computed(() => formatProductStructurePreview(structure.value))
+
+const documentIcon = (doc: any) =>
+  getFileIcon({ name: doc?.filename || doc?.name, mime: doc?.mimeType })
+
+const formatSize = (size: number | null | undefined) => {
+  if (size === null || size === undefined) {
+    return '—'
+  }
+  if (size === 0) {
+    return '0 B'
+  }
+  const units = ['B', 'KB', 'MB', 'GB']
+  const index = Math.min(units.length - 1, Math.floor(Math.log(size) / Math.log(1024)))
+  const formatted = size / Math.pow(1024, index)
+  return `${formatted.toFixed(1)} ${units[index]}`
+}
+
+const PDF_PREVIEW_MAX_BYTES = 5 * 1024 * 1024
+
+const shouldInlinePdf = (document: any) => {
+  if (!document || !isPdfDocument(document) || !document.path) {
+    return false
+  }
+  if (typeof document.size === 'number' && document.size > PDF_PREVIEW_MAX_BYTES) {
+    return false
+  }
+  return true
+}
+
+const appendPdfViewerParams = (src: string) => {
+  if (!src || src.startsWith('data:')) {
+    return src || ''
+  }
+  if (src.includes('#')) {
+    return `${src}&toolbar=0&navpanes=0`
+  }
+  return `${src}#toolbar=0&navpanes=0`
+}
+
+const documentPreviewSrc = (document: any) => {
+  if (!document?.path) {
+    return ''
+  }
+  if (isPdfDocument(document)) {
+    return appendPdfViewerParams(document.path)
+  }
+  return document.path
+}
+
+const documentThumbnailClass = (document: any) => {
+  if (shouldInlinePdf(document) || (isImageDocument(document) && document?.path)) {
+    return 'h-24 w-20'
+  }
+  return 'h-16 w-16'
+}
+
+const openPreview = (doc: any) => {
+  if (!doc || !canPreviewDocument(doc)) {
+    return
+  }
+  previewDocument.value = doc
+  previewVisible.value = true
+}
+
+const closePreview = () => {
+  previewVisible.value = false
+  previewDocument.value = null
+}
+
+const downloadDocument = (doc: any) => {
+  if (!doc?.path) {
+    return
+  }
+  const target = String(doc.path)
+  if (target.startsWith('data:')) {
+    const link = document.createElement('a')
+    link.href = target
+    link.download = doc.filename || doc.name || 'document'
+    link.click()
+    return
+  }
+  window.open(target, '_blank')
+}
+
+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) {
+    product.value = result.data
+    productDocuments.value = Array.isArray(result.data?.documents) ? result.data.documents : []
+    await loadProductType()
+    hydrateForm()
+    await refreshDocuments()
+  } 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 () => {
+  if (!product.value?.typeProductId) {
+    productType.value = product.value?.typeProduct ?? null
+    structure.value = normalizeProductStructureForSave(productType.value?.structure ?? null)
+    return
+  }
+  try {
+    const type = await getModelType(product.value.typeProductId)
+    productType.value = type
+    structure.value = normalizeProductStructureForSave(type?.structure ?? type?.productSkeleton ?? null)
+  } catch (error) {
+    console.error('Erreur lors du chargement du type de produit:', error)
+    productType.value = product.value?.typeProduct ?? null
+    structure.value = normalizeProductStructureForSave(productType.value?.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)
+    : ''
+  customFieldInputs.value = buildCustomFieldInputs(structure.value, product.value.customFieldValues)
+}
+
+watch(
+  () => product.value?.documents,
+  (docs) => {
+    if (Array.isArray(docs)) {
+      productDocuments.value = docs
+    }
+  },
+  { immediate: true },
+)
+
+const fieldKey = (field: CustomFieldInput, index: number) =>
+  field.customFieldValueId || field.customFieldId || `${field.name}-${index}`
+
+const buildCustomFieldInputs = (
+  productStructure: ProductModelStructure | null,
+  values: any[] | null | undefined,
+): CustomFieldInput[] => {
+  if (!productStructure || typeof productStructure !== 'object') {
+    return []
+  }
+  const definitions = Array.isArray(productStructure.customFields) ? productStructure.customFields : []
+  const valueList = Array.isArray(values) ? values : []
+
+  const byId = new Map<string, any>()
+  const byName = new Map<string, any>()
+
+  valueList.forEach((entry) => {
+    if (!entry || typeof entry !== 'object') {
+      return
+    }
+    const fieldId = entry.customField?.id || entry.customFieldId || null
+    if (fieldId) {
+      byId.set(fieldId, entry)
+    }
+    const fieldName = entry.customField?.name || entry.name || entry.key || null
+    if (fieldName) {
+      byName.set(fieldName, entry)
+    }
+  })
+
+  return definitions
+    .map((definition, index) => {
+      const definitionId = definition.customFieldId || definition.id || null
+      const matched = (definitionId ? byId.get(definitionId) : null) || byName.get(definition.name)
+      const type = typeof definition.type === 'string' ? definition.type : 'text'
+      const options = Array.isArray(definition.options) ? definition.options : []
+      const required = !!definition.required
+      const orderIndex = typeof definition.orderIndex === 'number' ? definition.orderIndex : index
+
+      if (!matched) {
+        return {
+          id: definition.id ?? null,
+          name: definition.name,
+          type,
+          required,
+          options,
+          value: '',
+          customFieldId: definition.customFieldId || definition.id || null,
+          customFieldValueId: null,
+          orderIndex,
+        }
+      }
+
+      const resolvedValue = matched.value ?? ''
+      return {
+        id: definition.id ?? null,
+        name: definition.name,
+        type,
+        required,
+        options,
+        value: formatDefaultValue(type, resolvedValue),
+        customFieldId: matched.customField?.id || definition.customFieldId || definition.id || null,
+        customFieldValueId: matched.id ?? null,
+        orderIndex,
+      }
+    })
+    .filter((field): field is CustomFieldInput => !!field?.name)
+    .sort((a, b) => a.orderIndex - b.orderIndex)
+}
+
+const formatDefaultValue = (type: string, value: any): string => {
+  if (value === null || value === undefined) {
+    return ''
+  }
+  if (type === 'boolean') {
+    return String(value === true || String(value).toLowerCase() === 'true')
+  }
+  return String(value)
+}
+
+const submitEdition = async () => {
+  if (!product.value) {
+    return
+  }
+
+  const payload: Record<string, any> = {
+    name: editionForm.name.trim(),
+    reference: editionForm.reference.trim() || null,
+    constructeurIds: uniqueConstructeurIds(editionForm.constructeurIds),
+  }
+
+  const rawPrice = editionForm.supplierPrice.trim()
+  payload.supplierPrice = rawPrice
+    ? Number.isNaN(Number(rawPrice))
+      ? null
+      : 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(result.data.id)
+      if (failedFields.length) {
+        toast.showError(`Impossible d'enregistrer ${failedFields.length} champ(s): ${failedFields.join(', ')}`)
+        return
+      }
+      toast.showSuccess('Produit mis à jour avec succès')
+      await router.push('/product-catalog')
+    }
+  } catch (error: any) {
+    toast.showError(error?.message || 'Erreur lors de la mise à jour du produit')
+  } finally {
+    saving.value = false
+  }
+}
+
+const saveCustomFieldValues = async (productId: string) => {
+  const failed: string[] = []
+  for (const field of customFieldInputs.value) {
+    const value = field.value ?? ''
+    if (field.customFieldValueId) {
+      const result = await updateCustomFieldValue(field.customFieldValueId, { value })
+      if (!result.success) {
+        failed.push(field.name)
+      }
+      continue
+    }
+
+    if (!field.customFieldId) {
+      continue
+    }
+
+    const result = await upsertCustomFieldValue(
+      field.customFieldId,
+      'product',
+      productId,
+      String(value ?? ''),
+      { customFieldName: field.name, customFieldType: field.type, customFieldRequired: field.required },
+    )
+
+    if (!result.success) {
+      failed.push(field.name)
+    }
+  }
+  return failed
+}
+
+onMounted(async () => {
+  await loadProduct()
+})
+</script>
--- a/app/pages/product/create.vue
+++ b/app/pages/product/create.vue
@@ -0,0 +1,518 @@
+<template>
+  <main class="mx-auto flex w-full max-w-4xl flex-col gap-8 px-4 py-8 sm:px-6 lg:px-8">
+    <header class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+      <div class="space-y-1">
+        <h1 class="text-3xl font-semibold text-base-content">Nouveau produit</h1>
+        <p class="text-sm text-base-content/70">
+          Sélectionnez la catégorie cible puis renseignez toutes les informations de votre produit catalogue.
+        </p>
+      </div>
+      <NuxtLink to="/product-catalog" class="btn btn-ghost btn-sm md:btn-md self-start">
+        Retour au catalogue
+      </NuxtLink>
+    </header>
+
+    <section class="card border border-base-200 bg-base-100 shadow-sm">
+      <div class="card-body space-y-6">
+        <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>
+            <SearchSelect
+              v-model="selectedTypeId"
+              :options="productTypeList"
+              :loading="loadingTypes"
+              size="sm"
+              placeholder="Rechercher une catégorie..."
+              empty-text="Aucune catégorie disponible"
+              :option-label="typeOptionLabel"
+              :option-description="typeOptionDescription"
+              :disabled="loadingTypes || submitting"
+            />
+            <p v-if="loadingTypes" class="text-xs text-base-content/60 mt-1">
+              Chargement des catégories…
+            </p>
+          </div>
+        </div>
+
+        <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-model="creationForm.name"
+              type="text"
+              class="input input-bordered input-sm md:input-md"
+              :disabled="submitting || !selectedType"
+              placeholder="Nom affiché dans le catalogue"
+              required
+            >
+          </div>
+        </div>
+
+        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+          <div class="form-control">
+            <label class="label">
+              <span class="label-text">Référence</span>
+            </label>
+            <input
+              v-model="creationForm.reference"
+              type="text"
+              class="input input-bordered input-sm md:input-md"
+              :disabled="submitting || !selectedType"
+              placeholder="Référence interne ou fournisseur"
+            >
+          </div>
+
+          <div class="form-control">
+            <label class="label">
+              <span class="label-text">Fournisseurs</span>
+            </label>
+            <ConstructeurSelect
+              v-model="creationForm.constructeurIds"
+              class="w-full"
+              :disabled="submitting || !selectedType"
+              placeholder="Rechercher un ou plusieurs fournisseurs..."
+            />
+          </div>
+        </div>
+
+        <div 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-model="creationForm.supplierPrice"
+              type="number"
+              step="0.01"
+              min="0"
+              class="input input-bordered input-sm md:input-md"
+              :disabled="submitting || !selectedType"
+              placeholder="Valeur indicatrice"
+            >
+          </div>
+        </div>
+
+        <div v-if="selectedType" 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">Squelette sélectionné</h2>
+              <p class="text-xs text-base-content/70">
+                {{ selectedType.description || 'Ce squelette définit les champs personnalisés applicables aux produits de cette catégorie.' }}
+              </p>
+            </div>
+            <span class="badge badge-outline">{{ formatProductStructurePreview(selectedType.structure) }}</span>
+          </div>
+
+          <p v-if="!customFieldInputs.length" class="text-xs text-base-content/70">
+            Cette catégorie ne définit pas encore de champs personnalisés.
+          </p>
+        </div>
+
+        <div v-if="customFieldInputs.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 class="text-xs text-base-content/70">
+              Renseignez les valeurs propres à ce produit catalogue.
+            </p>
+          </header>
+          <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+            <div
+              v-for="(field, index) in customFieldInputs"
+              :key="fieldKey(field, index)"
+              class="form-control"
+            >
+              <label class="label">
+                <span class="label-text">{{ field.name }}</span>
+                <span v-if="field.required" class="label-text-alt text-error">*</span>
+              </label>
+              <input
+                v-if="field.type === 'text'"
+                v-model="field.value"
+                type="text"
+                class="input input-bordered input-sm md:input-md"
+                :required="field.required"
+                :disabled="submitting"
+              >
+              <input
+                v-else-if="field.type === 'number'"
+                v-model="field.value"
+                type="number"
+                step="0.01"
+                class="input input-bordered input-sm md:input-md"
+                :required="field.required"
+                :disabled="submitting"
+              >
+              <select
+                v-else-if="field.type === 'select'"
+                v-model="field.value"
+                class="select select-bordered select-sm md:select-md"
+                :required="field.required"
+                :disabled="submitting"
+              >
+                <option value="">Sélectionner...</option>
+                <option
+                  v-for="option in field.options"
+                  :key="option"
+                  :value="option"
+                >
+                  {{ option }}
+                </option>
+              </select>
+              <div v-else-if="field.type === 'boolean'" class="flex items-center gap-2">
+                <input
+                  v-model="field.value"
+                  type="checkbox"
+                  class="checkbox checkbox-sm"
+                  true-value="true"
+                  false-value="false"
+                  :disabled="submitting"
+                >
+                <span class="text-sm">{{ field.value === 'true' ? 'Oui' : 'Non' }}</span>
+              </div>
+              <input
+                v-else-if="field.type === 'date'"
+                v-model="field.value"
+                type="date"
+                class="input input-bordered input-sm md:input-md"
+                :required="field.required"
+                :disabled="submitting"
+              >
+              <input
+                v-else
+                v-model="field.value"
+                type="text"
+                class="input input-bordered input-sm md:input-md"
+                :required="field.required"
+                :disabled="submitting"
+              >
+            </div>
+          </div>
+        </div>
+
+        <div 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">
+                Ajoutez des documents pour ce produit (fiches techniques, notices, etc.).
+              </p>
+            </div>
+            <span v-if="selectedDocuments.length" class="badge badge-outline">
+              {{ selectedDocuments.length }} document{{ selectedDocuments.length > 1 ? 's' : '' }} sélectionné{{ selectedDocuments.length > 1 ? 's' : '' }}
+            </span>
+          </header>
+          <div :class="{ 'pointer-events-none opacity-60': submitting || uploadingDocuments }">
+            <DocumentUpload
+              v-model="selectedDocuments"
+              title="Déposer vos fichiers"
+              subtitle="Formats acceptés : PDF, images, documents…"
+            />
+          </div>
+          <p v-if="uploadingDocuments" class="text-xs text-base-content/70">
+            Téléversement des documents en cours…
+          </p>
+        </div>
+
+        <div class="flex flex-col gap-3 md:flex-row md:justify-end">
+          <NuxtLink to="/product-catalog" class="btn btn-ghost" :class="{ 'btn-disabled': submitting }">
+            Annuler
+          </NuxtLink>
+          <button type="button" class="btn btn-primary" :disabled="!canSubmit" @click="submitCreation">
+            <span v-if="submitting" class="loading loading-spinner loading-sm mr-2"></span>
+            Créer le produit
+          </button>
+        </div>
+        <p v-if="selectedType && !requiredCustomFieldsFilled" class="text-xs text-error text-right">
+          Merci de renseigner tous les champs personnalisés obligatoires.
+        </p>
+      </div>
+    </section>
+  </main>
+</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 SearchSelect from '~/components/common/SearchSelect.vue'
+import DocumentUpload from '~/components/DocumentUpload.vue'
+import { useProductTypes } from '~/composables/useProductTypes'
+import { useProducts } from '~/composables/useProducts'
+import { useToast } from '~/composables/useToast'
+import { useCustomFields } from '~/composables/useCustomFields'
+import { useDocuments } from '~/composables/useDocuments'
+import { formatProductStructurePreview, normalizeProductStructureForSave } from '~/shared/modelUtils'
+import { uniqueConstructeurIds } from '~/shared/constructeurUtils'
+import type { ProductModelStructure } from '~/shared/types/inventory'
+import type { ModelType } from '~/services/modelTypes'
+
+interface ProductCatalogType extends ModelType {
+  structure: ProductModelStructure | null
+  customFields?: Array<Record<string, any>>
+}
+
+const route = useRoute()
+const router = useRouter()
+
+const { productTypes, loadProductTypes, loadingProductTypes } = useProductTypes()
+const { createProduct } = useProducts()
+const toast = useToast()
+const { upsertCustomFieldValue } = useCustomFields()
+const { uploadDocuments } = useDocuments()
+
+const initialTypeId = ref<string>(typeof route.query.typeId === 'string' ? route.query.typeId : '')
+const selectedTypeId = ref<string>(initialTypeId.value)
+const submitting = ref(false)
+const creationForm = reactive({
+  name: '' as string,
+  reference: '' as string,
+  constructeurIds: [] as string[],
+  supplierPrice: '' as string,
+})
+const selectedDocuments = ref<File[]>([])
+const uploadingDocuments = ref(false)
+
+interface CustomFieldInput {
+  id: string | null
+  name: string
+  type: string
+  required: boolean
+  options: string[]
+  value: string
+  customFieldId: string | null
+  orderIndex: number
+}
+
+const customFieldInputs = ref<CustomFieldInput[]>([])
+
+const loadingTypes = computed(() => loadingProductTypes.value)
+const productTypeList = computed<ProductCatalogType[]>(() =>
+  (productTypes.value || []) as ProductCatalogType[],
+)
+
+const typeOptionLabel = (type?: ProductCatalogType) => type?.name || 'Catégorie'
+const typeOptionDescription = (type?: ProductCatalogType) =>
+  type?.description ? String(type.description) : ''
+
+const selectedType = computed(() => {
+  if (!selectedTypeId.value) {
+    return null
+  }
+  return productTypeList.value.find((type) => type.id === selectedTypeId.value) ?? null
+})
+
+watch(
+  () => route.query.typeId,
+  (value) => {
+    if (typeof value === 'string') {
+      selectedTypeId.value = value
+    }
+  },
+)
+
+watch(selectedTypeId, (id) => {
+  const current = typeof route.query.typeId === 'string' ? route.query.typeId : ''
+  if ((id || '') === current) {
+    return
+  }
+  const nextQuery = { ...route.query }
+  if (id) {
+    nextQuery.typeId = id
+  } else {
+    delete nextQuery.typeId
+  }
+  router.replace({ path: route.path, query: nextQuery }).catch(() => {})
+})
+
+watch(selectedType, (type) => {
+  if (!type) {
+    clearForm()
+    customFieldInputs.value = []
+    return
+  }
+  if (!creationForm.name) {
+    creationForm.name = type.name
+  }
+  customFieldInputs.value = normalizeCustomFieldInputs(normalizeProductStructureForSave(type.structure))
+})
+
+const requiredCustomFieldsFilled = computed(() =>
+  customFieldInputs.value.every((field) => {
+    if (!field.required) {
+      return true
+    }
+    if (field.type === 'boolean') {
+      return field.value === 'true' || field.value === 'false'
+    }
+    return field.value.trim().length > 0
+  }),
+)
+
+const canSubmit = computed(() => Boolean(
+  selectedType.value &&
+  creationForm.name.trim().length >= 2 &&
+  requiredCustomFieldsFilled.value &&
+  !submitting.value,
+))
+
+const fieldKey = (field: CustomFieldInput, index: number) =>
+  field.customFieldId || field.id || `${field.name}-${index}`
+
+const normalizeCustomFieldInputs = (structure: ProductModelStructure | null): CustomFieldInput[] => {
+  if (!structure || typeof structure !== 'object') {
+    return []
+  }
+  const fields = Array.isArray(structure.customFields) ? structure.customFields : []
+  return fields
+    .map((field, index) => normalizeCustomField(field, index))
+    .filter((field): field is CustomFieldInput => field !== null)
+    .sort((a, b) => a.orderIndex - b.orderIndex)
+}
+
+const normalizeCustomField = (rawField: any, fallbackIndex = 0): CustomFieldInput | null => {
+  if (!rawField || typeof rawField !== 'object') {
+    return null
+  }
+  const name = typeof rawField.name === 'string' ? rawField.name.trim() : ''
+  if (!name) {
+    return null
+  }
+  const type = typeof rawField.type === 'string' ? rawField.type : 'text'
+  const required = !!rawField.required
+  const options = Array.isArray(rawField.options)
+    ? rawField.options.filter((option: unknown): option is string => typeof option === 'string')
+    : []
+  const defaultSource = rawField.defaultValue ?? rawField.value ?? rawField.default ?? null
+  const value = formatDefaultValue(type, defaultSource)
+  const id = typeof rawField.id === 'string' ? rawField.id : null
+  const customFieldId = typeof rawField.customFieldId === 'string' ? rawField.customFieldId : id
+  const orderIndex = typeof rawField.orderIndex === 'number' ? rawField.orderIndex : fallbackIndex
+
+  return { id, name, type, required, options, value, customFieldId, orderIndex }
+}
+
+const formatDefaultValue = (type: string, defaultValue: any): string => {
+  if (defaultValue === null || defaultValue === undefined) {
+    return ''
+  }
+  if (type === 'boolean') {
+    return String(defaultValue === true || String(defaultValue).toLowerCase() === 'true')
+  }
+  return String(defaultValue)
+}
+
+const clearForm = () => {
+  creationForm.name = ''
+  creationForm.reference = ''
+  creationForm.constructeurIds = []
+  creationForm.supplierPrice = ''
+}
+
+const buildPayload = () => {
+  const payload: Record<string, any> = {
+    name: creationForm.name.trim(),
+    typeProductId: selectedType.value?.id,
+  }
+
+  const reference = creationForm.reference.trim()
+  if (reference) {
+    payload.reference = reference
+  }
+
+  if (creationForm.constructeurIds.length) {
+    payload.constructeurIds = uniqueConstructeurIds(creationForm.constructeurIds)
+  }
+
+  const rawPrice = creationForm.supplierPrice.trim()
+  if (rawPrice) {
+    const parsed = Number(rawPrice)
+    if (!Number.isNaN(parsed)) {
+      payload.supplierPrice = parsed
+    }
+  }
+
+  return payload
+}
+
+const submitCreation = async () => {
+  if (!selectedType.value) {
+    toast.showError('Sélectionnez une catégorie de produit.')
+    return
+  }
+
+  submitting.value = true
+  try {
+    const payload = buildPayload()
+    const result = await createProduct(payload)
+    if (result.success && result.data?.id) {
+      const productId = result.data.id
+      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.push(`/product/${result.data.id}/edit`)
+        return
+      }
+      if (selectedDocuments.value.length) {
+        uploadingDocuments.value = true
+        const uploadResult = await uploadDocuments(
+          {
+            files: selectedDocuments.value,
+            context: { productId },
+          },
+          { updateStore: false },
+        )
+        if (!uploadResult.success) {
+          const message = uploadResult.error
+            ? `Documents non ajoutés : ${uploadResult.error}`
+            : 'Documents non ajoutés : une erreur est survenue.'
+          toast.showError(message)
+        } else {
+          selectedDocuments.value = []
+        }
+      }
+      toast.showSuccess('Produit créé avec succès')
+      await router.push('/product-catalog')
+    }
+  } catch (error: any) {
+    toast.showError(error?.message || 'Erreur lors de la création du produit')
+  } finally {
+    submitting.value = false
+    uploadingDocuments.value = false
+  }
+}
+
+const saveCustomFieldValues = async (productId: string) => {
+  const failed: string[] = []
+  for (const field of customFieldInputs.value) {
+    if (!field.customFieldId || !field.name) {
+      continue
+    }
+    const value = field.value ?? ''
+    const result = await upsertCustomFieldValue(
+      field.customFieldId,
+      'product',
+      productId,
+      String(value ?? ''),
+      { customFieldName: field.name, customFieldType: field.type, customFieldRequired: field.required },
+    )
+    if (!result.success) {
+      failed.push(field.name)
+    }
+  }
+  return failed
+}
+
+onMounted(async () => {
+  await loadProductTypes()
+  if (selectedTypeId.value && !selectedType.value) {
+    await router.replace({
+      path: route.path,
+      query: { ...route.query, typeId: undefined },
+    }).catch(() => {})
+  }
+})
+</script>
--- a/app/pages/type/[id].vue
+++ b/app/pages/type/[id].vue
@@ -93,6 +93,38 @@
              </div>
            </div>
          </div>
+
+          <!-- Produits requis -->
+          <div v-if="productRequirementCount > 0" class="mb-8 space-y-3">
+            <h3 class="text-lg font-semibold">
+              Produits requis
+            </h3>
+            <div class="space-y-3">
+              <div
+                v-for="requirement in type.productRequirements"
+                :key="requirement.id || requirement.typeProductId"
+                class="border border-base-200 rounded-lg p-4 bg-base-100"
+              >
+                <div class="flex items-start justify-between gap-2">
+                  <div>
+                    <h4 class="text-sm font-semibold">
+                      {{ requirement.label || requirement.typeProduct?.name || 'Produit' }}
+                    </h4>
+                    <p class="text-xs text-gray-500">
+                      Type : {{ requirement.typeProduct?.name || 'Non défini' }}
+                    </p>
+                  </div>
+                  <span class="badge badge-outline badge-sm">
+                    Min {{ toDisplayCount(requirement.minCount, requirement.required ? 1 : 0) }} •
+                    Max {{ toDisplayCount(requirement.maxCount, '∞') }}
+                  </span>
+                </div>
+                <p class="text-xs text-gray-500 mt-2">
+                  {{ requirement.allowNewModels ? 'Création de produits autorisée' : 'Produits existants uniquement' }}
+                </p>
+              </div>
+            </div>
+          </div>
        </div>
      </div>
    </div>
@@ -141,6 +173,7 @@ const typePageTitle = computed(() => {

 const componentRequirementCount = computed(() => type.value?.componentRequirements?.length || 0)
 const pieceRequirementCount = computed(() => type.value?.pieceRequirements?.length || 0)
+const productRequirementCount = computed(() => type.value?.productRequirements?.length || 0)

 const toDisplayCount = (value, fallback) => {
  if (value === null || value === undefined) {
--- a/app/pages/type/edit/[id].vue
+++ b/app/pages/type/edit/[id].vue
@@ -70,7 +70,8 @@ const editedType = ref({
  maintenanceFrequency: '',
  customFields: [],
  componentRequirements: [],
-  pieceRequirements: []
+  pieceRequirements: [],
+  productRequirements: []
 })

 const parseOptions = (field = {}) => {
@@ -140,6 +141,21 @@ const normalizePieceRequirements = (requirements = []) =>
    .sort((a, b) => (a.orderIndex ?? 0) - (b.orderIndex ?? 0))
    .map((req, index) => ({ ...req, orderIndex: index }))

+const normalizeProductRequirements = (requirements = []) =>
+  requirements
+    .filter(req => req?.typeProductId)
+    .map((req, index) => ({
+      typeProductId: req.typeProductId,
+      label: req.label?.trim() ? req.label.trim() : undefined,
+      minCount: toIntegerOrNull(req.minCount, 0),
+      maxCount: toIntegerOrNull(req.maxCount, null),
+      required: req.required ?? false,
+      allowNewModels: req.allowNewModels ?? true,
+      orderIndex: typeof req.orderIndex === 'number' ? req.orderIndex : index
+    }))
+    .sort((a, b) => (a.orderIndex ?? 0) - (b.orderIndex ?? 0))
+    .map((req, index) => ({ ...req, orderIndex: index }))
+
 const saveChanges = async () => {
  try {
    saving.value = true
@@ -151,7 +167,8 @@ const saveChanges = async () => {
      ...currentEditedType,
      customFields: normalizeCustomFields(currentEditedType.customFields),
      componentRequirements: normalizeComponentRequirements(currentEditedType.componentRequirements),
-      pieceRequirements: normalizePieceRequirements(currentEditedType.pieceRequirements)
+      pieceRequirements: normalizePieceRequirements(currentEditedType.pieceRequirements),
+      productRequirements: normalizeProductRequirements(currentEditedType.productRequirements)
    }

    const result = await updateMachineType(type.value.id, updatedType)
@@ -192,7 +209,8 @@ onMounted(async () => {
        maintenanceFrequency: type.value.maintenanceFrequency || '',
        customFields: type.value.customFields || [],
        componentRequirements: type.value.componentRequirements || [],
-        pieceRequirements: type.value.pieceRequirements || []
+        pieceRequirements: type.value.pieceRequirements || [],
+        productRequirements: type.value.productRequirements || [],
      }
    } else {
      console.error('Failed to load type:', result.error)