fix(tests) : fix stale unit tests for useToast and useEntityTypes

useToast.clearAll() now clears the dedup map to prevent test pollution,
and useEntityTypes error test expectation matches actual French message.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

app/app.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
-    <LayoutAppNavbar
+    <AppNavbar
       @open-settings="displaySettingsOpen = true"
       @logout="handleLogout"
     />
@@ -9,7 +9,7 @@
 
     <ToastContainer />
 
-    <CommonConfirmModal />
+    <ConfirmModal />
 
     <DisplaySettings
       :is-open="displaySettingsOpen"

app/components/ComponentItem.vue

@@ -213,7 +213,7 @@
       </div>
 
       <!-- Custom Fields Display - Editable or Read-only -->
-      <CommonCustomFieldDisplay
+      <CustomFieldDisplay
         :fields="displayedCustomFields"
         :is-edit-mode="isEditMode"
         :columns="2"

app/components/PieceItem.vue

@@ -165,65 +165,10 @@
               <span class="font-semibold">{{ info.label }} :</span>
               <span class="ml-1">{{ info.value }}</span>
             </p>
-            <div
-              v-if="productDocuments.length"
-              class="mt-2 space-y-2 rounded-md border border-base-200 bg-base-100 p-3 text-xs"
-            >
-              <h5 class="font-medium text-base-content">Documents du produit</h5>
-              <div
-                v-for="document in productDocuments"
-                :key="document.id || document.path || document.name"
-                class="flex items-center justify-between gap-3 rounded border border-base-200 bg-base-100 px-3 py-2"
-              >
-                <div class="flex items-center gap-3">
-                  <div
-                    class="flex-shrink-0 overflow-hidden rounded-md border border-base-200 bg-base-200/70 flex items-center justify-center h-10 w-8"
-                  >
-                    <img
-                      v-if="isImageDocument(document) && (document.fileUrl || document.path)"
-                      :src="document.fileUrl || document.path"
-                      class="h-full w-full object-cover"
-                      :alt="`Aperçu de ${document.name}`"
-                    >
-                    <iframe
-                      v-else-if="shouldInlinePdf(document)"
-                      :src="documentPreviewSrc(document)"
-                      class="h-full w-full border-0 bg-white"
-                      title="Aperçu PDF"
-                    />
-                    <component
-                      v-else
-                      :is="documentIcon(document).component"
-                      class="h-5 w-5"
-                      :class="documentIcon(document).colorClass"
-                      aria-hidden="true"
-                    />
-                  </div>
-                  <div>
-                    <div class="font-medium text-base-content">
-                      {{ document.name }}
-                    </div>
-                    <div class="text-xs text-base-content/70">
-                      {{ document.mimeType || 'Inconnu' }} • {{ formatSize(document.size) }}
-                    </div>
-                  </div>
-                </div>
-                <div class="flex items-center gap-2 text-xs">
-                  <button
-                    type="button"
-                    class="btn btn-ghost btn-xs"
-                    :disabled="!canPreviewDocument(document)"
-                    :title="canPreviewDocument(document) ? 'Consulter le document' : 'Aucun aperçu disponible pour ce type'"
-                    @click="openPreview(document)"
-                  >
-                    Consulter
-                  </button>
-                  <button type="button" class="btn btn-ghost btn-xs" @click="downloadDocument(document)">
-                    Télécharger
-                  </button>
-                </div>
-              </div>
-            </div>
+            <ProductDocumentsInline
+              :documents="productDocuments"
+              @preview="openPreview"
+            />
           </div>
           <span v-else class="font-medium">
             Non défini
@@ -234,7 +179,7 @@
       </div>
 
     <!-- Champs personnalisés de la pièce -->
-    <CommonCustomFieldDisplay
+    <CustomFieldDisplay
       :fields="displayedCustomFields"
       :is-edit-mode="isEditMode"
       @field-input="handleCustomFieldInput"
@@ -287,7 +232,6 @@ import ProductSelect from '~/components/ProductSelect.vue'
 import DocumentUpload from '~/components/DocumentUpload.vue'
 import DocumentPreviewModal from '~/components/DocumentPreviewModal.vue'
 import IconLucideChevronRight from '~icons/lucide/chevron-right'
-import { canPreviewDocument, isImageDocument } from '~/utils/documentPreview'
 import { useConstructeurs } from '~/composables/useConstructeurs'
 import { useProducts } from '~/composables/useProducts'
 import {
@@ -295,13 +239,6 @@ import {
   resolveConstructeurs,
   uniqueConstructeurIds,
 } from '~/shared/constructeurUtils'
-import {
-  formatSize,
-  shouldInlinePdf,
-  documentPreviewSrc,
-  documentIcon,
-  downloadDocument,
-} from '~/shared/utils/documentDisplayUtils'
 import {
   resolveFieldId,
   resolveFieldReadOnly,

app/components/ProductDocumentsInline.vue

@@ -0,0 +1,78 @@
+<template>
+  <div
+    v-if="documents.length"
+    class="mt-2 space-y-2 rounded-md border border-base-200 bg-base-100 p-3 text-xs"
+  >
+    <h5 class="font-medium text-base-content">Documents du produit</h5>
+    <div
+      v-for="document in documents"
+      :key="document.id || document.path || document.name"
+      class="flex items-center justify-between gap-3 rounded border border-base-200 bg-base-100 px-3 py-2"
+    >
+      <div class="flex items-center gap-3">
+        <div
+          class="flex-shrink-0 overflow-hidden rounded-md border border-base-200 bg-base-200/70 flex items-center justify-center h-10 w-8"
+        >
+          <img
+            v-if="isImageDocument(document) && (document.fileUrl || document.path)"
+            :src="document.fileUrl || document.path"
+            class="h-full w-full object-cover"
+            :alt="`Aperçu de ${document.name}`"
+          >
+          <iframe
+            v-else-if="shouldInlinePdf(document)"
+            :src="documentPreviewSrc(document)"
+            class="h-full w-full border-0 bg-white"
+            title="Aperçu PDF"
+          />
+          <component
+            v-else
+            :is="documentIcon(document).component"
+            class="h-5 w-5"
+            :class="documentIcon(document).colorClass"
+            aria-hidden="true"
+          />
+        </div>
+        <div>
+          <div class="font-medium text-base-content">
+            {{ document.name }}
+          </div>
+          <div class="text-xs text-base-content/70">
+            {{ document.mimeType || 'Inconnu' }} • {{ formatSize(document.size) }}
+          </div>
+        </div>
+      </div>
+      <div class="flex items-center gap-2 text-xs">
+        <button
+          type="button"
+          class="btn btn-ghost btn-xs"
+          :disabled="!canPreviewDocument(document)"
+          :title="canPreviewDocument(document) ? 'Consulter le document' : 'Aucun aperçu disponible pour ce type'"
+          @click="$emit('preview', document)"
+        >
+          Consulter
+        </button>
+        <button type="button" class="btn btn-ghost btn-xs" @click="downloadDocument(document)">
+          Télécharger
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { canPreviewDocument, isImageDocument } from '~/utils/documentPreview'
+import {
+  formatSize,
+  shouldInlinePdf,
+  documentPreviewSrc,
+  documentIcon,
+  downloadDocument,
+} from '~/shared/utils/documentDisplayUtils'
+
+defineProps({
+  documents: { type: Array, required: true },
+})
+
+defineEmits(['preview'])
+</script>

app/components/machine/MachineCustomFieldDefEditor.vue

@@ -0,0 +1,124 @@
+<template>
+  <section class="space-y-3">
+    <div class="flex items-center justify-between">
+      <h3 class="text-sm font-semibold">
+        Définitions des champs personnalisés
+      </h3>
+      <button
+        type="button"
+        class="btn btn-primary btn-sm"
+        :disabled="saving"
+        @click="$emit('save')"
+      >
+        <span v-if="saving" class="loading loading-spinner loading-xs" />
+        Enregistrer les champs
+      </button>
+    </div>
+
+    <p v-if="!fields.length" class="text-xs text-gray-500">
+      Aucun champ personnalisé défini. Cliquez sur « Ajouter » pour en créer un.
+    </p>
+
+    <ul v-else class="space-y-2" role="list">
+      <li
+        v-for="(field, index) in fields"
+        :key="field.uid"
+        class="border border-base-200 rounded-md p-3 space-y-2 bg-base-100 transition-colors"
+        :class="reorderClass(index)"
+        draggable="true"
+        @dragstart="onDragStart(index, $event)"
+        @dragenter="onDragEnter(index)"
+        @dragover.prevent="onDragEnter(index)"
+        @drop.prevent="onDrop(index)"
+        @dragend="onDragEnd"
+      >
+        <div class="flex items-start gap-3">
+          <button
+            type="button"
+            class="btn btn-ghost btn-xs btn-square cursor-grab active:cursor-grabbing mt-1"
+            title="Réordonner"
+            draggable="false"
+          >
+            <IconLucideGripVertical class="w-4 h-4" aria-hidden="true" />
+          </button>
+
+          <div class="flex-1 space-y-2">
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
+              <input
+                v-model="field.name"
+                type="text"
+                class="input input-bordered input-sm"
+                placeholder="Nom du champ"
+              >
+              <select v-model="field.type" class="select select-bordered select-sm">
+                <option value="text">
+                  Texte
+                </option>
+                <option value="number">
+                  Nombre
+                </option>
+                <option value="select">
+                  Liste
+                </option>
+                <option value="boolean">
+                  Oui/Non
+                </option>
+                <option value="date">
+                  Date
+                </option>
+              </select>
+            </div>
+
+            <div class="flex items-center gap-2 text-xs">
+              <input v-model="field.required" type="checkbox" class="checkbox checkbox-xs">
+              Obligatoire
+            </div>
+
+            <textarea
+              v-if="field.type === 'select'"
+              v-model="field.optionsText"
+              class="textarea textarea-bordered textarea-sm h-20"
+              placeholder="Option 1&#10;Option 2"
+            />
+          </div>
+
+          <button
+            type="button"
+            class="btn btn-error btn-xs btn-square"
+            @click="$emit('remove-field', index)"
+          >
+            <IconLucideTrash class="w-4 h-4" aria-hidden="true" />
+          </button>
+        </div>
+      </li>
+    </ul>
+
+    <button type="button" class="btn btn-outline btn-sm" @click="$emit('add-field')">
+      <IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" />
+      Ajouter un champ
+    </button>
+  </section>
+</template>
+
+<script setup lang="ts">
+import type { MachineCustomFieldEditorField } from '~/composables/useMachineCustomFieldDefs'
+import IconLucideGripVertical from '~icons/lucide/grip-vertical'
+import IconLucidePlus from '~icons/lucide/plus'
+import IconLucideTrash from '~icons/lucide/trash'
+
+defineProps<{
+  fields: MachineCustomFieldEditorField[]
+  saving: boolean
+  reorderClass: (index: number) => string
+  onDragStart: (index: number, event: DragEvent) => void
+  onDragEnter: (index: number) => void
+  onDrop: (index: number) => void
+  onDragEnd: () => void
+}>()
+
+defineEmits<{
+  save: []
+  'add-field': []
+  'remove-field': [index: number]
+}>()
+</script>

app/components/machine/MachineInfoCard.vue

@@ -151,18 +151,36 @@
           </div>
         </div>
       </div>
+
+      <div v-if="isEditMode" class="mt-6 pt-4 border-t border-base-200">
+        <MachineCustomFieldDefEditor
+          :fields="fieldDefs.fields.value"
+          :saving="fieldDefs.saving.value"
+          :reorder-class="fieldDefs.reorderClass"
+          :on-drag-start="fieldDefs.onDragStart"
+          :on-drag-enter="fieldDefs.onDragEnter"
+          :on-drop="fieldDefs.onDrop"
+          :on-drag-end="fieldDefs.onDragEnd"
+          @save="fieldDefs.saveDefinitions()"
+          @add-field="fieldDefs.addField()"
+          @remove-field="fieldDefs.removeField($event)"
+        />
+      </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { watch } from 'vue'
 import ConstructeurSelect from '~/components/ConstructeurSelect.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'
 
-defineProps<{
+const props = defineProps<{
   isEditMode: boolean
   machineName: string
   machineReference: string
@@ -171,14 +189,27 @@ defineProps<{
   hasMachineConstructeur: boolean
   visibleCustomFields: any[]
   getMachineFieldId: (fieldName: string) => string
+  machineId: string
+  machineCustomFieldDefs: any[]
 }>()
 
-defineEmits<{
+const emit = defineEmits<{
   'update:machine-name': [value: string]
   'update:machine-reference': [value: string]
   'update:constructeur-ids': [ids: unknown]
   'blur-field': []
   'set-custom-field-value': [field: any, value: unknown]
   'update-custom-field': [field: any]
+  'custom-fields-saved': []
 }>()
+
+const fieldDefs = useMachineCustomFieldDefs({
+  machineId: props.machineId,
+  initialDefs: props.machineCustomFieldDefs,
+  onSaved: () => emit('custom-fields-saved'),
+})
+
+watch(() => props.machineCustomFieldDefs, (newDefs) => {
+  fieldDefs.reinit(newDefs)
+}, { deep: true })
 </script>

app/components/model-types/ManagementView.vue

@@ -99,66 +99,19 @@
       </template>
     </DataTable>
 
-    <ModelTypesConversionModal
+    <ConversionModal
       :open="conversionModalOpen"
       :model-type="conversionTarget"
       @close="closeConversionModal"
       @converted="onConverted"
     />
 
-    <dialog class="modal" :class="{ 'modal-open': relatedModalOpen }">
-      <div class="modal-box max-w-3xl">
-        <h3 class="text-lg font-bold text-base-content">
-          {{ relatedModalTitle }}
-        </h3>
-        <p class="mt-1 text-sm text-base-content/70">
-          {{ relatedModalSubtitle }}
-        </p>
-
-        <div class="mt-4 rounded-xl border border-base-200 bg-base-100">
-          <div v-if="relatedLoading" class="flex items-center gap-2 px-4 py-6 text-sm text-info">
-            <span class="loading loading-spinner loading-sm" aria-hidden="true" />
-            Chargement des éléments liés…
-          </div>
-
-          <div v-else-if="relatedError" class="px-4 py-6 text-sm text-error">
-            {{ relatedError }}
-          </div>
-
-          <div
-            v-else-if="relatedItems.length === 0"
-            class="px-4 py-6 text-sm text-base-content/60"
-          >
-            Aucun élément lié à cette catégorie.
-          </div>
-
-          <ul v-else class="max-h-96 divide-y divide-base-200 overflow-y-auto">
-            <li
-              v-for="entry in relatedItems"
-              :key="entry.id"
-              class="px-2 py-1"
-            >
-              <button
-                type="button"
-                class="flex w-full flex-col gap-1 rounded-lg px-2 py-2 text-left hover:bg-base-200 focus:bg-base-200 focus:outline-none"
-                @click="openRelatedEdit(entry)"
-              >
-                <span class="font-medium text-base-content">{{ entry.name }}</span>
-                <span v-if="entry.reference" class="text-xs text-base-content/60">
-                  Référence: {{ entry.reference }}
-                </span>
-              </button>
-            </li>
-          </ul>
-        </div>
-
-        <div class="modal-action">
-          <button type="button" class="btn" @click="closeRelatedModal">
-            Fermer
-          </button>
-        </div>
-      </div>
-    </dialog>
+    <RelatedItemsModal
+      :open="relatedModalOpen"
+      :model-type="relatedType"
+      @close="relatedModalOpen = false"
+      @open-edit="openRelatedEdit"
+    />
   </main>
 </template>
 
@@ -166,10 +119,8 @@
 import { computed, onBeforeUnmount, onMounted, ref, watch, type Ref } from 'vue'
 import { useHead, useRouter } from '#imports'
 import DataTable from '~/components/common/DataTable.vue'
-import ModelTypesConversionModal from '~/components/model-types/ConversionModal.vue'
-import { useApi } from '~/composables/useApi'
+import ConversionModal from '~/components/model-types/ConversionModal.vue'
 import { useUrlState } from '~/composables/useUrlState'
-import { extractCollection } from '~/shared/utils/apiHelpers'
 import type { DataTableSort } from '~/shared/types/dataTable'
 import {
   deleteModelType,
@@ -233,7 +184,6 @@ let activeController: AbortController | null = null
 
 const router = useRouter()
 const { showError, showSuccess } = useToast()
-const { get } = useApi()
 const { canEdit } = usePermissions()
 
 const headingText = computed(() => props.heading)
@@ -422,106 +372,21 @@ const confirmDelete = async (item: ModelType) => {
   }
 }
 
-type RelatedEntry = {
-  id: string
-  name: string
-  reference?: string | null
-}
-
 const relatedModalOpen = ref(false)
-const relatedLoading = ref(false)
-const relatedError = ref<string | null>(null)
-const relatedItems = ref<RelatedEntry[]>([])
 const relatedType = ref<ModelType | null>(null)
 
-const relatedCategoryLabels: Record<ModelCategory, { plural: string, singular: string }> = {
-  COMPONENT: { plural: 'composants', singular: 'composant' },
-  PIECE: { plural: 'pièces', singular: 'pièce' },
-  PRODUCT: { plural: 'produits', singular: 'produit' },
-}
-
-const relatedModalTitle = computed(() => {
-  const current = relatedType.value
-  if (!current) return 'Éléments liés'
-  return `Éléments liés à « ${current.name} »`
-})
-
-const relatedModalSubtitle = computed(() => {
-  const current = relatedType.value
-  if (!current) return ''
-  const labels = relatedCategoryLabels[current.category] ?? relatedCategoryLabels.COMPONENT
-  const count = relatedItems.value.length
-  if (relatedLoading.value) return `Chargement des ${labels.plural}…`
-  if (count === 0) return `Aucun ${labels.singular} lié.`
-  if (count === 1) return `1 ${labels.singular} lié.`
-  return `${count} ${labels.plural} liés.`
-})
-
-const buildModelTypeIri = (id: string) => `/api/model_types/${id}`
-
-const resolveRelatedConfig = (category: ModelCategory) => {
-  if (category === 'COMPONENT') return { endpoint: '/composants', filterKey: 'typeComposant' }
-  if (category === 'PIECE') return { endpoint: '/pieces', filterKey: 'typePiece' }
-  return { endpoint: '/products', filterKey: 'typeProduct' }
-}
-
 const resolveRelatedEditBasePath = (category: ModelCategory) => {
   if (category === 'COMPONENT') return '/component'
   if (category === 'PIECE') return '/pieces'
   return '/product'
 }
 
-const mapRelatedEntry = (item: unknown): RelatedEntry | null => {
-  if (!item || typeof item !== 'object') return null
-  const record = item as Record<string, unknown>
-  if (typeof record.id !== 'string') return null
-  const name = typeof record.name === 'string' && record.name.trim() ? record.name : 'Sans nom'
-  const reference
-    = typeof record.reference === 'string' && record.reference.trim()
-      ? record.reference
-      : typeof record.code === 'string' && record.code.trim()
-        ? record.code
-        : null
-  return { id: record.id, name, reference }
-}
-
-const loadRelatedItems = async (item: ModelType) => {
-  const { endpoint, filterKey } = resolveRelatedConfig(item.category)
-  const params = new URLSearchParams()
-  params.set('itemsPerPage', '200')
-  params.set(filterKey, buildModelTypeIri(item.id))
-  params.set('order[name]', 'asc')
-
-  relatedLoading.value = true
-  relatedError.value = null
-  relatedItems.value = []
-
-  try {
-    const result = await get(`${endpoint}?${params.toString()}`)
-    if (!result.success) {
-      relatedError.value = result.error ?? 'Impossible de charger les éléments liés.'
-      return
-    }
-    const collection = extractCollection(result.data)
-    relatedItems.value = collection
-      .map(mapRelatedEntry)
-      .filter((entry): entry is RelatedEntry => Boolean(entry))
-  }
-  catch (error) {
-    relatedError.value = extractErrorMessage(error)
-  }
-  finally {
-    relatedLoading.value = false
-  }
-}
-
 const openRelatedModal = (item: ModelType) => {
   relatedType.value = item
   relatedModalOpen.value = true
-  void loadRelatedItems(item)
 }
 
-const openRelatedEdit = (entry: RelatedEntry) => {
+const openRelatedEdit = (entry: { id: string }) => {
   const current = relatedType.value
   if (!current) return
   const basePath = resolveRelatedEditBasePath(current.category)
@@ -531,10 +396,6 @@ const openRelatedEdit = (entry: RelatedEntry) => {
   })
 }
 
-const closeRelatedModal = () => {
-  relatedModalOpen.value = false
-}
-
 const conversionModalOpen = ref(false)
 const conversionTarget = ref<ModelType | null>(null)
 

app/components/model-types/RelatedItemsModal.vue

@@ -0,0 +1,182 @@
+<template>
+  <dialog class="modal" :class="{ 'modal-open': open }">
+    <div class="modal-box max-w-3xl">
+      <h3 class="text-lg font-bold text-base-content">
+        {{ modalTitle }}
+      </h3>
+      <p class="mt-1 text-sm text-base-content/70">
+        {{ modalSubtitle }}
+      </p>
+
+      <div class="mt-4 rounded-xl border border-base-200 bg-base-100">
+        <div v-if="loading" class="flex items-center gap-2 px-4 py-6 text-sm text-info">
+          <span class="loading loading-spinner loading-sm" aria-hidden="true" />
+          Chargement des éléments liés…
+        </div>
+
+        <div v-else-if="error" class="px-4 py-6 text-sm text-error">
+          {{ error }}
+        </div>
+
+        <div
+          v-else-if="items.length === 0"
+          class="px-4 py-6 text-sm text-base-content/60"
+        >
+          Aucun élément lié à cette catégorie.
+        </div>
+
+        <ul v-else class="max-h-96 divide-y divide-base-200 overflow-y-auto">
+          <li
+            v-for="entry in items"
+            :key="entry.id"
+            class="px-2 py-1"
+          >
+            <button
+              type="button"
+              class="flex w-full flex-col gap-1 rounded-lg px-2 py-2 text-left hover:bg-base-200 focus:bg-base-200 focus:outline-none"
+              @click="onOpenEdit(entry)"
+            >
+              <span class="font-medium text-base-content">{{ entry.name }}</span>
+              <span v-if="entry.reference" class="text-xs text-base-content/60">
+                Référence: {{ entry.reference }}
+              </span>
+            </button>
+          </li>
+        </ul>
+      </div>
+
+      <div class="modal-action">
+        <button type="button" class="btn" @click="emit('close')">
+          Fermer
+        </button>
+      </div>
+    </div>
+  </dialog>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { useApi } from '~/composables/useApi'
+import { extractCollection } from '~/shared/utils/apiHelpers'
+import { humanizeError } from '~/shared/utils/errorMessages'
+import type { ModelCategory, ModelType } from '~/services/modelTypes'
+
+type RelatedEntry = {
+  id: string
+  name: string
+  reference?: string | null
+}
+
+const props = defineProps<{
+  open: boolean
+  modelType: ModelType | null
+}>()
+
+const emit = defineEmits<{
+  close: []
+  'open-edit': [entry: RelatedEntry]
+}>()
+
+const { get } = useApi()
+
+const loading = ref(false)
+const error = ref<string | null>(null)
+const items = ref<RelatedEntry[]>([])
+
+const categoryLabels: Record<ModelCategory, { plural: string, singular: string }> = {
+  COMPONENT: { plural: 'composants', singular: 'composant' },
+  PIECE: { plural: 'pièces', singular: 'pièce' },
+  PRODUCT: { plural: 'produits', singular: 'produit' },
+}
+
+const modalTitle = computed(() => {
+  if (!props.modelType) return 'Éléments liés'
+  return `Éléments liés à « ${props.modelType.name} »`
+})
+
+const modalSubtitle = computed(() => {
+  if (!props.modelType) return ''
+  const labels = categoryLabels[props.modelType.category] ?? categoryLabels.COMPONENT
+  const count = items.value.length
+  if (loading.value) return `Chargement des ${labels.plural}…`
+  if (count === 0) return `Aucun ${labels.singular} lié.`
+  if (count === 1) return `1 ${labels.singular} lié.`
+  return `${count} ${labels.plural} liés.`
+})
+
+const resolveRelatedConfig = (category: ModelCategory) => {
+  if (category === 'COMPONENT') return { endpoint: '/composants', filterKey: 'typeComposant' }
+  if (category === 'PIECE') return { endpoint: '/pieces', filterKey: 'typePiece' }
+  return { endpoint: '/products', filterKey: 'typeProduct' }
+}
+
+const mapRelatedEntry = (item: unknown): RelatedEntry | null => {
+  if (!item || typeof item !== 'object') return null
+  const record = item as Record<string, unknown>
+  if (typeof record.id !== 'string') return null
+  const name = typeof record.name === 'string' && record.name.trim() ? record.name : 'Sans nom'
+  const reference
+    = typeof record.reference === 'string' && record.reference.trim()
+      ? record.reference
+      : typeof record.code === 'string' && record.code.trim()
+        ? record.code
+        : null
+  return { id: record.id, name, reference }
+}
+
+const loadRelatedItems = async (modelType: ModelType) => {
+  const { endpoint, filterKey } = resolveRelatedConfig(modelType.category)
+  const params = new URLSearchParams()
+  params.set('itemsPerPage', '200')
+  params.set(filterKey, `/api/model_types/${modelType.id}`)
+  params.set('order[name]', 'asc')
+
+  loading.value = true
+  error.value = null
+  items.value = []
+
+  try {
+    const result = await get(`${endpoint}?${params.toString()}`)
+    if (!result.success) {
+      error.value = result.error ?? 'Impossible de charger les éléments liés.'
+      return
+    }
+    const collection = extractCollection(result.data)
+    items.value = collection
+      .map(mapRelatedEntry)
+      .filter((entry): entry is RelatedEntry => Boolean(entry))
+  }
+  catch (err) {
+    let raw: string | null = null
+    if (err && typeof err === 'object') {
+      const e = err as { data?: Record<string, unknown>, statusMessage?: string, message?: string }
+      if (e.data) {
+        const data = e.data
+        if (typeof data['hydra:description'] === 'string') raw = data['hydra:description']
+        else if (typeof data.detail === 'string') raw = data.detail
+        else if (typeof data.message === 'string') raw = data.message
+        else if (typeof data.error === 'string') raw = data.error
+      }
+      if (!raw && typeof e.statusMessage === 'string') raw = e.statusMessage
+      if (!raw && typeof e.message === 'string') raw = e.message
+    }
+    error.value = humanizeError(raw)
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+const onOpenEdit = (entry: RelatedEntry) => {
+  emit('open-edit', entry)
+}
+
+watch(
+  () => props.open,
+  (isOpen) => {
+    if (isOpen && props.modelType) {
+      void loadRelatedItems(props.modelType)
+    }
+  },
+)
+</script>

app/composables/useComponentCreate.ts

@@ -0,0 +1,417 @@
+/**
+ * Component creation page – orchestration composable.
+ *
+ * Pure structure-assignment helpers live in
+ * `~/shared/utils/structureAssignmentHelpers.ts`.
+ */
+
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { useRoute, useRouter } from '#imports'
+import type { StructureAssignmentNode } from '~/components/ComponentStructureAssignmentNode.vue'
+import { useComponentTypes } from '~/composables/useComponentTypes'
+import { useComposants } from '~/composables/useComposants'
+import { usePieces } from '~/composables/usePieces'
+import { usePieceTypes } from '~/composables/usePieceTypes'
+import { useProducts } from '~/composables/useProducts'
+import { useProductTypes } from '~/composables/useProductTypes'
+import { useApi } from '~/composables/useApi'
+import { useToast } from '~/composables/useToast'
+import { humanizeError } from '~/shared/utils/errorMessages'
+import { useCustomFields } from '~/composables/useCustomFields'
+import { useDocuments } from '~/composables/useDocuments'
+import { formatStructurePreview, normalizeStructureForEditor } from '~/shared/modelUtils'
+import {
+  type CustomFieldInput,
+  normalizeCustomFieldInputs,
+  requiredCustomFieldsFilled as _requiredCustomFieldsFilled,
+  saveCustomFieldValues as _saveCustomFieldValues,
+} from '~/shared/utils/customFieldFormUtils'
+import { uniqueConstructeurIds } from '~/shared/constructeurUtils'
+import {
+  getStructurePieces,
+  resolvePieceLabel as _resolvePieceLabel,
+  resolveProductLabel as _resolveProductLabel,
+  resolveSubcomponentLabel,
+  fetchModelTypeNames,
+  buildTypeLabelMap,
+} from '~/shared/utils/structureDisplayUtils'
+import {
+  hasAssignments,
+  initializeStructureAssignments,
+  isAssignmentNodeComplete,
+  serializeStructureAssignments,
+} from '~/shared/utils/structureAssignmentHelpers'
+import type { ComponentModelStructure } from '~/shared/types/inventory'
+import type { ModelType } from '~/services/modelTypes'
+
+interface ComponentCatalogType extends ModelType {
+  structure: ComponentModelStructure | null
+  customFields?: Array<Record<string, any>>
+}
+
+// ---------------------------------------------------------------------------
+// Main composable
+// ---------------------------------------------------------------------------
+
+export function useComponentCreate() {
+  const route = useRoute()
+  const router = useRouter()
+  const { get } = useApi()
+
+  const { componentTypes, loadComponentTypes, loadingComponentTypes: loadingTypes } = useComponentTypes()
+  const { pieceTypes, loadPieceTypes } = usePieceTypes()
+  const { productTypes, loadProductTypes } = useProductTypes()
+  const {
+    createComposant,
+    composants: componentCatalogRef,
+    loading: componentsLoading,
+  } = useComposants()
+  const {
+    pieces: pieceCatalogRef,
+    loading: piecesLoading,
+  } = usePieces()
+  const {
+    products: productCatalogRef,
+    loading: productsLoading,
+  } = useProducts()
+  const toast = useToast()
+  const { upsertCustomFieldValue, updateCustomFieldValue } = useCustomFields()
+  const { uploadDocuments } = useDocuments()
+  const { canEdit } = usePermissions()
+
+  // -------------------------------------------------------------------------
+  // Local state
+  // -------------------------------------------------------------------------
+
+  const selectedTypeId = ref<string>(typeof route.query.typeId === 'string' ? route.query.typeId : '')
+  const submitting = ref(false)
+  const creationForm = reactive({
+    name: '' as string,
+    description: '' as string,
+    reference: '' as string,
+    constructeurIds: [] as string[],
+    prix: '' as string,
+  })
+  const lastSuggestedName = ref('')
+  const customFieldInputs = ref<CustomFieldInput[]>([])
+  const structureAssignments = ref<StructureAssignmentNode | null>(null)
+  const selectedDocuments = ref<File[]>([])
+  const uploadingDocuments = ref(false)
+
+  // -------------------------------------------------------------------------
+  // Computed
+  // -------------------------------------------------------------------------
+
+  const availablePieces = computed(() => pieceCatalogRef.value ?? [])
+  const availableProducts = computed(() => productCatalogRef.value ?? [])
+  const availableComponents = computed(() => componentCatalogRef.value ?? [])
+  const structureDataLoading = computed(
+    () => piecesLoading.value || componentsLoading.value || productsLoading.value,
+  )
+
+  const fetchedPieceTypeMap = ref<Record<string, string>>({})
+  const pieceTypeLabelMap = computed(() =>
+    buildTypeLabelMap(pieceTypes.value, fetchedPieceTypeMap.value),
+  )
+  const productTypeLabelMap = computed(() =>
+    buildTypeLabelMap(productTypes.value),
+  )
+  const componentTypeLabelMap = computed(() =>
+    buildTypeLabelMap(componentTypes.value),
+  )
+
+  const componentTypeList = computed<ComponentCatalogType[]>(() =>
+    (componentTypes.value || [])
+      .filter((item: any) => item?.category === 'COMPONENT') as ComponentCatalogType[],
+  )
+
+  const typeOptionLabel = (type?: ComponentCatalogType) =>
+    type?.name || 'Catégorie'
+
+  const typeOptionDescription = (type?: ComponentCatalogType) =>
+    type?.description ? String(type.description) : ''
+
+  const selectedType = computed(() => {
+    if (!selectedTypeId.value) {
+      return null
+    }
+    return componentTypeList.value.find((type) => type.id === selectedTypeId.value) ?? null
+  })
+
+  const selectedTypeStructure = computed<ComponentModelStructure | null>(() => {
+    const structure = selectedType.value?.structure ?? null
+    return structure ? normalizeStructureForEditor(structure) : null
+  })
+
+  const structureHasRequirements = computed(() =>
+    hasAssignments(structureAssignments.value),
+  )
+
+  const structureSelectionsComplete = computed(() => {
+    if (!structureHasRequirements.value) {
+      return true
+    }
+    if (structureDataLoading.value) {
+      return false
+    }
+    if (!structureAssignments.value) {
+      return false
+    }
+    return isAssignmentNodeComplete(structureAssignments.value, true)
+  })
+
+  const requiredCustomFieldsFilled = computed(() =>
+    _requiredCustomFieldsFilled(customFieldInputs.value),
+  )
+
+  const canSubmit = computed(() => Boolean(
+    canEdit.value
+    && selectedType.value
+    && creationForm.name
+    && requiredCustomFieldsFilled.value
+    && structureSelectionsComplete.value
+    && !submitting.value,
+  ))
+
+  const resolvePieceLabel = (piece: Record<string, any>) =>
+    _resolvePieceLabel(piece, pieceTypeLabelMap.value)
+
+  const resolveProductLabel = (product: Record<string, any>) =>
+    _resolveProductLabel(product, productTypeLabelMap.value)
+
+  // -------------------------------------------------------------------------
+  // Watchers
+  // -------------------------------------------------------------------------
+
+  watch(
+    () => route.query.typeId,
+    (value) => {
+      if (typeof value === 'string') {
+        selectedTypeId.value = value
+      }
+    },
+  )
+
+  watch(selectedTypeId, (id) => {
+    const current = typeof route.query.typeId === 'string' ? route.query.typeId : ''
+    if ((id || '') === current) {
+      return
+    }
+    const nextQuery = { ...route.query }
+    if (id) {
+      nextQuery.typeId = id
+    }
+    else {
+      delete nextQuery.typeId
+    }
+    router.replace({ path: route.path, query: nextQuery }).catch(() => {})
+  })
+
+  const clearCreationForm = () => {
+    creationForm.name = ''
+    creationForm.description = ''
+    creationForm.reference = ''
+    creationForm.constructeurIds = []
+    creationForm.prix = ''
+    lastSuggestedName.value = ''
+    structureAssignments.value = null
+  }
+
+  watch(selectedType, (type) => {
+    if (!type) {
+      clearCreationForm()
+      customFieldInputs.value = []
+      structureAssignments.value = null
+      return
+    }
+    if (!creationForm.name || creationForm.name === lastSuggestedName.value) {
+      creationForm.name = type.name
+    }
+    lastSuggestedName.value = creationForm.name
+    customFieldInputs.value = normalizeCustomFieldInputs(selectedTypeStructure.value)
+    structureAssignments.value = initializeStructureAssignments(selectedTypeStructure.value)
+  })
+
+  watch(
+    selectedTypeStructure,
+    (structure) => {
+      const ids = getStructurePieces(structure)
+        .map((piece: any) => piece?.typePieceId)
+        .filter((id: any): id is string => typeof id === 'string' && id.trim().length > 0)
+      if (!ids.length) {
+        return
+      }
+      fetchModelTypeNames(Array.from(new Set(ids)), pieceTypeLabelMap.value, get)
+        .then((additions) => {
+          if (Object.keys(additions).length) {
+            fetchedPieceTypeMap.value = { ...fetchedPieceTypeMap.value, ...additions }
+          }
+        })
+        .catch(() => {})
+    },
+    { immediate: true },
+  )
+
+  // -------------------------------------------------------------------------
+  // Submission
+  // -------------------------------------------------------------------------
+
+  const submitCreation = async () => {
+    if (!selectedType.value) {
+      toast.showError('Sélectionnez une catégorie de composant.')
+      return
+    }
+    const payload: Record<string, any> = {
+      name: creationForm.name.trim(),
+      typeComposantId: selectedType.value.id,
+    }
+
+    const description = creationForm.description.trim()
+    if (description) {
+      payload.description = description
+    }
+
+    const reference = creationForm.reference.trim()
+    if (reference) {
+      payload.reference = reference
+    }
+
+    if (creationForm.constructeurIds.length) {
+      payload.constructeurIds = uniqueConstructeurIds(creationForm.constructeurIds)
+    }
+
+    const rawPrice = typeof creationForm.prix === 'string'
+      ? creationForm.prix.trim()
+      : creationForm.prix === null || creationForm.prix === undefined
+        ? ''
+        : String(creationForm.prix).trim()
+
+    if (rawPrice) {
+      const parsed = Number(rawPrice)
+      if (!Number.isNaN(parsed)) {
+        payload.prix = String(parsed)
+      }
+    }
+
+    const rootProductSelection
+      = structureAssignments.value?.products?.find(
+        (product) => typeof product.selectedProductId === 'string' && product.selectedProductId.trim().length > 0,
+      ) ?? null
+
+    if (rootProductSelection?.selectedProductId) {
+      payload.productId = rootProductSelection.selectedProductId.trim()
+    }
+
+    if (structureHasRequirements.value && !structureSelectionsComplete.value) {
+      toast.showError('Complétez la sélection des pièces, produits et sous-composants.')
+      return
+    }
+
+    const serializedStructure = structureHasRequirements.value
+      ? serializeStructureAssignments(structureAssignments.value)
+      : null
+
+    if (serializedStructure) {
+      payload.structure = serializedStructure
+    }
+
+    submitting.value = true
+    try {
+      const result = await createComposant(payload)
+      if (result.success) {
+        const createdComponent = result.data as Record<string, any>
+        await _saveCustomFieldValues(
+          'composant',
+          createdComponent.id,
+          [createdComponent?.typeComposant?.customFields],
+          { customFieldInputs, upsertCustomFieldValue, updateCustomFieldValue, toast },
+        )
+        if (selectedDocuments.value.length && result.data?.id) {
+          uploadingDocuments.value = true
+          const uploadResult = await uploadDocuments(
+            {
+              files: selectedDocuments.value,
+              context: { composantId: result.data.id },
+            },
+            { updateStore: false },
+          )
+          if (!uploadResult.success) {
+            const message = uploadResult.error
+              ? `Documents non ajoutés : ${uploadResult.error}`
+              : 'Documents non ajoutés : une erreur est survenue.'
+            toast.showError(message)
+          }
+          selectedDocuments.value = []
+        }
+        toast.showSuccess('Composant créé avec succès')
+        await router.push('/component-catalog')
+      }
+      else if (result.error) {
+        toast.showError(result.error)
+      }
+    }
+    catch (error: any) {
+      toast.showError(humanizeError(error?.message) || 'Impossible de créer le composant')
+    }
+    finally {
+      submitting.value = false
+      uploadingDocuments.value = false
+    }
+  }
+
+  // -------------------------------------------------------------------------
+  // Initialization
+  // -------------------------------------------------------------------------
+
+  onMounted(async () => {
+    await Promise.allSettled([
+      loadComponentTypes(),
+      loadPieceTypes(),
+      loadProductTypes(),
+    ])
+  })
+
+  // -------------------------------------------------------------------------
+  // Public API
+  // -------------------------------------------------------------------------
+
+  return {
+    // State
+    selectedTypeId,
+    submitting,
+    creationForm,
+    customFieldInputs,
+    structureAssignments,
+    selectedDocuments,
+    uploadingDocuments,
+
+    // Computed
+    loadingTypes,
+    componentTypeList,
+    selectedType,
+    selectedTypeStructure,
+    availablePieces,
+    availableProducts,
+    availableComponents,
+    piecesLoading,
+    productsLoading,
+    componentsLoading,
+    structureDataLoading,
+    pieceTypeLabelMap,
+    productTypeLabelMap,
+    componentTypeLabelMap,
+    structureHasRequirements,
+    structureSelectionsComplete,
+    canEdit,
+    canSubmit,
+
+    // Functions
+    typeOptionLabel,
+    typeOptionDescription,
+    formatStructurePreview,
+    resolvePieceLabel,
+    resolveProductLabel,
+    resolveSubcomponentLabel,
+    submitCreation,
+  }
+}

app/composables/useComponentEdit.ts

@@ -0,0 +1,461 @@
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { useRouter } from '#imports'
+import { useComponentTypes } from '~/composables/useComponentTypes'
+import { useComposants } from '~/composables/useComposants'
+import { usePieceTypes } from '~/composables/usePieceTypes'
+import { useProductTypes } from '~/composables/useProductTypes'
+import { usePieces } from '~/composables/usePieces'
+import { useProducts } from '~/composables/useProducts'
+import { useCustomFields } from '~/composables/useCustomFields'
+import { useApi } from '~/composables/useApi'
+import { useToast } from '~/composables/useToast'
+import { extractRelationId } from '~/shared/apiRelations'
+import { useDocuments } from '~/composables/useDocuments'
+import { useConstructeurs } from '~/composables/useConstructeurs'
+import { useComponentHistory } from '~/composables/useComponentHistory'
+import { formatStructurePreview, normalizeStructureForEditor } from '~/shared/modelUtils'
+import { uniqueConstructeurIds } from '~/shared/constructeurUtils'
+import {
+  getStructurePieces,
+  getStructureProducts,
+  resolvePieceLabel as _resolvePieceLabel,
+  resolveProductLabel as _resolveProductLabel,
+  resolveSubcomponentLabel,
+  fetchModelTypeNames,
+  buildTypeLabelMap,
+} from '~/shared/utils/structureDisplayUtils'
+import type { ComponentModelStructure } from '~/shared/types/inventory'
+import type { ModelType } from '~/services/modelTypes'
+import { canPreviewDocument } from '~/utils/documentPreview'
+import {
+  type CustomFieldInput,
+  buildCustomFieldInputs,
+  requiredCustomFieldsFilled as _requiredCustomFieldsFilled,
+  saveCustomFieldValues as _saveCustomFieldValues,
+} from '~/shared/utils/customFieldFormUtils'
+import { collectStructureSelections } from '~/shared/utils/structureSelectionUtils'
+
+interface ComponentCatalogType extends ModelType {
+  structure: ComponentModelStructure | null
+  customFields?: Array<Record<string, any>>
+}
+
+const historyFieldLabels: Record<string, string> = {
+  name: 'Nom',
+  reference: 'Référence',
+  prix: 'Prix',
+  structure: 'Structure',
+  typeComposant: 'Catégorie',
+  product: 'Produit lié',
+  constructeurIds: 'Fournisseurs',
+}
+
+export function useComponentEdit(componentId: string) {
+  const { canEdit } = usePermissions()
+  const router = useRouter()
+  const { get } = useApi()
+  const { componentTypes, loadComponentTypes } = useComponentTypes()
+  const { pieceTypes, loadPieceTypes } = usePieceTypes()
+  const { productTypes, loadProductTypes } = useProductTypes()
+  const { updateComposant, loadComposants, composants: componentCatalogRef } = useComposants()
+  const { pieces, loadPieces } = usePieces()
+  const { products, loadProducts } = useProducts()
+  const { ensureConstructeurs } = useConstructeurs()
+  const { upsertCustomFieldValue, updateCustomFieldValue } = useCustomFields()
+  const toast = useToast()
+  const { loadDocumentsByComponent, uploadDocuments, deleteDocument } = useDocuments()
+  const {
+    history,
+    loading: historyLoading,
+    error: historyError,
+    loadHistory,
+  } = useComponentHistory()
+
+  const component = ref<any | null>(null)
+  const loading = ref(true)
+  const saving = ref(false)
+  const selectedFiles = ref<File[]>([])
+  const uploadingDocuments = ref(false)
+  const loadingDocuments = ref(false)
+  const componentDocuments = ref<any[]>([])
+  const previewDocument = ref<any | null>(null)
+  const previewVisible = ref(false)
+
+  const selectedTypeId = ref<string>('')
+  const editionForm = reactive({
+    name: '' as string,
+    description: '' as string,
+    reference: '' as string,
+    constructeurIds: [] as string[],
+    prix: '' as string,
+  })
+
+  const customFieldInputs = ref<CustomFieldInput[]>([])
+  const fetchedPieceTypeMap = ref<Record<string, string>>({})
+  const pieceTypeLabelMap = computed(() =>
+    buildTypeLabelMap(pieceTypes.value, fetchedPieceTypeMap.value),
+  )
+  const fetchedProductTypeMap = ref<Record<string, string>>({})
+  const productTypeLabelMap = computed(() =>
+    buildTypeLabelMap(productTypes.value, fetchedProductTypeMap.value),
+  )
+  const pieceCatalogMap = computed(() =>
+    new Map(
+      (pieces.value || [])
+        .filter((item: any) => item?.id)
+        .map((item: any) => [String(item.id), item]),
+    ),
+  )
+  const productCatalogMap = computed(() =>
+    new Map(
+      (products.value || [])
+        .filter((item: any) => item?.id)
+        .map((item: any) => [String(item.id), item]),
+    ),
+  )
+  const componentCatalogMap = computed(() =>
+    new Map(
+      (componentCatalogRef.value || [])
+        .filter((item: any) => item?.id)
+        .map((item: any) => [String(item.id), item]),
+    ),
+  )
+
+  const openPreview = (doc: any) => {
+    if (!doc || !canPreviewDocument(doc)) {
+      return
+    }
+    previewDocument.value = doc
+    previewVisible.value = true
+  }
+
+  const closePreview = () => {
+    previewVisible.value = false
+    previewDocument.value = null
+  }
+
+  const removeDocument = async (documentId: string | number | null | undefined) => {
+    if (!documentId) {
+      return
+    }
+    const result = await deleteDocument(documentId, { updateStore: false })
+    if (result.success) {
+      componentDocuments.value = componentDocuments.value.filter((doc) => doc.id !== documentId)
+    }
+  }
+
+  const refreshDocuments = async () => {
+    if (!component.value?.id) {
+      componentDocuments.value = []
+      return
+    }
+    loadingDocuments.value = true
+    try {
+      const result = await loadDocumentsByComponent(component.value.id, { updateStore: false })
+      if (result.success) {
+        componentDocuments.value = Array.isArray(result.data) ? result.data : result.data ? [result.data] : []
+      }
+    }
+    finally {
+      loadingDocuments.value = false
+    }
+  }
+
+  const handleFilesAdded = async (files: File[]) => {
+    if (!files?.length || !component.value?.id) {
+      return
+    }
+    uploadingDocuments.value = true
+    try {
+      const result = await uploadDocuments(
+        {
+          files,
+          context: { composantId: component.value.id },
+        },
+        { updateStore: false },
+      )
+      if (result.success) {
+        selectedFiles.value = []
+        await refreshDocuments()
+      }
+    }
+    finally {
+      uploadingDocuments.value = false
+    }
+  }
+
+  const componentTypeList = computed<ComponentCatalogType[]>(() =>
+    (componentTypes.value || [])
+      .filter((item: any) => item?.category === 'COMPONENT') as ComponentCatalogType[],
+  )
+
+  const selectedType = computed(() => {
+    if (!selectedTypeId.value) {
+      return null
+    }
+    return componentTypeList.value.find((type) => type.id === selectedTypeId.value) ?? null
+  })
+
+  const selectedTypeStructure = computed<ComponentModelStructure | null>(() => {
+    const structure = selectedType.value?.structure ?? null
+    return structure ? normalizeStructureForEditor(structure) : null
+  })
+
+  const refreshCustomFieldInputs = (
+    structureOverride?: ComponentModelStructure | null,
+    valuesOverride?: any[] | null,
+  ) => {
+    const structure = structureOverride ?? selectedTypeStructure.value ?? null
+    const values = valuesOverride ?? component.value?.customFieldValues ?? null
+    customFieldInputs.value = buildCustomFieldInputs(structure, values)
+  }
+
+  const requiredCustomFieldsFilled = computed(() =>
+    _requiredCustomFieldsFilled(customFieldInputs.value),
+  )
+
+  const canSubmit = computed(() => Boolean(
+    canEdit.value
+    && component.value
+    && editionForm.name
+    && requiredCustomFieldsFilled.value
+    && !saving.value,
+  ))
+
+  const fetchComponent = async () => {
+    if (!componentId || typeof componentId !== 'string') {
+      component.value = null
+      componentDocuments.value = []
+      return
+    }
+    const result = await get(`/composants/${componentId}`)
+    if (result.success) {
+      component.value = result.data
+      componentDocuments.value = Array.isArray(result.data?.documents) ? result.data.documents : []
+
+      const customValues = Array.isArray(result.data?.customFieldValues) ? result.data.customFieldValues : []
+      refreshCustomFieldInputs(undefined, customValues)
+
+      loadHistory(result.data.id).catch(() => {})
+    }
+    else {
+      component.value = null
+      componentDocuments.value = []
+    }
+  }
+
+  const resolvePieceLabel = (piece: Record<string, any>) =>
+    _resolvePieceLabel(piece, pieceTypeLabelMap.value)
+
+  const resolveProductLabel = (product: Record<string, any>) =>
+    _resolveProductLabel(product, productTypeLabelMap.value)
+
+  const structureSelections = computed(() => {
+    const selections = collectStructureSelections(
+      component.value?.structure,
+      {
+        pieceCatalogMap: pieceCatalogMap.value,
+        productCatalogMap: productCatalogMap.value,
+        componentCatalogMap: componentCatalogMap.value,
+      },
+      { resolvePieceLabel, resolveProductLabel, resolveSubcomponentLabel },
+    )
+    const total
+      = selections.pieces.length + selections.products.length + selections.components.length
+    return {
+      ...selections,
+      total,
+      hasAny: total > 0,
+    }
+  })
+
+  const submitEdition = async () => {
+    if (!component.value) {
+      return
+    }
+
+    const rawPrice = typeof editionForm.prix === 'string'
+      ? editionForm.prix.trim()
+      : editionForm.prix === null || editionForm.prix === undefined
+        ? ''
+        : String(editionForm.prix).trim()
+
+    const payload: Record<string, any> = {
+      name: editionForm.name.trim(),
+      description: editionForm.description.trim() || null,
+    }
+
+    const reference = editionForm.reference.trim()
+    payload.reference = reference || null
+    payload.constructeurIds = uniqueConstructeurIds(editionForm.constructeurIds)
+
+    if (rawPrice) {
+      const parsed = Number(rawPrice)
+      if (!Number.isNaN(parsed)) {
+        payload.prix = String(parsed)
+      }
+    }
+    else {
+      payload.prix = null
+    }
+
+    saving.value = true
+    try {
+      const result = await updateComposant(component.value.id, payload)
+      if (result.success && result.data) {
+        const updatedComponent = result.data as Record<string, any>
+        await _saveCustomFieldValues(
+          'composant',
+          updatedComponent.id,
+          [
+            updatedComponent?.typeComposant?.customFields,
+          ],
+          { customFieldInputs, upsertCustomFieldValue, updateCustomFieldValue, toast },
+        )
+        await router.push('/component-catalog')
+      }
+    }
+    catch (error: any) {
+      toast.showError(error?.message || 'Erreur lors de la mise à jour du composant')
+    }
+    finally {
+      saving.value = false
+    }
+  }
+
+  // --- Watchers ---
+
+  const initialized = ref(false)
+
+  watch(
+    [component, selectedTypeStructure],
+    ([currentComponent, currentStructure]) => {
+      if (!currentComponent) {
+        return
+      }
+
+      if (!initialized.value) {
+        const resolvedTypeId = currentComponent.typeComposantId
+          || extractRelationId(currentComponent.typeComposant)
+          || ''
+        if (resolvedTypeId && !currentComponent.typeComposantId) {
+          currentComponent.typeComposantId = resolvedTypeId
+        }
+        selectedTypeId.value = resolvedTypeId
+
+        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] : [],
+        )
+        editionForm.prix = currentComponent.prix !== null && currentComponent.prix !== undefined ? String(currentComponent.prix) : ''
+        if (editionForm.constructeurIds.length) {
+          void ensureConstructeurs(editionForm.constructeurIds)
+        }
+
+        initialized.value = true
+      }
+
+      refreshCustomFieldInputs(selectedTypeStructure.value ?? currentStructure, currentComponent.customFieldValues)
+    },
+    { immediate: true },
+  )
+
+  watch(
+    selectedTypeStructure,
+    (structure) => {
+      const pieceIds = getStructurePieces(structure)
+        .map((piece: any) => piece?.typePieceId)
+        .filter((id: any): id is string => typeof id === 'string' && id.trim().length > 0)
+      if (pieceIds.length) {
+        fetchModelTypeNames(Array.from(new Set(pieceIds)), pieceTypeLabelMap.value, get)
+          .then((additions) => {
+            if (Object.keys(additions).length) {
+              fetchedPieceTypeMap.value = { ...fetchedPieceTypeMap.value, ...additions }
+            }
+          })
+          .catch(() => {})
+      }
+
+      const productIds = getStructureProducts(structure)
+        .map((product: any) => product?.typeProductId)
+        .filter((id: any): id is string => typeof id === 'string' && id.trim().length > 0)
+      if (productIds.length) {
+        fetchModelTypeNames(Array.from(new Set(productIds)), productTypeLabelMap.value, get)
+          .then((additions) => {
+            if (Object.keys(additions).length) {
+              fetchedProductTypeMap.value = { ...fetchedProductTypeMap.value, ...additions }
+            }
+          })
+          .catch(() => {})
+      }
+    },
+    { immediate: true },
+  )
+
+  // --- Lifecycle ---
+
+  onMounted(async () => {
+    await Promise.allSettled([
+      loadComponentTypes(),
+      loadPieceTypes(),
+      loadProductTypes(),
+      fetchComponent(),
+    ])
+    loading.value = false
+
+    // Defer bulk catalog loads — only needed when component has structure selections
+    if (component.value?.structure) {
+      Promise.allSettled([
+        loadPieces({ itemsPerPage: 200 }),
+        loadProducts({ itemsPerPage: 200 }),
+        loadComposants({ itemsPerPage: 200 }),
+      ]).catch(() => {})
+    }
+  })
+
+  return {
+    // State
+    component,
+    loading,
+    saving,
+    selectedFiles,
+    uploadingDocuments,
+    loadingDocuments,
+    componentDocuments,
+    previewDocument,
+    previewVisible,
+    selectedTypeId,
+    editionForm,
+    customFieldInputs,
+    historyFieldLabels,
+
+    // Computed
+    canEdit,
+    canSubmit,
+    componentTypeList,
+    selectedType,
+    selectedTypeStructure,
+    structureSelections,
+
+    // History
+    history,
+    historyLoading,
+    historyError,
+
+    // Methods
+    openPreview,
+    closePreview,
+    removeDocument,
+    handleFilesAdded,
+    refreshDocuments,
+    submitEdition,
+    resolvePieceLabel,
+    resolveProductLabel,
+    resolveSubcomponentLabel,
+    formatStructurePreview,
+  }
+}

app/composables/useMachineCustomFieldDefs.ts

@@ -0,0 +1,327 @@
+import { reactive, ref } from 'vue'
+import { useApi } from '~/composables/useApi'
+import { useToast } from '~/composables/useToast'
+
+// --- Types ---
+
+export type MachineFieldType = 'text' | 'number' | 'select' | 'boolean' | 'date'
+
+export interface MachineCustomFieldEditorField {
+  uid: string
+  serverId?: string
+  name: string
+  type: MachineFieldType
+  required: boolean
+  optionsText: string
+  orderIndex: number
+}
+
+interface InitialDef {
+  id: string
+  name: string
+  type: string
+  required: boolean
+  options?: string[]
+  orderIndex: number
+  defaultValue?: unknown
+}
+
+interface Deps {
+  machineId: string
+  initialDefs: InitialDef[]
+  onSaved: () => void | Promise<void>
+}
+
+// --- Helpers ---
+
+let uidCounter = 0
+const createUid = (): string => {
+  if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+    return crypto.randomUUID()
+  }
+  uidCounter += 1
+  return `mcf-${Date.now().toString(36)}-${uidCounter}`
+}
+
+const normalizeLineEndings = (value: string): string =>
+  value.replace(/\r\n/g, '\n').replace(/\r/g, '\n')
+
+const toEditorField = (def: InitialDef, index: number): MachineCustomFieldEditorField => ({
+  uid: createUid(),
+  serverId: def.id,
+  name: def.name || '',
+  type: (def.type || 'text') as MachineFieldType,
+  required: Boolean(def.required),
+  optionsText: normalizeLineEndings(
+    Array.isArray(def.options) ? def.options.join('\n') : '',
+  ),
+  orderIndex: typeof def.orderIndex === 'number' ? def.orderIndex : index,
+})
+
+const hydrateFields = (defs: InitialDef[]): MachineCustomFieldEditorField[] =>
+  defs
+    .map((def, index) => toEditorField(def, index))
+    .sort((a, b) => a.orderIndex - b.orderIndex)
+    .map((field, index) => ({ ...field, orderIndex: index }))
+
+const buildSnapshot = (defs: InitialDef[]): Map<string, InitialDef> => {
+  const map = new Map<string, InitialDef>()
+  for (const def of defs) {
+    map.set(def.id, def)
+  }
+  return map
+}
+
+const applyOrderIndex = (
+  list: MachineCustomFieldEditorField[],
+): MachineCustomFieldEditorField[] =>
+  list.map((field, index) => ({ ...field, orderIndex: index }))
+
+const parseOptions = (optionsText: string): string[] =>
+  normalizeLineEndings(optionsText)
+    .split('\n')
+    .map(o => o.trim())
+    .filter(o => o.length > 0)
+
+// --- Composable ---
+
+export function useMachineCustomFieldDefs(deps: Deps) {
+  const { apiCall } = useApi()
+  const { showSuccess, showError } = useToast()
+
+  // --- State ---
+
+  const fields = ref<MachineCustomFieldEditorField[]>(hydrateFields(deps.initialDefs))
+  const initialSnapshot = ref<Map<string, InitialDef>>(buildSnapshot(deps.initialDefs))
+  const saving = ref(false)
+
+  // --- CRUD ---
+
+  const addField = () => {
+    const next = fields.value.slice()
+    next.push({
+      uid: createUid(),
+      name: '',
+      type: 'text',
+      required: false,
+      optionsText: '',
+      orderIndex: next.length,
+    })
+    fields.value = applyOrderIndex(next)
+  }
+
+  const removeField = (index: number) => {
+    const next = fields.value.filter((_, i) => i !== index)
+    fields.value = applyOrderIndex(next)
+  }
+
+  // --- Drag & drop ---
+
+  const dragState = reactive({
+    draggingIndex: null as number | null,
+    dropTargetIndex: null as number | null,
+  })
+
+  const resetDragState = () => {
+    dragState.draggingIndex = null
+    dragState.dropTargetIndex = null
+  }
+
+  const onDragStart = (index: number, event: DragEvent) => {
+    dragState.draggingIndex = index
+    dragState.dropTargetIndex = index
+    if (event.dataTransfer) {
+      event.dataTransfer.effectAllowed = 'move'
+    }
+  }
+
+  const onDragEnter = (index: number) => {
+    if (dragState.draggingIndex === null) return
+    dragState.dropTargetIndex = index
+  }
+
+  const onDrop = (index: number) => {
+    const from = dragState.draggingIndex
+    if (from === null) {
+      resetDragState()
+      return
+    }
+
+    if (from === index) {
+      resetDragState()
+      return
+    }
+
+    const list = fields.value.slice()
+    if (from < 0 || index < 0 || from >= list.length || index >= list.length) {
+      resetDragState()
+      return
+    }
+
+    const [moved] = list.splice(from, 1)
+    if (!moved) {
+      resetDragState()
+      return
+    }
+    list.splice(index, 0, moved)
+    fields.value = applyOrderIndex(list)
+    resetDragState()
+  }
+
+  const onDragEnd = () => {
+    resetDragState()
+  }
+
+  const reorderClass = (index: number): string => {
+    if (dragState.draggingIndex === index) {
+      return 'border-dashed border-primary bg-primary/5'
+    }
+    if (
+      dragState.draggingIndex !== null
+      && dragState.dropTargetIndex === index
+      && dragState.draggingIndex !== index
+    ) {
+      return 'border-primary border-dashed bg-primary/10'
+    }
+    return ''
+  }
+
+  // --- Save ---
+
+  const saveDefinitions = async () => {
+    if (saving.value) return
+
+    // Validate: remove empty-name fields before saving
+    const emptyNameFields = fields.value.filter(f => !f.name.trim() && !f.serverId)
+    if (emptyNameFields.length > 0) {
+      fields.value = applyOrderIndex(fields.value.filter(f => f.name.trim() || f.serverId))
+    }
+
+    saving.value = true
+
+    try {
+      const snapshot = initialSnapshot.value
+      const currentServerIds = new Set(
+        fields.value.filter(f => f.serverId).map(f => f.serverId!),
+      )
+
+      // DELETE removed fields
+      const deletedIds = [...snapshot.keys()].filter(id => !currentServerIds.has(id))
+      for (const id of deletedIds) {
+        const result = await apiCall(`/custom_fields/${id}`, { method: 'DELETE' })
+        if (!result.success) {
+          showError('Erreur lors de la suppression d\'un champ personnalisé')
+          await deps.onSaved()
+          return
+        }
+      }
+
+      let hasNewFields = false
+
+      for (const field of fields.value) {
+        const name = field.name.trim()
+        if (!name) continue
+
+        const options = field.type === 'select' ? parseOptions(field.optionsText) : []
+
+        if (!field.serverId) {
+          // POST new field
+          hasNewFields = true
+          const body: Record<string, unknown> = {
+            name,
+            type: field.type,
+            required: field.required,
+            options,
+            orderIndex: field.orderIndex,
+            machine: `/api/machines/${deps.machineId}`,
+          }
+
+          const result = await apiCall('/custom_fields', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/ld+json' },
+            body: JSON.stringify(body),
+          })
+          if (!result.success) {
+            showError('Erreur lors de la création d\'un champ personnalisé')
+            await deps.onSaved()
+            return
+          }
+        } else {
+          // PATCH modified field
+          const original = snapshot.get(field.serverId)
+          const originalOptions = Array.isArray(original?.options)
+            ? original.options.join('\n')
+            : ''
+          const currentOptions = field.type === 'select' ? field.optionsText : ''
+
+          const changed
+            = original?.name !== name
+            || original?.type !== field.type
+            || original?.required !== field.required
+            || normalizeLineEndings(originalOptions) !== normalizeLineEndings(currentOptions)
+            || original?.orderIndex !== field.orderIndex
+
+          if (changed) {
+            const body: Record<string, unknown> = {
+              name,
+              type: field.type,
+              required: field.required,
+              options,
+              orderIndex: field.orderIndex,
+            }
+
+            const result = await apiCall(`/custom_fields/${field.serverId}`, {
+              method: 'PATCH',
+              headers: { 'Content-Type': 'application/merge-patch+json' },
+              body: JSON.stringify(body),
+            })
+            if (!result.success) {
+              showError('Erreur lors de la mise à jour d\'un champ personnalisé')
+              await deps.onSaved()
+              return
+            }
+          }
+        }
+      }
+
+      // Initialize missing custom field values if new fields were created
+      if (hasNewFields) {
+        await apiCall(`/machines/${deps.machineId}/add-custom-fields`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/ld+json' },
+          body: JSON.stringify({}),
+        })
+      }
+
+      showSuccess('Champs personnalisés sauvegardés avec succès')
+      await deps.onSaved()
+    } catch {
+      showError('Erreur inattendue lors de la sauvegarde des champs personnalisés')
+      await deps.onSaved()
+    } finally {
+      saving.value = false
+    }
+  }
+
+  // --- Reinit ---
+
+  const reinit = (newDefs: InitialDef[]) => {
+    fields.value = hydrateFields(newDefs)
+    initialSnapshot.value = buildSnapshot(newDefs)
+  }
+
+  return {
+    fields,
+    saving,
+    dragState,
+    addField,
+    removeField,
+    onDragStart,
+    onDragEnter,
+    onDrop,
+    onDragEnd,
+    reorderClass,
+    saveDefinitions,
+    reinit,
+  }
+}

app/composables/usePieceEdit.ts

@@ -0,0 +1,472 @@
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { useRouter } from '#imports'
+import { usePieceTypes } from '~/composables/usePieceTypes'
+import { usePieces } from '~/composables/usePieces'
+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 { 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 type { PieceModelStructure } from '~/shared/types/inventory'
+import type { ModelType } from '~/services/modelTypes'
+import {
+  getStructureProducts,
+  buildProductRequirementDescriptions,
+  buildProductRequirementEntries,
+  resizeProductSelections,
+  areProductSelectionsFilled,
+  applyProductSelection,
+  collectNormalizedProductIds,
+} from '~/shared/utils/pieceProductSelectionUtils'
+import { getModelType } from '~/services/modelTypes'
+import {
+  type CustomFieldInput,
+  buildCustomFieldInputs,
+  requiredCustomFieldsFilled as _requiredCustomFieldsFilled,
+  saveCustomFieldValues as _saveCustomFieldValues,
+} from '~/shared/utils/customFieldFormUtils'
+
+interface PieceCatalogType extends ModelType {
+  structure: PieceModelStructure | null
+  customFields?: Array<Record<string, any>>
+}
+
+export function usePieceEdit(pieceId: string) {
+  const { canEdit } = usePermissions()
+  const router = useRouter()
+  const { get } = useApi()
+  const { pieceTypes, loadPieceTypes } = usePieceTypes()
+  const { updatePiece } = usePieces()
+  const { upsertCustomFieldValue, updateCustomFieldValue } = useCustomFields()
+  const toast = useToast()
+  const { loadDocumentsByPiece, uploadDocuments, deleteDocument } = useDocuments()
+  const { ensureConstructeurs } = useConstructeurs()
+  const {
+    history,
+    loading: historyLoading,
+    error: historyError,
+    loadHistory,
+  } = usePieceHistory()
+
+  const piece = ref<any | null>(null)
+  const loading = ref(true)
+  const saving = ref(false)
+  const selectedFiles = ref<File[]>([])
+  const uploadingDocuments = ref(false)
+  const loadingDocuments = ref(false)
+  const pieceDocuments = ref<any[]>([])
+  const previewDocument = ref<any | null>(null)
+  const previewVisible = ref(false)
+
+  const historyFieldLabels: Record<string, string> = {
+    name: 'Nom',
+    reference: 'Référence',
+    prix: 'Prix',
+    typePiece: 'Catégorie',
+    product: 'Produit lié',
+    productIds: 'Produits liés',
+    constructeurIds: 'Fournisseurs',
+  }
+
+  const selectedTypeId = ref<string>('')
+  const pieceTypeDetails = ref<any | null>(null)
+  const editionForm = reactive({
+    name: '' as string,
+    description: '' as string,
+    reference: '' as string,
+    constructeurIds: [] as string[],
+    prix: '' as string,
+  })
+  const productSelections = ref<(string | null)[]>([])
+
+  const customFieldInputs = ref<CustomFieldInput[]>([])
+  const resolvedStructure = computed<PieceModelStructure | null>(() =>
+    pieceTypeDetails.value?.structure ?? selectedType.value?.structure ?? null,
+  )
+
+  const refreshCustomFieldInputs = (
+    structureOverride?: PieceModelStructure | null,
+    valuesOverride?: any[] | null,
+  ) => {
+    const structure = structureOverride ?? resolvedStructure.value ?? null
+    const values = valuesOverride ?? piece.value?.customFieldValues ?? null
+    customFieldInputs.value = buildCustomFieldInputs(structure, values)
+  }
+
+  const openPreview = (doc: any) => {
+    if (!doc || !canPreviewDocument(doc)) {
+      return
+    }
+    previewDocument.value = doc
+    previewVisible.value = true
+  }
+
+  const closePreview = () => {
+    previewVisible.value = false
+    previewDocument.value = null
+  }
+
+  const removeDocument = async (documentId: string | number | null | undefined) => {
+    if (!documentId) {
+      return
+    }
+    const result = await deleteDocument(documentId, { updateStore: false })
+    if (result.success) {
+      pieceDocuments.value = pieceDocuments.value.filter((doc) => doc.id !== documentId)
+    }
+  }
+
+  const handleFilesAdded = async (files: File[]) => {
+    if (!files?.length || !piece.value?.id) {
+      return
+    }
+    uploadingDocuments.value = true
+    try {
+      const result = await uploadDocuments(
+        {
+          files,
+          context: { pieceId: piece.value.id },
+        },
+        { updateStore: false },
+      )
+      if (result.success) {
+        selectedFiles.value = []
+        await refreshDocuments()
+      }
+    }
+    finally {
+      uploadingDocuments.value = false
+    }
+  }
+
+  const refreshDocuments = async () => {
+    if (!piece.value?.id) {
+      pieceDocuments.value = []
+      return
+    }
+    loadingDocuments.value = true
+    try {
+      const result = await loadDocumentsByPiece(piece.value.id, { updateStore: false })
+      if (result.success) {
+        pieceDocuments.value = Array.isArray(result.data) ? result.data : result.data ? [result.data] : []
+      }
+    }
+    finally {
+      loadingDocuments.value = false
+    }
+  }
+
+  const pieceTypeList = computed<PieceCatalogType[]>(() => (pieceTypes.value || []) as PieceCatalogType[])
+
+  const selectedType = computed(() => {
+    if (!selectedTypeId.value) {
+      return null
+    }
+    return pieceTypeList.value.find((type) => type.id === selectedTypeId.value) ?? null
+  })
+
+  const structureProducts = computed(() =>
+    getStructureProducts(resolvedStructure.value),
+  )
+
+  const requiresProductSelection = computed(() => structureProducts.value.length > 0)
+
+  const productRequirementDescriptions = computed(() =>
+    buildProductRequirementDescriptions(structureProducts.value),
+  )
+
+  const ensureProductSelections = (count: number) => {
+    productSelections.value = resizeProductSelections(productSelections.value, count)
+  }
+
+  let pendingProductIds: string[] = []
+
+  const productRequirementEntries = computed(() =>
+    buildProductRequirementEntries(structureProducts.value, 'piece-product-requirement'),
+  )
+
+  const productSelectionsFilled = computed(() =>
+    areProductSelectionsFilled(
+      requiresProductSelection.value,
+      productRequirementEntries.value,
+      productSelections.value,
+    ),
+  )
+
+  const setProductSelection = (index: number, value: string | null) => {
+    productSelections.value = applyProductSelection(productSelections.value, index, value)
+  }
+
+  watch(structureProducts, (products) => {
+    ensureProductSelections(products.length)
+    if (!pendingProductIds.length || products.length === 0) {
+      return
+    }
+    const next = Array.from(
+      { length: products.length },
+      (_, index) => pendingProductIds[index] ?? null,
+    )
+    productSelections.value = next
+    pendingProductIds = []
+  })
+
+  const requiredCustomFieldsFilled = computed(() =>
+    _requiredCustomFieldsFilled(customFieldInputs.value),
+  )
+
+  const canSubmit = computed(() =>
+    Boolean(
+      canEdit.value
+      && piece.value
+      && editionForm.name
+      && requiredCustomFieldsFilled.value
+      && productSelectionsFilled.value
+      && !saving.value,
+    ),
+  )
+
+  const fetchPiece = async () => {
+    if (!pieceId || typeof pieceId !== 'string') {
+      piece.value = null
+      pieceDocuments.value = []
+      return
+    }
+    const result = await get(`/pieces/${pieceId}`)
+    if (result.success) {
+      piece.value = result.data
+      pieceDocuments.value = Array.isArray(result.data?.documents) ? result.data.documents : []
+
+      // Use customFieldValues from entity response (enriched with customField definitions via serialization groups)
+      const customValues = Array.isArray(result.data?.customFieldValues) ? result.data.customFieldValues : []
+      refreshCustomFieldInputs(undefined, customValues)
+
+      // Use cached type from loadPieceTypes() instead of separate getModelType() call
+      loadPieceTypeDetailsFromCache(result.data)
+
+      // History is non-blocking — template handles its own loading state
+      loadHistory(result.data.id).catch(() => {})
+    }
+    else {
+      piece.value = null
+      pieceDocuments.value = []
+    }
+  }
+
+  const loadPieceTypeDetailsFromCache = (currentPiece: any) => {
+    const typeId = currentPiece?.typePieceId
+      || extractRelationId(currentPiece?.typePiece)
+      || ''
+    if (!typeId) {
+      pieceTypeDetails.value = null
+      return
+    }
+    // Look up in the already-loaded pieceTypes cache (from loadPieceTypes in onMounted)
+    const cachedType = (pieceTypes.value || []).find((t: any) => t.id === typeId) ?? null
+    if (cachedType) {
+      pieceTypeDetails.value = cachedType
+      refreshCustomFieldInputs((cachedType.structure as PieceModelStructure | null) ?? null, currentPiece?.customFieldValues ?? null)
+      return
+    }
+    // Fallback: fetch if not in cache (edge case)
+    getModelType(typeId).then((type) => {
+      if (type && typeof type === 'object') {
+        pieceTypeDetails.value = type
+        refreshCustomFieldInputs((type.structure as PieceModelStructure | null) ?? null, currentPiece?.customFieldValues ?? null)
+      }
+    }).catch(() => {
+      pieceTypeDetails.value = null
+    })
+  }
+
+  let initialized = false
+
+  watch(
+    [piece, selectedType],
+    ([currentPiece, _currentType]) => {
+      if (!currentPiece || initialized) {
+        return
+      }
+
+      const resolvedTypeId = currentPiece.typePieceId
+        || extractRelationId(currentPiece.typePiece)
+        || ''
+      if (resolvedTypeId && !currentPiece.typePieceId) {
+        currentPiece.typePieceId = resolvedTypeId
+      }
+      selectedTypeId.value = resolvedTypeId
+
+      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] : [],
+      )
+      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))
+        : currentPiece.product?.id || currentPiece.productId
+          ? [String(currentPiece.product?.id || currentPiece.productId)]
+          : []
+      pendingProductIds = existingProductIds
+      ensureProductSelections(structureProducts.value.length)
+      if (existingProductIds.length && structureProducts.value.length) {
+        const next = Array.from(
+          { length: structureProducts.value.length },
+          (_, index) => existingProductIds[index] ?? null,
+        )
+        productSelections.value = next
+        pendingProductIds = []
+      }
+
+      // After setting selectedTypeId, read selectedType.value (now updated) instead of
+      // the stale destructured currentType which was captured before the ID change.
+      const resolvedType = selectedType.value ?? pieceTypeDetails.value ?? null
+      refreshCustomFieldInputs(resolvedType?.structure ?? null, currentPiece.customFieldValues)
+
+      initialized = true
+    },
+    { immediate: true },
+  )
+
+  watch(selectedType, (currentType) => {
+    if (!piece.value || !currentType) {
+      return
+    }
+    refreshCustomFieldInputs(currentType.structure, piece.value.customFieldValues)
+  })
+
+  watch(resolvedStructure, (currentStructure) => {
+    if (!piece.value) {
+      return
+    }
+    ensureProductSelections(structureProducts.value.length)
+    refreshCustomFieldInputs(currentStructure, piece.value.customFieldValues)
+  })
+
+  const submitEdition = async () => {
+    if (!piece.value) {
+      return
+    }
+
+    if (!productSelectionsFilled.value) {
+      toast.showError('Sélectionnez un produit conforme au squelette.')
+      return
+    }
+
+    const rawPrice = typeof editionForm.prix === 'string'
+      ? editionForm.prix.trim()
+      : editionForm.prix === null || editionForm.prix === undefined
+        ? ''
+        : 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()
+    payload.reference = reference ? reference : null
+
+    const normalizedProductIds = collectNormalizedProductIds(
+      productRequirementEntries.value,
+      productSelections.value,
+    )
+
+    payload.productIds = normalizedProductIds
+    payload.productId = normalizedProductIds[0] || null
+
+    if (rawPrice) {
+      const parsed = Number(rawPrice)
+      if (!Number.isNaN(parsed)) {
+        payload.prix = String(parsed)
+      }
+    }
+    else {
+      payload.prix = null
+    }
+
+    saving.value = true
+    try {
+      const result = await updatePiece(piece.value.id, payload)
+      if (result.success && result.data) {
+        const updatedPiece = result.data as Record<string, any>
+        await _saveCustomFieldValues(
+          'piece',
+          updatedPiece.id,
+          [
+            updatedPiece?.typePiece?.pieceCustomFields,
+          ],
+          { customFieldInputs, upsertCustomFieldValue, updateCustomFieldValue, toast },
+        )
+        await router.push('/pieces-catalog')
+      }
+    }
+    catch (error: any) {
+      toast.showError(error?.message || 'Erreur lors de la mise à jour de la pièce')
+    }
+    finally {
+      saving.value = false
+    }
+  }
+
+  onMounted(async () => {
+    await Promise.allSettled([loadPieceTypes(), fetchPiece()])
+    loading.value = false
+  })
+
+  return {
+    // State
+    piece,
+    loading,
+    saving,
+    selectedFiles,
+    uploadingDocuments,
+    loadingDocuments,
+    pieceDocuments,
+    previewDocument,
+    previewVisible,
+    selectedTypeId,
+    editionForm,
+    productSelections,
+    customFieldInputs,
+    canEdit,
+
+    // Computed
+    pieceTypeList,
+    selectedType,
+    resolvedStructure,
+    structureProducts,
+    productRequirementDescriptions,
+    productRequirementEntries,
+    canSubmit,
+    historyFieldLabels,
+
+    // History
+    history,
+    historyLoading,
+    historyError,
+
+    // Methods
+    openPreview,
+    closePreview,
+    removeDocument,
+    handleFilesAdded,
+    setProductSelection,
+    submitEdition,
+    formatPieceStructurePreview,
+  }
+}

app/composables/useToast.ts

@@ -76,6 +76,7 @@ export function useToast() {
 
   const clearAll = (): void => {
     toasts.value = []
+    recentMessages.clear()
   }
 
   return {

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

@@ -273,492 +273,42 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, reactive, ref, watch } from 'vue'
-import { useRoute, useRouter } from '#imports'
-import ConstructeurSelect from '~/components/ConstructeurSelect.vue'
-import DocumentUpload from '~/components/DocumentUpload.vue'
-import DocumentPreviewModal from '~/components/DocumentPreviewModal.vue'
-import { useComponentTypes } from '~/composables/useComponentTypes'
-import { useComposants } from '~/composables/useComposants'
-import { usePieceTypes } from '~/composables/usePieceTypes'
-import { useProductTypes } from '~/composables/useProductTypes'
-import { usePieces } from '~/composables/usePieces'
-import { useProducts } from '~/composables/useProducts'
-import { useCustomFields } from '~/composables/useCustomFields'
-import { useApi } from '~/composables/useApi'
-import { useToast } from '~/composables/useToast'
-import { extractRelationId } from '~/shared/apiRelations'
-import { useDocuments } from '~/composables/useDocuments'
-import { useConstructeurs } from '~/composables/useConstructeurs'
-import { useComponentHistory } from '~/composables/useComponentHistory'
-import { formatStructurePreview, normalizeStructureForEditor } from '~/shared/modelUtils'
-import { uniqueConstructeurIds } from '~/shared/constructeurUtils'
-import {
-  getStructurePieces,
-  getStructureProducts,
-  resolvePieceLabel as _resolvePieceLabel,
-  resolveProductLabel as _resolveProductLabel,
-  resolveSubcomponentLabel,
-  fetchModelTypeNames,
-  buildTypeLabelMap,
-} from '~/shared/utils/structureDisplayUtils'
-import type { ComponentModelStructure } from '~/shared/types/inventory'
-import type { ModelType } from '~/services/modelTypes'
-import { canPreviewDocument } from '~/utils/documentPreview'
-import {
-  type CustomFieldInput,
-  buildCustomFieldInputs,
-  requiredCustomFieldsFilled as _requiredCustomFieldsFilled,
-  saveCustomFieldValues as _saveCustomFieldValues,
-} from '~/shared/utils/customFieldFormUtils'
+import { useRoute } from '#imports'
+import { useComponentEdit } from '~/composables/useComponentEdit'
 
-interface ComponentCatalogType extends ModelType {
-  structure: ComponentModelStructure | null
-  customFields?: Array<Record<string, any>>
-}
-
-const { canEdit } = usePermissions()
 const route = useRoute()
-const router = useRouter()
-const { get } = useApi()
-const { componentTypes, loadComponentTypes } = useComponentTypes()
-const { pieceTypes, loadPieceTypes } = usePieceTypes()
-const { productTypes, loadProductTypes } = useProductTypes()
-const { updateComposant, loadComposants, composants: componentCatalogRef } = useComposants()
-const { pieces, loadPieces } = usePieces()
-const { products, loadProducts } = useProducts()
-const { ensureConstructeurs } = useConstructeurs()
-const { upsertCustomFieldValue, updateCustomFieldValue } = useCustomFields()
-const toast = useToast()
-const { loadDocumentsByComponent, uploadDocuments, deleteDocument } = useDocuments()
+
 const {
-  history,
-  loading: historyLoading,
-  error: historyError,
-  loadHistory,
-} = useComponentHistory()
-
-const component = ref<any | null>(null)
-const loading = ref(true)
-const saving = ref(false)
-const selectedFiles = ref<File[]>([])
-const uploadingDocuments = ref(false)
-const loadingDocuments = ref(false)
-const componentDocuments = ref<any[]>([])
-const previewDocument = ref<any | null>(null)
-const previewVisible = ref(false)
-
-const historyFieldLabels: Record<string, string> = {
-  name: 'Nom',
-  reference: 'Référence',
-  prix: 'Prix',
-  structure: 'Structure',
-  typeComposant: 'Catégorie',
-  product: 'Produit lié',
-  constructeurIds: 'Fournisseurs',
-}
-
-const selectedTypeId = ref<string>('')
-const editionForm = reactive({
-  name: '' as string,
-  description: '' as string,
-  reference: '' as string,
-  constructeurIds: [] as string[],
-  prix: '' as string,
-})
-
-const customFieldInputs = ref<CustomFieldInput[]>([])
-const fetchedPieceTypeMap = ref<Record<string, string>>({})
-const pieceTypeLabelMap = computed(() =>
-  buildTypeLabelMap(pieceTypes.value, fetchedPieceTypeMap.value),
-)
-const fetchedProductTypeMap = ref<Record<string, string>>({})
-const productTypeLabelMap = computed(() =>
-  buildTypeLabelMap(productTypes.value, fetchedProductTypeMap.value),
-)
-const pieceCatalogMap = computed(() =>
-  new Map(
-    (pieces.value || [])
-      .filter((item: any) => item?.id)
-      .map((item: any) => [String(item.id), item]),
-  ),
-)
-const productCatalogMap = computed(() =>
-  new Map(
-    (products.value || [])
-      .filter((item: any) => item?.id)
-      .map((item: any) => [String(item.id), item]),
-  ),
-)
-const componentCatalogMap = computed(() =>
-  new Map(
-    (componentCatalogRef.value || [])
-      .filter((item: any) => item?.id)
-      .map((item: any) => [String(item.id), item]),
-  ),
-)
-const openPreview = (doc: any) => {
-  if (!doc || !canPreviewDocument(doc)) {
-    return
-  }
-  previewDocument.value = doc
-  previewVisible.value = true
-}
-const closePreview = () => {
-  previewVisible.value = false
-  previewDocument.value = null
-}
-const removeDocument = async (documentId: string | number | null | undefined) => {
-  if (!documentId) {
-    return
-  }
-  const result = await deleteDocument(documentId, { updateStore: false })
-  if (result.success) {
-    componentDocuments.value = componentDocuments.value.filter((doc) => doc.id !== documentId)
-  }
-}
-const handleFilesAdded = async (files: File[]) => {
-  if (!files?.length || !component.value?.id) {
-    return
-  }
-  uploadingDocuments.value = true
-  try {
-    const result = await uploadDocuments(
-      {
-        files,
-        context: { composantId: component.value.id },
-      },
-      { updateStore: false },
-    )
-    if (result.success) {
-      selectedFiles.value = []
-      await refreshDocuments()
-    }
-  } finally {
-    uploadingDocuments.value = false
-  }
-}
-const refreshDocuments = async () => {
-  if (!component.value?.id) {
-    componentDocuments.value = []
-    return
-  }
-  loadingDocuments.value = true
-  try {
-    const result = await loadDocumentsByComponent(component.value.id, { updateStore: false })
-    if (result.success) {
-      componentDocuments.value = Array.isArray(result.data) ? result.data : result.data ? [result.data] : []
-    }
-  } finally {
-    loadingDocuments.value = false
-  }
-}
-
-const componentTypeList = computed<ComponentCatalogType[]>(() =>
-  (componentTypes.value || [])
-    .filter((item: any) => item?.category === 'COMPONENT') as ComponentCatalogType[],
-)
-
-const selectedType = computed(() => {
-  if (!selectedTypeId.value) {
-    return null
-  }
-  return componentTypeList.value.find((type) => type.id === selectedTypeId.value) ?? null
-})
-
-const selectedTypeStructure = computed<ComponentModelStructure | null>(() => {
-  const structure = selectedType.value?.structure ?? null
-  return structure ? normalizeStructureForEditor(structure) : null
-})
-
-const refreshCustomFieldInputs = (
-  structureOverride?: ComponentModelStructure | null,
-  valuesOverride?: any[] | null,
-) => {
-  const structure = structureOverride ?? selectedTypeStructure.value ?? null
-  const values = valuesOverride ?? component.value?.customFieldValues ?? null
-  customFieldInputs.value = buildCustomFieldInputs(structure, values)
-}
-
-const requiredCustomFieldsFilled = computed(() =>
-  _requiredCustomFieldsFilled(customFieldInputs.value),
-)
-
-const canSubmit = computed(() => Boolean(
-  canEdit.value &&
-  component.value &&
-  editionForm.name &&
-  requiredCustomFieldsFilled.value &&
-  !saving.value,
-))
-
-const fetchComponent = async () => {
-  const id = route.params.id
-  if (!id || typeof id !== 'string') {
-    component.value = null
-    componentDocuments.value = []
-    return
-  }
-  const result = await get(`/composants/${id}`)
-  if (result.success) {
-    component.value = result.data
-    componentDocuments.value = Array.isArray(result.data?.documents) ? result.data.documents : []
-
-    const customValues = Array.isArray(result.data?.customFieldValues) ? result.data.customFieldValues : []
-    refreshCustomFieldInputs(undefined, customValues)
-
-    loadHistory(result.data.id).catch(() => {})
-  } else {
-    component.value = null
-    componentDocuments.value = []
-  }
-}
-
-const initialized = ref(false)
-
-watch(
-  [component, selectedTypeStructure],
-  ([currentComponent, currentStructure]) => {
-    if (!currentComponent) {
-      return
-    }
-
-    if (!initialized.value) {
-      const resolvedTypeId = currentComponent.typeComposantId
-        || extractRelationId(currentComponent.typeComposant)
-        || ''
-      if (resolvedTypeId && !currentComponent.typeComposantId) {
-        currentComponent.typeComposantId = resolvedTypeId
-      }
-      selectedTypeId.value = resolvedTypeId
-
-      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] : [],
-      )
-      editionForm.prix = currentComponent.prix !== null && currentComponent.prix !== undefined ? String(currentComponent.prix) : ''
-      if (editionForm.constructeurIds.length) {
-        void ensureConstructeurs(editionForm.constructeurIds)
-      }
-
-      initialized.value = true
-    }
-
-    refreshCustomFieldInputs(selectedTypeStructure.value ?? currentStructure, currentComponent.customFieldValues)
-  },
-  { immediate: true },
-)
-
-const submitEdition = async () => {
-  if (!component.value) {
-    return
-  }
-
-  const rawPrice = typeof editionForm.prix === 'string'
-    ? editionForm.prix.trim()
-    : editionForm.prix === null || editionForm.prix === undefined
-      ? ''
-      : String(editionForm.prix).trim()
-
-  const payload: Record<string, any> = {
-    name: editionForm.name.trim(),
-    description: editionForm.description.trim() || null,
-  }
-
-  const reference = editionForm.reference.trim()
-  payload.reference = reference ? reference : null
-  payload.constructeurIds = uniqueConstructeurIds(editionForm.constructeurIds)
-
-  if (rawPrice) {
-    const parsed = Number(rawPrice)
-    if (!Number.isNaN(parsed)) {
-      payload.prix = String(parsed)
-    }
-  } else {
-    payload.prix = null
-  }
-
-  saving.value = true
-  try {
-    const result = await updateComposant(component.value.id, payload)
-    if (result.success && result.data) {
-      const updatedComponent = result.data as Record<string, any>
-      await _saveCustomFieldValues(
-        'composant',
-        updatedComponent.id,
-        [
-          updatedComponent?.typeComposant?.customFields,
-        ],
-        { customFieldInputs, upsertCustomFieldValue, updateCustomFieldValue, toast },
-      )
-      await router.push('/component-catalog')
-    }
-  } catch (error: any) {
-    toast.showError(error?.message || 'Erreur lors de la mise à jour du composant')
-  } finally {
-    saving.value = false
-  }
-}
-
-const isNonEmptyString = (value: unknown): value is string =>
-  typeof value === 'string' && value.trim().length > 0
-
-const resolvePieceLabel = (piece: Record<string, any>) =>
-  _resolvePieceLabel(piece, pieceTypeLabelMap.value)
-
-const resolveProductLabel = (product: Record<string, any>) =>
-  _resolveProductLabel(product, productTypeLabelMap.value)
-
-watch(
+  component,
+  loading,
+  saving,
+  selectedFiles,
+  uploadingDocuments,
+  loadingDocuments,
+  componentDocuments,
+  previewDocument,
+  previewVisible,
+  selectedTypeId,
+  editionForm,
+  customFieldInputs,
+  historyFieldLabels,
+  canEdit,
+  canSubmit,
+  componentTypeList,
+  selectedType,
   selectedTypeStructure,
-  (structure) => {
-    const pieceIds = getStructurePieces(structure)
-      .map((piece: any) => piece?.typePieceId)
-      .filter((id: any): id is string => typeof id === 'string' && id.trim().length > 0)
-    if (pieceIds.length) {
-      fetchModelTypeNames(Array.from(new Set(pieceIds)), pieceTypeLabelMap.value, get)
-        .then((additions) => {
-          if (Object.keys(additions).length) {
-            fetchedPieceTypeMap.value = { ...fetchedPieceTypeMap.value, ...additions }
-          }
-        })
-        .catch(() => {})
-    }
-
-    const productIds = getStructureProducts(structure)
-      .map((product: any) => product?.typeProductId)
-      .filter((id: any): id is string => typeof id === 'string' && id.trim().length > 0)
-    if (productIds.length) {
-      fetchModelTypeNames(Array.from(new Set(productIds)), productTypeLabelMap.value, get)
-        .then((additions) => {
-          if (Object.keys(additions).length) {
-            fetchedProductTypeMap.value = { ...fetchedProductTypeMap.value, ...additions }
-          }
-        })
-        .catch(() => {})
-    }
-  },
-  { immediate: true },
-)
-
-type SelectionEntry = {
-  id: string
-  path: string
-  requirementLabel: string
-  resolvedName: string
-}
-
-const collectStructureSelections = (root: any): {
-  pieces: SelectionEntry[]
-  products: SelectionEntry[]
-  components: SelectionEntry[]
-} => {
-  const piecesSelected: SelectionEntry[] = []
-  const productsSelected: SelectionEntry[] = []
-  const componentsSelected: SelectionEntry[] = []
-
-  if (!root || typeof root !== 'object') {
-    return { pieces: piecesSelected, products: productsSelected, components: componentsSelected }
-  }
-
-  const visitNode = (node: any, fallbackPath = 'racine') => {
-    if (!node || typeof node !== 'object') {
-      return
-    }
-
-    const nodePath = isNonEmptyString(node.path) ? node.path : fallbackPath
-
-    const nodePieces = Array.isArray(node.pieces) ? node.pieces : []
-    nodePieces.forEach((entry: any, index: number) => {
-      const selectedId = entry?.selectedPieceId
-      if (!isNonEmptyString(selectedId)) {
-        return
-      }
-      const definition = entry?.definition ?? entry
-      const catalogPiece = pieceCatalogMap.value.get(selectedId)
-      piecesSelected.push({
-        id: selectedId,
-        path: isNonEmptyString(entry?.path) ? entry.path : `${nodePath}:piece-${index + 1}`,
-        requirementLabel: resolvePieceLabel(definition),
-        resolvedName: catalogPiece?.name || selectedId,
-      })
-    })
-
-    const nodeProducts = Array.isArray(node.products) ? node.products : []
-    nodeProducts.forEach((entry: any, index: number) => {
-      const selectedId = entry?.selectedProductId
-      if (!isNonEmptyString(selectedId)) {
-        return
-      }
-      const definition = entry?.definition ?? entry
-      const catalogProduct = productCatalogMap.value.get(selectedId)
-      productsSelected.push({
-        id: selectedId,
-        path: isNonEmptyString(entry?.path) ? entry.path : `${nodePath}:product-${index + 1}`,
-        requirementLabel: resolveProductLabel(definition),
-        resolvedName: catalogProduct?.name || selectedId,
-      })
-    })
-
-    const nodeChildren = Array.isArray(node.subcomponents)
-      ? node.subcomponents
-      : Array.isArray(node.subComponents)
-        ? node.subComponents
-        : []
-
-    nodeChildren.forEach((child: any, index: number) => {
-      const selectedId = child?.selectedComponentId
-      if (isNonEmptyString(selectedId)) {
-        const definition = child?.definition ?? child
-        const catalogComponent = componentCatalogMap.value.get(selectedId)
-        componentsSelected.push({
-          id: selectedId,
-          path: isNonEmptyString(child?.path) ? child.path : `${nodePath}:subcomponent-${index + 1}`,
-          requirementLabel: resolveSubcomponentLabel(definition),
-          resolvedName: catalogComponent?.name || selectedId,
-        })
-      }
-
-      visitNode(child, isNonEmptyString(child?.path) ? child.path : `${nodePath}:subcomponent-${index + 1}`)
-    })
-  }
-
-  visitNode(root, isNonEmptyString(root?.path) ? root.path : 'racine')
-
-  return { pieces: piecesSelected, products: productsSelected, components: componentsSelected }
-}
-
-const structureSelections = computed(() => {
-  const selections = collectStructureSelections(component.value?.structure)
-  const total =
-    selections.pieces.length + selections.products.length + selections.components.length
-  return {
-    ...selections,
-    total,
-    hasAny: total > 0,
-  }
-})
-
-onMounted(async () => {
-  await Promise.allSettled([
-    loadComponentTypes(),
-    loadPieceTypes(),
-    loadProductTypes(),
-    fetchComponent(),
-  ])
-  loading.value = false
-
-  // Defer bulk catalog loads — only needed when component has structure selections
-  if (component.value?.structure) {
-    Promise.allSettled([
-      loadPieces({ itemsPerPage: 200 }),
-      loadProducts({ itemsPerPage: 200 }),
-      loadComposants({ itemsPerPage: 200 }),
-    ]).catch(() => {})
-  }
-})
+  structureSelections,
+  history,
+  historyLoading,
+  historyError,
+  openPreview,
+  closePreview,
+  removeDocument,
+  handleFilesAdded,
+  submitEdition,
+  resolvePieceLabel,
+  resolveProductLabel,
+  resolveSubcomponentLabel,
+  formatStructurePreview,
+} = useComponentEdit(String(route.params.id))
 </script>

app/pages/component/create.vue

@@ -215,567 +215,38 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, reactive, ref, watch } from 'vue'
-import { useRoute, useRouter } from '#imports'
-import ConstructeurSelect from '~/components/ConstructeurSelect.vue'
-import DocumentUpload from '~/components/DocumentUpload.vue'
-import ComponentStructureAssignmentNode, {
-  type StructureAssignmentNode,
-} from '~/components/ComponentStructureAssignmentNode.vue'
-import SearchSelect from '~/components/common/SearchSelect.vue'
-import { useComponentTypes } from '~/composables/useComponentTypes'
-import { useComposants } from '~/composables/useComposants'
-import { usePieces } from '~/composables/usePieces'
-import { usePieceTypes } from '~/composables/usePieceTypes'
-import { useProducts } from '~/composables/useProducts'
-import { useProductTypes } from '~/composables/useProductTypes'
-import { useApi } from '~/composables/useApi'
-import { useToast } from '~/composables/useToast'
-import { humanizeError } from '~/shared/utils/errorMessages'
-import { useCustomFields } from '~/composables/useCustomFields'
-import { useDocuments } from '~/composables/useDocuments'
-import { formatStructurePreview, normalizeStructureForEditor } from '~/shared/modelUtils'
-import {
-  type CustomFieldInput,
-  normalizeCustomFieldInputs,
-  requiredCustomFieldsFilled as _requiredCustomFieldsFilled,
-  saveCustomFieldValues as _saveCustomFieldValues,
-} from '~/shared/utils/customFieldFormUtils'
-import { uniqueConstructeurIds } from '~/shared/constructeurUtils'
-import {
-  getStructurePieces,
-  resolvePieceLabel as _resolvePieceLabel,
-  resolveProductLabel as _resolveProductLabel,
-  resolveSubcomponentLabel,
-  fetchModelTypeNames,
-  buildTypeLabelMap,
-} from '~/shared/utils/structureDisplayUtils'
-import type {
-  ComponentModelPiece,
-  ComponentModelProduct,
-  ComponentModelStructure,
-  ComponentModelStructureNode,
-} from '~/shared/types/inventory'
-import type { ModelType } from '~/services/modelTypes'
-
-interface ComponentCatalogType extends ModelType {
-  structure: ComponentModelStructure | null
-  customFields?: Array<Record<string, any>>
-}
-
-const route = useRoute()
-const router = useRouter()
-const { get } = useApi()
-
-const { componentTypes, loadComponentTypes, loadingComponentTypes: loadingTypes } = useComponentTypes()
-const { pieceTypes, loadPieceTypes } = usePieceTypes()
-const { productTypes, loadProductTypes } = useProductTypes()
 const {
-  createComposant,
-  composants: componentCatalogRef,
-  loading: componentsLoading,
-} = useComposants()
-const {
-  pieces: pieceCatalogRef,
-  loading: piecesLoading,
-} = usePieces()
-const {
-  products: productCatalogRef,
-  loading: productsLoading,
-} = useProducts()
-const toast = useToast()
-const { upsertCustomFieldValue, updateCustomFieldValue } = useCustomFields()
-const { uploadDocuments } = useDocuments()
-const { canEdit } = usePermissions()
-
-const selectedTypeId = ref<string>(typeof route.query.typeId === 'string' ? route.query.typeId : '')
-const submitting = ref(false)
-const creationForm = reactive({
-  name: '' as string,
-  description: '' as string,
-  reference: '' as string,
-  constructeurIds: [] as string[],
-  prix: '' as string,
-})
-const lastSuggestedName = ref('')
-const customFieldInputs = ref<CustomFieldInput[]>([])
-const structureAssignments = ref<StructureAssignmentNode | null>(null)
-const selectedDocuments = ref<File[]>([])
-const uploadingDocuments = ref(false)
-
-const availablePieces = computed(() => pieceCatalogRef.value ?? [])
-const availableProducts = computed(() => productCatalogRef.value ?? [])
-const availableComponents = computed(() => componentCatalogRef.value ?? [])
-const structureDataLoading = computed(
-  () => piecesLoading.value || componentsLoading.value || productsLoading.value,
-)
-
-const fetchedPieceTypeMap = ref<Record<string, string>>({})
-const pieceTypeLabelMap = computed(() =>
-  buildTypeLabelMap(pieceTypes.value, fetchedPieceTypeMap.value),
-)
-const productTypeLabelMap = computed(() =>
-  buildTypeLabelMap(productTypes.value),
-)
-const componentTypeLabelMap = computed(() =>
-  buildTypeLabelMap(componentTypes.value),
-)
-
-watch(
-  () => route.query.typeId,
-  (value) => {
-    if (typeof value === 'string') {
-      selectedTypeId.value = value
-    }
-  },
-)
-
-watch(selectedTypeId, (id) => {
-  const current = typeof route.query.typeId === 'string' ? route.query.typeId : ''
-  if ((id || '') === current) {
-    return
-  }
-  const nextQuery = { ...route.query }
-  if (id) {
-    nextQuery.typeId = id
-  } else {
-    delete nextQuery.typeId
-  }
-  router.replace({ path: route.path, query: nextQuery }).catch(() => {})
-})
-
-const componentTypeList = computed<ComponentCatalogType[]>(() =>
-  (componentTypes.value || [])
-    .filter((item: any) => item?.category === 'COMPONENT') as ComponentCatalogType[],
-)
-
-const typeOptionLabel = (type?: ComponentCatalogType) =>
-  type?.name || 'Catégorie'
-
-const typeOptionDescription = (type?: ComponentCatalogType) =>
-  type?.description ? String(type.description) : ''
-
-const selectedType = computed(() => {
-  if (!selectedTypeId.value) {
-    return null
-  }
-  return componentTypeList.value.find((type) => type.id === selectedTypeId.value) ?? null
-})
-
-const selectedTypeStructure = computed<ComponentModelStructure | null>(() => {
-  const structure = selectedType.value?.structure ?? null
-  return structure ? normalizeStructureForEditor(structure) : null
-})
-
-watch(selectedType, (type) => {
-  if (!type) {
-    clearCreationForm()
-    customFieldInputs.value = []
-    structureAssignments.value = null
-    return
-  }
-  if (!creationForm.name || creationForm.name === lastSuggestedName.value) {
-    creationForm.name = type.name
-  }
-  lastSuggestedName.value = creationForm.name
-  customFieldInputs.value = normalizeCustomFieldInputs(selectedTypeStructure.value)
-  structureAssignments.value = initializeStructureAssignments(selectedTypeStructure.value)
-})
-
-const extractSubcomponents = (
-  definition: ComponentModelStructure | ComponentModelStructureNode | null | undefined,
-): ComponentModelStructureNode[] => {
-  if (!definition || typeof definition !== 'object') {
-    return []
-  }
-  const raw = Array.isArray((definition as any).subcomponents)
-    ? (definition as any).subcomponents
-    : Array.isArray((definition as any).subComponents)
-      ? (definition as any).subComponents
-      : []
-  return raw.filter(
-    (item: unknown): item is ComponentModelStructureNode =>
-      !!item && typeof item === 'object',
-  )
-}
-
-const extractPiecesFromNode = (
-  definition: ComponentModelStructure | ComponentModelStructureNode | null | undefined,
-): ComponentModelPiece[] => {
-  if (!definition || typeof definition !== 'object') {
-    return []
-  }
-  const raw = Array.isArray((definition as any).pieces)
-    ? (definition as any).pieces
-    : []
-  return raw.filter(
-    (item: unknown): item is ComponentModelPiece =>
-      !!item && typeof item === 'object',
-  )
-}
-
-const extractProductsFromNode = (
-  definition: ComponentModelStructure | ComponentModelStructureNode | null | undefined,
-): ComponentModelProduct[] => {
-  if (!definition || typeof definition !== 'object') {
-    return []
-  }
-  const raw = Array.isArray((definition as any).products)
-    ? (definition as any).products
-    : []
-  return raw.filter(
-    (item: unknown): item is ComponentModelProduct =>
-      !!item && typeof item === 'object',
-  )
-}
-
-const buildAssignmentNode = (
-  definition: ComponentModelStructureNode | ComponentModelStructure,
-  path: string,
-): StructureAssignmentNode => {
-  const pieces = extractPiecesFromNode(definition).map((piece, index) => ({
-    path: `${path}:piece-${index}`,
-    definition: piece,
-    selectedPieceId: '',
-  }))
-
-  const products = extractProductsFromNode(definition).map((product, index) => ({
-    path: `${path}:product-${index}`,
-    definition: product,
-    selectedProductId: '',
-  }))
-
-  const subcomponents = extractSubcomponents(definition).map(
-    (child, index) => buildAssignmentNode(child, `${path}:sub-${index}`),
-  )
-
-  return {
-    path,
-    definition,
-    selectedComponentId: '',
-    pieces,
-    products,
-    subcomponents,
-  }
-}
-
-const initializeStructureAssignments = (
-  structure: ComponentModelStructure | null,
-): StructureAssignmentNode | null => {
-  if (!structure || typeof structure !== 'object') {
-    return null
-  }
-  return buildAssignmentNode(structure, 'root')
-}
-
-const hasAssignments = (node: StructureAssignmentNode | null): boolean => {
-  if (!node) {
-    return false
-  }
-  if (node.pieces.length > 0 || node.products.length > 0 || node.subcomponents.length > 0) {
-    return true
-  }
-  return node.subcomponents.some((child) => hasAssignments(child))
-}
-
-const structureHasRequirements = computed(() =>
-  hasAssignments(structureAssignments.value),
-)
-
-const isAssignmentNodeComplete = (
-  node: StructureAssignmentNode,
-  isRootNode = false,
-): boolean => {
-  const piecesComplete = node.pieces.every(
-    (piece) => !!piece.selectedPieceId && piece.selectedPieceId.length > 0,
-  )
-  const productsComplete = node.products.every(
-    (product) => !!product.selectedProductId && product.selectedProductId.length > 0,
-  )
-  const subcomponentsComplete = node.subcomponents.every(
-    (child) =>
-      !!child.selectedComponentId &&
-      child.selectedComponentId.length > 0 &&
-      isAssignmentNodeComplete(child, false),
-  )
-  return (
-    piecesComplete &&
-    productsComplete &&
-    subcomponentsComplete &&
-    (isRootNode || !!node.selectedComponentId)
-  )
-}
-
-const structureSelectionsComplete = computed(() => {
-  if (!structureHasRequirements.value) {
-    return true
-  }
-  if (structureDataLoading.value) {
-    return false
-  }
-  if (!structureAssignments.value) {
-    return false
-  }
-  return isAssignmentNodeComplete(structureAssignments.value, true)
-})
-
-const stripNullish = (input: Record<string, any>) =>
-  Object.fromEntries(
-    Object.entries(input).filter(
-      ([, value]) => value !== null && value !== undefined && value !== '',
-    ),
-  )
-
-const sanitizeStructureDefinition = (
-  definition: ComponentModelStructureNode,
-) =>
-  stripNullish({
-    alias: definition.alias ?? null,
-    typeComposantId: definition.typeComposantId ?? null,
-    typeComposantLabel: definition.typeComposantLabel ?? null,
-    modelId: definition.modelId ?? null,
-    familyCode: (definition as any).familyCode ?? null,
-  })
-
-const sanitizePieceDefinition = (definition: ComponentModelPiece) =>
-  stripNullish({
-    role: (definition as any).role ?? null,
-    typePieceId: definition.typePieceId ?? null,
-    typePieceLabel: definition.typePieceLabel ?? null,
-    reference: definition.reference ?? null,
-    familyCode: (definition as any).familyCode ?? null,
-  })
-
-const sanitizeProductDefinition = (definition: ComponentModelProduct) =>
-  stripNullish({
-    role: (definition as any).role ?? null,
-    typeProductId: definition.typeProductId ?? null,
-    typeProductLabel: (definition as any).typeProductLabel ?? null,
-    reference: (definition as any).reference ?? null,
-    familyCode: (definition as any).familyCode ?? null,
-  })
-
-const serializeStructureAssignments = (
-  root: StructureAssignmentNode | null,
-) => {
-  if (!root) {
-    return null
-  }
-
-  const serializeNode = (
-    assignment: StructureAssignmentNode,
-    isRootNode = false,
-  ): Record<string, any> => {
-    const serializedPieces = assignment.pieces
-      .filter((piece) => !!piece.selectedPieceId)
-      .map((piece) =>
-        stripNullish({
-          path: piece.path,
-          definition: sanitizePieceDefinition(piece.definition),
-          selectedPieceId: piece.selectedPieceId,
-        }),
-      )
-
-    const serializedProducts = assignment.products
-      .filter((product) => !!product.selectedProductId)
-      .map((product) =>
-        stripNullish({
-          path: product.path,
-          definition: sanitizeProductDefinition(product.definition),
-          selectedProductId: product.selectedProductId,
-        }),
-      )
-
-    const serializedSubcomponents = assignment.subcomponents
-      .map((child) => serializeNode(child, false))
-      .filter((child) => Object.keys(child).length > 0)
-
-    const base: Record<string, any> = {
-      path: assignment.path,
-      definition: sanitizeStructureDefinition(assignment.definition),
-    }
-
-    if (!isRootNode) {
-      base.selectedComponentId = assignment.selectedComponentId
-    }
-    if (serializedPieces.length) {
-      base.pieces = serializedPieces
-    }
-    if (serializedProducts.length) {
-      base.products = serializedProducts
-    }
-    if (serializedSubcomponents.length) {
-      base.subcomponents = serializedSubcomponents
-    }
-
-    return stripNullish(base)
-  }
-
-  const serializedRoot = serializeNode(root, true)
-  if (
-    (!serializedRoot.pieces || serializedRoot.pieces.length === 0) &&
-    (!serializedRoot.products || serializedRoot.products.length === 0) &&
-    (!serializedRoot.subcomponents || serializedRoot.subcomponents.length === 0)
-  ) {
-    return null
-  }
-  return serializedRoot
-}
-
-const requiredCustomFieldsFilled = computed(() =>
-  _requiredCustomFieldsFilled(customFieldInputs.value),
-)
-
-const canSubmit = computed(() => Boolean(
-  canEdit.value &&
-  selectedType.value &&
-  creationForm.name &&
-  requiredCustomFieldsFilled.value &&
-  structureSelectionsComplete.value &&
-  !submitting.value,
-))
-
-const resolvePieceLabel = (piece: Record<string, any>) =>
-  _resolvePieceLabel(piece, pieceTypeLabelMap.value)
-
-const resolveProductLabel = (product: Record<string, any>) =>
-  _resolveProductLabel(product, productTypeLabelMap.value)
-
-watch(
+  selectedTypeId,
+  submitting,
+  creationForm,
+  customFieldInputs,
+  structureAssignments,
+  selectedDocuments,
+  uploadingDocuments,
+  loadingTypes,
+  componentTypeList,
+  selectedType,
   selectedTypeStructure,
-  (structure) => {
-    const ids = getStructurePieces(structure)
-      .map((piece: any) => piece?.typePieceId)
-      .filter((id: any): id is string => typeof id === 'string' && id.trim().length > 0)
-    if (!ids.length) {
-      return
-    }
-    fetchModelTypeNames(Array.from(new Set(ids)), pieceTypeLabelMap.value, get)
-      .then((additions) => {
-        if (Object.keys(additions).length) {
-          fetchedPieceTypeMap.value = { ...fetchedPieceTypeMap.value, ...additions }
-        }
-      })
-      .catch(() => {})
-  },
-  { immediate: true },
-)
-
-const clearCreationForm = () => {
-  creationForm.name = ''
-  creationForm.description = ''
-  creationForm.reference = ''
-  creationForm.constructeurIds = []
-  creationForm.prix = ''
-  lastSuggestedName.value = ''
-  structureAssignments.value = null
-}
-
-const submitCreation = async () => {
-  if (!selectedType.value) {
-    toast.showError('Sélectionnez une catégorie de composant.')
-    return
-  }
-  const payload: Record<string, any> = {
-    name: creationForm.name.trim(),
-    typeComposantId: selectedType.value.id,
-  }
-
-  const description = creationForm.description.trim()
-  if (description) {
-    payload.description = description
-  }
-
-  const reference = creationForm.reference.trim()
-  if (reference) {
-    payload.reference = reference
-  }
-
-  if (creationForm.constructeurIds.length) {
-    payload.constructeurIds = uniqueConstructeurIds(creationForm.constructeurIds)
-  }
-
-  const rawPrice = typeof creationForm.prix === 'string'
-    ? creationForm.prix.trim()
-    : creationForm.prix === null || creationForm.prix === undefined
-      ? ''
-      : String(creationForm.prix).trim()
-
-  if (rawPrice) {
-    const parsed = Number(rawPrice)
-    if (!Number.isNaN(parsed)) {
-      payload.prix = String(parsed)
-    }
-  }
-
-  const rootProductSelection =
-    structureAssignments.value?.products?.find(
-      (product) => typeof product.selectedProductId === 'string' && product.selectedProductId.trim().length > 0,
-    ) ?? null
-
-  if (rootProductSelection?.selectedProductId) {
-    payload.productId = rootProductSelection.selectedProductId.trim()
-  }
-
-  if (structureHasRequirements.value && !structureSelectionsComplete.value) {
-    toast.showError('Complétez la sélection des pièces, produits et sous-composants.')
-    return
-  }
-
-  const serializedStructure = structureHasRequirements.value
-    ? serializeStructureAssignments(structureAssignments.value)
-    : null
-
-  if (serializedStructure) {
-    payload.structure = serializedStructure
-  }
-
-  submitting.value = true
-  try {
-    const result = await createComposant(payload)
-    if (result.success) {
-      const createdComponent = result.data as Record<string, any>
-      await _saveCustomFieldValues(
-        'composant',
-        createdComponent.id,
-        [createdComponent?.typeComposant?.customFields],
-        { customFieldInputs, upsertCustomFieldValue, updateCustomFieldValue, toast },
-      )
-      if (selectedDocuments.value.length && result.data?.id) {
-        uploadingDocuments.value = true
-        const uploadResult = await uploadDocuments(
-          {
-            files: selectedDocuments.value,
-            context: { composantId: result.data.id },
-          },
-          { updateStore: false },
-        )
-        if (!uploadResult.success) {
-          const message = uploadResult.error
-            ? `Documents non ajoutés : ${uploadResult.error}`
-            : 'Documents non ajoutés : une erreur est survenue.'
-          toast.showError(message)
-        }
-        selectedDocuments.value = []
-      }
-      toast.showSuccess('Composant créé avec succès')
-      await router.push('/component-catalog')
-    } else if (result.error) {
-      toast.showError(result.error)
-    }
-  } catch (error: any) {
-    toast.showError(humanizeError(error?.message) || 'Impossible de créer le composant')
-  } finally {
-    submitting.value = false
-    uploadingDocuments.value = false
-  }
-}
-
-onMounted(async () => {
-  await Promise.allSettled([
-    loadComponentTypes(),
-    loadPieceTypes(),
-    loadProductTypes(),
-  ])
-})
+  availablePieces,
+  availableProducts,
+  availableComponents,
+  piecesLoading,
+  productsLoading,
+  componentsLoading,
+  structureDataLoading,
+  pieceTypeLabelMap,
+  productTypeLabelMap,
+  componentTypeLabelMap,
+  structureHasRequirements,
+  structureSelectionsComplete,
+  canEdit,
+  canSubmit,
+  typeOptionLabel,
+  typeOptionDescription,
+  formatStructurePreview,
+  resolvePieceLabel,
+  resolveProductLabel,
+  resolveSubcomponentLabel,
+  submitCreation,
+} = useComponentCreate()
 </script>

app/pages/index.vue

@@ -258,7 +258,7 @@
     </div>
 
     <!-- Add Site Modal -->
-    <HomeAddSiteModal
+    <AddSiteModal
       :open="showAddSiteModal"
       :disabled="!canEdit"
       @close="showAddSiteModal = false"
@@ -266,7 +266,7 @@
     />
 
     <!-- Add Machine Modal -->
-    <HomeAddMachineModal
+    <AddMachineModal
       :open="showAddMachineModal"
       :sites="sites"
       :disabled="!canEdit"

app/pages/machine/[id].vue

@@ -57,12 +57,15 @@
         :has-machine-constructeur="d.hasMachineConstructeur.value"
         :visible-custom-fields="d.visibleMachineCustomFields.value"
         :get-machine-field-id="d.getMachineFieldId"
+        :machine-id="machineId"
+        :machine-custom-field-defs="d.machine.value?.customFields ?? []"
         @update:machine-name="d.machineName.value = $event"
         @update:machine-reference="d.machineReference.value = $event"
         @update:constructeur-ids="d.handleMachineConstructeurChange"
         @blur-field="d.updateMachineInfo"
         @set-custom-field-value="d.setMachineCustomFieldValue"
         @update-custom-field="d.updateMachineCustomField"
+        @custom-fields-saved="d.loadMachineData()"
       />
 
       <!-- Documents -->

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

@@ -269,454 +269,43 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, reactive, ref, watch } from 'vue'
-import { useRoute, useRouter } from '#imports'
-import ConstructeurSelect from '~/components/ConstructeurSelect.vue'
-import DocumentUpload from '~/components/DocumentUpload.vue'
-import DocumentPreviewModal from '~/components/DocumentPreviewModal.vue'
-import ProductSelect from '~/components/ProductSelect.vue'
-import { usePieceTypes } from '~/composables/usePieceTypes'
-import { usePieces } from '~/composables/usePieces'
-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 { 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 type { PieceModelProduct, PieceModelStructure } from '~/shared/types/inventory'
-import type { ModelType } from '~/services/modelTypes'
-import { getModelType } from '~/services/modelTypes'
-import {
-  type CustomFieldInput,
-  buildCustomFieldInputs,
-  requiredCustomFieldsFilled as _requiredCustomFieldsFilled,
-  saveCustomFieldValues as _saveCustomFieldValues,
-} from '~/shared/utils/customFieldFormUtils'
+import { useRoute } from '#imports'
+import { usePieceEdit } from '~/composables/usePieceEdit'
 
-interface PieceCatalogType extends ModelType {
-  structure: PieceModelStructure | null
-  customFields?: Array<Record<string, any>>
-}
-
-const { canEdit } = usePermissions()
 const route = useRoute()
-const router = useRouter()
-const { get } = useApi()
-const { pieceTypes, loadPieceTypes } = usePieceTypes()
-const { updatePiece } = usePieces()
-const { upsertCustomFieldValue, updateCustomFieldValue } = useCustomFields()
-const toast = useToast()
-const { loadDocumentsByPiece, uploadDocuments, deleteDocument } = useDocuments()
-const { ensureConstructeurs } = useConstructeurs()
+
 const {
+  piece,
+  loading,
+  saving,
+  selectedFiles,
+  uploadingDocuments,
+  loadingDocuments,
+  pieceDocuments,
+  previewDocument,
+  previewVisible,
+  selectedTypeId,
+  editionForm,
+  productSelections,
+  customFieldInputs,
+  canEdit,
+  pieceTypeList,
+  selectedType,
+  resolvedStructure,
+  structureProducts,
+  productRequirementDescriptions,
+  productRequirementEntries,
+  canSubmit,
+  historyFieldLabels,
   history,
-  loading: historyLoading,
-  error: historyError,
-  loadHistory,
-} = usePieceHistory()
-
-const piece = ref<any | null>(null)
-const loading = ref(true)
-const saving = ref(false)
-const selectedFiles = ref<File[]>([])
-const uploadingDocuments = ref(false)
-const loadingDocuments = ref(false)
-const pieceDocuments = ref<any[]>([])
-const previewDocument = ref<any | null>(null)
-const previewVisible = ref(false)
-
-const historyFieldLabels: Record<string, string> = {
-  name: 'Nom',
-  reference: 'Référence',
-  prix: 'Prix',
-  typePiece: 'Catégorie',
-  product: 'Produit lié',
-  productIds: 'Produits liés',
-  constructeurIds: 'Fournisseurs',
-}
-
-const selectedTypeId = ref<string>('')
-const pieceTypeDetails = ref<any | null>(null)
-const editionForm = reactive({
-  name: '' as string,
-  description: '' as string,
-  reference: '' as string,
-  constructeurIds: [] as string[],
-  prix: '' as string,
-})
-const productSelections = ref<(string | null)[]>([])
-
-const customFieldInputs = ref<CustomFieldInput[]>([])
-const resolvedStructure = computed<PieceModelStructure | null>(() =>
-  pieceTypeDetails.value?.structure ?? selectedType.value?.structure ?? null,
-)
-
-const refreshCustomFieldInputs = (
-  structureOverride?: PieceModelStructure | null,
-  valuesOverride?: any[] | null,
-) => {
-  const structure = structureOverride ?? resolvedStructure.value ?? null
-  const values = valuesOverride ?? piece.value?.customFieldValues ?? null
-  customFieldInputs.value = buildCustomFieldInputs(structure, values)
-}
-const openPreview = (doc: any) => {
-  if (!doc || !canPreviewDocument(doc)) {
-    return
-  }
-  previewDocument.value = doc
-  previewVisible.value = true
-}
-const closePreview = () => {
-  previewVisible.value = false
-  previewDocument.value = null
-}
-const removeDocument = async (documentId: string | number | null | undefined) => {
-  if (!documentId) {
-    return
-  }
-  const result = await deleteDocument(documentId, { updateStore: false })
-  if (result.success) {
-    pieceDocuments.value = pieceDocuments.value.filter((doc) => doc.id !== documentId)
-  }
-}
-const handleFilesAdded = async (files: File[]) => {
-  if (!files?.length || !piece.value?.id) {
-    return
-  }
-  uploadingDocuments.value = true
-  try {
-    const result = await uploadDocuments(
-      {
-        files,
-        context: { pieceId: piece.value.id },
-      },
-      { updateStore: false },
-    )
-    if (result.success) {
-      selectedFiles.value = []
-      await refreshDocuments()
-    }
-  } finally {
-    uploadingDocuments.value = false
-  }
-}
-const refreshDocuments = async () => {
-  if (!piece.value?.id) {
-    pieceDocuments.value = []
-    return
-  }
-  loadingDocuments.value = true
-  try {
-    const result = await loadDocumentsByPiece(piece.value.id, { updateStore: false })
-    if (result.success) {
-      pieceDocuments.value = Array.isArray(result.data) ? result.data : result.data ? [result.data] : []
-    }
-  } finally {
-    loadingDocuments.value = false
-  }
-}
-
-const pieceTypeList = computed<PieceCatalogType[]>(() => (pieceTypes.value || []) as PieceCatalogType[])
-
-const selectedType = computed(() => {
-  if (!selectedTypeId.value) {
-    return null
-  }
-  return pieceTypeList.value.find((type) => type.id === selectedTypeId.value) ?? null
-})
-
-const getStructureProducts = (structure: PieceModelStructure | null) =>
-  Array.isArray(structure?.products) ? structure.products : []
-
-const structureProducts = computed(() =>
-  getStructureProducts(resolvedStructure.value),
-)
-
-const requiresProductSelection = computed(() => structureProducts.value.length > 0)
-
-const describeProductRequirement = (requirement: PieceModelProduct, index: number) => {
-  if (!requirement) {
-    return `Produit ${index + 1}`
-  }
-  const parts: string[] = []
-  if (requirement.role) {
-    parts.push(requirement.role)
-  }
-  if (requirement.typeProductLabel) {
-    parts.push(requirement.typeProductLabel)
-  } else if (requirement.typeProductId) {
-    parts.push(`Catégorie #${requirement.typeProductId}`)
-  }
-  if (requirement.familyCode) {
-    parts.push(`Famille ${requirement.familyCode}`)
-  }
-  if (parts.length === 0) {
-    parts.push(`Produit ${index + 1}`)
-  }
-  return parts.join(' • ')
-}
-
-const productRequirementDescriptions = computed(() =>
-  structureProducts.value.map((requirement, index) =>
-    describeProductRequirement(requirement, index),
-  ),
-)
-
-const ensureProductSelections = (count: number) => {
-  const next = Array.from({ length: count }, (_, index) => productSelections.value[index] ?? null)
-  productSelections.value = next
-}
-
-let pendingProductIds: string[] = []
-
-const productRequirementEntries = computed(() =>
-  structureProducts.value.map((requirement, index) => ({
-    index,
-    key: `piece-product-requirement-${index}-${requirement?.typeProductId || 'any'}`,
-    label: describeProductRequirement(requirement, index),
-    typeProductId: requirement?.typeProductId ? String(requirement.typeProductId) : null,
-  })),
-)
-
-const productSelectionsFilled = computed(() =>
-  !requiresProductSelection.value ||
-  productRequirementEntries.value.every((entry) => {
-    const value = productSelections.value[entry.index]
-    return typeof value === 'string' && value.trim().length > 0
-  }),
-)
-
-const setProductSelection = (index: number, value: string | null) => {
-  const normalized = typeof value === 'string' ? value : null
-  const next = [...productSelections.value]
-  next[index] = normalized
-  productSelections.value = next
-}
-
-watch(structureProducts, (products) => {
-  ensureProductSelections(products.length)
-  if (!pendingProductIds.length || products.length === 0) {
-    return
-  }
-  const next = Array.from(
-    { length: products.length },
-    (_, index) => pendingProductIds[index] ?? null,
-  )
-  productSelections.value = next
-  pendingProductIds = []
-})
-
-const requiredCustomFieldsFilled = computed(() =>
-  _requiredCustomFieldsFilled(customFieldInputs.value),
-)
-
-const canSubmit = computed(() =>
-  Boolean(
-    canEdit.value &&
-    piece.value &&
-    editionForm.name &&
-    requiredCustomFieldsFilled.value &&
-    productSelectionsFilled.value &&
-    !saving.value,
-  ),
-)
-
-const fetchPiece = async () => {
-  const id = route.params.id
-  if (!id || typeof id !== 'string') {
-    piece.value = null
-    pieceDocuments.value = []
-    return
-  }
-  const result = await get(`/pieces/${id}`)
-  if (result.success) {
-    piece.value = result.data
-    pieceDocuments.value = Array.isArray(result.data?.documents) ? result.data.documents : []
-
-    // Use customFieldValues from entity response (enriched with customField definitions via serialization groups)
-    const customValues = Array.isArray(result.data?.customFieldValues) ? result.data.customFieldValues : []
-    refreshCustomFieldInputs(undefined, customValues)
-
-    // Use cached type from loadPieceTypes() instead of separate getModelType() call
-    loadPieceTypeDetailsFromCache(result.data)
-
-    // History is non-blocking — template handles its own loading state
-    loadHistory(result.data.id).catch(() => {})
-  } else {
-    piece.value = null
-    pieceDocuments.value = []
-  }
-}
-
-const loadPieceTypeDetailsFromCache = (currentPiece: any) => {
-  const typeId = currentPiece?.typePieceId
-    || extractRelationId(currentPiece?.typePiece)
-    || ''
-  if (!typeId) {
-    pieceTypeDetails.value = null
-    return
-  }
-  // Look up in the already-loaded pieceTypes cache (from loadPieceTypes in onMounted)
-  const cachedType = (pieceTypes.value || []).find((t: any) => t.id === typeId) ?? null
-  if (cachedType) {
-    pieceTypeDetails.value = cachedType
-    refreshCustomFieldInputs((cachedType.structure as PieceModelStructure | null) ?? null, currentPiece?.customFieldValues ?? null)
-    return
-  }
-  // Fallback: fetch if not in cache (edge case)
-  getModelType(typeId).then((type) => {
-    if (type && typeof type === 'object') {
-      pieceTypeDetails.value = type
-      refreshCustomFieldInputs((type.structure as PieceModelStructure | null) ?? null, currentPiece?.customFieldValues ?? null)
-    }
-  }).catch(() => {
-    pieceTypeDetails.value = null
-  })
-}
-
-let initialized = false
-
-watch(
-  [piece, selectedType],
-  ([currentPiece, currentType]) => {
-    if (!currentPiece || initialized) {
-      return
-    }
-
-    const resolvedTypeId = currentPiece.typePieceId
-      || extractRelationId(currentPiece.typePiece)
-      || ''
-    if (resolvedTypeId && !currentPiece.typePieceId) {
-      currentPiece.typePieceId = resolvedTypeId
-    }
-    selectedTypeId.value = resolvedTypeId
-
-    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] : [],
-    )
-    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))
-      : currentPiece.product?.id || currentPiece.productId
-        ? [String(currentPiece.product?.id || currentPiece.productId)]
-        : []
-    pendingProductIds = existingProductIds
-    ensureProductSelections(structureProducts.value.length)
-    if (existingProductIds.length && structureProducts.value.length) {
-      const next = Array.from(
-        { length: structureProducts.value.length },
-        (_, index) => existingProductIds[index] ?? null,
-      )
-      productSelections.value = next
-      pendingProductIds = []
-    }
-
-    // After setting selectedTypeId, read selectedType.value (now updated) instead of
-    // the stale destructured currentType which was captured before the ID change.
-    const resolvedType = selectedType.value ?? pieceTypeDetails.value ?? null
-    refreshCustomFieldInputs(resolvedType?.structure ?? null, currentPiece.customFieldValues)
-
-    initialized = true
-  },
-  { immediate: true },
-)
-
-watch(selectedType, (currentType) => {
-  if (!piece.value || !currentType) {
-    return
-  }
-  refreshCustomFieldInputs(currentType.structure, piece.value.customFieldValues)
-})
-
-watch(resolvedStructure, (currentStructure) => {
-  if (!piece.value) {
-    return
-  }
-  ensureProductSelections(structureProducts.value.length)
-  refreshCustomFieldInputs(currentStructure, piece.value.customFieldValues)
-})
-
-const submitEdition = async () => {
-  if (!piece.value) {
-    return
-  }
-
-  if (!productSelectionsFilled.value) {
-    toast.showError('Sélectionnez un produit conforme au squelette.')
-    return
-  }
-
-  const rawPrice = typeof editionForm.prix === 'string'
-    ? editionForm.prix.trim()
-    : editionForm.prix === null || editionForm.prix === undefined
-      ? ''
-      : 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()
-  payload.reference = reference ? reference : null
-
-  const normalizedProductIds = productRequirementEntries.value
-    .map((entry) => productSelections.value[entry.index])
-    .filter((value): value is string => typeof value === 'string' && value.trim().length > 0)
-    .map((value) => value.trim())
-
-  payload.productIds = normalizedProductIds
-  payload.productId = normalizedProductIds[0] || null
-
-  if (rawPrice) {
-    const parsed = Number(rawPrice)
-    if (!Number.isNaN(parsed)) {
-      payload.prix = String(parsed)
-    }
-  } else {
-    payload.prix = null
-  }
-
-  saving.value = true
-  try {
-    const result = await updatePiece(piece.value.id, payload)
-    if (result.success && result.data) {
-      const updatedPiece = result.data as Record<string, any>
-      await _saveCustomFieldValues(
-        'piece',
-        updatedPiece.id,
-        [
-          updatedPiece?.typePiece?.pieceCustomFields,
-        ],
-        { customFieldInputs, upsertCustomFieldValue, updateCustomFieldValue, toast },
-      )
-      await router.push('/pieces-catalog')
-    }
-  } catch (error: any) {
-    toast.showError(error?.message || 'Erreur lors de la mise à jour de la pièce')
-  } finally {
-    saving.value = false
-  }
-}
-
-onMounted(async () => {
-  await Promise.allSettled([loadPieceTypes(), fetchPiece()])
-  loading.value = false
-})
+  historyLoading,
+  historyError,
+  openPreview,
+  closePreview,
+  removeDocument,
+  handleFilesAdded,
+  setProductSelection,
+  submitEdition,
+  formatPieceStructurePreview,
+} = usePieceEdit(String(route.params.id))
 </script>

app/pages/pieces/create.vue

@@ -224,8 +224,17 @@ import { useCustomFields } from '~/composables/useCustomFields'
 import { useDocuments } from '~/composables/useDocuments'
 import { formatPieceStructurePreview } from '~/shared/modelUtils'
 import { uniqueConstructeurIds } from '~/shared/constructeurUtils'
-import type { PieceModelProduct, PieceModelStructure } from '~/shared/types/inventory'
+import type { PieceModelStructure } from '~/shared/types/inventory'
 import type { ModelType } from '~/services/modelTypes'
+import {
+  getStructureProducts,
+  buildProductRequirementDescriptions,
+  buildProductRequirementEntries,
+  resizeProductSelections,
+  areProductSelectionsFilled,
+  applyProductSelection,
+  collectNormalizedProductIds,
+} from '~/shared/utils/pieceProductSelectionUtils'
 import {
   type CustomFieldInput,
   normalizeCustomFieldInputs,
@@ -303,70 +312,34 @@ const selectedType = computed(() => {
   return pieceTypeList.value.find((type) => type.id === selectedTypeId.value) ?? null
 })
 
-const getStructureProducts = (structure: PieceModelStructure | null) =>
-  Array.isArray(structure?.products) ? structure.products : []
-
 const structureProducts = computed(() =>
   getStructureProducts(selectedType.value?.structure ?? null),
 )
 
 const requiresProductSelection = computed(() => structureProducts.value.length > 0)
 
-const describeProductRequirement = (requirement: PieceModelProduct, index: number) => {
-  if (!requirement) {
-    return `Produit ${index + 1}`
-  }
-  const parts: string[] = []
-  if (requirement.role) {
-    parts.push(requirement.role)
-  }
-  if (requirement.typeProductLabel) {
-    parts.push(requirement.typeProductLabel)
-  } else if (requirement.typeProductId) {
-    parts.push(`Catégorie #${requirement.typeProductId}`)
-  }
-  if (requirement.familyCode) {
-    parts.push(`Famille ${requirement.familyCode}`)
-  }
-  if (parts.length === 0) {
-    parts.push(`Produit ${index + 1}`)
-  }
-  return parts.join(' • ')
-}
-
 const productRequirementDescriptions = computed(() =>
-  structureProducts.value.map((requirement, index) =>
-    describeProductRequirement(requirement, index),
-  ),
+  buildProductRequirementDescriptions(structureProducts.value),
 )
 
 const ensureProductSelections = (count: number) => {
-  const next = Array.from({ length: count }, (_, index) => productSelections.value[index] ?? null)
-  productSelections.value = next
+  productSelections.value = resizeProductSelections(productSelections.value, count)
 }
 
 const productRequirementEntries = computed(() =>
-  structureProducts.value.map((requirement, index) => ({
-    index,
-    key: `piece-create-product-requirement-${index}-${requirement?.typeProductId || 'any'}`,
-    label: describeProductRequirement(requirement, index),
-    typeProductId: requirement?.typeProductId ? String(requirement.typeProductId) : null,
-  })),
+  buildProductRequirementEntries(structureProducts.value, 'piece-create-product-requirement'),
 )
 
 const productSelectionsFilled = computed(() =>
-  !requiresProductSelection.value ||
-  productRequirementEntries.value.every((entry) => {
-    const value = productSelections.value[entry.index]
-    return typeof value === 'string' && value.trim().length > 0
-  }),
+  areProductSelectionsFilled(
+    requiresProductSelection.value,
+    productRequirementEntries.value,
+    productSelections.value,
+  ),
 )
 
 const setProductSelection = (index: number, value: string | null) => {
-  const normalized = typeof value === 'string' ? value : null
-  const next = [...productSelections.value]
-  next[index] = normalized
-  productSelections.value = next
+  productSelections.value = applyProductSelection(productSelections.value, index, value)
 }
 
 watch(structureProducts, (products) => {
@@ -440,10 +413,10 @@ const submitCreation = async () => {
 
   payload.constructeurIds = uniqueConstructeurIds(creationForm.constructeurIds)
 
-  const normalizedProductIds = productRequirementEntries.value
-    .map((entry) => productSelections.value[entry.index])
-    .filter((value): value is string => typeof value === 'string' && value.trim().length > 0)
-    .map((value) => value.trim())
+  const normalizedProductIds = collectNormalizedProductIds(
+    productRequirementEntries.value,
+    productSelections.value,
+  )
   if (normalizedProductIds.length) {
     payload.productIds = normalizedProductIds
     payload.productId = normalizedProductIds[0]

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

@@ -298,20 +298,12 @@ const canSubmit = computed(() =>
 
 const structurePreview = computed(() => formatProductStructurePreview(structure.value))
 
-
 const openPreview = (doc: any) => {
-  if (!doc || !canPreviewDocument(doc)) {
-    return
-  }
+  if (!doc || !canPreviewDocument(doc)) return
   previewDocument.value = doc
   previewVisible.value = true
 }
-
-const closePreview = () => {
-  previewVisible.value = false
-  previewDocument.value = null
-}
-
+const closePreview = () => { previewVisible.value = false; previewDocument.value = null }
 
 const loadProduct = async () => {
   const id = route.params.id

app/shared/utils/pieceProductSelectionUtils.ts

@@ -0,0 +1,104 @@
+import type { PieceModelProduct, PieceModelStructure } from '~/shared/types/inventory'
+
+/**
+ * Extract the products array from a piece model structure, defaulting to [].
+ */
+export const getStructureProducts = (structure: PieceModelStructure | null): PieceModelProduct[] =>
+  Array.isArray(structure?.products) ? structure.products : []
+
+/**
+ * Build a human-readable label for a single product requirement.
+ */
+export const describeProductRequirement = (requirement: PieceModelProduct, index: number): string => {
+  if (!requirement) {
+    return `Produit ${index + 1}`
+  }
+  const parts: string[] = []
+  if (requirement.role) {
+    parts.push(requirement.role)
+  }
+  if (requirement.typeProductLabel) {
+    parts.push(requirement.typeProductLabel)
+  } else if (requirement.typeProductId) {
+    parts.push(`Catégorie #${requirement.typeProductId}`)
+  }
+  if (requirement.familyCode) {
+    parts.push(`Famille ${requirement.familyCode}`)
+  }
+  if (parts.length === 0) {
+    parts.push(`Produit ${index + 1}`)
+  }
+  return parts.join(' • ')
+}
+
+/**
+ * Build description strings for every product requirement in a structure.
+ */
+export const buildProductRequirementDescriptions = (
+  products: PieceModelProduct[],
+): string[] =>
+  products.map((requirement, index) => describeProductRequirement(requirement, index))
+
+/**
+ * Build the entry objects used to render product selection inputs.
+ */
+export const buildProductRequirementEntries = (
+  products: PieceModelProduct[],
+  keyPrefix: string,
+) =>
+  products.map((requirement, index) => ({
+    index,
+    key: `${keyPrefix}-${index}-${requirement?.typeProductId || 'any'}`,
+    label: describeProductRequirement(requirement, index),
+    typeProductId: requirement?.typeProductId ? String(requirement.typeProductId) : null,
+  }))
+
+/**
+ * Resize the selections array to match the expected count, preserving existing values.
+ */
+export const resizeProductSelections = (
+  current: (string | null)[],
+  count: number,
+): (string | null)[] =>
+  Array.from({ length: count }, (_, index) => current[index] ?? null)
+
+/**
+ * Return true when all required product slots have a non-empty string value,
+ * or when no product selection is required.
+ */
+export const areProductSelectionsFilled = (
+  requiresSelection: boolean,
+  entries: { index: number }[],
+  selections: (string | null)[],
+): boolean =>
+  !requiresSelection ||
+  entries.every((entry) => {
+    const value = selections[entry.index]
+    return typeof value === 'string' && value.trim().length > 0
+  })
+
+/**
+ * Set a single product selection by index, returning a new array.
+ */
+export const applyProductSelection = (
+  current: (string | null)[],
+  index: number,
+  value: string | null,
+): (string | null)[] => {
+  const normalized = typeof value === 'string' ? value : null
+  const next = [...current]
+  next[index] = normalized
+  return next
+}
+
+/**
+ * Extract normalized product IDs from the current selections based on requirement entries.
+ */
+export const collectNormalizedProductIds = (
+  entries: { index: number }[],
+  selections: (string | null)[],
+): string[] =>
+  entries
+    .map((entry) => selections[entry.index])
+    .filter((value): value is string => typeof value === 'string' && value.trim().length > 0)
+    .map((value) => value.trim())

app/shared/utils/structureAssignmentHelpers.ts

@@ -0,0 +1,257 @@
+/**
+ * Pure helper functions for building, validating and serializing
+ * component structure assignment trees.
+ *
+ * Extracted from useComponentCreate composable to keep file sizes manageable.
+ */
+
+import type { StructureAssignmentNode } from '~/components/ComponentStructureAssignmentNode.vue'
+import type {
+  ComponentModelPiece,
+  ComponentModelProduct,
+  ComponentModelStructure,
+  ComponentModelStructureNode,
+} from '~/shared/types/inventory'
+
+// ---------------------------------------------------------------------------
+// Extraction helpers
+// ---------------------------------------------------------------------------
+
+export function extractSubcomponents(
+  definition: ComponentModelStructure | ComponentModelStructureNode | null | undefined,
+): ComponentModelStructureNode[] {
+  if (!definition || typeof definition !== 'object') {
+    return []
+  }
+  const raw = Array.isArray((definition as any).subcomponents)
+    ? (definition as any).subcomponents
+    : Array.isArray((definition as any).subComponents)
+      ? (definition as any).subComponents
+      : []
+  return raw.filter(
+    (item: unknown): item is ComponentModelStructureNode =>
+      !!item && typeof item === 'object',
+  )
+}
+
+export function extractPiecesFromNode(
+  definition: ComponentModelStructure | ComponentModelStructureNode | null | undefined,
+): ComponentModelPiece[] {
+  if (!definition || typeof definition !== 'object') {
+    return []
+  }
+  const raw = Array.isArray((definition as any).pieces)
+    ? (definition as any).pieces
+    : []
+  return raw.filter(
+    (item: unknown): item is ComponentModelPiece =>
+      !!item && typeof item === 'object',
+  )
+}
+
+export function extractProductsFromNode(
+  definition: ComponentModelStructure | ComponentModelStructureNode | null | undefined,
+): ComponentModelProduct[] {
+  if (!definition || typeof definition !== 'object') {
+    return []
+  }
+  const raw = Array.isArray((definition as any).products)
+    ? (definition as any).products
+    : []
+  return raw.filter(
+    (item: unknown): item is ComponentModelProduct =>
+      !!item && typeof item === 'object',
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Assignment tree building
+// ---------------------------------------------------------------------------
+
+export function buildAssignmentNode(
+  definition: ComponentModelStructureNode | ComponentModelStructure,
+  path: string,
+): StructureAssignmentNode {
+  const pieces = extractPiecesFromNode(definition).map((piece, index) => ({
+    path: `${path}:piece-${index}`,
+    definition: piece,
+    selectedPieceId: '',
+  }))
+
+  const products = extractProductsFromNode(definition).map((product, index) => ({
+    path: `${path}:product-${index}`,
+    definition: product,
+    selectedProductId: '',
+  }))
+
+  const subcomponents = extractSubcomponents(definition).map(
+    (child, index) => buildAssignmentNode(child, `${path}:sub-${index}`),
+  )
+
+  return {
+    path,
+    definition,
+    selectedComponentId: '',
+    pieces,
+    products,
+    subcomponents,
+  }
+}
+
+export function initializeStructureAssignments(
+  structure: ComponentModelStructure | null,
+): StructureAssignmentNode | null {
+  if (!structure || typeof structure !== 'object') {
+    return null
+  }
+  return buildAssignmentNode(structure, 'root')
+}
+
+// ---------------------------------------------------------------------------
+// Validation
+// ---------------------------------------------------------------------------
+
+export function hasAssignments(node: StructureAssignmentNode | null): boolean {
+  if (!node) {
+    return false
+  }
+  if (node.pieces.length > 0 || node.products.length > 0 || node.subcomponents.length > 0) {
+    return true
+  }
+  return node.subcomponents.some((child) => hasAssignments(child))
+}
+
+export function isAssignmentNodeComplete(
+  node: StructureAssignmentNode,
+  isRootNode = false,
+): boolean {
+  const piecesComplete = node.pieces.every(
+    (piece) => !!piece.selectedPieceId && piece.selectedPieceId.length > 0,
+  )
+  const productsComplete = node.products.every(
+    (product) => !!product.selectedProductId && product.selectedProductId.length > 0,
+  )
+  const subcomponentsComplete = node.subcomponents.every(
+    (child) =>
+      !!child.selectedComponentId
+      && child.selectedComponentId.length > 0
+      && isAssignmentNodeComplete(child, false),
+  )
+  return (
+    piecesComplete
+    && productsComplete
+    && subcomponentsComplete
+    && (isRootNode || !!node.selectedComponentId)
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Serialization
+// ---------------------------------------------------------------------------
+
+export function stripNullish(input: Record<string, any>) {
+  return Object.fromEntries(
+    Object.entries(input).filter(
+      ([, value]) => value !== null && value !== undefined && value !== '',
+    ),
+  )
+}
+
+export function sanitizeStructureDefinition(
+  definition: ComponentModelStructureNode,
+) {
+  return stripNullish({
+    alias: definition.alias ?? null,
+    typeComposantId: definition.typeComposantId ?? null,
+    typeComposantLabel: definition.typeComposantLabel ?? null,
+    modelId: definition.modelId ?? null,
+    familyCode: (definition as any).familyCode ?? null,
+  })
+}
+
+export function sanitizePieceDefinition(definition: ComponentModelPiece) {
+  return stripNullish({
+    role: (definition as any).role ?? null,
+    typePieceId: definition.typePieceId ?? null,
+    typePieceLabel: definition.typePieceLabel ?? null,
+    reference: definition.reference ?? null,
+    familyCode: (definition as any).familyCode ?? null,
+  })
+}
+
+export function sanitizeProductDefinition(definition: ComponentModelProduct) {
+  return stripNullish({
+    role: (definition as any).role ?? null,
+    typeProductId: definition.typeProductId ?? null,
+    typeProductLabel: (definition as any).typeProductLabel ?? null,
+    reference: (definition as any).reference ?? null,
+    familyCode: (definition as any).familyCode ?? null,
+  })
+}
+
+export function serializeStructureAssignments(
+  root: StructureAssignmentNode | null,
+) {
+  if (!root) {
+    return null
+  }
+
+  const serializeNode = (
+    assignment: StructureAssignmentNode,
+    isRootNode = false,
+  ): Record<string, any> => {
+    const serializedPieces = assignment.pieces
+      .filter((piece) => !!piece.selectedPieceId)
+      .map((piece) =>
+        stripNullish({
+          path: piece.path,
+          definition: sanitizePieceDefinition(piece.definition),
+          selectedPieceId: piece.selectedPieceId,
+        }),
+      )
+
+    const serializedProducts = assignment.products
+      .filter((product) => !!product.selectedProductId)
+      .map((product) =>
+        stripNullish({
+          path: product.path,
+          definition: sanitizeProductDefinition(product.definition),
+          selectedProductId: product.selectedProductId,
+        }),
+      )
+
+    const serializedSubcomponents = assignment.subcomponents
+      .map((child) => serializeNode(child, false))
+      .filter((child) => Object.keys(child).length > 0)
+
+    const base: Record<string, any> = {
+      path: assignment.path,
+      definition: sanitizeStructureDefinition(assignment.definition),
+    }
+
+    if (!isRootNode) {
+      base.selectedComponentId = assignment.selectedComponentId
+    }
+    if (serializedPieces.length) {
+      base.pieces = serializedPieces
+    }
+    if (serializedProducts.length) {
+      base.products = serializedProducts
+    }
+    if (serializedSubcomponents.length) {
+      base.subcomponents = serializedSubcomponents
+    }
+
+    return stripNullish(base)
+  }
+
+  const serializedRoot = serializeNode(root, true)
+  if (
+    (!serializedRoot.pieces || serializedRoot.pieces.length === 0)
+    && (!serializedRoot.products || serializedRoot.products.length === 0)
+    && (!serializedRoot.subcomponents || serializedRoot.subcomponents.length === 0)
+  ) {
+    return null
+  }
+  return serializedRoot
+}

app/shared/utils/structureSelectionUtils.ts

@@ -0,0 +1,107 @@
+export type SelectionEntry = {
+  id: string
+  path: string
+  requirementLabel: string
+  resolvedName: string
+}
+
+export type StructureSelectionResult = {
+  pieces: SelectionEntry[]
+  products: SelectionEntry[]
+  components: SelectionEntry[]
+}
+
+type CatalogMap = Map<string, { name?: string, [key: string]: any }>
+
+type LabelResolvers = {
+  resolvePieceLabel: (definition: Record<string, any>) => string
+  resolveProductLabel: (definition: Record<string, any>) => string
+  resolveSubcomponentLabel: (definition: Record<string, any>) => string
+}
+
+const isNonEmptyString = (value: unknown): value is string =>
+  typeof value === 'string' && value.trim().length > 0
+
+export function collectStructureSelections(
+  root: any,
+  catalogs: {
+    pieceCatalogMap: CatalogMap
+    productCatalogMap: CatalogMap
+    componentCatalogMap: CatalogMap
+  },
+  resolvers: LabelResolvers,
+): StructureSelectionResult {
+  const piecesSelected: SelectionEntry[] = []
+  const productsSelected: SelectionEntry[] = []
+  const componentsSelected: SelectionEntry[] = []
+
+  if (!root || typeof root !== 'object') {
+    return { pieces: piecesSelected, products: productsSelected, components: componentsSelected }
+  }
+
+  const visitNode = (node: any, fallbackPath = 'racine') => {
+    if (!node || typeof node !== 'object') {
+      return
+    }
+
+    const nodePath = isNonEmptyString(node.path) ? node.path : fallbackPath
+
+    const nodePieces = Array.isArray(node.pieces) ? node.pieces : []
+    nodePieces.forEach((entry: any, index: number) => {
+      const selectedId = entry?.selectedPieceId
+      if (!isNonEmptyString(selectedId)) {
+        return
+      }
+      const definition = entry?.definition ?? entry
+      const catalogPiece = catalogs.pieceCatalogMap.get(selectedId)
+      piecesSelected.push({
+        id: selectedId,
+        path: isNonEmptyString(entry?.path) ? entry.path : `${nodePath}:piece-${index + 1}`,
+        requirementLabel: resolvers.resolvePieceLabel(definition),
+        resolvedName: catalogPiece?.name || selectedId,
+      })
+    })
+
+    const nodeProducts = Array.isArray(node.products) ? node.products : []
+    nodeProducts.forEach((entry: any, index: number) => {
+      const selectedId = entry?.selectedProductId
+      if (!isNonEmptyString(selectedId)) {
+        return
+      }
+      const definition = entry?.definition ?? entry
+      const catalogProduct = catalogs.productCatalogMap.get(selectedId)
+      productsSelected.push({
+        id: selectedId,
+        path: isNonEmptyString(entry?.path) ? entry.path : `${nodePath}:product-${index + 1}`,
+        requirementLabel: resolvers.resolveProductLabel(definition),
+        resolvedName: catalogProduct?.name || selectedId,
+      })
+    })
+
+    const nodeChildren = Array.isArray(node.subcomponents)
+      ? node.subcomponents
+      : Array.isArray(node.subComponents)
+        ? node.subComponents
+        : []
+
+    nodeChildren.forEach((child: any, index: number) => {
+      const selectedId = child?.selectedComponentId
+      if (isNonEmptyString(selectedId)) {
+        const definition = child?.definition ?? child
+        const catalogComponent = catalogs.componentCatalogMap.get(selectedId)
+        componentsSelected.push({
+          id: selectedId,
+          path: isNonEmptyString(child?.path) ? child.path : `${nodePath}:subcomponent-${index + 1}`,
+          requirementLabel: resolvers.resolveSubcomponentLabel(definition),
+          resolvedName: catalogComponent?.name || selectedId,
+        })
+      }
+
+      visitNode(child, isNonEmptyString(child?.path) ? child.path : `${nodePath}:subcomponent-${index + 1}`)
+    })
+  }
+
+  visitNode(root, isNonEmptyString(root?.path) ? root.path : 'racine')
+
+  return { pieces: piecesSelected, products: productsSelected, components: componentsSelected }
+}

nuxt.config.ts

@@ -18,6 +18,11 @@ const appVersion = process.env.NUXT_PUBLIC_APP_VERSION || getAppVersion()
 
 export default defineNuxtConfig({
   compatibilityDate: '2025-07-15',
+  components: {
+    dirs: [
+      { path: '~/components', pathPrefix: false },
+    ],
+  },
   ssr: false, // Désactive le SSR pour un mode SPA pur (Client-Side Rendering uniquement)
   devtools: { enabled: true },
   devServer: {

tests/composables/useEntityTypes.test.ts

@@ -153,7 +153,7 @@ describe('loadTypes', () => {
     expect(result.error).toBe('Network error')
     expect(types.value).toEqual([])
     expect(mockShowError).toHaveBeenCalledWith(
-      expect.stringContaining('Network error'),
+      'Impossible de charger les types de composant.',
     )
   })