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/PieceModelStructureEditor.vue

@@ -1,32 +1,95 @@
 <template>
-  <div class="space-y-4">
-    <header class="flex items-center justify-between">
-      <h3 class="text-sm font-semibold">
-        Champs personnalisés
-      </h3>
-      <button type="button" class="btn btn-outline btn-xs" @click="addField">
-        <IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" />
-        Ajouter
-      </button>
-    </header>
+  <div class="space-y-6">
+    <section class="space-y-3">
+      <header class="flex items-center justify-between">
+        <div>
+          <h3 class="text-sm font-semibold">
+            Produits inclus par défaut
+          </h3>
+          <p class="text-xs text-base-content/70">
+            Ces produits s’afficheront lors de la création d’une pièce basée sur cette catégorie.
+          </p>
+        </div>
+        <button type="button" class="btn btn-outline btn-xs" @click="addProduct">
+          <IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" />
+          Ajouter
+        </button>
+      </header>
 
-    <p v-if="!fields.length" class="text-xs text-gray-500">
-      Aucun champ personnalisé n'a encore été défini.
-    </p>
+      <p v-if="!products.length" class="text-xs text-gray-500">
+        Aucun produit défini.
+      </p>
 
-    <ul v-else class="space-y-2" role="list">
-      <li
-        v-for="(field, index) in fields"
-        :key="field.uid"
-        class="border border-base-200 rounded-md p-3 space-y-2 bg-base-100 transition-colors"
-        :class="reorderClass(index)"
-        draggable="true"
-        @dragstart="onDragStart(index, $event)"
-        @dragenter="onDragEnter(index)"
-        @dragover.prevent="onDragEnter(index)"
-        @drop.prevent="onDrop(index)"
-        @dragend="onDragEnd"
-      >
+      <ul v-else class="space-y-2" role="list">
+        <li
+          v-for="(product, index) in products"
+          :key="product.uid"
+          class="space-y-3 rounded-md border border-base-200 bg-base-100 p-3"
+        >
+          <div class="flex items-start justify-between gap-3">
+            <div class="flex-1 space-y-3">
+              <div class="form-control">
+                <label class="label py-1">
+                  <span class="label-text text-xs">Famille de produit</span>
+                </label>
+                <select
+                  v-model="product.typeProductId"
+                  class="select select-bordered select-xs"
+                  @change="handleProductTypeSelect(product)"
+                >
+                  <option value="">
+                    Sélectionner une famille
+                  </option>
+                  <option
+                    v-for="type in productTypeOptions"
+                    :key="type.id"
+                    :value="type.id"
+                  >
+                    {{ formatProductTypeOption(type) }}
+                  </option>
+                </select>
+              </div>
+            </div>
+            <button
+              type="button"
+              class="btn btn-error btn-xs btn-square"
+              @click="removeProduct(index)"
+            >
+              <IconLucideTrash class="w-4 h-4" aria-hidden="true" />
+            </button>
+          </div>
+        </li>
+      </ul>
+    </section>
+
+    <section class="space-y-3">
+      <header class="flex items-center justify-between">
+        <h3 class="text-sm font-semibold">
+          Champs personnalisés
+        </h3>
+        <button type="button" class="btn btn-outline btn-xs" @click="addField">
+          <IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" />
+          Ajouter
+        </button>
+      </header>
+
+      <p v-if="!fields.length" class="text-xs text-gray-500">
+        Aucun champ personnalisé n'a encore été défini.
+      </p>
+
+      <ul v-else class="space-y-2" role="list">
+        <li
+          v-for="(field, index) in fields"
+          :key="field.uid"
+          class="border border-base-200 rounded-md p-3 space-y-2 bg-base-100 transition-colors"
+          :class="reorderClass(index)"
+          draggable="true"
+          @dragstart="onDragStart(index, $event)"
+          @dragenter="onDragEnter(index)"
+          @dragover.prevent="onDragEnter(index)"
+          @drop.prevent="onDrop(index)"
+          @dragend="onDragEnd"
+        >
         <div class="flex items-start gap-3">
           <button
             type="button"
@@ -87,25 +150,34 @@
         </div>
       </li>
     </ul>
+    </section>
   </div>
 </template>
 
 <script setup lang="ts">
-import { reactive, ref, watch } from 'vue'
+import { computed, onMounted, reactive, ref, watch } from 'vue'
 import IconLucideGripVertical from '~icons/lucide/grip-vertical'
 import IconLucidePlus from '~icons/lucide/plus'
 import IconLucideTrash from '~icons/lucide/trash'
 import type {
   PieceModelCustomField,
   PieceModelCustomFieldType,
+  PieceModelProduct,
   PieceModelStructure,
   PieceModelStructureEditorField,
 } from '~/shared/types/inventory'
 import { normalizePieceStructureForSave } from '~/shared/modelUtils'
+import { useProductTypes } from '~/composables/useProductTypes'
 
 defineOptions({ name: 'PieceModelStructureEditor' })
 
 type EditorField = PieceModelStructureEditorField & { uid: string }
+type EditorProduct = {
+  uid: string
+  typeProductId: string
+  typeProductLabel: string
+  familyCode: string
+}
 
 const props = defineProps<{
   modelValue?: PieceModelStructure | null
@@ -115,12 +187,15 @@ const emit = defineEmits<{
   (event: 'update:modelValue', value: PieceModelStructure): void
 }>()
 
-const ensureArray = <T>(value: T[] | null | undefined): T[] => (Array.isArray(value) ? value : [])
+const { productTypes, loadProductTypes } = useProductTypes()
+
+const ensureArray = <T,>(value: T[] | null | undefined): T[] =>
+  Array.isArray(value) ? value : []
 
 const normalizeLineEndings = (value: string): string =>
   value.replace(/\r\n/g, '\n').replace(/\r/g, '\n')
 
-const safeClone = <T>(value: T, fallback: T): T => {
+const safeClone = <T,>(value: T, fallback: T): T => {
   try {
     return JSON.parse(JSON.stringify(value ?? fallback)) as T
   } catch {
@@ -132,17 +207,19 @@ const extractRest = (structure?: PieceModelStructure | null): Record<string, unk
   if (!structure || typeof structure !== 'object') {
     return {}
   }
-  const entries = Object.entries(structure).filter(([key]) => key !== 'customFields')
+  const entries = Object.entries(structure).filter(
+    ([key]) => key !== 'customFields' && key !== 'products',
+  )
   return safeClone(Object.fromEntries(entries), {})
 }
 
 let uidCounter = 0
-const createUid = (): string => {
+const createUid = (scope: 'field' | 'product'): string => {
   if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
     return crypto.randomUUID()
   }
   uidCounter += 1
-  return `piece-field-${Date.now().toString(36)}-${uidCounter}`
+  return `piece-${scope}-${Date.now().toString(36)}-${uidCounter}`
 }
 
 const toEditorField = (
@@ -159,7 +236,7 @@ const toEditorField = (
   )
 
   return {
-    uid: createUid(),
+    uid: createUid('field'),
     name: typeof input?.name === 'string' ? input.name : '',
     type: baseType as PieceModelCustomFieldType,
     required: Boolean(input?.required),
@@ -176,7 +253,81 @@ const hydrateFields = (structure?: PieceModelStructure | null): EditorField[] =>
     .map((field, index) => ({ ...field, orderIndex: index }))
 }
 
+const toEditorProduct = (
+  input: Partial<PieceModelProduct> | null | undefined,
+): EditorProduct => ({
+  uid: createUid('product'),
+  typeProductId: typeof input?.typeProductId === 'string' ? input.typeProductId : '',
+  typeProductLabel:
+    typeof input?.typeProductLabel === 'string' ? input.typeProductLabel : '',
+  familyCode: typeof input?.familyCode === 'string' ? input.familyCode : '',
+})
+
+const hydrateProducts = (structure?: PieceModelStructure | null): EditorProduct[] => {
+  const source = Array.isArray(structure?.products) ? structure?.products : []
+  return source.map((product) => toEditorProduct(product))
+}
+
+const productTypeOptions = computed(() => productTypes.value ?? [])
+
+const productTypeMap = computed(() => {
+  const map = new Map<string, any>()
+  productTypeOptions.value.forEach((type: any) => {
+    if (type?.id) {
+      map.set(type.id, type)
+    }
+  })
+  return map
+})
+
+const formatProductTypeOption = (type: any) => {
+  if (!type) {
+    return ''
+  }
+  const parts: string[] = []
+  if (type.code) {
+    parts.push(type.code)
+  }
+  if (type.name) {
+    parts.push(type.name)
+  }
+  return parts.length ? parts.join(' • ') : type.id || ''
+}
+
+const updateProductTypeMetadata = (product: EditorProduct) => {
+  const option = product.typeProductId
+    ? productTypeMap.value.get(product.typeProductId)
+    : null
+  product.typeProductLabel = option?.name ?? ''
+}
+
+const handleProductTypeSelect = (product: EditorProduct) => {
+  const option = product.typeProductId
+    ? productTypeMap.value.get(product.typeProductId)
+    : null
+  product.typeProductLabel = option?.name ?? ''
+  if (option?.code) {
+    product.familyCode = option.code
+  }
+}
+
+const createEmptyProduct = (): EditorProduct => ({
+  uid: createUid('product'),
+  typeProductId: '',
+  typeProductLabel: '',
+  familyCode: '',
+})
+
+const addProduct = () => {
+  products.value.push(createEmptyProduct())
+}
+
+const removeProduct = (index: number) => {
+  products.value = products.value.filter((_, idx) => idx !== index)
+}
+
 const fields = ref<EditorField[]>(hydrateFields(props.modelValue))
+const products = ref<EditorProduct[]>(hydrateProducts(props.modelValue))
 const restState = ref<Record<string, unknown>>(extractRest(props.modelValue))
 
 const applyOrderIndex = (list: EditorField[]): EditorField[] =>
@@ -185,8 +336,30 @@ const applyOrderIndex = (list: EditorField[]): EditorField[] =>
     orderIndex: index,
   }))
 
+const normalizeProductEntry = (product: EditorProduct): PieceModelProduct | null => {
+  const typeProductId = typeof product.typeProductId === 'string' ? product.typeProductId.trim() : ''
+  const familyCode = typeof product.familyCode === 'string' ? product.familyCode.trim() : ''
+
+  if (!typeProductId && !familyCode) {
+    return null
+  }
+
+  const payload: PieceModelProduct = {}
+  if (typeProductId) {
+    payload.typeProductId = typeProductId
+  }
+  if (familyCode) {
+    payload.familyCode = familyCode
+  }
+  if (product.typeProductLabel) {
+    payload.typeProductLabel = product.typeProductLabel
+  }
+  return payload
+}
+
 const buildPayload = (
   fieldsSource: EditorField[],
+  productsSource: EditorProduct[],
   restSource: Record<string, unknown>,
 ): PieceModelStructure => {
   const normalizedFields = fieldsSource
@@ -219,8 +392,13 @@ const buildPayload = (
     })
     .filter((field): field is PieceModelCustomField => Boolean(field))
 
+  const normalizedProducts = productsSource
+    .map((product) => normalizeProductEntry(product))
+    .filter((product): product is PieceModelProduct => Boolean(product))
+
   const draft: PieceModelStructure = {
     ...safeClone(restSource, {}),
+    products: normalizedProducts,
     customFields: normalizedFields,
   }
 
@@ -234,7 +412,7 @@ const serializeStructure = (structure?: PieceModelStructure | null): string => {
 let lastEmitted = serializeStructure(props.modelValue)
 
 const emitUpdate = () => {
-  const payload = buildPayload(fields.value, restState.value)
+  const payload = buildPayload(fields.value, products.value, restState.value)
   const serialized = JSON.stringify(payload)
   if (serialized !== lastEmitted) {
     lastEmitted = serialized
@@ -243,6 +421,10 @@ const emitUpdate = () => {
 }
 
 watch(fields, emitUpdate, { deep: true })
+watch(products, emitUpdate, { deep: true })
+watch(productTypeOptions, () => {
+  products.value.forEach((product) => updateProductTypeMetadata(product))
+})
 
 watch(
   () => props.modelValue,
@@ -253,11 +435,20 @@ watch(
     }
     restState.value = extractRest(value)
     fields.value = hydrateFields(value)
+    products.value = hydrateProducts(value)
+    products.value.forEach((product) => updateProductTypeMetadata(product))
     lastEmitted = incomingSerialized
   },
   { deep: true },
 )
 
+onMounted(async () => {
+  if (!productTypeOptions.value.length) {
+    await loadProductTypes()
+  }
+  products.value.forEach((product) => updateProductTypeMetadata(product))
+})
+
 const dragState = reactive({
   draggingIndex: null as number | null,
   dropTargetIndex: null as number | null,
@@ -328,7 +519,7 @@ const reorderClass = (index: number) => {
 }
 
 const createEmptyField = (orderIndex: number): EditorField => ({
-  uid: createUid(),
+  uid: createUid('field'),
   name: '',
   type: 'text',
   required: false,