chore: update frontend configuration

app/app.vue

@@ -13,8 +13,8 @@
           >
             <li class="pt-1 pb-2 lg:hidden">
               <button
-                @click="openDisplaySettings"
                 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"
+                @click="openDisplaySettings"
               >
                 <IconLucideSettings class="w-4 h-4" aria-hidden="true" />
                 Paramètres d'affichage
@@ -125,7 +125,7 @@
                 class="rounded-md px-2 py-1 transition-colors cursor-pointer"
                 :class="
                   isActive('/component-catalog') ||
-                  isActive('/component-category')
+                    isActive('/component-category')
                     ? 'bg-primary text-primary-content font-semibold shadow-sm'
                     : 'text-base-content hover:bg-primary/10 hover:text-primary'
                 "
@@ -178,8 +178,8 @@
                 class="rounded-md px-2 py-1 transition-colors cursor-pointer"
                 :class="
                   isActive('/sites') ||
-                  isActive('/documents') ||
-                  isActive('/constructeurs')
+                    isActive('/documents') ||
+                    isActive('/constructeurs')
                     ? 'bg-primary text-primary-content font-semibold shadow-sm'
                     : 'text-base-content hover:bg-primary/10 hover:text-primary'
                 "
@@ -241,9 +241,12 @@
               <IconLucideBoxes class="w-6 h-6" aria-hidden="true" />
             </div>
           </div>
-          <NuxtLink to="/" class="btn btn-ghost text-xl"
-            >Inventaire Pro</NuxtLink
+          <NuxtLink
+            to="/"
+            class="btn btn-ghost text-xl"
           >
+            Inventaire Pro
+          </NuxtLink>
         </div>
       </div>
       <div class="navbar-center hidden lg:flex">
@@ -353,7 +356,7 @@
               class="transition-colors px-3 py-2 rounded-md inline-flex items-center gap-1 cursor-pointer"
               :class="
                 isActive('/component-category') ||
-                isActive('/component-catalog')
+                  isActive('/component-catalog')
                   ? 'bg-primary text-primary-content font-semibold shadow-sm'
                   : 'text-base-content hover:bg-primary/10 hover:text-primary'
               "
@@ -406,8 +409,8 @@
               class="transition-colors px-3 py-2 rounded-md inline-flex items-center gap-1 cursor-pointer"
               :class="
                 isActive('/sites') ||
-                isActive('/documents') ||
-                isActive('/constructeurs')
+                  isActive('/documents') ||
+                  isActive('/constructeurs')
                   ? 'bg-primary text-primary-content font-semibold shadow-sm'
                   : 'text-base-content hover:bg-primary/10 hover:text-primary'
               "
@@ -465,9 +468,9 @@
         <div class="flex items-center gap-2">
           <!-- Bouton paramètres d'affichage -->
           <button
-            @click="openDisplaySettings"
             class="btn btn-ghost btn-circle hidden lg:inline-flex"
             title="Paramètres d'affichage"
+            @click="openDisplaySettings"
           >
             <IconLucideSettings class="w-5 h-5" aria-hidden="true" />
           </button>
@@ -507,7 +510,7 @@
           </div>
 
           <ClientOnly>
-            <div class="dropdown dropdown-end" v-if="activeProfile">
+            <div v-if="activeProfile" class="dropdown dropdown-end">
               <div
                 tabindex="0"
                 role="button"
@@ -528,12 +531,12 @@
                 class="menu dropdown-content mt-3 p-2 shadow bg-base-100 rounded-box w-64"
               >
                 <li class="px-2 py-1 text-sm text-base-content/70">
-                  Connecté en tant que<br />
+                  Connecté en tant que<br>
                   <span class="font-semibold text-base-content">{{
                     activeProfileLabel
                   }}</span>
                 </li>
-                <li><hr class="my-1" /></li>
+                <li><hr class="my-1"></li>
                 <li>
                   <NuxtLink to="/profiles/manage" class="justify-between">
                     Gestion des profils
@@ -583,99 +586,99 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, onUnmounted } from "vue";
-import { useRoute, navigateTo } from "#imports";
-import { useProfileSession } from "~/composables/useProfileSession";
-import IconLucideMenu from "~icons/lucide/menu";
-import IconLucideSettings from "~icons/lucide/settings";
-import IconLucideBoxes from "~icons/lucide/boxes";
-import IconLucidePlus from "~icons/lucide/plus";
-import IconLucideCpu from "~icons/lucide/cpu";
-import IconLucideFilePlus from "~icons/lucide/file-plus";
-import IconLucideMapPin from "~icons/lucide/map-pin";
-import IconLucideChevronRight from "~icons/lucide/chevron-right";
-import IconLucideLogOut from "~icons/lucide/log-out";
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { useRoute, navigateTo } from '#imports'
+import { useProfileSession } from '~/composables/useProfileSession'
+import IconLucideMenu from '~icons/lucide/menu'
+import IconLucideSettings from '~icons/lucide/settings'
+import IconLucideBoxes from '~icons/lucide/boxes'
+import IconLucidePlus from '~icons/lucide/plus'
+import IconLucideCpu from '~icons/lucide/cpu'
+import IconLucideFilePlus from '~icons/lucide/file-plus'
+import IconLucideMapPin from '~icons/lucide/map-pin'
+import IconLucideChevronRight from '~icons/lucide/chevron-right'
+import IconLucideLogOut from '~icons/lucide/log-out'
 
 // État du modal des paramètres d'affichage
-const displaySettingsOpen = ref(false);
-const { activeProfile, ensureSession, logout } = useProfileSession();
+const displaySettingsOpen = ref(false)
+const { activeProfile, ensureSession, logout } = useProfileSession()
 
 // Route active pour souligner l'onglet sélectionné dans la navbar
-const route = useRoute();
+const route = useRoute()
 const isActive = (path) => {
-  if (path === "/") {
-    return route.path === "/";
+  if (path === '/') {
+    return route.path === '/'
   }
-  return route.path.startsWith(path);
-};
+  return route.path.startsWith(path)
+}
 
 // Ouvrir les paramètres d'affichage
 const openDisplaySettings = () => {
-  displaySettingsOpen.value = true;
-};
+  displaySettingsOpen.value = true
+}
 
 // Fermer les paramètres d'affichage
 const closeDisplaySettings = () => {
-  displaySettingsOpen.value = false;
-};
+  displaySettingsOpen.value = false
+}
 
 // Gérer les mises à jour des paramètres
 const handleSettingsUpdate = (settings) => {
-  console.log("Paramètres d'affichage mis à jour:", settings);
-};
+  console.log("Paramètres d'affichage mis à jour:", settings)
+}
 
 const handleLogout = async () => {
-  await logout();
-  await navigateTo("/profiles");
-};
+  await logout()
+  await navigateTo('/profiles')
+}
 
-const openDropdown = ref(null);
-let dropdownCloseTimer = null;
+const openDropdown = ref(null)
+let dropdownCloseTimer = null
 
 const setDropdown = (name) => {
   if (dropdownCloseTimer) {
-    clearTimeout(dropdownCloseTimer);
-    dropdownCloseTimer = null;
+    clearTimeout(dropdownCloseTimer)
+    dropdownCloseTimer = null
   }
   if (openDropdown.value !== name) {
-    openDropdown.value = name;
+    openDropdown.value = name
   }
-};
+}
 
 const scheduleDropdownClose = (name) => {
   if (dropdownCloseTimer) {
-    clearTimeout(dropdownCloseTimer);
+    clearTimeout(dropdownCloseTimer)
   }
   dropdownCloseTimer = setTimeout(() => {
     if (openDropdown.value === name) {
-      openDropdown.value = null;
+      openDropdown.value = null
     }
-    dropdownCloseTimer = null;
-  }, 200);
-};
+    dropdownCloseTimer = null
+  }, 200)
+}
 
 const activeProfileLabel = computed(() => {
-  if (!activeProfile.value) return "Profil inconnu";
-  return `${activeProfile.value.firstName} ${activeProfile.value.lastName}`;
-});
+  if (!activeProfile.value) { return 'Profil inconnu' }
+  return `${activeProfile.value.firstName} ${activeProfile.value.lastName}`
+})
 
 const activeProfileInitials = computed(() => {
-  if (!activeProfile.value) return "??";
-  const { firstName = "", lastName = "" } = activeProfile.value;
+  if (!activeProfile.value) { return '??' }
+  const { firstName = '', lastName = '' } = activeProfile.value
   return (
-    `${firstName.charAt(0) || ""}${lastName.charAt(0) || ""}`.toUpperCase() ||
-    "??"
-  );
-});
+    `${firstName.charAt(0) || ''}${lastName.charAt(0) || ''}`.toUpperCase() ||
+    '??'
+  )
+})
 
 onMounted(async () => {
-  await ensureSession();
-});
+  await ensureSession()
+})
 
 onUnmounted(() => {
   if (dropdownCloseTimer) {
-    clearTimeout(dropdownCloseTimer);
-    dropdownCloseTimer = null;
+    clearTimeout(dropdownCloseTimer)
+    dropdownCloseTimer = null
   }
-});
+})
 </script>

app/components/ComponentHierarchy.vue

@@ -43,12 +43,12 @@ defineProps({
   },
   componentModelOptionsProvider: {
     type: Function,
-    default: () => [],
+    default: () => []
   },
   pieceModelOptionsProvider: {
     type: Function,
-    default: () => [],
-  },
+    default: () => []
+  }
 })
 
 defineEmits(['update', 'edit-piece', 'assign-model', 'assign-piece-model', 'custom-field-update', 'create-model-from-component'])

app/components/ComponentItem.vue

@@ -13,15 +13,17 @@
           type="button"
           class="btn btn-ghost btn-sm btn-circle shrink-0 transition-transform"
           :class="{ 'rotate-90': !isCollapsed }"
-          @click="toggleCollapse"
           :aria-expanded="!isCollapsed"
           :title="isCollapsed ? 'Déplier les détails du composant' : 'Replier les détails du composant'"
+          @click="toggleCollapse"
         >
           <IconLucideChevronRight class="w-5 h-5 transition-transform" aria-hidden="true" />
           <span class="sr-only">{{ isCollapsed ? 'Déplier' : 'Replier' }} le composant</span>
         </button>
         <div class="flex-1">
-          <h3 class="text-lg font-semibold">{{ component.name }}</h3>
+          <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-sm">{{ component.reference }}</span>
             <span v-if="component.constructeur" class="badge badge-outline badge-sm">{{ component.constructeur?.name }}</span>
@@ -55,8 +57,10 @@
               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 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>
@@ -66,8 +70,10 @@
               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 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>
@@ -78,8 +84,10 @@
               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 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">Constructeur</span></label>
@@ -87,7 +95,7 @@
               v-if="isEditMode"
               class="w-full"
               :model-value="component.constructeurId || component.constructeur?.id || null"
-              @update:modelValue="handleConstructeurChange"
+              @update:model-value="handleConstructeurChange"
             />
             <div v-else class="input input-bordered input-sm bg-base-200">
               <div class="flex flex-col">
@@ -117,7 +125,9 @@
                 class="select select-bordered select-sm"
                 @change="assignComponentModel($event.target.value)"
               >
-                <option value="">Définir manuellement</option>
+                <option value="">
+                  Définir manuellement
+                </option>
                 <option
                   v-for="model in componentModelOptionsList"
                   :key="model.id"
@@ -141,7 +151,9 @@
 
       <!-- Custom Fields Display - Editable or Read-only -->
       <div v-if="component.customFields && component.customFields.length > 0" class="mt-4 pt-4 border-t border-gray-200">
-        <h4 class="font-semibold text-sm text-gray-700 mb-3">Champs personnalisés</h4>
+        <h4 class="font-semibold text-sm text-gray-700 mb-3">
+          Champs personnalisés
+        </h4>
         <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
           <div v-for="field in component.customFields" :key="field.id" class="form-control">
             <label class="label">
@@ -156,7 +168,7 @@
                 class="input input-bordered input-sm"
                 :required="field.required"
                 @blur="updateComponentCustomField(field)"
-              />
+              >
               <input
                 v-else-if="field.type === 'number'"
                 v-model="field.value"
@@ -164,7 +176,7 @@
                 class="input input-bordered input-sm"
                 :required="field.required"
                 @blur="updateComponentCustomField(field)"
-              />
+              >
               <select
                 v-else-if="field.type === 'select'"
                 v-model="field.value"
@@ -172,8 +184,12 @@
                 :required="field.required"
                 @change="updateComponentCustomField(field)"
               >
-                <option value="">Sélectionner...</option>
-                <option v-for="option in field.options" :key="option" :value="option">{{ option }}</option>
+                <option value="">
+                  Sélectionner...
+                </option>
+                <option v-for="option in field.options" :key="option" :value="option">
+                  {{ option }}
+                </option>
               </select>
               <div v-else-if="field.type === 'boolean'" class="flex items-center gap-2">
                 <input
@@ -183,7 +199,7 @@
                   true-value="true"
                   false-value="false"
                   @change="updateComponentCustomField(field)"
-                />
+                >
                 <span class="text-sm">{{ field.value === 'true' ? 'Oui' : 'Non' }}</span>
               </div>
               <input
@@ -193,10 +209,12 @@
                 class="input input-bordered input-sm"
                 :required="field.required"
                 @blur="updateComponentCustomField(field)"
-              />
+              >
             </template>
             <template v-else>
-              <div class="input input-bordered input-sm bg-base-200">{{ field.value || 'Non défini' }}</div>
+              <div class="input input-bordered input-sm bg-base-200">
+                {{ field.value || 'Non défini' }}
+              </div>
             </template>
           </div>
         </div>
@@ -204,13 +222,17 @@
 
       <div class="mt-4 pt-4 border-t border-gray-200 space-y-3">
         <div class="flex items-center justify-between">
-          <h4 class="font-semibold text-sm text-gray-700">Documents</h4>
+          <h4 class="font-semibold text-sm text-gray-700">
+            Documents
+          </h4>
           <span v-if="isEditMode && selectedFiles.length" class="badge badge-outline">
             {{ selectedFiles.length }} fichier{{ selectedFiles.length > 1 ? 's' : '' }} sélectionné{{ selectedFiles.length > 1 ? 's' : '' }}
           </span>
         </div>
 
-        <p v-if="loadingDocuments" class="text-xs text-gray-500">Chargement des documents...</p>
+        <p v-if="loadingDocuments" class="text-xs text-gray-500">
+          Chargement des documents...
+        </p>
 
         <DocumentUpload
           v-if="isEditMode"
@@ -235,7 +257,9 @@
                 />
               </span>
               <div>
-                <div class="font-medium">{{ document.name }}</div>
+                <div class="font-medium">
+                  {{ document.name }}
+                </div>
                 <div class="text-xs text-gray-500">
                   {{ document.mimeType || 'Inconnu' }} • {{ formatSize(document.size) }}
                 </div>
@@ -266,12 +290,16 @@
             </div>
           </div>
         </div>
-        <p v-else-if="!loadingDocuments" class="text-xs text-gray-500">Aucun document lié à ce composant.</p>
+        <p v-else-if="!loadingDocuments" class="text-xs text-gray-500">
+          Aucun document lié à ce composant.
+        </p>
       </div>
 
       <!-- Component Pieces -->
       <div v-if="component.pieces && component.pieces.length > 0" class="space-y-2">
-        <h4 class="font-semibold text-gray-700">Pièces du composant</h4>
+        <h4 class="font-semibold text-gray-700">
+          Pièces du composant
+        </h4>
         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
           <PieceItem
             v-for="piece in component.pieces"
@@ -289,7 +317,9 @@
 
       <!-- Sub Components -->
       <div v-if="component.subComponents && component.subComponents.length > 0" class="space-y-3">
-        <h4 class="font-semibold text-gray-700">Sous-composants</h4>
+        <h4 class="font-semibold text-gray-700">
+          Sous-composants
+        </h4>
         <div class="space-y-3 pl-4 border-l-2 border-gray-200">
           <ComponentItem
             v-for="subComponent in component.subComponents"
@@ -326,32 +356,32 @@ import IconLucideChevronRight from '~icons/lucide/chevron-right'
 const props = defineProps({
   component: {
     type: Object,
-    required: true,
+    required: true
   },
   isEditMode: {
     type: Boolean,
-    default: false,
+    default: false
   },
   collapseAll: {
     type: Boolean,
-    default: true,
+    default: true
   },
   toggleToken: {
     type: Number,
-    default: 0,
+    default: 0
   },
   componentModelOptions: {
     type: Array,
-    default: () => [],
+    default: () => []
   },
   componentModelOptionsProvider: {
     type: Function,
-    default: () => [],
+    default: () => []
   },
   pieceModelOptionsProvider: {
     type: Function,
-    default: () => [],
-  },
+    default: () => []
+  }
 })
 
 const emit = defineEmits([
@@ -360,7 +390,7 @@ const emit = defineEmits([
   'custom-field-update',
   'assign-model',
   'assign-piece-model',
-  'create-model-from-component',
+  'create-model-from-component'
 ])
 
 const isCollapsed = ref(true)
@@ -369,7 +399,7 @@ const uploadingDocuments = ref(false)
 const loadingDocuments = ref(false)
 const documentsLoaded = ref(!!(props.component.documents && props.component.documents.length))
 const componentDocuments = computed(() => props.component.documents || [])
-const documentIcon = (doc) => getFileIcon({ name: doc.filename || doc.name, mime: doc.mimeType })
+const documentIcon = doc => getFileIcon({ name: doc.filename || doc.name, mime: doc.mimeType })
 const previewDocument = ref(null)
 const previewVisible = ref(false)
 
@@ -395,14 +425,14 @@ watch(
       ensureDocumentsLoaded()
     }
   },
-  { immediate: true },
+  { immediate: true }
 )
 
 watch(
   () => props.component.documents,
   (docs) => {
     documentsLoaded.value = !!(docs && docs.length)
-  },
+  }
 )
 
 const toggleCollapse = () => {
@@ -444,7 +474,7 @@ const assignComponentModel = (value) => {
     componentId: props.component.id,
     composantModelId: value || null,
     previousModelId,
-    previousModel,
+    previousModel
   })
 }
 
@@ -453,7 +483,7 @@ const emitAssignPieceModel = (payload) => {
 }
 
 const ensureDocumentsLoaded = async () => {
-  if (documentsLoaded.value || !props.component?.id) return
+  if (documentsLoaded.value || !props.component?.id) { return }
   await refreshDocuments()
 }
 
@@ -471,15 +501,15 @@ const refreshDocuments = async () => {
 }
 
 const handleFilesAdded = async (files) => {
-  if (!files.length || !props.component?.id) return
+  if (!files.length || !props.component?.id) { return }
   uploadingDocuments.value = true
   try {
     const result = await uploadDocuments(
       {
         files,
-        context: { composantId: props.component.id },
+        context: { composantId: props.component.id }
       },
-      { updateStore: false },
+      { updateStore: false }
     )
 
     if (result.success) {
@@ -494,15 +524,15 @@ const handleFilesAdded = async (files) => {
 }
 
 const removeDocument = async (documentId) => {
-  if (!documentId) return
+  if (!documentId) { return }
   const result = await deleteDocument(documentId, { updateStore: false })
   if (result.success) {
-    props.component.documents = (props.component.documents || []).filter((doc) => doc.id !== documentId)
+    props.component.documents = (props.component.documents || []).filter(doc => doc.id !== documentId)
   }
 }
 
 const downloadDocument = (doc) => {
-  if (!doc?.path) return
+  if (!doc?.path) { return }
 
   if (doc.path.startsWith('data:')) {
     const link = document.createElement('a')
@@ -516,7 +546,7 @@ const downloadDocument = (doc) => {
 }
 
 const openPreview = (doc) => {
-  if (!canPreviewDocument(doc)) return
+  if (!canPreviewDocument(doc)) { return }
   previewDocument.value = doc
   previewVisible.value = true
 }
@@ -527,8 +557,8 @@ const closePreview = () => {
 }
 
 const formatSize = (size) => {
-  if (size === undefined || size === null) return '—'
-  if (size === 0) return '0 B'
+  if (size === undefined || size === null) { return '—' }
+  if (size === 0) { return '0 B' }
   const units = ['B', 'KB', 'MB', 'GB']
   const index = Math.min(units.length - 1, Math.floor(Math.log(size) / Math.log(1024)))
   const formatted = size / Math.pow(1024, index)

app/components/ComponentModelStructureEditor.vue

@@ -70,52 +70,43 @@
         >
           <div class="flex items-start justify-between gap-2">
             <div class="flex-1 space-y-3">
-              <div class="grid grid-cols-1 md:grid-cols-3 gap-2">
-                <input
-                  v-model="piece.name"
-                  type="text"
-                  class="input input-bordered input-xs"
-                  placeholder="Nom de la pièce"
-                />
-                <input
-                  v-model="piece.reference"
-                  type="text"
-                  class="input input-bordered input-xs"
-                  placeholder="Référence"
-                />
-                <input
-                  v-model.number="piece.quantity"
-                  type="number"
-                  min="0"
-                  step="1"
-                  class="input input-bordered input-xs"
-                  placeholder="Quantité"
-                />
-              </div>
-              <div class="form-control">
-                <label class="label"><span class="label-text">Famille de pièce</span></label>
-                <div>
-                  <input
-                    :list="`component-piece-type-options-${index}`"
-                    v-model="piece.typePieceLabel"
-                    type="search"
-                    autocomplete="off"
-                    class="input input-bordered input-xs"
-                    placeholder="Rechercher une famille"
-                    @change="handlePieceTypeChange(piece)"
-                    @blur="handlePieceTypeChange(piece)"
-                  />
-                  <datalist :id="`component-piece-type-options-${index}`">
-                    <option
-                      v-for="type in availablePieceTypes"
-                      :key="type.id"
-                      :value="formatPieceTypeOption(type)"
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
+                <div class="form-control">
+                  <label class="label"><span class="label-text">Famille de pièce</span></label>
+                  <div>
+                    <input
+                      :list="`component-piece-type-options-${index}`"
+                      v-model="piece.typePieceLabel"
+                      type="search"
+                      autocomplete="off"
+                      class="input input-bordered input-xs"
+                      placeholder="Sélectionner une famille"
+                      @change="handlePieceTypeChange(piece)"
+                      @blur="handlePieceTypeChange(piece)"
                     />
-                  </datalist>
+                    <datalist :id="`component-piece-type-options-${index}`">
+                      <option
+                        v-for="type in availablePieceTypes"
+                        :key="type.id"
+                        :value="formatPieceTypeOption(type)"
+                      />
+                    </datalist>
+                  </div>
+                  <p class="mt-1 text-[11px] text-gray-500">
+                    {{ piece.typePieceId ? `Sélection : ${getPieceTypeLabel(piece.typePieceId) || 'Inconnue'}` : 'Aucune famille sélectionnée' }}
+                  </p>
+                </div>
+                <div class="form-control">
+                  <label class="label"><span class="label-text">Quantité (optionnel)</span></label>
+                  <input
+                    v-model.number="piece.quantity"
+                    type="number"
+                    min="0"
+                    step="1"
+                    class="input input-bordered input-xs"
+                    placeholder="Quantité"
+                  />
                 </div>
-                <p class="mt-1 text-[11px] text-gray-500">
-                  {{ piece.typePieceId ? `Sélection : ${getPieceTypeLabel(piece.typePieceId) || 'Inconnue'}` : 'Aucune famille sélectionnée' }}
-                </p>
               </div>
             </div>
             <button type="button" class="btn btn-error btn-xs btn-square" @click="removePiece(index)">
@@ -144,6 +135,7 @@
           :node="subComponent"
           :depth="0"
           :piece-types="availablePieceTypes"
+          :component-types="availableComponentTypes"
           @remove="removeSubComponent(index)"
         />
       </div>
@@ -162,6 +154,7 @@ import {
   normalizeStructureForSave,
 } from '~/shared/modelUtils'
 import { usePieceTypes } from '~/composables/usePieceTypes'
+import { useComponentTypes } from '~/composables/useComponentTypes'
 
 defineOptions({ name: 'ComponentModelStructureEditor' })
 
@@ -207,18 +200,25 @@ watch(
   { deep: true }
 )
 
-type PieceTypeOption = {
+type ModelTypeOption = {
   id: string
   name: string
   code?: string | null
 }
 
-const { pieceTypes, loadPieceTypes } = usePieceTypes()
+const formatModelTypeOption = (type: ModelTypeOption | undefined | null) => {
+  if (!type) return ''
+  return type.code ? `${type.name} (${type.code})` : type.name
+}
 
-const availablePieceTypes = computed<PieceTypeOption[]>(() => pieceTypes.value ?? [])
+const { pieceTypes, loadPieceTypes } = usePieceTypes()
+const { componentTypes, loadComponentTypes } = useComponentTypes()
+
+const availablePieceTypes = computed<ModelTypeOption[]>(() => pieceTypes.value ?? [])
+const availableComponentTypes = computed<ModelTypeOption[]>(() => componentTypes.value ?? [])
 
 const pieceTypeMap = computed(() => {
-  const map = new Map<string, PieceTypeOption>()
+  const map = new Map<string, ModelTypeOption>()
   availablePieceTypes.value.forEach((type) => {
     if (type && typeof type.id === 'string') {
       map.set(type.id, type)
@@ -227,10 +227,18 @@ const pieceTypeMap = computed(() => {
   return map
 })
 
-const formatPieceTypeOption = (type: PieceTypeOption | undefined | null) => {
-  if (!type) return ''
-  return type.code ? `${type.name} (${type.code})` : type.name
-}
+const componentTypeMap = computed(() => {
+  const map = new Map<string, ModelTypeOption>()
+  availableComponentTypes.value.forEach((type) => {
+    if (type && typeof type.id === 'string') {
+      map.set(type.id, type)
+    }
+  })
+  return map
+})
+
+const formatPieceTypeOption = (type: ModelTypeOption | undefined | null) => formatModelTypeOption(type)
+const formatComponentTypeOption = (type: ModelTypeOption | undefined | null) => formatModelTypeOption(type)
 
 const resolvePieceType = (input: string) => {
   const normalized = input.trim().toLowerCase()
@@ -251,6 +259,25 @@ const resolvePieceType = (input: string) => {
   )
 }
 
+const resolveComponentType = (input: string) => {
+  const normalized = input.trim().toLowerCase()
+  if (!normalized) {
+    return null
+  }
+  return (
+    availableComponentTypes.value.find((type) => {
+      const formatted = formatComponentTypeOption(type).toLowerCase()
+      const name = (type?.name ?? '').toLowerCase()
+      const code = (type?.code ?? '').toLowerCase()
+      return (
+        formatted === normalized
+        || name === normalized
+        || (!!code && code === normalized)
+      )
+    }) ?? null
+  )
+}
+
 const getPieceTypeLabel = (id?: string) => {
   if (!id) return ''
   const option = pieceTypeMap.value.get(id)
@@ -263,12 +290,21 @@ const updatePieceTypeLabel = (piece: any) => {
   }
   if (piece.typePieceId) {
     const option = pieceTypeMap.value.get(piece.typePieceId)
-    piece.typePieceLabel = option ? formatPieceTypeOption(option) : piece.typePieceLabel || ''
+    if (option) {
+      piece.typePieceLabel = formatPieceTypeOption(option)
+      piece.name = option.name || formatPieceTypeOption(option)
+    } else if (!piece.typePieceLabel) {
+      piece.name = ''
+    }
   } else if (piece.typePieceLabel) {
     const match = resolvePieceType(piece.typePieceLabel)
     if (match) {
       piece.typePieceId = match.id
       piece.typePieceLabel = formatPieceTypeOption(match)
+      piece.name = match.name || formatPieceTypeOption(match)
+    } else {
+      piece.typePieceLabel = ''
+      piece.name = ''
     }
   }
 }
@@ -281,14 +317,18 @@ const handlePieceTypeChange = (piece: any) => {
   if (!value) {
     piece.typePieceId = ''
     piece.typePieceLabel = ''
+    piece.name = ''
     return
   }
   const match = resolvePieceType(value)
   if (match) {
     piece.typePieceId = match.id
     piece.typePieceLabel = formatPieceTypeOption(match)
+    piece.name = match.name || formatPieceTypeOption(match)
   } else {
     piece.typePieceId = ''
+    piece.typePieceLabel = ''
+    piece.name = ''
   }
 }
 
@@ -304,37 +344,84 @@ const applyPieceLabels = (pieces?: any[]) => {
       if (match) {
         piece.typePieceId = match.id
         piece.typePieceLabel = formatPieceTypeOption(match)
+        piece.name = match.name || formatPieceTypeOption(match)
+      } else {
+        piece.typePieceLabel = ''
+        piece.name = ''
       }
+    } else if (!piece?.name) {
+      piece.name = ''
     }
   })
 }
 
+const applyComponentTypeLabel = (component: any) => {
+  if (!component) {
+    return
+  }
+  if (component.typeComposantId) {
+    const option = componentTypeMap.value.get(component.typeComposantId)
+    if (option) {
+      component.typeComposantLabel = formatComponentTypeOption(option)
+      component.name = option.name || formatComponentTypeOption(option)
+    } else if (!component.typeComposantLabel) {
+      component.name = ''
+    }
+  } else if (component.typeComposantLabel) {
+    const match = resolveComponentType(component.typeComposantLabel)
+    if (match) {
+      component.typeComposantId = match.id
+      component.typeComposantLabel = formatComponentTypeOption(match)
+      component.name = match.name || formatComponentTypeOption(match)
+    } else {
+      component.typeComposantLabel = ''
+      component.name = ''
+    }
+  }
+}
+
 const traverseSubComponents = (components?: any[]) => {
   if (!Array.isArray(components)) {
     return
   }
   components.forEach((component) => {
+    applyComponentTypeLabel(component)
     applyPieceLabels(component?.pieces)
     traverseSubComponents(component?.subComponents)
   })
 }
 
-const syncAllPieceTypeLabels = () => {
+const syncAllTypeLabels = () => {
   applyPieceLabels(localStructure.pieces)
   traverseSubComponents(localStructure.subComponents)
 }
 
 onMounted(async () => {
+  const loaders: Promise<any>[] = []
   if (!availablePieceTypes.value.length) {
-    await loadPieceTypes()
+    loaders.push(loadPieceTypes())
   }
-  syncAllPieceTypeLabels()
+  if (!availableComponentTypes.value.length) {
+    loaders.push(loadComponentTypes())
+  }
+  if (loaders.length) {
+    await Promise.all(loaders)
+  }
+  syncAllTypeLabels()
 })
 
 watch(
   () => availablePieceTypes.value,
   () => {
-    syncAllPieceTypeLabels()
+    syncAllTypeLabels()
+  },
+  { deep: true }
+)
+
+watch(
+  () => availableComponentTypes.value,
+  () => {
+    syncAllTypeLabels()
   },
   { deep: true }
 )
@@ -365,7 +452,6 @@ const addPiece = () => {
   ensureArray('pieces')
   localStructure.pieces.push({
     name: '',
-    reference: '',
     quantity: undefined,
     typePieceId: '',
     typePieceLabel: '',
@@ -383,6 +469,8 @@ const addSubComponent = () => {
     name: '',
     description: '',
     quantity: undefined,
+    typeComposantId: '',
+    typeComposantLabel: '',
     customFields: [],
     pieces: [],
     subComponents: [],

app/components/ConstructeurSelect.vue

@@ -4,13 +4,13 @@
     <div class="flex items-center gap-2">
       <div class="relative flex-1">
         <input
-          type="text"
           v-model="searchTerm"
+          type="text"
           class="input input-bordered w-full pr-10"
           :placeholder="placeholder"
           @focus="openDropdown = true; ensureOptionsLoaded()"
           @input="onSearch"
-        />
+        >
         <button
           type="button"
           class="absolute right-2 top-1/2 -translate-y-1/2 btn btn-ghost btn-xs"
@@ -57,11 +57,13 @@
 
     <dialog class="modal" :class="{ 'modal-open': openCreateModal }">
       <div class="modal-box">
-        <h3 class="font-bold text-lg mb-4">Nouveau constructeur</h3>
+        <h3 class="font-bold text-lg mb-4">
+          Nouveau constructeur
+        </h3>
         <form @submit.prevent="handleCreate">
           <div class="form-control mb-3">
             <label class="label"><span class="label-text">Nom</span></label>
-            <input v-model="createForm.name" type="text" class="input input-bordered" required />
+            <input v-model="createForm.name" type="text" class="input input-bordered" required>
           </div>
           <FieldEmail
             v-model="createForm.email"
@@ -78,9 +80,11 @@
           />
 
           <div class="modal-action">
-            <button type="button" class="btn" @click="closeCreateModal">Annuler</button>
+            <button type="button" class="btn" @click="closeCreateModal">
+              Annuler
+            </button>
             <button type="submit" class="btn btn-primary" :disabled="creating">
-              <span v-if="creating" class="loading loading-spinner loading-xs mr-2"></span>
+              <span v-if="creating" class="loading loading-spinner loading-xs mr-2" />
               Créer
             </button>
           </div>
@@ -100,16 +104,16 @@ import IconLucideChevronsUpDown from '~icons/lucide/chevrons-up-down'
 const props = defineProps({
   modelValue: {
     type: String,
-    default: null,
+    default: null
   },
   label: {
     type: String,
-    default: '',
+    default: ''
   },
   placeholder: {
     type: String,
-    default: 'Sélectionner ou créer un constructeur...',
-  },
+    default: 'Sélectionner ou créer un constructeur...'
+  }
 })
 
 const emit = defineEmits(['update:modelValue'])
@@ -131,7 +135,7 @@ const applyOptions = (items = []) => {
   if (selectedId && !limited.some(item => item.id === selectedId)) {
     const selected = cloned.find(item => item.id === selectedId)
     if (selected) {
-      if (limited.length >= 10) limited.pop()
+      if (limited.length >= 10) { limited.pop() }
       limited.unshift(selected)
     }
   }
@@ -142,7 +146,7 @@ const applyOptions = (items = []) => {
 const createForm = ref({
   name: '',
   email: '',
-  phone: '',
+  phone: ''
 })
 
 const selectedConstructeur = computed(() =>
@@ -171,8 +175,8 @@ const ensureOptionsLoaded = async (force = false) => {
     applyOptions(constructeurs.value)
     return
   }
-  if (!force && searchTerm.value === lastSearchTerm && options.value.length) return
-  if (options.value.length && !force) return
+  if (!force && searchTerm.value === lastSearchTerm && options.value.length) { return }
+  if (options.value.length && !force) { return }
   const result = await searchConstructeurs(searchTerm.value)
   if (result.success) {
     applyOptions(result.data || [])
@@ -189,7 +193,7 @@ const onSearch = () => {
       lastSearchTerm = ''
       return
     }
-    if (searchTerm.value === lastSearchTerm) return
+    if (searchTerm.value === lastSearchTerm) { return }
     const result = await searchConstructeurs(searchTerm.value)
     if (result.success) {
       applyOptions(result.data || [])
@@ -212,8 +216,8 @@ const closeCreateModal = () => {
 const handleCreate = async () => {
   creating.value = true
   const payload = { ...createForm.value }
-  if (!payload.phone) delete payload.phone
-  if (!payload.email) delete payload.email
+  if (!payload.phone) { delete payload.phone }
+  if (!payload.email) { delete payload.email }
   const result = await createConstructeur(payload)
   creating.value = false
   if (result.success) {

app/components/CustomFieldsDisplay.vue

@@ -1,6 +1,8 @@
 <template>
   <div v-if="customFields && customFields.length > 0" class="space-y-4">
-    <h4 class="font-semibold text-gray-700 mb-3">Champs personnalisés</h4>
+    <h4 class="font-semibold text-gray-700 mb-3">
+      Champs personnalisés
+    </h4>
     <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
       <div
         v-for="field in customFields"
@@ -20,7 +22,7 @@
           class="input input-bordered input-sm"
           :required="field.required"
           @blur="updateCustomFieldValue(field.id)"
-        />
+        >
 
         <!-- Champ de type NUMBER -->
         <input
@@ -30,7 +32,7 @@
           class="input input-bordered input-sm"
           :required="field.required"
           @blur="updateCustomFieldValue(field.id)"
-        />
+        >
 
         <!-- Champ de type SELECT -->
         <select
@@ -40,7 +42,9 @@
           :required="field.required"
           @change="updateCustomFieldValue(field.id)"
         >
-          <option value="">Sélectionner...</option>
+          <option value="">
+            Sélectionner...
+          </option>
           <option
             v-for="option in field.options"
             :key="option"
@@ -58,7 +62,7 @@
             class="checkbox checkbox-sm"
             :checked="fieldValues[field.id] === 'true'"
             @change="updateCustomFieldValue(field.id)"
-          />
+          >
           <span class="text-sm">{{ fieldValues[field.id] === 'true' ? 'Oui' : 'Non' }}</span>
         </div>
 
@@ -70,7 +74,7 @@
           class="input input-bordered input-sm"
           :required="field.required"
           @blur="updateCustomFieldValue(field.id)"
-        />
+        >
       </div>
     </div>
   </div>
@@ -91,7 +95,7 @@ const props = defineProps({
   entityType: {
     type: String,
     required: true, // 'machine', 'composant', 'piece'
-    validator: (value) => ['machine', 'composant', 'piece'].includes(value)
+    validator: value => ['machine', 'composant', 'piece'].includes(value)
   }
 })
 
@@ -102,7 +106,7 @@ const fieldValues = reactive({})
 
 // Initialiser les valeurs sans appliquer de valeur par défaut implicite
 const initializeFieldValues = () => {
-  props.customFields.forEach(field => {
+  props.customFields.forEach((field) => {
     if (!(field.id in fieldValues)) {
       fieldValues[field.id] = field.value ?? ''
     }

app/components/DisplaySettings.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="modal" :class="{ 'modal-open': isOpen }">
     <div class="modal-box">
-      <h3 class="font-bold text-lg mb-4">Paramètres d'affichage</h3>
+      <h3 class="font-bold text-lg mb-4">
+        Paramètres d'affichage
+      </h3>
 
       <!-- Contrôle du zoom -->
       <div class="form-control mb-4">
@@ -15,9 +17,9 @@
           max="150"
           step="10"
           :value="zoomLevel"
-          @input="updateZoom"
           class="range range-primary"
-        />
+          @input="updateZoom"
+        >
         <div class="w-full flex justify-between text-xs px-2 mt-1">
           <span>80%</span>
           <span>100%</span>
@@ -32,23 +34,23 @@
         </label>
         <div class="flex gap-2">
           <button
-            @click="setDensity('compact')"
             class="btn btn-sm"
             :class="density === 'compact' ? 'btn-primary' : 'btn-outline'"
+            @click="setDensity('compact')"
           >
             Compacte
           </button>
           <button
-            @click="setDensity('comfortable')"
             class="btn btn-sm"
             :class="density === 'comfortable' ? 'btn-primary' : 'btn-outline'"
+            @click="setDensity('comfortable')"
           >
             Confortable
           </button>
           <button
-            @click="setDensity('spacious')"
             class="btn btn-sm"
             :class="density === 'spacious' ? 'btn-primary' : 'btn-outline'"
+            @click="setDensity('spacious')"
           >
             Espacée
           </button>
@@ -62,16 +64,16 @@
         </label>
         <div class="flex gap-2">
           <button
-            @click="setContrast('normal')"
             class="btn btn-sm"
             :class="contrast === 'normal' ? 'btn-primary' : 'btn-outline'"
+            @click="setContrast('normal')"
           >
             Normal
           </button>
           <button
-            @click="setContrast('high')"
             class="btn btn-sm"
             :class="contrast === 'high' ? 'btn-primary' : 'btn-outline'"
+            @click="setContrast('high')"
           >
             Élevé
           </button>
@@ -81,8 +83,8 @@
       <!-- Réinitialiser -->
       <div class="form-control">
         <button
-          @click="resetSettings"
           class="btn btn-outline btn-sm"
+          @click="resetSettings"
         >
           Réinitialiser les paramètres
         </button>
@@ -90,7 +92,9 @@
 
       <!-- Actions -->
       <div class="modal-action">
-        <button @click="closeModal" class="btn btn-primary">Fermer</button>
+        <button class="btn btn-primary" @click="closeModal">
+          Fermer
+        </button>
       </div>
     </div>
   </div>
@@ -119,9 +123,9 @@ onMounted(() => {
   const savedDensity = localStorage.getItem('display-density')
   const savedContrast = localStorage.getItem('display-contrast')
 
-  if (savedZoom) zoomLevel.value = parseInt(savedZoom)
-  if (savedDensity) density.value = savedDensity
-  if (savedContrast) contrast.value = savedContrast
+  if (savedZoom) { zoomLevel.value = parseInt(savedZoom) }
+  if (savedDensity) { density.value = savedDensity }
+  if (savedContrast) { contrast.value = savedContrast }
 
   applySettings()
 })
@@ -160,7 +164,7 @@ const applySettings = () => {
 
     // Appliquer aux enfants du modal
     const modalElements = modal.querySelectorAll('*')
-    modalElements.forEach(element => {
+    modalElements.forEach((element) => {
       element.style.fontSize = 'inherit'
       element.style.transform = 'none'
       element.style.scale = '1'

app/components/DocumentPreviewModal.vue

@@ -8,7 +8,9 @@
       <div class="w-full max-w-[1600px] h-full max-h-[94vh] bg-base-100 rounded-2xl shadow-2xl flex flex-col overflow-hidden">
         <header class="flex items-start justify-between gap-4 p-6 border-b border-base-200">
           <div class="min-w-0">
-            <h3 class="font-bold text-xl truncate">Prévisualisation</h3>
+            <h3 class="font-bold text-xl truncate">
+              Prévisualisation
+            </h3>
             <p class="text-sm text-gray-500 truncate">
               {{ document?.name || document?.filename }}<span v-if="documentDescription"> • {{ documentDescription }}</span>
             </p>
@@ -21,7 +23,7 @@
         <section class="flex-1 bg-base-200/40 px-6 py-5 overflow-hidden">
           <div class="h-full w-full rounded-xl border border-base-300 bg-base-100 flex items-center justify-center overflow-hidden">
             <template v-if="previewType === 'image'">
-              <img :src="document?.path" alt="preview" class="max-h-full max-w-full object-contain" />
+              <img :src="document?.path" alt="preview" class="max-h-full max-w-full object-contain">
             </template>
 
             <template v-else-if="previewType === 'pdf'">
@@ -30,21 +32,21 @@
                 class="w-full h-full bg-white"
                 frameborder="0"
                 title="Aperçu PDF"
-              ></iframe>
+              />
             </template>
 
             <template v-else-if="previewType === 'audio'">
-              <audio :src="document?.path" controls class="w-full"></audio>
+              <audio :src="document?.path" controls class="w-full" />
             </template>
 
             <template v-else-if="previewType === 'video'">
-              <video :src="document?.path" controls class="w-full h-full bg-black"></video>
+              <video :src="document?.path" controls class="w-full h-full bg-black" />
             </template>
 
             <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">
-                  <span class="loading loading-spinner loading-md mr-2"></span>
+                  <span class="loading loading-spinner loading-md mr-2" />
                   Chargement du document...
                 </div>
                 <div v-else-if="textError" class="alert alert-error text-sm">
@@ -65,7 +67,9 @@
         </section>
 
         <footer class="border-t border-base-200 px-6 py-4 flex flex-wrap gap-2 justify-end bg-base-100">
-          <button type="button" class="btn" @click="close">Fermer</button>
+          <button type="button" class="btn" @click="close">
+            Fermer
+          </button>
           <button type="button" class="btn btn-primary" @click="download">
             Télécharger
           </button>
@@ -82,12 +86,12 @@ import { getPreviewType, describeDocument } from '~/utils/documentPreview'
 const props = defineProps({
   document: {
     type: Object,
-    default: null,
+    default: null
   },
   visible: {
     type: Boolean,
-    default: false,
-  },
+    default: false
+  }
 })
 
 const emit = defineEmits(['close'])
@@ -106,8 +110,8 @@ watch(
     textError.value = ''
     textLoading.value = false
 
-    if (!doc) return
-    if (getPreviewType(doc) !== 'text') return
+    if (!doc) { return }
+    if (getPreviewType(doc) !== 'text') { return }
 
     try {
       textLoading.value = true
@@ -142,7 +146,7 @@ const close = () => {
 }
 
 const download = () => {
-  if (!props.document?.path) return
+  if (!props.document?.path) { return }
   const link = document.createElement('a')
   link.href = props.document.path
   link.download = props.document.filename || props.document.name || 'document'

app/components/DocumentUpload.vue

@@ -10,8 +10,12 @@
       <IconLucideCloudUpload class="w-10 h-10 text-primary" aria-hidden="true" />
 
       <div>
-        <h3 class="font-semibold">{{ title }}</h3>
-        <p class="text-sm text-gray-500">{{ subtitle }}</p>
+        <h3 class="font-semibold">
+          {{ title }}
+        </h3>
+        <p class="text-sm text-gray-500">
+          {{ subtitle }}
+        </p>
       </div>
 
       <div class="flex flex-wrap justify-center gap-2">
@@ -28,7 +32,7 @@
         :accept="accept"
         :multiple="multiple"
         @change="onFileChange"
-      />
+      >
 
       <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">
@@ -62,28 +66,28 @@ import IconLucideCloudUpload from '~icons/lucide/cloud-upload'
 const props = defineProps({
   title: {
     type: String,
-    default: 'Ajouter des documents',
+    default: 'Ajouter des documents'
   },
   subtitle: {
     type: String,
-    default: 'Formats acceptés : PDF, images, textes…',
+    default: 'Formats acceptés : PDF, images, textes…'
   },
   accept: {
     type: String,
-    default: '',
+    default: ''
   },
   multiple: {
     type: Boolean,
-    default: true,
+    default: true
   },
   modelValue: {
     type: Array,
-    default: () => [],
+    default: () => []
   },
   maxFileSizeMb: {
     type: Number,
-    default: 200,
-  },
+    default: 200
+  }
 })
 
 const emit = defineEmits(['update:modelValue', 'files-added'])
@@ -166,7 +170,7 @@ const removeFile = (fileToRemove) => {
 }
 
 const formatSize = (size) => {
-  if (!size) return '0 B'
+  if (!size) { return '0 B' }
   const units = ['B', 'KB', 'MB', 'GB']
   const index = Math.floor(Math.log(size) / Math.log(1024))
   const formatted = size / Math.pow(1024, index)

app/components/MachinePrintSelectionModal.vue

@@ -1,8 +1,10 @@
 <template>
   <dialog class="modal" :class="{ 'modal-open': open }">
     <div class="modal-box max-w-3xl">
-      <form method="dialog" class="modal-close" @submit.prevent></form>
-      <h3 class="font-bold text-lg mb-2">Préparer l'impression</h3>
+      <form method="dialog" class="modal-close" @submit.prevent />
+      <h3 class="font-bold text-lg mb-2">
+        Préparer l'impression
+      </h3>
       <p class="text-sm text-base-content/70 mb-4">
         Choisissez les sections à inclure avant de lancer l'impression.
       </p>
@@ -23,10 +25,10 @@
           </h4>
           <label class="flex items-start gap-3">
             <input
+              v-model="selection.machine.info"
               type="checkbox"
               class="checkbox checkbox-primary mt-1"
-              v-model="selection.machine.info"
-            />
+            >
             <div>
               <p class="font-medium">Informations générales</p>
               <p class="text-xs text-base-content/60">
@@ -36,10 +38,10 @@
           </label>
           <label class="flex items-start gap-3">
             <input
+              v-model="selection.machine.customFields"
               type="checkbox"
               class="checkbox checkbox-primary mt-1"
-              v-model="selection.machine.customFields"
-            />
+            >
             <div>
               <p class="font-medium">Champs personnalisés</p>
               <p class="text-xs text-base-content/60">
@@ -49,10 +51,10 @@
           </label>
           <label class="flex items-start gap-3">
             <input
+              v-model="selection.machine.documents"
               type="checkbox"
               class="checkbox checkbox-primary mt-1"
-              v-model="selection.machine.documents"
-            />
+            >
             <div>
               <p class="font-medium">Documents</p>
               <p class="text-xs text-base-content/60">
@@ -62,7 +64,7 @@
           </label>
         </section>
 
-        <section class="bg-base-200/30 rounded-xl p-4 space-y-3" v-if="hasComponents">
+        <section v-if="hasComponents" class="bg-base-200/30 rounded-xl p-4 space-y-3">
           <h4 class="font-semibold text-sm uppercase tracking-wide text-base-content/70">
             Composants & pièces
           </h4>
@@ -76,7 +78,7 @@
           </div>
         </section>
 
-        <section class="bg-base-200/30 rounded-xl p-4 space-y-3" v-if="hasPieces">
+        <section v-if="hasPieces" class="bg-base-200/30 rounded-xl p-4 space-y-3">
           <h4 class="font-semibold text-sm uppercase tracking-wide text-base-content/70">
             Pièces indépendantes
           </h4>
@@ -87,10 +89,10 @@
               class="flex items-start gap-3"
             >
               <input
+                v-model="selection.pieces[piece.id]"
                 type="checkbox"
                 class="checkbox checkbox-secondary mt-1"
-                v-model="selection.pieces[piece.id]"
-              />
+              >
               <div>
                 <p class="font-medium">{{ piece.name }}</p>
                 <p class="text-xs text-base-content/60">
@@ -122,7 +124,7 @@ const props = defineProps({
   open: { type: Boolean, default: false },
   selection: { type: Object, required: true },
   components: { type: Array, default: () => [] },
-  pieces: { type: Array, default: () => [] },
+  pieces: { type: Array, default: () => [] }
 })
 
 const emit = defineEmits(['close', 'confirm', 'select-all', 'deselect-all'])

app/components/MachinePrintSelectionNode.vue

@@ -2,10 +2,10 @@
   <div class="rounded-lg border border-base-300 bg-base-100/80 p-3 space-y-3">
     <label class="flex items-start gap-3">
       <input
+        v-model="selection.components[component.id]"
         type="checkbox"
         class="checkbox checkbox-primary mt-1"
-        v-model="selection.components[component.id]"
-      />
+      >
       <div class="flex-1">
         <p class="font-medium">{{ component.name }}</p>
         <p v-if="component.reference" class="text-xs text-base-content/60">
@@ -24,10 +24,10 @@
         class="flex items-start gap-3"
       >
         <input
+          v-model="selection.pieces[piece.id]"
           type="checkbox"
           class="checkbox checkbox-secondary mt-1"
-          v-model="selection.pieces[piece.id]"
-        />
+        >
         <div>
           <p class="font-medium">{{ piece.name }}</p>
           <p class="text-xs text-base-content/60">
@@ -55,7 +55,7 @@ defineOptions({ name: 'MachinePrintSelectionNode' })
 
 const props = defineProps({
   component: { type: Object, required: true },
-  selection: { type: Object, required: true },
+  selection: { type: Object, required: true }
 })
 
 const childComponents = computed(() => props.component.subComponents || [])

app/components/ModelStructureViewer.vue

@@ -1,16 +1,18 @@
 <template>
   <div class="space-y-4">
     <div class="flex flex-wrap items-center gap-2 text-sm text-gray-600">
-      <span class="badge badge-outline badge-sm" v-if="stats.customFields">{{ stats.customFields }} champ(s)</span>
-      <span class="badge badge-outline badge-sm" v-if="stats.pieces">{{ stats.pieces }} pièce(s)</span>
-      <span class="badge badge-outline badge-sm" v-if="stats.subComponents">{{ stats.subComponents }} sous-composant(s)</span>
+      <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">
         Structure vide
       </span>
     </div>
 
     <details class="collapse collapse-arrow bg-base-200">
-      <summary class="collapse-title text-sm font-medium">Voir la structure JSON</summary>
+      <summary class="collapse-title text-sm font-medium">
+        Voir la structure JSON
+      </summary>
       <div class="collapse-content">
         <pre class="mockup-code whitespace-pre-wrap text-xs bg-base-300 p-4 rounded">
 <code>{{ formatted }}</code>
@@ -27,8 +29,8 @@ import { computeStructureStats } from '~/shared/modelUtils'
 const props = defineProps({
   structure: {
     type: Object,
-    default: () => ({}),
-  },
+    default: () => ({})
+  }
 })
 
 const stats = computed(() => computeStructureStats(props.structure))

app/components/PageHero.vue

@@ -5,7 +5,9 @@
         <component :is="headingTag" v-if="title" class="text-4xl font-bold">
           {{ title }}
         </component>
-        <p v-if="subtitle" class="text-sm opacity-90">{{ subtitle }}</p>
+        <p v-if="subtitle" class="text-sm opacity-90">
+          {{ subtitle }}
+        </p>
         <slot />
       </div>
     </div>
@@ -18,41 +20,41 @@ import { computed } from 'vue'
 const props = defineProps({
   title: {
     type: String,
-    default: '',
+    default: ''
   },
   subtitle: {
     type: String,
-    default: '',
+    default: ''
   },
   gradientFrom: {
     type: String,
-    default: 'from-primary',
+    default: 'from-primary'
   },
   gradientTo: {
     type: String,
-    default: 'to-secondary',
+    default: 'to-secondary'
   },
   minHeight: {
     type: String,
-    default: 'min-h-[25vh]',
+    default: 'min-h-[25vh]'
   },
   maxWidth: {
     type: String,
-    default: 'max-w-xl',
+    default: 'max-w-xl'
   },
   rounded: {
     type: Boolean,
-    default: false,
+    default: false
   },
   alignment: {
     type: String,
     default: 'center',
-    validator: (value) => ['center', 'start', 'end'].includes(value),
+    validator: value => ['center', 'start', 'end'].includes(value)
   },
   headingTag: {
     type: String,
-    default: 'h1',
-  },
+    default: 'h1'
+  }
 })
 
 const sectionClasses = computed(() => {

app/components/PieceItem.vue

@@ -19,7 +19,7 @@
           type="text"
           class="font-semibold text-lg input input-sm input-bordered"
           @blur="updatePiece"
-        />
+        >
         <div v-else class="font-semibold text-lg input input-sm input-bordered bg-base-200">
           {{ pieceData.name }}
         </div>
@@ -53,7 +53,7 @@
           type="text"
           class="input input-sm input-bordered ml-2"
           @blur="updatePiece"
-        />
+        >
         <span v-else class="ml-2">{{ pieceData.reference || 'Non définie' }}</span>
       </div>
       <div>
@@ -68,7 +68,7 @@
           v-else
           class="w-full"
           :model-value="piece.constructeurId || piece.constructeur?.id || null"
-          @update:modelValue="handleConstructeurChange"
+          @update:model-value="handleConstructeurChange"
         />
       </div>
       <div>
@@ -81,7 +81,7 @@
           step="0.01"
           class="input input-sm input-bordered ml-2"
           @blur="updatePiece"
-        />
+        >
         <span v-else class="ml-2">{{ pieceData.prix ? `${pieceData.prix}€` : 'Non défini' }}</span>
       </div>
     </div>
@@ -90,7 +90,7 @@
       v-if="isEditMode && piece.typeMachinePieceRequirement"
       class="mt-3"
     >
-     <label class="label">
+      <label class="label">
         <span class="label-text text-sm font-medium">Modèle de pièce</span>
         <span class="label-text-alt text-xs">
           {{ piece.typeMachinePieceRequirement.label || piece.typeMachinePieceRequirement.typePiece?.name || 'Groupe' }}
@@ -101,7 +101,9 @@
         class="select select-bordered select-sm w-full"
         @change="assignPieceModel($event.target.value)"
       >
-        <option value="">Définir manuellement</option>
+        <option value="">
+          Définir manuellement
+        </option>
         <option
           v-for="model in pieceModelOptions"
           :key="model.id"
@@ -114,7 +116,9 @@
 
     <!-- Champs personnalisés de la pièce -->
     <div v-if="piece.customFieldValues && piece.customFieldValues.length > 0" class="mt-4 pt-4 border-t border-gray-200">
-      <h5 class="text-sm font-medium text-gray-700 mb-3">Champs personnalisés</h5>
+      <h5 class="text-sm font-medium text-gray-700 mb-3">
+        Champs personnalisés
+      </h5>
       <div class="space-y-3">
         <div
           v-for="fieldValue in piece.customFieldValues"
@@ -132,34 +136,36 @@
             <input
               v-if="fieldValue.customField.type === 'text'"
               :value="fieldValue.value"
-              @input="setCustomFieldValue(fieldValue.id, $event.target.value)"
               type="text"
               class="input input-bordered input-sm"
               :required="fieldValue.customField.required"
+              @input="setCustomFieldValue(fieldValue.id, $event.target.value)"
               @blur="updateCustomFieldValue(fieldValue.id)"
-            />
+            >
 
             <!-- Champ de type NUMBER -->
             <input
               v-else-if="fieldValue.customField.type === 'number'"
               :value="fieldValue.value"
-              @input="setCustomFieldValue(fieldValue.id, $event.target.value)"
               type="number"
               class="input input-bordered input-sm"
               :required="fieldValue.customField.required"
+              @input="setCustomFieldValue(fieldValue.id, $event.target.value)"
               @blur="updateCustomFieldValue(fieldValue.id)"
-            />
+            >
 
             <!-- Champ de type SELECT -->
             <select
               v-else-if="fieldValue.customField.type === 'select'"
               :value="fieldValue.value"
-              @change="setCustomFieldValue(fieldValue.id, $event.target.value)"
               class="select select-bordered select-sm"
               :required="fieldValue.customField.required"
+              @change="setCustomFieldValue(fieldValue.id, $event.target.value)"
               @blur="updateCustomFieldValue(fieldValue.id)"
             >
-              <option value="">Sélectionner...</option>
+              <option value="">
+                Sélectionner...
+              </option>
               <option
                 v-for="option in fieldValue.customField.options"
                 :key="option"
@@ -173,12 +179,12 @@
             <div v-else-if="fieldValue.customField.type === 'boolean'" class="flex items-center gap-2">
               <input
                 :value="fieldValue.value"
-                @change="setCustomFieldValue(fieldValue.id, $event.target.checked ? 'true' : 'false')"
                 type="checkbox"
                 class="checkbox checkbox-sm"
                 :checked="fieldValue.value === 'true'"
+                @change="setCustomFieldValue(fieldValue.id, $event.target.checked ? 'true' : 'false')"
                 @blur="updateCustomFieldValue(fieldValue.id)"
-              />
+              >
               <span class="text-sm">{{ fieldValue.value === 'true' ? 'Oui' : 'Non' }}</span>
             </div>
 
@@ -186,12 +192,12 @@
             <input
               v-else-if="fieldValue.customField.type === 'date'"
               :value="fieldValue.value"
-              @input="setCustomFieldValue(fieldValue.id, $event.target.value)"
               type="date"
               class="input input-bordered input-sm"
               :required="fieldValue.customField.required"
+              @input="setCustomFieldValue(fieldValue.id, $event.target.value)"
               @blur="updateCustomFieldValue(fieldValue.id)"
-            />
+            >
           </template>
 
           <!-- Mode lecture seule -->
@@ -206,13 +212,17 @@
 
     <div class="mt-4 pt-4 border-t border-gray-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-gray-700">
+          Documents
+        </h5>
         <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">Chargement des documents...</p>
+      <p v-if="loadingDocuments" class="text-xs text-gray-500">
+        Chargement des documents...
+      </p>
 
       <DocumentUpload
         v-if="isEditMode"
@@ -237,7 +247,9 @@
               />
             </span>
             <div>
-              <div class="font-medium">{{ document.name }}</div>
+              <div class="font-medium">
+                {{ document.name }}
+              </div>
               <div class="text-xs text-gray-500">
                 {{ document.mimeType || 'Inconnu' }} • {{ formatSize(document.size) }}
               </div>
@@ -268,13 +280,16 @@
           </div>
         </div>
       </div>
-      <p v-else-if="!loadingDocuments" class="text-xs text-gray-500">Aucun document lié à cette pièce.</p>
+      <p v-else-if="!loadingDocuments" class="text-xs text-gray-500">
+        Aucun document lié à cette pièce.
+      </p>
     </div>
   </div>
 </template>
 
 <script setup>
 import { reactive, onMounted, watch, ref, computed } from 'vue'
+import ConstructeurSelect from './ConstructeurSelect.vue'
 import { useCustomFields } from '~/composables/useCustomFields'
 import { useToast } from '~/composables/useToast'
 import { useDocuments } from '~/composables/useDocuments'
@@ -282,22 +297,21 @@ import { getFileIcon } from '~/utils/fileIcons'
 import { canPreviewDocument } from '~/utils/documentPreview'
 import DocumentUpload from '~/components/DocumentUpload.vue'
 import DocumentPreviewModal from '~/components/DocumentPreviewModal.vue'
-import ConstructeurSelect from './ConstructeurSelect.vue'
 import IconLucidePackage from '~icons/lucide/package'
 
 const props = defineProps({
   piece: {
     type: Object,
-    required: true,
+    required: true
   },
   isEditMode: {
     type: Boolean,
-    default: false,
+    default: false
   },
   pieceModelOptions: {
     type: Array,
-    default: () => [],
-  },
+    default: () => []
+  }
 })
 
 const emit = defineEmits(['update', 'edit', 'custom-field-update', 'assign-model'])
@@ -314,7 +328,7 @@ const uploadingDocuments = ref(false)
 const loadingDocuments = ref(false)
 const documentsLoaded = ref(!!(props.piece.documents && props.piece.documents.length))
 const pieceDocuments = computed(() => props.piece.documents || [])
-const documentIcon = (doc) => getFileIcon({ name: doc.filename || doc.name, mime: doc.mimeType })
+const documentIcon = doc => getFileIcon({ name: doc.filename || doc.name, mime: doc.mimeType })
 const previewDocument = ref(null)
 const previewVisible = ref(false)
 const selectedPieceModelId = computed(() => props.piece.pieceModelId || props.piece.pieceModel?.id || '')
@@ -328,7 +342,7 @@ const handleConstructeurChange = (value) => {
 const { uploadDocuments, deleteDocument, loadDocumentsByPiece } = useDocuments()
 
 const refreshDocuments = async () => {
-  if (!props.piece?.id) return
+  if (!props.piece?.id) { return }
   loadingDocuments.value = true
   try {
     const result = await loadDocumentsByPiece(props.piece.id, { updateStore: false })
@@ -342,7 +356,7 @@ const refreshDocuments = async () => {
 }
 
 const handleFilesAdded = async (files) => {
-  if (!files.length || !props.piece?.id) return
+  if (!files.length || !props.piece?.id) { return }
   uploadingDocuments.value = true
   try {
     const result = await uploadDocuments(
@@ -365,7 +379,7 @@ const handleFilesAdded = async (files) => {
 }
 
 const removeDocument = async (documentId) => {
-  if (!documentId) return
+  if (!documentId) { return }
   const result = await deleteDocument(documentId, { updateStore: false })
   if (result.success) {
     props.piece.documents = (props.piece.documents || []).filter(doc => doc.id !== documentId)
@@ -373,7 +387,7 @@ const removeDocument = async (documentId) => {
 }
 
 const downloadDocument = (doc) => {
-  if (!doc?.path) return
+  if (!doc?.path) { return }
 
   if (doc.path.startsWith('data:')) {
     const link = document.createElement('a')
@@ -387,7 +401,7 @@ const downloadDocument = (doc) => {
 }
 
 const openPreview = (doc) => {
-  if (!canPreviewDocument(doc)) return
+  if (!canPreviewDocument(doc)) { return }
   previewDocument.value = doc
   previewVisible.value = true
 }
@@ -398,8 +412,8 @@ const closePreview = () => {
 }
 
 const formatSize = (size) => {
-  if (size === undefined || size === null) return '—'
-  if (size === 0) return '0 B'
+  if (size === undefined || size === null) { return '—' }
+  if (size === 0) { return '0 B' }
   const units = ['B', 'KB', 'MB', 'GB']
   const index = Math.min(units.length - 1, Math.floor(Math.log(size) / Math.log(1024)))
   const formatted = size / Math.pow(1024, index)
@@ -413,7 +427,6 @@ watch(
   }
 )
 
-
 // Méthodes pour gérer les champs personnalisés
 const setCustomFieldValue = (fieldValueId, value) => {
   const fieldValue = props.piece.customFieldValues?.find(fv => fv.id === fieldValueId)
@@ -428,7 +441,7 @@ const updatePiece = () => {
     ...props.piece,
     ...pieceData,
     prix: prixValue && prixValue !== '' ? parseFloat(prixValue) : null,
-    constructeurId: props.piece.constructeurId || null,
+    constructeurId: props.piece.constructeurId || null
   })
 }
 
@@ -443,7 +456,7 @@ const assignPieceModel = (value) => {
     pieceId: props.piece.id,
     pieceModelId: value || null,
     previousModelId,
-    previousModel,
+    previousModel
   })
 }
 
@@ -473,7 +486,7 @@ watch(
     pieceData.name = props.piece.name || ''
     pieceData.reference = props.piece.reference || ''
     pieceData.prix = props.piece.prix || ''
-  },
+  }
 )
 
 onMounted(() => {

app/components/PieceModelStructureEditor.vue

@@ -2,7 +2,9 @@
   <div class="space-y-4">
     <section class="space-y-3">
       <div class="flex items-center justify-between">
-        <h3 class="text-sm font-semibold">Champs personnalisés</h3>
+        <h3 class="text-sm font-semibold">
+          Champs personnalisés
+        </h3>
         <button type="button" class="btn btn-outline btn-xs" @click="addField">
           <IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" />
           Ajouter
@@ -27,18 +29,28 @@
                   type="text"
                   class="input input-bordered input-xs"
                   placeholder="Nom du champ"
-                />
+                >
                 <select v-model="field.type" class="select select-bordered select-xs">
-                  <option value="text">Texte</option>
-                  <option value="number">Nombre</option>
-                  <option value="select">Liste</option>
-                  <option value="boolean">Oui/Non</option>
-                  <option value="date">Date</option>
+                  <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" />
+                <input v-model="field.required" type="checkbox" class="checkbox checkbox-xs">
                 Obligatoire
               </div>
 
@@ -47,7 +59,7 @@
                 v-model="field.optionsText"
                 class="textarea textarea-bordered textarea-xs h-20"
                 placeholder="Option 1&#10;Option 2"
-              ></textarea>
+              />
             </div>
             <button
               type="button"
@@ -71,13 +83,13 @@ import IconLucideTrash from '~icons/lucide/trash'
 const props = defineProps({
   modelValue: {
     type: Object,
-    default: () => ({ customFields: [] }),
-  },
+    default: () => ({ customFields: [] })
+  }
 })
 
 const emit = defineEmits(['update:modelValue'])
 
-const ensureArray = (value) => (Array.isArray(value) ? value : [])
+const ensureArray = value => (Array.isArray(value) ? value : [])
 
 const clone = (input, fallback = {}) => {
   try {
@@ -104,24 +116,24 @@ const toEditorField = (input = {}) => ({
     ? input.options.join('\n')
     : typeof input.optionsText === 'string'
       ? input.optionsText
-      : '',
+      : ''
 })
 
 const hydrateFields = (structure = {}) => ensureArray(structure.customFields).map(toEditorField)
 
 const localState = reactive({
-  fields: hydrateFields(props.modelValue),
+  fields: hydrateFields(props.modelValue)
 })
 
 const extraState = reactive({
-  rest: clone(extractRest(props.modelValue)),
+  rest: clone(extractRest(props.modelValue))
 })
 
 const localFields = computed({
   get: () => localState.fields,
   set: (value) => {
     localState.fields = ensureArray(value).map(toEditorField)
-  },
+  }
 })
 
 const normalizeFields = (fields) => {
@@ -139,8 +151,8 @@ const normalizeFields = (fields) => {
         const raw = typeof field.optionsText === 'string' ? field.optionsText : ''
         const parsed = raw
           .split(/\r?\n/)
-          .map((option) => option.trim())
-          .filter((option) => option.length > 0)
+          .map(option => option.trim())
+          .filter(option => option.length > 0)
         options = parsed.length > 0 ? parsed : undefined
       }
 
@@ -155,14 +167,14 @@ const normalizeFields = (fields) => {
 
 let lastEmitted = JSON.stringify({
   ...clone(extraState.rest, {}),
-  customFields: normalizeFields(props.modelValue?.customFields),
+  customFields: normalizeFields(props.modelValue?.customFields)
 })
 
 const emitUpdate = () => {
   const customFields = normalizeFields(localFields.value)
   const payload = {
     ...clone(extraState.rest, {}),
-    customFields,
+    customFields
   }
   const serialized = JSON.stringify(payload)
   if (serialized !== lastEmitted) {
@@ -178,7 +190,7 @@ watch(
     extraState.rest = clone(extractRest(value), {})
     lastEmitted = JSON.stringify({
       ...clone(extraState.rest, {}),
-      customFields: normalizeFields(value?.customFields),
+      customFields: normalizeFields(value?.customFields)
     })
   },
   { deep: true }

app/components/StructureSubComponentEditor.vue

@@ -10,12 +10,28 @@
               aria-hidden="true"
             />
           </button>
-          <input
-            v-model="node.name"
-            type="text"
-            class="input input-sm input-bordered w-full"
-            placeholder="Nom du sous-composant"
-          />
+          <div class="flex-1">
+            <input
+              :list="componentTypeListId"
+              v-model="node.typeComposantLabel"
+              type="search"
+              autocomplete="off"
+              class="input input-sm input-bordered w-full"
+              placeholder="Sélectionner une famille de composant"
+              @change="handleComponentTypeChange(node)"
+              @blur="handleComponentTypeChange(node)"
+            />
+            <datalist :id="componentTypeListId">
+              <option
+                v-for="type in componentTypes"
+                :key="type.id"
+                :value="formatComponentTypeOption(type)"
+              />
+            </datalist>
+            <p class="mt-1 text-[11px] text-gray-500">
+              {{ node.typeComposantId ? `Sélection : ${getComponentTypeLabel(node.typeComposantId) || 'Inconnue'}` : 'Aucune famille sélectionnée' }}
+            </p>
+          </div>
         </div>
         <span v-if="!expanded && node.description" class="text-xs text-gray-500 truncate">
           {{ node.description }}
@@ -112,52 +128,43 @@
           >
             <div class="flex items-start justify-between gap-2">
               <div class="flex-1 space-y-3">
-                <div class="grid grid-cols-1 md:grid-cols-3 gap-2">
-                  <input
-                    v-model="piece.name"
-                    type="text"
-                    class="input input-bordered input-xs"
-                    placeholder="Nom de la pièce"
-                  />
-                  <input
-                    v-model="piece.reference"
-                    type="text"
-                    class="input input-bordered input-xs"
-                    placeholder="Référence"
-                  />
-                  <input
-                    v-model.number="piece.quantity"
-                    type="number"
-                    min="0"
-                    step="1"
-                    class="input input-bordered input-xs"
-                    placeholder="Quantité"
-                  />
-                </div>
-                <div class="form-control">
-                  <label class="label"><span class="label-text">Famille de pièce</span></label>
-                  <div>
-                    <input
-                      :list="getPieceTypeListId(pieceIndex)"
-                      v-model="piece.typePieceLabel"
-                      type="search"
-                      autocomplete="off"
-                      class="input input-bordered input-xs"
-                      placeholder="Rechercher une famille"
-                      @change="handlePieceTypeChange(piece)"
-                      @blur="handlePieceTypeChange(piece)"
-                    />
-                    <datalist :id="getPieceTypeListId(pieceIndex)">
-                      <option
-                        v-for="type in pieceTypes"
-                        :key="type.id"
-                        :value="formatPieceTypeOption(type)"
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
+                  <div class="form-control">
+                    <label class="label"><span class="label-text">Famille de pièce</span></label>
+                    <div>
+                      <input
+                        :list="getPieceTypeListId(pieceIndex)"
+                        v-model="piece.typePieceLabel"
+                        type="search"
+                        autocomplete="off"
+                        class="input input-bordered input-xs"
+                        placeholder="Sélectionner une famille"
+                        @change="handlePieceTypeChange(piece)"
+                        @blur="handlePieceTypeChange(piece)"
                       />
-                    </datalist>
+                      <datalist :id="getPieceTypeListId(pieceIndex)">
+                        <option
+                          v-for="type in pieceTypes"
+                          :key="type.id"
+                          :value="formatPieceTypeOption(type)"
+                        />
+                      </datalist>
+                    </div>
+                    <p class="mt-1 text-[11px] text-gray-500">
+                      {{ piece.typePieceId ? `Sélection : ${getPieceTypeLabel(piece.typePieceId) || 'Inconnue'}` : 'Aucune famille sélectionnée' }}
+                    </p>
+                  </div>
+                  <div class="form-control">
+                    <label class="label"><span class="label-text">Quantité (optionnel)</span></label>
+                    <input
+                      v-model.number="piece.quantity"
+                      type="number"
+                      min="0"
+                      step="1"
+                      class="input input-bordered input-xs"
+                      placeholder="Quantité"
+                    />
                   </div>
-                  <p class="mt-1 text-[11px] text-gray-500">
-                    {{ piece.typePieceId ? `Sélection : ${getPieceTypeLabel(piece.typePieceId) || 'Inconnue'}` : 'Aucune famille sélectionnée' }}
-                  </p>
                 </div>
               </div>
               <button type="button" class="btn btn-error btn-xs btn-square" @click="removePiece(pieceIndex)">
@@ -188,6 +195,7 @@
             :node="sub"
             :depth="depth + 1"
             :piece-types="pieceTypes"
+            :component-types="componentTypes"
             @remove="removeSubComponent(index)"
           />
         </div>
@@ -197,14 +205,14 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
+import { computed, ref, watch, getCurrentInstance } from 'vue'
 import IconLucideChevronRight from '~icons/lucide/chevron-right'
 import IconLucidePlus from '~icons/lucide/plus'
 import IconLucideTrash from '~icons/lucide/trash'
 
 defineOptions({ name: 'StructureSubComponentEditor' })
 
-type PieceTypeOption = {
+type ModelTypeOption = {
   id: string
   name: string
   code?: string | null
@@ -213,17 +221,30 @@ type PieceTypeOption = {
 const props = withDefaults(defineProps<{
   node: Record<string, any>
   depth?: number
-  pieceTypes?: PieceTypeOption[]
+  pieceTypes?: ModelTypeOption[]
+  componentTypes?: ModelTypeOption[]
 }>(), {
   depth: 0,
   pieceTypes: () => [],
+  componentTypes: () => [],
 })
 
 const emit = defineEmits(['remove'])
 
+const pieceTypes = computed(() => props.pieceTypes ?? [])
+const componentTypes = computed(() => props.componentTypes ?? [])
+
+const instance = getCurrentInstance()
+const componentTypeListId = `sub-component-type-options-${instance?.uid ?? 0}`
+
+const formatModelTypeOption = (type: ModelTypeOption | undefined | null) => {
+  if (!type) return ''
+  return type.code ? `${type.name} (${type.code})` : type.name
+}
+
 const pieceTypeMap = computed(() => {
-  const map = new Map<string, PieceTypeOption>()
-  ;(props.pieceTypes ?? []).forEach((type) => {
+  const map = new Map<string, ModelTypeOption>()
+  pieceTypes.value.forEach((type) => {
     if (type && typeof type.id === 'string') {
       map.set(type.id, type)
     }
@@ -231,10 +252,18 @@ const pieceTypeMap = computed(() => {
   return map
 })
 
-const formatPieceTypeOption = (type: PieceTypeOption | undefined | null) => {
-  if (!type) return ''
-  return type.code ? `${type.name} (${type.code})` : type.name
-}
+const componentTypeMap = computed(() => {
+  const map = new Map<string, ModelTypeOption>()
+  componentTypes.value.forEach((type) => {
+    if (type && typeof type.id === 'string') {
+      map.set(type.id, type)
+    }
+  })
+  return map
+})
+
+const formatPieceTypeOption = (type: ModelTypeOption | undefined | null) => formatModelTypeOption(type)
+const formatComponentTypeOption = (type: ModelTypeOption | undefined | null) => formatModelTypeOption(type)
 
 const resolvePieceType = (input: string) => {
   const normalized = input.trim().toLowerCase()
@@ -242,7 +271,7 @@ const resolvePieceType = (input: string) => {
     return null
   }
   return (
-    (props.pieceTypes ?? []).find((type) => {
+    pieceTypes.value.find((type) => {
       const formatted = formatPieceTypeOption(type).toLowerCase()
       const name = (type?.name ?? '').toLowerCase()
       const code = (type?.code ?? '').toLowerCase()
@@ -255,24 +284,58 @@ const resolvePieceType = (input: string) => {
   )
 }
 
+const resolveComponentType = (input: string) => {
+  const normalized = input.trim().toLowerCase()
+  if (!normalized) {
+    return null
+  }
+  return (
+    componentTypes.value.find((type) => {
+      const formatted = formatComponentTypeOption(type).toLowerCase()
+      const name = (type?.name ?? '').toLowerCase()
+      const code = (type?.code ?? '').toLowerCase()
+      return (
+        formatted === normalized
+        || name === normalized
+        || (!!code && code === normalized)
+      )
+    }) ?? null
+  )
+}
+
 const getPieceTypeLabel = (id?: string) => {
   if (!id) return ''
   const option = pieceTypeMap.value.get(id)
   return formatPieceTypeOption(option)
 }
 
+const getComponentTypeLabel = (id?: string) => {
+  if (!id) return ''
+  const option = componentTypeMap.value.get(id)
+  return formatComponentTypeOption(option)
+}
+
 const updatePieceTypeLabel = (piece: any) => {
   if (!piece) {
     return
   }
   if (piece.typePieceId) {
     const option = pieceTypeMap.value.get(piece.typePieceId)
-    piece.typePieceLabel = option ? formatPieceTypeOption(option) : piece.typePieceLabel || ''
+    if (option) {
+      piece.typePieceLabel = formatPieceTypeOption(option)
+      piece.name = option.name || formatPieceTypeOption(option)
+    } else if (!piece.typePieceLabel) {
+      piece.name = ''
+    }
   } else if (piece.typePieceLabel) {
     const match = resolvePieceType(piece.typePieceLabel)
     if (match) {
       piece.typePieceId = match.id
       piece.typePieceLabel = formatPieceTypeOption(match)
+      piece.name = match.name || formatPieceTypeOption(match)
+    } else {
+      piece.typePieceLabel = ''
+      piece.name = ''
     }
   }
 }
@@ -285,14 +348,18 @@ const handlePieceTypeChange = (piece: any) => {
   if (!value) {
     piece.typePieceId = ''
     piece.typePieceLabel = ''
+    piece.name = ''
     return
   }
   const match = resolvePieceType(value)
   if (match) {
     piece.typePieceId = match.id
     piece.typePieceLabel = formatPieceTypeOption(match)
+    piece.name = match.name || formatPieceTypeOption(match)
   } else {
     piece.typePieceId = ''
+    piece.typePieceLabel = ''
+    piece.name = ''
   }
 }
 
@@ -310,38 +377,96 @@ const applyPieceLabels = (pieces?: any[]) => {
       if (match) {
         piece.typePieceId = match.id
         piece.typePieceLabel = formatPieceTypeOption(match)
+        piece.name = match.name || formatPieceTypeOption(match)
+      } else {
+        piece.typePieceLabel = ''
+        piece.name = ''
       }
+    } else if (!piece?.name) {
+      piece.name = ''
     }
   })
 }
 
+const applyComponentTypeLabel = (component: any) => {
+  if (!component) {
+    return
+  }
+  if (component.typeComposantId) {
+    const option = componentTypeMap.value.get(component.typeComposantId)
+    if (option) {
+      component.typeComposantLabel = formatComponentTypeOption(option)
+      component.name = option.name || formatComponentTypeOption(option)
+    } else if (!component.typeComposantLabel) {
+      component.name = ''
+    }
+  } else if (component.typeComposantLabel) {
+    const match = resolveComponentType(component.typeComposantLabel)
+    if (match) {
+      component.typeComposantId = match.id
+      component.typeComposantLabel = formatComponentTypeOption(match)
+      component.name = match.name || formatComponentTypeOption(match)
+    } else {
+      component.typeComposantLabel = ''
+      component.name = ''
+    }
+  }
+}
+
+const handleComponentTypeChange = (component: any) => {
+  if (!component) {
+    return
+  }
+  const value = typeof component.typeComposantLabel === 'string'
+    ? component.typeComposantLabel.trim()
+    : ''
+  if (!value) {
+    component.typeComposantId = ''
+    component.typeComposantLabel = ''
+    component.name = ''
+    return
+  }
+  const match = resolveComponentType(value)
+  if (match) {
+    component.typeComposantId = match.id
+    component.typeComposantLabel = formatComponentTypeOption(match)
+    component.name = match.name || formatComponentTypeOption(match)
+  } else {
+    component.typeComposantId = ''
+    component.typeComposantLabel = ''
+    component.name = ''
+  }
+}
+
 const traverseSubComponents = (components?: any[]) => {
   if (!Array.isArray(components)) {
     return
   }
   components.forEach((component) => {
+    applyComponentTypeLabel(component)
     applyPieceLabels(component?.pieces)
     traverseSubComponents(component?.subComponents)
   })
 }
 
-const syncPieceTypeLabels = () => {
+const syncTypeLabels = () => {
+  applyComponentTypeLabel(props.node)
   applyPieceLabels(props.node?.pieces)
   traverseSubComponents(props.node?.subComponents)
 }
 
-watch(
-  () => props.pieceTypes,
-  () => {
-    syncPieceTypeLabels()
-  },
-  { deep: true, immediate: true }
-)
+watch(pieceTypes, () => {
+  syncTypeLabels()
+}, { deep: true, immediate: true })
+
+watch(componentTypes, () => {
+  syncTypeLabels()
+}, { deep: true, immediate: true })
 
 watch(
   () => props.node,
   () => {
-    syncPieceTypeLabels()
+    syncTypeLabels()
   },
   { deep: true }
 )
@@ -379,7 +504,6 @@ const addPiece = () => {
   ensureArray('pieces')
   props.node.pieces.push({
     name: '',
-    reference: '',
     quantity: undefined,
     typePieceId: '',
     typePieceLabel: '',
@@ -397,6 +521,8 @@ const addSubComponent = () => {
     name: '',
     description: '',
     quantity: undefined,
+    typeComposantId: '',
+    typeComposantLabel: '',
     customFields: [],
     pieces: [],
     subComponents: [],

app/components/ToastContainer.vue

@@ -46,8 +46,8 @@
 
             <!-- Close button -->
             <button
-              @click="removeToast(toast.id)"
               class="btn btn-ghost btn-xs"
+              @click="removeToast(toast.id)"
             >
               <IconLucideX class="w-4 h-4" aria-hidden="true" />
             </button>

app/components/TypeComponentForm.vue

@@ -10,157 +10,171 @@
           class="w-4 h-4 mr-2"
           aria-hidden="true"
         />
-          </button>
-          <h5 class="text-sm font-medium">Nouveau composant {{ index + 1 }}</h5>
-          <span v-if="!isComponentExpanded(index)" class="text-xs text-gray-500 truncate max-w-[160px]">
-            {{ component.name || 'Sans nom' }}
-          </span>
-        </div>
-        <button 
-          type="button" 
-          @click="removeComponent(index)" 
-          class="btn btn-square btn-error btn-sm"
-        >
-          <IconLucideChevronRight
-            class="w-4 h-4"
-            aria-hidden="true"
-          />
-                </button>
-                <span class="text-xs font-medium">Champ personnalisé {{ fieldIndex + 1 }}</span>
-                <span v-if="!isComponentCustomFieldExpanded(index, fieldIndex)" class="text-[10px] text-gray-500 truncate max-w-[120px]">
-                  {{ field.name || 'Sans nom' }}
-                </span>
-              </div>
-              <button 
-                type="button" 
-                @click="removeComponentCustomField(index, fieldIndex)" 
-                class="btn btn-square btn-error btn-xs"
-              >
-                <IconLucideChevronRight
-                  class="w-3 h-3"
-                  aria-hidden="true"
-                />
-                </button>
-                <IconLucideChevronRight
-                  class="w-3 h-3 text-red-500"
-                  aria-hidden="true"
-                />
-                      </button>
-                      <span class="text-xs">Champ {{ fieldIndex + 1 }}</span>
-                      <span v-if="!isComponentPieceCustomFieldExpanded(index, pieceIndex, fieldIndex)" class="text-[10px] text-gray-500 truncate max-w-[100px]">
-                        {{ field.name || 'Sans nom' }}
-                      </span>
-                    </div>
-                    <button 
-                      type="button" 
-                      @click="removeComponentPieceCustomField(index, pieceIndex, fieldIndex)" 
-                      class="btn btn-square btn-error btn-xs"
-                    >
-                      <IconLucideChevronRight
-                        class="w-2 h-2"
-                        aria-hidden="true"
-                      />
-              </button>
-              <IconLucideChevronRight
-                class="w-3 h-3 text-green-500"
-                aria-hidden="true"
-              />
-                      </button>
-                      <span class="text-xs">Champ {{ fieldIndex + 1 }}</span>
-                      <span v-if="!isSubComponentCustomFieldExpanded(index, subIndex, fieldIndex)" class="text-[10px] text-gray-500 truncate max-w-[100px]">
-                        {{ field.name || 'Sans nom' }}
-                      </span>
-                    </div>
-                    <button 
-                      type="button" 
-                      @click="removeSubComponentCustomField(index, subIndex, fieldIndex)" 
-                      class="btn btn-square btn-error btn-xs"
-                    >
-                      <IconLucideChevronRight
-                        class="w-2 h-2"
-                        aria-hidden="true"
-                      />
-                      </button>
-                      <IconLucideChevronRight
-                        class="w-2 h-2 text-red-500"
-                        aria-hidden="true"
-                      />
-                            </button>
-                            <span class="text-xs">Champ {{ fieldIndex + 1 }}</span>
-                            <span v-if="!isSubComponentPieceCustomFieldExpanded(index, subIndex, pieceIndex, fieldIndex)" class="text-[10px] text-gray-500 truncate max-w-[100px]">
-                              {{ field.name || 'Sans nom' }}
-                            </span>
-                          </div>
-                          <button 
-                            type="button" 
-                            @click="removeSubComponentPieceCustomField(index, subIndex, pieceIndex, fieldIndex)" 
-                            class="btn btn-square btn-error btn-xs"
-                          >
-                            <IconLucideX
-                              class="w-2 h-2"
-                              aria-hidden="true"
-                            />
-                          </button>
-                        </div>
-
-                        <div v-if="isSubComponentPieceCustomFieldExpanded(index, subIndex, pieceIndex, fieldIndex)" class="grid grid-cols-2 gap-1">
-                          <input 
-                            v-model="field.name" 
-                            type="text" 
-                            placeholder="Nom" 
-                            class="input input-bordered input-xs" 
-                          />
-                          <select v-model="field.type" class="select select-bordered select-xs">
-                            <option value="">Type</option>
-                            <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 v-if="isSubComponentPieceCustomFieldExpanded(index, subIndex, pieceIndex, fieldIndex)" class="mt-1">
-                          <label class="flex items-center gap-1 text-xs">
-                            <input 
-                              v-model="field.required" 
-                              type="checkbox" 
-                              class="checkbox checkbox-xs" 
-                            />
-                            Obligatoire
-                          </label>
-                        </div>
-
-                        <div v-if="isSubComponentPieceCustomFieldExpanded(index, subIndex, pieceIndex, fieldIndex) && field.type === 'select'" class="mt-1">
-                          <textarea 
-                            v-model="field.optionsText" 
-                            placeholder="Option 1&#10;Option 2&#10;Option 3" 
-                            class="textarea textarea-bordered textarea-xs w-full h-10"
-                            @input="updateSubComponentPieceFieldOptions(index, subIndex, pieceIndex, fieldIndex)"
-                          ></textarea>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
+      </button>
+      <h5 class="text-sm font-medium">
+        Nouveau composant {{ index + 1 }}
+      </h5>
+      <span v-if="!isComponentExpanded(index)" class="text-xs text-gray-500 truncate max-w-[160px]">
+        {{ component.name || 'Sans nom' }}
+      </span>
     </div>
-
     <button
       type="button"
-      @click="addComponent" 
-      class="btn btn-outline btn-sm"
+      class="btn btn-square btn-error btn-sm"
+      @click="removeComponent(index)"
     >
-      <IconLucidePlus
-        class="w-4 h-4 mr-2"
+      <IconLucideChevronRight
+        class="w-4 h-4"
         aria-hidden="true"
       />
-      Ajouter un composant
     </button>
+    <span class="text-xs font-medium">Champ personnalisé {{ fieldIndex + 1 }}</span>
+    <span v-if="!isComponentCustomFieldExpanded(index, fieldIndex)" class="text-[10px] text-gray-500 truncate max-w-[120px]">
+      {{ field.name || 'Sans nom' }}
+    </span>
+  </div>
+  <button
+    type="button"
+    class="btn btn-square btn-error btn-xs"
+    @click="removeComponentCustomField(index, fieldIndex)"
+  >
+    <IconLucideChevronRight
+      class="w-3 h-3"
+      aria-hidden="true"
+    />
+  </button>
+  <IconLucideChevronRight
+    class="w-3 h-3 text-red-500"
+    aria-hidden="true"
+  />
+  </button>
+  <span class="text-xs">Champ {{ fieldIndex + 1 }}</span>
+  <span v-if="!isComponentPieceCustomFieldExpanded(index, pieceIndex, fieldIndex)" class="text-[10px] text-gray-500 truncate max-w-[100px]">
+    {{ field.name || 'Sans nom' }}
+  </span>
+  </div>
+  <button
+    type="button"
+    class="btn btn-square btn-error btn-xs"
+    @click="removeComponentPieceCustomField(index, pieceIndex, fieldIndex)"
+  >
+    <IconLucideChevronRight
+      class="w-2 h-2"
+      aria-hidden="true"
+    />
+  </button>
+  <IconLucideChevronRight
+    class="w-3 h-3 text-green-500"
+    aria-hidden="true"
+  />
+  </button>
+  <span class="text-xs">Champ {{ fieldIndex + 1 }}</span>
+  <span v-if="!isSubComponentCustomFieldExpanded(index, subIndex, fieldIndex)" class="text-[10px] text-gray-500 truncate max-w-[100px]">
+    {{ field.name || 'Sans nom' }}
+  </span>
+  </div>
+  <button
+    type="button"
+    class="btn btn-square btn-error btn-xs"
+    @click="removeSubComponentCustomField(index, subIndex, fieldIndex)"
+  >
+    <IconLucideChevronRight
+      class="w-2 h-2"
+      aria-hidden="true"
+    />
+  </button>
+  <IconLucideChevronRight
+    class="w-2 h-2 text-red-500"
+    aria-hidden="true"
+  />
+  </button>
+  <span class="text-xs">Champ {{ fieldIndex + 1 }}</span>
+  <span v-if="!isSubComponentPieceCustomFieldExpanded(index, subIndex, pieceIndex, fieldIndex)" class="text-[10px] text-gray-500 truncate max-w-[100px]">
+    {{ field.name || 'Sans nom' }}
+  </span>
+  </div>
+  <button
+    type="button"
+    class="btn btn-square btn-error btn-xs"
+    @click="removeSubComponentPieceCustomField(index, subIndex, pieceIndex, fieldIndex)"
+  >
+    <IconLucideX
+      class="w-2 h-2"
+      aria-hidden="true"
+    />
+  </button>
+  </div>
+
+  <div v-if="isSubComponentPieceCustomFieldExpanded(index, subIndex, pieceIndex, fieldIndex)" class="grid grid-cols-2 gap-1">
+    <input
+      v-model="field.name"
+      type="text"
+      placeholder="Nom"
+      class="input input-bordered input-xs"
+    >
+    <select v-model="field.type" class="select select-bordered select-xs">
+      <option value="">
+        Type
+      </option>
+      <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 v-if="isSubComponentPieceCustomFieldExpanded(index, subIndex, pieceIndex, fieldIndex)" class="mt-1">
+    <label class="flex items-center gap-1 text-xs">
+      <input
+        v-model="field.required"
+        type="checkbox"
+        class="checkbox checkbox-xs"
+      >
+      Obligatoire
+    </label>
+  </div>
+
+  <div v-if="isSubComponentPieceCustomFieldExpanded(index, subIndex, pieceIndex, fieldIndex) && field.type === 'select'" class="mt-1">
+    <textarea
+      v-model="field.optionsText"
+      placeholder="Option 1&#10;Option 2&#10;Option 3"
+      class="textarea textarea-bordered textarea-xs w-full h-10"
+      @input="updateSubComponentPieceFieldOptions(index, subIndex, pieceIndex, fieldIndex)"
+    />
+  </div>
+  </div>
+  </div>
+  </div>
+  </div>
+  </div>
+  </div>
+  </div>
+  </div>
+  </div>
+  </div>
+
+  <button
+    type="button"
+    class="btn btn-outline btn-sm"
+    @click="addComponent"
+  >
+    <IconLucidePlus
+      class="w-4 h-4 mr-2"
+      aria-hidden="true"
+    />
+    Ajouter un composant
+  </button>
   </div>
 </template>
 
@@ -381,7 +395,7 @@ const reorderStore = (store) => {
     .forEach((key, position) => {
       reordered[position] = store[key]
     })
-  Object.keys(store).forEach((key) => delete store[key])
+  Object.keys(store).forEach(key => delete store[key])
   Object.assign(store, reordered)
 }
 
@@ -394,19 +408,19 @@ const reorderNestedStore = (store, componentIndex) => {
     .forEach((key, position) => {
       reordered[position] = entries[key]
     })
-  Object.keys(entries).forEach((key) => delete entries[key])
+  Object.keys(entries).forEach(key => delete entries[key])
   Object.assign(entries, reordered)
 }
 
 const clearExpansionState = () => {
   expandedComponents.value = []
-  Object.keys(expandedComponentCustomFields).forEach((key) => delete expandedComponentCustomFields[key])
-  Object.keys(expandedComponentPieces).forEach((key) => delete expandedComponentPieces[key])
-  Object.keys(expandedComponentPieceCustomFields).forEach((key) => delete expandedComponentPieceCustomFields[key])
-  Object.keys(expandedSubComponents).forEach((key) => delete expandedSubComponents[key])
-  Object.keys(expandedSubComponentCustomFields).forEach((key) => delete expandedSubComponentCustomFields[key])
-  Object.keys(expandedSubComponentPieces).forEach((key) => delete expandedSubComponentPieces[key])
-  Object.keys(expandedSubComponentPieceCustomFields).forEach((key) => delete expandedSubComponentPieceCustomFields[key])
+  Object.keys(expandedComponentCustomFields).forEach(key => delete expandedComponentCustomFields[key])
+  Object.keys(expandedComponentPieces).forEach(key => delete expandedComponentPieces[key])
+  Object.keys(expandedComponentPieceCustomFields).forEach(key => delete expandedComponentPieceCustomFields[key])
+  Object.keys(expandedSubComponents).forEach(key => delete expandedSubComponents[key])
+  Object.keys(expandedSubComponentCustomFields).forEach(key => delete expandedSubComponentCustomFields[key])
+  Object.keys(expandedSubComponentPieces).forEach(key => delete expandedSubComponentPieces[key])
+  Object.keys(expandedSubComponentPieceCustomFields).forEach(key => delete expandedSubComponentPieceCustomFields[key])
 }
 
 const setAllExpanded = (value) => {
@@ -625,7 +639,7 @@ const removeSubComponent = (componentIndex, subIndex) => {
     .forEach((key, position) => {
       reordered[position] = pieceFieldEntries[key]
     })
-  Object.keys(pieceFieldEntries).forEach((key) => delete pieceFieldEntries[key])
+  Object.keys(pieceFieldEntries).forEach(key => delete pieceFieldEntries[key])
   Object.assign(pieceFieldEntries, reordered)
 }
 
@@ -687,7 +701,7 @@ const removeSubComponentPiece = (componentIndex, subIndex, pieceIndex) => {
       .forEach((key, position) => {
         reordered[position] = store[key]
       })
-    Object.keys(store || {}).forEach((key) => delete store[key])
+    Object.keys(store || {}).forEach(key => delete store[key])
     Object.assign(store || {}, reordered)
   }
 }

app/components/TypeEditActionsBar.vue

@@ -2,7 +2,7 @@
   <div class="card bg-base-100 shadow-lg">
     <div class="card-body">
       <div class="card-actions justify-end">
-        <button type="button" @click="$emit('reset')" class="btn btn-outline">
+        <button type="button" class="btn btn-outline" @click="$emit('reset')">
           Réinitialiser
         </button>
         <button type="submit" class="btn btn-primary" :disabled="saving">
@@ -26,8 +26,8 @@ import IconLucideCheck from '~icons/lucide/check'
 defineProps({
   saving: {
     type: Boolean,
-    default: false,
-  },
+    default: false
+  }
 })
 
 defineEmits(['reset'])

app/components/TypeEditBaseInfoSection.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="card bg-base-100 shadow-lg">
     <div class="card-body">
-      <h3 class="card-title text-lg mb-4">Informations de base</h3>
+      <h3 class="card-title text-lg mb-4">
+        Informations de base
+      </h3>
 
       <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
         <div class="form-control">
@@ -15,7 +17,7 @@
             placeholder="Nom du type de machine"
             class="input input-bordered"
             required
-          />
+          >
         </div>
 
         <div class="form-control">
@@ -27,7 +29,7 @@
             type="text"
             placeholder="Catégorie du type"
             class="input input-bordered"
-          />
+          >
         </div>
 
         <div class="form-control md:col-span-2">
@@ -38,7 +40,7 @@
             v-model="descriptionModel"
             placeholder="Description du type de machine"
             class="textarea textarea-bordered h-24"
-          ></textarea>
+          />
         </div>
 
         <div class="form-control">
@@ -50,7 +52,7 @@
             type="text"
             placeholder="ex: Mensuelle, Trimestrielle"
             class="input input-bordered"
-          />
+          >
         </div>
       </div>
     </div>
@@ -63,41 +65,41 @@ import { computed } from 'vue'
 const props = defineProps({
   name: {
     type: String,
-    default: '',
+    default: ''
   },
   category: {
     type: String,
-    default: '',
+    default: ''
   },
   description: {
     type: String,
-    default: '',
+    default: ''
   },
   maintenanceFrequency: {
     type: String,
-    default: '',
-  },
+    default: ''
+  }
 })
 
 const emit = defineEmits(['update:name', 'update:category', 'update:description', 'update:maintenanceFrequency'])
 
 const nameModel = computed({
   get: () => props.name,
-  set: (value) => emit('update:name', value),
+  set: value => emit('update:name', value)
 })
 
 const categoryModel = computed({
   get: () => props.category,
-  set: (value) => emit('update:category', value),
+  set: value => emit('update:category', value)
 })
 
 const descriptionModel = computed({
   get: () => props.description,
-  set: (value) => emit('update:description', value),
+  set: value => emit('update:description', value)
 })
 
 const maintenanceModel = computed({
   get: () => props.maintenanceFrequency,
-  set: (value) => emit('update:maintenanceFrequency', value),
+  set: value => emit('update:maintenanceFrequency', value)
 })
 </script>

app/components/TypeEditCustomFieldsSection.vue

@@ -14,7 +14,9 @@
               aria-hidden="true"
             />
           </button>
-          <h3 class="card-title text-lg">Champs personnalisés du type</h3>
+          <h3 class="card-title text-lg">
+            Champs personnalisés du type
+          </h3>
           <span class="badge badge-primary">{{ fields.length }}</span>
         </div>
       </div>
@@ -30,8 +32,8 @@
               <button
                 type="button"
                 class="btn btn-ghost btn-xs p-1"
-                @click="toggleField(fieldIndex)"
                 title="Plier / déplier le champ"
+                @click="toggleField(fieldIndex)"
               >
                 <IconLucideChevronRight
                   class="w-4 h-4 transition-transform duration-200"
@@ -40,16 +42,18 @@
                 />
               </button>
               <IconLucideListChecks class="w-4 h-4 text-blue-500" aria-hidden="true" />
-              <h5 class="text-sm font-medium">Champ personnalisé {{ fieldIndex + 1 }}</h5>
+              <h5 class="text-sm font-medium">
+                Champ personnalisé {{ fieldIndex + 1 }}
+              </h5>
               <span v-if="!isFieldExpanded(fieldIndex)" class="text-xs text-gray-500 truncate max-w-[160px]">
                 {{ field.name || 'Sans nom' }}
               </span>
             </div>
             <button
               type="button"
-              @click="removeField(fieldIndex)"
               class="btn btn-square btn-error btn-sm"
               title="Supprimer ce champ"
+              @click="removeField(fieldIndex)"
             >
               <IconLucideX class="w-4 h-4" aria-hidden="true" />
             </button>
@@ -68,7 +72,7 @@
                 class="input input-bordered input-sm"
                 required
                 @input="updateField(fieldIndex, { name: $event.target.value })"
-              />
+              >
             </div>
 
             <div class="form-control">
@@ -82,12 +86,24 @@
                 :value="field.type"
                 @change="updateField(fieldIndex, { type: $event.target.value })"
               >
-                <option value="">Sélectionner un type</option>
-                <option value="text">Texte</option>
-                <option value="number">Nombre</option>
-                <option value="select">Liste déroulante</option>
-                <option value="boolean">Oui/Non</option>
-                <option value="date">Date</option>
+                <option value="">
+                  Sélectionner un type
+                </option>
+                <option value="text">
+                  Texte
+                </option>
+                <option value="number">
+                  Nombre
+                </option>
+                <option value="select">
+                  Liste déroulante
+                </option>
+                <option value="boolean">
+                  Oui/Non
+                </option>
+                <option value="date">
+                  Date
+                </option>
               </select>
             </div>
           </div>
@@ -99,7 +115,7 @@
                 class="checkbox checkbox-sm"
                 :checked="field.required"
                 @change="updateField(fieldIndex, { required: $event.target.checked })"
-              />
+              >
               <span class="text-sm">Champ obligatoire</span>
             </div>
           </div>
@@ -117,19 +133,19 @@
               placeholder="Option 1&#10;Option 2&#10;Option 3"
               class="textarea textarea-bordered textarea-sm w-full h-20"
               @input="updateOptions(fieldIndex, $event.target.value)"
-            ></textarea>
+            />
           </div>
         </div>
 
         <div class="flex justify-end">
-          <button type="button" @click="addField" class="btn btn-primary btn-sm">
+          <button type="button" class="btn btn-primary btn-sm" @click="addField">
             <IconLucidePlus class="w-4 h-4 mr-2" aria-hidden="true" />
             Ajouter un champ
           </button>
         </div>
       </div>
       <div v-else class="flex justify-end">
-        <button type="button" @click="addField" class="btn btn-primary btn-sm">
+        <button type="button" class="btn btn-primary btn-sm" @click="addField">
           <IconLucidePlus class="w-4 h-4 mr-2" aria-hidden="true" />
           Ajouter un champ
         </button>
@@ -148,23 +164,23 @@ import IconLucidePlus from '~icons/lucide/plus'
 const props = defineProps({
   modelValue: {
     type: Array,
-    default: () => [],
+    default: () => []
   },
   allExpanded: {
     type: Boolean,
-    default: false,
+    default: false
   },
   expandAllTrigger: {
     type: Number,
-    default: 0,
-  },
+    default: 0
+  }
 })
 
 const emit = defineEmits(['update:modelValue'])
 
 const fields = computed({
   get: () => props.modelValue,
-  set: (value) => emit('update:modelValue', value),
+  set: value => emit('update:modelValue', value)
 })
 
 const expanded = ref(false)
@@ -213,8 +229,8 @@ const addField = () => {
       name: '',
       type: '',
       required: false,
-      optionsText: '',
-    },
+      optionsText: ''
+    }
   ]
   expandedFields.value.push(true)
   expanded.value = true
@@ -231,7 +247,7 @@ const updateField = (index, patch) => {
 
 const updateOptions = (index, value) => {
   updateField(index, {
-    optionsText: value.replace(/\r\n/g, '\n').replace(/\r/g, '\n'),
+    optionsText: value.replace(/\r\n/g, '\n').replace(/\r/g, '\n')
   })
 }
 </script>

app/components/TypeEditForm.vue

@@ -42,17 +42,17 @@ import TypeEditPieceRequirementsSection from '~/components/TypeEditPieceRequirem
 const props = defineProps({
   modelValue: {
     type: Object,
-    required: true,
+    required: true
   },
   saving: {
     type: Boolean,
-    default: false,
-  },
+    default: false
+  }
 })
 
 const emit = defineEmits(['update:modelValue', 'submit'])
 
-const deepClone = (value) => JSON.parse(JSON.stringify(value))
+const deepClone = value => JSON.parse(JSON.stringify(value))
 
 const createDefaultForm = (source = {}) => ({
   name: source.name || '',
@@ -61,7 +61,7 @@ const createDefaultForm = (source = {}) => ({
   maintenanceFrequency: source.maintenanceFrequency || '',
   customFields: deepClone(source.customFields || []),
   componentRequirements: deepClone(source.componentRequirements || []),
-  pieceRequirements: deepClone(source.pieceRequirements || []),
+  pieceRequirements: deepClone(source.pieceRequirements || [])
 })
 
 const formData = reactive(createDefaultForm(props.modelValue))
@@ -69,7 +69,7 @@ const allExpanded = ref(false)
 const expandAllTrigger = ref(0)
 
 let syncingFromParent = false
-const toPlainObject = (value) => JSON.parse(JSON.stringify(value))
+const toPlainObject = value => JSON.parse(JSON.stringify(value))
 const lastSnapshot = ref(toPlainObject(createDefaultForm(props.modelValue)))
 
 watch(
@@ -91,7 +91,7 @@ watch(
 watch(
   formData,
   (value) => {
-    if (syncingFromParent) return
+    if (syncingFromParent) { return }
     const normalized = createDefaultForm(value)
     if (JSON.stringify(normalized) === JSON.stringify(lastSnapshot.value)) {
       return

app/components/TypeEditToolbar.vue

@@ -15,8 +15,8 @@ import IconLucidePlus from '~icons/lucide/plus'
 defineProps({
   allExpanded: {
     type: Boolean,
-    default: false,
-  },
+    default: false
+  }
 })
 
 defineEmits(['toggle'])

app/components/TypeInfoDisplay.vue

@@ -1,13 +1,17 @@
 <template>
   <div class="alert alert-info mb-6">
     <div>
-      <h3 class="font-bold">Type existant</h3>
+      <h3 class="font-bold">
+        Type existant
+      </h3>
       <div class="text-sm">
         <p><strong>Catégorie:</strong> {{ type.category || 'Non définie' }}</p>
         <p><strong>Maintenance:</strong> {{ type.maintenanceFrequency || 'Non définie' }}</p>
         <p><strong>Familles de composants:</strong> {{ type.componentRequirements?.length || 0 }}</p>
         <p><strong>Groupes de pièces:</strong> {{ type.pieceRequirements?.length || 0 }}</p>
-        <p v-if="type.description"><strong>Description:</strong> {{ type.description }}</p>
+        <p v-if="type.description">
+          <strong>Description:</strong> {{ type.description }}
+        </p>
       </div>
     </div>
   </div>

app/components/sites/SiteCard.vue

@@ -2,8 +2,12 @@
   <div class="card bg-base-100 shadow-lg hover:shadow-xl transition-shadow">
     <div class="card-body">
       <div class="flex items-center justify-between mb-4">
-        <h3 class="card-title text-lg">{{ site.name }}</h3>
-        <div class="badge badge-primary badge-sm">{{ machineCount }} machines</div>
+        <h3 class="card-title text-lg">
+          {{ site.name }}
+        </h3>
+        <div class="badge badge-primary badge-sm">
+          {{ machineCount }} machines
+        </div>
       </div>
 
       <div class="space-y-3 text-sm">
@@ -20,7 +24,7 @@
         <div class="flex items-start gap-2 text-gray-600">
           <IconLucideMapPin class="w-4 h-4 text-accent mt-1" aria-hidden="true" />
           <span>
-            {{ site.contactAddress }}<br />
+            {{ site.contactAddress }}<br>
             {{ site.contactPostalCode }} {{ site.contactCity }}
           </span>
         </div>

app/components/sites/SiteEditModal.vue

@@ -5,7 +5,7 @@
         Modifier le site
         <span v-if="siteName" class="block text-sm font-normal text-gray-500">{{ siteName }}</span>
       </h3>
-      <form @submit.prevent="emit('submit')" class="space-y-4">
+      <form class="space-y-4" @submit.prevent="emit('submit')">
         <div class="form-control">
           <label class="label">
             <span class="label-text">Nom du site</span>
@@ -16,7 +16,7 @@
             placeholder="Nom du site"
             class="input input-bordered"
             required
-          />
+          >
         </div>
 
         <SiteContactFormFields :form="props.form" />
@@ -24,8 +24,12 @@
         <div class="border-t border-base-200 pt-4 space-y-4">
           <div class="flex items-center justify-between">
             <div>
-              <h4 class="font-semibold text-sm">Documents liés</h4>
-              <p class="text-xs text-gray-500">Ajoutez des documents (PDF, images...) relatifs à ce site.</p>
+              <h4 class="font-semibold text-sm">
+                Documents liés
+              </h4>
+              <p class="text-xs text-gray-500">
+                Ajoutez des documents (PDF, images...) relatifs à ce site.
+              </p>
             </div>
             <span v-if="selectedFilesModel.length" class="badge badge-outline">
               {{ selectedFilesModel.length }} fichier{{ selectedFilesModel.length > 1 ? 's' : '' }} prêt{{ selectedFilesModel.length > 1 ? 's' : '' }} à être ajouté
@@ -39,7 +43,9 @@
           />
 
           <div v-if="documents.length" class="space-y-3">
-            <h5 class="text-sm font-medium">Documents existants</h5>
+            <h5 class="text-sm font-medium">
+              Documents existants
+            </h5>
             <div class="space-y-2 max-h-48 overflow-y-auto pr-1">
               <div
                 v-for="document in documents"
@@ -51,7 +57,9 @@
                     <component :is="documentIcon(document).component" class="h-6 w-6" aria-hidden="true" />
                   </span>
                   <div>
-                    <div class="font-medium">{{ document.name }}</div>
+                    <div class="font-medium">
+                      {{ document.name }}
+                    </div>
                     <div class="text-xs text-gray-500">
                       {{ document.mimeType || 'Inconnu' }} • {{ formatSize(document.size) }}
                     </div>
@@ -84,7 +92,7 @@
             Annuler
           </button>
           <button type="submit" class="btn btn-primary" :disabled="uploadingDocuments">
-            <span v-if="uploadingDocuments" class="loading loading-spinner loading-xs mr-2"></span>
+            <span v-if="uploadingDocuments" class="loading loading-spinner loading-xs mr-2" />
             Enregistrer
           </button>
         </div>

app/composables/useApi.js

@@ -1,6 +1,6 @@
 import { useToast } from './useToast'
 
-export function useApi() {
+export function useApi () {
   const { showSuccess, showError, showInfo } = useToast()
   const { public: publicConfig } = useRuntimeConfig()
   const API_BASE_URL = publicConfig.apiBaseUrl || 'http://localhost:3000'
@@ -11,8 +11,8 @@ export function useApi() {
     const url = `${API_BASE_URL}${endpoint}`
     const defaultOptions = {
       headers: {
-        'Content-Type': 'application/json',
-      },
+        'Content-Type': 'application/json'
+      }
     }
 
     // Ajouter un timeout à la requête

app/composables/useComponentModels.js

@@ -5,7 +5,7 @@ import { useToast } from './useToast'
 const componentModelsBuckets = ref({})
 const loadingComponentModels = ref(false)
 
-export function useComponentModels() {
+export function useComponentModels () {
   const { get, post, patch, delete: del } = useApi()
   const { showSuccess, showError } = useToast()
 
@@ -18,7 +18,7 @@ export function useComponentModels() {
         const key = typeComposantId || '__all__'
         componentModelsBuckets.value = {
           ...componentModelsBuckets.value,
-          [key]: result.data,
+          [key]: result.data
         }
       }
       return result
@@ -39,7 +39,7 @@ export function useComponentModels() {
         const bucket = componentModelsBuckets.value[key] || []
         componentModelsBuckets.value = {
           ...componentModelsBuckets.value,
-          [key]: [...bucket, result.data],
+          [key]: [...bucket, result.data]
         }
         showSuccess(`Modèle de composant "${result.data.name}" créé`)
       }
@@ -59,12 +59,12 @@ export function useComponentModels() {
       if (result.success) {
         const key = result.data?.typeComposantId || '__all__'
         const bucket = componentModelsBuckets.value[key] || []
-        const updatedBucket = bucket.map((model) =>
+        const updatedBucket = bucket.map(model =>
           model.id === id ? result.data : model
         )
         componentModelsBuckets.value = {
           ...componentModelsBuckets.value,
-          [key]: updatedBucket,
+          [key]: updatedBucket
         }
         showSuccess(`Modèle de composant "${result.data.name}" mis à jour`)
       }
@@ -84,7 +84,7 @@ export function useComponentModels() {
       if (result.success) {
         const updatedBuckets = {}
         for (const [key, bucket] of Object.entries(componentModelsBuckets.value)) {
-          updatedBuckets[key] = bucket.filter((model) => model.id !== id)
+          updatedBuckets[key] = bucket.filter(model => model.id !== id)
         }
         componentModelsBuckets.value = updatedBuckets
         showSuccess('Modèle de composant supprimé')
@@ -101,7 +101,7 @@ export function useComponentModels() {
   const allComponentModels = computed(() => {
     return Object.values(componentModelsBuckets.value).reduce((acc, bucket) => {
       bucket.forEach((model) => {
-        if (!acc.find((existing) => existing.id === model.id)) {
+        if (!acc.find(existing => existing.id === model.id)) {
           acc.push(model)
         }
       })
@@ -126,6 +126,6 @@ export function useComponentModels() {
     deleteComponentModel,
     getComponentModels,
     getComponentModelsForType,
-    isComponentModelLoading,
+    isComponentModelLoading
   }
 }

app/composables/useComponentTypes.js

@@ -1,17 +1,17 @@
 import { ref } from 'vue'
-import { listModelTypes, createModelType, updateModelType, deleteModelType } from '~/services/modelTypes'
 import { useToast } from './useToast'
+import { listModelTypes, createModelType, updateModelType, deleteModelType } from '~/services/modelTypes'
 
 const componentTypes = ref([])
 const loadingComponentTypes = ref(false)
 
-export function useComponentTypes() {
+export function useComponentTypes () {
   const { showSuccess, showError } = useToast()
 
   const generateCodeFromName = (name) => {
     return (name || '')
       .normalize('NFD')
-      .replace(/[\u0300-\u036f]/g, '')
+      .replace(/[\u0300-\u036F]/g, '')
       .toLowerCase()
       .replace(/[^a-z0-9]+/g, '-')
       .replace(/^-+|-+$/g, '')
@@ -25,12 +25,12 @@ export function useComponentTypes() {
         category: 'COMPONENT',
         sort: 'name',
         dir: 'asc',
-        limit: 200,
+        limit: 200
       })
 
-      componentTypes.value = data.items.map((item) => ({
+      componentTypes.value = data.items.map(item => ({
         ...item,
-        description: item.description ?? item.notes ?? null,
+        description: item.description ?? item.notes ?? null
       }))
 
       return { success: true, data: componentTypes.value }
@@ -51,12 +51,12 @@ export function useComponentTypes() {
         code: payload.code || generateCodeFromName(payload.name),
         category: 'COMPONENT',
         notes: payload.description ?? payload.notes,
-        description: payload.description ?? null,
+        description: payload.description ?? null
       })
 
       const normalized = {
         ...data,
-        description: data.description ?? data.notes ?? null,
+        description: data.description ?? data.notes ?? null
       }
 
       componentTypes.value.push(normalized)
@@ -79,15 +79,15 @@ export function useComponentTypes() {
         name: payload.name,
         description: payload.description,
         notes: payload.notes,
-        code: payload.code,
+        code: payload.code
       })
 
       const normalized = {
         ...data,
-        description: data.description ?? data.notes ?? null,
+        description: data.description ?? data.notes ?? null
       }
 
-      const index = componentTypes.value.findIndex((type) => type.id === id)
+      const index = componentTypes.value.findIndex(type => type.id === id)
       if (index !== -1) {
         componentTypes.value[index] = normalized
       }
@@ -95,7 +95,7 @@ export function useComponentTypes() {
 
       return {
         success: true,
-        data: normalized,
+        data: normalized
       }
     } catch (error) {
       const message = error?.data?.message || error?.message || 'Erreur inconnue'
@@ -110,7 +110,7 @@ export function useComponentTypes() {
     loadingComponentTypes.value = true
     try {
       await deleteModelType(id)
-      componentTypes.value = componentTypes.value.filter((type) => type.id !== id)
+      componentTypes.value = componentTypes.value.filter(type => type.id !== id)
       showSuccess('Type de composant supprimé')
       return { success: true }
     } catch (error) {
@@ -133,6 +133,6 @@ export function useComponentTypes() {
     updateComponentType,
     deleteComponentType,
     getComponentTypes,
-    isComponentTypeLoading,
+    isComponentTypeLoading
   }
 }

app/composables/useComposants.js

@@ -5,7 +5,7 @@ import { useApi } from './useApi'
 const composants = ref([])
 const loading = ref(false)
 
-export function useComposants() {
+export function useComposants () {
   const { showSuccess, showError, showInfo } = useToast()
   const { get, post, patch, delete: del } = useApi()
 

app/composables/useConstructeurs.js

@@ -5,7 +5,7 @@ import { useToast } from './useToast'
 const constructeurs = ref([])
 const loading = ref(false)
 
-export function useConstructeurs() {
+export function useConstructeurs () {
   const { get, post, patch, delete: del } = useApi()
   const { showSuccess, showError } = useToast()
 
@@ -43,7 +43,7 @@ export function useConstructeurs() {
       return result
     } catch (error) {
       console.error('Erreur lors de la création du constructeur:', error)
-      showError("Impossible de créer le constructeur")
+      showError('Impossible de créer le constructeur')
       return { success: false, error: error.message }
     } finally {
       loading.value = false
@@ -66,7 +66,7 @@ export function useConstructeurs() {
       return result
     } catch (error) {
       console.error('Erreur lors de la mise à jour du constructeur:', error)
-      showError("Impossible de mettre à jour le constructeur")
+      showError('Impossible de mettre à jour le constructeur')
       return { success: false, error: error.message }
     } finally {
       loading.value = false
@@ -86,14 +86,14 @@ export function useConstructeurs() {
       return result
     } catch (error) {
       console.error('Erreur lors de la suppression du constructeur:', error)
-      showError("Impossible de supprimer le constructeur")
+      showError('Impossible de supprimer le constructeur')
       return { success: false, error: error.message }
     } finally {
       loading.value = false
     }
   }
 
-  const getConstructeurById = (id) => constructeurs.value.find(item => item.id === id)
+  const getConstructeurById = id => constructeurs.value.find(item => item.id === id)
 
   return {
     constructeurs,
@@ -103,6 +103,6 @@ export function useConstructeurs() {
     createConstructeur,
     updateConstructeur,
     deleteConstructeur,
-    getConstructeurById,
+    getConstructeurById
   }
 }

app/composables/useCustomFields.js

@@ -1,7 +1,7 @@
 import { ref } from 'vue'
 import { useApi } from './useApi'
 
-export function useCustomFields() {
+export function useCustomFields () {
   const { apiCall } = useApi()
   const customFieldValues = ref([])
   const loading = ref(false)

app/composables/useDocuments.js

@@ -5,7 +5,7 @@ import { useToast } from './useToast'
 const documents = ref([])
 const loading = ref(false)
 
-const fileToBase64 = (file) =>
+const fileToBase64 = file =>
   new Promise((resolve, reject) => {
     const reader = new FileReader()
     reader.onload = () => resolve(reader.result)
@@ -13,7 +13,7 @@ const fileToBase64 = (file) =>
     reader.readAsDataURL(file)
   })
 
-export function useDocuments() {
+export function useDocuments () {
   const { get, post, delete: del } = useApi()
   const { showError, showSuccess } = useToast()
 
@@ -34,7 +34,7 @@ export function useDocuments() {
       return result
     } catch (error) {
       console.error(`Erreur lors du chargement des documents (${endpoint}):`, error)
-      showError("Impossible de charger les documents")
+      showError('Impossible de charger les documents')
       return { success: false, error: error.message }
     } finally {
       loading.value = false
@@ -46,27 +46,27 @@ export function useDocuments() {
   }
 
   const loadDocumentsBySite = async (siteId, options = {}) => {
-    if (!siteId) return { success: false, error: 'Aucun site sélectionné' }
+    if (!siteId) { return { success: false, error: 'Aucun site sélectionné' } }
     return loadFromEndpoint(`/documents/site/${siteId}`, { updateStore: options.updateStore ?? false })
   }
 
   const loadDocumentsByMachine = async (machineId, options = {}) => {
-    if (!machineId) return { success: false, error: 'Aucune machine sélectionnée' }
+    if (!machineId) { return { success: false, error: 'Aucune machine sélectionnée' } }
     return loadFromEndpoint(`/documents/machine/${machineId}`, { updateStore: options.updateStore ?? false })
   }
 
   const loadDocumentsByComponent = async (componentId, options = {}) => {
-    if (!componentId) return { success: false, error: 'Aucun composant sélectionné' }
+    if (!componentId) { return { success: false, error: 'Aucun composant sélectionné' } }
     return loadFromEndpoint(`/documents/composant/${componentId}`, { updateStore: options.updateStore ?? false })
   }
 
   const loadDocumentsByPiece = async (pieceId, options = {}) => {
-    if (!pieceId) return { success: false, error: 'Aucune pièce sélectionnée' }
+    if (!pieceId) { return { success: false, error: 'Aucune pièce sélectionnée' } }
     return loadFromEndpoint(`/documents/piece/${pieceId}`, { updateStore: options.updateStore ?? false })
   }
 
   const uploadDocuments = async ({ files = [], context = {} }, { updateStore = false } = {}) => {
-    if (!files.length) return { success: false, error: 'Aucun fichier sélectionné' }
+    if (!files.length) { return { success: false, error: 'Aucun fichier sélectionné' } }
 
     loading.value = true
     const created = []
@@ -81,7 +81,7 @@ export function useDocuments() {
           mimeType: file.type || 'application/octet-stream',
           size: file.size,
           path: dataUrl,
-          ...context,
+          ...context
         }
 
         const result = await post('/documents', payload)
@@ -111,7 +111,7 @@ export function useDocuments() {
   }
 
   const deleteDocument = async (id, { updateStore = false } = {}) => {
-    if (!id) return { success: false, error: 'Identifiant manquant' }
+    if (!id) { return { success: false, error: 'Identifiant manquant' } }
 
     loading.value = true
     try {
@@ -125,7 +125,7 @@ export function useDocuments() {
       return result
     } catch (error) {
       console.error('Erreur lors de la suppression du document:', error)
-      showError("Impossible de supprimer le document")
+      showError('Impossible de supprimer le document')
       return { success: false, error: error.message }
     } finally {
       loading.value = false
@@ -141,6 +141,6 @@ export function useDocuments() {
     loadDocumentsByComponent,
     loadDocumentsByPiece,
     uploadDocuments,
-    deleteDocument,
+    deleteDocument
   }
 }

app/composables/useMachineTypesApi.js

@@ -5,7 +5,7 @@ import { useApi } from './useApi'
 const machineTypes = ref([])
 const loading = ref(false)
 
-export function useMachineTypesApi() {
+export function useMachineTypesApi () {
   const { showSuccess, showError, showInfo } = useToast()
   const { get, post, patch, delete: del } = useApi()
 

app/composables/useMachines.js

@@ -5,7 +5,7 @@ import { useApi } from './useApi'
 const machines = ref([])
 const loading = ref(false)
 
-export function useMachines() {
+export function useMachines () {
   const { showSuccess, showError, showInfo } = useToast()
   const { get, post, patch, delete: del } = useApi()
 
@@ -45,7 +45,7 @@ export function useMachines() {
     // Créer la machine avec la structure héritée du type
     const machineWithStructure = {
       ...machineData,
-      typeMachineId: typeMachine.id,
+      typeMachineId: typeMachine.id
       // La structure sera automatiquement héritée du type
       // Les composants et pièces seront créés automatiquement
     }

app/composables/usePieceModels.js

@@ -5,7 +5,7 @@ import { useToast } from './useToast'
 const pieceModelsBuckets = ref({})
 const loadingPieceModels = ref(false)
 
-export function usePieceModels() {
+export function usePieceModels () {
   const { get, post, patch, delete: del } = useApi()
   const { showSuccess, showError } = useToast()
 
@@ -18,7 +18,7 @@ export function usePieceModels() {
         const key = typePieceId || '__all__'
         pieceModelsBuckets.value = {
           ...pieceModelsBuckets.value,
-          [key]: result.data,
+          [key]: result.data
         }
       }
       return result
@@ -39,7 +39,7 @@ export function usePieceModels() {
         const bucket = pieceModelsBuckets.value[key] || []
         pieceModelsBuckets.value = {
           ...pieceModelsBuckets.value,
-          [key]: [...bucket, result.data],
+          [key]: [...bucket, result.data]
         }
         showSuccess(`Modèle de pièce "${result.data.name}" créé`)
       }
@@ -59,12 +59,12 @@ export function usePieceModels() {
       if (result.success) {
         const key = result.data?.typePieceId || '__all__'
         const bucket = pieceModelsBuckets.value[key] || []
-        const updatedBucket = bucket.map((model) =>
+        const updatedBucket = bucket.map(model =>
           model.id === id ? result.data : model
         )
         pieceModelsBuckets.value = {
           ...pieceModelsBuckets.value,
-          [key]: updatedBucket,
+          [key]: updatedBucket
         }
         showSuccess(`Modèle de pièce "${result.data.name}" mis à jour`)
       }
@@ -84,7 +84,7 @@ export function usePieceModels() {
       if (result.success) {
         const updatedBuckets = {}
         for (const [key, bucket] of Object.entries(pieceModelsBuckets.value)) {
-          updatedBuckets[key] = bucket.filter((model) => model.id !== id)
+          updatedBuckets[key] = bucket.filter(model => model.id !== id)
         }
         pieceModelsBuckets.value = updatedBuckets
         showSuccess('Modèle de pièce supprimé')
@@ -101,7 +101,7 @@ export function usePieceModels() {
   const allPieceModels = computed(() => {
     return Object.values(pieceModelsBuckets.value).reduce((acc, bucket) => {
       bucket.forEach((model) => {
-        if (!acc.find((existing) => existing.id === model.id)) {
+        if (!acc.find(existing => existing.id === model.id)) {
           acc.push(model)
         }
       })
@@ -126,6 +126,6 @@ export function usePieceModels() {
     deletePieceModel,
     getPieceModels,
     getPieceModelsForType,
-    isPieceModelLoading,
+    isPieceModelLoading
   }
 }

app/composables/usePieceTypes.js

@@ -1,17 +1,17 @@
 import { ref } from 'vue'
-import { listModelTypes, createModelType, updateModelType, deleteModelType } from '~/services/modelTypes'
 import { useToast } from './useToast'
+import { listModelTypes, createModelType, updateModelType, deleteModelType } from '~/services/modelTypes'
 
 const pieceTypes = ref([])
 const loadingPieceTypes = ref(false)
 
-export function usePieceTypes() {
+export function usePieceTypes () {
   const { showSuccess, showError } = useToast()
 
   const generateCodeFromName = (name) => {
     return (name || '')
       .normalize('NFD')
-      .replace(/[\u0300-\u036f]/g, '')
+      .replace(/[\u0300-\u036F]/g, '')
       .toLowerCase()
       .replace(/[^a-z0-9]+/g, '-')
       .replace(/^-+|-+$/g, '')
@@ -25,12 +25,12 @@ export function usePieceTypes() {
         category: 'PIECE',
         sort: 'name',
         dir: 'asc',
-        limit: 200,
+        limit: 200
       })
 
-      pieceTypes.value = data.items.map((item) => ({
+      pieceTypes.value = data.items.map(item => ({
         ...item,
-        description: item.description ?? item.notes ?? null,
+        description: item.description ?? item.notes ?? null
       }))
 
       return { success: true, data: pieceTypes.value }
@@ -51,12 +51,12 @@ export function usePieceTypes() {
         code: payload.code || generateCodeFromName(payload.name),
         category: 'PIECE',
         notes: payload.description ?? payload.notes,
-        description: payload.description ?? null,
+        description: payload.description ?? null
       })
 
       const normalized = {
         ...data,
-        description: data.description ?? data.notes ?? null,
+        description: data.description ?? data.notes ?? null
       }
 
       pieceTypes.value.push(normalized)
@@ -79,15 +79,15 @@ export function usePieceTypes() {
         name: payload.name,
         description: payload.description,
         notes: payload.notes,
-        code: payload.code,
+        code: payload.code
       })
 
       const normalized = {
         ...data,
-        description: data.description ?? data.notes ?? null,
+        description: data.description ?? data.notes ?? null
       }
 
-      const index = pieceTypes.value.findIndex((type) => type.id === id)
+      const index = pieceTypes.value.findIndex(type => type.id === id)
       if (index !== -1) {
         pieceTypes.value[index] = normalized
       }
@@ -95,7 +95,7 @@ export function usePieceTypes() {
 
       return {
         success: true,
-        data: normalized,
+        data: normalized
       }
     } catch (error) {
       const message = error?.data?.message || error?.message || 'Erreur inconnue'
@@ -110,7 +110,7 @@ export function usePieceTypes() {
     loadingPieceTypes.value = true
     try {
       await deleteModelType(id)
-      pieceTypes.value = pieceTypes.value.filter((type) => type.id !== id)
+      pieceTypes.value = pieceTypes.value.filter(type => type.id !== id)
       showSuccess('Type de pièce supprimé')
       return { success: true }
     } catch (error) {
@@ -133,6 +133,6 @@ export function usePieceTypes() {
     updatePieceType,
     deletePieceType,
     getPieceTypes,
-    isPieceTypeLoading,
+    isPieceTypeLoading
   }
 }

app/composables/usePieces.js

@@ -5,7 +5,7 @@ import { useApi } from './useApi'
 const pieces = ref([])
 const loading = ref(false)
 
-export function usePieces() {
+export function usePieces () {
   const { showSuccess, showError, showInfo } = useToast()
   const { get, post, patch, delete: del } = useApi()
 

app/composables/useProfileSession.js

@@ -6,13 +6,13 @@ const buildUrl = (path) => {
   return `${base}${path}`
 }
 
-export function useProfileSession() {
+export function useProfileSession () {
   const activeProfile = useState('profileSession:active', () => null)
   const sessionLoaded = useState('profileSession:loaded', () => false)
   const loading = useState('profileSession:loading', () => false)
 
   const getSessionHeaders = () => {
-    if (!process.server) return undefined
+    if (!process.server) { return undefined }
     const headers = useRequestHeaders(['cookie'])
     return headers?.cookie ? { cookie: headers.cookie } : undefined
   }
@@ -23,7 +23,7 @@ export function useProfileSession() {
       activeProfile.value = await $fetch(buildUrl('/session/profile'), {
         method: 'GET',
         credentials: 'include',
-        headers: getSessionHeaders(),
+        headers: getSessionHeaders()
       })
     } catch (error) {
       if (error?.status === 401) {
@@ -51,7 +51,7 @@ export function useProfileSession() {
       method: 'POST',
       credentials: 'include',
       body: { profileId },
-      headers: getSessionHeaders(),
+      headers: getSessionHeaders()
     })
     await fetchCurrentProfile()
   }
@@ -61,7 +61,7 @@ export function useProfileSession() {
       await $fetch(buildUrl('/session/profile'), {
         method: 'DELETE',
         credentials: 'include',
-        headers: getSessionHeaders(),
+        headers: getSessionHeaders()
       })
     } finally {
       activeProfile.value = null
@@ -76,6 +76,6 @@ export function useProfileSession() {
     ensureSession,
     fetchCurrentProfile,
     activateProfile,
-    logout,
+    logout
   }
 }

app/composables/useProfiles.js

@@ -6,13 +6,13 @@ const buildUrl = (path) => {
   return `${base}${path}`
 }
 
-export function useProfiles() {
+export function useProfiles () {
   const profiles = useState('profiles:list', () => [])
   const loadingProfiles = useState('profiles:loading', () => false)
   const profilesLoaded = useState('profiles:loaded', () => false)
 
   const getSessionHeaders = () => {
-    if (!process.server) return undefined
+    if (!process.server) { return undefined }
     const headers = useRequestHeaders(['cookie'])
     return headers?.cookie ? { cookie: headers.cookie } : undefined
   }
@@ -23,7 +23,7 @@ export function useProfiles() {
       profiles.value = await $fetch(buildUrl('/profiles'), {
         method: 'GET',
         credentials: 'include',
-        headers: getSessionHeaders(),
+        headers: getSessionHeaders()
       })
       profilesLoaded.value = true
     } catch (error) {
@@ -41,7 +41,7 @@ export function useProfiles() {
       method: 'POST',
       credentials: 'include',
       body: { firstName, lastName },
-      headers: getSessionHeaders(),
+      headers: getSessionHeaders()
     })
     await fetchProfiles()
     return profile
@@ -51,7 +51,7 @@ export function useProfiles() {
     await $fetch(buildUrl(`/profiles/${profileId}`), {
       method: 'DELETE',
       credentials: 'include',
-      headers: getSessionHeaders(),
+      headers: getSessionHeaders()
     })
     await fetchProfiles()
   }
@@ -62,6 +62,6 @@ export function useProfiles() {
     profilesLoaded,
     fetchProfiles,
     createProfile,
-    deleteProfile,
+    deleteProfile
   }
 }

app/composables/useSites.js

@@ -5,7 +5,7 @@ import { useApi } from './useApi'
 const sites = ref([])
 const loading = ref(false)
 
-export function useSites() {
+export function useSites () {
   const { showSuccess, showInfo } = useToast()
   const { get, post, patch, delete: del } = useApi()
 

app/composables/useToast.js

@@ -3,7 +3,7 @@ import { ref } from 'vue'
 const toasts = ref([])
 let nextId = 1
 
-export function useToast() {
+export function useToast () {
   const showToast = (message, type = 'info', duration = 5000) => {
     const id = nextId++
     const toast = {

app/pages/component-catalog.vue

@@ -2,12 +2,20 @@
   <main class="container mx-auto px-6 py-8 space-y-8">
     <header class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
       <div class="space-y-1">
-        <h1 class="text-3xl font-bold text-gray-800">Catalogue de composant</h1>
-        <p class="text-sm text-gray-500">Gérez les modèles disponibles pour chaque famille de composant.</p>
+        <h1 class="text-3xl font-bold text-gray-800">
+          Catalogue de composant
+        </h1>
+        <p class="text-sm text-gray-500">
+          Gérez les modèles disponibles pour chaque famille de composant.
+        </p>
       </div>
       <div class="tabs tabs-boxed">
-        <NuxtLink to="/component-catalog" class="tab tab-active">Composants</NuxtLink>
-        <NuxtLink to="/pieces-catalog" class="tab">Pièces</NuxtLink>
+        <NuxtLink to="/component-catalog" class="tab tab-active">
+          Composants
+        </NuxtLink>
+        <NuxtLink to="/pieces-catalog" class="tab">
+          Pièces
+        </NuxtLink>
       </div>
     </header>
 
@@ -36,7 +44,7 @@
                   type="search"
                   placeholder="Rechercher un modèle..."
                   class="input input-bordered input-sm"
-                />
+                >
               </label>
               <span class="text-xs text-gray-500">{{ filteredModels.length }} modèle(s)</span>
             </div>
@@ -47,7 +55,7 @@
           </div>
 
           <div v-if="loadingComponentModels" class="flex justify-center py-16">
-            <span class="loading loading-spinner loading-lg"></span>
+            <span class="loading loading-spinner loading-lg" />
           </div>
 
           <div v-else-if="filteredModels.length === 0" class="py-16 text-center text-sm text-gray-500">
@@ -59,11 +67,19 @@
               <thead>
                 <tr class="text-sm text-gray-500">
                   <th>Nom</th>
-                  <th class="hidden md:table-cell">Description</th>
+                  <th class="hidden md:table-cell">
+                    Description
+                  </th>
                   <th>Type</th>
-                  <th class="hidden xl:table-cell">Structure</th>
-                  <th class="hidden lg:table-cell">Modifié</th>
-                  <th class="text-right">Actions</th>
+                  <th class="hidden xl:table-cell">
+                    Structure
+                  </th>
+                  <th class="hidden lg:table-cell">
+                    Modifié
+                  </th>
+                  <th class="text-right">
+                    Actions
+                  </th>
                 </tr>
               </thead>
               <tbody>
@@ -80,10 +96,16 @@
                       <span class="font-medium">{{ model.name }}</span>
                     </div>
                   </td>
-                  <td class="hidden md:table-cell">{{ model.description || '—' }}</td>
+                  <td class="hidden md:table-cell">
+                    {{ model.description || '—' }}
+                  </td>
                   <td>{{ model.typeComposant?.name || 'Non défini' }}</td>
-                  <td class="hidden xl:table-cell text-xs text-gray-500">{{ formatStructurePreview(model.structure) }}</td>
-                  <td class="hidden lg:table-cell text-xs text-gray-500">{{ formatFrenchDate(model.updatedAt || model.createdAt) }}</td>
+                  <td class="hidden xl:table-cell text-xs text-gray-500">
+                    {{ formatStructurePreview(model.structure) }}
+                  </td>
+                  <td class="hidden lg:table-cell text-xs text-gray-500">
+                    {{ formatFrenchDate(model.updatedAt || model.createdAt) }}
+                  </td>
                   <td class="text-right space-x-2">
                     <button type="button" class="btn btn-sm btn-outline" @click="startEdit(model)">
                       Éditer
@@ -124,7 +146,7 @@
                 class="input input-bordered input-sm"
                 placeholder="Nom du modèle"
                 required
-              />
+              >
             </div>
             <div class="form-control">
               <label class="label"><span class="label-text">Description</span></label>
@@ -133,7 +155,7 @@
                 class="textarea textarea-bordered textarea-sm"
                 rows="3"
                 placeholder="Notes optionnelles"
-              ></textarea>
+              />
             </div>
             <div class="form-control">
               <label class="label"><span class="label-text">Type de composant</span></label>
@@ -142,7 +164,9 @@
                 class="select select-bordered select-sm"
                 required
               >
-                <option value="" disabled>Sélectionner un type</option>
+                <option value="" disabled>
+                  Sélectionner un type
+                </option>
                 <option
                   v-for="type in componentTypes"
                   :key="type.id"
@@ -153,7 +177,9 @@
               </select>
             </div>
 
-            <div class="divider my-0">Structure</div>
+            <div class="divider my-0">
+              Structure
+            </div>
             <ComponentModelStructureEditor v-model="form.data.structure" />
             <div class="rounded-lg border border-base-200 bg-base-200/60 p-3 text-xs text-gray-500">
               Aperçu : {{ formatStructurePreview(form.data.structure) }}
@@ -190,7 +216,7 @@ const {
   updateComponentModel,
   deleteComponentModel,
   loadingComponentModels,
-  getComponentModelsForType,
+  getComponentModelsForType
 } = useComponentModels()
 const { showError, showSuccess } = useToast()
 
@@ -205,15 +231,15 @@ const form = reactive({
     name: '',
     description: '',
     typeComposantId: '',
-    structure: {},
-  },
+    structure: {}
+  }
 })
 
 const ensureTypeSelected = () => {
-  if (form.data.typeComposantId && componentTypes.value.some((type) => type.id === form.data.typeComposantId)) {
+  if (form.data.typeComposantId && componentTypes.value.some(type => type.id === form.data.typeComposantId)) {
     return
   }
-  if (selectedType.value !== 'all' && componentTypes.value.some((type) => type.id === selectedType.value)) {
+  if (selectedType.value !== 'all' && componentTypes.value.some(type => type.id === selectedType.value)) {
     form.data.typeComposantId = selectedType.value
     return
   }
@@ -227,7 +253,7 @@ const startCreate = () => {
     name: '',
     description: '',
     typeComposantId: selectedType.value !== 'all' ? selectedType.value : '',
-    structure: {},
+    structure: {}
   }
   ensureTypeSelected()
 }
@@ -239,7 +265,7 @@ const startEdit = (model) => {
     name: model.name,
     description: model.description || '',
     typeComposantId: model.typeComposantId || model.typeComposant?.id || '',
-    structure: model.structure || {},
+    structure: model.structure || {}
   }
 }
 
@@ -254,9 +280,9 @@ const filteredModels = computed(() => {
   const term = searchQuery.value.toLowerCase()
   return list.filter((model) => {
     return (
-      model.name?.toLowerCase().includes(term)
-      || model.description?.toLowerCase().includes(term)
-      || model.typeComposant?.name?.toLowerCase().includes(term)
+      model.name?.toLowerCase().includes(term) ||
+      model.description?.toLowerCase().includes(term) ||
+      model.typeComposant?.name?.toLowerCase().includes(term)
     )
   })
 })
@@ -282,7 +308,7 @@ const handleSubmit = async () => {
         name: form.data.name.trim(),
         description: form.data.description.trim() || undefined,
         typeComposantId: form.data.typeComposantId,
-        structure: form.data.structure || {},
+        structure: form.data.structure || {}
       })
       if (!result.success) {
         showError(result.error || 'Impossible de créer le modèle')
@@ -294,7 +320,7 @@ const handleSubmit = async () => {
         name: form.data.name.trim(),
         description: form.data.description.trim() || undefined,
         typeComposantId: form.data.typeComposantId,
-        structure: form.data.structure || {},
+        structure: form.data.structure || {}
       })
       if (!result.success) {
         showError(result.error || 'Impossible de mettre à jour le modèle')
@@ -312,7 +338,7 @@ const handleSubmit = async () => {
 
 const confirmDelete = async (model) => {
   const ok = confirm(`Supprimer le modèle "${model.name}" ?`)
-  if (!ok) return
+  if (!ok) { return }
   const result = await deleteComponentModel(model.id)
   if (!result.success) {
     showError(result.error || 'Impossible de supprimer ce modèle')

app/pages/constructeurs.vue

@@ -2,8 +2,12 @@
   <main class="container mx-auto px-6 py-8 space-y-6">
     <div class="flex items-center justify-between">
       <div>
-        <h1 class="text-3xl font-bold">Constructeurs</h1>
-        <p class="text-sm text-gray-500">Gérez les constructeurs et leurs coordonnées.</p>
+        <h1 class="text-3xl font-bold">
+          Constructeurs
+        </h1>
+        <p class="text-sm text-gray-500">
+          Gérez les constructeurs et leurs coordonnées.
+        </p>
       </div>
       <button class="btn btn-primary" @click="openCreateModal">
         <IconLucidePlus class="w-4 h-4 mr-2" aria-hidden="true" />
@@ -22,20 +26,26 @@
               class="input input-bordered w-full"
               placeholder="Nom, email ou téléphone"
               @input="debouncedSearch"
-            />
+            >
           </div>
           <div class="md:w-1/3">
             <label class="label"><span class="label-text">Tri</span></label>
             <select v-model="sortKey" class="select select-bordered w-full">
-              <option value="name">Nom</option>
-              <option value="email">Email</option>
-              <option value="phone">Téléphone</option>
+              <option value="name">
+                Nom
+              </option>
+              <option value="email">
+                Email
+              </option>
+              <option value="phone">
+                Téléphone
+              </option>
             </select>
           </div>
         </div>
 
         <div v-if="loading" class="py-16 text-center text-sm text-gray-500">
-          <span class="loading loading-spinner loading-lg mb-2"></span>
+          <span class="loading loading-spinner loading-lg mb-2" />
           Chargement des constructeurs...
         </div>
 
@@ -50,7 +60,9 @@
                 <th>Nom</th>
                 <th>Email</th>
                 <th>Téléphone</th>
-                <th class="text-right">Actions</th>
+                <th class="text-right">
+                  Actions
+                </th>
               </tr>
             </thead>
             <tbody>
@@ -60,8 +72,12 @@
                 <td>{{ constructeur.phone || '—' }}</td>
                 <td class="text-right">
                   <div class="flex justify-end gap-2">
-                    <button class="btn btn-ghost btn-xs" @click="openEditModal(constructeur)">Modifier</button>
-                    <button class="btn btn-error btn-xs" @click="confirmDelete(constructeur)">Supprimer</button>
+                    <button class="btn btn-ghost btn-xs" @click="openEditModal(constructeur)">
+                      Modifier
+                    </button>
+                    <button class="btn btn-error btn-xs" @click="confirmDelete(constructeur)">
+                      Supprimer
+                    </button>
                   </div>
                 </td>
               </tr>
@@ -73,20 +89,24 @@
 
     <dialog class="modal" :class="{ 'modal-open': modalOpen }">
       <div class="modal-box">
-        <h3 class="font-bold text-lg mb-4">{{ editingConstructeur ? 'Modifier' : 'Nouveau' }} constructeur</h3>
-        <form @submit.prevent="saveConstructeur" class="space-y-4">
+        <h3 class="font-bold text-lg mb-4">
+          {{ editingConstructeur ? 'Modifier' : 'Nouveau' }} constructeur
+        </h3>
+        <form class="space-y-4" @submit.prevent="saveConstructeur">
           <div class="form-control">
             <label class="label"><span class="label-text">Nom</span></label>
-            <input v-model="form.name" type="text" class="input input-bordered" required />
+            <input v-model="form.name" type="text" class="input input-bordered" required>
           </div>
           <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
             <FieldEmail v-model="form.email" label="Email" />
             <FieldPhone v-model="form.phone" label="Téléphone" />
           </div>
           <div class="modal-action">
-            <button type="button" class="btn" @click="closeModal">Annuler</button>
+            <button type="button" class="btn" @click="closeModal">
+              Annuler
+            </button>
             <button type="submit" class="btn btn-primary" :disabled="saving">
-              <span v-if="saving" class="loading loading-spinner loading-xs mr-2"></span>
+              <span v-if="saving" class="loading loading-spinner loading-xs mr-2" />
               {{ editingConstructeur ? 'Enregistrer' : 'Créer' }}
             </button>
           </div>
@@ -119,7 +139,7 @@ const filteredConstructeurs = computed(() => {
     const key = sortKey.value
     return (a[key] || '').localeCompare(b[key] || '')
   })
-  if (!searchTerm.value) return sorted
+  if (!searchTerm.value) { return sorted }
   const term = searchTerm.value.toLowerCase()
   return sorted.filter(item =>
     [item.name, item.email, item.phone].some(value => value && value.toLowerCase().includes(term))
@@ -130,7 +150,7 @@ const debouncedSearch = debounce(async () => {
   await searchConstructeurs(searchTerm.value)
 }, 300)
 
-function debounce(fn, delay) {
+function debounce (fn, delay) {
   let timeout
   return (...args) => {
     clearTimeout(timeout)
@@ -153,7 +173,7 @@ const openEditModal = (constructeur) => {
   form.value = {
     name: constructeur.name,
     email: constructeur.email || '',
-    phone: constructeur.phone || '',
+    phone: constructeur.phone || ''
   }
   modalOpen.value = true
 }
@@ -166,8 +186,8 @@ const closeModal = () => {
 const saveConstructeur = async () => {
   saving.value = true
   const payload = { ...form.value }
-  if (!payload.email) delete payload.email
-  if (!payload.phone) delete payload.phone
+  if (!payload.email) { delete payload.email }
+  if (!payload.phone) { delete payload.phone }
   let result
   if (editingConstructeur.value) {
     result = await updateConstructeur(editingConstructeur.value.id, payload)
@@ -182,7 +202,7 @@ const saveConstructeur = async () => {
 }
 
 const confirmDelete = async (constructeur) => {
-  if (!confirm(`Supprimer le constructeur "${constructeur.name}" ?`)) return
+  if (!confirm(`Supprimer le constructeur "${constructeur.name}" ?`)) { return }
   const result = await deleteConstructeur(constructeur.id)
   if (!result.success && result.error) {
     showError(result.error)

app/pages/documents.vue

@@ -1,7 +1,5 @@
 <template>
   <main class="container mx-auto px-6 py-8 space-y-8">
-
-
     <DocumentPreviewModal
       :document="previewDocument"
       :visible="previewVisible"
@@ -20,7 +18,7 @@
               type="search"
               placeholder="Nom du document, type, site, machine..."
               class="input input-bordered w-full"
-            />
+            >
           </div>
 
           <div class="w-full md:w-1/3">
@@ -28,19 +26,29 @@
               <span class="label-text">Filtrer par rattachement</span>
             </label>
             <select v-model="attachmentFilter" class="select select-bordered w-full">
-              <option value="all">Tous</option>
-              <option value="site">Sites</option>
-              <option value="machine">Machines</option>
-              <option value="composant">Composants</option>
-              <option value="piece">Pièces</option>
+              <option value="all">
+                Tous
+              </option>
+              <option value="site">
+                Sites
+              </option>
+              <option value="machine">
+                Machines
+              </option>
+              <option value="composant">
+                Composants
+              </option>
+              <option value="piece">
+                Pièces
+              </option>
             </select>
           </div>
         </div>
 
-        <div class="divider my-0"></div>
+        <div class="divider my-0" />
 
         <div v-if="loading" class="flex flex-col items-center justify-center py-16 text-sm text-gray-500">
-          <span class="loading loading-spinner loading-lg mb-3"></span>
+          <span class="loading loading-spinner loading-lg mb-3" />
           Chargement des documents...
         </div>
 
@@ -58,7 +66,9 @@
                 <th>Taille</th>
                 <th>Rattaché à</th>
                 <th>Date</th>
-                <th class="text-right">Actions</th>
+                <th class="text-right">
+                  Actions
+                </th>
               </tr>
             </thead>
             <tbody>
@@ -73,8 +83,12 @@
                       />
                     </span>
                     <div>
-                      <div class="font-semibold">{{ document.name }}</div>
-                      <div class="text-xs text-gray-500">{{ document.filename }}</div>
+                      <div class="font-semibold">
+                        {{ document.name }}
+                      </div>
+                      <div class="text-xs text-gray-500">
+                        {{ document.filename }}
+                      </div>
                     </div>
                   </div>
                 </td>
@@ -124,7 +138,6 @@ import { formatFrenchDate } from '~/utils/date'
 import DocumentPreviewModal from '~/components/DocumentPreviewModal.vue'
 import IconLucideFileSearch from '~icons/lucide/file-search'
 
-
 const { documents, loading, loadDocuments } = useDocuments()
 
 const searchTerm = ref('')
@@ -148,9 +161,9 @@ const filteredDocuments = computed(() => {
       (filter === 'composant' && document.composantId) ||
       (filter === 'piece' && document.pieceId)
 
-    if (!matchesFilter) return false
+    if (!matchesFilter) { return false }
 
-    if (!term) return true
+    if (!term) { return true }
 
     const searchable = [
       document.name,
@@ -159,7 +172,7 @@ const filteredDocuments = computed(() => {
       document.site?.name,
       document.machine?.name,
       document.composant?.name,
-      document.piece?.name,
+      document.piece?.name
     ]
       .filter(Boolean)
       .map(value => value.toLowerCase())
@@ -169,18 +182,18 @@ const filteredDocuments = computed(() => {
 })
 
 const formatSize = (size) => {
-  if (size === undefined || size === null) return '—'
-  if (size === 0) return '0 B'
+  if (size === undefined || size === null) { return '—' }
+  if (size === 0) { return '0 B' }
   const units = ['B', 'KB', 'MB', 'GB']
   const index = Math.min(units.length - 1, Math.floor(Math.log(size) / Math.log(1024)))
   const formatted = size / Math.pow(1024, index)
   return `${formatted.toFixed(1)} ${units[index]}`
 }
 
-const documentIcon = (doc) => getFileIcon({ name: doc.filename || doc.name, mime: doc.mimeType })
+const documentIcon = doc => getFileIcon({ name: doc.filename || doc.name, mime: doc.mimeType })
 
 const downloadDocument = (doc) => {
-  if (!doc?.path) return
+  if (!doc?.path) { return }
 
   if (doc.path.startsWith('data:')) {
     const link = document.createElement('a')
@@ -194,7 +207,7 @@ const downloadDocument = (doc) => {
 }
 
 const openPreview = (doc) => {
-  if (!canPreviewDocument(doc)) return
+  if (!canPreviewDocument(doc)) { return }
   previewDocument.value = doc
   previewVisible.value = true
 }

app/pages/generator.vue

@@ -1,7 +1,5 @@
 <template>
   <main class="container mx-auto px-6 py-8 space-y-8">
-
-
     <div class="card bg-base-100 shadow-xl">
       <div class="card-body space-y-6">
         <div class="flex items-center gap-3">
@@ -12,7 +10,9 @@
             />
           </span>
           <div>
-            <h2 class="card-title text-2xl">Nouveau type de machine</h2>
+            <h2 class="card-title text-2xl">
+              Nouveau type de machine
+            </h2>
             <p class="text-sm text-gray-500">
               Complétez les informations puis enregistrez pour générer le nouveau type.
             </p>
@@ -37,7 +37,9 @@
       </div>
       <template v-else>
         <div v-if="recentTypes.length" class="space-y-4">
-          <h3 class="text-xl font-semibold">Types générés récemment</h3>
+          <h3 class="text-xl font-semibold">
+            Types générés récemment
+          </h3>
           <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
             <article
               v-for="type in recentTypes"
@@ -46,10 +48,14 @@
             >
               <div class="card-body space-y-2">
                 <div class="flex items-center justify-between">
-                  <h4 class="card-title text-base">{{ type.name }}</h4>
+                  <h4 class="card-title text-base">
+                    {{ type.name }}
+                  </h4>
                   <span v-if="type.category" class="badge badge-outline badge-sm">{{ type.category }}</span>
                 </div>
-                <p class="text-sm text-gray-600 line-clamp-3">{{ type.description || 'Aucune description' }}</p>
+                <p class="text-sm text-gray-600 line-clamp-3">
+                  {{ type.description || 'Aucune description' }}
+                </p>
                 <div class="text-xs text-gray-500 flex items-center gap-2">
                   <span class="inline-flex items-center gap-1">
                     <IconLucideClipboardList class="h-4 w-4" aria-hidden="true" />
@@ -94,7 +100,7 @@ const createEmptyType = () => ({
   maintenanceFrequency: '',
   customFields: [],
   componentRequirements: [],
-  pieceRequirements: [],
+  pieceRequirements: []
 })
 
 const draftType = ref(createEmptyType())
@@ -115,7 +121,7 @@ onMounted(async () => {
 })
 
 const parseOptions = (field = {}) => {
-  if (field.type !== 'select') return []
+  if (field.type !== 'select') { return [] }
   if (field.optionsText && typeof field.optionsText === 'string') {
     return field.optionsText
       .split('\n')
@@ -157,7 +163,7 @@ const normalizeComponentRequirements = (requirements = []) =>
       minCount: toIntegerOrNull(req.minCount, 1),
       maxCount: toIntegerOrNull(req.maxCount, null),
       required: req.required ?? true,
-      allowNewModels: req.allowNewModels ?? true,
+      allowNewModels: req.allowNewModels ?? true
     }))
 
 const normalizePieceRequirements = (requirements = []) =>
@@ -169,10 +175,10 @@ const normalizePieceRequirements = (requirements = []) =>
       minCount: toIntegerOrNull(req.minCount, 0),
       maxCount: toIntegerOrNull(req.maxCount, null),
       required: req.required ?? false,
-      allowNewModels: req.allowNewModels ?? true,
+      allowNewModels: req.allowNewModels ?? true
     }))
 
-const buildPayload = (typeData) => ({
+const buildPayload = typeData => ({
   name: typeData.name,
   description: typeData.description,
   category: typeData.category,
@@ -204,7 +210,7 @@ const handleSubmit = async () => {
   } else if (result?.error) {
     showError(result.error)
   } else {
-    showError("Impossible de créer le type.")
+    showError('Impossible de créer le type.')
   }
 }
 </script>

app/pages/index.vue

@@ -5,17 +5,29 @@
       <!-- Header with Stats -->
       <div class="flex justify-between items-center mb-6">
         <div>
-          <h2 class="text-2xl font-bold text-gray-800">Vue d'ensemble</h2>
-          <p class="text-gray-600">Machines organisées par site</p>
+          <h2 class="text-2xl font-bold text-gray-800">
+            Vue d'ensemble
+          </h2>
+          <p class="text-gray-600">
+            Machines organisées par site
+          </p>
         </div>
         <div class="stats shadow">
           <div class="stat">
-            <div class="stat-title">Sites</div>
-            <div class="stat-value text-primary">{{ sites.length }}</div>
+            <div class="stat-title">
+              Sites
+            </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="stat-title">
+              Machines
+            </div>
+            <div class="stat-value text-secondary">
+              {{ totalMachines }}
+            </div>
           </div>
         </div>
       </div>
@@ -33,14 +45,16 @@
                 type="text"
                 placeholder="Nom de machine ou site..."
                 class="input input-bordered"
-              />
+              >
             </div>
             <div class="form-control">
               <label class="label">
                 <span class="label-text">Type de machine</span>
               </label>
               <select v-model="selectedType" class="select select-bordered">
-                <option value="">Tous les types</option>
+                <option value="">
+                  Tous les types
+                </option>
                 <option
                   v-for="type in machineTypes"
                   :key="type.id"
@@ -55,7 +69,9 @@
                 <span class="label-text">Catégorie</span>
               </label>
               <select v-model="selectedCategory" class="select select-bordered">
-                <option value="">Toutes les catégories</option>
+                <option value="">
+                  Toutes les catégories
+                </option>
                 <option
                   v-for="category in categories"
                   :key="category"
@@ -71,7 +87,7 @@
 
       <!-- Loading State -->
       <div v-if="loading" class="flex justify-center items-center py-12">
-        <span class="loading loading-spinner loading-lg"></span>
+        <span class="loading loading-spinner loading-lg" />
       </div>
 
       <!-- Hierarchical Machines View -->
@@ -88,12 +104,12 @@
             Commencez par ajouter des sites et des machines.
           </p>
           <div class="flex gap-2 justify-center">
-            <button @click="showAddSiteModal = true" class="btn btn-primary">
+            <button class="btn btn-primary" @click="showAddSiteModal = true">
               Ajouter un site
             </button>
             <button
-              @click="showAddMachineModal = true"
               class="btn btn-secondary"
+              @click="showAddMachineModal = true"
             >
               Ajouter une machine
             </button>
@@ -119,7 +135,9 @@
                   </div>
                 </div>
                 <div>
-                  <h3 class="text-xl font-bold">{{ site.name }}</h3>
+                  <h3 class="text-xl font-bold">
+                    {{ site.name }}
+                  </h3>
                   <div class="text-sm text-gray-600 space-y-1">
                     <div class="flex items-center gap-2">
                       <IconLucideUser
@@ -141,7 +159,7 @@
                         aria-hidden="true"
                       />
                       <span>
-                        {{ site.contactAddress }}<br />
+                        {{ site.contactAddress }}<br>
                         {{ site.contactPostalCode }} {{ site.contactCity }}
                       </span>
                     </div>
@@ -153,8 +171,8 @@
                   {{ site.machines?.length || 0 }} machines
                 </div>
                 <button
-                  @click="toggleSiteCollapse(site.id)"
                   class="btn btn-ghost btn-sm"
+                  @click="toggleSiteCollapse(site.id)"
                 >
                   <IconLucideChevronDown
                     class="w-5 h-5 transition-transform"
@@ -171,12 +189,12 @@
             <div
               v-if="
                 !collapsedSites.includes(site.id) &&
-                site.machines &&
-                site.machines.length > 0
+                  site.machines &&
+                  site.machines.length > 0
               "
               class="space-y-3"
             >
-              <div class="divider"></div>
+              <div class="divider" />
               <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                 <div
                   v-for="machine in site.machines"
@@ -186,7 +204,9 @@
                 >
                   <div class="card-body p-4">
                     <div class="flex items-center justify-between mb-2">
-                      <h4 class="font-semibold text-sm">{{ machine.name }}</h4>
+                      <h4 class="font-semibold text-sm">
+                        {{ machine.name }}
+                      </h4>
                       <div
                         class="badge badge-sm"
                         :class="
@@ -246,7 +266,7 @@
             <div
               v-else-if="
                 !collapsedSites.includes(site.id) &&
-                (!site.machines || site.machines.length === 0)
+                  (!site.machines || site.machines.length === 0)
               "
               class="text-center py-6"
             >
@@ -257,8 +277,8 @@
                 Aucune machine dans ce site
               </p>
               <button
-                @click="addMachineToSite(site)"
                 class="btn btn-sm btn-primary"
+                @click="addMachineToSite(site)"
               >
                 Ajouter une machine
               </button>
@@ -271,8 +291,10 @@
     <!-- Add Site Modal -->
     <div v-if="showAddSiteModal" class="modal modal-open">
       <div class="modal-box">
-        <h3 class="font-bold text-lg mb-4">Ajouter un nouveau site</h3>
-        <form @submit.prevent="handleCreateSite" class="space-y-4">
+        <h3 class="font-bold text-lg mb-4">
+          Ajouter un nouveau site
+        </h3>
+        <form class="space-y-4" @submit.prevent="handleCreateSite">
           <div class="form-control">
             <label class="label">
               <span class="label-text">Nom du site</span>
@@ -283,7 +305,7 @@
               placeholder="Ex: Usine de production"
               class="input input-bordered"
               required
-            />
+            >
           </div>
 
           <SiteContactFormFields :form="newSite" />
@@ -291,12 +313,14 @@
           <div class="modal-action">
             <button
               type="button"
-              @click="showAddSiteModal = false"
               class="btn btn-outline"
+              @click="showAddSiteModal = false"
             >
               Annuler
             </button>
-            <button type="submit" class="btn btn-primary">Créer le site</button>
+            <button type="submit" class="btn btn-primary">
+              Créer le site
+            </button>
           </div>
         </form>
       </div>
@@ -305,7 +329,9 @@
     <!-- Add Machine Modal -->
     <div v-if="showAddMachineModal" class="modal modal-open">
       <div class="modal-box max-w-2xl">
-        <h3 class="font-bold text-lg mb-4">Ajouter une nouvelle machine</h3>
+        <h3 class="font-bold text-lg mb-4">
+          Ajouter une nouvelle machine
+        </h3>
         <form @submit.prevent="handleCreateMachine">
           <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
             <div class="form-control">
@@ -318,7 +344,7 @@
                 placeholder="Ex: Presse hydraulique #1"
                 class="input input-bordered"
                 required
-              />
+              >
             </div>
 
             <div class="form-control">
@@ -330,7 +356,9 @@
                 class="select select-bordered"
                 required
               >
-                <option value="">Sélectionner un site</option>
+                <option value="">
+                  Sélectionner un site
+                </option>
                 <option v-for="site in sites" :key="site.id" :value="site.id">
                   {{ site.name }}
                 </option>
@@ -348,7 +376,9 @@
                 class="select select-bordered"
                 required
               >
-                <option value="">Sélectionner un type</option>
+                <option value="">
+                  Sélectionner un type
+                </option>
                 <option
                   v-for="type in machineTypes"
                   :key="type.id"
@@ -368,7 +398,7 @@
                 type="text"
                 placeholder="Ex: PRESS-001"
                 class="input input-bordered"
-              />
+              >
             </div>
           </div>
 
@@ -405,8 +435,8 @@
           <div class="modal-action">
             <button
               type="button"
-              @click="showAddMachineModal = false"
               class="btn btn-outline"
+              @click="showAddMachineModal = false"
             >
               Annuler
             </button>
@@ -421,129 +451,129 @@
 </template>
 
 <script setup>
-import { ref, reactive, onMounted, computed } from "vue";
-import SiteContactFormFields from "~/components/sites/SiteContactFormFields.vue";
-import { useSites } from "~/composables/useSites";
-import { useMachineTypesApi } from "~/composables/useMachineTypesApi";
-import { useMachines } from "~/composables/useMachines";
-import { useToast } from "~/composables/useToast";
-import IconLucideFactory from "~icons/lucide/factory";
-import IconLucideMapPin from "~icons/lucide/map-pin";
-import IconLucideUser from "~icons/lucide/user";
-import IconLucidePhone from "~icons/lucide/phone";
-import IconLucideMapPinned from "~icons/lucide/map-pinned";
-import IconLucideChevronDown from "~icons/lucide/chevron-down";
-import IconLucideSettings2 from "~icons/lucide/settings-2";
-import IconLucideTag from "~icons/lucide/tag";
+import { ref, reactive, onMounted, computed } from 'vue'
+import SiteContactFormFields from '~/components/sites/SiteContactFormFields.vue'
+import { useSites } from '~/composables/useSites'
+import { useMachineTypesApi } from '~/composables/useMachineTypesApi'
+import { useMachines } from '~/composables/useMachines'
+import { useToast } from '~/composables/useToast'
+import IconLucideFactory from '~icons/lucide/factory'
+import IconLucideMapPin from '~icons/lucide/map-pin'
+import IconLucideUser from '~icons/lucide/user'
+import IconLucidePhone from '~icons/lucide/phone'
+import IconLucideMapPinned from '~icons/lucide/map-pinned'
+import IconLucideChevronDown from '~icons/lucide/chevron-down'
+import IconLucideSettings2 from '~icons/lucide/settings-2'
+import IconLucideTag from '~icons/lucide/tag'
 
-const { sites, loading, loadSites, createSite } = useSites();
-const { machineTypes, loadMachineTypes } = useMachineTypesApi();
-const { createMachineFromType, deleteMachine } = useMachines();
+const { sites, loading, loadSites, createSite } = useSites()
+const { machineTypes, loadMachineTypes } = useMachineTypesApi()
+const { createMachineFromType, deleteMachine } = useMachines()
 
 // Data
-const showAddSiteModal = ref(false);
-const showAddMachineModal = ref(false);
-const searchTerm = ref("");
-const selectedType = ref("");
-const selectedCategory = ref("");
-const collapsedSites = ref([]);
+const showAddSiteModal = ref(false)
+const showAddMachineModal = ref(false)
+const searchTerm = ref('')
+const selectedType = ref('')
+const selectedCategory = ref('')
+const collapsedSites = ref([])
 
 const newSite = reactive({
-  name: "",
-  contactName: "",
-  contactPhone: "",
-  contactAddress: "",
-  contactPostalCode: "",
-  contactCity: "",
-});
+  name: '',
+  contactName: '',
+  contactPhone: '',
+  contactAddress: '',
+  contactPostalCode: '',
+  contactCity: ''
+})
 
 const newMachine = reactive({
-  name: "",
-  siteId: "",
-  typeMachineId: "",
-  reference: "",
-});
+  name: '',
+  siteId: '',
+  typeMachineId: '',
+  reference: ''
+})
 
 // Computed
 const selectedMachineType = computed(() => {
-  if (!newMachine.typeMachineId) return null;
+  if (!newMachine.typeMachineId) { return null }
   return machineTypes.value.find(
-    (type) => type.id === newMachine.typeMachineId
-  );
-});
+    type => type.id === newMachine.typeMachineId
+  )
+})
 
 const categories = computed(() => {
-  const cats = new Set();
+  const cats = new Set()
   machineTypes.value.forEach((type) => {
-    if (type.category) cats.add(type.category);
-  });
-  return Array.from(cats);
-});
+    if (type.category) { cats.add(type.category) }
+  })
+  return Array.from(cats)
+})
 
 const totalMachines = computed(() => {
   return sites.value.reduce((total, site) => {
-    return total + (site.machines?.length || 0);
-  }, 0);
-});
+    return total + (site.machines?.length || 0)
+  }, 0)
+})
 
 const filteredSites = computed(() => {
-  let filtered = sites.value;
+  let filtered = sites.value
 
   // Filtrer par terme de recherche
   if (searchTerm.value) {
     filtered = filtered.filter((site) => {
-      const lowerTerm = searchTerm.value.toLowerCase();
+      const lowerTerm = searchTerm.value.toLowerCase()
       const siteMatches = [
         site.name,
         site.contactName,
         site.contactPhone,
         site.contactAddress,
         site.contactPostalCode,
-        site.contactCity,
+        site.contactCity
       ].some((field) => {
-        if (!field) return false;
-        return field.toLowerCase().includes(lowerTerm);
-      });
+        if (!field) { return false }
+        return field.toLowerCase().includes(lowerTerm)
+      })
 
       const machineMatches = site.machines?.some(
-        (machine) =>
+        machine =>
           machine.name.toLowerCase().includes(lowerTerm) ||
           machine.reference?.toLowerCase().includes(lowerTerm)
-      );
+      )
 
-      return siteMatches || machineMatches;
-    });
+      return siteMatches || machineMatches
+    })
   }
 
   // Filtrer par type de machine
   if (selectedType.value) {
     filtered = filtered
-      .map((site) => ({
+      .map(site => ({
         ...site,
         machines:
           site.machines?.filter(
-            (machine) => machine.typeMachineId === selectedType.value
-          ) || [],
+            machine => machine.typeMachineId === selectedType.value
+          ) || []
       }))
-      .filter((site) => site.machines.length > 0);
+      .filter(site => site.machines.length > 0)
   }
 
   // Filtrer par catégorie
   if (selectedCategory.value) {
     filtered = filtered
-      .map((site) => ({
+      .map(site => ({
         ...site,
         machines:
           site.machines?.filter(
-            (machine) =>
+            machine =>
               machine.typeMachine?.category === selectedCategory.value
-          ) || [],
+          ) || []
       }))
-      .filter((site) => site.machines.length > 0);
+      .filter(site => site.machines.length > 0)
   }
 
-  return filtered;
-});
+  return filtered
+})
 
 // Methods
 const handleCreateSite = async () => {
@@ -553,69 +583,69 @@ const handleCreateSite = async () => {
     contactPhone: newSite.contactPhone,
     contactAddress: newSite.contactAddress,
     contactPostalCode: newSite.contactPostalCode,
-    contactCity: newSite.contactCity,
-  });
+    contactCity: newSite.contactCity
+  })
   if (result.success) {
-    showAddSiteModal.value = false;
+    showAddSiteModal.value = false
 
     // Reset form
-    newSite.name = "";
-    newSite.contactName = "";
-    newSite.contactPhone = "";
-    newSite.contactAddress = "";
-    newSite.contactPostalCode = "";
-    newSite.contactCity = "";
+    newSite.name = ''
+    newSite.contactName = ''
+    newSite.contactPhone = ''
+    newSite.contactAddress = ''
+    newSite.contactPostalCode = ''
+    newSite.contactCity = ''
   }
-};
+}
 
 const handleCreateMachine = async () => {
   if (!selectedMachineType.value) {
-    console.error("Aucun type de machine sélectionné");
-    return;
+    console.error('Aucun type de machine sélectionné')
+    return
   }
 
   const machineData = {
     name: newMachine.name,
     siteId: newMachine.siteId,
-    reference: newMachine.reference,
-  };
+    reference: newMachine.reference
+  }
 
   const result = await createMachineFromType(
     machineData,
     selectedMachineType.value
-  );
+  )
 
   if (result.success) {
     // Reset form
-    newMachine.name = "";
-    newMachine.siteId = "";
-    newMachine.typeMachineId = "";
-    newMachine.reference = "";
-    showAddMachineModal.value = false;
+    newMachine.name = ''
+    newMachine.siteId = ''
+    newMachine.typeMachineId = ''
+    newMachine.reference = ''
+    showAddMachineModal.value = false
   }
-};
+}
 
 const toggleSiteCollapse = (siteId) => {
-  const index = collapsedSites.value.indexOf(siteId);
+  const index = collapsedSites.value.indexOf(siteId)
   if (index > -1) {
-    collapsedSites.value.splice(index, 1);
+    collapsedSites.value.splice(index, 1)
   } else {
-    collapsedSites.value.push(siteId);
+    collapsedSites.value.push(siteId)
   }
-};
+}
 
 const viewMachineDetails = (machine) => {
   // Navigation vers la page de détails de la machine
-  navigateTo(`/machine/${machine.id}`);
-};
+  navigateTo(`/machine/${machine.id}`)
+}
 
 const editMachine = (machine) => {
   // Rediriger vers la page d'édition de la machine
-  navigateTo(`/machine/${machine.id}?edit=true`);
-};
+  navigateTo(`/machine/${machine.id}?edit=true`)
+}
 
 const confirmDeleteMachine = async (machine) => {
-  const { showError, showSuccess } = useToast();
+  const { showError, showSuccess } = useToast()
 
   if (
     confirm(
@@ -623,36 +653,36 @@ const confirmDeleteMachine = async (machine) => {
     )
   ) {
     try {
-      const result = await deleteMachine(machine.id);
+      const result = await deleteMachine(machine.id)
       if (result.success) {
-        showSuccess(`Machine "${machine.name}" supprimée avec succès`);
+        showSuccess(`Machine "${machine.name}" supprimée avec succès`)
       } else {
-        showError(`Erreur lors de la suppression: ${result.error}`);
+        showError(`Erreur lors de la suppression: ${result.error}`)
       }
     } catch (error) {
-      showError(`Erreur lors de la suppression: ${error.message}`);
+      showError(`Erreur lors de la suppression: ${error.message}`)
     }
   }
-};
+}
 
 const addMachineToSite = (site) => {
-  newMachine.siteId = site.id;
-  showAddMachineModal.value = true;
-};
+  newMachine.siteId = site.id
+  showAddMachineModal.value = true
+}
 
 const getCategoryBadgeClass = (category) => {
   const classes = {
-    Production: "badge-primary",
-    Transformation: "badge-secondary",
-    Manutention: "badge-accent",
-    Traitement: "badge-info",
-    Contrôle: "badge-warning",
-  };
-  return classes[category] || "badge-neutral";
-};
+    Production: 'badge-primary',
+    Transformation: 'badge-secondary',
+    Manutention: 'badge-accent',
+    Traitement: 'badge-info',
+    Contrôle: 'badge-warning'
+  }
+  return classes[category] || 'badge-neutral'
+}
 
 // Lifecycle
 onMounted(async () => {
-  await Promise.all([loadSites(), loadMachineTypes()]);
-});
+  await Promise.all([loadSites(), loadMachineTypes()])
+})
 </script>

app/pages/machine-skeleton.vue

@@ -1,12 +1,12 @@
 <template>
   <main class="container mx-auto px-6 py-8">
-
-
     <!-- Machine Types List -->
     <div class="my-8">
       <!-- Header with Add Button -->
       <div class="flex justify-between items-center mb-6">
-        <h2 class="text-2xl font-bold text-gray-800">Squelettes de machine</h2>
+        <h2 class="text-2xl font-bold text-gray-800">
+          Squelettes de machine
+        </h2>
         <NuxtLink to="/generator" class="btn btn-primary">
           <IconLucidePlus
             class="w-5 h-5 mr-2"
@@ -38,10 +38,16 @@
         >
           <div class="card-body">
             <div class="flex items-center justify-between mb-4">
-              <h3 class="card-title text-lg">{{ type.name }}</h3>
-              <div class="badge badge-primary">{{ type.category }}</div>
+              <h3 class="card-title text-lg">
+                {{ type.name }}
+              </h3>
+              <div class="badge badge-primary">
+                {{ type.category }}
+              </div>
             </div>
-            <p class="text-gray-600 mb-4">{{ type.description }}</p>
+            <p class="text-gray-600 mb-4">
+              {{ type.description }}
+            </p>
             <div class="space-y-2 text-sm text-gray-500">
               <div class="flex items-center gap-2">
                 <IconLucidePackage class="w-4 h-4" aria-hidden="true" />
@@ -56,8 +62,12 @@
               <button class="btn btn-sm btn-error" @click.stop="confirmDeleteType(type)">
                 Supprimer
               </button>
-              <NuxtLink :to="`/type/${type.id}`" class="btn btn-sm btn-outline">Voir détails</NuxtLink>
-              <button class="btn btn-sm btn-primary">Utiliser</button>
+              <NuxtLink :to="`/type/${type.id}`" class="btn btn-sm btn-outline">
+                Voir détails
+              </NuxtLink>
+              <button class="btn btn-sm btn-primary">
+                Utiliser
+              </button>
             </div>
           </div>
         </div>
@@ -65,13 +75,17 @@
 
       <!-- Empty State -->
       <div v-if="filteredTypes.length === 0" class="text-center py-12">
-       <div class="avatar placeholder">
-         <div class="bg-neutral text-neutral-content rounded-full w-16">
+        <div class="avatar placeholder">
+          <div class="bg-neutral text-neutral-content rounded-full w-16">
             <IconLucideLayoutGrid class="w-8 h-8" aria-hidden="true" />
           </div>
         </div>
-        <h3 class="text-lg font-semibold text-gray-600 mt-4">Aucun type trouvé</h3>
-        <p class="text-gray-500">Aucun type de machine ne correspond à cette catégorie.</p>
+        <h3 class="text-lg font-semibold text-gray-600 mt-4">
+          Aucun type trouvé
+        </h3>
+        <p class="text-gray-500">
+          Aucun type de machine ne correspond à cette catégorie.
+        </p>
       </div>
     </div>
   </main>

app/pages/machines/index.vue

@@ -2,7 +2,9 @@
   <main class="container mx-auto px-6 py-8">
     <div class="my-8">
       <div class="flex justify-between items-center mb-6">
-        <h2 class="text-2xl font-bold">Parc Machines</h2>
+        <h2 class="text-2xl font-bold">
+          Parc Machines
+        </h2>
         <NuxtLink to="/machines/new" class="btn btn-primary">
           <IconLucidePlus class="w-5 h-5 mr-2" aria-hidden="true" />
           Ajouter une machine
@@ -17,7 +19,9 @@
                 <span class="label-text">Site</span>
               </label>
               <select v-model="selectedSite" class="select select-bordered">
-                <option value="">Tous les sites</option>
+                <option value="">
+                  Tous les sites
+                </option>
                 <option v-for="site in sites" :key="site.id" :value="site.id">
                   {{ site.name }}
                 </option>
@@ -28,7 +32,9 @@
                 <span class="label-text">Type de machine</span>
               </label>
               <select v-model="selectedType" class="select select-bordered">
-                <option value="">Tous les types</option>
+                <option value="">
+                  Tous les types
+                </option>
                 <option v-for="type in machineTypes" :key="type.id" :value="type.id">
                   {{ type.name }}
                 </option>
@@ -39,7 +45,9 @@
                 <span class="label-text">Catégorie</span>
               </label>
               <select v-model="selectedCategory" class="select select-bordered">
-                <option value="">Toutes les catégories</option>
+                <option value="">
+                  Toutes les catégories
+                </option>
                 <option v-for="category in categories" :key="category" :value="category">
                   {{ category }}
                 </option>
@@ -50,14 +58,18 @@
       </div>
 
       <div v-if="loading" class="flex justify-center items-center py-12">
-        <span class="loading loading-spinner loading-lg"></span>
+        <span class="loading loading-spinner loading-lg" />
       </div>
 
       <div v-else-if="filteredMachines.length === 0" class="text-center py-12">
         <div class="max-w-md mx-auto">
           <IconLucideFactory class="w-16 h-16 mx-auto text-gray-400 mb-4" aria-hidden="true" />
-          <h3 class="text-lg font-medium text-gray-900 mb-2">Aucune machine trouvée</h3>
-          <p class="text-gray-500 mb-4">Commencez par ajouter votre première machine.</p>
+          <h3 class="text-lg font-medium text-gray-900 mb-2">
+            Aucune machine trouvée
+          </h3>
+          <p class="text-gray-500 mb-4">
+            Commencez par ajouter votre première machine.
+          </p>
           <NuxtLink to="/machines/new" class="btn btn-primary">
             Ajouter une machine
           </NuxtLink>
@@ -73,11 +85,17 @@
         >
           <div class="card-body">
             <div class="flex items-center justify-between mb-2">
-              <h3 class="card-title text-lg">{{ machine.name }}</h3>
-              <div class="badge badge-primary badge-sm">{{ machine.typeMachine?.category || 'N/A' }}</div>
+              <h3 class="card-title text-lg">
+                {{ machine.name }}
+              </h3>
+              <div class="badge badge-primary badge-sm">
+                {{ machine.typeMachine?.category || 'N/A' }}
+              </div>
             </div>
 
-            <p class="text-sm text-gray-600 mb-3">{{ machine.description || machine.typeMachine?.description }}</p>
+            <p class="text-sm text-gray-600 mb-3">
+              {{ machine.description || machine.typeMachine?.description }}
+            </p>
 
             <div class="space-y-2 text-sm">
               <div class="flex items-center gap-2">
@@ -94,7 +112,6 @@
                 <IconLucideTag class="w-4 h-4 text-orange-500" aria-hidden="true" />
                 <span class="text-gray-600">{{ machine.reference }}</span>
               </div>
-
             </div>
 
             <div class="card-actions justify-end mt-4">
@@ -150,15 +167,15 @@ const filteredMachines = computed(() => {
   let filtered = machines.value
 
   if (selectedSite.value) {
-    filtered = filtered.filter((machine) => machine.siteId === selectedSite.value)
+    filtered = filtered.filter(machine => machine.siteId === selectedSite.value)
   }
 
   if (selectedType.value) {
-    filtered = filtered.filter((machine) => machine.typeMachineId === selectedType.value)
+    filtered = filtered.filter(machine => machine.typeMachineId === selectedType.value)
   }
 
   if (selectedCategory.value) {
-    filtered = filtered.filter((machine) => machine.typeMachine?.category === selectedCategory.value)
+    filtered = filtered.filter(machine => machine.typeMachine?.category === selectedCategory.value)
   }
 
   return filtered
@@ -193,7 +210,7 @@ onMounted(async () => {
   await Promise.all([
     loadMachines(),
     loadSites(),
-    loadMachineTypes(),
+    loadMachineTypes()
   ])
 })
 </script>

app/pages/machines/new.vue

@@ -3,10 +3,16 @@
     <div class="max-w-5xl mx-auto">
       <div class="flex flex-wrap items-center justify-between gap-3 mb-6">
         <div>
-          <h1 class="text-2xl font-bold">Nouvelle machine</h1>
-          <p class="text-sm text-gray-500">Renseignez les informations et la configuration avant de créer la machine.</p>
+          <h1 class="text-2xl font-bold">
+            Nouvelle machine
+          </h1>
+          <p class="text-sm text-gray-500">
+            Renseignez les informations et la configuration avant de créer la machine.
+          </p>
         </div>
-        <NuxtLink to="/machines" class="btn btn-ghost">Annuler</NuxtLink>
+        <NuxtLink to="/machines" class="btn btn-ghost">
+          Annuler
+        </NuxtLink>
       </div>
 
       <form class="space-y-6" @submit.prevent="finalizeMachineCreation">
@@ -24,7 +30,7 @@
                   placeholder="Ex: Presse hydraulique #1"
                   class="input input-bordered"
                   required
-                />
+                >
               </div>
 
               <div class="form-control">
@@ -32,7 +38,9 @@
                   <span class="label-text">Site</span>
                 </label>
                 <select id="machine-field-site" v-model="newMachine.siteId" class="select select-bordered" required>
-                  <option value="">Sélectionner un site</option>
+                  <option value="">
+                    Sélectionner un site
+                  </option>
                   <option v-for="site in sites" :key="site.id" :value="site.id">
                     {{ site.name }}
                   </option>
@@ -46,7 +54,9 @@
                   <span class="label-text">Type de machine</span>
                 </label>
                 <select v-model="newMachine.typeMachineId" class="select select-bordered" required>
-                  <option value="">Sélectionner un type</option>
+                  <option value="">
+                    Sélectionner un type
+                  </option>
                   <option v-for="type in machineTypes" :key="type.id" :value="type.id">
                     {{ type.name }} ({{ type.category }})
                   </option>
@@ -62,12 +72,14 @@
                   type="text"
                   placeholder="Ex: PRESS-001"
                   class="input input-bordered"
-                />
+                >
               </div>
             </div>
 
             <div v-if="selectedMachineType" class="p-4 bg-gray-50 rounded-lg space-y-2 text-sm">
-              <h4 class="font-semibold text-sm">Structure du type sélectionné :</h4>
+              <h4 class="font-semibold text-sm">
+                Structure du type sélectionné :
+              </h4>
               <div class="flex flex-wrap gap-3">
                 <span class="inline-flex items-center gap-2">
                   <span class="font-medium">Familles de composants :</span>
@@ -91,13 +103,15 @@
             </div>
 
             <div v-if="selectedMachineType?.componentRequirements?.length" class="space-y-4">
-              <h4 class="text-sm font-semibold">Sélection des composants</h4>
+              <h4 class="text-sm font-semibold">
+                Sélection des composants
+              </h4>
 
               <div
                 v-for="requirement in selectedMachineType.componentRequirements"
+                :id="`component-group-${requirement.id}`"
                 :key="requirement.id"
                 class="border border-base-200 rounded-lg p-4 space-y-3"
-                :id="`component-group-${requirement.id}`"
               >
                 <div class="flex flex-wrap items-start justify-between gap-3">
                   <div>
@@ -115,8 +129,8 @@
                     <button
                       type="button"
                       class="btn btn-sm btn-outline"
-                      @click="addComponentSelectionEntry(requirement)"
                       :disabled="requirement.maxCount !== null && getComponentRequirementEntries(requirement.id).length >= requirement.maxCount"
+                      @click="addComponentSelectionEntry(requirement)"
                     >
                       <IconLucidePlus class="w-4 h-4 mr-2" aria-hidden="true" />
                       Ajouter
@@ -148,7 +162,7 @@
                         class="radio radio-xs"
                         :checked="entry.mode === 'model'"
                         @change="setComponentSelectionMode(requirement.id, entryIndex, 'model')"
-                      />
+                      >
                       Modèle existant
                     </label>
                     <label class="inline-flex items-center gap-1">
@@ -156,9 +170,9 @@
                         type="radio"
                         class="radio radio-xs"
                         :checked="entry.mode === 'manual'"
-                        @change="setComponentSelectionMode(requirement.id, entryIndex, 'manual')"
                         :disabled="!requirement.allowNewModels"
-                      />
+                        @change="setComponentSelectionMode(requirement.id, entryIndex, 'manual')"
+                      >
                       Définir manuellement
                     </label>
                   </div>
@@ -173,7 +187,9 @@
                         :value="entry.componentModelId || ''"
                         @change="updateComponentSelectionEntry(requirement.id, entryIndex, { componentModelId: $event.target.value || '' })"
                       >
-                        <option value="">Sélectionner un modèle</option>
+                        <option value="">
+                          Sélectionner un modèle
+                        </option>
                         <option
                           v-for="model in getComponentModelsForType(requirement.typeComposantId)"
                           :key="model.id"
@@ -182,7 +198,9 @@
                           {{ model.name }}
                         </option>
                       </select>
-                      <p v-if="loadingComponentModels" class="text-[10px] text-gray-500 mt-1">Chargement des modèles...</p>
+                      <p v-if="loadingComponentModels" class="text-[10px] text-gray-500 mt-1">
+                        Chargement des modèles...
+                      </p>
                       <p
                         v-else-if="getComponentModelsForType(requirement.typeComposantId).length === 0"
                         class="text-[10px] text-gray-500 mt-1"
@@ -203,7 +221,7 @@
                         :value="entry.name"
                         placeholder="Nom du composant"
                         @input="updateComponentSelectionEntry(requirement.id, entryIndex, { name: $event.target.value })"
-                      />
+                      >
                     </div>
                     <div class="form-control">
                       <label class="label">
@@ -214,7 +232,7 @@
                         class="input input-bordered input-sm"
                         placeholder="(Non géré pour l'instant)"
                         disabled
-                      />
+                      >
                     </div>
                   </div>
 
@@ -231,13 +249,15 @@
               </div>
             </div>
             <div v-if="selectedMachineType?.pieceRequirements?.length" class="space-y-4">
-              <h4 class="text-sm font-semibold">Sélection des pièces principales</h4>
+              <h4 class="text-sm font-semibold">
+                Sélection des pièces principales
+              </h4>
 
               <div
                 v-for="requirement in selectedMachineType.pieceRequirements"
+                :id="`piece-group-${requirement.id}`"
                 :key="requirement.id"
                 class="border border-base-200 rounded-lg p-4 space-y-3"
-                :id="`piece-group-${requirement.id}`"
               >
                 <div class="flex flex-wrap items-start justify-between gap-3">
                   <div>
@@ -255,8 +275,8 @@
                     <button
                       type="button"
                       class="btn btn-sm btn-outline"
-                      @click="addPieceSelectionEntry(requirement)"
                       :disabled="requirement.maxCount !== null && getPieceRequirementEntries(requirement.id).length >= requirement.maxCount"
+                      @click="addPieceSelectionEntry(requirement)"
                     >
                       <IconLucidePlus class="w-4 h-4 mr-2" aria-hidden="true" />
                       Ajouter
@@ -291,7 +311,9 @@
                         :value="entry.pieceModelId || ''"
                         @change="updatePieceSelectionEntry(requirement.id, entryIndex, { pieceModelId: $event.target.value || '' })"
                       >
-                        <option value="">Sélectionner un modèle</option>
+                        <option value="">
+                          Sélectionner un modèle
+                        </option>
                         <option
                           v-for="model in getPieceModelsForType(requirement.typePieceId)"
                           :key="model.id"
@@ -300,7 +322,9 @@
                           {{ model.name }}
                         </option>
                       </select>
-                      <p v-if="loadingPieceModels" class="text-[10px] text-gray-500 mt-1">Chargement des modèles...</p>
+                      <p v-if="loadingPieceModels" class="text-[10px] text-gray-500 mt-1">
+                        Chargement des modèles...
+                      </p>
                       <p
                         v-else-if="getPieceModelsForType(requirement.typePieceId).length === 0"
                         class="text-[10px] text-gray-500 mt-1"
@@ -363,7 +387,9 @@
                   </div>
 
                   <div v-if="machinePreview.base.issues.length" class="rounded-md bg-warning/10 border border-warning/30 p-3 text-xs text-warning">
-                    <p class="font-medium mb-1">Informations générales incomplètes :</p>
+                    <p class="font-medium mb-1">
+                      Informations générales incomplètes :
+                    </p>
                     <ul class="space-y-1">
                       <li v-for="issue in machinePreview.base.issues" :key="issue.message">
                         <button
@@ -379,7 +405,9 @@
                   </div>
 
                   <div v-if="machinePreview.componentGroups.length" class="space-y-3">
-                    <h5 class="text-xs font-semibold uppercase tracking-wide text-gray-500">Composants hérités</h5>
+                    <h5 class="text-xs font-semibold uppercase tracking-wide text-gray-500">
+                      Composants hérités
+                    </h5>
                     <div
                       v-for="group in machinePreview.componentGroups"
                       :key="group.id"
@@ -387,7 +415,9 @@
                     >
                       <div class="flex flex-wrap items-start justify-between gap-2">
                         <div>
-                          <p class="text-sm font-semibold">{{ group.label }}</p>
+                          <p class="text-sm font-semibold">
+                            {{ group.label }}
+                          </p>
                           <p class="text-xs text-gray-500">
                             Type : {{ group.typeName }} · Min {{ group.min }} ·
                             {{ group.max !== null ? `Max ${group.max}` : 'Max ∞' }}
@@ -400,7 +430,9 @@
 
                       <div v-if="group.issues.length" class="rounded bg-warning/10 border border-warning/30 p-2 text-[11px] text-warning">
                         <ul class="list-disc pl-4 space-y-1">
-                          <li v-for="issue in group.issues" :key="issue.message">{{ issue.message }}</li>
+                          <li v-for="issue in group.issues" :key="issue.message">
+                            {{ issue.message }}
+                          </li>
                         </ul>
                       </div>
 
@@ -420,7 +452,9 @@
                             <p class="text-sm font-medium" :class="entry.status === 'complete' ? 'text-gray-900' : 'text-gray-500'">
                               {{ entry.title }}
                             </p>
-                            <p v-if="entry.subtitle" class="text-xs text-gray-500">{{ entry.subtitle }}</p>
+                            <p v-if="entry.subtitle" class="text-xs text-gray-500">
+                              {{ entry.subtitle }}
+                            </p>
                           </div>
                         </li>
                       </ul>
@@ -432,7 +466,9 @@
                   </div>
 
                   <div v-if="machinePreview.pieceGroups.length" class="space-y-3">
-                    <h5 class="text-xs font-semibold uppercase tracking-wide text-gray-500">Pièces associées</h5>
+                    <h5 class="text-xs font-semibold uppercase tracking-wide text-gray-500">
+                      Pièces associées
+                    </h5>
                     <div
                       v-for="group in machinePreview.pieceGroups"
                       :key="group.id"
@@ -440,7 +476,9 @@
                     >
                       <div class="flex flex-wrap items-start justify-between gap-2">
                         <div>
-                          <p class="text-sm font-semibold">{{ group.label }}</p>
+                          <p class="text-sm font-semibold">
+                            {{ group.label }}
+                          </p>
                           <p class="text-xs text-gray-500">
                             Type : {{ group.typeName }} · Min {{ group.min }} ·
                             {{ group.max !== null ? `Max ${group.max}` : 'Max ∞' }}
@@ -453,7 +491,9 @@
 
                       <div v-if="group.issues.length" class="rounded bg-warning/10 border border-warning/30 p-2 text-[11px] text-warning">
                         <ul class="list-disc pl-4 space-y-1">
-                          <li v-for="issue in group.issues" :key="issue.message">{{ issue.message }}</li>
+                          <li v-for="issue in group.issues" :key="issue.message">
+                            {{ issue.message }}
+                          </li>
                         </ul>
                       </div>
 
@@ -473,7 +513,9 @@
                             <p class="text-sm font-medium" :class="entry.status === 'complete' ? 'text-gray-900' : 'text-gray-500'">
                               {{ entry.title }}
                             </p>
-                            <p v-if="entry.subtitle" class="text-xs text-gray-500">{{ entry.subtitle }}</p>
+                            <p v-if="entry.subtitle" class="text-xs text-gray-500">
+                              {{ entry.subtitle }}
+                            </p>
                           </div>
                           <span v-if="entry.mode === 'manual'" class="badge badge-ghost badge-xs">manuel</span>
                         </li>
@@ -492,7 +534,9 @@
                     <div class="flex items-start gap-2">
                       <IconLucideAlertTriangle class="w-4 h-4 mt-0.5" aria-hidden="true" />
                       <div class="space-y-1">
-                        <p class="font-medium">Points à vérifier avant la création :</p>
+                        <p class="font-medium">
+                          Points à vérifier avant la création :
+                        </p>
                         <ul class="space-y-1">
                           <li v-for="issue in machinePreview.issues" :key="`${issue.scope}-${issue.message}`">
                             <button
@@ -522,7 +566,9 @@
             </div>
 
             <div class="flex justify-end gap-3 pt-4 border-t border-base-200">
-              <NuxtLink to="/machines" class="btn btn-outline">Annuler</NuxtLink>
+              <NuxtLink to="/machines" class="btn btn-outline">
+                Annuler
+              </NuxtLink>
               <button
                 type="submit"
                 class="btn btn-primary"
@@ -539,7 +585,9 @@
 
     <div v-if="createComponentModelModal.open" class="modal modal-open">
       <div class="modal-box max-w-md">
-        <h3 class="font-bold text-lg mb-1">Nouveau modèle de composant</h3>
+        <h3 class="font-bold text-lg mb-1">
+          Nouveau modèle de composant
+        </h3>
         <p class="text-sm text-gray-500 mb-4">
           {{ createComponentModelModal.requirement?.label || createComponentModelModal.requirement?.typeComposant?.name || 'Famille de composants' }}
         </p>
@@ -556,7 +604,7 @@
               class="input input-bordered input-sm"
               placeholder="Ex: Sangle 20 m"
               required
-            />
+            >
           </div>
 
           <div class="form-control">
@@ -569,11 +617,13 @@
               class="textarea textarea-bordered textarea-sm"
               rows="3"
               placeholder="Notes sur ce modèle"
-            ></textarea>
+            />
           </div>
 
           <div class="modal-action">
-            <button type="button" class="btn btn-outline" @click="closeCreateComponentModelModal">Annuler</button>
+            <button type="button" class="btn btn-outline" @click="closeCreateComponentModelModal">
+              Annuler
+            </button>
             <button type="submit" class="btn btn-primary" :class="{ loading: createComponentModelModal.submitting }">
               Créer
             </button>
@@ -584,7 +634,9 @@
 
     <div v-if="createPieceModelModal.open" class="modal modal-open">
       <div class="modal-box max-w-md">
-        <h3 class="font-bold text-lg mb-1">Nouveau modèle de pièce</h3>
+        <h3 class="font-bold text-lg mb-1">
+          Nouveau modèle de pièce
+        </h3>
         <p class="text-sm text-gray-500 mb-4">
           {{ createPieceModelModal.requirement?.label || createPieceModelModal.requirement?.typePiece?.name || 'Groupe de pièces' }}
         </p>
@@ -601,7 +653,7 @@
               class="input input-bordered input-sm"
               placeholder="Ex: Vis standard"
               required
-            />
+            >
           </div>
 
           <div class="form-control">
@@ -614,11 +666,13 @@
               class="textarea textarea-bordered textarea-sm"
               rows="3"
               placeholder="Notes sur ce modèle"
-            ></textarea>
+            />
           </div>
 
           <div class="modal-action">
-            <button type="button" class="btn btn-outline" @click="closeCreatePieceModelModal">Annuler</button>
+            <button type="button" class="btn btn-outline" @click="closeCreatePieceModelModal">
+              Annuler
+            </button>
             <button type="submit" class="btn btn-primary" :class="{ loading: createPieceModelModal.submitting }">
               Créer
             </button>
@@ -657,7 +711,7 @@ const newMachine = reactive({
   name: '',
   siteId: '',
   typeMachineId: '',
-  reference: '',
+  reference: ''
 })
 
 const componentRequirementSelections = reactive({})
@@ -670,7 +724,7 @@ const createComponentModelModal = reactive({
   entryIndex: null,
   name: '',
   description: '',
-  submitting: false,
+  submitting: false
 })
 
 const createPieceModelModal = reactive({
@@ -680,14 +734,14 @@ const createPieceModelModal = reactive({
   entryIndex: null,
   name: '',
   description: '',
-  submitting: false,
+  submitting: false
 })
 
 const selectedMachineType = computed(() => {
   if (!newMachine.typeMachineId) {
     return null
   }
-  return machineTypes.value.find((type) => type.id === newMachine.typeMachineId) || null
+  return machineTypes.value.find(type => type.id === newMachine.typeMachineId) || null
 })
 
 const getStatusBadgeClass = (status) => {
@@ -700,8 +754,8 @@ const getStatusBadgeClass = (status) => {
   return 'badge-error'
 }
 
-const getComponentRequirementEntries = (requirementId) => componentRequirementSelections[requirementId] || []
-const getPieceRequirementEntries = (requirementId) => pieceRequirementSelections[requirementId] || []
+const getComponentRequirementEntries = requirementId => componentRequirementSelections[requirementId] || []
+const getPieceRequirementEntries = requirementId => pieceRequirementSelections[requirementId] || []
 
 const machinePreview = computed(() => {
   const type = selectedMachineType.value
@@ -711,7 +765,7 @@ const machinePreview = computed(() => {
 
   const trimmedName = (newMachine.name || '').trim()
   const currentSite = newMachine.siteId
-    ? sites.value.find((site) => site.id === newMachine.siteId) || null
+    ? sites.value.find(site => site.id === newMachine.siteId) || null
     : null
   const trimmedReference = (newMachine.reference || '').trim()
 
@@ -720,26 +774,26 @@ const machinePreview = computed(() => {
       key: 'name',
       label: 'Nom',
       display: trimmedName || 'À renseigner',
-      status: trimmedName ? 'complete' : 'missing',
+      status: trimmedName ? 'complete' : 'missing'
     },
     {
       key: 'site',
       label: 'Site',
       display: currentSite?.name || 'Sélectionner un site',
-      status: currentSite ? 'complete' : 'missing',
+      status: currentSite ? 'complete' : 'missing'
     },
     {
       key: 'type',
       label: 'Type sélectionné',
       display: type.name,
-      status: 'complete',
+      status: 'complete'
     },
     {
       key: 'reference',
       label: 'Référence',
       display: trimmedReference || 'Non renseignée',
-      status: trimmedReference ? 'complete' : 'optional',
-    },
+      status: trimmedReference ? 'complete' : 'optional'
+    }
   ]
 
   const baseIssues = []
@@ -749,20 +803,20 @@ const machinePreview = computed(() => {
   if (!currentSite) {
     baseIssues.push({ message: "Sélectionner un site d'affectation.", kind: 'error', anchor: 'machine-field-site' })
   }
-  const baseStatus = baseIssues.some((issue) => issue.kind === 'error') ? 'error' : 'ready'
+  const baseStatus = baseIssues.some(issue => issue.kind === 'error') ? 'error' : 'ready'
 
   const resolveComponentModel = (requirement, modelId) => {
     if (!modelId) {
       return null
     }
-    return (getComponentModelsForType(requirement.typeComposantId) || []).find((model) => model.id === modelId) || null
+    return (getComponentModelsForType(requirement.typeComposantId) || []).find(model => model.id === modelId) || null
   }
 
   const resolvePieceModel = (requirement, modelId) => {
     if (!modelId) {
       return null
     }
-    return (getPieceModelsForType(requirement.typePieceId) || []).find((model) => model.id === modelId) || null
+    return (getPieceModelsForType(requirement.typePieceId) || []).find(model => model.id === modelId) || null
   }
 
   const componentGroups = (type.componentRequirements || []).map((requirement) => {
@@ -776,7 +830,7 @@ const machinePreview = computed(() => {
           mode: 'model',
           status: model ? 'complete' : 'pending',
           title: model ? model.name : 'Sélectionner un modèle',
-          subtitle: model?.description || null,
+          subtitle: model?.description || null
         }
       }
       const manualName = (entry.name || '').trim()
@@ -785,13 +839,13 @@ const machinePreview = computed(() => {
         mode: 'manual',
         status: manualName ? 'complete' : 'pending',
         title: manualName || 'Nom à renseigner',
-        subtitle: manualName ? null : null,
+        subtitle: manualName ? null : null
       }
     })
 
     const min = requirement.minCount ?? (requirement.required ? 1 : 0)
     const max = requirement.maxCount ?? null
-    const completed = normalizedEntries.filter((entry) => entry.status === 'complete').length
+    const completed = normalizedEntries.filter(entry => entry.status === 'complete').length
     const issues = []
 
     if (completed < min) {
@@ -802,15 +856,15 @@ const machinePreview = computed(() => {
       issues.push({ message: `Maximum ${max} dépassé`, kind: 'error', anchor: `component-group-${requirement.id}` })
     }
 
-    if (!requirement.allowNewModels && normalizedEntries.some((entry) => entry.mode === 'manual' && entry.status === 'complete')) {
+    if (!requirement.allowNewModels && normalizedEntries.some(entry => entry.mode === 'manual' && entry.status === 'complete')) {
       issues.push({ message: "Ce groupe n'autorise que les modèles existants.", kind: 'error', anchor: `component-group-${requirement.id}` })
     }
 
-    if (normalizedEntries.some((entry) => entry.status !== 'complete')) {
+    if (normalizedEntries.some(entry => entry.status !== 'complete')) {
       issues.push({ message: 'Compléter les sélections restantes.', kind: 'warning', anchor: `component-group-${requirement.id}` })
     }
 
-    const status = issues.some((issue) => issue.kind === 'error')
+    const status = issues.some(issue => issue.kind === 'error')
       ? 'error'
       : issues.length > 0
         ? 'warning'
@@ -826,7 +880,7 @@ const machinePreview = computed(() => {
       issues,
       completed,
       total: normalizedEntries.length,
-      status,
+      status
     }
   })
 
@@ -839,13 +893,13 @@ const machinePreview = computed(() => {
         key: `${requirement.id}-${index}`,
         status: model ? 'complete' : 'pending',
         title: model ? model.name : 'Sélectionner un modèle',
-        subtitle: model?.description || null,
+        subtitle: model?.description || null
       }
     })
 
     const min = requirement.minCount ?? (requirement.required ? 1 : 0)
     const max = requirement.maxCount ?? null
-    const completed = normalizedEntries.filter((entry) => entry.status === 'complete').length
+    const completed = normalizedEntries.filter(entry => entry.status === 'complete').length
     const issues = []
 
     if (completed < min) {
@@ -856,11 +910,11 @@ const machinePreview = computed(() => {
       issues.push({ message: `Maximum ${max} dépassé`, kind: 'error', anchor: `piece-group-${requirement.id}` })
     }
 
-    if (normalizedEntries.some((entry) => entry.status !== 'complete')) {
+    if (normalizedEntries.some(entry => entry.status !== 'complete')) {
       issues.push({ message: 'Compléter les sélections restantes.', kind: 'warning', anchor: `piece-group-${requirement.id}` })
     }
 
-    const status = issues.some((issue) => issue.kind === 'error')
+    const status = issues.some(issue => issue.kind === 'error')
       ? 'error'
       : issues.length > 0
         ? 'warning'
@@ -876,20 +930,20 @@ const machinePreview = computed(() => {
       issues,
       completed,
       total: normalizedEntries.length,
-      status,
+      status
     }
   })
 
   const aggregatedIssues = [
-    ...baseIssues.map((issue) => ({ ...issue, scope: 'Informations générales' })),
-    ...componentGroups.flatMap((group) => group.issues.map((issue) => ({ ...issue, scope: group.label }))),
-    ...pieceGroups.flatMap((group) => group.issues.map((issue) => ({ ...issue, scope: group.label }))),
+    ...baseIssues.map(issue => ({ ...issue, scope: 'Informations générales' })),
+    ...componentGroups.flatMap(group => group.issues.map(issue => ({ ...issue, scope: group.label }))),
+    ...pieceGroups.flatMap(group => group.issues.map(issue => ({ ...issue, scope: group.label })))
   ]
 
   const statuses = [
     baseStatus,
-    ...componentGroups.map((group) => group.status),
-    ...pieceGroups.map((group) => group.status),
+    ...componentGroups.map(group => group.status),
+    ...pieceGroups.map(group => group.status)
   ]
 
   const overallStatus = statuses.includes('error')
@@ -902,7 +956,7 @@ const machinePreview = computed(() => {
     base: {
       fields: baseFields,
       issues: baseIssues,
-      status: baseStatus,
+      status: baseStatus
     },
     componentGroups,
     pieceGroups,
@@ -910,11 +964,11 @@ const machinePreview = computed(() => {
       name: type.name,
       category: type.category || null,
       hasStructuredDefinition:
-        (type.componentRequirements?.length || 0) > 0 || (type.pieceRequirements?.length || 0) > 0,
+        (type.componentRequirements?.length || 0) > 0 || (type.pieceRequirements?.length || 0) > 0
     },
     status: overallStatus,
     ready: overallStatus === 'ready',
-    issues: aggregatedIssues,
+    issues: aggregatedIssues
   }
 })
 
@@ -922,7 +976,7 @@ const blockingPreviewIssues = computed(() => {
   if (!machinePreview.value) {
     return []
   }
-  return machinePreview.value.issues.filter((issue) => issue.kind === 'error')
+  return machinePreview.value.issues.filter(issue => issue.kind === 'error')
 })
 
 const canCreateMachine = computed(() => {
@@ -943,9 +997,9 @@ const scrollToAnchor = (anchor) => {
     return
   }
   target.scrollIntoView({ behavior: 'smooth', block: 'center' })
-  highlightClasses.forEach((cls) => target.classList.add(cls))
+  highlightClasses.forEach(cls => target.classList.add(cls))
   window.setTimeout(() => {
-    highlightClasses.forEach((cls) => target.classList.remove(cls))
+    highlightClasses.forEach(cls => target.classList.remove(cls))
   }, 1500)
 }
 
@@ -968,11 +1022,11 @@ const clearRequirementSelections = () => {
 const createComponentSelectionEntry = () => ({
   mode: 'model',
   componentModelId: '',
-  name: '',
+  name: ''
 })
 
 const createPieceSelectionEntry = () => ({
-  pieceModelId: '',
+  pieceModelId: ''
 })
 
 const addComponentSelectionEntry = (requirement) => {
@@ -993,7 +1047,7 @@ const removeComponentSelectionEntry = (requirementId, index) => {
 const setComponentSelectionMode = (requirementId, index, mode) => {
   const entries = getComponentRequirementEntries(requirementId)
   componentRequirementSelections[requirementId] = entries.map((entry, i) => {
-    if (i !== index) return entry
+    if (i !== index) { return entry }
     if (mode === 'model') {
       return { ...entry, mode: 'model', componentModelId: entry.componentModelId || '', name: '' }
     }
@@ -1055,7 +1109,7 @@ const validateRequirementSelections = (type) => {
       errors.push(`Le groupe "${requirement.label || requirement.typeComposant?.name || 'Composants'}" ne peut dépasser ${max} élément(s).`)
     }
 
-    if (!requirement.allowNewModels && usableEntries.some((entry) => entry.mode === 'manual')) {
+    if (!requirement.allowNewModels && usableEntries.some(entry => entry.mode === 'manual')) {
       errors.push(`Le groupe "${requirement.label || requirement.typeComposant?.name || 'Composants'}" n'autorise que les modèles existants.`)
     }
 
@@ -1063,14 +1117,14 @@ const validateRequirementSelections = (type) => {
       if (entry.mode === 'model') {
         componentSelectionsPayload.push({
           requirementId: requirement.id,
-          componentModelId: entry.componentModelId,
+          componentModelId: entry.componentModelId
         })
       } else {
         componentSelectionsPayload.push({
           requirementId: requirement.id,
           definition: {
-            name: entry.name.trim(),
-          },
+            name: entry.name.trim()
+          }
         })
       }
     })
@@ -1078,7 +1132,7 @@ const validateRequirementSelections = (type) => {
 
   for (const requirement of type.pieceRequirements || []) {
     const entries = getPieceRequirementEntries(requirement.id)
-    const usableEntries = entries.filter((entry) => !!entry.pieceModelId)
+    const usableEntries = entries.filter(entry => !!entry.pieceModelId)
 
     const min = requirement.minCount ?? (requirement.required ? 1 : 0)
     const max = requirement.maxCount ?? null
@@ -1094,7 +1148,7 @@ const validateRequirementSelections = (type) => {
     usableEntries.forEach((entry) => {
       pieceSelectionsPayload.push({
         requirementId: requirement.id,
-        pieceModelId: entry.pieceModelId,
+        pieceModelId: entry.pieceModelId
       })
     })
   }
@@ -1106,7 +1160,7 @@ const validateRequirementSelections = (type) => {
   return {
     valid: true,
     componentSelections: componentSelectionsPayload,
-    pieceSelections: pieceSelectionsPayload,
+    pieceSelections: pieceSelectionsPayload
   }
 }
 
@@ -1139,17 +1193,17 @@ const submitCreateComponentModel = async () => {
       name: createComponentModelModal.name.trim(),
       description: createComponentModelModal.description.trim() || undefined,
       typeComposantId: createComponentModelModal.requirement.typeComposantId,
-      structure: {},
+      structure: {}
     }
     const result = await createComponentModel(payload)
     if (result.success) {
       await loadComponentModels(createComponentModelModal.requirement.typeComposantId)
       const entries = getComponentRequirementEntries(createComponentModelModal.requirement.id)
-      const targetIndex = entries.findIndex((entry) => entry.mode === 'model' && !entry.componentModelId)
+      const targetIndex = entries.findIndex(entry => entry.mode === 'model' && !entry.componentModelId)
       if (targetIndex !== -1) {
         updateComponentSelectionEntry(createComponentModelModal.requirement.id, targetIndex, {
           mode: 'model',
-          componentModelId: result.data.id,
+          componentModelId: result.data.id
         })
       } else {
         addComponentSelectionEntry(createComponentModelModal.requirement)
@@ -1158,8 +1212,8 @@ const submitCreateComponentModel = async () => {
           getComponentRequirementEntries(createComponentModelModal.requirement.id).length - 1,
           {
             mode: 'model',
-            componentModelId: result.data.id,
-          },
+            componentModelId: result.data.id
+          }
         )
       }
       toast.showSuccess(`Modèle "${result.data.name}" créé`)
@@ -1201,16 +1255,16 @@ const submitCreatePieceModel = async () => {
       name: createPieceModelModal.name.trim(),
       description: createPieceModelModal.description.trim() || undefined,
       typePieceId: createPieceModelModal.requirement.typePieceId,
-      structure: {},
+      structure: {}
     }
     const result = await createPieceModel(payload)
     if (result.success) {
       await loadPieceModels(createPieceModelModal.requirement.typePieceId)
       const entries = getPieceRequirementEntries(createPieceModelModal.requirement.id)
-      const targetIndex = entries.findIndex((entry) => !entry.pieceModelId)
+      const targetIndex = entries.findIndex(entry => !entry.pieceModelId)
       if (targetIndex !== -1) {
         updatePieceSelectionEntry(createPieceModelModal.requirement.id, targetIndex, {
-          pieceModelId: result.data.id,
+          pieceModelId: result.data.id
         })
       } else {
         addPieceSelectionEntry(createPieceModelModal.requirement)
@@ -1218,8 +1272,8 @@ const submitCreatePieceModel = async () => {
           createPieceModelModal.requirement.id,
           getPieceRequirementEntries(createPieceModelModal.requirement.id).length - 1,
           {
-            pieceModelId: result.data.id,
-          },
+            pieceModelId: result.data.id
+          }
         )
       }
       toast.showSuccess(`Modèle "${result.data.name}" créé`)
@@ -1262,8 +1316,8 @@ const initializeRequirementSelections = async (type) => {
   })
 
   await Promise.all([
-    ...Array.from(componentTypeIds).map((id) => loadComponentModels(id)),
-    ...Array.from(pieceTypeIds).map((id) => loadPieceModels(id)),
+    ...Array.from(componentTypeIds).map(id => loadComponentModels(id)),
+    ...Array.from(pieceTypeIds).map(id => loadPieceModels(id))
   ])
 }
 
@@ -1287,7 +1341,7 @@ const finalizeMachineCreation = async () => {
       name: newMachine.name,
       siteId: newMachine.siteId,
       reference: newMachine.reference,
-      typeMachineId: type.id,
+      typeMachineId: type.id
     }
 
     const hasRequirements = (type.componentRequirements?.length || 0) > 0 || (type.pieceRequirements?.length || 0) > 0
@@ -1310,9 +1364,9 @@ const finalizeMachineCreation = async () => {
       ...(hasRequirements
         ? {
             componentSelections,
-            pieceSelections,
+            pieceSelections
           }
-        : {}),
+        : {})
     }
 
     const result = hasRequirements
@@ -1344,7 +1398,7 @@ watch(
       return
     }
 
-    const type = machineTypes.value.find((item) => item.id === typeId)
+    const type = machineTypes.value.find(item => item.id === typeId)
     if (!type) {
       return
     }
@@ -1356,7 +1410,7 @@ watch(
 onMounted(async () => {
   await Promise.all([
     loadSites(),
-    loadMachineTypes(),
+    loadMachineTypes()
   ])
 })
 </script>

app/pages/models/index.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="min-h-[60vh] flex flex-col items-center justify-center gap-6 text-center">
     <div class="space-y-2">
-      <h1 class="text-3xl font-semibold">Gestion des catalogues</h1>
+      <h1 class="text-3xl font-semibold">
+        Gestion des catalogues
+      </h1>
       <p class="text-sm text-gray-500">
         Administrez les modèles de composants et de pièces utilisés lors de la configuration des machines.
       </p>

app/pages/pieces-catalog.vue

@@ -2,12 +2,20 @@
   <main class="container mx-auto px-6 py-8 space-y-8">
     <header class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
       <div class="space-y-1">
-        <h1 class="text-3xl font-bold text-gray-800">Catalogue de pièce</h1>
-        <p class="text-sm text-gray-500">Gérez les modèles disponibles pour chaque groupe de pièces.</p>
+        <h1 class="text-3xl font-bold text-gray-800">
+          Catalogue de pièce
+        </h1>
+        <p class="text-sm text-gray-500">
+          Gérez les modèles disponibles pour chaque groupe de pièces.
+        </p>
       </div>
       <div class="tabs tabs-boxed">
-        <NuxtLink to="/component-catalog" class="tab">Composants</NuxtLink>
-        <NuxtLink to="/pieces-catalog" class="tab tab-active">Pièces</NuxtLink>
+        <NuxtLink to="/component-catalog" class="tab">
+          Composants
+        </NuxtLink>
+        <NuxtLink to="/pieces-catalog" class="tab tab-active">
+          Pièces
+        </NuxtLink>
       </div>
     </header>
 
@@ -32,7 +40,7 @@
                   type="search"
                   placeholder="Rechercher un modèle..."
                   class="input input-bordered input-sm"
-                />
+                >
               </label>
               <span class="text-xs text-gray-500">{{ filteredModels.length }} modèle(s)</span>
             </div>
@@ -43,7 +51,7 @@
           </div>
 
           <div v-if="loadingPieceModels" class="flex justify-center py-16">
-            <span class="loading loading-spinner loading-lg"></span>
+            <span class="loading loading-spinner loading-lg" />
           </div>
 
           <div v-else-if="filteredModels.length === 0" class="py-16 text-center text-sm text-gray-500">
@@ -55,10 +63,16 @@
               <thead>
                 <tr class="text-sm text-gray-500">
                   <th>Nom</th>
-                  <th class="hidden md:table-cell">Description</th>
+                  <th class="hidden md:table-cell">
+                    Description
+                  </th>
                   <th>Type</th>
-                  <th class="hidden lg:table-cell">Modifié</th>
-                  <th class="text-right">Actions</th>
+                  <th class="hidden lg:table-cell">
+                    Modifié
+                  </th>
+                  <th class="text-right">
+                    Actions
+                  </th>
                 </tr>
               </thead>
               <tbody>
@@ -75,9 +89,13 @@
                       <span class="font-medium">{{ model.name }}</span>
                     </div>
                   </td>
-                  <td class="hidden md:table-cell">{{ model.description || '—' }}</td>
+                  <td class="hidden md:table-cell">
+                    {{ model.description || '—' }}
+                  </td>
                   <td>{{ model.typePiece?.name || 'Non défini' }}</td>
-                  <td class="hidden lg:table-cell text-xs text-gray-500">{{ formatFrenchDate(model.updatedAt || model.createdAt) }}</td>
+                  <td class="hidden lg:table-cell text-xs text-gray-500">
+                    {{ formatFrenchDate(model.updatedAt || model.createdAt) }}
+                  </td>
                   <td class="text-right space-x-2">
                     <button type="button" class="btn btn-sm btn-outline" @click="startEdit(model)">
                       Éditer
@@ -118,7 +136,7 @@
                 class="input input-bordered input-sm"
                 placeholder="Nom du modèle"
                 required
-              />
+              >
             </div>
             <div class="form-control">
               <label class="label"><span class="label-text">Description</span></label>
@@ -127,7 +145,7 @@
                 class="textarea textarea-bordered textarea-sm"
                 rows="3"
                 placeholder="Notes optionnelles"
-              ></textarea>
+              />
             </div>
             <div class="form-control">
               <label class="label"><span class="label-text">Type de pièce</span></label>
@@ -136,14 +154,18 @@
                 class="select select-bordered select-sm"
                 required
               >
-                <option value="" disabled>Sélectionner un type</option>
+                <option value="" disabled>
+                  Sélectionner un type
+                </option>
                 <option v-for="type in pieceTypes" :key="type.id" :value="type.id">
                   {{ type.name }}
                 </option>
               </select>
             </div>
 
-            <div class="divider my-0">Structure</div>
+            <div class="divider my-0">
+              Structure
+            </div>
             <PieceModelStructureEditor v-model="form.data.structure" />
 
             <div class="rounded-lg border border-base-200 bg-base-200/60 p-3 text-xs text-gray-500">
@@ -181,7 +203,7 @@ const {
   updatePieceModel,
   deletePieceModel,
   loadingPieceModels,
-  getPieceModelsForType,
+  getPieceModelsForType
 } = usePieceModels()
 const { showError, showSuccess } = useToast()
 
@@ -206,15 +228,15 @@ const form = reactive({
     name: '',
     description: '',
     typePieceId: '',
-    structure: defaultStructure(),
-  },
+    structure: defaultStructure()
+  }
 })
 
 const ensureTypeSelected = () => {
-  if (form.data.typePieceId && pieceTypes.value.some((type) => type.id === form.data.typePieceId)) {
+  if (form.data.typePieceId && pieceTypes.value.some(type => type.id === form.data.typePieceId)) {
     return
   }
-  if (selectedType.value !== 'all' && pieceTypes.value.some((type) => type.id === selectedType.value)) {
+  if (selectedType.value !== 'all' && pieceTypes.value.some(type => type.id === selectedType.value)) {
     form.data.typePieceId = selectedType.value
     return
   }
@@ -228,7 +250,7 @@ const startCreate = () => {
     name: '',
     description: '',
     typePieceId: selectedType.value !== 'all' ? selectedType.value : '',
-    structure: defaultStructure(),
+    structure: defaultStructure()
   }
   ensureTypeSelected()
 }
@@ -240,7 +262,7 @@ const startEdit = (model) => {
     name: model.name,
     description: model.description || '',
     typePieceId: model.typePieceId || model.typePiece?.id || '',
-    structure: cloneStructure(model.structure || defaultStructure()),
+    structure: cloneStructure(model.structure || defaultStructure())
   }
 }
 
@@ -255,9 +277,9 @@ const filteredModels = computed(() => {
   const term = searchQuery.value.toLowerCase()
   return list.filter((model) => {
     return (
-      model.name?.toLowerCase().includes(term)
-      || model.description?.toLowerCase().includes(term)
-      || model.typePiece?.name?.toLowerCase().includes(term)
+      model.name?.toLowerCase().includes(term) ||
+      model.description?.toLowerCase().includes(term) ||
+      model.typePiece?.name?.toLowerCase().includes(term)
     )
   })
 })
@@ -284,7 +306,7 @@ const handleSubmit = async () => {
         name: form.data.name.trim(),
         description: form.data.description.trim() || undefined,
         typePieceId: form.data.typePieceId,
-        structure,
+        structure
       })
       if (!result.success) {
         showError(result.error || 'Impossible de créer le modèle')
@@ -296,7 +318,7 @@ const handleSubmit = async () => {
         name: form.data.name.trim(),
         description: form.data.description.trim() || undefined,
         typePieceId: form.data.typePieceId,
-        structure,
+        structure
       })
       if (!result.success) {
         showError(result.error || 'Impossible de mettre à jour le modèle')
@@ -314,7 +336,7 @@ const handleSubmit = async () => {
 
 const confirmDelete = async (model) => {
   const ok = confirm(`Supprimer le modèle "${model.name}" ?`)
-  if (!ok) return
+  if (!ok) { return }
   const result = await deletePieceModel(model.id)
   if (!result.success) {
     showError(result.error || 'Impossible de supprimer ce modèle')

app/pages/profiles/index.vue

@@ -3,26 +3,30 @@
     <div class="w-full max-w-2xl">
       <div class="card bg-base-100 shadow-2xl">
         <div class="card-body">
-          <h1 class="text-2xl font-bold mb-2">Choisir un profil</h1>
+          <h1 class="text-2xl font-bold mb-2">
+            Choisir un profil
+          </h1>
           <p class="text-sm text-base-content/70 mb-6">
             Sélectionnez votre profil pour accéder à l'application. La création et la gestion se font via le menu utilisateur.
           </p>
 
           <section class="space-y-4">
             <header class="flex items-center justify-between">
-              <h2 class="font-semibold">Profils disponibles</h2>
+              <h2 class="font-semibold">
+                Profils disponibles
+              </h2>
               <button
                 type="button"
                 class="btn btn-ghost btn-xs"
-                @click="refreshProfiles"
                 :disabled="loadingProfiles"
+                @click="refreshProfiles"
               >
-                <span v-if="loadingProfiles" class="loading loading-spinner loading-xs"></span>
+                <span v-if="loadingProfiles" class="loading loading-spinner loading-xs" />
                 <span v-else>Rafraîchir</span>
               </button>
             </header>
 
-            <div class="space-y-2 max-h-64 overflow-y-auto" v-if="profiles.length">
+            <div v-if="profiles.length" class="space-y-2 max-h-64 overflow-y-auto">
               <button
                 v-for="profile in profiles"
                 :key="profile.id"
@@ -34,10 +38,12 @@
                 <IconLucideChevronRight class="w-4 h-4" aria-hidden="true" />
               </button>
             </div>
-            <p v-else class="text-sm text-base-content/60">Aucun profil enregistré.</p>
+            <p v-else class="text-sm text-base-content/60">
+              Aucun profil enregistré.
+            </p>
           </section>
 
-          <footer class="mt-6 flex justify-between items-center" v-if="activeProfile">
+          <footer v-if="activeProfile" class="mt-6 flex justify-between items-center">
             <div class="text-sm text-base-content/70">
               Profil actuel :
               <span class="font-semibold">{{ activeProfile.firstName }} {{ activeProfile.lastName }}</span>
@@ -55,8 +61,7 @@
 <script setup>
 import { onMounted } from 'vue'
 import { useRouter } from 'vue-router'
-import { useProfiles } from '#imports'
-import { useProfileSession } from '#imports'
+import { useProfiles, useProfileSession } from '#imports'
 import IconLucideChevronRight from '~icons/lucide/chevron-right'
 
 const router = useRouter()

app/pages/profiles/manage.vue

@@ -3,32 +3,44 @@
     <div class="max-w-4xl mx-auto">
       <div class="flex items-center justify-between mb-6">
         <div>
-          <h1 class="text-2xl font-bold">Gestion des profils</h1>
-          <p class="text-sm text-base-content/70">Sélectionnez, créez ou supprimez des profils.</p>
+          <h1 class="text-2xl font-bold">
+            Gestion des profils
+          </h1>
+          <p class="text-sm text-base-content/70">
+            Sélectionnez, créez ou supprimez des profils.
+          </p>
         </div>
-        <NuxtLink to="/" class="btn btn-ghost btn-sm">Retour</NuxtLink>
+        <NuxtLink to="/" class="btn btn-ghost btn-sm">
+          Retour
+        </NuxtLink>
       </div>
 
       <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
         <section class="card bg-base-100 shadow-lg">
           <div class="card-body space-y-4">
             <header class="flex items-center justify-between">
-              <h2 class="card-title text-lg">Profils existants</h2>
-              <button type="button" class="btn btn-ghost btn-xs" @click="refresh" :disabled="loadingProfiles">
-                <span v-if="loadingProfiles" class="loading loading-spinner loading-xs"></span>
+              <h2 class="card-title text-lg">
+                Profils existants
+              </h2>
+              <button type="button" class="btn btn-ghost btn-xs" :disabled="loadingProfiles" @click="refresh">
+                <span v-if="loadingProfiles" class="loading loading-spinner loading-xs" />
                 <span v-else>Rafraîchir</span>
               </button>
             </header>
 
-            <div class="space-y-2 max-h-80 overflow-y-auto" v-if="profiles.length">
+            <div v-if="profiles.length" class="space-y-2 max-h-80 overflow-y-auto">
               <div
                 v-for="profile in profiles"
                 :key="profile.id"
                 class="flex items-center justify-between rounded-lg border border-base-200 bg-base-100 px-3 py-2"
               >
                 <div>
-                  <p class="font-medium">{{ profile.firstName }} {{ profile.lastName }}</p>
-                  <p class="text-xs text-base-content/60">ID : {{ profile.id }}</p>
+                  <p class="font-medium">
+                    {{ profile.firstName }} {{ profile.lastName }}
+                  </p>
+                  <p class="text-xs text-base-content/60">
+                    ID : {{ profile.id }}
+                  </p>
                 </div>
                 <div class="flex items-center gap-2">
                   <button
@@ -44,19 +56,23 @@
                     class="btn btn-error btn-sm"
                     @click="remove(profile.id)"
                   >
-                    <span v-if="deleting === profile.id" class="loading loading-spinner loading-xs"></span>
+                    <span v-if="deleting === profile.id" class="loading loading-spinner loading-xs" />
                     <span v-else>Supprimer</span>
                   </button>
                 </div>
               </div>
             </div>
-            <p v-else class="text-sm text-base-content/60">Aucun profil enregistré.</p>
+            <p v-else class="text-sm text-base-content/60">
+              Aucun profil enregistré.
+            </p>
           </div>
         </section>
 
         <section class="card bg-base-100 shadow-lg">
           <div class="card-body space-y-4">
-            <h2 class="card-title text-lg">Créer un profil</h2>
+            <h2 class="card-title text-lg">
+              Créer un profil
+            </h2>
             <form class="space-y-3" @submit.prevent="create">
               <div class="form-control">
                 <label class="label"><span class="label-text">Prénom</span></label>
@@ -66,7 +82,7 @@
                   class="input input-bordered"
                   placeholder="Prénom"
                   required
-                />
+                >
               </div>
               <div class="form-control">
                 <label class="label"><span class="label-text">Nom</span></label>
@@ -76,10 +92,10 @@
                   class="input input-bordered"
                   placeholder="Nom"
                   required
-                />
+                >
               </div>
               <button type="submit" class="btn btn-primary w-full" :disabled="creating">
-                <span v-if="creating" class="loading loading-spinner loading-sm"></span>
+                <span v-if="creating" class="loading loading-spinner loading-sm" />
                 <span v-else>Créer et activer</span>
               </button>
             </form>
@@ -87,10 +103,14 @@
         </section>
       </div>
 
-      <div class="mt-8 flex items-center justify-between bg-base-100 shadow-lg rounded-lg p-4" v-if="activeProfile">
+      <div v-if="activeProfile" class="mt-8 flex items-center justify-between bg-base-100 shadow-lg rounded-lg p-4">
         <div>
-          <p class="text-sm text-base-content/70">Profil actif :</p>
-          <p class="font-semibold text-base-content">{{ activeProfile.firstName }} {{ activeProfile.lastName }}</p>
+          <p class="text-sm text-base-content/70">
+            Profil actif :
+          </p>
+          <p class="font-semibold text-base-content">
+            {{ activeProfile.firstName }} {{ activeProfile.lastName }}
+          </p>
         </div>
         <button type="button" class="btn btn-outline" @click="handleLogout">
           Déconnexion
@@ -111,7 +131,7 @@ const { activeProfile, activateProfile, fetchCurrentProfile, logout } = useProfi
 
 const createForm = reactive({
   firstName: '',
-  lastName: '',
+  lastName: ''
 })
 
 const creating = ref(false)
@@ -136,7 +156,7 @@ const create = async () => {
   try {
     const profile = await createProfile({
       firstName: createForm.firstName,
-      lastName: createForm.lastName,
+      lastName: createForm.lastName
     })
     createForm.firstName = ''
     createForm.lastName = ''
@@ -150,7 +170,7 @@ const create = async () => {
 }
 
 const remove = async (profileId) => {
-  if (!confirm('Supprimer ce profil ?')) return
+  if (!confirm('Supprimer ce profil ?')) { return }
   deleting.value = profileId
   try {
     await deleteProfile(profileId)

app/pages/sites.vue

@@ -8,23 +8,29 @@
 
     <div class="my-8">
       <div class="flex justify-between items-center mb-6">
-        <h2 class="text-2xl font-bold">Sites</h2>
-        <button @click="openCreateSiteModal" class="btn btn-primary">
+        <h2 class="text-2xl font-bold">
+          Sites
+        </h2>
+        <button class="btn btn-primary" @click="openCreateSiteModal">
           <IconLucidePlus class="w-5 h-5 mr-2" aria-hidden="true" />
           Ajouter un site
         </button>
       </div>
 
       <div v-if="loading" class="flex justify-center items-center py-12">
-        <span class="loading loading-spinner loading-lg"></span>
+        <span class="loading loading-spinner loading-lg" />
       </div>
 
       <div v-else-if="sites.length === 0" class="text-center py-12">
         <div class="max-w-md mx-auto">
           <IconLucideMapPin class="w-16 h-16 mx-auto text-gray-400 mb-4" aria-hidden="true" />
-          <h3 class="text-lg font-medium text-gray-900 mb-2">Aucun site trouvé</h3>
-          <p class="text-gray-500 mb-4">Commencez par ajouter votre premier site.</p>
-          <button @click="openCreateSiteModal" class="btn btn-primary">
+          <h3 class="text-lg font-medium text-gray-900 mb-2">
+            Aucun site trouvé
+          </h3>
+          <p class="text-gray-500 mb-4">
+            Commencez par ajouter votre premier site.
+          </p>
+          <button class="btn btn-primary" @click="openCreateSiteModal">
             Ajouter un site
           </button>
         </div>

app/pages/type/[id].vue

@@ -1,10 +1,11 @@
 <template>
   <main class="container mx-auto px-6 py-8">
-
     <!-- Loading State -->
     <div v-if="loading" class="my-8 text-center">
-      <div class="loading loading-spinner loading-lg"></div>
-      <p class="mt-4 text-gray-600">Chargement du type...</p>
+      <div class="loading loading-spinner loading-lg" />
+      <p class="mt-4 text-gray-600">
+        Chargement du type...
+      </p>
     </div>
 
     <!-- Type Details -->
@@ -31,7 +32,9 @@
 
           <!-- Familles de composants -->
           <div v-if="componentRequirementCount > 0" class="mb-8 space-y-3">
-            <h3 class="text-lg font-semibold">Familles de composants</h3>
+            <h3 class="text-lg font-semibold">
+              Familles de composants
+            </h3>
             <div class="space-y-3">
               <div
                 v-for="requirement in type.componentRequirements"
@@ -61,7 +64,9 @@
 
           <!-- Groupes de pièces -->
           <div v-if="pieceRequirementCount > 0" class="mb-8 space-y-3">
-            <h3 class="text-lg font-semibold">Groupes de pièces</h3>
+            <h3 class="text-lg font-semibold">
+              Groupes de pièces
+            </h3>
             <div class="space-y-3">
               <div
                 v-for="requirement in type.pieceRequirements"
@@ -96,7 +101,9 @@
     <div v-else class="my-8 text-center">
       <div class="alert alert-error">
         <div>
-          <h3 class="font-bold">Type non trouvé</h3>
+          <h3 class="font-bold">
+            Type non trouvé
+          </h3>
           <p>Le type de machine demandé n'existe pas.</p>
         </div>
       </div>

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

@@ -1,11 +1,11 @@
 <template>
   <main class="container mx-auto px-6 py-8">
- 
-
     <!-- Loading State -->
     <div v-if="loading" class="my-8 text-center">
-      <div class="loading loading-spinner loading-lg"></div>
-      <p class="mt-4 text-gray-600">Chargement du type...</p>
+      <div class="loading loading-spinner loading-lg" />
+      <p class="mt-4 text-gray-600">
+        Chargement du type...
+      </p>
     </div>
 
     <!-- Edit Form -->
@@ -34,7 +34,9 @@
     <div v-else class="my-8 text-center">
       <div class="alert alert-error">
         <div>
-          <h3 class="font-bold">Type non trouvé</h3>
+          <h3 class="font-bold">
+            Type non trouvé
+          </h3>
           <p>Le type de machine demandé n'existe pas.</p>
         </div>
       </div>
@@ -68,11 +70,11 @@ const editedType = ref({
   maintenanceFrequency: '',
   customFields: [],
   componentRequirements: [],
-  pieceRequirements: [],
+  pieceRequirements: []
 })
 
 const parseOptions = (field = {}) => {
-  if (field.type !== 'select') return []
+  if (field.type !== 'select') { return [] }
   if (field.optionsText && typeof field.optionsText === 'string') {
     return field.optionsText
       .split('\n')
@@ -114,7 +116,7 @@ const normalizeComponentRequirements = (requirements = []) =>
       minCount: toIntegerOrNull(req.minCount, 1),
       maxCount: toIntegerOrNull(req.maxCount, null),
       required: req.required ?? true,
-      allowNewModels: req.allowNewModels ?? true,
+      allowNewModels: req.allowNewModels ?? true
     }))
 
 const normalizePieceRequirements = (requirements = []) =>
@@ -126,7 +128,7 @@ const normalizePieceRequirements = (requirements = []) =>
       minCount: toIntegerOrNull(req.minCount, 0),
       maxCount: toIntegerOrNull(req.maxCount, null),
       required: req.required ?? false,
-      allowNewModels: req.allowNewModels ?? true,
+      allowNewModels: req.allowNewModels ?? true
     }))
 
 const saveChanges = async () => {
@@ -140,7 +142,7 @@ const saveChanges = async () => {
       ...currentEditedType,
       customFields: normalizeCustomFields(currentEditedType.customFields),
       componentRequirements: normalizeComponentRequirements(currentEditedType.componentRequirements),
-      pieceRequirements: normalizePieceRequirements(currentEditedType.pieceRequirements),
+      pieceRequirements: normalizePieceRequirements(currentEditedType.pieceRequirements)
     }
 
     const result = await updateMachineType(type.value.id, updatedType)
@@ -181,7 +183,7 @@ onMounted(async () => {
         maintenanceFrequency: type.value.maintenanceFrequency || '',
         customFields: type.value.customFields || [],
         componentRequirements: type.value.componentRequirements || [],
-        pieceRequirements: type.value.pieceRequirements || [],
+        pieceRequirements: type.value.pieceRequirements || []
       }
     } else {
       console.error('Failed to load type:', result.error)

app/shared/modelUtils.ts

@@ -67,18 +67,6 @@ const sanitizePieces = (pieces: any[]): any[] => {
 
   return pieces
     .map((piece) => {
-      const name = typeof piece?.name === 'string' ? piece.name.trim() : ''
-      if (!name) {
-        return null
-      }
-
-      const reference = typeof piece?.reference === 'string' && piece.reference.trim().length > 0
-        ? piece.reference.trim()
-        : undefined
-
-      const quantity = Number(piece?.quantity)
-      const normalizedQuantity = Number.isFinite(quantity) && quantity > 0 ? quantity : undefined
-
       const rawTypePieceId = typeof piece?.typePieceId === 'string'
         ? piece.typePieceId.trim()
         : typeof piece?.typePiece?.id === 'string'
@@ -93,6 +81,19 @@ const sanitizePieces = (pieces: any[]): any[] => {
           : ''
       const typePieceLabel = rawTypePieceLabel.length > 0 ? rawTypePieceLabel : undefined
 
+      const rawName = typeof piece?.name === 'string' ? piece.name.trim() : ''
+      const name = rawName || typePieceLabel || ''
+      if (!name) {
+        return null
+      }
+
+      const reference = typeof piece?.reference === 'string' && piece.reference.trim().length > 0
+        ? piece.reference.trim()
+        : undefined
+
+      const quantity = Number(piece?.quantity)
+      const normalizedQuantity = Number.isFinite(quantity) && quantity > 0 ? quantity : undefined
+
       const result: Record<string, unknown> = { name }
       if (reference !== undefined) {
         result.reference = reference
@@ -118,7 +119,22 @@ const sanitizeSubComponents = (components: any[]): any[] => {
 
   return components
     .map((component) => {
-      const name = typeof component?.name === 'string' ? component.name.trim() : ''
+      const rawTypeComposantId = typeof component?.typeComposantId === 'string'
+        ? component.typeComposantId.trim()
+        : typeof component?.typeComposant?.id === 'string'
+          ? component.typeComposant.id.trim()
+          : ''
+      const typeComposantId = rawTypeComposantId.length > 0 ? rawTypeComposantId : undefined
+
+      const rawTypeComposantLabel = typeof component?.typeComposantLabel === 'string'
+        ? component.typeComposantLabel.trim()
+        : typeof component?.typeComposant?.name === 'string'
+          ? component.typeComposant.name.trim()
+          : ''
+      const typeComposantLabel = rawTypeComposantLabel.length > 0 ? rawTypeComposantLabel : undefined
+
+      const rawName = typeof component?.name === 'string' ? component.name.trim() : ''
+      const name = rawName || typeComposantLabel || ''
       if (!name) {
         return null
       }
@@ -147,6 +163,12 @@ const sanitizeSubComponents = (components: any[]): any[] => {
       if (normalizedQuantity !== undefined) {
         result.quantity = normalizedQuantity
       }
+      if (typeComposantId) {
+        result.typeComposantId = typeComposantId
+      }
+      if (typeComposantLabel) {
+        result.typeComposantLabel = typeComposantLabel
+      }
 
       return result
     })
@@ -183,9 +205,9 @@ const hydratePieces = (pieces: any[]): any[] => {
   }
 
   return pieces.map((piece) => ({
-    name: piece?.name ?? '',
+    name: piece?.name ?? piece?.typePiece?.name ?? piece?.typePieceLabel ?? '',
     reference: piece?.reference ?? '',
-    quantity: piece?.quantity ?? undefined,
+    quantity: piece?.quantity ?? piece?.quantite ?? undefined,
     typePieceId: piece?.typePieceId ?? piece?.typePiece?.id ?? '',
     typePieceLabel: piece?.typePieceLabel ?? piece?.typePiece?.name ?? '',
   }))
@@ -197,9 +219,11 @@ const hydrateSubComponents = (components: any[]): any[] => {
   }
 
   return components.map((component) => ({
-    name: component?.name ?? '',
+    name: component?.name ?? component?.typeComposant?.name ?? component?.typeComposantLabel ?? '',
     description: component?.description ?? '',
-    quantity: component?.quantity ?? undefined,
+    quantity: component?.quantity ?? component?.quantite ?? undefined,
+    typeComposantId: component?.typeComposantId ?? component?.typeComposant?.id ?? '',
+    typeComposantLabel: component?.typeComposantLabel ?? component?.typeComposant?.name ?? '',
     customFields: hydrateCustomFields(component?.customFields),
     pieces: hydratePieces(component?.pieces),
     subComponents: hydrateSubComponents(component?.subComponents),
@@ -243,9 +267,11 @@ const mapComponentPieces = (pieces: any[]) => {
     return []
   }
   return pieces.map((piece) => ({
-    name: piece?.name ?? '',
+    name: piece?.name ?? piece?.typePiece?.name ?? '',
     reference: piece?.reference ?? '',
     quantity: piece?.quantity ?? piece?.quantite ?? undefined,
+    typePieceId: piece?.typePieceId ?? piece?.typePiece?.id ?? '',
+    typePieceLabel: piece?.typePieceLabel ?? piece?.typePiece?.name ?? '',
   }))
 }
 
@@ -254,9 +280,11 @@ const mapSubComponents = (components: any[]): any[] => {
     return []
   }
   return components.map((component) => ({
-    name: component?.name ?? '',
+    name: component?.name ?? component?.typeComposant?.name ?? '',
     description: component?.description ?? '',
     quantity: component?.quantity ?? component?.quantite ?? undefined,
+    typeComposantId: component?.typeComposantId ?? component?.typeComposant?.id ?? '',
+    typeComposantLabel: component?.typeComposantLabel ?? component?.typeComposant?.name ?? '',
     customFields: mapComponentCustomFields(component?.customFields),
     pieces: mapComponentPieces(component?.pieces),
     subComponents: mapSubComponents(component?.subComponents),

app/utils/documentPreview.js

@@ -1,24 +1,24 @@
 import { getFileIcon } from './fileIcons'
 
 export const getPreviewType = (document) => {
-  if (!document) return null
+  if (!document) { return null }
   const mime = (document.mimeType || '').toLowerCase()
   const path = document.path || ''
 
-  const check = (prefix) => mime.startsWith(prefix) || path.startsWith(`data:${prefix}`)
+  const check = prefix => mime.startsWith(prefix) || path.startsWith(`data:${prefix}`)
 
-  if (check('image/')) return 'image'
-  if (mime === 'application/pdf' || path.startsWith('data:application/pdf')) return 'pdf'
-  if (check('audio/')) return 'audio'
-  if (check('video/')) return 'video'
-  if (check('text/') || mime.includes('json') || mime.includes('xml') || path.startsWith('data:application/json')) return 'text'
+  if (check('image/')) { return 'image' }
+  if (mime === 'application/pdf' || path.startsWith('data:application/pdf')) { return 'pdf' }
+  if (check('audio/')) { return 'audio' }
+  if (check('video/')) { return 'video' }
+  if (check('text/') || mime.includes('json') || mime.includes('xml') || path.startsWith('data:application/json')) { return 'text' }
   return null
 }
 
 export const canPreviewDocument = (document = {}) => !!getPreviewType(document)
 
 export const describeDocument = (document) => {
-  if (!document) return ''
+  if (!document) { return '' }
   const name = document.filename || document.name || ''
   const icon = getFileIcon({ name, mime: document.mimeType })
   return icon.label

app/utils/printTemplates/machineReport.js

@@ -1,8 +1,6 @@
-
-
 const formatSize = (size) => {
-  if (size === undefined || size === null) return '—'
-  if (size === 0) return '0 B'
+  if (size === undefined || size === null) { return '—' }
+  if (size === 0) { return '0 B' }
   const units = ['B', 'KB', 'MB', 'GB']
   const index = Math.min(units.length - 1, Math.floor(Math.log(size) / Math.log(1024)))
   const formatted = size / Math.pow(1024, index)
@@ -15,9 +13,9 @@ const renderPrintField = (label, value, fallback = '—') => {
 }
 
 const renderPrintCustomFields = (fields = [], title, sectionClass = 'print-section') => {
-  if (!fields.length) return ''
+  if (!fields.length) { return '' }
   const items = fields
-    .map((field) => `<div class="print-field"><label>${field.label}</label><span>${field.value || '—'}</span></div>`)
+    .map(field => `<div class="print-field"><label>${field.label}</label><span>${field.value || '—'}</span></div>`)
     .join('')
   return `
     <div class="${sectionClass}">
@@ -30,9 +28,9 @@ const renderPrintCustomFields = (fields = [], title, sectionClass = 'print-secti
 }
 
 const renderPrintDocuments = (documents = [], title, sectionClass = 'print-section') => {
-  if (!documents.length) return ''
+  if (!documents.length) { return '' }
   const rows = documents
-    .map((doc) => `<tr><td>${doc.name}</td><td>${doc.type}</td><td>${doc.size}</td></tr>`)
+    .map(doc => `<tr><td>${doc.name}</td><td>${doc.type}</td><td>${doc.size}</td></tr>`)
     .join('')
   return `
     <div class="${sectionClass}">
@@ -54,9 +52,9 @@ const renderPrintDocuments = (documents = [], title, sectionClass = 'print-secti
 const renderPrintPieces = (
   pieces = [],
   title = 'Pièces indépendantes',
-  sectionClass = 'print-section print-section--pieces',
+  sectionClass = 'print-section print-section--pieces'
 ) => {
-  if (!pieces.length) return ''
+  if (!pieces.length) { return '' }
 
   const cards = pieces
     .map((piece, idx) => {
@@ -66,14 +64,14 @@ const renderPrintPieces = (
         : ''
 
       const customFields = (piece.customFields || [])
-        .filter((field) => field.value && field.value !== '—' && field.value !== '')
+        .filter(field => field.value && field.value !== '—' && field.value !== '')
         .map(
-          (field) => `
+          field => `
             <li>
               <span class="print-list-label">${field.label}</span>
               <span class="print-list-value">${field.value}</span>
             </li>
-          `,
+          `
         )
         .join('')
 
@@ -83,7 +81,7 @@ const renderPrintPieces = (
 
       const documentsBlock = (piece.documents || []).length
         ? `<div class="print-piece-section"><h4>Documents</h4><ul class="print-list">${piece.documents
-            .map((doc) => `<li>${doc.name} <span class="print-list-hint">(${doc.type} • ${doc.size})</span></li>`)
+            .map(doc => `<li>${doc.name} <span class="print-list-hint">(${doc.type} • ${doc.size})</span></li>`)
             .join('')}</ul></div>`
         : ''
 
@@ -126,7 +124,7 @@ const renderPrintPieces = (
 }
 
 const renderPrintComponents = (components = [], depth = 0, indexPath = []) => {
-  if (!components.length) return ''
+  if (!components.length) { return '' }
   return components
     .map((component, idx) => {
       const badges = []
@@ -143,21 +141,21 @@ const renderPrintComponents = (components = [], depth = 0, indexPath = []) => {
             <span>Composant&nbsp;: ${component.name}</span>
           </h3>
           ${component.description ? `<p class="print-muted">${component.description}</p>` : ''}
-          ${badges.length ? `<div class="badge-group">${badges.map((badge) => `<span class="print-badge">${badge}</span>`).join('')}</div>` : ''}
+          ${badges.length ? `<div class="badge-group">${badges.map(badge => `<span class="print-badge">${badge}</span>`).join('')}</div>` : ''}
           ${renderPrintCustomFields(
             component.customFields,
             'Champs personnalisés',
-            'print-section print-subsection print-section--custom-fields',
+            'print-section print-subsection print-section--custom-fields'
           )}
           ${renderPrintPieces(
             (component.pieces || []).map((piece, pieceIdx) => ({ ...piece, indexPath: [...currentIndex, pieceIdx + 1] })),
             'Pièces du composant',
-            'print-section print-subsection print-section--pieces',
+            'print-section print-subsection print-section--pieces'
           )}
           ${renderPrintDocuments(
             component.documents,
             'Documents du composant',
-            'print-section print-subsection print-section--documents',
+            'print-section print-subsection print-section--documents'
           )}
           ${renderPrintComponents(component.subComponents || [], depth + 1, currentIndex)}
         </div>
@@ -167,31 +165,31 @@ const renderPrintComponents = (components = [], depth = 0, indexPath = []) => {
 }
 
 const normalizeDocuments = (docs = []) => {
-  return docs.map((doc) => ({
+  return docs.map(doc => ({
     id: doc.id,
     name: doc.name || doc.filename || 'Document',
     type: doc.mimeType || doc.type || '—',
-    size: formatSize(doc.size),
+    size: formatSize(doc.size)
   }))
 }
 
 const normalizeCustomFields = (values = []) => {
-  return values.map((value) => ({
+  return values.map(value => ({
     id: value.id,
     label: value.customField?.name || 'Champ',
-    value: value.value || '—',
+    value: value.value || '—'
   }))
 }
 
 const normalizeConstructeur = (constructeur) => {
-  if (!constructeur) return null
+  if (!constructeur) { return null }
   return {
     name: constructeur.name || '—',
-    contact: [constructeur.email, constructeur.phone].filter(Boolean).join(' • ') || '—',
+    contact: [constructeur.email, constructeur.phone].filter(Boolean).join(' • ') || '—'
   }
 }
 
-const normalizePiece = (piece) => ({
+const normalizePiece = piece => ({
   id: piece.id,
   name: piece.name || 'Pièce sans nom',
   description: piece.description || '',
@@ -199,10 +197,10 @@ const normalizePiece = (piece) => ({
   customFields: normalizeCustomFields(piece.customFieldValues || []),
   documents: normalizeDocuments(piece.documents || []),
   constructeur: normalizeConstructeur(piece.constructeur),
-  indexPath: piece.indexPath || null,
+  indexPath: piece.indexPath || null
 })
 
-const normalizeComponent = (component) => ({
+const normalizeComponent = component => ({
   id: component.id,
   name: component.name || 'Composant sans nom',
   description: component.description || '',
@@ -210,7 +208,7 @@ const normalizeComponent = (component) => ({
   documents: normalizeDocuments(component.documents || []),
   pieces: (component.pieces || []).map(normalizePiece),
   subComponents: (component.sousComposants || component.subComponents || []).map(normalizeComponent),
-  constructeur: normalizeConstructeur(component.constructeur),
+  constructeur: normalizeConstructeur(component.constructeur)
 })
 
 export const buildMachinePrintContext = ({
@@ -219,7 +217,7 @@ export const buildMachinePrintContext = ({
   machineReference,
   machinePieces = [],
   components = [],
-  selection,
+  selection
 }) => {
   const selectionState = selection || {}
   const machineSelection = selectionState.machine || {}
@@ -231,7 +229,7 @@ export const buildMachinePrintContext = ({
   const includeMachineDocuments = machineSelection.documents !== false
 
   const isComponentSelected = (id) => {
-    if (!id) return true
+    if (!id) { return true }
     if (Object.prototype.hasOwnProperty.call(componentSelection, id)) {
       return componentSelection[id]
     }
@@ -239,7 +237,7 @@ export const buildMachinePrintContext = ({
   }
 
   const isPieceSelected = (id) => {
-    if (!id) return true
+    if (!id) { return true }
     if (Object.prototype.hasOwnProperty.call(pieceSelection, id)) {
       return pieceSelection[id]
     }
@@ -259,16 +257,16 @@ export const buildMachinePrintContext = ({
 
   const normalizedPieces = machinePieces
     .map(normalizePiece)
-    .filter((piece) => isPieceSelected(piece.id))
+    .filter(piece => isPieceSelected(piece.id))
     .map((piece, idx) => ({
       ...piece,
-      indexPath: [idx + 1],
+      indexPath: [idx + 1]
     }))
 
   const normalizedComponents = components.map(normalizeComponent)
 
   const filterComponentTree = (component) => {
-    const filteredPieces = (component.pieces || []).filter((piece) => isPieceSelected(piece.id))
+    const filteredPieces = (component.pieces || []).filter(piece => isPieceSelected(piece.id))
     const filteredSubComponents = (component.subComponents || [])
       .map(filterComponentTree)
       .filter(Boolean)
@@ -283,7 +281,7 @@ export const buildMachinePrintContext = ({
     return {
       ...component,
       pieces: filteredPieces,
-      subComponents: filteredSubComponents,
+      subComponents: filteredSubComponents
     }
   }
 
@@ -309,17 +307,17 @@ export const buildMachinePrintContext = ({
         : [],
       documents: includeMachineDocuments
         ? normalizeDocuments(machine?.documents || [])
-        : [],
+        : []
     },
     components: filteredComponents,
-    pieces: normalizedPieces,
+    pieces: normalizedPieces
   }
 }
 
 export const buildMachinePrintHtml = (context, styles) => {
   const title = context.machine.name ? `Impression - ${context.machine.name}` : 'Impression machine'
   const badgesHtml = context.machine.badges
-    .map((badge) => `<span class="print-badge">${badge}</span>`)
+    .map(badge => `<span class="print-badge">${badge}</span>`)
     .join('')
   const sections = []
 
@@ -357,7 +355,7 @@ export const buildMachinePrintHtml = (context, styles) => {
   const customFieldsSection = renderPrintCustomFields(
     context.machine.customFields,
     'Champs personnalisés de la machine',
-    'print-section print-section--custom-fields',
+    'print-section print-section--custom-fields'
   )
   if (customFieldsSection) {
     sections.push(customFieldsSection)
@@ -366,7 +364,7 @@ export const buildMachinePrintHtml = (context, styles) => {
   const documentsSection = renderPrintDocuments(
     context.machine.documents,
     'Documents liés à la machine',
-    'print-section print-section--documents',
+    'print-section print-section--documents'
   )
   if (documentsSection) {
     sections.push(documentsSection)
@@ -380,7 +378,7 @@ export const buildMachinePrintHtml = (context, styles) => {
   const piecesSection = renderPrintPieces(
     context.pieces,
     'Pièces indépendantes',
-    'print-section print-section--pieces',
+    'print-section print-section--pieces'
   )
   if (piecesSection) {
     sections.push(piecesSection)

eslint.config.mjs

@@ -0,0 +1,70 @@
+import nuxt from '@nuxt/eslint-config';
+
+const globals = {
+  defineNuxtConfig: 'readonly',
+  defineNuxtRouteMiddleware: 'readonly',
+  navigateTo: 'readonly',
+  useRuntimeConfig: 'readonly',
+  $fetch: 'readonly',
+};
+
+const relaxedRules = {
+  'vue/no-parsing-error': 'off',
+  'vue/no-required-prop-with-default': 'off',
+  'vue/no-mutating-props': 'off',
+  'vue/html-self-closing': 'off',
+  'vue/singleline-html-element-content-newline': 'off',
+  'vue/multiline-html-element-content-newline': 'off',
+  'vue/html-indent': 'off',
+  'vue/attributes-order': 'off',
+  'vue/multi-word-component-names': 'off',
+  'vue/no-multiple-template-root': 'off',
+  'vue/v-on-event-hyphenation': 'off',
+  'vue/require-default-prop': 'off',
+  'no-console': 'off',
+  'no-unused-vars': 'off',
+  'require-await': 'off',
+  'comma-dangle': 'off',
+  curly: 'off',
+  'operator-linebreak': 'off',
+  'space-before-function-paren': 'off',
+  'arrow-parens': 'off',
+  semi: 'off',
+  quotes: 'off',
+  'func-call-spacing': 'off',
+  'no-trailing-spaces': 'off',
+  indent: 'off',
+  'no-multiple-empty-lines': 'off',
+  'import/order': 'off',
+  'no-irregular-whitespace': 'off',
+  'no-useless-escape': 'off',
+  'nuxt/prefer-import-meta': 'off',
+  '@typescript-eslint/no-unused-vars': 'off',
+  '@typescript-eslint/semi': 'off',
+  '@typescript-eslint/no-explicit-any': 'off',
+  '@typescript-eslint/no-dynamic-delete': 'off',
+  '@typescript-eslint/no-invalid-void-type': 'off',
+  '@typescript-eslint/unified-signatures': 'off',
+};
+
+export default await nuxt(
+  {
+    features: {
+      stylistic: false,
+      typescript: true,
+      nuxt: {
+        sortConfigKeys: false,
+      },
+    },
+    dirs: {
+      root: ['.', './app'],
+    },
+  },
+  {
+    name: 'project/custom-overrides',
+    languageOptions: {
+      globals,
+    },
+    rules: relaxedRules,
+  }
+);

nuxt.config.ts

@@ -1,9 +1,9 @@
-import tailwindcss from "@tailwindcss/vite";
+import tailwindcss from '@tailwindcss/vite'
 export default defineNuxtConfig({
   compatibilityDate: '2025-07-15',
   devtools: { enabled: true },
   devServer: {
-    port: 3001,
+    port: 3001
   },
   modules: [
     [
@@ -12,10 +12,10 @@ export default defineNuxtConfig({
         componentPrefix: 'Icon',
         warn: process.env.NODE_ENV === 'development',
         collections: {
-          lucide: () => import('@iconify-json/lucide/icons.json').then((i) => i.default),
-        },
-      },
-    ],
+          lucide: () => import('@iconify-json/lucide/icons.json').then(i => i.default)
+        }
+      }
+    ]
   ],
   runtimeConfig: {
     public: {
@@ -27,13 +27,13 @@ export default defineNuxtConfig({
       enableDebug: process.env.NUXT_PUBLIC_ENABLE_DEBUG || 'true',
       enableAnalytics: process.env.NUXT_PUBLIC_ENABLE_ANALYTICS || 'false',
       csrfToken: process.env.NUXT_PUBLIC_CSRF_TOKEN || '',
-      logLevel: process.env.NUXT_PUBLIC_LOG_LEVEL || 'debug',
-    },
+      logLevel: process.env.NUXT_PUBLIC_LOG_LEVEL || 'debug'
+    }
   },
   vite: {
-    plugins: [tailwindcss()],
+    plugins: [tailwindcss()]
   },
-  css: ["~/assets/app.css"],
+  css: ['~/assets/app.css'],
   router: {
     options: {
       strict: false

package.json

@@ -8,7 +8,9 @@
     "generate": "nuxt generate",
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare",
-    "start": "nuxt start"
+    "start": "nuxt start",
+    "lint": "eslint . --ext .js,.ts,.vue",
+    "lint:fix": "npm run lint -- --fix"
   },
   "dependencies": {
     "@nuxtjs/tailwindcss": "^6.14.0",
@@ -21,6 +23,14 @@
   },
   "devDependencies": {
     "@iconify-json/lucide": "^1.2.68",
-    "unplugin-icons": "^0.19.3"
+    "@nuxt/eslint-config": "^1.9.0",
+    "@rushstack/eslint-patch": "^1.12.0",
+    "@typescript-eslint/eslint-plugin": "^8.44.1",
+    "@typescript-eslint/parser": "^8.44.1",
+    "eslint": "^9.36.0",
+    "eslint-plugin-vue": "^10.5.0",
+    "typescript": "^5.7.3",
+    "unplugin-icons": "^0.19.3",
+    "vue-eslint-parser": "^10.2.0"
   }
 }