fix(slots) : check API response before updating local state on slot selection

The save functions (savePieceSlotSelection, saveProductSlotSelection,
saveSubcomponentSlotSelection) were not checking result.success before
updating local state and showing success toast. Since useApi.patch()
never throws, the catch block was dead code and errors were silently
ignored while the UI showed success.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

app/app.vue

@@ -1,15 +1,20 @@
 <template>
-  <div class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
-    <LayoutAppNavbar
+  <div class="min-h-screen flex flex-col bg-base-200/40">
+    <!-- Subtle dot pattern background -->
+    <div class="fixed inset-0 -z-10 bg-[radial-gradient(oklch(85%_0.02_260)_1px,transparent_1px)] bg-[size:24px_24px] opacity-40" />
+
+    <AppNavbar
       @open-settings="displaySettingsOpen = true"
       @logout="handleLogout"
     />
 
-    <NuxtPage />
+    <main class="flex-1">
+      <NuxtPage :transition="{ name: 'page', mode: 'out-in' }" />
+    </main>
 
     <ToastContainer />
 
-    <CommonConfirmModal />
+    <ConfirmModal />
 
     <DisplaySettings
       :is-open="displaySettingsOpen"
@@ -17,11 +22,17 @@
       @update-settings="handleSettingsUpdate"
     />
 
-    <footer class="footer p-4 bg-neutral text-neutral-content">
-      <div class="items-center grid-flow-col">
-        <p>
-          @Malio 2025 · <NuxtLink to="/changelog" class="link link-hover">v{{ appVersion }}</NuxtLink>
+    <footer class="border-t border-base-300/50 bg-base-100/60 backdrop-blur-sm">
+      <div class="container mx-auto flex items-center justify-between px-6 py-3">
+        <p class="text-xs text-base-content/40 font-medium tracking-wide">
+          &copy; Malio {{ new Date().getFullYear() }}
         </p>
+        <NuxtLink
+          to="/changelog"
+          class="text-xs text-base-content/40 hover:text-primary transition-colors font-medium"
+        >
+          v{{ appVersion }}
+        </NuxtLink>
       </div>
     </footer>
   </div>

app/assets/app.css

@@ -1,55 +1,136 @@
+/* ─── Fonts ─── */
+@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap');
+
 @import "tailwindcss";
 @plugin "daisyui";
+
+/* ─── Theme ─── */
 @plugin "daisyui/theme" {
   name: "mytheme";
-  default: true; /* set as default */
-  prefersdark: false; /* set as default dark mode (prefers-color-scheme:dark) */
-  color-scheme: light; /* color of browser-provided UI */
+  default: true;
+  prefersdark: false;
+  color-scheme: light;
 
-  /* #FBFAFA — gris clair */
-  --color-base-100: oklch(98% 0.003 0);
-  --color-base-200: oklch(94% 0.01 262);
-  --color-base-300: oklch(90% 0.02 262);
-  --color-base-content: oklch(20% 0.03 262);
-  /* #304998 — bleu Malio */
-  --color-primary: oklch(37% 0.15 262);
+  /* Surfaces — warm gray with a hint of blue */
+  --color-base-100: oklch(98.5% 0.004 260);
+  --color-base-200: oklch(95% 0.008 260);
+  --color-base-300: oklch(91% 0.015 260);
+  --color-base-content: oklch(22% 0.025 260);
+
+  /* Primary — Malio blue, slightly richer */
+  --color-primary: oklch(40% 0.16 262);
   --color-primary-content: oklch(98% 0.005 262);
-  /* #A5ACD0 — lavande */
-  --color-secondary: oklch(75% 0.055 270);
-  --color-secondary-content: oklch(20% 0.03 270);
-  /* #ED8521 — orange */
-  --color-accent: oklch(71% 0.17 58);
-  --color-accent-content: oklch(98% 0.005 58);
-  /* neutral dérivé du bleu Malio */
-  --color-neutral: oklch(37% 0.08 262);
-  --color-neutral-content: oklch(98% 0.005 262);
-  --color-info: oklch(55% 0.12 262);
-  --color-info-content: oklch(98% 0.005 262);
-  --color-success: oklch(65% 0.2 145);
-  --color-success-content: oklch(98% 0.005 145);
+
+  /* Secondary — refined lavender */
+  --color-secondary: oklch(72% 0.06 275);
+  --color-secondary-content: oklch(22% 0.03 275);
+
+  /* Accent — warm amber-orange */
+  --color-accent: oklch(72% 0.17 55);
+  --color-accent-content: oklch(20% 0.04 55);
+
+  /* Neutral — deep slate */
+  --color-neutral: oklch(28% 0.04 260);
+  --color-neutral-content: oklch(95% 0.005 260);
+
+  /* Semantic */
+  --color-info: oklch(58% 0.14 255);
+  --color-info-content: oklch(98% 0.005 255);
+  --color-success: oklch(62% 0.19 150);
+  --color-success-content: oklch(98% 0.005 150);
   --color-warning: oklch(78% 0.15 70);
-  --color-warning-content: oklch(20% 0.05 70);
-  --color-error: oklch(60% 0.25 25);
+  --color-warning-content: oklch(22% 0.05 70);
+  --color-error: oklch(58% 0.22 25);
   --color-error-content: oklch(98% 0.005 25);
 
-  /* border radius */
-  --radius-selector: 1rem;
-  --radius-field: 0.25rem;
-  --radius-box: 0.5rem;
+  /* Geometry */
+  --radius-selector: 0.75rem;
+  --radius-field: 0.375rem;
+  --radius-box: 0.625rem;
 
-  /* base sizes */
   --size-selector: 0.25rem;
   --size-field: 0.25rem;
 
-  /* border size */
   --border: 1px;
-
-  /* effects */
   --depth: 1;
   --noise: 0;
 }
 
-/* Styles pour l'accessibilité et les paramètres d'affichage */
+@plugin "daisyui/theme" {
+  name: "mytheme-dark";
+  default: false;
+  prefersdark: true;
+  color-scheme: dark;
+
+  /* Surfaces — dark blue-gray */
+  --color-base-100: oklch(22% 0.015 260);
+  --color-base-200: oklch(18% 0.012 260);
+  --color-base-300: oklch(28% 0.018 260);
+  --color-base-content: oklch(92% 0.005 260);
+
+  /* Primary — Malio blue, brighter for dark */
+  --color-primary: oklch(55% 0.18 262);
+  --color-primary-content: oklch(98% 0.005 262);
+
+  /* Secondary — refined lavender */
+  --color-secondary: oklch(72% 0.06 275);
+  --color-secondary-content: oklch(22% 0.03 275);
+
+  /* Accent — warm amber-orange */
+  --color-accent: oklch(72% 0.17 55);
+  --color-accent-content: oklch(20% 0.04 55);
+
+  /* Neutral — lighter slate for dark mode */
+  --color-neutral: oklch(75% 0.02 260);
+  --color-neutral-content: oklch(18% 0.01 260);
+
+  /* Semantic */
+  --color-info: oklch(62% 0.14 255);
+  --color-info-content: oklch(98% 0.005 255);
+  --color-success: oklch(65% 0.19 150);
+  --color-success-content: oklch(98% 0.005 150);
+  --color-warning: oklch(78% 0.15 70);
+  --color-warning-content: oklch(22% 0.05 70);
+  --color-error: oklch(62% 0.22 25);
+  --color-error-content: oklch(98% 0.005 25);
+
+  /* Geometry — same as light */
+  --radius-selector: 0.75rem;
+  --radius-field: 0.375rem;
+  --radius-box: 0.625rem;
+
+  --size-selector: 0.25rem;
+  --size-field: 0.25rem;
+
+  --border: 1px;
+  --depth: 1;
+  --noise: 0;
+}
+
+/* ─── Typography ─── */
+:root {
+  --font-heading: 'Outfit', system-ui, sans-serif;
+  --font-body: 'DM Sans', system-ui, sans-serif;
+}
+
+body {
+  font-family: var(--font-body);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  letter-spacing: -0.01em;
+}
+
+h1, h2, h3, h4, h5, h6,
+.card-title,
+.stat-value,
+.text-2xl,
+.text-3xl,
+.text-4xl {
+  font-family: var(--font-heading);
+  letter-spacing: -0.025em;
+}
+
+/* ─── Density variables ─── */
 :root {
   --spacing-xs: 0.5rem;
   --spacing-sm: 0.75rem;
@@ -58,7 +139,6 @@
   --spacing-xl: 2rem;
 }
 
-/* Densité compacte */
 .density-compact {
   --spacing-xs: 0.25rem;
   --spacing-sm: 0.5rem;
@@ -67,7 +147,6 @@
   --spacing-xl: 1.25rem;
 }
 
-/* Densité confortable (défaut) */
 .density-comfortable {
   --spacing-xs: 0.5rem;
   --spacing-sm: 0.75rem;
@@ -76,7 +155,6 @@
   --spacing-xl: 2rem;
 }
 
-/* Densité espacée */
 .density-spacious {
   --spacing-xs: 0.75rem;
   --spacing-sm: 1rem;
@@ -85,251 +163,200 @@
   --spacing-xl: 3rem;
 }
 
-/* Contraste élevé avec DaisyUI */
-.contrast-high .btn {
-  @apply border-2;
-}
+/* ─── High contrast mode ─── */
+.contrast-high .btn { @apply border-2; }
+.contrast-high .input { @apply border-2; }
+.contrast-high .select { @apply border-2; }
+.contrast-high .textarea { @apply border-2; }
+.contrast-high .modal-box { @apply border-2 border-base-content; }
 
-.contrast-high .input {
-  @apply border-2;
-}
-
-.contrast-high .select {
-  @apply border-2;
-}
-
-.contrast-high .textarea {
-  @apply border-2;
-}
-
-.contrast-high .modal-box {
-  @apply border-2 border-base-content;
-}
-
-/* Amélioration de l'accessibilité */
+/* ─── Accessibility ─── */
 @media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
+  *, *::before, *::after {
     animation-duration: 0.01ms !important;
     animation-iteration-count: 1 !important;
     transition-duration: 0.01ms !important;
   }
 }
 
-/* Focus visible pour l'accessibilité */
 *:focus-visible {
-  outline: 2px solid #304998;
+  outline: 2px solid oklch(40% 0.16 262);
   outline-offset: 2px;
 }
 
-/* Styles pour les boutons de paramètres */
+/* ─── Cards ─── */
+.card {
+  border: 1px solid oklch(91% 0.015 260 / 0.6);
+  transition: box-shadow 0.2s ease, transform 0.2s ease;
+}
+
+.site-card {
+  background-color: oklch(100% 0 0);
+}
+
+[data-theme="mytheme-dark"] .site-card {
+  background-color: oklch(24% 0.015 260);
+}
+
+[data-theme="mytheme-dark"] .card {
+  border-color: oklch(30% 0.02 260 / 0.6);
+}
+
+.card:hover {
+  box-shadow:
+    0 4px 6px -1px oklch(22% 0.025 260 / 0.06),
+    0 2px 4px -2px oklch(22% 0.025 260 / 0.04);
+}
+
+/* ─── Navbar glass effect ─── */
+.navbar-glass {
+  background: oklch(98.5% 0.004 260 / 0.82);
+  backdrop-filter: blur(12px) saturate(1.5);
+  -webkit-backdrop-filter: blur(12px) saturate(1.5);
+  border-bottom: 1px solid oklch(91% 0.015 260 / 0.5);
+}
+
+[data-theme="mytheme-dark"] .navbar-glass {
+  background: oklch(22% 0.015 260 / 0.85);
+  border-bottom-color: oklch(30% 0.02 260 / 0.5);
+}
+
+/* ─── Buttons ─── */
+.btn {
+  font-family: var(--font-heading);
+  font-weight: 500;
+  letter-spacing: -0.01em;
+  transition: all 0.15s ease;
+}
+
 .btn-circle {
   transition: all 0.2s ease-in-out;
 }
-
 .btn-circle:hover {
   transform: scale(1.05);
 }
-
 .btn-circle:active {
   transform: scale(0.95);
 }
 
-/* Animation pour le modal */
+/* ─── Inputs ─── */
+.input, .select, .textarea {
+  font-family: var(--font-body);
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.input:focus, .select:focus, .textarea:focus {
+  box-shadow: 0 0 0 3px oklch(40% 0.16 262 / 0.1);
+}
+
+/* ─── Tables ─── */
+.table thead th {
+  font-family: var(--font-heading);
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  text-transform: uppercase;
+  font-size: 0.7rem;
+  color: oklch(45% 0.03 260);
+}
+
+.table tbody tr {
+  transition: background-color 0.1s ease;
+}
+
+/* ─── Badges ─── */
+.badge {
+  font-family: var(--font-heading);
+  font-weight: 500;
+  letter-spacing: 0;
+}
+
+/* ─── Stats ─── */
+.stat-title {
+  font-family: var(--font-body);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-size: 0.7rem;
+  font-weight: 500;
+  opacity: 0.6;
+}
+
+.stat-value {
+  font-weight: 700;
+}
+
+/* ─── Modals ─── */
 .modal {
-  transition: opacity 0.3s ease-in-out;
-  font-size: 100% !important; /* Force la taille normale pour le modal */
-  transform: none !important; /* Empêche les transformations */
-  scale: 1 !important; /* Force l'échelle à 1 */
+  transition: opacity 0.25s ease;
 }
 
-.modal.modal-open {
-  animation: modalFadeIn 0.3s ease-in-out;
-}
-
-/* S'assurer que le contenu du modal garde une taille normale */
 .modal-box {
-  font-size: 100% !important;
-  transform: none !important;
-  scale: 1 !important;
-  width: auto !important;
-  max-width: 500px !important;
+  font-family: var(--font-body);
+  border-radius: 0.75rem;
+  border: 1px solid oklch(91% 0.015 260 / 0.5);
 }
 
-.modal .form-control {
-  font-size: 100% !important;
-  transform: none !important;
+@keyframes modalSlideUp {
+  from { opacity: 0; transform: translateY(0.5rem); }
+  to { opacity: 1; transform: translateY(0); }
 }
 
-.modal .btn {
-  font-size: 100% !important;
-  transform: none !important;
-  padding: 0.5rem 1rem !important;
-  height: auto !important;
-  min-height: 2.5rem !important;
+.modal.modal-open .modal-box {
+  animation: modalSlideUp 0.25s ease-out;
 }
 
-.modal .input {
-  font-size: 100% !important;
-  transform: none !important;
-  height: auto !important;
-  min-height: 2.5rem !important;
+/* ─── Page transitions ─── */
+.page-enter-active {
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+.page-leave-active {
+  transition: opacity 0.15s ease;
+}
+.page-enter-from {
+  opacity: 0;
+  transform: translateY(4px);
+}
+.page-leave-to {
+  opacity: 0;
 }
 
-.modal .select {
-  font-size: 100% !important;
-  transform: none !important;
-  height: auto !important;
-  min-height: 2.5rem !important;
+/* ─── Scrollbar styling ─── */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: oklch(75% 0.02 260);
+  border-radius: 3px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: oklch(60% 0.03 260);
 }
 
-.modal .textarea {
-  font-size: 100% !important;
-  transform: none !important;
-  min-height: 4rem !important;
-}
+/* ─── Readability ─── */
+.text-sm { line-height: 1.5; }
+.text-xs { line-height: 1.4; }
 
-.modal .range {
-  font-size: 100% !important;
-  transform: none !important;
-  height: auto !important;
-  min-height: 1.5rem !important;
-}
+/* ─── Adaptive spacing ─── */
+.p-1 { padding: var(--spacing-xs); }
+.p-2 { padding: var(--spacing-sm); }
+.p-3 { padding: var(--spacing-md); }
+.p-4 { padding: var(--spacing-lg); }
+.p-5 { padding: var(--spacing-xl); }
 
-.modal .label {
-  font-size: 100% !important;
-  transform: none !important;
-}
+.m-1 { margin: var(--spacing-xs); }
+.m-2 { margin: var(--spacing-sm); }
+.m-3 { margin: var(--spacing-md); }
+.m-4 { margin: var(--spacing-lg); }
+.m-5 { margin: var(--spacing-xl); }
 
-.modal .label-text {
-  font-size: 100% !important;
-  transform: none !important;
-}
-
-.modal .label-text-alt {
-  font-size: 100% !important;
-  transform: none !important;
-}
-
-.modal .checkbox {
-  font-size: 100% !important;
-  transform: none !important;
-  width: 1rem !important;
-  height: 1rem !important;
-}
-
-.modal .text-xs {
-  font-size: 0.75rem !important;
-  transform: none !important;
-}
-
-.modal .text-sm {
-  font-size: 0.875rem !important;
-  transform: none !important;
-}
-
-.modal .text-lg {
-  font-size: 1.125rem !important;
-  transform: none !important;
-}
-
-.modal .font-bold {
-  font-weight: 700 !important;
-  transform: none !important;
-}
-
-.modal .font-medium {
-  font-weight: 500 !important;
-  transform: none !important;
-}
-
-/* Empêcher les héritages de taille */
-.modal * {
-  font-size: inherit !important;
-  transform: none !important;
-  scale: 1 !important;
-}
-
-@keyframes modalFadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-/* Styles pour les contrôles de zoom */
-.range {
-  transition: all 0.2s ease-in-out;
-}
-
-.range::-webkit-slider-thumb {
-  transition: all 0.2s ease-in-out;
-}
-
-.range::-webkit-slider-thumb:hover {
-  transform: scale(1.1);
-}
-
-/* Amélioration de la lisibilité */
-.text-sm {
-  line-height: 1.5;
-}
-
-.text-xs {
-  line-height: 1.4;
-}
-
-/* Espacement adaptatif */
-.p-1 {
-  padding: var(--spacing-xs);
-}
-.p-2 {
-  padding: var(--spacing-sm);
-}
-.p-3 {
-  padding: var(--spacing-md);
-}
-.p-4 {
-  padding: var(--spacing-lg);
-}
-.p-5 {
-  padding: var(--spacing-xl);
-}
-
-.m-1 {
-  margin: var(--spacing-xs);
-}
-.m-2 {
-  margin: var(--spacing-sm);
-}
-.m-3 {
-  margin: var(--spacing-md);
-}
-.m-4 {
-  margin: var(--spacing-lg);
-}
-.m-5 {
-  margin: var(--spacing-xl);
-}
-
-.gap-1 {
-  gap: var(--spacing-xs);
-}
-.gap-2 {
-  gap: var(--spacing-sm);
-}
-.gap-3 {
-  gap: var(--spacing-md);
-}
-.gap-4 {
-  gap: var(--spacing-lg);
-}
-.gap-5 {
-  gap: var(--spacing-xl);
-}
+.gap-1 { gap: var(--spacing-xs); }
+.gap-2 { gap: var(--spacing-sm); }
+.gap-3 { gap: var(--spacing-md); }
+.gap-4 { gap: var(--spacing-lg); }
+.gap-5 { gap: var(--spacing-xl); }
 
 @layer components {
   .form-control .label {
@@ -337,7 +364,6 @@
     padding-bottom: 0;
     margin-right: 15px;
   }
-
   .form-control .label + * {
     margin-top: var(--spacing-xs);
   }

app/components/ComponentHierarchy.vue

@@ -5,11 +5,13 @@
       <ComponentItem
         :component="component"
         :is-edit-mode="isEditMode"
+        :show-delete="showDelete"
         :collapse-all="collapseAll"
         :toggle-token="toggleToken"
         @update="$emit('update', $event)"
         @edit-piece="$emit('edit-piece', $event)"
         @custom-field-update="$emit('custom-field-update', $event)"
+        @delete="$emit('delete')"
       />
     </div>
   </div>
@@ -27,6 +29,10 @@ defineProps({
     type: Boolean,
     default: false
   },
+  showDelete: {
+    type: Boolean,
+    default: false
+  },
   collapseAll: {
     type: Boolean,
     default: true
@@ -37,5 +43,5 @@ defineProps({
   }
 })
 
-defineEmits(['update', 'edit-piece', 'custom-field-update'])
+defineEmits(['update', 'edit-piece', 'custom-field-update', 'delete'])
 </script>

app/components/ComponentItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="space-y-4">
+  <div>
     <DocumentPreviewModal
       :document="previewDocument"
       :visible="previewVisible"
@@ -8,297 +8,193 @@
     />
 
     <!-- Component Header -->
-    <div class="flex items-start justify-between p-4 bg-base-200 rounded-lg">
-      <div class="flex items-start gap-3 w-full">
-        <button
-          type="button"
-          class="btn btn-ghost btn-sm btn-circle shrink-0 transition-transform"
-          :class="{ 'rotate-90': !isCollapsed }"
-          :aria-expanded="!isCollapsed"
-          :title="isCollapsed ? 'Déplier les détails du composant' : 'Replier les détails du composant'"
-          @click="toggleCollapse"
-        >
-          <IconLucideChevronRight class="w-5 h-5 transition-transform" aria-hidden="true" />
-          <span class="sr-only">{{ isCollapsed ? 'Déplier' : 'Replier' }} le composant</span>
-        </button>
-        <div class="flex-1">
-          <h3 class="text-lg font-semibold">
+    <div class="flex items-center gap-3 p-3 bg-base-200 rounded-lg cursor-pointer" @click="toggleCollapse">
+      <IconLucideChevronRight
+        class="w-4 h-4 shrink-0 transition-transform text-base-content/50"
+        :class="{ 'rotate-90': !isCollapsed }"
+        aria-hidden="true"
+      />
+      <div class="flex-1 min-w-0">
+        <div class="flex items-center gap-2 flex-wrap">
+          <h3 class="text-sm font-semibold text-base-content truncate">
             {{ component.name }}
           </h3>
-          <div class="flex flex-wrap gap-2 mt-2">
-            <span v-if="component.reference" class="badge badge-outline badge-sm">{{ component.reference }}</span>
-            <template v-if="componentConstructeursDisplay.length">
-              <span
-                v-for="constructeur in componentConstructeursDisplay"
-                :key="constructeur.id"
-                class="badge badge-outline badge-sm"
-              >
-                {{ constructeur.name }}
-              </span>
-            </template>
-            <span v-if="component.prix" class="badge badge-primary badge-sm">{{ component.prix }}€</span>
-            <span
-              v-if="displayProductName"
-              class="badge badge-info badge-sm"
-            >
-              Produit&nbsp;: {{ displayProductName }}
-            </span>
-          </div>
+          <span v-if="component.reference" class="badge badge-outline badge-xs">{{ component.reference }}</span>
+          <span v-if="component.prix" class="badge badge-primary badge-xs">{{ component.prix }}€</span>
+        </div>
+        <div v-if="componentConstructeursDisplay.length || displayProductName" class="flex flex-wrap gap-1.5 mt-1">
+          <span
+            v-for="constructeur in componentConstructeursDisplay"
+            :key="constructeur.id"
+            class="text-xs text-base-content/50"
+          >
+            {{ constructeur.name }}
+          </span>
+          <span v-if="displayProductName" class="badge badge-info badge-xs">
+            {{ displayProductName }}
+          </span>
         </div>
       </div>
+      <button
+        v-if="showDelete"
+        type="button"
+        class="btn btn-ghost btn-xs text-error shrink-0"
+        title="Supprimer ce composant"
+        @click.stop="$emit('delete')"
+      >
+        Supprimer
+      </button>
     </div>
 
-    <div v-show="!isCollapsed" class="space-y-4">
-      <!-- Component Info Display - Editable or Read-only -->
-      <div class="p-4 bg-base-100 border border-gray-200 rounded-lg">
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
-          <div class="form-control">
-            <label class="label"><span class="label-text font-medium">Nom</span></label>
-            <input
-              v-if="isEditMode"
-              v-model="component.name"
-              type="text"
-              class="input input-bordered input-sm"
-              @blur="updateComponent"
-            >
-            <div v-else class="input input-bordered input-sm bg-base-200">
-              {{ component.name }}
-            </div>
-          </div>
-          <div class="form-control">
-            <label class="label"><span class="label-text font-medium">Référence</span></label>
-            <input
-              v-if="isEditMode"
-              v-model="component.reference"
-              type="text"
-              class="input input-bordered input-sm"
-              @blur="updateComponent"
-            >
-            <div v-else class="input input-bordered input-sm bg-base-200">
-              {{ component.reference || 'Non définie' }}
-            </div>
-          </div>
-          <div class="form-control">
-            <label class="label"><span class="label-text font-medium">Prix</span></label>
-            <input
-              v-if="isEditMode"
-              v-model="component.prix"
-              type="number"
-              step="0.01"
-              class="input input-bordered input-sm"
-              @blur="updateComponent"
-            >
-            <div v-else class="input input-bordered input-sm bg-base-200">
-              {{ component.prix ? `${component.prix}€` : 'Non défini' }}
-            </div>
-          </div>
-          <div class="form-control">
-            <label class="label"><span class="label-text font-medium">Fournisseur</span></label>
-            <ConstructeurSelect
-              v-if="isEditMode"
-              class="w-full"
-              :model-value="componentConstructeurIds"
-              :initial-options="componentConstructeursDisplay"
-              @update:model-value="handleConstructeurChange"
-            />
-            <div v-else class="input input-bordered input-sm bg-base-200">
-              <div v-if="componentConstructeursDisplay.length" class="space-y-1">
-                <div
-                  v-for="constructeur in componentConstructeursDisplay"
-                  :key="constructeur.id"
-                  class="flex flex-col"
-                >
-                  <span class="font-medium">{{ constructeur.name }}</span>
-                  <span
-                    v-if="formatConstructeurContact(constructeur)"
-                    class="text-xs text-gray-500"
-                  >
-                    {{ formatConstructeurContact(constructeur) }}
-                  </span>
-                </div>
-              </div>
-              <span v-else class="font-medium">Non défini</span>
-            </div>
-          </div>
-          <div class="form-control md:col-span-2">
-            <label class="label">
-              <span class="label-text font-medium">Produit catalogue</span>
-            </label>
-            <div class="input input-bordered input-sm bg-base-200 min-h-[2.75rem] flex flex-col justify-center space-y-1">
-              <template v-if="displayProduct">
-                <span class="font-semibold text-base-content">
-                  {{ displayProductName || 'Produit catalogue' }}
-                </span>
-                <span
-                  v-for="info in productInfoRows"
-                  :key="info.label"
-                  class="text-xs text-base-content/70"
-                >
-                  {{ info.label }} : {{ info.value }}
-                </span>
-                <NuxtLink
-                  v-if="component.product?.id"
-                  :to="`/product/${component.product.id}/edit`"
-                  class="link link-primary text-xs"
-                >
-                  Ouvrir la fiche produit
-                </NuxtLink>
-              </template>
-              <span v-else class="font-medium">Non défini</span>
-            </div>
-            <div
-              v-if="productDocuments.length"
-              class="mt-2 space-y-2 rounded-md border border-base-200 bg-base-100 p-3 text-xs"
-            >
-              <h4 class="font-medium text-base-content">
-                Documents du produit
-              </h4>
-              <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-12 w-10"
-                  >
-                    <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-6 w-6"
-                      :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>
-          </div>
+    <!-- Expanded content -->
+    <div v-show="!isCollapsed" class="mt-3 space-y-4 pl-7">
+      <!-- Info fields -->
+      <div v-if="isEditMode" class="grid grid-cols-1 md:grid-cols-2 gap-3">
+        <div class="form-control">
+          <label class="label py-1"><span class="label-text text-xs font-medium text-base-content/60">Nom</span></label>
+          <input v-model="component.name" type="text" class="input input-bordered input-sm" @blur="updateComponent">
+        </div>
+        <div class="form-control">
+          <label class="label py-1"><span class="label-text text-xs font-medium text-base-content/60">Référence</span></label>
+          <input v-model="component.reference" type="text" class="input input-bordered input-sm" @blur="updateComponent">
+        </div>
+        <div class="form-control">
+          <label class="label py-1"><span class="label-text text-xs font-medium text-base-content/60">Prix</span></label>
+          <input v-model="component.prix" type="number" step="0.01" class="input input-bordered input-sm" @blur="updateComponent">
+        </div>
+        <div class="form-control">
+          <label class="label py-1"><span class="label-text text-xs font-medium text-base-content/60">Fournisseur</span></label>
+          <ConstructeurSelect
+            class="w-full"
+            :model-value="componentConstructeurIds"
+            :initial-options="componentConstructeursDisplay"
+            @update:model-value="handleConstructeurChange"
+          />
         </div>
-
       </div>
 
-      <!-- Custom Fields Display - Editable or Read-only -->
-      <div v-if="displayedCustomFields.length" class="mt-4 pt-4 border-t border-gray-200">
-        <h4 class="font-semibold text-sm text-gray-700 mb-3">
-          Champs personnalisés
-        </h4>
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <div
-            v-for="(field, index) in displayedCustomFields"
-            :key="resolveFieldKey(field, index)"
-            class="form-control"
+      <!-- Read-only info -->
+      <div v-else class="grid grid-cols-2 md:grid-cols-4 gap-x-6 gap-y-3 text-sm">
+        <div>
+          <p class="text-xs text-base-content/40 mb-0.5">Nom</p>
+          <p class="text-base-content">{{ component.name }}</p>
+        </div>
+        <div>
+          <p class="text-xs text-base-content/40 mb-0.5">Référence</p>
+          <p class="text-base-content">{{ component.reference || '—' }}</p>
+        </div>
+        <div>
+          <p class="text-xs text-base-content/40 mb-0.5">Prix</p>
+          <p class="text-base-content">{{ component.prix ? `${component.prix} €` : '—' }}</p>
+        </div>
+        <div>
+          <p class="text-xs text-base-content/40 mb-0.5">Fournisseur</p>
+          <div v-if="componentConstructeursDisplay.length">
+            <p
+              v-for="constructeur in componentConstructeursDisplay"
+              :key="constructeur.id"
+              class="text-base-content"
+            >
+              {{ constructeur.name }}
+              <span v-if="formatConstructeurContact(constructeur)" class="text-xs text-base-content/50 block">
+                {{ formatConstructeurContact(constructeur) }}
+              </span>
+            </p>
+          </div>
+          <p v-else class="text-base-content">—</p>
+        </div>
+      </div>
+
+      <!-- Product -->
+      <div v-if="displayProduct" class="rounded-lg border border-base-200 bg-base-100 p-3">
+        <div class="flex items-start justify-between gap-3">
+          <div class="space-y-1">
+            <p class="text-xs text-base-content/40">Produit catalogue</p>
+            <p class="text-sm font-semibold text-base-content">{{ displayProductName }}</p>
+            <p
+              v-for="info in productInfoRows"
+              :key="info.label"
+              class="text-xs text-base-content/60"
+            >
+              {{ info.label }} : {{ info.value }}
+            </p>
+          </div>
+          <NuxtLink
+            v-if="component.product?.id"
+            :to="`/product/${component.product.id}/edit`"
+            class="btn btn-ghost btn-xs shrink-0"
           >
-            <label class="label">
-              <span class="label-text text-sm">{{ resolveFieldName(field) }}</span>
-              <span v-if="resolveFieldRequired(field)" class="label-text-alt text-error">*</span>
-            </label>
-            <template v-if="isEditMode && !resolveFieldReadOnly(field)">
-              <input
-                v-if="resolveFieldType(field) === 'text'"
-                v-model="field.value"
-                type="text"
-                class="input input-bordered input-sm"
-                :required="resolveFieldRequired(field)"
-                @blur="updateComponentCustomField(field)"
-              >
-              <input
-                v-else-if="resolveFieldType(field) === 'number'"
-                v-model="field.value"
-                type="number"
-                class="input input-bordered input-sm"
-                :required="resolveFieldRequired(field)"
-                @blur="updateComponentCustomField(field)"
-              >
-              <select
-                v-else-if="resolveFieldType(field) === 'select'"
-                v-model="field.value"
-                class="select select-bordered select-sm"
-                :required="resolveFieldRequired(field)"
-                @change="updateComponentCustomField(field)"
-              >
-                <option value="">
-                  Sélectionner...
-                </option>
-                <option v-for="option in resolveFieldOptions(field)" :key="option" :value="option">
-                  {{ option }}
-                </option>
-              </select>
-              <div v-else-if="resolveFieldType(field) === 'boolean'" class="flex items-center gap-2">
-                <input
-                  v-model="field.value"
-                  type="checkbox"
-                  class="checkbox checkbox-sm"
-                  true-value="true"
-                  false-value="false"
-                  @change="updateComponentCustomField(field)"
+            Voir le produit
+          </NuxtLink>
+        </div>
+        <!-- Product documents -->
+        <div v-if="productDocuments.length" class="mt-3 pt-3 border-t border-base-200 space-y-2">
+          <p class="text-xs font-medium text-base-content/50">Documents du produit</p>
+          <div
+            v-for="document in productDocuments"
+            :key="document.id || document.path || document.name"
+            class="flex items-center justify-between gap-3 text-xs"
+          >
+            <div class="flex items-center gap-2 min-w-0">
+              <div class="flex-shrink-0 overflow-hidden rounded border border-base-200 bg-base-200/70 flex items-center justify-center h-8 w-7">
+                <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}`"
                 >
-                <span class="text-sm">{{ String(field.value).toLowerCase() === 'true' ? 'Oui' : 'Non' }}</span>
+                <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-4 w-4"
+                  :class="documentIcon(document).colorClass"
+                  aria-hidden="true"
+                />
               </div>
-              <input
-                v-else-if="resolveFieldType(field) === 'date'"
-                v-model="field.value"
-                type="date"
-                class="input input-bordered input-sm"
-                :required="resolveFieldRequired(field)"
-                @blur="updateComponentCustomField(field)"
+              <span class="truncate text-base-content">{{ document.name }}</span>
+            </div>
+            <div class="flex items-center gap-1 shrink-0">
+              <button
+                type="button"
+                class="btn btn-ghost btn-xs"
+                :disabled="!canPreviewDocument(document)"
+                @click="openPreview(document)"
               >
-            </template>
-            <template v-else>
-              <div class="input input-bordered input-sm bg-base-200">
-                {{ formatFieldDisplayValue(field) }}
-              </div>
-            </template>
+                Consulter
+              </button>
+              <button type="button" class="btn btn-ghost btn-xs" @click="downloadDocument(document)">
+                Télécharger
+              </button>
+            </div>
           </div>
         </div>
       </div>
 
-      <div class="mt-4 pt-4 border-t border-gray-200 space-y-3">
+      <!-- Custom Fields -->
+      <CustomFieldDisplay
+        :fields="displayedCustomFields"
+        :is-edit-mode="isEditMode"
+        :columns="2"
+        @field-blur="updateComponentCustomField"
+      />
+
+      <!-- Documents -->
+      <div class="space-y-2">
         <div class="flex items-center justify-between">
-          <h4 class="font-semibold text-sm text-gray-700">
-            Documents
-          </h4>
-          <span v-if="isEditMode && selectedFiles.length" class="badge badge-outline">
-            {{ selectedFiles.length }} fichier{{ selectedFiles.length > 1 ? 's' : '' }} sélectionné{{ selectedFiles.length > 1 ? 's' : '' }}
+          <p class="text-xs font-semibold text-base-content/50 uppercase tracking-wide">Documents</p>
+          <span v-if="isEditMode && selectedFiles.length" class="badge badge-outline badge-xs">
+            {{ selectedFiles.length }} fichier{{ selectedFiles.length > 1 ? 's' : '' }}
           </span>
         </div>
 
-        <p v-if="loadingDocuments" class="text-xs text-gray-500">
-          Chargement des documents...
+        <p v-if="loadingDocuments" class="text-xs text-base-content/50">
+          Chargement...
         </p>
 
         <DocumentUpload
@@ -309,84 +205,24 @@
           @files-added="handleFilesAdded"
         />
 
-        <div v-if="componentDocuments.length" class="space-y-2">
-        <div
-          v-for="document in componentDocuments"
-          :key="document.id"
-          class="flex items-center justify-between rounded border border-base-200 bg-base-100 px-3 py-2"
-        >
-          <div class="flex items-center gap-3 text-sm">
-            <div
-              class="flex-shrink-0 overflow-hidden rounded-md border border-base-200 bg-base-200/70 flex items-center justify-center"
-              :class="documentThumbnailClass(document)"
-            >
-              <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-6 w-6"
-                :class="documentIcon(document).colorClass"
-                  aria-hidden="true"
-                />
-              </div>
-              <div>
-                <div class="font-medium">
-                  {{ document.name }}
-                </div>
-                <div class="text-xs text-gray-500">
-                  {{ document.mimeType || 'Inconnu' }} • {{ formatSize(document.size) }}
-                </div>
-              </div>
-            </div>
-            <div class="flex items-center gap-2">
-              <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>
-              <button
-                v-if="isEditMode"
-                type="button"
-                class="btn btn-error btn-xs"
-                :disabled="uploadingDocuments"
-                @click="removeDocument(document.id)"
-              >
-                Supprimer
-              </button>
-            </div>
-          </div>
-        </div>
-        <p v-else-if="!loadingDocuments" class="text-xs text-gray-500">
-          Aucun document lié à ce composant.
-        </p>
+        <DocumentListInline
+          :documents="componentDocuments"
+          :can-delete="isEditMode"
+          :delete-disabled="uploadingDocuments"
+          empty-text="Aucun document lié à ce composant."
+          @preview="openPreview"
+          @delete="removeDocument"
+        />
       </div>
 
-      <!-- Component Pieces -->
-      <div v-if="component.pieces && component.pieces.length > 0" class="space-y-2">
-        <h4 class="font-semibold text-gray-700">
+      <!-- Component Pieces (real MachinePieceLinks) -->
+      <div v-if="linkedPieces.length > 0" class="space-y-2">
+        <p class="text-xs font-semibold text-base-content/50 uppercase tracking-wide">
           Pièces du composant
-        </h4>
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
+        </p>
+        <div class="space-y-2">
           <PieceItem
-            v-for="piece in component.pieces"
+            v-for="piece in linkedPieces"
             :key="piece.id"
             :piece="piece"
             :is-edit-mode="isEditMode"
@@ -397,12 +233,27 @@
         </div>
       </div>
 
+      <!-- Structure pieces (read-only, from composant definition) -->
+      <div v-if="structurePieces.length > 0" class="space-y-2">
+        <p class="text-xs font-semibold text-base-content/50 uppercase tracking-wide">
+          Pièces incluses par défaut
+        </p>
+        <div class="space-y-2">
+          <PieceItem
+            v-for="piece in structurePieces"
+            :key="piece.id"
+            :piece="piece"
+            :is-edit-mode="false"
+          />
+        </div>
+      </div>
+
       <!-- Sub Components -->
-      <div v-if="childComponents.length > 0" class="space-y-3">
-        <h4 class="font-semibold text-gray-700">
+      <div v-if="childComponents.length > 0" class="space-y-2">
+        <p class="text-xs font-semibold text-base-content/50 uppercase tracking-wide">
           Sous-composants
-        </h4>
-        <div class="space-y-3 pl-4 border-l-2 border-gray-200">
+        </p>
+        <div class="space-y-2 pl-4 border-l-2 border-base-200">
           <ComponentItem
             v-for="subComponent in childComponents"
             :key="subComponent.id"
@@ -438,19 +289,9 @@ import {
   formatSize,
   shouldInlinePdf,
   documentPreviewSrc,
-  documentThumbnailClass,
   documentIcon,
   downloadDocument,
 } from '~/shared/utils/documentDisplayUtils'
-import {
-  resolveFieldKey,
-  resolveFieldName,
-  resolveFieldType,
-  resolveFieldOptions,
-  resolveFieldRequired,
-  resolveFieldReadOnly,
-  formatFieldDisplayValue,
-} from '~/shared/utils/entityCustomFieldLogic'
 import { useEntityDocuments } from '~/composables/useEntityDocuments'
 import { useEntityProductDisplay } from '~/composables/useEntityProductDisplay'
 import { useEntityCustomFields } from '~/composables/useEntityCustomFields'
@@ -458,11 +299,12 @@ import { useEntityCustomFields } from '~/composables/useEntityCustomFields'
 const props = defineProps({
   component: { type: Object, required: true },
   isEditMode: { type: Boolean, default: false },
+  showDelete: { type: Boolean, default: false },
   collapseAll: { type: Boolean, default: true },
   toggleToken: { type: Number, default: 0 },
 })
 
-const emit = defineEmits(['update', 'edit-piece', 'custom-field-update'])
+const emit = defineEmits(['update', 'edit-piece', 'custom-field-update', 'delete'])
 
 // --- Shared composables ---
 const {
@@ -514,6 +356,14 @@ const childComponents = computed(() => {
   return Array.isArray(list) ? list : []
 })
 
+// --- Pieces split: real links vs structure definitions ---
+const allPieces = computed(() => {
+  const list = props.component.pieces
+  return Array.isArray(list) ? list : []
+})
+const linkedPieces = computed(() => allPieces.value.filter((p) => !p._structurePiece))
+const structurePieces = computed(() => allPieces.value.filter((p) => p._structurePiece))
+
 // --- Constructeurs ---
 const { constructeurs } = useConstructeurs()
 

app/components/ComponentModelStructureEditor.vue

@@ -10,7 +10,6 @@
       :locked-type-label="displayedRootTypeLabel"
       :allow-subcomponents="allowSubcomponents"
       :max-subcomponent-depth="maxSubcomponentDepth"
-      :restricted-mode="restrictedMode"
       is-root
     />
   </div>
@@ -56,10 +55,6 @@ const props = defineProps({
     type: Number,
     default: Infinity,
   },
-  restrictedMode: {
-    type: Boolean,
-    default: false,
-  },
 })
 
 const emit = defineEmits(['update:modelValue'])

app/components/ComponentStructureAssignmentNode.vue

@@ -134,76 +134,24 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue';
+import { computed } from 'vue';
 import SearchSelect from '~/components/common/SearchSelect.vue';
-import { useApi } from '~/composables/useApi';
-import { extractCollection } from '~/shared/utils/apiHelpers';
+import { useStructureAssignmentFetch } from '~/composables/useStructureAssignmentFetch';
 import type {
-  ComponentModelPiece,
-  ComponentModelProduct,
-  ComponentModelStructureNode,
-} from '~/shared/types/inventory';
+  ComponentOption,
+  PieceOption,
+  ProductOption,
+} from '~/composables/useStructureAssignmentFetch';
 
-interface ComponentOption {
-  id: string;
-  name?: string | null;
-  reference?: string | null;
-  typeComposantId?: string | null;
-  typeComposant?: {
-    id: string;
-    name?: string | null;
-    code?: string | null;
-  } | null;
-}
-
-interface PieceOption {
-  id: string;
-  name?: string | null;
-  reference?: string | null;
-  typePieceId?: string | null;
-  typePiece?: {
-    id: string;
-    name?: string | null;
-    code?: string | null;
-  } | null;
-}
-
-interface ProductOption {
-  id: string;
-  name?: string | null;
-  reference?: string | null;
-  typeProductId?: string | null;
-  typeProduct?: {
-    id: string;
-    name?: string | null;
-    code?: string | null;
-  } | null;
-}
-
-export interface StructurePieceAssignment {
-  path: string;
-  definition: ComponentModelPiece;
-  selectedPieceId: string;
-}
-
-export interface StructureProductAssignment {
-  path: string;
-  definition: ComponentModelProduct;
-  selectedProductId: string;
-}
-
-export interface StructureAssignmentNode {
-  path: string;
-  definition: ComponentModelStructureNode;
-  selectedComponentId: string;
-  pieces: StructurePieceAssignment[];
-  products: StructureProductAssignment[];
-  subcomponents: StructureAssignmentNode[];
-}
+export type {
+  StructureAssignmentNode,
+  StructurePieceAssignment,
+  StructureProductAssignment,
+} from '~/composables/useStructureAssignmentFetch';
 
 const props = withDefaults(
   defineProps<{
-    assignment: StructureAssignmentNode;
+    assignment: import('~/composables/useStructureAssignmentFetch').StructureAssignmentNode;
     pieces: PieceOption[] | null;
     products: ProductOption[] | null;
     components: ComponentOption[] | null;
@@ -236,331 +184,46 @@ const wrapperClass = computed(() =>
   depth.value === 0 ? 'space-y-6' : 'space-y-6 border-l border-base-300 pl-4',
 );
 
-const { get } = useApi();
-const pieceOptionsByPath = ref<Record<string, PieceOption[]>>({});
-const productOptionsByPath = ref<Record<string, ProductOption[]>>({});
-const componentOptionsByPath = ref<Record<string, ComponentOption[]>>({});
-const pieceLoadingByPath = ref<Record<string, boolean>>({});
-const productLoadingByPath = ref<Record<string, boolean>>({});
-const componentLoadingByPath = ref<Record<string, boolean>>({});
-
-const setLoading = (target: Record<string, boolean>, key: string, value: boolean) => {
-  target[key] = value;
-};
-
-const componentOptions = computed(() => {
-  if (isRoot.value) {
-    return [];
-  }
-  const cached = componentOptionsByPath.value[props.assignment.path];
-  if (cached) {
-    return cached;
-  }
-  const definition = props.assignment.definition || {};
-  const requiredTypeId =
-    definition.typeComposantId || definition.modelId || null;
-  const requiredFamilyCode = definition.familyCode || null;
-
-  return (props.components || []).filter((component) => {
-    if (!component || typeof component !== 'object') {
-      return false;
-    }
-    if (requiredTypeId) {
-      return component.typeComposantId === requiredTypeId;
-    }
-    if (requiredFamilyCode) {
-      return (
-        component.typeComposant?.code === requiredFamilyCode ||
-        component.typeComposantId === requiredFamilyCode
-      );
-    }
-    return true;
-  });
+const {
+  pieceLoadingByPath,
+  productLoadingByPath,
+  componentLoadingByPath,
+  componentOptions,
+  componentOptionLabel,
+  componentOptionDescription,
+  fetchComponentOptions,
+  getPieceOptions,
+  pieceOptionLabel,
+  pieceOptionDescription,
+  fetchPieceOptions,
+  describePieceRequirement,
+  getProductOptions,
+  productOptionLabel,
+  productOptionDescription,
+  fetchProductOptions,
+  describeProductRequirement,
+} = useStructureAssignmentFetch({
+  assignment: props.assignment,
+  pieces: props.pieces,
+  products: props.products,
+  components: props.components,
+  isRoot: () => isRoot.value,
+  pieceTypeLabelMap: props.pieceTypeLabelMap ?? {},
+  productTypeLabelMap: props.productTypeLabelMap ?? {},
+  componentTypeLabelMap: props.componentTypeLabelMap ?? {},
 });
 
-const componentOptionLabel = (component?: ComponentOption | null) => {
-  if (!component) {
-    return 'Composant sans nom';
-  }
-  return component.name || 'Composant sans nom';
-};
-
-const componentOptionDescription = (component?: ComponentOption | null) => {
-  if (!component) {
+const normalizeSelectionValue = (value: unknown) => {
+  if (value === null || value === undefined || value === '') {
     return '';
   }
-  const parts: string[] = [];
-  const typeLabel =
-    component.typeComposant?.name || component.typeComposant?.code || null;
-  if (typeLabel) {
-    parts.push(typeLabel);
+  if (typeof value === 'string') {
+    return value;
   }
-  if (component.reference) {
-    parts.push(`Ref. ${component.reference}`);
+  if (typeof value === 'number') {
+    return String(value);
   }
-  return parts.join(' • ');
-};
-
-const typeIri = (id: string) => `/api/model_types/${id}`;
-const primedPiecePaths = new Set<string>();
-const primedProductPaths = new Set<string>();
-const primedComponentPaths = new Set<string>();
-
-const fetchComponentOptions = async (term = '') => {
-  if (isRoot.value) {
-    return;
-  }
-  const key = props.assignment.path;
-  if (componentLoadingByPath.value[key]) {
-    return;
-  }
-
-  const definition = props.assignment.definition || {};
-  const requiredTypeId =
-    definition.typeComposantId || definition.modelId || definition.typeComposant?.id || null;
-
-  const params = new URLSearchParams();
-  params.set('itemsPerPage', '50');
-  if (term.trim()) {
-    params.set('name', term.trim());
-  }
-  if (requiredTypeId) {
-    params.set('typeComposant', typeIri(requiredTypeId));
-  }
-
-  setLoading(componentLoadingByPath.value, key, true);
-  try {
-    const result = await get(`/composants?${params.toString()}`);
-    if (result.success) {
-      componentOptionsByPath.value[key] = extractCollection(result.data);
-    }
-  } finally {
-    setLoading(componentLoadingByPath.value, key, false);
-  }
-};
-
-const fetchPieceOptions = async (assignment: StructurePieceAssignment, term = '') => {
-  const key = assignment.path;
-  if (pieceLoadingByPath.value[key]) {
-    return;
-  }
-
-  const definition = assignment.definition || {};
-  const requiredTypeId =
-    definition.typePieceId || definition.typePiece?.id || null;
-
-  const params = new URLSearchParams();
-  params.set('itemsPerPage', '50');
-  if (term.trim()) {
-    params.set('name', term.trim());
-  }
-  if (requiredTypeId) {
-    params.set('typePiece', typeIri(requiredTypeId));
-  }
-
-  setLoading(pieceLoadingByPath.value, key, true);
-  try {
-    const result = await get(`/pieces?${params.toString()}`);
-    if (result.success) {
-      pieceOptionsByPath.value[key] = extractCollection(result.data);
-    }
-  } finally {
-    setLoading(pieceLoadingByPath.value, key, false);
-  }
-};
-
-const fetchProductOptions = async (assignment: StructureProductAssignment, term = '') => {
-  const key = assignment.path;
-  if (productLoadingByPath.value[key]) {
-    return;
-  }
-
-  const definition = assignment.definition || {};
-  const requiredTypeId =
-    definition.typeProductId || definition.typeProduct?.id || null;
-
-  const params = new URLSearchParams();
-  params.set('itemsPerPage', '50');
-  if (term.trim()) {
-    params.set('name', term.trim());
-  }
-  if (requiredTypeId) {
-    params.set('typeProduct', typeIri(requiredTypeId));
-  }
-
-  setLoading(productLoadingByPath.value, key, true);
-  try {
-    const result = await get(`/products?${params.toString()}`);
-    if (result.success) {
-      productOptionsByPath.value[key] = extractCollection(result.data);
-    }
-  } finally {
-    setLoading(productLoadingByPath.value, key, false);
-  }
-};
-
-watch(
-  componentOptions,
-  (options) => {
-    if (isRoot.value) {
-      return;
-    }
-    const hasMatch = options.some(
-      (component) => component.id === props.assignment.selectedComponentId,
-    );
-    if (!hasMatch) {
-      props.assignment.selectedComponentId = '';
-    }
-  },
-  { immediate: true },
-);
-
-const describePieceRequirement = (assignment: StructurePieceAssignment) => {
-  const definition = assignment.definition;
-  const parts: string[] = [];
-  const addPart = (value?: string | null) => {
-    const trimmed = typeof value === 'string' ? value.trim() : '';
-    if (trimmed && !parts.includes(trimmed)) {
-      parts.push(trimmed);
-    }
-  };
-
-  const options = getPieceOptions(assignment);
-  const fallbackPiece = options[0] || null;
-  const fallbackType = fallbackPiece?.typePiece || null;
-
-  addPart(definition.role);
-  const explicitLabel =
-    definition.typePieceLabel ||
-    definition.typePiece?.name ||
-    (definition.typePieceId ? props.pieceTypeLabelMap[definition.typePieceId] : null) ||
-    fallbackType?.name;
-  addPart(explicitLabel);
-
-  const family =
-    definition.familyCode ||
-    definition.typePiece?.code ||
-    fallbackType?.code ||
-    null;
-  if (family) {
-    addPart(`Famille ${family}`);
-  }
-
-  if (parts.length === 0) {
-    addPart(fallbackType?.name);
-    if (fallbackType?.code) {
-      addPart(`Famille ${fallbackType.code}`);
-    }
-  }
-
-  if (parts.length === 0 && definition.typePieceId) {
-    addPart(`#${definition.typePieceId}`);
-  }
-
-  return parts.length ? parts.join(' • ') : 'Pièce du squelette';
-};
-
-const getProductOptions = (assignment: StructureProductAssignment) => {
-  const cached = productOptionsByPath.value[assignment.path];
-  if (cached) {
-    return cached;
-  }
-  const definition = assignment.definition;
-  const requiredTypeId =
-    definition.typeProductId ||
-    definition.typeProduct?.id ||
-    definition.familyCode ||
-    null;
-
-  return (props.products || []).filter((product) => {
-    if (!product || typeof product !== 'object') {
-      return false;
-    }
-    if (!requiredTypeId) {
-      return true;
-    }
-    if (definition.typeProductId || definition.typeProduct?.id) {
-      return (
-        product.typeProductId === requiredTypeId ||
-        product.typeProduct?.id === requiredTypeId
-      );
-    }
-    if (definition.familyCode) {
-      return (
-        product.typeProduct?.code === requiredTypeId ||
-        product.typeProductId === requiredTypeId
-      );
-    }
-    return false;
-  });
-};
-
-const productOptionLabel = (product?: ProductOption | null) => {
-  if (!product) {
-    return 'Produit';
-  }
-  return product.name || product.reference || 'Produit';
-};
-
-const productOptionDescription = (product?: ProductOption | null) => {
-  if (!product) {
-    return '';
-  }
-  const parts: string[] = [];
-  const typeLabel =
-    product.typeProduct?.name || product.typeProduct?.code || null;
-  if (typeLabel) {
-    parts.push(typeLabel);
-  }
-  if (product.reference) {
-    parts.push(`Ref. ${product.reference}`);
-  }
-  return parts.join(' • ');
-};
-
-const describeProductRequirement = (assignment: StructureProductAssignment) => {
-  const definition = assignment.definition;
-  const parts: string[] = [];
-  const addPart = (value?: string | null) => {
-    const trimmed = typeof value === 'string' ? value.trim() : '';
-    if (trimmed && !parts.includes(trimmed)) {
-      parts.push(trimmed);
-    }
-  };
-
-  const options = getProductOptions(assignment);
-  const fallbackProduct = options[0] || null;
-  const fallbackType = fallbackProduct?.typeProduct || null;
-
-  addPart(definition.role);
-  const explicitLabel =
-    definition.typeProductLabel ||
-    definition.typeProduct?.name ||
-    (definition.typeProductId ? props.productTypeLabelMap[definition.typeProductId] : null) ||
-    fallbackType?.name;
-  addPart(explicitLabel);
-
-  const family =
-    definition.familyCode ||
-    definition.typeProduct?.code ||
-    fallbackType?.code ||
-    null;
-  if (family) {
-    addPart(`Famille ${family}`);
-  }
-
-  if (parts.length === 0) {
-    addPart(fallbackType?.name);
-    if (fallbackType?.code) {
-      addPart(`Famille ${fallbackType.code}`);
-    }
-  }
-
-  if (parts.length === 0 && definition.typeProductId) {
-    addPart(`#${definition.typeProductId}`);
-  }
-
-  return parts.length ? parts.join(' • ') : 'Produit du squelette';
+  return '';
 };
 
 const requirementLabel = computed(() => {
@@ -584,139 +247,13 @@ const requirementLabel = computed(() => {
 const requirementDescription = computed(() => {
   const definition = props.assignment.definition || {};
   const family =
-    definition.typeComposantLabel ||
-    (definition.typeComposantId ? props.componentTypeLabelMap[definition.typeComposantId] : null) ||
-    definition.typeComposant?.name ||
-    definition.familyCode;
+    definition.typeComposantLabel
+    || (definition.typeComposantId ? props.componentTypeLabelMap[definition.typeComposantId] : null)
+    || definition.typeComposant?.name
+    || definition.familyCode;
   if (family) {
     return `Doit appartenir à la famille "${family}".`;
   }
   return 'Sélectionnez un composant enfant conforme à cette position.';
 });
-
-const getPieceOptions = (assignment: StructurePieceAssignment) => {
-  const cached = pieceOptionsByPath.value[assignment.path];
-  if (cached) {
-    return cached;
-  }
-  const definition = assignment.definition;
-  const requiredTypeId =
-    definition.typePieceId ||
-    definition.typePiece?.id ||
-    definition.familyCode ||
-    null;
-
-  return (props.pieces || []).filter((piece) => {
-    if (!piece || typeof piece !== 'object') {
-      return false;
-    }
-    if (!requiredTypeId) {
-      return true;
-    }
-    if (definition.typePieceId || definition.typePiece?.id) {
-      return (
-        piece.typePieceId === requiredTypeId ||
-        piece.typePiece?.id === requiredTypeId
-      );
-    }
-    if (definition.familyCode) {
-      return (
-        piece.typePiece?.code === requiredTypeId ||
-        piece.typePieceId === requiredTypeId
-      );
-    }
-    return false;
-  });
-};
-
-const pieceOptionLabel = (piece?: PieceOption | null) => {
-  if (!piece) {
-    return 'Pièce';
-  }
-  return piece.name || 'Pièce';
-};
-
-const pieceOptionDescription = (piece?: PieceOption | null) => {
-  if (!piece) {
-    return '';
-  }
-  const parts: string[] = [];
-  const typeLabel =
-    piece.typePiece?.name || piece.typePiece?.code || null;
-  if (typeLabel) {
-    parts.push(typeLabel);
-  }
-  if (piece.reference) {
-    parts.push(`Ref. ${piece.reference}`);
-  }
-  return parts.join(' • ');
-};
-
-const normalizeSelectionValue = (value: unknown) => {
-  if (value === null || value === undefined || value === '') {
-    return '';
-  }
-  if (typeof value === 'string') {
-    return value;
-  }
-  if (typeof value === 'number') {
-    return String(value);
-  }
-  return '';
-};
-
-watch(
-  () => [props.pieces, props.assignment.pieces],
-  () => {
-    for (const pieceAssignment of props.assignment.pieces) {
-      const options = getPieceOptions(pieceAssignment);
-      if (
-        pieceAssignment.selectedPieceId &&
-        !options.some((piece) => piece.id === pieceAssignment.selectedPieceId)
-      ) {
-        pieceAssignment.selectedPieceId = '';
-      }
-      if (!primedPiecePaths.has(pieceAssignment.path) && !pieceOptionsByPath.value[pieceAssignment.path]) {
-        primedPiecePaths.add(pieceAssignment.path);
-        fetchPieceOptions(pieceAssignment).catch(() => {});
-      }
-    }
-  },
-  { deep: true, immediate: true },
-);
-
-watch(
-  () => [props.products, props.assignment.products],
-  () => {
-    for (const productAssignment of props.assignment.products) {
-      const options = getProductOptions(productAssignment);
-      if (
-        productAssignment.selectedProductId &&
-        !options.some((product) => product.id === productAssignment.selectedProductId)
-      ) {
-        productAssignment.selectedProductId = '';
-      }
-      if (!primedProductPaths.has(productAssignment.path) && !productOptionsByPath.value[productAssignment.path]) {
-        primedProductPaths.add(productAssignment.path);
-        fetchProductOptions(productAssignment).catch(() => {});
-      }
-    }
-  },
-  { deep: true, immediate: true },
-);
-
-watch(
-  () => props.assignment.definition,
-  () => {
-    if (isRoot.value) {
-      return;
-    }
-    const key = props.assignment.path;
-    if (!primedComponentPaths.has(key) && !componentOptionsByPath.value[key]) {
-      primedComponentPaths.add(key);
-      fetchComponentOptions().catch(() => {});
-    }
-  },
-  { immediate: true },
-);
 </script>

app/components/ComposantSelect.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="space-y-1">
+    <SearchSelect
+      :model-value="modelValue ?? undefined"
+      :options="composantOptions"
+      :loading="loading"
+      :placeholder="placeholder"
+      :empty-text="emptyText"
+      size="sm"
+      option-value="id"
+      option-label="name"
+      :disabled="disabled"
+      @update:modelValue="updateValue"
+    >
+      <template #option-description="{ option }">
+        <span class="text-xs text-base-content/60">
+          {{ formatDescription(option) }}
+        </span>
+      </template>
+    </SearchSelect>
+    <p v-if="helperText" class="text-xs text-base-content/60">
+      {{ helperText }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, watch } from 'vue'
+import SearchSelect from '~/components/common/SearchSelect.vue'
+import { useComposants } from '~/composables/useComposants'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string | null
+    placeholder?: string
+    emptyText?: string
+    helperText?: string
+    disabled?: boolean
+    typeComposantId?: string | null
+  }>(),
+  {
+    modelValue: '',
+    placeholder: 'Sélectionner un composant…',
+    emptyText: 'Aucun composant disponible',
+    helperText: '',
+    disabled: false,
+    typeComposantId: null,
+  },
+)
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string | null): void
+}>()
+
+const { composants, loading, loadComposants } = useComposants()
+
+const composantOptions = computed(() => {
+  const baseOptions = Array.isArray(composants.value) ? composants.value : []
+  if (!props.typeComposantId) {
+    return baseOptions
+  }
+
+  const allowedTypeId = String(props.typeComposantId)
+  return baseOptions.filter((composant: any) => {
+    const typeId =
+      composant?.typeComposantId ||
+      composant?.typeComposant?.id ||
+      null
+    return typeId ? String(typeId) === allowedTypeId : false
+  })
+})
+
+onMounted(() => {
+  if (composantOptions.value.length === 0) {
+    loadComposants({ itemsPerPage: 200 }).catch((error: unknown) => {
+      console.error('Erreur lors du chargement des composants:', error)
+    })
+  }
+})
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    if (typeof value === 'string' && value) {
+      const exists = composantOptions.value.some((c: any) => c.id === value)
+      if (!exists && !loading.value) {
+        loadComposants({ itemsPerPage: 200, force: true }).catch((error: unknown) => {
+          console.error('Erreur lors du chargement des composants:', error)
+        })
+      }
+    }
+  },
+)
+
+const updateValue = (value: string | number | null | undefined) => {
+  if (value === undefined || value === null || value === '') {
+    emit('update:modelValue', null)
+    return
+  }
+  emit('update:modelValue', String(value))
+}
+
+const formatDescription = (option: any) => {
+  const parts: string[] = []
+  if (option?.reference) {
+    parts.push(option.reference)
+  }
+  if (option?.prix !== undefined && option.prix !== null) {
+    const price = Number(option.prix)
+    if (!Number.isNaN(price)) {
+      parts.push(`${price.toFixed(2)} €`)
+    }
+  }
+  return parts.length ? parts.join(' • ') : 'Sans référence'
+}
+</script>

app/components/CustomFieldsDisplay.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-if="customFields && customFields.length > 0" class="space-y-4">
-    <h4 class="font-semibold text-gray-700 mb-3">
+    <h4 class="font-semibold text-base-content/80 mb-3">
       Champs personnalisés
     </h4>
     <div class="grid grid-cols-1 md:grid-cols-2 gap-4">

app/components/DocumentPreviewModal.vue

@@ -10,11 +10,11 @@
           <div class="min-w-0">
             <h3 class="font-bold text-xl truncate">
               Prévisualisation
-              <span v-if="navTotal > 1" class="text-base font-normal text-gray-500">
+              <span v-if="navTotal > 1" class="text-base font-normal text-base-content/50">
                 {{ activeIndex + 1 }} / {{ navTotal }}
               </span>
             </h3>
-            <p class="text-sm text-gray-500 truncate">
+            <p class="text-sm text-base-content/50 truncate">
               {{ activeDoc?.name || activeDoc?.filename }}<span v-if="documentDescription"> &bull; {{ documentDescription }}</span>
             </p>
           </div>
@@ -68,7 +68,7 @@
 
             <template v-else-if="previewType === 'text'">
               <div class="w-full h-full overflow-auto">
-                <div v-if="textLoading" class="flex items-center justify-center py-10 text-sm text-gray-500">
+                <div v-if="textLoading" class="flex items-center justify-center py-10 text-sm text-base-content/50">
                   <span class="loading loading-spinner loading-md mr-2" />
                   Chargement du document...
                 </div>
@@ -82,7 +82,7 @@
             </template>
 
             <template v-else>
-              <div class="text-sm text-gray-500 text-center px-6">
+              <div class="text-sm text-base-content/50 text-center px-6">
                 Prévisualisation non disponible pour ce type de document.
               </div>
             </template>

app/components/DocumentUpload.vue

@@ -13,7 +13,7 @@
         <h3 class="font-semibold">
           {{ title }}
         </h3>
-        <p class="text-sm text-gray-500">
+        <p class="text-sm text-base-content/50">
           {{ subtitle }}
         </p>
       </div>
@@ -22,7 +22,7 @@
         <button type="button" class="btn btn-primary btn-sm" @click="triggerFileDialog">
           Sélectionner des fichiers
         </button>
-        <span class="text-xs text-gray-500">ou glisser-déposer ici</span>
+        <span class="text-xs text-base-content/50">ou glisser-déposer ici</span>
       </div>
 
       <input
@@ -54,7 +54,7 @@
             </div>
             <div class="flex flex-col">
               <span class="font-medium">{{ file.name }}</span>
-              <span class="text-xs text-gray-500">{{ formatSize(file.size) }} • {{ file.type || 'Type inconnu' }}</span>
+              <span class="text-xs text-base-content/50">{{ formatSize(file.size) }} • {{ file.type || 'Type inconnu' }}</span>
             </div>
           </div>
           <button type="button" class="btn btn-ghost btn-xs" @click="removeFile(file)">
@@ -130,7 +130,7 @@ const cleanupRemovedPreviews = (previousFiles = [], nextFiles = []) => {
   })
 }
 
-const selectedFiles = computed(() => internalFiles.value)
+const selectedFiles = internalFiles
 
 watch(
   () => props.modelValue,

app/components/ModelStructureViewer.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="space-y-4">
-    <div class="flex flex-wrap items-center gap-2 text-sm text-gray-600">
+    <div class="flex flex-wrap items-center gap-2 text-sm text-base-content/60">
       <span v-if="stats.customFields" class="badge badge-outline badge-sm">{{ stats.customFields }} champ(s)</span>
       <span v-if="stats.pieces" class="badge badge-outline badge-sm">{{ stats.pieces }} pièce(s)</span>
       <span v-if="stats.subcomponents" class="badge badge-outline badge-sm">{{ stats.subcomponents }} sous-composant(s)</span>
-      <span v-if="!stats.customFields && !stats.pieces && !stats.subcomponents" class="text-xs text-gray-500">
+      <span v-if="!stats.customFields && !stats.pieces && !stats.subcomponents" class="text-xs text-base-content/50">
         Structure vide
       </span>
     </div>

app/components/PageHero.vue

@@ -1,11 +1,11 @@
 <template>
   <section :class="sectionClasses">
     <div :class="contentClasses">
-      <div :class="['space-y-4', maxWidthClass]">
-        <component :is="headingTag" v-if="title" class="text-4xl font-bold">
+      <div :class="['space-y-3', maxWidthClass]">
+        <component :is="headingTag" v-if="title" class="text-4xl font-bold tracking-tight">
           {{ title }}
         </component>
-        <p v-if="subtitle" class="text-sm opacity-90">
+        <p v-if="subtitle" class="text-sm opacity-80 leading-relaxed">
           {{ subtitle }}
         </p>
         <slot />
@@ -58,9 +58,9 @@ const props = defineProps({
 })
 
 const sectionClasses = computed(() => {
-  const classes = ['hero', 'bg-gradient-to-r', props.gradientFrom, props.gradientTo, props.minHeight]
+  const classes = ['hero', 'bg-gradient-to-br', props.gradientFrom, props.gradientTo, props.minHeight]
   if (props.rounded) {
-    classes.push('rounded-lg')
+    classes.push('rounded-xl', 'overflow-hidden')
   }
   return classes
 })

app/components/PieceItem.vue

@@ -9,7 +9,7 @@
 
     <!-- Piece Header (collapsible, same pattern as ComponentItem) -->
     <div class="flex items-start justify-between p-4 bg-base-200 rounded-lg">
-      <div class="flex items-start gap-3 w-full">
+      <div class="flex items-start gap-3 flex-1 min-w-0">
         <button
           type="button"
           class="btn btn-ghost btn-sm btn-circle shrink-0 transition-transform"
@@ -21,9 +21,15 @@
           <IconLucideChevronRight class="w-5 h-5 transition-transform" aria-hidden="true" />
           <span class="sr-only">{{ isCollapsed ? 'Déplier' : 'Replier' }} la pièce</span>
         </button>
-        <div class="flex-1">
+        <div class="flex-1 min-w-0">
           <h3 class="text-lg font-semibold">
             {{ pieceData.name }}
+            <span
+              v-if="displayQuantity > 1"
+              class="text-sm font-normal text-base-content/60 ml-1"
+            >
+              ×{{ displayQuantity }}
+            </span>
           </h3>
           <div class="flex flex-wrap gap-2 mt-2">
             <span v-if="piece.parentComponentName" class="badge badge-ghost badge-sm">
@@ -49,11 +55,37 @@
           </div>
         </div>
       </div>
+      <button
+        v-if="showDelete"
+        type="button"
+        class="btn btn-ghost btn-xs text-error shrink-0"
+        title="Supprimer cette pièce"
+        @click="$emit('delete')"
+      >
+        Supprimer
+      </button>
     </div>
 
     <div v-show="!isCollapsed" class="space-y-4">
-      <div class="p-4 bg-base-100 border border-gray-200 rounded-lg">
+      <div class="p-4 bg-base-100 border border-base-200 rounded-lg">
         <div class="space-y-2 text-sm">
+      <div v-if="isEditMode" class="form-control">
+        <label class="label">
+          <span class="label-text text-sm">Quantité</span>
+        </label>
+        <input
+          v-model.number="pieceData.quantity"
+          type="number"
+          min="1"
+          step="1"
+          class="input input-bordered input-sm md:input-md w-24"
+          @blur="updatePiece"
+        />
+      </div>
+      <div v-else-if="displayQuantity > 1">
+        <span class="font-medium">Quantité:</span>
+        <span class="ml-2">{{ displayQuantity }}</span>
+      </div>
       <div>
         <span class="font-medium">Référence:</span>
         <input
@@ -82,7 +114,7 @@
               </span>
               <span
                 v-if="formatConstructeurContact(constructeur)"
-                class="text-xs text-gray-500"
+                class="text-xs text-base-content/50"
               >
                 {{ formatConstructeurContact(constructeur) }}
               </span>
@@ -165,65 +197,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,147 +211,16 @@
       </div>
 
     <!-- Champs personnalisés de la pièce -->
-    <div
-      v-if="displayedCustomFields.length"
-      class="mt-4 pt-4 border-t border-gray-200"
-    >
-      <h5 class="text-sm font-medium text-gray-700 mb-3">
-        Champs personnalisés
-      </h5>
-      <div class="space-y-3">
-        <div
-          v-for="(field, index) in displayedCustomFields"
-          :key="resolveFieldKey(field, index)"
-          class="form-control"
-        >
-          <label class="label">
-            <span class="label-text text-sm">{{
-              resolveFieldName(field)
-            }}</span>
-            <span
-              v-if="resolveFieldRequired(field)"
-              class="label-text-alt text-error"
-              >*</span
-            >
-          </label>
+    <CustomFieldDisplay
+      :fields="displayedCustomFields"
+      :is-edit-mode="isEditMode"
+      @field-input="handleCustomFieldInput"
+      @field-blur="handleCustomFieldBlur"
+    />
 
-          <!-- Mode édition -->
-          <template v-if="isEditMode && !resolveFieldReadOnly(field)">
-            <!-- Champ de type TEXT -->
-            <input
-              v-if="resolveFieldType(field) === 'text'"
-              :value="field.value ?? ''"
-              type="text"
-              class="input input-bordered input-sm"
-              :required="resolveFieldRequired(field)"
-              @input="
-                setCustomFieldValue(
-                  resolveFieldId(field),
-                  $event.target.value,
-                  field
-                )
-              "
-              @blur="updateCustomFieldValue(resolveFieldId(field), field)"
-            />
-
-            <!-- Champ de type NUMBER -->
-            <input
-              v-else-if="resolveFieldType(field) === 'number'"
-              :value="field.value ?? ''"
-              type="number"
-              class="input input-bordered input-sm"
-              :required="resolveFieldRequired(field)"
-              @input="
-                setCustomFieldValue(
-                  resolveFieldId(field),
-                  $event.target.value,
-                  field
-                )
-              "
-              @blur="updateCustomFieldValue(resolveFieldId(field), field)"
-            />
-
-            <!-- Champ de type SELECT -->
-            <select
-              v-else-if="resolveFieldType(field) === 'select'"
-              :value="field.value ?? ''"
-              class="select select-bordered select-sm"
-              :required="resolveFieldRequired(field)"
-              @change="
-                (event) =>
-                  setCustomFieldValue(
-                    resolveFieldId(field),
-                    event.target.value,
-                    field
-                  )
-              "
-              @blur="updateCustomFieldValue(resolveFieldId(field), field)"
-            >
-              <option value="">Sélectionner...</option>
-              <option
-                v-for="option in resolveFieldOptions(field)"
-                :key="option"
-                :value="option"
-              >
-                {{ option }}
-              </option>
-            </select>
-
-            <!-- Champ de type BOOLEAN -->
-            <div
-              v-else-if="resolveFieldType(field) === 'boolean'"
-              class="flex items-center gap-2"
-            >
-              <input
-                :value="field.value ?? ''"
-                type="checkbox"
-                class="checkbox checkbox-sm"
-                :checked="String(field.value).toLowerCase() === 'true'"
-                @change="
-                  setCustomFieldValue(
-                    resolveFieldId(field),
-                    $event.target.checked ? 'true' : 'false',
-                    field
-                  )
-                "
-                @blur="updateCustomFieldValue(resolveFieldId(field), field)"
-              />
-              <span class="text-sm">{{
-                String(field.value).toLowerCase() === "true" ? "Oui" : "Non"
-              }}</span>
-            </div>
-
-            <!-- Champ de type DATE -->
-            <input
-              v-else-if="resolveFieldType(field) === 'date'"
-              :value="field.value ?? ''"
-              type="date"
-              class="input input-bordered input-sm"
-              :required="resolveFieldRequired(field)"
-              @input="
-                setCustomFieldValue(
-                  resolveFieldId(field),
-                  $event.target.value,
-                  field
-                )
-              "
-              @blur="updateCustomFieldValue(resolveFieldId(field), field)"
-            />
-          </template>
-
-          <!-- Mode lecture seule -->
-          <template v-else>
-            <div class="input input-bordered input-sm bg-base-200">
-              {{ formatFieldDisplayValue(field) }}
-            </div>
-          </template>
-        </div>
-      </div>
-    </div>
-
-    <div class="mt-4 pt-4 border-t border-gray-200 space-y-3">
+    <div class="mt-4 pt-4 border-t border-base-200 space-y-3">
       <div class="flex items-center justify-between">
-        <h5 class="text-sm font-medium text-gray-700">Documents</h5>
+        <h5 class="text-sm font-medium text-base-content/80">Documents</h5>
         <span
           v-if="isEditMode && selectedFiles.length"
           class="badge badge-outline"
@@ -386,7 +232,7 @@
         </span>
       </div>
 
-      <p v-if="loadingDocuments" class="text-xs text-gray-500">
+      <p v-if="loadingDocuments" class="text-xs text-base-content/50">
         Chargement des documents...
       </p>
 
@@ -398,83 +244,14 @@
         @files-added="handleFilesAdded"
       />
 
-      <div v-if="pieceDocuments.length" class="space-y-2">
-        <div
-          v-for="document in pieceDocuments"
-          :key="document.id"
-          class="flex items-center justify-between rounded border border-base-200 bg-base-100 px-3 py-2"
-        >
-          <div class="flex items-center gap-3 text-sm">
-            <div
-              class="flex-shrink-0 overflow-hidden rounded-md border border-base-200 bg-base-200/70 flex items-center justify-center"
-              :class="documentThumbnailClass(document)"
-            >
-              <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-6 w-6"
-                :class="documentIcon(document).colorClass"
-                aria-hidden="true"
-              />
-            </div>
-            <div>
-              <div class="font-medium">
-                {{ document.name }}
-              </div>
-              <div class="text-xs text-gray-500">
-                {{ document.mimeType || "Inconnu" }} •
-                {{ formatSize(document.size) }}
-              </div>
-            </div>
-          </div>
-          <div class="flex items-center gap-2">
-            <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>
-            <button
-              v-if="isEditMode"
-              type="button"
-              class="btn btn-error btn-xs"
-              :disabled="uploadingDocuments"
-              @click="removeDocument(document.id)"
-            >
-              Supprimer
-            </button>
-          </div>
-        </div>
-      </div>
-      <p v-else-if="!loadingDocuments" class="text-xs text-gray-500">
-        Aucun document lié à cette pièce.
-      </p>
+      <DocumentListInline
+        :documents="pieceDocuments"
+        :can-delete="isEditMode"
+        :delete-disabled="uploadingDocuments"
+        empty-text="Aucun document lié à cette pièce."
+        @preview="openPreview"
+        @delete="removeDocument"
+      />
     </div>
     </div>
   </div>
@@ -487,7 +264,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 {
@@ -496,22 +272,8 @@ import {
   uniqueConstructeurIds,
 } from '~/shared/constructeurUtils'
 import {
-  formatSize,
-  shouldInlinePdf,
-  documentPreviewSrc,
-  documentThumbnailClass,
-  documentIcon,
-  downloadDocument,
-} from '~/shared/utils/documentDisplayUtils'
-import {
-  resolveFieldKey,
   resolveFieldId,
-  resolveFieldName,
-  resolveFieldType,
-  resolveFieldOptions,
-  resolveFieldRequired,
   resolveFieldReadOnly,
-  formatFieldDisplayValue,
 } from '~/shared/utils/entityCustomFieldLogic'
 import { useEntityDocuments } from '~/composables/useEntityDocuments'
 import { useEntityProductDisplay } from '~/composables/useEntityProductDisplay'
@@ -520,11 +282,12 @@ import { useEntityCustomFields } from '~/composables/useEntityCustomFields'
 const props = defineProps({
   piece: { type: Object, required: true },
   isEditMode: { type: Boolean, default: false },
+  showDelete: { type: Boolean, default: false },
   collapseAll: { type: Boolean, default: true },
   toggleToken: { type: Number, default: 0 },
 })
 
-const emit = defineEmits(['update', 'edit', 'custom-field-update'])
+const emit = defineEmits(['update', 'edit', 'custom-field-update', 'delete'])
 
 // --- Local reactive data for editing ---
 const pieceData = reactive({
@@ -532,6 +295,11 @@ const pieceData = reactive({
   reference: props.piece.reference || '',
   prix: props.piece.prix || '',
   productId: props.piece.product?.id || props.piece.productId || null,
+  quantity: props.piece.quantity ?? 1,
+})
+
+const displayQuantity = computed(() => {
+  return pieceData.quantity ?? 1
 })
 
 // --- Products ---
@@ -665,16 +433,16 @@ const handleProductChange = async (value) => {
   updatePiece()
 }
 
-// --- Custom field local helpers ---
-const setCustomFieldValue = (fieldValueId, value, field) => {
+// --- Custom field event handlers ---
+const handleCustomFieldInput = (field, value) => {
   if (resolveFieldReadOnly(field)) return
-  if (field && typeof field === 'object') field.value = value
+  const fieldValueId = resolveFieldId(field)
   if (!fieldValueId) return
   const fieldValue = props.piece.customFieldValues?.find((fv) => fv.id === fieldValueId)
   if (fieldValue) fieldValue.value = value
 }
 
-const updateCustomFieldValue = async (_fieldValueId, field) => {
+const handleCustomFieldBlur = async (field) => {
   await updateCustomField(field)
   const cfId = field?.customFieldId || field?.customField?.id || null
   if (cfId || field?.customFieldValueId) {
@@ -692,13 +460,14 @@ const updatePiece = () => {
   let parsedPrice = null
   if (prixValue !== null && prixValue !== undefined && String(prixValue).trim().length > 0) {
     const numeric = Number(prixValue)
-    if (!Number.isNaN(numeric)) parsedPrice = numeric
+    if (!Number.isNaN(numeric)) parsedPrice = String(numeric)
   }
   const product = selectedProduct.value ? { ...selectedProduct.value } : null
   emit('update', {
     ...props.piece,
     ...pieceData,
     prix: parsedPrice,
+    quantity: pieceData.quantity ?? 1,
     productId: pieceData.productId || null,
     product,
     constructeurIds: pieceConstructeurIds.value,
@@ -738,11 +507,12 @@ watch(
 )
 
 watch(
-  () => [props.piece.name, props.piece.reference, props.piece.prix],
+  () => [props.piece.name, props.piece.reference, props.piece.prix, props.piece.quantity],
   () => {
     pieceData.name = props.piece.name || ''
     pieceData.reference = props.piece.reference || ''
     pieceData.prix = props.piece.prix || ''
+    pieceData.quantity = props.piece.quantity ?? 1
   },
 )
 
@@ -750,6 +520,7 @@ onMounted(() => {
   pieceData.name = props.piece.name || ''
   pieceData.reference = props.piece.reference || ''
   pieceData.prix = props.piece.prix || ''
+  pieceData.quantity = props.piece.quantity ?? 1
   loadProducts().catch(() => {})
   if (pieceData.productId) ensureProductLoaded(pieceData.productId)
   if (!props.piece.documents?.length) refreshDocuments()

app/components/PieceModelStructureEditor.vue

@@ -1,22 +1,16 @@
 <template>
   <div class="space-y-6">
     <section class="space-y-3">
-      <header class="flex items-center justify-between">
-        <div>
-          <h3 class="text-sm font-semibold">
-            Produits inclus par défaut
-          </h3>
-          <p class="text-xs text-base-content/70">
-            Ces produits s'afficheront lors de la création d'une pièce basée sur cette catégorie.
-          </p>
-        </div>
-        <button v-if="!restrictedMode" type="button" class="btn btn-outline btn-xs" @click="addProduct">
-          <IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" />
-          Ajouter
-        </button>
+      <header>
+        <h3 class="text-sm font-semibold">
+          Produits inclus par défaut
+        </h3>
+        <p class="text-xs text-base-content/70">
+          Ces produits s'afficheront lors de la création d'une pièce basée sur cette catégorie.
+        </p>
       </header>
 
-      <p v-if="!products.length" class="text-xs text-gray-500">
+      <p v-if="!products.length" class="text-xs text-base-content/50">
         Aucun produit défini.
       </p>
 
@@ -35,7 +29,6 @@
                 <select
                   v-model="product.typeProductId"
                   class="select select-bordered select-xs"
-                  :disabled="isProductLocked(product)"
                   @change="handleProductTypeSelect(product)"
                 >
                   <option value="">
@@ -52,39 +45,27 @@
               </div>
             </div>
             <button
-              v-if="!isProductLocked(product)"
               type="button"
               class="btn btn-error btn-xs btn-square"
               @click="removeProduct(index)"
             >
               <IconLucideTrash class="w-4 h-4" aria-hidden="true" />
             </button>
-            <div v-else class="tooltip tooltip-left" data-tip="Ce produit ne peut pas être supprimé car des éléments utilisent cette catégorie">
-              <button
-                type="button"
-                class="btn btn-ghost btn-xs btn-square opacity-30 cursor-not-allowed"
-                disabled
-              >
-                <IconLucideTrash class="w-4 h-4" aria-hidden="true" />
-              </button>
-            </div>
           </div>
         </li>
       </ul>
+      <button type="button" class="btn btn-outline btn-xs" @click="addProduct">
+        <IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" />
+        Ajouter
+      </button>
     </section>
 
     <section class="space-y-3">
-      <header class="flex items-center justify-between">
-        <h3 class="text-sm font-semibold">
-          Champs personnalisés
-        </h3>
-        <button type="button" class="btn btn-outline btn-xs" @click="addField">
-          <IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" />
-          Ajouter
-        </button>
-      </header>
+      <h3 class="text-sm font-semibold">
+        Champs personnalisés
+      </h3>
 
-      <p v-if="!fields.length" class="text-xs text-gray-500">
+      <p v-if="!fields.length" class="text-xs text-base-content/50">
         Aucun champ personnalisé n'a encore été défini.
       </p>
 
@@ -101,482 +82,105 @@
           @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-xs"
-                placeholder="Nom du champ"
-              >
-              <select v-model="field.type" class="select select-bordered select-xs" :disabled="isFieldLocked(field)">
-                <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" :disabled="isFieldLocked(field)">
-              Obligatoire
-            </div>
-
-            <textarea
-              v-if="field.type === 'select'"
-              v-model="field.optionsText"
-              class="textarea textarea-bordered textarea-xs h-20"
-              placeholder="Option 1&#10;Option 2"
-              :disabled="isFieldLocked(field)"
-            />
-          </div>
-
-          <button
-            v-if="!isFieldLocked(field)"
-            type="button"
-            class="btn btn-error btn-xs btn-square"
-            @click="removeField(index)"
-          >
-            <IconLucideTrash class="w-4 h-4" aria-hidden="true" />
-          </button>
-          <div v-else class="tooltip tooltip-left" data-tip="Ce champ ne peut pas être supprimé car des éléments utilisent cette catégorie">
+          <div class="flex items-start gap-3">
             <button
               type="button"
-              class="btn btn-ghost btn-xs btn-square opacity-30 cursor-not-allowed"
-              disabled
+              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-xs"
+                  placeholder="Nom du champ"
+                >
+                <select v-model="field.type" class="select select-bordered select-xs">
+                  <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-xs h-20"
+                placeholder="Option 1&#10;Option 2"
+              />
+            </div>
+
+            <button
+              type="button"
+              class="btn btn-error btn-xs btn-square"
+              @click="removeField(index)"
             >
               <IconLucideTrash class="w-4 h-4" aria-hidden="true" />
             </button>
           </div>
-        </div>
-      </li>
-    </ul>
+        </li>
+      </ul>
+      <button type="button" class="btn btn-outline btn-xs" @click="addField">
+        <IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" />
+        Ajouter
+      </button>
     </section>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, reactive, ref, watch } from 'vue'
 import IconLucideGripVertical from '~icons/lucide/grip-vertical'
 import IconLucidePlus from '~icons/lucide/plus'
 import IconLucideTrash from '~icons/lucide/trash'
-import type {
-  PieceModelCustomField,
-  PieceModelCustomFieldType,
-  PieceModelProduct,
-  PieceModelStructure,
-  PieceModelStructureEditorField,
-} from '~/shared/types/inventory'
-import { normalizePieceStructureForSave } from '~/shared/modelUtils'
-import { useProductTypes } from '~/composables/useProductTypes'
+import type { PieceModelStructure } from '~/shared/types/inventory'
+import { usePieceStructureEditorLogic } from '~/composables/usePieceStructureEditorLogic'
 
 defineOptions({ name: 'PieceModelStructureEditor' })
 
-type EditorField = PieceModelStructureEditorField & { uid: string }
-type EditorProduct = {
-  uid: string
-  typeProductId: string
-  typeProductLabel: string
-  familyCode: string
-}
-
 const props = defineProps<{
   modelValue?: PieceModelStructure | null
-  restrictedMode?: boolean
 }>()
 
 const emit = defineEmits<{
   (event: 'update:modelValue', value: PieceModelStructure): void
 }>()
 
-const { productTypes, loadProductTypes } = useProductTypes()
-
-const ensureArray = <T,>(value: T[] | null | undefined): T[] =>
-  Array.isArray(value) ? value : []
-
-const normalizeLineEndings = (value: string): string =>
-  value.replace(/\r\n/g, '\n').replace(/\r/g, '\n')
-
-const safeClone = <T,>(value: T, fallback: T): T => {
-  try {
-    return JSON.parse(JSON.stringify(value ?? fallback)) as T
-  } catch {
-    return JSON.parse(JSON.stringify(fallback)) as T
-  }
-}
-
-const extractRest = (structure?: PieceModelStructure | null): Record<string, unknown> => {
-  if (!structure || typeof structure !== 'object') {
-    return {}
-  }
-  const entries = Object.entries(structure).filter(
-    ([key]) => key !== 'customFields' && key !== 'products',
-  )
-  return safeClone(Object.fromEntries(entries), {})
-}
-
-let uidCounter = 0
-const createUid = (scope: 'field' | 'product'): string => {
-  if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
-    return crypto.randomUUID()
-  }
-  uidCounter += 1
-  return `piece-${scope}-${Date.now().toString(36)}-${uidCounter}`
-}
-
-const toEditorField = (
-  input: Partial<PieceModelStructureEditorField> | null | undefined,
-  index: number,
-): EditorField => {
-  const baseType = typeof input?.type === 'string' && input.type ? input.type : 'text'
-  const optionsText = normalizeLineEndings(
-    typeof input?.optionsText === 'string'
-      ? input.optionsText
-      : Array.isArray(input?.options)
-        ? input.options.join('\n')
-        : '',
-  )
-
-  return {
-    uid: createUid('field'),
-    name: typeof input?.name === 'string' ? input.name : '',
-    type: baseType as PieceModelCustomFieldType,
-    required: Boolean(input?.required),
-    optionsText,
-    orderIndex: typeof input?.orderIndex === 'number' ? input.orderIndex : index,
-  }
-}
-
-const hydrateFields = (structure?: PieceModelStructure | null): EditorField[] => {
-  const source = ensureArray(structure?.customFields)
-  return source
-    .map((field, index) => toEditorField(field, index))
-    .sort((a, b) => (a.orderIndex ?? 0) - (b.orderIndex ?? 0))
-    .map((field, index) => ({ ...field, orderIndex: index }))
-}
-
-const toEditorProduct = (
-  input: Partial<PieceModelProduct> | null | undefined,
-): EditorProduct => ({
-  uid: createUid('product'),
-  typeProductId: typeof input?.typeProductId === 'string' ? input.typeProductId : '',
-  typeProductLabel:
-    typeof input?.typeProductLabel === 'string' ? input.typeProductLabel : '',
-  familyCode: typeof input?.familyCode === 'string' ? input.familyCode : '',
-})
-
-const hydrateProducts = (structure?: PieceModelStructure | null): EditorProduct[] => {
-  const source = Array.isArray(structure?.products) ? structure?.products : []
-  return source.map((product) => toEditorProduct(product))
-}
-
-const productTypeOptions = computed(() => productTypes.value ?? [])
-
-const productTypeMap = computed(() => {
-  const map = new Map<string, any>()
-  productTypeOptions.value.forEach((type: any) => {
-    if (type?.id) {
-      map.set(type.id, type)
-    }
-  })
-  return map
-})
-
-const formatProductTypeOption = (type: any) => {
-  if (!type) {
-    return ''
-  }
-  const parts: string[] = []
-  if (type.code) {
-    parts.push(type.code)
-  }
-  if (type.name) {
-    parts.push(type.name)
-  }
-  return parts.length ? parts.join(' • ') : type.id || ''
-}
-
-const updateProductTypeMetadata = (product: EditorProduct) => {
-  const option = product.typeProductId
-    ? productTypeMap.value.get(product.typeProductId)
-    : null
-  product.typeProductLabel = option?.name ?? ''
-}
-
-const handleProductTypeSelect = (product: EditorProduct) => {
-  const option = product.typeProductId
-    ? productTypeMap.value.get(product.typeProductId)
-    : null
-  product.typeProductLabel = option?.name ?? ''
-  if (option?.code) {
-    product.familyCode = option.code
-  }
-}
-
-const createEmptyProduct = (): EditorProduct => ({
-  uid: createUid('product'),
-  typeProductId: '',
-  typeProductLabel: '',
-  familyCode: '',
-})
-
-const addProduct = () => {
-  products.value.push(createEmptyProduct())
-}
-
-const removeProduct = (index: number) => {
-  products.value = products.value.filter((_, idx) => idx !== index)
-}
-
-const fields = ref<EditorField[]>(hydrateFields(props.modelValue))
-const products = ref<EditorProduct[]>(hydrateProducts(props.modelValue))
-const restState = ref<Record<string, unknown>>(extractRest(props.modelValue))
-
-const initialFieldUids = ref<Set<string>>(new Set(fields.value.map(f => f.uid)))
-const initialProductUids = ref<Set<string>>(new Set(products.value.map(p => p.uid)))
-
-const isFieldLocked = (field: EditorField): boolean => {
-  return props.restrictedMode === true && initialFieldUids.value.has(field.uid)
-}
-
-const isProductLocked = (product: EditorProduct): boolean => {
-  return props.restrictedMode === true && initialProductUids.value.has(product.uid)
-}
-
-const restrictedMode = computed(() => props.restrictedMode === true)
-
-const applyOrderIndex = (list: EditorField[]): EditorField[] =>
-  list.map((field, index) => ({
-    ...field,
-    orderIndex: index,
-  }))
-
-const normalizeProductEntry = (product: EditorProduct): PieceModelProduct | null => {
-  const typeProductId = typeof product.typeProductId === 'string' ? product.typeProductId.trim() : ''
-  const familyCode = typeof product.familyCode === 'string' ? product.familyCode.trim() : ''
-
-  if (!typeProductId && !familyCode) {
-    return null
-  }
-
-  const payload: PieceModelProduct = {}
-  if (typeProductId) {
-    payload.typeProductId = typeProductId
-  }
-  if (familyCode) {
-    payload.familyCode = familyCode
-  }
-  if (product.typeProductLabel) {
-    payload.typeProductLabel = product.typeProductLabel
-  }
-  return payload
-}
-
-const buildPayload = (
-  fieldsSource: EditorField[],
-  productsSource: EditorProduct[],
-  restSource: Record<string, unknown>,
-): PieceModelStructure => {
-  const normalizedFields = fieldsSource
-    .map<PieceModelCustomField | null>((field, index) => {
-      const name = field.name.trim()
-      if (!name) {
-        return null
-      }
-
-      const type = (field.type || 'text') as PieceModelCustomFieldType
-      const required = Boolean(field.required)
-      const payload: PieceModelCustomField = {
-        name,
-        type,
-        required,
-        orderIndex: index,
-      }
-
-      if (type === 'select') {
-        const options = normalizeLineEndings(field.optionsText)
-          .split('\n')
-          .map((option) => option.trim())
-          .filter((option) => option.length > 0)
-        if (options.length > 0) {
-          payload.options = options
-        }
-      }
-
-      return payload
-    })
-    .filter((field): field is PieceModelCustomField => Boolean(field))
-
-  const normalizedProducts = productsSource
-    .map((product) => normalizeProductEntry(product))
-    .filter((product): product is PieceModelProduct => Boolean(product))
-
-  const draft: PieceModelStructure = {
-    ...safeClone(restSource, {}),
-    products: normalizedProducts,
-    customFields: normalizedFields,
-  }
-
-  return normalizePieceStructureForSave(draft)
-}
-
-const serializeStructure = (structure?: PieceModelStructure | null): string => {
-  return JSON.stringify(normalizePieceStructureForSave(structure ?? { customFields: [] }))
-}
-
-let lastEmitted = serializeStructure(props.modelValue)
-
-const emitUpdate = () => {
-  const payload = buildPayload(fields.value, products.value, restState.value)
-  const serialized = JSON.stringify(payload)
-  if (serialized !== lastEmitted) {
-    lastEmitted = serialized
-    emit('update:modelValue', payload)
-  }
-}
-
-watch(fields, emitUpdate, { deep: true })
-watch(products, emitUpdate, { deep: true })
-watch(productTypeOptions, () => {
-  products.value.forEach((product) => updateProductTypeMetadata(product))
-})
-
-watch(
-  () => props.modelValue,
-  (value) => {
-    const incomingSerialized = serializeStructure(value)
-    if (incomingSerialized === lastEmitted) {
-      return
-    }
-    restState.value = extractRest(value)
-    fields.value = hydrateFields(value)
-    products.value = hydrateProducts(value)
-    products.value.forEach((product) => updateProductTypeMetadata(product))
-    lastEmitted = incomingSerialized
-    initialFieldUids.value = new Set(fields.value.map(f => f.uid))
-    initialProductUids.value = new Set(products.value.map(p => p.uid))
-  },
-  { deep: true },
-)
-
-onMounted(async () => {
-  if (!productTypeOptions.value.length) {
-    await loadProductTypes()
-  }
-  products.value.forEach((product) => updateProductTypeMetadata(product))
-})
-
-const dragState = reactive({
-  draggingIndex: null as number | null,
-  dropTargetIndex: null as number | null,
-})
-
-const resetDragState = () => {
-  dragState.draggingIndex = null
-  dragState.dropTargetIndex = null
-}
-
-const reorderFields = (from: number, to: number) => {
-  if (from === to) {
-    resetDragState()
-    return
-  }
-
-  const list = fields.value.slice()
-  if (from < 0 || to < 0 || from >= list.length || to >= list.length) {
-    resetDragState()
-    return
-  }
-
-  const [moved] = list.splice(from, 1)
-  if (!moved) {
-    resetDragState()
-    return
-  }
-  list.splice(to, 0, moved)
-  fields.value = applyOrderIndex(list)
-  resetDragState()
-}
-
-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) => {
-  if (dragState.draggingIndex === null) {
-    resetDragState()
-    return
-  }
-  reorderFields(dragState.draggingIndex, index)
-}
-
-const onDragEnd = () => {
-  resetDragState()
-}
-
-const reorderClass = (index: number) => {
-  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 ''
-}
-
-const createEmptyField = (orderIndex: number): EditorField => ({
-  uid: createUid('field'),
-  name: '',
-  type: 'text',
-  required: false,
-  optionsText: '',
-  orderIndex,
-})
-
-const addField = () => {
-  const next = fields.value.slice()
-  next.push(createEmptyField(next.length))
-  fields.value = applyOrderIndex(next)
-}
-
-const removeField = (index: number) => {
-  const next = fields.value.filter((_, i) => i !== index)
-  fields.value = applyOrderIndex(next)
-}
+const {
+  fields,
+  products,
+  productTypeOptions,
+  formatProductTypeOption,
+  handleProductTypeSelect,
+  addProduct,
+  removeProduct,
+  addField,
+  removeField,
+  reorderClass,
+  onDragStart,
+  onDragEnter,
+  onDrop,
+  onDragEnd,
+} = usePieceStructureEditorLogic({ props, emit })
 </script>

app/components/PieceSelect.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="space-y-1">
+    <SearchSelect
+      :model-value="modelValue ?? undefined"
+      :options="pieceOptions"
+      :loading="loading"
+      :placeholder="placeholder"
+      :empty-text="emptyText"
+      size="sm"
+      option-value="id"
+      option-label="name"
+      :disabled="disabled"
+      @update:modelValue="updateValue"
+    >
+      <template #option-description="{ option }">
+        <span class="text-xs text-base-content/60">
+          {{ formatDescription(option) }}
+        </span>
+      </template>
+    </SearchSelect>
+    <p v-if="helperText" class="text-xs text-base-content/60">
+      {{ helperText }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, watch } from 'vue'
+import SearchSelect from '~/components/common/SearchSelect.vue'
+import { usePieces } from '~/composables/usePieces'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string | null
+    placeholder?: string
+    emptyText?: string
+    helperText?: string
+    disabled?: boolean
+    typePieceId?: string | null
+  }>(),
+  {
+    modelValue: '',
+    placeholder: 'Sélectionner une pièce…',
+    emptyText: 'Aucune pièce disponible',
+    helperText: '',
+    disabled: false,
+    typePieceId: null,
+  },
+)
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string | null): void
+}>()
+
+const { pieces, loading, loadPieces } = usePieces()
+
+const pieceOptions = computed(() => {
+  const baseOptions = Array.isArray(pieces.value) ? pieces.value : []
+  if (!props.typePieceId) {
+    return baseOptions
+  }
+
+  const allowedTypeId = String(props.typePieceId)
+  return baseOptions.filter((piece: any) => {
+    const typeId =
+      piece?.typePieceId ||
+      piece?.typePiece?.id ||
+      null
+    return typeId ? String(typeId) === allowedTypeId : false
+  })
+})
+
+onMounted(() => {
+  if (pieceOptions.value.length === 0) {
+    loadPieces({ itemsPerPage: 200 }).catch((error: unknown) => {
+      console.error('Erreur lors du chargement des pièces:', error)
+    })
+  }
+})
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    if (typeof value === 'string' && value) {
+      const exists = pieceOptions.value.some((piece: any) => piece.id === value)
+      if (!exists && !loading.value) {
+        loadPieces({ itemsPerPage: 200, force: true }).catch((error: unknown) => {
+          console.error('Erreur lors du chargement des pièces:', error)
+        })
+      }
+    }
+  },
+)
+
+const updateValue = (value: string | number | null | undefined) => {
+  if (value === undefined || value === null || value === '') {
+    emit('update:modelValue', null)
+    return
+  }
+  emit('update:modelValue', String(value))
+}
+
+const formatDescription = (option: any) => {
+  const parts: string[] = []
+  if (option?.reference) {
+    parts.push(option.reference)
+  }
+  if (option?.prix !== undefined && option.prix !== null) {
+    const price = Number(option.prix)
+    if (!Number.isNaN(price)) {
+      parts.push(`${price.toFixed(2)} €`)
+    }
+  }
+  return parts.length ? parts.join(' • ') : 'Sans référence'
+}
+</script>

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/ProductSelect.vue

@@ -81,10 +81,10 @@ onMounted(() => {
 watch(
   () => props.modelValue,
   (value) => {
-    if (typeof value === 'string') {
+    if (typeof value === 'string' && value) {
       const exists = productOptions.value.some((product) => product.id === value)
-      if (!exists && productOptions.value.length === 0 && !loading.value) {
-        loadProducts().catch((error) => {
+      if (!exists && !loading.value) {
+        loadProducts({ force: true }).catch((error) => {
           console.error('Erreur lors du chargement des produits:', error)
         })
       }

app/components/SyncConfirmationModal.vue

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import type { SyncPreviewResult } from '~/services/modelTypes';
+
+const props = defineProps<{
+  preview: SyncPreviewResult | null;
+  open: boolean;
+  loading: boolean;
+}>();
+
+const emit = defineEmits<{
+  confirm: [];
+  cancel: [];
+}>();
+
+const dialogRef = ref<HTMLDialogElement>();
+
+watch(() => props.open, (isOpen) => {
+  if (isOpen) {
+    dialogRef.value?.showModal();
+  }
+  else {
+    dialogRef.value?.close();
+  }
+});
+
+const hasDeletions = computed(() => {
+  if (!props.preview) return false;
+  return Object.values(props.preview.deletions).some(v => v > 0);
+});
+
+const hasModifications = computed(() => {
+  if (!props.preview) return false;
+  return Object.values(props.preview.modifications).some(v => v > 0);
+});
+
+const totalAdditions = computed(() => {
+  if (!props.preview) return 0;
+  return Object.values(props.preview.additions).reduce((sum, v) => sum + v, 0);
+});
+
+const totalDeletions = computed(() => {
+  if (!props.preview) return 0;
+  return Object.values(props.preview.deletions).reduce((sum, v) => sum + v, 0);
+});
+
+const totalModifications = computed(() => {
+  if (!props.preview) return 0;
+  return Object.values(props.preview.modifications).reduce((sum, v) => sum + v, 0);
+});
+
+function handleCancel() {
+  emit('cancel');
+}
+
+function handleConfirm() {
+  emit('confirm');
+}
+</script>
+
+<template>
+  <dialog ref="dialogRef" class="modal" @close="handleCancel">
+    <div class="modal-box">
+      <h3 class="text-lg font-bold">
+        Synchronisation des éléments liés
+      </h3>
+
+      <div v-if="preview" class="py-4 space-y-3">
+        <p>
+          Cette modification impactera
+          <strong>{{ preview.itemCount }}</strong>
+          élément(s) lié(s).
+        </p>
+
+        <ul class="list-disc list-inside space-y-1">
+          <li v-if="totalAdditions > 0" class="text-success">
+            {{ totalAdditions }} ajout(s)
+          </li>
+          <li v-if="totalDeletions > 0" class="text-error">
+            {{ totalDeletions }} suppression(s)
+          </li>
+          <li v-if="totalModifications > 0" class="text-warning">
+            {{ totalModifications }} modification(s)
+          </li>
+        </ul>
+
+        <div v-if="hasDeletions" role="alert" class="alert alert-warning">
+          <span>Des éléments seront supprimés. Cette action est irréversible.</span>
+        </div>
+
+        <div v-if="hasModifications" role="alert" class="alert alert-info">
+          <span>Des valeurs de champs personnalisés seront réinitialisées.</span>
+        </div>
+      </div>
+
+      <div class="modal-action">
+        <button class="btn btn-ghost" :disabled="loading" @click="handleCancel">
+          Annuler
+        </button>
+        <button class="btn btn-primary" :disabled="loading" @click="handleConfirm">
+          <span v-if="loading" class="loading loading-spinner loading-sm" />
+          Confirmer la synchronisation
+        </button>
+      </div>
+    </div>
+
+    <form method="dialog" class="modal-backdrop">
+      <button @click="handleCancel">
+        close
+      </button>
+    </form>
+  </dialog>
+</template>

app/components/common/CustomFieldDisplay.vue

@@ -0,0 +1,173 @@
+<template>
+  <div
+    v-if="fields.length"
+    class="mt-4 pt-4 border-t border-base-200"
+  >
+    <h5 class="text-sm font-medium text-base-content/80 mb-3">
+      Champs personnalisés
+    </h5>
+    <div :class="layoutClass">
+      <div
+        v-for="(field, index) in fields"
+        :key="resolveFieldKey(field, index)"
+        class="form-control"
+      >
+        <label class="label">
+          <span class="label-text text-sm">{{
+            resolveFieldName(field)
+          }}</span>
+          <span
+            v-if="resolveFieldRequired(field)"
+            class="label-text-alt text-error"
+          >*</span>
+        </label>
+
+        <!-- Mode édition -->
+        <template v-if="isEditMode && !resolveFieldReadOnly(field)">
+          <!-- Champ de type TEXT -->
+          <input
+            v-if="resolveFieldType(field) === 'text'"
+            :value="field.value ?? ''"
+            type="text"
+            class="input input-bordered input-sm"
+            :required="resolveFieldRequired(field)"
+            @input="onInput(field, ($event.target as HTMLInputElement).value)"
+            @blur="onBlur(field)"
+          >
+
+          <!-- Champ de type NUMBER -->
+          <input
+            v-else-if="resolveFieldType(field) === 'number'"
+            :value="field.value ?? ''"
+            type="number"
+            class="input input-bordered input-sm"
+            :required="resolveFieldRequired(field)"
+            @input="onInput(field, ($event.target as HTMLInputElement).value)"
+            @blur="onBlur(field)"
+          >
+
+          <!-- Champ de type SELECT -->
+          <select
+            v-else-if="resolveFieldType(field) === 'select'"
+            :value="field.value ?? ''"
+            class="select select-bordered select-sm"
+            :required="resolveFieldRequired(field)"
+            @change="onInput(field, ($event.target as HTMLSelectElement).value)"
+            @blur="onBlur(field)"
+          >
+            <option value="">
+              Sélectionner...
+            </option>
+            <option
+              v-for="option in resolveFieldOptions(field)"
+              :key="option"
+              :value="option"
+            >
+              {{ option }}
+            </option>
+          </select>
+
+          <!-- Champ de type BOOLEAN -->
+          <div
+            v-else-if="resolveFieldType(field) === 'boolean'"
+            class="flex items-center gap-2"
+          >
+            <input
+              type="checkbox"
+              class="checkbox checkbox-sm"
+              :checked="String(field.value).toLowerCase() === 'true'"
+              @change="onBooleanChange(field, ($event.target as HTMLInputElement).checked)"
+            >
+            <span class="text-sm">{{
+              String(field.value).toLowerCase() === "true" ? "Oui" : "Non"
+            }}</span>
+          </div>
+
+          <!-- Champ de type DATE -->
+          <input
+            v-else-if="resolveFieldType(field) === 'date'"
+            :value="field.value ?? ''"
+            type="date"
+            class="input input-bordered input-sm"
+            :required="resolveFieldRequired(field)"
+            @input="onInput(field, ($event.target as HTMLInputElement).value)"
+            @blur="onBlur(field)"
+          >
+
+          <!-- Champ de type TEXTAREA -->
+          <textarea
+            v-else-if="resolveFieldType(field) === 'textarea'"
+            :value="field.value ?? ''"
+            class="textarea textarea-bordered textarea-sm"
+            :required="resolveFieldRequired(field)"
+            @input="onInput(field, ($event.target as HTMLTextAreaElement).value)"
+            @blur="onBlur(field)"
+          />
+
+          <!-- Fallback: input text -->
+          <input
+            v-else
+            :value="field.value ?? ''"
+            type="text"
+            class="input input-bordered input-sm"
+            :required="resolveFieldRequired(field)"
+            @input="onInput(field, ($event.target as HTMLInputElement).value)"
+            @blur="onBlur(field)"
+          >
+        </template>
+
+        <!-- Mode lecture seule -->
+        <template v-else>
+          <div class="input input-bordered input-sm bg-base-200">
+            {{ formatFieldDisplayValue(field) }}
+          </div>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  resolveFieldKey,
+  resolveFieldName,
+  resolveFieldType,
+  resolveFieldOptions,
+  resolveFieldRequired,
+  resolveFieldReadOnly,
+  formatFieldDisplayValue,
+} from '~/shared/utils/entityCustomFieldLogic'
+
+const props = defineProps<{
+  fields: any[]
+  isEditMode: boolean
+  columns?: 1 | 2
+}>()
+
+const emit = defineEmits<{
+  'field-input': [field: any, value: string]
+  'field-blur': [field: any]
+}>()
+
+const layoutClass = computed(() =>
+  props.columns === 2
+    ? 'grid grid-cols-1 md:grid-cols-2 gap-4'
+    : 'space-y-3',
+)
+
+function onInput(field: any, value: string) {
+  field.value = value
+  emit('field-input', field, value)
+}
+
+function onBooleanChange(field: any, checked: boolean) {
+  const value = checked ? 'true' : 'false'
+  field.value = value
+  emit('field-input', field, value)
+  emit('field-blur', field)
+}
+
+function onBlur(field: any) {
+  emit('field-blur', field)
+}
+</script>

app/components/common/CustomFieldInputGrid.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+    <div
+      v-for="(field, index) in fields"
+      :key="fieldKey(field, index)"
+      class="form-control"
+    >
+      <label class="label">
+        <span class="label-text">{{ field.name }}</span>
+        <span v-if="field.required" class="label-text-alt text-error">*</span>
+      </label>
+      <input
+        v-if="field.type === 'text'"
+        v-model="field.value"
+        type="text"
+        class="input input-bordered input-sm md:input-md"
+        :required="field.required"
+        :disabled="disabled"
+      >
+      <input
+        v-else-if="field.type === 'number'"
+        v-model="field.value"
+        type="number"
+        step="0.01"
+        class="input input-bordered input-sm md:input-md"
+        :required="field.required"
+        :disabled="disabled"
+      >
+      <select
+        v-else-if="field.type === 'select'"
+        v-model="field.value"
+        class="select select-bordered select-sm md:select-md"
+        :required="field.required"
+        :disabled="disabled"
+      >
+        <option value="">Sélectionner...</option>
+        <option
+          v-for="option in field.options"
+          :key="option"
+          :value="option"
+        >
+          {{ option }}
+        </option>
+      </select>
+      <label v-else-if="field.type === 'boolean'" class="flex items-center gap-3 cursor-pointer">
+        <input
+          v-model="field.value"
+          type="checkbox"
+          class="toggle toggle-primary toggle-sm md:toggle-md"
+          true-value="true"
+          false-value="false"
+          :disabled="disabled"
+        >
+        <span class="text-sm" :class="field.value === 'true' ? 'text-success font-medium' : 'text-base-content/60'">{{ field.value === 'true' ? 'Oui' : 'Non' }}</span>
+      </label>
+      <input
+        v-else-if="field.type === 'date'"
+        v-model="field.value"
+        type="date"
+        class="input input-bordered input-sm md:input-md"
+        :required="field.required"
+        :disabled="disabled"
+      >
+      <input
+        v-else
+        v-model="field.value"
+        type="text"
+        class="input input-bordered input-sm md:input-md"
+        :required="field.required"
+        :disabled="disabled"
+      >
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { fieldKey, type CustomFieldInput } from '~/shared/utils/customFieldFormUtils'
+
+defineProps<{
+  fields: CustomFieldInput[]
+  disabled?: boolean
+}>()
+</script>

app/components/common/DataTable.vue

@@ -63,13 +63,13 @@
 
     <!-- Table (always shown when there are filterable columns, even during loading or with 0 rows) -->
     <template v-else>
-      <div class="overflow-x-auto relative">
+      <div class="overflow-x-auto overflow-y-clip relative rounded-lg border border-base-300/40">
         <!-- Loading overlay (keeps table & filter inputs visible) -->
         <div
           v-if="loading && hasFilterableColumns"
-          class="absolute inset-0 bg-base-100/50 z-10 flex items-center justify-center"
+          class="absolute inset-0 bg-base-100/60 backdrop-blur-[1px] z-10 flex items-center justify-center"
         >
-          <span class="loading loading-spinner" aria-hidden="true" />
+          <span class="loading loading-spinner text-primary" aria-hidden="true" />
         </div>
         <table :class="['table table-sm md:table-md', tableClass]">
           <thead>
@@ -175,7 +175,7 @@
               </tr>
               <!-- Expanded row -->
               <tr v-if="expandable && isExpanded(row)">
-                <td :colspan="columns.length + 1" class="bg-base-200/50 p-4">
+                <td :colspan="columns.length + 1" class="bg-base-200/30 p-4 border-t border-base-200/80">
                   <slot name="row-expanded" :row="row" :index="idx" />
                 </td>
               </tr>

app/components/common/DocumentListInline.vue

@@ -0,0 +1,104 @@
+<template>
+  <div v-if="documents.length" class="space-y-2">
+    <div
+      v-for="document in documents"
+      :key="document.id || document.path || document.name"
+      class="flex items-center justify-between rounded border border-base-200 bg-base-100 px-3 py-2"
+    >
+      <div class="flex items-center gap-3 text-sm">
+        <div
+          class="flex-shrink-0 overflow-hidden rounded-md border border-base-200 bg-base-200/70 flex items-center justify-center"
+          :class="documentThumbnailClass(document)"
+        >
+          <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-6 w-6"
+            :class="documentIcon(document).colorClass"
+            aria-hidden="true"
+          />
+        </div>
+        <div>
+          <div class="font-medium">
+            {{ 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">
+        <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>
+        <button
+          v-if="canDelete"
+          type="button"
+          class="btn btn-error btn-xs"
+          :disabled="deleteDisabled"
+          @click="$emit('delete', document.id)"
+        >
+          Supprimer
+        </button>
+      </div>
+    </div>
+  </div>
+  <p v-else class="text-xs text-base-content/70">
+    {{ emptyText }}
+  </p>
+</template>
+
+<script setup lang="ts">
+import { canPreviewDocument, isImageDocument } from '~/utils/documentPreview'
+import {
+  documentIcon,
+  formatSize,
+  shouldInlinePdf,
+  documentPreviewSrc,
+  documentThumbnailClass,
+  downloadDocument,
+} from '~/shared/utils/documentDisplayUtils'
+
+import type { Document } from '~/composables/useDocuments'
+
+withDefaults(defineProps<{
+  documents: Document[]
+  canDelete?: boolean
+  deleteDisabled?: boolean
+  emptyText?: string
+}>(), {
+  canDelete: false,
+  deleteDisabled: false,
+  emptyText: 'Aucun document.',
+})
+
+defineEmits<{
+  (e: 'preview', document: Document): void
+  (e: 'delete', documentId: string): void
+}>()
+</script>

app/components/common/EntityHistorySection.vue

@@ -0,0 +1,97 @@
+<template>
+  <section class="space-y-3 rounded-lg border border-base-200 bg-base-200/40 p-4">
+    <header class="flex items-center justify-between gap-3">
+      <div>
+        <h2 class="font-semibold text-base-content">Historique</h2>
+        <p class="text-xs text-base-content/70">
+          Qui a changé quoi, et quand.
+        </p>
+      </div>
+      <span v-if="entries.length" class="badge badge-outline">
+        {{ entries.length }} entrée{{ entries.length > 1 ? 's' : '' }}
+      </span>
+    </header>
+
+    <div v-if="loading" class="flex items-center gap-2 text-sm text-base-content/70">
+      <span class="loading loading-spinner loading-sm" aria-hidden="true" />
+      Chargement de l'historique…
+    </div>
+
+    <div v-else-if="error" class="alert alert-warning">
+      <span>{{ error }}</span>
+    </div>
+
+    <p v-else-if="entries.length === 0" class="text-xs text-base-content/70">
+      Aucun changement enregistré pour le moment.
+    </p>
+
+    <ul v-else class="max-h-80 space-y-2 overflow-y-auto pr-1">
+      <li
+        v-for="entry in entries"
+        :key="entry.id"
+        class="rounded-md border border-base-200 bg-base-100 px-3 py-2"
+      >
+        <div class="flex flex-wrap items-center justify-between gap-2 text-xs text-base-content/70">
+          <span class="font-medium text-base-content">
+            {{ historyActionLabel(entry.action) }}
+          </span>
+          <span>{{ formatHistoryDate(entry.createdAt) }}</span>
+        </div>
+        <p class="mt-1 text-xs text-base-content/60">
+          Par {{ entry.actor?.label || 'Inconnu' }}
+        </p>
+
+        <ul
+          v-if="diffEntries(entry).length"
+          class="mt-2 space-y-1 text-xs"
+        >
+          <li
+            v-for="diffEntry in diffEntries(entry)"
+            :key="`${entry.id}-${diffEntry.field}`"
+            class="flex flex-col gap-0.5"
+          >
+            <span class="font-medium text-base-content/80">{{ diffEntry.label }}</span>
+            <span class="text-base-content/60">
+              {{ diffEntry.fromLabel }} → {{ diffEntry.toLabel }}
+            </span>
+          </li>
+        </ul>
+
+        <p
+          v-else-if="entry.snapshot?.name"
+          class="mt-2 text-xs text-base-content/70"
+        >
+          {{ entry.snapshot.name }}
+        </p>
+      </li>
+    </ul>
+  </section>
+</template>
+
+<script setup lang="ts">
+import {
+  historyActionLabel,
+  formatHistoryDate,
+  historyDiffEntries,
+  type HistoryDiffEntry,
+} from '~/shared/utils/historyDisplayUtils'
+
+interface HistoryEntry {
+  id: string
+  action: string
+  createdAt: string
+  actor?: { label?: string } | null
+  diff?: Record<string, { from?: unknown; to?: unknown }> | null
+  snapshot?: { name?: string } | null
+}
+
+const props = defineProps<{
+  entries: HistoryEntry[]
+  loading?: boolean
+  error?: string | null
+  fieldLabels: Record<string, string>
+}>()
+
+const diffEntries = (entry: HistoryEntry): HistoryDiffEntry[] =>
+  historyDiffEntries(entry, props.fieldLabels)
+</script>

app/components/common/RequirementListEditor.vue

@@ -9,11 +9,11 @@
         </button>
       </div>
 
-      <p class="text-sm text-gray-500">
+      <p class="text-sm text-base-content/50">
         {{ labels.description }}
       </p>
 
-      <div v-if="requirements.length === 0" class="text-sm text-gray-500 bg-base-200/60 rounded-md p-4">
+      <div v-if="requirements.length === 0" class="text-sm text-base-content/50 bg-base-200/60 rounded-md p-4">
         {{ labels.emptyState }}
       </div>
 

app/components/common/SearchSelect.vue

@@ -41,11 +41,11 @@
           v-if="openDropdown"
           class="absolute z-30 mt-1 w-full max-h-60 overflow-y-auto bg-base-100 border border-base-200 rounded-box shadow-lg"
         >
-          <div v-if="loading" class="flex items-center gap-2 px-3 py-2 text-xs text-gray-500">
+          <div v-if="loading" class="flex items-center gap-2 px-3 py-2 text-xs text-base-content/50">
             <span class="loading loading-spinner loading-xs" />
             Recherche en cours…
           </div>
-          <div v-else-if="displayedOptions.length === 0" class="px-3 py-2 text-xs text-gray-500">
+          <div v-else-if="displayedOptions.length === 0" class="px-3 py-2 text-xs text-base-content/50">
             {{ emptyText }}
           </div>
           <ul v-else class="flex flex-col">
@@ -69,7 +69,7 @@
                     {{ resolveLabel(option) }}
                   </slot>
                 </span>
-                <span v-if="resolveDescription(option)" class="text-xs text-gray-500">
+                <span v-if="resolveDescription(option)" class="text-xs text-base-content/50">
                   <slot name="option-description" :option="option">
                     {{ resolveDescription(option) }}
                   </slot>

app/components/common/StructureSkeletonPreview.vue

@@ -0,0 +1,162 @@
+<template>
+  <div class="space-y-3 rounded-lg border border-base-200 bg-base-200/40 p-4">
+    <div class="flex items-center justify-between gap-4">
+      <div>
+        <h2 class="font-semibold text-base-content">Squelette sélectionné</h2>
+        <p class="text-xs text-base-content/70">
+          {{ description }}
+        </p>
+      </div>
+      <span class="badge badge-outline">{{ previewBadge }}</span>
+    </div>
+
+    <details v-if="structure" class="collapse collapse-arrow bg-base-100">
+      <summary class="collapse-title text-sm font-medium">
+        Consulter le détail du squelette
+      </summary>
+      <div class="collapse-content text-sm text-base-content/80" :class="variant === 'component' ? 'space-y-4' : 'space-y-2'">
+        <!-- Custom fields: component variant (rich display) -->
+        <div v-if="variant === 'component' && customFields.length" class="space-y-2">
+          <h3 class="font-semibold text-sm text-base-content">Champs personnalisés</h3>
+          <ul class="space-y-2">
+            <li
+              v-for="field in customFields"
+              :key="field.customFieldId || field.id || field.name"
+              class="rounded bg-base-200/60 px-3 py-2"
+            >
+              <p class="font-medium text-sm text-base-content">
+                {{ field.name || field.key }}
+              </p>
+              <p class="text-xs text-base-content/70 mt-1">
+                Type : {{ field.type || 'text' }}<span v-if="field.required"> &bull; Obligatoire</span>
+                <span v-if="Array.isArray(field.options) && field.options.length">
+                  &bull; Options : {{ field.options.join(', ') }}
+                </span>
+                <span v-if="field.defaultValue">
+                  &bull; Défaut : {{ field.defaultValue }}
+                </span>
+              </p>
+            </li>
+          </ul>
+        </div>
+
+        <!-- Custom fields: piece variant (simple display) -->
+        <div v-if="variant === 'piece' && customFields.length" class="space-y-1">
+          <h3 class="font-semibold text-sm text-base-content">Champs personnalisés</h3>
+          <ul class="list-disc list-inside space-y-1">
+            <li v-for="field in customFields" :key="field.name">
+              <span class="font-medium">{{ field.name }}</span>
+              <span v-if="field.value !== undefined && field.value !== null"> : {{ field.value }}</span>
+            </li>
+          </ul>
+        </div>
+
+        <!-- Pieces: component variant only -->
+        <div v-if="variant === 'component' && pieces.length" class="space-y-2">
+          <h3 class="font-semibold text-sm text-base-content">Pièces imposées</h3>
+          <ul class="list-disc list-inside space-y-1">
+            <li
+              v-for="(piece, index) in pieces"
+              :key="piece.role || piece.typePieceId || piece.familyCode || index"
+            >
+              {{ resolvePieceLabelFn(piece) }}
+            </li>
+          </ul>
+        </div>
+
+        <!-- Products: component variant only -->
+        <div v-if="variant === 'component' && products.length" class="space-y-2">
+          <h3 class="font-semibold text-sm text-base-content">Produits imposés</h3>
+          <ul class="list-disc list-inside space-y-1">
+            <li
+              v-for="(product, index) in products"
+              :key="product.role || product.typeProductId || product.familyCode || index"
+            >
+              {{ resolveProductLabelFn(product) }}
+            </li>
+          </ul>
+        </div>
+
+        <!-- Subcomponents: component variant only -->
+        <div v-if="variant === 'component' && subcomponents.length" class="space-y-2">
+          <h3 class="font-semibold text-sm text-base-content">Sous-composants</h3>
+          <ul class="list-disc list-inside space-y-1">
+            <li
+              v-for="(subcomponent, index) in subcomponents"
+              :key="subcomponent.alias || subcomponent.typeComposantId || subcomponent.familyCode || index"
+            >
+              {{ resolveSubcomponentLabelFn(subcomponent) }}
+            </li>
+          </ul>
+        </div>
+
+        <!-- Empty state: component variant -->
+        <p
+          v-if="variant === 'component' && showEmptyState && !customFields.length && !pieces.length && !products.length && !subcomponents.length"
+          class="text-xs text-base-content/50"
+        >
+          Ce squelette ne définit pas encore de pièces, sous-composants ou valeurs par défaut.
+        </p>
+
+        <!-- Empty state: piece variant -->
+        <p v-if="variant === 'piece' && !customFields.length" class="text-xs text-base-content/70">
+          Ce squelette ne définit pas encore de champs personnalisés.
+        </p>
+      </div>
+    </details>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  getStructureCustomFields,
+  getStructurePieces,
+  getStructureProducts,
+  getStructureSubcomponents,
+} from '~/shared/utils/structureDisplayUtils'
+
+const props = withDefaults(defineProps<{
+  structure: Record<string, any> | null
+  description?: string
+  previewBadge: string
+  variant: 'component' | 'piece'
+  showEmptyState?: boolean
+  resolvePieceLabel?: (piece: Record<string, any>) => string
+  resolveProductLabel?: (product: Record<string, any>) => string
+  resolveSubcomponentLabel?: (subcomponent: Record<string, any>) => string
+}>(), {
+  description: '',
+  showEmptyState: false,
+  resolvePieceLabel: undefined,
+  resolveProductLabel: undefined,
+  resolveSubcomponentLabel: undefined,
+})
+
+const customFields = computed(() =>
+  getStructureCustomFields(props.structure),
+)
+
+const pieces = computed(() =>
+  props.variant === 'component' ? getStructurePieces(props.structure) : [],
+)
+
+const products = computed(() =>
+  props.variant === 'component' ? getStructureProducts(props.structure) : [],
+)
+
+const subcomponents = computed(() =>
+  props.variant === 'component' ? getStructureSubcomponents(props.structure) : [],
+)
+
+const fallbackLabel = (item: Record<string, any>) =>
+  item?.name || item?.label || item?.role || item?.alias || 'N/A'
+
+const resolvePieceLabelFn = (piece: Record<string, any>) =>
+  props.resolvePieceLabel ? props.resolvePieceLabel(piece) : fallbackLabel(piece)
+
+const resolveProductLabelFn = (product: Record<string, any>) =>
+  props.resolveProductLabel ? props.resolveProductLabel(product) : fallbackLabel(product)
+
+const resolveSubcomponentLabelFn = (subcomponent: Record<string, any>) =>
+  props.resolveSubcomponentLabel ? props.resolveSubcomponentLabel(subcomponent) : fallbackLabel(subcomponent)
+</script>

app/components/form/FieldPhone.vue

@@ -23,7 +23,7 @@
       @blur="onBlur"
       @focus="(event) => emit('focus', event)"
     />
-    <p v-if="help" :id="helpId" class="mt-2 text-xs text-gray-500">
+    <p v-if="help" :id="helpId" class="mt-2 text-xs text-base-content/50">
       {{ help }}
     </p>
     <p v-if="errorMessage" :id="errorId" class="mt-2 text-xs text-error">

app/components/home/AddMachineModal.vue

@@ -0,0 +1,108 @@
+<template>
+  <div v-if="open" class="modal modal-open">
+    <div class="modal-box max-w-2xl">
+      <h3 class="font-bold text-lg mb-4">
+        Ajouter une nouvelle machine
+      </h3>
+      <form @submit.prevent="handleSubmit">
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+          <div class="form-control">
+            <label class="label">
+              <span class="label-text">Nom de la machine</span>
+            </label>
+            <input
+              v-model="form.name"
+              type="text"
+              placeholder="Ex: Presse hydraulique #1"
+              class="input input-bordered"
+              :disabled="disabled"
+              required
+            >
+          </div>
+
+          <div class="form-control">
+            <label class="label">
+              <span class="label-text">Site</span>
+            </label>
+            <select
+              v-model="form.siteId"
+              class="select select-bordered"
+              :disabled="disabled"
+              required
+            >
+              <option value="">
+                Sélectionner un site
+              </option>
+              <option v-for="site in sites" :key="site.id" :value="site.id">
+                {{ site.name }}
+              </option>
+            </select>
+          </div>
+        </div>
+
+        <div class="form-control mb-4">
+          <label class="label">
+            <span class="label-text">Référence</span>
+          </label>
+          <input
+            v-model="form.reference"
+            type="text"
+            placeholder="Ex: PRESS-001"
+            class="input input-bordered"
+            :disabled="disabled"
+          >
+        </div>
+
+        <div class="modal-action">
+          <button
+            type="button"
+            class="btn btn-outline"
+            @click="$emit('close')"
+          >
+            Annuler
+          </button>
+          <button type="submit" class="btn btn-primary" :disabled="disabled">
+            Créer la machine
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, watch } from 'vue'
+
+const props = defineProps<{
+  open: boolean
+  sites: Array<{ id: string, name: string }>
+  disabled: boolean
+  preselectedSiteId?: string
+}>()
+
+const emit = defineEmits<{
+  close: []
+  create: [data: { name: string, siteId: string, reference: string }]
+}>()
+
+const form = reactive({
+  name: '',
+  siteId: '',
+  reference: '',
+})
+
+function handleSubmit() {
+  emit('create', { ...form })
+}
+
+watch(() => props.open, (isOpen) => {
+  if (isOpen && props.preselectedSiteId) {
+    form.siteId = props.preselectedSiteId
+  }
+  if (!isOpen) {
+    form.name = ''
+    form.siteId = ''
+    form.reference = ''
+  }
+})
+</script>

app/components/home/AddSiteModal.vue

@@ -0,0 +1,78 @@
+<template>
+  <div v-if="open" class="modal modal-open">
+    <div class="modal-box">
+      <h3 class="font-bold text-lg mb-4">
+        Ajouter un nouveau site
+      </h3>
+      <form class="space-y-4" @submit.prevent="handleSubmit">
+        <div class="form-control">
+          <label class="label">
+            <span class="label-text">Nom du site</span>
+          </label>
+          <input
+            v-model="form.name"
+            type="text"
+            placeholder="Ex: Usine de production"
+            class="input input-bordered"
+            :disabled="disabled"
+            required
+          >
+        </div>
+
+        <SiteContactFormFields :form="form" :disabled="disabled" />
+
+        <div class="modal-action">
+          <button
+            type="button"
+            class="btn btn-outline"
+            @click="$emit('close')"
+          >
+            Annuler
+          </button>
+          <button type="submit" class="btn btn-primary" :disabled="disabled">
+            Créer le site
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, watch } from 'vue'
+import SiteContactFormFields from '~/components/sites/SiteContactFormFields.vue'
+
+const props = defineProps<{
+  open: boolean
+  disabled: boolean
+}>()
+
+const emit = defineEmits<{
+  close: []
+  create: [data: { name: string, contactName: string, contactPhone: string, contactAddress: string, contactPostalCode: string, contactCity: string }]
+}>()
+
+const form = reactive({
+  name: '',
+  contactName: '',
+  contactPhone: '',
+  contactAddress: '',
+  contactPostalCode: '',
+  contactCity: '',
+})
+
+function handleSubmit() {
+  emit('create', { ...form })
+}
+
+watch(() => props.open, (isOpen) => {
+  if (!isOpen) {
+    form.name = ''
+    form.contactName = ''
+    form.contactPhone = ''
+    form.contactAddress = ''
+    form.contactPostalCode = ''
+    form.contactCity = ''
+  }
+})
+</script>

app/components/layout/AppNavbar.vue

@@ -1,18 +1,28 @@
 <template>
-  <div class="navbar bg-base-100 shadow-lg">
+  <div class="navbar navbar-glass sticky top-0 z-50 px-4 lg:px-6">
     <div class="navbar-start">
       <!-- Mobile hamburger menu -->
       <div class="dropdown">
-        <div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
+        <div tabindex="0" role="button" class="btn btn-ghost btn-sm lg:hidden">
           <IconLucideMenu class="w-5 h-5" aria-hidden="true" />
         </div>
         <ul
           tabindex="0"
-          class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52"
+          class="menu menu-sm dropdown-content mt-3 z-[1] p-3 shadow-lg bg-base-100 rounded-xl w-60 border border-base-300/50"
         >
           <li class="pt-1 pb-2 lg:hidden">
             <button
-              class="w-full flex items-center gap-2 rounded-md px-2 py-1 transition-colors text-base-content hover:bg-primary/10 hover:text-primary"
+              class="w-full flex items-center gap-2 rounded-lg px-3 py-2 transition-colors text-base-content/70 hover:bg-primary/8 hover:text-primary"
+              @click="toggleDarkMode"
+            >
+              <IconLucideSun v-if="isDark" class="w-4 h-4" aria-hidden="true" />
+              <IconLucideMoon v-else class="w-4 h-4" aria-hidden="true" />
+              {{ isDark ? 'Mode clair' : 'Mode sombre' }}
+            </button>
+          </li>
+          <li class="pt-1 pb-2 lg:hidden">
+            <button
+              class="w-full flex items-center gap-2 rounded-lg px-3 py-2 transition-colors text-base-content/70 hover:bg-primary/8 hover:text-primary"
               @click="$emit('open-settings')"
             >
               <IconLucideSettings class="w-4 h-4" aria-hidden="true" />
@@ -24,7 +34,7 @@
           <li v-for="link in simpleLinks" :key="link.to">
             <NuxtLink
               :to="link.to"
-              class="rounded-md px-2 py-1 transition-colors flex items-center gap-2"
+              class="rounded-lg px-3 py-2 transition-all flex items-center gap-2"
               :class="linkClass(link)"
             >
               <component :is="link.icon" v-if="link.icon" class="w-4 h-4" aria-hidden="true" />
@@ -40,7 +50,7 @@
           >
             <button
               type="button"
-              class="flex w-full items-center justify-between rounded-md px-2 py-1 text-left transition-colors"
+              class="flex w-full items-center justify-between rounded-lg px-3 py-2 text-left transition-all"
               :class="groupClass(group)"
               :aria-expanded="openDropdown === group.id + '-mobile'"
               @click="toggleDropdown(group.id + '-mobile')"
@@ -52,7 +62,7 @@
                 {{ group.label }}
               </span>
               <IconLucideChevronRight
-                class="h-4 w-4 transition-transform"
+                class="h-3.5 w-3.5 transition-transform duration-200"
                 :class="openDropdown === group.id + '-mobile' ? 'rotate-90' : ''"
                 aria-hidden="true"
               />
@@ -60,12 +70,12 @@
             <Transition name="nav-dropdown-mobile">
               <ul
                 v-if="openDropdown === group.id + '-mobile'"
-                class="mt-2 space-y-1 rounded-md border border-base-200 bg-base-100 p-2 shadow-sm overflow-hidden"
+                class="mt-1 space-y-0.5 rounded-lg bg-base-200/50 p-2 overflow-hidden"
               >
                 <li v-for="child in group.children" :key="child.to">
                   <NuxtLink
                     :to="child.to"
-                    class="rounded-md px-2 py-1 transition-colors block"
+                    class="rounded-md px-3 py-1.5 transition-colors block text-sm"
                     :class="childLinkClass(child)"
                   >
                     {{ child.label }}
@@ -81,30 +91,28 @@
       </div>
 
       <!-- Logo -->
-      <div class="flex items-center space-x-3">
-        <div class="avatar">
-          <div class="w-14">
-            <img
-              :src="logoSrc"
-              alt="Logo Malio"
-              class="h-full w-full object-contain"
-            />
-          </div>
+      <NuxtLink to="/" class="flex items-center gap-2.5 group">
+        <div class="w-9 h-9 rounded-lg overflow-hidden ring-1 ring-base-300/50 transition-all group-hover:ring-primary/30 group-hover:shadow-md">
+          <img
+            :src="logoSrc"
+            alt="Logo Malio"
+            class="h-full w-full object-contain"
+          />
         </div>
-        <NuxtLink to="/" class="btn btn-ghost text-xl">
+        <span class="text-lg font-bold tracking-tight text-base-content hidden sm:inline" style="font-family: var(--font-heading)">
           Inventory
-        </NuxtLink>
-      </div>
+        </span>
+      </NuxtLink>
     </div>
 
     <!-- Desktop navbar -->
     <div class="navbar-center hidden lg:flex">
-      <ul class="menu menu-horizontal px-1">
+      <ul class="menu menu-horizontal gap-0.5 px-1">
         <!-- Desktop: simple links -->
         <li v-for="link in simpleLinks" :key="link.to">
           <NuxtLink
             :to="link.to"
-            class="transition-colors px-3 py-2 rounded-md flex items-center gap-1.5"
+            class="transition-all px-3 py-2 rounded-lg flex items-center gap-1.5 text-sm font-medium"
             :class="linkClass(link)"
           >
             <component :is="link.icon" v-if="link.icon" class="w-4 h-4" aria-hidden="true" />
@@ -124,7 +132,7 @@
         >
           <button
             type="button"
-            class="inline-flex items-center gap-1.5 rounded-md px-3 py-2 transition-colors"
+            class="inline-flex items-center gap-1.5 rounded-lg px-3 py-2 transition-all text-sm font-medium"
             :class="groupClass(group)"
             :aria-expanded="openDropdown === group.id + '-desktop'"
             @click="toggleDropdown(group.id + '-desktop')"
@@ -133,21 +141,21 @@
           >
             <component :is="group.icon" v-if="group.icon" class="w-4 h-4" aria-hidden="true" />
             {{ group.label }}
-            <IconLucideChevronRight
-              class="h-4 w-4 transition-transform"
-              :class="openDropdown === group.id + '-desktop' ? 'rotate-90' : ''"
+            <IconLucideChevronDown
+              class="h-3.5 w-3.5 transition-transform duration-200"
+              :class="openDropdown === group.id + '-desktop' ? 'rotate-180' : ''"
               aria-hidden="true"
             />
           </button>
           <Transition name="nav-dropdown-desktop">
             <ul
               v-if="openDropdown === group.id + '-desktop'"
-              class="absolute left-0 top-full mt-2 w-64 rounded-lg border border-base-200 bg-base-100 p-2 shadow-lg z-50"
+              class="absolute left-0 top-full mt-1.5 w-56 rounded-xl border border-base-300/50 bg-base-100 p-1.5 shadow-lg shadow-base-content/5 z-50"
             >
               <li v-for="child in group.children" :key="child.to">
                 <NuxtLink
                   :to="child.to"
-                  class="block rounded-md px-2 py-1 transition-colors"
+                  class="block rounded-lg px-3 py-2 transition-all text-sm"
                   :class="childLinkClass(child)"
                 >
                   {{ child.label }}
@@ -164,13 +172,21 @@
 
     <!-- Navbar end -->
     <div class="navbar-end">
-      <div class="flex items-center gap-2">
+      <div class="flex items-center gap-1.5">
         <button
-          class="btn btn-ghost btn-circle hidden lg:inline-flex"
+          class="btn btn-ghost btn-sm btn-circle hidden lg:inline-flex text-base-content/50 hover:text-base-content"
+          :title="isDark ? 'Mode clair' : 'Mode sombre'"
+          @click="toggleDarkMode"
+        >
+          <IconLucideSun v-if="isDark" class="w-4 h-4" aria-hidden="true" />
+          <IconLucideMoon v-else class="w-4 h-4" aria-hidden="true" />
+        </button>
+        <button
+          class="btn btn-ghost btn-sm btn-circle hidden lg:inline-flex text-base-content/50 hover:text-base-content"
           title="Paramètres d'affichage"
           @click="$emit('open-settings')"
         >
-          <IconLucideSettings class="w-5 h-5" aria-hidden="true" />
+          <IconLucideSettings class="w-4 h-4" aria-hidden="true" />
         </button>
 
         <ClientOnly>
@@ -178,7 +194,7 @@
             <div
               tabindex="0"
               role="button"
-              class="btn btn-ghost btn-circle avatar placeholder indicator"
+              class="indicator cursor-pointer"
             >
               <span
                 v-if="unresolvedCount > 0"
@@ -187,47 +203,49 @@
                 {{ unresolvedCount }}
               </span>
               <div
-                class="bg-secondary text-secondary-content rounded-full w-10 h-10 grid place-items-center"
+                class="bg-primary text-primary-content rounded-full w-8 h-8 flex items-center justify-center"
               >
-                <span
-                  class="flex h-full w-full items-center justify-center text-sm font-semibold leading-none tracking-tight"
-                >
+                <span class="text-xs font-semibold">
                   {{ activeProfileInitials }}
                 </span>
               </div>
             </div>
             <ul
               tabindex="0"
-              class="menu dropdown-content mt-3 p-2 shadow bg-base-100 rounded-box w-64"
+              class="menu dropdown-content mt-3 p-2 shadow-lg bg-base-100 rounded-xl w-60 border border-base-300/50"
             >
-              <li class="px-2 py-1 text-sm text-base-content/70">
-                Connecté en tant que<br />
-                <span class="font-semibold text-base-content">{{ activeProfileLabel }}</span>
-                <span class="badge badge-sm" :class="roleBadgeClass">{{ roleLabel }}</span>
+              <li class="px-3 py-2">
+                <div class="flex flex-col gap-1 pointer-events-none">
+                  <span class="text-xs text-base-content/50">Connecté en tant que</span>
+                  <span class="font-semibold text-sm text-base-content">{{ activeProfileLabel }}</span>
+                  <span class="badge badge-sm" :class="roleBadgeClass">{{ roleLabel }}</span>
+                </div>
               </li>
+              <div class="divider my-0.5 px-2" />
               <li v-if="isAdmin">
-                <NuxtLink to="/admin" class="justify-between">
+                <NuxtLink to="/admin" class="rounded-lg justify-between text-sm">
                   Administration
-                  <IconLucideChevronRight class="w-4 h-4" aria-hidden="true" />
+                  <IconLucideChevronRight class="w-3.5 h-3.5 text-base-content/30" aria-hidden="true" />
                 </NuxtLink>
               </li>
               <li>
-                <NuxtLink to="/comments" class="justify-between">
+                <NuxtLink to="/comments" class="rounded-lg justify-between text-sm">
                   Commentaires
                   <span v-if="unresolvedCount > 0" class="badge badge-warning badge-xs">
                     {{ unresolvedCount }}
                   </span>
-                  <IconLucideChevronRight v-else class="w-4 h-4" aria-hidden="true" />
+                  <IconLucideChevronRight v-else class="w-3.5 h-3.5 text-base-content/30" aria-hidden="true" />
                 </NuxtLink>
               </li>
+              <div class="divider my-0.5 px-2" />
               <li>
                 <button
                   type="button"
-                  class="text-error justify-between"
+                  class="rounded-lg text-error/80 hover:text-error hover:bg-error/5 justify-between text-sm"
                   @click="$emit('logout')"
                 >
                   Déconnexion
-                  <IconLucideLogOut class="w-4 h-4" aria-hidden="true" />
+                  <IconLucideLogOut class="w-3.5 h-3.5" aria-hidden="true" />
                 </button>
               </li>
             </ul>
@@ -248,6 +266,7 @@ import { useComments } from '~/composables/useComments'
 import IconLucideMenu from '~icons/lucide/menu'
 import IconLucideSettings from '~icons/lucide/settings'
 import IconLucideChevronRight from '~icons/lucide/chevron-right'
+import IconLucideChevronDown from '~icons/lucide/chevron-down'
 import IconLucideLogOut from '~icons/lucide/log-out'
 import IconLucideLayoutDashboard from '~icons/lucide/layout-dashboard'
 import IconLucideFactory from '~icons/lucide/factory'
@@ -256,6 +275,8 @@ import IconLucideCpu from '~icons/lucide/cpu'
 import IconLucidePuzzle from '~icons/lucide/puzzle'
 import IconLucidePackage from '~icons/lucide/package'
 import IconLucideLink from '~icons/lucide/link'
+import IconLucideSun from '~icons/lucide/sun'
+import IconLucideMoon from '~icons/lucide/moon'
 import logoSrc from '~/assets/LOGO_CARRE_BLANC.png'
 
 defineEmits<{
@@ -333,6 +354,7 @@ const { openDropdown, setDropdown, scheduleDropdownClose, toggleDropdown } = use
 const { activeProfile } = useProfileSession()
 const { isAdmin, canEdit } = usePermissions()
 const { fetchUnresolvedCount } = useComments()
+const { isDark, toggle: toggleDarkMode, init: initDarkMode } = useDarkMode()
 
 const unresolvedCount = ref(0)
 let pollInterval: ReturnType<typeof setInterval> | null = null
@@ -343,6 +365,7 @@ const refreshUnresolvedCount = async () => {
 }
 
 onMounted(() => {
+  initDarkMode()
   refreshUnresolvedCount()
   pollInterval = setInterval(refreshUnresolvedCount, 60_000)
 })
@@ -365,19 +388,19 @@ const isGroupActive = (group: NavGroup) => {
 const linkClass = (link: NavLink) => {
   return isActive(link.to)
     ? 'bg-primary text-primary-content font-semibold shadow-sm'
-    : 'text-base-content hover:bg-primary/10 hover:text-primary'
+    : 'text-base-content/70 hover:bg-base-content/5 hover:text-base-content'
 }
 
 const groupClass = (group: NavGroup) => {
   return isGroupActive(group)
     ? 'bg-primary text-primary-content font-semibold shadow-sm'
-    : 'text-base-content hover:bg-primary/10 hover:text-primary'
+    : 'text-base-content/70 hover:bg-base-content/5 hover:text-base-content'
 }
 
 const childLinkClass = (child: NavLink) => {
   return isActive(child.to)
     ? 'bg-primary/10 text-primary font-semibold'
-    : 'text-base-content hover:bg-primary/10 hover:text-primary'
+    : 'text-base-content/70 hover:bg-base-content/5 hover:text-base-content'
 }
 
 const roleLabel = computed(() => {
@@ -418,12 +441,12 @@ const activeProfileInitials = computed(() => {
 .nav-dropdown-desktop-enter-from,
 .nav-dropdown-desktop-leave-to {
   opacity: 0;
-  transform: translateY(0.25rem);
+  transform: translateY(4px) scale(0.98);
 }
 .nav-dropdown-desktop-enter-to,
 .nav-dropdown-desktop-leave-from {
   opacity: 1;
-  transform: translateY(0);
+  transform: translateY(0) scale(1);
 }
 
 .nav-dropdown-mobile-enter-active,

app/components/machine/MachineComponentsCard.vue

@@ -1,33 +1,23 @@
 <template>
-  <div class="card bg-base-100 shadow-lg">
+  <div class="card bg-base-100 shadow-sm">
     <div class="card-body">
       <div class="flex justify-between items-center mb-4">
         <h2 class="card-title">Composants</h2>
-        <div class="flex items-center gap-2">
-          <button
-            v-if="isEditMode"
-            type="button"
-            class="btn btn-sm md:btn-md btn-primary"
-            @click="$emit('add-component')"
-          >
-            Ajouter un composant
-          </button>
-          <button
-            type="button"
-            class="btn btn-ghost btn-sm gap-2"
-            @click="$emit('toggle-collapse')"
-            :title="collapsed ? 'Déplier tous les composants' : 'Replier tous les composants'"
-          >
-            <IconLucideChevronRight
-              class="w-5 h-5 transition-transform"
-              :class="collapsed ? 'rotate-0' : 'rotate-90'"
-              aria-hidden="true"
-            />
-            <span class="text-sm">
-              {{ collapsed ? 'Tout déplier' : 'Tout replier' }}
-            </span>
-          </button>
-        </div>
+        <button
+          type="button"
+          class="btn btn-ghost btn-sm gap-2"
+          @click="$emit('toggle-collapse')"
+          :title="collapsed ? 'Déplier tous les composants' : 'Replier tous les composants'"
+        >
+          <IconLucideChevronRight
+            class="w-5 h-5 transition-transform"
+            :class="collapsed ? 'rotate-0' : 'rotate-90'"
+            aria-hidden="true"
+          />
+          <span class="text-sm">
+            {{ collapsed ? 'Tout déplier' : 'Tout replier' }}
+          </span>
+        </button>
       </div>
 
       <div v-if="components.length === 0" class="text-sm text-gray-500 py-4">
@@ -35,25 +25,27 @@
       </div>
 
       <div v-else class="space-y-2">
-        <div v-for="component in components" :key="component.id" class="relative">
-          <button
-            v-if="isEditMode"
-            type="button"
-            class="btn btn-error btn-xs absolute top-2 right-2 z-10"
-            title="Supprimer ce composant"
-            @click="$emit('remove-component', component.linkId || component.id)"
-          >
-            Supprimer
-          </button>
+        <div v-for="component in components" :key="component.id">
           <ComponentHierarchy
             :components="[component]"
             :is-edit-mode="false"
+            :show-delete="isEditMode"
             :collapse-all="collapsed"
             :toggle-token="collapseToggleToken"
             @edit-piece="$emit('edit-piece', $event)"
+            @delete="$emit('remove-component', component.linkId || component.id)"
           />
         </div>
       </div>
+
+      <button
+        v-if="isEditMode"
+        type="button"
+        class="btn btn-sm md:btn-md btn-primary"
+        @click="$emit('add-component')"
+      >
+        Ajouter un composant
+      </button>
     </div>
   </div>
 </template>

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-ghost btn-xs btn-square text-error"
+            @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/MachineCustomFieldsCard.vue

@@ -0,0 +1,221 @@
+<template>
+  <div class="card bg-base-100 shadow-lg">
+    <div class="card-body space-y-4">
+      <div class="flex items-center justify-between">
+        <div>
+          <h2 class="card-title">Champs personnalisés</h2>
+          <p class="text-xs text-gray-500">
+            Champs personnalisés propres à cette machine.
+          </p>
+        </div>
+        <span v-if="visibleCustomFields.length" class="badge badge-outline">
+          {{ visibleCustomFields.length }} champ{{ visibleCustomFields.length > 1 ? 's' : '' }}
+        </span>
+      </div>
+
+      <!-- View mode: display values -->
+      <template v-if="!isEditMode">
+        <div v-if="visibleCustomFields.length" class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div
+            v-for="field in visibleCustomFields"
+            :key="field.customFieldValueId || field.id || field.name"
+            class="form-control"
+          >
+            <label class="label">
+              <span class="label-text text-sm">{{ field.name }}</span>
+            </label>
+            <div class="input input-bordered input-sm bg-base-200">
+              {{ formatCustomFieldValue(field) }}
+            </div>
+          </div>
+        </div>
+        <p v-else class="text-xs text-gray-500">
+          Aucun champ personnalisé défini pour cette machine.
+        </p>
+      </template>
+
+      <!-- Edit mode: definition management + value editing -->
+      <template v-else>
+        <p v-if="!customFields.length" class="text-xs text-gray-500">
+          Aucun champ personnalisé défini.
+        </p>
+
+        <div v-else class="space-y-3">
+          <div
+            v-for="(field, index) in customFields"
+            :key="field.id || field.name || index"
+            class="border border-base-200 rounded-md p-3 space-y-2"
+          >
+            <div class="flex items-start justify-between gap-2">
+              <div class="flex-1 space-y-2">
+                <!-- Definition fields -->
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-2">
+                  <input
+                    :value="field.name"
+                    type="text"
+                    class="input input-bordered input-sm"
+                    placeholder="Nom du champ"
+                    @blur="handleDefinitionUpdate(field, 'name', ($event.target as HTMLInputElement).value)"
+                  />
+                  <select
+                    :value="field.type || 'text'"
+                    class="select select-bordered select-sm"
+                    @change="handleDefinitionUpdate(field, 'type', ($event.target as HTMLSelectElement).value)"
+                  >
+                    <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 class="flex items-center gap-2 text-sm">
+                    <input
+                      type="checkbox"
+                      class="checkbox checkbox-sm"
+                      :checked="!!field.required"
+                      @change="handleDefinitionUpdate(field, 'required', ($event.target as HTMLInputElement).checked)"
+                    />
+                    Obligatoire
+                  </div>
+                </div>
+
+                <!-- Options for select type -->
+                <textarea
+                  v-if="(field.type || 'text') === 'select'"
+                  :value="field.optionsText || (Array.isArray(field.options) ? field.options.join('\n') : '')"
+                  class="textarea textarea-bordered textarea-sm h-20 w-full"
+                  placeholder="Option 1&#10;Option 2"
+                  @blur="handleOptionsUpdate(field, ($event.target as HTMLTextAreaElement).value)"
+                ></textarea>
+
+                <!-- Value editing -->
+                <div class="pt-1 border-t border-base-200">
+                  <label class="label py-0">
+                    <span class="label-text text-xs text-base-content/60">Valeur</span>
+                  </label>
+                  <input
+                    v-if="!field.type || field.type === 'text'"
+                    :value="field.value ?? ''"
+                    type="text"
+                    class="input input-bordered input-sm w-full"
+                    placeholder="Valeur..."
+                    @input="$emit('set-custom-field-value', field, ($event.target as HTMLInputElement).value)"
+                    @blur="$emit('update-custom-field', field)"
+                  />
+                  <input
+                    v-else-if="field.type === 'number'"
+                    :value="field.value ?? ''"
+                    type="number"
+                    class="input input-bordered input-sm w-full"
+                    placeholder="Valeur..."
+                    @input="$emit('set-custom-field-value', field, ($event.target as HTMLInputElement).value)"
+                    @blur="$emit('update-custom-field', field)"
+                  />
+                  <select
+                    v-else-if="field.type === 'select'"
+                    :value="field.value ?? ''"
+                    class="select select-bordered select-sm w-full"
+                    @change="onSelectChange(field, ($event.target as HTMLSelectElement).value)"
+                  >
+                    <option value="">Sélectionner...</option>
+                    <option
+                      v-for="option in field.options"
+                      :key="option"
+                      :value="option"
+                    >
+                      {{ option }}
+                    </option>
+                  </select>
+                  <label
+                    v-else-if="field.type === 'boolean'"
+                    class="flex items-center gap-3 cursor-pointer py-1"
+                  >
+                    <input
+                      type="checkbox"
+                      class="toggle toggle-primary toggle-sm"
+                      :checked="String(field.value).toLowerCase() === 'true'"
+                      @change="onBooleanChange(field, ($event.target as HTMLInputElement).checked)"
+                    >
+                    <span
+                      class="text-sm"
+                      :class="String(field.value).toLowerCase() === 'true' ? 'text-success font-medium' : 'text-base-content/60'"
+                    >
+                      {{ String(field.value).toLowerCase() === 'true' ? 'Oui' : 'Non' }}
+                    </span>
+                  </label>
+                  <input
+                    v-else-if="field.type === 'date'"
+                    :value="field.value ?? ''"
+                    type="date"
+                    class="input input-bordered input-sm w-full"
+                    @input="$emit('set-custom-field-value', field, ($event.target as HTMLInputElement).value)"
+                    @blur="$emit('update-custom-field', field)"
+                  />
+                </div>
+              </div>
+
+              <button
+                type="button"
+                class="btn btn-ghost btn-sm btn-square flex-shrink-0 text-error"
+                title="Supprimer ce champ"
+                @click="$emit('delete-field', field.id || field.customFieldId)"
+              >
+                <IconLucideTrash class="w-4 h-4" aria-hidden="true" />
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <button
+          type="button"
+          class="btn btn-sm md:btn-md btn-primary"
+          @click="$emit('add-field')"
+        >
+          Ajouter un champ personnalisé
+        </button>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import IconLucideTrash from '~icons/lucide/trash'
+import { formatCustomFieldValue } from '~/shared/utils/customFieldUtils'
+
+defineProps<{
+  customFields: any[]
+  visibleCustomFields: any[]
+  isEditMode: boolean
+}>()
+
+const emit = defineEmits<{
+  'set-custom-field-value': [field: any, value: unknown]
+  'update-custom-field': [field: any]
+  'add-field': []
+  'delete-field': [fieldId: string]
+  'update-field-definition': [fieldId: string, data: Record<string, unknown>]
+}>()
+
+const handleDefinitionUpdate = (field: any, key: string, value: unknown) => {
+  const fieldId = field.id || field.customFieldId
+  if (!fieldId) return
+  emit('update-field-definition', fieldId, { ...field, [key]: value })
+}
+
+const handleOptionsUpdate = (field: any, raw: string) => {
+  const fieldId = field.id || field.customFieldId
+  if (!fieldId) return
+  const options = raw.split('\n').map((o: string) => o.trim()).filter((o: string) => o.length > 0)
+  emit('update-field-definition', fieldId, { ...field, options })
+}
+
+const onSelectChange = (field: any, value: string) => {
+  emit('set-custom-field-value', field, value)
+  emit('update-custom-field', field)
+}
+
+const onBooleanChange = (field: any, checked: boolean) => {
+  emit('set-custom-field-value', field, checked ? 'true' : 'false')
+  emit('update-custom-field', field)
+}
+</script>

app/components/machine/MachineDocumentsCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="card bg-base-100 shadow-lg mt-6">
+  <div class="card bg-base-100 shadow-sm mt-6">
     <div class="card-body space-y-4">
       <div class="flex items-center justify-between">
         <div>
@@ -74,7 +74,7 @@
             <button
               v-if="isEditMode"
               type="button"
-              class="btn btn-error btn-xs"
+              class="btn btn-ghost btn-xs text-error"
               :disabled="uploading"
               @click="$emit('remove', doc.id)"
             >

app/components/machine/MachineInfoCard.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="card bg-base-100 shadow-lg">
+  <div class="card bg-base-100 shadow-sm">
     <div class="card-body">
-      <h2 class="card-title">Informations de la machine</h2>
+      <h2 class="card-title tracking-tight">Informations de la machine</h2>
       <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
         <div class="form-control">
           <label class="label">
@@ -20,6 +20,29 @@
             {{ machineName }}
           </div>
         </div>
+        <div class="form-control">
+          <label class="label">
+            <span class="label-text">Site</span>
+          </label>
+          <select
+            v-if="isEditMode"
+            :value="machineSiteId"
+            class="select select-bordered"
+            @change="$emit('update:machine-site-id', ($event.target as HTMLSelectElement).value); $emit('blur-field')"
+          >
+            <option value="">Sélectionner un site</option>
+            <option
+              v-for="site in sites"
+              :key="site.id"
+              :value="site.id"
+            >
+              {{ site.name }}
+            </option>
+          </select>
+          <div v-else class="input input-bordered bg-base-200">
+            {{ machineSiteName || 'Non défini' }}
+          </div>
+        </div>
         <div v-if="isEditMode || machineReference" class="form-control">
           <label class="label">
             <span class="label-text">Référence</span>
@@ -49,30 +72,30 @@
             placeholder="Rechercher un ou plusieurs fournisseurs..."
             @update:modelValue="$emit('update:constructeur-ids', $event)"
           />
-          <div v-else class="input input-bordered bg-base-200">
-            <div v-if="machineConstructeursDisplay.length" class="space-y-1">
-              <div
+          <div v-else class="border border-base-300 rounded-btn bg-base-200 px-4 py-2 min-h-12 flex items-center">
+            <div v-if="machineConstructeursDisplay.length" class="flex flex-wrap gap-2">
+              <span
                 v-for="constructeur in machineConstructeursDisplay"
                 :key="constructeur.id"
-                class="flex flex-col"
+                class="badge badge-ghost gap-1"
               >
-                <span class="font-medium">{{ constructeur.name }}</span>
+                {{ constructeur.name }}
                 <span
                   v-if="formatConstructeurContactSummary(constructeur)"
-                  class="text-xs text-gray-500"
+                  class="text-xs opacity-60"
                 >
-                  {{ formatConstructeurContactSummary(constructeur) }}
+                  · {{ formatConstructeurContactSummary(constructeur) }}
                 </span>
-              </div>
+              </span>
             </div>
-            <span v-else class="font-medium">Non défini</span>
+            <span v-else class="text-base-content/50">Non défini</span>
           </div>
         </div>
       </div>
 
       <!-- Champs personnalisés -->
-      <div v-if="visibleCustomFields.length" class="mt-6 pt-4 border-t border-gray-200">
-        <h4 class="font-semibold text-gray-700 mb-3">Champs personnalisés de la machine</h4>
+      <div v-if="visibleCustomFields.length" class="mt-6 pt-4 border-t border-base-200">
+        <h4 class="font-semibold text-base-content/80 mb-3">Champs personnalisés de la machine</h4>
         <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
           <div
             v-for="field in visibleCustomFields"
@@ -151,34 +174,69 @@
           </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
+  machineSiteId: string
+  machineSiteName: string
+  sites: any[]
   machineConstructeurIds: string[]
   machineConstructeursDisplay: any[]
   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:machine-site-id': [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/machine/MachinePiecesCard.vue

@@ -1,33 +1,23 @@
 <template>
-  <div class="card bg-base-100 shadow-lg">
+  <div class="card bg-base-100 shadow-sm">
     <div class="card-body">
       <div class="flex justify-between items-center mb-4">
         <h2 class="card-title">Pièces de la machine</h2>
-        <div class="flex items-center gap-2">
-          <button
-            v-if="isEditMode"
-            type="button"
-            class="btn btn-sm md:btn-md btn-primary"
-            @click="$emit('add-piece')"
-          >
-            Ajouter une pièce
-          </button>
-          <button
-            type="button"
-            class="btn btn-ghost btn-sm gap-2"
-            @click="$emit('toggle-collapse')"
-            :title="collapsed ? 'Déplier toutes les pièces' : 'Replier toutes les pièces'"
-          >
-            <IconLucideChevronRight
-              class="w-5 h-5 transition-transform"
-              :class="collapsed ? 'rotate-0' : 'rotate-90'"
-              aria-hidden="true"
-            />
-            <span class="text-sm">
-              {{ collapsed ? 'Tout déplier' : 'Tout replier' }}
-            </span>
-          </button>
-        </div>
+        <button
+          type="button"
+          class="btn btn-ghost btn-sm gap-2"
+          @click="$emit('toggle-collapse')"
+          :title="collapsed ? 'Déplier toutes les pièces' : 'Replier toutes les pièces'"
+        >
+          <IconLucideChevronRight
+            class="w-5 h-5 transition-transform"
+            :class="collapsed ? 'rotate-0' : 'rotate-90'"
+            aria-hidden="true"
+          />
+          <span class="text-sm">
+            {{ collapsed ? 'Tout déplier' : 'Tout replier' }}
+          </span>
+        </button>
       </div>
 
       <div v-if="pieces.length === 0" class="text-sm text-gray-500 py-4">
@@ -35,25 +25,28 @@
       </div>
 
       <div v-else class="space-y-2">
-        <div v-for="piece in pieces" :key="piece.id" class="relative">
-          <button
-            v-if="isEditMode"
-            type="button"
-            class="btn btn-error btn-xs absolute top-2 right-2 z-10"
-            title="Supprimer cette pièce"
-            @click="$emit('remove-piece', piece.linkId || piece.id)"
-          >
-            Supprimer
-          </button>
+        <div v-for="piece in pieces" :key="piece.id">
           <PieceItem
             :piece="piece"
-            :is-edit-mode="false"
+            :is-edit-mode="isEditMode"
+            :show-delete="isEditMode"
             :collapse-all="collapsed"
             :toggle-token="collapseToggleToken"
+            @update="$emit('update-piece', $event)"
             @edit="$emit('edit-piece', $event)"
+            @delete="$emit('remove-piece', piece.linkId || piece.id)"
           />
         </div>
       </div>
+
+      <button
+        v-if="isEditMode"
+        type="button"
+        class="btn btn-sm md:btn-md btn-primary"
+        @click="$emit('add-piece')"
+      >
+        Ajouter une pièce
+      </button>
     </div>
   </div>
 </template>
@@ -70,6 +63,7 @@ defineProps<{
 
 defineEmits<{
   'toggle-collapse': []
+  'update-piece': [piece: any]
   'edit-piece': [piece: any]
   'add-piece': []
   'remove-piece': [linkId: string]

app/components/machine/MachineProductsCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="card bg-base-100 shadow-lg">
+  <div class="card bg-base-100 shadow-sm">
     <div class="card-body space-y-4">
       <DocumentPreviewModal
         :document="previewDocument"
@@ -15,43 +15,35 @@
             Produits sélectionnés directement pour cette machine.
           </p>
         </div>
-        <div class="flex items-center gap-2">
-          <button
-            v-if="isEditMode"
-            type="button"
-            class="btn btn-sm md:btn-md btn-primary"
-            @click="$emit('add-product')"
-          >
-            Ajouter un produit
-          </button>
-          <span class="badge badge-outline" v-if="products.length">
-            {{ products.length }} produit{{ products.length > 1 ? 's' : '' }}
-          </span>
-        </div>
+        <span class="badge badge-outline" v-if="products.length">
+          {{ products.length }} produit{{ products.length > 1 ? 's' : '' }}
+        </span>
       </div>
 
       <div v-if="products.length" class="space-y-3">
         <div
           v-for="product in products"
           :key="product.id || product.name"
-          class="rounded border border-base-200 bg-base-200/60 p-3 text-sm space-y-2 relative"
+          class="rounded border border-base-200 bg-base-200/60 p-3 text-sm space-y-2"
         >
-          <button
-            v-if="isEditMode"
-            type="button"
-            class="btn btn-error btn-xs absolute top-2 right-2"
-            title="Supprimer ce produit"
-            @click="$emit('remove-product', (product.linkId || product.id) as string)"
-          >
-            Supprimer
-          </button>
           <div class="flex items-center justify-between flex-wrap gap-2">
             <p class="font-semibold text-base-content">
               {{ product.name }}
             </p>
-            <span v-if="product.groupLabel" class="badge badge-ghost badge-sm">
-              {{ product.groupLabel }}
-            </span>
+            <div class="flex items-center gap-2">
+              <span v-if="product.groupLabel" class="badge badge-ghost badge-sm">
+                {{ product.groupLabel }}
+              </span>
+              <button
+                v-if="isEditMode"
+                type="button"
+                class="btn btn-ghost btn-xs text-error"
+                title="Supprimer ce produit"
+                @click="$emit('remove-product', (product.linkId || product.id) as string)"
+              >
+                Supprimer
+              </button>
+            </div>
           </div>
           <p v-if="product.reference" class="text-xs text-base-content/70">
             <span class="font-medium">Référence :</span>
@@ -117,6 +109,15 @@
       <p v-else class="text-xs text-gray-500">
         Aucun produit n'a été associé directement à cette machine.
       </p>
+
+      <button
+        v-if="isEditMode"
+        type="button"
+        class="btn btn-sm md:btn-md btn-primary"
+        @click="$emit('add-product')"
+      >
+        Ajouter un produit
+      </button>
     </div>
   </div>
 </template>

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/ModelTypeForm.vue

@@ -15,8 +15,7 @@
           minlength="2"
           maxlength="120"
           required
-          :disabled="restrictedMode"
-        />
+          />
         <p v-if="errors.name" class="mt-1 text-sm text-error">{{ errors.name }}</p>
       </div>
       <div>
@@ -48,7 +47,6 @@
           rows="4"
           name="notes"
           maxlength="2000"
-          :disabled="restrictedMode"
         ></textarea>
         <p class="mt-1 text-xs text-base-content/70">Saisissez des informations complémentaires (facultatif).</p>
       </div>
@@ -83,7 +81,6 @@
             v-model="componentStructure"
             :allow-subcomponents="allowComponentSubcomponents"
             :max-subcomponent-depth="componentSubcomponentMaxDepth"
-            :restricted-mode="restrictedMode"
           />
         </div>
 
@@ -95,7 +92,7 @@
             Aperçu :
             <span class="font-medium text-base-content">{{ pieceStructurePreview }}</span>
           </p>
-          <PieceModelStructureEditor v-model="pieceStructure" :restricted-mode="restrictedMode" />
+          <PieceModelStructureEditor v-model="pieceStructure" />
         </div>
 
         <div
@@ -106,30 +103,11 @@
             Aperçu :
             <span class="font-medium text-base-content">{{ productStructurePreview }}</span>
           </p>
-          <PieceModelStructureEditor v-model="productStructure" :restricted-mode="restrictedMode" />
+          <PieceModelStructureEditor v-model="productStructure" />
         </div>
       </template>
     </section>
 
-    <div
-      v-if="restrictedMode && restrictedModeMessage"
-      class="alert alert-info"
-      role="status"
-      aria-live="polite"
-    >
-      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
-      <span>{{ restrictedModeMessage }}</span>
-    </div>
-
-    <div
-      v-if="disableSubmit"
-      class="alert alert-warning"
-      role="alert"
-      aria-live="polite"
-    >
-      <span>{{ disableSubmitMessage }}</span>
-    </div>
-
     <footer class="flex flex-col gap-3 border-t border-base-300 pt-4 sm:flex-row sm:justify-end">
       <button type="button" class="btn btn-ghost" :disabled="saving" @click="emit('cancel')">
         Annuler
@@ -172,10 +150,6 @@ const props = withDefaults(defineProps<{
   structureLoading?: boolean
   allowComponentSubcomponents?: boolean
   componentSubcomponentMaxDepth?: number
-  disableSubmit?: boolean
-  disableSubmitMessage?: string
-  restrictedMode?: boolean
-  restrictedModeMessage?: string
   readonly?: boolean
 }>(), {
   initialData: null,
@@ -184,10 +158,6 @@ const props = withDefaults(defineProps<{
   structureLoading: false,
   allowComponentSubcomponents: true,
   componentSubcomponentMaxDepth: 1,
-  disableSubmit: false,
-  disableSubmitMessage: '',
-  restrictedMode: false,
-  restrictedModeMessage: '',
   readonly: false,
 })
 
@@ -205,19 +175,7 @@ const componentSubcomponentMaxDepth = computed(() =>
     ? props.componentSubcomponentMaxDepth
     : 1,
 )
-const disableSubmit = computed(() => props.disableSubmit === true)
-const disableSubmitMessage = computed(() =>
-  (props.disableSubmitMessage && props.disableSubmitMessage.trim())
-    ? props.disableSubmitMessage
-    : 'Cette catégorie ne peut pas être modifiée car des éléments y sont déjà liés.',
-)
 const isReadonly = computed(() => props.readonly === true)
-const restrictedMode = computed(() => props.restrictedMode === true || isReadonly.value)
-const restrictedModeMessage = computed(() =>
-  (props.restrictedModeMessage && props.restrictedModeMessage.trim())
-    ? props.restrictedModeMessage
-    : '',
-)
 
 const form = reactive<ModelTypePayload>({
   name: '',
@@ -294,7 +252,7 @@ const resetForm = () => {
 }
 
 const submitLabel = computed(() => (props.mode === 'edit' ? 'Enregistrer' : 'Créer'))
-const isSubmitDisabled = computed(() => saving.value || structureLoading.value || disableSubmit.value || isReadonly.value)
+const isSubmitDisabled = computed(() => saving.value || structureLoading.value || isReadonly.value)
 
 const validate = () => {
   errors.name = undefined

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/components/sites/SiteCard.vue

@@ -1,27 +1,37 @@
 <template>
-  <div class="card bg-base-100 shadow-lg hover:shadow-xl transition-shadow">
+  <div
+    class="card site-card shadow-md hover:shadow-xl transition-shadow overflow-hidden"
+    :style="{
+      borderTop: site.color ? `4px solid ${site.color}` : '4px solid transparent',
+      background: site.color ? `linear-gradient(160deg, ${site.color}30 0%, ${site.color}08 40%, var(--color-base-100) 100%)` : undefined,
+    }"
+  >
     <div class="card-body">
       <div class="flex items-center justify-between mb-4">
-        <h3 class="card-title text-lg">
+        <h3 class="card-title text-lg text-base-content">
           {{ site.name }}
         </h3>
-        <div class="badge badge-primary badge-sm">
+        <div
+          class="badge font-bold"
+          :style="site.color ? { backgroundColor: site.color + '30', color: site.color, borderColor: site.color + '50' } : {}"
+          :class="!site.color ? 'badge-primary' : ''"
+        >
           {{ machineCount }} machines
         </div>
       </div>
 
       <div class="space-y-3 text-sm">
-        <div class="flex items-center gap-2 text-gray-700">
+        <div class="flex items-center gap-2 text-base-content/80">
           <IconLucideUser class="w-4 h-4 text-primary" aria-hidden="true" />
           <span class="font-medium">{{ site.contactName }}</span>
         </div>
 
-        <div class="flex items-center gap-2 text-gray-600">
+        <div class="flex items-center gap-2 text-base-content/60">
           <IconLucidePhone class="w-4 h-4 text-secondary" aria-hidden="true" />
           <span>{{ formattedContactPhone }}</span>
         </div>
 
-        <div class="flex items-start gap-2 text-gray-600">
+        <div class="flex items-start gap-2 text-base-content/60">
           <IconLucideMapPin class="w-4 h-4 text-accent mt-1" aria-hidden="true" />
           <span>
             {{ site.contactAddress }}<br>
@@ -29,7 +39,7 @@
           </span>
         </div>
 
-        <div class="flex items-center gap-2 text-gray-600">
+        <div class="flex items-center gap-2 text-base-content/60">
           <IconLucideFactory class="w-4 h-4 text-blue-500" aria-hidden="true" />
           <span>{{ machineCount }} machine(s)</span>
         </div>

app/components/sites/SiteCreateModal.vue

@@ -17,6 +17,46 @@
           />
         </div>
 
+        <div class="form-control">
+          <label class="label">
+            <span class="label-text">Couleur</span>
+          </label>
+          <div v-if="siteRef.color" class="flex items-center gap-3">
+            <input
+              :value="siteRef.color"
+              type="color"
+              class="w-10 h-10 rounded cursor-pointer border border-base-300"
+              :disabled="disabled"
+              @input="(e: Event) => { siteRef.color = (e.target as HTMLInputElement).value }"
+            >
+            <input
+              v-model="siteRef.color"
+              type="text"
+              placeholder="#000000"
+              class="input input-bordered input-sm flex-1"
+              :disabled="disabled"
+              maxlength="7"
+            >
+            <button
+              type="button"
+              class="btn btn-ghost btn-xs"
+              :disabled="disabled"
+              @click="siteRef.color = ''"
+            >
+              Effacer
+            </button>
+          </div>
+          <button
+            v-else
+            type="button"
+            class="btn btn-outline btn-sm w-fit"
+            :disabled="disabled"
+            @click="siteRef.color = '#3b82f6'"
+          >
+            Choisir une couleur
+          </button>
+        </div>
+
         <SiteContactFormFields :form="siteRef" :disabled="disabled" />
 
         <div class="modal-action">
@@ -39,6 +79,7 @@ import SiteContactFormFields from '~/components/sites/SiteContactFormFields.vue'
 
 type SiteForm = {
   name: string
+  color: string
   contactName: string
   contactPhone: string
   contactAddress: string

app/components/sites/SiteEditModal.vue

@@ -3,7 +3,7 @@
     <div class="modal-box max-w-md">
       <h3 class="font-bold text-lg mb-4">
         {{ disabled ? 'Détails du site' : 'Modifier le site' }}
-        <span v-if="siteName" class="block text-sm font-normal text-gray-500">{{ siteName }}</span>
+        <span v-if="siteName" class="block text-sm font-normal text-base-content/50">{{ siteName }}</span>
       </h3>
       <form class="space-y-4" @submit.prevent="emit('submit')">
         <div class="form-control">
@@ -20,6 +20,46 @@
           >
         </div>
 
+        <div class="form-control">
+          <label class="label">
+            <span class="label-text">Couleur</span>
+          </label>
+          <div v-if="form.color" class="flex items-center gap-3">
+            <input
+              :value="form.color"
+              type="color"
+              class="w-10 h-10 rounded cursor-pointer border border-base-300"
+              :disabled="disabled"
+              @input="form.color = $event.target.value"
+            >
+            <input
+              v-model="form.color"
+              type="text"
+              placeholder="#000000"
+              class="input input-bordered input-sm flex-1"
+              :disabled="disabled"
+              maxlength="7"
+            >
+            <button
+              type="button"
+              class="btn btn-ghost btn-xs"
+              :disabled="disabled"
+              @click="form.color = ''"
+            >
+              Effacer
+            </button>
+          </div>
+          <button
+            v-else
+            type="button"
+            class="btn btn-outline btn-sm w-fit"
+            :disabled="disabled"
+            @click="form.color = '#3b82f6'"
+          >
+            Choisir une couleur
+          </button>
+        </div>
+
         <SiteContactFormFields :form="props.form" :disabled="disabled" />
 
         <div class="border-t border-base-200 pt-4 space-y-4">
@@ -28,7 +68,7 @@
               <h4 class="font-semibold text-sm">
                 Documents liés
               </h4>
-              <p class="text-xs text-gray-500">
+              <p class="text-xs text-base-content/50">
                 Ajoutez des documents (PDF, images...) relatifs à ce site.
               </p>
             </div>
@@ -74,7 +114,7 @@
                     <div class="font-medium">
                       {{ document.name }}
                     </div>
-                    <div class="text-xs text-gray-500">
+                    <div class="text-xs text-base-content/50">
                       {{ document.mimeType || 'Inconnu' }} • {{ formatSize(document.size) }}
                     </div>
                   </div>

app/composables/useCategoryEditGuard.ts

@@ -1,114 +0,0 @@
-import { computed, ref } from 'vue'
-import { useApi } from '~/composables/useApi'
-import { useToast } from '~/composables/useToast'
-
-type GuardLabels = {
-  singular: string
-  plural: string
-  verifying: string
-}
-
-type GuardConfig = {
-  endpoint: string
-  filterKey: string
-  labels: GuardLabels
-}
-
-const extractTotal = (payload: any, fallbackLength: number) => {
-  if (typeof payload?.totalItems === 'number') {
-    return payload.totalItems
-  }
-  if (typeof payload?.['hydra:totalItems'] === 'number') {
-    return payload['hydra:totalItems']
-  }
-  if (Array.isArray(payload?.member)) {
-    return payload.member.length
-  }
-  if (Array.isArray(payload?.['hydra:member'])) {
-    return payload['hydra:member'].length
-  }
-  return fallbackLength
-}
-
-export function useCategoryEditGuard (config: GuardConfig) {
-  const { get } = useApi()
-  const { showInfo } = useToast()
-
-  const linkedCount = ref(0)
-  const linkedLoading = ref(false)
-
-  const loadLinkedCount = async (modelTypeId: string) => {
-    linkedLoading.value = true
-    try {
-      const params = new URLSearchParams()
-      params.set('itemsPerPage', '1')
-      params.set(config.filterKey, `/api/model_types/${modelTypeId}`)
-
-      const result = await get(`${config.endpoint}?${params.toString()}`)
-      if (!result.success) {
-        linkedCount.value = 0
-        return
-      }
-
-      const fallbackLength = Array.isArray(result.data?.member)
-        ? result.data.member.length
-        : Array.isArray(result.data?.['hydra:member'])
-          ? result.data['hydra:member'].length
-          : 0
-
-      linkedCount.value = extractTotal(result.data, fallbackLength)
-    } catch (_error) {
-      linkedCount.value = 0
-    } finally {
-      linkedLoading.value = false
-    }
-  }
-
-  const isRestrictedMode = computed(
-    () => !linkedLoading.value && linkedCount.value > 0,
-  )
-
-  const isSubmitBlocked = computed(
-    () => linkedLoading.value,
-  )
-
-  const restrictedModeMessage = computed(() => {
-    if (linkedLoading.value) {
-      return config.labels.verifying
-    }
-    if (linkedCount.value <= 0) {
-      return ''
-    }
-    if (linkedCount.value === 1) {
-      return `Mode restreint : 1 ${config.labels.singular} est déjà lié à cette catégorie. Vous pouvez ajouter de nouveaux champs personnalisés et renommer les existants, mais pas modifier leur type ou les supprimer.`
-    }
-    return `Mode restreint : ${linkedCount.value} ${config.labels.plural} sont déjà liés à cette catégorie. Vous pouvez ajouter de nouveaux champs personnalisés et renommer les existants, mais pas modifier leur type ou les supprimer.`
-  })
-
-  const submitBlockMessage = computed(() => {
-    if (linkedLoading.value) {
-      return config.labels.verifying
-    }
-    return ''
-  })
-
-  const guardSubmitOrNotify = () => {
-    if (!isSubmitBlocked.value) {
-      return false
-    }
-    showInfo(submitBlockMessage.value || 'Veuillez patienter...')
-    return true
-  }
-
-  return {
-    linkedCount,
-    linkedLoading,
-    isRestrictedMode,
-    isSubmitBlocked,
-    restrictedModeMessage,
-    submitBlockMessage,
-    loadLinkedCount,
-    guardSubmitOrNotify,
-  }
-}
-

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,560 @@
+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 type { SelectionEntry } from '~/shared/utils/structureSelectionUtils'
+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, patch } = 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,
+    }
+  })
+
+  // --- Slot selection entries (for selectors) ---
+
+  const pieceSlotEntries = computed(() => {
+    const structure = component.value?.structure
+    if (!structure?.pieces) return []
+    return (structure.pieces as any[]).map((slot: any, i: number) => ({
+      slotId: slot.slotId,
+      typePieceId: slot.typePieceId,
+      selectedPieceId: slot.selectedPieceId ?? null,
+      quantity: slot.quantity ?? 1,
+      position: slot.position ?? i,
+      label: pieceTypeLabelMap.value[slot.typePieceId] || `Pièce #${i + 1}`,
+    }))
+  })
+
+  const productSlotEntries = computed(() => {
+    const structure = component.value?.structure
+    if (!structure?.products) return []
+    return (structure.products as any[]).map((slot: any, i: number) => ({
+      slotId: slot.slotId,
+      typeProductId: slot.typeProductId,
+      selectedProductId: slot.selectedProductId ?? null,
+      familyCode: slot.familyCode,
+      position: slot.position ?? i,
+      label: productTypeLabelMap.value[slot.typeProductId] || `Produit #${i + 1}`,
+    }))
+  })
+
+  const subcomponentSlotEntries = computed(() => {
+    const structure = component.value?.structure
+    if (!structure?.subcomponents) return []
+    return (structure.subcomponents as any[]).map((slot: any, i: number) => ({
+      slotId: slot.slotId,
+      typeComposantId: slot.typeComposantId,
+      selectedComponentId: slot.selectedComponentId ?? null,
+      alias: slot.alias,
+      familyCode: slot.familyCode,
+      position: slot.position ?? i,
+      label: slot.alias || `Sous-composant #${i + 1}`,
+    }))
+  })
+
+  const savePieceSlotSelection = async (slotId: string, selectedPieceId: string | null) => {
+    const result = await patch(`/composant-piece-slots/${slotId}`, { selectedPieceId })
+    if (result.success) {
+      const structure = component.value?.structure
+      if (structure?.pieces) {
+        const slot = (structure.pieces as any[]).find((s: any) => s.slotId === slotId)
+        if (slot) slot.selectedPieceId = selectedPieceId
+      }
+      toast.showSuccess('Pièce mise à jour')
+    }
+  }
+
+  const saveProductSlotSelection = async (slotId: string, selectedProductId: string | null) => {
+    const result = await patch(`/composant-product-slots/${slotId}`, { selectedProductId })
+    if (result.success) {
+      const structure = component.value?.structure
+      if (structure?.products) {
+        const slot = (structure.products as any[]).find((s: any) => s.slotId === slotId)
+        if (slot) slot.selectedProductId = selectedProductId
+      }
+      toast.showSuccess('Produit mis à jour')
+    }
+  }
+
+  const saveSubcomponentSlotSelection = async (slotId: string, selectedComposantId: string | null) => {
+    const result = await patch(`/composant-subcomponent-slots/${slotId}`, { selectedComposantId })
+    if (result.success) {
+      const structure = component.value?.structure
+      if (structure?.subcomponents) {
+        const slot = (structure.subcomponents as any[]).find((s: any) => s.slotId === slotId)
+        if (slot) slot.selectedComponentId = selectedComposantId
+      }
+      toast.showSuccess('Sous-composant mis à jour')
+    }
+  }
+
+  const saveSlotQuantity = async (entry: SelectionEntry) => {
+    const slotId = entry.slotId
+    const quantity = typeof entry._definition?.quantity === 'number'
+      ? Math.max(1, entry._definition.quantity)
+      : null
+    if (!slotId || quantity === null) return
+    try {
+      await patch(`/composant-piece-slots/${slotId}`, { quantity })
+      toast.showSuccess('Quantité mise à jour')
+    }
+    catch (error: any) {
+      toast.showError(error?.message || 'Erreur lors de la mise à jour de la quantité')
+    }
+  }
+
+  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
+
+    // Load catalogs for slot selectors (force: true to bypass cache from list pages that load fewer items)
+    Promise.allSettled([
+      loadPieces({ itemsPerPage: 200, force: true }),
+      loadProducts({ itemsPerPage: 200, force: true }),
+      loadComposants({ itemsPerPage: 200, force: true }),
+    ]).catch(() => {})
+  })
+
+  return {
+    // State
+    component,
+    loading,
+    saving,
+    selectedFiles,
+    uploadingDocuments,
+    loadingDocuments,
+    componentDocuments,
+    previewDocument,
+    previewVisible,
+    selectedTypeId,
+    editionForm,
+    customFieldInputs,
+    historyFieldLabels,
+
+    // Computed
+    canEdit,
+    canSubmit,
+    componentTypeList,
+    selectedType,
+    selectedTypeStructure,
+    structureSelections,
+    pieceSlotEntries,
+    productSlotEntries,
+    subcomponentSlotEntries,
+
+    // History
+    history,
+    historyLoading,
+    historyError,
+
+    // Methods
+    openPreview,
+    closePreview,
+    removeDocument,
+    handleFilesAdded,
+    refreshDocuments,
+    submitEdition,
+    saveSlotQuantity,
+    savePieceSlotSelection,
+    saveProductSlotSelection,
+    saveSubcomponentSlotSelection,
+    resolvePieceLabel,
+    resolveProductLabel,
+    resolveSubcomponentLabel,
+    formatStructurePreview,
+  }
+}

app/composables/useDarkMode.ts

@@ -0,0 +1,26 @@
+const isDark = ref(false)
+
+export function useDarkMode() {
+  const toggle = () => {
+    isDark.value = !isDark.value
+    applyTheme()
+  }
+
+  const applyTheme = () => {
+    const theme = isDark.value ? 'mytheme-dark' : 'mytheme'
+    document.documentElement.setAttribute('data-theme', theme)
+    localStorage.setItem('theme', theme)
+  }
+
+  const init = () => {
+    const saved = localStorage.getItem('theme')
+    if (saved === 'mytheme-dark') {
+      isDark.value = true
+    } else if (!saved && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      isDark.value = true
+    }
+    applyTheme()
+  }
+
+  return { isDark, toggle, init }
+}

app/composables/useDragReorder.ts

@@ -0,0 +1,109 @@
+import { ref } from 'vue'
+
+interface DragReorderHandlers {
+  draggingIndex: Ref<number | null>
+  dropTargetIndex: Ref<number | null>
+  onDragStart: (index: number, event: DragEvent) => void
+  onDragEnter: (index: number) => void
+  onDragOver: (event: DragEvent) => void
+  onDrop: (index: number) => void
+  onDragEnd: () => void
+  reorderClass: (index: number) => string
+  reset: () => void
+}
+
+interface DragReorderOptions {
+  draggingClass?: string
+  dropTargetClass?: string
+  onReorder?: () => void
+}
+
+function moveItemInPlace<T>(list: T[], from: number, to: number): void {
+  if (from === to) return
+  if (from < 0 || to < 0 || from >= list.length || to >= list.length) return
+  const updated = list.slice()
+  const [item] = updated.splice(from, 1)
+  if (item === undefined) return
+  updated.splice(to, 0, item)
+  list.splice(0, list.length, ...updated)
+}
+
+export function useDragReorder(
+  getList: () => unknown[] | undefined,
+  options: DragReorderOptions = {},
+): DragReorderHandlers {
+  const {
+    draggingClass = 'border-dashed border-primary',
+    dropTargetClass = 'border-primary border-dashed bg-primary/5',
+    onReorder,
+  } = options
+
+  const draggingIndex = ref<number | null>(null)
+  const dropTargetIndex = ref<number | null>(null)
+
+  const reset = () => {
+    draggingIndex.value = null
+    dropTargetIndex.value = null
+  }
+
+  const onDragStart = (index: number, event: DragEvent) => {
+    draggingIndex.value = index
+    dropTargetIndex.value = index
+    if (event.dataTransfer) {
+      event.dataTransfer.effectAllowed = 'move'
+    }
+  }
+
+  const onDragEnter = (index: number) => {
+    if (draggingIndex.value === null) return
+    dropTargetIndex.value = index
+  }
+
+  const onDragOver = (event: DragEvent) => {
+    event.preventDefault()
+  }
+
+  const onDrop = (index: number) => {
+    const list = getList()
+    if (!Array.isArray(list)) {
+      reset()
+      return
+    }
+    const from = draggingIndex.value
+    if (from === null) {
+      reset()
+      return
+    }
+    moveItemInPlace(list, from, index)
+    onReorder?.()
+    reset()
+  }
+
+  const onDragEnd = () => {
+    reset()
+  }
+
+  const reorderClass = (index: number): string => {
+    if (draggingIndex.value === index) return draggingClass
+    if (
+      draggingIndex.value !== null
+      && dropTargetIndex.value === index
+      && draggingIndex.value !== index
+    ) {
+      return dropTargetClass
+    }
+    return ''
+  }
+
+  return {
+    draggingIndex,
+    dropTargetIndex,
+    onDragStart,
+    onDragEnter,
+    onDragOver,
+    onDrop,
+    onDragEnd,
+    reorderClass,
+    reset,
+  }
+}

app/composables/useEntityDocuments.ts

@@ -56,7 +56,7 @@ export function useEntityDocuments(deps: EntityDocumentsDeps) {
   // CRUD operations
   const refreshDocuments = async () => {
     const e = entity()
-    if (!e?.id) return
+    if (!e?.id || e._structurePiece) return
     loadingDocuments.value = true
     try {
       const result: any = await loadDocumentsFn(e.id, { updateStore: false })

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/useMachineDetailCustomFields.ts

@@ -0,0 +1,396 @@
+/**
+ * Machine detail — custom field management sub-composable.
+ *
+ * Handles custom field resolution, display filtering, sync and updates
+ * for machines, components and pieces.
+ */
+
+import { ref, computed } from 'vue'
+import { useCustomFields } from '~/composables/useCustomFields'
+import { useToast } from '~/composables/useToast'
+import { normalizeStructureForEditor } from '~/shared/modelUtils'
+import {
+  shouldDisplayCustomField,
+  normalizeExistingCustomFieldDefinitions,
+  normalizeCustomFieldValueEntry,
+  mergeCustomFieldValuesWithDefinitions,
+  dedupeCustomFieldEntries,
+} from '~/shared/utils/customFieldUtils'
+import {
+  resolveConstructeurs,
+  uniqueConstructeurIds,
+} from '~/shared/constructeurUtils'
+
+type AnyRecord = Record<string, unknown>
+
+interface MachineDetailCustomFieldsDeps {
+  machine: Ref<AnyRecord | null>
+  isEditMode: Ref<boolean>
+  constructeurs: Ref<unknown[]>
+  resolveProductReference: (source: AnyRecord) => { product: unknown; productId: string | null }
+  getProductDisplay: (source: AnyRecord) => unknown
+}
+
+export function useMachineDetailCustomFields(deps: MachineDetailCustomFieldsDeps) {
+  const { machine, isEditMode, constructeurs, resolveProductReference, getProductDisplay } = deps
+  const {
+    upsertCustomFieldValue,
+    updateCustomFieldValue: updateCustomFieldValueApi,
+  } = useCustomFields()
+  const toast = useToast()
+
+  // ---------------------------------------------------------------------------
+  // State
+  // ---------------------------------------------------------------------------
+
+  const machineCustomFields = ref<AnyRecord[]>([])
+
+  // ---------------------------------------------------------------------------
+  // Computed
+  // ---------------------------------------------------------------------------
+
+  const visibleMachineCustomFields = computed(() => {
+    const fields = Array.isArray(machineCustomFields.value) ? machineCustomFields.value : []
+    if (isEditMode.value) return fields
+    return fields.filter((field) => shouldDisplayCustomField(field))
+  })
+
+  // ---------------------------------------------------------------------------
+  // Transform helpers
+  // ---------------------------------------------------------------------------
+
+  const getStructureCustomFields = (structure: unknown): AnyRecord[] => {
+    if (!structure || typeof structure !== 'object') return []
+    const normalized = normalizeStructureForEditor(structure as any) as any
+    return Array.isArray(normalized?.customFields)
+      ? (normalized.customFields as AnyRecord[])
+      : []
+  }
+
+  const transformCustomFields = (piecesData: AnyRecord[]): AnyRecord[] => {
+    return (piecesData || []).map((piece) => {
+      const typePiece = (piece.typePiece as AnyRecord) || {}
+
+      const normalizeStructureDefs = (structure: unknown) =>
+        structure ? normalizeStructureForEditor(structure as AnyRecord) : null
+
+      const normalizedStructureDefs = [
+        normalizeStructureDefs((piece.definition as AnyRecord)?.structure),
+        normalizeStructureDefs(typePiece.structure),
+      ]
+
+      const valueEntries = [
+        ...(Array.isArray(piece.customFieldValues) ? piece.customFieldValues : []),
+        ...(Array.isArray(piece.customFields)
+          ? (piece.customFields as AnyRecord[])
+              .map(normalizeCustomFieldValueEntry)
+              .filter((e) => e !== null)
+          : []),
+        ...(Array.isArray(typePiece.customFieldValues)
+          ? (typePiece.customFieldValues as AnyRecord[])
+              .map(normalizeCustomFieldValueEntry)
+              .filter((e) => e !== null)
+          : []),
+      ]
+
+      const customFields = dedupeCustomFieldEntries(
+        mergeCustomFieldValuesWithDefinitions(
+          valueEntries,
+          normalizeExistingCustomFieldDefinitions(piece.customFields),
+          normalizeExistingCustomFieldDefinitions((piece.definition as AnyRecord)?.customFields),
+          normalizeExistingCustomFieldDefinitions((piece.typePiece as AnyRecord)?.customFields),
+          normalizeExistingCustomFieldDefinitions(typePiece.customFields),
+          ...normalizedStructureDefs.map((def) => getStructureCustomFields(def)),
+        ),
+      )
+
+      const constructeurIds = uniqueConstructeurIds(
+        piece.constructeurs,
+        piece.constructeurIds,
+        piece.constructeurId,
+        piece.constructeur,
+        (piece.originalPiece as AnyRecord)?.constructeurs,
+        (piece.originalPiece as AnyRecord)?.constructeurIds,
+        (piece.originalPiece as AnyRecord)?.constructeurId,
+        (piece.originalPiece as AnyRecord)?.constructeur,
+      )
+
+      const { product: resolvedProduct, productId: resolvedProductId } =
+        resolveProductReference(piece)
+
+      const constructeursList = resolveConstructeurs(
+        constructeurIds,
+        Array.isArray(piece.constructeurs) ? (piece.constructeurs as any[]) : [],
+        piece.constructeur ? [piece.constructeur as any] : [],
+        Array.isArray((piece.originalPiece as AnyRecord)?.constructeurs)
+          ? ((piece.originalPiece as AnyRecord).constructeurs as any[])
+          : [],
+        (piece.originalPiece as AnyRecord)?.constructeur
+          ? [(piece.originalPiece as AnyRecord).constructeur as any]
+          : [],
+        constructeurs.value as any,
+      ) as any[]
+
+      const normalizedPiece = {
+        ...piece,
+        product: resolvedProduct || piece.product || null,
+        productId: resolvedProductId || piece.productId || (piece.product as AnyRecord)?.id || null,
+      }
+      const productDisplay = getProductDisplay(normalizedPiece)
+
+      return {
+        ...normalizedPiece,
+        customFields,
+        documents: piece.documents || [],
+        constructeurs: constructeursList,
+        constructeur: constructeursList[0] || piece.constructeur || null,
+        constructeurIds,
+        constructeurId: constructeurIds[0] || null,
+        typePieceId:
+          piece.typePieceId ||
+          (piece.typePiece as AnyRecord)?.id ||
+          null,
+        __productDisplay: productDisplay,
+      }
+    })
+  }
+
+  const transformComponentCustomFields = (componentsData: AnyRecord[]): AnyRecord[] => {
+    const normalizeStructureDefs = (structure: unknown) =>
+      structure ? normalizeStructureForEditor(structure as AnyRecord) : null
+
+    return (componentsData || []).map((component) => {
+      const type = (component.typeComposant as AnyRecord) || {}
+
+      const normalizedStructureDefs = [
+        normalizeStructureDefs((component.definition as AnyRecord)?.structure),
+        normalizeStructureDefs(type.structure),
+      ]
+
+      const actualComponent = (component.originalComposant as AnyRecord) || component
+
+      const valueEntries = [
+        ...(Array.isArray(component.customFieldValues) ? component.customFieldValues : []),
+        ...(Array.isArray(component.customFields)
+          ? (component.customFields as AnyRecord[])
+              .map(normalizeCustomFieldValueEntry)
+              .filter((e) => e !== null)
+          : []),
+        ...(Array.isArray(actualComponent?.customFields)
+          ? (actualComponent.customFields as AnyRecord[])
+              .map(normalizeCustomFieldValueEntry)
+              .filter((e) => e !== null)
+          : []),
+      ]
+
+      const customFields = dedupeCustomFieldEntries(
+        mergeCustomFieldValuesWithDefinitions(
+          valueEntries,
+          normalizeExistingCustomFieldDefinitions(component.customFields),
+          normalizeExistingCustomFieldDefinitions((component.definition as AnyRecord)?.customFields),
+          normalizeExistingCustomFieldDefinitions((component.typeComposant as AnyRecord)?.customFields),
+          normalizeExistingCustomFieldDefinitions(type.customFields),
+          normalizeExistingCustomFieldDefinitions(actualComponent?.customFields),
+          ...normalizedStructureDefs.map((def) => getStructureCustomFields(def)),
+        ),
+      )
+
+      const piecesTransformed = component.pieces
+        ? transformCustomFields(component.pieces as AnyRecord[]).map((p) => ({
+            ...p,
+            parentComponentName: component.name,
+          }))
+        : []
+
+      const subComponents = component.sousComposants
+        ? transformComponentCustomFields(component.sousComposants as AnyRecord[])
+        : []
+
+      const constructeurIds = uniqueConstructeurIds(
+        component.constructeurs,
+        component.constructeurIds,
+        component.constructeurId,
+        component.constructeur,
+        actualComponent?.constructeurs,
+        actualComponent?.constructeurIds,
+        actualComponent?.constructeurId,
+        actualComponent?.constructeur,
+      )
+
+      const constructeursList = resolveConstructeurs(
+        constructeurIds,
+        Array.isArray(component.constructeurs) ? (component.constructeurs as any[]) : [],
+        component.constructeur ? [component.constructeur as any] : [],
+        Array.isArray(actualComponent?.constructeurs)
+          ? (actualComponent.constructeurs as any[])
+          : [],
+        actualComponent?.constructeur ? [actualComponent.constructeur as any] : [],
+        constructeurs.value as any,
+      ) as any[]
+
+      const { product: resolvedProduct, productId: resolvedProductId } =
+        resolveProductReference(component)
+      const normalizedComponent = {
+        ...component,
+        product: resolvedProduct || component.product || null,
+        productId:
+          resolvedProductId || component.productId || (component.product as AnyRecord)?.id || null,
+      }
+      const productDisplay = getProductDisplay(normalizedComponent)
+
+      return {
+        ...normalizedComponent,
+        customFields,
+        pieces: piecesTransformed,
+        subComponents,
+        documents: component.documents || [],
+        constructeurs: constructeursList,
+        constructeur: constructeursList[0] || component.constructeur || null,
+        constructeurIds,
+        constructeurId: constructeurIds[0] || null,
+        typeComposantId:
+          component.typeComposantId ||
+          (component.typeComposant as AnyRecord)?.id ||
+          null,
+        __productDisplay: productDisplay,
+      }
+    })
+  }
+
+  // ---------------------------------------------------------------------------
+  // Machine custom field methods
+  // ---------------------------------------------------------------------------
+
+  const syncMachineCustomFields = () => {
+    if (!machine.value) {
+      machineCustomFields.value = []
+      return
+    }
+    const valueEntries = [
+      ...(Array.isArray(machine.value.customFieldValues) ? machine.value.customFieldValues : []),
+      ...(Array.isArray(machine.value.customFields)
+        ? (machine.value.customFields as AnyRecord[])
+            .map(normalizeCustomFieldValueEntry)
+            .filter((e) => e !== null)
+        : []),
+    ]
+    const merged = dedupeCustomFieldEntries(
+      mergeCustomFieldValuesWithDefinitions(
+        valueEntries,
+        normalizeExistingCustomFieldDefinitions(machine.value.customFields),
+      ),
+    ).map((field: AnyRecord) => ({ ...field, readOnly: false }))
+    machineCustomFields.value = merged
+  }
+
+  const setMachineCustomFieldValue = (field: AnyRecord, value: unknown) => {
+    if (!field) return
+    field.value = value
+    if (field.customFieldValueId && (machine.value as AnyRecord)?.customFieldValues) {
+      const stored = ((machine.value as AnyRecord).customFieldValues as AnyRecord[]).find(
+        (fv) => fv.id === field.customFieldValueId,
+      )
+      if (stored) stored.value = value
+    }
+  }
+
+  const updateMachineCustomField = async (field: AnyRecord) => {
+    if (!machine.value || !field) return
+
+    const { id: customFieldId, customFieldValueId } = field
+    const fieldLabel = (field.name as string) || 'Champ personnalisé'
+
+    try {
+      if (customFieldValueId) {
+        const result: any = await updateCustomFieldValueApi(customFieldValueId as string, {
+          value: field.value ?? '',
+        } as any)
+        if (result.success) {
+          toast.showSuccess(`Champ "${fieldLabel}" de la machine mis à jour avec succès`)
+          syncMachineCustomFields()
+        } else {
+          toast.showError(`Erreur lors de la mise à jour du champ "${fieldLabel}"`)
+        }
+        return
+      }
+      if (!customFieldId) {
+        toast.showError(
+          'Impossible de mettre à jour ce champ personnalisé (identifiant manquant).',
+        )
+        return
+      }
+      const result: any = await upsertCustomFieldValue(
+        customFieldId as string,
+        'machine',
+        machine.value.id as string,
+        field.value ?? '',
+      )
+      if (result.success) {
+        const createdValue = result.data as AnyRecord
+        toast.showSuccess(`Champ "${fieldLabel}" de la machine mis à jour avec succès`)
+        if (createdValue?.id) {
+          if (!createdValue.customField) {
+            createdValue.customField = {
+              id: customFieldId,
+              name: field.name,
+              type: field.type,
+              required: field.required,
+              options: field.options,
+            }
+          }
+          field.customFieldValueId = createdValue.id
+          field.readOnly = false
+          const existingValues = Array.isArray(machine.value.customFieldValues)
+            ? (machine.value.customFieldValues as AnyRecord[]).filter(
+                (item) => item.id !== createdValue.id,
+              )
+            : []
+          machine.value.customFieldValues = [...existingValues, createdValue]
+        }
+        syncMachineCustomFields()
+      } else {
+        toast.showError(`Erreur lors de la mise à jour du champ "${fieldLabel}"`)
+      }
+    } catch (error) {
+      console.error('Erreur lors de la mise à jour du champ personnalisé de la machine:', error)
+      toast.showError(`Erreur lors de la mise à jour du champ "${fieldLabel}"`)
+    }
+  }
+
+  const updatePieceCustomField = async (fieldUpdate: AnyRecord) => {
+    try {
+      const result: any = await upsertCustomFieldValue(
+        fieldUpdate.fieldId as string,
+        'piece',
+        fieldUpdate.pieceId as string,
+        fieldUpdate.value,
+      )
+      if (result.success) {
+        toast.showSuccess('Champ personnalisé mis à jour avec succès')
+      } else {
+        toast.showError('Erreur lors de la mise à jour du champ personnalisé')
+      }
+    } catch (error) {
+      toast.showError('Erreur lors de la mise à jour du champ personnalisé')
+      console.error('Erreur lors de la mise à jour du champ personnalisé:', error)
+    }
+  }
+
+  return {
+    // State
+    machineCustomFields,
+
+    // Computed
+    visibleMachineCustomFields,
+
+    // Transform functions
+    transformCustomFields,
+    transformComponentCustomFields,
+
+    // Methods
+    syncMachineCustomFields,
+    setMachineCustomFieldValue,
+    updateMachineCustomField,
+    updatePieceCustomField,
+  }
+}

app/composables/useMachineDetailDocuments.ts

@@ -0,0 +1,146 @@
+/**
+ * Machine detail — document management sub-composable.
+ *
+ * Handles document loading, upload, delete and preview state.
+ */
+
+import { ref, computed } from 'vue'
+import { useDocuments } from '~/composables/useDocuments'
+import { canPreviewDocument } from '~/utils/documentPreview'
+
+type AnyRecord = Record<string, unknown>
+
+interface MachineDetailDocumentsDeps {
+  machine: Ref<AnyRecord | null>
+}
+
+export function useMachineDetailDocuments(deps: MachineDetailDocumentsDeps) {
+  const { machine } = deps
+  const {
+    uploadDocuments,
+    deleteDocument,
+    loadDocumentsByMachine,
+    loadDocumentsByProduct,
+  } = useDocuments()
+
+  // ---------------------------------------------------------------------------
+  // State
+  // ---------------------------------------------------------------------------
+
+  const machineDocumentFiles = ref<File[]>([])
+  const machineDocumentsUploading = ref(false)
+  const machineDocumentsLoaded = ref(false)
+  const previewDocument = ref<AnyRecord | null>(null)
+  const previewVisible = ref(false)
+
+  // ---------------------------------------------------------------------------
+  // Computed
+  // ---------------------------------------------------------------------------
+
+  const machineDocumentsList = computed(
+    () => ((machine.value as AnyRecord)?.documents as AnyRecord[]) || [],
+  )
+
+  // ---------------------------------------------------------------------------
+  // Methods
+  // ---------------------------------------------------------------------------
+
+  const refreshMachineDocuments = async () => {
+    if (!machine.value?.id) return
+    const result: any = await loadDocumentsByMachine(machine.value.id as string, { updateStore: false })
+    if (result.success && machine.value) {
+      machine.value.documents = result.data || []
+      machineDocumentsLoaded.value = true
+    }
+  }
+
+  const handleMachineFilesAdded = async (files: File[]) => {
+    if (!files.length || !machine.value?.id) return
+    machineDocumentsUploading.value = true
+    try {
+      const result: any = await uploadDocuments(
+        { files, context: { machineId: machine.value.id } } as any,
+        { updateStore: false },
+      )
+      if (result.success && machine.value) {
+        const newDocs = (result.data as AnyRecord[]) || []
+        machine.value.documents = [
+          ...newDocs,
+          ...((machine.value.documents as AnyRecord[]) || []),
+        ]
+        machineDocumentFiles.value = []
+      }
+    } finally {
+      machineDocumentsUploading.value = false
+    }
+  }
+
+  const removeMachineDocument = async (documentId: string) => {
+    if (!documentId) return
+    const result: any = await deleteDocument(documentId, { updateStore: false })
+    if (result.success && machine.value) {
+      machine.value.documents = ((machine.value.documents as AnyRecord[]) || []).filter(
+        (doc) => doc.id !== documentId,
+      )
+    }
+  }
+
+  const openPreview = (doc: AnyRecord) => {
+    if (!canPreviewDocument(doc)) return
+    previewDocument.value = doc
+    previewVisible.value = true
+  }
+
+  const closePreview = () => {
+    previewVisible.value = false
+    previewDocument.value = null
+  }
+
+  const loadProductDocuments = async (machineProductLinks: AnyRecord[]) => {
+    const productIds = machineProductLinks
+      .map((link) => {
+        const p = link.product as AnyRecord | string | null
+        if (typeof p === 'string') return p.split('/').pop() || null
+        return (p as AnyRecord)?.id as string | null
+      })
+      .filter((id): id is string => !!id)
+
+    const results = await Promise.allSettled(
+      productIds.map(async (id) => {
+        const result: any = await loadDocumentsByProduct(id, { updateStore: false })
+        if (result.success && Array.isArray(result.data)) {
+          return { id, docs: result.data as AnyRecord[] }
+        }
+        return { id, docs: [] }
+      }),
+    )
+
+    const map = new Map<string, AnyRecord[]>()
+    results.forEach((r) => {
+      if (r.status === 'fulfilled' && r.value.docs.length) {
+        map.set(r.value.id, r.value.docs)
+      }
+    })
+    return map
+  }
+
+  return {
+    // State
+    machineDocumentFiles,
+    machineDocumentsUploading,
+    machineDocumentsLoaded,
+    previewDocument,
+    previewVisible,
+
+    // Computed
+    machineDocumentsList,
+
+    // Methods
+    refreshMachineDocuments,
+    handleMachineFilesAdded,
+    removeMachineDocument,
+    openPreview,
+    closePreview,
+    loadProductDocuments,
+  }
+}

app/composables/useMachineDetailHierarchy.ts

@@ -0,0 +1,306 @@
+/**
+ * Machine detail — hierarchy & link management sub-composable.
+ *
+ * Handles machine hierarchy building, component/piece tree resolution,
+ * flatten helpers, find-by-id utilities, and structure link CRUD.
+ */
+
+import { ref, computed } from 'vue'
+import { useApi } from '~/composables/useApi'
+import { useToast } from '~/composables/useToast'
+import {
+  resolveIdentifier,
+} from '~/shared/utils/productDisplayUtils'
+import {
+  buildMachineHierarchyFromLinks,
+  resolveLinkArray,
+} from '~/composables/useMachineHierarchy'
+
+type AnyRecord = Record<string, unknown>
+
+interface MachineDetailHierarchyDeps {
+  machineId: string
+  machine: Ref<AnyRecord | null>
+  constructeurs: Ref<unknown[]>
+  findProductById: (id: string | null | undefined) => AnyRecord | null
+  transformComponentCustomFields: (data: AnyRecord[]) => AnyRecord[]
+  transformCustomFields: (data: AnyRecord[]) => AnyRecord[]
+  syncMachineCustomFields: () => void
+}
+
+export function useMachineDetailHierarchy(deps: MachineDetailHierarchyDeps) {
+  const {
+    machineId,
+    machine,
+    constructeurs,
+    findProductById,
+    transformComponentCustomFields,
+    transformCustomFields,
+    syncMachineCustomFields,
+  } = deps
+
+  const { get, post: apiPost, delete: apiDel } = useApi()
+  const toast = useToast()
+
+  // ---------------------------------------------------------------------------
+  // State
+  // ---------------------------------------------------------------------------
+
+  const components = ref<AnyRecord[]>([])
+  const pieces = ref<AnyRecord[]>([])
+  const machineComponentLinks = ref<AnyRecord[]>([])
+  const machinePieceLinks = ref<AnyRecord[]>([])
+  const machineProductLinks = ref<AnyRecord[]>([])
+
+  // ---------------------------------------------------------------------------
+  // Helpers
+  // ---------------------------------------------------------------------------
+
+  const flattenComponents = (list: AnyRecord[] = []): AnyRecord[] => {
+    const result: AnyRecord[] = []
+    const traverse = (items: AnyRecord[]) => {
+      items.forEach((item) => {
+        result.push(item)
+        if (Array.isArray(item.subComponents) && item.subComponents.length) {
+          traverse(item.subComponents as AnyRecord[])
+        }
+      })
+    }
+    traverse(list)
+    return result
+  }
+
+  const findComponentById = (items: AnyRecord[] | undefined, id: string): AnyRecord | null => {
+    for (const item of items || []) {
+      if (item.id === id) return item
+      const found = findComponentById(item.subComponents as AnyRecord[] | undefined, id)
+      if (found) return found
+    }
+    return null
+  }
+
+  const findPieceById = (pieceId: string): AnyRecord | null => {
+    const direct = pieces.value.find((p) => p.id === pieceId)
+    if (direct) return direct
+
+    const searchInComponents = (items: AnyRecord[]): AnyRecord | null => {
+      for (const item of items || []) {
+        const match = ((item.pieces as AnyRecord[]) || []).find((p) => p.id === pieceId)
+        if (match) return match
+        const nested = searchInComponents((item.subComponents as AnyRecord[]) || [])
+        if (nested) return nested
+      }
+      return null
+    }
+    return searchInComponents(components.value)
+  }
+
+  // ---------------------------------------------------------------------------
+  // Hierarchy & links
+  // ---------------------------------------------------------------------------
+
+  const applyMachineLinks = (source: AnyRecord): boolean => {
+    const container = (source?.machine as AnyRecord) ?? null
+    const componentLinksData =
+      resolveLinkArray(source, ['componentLinks', 'machineComponentLinks']) ??
+      resolveLinkArray(container, ['componentLinks', 'machineComponentLinks'])
+    const pieceLinksData =
+      resolveLinkArray(source, ['pieceLinks', 'machinePieceLinks']) ??
+      resolveLinkArray(container, ['pieceLinks', 'machinePieceLinks'])
+    const productLinksData =
+      resolveLinkArray(source, ['productLinks', 'machineProductLinks']) ??
+      resolveLinkArray(container, ['productLinks', 'machineProductLinks'])
+
+    if (componentLinksData === null && pieceLinksData === null && productLinksData === null) {
+      return false
+    }
+
+    const normalizedComponentLinks = (componentLinksData ?? []) as AnyRecord[]
+    const normalizedPieceLinks = (pieceLinksData ?? []) as AnyRecord[]
+    const normalizedProductLinks = (productLinksData ?? []) as AnyRecord[]
+
+    machineComponentLinks.value = normalizedComponentLinks
+    machinePieceLinks.value = normalizedPieceLinks
+    machineProductLinks.value = normalizedProductLinks
+
+    const { components: hierarchy, machinePieces: machineLevelPieces } =
+      buildMachineHierarchyFromLinks(
+        normalizedComponentLinks,
+        normalizedPieceLinks,
+        findProductById as any,
+        constructeurs.value as any,
+      )
+
+    components.value = transformComponentCustomFields(hierarchy as AnyRecord[])
+    pieces.value = transformCustomFields(machineLevelPieces as AnyRecord[])
+
+    return true
+  }
+
+  // ---------------------------------------------------------------------------
+  // Computed
+  // ---------------------------------------------------------------------------
+
+  const flattenedComponents = computed(() => flattenComponents(components.value))
+
+  const machinePieces = computed(() => {
+    return pieces.value.filter((piece) => {
+      const parentLinkId = resolveIdentifier(
+        piece.parentComponentLinkId,
+        (piece.machinePieceLink as AnyRecord)?.parentComponentLinkId,
+        piece.parentLinkId,
+      )
+      if (parentLinkId) return false
+      return !piece.composantId
+    })
+  })
+
+  // ---------------------------------------------------------------------------
+  // Structure reload
+  // ---------------------------------------------------------------------------
+
+  const reloadMachineStructure = async () => {
+    const result: any = await get(`/machines/${machineId}/structure`)
+    if (result.success) {
+      const machinePayload =
+        result.data?.machine && typeof result.data.machine === 'object'
+          ? result.data.machine
+          : result.data
+      if (machinePayload && typeof machinePayload === 'object') {
+        machine.value = {
+          ...machine.value,
+          ...machinePayload,
+          documents: machinePayload.documents || (machine.value as AnyRecord)?.documents || [],
+          customFieldValues: machinePayload.customFieldValues || (machine.value as AnyRecord)?.customFieldValues || [],
+        }
+        const linksApplied = applyMachineLinks(result.data)
+        if (linksApplied && machine.value) {
+          machine.value.componentLinks = machineComponentLinks.value
+          machine.value.pieceLinks = machinePieceLinks.value
+          machine.value.productLinks = machineProductLinks.value
+        }
+        syncMachineCustomFields()
+      }
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+  // Structure link CRUD
+  // ---------------------------------------------------------------------------
+
+  const addComponentLink = async (composantId: string) => {
+    const result: any = await apiPost('/machine_component_links', {
+      machine: `/api/machines/${machineId}`,
+      composant: `/api/composants/${composantId}`,
+    })
+    if (result.success) {
+      toast.showSuccess('Composant ajouté à la machine')
+      await reloadMachineStructure()
+    } else {
+      toast.showError('Erreur lors de l\'ajout du composant')
+    }
+    return result
+  }
+
+  const removeComponentLink = async (linkId: string) => {
+    const result: any = await apiDel(`/machine_component_links/${linkId}`)
+    if (result.success) {
+      toast.showSuccess('Composant retiré de la machine')
+      await reloadMachineStructure()
+    } else {
+      toast.showError('Erreur lors de la suppression du composant')
+    }
+    return result
+  }
+
+  const addPieceLink = async (pieceId: string, parentComponentLinkId?: string) => {
+    const payload: any = {
+      machine: `/api/machines/${machineId}`,
+      piece: `/api/pieces/${pieceId}`,
+    }
+    if (parentComponentLinkId) {
+      payload.parentLink = `/api/machine_component_links/${parentComponentLinkId}`
+    }
+    const result: any = await apiPost('/machine_piece_links', payload)
+    if (result.success) {
+      toast.showSuccess('Pièce ajoutée à la machine')
+      await reloadMachineStructure()
+    } else {
+      toast.showError('Erreur lors de l\'ajout de la pièce')
+    }
+    return result
+  }
+
+  const removePieceLink = async (linkId: string) => {
+    const result: any = await apiDel(`/machine_piece_links/${linkId}`)
+    if (result.success) {
+      toast.showSuccess('Pièce retirée de la machine')
+      await reloadMachineStructure()
+    } else {
+      toast.showError('Erreur lors de la suppression de la pièce')
+    }
+    return result
+  }
+
+  const addProductLink = async (productId: string, parentComponentLinkId?: string, parentPieceLinkId?: string) => {
+    const payload: any = {
+      machine: `/api/machines/${machineId}`,
+      product: `/api/products/${productId}`,
+    }
+    if (parentComponentLinkId) {
+      payload.parentComponentLink = `/api/machine_component_links/${parentComponentLinkId}`
+    }
+    if (parentPieceLinkId) {
+      payload.parentPieceLink = `/api/machine_piece_links/${parentPieceLinkId}`
+    }
+    const result: any = await apiPost('/machine_product_links', payload)
+    if (result.success) {
+      toast.showSuccess('Produit ajouté à la machine')
+      await reloadMachineStructure()
+    } else {
+      toast.showError('Erreur lors de l\'ajout du produit')
+    }
+    return result
+  }
+
+  const removeProductLink = async (linkId: string) => {
+    const result: any = await apiDel(`/machine_product_links/${linkId}`)
+    if (result.success) {
+      toast.showSuccess('Produit retiré de la machine')
+      await reloadMachineStructure()
+    } else {
+      toast.showError('Erreur lors de la suppression du produit')
+    }
+    return result
+  }
+
+  return {
+    // State
+    components,
+    pieces,
+    machineComponentLinks,
+    machinePieceLinks,
+    machineProductLinks,
+
+    // Computed
+    flattenedComponents,
+    machinePieces,
+
+    // Helpers
+    flattenComponents,
+    findComponentById,
+    findPieceById,
+
+    // Hierarchy
+    applyMachineLinks,
+
+    // Structure link management
+    reloadMachineStructure,
+    addComponentLink,
+    removeComponentLink,
+    addPieceLink,
+    removePieceLink,
+    addProductLink,
+    removeProductLink,
+  }
+}

app/composables/useMachineDetailProducts.ts

@@ -0,0 +1,132 @@
+/**
+ * Machine detail — product display sub-composable.
+ *
+ * Handles product resolution, display helpers, supplier info,
+ * and machine-level direct product links.
+ */
+
+import { computed } from 'vue'
+import { useProducts } from '~/composables/useProducts'
+import {
+  resolveProductReference as _resolveProductReference,
+  getProductDisplay as _getProductDisplay,
+  getProductSuppliersLabel,
+  getProductPriceLabel,
+} from '~/shared/utils/productDisplayUtils'
+import {
+  resolveConstructeurs,
+  uniqueConstructeurIds,
+} from '~/shared/constructeurUtils'
+
+type AnyRecord = Record<string, unknown>
+
+interface MachineDetailProductsDeps {
+  machineProductLinks: Ref<AnyRecord[]>
+  productDocumentsMap: Ref<Map<string, AnyRecord[]>>
+  constructeurs: Ref<unknown[]>
+}
+
+export function useMachineDetailProducts(deps: MachineDetailProductsDeps) {
+  const { machineProductLinks, productDocumentsMap, constructeurs } = deps
+  const { products, loadProducts } = useProducts()
+
+  // ---------------------------------------------------------------------------
+  // Computed
+  // ---------------------------------------------------------------------------
+
+  const productInventory = computed(() => products.value || [])
+
+  const productById = computed(() => {
+    const map = new Map<string, AnyRecord>()
+    ;(productInventory.value as AnyRecord[]).forEach((product: AnyRecord) => {
+      if (product?.id) map.set(product.id as string, product)
+    })
+    return map
+  })
+
+  // ---------------------------------------------------------------------------
+  // Helpers
+  // ---------------------------------------------------------------------------
+
+  const findProductById = (productId: string | null | undefined): AnyRecord | null => {
+    if (!productId) return null
+    return productById.value.get(productId) || null
+  }
+
+  const resolveProductReference = (source: AnyRecord) =>
+    _resolveProductReference(source, findProductById as any)
+  const getProductDisplay = (source: AnyRecord) =>
+    _getProductDisplay(source, findProductById as any)
+
+  // ---------------------------------------------------------------------------
+  // Machine direct products
+  // ---------------------------------------------------------------------------
+
+  const machineDirectProducts = computed(() => {
+    return machineProductLinks.value.map((link) => {
+      const productObj = link.product as AnyRecord | string | null
+      let resolved: AnyRecord | null = null
+      let productId: string | null = null
+
+      if (typeof productObj === 'string') {
+        productId = productObj.split('/').pop() || null
+        resolved = productId ? findProductById(productId) : null
+      } else if (productObj && typeof productObj === 'object') {
+        productId = (productObj as AnyRecord)?.id as string | null
+        // Prefer the embedded product from the structure endpoint — it has richer
+        // data (typeProduct as object, supplierPrice, constructeurs) than the
+        // global products cache which may store typeProduct as an IRI string.
+        const cached = productId ? findProductById(productId) : null
+        resolved = productObj as AnyRecord
+        if (cached) {
+          // Merge: use embedded as base, overlay any non-null cached fields
+          resolved = { ...resolved, ...Object.fromEntries(
+            Object.entries(cached as AnyRecord).filter(([, v]) => v != null && v !== ''),
+          ) }
+          // But always prefer the embedded typeProduct when it's an object
+          if (productObj.typeProduct && typeof productObj.typeProduct === 'object') {
+            resolved.typeProduct = productObj.typeProduct
+          }
+        }
+      }
+
+      const cIds = uniqueConstructeurIds(
+        resolved?.constructeurs,
+        resolved?.constructeurIds,
+      )
+      const resolvedConstructeurs = resolveConstructeurs(
+        cIds,
+        resolved?.constructeurs as any[] || [],
+        constructeurs.value as any,
+      )
+
+      return {
+        id: (resolved?.id as string) || productId || null,
+        linkId: (link.id as string) || (typeof link['@id'] === 'string' ? link['@id'].split('/').pop() : null) || null,
+        name: (resolved?.name as string) || 'Produit inconnu',
+        reference: (resolved?.reference as string) || null,
+        supplierLabel: resolvedConstructeurs.length
+          ? resolvedConstructeurs.map((c) => c.name).filter(Boolean).join(', ') || null
+          : getProductSuppliersLabel(resolved),
+        priceLabel: resolved ? getProductPriceLabel(resolved) : null,
+        groupLabel: ((resolved?.typeProduct as AnyRecord)?.name as string) || '',
+        documents: productId ? (productDocumentsMap.value.get(productId) || []) : [],
+      }
+    })
+  })
+
+  return {
+    // Computed
+    productInventory,
+    productById,
+    machineDirectProducts,
+
+    // Helpers
+    findProductById,
+    resolveProductReference,
+    getProductDisplay,
+
+    // Loading
+    loadProducts,
+  }
+}

app/composables/useMachineDetailUpdates.ts

@@ -0,0 +1,233 @@
+/**
+ * Machine detail page — update/mutation methods.
+ *
+ * Extracted from useMachineDetailData.ts to keep the orchestrator under 500 lines.
+ */
+
+import type { Ref } from 'vue'
+import { uniqueConstructeurIds } from '~/shared/constructeurUtils'
+
+type AnyRecord = Record<string, unknown>
+
+export interface UseMachineDetailUpdatesDeps {
+  machine: Ref<AnyRecord | null>
+  machineName: Ref<string>
+  machineReference: Ref<string>
+  machineSiteId: Ref<string>
+  machineConstructeurIds: Ref<string[]>
+  machineDocumentsLoaded: Ref<boolean>
+  machineComponentLinks: Ref<AnyRecord[]>
+  machinePieceLinks: Ref<AnyRecord[]>
+  machineProductLinks: Ref<AnyRecord[]>
+  applyMachineLinks: (data: AnyRecord) => boolean
+  refreshMachineDocuments: () => Promise<void>
+  transformComponentCustomFields: (items: AnyRecord[]) => AnyRecord[]
+  transformCustomFields: (items: AnyRecord[]) => AnyRecord[]
+  loadProductDocuments: () => Promise<void>
+  upsertCustomFieldValue: (
+    fieldId: string,
+    entityType: string,
+    entityId: string,
+    value: unknown,
+  ) => Promise<unknown>
+  updateMachineApi: (id: string, data: any) => Promise<unknown>
+  updateComposantApi: (id: string, data: any) => Promise<unknown>
+  updatePieceApi: (id: string, data: any) => Promise<unknown>
+  apiPatch: (endpoint: string, data?: unknown) => Promise<any>
+  toast: { showInfo: (msg: string) => void }
+}
+
+export function useMachineDetailUpdates(deps: UseMachineDetailUpdatesDeps) {
+  const {
+    machine,
+    machineName,
+    machineReference,
+    machineSiteId,
+    machineConstructeurIds,
+    machineComponentLinks,
+    machinePieceLinks,
+    applyMachineLinks,
+    loadProductDocuments,
+    transformComponentCustomFields,
+    transformCustomFields,
+    upsertCustomFieldValue,
+    updateMachineApi,
+    updateComposantApi,
+    updatePieceApi,
+    apiPatch,
+    toast,
+  } = deps
+
+  const updateMachineInfo = async () => {
+    if (!machine.value) return
+    try {
+      const cIds = uniqueConstructeurIds(machineConstructeurIds.value)
+      machineConstructeurIds.value = cIds
+
+      const result: any = await updateMachineApi(machine.value.id as string, {
+        name: machineName.value,
+        reference: machineReference.value,
+        siteId: machineSiteId.value || undefined,
+        constructeurIds: cIds,
+      } as any)
+      if (result.success) {
+        const machinePayload =
+          result.data?.machine && typeof result.data.machine === 'object'
+            ? result.data.machine
+            : result.data
+        if (machinePayload && typeof machinePayload === 'object') {
+          machine.value = {
+            ...machine.value,
+            ...machinePayload,
+            documents: machinePayload.documents || machine.value.documents || [],
+            customFieldValues: machinePayload.customFieldValues || machine.value.customFieldValues || [],
+          }
+          machineConstructeurIds.value = uniqueConstructeurIds(
+            machine.value!.constructeurIds,
+            machine.value!.constructeurs,
+            machine.value!.constructeur,
+          )
+          const linksApplied = applyMachineLinks(result.data)
+          if (linksApplied && machine.value) {
+            machine.value.componentLinks = machineComponentLinks.value
+            machine.value.pieceLinks = machinePieceLinks.value
+          }
+          loadProductDocuments().catch(() => {})
+        }
+      }
+    } catch (error) {
+      console.error('Erreur lors de la mise à jour de la machine:', error)
+    }
+  }
+
+  const updateComponent = async (updatedComponent: AnyRecord) => {
+    try {
+      const cIds = uniqueConstructeurIds(
+        updatedComponent.constructeurIds,
+        updatedComponent.constructeurId,
+        updatedComponent.constructeur,
+      )
+      const productId = updatedComponent.productId
+        ? String(updatedComponent.productId)
+        : null
+      const prixStr =
+        updatedComponent.prix !== null &&
+        updatedComponent.prix !== undefined &&
+        String(updatedComponent.prix).trim() !== ''
+          ? String(updatedComponent.prix)
+          : null
+
+      const result: any = await updateComposantApi(updatedComponent.id as string, {
+        name: updatedComponent.name,
+        reference: updatedComponent.reference,
+        constructeurIds: cIds,
+        prix: prixStr,
+        productId,
+      } as any)
+      if (result.success) {
+        const transformed = transformComponentCustomFields([result.data])[0]
+        Object.assign(updatedComponent, transformed)
+      }
+    } catch (error) {
+      console.error('Erreur lors de la mise à jour du composant:', error)
+    }
+  }
+
+  const _buildAndUpdatePiece = async (updatedPiece: AnyRecord) => {
+    const cIds = uniqueConstructeurIds(
+      updatedPiece.constructeurIds,
+      updatedPiece.constructeurId,
+      updatedPiece.constructeur,
+    )
+    const productId = updatedPiece.productId ? String(updatedPiece.productId) : null
+    const prixStr =
+      updatedPiece.prix !== null &&
+      updatedPiece.prix !== undefined &&
+      String(updatedPiece.prix).trim() !== ''
+        ? String(updatedPiece.prix)
+        : null
+
+    const result: any = await updatePieceApi(updatedPiece.id as string, {
+      name: updatedPiece.name,
+      reference: updatedPiece.reference || null,
+      constructeurIds: cIds,
+      prix: prixStr,
+      productId,
+    } as any)
+    if (result.success) {
+      const transformed = transformCustomFields([result.data])[0]
+      Object.assign(updatedPiece, transformed)
+    }
+    return result
+  }
+
+  const updatePieceFromComponent = async (updatedPiece: AnyRecord) => {
+    try {
+      const result = await _buildAndUpdatePiece(updatedPiece)
+      if (result?.success && updatedPiece.customFields) {
+        const fieldsToSave = (updatedPiece.customFields as AnyRecord[]).filter(
+          (field) => field.value !== undefined,
+        )
+        if (fieldsToSave.length) {
+          await Promise.allSettled(
+            fieldsToSave.map((field) =>
+              upsertCustomFieldValue(
+                field.id as string,
+                'piece',
+                updatedPiece.id as string,
+                field.value,
+              ),
+            ),
+          )
+        }
+      }
+
+      // Update slot quantity if this is a composant structure piece
+      const slotId = updatedPiece.slotId as string | null
+      const quantity = typeof updatedPiece.quantity === 'number' ? Math.max(1, updatedPiece.quantity) : null
+      if (slotId && quantity !== null) {
+        await apiPatch(`/composant-piece-slots/${slotId}`, { quantity })
+      }
+    } catch (error) {
+      console.error('Erreur lors de la mise à jour de la pièce:', error)
+    }
+  }
+
+  const updatePieceInfo = async (updatedPiece: AnyRecord) => {
+    try {
+      await _buildAndUpdatePiece(updatedPiece)
+
+      // Update link quantity if this is a direct machine piece
+      const linkId = updatedPiece.linkId || updatedPiece.machinePieceLinkId
+      const quantity = typeof updatedPiece.quantity === 'number' ? Math.max(1, updatedPiece.quantity) : null
+      if (linkId && quantity !== null) {
+        await apiPatch(`/machine_piece_links/${linkId}`, { quantity })
+      }
+    } catch (error) {
+      console.error('Erreur lors de la mise à jour de la pièce:', error)
+    }
+  }
+
+  const handleMachineConstructeurChange = async (value: unknown) => {
+    machineConstructeurIds.value = uniqueConstructeurIds(value)
+    await updateMachineInfo()
+  }
+
+  const editComponent = () => {
+    toast.showInfo('La modification des composants sera bientôt disponible')
+  }
+
+  const editPiece = () => {
+    toast.showInfo('La modification des pièces sera bientôt disponible')
+  }
+
+  return {
+    updateMachineInfo,
+    updateComponent,
+    updatePieceFromComponent,
+    updatePieceInfo,
+    handleMachineConstructeurChange,
+    editComponent,
+    editPiece,
+  }
+}

app/composables/useMachineHierarchy.ts

@@ -181,6 +181,7 @@ export const buildMachineHierarchyFromLinks = (
       parentLinkId: resolveIdentifier(link.parentLinkId, link.parentMachinePieceLinkId, appliedPiece.parentLinkId),
       parentPieceLinkId: resolveIdentifier(link.parentPieceLinkId, appliedPiece.parentPieceLinkId),
       parentPieceId: resolveIdentifier(appliedPiece.parentPieceId, link.parentPieceId),
+      quantity: typeof link.quantity === 'number' ? link.quantity : 1,
       definition: appliedPiece.definition || originalPiece?.definition || {},
       customFields: appliedPiece.customFields || [],
     }
@@ -214,10 +215,39 @@ export const buildMachineHierarchyFromLinks = (
 
     const componentName = (compOverrides?.name || appliedComponent.name || (appliedComponent.definition as AnyRecord)?.alias || (appliedComponent.definition as AnyRecord)?.name || originalComponent?.name || 'Composant') as string
 
-    const pieces = Array.isArray(link.pieceLinks)
+    const linkedPieces = Array.isArray(link.pieceLinks)
       ? (link.pieceLinks as AnyRecord[]).map((pl) => createPieceNode(pl, componentName)).filter(Boolean) as AnyRecord[]
       : []
 
+    // If no linked pieces exist, build read-only entries from the composant's structure
+    const structurePieceDefs = (!linkedPieces.length && appliedComponent.structure && typeof appliedComponent.structure === 'object')
+      ? (Array.isArray((appliedComponent.structure as AnyRecord).pieces) ? (appliedComponent.structure as AnyRecord).pieces as AnyRecord[] : [])
+      : []
+    const structurePieces = structurePieceDefs.map((def, index) => {
+      const definition = (def.definition && typeof def.definition === 'object' ? def.definition : def) as AnyRecord
+      const resolved = (def.resolvedPiece && typeof def.resolvedPiece === 'object' ? def.resolvedPiece : null) as AnyRecord | null
+      const quantity = typeof definition.quantity === 'number' ? definition.quantity : (typeof def.quantity === 'number' ? def.quantity : 1)
+      return {
+        ...(resolved || {}),
+        id: resolved?.id || `structure-piece-${composantId}-${index}`,
+        pieceId: resolved?.id || null,
+        name: resolved?.name || definition.role || definition.name || def.role || def.name || `Pièce ${index + 1}`,
+        reference: resolved?.reference || definition.reference || def.reference || null,
+        prix: resolved?.prix ?? null,
+        constructeurs: resolved?.constructeurs || [],
+        documents: [],
+        quantity,
+        slotId: def.slotId || definition.slotId || null,
+        typePieceId: resolved?.typePieceId || definition.typePieceId || def.typePieceId || null,
+        typePiece: resolved?.typePiece || null,
+        parentComponentLinkId: machineComponentLinkId,
+        parentComponentName: componentName,
+        _structurePiece: true,
+      }
+    }) as AnyRecord[]
+
+    const pieces = linkedPieces.length ? linkedPieces : structurePieces
+
     const subComponents = Array.isArray(link.childLinks)
       ? (link.childLinks as AnyRecord[]).map(createComponentNode).filter(Boolean) as AnyRecord[]
       : []

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/usePieceStructureEditorLogic.ts

@@ -0,0 +1,424 @@
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+import type {
+  PieceModelCustomField,
+  PieceModelCustomFieldType,
+  PieceModelProduct,
+  PieceModelStructure,
+  PieceModelStructureEditorField,
+} from '~/shared/types/inventory'
+import { normalizePieceStructureForSave } from '~/shared/modelUtils'
+import { useProductTypes } from '~/composables/useProductTypes'
+
+export type EditorField = PieceModelStructureEditorField & { uid: string }
+export type EditorProduct = {
+  uid: string
+  typeProductId: string
+  typeProductLabel: string
+  familyCode: string
+}
+
+interface Deps {
+  props: {
+    modelValue?: PieceModelStructure | null
+  }
+  emit: (event: 'update:modelValue', value: PieceModelStructure) => void
+}
+
+// --- Pure helpers ---
+
+const ensureArray = <T,>(value: T[] | null | undefined): T[] =>
+  Array.isArray(value) ? value : []
+
+const normalizeLineEndings = (value: string): string =>
+  value.replace(/\r\n/g, '\n').replace(/\r/g, '\n')
+
+const safeClone = <T,>(value: T, fallback: T): T => {
+  try {
+    return JSON.parse(JSON.stringify(value ?? fallback)) as T
+  }
+  catch {
+    return JSON.parse(JSON.stringify(fallback)) as T
+  }
+}
+
+const extractRest = (structure?: PieceModelStructure | null): Record<string, unknown> => {
+  if (!structure || typeof structure !== 'object') {
+    return {}
+  }
+  const entries = Object.entries(structure).filter(
+    ([key]) => key !== 'customFields' && key !== 'products',
+  )
+  return safeClone(Object.fromEntries(entries), {})
+}
+
+let uidCounter = 0
+const createUid = (scope: 'field' | 'product'): string => {
+  if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+    return crypto.randomUUID()
+  }
+  uidCounter += 1
+  return `piece-${scope}-${Date.now().toString(36)}-${uidCounter}`
+}
+
+// --- Hydration ---
+
+const toEditorField = (
+  input: Partial<PieceModelStructureEditorField> | null | undefined,
+  index: number,
+): EditorField => {
+  const baseType = typeof input?.type === 'string' && input.type ? input.type : 'text'
+  const optionsText = normalizeLineEndings(
+    typeof input?.optionsText === 'string'
+      ? input.optionsText
+      : Array.isArray(input?.options)
+        ? input.options.join('\n')
+        : '',
+  )
+
+  return {
+    uid: createUid('field'),
+    name: typeof input?.name === 'string' ? input.name : '',
+    type: baseType as PieceModelCustomFieldType,
+    required: Boolean(input?.required),
+    optionsText,
+    orderIndex: typeof input?.orderIndex === 'number' ? input.orderIndex : index,
+  }
+}
+
+const hydrateFields = (structure?: PieceModelStructure | null): EditorField[] => {
+  const source = ensureArray(structure?.customFields)
+  return source
+    .map((field, index) => toEditorField(field, index))
+    .sort((a, b) => (a.orderIndex ?? 0) - (b.orderIndex ?? 0))
+    .map((field, index) => ({ ...field, orderIndex: index }))
+}
+
+const toEditorProduct = (
+  input: Partial<PieceModelProduct> | null | undefined,
+): EditorProduct => ({
+  uid: createUid('product'),
+  typeProductId: typeof input?.typeProductId === 'string' ? input.typeProductId : '',
+  typeProductLabel:
+    typeof input?.typeProductLabel === 'string' ? input.typeProductLabel : '',
+  familyCode: typeof input?.familyCode === 'string' ? input.familyCode : '',
+})
+
+const hydrateProducts = (structure?: PieceModelStructure | null): EditorProduct[] => {
+  const source = Array.isArray(structure?.products) ? structure?.products : []
+  return source.map(product => toEditorProduct(product))
+}
+
+// --- Payload ---
+
+const applyOrderIndex = (list: EditorField[]): EditorField[] =>
+  list.map((field, index) => ({
+    ...field,
+    orderIndex: index,
+  }))
+
+const normalizeProductEntry = (product: EditorProduct): PieceModelProduct | null => {
+  const typeProductId = typeof product.typeProductId === 'string' ? product.typeProductId.trim() : ''
+  const familyCode = typeof product.familyCode === 'string' ? product.familyCode.trim() : ''
+
+  if (!typeProductId && !familyCode) {
+    return null
+  }
+
+  const payload: PieceModelProduct = {}
+  if (typeProductId) {
+    payload.typeProductId = typeProductId
+  }
+  if (familyCode) {
+    payload.familyCode = familyCode
+  }
+  if (product.typeProductLabel) {
+    payload.typeProductLabel = product.typeProductLabel
+  }
+  return payload
+}
+
+const buildPayload = (
+  fieldsSource: EditorField[],
+  productsSource: EditorProduct[],
+  restSource: Record<string, unknown>,
+): PieceModelStructure => {
+  const normalizedFields = fieldsSource
+    .map<PieceModelCustomField | null>((field, index) => {
+      const name = field.name.trim()
+      if (!name) {
+        return null
+      }
+
+      const type = (field.type || 'text') as PieceModelCustomFieldType
+      const required = Boolean(field.required)
+      const payload: PieceModelCustomField = {
+        name,
+        type,
+        required,
+        orderIndex: index,
+      }
+
+      if (type === 'select') {
+        const options = normalizeLineEndings(field.optionsText)
+          .split('\n')
+          .map(option => option.trim())
+          .filter(option => option.length > 0)
+        if (options.length > 0) {
+          payload.options = options
+        }
+      }
+
+      return payload
+    })
+    .filter((field): field is PieceModelCustomField => Boolean(field))
+
+  const normalizedProducts = productsSource
+    .map(product => normalizeProductEntry(product))
+    .filter((product): product is PieceModelProduct => Boolean(product))
+
+  const draft: PieceModelStructure = {
+    ...safeClone(restSource, {}),
+    products: normalizedProducts,
+    customFields: normalizedFields,
+  }
+
+  return normalizePieceStructureForSave(draft)
+}
+
+const serializeStructure = (structure?: PieceModelStructure | null): string => {
+  return JSON.stringify(normalizePieceStructureForSave(structure ?? { customFields: [] }))
+}
+
+// --- Composable ---
+
+export function usePieceStructureEditorLogic(deps: Deps) {
+  const { props, emit } = deps
+  const { productTypes, loadProductTypes } = useProductTypes()
+
+  // --- State ---
+
+  const fields = ref<EditorField[]>(hydrateFields(props.modelValue))
+  const products = ref<EditorProduct[]>(hydrateProducts(props.modelValue))
+  const restState = ref<Record<string, unknown>>(extractRest(props.modelValue))
+
+
+  // --- Product types ---
+
+  const productTypeOptions = computed(() => productTypes.value ?? [])
+
+  const productTypeMap = computed(() => {
+    const map = new Map<string, any>()
+    productTypeOptions.value.forEach((type: any) => {
+      if (type?.id) {
+        map.set(type.id, type)
+      }
+    })
+    return map
+  })
+
+  const formatProductTypeOption = (type: any) => {
+    if (!type) {
+      return ''
+    }
+    const parts: string[] = []
+    if (type.code) {
+      parts.push(type.code)
+    }
+    if (type.name) {
+      parts.push(type.name)
+    }
+    return parts.length ? parts.join(' • ') : type.id || ''
+  }
+
+  const updateProductTypeMetadata = (product: EditorProduct) => {
+    const option = product.typeProductId
+      ? productTypeMap.value.get(product.typeProductId)
+      : null
+    product.typeProductLabel = option?.name ?? ''
+  }
+
+  const handleProductTypeSelect = (product: EditorProduct) => {
+    const option = product.typeProductId
+      ? productTypeMap.value.get(product.typeProductId)
+      : null
+    product.typeProductLabel = option?.name ?? ''
+    if (option?.code) {
+      product.familyCode = option.code
+    }
+  }
+
+  // --- CRUD ---
+
+  const createEmptyProduct = (): EditorProduct => ({
+    uid: createUid('product'),
+    typeProductId: '',
+    typeProductLabel: '',
+    familyCode: '',
+  })
+
+  const addProduct = () => {
+    products.value.push(createEmptyProduct())
+  }
+
+  const removeProduct = (index: number) => {
+    products.value = products.value.filter((_, idx) => idx !== index)
+  }
+
+  const createEmptyField = (orderIndex: number): EditorField => ({
+    uid: createUid('field'),
+    name: '',
+    type: 'text',
+    required: false,
+    optionsText: '',
+    orderIndex,
+  })
+
+  const addField = () => {
+    const next = fields.value.slice()
+    next.push(createEmptyField(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 reorderFields = (from: number, to: number) => {
+    if (from === to) {
+      resetDragState()
+      return
+    }
+
+    const list = fields.value.slice()
+    if (from < 0 || to < 0 || from >= list.length || to >= list.length) {
+      resetDragState()
+      return
+    }
+
+    const [moved] = list.splice(from, 1)
+    if (!moved) {
+      resetDragState()
+      return
+    }
+    list.splice(to, 0, moved)
+    fields.value = applyOrderIndex(list)
+    resetDragState()
+  }
+
+  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) => {
+    if (dragState.draggingIndex === null) {
+      resetDragState()
+      return
+    }
+    reorderFields(dragState.draggingIndex, index)
+  }
+
+  const onDragEnd = () => {
+    resetDragState()
+  }
+
+  const reorderClass = (index: number) => {
+    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 ''
+  }
+
+  // --- Emit ---
+
+  let lastEmitted = serializeStructure(props.modelValue)
+
+  const emitUpdate = () => {
+    const payload = buildPayload(fields.value, products.value, restState.value)
+    const serialized = JSON.stringify(payload)
+    if (serialized !== lastEmitted) {
+      lastEmitted = serialized
+      emit('update:modelValue', payload)
+    }
+  }
+
+  // --- Watchers ---
+
+  watch(fields, emitUpdate, { deep: true })
+  watch(products, emitUpdate, { deep: true })
+  watch(productTypeOptions, () => {
+    products.value.forEach(product => updateProductTypeMetadata(product))
+  })
+
+  watch(
+    () => props.modelValue,
+    (value) => {
+      const incomingSerialized = serializeStructure(value)
+      if (incomingSerialized === lastEmitted) {
+        return
+      }
+      restState.value = extractRest(value)
+      fields.value = hydrateFields(value)
+      products.value = hydrateProducts(value)
+      products.value.forEach(product => updateProductTypeMetadata(product))
+      lastEmitted = incomingSerialized
+    },
+    { deep: true },
+  )
+
+  // --- Lifecycle ---
+
+  onMounted(async () => {
+    if (!productTypeOptions.value.length) {
+      await loadProductTypes()
+    }
+    products.value.forEach(product => updateProductTypeMetadata(product))
+  })
+
+  return {
+    fields,
+    products,
+    productTypeOptions,
+    formatProductTypeOption,
+    handleProductTypeSelect,
+    addProduct,
+    removeProduct,
+    addField,
+    removeField,
+    reorderClass,
+    onDragStart,
+    onDragEnter,
+    onDrop,
+    onDragEnd,
+  }
+}

app/composables/useSiteManagement.ts

@@ -10,6 +10,7 @@ import { canPreviewDocument } from '~/utils/documentPreview'
 
 type SiteForm = {
   name: string
+  color: string
   contactName: string
   contactPhone: string
   contactAddress: string
@@ -31,6 +32,7 @@ type SiteDocument = {
 type SiteWithDocuments = {
   id: string
   name?: string
+  color?: string
   contactName?: string
   contactPhone?: string
   contactAddress?: string
@@ -54,6 +56,7 @@ export function useSiteManagement() {
 
   const newSite = reactive<SiteForm>({
     name: '',
+    color: '',
     contactName: '',
     contactPhone: '',
     contactAddress: '',
@@ -63,6 +66,7 @@ export function useSiteManagement() {
 
   const editSiteForm = reactive<SiteForm>({
     name: '',
+    color: '',
     contactName: '',
     contactPhone: '',
     contactAddress: '',
@@ -81,6 +85,7 @@ export function useSiteManagement() {
 
   const resetNewSite = () => {
     newSite.name = ''
+    newSite.color = ''
     newSite.contactName = ''
     newSite.contactPhone = ''
     newSite.contactAddress = ''
@@ -101,6 +106,7 @@ export function useSiteManagement() {
   const handleCreateSite = async () => {
     const result = await createSite({
       name: newSite.name,
+      color: newSite.color,
       contactName: newSite.contactName,
       contactPhone: newSite.contactPhone,
       contactAddress: newSite.contactAddress,
@@ -116,6 +122,7 @@ export function useSiteManagement() {
   const editSite = (site: SiteWithDocuments) => {
     siteBeingEdited.value = site
     editSiteForm.name = site.name || ''
+    editSiteForm.color = site.color || ''
     editSiteForm.contactName = site.contactName || ''
     editSiteForm.contactPhone = site.contactPhone || ''
     editSiteForm.contactAddress = site.contactAddress || ''
@@ -148,6 +155,7 @@ export function useSiteManagement() {
 
     const baseUpdate = {
       name: editSiteForm.name,
+      color: editSiteForm.color,
       contactName: editSiteForm.contactName,
       contactPhone: editSiteForm.contactPhone,
       contactAddress: editSiteForm.contactAddress,

app/composables/useSites.ts

@@ -6,6 +6,7 @@ import { extractCollection } from '~/shared/utils/apiHelpers'
 export interface Site {
   id: string
   name?: string
+  color?: string
   contactName?: string
   contactPhone?: string
   contactAddress?: string

app/composables/useStructureAssignmentFetch.ts

@@ -0,0 +1,366 @@
+import { computed, ref, watch } from 'vue'
+import { useApi } from '~/composables/useApi'
+import { extractCollection } from '~/shared/utils/apiHelpers'
+import {
+  componentOptionDescription,
+  componentOptionLabel,
+  describePieceRequirement as _describePieceRequirement,
+  describeProductRequirement as _describeProductRequirement,
+  pieceOptionDescription,
+  pieceOptionLabel,
+  productOptionDescription,
+  productOptionLabel,
+} from '~/shared/utils/structureAssignmentLabels'
+import type {
+  ComponentOption,
+  PieceOption,
+  ProductOption,
+  StructureAssignmentNode,
+  StructurePieceAssignment,
+  StructureProductAssignment,
+} from '~/shared/utils/structureAssignmentLabels'
+
+export type {
+  ComponentOption,
+  PieceOption,
+  ProductOption,
+  StructureAssignmentNode,
+  StructurePieceAssignment,
+  StructureProductAssignment,
+} from '~/shared/utils/structureAssignmentLabels'
+
+export interface StructureAssignmentFetchDeps {
+  assignment: StructureAssignmentNode
+  pieces: PieceOption[] | null
+  products: ProductOption[] | null
+  components: ComponentOption[] | null
+  isRoot: () => boolean
+  pieceTypeLabelMap: Record<string, string>
+  productTypeLabelMap: Record<string, string>
+  componentTypeLabelMap: Record<string, string>
+}
+
+export function useStructureAssignmentFetch(deps: StructureAssignmentFetchDeps) {
+  const { get } = useApi()
+
+  const pieceOptionsByPath = ref<Record<string, PieceOption[]>>({})
+  const productOptionsByPath = ref<Record<string, ProductOption[]>>({})
+  const componentOptionsByPath = ref<Record<string, ComponentOption[]>>({})
+  const pieceLoadingByPath = ref<Record<string, boolean>>({})
+  const productLoadingByPath = ref<Record<string, boolean>>({})
+  const componentLoadingByPath = ref<Record<string, boolean>>({})
+
+  const setLoading = (target: Record<string, boolean>, key: string, value: boolean) => {
+    target[key] = value
+  }
+
+  const typeIri = (id: string) => `/api/model_types/${id}`
+  const primedPiecePaths = new Set<string>()
+  const primedProductPaths = new Set<string>()
+  const primedComponentPaths = new Set<string>()
+
+  // --- Component options ---
+
+  const componentOptions = computed(() => {
+    if (deps.isRoot()) {
+      return []
+    }
+    const cached = componentOptionsByPath.value[deps.assignment.path]
+    if (cached) {
+      return cached
+    }
+    const definition = deps.assignment.definition || {}
+    const requiredTypeId =
+      definition.typeComposantId || definition.modelId || null
+    const requiredFamilyCode = definition.familyCode || null
+
+    return (deps.components || []).filter((component) => {
+      if (!component || typeof component !== 'object') {
+        return false
+      }
+      if (requiredTypeId) {
+        return component.typeComposantId === requiredTypeId
+      }
+      if (requiredFamilyCode) {
+        return (
+          component.typeComposant?.code === requiredFamilyCode
+          || component.typeComposantId === requiredFamilyCode
+        )
+      }
+      return true
+    })
+  })
+
+  const fetchComponentOptions = async (term = '') => {
+    if (deps.isRoot()) {
+      return
+    }
+    const key = deps.assignment.path
+    if (componentLoadingByPath.value[key]) {
+      return
+    }
+
+    const definition = deps.assignment.definition || {}
+    const requiredTypeId =
+      definition.typeComposantId || definition.modelId || definition.typeComposant?.id || null
+
+    const params = new URLSearchParams()
+    params.set('itemsPerPage', '50')
+    if (term.trim()) {
+      params.set('name', term.trim())
+    }
+    if (requiredTypeId) {
+      params.set('typeComposant', typeIri(requiredTypeId))
+    }
+
+    setLoading(componentLoadingByPath.value, key, true)
+    try {
+      const result = await get(`/composants?${params.toString()}`)
+      if (result.success) {
+        componentOptionsByPath.value[key] = extractCollection(result.data)
+      }
+    }
+    finally {
+      setLoading(componentLoadingByPath.value, key, false)
+    }
+  }
+
+  // --- Piece options ---
+
+  const getPieceOptions = (assignment: StructurePieceAssignment) => {
+    const cached = pieceOptionsByPath.value[assignment.path]
+    if (cached) {
+      return cached
+    }
+    const definition = assignment.definition
+    const requiredTypeId =
+      definition.typePieceId
+      || definition.typePiece?.id
+      || definition.familyCode
+      || null
+
+    return (deps.pieces || []).filter((piece) => {
+      if (!piece || typeof piece !== 'object') {
+        return false
+      }
+      if (!requiredTypeId) {
+        return true
+      }
+      if (definition.typePieceId || definition.typePiece?.id) {
+        return (
+          piece.typePieceId === requiredTypeId
+          || piece.typePiece?.id === requiredTypeId
+        )
+      }
+      if (definition.familyCode) {
+        return (
+          piece.typePiece?.code === requiredTypeId
+          || piece.typePieceId === requiredTypeId
+        )
+      }
+      return false
+    })
+  }
+
+  const fetchPieceOptions = async (assignment: StructurePieceAssignment, term = '') => {
+    const key = assignment.path
+    if (pieceLoadingByPath.value[key]) {
+      return
+    }
+
+    const definition = assignment.definition || {}
+    const requiredTypeId =
+      definition.typePieceId || definition.typePiece?.id || null
+
+    const params = new URLSearchParams()
+    params.set('itemsPerPage', '50')
+    if (term.trim()) {
+      params.set('name', term.trim())
+    }
+    if (requiredTypeId) {
+      params.set('typePiece', typeIri(requiredTypeId))
+    }
+
+    setLoading(pieceLoadingByPath.value, key, true)
+    try {
+      const result = await get(`/pieces?${params.toString()}`)
+      if (result.success) {
+        pieceOptionsByPath.value[key] = extractCollection(result.data)
+      }
+    }
+    finally {
+      setLoading(pieceLoadingByPath.value, key, false)
+    }
+  }
+
+  const describePieceRequirement = (assignment: StructurePieceAssignment) => {
+    const options = getPieceOptions(assignment)
+    return _describePieceRequirement(assignment, options, deps.pieceTypeLabelMap)
+  }
+
+  // --- Product options ---
+
+  const getProductOptions = (assignment: StructureProductAssignment) => {
+    const cached = productOptionsByPath.value[assignment.path]
+    if (cached) {
+      return cached
+    }
+    const definition = assignment.definition
+    const requiredTypeId =
+      definition.typeProductId
+      || definition.typeProduct?.id
+      || definition.familyCode
+      || null
+
+    return (deps.products || []).filter((product) => {
+      if (!product || typeof product !== 'object') {
+        return false
+      }
+      if (!requiredTypeId) {
+        return true
+      }
+      if (definition.typeProductId || definition.typeProduct?.id) {
+        return (
+          product.typeProductId === requiredTypeId
+          || product.typeProduct?.id === requiredTypeId
+        )
+      }
+      if (definition.familyCode) {
+        return (
+          product.typeProduct?.code === requiredTypeId
+          || product.typeProductId === requiredTypeId
+        )
+      }
+      return false
+    })
+  }
+
+  const fetchProductOptions = async (assignment: StructureProductAssignment, term = '') => {
+    const key = assignment.path
+    if (productLoadingByPath.value[key]) {
+      return
+    }
+
+    const definition = assignment.definition || {}
+    const requiredTypeId =
+      definition.typeProductId || definition.typeProduct?.id || null
+
+    const params = new URLSearchParams()
+    params.set('itemsPerPage', '50')
+    if (term.trim()) {
+      params.set('name', term.trim())
+    }
+    if (requiredTypeId) {
+      params.set('typeProduct', typeIri(requiredTypeId))
+    }
+
+    setLoading(productLoadingByPath.value, key, true)
+    try {
+      const result = await get(`/products?${params.toString()}`)
+      if (result.success) {
+        productOptionsByPath.value[key] = extractCollection(result.data)
+      }
+    }
+    finally {
+      setLoading(productLoadingByPath.value, key, false)
+    }
+  }
+
+  const describeProductRequirement = (assignment: StructureProductAssignment) => {
+    const options = getProductOptions(assignment)
+    return _describeProductRequirement(assignment, options, deps.productTypeLabelMap)
+  }
+
+  // --- Watchers ---
+
+  watch(
+    componentOptions,
+    (options) => {
+      if (deps.isRoot()) {
+        return
+      }
+      const hasMatch = options.some(
+        (component) => component.id === deps.assignment.selectedComponentId,
+      )
+      if (!hasMatch) {
+        deps.assignment.selectedComponentId = ''
+      }
+    },
+    { immediate: true },
+  )
+
+  watch(
+    () => [deps.pieces, deps.assignment.pieces],
+    () => {
+      for (const pieceAssignment of deps.assignment.pieces) {
+        const options = getPieceOptions(pieceAssignment)
+        if (
+          pieceAssignment.selectedPieceId
+          && !options.some((piece) => piece.id === pieceAssignment.selectedPieceId)
+        ) {
+          pieceAssignment.selectedPieceId = ''
+        }
+        if (!primedPiecePaths.has(pieceAssignment.path) && !pieceOptionsByPath.value[pieceAssignment.path]) {
+          primedPiecePaths.add(pieceAssignment.path)
+          fetchPieceOptions(pieceAssignment).catch(() => {})
+        }
+      }
+    },
+    { deep: true, immediate: true },
+  )
+
+  watch(
+    () => [deps.products, deps.assignment.products],
+    () => {
+      for (const productAssignment of deps.assignment.products) {
+        const options = getProductOptions(productAssignment)
+        if (
+          productAssignment.selectedProductId
+          && !options.some((product) => product.id === productAssignment.selectedProductId)
+        ) {
+          productAssignment.selectedProductId = ''
+        }
+        if (!primedProductPaths.has(productAssignment.path) && !productOptionsByPath.value[productAssignment.path]) {
+          primedProductPaths.add(productAssignment.path)
+          fetchProductOptions(productAssignment).catch(() => {})
+        }
+      }
+    },
+    { deep: true, immediate: true },
+  )
+
+  watch(
+    () => deps.assignment.definition,
+    () => {
+      if (deps.isRoot()) {
+        return
+      }
+      const key = deps.assignment.path
+      if (!primedComponentPaths.has(key) && !componentOptionsByPath.value[key]) {
+        primedComponentPaths.add(key)
+        fetchComponentOptions().catch(() => {})
+      }
+    },
+    { immediate: true },
+  )
+
+  return {
+    pieceLoadingByPath,
+    productLoadingByPath,
+    componentLoadingByPath,
+    componentOptions,
+    componentOptionLabel,
+    componentOptionDescription,
+    fetchComponentOptions,
+    getPieceOptions,
+    pieceOptionLabel,
+    pieceOptionDescription,
+    fetchPieceOptions,
+    describePieceRequirement,
+    getProductOptions,
+    productOptionLabel,
+    productOptionDescription,
+    fetchProductOptions,
+    describeProductRequirement,
+  }
+}

app/composables/useStructureNodeCrud.ts

@@ -0,0 +1,161 @@
+import type { EditableStructureNode } from '~/composables/useStructureNodeLogic'
+
+export interface StructureNodeCrudDeps {
+  node: EditableStructureNode
+  canManageSubcomponents: () => boolean
+}
+
+export function useStructureNodeCrud(props: StructureNodeCrudDeps) {
+  // --- Helpers ---
+  const ensureArray = (key: 'customFields' | 'pieces' | 'products' | 'subcomponents') => {
+    if (!Array.isArray((props.node as any)[key])) {
+      if (key === 'subcomponents') {
+        props.node.subcomponents = []
+      } else if (key === 'products') {
+        props.node.products = []
+      } else {
+        (props.node as any)[key] = []
+      }
+    }
+  }
+
+  // --- Custom field reindex ---
+  const reindexCustomFields = () => {
+    if (!Array.isArray(props.node.customFields)) {
+      return
+    }
+    props.node.customFields.forEach((field: any, index: number) => {
+      if (!field || typeof field !== 'object') {
+        return
+      }
+      field.orderIndex = index
+    })
+  }
+
+  // --- Drag reorder ---
+  const customFieldDrag = useDragReorder(
+    () => props.node.customFields,
+    { onReorder: reindexCustomFields },
+  )
+
+  const pieceDrag = useDragReorder(() => props.node.pieces)
+  const productDrag = useDragReorder(() => props.node.products)
+  const subcomponentDrag = useDragReorder(
+    () => props.node.subcomponents,
+    { draggingClass: 'ring-2 ring-primary', dropTargetClass: 'ring-2 ring-primary/70' },
+  )
+
+  // --- CRUD functions ---
+  const addCustomField = () => {
+    ensureArray('customFields')
+    const fields = props.node.customFields!
+    const nextIndex = fields.length
+    fields.push({
+      name: '',
+      type: 'text',
+      required: false,
+      optionsText: '',
+      options: [],
+      orderIndex: nextIndex,
+    })
+    reindexCustomFields()
+  }
+
+  const removeCustomField = (index: number) => {
+    if (!Array.isArray(props.node.customFields)) return
+    props.node.customFields.splice(index, 1)
+    reindexCustomFields()
+  }
+
+  const addPiece = () => {
+    ensureArray('pieces')
+    props.node.pieces!.push({
+      typePieceId: '',
+      typePieceLabel: '',
+      reference: '',
+      familyCode: '',
+      role: '',
+      quantity: 1,
+    })
+  }
+
+  const removePiece = (index: number) => {
+    if (!Array.isArray(props.node.pieces)) return
+    props.node.pieces.splice(index, 1)
+  }
+
+  const addProduct = () => {
+    ensureArray('products')
+    props.node.products!.push({
+      typeProductId: '',
+      typeProductLabel: '',
+      familyCode: '',
+    })
+  }
+
+  const removeProduct = (index: number) => {
+    if (!Array.isArray(props.node.products)) return
+    props.node.products.splice(index, 1)
+  }
+
+  const addSubComponent = () => {
+    if (!props.canManageSubcomponents()) {
+      return
+    }
+    ensureArray('subcomponents')
+    props.node.subcomponents.push({
+      typeComposantId: '',
+      typeComposantLabel: '',
+      modelId: '',
+      familyCode: '',
+      alias: '',
+      subcomponents: [],
+    })
+  }
+
+  const removeSubComponent = (index: number) => {
+    if (!Array.isArray(props.node.subcomponents)) return
+    props.node.subcomponents.splice(index, 1)
+  }
+
+  return {
+    // Helpers exposed for watchers
+    reindexCustomFields,
+    // CRUD
+    addCustomField,
+    removeCustomField,
+    addPiece,
+    removePiece,
+    addProduct,
+    removeProduct,
+    addSubComponent,
+    removeSubComponent,
+    // Drag reorder — custom fields
+    onCustomFieldDragStart: customFieldDrag.onDragStart,
+    onCustomFieldDragEnter: customFieldDrag.onDragEnter,
+    onCustomFieldDrop: customFieldDrag.onDrop,
+    onCustomFieldDragEnd: customFieldDrag.onDragEnd,
+    customFieldReorderClass: customFieldDrag.reorderClass,
+    // Drag reorder — pieces
+    onPieceDragStart: pieceDrag.onDragStart,
+    onPieceDragEnter: pieceDrag.onDragEnter,
+    onPieceDragOver: pieceDrag.onDragOver,
+    onPieceDrop: pieceDrag.onDrop,
+    onPieceDragEnd: pieceDrag.onDragEnd,
+    pieceReorderClass: pieceDrag.reorderClass,
+    // Drag reorder — products
+    onProductDragStart: productDrag.onDragStart,
+    onProductDragEnter: productDrag.onDragEnter,
+    onProductDragOver: productDrag.onDragOver,
+    onProductDrop: productDrag.onDrop,
+    onProductDragEnd: productDrag.onDragEnd,
+    productReorderClass: productDrag.reorderClass,
+    // Drag reorder — subcomponents
+    onSubcomponentDragStart: subcomponentDrag.onDragStart,
+    onSubcomponentDragEnter: subcomponentDrag.onDragEnter,
+    onSubcomponentDragOver: subcomponentDrag.onDragOver,
+    onSubcomponentDrop: subcomponentDrag.onDrop,
+    onSubcomponentDragEnd: subcomponentDrag.onDragEnd,
+    subcomponentReorderClass: subcomponentDrag.reorderClass,
+  }
+}

app/composables/useStructureNodeLogic.ts

@@ -0,0 +1,453 @@
+import { computed, watch } from 'vue'
+import type { ComponentModelPiece, ComponentModelProduct, ComponentModelStructureNode } from '~/shared/types/inventory'
+import { useStructureNodeCrud } from '~/composables/useStructureNodeCrud'
+
+export type ModelTypeOption = {
+  id: string
+  name: string
+  code?: string | null
+}
+
+export type EditableStructureNode = ComponentModelStructureNode & {
+  customFields?: any[]
+  pieces?: ComponentModelPiece[]
+  products?: ComponentModelProduct[]
+}
+
+export interface StructureNodeLogicDeps {
+  node: EditableStructureNode
+  depth: number
+  componentTypes: ModelTypeOption[]
+  pieceTypes: ModelTypeOption[]
+  productTypes: ModelTypeOption[]
+  isRoot: boolean
+  lockType: boolean
+  lockedTypeLabel: string
+  allowSubcomponents: boolean
+  maxSubcomponentDepth: number
+  isLocked: boolean
+}
+
+export function useStructureNodeLogic(props: StructureNodeLogicDeps) {
+  // --- Computed props ---
+  const isLocked = computed(() => props.isLocked === true)
+
+  const componentTypes = computed(() => props.componentTypes ?? [])
+  const pieceTypes = computed(() => props.pieceTypes ?? [])
+  const productTypes = computed(() => props.productTypes ?? [])
+  const allowSubcomponents = computed(() => props.allowSubcomponents !== false)
+  const maxSubcomponentDepth = computed(() =>
+    typeof props.maxSubcomponentDepth === 'number' ? props.maxSubcomponentDepth : Infinity,
+  )
+  const currentDepth = computed(() => Math.max(0, props.depth ?? 0))
+  const canManageSubcomponents = computed(
+    () => allowSubcomponents.value && currentDepth.value < maxSubcomponentDepth.value,
+  )
+  const childAllowSubcomponents = computed(
+    () => allowSubcomponents.value && currentDepth.value + 1 < maxSubcomponentDepth.value,
+  )
+  const hasSubcomponents = computed(
+    () => Array.isArray(props.node?.subcomponents) && props.node.subcomponents.length > 0,
+  )
+
+  const depthClasses = ['', 'ml-4', 'ml-8', 'ml-12', 'ml-16', 'ml-20']
+  const containerClass = computed(() => {
+    const level = currentDepth.value
+    const index = Math.min(level, depthClasses.length - 1)
+    return level === 0 ? 'space-y-4' : `${depthClasses[index]} space-y-4`
+  })
+
+  const headingClass = computed(() => (props.isRoot ? 'text-sm font-semibold' : 'text-xs font-semibold'))
+
+  // --- Type maps ---
+  const formatModelTypeOption = (type: ModelTypeOption | undefined | null) =>
+    type?.name ?? ''
+
+  const componentTypeMap = computed(() => {
+    const map = new Map<string, ModelTypeOption>()
+    componentTypes.value.forEach((type) => {
+      if (type && typeof type.id === 'string') {
+        map.set(type.id, type)
+      }
+    })
+    return map
+  })
+
+  const componentTypeCodeMap = computed(() => {
+    const map = new Map<string, ModelTypeOption>()
+    componentTypes.value.forEach((type) => {
+      const code = typeof type?.code === 'string' ? type.code.trim() : ''
+      if (code) {
+        map.set(code, type)
+      }
+    })
+    return map
+  })
+
+  const pieceTypeMap = computed(() => {
+    const map = new Map<string, ModelTypeOption>()
+    pieceTypes.value.forEach((type) => {
+      if (type && typeof type.id === 'string') {
+        map.set(type.id, type)
+      }
+    })
+    return map
+  })
+
+  const productTypeMap = computed(() => {
+    const map = new Map<string, ModelTypeOption>()
+    productTypes.value.forEach((type) => {
+      if (type && typeof type.id === 'string') {
+        map.set(type.id, type)
+      }
+    })
+    return map
+  })
+
+  // --- Label getters ---
+  const getComponentTypeLabel = (id?: string) => {
+    if (!id) return ''
+    return formatModelTypeOption(componentTypeMap.value.get(id))
+  }
+
+  const getPieceTypeLabel = (id?: string) => {
+    if (!id) return ''
+    return formatModelTypeOption(pieceTypeMap.value.get(id))
+  }
+
+  const formatComponentTypeOption = (type: ModelTypeOption | undefined | null) =>
+    formatModelTypeOption(type)
+
+  const formatPieceTypeOption = (type: ModelTypeOption | undefined | null) =>
+    formatModelTypeOption(type)
+
+  const formatProductTypeOption = (type: ModelTypeOption | undefined | null) =>
+    formatModelTypeOption(type)
+
+  const lockedTypeDisplay = computed(() => {
+    if (props.lockedTypeLabel) {
+      return props.lockedTypeLabel
+    }
+    return getComponentTypeLabel(props.node?.typeComposantId) || 'Famille non définie'
+  })
+
+  // --- Sync functions ---
+  const syncComponentType = (component: EditableStructureNode) => {
+    if (!component) {
+      return
+    }
+    if (props.isRoot) {
+      component.typeComposantId = ''
+      component.typeComposantLabel = ''
+      component.familyCode = ''
+      if (component.alias) {
+        component.alias = ''
+      }
+      return
+    }
+    const id = typeof component.typeComposantId === 'string'
+      ? component.typeComposantId
+      : ''
+
+    if (!id) {
+      const code =
+        typeof component.familyCode === 'string' && component.familyCode
+          ? component.familyCode
+          : ''
+      if (code) {
+        const codeMatch = componentTypeCodeMap.value.get(code)
+        if (codeMatch?.id) {
+          component.typeComposantId = codeMatch.id
+          component.typeComposantLabel = formatModelTypeOption(codeMatch)
+          component.familyCode = codeMatch.code ?? component.familyCode
+          if (!component.alias || component.alias === '' || component.alias === lockedTypeDisplay.value) {
+            component.alias = codeMatch.name || component.typeComposantLabel
+          }
+          return
+        }
+      }
+      component.typeComposantLabel = ''
+      component.familyCode = ''
+      return
+    }
+
+    const option = componentTypeMap.value.get(id)
+    if (!option) {
+      component.typeComposantLabel = ''
+      component.familyCode = ''
+      return
+    }
+
+    component.typeComposantLabel = formatModelTypeOption(option)
+    component.familyCode = option.code ?? component.familyCode
+    if (!component.alias || component.alias === '' || component.alias === lockedTypeDisplay.value) {
+      component.alias = option.name || component.typeComposantLabel
+    }
+  }
+
+  const updatePieceTypeLabel = (piece: ComponentModelPiece & Record<string, any>) => {
+    if (!piece) return
+
+    if (piece.typePieceId) {
+      const option = pieceTypeMap.value.get(piece.typePieceId)
+      if (option) {
+        piece.typePieceLabel = formatPieceTypeOption(option)
+        return
+      }
+    }
+
+    if (piece.typePieceLabel) {
+      const normalized = piece.typePieceLabel.trim().toLowerCase()
+      if (normalized) {
+        const match = pieceTypes.value.find((type) => {
+          const formatted = formatPieceTypeOption(type).toLowerCase()
+          const name = (type?.name ?? '').toLowerCase()
+          const code = (type?.code ?? '').toLowerCase()
+          return formatted === normalized || name === normalized || (!!code && code === normalized)
+        })
+        if (match) {
+          piece.typePieceId = match.id
+          piece.typePieceLabel = formatPieceTypeOption(match)
+          return
+        }
+      }
+    }
+  }
+
+  const updateProductTypeLabel = (product: ComponentModelProduct & Record<string, any>) => {
+    if (!product) return
+
+    if (product.typeProductId) {
+      const option = productTypeMap.value.get(product.typeProductId)
+      if (option) {
+        product.typeProductLabel = formatProductTypeOption(option)
+        product.familyCode = option.code ?? product.familyCode ?? ''
+        return
+      }
+    }
+
+    if (product.typeProductLabel) {
+      const normalized = product.typeProductLabel.trim().toLowerCase()
+      if (normalized) {
+        const match = productTypes.value.find((type) => {
+          const formatted = formatProductTypeOption(type).toLowerCase()
+          const name = (type?.name ?? '').toLowerCase()
+          const code = (type?.code ?? '').toLowerCase()
+          return formatted === normalized || name === normalized || (!!code && code === normalized)
+        })
+        if (match) {
+          product.typeProductId = match.id
+          product.typeProductLabel = formatProductTypeOption(match)
+          product.familyCode = match.code ?? product.familyCode ?? ''
+          return
+        }
+      }
+    }
+  }
+
+  const syncPieceLabels = (pieces?: any[]) => {
+    if (!Array.isArray(pieces)) {
+      return
+    }
+    pieces.forEach((piece) => {
+      updatePieceTypeLabel(piece)
+    })
+  }
+
+  const syncProductLabels = (products?: any[]) => {
+    if (!Array.isArray(products)) {
+      return
+    }
+    products.forEach((product) => {
+      updateProductTypeLabel(product)
+    })
+  }
+
+  // --- Handler functions ---
+  const handleComponentTypeSelect = (component: any) => {
+    syncComponentType(component)
+  }
+
+  const handlePieceTypeSelect = (piece: ComponentModelPiece & Record<string, any>) => {
+    if (!piece) {
+      return
+    }
+    const id = typeof piece.typePieceId === 'string' ? piece.typePieceId : ''
+    if (!id) {
+      piece.typePieceLabel = ''
+      return
+    }
+    const option = pieceTypeMap.value.get(id)
+    if (!option) {
+      piece.typePieceId = ''
+      piece.typePieceLabel = ''
+      return
+    }
+    piece.typePieceLabel = formatPieceTypeOption(option)
+  }
+
+  const handleProductTypeSelect = (product: ComponentModelProduct & Record<string, any>) => {
+    if (!product) {
+      return
+    }
+    const id = typeof product.typeProductId === 'string' ? product.typeProductId : ''
+    if (!id) {
+      product.typeProductLabel = ''
+      return
+    }
+    const option = productTypeMap.value.get(id)
+    if (!option) {
+      product.typeProductId = ''
+      product.typeProductLabel = ''
+      return
+    }
+    product.typeProductLabel = formatProductTypeOption(option)
+    product.familyCode = option.code ?? product.familyCode ?? ''
+  }
+
+  // --- CRUD & Lock (delegated to useStructureNodeCrud) ---
+  const crud = useStructureNodeCrud({
+    node: props.node,
+    canManageSubcomponents: () => canManageSubcomponents.value,
+  })
+
+  // --- Watchers ---
+  watch(
+    canManageSubcomponents,
+    (allowed) => {
+      if (!allowed && Array.isArray(props.node.subcomponents) && props.node.subcomponents.length) {
+        props.node.subcomponents.splice(0, props.node.subcomponents.length)
+      }
+    },
+    { immediate: true },
+  )
+
+  watch(componentTypes, () => {
+    syncComponentType(props.node)
+  }, { deep: true, immediate: true })
+
+  watch(
+    () => props.node.typeComposantId,
+    () => {
+      syncComponentType(props.node)
+    },
+  )
+
+  watch(pieceTypes, () => {
+    syncPieceLabels(props.node?.pieces)
+  }, { deep: true, immediate: true })
+
+  watch(
+    () => props.node.pieces,
+    (value) => {
+      syncPieceLabels(value)
+    },
+    { deep: true },
+  )
+
+  watch(productTypes, () => {
+    syncProductLabels(props.node?.products)
+  }, { deep: true, immediate: true })
+
+  watch(
+    () => props.node.products,
+    (value) => {
+      syncProductLabels(value)
+    },
+    { deep: true },
+  )
+
+  watch(
+    () => props.node.customFields,
+    (value) => {
+      if (!Array.isArray(value)) {
+        return
+      }
+      value.sort((a: any, b: any) => {
+        const left = typeof a?.orderIndex === 'number' ? a.orderIndex : 0
+        const right = typeof b?.orderIndex === 'number' ? b.orderIndex : 0
+        return left - right
+      })
+      crud.reindexCustomFields()
+    },
+    { deep: true },
+  )
+
+  watch(
+    () => [props.lockedTypeLabel, props.lockType],
+    () => {
+      if (props.lockType && props.isRoot) {
+        const label = props.lockedTypeLabel || lockedTypeDisplay.value
+        props.node.typeComposantLabel = label
+        if (label && (!props.node.alias || props.node.alias === lockedTypeDisplay.value)) {
+          props.node.alias = label
+        }
+        if (props.node.typeComposantId) {
+          const option = componentTypeMap.value.get(props.node.typeComposantId)
+          props.node.familyCode = option?.code ?? props.node.familyCode
+        }
+      }
+    },
+    { immediate: true },
+  )
+
+  return {
+    // Computed state
+    isLocked,
+    componentTypes,
+    pieceTypes,
+    productTypes,
+    canManageSubcomponents,
+    childAllowSubcomponents,
+    hasSubcomponents,
+    containerClass,
+    headingClass,
+    lockedTypeDisplay,
+    // Label getters & formatters
+    getComponentTypeLabel,
+    getPieceTypeLabel,
+    formatComponentTypeOption,
+    formatPieceTypeOption,
+    formatProductTypeOption,
+    // Handlers
+    handleComponentTypeSelect,
+    handlePieceTypeSelect,
+    handleProductTypeSelect,
+    // CRUD
+    addCustomField: crud.addCustomField,
+    removeCustomField: crud.removeCustomField,
+    addPiece: crud.addPiece,
+    removePiece: crud.removePiece,
+    addProduct: crud.addProduct,
+    removeProduct: crud.removeProduct,
+    addSubComponent: crud.addSubComponent,
+    removeSubComponent: crud.removeSubComponent,
+    // Drag reorder — custom fields
+    onCustomFieldDragStart: crud.onCustomFieldDragStart,
+    onCustomFieldDragEnter: crud.onCustomFieldDragEnter,
+    onCustomFieldDrop: crud.onCustomFieldDrop,
+    onCustomFieldDragEnd: crud.onCustomFieldDragEnd,
+    customFieldReorderClass: crud.customFieldReorderClass,
+    // Drag reorder — pieces
+    onPieceDragStart: crud.onPieceDragStart,
+    onPieceDragEnter: crud.onPieceDragEnter,
+    onPieceDragOver: crud.onPieceDragOver,
+    onPieceDrop: crud.onPieceDrop,
+    onPieceDragEnd: crud.onPieceDragEnd,
+    pieceReorderClass: crud.pieceReorderClass,
+    // Drag reorder — products
+    onProductDragStart: crud.onProductDragStart,
+    onProductDragEnter: crud.onProductDragEnter,
+    onProductDragOver: crud.onProductDragOver,
+    onProductDrop: crud.onProductDrop,
+    onProductDragEnd: crud.onProductDragEnd,
+    productReorderClass: crud.productReorderClass,
+    // Drag reorder — subcomponents
+    onSubcomponentDragStart: crud.onSubcomponentDragStart,
+    onSubcomponentDragEnter: crud.onSubcomponentDragEnter,
+    onSubcomponentDragOver: crud.onSubcomponentDragOver,
+    onSubcomponentDrop: crud.onSubcomponentDrop,
+    onSubcomponentDragEnd: crud.onSubcomponentDragEnd,
+    subcomponentReorderClass: crud.subcomponentReorderClass,
+  }
+}

app/composables/useToast.ts

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

app/pages/changelog.vue

@@ -69,6 +69,53 @@ const badgeClass = (type: ChangeType) => {
 }
 
 const releases: Release[] = [
+  {
+    version: 'v1.9.1',
+    date: '2026-03-16',
+    changes: [
+      { type: 'feat', text: 'Normalisation JSON → tables relationnelles : les structures des composants (pièces, produits, sous-composants) et les squelettes des catégories sont désormais stockés dans des tables dédiées au lieu de colonnes JSON, améliorant la fiabilité et les performances des requêtes' },
+      { type: 'feat', text: 'Synchronisation des catégories (ModelType Sync) : la modification d\'une catégorie (ajout/suppression de slots ou champs personnalisés) peut être propagée automatiquement à tous les éléments existants de cette catégorie, avec prévisualisation des changements avant application' },
+      { type: 'feat', text: 'Sélection interactive des items dans les slots : sur la page d\'édition d\'un composant, il est maintenant possible de choisir directement la pièce, le produit ou le sous-composant assigné à chaque emplacement du squelette via des sélecteurs avec recherche' },
+      { type: 'feat', text: 'Endpoints PATCH pour les slots composant : modification de la quantité et de l\'item sélectionné sur les slots pièce, produit et sous-composant' },
+      { type: 'feat', text: 'Table de relation pièce ↔ produit (PieceProductSlot) avec versioning pour le suivi des modifications de structure' },
+      { type: 'feat', text: 'Gestion des champs personnalisés sur les catégories : synchronisation automatique des définitions de champs (ajout, modification, suppression) lors de la sauvegarde d\'une catégorie' },
+      { type: 'feat', text: 'Suite de tests étendue : 219 tests couvrant les stratégies de synchronisation, le contrôleur de sync et les nouvelles entités' },
+      { type: 'fix', text: 'Correction de l\'affichage des sélections pré-existantes dans les slots : les pièces, produits et sous-composants déjà assignés sont maintenant correctement affichés à l\'ouverture de la page d\'édition (correction du cache catalogue)' },
+      { type: 'fix', text: 'Fallback position/orderIndex sur index de tableau dans les stratégies de sync pour éviter les erreurs quand le champ est absent' },
+    ],
+  },
+  {
+    version: 'v1.9.0',
+    date: '2026-03-09',
+    changes: [
+      { type: 'feat', text: 'Gestion des champs personnalisés sur les machines : ajout, modification et suppression de définitions de champs directement depuis la fiche machine' },
+      { type: 'feat', text: 'Refonte UI globale : amélioration du styling, des layouts et du responsive sur l\'ensemble des composants et pages' },
+      { type: 'feat', text: 'Suite de tests API complète : 167 tests couvrant toutes les entités, la sécurité et les validations' },
+      { type: 'feat', text: 'Endpoint /api/health pour le monitoring applicatif' },
+      { type: 'fix', text: 'Sécurité renforcée : désactivation de la migration de session sur le firewall API, durcissement des accès documents et sessions' },
+      { type: 'fix', text: 'Confirmation de suppression avec impact sur le catalogue produits (documents, liaisons machines en cascade)' },
+      { type: 'fix', text: 'Correction du débordement des dropdowns dans les DataTable' },
+      { type: 'perf', text: 'Refactoring massif du frontend : extraction de 15+ composables et composants partagés, réduction de la taille des fichiers' },
+      { type: 'chore', text: 'Extraction de CuidEntityTrait et abstraction du subscriber d\'audit côté backend' },
+      { type: 'chore', text: 'Ajout de DAMA DoctrineTestBundle pour l\'isolation des tests par transaction' },
+    ],
+  },
+  {
+    version: 'v1.8.1',
+    date: '2026-03-05',
+    changes: [
+      { type: 'feat', text: 'Composant DataTable générique avec tri, recherche, pagination et filtres server-side — toutes les pages catalogue migrées vers ce composant partagé' },
+      { type: 'feat', text: 'Messages d\'erreur humanisés : les erreurs backend sont traduites en messages compréhensibles pour l\'utilisateur final' },
+      { type: 'feat', text: 'Modal d\'ajout d\'entités aux machines : ajout direct de composants, pièces et produits depuis la fiche machine' },
+      { type: 'feat', text: 'Filtres SearchFilter ipartial sur les noms de types de modèles et commentaires côté API' },
+      { type: 'feat', text: 'Suppression du système TypeMachine (squelettes machines) : les champs personnalisés sont désormais liés directement à chaque machine' },
+      { type: 'feat', text: 'Simplification de la création de machines : plus besoin de sélectionner un squelette, ajout direct des entités' },
+      { type: 'fix', text: 'Suppression catalogue pièces/composants : confirmation avec liste des éléments supprimés en cascade (documents, liaisons machine, champs personnalisés) au lieu de bloquer la suppression' },
+      { type: 'fix', text: 'Affichage des catégories sur les pages d\'édition (produit, composant, pièce) : correction de « Catégorie inconnue » causée par un import obsolète dans ModelType' },
+      { type: 'fix', text: 'Recherche insensible à la casse sur les commentaires et documents (partial → ipartial)' },
+      { type: 'chore', text: 'Suppression des pages squelettes machines (/machine-skeleton, /type) et composants associés' },
+    ],
+  },
   {
     version: 'v1.8.0',
     date: '2026-03-03',

app/pages/comments.vue

@@ -4,7 +4,7 @@
       <h1 class="text-3xl font-semibold text-base-content">
         Commentaires
       </h1>
-      <p class="text-sm text-gray-500">
+      <p class="text-sm text-base-content/50">
         Liste de tous les commentaires et tickets ouverts sur les fiches.
       </p>
     </header>

app/pages/component-catalog.vue

@@ -1,9 +1,9 @@
 <template>
   <main class="container mx-auto px-6 py-10 space-y-8">
-    <header class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+    <header class="flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
       <div>
-        <h1 class="text-3xl font-semibold text-base-content">Catalogue des composants</h1>
-        <p class="text-sm text-gray-500">
+        <h1 class="text-3xl font-bold text-base-content tracking-tight">Catalogue des composants</h1>
+        <p class="text-sm text-base-content/50 mt-1">
           Consultez et gérez tous les composants existants.
         </p>
       </div>
@@ -11,17 +11,17 @@
         <NuxtLink to="/component/create" class="btn btn-primary btn-sm md:btn-md">
           Ajouter un composant
         </NuxtLink>
-        <NuxtLink to="/component-category" class="btn btn-outline btn-sm md:btn-md">
+        <NuxtLink to="/component-category" class="btn btn-ghost btn-sm md:btn-md">
           Gérer les catégories
         </NuxtLink>
       </div>
     </header>
 
-    <section class="card border border-base-200 bg-base-100 shadow-sm">
+    <section class="card bg-base-100 shadow-sm">
       <div class="card-body space-y-4">
-        <header class="flex flex-col gap-2">
-          <h2 class="text-xl font-semibold text-base-content">Composants créés</h2>
-          <p class="text-sm text-base-content/70">
+        <header class="flex flex-col gap-1">
+          <h2 class="text-xl font-bold text-base-content tracking-tight">Composants créés</h2>
+          <p class="text-sm text-base-content/50">
             Retrouvez ici tous les composants enregistrés, indépendamment de leur catégorie.
           </p>
         </header>
@@ -95,7 +95,7 @@
           </template>
 
           <template #cell-actions="{ row }">
-            <div class="flex items-center gap-2">
+            <div class="flex items-center justify-end gap-2">
               <NuxtLink
                 :to="`/component/${row.component.id}/edit`"
                 class="btn btn-ghost btn-xs"
@@ -105,7 +105,7 @@
               <button
                 v-if="canEdit"
                 type="button"
-                class="btn btn-error btn-xs"
+                class="btn btn-ghost btn-xs text-error"
                 :disabled="loadingComposants"
                 @click="handleDeleteComponent(row.component)"
               >
@@ -124,16 +124,15 @@ import { computed, onMounted } from 'vue'
 import DataTable from '~/components/common/DataTable.vue'
 import { useComposants } from '~/composables/useComposants'
 import { useComponentTypes } from '~/composables/useComponentTypes'
-import { useToast } from '~/composables/useToast'
 import { useDataTable } from '~/composables/useDataTable'
 import DocumentThumbnail from '~/components/DocumentThumbnail.vue'
-import { isImageDocument, isPdfDocument } from '~/utils/documentPreview'
+import { resolveDeleteImpact, buildDeleteMessage } from '~/shared/utils/deleteImpactUtils'
+import { resolvePrimaryDocument, resolvePreviewAlt } from '~/shared/utils/catalogDisplayUtils'
+import { formatFrenchDate } from '~/utils/date'
 
 const { canEdit } = usePermissions()
-const { showError } = useToast()
-const { composants, total, loadComposants, loading: loadingComposantsRef, deleteComposant } = useComposants()
+const { composants, total, loadComposants, loading: loadingComposants, deleteComposant } = useComposants()
 const { componentTypes, loadComponentTypes } = useComponentTypes()
-const loadingComposants = computed(() => loadingComposantsRef.value)
 
 const table = useDataTable(
   { fetchData: fetchComposants },
@@ -180,63 +179,24 @@ async function fetchComposants() {
   })
 }
 
-const resolvePrimaryDocument = (component: Record<string, any>) => {
-  const documents = Array.isArray(component?.documents) ? component.documents : []
-  if (!documents.length) return null
-  const normalized = documents.filter((doc: any) => doc && typeof doc === 'object')
-  const withPath = normalized.filter((doc: any) => doc?.fileUrl || doc?.path)
-  const pdf = withPath.find((doc: any) => isPdfDocument(doc))
-  if (pdf) return pdf
-  const image = withPath.find((doc: any) => isImageDocument(doc))
-  if (image) return image
-  return withPath[0] ?? normalized[0] ?? null
-}
-
-const resolvePreviewAlt = (component: Record<string, any>) => {
-  const parts = [component?.name, component?.reference].filter(Boolean)
-  return parts.length ? `Aperçu du document de ${parts.join(' – ')}` : 'Aperçu du document'
-}
-
 const resolveComponentType = (component: Record<string, any>) => {
   if (component?.typeComposant?.name) return component.typeComposant.name
   if (component?.typeComposantLabel) return component.typeComposantLabel
   return '—'
 }
 
-const resolveDeleteGuard = (component: Record<string, any>) => {
-  const blockingReasons: string[] = []
-  const machineLinks = Array.isArray(component?.machineLinks) ? component.machineLinks.length : component?.machineLinksCount ?? 0
-  const documents = Array.isArray(component?.documents) ? component.documents.length : component?.documentsCount ?? 0
-  const customFields = Array.isArray(component?.customFieldValues) ? component.customFieldValues.length : component?.customFieldValuesCount ?? 0
-  if (machineLinks > 0) blockingReasons.push(`${machineLinks} liaison${machineLinks > 1 ? 's' : ''} machine`)
-  if (documents > 0) blockingReasons.push(`${documents} document${documents > 1 ? 's' : ''}`)
-  return { blockingReasons, hasCustomFields: customFields > 0 }
-}
+const { confirm } = useConfirm()
 
 const handleDeleteComponent = async (component: Record<string, any>) => {
-  const { blockingReasons, hasCustomFields } = resolveDeleteGuard(component)
-  if (blockingReasons.length) {
-    showError(`Impossible de supprimer ce composant car il possède encore: ${blockingReasons.join(', ')}. Supprimez ou détachez ces éléments avant de réessayer.`)
-    return
-  }
   const componentName = component?.name || 'ce composant'
-  const confirmLines = [`Voulez-vous vraiment supprimer ${componentName} ?`]
-  if (hasCustomFields) {
-    confirmLines.push('Les valeurs de champs personnalisés associées seront également supprimées.')
-  }
-  const { confirm } = useConfirm()
-  const confirmed = await confirm({ message: confirmLines.join('\n\n') })
+  const message = buildDeleteMessage(componentName, resolveDeleteImpact(component))
+  const confirmed = await confirm({ title: 'Supprimer le composant', message, dangerous: true })
   if (!confirmed) return
   await deleteComposant(component.id)
   fetchComposants()
 }
 
-const formatDate = (dateStr: string) => {
-  if (!dateStr) return '—'
-  const date = new Date(dateStr)
-  if (Number.isNaN(date.getTime())) return '—'
-  return new Intl.DateTimeFormat('fr-FR', { day: '2-digit', month: '2-digit', year: 'numeric' }).format(date)
-}
+const formatDate = formatFrenchDate
 
 onMounted(async () => {
   await Promise.all([fetchComposants(), loadComponentTypes()])

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

@@ -27,10 +27,6 @@
         :lock-category="true"
         :saving="saving"
         :readonly="!canEdit"
-        :disable-submit="isSubmitBlocked"
-        :disable-submit-message="submitBlockMessage"
-        :restricted-mode="isRestrictedMode"
-        :restricted-mode-message="restrictedModeMessage"
         @submit="handleSubmit"
         @cancel="handleCancel"
       />
@@ -45,6 +41,14 @@
         show-resolved
       />
     </div>
+
+    <SyncConfirmationModal
+      :preview="syncPreviewData"
+      :open="showSyncModal"
+      :loading="syncLoading"
+      @confirm="handleSyncConfirm"
+      @cancel="handleSyncCancel"
+    />
   </main>
 </template>
 
@@ -52,9 +56,8 @@
 import { computed, onMounted, ref } from 'vue'
 import { useHead, useRoute, useRouter } from '#imports'
 import ModelTypeForm from '~/components/model-types/ModelTypeForm.vue'
-import { getModelType, updateModelType, type ModelTypePayload } from '~/services/modelTypes'
+import { getModelType, updateModelType, syncPreview, syncExecute, type ModelTypePayload, type SyncPreviewResult } from '~/services/modelTypes'
 import type { ComponentModelStructure } from '~/shared/types/inventory'
-import { useCategoryEditGuard } from '~/composables/useCategoryEditGuard'
 import { useComponentTypes } from '~/composables/useComponentTypes'
 import { useToast } from '~/composables/useToast'
 
@@ -67,23 +70,10 @@ const { loadComponentTypes } = useComponentTypes()
 const loading = ref(true)
 const saving = ref(false)
 const initialData = ref<Partial<ModelTypePayload> | null>(null)
-
-const {
-  isRestrictedMode,
-  isSubmitBlocked,
-  restrictedModeMessage,
-  submitBlockMessage,
-  loadLinkedCount,
-  guardSubmitOrNotify,
-} = useCategoryEditGuard({
-  endpoint: '/composants',
-  filterKey: 'typeComposant',
-  labels: {
-    singular: 'composant',
-    plural: 'composants',
-    verifying: 'Vérification des composants liés en cours…',
-  },
-})
+const showSyncModal = ref(false)
+const syncLoading = ref(false)
+const syncPreviewData = ref<SyncPreviewResult | null>(null)
+const pendingPayload = ref<Partial<ModelTypePayload> | null>(null)
 
 const title = computed(() =>
   initialData.value?.name
@@ -126,7 +116,6 @@ const loadCategory = async () => {
       structure: (response.structure as ComponentModelStructure | null) ?? undefined,
     }
 
-    await loadLinkedCount(id)
   } catch (error) {
     showError(normalizeError(error))
     await navigateBackToList()
@@ -141,9 +130,6 @@ const handleCancel = () => {
 
 const handleSubmit = async (payload: Parameters<typeof updateModelType>[1]) => {
   if (!canEdit.value) return
-  if (guardSubmitOrNotify()) {
-    return
-  }
   const id = String(route.params.id)
   saving.value = true
   try {
@@ -151,10 +137,29 @@ const handleSubmit = async (payload: Parameters<typeof updateModelType>[1]) => {
       ...payload,
       description: payload?.notes ?? null,
     }
-    await updateModelType(id, enrichedPayload)
-    await loadComponentTypes({ force: true })
-    showSuccess('Catégorie de composant mise à jour avec succès.')
-    await navigateBackToList()
+
+    // Get sync preview BEFORE saving
+    const preview = await syncPreview(id, enrichedPayload.structure || {})
+
+    const hasImpact = preview && (
+      Object.values(preview.additions || {}).some(v => v > 0)
+      || Object.values(preview.deletions || {}).some(v => v > 0)
+      || Object.values(preview.modifications || {}).some(v => v > 0)
+    )
+
+    if (hasImpact) {
+      // Show modal for confirmation
+      pendingPayload.value = enrichedPayload
+      syncPreviewData.value = preview
+      showSyncModal.value = true
+    } else {
+      // No impact — save directly + sync
+      await updateModelType(id, enrichedPayload)
+      await syncExecute(id, { confirmDeletions: false, confirmTypeChanges: false })
+      await loadComponentTypes({ force: true })
+      showSuccess('Catégorie de composant mise à jour avec succès.')
+      await navigateBackToList()
+    }
   } catch (error) {
     showError(normalizeError(error))
   } finally {
@@ -162,6 +167,39 @@ const handleSubmit = async (payload: Parameters<typeof updateModelType>[1]) => {
   }
 }
 
+const handleSyncConfirm = async () => {
+  if (!pendingPayload.value) return
+  const id = String(route.params.id)
+
+  syncLoading.value = true
+  try {
+    const hasDeletions = syncPreviewData.value && Object.values(syncPreviewData.value.deletions || {}).some(v => v > 0)
+    const hasModifications = syncPreviewData.value && Object.values(syncPreviewData.value.modifications || {}).some(v => v > 0)
+
+    await updateModelType(id, pendingPayload.value)
+    await syncExecute(id, {
+      confirmDeletions: !!hasDeletions,
+      confirmTypeChanges: !!hasModifications,
+    })
+    await loadComponentTypes({ force: true })
+    showSuccess('Catégorie de composant mise à jour avec succès.')
+    await navigateBackToList()
+  } catch (error) {
+    showError(normalizeError(error))
+  } finally {
+    syncLoading.value = false
+    showSyncModal.value = false
+    pendingPayload.value = null
+    syncPreviewData.value = null
+  }
+}
+
+const handleSyncCancel = () => {
+  showSyncModal.value = false
+  pendingPayload.value = null
+  syncPreviewData.value = null
+}
+
 onMounted(() => {
   loadCategory()
 })

app/pages/constructeurs.vue

@@ -15,7 +15,7 @@
       </button>
     </div>
 
-    <div class="card bg-base-100 shadow-lg">
+    <div class="card bg-base-100 shadow-sm">
       <div class="card-body space-y-4">
         <DataTable
           :columns="columns"
@@ -49,11 +49,11 @@
           </template>
 
           <template #cell-actions="{ row }">
-            <div class="flex justify-end gap-2">
+            <div class="flex items-center justify-end gap-2">
               <button class="btn btn-ghost btn-xs" @click="openEditModal(row)">
                 {{ canEdit ? 'Modifier' : 'Consulter' }}
               </button>
-              <button v-if="canEdit" class="btn btn-error btn-xs" @click="confirmDelete(row)">
+              <button v-if="canEdit" class="btn btn-ghost btn-xs text-error" @click="confirmDelete(row)">
                 Supprimer
               </button>
             </div>
@@ -100,6 +100,7 @@ import { useConstructeurs } from '~/composables/useConstructeurs'
 import { useToast } from '~/composables/useToast'
 import { usePersistedValue } from '~/composables/usePersistedValue'
 import { formatPhone } from '~/utils/formatters/phone'
+import { formatFrenchDate } from '~/utils/date'
 import IconLucidePlus from '~icons/lucide/plus'
 
 const { canEdit } = usePermissions()
@@ -153,16 +154,7 @@ const debouncedSearch = debounce(async () => {
   await searchConstructeurs(searchTerm.value)
 }, 300)
 
-const formatDate = (dateStr) => {
-  if (!dateStr) return '—'
-  const date = new Date(dateStr)
-  if (Number.isNaN(date.getTime())) return '—'
-  return new Intl.DateTimeFormat('fr-FR', {
-    day: '2-digit',
-    month: '2-digit',
-    year: 'numeric',
-  }).format(date)
-}
+const formatDate = formatFrenchDate
 
 const formatPhoneDisplay = (value) => {
   const formatted = formatPhone(value)

app/pages/documents.vue

@@ -3,15 +3,15 @@
     <DocumentPreviewModal
       :document="previewDocument"
       :visible="previewVisible"
-      :documents="documentRows"
+      :documents="documents"
       @close="closePreview"
     />
 
-    <section class="card bg-base-100 shadow-lg">
+    <section class="card bg-base-100 shadow-sm">
       <div class="card-body space-y-6">
         <DataTable
           :columns="columns"
-          :rows="documentRows"
+          :rows="documents"
           :loading="loading"
           :sort="table.sort.value"
           :pagination="paginationState"
@@ -68,7 +68,7 @@
               </span>
               <div>
                 <div class="font-semibold">{{ row.name }}</div>
-                <div class="text-xs text-gray-500">{{ row.filename }}</div>
+                <div class="text-xs text-base-content/50">{{ row.filename }}</div>
               </div>
             </div>
           </template>
@@ -88,7 +88,7 @@
               <span v-else-if="row.composant">Composant &middot; {{ row.composant.name }}</span>
               <span v-else-if="row.piece">Pi&egrave;ce &middot; {{ row.piece.name }}</span>
               <span v-else-if="row.product">Produit &middot; {{ row.product.name }}</span>
-              <span v-else class="text-gray-400">Non d&eacute;fini</span>
+              <span v-else class="text-base-content/30">Non d&eacute;fini</span>
             </div>
           </template>
 
@@ -148,7 +148,6 @@ const attachmentFilter = table.filters.filter as Ref<string>
 const previewDocument = ref<any>(null)
 const previewVisible = ref(false)
 
-const documentRows = computed(() => documents.value)
 const documentsOnPage = computed(() => documents.value.length)
 const paginationState = table.pagination(total, documentsOnPage)
 

app/pages/index.vue

@@ -1,57 +1,51 @@
 <template>
   <main class="container mx-auto px-6 py-8">
-    <!-- Hierarchical View -->
     <div class="my-8">
       <!-- Header with Stats -->
-      <div class="flex justify-between items-center mb-6">
+      <div class="flex flex-col gap-6 md:flex-row md:items-end md:justify-between mb-8">
         <div>
-          <h2 class="text-2xl font-bold text-gray-800">
+          <h2 class="text-3xl font-bold text-base-content tracking-tight">
             Vue d'ensemble
           </h2>
-          <p class="text-gray-600">
+          <p class="text-base-content/50 mt-1">
             Machines organisées par site
           </p>
         </div>
-        <div class="stats shadow">
-          <div class="stat">
-            <div class="stat-title">
-              Sites
-            </div>
-            <div class="stat-value text-primary">
-              {{ sites.length }}
-            </div>
+        <div class="flex gap-3">
+          <div class="bg-base-100 rounded-xl border border-base-300/50 px-5 py-3 shadow-sm">
+            <p class="text-[0.65rem] font-semibold uppercase tracking-widest text-base-content/40 mb-0.5">Sites</p>
+            <p class="text-2xl font-bold text-primary tracking-tight">{{ sites.length }}</p>
           </div>
-          <div class="stat">
-            <div class="stat-title">
-              Machines
-            </div>
-            <div class="stat-value text-secondary">
-              {{ totalMachines }}
-            </div>
+          <div class="bg-base-100 rounded-xl border border-base-300/50 px-5 py-3 shadow-sm">
+            <p class="text-[0.65rem] font-semibold uppercase tracking-widest text-base-content/40 mb-0.5">Machines</p>
+            <p class="text-2xl font-bold text-secondary tracking-tight">{{ totalMachines }}</p>
           </div>
         </div>
       </div>
 
       <!-- Filters -->
-      <div class="card bg-base-100 shadow-lg mb-6">
-        <div class="card-body">
-          <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-            <div class="form-control">
+      <div class="card bg-base-100 shadow-sm mb-8">
+        <div class="card-body py-4">
+          <div class="flex flex-col md:flex-row md:items-end gap-4">
+            <div class="form-control flex-1">
               <label class="label">
-                <span class="label-text">Rechercher</span>
+                <span class="label-text text-xs font-semibold uppercase tracking-wide text-base-content/50">Rechercher</span>
               </label>
-              <input
-                v-model="searchTerm"
-                type="text"
-                placeholder="Nom de machine ou site..."
-                class="input input-bordered"
-              >
+              <div class="relative">
+                <IconLucideSearch class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-base-content/30" aria-hidden="true" />
+                <input
+                  v-model="searchTerm"
+                  type="text"
+                  placeholder="Nom de machine ou site..."
+                  class="input input-bordered pl-10 w-full"
+                >
+              </div>
             </div>
-            <div class="form-control">
+            <div class="form-control md:w-64">
               <label class="label">
-                <span class="label-text">Site</span>
+                <span class="label-text text-xs font-semibold uppercase tracking-wide text-base-content/50">Site</span>
               </label>
-              <select v-model="selectedSiteFilter" class="select select-bordered">
+              <select v-model="selectedSiteFilter" class="select select-bordered w-full">
                 <option value="">
                   Tous les sites
                 </option>
@@ -69,30 +63,32 @@
       </div>
 
       <!-- Loading State -->
-      <div v-if="loading" class="flex justify-center items-center py-12">
-        <span class="loading loading-spinner loading-lg" />
+      <div v-if="loading" class="flex justify-center items-center py-16">
+        <span class="loading loading-spinner loading-lg text-primary" />
       </div>
 
-      <!-- Hierarchical Machines View -->
-      <div v-else-if="filteredSites.length === 0" class="text-center py-12">
-        <div class="max-w-md mx-auto">
-          <IconLucideFactory
-            class="w-16 h-16 mx-auto text-gray-400 mb-4"
-            aria-hidden="true"
-          />
-          <h3 class="text-lg font-medium text-gray-900 mb-2">
+      <!-- Empty State -->
+      <div v-else-if="filteredSites.length === 0" class="text-center py-16">
+        <div class="max-w-sm mx-auto">
+          <div class="w-16 h-16 rounded-2xl bg-base-200 grid place-items-center mx-auto mb-5">
+            <IconLucideFactory
+              class="w-8 h-8 text-base-content/30"
+              aria-hidden="true"
+            />
+          </div>
+          <h3 class="text-lg font-semibold text-base-content mb-1">
             Aucune machine trouvée
           </h3>
-          <p class="text-gray-500 mb-4">
+          <p class="text-sm text-base-content/50 mb-6">
             Commencez par ajouter des sites et des machines.
           </p>
           <div class="flex gap-2 justify-center">
-            <button v-if="canEdit" class="btn btn-primary" @click="showAddSiteModal = true">
+            <button v-if="canEdit" class="btn btn-primary btn-sm" @click="showAddSiteModal = true">
               Ajouter un site
             </button>
             <button
               v-if="canEdit"
-              class="btn btn-secondary"
+              class="btn btn-ghost btn-sm"
               @click="showAddMachineModal = true"
             >
               Ajouter une machine
@@ -101,130 +97,119 @@
         </div>
       </div>
 
-      <div v-else class="space-y-6">
+      <!-- Sites List -->
+      <div v-else class="space-y-5">
         <div
           v-for="site in filteredSites"
           :key="site.id"
-          class="card bg-base-100 shadow-lg"
+          class="card site-card shadow-md overflow-hidden"
+          :style="{
+            borderTop: site.color ? `4px solid ${site.color}` : '4px solid transparent',
+            background: site.color ? `linear-gradient(160deg, ${site.color}30 0%, ${site.color}08 40%, var(--color-base-100) 100%)` : undefined,
+          }"
         >
-          <!-- Site Header -->
           <div class="card-body">
-            <div class="flex items-center justify-between mb-4">
-              <div class="flex items-center gap-3">
-                <div class="avatar placeholder">
-                  <div
-                    class="bg-primary text-primary-content rounded-lg w-12 grid place-items-center"
-                  >
-                    <IconLucideMapPin class="w-6 h-6" aria-hidden="true" />
-                  </div>
+            <!-- Site Header -->
+            <div class="flex items-start justify-between gap-4">
+              <div class="flex items-start gap-4">
+                <div
+                  class="w-11 h-11 rounded-xl grid place-items-center shrink-0"
+                  :style="{ backgroundColor: site.color ? site.color + '40' : 'oklch(var(--p) / 0.1)', border: site.color ? `2px solid ${site.color}60` : 'none' }"
+                >
+                  <IconLucideMapPin class="w-5 h-5" :style="{ color: site.color || 'oklch(var(--p))' }" aria-hidden="true" />
                 </div>
-                <div>
-                  <h3 class="text-xl font-bold">
+                <div class="min-w-0">
+                  <h3
+                    class="text-lg font-bold tracking-tight text-base-content"
+                  >
                     {{ site.name }}
                   </h3>
-                  <div class="text-sm text-gray-600 space-y-1">
-                    <div class="flex items-center gap-2">
-                      <IconLucideUser
-                        class="w-4 h-4 text-primary"
-                        aria-hidden="true"
-                      />
-                      <span class="font-medium">{{ site.contactName }}</span>
-                    </div>
-                    <div class="flex items-center gap-2">
-                      <IconLucidePhone
-                        class="w-4 h-4 text-secondary"
-                        aria-hidden="true"
-                      />
-                      <span>{{ formatPhoneDisplay(site.contactPhone) }}</span>
-                    </div>
-                    <div class="flex items-start gap-2">
-                      <IconLucideMapPinned
-                        class="w-4 h-4 text-accent mt-1"
-                        aria-hidden="true"
-                      />
-                      <span>
-                        {{ site.contactAddress }}<br>
-                        {{ site.contactPostalCode }} {{ site.contactCity }}
-                      </span>
-                    </div>
+                  <div class="flex flex-wrap gap-x-4 gap-y-1 mt-1.5 text-sm text-base-content/50">
+                    <span v-if="site.contactName" class="flex items-center gap-1.5">
+                      <IconLucideUser class="w-3.5 h-3.5" aria-hidden="true" />
+                      {{ site.contactName }}
+                    </span>
+                    <span v-if="site.contactPhone" class="flex items-center gap-1.5">
+                      <IconLucidePhone class="w-3.5 h-3.5" aria-hidden="true" />
+                      {{ formatPhoneDisplay(site.contactPhone) }}
+                    </span>
+                    <span v-if="site.contactCity" class="flex items-center gap-1.5">
+                      <IconLucideMapPinned class="w-3.5 h-3.5" aria-hidden="true" />
+                      {{ site.contactPostalCode }} {{ site.contactCity }}
+                    </span>
                   </div>
                 </div>
               </div>
-              <div class="flex items-center gap-2">
-                <div class="badge badge-primary badge-lg">
-                  {{ site.machines?.length || 0 }} machines
-                </div>
+              <div class="flex items-center gap-2 shrink-0">
+                <span
+                  class="badge font-bold"
+                  :style="site.color ? { backgroundColor: site.color + '30', color: site.color, borderColor: site.color + '50' } : {}"
+                  :class="!site.color ? 'badge-primary' : ''"
+                >
+                  {{ site.machines?.length || 0 }}
+                </span>
                 <button
-                  class="btn btn-ghost btn-sm"
+                  class="btn btn-ghost btn-xs btn-circle"
                   @click="toggleSiteCollapse(site.id)"
                 >
                   <IconLucideChevronDown
-                    class="w-5 h-5 transition-transform"
-                    :class="
-                      collapsedSites.includes(site.id) ? 'rotate-180' : ''
-                    "
+                    class="w-4 h-4 transition-transform duration-200"
+                    :class="collapsedSites.includes(site.id) ? 'rotate-180' : ''"
                     aria-hidden="true"
                   />
                 </button>
               </div>
             </div>
 
-            <!-- Machines List -->
+            <!-- Machines Grid -->
             <div
               v-if="
                 !collapsedSites.includes(site.id) &&
                   site.machines &&
                   site.machines.length > 0
               "
-              class="space-y-3"
+              class="mt-4 pt-4 border-t border-base-200/80"
             >
-              <div class="divider" />
-              <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+              <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
                 <div
                   v-for="machine in site.machines"
                   :key="machine.id"
-                  class="card bg-base-200 hover:bg-base-300 transition-colors cursor-pointer"
+                  class="group flex flex-col rounded-xl border border-base-300/40 bg-base-100 shadow-sm hover:shadow-md hover:border-primary/20 transition-all cursor-pointer p-4"
                   @click="viewMachineDetails(machine)"
                 >
-                  <div class="card-body p-4">
-                    <div class="flex items-center justify-between mb-2">
-                      <h4 class="font-semibold text-sm">
-                        {{ machine.name }}
-                      </h4>
-                    </div>
+                  <div class="flex items-center justify-between mb-2">
+                    <h4 class="font-semibold text-sm text-base-content group-hover:text-primary transition-colors truncate">
+                      {{ machine.name }}
+                    </h4>
+                  </div>
 
-                    <div class="space-y-1 text-xs text-gray-600">
-                      <div
-                        v-if="machine.reference"
-                        class="flex items-center gap-1"
-                      >
-                        <IconLucideTag class="w-3 h-3" aria-hidden="true" />
-                        <span>{{ machine.reference }}</span>
-                      </div>
-                    </div>
+                  <div v-if="machine.reference" class="flex items-center gap-1.5 text-xs text-base-content/40">
+                    <IconLucideTag class="w-3 h-3" aria-hidden="true" />
+                    <span>{{ machine.reference }}</span>
+                  </div>
 
-                    <div class="card-actions justify-end mt-3">
-                      <button
-                        v-if="canEdit"
-                        class="btn btn-xs btn-outline"
-                        @click.stop="editMachine(machine)"
-                      >
-                        Modifier
-                      </button>
-                      <button
-                        v-if="canEdit"
-                        class="btn btn-xs btn-error"
-                        @click.stop="confirmDeleteMachine(machine)"
-                      >
-                        Supprimer
-                      </button>
-                      <NuxtLink
-                        :to="`/machine/${machine.id}`"
-                        class="btn btn-xs btn-primary"
-                      >
-                        Détails
-                      </NuxtLink>
-                    </div>
+                  <div class="mt-auto pt-3 flex items-center justify-end gap-2">
+                    <button
+                      v-if="canEdit"
+                      class="btn btn-ghost btn-sm"
+                      @click.stop="editMachine(machine)"
+                    >
+                      Modifier
+                    </button>
+                    <button
+                      v-if="canEdit"
+                      class="btn btn-ghost btn-sm text-error"
+                      @click.stop="confirmDeleteMachine(machine)"
+                    >
+                      Supprimer
+                    </button>
+                    <NuxtLink
+                      :to="`/machine/${machine.id}`"
+                      class="btn btn-primary btn-sm"
+                      @click.stop
+                    >
+                      Détails
+                    </NuxtLink>
                   </div>
                 </div>
               </div>
@@ -236,17 +221,17 @@
                 !collapsedSites.includes(site.id) &&
                   (!site.machines || site.machines.length === 0)
               "
-              class="text-center py-6"
+              class="text-center py-8 mt-4 border-t border-base-200/80"
             >
-              <div class="text-gray-400 mb-2">
-                <IconLucideFactory class="w-8 h-8 mx-auto" aria-hidden="true" />
+              <div class="w-10 h-10 rounded-xl bg-base-200 grid place-items-center mx-auto mb-3">
+                <IconLucideFactory class="w-5 h-5 text-base-content/25" aria-hidden="true" />
               </div>
-              <p class="text-sm text-gray-500 mb-3">
+              <p class="text-sm text-base-content/40 mb-3">
                 Aucune machine dans ce site
               </p>
               <button
                 v-if="canEdit"
-                class="btn btn-sm btn-primary"
+                class="btn btn-sm btn-primary btn-outline"
                 @click="addMachineToSite(site)"
               >
                 Ajouter une machine
@@ -258,120 +243,27 @@
     </div>
 
     <!-- Add Site Modal -->
-    <div v-if="showAddSiteModal" class="modal modal-open">
-      <div class="modal-box">
-        <h3 class="font-bold text-lg mb-4">
-          Ajouter un nouveau site
-        </h3>
-        <form class="space-y-4" @submit.prevent="handleCreateSite">
-          <div class="form-control">
-            <label class="label">
-              <span class="label-text">Nom du site</span>
-            </label>
-            <input
-              v-model="newSite.name"
-              type="text"
-              placeholder="Ex: Usine de production"
-              class="input input-bordered"
-              :disabled="!canEdit"
-              required
-            >
-          </div>
-
-          <SiteContactFormFields :form="newSite" :disabled="!canEdit" />
-
-          <div class="modal-action">
-            <button
-              type="button"
-              class="btn btn-outline"
-              @click="showAddSiteModal = false"
-            >
-              Annuler
-            </button>
-            <button type="submit" class="btn btn-primary" :disabled="!canEdit">
-              Créer le site
-            </button>
-          </div>
-        </form>
-      </div>
-    </div>
+    <AddSiteModal
+      :open="showAddSiteModal"
+      :disabled="!canEdit"
+      @close="showAddSiteModal = false"
+      @create="handleCreateSite"
+    />
 
     <!-- Add Machine Modal -->
-    <div v-if="showAddMachineModal" class="modal modal-open">
-      <div class="modal-box max-w-2xl">
-        <h3 class="font-bold text-lg mb-4">
-          Ajouter une nouvelle machine
-        </h3>
-        <form @submit.prevent="handleCreateMachine">
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
-            <div class="form-control">
-              <label class="label">
-                <span class="label-text">Nom de la machine</span>
-              </label>
-              <input
-                v-model="newMachine.name"
-                type="text"
-                placeholder="Ex: Presse hydraulique #1"
-                class="input input-bordered"
-                :disabled="!canEdit"
-                required
-              >
-            </div>
-
-            <div class="form-control">
-              <label class="label">
-                <span class="label-text">Site</span>
-              </label>
-              <select
-                v-model="newMachine.siteId"
-                class="select select-bordered"
-                :disabled="!canEdit"
-                required
-              >
-                <option value="">
-                  Sélectionner un site
-                </option>
-                <option v-for="site in sites" :key="site.id" :value="site.id">
-                  {{ site.name }}
-                </option>
-              </select>
-            </div>
-          </div>
-
-          <div class="form-control mb-4">
-            <label class="label">
-              <span class="label-text">Référence</span>
-            </label>
-            <input
-              v-model="newMachine.reference"
-              type="text"
-              placeholder="Ex: PRESS-001"
-              class="input input-bordered"
-              :disabled="!canEdit"
-            >
-          </div>
-
-          <div class="modal-action">
-            <button
-              type="button"
-              class="btn btn-outline"
-              @click="showAddMachineModal = false"
-            >
-              Annuler
-            </button>
-            <button type="submit" class="btn btn-primary" :disabled="!canEdit">
-              Créer la machine
-            </button>
-          </div>
-        </form>
-      </div>
-    </div>
+    <AddMachineModal
+      :open="showAddMachineModal"
+      :sites="sites"
+      :disabled="!canEdit"
+      :preselected-site-id="preselectedSiteId"
+      @close="showAddMachineModal = false"
+      @create="handleCreateMachine"
+    />
   </main>
 </template>
 
 <script setup>
-import { ref, reactive, onMounted, computed } from 'vue'
-import SiteContactFormFields from '~/components/sites/SiteContactFormFields.vue'
+import { ref, onMounted, computed } from 'vue'
 import { useSites } from '~/composables/useSites'
 import { useMachines } from '~/composables/useMachines'
 import { useToast } from '~/composables/useToast'
@@ -383,6 +275,7 @@ import IconLucidePhone from '~icons/lucide/phone'
 import IconLucideMapPinned from '~icons/lucide/map-pinned'
 import IconLucideChevronDown from '~icons/lucide/chevron-down'
 import IconLucideTag from '~icons/lucide/tag'
+import IconLucideSearch from '~icons/lucide/search'
 import { formatPhone } from '~/utils/formatters/phone'
 import { extractRelationId } from '~/shared/apiRelations'
 
@@ -396,21 +289,7 @@ const showAddMachineModal = ref(false)
 const searchTerm = ref('')
 const selectedSiteFilter = ref('')
 const collapsedSites = ref([])
-
-const newSite = reactive({
-  name: '',
-  contactName: '',
-  contactPhone: '',
-  contactAddress: '',
-  contactPostalCode: '',
-  contactCity: ''
-})
-
-const newMachine = reactive({
-  name: '',
-  siteId: '',
-  reference: ''
-})
+const preselectedSiteId = ref('')
 
 // Computed
 const machinesBySiteId = computed(() => {
@@ -491,39 +370,17 @@ const filteredSites = computed(() => {
 })
 
 // Methods
-const handleCreateSite = async () => {
-  const result = await createSite({
-    name: newSite.name,
-    contactName: newSite.contactName,
-    contactPhone: newSite.contactPhone,
-    contactAddress: newSite.contactAddress,
-    contactPostalCode: newSite.contactPostalCode,
-    contactCity: newSite.contactCity
-  })
+const handleCreateSite = async (data) => {
+  const result = await createSite(data)
   if (result.success) {
     showAddSiteModal.value = false
-
-    // Reset form
-    newSite.name = ''
-    newSite.contactName = ''
-    newSite.contactPhone = ''
-    newSite.contactAddress = ''
-    newSite.contactPostalCode = ''
-    newSite.contactCity = ''
   }
 }
 
-const handleCreateMachine = async () => {
-  const result = await createMachine({
-    name: newMachine.name,
-    siteId: newMachine.siteId,
-    reference: newMachine.reference
-  })
+const handleCreateMachine = async (data) => {
+  const result = await createMachine(data)
 
   if (result.success) {
-    newMachine.name = ''
-    newMachine.siteId = ''
-    newMachine.reference = ''
     showAddMachineModal.value = false
     await loadMachines()
   }
@@ -539,12 +396,10 @@ const toggleSiteCollapse = (siteId) => {
 }
 
 const viewMachineDetails = (machine) => {
-  // Navigation vers la page de détails de la machine
   navigateTo(`/machine/${machine.id}`)
 }
 
 const editMachine = (machine) => {
-  // Rediriger vers la page d'édition de la machine
   navigateTo(`/machine/${machine.id}?edit=true`)
 }
 
@@ -573,7 +428,7 @@ const confirmDeleteMachine = async (machine) => {
 }
 
 const addMachineToSite = (site) => {
-  newMachine.siteId = site.id
+  preselectedSiteId.value = site.id
   showAddMachineModal.value = true
 }
 

app/pages/machine/[id].vue

@@ -1,8 +1,9 @@
 <template>
-  <main class="container mx-auto px-6 py-8">
+  <div>
+    <main class="container mx-auto px-6 py-8">
     <!-- Loading State -->
-    <div v-if="d.loading.value" class="flex justify-center items-center py-12">
-      <span class="loading loading-spinner loading-lg"></span>
+    <div v-if="d.loading.value" class="flex justify-center items-center py-16">
+      <span class="loading loading-spinner loading-lg text-primary"></span>
     </div>
 
     <!-- Machine Details -->
@@ -38,7 +39,11 @@
         rounded
       >
         <div class="flex justify-center gap-4">
-          <div v-if="d.machine.value.site?.name" class="badge badge-outline">
+          <div
+            v-if="d.machine.value.site?.name"
+            class="badge badge-outline font-semibold"
+            :style="d.machine.value.site?.color ? { borderColor: d.machine.value.site.color + '60', backgroundColor: d.machine.value.site.color + '25', color: d.machine.value.site.color } : {}"
+          >
             {{ d.machine.value.site?.name }}
           </div>
           <div v-if="d.machine.value.reference" class="badge badge-outline">
@@ -52,17 +57,24 @@
         :is-edit-mode="d.isEditMode.value"
         :machine-name="d.machineName.value"
         :machine-reference="d.machineReference.value"
+        :machine-site-id="d.machineSiteId.value"
+        :machine-site-name="d.machine.value?.site?.name ?? ''"
+        :sites="d.sites.value"
         :machine-constructeur-ids="d.machineConstructeurIds.value"
         :machine-constructeurs-display="d.machineConstructeursDisplay.value"
         :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:machine-site-id="d.machineSiteId.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 -->
@@ -136,26 +148,29 @@
     <!-- Error State -->
     <div v-else class="text-center py-12">
       <div class="max-w-md mx-auto">
-        <IconLucideAlertTriangle class="w-16 h-16 mx-auto text-gray-400 mb-4" aria-hidden="true" />
-        <h3 class="text-lg font-medium text-gray-900 mb-2">Machine non trouvée</h3>
-        <p class="text-gray-500 mb-4">La machine avec l'ID "{{ machineId }}" n'existe pas ou a été supprimée.</p>
+        <div class="w-16 h-16 rounded-2xl bg-base-200 grid place-items-center mx-auto mb-5">
+          <IconLucideAlertTriangle class="w-8 h-8 text-base-content/30" aria-hidden="true" />
+        </div>
+        <h3 class="text-lg font-semibold text-base-content mb-1">Machine non trouvée</h3>
+        <p class="text-sm text-base-content/50 mb-6">La machine avec l'ID "{{ machineId }}" n'existe pas ou a été supprimée.</p>
         <NuxtLink to="/machines" class="btn btn-primary">
           Retour aux machines
         </NuxtLink>
       </div>
     </div>
-  </main>
+    </main>
 
-  <MachinePrintSelectionModal
-    :open="d.printModalOpen.value"
-    :selection="d.printSelection"
-    :components="d.components.value"
-    :pieces="d.machinePieces.value"
-    @close="d.closePrintModal"
-    @confirm="d.handlePrintConfirm"
-    @select-all="d.setAllPrintSelection(true)"
-    @deselect-all="d.setAllPrintSelection(false)"
-  />
+    <MachinePrintSelectionModal
+      :open="d.printModalOpen.value"
+      :selection="d.printSelection"
+      :components="d.components.value"
+      :pieces="d.machinePieces.value"
+      @close="d.closePrintModal"
+      @confirm="d.handlePrintConfirm"
+      @select-all="d.setAllPrintSelection(true)"
+      @deselect-all="d.setAllPrintSelection(false)"
+    />
+  </div>
 </template>
 
 <script setup>

app/pages/machines/index.vue

@@ -11,7 +11,7 @@
         </NuxtLink>
       </div>
 
-      <div class="card bg-base-100 shadow-lg mb-6">
+      <div class="card bg-base-100 shadow-sm mb-6">
         <div class="card-body">
           <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
             <div class="form-control">
@@ -65,10 +65,14 @@
         <div
           v-for="machine in filteredMachines"
           :key="machine.id"
-          class="card bg-base-100 shadow-lg hover:shadow-xl transition-shadow cursor-pointer"
+          class="card site-card shadow-md hover:shadow-xl transition-shadow cursor-pointer overflow-hidden"
+          :style="{
+            borderTop: machine.site?.color ? `4px solid ${machine.site.color}` : '4px solid transparent',
+            background: machine.site?.color ? `linear-gradient(160deg, ${machine.site.color}30 0%, ${machine.site.color}08 40%, var(--color-base-100) 100%)` : undefined,
+          }"
           @click="viewMachineDetails(machine)"
         >
-          <div class="card-body">
+          <div class="card-body flex flex-col">
             <div class="flex items-center justify-between mb-2">
               <h3 class="card-title text-lg">
                 {{ machine.name }}
@@ -77,8 +81,11 @@
 
             <div class="space-y-2 text-sm">
               <div class="flex items-center gap-2">
-                <IconLucideMapPin class="w-4 h-4 text-blue-500" aria-hidden="true" />
-                <span class="text-gray-600">{{ machine.site?.name || 'Site inconnu' }}</span>
+                <IconLucideMapPin class="w-4 h-4" :style="{ color: machine.site?.color || '#3b82f6' }" aria-hidden="true" />
+                <span
+                  class="font-bold text-sm px-2.5 py-1 rounded-lg text-base-content"
+                  :style="machine.site?.color ? { backgroundColor: machine.site.color + '30', border: `1px solid ${machine.site.color}40` } : {}"
+                >{{ machine.site?.name || 'Site inconnu' }}</span>
               </div>
 
               <div v-if="machine.reference" class="flex items-center gap-2">
@@ -87,15 +94,15 @@
               </div>
             </div>
 
-            <div class="card-actions justify-end mt-4">
-              <button class="btn btn-sm btn-outline" @click.stop="editMachine(machine)">
+            <div class="mt-auto pt-3 flex items-center justify-end gap-2">
+              <button v-if="canEdit" class="btn btn-ghost btn-sm" @click.stop="editMachine(machine)">
                 Modifier
               </button>
-              <button v-if="canEdit" class="btn btn-sm btn-error" @click.stop="confirmDeleteMachine(machine)">
+              <button v-if="canEdit" class="btn btn-ghost btn-sm text-error" @click.stop="confirmDeleteMachine(machine)">
                 Supprimer
               </button>
-              <NuxtLink :to="`/machine/${machine.id}`" class="btn btn-sm btn-primary">
-                Voir détails
+              <NuxtLink :to="`/machine/${machine.id}`" class="btn btn-primary btn-sm">
+                Détails
               </NuxtLink>
             </div>
           </div>

app/pages/machines/new.vue

@@ -20,7 +20,7 @@
       </div>
 
       <form v-else class="space-y-6" @submit.prevent="c.finalizeMachineCreation">
-        <div class="card bg-base-100 shadow-lg">
+        <div class="card bg-base-100 shadow-sm">
           <div class="card-body space-y-6">
             <!-- Basic fields -->
             <div class="grid grid-cols-1 md:grid-cols-2 gap-4">

app/pages/piece-category/[id]/edit.vue

@@ -27,10 +27,6 @@
         :lock-category="true"
         :saving="saving"
         :readonly="!canEdit"
-        :disable-submit="isSubmitBlocked"
-        :disable-submit-message="submitBlockMessage"
-        :restricted-mode="isRestrictedMode"
-        :restricted-mode-message="restrictedModeMessage"
         @submit="handleSubmit"
         @cancel="handleCancel"
       />
@@ -45,6 +41,14 @@
         show-resolved
       />
     </div>
+
+    <SyncConfirmationModal
+      :preview="syncPreviewData"
+      :open="showSyncModal"
+      :loading="syncLoading"
+      @confirm="handleSyncConfirm"
+      @cancel="handleSyncCancel"
+    />
   </main>
 </template>
 
@@ -52,9 +56,8 @@
 import { computed, onMounted, ref } from 'vue'
 import { useHead, useRoute, useRouter } from '#imports'
 import ModelTypeForm from '~/components/model-types/ModelTypeForm.vue'
-import { getModelType, updateModelType, type ModelTypePayload } from '~/services/modelTypes'
+import { getModelType, updateModelType, syncPreview, syncExecute, type ModelTypePayload, type SyncPreviewResult } from '~/services/modelTypes'
 import type { PieceModelStructure } from '~/shared/types/inventory'
-import { useCategoryEditGuard } from '~/composables/useCategoryEditGuard'
 import { usePieceTypes } from '~/composables/usePieceTypes'
 import { useToast } from '~/composables/useToast'
 
@@ -67,23 +70,10 @@ const { loadPieceTypes } = usePieceTypes()
 const loading = ref(true)
 const saving = ref(false)
 const initialData = ref<Partial<ModelTypePayload> | null>(null)
-
-const {
-  isRestrictedMode,
-  isSubmitBlocked,
-  restrictedModeMessage,
-  submitBlockMessage,
-  loadLinkedCount,
-  guardSubmitOrNotify,
-} = useCategoryEditGuard({
-  endpoint: '/pieces',
-  filterKey: 'typePiece',
-  labels: {
-    singular: 'pièce',
-    plural: 'pièces',
-    verifying: 'Vérification des pièces liées en cours…',
-  },
-})
+const showSyncModal = ref(false)
+const syncLoading = ref(false)
+const syncPreviewData = ref<SyncPreviewResult | null>(null)
+const pendingPayload = ref<Partial<ModelTypePayload> | null>(null)
 
 const title = computed(() =>
   initialData.value?.name ? `Modifier « ${initialData.value.name} »` : 'Modifier une catégorie de pièce',
@@ -124,7 +114,6 @@ const loadCategory = async () => {
       structure: (response.structure as PieceModelStructure | null) ?? undefined,
     }
 
-    await loadLinkedCount(id)
   } catch (error) {
     showError(normalizeError(error))
     await navigateBackToList()
@@ -139,9 +128,6 @@ const handleCancel = () => {
 
 const handleSubmit = async (payload: Parameters<typeof updateModelType>[1]) => {
   if (!canEdit.value) return
-  if (guardSubmitOrNotify()) {
-    return
-  }
   const id = String(route.params.id)
   saving.value = true
   try {
@@ -149,10 +135,29 @@ const handleSubmit = async (payload: Parameters<typeof updateModelType>[1]) => {
       ...payload,
       description: payload?.notes ?? null,
     }
-    await updateModelType(id, enrichedPayload)
-    await loadPieceTypes({ force: true })
-    showSuccess('Catégorie de pièce mise à jour avec succès.')
-    await navigateBackToList()
+
+    // Get sync preview BEFORE saving
+    const preview = await syncPreview(id, enrichedPayload.structure || {})
+
+    const hasImpact = preview && (
+      Object.values(preview.additions || {}).some(v => v > 0)
+      || Object.values(preview.deletions || {}).some(v => v > 0)
+      || Object.values(preview.modifications || {}).some(v => v > 0)
+    )
+
+    if (hasImpact) {
+      // Show modal for confirmation
+      pendingPayload.value = enrichedPayload
+      syncPreviewData.value = preview
+      showSyncModal.value = true
+    } else {
+      // No impact — save directly + sync
+      await updateModelType(id, enrichedPayload)
+      await syncExecute(id, { confirmDeletions: false, confirmTypeChanges: false })
+      await loadPieceTypes({ force: true })
+      showSuccess('Catégorie de pièce mise à jour avec succès.')
+      await navigateBackToList()
+    }
   } catch (error) {
     showError(normalizeError(error))
   } finally {
@@ -160,6 +165,39 @@ const handleSubmit = async (payload: Parameters<typeof updateModelType>[1]) => {
   }
 }
 
+const handleSyncConfirm = async () => {
+  if (!pendingPayload.value) return
+  const id = String(route.params.id)
+
+  syncLoading.value = true
+  try {
+    const hasDeletions = syncPreviewData.value && Object.values(syncPreviewData.value.deletions || {}).some(v => v > 0)
+    const hasModifications = syncPreviewData.value && Object.values(syncPreviewData.value.modifications || {}).some(v => v > 0)
+
+    await updateModelType(id, pendingPayload.value)
+    await syncExecute(id, {
+      confirmDeletions: !!hasDeletions,
+      confirmTypeChanges: !!hasModifications,
+    })
+    await loadPieceTypes({ force: true })
+    showSuccess('Catégorie de pièce mise à jour avec succès.')
+    await navigateBackToList()
+  } catch (error) {
+    showError(normalizeError(error))
+  } finally {
+    syncLoading.value = false
+    showSyncModal.value = false
+    pendingPayload.value = null
+    syncPreviewData.value = null
+  }
+}
+
+const handleSyncCancel = () => {
+  showSyncModal.value = false
+  pendingPayload.value = null
+  syncPreviewData.value = null
+}
+
 onMounted(() => {
   loadCategory()
 })

app/pages/pieces-catalog.vue

@@ -72,7 +72,7 @@
           <template #cell-description="{ row }">
             <div v-if="row.piece.description" class="group relative">
               <span class="block cursor-help truncate">{{ row.piece.description }}</span>
-              <div class="pointer-events-none invisible absolute left-0 top-full z-50 mt-1 max-w-sm overflow-hidden rounded-lg border border-base-300 bg-base-100 p-3 text-sm shadow-lg group-hover:pointer-events-auto group-hover:visible">
+              <div class="pointer-events-none invisible absolute left-0 top-full z-50 mt-1 max-w-sm overflow-hidden rounded-lg border border-base-300 bg-base-100 p-3 text-sm shadow-sm group-hover:pointer-events-auto group-hover:visible">
                 <p class="break-words whitespace-pre-wrap">{{ row.piece.description }}</p>
               </div>
             </div>
@@ -118,7 +118,7 @@
           </template>
 
           <template #cell-actions="{ row }">
-            <div class="flex items-center gap-2">
+            <div class="flex items-center justify-end gap-2">
               <NuxtLink
                 :to="`/pieces/${row.piece.id}/edit`"
                 class="btn btn-ghost btn-xs"
@@ -128,7 +128,7 @@
               <button
                 v-if="canEdit"
                 type="button"
-                class="btn btn-error btn-xs"
+                class="btn btn-ghost btn-xs text-error"
                 :disabled="loadingPieces"
                 @click="handleDeletePiece(row.piece)"
               >
@@ -147,16 +147,15 @@ import { computed, onMounted } from 'vue'
 import DataTable from '~/components/common/DataTable.vue'
 import { usePieces } from '~/composables/usePieces'
 import { usePieceTypes } from '~/composables/usePieceTypes'
-import { useToast } from '~/composables/useToast'
 import { useDataTable } from '~/composables/useDataTable'
 import DocumentThumbnail from '~/components/DocumentThumbnail.vue'
-import { isImageDocument, isPdfDocument } from '~/utils/documentPreview'
+import { resolveDeleteImpact, buildDeleteMessage } from '~/shared/utils/deleteImpactUtils'
+import { resolvePrimaryDocument, resolvePreviewAlt, resolveSupplierNames, buildSuppliersDisplay } from '~/shared/utils/catalogDisplayUtils'
+import { formatFrenchDate } from '~/utils/date'
 
 const { canEdit } = usePermissions()
-const { showError } = useToast()
-const { pieces, total, loadPieces, loading: loadingPiecesRef, deletePiece } = usePieces()
+const { pieces, total, loadPieces, loading: loadingPieces, deletePiece } = usePieces()
 const { pieceTypes, loadPieceTypes } = usePieceTypes()
-const loadingPieces = computed(() => loadingPiecesRef.value)
 
 const table = useDataTable(
   { fetchData: fetchPieces },
@@ -205,115 +204,27 @@ async function fetchPieces() {
   })
 }
 
-const resolvePrimaryDocument = (piece: Record<string, any>) => {
-  const documents = Array.isArray(piece?.documents) ? piece.documents : []
-  if (!documents.length) return null
-  const normalized = documents.filter((doc: any) => doc && typeof doc === 'object')
-  const withPath = normalized.filter((doc: any) => doc?.fileUrl || doc?.path)
-  const pdf = withPath.find((doc: any) => isPdfDocument(doc))
-  if (pdf) return pdf
-  const image = withPath.find((doc: any) => isImageDocument(doc))
-  if (image) return image
-  return withPath[0] ?? normalized[0] ?? null
-}
-
-const resolvePreviewAlt = (piece: Record<string, any>) => {
-  const parts = [piece?.name, piece?.reference].filter(Boolean)
-  return parts.length ? `Aperçu du document de ${parts.join(' – ')}` : 'Aperçu du document'
-}
-
 const resolvePieceType = (piece: Record<string, any>) => {
   if (piece?.typePiece?.name) return piece.typePiece.name
   if (piece?.typePieceLabel) return piece.typePieceLabel
   return '—'
 }
 
-const MAX_VISIBLE_SUPPLIERS = 3
+const buildPieceSuppliersDisplay = (piece: Record<string, any>) =>
+  buildSuppliersDisplay(resolveSupplierNames(piece, 'product'))
 
-const resolvePieceSuppliers = (piece: Record<string, any>) => {
-  const names: string[] = []
-  const seen = new Set<string>()
-
-  const pushName = (maybeName: unknown) => {
-    if (typeof maybeName !== 'string') return
-    const normalized = maybeName.trim().replace(/\s+/g, ' ')
-    if (!normalized.length) return
-    const key = normalized.toLowerCase()
-    if (seen.has(key)) return
-    seen.add(key)
-    names.push(normalized)
-  }
-
-  const collectConstructeurs = (value: unknown): void => {
-    if (!value) return
-    if (Array.isArray(value)) { value.forEach(collectConstructeurs); return }
-    if (typeof value === 'string') { pushName(value); return }
-    if (typeof value === 'object') {
-      const record = value as Record<string, any>
-      pushName(record?.name ?? record?.label ?? record?.companyName ?? record?.company ?? null)
-      if (record?.constructeur) collectConstructeurs(record.constructeur)
-      if (Array.isArray(record?.constructeurs)) collectConstructeurs(record.constructeurs)
-    }
-  }
-
-  const collectFromLabel = (value: unknown): void => {
-    if (typeof value !== 'string') return
-    value.split(/[,;\\/•·|]+/).map(part => part.trim()).filter(Boolean).forEach(pushName)
-  }
-
-  collectConstructeurs(piece?.constructeurs)
-  collectConstructeurs(piece?.constructeur)
-  collectConstructeurs(piece?.product?.constructeurs)
-  collectConstructeurs(piece?.product?.constructeur)
-  collectFromLabel(piece?.constructeursLabel)
-  collectFromLabel(piece?.supplierLabel)
-  collectFromLabel(piece?.product?.constructeursLabel)
-  collectFromLabel(piece?.product?.supplierLabel)
-
-  return names
-}
-
-const buildPieceSuppliersDisplay = (piece: Record<string, any>) => {
-  const suppliers = resolvePieceSuppliers(piece)
-  const visible = suppliers.slice(0, MAX_VISIBLE_SUPPLIERS)
-  const overflow = Math.max(suppliers.length - visible.length, 0)
-  return { suppliers, visible, overflow, tooltip: suppliers.length ? suppliers.join(', ') : '' }
-}
-
-const resolveDeleteGuard = (piece: Record<string, any>) => {
-  const blockingReasons: string[] = []
-  const machineLinks = Array.isArray(piece?.machineLinks) ? piece.machineLinks.length : piece?.machineLinksCount ?? 0
-  const documents = Array.isArray(piece?.documents) ? piece.documents.length : piece?.documentsCount ?? 0
-  const customFields = Array.isArray(piece?.customFieldValues) ? piece.customFieldValues.length : piece?.customFieldValuesCount ?? 0
-  if (machineLinks > 0) blockingReasons.push(`${machineLinks} liaison${machineLinks > 1 ? 's' : ''} machine`)
-  if (documents > 0) blockingReasons.push(`${documents} document${documents > 1 ? 's' : ''}`)
-  return { blockingReasons, hasCustomFields: customFields > 0 }
-}
+const { confirm } = useConfirm()
 
 const handleDeletePiece = async (piece: Record<string, any>) => {
-  const { blockingReasons, hasCustomFields } = resolveDeleteGuard(piece)
-  if (blockingReasons.length) {
-    showError(`Impossible de supprimer cette pièce car elle possède encore: ${blockingReasons.join(', ')}. Supprimez ou détachez ces éléments avant de réessayer.`)
-    return
-  }
   const pieceName = piece?.name || 'cette pièce'
-  const confirmLines = [`Voulez-vous vraiment supprimer ${pieceName} ?`]
-  if (hasCustomFields) {
-    confirmLines.push('Les valeurs de champs personnalisés associées seront également supprimées.')
-  }
-  const { confirm } = useConfirm()
-  const confirmed = await confirm({ message: confirmLines.join('\n\n') })
+  const message = buildDeleteMessage(pieceName, resolveDeleteImpact(piece))
+  const confirmed = await confirm({ title: 'Supprimer la pièce', message, dangerous: true })
   if (!confirmed) return
   await deletePiece(piece.id)
   fetchPieces()
 }
 
-const formatDate = (dateStr: string) => {
-  if (!dateStr) return '—'
-  const date = new Date(dateStr)
-  if (Number.isNaN(date.getTime())) return '—'
-  return new Intl.DateTimeFormat('fr-FR', { day: '2-digit', month: '2-digit', year: 'numeric' }).format(date)
-}
+const formatDate = formatFrenchDate
 
 onMounted(async () => {
   await Promise.all([fetchPieces(), loadPieceTypes()])

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

@@ -1,11 +1,12 @@
 <template>
-  <DocumentPreviewModal
-    :document="previewDocument"
-    :visible="previewVisible"
-    :documents="pieceDocuments"
-    @close="closePreview"
-  />
-  <main class="container mx-auto px-6 py-10">
+  <div>
+    <DocumentPreviewModal
+      :document="previewDocument"
+      :visible="previewVisible"
+      :documents="pieceDocuments"
+      @close="closePreview"
+    />
+    <main class="container mx-auto px-6 py-10">
     <div v-if="loading" class="flex flex-col items-center gap-4 py-20 text-center">
       <span class="loading loading-spinner loading-lg" aria-hidden="true" />
       <p class="text-sm text-base-content/70">Chargement de la pièce…</p>
@@ -182,38 +183,13 @@
           </div>
         </div>
 
-        <div v-if="selectedType || resolvedStructure" class="space-y-3 rounded-lg border border-base-200 bg-base-200/40 p-4">
-          <div class="flex items-center justify-between gap-4">
-            <div>
-              <h2 class="font-semibold text-base-content">Squelette sélectionné</h2>
-              <p class="text-xs text-base-content/70">
-                {{ selectedType?.description || 'Ce squelette définit la structure et les champs personnalisés de la pièce.' }}
-              </p>
-            </div>
-            <span class="badge badge-outline">{{ formatPieceStructurePreview(resolvedStructure) }}</span>
-          </div>
-
-          <details v-if="resolvedStructure" class="collapse collapse-arrow bg-base-100">
-            <summary class="collapse-title text-sm font-medium">
-              Consulter le détail du squelette
-            </summary>
-            <div class="collapse-content space-y-2 text-sm text-base-content/80">
-              <div v-if="getStructureCustomFields(resolvedStructure).length" class="space-y-1">
-                <h3 class="font-semibold text-sm text-base-content">Champs personnalisés</h3>
-                <ul class="list-disc list-inside space-y-1">
-                  <li v-for="field in getStructureCustomFields(resolvedStructure)" :key="field.name">
-                    <span class="font-medium">{{ field.name }}</span>
-                    <span v-if="field.value !== undefined && field.value !== null"> : {{ field.value }}</span>
-                  </li>
-                </ul>
-              </div>
-
-              <p v-else class="text-xs text-base-content/70">
-                Ce squelette ne définit pas encore de champs personnalisés.
-              </p>
-            </div>
-          </details>
-        </div>
+        <StructureSkeletonPreview
+          v-if="selectedType || resolvedStructure"
+          :structure="resolvedStructure"
+          :description="selectedType?.description || 'Ce squelette définit la structure et les champs personnalisés de la pièce.'"
+          :preview-badge="formatPieceStructurePreview(resolvedStructure)"
+          variant="piece"
+        />
 
         <div v-if="customFieldInputs.length" class="space-y-4 rounded-lg border border-base-200 bg-base-200/40 p-4">
           <header class="space-y-1">
@@ -222,78 +198,7 @@
               Mettez à jour les valeurs propres à cette pièce.
             </p>
           </header>
-          <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
-            <div
-              v-for="(field, index) in customFieldInputs"
-              :key="fieldKey(field, index)"
-              class="form-control"
-            >
-              <label class="label">
-                <span class="label-text">{{ field.name }}</span>
-                <span v-if="field.required" class="label-text-alt text-error">*</span>
-              </label>
-              <input
-                v-if="field.type === 'text'"
-                v-model="field.value"
-                type="text"
-                class="input input-bordered input-sm md:input-md"
-                :required="field.required"
-                :disabled="!canEdit || saving"
-              >
-              <input
-                v-else-if="field.type === 'number'"
-                v-model="field.value"
-                type="number"
-                step="0.01"
-                class="input input-bordered input-sm md:input-md"
-                :required="field.required"
-                :disabled="!canEdit || saving"
-              >
-              <select
-                v-else-if="field.type === 'select'"
-                v-model="field.value"
-                class="select select-bordered select-sm md:select-md"
-                :required="field.required"
-                :disabled="!canEdit || saving"
-              >
-                <option value="">Sélectionner...</option>
-                <option
-                  v-for="option in field.options"
-                  :key="option"
-                  :value="option"
-                >
-                  {{ option }}
-                </option>
-              </select>
-              <label v-else-if="field.type === 'boolean'" class="flex items-center gap-3 cursor-pointer">
-                <input
-                  v-model="field.value"
-                  type="checkbox"
-                  class="toggle toggle-primary toggle-sm md:toggle-md"
-                  true-value="true"
-                  false-value="false"
-                  :disabled="!canEdit || saving"
-                >
-                <span class="text-sm" :class="field.value === 'true' ? 'text-success font-medium' : 'text-base-content/60'">{{ field.value === 'true' ? 'Oui' : 'Non' }}</span>
-              </label>
-              <input
-                v-else-if="field.type === 'date'"
-                v-model="field.value"
-                type="date"
-                class="input input-bordered input-sm md:input-md"
-                :required="field.required"
-                :disabled="!canEdit || saving"
-              >
-              <input
-                v-else
-                v-model="field.value"
-                type="text"
-                class="input input-bordered input-sm md:input-md"
-                :required="field.required"
-                :disabled="!canEdit || saving"
-              >
-            </div>
-          </div>
+          <CustomFieldInputGrid :fields="customFieldInputs" :disabled="!canEdit || saving" />
         </div>
 
         <div class="space-y-4 rounded-lg border border-base-200 bg-base-200/40 p-4">
@@ -322,147 +227,23 @@
           <p v-else-if="loadingDocuments" class="text-xs text-base-content/70">
             Chargement des documents en cours…
           </p>
-          <div v-else-if="pieceDocuments.length" class="space-y-2">
-            <div
-              v-for="document in pieceDocuments"
-              :key="document.id || document.path || document.name"
-              class="flex items-center justify-between rounded border border-base-200 bg-base-100 px-3 py-2"
-            >
-              <div class="flex items-center gap-3 text-sm">
-                <div
-                  class="flex-shrink-0 overflow-hidden rounded-md border border-base-200 bg-base-200/70 flex items-center justify-center"
-                  :class="documentThumbnailClass(document)"
-                >
-                  <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-6 w-6"
-                    :class="documentIcon(document).colorClass"
-                    aria-hidden="true"
-                  />
-                </div>
-                <div>
-                  <div class="font-medium">
-                    {{ 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">
-                <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>
-                <button
-                  v-if="canEdit"
-                  type="button"
-                  class="btn btn-error btn-xs"
-                  :disabled="uploadingDocuments"
-                  @click="removeDocument(document.id)"
-                >
-                  Supprimer
-                </button>
-              </div>
-            </div>
-          </div>
-          <p v-else class="text-xs text-base-content/70">
-            Aucun document n'est associé à cette pièce pour le moment.
-          </p>
+          <DocumentListInline
+            v-else
+            :documents="pieceDocuments"
+            :can-delete="canEdit"
+            :delete-disabled="uploadingDocuments"
+            empty-text="Aucun document n'est associé à cette pièce pour le moment."
+            @preview="openPreview"
+            @delete="removeDocument"
+          />
         </div>
 
-        <section class="space-y-3 rounded-lg border border-base-200 bg-base-200/40 p-4">
-          <header class="flex items-center justify-between gap-3">
-            <div>
-              <h2 class="font-semibold text-base-content">Historique</h2>
-              <p class="text-xs text-base-content/70">
-                Qui a changé quoi, et quand.
-              </p>
-            </div>
-            <span v-if="historyEntries.length" class="badge badge-outline">
-              {{ historyEntries.length }} entrée{{ historyEntries.length > 1 ? 's' : '' }}
-            </span>
-          </header>
-
-          <div v-if="historyLoading" class="flex items-center gap-2 text-sm text-base-content/70">
-            <span class="loading loading-spinner loading-sm" aria-hidden="true" />
-            Chargement de l’historique…
-          </div>
-
-          <div v-else-if="historyError" class="alert alert-warning">
-            <span>{{ historyError }}</span>
-          </div>
-
-          <p v-else-if="historyEntries.length === 0" class="text-xs text-base-content/70">
-            Aucun changement enregistré pour le moment.
-          </p>
-
-          <ul v-else class="max-h-80 space-y-2 overflow-y-auto pr-1">
-            <li
-              v-for="entry in historyEntries"
-              :key="entry.id"
-              class="rounded-md border border-base-200 bg-base-100 px-3 py-2"
-            >
-              <div class="flex flex-wrap items-center justify-between gap-2 text-xs text-base-content/70">
-                <span class="font-medium text-base-content">
-                  {{ historyActionLabel(entry.action) }}
-                </span>
-                <span>{{ formatHistoryDate(entry.createdAt) }}</span>
-              </div>
-              <p class="mt-1 text-xs text-base-content/60">
-                Par {{ entry.actor?.label || 'Inconnu' }}
-              </p>
-
-              <ul
-                v-if="historyDiffEntries(entry).length"
-                class="mt-2 space-y-1 text-xs"
-              >
-                <li
-                  v-for="diffEntry in historyDiffEntries(entry)"
-                  :key="`${entry.id}-${diffEntry.field}`"
-                  class="flex flex-col gap-0.5"
-                >
-                  <span class="font-medium text-base-content/80">{{ diffEntry.label }}</span>
-                  <span class="text-base-content/60">
-                    {{ diffEntry.fromLabel }} → {{ diffEntry.toLabel }}
-                  </span>
-                </li>
-              </ul>
-
-              <p
-                v-else-if="entry.snapshot?.name"
-                class="mt-2 text-xs text-base-content/70"
-              >
-                {{ entry.snapshot.name }}
-              </p>
-            </li>
-          </ul>
-        </section>
+        <EntityHistorySection
+          :entries="history"
+          :loading="historyLoading"
+          :error="historyError"
+          :field-labels="historyFieldLabels"
+        />
 
         <div class="flex flex-col gap-3 md:flex-row md:justify-end">
           <NuxtLink to="/pieces-catalog" class="btn btn-ghost" :class="{ 'btn-disabled': saving }">
@@ -485,480 +266,48 @@
         </div>
       </div>
     </section>
-  </main>
+    </main>
+  </div>
 </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, type PieceHistoryEntry } 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,
-  fieldKey,
-  buildCustomFieldInputs,
-  requiredCustomFieldsFilled as _requiredCustomFieldsFilled,
-  saveCustomFieldValues as _saveCustomFieldValues,
-} from '~/shared/utils/customFieldFormUtils'
-import {
-  documentIcon,
-  formatSize,
-  shouldInlinePdf,
-  documentPreviewSrc,
-  documentThumbnailClass,
-  downloadDocument,
-} from '~/shared/utils/documentDisplayUtils'
-import {
-  historyActionLabel,
-  formatHistoryDate,
-  historyDiffEntries as _historyDiffEntries,
-} from '~/shared/utils/historyDisplayUtils'
+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 historyEntries = computed<PieceHistoryEntry[]>(() => history.value)
-
-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 historyDiffEntries = (entry: PieceHistoryEntry) =>
-  _historyDiffEntries(entry, historyFieldLabels)
-
-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 getStructureCustomFields = (structure: PieceModelStructure | null) =>
-  Array.isArray(structure?.customFields) ? structure.customFields : []
-
-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

@@ -153,38 +153,13 @@
           </div>
         </div>
 
-        <div v-if="selectedType" class="space-y-3 rounded-lg border border-base-200 bg-base-200/40 p-4">
-          <div class="flex items-center justify-between gap-4">
-            <div>
-              <h2 class="font-semibold text-base-content">Squelette sélectionné</h2>
-              <p class="text-xs text-base-content/70">
-                {{ selectedType.description || 'Ce squelette définit la structure et les champs personnalisés de la pièce.' }}
-              </p>
-            </div>
-            <span class="badge badge-outline">{{ formatPieceStructurePreview(selectedType.structure) }}</span>
-          </div>
-
-          <details v-if="selectedType.structure" class="collapse collapse-arrow bg-base-100">
-            <summary class="collapse-title text-sm font-medium">
-              Consulter le détail du squelette
-            </summary>
-            <div class="collapse-content space-y-2 text-sm text-base-content/80">
-              <div v-if="getStructureCustomFields(selectedType.structure).length" class="space-y-1">
-                <h3 class="font-semibold text-sm text-base-content">Champs personnalisés</h3>
-                <ul class="list-disc list-inside space-y-1">
-                  <li v-for="field in getStructureCustomFields(selectedType.structure)" :key="field.name">
-                    <span class="font-medium">{{ field.name }}</span>
-                    <span v-if="field.value !== undefined && field.value !== null"> : {{ field.value }}</span>
-                  </li>
-                </ul>
-              </div>
-
-              <p v-else class="text-xs text-base-content/70">
-                Ce squelette ne définit pas encore de champs personnalisés.
-              </p>
-            </div>
-          </details>
-        </div>
+        <StructureSkeletonPreview
+          v-if="selectedType"
+          :structure="selectedType.structure"
+          :description="selectedType.description || 'Ce squelette définit la structure et les champs personnalisés de la pièce.'"
+          :preview-badge="formatPieceStructurePreview(selectedType.structure)"
+          variant="piece"
+        />
 
         <div v-if="customFieldInputs.length" class="space-y-4 rounded-lg border border-base-200 bg-base-200/40 p-4">
           <header class="space-y-1">
@@ -193,78 +168,7 @@
               Renseignez les valeurs propres à cette pièce. Ces champs complètent le squelette sélectionné.
             </p>
           </header>
-          <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
-            <div
-              v-for="(field, index) in customFieldInputs"
-              :key="fieldKey(field, index)"
-              class="form-control"
-            >
-              <label class="label">
-                <span class="label-text">{{ field.name }}</span>
-                <span v-if="field.required" class="label-text-alt text-error">*</span>
-              </label>
-              <input
-                v-if="field.type === 'text'"
-                v-model="field.value"
-                type="text"
-                class="input input-bordered input-sm md:input-md"
-                :required="field.required"
-                :disabled="!canEdit || submitting"
-              >
-              <input
-                v-else-if="field.type === 'number'"
-                v-model="field.value"
-                type="number"
-                step="0.01"
-                class="input input-bordered input-sm md:input-md"
-                :required="field.required"
-                :disabled="!canEdit || submitting"
-              >
-              <select
-                v-else-if="field.type === 'select'"
-                v-model="field.value"
-                class="select select-bordered select-sm md:select-md"
-                :required="field.required"
-                :disabled="!canEdit || submitting"
-              >
-                <option value="">Sélectionner...</option>
-                <option
-                  v-for="option in field.options"
-                  :key="option"
-                  :value="option"
-                >
-                  {{ option }}
-                </option>
-              </select>
-              <label v-else-if="field.type === 'boolean'" class="flex items-center gap-3 cursor-pointer">
-                <input
-                  v-model="field.value"
-                  type="checkbox"
-                  class="toggle toggle-primary toggle-sm md:toggle-md"
-                  true-value="true"
-                  false-value="false"
-                  :disabled="!canEdit || submitting"
-                >
-                <span class="text-sm" :class="field.value === 'true' ? 'text-success font-medium' : 'text-base-content/60'">{{ field.value === 'true' ? 'Oui' : 'Non' }}</span>
-              </label>
-              <input
-                v-else-if="field.type === 'date'"
-                v-model="field.value"
-                type="date"
-                class="input input-bordered input-sm md:input-md"
-                :required="field.required"
-                :disabled="!canEdit || submitting"
-              >
-              <input
-                v-else
-                v-model="field.value"
-                type="text"
-                class="input input-bordered input-sm md:input-md"
-                :required="field.required"
-                :disabled="!canEdit || submitting"
-              >
-            </div>
-          </div>
+          <CustomFieldInputGrid :fields="customFieldInputs" :disabled="!canEdit || submitting" />
         </div>
 
         <div class="space-y-4 rounded-lg border border-base-200 bg-base-200/40 p-4">
@@ -320,11 +224,19 @@ 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,
-  fieldKey,
   normalizeCustomFieldInputs,
   requiredCustomFieldsFilled as _requiredCustomFieldsFilled,
   saveCustomFieldValues as _saveCustomFieldValues,
@@ -338,7 +250,7 @@ interface PieceCatalogType extends ModelType {
 const route = useRoute()
 const router = useRouter()
 
-const { pieceTypes, loadPieceTypes, loadingPieceTypes } = usePieceTypes()
+const { pieceTypes, loadPieceTypes, loadingPieceTypes: loadingTypes } = usePieceTypes()
 const { createPiece } = usePieces()
 const toast = useToast()
 const { upsertCustomFieldValue, updateCustomFieldValue } = useCustomFields()
@@ -385,7 +297,6 @@ watch(selectedTypeId, (id) => {
   router.replace({ path: route.path, query: nextQuery }).catch(() => {})
 })
 
-const loadingTypes = computed(() => loadingPieceTypes.value)
 const pieceTypeList = computed<PieceCatalogType[]>(() => (pieceTypes.value || []) as PieceCatalogType[])
 
 const typeOptionLabel = (type?: PieceCatalogType) =>
@@ -401,73 +312,34 @@ const selectedType = computed(() => {
   return pieceTypeList.value.find((type) => type.id === selectedTypeId.value) ?? null
 })
 
-const getStructureCustomFields = (structure: PieceModelStructure | null) =>
-  Array.isArray(structure?.customFields) ? structure.customFields : []
-
-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) => {
@@ -541,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-catalog.vue

@@ -36,7 +36,7 @@
           v-else
           :columns="columns"
           :rows="productRows"
-          :loading="loadingProducts"
+          :loading="loading"
           :sort="table.sort.value"
           :pagination="paginationState"
           :column-filters="table.columnFilters.value"
@@ -63,7 +63,7 @@
 
           <template #cell-preview="{ row }">
             <DocumentThumbnail
-              :document="resolvePrimaryDocument(row.product)"
+              :document="resolvePrimaryDocument(row.product, true)"
               :alt="resolvePreviewAlt(row.product)"
             />
           </template>
@@ -115,7 +115,7 @@
           </template>
 
           <template #cell-actions="{ row }">
-            <div class="flex justify-end gap-2">
+            <div class="flex items-center justify-end gap-2">
               <NuxtLink
                 :to="`/product/${row.product.id}/edit`"
                 class="btn btn-ghost btn-xs"
@@ -147,7 +147,8 @@ import { useProductTypes } from '~/composables/useProductTypes'
 import { useToast } from '~/composables/useToast'
 import { useDataTable } from '~/composables/useDataTable'
 import DocumentThumbnail from '~/components/DocumentThumbnail.vue'
-import { isImageDocument, isPdfDocument } from '~/utils/documentPreview'
+import { resolveDeleteImpact, buildDeleteMessage } from '~/shared/utils/deleteImpactUtils'
+import { resolvePrimaryDocument, resolvePreviewAlt, resolveSupplierNames, buildSuppliersDisplay } from '~/shared/utils/catalogDisplayUtils'
 
 const { canEdit } = usePermissions()
 
@@ -169,7 +170,6 @@ const table = useDataTable(
   { defaultSort: 'name', defaultDirection: 'asc', defaultPerPage: 20, persistToUrl: true },
 )
 
-const loadingProducts = computed(() => loading.value)
 const errorMessage = computed(() => (typeof error.value === 'string' && error.value.length ? error.value : null))
 
 const columns = [
@@ -197,7 +197,7 @@ const productRows = computed(() =>
   normalizedProducts.value.map(product => ({
     id: product.id,
     product,
-    suppliers: buildSuppliersDisplay(product),
+    suppliers: buildProductSuppliersDisplay(product),
   })),
 )
 
@@ -225,85 +225,21 @@ const formatPrice = (value: any) => {
   return Number.isNaN(number) ? '—' : priceFormatter.format(number)
 }
 
-const MAX_VISIBLE_SUPPLIERS = 3
-
-const resolveProductSuppliers = (product: Record<string, any>) => {
-  const names: string[] = []
-  const seen = new Set<string>()
-
-  const pushName = (maybeName: unknown) => {
-    if (typeof maybeName !== 'string') return
-    const normalized = maybeName.trim().replace(/\s+/g, ' ')
-    if (!normalized.length) return
-    const key = normalized.toLowerCase()
-    if (seen.has(key)) return
-    seen.add(key)
-    names.push(normalized)
-  }
-
-  const collectConstructeurs = (value: unknown): void => {
-    if (!value) return
-    if (Array.isArray(value)) { value.forEach(collectConstructeurs); return }
-    if (typeof value === 'string') { pushName(value); return }
-    if (typeof value === 'object') {
-      const record = value as Record<string, any>
-      pushName(record?.name ?? record?.label ?? record?.companyName ?? record?.company ?? null)
-      if (record?.constructeur) collectConstructeurs(record.constructeur)
-      if (Array.isArray(record?.constructeurs)) collectConstructeurs(record.constructeurs)
-    }
-  }
-
-  const collectFromLabel = (value: unknown): void => {
-    if (typeof value !== 'string') return
-    value.split(/[,;\\/•·|]+/).map(part => part.trim()).filter(Boolean).forEach(pushName)
-  }
-
-  collectConstructeurs(product?.constructeurs)
-  collectConstructeurs(product?.constructeur)
-  collectFromLabel(product?.constructeursLabel)
-  collectFromLabel(product?.supplierLabel)
-  collectFromLabel(product?.suppliers)
-
-  return names
-}
-
-const buildSuppliersDisplay = (product: Record<string, any>) => {
-  const suppliers = resolveProductSuppliers(product)
-  const visible = suppliers.slice(0, MAX_VISIBLE_SUPPLIERS)
-  const overflow = Math.max(suppliers.length - visible.length, 0)
-  return { suppliers, visible, overflow, tooltip: suppliers.length ? suppliers.join(', ') : '' }
-}
-
-const resolvePrimaryDocument = (product: Record<string, any>) => {
-  const documents = Array.isArray(product?.documents) ? product.documents : []
-  if (!documents.length) return null
-  const normalized = documents.filter((doc: any) => doc && typeof doc === 'object')
-  const withPath = normalized.filter((doc: any) => doc?.fileUrl || doc?.path)
-  if (!withPath.length) return normalized[0] ?? null
-  const images = withPath.filter((doc: any) => isImageDocument(doc))
-  if (images.length) return images[0]
-  const pdf = withPath.find((doc: any) => isPdfDocument(doc))
-  if (pdf) return pdf
-  return withPath[0]
-}
-
-const resolvePreviewAlt = (product: Record<string, any>) => {
-  const parts = [product?.name, product?.reference].filter(Boolean)
-  return parts.length ? `Aperçu du document de ${parts.join(' – ')}` : 'Aperçu du document'
-}
+const buildProductSuppliersDisplay = (product: Record<string, any>) =>
+  buildSuppliersDisplay(resolveSupplierNames(product))
 
 const reload = () => fetchProducts()
 
 const { confirm } = useConfirm()
 
 const confirmDelete = async (product: Record<string, any>) => {
-  const confirmed = await confirm({
-    message: `Voulez-vous vraiment supprimer le produit "${product.name}" ?\n\nCette action est irréversible.`,
-  })
+  const productName = product?.name || 'ce produit'
+  const message = buildDeleteMessage(productName, resolveDeleteImpact(product))
+  const confirmed = await confirm({ title: 'Supprimer le produit', message, dangerous: true })
   if (!confirmed) return
   const result = await deleteProduct(product.id)
   if (result.success) {
-    toast.showSuccess(`Produit "${product.name}" supprimé`)
+    toast.showSuccess(`Produit "${productName}" supprimé`)
   }
 }
 

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

@@ -27,10 +27,6 @@
         :lock-category="true"
         :saving="saving"
         :readonly="!canEdit"
-        :disable-submit="isSubmitBlocked"
-        :disable-submit-message="submitBlockMessage"
-        :restricted-mode="isRestrictedMode"
-        :restricted-mode-message="restrictedModeMessage"
         @submit="handleSubmit"
         @cancel="handleCancel"
       />
@@ -45,6 +41,14 @@
         show-resolved
       />
     </div>
+
+    <SyncConfirmationModal
+      :preview="syncPreviewData"
+      :open="showSyncModal"
+      :loading="syncLoading"
+      @confirm="handleSyncConfirm"
+      @cancel="handleSyncCancel"
+    />
   </main>
 </template>
 
@@ -52,9 +56,8 @@
 import { computed, onMounted, ref } from 'vue'
 import { useHead, useRoute, useRouter } from '#imports'
 import ModelTypeForm from '~/components/model-types/ModelTypeForm.vue'
-import { getModelType, updateModelType, type ModelTypePayload } from '~/services/modelTypes'
+import { getModelType, updateModelType, syncPreview, syncExecute, type ModelTypePayload, type SyncPreviewResult } from '~/services/modelTypes'
 import type { ProductModelStructure } from '~/shared/types/inventory'
-import { useCategoryEditGuard } from '~/composables/useCategoryEditGuard'
 import { useProductTypes } from '~/composables/useProductTypes'
 import { useToast } from '~/composables/useToast'
 
@@ -67,23 +70,10 @@ const { loadProductTypes } = useProductTypes()
 const loading = ref(true)
 const saving = ref(false)
 const initialData = ref<Partial<ModelTypePayload> | null>(null)
-
-const {
-  isRestrictedMode,
-  isSubmitBlocked,
-  restrictedModeMessage,
-  submitBlockMessage,
-  loadLinkedCount,
-  guardSubmitOrNotify,
-} = useCategoryEditGuard({
-  endpoint: '/products',
-  filterKey: 'typeProduct',
-  labels: {
-    singular: 'produit',
-    plural: 'produits',
-    verifying: 'Vérification des produits liés en cours…',
-  },
-})
+const showSyncModal = ref(false)
+const syncLoading = ref(false)
+const syncPreviewData = ref<SyncPreviewResult | null>(null)
+const pendingPayload = ref<Partial<ModelTypePayload> | null>(null)
 
 const title = computed(() =>
   initialData.value?.name ? `Modifier « ${initialData.value.name} »` : 'Modifier une catégorie de produit',
@@ -124,7 +114,6 @@ const loadCategory = async () => {
       structure: (response.structure as ProductModelStructure | null) ?? undefined,
     }
 
-    await loadLinkedCount(id)
   } catch (error) {
     showError(normalizeError(error))
     await navigateBackToList()
@@ -139,9 +128,6 @@ const handleCancel = () => {
 
 const handleSubmit = async (payload: Parameters<typeof updateModelType>[1]) => {
   if (!canEdit.value) return
-  if (guardSubmitOrNotify()) {
-    return
-  }
   const id = String(route.params.id)
   saving.value = true
   try {
@@ -149,10 +135,29 @@ const handleSubmit = async (payload: Parameters<typeof updateModelType>[1]) => {
       ...payload,
       description: payload?.notes ?? null,
     }
-    await updateModelType(id, enrichedPayload)
-    await loadProductTypes({ force: true })
-    showSuccess('Catégorie de produit mise à jour avec succès.')
-    await navigateBackToList()
+
+    // Get sync preview BEFORE saving
+    const preview = await syncPreview(id, enrichedPayload.structure || {})
+
+    const hasImpact = preview && (
+      Object.values(preview.additions || {}).some(v => v > 0)
+      || Object.values(preview.deletions || {}).some(v => v > 0)
+      || Object.values(preview.modifications || {}).some(v => v > 0)
+    )
+
+    if (hasImpact) {
+      // Show modal for confirmation
+      pendingPayload.value = enrichedPayload
+      syncPreviewData.value = preview
+      showSyncModal.value = true
+    } else {
+      // No impact — save directly + sync
+      await updateModelType(id, enrichedPayload)
+      await syncExecute(id, { confirmDeletions: false, confirmTypeChanges: false })
+      await loadProductTypes({ force: true })
+      showSuccess('Catégorie de produit mise à jour avec succès.')
+      await navigateBackToList()
+    }
   } catch (error) {
     showError(normalizeError(error))
   } finally {
@@ -160,6 +165,39 @@ const handleSubmit = async (payload: Parameters<typeof updateModelType>[1]) => {
   }
 }
 
+const handleSyncConfirm = async () => {
+  if (!pendingPayload.value) return
+  const id = String(route.params.id)
+
+  syncLoading.value = true
+  try {
+    const hasDeletions = syncPreviewData.value && Object.values(syncPreviewData.value.deletions || {}).some(v => v > 0)
+    const hasModifications = syncPreviewData.value && Object.values(syncPreviewData.value.modifications || {}).some(v => v > 0)
+
+    await updateModelType(id, pendingPayload.value)
+    await syncExecute(id, {
+      confirmDeletions: !!hasDeletions,
+      confirmTypeChanges: !!hasModifications,
+    })
+    await loadProductTypes({ force: true })
+    showSuccess('Catégorie de produit mise à jour avec succès.')
+    await navigateBackToList()
+  } catch (error) {
+    showError(normalizeError(error))
+  } finally {
+    syncLoading.value = false
+    showSyncModal.value = false
+    pendingPayload.value = null
+    syncPreviewData.value = null
+  }
+}
+
+const handleSyncCancel = () => {
+  showSyncModal.value = false
+  pendingPayload.value = null
+  syncPreviewData.value = null
+}
+
 onMounted(() => {
   loadCategory()
 })

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

@@ -1,11 +1,12 @@
 <template>
-  <DocumentPreviewModal
-    :document="previewDocument"
-    :visible="previewVisible"
-    :documents="productDocuments"
-    @close="closePreview"
-  />
-  <main class="container mx-auto px-6 py-10">
+  <div>
+    <DocumentPreviewModal
+      :document="previewDocument"
+      :visible="previewVisible"
+      :documents="productDocuments"
+      @close="closePreview"
+    />
+    <main class="container mx-auto px-6 py-10">
     <div v-if="loading" class="flex flex-col items-center gap-4 py-16 text-center">
       <span class="loading loading-spinner loading-lg" aria-hidden="true" />
       <p class="text-sm text-base-content/70">Chargement du produit…</p>
@@ -133,78 +134,7 @@
               Mettez à jour les valeurs propres à ce produit.
             </p>
           </header>
-          <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
-            <div
-              v-for="(field, index) in customFieldInputs"
-              :key="fieldKey(field, index)"
-              class="form-control"
-            >
-              <label class="label">
-                <span class="label-text">{{ field.name }}</span>
-                <span v-if="field.required" class="label-text-alt text-error">*</span>
-              </label>
-              <input
-                v-if="field.type === 'text'"
-                v-model="field.value"
-                type="text"
-                class="input input-bordered input-sm md:input-md"
-                :required="field.required"
-                :disabled="!canEdit || saving"
-              >
-              <input
-                v-else-if="field.type === 'number'"
-                v-model="field.value"
-                type="number"
-                step="0.01"
-                class="input input-bordered input-sm md:input-md"
-                :required="field.required"
-                :disabled="!canEdit || saving"
-              >
-              <select
-                v-else-if="field.type === 'select'"
-                v-model="field.value"
-                class="select select-bordered select-sm md:select-md"
-                :required="field.required"
-                :disabled="!canEdit || saving"
-              >
-                <option value="">Sélectionner...</option>
-                <option
-                  v-for="option in field.options"
-                  :key="option"
-                  :value="option"
-                >
-                  {{ option }}
-                </option>
-              </select>
-              <label v-else-if="field.type === 'boolean'" class="flex items-center gap-3 cursor-pointer">
-                <input
-                  v-model="field.value"
-                  type="checkbox"
-                  class="toggle toggle-primary toggle-sm md:toggle-md"
-                  true-value="true"
-                  false-value="false"
-                  :disabled="!canEdit || saving"
-                >
-                <span class="text-sm" :class="field.value === 'true' ? 'text-success font-medium' : 'text-base-content/60'">{{ field.value === 'true' ? 'Oui' : 'Non' }}</span>
-              </label>
-              <input
-                v-else-if="field.type === 'date'"
-                v-model="field.value"
-                type="date"
-                class="input input-bordered input-sm md:input-md"
-                :required="field.required"
-                :disabled="!canEdit || saving"
-              >
-              <input
-                v-else
-                v-model="field.value"
-                type="text"
-                class="input input-bordered input-sm md:input-md"
-                :required="field.required"
-                :disabled="!canEdit || saving"
-              >
-            </div>
-          </div>
+          <CustomFieldInputGrid :fields="customFieldInputs" :disabled="!canEdit || saving" />
         </div>
 
         <div class="space-y-4 rounded-lg border border-base-200 bg-base-200/40 p-4">
@@ -233,143 +163,23 @@
           <p v-else-if="loadingDocuments" class="text-xs text-base-content/70">
             Chargement des documents…
           </p>
-          <div v-else-if="productDocuments.length" class="space-y-2">
-            <div
-              v-for="document in productDocuments"
-              :key="document.id || document.path || document.name"
-              class="flex items-center justify-between rounded border border-base-200 bg-base-100 px-3 py-2"
-            >
-              <div class="flex items-center gap-3 text-sm">
-                <div
-                  class="flex-shrink-0 overflow-hidden rounded-md border border-base-200 bg-base-200/70 flex items-center justify-center"
-                  :class="documentThumbnailClass(document)"
-                >
-                  <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-6 w-6"
-                    :class="documentIcon(document).colorClass"
-                    aria-hidden="true"
-                  />
-                </div>
-                <div>
-                  <div class="font-medium">
-                    {{ 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">
-                <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>
-                <button
-                  v-if="canEdit"
-                  type="button"
-                  class="btn btn-error btn-xs"
-                  :disabled="uploadingDocuments || saving"
-                  @click="removeDocument(document.id)"
-                >
-                  Supprimer
-                </button>
-              </div>
-            </div>
-          </div>
-          <p v-else class="text-xs text-base-content/70">
-            Aucun document n'est associé à ce produit pour le moment.
-          </p>
+          <DocumentListInline
+            v-else
+            :documents="productDocuments"
+            :can-delete="canEdit"
+            :delete-disabled="uploadingDocuments || saving"
+            empty-text="Aucun document n'est associé à ce produit pour le moment."
+            @preview="openPreview"
+            @delete="removeDocument"
+          />
         </div>
 
-        <section class="space-y-3 rounded-lg border border-base-200 bg-base-200/40 p-4">
-          <header class="flex items-center justify-between gap-3">
-            <div>
-              <h2 class="font-semibold text-base-content">Historique</h2>
-              <p class="text-xs text-base-content/70">
-                Qui a changé quoi, et quand.
-              </p>
-            </div>
-            <span v-if="historyEntries.length" class="badge badge-outline">
-              {{ historyEntries.length }} entrée{{ historyEntries.length > 1 ? 's' : '' }}
-            </span>
-          </header>
-
-          <div v-if="historyLoading" class="flex items-center gap-2 text-sm text-base-content/70">
-            <span class="loading loading-spinner loading-sm" aria-hidden="true" />
-            Chargement de l’historique…
-          </div>
-
-          <div v-else-if="historyError" class="alert alert-warning">
-            <span>{{ historyError }}</span>
-          </div>
-
-          <p v-else-if="historyEntries.length === 0" class="text-xs text-base-content/70">
-            Aucun changement enregistré pour le moment.
-          </p>
-
-          <ul v-else class="max-h-80 space-y-2 overflow-y-auto pr-1">
-            <li
-              v-for="entry in historyEntries"
-              :key="entry.id"
-              class="rounded-md border border-base-200 bg-base-100 px-3 py-2"
-            >
-              <div class="flex flex-wrap items-center justify-between gap-2 text-xs text-base-content/70">
-                <span class="font-medium text-base-content">
-                  {{ historyActionLabel(entry.action) }}
-                </span>
-                <span>{{ formatHistoryDate(entry.createdAt) }}</span>
-              </div>
-              <p class="mt-1 text-xs text-base-content/60">
-                Par {{ entry.actor?.label || 'Inconnu' }}
-              </p>
-
-              <ul
-                v-if="historyDiffEntries(entry).length"
-                class="mt-2 space-y-1 text-xs"
-              >
-                <li
-                  v-for="diffEntry in historyDiffEntries(entry)"
-                  :key="`${entry.id}-${diffEntry.field}`"
-                  class="flex flex-col gap-0.5"
-                >
-                  <span class="font-medium text-base-content/80">{{ diffEntry.label }}</span>
-                  <span class="text-base-content/60">
-                    {{ diffEntry.fromLabel }} → {{ diffEntry.toLabel }}
-                  </span>
-                </li>
-              </ul>
-
-              <p
-                v-else-if="entry.snapshot?.name"
-                class="mt-2 text-xs text-base-content/70"
-              >
-                {{ entry.snapshot.name }}
-              </p>
-            </li>
-          </ul>
-        </section>
+        <EntityHistorySection
+          :entries="history"
+          :loading="historyLoading"
+          :error="historyError"
+          :field-labels="historyFieldLabels"
+        />
 
         <div class="flex flex-col gap-3 md:flex-row md:justify-end">
           <NuxtLink to="/product-catalog" class="btn btn-ghost" :class="{ 'btn-disabled': saving }">
@@ -395,7 +205,8 @@
         </div>
       </div>
     </section>
-  </main>
+    </main>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -410,7 +221,7 @@ import { useToast } from '~/composables/useToast'
 import { humanizeError } from '~/shared/utils/errorMessages'
 import { useDocuments } from '~/composables/useDocuments'
 import { useConstructeurs } from '~/composables/useConstructeurs'
-import { useProductHistory, type ProductHistoryEntry } from '~/composables/useProductHistory'
+import { useProductHistory } from '~/composables/useProductHistory'
 import { formatProductStructurePreview, normalizeProductStructureForSave } from '~/shared/modelUtils'
 import { uniqueConstructeurIds } from '~/shared/constructeurUtils'
 import { getModelType } from '~/services/modelTypes'
@@ -418,24 +229,10 @@ import type { ProductModelStructure } from '~/shared/types/inventory'
 import { canPreviewDocument } from '~/utils/documentPreview'
 import {
   type CustomFieldInput,
-  fieldKey,
   buildCustomFieldInputs,
   requiredCustomFieldsFilled as _requiredCustomFieldsFilled,
   saveCustomFieldValues as _saveCustomFieldValues,
 } from '~/shared/utils/customFieldFormUtils'
-import {
-  documentIcon,
-  formatSize,
-  shouldInlinePdf,
-  documentPreviewSrc,
-  documentThumbnailClass,
-  downloadDocument,
-} from '~/shared/utils/documentDisplayUtils'
-import {
-  historyActionLabel,
-  formatHistoryDate,
-  historyDiffEntries as _historyDiffEntries,
-} from '~/shared/utils/historyDisplayUtils'
 
 const { canEdit } = usePermissions()
 const route = useRoute()
@@ -469,8 +266,6 @@ const productDocuments = ref<any[]>([])
 const previewDocument = ref<any | null>(null)
 const previewVisible = ref(false)
 
-const historyEntries = computed<ProductHistoryEntry[]>(() => history.value)
-
 const historyFieldLabels: Record<string, string> = {
   name: 'Nom',
   reference: 'Référence',
@@ -479,9 +274,6 @@ const historyFieldLabels: Record<string, string> = {
   constructeurIds: 'Fournisseurs',
 }
 
-const historyDiffEntries = (entry: ProductHistoryEntry) =>
-  _historyDiffEntries(entry, historyFieldLabels)
-
 const refreshCustomFieldInputs = (
   structureOverride?: ProductModelStructure | null,
   valuesOverride?: any[] | null,
@@ -508,20 +300,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
@@ -606,7 +390,7 @@ const loadProductType = async () => {
   // Try using the expanded typeProduct from entity response first
   const embedded = product.value?.typeProduct
   if (embedded && typeof embedded === 'object' && embedded.id) {
-    const embeddedStructure = embedded.structure ?? embedded.productSkeleton ?? null
+    const embeddedStructure = embedded.structure ?? null
     if (embeddedStructure) {
       productType.value = embedded
       structure.value = normalizeProductStructureForSave(embeddedStructure)
@@ -622,7 +406,7 @@ const loadProductType = async () => {
   try {
     const type = await getModelType(product.value.typeProductId)
     productType.value = type
-    structure.value = normalizeProductStructureForSave(type?.structure ?? type?.productSkeleton ?? null)
+    structure.value = normalizeProductStructureForSave(type?.structure ?? null)
   } catch (error) {
     console.error('Erreur lors du chargement du type de produit:', error)
     productType.value = embedded ?? null

app/pages/product/create.vue

@@ -119,78 +119,7 @@
               Renseignez les valeurs propres à ce produit catalogue.
             </p>
           </header>
-          <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
-            <div
-              v-for="(field, index) in customFieldInputs"
-              :key="fieldKey(field, index)"
-              class="form-control"
-            >
-              <label class="label">
-                <span class="label-text">{{ field.name }}</span>
-                <span v-if="field.required" class="label-text-alt text-error">*</span>
-              </label>
-              <input
-                v-if="field.type === 'text'"
-                v-model="field.value"
-                type="text"
-                class="input input-bordered input-sm md:input-md"
-                :required="field.required"
-                :disabled="!canEdit || submitting"
-              >
-              <input
-                v-else-if="field.type === 'number'"
-                v-model="field.value"
-                type="number"
-                step="0.01"
-                class="input input-bordered input-sm md:input-md"
-                :required="field.required"
-                :disabled="!canEdit || submitting"
-              >
-              <select
-                v-else-if="field.type === 'select'"
-                v-model="field.value"
-                class="select select-bordered select-sm md:select-md"
-                :required="field.required"
-                :disabled="!canEdit || submitting"
-              >
-                <option value="">Sélectionner...</option>
-                <option
-                  v-for="option in field.options"
-                  :key="option"
-                  :value="option"
-                >
-                  {{ option }}
-                </option>
-              </select>
-              <label v-else-if="field.type === 'boolean'" class="flex items-center gap-3 cursor-pointer">
-                <input
-                  v-model="field.value"
-                  type="checkbox"
-                  class="toggle toggle-primary toggle-sm md:toggle-md"
-                  true-value="true"
-                  false-value="false"
-                  :disabled="!canEdit || submitting"
-                >
-                <span class="text-sm" :class="field.value === 'true' ? 'text-success font-medium' : 'text-base-content/60'">{{ field.value === 'true' ? 'Oui' : 'Non' }}</span>
-              </label>
-              <input
-                v-else-if="field.type === 'date'"
-                v-model="field.value"
-                type="date"
-                class="input input-bordered input-sm md:input-md"
-                :required="field.required"
-                :disabled="!canEdit || submitting"
-              >
-              <input
-                v-else
-                v-model="field.value"
-                type="text"
-                class="input input-bordered input-sm md:input-md"
-                :required="field.required"
-                :disabled="!canEdit || submitting"
-              >
-            </div>
-          </div>
+          <CustomFieldInputGrid :fields="customFieldInputs" :disabled="!canEdit || submitting" />
         </div>
 
         <div class="space-y-4 rounded-lg border border-base-200 bg-base-200/40 p-4">
@@ -262,7 +191,7 @@ interface ProductCatalogType extends ModelType {
 const route = useRoute()
 const router = useRouter()
 
-const { productTypes, loadProductTypes, loadingProductTypes } = useProductTypes()
+const { productTypes, loadProductTypes, loadingProductTypes: loadingTypes } = useProductTypes()
 const { createProduct } = useProducts()
 const toast = useToast()
 const { upsertCustomFieldValue } = useCustomFields()
@@ -283,7 +212,6 @@ const uploadingDocuments = ref(false)
 
 const customFieldInputs = ref<CustomFieldInput[]>([])
 
-const loadingTypes = computed(() => loadingProductTypes.value)
 const productTypeList = computed<ProductCatalogType[]>(() =>
   (productTypes.value || []) as ProductCatalogType[],
 )
@@ -354,9 +282,6 @@ const canSubmit = computed(() => Boolean(
   !submitting.value,
 ))
 
-const fieldKey = (field: CustomFieldInput, index: number) =>
-  field.customFieldId || field.id || `${field.name}-${index}`
-
 const clearForm = () => {
   creationForm.name = ''
   creationForm.reference = ''

app/pages/sites.vue

@@ -24,11 +24,11 @@
 
       <div v-else-if="sites.length === 0" class="text-center py-12">
         <div class="max-w-md mx-auto">
-          <IconLucideMapPin class="w-16 h-16 mx-auto text-gray-400 mb-4" aria-hidden="true" />
-          <h3 class="text-lg font-medium text-gray-900 mb-2">
+          <IconLucideMapPin class="w-16 h-16 mx-auto text-base-content/30 mb-4" aria-hidden="true" />
+          <h3 class="text-lg font-medium text-base-content mb-2">
             Aucun site trouvé
           </h3>
-          <p class="text-gray-500 mb-4">
+          <p class="text-base-content/50 mb-4">
             Commencez par ajouter votre premier site.
           </p>
           <button v-if="canEdit" class="btn btn-primary" @click="openCreateSiteModal">

app/services/modelTypes.ts

@@ -46,9 +46,6 @@ export interface ModelType extends BaseModelTypePayload {
   updatedAt: string;
   category: ModelCategory;
   structure: ModelTypeStructure;
-  componentSkeleton?: ComponentModelStructure | null;
-  pieceSkeleton?: PieceModelStructure | null;
-  productSkeleton?: ProductModelStructure | null;
 }
 
 export interface ModelTypeListParams {
@@ -86,42 +83,9 @@ const normalizeModelType = (item: any): ModelType => {
   if (!item || typeof item !== 'object') {
     return item as ModelType;
   }
-  if (!item.structure) {
-    if (item.category === 'COMPONENT' && item.componentSkeleton) {
-      item.structure = item.componentSkeleton;
-    } else if (item.category === 'PIECE' && item.pieceSkeleton) {
-      item.structure = item.pieceSkeleton;
-    } else if (item.category === 'PRODUCT' && item.productSkeleton) {
-      item.structure = item.productSkeleton;
-    }
-  }
   return item as ModelType;
 };
 
-const mapStructureToSkeleton = <T extends Record<string, any>>(payload: T): T => {
-  if (!payload || typeof payload !== 'object') {
-    return payload;
-  }
-  if (!('structure' in payload)) {
-    return payload;
-  }
-  const structure = (payload as any).structure;
-  if (!structure) {
-    return payload;
-  }
-  const category = (payload as any).category;
-  const next = { ...payload } as Record<string, any>;
-  if (category === 'COMPONENT') {
-    next.componentSkeleton = structure;
-  } else if (category === 'PIECE') {
-    next.pieceSkeleton = structure;
-  } else if (category === 'PRODUCT') {
-    next.productSkeleton = structure;
-  }
-  delete next.structure;
-  return next as T;
-};
-
 export async function listModelTypes(params: ModelTypeListParams = {}, opts: { signal?: AbortSignal } = {}) {
   const requestFetch = useRequestFetch();
   const query: Record<string, string | number> = {};
@@ -178,28 +142,26 @@ export async function listModelTypes(params: ModelTypeListParams = {}, opts: { s
 
 export function createModelType(payload: ModelTypePayload, opts: { signal?: AbortSignal } = {}) {
   const requestFetch = useRequestFetch();
-  const mappedPayload = mapStructureToSkeleton(payload);
   return requestFetch<ModelType>(ENDPOINT, createOptions({
     method: 'POST',
     headers: {
       'Content-Type': 'application/ld+json',
       Accept: 'application/ld+json',
     },
-    body: mappedPayload,
+    body: payload,
     signal: opts.signal,
   })).then(normalizeModelType);
 }
 
 export function updateModelType(id: string, payload: Partial<ModelTypePayload>, opts: { signal?: AbortSignal } = {}) {
   const requestFetch = useRequestFetch();
-  const mappedPayload = mapStructureToSkeleton(payload);
   return requestFetch<ModelType>(`${ENDPOINT}/${id}`, createOptions({
     method: 'PATCH',
     headers: {
       'Content-Type': 'application/merge-patch+json',
       Accept: 'application/ld+json',
     },
-    body: mappedPayload,
+    body: payload,
     signal: opts.signal,
   })).then(normalizeModelType);
 }
@@ -249,3 +211,45 @@ export function convertCategory(id: string, opts: { signal?: AbortSignal } = {})
     signal: opts.signal,
   }));
 }
+
+export interface SyncPreviewResult {
+  modelTypeId: string;
+  category: string;
+  itemCount: number;
+  additions: Record<string, number>;
+  deletions: Record<string, number>;
+  modifications: Record<string, number>;
+}
+
+export interface SyncExecuteResult {
+  itemsUpdated: number;
+  additions: Record<string, number>;
+  deletions: Record<string, number>;
+  modifications: Record<string, number>;
+}
+
+export function syncPreview(id: string, structure: unknown, opts: { signal?: AbortSignal } = {}) {
+  const requestFetch = useRequestFetch();
+  return requestFetch<SyncPreviewResult>(`${ENDPOINT}/${id}/sync-preview`, createOptions({
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'Accept': 'application/json',
+    },
+    body: { structure },
+    signal: opts.signal,
+  }));
+}
+
+export function syncExecute(id: string, confirmation: { confirmDeletions: boolean; confirmTypeChanges: boolean }, opts: { signal?: AbortSignal } = {}) {
+  const requestFetch = useRequestFetch();
+  return requestFetch<SyncExecuteResult>(`${ENDPOINT}/${id}/sync`, createOptions({
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'Accept': 'application/json',
+    },
+    body: confirmation,
+    signal: opts.signal,
+  }));
+}

app/shared/model/componentStructure.ts

@@ -1,13 +1,36 @@
 import {
   createEmptyComponentModelStructure,
-  type ComponentModelCustomFieldType,
   type ComponentModelCustomField,
-  type ComponentModelPiece,
-  type ComponentModelProduct,
   type ComponentModelStructure,
   type ComponentModelStructureNode,
 } from '../types/inventory'
 
+// Import for internal use in this file
+import { sanitizeCustomFields, sanitizePieces, sanitizeProducts, sanitizeSubcomponents } from './componentStructureSanitize'
+import { hydrateCustomFields, hydratePieces, hydrateProducts, hydrateSubcomponents, mapComponentCustomFields, mapComponentPieces, mapComponentProducts, mapSubcomponents } from './componentStructureHydrate'
+
+// Re-export sanitize functions so existing imports continue to work
+export {
+  toStringArray,
+  extractFieldValueObject,
+  sanitizeCustomFields,
+  sanitizePieces,
+  sanitizeProducts,
+  sanitizeSubcomponents,
+} from './componentStructureSanitize'
+
+// Re-export hydrate functions so existing imports continue to work
+export {
+  hydrateCustomFields,
+  hydratePieces,
+  hydrateProducts,
+  hydrateSubcomponents,
+  mapComponentCustomFields,
+  mapComponentPieces,
+  mapComponentProducts,
+  mapSubcomponents,
+} from './componentStructureHydrate'
+
 export const isPlainObject = (value: unknown): value is Record<string, unknown> => {
   return value !== null && typeof value === 'object' && !Array.isArray(value)
 }
@@ -60,440 +83,6 @@ export const cloneStructure = (input: any): ComponentModelStructure => {
   }
 }
 
-export const toStringArray = (input: unknown): string[] | undefined => {
-  if (!Array.isArray(input)) {
-    return undefined
-  }
-  const parsed = input
-    .map((value) => {
-      if (typeof value === 'string') {
-        return value.trim()
-      }
-      if (value === null || value === undefined) {
-        return ''
-      }
-      return String(value).trim()
-    })
-    .filter((value) => value.length > 0)
-  return parsed.length ? parsed : undefined
-}
-
-export const extractFieldValueObject = (field: any): Record<string, any> => {
-  if (isPlainObject(field?.value)) {
-    return field.value as Record<string, any>
-  }
-  return {}
-}
-
-export const sanitizeCustomFields = (fields: any[]): ComponentModelCustomField[] => {
-  if (!Array.isArray(fields)) {
-    return []
-  }
-
-  return fields
-    .map((field, index) => {
-      const rawName =
-        typeof field?.name === 'string'
-          ? field.name
-          : typeof field?.key === 'string'
-            ? field.key
-            : ''
-      const name = rawName.trim()
-      if (!name) {
-        return null
-      }
-
-      const valueObject = extractFieldValueObject(field)
-
-      const candidateType =
-        typeof field?.type === 'string' && field.type
-          ? field.type
-          : typeof valueObject?.type === 'string'
-            ? valueObject.type
-            : ''
-      const allowedTypes: ComponentModelCustomFieldType[] = ['text', 'number', 'select', 'boolean', 'date']
-      const type = allowedTypes.includes(candidateType as ComponentModelCustomFieldType)
-        ? (candidateType as ComponentModelCustomFieldType)
-        : 'text'
-
-      const required =
-        typeof valueObject?.required === 'boolean' ? valueObject.required : !!field?.required
-
-      let options: string[] | undefined
-      if (type === 'select') {
-        options =
-          toStringArray(valueObject?.options) ||
-          toStringArray((valueObject as any)?.choices) ||
-          toStringArray(field?.options)
-
-        if (!options && typeof field?.optionsText === 'string') {
-          const parsedFromText = field.optionsText
-            .split(/\r?\n/)
-            .map((option: string) => option.trim())
-            .filter((option: string) => option.length > 0)
-          options = parsedFromText.length ? parsedFromText : undefined
-        }
-      }
-
-      const result: ComponentModelCustomField = { name, type, required }
-      if (options) {
-        result.options = options
-      }
-      const defaultCandidate =
-        field?.defaultValue ?? valueObject?.defaultValue ?? field?.value ?? field?.default ?? null
-      const resolvedDefault = (() => {
-        if (defaultCandidate === undefined || defaultCandidate === null) {
-          return undefined
-        }
-        if (typeof defaultCandidate === 'object') {
-          if (defaultCandidate === null) {
-            return undefined
-          }
-          if ('defaultValue' in (defaultCandidate as Record<string, any>)) {
-            return (defaultCandidate as Record<string, any>).defaultValue
-          }
-          if ('value' in (defaultCandidate as Record<string, any>)) {
-            return (defaultCandidate as Record<string, any>).value
-          }
-          return undefined
-        }
-        return defaultCandidate
-      })()
-      if (resolvedDefault !== undefined && resolvedDefault !== null && resolvedDefault !== '') {
-        result.defaultValue = String(resolvedDefault)
-      }
-      const id = typeof field?.id === 'string' ? field.id : undefined
-      if (id) {
-        result.id = id
-      }
-      const customFieldId = typeof field?.customFieldId === 'string' ? field.customFieldId : undefined
-      if (customFieldId) {
-        result.customFieldId = customFieldId
-      }
-      const orderIndex = typeof field?.orderIndex === 'number' ? field.orderIndex : index
-      result.orderIndex = orderIndex
-      return result
-    })
-    .filter((field): field is ComponentModelCustomField => !!field)
-}
-
-export const sanitizePieces = (pieces: any[]): ComponentModelPiece[] => {
-  if (!Array.isArray(pieces)) {
-    return []
-  }
-
-  return pieces
-    .map((piece) => {
-      const rawTypePieceId = typeof piece?.typePieceId === 'string'
-        ? piece.typePieceId.trim()
-        : typeof piece?.typePiece?.id === 'string'
-          ? piece.typePiece.id.trim()
-          : ''
-      const typePieceId = rawTypePieceId.length > 0 ? rawTypePieceId : undefined
-
-      const rawTypePieceLabel = typeof piece?.typePieceLabel === 'string'
-        ? piece.typePieceLabel.trim()
-        : typeof piece?.typePiece?.name === 'string'
-          ? piece.typePiece.name.trim()
-          : ''
-      const typePieceLabel = rawTypePieceLabel.length > 0 ? rawTypePieceLabel : undefined
-
-      const reference = typeof piece?.reference === 'string' && piece.reference.trim().length > 0
-        ? piece.reference.trim()
-        : undefined
-
-      const rawFamilyCode = typeof piece?.familyCode === 'string'
-        ? piece.familyCode.trim()
-        : typeof piece?.typePiece?.code === 'string'
-          ? piece.typePiece.code.trim()
-          : ''
-      const familyCode = rawFamilyCode.length > 0 ? rawFamilyCode : undefined
-
-      const rawRole = typeof piece?.role === 'string' ? piece.role.trim() : ''
-      const role = rawRole.length > 0 ? rawRole : undefined
-
-      if (!typePieceId && !typePieceLabel && !reference && !familyCode) {
-        return null
-      }
-
-      const result: ComponentModelPiece = {}
-      if (role) {
-        result.role = role
-      }
-      if (familyCode) {
-        result.familyCode = familyCode
-      }
-      if (reference !== undefined) {
-        result.reference = reference
-      }
-      if (typePieceId) {
-        result.typePieceId = typePieceId
-      }
-      if (typePieceLabel) {
-        result.typePieceLabel = typePieceLabel
-      }
-      return result
-    })
-    .filter((piece): piece is ComponentModelPiece => !!piece)
-}
-
-export const sanitizeProducts = (products: any[]): ComponentModelProduct[] => {
-  if (!Array.isArray(products)) {
-    return []
-  }
-
-  return products
-    .map((product) => {
-      const rawTypeProductId = typeof product?.typeProductId === 'string'
-        ? product.typeProductId.trim()
-        : typeof product?.typeProduct?.id === 'string'
-          ? product.typeProduct.id.trim()
-          : ''
-      const typeProductId = rawTypeProductId.length > 0 ? rawTypeProductId : undefined
-
-      const rawTypeProductLabel = typeof product?.typeProductLabel === 'string'
-        ? product.typeProductLabel.trim()
-        : typeof product?.typeProduct?.name === 'string'
-          ? product.typeProduct.name.trim()
-          : ''
-      const typeProductLabel = rawTypeProductLabel.length > 0 ? rawTypeProductLabel : undefined
-
-      const reference = typeof product?.reference === 'string' && product.reference.trim().length > 0
-        ? product.reference.trim()
-        : undefined
-
-      const rawFamilyCode = typeof product?.familyCode === 'string'
-        ? product.familyCode.trim()
-        : typeof product?.typeProduct?.code === 'string'
-          ? product.typeProduct.code.trim()
-          : ''
-      const familyCode = rawFamilyCode.length > 0 ? rawFamilyCode : undefined
-
-      const rawRole = typeof product?.role === 'string' ? product.role.trim() : ''
-      const role = rawRole.length > 0 ? rawRole : undefined
-
-      if (!typeProductId && !typeProductLabel && !reference && !familyCode) {
-        return null
-      }
-
-      const result: ComponentModelProduct = {}
-      if (role) {
-        result.role = role
-      }
-      if (familyCode) {
-        result.familyCode = familyCode
-      }
-      if (reference !== undefined) {
-        result.reference = reference
-      }
-      if (typeProductId) {
-        result.typeProductId = typeProductId
-      }
-      if (typeProductLabel) {
-        result.typeProductLabel = typeProductLabel
-      }
-      return result
-    })
-    .filter((product): product is ComponentModelProduct => !!product)
-}
-
-const sanitizeSubcomponents = (components: any[]): ComponentModelStructureNode[] => {
-  if (!Array.isArray(components)) {
-    return []
-  }
-
-  return components
-    .map((component) => {
-      const rawTypeComposantId = typeof component?.typeComposantId === 'string'
-        ? component.typeComposantId.trim()
-        : typeof component?.typeComposant?.id === 'string'
-          ? component.typeComposant.id.trim()
-          : ''
-      const typeComposantId = rawTypeComposantId.length > 0 ? rawTypeComposantId : undefined
-
-      const modelId = typeof component?.modelId === 'string' && component.modelId.trim().length > 0
-        ? component.modelId.trim()
-        : undefined
-
-      const familyCode = typeof component?.familyCode === 'string' && component.familyCode.trim().length > 0
-        ? component.familyCode.trim()
-        : undefined
-
-      const alias = typeof component?.alias === 'string' && component.alias.trim().length > 0
-        ? component.alias.trim()
-        : undefined
-
-      if (!typeComposantId && !modelId && !familyCode) {
-        return null
-      }
-
-      const result: ComponentModelStructureNode = {
-        subcomponents: sanitizeSubcomponents(
-          Array.isArray(component?.subcomponents)
-            ? component.subcomponents
-            : component?.subComponents,
-        ),
-      }
-
-      if (typeComposantId) {
-        result.typeComposantId = typeComposantId
-      }
-      const typeComposantLabel = typeof component?.typeComposantLabel === 'string'
-        ? component.typeComposantLabel.trim()
-        : typeof component?.typeComposant?.name === 'string'
-          ? component.typeComposant.name.trim()
-          : ''
-      if (typeComposantLabel) {
-        result.typeComposantLabel = typeComposantLabel
-      }
-      if (modelId) {
-        result.modelId = modelId
-      }
-      if (familyCode) {
-        result.familyCode = familyCode
-      }
-      if (alias) {
-        result.alias = alias
-      }
-
-      return result
-    })
-    .filter((component): component is ComponentModelStructureNode => !!component)
-}
-
-const hydrateCustomFields = (fields: any[]): any[] => {
-  if (!Array.isArray(fields)) {
-    return []
-  }
-
-  return fields.map((field, index) => {
-    const valueObject = extractFieldValueObject(field)
-    const name = typeof field?.name === 'string'
-      ? field.name
-      : typeof field?.key === 'string'
-        ? field.key
-        : ''
-
-    const candidateType =
-      typeof field?.type === 'string' && field.type
-        ? field.type
-        : typeof valueObject?.type === 'string'
-          ? valueObject.type
-          : ''
-    const allowedTypes: ComponentModelCustomFieldType[] = ['text', 'number', 'select', 'boolean', 'date']
-    const type = allowedTypes.includes(candidateType as ComponentModelCustomFieldType)
-      ? (candidateType as ComponentModelCustomFieldType)
-      : 'text'
-
-    const required =
-      typeof field?.required === 'boolean'
-        ? field.required
-        : typeof valueObject?.required === 'boolean'
-          ? valueObject.required
-          : false
-
-    const options =
-      toStringArray(field?.options) ||
-      toStringArray(valueObject?.options) ||
-      toStringArray((valueObject as any)?.choices) ||
-      []
-
-    const optionsText = typeof field?.optionsText === 'string'
-      ? field.optionsText
-      : options.length
-        ? options.join('\n')
-        : ''
-
-    const defaultCandidate =
-      field?.defaultValue ?? valueObject?.defaultValue ?? field?.value ?? field?.default ?? null
-    const resolvedDefault = (() => {
-      if (defaultCandidate === undefined || defaultCandidate === null) {
-        return undefined
-      }
-      if (typeof defaultCandidate === 'object') {
-        if (defaultCandidate === null) {
-          return undefined
-        }
-        if ('defaultValue' in (defaultCandidate as Record<string, any>)) {
-          return (defaultCandidate as Record<string, any>).defaultValue
-        }
-        if ('value' in (defaultCandidate as Record<string, any>)) {
-          return (defaultCandidate as Record<string, any>).value
-        }
-        return undefined
-      }
-      return defaultCandidate
-    })()
-    const defaultValue =
-      resolvedDefault !== undefined && resolvedDefault !== null && resolvedDefault !== ''
-        ? String(resolvedDefault)
-        : ''
-
-    const id = typeof field?.id === 'string' ? field.id : undefined
-    const customFieldId = typeof field?.customFieldId === 'string' ? field.customFieldId : undefined
-    const orderIndex = typeof field?.orderIndex === 'number' ? field.orderIndex : index
-
-    return {
-      name,
-      type,
-      required,
-      options,
-      optionsText,
-      defaultValue,
-      id,
-      customFieldId,
-      orderIndex,
-    }
-  })
-}
-
-const hydratePieces = (pieces: any[]): ComponentModelPiece[] => {
-  if (!Array.isArray(pieces)) {
-    return []
-  }
-
-  return pieces.map((piece) => ({
-    typePieceId: piece?.typePieceId ?? piece?.typePiece?.id ?? '',
-    typePieceLabel: piece?.typePieceLabel ?? piece?.typePiece?.name ?? '',
-    reference: piece?.reference ?? '',
-    familyCode: piece?.familyCode ?? piece?.typePiece?.code ?? '',
-    role: piece?.role ?? '',
-  }))
-}
-
-export const hydrateProducts = (products: any[]): ComponentModelProduct[] => {
-  if (!Array.isArray(products)) {
-    return []
-  }
-
-  return products.map((product) => ({
-    typeProductId: product?.typeProductId ?? product?.typeProduct?.id ?? '',
-    typeProductLabel: product?.typeProductLabel ?? product?.typeProduct?.name ?? '',
-    reference: product?.reference ?? '',
-    familyCode: product?.familyCode ?? product?.typeProduct?.code ?? '',
-    role: product?.role ?? '',
-  }))
-}
-
-const hydrateSubcomponents = (components: any[]): ComponentModelStructureNode[] => {
-  if (!Array.isArray(components)) {
-    return []
-  }
-
-  return components.map((component) => ({
-    typeComposantId: component?.typeComposantId ?? component?.typeComposant?.id ?? '',
-    typeComposantLabel: component?.typeComposantLabel ?? component?.typeComposant?.name ?? '',
-    modelId: component?.modelId ?? '',
-    familyCode: component?.familyCode ?? component?.typeComposant?.code ?? '',
-    alias: component?.alias ?? component?.name ?? '',
-    subcomponents: hydrateSubcomponents(
-      Array.isArray(component?.subcomponents)
-        ? component.subcomponents
-        : component?.subComponents,
-    ),
-  }))
-}
-
 export const normalizeStructureForEditor = (input: any): ComponentModelStructure => {
   const source = cloneStructure(input)
 
@@ -586,6 +175,9 @@ export const normalizeStructureForSave = (input: any): any => {
     if (piece.reference) {
       payload.reference = piece.reference
     }
+    if ((piece as any).quantity !== undefined && (piece as any).quantity >= 1) {
+      payload.quantity = (piece as any).quantity
+    }
     return payload
   }) as any
 
@@ -668,76 +260,6 @@ export const hydrateStructureForEditor = (input: any): ComponentModelStructure =
   }
 }
 
-const mapComponentCustomFields = (fields: any[]) => {
-  if (!Array.isArray(fields)) {
-    return []
-  }
-  return hydrateCustomFields(fields).map((field, index) => {
-    const defaultValue =
-      field?.defaultValue !== undefined && field?.defaultValue !== null && field?.defaultValue !== ''
-        ? field.defaultValue
-        : null
-    return {
-      name: typeof field?.name === 'string' ? field.name : '',
-      type: field?.type ?? 'text',
-      required: !!field?.required,
-      options: Array.isArray(field?.options) ? field.options : [],
-      optionsText: typeof field?.optionsText === 'string' ? field.optionsText : '',
-      defaultValue,
-      id: typeof (field as any)?.id === 'string' ? (field as any).id : undefined,
-      customFieldId:
-        typeof (field as any)?.customFieldId === 'string'
-          ? (field as any).customFieldId
-          : undefined,
-      orderIndex: typeof field?.orderIndex === 'number' ? field.orderIndex : index,
-    }
-  })
-}
-
-const mapComponentPieces = (pieces: any[]): ComponentModelPiece[] => {
-  if (!Array.isArray(pieces)) {
-    return []
-  }
-  return pieces.map((piece) => ({
-    reference: piece?.reference ?? '',
-    typePieceId: piece?.typePieceId ?? piece?.typePiece?.id ?? '',
-    typePieceLabel: piece?.typePieceLabel ?? piece?.typePiece?.name ?? '',
-    familyCode: piece?.familyCode ?? piece?.typePiece?.code ?? '',
-    role: piece?.role ?? '',
-  }))
-}
-
-const mapComponentProducts = (products: any[]): ComponentModelProduct[] => {
-  if (!Array.isArray(products)) {
-    return []
-  }
-  return products.map((product) => ({
-    reference: product?.reference ?? '',
-    typeProductId: product?.typeProductId ?? product?.typeProduct?.id ?? '',
-    typeProductLabel: product?.typeProductLabel ?? product?.typeProduct?.name ?? '',
-    familyCode: product?.familyCode ?? product?.typeProduct?.code ?? '',
-    role: product?.role ?? '',
-  }))
-}
-
-const mapSubcomponents = (components: any[]): ComponentModelStructureNode[] => {
-  if (!Array.isArray(components)) {
-    return []
-  }
-  return components.map((component) => ({
-    typeComposantId: component?.typeComposantId ?? component?.typeComposant?.id ?? '',
-    typeComposantLabel: component?.typeComposantLabel ?? component?.typeComposant?.name ?? '',
-    modelId: component?.modelId ?? '',
-    familyCode: component?.familyCode ?? component?.typeComposant?.code ?? '',
-    alias: component?.alias ?? component?.name ?? '',
-    subcomponents: mapSubcomponents(
-      Array.isArray(component?.subcomponents)
-        ? component.subcomponents
-        : component?.subComponents,
-    ),
-  }))
-}
-
 export const extractStructureFromComponent = (component: any) => {
   if (!component) {
     return defaultStructure()

app/shared/model/componentStructureHydrate.ts

@@ -0,0 +1,212 @@
+import type {
+  ComponentModelCustomFieldType,
+  ComponentModelPiece,
+  ComponentModelProduct,
+  ComponentModelStructureNode,
+} from '../types/inventory'
+import { extractFieldValueObject, toStringArray } from './componentStructureSanitize'
+
+export const hydrateCustomFields = (fields: any[]): any[] => {
+  if (!Array.isArray(fields)) {
+    return []
+  }
+
+  return fields.map((field, index) => {
+    const valueObject = extractFieldValueObject(field)
+    const name = typeof field?.name === 'string'
+      ? field.name
+      : typeof field?.key === 'string'
+        ? field.key
+        : ''
+
+    const candidateType =
+      typeof field?.type === 'string' && field.type
+        ? field.type
+        : typeof valueObject?.type === 'string'
+          ? valueObject.type
+          : ''
+    const allowedTypes: ComponentModelCustomFieldType[] = ['text', 'number', 'select', 'boolean', 'date']
+    const type = allowedTypes.includes(candidateType as ComponentModelCustomFieldType)
+      ? (candidateType as ComponentModelCustomFieldType)
+      : 'text'
+
+    const required =
+      typeof field?.required === 'boolean'
+        ? field.required
+        : typeof valueObject?.required === 'boolean'
+          ? valueObject.required
+          : false
+
+    const options =
+      toStringArray(field?.options) ||
+      toStringArray(valueObject?.options) ||
+      toStringArray((valueObject as any)?.choices) ||
+      []
+
+    const optionsText = typeof field?.optionsText === 'string'
+      ? field.optionsText
+      : options.length
+        ? options.join('\n')
+        : ''
+
+    const defaultCandidate =
+      field?.defaultValue ?? valueObject?.defaultValue ?? field?.value ?? field?.default ?? null
+    const resolvedDefault = (() => {
+      if (defaultCandidate === undefined || defaultCandidate === null) {
+        return undefined
+      }
+      if (typeof defaultCandidate === 'object') {
+        if (defaultCandidate === null) {
+          return undefined
+        }
+        if ('defaultValue' in (defaultCandidate as Record<string, any>)) {
+          return (defaultCandidate as Record<string, any>).defaultValue
+        }
+        if ('value' in (defaultCandidate as Record<string, any>)) {
+          return (defaultCandidate as Record<string, any>).value
+        }
+        return undefined
+      }
+      return defaultCandidate
+    })()
+    const defaultValue =
+      resolvedDefault !== undefined && resolvedDefault !== null && resolvedDefault !== ''
+        ? String(resolvedDefault)
+        : ''
+
+    const id = typeof field?.id === 'string' ? field.id : undefined
+    const customFieldId = typeof field?.customFieldId === 'string' ? field.customFieldId : undefined
+    const orderIndex = typeof field?.orderIndex === 'number' ? field.orderIndex : index
+
+    return {
+      name,
+      type,
+      required,
+      options,
+      optionsText,
+      defaultValue,
+      id,
+      customFieldId,
+      orderIndex,
+    }
+  })
+}
+
+export const hydratePieces = (pieces: any[]): ComponentModelPiece[] => {
+  if (!Array.isArray(pieces)) {
+    return []
+  }
+
+  return pieces.map((piece) => ({
+    typePieceId: piece?.typePieceId ?? piece?.typePiece?.id ?? '',
+    typePieceLabel: piece?.typePieceLabel ?? piece?.typePiece?.name ?? '',
+    reference: piece?.reference ?? '',
+    familyCode: piece?.familyCode ?? piece?.typePiece?.code ?? '',
+    role: piece?.role ?? '',
+    ...(piece?.quantity !== undefined && piece.quantity >= 1 ? { quantity: piece.quantity } : {}),
+  }))
+}
+
+export const hydrateProducts = (products: any[]): ComponentModelProduct[] => {
+  if (!Array.isArray(products)) {
+    return []
+  }
+
+  return products.map((product) => ({
+    typeProductId: product?.typeProductId ?? product?.typeProduct?.id ?? '',
+    typeProductLabel: product?.typeProductLabel ?? product?.typeProduct?.name ?? '',
+    reference: product?.reference ?? '',
+    familyCode: product?.familyCode ?? product?.typeProduct?.code ?? '',
+    role: product?.role ?? '',
+  }))
+}
+
+export const hydrateSubcomponents = (components: any[]): ComponentModelStructureNode[] => {
+  if (!Array.isArray(components)) {
+    return []
+  }
+
+  return components.map((component) => ({
+    typeComposantId: component?.typeComposantId ?? component?.typeComposant?.id ?? '',
+    typeComposantLabel: component?.typeComposantLabel ?? component?.typeComposant?.name ?? '',
+    modelId: component?.modelId ?? '',
+    familyCode: component?.familyCode ?? component?.typeComposant?.code ?? '',
+    alias: component?.alias ?? component?.name ?? '',
+    subcomponents: hydrateSubcomponents(
+      Array.isArray(component?.subcomponents)
+        ? component.subcomponents
+        : component?.subComponents,
+    ),
+  }))
+}
+
+export const mapComponentCustomFields = (fields: any[]) => {
+  if (!Array.isArray(fields)) {
+    return []
+  }
+  return hydrateCustomFields(fields).map((field, index) => {
+    const defaultValue =
+      field?.defaultValue !== undefined && field?.defaultValue !== null && field?.defaultValue !== ''
+        ? field.defaultValue
+        : null
+    return {
+      name: typeof field?.name === 'string' ? field.name : '',
+      type: field?.type ?? 'text',
+      required: !!field?.required,
+      options: Array.isArray(field?.options) ? field.options : [],
+      optionsText: typeof field?.optionsText === 'string' ? field.optionsText : '',
+      defaultValue,
+      id: typeof (field as any)?.id === 'string' ? (field as any).id : undefined,
+      customFieldId:
+        typeof (field as any)?.customFieldId === 'string'
+          ? (field as any).customFieldId
+          : undefined,
+      orderIndex: typeof field?.orderIndex === 'number' ? field.orderIndex : index,
+    }
+  })
+}
+
+export const mapComponentPieces = (pieces: any[]): ComponentModelPiece[] => {
+  if (!Array.isArray(pieces)) {
+    return []
+  }
+  return pieces.map((piece) => ({
+    reference: piece?.reference ?? '',
+    typePieceId: piece?.typePieceId ?? piece?.typePiece?.id ?? '',
+    typePieceLabel: piece?.typePieceLabel ?? piece?.typePiece?.name ?? '',
+    familyCode: piece?.familyCode ?? piece?.typePiece?.code ?? '',
+    role: piece?.role ?? '',
+    ...(piece?.quantity !== undefined && piece.quantity >= 1 ? { quantity: piece.quantity } : {}),
+  }))
+}
+
+export const mapComponentProducts = (products: any[]): ComponentModelProduct[] => {
+  if (!Array.isArray(products)) {
+    return []
+  }
+  return products.map((product) => ({
+    reference: product?.reference ?? '',
+    typeProductId: product?.typeProductId ?? product?.typeProduct?.id ?? '',
+    typeProductLabel: product?.typeProductLabel ?? product?.typeProduct?.name ?? '',
+    familyCode: product?.familyCode ?? product?.typeProduct?.code ?? '',
+    role: product?.role ?? '',
+  }))
+}
+
+export const mapSubcomponents = (components: any[]): ComponentModelStructureNode[] => {
+  if (!Array.isArray(components)) {
+    return []
+  }
+  return components.map((component) => ({
+    typeComposantId: component?.typeComposantId ?? component?.typeComposant?.id ?? '',
+    typeComposantLabel: component?.typeComposantLabel ?? component?.typeComposant?.name ?? '',
+    modelId: component?.modelId ?? '',
+    familyCode: component?.familyCode ?? component?.typeComposant?.code ?? '',
+    alias: component?.alias ?? component?.name ?? '',
+    subcomponents: mapSubcomponents(
+      Array.isArray(component?.subcomponents)
+        ? component.subcomponents
+        : component?.subComponents,
+    ),
+  }))
+}

app/shared/model/componentStructureSanitize.ts

@@ -0,0 +1,317 @@
+import type {
+  ComponentModelCustomField,
+  ComponentModelCustomFieldType,
+  ComponentModelPiece,
+  ComponentModelProduct,
+  ComponentModelStructureNode,
+} from '../types/inventory'
+// Inline helper to avoid circular dependency with componentStructure.ts
+const isPlainObject = (value: unknown): value is Record<string, unknown> => {
+  return value !== null && typeof value === 'object' && !Array.isArray(value)
+}
+
+export const toStringArray = (input: unknown): string[] | undefined => {
+  if (!Array.isArray(input)) {
+    return undefined
+  }
+  const parsed = input
+    .map((value) => {
+      if (typeof value === 'string') {
+        return value.trim()
+      }
+      if (value === null || value === undefined) {
+        return ''
+      }
+      return String(value).trim()
+    })
+    .filter((value) => value.length > 0)
+  return parsed.length ? parsed : undefined
+}
+
+export const extractFieldValueObject = (field: any): Record<string, any> => {
+  if (isPlainObject(field?.value)) {
+    return field.value as Record<string, any>
+  }
+  return {}
+}
+
+export const sanitizeCustomFields = (fields: any[]): ComponentModelCustomField[] => {
+  if (!Array.isArray(fields)) {
+    return []
+  }
+
+  return fields
+    .map((field, index) => {
+      const rawName =
+        typeof field?.name === 'string'
+          ? field.name
+          : typeof field?.key === 'string'
+            ? field.key
+            : ''
+      const name = rawName.trim()
+      if (!name) {
+        return null
+      }
+
+      const valueObject = extractFieldValueObject(field)
+
+      const candidateType =
+        typeof field?.type === 'string' && field.type
+          ? field.type
+          : typeof valueObject?.type === 'string'
+            ? valueObject.type
+            : ''
+      const allowedTypes: ComponentModelCustomFieldType[] = ['text', 'number', 'select', 'boolean', 'date']
+      const type = allowedTypes.includes(candidateType as ComponentModelCustomFieldType)
+        ? (candidateType as ComponentModelCustomFieldType)
+        : 'text'
+
+      const required =
+        typeof valueObject?.required === 'boolean' ? valueObject.required : !!field?.required
+
+      let options: string[] | undefined
+      if (type === 'select') {
+        options =
+          toStringArray(valueObject?.options) ||
+          toStringArray((valueObject as any)?.choices) ||
+          toStringArray(field?.options)
+
+        if (!options && typeof field?.optionsText === 'string') {
+          const parsedFromText = field.optionsText
+            .split(/\r?\n/)
+            .map((option: string) => option.trim())
+            .filter((option: string) => option.length > 0)
+          options = parsedFromText.length ? parsedFromText : undefined
+        }
+      }
+
+      const result: ComponentModelCustomField = { name, type, required }
+      if (options) {
+        result.options = options
+      }
+      const defaultCandidate =
+        field?.defaultValue ?? valueObject?.defaultValue ?? field?.value ?? field?.default ?? null
+      const resolvedDefault = (() => {
+        if (defaultCandidate === undefined || defaultCandidate === null) {
+          return undefined
+        }
+        if (typeof defaultCandidate === 'object') {
+          if (defaultCandidate === null) {
+            return undefined
+          }
+          if ('defaultValue' in (defaultCandidate as Record<string, any>)) {
+            return (defaultCandidate as Record<string, any>).defaultValue
+          }
+          if ('value' in (defaultCandidate as Record<string, any>)) {
+            return (defaultCandidate as Record<string, any>).value
+          }
+          return undefined
+        }
+        return defaultCandidate
+      })()
+      if (resolvedDefault !== undefined && resolvedDefault !== null && resolvedDefault !== '') {
+        result.defaultValue = String(resolvedDefault)
+      }
+      const id = typeof field?.id === 'string' ? field.id : undefined
+      if (id) {
+        result.id = id
+      }
+      const customFieldId = typeof field?.customFieldId === 'string' ? field.customFieldId : undefined
+      if (customFieldId) {
+        result.customFieldId = customFieldId
+      }
+      const orderIndex = typeof field?.orderIndex === 'number' ? field.orderIndex : index
+      result.orderIndex = orderIndex
+      return result
+    })
+    .filter((field): field is ComponentModelCustomField => !!field)
+}
+
+export const sanitizePieces = (pieces: any[]): ComponentModelPiece[] => {
+  if (!Array.isArray(pieces)) {
+    return []
+  }
+
+  return pieces
+    .map((piece) => {
+      const rawTypePieceId = typeof piece?.typePieceId === 'string'
+        ? piece.typePieceId.trim()
+        : typeof piece?.typePiece?.id === 'string'
+          ? piece.typePiece.id.trim()
+          : ''
+      const typePieceId = rawTypePieceId.length > 0 ? rawTypePieceId : undefined
+
+      const rawTypePieceLabel = typeof piece?.typePieceLabel === 'string'
+        ? piece.typePieceLabel.trim()
+        : typeof piece?.typePiece?.name === 'string'
+          ? piece.typePiece.name.trim()
+          : ''
+      const typePieceLabel = rawTypePieceLabel.length > 0 ? rawTypePieceLabel : undefined
+
+      const reference = typeof piece?.reference === 'string' && piece.reference.trim().length > 0
+        ? piece.reference.trim()
+        : undefined
+
+      const rawFamilyCode = typeof piece?.familyCode === 'string'
+        ? piece.familyCode.trim()
+        : typeof piece?.typePiece?.code === 'string'
+          ? piece.typePiece.code.trim()
+          : ''
+      const familyCode = rawFamilyCode.length > 0 ? rawFamilyCode : undefined
+
+      const rawRole = typeof piece?.role === 'string' ? piece.role.trim() : ''
+      const role = rawRole.length > 0 ? rawRole : undefined
+
+      const quantity = typeof piece?.quantity === 'number' && piece.quantity >= 1 ? piece.quantity : undefined
+
+      if (!typePieceId && !typePieceLabel && !reference && !familyCode) {
+        return null
+      }
+
+      const result: ComponentModelPiece = {}
+      if (role) {
+        result.role = role
+      }
+      if (familyCode) {
+        result.familyCode = familyCode
+      }
+      if (reference !== undefined) {
+        result.reference = reference
+      }
+      if (typePieceId) {
+        result.typePieceId = typePieceId
+      }
+      if (typePieceLabel) {
+        result.typePieceLabel = typePieceLabel
+      }
+      if (quantity !== undefined) {
+        result.quantity = quantity
+      }
+      return result
+    })
+    .filter((piece): piece is ComponentModelPiece => !!piece)
+}
+
+export const sanitizeProducts = (products: any[]): ComponentModelProduct[] => {
+  if (!Array.isArray(products)) {
+    return []
+  }
+
+  return products
+    .map((product) => {
+      const rawTypeProductId = typeof product?.typeProductId === 'string'
+        ? product.typeProductId.trim()
+        : typeof product?.typeProduct?.id === 'string'
+          ? product.typeProduct.id.trim()
+          : ''
+      const typeProductId = rawTypeProductId.length > 0 ? rawTypeProductId : undefined
+
+      const rawTypeProductLabel = typeof product?.typeProductLabel === 'string'
+        ? product.typeProductLabel.trim()
+        : typeof product?.typeProduct?.name === 'string'
+          ? product.typeProduct.name.trim()
+          : ''
+      const typeProductLabel = rawTypeProductLabel.length > 0 ? rawTypeProductLabel : undefined
+
+      const reference = typeof product?.reference === 'string' && product.reference.trim().length > 0
+        ? product.reference.trim()
+        : undefined
+
+      const rawFamilyCode = typeof product?.familyCode === 'string'
+        ? product.familyCode.trim()
+        : typeof product?.typeProduct?.code === 'string'
+          ? product.typeProduct.code.trim()
+          : ''
+      const familyCode = rawFamilyCode.length > 0 ? rawFamilyCode : undefined
+
+      const rawRole = typeof product?.role === 'string' ? product.role.trim() : ''
+      const role = rawRole.length > 0 ? rawRole : undefined
+
+      if (!typeProductId && !typeProductLabel && !reference && !familyCode) {
+        return null
+      }
+
+      const result: ComponentModelProduct = {}
+      if (role) {
+        result.role = role
+      }
+      if (familyCode) {
+        result.familyCode = familyCode
+      }
+      if (reference !== undefined) {
+        result.reference = reference
+      }
+      if (typeProductId) {
+        result.typeProductId = typeProductId
+      }
+      if (typeProductLabel) {
+        result.typeProductLabel = typeProductLabel
+      }
+      return result
+    })
+    .filter((product): product is ComponentModelProduct => !!product)
+}
+
+export const sanitizeSubcomponents = (components: any[]): ComponentModelStructureNode[] => {
+  if (!Array.isArray(components)) {
+    return []
+  }
+
+  return components
+    .map((component) => {
+      const rawTypeComposantId = typeof component?.typeComposantId === 'string'
+        ? component.typeComposantId.trim()
+        : typeof component?.typeComposant?.id === 'string'
+          ? component.typeComposant.id.trim()
+          : ''
+      const typeComposantId = rawTypeComposantId.length > 0 ? rawTypeComposantId : undefined
+
+      const modelId = typeof component?.modelId === 'string' && component.modelId.trim().length > 0
+        ? component.modelId.trim()
+        : undefined
+
+      const familyCode = typeof component?.familyCode === 'string' && component.familyCode.trim().length > 0
+        ? component.familyCode.trim()
+        : undefined
+
+      const alias = typeof component?.alias === 'string' && component.alias.trim().length > 0
+        ? component.alias.trim()
+        : undefined
+
+      if (!typeComposantId && !modelId && !familyCode) {
+        return null
+      }
+
+      const result: ComponentModelStructureNode = {
+        subcomponents: sanitizeSubcomponents(
+          Array.isArray(component?.subcomponents)
+            ? component.subcomponents
+            : component?.subComponents,
+        ),
+      }
+
+      if (typeComposantId) {
+        result.typeComposantId = typeComposantId
+      }
+      const typeComposantLabel = typeof component?.typeComposantLabel === 'string'
+        ? component.typeComposantLabel.trim()
+        : typeof component?.typeComposant?.name === 'string'
+          ? component.typeComposant.name.trim()
+          : ''
+      if (typeComposantLabel) {
+        result.typeComposantLabel = typeComposantLabel
+      }
+      if (modelId) {
+        result.modelId = modelId
+      }
+      if (familyCode) {
+        result.familyCode = familyCode
+      }
+      if (alias) {
+        result.alias = alias
+      }
+
+      return result
+    })
+    .filter((component): component is ComponentModelStructureNode => !!component)
+}

app/shared/model/definitionOverrides.ts

@@ -4,7 +4,7 @@ export interface DefinitionOverridePayload {
   name?: string
   reference?: string
   constructeurIds?: string[]
-  prix?: number
+  prix?: string
 }
 
 export const sanitizeDefinitionOverrides = (definition: any): DefinitionOverridePayload | null => {
@@ -41,7 +41,7 @@ export const sanitizeDefinitionOverrides = (definition: any): DefinitionOverride
   if (definition.prix !== undefined && definition.prix !== null && definition.prix !== '') {
     const parsed = Number(definition.prix)
     if (!Number.isNaN(parsed)) {
-      payload.prix = parsed
+      payload.prix = String(parsed)
     }
   }
 

app/shared/types/inventory.ts

@@ -21,6 +21,7 @@ export interface ComponentModelPiece {
   reference?: string
   familyCode?: string
   role?: string
+  quantity?: number
 }
 
 export interface ComponentModelProduct {
@@ -156,6 +157,7 @@ const validatePiece = (
   const reference = ensureString(value.reference)
   const familyCode = ensureString(value.familyCode)
   const role = ensureString(value.role)
+  const quantity = typeof value.quantity === 'number' && value.quantity >= 1 ? value.quantity : undefined
 
   if (!typePieceId && !typePieceLabel && !reference && !familyCode) {
     issues.push(`${path}: au moins un identifiant, une famille ou une référence de pièce est requis`)
@@ -168,6 +170,7 @@ const validatePiece = (
     ...(reference ? { reference } : {}),
     ...(familyCode ? { familyCode } : {}),
     ...(role ? { role } : {}),
+    ...(quantity ? { quantity } : {}),
   }
 }
 

app/shared/utils/catalogDisplayUtils.ts

@@ -0,0 +1,87 @@
+import { isImageDocument, isPdfDocument } from '~/utils/documentPreview'
+
+/**
+ * Selects the best document for thumbnail preview from an entity's documents array.
+ * Default priority: PDF first, then images. Use `preferImages` to reverse.
+ */
+export const resolvePrimaryDocument = (entity: Record<string, any>, preferImages = false): any | null => {
+  const documents = Array.isArray(entity?.documents) ? entity.documents : []
+  if (!documents.length) return null
+  const normalized = documents.filter((doc: any) => doc && typeof doc === 'object')
+  const withPath = normalized.filter((doc: any) => doc?.fileUrl || doc?.path)
+  if (!withPath.length) return normalized[0] ?? null
+  const first = preferImages ? isImageDocument : isPdfDocument
+  const second = preferImages ? isPdfDocument : isImageDocument
+  const a = withPath.find((doc: any) => first(doc))
+  if (a) return a
+  const b = withPath.find((doc: any) => second(doc))
+  if (b) return b
+  return withPath[0]
+}
+
+/**
+ * Builds alt text for a document preview thumbnail.
+ */
+export const resolvePreviewAlt = (entity: Record<string, any>): string => {
+  const parts = [entity?.name, entity?.reference].filter(Boolean)
+  return parts.length ? `Aperçu du document de ${parts.join(' – ')}` : 'Aperçu du document'
+}
+
+/**
+ * Supplier name resolution: extracts unique supplier names from entity relations.
+ */
+export const resolveSupplierNames = (entity: Record<string, any>, nestedKey?: string): string[] => {
+  const names: string[] = []
+  const seen = new Set<string>()
+
+  const pushName = (maybeName: unknown) => {
+    if (typeof maybeName !== 'string') return
+    const normalized = maybeName.trim().replace(/\s+/g, ' ')
+    if (!normalized.length) return
+    const key = normalized.toLowerCase()
+    if (seen.has(key)) return
+    seen.add(key)
+    names.push(normalized)
+  }
+
+  const collectConstructeurs = (value: unknown): void => {
+    if (!value) return
+    if (Array.isArray(value)) { value.forEach(collectConstructeurs); return }
+    if (typeof value === 'string') { pushName(value); return }
+    if (typeof value === 'object') {
+      const record = value as Record<string, any>
+      pushName(record?.name ?? record?.label ?? record?.companyName ?? record?.company ?? null)
+      if (record?.constructeur) collectConstructeurs(record.constructeur)
+      if (Array.isArray(record?.constructeurs)) collectConstructeurs(record.constructeurs)
+    }
+  }
+
+  const collectFromLabel = (value: unknown): void => {
+    if (typeof value !== 'string') return
+    value.split(/[,;\\/•·|]+/).map(part => part.trim()).filter(Boolean).forEach(pushName)
+  }
+
+  collectConstructeurs(entity?.constructeurs)
+  collectConstructeurs(entity?.constructeur)
+  collectFromLabel(entity?.constructeursLabel)
+  collectFromLabel(entity?.supplierLabel)
+  collectFromLabel(entity?.suppliers)
+
+  if (nestedKey && entity?.[nestedKey]) {
+    const nested = entity[nestedKey]
+    collectConstructeurs(nested?.constructeurs)
+    collectConstructeurs(nested?.constructeur)
+    collectFromLabel(nested?.constructeursLabel)
+    collectFromLabel(nested?.supplierLabel)
+  }
+
+  return names
+}
+
+const MAX_VISIBLE_SUPPLIERS = 3
+
+export const buildSuppliersDisplay = (suppliers: string[]) => {
+  const visible = suppliers.slice(0, MAX_VISIBLE_SUPPLIERS)
+  const overflow = Math.max(suppliers.length - visible.length, 0)
+  return { suppliers, visible, overflow, tooltip: suppliers.length ? suppliers.join(', ') : '' }
+}

app/shared/utils/customFieldFormUtils.ts

@@ -225,7 +225,10 @@ export const buildCustomFieldInputs = (
     if (fieldName) mapByName.set(fieldName, entry)
   })
 
-  return definitions
+  const matchedIds = new Set<string>()
+  const matchedNames = new Set<string>()
+
+  const result = definitions
     .map((definition) => {
       const definitionId = definition.customFieldId || definition.id || null
       const matched = (definitionId ? mapById.get(definitionId) : null) || mapByName.get(definition.name)
@@ -239,6 +242,11 @@ export const buildCustomFieldInputs = (
         }
       }
 
+      const matchedFieldId = matched.customField?.id || matched.customFieldId || null
+      if (matchedFieldId) matchedIds.add(matchedFieldId)
+      const matchedFieldName = matched.customField?.name || matched.name || null
+      if (matchedFieldName) matchedNames.add(matchedFieldName)
+
       const resolvedValue = extractStoredCustomFieldValue(matched)
       return {
         ...definition,
@@ -253,7 +261,36 @@ export const buildCustomFieldInputs = (
         ),
       }
     })
-    .sort((a, b) => (a.orderIndex ?? 0) - (b.orderIndex ?? 0))
+
+  // Include values with embedded definitions that didn't match any structure definition
+  valueList.forEach((entry, index) => {
+    if (!entry || typeof entry !== 'object') return
+    const cf = entry.customField
+    if (!cf || typeof cf !== 'object') return
+    const fieldId = cf.id || entry.customFieldId || null
+    const fieldName = cf.name || entry.name || null
+    if (fieldId && matchedIds.has(fieldId)) return
+    if (fieldName && matchedNames.has(fieldName)) return
+
+    const name = resolveFieldName(cf)
+    if (!name) return
+
+    const type = resolveFieldType(cf)
+    const resolvedValue = extractStoredCustomFieldValue(entry)
+    result.push({
+      id: fieldId,
+      name,
+      type,
+      required: resolveRequiredFlag(cf),
+      options: resolveOptions(cf),
+      value: formatDefaultValue(type, resolvedValue),
+      customFieldId: fieldId,
+      customFieldValueId: entry.id ?? null,
+      orderIndex: typeof cf.orderIndex === 'number' ? cf.orderIndex : definitions.length + index,
+    })
+  })
+
+  return result.sort((a, b) => (a.orderIndex ?? 0) - (b.orderIndex ?? 0))
 }
 
 // ---------------------------------------------------------------------------

app/shared/utils/deleteImpactUtils.ts

@@ -0,0 +1,19 @@
+export const resolveDeleteImpact = (entity: Record<string, any>): string[] => {
+  const impacts: string[] = []
+  const machineLinks = Array.isArray(entity?.machineLinks) ? entity.machineLinks.length : entity?.machineLinksCount ?? 0
+  const documents = Array.isArray(entity?.documents) ? entity.documents.length : entity?.documentsCount ?? 0
+  const customFields = Array.isArray(entity?.customFieldValues) ? entity.customFieldValues.length : entity?.customFieldValuesCount ?? 0
+  if (machineLinks > 0) impacts.push(`${machineLinks} liaison${machineLinks > 1 ? 's' : ''} machine`)
+  if (documents > 0) impacts.push(`${documents} document${documents > 1 ? 's' : ''}`)
+  if (customFields > 0) impacts.push(`${customFields} valeur${customFields > 1 ? 's' : ''} de champs personnalisés`)
+  return impacts
+}
+
+export const buildDeleteMessage = (entityName: string, impacts: string[]): string => {
+  const lines = [`Voulez-vous vraiment supprimer « ${entityName} » ?`]
+  if (impacts.length) {
+    lines.push(`Cela supprimera également :\n• ${impacts.join('\n• ')}`)
+  }
+  lines.push('Cette action est irréversible.')
+  return lines.join('\n\n')
+}

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/productDisplayUtils.ts

@@ -196,34 +196,19 @@ export const getProductDisplay = (
 
   const structuralCandidates = [
     source.products,
-    source.productSkeleton,
     (source.definition as AnyRecord)?.products,
-    (source.definition as AnyRecord)?.productSkeleton,
     ((source.definition as AnyRecord)?.structure as AnyRecord)?.products,
-    ((source.definition as AnyRecord)?.structure as AnyRecord)?.productSkeleton,
     (source.structure as AnyRecord)?.products,
-    (source.structure as AnyRecord)?.productSkeleton,
     (source.requirement as AnyRecord)?.products,
-    (source.requirement as AnyRecord)?.productSkeleton,
     ((source.requirement as AnyRecord)?.structure as AnyRecord)?.products,
-    ((source.requirement as AnyRecord)?.structure as AnyRecord)?.productSkeleton,
-    ((source.requirement as AnyRecord)?.componentSkeleton as AnyRecord)?.products,
     (source.typeComposant as AnyRecord)?.products,
-    (source.typeComposant as AnyRecord)?.productSkeleton,
     ((source.typeComposant as AnyRecord)?.structure as AnyRecord)?.products,
-    ((source.typeComposant as AnyRecord)?.structure as AnyRecord)?.productSkeleton,
     (source.originalComposant as AnyRecord)?.products,
-    (source.originalComposant as AnyRecord)?.productSkeleton,
     ((source.originalComposant as AnyRecord)?.definition as AnyRecord)?.products,
-    ((source.originalComposant as AnyRecord)?.definition as AnyRecord)?.productSkeleton,
     (((source.originalComposant as AnyRecord)?.definition as AnyRecord)?.structure as AnyRecord)?.products,
-    (((source.originalComposant as AnyRecord)?.definition as AnyRecord)?.structure as AnyRecord)?.productSkeleton,
     (source.originalComponent as AnyRecord)?.products,
-    (source.originalComponent as AnyRecord)?.productSkeleton,
     ((source.originalComponent as AnyRecord)?.definition as AnyRecord)?.products,
-    ((source.originalComponent as AnyRecord)?.definition as AnyRecord)?.productSkeleton,
     (((source.originalComponent as AnyRecord)?.definition as AnyRecord)?.structure as AnyRecord)?.products,
-    (((source.originalComponent as AnyRecord)?.definition as AnyRecord)?.structure as AnyRecord)?.productSkeleton,
   ]
 
   const structuralProducts = structuralCandidates

app/shared/utils/structureAssignmentHelpers.ts

@@ -0,0 +1,258 @@
+/**
+ * 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,
+    quantity: typeof (definition as any).quantity === 'number' ? (definition as any).quantity : 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/structureAssignmentLabels.ts

@@ -0,0 +1,259 @@
+/**
+ * Type definitions and pure label/description helpers for structure assignments.
+ *
+ * Extracted from composables/useStructureAssignmentFetch.ts to keep files
+ * under 500 lines. These are stateless utilities that do not depend on Vue
+ * reactivity or API fetching.
+ */
+
+import type {
+  ComponentModelPiece,
+  ComponentModelProduct,
+  ComponentModelStructureNode,
+} from '~/shared/types/inventory'
+
+// ---------------------------------------------------------------------------
+// Option types
+// ---------------------------------------------------------------------------
+
+export interface ComponentOption {
+  id: string
+  name?: string | null
+  reference?: string | null
+  typeComposantId?: string | null
+  typeComposant?: {
+    id: string
+    name?: string | null
+    code?: string | null
+  } | null
+}
+
+export interface PieceOption {
+  id: string
+  name?: string | null
+  reference?: string | null
+  typePieceId?: string | null
+  typePiece?: {
+    id: string
+    name?: string | null
+    code?: string | null
+  } | null
+}
+
+export interface ProductOption {
+  id: string
+  name?: string | null
+  reference?: string | null
+  typeProductId?: string | null
+  typeProduct?: {
+    id: string
+    name?: string | null
+    code?: string | null
+  } | null
+}
+
+// ---------------------------------------------------------------------------
+// Assignment node types
+// ---------------------------------------------------------------------------
+
+export interface StructurePieceAssignment {
+  path: string
+  definition: ComponentModelPiece
+  selectedPieceId: string
+}
+
+export interface StructureProductAssignment {
+  path: string
+  definition: ComponentModelProduct
+  selectedProductId: string
+}
+
+export interface StructureAssignmentNode {
+  path: string
+  definition: ComponentModelStructureNode
+  selectedComponentId: string
+  pieces: StructurePieceAssignment[]
+  products: StructureProductAssignment[]
+  subcomponents: StructureAssignmentNode[]
+}
+
+// ---------------------------------------------------------------------------
+// Component label helpers
+// ---------------------------------------------------------------------------
+
+export const componentOptionLabel = (component?: ComponentOption | null): string => {
+  if (!component) {
+    return 'Composant sans nom'
+  }
+  return component.name || 'Composant sans nom'
+}
+
+export const componentOptionDescription = (component?: ComponentOption | null): string => {
+  if (!component) {
+    return ''
+  }
+  const parts: string[] = []
+  const typeLabel =
+    component.typeComposant?.name || component.typeComposant?.code || null
+  if (typeLabel) {
+    parts.push(typeLabel)
+  }
+  if (component.reference) {
+    parts.push(`Ref. ${component.reference}`)
+  }
+  return parts.join(' \u2022 ')
+}
+
+// ---------------------------------------------------------------------------
+// Piece label helpers
+// ---------------------------------------------------------------------------
+
+export const pieceOptionLabel = (piece?: PieceOption | null): string => {
+  if (!piece) {
+    return 'Pi\u00e8ce'
+  }
+  return piece.name || 'Pi\u00e8ce'
+}
+
+export const pieceOptionDescription = (piece?: PieceOption | null): string => {
+  if (!piece) {
+    return ''
+  }
+  const parts: string[] = []
+  const typeLabel =
+    piece.typePiece?.name || piece.typePiece?.code || null
+  if (typeLabel) {
+    parts.push(typeLabel)
+  }
+  if (piece.reference) {
+    parts.push(`Ref. ${piece.reference}`)
+  }
+  return parts.join(' \u2022 ')
+}
+
+// ---------------------------------------------------------------------------
+// Product label helpers
+// ---------------------------------------------------------------------------
+
+export const productOptionLabel = (product?: ProductOption | null): string => {
+  if (!product) {
+    return 'Produit'
+  }
+  return product.name || product.reference || 'Produit'
+}
+
+export const productOptionDescription = (product?: ProductOption | null): string => {
+  if (!product) {
+    return ''
+  }
+  const parts: string[] = []
+  const typeLabel =
+    product.typeProduct?.name || product.typeProduct?.code || null
+  if (typeLabel) {
+    parts.push(typeLabel)
+  }
+  if (product.reference) {
+    parts.push(`Ref. ${product.reference}`)
+  }
+  return parts.join(' \u2022 ')
+}
+
+// ---------------------------------------------------------------------------
+// Requirement description helpers
+// ---------------------------------------------------------------------------
+
+export const describePieceRequirement = (
+  assignment: StructurePieceAssignment,
+  options: PieceOption[],
+  pieceTypeLabelMap: Record<string, string>,
+): string => {
+  const definition = assignment.definition
+  const parts: string[] = []
+  const addPart = (value?: string | null) => {
+    const trimmed = typeof value === 'string' ? value.trim() : ''
+    if (trimmed && !parts.includes(trimmed)) {
+      parts.push(trimmed)
+    }
+  }
+
+  const fallbackPiece = options[0] || null
+  const fallbackType = fallbackPiece?.typePiece || null
+
+  addPart(definition.role)
+  const explicitLabel =
+    definition.typePieceLabel
+    || definition.typePiece?.name
+    || (definition.typePieceId ? pieceTypeLabelMap[definition.typePieceId] : null)
+    || fallbackType?.name
+  addPart(explicitLabel)
+
+  const family =
+    definition.familyCode
+    || definition.typePiece?.code
+    || fallbackType?.code
+    || null
+  if (family) {
+    addPart(`Famille ${family}`)
+  }
+
+  if (parts.length === 0) {
+    addPart(fallbackType?.name)
+    if (fallbackType?.code) {
+      addPart(`Famille ${fallbackType.code}`)
+    }
+  }
+
+  if (parts.length === 0 && definition.typePieceId) {
+    addPart(`#${definition.typePieceId}`)
+  }
+
+  return parts.length ? parts.join(' \u2022 ') : 'Pi\u00e8ce du squelette'
+}
+
+export const describeProductRequirement = (
+  assignment: StructureProductAssignment,
+  options: ProductOption[],
+  productTypeLabelMap: Record<string, string>,
+): string => {
+  const definition = assignment.definition
+  const parts: string[] = []
+  const addPart = (value?: string | null) => {
+    const trimmed = typeof value === 'string' ? value.trim() : ''
+    if (trimmed && !parts.includes(trimmed)) {
+      parts.push(trimmed)
+    }
+  }
+
+  const fallbackProduct = options[0] || null
+  const fallbackType = fallbackProduct?.typeProduct || null
+
+  addPart(definition.role)
+  const explicitLabel =
+    definition.typeProductLabel
+    || definition.typeProduct?.name
+    || (definition.typeProductId ? productTypeLabelMap[definition.typeProductId] : null)
+    || fallbackType?.name
+  addPart(explicitLabel)
+
+  const family =
+    definition.familyCode
+    || definition.typeProduct?.code
+    || fallbackType?.code
+    || null
+  if (family) {
+    addPart(`Famille ${family}`)
+  }
+
+  if (parts.length === 0) {
+    addPart(fallbackType?.name)
+    if (fallbackType?.code) {
+      addPart(`Famille ${fallbackType.code}`)
+    }
+  }
+
+  if (parts.length === 0 && definition.typeProductId) {
+    addPart(`#${definition.typeProductId}`)
+  }
+
+  return parts.length ? parts.join(' \u2022 ') : 'Produit du squelette'
+}