fix : use name parameter for API search filter

- Fix missing <template> tag in product/create.vue causing build error
- Preserve constructeurIds when product already has constructeurs loaded

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

app/components/DocumentThumbnail.vue

@@ -12,12 +12,6 @@
       loading="lazy"
       decoding="async"
     >
-    <iframe
-      v-else-if="canRenderPdf"
-      :src="previewSrc"
-      class="h-full w-full border-0 bg-white"
-      title="Aperçu PDF"
-    />
     <component
       v-else
       :is="icon.component"
@@ -54,8 +48,6 @@ const props = defineProps<{
   alt?: string;
 }>();
 
-const PDF_PREVIEW_MAX_BYTES = 5 * 1024 * 1024;
-
 const normalizedDocument = computed(() => props.document ?? null);
 
 const canRenderImage = computed(() => {
@@ -64,14 +56,9 @@ const canRenderImage = computed(() => {
 });
 
 const canRenderPdf = computed(() => {
-  const doc = normalizedDocument.value;
-  if (!doc || !isPdfDocument(doc) || !doc.path) {
-    return false;
-  }
-  if (typeof doc.size === 'number' && doc.size > PDF_PREVIEW_MAX_BYTES) {
-    return false;
-  }
-  return true;
+  // Rendering many PDF iframes in a list is very heavy for the browser.
+  // We intentionally disable inline PDF previews and fall back to an icon.
+  return false;
 });
 
 const appendPdfViewerParams = (src: string) => {

app/composables/usePieces.js

@@ -56,6 +56,15 @@ export function usePieces () {
         piece.productId = productId
       }
     }
+    const productIds = Array.isArray(piece.productIds) ? piece.productIds.filter(Boolean) : []
+    if (productIds.length === 0 && piece.productId) {
+      piece.productIds = [piece.productId]
+    } else if (productIds.length > 0) {
+      piece.productIds = productIds.map((id) => String(id))
+      if (!piece.productId) {
+        piece.productId = piece.productIds[0] || null
+      }
+    }
     const ids = uniqueConstructeurIds(
       piece.constructeurIds,
       piece.constructeurs,

app/pages/component/[id]/edit.vue

@@ -176,6 +176,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,7 +201,7 @@
               </div>
 
               <p
-                v-if="!getStructureCustomFields(selectedTypeStructure).length && !getStructurePieces(selectedTypeStructure).length && !getStructureSubcomponents(selectedTypeStructure).length"
+                v-if="!getStructureCustomFields(selectedTypeStructure).length && !getStructurePieces(selectedTypeStructure).length && !getStructureProducts(selectedTypeStructure).length && !getStructureSubcomponents(selectedTypeStructure).length"
                 class="text-xs text-gray-500"
               >
                 Ce squelette ne définit pas encore de pièces, sous-composants ou valeurs par défaut.
@@ -198,6 +210,50 @@
           </details>
         </div>
 
+        <div
+          v-if="structureSelections.hasAny"
+          class="space-y-3 rounded-lg border border-base-200 bg-base-200/30 p-4"
+        >
+          <header class="space-y-1">
+            <h2 class="font-semibold text-base-content">Sélections actuelles</h2>
+            <p class="text-xs text-base-content/70">
+              Voici les pièces, produits et sous-composants réellement choisis pour ce composant.
+            </p>
+          </header>
+
+          <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+            <div v-if="structureSelections.pieces.length" class="space-y-2">
+              <h3 class="font-semibold text-sm text-base-content">Pièces choisies</h3>
+              <ul class="list-disc list-inside space-y-1 text-sm">
+                <li v-for="entry in structureSelections.pieces" :key="`selected-piece-${entry.path}-${entry.id}`">
+                  <span class="font-medium">{{ entry.resolvedName }}</span>
+                  <span class="text-xs text-base-content/70"> — {{ entry.requirementLabel }}</span>
+                </li>
+              </ul>
+            </div>
+
+            <div v-if="structureSelections.products.length" class="space-y-2">
+              <h3 class="font-semibold text-sm text-base-content">Produits choisis</h3>
+              <ul class="list-disc list-inside space-y-1 text-sm">
+                <li v-for="entry in structureSelections.products" :key="`selected-product-${entry.path}-${entry.id}`">
+                  <span class="font-medium">{{ entry.resolvedName }}</span>
+                  <span class="text-xs text-base-content/70"> — {{ entry.requirementLabel }}</span>
+                </li>
+              </ul>
+            </div>
+
+            <div v-if="structureSelections.components.length" class="space-y-2">
+              <h3 class="font-semibold text-sm text-base-content">Sous-composants choisis</h3>
+              <ul class="list-disc list-inside space-y-1 text-sm">
+                <li v-for="entry in structureSelections.components" :key="`selected-component-${entry.path}-${entry.id}`">
+                  <span class="font-medium">{{ entry.resolvedName }}</span>
+                  <span class="text-xs text-base-content/70"> — {{ entry.requirementLabel }}</span>
+                </li>
+              </ul>
+            </div>
+          </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>
@@ -400,6 +456,10 @@ import DocumentUpload from '~/components/DocumentUpload.vue'
 import DocumentPreviewModal from '~/components/DocumentPreviewModal.vue'
 import { useComponentTypes } from '~/composables/useComponentTypes'
 import { useComposants } from '~/composables/useComposants'
+import { usePieceTypes } from '~/composables/usePieceTypes'
+import { useProductTypes } from '~/composables/useProductTypes'
+import { usePieces } from '~/composables/usePieces'
+import { useProducts } from '~/composables/useProducts'
 import { useCustomFields } from '~/composables/useCustomFields'
 import { useApi } from '~/composables/useApi'
 import { useToast } from '~/composables/useToast'
@@ -434,7 +494,11 @@ const route = useRoute()
 const router = useRouter()
 const { get } = useApi()
 const { componentTypes, loadComponentTypes } = useComponentTypes()
-const { updateComposant } = useComposants()
+const { pieceTypes, loadPieceTypes } = usePieceTypes()
+const { productTypes, loadProductTypes } = useProductTypes()
+const { updateComposant, loadComposants, composants: componentCatalogRef } = useComposants()
+const { pieces, loadPieces } = usePieces()
+const { products, loadProducts } = useProducts()
 const { ensureConstructeurs } = useConstructeurs()
 const { upsertCustomFieldValue, updateCustomFieldValue, getCustomFieldValuesByEntity } = useCustomFields()
 const toast = useToast()
@@ -500,6 +564,46 @@ const documentPreviewSrc = (document: any) => {
   }
   return document.path
 }
+
+const fetchedPieceTypeMap = ref<Record<string, string>>({})
+const pieceTypeLabelMap = computed(() => ({
+  ...Object.fromEntries(
+    (pieceTypes.value || [])
+      .filter((type: any) => type?.id)
+      .map((type: any) => [type.id, type.name || type.code || '']),
+  ),
+  ...fetchedPieceTypeMap.value,
+}))
+const fetchedProductTypeMap = ref<Record<string, string>>({})
+const productTypeLabelMap = computed(() => ({
+  ...Object.fromEntries(
+    (productTypes.value || [])
+      .filter((type: any) => type?.id)
+      .map((type: any) => [type.id, type.name || type.code || '']),
+  ),
+  ...fetchedProductTypeMap.value,
+}))
+const pieceCatalogMap = computed(() =>
+  new Map(
+    (pieces.value || [])
+      .filter((item: any) => item?.id)
+      .map((item: any) => [String(item.id), item]),
+  ),
+)
+const productCatalogMap = computed(() =>
+  new Map(
+    (products.value || [])
+      .filter((item: any) => item?.id)
+      .map((item: any) => [String(item.id), item]),
+  ),
+)
+const componentCatalogMap = computed(() =>
+  new Map(
+    (componentCatalogRef.value || [])
+      .filter((item: any) => item?.id)
+      .map((item: any) => [String(item.id), item]),
+  ),
+)
 const documentThumbnailClass = (document: any) => {
   if (shouldInlinePdf(document) || (isImageDocument(document) && document?.path)) {
     return 'h-24 w-20'
@@ -1006,6 +1110,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
@@ -1014,6 +1122,9 @@ const getStructureSubcomponents = (structure: ComponentModelStructure | null) =>
   return Array.isArray(legacy) ? legacy : []
 }
 
+const isNonEmptyString = (value: unknown): value is string =>
+  typeof value === 'string' && value.trim().length > 0
+
 const resolvePieceLabel = (piece: Record<string, any>) => {
   const parts: string[] = []
   if (piece.role) {
@@ -1023,6 +1134,8 @@ const resolvePieceLabel = (piece: Record<string, any>) => {
     parts.push(piece.typePiece.name)
   } else if (piece.typePieceLabel) {
     parts.push(piece.typePieceLabel)
+  } else if (piece.typePieceId && pieceTypeLabelMap.value[piece.typePieceId]) {
+    parts.push(pieceTypeLabelMap.value[piece.typePieceId])
   } else if (piece.typePiece?.code) {
     parts.push(`Famille ${piece.typePiece.code}`)
   } else if (piece.familyCode) {
@@ -1033,6 +1146,91 @@ const resolvePieceLabel = (piece: Record<string, any>) => {
   return parts.length ? parts.join(' • ') : 'Pièce'
 }
 
+const fetchPieceTypeNames = async (ids: string[]) => {
+  const missing = ids.filter((id) => id && !pieceTypeLabelMap.value[id])
+  if (!missing.length) {
+    return
+  }
+  const results = await Promise.allSettled(
+    missing.map((id) => get(`/model_types/${id}`)),
+  )
+  const next = { ...fetchedPieceTypeMap.value }
+  results.forEach((result, index) => {
+    if (result.status !== 'fulfilled') {
+      return
+    }
+    const data = result.value?.data
+    const name = data?.name || data?.code
+    if (name) {
+      next[missing[index]] = name
+    }
+  })
+  fetchedPieceTypeMap.value = next
+}
+
+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.typeProductId && productTypeLabelMap.value[product.typeProductId]) {
+    parts.push(productTypeLabelMap.value[product.typeProductId])
+  } 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 fetchProductTypeNames = async (ids: string[]) => {
+  const missing = ids.filter((id) => id && !productTypeLabelMap.value[id])
+  if (!missing.length) {
+    return
+  }
+  const results = await Promise.allSettled(
+    missing.map((id) => get(`/model_types/${id}`)),
+  )
+  const next = { ...fetchedProductTypeMap.value }
+  results.forEach((result, index) => {
+    if (result.status !== 'fulfilled') {
+      return
+    }
+    const data = result.value?.data
+    const name = data?.name || data?.code
+    if (name) {
+      next[missing[index]] = name
+    }
+  })
+  fetchedProductTypeMap.value = next
+}
+
+watch(
+  selectedTypeStructure,
+  (structure) => {
+    const pieceIds = getStructurePieces(structure)
+      .map((piece: any) => piece?.typePieceId)
+      .filter((id: any): id is string => typeof id === 'string' && id.trim().length > 0)
+    if (pieceIds.length) {
+      fetchPieceTypeNames(Array.from(new Set(pieceIds))).catch(() => {})
+    }
+
+    const productIds = getStructureProducts(structure)
+      .map((product: any) => product?.typeProductId)
+      .filter((id: any): id is string => typeof id === 'string' && id.trim().length > 0)
+    if (productIds.length) {
+      fetchProductTypeNames(Array.from(new Set(productIds))).catch(() => {})
+    }
+  },
+  { immediate: true },
+)
+
 const resolveSubcomponentLabel = (node: Record<string, any>) => {
   const parts: string[] = []
   if (node.alias) {
@@ -1059,6 +1257,104 @@ const resolveSubcomponentLabel = (node: Record<string, any>) => {
   return parts.length ? parts.join(' • ') : 'Sous-composant'
 }
 
+type SelectionEntry = {
+  id: string
+  path: string
+  requirementLabel: string
+  resolvedName: string
+}
+
+const collectStructureSelections = (root: any): {
+  pieces: SelectionEntry[]
+  products: SelectionEntry[]
+  components: SelectionEntry[]
+} => {
+  const piecesSelected: SelectionEntry[] = []
+  const productsSelected: SelectionEntry[] = []
+  const componentsSelected: SelectionEntry[] = []
+
+  if (!root || typeof root !== 'object') {
+    return { pieces: piecesSelected, products: productsSelected, components: componentsSelected }
+  }
+
+  const visitNode = (node: any, fallbackPath = 'racine') => {
+    if (!node || typeof node !== 'object') {
+      return
+    }
+
+    const nodePath = isNonEmptyString(node.path) ? node.path : fallbackPath
+
+    const nodePieces = Array.isArray(node.pieces) ? node.pieces : []
+    nodePieces.forEach((entry: any, index: number) => {
+      const selectedId = entry?.selectedPieceId
+      if (!isNonEmptyString(selectedId)) {
+        return
+      }
+      const definition = entry?.definition ?? entry
+      const catalogPiece = pieceCatalogMap.value.get(selectedId)
+      piecesSelected.push({
+        id: selectedId,
+        path: isNonEmptyString(entry?.path) ? entry.path : `${nodePath}:piece-${index + 1}`,
+        requirementLabel: resolvePieceLabel(definition),
+        resolvedName: catalogPiece?.name || selectedId,
+      })
+    })
+
+    const nodeProducts = Array.isArray(node.products) ? node.products : []
+    nodeProducts.forEach((entry: any, index: number) => {
+      const selectedId = entry?.selectedProductId
+      if (!isNonEmptyString(selectedId)) {
+        return
+      }
+      const definition = entry?.definition ?? entry
+      const catalogProduct = productCatalogMap.value.get(selectedId)
+      productsSelected.push({
+        id: selectedId,
+        path: isNonEmptyString(entry?.path) ? entry.path : `${nodePath}:product-${index + 1}`,
+        requirementLabel: resolveProductLabel(definition),
+        resolvedName: catalogProduct?.name || selectedId,
+      })
+    })
+
+    const nodeChildren = Array.isArray(node.subcomponents)
+      ? node.subcomponents
+      : Array.isArray(node.subComponents)
+        ? node.subComponents
+        : []
+
+    nodeChildren.forEach((child: any, index: number) => {
+      const selectedId = child?.selectedComponentId
+      if (isNonEmptyString(selectedId)) {
+        const definition = child?.definition ?? child
+        const catalogComponent = componentCatalogMap.value.get(selectedId)
+        componentsSelected.push({
+          id: selectedId,
+          path: isNonEmptyString(child?.path) ? child.path : `${nodePath}:subcomponent-${index + 1}`,
+          requirementLabel: resolveSubcomponentLabel(definition),
+          resolvedName: catalogComponent?.name || selectedId,
+        })
+      }
+
+      visitNode(child, isNonEmptyString(child?.path) ? child.path : `${nodePath}:subcomponent-${index + 1}`)
+    })
+  }
+
+  visitNode(root, isNonEmptyString(root?.path) ? root.path : 'racine')
+
+  return { pieces: piecesSelected, products: productsSelected, components: componentsSelected }
+}
+
+const structureSelections = computed(() => {
+  const selections = collectStructureSelections(component.value?.structure)
+  const total =
+    selections.pieces.length + selections.products.length + selections.components.length
+  return {
+    ...selections,
+    total,
+    hasAny: total > 0,
+  }
+})
+
 const buildCustomFieldMetadata = (field: CustomFieldInput) => ({
   customFieldName: field.name,
   customFieldType: field.type,
@@ -1158,7 +1454,15 @@ const saveCustomFieldValues = async (updatedComponent: any) => {
 }
 
 onMounted(async () => {
-  await Promise.allSettled([loadComponentTypes(), fetchComponent()])
+  await Promise.allSettled([
+    loadComponentTypes(),
+    loadPieceTypes(),
+    loadProductTypes(),
+    loadPieces({ itemsPerPage: 500 }),
+    loadProducts({ itemsPerPage: 500, force: true }),
+    loadComposants({ itemsPerPage: 500 }),
+    fetchComponent(),
+  ])
   loading.value = false
   if (component.value?.id) {
     await refreshDocuments()

app/pages/component/create.vue

@@ -355,6 +355,7 @@ import { usePieces } from '~/composables/usePieces'
 import { usePieceTypes } from '~/composables/usePieceTypes'
 import { useProducts } from '~/composables/useProducts'
 import { useProductTypes } from '~/composables/useProductTypes'
+import { useApi } from '~/composables/useApi'
 import { useToast } from '~/composables/useToast'
 import { useCustomFields } from '~/composables/useCustomFields'
 import { useDocuments } from '~/composables/useDocuments'
@@ -375,6 +376,7 @@ interface ComponentCatalogType extends ModelType {
 
 const route = useRoute()
 const router = useRouter()
+const { get } = useApi()
 
 const { componentTypes, loadComponentTypes, loadingComponentTypes } = useComponentTypes()
 const { pieceTypes, loadPieceTypes } = usePieceTypes()
@@ -418,13 +420,15 @@ const structureDataLoading = computed(
   () => piecesLoading.value || componentsLoading.value || productsLoading.value,
 )
 
-const pieceTypeLabelMap = computed(() =>
-  Object.fromEntries(
+const fetchedPieceTypeMap = ref<Record<string, string>>({})
+const pieceTypeLabelMap = computed(() => ({
+  ...Object.fromEntries(
     (pieceTypes.value || [])
       .filter((type: any) => type?.id)
       .map((type: any) => [type.id, type.name || type.code || '']),
   ),
-)
+  ...fetchedPieceTypeMap.value,
+}))
 const productTypeLabelMap = computed(() =>
   Object.fromEntries(
     (productTypes.value || [])
@@ -804,6 +808,8 @@ const resolvePieceLabel = (piece: Record<string, any>) => {
     parts.push(piece.typePiece.name)
   } else if (piece.typePieceLabel) {
     parts.push(piece.typePieceLabel)
+  } else if (piece.typePieceId && pieceTypeLabelMap.value[piece.typePieceId]) {
+    parts.push(pieceTypeLabelMap.value[piece.typePieceId])
   } else if (piece.typePiece?.code) {
     parts.push(`Famille ${piece.typePiece.code}`)
   } else if (piece.familyCode) {
@@ -814,6 +820,42 @@ const resolvePieceLabel = (piece: Record<string, any>) => {
   return parts.length ? parts.join(' • ') : 'Pièce'
 }
 
+const fetchPieceTypeNames = async (ids: string[]) => {
+  const missing = ids.filter((id) => id && !pieceTypeLabelMap.value[id])
+  if (!missing.length) {
+    return
+  }
+  const results = await Promise.allSettled(
+    missing.map((id) => get(`/model_types/${id}`)),
+  )
+  const next = { ...fetchedPieceTypeMap.value }
+  results.forEach((result, index) => {
+    if (result.status !== 'fulfilled') {
+      return
+    }
+    const data = result.value?.data
+    const name = data?.name || data?.code
+    if (name) {
+      next[missing[index]] = name
+    }
+  })
+  fetchedPieceTypeMap.value = next
+}
+
+watch(
+  selectedTypeStructure,
+  (structure) => {
+    const ids = getStructurePieces(structure)
+      .map((piece: any) => piece?.typePieceId)
+      .filter((id: any): id is string => typeof id === 'string' && id.trim().length > 0)
+    if (!ids.length) {
+      return
+    }
+    fetchPieceTypeNames(Array.from(new Set(ids))).catch(() => {})
+  },
+  { immediate: true },
+)
+
 const resolveProductLabel = (product: Record<string, any>) => {
   const parts: string[] = []
   if (product.role) {

app/pages/index.vue

@@ -472,10 +472,11 @@ import IconLucideChevronDown from '~icons/lucide/chevron-down'
 import IconLucideSettings2 from '~icons/lucide/settings-2'
 import IconLucideTag from '~icons/lucide/tag'
 import { formatPhone } from '~/utils/formatters/phone'
+import { extractRelationId } from '~/shared/apiRelations'
 
 const { sites, loading, loadSites, createSite } = useSites()
 const { machineTypes, loadMachineTypes } = useMachineTypesApi()
-const { createMachineFromType, deleteMachine } = useMachines()
+const { machines, loadMachines, createMachineFromType, deleteMachine } = useMachines()
 
 // Data
 const showAddSiteModal = ref(false)
@@ -517,8 +518,50 @@ const categories = computed(() => {
   return Array.from(cats)
 })
 
+const machinesWithType = computed(() => {
+  return machines.value.map((machine) => {
+    const resolvedTypeMachineId = machine.typeMachineId || extractRelationId(machine.typeMachine)
+    const resolvedTypeMachine = resolvedTypeMachineId
+      ? machineTypes.value.find(type => type.id === resolvedTypeMachineId) || null
+      : null
+
+    return {
+      ...machine,
+      typeMachineId: resolvedTypeMachineId || machine.typeMachineId,
+      typeMachine:
+        machine.typeMachine && typeof machine.typeMachine === 'object'
+          ? machine.typeMachine
+          : resolvedTypeMachine
+    }
+  })
+})
+
+const machinesBySiteId = computed(() => {
+  const map = new Map()
+
+  machinesWithType.value.forEach((machine) => {
+    const siteId = machine.siteId || extractRelationId(machine.site)
+    if (!siteId) { return }
+
+    if (!map.has(siteId)) {
+      map.set(siteId, [])
+    }
+
+    map.get(siteId).push(machine)
+  })
+
+  return map
+})
+
+const sitesWithMachines = computed(() => {
+  return sites.value.map((site) => ({
+    ...site,
+    machines: machinesBySiteId.value.get(site.id) || []
+  }))
+})
+
 const totalMachines = computed(() => {
-  return sites.value.reduce((total, site) => {
+  return sitesWithMachines.value.reduce((total, site) => {
     return total + (site.machines?.length || 0)
   }, 0)
 })
@@ -532,7 +575,7 @@ const formatPhoneDisplay = (value) => {
 }
 
 const filteredSites = computed(() => {
-  let filtered = sites.value
+  let filtered = sitesWithMachines.value
 
   // Filtrer par terme de recherche
   if (searchTerm.value) {
@@ -551,9 +594,11 @@ const filteredSites = computed(() => {
       })
 
       const machineMatches = site.machines?.some(
-        machine =>
-          machine.name.toLowerCase().includes(lowerTerm) ||
-          machine.reference?.toLowerCase().includes(lowerTerm)
+        machine => {
+          const name = (machine.name || '').toLowerCase()
+          const reference = (machine.reference || '').toLowerCase()
+          return name.includes(lowerTerm) || reference.includes(lowerTerm)
+        }
       )
 
       return siteMatches || machineMatches
@@ -637,6 +682,7 @@ const handleCreateMachine = async () => {
     newMachine.typeMachineId = ''
     newMachine.reference = ''
     showAddMachineModal.value = false
+    await loadMachines()
   }
 }
 
@@ -671,6 +717,7 @@ const confirmDeleteMachine = async (machine) => {
       const result = await deleteMachine(machine.id)
       if (result.success) {
         showSuccess(`Machine "${machine.name}" supprimée avec succès`)
+        await loadMachines()
       } else {
         showError(`Erreur lors de la suppression: ${result.error}`)
       }
@@ -698,6 +745,6 @@ const getCategoryBadgeClass = (category) => {
 
 // Lifecycle
 onMounted(async () => {
-  await Promise.all([loadSites(), loadMachineTypes()])
+  await Promise.all([loadSites(), loadMachineTypes(), loadMachines()])
 })
 </script>

app/pages/machines/new.vue

@@ -273,18 +273,19 @@
                         </label>
                         <SearchSelect
                           :model-value="entry.pieceId || ''"
-                          :options="getPieceOptions(requirement, entry)"
-                          :loading="piecesLoading"
+                          :options="getPieceOptions(requirement, entry, entryIndex)"
+                          :loading="piecesLoading || pieceLoadingByKey[getPieceKey(requirement, entryIndex)]"
                           size="sm"
                           placeholder="Rechercher une pièce…"
                           empty-text="Aucune pièce disponible"
                           :option-label="pieceOptionLabel"
                           :option-description="pieceOptionDescription"
+                          @search="(term) => fetchPieceOptions(requirement, entryIndex, term)"
                           @update:modelValue="setPieceRequirementPiece(requirement, entryIndex, $event || '')"
                         />
                       </div>
                       <p
-                        v-if="getPieceOptions(requirement, entry).length === 0"
+                        v-if="getPieceOptions(requirement, entry, entryIndex).length === 0"
                         class="text-xs text-error"
                       >
                         Aucune pièce disponible pour cette famille.
@@ -743,6 +744,7 @@ import { useMachineTypesApi } from '~/composables/useMachineTypesApi'
 import { useComposants } from '~/composables/useComposants'
 import { usePieces } from '~/composables/usePieces'
 import { useProducts } from '~/composables/useProducts'
+import { useApi } from '~/composables/useApi'
 import { useToast } from '~/composables/useToast'
 import { sanitizeDefinitionOverrides } from '~/shared/modelUtils'
 import SearchSelect from '~/components/common/SearchSelect.vue'
@@ -754,12 +756,13 @@ import IconLucideAlertTriangle from '~icons/lucide/alert-triangle'
 import IconLucideCheckCircle2 from '~icons/lucide/check-circle-2'
 import IconLucideCircle from '~icons/lucide/circle'
 
-const { createMachine, createMachineFromType } = useMachines()
+const { createMachine, createMachineFromType, reconfigureSkeleton } = useMachines()
 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 { get } = useApi()
 const toast = useToast()
 
 const submitting = ref(false)
@@ -842,6 +845,85 @@ const productById = computed(() => {
   return map
 })
 
+const pieceOptionsByKey = ref({})
+const pieceLoadingByKey = ref({})
+
+const extractCollection = (payload) => {
+  if (Array.isArray(payload)) {
+    return payload
+  }
+  if (Array.isArray(payload?.member)) {
+    return payload.member
+  }
+  if (Array.isArray(payload?.['hydra:member'])) {
+    return payload['hydra:member']
+  }
+  if (Array.isArray(payload?.data)) {
+    return payload.data
+  }
+  return []
+}
+
+const getPieceKey = (requirement, entryIndex) => `${requirement?.id || 'req'}:${entryIndex}`
+
+const findPieceInCachedOptions = (id) => {
+  if (!id) {
+    return null
+  }
+  const buckets = Object.values(pieceOptionsByKey.value || {})
+  for (const bucket of buckets) {
+    if (!Array.isArray(bucket)) {
+      continue
+    }
+    const found = bucket.find((piece) => piece?.id === id)
+    if (found) {
+      return found
+    }
+  }
+  return null
+}
+
+const cachePieceIfMissing = (piece) => {
+  if (!piece?.id) {
+    return
+  }
+  if (pieceById.value.has(piece.id)) {
+    return
+  }
+  const current = Array.isArray(pieces.value) ? pieces.value : []
+  pieces.value = [...current, piece]
+}
+
+const fetchPieceOptions = async (requirement, entryIndex, term = '') => {
+  const key = getPieceKey(requirement, entryIndex)
+  if (pieceLoadingByKey.value[key]) {
+    return
+  }
+
+  const requirementTypeId = requirement?.typePieceId || requirement?.typePiece?.id || null
+  const params = new URLSearchParams()
+  params.set('itemsPerPage', '50')
+  if (term && term.trim()) {
+    params.set('name', term.trim())
+  }
+  if (requirementTypeId) {
+    params.set('typePiece', `/api/model_types/${requirementTypeId}`)
+  }
+
+  pieceLoadingByKey.value = { ...pieceLoadingByKey.value, [key]: true }
+  try {
+    const result = await get(`/pieces?${params.toString()}`)
+    if (result.success) {
+      pieceOptionsByKey.value = {
+        ...pieceOptionsByKey.value,
+        [key]: extractCollection(result.data)
+      }
+    }
+  } finally {
+    pieceLoadingByKey.value = { ...pieceLoadingByKey.value, [key]: false }
+  }
+}
+
 const isPlainObject = value => value !== null && typeof value === 'object' && !Array.isArray(value)
 
 const toTrimmedString = (value) => {
@@ -1077,7 +1159,12 @@ const getComponentOptions = (requirement, currentEntry) => {
   })
 }
 
-const getPieceOptions = (requirement, currentEntry) => {
+const getPieceOptions = (requirement, currentEntry, entryIndex) => {
+  const key = getPieceKey(requirement, entryIndex)
+  const cached = pieceOptionsByKey.value[key]
+  if (cached) {
+    return cached
+  }
   const requirementTypeId = requirement?.typePieceId || requirement?.typePiece?.id || null
   const usedIds = new Set(
     selectedPieceIds.value.filter((id) => id && (!currentEntry || id !== currentEntry.pieceId)),
@@ -1241,8 +1328,11 @@ const setPieceRequirementPiece = (requirement, index, pieceId) => {
   if (!entry) return
   entry.pieceId = pieceId || null
   if (pieceId) {
-    const piece = findPieceById(pieceId)
+    const piece = findPieceById(pieceId) || findPieceInCachedOptions(pieceId)
     entry.typePieceId = piece?.typePieceId || requirement?.typePieceId || null
+    if (piece) {
+      cachePieceIfMissing(piece)
+    }
   } else {
     entry.typePieceId = requirement?.typePieceId || null
   }
@@ -1259,7 +1349,7 @@ const findPieceById = (id) => {
   if (!id) {
     return null
   }
-  return pieceById.value.get(id) || null
+  return pieceById.value.get(id) || findPieceInCachedOptions(id) || null
 }
 
 const findProductById = (id) => {
@@ -1519,6 +1609,7 @@ const addPieceSelectionEntry = (requirement) => {
     ...entries,
     createPieceSelectionEntry(requirement),
   ]
+  fetchPieceOptions(requirement, entries.length).catch(() => {})
 }
 
 const removePieceSelectionEntry = (requirementId, index) => {
@@ -2096,6 +2187,9 @@ const initializeRequirementSelections = (type) => {
     const initialCount = Math.max(min, requirement.required ? 1 : 0)
     if (initialCount > 0) {
       pieceRequirementSelections[requirement.id] = Array.from({ length: initialCount }, () => createPieceSelectionEntry(requirement))
+      pieceRequirementSelections[requirement.id].forEach((_, index) => {
+        fetchPieceOptions(requirement, index).catch(() => {})
+      })
     } else {
       pieceRequirementSelections[requirement.id] = []
     }
@@ -2158,22 +2252,22 @@ const finalizeMachineCreation = async () => {
       productLinks = validationResult.productLinks
     }
 
-    const payload = {
-      ...baseMachineData,
-      ...(hasRequirements
-        ? {
-            componentLinks,
-            pieceLinks,
-            productLinks
-          }
-        : {})
-    }
-
     const result = hasRequirements
-      ? await createMachine(payload)
+      ? await createMachine(baseMachineData)
       : await createMachineFromType(baseMachineData, type)
 
     if (result.success) {
+      if (hasRequirements && result.data?.id) {
+        const skeletonResult = await reconfigureSkeleton(result.data.id, {
+          componentLinks,
+          pieceLinks,
+          productLinks,
+        })
+        if (!skeletonResult.success) {
+          toast.showError(skeletonResult.error || 'Impossible d\'enregistrer les pièces/composants')
+          return
+        }
+      }
       newMachine.name = ''
       newMachine.siteId = ''
       newMachine.typeMachineId = ''

app/pages/pieces/[id]/edit.vue

@@ -146,12 +146,26 @@
               <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 class="grid grid-cols-1 gap-3 md:grid-cols-2">
+            <div
+              v-for="entry in productRequirementEntries"
+              :key="entry.key"
+              class="form-control"
+            >
+              <label class="label">
+                <span class="label-text text-xs font-medium">
+                  {{ entry.label }}
+                </span>
+              </label>
+              <ProductSelect
+                :model-value="productSelections[entry.index] || null"
+                :disabled="saving"
+                :type-product-id="entry.typeProductId"
+                helper-text="Un produit valide est requis pour cette pièce."
+                @update:model-value="(value) => setProductSelection(entry.index, value)"
+              />
+            </div>
+          </div>
         </div>
 
         <div v-if="selectedType || resolvedStructure" class="space-y-3 rounded-lg border border-base-200 bg-base-200/40 p-4">
@@ -448,8 +462,8 @@ const editionForm = reactive({
   reference: '' as string,
   constructeurIds: [] as string[],
   prix: '' as string,
-  productId: null as string | null,
 })
+const productSelections = ref<(string | null)[]>([])
 
 const customFieldInputs = ref<CustomFieldInput[]>([])
 const documentIcon = (doc: any) =>
@@ -592,14 +606,18 @@ const selectedType = computed(() => {
   return pieceTypeList.value.find((type) => type.id === selectedTypeId.value) ?? null
 })
 
+const getStructureProducts = (structure: PieceModelStructure | null) =>
+  Array.isArray(structure?.products) ? structure.products : []
+
+const getStructureCustomFields = (structure: PieceModelStructure | null) =>
+  Array.isArray(structure?.customFields) ? structure.customFields : []
+
 const structureProducts = computed(() =>
   getStructureProducts(resolvedStructure.value),
 )
 
 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}`
@@ -628,6 +646,50 @@ const productRequirementDescriptions = computed(() =>
   ),
 )
 
+const ensureProductSelections = (count: number) => {
+  const next = Array.from({ length: count }, (_, index) => productSelections.value[index] ?? null)
+  productSelections.value = next
+}
+
+let pendingProductIds: string[] = []
+
+const productRequirementEntries = computed(() =>
+  structureProducts.value.map((requirement, index) => ({
+    index,
+    key: `piece-product-requirement-${index}-${requirement?.typeProductId || 'any'}`,
+    label: describeProductRequirement(requirement, index),
+    typeProductId: requirement?.typeProductId ? String(requirement.typeProductId) : null,
+  })),
+)
+
+const productSelectionsFilled = computed(() =>
+  !requiresProductSelection.value ||
+  productRequirementEntries.value.every((entry) => {
+    const value = productSelections.value[entry.index]
+    return typeof value === 'string' && value.trim().length > 0
+  }),
+)
+
+const setProductSelection = (index: number, value: string | null) => {
+  const normalized = typeof value === 'string' ? value : null
+  const next = [...productSelections.value]
+  next[index] = normalized
+  productSelections.value = next
+}
+
+watch(structureProducts, (products) => {
+  ensureProductSelections(products.length)
+  if (!pendingProductIds.length || products.length === 0) {
+    return
+  }
+  const next = Array.from(
+    { length: products.length },
+    (_, index) => pendingProductIds[index] ?? null,
+  )
+  productSelections.value = next
+  pendingProductIds = []
+})
+
 const requiredCustomFieldsFilled = computed(() =>
   customFieldInputs.value.every((field) => {
     if (!field.required) {
@@ -645,7 +707,7 @@ const canSubmit = computed(() =>
     piece.value &&
     editionForm.name &&
     requiredCustomFieldsFilled.value &&
-    (!requiresProductSelection.value || editionForm.productId) &&
+    productSelectionsFilled.value &&
     !saving.value,
   ),
 )
@@ -730,11 +792,26 @@ watch(
       currentPiece.constructeur ? [currentPiece.constructeur] : [],
     )
     editionForm.prix = currentPiece.prix !== null && currentPiece.prix !== undefined ? String(currentPiece.prix) : ''
-    editionForm.productId = currentPiece.product?.id || currentPiece.productId || null
     if (editionForm.constructeurIds.length) {
       void ensureConstructeurs(editionForm.constructeurIds)
     }
 
+    const existingProductIds = Array.isArray(currentPiece.productIds) && currentPiece.productIds.length
+      ? currentPiece.productIds.map((id: unknown) => String(id))
+      : currentPiece.product?.id || currentPiece.productId
+        ? [String(currentPiece.product?.id || currentPiece.productId)]
+        : []
+    pendingProductIds = existingProductIds
+    ensureProductSelections(structureProducts.value.length)
+    if (existingProductIds.length && structureProducts.value.length) {
+      const next = Array.from(
+        { length: structureProducts.value.length },
+        (_, index) => existingProductIds[index] ?? null,
+      )
+      productSelections.value = next
+      pendingProductIds = []
+    }
+
     refreshCustomFieldInputs(currentType?.structure ?? null, currentPiece.customFieldValues)
 
     initialized = true
@@ -755,6 +832,7 @@ watch(resolvedStructure, (currentStructure) => {
   if (!piece.value) {
     return
   }
+  ensureProductSelections(structureProducts.value.length)
   refreshCustomFieldInputs(currentStructure, piece.value.customFieldValues)
 })
 
@@ -763,7 +841,7 @@ const submitEdition = async () => {
     return
   }
 
-  if (requiresProductSelection.value && !editionForm.productId) {
+  if (!productSelectionsFilled.value) {
     toast.showError('Sélectionnez un produit conforme au squelette.')
     return
   }
@@ -784,11 +862,13 @@ const submitEdition = async () => {
   const reference = editionForm.reference.trim()
   payload.reference = reference ? reference : null
 
-  const selectedProductId =
-    typeof editionForm.productId === 'string'
-      ? editionForm.productId.trim()
-      : ''
-  payload.productId = selectedProductId || null
+  const normalizedProductIds = productRequirementEntries.value
+    .map((entry) => productSelections.value[entry.index])
+    .filter((value): value is string => typeof value === 'string' && value.trim().length > 0)
+    .map((value) => value.trim())
+
+  payload.productIds = normalizedProductIds
+  payload.productId = normalizedProductIds[0] || null
 
   if (rawPrice) {
     const parsed = Number(rawPrice)
@@ -981,12 +1061,6 @@ const formatDefaultValue = (type: string, defaultValue: any): string => {
   return String(defaultValue)
 }
 
-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,
   customFieldType: field.type,

app/pages/pieces/create.vue

@@ -118,12 +118,26 @@
               <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 class="grid grid-cols-1 gap-3 md:grid-cols-2">
+            <div
+              v-for="entry in productRequirementEntries"
+              :key="entry.key"
+              class="form-control"
+            >
+              <label class="label">
+                <span class="label-text text-xs font-medium">
+                  {{ entry.label }}
+                </span>
+              </label>
+              <ProductSelect
+                :model-value="productSelections[entry.index] || null"
+                :disabled="submitting || !selectedType"
+                :type-product-id="entry.typeProductId"
+                helper-text="Un produit est requis pour cette pièce."
+                @update:model-value="(value) => setProductSelection(entry.index, value)"
+              />
+            </div>
+          </div>
         </div>
 
         <div v-if="selectedType" class="space-y-3 rounded-lg border border-base-200 bg-base-200/40 p-4">
@@ -317,8 +331,8 @@ const creationForm = reactive({
   reference: '' as string,
   constructeurIds: [] as string[],
   prix: '' as string,
-  productId: null as string | null,
 })
+const productSelections = ref<(string | null)[]>([])
 
 const lastSuggestedName = ref('')
 const customFieldInputs = ref<CustomFieldInput[]>([])
@@ -364,14 +378,18 @@ const selectedType = computed(() => {
   return pieceTypeList.value.find((type) => type.id === selectedTypeId.value) ?? null
 })
 
+const getStructureCustomFields = (structure: PieceModelStructure | null) =>
+  Array.isArray(structure?.customFields) ? structure.customFields : []
+
+const getStructureProducts = (structure: PieceModelStructure | null) =>
+  Array.isArray(structure?.products) ? structure.products : []
+
 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}`
@@ -400,6 +418,39 @@ const productRequirementDescriptions = computed(() =>
   ),
 )
 
+const ensureProductSelections = (count: number) => {
+  const next = Array.from({ length: count }, (_, index) => productSelections.value[index] ?? null)
+  productSelections.value = next
+}
+
+const productRequirementEntries = computed(() =>
+  structureProducts.value.map((requirement, index) => ({
+    index,
+    key: `piece-create-product-requirement-${index}-${requirement?.typeProductId || 'any'}`,
+    label: describeProductRequirement(requirement, index),
+    typeProductId: requirement?.typeProductId ? String(requirement.typeProductId) : null,
+  })),
+)
+
+const productSelectionsFilled = computed(() =>
+  !requiresProductSelection.value ||
+  productRequirementEntries.value.every((entry) => {
+    const value = productSelections.value[entry.index]
+    return typeof value === 'string' && value.trim().length > 0
+  }),
+)
+
+const setProductSelection = (index: number, value: string | null) => {
+  const normalized = typeof value === 'string' ? value : null
+  const next = [...productSelections.value]
+  next[index] = normalized
+  productSelections.value = next
+}
+
+watch(structureProducts, (products) => {
+  ensureProductSelections(products.length)
+})
+
 watch(selectedType, (type) => {
   if (!type) {
     clearCreationForm()
@@ -411,7 +462,7 @@ watch(selectedType, (type) => {
   }
   lastSuggestedName.value = creationForm.name
   customFieldInputs.value = normalizeCustomFieldInputs(type.structure)
-  creationForm.productId = null
+  productSelections.value = Array.from({ length: structureProducts.value.length }, () => null)
 })
 
 const requiredCustomFieldsFilled = computed(() =>
@@ -431,7 +482,7 @@ const canSubmit = computed(() =>
     selectedType.value &&
     creationForm.name &&
     requiredCustomFieldsFilled.value &&
-    (!requiresProductSelection.value || creationForm.productId) &&
+    productSelectionsFilled.value &&
     !submitting.value,
   ),
 )
@@ -449,18 +500,12 @@ const toFieldString = (value: unknown): string => {
   return ''
 }
 
-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
+  productSelections.value = []
   lastSuggestedName.value = ''
 }
 
@@ -470,7 +515,7 @@ const submitCreation = async () => {
     return
   }
 
-  if (requiresProductSelection.value && !creationForm.productId) {
+  if (!productSelectionsFilled.value) {
     toast.showError('Sélectionnez un produit conforme au squelette.')
     return
   }
@@ -487,12 +532,13 @@ const submitCreation = async () => {
 
   payload.constructeurIds = uniqueConstructeurIds(creationForm.constructeurIds)
 
-  const selectedProductId =
-    typeof creationForm.productId === 'string'
-      ? creationForm.productId.trim()
-      : ''
-  if (selectedProductId) {
-    payload.productId = selectedProductId
+  const normalizedProductIds = productRequirementEntries.value
+    .map((entry) => productSelections.value[entry.index])
+    .filter((value): value is string => typeof value === 'string' && value.trim().length > 0)
+    .map((value) => value.trim())
+  if (normalizedProductIds.length) {
+    payload.productIds = normalizedProductIds
+    payload.productId = normalizedProductIds[0]
   }
 
   const rawPrice = typeof creationForm.prix === 'string'

app/services/modelTypes.ts

@@ -128,7 +128,7 @@ export async function listModelTypes(params: ModelTypeListParams = {}, opts: { s
   const query: Record<string, string | number> = {};
 
   if (params.q) {
-    query.q = params.q;
+    query.name = params.q;
   }
   if (params.category) {
     query.category = params.category;

nuxt.config.ts

@@ -1,4 +1,21 @@
 import tailwindcss from '@tailwindcss/vite'
+import { readFileSync } from 'node:fs'
+import { dirname, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+// Lire la version depuis le fichier VERSION à la racine du projet parent
+const getAppVersion = (): string => {
+  try {
+    const __dirname = dirname(fileURLToPath(import.meta.url))
+    const versionPath = resolve(__dirname, '..', 'VERSION')
+    return readFileSync(versionPath, 'utf-8').trim()
+  } catch {
+    return '0.0.0'
+  }
+}
+
+const appVersion = process.env.NUXT_PUBLIC_APP_VERSION || getAppVersion()
+
 export default defineNuxtConfig({
   compatibilityDate: '2025-07-15',
   ssr: false, // Désactive le SSR pour un mode SPA pur (Client-Side Rendering uniquement)
@@ -27,7 +44,7 @@ export default defineNuxtConfig({
       apiBaseUrl: process.env.NUXT_PUBLIC_API_BASE_URL || 'http://localhost:8081/api',
       appUrl: process.env.NUXT_PUBLIC_APP_URL || 'http://localhost:3001',
       appName: process.env.NUXT_PUBLIC_APP_NAME || 'Inventory Management System',
-      appVersion: process.env.NUXT_PUBLIC_APP_VERSION || '0.1.0',
+      appVersion: appVersion,
       apiTimeout: process.env.NUXT_PUBLIC_API_TIMEOUT || '30000',
       requestTimeout: process.env.NUXT_PUBLIC_REQUEST_TIMEOUT || '10000',
       enableDebug: process.env.NUXT_PUBLIC_ENABLE_DEBUG || 'true',