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

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>