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">
+  <div class="min-h-screen flex flex-col bg-base-200/40">
-    <LayoutAppNavbar
+    <!-- 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">
+    <footer class="border-t border-base-300/50 bg-base-100/60 backdrop-blur-sm">
-      <div class="items-center grid-flow-col">
+      <div class="container mx-auto flex items-center justify-between px-6 py-3">
-        <p>
+        <p class="text-xs text-base-content/40 font-medium tracking-wide">
-          @Malio 2025 · <NuxtLink to="/changelog" class="link link-hover">v{{ appVersion }}</NuxtLink>
+          &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 */
+  default: true;
-  prefersdark: false; /* set as default dark mode (prefers-color-scheme:dark) */
+  prefersdark: false;
-  color-scheme: light; /* color of browser-provided UI */
+  color-scheme: light;
 
-  /* #FBFAFA — gris clair */
+  /* Surfaces — warm gray with a hint of blue */
-  --color-base-100: oklch(98% 0.003 0);
+  --color-base-100: oklch(98.5% 0.004 260);
-  --color-base-200: oklch(94% 0.01 262);
+  --color-base-200: oklch(95% 0.008 260);
-  --color-base-300: oklch(90% 0.02 262);
+  --color-base-300: oklch(91% 0.015 260);
-  --color-base-content: oklch(20% 0.03 262);
+  --color-base-content: oklch(22% 0.025 260);
-  /* #304998 — bleu Malio */
+
-  --color-primary: oklch(37% 0.15 262);
+  /* 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);
+  /* Secondary — refined lavender */
-  --color-secondary-content: oklch(20% 0.03 270);
+  --color-secondary: oklch(72% 0.06 275);
-  /* #ED8521 — orange */
+  --color-secondary-content: oklch(22% 0.03 275);
-  --color-accent: oklch(71% 0.17 58);
+
-  --color-accent-content: oklch(98% 0.005 58);
+  /* Accent — warm amber-orange */
-  /* neutral dérivé du bleu Malio */
+  --color-accent: oklch(72% 0.17 55);
-  --color-neutral: oklch(37% 0.08 262);
+  --color-accent-content: oklch(20% 0.04 55);
-  --color-neutral-content: oklch(98% 0.005 262);
+
-  --color-info: oklch(55% 0.12 262);
+  /* Neutral — deep slate */
-  --color-info-content: oklch(98% 0.005 262);
+  --color-neutral: oklch(28% 0.04 260);
-  --color-success: oklch(65% 0.2 145);
+  --color-neutral-content: oklch(95% 0.005 260);
-  --color-success-content: oklch(98% 0.005 145);
+
+  /* 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-warning-content: oklch(22% 0.05 70);
-  --color-error: oklch(60% 0.25 25);
+  --color-error: oklch(58% 0.22 25);
   --color-error-content: oklch(98% 0.005 25);
 
-  /* border radius */
+  /* Geometry */
-  --radius-selector: 1rem;
+  --radius-selector: 0.75rem;
-  --radius-field: 0.25rem;
+  --radius-field: 0.375rem;
-  --radius-box: 0.5rem;
+  --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 */
+/* ─── High contrast mode ─── */
-.contrast-high .btn {
+.contrast-high .btn { @apply border-2; }
-  @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 {
+/* ─── Accessibility ─── */
-  @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é */
 @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;
+  transition: opacity 0.25s ease;
-  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 */
 }
 
-.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;
+  font-family: var(--font-body);
-  transform: none !important;
+  border-radius: 0.75rem;
-  scale: 1 !important;
+  border: 1px solid oklch(91% 0.015 260 / 0.5);
-  width: auto !important;
-  max-width: 500px !important;
 }
 
-.modal .form-control {
+@keyframes modalSlideUp {
-  font-size: 100% !important;
+  from { opacity: 0; transform: translateY(0.5rem); }
-  transform: none !important;
+  to { opacity: 1; transform: translateY(0); }
 }
 
-.modal .btn {
+.modal.modal-open .modal-box {
-  font-size: 100% !important;
+  animation: modalSlideUp 0.25s ease-out;
-  transform: none !important;
-  padding: 0.5rem 1rem !important;
-  height: auto !important;
-  min-height: 2.5rem !important;
 }
 
-.modal .input {
+/* ─── Page transitions ─── */
-  font-size: 100% !important;
+.page-enter-active {
-  transform: none !important;
+  transition: opacity 0.2s ease, transform 0.2s ease;
-  height: auto !important;
-  min-height: 2.5rem !important;
 }
-
+.page-leave-active {
-.modal .select {
+  transition: opacity 0.15s ease;
-  font-size: 100% !important;
-  transform: none !important;
-  height: auto !important;
-  min-height: 2.5rem !important;
 }
-
+.page-enter-from {
-.modal .textarea {
+  opacity: 0;
-  font-size: 100% !important;
+  transform: translateY(4px);
-  transform: none !important;
+}
-  min-height: 4rem !important;
+.page-leave-to {
-}
-
-.modal .range {
-  font-size: 100% !important;
-  transform: none !important;
-  height: auto !important;
-  min-height: 1.5rem !important;
-}
-
-.modal .label {
-  font-size: 100% !important;
-  transform: none !important;
-}
-
-.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 */
+/* ─── Scrollbar styling ─── */
-.range {
+::-webkit-scrollbar {
-  transition: all 0.2s ease-in-out;
+  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);
 }
 
-.range::-webkit-slider-thumb {
+/* ─── Readability ─── */
-  transition: all 0.2s ease-in-out;
+.text-sm { line-height: 1.5; }
-}
+.text-xs { line-height: 1.4; }
 
-.range::-webkit-slider-thumb:hover {
+/* ─── Adaptive spacing ─── */
-  transform: scale(1.1);
+.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); }
 
-/* Amélioration de la lisibilité */
+.m-1 { margin: var(--spacing-xs); }
-.text-sm {
+.m-2 { margin: var(--spacing-sm); }
-  line-height: 1.5;
+.m-3 { margin: var(--spacing-md); }
-}
+.m-4 { margin: var(--spacing-lg); }
+.m-5 { margin: var(--spacing-xl); }
 
-.text-xs {
+.gap-1 { gap: var(--spacing-xs); }
-  line-height: 1.4;
+.gap-2 { gap: var(--spacing-sm); }
-}
+.gap-3 { gap: var(--spacing-md); }
-
+.gap-4 { gap: var(--spacing-lg); }
-/* Espacement adaptatif */
+.gap-5 { gap: var(--spacing-xl); }
-.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);
-}
 
 @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,160 +8,135 @@
     />
 
     <!-- Component Header -->
-    <div class="flex items-start justify-between p-4 bg-base-200 rounded-lg">
+    <div class="flex items-center gap-3 p-3 bg-base-200 rounded-lg cursor-pointer" @click="toggleCollapse">
-      <div class="flex items-start gap-3 w-full">
+      <IconLucideChevronRight
-        <button
+        class="w-4 h-4 shrink-0 transition-transform text-base-content/50"
-          type="button"
-          class="btn btn-ghost btn-sm btn-circle shrink-0 transition-transform"
         :class="{ 'rotate-90': !isCollapsed }"
-          :aria-expanded="!isCollapsed"
+        aria-hidden="true"
-          :title="isCollapsed ? 'Déplier les détails du composant' : 'Replier les détails du composant'"
+      />
-          @click="toggleCollapse"
+      <div class="flex-1 min-w-0">
-        >
+        <div class="flex items-center gap-2 flex-wrap">
-          <IconLucideChevronRight class="w-5 h-5 transition-transform" aria-hidden="true" />
+          <h3 class="text-sm font-semibold text-base-content truncate">
-          <span class="sr-only">{{ isCollapsed ? 'Déplier' : 'Replier' }} le composant</span>
-        </button>
-        <div class="flex-1">
-          <h3 class="text-lg font-semibold">
             {{ component.name }}
           </h3>
-          <div class="flex flex-wrap gap-2 mt-2">
+          <span v-if="component.reference" class="badge badge-outline badge-xs">{{ component.reference }}</span>
-            <span v-if="component.reference" class="badge badge-outline badge-sm">{{ component.reference }}</span>
+          <span v-if="component.prix" class="badge badge-primary badge-xs">{{ component.prix }}€</span>
-            <template v-if="componentConstructeursDisplay.length">
+        </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="badge badge-outline badge-sm"
+            class="text-xs text-base-content/50"
           >
             {{ constructeur.name }}
           </span>
-            </template>
+          <span v-if="displayProductName" class="badge badge-info badge-xs">
-            <span v-if="component.prix" class="badge badge-primary badge-sm">{{ component.prix }}€</span>
+            {{ displayProductName }}
-            <span
-              v-if="displayProductName"
-              class="badge badge-info badge-sm"
-            >
-              Produit&nbsp;: {{ displayProductName }}
           </span>
         </div>
       </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">
+    <!-- Expanded content -->
-      <!-- Component Info Display - Editable or Read-only -->
+    <div v-show="!isCollapsed" class="mt-3 space-y-4 pl-7">
-      <div class="p-4 bg-base-100 border border-gray-200 rounded-lg">
+      <!-- Info fields -->
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+      <div v-if="isEditMode" class="grid grid-cols-1 md:grid-cols-2 gap-3">
         <div class="form-control">
-            <label class="label"><span class="label-text font-medium">Nom</span></label>
+          <label class="label py-1"><span class="label-text text-xs font-medium text-base-content/60">Nom</span></label>
-            <input
+          <input v-model="component.name" type="text" class="input input-bordered input-sm" @blur="updateComponent">
-              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>
+          <label class="label py-1"><span class="label-text text-xs font-medium text-base-content/60">Référence</span></label>
-            <input
+          <input v-model="component.reference" type="text" class="input input-bordered input-sm" @blur="updateComponent">
-              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>
+          <label class="label py-1"><span class="label-text text-xs font-medium text-base-content/60">Prix</span></label>
-            <input
+          <input v-model="component.prix" type="number" step="0.01" class="input input-bordered input-sm" @blur="updateComponent">
-              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>
+          <label class="label py-1"><span class="label-text text-xs font-medium text-base-content/60">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>
-              <div v-if="componentConstructeursDisplay.length" class="space-y-1">
+      </div>
-                <div
+
+      <!-- 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="flex flex-col"
+              class="text-base-content"
-                >
-                  <span class="font-medium">{{ constructeur.name }}</span>
-                  <span
-                    v-if="formatConstructeurContact(constructeur)"
-                    class="text-xs text-gray-500"
             >
+              {{ 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>
-              <span v-else class="font-medium">Non défini</span>
+
-            </div>
+      <!-- Product -->
-          </div>
+      <div v-if="displayProduct" class="rounded-lg border border-base-200 bg-base-100 p-3">
-          <div class="form-control md:col-span-2">
+        <div class="flex items-start justify-between gap-3">
-            <label class="label">
+          <div class="space-y-1">
-              <span class="label-text font-medium">Produit catalogue</span>
+            <p class="text-xs text-base-content/40">Produit catalogue</p>
-            </label>
+            <p class="text-sm font-semibold text-base-content">{{ displayProductName }}</p>
-            <div class="input input-bordered input-sm bg-base-200 min-h-[2.75rem] flex flex-col justify-center space-y-1">
+            <p
-              <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"
+              class="text-xs text-base-content/60"
             >
               {{ info.label }} : {{ info.value }}
-                </span>
+            </p>
+          </div>
           <NuxtLink
             v-if="component.product?.id"
             :to="`/product/${component.product.id}/edit`"
-                  class="link link-primary text-xs"
+            class="btn btn-ghost btn-xs shrink-0"
           >
-                  Ouvrir la fiche produit
+            Voir le produit
           </NuxtLink>
-              </template>
-              <span v-else class="font-medium">Non défini</span>
         </div>
-            <div
+        <!-- Product documents -->
-              v-if="productDocuments.length"
+        <div v-if="productDocuments.length" class="mt-3 pt-3 border-t border-base-200 space-y-2">
-              class="mt-2 space-y-2 rounded-md border border-base-200 bg-base-100 p-3 text-xs"
+          <p class="text-xs font-medium text-base-content/50">Documents du produit</p>
-            >
-              <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"
+            class="flex items-center justify-between gap-3 text-xs"
-              >
-                <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"
           >
+            <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"
@@ -177,26 +152,18 @@
                 <component
                   v-else
                   :is="documentIcon(document).component"
-                      class="h-6 w-6"
+                  class="h-4 w-4"
                   :class="documentIcon(document).colorClass"
                   aria-hidden="true"
                 />
               </div>
-                  <div>
+              <span class="truncate text-base-content">{{ document.name }}</span>
-                    <div class="font-medium text-base-content">
-                      {{ document.name }}
             </div>
-                    <div class="text-xs text-base-content/70">
+            <div class="flex items-center gap-1 shrink-0">
-                      {{ 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
@@ -208,30 +175,26 @@
           </div>
         </div>
       </div>
-        </div>
 
-      </div>
+      <!-- Custom Fields -->
-
+      <CustomFieldDisplay
-      <!-- Custom Fields Display - Editable or Read-only -->
-      <CommonCustomFieldDisplay
         :fields="displayedCustomFields"
         :is-edit-mode="isEditMode"
         :columns="2"
         @field-blur="updateComponentCustomField"
       />
 
-      <div class="mt-4 pt-4 border-t border-gray-200 space-y-3">
+      <!-- Documents -->
+      <div class="space-y-2">
         <div class="flex items-center justify-between">
-          <h4 class="font-semibold text-sm text-gray-700">
+          <p class="text-xs font-semibold text-base-content/50 uppercase tracking-wide">Documents</p>
-            Documents
+          <span v-if="isEditMode && selectedFiles.length" class="badge badge-outline badge-xs">
-          </h4>
+            {{ selectedFiles.length }} fichier{{ selectedFiles.length > 1 ? 's' : '' }}
-          <span v-if="isEditMode && selectedFiles.length" class="badge badge-outline">
-            {{ selectedFiles.length }} fichier{{ selectedFiles.length > 1 ? 's' : '' }} sélectionné{{ selectedFiles.length > 1 ? 's' : '' }}
           </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...
+          Chargement...
         </p>
 
         <DocumentUpload
@@ -252,14 +215,14 @@
         />
       </div>
 
-      <!-- Component Pieces -->
+      <!-- Component Pieces (real MachinePieceLinks) -->
-      <div v-if="component.pieces && component.pieces.length > 0" class="space-y-2">
+      <div v-if="linkedPieces.length > 0" class="space-y-2">
-        <h4 class="font-semibold text-gray-700">
+        <p class="text-xs font-semibold text-base-content/50 uppercase tracking-wide">
           Pièces du composant
-        </h4>
+        </p>
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
+        <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"
@@ -270,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">
+      <div v-if="childComponents.length > 0" class="space-y-2">
-        <h4 class="font-semibold text-gray-700">
+        <p class="text-xs font-semibold text-base-content/50 uppercase tracking-wide">
           Sous-composants
-        </h4>
+        </p>
-        <div class="space-y-3 pl-4 border-l-2 border-gray-200">
+        <div class="space-y-2 pl-4 border-l-2 border-base-200">
           <ComponentItem
             v-for="subComponent in childComponents"
             :key="subComponent.id"
@@ -321,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 {
@@ -377,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/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)">

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]">
+      <div :class="['space-y-3', maxWidthClass]">
-        <component :is="headingTag" v-if="title" class="text-4xl font-bold">
+        <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
+            <ProductDocumentsInline
-              v-if="productDocuments.length"
+              :documents="productDocuments"
-              class="mt-2 space-y-2 rounded-md border border-base-200 bg-base-100 p-3 text-xs"
+              @preview="openPreview"
-            >
-              <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>
           </div>
           <span v-else class="font-medium">
             Non défini
@@ -234,16 +211,16 @@
       </div>
 
     <!-- Champs personnalisés de la pièce -->
-    <CommonCustomFieldDisplay
+    <CustomFieldDisplay
       :fields="displayedCustomFields"
       :is-edit-mode="isEditMode"
       @field-input="handleCustomFieldInput"
       @field-blur="handleCustomFieldBlur"
     />
 
-    <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"
@@ -255,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>
 
@@ -287,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 {
@@ -295,13 +271,6 @@ import {
   resolveConstructeurs,
   uniqueConstructeurIds,
 } from '~/shared/constructeurUtils'
-import {
-  formatSize,
-  shouldInlinePdf,
-  documentPreviewSrc,
-  documentIcon,
-  downloadDocument,
-} from '~/shared/utils/documentDisplayUtils'
 import {
   resolveFieldId,
   resolveFieldReadOnly,
@@ -313,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({
@@ -325,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 ---
@@ -485,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,
@@ -531,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
   },
 )
 
@@ -543,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

@@ -10,7 +10,7 @@
         </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>
 
@@ -29,7 +29,6 @@
                 <select
                   v-model="product.typeProductId"
                   class="select select-bordered select-xs"
-                  :disabled="isProductLocked(product)"
                   @change="handleProductTypeSelect(product)"
                 >
                   <option value="">
@@ -46,26 +45,16 @@
               </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 v-if="!restrictedMode" type="button" class="btn btn-outline btn-xs" @click="addProduct">
+      <button type="button" class="btn btn-outline btn-xs" @click="addProduct">
         <IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" />
         Ajouter
       </button>
@@ -76,7 +65,7 @@
         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>
 
@@ -111,7 +100,7 @@
                   class="input input-bordered input-xs"
                   placeholder="Nom du champ"
                 >
-                <select v-model="field.type" class="select select-bordered select-xs" :disabled="isFieldLocked(field)">
+                <select v-model="field.type" class="select select-bordered select-xs">
                   <option value="text">
                     Texte
                   </option>
@@ -131,7 +120,7 @@
               </div>
 
               <div class="flex items-center gap-2 text-xs">
-                <input v-model="field.required" type="checkbox" class="checkbox checkbox-xs" :disabled="isFieldLocked(field)">
+                <input v-model="field.required" type="checkbox" class="checkbox checkbox-xs">
                 Obligatoire
               </div>
 
@@ -140,27 +129,16 @@
                 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">
-              <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>
@@ -183,7 +161,6 @@ defineOptions({ name: 'PieceModelStructureEditor' })
 
 const props = defineProps<{
   modelValue?: PieceModelStructure | null
-  restrictedMode?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -194,9 +171,6 @@ const {
   fields,
   products,
   productTypeOptions,
-  restrictedMode,
-  isFieldLocked,
-  isProductLocked,
   formatProductTypeOption,
   handleProductTypeSelect,
   addProduct,

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) {
+      if (!exists && !loading.value) {
-        loadProducts().catch((error) => {
+        loadProducts({ force: true }).catch((error) => {
           console.error('Erreur lors du chargement des produits:', error)
         })
       }

app/components/StructureNodeEditor.vue

@@ -9,7 +9,7 @@
             </span>
           </label>
           <template v-if="isRoot">
-            <p class="text-[11px] text-gray-500">
+            <p class="text-[11px] text-base-content/50">
               Le composant racine correspond à la catégorie que vous éditez. Sélectionnez uniquement les familles pour les sous-composants.
             </p>
           </template>
@@ -31,7 +31,7 @@
                 {{ formatComponentTypeOption(type) }}
               </option>
             </select>
-            <p class="text-[11px] text-gray-500">
+            <p class="text-[11px] text-base-content/50">
               {{ node.typeComposantId ? `Sélection : ${getComponentTypeLabel(node.typeComposantId) || 'Inconnue'}` : 'Aucune famille sélectionnée' }}
             </p>
             <div v-if="!isRoot" class="form-control mt-2">
@@ -73,7 +73,7 @@
           <h4 :class="headingClass">
             {{ isRoot ? 'Champs personnalisés du composant' : 'Champs personnalisés' }}
           </h4>
-          <p v-if="!(node.customFields?.length)" class="text-xs text-gray-500">
+          <p v-if="!(node.customFields?.length)" class="text-xs text-base-content/50">
             Aucun champ n'a encore été défini.
           </p>
           <div v-else class="space-y-2">
@@ -109,7 +109,7 @@
                       class="input input-bordered input-xs"
                       placeholder="Nom du champ"
                     />
-                    <select v-model="field.type" class="select select-bordered select-xs" :disabled="isCustomFieldLocked(index)">
+                    <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>
@@ -118,7 +118,7 @@
                     </select>
                   </div>
                   <div class="flex items-center gap-2 text-xs">
-                    <input v-model="field.required" type="checkbox" class="checkbox checkbox-xs" :disabled="isCustomFieldLocked(index)" />
+                    <input v-model="field.required" type="checkbox" class="checkbox checkbox-xs" />
                     Obligatoire
                   </div>
                   <textarea
@@ -126,26 +126,15 @@
                     v-model="field.optionsText"
                     class="textarea textarea-bordered textarea-xs h-20"
                     placeholder="Option 1&#10;Option 2"
-                    :disabled="isCustomFieldLocked(index)"
                   ></textarea>
                 </div>
                 <button
-                  v-if="!isCustomFieldLocked(index)"
                   type="button"
                   class="btn btn-error btn-xs btn-square"
                   @click="removeCustomField(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">
-                  <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>
             </div>
           </div>
@@ -159,7 +148,7 @@
           <h4 :class="headingClass">
             {{ isRoot ? 'Produits inclus par défaut' : 'Produits' }}
           </h4>
-          <p v-if="!(node.products?.length)" class="text-xs text-gray-500">
+          <p v-if="!(node.products?.length)" class="text-xs text-base-content/50">
             Aucun produit défini.
           </p>
           <div v-else class="space-y-2">
@@ -189,7 +178,6 @@
                     <select
                       v-model="product.typeProductId"
                       class="select select-bordered select-xs"
-                      :disabled="isProductLocked(index)"
                       @change="handleProductTypeSelect(product)"
                     >
                       <option value="">
@@ -205,22 +193,13 @@
                     </select>
                   </div>
                 </div>
-                <button v-if="!isProductLocked(index)" type="button" class="btn btn-error btn-xs btn-square" @click="removeProduct(index)">
+                <button 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>
           </div>
-          </div>
+          <button type="button" class="btn btn-outline btn-xs" @click="addProduct">
-          <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>
@@ -230,7 +209,7 @@
           <h4 :class="headingClass">
             {{ isRoot ? 'Pièces incluses par défaut' : 'Pièces' }}
           </h4>
-          <p v-if="!(node.pieces?.length)" class="text-xs text-gray-500">
+          <p v-if="!(node.pieces?.length)" class="text-xs text-base-content/50">
             Aucune pièce définie.
           </p>
           <div v-else class="space-y-2">
@@ -261,7 +240,6 @@
                       <select
                         v-model="piece.typePieceId"
                         class="select select-bordered select-xs"
-                        :disabled="isPieceLocked(index)"
                         @change="handlePieceTypeSelect(piece)"
                       >
                         <option value="">
@@ -276,23 +254,30 @@
                         </option>
                       </select>
                     </div>
-                    <p class="mt-1 text-[11px] text-gray-500">
+                    <p class="mt-1 text-[11px] text-base-content/50">
                       {{ piece.typePieceId ? `Sélection : ${getPieceTypeLabel(piece.typePieceId) || 'Inconnue'}` : 'Aucune famille sélectionnée' }}
                     </p>
                   </div>
+                  <div class="form-control">
+                    <label class="label py-1"><span class="label-text text-xs">Quantité</span></label>
+                    <input
+                      v-model.number="piece.quantity"
+                      type="number"
+                      :min="1"
+                      step="1"
+                      placeholder="Qté"
+                      class="input input-bordered input-sm md:input-md w-20"
+                      @input="piece.quantity = Math.max(1, piece.quantity || 1)"
+                    />
                   </div>
-                <button v-if="!isPieceLocked(index)" type="button" class="btn btn-error btn-xs btn-square" @click="removePiece(index)">
+                </div>
-                  <IconLucideTrash class="w-4 h-4" aria-hidden="true" />
+                <button type="button" class="btn btn-error btn-xs btn-square" @click="removePiece(index)">
-                </button>
-                <div v-else class="tooltip tooltip-left" data-tip="Cette pièce ne peut pas être supprimée">
-                  <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>
           </div>
-          </div>
+          <button type="button" class="btn btn-outline btn-xs" @click="addPiece">
-          <button v-if="!restrictedMode" type="button" class="btn btn-outline btn-xs" @click="addPiece">
             <IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" />
             Ajouter
           </button>
@@ -300,10 +285,10 @@
 
         <section v-if="canManageSubcomponents || hasSubcomponents" class="space-y-3">
           <h4 :class="headingClass">Sous-composants</h4>
-          <p v-if="!isRoot && canManageSubcomponents" class="text-[11px] text-gray-500">
+          <p v-if="!isRoot && canManageSubcomponents" class="text-[11px] text-base-content/50">
             Sélectionnez uniquement la famille de ce sous-composant ; il sera configuré via son propre modèle.
           </p>
-          <p v-if="!hasSubcomponents" class="text-xs text-gray-500">
+          <p v-if="!hasSubcomponents" class="text-xs text-base-content/50">
             Aucun sous-composant défini.
           </p>
           <div v-else class="space-y-3">
@@ -334,14 +319,12 @@
                 :product-types="productTypes"
                 :allow-subcomponents="childAllowSubcomponents"
                 :max-subcomponent-depth="maxSubcomponentDepth"
-                :restricted-mode="restrictedMode"
-                :is-locked="isSubcomponentLocked(index)"
                 @remove="removeSubComponent(index)"
               />
             </div>
           </div>
           <button
-            v-if="canManageSubcomponents && !restrictedMode"
+            v-if="canManageSubcomponents"
             type="button"
             class="btn btn-outline btn-xs"
             @click="addSubComponent"
@@ -374,7 +357,6 @@ const props = withDefaults(defineProps<{
   lockedTypeLabel?: string
   allowSubcomponents?: boolean
   maxSubcomponentDepth?: number
-  restrictedMode?: boolean
   isLocked?: boolean
 }>(), {
   depth: 0,
@@ -386,19 +368,13 @@ const props = withDefaults(defineProps<{
   lockedTypeLabel: '',
   allowSubcomponents: true,
   maxSubcomponentDepth: Infinity,
-  restrictedMode: false,
   isLocked: false,
 })
 
 const emit = defineEmits(['remove'])
 
 const {
-  isCustomFieldLocked,
-  isPieceLocked,
-  isProductLocked,
-  isSubcomponentLocked,
   isLocked,
-  restrictedMode,
   componentTypes,
   pieceTypes,
   productTypes,

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

@@ -1,9 +1,9 @@
 <template>
   <div
     v-if="fields.length"
-    class="mt-4 pt-4 border-t border-gray-200"
+    class="mt-4 pt-4 border-t border-base-200"
   >
-    <h5 class="text-sm font-medium text-gray-700 mb-3">
+    <h5 class="text-sm font-medium text-base-content/80 mb-3">
       Champs personnalisés
     </h5>
     <div :class="layoutClass">

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 overflow-y-clip 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/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

@@ -93,7 +93,7 @@
         <!-- Empty state: component variant -->
         <p
           v-if="variant === 'component' && showEmptyState && !customFields.length && !pieces.length && !products.length && !subcomponents.length"
-          class="text-xs text-gray-500"
+          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>

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/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">
+      <NuxtLink to="/" class="flex items-center gap-2.5 group">
-        <div class="avatar">
+        <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">
-          <div class="w-14">
           <img
             :src="logoSrc"
             alt="Logo Malio"
             class="h-full w-full object-contain"
           />
         </div>
-        </div>
+        <span class="text-lg font-bold tracking-tight text-base-content hidden sm:inline" style="font-family: var(--font-heading)">
-        <NuxtLink to="/" class="btn btn-ghost text-xl">
           Inventory
+        </span>
       </NuxtLink>
     </div>
-    </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
+            <IconLucideChevronDown
-              class="h-4 w-4 transition-transform"
+              class="h-3.5 w-3.5 transition-transform duration-200"
-              :class="openDropdown === group.id + '-desktop' ? 'rotate-90' : ''"
+              :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">
+              <li class="px-3 py-2">
-                Connecté en tant que<br />
+                <div class="flex flex-col gap-1 pointer-events-none">
-                <span class="font-semibold text-base-content">{{ activeProfileLabel }}</span>
+                  <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,5 +1,5 @@
 <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>
@@ -25,22 +25,15 @@
       </div>
 
       <div v-else class="space-y-2">
-        <div v-for="component in components" :key="component.id" class="relative">
+        <div v-for="component in components" :key="component.id">
-          <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>
           <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>

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-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="space-y-1">
+            <div v-if="machineConstructeursDisplay.length" class="flex flex-wrap gap-2">
-              <div
+              <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>
               </span>
             </div>
-            </div>
+            <span v-else class="text-base-content/50">Non défini</span>
-            <span v-else class="font-medium">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">
+      <div v-if="visibleCustomFields.length" class="mt-6 pt-4 border-t border-base-200">
-        <h4 class="font-semibold text-gray-700 mb-3">Champs personnalisés de la machine</h4>
+        <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,5 +1,5 @@
 <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>
@@ -25,22 +25,16 @@
       </div>
 
       <div v-else class="space-y-2">
-        <div v-for="piece in pieces" :key="piece.id" class="relative">
+        <div v-for="piece in pieces" :key="piece.id">
-          <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>
           <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>
@@ -69,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"
@@ -24,24 +24,26 @@
         <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"
         >
+          <div class="flex items-center justify-between flex-wrap gap-2">
+            <p class="font-semibold text-base-content">
+              {{ product.name }}
+            </p>
+            <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-error btn-xs absolute top-2 right-2"
+                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 class="flex items-center justify-between flex-wrap gap-2">
+            </div>
-            <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>
           <p v-if="product.reference" class="text-xs text-base-content/70">
             <span class="font-medium">Référence :</span>

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 }">
+    <RelatedItemsModal
-      <div class="modal-box max-w-3xl">
+      :open="relatedModalOpen"
-        <h3 class="text-lg font-bold text-base-content">
+      :model-type="relatedType"
-          {{ relatedModalTitle }}
+      @close="relatedModalOpen = false"
-        </h3>
+      @open-edit="openRelatedEdit"
-        <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>
   </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 ConversionModal from '~/components/model-types/ConversionModal.vue'
-import { useApi } from '~/composables/useApi'
 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,7 +15,6 @@
           minlength="2"
           maxlength="120"
           required
-          :disabled="restrictedMode"
           />
         <p v-if="errors.name" class="mt-1 text-sm text-error">{{ errors.name }}</p>
       </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/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/useMachineDetailData.ts

@@ -15,6 +15,7 @@ import { useCustomFields } from '~/composables/useCustomFields'
 import { useApi } from '~/composables/useApi'
 import { useToast } from '~/composables/useToast'
 import { useConstructeurs } from '~/composables/useConstructeurs'
+import { useSites } from '~/composables/useSites'
 import { useMachinePrint } from '~/composables/useMachinePrint'
 import {
   resolveConstructeurs,
@@ -41,9 +42,10 @@ export function useMachineDetailData(machineId: string) {
   const { componentTypes, loadComponentTypes } = useComponentTypes()
   const { pieceTypes, loadPieceTypes } = usePieceTypes()
   const { upsertCustomFieldValue } = useCustomFields()
-  const { get } = useApi()
+  const { get, patch: apiPatch } = useApi()
   const toast = useToast()
   const { constructeurs, loadConstructeurs } = useConstructeurs()
+  const { sites, loadSites } = useSites()
 
   const {
     printModalOpen,
@@ -64,6 +66,7 @@ export function useMachineDetailData(machineId: string) {
   // Machine fields
   const machineName = ref('')
   const machineReference = ref('')
+  const machineSiteId = ref('')
   const machineConstructeurIds = ref<string[]>([])
 
   const machineConstructeurId = computed({
@@ -229,6 +232,7 @@ export function useMachineDetailData(machineId: string) {
         machine.value.constructeurs,
         machine.value.constructeur,
       )
+      machineSiteId.value = (machine.value.siteId as string) || (machine.value.site as AnyRecord)?.id as string || ''
     }
   }
 
@@ -255,6 +259,7 @@ export function useMachineDetailData(machineId: string) {
     machine,
     machineName,
     machineReference,
+    machineSiteId,
     machineConstructeurIds,
     machineDocumentsLoaded,
     machineComponentLinks,
@@ -269,6 +274,7 @@ export function useMachineDetailData(machineId: string) {
     updateMachineApi,
     updateComposantApi: updateComposantApi,
     updatePieceApi,
+    apiPatch,
     toast,
   })
 
@@ -401,6 +407,7 @@ export function useMachineDetailData(machineId: string) {
       loadConstructeurs(),
       loadComponentTypes(),
       loadPieceTypes(),
+      loadSites(),
     ])
   }
 
@@ -419,8 +426,9 @@ export function useMachineDetailData(machineId: string) {
     machineComponentLinks, machinePieceLinks, machineProductLinks,
 
     // Machine fields
-    machineName, machineReference, machineConstructeurIds, machineConstructeurId,
+    machineName, machineReference, machineSiteId, machineConstructeurIds, machineConstructeurId,
     machineConstructeursDisplay, machineConstructeurContact, hasMachineConstructeur,
+    sites,
 
     // UI state
     machineDocumentFiles, machineDocumentsUploading, machineDocumentsLoaded,

app/composables/useMachineDetailUpdates.ts

@@ -13,6 +13,7 @@ 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[]>
@@ -32,6 +33,7 @@ export interface UseMachineDetailUpdatesDeps {
   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 }
 }
 
@@ -40,6 +42,7 @@ export function useMachineDetailUpdates(deps: UseMachineDetailUpdatesDeps) {
     machine,
     machineName,
     machineReference,
+    machineSiteId,
     machineConstructeurIds,
     machineComponentLinks,
     machinePieceLinks,
@@ -51,6 +54,7 @@ export function useMachineDetailUpdates(deps: UseMachineDetailUpdatesDeps) {
     updateMachineApi,
     updateComposantApi,
     updatePieceApi,
+    apiPatch,
     toast,
   } = deps
 
@@ -63,6 +67,7 @@ export function useMachineDetailUpdates(deps: UseMachineDetailUpdatesDeps) {
       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) {
@@ -105,18 +110,18 @@ export function useMachineDetailUpdates(deps: UseMachineDetailUpdatesDeps) {
       const productId = updatedComponent.productId
         ? String(updatedComponent.productId)
         : null
-      const prix =
+      const prixStr =
         updatedComponent.prix !== null &&
         updatedComponent.prix !== undefined &&
         String(updatedComponent.prix).trim() !== ''
-          ? Number(updatedComponent.prix)
+          ? String(updatedComponent.prix)
           : null
 
       const result: any = await updateComposantApi(updatedComponent.id as string, {
         name: updatedComponent.name,
         reference: updatedComponent.reference,
         constructeurIds: cIds,
-        prix: Number.isNaN(prix) ? null : prix,
+        prix: prixStr,
         productId,
       } as any)
       if (result.success) {
@@ -135,18 +140,18 @@ export function useMachineDetailUpdates(deps: UseMachineDetailUpdatesDeps) {
       updatedPiece.constructeur,
     )
     const productId = updatedPiece.productId ? String(updatedPiece.productId) : null
-    const prix =
+    const prixStr =
       updatedPiece.prix !== null &&
       updatedPiece.prix !== undefined &&
       String(updatedPiece.prix).trim() !== ''
-        ? Number(updatedPiece.prix)
+        ? String(updatedPiece.prix)
         : null
 
     const result: any = await updatePieceApi(updatedPiece.id as string, {
       name: updatedPiece.name,
-      reference: updatedPiece.reference,
+      reference: updatedPiece.reference || null,
       constructeurIds: cIds,
-      prix: Number.isNaN(prix) ? null : prix,
+      prix: prixStr,
       productId,
     } as any)
     if (result.success) {
@@ -176,6 +181,13 @@ export function useMachineDetailUpdates(deps: UseMachineDetailUpdatesDeps) {
           )
         }
       }
+
+      // 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)
     }
@@ -184,6 +196,13 @@ export function useMachineDetailUpdates(deps: UseMachineDetailUpdatesDeps) {
   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)
     }

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

@@ -20,7 +20,6 @@ export type EditorProduct = {
 interface Deps {
   props: {
     modelValue?: PieceModelStructure | null
-    restrictedMode?: boolean
   }
   emit: (event: 'update:modelValue', value: PieceModelStructure) => void
 }
@@ -202,8 +201,6 @@ export function usePieceStructureEditorLogic(deps: Deps) {
   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)))
 
   // --- Product types ---
 
@@ -250,18 +247,6 @@ export function usePieceStructureEditorLogic(deps: Deps) {
     }
   }
 
-  // --- Locked state ---
-
-  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)
-
   // --- CRUD ---
 
   const createEmptyProduct = (): EditorProduct => ({
@@ -407,8 +392,6 @@ export function usePieceStructureEditorLogic(deps: Deps) {
       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 },
   )
@@ -426,9 +409,6 @@ export function usePieceStructureEditorLogic(deps: Deps) {
     fields,
     products,
     productTypeOptions,
-    restrictedMode,
-    isFieldLocked,
-    isProductLocked,
     formatProductTypeOption,
     handleProductTypeSelect,
     addProduct,

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

@@ -1,51 +1,11 @@
-import { ref } from 'vue'
 import type { EditableStructureNode } from '~/composables/useStructureNodeLogic'
 
 export interface StructureNodeCrudDeps {
   node: EditableStructureNode
-  restrictedMode: boolean
   canManageSubcomponents: () => boolean
 }
 
 export function useStructureNodeCrud(props: StructureNodeCrudDeps) {
-  // --- Lock state ---
-  const initialCustomFieldIndices = ref<Set<number>>(new Set())
-  const initialPieceIndices = ref<Set<number>>(new Set())
-  const initialProductIndices = ref<Set<number>>(new Set())
-  const initialSubcomponentIndices = ref<Set<number>>(new Set())
-
-  const initializeLockedIndices = () => {
-    if (props.restrictedMode) {
-      const customFieldsLength = Array.isArray(props.node.customFields) ? props.node.customFields.length : 0
-      const piecesLength = Array.isArray(props.node.pieces) ? props.node.pieces.length : 0
-      const productsLength = Array.isArray(props.node.products) ? props.node.products.length : 0
-      const subcomponentsLength = Array.isArray(props.node.subcomponents) ? props.node.subcomponents.length : 0
-
-      initialCustomFieldIndices.value = new Set(Array.from({ length: customFieldsLength }, (_, i) => i))
-      initialPieceIndices.value = new Set(Array.from({ length: piecesLength }, (_, i) => i))
-      initialProductIndices.value = new Set(Array.from({ length: productsLength }, (_, i) => i))
-      initialSubcomponentIndices.value = new Set(Array.from({ length: subcomponentsLength }, (_, i) => i))
-    }
-  }
-
-  initializeLockedIndices()
-
-  const isCustomFieldLocked = (index: number): boolean => {
-    return props.restrictedMode === true && initialCustomFieldIndices.value.has(index)
-  }
-
-  const isPieceLocked = (index: number): boolean => {
-    return props.restrictedMode === true && initialPieceIndices.value.has(index)
-  }
-
-  const isProductLocked = (index: number): boolean => {
-    return props.restrictedMode === true && initialProductIndices.value.has(index)
-  }
-
-  const isSubcomponentLocked = (index: number): boolean => {
-    return props.restrictedMode === true && initialSubcomponentIndices.value.has(index)
-  }
-
   // --- Helpers ---
   const ensureArray = (key: 'customFields' | 'pieces' | 'products' | 'subcomponents') => {
     if (!Array.isArray((props.node as any)[key])) {
@@ -115,6 +75,7 @@ export function useStructureNodeCrud(props: StructureNodeCrudDeps) {
       reference: '',
       familyCode: '',
       role: '',
+      quantity: 1,
     })
   }
 
@@ -158,11 +119,6 @@ export function useStructureNodeCrud(props: StructureNodeCrudDeps) {
   }
 
   return {
-    // Lock checks
-    isCustomFieldLocked,
-    isPieceLocked,
-    isProductLocked,
-    isSubcomponentLocked,
     // Helpers exposed for watchers
     reindexCustomFields,
     // CRUD

app/composables/useStructureNodeLogic.ts

@@ -25,14 +25,12 @@ export interface StructureNodeLogicDeps {
   lockedTypeLabel: string
   allowSubcomponents: boolean
   maxSubcomponentDepth: number
-  restrictedMode: boolean
   isLocked: boolean
 }
 
 export function useStructureNodeLogic(props: StructureNodeLogicDeps) {
   // --- Computed props ---
   const isLocked = computed(() => props.isLocked === true)
-  const restrictedMode = computed(() => props.restrictedMode === true)
 
   const componentTypes = computed(() => props.componentTypes ?? [])
   const pieceTypes = computed(() => props.pieceTypes ?? [])
@@ -310,7 +308,6 @@ export function useStructureNodeLogic(props: StructureNodeLogicDeps) {
   // --- CRUD & Lock (delegated to useStructureNodeCrud) ---
   const crud = useStructureNodeCrud({
     node: props.node,
-    restrictedMode: props.restrictedMode,
     canManageSubcomponents: () => canManageSubcomponents.value,
   })
 
@@ -395,14 +392,8 @@ export function useStructureNodeLogic(props: StructureNodeLogicDeps) {
   )
 
   return {
-    // Lock checks
-    isCustomFieldLocked: crud.isCustomFieldLocked,
-    isPieceLocked: crud.isPieceLocked,
-    isProductLocked: crud.isProductLocked,
-    isSubcomponentLocked: crud.isSubcomponentLocked,
     // Computed state
     isLocked,
-    restrictedMode,
     componentTypes,
     pieceTypes,
     productTypes,

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,37 @@ 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',

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>
+        <h1 class="text-3xl font-bold text-base-content tracking-tight">Catalogue des composants</h1>
-        <p class="text-sm text-gray-500">
+        <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">
+        <header class="flex flex-col gap-1">
-          <h2 class="text-xl font-semibold text-base-content">Composants créés</h2>
+          <h2 class="text-xl font-bold text-base-content tracking-tight">Composants créés</h2>
-          <p class="text-sm text-base-content/70">
+          <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)"
               >

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 showSyncModal = ref(false)
-const {
+const syncLoading = ref(false)
-  isRestrictedMode,
+const syncPreviewData = ref<SyncPreviewResult | null>(null)
-  isSubmitBlocked,
+const pendingPayload = ref<Partial<ModelTypePayload> | null>(null)
-  restrictedModeMessage,
-  submitBlockMessage,
-  loadLinkedCount,
-  guardSubmitOrNotify,
-} = useCategoryEditGuard({
-  endpoint: '/composants',
-  filterKey: 'typeComposant',
-  labels: {
-    singular: 'composant',
-    plural: 'composants',
-    verifying: 'Vérification des composants liés en cours…',
-  },
-})
 
 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,
     }
+
+    // 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/component/[id]/edit.vue

@@ -1,4 +1,5 @@
 <template>
+  <div>
     <DocumentPreviewModal
       :document="previewDocument"
       :visible="previewVisible"
@@ -151,45 +152,76 @@
         />
 
         <div
-          v-if="structureSelections.hasAny"
+          v-if="pieceSlotEntries.length || productSlotEntries.length || subcomponentSlotEntries.length"
           class="space-y-3 rounded-lg border border-base-200 bg-base-200/30 p-4"
         >
           <header class="space-y-1">
-            <h2 class="font-semibold text-base-content">Sélections actuelles</h2>
+            <h2 class="font-semibold text-base-content">Sélections du squelette</h2>
             <p class="text-xs text-base-content/70">
-              Voici les pièces, produits et sous-composants réellement choisis pour ce composant.
+              Choisissez les pièces, produits et sous-composants pour chaque emplacement requis par la catégorie.
             </p>
           </header>
 
-          <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+          <div v-if="pieceSlotEntries.length" class="space-y-2">
-            <div v-if="structureSelections.pieces.length" class="space-y-2">
+            <h3 class="font-semibold text-sm text-base-content">Pièces</h3>
-              <h3 class="font-semibold text-sm text-base-content">Pièces choisies</h3>
+            <div class="grid grid-cols-1 gap-3 md:grid-cols-2">
-              <ul class="list-disc list-inside space-y-1 text-sm">
+              <div
-                <li v-for="entry in structureSelections.pieces" :key="`selected-piece-${entry.path}-${entry.id}`">
+                v-for="slot in pieceSlotEntries"
-                  <span class="font-medium">{{ entry.resolvedName }}</span>
+                :key="`piece-slot-${slot.slotId}`"
-                  <span class="text-xs text-base-content/70"> — {{ entry.requirementLabel }}</span>
+                class="form-control"
-                </li>
+              >
-              </ul>
+                <label class="label">
+                  <span class="label-text text-xs font-medium">{{ slot.label }}</span>
+                </label>
+                <PieceSelect
+                  :model-value="slot.selectedPieceId"
+                  :disabled="!canEdit || saving"
+                  :type-piece-id="slot.typePieceId"
+                  @update:model-value="(value) => savePieceSlotSelection(slot.slotId, value)"
+                />
+              </div>
+            </div>
           </div>
 
-            <div v-if="structureSelections.products.length" class="space-y-2">
+          <div v-if="productSlotEntries.length" class="space-y-2">
-              <h3 class="font-semibold text-sm text-base-content">Produits choisis</h3>
+            <h3 class="font-semibold text-sm text-base-content">Produits</h3>
-              <ul class="list-disc list-inside space-y-1 text-sm">
+            <div class="grid grid-cols-1 gap-3 md:grid-cols-2">
-                <li v-for="entry in structureSelections.products" :key="`selected-product-${entry.path}-${entry.id}`">
+              <div
-                  <span class="font-medium">{{ entry.resolvedName }}</span>
+                v-for="slot in productSlotEntries"
-                  <span class="text-xs text-base-content/70"> — {{ entry.requirementLabel }}</span>
+                :key="`product-slot-${slot.slotId}`"
-                </li>
+                class="form-control"
-              </ul>
+              >
+                <label class="label">
+                  <span class="label-text text-xs font-medium">{{ slot.label }}</span>
+                </label>
+                <ProductSelect
+                  :model-value="slot.selectedProductId"
+                  :disabled="!canEdit || saving"
+                  :type-product-id="slot.typeProductId"
+                  @update:model-value="(value) => saveProductSlotSelection(slot.slotId, value)"
+                />
+              </div>
+            </div>
           </div>
 
-            <div v-if="structureSelections.components.length" class="space-y-2">
+          <div v-if="subcomponentSlotEntries.length" class="space-y-2">
-              <h3 class="font-semibold text-sm text-base-content">Sous-composants choisis</h3>
+            <h3 class="font-semibold text-sm text-base-content">Sous-composants</h3>
-              <ul class="list-disc list-inside space-y-1 text-sm">
+            <div class="grid grid-cols-1 gap-3 md:grid-cols-2">
-                <li v-for="entry in structureSelections.components" :key="`selected-component-${entry.path}-${entry.id}`">
+              <div
-                  <span class="font-medium">{{ entry.resolvedName }}</span>
+                v-for="slot in subcomponentSlotEntries"
-                  <span class="text-xs text-base-content/70"> — {{ entry.requirementLabel }}</span>
+                :key="`sub-slot-${slot.slotId}`"
-                </li>
+                class="form-control"
-              </ul>
+              >
+                <label class="label">
+                  <span class="label-text text-xs font-medium">{{ slot.label }}</span>
+                </label>
+                <ComposantSelect
+                  :model-value="slot.selectedComponentId"
+                  :disabled="!canEdit || saving"
+                  :type-composant-id="slot.typeComposantId"
+                  @update:model-value="(value) => saveSubcomponentSlotSelection(slot.slotId, value)"
+                />
+              </div>
             </div>
           </div>
         </div>
@@ -270,495 +302,53 @@
       </div>
     </section>
     </main>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { useRoute } from '#imports'
-import { useRoute, useRouter } from '#imports'
+import { useComponentEdit } from '~/composables/useComponentEdit'
-import ConstructeurSelect from '~/components/ConstructeurSelect.vue'
-import DocumentUpload from '~/components/DocumentUpload.vue'
-import DocumentPreviewModal from '~/components/DocumentPreviewModal.vue'
-import { useComponentTypes } from '~/composables/useComponentTypes'
-import { useComposants } from '~/composables/useComposants'
-import { usePieceTypes } from '~/composables/usePieceTypes'
-import { useProductTypes } from '~/composables/useProductTypes'
-import { usePieces } from '~/composables/usePieces'
-import { useProducts } from '~/composables/useProducts'
-import { useCustomFields } from '~/composables/useCustomFields'
-import { useApi } from '~/composables/useApi'
-import { useToast } from '~/composables/useToast'
-import { extractRelationId } from '~/shared/apiRelations'
-import { useDocuments } from '~/composables/useDocuments'
-import { useConstructeurs } from '~/composables/useConstructeurs'
-import { useComponentHistory } from '~/composables/useComponentHistory'
-import { formatStructurePreview, normalizeStructureForEditor } from '~/shared/modelUtils'
-import { uniqueConstructeurIds } from '~/shared/constructeurUtils'
-import {
-  getStructurePieces,
-  getStructureProducts,
-  resolvePieceLabel as _resolvePieceLabel,
-  resolveProductLabel as _resolveProductLabel,
-  resolveSubcomponentLabel,
-  fetchModelTypeNames,
-  buildTypeLabelMap,
-} from '~/shared/utils/structureDisplayUtils'
-import type { ComponentModelStructure } from '~/shared/types/inventory'
-import type { ModelType } from '~/services/modelTypes'
-import { canPreviewDocument } from '~/utils/documentPreview'
-import {
-  type CustomFieldInput,
-  buildCustomFieldInputs,
-  requiredCustomFieldsFilled as _requiredCustomFieldsFilled,
-  saveCustomFieldValues as _saveCustomFieldValues,
-} from '~/shared/utils/customFieldFormUtils'
 
-interface ComponentCatalogType extends ModelType {
-  structure: ComponentModelStructure | null
-  customFields?: Array<Record<string, any>>
-}
-
-const { canEdit } = usePermissions()
 const route = useRoute()
-const router = useRouter()
+
-const { get } = useApi()
-const { componentTypes, loadComponentTypes } = useComponentTypes()
-const { pieceTypes, loadPieceTypes } = usePieceTypes()
-const { productTypes, loadProductTypes } = useProductTypes()
-const { updateComposant, loadComposants, composants: componentCatalogRef } = useComposants()
-const { pieces, loadPieces } = usePieces()
-const { products, loadProducts } = useProducts()
-const { ensureConstructeurs } = useConstructeurs()
-const { upsertCustomFieldValue, updateCustomFieldValue } = useCustomFields()
-const toast = useToast()
-const { loadDocumentsByComponent, uploadDocuments, deleteDocument } = useDocuments()
 const {
-  history,
+  component,
-  loading: historyLoading,
+  loading,
-  error: historyError,
+  saving,
-  loadHistory,
+  selectedFiles,
-} = useComponentHistory()
+  uploadingDocuments,
-
+  loadingDocuments,
-const component = ref<any | null>(null)
+  componentDocuments,
-const loading = ref(true)
+  previewDocument,
-const saving = ref(false)
+  previewVisible,
-const selectedFiles = ref<File[]>([])
+  selectedTypeId,
-const uploadingDocuments = ref(false)
+  editionForm,
-const loadingDocuments = ref(false)
+  customFieldInputs,
-const componentDocuments = ref<any[]>([])
+  historyFieldLabels,
-const previewDocument = ref<any | null>(null)
+  canEdit,
-const previewVisible = ref(false)
+  canSubmit,
-
+  componentTypeList,
-const historyFieldLabels: Record<string, string> = {
+  selectedType,
-  name: 'Nom',
-  reference: 'Référence',
-  prix: 'Prix',
-  structure: 'Structure',
-  typeComposant: 'Catégorie',
-  product: 'Produit lié',
-  constructeurIds: 'Fournisseurs',
-}
-
-const selectedTypeId = ref<string>('')
-const editionForm = reactive({
-  name: '' as string,
-  description: '' as string,
-  reference: '' as string,
-  constructeurIds: [] as string[],
-  prix: '' as string,
-})
-
-const customFieldInputs = ref<CustomFieldInput[]>([])
-const fetchedPieceTypeMap = ref<Record<string, string>>({})
-const pieceTypeLabelMap = computed(() =>
-  buildTypeLabelMap(pieceTypes.value, fetchedPieceTypeMap.value),
-)
-const fetchedProductTypeMap = ref<Record<string, string>>({})
-const productTypeLabelMap = computed(() =>
-  buildTypeLabelMap(productTypes.value, fetchedProductTypeMap.value),
-)
-const pieceCatalogMap = computed(() =>
-  new Map(
-    (pieces.value || [])
-      .filter((item: any) => item?.id)
-      .map((item: any) => [String(item.id), item]),
-  ),
-)
-const productCatalogMap = computed(() =>
-  new Map(
-    (products.value || [])
-      .filter((item: any) => item?.id)
-      .map((item: any) => [String(item.id), item]),
-  ),
-)
-const componentCatalogMap = computed(() =>
-  new Map(
-    (componentCatalogRef.value || [])
-      .filter((item: any) => item?.id)
-      .map((item: any) => [String(item.id), item]),
-  ),
-)
-const openPreview = (doc: any) => {
-  if (!doc || !canPreviewDocument(doc)) {
-    return
-  }
-  previewDocument.value = doc
-  previewVisible.value = true
-}
-const closePreview = () => {
-  previewVisible.value = false
-  previewDocument.value = null
-}
-const removeDocument = async (documentId: string | number | null | undefined) => {
-  if (!documentId) {
-    return
-  }
-  const result = await deleteDocument(documentId, { updateStore: false })
-  if (result.success) {
-    componentDocuments.value = componentDocuments.value.filter((doc) => doc.id !== documentId)
-  }
-}
-const handleFilesAdded = async (files: File[]) => {
-  if (!files?.length || !component.value?.id) {
-    return
-  }
-  uploadingDocuments.value = true
-  try {
-    const result = await uploadDocuments(
-      {
-        files,
-        context: { composantId: component.value.id },
-      },
-      { updateStore: false },
-    )
-    if (result.success) {
-      selectedFiles.value = []
-      await refreshDocuments()
-    }
-  } finally {
-    uploadingDocuments.value = false
-  }
-}
-const refreshDocuments = async () => {
-  if (!component.value?.id) {
-    componentDocuments.value = []
-    return
-  }
-  loadingDocuments.value = true
-  try {
-    const result = await loadDocumentsByComponent(component.value.id, { updateStore: false })
-    if (result.success) {
-      componentDocuments.value = Array.isArray(result.data) ? result.data : result.data ? [result.data] : []
-    }
-  } finally {
-    loadingDocuments.value = false
-  }
-}
-
-const componentTypeList = computed<ComponentCatalogType[]>(() =>
-  (componentTypes.value || [])
-    .filter((item: any) => item?.category === 'COMPONENT') as ComponentCatalogType[],
-)
-
-const selectedType = computed(() => {
-  if (!selectedTypeId.value) {
-    return null
-  }
-  return componentTypeList.value.find((type) => type.id === selectedTypeId.value) ?? null
-})
-
-const selectedTypeStructure = computed<ComponentModelStructure | null>(() => {
-  const structure = selectedType.value?.structure ?? null
-  return structure ? normalizeStructureForEditor(structure) : null
-})
-
-const refreshCustomFieldInputs = (
-  structureOverride?: ComponentModelStructure | null,
-  valuesOverride?: any[] | null,
-) => {
-  const structure = structureOverride ?? selectedTypeStructure.value ?? null
-  const values = valuesOverride ?? component.value?.customFieldValues ?? null
-  customFieldInputs.value = buildCustomFieldInputs(structure, values)
-}
-
-const requiredCustomFieldsFilled = computed(() =>
-  _requiredCustomFieldsFilled(customFieldInputs.value),
-)
-
-const canSubmit = computed(() => Boolean(
-  canEdit.value &&
-  component.value &&
-  editionForm.name &&
-  requiredCustomFieldsFilled.value &&
-  !saving.value,
-))
-
-const fetchComponent = async () => {
-  const id = route.params.id
-  if (!id || typeof id !== 'string') {
-    component.value = null
-    componentDocuments.value = []
-    return
-  }
-  const result = await get(`/composants/${id}`)
-  if (result.success) {
-    component.value = result.data
-    componentDocuments.value = Array.isArray(result.data?.documents) ? result.data.documents : []
-
-    const customValues = Array.isArray(result.data?.customFieldValues) ? result.data.customFieldValues : []
-    refreshCustomFieldInputs(undefined, customValues)
-
-    loadHistory(result.data.id).catch(() => {})
-  } else {
-    component.value = null
-    componentDocuments.value = []
-  }
-}
-
-const initialized = ref(false)
-
-watch(
-  [component, selectedTypeStructure],
-  ([currentComponent, currentStructure]) => {
-    if (!currentComponent) {
-      return
-    }
-
-    if (!initialized.value) {
-      const resolvedTypeId = currentComponent.typeComposantId
-        || extractRelationId(currentComponent.typeComposant)
-        || ''
-      if (resolvedTypeId && !currentComponent.typeComposantId) {
-        currentComponent.typeComposantId = resolvedTypeId
-      }
-      selectedTypeId.value = resolvedTypeId
-
-      editionForm.name = currentComponent.name || ''
-      editionForm.description = currentComponent.description || ''
-      editionForm.reference = currentComponent.reference || ''
-      editionForm.constructeurIds = uniqueConstructeurIds(
-        currentComponent,
-        Array.isArray(currentComponent.constructeurs) ? currentComponent.constructeurs : [],
-        currentComponent.constructeur ? [currentComponent.constructeur] : [],
-      )
-      editionForm.prix = currentComponent.prix !== null && currentComponent.prix !== undefined ? String(currentComponent.prix) : ''
-      if (editionForm.constructeurIds.length) {
-        void ensureConstructeurs(editionForm.constructeurIds)
-      }
-
-      initialized.value = true
-    }
-
-    refreshCustomFieldInputs(selectedTypeStructure.value ?? currentStructure, currentComponent.customFieldValues)
-  },
-  { immediate: true },
-)
-
-const submitEdition = async () => {
-  if (!component.value) {
-    return
-  }
-
-  const rawPrice = typeof editionForm.prix === 'string'
-    ? editionForm.prix.trim()
-    : editionForm.prix === null || editionForm.prix === undefined
-      ? ''
-      : String(editionForm.prix).trim()
-
-  const payload: Record<string, any> = {
-    name: editionForm.name.trim(),
-    description: editionForm.description.trim() || null,
-  }
-
-  const reference = editionForm.reference.trim()
-  payload.reference = reference ? reference : null
-  payload.constructeurIds = uniqueConstructeurIds(editionForm.constructeurIds)
-
-  if (rawPrice) {
-    const parsed = Number(rawPrice)
-    if (!Number.isNaN(parsed)) {
-      payload.prix = String(parsed)
-    }
-  } else {
-    payload.prix = null
-  }
-
-  saving.value = true
-  try {
-    const result = await updateComposant(component.value.id, payload)
-    if (result.success && result.data) {
-      const updatedComponent = result.data as Record<string, any>
-      await _saveCustomFieldValues(
-        'composant',
-        updatedComponent.id,
-        [
-          updatedComponent?.typeComposant?.customFields,
-        ],
-        { customFieldInputs, upsertCustomFieldValue, updateCustomFieldValue, toast },
-      )
-      await router.push('/component-catalog')
-    }
-  } catch (error: any) {
-    toast.showError(error?.message || 'Erreur lors de la mise à jour du composant')
-  } finally {
-    saving.value = false
-  }
-}
-
-const isNonEmptyString = (value: unknown): value is string =>
-  typeof value === 'string' && value.trim().length > 0
-
-const resolvePieceLabel = (piece: Record<string, any>) =>
-  _resolvePieceLabel(piece, pieceTypeLabelMap.value)
-
-const resolveProductLabel = (product: Record<string, any>) =>
-  _resolveProductLabel(product, productTypeLabelMap.value)
-
-watch(
   selectedTypeStructure,
-  (structure) => {
+  structureSelections,
-    const pieceIds = getStructurePieces(structure)
+  pieceSlotEntries,
-      .map((piece: any) => piece?.typePieceId)
+  productSlotEntries,
-      .filter((id: any): id is string => typeof id === 'string' && id.trim().length > 0)
+  subcomponentSlotEntries,
-    if (pieceIds.length) {
+  history,
-      fetchModelTypeNames(Array.from(new Set(pieceIds)), pieceTypeLabelMap.value, get)
+  historyLoading,
-        .then((additions) => {
+  historyError,
-          if (Object.keys(additions).length) {
+  openPreview,
-            fetchedPieceTypeMap.value = { ...fetchedPieceTypeMap.value, ...additions }
+  closePreview,
-          }
+  removeDocument,
-        })
+  handleFilesAdded,
-        .catch(() => {})
+  submitEdition,
-    }
+  saveSlotQuantity,
-
+  savePieceSlotSelection,
-    const productIds = getStructureProducts(structure)
+  saveProductSlotSelection,
-      .map((product: any) => product?.typeProductId)
+  saveSubcomponentSlotSelection,
-      .filter((id: any): id is string => typeof id === 'string' && id.trim().length > 0)
+  resolvePieceLabel,
-    if (productIds.length) {
+  resolveProductLabel,
-      fetchModelTypeNames(Array.from(new Set(productIds)), productTypeLabelMap.value, get)
+  resolveSubcomponentLabel,
-        .then((additions) => {
+  formatStructurePreview,
-          if (Object.keys(additions).length) {
+} = useComponentEdit(String(route.params.id))
-            fetchedProductTypeMap.value = { ...fetchedProductTypeMap.value, ...additions }
-          }
-        })
-        .catch(() => {})
-    }
-  },
-  { immediate: true },
-)
-
-type SelectionEntry = {
-  id: string
-  path: string
-  requirementLabel: string
-  resolvedName: string
-}
-
-const collectStructureSelections = (root: any): {
-  pieces: SelectionEntry[]
-  products: SelectionEntry[]
-  components: SelectionEntry[]
-} => {
-  const piecesSelected: SelectionEntry[] = []
-  const productsSelected: SelectionEntry[] = []
-  const componentsSelected: SelectionEntry[] = []
-
-  if (!root || typeof root !== 'object') {
-    return { pieces: piecesSelected, products: productsSelected, components: componentsSelected }
-  }
-
-  const visitNode = (node: any, fallbackPath = 'racine') => {
-    if (!node || typeof node !== 'object') {
-      return
-    }
-
-    const nodePath = isNonEmptyString(node.path) ? node.path : fallbackPath
-
-    const nodePieces = Array.isArray(node.pieces) ? node.pieces : []
-    nodePieces.forEach((entry: any, index: number) => {
-      const selectedId = entry?.selectedPieceId
-      if (!isNonEmptyString(selectedId)) {
-        return
-      }
-      const definition = entry?.definition ?? entry
-      const catalogPiece = pieceCatalogMap.value.get(selectedId)
-      piecesSelected.push({
-        id: selectedId,
-        path: isNonEmptyString(entry?.path) ? entry.path : `${nodePath}:piece-${index + 1}`,
-        requirementLabel: resolvePieceLabel(definition),
-        resolvedName: catalogPiece?.name || selectedId,
-      })
-    })
-
-    const nodeProducts = Array.isArray(node.products) ? node.products : []
-    nodeProducts.forEach((entry: any, index: number) => {
-      const selectedId = entry?.selectedProductId
-      if (!isNonEmptyString(selectedId)) {
-        return
-      }
-      const definition = entry?.definition ?? entry
-      const catalogProduct = productCatalogMap.value.get(selectedId)
-      productsSelected.push({
-        id: selectedId,
-        path: isNonEmptyString(entry?.path) ? entry.path : `${nodePath}:product-${index + 1}`,
-        requirementLabel: resolveProductLabel(definition),
-        resolvedName: catalogProduct?.name || selectedId,
-      })
-    })
-
-    const nodeChildren = Array.isArray(node.subcomponents)
-      ? node.subcomponents
-      : Array.isArray(node.subComponents)
-        ? node.subComponents
-        : []
-
-    nodeChildren.forEach((child: any, index: number) => {
-      const selectedId = child?.selectedComponentId
-      if (isNonEmptyString(selectedId)) {
-        const definition = child?.definition ?? child
-        const catalogComponent = componentCatalogMap.value.get(selectedId)
-        componentsSelected.push({
-          id: selectedId,
-          path: isNonEmptyString(child?.path) ? child.path : `${nodePath}:subcomponent-${index + 1}`,
-          requirementLabel: resolveSubcomponentLabel(definition),
-          resolvedName: catalogComponent?.name || selectedId,
-        })
-      }
-
-      visitNode(child, isNonEmptyString(child?.path) ? child.path : `${nodePath}:subcomponent-${index + 1}`)
-    })
-  }
-
-  visitNode(root, isNonEmptyString(root?.path) ? root.path : 'racine')
-
-  return { pieces: piecesSelected, products: productsSelected, components: componentsSelected }
-}
-
-const structureSelections = computed(() => {
-  const selections = collectStructureSelections(component.value?.structure)
-  const total =
-    selections.pieces.length + selections.products.length + selections.components.length
-  return {
-    ...selections,
-    total,
-    hasAny: total > 0,
-  }
-})
-
-onMounted(async () => {
-  await Promise.allSettled([
-    loadComponentTypes(),
-    loadPieceTypes(),
-    loadProductTypes(),
-    fetchComponent(),
-  ])
-  loading.value = false
-
-  // Defer bulk catalog loads — only needed when component has structure selections
-  if (component.value?.structure) {
-    Promise.allSettled([
-      loadPieces({ itemsPerPage: 200 }),
-      loadProducts({ itemsPerPage: 200 }),
-      loadComposants({ itemsPerPage: 200 }),
-    ]).catch(() => {})
-  }
-})
 </script>

app/pages/component/create.vue

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

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>

app/pages/documents.vue

@@ -7,7 +7,7 @@
       @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"
@@ -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>
 

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="flex gap-3">
-          <div class="stat">
+          <div class="bg-base-100 rounded-xl border border-base-300/50 px-5 py-3 shadow-sm">
-            <div class="stat-title">
+            <p class="text-[0.65rem] font-semibold uppercase tracking-widest text-base-content/40 mb-0.5">Sites</p>
-              Sites
+            <p class="text-2xl font-bold text-primary tracking-tight">{{ sites.length }}</p>
-            </div>
-            <div class="stat-value text-primary">
-              {{ sites.length }}
-            </div>
-          </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 bg-base-100 shadow-sm mb-8">
-        <div class="card-body">
+        <div class="card-body py-4">
-          <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <div class="flex flex-col md:flex-row md:items-end gap-4">
-            <div class="form-control">
+            <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>
+              <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"
+                  class="input input-bordered pl-10 w-full"
                 >
               </div>
-            <div class="form-control">
+            </div>
+            <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">
+      <div v-if="loading" class="flex justify-center items-center py-16">
-        <span class="loading loading-spinner loading-lg" />
+        <span class="loading loading-spinner loading-lg text-primary" />
       </div>
 
-      <!-- Hierarchical Machines View -->
+      <!-- Empty State -->
-      <div v-else-if="filteredSites.length === 0" class="text-center py-12">
+      <div v-else-if="filteredSites.length === 0" class="text-center py-16">
-        <div class="max-w-md mx-auto">
+        <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-16 h-16 mx-auto text-gray-400 mb-4"
+              class="w-8 h-8 text-base-content/30"
               aria-hidden="true"
             />
-          <h3 class="text-lg font-medium text-gray-900 mb-2">
+          </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,126 +97,116 @@
         </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">
+            <!-- Site Header -->
-              <div class="flex items-center gap-3">
+            <div class="flex items-start justify-between gap-4">
-                <div class="avatar placeholder">
+              <div class="flex items-start gap-4">
                 <div
-                    class="bg-primary text-primary-content rounded-lg w-12 grid place-items-center"
+                  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-6 h-6" aria-hidden="true" />
+                  <IconLucideMapPin class="w-5 h-5" :style="{ color: site.color || 'oklch(var(--p))' }" aria-hidden="true" />
                 </div>
-                </div>
+                <div class="min-w-0">
-                <div>
+                  <h3
-                  <h3 class="text-xl font-bold">
+                    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 flex-wrap gap-x-4 gap-y-1 mt-1.5 text-sm text-base-content/50">
-                    <div class="flex items-center gap-2">
+                    <span v-if="site.contactName" class="flex items-center gap-1.5">
-                      <IconLucideUser
+                      <IconLucideUser class="w-3.5 h-3.5" aria-hidden="true" />
-                        class="w-4 h-4 text-primary"
+                      {{ site.contactName }}
-                        aria-hidden="true"
+                    </span>
-                      />
+                    <span v-if="site.contactPhone" class="flex items-center gap-1.5">
-                      <span class="font-medium">{{ site.contactName }}</span>
+                      <IconLucidePhone class="w-3.5 h-3.5" aria-hidden="true" />
-                    </div>
+                      {{ formatPhoneDisplay(site.contactPhone) }}
-                    <div class="flex items-center gap-2">
+                    </span>
-                      <IconLucidePhone
+                    <span v-if="site.contactCity" class="flex items-center gap-1.5">
-                        class="w-4 h-4 text-secondary"
+                      <IconLucideMapPinned class="w-3.5 h-3.5" aria-hidden="true" />
-                        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>
               </div>
-              </div>
+              <div class="flex items-center gap-2 shrink-0">
-              <div class="flex items-center gap-2">
+                <span
-                <div class="badge badge-primary badge-lg">
+                  class="badge font-bold"
-                  {{ site.machines?.length || 0 }} machines
+                  :style="site.color ? { backgroundColor: site.color + '30', color: site.color, borderColor: site.color + '50' } : {}"
-                </div>
+                  :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="w-4 h-4 transition-transform duration-200"
-                    :class="
+                    :class="collapsedSites.includes(site.id) ? 'rotate-180' : ''"
-                      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-3">
-              <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                 <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">
+                    <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.5 text-xs text-base-content/40">
-                      <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 class="card-actions justify-end mt-3">
+                  <div class="mt-auto pt-3 flex items-center justify-end gap-2">
                     <button
                       v-if="canEdit"
-                        class="btn btn-xs btn-outline"
+                      class="btn btn-ghost btn-sm"
                       @click.stop="editMachine(machine)"
                     >
                       Modifier
                     </button>
                     <button
                       v-if="canEdit"
-                        class="btn btn-xs btn-error"
+                      class="btn btn-ghost btn-sm text-error"
                       @click.stop="confirmDeleteMachine(machine)"
                     >
                       Supprimer
                     </button>
                     <NuxtLink
                       :to="`/machine/${machine.id}`"
-                        class="btn btn-xs btn-primary"
+                      class="btn btn-primary btn-sm"
+                      @click.stop
                     >
                       Détails
                     </NuxtLink>
@@ -228,7 +214,6 @@
                 </div>
               </div>
             </div>
-            </div>
 
             <!-- Empty Site State -->
             <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">
+              <div class="w-10 h-10 rounded-xl bg-base-200 grid place-items-center mx-auto mb-3">
-                <IconLucideFactory class="w-8 h-8 mx-auto" aria-hidden="true" />
+                <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,7 +243,7 @@
     </div>
 
     <!-- Add Site Modal -->
-    <HomeAddSiteModal
+    <AddSiteModal
       :open="showAddSiteModal"
       :disabled="!canEdit"
       @close="showAddSiteModal = false"
@@ -266,7 +251,7 @@
     />
 
     <!-- Add Machine Modal -->
-    <HomeAddMachineModal
+    <AddMachineModal
       :open="showAddMachineModal"
       :sites="sites"
       :disabled="!canEdit"
@@ -290,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'
 
@@ -410,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`)
 }
 

app/pages/machine/[id].vue

@@ -1,8 +1,9 @@
 <template>
+  <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">
+    <div v-if="d.loading.value" class="flex justify-center items-center py-16">
-      <span class="loading loading-spinner loading-lg"></span>
+      <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,9 +148,11 @@
     <!-- 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" />
+        <div class="w-16 h-16 rounded-2xl bg-base-200 grid place-items-center mx-auto mb-5">
-        <h3 class="text-lg font-medium text-gray-900 mb-2">Machine non trouvée</h3>
+          <IconLucideAlertTriangle class="w-8 h-8 text-base-content/30" aria-hidden="true" />
-        <p class="text-gray-500 mb-4">La machine avec l'ID "{{ machineId }}" n'existe pas ou a été supprimée.</p>
+        </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>
@@ -156,6 +170,7 @@
       @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" />
+                <IconLucideMapPin class="w-4 h-4" :style="{ color: machine.site?.color || '#3b82f6' }" aria-hidden="true" />
-                <span class="text-gray-600">{{ machine.site?.name || 'Site inconnu' }}</span>
+                <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">
+            <div class="mt-auto pt-3 flex items-center justify-end gap-2">
-              <button class="btn btn-sm btn-outline" @click.stop="editMachine(machine)">
+              <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">
+              <NuxtLink :to="`/machine/${machine.id}`" class="btn btn-primary btn-sm">
-                Voir détails
+                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 showSyncModal = ref(false)
-const {
+const syncLoading = ref(false)
-  isRestrictedMode,
+const syncPreviewData = ref<SyncPreviewResult | null>(null)
-  isSubmitBlocked,
+const pendingPayload = ref<Partial<ModelTypePayload> | null>(null)
-  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 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,
     }
+
+    // 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)"
               >

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

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

app/pages/pieces/create.vue

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

app/pages/product-catalog.vue

@@ -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"

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 showSyncModal = ref(false)
-const {
+const syncLoading = ref(false)
-  isRestrictedMode,
+const syncPreviewData = ref<SyncPreviewResult | null>(null)
-  isSubmitBlocked,
+const pendingPayload = ref<Partial<ModelTypePayload> | null>(null)
-  restrictedModeMessage,
-  submitBlockMessage,
-  loadLinkedCount,
-  guardSubmitOrNotify,
-} = useCategoryEditGuard({
-  endpoint: '/products',
-  filterKey: 'typeProduct',
-  labels: {
-    singular: 'produit',
-    plural: 'produits',
-    verifying: 'Vérification des produits liés en cours…',
-  },
-})
 
 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,
     }
+
+    // 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,4 +1,5 @@
 <template>
+  <div>
     <DocumentPreviewModal
       :document="previewDocument"
       :visible="previewVisible"
@@ -205,6 +206,7 @@
       </div>
     </section>
     </main>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -298,20 +300,12 @@ const canSubmit = computed(() =>
 
 const structurePreview = computed(() => formatProductStructurePreview(structure.value))
 
-
 const openPreview = (doc: any) => {
-  if (!doc || !canPreviewDocument(doc)) {
+  if (!doc || !canPreviewDocument(doc)) return
-    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
@@ -396,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)
@@ -412,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/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" />
+          <IconLucideMapPin class="w-16 h-16 mx-auto text-base-content/30 mb-4" aria-hidden="true" />
-          <h3 class="text-lg font-medium text-gray-900 mb-2">
+          <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

@@ -175,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
 

app/shared/model/componentStructureHydrate.ts

@@ -103,6 +103,7 @@ export const hydratePieces = (pieces: any[]): ComponentModelPiece[] => {
     reference: piece?.reference ?? '',
     familyCode: piece?.familyCode ?? piece?.typePiece?.code ?? '',
     role: piece?.role ?? '',
+    ...(piece?.quantity !== undefined && piece.quantity >= 1 ? { quantity: piece.quantity } : {}),
   }))
 }
 
@@ -175,6 +176,7 @@ export const mapComponentPieces = (pieces: any[]): ComponentModelPiece[] => {
     typePieceLabel: piece?.typePieceLabel ?? piece?.typePiece?.name ?? '',
     familyCode: piece?.familyCode ?? piece?.typePiece?.code ?? '',
     role: piece?.role ?? '',
+    ...(piece?.quantity !== undefined && piece.quantity >= 1 ? { quantity: piece.quantity } : {}),
   }))
 }
 

app/shared/model/componentStructureSanitize.ts

@@ -162,6 +162,8 @@ export const sanitizePieces = (pieces: any[]): ComponentModelPiece[] => {
       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
       }
@@ -182,6 +184,9 @@ export const sanitizePieces = (pieces: any[]): ComponentModelPiece[] => {
       if (typePieceLabel) {
         result.typePieceLabel = typePieceLabel
       }
+      if (quantity !== undefined) {
+        result.quantity = quantity
+      }
       return result
     })
     .filter((piece): piece is ComponentModelPiece => !!piece)

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

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

nuxt.config.ts

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

tests/components/ModelTypeForm.test.ts

@@ -225,56 +225,6 @@ describe('category lock', () => {
   })
 })
 
-// ---------------------------------------------------------------------------
-// Restricted mode
-// ---------------------------------------------------------------------------
-describe('restricted mode', () => {
-  it('shows restricted mode message', () => {
-    const wrapper = mountForm({
-      restrictedMode: true,
-      restrictedModeMessage: 'Mode restreint actif',
-    })
-    expect(wrapper.text()).toContain('Mode restreint actif')
-    expect(wrapper.find('.alert-info').exists()).toBe(true)
-  })
-
-  it('does not show restricted mode message when not restricted', () => {
-    const wrapper = mountForm({
-      restrictedMode: false,
-    })
-    expect(wrapper.find('.alert-info').exists()).toBe(false)
-  })
-
-  it('disables name input in restricted mode', () => {
-    const wrapper = mountForm({ restrictedMode: true })
-    expect((getNameInput(wrapper).element as HTMLInputElement).disabled).toBe(true)
-  })
-})
-
-// ---------------------------------------------------------------------------
-// Submit disabled
-// ---------------------------------------------------------------------------
-describe('submit disabled', () => {
-  it('disables submit button when disableSubmit is true', () => {
-    const wrapper = mountForm({ disableSubmit: true })
-    expect((getSubmitButton(wrapper).element as HTMLButtonElement).disabled).toBe(true)
-  })
-
-  it('shows warning alert when disableSubmit is true', () => {
-    const wrapper = mountForm({
-      disableSubmit: true,
-      disableSubmitMessage: 'Cannot save now',
-    })
-    expect(wrapper.find('.alert-warning').exists()).toBe(true)
-    expect(wrapper.text()).toContain('Cannot save now')
-  })
-
-  it('does not show warning when disableSubmit is false', () => {
-    const wrapper = mountForm({ disableSubmit: false })
-    expect(wrapper.find('.alert-warning').exists()).toBe(false)
-  })
-})
-
 // ---------------------------------------------------------------------------
 // Saving state
 // ---------------------------------------------------------------------------

tests/components/PieceModelStructureEditor.test.ts

@@ -227,98 +227,6 @@ describe('required checkbox', () => {
   })
 })
 
-// ---------------------------------------------------------------------------
-// Restricted mode
-// ---------------------------------------------------------------------------
-describe('restricted mode', () => {
-  it('allows editing name of pre-existing field', () => {
-    const wrapper = mountEditor({
-      restrictedMode: true,
-      modelValue: {
-        customFields: [{ name: 'Locked Field', type: 'text', required: false, orderIndex: 0 }],
-        products: [],
-      },
-    })
-
-    const nameInput = wrapper.find('input[type="text"]')
-    expect((nameInput.element as HTMLInputElement).disabled).toBe(false)
-  })
-
-  it('disables type select for pre-existing field', () => {
-    const wrapper = mountEditor({
-      restrictedMode: true,
-      modelValue: {
-        customFields: [{ name: 'Locked', type: 'text', required: false, orderIndex: 0 }],
-        products: [],
-      },
-    })
-
-    const selects = wrapper.findAll('select')
-    const typeSelect = selects[selects.length - 1]
-    expect((typeSelect.element as HTMLSelectElement).disabled).toBe(true)
-  })
-
-  it('disables required checkbox for pre-existing field', () => {
-    const wrapper = mountEditor({
-      restrictedMode: true,
-      modelValue: {
-        customFields: [{ name: 'Locked', type: 'text', required: false, orderIndex: 0 }],
-        products: [],
-      },
-    })
-
-    const checkbox = wrapper.find('input[type="checkbox"]')
-    expect((checkbox.element as HTMLInputElement).disabled).toBe(true)
-  })
-
-  it('hides delete button for pre-existing field', () => {
-    const wrapper = mountEditor({
-      restrictedMode: true,
-      modelValue: {
-        customFields: [{ name: 'Locked', type: 'text', required: false, orderIndex: 0 }],
-        products: [],
-      },
-    })
-
-    // btn-error should not exist for locked fields
-    const deleteBtn = wrapper.find('button.btn-error')
-    expect(deleteBtn.exists()).toBe(false)
-  })
-
-  it('allows full editing of newly added field', async () => {
-    const wrapper = mountEditor({
-      restrictedMode: true,
-      modelValue: {
-        customFields: [],
-        products: [],
-      },
-    })
-
-    await getAddFieldButton(wrapper).trigger('click')
-    await nextTick()
-
-    // New field should have an editable type select (not disabled)
-    const selects = wrapper.findAll('select')
-    const typeSelect = selects[selects.length - 1]
-    expect((typeSelect.element as HTMLSelectElement).disabled).toBe(false)
-
-    // Delete button should exist for new field
-    const deleteBtn = wrapper.find('button.btn-error')
-    expect(deleteBtn.exists()).toBe(true)
-  })
-
-  it('hides product add button in restricted mode', () => {
-    const wrapper = mountEditor({
-      restrictedMode: true,
-      modelValue: { customFields: [], products: [] },
-    })
-
-    const addButtons = wrapper.findAll('button').filter(b => b.text().includes('Ajouter'))
-    // Only the "add field" button should be visible, not the product one
-    expect(addButtons.length).toBe(1)
-  })
-})
-
 // ---------------------------------------------------------------------------
 // Add product
 // ---------------------------------------------------------------------------

tests/composables/useCategoryEditGuard.test.ts

@@ -1,269 +0,0 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest'
-
-import { useCategoryEditGuard } from '~/composables/useCategoryEditGuard'
-
-// ---------------------------------------------------------------------------
-// Mocks
-// ---------------------------------------------------------------------------
-
-const mockGet = vi.fn()
-const mockShowInfo = vi.fn()
-
-vi.mock('~/composables/useApi', () => ({
-  useApi: () => ({
-    get: mockGet,
-    post: vi.fn(),
-    patch: vi.fn(),
-    put: vi.fn(),
-    delete: vi.fn(),
-    apiCall: vi.fn(),
-  }),
-}))
-
-vi.mock('~/composables/useToast', () => ({
-  useToast: () => ({
-    showInfo: mockShowInfo,
-    showSuccess: vi.fn(),
-    showError: vi.fn(),
-    showToast: vi.fn(),
-    toasts: { value: [] },
-    clearAll: vi.fn(),
-  }),
-}))
-
-const GUARD_CONFIG = {
-  endpoint: '/composants',
-  filterKey: 'typeComposant',
-  labels: {
-    singular: 'composant',
-    plural: 'composants',
-    verifying: 'Vérification des composants liés en cours…',
-  },
-}
-
-beforeEach(() => {
-  vi.clearAllMocks()
-})
-
-// ---------------------------------------------------------------------------
-// Initial state
-// ---------------------------------------------------------------------------
-describe('initial state', () => {
-  it('has linkedCount 0 and restrictedMode false', () => {
-    const guard = useCategoryEditGuard(GUARD_CONFIG)
-    expect(guard.linkedCount.value).toBe(0)
-    expect(guard.isRestrictedMode.value).toBe(false)
-    expect(guard.isSubmitBlocked.value).toBe(false)
-    expect(guard.linkedLoading.value).toBe(false)
-  })
-
-  it('has empty messages when no linked items', () => {
-    const guard = useCategoryEditGuard(GUARD_CONFIG)
-    expect(guard.restrictedModeMessage.value).toBe('')
-    expect(guard.submitBlockMessage.value).toBe('')
-  })
-})
-
-// ---------------------------------------------------------------------------
-// loadLinkedCount
-// ---------------------------------------------------------------------------
-describe('loadLinkedCount', () => {
-  it('sets linkedCount from API totalItems', async () => {
-    mockGet.mockResolvedValue({
-      success: true,
-      data: { totalItems: 5, member: [] },
-    })
-
-    const guard = useCategoryEditGuard(GUARD_CONFIG)
-    await guard.loadLinkedCount('mt-1')
-
-    expect(guard.linkedCount.value).toBe(5)
-    expect(guard.isRestrictedMode.value).toBe(true)
-    expect(mockGet).toHaveBeenCalledWith(
-      expect.stringContaining('/composants?'),
-    )
-  })
-
-  it('sets linkedCount 0 when API returns 0 items', async () => {
-    mockGet.mockResolvedValue({
-      success: true,
-      data: { totalItems: 0, member: [] },
-    })
-
-    const guard = useCategoryEditGuard(GUARD_CONFIG)
-    await guard.loadLinkedCount('mt-1')
-
-    expect(guard.linkedCount.value).toBe(0)
-    expect(guard.isRestrictedMode.value).toBe(false)
-  })
-
-  it('extracts totalItems from hydra:totalItems format', async () => {
-    mockGet.mockResolvedValue({
-      success: true,
-      data: { 'hydra:totalItems': 3, 'hydra:member': [{}, {}, {}] },
-    })
-
-    const guard = useCategoryEditGuard(GUARD_CONFIG)
-    await guard.loadLinkedCount('mt-1')
-
-    expect(guard.linkedCount.value).toBe(3)
-  })
-
-  it('falls back to member.length when no totalItems', async () => {
-    mockGet.mockResolvedValue({
-      success: true,
-      data: { member: [{}, {}] },
-    })
-
-    const guard = useCategoryEditGuard(GUARD_CONFIG)
-    await guard.loadLinkedCount('mt-1')
-
-    expect(guard.linkedCount.value).toBe(2)
-  })
-
-  it('falls back to hydra:member.length', async () => {
-    mockGet.mockResolvedValue({
-      success: true,
-      data: { 'hydra:member': [{}] },
-    })
-
-    const guard = useCategoryEditGuard(GUARD_CONFIG)
-    await guard.loadLinkedCount('mt-1')
-
-    expect(guard.linkedCount.value).toBe(1)
-  })
-
-  it('sets linkedCount 0 on API failure', async () => {
-    mockGet.mockResolvedValue({ success: false })
-
-    const guard = useCategoryEditGuard(GUARD_CONFIG)
-    await guard.loadLinkedCount('mt-1')
-
-    expect(guard.linkedCount.value).toBe(0)
-    expect(guard.isRestrictedMode.value).toBe(false)
-  })
-
-  it('sets linkedCount 0 on exception', async () => {
-    mockGet.mockRejectedValue(new Error('Network error'))
-
-    const guard = useCategoryEditGuard(GUARD_CONFIG)
-    await guard.loadLinkedCount('mt-1')
-
-    expect(guard.linkedCount.value).toBe(0)
-  })
-
-  it('sends correct filter parameters', async () => {
-    mockGet.mockResolvedValue({ success: true, data: { totalItems: 0 } })
-
-    const guard = useCategoryEditGuard(GUARD_CONFIG)
-    await guard.loadLinkedCount('abc-123')
-
-    const callUrl = mockGet.mock.calls[0][0] as string
-    expect(callUrl).toContain('itemsPerPage=1')
-    expect(callUrl).toContain('typeComposant=%2Fapi%2Fmodel_types%2Fabc-123')
-  })
-})
-
-// ---------------------------------------------------------------------------
-// restrictedModeMessage
-// ---------------------------------------------------------------------------
-describe('restrictedModeMessage', () => {
-  it('shows singular message for 1 linked item', async () => {
-    mockGet.mockResolvedValue({
-      success: true,
-      data: { totalItems: 1 },
-    })
-
-    const guard = useCategoryEditGuard(GUARD_CONFIG)
-    await guard.loadLinkedCount('mt-1')
-
-    expect(guard.restrictedModeMessage.value).toContain('1 composant')
-    expect(guard.restrictedModeMessage.value).toContain('Mode restreint')
-  })
-
-  it('shows plural message for multiple linked items', async () => {
-    mockGet.mockResolvedValue({
-      success: true,
-      data: { totalItems: 5 },
-    })
-
-    const guard = useCategoryEditGuard(GUARD_CONFIG)
-    await guard.loadLinkedCount('mt-1')
-
-    expect(guard.restrictedModeMessage.value).toContain('5 composants')
-    expect(guard.restrictedModeMessage.value).toContain('renommer les existants')
-  })
-
-  it('uses custom labels from config', async () => {
-    mockGet.mockResolvedValue({
-      success: true,
-      data: { totalItems: 3 },
-    })
-
-    const guard = useCategoryEditGuard({
-      endpoint: '/pieces',
-      filterKey: 'typePiece',
-      labels: { singular: 'pièce', plural: 'pièces', verifying: 'Vérification...' },
-    })
-    await guard.loadLinkedCount('mt-1')
-
-    expect(guard.restrictedModeMessage.value).toContain('3 pièces')
-  })
-})
-
-// ---------------------------------------------------------------------------
-// isSubmitBlocked & submitBlockMessage
-// ---------------------------------------------------------------------------
-describe('submit blocking', () => {
-  it('blocks submit during loading', () => {
-    const guard = useCategoryEditGuard(GUARD_CONFIG)
-    // Simulate loading state by starting a load without awaiting
-    mockGet.mockReturnValue(new Promise(() => {})) // Never resolves
-    guard.loadLinkedCount('mt-1')
-
-    expect(guard.linkedLoading.value).toBe(true)
-    expect(guard.isSubmitBlocked.value).toBe(true)
-    expect(guard.submitBlockMessage.value).toBe(GUARD_CONFIG.labels.verifying)
-  })
-
-  it('unblocks submit after loading completes', async () => {
-    mockGet.mockResolvedValue({
-      success: true,
-      data: { totalItems: 5 },
-    })
-
-    const guard = useCategoryEditGuard(GUARD_CONFIG)
-    await guard.loadLinkedCount('mt-1')
-
-    expect(guard.isSubmitBlocked.value).toBe(false)
-    expect(guard.submitBlockMessage.value).toBe('')
-  })
-})
-
-// ---------------------------------------------------------------------------
-// guardSubmitOrNotify
-// ---------------------------------------------------------------------------
-describe('guardSubmitOrNotify', () => {
-  it('returns false when not blocked', async () => {
-    mockGet.mockResolvedValue({
-      success: true,
-      data: { totalItems: 0 },
-    })
-
-    const guard = useCategoryEditGuard(GUARD_CONFIG)
-    await guard.loadLinkedCount('mt-1')
-
-    expect(guard.guardSubmitOrNotify()).toBe(false)
-    expect(mockShowInfo).not.toHaveBeenCalled()
-  })
-
-  it('returns true and shows info when blocked', () => {
-    const guard = useCategoryEditGuard(GUARD_CONFIG)
-    // Simulate loading
-    mockGet.mockReturnValue(new Promise(() => {}))
-    guard.loadLinkedCount('mt-1')
-
-    expect(guard.guardSubmitOrNotify()).toBe(true)
-    expect(mockShowInfo).toHaveBeenCalled()
-  })
-})

tests/composables/useEntityTypes.test.ts

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

tests/services/modelTypes.test.ts

@@ -50,60 +50,55 @@ beforeEach(() => {
 // normalizeModelType (tested via getModelType which calls .then(normalizeModelType))
 // ---------------------------------------------------------------------------
 describe('normalizeModelType (via getModelType)', () => {
-  it('maps componentSkeleton to structure for COMPONENT', async () => {
+  it('returns structure as-is for COMPONENT', async () => {
-    const skeleton = { customFields: [{ name: 'Weight' }] }
+    const structure = { customFields: [{ name: 'Weight' }] }
     mockFetch.mockResolvedValue(fakeModelType({
       category: 'COMPONENT',
-      structure: null,
+      structure: structure as any,
-      componentSkeleton: skeleton as any,
     }))
 
     const result = await getModelType('mt-1')
-    expect(result.structure).toEqual(skeleton)
+    expect(result.structure).toEqual(structure)
   })
 
-  it('maps pieceSkeleton to structure for PIECE', async () => {
+  it('returns structure as-is for PIECE', async () => {
-    const skeleton = { customFields: [{ name: 'Size' }] }
+    const structure = { customFields: [{ name: 'Size' }] }
     mockFetch.mockResolvedValue(fakeModelType({
       category: 'PIECE',
-      structure: null,
+      structure: structure as any,
-      pieceSkeleton: skeleton as any,
     }))
 
     const result = await getModelType('mt-1')
-    expect(result.structure).toEqual(skeleton)
+    expect(result.structure).toEqual(structure)
   })
 
-  it('maps productSkeleton to structure for PRODUCT', async () => {
+  it('returns structure as-is for PRODUCT', async () => {
-    const skeleton = { customFields: [{ name: 'Brand' }] }
+    const structure = { customFields: [{ name: 'Brand' }] }
     mockFetch.mockResolvedValue(fakeModelType({
       category: 'PRODUCT',
-      structure: null,
+      structure: structure as any,
-      productSkeleton: skeleton as any,
     }))
 
     const result = await getModelType('mt-1')
-    expect(result.structure).toEqual(skeleton)
+    expect(result.structure).toEqual(structure)
   })
 
-  it('does not override existing structure', async () => {
+  it('preserves null structure', async () => {
-    const existing = { customFields: [{ name: 'Existing' }] }
     mockFetch.mockResolvedValue(fakeModelType({
       category: 'COMPONENT',
-      structure: existing as any,
+      structure: null,
-      componentSkeleton: { customFields: [{ name: 'Skeleton' }] } as any,
     }))
 
     const result = await getModelType('mt-1')
-    expect(result.structure).toEqual(existing)
+    expect(result.structure).toBeNull()
   })
 })
 
 // ---------------------------------------------------------------------------
-// createModelType — maps structure to skeleton
+// createModelType — sends structure directly
 // ---------------------------------------------------------------------------
 describe('createModelType', () => {
-  it('sends POST with componentSkeleton for COMPONENT', async () => {
+  it('sends POST with structure for COMPONENT', async () => {
     const structure = { customFields: [] }
     mockFetch.mockResolvedValue(fakeModelType())
 
@@ -120,11 +115,10 @@ describe('createModelType', () => {
     const [endpoint, options] = mockFetch.mock.calls[0]
     expect(endpoint).toBe('/model_types')
     expect(options.method).toBe('POST')
-    expect(options.body.componentSkeleton).toEqual(structure)
+    expect(options.body.structure).toEqual(structure)
-    expect(options.body.structure).toBeUndefined()
   })
 
-  it('sends POST with pieceSkeleton for PIECE', async () => {
+  it('sends POST with structure for PIECE', async () => {
     const structure = { customFields: [], products: [] }
     mockFetch.mockResolvedValue(fakeModelType({ category: 'PIECE' }))
 
@@ -136,11 +130,10 @@ describe('createModelType', () => {
     })
 
     const [, options] = mockFetch.mock.calls[0]
-    expect(options.body.pieceSkeleton).toEqual(structure)
+    expect(options.body.structure).toEqual(structure)
-    expect(options.body.structure).toBeUndefined()
   })
 
-  it('sends POST with productSkeleton for PRODUCT', async () => {
+  it('sends POST with structure for PRODUCT', async () => {
     const structure = { customFields: [] }
     mockFetch.mockResolvedValue(fakeModelType({ category: 'PRODUCT' }))
 
@@ -152,15 +145,15 @@ describe('createModelType', () => {
     })
 
     const [, options] = mockFetch.mock.calls[0]
-    expect(options.body.productSkeleton).toEqual(structure)
+    expect(options.body.structure).toEqual(structure)
   })
 })
 
 // ---------------------------------------------------------------------------
-// updateModelType — maps structure to skeleton
+// updateModelType — sends structure directly
 // ---------------------------------------------------------------------------
 describe('updateModelType', () => {
-  it('sends PATCH with correct endpoint and skeleton', async () => {
+  it('sends PATCH with correct endpoint and structure', async () => {
     const structure = { customFields: [{ name: 'Updated' }] }
     mockFetch.mockResolvedValue(fakeModelType())
 
@@ -176,10 +169,10 @@ describe('updateModelType', () => {
     expect(endpoint).toBe('/model_types/mt-1')
     expect(options.method).toBe('PATCH')
     expect(options.headers['Content-Type']).toBe('application/merge-patch+json')
-    expect(options.body.componentSkeleton).toEqual(structure)
+    expect(options.body.structure).toEqual(structure)
   })
 
-  it('sends payload without skeleton when no structure', async () => {
+  it('sends payload without structure when not provided', async () => {
     mockFetch.mockResolvedValue(fakeModelType())
 
     await updateModelType('mt-1', {
@@ -189,7 +182,7 @@ describe('updateModelType', () => {
     })
 
     const [, options] = mockFetch.mock.calls[0]
-    expect(options.body.componentSkeleton).toBeUndefined()
+    expect(options.body.structure).toBeUndefined()
     expect(options.body.name).toBe('Just Name')
   })
 })