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/components/ComponentStructureAssignmentNode.vue

@@ -66,6 +66,44 @@
       </div>
     </section>
 
+    <section v-if="assignment.products.length" class="rounded-lg border border-dashed border-base-300 bg-base-200/40 p-4 space-y-4">
+      <header class="space-y-1">
+        <h4 class="text-sm font-semibold text-base-content">
+          {{ isRoot ? 'Produits requis par le squelette' : 'Produits associés à ce sous-composant' }}
+        </h4>
+        <p class="text-xs text-base-content/70">
+          Sélectionnez les produits catalogue à lier sur chaque position définie.
+        </p>
+      </header>
+
+      <div
+        v-for="productAssignment in assignment.products"
+        :key="productAssignment.path"
+        class="rounded-md border border-base-200 bg-base-100 p-3 space-y-2"
+      >
+        <div class="space-y-1">
+          <p class="text-xs font-medium text-base-content">
+            {{ describeProductRequirement(productAssignment.definition) }}
+          </p>
+          <p v-if="!getProductOptions(productAssignment.definition).length" class="text-[11px] text-error">
+            Aucun produit disponible pour cette catégorie.
+          </p>
+        </div>
+
+        <SearchSelect
+          :model-value="productAssignment.selectedProductId || ''"
+          :options="getProductOptions(productAssignment.definition)"
+          :loading="productsLoading"
+          size="xs"
+          placeholder="Rechercher un produit..."
+          :empty-text="getProductOptions(productAssignment.definition).length ? 'Aucun résultat' : 'Aucun produit disponible'"
+          :option-label="productOptionLabel"
+          :option-description="productOptionDescription"
+          @update:modelValue="(value) => { productAssignment.selectedProductId = normalizeSelectionValue(value); }"
+        />
+      </div>
+    </section>
+
     <section v-if="assignment.subcomponents.length" class="space-y-4">
       <header class="space-y-1">
         <h4 class="text-sm font-semibold text-base-content">
@@ -81,9 +119,11 @@
         :key="subAssignment.path"
         :assignment="subAssignment"
         :pieces="pieces"
+        :products="products"
         :components="components"
         :components-loading="componentsLoading"
         :pieces-loading="piecesLoading"
+        :products-loading="productsLoading"
         :depth="depth + 1"
       />
     </section>
@@ -95,6 +135,7 @@ import { computed, watch } from 'vue';
 import SearchSelect from '~/components/common/SearchSelect.vue';
 import type {
   ComponentModelPiece,
+  ComponentModelProduct,
   ComponentModelStructureNode,
 } from '~/shared/types/inventory';
 
@@ -122,17 +163,36 @@ interface PieceOption {
   } | null;
 }
 
+interface ProductOption {
+  id: string;
+  name?: string | null;
+  reference?: string | null;
+  typeProductId?: string | null;
+  typeProduct?: {
+    id: string;
+    name?: string | null;
+    code?: string | null;
+  } | null;
+}
+
 export interface StructurePieceAssignment {
   path: string;
   definition: ComponentModelPiece;
   selectedPieceId: string;
 }
 
+export interface StructureProductAssignment {
+  path: string;
+  definition: ComponentModelProduct;
+  selectedProductId: string;
+}
+
 export interface StructureAssignmentNode {
   path: string;
   definition: ComponentModelStructureNode;
   selectedComponentId: string;
   pieces: StructurePieceAssignment[];
+  products: StructureProductAssignment[];
   subcomponents: StructureAssignmentNode[];
 }
 
@@ -140,17 +200,21 @@ const props = withDefaults(
   defineProps<{
     assignment: StructureAssignmentNode;
     pieces: PieceOption[] | null;
+    products: ProductOption[] | null;
     components: ComponentOption[] | null;
     depth?: number;
     componentsLoading?: boolean;
     piecesLoading?: boolean;
+    productsLoading?: boolean;
   }>(),
   {
     depth: 0,
     pieces: () => [],
+    products: () => [],
     components: () => [],
     componentsLoading: false,
     piecesLoading: false,
+    productsLoading: false,
   },
 );
 
@@ -269,6 +333,102 @@ const describePieceRequirement = (definition: ComponentModelPiece) => {
   return parts.length ? parts.join(' • ') : 'Pièce du squelette';
 };
 
+const getProductOptions = (definition: ComponentModelProduct) => {
+  const requiredTypeId =
+    definition.typeProductId ||
+    (definition as any).typeProduct?.id ||
+    definition.familyCode ||
+    null;
+
+  return (props.products || []).filter((product) => {
+    if (!product || typeof product !== 'object') {
+      return false;
+    }
+    if (!requiredTypeId) {
+      return true;
+    }
+    if (definition.typeProductId || (definition as any).typeProduct?.id) {
+      return (
+        product.typeProductId === requiredTypeId ||
+        product.typeProduct?.id === requiredTypeId
+      );
+    }
+    if (definition.familyCode) {
+      return (
+        product.typeProduct?.code === requiredTypeId ||
+        product.typeProductId === requiredTypeId
+      );
+    }
+    return false;
+  });
+};
+
+const productOptionLabel = (product?: ProductOption | null) => {
+  if (!product) {
+    return 'Produit';
+  }
+  return product.name || product.reference || 'Produit';
+};
+
+const productOptionDescription = (product?: ProductOption | null) => {
+  if (!product) {
+    return '';
+  }
+  const parts: string[] = [];
+  const typeLabel =
+    product.typeProduct?.name || product.typeProduct?.code || null;
+  if (typeLabel) {
+    parts.push(typeLabel);
+  }
+  if (product.reference) {
+    parts.push(`Ref. ${product.reference}`);
+  }
+  return parts.join(' • ');
+};
+
+const describeProductRequirement = (definition: ComponentModelProduct) => {
+  const parts: string[] = [];
+  const addPart = (value?: string | null) => {
+    const trimmed = typeof value === 'string' ? value.trim() : '';
+    if (trimmed && !parts.includes(trimmed)) {
+      parts.push(trimmed);
+    }
+  };
+
+  const options = getProductOptions(definition);
+  const fallbackProduct = options[0] || null;
+  const fallbackType = fallbackProduct?.typeProduct || null;
+
+  addPart(definition.role);
+  addPart(
+    definition.typeProductLabel ||
+      (definition as any).typeProduct?.name ||
+      fallbackType?.name,
+  );
+
+  const family =
+    definition.familyCode ||
+    (definition as any).typeProduct?.code ||
+    fallbackType?.code ||
+    null;
+  if (family) {
+    addPart(`Famille ${family}`);
+  }
+
+  if (parts.length === 0) {
+    addPart(fallbackType?.name);
+    if (fallbackType?.code) {
+      addPart(`Famille ${fallbackType.code}`);
+    }
+  }
+
+  if (parts.length === 0 && definition.typeProductId) {
+    addPart(`#${definition.typeProductId}`);
+  }
+
+  return parts.length ? parts.join(' • ') : 'Produit du squelette';
+};
+
 const requirementLabel = computed(() => {
   const definition = props.assignment.definition || {};
   const alias = definition.alias || definition.typeComposantLabel;
@@ -377,4 +537,20 @@ watch(
   },
   { deep: true, immediate: true },
 );
+
+watch(
+  () => [props.products, props.assignment.products],
+  () => {
+    for (const productAssignment of props.assignment.products) {
+      const options = getProductOptions(productAssignment.definition);
+      if (
+        productAssignment.selectedProductId &&
+        !options.some((product) => product.id === productAssignment.selectedProductId)
+      ) {
+        productAssignment.selectedProductId = '';
+      }
+    }
+  },
+  { deep: true, immediate: true },
+);
 </script>