Fix fournisseur handling across catalog flows

app/components/ComponentItem.vue

@@ -109,6 +109,7 @@
               v-if="isEditMode"
               class="w-full"
               :model-value="componentConstructeurIds"
+              :initial-options="componentConstructeursDisplay"
               @update:model-value="handleConstructeurChange"
             />
             <div v-else class="input input-bordered input-sm bg-base-200">

app/components/ConstructeurSelect.vue

@@ -142,13 +142,22 @@ const props = defineProps({
     type: String,
     default: 'Sélectionner ou créer un fournisseur...',
   },
+  initialOptions: {
+    type: Array as PropType<ConstructeurSummary[]>,
+    default: () => [],
+  },
 })
 
 const emit = defineEmits<{
   (e: 'update:modelValue', value: string[]): void
 }>()
 
-const { constructeurs, searchConstructeurs, createConstructeur } = useConstructeurs()
+const {
+  constructeurs,
+  searchConstructeurs,
+  createConstructeur,
+  ensureConstructeurs,
+} = useConstructeurs()
 const searchTerm = ref('')
 const openDropdown = ref(false)
 const openCreateModal = ref(false)
@@ -168,8 +177,15 @@ const uniqueOptions = (items: ConstructeurSummary[] = []) => {
   return Array.from(seen.values())
 }
 
+const normalizedInitialOptions = computed(() =>
+  uniqueOptions((props.initialOptions as ConstructeurSummary[]) || []),
+)
+
 const applyOptions = (items: ConstructeurSummary[] = []) => {
-  const normalized = uniqueOptions(items)
+  const normalized = uniqueOptions([
+    ...normalizedInitialOptions.value,
+    ...items,
+  ])
   const limited = normalized.slice(0, 10)
 
   selectedIds.value.forEach((id) => {
@@ -186,7 +202,10 @@ const applyOptions = (items: ConstructeurSummary[] = []) => {
     }
   })
 
-  options.value = uniqueOptions(limited)
+  options.value = uniqueOptions([
+    ...normalizedInitialOptions.value,
+    ...limited,
+  ])
 }
 
 const createForm = ref({
@@ -197,6 +216,9 @@ const createForm = ref({
 
 const optionLookup = computed(() => {
   const map = new Map<string, ConstructeurSummary>()
+  normalizedInitialOptions.value.forEach((item) => {
+    map.set(item.id, item)
+  })
   constructeurs.value.forEach((item: ConstructeurSummary) => {
     map.set(item.id, item)
   })
@@ -336,7 +358,10 @@ watch(
     }
     const missing = ids.some((id) => !optionLookup.value.get(id))
     if (missing) {
-      await ensureOptionsLoaded(true)
+      const fetched = await ensureConstructeurs(ids)
+      if (fetched.length) {
+        applyOptions([...options.value, ...fetched])
+      }
     }
   },
   { immediate: true },
@@ -353,6 +378,14 @@ watch(
   { immediate: true },
 )
 
+watch(
+  normalizedInitialOptions,
+  () => {
+    applyOptions(options.value)
+  },
+  { immediate: true },
+)
+
 onMounted(() => {
   window.addEventListener('click', clickHandler)
   ensureOptionsLoaded()

app/components/PieceItem.vue

@@ -100,6 +100,7 @@
           v-else
           class="w-full"
           :model-value="pieceConstructeurIds"
+          :initial-options="pieceConstructeursDisplay"
           placeholder="Sélectionner un ou plusieurs fournisseurs..."
           @update:model-value="handleConstructeurChange"
         />

app/composables/useApi.js

@@ -29,10 +29,27 @@ export function useApi () {
       clearTimeout(timeoutId)
 
       if (response.ok) {
-        const data = await response.json()
+        let data = null
+        if (response.status !== 204) {
+          const contentType = response.headers.get('content-type') || ''
+          if (contentType.includes('application/json')) {
+            const text = await response.text()
+            data = text ? JSON.parse(text) : null
+          } else {
+            const text = await response.text()
+            data = text || null
+          }
+        }
         return { success: true, data }
       } else {
-        const errorData = await response.json().catch(() => ({}))
+        const contentType = response.headers.get('content-type') || ''
+        let errorData = {}
+        if (contentType.includes('application/json')) {
+          errorData = await response.json().catch(() => ({}))
+        } else {
+          const text = await response.text().catch(() => '')
+          errorData = text ? { message: text } : {}
+        }
         const errorMessage = errorData.message || `Erreur ${response.status}: ${response.statusText}`
         showError(errorMessage)
         return { success: false, error: errorMessage, status: response.status }

app/composables/useComposants.js

@@ -1,7 +1,8 @@
 import { ref } from 'vue'
 import { useToast } from './useToast'
 import { useApi } from './useApi'
-import { buildConstructeurRequestPayload } from '~/shared/constructeurUtils'
+import { buildConstructeurRequestPayload, uniqueConstructeurIds } from '~/shared/constructeurUtils'
+import { useConstructeurs } from './useConstructeurs'
 
 const composants = ref([])
 const loading = ref(false)
@@ -9,13 +10,38 @@ const loading = ref(false)
 export function useComposants () {
   const { showSuccess, showError, showInfo } = useToast()
   const { get, post, patch, delete: del } = useApi()
+  const { ensureConstructeurs } = useConstructeurs()
+
+  const withResolvedConstructeurs = async (composant) => {
+    if (!composant || typeof composant !== 'object') {
+      return composant
+    }
+    const ids = uniqueConstructeurIds(
+      composant.constructeurIds,
+      composant.constructeurs,
+      composant.constructeur,
+    )
+    const hasConstructeurs =
+      Array.isArray(composant.constructeurs) && composant.constructeurs.length > 0
+
+    if (ids.length && !hasConstructeurs) {
+      const resolved = await ensureConstructeurs(ids)
+      if (resolved.length) {
+        composant.constructeurs = resolved
+        composant.constructeurIds = ids
+      }
+    }
+    return composant
+  }
 
 const loadComposants = async () => {
   loading.value = true
   try {
     const result = await get('/composants')
     if (result.success) {
-      composants.value = result.data
+      const items = Array.isArray(result.data) ? result.data : []
+      const enrichedItems = await Promise.all(items.map((item) => withResolvedConstructeurs(item)))
+      composants.value = enrichedItems
       showInfo(`Chargement de ${composants.value.length} composant(s) réussi`)
     }
   } catch (error) {
@@ -30,7 +56,8 @@ const loadComposants = async () => {
     try {
       const result = await post('/composants', buildConstructeurRequestPayload(composantData))
       if (result.success) {
-        composants.value.push(result.data)
+        const enriched = await withResolvedConstructeurs(result.data)
+        composants.value.push(enriched)
         const displayName = result.data?.name
           || composantData?.definition?.name
           || composantData?.name
@@ -51,7 +78,7 @@ const loadComposants = async () => {
     try {
       const result = await patch(`/composants/${id}`, buildConstructeurRequestPayload(composantData))
       if (result.success) {
-        const updated = result.data
+        const updated = await withResolvedConstructeurs(result.data)
         const index = composants.value.findIndex(comp => comp.id === id)
         if (index !== -1) {
           composants.value[index] = updated

app/composables/useConstructeurs.js

@@ -5,6 +5,42 @@ import { useToast } from './useToast'
 const constructeurs = ref([])
 const loading = ref(false)
 
+const uniqueConstructeurs = (items = []) => {
+  const map = new Map()
+  items.forEach((item) => {
+    if (item && typeof item === 'object' && typeof item.id === 'string') {
+      map.set(item.id, item)
+    }
+  })
+  return Array.from(map.values())
+}
+
+const normalizeIds = (ids = []) => {
+  if (!Array.isArray(ids)) {
+    return []
+  }
+  return Array.from(
+    new Set(
+      ids
+        .map((value) => (typeof value === 'string' ? value.trim() : ''))
+        .filter((value) => value.length > 0),
+    ),
+  )
+}
+
+const upsertConstructeurs = (items = []) => {
+  if (!Array.isArray(items) || !items.length) {
+    return
+  }
+  const merged = uniqueConstructeurs([...constructeurs.value, ...items])
+  constructeurs.value = merged
+}
+
+const getIndexedConstructeur = (id) =>
+  constructeurs.value.find((item) => item && item.id === id) || null
+
+const pendingFetches = new Map()
+
 export function useConstructeurs () {
   const { get, post, patch, delete: del } = useApi()
   const { showSuccess, showError } = useToast()
@@ -15,7 +51,8 @@ export function useConstructeurs () {
       const query = search ? `?search=${encodeURIComponent(search)}` : ''
       const result = await get(`/constructeurs${query}`)
       if (result.success) {
-        constructeurs.value = result.data
+        const items = Array.isArray(result.data) ? result.data : []
+        constructeurs.value = uniqueConstructeurs(items)
       }
       return result
     } catch (error) {
@@ -35,7 +72,7 @@ export function useConstructeurs () {
     try {
       const result = await post('/constructeurs', data)
       if (result.success) {
-        constructeurs.value = [result.data, ...constructeurs.value]
+        upsertConstructeurs([result.data])
         showSuccess(`Fournisseur "${result.data.name}" créé`)
       } else if (result.error) {
         showError(result.error)
@@ -50,15 +87,65 @@ export function useConstructeurs () {
     }
   }
 
+  const ensureConstructeurs = async (ids = []) => {
+    const normalizedIds = normalizeIds(ids)
+    if (!normalizedIds.length) {
+      return []
+    }
+
+    const collected = []
+    const missing = []
+    normalizedIds.forEach((id) => {
+      const existing = getIndexedConstructeur(id)
+      if (existing) {
+        collected.push(existing)
+      } else {
+        missing.push(id)
+      }
+    })
+
+    if (missing.length) {
+      const fetchTasks = missing.map((id) => {
+        const cached = pendingFetches.get(id)
+        if (cached) {
+          return cached
+        }
+        const task = get(`/constructeurs/${id}`)
+          .then((result) => {
+            if (result.success && result.data) {
+              return result.data
+            }
+            return null
+          })
+          .catch((error) => {
+            console.error('Erreur lors du chargement du fournisseur:', error)
+            return null
+          })
+          .finally(() => {
+            pendingFetches.delete(id)
+          })
+        pendingFetches.set(id, task)
+        return task
+      })
+
+      const fetched = await Promise.all(fetchTasks)
+      const validFetched = fetched.filter((item) => item && item.id)
+      if (validFetched.length) {
+        upsertConstructeurs(validFetched)
+      }
+    }
+
+    return normalizedIds
+      .map((id) => getIndexedConstructeur(id))
+      .filter((item) => Boolean(item))
+  }
+
   const updateConstructeur = async (id, data) => {
     loading.value = true
     try {
       const result = await patch(`/constructeurs/${id}`, data)
       if (result.success) {
-        const index = constructeurs.value.findIndex(item => item.id === id)
+        upsertConstructeurs([result.data])
-        if (index !== -1) {
-          constructeurs.value[index] = result.data
-        }
         showSuccess(`Fournisseur "${result.data.name}" mis à jour`)
       } else if (result.error) {
         showError(result.error)
@@ -93,7 +180,7 @@ export function useConstructeurs () {
     }
   }
 
-  const getConstructeurById = id => constructeurs.value.find(item => item.id === id)
+  const getConstructeurById = (id) => getIndexedConstructeur(id)
 
   return {
     constructeurs,
@@ -103,6 +190,7 @@ export function useConstructeurs () {
     createConstructeur,
     updateConstructeur,
     deleteConstructeur,
-    getConstructeurById
+    getConstructeurById,
+    ensureConstructeurs,
   }
 }

app/composables/usePieces.js

@@ -1,7 +1,8 @@
 import { ref } from 'vue'
 import { useToast } from './useToast'
 import { useApi } from './useApi'
-import { buildConstructeurRequestPayload } from '~/shared/constructeurUtils'
+import { buildConstructeurRequestPayload, uniqueConstructeurIds } from '~/shared/constructeurUtils'
+import { useConstructeurs } from './useConstructeurs'
 
 const pieces = ref([])
 const loading = ref(false)
@@ -9,13 +10,38 @@ const loading = ref(false)
 export function usePieces () {
   const { showSuccess, showError, showInfo } = useToast()
   const { get, post, patch, delete: del } = useApi()
+  const { ensureConstructeurs } = useConstructeurs()
+
+  const withResolvedConstructeurs = async (piece) => {
+    if (!piece || typeof piece !== 'object') {
+      return piece
+    }
+    const ids = uniqueConstructeurIds(
+      piece.constructeurIds,
+      piece.constructeurs,
+      piece.constructeur,
+    )
+    const hasConstructeurs =
+      Array.isArray(piece.constructeurs) && piece.constructeurs.length > 0
+
+    if (ids.length && !hasConstructeurs) {
+      const resolved = await ensureConstructeurs(ids)
+      if (resolved.length) {
+        piece.constructeurs = resolved
+        piece.constructeurIds = ids
+      }
+    }
+    return piece
+  }
 
   const loadPieces = async () => {
     loading.value = true
     try {
       const result = await get('/pieces')
       if (result.success) {
-        pieces.value = result.data
+        const items = Array.isArray(result.data) ? result.data : []
+        const enrichedItems = await Promise.all(items.map((item) => withResolvedConstructeurs(item)))
+        pieces.value = enrichedItems
         showInfo(`Chargement de ${pieces.value.length} pièce(s) réussi`)
       }
     } catch (error) {
@@ -30,7 +56,8 @@ export function usePieces () {
     try {
       const result = await post('/pieces', buildConstructeurRequestPayload(pieceData))
       if (result.success) {
-        pieces.value.push(result.data)
+        const enriched = await withResolvedConstructeurs(result.data)
+        pieces.value.push(enriched)
         const displayName = result.data?.name
           || pieceData?.definition?.name
           || pieceData?.name
@@ -51,7 +78,7 @@ export function usePieces () {
     try {
       const result = await patch(`/pieces/${id}`, buildConstructeurRequestPayload(pieceData))
       if (result.success) {
-        const updated = result.data
+        const updated = await withResolvedConstructeurs(result.data)
         const index = pieces.value.findIndex(piece => piece.id === id)
         if (index !== -1) {
           pieces.value[index] = updated

app/composables/useProducts.js

@@ -1,6 +1,8 @@
 import { ref } from 'vue'
 import { useToast } from './useToast'
 import { useApi } from './useApi'
+import { buildConstructeurRequestPayload, uniqueConstructeurIds } from '~/shared/constructeurUtils'
+import { useConstructeurs } from './useConstructeurs'
 
 const products = ref([])
 const total = ref(0)
@@ -26,6 +28,29 @@ const replaceInCache = (item) => {
 export function useProducts () {
   const { showError } = useToast()
   const { get, post, patch, delete: del } = useApi()
+  const { ensureConstructeurs } = useConstructeurs()
+
+  const withResolvedConstructeurs = async (product) => {
+    if (!product || typeof product !== 'object') {
+      return product
+    }
+    const ids = uniqueConstructeurIds(
+      product.constructeurIds,
+      product.constructeurs,
+      product.constructeur,
+    )
+    const hasConstructeurs =
+      Array.isArray(product.constructeurs) && product.constructeurs.length > 0
+
+    if (ids.length && !hasConstructeurs) {
+      const resolved = await ensureConstructeurs(ids)
+      if (resolved.length) {
+        product.constructeurs = resolved
+        product.constructeurIds = ids
+      }
+    }
+    return product
+  }
 
   const loadProducts = async (options = {}) => {
     if (loading.value) {
@@ -47,7 +72,8 @@ export function useProducts () {
       const result = await get('/products?limit=100')
       if (result.success) {
         const items = Array.isArray(result.data?.items) ? result.data.items : []
-        products.value = items
+        const enrichedItems = await Promise.all(items.map((item) => withResolvedConstructeurs(item)))
+        products.value = enrichedItems
         total.value = typeof result.data?.total === 'number' ? result.data.total : items.length
         loaded.value = true
       } else if (result.error) {
@@ -67,12 +93,14 @@ export function useProducts () {
   }
 
   const createProduct = async (payload) => {
+    const normalizedPayload = buildConstructeurRequestPayload(payload)
     loading.value = true
     error.value = null
     try {
-      const result = await post('/products', payload)
+      const result = await post('/products', normalizedPayload)
       if (result.success && result.data) {
-        const added = replaceInCache(result.data)
+        const enriched = await withResolvedConstructeurs(result.data)
+        const added = replaceInCache(enriched)
         if (added) {
           total.value += 1
         }
@@ -93,12 +121,14 @@ export function useProducts () {
   }
 
   const updateProduct = async (id, payload) => {
+    const normalizedPayload = buildConstructeurRequestPayload(payload)
     loading.value = true
     error.value = null
     try {
-      const result = await patch(`/products/${id}`, payload)
+      const result = await patch(`/products/${id}`, normalizedPayload)
       if (result.success && result.data) {
-        replaceInCache(result.data)
+        const enriched = await withResolvedConstructeurs(result.data)
+        replaceInCache(enriched)
       } else if (result.error) {
         error.value = result.error
         showError(result.error)
@@ -141,9 +171,10 @@ export function useProducts () {
   }
 
   const getProduct = async (id, options = {}) => {
-    if (!options.force) {
+    const shouldForce = !!options.force
+    if (!shouldForce) {
       const cached = products.value.find((product) => product.id === id)
-      if (cached) {
+      if (cached && Array.isArray(cached.constructeurs) && cached.constructeurs.length > 0) {
         return { success: true, data: cached }
       }
     }
@@ -151,7 +182,9 @@ export function useProducts () {
     try {
       const result = await get(`/products/${id}`)
       if (result.success && result.data) {
-        replaceInCache(result.data)
+        const enriched = await withResolvedConstructeurs(result.data)
+        replaceInCache(enriched)
+        return { success: true, data: enriched }
       }
       return result
     } catch (err) {

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

@@ -102,6 +102,7 @@
               class="w-full"
               :disabled="saving"
               placeholder="Rechercher un ou plusieurs fournisseurs..."
+              :initial-options="component?.constructeurs || []"
             />
           </div>
         </div>
@@ -403,6 +404,7 @@ import { useCustomFields } from '~/composables/useCustomFields'
 import { useApi } from '~/composables/useApi'
 import { useToast } from '~/composables/useToast'
 import { useDocuments } from '~/composables/useDocuments'
+import { useConstructeurs } from '~/composables/useConstructeurs'
 import { formatStructurePreview, normalizeStructureForEditor } from '~/shared/modelUtils'
 import { uniqueConstructeurIds } from '~/shared/constructeurUtils'
 import type { ComponentModelStructure } from '~/shared/types/inventory'
@@ -432,6 +434,7 @@ const router = useRouter()
 const { get } = useApi()
 const { componentTypes, loadComponentTypes } = useComponentTypes()
 const { updateComposant } = useComposants()
+const { ensureConstructeurs } = useConstructeurs()
 const { upsertCustomFieldValue, updateCustomFieldValue } = useCustomFields()
 const toast = useToast()
 const { loadDocumentsByComponent, uploadDocuments, deleteDocument } = useDocuments()
@@ -658,6 +661,9 @@ watch(
       currentComponent.constructeur ? [currentComponent.constructeur] : [],
     )
     editionForm.prix = currentComponent.prix !== null && currentComponent.prix !== undefined ? String(currentComponent.prix) : ''
+    if (editionForm.constructeurIds.length) {
+      void ensureConstructeurs(editionForm.constructeurIds)
+    }
 
     customFieldInputs.value = buildCustomFieldInputs(
       currentStructure,

app/pages/machine/[id].vue

@@ -144,6 +144,7 @@
                 class="w-full"
                 :key="machine.value?.id"
                 :model-value="machineConstructeurIds"
+                :initial-options="machineConstructeursDisplay"
                 placeholder="Rechercher un ou plusieurs fournisseurs..."
                 @update:modelValue="handleMachineConstructeurChange"
               />

app/pages/pieces-catalog.vue

@@ -93,25 +93,48 @@
                 <th class="w-24">Aperçu</th>
                 <th>Nom</th>
                 <th>Référence</th>
+                <th>Fournisseurs</th>
                 <th>Type de pièce</th>
                 <th>Actions</th>
               </tr>
             </thead>
             <tbody>
-              <tr v-for="piece in visiblePieces" :key="piece.id">
+              <tr v-for="row in pieceRows" :key="row.piece.id">
                 <td class="align-middle">
                   <DocumentThumbnail
-                    :document="resolvePrimaryDocument(piece)"
+                    :document="resolvePrimaryDocument(row.piece)"
-                    :alt="resolvePreviewAlt(piece)"
+                    :alt="resolvePreviewAlt(row.piece)"
                   />
                 </td>
-                <td>{{ piece.name || 'Pièce sans nom' }}</td>
+                <td>{{ row.piece.name || 'Pièce sans nom' }}</td>
-                <td>{{ piece.reference || '—' }}</td>
+                <td>{{ row.piece.reference || '—' }}</td>
-                <td>{{ resolvePieceType(piece) }}</td>
+                <td>
+                  <div
+                    v-if="row.suppliers.visible.length"
+                    class="flex max-w-[14rem] flex-wrap items-center gap-1"
+                    :title="row.suppliers.tooltip"
+                  >
+                    <span
+                      v-for="supplier in row.suppliers.visible"
+                      :key="supplier"
+                      class="badge badge-ghost badge-sm whitespace-nowrap"
+                    >
+                      {{ supplier }}
+                    </span>
+                    <span
+                      v-if="row.suppliers.overflow"
+                      class="badge badge-outline badge-sm"
+                    >
+                      +{{ row.suppliers.overflow }}
+                    </span>
+                  </div>
+                  <span v-else>—</span>
+                </td>
+                <td>{{ resolvePieceType(row.piece) }}</td>
                 <td>
                   <div class="flex items-center gap-2">
                     <NuxtLink
-                      :to="`/pieces/${piece.id}/edit`"
+                      :to="`/pieces/${row.piece.id}/edit`"
                       class="btn btn-ghost btn-xs"
                     >
                       Modifier
@@ -120,7 +143,7 @@
                       type="button"
                       class="btn btn-error btn-xs"
                       :disabled="loadingPieces"
-                      @click="handleDeletePiece(piece)"
+                      @click="handleDeletePiece(row.piece)"
                     >
                       Supprimer
                     </button>
@@ -193,6 +216,88 @@ const resolvePieceType = (piece: Record<string, any>) => {
   return '—'
 }
 
+const MAX_VISIBLE_SUPPLIERS = 3
+
+const resolvePieceSuppliers = (piece: Record<string, any>) => {
+  const names: string[] = []
+  const seen = new Set<string>()
+
+  const pushName = (maybeName: unknown) => {
+    if (typeof maybeName !== 'string') {
+      return
+    }
+    const normalized = maybeName.trim().replace(/\s+/g, ' ')
+    if (!normalized.length) {
+      return
+    }
+    const key = normalized.toLowerCase()
+    if (seen.has(key)) {
+      return
+    }
+    seen.add(key)
+    names.push(normalized)
+  }
+
+  const collectConstructeurs = (value: unknown): void => {
+    if (!value) {
+      return
+    }
+    if (Array.isArray(value)) {
+      value.forEach(collectConstructeurs)
+      return
+    }
+    if (typeof value === 'string') {
+      pushName(value)
+      return
+    }
+    if (typeof value === 'object') {
+      const record = value as Record<string, any>
+      pushName(record?.name ?? record?.label ?? record?.companyName ?? record?.company ?? null)
+      if (record?.constructeur) {
+        collectConstructeurs(record.constructeur)
+      }
+      if (Array.isArray(record?.constructeurs)) {
+        collectConstructeurs(record.constructeurs)
+      }
+    }
+  }
+
+  const collectFromLabel = (value: unknown): void => {
+    if (typeof value !== 'string') {
+      return
+    }
+    value
+      .split(/[,;\\/•·|]+/)
+      .map((part) => part.trim())
+      .filter(Boolean)
+      .forEach(pushName)
+  }
+
+  collectConstructeurs(piece?.constructeurs)
+  collectConstructeurs(piece?.constructeur)
+  collectConstructeurs(piece?.product?.constructeurs)
+  collectConstructeurs(piece?.product?.constructeur)
+
+  collectFromLabel(piece?.constructeursLabel)
+  collectFromLabel(piece?.supplierLabel)
+  collectFromLabel(piece?.product?.constructeursLabel)
+  collectFromLabel(piece?.product?.supplierLabel)
+
+  return names
+}
+
+const buildPieceSuppliersDisplay = (piece: Record<string, any>) => {
+  const suppliers = resolvePieceSuppliers(piece)
+  const visible = suppliers.slice(0, MAX_VISIBLE_SUPPLIERS)
+  const overflow = Math.max(suppliers.length - visible.length, 0)
+  return {
+    suppliers,
+    visible,
+    overflow,
+    tooltip: suppliers.length ? suppliers.join(', ') : '',
+  }
+}
+
 const resolveDeleteGuard = (piece: Record<string, any>) => {
   const blockingReasons: string[] = []
   const machineLinks = Array.isArray(piece?.machineLinks)
@@ -269,6 +374,13 @@ const visiblePieces = computed(() => {
   })
 })
 
+const pieceRows = computed(() =>
+  visiblePieces.value.map((piece) => ({
+    piece,
+    suppliers: buildPieceSuppliersDisplay(piece),
+  })),
+)
+
 const handleDeletePiece = async (piece: Record<string, any>) => {
   const { blockingReasons, hasCustomFields } = resolveDeleteGuard(piece)
 

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

@@ -102,6 +102,7 @@
               class="w-full"
               :disabled="saving"
               placeholder="Rechercher un ou plusieurs fournisseurs..."
+              :initial-options="piece?.constructeurs || []"
             />
           </div>
         </div>
@@ -393,6 +394,7 @@ import { useCustomFields } from '~/composables/useCustomFields'
 import { useApi } from '~/composables/useApi'
 import { useToast } from '~/composables/useToast'
 import { useDocuments } from '~/composables/useDocuments'
+import { useConstructeurs } from '~/composables/useConstructeurs'
 import { getFileIcon } from '~/utils/fileIcons'
 import { canPreviewDocument, isImageDocument, isPdfDocument } from '~/utils/documentPreview'
 import { formatPieceStructurePreview } from '~/shared/modelUtils'
@@ -425,6 +427,7 @@ const { updatePiece } = usePieces()
 const { upsertCustomFieldValue, updateCustomFieldValue } = useCustomFields()
 const toast = useToast()
 const { loadDocumentsByPiece, uploadDocuments, deleteDocument } = useDocuments()
+const { ensureConstructeurs } = useConstructeurs()
 
 const piece = ref<any | null>(null)
 const loading = ref(true)
@@ -682,6 +685,9 @@ watch(
     )
     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)
+    }
 
     customFieldInputs.value = buildCustomFieldInputs(
       currentType?.structure ?? null,
@@ -719,13 +725,15 @@ const submitEdition = async () => {
       ? ''
       : String(editionForm.prix).trim()
 
+  const constructeurIds = uniqueConstructeurIds(editionForm.constructeurIds)
+
   const payload: Record<string, any> = {
     name: editionForm.name.trim(),
+    constructeurIds,
   }
 
   const reference = editionForm.reference.trim()
   payload.reference = reference ? reference : null
-  payload.constructeurIds = uniqueConstructeurIds(editionForm.constructeurIds)
 
   const selectedProductId =
     typeof editionForm.productId === 'string'

app/pages/pieces/create.vue

@@ -485,9 +485,7 @@ const submitCreation = async () => {
     payload.reference = reference
   }
 
-  if (creationForm.constructeurIds.length) {
+  payload.constructeurIds = uniqueConstructeurIds(creationForm.constructeurIds)
-    payload.constructeurIds = uniqueConstructeurIds(creationForm.constructeurIds)
-  }
 
   const selectedProductId =
     typeof creationForm.productId === 'string'

app/pages/product-catalog.vue

@@ -101,28 +101,44 @@
               </tr>
             </thead>
             <tbody>
-              <tr v-for="product in filteredProducts" :key="product.id">
+              <tr v-for="row in productRows" :key="row.product.id">
                 <td class="align-middle">
                   <DocumentThumbnail
-                    :document="resolvePrimaryDocument(product)"
+                    :document="resolvePrimaryDocument(row.product)"
-                    :alt="resolvePreviewAlt(product)"
+                    :alt="resolvePreviewAlt(row.product)"
                   />
                 </td>
-                <td class="font-medium">{{ product.name }}</td>
+                <td class="font-medium">{{ row.product.name }}</td>
-                <td>{{ product.reference || '—' }}</td>
+                <td>{{ row.product.reference || '—' }}</td>
-                <td>{{ product.typeProduct?.name || '—' }}</td>
+                <td>{{ row.product.typeProduct?.name || '—' }}</td>
                 <td>
-                  <span v-if="product.constructeurs?.length" class="text-sm">
+                  <div
-                    {{ formatConstructeurs(product.constructeurs) }}
+                    v-if="row.suppliers.visible.length"
-                  </span>
+                    class="flex max-w-[14rem] flex-wrap items-center gap-1 text-sm"
+                    :title="row.suppliers.tooltip"
+                  >
+                    <span
+                      v-for="supplier in row.suppliers.visible"
+                      :key="supplier"
+                      class="badge badge-ghost badge-sm whitespace-nowrap"
+                    >
+                      {{ supplier }}
+                    </span>
+                    <span
+                      v-if="row.suppliers.overflow"
+                      class="badge badge-outline badge-sm"
+                    >
+                      +{{ row.suppliers.overflow }}
+                    </span>
+                  </div>
                   <span v-else class="text-sm text-base-content/50">—</span>
                 </td>
                 <td class="text-right">
-                  {{ formatPrice(product.supplierPrice) }}
+                  {{ formatPrice(row.product.supplierPrice) }}
                 </td>
                 <td class="text-right space-x-2">
                   <NuxtLink
-                    :to="`/product/${product.id}/edit`"
+                    :to="`/product/${row.product.id}/edit`"
                     class="btn btn-ghost btn-xs"
                   >
                     Modifier
@@ -130,7 +146,7 @@
                   <button
                     type="button"
                     class="btn btn-ghost btn-xs text-error"
-                    @click="confirmDelete(product)"
+                    @click="confirmDelete(row.product)"
                   >
                     Supprimer
                   </button>
@@ -233,11 +249,91 @@ const formatPrice = (value: any) => {
   return priceFormatter.format(number)
 }
 
-const formatConstructeurs = (constructeurs: Array<Record<string, any>>) =>
+const MAX_VISIBLE_SUPPLIERS = 3
-  constructeurs
+
-    .map((constructeur) => constructeur?.name)
+const resolveProductSuppliers = (product: Record<string, any>) => {
-    .filter((name): name is string => Boolean(name))
+  const names: string[] = []
-    .join(', ')
+  const seen = new Set<string>()
+
+  const pushName = (maybeName: unknown) => {
+    if (typeof maybeName !== 'string') {
+      return
+    }
+    const normalized = maybeName.trim().replace(/\s+/g, ' ')
+    if (!normalized.length) {
+      return
+    }
+    const key = normalized.toLowerCase()
+    if (seen.has(key)) {
+      return
+    }
+    seen.add(key)
+    names.push(normalized)
+  }
+
+  const collectConstructeurs = (value: unknown): void => {
+    if (!value) {
+      return
+    }
+    if (Array.isArray(value)) {
+      value.forEach(collectConstructeurs)
+      return
+    }
+    if (typeof value === 'string') {
+      pushName(value)
+      return
+    }
+    if (typeof value === 'object') {
+      const record = value as Record<string, any>
+      pushName(record?.name ?? record?.label ?? record?.companyName ?? record?.company ?? null)
+      if (record?.constructeur) {
+        collectConstructeurs(record.constructeur)
+      }
+      if (Array.isArray(record?.constructeurs)) {
+        collectConstructeurs(record.constructeurs)
+      }
+    }
+  }
+
+  const collectFromLabel = (value: unknown): void => {
+    if (typeof value !== 'string') {
+      return
+    }
+    value
+      .split(/[,;\\/•·|]+/)
+      .map((part) => part.trim())
+      .filter(Boolean)
+      .forEach(pushName)
+  }
+
+  collectConstructeurs(product?.constructeurs)
+  collectConstructeurs(product?.constructeur)
+
+  collectFromLabel(product?.constructeursLabel)
+  collectFromLabel(product?.supplierLabel)
+  collectFromLabel(product?.suppliers)
+
+  return names
+}
+
+const buildSuppliersDisplay = (product: Record<string, any>) => {
+  const suppliers = resolveProductSuppliers(product)
+  const visible = suppliers.slice(0, MAX_VISIBLE_SUPPLIERS)
+  const overflow = Math.max(suppliers.length - visible.length, 0)
+  return {
+    suppliers,
+    visible,
+    overflow,
+    tooltip: suppliers.length ? suppliers.join(', ') : '',
+  }
+}
+
+const productRows = computed(() =>
+  filteredProducts.value.map((product) => ({
+    product,
+    suppliers: buildSuppliersDisplay(product),
+  })),
+)
 
 const resolvePrimaryDocument = (product: Record<string, any>) => {
   const documents = Array.isArray(product?.documents) ? product.documents : []

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

@@ -92,6 +92,7 @@
               class="w-full"
               :disabled="saving"
               placeholder="Rechercher un ou plusieurs fournisseurs..."
+              :initial-options="product?.constructeurs || []"
             />
           </div>
         </div>
@@ -327,6 +328,7 @@ import { useProducts } from '~/composables/useProducts'
 import { useCustomFields } from '~/composables/useCustomFields'
 import { useToast } from '~/composables/useToast'
 import { useDocuments } from '~/composables/useDocuments'
+import { useConstructeurs } from '~/composables/useConstructeurs'
 import { formatProductStructurePreview, normalizeProductStructureForSave } from '~/shared/modelUtils'
 import { uniqueConstructeurIds } from '~/shared/constructeurUtils'
 import { getModelType } from '~/services/modelTypes'
@@ -356,6 +358,7 @@ const {
   uploadDocuments: uploadProductDocuments,
   deleteDocument: deleteProductDocument,
 } = useDocuments()
+const { ensureConstructeurs } = useConstructeurs()
 
 const product = ref<any | null>(null)
 const productType = ref<any | null>(null)
@@ -490,7 +493,7 @@ const loadProduct = async () => {
     product.value = result.data
     productDocuments.value = Array.isArray(result.data?.documents) ? result.data.documents : []
     await loadProductType()
-    hydrateForm()
+    await hydrateForm()
     await refreshDocuments()
   } else {
     product.value = null
@@ -566,7 +569,7 @@ const loadProductType = async () => {
   }
 }
 
-const hydrateForm = () => {
+const hydrateForm = async () => {
   if (!product.value) {
     return
   }
@@ -580,6 +583,9 @@ const hydrateForm = () => {
     ? String(product.value.supplierPrice)
     : ''
   customFieldInputs.value = buildCustomFieldInputs(structure.value, product.value.customFieldValues)
+  if (editionForm.constructeurIds.length) {
+    await ensureConstructeurs(editionForm.constructeurIds)
+  }
 }
 
 watch(
@@ -677,10 +683,12 @@ const submitEdition = async () => {
     return
   }
 
+  const constructeurIds = uniqueConstructeurIds(editionForm.constructeurIds)
+
   const payload: Record<string, any> = {
     name: editionForm.name.trim(),
     reference: editionForm.reference.trim() || null,
-    constructeurIds: uniqueConstructeurIds(editionForm.constructeurIds),
+    constructeurIds,
   }
 
   const rawPrice = editionForm.supplierPrice.trim()

app/pages/product/create.vue

@@ -423,9 +423,7 @@ const buildPayload = () => {
     payload.reference = reference
   }
 
-  if (creationForm.constructeurIds.length) {
+  payload.constructeurIds = uniqueConstructeurIds(creationForm.constructeurIds)
-    payload.constructeurIds = uniqueConstructeurIds(creationForm.constructeurIds)
-  }
 
   const rawPrice = creationForm.supplierPrice.trim()
   if (rawPrice) {