WIP

app/components/ComponentItem.vue

@@ -35,6 +35,7 @@
             class="text-xs text-base-content/50"
           >
             {{ constructeur.name }}
+            <span v-if="supplierReferenceMap.get(constructeur.id)" class="opacity-70">({{ supplierReferenceMap.get(constructeur.id) }})</span>
           </span>
           <span v-if="displayProductName" class="badge badge-info badge-xs">
             {{ displayProductName }}
@@ -102,6 +103,9 @@
               class="text-base-content"
             >
               {{ constructeur.name }}
+              <span v-if="supplierReferenceMap.get(constructeur.id)" class="text-sm text-base-content/60">
+                — Réf. {{ supplierReferenceMap.get(constructeur.id) }}
+              </span>
               <span v-if="formatConstructeurContact(constructeur)" class="text-xs text-base-content/50 block">
                 {{ formatConstructeurContact(constructeur) }}
               </span>
@@ -292,6 +296,7 @@ import {
   formatConstructeurContact as formatConstructeurContactSummary,
   resolveConstructeurs,
   uniqueConstructeurIds,
+  parseConstructeurLinksFromApi,
 } from '~/shared/constructeurUtils'
 import {
   formatSize,
@@ -391,23 +396,36 @@ const structurePieces = computed(() => allPieces.value.filter((p) => p._structur
 // --- Constructeurs ---
 const { constructeurs } = useConstructeurs()
 
-const componentConstructeurIds = computed(() =>
-  uniqueConstructeurIds(
-    props.component,
+const componentConstructeurLinks = computed(() =>
+  parseConstructeurLinksFromApi(
     Array.isArray(props.component.constructeurs) ? props.component.constructeurs : [],
-    props.component.constructeur ? [props.component.constructeur] : [],
   ),
 )
 
-const componentConstructeursDisplay = computed(() =>
-  resolveConstructeurs(
-    componentConstructeurIds.value,
-    Array.isArray(props.component.constructeurs) ? props.component.constructeurs : [],
-    props.component.constructeur ? [props.component.constructeur] : [],
-    constructeurs.value,
-  ),
+const supplierReferenceMap = computed(() => {
+  const map = new Map()
+  componentConstructeurLinks.value.forEach(l => {
+    if (l.supplierReference) map.set(l.constructeurId, l.supplierReference)
+  })
+  return map
+})
+
+const componentConstructeurIds = computed(() =>
+  componentConstructeurLinks.value.map(l => l.constructeurId).filter(Boolean),
 )
 
+const componentConstructeursDisplay = computed(() => {
+  // Extract nested constructeur objects from link entries
+  const linkConstructeurs = componentConstructeurLinks.value
+    .filter(l => l.constructeur && l.constructeur.id)
+    .map(l => l.constructeur)
+  return resolveConstructeurs(
+    componentConstructeurIds.value,
+    linkConstructeurs,
+    constructeurs.value,
+  )
+})
+
 const formatConstructeurContact = (constructeur) =>
   formatConstructeurContactSummary(constructeur)