WIP

feat(constructeur) : update product edit flow with supplier references
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-31 17:53:30 +02:00 · 2026-03-31 17:02:32 +02:00 · 2026-03-31 16:52:50 +02:00 · 2026-03-31 15:55:18 +02:00 · 2026-03-31 15:33:54 +02:00
34 changed files with 827 additions and 236 deletions
--- a/app/components/ComponentItem.vue
+++ b/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)

--- a/app/components/ConstructeurLinksTable.vue
+++ b/app/components/ConstructeurLinksTable.vue
@@ -0,0 +1,93 @@
+<template>
+  <div v-if="modelValue.length" class="overflow-x-auto">
+    <table class="table table-sm">
+      <thead>
+        <tr>
+          <th>Fournisseur</th>
+          <th>Réf. fournisseur</th>
+          <th v-if="!readonly" class="w-10" />
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(link, index) in modelValue" :key="link.constructeurId">
+          <td class="font-medium">
+            {{ getConstructeurName(link) }}
+            <div v-if="getConstructeurContact(link)" class="text-xs text-gray-500">
+              {{ getConstructeurContact(link) }}
+            </div>
+          </td>
+          <td>
+            <input
+              v-if="!readonly"
+              :value="link.supplierReference || ''"
+              type="text"
+              class="input input-bordered input-sm w-full"
+              placeholder="Réf. fournisseur"
+              @input="updateReference(index, ($event.target as HTMLInputElement).value)"
+            >
+            <span v-else>{{ link.supplierReference || '—' }}</span>
+          </td>
+          <td v-if="!readonly">
+            <button
+              type="button"
+              class="btn btn-ghost btn-xs text-error"
+              aria-label="Retirer"
+              @click="removeLink(index)"
+            >
+              <IconLucideX class="w-4 h-4" />
+            </button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import type { ConstructeurLinkEntry } from '~/shared/constructeurUtils'
+import { formatConstructeurContact } from '~/shared/constructeurUtils'
+import { useConstructeurs } from '~/composables/useConstructeurs'
+import IconLucideX from '~icons/lucide/x'
+
+const props = defineProps({
+  modelValue: {
+    type: Array as PropType<ConstructeurLinkEntry[]>,
+    default: () => [],
+  },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: ConstructeurLinkEntry[]): void
+  (e: 'remove', constructeurId: string): void
+}>()
+
+const { getConstructeurById } = useConstructeurs()
+
+const getConstructeurName = (link: ConstructeurLinkEntry): string =>
+  link.constructeur?.name || getConstructeurById(link.constructeurId)?.name || link.constructeurId
+
+const getConstructeurContact = (link: ConstructeurLinkEntry): string => {
+  const c = link.constructeur || getConstructeurById(link.constructeurId)
+  return formatConstructeurContact(c as any)
+}
+
+const updateReference = (index: number, value: string) => {
+  const updated = [...props.modelValue]
+  const entry = updated[index]
+  if (!entry) return
+  updated[index] = { ...entry, supplierReference: value || null }
+  emit('update:modelValue', updated)
+}
+
+const removeLink = (index: number) => {
+  const removed = props.modelValue[index]
+  const updated = props.modelValue.filter((_, i) => i !== index)
+  emit('update:modelValue', updated)
+  if (removed) emit('remove', removed.constructeurId)
+}
+</script>
--- a/app/components/DetailHeader.vue
+++ b/app/components/DetailHeader.vue
@@ -15,9 +15,9 @@
        <IconLucideEye v-else class="w-5 h-5 mr-2" aria-hidden="true" />
        {{ isEditMode ? 'Voir détails' : 'Modifier' }}
      </button>
-      <NuxtLink :to="backLink" class="btn btn-ghost btn-sm md:btn-md">
+      <button type="button" class="btn btn-ghost btn-sm md:btn-md" @click="goBack">
        Retour au catalogue
-      </NuxtLink>
+      </button>
    </div>
  </div>
 </template>
@@ -26,7 +26,9 @@
 import IconLucideSquarePen from '~icons/lucide/square-pen'
 import IconLucideEye from '~icons/lucide/eye'

-defineProps<{
+const router = useRouter()
+
+const props = defineProps<{
  title: string
  subtitle?: string
  isEditMode: boolean
@@ -37,4 +39,13 @@ defineProps<{
 defineEmits<{
  'toggle-edit': []
 }>()
+
+function goBack() {
+  if (window.history.length > 1) {
+    router.back()
+  }
+  else {
+    navigateTo(props.backLink)
+  }
+}
 </script>
--- a/app/components/PieceItem.vue
+++ b/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)

--- a/app/components/machine/MachineDetailHeader.vue
+++ b/app/components/machine/MachineDetailHeader.vue
@@ -32,6 +32,9 @@
        <IconLucidePrinter class="w-5 h-5 mr-2" aria-hidden="true" />
        Imprimer
      </button>
+      <button type="button" class="btn btn-ghost btn-sm md:btn-md" @click="goBack">
+        Retour aux machines
+      </button>
    </div>
  </div>
 </template>
@@ -41,6 +44,8 @@ import IconLucideSquarePen from '~icons/lucide/square-pen'
 import IconLucideEye from '~icons/lucide/eye'
 import IconLucidePrinter from '~icons/lucide/printer'

+const router = useRouter()
+
 defineProps<{
  title: string
  isEditMode: boolean
@@ -50,4 +55,13 @@ defineEmits<{
  'toggle-edit': []
  'open-print': []
 }>()
+
+function goBack() {
+  if (window.history.length > 1) {
+    router.back()
+  }
+  else {
+    navigateTo('/machines')
+  }
+}
 </script>
--- a/app/components/machine/MachineInfoCard.vue
+++ b/app/components/machine/MachineInfoCard.vue
@@ -58,7 +58,7 @@
            {{ machineReference }}
          </div>
        </div>
-        <div v-if="isEditMode || hasMachineConstructeur" class="form-control">
+        <div v-if="isEditMode || hasMachineConstructeur" class="form-control md:col-span-2">
          <label class="label">
            <span class="label-text">Fournisseur</span>
          </label>
@@ -70,23 +70,15 @@
            placeholder="Rechercher un ou plusieurs fournisseurs..."
            @update:modelValue="$emit('update:constructeur-ids', $event)"
          />
-          <div v-else class="border border-base-300 rounded-btn bg-base-200 px-4 py-2 min-h-12 flex items-center">
-            <div v-if="machineConstructeursDisplay.length" class="flex flex-wrap gap-2">
-              <span
-                v-for="constructeur in machineConstructeursDisplay"
-                :key="constructeur.id"
-                class="badge badge-ghost gap-1"
-              >
-                {{ constructeur.name }}
-                <span
-                  v-if="formatConstructeurContactSummary(constructeur)"
-                  class="text-xs opacity-60"
-                >
-                  · {{ formatConstructeurContactSummary(constructeur) }}
-                </span>
-              </span>
-            </div>
-            <span v-else class="text-base-content/50">Non défini</span>
+          <ConstructeurLinksTable
+            v-if="constructeurLinks.length"
+            :model-value="constructeurLinks"
+            :readonly="!isEditMode"
+            @update:model-value="$emit('update:constructeur-links', $event)"
+            @remove="$emit('remove-constructeur-link', $event)"
+          />
+          <div v-else-if="!isEditMode" class="border border-base-300 rounded-btn bg-base-200 px-4 py-2 min-h-12 flex items-center">
+            <span class="text-base-content/50">Non défini</span>
          </div>
        </div>
      </div>
@@ -188,12 +180,11 @@
 <script setup lang="ts">
 import { watch } from 'vue'
 import ConstructeurSelect from '~/components/ConstructeurSelect.vue'
+import ConstructeurLinksTable from '~/components/ConstructeurLinksTable.vue'
 import MachineCustomFieldDefEditor from '~/components/machine/MachineCustomFieldDefEditor.vue'
-import {
-  formatConstructeurContact as formatConstructeurContactSummary,
-} from '~/shared/constructeurUtils'
 import { formatCustomFieldValue } from '~/shared/utils/customFieldUtils'
 import { useMachineCustomFieldDefs } from '~/composables/useMachineCustomFieldDefs'
+import type { ConstructeurLinkEntry } from '~/shared/constructeurUtils'

 const props = defineProps<{
  isEditMode: boolean
@@ -205,6 +196,7 @@ const props = defineProps<{
  machineConstructeurIds: string[]
  machineConstructeursDisplay: any[]
  hasMachineConstructeur: boolean
+  constructeurLinks: ConstructeurLinkEntry[]
  visibleCustomFields: any[]
  getMachineFieldId: (fieldName: string) => string
  machineId: string
@@ -216,6 +208,8 @@ const emit = defineEmits<{
  'update:machine-reference': [value: string]
  'update:machine-site-id': [value: string]
  'update:constructeur-ids': [ids: unknown]
+  'update:constructeur-links': [links: ConstructeurLinkEntry[]]
+  'remove-constructeur-link': [constructeurId: string]
  'set-custom-field-value': [field: any, value: unknown]
  'custom-fields-saved': []
 }>()
--- a/app/composables/useComponentCreate.ts
+++ b/app/composables/useComponentCreate.ts
@@ -26,7 +26,9 @@ import {
  requiredCustomFieldsFilled as _requiredCustomFieldsFilled,
  saveCustomFieldValues as _saveCustomFieldValues,
 } from '~/shared/utils/customFieldFormUtils'
-import { uniqueConstructeurIds } from '~/shared/constructeurUtils'
+import { useConstructeurLinks } from '~/composables/useConstructeurLinks'
+import { uniqueConstructeurIds, constructeurIdsFromLinks } from '~/shared/constructeurUtils'
+import type { ConstructeurLinkEntry } from '~/shared/constructeurUtils'
 import {
  getStructurePieces,
  resolvePieceLabel as _resolvePieceLabel,
@@ -77,6 +79,7 @@ export function useComponentCreate() {
  const toast = useToast()
  const { upsertCustomFieldValue, updateCustomFieldValue } = useCustomFields()
  const { uploadDocuments } = useDocuments()
+  const { syncLinks } = useConstructeurLinks()
  const { canEdit } = usePermissions()

  // -------------------------------------------------------------------------
@@ -92,6 +95,8 @@ export function useComponentCreate() {
    constructeurIds: [] as string[],
    prix: '' as string,
  })
+  const constructeurLinks = ref<ConstructeurLinkEntry[]>([])
+  const constructeurIdsFromForm = computed(() => constructeurIdsFromLinks(constructeurLinks.value))
  const lastSuggestedName = ref('')
  const customFieldInputs = ref<CustomFieldInput[]>([])
  const structureAssignments = ref<StructureAssignmentNode | null>(null)
@@ -276,9 +281,7 @@ export function useComponentCreate() {
      payload.reference = reference
    }

-    if (creationForm.constructeurIds.length) {
-      payload.constructeurIds = uniqueConstructeurIds(creationForm.constructeurIds)
-    }
+    // constructeurIds are handled via link entities, not in the main payload

    const rawPrice = typeof creationForm.prix === 'string'
      ? creationForm.prix.trim()
@@ -343,6 +346,10 @@ export function useComponentCreate() {
          }
          selectedDocuments.value = []
        }
+        // Sync constructeur links after creation
+        if (constructeurLinks.value.length) {
+          await syncLinks('composant', createdComponent.id, [], constructeurLinks.value)
+        }
        toast.showSuccess('Composant créé avec succès')
        await router.replace(`/component/${createdComponent.id}?edit=true`)
      }
@@ -380,6 +387,8 @@ export function useComponentCreate() {
    selectedTypeId,
    submitting,
    creationForm,
+    constructeurLinks,
+    constructeurIdsFromForm,
    customFieldInputs,
    structureAssignments,
    selectedDocuments,
--- a/app/composables/useComponentEdit.ts
+++ b/app/composables/useComponentEdit.ts
@@ -12,9 +12,11 @@ import { useToast } from '~/composables/useToast'
 import { extractRelationId } from '~/shared/apiRelations'
 import { useDocuments } from '~/composables/useDocuments'
 import { useConstructeurs } from '~/composables/useConstructeurs'
+import { useConstructeurLinks } from '~/composables/useConstructeurLinks'
 import { useComponentHistory } from '~/composables/useComponentHistory'
 import { formatStructurePreview, normalizeStructureForEditor } from '~/shared/modelUtils'
-import { uniqueConstructeurIds } from '~/shared/constructeurUtils'
+import { uniqueConstructeurIds, constructeurIdsFromLinks } from '~/shared/constructeurUtils'
+import type { ConstructeurLinkEntry } from '~/shared/constructeurUtils'
 import {
  getStructurePieces,
  getStructureProducts,
@@ -61,6 +63,7 @@ export function useComponentEdit(componentId: string) {
  const { pieces } = usePieces()
  const { products } = useProducts()
  const { ensureConstructeurs } = useConstructeurs()
+  const { fetchLinks, syncLinks } = useConstructeurLinks()
  const { upsertCustomFieldValue, updateCustomFieldValue } = useCustomFields()
  const toast = useToast()
  const { loadDocumentsByComponent, uploadDocuments, deleteDocument } = useDocuments()
@@ -89,6 +92,9 @@ export function useComponentEdit(componentId: string) {
    constructeurIds: [] as string[],
    prix: '' as string,
  })
+  const constructeurLinks = ref<ConstructeurLinkEntry[]>([])
+  const originalConstructeurLinks = ref<ConstructeurLinkEntry[]>([])
+  const constructeurIdsFromForm = computed(() => constructeurIdsFromLinks(constructeurLinks.value))

  const customFieldInputs = ref<CustomFieldInput[]>([])
  const fetchedPieceTypeMap = ref<Record<string, string>>({})
@@ -286,6 +292,7 @@ export function useComponentEdit(componentId: string) {
        slotId: slot.slotId,
        typePieceId: slot.typePieceId,
        selectedPieceId: edits && 'selectedPieceId' in edits ? edits.selectedPieceId : (slot.selectedPieceId ?? null),
+        selectedPieceName: slot.selectedPieceName ?? null,
        quantity: edits && 'quantity' in edits ? edits.quantity! : (slot.quantity ?? 1),
        position: slot.position ?? i,
        label: pieceTypeLabelMap.value[slot.typePieceId] || `Pièce #${i + 1}`,
@@ -302,6 +309,7 @@ export function useComponentEdit(componentId: string) {
        slotId: slot.slotId,
        typeProductId: slot.typeProductId,
        selectedProductId: edits && 'selectedProductId' in edits ? edits.selectedProductId : (slot.selectedProductId ?? null),
+        selectedProductName: slot.selectedProductName ?? null,
        familyCode: slot.familyCode,
        position: slot.position ?? i,
        label: productTypeLabelMap.value[slot.typeProductId] || `Produit #${i + 1}`,
@@ -318,6 +326,7 @@ export function useComponentEdit(componentId: string) {
        slotId: slot.slotId,
        typeComposantId: slot.typeComposantId,
        selectedComponentId: edits && 'selectedComposantId' in edits ? edits.selectedComposantId : (slot.selectedComponentId ?? null),
+        selectedComponentName: slot.selectedComponentName ?? null,
        alias: slot.alias,
        familyCode: slot.familyCode,
        position: slot.position ?? i,
@@ -361,7 +370,6 @@ export function useComponentEdit(componentId: string) {

    const reference = editionForm.reference.trim()
    payload.reference = reference || null
-    payload.constructeurIds = uniqueConstructeurIds(editionForm.constructeurIds)

    if (rawPrice) {
      const parsed = Number(rawPrice)
@@ -434,6 +442,9 @@ export function useComponentEdit(componentId: string) {
        slotEdits.products = {}
        slotEdits.subcomponents = {}

+        await syncLinks('composant', component.value.id, originalConstructeurLinks.value, constructeurLinks.value)
+        originalConstructeurLinks.value = constructeurLinks.value.map(l => ({ ...l }))
+
        toast.showSuccess('Composant mis à jour avec succès.')
      }
    }
@@ -468,15 +479,16 @@ export function useComponentEdit(componentId: string) {
        editionForm.name = currentComponent.name || ''
        editionForm.description = currentComponent.description || ''
        editionForm.reference = currentComponent.reference || ''
-        editionForm.constructeurIds = uniqueConstructeurIds(
-          currentComponent,
-          Array.isArray(currentComponent.constructeurs) ? currentComponent.constructeurs : [],
-          currentComponent.constructeur ? [currentComponent.constructeur] : [],
-        )
+        // Load constructeur links
+        fetchLinks('composant', componentId).then((links) => {
+          constructeurLinks.value = links
+          originalConstructeurLinks.value = links.map(l => ({ ...l }))
+          editionForm.constructeurIds = constructeurIdsFromLinks(links)
+          if (editionForm.constructeurIds.length) {
+            void ensureConstructeurs(editionForm.constructeurIds)
+          }
+        })
        editionForm.prix = currentComponent.prix !== null && currentComponent.prix !== undefined ? String(currentComponent.prix) : ''
-        if (editionForm.constructeurIds.length) {
-          void ensureConstructeurs(editionForm.constructeurIds)
-        }

        initialized.value = true
      }
@@ -543,6 +555,9 @@ export function useComponentEdit(componentId: string) {
    previewVisible,
    selectedTypeId,
    editionForm,
+    constructeurLinks,
+    originalConstructeurLinks,
+    constructeurIdsFromForm,
    customFieldInputs,
    historyFieldLabels,

--- a/app/composables/useComposants.ts
+++ b/app/composables/useComposants.ts
@@ -1,7 +1,7 @@
 import { ref } from 'vue'
 import { useToast } from './useToast'
 import { useApi } from './useApi'
-import { buildConstructeurRequestPayload, uniqueConstructeurIds } from '~/shared/constructeurUtils'
+import { uniqueConstructeurIds } from '~/shared/constructeurUtils'
 import { useConstructeurs, type Constructeur } from './useConstructeurs'
 import { extractRelationId, normalizeRelationIds } from '~/shared/apiRelations'
 import { extractCollection } from '~/shared/utils/apiHelpers'
@@ -182,7 +182,8 @@ export function useComposants() {
  const createComposant = async (composantData: Partial<Composant>): Promise<ComposantSingleResult> => {
    loading.value = true
    try {
-      const normalizedPayload = normalizeRelationIds(buildConstructeurRequestPayload(composantData))
+      const { constructeurIds, constructeurs, constructeurId, constructeur, ...cleanPayload } = composantData as any
+      const normalizedPayload = normalizeRelationIds(cleanPayload)
      const result = await post('/composants', normalizedPayload)
      if (result.success && result.data) {
        const enriched = await withResolvedConstructeurs(result.data as Composant)
@@ -209,7 +210,8 @@ export function useComposants() {
  const updateComposantData = async (id: string, composantData: Partial<Composant>): Promise<ComposantSingleResult> => {
    loading.value = true
    try {
-      const normalizedPayload = normalizeRelationIds(buildConstructeurRequestPayload(composantData))
+      const { constructeurIds, constructeurs, constructeurId, constructeur, ...cleanPayload } = composantData as any
+      const normalizedPayload = normalizeRelationIds(cleanPayload)
      const result = await patch(`/composants/${id}`, normalizedPayload)
      if (result.success && result.data) {
        const updated = await withResolvedConstructeurs(result.data as Composant)
--- a/app/composables/useConstructeurLinks.ts
+++ b/app/composables/useConstructeurLinks.ts
@@ -0,0 +1,103 @@
+import { useApi } from '~/composables/useApi'
+import type { ConstructeurLinkEntry } from '~/shared/constructeurUtils'
+import { extractCollection } from '~/shared/utils/apiHelpers'
+
+type EntityType = 'machine' | 'piece' | 'composant' | 'product'
+
+const ENDPOINTS: Record<EntityType, string> = {
+  machine: '/machine_constructeur_links',
+  piece: '/piece_constructeur_links',
+  composant: '/composant_constructeur_links',
+  product: '/product_constructeur_links',
+}
+
+const ENTITY_KEYS: Record<EntityType, string> = {
+  machine: 'machine',
+  piece: 'piece',
+  composant: 'composant',
+  product: 'product',
+}
+
+const ENTITY_PLURALS: Record<EntityType, string> = {
+  machine: 'machines',
+  piece: 'pieces',
+  composant: 'composants',
+  product: 'products',
+}
+
+export function useConstructeurLinks() {
+  const { get, post, patch, delete: del } = useApi()
+
+  const fetchLinks = async (
+    entityType: EntityType,
+    entityId: string,
+  ): Promise<ConstructeurLinkEntry[]> => {
+    const endpoint = ENDPOINTS[entityType]
+    const key = ENTITY_KEYS[entityType]
+    const plural = ENTITY_PLURALS[entityType]
+    const url = `${endpoint}?${key}=/api/${plural}/${entityId}`
+    const result = await get(url)
+    if (!result.success || !result.data) return []
+
+    const members = extractCollection(result.data)
+    if (!Array.isArray(members)) return []
+
+    return members.map((link: any) => ({
+      linkId: link.id ?? (typeof link['@id'] === 'string' ? link['@id'].split('/').pop() : undefined),
+      constructeurId: typeof link.constructeur === 'string'
+        ? link.constructeur.split('/').pop()!
+        : link.constructeur?.id ?? '',
+      constructeur: typeof link.constructeur === 'object' ? link.constructeur : null,
+      supplierReference: link.supplierReference ?? null,
+    }))
+  }
+
+  const syncLinks = async (
+    entityType: EntityType,
+    entityId: string,
+    originalLinks: ConstructeurLinkEntry[],
+    formLinks: ConstructeurLinkEntry[],
+  ): Promise<void> => {
+    const endpoint = ENDPOINTS[entityType]
+    const key = ENTITY_KEYS[entityType]
+    const plural = ENTITY_PLURALS[entityType]
+    const entityIri = `/api/${plural}/${entityId}`
+
+    const originalMap = new Map(originalLinks.map(l => [l.constructeurId, l]))
+    const formMap = new Map(formLinks.map(l => [l.constructeurId, l]))
+
+    const promises: Promise<any>[] = []
+
+    // Delete removed links
+    for (const [cId, orig] of originalMap) {
+      if (!formMap.has(cId) && orig.linkId) {
+        promises.push(del(`${endpoint}/${orig.linkId}`))
+      }
+    }
+
+    // Create new links
+    for (const [cId, form] of formMap) {
+      if (!originalMap.has(cId)) {
+        promises.push(post(endpoint, {
+          [key]: entityIri,
+          constructeur: `/api/constructeurs/${cId}`,
+          supplierReference: form.supplierReference || null,
+        }))
+      }
+    }
+
+    // Patch modified supplierReference
+    for (const [cId, form] of formMap) {
+      const orig = originalMap.get(cId)
+      if (orig?.linkId && (orig.supplierReference ?? null) !== (form.supplierReference ?? null)) {
+        promises.push(patch(`${endpoint}/${orig.linkId}`, {
+          supplierReference: form.supplierReference || null,
+        }))
+      }
+    }
+
+    await Promise.allSettled(promises)
+  }
+
+  return { fetchLinks, syncLinks }
+}
--- a/app/composables/useDataTable.ts
+++ b/app/composables/useDataTable.ts
@@ -1,4 +1,4 @@
-import { ref, computed, type Ref, type ComputedRef } from 'vue'
+import { ref, computed, watch, type Ref, type ComputedRef } from 'vue'
 import { useUrlState } from './useUrlState'
 import type { DataTableSort, DataTablePagination, DataTableColumnFilters, SortDirection } from '~/shared/types/dataTable'

@@ -22,6 +22,8 @@ export interface UseDataTableOptions {
  persistToUrl?: boolean
  /** Extra URL state params for page-specific filters */
  extraParams?: Record<string, { default: string | number; type?: 'string' | 'number' }>
+  /** Column filter keys to persist in URL (prefixed with `f.` in query string) */
+  columnFilterKeys?: string[]
 }

 export interface UseDataTableReturn {
@@ -56,6 +58,7 @@ export function useDataTable(
    searchDebounceMs = 300,
    persistToUrl = true,
    extraParams = {},
+    columnFilterKeys = [],
  } = options

  let searchTerm: Ref<string>
@@ -64,6 +67,7 @@ export function useDataTable(
  let currentPage: Ref<number>
  let itemsPerPage: Ref<number>
  const filters: Record<string, Ref<string | number>> = {}
+  const columnFilterRefs: Record<string, Ref<string>> = {}

  if (persistToUrl) {
    const paramDefs: Record<string, { default: string | number; type?: 'string' | 'number'; debounce?: number }> = {
@@ -75,6 +79,10 @@ export function useDataTable(
      ...extraParams,
    }

+    for (const key of columnFilterKeys) {
+      paramDefs[`f.${key}`] = { default: '', debounce: 300 }
+    }
+
    const state = useUrlState(paramDefs, {
      onRestore: () => deps.fetchData(),
    })
@@ -88,6 +96,10 @@ export function useDataTable(
    for (const key of Object.keys(extraParams)) {
      filters[key] = (state as Record<string, Ref<string | number>>)[key]!
    }
+
+    for (const key of columnFilterKeys) {
+      columnFilterRefs[key] = (state as Record<string, Ref<string>>)[`f.${key}`]!
+    }
  }
  else {
    searchTerm = ref('')
@@ -137,8 +149,31 @@ export function useDataTable(
    deps.fetchData()
  }

-  // Column filters
-  const columnFilters = ref<DataTableColumnFilters>({})
+  // Column filters — seed from URL-persisted refs
+  const initialColumnFilters: DataTableColumnFilters = {}
+  for (const [key, r] of Object.entries(columnFilterRefs)) {
+    if (r.value) initialColumnFilters[key] = r.value
+  }
+  const columnFilters = ref<DataTableColumnFilters>(initialColumnFilters)
+
+  // Sync columnFilters → URL refs
+  if (persistToUrl && columnFilterKeys.length > 0) {
+    watch(columnFilters, (val) => {
+      for (const key of columnFilterKeys) {
+        columnFilterRefs[key]!.value = val[key] || ''
+      }
+    }, { deep: true })
+
+    // Sync URL refs → columnFilters (back/forward navigation)
+    for (const key of columnFilterKeys) {
+      watch(columnFilterRefs[key]!, (urlVal) => {
+        const current = columnFilters.value[key] || ''
+        if (current !== urlVal) {
+          columnFilters.value = { ...columnFilters.value, [key]: urlVal }
+        }
+      })
+    }
+  }

  const handleColumnFiltersChange = (newFilters: DataTableColumnFilters) => {
    columnFilters.value = newFilters
--- a/app/composables/useMachineDetailData.ts
+++ b/app/composables/useMachineDetailData.ts
@@ -21,7 +21,11 @@ import {
  resolveConstructeurs,
  uniqueConstructeurIds,
  formatConstructeurContact as formatConstructeurContactSummary,
+  parseConstructeurLinksFromApi,
+  constructeurIdsFromLinks,
 } from '~/shared/constructeurUtils'
+import type { ConstructeurLinkEntry } from '~/shared/constructeurUtils'
+import { useConstructeurLinks } from '~/composables/useConstructeurLinks'
 import { useMachineDetailDocuments } from '~/composables/useMachineDetailDocuments'
 import { useMachineDetailCustomFields } from '~/composables/useMachineDetailCustomFields'
 import { useMachineDetailHierarchy } from '~/composables/useMachineDetailHierarchy'
@@ -64,6 +68,11 @@ export function useMachineDetailData(machineId: string) {
  const printAreaRef = ref<HTMLElement | null>(null)
  const saving = ref(false)

+  // Constructeur links
+  const { fetchLinks, syncLinks } = useConstructeurLinks()
+  const constructeurLinks = ref<ConstructeurLinkEntry[]>([])
+  const originalConstructeurLinks = ref<ConstructeurLinkEntry[]>([])
+
  // Machine fields
  const machineName = ref('')
  const machineReference = ref('')
@@ -78,20 +87,15 @@ export function useMachineDetailData(machineId: string) {
  })

  const machineConstructeursDisplay = computed(() => {
-    const ids = uniqueConstructeurIds(
-      machineConstructeurIds.value,
-      (machine.value as AnyRecord)?.constructeurIds,
-      (machine.value as AnyRecord)?.constructeurs,
-      (machine.value as AnyRecord)?.constructeur,
-    )
+    const ids = machineConstructeurIds.value
+    if (!ids.length) return [] as any[]
+    // Extract nested constructeur objects from link entries as candidate pool
+    const linkConstructeurs = constructeurLinks.value
+      .filter(l => l.constructeur && l.constructeur.id)
+      .map(l => l.constructeur!) as any[]
    return resolveConstructeurs(
      ids,
-      Array.isArray((machine.value as AnyRecord)?.constructeurs)
-        ? ((machine.value as AnyRecord).constructeurs as any[])
-        : [],
-      (machine.value as AnyRecord)?.constructeur
-        ? [(machine.value as AnyRecord).constructeur as any]
-        : [],
+      linkConstructeurs,
      constructeurs.value as any,
    ) as any[]
  })
@@ -235,11 +239,12 @@ export function useMachineDetailData(machineId: string) {
    if (machine.value) {
      machineName.value = (machine.value.name as string) || ''
      machineReference.value = (machine.value.reference as string) || ''
-      machineConstructeurIds.value = uniqueConstructeurIds(
-        machine.value.constructeurIds,
-        machine.value.constructeurs,
-        machine.value.constructeur,
-      )
+      // Parse constructeur links from structure response
+      const rawLinks = Array.isArray(machine.value.constructeurs) ? machine.value.constructeurs as any[] : []
+      const parsed = parseConstructeurLinksFromApi(rawLinks)
+      constructeurLinks.value = parsed
+      originalConstructeurLinks.value = parsed.map(l => ({ ...l }))
+      machineConstructeurIds.value = constructeurIdsFromLinks(parsed)
      machineSiteId.value = (machine.value.siteId as string) || (machine.value.site as AnyRecord)?.id as string || ''
    }
  }
@@ -269,6 +274,8 @@ export function useMachineDetailData(machineId: string) {
    machineReference,
    machineSiteId,
    machineConstructeurIds,
+    constructeurLinks,
+    originalConstructeurLinks,
    machineDocumentsLoaded,
    machineComponentLinks,
    machinePieceLinks,
@@ -284,6 +291,7 @@ export function useMachineDetailData(machineId: string) {
    updatePieceApi,
    apiPatch,
    toast,
+    syncLinks,
  })

  // UI methods
@@ -338,6 +346,8 @@ export function useMachineDetailData(machineId: string) {
  const cancelEdition = () => {
    initMachineFields()
    syncMachineCustomFields()
+    constructeurLinks.value = originalConstructeurLinks.value.map(l => ({ ...l }))
+    machineConstructeurIds.value = constructeurIdsFromLinks(constructeurLinks.value)
    isEditMode.value = false
  }

@@ -467,6 +477,7 @@ export function useMachineDetailData(machineId: string) {
    // Machine fields
    machineName, machineReference, machineSiteId, machineConstructeurIds, machineConstructeurId,
    machineConstructeursDisplay, machineConstructeurContact, hasMachineConstructeur,
+    constructeurLinks, originalConstructeurLinks,
    sites,

    // UI state
--- a/app/composables/useMachineDetailUpdates.ts
+++ b/app/composables/useMachineDetailUpdates.ts
@@ -5,7 +5,8 @@
 */

 import type { Ref } from 'vue'
-import { uniqueConstructeurIds } from '~/shared/constructeurUtils'
+import { uniqueConstructeurIds, constructeurIdsFromLinks } from '~/shared/constructeurUtils'
+import type { ConstructeurLinkEntry } from '~/shared/constructeurUtils'

 type AnyRecord = Record<string, unknown>

@@ -15,6 +16,8 @@ export interface UseMachineDetailUpdatesDeps {
  machineReference: Ref<string>
  machineSiteId: Ref<string>
  machineConstructeurIds: Ref<string[]>
+  constructeurLinks: Ref<ConstructeurLinkEntry[]>
+  originalConstructeurLinks: Ref<ConstructeurLinkEntry[]>
  machineDocumentsLoaded: Ref<boolean>
  machineComponentLinks: Ref<AnyRecord[]>
  machinePieceLinks: Ref<AnyRecord[]>
@@ -35,6 +38,12 @@ export interface UseMachineDetailUpdatesDeps {
  updatePieceApi: (id: string, data: any) => Promise<unknown>
  apiPatch: (endpoint: string, data?: unknown) => Promise<any>
  toast: { showInfo: (msg: string) => void }
+  syncLinks: (
+    entityType: 'machine' | 'piece' | 'composant' | 'product',
+    entityId: string,
+    originalLinks: ConstructeurLinkEntry[],
+    formLinks: ConstructeurLinkEntry[],
+  ) => Promise<void>
 }

 export function useMachineDetailUpdates(deps: UseMachineDetailUpdatesDeps) {
@@ -44,6 +53,8 @@ export function useMachineDetailUpdates(deps: UseMachineDetailUpdatesDeps) {
    machineReference,
    machineSiteId,
    machineConstructeurIds,
+    constructeurLinks,
+    originalConstructeurLinks,
    machineComponentLinks,
    machinePieceLinks,
    applyMachineLinks,
@@ -56,19 +67,16 @@ export function useMachineDetailUpdates(deps: UseMachineDetailUpdatesDeps) {
    updatePieceApi,
    apiPatch,
    toast,
+    syncLinks,
  } = deps

  const updateMachineInfo = async () => {
    if (!machine.value) return
    try {
-      const cIds = uniqueConstructeurIds(machineConstructeurIds.value)
-      machineConstructeurIds.value = cIds
-
      const result: any = await updateMachineApi(machine.value.id as string, {
        name: machineName.value,
        reference: machineReference.value,
        siteId: machineSiteId.value || undefined,
-        constructeurIds: cIds,
      } as any)
      if (result.success) {
        const machinePayload =
@@ -82,11 +90,6 @@ export function useMachineDetailUpdates(deps: UseMachineDetailUpdatesDeps) {
            documents: machinePayload.documents || machine.value.documents || [],
            customFieldValues: machinePayload.customFieldValues || machine.value.customFieldValues || [],
          }
-          machineConstructeurIds.value = uniqueConstructeurIds(
-            machine.value!.constructeurIds,
-            machine.value!.constructeurs,
-            machine.value!.constructeur,
-          )
          const linksApplied = applyMachineLinks(result.data)
          if (linksApplied && machine.value) {
            machine.value.componentLinks = machineComponentLinks.value
@@ -95,6 +98,9 @@ export function useMachineDetailUpdates(deps: UseMachineDetailUpdatesDeps) {
          loadProductDocuments().catch(() => {})
        }
      }
+      // Sync constructeur links after entity save
+      await syncLinks('machine', machine.value!.id as string, originalConstructeurLinks.value, constructeurLinks.value)
+      originalConstructeurLinks.value = constructeurLinks.value.map(l => ({ ...l }))
    } catch (error) {
      console.error('Erreur lors de la mise à jour de la machine:', error)
    }
@@ -209,7 +215,13 @@ export function useMachineDetailUpdates(deps: UseMachineDetailUpdatesDeps) {
  }

  const handleMachineConstructeurChange = (value: unknown) => {
-    machineConstructeurIds.value = uniqueConstructeurIds(value)
+    const newIds = uniqueConstructeurIds(value)
+    machineConstructeurIds.value = newIds
+    // Sync constructeurLinks: keep existing entries, add new ones
+    const existingMap = new Map(constructeurLinks.value.map(l => [l.constructeurId, l]))
+    constructeurLinks.value = newIds.map(id =>
+      existingMap.get(id) ?? { constructeurId: id, supplierReference: null },
+    )
  }

  const editComponent = () => {
--- a/app/composables/useMachines.ts
+++ b/app/composables/useMachines.ts
@@ -1,7 +1,6 @@
 import { ref } from 'vue'
 import { useToast } from './useToast'
 import { useApi, type ApiResponse } from './useApi'
-import { buildConstructeurRequestPayload } from '~/shared/constructeurUtils'
 import { extractRelationId, normalizeRelationIds } from '~/shared/apiRelations'
 import { extractCollection } from '~/shared/utils/apiHelpers'

@@ -92,7 +91,7 @@ export function useMachines() {
  const createMachine = async (machineData: Partial<Machine>): Promise<ApiResponse> => {
    loading.value = true
    try {
-      const normalizedPayload = normalizeRelationIds(buildConstructeurRequestPayload(machineData))
+      const normalizedPayload = normalizeRelationIds(machineData as Record<string, unknown>)
      const result = await post('/machines', normalizedPayload)
      if (result.success) {
        const createdMachine = normalizeMachineResponse(result.data) ||
@@ -116,7 +115,7 @@ export function useMachines() {
  const updateMachineData = async (id: string, machineData: Partial<Machine>): Promise<ApiResponse> => {
    loading.value = true
    try {
-      const normalizedPayload = normalizeRelationIds(buildConstructeurRequestPayload(machineData))
+      const normalizedPayload = normalizeRelationIds(machineData as Record<string, unknown>)
      const result = await patch(`/machines/${id}`, normalizedPayload)
      if (result.success) {
        const updatedMachine = normalizeMachineResponse(result.data) ||
--- a/app/composables/usePieceEdit.ts
+++ b/app/composables/usePieceEdit.ts
@@ -7,11 +7,13 @@ import { useApi } from '~/composables/useApi'
 import { useToast } from '~/composables/useToast'
 import { useDocuments } from '~/composables/useDocuments'
 import { useConstructeurs } from '~/composables/useConstructeurs'
+import { useConstructeurLinks } from '~/composables/useConstructeurLinks'
 import { usePieceHistory } from '~/composables/usePieceHistory'
 import { extractRelationId } from '~/shared/apiRelations'
 import { canPreviewDocument } from '~/utils/documentPreview'
 import { formatPieceStructurePreview } from '~/shared/modelUtils'
-import { uniqueConstructeurIds } from '~/shared/constructeurUtils'
+import { uniqueConstructeurIds, constructeurIdsFromLinks } from '~/shared/constructeurUtils'
+import type { ConstructeurLinkEntry } from '~/shared/constructeurUtils'
 import type { PieceModelStructure } from '~/shared/types/inventory'
 import type { ModelType } from '~/services/modelTypes'
 import {
@@ -46,6 +48,7 @@ export function usePieceEdit(pieceId: string) {
  const toast = useToast()
  const { loadDocumentsByPiece, uploadDocuments, deleteDocument } = useDocuments()
  const { ensureConstructeurs } = useConstructeurs()
+  const { fetchLinks, syncLinks } = useConstructeurLinks()
  const {
    history,
    loading: historyLoading,
@@ -82,6 +85,9 @@ export function usePieceEdit(pieceId: string) {
    constructeurIds: [] as string[],
    prix: '' as string,
  })
+  const constructeurLinks = ref<ConstructeurLinkEntry[]>([])
+  const originalConstructeurLinks = ref<ConstructeurLinkEntry[]>([])
+  const constructeurIdsFromForm = computed(() => constructeurIdsFromLinks(constructeurLinks.value))
  const productSelections = ref<(string | null)[]>([])

  const customFieldInputs = ref<CustomFieldInput[]>([])
@@ -303,15 +309,16 @@ export function usePieceEdit(pieceId: string) {
      editionForm.name = currentPiece.name || ''
      editionForm.description = currentPiece.description || ''
      editionForm.reference = currentPiece.reference || ''
-      editionForm.constructeurIds = uniqueConstructeurIds(
-        currentPiece,
-        Array.isArray(currentPiece.constructeurs) ? currentPiece.constructeurs : [],
-        currentPiece.constructeur ? [currentPiece.constructeur] : [],
-      )
+      // Load constructeur links
+      fetchLinks('piece', pieceId).then((links) => {
+        constructeurLinks.value = links
+        originalConstructeurLinks.value = links.map(l => ({ ...l }))
+        editionForm.constructeurIds = constructeurIdsFromLinks(links)
+        if (editionForm.constructeurIds.length) {
+          void ensureConstructeurs(editionForm.constructeurIds)
+        }
+      })
      editionForm.prix = currentPiece.prix !== null && currentPiece.prix !== undefined ? String(currentPiece.prix) : ''
-      if (editionForm.constructeurIds.length) {
-        void ensureConstructeurs(editionForm.constructeurIds)
-      }

      const existingProductIds = Array.isArray(currentPiece.productIds) && currentPiece.productIds.length
        ? currentPiece.productIds.map((id: unknown) => String(id))
@@ -370,12 +377,9 @@ export function usePieceEdit(pieceId: string) {
        ? ''
        : String(editionForm.prix).trim()

-    const constructeurIds = uniqueConstructeurIds(editionForm.constructeurIds)
-
    const payload: Record<string, any> = {
      name: editionForm.name.trim(),
      description: editionForm.description.trim() || null,
-      constructeurIds,
    }

    const reference = editionForm.reference.trim()
@@ -412,6 +416,8 @@ export function usePieceEdit(pieceId: string) {
          ],
          { customFieldInputs, upsertCustomFieldValue, updateCustomFieldValue, toast },
        )
+        await syncLinks('piece', piece.value.id, originalConstructeurLinks.value, constructeurLinks.value)
+        originalConstructeurLinks.value = constructeurLinks.value.map(l => ({ ...l }))
        toast.showSuccess('Pièce mise à jour avec succès.')
      }
    }
@@ -441,6 +447,9 @@ export function usePieceEdit(pieceId: string) {
    previewVisible,
    selectedTypeId,
    editionForm,
+    constructeurLinks,
+    originalConstructeurLinks,
+    constructeurIdsFromForm,
    productSelections,
    customFieldInputs,
    canEdit,
--- a/app/composables/usePieces.ts
+++ b/app/composables/usePieces.ts
@@ -1,7 +1,7 @@
 import { ref } from 'vue'
 import { useToast } from './useToast'
 import { useApi } from './useApi'
-import { buildConstructeurRequestPayload, uniqueConstructeurIds } from '~/shared/constructeurUtils'
+import { uniqueConstructeurIds } from '~/shared/constructeurUtils'
 import { useConstructeurs, type Constructeur } from './useConstructeurs'
 import { extractRelationId, normalizeRelationIds } from '~/shared/apiRelations'
 import { extractCollection } from '~/shared/utils/apiHelpers'
@@ -196,7 +196,8 @@ export function usePieces() {
  const createPiece = async (pieceData: Partial<Piece>): Promise<PieceSingleResult> => {
    loading.value = true
    try {
-      const normalizedPayload = normalizeRelationIds(buildConstructeurRequestPayload(pieceData))
+      const { constructeurIds, constructeurs, constructeurId, constructeur, ...cleanPayload } = pieceData as any
+      const normalizedPayload = normalizeRelationIds(cleanPayload)
      const result = await post('/pieces', normalizedPayload)
      if (result.success && result.data) {
        const enriched = await withResolvedConstructeurs(result.data as Piece)
@@ -223,7 +224,8 @@ export function usePieces() {
  const updatePieceData = async (id: string, pieceData: Partial<Piece>): Promise<PieceSingleResult> => {
    loading.value = true
    try {
-      const normalizedPayload = normalizeRelationIds(buildConstructeurRequestPayload(pieceData))
+      const { constructeurIds, constructeurs, constructeurId, constructeur, ...cleanPayload } = pieceData as any
+      const normalizedPayload = normalizeRelationIds(cleanPayload)
      const result = await patch(`/pieces/${id}`, normalizedPayload)
      if (result.success && result.data) {
        const updated = await withResolvedConstructeurs(result.data as Piece)
--- a/app/composables/useProducts.ts
+++ b/app/composables/useProducts.ts
@@ -2,7 +2,7 @@ import { ref } from 'vue'
 import { useToast } from './useToast'
 import { useApi } from './useApi'
 import { humanizeError } from '~/shared/utils/errorMessages'
-import { buildConstructeurRequestPayload, uniqueConstructeurIds } from '~/shared/constructeurUtils'
+import { uniqueConstructeurIds } from '~/shared/constructeurUtils'
 import { useConstructeurs, type Constructeur } from './useConstructeurs'
 import { extractRelationId, normalizeRelationIds } from '~/shared/apiRelations'
 import { extractCollection } from '~/shared/utils/apiHelpers'
@@ -196,7 +196,8 @@ export function useProducts() {
  }

  const createProduct = async (payload: Partial<Product>): Promise<ProductSingleResult> => {
-    const normalizedPayload = normalizeRelationIds(buildConstructeurRequestPayload(payload))
+    const { constructeurIds, constructeurs, constructeurId, constructeur, ...cleanPayload } = payload as any
+    const normalizedPayload = normalizeRelationIds(cleanPayload)
    loading.value = true
    error.value = null
    try {
@@ -225,7 +226,8 @@ export function useProducts() {
  }

  const updateProduct = async (id: string, payload: Partial<Product>): Promise<ProductSingleResult> => {
-    const normalizedPayload = normalizeRelationIds(buildConstructeurRequestPayload(payload))
+    const { constructeurIds, constructeurs, constructeurId, constructeur, ...cleanPayload } = payload as any
+    const normalizedPayload = normalizeRelationIds(cleanPayload)
    loading.value = true
    error.value = null
    try {
--- a/app/pages/comments.vue
+++ b/app/pages/comments.vue
@@ -166,6 +166,7 @@ const table = useDataTable(
      status: { default: 'open' },
      entityType: { default: '' },
    },
+    columnFilterKeys: ['entity'],
  },
 )

--- a/app/pages/component-catalog.vue
+++ b/app/pages/component-catalog.vue
@@ -144,7 +144,7 @@ const { componentTypes, loadComponentTypes } = useComponentTypes()

 const table = useDataTable(
  { fetchData: fetchComposants },
-  { defaultSort: 'name', defaultDirection: 'asc', defaultPerPage: 20, persistToUrl: true },
+  { defaultSort: 'name', defaultDirection: 'asc', defaultPerPage: 20, persistToUrl: true, columnFilterKeys: ['typeComposant'] },
 )

 const columns = [
--- a/app/pages/component/[id]/edit.vue
+++ b/app/pages/component/[id]/edit.vue
@@ -141,6 +141,11 @@
          </div>
        </div>

+        <ConstructeurLinksTable
+          v-if="constructeurLinks.length"
+          v-model="constructeurLinks"
+        />
+
        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
          <div class="form-control">
            <label class="label">
@@ -350,13 +355,15 @@
 </template>

 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import { useRoute } from '#imports'
 import { useComponentEdit } from '~/composables/useComponentEdit'
 import { useDocuments } from '~/composables/useDocuments'
+import { useConstructeurs } from '~/composables/useConstructeurs'

 const route = useRoute()
 const { updateDocument } = useDocuments()
+const { getConstructeurById } = useConstructeurs()
 const versionRefreshKey = ref(0)

 const {
@@ -371,6 +378,8 @@ const {
  previewVisible,
  selectedTypeId,
  editionForm,
+  constructeurLinks,
+  constructeurIdsFromForm,
  customFieldInputs,
  historyFieldLabels,
  canEdit,
@@ -401,6 +410,26 @@ const {
  fetchComponent,
 } = useComponentEdit(String(route.params.id))

+// Sync constructeurIds → constructeurLinks when IDs are added via ConstructeurSelect
+watch(
+  () => editionForm.constructeurIds,
+  (ids) => {
+    const currentIds = new Set(constructeurLinks.value.map(l => l.constructeurId))
+    for (const id of ids) {
+      if (!currentIds.has(id)) {
+        const resolved = getConstructeurById(id)
+        constructeurLinks.value.push({
+          constructeurId: id,
+          constructeur: resolved ? { id: resolved.id, name: resolved.name } : null,
+          supplierReference: null,
+        })
+      }
+    }
+    // Remove links whose ID was removed from the select
+    constructeurLinks.value = constructeurLinks.value.filter(l => ids.includes(l.constructeurId))
+  },
+)
+
 const editingDocument = ref<any | null>(null)
 const editModalVisible = ref(false)

--- a/app/pages/component/[id]/index.vue
+++ b/app/pages/component/[id]/index.vue
@@ -128,7 +128,7 @@

          <!-- Référence + Fournisseurs (if value or edit mode) -->
          <div
-            v-if="isEditMode || component.reference || editionForm.constructeurIds.length"
+            v-if="isEditMode || component.reference || constructeurLinks.length"
            class="grid grid-cols-1 gap-4 md:grid-cols-2"
          >
            <div v-if="isEditMode || component.reference" class="form-control">
@@ -148,7 +148,7 @@
              </div>
            </div>

-            <div v-if="isEditMode || editionForm.constructeurIds.length" class="form-control">
+            <div v-if="isEditMode || constructeurLinks.length" class="form-control">
              <label class="label">
                <span class="label-text">Fournisseur</span>
              </label>
@@ -160,18 +160,20 @@
                placeholder="Rechercher un ou plusieurs fournisseurs..."
                :initial-options="component?.constructeurs || []"
              />
-              <div v-else class="flex flex-wrap gap-2">
-                <span
-                  v-for="id in editionForm.constructeurIds"
-                  :key="id"
-                  class="badge badge-outline"
-                >
-                  {{ getConstructeurById(id)?.name || id }}
-                </span>
-              </div>
            </div>
          </div>

+          <!-- Constructeur links table -->
+          <ConstructeurLinksTable
+            v-if="isEditMode && constructeurLinks.length"
+            v-model="constructeurLinks"
+          />
+          <ConstructeurLinksTable
+            v-else-if="!isEditMode && constructeurLinks.length"
+            :model-value="constructeurLinks"
+            :readonly="true"
+          />
+
          <!-- Prix (if value or edit mode) -->
          <div v-if="isEditMode || component.prix" class="grid grid-cols-1 gap-4 md:grid-cols-2">
            <div class="form-control">
@@ -254,7 +256,7 @@
                    </div>
                  </template>
                  <div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center gap-2">
-                    {{ resolvePieceLabel(slot.selectedPieceId) || '— Non sélectionné' }}
+                    {{ slot.selectedPieceName || '— Non sélectionné' }}
                    <span v-if="slot.quantity > 1" class="badge badge-sm">x{{ slot.quantity }}</span>
                  </div>
                </div>
@@ -281,7 +283,7 @@
                    />
                  </template>
                  <div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center">
-                    {{ resolveProductLabel(slot.selectedProductId) || '— Non sélectionné' }}
+                    {{ slot.selectedProductName || '— Non sélectionné' }}
                  </div>
                </div>
              </div>
@@ -307,7 +309,7 @@
                    />
                  </template>
                  <div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center">
-                    {{ resolveSubcomponentLabel(slot.selectedComponentId) || '— Non sélectionné' }}
+                    {{ slot.selectedComponentName || '— Non sélectionné' }}
                  </div>
                </div>
              </div>
@@ -435,12 +437,13 @@
 </template>

 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { useRoute } from '#imports'
 import { useComponentEdit } from '~/composables/useComponentEdit'
 import { useDocuments } from '~/composables/useDocuments'
 import { usePermissions } from '~/composables/usePermissions'
 import { useConstructeurs } from '~/composables/useConstructeurs'
+import type { ConstructeurLinkEntry } from '~/shared/constructeurUtils'

 const route = useRoute()
 const { canEdit } = usePermissions()
@@ -461,6 +464,8 @@ const {
  previewVisible,
  selectedTypeId,
  editionForm,
+  constructeurLinks,
+  constructeurIdsFromForm,
  customFieldInputs,
  historyFieldLabels,
  canSubmit,
@@ -497,6 +502,26 @@ const submitEdition = async () => {
  }
 }

+// Sync constructeurIds → constructeurLinks when IDs are added via ConstructeurSelect
+watch(
+  () => editionForm.constructeurIds,
+  (ids) => {
+    const currentIds = new Set(constructeurLinks.value.map(l => l.constructeurId))
+    for (const id of ids) {
+      if (!currentIds.has(id)) {
+        const resolved = getConstructeurById(id)
+        constructeurLinks.value.push({
+          constructeurId: id,
+          constructeur: resolved ? { id: resolved.id, name: resolved.name } : null,
+          supplierReference: null,
+        })
+      }
+    }
+    // Remove links whose ID was removed from the select
+    constructeurLinks.value = constructeurLinks.value.filter(l => ids.includes(l.constructeurId))
+  },
+)
+
 const editingDocument = ref<any | null>(null)
 const editModalVisible = ref(false)

--- a/app/pages/component/create.vue
+++ b/app/pages/component/create.vue
@@ -92,6 +92,11 @@
          </div>
        </div>

+        <ConstructeurLinksTable
+          v-if="constructeurLinks.length"
+          v-model="constructeurLinks"
+        />
+
        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
          <div class="form-control">
            <label class="label">
@@ -215,10 +220,16 @@
 </template>

 <script setup lang="ts">
+import { watch } from 'vue'
+import { useConstructeurs } from '~/composables/useConstructeurs'
+
+const { getConstructeurById } = useConstructeurs()
+
 const {
  selectedTypeId,
  submitting,
  creationForm,
+  constructeurLinks,
  customFieldInputs,
  structureAssignments,
  selectedDocuments,
@@ -249,4 +260,23 @@ const {
  resolveSubcomponentLabel,
  submitCreation,
 } = useComponentCreate()
+
+// Sync constructeurIds → constructeurLinks when IDs are added via ConstructeurSelect
+watch(
+  () => creationForm.constructeurIds,
+  (ids) => {
+    const currentIds = new Set(constructeurLinks.value.map(l => l.constructeurId))
+    for (const id of ids) {
+      if (!currentIds.has(id)) {
+        const resolved = getConstructeurById(id)
+        constructeurLinks.value.push({
+          constructeurId: id,
+          constructeur: resolved ? { id: resolved.id, name: resolved.name } : null,
+          supplierReference: null,
+        })
+      }
+    }
+    constructeurLinks.value = constructeurLinks.value.filter(l => ids.includes(l.constructeurId))
+  },
+)
 </script>
--- a/app/pages/machine/[id].vue
+++ b/app/pages/machine/[id].vue
@@ -64,6 +64,7 @@
        :machine-constructeur-ids="d.machineConstructeurIds.value"
        :machine-constructeurs-display="d.machineConstructeursDisplay.value"
        :has-machine-constructeur="d.hasMachineConstructeur.value"
+        :constructeur-links="d.constructeurLinks.value"
        :visible-custom-fields="d.visibleMachineCustomFields.value"
        :get-machine-field-id="d.getMachineFieldId"
        :machine-id="machineId"
@@ -72,6 +73,8 @@
        @update:machine-reference="d.machineReference.value = $event"
        @update:machine-site-id="d.machineSiteId.value = $event"
        @update:constructeur-ids="d.handleMachineConstructeurChange"
+        @update:constructeur-links="d.constructeurLinks.value = $event"
+        @remove-constructeur-link="handleRemoveConstructeurLink"
        @set-custom-field-value="d.setMachineCustomFieldValue"
        @custom-fields-saved="() => { d.loadMachineData(); refreshVersions() }"
      />
@@ -196,9 +199,9 @@
        </div>
        <h3 class="text-lg font-semibold text-base-content mb-1">Machine non trouvée</h3>
        <p class="text-sm text-base-content/50 mb-6">La machine avec l'ID "{{ machineId }}" n'existe pas ou a été supprimée.</p>
-        <NuxtLink to="/machines" class="btn btn-primary">
+        <button type="button" class="btn btn-primary" @click="$router.back()">
          Retour aux machines
-        </NuxtLink>
+        </button>
      </div>
    </div>
    </main>
@@ -280,6 +283,11 @@ const openAddModal = (kind) => {
  addModalOpen.value = true
 }

+const handleRemoveConstructeurLink = (constructeurId) => {
+  const ids = d.machineConstructeurIds.value.filter(id => id !== constructeurId)
+  d.handleMachineConstructeurChange(ids)
+}
+
 const handleAddEntity = async (entityId) => {
  if (addModalKind.value === 'component') {
    await d.addComponentLink(entityId)
--- a/app/pages/machines/index.vue
+++ b/app/pages/machines/index.vue
@@ -120,11 +120,12 @@
 </template>

 <script setup>
-import { ref, reactive, computed, onMounted } from 'vue'
+import { ref, reactive, computed, onMounted, watch } from 'vue'
 import { useMachines } from '~/composables/useMachines'
 import { useSites } from '~/composables/useSites'
 import { useToast } from '~/composables/useToast'
 import { humanizeError } from '~/shared/utils/errorMessages'
+import { useUrlState } from '~/composables/useUrlState'
 import IconLucidePlus from '~icons/lucide/plus'
 import IconLucideFactory from '~icons/lucide/factory'
 import IconLucideMapPin from '~icons/lucide/map-pin'
@@ -135,8 +136,28 @@ const { machines, loading, loadMachines, deleteMachine } = useMachines()
 const { sites, loadSites } = useSites()
 const toast = useToast()

+const urlState = useUrlState({
+  q: { default: '', debounce: 300 },
+  sites: { default: '' },
+})
+
+const searchQuery = urlState.q
 const selectedSites = reactive(new Set())
-const searchQuery = ref('')
+
+// Sync URL → selectedSites on load and back/forward
+watch(urlState.sites, (val) => {
+  selectedSites.clear()
+  if (val) {
+    for (const id of String(val).split(',')) {
+      if (id) selectedSites.add(id)
+    }
+  }
+}, { immediate: true })
+
+// Sync selectedSites → URL
+watch(() => [...selectedSites], (ids) => {
+  urlState.sites.value = ids.join(',')
+})

 // Enrichir les machines avec les objets site complets
 const enrichedMachines = computed(() => {
--- a/app/pages/piece-category/[id]/edit.vue
+++ b/app/pages/piece-category/[id]/edit.vue
@@ -112,6 +112,8 @@ const loadCategory = async () => {
      category: response.category,
      notes: response.notes ?? response.description ?? '',
      structure: (response.structure as PieceModelStructure | null) ?? undefined,
+      referenceFormula: response.referenceFormula ?? null,
+      requiredFieldsForReference: response.requiredFieldsForReference ?? null,
    }

  } catch (error) {
--- a/app/pages/piece/[id].vue
+++ b/app/pages/piece/[id].vue
@@ -146,27 +146,29 @@
              </div>
            </div>

-            <div v-if="isEditMode || editionForm.constructeurIds.length" class="form-control">
+            <div v-if="isEditMode || constructeurLinks.length" class="form-control">
              <label class="label">
                <span class="label-text">Fournisseur</span>
              </label>
-              <ConstructeurSelect
-                v-if="isEditMode"
-                v-model="editionForm.constructeurIds"
-                class="w-full"
-                :disabled="!canEdit || saving"
-                placeholder="Rechercher un ou plusieurs fournisseurs..."
-                :initial-options="piece?.constructeurs || []"
+              <template v-if="isEditMode">
+                <ConstructeurSelect
+                  v-model="editionForm.constructeurIds"
+                  class="w-full"
+                  :disabled="!canEdit || saving"
+                  placeholder="Rechercher un ou plusieurs fournisseurs..."
+                  :initial-options="piece?.constructeurs || []"
+                />
+                <ConstructeurLinksTable
+                  v-model="constructeurLinks"
+                  class="mt-2"
+                  @remove="handleConstructeurRemoved"
+                />
+              </template>
+              <ConstructeurLinksTable
+                v-else
+                :model-value="constructeurLinks"
+                readonly
              />
-              <div v-else class="flex flex-wrap gap-2">
-                <span
-                  v-for="id in editionForm.constructeurIds"
-                  :key="id"
-                  class="badge badge-outline"
-                >
-                  {{ getConstructeurById(id)?.name || id }}
-                </span>
-              </div>
            </div>
          </div>

@@ -389,16 +391,14 @@
 </template>

 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { useRoute } from '#imports'
 import { usePieceEdit } from '~/composables/usePieceEdit'
 import { useDocuments } from '~/composables/useDocuments'
 import { usePermissions } from '~/composables/usePermissions'
-import { useConstructeurs } from '~/composables/useConstructeurs'

 const route = useRoute()
 const { canEdit } = usePermissions()
-const { getConstructeurById } = useConstructeurs()
 const { updateDocument } = useDocuments()

 const isEditMode = ref(false)
@@ -416,6 +416,7 @@ const {
  previewVisible,
  selectedTypeId,
  editionForm,
+  constructeurLinks,
  productSelections,
  customFieldInputs,
  pieceTypeList,
@@ -448,6 +449,18 @@ const submitEdition = async () => {
  }
 }

+// Sync ConstructeurSelect changes → constructeurLinks
+watch(() => editionForm.constructeurIds, (newIds) => {
+  const existing = new Map(constructeurLinks.value.map(l => [l.constructeurId, l]))
+  constructeurLinks.value = newIds.map(id =>
+    existing.get(id) || { constructeurId: id, supplierReference: null },
+  )
+})
+
+const handleConstructeurRemoved = (constructeurId: string) => {
+  editionForm.constructeurIds = editionForm.constructeurIds.filter(id => id !== constructeurId)
+}
+
 const editingDocument = ref<any | null>(null)
 const editModalVisible = ref(false)

--- a/app/pages/pieces-catalog.vue
+++ b/app/pages/pieces-catalog.vue
@@ -171,7 +171,7 @@ const { pieceTypes, loadPieceTypes } = usePieceTypes()

 const table = useDataTable(
  { fetchData: fetchPieces },
-  { defaultSort: 'name', defaultDirection: 'asc', defaultPerPage: 20, persistToUrl: true },
+  { defaultSort: 'name', defaultDirection: 'asc', defaultPerPage: 20, persistToUrl: true, columnFilterKeys: ['typePiece'] },
 )

 const columns = [
--- a/app/pages/pieces/create.vue
+++ b/app/pages/pieces/create.vue
@@ -91,6 +91,10 @@
            />
          </div>
        </div>
+        <ConstructeurLinksTable
+          v-if="constructeurLinks.length"
+          v-model="constructeurLinks"
+        />

        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
          <div class="form-control">
@@ -213,6 +217,7 @@
 import { computed, onMounted, reactive, ref, watch } from 'vue'
 import { useRoute, useRouter } from '#imports'
 import ConstructeurSelect from '~/components/ConstructeurSelect.vue'
+import ConstructeurLinksTable from '~/components/ConstructeurLinksTable.vue'
 import DocumentUpload from '~/components/DocumentUpload.vue'
 import ProductSelect from '~/components/ProductSelect.vue'
 import SearchSelect from '~/components/common/SearchSelect.vue'
@@ -222,8 +227,11 @@ import { useToast } from '~/composables/useToast'
 import { humanizeError } from '~/shared/utils/errorMessages'
 import { useCustomFields } from '~/composables/useCustomFields'
 import { useDocuments } from '~/composables/useDocuments'
+import { useConstructeurLinks } from '~/composables/useConstructeurLinks'
+import { useConstructeurs } from '~/composables/useConstructeurs'
 import { formatPieceStructurePreview } from '~/shared/modelUtils'
-import { uniqueConstructeurIds } from '~/shared/constructeurUtils'
+import { constructeurIdsFromLinks } from '~/shared/constructeurUtils'
+import type { ConstructeurLinkEntry } from '~/shared/constructeurUtils'
 import type { PieceModelStructure } from '~/shared/types/inventory'
 import type { ModelType } from '~/services/modelTypes'
 import {
@@ -255,6 +263,8 @@ const { createPiece } = usePieces()
 const toast = useToast()
 const { upsertCustomFieldValue, updateCustomFieldValue } = useCustomFields()
 const { uploadDocuments } = useDocuments()
+const { syncLinks } = useConstructeurLinks()
+const { getConstructeurById } = useConstructeurs()
 const { canEdit } = usePermissions()

 const initialTypeId = ref<string>(typeof route.query.typeId === 'string' ? route.query.typeId : '')
@@ -267,6 +277,7 @@ const creationForm = reactive({
  constructeurIds: [] as string[],
  prix: '' as string,
 })
+const constructeurLinks = ref<ConstructeurLinkEntry[]>([])
 const productSelections = ref<(string | null)[]>([])

 const lastSuggestedName = ref('')
@@ -380,6 +391,7 @@ const clearCreationForm = () => {
  creationForm.description = ''
  creationForm.reference = ''
  creationForm.constructeurIds = []
+  constructeurLinks.value = []
  creationForm.prix = ''
  productSelections.value = []
  lastSuggestedName.value = ''
@@ -411,8 +423,6 @@ const submitCreation = async () => {
    payload.reference = reference
  }

-  payload.constructeurIds = uniqueConstructeurIds(creationForm.constructeurIds)
-
  const normalizedProductIds = collectNormalizedProductIds(
    productRequirementEntries.value,
    productSelections.value,
@@ -448,6 +458,10 @@ const submitCreation = async () => {
        ],
        { customFieldInputs, upsertCustomFieldValue, updateCustomFieldValue, toast },
      )
+      // Sync constructeur links after creation
+      if (constructeurLinks.value.length) {
+        await syncLinks('piece', createdPiece.id, [], constructeurLinks.value)
+      }
      if (selectedDocuments.value.length && createdPiece.id) {
        uploadingDocuments.value = true
        const uploadResult = await uploadDocuments(
@@ -478,6 +492,26 @@ const submitCreation = async () => {
  }
 }

+// Sync constructeurIds → constructeurLinks when IDs are added via ConstructeurSelect
+watch(
+  () => creationForm.constructeurIds,
+  (ids) => {
+    const currentIds = new Set(constructeurLinks.value.map(l => l.constructeurId))
+    for (const id of ids) {
+      if (!currentIds.has(id)) {
+        const resolved = getConstructeurById(id)
+        constructeurLinks.value.push({
+          constructeurId: id,
+          constructeur: resolved ? { id: resolved.id, name: resolved.name } : null,
+          supplierReference: null,
+        })
+      }
+    }
+    constructeurLinks.value = constructeurLinks.value.filter(l => ids.includes(l.constructeurId))
+  },
+  { deep: true },
+)
+
 onMounted(async () => {
  await loadPieceTypes()
 })
--- a/app/pages/product-catalog.vue
+++ b/app/pages/product-catalog.vue
@@ -175,7 +175,7 @@ const toast = useToast()

 const table = useDataTable(
  { fetchData: fetchProducts },
-  { defaultSort: 'name', defaultDirection: 'asc', defaultPerPage: 20, persistToUrl: true },
+  { defaultSort: 'name', defaultDirection: 'asc', defaultPerPage: 20, persistToUrl: true, columnFilterKeys: ['typeProduct'] },
 )

 const errorMessage = computed(() => (typeof error.value === 'string' && error.value.length ? error.value : null))
--- a/app/pages/product/[id]/edit.vue
+++ b/app/pages/product/[id]/edit.vue
@@ -105,6 +105,11 @@
          </div>
        </div>

+        <ConstructeurLinksTable
+          v-if="constructeurLinks.length"
+          v-model="constructeurLinks"
+        />
+
        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
          <div class="form-control">
            <label class="label">
@@ -237,9 +242,11 @@ import { useToast } from '~/composables/useToast'
 import { humanizeError } from '~/shared/utils/errorMessages'
 import { useDocuments } from '~/composables/useDocuments'
 import { useConstructeurs } from '~/composables/useConstructeurs'
+import { useConstructeurLinks } from '~/composables/useConstructeurLinks'
 import { useProductHistory } from '~/composables/useProductHistory'
 import { formatProductStructurePreview, normalizeProductStructureForSave } from '~/shared/modelUtils'
-import { uniqueConstructeurIds } from '~/shared/constructeurUtils'
+import { constructeurIdsFromLinks } from '~/shared/constructeurUtils'
+import type { ConstructeurLinkEntry } from '~/shared/constructeurUtils'
 import { getModelType } from '~/services/modelTypes'
 import type { ProductModelStructure } from '~/shared/types/inventory'
 import { canPreviewDocument } from '~/utils/documentPreview'
@@ -263,7 +270,8 @@ const {
  deleteDocument: deleteProductDocument,
  updateDocument,
 } = useDocuments()
-const { ensureConstructeurs } = useConstructeurs()
+const { ensureConstructeurs, getConstructeurById } = useConstructeurs()
+const { fetchLinks, syncLinks } = useConstructeurLinks()
 const {
  history,
  loading: historyLoading,
@@ -286,6 +294,9 @@ const previewVisible = ref(false)
 const editingDocument = ref<any | null>(null)
 const editModalVisible = ref(false)

+const constructeurLinks = ref<ConstructeurLinkEntry[]>([])
+const originalConstructeurLinks = ref<ConstructeurLinkEntry[]>([])
+
 const historyFieldLabels: Record<string, string> = {
  name: 'Nom',
  reference: 'Référence',
@@ -457,18 +468,19 @@ const hydrateForm = () => {
  }
  editionForm.name = product.value.name || ''
  editionForm.reference = product.value.reference || ''
-  editionForm.constructeurIds = uniqueConstructeurIds(
-    product.value,
-    Array.isArray(product.value.constructeurs) ? product.value.constructeurs : [],
-  )
+  // Load constructeur links
+  fetchLinks('product', String(route.params.id)).then((links) => {
+    constructeurLinks.value = links
+    originalConstructeurLinks.value = links.map(l => ({ ...l }))
+    editionForm.constructeurIds = constructeurIdsFromLinks(links)
+    if (editionForm.constructeurIds.length) {
+      void ensureConstructeurs(editionForm.constructeurIds)
+    }
+  })
  editionForm.supplierPrice = product.value.supplierPrice !== null && product.value.supplierPrice !== undefined
    ? String(product.value.supplierPrice)
    : ''
  refreshCustomFieldInputs(structure.value, product.value.customFieldValues)
-  if (editionForm.constructeurIds.length) {
-    // Smart-cached + deduped — fire-and-forget, ConstructeurSelect handles its own loading
-    ensureConstructeurs(editionForm.constructeurIds).catch(() => {})
-  }
 }

 watch(
@@ -486,12 +498,9 @@ const submitEdition = async () => {
    return
  }

-  const constructeurIds = uniqueConstructeurIds(editionForm.constructeurIds)
-
  const payload: Record<string, any> = {
    name: editionForm.name.trim(),
    reference: editionForm.reference.trim() || null,
-    constructeurIds,
  }

  const rawPrice = typeof editionForm.supplierPrice === 'string'
@@ -518,6 +527,8 @@ const submitEdition = async () => {
        toast.showError(`Impossible d'enregistrer ${failedFields.length} champ(s): ${failedFields.join(', ')}`)
        return
      }
+      await syncLinks('product', product.value.id, originalConstructeurLinks.value, constructeurLinks.value)
+      originalConstructeurLinks.value = constructeurLinks.value.map(l => ({ ...l }))
      toast.showSuccess('Produit mis à jour avec succès')
      versionRefreshKey.value++
    }
@@ -528,6 +539,25 @@ const submitEdition = async () => {
  }
 }

+// Sync constructeurIds → constructeurLinks when IDs are added via ConstructeurSelect
+watch(
+  () => editionForm.constructeurIds,
+  (ids) => {
+    const currentIds = new Set(constructeurLinks.value.map(l => l.constructeurId))
+    for (const id of ids) {
+      if (!currentIds.has(id)) {
+        const resolved = getConstructeurById(id)
+        constructeurLinks.value.push({
+          constructeurId: id,
+          constructeur: resolved ? { id: resolved.id, name: resolved.name } : null,
+          supplierReference: null,
+        })
+      }
+    }
+    constructeurLinks.value = constructeurLinks.value.filter(l => ids.includes(l.constructeurId))
+  },
+)
+
 onMounted(async () => {
  await loadProduct()
 })
--- a/app/pages/product/[id]/index.vue
+++ b/app/pages/product/[id]/index.vue
@@ -133,6 +133,17 @@
            </div>
          </div>

+          <!-- Constructeur links table -->
+          <ConstructeurLinksTable
+            v-if="isEditMode && constructeurLinks.length"
+            v-model="constructeurLinks"
+          />
+          <ConstructeurLinksTable
+            v-else-if="!isEditMode && constructeurLinks.length"
+            :model-value="constructeurLinks"
+            :readonly="true"
+          />
+
          <!-- Prix fournisseur (if value or edit mode) -->
          <div v-if="isEditMode || product.supplierPrice" class="grid grid-cols-1 gap-4 md:grid-cols-2">
            <div class="form-control">
@@ -303,10 +314,12 @@ import { useToast } from '~/composables/useToast'
 import { humanizeError } from '~/shared/utils/errorMessages'
 import { useDocuments } from '~/composables/useDocuments'
 import { useConstructeurs } from '~/composables/useConstructeurs'
+import { useConstructeurLinks } from '~/composables/useConstructeurLinks'
 import { useProductHistory } from '~/composables/useProductHistory'
 import { usePermissions } from '~/composables/usePermissions'
 import { formatProductStructurePreview, normalizeProductStructureForSave } from '~/shared/modelUtils'
-import { uniqueConstructeurIds } from '~/shared/constructeurUtils'
+import { constructeurIdsFromLinks } from '~/shared/constructeurUtils'
+import type { ConstructeurLinkEntry } from '~/shared/constructeurUtils'
 import { getModelType } from '~/services/modelTypes'
 import type { ProductModelStructure } from '~/shared/types/inventory'
 import { canPreviewDocument } from '~/utils/documentPreview'
@@ -330,6 +343,7 @@ const {
  updateDocument,
 } = useDocuments()
 const { ensureConstructeurs, getConstructeurById } = useConstructeurs()
+const { fetchLinks, syncLinks } = useConstructeurLinks()
 const {
  history,
  loading: historyLoading,
@@ -339,6 +353,9 @@ const {

 const isEditMode = ref(false)

+const constructeurLinks = ref<ConstructeurLinkEntry[]>([])
+const originalConstructeurLinks = ref<ConstructeurLinkEntry[]>([])
+
 const product = ref<any | null>(null)
 const productType = ref<any | null>(null)
 const structure = ref<ProductModelStructure | null>(null)
@@ -529,17 +546,19 @@ const hydrateForm = () => {
  }
  editionForm.name = product.value.name || ''
  editionForm.reference = product.value.reference || ''
-  editionForm.constructeurIds = uniqueConstructeurIds(
-    product.value,
-    Array.isArray(product.value.constructeurs) ? product.value.constructeurs : [],
-  )
+  // Load constructeur links
+  fetchLinks('product', String(route.params.id)).then((links) => {
+    constructeurLinks.value = links
+    originalConstructeurLinks.value = links.map(l => ({ ...l }))
+    editionForm.constructeurIds = constructeurIdsFromLinks(links)
+    if (editionForm.constructeurIds.length) {
+      void ensureConstructeurs(editionForm.constructeurIds)
+    }
+  })
  editionForm.supplierPrice = product.value.supplierPrice !== null && product.value.supplierPrice !== undefined
    ? String(product.value.supplierPrice)
    : ''
  refreshCustomFieldInputs(structure.value, product.value.customFieldValues)
-  if (editionForm.constructeurIds.length) {
-    ensureConstructeurs(editionForm.constructeurIds).catch(() => {})
-  }
 }

 watch(
@@ -557,12 +576,9 @@ const submitEdition = async () => {
    return
  }

-  const constructeurIds = uniqueConstructeurIds(editionForm.constructeurIds)
-
  const payload: Record<string, any> = {
    name: editionForm.name.trim(),
    reference: editionForm.reference.trim() || null,
-    constructeurIds,
  }

  const rawPrice = typeof editionForm.supplierPrice === 'string'
@@ -589,6 +605,8 @@ const submitEdition = async () => {
        toast.showError(`Impossible d'enregistrer ${failedFields.length} champ(s): ${failedFields.join(', ')}`)
        return
      }
+      await syncLinks('product', product.value.id, originalConstructeurLinks.value, constructeurLinks.value)
+      originalConstructeurLinks.value = constructeurLinks.value.map(l => ({ ...l }))
      toast.showSuccess('Produit mis à jour avec succès')
      await loadProduct()
      isEditMode.value = false
@@ -600,6 +618,25 @@ const submitEdition = async () => {
  }
 }

+// Sync constructeurIds → constructeurLinks when IDs are added via ConstructeurSelect
+watch(
+  () => editionForm.constructeurIds,
+  (ids) => {
+    const currentIds = new Set(constructeurLinks.value.map(l => l.constructeurId))
+    for (const id of ids) {
+      if (!currentIds.has(id)) {
+        const resolved = getConstructeurById(id)
+        constructeurLinks.value.push({
+          constructeurId: id,
+          constructeur: resolved ? { id: resolved.id, name: resolved.name } : null,
+          supplierReference: null,
+        })
+      }
+    }
+    constructeurLinks.value = constructeurLinks.value.filter(l => ids.includes(l.constructeurId))
+  },
+)
+
 onMounted(async () => {
  await loadProduct()
  if (route.query.edit === 'true' && canEdit.value) {
--- a/app/pages/product/create.vue
+++ b/app/pages/product/create.vue
@@ -79,6 +79,11 @@
          </div>
        </div>

+        <ConstructeurLinksTable
+          v-if="constructeurLinks.length"
+          v-model="constructeurLinks"
+        />
+
        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
          <div class="form-control">
            <label class="label">
@@ -175,7 +180,10 @@ import { useToast } from '~/composables/useToast'
 import { useCustomFields } from '~/composables/useCustomFields'
 import { useDocuments } from '~/composables/useDocuments'
 import { formatProductStructurePreview, normalizeProductStructureForSave } from '~/shared/modelUtils'
-import { uniqueConstructeurIds } from '~/shared/constructeurUtils'
+import { constructeurIdsFromLinks } from '~/shared/constructeurUtils'
+import type { ConstructeurLinkEntry } from '~/shared/constructeurUtils'
+import { useConstructeurLinks } from '~/composables/useConstructeurLinks'
+import { useConstructeurs } from '~/composables/useConstructeurs'
 import type { ProductModelStructure } from '~/shared/types/inventory'
 import type { ModelType } from '~/services/modelTypes'
 import {
@@ -197,6 +205,8 @@ const toast = useToast()
 const { upsertCustomFieldValue } = useCustomFields()
 const { uploadDocuments } = useDocuments()
 const { canEdit } = usePermissions()
+const { syncLinks } = useConstructeurLinks()
+const { getConstructeurById } = useConstructeurs()

 const initialTypeId = ref<string>(typeof route.query.typeId === 'string' ? route.query.typeId : '')
 const selectedTypeId = ref<string>(initialTypeId.value)
@@ -207,6 +217,7 @@ const creationForm = reactive({
  constructeurIds: [] as string[],
  supplierPrice: '' as string,
 })
+const constructeurLinks = ref<ConstructeurLinkEntry[]>([])
 const selectedDocuments = ref<File[]>([])
 const uploadingDocuments = ref(false)

@@ -300,8 +311,6 @@ const buildPayload = () => {
    payload.reference = reference
  }

-  payload.constructeurIds = uniqueConstructeurIds(creationForm.constructeurIds)
-
  const rawPrice = typeof creationForm.supplierPrice === 'string'
    ? creationForm.supplierPrice.trim()
    : creationForm.supplierPrice
@@ -333,6 +342,10 @@ const submitCreation = async () => {
        await router.replace(`/product/${result.data.id}?edit=true`)
        return
      }
+      // Sync constructeur links after creation
+      if (constructeurLinks.value.length) {
+        await syncLinks('product', productId, [], constructeurLinks.value)
+      }
      if (selectedDocuments.value.length) {
        uploadingDocuments.value = true
        const uploadResult = await uploadDocuments(
@@ -395,6 +408,25 @@ const saveCustomFieldValues = async (productId: string) => {
  return failed
 }

+// Sync constructeurIds → constructeurLinks when IDs are added via ConstructeurSelect
+watch(
+  () => creationForm.constructeurIds,
+  (ids) => {
+    const currentIds = new Set(constructeurLinks.value.map(l => l.constructeurId))
+    for (const id of ids) {
+      if (!currentIds.has(id)) {
+        const resolved = getConstructeurById(id)
+        constructeurLinks.value.push({
+          constructeurId: id,
+          constructeur: resolved ? { id: resolved.id, name: resolved.name } : null,
+          supplierReference: null,
+        })
+      }
+    }
+    constructeurLinks.value = constructeurLinks.value.filter(l => ids.includes(l.constructeurId))
+  },
+)
+
 onMounted(async () => {
  await loadProductTypes()
  if (selectedTypeId.value && !selectedType.value) {
--- a/app/shared/constructeurUtils.ts
+++ b/app/shared/constructeurUtils.ts
@@ -7,6 +7,32 @@ export interface ConstructeurSummary {
  phone?: string | null;
 }

+export interface ConstructeurLinkEntry {
+  linkId?: string;
+  constructeurId: string;
+  constructeur?: ConstructeurSummary | null;
+  supplierReference: string | null;
+}
+
+export const constructeurIdsFromLinks = (links: ConstructeurLinkEntry[]): string[] =>
+  links.map(l => l.constructeurId).filter(Boolean);
+
+export const parseConstructeurLinksFromApi = (
+  apiLinks: any[],
+): ConstructeurLinkEntry[] => {
+  if (!Array.isArray(apiLinks)) return [];
+  return apiLinks
+    .filter(link => link && typeof link === 'object')
+    .map(link => ({
+      linkId: link.id || (typeof link['@id'] === 'string' ? link['@id'].split('/').pop() : undefined),
+      constructeurId: typeof link.constructeur === 'string'
+        ? link.constructeur.split('/').pop()!
+        : link.constructeur?.id || '',
+      constructeur: typeof link.constructeur === 'object' ? link.constructeur : null,
+      supplierReference: link.supplierReference ?? null,
+    }));
+};
+
 const isObject = (value: unknown): value is Record<string, unknown> =>
  Boolean(value) && typeof value === 'object' && !Array.isArray(value);

@@ -113,49 +139,3 @@ export const formatConstructeurContact = (
  return [constructeur.email, phone].filter(Boolean).join(' • ');
 };

-export const buildConstructeurRequestPayload = <T extends Record<string, any>>(
-  payload: T,
-): T & { constructeurs?: string[] } => {
-  const collected = new Set(uniqueConstructeurIds(
-    payload?.constructeurIds,
-    payload?.constructeurId,
-    payload?.constructeur,
-    payload?.constructeurs,
-  ));
-
-  if (!collected.size) {
-    const fallbackLists = [
-      payload?.constructeurIds,
-      payload?.constructeurs,
-    ];
-    fallbackLists.forEach((list) => {
-      if (!Array.isArray(list)) {
-        return;
-      }
-      list.forEach((item) => {
-        if (typeof item === 'string') {
-          const id = toStringId(item);
-          if (id) {
-            collected.add(id);
-          }
-          return;
-        }
-        if (isObject(item) && typeof item.id === 'string') {
-          collected.add(item.id);
-        }
-      });
-    });
-  }
-
-  const ids = Array.from(collected);
-
-  const next = { ...payload } as Record<string, any>;
-  delete next.constructeurId;
-  delete next.constructeur;
-  delete next.constructeurs;
-  delete next.constructeurIds;
-
-  next.constructeurs = ids.map((id) => `/api/constructeurs/${id}`);
-
-  return next as T & { constructeurs?: string[] };
-};
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -52,10 +52,10 @@ export default defineNuxtConfig({
      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',
+      enableDebug: process.env.NUXT_PUBLIC_ENABLE_DEBUG || 'false',
      enableAnalytics: process.env.NUXT_PUBLIC_ENABLE_ANALYTICS || 'false',
      csrfToken: process.env.NUXT_PUBLIC_CSRF_TOKEN || '',
-      logLevel: process.env.NUXT_PUBLIC_LOG_LEVEL || 'debug'
+      logLevel: process.env.NUXT_PUBLIC_LOG_LEVEL || 'warn'
    }
  },
  vite: {
Author	SHA1	Message	Date
Matthieu	958a00c8fc	WIP	2026-03-31 17:53:30 +02:00
Matthieu	e0f761da2b	feat(constructeur) : update product edit flow with supplier references Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-03-31 17:02:32 +02:00
Matthieu	80739a4528	feat(constructeur) : update composant edit flow with supplier references Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-03-31 16:52:50 +02:00
Matthieu	c5988ec7a6	feat(constructeur) : update piece edit flow with supplier references Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-03-31 15:55:18 +02:00
Matthieu	63a56c47ba	feat(constructeur) : add ConstructeurLinkEntry type, useConstructeurLinks composable, and ConstructeurLinksTable component Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-03-31 15:33:54 +02:00