WIP

app/components/PieceItem.vue

@@ -50,6 +50,9 @@
                 class="badge badge-outline badge-sm"
               >
                 {{ constructeur.name }}
+                <span v-if="supplierReferenceMap.get(constructeur.id)" class="text-xs opacity-60 ml-0.5">
+                  ({{ supplierReferenceMap.get(constructeur.id) }})
+                </span>
               </span>
             </template>
             <span v-if="pieceData.prix" class="badge badge-primary badge-sm">{{ pieceData.prix }}€</span>
@@ -122,6 +125,9 @@
             >
               <span class="font-medium">
                 {{ constructeur.name }}
+                <span v-if="supplierReferenceMap.get(constructeur.id)" class="text-sm font-normal text-base-content/60">
+                  — Réf. {{ supplierReferenceMap.get(constructeur.id) }}
+                </span>
               </span>
               <span
                 v-if="formatConstructeurContact(constructeur)"
@@ -283,6 +289,7 @@ import {
   formatConstructeurContact as formatConstructeurContactSummary,
   resolveConstructeurs,
   uniqueConstructeurIds,
+  parseConstructeurLinksFromApi,
 } from '~/shared/constructeurUtils'
 import {
   resolveFieldId,
@@ -393,23 +400,36 @@ const toggleCollapse = () => {
 // --- Constructeurs ---
 const { constructeurs } = useConstructeurs()
 
-const pieceConstructeurIds = computed(() =>
-  uniqueConstructeurIds(
-    props.piece,
+const pieceConstructeurLinks = computed(() =>
+  parseConstructeurLinksFromApi(
     Array.isArray(props.piece.constructeurs) ? props.piece.constructeurs : [],
-    props.piece.constructeur ? [props.piece.constructeur] : [],
   ),
 )
 
-const pieceConstructeursDisplay = computed(() =>
-  resolveConstructeurs(
-    pieceConstructeurIds.value,
-    Array.isArray(props.piece.constructeurs) ? props.piece.constructeurs : [],
-    props.piece.constructeur ? [props.piece.constructeur] : [],
-    constructeurs.value,
-  ),
+const supplierReferenceMap = computed(() => {
+  const map = new Map()
+  pieceConstructeurLinks.value.forEach(l => {
+    if (l.supplierReference) map.set(l.constructeurId, l.supplierReference)
+  })
+  return map
+})
+
+const pieceConstructeurIds = computed(() =>
+  pieceConstructeurLinks.value.map(l => l.constructeurId).filter(Boolean),
 )
 
+const pieceConstructeursDisplay = computed(() => {
+  // Extract nested constructeur objects from link entries
+  const linkConstructeurs = pieceConstructeurLinks.value
+    .filter(l => l.constructeur && l.constructeur.id)
+    .map(l => l.constructeur)
+  return resolveConstructeurs(
+    pieceConstructeurIds.value,
+    linkConstructeurs,
+    constructeurs.value,
+  )
+})
+
 const formatConstructeurContact = (constructeur) =>
   formatConstructeurContactSummary(constructeur)