WIP

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

@@ -0,0 +1,55 @@
+<template>
+  <div v-if="documents.length" class="space-y-1 mt-2">
+    <div
+      v-for="doc in documents"
+      :key="doc.id"
+      class="flex items-center justify-between rounded border border-base-200 bg-base-100 px-2 py-1.5 text-xs"
+    >
+      <div class="flex items-center gap-2 min-w-0">
+        <component
+          :is="documentIcon(doc).component"
+          class="w-4 h-4 flex-shrink-0"
+          :class="documentIcon(doc).colorClass"
+        />
+        <span class="truncate">{{ doc.name || doc.filename }}</span>
+        <span class="text-base-content/40 flex-shrink-0">{{ formatSize(doc.size) }}</span>
+      </div>
+      <div class="flex items-center gap-1 flex-shrink-0 ml-2">
+        <button
+          type="button"
+          class="btn btn-ghost btn-xs"
+          :disabled="!canPreviewDocument(doc)"
+          :title="canPreviewDocument(doc) ? 'Consulter' : 'Aperçu non disponible'"
+          @click="openPreview(doc)"
+        >
+          Consulter
+        </button>
+        <button
+          type="button"
+          class="btn btn-ghost btn-xs"
+          @click="downloadDocument(doc)"
+        >
+          Télécharger
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { CommentDocument } from '~/composables/useComments'
+import { canPreviewDocument } from '~/utils/documentPreview'
+import { formatSize, documentIcon, downloadDocument } from '~/shared/utils/documentDisplayUtils'
+
+defineProps<{
+  documents: CommentDocument[]
+}>()
+
+const openPreview = (doc: CommentDocument) => {
+  if (!canPreviewDocument(doc)) return
+  // Open file URL in new tab for preview
+  if (doc.fileUrl) {
+    window.open(doc.fileUrl, '_blank')
+  }
+}
+</script>

app/components/CommentSection.vue

@@ -19,6 +19,7 @@
     </div>
 
     <!-- Formulaire d'ajout -->
+    <div class="space-y-2">
       <div class="flex gap-2">
         <textarea
           v-model="newContent"
@@ -28,9 +29,23 @@
           :disabled="submitting"
           @keydown.ctrl.enter="handleSubmit"
         />
+        <div class="flex flex-col gap-1 self-end">
+          <label
+            class="btn btn-ghost btn-sm btn-square tooltip tooltip-left"
+            data-tip="Joindre des fichiers"
+          >
+            <IconLucidePaperclip class="w-4 h-4" />
+            <input
+              ref="fileInputRef"
+              type="file"
+              multiple
+              class="hidden"
+              @change="handleFilesSelected"
+            />
+          </label>
           <button
             type="button"
-        class="btn btn-primary btn-sm self-end"
+            class="btn btn-primary btn-sm btn-square"
             :disabled="!newContent.trim() || submitting"
             @click="handleSubmit"
           >
@@ -38,6 +53,22 @@
             <IconLucideSend v-else class="w-4 h-4" />
           </button>
         </div>
+      </div>
+      <!-- Selected files preview -->
+      <div v-if="selectedFiles.length" class="flex flex-wrap gap-1">
+        <span
+          v-for="(file, i) in selectedFiles"
+          :key="i"
+          class="badge badge-sm badge-outline gap-1"
+        >
+          <IconLucideFile class="w-3 h-3" />
+          {{ file.name }}
+          <button type="button" class="ml-1" @click="removeFile(i)">
+            <IconLucideX class="w-3 h-3" />
+          </button>
+        </span>
+      </div>
+    </div>
 
     <!-- Liste des commentaires ouverts -->
     <div v-if="loadingComments" class="flex justify-center py-4">
@@ -57,6 +88,8 @@
         <div class="flex items-start justify-between gap-2">
           <div class="flex-1">
             <p class="text-sm whitespace-pre-wrap">{{ comment.content }}</p>
+            <!-- Documents attachés -->
+            <CommentDocumentList :documents="getDocuments(comment)" />
           </div>
         </div>
         <div class="flex items-center justify-between text-xs text-base-content/60">
@@ -97,6 +130,8 @@
         class="bg-base-200/50 rounded-lg p-3 opacity-60 space-y-1"
       >
         <p class="text-sm whitespace-pre-wrap">{{ comment.content }}</p>
+        <!-- Documents attachés (résolus) -->
+        <CommentDocumentList :documents="getDocuments(comment)" />
         <div class="flex items-center justify-between text-xs text-base-content/50">
           <span>{{ comment.authorName }} — {{ formatCommentDate(comment.createdAt) }}</span>
           <span v-if="comment.resolvedByName">
@@ -110,12 +145,16 @@
 
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
-import { useComments, type Comment } from '~/composables/useComments'
+import { useComments, type Comment, type CommentDocument } from '~/composables/useComments'
 import { usePermissions } from '~/composables/usePermissions'
+import CommentDocumentList from '~/components/CommentDocumentList.vue'
 import IconLucideMessageSquare from '~icons/lucide/message-square'
 import IconLucideSend from '~icons/lucide/send'
 import IconLucideCheck from '~icons/lucide/check'
 import IconLucideTrash2 from '~icons/lucide/trash-2'
+import IconLucidePaperclip from '~icons/lucide/paperclip'
+import IconLucideFile from '~icons/lucide/file'
+import IconLucideX from '~icons/lucide/x'
 
 const props = defineProps<{
   entityType: string
@@ -138,6 +177,11 @@ const newContent = ref('')
 const submitting = ref(false)
 const loadingComments = ref(false)
 const showResolvedList = ref(false)
+const selectedFiles = ref<File[]>([])
+const fileInputRef = ref<HTMLInputElement | null>(null)
+
+const getDocuments = (comment: Comment): CommentDocument[] =>
+  comment.documents?.filter((d): d is CommentDocument => typeof d === 'object' && d !== null && 'id' in d) ?? []
 
 const openComments = computed(() =>
   comments.value.filter(c => c.status === 'open'),
@@ -159,6 +203,18 @@ const formatCommentDate = (dateStr: string): string => {
   }).format(date)
 }
 
+const handleFilesSelected = (e: Event) => {
+  const input = e.target as HTMLInputElement
+  if (input.files) {
+    selectedFiles.value.push(...Array.from(input.files))
+  }
+  input.value = ''
+}
+
+const removeFile = (index: number) => {
+  selectedFiles.value.splice(index, 1)
+}
+
 const loadComments = async () => {
   loadingComments.value = true
   const [openResult, resolvedResult] = await Promise.all([
@@ -182,10 +238,12 @@ const handleSubmit = async () => {
     props.entityId,
     content,
     props.entityName,
+    selectedFiles.value.length > 0 ? selectedFiles.value : undefined,
   )
   submitting.value = false
   if (result.success) {
     newContent.value = ''
+    selectedFiles.value = []
     await loadComments()
   }
 }

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,167 +1,152 @@
 <template>
-  <div class="space-y-4">
+  <div>
     <DocumentPreviewModal
       :document="previewDocument"
       :visible="previewVisible"
       :documents="componentDocuments"
       @close="closePreview"
     />
+    <DocumentEditModal
+      :visible="editModalVisible"
+      :document="editingDocument"
+      @close="editModalVisible = false"
+      @updated="handleDocumentUpdated"
+    />
 
     <!-- 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 v-if="supplierReferenceMap.get(constructeur.id)" class="opacity-70">({{ supplierReferenceMap.get(constructeur.id) }})</span>
           </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
+          </span>
-              v-if="displayProductName"
+        </div>
-              class="badge badge-info badge-sm"
+      </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')"
       >
-              Produit&nbsp;: {{ displayProductName }}
+        Supprimer
-            </span>
+      </button>
-          </div>
-        </div>
-      </div>
     </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="supplierReferenceMap.get(constructeur.id)" class="text-sm text-base-content/60">
+                — Réf. {{ supplierReferenceMap.get(constructeur.id) }}
+              </span>
+              <span v-if="formatConstructeurContact(constructeur)" class="text-xs text-base-content/50 block">
                 {{ formatConstructeurContact(constructeur) }}
               </span>
+            </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`"
+            :to="`/product/${component.product.id}`"
-                  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 +162,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 +185,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
@@ -245,21 +218,23 @@
         <DocumentListInline
           :documents="componentDocuments"
           :can-delete="isEditMode"
+          :can-edit="isEditMode"
           :delete-disabled="uploadingDocuments"
           empty-text="Aucun document lié à ce composant."
           @preview="openPreview"
+          @edit="openEditModal"
           @delete="removeDocument"
         />
       </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 +245,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"
@@ -306,6 +296,7 @@ import {
   formatConstructeurContact as formatConstructeurContactSummary,
   resolveConstructeurs,
   uniqueConstructeurIds,
+  parseConstructeurLinksFromApi,
 } from '~/shared/constructeurUtils'
 import {
   formatSize,
@@ -321,11 +312,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 {
@@ -340,6 +332,7 @@ const {
   ensureDocumentsLoaded,
   handleFilesAdded,
   removeDocument,
+  editDocument,
 } = useEntityDocuments({ entity: () => props.component, entityType: 'composant' })
 
 const {
@@ -354,6 +347,21 @@ const {
   updateCustomField: updateComponentCustomField,
 } = useEntityCustomFields({ entity: () => props.component, entityType: 'composant' })
 
+// --- Document edit modal ---
+const editingDocument = ref(null)
+const editModalVisible = ref(false)
+
+const openEditModal = (doc) => {
+  editingDocument.value = doc
+  editModalVisible.value = true
+}
+const handleDocumentUpdated = async (data) => {
+  if (!editingDocument.value?.id) return
+  await editDocument(editingDocument.value.id, data)
+  editModalVisible.value = false
+  editingDocument.value = null
+}
+
 // --- Collapse state ---
 const isCollapsed = ref(true)
 
@@ -377,26 +385,47 @@ 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()
 
-const componentConstructeurIds = computed(() =>
+const componentConstructeurLinks = computed(() =>
-  uniqueConstructeurIds(
+  parseConstructeurLinksFromApi(
-    props.component,
     Array.isArray(props.component.constructeurs) ? props.component.constructeurs : [],
-    props.component.constructeur ? [props.component.constructeur] : [],
   ),
 )
 
-const componentConstructeursDisplay = computed(() =>
+const supplierReferenceMap = computed(() => {
-  resolveConstructeurs(
+  const map = new Map()
-    componentConstructeurIds.value,
+  componentConstructeurLinks.value.forEach(l => {
-    Array.isArray(props.component.constructeurs) ? props.component.constructeurs : [],
+    if (l.supplierReference) map.set(l.constructeurId, l.supplierReference)
-    props.component.constructeur ? [props.component.constructeur] : [],
+  })
-    constructeurs.value,
+  return map
-  ),
+})
+
+const componentConstructeurIds = computed(() =>
+  componentConstructeurLinks.value.map(l => l.constructeurId).filter(Boolean),
 )
 
+const componentConstructeursDisplay = computed(() => {
+  // Extract nested constructeur objects from link entries
+  const linkConstructeurs = componentConstructeurLinks.value
+    .filter(l => l.constructeur && l.constructeur.id)
+    .map(l => l.constructeur)
+  return resolveConstructeurs(
+    componentConstructeurIds.value,
+    linkConstructeurs,
+    constructeurs.value,
+  )
+})
+
 const formatConstructeurContact = (constructeur) =>
   formatConstructeurContactSummary(constructeur)
 

app/components/ComponentModelStructureEditor.vue

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

app/components/ComponentStructureAssignmentNode.vue

@@ -23,6 +23,7 @@
           :empty-text="componentOptions.length ? 'Aucun résultat' : 'Aucun composant disponible'"
           :option-label="componentOptionLabel"
           :option-description="componentOptionDescription"
+          server-search
           @search="fetchComponentOptions"
           @update:modelValue="(value) => { assignment.selectedComponentId = normalizeSelectionValue(value); }"
         />
@@ -62,6 +63,7 @@
           :empty-text="getPieceOptions(pieceAssignment).length ? 'Aucun résultat' : 'Aucune pièce disponible'"
           :option-label="pieceOptionLabel"
           :option-description="pieceOptionDescription"
+          server-search
           @search="(term) => fetchPieceOptions(pieceAssignment, term)"
           @update:modelValue="(value) => { pieceAssignment.selectedPieceId = normalizeSelectionValue(value); }"
         />
@@ -101,6 +103,7 @@
           :empty-text="getProductOptions(productAssignment).length ? 'Aucun résultat' : 'Aucun produit disponible'"
           :option-label="productOptionLabel"
           :option-description="productOptionDescription"
+          server-search
           @search="(term) => fetchProductOptions(productAssignment, term)"
           @update:modelValue="(value) => { productAssignment.selectedProductId = normalizeSelectionValue(value); }"
         />

app/components/ComposantSelect.vue

@@ -0,0 +1,130 @@
+<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="formatLabel"
+      :disabled="disabled"
+      server-search
+      @update:modelValue="updateValue"
+      @search="handleSearch"
+    >
+      <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, ref, 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 { loading: globalLoading, loadComposants } = useComposants()
+
+const localComposants = ref<any[]>([])
+const localLoading = ref(false)
+const loading = computed(() => localLoading.value || globalLoading.value)
+
+const composantOptions = computed(() => localComposants.value)
+
+const loadFilteredComposants = async (search = '') => {
+  if (!props.typeComposantId) return
+  localLoading.value = true
+  try {
+    const result = await loadComposants({ typeComposantId: props.typeComposantId, search, itemsPerPage: 200, force: true })
+    if (result.success && result.data?.items) {
+      localComposants.value = result.data.items
+    }
+  }
+  catch (error: unknown) {
+    console.error('Erreur lors du chargement des composants:', error)
+  }
+  finally {
+    localLoading.value = false
+  }
+}
+
+let searchDebounce: ReturnType<typeof setTimeout> | null = null
+const handleSearch = (term: string) => {
+  if (searchDebounce) clearTimeout(searchDebounce)
+  searchDebounce = setTimeout(() => loadFilteredComposants(term.trim()), 300)
+}
+
+onMounted(() => {
+  loadFilteredComposants()
+})
+
+watch(
+  () => props.typeComposantId,
+  () => {
+    loadFilteredComposants()
+  },
+)
+
+const updateValue = (value: string | number | null | undefined) => {
+  if (value === undefined || value === null || value === '') {
+    emit('update:modelValue', null)
+    return
+  }
+  emit('update:modelValue', String(value))
+}
+
+const formatLabel = (option: any) => {
+  if (!option) return ''
+  const name = option.name || 'Composant'
+  return option.reference ? `${name} — ${option.reference}` : name
+}
+
+const formatDescription = (option: any) => {
+  const parts: string[] = []
+  const typeName = option?.typeComposant?.name
+  if (typeName) {
+    parts.push(typeName)
+  }
+  if (option?.reference) {
+    parts.push(`Ref. ${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/ConstructeurLinksTable.vue

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

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

@@ -0,0 +1,51 @@
+<template>
+  <div class="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
+    <div class="flex flex-col gap-2">
+      <h1 class="text-3xl font-bold">{{ title }}</h1>
+      <p v-if="subtitle" class="text-sm text-base-content/70">{{ subtitle }}</p>
+    </div>
+    <div class="flex items-center gap-2">
+      <button
+        v-if="canEdit"
+        class="btn btn-primary"
+        :class="{ 'btn-outline': isEditMode }"
+        @click="$emit('toggle-edit')"
+      >
+        <IconLucideSquarePen v-if="!isEditMode" class="w-5 h-5 mr-2" aria-hidden="true" />
+        <IconLucideEye v-else class="w-5 h-5 mr-2" aria-hidden="true" />
+        {{ isEditMode ? 'Voir détails' : 'Modifier' }}
+      </button>
+      <button type="button" class="btn btn-ghost btn-sm md:btn-md" @click="goBack">
+        Retour au catalogue
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import IconLucideSquarePen from '~icons/lucide/square-pen'
+import IconLucideEye from '~icons/lucide/eye'
+
+const router = useRouter()
+
+const props = defineProps<{
+  title: string
+  subtitle?: string
+  isEditMode: boolean
+  canEdit: boolean
+  backLink: string
+}>()
+
+defineEmits<{
+  'toggle-edit': []
+}>()
+
+function goBack() {
+  if (window.history.length > 1) {
+    router.back()
+  }
+  else {
+    navigateTo(props.backLink)
+  }
+}
+</script>

app/components/DocumentEditModal.vue

@@ -0,0 +1,90 @@
+<template>
+  <Teleport to="body">
+    <div v-if="visible" class="modal modal-open" @click.self="$emit('close')">
+      <div class="modal-box max-w-sm">
+        <h3 class="font-bold text-lg mb-4">
+          Modifier le document
+        </h3>
+
+        <div class="space-y-4">
+          <label class="form-control w-full">
+            <div class="label">
+              <span class="label-text">Nom</span>
+            </div>
+            <input
+              v-model="form.name"
+              type="text"
+              class="input input-bordered input-sm md:input-md w-full"
+            >
+          </label>
+
+          <label class="form-control w-full">
+            <div class="label">
+              <span class="label-text">Type</span>
+            </div>
+            <select
+              v-model="form.type"
+              class="select select-bordered select-sm md:select-md w-full"
+            >
+              <option v-for="t in DOCUMENT_TYPES" :key="t.value" :value="t.value">
+                {{ t.label }}
+              </option>
+            </select>
+          </label>
+        </div>
+
+        <div class="modal-action">
+          <button type="button" class="btn btn-ghost btn-sm md:btn-md" @click="$emit('close')">
+            Annuler
+          </button>
+          <button
+            type="button"
+            class="btn btn-primary btn-sm md:btn-md"
+            :disabled="saving"
+            @click="save"
+          >
+            <span v-if="saving" class="loading loading-spinner loading-xs" />
+            Sauvegarder
+          </button>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { reactive, watch, ref } from 'vue'
+import { DOCUMENT_TYPES } from '~/shared/documentTypes'
+import type { Document } from '~/composables/useDocuments'
+
+const props = defineProps<{
+  visible: boolean
+  document: Document | null
+}>()
+
+const emit = defineEmits<{
+  (e: 'close'): void
+  (e: 'updated', data: { name: string; type: string }): void
+}>()
+
+const form = reactive({ name: '', type: 'documentation' })
+const saving = ref(false)
+
+watch(
+  () => props.document,
+  (doc) => {
+    if (doc) {
+      form.name = doc.name || ''
+      form.type = doc.type || 'documentation'
+    }
+  },
+  { immediate: true },
+)
+
+const save = () => {
+  if (!form.name.trim()) return
+  saving.value = true
+  emit('updated', { name: form.name.trim(), type: form.type })
+  saving.value = false
+}
+</script>

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
@@ -34,6 +34,21 @@
         @change="onFileChange"
       >
 
+      <div class="w-full max-w-xs mt-2">
+        <label class="text-xs font-semibold uppercase tracking-wide text-base-content/70">
+          Type de document
+        </label>
+        <select
+          class="select select-bordered select-sm w-full mt-1"
+          :value="documentType"
+          @change="emit('update:documentType', $event.target.value)"
+        >
+          <option v-for="t in DOCUMENT_TYPES" :key="t.value" :value="t.value">
+            {{ t.label }}
+          </option>
+        </select>
+      </div>
+
       <ul v-if="selectedFiles.length" class="mt-4 w-full space-y-2 text-left">
         <li v-for="file in selectedFiles" :key="file.name" class="flex items-center justify-between text-sm">
           <div class="flex items-center gap-3">
@@ -54,7 +69,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)">
@@ -69,6 +84,7 @@
 <script setup>
 import { ref, computed, watch, onBeforeUnmount } from 'vue'
 import { useToast } from '~/composables/useToast'
+import { DOCUMENT_TYPES } from '~/shared/documentTypes'
 import { getFileIcon } from '~/utils/fileIcons'
 import IconLucideCloudUpload from '~icons/lucide/cloud-upload'
 
@@ -96,10 +112,14 @@ const props = defineProps({
   maxFileSizeMb: {
     type: Number,
     default: 200
+  },
+  documentType: {
+    type: String,
+    default: 'documentation'
   }
 })
 
-const emit = defineEmits(['update:modelValue', 'files-added'])
+const emit = defineEmits(['update:modelValue', 'files-added', 'update:documentType'])
 
 const dragActive = ref(false)
 const fileInput = ref(null)

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

@@ -6,10 +6,16 @@
       :documents="pieceDocuments"
       @close="closePreview"
     />
+    <DocumentEditModal
+      :visible="editModalVisible"
+      :document="editingDocument"
+      @close="editModalVisible = false"
+      @updated="handleDocumentUpdated"
+    />
 
     <!-- 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,15 +27,22 @@
           <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">
               Rattachée à {{ piece.parentComponentName }}
             </span>
             <span v-if="pieceData.reference" class="badge badge-outline badge-sm">{{ pieceData.reference }}</span>
+            <span v-if="pieceData.referenceAuto" class="badge badge-secondary badge-sm" title="Référence auto">{{ pieceData.referenceAuto }}</span>
             <template v-if="pieceConstructeursDisplay.length">
               <span
                 v-for="constructeur in pieceConstructeursDisplay"
@@ -37,6 +50,9 @@
                 class="badge badge-outline badge-sm"
               >
                 {{ constructeur.name }}
+                <span v-if="supplierReferenceMap.get(constructeur.id)" class="text-xs opacity-60 ml-0.5">
+                  ({{ supplierReferenceMap.get(constructeur.id) }})
+                </span>
               </span>
             </template>
             <span v-if="pieceData.prix" class="badge badge-primary badge-sm">{{ pieceData.prix }}€</span>
@@ -49,11 +65,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
@@ -68,6 +110,10 @@
           pieceData.reference || "Non définie"
         }}</span>
       </div>
+      <div v-if="pieceData.referenceAuto">
+        <span class="font-medium">Référence auto:</span>
+        <span class="ml-2">{{ pieceData.referenceAuto }}</span>
+      </div>
       <div>
         <span class="font-medium">Fournisseur:</span>
         <div v-if="!isEditMode" class="ml-2">
@@ -79,10 +125,13 @@
             >
               <span class="font-medium">
                 {{ constructeur.name }}
+                <span v-if="supplierReferenceMap.get(constructeur.id)" class="text-sm font-normal text-base-content/60">
+                  — Réf. {{ supplierReferenceMap.get(constructeur.id) }}
+                </span>
               </span>
               <span
                 v-if="formatConstructeurContact(constructeur)"
-                class="text-xs text-gray-500"
+                class="text-xs text-base-content/50"
               >
                 {{ formatConstructeurContact(constructeur) }}
               </span>
@@ -142,7 +191,7 @@
             </p>
             <NuxtLink
               v-if="selectedProduct.id"
-              :to="`/product/${selectedProduct.id}/edit`"
+              :to="`/product/${selectedProduct.id}`"
               class="link link-primary text-xs"
             >
               Ouvrir la fiche produit
@@ -165,65 +214,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 +228,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 +249,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>
 
@@ -270,9 +264,11 @@
       <DocumentListInline
         :documents="pieceDocuments"
         :can-delete="isEditMode"
+        :can-edit="isEditMode"
         :delete-disabled="uploadingDocuments"
         empty-text="Aucun document lié à cette pièce."
         @preview="openPreview"
+        @edit="openEditModal"
         @delete="removeDocument"
       />
     </div>
@@ -287,21 +283,14 @@ 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 {
   formatConstructeurContact as formatConstructeurContactSummary,
   resolveConstructeurs,
   uniqueConstructeurIds,
+  parseConstructeurLinksFromApi,
 } from '~/shared/constructeurUtils'
-import {
-  formatSize,
-  shouldInlinePdf,
-  documentPreviewSrc,
-  documentIcon,
-  downloadDocument,
-} from '~/shared/utils/documentDisplayUtils'
 import {
   resolveFieldId,
   resolveFieldReadOnly,
@@ -313,18 +302,25 @@ 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({
   name: props.piece.name || '',
   reference: props.piece.reference || '',
+  referenceAuto: props.piece.referenceAuto || null,
   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 ---
@@ -354,6 +350,7 @@ const {
   refreshDocuments,
   handleFilesAdded,
   removeDocument,
+  editDocument,
 } = useEntityDocuments({ entity: () => props.piece, entityType: 'piece' })
 
 const {
@@ -368,6 +365,21 @@ const {
   updateCustomField,
 } = useEntityCustomFields({ entity: () => props.piece, entityType: 'piece' })
 
+// --- Document edit modal ---
+const editingDocument = ref(null)
+const editModalVisible = ref(false)
+
+const openEditModal = (doc) => {
+  editingDocument.value = doc
+  editModalVisible.value = true
+}
+const handleDocumentUpdated = async (data) => {
+  if (!editingDocument.value?.id) return
+  await editDocument(editingDocument.value.id, data)
+  editModalVisible.value = false
+  editingDocument.value = null
+}
+
 // --- Collapse state ---
 const isCollapsed = ref(true)
 
@@ -388,23 +400,36 @@ const toggleCollapse = () => {
 // --- Constructeurs ---
 const { constructeurs } = useConstructeurs()
 
-const pieceConstructeurIds = computed(() =>
+const pieceConstructeurLinks = computed(() =>
-  uniqueConstructeurIds(
+  parseConstructeurLinksFromApi(
-    props.piece,
     Array.isArray(props.piece.constructeurs) ? props.piece.constructeurs : [],
-    props.piece.constructeur ? [props.piece.constructeur] : [],
   ),
 )
 
-const pieceConstructeursDisplay = computed(() =>
+const supplierReferenceMap = computed(() => {
-  resolveConstructeurs(
+  const map = new Map()
-    pieceConstructeurIds.value,
+  pieceConstructeurLinks.value.forEach(l => {
-    Array.isArray(props.piece.constructeurs) ? props.piece.constructeurs : [],
+    if (l.supplierReference) map.set(l.constructeurId, l.supplierReference)
-    props.piece.constructeur ? [props.piece.constructeur] : [],
+  })
-    constructeurs.value,
+  return map
-  ),
+})
+
+const pieceConstructeurIds = computed(() =>
+  pieceConstructeurLinks.value.map(l => l.constructeurId).filter(Boolean),
 )
 
+const pieceConstructeursDisplay = computed(() => {
+  // Extract nested constructeur objects from link entries
+  const linkConstructeurs = pieceConstructeurLinks.value
+    .filter(l => l.constructeur && l.constructeur.id)
+    .map(l => l.constructeur)
+  return resolveConstructeurs(
+    pieceConstructeurIds.value,
+    linkConstructeurs,
+    constructeurs.value,
+  )
+})
+
 const formatConstructeurContact = (constructeur) =>
   formatConstructeurContactSummary(constructeur)
 
@@ -485,13 +510,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 +557,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 +570,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,130 @@
+<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="formatLabel"
+      :disabled="disabled"
+      server-search
+      @update:modelValue="updateValue"
+      @search="handleSearch"
+    >
+      <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, ref, 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 { loading: globalLoading, loadPieces } = usePieces()
+
+const localPieces = ref<any[]>([])
+const localLoading = ref(false)
+const loading = computed(() => localLoading.value || globalLoading.value)
+
+const pieceOptions = computed(() => localPieces.value)
+
+const loadFilteredPieces = async (search = '') => {
+  if (!props.typePieceId) return
+  localLoading.value = true
+  try {
+    const result = await loadPieces({ typePieceId: props.typePieceId, search, itemsPerPage: 200, force: true })
+    if (result.success && result.data?.items) {
+      localPieces.value = result.data.items
+    }
+  }
+  catch (error: unknown) {
+    console.error('Erreur lors du chargement des pièces:', error)
+  }
+  finally {
+    localLoading.value = false
+  }
+}
+
+let searchDebounce: ReturnType<typeof setTimeout> | null = null
+const handleSearch = (term: string) => {
+  if (searchDebounce) clearTimeout(searchDebounce)
+  searchDebounce = setTimeout(() => loadFilteredPieces(term.trim()), 300)
+}
+
+onMounted(() => {
+  loadFilteredPieces()
+})
+
+watch(
+  () => props.typePieceId,
+  () => {
+    loadFilteredPieces()
+  },
+)
+
+const updateValue = (value: string | number | null | undefined) => {
+  if (value === undefined || value === null || value === '') {
+    emit('update:modelValue', null)
+    return
+  }
+  emit('update:modelValue', String(value))
+}
+
+const formatLabel = (option: any) => {
+  if (!option) return ''
+  const name = option.name || 'Pièce'
+  return option.reference ? `${name} — ${option.reference}` : name
+}
+
+const formatDescription = (option: any) => {
+  const parts: string[] = []
+  const typeName = option?.typePiece?.name
+  if (typeName) {
+    parts.push(typeName)
+  }
+  if (option?.reference) {
+    parts.push(`Ref. ${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

@@ -8,9 +8,11 @@
       :empty-text="emptyText"
       size="sm"
       option-value="id"
-      option-label="name"
+      :option-label="formatLabel"
       :disabled="disabled"
+      server-search
       @update:modelValue="updateValue"
+      @search="handleSearch"
     >
       <template #option-description="{ option }">
         <span class="text-xs text-base-content/60">
@@ -25,7 +27,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, watch } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import SearchSelect from '~/components/common/SearchSelect.vue'
 import { useProducts } from '~/composables/useProducts'
 
@@ -52,43 +54,45 @@ const emit = defineEmits<{
   (e: 'update:modelValue', value: string | null): void
 }>()
 
-const { products, loading, loadProducts } = useProducts()
+const { loading: globalLoading, loadProducts } = useProducts()
 
-const productOptions = computed(() => {
+const localProducts = ref<any[]>([])
-  const baseOptions = Array.isArray(products.value) ? products.value : []
+const localLoading = ref(false)
-  if (!props.typeProductId) {
+const loading = computed(() => localLoading.value || globalLoading.value)
-    return baseOptions
+
+const productOptions = computed(() => localProducts.value)
+
+const loadFilteredProducts = async (search = '') => {
+  if (!props.typeProductId) return
+  localLoading.value = true
+  try {
+    const result = await loadProducts({ typeProductId: props.typeProductId, search, itemsPerPage: 200, force: true })
+    if (result.success && result.data?.items) {
+      localProducts.value = result.data.items
     }
+  }
+  catch (error: unknown) {
+    console.error('Erreur lors du chargement des produits:', error)
+  }
+  finally {
+    localLoading.value = false
+  }
+}
 
-  const allowedTypeId = String(props.typeProductId)
+let searchDebounce: ReturnType<typeof setTimeout> | null = null
-  return baseOptions.filter((product) => {
+const handleSearch = (term: string) => {
-    const typeId =
+  if (searchDebounce) clearTimeout(searchDebounce)
-      product?.typeProductId ||
+  searchDebounce = setTimeout(() => loadFilteredProducts(term.trim()), 300)
-      product?.typeProduct?.id ||
+}
-      null
-    return typeId ? String(typeId) === allowedTypeId : false
-  })
-})
 
 onMounted(() => {
-  if (productOptions.value.length === 0) {
+  loadFilteredProducts()
-    loadProducts().catch((error) => {
-      console.error('Erreur lors du chargement des produits:', error)
-    })
-  }
 })
 
 watch(
-  () => props.modelValue,
+  () => props.typeProductId,
-  (value) => {
+  () => {
-    if (typeof value === 'string') {
+    loadFilteredProducts()
-      const exists = productOptions.value.some((product) => product.id === value)
-      if (!exists && productOptions.value.length === 0 && !loading.value) {
-        loadProducts().catch((error) => {
-          console.error('Erreur lors du chargement des produits:', error)
-        })
-      }
-    }
   },
 )
 
@@ -100,10 +104,20 @@ const updateValue = (value: string | number | null | undefined) => {
   emit('update:modelValue', String(value))
 }
 
+const formatLabel = (option: any) => {
+  if (!option) return ''
+  const name = option.name || 'Produit'
+  return option.reference ? `${name} — ${option.reference}` : name
+}
+
 const formatDescription = (option: any) => {
   const parts: string[] = []
+  const typeName = option?.typeProduct?.name
+  if (typeName) {
+    parts.push(typeName)
+  }
   if (option?.reference) {
-    parts.push(option.reference)
+    parts.push(`Ref. ${option.reference}`)
   }
   if (option?.supplierPrice !== undefined && option.supplierPrice !== null) {
     const price = Number(option.supplierPrice)

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,19 @@
                         </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>
+                  <!-- Quantity is set per-component on the component edit page -->
                 </div>
-                <button v-if="!isPieceLocked(index)" type="button" class="btn btn-error btn-xs btn-square" @click="removePiece(index)">
+                <button type="button" class="btn btn-error btn-xs btn-square" @click="removePiece(index)">
-                  <IconLucideTrash class="w-4 h-4" aria-hidden="true" />
-                </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 +274,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 +308,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 +346,6 @@ const props = withDefaults(defineProps<{
   lockedTypeLabel?: string
   allowSubcomponents?: boolean
   maxSubcomponentDepth?: number
-  restrictedMode?: boolean
   isLocked?: boolean
 }>(), {
   depth: 0,
@@ -386,19 +357,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/DocumentListInline.vue

@@ -31,8 +31,9 @@
           />
         </div>
         <div>
-          <div class="font-medium">
+          <div class="font-medium flex items-center gap-2">
             {{ document.name }}
+            <span class="badge badge-sm badge-outline">{{ getDocumentTypeLabel(document.type || 'documentation') }}</span>
           </div>
           <div class="text-xs text-base-content/70">
             {{ document.mimeType || 'Inconnu' }} • {{ formatSize(document.size) }}
@@ -40,6 +41,15 @@
         </div>
       </div>
       <div class="flex items-center gap-2">
+        <button
+          v-if="canEdit"
+          type="button"
+          class="btn btn-ghost btn-xs"
+          title="Modifier"
+          @click="$emit('edit', document)"
+        >
+          Modifier
+        </button>
         <button
           type="button"
           class="btn btn-ghost btn-xs"
@@ -74,6 +84,7 @@
 </template>
 
 <script setup lang="ts">
+import { getDocumentTypeLabel } from '~/shared/documentTypes'
 import { canPreviewDocument, isImageDocument } from '~/utils/documentPreview'
 import {
   documentIcon,
@@ -89,10 +100,12 @@ import type { Document } from '~/composables/useDocuments'
 withDefaults(defineProps<{
   documents: Document[]
   canDelete?: boolean
+  canEdit?: boolean
   deleteDisabled?: boolean
   emptyText?: string
 }>(), {
   canDelete: false,
+  canEdit: false,
   deleteDisabled: false,
   emptyText: 'Aucun document.',
 })
@@ -100,5 +113,6 @@ withDefaults(defineProps<{
 defineEmits<{
   (e: 'preview', document: Document): void
   (e: 'delete', documentId: string): void
+  (e: 'edit', document: Document): void
 }>()
 </script>

app/components/common/EntityVersionList.vue

@@ -0,0 +1,170 @@
+<template>
+  <section class="space-y-3 rounded-lg border border-base-200 bg-base-200/40 p-4">
+    <header class="flex items-center justify-between gap-3">
+      <div>
+        <h2 class="font-semibold text-base-content">Versions</h2>
+        <p class="text-xs text-base-content/70">
+          Historique des versions avec possibilite de restauration.
+        </p>
+      </div>
+      <span v-if="versions.length" class="badge badge-outline">
+        {{ versions.length }} version{{ versions.length > 1 ? 's' : '' }}
+      </span>
+    </header>
+
+    <div v-if="loading" class="flex items-center gap-2 text-sm text-base-content/70">
+      <span class="loading loading-spinner loading-sm" aria-hidden="true" />
+      Chargement des versions...
+    </div>
+
+    <div v-else-if="error" class="alert alert-warning">
+      <span>{{ error }}</span>
+    </div>
+
+    <p v-else-if="versions.length === 0" class="text-xs text-base-content/70">
+      Aucune version enregistree.
+    </p>
+
+    <ul v-else class="max-h-96 space-y-2 overflow-y-auto pr-1">
+      <li
+        v-for="entry in versions"
+        :key="entry.version"
+        class="flex items-center justify-between rounded-md border border-base-200 bg-base-100 px-3 py-2"
+      >
+        <div class="min-w-0 flex-1">
+          <div class="flex items-center gap-2">
+            <span class="font-mono text-sm font-semibold">v{{ entry.version }}</span>
+            <span
+              v-if="entry.version === currentVersion"
+              class="badge badge-primary badge-sm"
+            >
+              actuelle
+            </span>
+            <span
+              v-if="entry.action === 'restore'"
+              class="badge badge-warning badge-sm"
+            >
+              restauration
+            </span>
+          </div>
+          <div class="mt-0.5 flex flex-wrap items-center gap-2 text-xs text-base-content/60">
+            <span>{{ actionLabel(entry.action) }}</span>
+            <span>&middot;</span>
+            <span>{{ formatDate(entry.createdAt) }}</span>
+            <span v-if="entry.actor">&middot; {{ entry.actor.label }}</span>
+          </div>
+          <div v-if="entry.diff && Object.keys(entry.diff).length" class="mt-1 flex flex-wrap gap-1">
+            <span
+              v-for="(change, field) in entry.diff"
+              :key="field"
+              class="badge badge-ghost badge-xs"
+            >
+              {{ formatDiffEntry(String(field), change) }}
+            </span>
+          </div>
+        </div>
+        <button
+          v-if="canRestore && entry.version !== currentVersion"
+          class="btn btn-ghost btn-xs"
+          :disabled="restoring"
+          @click="handleRestore(entry.version)"
+        >
+          Restaurer
+        </button>
+      </li>
+    </ul>
+
+    <VersionRestoreModal
+      :visible="modalVisible"
+      :preview="previewData"
+      :restoring="restoring"
+      :field-labels="fieldLabels"
+      :entity-type="entityType"
+      @close="modalVisible = false"
+      @confirm="confirmRestore"
+    />
+  </section>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, watch, toRef } from 'vue'
+import { useEntityVersions, type RestorePreview } from '~/composables/useEntityVersions'
+import { usePermissions } from '~/composables/usePermissions'
+import { formatHistoryDate, historyActionLabel } from '~/shared/utils/historyDisplayUtils'
+import VersionRestoreModal from './VersionRestoreModal.vue'
+
+const props = defineProps<{
+  entityType: 'machine' | 'composant' | 'piece' | 'product'
+  entityId: string
+  fieldLabels: Record<string, string>
+  /** Increment this value to force a refresh of the versions list */
+  refreshKey?: number
+}>()
+
+const emit = defineEmits<{
+  restored: []
+}>()
+
+const { canEdit } = usePermissions()
+const canRestore = computed(() => canEdit.value)
+
+const { versions, loading, error, fetchVersions, fetchPreview, restore } = useEntityVersions({
+  entityType: props.entityType,
+  entityId: props.entityId,
+})
+
+const currentVersion = computed(() => {
+  if (versions.value.length === 0) return null
+  return versions.value[0]?.version ?? null
+})
+
+const modalVisible = ref(false)
+const previewData = ref<RestorePreview | null>(null)
+const restoring = ref(false)
+const targetVersion = ref<number | null>(null)
+
+const actionLabel = (action: string) => historyActionLabel(action)
+const formatDate = (date: string) => formatHistoryDate(date)
+
+const formatDiffEntry = (field: string, change: { from: unknown; to: unknown }): string => {
+  const label = props.fieldLabels[field] || field
+  // Link changes (addedComponent, removedPiece, etc.) have {id, name} as value
+  const val = change.to ?? change.from
+  if (val && typeof val === 'object' && 'name' in (val as Record<string, unknown>)) {
+    return `${label}: ${(val as Record<string, unknown>).name}`
+  }
+  return label
+}
+
+const handleRestore = async (version: number) => {
+  targetVersion.value = version
+  previewData.value = null
+  modalVisible.value = true
+  previewData.value = await fetchPreview(version)
+}
+
+const confirmRestore = async () => {
+  if (!targetVersion.value) return
+  restoring.value = true
+  const result = await restore(targetVersion.value)
+  restoring.value = false
+  if (result?.success) {
+    modalVisible.value = false
+    await fetchVersions()
+    emit('restored')
+  }
+  else {
+    error.value = 'La restauration a echoue.'
+    modalVisible.value = false
+  }
+}
+
+onMounted(() => {
+  fetchVersions()
+})
+
+// Auto-refresh when parent signals a data change
+watch(toRef(props, 'refreshKey'), () => {
+  fetchVersions()
+})
+</script>

app/components/common/RequirementListEditor.vue

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

app/components/common/SearchSelect.vue

@@ -41,11 +41,11 @@
           v-if="openDropdown"
           class="absolute z-30 mt-1 w-full max-h-60 overflow-y-auto bg-base-100 border border-base-200 rounded-box shadow-lg"
         >
-          <div v-if="loading" class="flex items-center gap-2 px-3 py-2 text-xs text-gray-500">
+          <div v-if="loading" class="flex items-center gap-2 px-3 py-2 text-xs text-base-content/50">
             <span class="loading loading-spinner loading-xs" />
             Recherche en cours…
           </div>
-          <div v-else-if="displayedOptions.length === 0" class="px-3 py-2 text-xs text-gray-500">
+          <div v-else-if="displayedOptions.length === 0" class="px-3 py-2 text-xs text-base-content/50">
             {{ emptyText }}
           </div>
           <ul v-else class="flex flex-col">
@@ -69,7 +69,7 @@
                     {{ resolveLabel(option) }}
                   </slot>
                 </span>
-                <span v-if="resolveDescription(option)" class="text-xs text-gray-500">
+                <span v-if="$slots['option-description'] || resolveDescription(option)" class="text-xs text-base-content/50">
                   <slot name="option-description" :option="option">
                     {{ resolveDescription(option) }}
                   </slot>
@@ -133,6 +133,10 @@ const props = defineProps({
   maxVisible: {
     type: Number,
     default: 50
+  },
+  serverSearch: {
+    type: Boolean,
+    default: false
   }
 })
 
@@ -150,11 +154,11 @@ const selectedOption = computed(() => {
 })
 
 const displayedOptions = computed(() => {
-  const term = searchTerm.value.trim().toLowerCase()
   const items = baseOptions.value.slice()
 
-  const filtered = term
+  const filtered = (!props.serverSearch && searchTerm.value.trim())
     ? items.filter((option) => {
+      const term = searchTerm.value.trim().toLowerCase()
       const label = resolveLabel(option).toLowerCase()
       const description = resolveDescription(option)?.toLowerCase() || ''
       return label.includes(term) || description.includes(term)

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/common/VersionRestoreModal.vue

@@ -0,0 +1,198 @@
+<template>
+  <dialog ref="dialogRef" class="modal" :class="{ 'modal-open': visible }">
+    <div class="modal-box max-w-lg">
+      <h3 class="text-lg font-bold">Restaurer la version {{ preview?.version }}</h3>
+
+      <div v-if="!preview" class="flex justify-center py-8">
+        <span class="loading loading-spinner loading-md" />
+      </div>
+
+      <template v-else>
+        <div class="mt-4 space-y-4">
+          <!-- Restore mode explanation -->
+          <div
+            class="alert text-sm"
+            :class="preview.restoreMode === 'full' ? 'alert-info' : 'alert-warning'"
+          >
+            <div class="flex flex-col gap-1">
+              <!-- FULL MODE -->
+              <template v-if="preview.restoreMode === 'full'">
+                <span class="font-semibold">Restauration complete</span>
+
+                <!-- Machine: always full, no category -->
+                <template v-if="entityType === 'machine'">
+                  <span>Tous les elements de la machine seront restaures :</span>
+                  <ul class="ml-4 list-disc text-xs">
+                    <li>Nom, reference, prix</li>
+                    <li>Site</li>
+                    <li>Fournisseurs</li>
+                    <li>Composants, pieces et produits lies</li>
+                    <li>Champs personnalises</li>
+                  </ul>
+                </template>
+
+                <!-- Composant -->
+                <template v-else-if="entityType === 'composant'">
+                  <span>La categorie est identique. Tous les elements du composant seront restaures :</span>
+                  <ul class="ml-4 list-disc text-xs">
+                    <li>Nom, reference, description, prix</li>
+                    <li>Fournisseurs</li>
+                    <li>Structure : pieces, sous-composants et produits lies</li>
+                    <li>Champs personnalises</li>
+                  </ul>
+                </template>
+
+                <!-- Piece -->
+                <template v-else-if="entityType === 'piece'">
+                  <span>La categorie est identique. Tous les elements de la piece seront restaures :</span>
+                  <ul class="ml-4 list-disc text-xs">
+                    <li>Nom, reference, description, prix</li>
+                    <li>Fournisseurs</li>
+                    <li>Produits lies</li>
+                    <li>Champs personnalises</li>
+                  </ul>
+                </template>
+
+                <!-- Product -->
+                <template v-else-if="entityType === 'product'">
+                  <span>La categorie est identique. Tous les elements du produit seront restaures :</span>
+                  <ul class="ml-4 list-disc text-xs">
+                    <li>Nom, reference, prix fournisseur</li>
+                    <li>Fournisseurs</li>
+                    <li>Champs personnalises</li>
+                  </ul>
+                </template>
+              </template>
+
+              <!-- PARTIAL MODE (never for machines) -->
+              <template v-else>
+                <span class="font-semibold">Restauration partielle</span>
+
+                <!-- Composant -->
+                <template v-if="entityType === 'composant'">
+                  <span>La categorie du composant a change depuis cette version. Seuls les champs de base seront restaures :</span>
+                  <ul class="ml-4 list-disc text-xs">
+                    <li>Nom, reference, description, prix</li>
+                    <li>Fournisseurs</li>
+                  </ul>
+                  <span class="mt-1 text-xs font-medium">Ne seront PAS modifies :</span>
+                  <ul class="ml-4 list-disc text-xs opacity-70">
+                    <li>Structure actuelle (pieces, sous-composants, produits lies)</li>
+                    <li>Champs personnalises actuels</li>
+                  </ul>
+                </template>
+
+                <!-- Piece -->
+                <template v-else-if="entityType === 'piece'">
+                  <span>La categorie de la piece a change depuis cette version. Seuls les champs de base seront restaures :</span>
+                  <ul class="ml-4 list-disc text-xs">
+                    <li>Nom, reference, description, prix</li>
+                    <li>Fournisseurs</li>
+                  </ul>
+                  <span class="mt-1 text-xs font-medium">Ne seront PAS modifies :</span>
+                  <ul class="ml-4 list-disc text-xs opacity-70">
+                    <li>Produits lies actuels</li>
+                    <li>Champs personnalises actuels</li>
+                  </ul>
+                </template>
+
+                <!-- Product -->
+                <template v-else-if="entityType === 'product'">
+                  <span>La categorie du produit a change depuis cette version. Seuls les champs de base seront restaures :</span>
+                  <ul class="ml-4 list-disc text-xs">
+                    <li>Nom, reference, prix fournisseur</li>
+                    <li>Fournisseurs</li>
+                  </ul>
+                  <span class="mt-1 text-xs font-medium">Ne seront PAS modifies :</span>
+                  <ul class="ml-4 list-disc text-xs opacity-70">
+                    <li>Champs personnalises actuels</li>
+                  </ul>
+                </template>
+              </template>
+            </div>
+          </div>
+
+          <!-- Diff -->
+          <div v-if="Object.keys(preview.diff).length" class="space-y-2">
+            <h4 class="text-sm font-semibold">Changements qui seront appliques</h4>
+            <ul class="space-y-1 text-sm">
+              <li
+                v-for="(change, field) in preview.diff"
+                :key="field"
+                class="flex flex-col rounded-md border border-base-200 px-3 py-2"
+              >
+                <span class="font-medium text-base-content">{{ fieldLabels[field] || formatFieldLabel(String(field)) }}</span>
+                <span class="text-xs text-error line-through">{{ formatValue(change.current) }}</span>
+                <span class="text-xs text-success">{{ formatValue(change.restored) }}</span>
+              </li>
+            </ul>
+          </div>
+
+          <div v-else class="text-sm text-base-content/60">
+            Aucune difference detectee — l'entite est deja dans l'etat de cette version.
+          </div>
+
+          <!-- Warnings -->
+          <div v-if="preview.warnings.length" class="space-y-1">
+            <h4 class="text-sm font-semibold text-warning">Avertissements</h4>
+            <ul class="space-y-1">
+              <li
+                v-for="(warning, i) in preview.warnings"
+                :key="i"
+                class="alert alert-warning py-2 text-xs"
+              >
+                {{ warning.message }}
+              </li>
+            </ul>
+          </div>
+        </div>
+
+        <div class="modal-action">
+          <button class="btn btn-ghost btn-sm md:btn-md" :disabled="restoring" @click="$emit('close')">
+            Annuler
+          </button>
+          <button class="btn btn-primary btn-sm md:btn-md" :disabled="restoring" @click="$emit('confirm')">
+            <span v-if="restoring" class="loading loading-spinner loading-sm mr-2" />
+            Confirmer la restauration
+          </button>
+        </div>
+      </template>
+    </div>
+    <form method="dialog" class="modal-backdrop" @click="$emit('close')">
+      <button type="button">close</button>
+    </form>
+  </dialog>
+</template>
+
+<script setup lang="ts">
+import type { RestorePreview } from '~/composables/useEntityVersions'
+
+defineProps<{
+  visible: boolean
+  preview: RestorePreview | null
+  restoring: boolean
+  fieldLabels: Record<string, string>
+  entityType: 'machine' | 'composant' | 'piece' | 'product'
+}>()
+
+defineEmits<{
+  close: []
+  confirm: []
+}>()
+
+const formatFieldLabel = (field: string): string => {
+  if (field.startsWith('customField:')) {
+    return `Champ perso : ${field.replace('customField:', '')}`
+  }
+  return field
+}
+
+const formatValue = (value: unknown): string => {
+  if (value === null || value === undefined) return '—'
+  if (Array.isArray(value)) {
+    return value.map((v) => (typeof v === 'object' && v !== null ? (v as any).name || (v as any).id || JSON.stringify(v) : String(v))).join(', ') || '—'
+  }
+  if (typeof value === 'object') return JSON.stringify(value)
+  return String(value)
+}
+</script>

app/components/form/FieldPhone.vue

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

app/components/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/AddEntityToMachineModal.vue

@@ -44,6 +44,8 @@
           :empty-text="`Aucun ${entityLabelLower} disponible dans cette catégorie`"
           :option-label="entityOptionLabel"
           :option-description="entityOptionDescription"
+          server-search
+          @search="handleEntitySearch"
         />
       </div>
 
@@ -145,7 +147,10 @@ const selectedTypeName = computed(() => {
   return found?.name || ''
 })
 
-const entityOptionLabel = (e: any) => e.name || '(sans nom)'
+const entityOptionLabel = (e: any) => {
+  const name = e.name || '(sans nom)'
+  return e.reference ? `${name} — ${e.reference}` : name
+}
 const entityOptionDescription = (e: any) => e.reference || ''
 
 const selectedEntitySummary = computed(() => {
@@ -187,6 +192,30 @@ watch(selectedTypeId, async () => {
   }
 })
 
+let searchDebounce: ReturnType<typeof setTimeout> | null = null
+
+const handleEntitySearch = (term: string) => {
+  if (searchDebounce) clearTimeout(searchDebounce)
+  searchDebounce = setTimeout(async () => {
+    if (!selectedTypeName.value) return
+    loadingEntities.value = true
+    try {
+      if (props.entityKind === 'component') {
+        const result = await loadComposants({ typeName: selectedTypeName.value, search: term.trim(), itemsPerPage: 200 })
+        entities.value = result?.data?.items || []
+      } else if (props.entityKind === 'piece') {
+        const result = await loadPieces({ typeName: selectedTypeName.value, search: term.trim(), itemsPerPage: 200 })
+        entities.value = result?.data?.items || []
+      } else {
+        const result = await loadProducts({ typeName: selectedTypeName.value, search: term.trim(), itemsPerPage: 200 })
+        entities.value = result?.data?.items || []
+      }
+    } finally {
+      loadingEntities.value = false
+    }
+  }, 300)
+}
+
 const handleClose = () => {
   resetState()
   emit('close')

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,112 @@
+<template>
+  <section class="space-y-3">
+    <h3 class="text-sm font-semibold">
+      Définitions des champs personnalisés
+    </h3>
+
+    <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<{
+  '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/MachineDetailHeader.vue

@@ -32,6 +32,9 @@
         <IconLucidePrinter class="w-5 h-5 mr-2" aria-hidden="true" />
         Imprimer
       </button>
+      <button type="button" class="btn btn-ghost btn-sm md:btn-md" @click="goBack">
+        Retour aux machines
+      </button>
     </div>
   </div>
 </template>
@@ -41,6 +44,8 @@ import IconLucideSquarePen from '~icons/lucide/square-pen'
 import IconLucideEye from '~icons/lucide/eye'
 import IconLucidePrinter from '~icons/lucide/printer'
 
+const router = useRouter()
+
 defineProps<{
   title: string
   isEditMode: boolean
@@ -50,4 +55,13 @@ defineEmits<{
   'toggle-edit': []
   'open-print': []
 }>()
+
+function goBack() {
+  if (window.history.length > 1) {
+    router.back()
+  }
+  else {
+    navigateTo('/machines')
+  }
+}
 </script>

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">
@@ -14,12 +14,34 @@
             type="text"
             class="input input-bordered"
             @input="$emit('update:machine-name', ($event.target as HTMLInputElement).value)"
-            @blur="$emit('blur-field')"
           />
           <div v-else class="input input-bordered bg-base-200">
             {{ 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)"
+          >
+            <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>
@@ -31,13 +53,12 @@
             type="text"
             class="input input-bordered"
             @input="$emit('update:machine-reference', ($event.target as HTMLInputElement).value)"
-            @blur="$emit('blur-field')"
           />
           <div v-else class="input input-bordered bg-base-200">
             {{ machineReference }}
           </div>
         </div>
-        <div v-if="isEditMode || hasMachineConstructeur" class="form-control">
+        <div v-if="isEditMode || hasMachineConstructeur" class="form-control md:col-span-2">
           <label class="label">
             <span class="label-text">Fournisseur</span>
           </label>
@@ -49,30 +70,22 @@
             placeholder="Rechercher un ou plusieurs fournisseurs..."
             @update:modelValue="$emit('update:constructeur-ids', $event)"
           />
-          <div v-else class="input input-bordered bg-base-200">
+          <ConstructeurLinksTable
-            <div v-if="machineConstructeursDisplay.length" class="space-y-1">
+            v-if="constructeurLinks.length"
-              <div
+            :model-value="constructeurLinks"
-                v-for="constructeur in machineConstructeursDisplay"
+            :readonly="!isEditMode"
-                :key="constructeur.id"
+            @update:model-value="$emit('update:constructeur-links', $event)"
-                class="flex flex-col"
+            @remove="$emit('remove-constructeur-link', $event)"
-              >
+          />
-                <span class="font-medium">{{ constructeur.name }}</span>
+          <div v-else-if="!isEditMode" class="border border-base-300 rounded-btn bg-base-200 px-4 py-2 min-h-12 flex items-center">
-                <span
+            <span class="text-base-content/50">Non défini</span>
-                  v-if="formatConstructeurContactSummary(constructeur)"
-                  class="text-xs text-gray-500"
-                >
-                  {{ formatConstructeurContactSummary(constructeur) }}
-                </span>
-              </div>
-            </div>
-            <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"
@@ -92,7 +105,6 @@
                 class="input input-bordered input-sm"
                 :required="field.required"
                 @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'"
@@ -101,7 +113,6 @@
                 class="input input-bordered input-sm"
                 :required="field.required"
                 @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'"
@@ -109,7 +120,6 @@
                 class="select select-bordered select-sm"
                 :required="field.required"
                 @change="$emit('set-custom-field-value', field, ($event.target as HTMLSelectElement).value)"
-                @blur="$emit('update-custom-field', field)"
               >
                 <option value="">Sélectionner...</option>
                 <option
@@ -126,7 +136,6 @@
                   class="toggle toggle-primary toggle-sm"
                   :checked="String(field.value).toLowerCase() === 'true'"
                   @change="$emit('set-custom-field-value', field, ($event.target as HTMLInputElement).checked ? 'true' : 'false')"
-                  @blur="$emit('update-custom-field', field)"
                 >
                 <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>
@@ -137,7 +146,6 @@
                 class="input input-bordered input-sm"
                 :required="field.required"
                 @input="$emit('set-custom-field-value', field, ($event.target as HTMLInputElement).value)"
-                @blur="$emit('update-custom-field', field)"
               />
               <div v-else class="text-xs text-error">
                 Type de champ non pris en charge
@@ -151,34 +159,72 @@
           </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"
+          @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 {
+import ConstructeurLinksTable from '~/components/ConstructeurLinksTable.vue'
-  formatConstructeurContact as formatConstructeurContactSummary,
+import MachineCustomFieldDefEditor from '~/components/machine/MachineCustomFieldDefEditor.vue'
-} from '~/shared/constructeurUtils'
 import { formatCustomFieldValue } from '~/shared/utils/customFieldUtils'
+import { useMachineCustomFieldDefs } from '~/composables/useMachineCustomFieldDefs'
+import type { ConstructeurLinkEntry } from '~/shared/constructeurUtils'
 
-defineProps<{
+const props = defineProps<{
   isEditMode: boolean
   machineName: string
   machineReference: string
+  machineSiteId: string
+  machineSiteName: string
+  sites: any[]
   machineConstructeurIds: string[]
   machineConstructeursDisplay: any[]
   hasMachineConstructeur: boolean
+  constructeurLinks: ConstructeurLinkEntry[]
   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': []
+  'update:constructeur-links': [links: ConstructeurLinkEntry[]]
+  'remove-constructeur-link': [constructeurId: string]
   '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 })
+
+defineExpose({
+  saveFieldDefinitions: () => fieldDefs.saveDefinitions(),
+})
 </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,29 +103,17 @@
             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
+    <ReferenceFormulaBuilder
-      v-if="restrictedMode && restrictedModeMessage"
+      v-if="form.category === 'PIECE' || form.category === 'COMPONENT'"
-      class="alert alert-info"
+      v-model="form.referenceFormula"
-      role="status"
+      :custom-fields="formulaBuilderCustomFields"
-      aria-live="polite"
+      :disabled="isReadonly"
-    >
+    />
-      <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')">
@@ -172,10 +157,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 +165,6 @@ const props = withDefaults(defineProps<{
   structureLoading: false,
   allowComponentSubcomponents: true,
   componentSubcomponentMaxDepth: 1,
-  disableSubmit: false,
-  disableSubmitMessage: '',
-  restrictedMode: false,
-  restrictedModeMessage: '',
   readonly: false,
 })
 
@@ -205,28 +182,35 @@ 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>({
+const form = reactive<ModelTypePayload & { referenceFormula?: string | null }>({
   name: '',
   code: '',
   category: props.initialCategory,
   notes: '',
   structure: undefined,
+  referenceFormula: null,
 })
 
+const formulaBuilderCustomFields = computed(() => {
+  if (form.category === 'PIECE') {
+    const fields = pieceStructure.value?.customFields
+    return Array.isArray(fields) ? fields : []
+  }
+  if (form.category === 'COMPONENT') {
+    const fields = componentStructure.value?.customFields
+    return Array.isArray(fields) ? fields : []
+  }
+  return []
+})
+
+const extractFormulaFields = (formula: string | null | undefined): string[] => {
+  if (!formula) return []
+  const matches = [...formula.matchAll(/\{(\w+)\}/g)]
+  return [...new Set(matches.map(m => m[1]).filter((n): n is string => n !== undefined))]
+}
+
 const errors = reactive<{ name?: string }>({})
 const nameInput = ref<HTMLInputElement | null>(null)
 
@@ -290,11 +274,14 @@ const resetForm = () => {
 
   errors.name = undefined
 
+  const incomingAny = incoming as Record<string, unknown>
+  form.referenceFormula = typeof incomingAny.referenceFormula === 'string' ? incomingAny.referenceFormula : null
+
   resetStructures(incoming.structure, form.category)
 }
 
 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
@@ -328,20 +315,28 @@ const handleSubmit = () => {
   }
 
   if (form.category === 'COMPONENT') {
+    const formula = form.referenceFormula || null
+    const requiredFields = extractFormulaFields(formula)
     emit('submit', {
       ...common,
       category: 'COMPONENT',
       structure: normalizeStructureForSave(cloneStructure(componentStructure.value)),
-    })
+      referenceFormula: formula,
+      requiredFieldsForReference: requiredFields.length ? requiredFields : null,
+    } as ModelTypePayload)
     return
   }
 
   if (form.category === 'PIECE') {
+    const formula = form.referenceFormula || null
+    const requiredFields = extractFormulaFields(formula)
     emit('submit', {
       ...common,
       category: 'PIECE',
       structure: normalizePieceStructureForSave(clonePieceStructure(pieceStructure.value)),
-    })
+      referenceFormula: formula,
+      requiredFieldsForReference: requiredFields.length ? requiredFields : null,
+    } as ModelTypePayload)
     return
   }
 

app/components/model-types/ReferenceFormulaBuilder.vue

@@ -0,0 +1,115 @@
+<template>
+  <section class="space-y-4">
+    <header>
+      <h3 class="text-lg font-semibold text-base-content">Génération de référence automatique</h3>
+      <p class="mt-1 text-sm text-base-content/70">
+        Cliquez sur un champ pour l'insérer dans la formule. Vous pouvez aussi taper du texte libre (séparateurs, préfixes…).
+      </p>
+    </header>
+
+    <div class="rounded-lg border border-base-300 p-4 space-y-4">
+      <div v-if="fieldNames.length" class="flex flex-wrap gap-2">
+        <button
+          v-for="name in fieldNames"
+          :key="name"
+          type="button"
+          class="btn btn-xs btn-outline btn-primary font-mono"
+          :disabled="disabled"
+          @click="insertField(name)"
+        >
+          {{ name }}
+        </button>
+      </div>
+      <p v-else class="text-sm text-base-content/50 italic">
+        Aucun champ personnalisé défini dans la structure.
+      </p>
+
+      <div>
+        <label class="label" for="reference-formula">
+          <span class="label-text">Formule</span>
+        </label>
+        <input
+          id="reference-formula"
+          ref="inputRef"
+          :value="modelValue"
+          type="text"
+          class="input input-bordered w-full font-mono"
+          placeholder="Ex: SNU {serie}-{diametre}/{type}"
+          :disabled="disabled"
+          @input="emit('update:modelValue', ($event.target as HTMLInputElement).value || null)"
+        />
+        <p class="mt-1 text-xs text-base-content/60">
+          Laissez vide si ce type n'utilise pas de référence automatique.
+        </p>
+      </div>
+
+      <div v-if="modelValue" class="rounded bg-base-200 px-3 py-2 text-sm">
+        <span class="text-base-content/70">Aperçu :</span>
+        <span class="ml-1 font-mono font-semibold">{{ preview }}</span>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, ref } from 'vue'
+
+interface CustomField {
+  name: string
+  type: string
+}
+
+const props = defineProps<{
+  modelValue: string | null | undefined
+  customFields: CustomField[]
+  disabled?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string | null): void
+}>()
+
+const inputRef = ref<HTMLInputElement | null>(null)
+
+const fieldNames = computed(() =>
+  props.customFields.map(f => f.name).filter((n): n is string => Boolean(n)),
+)
+
+const previewExamples: Record<string, string> = {
+  text: 'VALEUR',
+  number: '123',
+  select: 'OPTION',
+  boolean: 'OUI',
+  date: '2026-01-01',
+}
+
+const preview = computed(() => {
+  if (!props.modelValue) return ''
+  const fieldMap = new Map<string, string>()
+  for (const f of props.customFields) {
+    if (f.name) {
+      fieldMap.set(f.name, previewExamples[f.type] ?? 'VALEUR')
+    }
+  }
+  return props.modelValue.replace(/\{(\w+)\}/g, (_, name) => fieldMap.get(name) ?? '???')
+})
+
+const insertField = (fieldName: string) => {
+  const placeholder = `{${fieldName}}`
+  const input = inputRef.value
+  const current = props.modelValue ?? ''
+  if (!input) {
+    emit('update:modelValue', current + placeholder)
+    return
+  }
+  const start = input.selectionStart ?? current.length
+  const end = input.selectionEnd ?? start
+  const updated = current.slice(0, start) + placeholder + current.slice(end)
+  emit('update:modelValue', updated)
+  nextTick(() => {
+    const newPos = start + placeholder.length
+    input.focus()
+    input.setSelectionRange(newPos, newPos)
+  })
+}
+</script>

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

@@ -3,6 +3,18 @@ import { useApi } from './useApi'
 import { useToast } from './useToast'
 import { extractCollection } from '~/shared/utils/apiHelpers'
 
+export interface CommentDocument {
+  id: string
+  name: string
+  filename: string
+  mimeType: string
+  size: number
+  type: string
+  fileUrl: string
+  downloadUrl: string
+  createdAt: string
+}
+
 export interface Comment {
   id: string
   content: string
@@ -17,6 +29,7 @@ export interface Comment {
   resolvedAt?: string | null
   createdAt: string
   updatedAt: string
+  documents?: CommentDocument[]
 }
 
 interface CommentResult {
@@ -33,7 +46,7 @@ interface CommentListResult {
 }
 
 export function useComments() {
-  const { get, post, patch, delete: del } = useApi()
+  const { get, post, patch, postFormData, delete: del } = useApi()
   const { showSuccess, showError } = useToast()
   const loading = ref(false)
 
@@ -44,16 +57,9 @@ export function useComments() {
   ): Promise<CommentListResult> => {
     loading.value = true
     try {
-      const params = new URLSearchParams({
+      const result = await get<Comment[]>(`/comments/by-entity/${entityType}/${entityId}?status=${status}`)
-        entityType,
-        entityId,
-        status,
-        'order[createdAt]': 'desc',
-        itemsPerPage: '200',
-      })
-      const result = await get(`/comments?${params.toString()}`)
       if (result.success) {
-        const items = extractCollection<Comment>(result.data)
+        const items = (result.data ?? []) as Comment[]
         return { success: true, data: items }
       }
       return { success: false, error: result.error }
@@ -80,18 +86,15 @@ export function useComments() {
       if (options.status) params.set('status', options.status)
       if (options.entityType) params.set('entityType', options.entityType)
       if (options.entityName) params.set('entityName', options.entityName)
-      const sortField = options.orderBy || 'createdAt'
+      params.set('sort', options.orderBy || 'createdAt')
-      const sortDir = options.orderDir || 'desc'
+      params.set('direction', options.orderDir || 'desc')
-      params.set(`order[${sortField}]`, sortDir)
       params.set('itemsPerPage', String(options.itemsPerPage || 30))
       params.set('page', String(options.page || 1))
 
-      const result = await get(`/comments?${params.toString()}`)
+      const result = await get<{ items: Comment[]; total: number }>(`/comments/search/list?${params.toString()}`)
-      if (result.success) {
+      if (result.success && result.data) {
-        const items = extractCollection<Comment>(result.data)
+        const data = result.data as { items: Comment[]; total: number }
-        const raw = result.data as Record<string, unknown> | null
+        return { success: true, data: data.items, total: data.total }
-        const total = Number(raw?.['hydra:totalItems'] ?? raw?.totalItems ?? items.length)
-        return { success: true, data: items, total }
       }
       return { success: false, error: result.error }
     } catch (error) {
@@ -107,12 +110,26 @@ export function useComments() {
     entityId: string,
     content: string,
     entityName?: string,
+    files?: File[],
   ): Promise<CommentResult> => {
     loading.value = true
     try {
+      let result
+      if (files && files.length > 0) {
+        const formData = new FormData()
+        formData.append('content', content)
+        formData.append('entityType', entityType)
+        formData.append('entityId', entityId)
+        if (entityName) formData.append('entityName', entityName)
+        for (const file of files) {
+          formData.append('files[]', file)
+        }
+        result = await postFormData('/comments', formData)
+      } else {
         const payload: Record<string, string> = { entityType, entityId, content }
         if (entityName) payload.entityName = entityName
-      const result = await post('/comments', payload)
+        result = await post('/comments', payload)
+      }
       if (result.success) {
         showSuccess('Commentaire ajouté')
         return { success: true, data: result.data as Comment }

app/composables/useComponentCreate.ts

@@ -0,0 +1,426 @@
+/**
+ * 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 { useConstructeurLinks } from '~/composables/useConstructeurLinks'
+import { uniqueConstructeurIds, constructeurIdsFromLinks } from '~/shared/constructeurUtils'
+import type { ConstructeurLinkEntry } 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 { syncLinks } = useConstructeurLinks()
+  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 constructeurLinks = ref<ConstructeurLinkEntry[]>([])
+  const constructeurIdsFromForm = computed(() => constructeurIdsFromLinks(constructeurLinks.value))
+  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(
+    () => !submitting.value && (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
+    }
+
+    // constructeurIds are handled via link entities, not in the main payload
+
+    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?.structure?.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 = []
+        }
+        // Sync constructeur links after creation
+        if (constructeurLinks.value.length) {
+          await syncLinks('composant', createdComponent.id, [], constructeurLinks.value)
+        }
+        toast.showSuccess('Composant créé avec succès')
+        await router.replace(`/component/${createdComponent.id}?edit=true`)
+      }
+      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,
+    constructeurLinks,
+    constructeurIdsFromForm,
+    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,597 @@
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { useRouter } from '#imports'
+import { useComponentTypes } from '~/composables/useComponentTypes'
+import { useComposants } from '~/composables/useComposants'
+import { usePieceTypes } from '~/composables/usePieceTypes'
+import { useProductTypes } from '~/composables/useProductTypes'
+import { usePieces } from '~/composables/usePieces'
+import { useProducts } from '~/composables/useProducts'
+import { useCustomFields } from '~/composables/useCustomFields'
+import { useApi } from '~/composables/useApi'
+import { useToast } from '~/composables/useToast'
+import { extractRelationId } from '~/shared/apiRelations'
+import { useDocuments } from '~/composables/useDocuments'
+import { useConstructeurs } from '~/composables/useConstructeurs'
+import { useConstructeurLinks } from '~/composables/useConstructeurLinks'
+import { useComponentHistory } from '~/composables/useComponentHistory'
+import { formatStructurePreview, normalizeStructureForEditor } from '~/shared/modelUtils'
+import { uniqueConstructeurIds, constructeurIdsFromLinks } from '~/shared/constructeurUtils'
+import type { ConstructeurLinkEntry } 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, composants: componentCatalogRef } = useComposants()
+  const { pieces } = usePieces()
+  const { products } = useProducts()
+  const { ensureConstructeurs } = useConstructeurs()
+  const { fetchLinks, syncLinks } = useConstructeurLinks()
+  const { upsertCustomFieldValue, updateCustomFieldValue } = useCustomFields()
+  const toast = useToast()
+  const { loadDocumentsByComponent, uploadDocuments, deleteDocument } = useDocuments()
+  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 constructeurLinks = ref<ConstructeurLinkEntry[]>([])
+  const originalConstructeurLinks = ref<ConstructeurLinkEntry[]>([])
+  const constructeurIdsFromForm = computed(() => constructeurIdsFromLinks(constructeurLinks.value))
+
+  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 local edits (saved on submit, not auto-saved) ---
+
+  const slotEdits = reactive<{
+    pieces: Record<string, { selectedPieceId?: string | null, quantity?: number }>
+    products: Record<string, { selectedProductId?: string | null }>
+    subcomponents: Record<string, { selectedComposantId?: string | null }>
+  }>({ pieces: {}, products: {}, subcomponents: {} })
+
+  const pieceSlotEntries = computed(() => {
+    const structure = component.value?.structure
+    if (!structure?.pieces) return []
+    return (structure.pieces as any[]).map((slot: any, i: number) => {
+      const edits = slotEdits.pieces[slot.slotId]
+      return {
+        slotId: slot.slotId,
+        typePieceId: slot.typePieceId,
+        selectedPieceId: edits && 'selectedPieceId' in edits ? edits.selectedPieceId : (slot.selectedPieceId ?? null),
+        selectedPieceName: slot.selectedPieceName ?? null,
+        quantity: edits && 'quantity' in edits ? edits.quantity! : (slot.quantity ?? 1),
+        position: slot.position ?? i,
+        label: pieceTypeLabelMap.value[slot.typePieceId] || `Pièce #${i + 1}`,
+      }
+    })
+  })
+
+  const productSlotEntries = computed(() => {
+    const structure = component.value?.structure
+    if (!structure?.products) return []
+    return (structure.products as any[]).map((slot: any, i: number) => {
+      const edits = slotEdits.products[slot.slotId]
+      return {
+        slotId: slot.slotId,
+        typeProductId: slot.typeProductId,
+        selectedProductId: edits && 'selectedProductId' in edits ? edits.selectedProductId : (slot.selectedProductId ?? null),
+        selectedProductName: slot.selectedProductName ?? null,
+        familyCode: slot.familyCode,
+        position: slot.position ?? i,
+        label: productTypeLabelMap.value[slot.typeProductId] || `Produit #${i + 1}`,
+      }
+    })
+  })
+
+  const subcomponentSlotEntries = computed(() => {
+    const structure = component.value?.structure
+    if (!structure?.subcomponents) return []
+    return (structure.subcomponents as any[]).map((slot: any, i: number) => {
+      const edits = slotEdits.subcomponents[slot.slotId]
+      return {
+        slotId: slot.slotId,
+        typeComposantId: slot.typeComposantId,
+        selectedComponentId: edits && 'selectedComposantId' in edits ? edits.selectedComposantId : (slot.selectedComponentId ?? null),
+        selectedComponentName: slot.selectedComponentName ?? null,
+        alias: slot.alias,
+        familyCode: slot.familyCode,
+        position: slot.position ?? i,
+        label: slot.alias || `Sous-composant #${i + 1}`,
+      }
+    })
+  })
+
+  const setPieceSlotSelection = (slotId: string, selectedPieceId: string | null) => {
+    slotEdits.pieces[slotId] = { ...slotEdits.pieces[slotId], selectedPieceId }
+  }
+
+  const setProductSlotSelection = (slotId: string, selectedProductId: string | null) => {
+    slotEdits.products[slotId] = { ...slotEdits.products[slotId], selectedProductId }
+  }
+
+  const setSubcomponentSlotSelection = (slotId: string, selectedComposantId: string | null) => {
+    slotEdits.subcomponents[slotId] = { ...slotEdits.subcomponents[slotId], selectedComposantId }
+  }
+
+  const setSlotQuantity = (slotId: string, quantity: number) => {
+    if (!slotId || quantity < 1) return
+    slotEdits.pieces[slotId] = { ...slotEdits.pieces[slotId], quantity: Math.max(1, quantity) }
+  }
+
+  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
+
+    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?.structure?.customFields,
+          ],
+          { customFieldInputs, upsertCustomFieldValue, updateCustomFieldValue, toast },
+        )
+
+        // Save slot edits
+        const slotPromises: Promise<any>[] = []
+        for (const [slotId, edits] of Object.entries(slotEdits.pieces)) {
+          if (Object.keys(edits).length) {
+            slotPromises.push(patch(`/composant-piece-slots/${slotId}`, {
+              ...'selectedPieceId' in edits ? { selectedPieceId: edits.selectedPieceId } : {},
+              ...'quantity' in edits ? { quantity: edits.quantity } : {},
+            }))
+          }
+        }
+        for (const [slotId, edits] of Object.entries(slotEdits.products)) {
+          if ('selectedProductId' in edits) {
+            slotPromises.push(patch(`/composant-product-slots/${slotId}`, { selectedProductId: edits.selectedProductId }))
+          }
+        }
+        for (const [slotId, edits] of Object.entries(slotEdits.subcomponents)) {
+          if ('selectedComposantId' in edits) {
+            slotPromises.push(patch(`/composant-subcomponent-slots/${slotId}`, { selectedComposantId: edits.selectedComposantId }))
+          }
+        }
+        await Promise.all(slotPromises)
+
+        // Apply slot edits to local structure so UI reflects saved values
+        const structure = component.value?.structure
+        if (structure) {
+          for (const [slotId, edits] of Object.entries(slotEdits.pieces)) {
+            const slot = (structure.pieces as any[])?.find((s: any) => s.slotId === slotId)
+            if (slot) {
+              if ('selectedPieceId' in edits) slot.selectedPieceId = edits.selectedPieceId
+              if ('quantity' in edits) slot.quantity = edits.quantity
+            }
+          }
+          for (const [slotId, edits] of Object.entries(slotEdits.products)) {
+            const slot = (structure.products as any[])?.find((s: any) => s.slotId === slotId)
+            if (slot && 'selectedProductId' in edits) slot.selectedProductId = edits.selectedProductId
+          }
+          for (const [slotId, edits] of Object.entries(slotEdits.subcomponents)) {
+            const slot = (structure.subcomponents as any[])?.find((s: any) => s.slotId === slotId)
+            if (slot && 'selectedComposantId' in edits) slot.selectedComponentId = edits.selectedComposantId
+          }
+        }
+
+        // Reset local slot edits
+        slotEdits.pieces = {}
+        slotEdits.products = {}
+        slotEdits.subcomponents = {}
+
+        await syncLinks('composant', component.value.id, originalConstructeurLinks.value, constructeurLinks.value)
+        originalConstructeurLinks.value = constructeurLinks.value.map(l => ({ ...l }))
+
+        toast.showSuccess('Composant mis à jour avec succès.')
+      }
+    }
+    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 || ''
+        // Load constructeur links
+        fetchLinks('composant', componentId).then((links) => {
+          constructeurLinks.value = links
+          originalConstructeurLinks.value = links.map(l => ({ ...l }))
+          editionForm.constructeurIds = constructeurIdsFromLinks(links)
+          if (editionForm.constructeurIds.length) {
+            void ensureConstructeurs(editionForm.constructeurIds)
+          }
+        })
+        editionForm.prix = currentComponent.prix !== null && currentComponent.prix !== undefined ? String(currentComponent.prix) : ''
+
+        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
+  })
+
+  return {
+    // State
+    component,
+    loading,
+    saving,
+    selectedFiles,
+    uploadingDocuments,
+    loadingDocuments,
+    componentDocuments,
+    previewDocument,
+    previewVisible,
+    selectedTypeId,
+    editionForm,
+    constructeurLinks,
+    originalConstructeurLinks,
+    constructeurIdsFromForm,
+    customFieldInputs,
+    historyFieldLabels,
+
+    // Computed
+    canEdit,
+    canSubmit,
+    componentTypeList,
+    selectedType,
+    selectedTypeStructure,
+    structureSelections,
+    pieceSlotEntries,
+    productSlotEntries,
+    subcomponentSlotEntries,
+
+    // History
+    history,
+    historyLoading,
+    historyError,
+
+    // Methods
+    openPreview,
+    closePreview,
+    removeDocument,
+    handleFilesAdded,
+    refreshDocuments,
+    submitEdition,
+    fetchComponent,
+    setSlotQuantity,
+    setPieceSlotSelection,
+    setProductSlotSelection,
+    setSubcomponentSlotSelection,
+    resolvePieceLabel,
+    resolveProductLabel,
+    resolveSubcomponentLabel,
+    formatStructurePreview,
+  }
+}

app/composables/useComposants.ts

@@ -1,7 +1,7 @@
 import { ref } from 'vue'
 import { useToast } from './useToast'
 import { useApi } from './useApi'
-import { buildConstructeurRequestPayload, uniqueConstructeurIds } from '~/shared/constructeurUtils'
+import { uniqueConstructeurIds } from '~/shared/constructeurUtils'
 import { useConstructeurs, type Constructeur } from './useConstructeurs'
 import { extractRelationId, normalizeRelationIds } from '~/shared/apiRelations'
 import { extractCollection } from '~/shared/utils/apiHelpers'
@@ -42,6 +42,7 @@ interface LoadComposantsOptions {
   orderBy?: string
   orderDir?: 'asc' | 'desc'
   typeName?: string
+  typeComposantId?: string
   force?: boolean
 }
 
@@ -109,17 +110,18 @@ export function useComposants() {
       orderBy = 'name',
       orderDir = 'asc',
       typeName,
+      typeComposantId,
       force = false,
     } = options
 
-    if (!force && loaded.value && !search && !typeName && page === 1) {
+    if (!force && loaded.value && !search && !typeName && !typeComposantId && page === 1) {
       return {
         success: true,
         data: { items: composants.value, total: total.value, page, itemsPerPage },
       }
     }
 
-    if (loading.value) {
+    if (!typeComposantId && loading.value) {
       return {
         success: true,
         data: { items: composants.value, total: total.value, page, itemsPerPage },
@@ -128,33 +130,41 @@ export function useComposants() {
 
     loading.value = true
     try {
-
       const params = new URLSearchParams()
       params.set('itemsPerPage', String(itemsPerPage))
       params.set('page', String(page))
 
       if (search && search.trim()) {
-        params.set('name', search.trim())
+        params.set('search', search.trim())
       }
 
       if (typeName && typeName.trim()) {
         params.set('typeComposant.name', typeName.trim())
       }
 
+      if (typeComposantId) {
+        params.set('typeComposant', typeComposantId)
+      }
+
       params.set(`order[${orderBy}]`, orderDir)
 
       const result = await get(`/composants?${params.toString()}`)
       if (result.success) {
         const items = extractCollection(result.data)
         const enrichedItems = await Promise.all(items.map((item) => withResolvedConstructeurs(item)))
+        const resultTotal = extractTotal(result.data, items.length)
+
+        if (!typeComposantId) {
           composants.value = enrichedItems
-        total.value = extractTotal(result.data, items.length)
+          total.value = resultTotal
           loaded.value = true
+        }
+
         return {
           success: true,
           data: {
             items: enrichedItems,
-            total: total.value,
+            total: resultTotal,
             page,
             itemsPerPage,
           },
@@ -172,7 +182,8 @@ export function useComposants() {
   const createComposant = async (composantData: Partial<Composant>): Promise<ComposantSingleResult> => {
     loading.value = true
     try {
-      const normalizedPayload = normalizeRelationIds(buildConstructeurRequestPayload(composantData))
+      const { constructeurIds, constructeurs, constructeurId, constructeur, ...cleanPayload } = composantData as any
+      const normalizedPayload = normalizeRelationIds(cleanPayload)
       const result = await post('/composants', normalizedPayload)
       if (result.success && result.data) {
         const enriched = await withResolvedConstructeurs(result.data as Composant)
@@ -199,7 +210,8 @@ export function useComposants() {
   const updateComposantData = async (id: string, composantData: Partial<Composant>): Promise<ComposantSingleResult> => {
     loading.value = true
     try {
-      const normalizedPayload = normalizeRelationIds(buildConstructeurRequestPayload(composantData))
+      const { constructeurIds, constructeurs, constructeurId, constructeur, ...cleanPayload } = composantData as any
+      const normalizedPayload = normalizeRelationIds(cleanPayload)
       const result = await patch(`/composants/${id}`, normalizedPayload)
       if (result.success && result.data) {
         const updated = await withResolvedConstructeurs(result.data as Composant)

app/composables/useConstructeurLinks.ts

@@ -0,0 +1,103 @@
+import { useApi } from '~/composables/useApi'
+import type { ConstructeurLinkEntry } from '~/shared/constructeurUtils'
+import { extractCollection } from '~/shared/utils/apiHelpers'
+
+type EntityType = 'machine' | 'piece' | 'composant' | 'product'
+
+const ENDPOINTS: Record<EntityType, string> = {
+  machine: '/machine_constructeur_links',
+  piece: '/piece_constructeur_links',
+  composant: '/composant_constructeur_links',
+  product: '/product_constructeur_links',
+}
+
+const ENTITY_KEYS: Record<EntityType, string> = {
+  machine: 'machine',
+  piece: 'piece',
+  composant: 'composant',
+  product: 'product',
+}
+
+const ENTITY_PLURALS: Record<EntityType, string> = {
+  machine: 'machines',
+  piece: 'pieces',
+  composant: 'composants',
+  product: 'products',
+}
+
+export function useConstructeurLinks() {
+  const { get, post, patch, delete: del } = useApi()
+
+  const fetchLinks = async (
+    entityType: EntityType,
+    entityId: string,
+  ): Promise<ConstructeurLinkEntry[]> => {
+    const endpoint = ENDPOINTS[entityType]
+    const key = ENTITY_KEYS[entityType]
+    const plural = ENTITY_PLURALS[entityType]
+    const url = `${endpoint}?${key}=/api/${plural}/${entityId}`
+    const result = await get(url)
+    if (!result.success || !result.data) return []
+
+    const members = extractCollection(result.data)
+    if (!Array.isArray(members)) return []
+
+    return members.map((link: any) => ({
+      linkId: link.id ?? (typeof link['@id'] === 'string' ? link['@id'].split('/').pop() : undefined),
+      constructeurId: typeof link.constructeur === 'string'
+        ? link.constructeur.split('/').pop()!
+        : link.constructeur?.id ?? '',
+      constructeur: typeof link.constructeur === 'object' ? link.constructeur : null,
+      supplierReference: link.supplierReference ?? null,
+    }))
+  }
+
+  const syncLinks = async (
+    entityType: EntityType,
+    entityId: string,
+    originalLinks: ConstructeurLinkEntry[],
+    formLinks: ConstructeurLinkEntry[],
+  ): Promise<void> => {
+    const endpoint = ENDPOINTS[entityType]
+    const key = ENTITY_KEYS[entityType]
+    const plural = ENTITY_PLURALS[entityType]
+    const entityIri = `/api/${plural}/${entityId}`
+
+    const originalMap = new Map(originalLinks.map(l => [l.constructeurId, l]))
+    const formMap = new Map(formLinks.map(l => [l.constructeurId, l]))
+
+    const promises: Promise<any>[] = []
+
+    // Delete removed links
+    for (const [cId, orig] of originalMap) {
+      if (!formMap.has(cId) && orig.linkId) {
+        promises.push(del(`${endpoint}/${orig.linkId}`))
+      }
+    }
+
+    // Create new links
+    for (const [cId, form] of formMap) {
+      if (!originalMap.has(cId)) {
+        promises.push(post(endpoint, {
+          [key]: entityIri,
+          constructeur: `/api/constructeurs/${cId}`,
+          supplierReference: form.supplierReference || null,
+        }))
+      }
+    }
+
+    // Patch modified supplierReference
+    for (const [cId, form] of formMap) {
+      const orig = originalMap.get(cId)
+      if (orig?.linkId && (orig.supplierReference ?? null) !== (form.supplierReference ?? null)) {
+        promises.push(patch(`${endpoint}/${orig.linkId}`, {
+          supplierReference: form.supplierReference || null,
+        }))
+      }
+    }
+
+    await Promise.allSettled(promises)
+  }
+
+  return { fetchLinks, syncLinks }
+}

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

@@ -1,4 +1,4 @@
-import { ref, computed, type Ref, type ComputedRef } from 'vue'
+import { ref, computed, watch, type Ref, type ComputedRef } from 'vue'
 import { useUrlState } from './useUrlState'
 import type { DataTableSort, DataTablePagination, DataTableColumnFilters, SortDirection } from '~/shared/types/dataTable'
 
@@ -22,6 +22,8 @@ export interface UseDataTableOptions {
   persistToUrl?: boolean
   /** Extra URL state params for page-specific filters */
   extraParams?: Record<string, { default: string | number; type?: 'string' | 'number' }>
+  /** Column filter keys to persist in URL (prefixed with `f.` in query string) */
+  columnFilterKeys?: string[]
 }
 
 export interface UseDataTableReturn {
@@ -56,6 +58,7 @@ export function useDataTable(
     searchDebounceMs = 300,
     persistToUrl = true,
     extraParams = {},
+    columnFilterKeys = [],
   } = options
 
   let searchTerm: Ref<string>
@@ -64,6 +67,7 @@ export function useDataTable(
   let currentPage: Ref<number>
   let itemsPerPage: Ref<number>
   const filters: Record<string, Ref<string | number>> = {}
+  const columnFilterRefs: Record<string, Ref<string>> = {}
 
   if (persistToUrl) {
     const paramDefs: Record<string, { default: string | number; type?: 'string' | 'number'; debounce?: number }> = {
@@ -75,6 +79,10 @@ export function useDataTable(
       ...extraParams,
     }
 
+    for (const key of columnFilterKeys) {
+      paramDefs[`f.${key}`] = { default: '', debounce: 300 }
+    }
+
     const state = useUrlState(paramDefs, {
       onRestore: () => deps.fetchData(),
     })
@@ -88,6 +96,10 @@ export function useDataTable(
     for (const key of Object.keys(extraParams)) {
       filters[key] = (state as Record<string, Ref<string | number>>)[key]!
     }
+
+    for (const key of columnFilterKeys) {
+      columnFilterRefs[key] = (state as Record<string, Ref<string>>)[`f.${key}`]!
+    }
   }
   else {
     searchTerm = ref('')
@@ -137,8 +149,31 @@ export function useDataTable(
     deps.fetchData()
   }
 
-  // Column filters
+  // Column filters — seed from URL-persisted refs
-  const columnFilters = ref<DataTableColumnFilters>({})
+  const initialColumnFilters: DataTableColumnFilters = {}
+  for (const [key, r] of Object.entries(columnFilterRefs)) {
+    if (r.value) initialColumnFilters[key] = r.value
+  }
+  const columnFilters = ref<DataTableColumnFilters>(initialColumnFilters)
+
+  // Sync columnFilters → URL refs
+  if (persistToUrl && columnFilterKeys.length > 0) {
+    watch(columnFilters, (val) => {
+      for (const key of columnFilterKeys) {
+        columnFilterRefs[key]!.value = val[key] || ''
+      }
+    }, { deep: true })
+
+    // Sync URL refs → columnFilters (back/forward navigation)
+    for (const key of columnFilterKeys) {
+      watch(columnFilterRefs[key]!, (urlVal) => {
+        const current = columnFilters.value[key] || ''
+        if (current !== urlVal) {
+          columnFilters.value = { ...columnFilters.value, [key]: urlVal }
+        }
+      })
+    }
+  }
 
   const handleColumnFiltersChange = (newFilters: DataTableColumnFilters) => {
     columnFilters.value = newFilters

app/composables/useDocuments.ts

@@ -11,6 +11,7 @@ export interface Document {
   size: number
   fileUrl: string
   downloadUrl: string
+  type?: string
   /** @deprecated Legacy Base64 data URI — use fileUrl instead */
   path?: string
   createdAt?: string
@@ -32,6 +33,7 @@ export interface UploadContext {
   composantId?: string
   productId?: string
   pieceId?: string
+  type?: string
 }
 
 export interface DocumentResult {
@@ -47,6 +49,7 @@ interface LoadDocumentsOptions {
   orderBy?: string
   orderDir?: 'asc' | 'desc'
   attachmentFilter?: string
+  type?: string
   force?: boolean
 }
 
@@ -63,7 +66,7 @@ const extractTotal = (payload: unknown, fallbackLength: number): number => {
 }
 
 export function useDocuments() {
-  const { get, postFormData, delete: del } = useApi()
+  const { get, patch, postFormData, delete: del } = useApi()
   const { showError, showSuccess } = useToast()
 
   const loadFromEndpoint = async (
@@ -103,10 +106,11 @@ export function useDocuments() {
       orderBy = 'createdAt',
       orderDir = 'desc',
       attachmentFilter = 'all',
+      type = 'all',
       force = false,
     } = options
 
-    if (!force && loaded.value && !search && page === 1 && attachmentFilter === 'all') {
+    if (!force && loaded.value && !search && page === 1 && attachmentFilter === 'all' && type === 'all') {
       return { success: true, data: documents.value }
     }
 
@@ -128,6 +132,10 @@ export function useDocuments() {
         params.set(`exists[${attachmentFilter}]`, 'true')
       }
 
+      if (type && type !== 'all') {
+        params.set('type', type)
+      }
+
       params.set(`order[${orderBy}]`, orderDir)
 
       const result = await get(`/documents?${params.toString()}`)
@@ -218,6 +226,7 @@ export function useDocuments() {
         const formData = new FormData()
         formData.append('file', file)
         formData.append('name', file.name)
+        if (context.type) formData.append('type', context.type)
 
         if (context.siteId) formData.append('siteId', context.siteId)
         if (context.machineId) formData.append('machineId', context.machineId)
@@ -280,6 +289,33 @@ export function useDocuments() {
     }
   }
 
+  const updateDocument = async (
+    id: string,
+    data: { name?: string; type?: string },
+  ): Promise<DocumentResult> => {
+    loading.value = true
+    try {
+      const result = await patch(`/documents/${id}`, data)
+      if (result.success && result.data) {
+        const updated = result.data as Document
+        const index = documents.value.findIndex((doc) => doc.id === id)
+        if (index !== -1) {
+          documents.value[index] = { ...documents.value[index], ...updated }
+        }
+        showSuccess('Document mis à jour')
+        return { success: true, data: updated }
+      }
+      if (result.error) showError(result.error)
+      return result as DocumentResult
+    } catch (error) {
+      const err = error as Error
+      showError('Impossible de mettre à jour le document')
+      return { success: false, error: err.message }
+    } finally {
+      loading.value = false
+    }
+  }
+
   return {
     documents,
     total,
@@ -292,6 +328,7 @@ export function useDocuments() {
     loadDocumentsByPiece,
     loadDocumentsByProduct,
     uploadDocuments,
+    updateDocument,
     deleteDocument,
   }
 }

app/composables/useEntityDocuments.ts

@@ -17,7 +17,7 @@ export interface EntityDocumentsDeps {
 
 export function useEntityDocuments(deps: EntityDocumentsDeps) {
   const { entity, entityType } = deps
-  const { uploadDocuments, deleteDocument } = useDocuments()
+  const { uploadDocuments, deleteDocument, updateDocument } = useDocuments()
 
   const loadDocumentsFn = entityType === 'composant'
     ? useDocuments().loadDocumentsByComponent
@@ -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 })
@@ -104,6 +104,19 @@ export function useEntityDocuments(deps: EntityDocumentsDeps) {
     }
   }
 
+  const editDocument = async (id: string, data: { name?: string; type?: string }) => {
+    const result: any = await updateDocument(id, data)
+    if (result.success) {
+      const e = entity()
+      const docs = e.documents || []
+      const index = docs.findIndex((doc: any) => doc.id === id)
+      if (index !== -1) {
+        docs[index] = { ...docs[index], ...data }
+      }
+    }
+    return result
+  }
+
   return {
     documents,
     selectedFiles,
@@ -118,5 +131,6 @@ export function useEntityDocuments(deps: EntityDocumentsDeps) {
     ensureDocumentsLoaded,
     handleFilesAdded,
     removeDocument,
+    editDocument,
   }
 }

app/composables/useEntityHistory.ts

@@ -23,6 +23,7 @@ export type EntityHistoryEntry = {
 }
 
 const ENTITY_ENDPOINTS: Record<string, string> = {
+  machine: '/machines',
   composant: '/composants',
   piece: '/pieces',
   product: '/products',
@@ -35,7 +36,7 @@ const extractItems = (payload: any): EntityHistoryEntry[] => {
   return []
 }
 
-export function useEntityHistory(entityType: 'composant' | 'piece' | 'product') {
+export function useEntityHistory(entityType: 'machine' | 'composant' | 'piece' | 'product') {
   const { get } = useApi()
   const basePath = ENTITY_ENDPOINTS[entityType]
 

app/composables/useEntityTypes.ts

@@ -127,8 +127,8 @@ export function useEntityTypes(config: EntityTypeConfig) {
       showSuccess(`Type de ${label} "${data.name}" créé`)
       return { success: true, data: normalized }
     } catch (error) {
-      const err = error as Error & { data?: { message?: string }; message?: string }
+      const err = error as Error & { data?: { error?: string; message?: string }; message?: string }
-      const raw = err?.data?.message || err?.message
+      const raw = err?.data?.error || err?.data?.message || err?.message
       const message = humanizeError(raw)
       showError(`Impossible de créer le type de ${label} : ${message}`)
       return { success: false, error: message }
@@ -153,8 +153,8 @@ export function useEntityTypes(config: EntityTypeConfig) {
       showSuccess(`Type de ${label} "${data.name}" mis à jour`)
       return { success: true, data: normalized }
     } catch (error) {
-      const err = error as Error & { data?: { message?: string }; message?: string }
+      const err = error as Error & { data?: { error?: string; message?: string }; message?: string }
-      const raw = err?.data?.message || err?.message
+      const raw = err?.data?.error || err?.data?.message || err?.message
       const message = humanizeError(raw)
       showError(`Impossible de mettre à jour le type de ${label} : ${message}`)
       return { success: false, error: message }
@@ -171,8 +171,8 @@ export function useEntityTypes(config: EntityTypeConfig) {
       showSuccess(`Type de ${label} supprimé`)
       return { success: true }
     } catch (error) {
-      const err = error as Error & { data?: { message?: string }; message?: string }
+      const err = error as Error & { data?: { error?: string; message?: string }; message?: string }
-      const raw = err?.data?.message || err?.message
+      const raw = err?.data?.error || err?.data?.message || err?.message
       const message = humanizeError(raw)
       showError(`Impossible de supprimer le type de ${label} : ${message}`)
       return { success: false, error: message }

app/composables/useEntityVersions.ts

@@ -0,0 +1,98 @@
+import { ref, toValue } from 'vue'
+import { useApi } from '~/composables/useApi'
+import type { MaybeRef } from 'vue'
+
+export interface VersionEntry {
+  version: number
+  action: 'create' | 'update' | 'restore' | string
+  createdAt: string
+  actor: { id: string; label: string } | null
+  diff: Record<string, { from: unknown; to: unknown }> | null
+}
+
+export interface RestorePreview {
+  version: number
+  restoreMode: 'full' | 'partial'
+  diff: Record<string, { current: unknown; restored: unknown }>
+  warnings: Array<{
+    field: string
+    message: string
+    missingEntityId: string | null
+    missingEntityName: string | null
+  }>
+  snapshot: Record<string, unknown>
+}
+
+export interface RestoreResult {
+  success: boolean
+  newVersion: number
+  restoredFromVersion: number
+  restoreMode: 'full' | 'partial'
+  warnings: RestorePreview['warnings']
+}
+
+const ENTITY_ENDPOINTS: Record<string, string> = {
+  machine: '/machines',
+  composant: '/composants',
+  piece: '/pieces',
+  product: '/products',
+}
+
+interface Deps {
+  entityType: MaybeRef<string>
+  entityId: MaybeRef<string>
+}
+
+export function useEntityVersions(deps: Deps) {
+  const { get, post } = useApi()
+
+  const versions = ref<VersionEntry[]>([])
+  const loading = ref(false)
+  const error = ref<string | null>(null)
+
+  const getPath = () => {
+    const type = toValue(deps.entityType)
+    const id = toValue(deps.entityId)
+    const base = ENTITY_ENDPOINTS[type]
+    return `${base}/${id}`
+  }
+
+  const fetchVersions = async () => {
+    loading.value = true
+    error.value = null
+    try {
+      const result = await get(`${getPath()}/versions`)
+      if (!result.success) {
+        error.value = result.error ?? 'Impossible de charger les versions.'
+        versions.value = []
+        return
+      }
+      versions.value = result.data?.items ?? []
+    }
+    catch (err: any) {
+      error.value = err?.message ?? 'Erreur inconnue'
+      versions.value = []
+    }
+    finally {
+      loading.value = false
+    }
+  }
+
+  const fetchPreview = async (version: number): Promise<RestorePreview | null> => {
+    const result = await get<RestorePreview>(`${getPath()}/versions/${version}/preview`)
+    if (!result.success || !result.data) {
+      return null
+    }
+    return result.data
+  }
+
+  const restore = async (version: number): Promise<RestoreResult | null> => {
+    const result = await post<RestoreResult>(`${getPath()}/versions/${version}/restore`, {})
+    if (!result.success || !result.data) {
+      return null
+    }
+    return result.data
+  }
+
+  return { versions, loading, error, fetchVersions, fetchPreview, restore }
+}

app/composables/useMachineCustomFieldDefs.ts

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

app/composables/useMachineDetailCustomFields.ts

@@ -376,6 +376,58 @@ export function useMachineDetailCustomFields(deps: MachineDetailCustomFieldsDeps
     }
   }
 
+  const saveAllMachineCustomFields = async () => {
+    if (!machine.value) return
+
+    const fields = Array.isArray(machineCustomFields.value) ? machineCustomFields.value : []
+    const fieldsToSave = fields.filter(
+      (field) => field.value !== undefined && field.value !== null && String(field.value).trim() !== '',
+    )
+
+    for (const field of fieldsToSave) {
+      const { id: customFieldId, customFieldValueId } = field
+
+      try {
+        if (customFieldValueId) {
+          await updateCustomFieldValueApi(customFieldValueId as string, {
+            value: field.value ?? '',
+          } as any)
+        } else if (customFieldId) {
+          const result: any = await upsertCustomFieldValue(
+            customFieldId as string,
+            'machine',
+            machine.value.id as string,
+            field.value ?? '',
+          )
+          if (result.success) {
+            const createdValue = result.data as AnyRecord
+            if (createdValue?.id) {
+              field.customFieldValueId = createdValue.id
+              if (!createdValue.customField) {
+                createdValue.customField = {
+                  id: customFieldId,
+                  name: field.name,
+                  type: field.type,
+                  required: field.required,
+                  options: field.options,
+                }
+              }
+              const existingValues = Array.isArray(machine.value.customFieldValues)
+                ? (machine.value.customFieldValues as AnyRecord[]).filter(
+                    (item) => item.id !== createdValue.id,
+                  )
+                : []
+              machine.value.customFieldValues = [...existingValues, createdValue]
+            }
+          }
+        }
+      } catch (error) {
+        console.error('Erreur lors de la sauvegarde du champ personnalisé:', error)
+        throw error
+      }
+    }
+  }
+
   return {
     // State
     machineCustomFields,
@@ -392,5 +444,6 @@ export function useMachineDetailCustomFields(deps: MachineDetailCustomFieldsDeps
     setMachineCustomFieldValue,
     updateMachineCustomField,
     updatePieceCustomField,
+    saveAllMachineCustomFields,
   }
 }

app/composables/useMachineDetailData.ts

@@ -15,12 +15,17 @@ 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,
   uniqueConstructeurIds,
   formatConstructeurContact as formatConstructeurContactSummary,
+  parseConstructeurLinksFromApi,
+  constructeurIdsFromLinks,
 } from '~/shared/constructeurUtils'
+import type { ConstructeurLinkEntry } from '~/shared/constructeurUtils'
+import { useConstructeurLinks } from '~/composables/useConstructeurLinks'
 import { useMachineDetailDocuments } from '~/composables/useMachineDetailDocuments'
 import { useMachineDetailCustomFields } from '~/composables/useMachineDetailCustomFields'
 import { useMachineDetailHierarchy } from '~/composables/useMachineDetailHierarchy'
@@ -41,9 +46,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,
@@ -60,10 +66,17 @@ export function useMachineDetailData(machineId: string) {
   const machine = ref<AnyRecord | null>(null)
   const productDocumentsMap = ref<Map<string, AnyRecord[]>>(new Map())
   const printAreaRef = ref<HTMLElement | null>(null)
+  const saving = ref(false)
+
+  // Constructeur links
+  const { fetchLinks, syncLinks } = useConstructeurLinks()
+  const constructeurLinks = ref<ConstructeurLinkEntry[]>([])
+  const originalConstructeurLinks = ref<ConstructeurLinkEntry[]>([])
 
   // Machine fields
   const machineName = ref('')
   const machineReference = ref('')
+  const machineSiteId = ref('')
   const machineConstructeurIds = ref<string[]>([])
 
   const machineConstructeurId = computed({
@@ -74,20 +87,15 @@ export function useMachineDetailData(machineId: string) {
   })
 
   const machineConstructeursDisplay = computed(() => {
-    const ids = uniqueConstructeurIds(
+    const ids = machineConstructeurIds.value
-      machineConstructeurIds.value,
+    if (!ids.length) return [] as any[]
-      (machine.value as AnyRecord)?.constructeurIds,
+    // Extract nested constructeur objects from link entries as candidate pool
-      (machine.value as AnyRecord)?.constructeurs,
+    const linkConstructeurs = constructeurLinks.value
-      (machine.value as AnyRecord)?.constructeur,
+      .filter(l => l.constructeur && l.constructeur.id)
-    )
+      .map(l => l.constructeur!) as any[]
     return resolveConstructeurs(
       ids,
-      Array.isArray((machine.value as AnyRecord)?.constructeurs)
+      linkConstructeurs,
-        ? ((machine.value as AnyRecord).constructeurs as any[])
-        : [],
-      (machine.value as AnyRecord)?.constructeur
-        ? [(machine.value as AnyRecord).constructeur as any]
-        : [],
       constructeurs.value as any,
     ) as any[]
   })
@@ -105,6 +113,12 @@ export function useMachineDetailData(machineId: string) {
 
   // UI state
   const isEditMode = ref(false)
+  const canSubmit = computed(() => {
+    if (!machine.value) return false
+    if (saving.value) return false
+    if (!machineName.value.trim()) return false
+    return true
+  })
   const debug = ref(false)
 
   const componentsCollapsed = ref(true)
@@ -143,6 +157,7 @@ export function useMachineDetailData(machineId: string) {
     setMachineCustomFieldValue,
     updateMachineCustomField,
     updatePieceCustomField,
+    saveAllMachineCustomFields,
   } = useMachineDetailCustomFields({
     machine,
     isEditMode,
@@ -224,11 +239,13 @@ export function useMachineDetailData(machineId: string) {
     if (machine.value) {
       machineName.value = (machine.value.name as string) || ''
       machineReference.value = (machine.value.reference as string) || ''
-      machineConstructeurIds.value = uniqueConstructeurIds(
+      // Parse constructeur links from structure response
-        machine.value.constructeurIds,
+      const rawLinks = Array.isArray(machine.value.constructeurs) ? machine.value.constructeurs as any[] : []
-        machine.value.constructeurs,
+      const parsed = parseConstructeurLinksFromApi(rawLinks)
-        machine.value.constructeur,
+      constructeurLinks.value = parsed
-      )
+      originalConstructeurLinks.value = parsed.map(l => ({ ...l }))
+      machineConstructeurIds.value = constructeurIdsFromLinks(parsed)
+      machineSiteId.value = (machine.value.siteId as string) || (machine.value.site as AnyRecord)?.id as string || ''
     }
   }
 
@@ -255,7 +272,10 @@ export function useMachineDetailData(machineId: string) {
     machine,
     machineName,
     machineReference,
+    machineSiteId,
     machineConstructeurIds,
+    constructeurLinks,
+    originalConstructeurLinks,
     machineDocumentsLoaded,
     machineComponentLinks,
     machinePieceLinks,
@@ -269,7 +289,9 @@ export function useMachineDetailData(machineId: string) {
     updateMachineApi,
     updateComposantApi: updateComposantApi,
     updatePieceApi,
+    apiPatch,
     toast,
+    syncLinks,
   })
 
   // UI methods
@@ -296,6 +318,39 @@ export function useMachineDetailData(machineId: string) {
     pieceCollapseToggleToken.value += 1
   }
 
+  const submitEdition = async () => {
+    if (!machine.value || saving.value) return
+    saving.value = true
+
+    try {
+      // 1. Save machine info (name, reference, site, constructeurs)
+      await updateMachineInfo()
+
+      // 2. Save all custom field values
+      await saveAllMachineCustomFields()
+
+      // 3. Reload machine data to get fresh state
+      await loadMachineData()
+
+      // 4. Exit edit mode
+      isEditMode.value = false
+      toast.showSuccess('Machine mise à jour avec succès')
+    } catch (error) {
+      console.error('Erreur lors de la sauvegarde:', error)
+      toast.showError('Erreur lors de la sauvegarde de la machine')
+    } finally {
+      saving.value = false
+    }
+  }
+
+  const cancelEdition = () => {
+    initMachineFields()
+    syncMachineCustomFields()
+    constructeurLinks.value = originalConstructeurLinks.value.map(l => ({ ...l }))
+    machineConstructeurIds.value = constructeurIdsFromLinks(constructeurLinks.value)
+    isEditMode.value = false
+  }
+
   // Print wrappers
   const ensurePrintSelectionEntries = () =>
     _ensurePrintEntries(components.value, machinePieces.value)
@@ -401,6 +456,7 @@ export function useMachineDetailData(machineId: string) {
       loadConstructeurs(),
       loadComponentTypes(),
       loadPieceTypes(),
+      loadSites(),
     ])
   }
 
@@ -419,8 +475,10 @@ export function useMachineDetailData(machineId: string) {
     machineComponentLinks, machinePieceLinks, machineProductLinks,
 
     // Machine fields
-    machineName, machineReference, machineConstructeurIds, machineConstructeurId,
+    machineName, machineReference, machineSiteId, machineConstructeurIds, machineConstructeurId,
     machineConstructeursDisplay, machineConstructeurContact, hasMachineConstructeur,
+    constructeurLinks, originalConstructeurLinks,
+    sites,
 
     // UI state
     machineDocumentFiles, machineDocumentsUploading, machineDocumentsLoaded,
@@ -443,6 +501,7 @@ export function useMachineDetailData(machineId: string) {
     updateMachineInfo, updateComponent, updatePieceFromComponent,
     updatePieceInfo, handleMachineConstructeurChange, editComponent, editPiece,
     toggleEditMode, toggleAllComponents, collapseAllComponents, toggleAllPieces,
+    saving, canSubmit, submitEdition, cancelEdition,
 
     // Print
     printModalOpen, printSelection, ensurePrintSelectionEntries,

app/composables/useMachineDetailUpdates.ts

@@ -5,7 +5,8 @@
  */
 
 import type { Ref } from 'vue'
-import { uniqueConstructeurIds } from '~/shared/constructeurUtils'
+import { uniqueConstructeurIds, constructeurIdsFromLinks } from '~/shared/constructeurUtils'
+import type { ConstructeurLinkEntry } from '~/shared/constructeurUtils'
 
 type AnyRecord = Record<string, unknown>
 
@@ -13,7 +14,10 @@ export interface UseMachineDetailUpdatesDeps {
   machine: Ref<AnyRecord | null>
   machineName: Ref<string>
   machineReference: Ref<string>
+  machineSiteId: Ref<string>
   machineConstructeurIds: Ref<string[]>
+  constructeurLinks: Ref<ConstructeurLinkEntry[]>
+  originalConstructeurLinks: Ref<ConstructeurLinkEntry[]>
   machineDocumentsLoaded: Ref<boolean>
   machineComponentLinks: Ref<AnyRecord[]>
   machinePieceLinks: Ref<AnyRecord[]>
@@ -32,7 +36,14 @@ 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 }
+  syncLinks: (
+    entityType: 'machine' | 'piece' | 'composant' | 'product',
+    entityId: string,
+    originalLinks: ConstructeurLinkEntry[],
+    formLinks: ConstructeurLinkEntry[],
+  ) => Promise<void>
 }
 
 export function useMachineDetailUpdates(deps: UseMachineDetailUpdatesDeps) {
@@ -40,7 +51,10 @@ export function useMachineDetailUpdates(deps: UseMachineDetailUpdatesDeps) {
     machine,
     machineName,
     machineReference,
+    machineSiteId,
     machineConstructeurIds,
+    constructeurLinks,
+    originalConstructeurLinks,
     machineComponentLinks,
     machinePieceLinks,
     applyMachineLinks,
@@ -51,19 +65,18 @@ export function useMachineDetailUpdates(deps: UseMachineDetailUpdatesDeps) {
     updateMachineApi,
     updateComposantApi,
     updatePieceApi,
+    apiPatch,
     toast,
+    syncLinks,
   } = deps
 
   const updateMachineInfo = async () => {
     if (!machine.value) return
     try {
-      const cIds = uniqueConstructeurIds(machineConstructeurIds.value)
-      machineConstructeurIds.value = cIds
-
       const result: any = await updateMachineApi(machine.value.id as string, {
         name: machineName.value,
         reference: machineReference.value,
-        constructeurIds: cIds,
+        siteId: machineSiteId.value || undefined,
       } as any)
       if (result.success) {
         const machinePayload =
@@ -77,11 +90,6 @@ export function useMachineDetailUpdates(deps: UseMachineDetailUpdatesDeps) {
             documents: machinePayload.documents || machine.value.documents || [],
             customFieldValues: machinePayload.customFieldValues || machine.value.customFieldValues || [],
           }
-          machineConstructeurIds.value = uniqueConstructeurIds(
-            machine.value!.constructeurIds,
-            machine.value!.constructeurs,
-            machine.value!.constructeur,
-          )
           const linksApplied = applyMachineLinks(result.data)
           if (linksApplied && machine.value) {
             machine.value.componentLinks = machineComponentLinks.value
@@ -90,6 +98,9 @@ export function useMachineDetailUpdates(deps: UseMachineDetailUpdatesDeps) {
           loadProductDocuments().catch(() => {})
         }
       }
+      // Sync constructeur links after entity save
+      await syncLinks('machine', machine.value!.id as string, originalConstructeurLinks.value, constructeurLinks.value)
+      originalConstructeurLinks.value = constructeurLinks.value.map(l => ({ ...l }))
     } catch (error) {
       console.error('Erreur lors de la mise à jour de la machine:', error)
     }
@@ -105,18 +116,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 +146,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 +187,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,14 +202,26 @@ 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)
     }
   }
 
-  const handleMachineConstructeurChange = async (value: unknown) => {
+  const handleMachineConstructeurChange = (value: unknown) => {
-    machineConstructeurIds.value = uniqueConstructeurIds(value)
+    const newIds = uniqueConstructeurIds(value)
-    await updateMachineInfo()
+    machineConstructeurIds.value = newIds
+    // Sync constructeurLinks: keep existing entries, add new ones
+    const existingMap = new Map(constructeurLinks.value.map(l => [l.constructeurId, l]))
+    constructeurLinks.value = newIds.map(id =>
+      existingMap.get(id) ?? { constructeurId: id, supplierReference: null },
+    )
   }
 
   const editComponent = () => {

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[]
       : []
@@ -243,6 +273,7 @@ export const buildMachineHierarchyFromLinks = (
       originalComposant: originalComponent,
       machineComponentLink: link,
       machineComponentLinkId,
+      linkId: machineComponentLinkId,
       componentLinkId: machineComponentLinkId,
       parentComponentLinkId: resolveIdentifier(link.parentComponentLinkId, link.parentLinkId, link.parentMachineComponentLinkId, appliedComponent.parentComponentLinkId),
       parentComposantId: resolveIdentifier(appliedComponent.parentComposantId, link.parentComponentId),

app/composables/useMachines.ts

@@ -1,7 +1,6 @@
 import { ref } from 'vue'
 import { useToast } from './useToast'
 import { useApi, type ApiResponse } from './useApi'
-import { buildConstructeurRequestPayload } from '~/shared/constructeurUtils'
 import { extractRelationId, normalizeRelationIds } from '~/shared/apiRelations'
 import { extractCollection } from '~/shared/utils/apiHelpers'
 
@@ -92,7 +91,7 @@ export function useMachines() {
   const createMachine = async (machineData: Partial<Machine>): Promise<ApiResponse> => {
     loading.value = true
     try {
-      const normalizedPayload = normalizeRelationIds(buildConstructeurRequestPayload(machineData))
+      const normalizedPayload = normalizeRelationIds(machineData as Record<string, unknown>)
       const result = await post('/machines', normalizedPayload)
       if (result.success) {
         const createdMachine = normalizeMachineResponse(result.data) ||
@@ -116,7 +115,7 @@ export function useMachines() {
   const updateMachineData = async (id: string, machineData: Partial<Machine>): Promise<ApiResponse> => {
     loading.value = true
     try {
-      const normalizedPayload = normalizeRelationIds(buildConstructeurRequestPayload(machineData))
+      const normalizedPayload = normalizeRelationIds(machineData as Record<string, unknown>)
       const result = await patch(`/machines/${id}`, normalizedPayload)
       if (result.success) {
         const updatedMachine = normalizeMachineResponse(result.data) ||

app/composables/usePieceEdit.ts

@@ -0,0 +1,482 @@
+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 { useConstructeurLinks } from '~/composables/useConstructeurLinks'
+import { usePieceHistory } from '~/composables/usePieceHistory'
+import { extractRelationId } from '~/shared/apiRelations'
+import { canPreviewDocument } from '~/utils/documentPreview'
+import { formatPieceStructurePreview } from '~/shared/modelUtils'
+import { uniqueConstructeurIds, constructeurIdsFromLinks } from '~/shared/constructeurUtils'
+import type { ConstructeurLinkEntry } 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 { fetchLinks, syncLinks } = useConstructeurLinks()
+  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 constructeurLinks = ref<ConstructeurLinkEntry[]>([])
+  const originalConstructeurLinks = ref<ConstructeurLinkEntry[]>([])
+  const constructeurIdsFromForm = computed(() => constructeurIdsFromLinks(constructeurLinks.value))
+  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 || ''
+      // Load constructeur links
+      fetchLinks('piece', pieceId).then((links) => {
+        constructeurLinks.value = links
+        originalConstructeurLinks.value = links.map(l => ({ ...l }))
+        editionForm.constructeurIds = constructeurIdsFromLinks(links)
+        if (editionForm.constructeurIds.length) {
+          void ensureConstructeurs(editionForm.constructeurIds)
+        }
+      })
+      editionForm.prix = currentPiece.prix !== null && currentPiece.prix !== undefined ? String(currentPiece.prix) : ''
+
+      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 payload: Record<string, any> = {
+      name: editionForm.name.trim(),
+      description: editionForm.description.trim() || null,
+    }
+
+    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?.structure?.customFields,
+          ],
+          { customFieldInputs, upsertCustomFieldValue, updateCustomFieldValue, toast },
+        )
+        await syncLinks('piece', piece.value.id, originalConstructeurLinks.value, constructeurLinks.value)
+        originalConstructeurLinks.value = constructeurLinks.value.map(l => ({ ...l }))
+        toast.showSuccess('Pièce mise à jour avec succès.')
+      }
+    }
+    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,
+    constructeurLinks,
+    originalConstructeurLinks,
+    constructeurIdsFromForm,
+    productSelections,
+    customFieldInputs,
+    canEdit,
+
+    // Computed
+    pieceTypeList,
+    selectedType,
+    resolvedStructure,
+    structureProducts,
+    productRequirementDescriptions,
+    productRequirementEntries,
+    canSubmit,
+    historyFieldLabels,
+
+    // History
+    history,
+    historyLoading,
+    historyError,
+
+    // Methods
+    openPreview,
+    closePreview,
+    removeDocument,
+    handleFilesAdded,
+    setProductSelection,
+    submitEdition,
+    fetchPiece,
+    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
 }
@@ -82,6 +81,12 @@ const toEditorField = (
     type: baseType as PieceModelCustomFieldType,
     required: Boolean(input?.required),
     optionsText,
+    defaultValue:
+      input?.defaultValue !== undefined && input.defaultValue !== null && input.defaultValue !== ''
+        ? String(input.defaultValue)
+        : null,
+    ...(typeof input?.id === 'string' && input.id ? { id: input.id } : {}),
+    ...(typeof input?.customFieldId === 'string' && input.customFieldId ? { customFieldId: input.customFieldId } : {}),
     orderIndex: typeof input?.orderIndex === 'number' ? input.orderIndex : index,
   }
 }
@@ -159,6 +164,16 @@ const buildPayload = (
         orderIndex: index,
       }
 
+      if (field.id) {
+        payload.id = field.id
+      }
+      if (field.customFieldId) {
+        payload.customFieldId = field.customFieldId
+      }
+      if (field.defaultValue !== undefined && field.defaultValue !== null && field.defaultValue !== '') {
+        payload.defaultValue = String(field.defaultValue)
+      }
+
       if (type === 'select') {
         const options = normalizeLineEndings(field.optionsText)
           .split('\n')
@@ -202,8 +217,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 +263,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 +408,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 +425,6 @@ export function usePieceStructureEditorLogic(deps: Deps) {
     fields,
     products,
     productTypeOptions,
-    restrictedMode,
-    isFieldLocked,
-    isProductLocked,
     formatProductTypeOption,
     handleProductTypeSelect,
     addProduct,

app/composables/usePieces.ts

@@ -1,7 +1,7 @@
 import { ref } from 'vue'
 import { useToast } from './useToast'
 import { useApi } from './useApi'
-import { buildConstructeurRequestPayload, uniqueConstructeurIds } from '~/shared/constructeurUtils'
+import { uniqueConstructeurIds } from '~/shared/constructeurUtils'
 import { useConstructeurs, type Constructeur } from './useConstructeurs'
 import { extractRelationId, normalizeRelationIds } from '~/shared/apiRelations'
 import { extractCollection } from '~/shared/utils/apiHelpers'
@@ -10,6 +10,7 @@ export interface Piece {
   id: string
   name: string
   reference?: string | null
+  referenceAuto?: string | null
   description?: string | null
   typePieceId?: string | null
   typePiece?: { id: string; name?: string } | null
@@ -43,6 +44,7 @@ interface LoadPiecesOptions {
   orderBy?: string
   orderDir?: 'asc' | 'desc'
   typeName?: string
+  typePieceId?: string
   force?: boolean
 }
 
@@ -119,17 +121,20 @@ export function usePieces() {
       orderBy = 'name',
       orderDir = 'asc',
       typeName,
+      typePieceId,
       force = false,
     } = options
 
-    if (!force && loaded.value && !search && !typeName && page === 1) {
+    // Only use cache for unfiltered full-catalog loads
+    if (!force && loaded.value && !search && !typeName && !typePieceId && page === 1) {
       return {
         success: true,
         data: { items: pieces.value, total: total.value, page, itemsPerPage },
       }
     }
 
-    if (loading.value) {
+    // For filtered queries, don't block on global loading state
+    if (!typePieceId && loading.value) {
       return {
         success: true,
         data: { items: pieces.value, total: total.value, page, itemsPerPage },
@@ -138,33 +143,42 @@ export function usePieces() {
 
     loading.value = true
     try {
-
       const params = new URLSearchParams()
       params.set('itemsPerPage', String(itemsPerPage))
       params.set('page', String(page))
 
       if (search && search.trim()) {
-        params.set('name', search.trim())
+        params.set('search', search.trim())
       }
 
       if (typeName && typeName.trim()) {
         params.set('typePiece.name', typeName.trim())
       }
 
+      if (typePieceId) {
+        params.set('typePiece', typePieceId)
+      }
+
       params.set(`order[${orderBy}]`, orderDir)
 
       const result = await get(`/pieces?${params.toString()}`)
       if (result.success) {
         const items = extractCollection(result.data)
         const enrichedItems = await Promise.all(items.map((item) => withResolvedConstructeurs(item)))
+        const resultTotal = extractTotal(result.data, items.length)
+
+        // Only update global cache for unfiltered queries
+        if (!typePieceId) {
           pieces.value = enrichedItems
-        total.value = extractTotal(result.data, items.length)
+          total.value = resultTotal
           loaded.value = true
+        }
+
         return {
           success: true,
           data: {
             items: enrichedItems,
-            total: total.value,
+            total: resultTotal,
             page,
             itemsPerPage,
           },
@@ -182,7 +196,8 @@ export function usePieces() {
   const createPiece = async (pieceData: Partial<Piece>): Promise<PieceSingleResult> => {
     loading.value = true
     try {
-      const normalizedPayload = normalizeRelationIds(buildConstructeurRequestPayload(pieceData))
+      const { constructeurIds, constructeurs, constructeurId, constructeur, ...cleanPayload } = pieceData as any
+      const normalizedPayload = normalizeRelationIds(cleanPayload)
       const result = await post('/pieces', normalizedPayload)
       if (result.success && result.data) {
         const enriched = await withResolvedConstructeurs(result.data as Piece)
@@ -209,7 +224,8 @@ export function usePieces() {
   const updatePieceData = async (id: string, pieceData: Partial<Piece>): Promise<PieceSingleResult> => {
     loading.value = true
     try {
-      const normalizedPayload = normalizeRelationIds(buildConstructeurRequestPayload(pieceData))
+      const { constructeurIds, constructeurs, constructeurId, constructeur, ...cleanPayload } = pieceData as any
+      const normalizedPayload = normalizeRelationIds(cleanPayload)
       const result = await patch(`/pieces/${id}`, normalizedPayload)
       if (result.success && result.data) {
         const updated = await withResolvedConstructeurs(result.data as Piece)

app/composables/useProducts.ts

@@ -2,7 +2,7 @@ import { ref } from 'vue'
 import { useToast } from './useToast'
 import { useApi } from './useApi'
 import { humanizeError } from '~/shared/utils/errorMessages'
-import { buildConstructeurRequestPayload, uniqueConstructeurIds } from '~/shared/constructeurUtils'
+import { uniqueConstructeurIds } from '~/shared/constructeurUtils'
 import { useConstructeurs, type Constructeur } from './useConstructeurs'
 import { extractRelationId, normalizeRelationIds } from '~/shared/apiRelations'
 import { extractCollection } from '~/shared/utils/apiHelpers'
@@ -41,6 +41,7 @@ interface LoadProductsOptions {
   orderBy?: string
   orderDir?: 'asc' | 'desc'
   typeName?: string
+  typeProductId?: string
   force?: boolean
 }
 
@@ -118,17 +119,18 @@ export function useProducts() {
       orderBy = 'name',
       orderDir = 'asc',
       typeName,
+      typeProductId,
       force = false,
     } = options
 
-    if (!force && loaded.value && !search && !typeName && page === 1) {
+    if (!force && loaded.value && !search && !typeName && !typeProductId && page === 1) {
       return {
         success: true,
         data: { items: products.value, total: total.value, page, itemsPerPage },
       }
     }
 
-    if (loading.value) {
+    if (!typeProductId && loading.value) {
       return {
         success: true,
         data: { items: products.value, total: total.value, page, itemsPerPage },
@@ -143,27 +145,36 @@ export function useProducts() {
       params.set('page', String(page))
 
       if (search && search.trim()) {
-        params.set('name', search.trim())
+        params.set('search', search.trim())
       }
 
       if (typeName && typeName.trim()) {
         params.set('typeProduct.name', typeName.trim())
       }
 
+      if (typeProductId) {
+        params.set('typeProduct', typeProductId)
+      }
+
       params.set(`order[${orderBy}]`, orderDir)
 
       const result = await get(`/products?${params.toString()}`)
       if (result.success) {
         const items = extractCollection(result.data)
         const enrichedItems = await Promise.all(items.map((item) => withResolvedConstructeurs(item)))
+        const resultTotal = extractTotal(result.data, items.length)
+
+        if (!typeProductId) {
           products.value = enrichedItems
-        total.value = extractTotal(result.data, items.length)
+          total.value = resultTotal
           loaded.value = true
+        }
+
         return {
           success: true,
           data: {
             items: enrichedItems,
-            total: total.value,
+            total: resultTotal,
             page,
             itemsPerPage,
           },
@@ -185,7 +196,8 @@ export function useProducts() {
   }
 
   const createProduct = async (payload: Partial<Product>): Promise<ProductSingleResult> => {
-    const normalizedPayload = normalizeRelationIds(buildConstructeurRequestPayload(payload))
+    const { constructeurIds, constructeurs, constructeurId, constructeur, ...cleanPayload } = payload as any
+    const normalizedPayload = normalizeRelationIds(cleanPayload)
     loading.value = true
     error.value = null
     try {
@@ -214,7 +226,8 @@ export function useProducts() {
   }
 
   const updateProduct = async (id: string, payload: Partial<Product>): Promise<ProductSingleResult> => {
-    const normalizedPayload = normalizeRelationIds(buildConstructeurRequestPayload(payload))
+    const { constructeurIds, constructeurs, constructeurId, constructeur, ...cleanPayload } = payload as any
+    const normalizedPayload = normalizeRelationIds(cleanPayload)
     loading.value = true
     error.value = null
     try {

app/composables/useSiteManagement.ts

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

app/composables/useSites.ts

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

app/composables/useStructureAssignmentFetch.ts

@@ -105,9 +105,9 @@ export function useStructureAssignmentFetch(deps: StructureAssignmentFetchDeps)
       definition.typeComposantId || definition.modelId || definition.typeComposant?.id || null
 
     const params = new URLSearchParams()
-    params.set('itemsPerPage', '50')
+    params.set('itemsPerPage', '200')
     if (term.trim()) {
-      params.set('name', term.trim())
+      params.set('search', term.trim())
     }
     if (requiredTypeId) {
       params.set('typeComposant', typeIri(requiredTypeId))
@@ -173,9 +173,9 @@ export function useStructureAssignmentFetch(deps: StructureAssignmentFetchDeps)
       definition.typePieceId || definition.typePiece?.id || null
 
     const params = new URLSearchParams()
-    params.set('itemsPerPage', '50')
+    params.set('itemsPerPage', '200')
     if (term.trim()) {
-      params.set('name', term.trim())
+      params.set('search', term.trim())
     }
     if (requiredTypeId) {
       params.set('typePiece', typeIri(requiredTypeId))
@@ -246,9 +246,9 @@ export function useStructureAssignmentFetch(deps: StructureAssignmentFetchDeps)
       definition.typeProductId || definition.typeProduct?.id || null
 
     const params = new URLSearchParams()
-    params.set('itemsPerPage', '50')
+    params.set('itemsPerPage', '200')
     if (term.trim()) {
-      params.set('name', term.trim())
+      params.set('search', term.trim())
     }
     if (requiredTypeId) {
       params.set('typeProduct', typeIri(requiredTypeId))
@@ -279,6 +279,11 @@ export function useStructureAssignmentFetch(deps: StructureAssignmentFetchDeps)
       if (deps.isRoot()) {
         return
       }
+      // Only clear if we have loaded options (cache or catalog); skip when options are empty
+      // because the fetch may not have completed yet.
+      if (!options.length) {
+        return
+      }
       const hasMatch = options.some(
         (component) => component.id === deps.assignment.selectedComponentId,
       )
@@ -293,6 +298,11 @@ export function useStructureAssignmentFetch(deps: StructureAssignmentFetchDeps)
     () => [deps.pieces, deps.assignment.pieces],
     () => {
       for (const pieceAssignment of deps.assignment.pieces) {
+        const hasCachedOptions = !!pieceOptionsByPath.value[pieceAssignment.path]
+        // Only clear selections when we have loaded options (cached or from catalog).
+        // When no cache exists, a fetch is about to fire — clearing now would lose
+        // user input before the real option list arrives.
+        if (hasCachedOptions) {
           const options = getPieceOptions(pieceAssignment)
           if (
             pieceAssignment.selectedPieceId
@@ -300,6 +310,7 @@ export function useStructureAssignmentFetch(deps: StructureAssignmentFetchDeps)
           ) {
             pieceAssignment.selectedPieceId = ''
           }
+        }
         if (!primedPiecePaths.has(pieceAssignment.path) && !pieceOptionsByPath.value[pieceAssignment.path]) {
           primedPiecePaths.add(pieceAssignment.path)
           fetchPieceOptions(pieceAssignment).catch(() => {})
@@ -313,6 +324,8 @@ export function useStructureAssignmentFetch(deps: StructureAssignmentFetchDeps)
     () => [deps.products, deps.assignment.products],
     () => {
       for (const productAssignment of deps.assignment.products) {
+        const hasCachedOptions = !!productOptionsByPath.value[productAssignment.path]
+        if (hasCachedOptions) {
           const options = getProductOptions(productAssignment)
           if (
             productAssignment.selectedProductId
@@ -320,6 +333,7 @@ export function useStructureAssignmentFetch(deps: StructureAssignmentFetchDeps)
           ) {
             productAssignment.selectedProductId = ''
           }
+        }
         if (!primedProductPaths.has(productAssignment.path) && !productOptionsByPath.value[productAssignment.path]) {
           primedProductPaths.add(productAssignment.path)
           fetchProductOptions(productAssignment).catch(() => {})

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

@@ -3,7 +3,8 @@
         <header class="space-y-2">
             <h1 class="text-3xl font-bold text-base-content">Changelog</h1>
             <p class="text-sm text-base-content/70">
-        Historique des modifications et nouvelles fonctionnalités de l'application.
+                Historique des modifications et nouvelles fonctionnalités de
+                l'application.
             </p>
         </header>
 
@@ -17,7 +18,9 @@
                     <h2 class="text-xl font-bold text-base-content">
                         {{ release.version }}
                     </h2>
-          <span class="badge badge-ghost text-xs">{{ release.date }}</span>
+                    <span class="badge badge-ghost text-xs">{{
+                        release.date
+                    }}</span>
                 </div>
 
                 <ul class="space-y-2">
@@ -41,189 +44,651 @@
 </template>
 
 <script setup lang="ts">
-import { useHead } from '#imports'
+import { useHead } from "#imports";
 
-useHead({ title: 'Changelog' })
+useHead({ title: "Changelog" });
 
-type ChangeType = 'feat' | 'fix' | 'perf' | 'chore'
+type ChangeType = "feat" | "fix" | "perf" | "chore";
 
 interface Change {
-  type: ChangeType
+    type: ChangeType;
-  text: string
+    text: string;
 }
 
 interface Release {
-  version: string
+    version: string;
-  date: string
+    date: string;
-  changes: Change[]
+    changes: Change[];
 }
 
 const badgeClass = (type: ChangeType) => {
     const map: Record<ChangeType, string> = {
-    feat: 'badge-primary',
+        feat: "badge-primary",
-    fix: 'badge-error',
+        fix: "badge-error",
-    perf: 'badge-warning',
+        perf: "badge-warning",
-    chore: 'badge-ghost',
+        chore: "badge-ghost",
-  }
+    };
-  return map[type] ?? 'badge-ghost'
+    return map[type] ?? "badge-ghost";
-}
+};
 
 const releases: Release[] = [
     {
-    version: 'v1.8.1',
+        version: "v1.9.5",
-    date: '2026-03-05',
+        date: "2026-03-31",
         changes: [
-      { type: 'feat', text: 'Composant DataTable générique avec tri, recherche, pagination et filtres server-side — toutes les pages catalogue migrées vers ce composant partagé' },
+            {
-      { type: 'feat', text: 'Messages d\'erreur humanisés : les erreurs backend sont traduites en messages compréhensibles pour l\'utilisateur final' },
+                type: "feat",
-      { type: 'feat', text: 'Modal d\'ajout d\'entités aux machines : ajout direct de composants, pièces et produits depuis la fiche machine' },
+                text: "Référence automatique des pièces et composants : génération d'une référence technique à partir d'une formule configurable sur la catégorie, recalculée automatiquement à chaque modification des champs personnalisés",
-      { type: 'feat', text: 'Filtres SearchFilter ipartial sur les noms de types de modèles et commentaires côté API' },
+            },
-      { type: 'feat', text: 'Suppression du système TypeMachine (squelettes machines) : les champs personnalisés sont désormais liés directement à chaque machine' },
+            {
-      { type: 'feat', text: 'Simplification de la création de machines : plus besoin de sélectionner un squelette, ajout direct des entités' },
+                type: "feat",
-      { type: 'fix', text: 'Suppression catalogue pièces/composants : confirmation avec liste des éléments supprimés en cascade (documents, liaisons machine, champs personnalisés) au lieu de bloquer la suppression' },
+                text: "Formula builder interactif : sélection des champs disponibles par clic (chips) avec insertion à la position du curseur, aperçu live avec valeurs d'exemple, et calcul automatique des champs requis",
-      { type: 'fix', text: 'Affichage des catégories sur les pages d\'édition (produit, composant, pièce) : correction de « Catégorie inconnue » causée par un import obsolète dans ModelType' },
+            },
-      { type: 'fix', text: 'Recherche insensible à la casse sur les commentaires et documents (partial → ipartial)' },
+            {
-      { type: 'chore', text: 'Suppression des pages squelettes machines (/machine-skeleton, /type) et composants associés' },
+                type: "feat",
+                text: "Versioning des entités : numéro de version incrémenté automatiquement à chaque modification, avec historique des versions et possibilité de restaurer une version antérieure",
+            },
+            {
+                type: "feat",
+                text: "Bouton de sauvegarde unique sur la fiche machine : remplacement des sauvegardes automatiques par un bouton explicite, avec affichage des versions sur les liens composants/pièces/produits",
+            },
         ],
     },
     {
-    version: 'v1.8.0',
+        version: "v1.9.4",
-    date: '2026-03-03',
+        date: "2026-03-25",
         changes: [
-      { type: 'feat', text: 'Stockage des documents sur le système de fichiers au lieu de Base64 en base de données, avec endpoints dédiés pour servir et télécharger les fichiers' },
+            {
-      { type: 'feat', text: 'Pagination serveur sur la page Documents avec recherche, tri (date/nom/taille), filtre par rattachement et sélecteur d\'éléments par page' },
+                type: "feat",
-      { type: 'feat', text: 'Compression PDF automatique à l\'upload via Ghostscript, avec commande pour compresser les PDFs existants' },
+                text: "Pages de consultation détaillées pour les pièces, composants et produits : vue lecture seule avec affichage propre des informations, fournisseurs, champs personnalisés et documents",
-      { type: 'feat', text: 'Champ description sur les pièces et composants, visible dans les catalogues avec popover au survol' },
+            },
-      { type: 'feat', text: 'Commande de migration app:migrate-documents-to-filesystem pour migrer les documents existants (Base64 → fichiers)' },
+            {
-      { type: 'fix', text: 'Normalisation des documents : fileUrl et downloadUrl toujours exposés dans l\'API' },
+                type: "feat",
-      { type: 'fix', text: 'Édition de squelettes machines : correction du conflit UniqueEntity et de l\'interférence du désérialiseur' },
+                text: "Bouton bascule Modifier / Voir détails sur les fiches pièces, composants et produits, identique au fonctionnement de la fiche machine",
-      { type: 'fix', text: 'Sites : ajout de l\'opération PATCH et correction de la migration de contrainte' },
+            },
-      { type: 'chore', text: 'Réorganisation de la navbar avec nouvelles icônes Lucide' },
+            {
+                type: "feat",
+                text: "Bouton « Détails » sur les catalogues pièces, composants et produits pour accéder directement à la vue consultation",
+            },
+            {
+                type: "feat",
+                text: "Masquage automatique des champs vides et de la section documents en mode consultation",
+            },
+            {
+                type: "feat",
+                text: "Accès direct au mode édition via le paramètre ?edit=true dans l'URL",
+            },
         ],
     },
     {
-    version: 'v1.7.0',
+        version: "v1.9.2",
-    date: '2026-03-02',
+        date: "2026-03-23",
         changes: [
-      { type: 'feat', text: 'Système de commentaires / tickets : possibilité de laisser des commentaires sur les fiches (machines, pièces, composants, produits, catégories, squelettes) avec résolution par les gestionnaires' },
+            {
-      { type: 'feat', text: 'Page commentaires centralisée (/comments) avec filtres par statut, type d\'entité, pagination et liens cliquables vers les fiches' },
+                type: "feat",
-      { type: 'feat', text: 'Badge notifications : compteur de commentaires ouverts sur l\'avatar utilisateur et dans le menu profil (polling 60s)' },
+                text: "Serveur MCP (Model Context Protocol) : l'application expose désormais un serveur MCP permettant l'intégration avec des assistants IA — outils CRUD complets pour toutes les entités, recherche inventaire, historique, commentaires, champs personnalisés, documents, slots et structure machine",
-      { type: 'feat', text: 'Contrôle d\'accès par rôles : ROLE_ADMIN, ROLE_GESTIONNAIRE, ROLE_VIEWER avec permissions granulaires sur toutes les pages' },
+            },
-      { type: 'feat', text: 'Journal d\'audit étendu : suivi des opérations sur machines, fournisseurs, types de modèles, documents et conversions' },
+            {
-      { type: 'feat', text: 'Commande app:init-profile-passwords pour l\'initialisation en masse des mots de passe et rôles' },
+                type: "feat",
-      { type: 'fix', text: 'Toggle switch pour les champs personnalisés booléens (remplace les checkboxes)' },
+                text: "Types de documents : classification des documents par type (Plan, Photo, Fiche technique, Notice, Certificat, Facture, Bon de commande, Autre) avec filtre dédié sur la page documents, sélection du type à l'upload et possibilité de modifier le type après upload",
-      { type: 'fix', text: 'Recherche fournisseur : filtrage côté client au lieu d\'appels API debounce' },
+            },
-      { type: 'fix', text: 'Prévention des doublons de noms de fournisseurs et de références de pièces (contraintes unique)' },
+            {
-      { type: 'fix', text: 'Correction de la création de squelettes machines : pagination, duplication, champs personnalisés' },
+                type: "feat",
+                text: "Filtre sites multi-sélection sur le Parc Machines : remplacement du menu déroulant par des cases à cocher permettant de filtrer sur un ou plusieurs sites simultanément",
+            },
+            {
+                type: "feat",
+                text: "Tri alphabétique automatique des machines sur le Parc Machines",
+            },
+            {
+                type: "feat",
+                text: "Recherche par nom OU référence sur les catalogues : la recherche dans les catalogues pièces, composants et produits cherche désormais dans le nom et la référence simultanément (extension Doctrine OR search)",
+            },
+            {
+                type: "feat",
+                text: "Quantité sur les slots pièces : ajout d'un champ quantité éditable directement depuis la page d'édition d'un composant",
+            },
+            {
+                type: "feat",
+                text: "Lien rapide vers la catégorie depuis la page d'édition d'un composant",
+            },
+            {
+                type: "feat",
+                text: "Redirection vers la page d'édition après création d'un composant, d'une pièce ou d'un produit",
+            },
+            {
+                type: "fix",
+                text: "Correction de la suppression de fournisseurs sur les pièces, composants et produits : la suppression est maintenant persistée correctement",
+            },
+            {
+                type: "fix",
+                text: "Correction de la création de composants : les sélections de pièces, produits et sous-composants sont maintenant sauvegardées, et les slots squelette sont correctement initialisés",
+            },
+            {
+                type: "fix",
+                text: "Correction de la perte de données lors de la sauvegarde d'une catégorie (champs personnalisés et structure)",
+            },
+            {
+                type: "fix",
+                text: "Correction de la suppression de composants depuis la fiche machine (utilisation du linkId au lieu du composantId)",
+            },
+            {
+                type: "fix",
+                text: "Amélioration de l'envoi des fournisseurs en PATCH : le tableau est toujours envoyé pour éviter les pertes",
+            },
+            {
+                type: "fix",
+                text: "Filtrage serveur des options dans les sélecteurs de slots au lieu du filtrage client",
+            },
+            {
+                type: "fix",
+                text: "Page d'édition pièce : rester sur la page après sauvegarde au lieu de rediriger",
+            },
+            {
+                type: "fix",
+                text: "Messages d'erreur 409 (conflit) : extraction du champ d'erreur pour un message compréhensible",
+            },
+            {
+                type: "perf",
+                text: "Suppression des chargements catalogue redondants sur la page d'édition composant",
+            },
         ],
     },
     {
-    version: 'v1.6.1',
+        version: "v1.9.1",
-    date: '2026-02-12',
+        date: "2026-03-16",
         changes: [
-      { type: 'feat', text: 'Suivi d\'audit étendu : enregistrement des opérations CRUD sur les machines, fournisseurs, catégories (ModelType) et documents' },
+            {
-      { type: 'feat', text: 'Traçabilité des conversions de catégories dans le journal d\'activité (action « convert » avec direction, nombre et noms des éléments)' },
+                type: "feat",
-      { type: 'feat', text: 'Endpoint historique machine : GET /api/machines/{id}/history' },
+                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.6.0',
+        version: "v1.9.0",
-    date: '2026-02-12',
+        date: "2026-03-09",
         changes: [
-      { type: 'feat', text: 'Conversion bidirectionnelle des catégories : possibilité de convertir une catégorie de pièce en catégorie de composant (et inversement) avec transfert automatique de tous les éléments, documents, champs personnalisés et fournisseurs' },
+            {
-      { type: 'feat', text: 'Vérification des conditions de blocage avant conversion : liaisons machines, templates de type machine, sous-composants dans la structure, collisions de noms' },
+                type: "feat",
-      { type: 'feat', text: 'Bouton « Convertir » sur les listes de catégories pièce et composant avec modale de confirmation détaillée' },
+                text: "Gestion des champs personnalisés sur les machines : ajout, modification et suppression de définitions de champs directement depuis la fiche machine",
-      { type: 'chore', text: 'Passage php-cs-fixer sur l\'ensemble des contrôleurs et entités du backend' },
+            },
+            {
+                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.5.0',
+        version: "v1.8.1",
-    date: '2026-02-11',
+        date: "2026-03-05",
         changes: [
-      { type: 'feat', text: 'Page de journal d\'activité globale avec filtres par entité, par acteur et pagination serveur' },
+            {
-      { type: 'feat', text: 'Suivi d\'audit : enregistrement des noms de fournisseurs et des modifications de champs personnalisés' },
+                type: "feat",
-      { type: 'feat', text: 'Préservation de l\'état des listes dans l\'URL (page courante, recherche, tri, direction, filtres) — le retour navigateur restaure exactement la position précédente' },
+                text: "Composant DataTable générique avec tri, recherche, pagination et filtres server-side — toutes les pages catalogue migrées vers ce composant partagé",
-      { type: 'feat', text: 'Boutons « Retour » sur toutes les pages de création et d\'édition utilisent désormais l\'historique du navigateur au lieu de liens fixes' },
+            },
-      { type: 'feat', text: 'Première lettre automatiquement en majuscule lors de la création de catégories et de composants' },
+            {
-      { type: 'feat', text: 'Les types de catégories dans les tableaux des catalogues sont maintenant cliquables (lien vers la fiche d\'édition)' },
+                type: "feat",
-      { type: 'feat', text: 'Application des couleurs de marque Malio sur l\'ensemble du thème (navbar, boutons, badges)' },
+                text: "Messages d'erreur humanisés : les erreurs backend sont traduites en messages compréhensibles pour l'utilisateur final",
-      { type: 'feat', text: 'Page changelog accessible depuis le footer' },
+            },
-      { type: 'fix', text: 'Correction des filtres de tri et de recherche cassés sur les catalogues composants, pièces et produits' },
+            {
-      { type: 'fix', text: 'Correction du filtre par rattachement (site, machine, composant, pièce) sur la page documents' },
+                type: "feat",
-      { type: 'fix', text: 'Correction de l\'affichage des champs personnalisés sur les pages d\'édition (condition de concurrence)' },
+                text: "Modal d'ajout d'entités aux machines : ajout direct de composants, pièces et produits depuis la fiche machine",
-      { type: 'fix', text: 'Plafonnement de la pagination à 200 éléments par page pour éviter les erreurs mémoire en production' },
+            },
-      { type: 'perf', text: 'Cache intelligent sur les composables usePieces et useComposants : les données déjà chargées ne sont plus re-téléchargées inutilement' },
+            {
-      { type: 'perf', text: 'Réduction des appels API bloquants sur les pages d\'édition' },
+                type: "feat",
+                text: "Filtres SearchFilter ipartial sur les noms de types de modèles et commentaires côté API",
+            },
+            {
+                type: "feat",
+                text: "Suppression du système TypeMachine (squelettes machines) : les champs personnalisés sont désormais liés directement à chaque machine",
+            },
+            {
+                type: "feat",
+                text: "Simplification de la création de machines : plus besoin de sélectionner un squelette, ajout direct des entités",
+            },
+            {
+                type: "fix",
+                text: "Suppression catalogue pièces/composants : confirmation avec liste des éléments supprimés en cascade (documents, liaisons machine, champs personnalisés) au lieu de bloquer la suppression",
+            },
+            {
+                type: "fix",
+                text: "Affichage des catégories sur les pages d'édition (produit, composant, pièce) : correction de « Catégorie inconnue » causée par un import obsolète dans ModelType",
+            },
+            {
+                type: "fix",
+                text: "Recherche insensible à la casse sur les commentaires et documents (partial → ipartial)",
+            },
+            {
+                type: "chore",
+                text: "Suppression des pages squelettes machines (/machine-skeleton, /type) et composants associés",
+            },
         ],
     },
     {
-    version: 'v1.4.0',
+        version: "v1.8.0",
-    date: '2026-02-04',
+        date: "2026-03-03",
         changes: [
-      { type: 'perf', text: 'Optimisation de la sérialisation API : ajout de groupes dédiés pour CustomFieldValue et CustomField, réduisant significativement la taille des réponses' },
+            {
-      { type: 'perf', text: 'Pages d\'édition machines/composants/pièces : chargement parallèle des données au lieu de séquentiel' },
+                type: "feat",
+                text: "Stockage des documents sur le système de fichiers au lieu de Base64 en base de données, avec endpoints dédiés pour servir et télécharger les fichiers",
+            },
+            {
+                type: "feat",
+                text: "Pagination serveur sur la page Documents avec recherche, tri (date/nom/taille), filtre par rattachement et sélecteur d'éléments par page",
+            },
+            {
+                type: "feat",
+                text: "Compression PDF automatique à l'upload via Ghostscript, avec commande pour compresser les PDFs existants",
+            },
+            {
+                type: "feat",
+                text: "Champ description sur les pièces et composants, visible dans les catalogues avec popover au survol",
+            },
+            {
+                type: "feat",
+                text: "Commande de migration app:migrate-documents-to-filesystem pour migrer les documents existants (Base64 → fichiers)",
+            },
+            {
+                type: "fix",
+                text: "Normalisation des documents : fileUrl et downloadUrl toujours exposés dans l'API",
+            },
+            {
+                type: "fix",
+                text: "Édition de squelettes machines : correction du conflit UniqueEntity et de l'interférence du désérialiseur",
+            },
+            {
+                type: "fix",
+                text: "Sites : ajout de l'opération PATCH et correction de la migration de contrainte",
+            },
+            {
+                type: "chore",
+                text: "Réorganisation de la navbar avec nouvelles icônes Lucide",
+            },
         ],
     },
     {
-    version: 'v1.3.0',
+        version: "v1.7.0",
-    date: '2026-01-28',
+        date: "2026-03-02",
         changes: [
-      { type: 'feat', text: 'Refactoring complet du frontend : découpage des méga-composants en modules réutilisables (7 chantiers F1-F7)' },
+            {
-      { type: 'feat', text: 'Page détail machine découpée de 2989 à 219 lignes avec 2 composables et 7 sous-composants' },
+                type: "feat",
-      { type: 'feat', text: 'Page création machine découpée de 1231 à 196 lignes avec 1 composable et 5 sous-composants' },
+                text: "Système de commentaires / tickets : possibilité de laisser des commentaires sur les fiches (machines, pièces, composants, produits, catégories, squelettes) avec résolution par les gestionnaires",
-      { type: 'feat', text: 'Extraction de 4 modules utilitaires partagés (champs personnalisés, affichage produits, documents, fournisseurs)' },
+            },
-      { type: 'feat', text: 'Fusion des composables dupliqués : 3 composables d\'historique et 3 composables de types fusionnés en versions génériques' },
+            {
-      { type: 'feat', text: 'Remplacement de confirm() natif par une modale DaisyUI personnalisée sur l\'ensemble de l\'application' },
+                type: "feat",
-      { type: 'feat', text: 'Extraction de la navbar dans un composant AppNavbar dédié' },
+                text: "Page commentaires centralisée (/comments) avec filtres par statut, type d'entité, pagination et liens cliquables vers les fiches",
-      { type: 'feat', text: 'Suite de 54 tests unitaires avec Vitest couvrant les utilitaires et composables' },
+            },
-      { type: 'perf', text: 'Optimisations API : helper extractCollection partagé, invalidation de cache ciblée' },
+            {
-      { type: 'chore', text: 'Migration des composables JavaScript vers TypeScript strict' },
+                type: "feat",
-      { type: 'chore', text: 'Activation de règles ESLint strictes et suppression de 19 console.log de débogage' },
+                text: "Badge notifications : compteur de commentaires ouverts sur l'avatar utilisateur et dans le menu profil (polling 60s)",
+            },
+            {
+                type: "feat",
+                text: "Contrôle d'accès par rôles : ROLE_ADMIN, ROLE_GESTIONNAIRE, ROLE_VIEWER avec permissions granulaires sur toutes les pages",
+            },
+            {
+                type: "feat",
+                text: "Journal d'audit étendu : suivi des opérations sur machines, fournisseurs, types de modèles, documents et conversions",
+            },
+            {
+                type: "feat",
+                text: "Commande app:init-profile-passwords pour l'initialisation en masse des mots de passe et rôles",
+            },
+            {
+                type: "fix",
+                text: "Toggle switch pour les champs personnalisés booléens (remplace les checkboxes)",
+            },
+            {
+                type: "fix",
+                text: "Recherche fournisseur : filtrage côté client au lieu d'appels API debounce",
+            },
+            {
+                type: "fix",
+                text: "Prévention des doublons de noms de fournisseurs et de références de pièces (contraintes unique)",
+            },
+            {
+                type: "fix",
+                text: "Correction de la création de squelettes machines : pagination, duplication, champs personnalisés",
+            },
         ],
     },
     {
-    version: 'v1.2.0',
+        version: "v1.6.1",
-    date: '2026-01-21',
+        date: "2026-02-12",
         changes: [
-      { type: 'feat', text: 'Système de suivi d\'historique (audit) avec enregistrement automatique des modifications sur toutes les entités' },
+            {
-      { type: 'feat', text: 'Interface dédiée à l\'historique sur les fiches produits, pièces et composants' },
+                type: "feat",
-      { type: 'feat', text: 'Modale d\'éléments liés sur les pages de gestion des catégories avec navigation directe vers la fiche d\'édition' },
+                text: "Suivi d'audit étendu : enregistrement des opérations CRUD sur les machines, fournisseurs, catégories (ModelType) et documents",
-      { type: 'feat', text: 'Possibilité d\'ajouter des champs personnalisés en mode restreint sur les catégories' },
+            },
+            {
+                type: "feat",
+                text: "Traçabilité des conversions de catégories dans le journal d'activité (action « convert » avec direction, nombre et noms des éléments)",
+            },
+            {
+                type: "feat",
+                text: "Endpoint historique machine : GET /api/machines/{id}/history",
+            },
         ],
     },
     {
-    version: 'v1.1.1',
+        version: "v1.6.0",
-    date: '2026-01-14',
+        date: "2026-02-12",
         changes: [
-      { type: 'feat', text: 'Compression automatique des fichiers PDF à l\'upload via qpdf, réduisant l\'espace de stockage' },
+            {
-      { type: 'chore', text: 'Ajout de qpdf dans l\'image Docker pour le support de la compression PDF' },
+                type: "feat",
+                text: "Conversion bidirectionnelle des catégories : possibilité de convertir une catégorie de pièce en catégorie de composant (et inversement) avec transfert automatique de tous les éléments, documents, champs personnalisés et fournisseurs",
+            },
+            {
+                type: "feat",
+                text: "Vérification des conditions de blocage avant conversion : liaisons machines, templates de type machine, sous-composants dans la structure, collisions de noms",
+            },
+            {
+                type: "feat",
+                text: "Bouton « Convertir » sur les listes de catégories pièce et composant avec modale de confirmation détaillée",
+            },
+            {
+                type: "chore",
+                text: "Passage php-cs-fixer sur l'ensemble des contrôleurs et entités du backend",
+            },
         ],
     },
     {
-    version: 'v1.1.0',
+        version: "v1.5.0",
-    date: '2026-01-07',
+        date: "2026-02-11",
         changes: [
-      { type: 'fix', text: 'Recherche insensible à la casse sur l\'ensemble des filtres de toutes les entités (machines, composants, pièces, produits)' },
+            {
-      { type: 'chore', text: 'Réinitialisation des migrations vers un schéma initial unique avec guide de déploiement' },
+                type: "feat",
-      { type: 'chore', text: 'Mise à jour des fixtures avec les données courantes de la base' },
+                text: "Page de journal d'activité globale avec filtres par entité, par acteur et pagination serveur",
+            },
+            {
+                type: "feat",
+                text: "Suivi d'audit : enregistrement des noms de fournisseurs et des modifications de champs personnalisés",
+            },
+            {
+                type: "feat",
+                text: "Préservation de l'état des listes dans l'URL (page courante, recherche, tri, direction, filtres) — le retour navigateur restaure exactement la position précédente",
+            },
+            {
+                type: "feat",
+                text: "Boutons « Retour » sur toutes les pages de création et d'édition utilisent désormais l'historique du navigateur au lieu de liens fixes",
+            },
+            {
+                type: "feat",
+                text: "Première lettre automatiquement en majuscule lors de la création de catégories et de composants",
+            },
+            {
+                type: "feat",
+                text: "Les types de catégories dans les tableaux des catalogues sont maintenant cliquables (lien vers la fiche d'édition)",
+            },
+            {
+                type: "feat",
+                text: "Application des couleurs de marque Malio sur l'ensemble du thème (navbar, boutons, badges)",
+            },
+            {
+                type: "feat",
+                text: "Page changelog accessible depuis le footer",
+            },
+            {
+                type: "fix",
+                text: "Correction des filtres de tri et de recherche cassés sur les catalogues composants, pièces et produits",
+            },
+            {
+                type: "fix",
+                text: "Correction du filtre par rattachement (site, machine, composant, pièce) sur la page documents",
+            },
+            {
+                type: "fix",
+                text: "Correction de l'affichage des champs personnalisés sur les pages d'édition (condition de concurrence)",
+            },
+            {
+                type: "fix",
+                text: "Plafonnement de la pagination à 200 éléments par page pour éviter les erreurs mémoire en production",
+            },
+            {
+                type: "perf",
+                text: "Cache intelligent sur les composables usePieces et useComposants : les données déjà chargées ne sont plus re-téléchargées inutilement",
+            },
+            {
+                type: "perf",
+                text: "Réduction des appels API bloquants sur les pages d'édition",
+            },
         ],
     },
     {
-    version: 'v1.0.0',
+        version: "v1.4.0",
-    date: '2025-12-15',
+        date: "2026-02-04",
         changes: [
-      { type: 'feat', text: 'Gestion complète des machines : création, édition, vue détaillée avec liaisons composants et pièces' },
+            {
-      { type: 'feat', text: 'Catalogues composants, pièces et produits avec recherche serveur, tri et pagination' },
+                type: "perf",
-      { type: 'feat', text: 'Système de catégories (types) avec squelettes de champs personnalisés et drag & drop pour réordonner' },
+                text: "Optimisation de la sérialisation API : ajout de groupes dédiés pour CustomFieldValue et CustomField, réduisant significativement la taille des réponses",
-      { type: 'feat', text: 'Upload de documents avec prévisualisation PDF et images, miniatures dans les tableaux' },
+            },
-      { type: 'feat', text: 'Gestion des fournisseurs multiples avec résolution automatique des noms' },
+            {
-      { type: 'feat', text: 'Exigences produit sur les pièces : support de liaisons multiples' },
+                type: "perf",
-      { type: 'feat', text: 'Sélections de composants sur les pièces avec recherche dynamique' },
+                text: "Pages d'édition machines/composants/pièces : chargement parallèle des données au lieu de séquentiel",
-      { type: 'feat', text: 'Système de sessions utilisateurs avec authentification par cookie' },
+            },
-      { type: 'feat', text: 'Mémorisation des préférences de tri par catalogue (cookies)' },
-      { type: 'feat', text: 'Formatage automatique des contacts et des montants en format français' },
-      { type: 'feat', text: 'Protection contre les suppressions : affichage des dépendances bloquantes avant confirmation' },
-      { type: 'chore', text: 'Infrastructure Docker complète avec PostgreSQL, PHP 8.4, API Platform et pgAdmin' },
         ],
     },
-]
+    {
+        version: "v1.3.0",
+        date: "2026-01-28",
+        changes: [
+            {
+                type: "feat",
+                text: "Refactoring complet du frontend : découpage des méga-composants en modules réutilisables (7 chantiers F1-F7)",
+            },
+            {
+                type: "feat",
+                text: "Page détail machine découpée de 2989 à 219 lignes avec 2 composables et 7 sous-composants",
+            },
+            {
+                type: "feat",
+                text: "Page création machine découpée de 1231 à 196 lignes avec 1 composable et 5 sous-composants",
+            },
+            {
+                type: "feat",
+                text: "Extraction de 4 modules utilitaires partagés (champs personnalisés, affichage produits, documents, fournisseurs)",
+            },
+            {
+                type: "feat",
+                text: "Fusion des composables dupliqués : 3 composables d'historique et 3 composables de types fusionnés en versions génériques",
+            },
+            {
+                type: "feat",
+                text: "Remplacement de confirm() natif par une modale DaisyUI personnalisée sur l'ensemble de l'application",
+            },
+            {
+                type: "feat",
+                text: "Extraction de la navbar dans un composant AppNavbar dédié",
+            },
+            {
+                type: "feat",
+                text: "Suite de 54 tests unitaires avec Vitest couvrant les utilitaires et composables",
+            },
+            {
+                type: "perf",
+                text: "Optimisations API : helper extractCollection partagé, invalidation de cache ciblée",
+            },
+            {
+                type: "chore",
+                text: "Migration des composables JavaScript vers TypeScript strict",
+            },
+            {
+                type: "chore",
+                text: "Activation de règles ESLint strictes et suppression de 19 console.log de débogage",
+            },
+        ],
+    },
+    {
+        version: "v1.2.0",
+        date: "2026-01-21",
+        changes: [
+            {
+                type: "feat",
+                text: "Système de suivi d'historique (audit) avec enregistrement automatique des modifications sur toutes les entités",
+            },
+            {
+                type: "feat",
+                text: "Interface dédiée à l'historique sur les fiches produits, pièces et composants",
+            },
+            {
+                type: "feat",
+                text: "Modale d'éléments liés sur les pages de gestion des catégories avec navigation directe vers la fiche d'édition",
+            },
+            {
+                type: "feat",
+                text: "Possibilité d'ajouter des champs personnalisés en mode restreint sur les catégories",
+            },
+        ],
+    },
+    {
+        version: "v1.1.1",
+        date: "2026-01-14",
+        changes: [
+            {
+                type: "feat",
+                text: "Compression automatique des fichiers PDF à l'upload via qpdf, réduisant l'espace de stockage",
+            },
+            {
+                type: "chore",
+                text: "Ajout de qpdf dans l'image Docker pour le support de la compression PDF",
+            },
+        ],
+    },
+    {
+        version: "v1.1.0",
+        date: "2026-01-07",
+        changes: [
+            {
+                type: "fix",
+                text: "Recherche insensible à la casse sur l'ensemble des filtres de toutes les entités (machines, composants, pièces, produits)",
+            },
+            {
+                type: "chore",
+                text: "Réinitialisation des migrations vers un schéma initial unique avec guide de déploiement",
+            },
+            {
+                type: "chore",
+                text: "Mise à jour des fixtures avec les données courantes de la base",
+            },
+        ],
+    },
+    {
+        version: "v1.0.0",
+        date: "2025-12-15",
+        changes: [
+            {
+                type: "feat",
+                text: "Gestion complète des machines : création, édition, vue détaillée avec liaisons composants et pièces",
+            },
+            {
+                type: "feat",
+                text: "Catalogues composants, pièces et produits avec recherche serveur, tri et pagination",
+            },
+            {
+                type: "feat",
+                text: "Système de catégories (types) avec squelettes de champs personnalisés et drag & drop pour réordonner",
+            },
+            {
+                type: "feat",
+                text: "Upload de documents avec prévisualisation PDF et images, miniatures dans les tableaux",
+            },
+            {
+                type: "feat",
+                text: "Gestion des fournisseurs multiples avec résolution automatique des noms",
+            },
+            {
+                type: "feat",
+                text: "Exigences produit sur les pièces : support de liaisons multiples",
+            },
+            {
+                type: "feat",
+                text: "Sélections de composants sur les pièces avec recherche dynamique",
+            },
+            {
+                type: "feat",
+                text: "Système de sessions utilisateurs avec authentification par cookie",
+            },
+            {
+                type: "feat",
+                text: "Mémorisation des préférences de tri par catalogue (cookies)",
+            },
+            {
+                type: "feat",
+                text: "Formatage automatique des contacts et des montants en format français",
+            },
+            {
+                type: "feat",
+                text: "Protection contre les suppressions : affichage des dépendances bloquantes avant confirmation",
+            },
+            {
+                type: "chore",
+                text: "Infrastructure Docker complète avec PostgreSQL, PHP 8.4, API Platform et pgAdmin",
+            },
+        ],
+    },
+];
 </script>

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>
@@ -73,7 +73,10 @@
           </template>
 
           <template #cell-content="{ row }">
-            <span class="line-clamp-2 text-sm">{{ row.content }}</span>
+            <div class="tooltip tooltip-top max-w-xs" :data-tip="row.content">
+              <span class="line-clamp-2 text-sm text-left">{{ row.content }}</span>
+            </div>
+            <CommentDocumentList :documents="getDocuments(row)" />
           </template>
 
           <template #cell-entityType="{ row }">
@@ -132,7 +135,8 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, type Ref } from 'vue'
 import DataTable from '~/components/common/DataTable.vue'
-import { useComments, type Comment } from '~/composables/useComments'
+import { useComments, type Comment, type CommentDocument } from '~/composables/useComments'
+import CommentDocumentList from '~/components/CommentDocumentList.vue'
 import { usePermissions } from '~/composables/usePermissions'
 import { useDataTable } from '~/composables/useDataTable'
 import IconLucideCheck from '~icons/lucide/check'
@@ -148,6 +152,9 @@ const comments = ref<Comment[]>([])
 const total = ref(0)
 const loadingList = ref(true)
 
+const getDocuments = (comment: Comment): CommentDocument[] =>
+  comment.documents?.filter((d): d is CommentDocument => typeof d === 'object' && d !== null && 'id' in d) ?? []
+
 const table = useDataTable(
   { fetchData: loadComments },
   {
@@ -159,6 +166,7 @@ const table = useDataTable(
       status: { default: 'open' },
       entityType: { default: '' },
     },
+    columnFilterKeys: ['entity'],
   },
 )
 
@@ -236,9 +244,9 @@ const handleResolve = async (commentId: string) => {
 
 const ENTITY_ROUTE_MAP: Record<string, (id: string) => string> = {
   machine: (id: string) => `/machine/${id}`,
-  piece: (id: string) => `/pieces/${id}/edit`,
+  piece: (id: string) => `/piece/${id}`,
-  composant: (id: string) => `/component/${id}/edit`,
+  composant: (id: string) => `/component/${id}`,
-  product: (id: string) => `/product/${id}/edit`,
+  product: (id: string) => `/product/${id}`,
   piece_category: (id: string) => `/piece-category/${id}/edit`,
   component_category: (id: string) => `/component-category/${id}/edit`,
   product_category: (id: string) => `/product-category/${id}/edit`,

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,22 +95,30 @@
           </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"
-              >
-                Modifier
-              </NuxtLink>
               <button
                 v-if="canEdit"
                 type="button"
-                class="btn btn-error btn-xs"
+                class="btn btn-ghost btn-xs"
+                @click="navigateTo(`/component/${row.component.id}?edit=true`)"
+              >
+                Modifier
+              </button>
+              <button
+                v-if="canEdit"
+                type="button"
+                class="btn btn-ghost btn-xs text-error"
                 :disabled="loadingComposants"
                 @click="handleDeleteComponent(row.component)"
               >
                 Supprimer
               </button>
+              <NuxtLink
+                :to="`/component/${row.component.id}`"
+                class="btn btn-primary btn-xs"
+              >
+                Détails
+              </NuxtLink>
             </div>
           </template>
         </DataTable>
@@ -136,7 +144,7 @@ const { componentTypes, loadComponentTypes } = useComponentTypes()
 
 const table = useDataTable(
   { fetchData: fetchComposants },
-  { defaultSort: 'name', defaultDirection: 'asc', defaultPerPage: 20, persistToUrl: true },
+  { defaultSort: 'name', defaultDirection: 'asc', defaultPerPage: 20, persistToUrl: true, columnFilterKeys: ['typeComposant'] },
 )
 
 const columns = [

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
@@ -124,9 +114,10 @@ const loadCategory = async () => {
       category: response.category,
       notes: response.notes ?? response.description ?? '',
       structure: (response.structure as ComponentModelStructure | null) ?? undefined,
+      referenceFormula: response.referenceFormula ?? null,
+      requiredFieldsForReference: response.requiredFieldsForReference ?? null,
     }
 
-    await loadLinkedCount(id)
   } catch (error) {
     showError(normalizeError(error))
     await navigateBackToList()
@@ -141,9 +132,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 +139,28 @@ 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 +168,38 @@ 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.')
+  } 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,10 +1,17 @@
 <template>
+  <div>
     <DocumentPreviewModal
       :document="previewDocument"
       :visible="previewVisible"
       :documents="componentDocuments"
       @close="closePreview"
     />
+    <DocumentEditModal
+      :visible="editModalVisible"
+      :document="editingDocument"
+      @close="editModalVisible = false"
+      @updated="handleDocumentUpdated"
+    />
     <main class="container mx-auto px-6 py-10">
     <div v-if="loading" class="flex flex-col items-center gap-4 py-20 text-center">
       <span class="loading loading-spinner loading-lg" aria-hidden="true" />
@@ -44,9 +51,10 @@
             <label class="label">
               <span class="label-text">Catégorie de composant</span>
             </label>
+            <div class="flex items-center gap-2">
               <select
                 v-model="selectedTypeId"
-              class="select select-bordered select-sm md:select-md"
+                class="select select-bordered select-sm md:select-md flex-1"
                 disabled
               >
                 <option value="">Sélectionner une catégorie</option>
@@ -58,6 +66,18 @@
                   {{ type.name }}
                 </option>
               </select>
+              <NuxtLink
+                v-if="selectedTypeId"
+                :to="`/component-category/${selectedTypeId}/edit`"
+                class="btn btn-ghost btn-sm"
+                title="Voir la catégorie"
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
+                  <path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z" />
+                  <path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z" />
+                </svg>
+              </NuxtLink>
+            </div>
             <p class="text-xs text-base-content/60 mt-1">
               La catégorie d'origine ne peut pas être modifiée depuis cette page.
             </p>
@@ -121,6 +141,11 @@
           </div>
         </div>
 
+        <ConstructeurLinksTable
+          v-if="constructeurLinks.length"
+          v-model="constructeurLinks"
+        />
+
         <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
           <div class="form-control">
             <label class="label">
@@ -151,45 +176,91 @@
         />
 
         <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>
+                <div class="flex items-start gap-2">
+                  <div class="flex-1">
+                    <PieceSelect
+                      :model-value="slot.selectedPieceId"
+                      :disabled="!canEdit || saving"
+                      :type-piece-id="slot.typePieceId"
+                      @update:model-value="(value) => setPieceSlotSelection(slot.slotId, value)"
+                    />
+                  </div>
+                  <div class="w-20 shrink-0">
+                    <input
+                      type="number"
+                      :value="slot.quantity"
+                      min="1"
+                      class="input input-bordered input-sm w-full text-center"
+                      :disabled="!canEdit || saving"
+                      title="Quantité"
+                      @change="(e) => setSlotQuantity(slot.slotId, Number((e.target as HTMLInputElement).value))"
+                    >
+                  </div>
+                </div>
+              </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) => setProductSlotSelection(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) => setSubcomponentSlotSelection(slot.slotId, value)"
+                />
+              </div>
             </div>
           </div>
         </div>
@@ -234,9 +305,11 @@
             v-else
             :documents="componentDocuments"
             :can-delete="canEdit"
+            :can-edit="true"
             :delete-disabled="uploadingDocuments"
             empty-text="Aucun document n'est associé à ce composant pour le moment."
             @preview="openPreview"
+            @edit="openEditModal"
             @delete="removeDocument"
           />
         </div>
@@ -248,11 +321,19 @@
           :field-labels="historyFieldLabels"
         />
 
+        <EntityVersionList
+          entity-type="composant"
+          :entity-id="String(route.params.id)"
+          :field-labels="historyFieldLabels"
+          :refresh-key="versionRefreshKey"
+          @restored="fetchComponent()"
+        />
+
         <div class="flex flex-col gap-3 md:flex-row md:justify-end">
           <NuxtLink to="/component-catalog" class="btn btn-ghost" :class="{ 'btn-disabled': saving }">
             Annuler
           </NuxtLink>
-          <button type="button" class="btn btn-primary" :disabled="!canSubmit" @click="submitEdition">
+          <button type="button" class="btn btn-primary" :disabled="!canSubmit" @click="async () => { await submitEdition(); versionRefreshKey++ }">
             <span v-if="saving" class="loading loading-spinner loading-sm mr-2" />
             Enregistrer les modifications
           </button>
@@ -270,495 +351,102 @@
       </div>
     </section>
     </main>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { ref, watch } from 'vue'
-import { useRoute, useRouter } from '#imports'
+import { useRoute } from '#imports'
-import ConstructeurSelect from '~/components/ConstructeurSelect.vue'
+import { useComponentEdit } from '~/composables/useComponentEdit'
-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 { updateDocument } = useDocuments()
-const { get } = useApi()
+const { getConstructeurById } = useConstructeurs()
-const { componentTypes, loadComponentTypes } = useComponentTypes()
+const versionRefreshKey = ref(0)
-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)
+  constructeurLinks,
-const componentDocuments = ref<any[]>([])
+  constructeurIdsFromForm,
-const previewDocument = ref<any | null>(null)
+  customFieldInputs,
-const previewVisible = ref(false)
+  historyFieldLabels,
-
+  canEdit,
-const historyFieldLabels: Record<string, string> = {
+  canSubmit,
-  name: 'Nom',
+  componentTypeList,
-  reference: 'Référence',
+  selectedType,
-  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,
-    }
+  setSlotQuantity,
+  setPieceSlotSelection,
+  setProductSlotSelection,
+  setSubcomponentSlotSelection,
+  resolvePieceLabel,
+  resolveProductLabel,
+  resolveSubcomponentLabel,
+  formatStructurePreview,
+  fetchComponent,
+} = useComponentEdit(String(route.params.id))
 
-    const productIds = getStructureProducts(structure)
+// Sync constructeurIds → constructeurLinks when IDs are added via ConstructeurSelect
-      .map((product: any) => product?.typeProductId)
+watch(
-      .filter((id: any): id is string => typeof id === 'string' && id.trim().length > 0)
+  () => editionForm.constructeurIds,
-    if (productIds.length) {
+  (ids) => {
-      fetchModelTypeNames(Array.from(new Set(productIds)), productTypeLabelMap.value, get)
+    const currentIds = new Set(constructeurLinks.value.map(l => l.constructeurId))
-        .then((additions) => {
+    for (const id of ids) {
-          if (Object.keys(additions).length) {
+      if (!currentIds.has(id)) {
-            fetchedProductTypeMap.value = { ...fetchedProductTypeMap.value, ...additions }
+        const resolved = getConstructeurById(id)
-          }
+        constructeurLinks.value.push({
+          constructeurId: id,
+          constructeur: resolved ? { id: resolved.id, name: resolved.name } : null,
+          supplierReference: null,
         })
-        .catch(() => {})
       }
+    }
+    // Remove links whose ID was removed from the select
+    constructeurLinks.value = constructeurLinks.value.filter(l => ids.includes(l.constructeurId))
   },
-  { immediate: true },
 )
 
-type SelectionEntry = {
+const editingDocument = ref<any | null>(null)
-  id: string
+const editModalVisible = ref(false)
-  path: string
+
-  requirementLabel: string
+const openEditModal = (doc: any) => {
-  resolvedName: string
+  editingDocument.value = doc
+  editModalVisible.value = true
 }
-
+const handleDocumentUpdated = async (data: { name?: string; type?: string }) => {
-const collectStructureSelections = (root: any): {
+  if (!editingDocument.value?.id) return
-  pieces: SelectionEntry[]
+  const result = await updateDocument(editingDocument.value.id, data)
-  products: SelectionEntry[]
+  if (result.success) {
-  components: SelectionEntry[]
+    const idx = componentDocuments.value.findIndex((d: any) => d.id === editingDocument.value?.id)
-} => {
+    if (idx !== -1) {
-  const piecesSelected: SelectionEntry[] = []
+      componentDocuments.value[idx] = { ...componentDocuments.value[idx], ...data }
-  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
   }
-
+  editModalVisible.value = false
-    const nodePath = isNonEmptyString(node.path) ? node.path : fallbackPath
+  editingDocument.value = null
-
-    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/[id]/index.vue

@@ -0,0 +1,558 @@
+<template>
+  <div>
+    <DocumentPreviewModal
+      :document="previewDocument"
+      :visible="previewVisible"
+      :documents="componentDocuments"
+      @close="closePreview"
+    />
+    <DocumentEditModal
+      :visible="editModalVisible"
+      :document="editingDocument"
+      @close="editModalVisible = false"
+      @updated="handleDocumentUpdated"
+    />
+    <main class="container mx-auto px-6 py-10">
+      <div v-if="loading" class="flex flex-col items-center gap-4 py-20 text-center">
+        <span class="loading loading-spinner loading-lg" aria-hidden="true" />
+        <p class="text-sm text-base-content/70">Chargement du composant…</p>
+      </div>
+
+      <div v-else-if="!component" class="max-w-xl mx-auto">
+        <div class="alert alert-error shadow-lg">
+          <div>
+            <h2 class="font-semibold text-lg">Composant introuvable</h2>
+            <p class="text-sm text-base-content/80">
+              Nous n'avons pas pu retrouver le composant demandé. Il a peut-être été supprimé.
+            </p>
+          </div>
+        </div>
+        <button type="button" class="btn btn-primary mt-6" @click="$router.back()">
+          Retour au catalogue
+        </button>
+      </div>
+
+      <section v-else class="card border border-base-200 bg-base-100 shadow-sm max-w-5xl mx-auto">
+        <div class="card-body space-y-6">
+          <DetailHeader
+            :title="isEditMode ? 'Modifier le composant' : component.name"
+            :subtitle="isEditMode ? 'Ajustez les informations du composant et ses champs personnalisés.' : undefined"
+            :is-edit-mode="isEditMode"
+            :can-edit="canEdit"
+            back-link="/component-catalog"
+            @toggle-edit="isEditMode = !isEditMode"
+          />
+
+          <!-- Catégorie (always shown) -->
+          <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+            <div class="form-control">
+              <label class="label">
+                <span class="label-text">Catégorie de composant</span>
+              </label>
+              <template v-if="isEditMode">
+                <div class="flex items-center gap-2">
+                  <select
+                    v-model="selectedTypeId"
+                    class="select select-bordered select-sm md:select-md flex-1"
+                    disabled
+                  >
+                    <option value="">Sélectionner une catégorie</option>
+                    <option
+                      v-for="type in componentTypeList"
+                      :key="type.id"
+                      :value="type.id"
+                    >
+                      {{ type.name }}
+                    </option>
+                  </select>
+                  <NuxtLink
+                    v-if="selectedTypeId"
+                    :to="`/component-category/${selectedTypeId}/edit`"
+                    class="btn btn-ghost btn-sm"
+                    title="Voir la catégorie"
+                  >
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
+                      <path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z" />
+                      <path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z" />
+                    </svg>
+                  </NuxtLink>
+                </div>
+                <p class="text-xs text-base-content/60 mt-1">
+                  La catégorie d'origine ne peut pas être modifiée depuis cette page.
+                </p>
+              </template>
+              <div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center">
+                {{ selectedType?.name || '—' }}
+              </div>
+            </div>
+          </div>
+
+          <!-- Nom (always shown) -->
+          <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+            <div class="form-control">
+              <label class="label">
+                <span class="label-text">Nom du composant</span>
+              </label>
+              <input
+                v-if="isEditMode"
+                v-model="editionForm.name"
+                type="text"
+                class="input input-bordered input-sm md:input-md"
+                :disabled="!canEdit || saving"
+                placeholder="Nom affiché dans le catalogue"
+                required
+              >
+              <div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center">
+                {{ component.name }}
+              </div>
+            </div>
+          </div>
+
+          <!-- Description (if value or edit mode) -->
+          <div v-if="isEditMode || component.description" class="form-control">
+            <label class="label">
+              <span class="label-text">Description</span>
+            </label>
+            <textarea
+              v-if="isEditMode"
+              v-model="editionForm.description"
+              class="textarea textarea-bordered textarea-sm md:textarea-md"
+              :disabled="!canEdit || saving"
+              placeholder="Description du composant (optionnel)"
+              rows="3"
+            />
+            <div v-else class="textarea textarea-bordered textarea-sm md:textarea-md bg-base-200">
+              {{ component.description }}
+            </div>
+          </div>
+
+          <!-- Référence + Fournisseurs (if value or edit mode) -->
+          <div
+            v-if="isEditMode || component.reference || constructeurLinks.length"
+            class="grid grid-cols-1 gap-4 md:grid-cols-2"
+          >
+            <div v-if="isEditMode || component.reference" class="form-control">
+              <label class="label">
+                <span class="label-text">Référence</span>
+              </label>
+              <input
+                v-if="isEditMode"
+                v-model="editionForm.reference"
+                type="text"
+                class="input input-bordered input-sm md:input-md"
+                :disabled="!canEdit || saving"
+                placeholder="Référence interne ou fournisseur"
+              >
+              <div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center">
+                {{ component.reference }}
+              </div>
+            </div>
+
+            <div v-if="isEditMode || constructeurLinks.length" class="form-control">
+              <label class="label">
+                <span class="label-text">Fournisseur</span>
+              </label>
+              <ConstructeurSelect
+                v-if="isEditMode"
+                v-model="editionForm.constructeurIds"
+                class="w-full"
+                :disabled="!canEdit || saving"
+                placeholder="Rechercher un ou plusieurs fournisseurs..."
+                :initial-options="component?.constructeurs || []"
+              />
+            </div>
+          </div>
+
+          <!-- Constructeur links table -->
+          <ConstructeurLinksTable
+            v-if="isEditMode && constructeurLinks.length"
+            v-model="constructeurLinks"
+          />
+          <ConstructeurLinksTable
+            v-else-if="!isEditMode && constructeurLinks.length"
+            :model-value="constructeurLinks"
+            :readonly="true"
+          />
+
+          <!-- Prix (if value or edit mode) -->
+          <div v-if="isEditMode || component.prix" class="grid grid-cols-1 gap-4 md:grid-cols-2">
+            <div class="form-control">
+              <label class="label">
+                <span class="label-text">Prix indicatif (€)</span>
+              </label>
+              <input
+                v-if="isEditMode"
+                v-model="editionForm.prix"
+                type="number"
+                step="0.01"
+                min="0"
+                class="input input-bordered input-sm md:input-md"
+                :disabled="!canEdit || saving"
+                placeholder="Valeur indicatrice"
+              >
+              <div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center">
+                {{ component.prix }} €
+              </div>
+            </div>
+          </div>
+
+          <!-- Skeleton preview (edit mode only) -->
+          <StructureSkeletonPreview
+            v-if="isEditMode && selectedType"
+            :structure="selectedTypeStructure"
+            :description="selectedType.description || 'Ce squelette définit la structure et les contraintes du composant.'"
+            :preview-badge="formatStructurePreview(selectedTypeStructure)"
+            variant="component"
+            show-empty-state
+            :resolve-piece-label="resolvePieceLabel"
+            :resolve-product-label="resolveProductLabel"
+            :resolve-subcomponent-label="resolveSubcomponentLabel"
+          />
+
+          <!-- Skeleton slot selections -->
+          <div
+            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">{{ isEditMode ? 'Sélections du squelette' : 'Structure du composant' }}</h2>
+              <p class="text-xs text-base-content/70">
+                {{ isEditMode ? 'Choisissez les pièces, produits et sous-composants pour chaque emplacement requis par la catégorie.' : 'Pièces, produits et sous-composants associés à ce composant.' }}
+              </p>
+            </header>
+
+            <div v-if="pieceSlotEntries.length" class="space-y-2">
+              <h3 class="font-semibold text-sm text-base-content">Pièces</h3>
+              <div class="grid grid-cols-1 gap-3 md:grid-cols-2">
+                <div
+                  v-for="slot in pieceSlotEntries"
+                  :key="`piece-slot-${slot.slotId}`"
+                  class="form-control"
+                >
+                  <label class="label">
+                    <span class="label-text text-xs font-medium">{{ slot.label }}</span>
+                  </label>
+                  <template v-if="isEditMode">
+                    <div class="flex items-start gap-2">
+                      <div class="flex-1">
+                        <PieceSelect
+                          :model-value="slot.selectedPieceId"
+                          :disabled="!canEdit || saving"
+                          :type-piece-id="slot.typePieceId"
+                          @update:model-value="(value) => setPieceSlotSelection(slot.slotId, value)"
+                        />
+                      </div>
+                      <div class="w-20 shrink-0">
+                        <input
+                          type="number"
+                          :value="slot.quantity"
+                          min="1"
+                          class="input input-bordered input-sm w-full text-center"
+                          :disabled="!canEdit || saving"
+                          title="Quantité"
+                          @change="(e) => setSlotQuantity(slot.slotId, Number((e.target as HTMLInputElement).value))"
+                        >
+                      </div>
+                    </div>
+                  </template>
+                  <div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center gap-2">
+                    {{ slot.selectedPieceName || '— Non sélectionné' }}
+                    <span v-if="slot.quantity > 1" class="badge badge-sm">x{{ slot.quantity }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div v-if="productSlotEntries.length" class="space-y-2">
+              <h3 class="font-semibold text-sm text-base-content">Produits</h3>
+              <div class="grid grid-cols-1 gap-3 md:grid-cols-2">
+                <div
+                  v-for="slot in productSlotEntries"
+                  :key="`product-slot-${slot.slotId}`"
+                  class="form-control"
+                >
+                  <label class="label">
+                    <span class="label-text text-xs font-medium">{{ slot.label }}</span>
+                  </label>
+                  <template v-if="isEditMode">
+                    <ProductSelect
+                      :model-value="slot.selectedProductId"
+                      :disabled="!canEdit || saving"
+                      :type-product-id="slot.typeProductId"
+                      @update:model-value="(value) => setProductSlotSelection(slot.slotId, value)"
+                    />
+                  </template>
+                  <div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center">
+                    {{ slot.selectedProductName || '— Non sélectionné' }}
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div v-if="subcomponentSlotEntries.length" class="space-y-2">
+              <h3 class="font-semibold text-sm text-base-content">Sous-composants</h3>
+              <div class="grid grid-cols-1 gap-3 md:grid-cols-2">
+                <div
+                  v-for="slot in subcomponentSlotEntries"
+                  :key="`sub-slot-${slot.slotId}`"
+                  class="form-control"
+                >
+                  <label class="label">
+                    <span class="label-text text-xs font-medium">{{ slot.label }}</span>
+                  </label>
+                  <template v-if="isEditMode">
+                    <ComposantSelect
+                      :model-value="slot.selectedComponentId"
+                      :disabled="!canEdit || saving"
+                      :type-composant-id="slot.typeComposantId"
+                      @update:model-value="(value) => setSubcomponentSlotSelection(slot.slotId, value)"
+                    />
+                  </template>
+                  <div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center">
+                    {{ slot.selectedComponentName || '— Non sélectionné' }}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Custom fields -->
+          <div v-if="visibleCustomFields.length" class="space-y-4 rounded-lg border border-base-200 bg-base-200/40 p-4">
+            <header class="space-y-1">
+              <h2 class="font-semibold text-base-content">Champs personnalisés</h2>
+              <p v-if="isEditMode" class="text-xs text-base-content/70">
+                Mettez à jour les valeurs propres à ce composant.
+              </p>
+            </header>
+            <template v-if="isEditMode">
+              <CustomFieldInputGrid :fields="customFieldInputs" :disabled="!canEdit || saving" />
+            </template>
+            <template v-else>
+              <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+                <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 flex items-center">
+                    {{ field.value }}
+                  </div>
+                </div>
+              </div>
+            </template>
+          </div>
+
+          <!-- Documents -->
+          <div
+            v-if="isEditMode || componentDocuments.length > 0"
+            class="space-y-4 rounded-lg border border-base-200 bg-base-200/40 p-4"
+          >
+            <header class="flex flex-col gap-1 md:flex-row md:items-center md:justify-between">
+              <div>
+                <h2 class="font-semibold text-base-content">Documents</h2>
+                <p class="text-xs text-base-content/70">
+                  {{ isEditMode ? 'Gérez les documents associés à ce composant.' : 'Documents associés à ce composant.' }}
+                </p>
+              </div>
+              <span v-if="isEditMode && selectedFiles.length" class="badge badge-outline">
+                {{ selectedFiles.length }} document{{ selectedFiles.length > 1 ? 's' : '' }} prêt{{ selectedFiles.length > 1 ? 's' : '' }} à être ajouté{{ selectedFiles.length > 1 ? 's' : '' }}
+              </span>
+            </header>
+            <template v-if="isEditMode">
+              <div :class="{ 'pointer-events-none opacity-60': !canEdit || saving || uploadingDocuments }">
+                <DocumentUpload
+                  v-model="selectedFiles"
+                  title="Déposer vos fichiers"
+                  subtitle="Formats acceptés : PDF, images, documents…"
+                  @files-added="handleFilesAdded"
+                />
+              </div>
+              <p v-if="uploadingDocuments" class="text-xs text-base-content/70">
+                Téléversement des documents en cours…
+              </p>
+              <p v-else-if="loadingDocuments" class="text-xs text-base-content/70">
+                Chargement des documents en cours…
+              </p>
+              <DocumentListInline
+                v-else
+                :documents="componentDocuments"
+                :can-delete="canEdit"
+                :can-edit="true"
+                :delete-disabled="uploadingDocuments"
+                empty-text="Aucun document n'est associé à ce composant pour le moment."
+                @preview="openPreview"
+                @edit="openEditModal"
+                @delete="removeDocument"
+              />
+            </template>
+            <template v-else>
+              <p v-if="loadingDocuments" class="text-xs text-base-content/70">
+                Chargement des documents en cours…
+              </p>
+              <DocumentListInline
+                v-else
+                :documents="componentDocuments"
+                :can-delete="false"
+                :can-edit="false"
+                empty-text="Aucun document n'est associé à ce composant pour le moment."
+                @preview="openPreview"
+              />
+            </template>
+          </div>
+
+          <EntityHistorySection
+            :entries="history"
+            :loading="historyLoading"
+            :error="historyError"
+            :field-labels="historyFieldLabels"
+          />
+
+          <!-- Save buttons (edit mode only) -->
+          <div v-if="isEditMode" class="flex flex-col gap-3 md:flex-row md:justify-end">
+            <button type="button" class="btn btn-ghost" :class="{ 'btn-disabled': saving }" @click="isEditMode = false">
+              Annuler
+            </button>
+            <button type="button" class="btn btn-primary" :disabled="!canSubmit" @click="submitEdition">
+              <span v-if="saving" class="loading loading-spinner loading-sm mr-2" />
+              Enregistrer les modifications
+            </button>
+          </div>
+
+          <!-- Comments -->
+          <div class="mt-4">
+            <CommentSection
+              entity-type="composant"
+              :entity-id="String(route.params.id)"
+              :entity-name="component?.name"
+              show-resolved
+            />
+          </div>
+        </div>
+      </section>
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue'
+import { useRoute } from '#imports'
+import { useComponentEdit } from '~/composables/useComponentEdit'
+import { useDocuments } from '~/composables/useDocuments'
+import { usePermissions } from '~/composables/usePermissions'
+import { useConstructeurs } from '~/composables/useConstructeurs'
+import type { ConstructeurLinkEntry } from '~/shared/constructeurUtils'
+
+const route = useRoute()
+const { canEdit } = usePermissions()
+const { getConstructeurById } = useConstructeurs()
+const { updateDocument } = useDocuments()
+
+const isEditMode = ref(false)
+
+const {
+  component,
+  loading,
+  saving,
+  selectedFiles,
+  uploadingDocuments,
+  loadingDocuments,
+  componentDocuments,
+  previewDocument,
+  previewVisible,
+  selectedTypeId,
+  editionForm,
+  constructeurLinks,
+  constructeurIdsFromForm,
+  customFieldInputs,
+  historyFieldLabels,
+  canSubmit,
+  componentTypeList,
+  selectedType,
+  selectedTypeStructure,
+  pieceSlotEntries,
+  productSlotEntries,
+  subcomponentSlotEntries,
+  history,
+  historyLoading,
+  historyError,
+  openPreview,
+  closePreview,
+  removeDocument,
+  handleFilesAdded,
+  submitEdition: _submitEdition,
+  fetchComponent,
+  setSlotQuantity,
+  setPieceSlotSelection,
+  setProductSlotSelection,
+  setSubcomponentSlotSelection,
+  resolvePieceLabel,
+  resolveProductLabel,
+  resolveSubcomponentLabel,
+  formatStructurePreview,
+} = useComponentEdit(String(route.params.id))
+
+const submitEdition = async () => {
+  await _submitEdition()
+  if (!saving.value) {
+    await fetchComponent()
+    isEditMode.value = false
+  }
+}
+
+// Sync constructeurIds → constructeurLinks when IDs are added via ConstructeurSelect
+watch(
+  () => editionForm.constructeurIds,
+  (ids) => {
+    const currentIds = new Set(constructeurLinks.value.map(l => l.constructeurId))
+    for (const id of ids) {
+      if (!currentIds.has(id)) {
+        const resolved = getConstructeurById(id)
+        constructeurLinks.value.push({
+          constructeurId: id,
+          constructeur: resolved ? { id: resolved.id, name: resolved.name } : null,
+          supplierReference: null,
+        })
+      }
+    }
+    // Remove links whose ID was removed from the select
+    constructeurLinks.value = constructeurLinks.value.filter(l => ids.includes(l.constructeurId))
+  },
+)
+
+const editingDocument = ref<any | null>(null)
+const editModalVisible = ref(false)
+
+const visibleCustomFields = computed(() => {
+  if (isEditMode.value) return customFieldInputs.value
+  return customFieldInputs.value.filter(
+    (f) => f.value !== null && f.value !== undefined && f.value !== '',
+  )
+})
+
+const openEditModal = (doc: any) => {
+  editingDocument.value = doc
+  editModalVisible.value = true
+}
+
+const handleDocumentUpdated = async (data: { name?: string; type?: string }) => {
+  if (!editingDocument.value?.id) return
+  const result = await updateDocument(editingDocument.value.id, data)
+  if (result.success) {
+    const idx = componentDocuments.value.findIndex((d: any) => d.id === editingDocument.value?.id)
+    if (idx !== -1) {
+      componentDocuments.value[idx] = { ...componentDocuments.value[idx], ...data }
+    }
+  }
+  editModalVisible.value = false
+  editingDocument.value = null
+}
+
+onMounted(() => {
+  if (route.query.edit === 'true' && canEdit.value) {
+    isEditMode.value = true
+  }
+})
+</script>

app/pages/component/create.vue

@@ -92,6 +92,11 @@
           </div>
         </div>
 
+        <ConstructeurLinksTable
+          v-if="constructeurLinks.length"
+          v-model="constructeurLinks"
+        />
+
         <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
           <div class="form-control">
             <label class="label">
@@ -215,567 +220,63 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { watch } from 'vue'
-import { useRoute, useRouter } from '#imports'
+import { useConstructeurs } from '~/composables/useConstructeurs'
-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 {
+const { getConstructeurById } = useConstructeurs()
-  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()
+  constructeurLinks,
-const {
+  customFieldInputs,
-  pieces: pieceCatalogRef,
+  structureAssignments,
-  loading: piecesLoading,
+  selectedDocuments,
-} = usePieces()
+  uploadingDocuments,
-const {
+  loadingTypes,
-  products: productCatalogRef,
+  componentTypeList,
-  loading: productsLoading,
+  selectedType,
-} = 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,
+  canSubmit,
+  typeOptionLabel,
+  typeOptionDescription,
+  formatStructurePreview,
+  resolvePieceLabel,
+  resolveProductLabel,
+  resolveSubcomponentLabel,
+  submitCreation,
+} = useComponentCreate()
+
+// Sync constructeurIds → constructeurLinks when IDs are added via ConstructeurSelect
+watch(
+  () => creationForm.constructeurIds,
+  (ids) => {
+    const currentIds = new Set(constructeurLinks.value.map(l => l.constructeurId))
+    for (const id of ids) {
+      if (!currentIds.has(id)) {
+        const resolved = getConstructeurById(id)
+        constructeurLinks.value.push({
+          constructeurId: id,
+          constructeur: resolved ? { id: resolved.id, name: resolved.name } : null,
+          supplierReference: null,
         })
-      .catch(() => {})
+      }
+    }
+    constructeurLinks.value = constructeurLinks.value.filter(l => ids.includes(l.constructeurId))
   },
-  { immediate: true },
 )
-
-const clearCreationForm = () => {
-  creationForm.name = ''
-  creationForm.description = ''
-  creationForm.reference = ''
-  creationForm.constructeurIds = []
-  creationForm.prix = ''
-  lastSuggestedName.value = ''
-  structureAssignments.value = null
-}
-
-const submitCreation = async () => {
-  if (!selectedType.value) {
-    toast.showError('Sélectionnez une catégorie de composant.')
-    return
-  }
-  const payload: Record<string, any> = {
-    name: creationForm.name.trim(),
-    typeComposantId: selectedType.value.id,
-  }
-
-  const description = creationForm.description.trim()
-  if (description) {
-    payload.description = description
-  }
-
-  const reference = creationForm.reference.trim()
-  if (reference) {
-    payload.reference = reference
-  }
-
-  if (creationForm.constructeurIds.length) {
-    payload.constructeurIds = uniqueConstructeurIds(creationForm.constructeurIds)
-  }
-
-  const rawPrice = typeof creationForm.prix === 'string'
-    ? creationForm.prix.trim()
-    : creationForm.prix === null || creationForm.prix === undefined
-      ? ''
-      : String(creationForm.prix).trim()
-
-  if (rawPrice) {
-    const parsed = Number(rawPrice)
-    if (!Number.isNaN(parsed)) {
-      payload.prix = String(parsed)
-    }
-  }
-
-  const rootProductSelection =
-    structureAssignments.value?.products?.find(
-      (product) => typeof product.selectedProductId === 'string' && product.selectedProductId.trim().length > 0,
-    ) ?? null
-
-  if (rootProductSelection?.selectedProductId) {
-    payload.productId = rootProductSelection.selectedProductId.trim()
-  }
-
-  if (structureHasRequirements.value && !structureSelectionsComplete.value) {
-    toast.showError('Complétez la sélection des pièces, produits et sous-composants.')
-    return
-  }
-
-  const serializedStructure = structureHasRequirements.value
-    ? serializeStructureAssignments(structureAssignments.value)
-    : null
-
-  if (serializedStructure) {
-    payload.structure = serializedStructure
-  }
-
-  submitting.value = true
-  try {
-    const result = await createComposant(payload)
-    if (result.success) {
-      const createdComponent = result.data as Record<string, any>
-      await _saveCustomFieldValues(
-        'composant',
-        createdComponent.id,
-        [createdComponent?.typeComposant?.customFields],
-        { customFieldInputs, upsertCustomFieldValue, updateCustomFieldValue, toast },
-      )
-      if (selectedDocuments.value.length && result.data?.id) {
-        uploadingDocuments.value = true
-        const uploadResult = await uploadDocuments(
-          {
-            files: selectedDocuments.value,
-            context: { composantId: result.data.id },
-          },
-          { updateStore: false },
-        )
-        if (!uploadResult.success) {
-          const message = uploadResult.error
-            ? `Documents non ajoutés : ${uploadResult.error}`
-            : 'Documents non ajoutés : une erreur est survenue.'
-          toast.showError(message)
-        }
-        selectedDocuments.value = []
-      }
-      toast.showSuccess('Composant créé avec succès')
-      await router.push('/component-catalog')
-    } else if (result.error) {
-      toast.showError(result.error)
-    }
-  } catch (error: any) {
-    toast.showError(humanizeError(error?.message) || 'Impossible de créer le composant')
-  } finally {
-    submitting.value = false
-    uploadingDocuments.value = false
-  }
-}
-
-onMounted(async () => {
-  await Promise.allSettled([
-    loadComponentTypes(),
-    loadPieceTypes(),
-    loadProductTypes(),
-  ])
-})
 </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,14 @@
       @close="closePreview"
     />
 
-    <section class="card bg-base-100 shadow-lg">
+    <DocumentEditModal
+      :visible="editModalVisible"
+      :document="editingDocument"
+      @close="editModalVisible = false"
+      @updated="handleDocumentUpdated"
+    />
+
+    <section class="card bg-base-100 shadow-sm">
       <div class="card-body space-y-6">
         <DataTable
           :columns="columns"
@@ -55,6 +62,26 @@
                 <option value="product">Produits</option>
               </select>
             </div>
+
+            <div class="flex items-center gap-2">
+              <label
+                class="text-xs font-semibold uppercase tracking-wide text-base-content/70"
+                for="doc-type-filter"
+              >
+                Type
+              </label>
+              <select
+                id="doc-type-filter"
+                v-model="typeFilter"
+                class="select select-bordered select-sm"
+                @change="table.handleFilterChange"
+              >
+                <option value="all">Tous</option>
+                <option v-for="t in DOCUMENT_TYPES" :key="t.value" :value="t.value">
+                  {{ t.label }}
+                </option>
+              </select>
+            </div>
           </template>
 
           <template #cell-name="{ row }">
@@ -68,7 +95,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>
@@ -77,6 +104,10 @@
             {{ row.mimeType || 'Inconnu' }}
           </template>
 
+          <template #cell-type="{ row }">
+            <span class="badge badge-sm badge-outline">{{ getDocumentTypeLabel(row.type || 'documentation') }}</span>
+          </template>
+
           <template #cell-size="{ row }">
             {{ formatSize(row.size) }}
           </template>
@@ -88,7 +119,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>
 
@@ -98,6 +129,14 @@
 
           <template #cell-actions="{ row }">
             <div class="flex justify-end gap-2">
+              <button
+                v-if="canEdit"
+                class="btn btn-ghost btn-xs"
+                type="button"
+                @click="openEditModal(row)"
+              >
+                Modifier
+              </button>
               <button
                 class="btn btn-ghost btn-xs"
                 type="button"
@@ -123,12 +162,15 @@ import { computed, onMounted, ref, type Ref } from 'vue'
 import DataTable from '~/components/common/DataTable.vue'
 import { useDocuments } from '~/composables/useDocuments'
 import { useDataTable } from '~/composables/useDataTable'
+import { usePermissions } from '~/composables/usePermissions'
 import { getFileIcon } from '~/utils/fileIcons'
 import { canPreviewDocument } from '~/utils/documentPreview'
 import { formatFrenchDate } from '~/utils/date'
+import { DOCUMENT_TYPES, getDocumentTypeLabel } from '~/shared/documentTypes'
 import DocumentPreviewModal from '~/components/DocumentPreviewModal.vue'
 
-const { documents, total, loading, loadDocuments } = useDocuments()
+const { documents, total, loading, loadDocuments, updateDocument } = useDocuments()
+const { canEdit } = usePermissions()
 
 const table = useDataTable(
   { fetchData: fetchDocuments },
@@ -139,21 +181,26 @@ const table = useDataTable(
     persistToUrl: true,
     extraParams: {
       filter: { default: 'all' },
+      typeFilter: { default: 'all' },
     },
   },
 )
 
 const attachmentFilter = table.filters.filter as Ref<string>
+const typeFilter = table.filters.typeFilter as Ref<string>
 
 const previewDocument = ref<any>(null)
 const previewVisible = ref(false)
+const editingDocument = ref<any>(null)
+const editModalVisible = ref(false)
 
 const documentsOnPage = computed(() => documents.value.length)
 const paginationState = table.pagination(total, documentsOnPage)
 
 const columns = [
   { key: 'name', label: 'Nom', sortable: true, sortKey: 'name' },
-  { key: 'mimeType', label: 'Type' },
+  { key: 'mimeType', label: 'Type MIME' },
+  { key: 'type', label: 'Type' },
   { key: 'size', label: 'Taille', sortable: true, sortKey: 'size' },
   { key: 'attachment', label: 'Rattaché à' },
   { key: 'createdAt', label: 'Date', sortable: true, sortKey: 'createdAt' },
@@ -168,6 +215,7 @@ async function fetchDocuments() {
     orderBy: table.sortField.value,
     orderDir: table.sortDirection.value as 'asc' | 'desc',
     attachmentFilter: attachmentFilter.value,
+    type: typeFilter.value,
     force: true,
   })
 }
@@ -198,6 +246,25 @@ const closePreview = () => {
   previewDocument.value = null
 }
 
+const openEditModal = (doc: any) => {
+  editingDocument.value = doc
+  editModalVisible.value = true
+}
+
+const handleDocumentUpdated = async (data: { name: string; type: string }) => {
+  if (!editingDocument.value?.id) return
+  const result = await updateDocument(editingDocument.value.id, data)
+  if (result.success) {
+    const doc = documents.value.find((d) => d.id === editingDocument.value.id)
+    if (doc) {
+      doc.name = data.name
+      doc.type = data.type
+    }
+  }
+  editModalVisible.value = false
+  editingDocument.value = null
+}
+
 onMounted(() => {
   fetchDocuments()
 })

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">
@@ -49,24 +54,34 @@
 
       <!-- Machine Info Card -->
       <MachineInfoCard
+        ref="machineInfoCardRef"
         :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"
+        :constructeur-links="d.constructeurLinks.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"
+        @update:constructeur-links="d.constructeurLinks.value = $event"
+        @remove-constructeur-link="handleRemoveConstructeurLink"
         @set-custom-field-value="d.setMachineCustomFieldValue"
-        @update-custom-field="d.updateMachineCustomField"
+        @custom-fields-saved="() => { d.loadMachineData(); refreshVersions() }"
       />
 
       <!-- Documents -->
       <MachineDocumentsCard
+        v-if="d.isEditMode.value || d.machineDocumentsList.value.length > 0"
         :documents="d.machineDocumentsList.value"
         :is-edit-mode="d.isEditMode.value"
         :uploading="d.machineDocumentsUploading.value"
@@ -80,14 +95,16 @@
 
       <!-- Produits associés -->
       <MachineProductsCard
+        v-if="d.isEditMode.value || d.machineDirectProducts.value.length > 0"
         :products="d.machineDirectProducts.value"
         :is-edit-mode="d.isEditMode.value"
         @add-product="openAddModal('product')"
-        @remove-product="d.removeProductLink"
+        @remove-product="async (id) => { await d.removeProductLink(id); refreshVersions() }"
       />
 
       <!-- Components Section -->
       <MachineComponentsCard
+        v-if="d.isEditMode.value || d.components.value.length > 0"
         :components="d.components.value"
         :is-edit-mode="d.isEditMode.value"
         :collapsed="d.componentsCollapsed.value"
@@ -97,11 +114,12 @@
         @edit-piece="d.updatePieceFromComponent"
         @custom-field-update="d.updatePieceCustomField"
         @add-component="openAddModal('component')"
-        @remove-component="d.removeComponentLink"
+        @remove-component="async (id) => { await d.removeComponentLink(id); refreshVersions() }"
       />
 
       <!-- Machine Pieces Section -->
       <MachinePiecesCard
+        v-if="d.isEditMode.value || d.machinePieces.value.length > 0"
         :pieces="d.machinePieces.value"
         :is-edit-mode="d.isEditMode.value"
         :collapsed="d.piecesCollapsed.value"
@@ -110,7 +128,7 @@
         @edit-piece="d.editPiece"
         @custom-field-update="d.updatePieceCustomField"
         @add-piece="openAddModal('piece')"
-        @remove-piece="d.removePieceLink"
+        @remove-piece="async (id) => { await d.removePieceLink(id); refreshVersions() }"
         @toggle-collapse="d.toggleAllPieces"
       />
 
@@ -122,6 +140,46 @@
         @confirm="handleAddEntity"
       />
 
+      <!-- Save / Cancel buttons -->
+      <div v-if="d.isEditMode.value" class="flex flex-col gap-3 md:flex-row md:justify-end">
+        <button
+          type="button"
+          class="btn btn-ghost"
+          :class="{ 'btn-disabled': d.saving.value }"
+          @click="d.cancelEdition()"
+        >
+          Annuler
+        </button>
+        <button
+          type="button"
+          class="btn btn-primary"
+          :disabled="!d.canSubmit.value"
+          @click="submitMachineEdition"
+        >
+          <span v-if="d.saving.value" class="loading loading-spinner loading-sm mr-2" />
+          Enregistrer les modifications
+        </button>
+      </div>
+
+      <!-- Historique -->
+      <EntityHistorySection
+        :entries="history"
+        :loading="historyLoading"
+        :error="historyError"
+        :field-labels="historyFieldLabels"
+      />
+
+      <!-- Versions -->
+      <EntityVersionList
+        ref="versionListRef"
+        entity-type="machine"
+        :entity-id="String(machineId)"
+        :field-labels="historyFieldLabels"
+        :refresh-key="versionRefreshKey"
+        @restored="d.loadMachineData()"
+
+      />
+
       <!-- Comments -->
       <div class="mt-4">
         <CommentSection
@@ -136,12 +194,14 @@
     <!-- 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>
-        <NuxtLink to="/machines" class="btn btn-primary">
+        <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>
+        <button type="button" class="btn btn-primary" @click="$router.back()">
           Retour aux machines
-        </NuxtLink>
+        </button>
       </div>
     </div>
     </main>
@@ -156,12 +216,14 @@
       @select-all="d.setAllPrintSelection(true)"
       @deselect-all="d.setAllPrintSelection(false)"
     />
+  </div>
 </template>
 
 <script setup>
 import { computed, ref, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
 import { useMachineDetailData } from '~/composables/useMachineDetailData'
+import { useEntityHistory } from '~/composables/useEntityHistory'
 import DocumentPreviewModal from '~/components/DocumentPreviewModal.vue'
 import PageHero from '~/components/PageHero.vue'
 import MachinePrintSelectionModal from '~/components/MachinePrintSelectionModal.vue'
@@ -172,6 +234,8 @@ import MachineProductsCard from '~/components/machine/MachineProductsCard.vue'
 import MachineComponentsCard from '~/components/machine/MachineComponentsCard.vue'
 import MachinePiecesCard from '~/components/machine/MachinePiecesCard.vue'
 import AddEntityToMachineModal from '~/components/machine/AddEntityToMachineModal.vue'
+import EntityHistorySection from '~/components/common/EntityHistorySection.vue'
+import EntityVersionList from '~/components/common/EntityVersionList.vue'
 import IconLucideAlertTriangle from '~icons/lucide/alert-triangle'
 
 const route = useRoute()
@@ -183,6 +247,33 @@ if (!machineId) {
 }
 
 const d = useMachineDetailData(machineId)
+const machineInfoCardRef = ref(null)
+const versionRefreshKey = ref(0)
+const refreshVersions = () => { versionRefreshKey.value++ }
+
+const {
+  history,
+  loading: historyLoading,
+  error: historyError,
+  loadHistory,
+} = useEntityHistory('machine')
+
+const historyFieldLabels = {
+  name: 'Nom',
+  reference: 'Référence',
+  prix: 'Prix',
+  site: 'Site',
+  constructeurIds: 'Fournisseurs',
+  addedComponent: 'Composant ajouté',
+  removedComponent: 'Composant supprimé',
+  addedPiece: 'Pièce ajoutée',
+  removedPiece: 'Pièce supprimée',
+  addedProduct: 'Produit ajouté',
+  removedProduct: 'Produit supprimé',
+  componentLinks: 'Composants liés',
+  pieceLinks: 'Pièces liées',
+  productLinks: 'Produits liés',
+}
 
 const addModalOpen = ref(false)
 const addModalKind = ref('component')
@@ -192,6 +283,11 @@ const openAddModal = (kind) => {
   addModalOpen.value = true
 }
 
+const handleRemoveConstructeurLink = (constructeurId) => {
+  const ids = d.machineConstructeurIds.value.filter(id => id !== constructeurId)
+  d.handleMachineConstructeurChange(ids)
+}
+
 const handleAddEntity = async (entityId) => {
   if (addModalKind.value === 'component') {
     await d.addComponentLink(entityId)
@@ -200,15 +296,25 @@ const handleAddEntity = async (entityId) => {
   } else {
     await d.addProductLink(entityId)
   }
+  refreshVersions()
 }
 
 const machineViewTitle = computed(() => {
   return d.isEditMode.value ? 'Modification de la machine' : 'Détails de la machine'
 })
 
+const submitMachineEdition = async () => {
+  if (machineInfoCardRef.value?.saveFieldDefinitions) {
+    await machineInfoCardRef.value.saveFieldDefinitions()
+  }
+  await d.submitEdition()
+  refreshVersions()
+}
+
 onMounted(() => {
   d.loadMachineData()
   d.loadInitialData()
+  loadHistory(String(machineId)).catch(() => {})
 
   if (route.query.edit === 'true' && canEdit.value) {
     d.isEditMode.value = true

app/pages/machines/index.vue

@@ -11,21 +11,28 @@
         </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">
               <label class="label">
-                <span class="label-text">Site</span>
+                <span class="label-text">Sites</span>
               </label>
-              <select v-model="selectedSite" class="select select-bordered">
+              <div class="flex flex-wrap gap-3">
-                <option value="">
+                <label
-                  Tous les sites
+                  v-for="site in sites"
-                </option>
+                  :key="site.id"
-                <option v-for="site in sites" :key="site.id" :value="site.id">
+                  class="flex items-center gap-2 cursor-pointer"
-                  {{ site.name }}
+                >
-                </option>
+                  <input
-              </select>
+                    type="checkbox"
+                    class="checkbox checkbox-sm"
+                    :checked="selectedSites.has(site.id)"
+                    @change="selectedSites.has(site.id) ? selectedSites.delete(site.id) : selectedSites.add(site.id)"
+                  >
+                  <span class="text-sm">{{ site.name }}</span>
+                </label>
+              </div>
             </div>
             <div class="form-control">
               <label class="label">
@@ -65,10 +72,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 +88,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 +101,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>
@@ -106,11 +120,12 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from 'vue'
+import { ref, reactive, computed, onMounted, watch } from 'vue'
 import { useMachines } from '~/composables/useMachines'
 import { useSites } from '~/composables/useSites'
 import { useToast } from '~/composables/useToast'
 import { humanizeError } from '~/shared/utils/errorMessages'
+import { useUrlState } from '~/composables/useUrlState'
 import IconLucidePlus from '~icons/lucide/plus'
 import IconLucideFactory from '~icons/lucide/factory'
 import IconLucideMapPin from '~icons/lucide/map-pin'
@@ -121,8 +136,28 @@ const { machines, loading, loadMachines, deleteMachine } = useMachines()
 const { sites, loadSites } = useSites()
 const toast = useToast()
 
-const selectedSite = ref('')
+const urlState = useUrlState({
-const searchQuery = ref('')
+  q: { default: '', debounce: 300 },
+  sites: { default: '' },
+})
+
+const searchQuery = urlState.q
+const selectedSites = reactive(new Set())
+
+// Sync URL → selectedSites on load and back/forward
+watch(urlState.sites, (val) => {
+  selectedSites.clear()
+  if (val) {
+    for (const id of String(val).split(',')) {
+      if (id) selectedSites.add(id)
+    }
+  }
+}, { immediate: true })
+
+// Sync selectedSites → URL
+watch(() => [...selectedSites], (ids) => {
+  urlState.sites.value = ids.join(',')
+})
 
 // Enrichir les machines avec les objets site complets
 const enrichedMachines = computed(() => {
@@ -138,8 +173,8 @@ const enrichedMachines = computed(() => {
 const filteredMachines = computed(() => {
   let filtered = enrichedMachines.value
 
-  if (selectedSite.value) {
+  if (selectedSites.size > 0) {
-    filtered = filtered.filter(machine => machine.siteId === selectedSite.value)
+    filtered = filtered.filter(machine => selectedSites.has(machine.siteId))
   }
 
   if (searchQuery.value.trim()) {
@@ -150,6 +185,10 @@ const filteredMachines = computed(() => {
     )
   }
 
+  filtered = [...filtered].sort((a, b) =>
+    (a.name || '').localeCompare(b.name || '', 'fr')
+  )
+
   return filtered
 })
 

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',
@@ -122,9 +112,10 @@ const loadCategory = async () => {
       category: response.category,
       notes: response.notes ?? response.description ?? '',
       structure: (response.structure as PieceModelStructure | null) ?? undefined,
+      referenceFormula: response.referenceFormula ?? null,
+      requiredFieldsForReference: response.requiredFieldsForReference ?? null,
     }
 
-    await loadLinkedCount(id)
   } catch (error) {
     showError(normalizeError(error))
     await navigateBackToList()
@@ -139,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 {
@@ -149,10 +137,28 @@ 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 +166,38 @@ 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.')
+  } 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/piece/[id].vue

@@ -0,0 +1,506 @@
+<template>
+  <div>
+    <DocumentPreviewModal
+      :document="previewDocument"
+      :visible="previewVisible"
+      :documents="pieceDocuments"
+      @close="closePreview"
+    />
+    <DocumentEditModal
+      :visible="editModalVisible"
+      :document="editingDocument"
+      @close="editModalVisible = false"
+      @updated="handleDocumentUpdated"
+    />
+    <main class="container mx-auto px-6 py-10">
+      <div v-if="loading" class="flex flex-col items-center gap-4 py-20 text-center">
+        <span class="loading loading-spinner loading-lg" aria-hidden="true" />
+        <p class="text-sm text-base-content/70">Chargement de la pièce…</p>
+      </div>
+
+      <div v-else-if="!piece" class="max-w-xl mx-auto">
+        <div class="alert alert-error shadow-lg">
+          <div>
+            <h2 class="font-semibold text-lg">Pièce introuvable</h2>
+            <p class="text-sm text-base-content/80">
+              Nous n'avons pas pu retrouver la pièce demandée. Elle a peut-être été supprimée.
+            </p>
+          </div>
+        </div>
+        <button type="button" class="btn btn-primary mt-6" @click="$router.back()">
+          Retour au catalogue
+        </button>
+      </div>
+
+      <section v-else class="card border border-base-200 bg-base-100 shadow-sm max-w-5xl mx-auto">
+        <div class="card-body space-y-6">
+          <DetailHeader
+            :title="isEditMode ? 'Modifier la pièce' : piece.name"
+            :subtitle="isEditMode ? 'Ajustez les informations de la pièce et ses champs personnalisés.' : undefined"
+            :is-edit-mode="isEditMode"
+            :can-edit="canEdit"
+            back-link="/pieces-catalog"
+            @toggle-edit="isEditMode = !isEditMode"
+          />
+
+          <!-- Catégorie (always shown) -->
+          <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+            <div class="form-control">
+              <label class="label">
+                <span class="label-text">Catégorie de pièce</span>
+              </label>
+              <template v-if="isEditMode">
+                <select
+                  v-model="selectedTypeId"
+                  class="select select-bordered select-sm md:select-md"
+                  disabled
+                >
+                  <option value="">Sélectionner une catégorie</option>
+                  <option
+                    v-for="type in pieceTypeList"
+                    :key="type.id"
+                    :value="type.id"
+                  >
+                    {{ type.name }}
+                  </option>
+                </select>
+                <p class="text-xs text-base-content/60 mt-1">
+                  La catégorie d'origine ne peut pas être modifiée depuis cette page.
+                </p>
+              </template>
+              <div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center">
+                {{ selectedType?.name || '—' }}
+              </div>
+            </div>
+          </div>
+
+          <!-- Nom (always shown) -->
+          <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+            <div class="form-control">
+              <label class="label">
+                <span class="label-text">Nom de la pièce</span>
+              </label>
+              <input
+                v-if="isEditMode"
+                v-model="editionForm.name"
+                type="text"
+                class="input input-bordered input-sm md:input-md"
+                :disabled="!canEdit || saving"
+                placeholder="Nom affiché dans le catalogue"
+                required
+              >
+              <div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center">
+                {{ piece.name }}
+              </div>
+            </div>
+          </div>
+
+          <!-- Description (if value or edit mode) -->
+          <div v-if="isEditMode || piece.description" class="form-control">
+            <label class="label">
+              <span class="label-text">Description</span>
+            </label>
+            <textarea
+              v-if="isEditMode"
+              v-model="editionForm.description"
+              class="textarea textarea-bordered textarea-sm md:textarea-md"
+              :disabled="!canEdit || saving"
+              placeholder="Description de la pièce (optionnel)"
+              rows="3"
+            />
+            <div v-else class="textarea textarea-bordered textarea-sm md:textarea-md bg-base-200">
+              {{ piece.description }}
+            </div>
+          </div>
+
+          <!-- Référence auto (read-only, shown only if computed) -->
+          <div v-if="piece.referenceAuto" class="form-control">
+            <label class="label">
+              <span class="label-text">Référence auto</span>
+            </label>
+            <div class="input input-bordered input-sm md:input-md bg-base-200 flex items-center gap-2">
+              <span class="font-mono font-semibold">{{ piece.referenceAuto }}</span>
+              <span class="badge badge-sm badge-ghost">auto</span>
+            </div>
+          </div>
+
+          <!-- Référence + Fournisseurs (if value or edit mode) -->
+          <div
+            v-if="isEditMode || piece.reference || editionForm.constructeurIds.length"
+            class="grid grid-cols-1 gap-4 md:grid-cols-2"
+          >
+            <div v-if="isEditMode || piece.reference" class="form-control">
+              <label class="label">
+                <span class="label-text">Référence</span>
+              </label>
+              <input
+                v-if="isEditMode"
+                v-model="editionForm.reference"
+                type="text"
+                class="input input-bordered input-sm md:input-md"
+                :disabled="!canEdit || saving"
+                placeholder="Référence interne ou fournisseur"
+              >
+              <div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center">
+                {{ piece.reference }}
+              </div>
+            </div>
+
+            <div v-if="isEditMode || constructeurLinks.length" class="form-control">
+              <label class="label">
+                <span class="label-text">Fournisseur</span>
+              </label>
+              <template v-if="isEditMode">
+                <ConstructeurSelect
+                  v-model="editionForm.constructeurIds"
+                  class="w-full"
+                  :disabled="!canEdit || saving"
+                  placeholder="Rechercher un ou plusieurs fournisseurs..."
+                  :initial-options="piece?.constructeurs || []"
+                />
+                <ConstructeurLinksTable
+                  v-model="constructeurLinks"
+                  class="mt-2"
+                  @remove="handleConstructeurRemoved"
+                />
+              </template>
+              <ConstructeurLinksTable
+                v-else
+                :model-value="constructeurLinks"
+                readonly
+              />
+            </div>
+          </div>
+
+          <!-- Prix (if value or edit mode) -->
+          <div v-if="isEditMode || piece.prix" class="grid grid-cols-1 gap-4 md:grid-cols-2">
+            <div class="form-control">
+              <label class="label">
+                <span class="label-text">Prix indicatif (€)</span>
+              </label>
+              <input
+                v-if="isEditMode"
+                v-model="editionForm.prix"
+                type="number"
+                step="0.01"
+                min="0"
+                class="input input-bordered input-sm md:input-md"
+                :disabled="!canEdit || saving"
+                placeholder="Valeur indicatrice"
+              >
+              <div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center">
+                {{ piece.prix }} €
+              </div>
+            </div>
+          </div>
+
+          <!-- Product requirements -->
+          <div
+            v-if="structureProducts.length"
+            class="space-y-3 rounded-lg border border-base-200 bg-base-200/40 p-4"
+          >
+            <header class="space-y-1">
+              <h2 class="font-semibold text-base-content">
+                Produits liés
+              </h2>
+              <p class="text-xs text-base-content/70">
+                {{ isEditMode ? 'Cette pièce doit rester liée à un produit catalogue répondant aux critères suivants.' : 'Produits associés à cette pièce via le squelette.' }}
+              </p>
+            </header>
+            <ul class="space-y-2 text-sm text-base-content/80">
+              <li
+                v-for="(description, index) in productRequirementDescriptions"
+                :key="`edit-requirement-${index}`"
+                class="flex items-start gap-2"
+              >
+                <span class="mt-0.5 inline-flex h-2 w-2 flex-shrink-0 rounded-full bg-primary"></span>
+                <span>{{ description }}</span>
+              </li>
+            </ul>
+            <div v-if="isEditMode" class="grid grid-cols-1 gap-3 md:grid-cols-2">
+              <div
+                v-for="entry in productRequirementEntries"
+                :key="entry.key"
+                class="form-control"
+              >
+                <label class="label">
+                  <span class="label-text text-xs font-medium">
+                    {{ entry.label }}
+                  </span>
+                </label>
+                <ProductSelect
+                  :model-value="productSelections[entry.index] || null"
+                  :disabled="!canEdit || saving"
+                  :type-product-id="entry.typeProductId"
+                  helper-text="Un produit valide est requis pour cette pièce."
+                  @update:model-value="(value) => setProductSelection(entry.index, value)"
+                />
+              </div>
+            </div>
+            <div v-else class="grid grid-cols-1 gap-3 md:grid-cols-2">
+              <div
+                v-for="(entry, index) in productRequirementEntries"
+                :key="entry.key"
+                class="form-control"
+              >
+                <label class="label">
+                  <span class="label-text text-xs font-medium">{{ entry.label }}</span>
+                </label>
+                <div class="input input-bordered input-sm md:input-md bg-base-200 flex items-center">
+                  {{ productSelectionLabels[index] || '— Non sélectionné' }}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Skeleton preview (edit mode only) -->
+          <StructureSkeletonPreview
+            v-if="isEditMode && (selectedType || resolvedStructure)"
+            :structure="resolvedStructure"
+            :description="selectedType?.description || 'Ce squelette définit la structure et les champs personnalisés de la pièce.'"
+            :preview-badge="formatPieceStructurePreview(resolvedStructure)"
+            variant="piece"
+          />
+
+          <!-- Custom fields -->
+          <div v-if="visibleCustomFields.length" class="space-y-4 rounded-lg border border-base-200 bg-base-200/40 p-4">
+            <header class="space-y-1">
+              <h2 class="font-semibold text-base-content">Champs personnalisés</h2>
+              <p v-if="isEditMode" class="text-xs text-base-content/70">
+                Mettez à jour les valeurs propres à cette pièce.
+              </p>
+            </header>
+            <template v-if="isEditMode">
+              <CustomFieldInputGrid :fields="customFieldInputs" :disabled="!canEdit || saving" />
+            </template>
+            <template v-else>
+              <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+                <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 flex items-center">
+                    {{ field.value }}
+                  </div>
+                </div>
+              </div>
+            </template>
+          </div>
+
+          <!-- Documents -->
+          <div
+            v-if="isEditMode || pieceDocuments.length > 0"
+            class="space-y-4 rounded-lg border border-base-200 bg-base-200/40 p-4"
+          >
+            <header class="flex flex-col gap-1 md:flex-row md:items-center md:justify-between">
+              <div>
+                <h2 class="font-semibold text-base-content">Documents</h2>
+                <p class="text-xs text-base-content/70">
+                  {{ isEditMode ? 'Gérez les documents associés à cette pièce.' : 'Documents associés à cette pièce.' }}
+                </p>
+              </div>
+              <span v-if="isEditMode && selectedFiles.length" class="badge badge-outline">
+                {{ selectedFiles.length }} document{{ selectedFiles.length > 1 ? 's' : '' }} prêt{{ selectedFiles.length > 1 ? 's' : '' }} à être ajouté{{ selectedFiles.length > 1 ? 's' : '' }}
+              </span>
+            </header>
+            <template v-if="isEditMode">
+              <div :class="{ 'pointer-events-none opacity-60': !canEdit || saving || uploadingDocuments }">
+                <DocumentUpload
+                  v-model="selectedFiles"
+                  title="Déposer vos fichiers"
+                  subtitle="Formats acceptés : PDF, images, documents…"
+                  @files-added="handleFilesAdded"
+                />
+              </div>
+              <p v-if="uploadingDocuments" class="text-xs text-base-content/70">
+                Téléversement des documents en cours…
+              </p>
+              <p v-else-if="loadingDocuments" class="text-xs text-base-content/70">
+                Chargement des documents en cours…
+              </p>
+              <DocumentListInline
+                v-else
+                :documents="pieceDocuments"
+                :can-delete="canEdit"
+                :can-edit="true"
+                :delete-disabled="uploadingDocuments"
+                empty-text="Aucun document n'est associé à cette pièce pour le moment."
+                @preview="openPreview"
+                @edit="openEditModal"
+                @delete="removeDocument"
+              />
+            </template>
+            <template v-else>
+              <p v-if="loadingDocuments" class="text-xs text-base-content/70">
+                Chargement des documents en cours…
+              </p>
+              <DocumentListInline
+                v-else
+                :documents="pieceDocuments"
+                :can-delete="false"
+                :can-edit="false"
+                empty-text="Aucun document n'est associé à cette pièce pour le moment."
+                @preview="openPreview"
+              />
+            </template>
+          </div>
+
+          <EntityHistorySection
+            :entries="history"
+            :loading="historyLoading"
+            :error="historyError"
+            :field-labels="historyFieldLabels"
+          />
+
+          <EntityVersionList
+            entity-type="piece"
+            :entity-id="String(route.params.id)"
+            :field-labels="historyFieldLabels"
+            :refresh-key="versionRefreshKey"
+            @restored="fetchPiece()"
+          />
+
+          <!-- Save buttons (edit mode only) -->
+          <div v-if="isEditMode" class="flex flex-col gap-3 md:flex-row md:justify-end">
+            <button type="button" class="btn btn-ghost" :class="{ 'btn-disabled': saving }" @click="isEditMode = false">
+              Annuler
+            </button>
+            <button type="button" class="btn btn-primary" :disabled="!canSubmit" @click="submitEdition">
+              <span v-if="saving" class="loading loading-spinner loading-sm mr-2" />
+              Enregistrer les modifications
+            </button>
+          </div>
+
+          <!-- Comments -->
+          <div class="mt-4">
+            <CommentSection
+              entity-type="piece"
+              :entity-id="String(route.params.id)"
+              :entity-name="piece?.name"
+              show-resolved
+            />
+          </div>
+        </div>
+      </section>
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue'
+import { useRoute } from '#imports'
+import { usePieceEdit } from '~/composables/usePieceEdit'
+import { useDocuments } from '~/composables/useDocuments'
+import { usePermissions } from '~/composables/usePermissions'
+
+const route = useRoute()
+const { canEdit } = usePermissions()
+const { updateDocument } = useDocuments()
+
+const isEditMode = ref(false)
+const versionRefreshKey = ref(0)
+
+const {
+  piece,
+  loading,
+  saving,
+  selectedFiles,
+  uploadingDocuments,
+  loadingDocuments,
+  pieceDocuments,
+  previewDocument,
+  previewVisible,
+  selectedTypeId,
+  editionForm,
+  constructeurLinks,
+  productSelections,
+  customFieldInputs,
+  pieceTypeList,
+  selectedType,
+  resolvedStructure,
+  structureProducts,
+  productRequirementDescriptions,
+  productRequirementEntries,
+  canSubmit,
+  historyFieldLabels,
+  history,
+  historyLoading,
+  historyError,
+  openPreview,
+  closePreview,
+  removeDocument,
+  handleFilesAdded,
+  setProductSelection,
+  submitEdition: _submitEdition,
+  fetchPiece,
+  formatPieceStructurePreview,
+} = usePieceEdit(String(route.params.id))
+
+const submitEdition = async () => {
+  await _submitEdition()
+  if (!saving.value) {
+    await fetchPiece()
+    isEditMode.value = false
+    versionRefreshKey.value++
+  }
+}
+
+// Sync ConstructeurSelect changes → constructeurLinks
+watch(() => editionForm.constructeurIds, (newIds) => {
+  const existing = new Map(constructeurLinks.value.map(l => [l.constructeurId, l]))
+  constructeurLinks.value = newIds.map(id =>
+    existing.get(id) || { constructeurId: id, supplierReference: null },
+  )
+})
+
+const handleConstructeurRemoved = (constructeurId: string) => {
+  editionForm.constructeurIds = editionForm.constructeurIds.filter(id => id !== constructeurId)
+}
+
+const editingDocument = ref<any | null>(null)
+const editModalVisible = ref(false)
+
+// Resolve product names for read-only display from piece data
+const productSelectionLabels = computed(() => {
+  if (!piece.value) return []
+  const p = piece.value as any
+  // piece.product contains {id, name} for the legacy single product
+  if (p.product?.name) return [p.product.name]
+  return productSelections.value.map((id: string | null) => id || null)
+})
+
+const visibleCustomFields = computed(() => {
+  if (isEditMode.value) return customFieldInputs.value
+  return customFieldInputs.value.filter(
+    (f) => f.value !== null && f.value !== undefined && f.value !== '',
+  )
+})
+
+const openEditModal = (doc: any) => {
+  editingDocument.value = doc
+  editModalVisible.value = true
+}
+
+const handleDocumentUpdated = async (data: { name?: string; type?: string }) => {
+  if (!editingDocument.value?.id) return
+  const result = await updateDocument(editingDocument.value.id, data)
+  if (result.success) {
+    const idx = pieceDocuments.value.findIndex((d: any) => d.id === editingDocument.value?.id)
+    if (idx !== -1) {
+      pieceDocuments.value[idx] = { ...pieceDocuments.value[idx], ...data }
+    }
+  }
+  editModalVisible.value = false
+  editingDocument.value = null
+}
+
+onMounted(() => {
+  if (route.query.edit === 'true' && canEdit.value) {
+    isEditMode.value = true
+  }
+})
+</script>

app/pages/pieces-catalog.vue

@@ -69,10 +69,14 @@
             {{ row.piece.reference || '—' }}
           </template>
 
+          <template #cell-referenceAuto="{ row }">
+            {{ row.piece.referenceAuto || '—' }}
+          </template>
+
           <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,22 +122,30 @@
           </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"
-              >
-                Modifier
-              </NuxtLink>
               <button
                 v-if="canEdit"
                 type="button"
-                class="btn btn-error btn-xs"
+                class="btn btn-ghost btn-xs"
+                @click="navigateTo(`/piece/${row.piece.id}?edit=true`)"
+              >
+                Modifier
+              </button>
+              <button
+                v-if="canEdit"
+                type="button"
+                class="btn btn-ghost btn-xs text-error"
                 :disabled="loadingPieces"
                 @click="handleDeletePiece(row.piece)"
               >
                 Supprimer
               </button>
+              <NuxtLink
+                :to="`/piece/${row.piece.id}`"
+                class="btn btn-primary btn-xs"
+              >
+                Détails
+              </NuxtLink>
             </div>
           </template>
         </DataTable>
@@ -159,13 +171,14 @@ const { pieceTypes, loadPieceTypes } = usePieceTypes()
 
 const table = useDataTable(
   { fetchData: fetchPieces },
-  { defaultSort: 'name', defaultDirection: 'asc', defaultPerPage: 20, persistToUrl: true },
+  { defaultSort: 'name', defaultDirection: 'asc', defaultPerPage: 20, persistToUrl: true, columnFilterKeys: ['typePiece'] },
 )
 
 const columns = [
   { key: 'preview', label: 'Aperçu', width: 'w-24' },
   { key: 'name', label: 'Nom', sortable: true },
   { key: 'reference', label: 'Référence' },
+  { key: 'referenceAuto', label: 'Réf. auto' },
   { key: 'description', label: 'Description' },
   { key: 'suppliers', label: 'Fournisseurs' },
   { key: 'typePiece', label: 'Type de pièce', filterable: true, filterPlaceholder: 'Filtrer…' },

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

@@ -1,10 +1,17 @@
 <template>
+  <div>
     <DocumentPreviewModal
       :document="previewDocument"
       :visible="previewVisible"
       :documents="pieceDocuments"
       @close="closePreview"
     />
+    <DocumentEditModal
+      :visible="editModalVisible"
+      :document="editingDocument"
+      @close="editModalVisible = false"
+      @updated="handleDocumentUpdated"
+    />
     <main class="container mx-auto px-6 py-10">
     <div v-if="loading" class="flex flex-col items-center gap-4 py-20 text-center">
       <span class="loading loading-spinner loading-lg" aria-hidden="true" />
@@ -107,6 +114,19 @@
             >
           </div>
 
+          <div v-if="piece?.referenceAuto" class="form-control">
+            <label class="label">
+              <span class="label-text">Référence auto</span>
+            </label>
+            <input
+              :value="piece.referenceAuto"
+              type="text"
+              class="input input-bordered input-sm md:input-md bg-base-200"
+              disabled
+              title="Générée automatiquement à partir du type et des champs personnalisés"
+            >
+          </div>
+
           <div class="form-control">
             <label class="label">
               <span class="label-text">Fournisseur</span>
@@ -230,9 +250,11 @@
             v-else
             :documents="pieceDocuments"
             :can-delete="canEdit"
+            :can-edit="true"
             :delete-disabled="uploadingDocuments"
             empty-text="Aucun document n'est associé à cette pièce pour le moment."
             @preview="openPreview"
+            @edit="openEditModal"
             @delete="removeDocument"
           />
         </div>
@@ -266,457 +288,70 @@
       </div>
     </section>
     </main>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { ref } from 'vue'
-import { useRoute, useRouter } from '#imports'
+import { useRoute } from '#imports'
-import ConstructeurSelect from '~/components/ConstructeurSelect.vue'
+import { usePieceEdit } from '~/composables/usePieceEdit'
-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 { updateDocument } = useDocuments()
-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,
+  handleFilesAdded,
+  setProductSelection,
+  submitEdition,
+  formatPieceStructurePreview,
+} = usePieceEdit(String(route.params.id))
 
-const piece = ref<any | null>(null)
+const editingDocument = ref<any | null>(null)
-const loading = ref(true)
+const editModalVisible = ref(false)
-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> = {
+const openEditModal = (doc: any) => {
-  name: 'Nom',
+  editingDocument.value = doc
-  reference: 'Référence',
+  editModalVisible.value = true
-  prix: 'Prix',
-  typePiece: 'Catégorie',
-  product: 'Produit lié',
-  productIds: 'Produits liés',
-  constructeurIds: 'Fournisseurs',
 }
-
+const handleDocumentUpdated = async (data: { name?: string; type?: string }) => {
-const selectedTypeId = ref<string>('')
+  if (!editingDocument.value?.id) return
-const pieceTypeDetails = ref<any | null>(null)
+  const result = await updateDocument(editingDocument.value.id, data)
-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 idx = pieceDocuments.value.findIndex((d: any) => d.id === editingDocument.value?.id)
+    if (idx !== -1) {
+      pieceDocuments.value[idx] = { ...pieceDocuments.value[idx], ...data }
     }
+  }
+  editModalVisible.value = false
+  editingDocument.value = null
 }
-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

@@ -91,6 +91,10 @@
             />
           </div>
         </div>
+        <ConstructeurLinksTable
+          v-if="constructeurLinks.length"
+          v-model="constructeurLinks"
+        />
 
         <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
           <div class="form-control">
@@ -213,6 +217,7 @@
 import { computed, onMounted, reactive, ref, watch } from 'vue'
 import { useRoute, useRouter } from '#imports'
 import ConstructeurSelect from '~/components/ConstructeurSelect.vue'
+import ConstructeurLinksTable from '~/components/ConstructeurLinksTable.vue'
 import DocumentUpload from '~/components/DocumentUpload.vue'
 import ProductSelect from '~/components/ProductSelect.vue'
 import SearchSelect from '~/components/common/SearchSelect.vue'
@@ -222,10 +227,22 @@ import { useToast } from '~/composables/useToast'
 import { humanizeError } from '~/shared/utils/errorMessages'
 import { useCustomFields } from '~/composables/useCustomFields'
 import { useDocuments } from '~/composables/useDocuments'
+import { useConstructeurLinks } from '~/composables/useConstructeurLinks'
+import { useConstructeurs } from '~/composables/useConstructeurs'
 import { formatPieceStructurePreview } from '~/shared/modelUtils'
-import { uniqueConstructeurIds } from '~/shared/constructeurUtils'
+import { constructeurIdsFromLinks } from '~/shared/constructeurUtils'
-import type { PieceModelProduct, PieceModelStructure } from '~/shared/types/inventory'
+import type { ConstructeurLinkEntry } 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 {
   type CustomFieldInput,
   normalizeCustomFieldInputs,
@@ -246,6 +263,8 @@ const { createPiece } = usePieces()
 const toast = useToast()
 const { upsertCustomFieldValue, updateCustomFieldValue } = useCustomFields()
 const { uploadDocuments } = useDocuments()
+const { syncLinks } = useConstructeurLinks()
+const { getConstructeurById } = useConstructeurs()
 const { canEdit } = usePermissions()
 
 const initialTypeId = ref<string>(typeof route.query.typeId === 'string' ? route.query.typeId : '')
@@ -258,6 +277,7 @@ const creationForm = reactive({
   constructeurIds: [] as string[],
   prix: '' as string,
 })
+const constructeurLinks = ref<ConstructeurLinkEntry[]>([])
 const productSelections = ref<(string | null)[]>([])
 
 const lastSuggestedName = ref('')
@@ -303,70 +323,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) => {
@@ -407,6 +391,7 @@ const clearCreationForm = () => {
   creationForm.description = ''
   creationForm.reference = ''
   creationForm.constructeurIds = []
+  constructeurLinks.value = []
   creationForm.prix = ''
   productSelections.value = []
   lastSuggestedName.value = ''
@@ -438,12 +423,10 @@ const submitCreation = async () => {
     payload.reference = reference
   }
 
-  payload.constructeurIds = uniqueConstructeurIds(creationForm.constructeurIds)
+  const normalizedProductIds = collectNormalizedProductIds(
-
+    productRequirementEntries.value,
-  const normalizedProductIds = productRequirementEntries.value
+    productSelections.value,
-    .map((entry) => productSelections.value[entry.index])
+  )
-    .filter((value): value is string => typeof value === 'string' && value.trim().length > 0)
-    .map((value) => value.trim())
   if (normalizedProductIds.length) {
     payload.productIds = normalizedProductIds
     payload.productId = normalizedProductIds[0]
@@ -471,10 +454,14 @@ const submitCreation = async () => {
         'piece',
         createdPiece.id,
         [
-          createdPiece?.typePiece?.pieceCustomFields,
+          createdPiece?.typePiece?.structure?.customFields,
         ],
         { customFieldInputs, upsertCustomFieldValue, updateCustomFieldValue, toast },
       )
+      // Sync constructeur links after creation
+      if (constructeurLinks.value.length) {
+        await syncLinks('piece', createdPiece.id, [], constructeurLinks.value)
+      }
       if (selectedDocuments.value.length && createdPiece.id) {
         uploadingDocuments.value = true
         const uploadResult = await uploadDocuments(
@@ -493,7 +480,7 @@ const submitCreation = async () => {
         selectedDocuments.value = []
       }
       toast.showSuccess('Pièce créée avec succès')
-      await router.push('/pieces-catalog')
+      await router.replace(`/piece/${createdPiece.id}?edit=true`)
     } else if (result.error) {
       toast.showError(result.error)
     }
@@ -505,6 +492,26 @@ const submitCreation = async () => {
   }
 }
 
+// Sync constructeurIds → constructeurLinks when IDs are added via ConstructeurSelect
+watch(
+  () => creationForm.constructeurIds,
+  (ids) => {
+    const currentIds = new Set(constructeurLinks.value.map(l => l.constructeurId))
+    for (const id of ids) {
+      if (!currentIds.has(id)) {
+        const resolved = getConstructeurById(id)
+        constructeurLinks.value.push({
+          constructeurId: id,
+          constructeur: resolved ? { id: resolved.id, name: resolved.name } : null,
+          supplierReference: null,
+        })
+      }
+    }
+    constructeurLinks.value = constructeurLinks.value.filter(l => ids.includes(l.constructeurId))
+  },
+  { deep: true },
+)
+
 onMounted(async () => {
   await loadPieceTypes()
 })

app/pages/product-catalog.vue

@@ -115,13 +115,15 @@
           </template>
 
           <template #cell-actions="{ row }">
-            <div class="flex justify-end gap-2">
+            <div class="flex items-center justify-end gap-2">
-              <NuxtLink
+              <button
-                :to="`/product/${row.product.id}/edit`"
+                v-if="canEdit"
+                type="button"
                 class="btn btn-ghost btn-xs"
+                @click="navigateTo(`/product/${row.product.id}?edit=true`)"
               >
                 Modifier
-              </NuxtLink>
+              </button>
               <button
                 v-if="canEdit"
                 type="button"
@@ -130,6 +132,12 @@
               >
                 Supprimer
               </button>
+              <NuxtLink
+                :to="`/product/${row.product.id}`"
+                class="btn btn-primary btn-xs"
+              >
+                Détails
+              </NuxtLink>
             </div>
           </template>
         </DataTable>
@@ -167,7 +175,7 @@ const toast = useToast()
 
 const table = useDataTable(
   { fetchData: fetchProducts },
-  { defaultSort: 'name', defaultDirection: 'asc', defaultPerPage: 20, persistToUrl: true },
+  { defaultSort: 'name', defaultDirection: 'asc', defaultPerPage: 20, persistToUrl: true, columnFilterKeys: ['typeProduct'] },
 )
 
 const errorMessage = computed(() => (typeof error.value === 'string' && error.value.length ? error.value : null))

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,28 @@ 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 +164,38 @@ 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.')
+  } 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,10 +1,17 @@
 <template>
+  <div>
     <DocumentPreviewModal
       :document="previewDocument"
       :visible="previewVisible"
       :documents="productDocuments"
       @close="closePreview"
     />
+    <DocumentEditModal
+      :visible="editModalVisible"
+      :document="editingDocument"
+      @close="editModalVisible = false"
+      @updated="handleDocumentUpdated"
+    />
     <main class="container mx-auto px-6 py-10">
     <div v-if="loading" class="flex flex-col items-center gap-4 py-16 text-center">
       <span class="loading loading-spinner loading-lg" aria-hidden="true" />
@@ -98,6 +105,11 @@
           </div>
         </div>
 
+        <ConstructeurLinksTable
+          v-if="constructeurLinks.length"
+          v-model="constructeurLinks"
+        />
+
         <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
           <div class="form-control">
             <label class="label">
@@ -166,9 +178,11 @@
             v-else
             :documents="productDocuments"
             :can-delete="canEdit"
+            :can-edit="true"
             :delete-disabled="uploadingDocuments || saving"
             empty-text="Aucun document n'est associé à ce produit pour le moment."
             @preview="openPreview"
+            @edit="openEditModal"
             @delete="removeDocument"
           />
         </div>
@@ -180,6 +194,14 @@
           :field-labels="historyFieldLabels"
         />
 
+        <EntityVersionList
+          entity-type="product"
+          :entity-id="String(route.params.id)"
+          :field-labels="historyFieldLabels"
+          :refresh-key="versionRefreshKey"
+          @restored="loadProduct()"
+        />
+
         <div class="flex flex-col gap-3 md:flex-row md:justify-end">
           <NuxtLink to="/product-catalog" class="btn btn-ghost" :class="{ 'btn-disabled': saving }">
             Annuler
@@ -205,6 +227,7 @@
       </div>
     </section>
     </main>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -219,9 +242,11 @@ import { useToast } from '~/composables/useToast'
 import { humanizeError } from '~/shared/utils/errorMessages'
 import { useDocuments } from '~/composables/useDocuments'
 import { useConstructeurs } from '~/composables/useConstructeurs'
+import { useConstructeurLinks } from '~/composables/useConstructeurLinks'
 import { useProductHistory } from '~/composables/useProductHistory'
 import { formatProductStructurePreview, normalizeProductStructureForSave } from '~/shared/modelUtils'
-import { uniqueConstructeurIds } from '~/shared/constructeurUtils'
+import { constructeurIdsFromLinks } from '~/shared/constructeurUtils'
+import type { ConstructeurLinkEntry } from '~/shared/constructeurUtils'
 import { getModelType } from '~/services/modelTypes'
 import type { ProductModelStructure } from '~/shared/types/inventory'
 import { canPreviewDocument } from '~/utils/documentPreview'
@@ -233,6 +258,7 @@ import {
 } from '~/shared/utils/customFieldFormUtils'
 
 const { canEdit } = usePermissions()
+const versionRefreshKey = ref(0)
 const route = useRoute()
 const router = useRouter()
 const toast = useToast()
@@ -242,8 +268,10 @@ const {
   loadDocumentsByProduct,
   uploadDocuments: uploadProductDocuments,
   deleteDocument: deleteProductDocument,
+  updateDocument,
 } = useDocuments()
-const { ensureConstructeurs } = useConstructeurs()
+const { ensureConstructeurs, getConstructeurById } = useConstructeurs()
+const { fetchLinks, syncLinks } = useConstructeurLinks()
 const {
   history,
   loading: historyLoading,
@@ -263,6 +291,11 @@ const loadingDocuments = ref(false)
 const productDocuments = ref<any[]>([])
 const previewDocument = ref<any | null>(null)
 const previewVisible = ref(false)
+const editingDocument = ref<any | null>(null)
+const editModalVisible = ref(false)
+
+const constructeurLinks = ref<ConstructeurLinkEntry[]>([])
+const originalConstructeurLinks = ref<ConstructeurLinkEntry[]>([])
 
 const historyFieldLabels: Record<string, string> = {
   name: 'Nom',
@@ -298,20 +331,29 @@ 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 = () => {
+const openEditModal = (doc: any) => {
-  previewVisible.value = false
+  editingDocument.value = doc
-  previewDocument.value = null
+  editModalVisible.value = true
+}
+const handleDocumentUpdated = async (data: { name?: string; type?: string }) => {
+  if (!editingDocument.value?.id) return
+  const result = await updateDocument(editingDocument.value.id, data)
+  if (result.success) {
+    const idx = productDocuments.value.findIndex((d: any) => d.id === editingDocument.value?.id)
+    if (idx !== -1) {
+      productDocuments.value[idx] = { ...productDocuments.value[idx], ...data }
+    }
+  }
+  editModalVisible.value = false
+  editingDocument.value = null
 }
-
 
 const loadProduct = async () => {
   const id = route.params.id
@@ -396,7 +438,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 +454,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
@@ -426,18 +468,19 @@ const hydrateForm = () => {
   }
   editionForm.name = product.value.name || ''
   editionForm.reference = product.value.reference || ''
-  editionForm.constructeurIds = uniqueConstructeurIds(
+  // Load constructeur links
-    product.value,
+  fetchLinks('product', String(route.params.id)).then((links) => {
-    Array.isArray(product.value.constructeurs) ? product.value.constructeurs : [],
+    constructeurLinks.value = links
-  )
+    originalConstructeurLinks.value = links.map(l => ({ ...l }))
+    editionForm.constructeurIds = constructeurIdsFromLinks(links)
+    if (editionForm.constructeurIds.length) {
+      void ensureConstructeurs(editionForm.constructeurIds)
+    }
+  })
   editionForm.supplierPrice = product.value.supplierPrice !== null && product.value.supplierPrice !== undefined
     ? String(product.value.supplierPrice)
     : ''
   refreshCustomFieldInputs(structure.value, product.value.customFieldValues)
-  if (editionForm.constructeurIds.length) {
-    // Smart-cached + deduped — fire-and-forget, ConstructeurSelect handles its own loading
-    ensureConstructeurs(editionForm.constructeurIds).catch(() => {})
-  }
 }
 
 watch(
@@ -455,12 +498,9 @@ const submitEdition = async () => {
     return
   }
 
-  const constructeurIds = uniqueConstructeurIds(editionForm.constructeurIds)
-
   const payload: Record<string, any> = {
     name: editionForm.name.trim(),
     reference: editionForm.reference.trim() || null,
-    constructeurIds,
   }
 
   const rawPrice = typeof editionForm.supplierPrice === 'string'
@@ -480,15 +520,17 @@ const submitEdition = async () => {
       const failedFields = await _saveCustomFieldValues(
         'product',
         result.data.id,
-        [],
+        [result.data?.typeProduct?.structure?.customFields],
         { customFieldInputs, upsertCustomFieldValue, updateCustomFieldValue, toast },
       )
       if (failedFields.length) {
         toast.showError(`Impossible d'enregistrer ${failedFields.length} champ(s): ${failedFields.join(', ')}`)
         return
       }
+      await syncLinks('product', product.value.id, originalConstructeurLinks.value, constructeurLinks.value)
+      originalConstructeurLinks.value = constructeurLinks.value.map(l => ({ ...l }))
       toast.showSuccess('Produit mis à jour avec succès')
-      await router.push('/product-catalog')
+      versionRefreshKey.value++
     }
   } catch (error: any) {
     toast.showError(humanizeError(error?.message) || 'Impossible de mettre à jour le produit')
@@ -497,6 +539,25 @@ const submitEdition = async () => {
   }
 }
 
+// Sync constructeurIds → constructeurLinks when IDs are added via ConstructeurSelect
+watch(
+  () => editionForm.constructeurIds,
+  (ids) => {
+    const currentIds = new Set(constructeurLinks.value.map(l => l.constructeurId))
+    for (const id of ids) {
+      if (!currentIds.has(id)) {
+        const resolved = getConstructeurById(id)
+        constructeurLinks.value.push({
+          constructeurId: id,
+          constructeur: resolved ? { id: resolved.id, name: resolved.name } : null,
+          supplierReference: null,
+        })
+      }
+    }
+    constructeurLinks.value = constructeurLinks.value.filter(l => ids.includes(l.constructeurId))
+  },
+)
+
 onMounted(async () => {
   await loadProduct()
 })