From b7caa4f5525e9c06f63f66bcc8a870a129a0ddaf Mon Sep 17 00:00:00 2001
From: Matthieu <mtholot19@gmail.com>
Date: Thu, 25 Sep 2025 16:22:14 +0200
Subject: [PATCH] Rename dashboard

---
 app/app.vue         | 364 ++++++++++++++++++++++---------
 app/pages/index.vue | 514 +++++++++++++++++++++++++++-----------------
 2 files changed, 580 insertions(+), 298 deletions(-)

diff --git a/app/app.vue b/app/app.vue
index d5957a2..80697f1 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -7,7 +7,10 @@
           <div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
             <IconLucideMenu class="w-5 h-5" aria-hidden="true" />
           </div>
-          <ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
+          <ul
+            tabindex="0"
+            class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52"
+          >
             <li class="pt-1 pb-2 lg:hidden">
               <button
                 @click="openDisplaySettings"
@@ -21,16 +24,24 @@
               <NuxtLink
                 to="/"
                 class="rounded-md px-2 py-1 transition-colors"
-                :class="isActive('/') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
+                :class="
+                  isActive('/')
+                    ? 'bg-primary text-primary-content font-semibold shadow-sm'
+                    : 'text-base-content hover:bg-primary/10 hover:text-primary'
+                "
               >
-                Dashboard
+                Vue d'ensemble
               </NuxtLink>
             </li>
             <li>
               <NuxtLink
                 to="/machines"
                 class="rounded-md px-2 py-1 transition-colors"
-                :class="isActive('/machines') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
+                :class="
+                  isActive('/machines')
+                    ? 'bg-primary text-primary-content font-semibold shadow-sm'
+                    : 'text-base-content hover:bg-primary/10 hover:text-primary'
+                "
               >
                 Parc Machines
               </NuxtLink>
@@ -39,7 +50,11 @@
               <NuxtLink
                 to="/machine-skeleton"
                 class="rounded-md px-2 py-1 transition-colors"
-                :class="isActive('/machine-skeleton') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
+                :class="
+                  isActive('/machine-skeleton')
+                    ? 'bg-primary text-primary-content font-semibold shadow-sm'
+                    : 'text-base-content hover:bg-primary/10 hover:text-primary'
+                "
               >
                 Squelettes de machine
               </NuxtLink>
@@ -56,16 +71,27 @@
                 tabindex="0"
                 role="button"
                 class="rounded-md px-2 py-1 transition-colors cursor-pointer"
-                :class="(isActive('/pieces-catalog') || isActive('/piece-category')) ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
+                :class="
+                  isActive('/pieces-catalog') || isActive('/piece-category')
+                    ? 'bg-primary text-primary-content font-semibold shadow-sm'
+                    : 'text-base-content hover:bg-primary/10 hover:text-primary'
+                "
               >
                 Pièces
               </div>
-              <ul tabindex="0" class="dropdown-content z-[1] menu menu-sm bg-base-100 rounded-box p-2 shadow space-y-1">
+              <ul
+                tabindex="0"
+                class="dropdown-content z-[1] menu menu-sm bg-base-100 rounded-box p-2 shadow space-y-1"
+              >
                 <li>
                   <NuxtLink
                     to="/piece-category"
                     class="rounded-md px-2 py-1 transition-colors"
-                    :class="isActive('/piece-category') ? 'bg-primary/10 text-primary font-semibold' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
+                    :class="
+                      isActive('/piece-category')
+                        ? 'bg-primary/10 text-primary font-semibold'
+                        : 'text-base-content hover:bg-primary/10 hover:text-primary'
+                    "
                   >
                     Catégorie de pièce
                   </NuxtLink>
@@ -74,7 +100,11 @@
                   <NuxtLink
                     to="/pieces-catalog"
                     class="rounded-md px-2 py-1 transition-colors"
-                    :class="isActive('/pieces-catalog') ? 'bg-primary/10 text-primary font-semibold' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
+                    :class="
+                      isActive('/pieces-catalog')
+                        ? 'bg-primary/10 text-primary font-semibold'
+                        : 'text-base-content hover:bg-primary/10 hover:text-primary'
+                    "
                   >
                     Catalogue de pièce
                   </NuxtLink>
@@ -93,16 +123,28 @@
                 tabindex="0"
                 role="button"
                 class="rounded-md px-2 py-1 transition-colors cursor-pointer"
-                :class="(isActive('/component-catalog') || isActive('/component-category')) ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
+                :class="
+                  isActive('/component-catalog') ||
+                  isActive('/component-category')
+                    ? 'bg-primary text-primary-content font-semibold shadow-sm'
+                    : 'text-base-content hover:bg-primary/10 hover:text-primary'
+                "
               >
                 Composant
               </div>
-              <ul tabindex="0" class="dropdown-content z-[1] menu menu-sm bg-base-100 rounded-box p-2 shadow space-y-1">
+              <ul
+                tabindex="0"
+                class="dropdown-content z-[1] menu menu-sm bg-base-100 rounded-box p-2 shadow space-y-1"
+              >
                 <li>
                   <NuxtLink
                     to="/component-category"
                     class="rounded-md px-2 py-1 transition-colors"
-                    :class="isActive('/component-category') ? 'bg-primary/10 text-primary font-semibold' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
+                    :class="
+                      isActive('/component-category')
+                        ? 'bg-primary/10 text-primary font-semibold'
+                        : 'text-base-content hover:bg-primary/10 hover:text-primary'
+                    "
                   >
                     Catégorie de composant
                   </NuxtLink>
@@ -111,7 +153,11 @@
                   <NuxtLink
                     to="/component-catalog"
                     class="rounded-md px-2 py-1 transition-colors"
-                    :class="isActive('/component-catalog') ? 'bg-primary/10 text-primary font-semibold' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
+                    :class="
+                      isActive('/component-catalog')
+                        ? 'bg-primary/10 text-primary font-semibold'
+                        : 'text-base-content hover:bg-primary/10 hover:text-primary'
+                    "
                   >
                     Catalogue de composant
                   </NuxtLink>
@@ -130,16 +176,29 @@
                 tabindex="0"
                 role="button"
                 class="rounded-md px-2 py-1 transition-colors cursor-pointer"
-                :class="(isActive('/sites') || isActive('/documents') || isActive('/constructeurs')) ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
+                :class="
+                  isActive('/sites') ||
+                  isActive('/documents') ||
+                  isActive('/constructeurs')
+                    ? 'bg-primary text-primary-content font-semibold shadow-sm'
+                    : 'text-base-content hover:bg-primary/10 hover:text-primary'
+                "
               >
                 Ressources liées
               </div>
-              <ul tabindex="0" class="dropdown-content z-[1] menu menu-sm bg-base-100 rounded-box p-2 shadow space-y-1">
+              <ul
+                tabindex="0"
+                class="dropdown-content z-[1] menu menu-sm bg-base-100 rounded-box p-2 shadow space-y-1"
+              >
                 <li>
                   <NuxtLink
                     to="/sites"
                     class="rounded-md px-2 py-1 transition-colors"
-                    :class="isActive('/sites') ? 'bg-primary/10 text-primary font-semibold' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
+                    :class="
+                      isActive('/sites')
+                        ? 'bg-primary/10 text-primary font-semibold'
+                        : 'text-base-content hover:bg-primary/10 hover:text-primary'
+                    "
                   >
                     Sites
                   </NuxtLink>
@@ -148,7 +207,11 @@
                   <NuxtLink
                     to="/documents"
                     class="rounded-md px-2 py-1 transition-colors"
-                    :class="isActive('/documents') ? 'bg-primary/10 text-primary font-semibold' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
+                    :class="
+                      isActive('/documents')
+                        ? 'bg-primary/10 text-primary font-semibold'
+                        : 'text-base-content hover:bg-primary/10 hover:text-primary'
+                    "
                   >
                     Documents
                   </NuxtLink>
@@ -157,7 +220,11 @@
                   <NuxtLink
                     to="/constructeurs"
                     class="rounded-md px-2 py-1 transition-colors"
-                    :class="isActive('/constructeurs') ? 'bg-primary/10 text-primary font-semibold' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
+                    :class="
+                      isActive('/constructeurs')
+                        ? 'bg-primary/10 text-primary font-semibold'
+                        : 'text-base-content hover:bg-primary/10 hover:text-primary'
+                    "
                   >
                     Constructeurs
                   </NuxtLink>
@@ -168,11 +235,15 @@
         </div>
         <div class="flex items-center space-x-3">
           <div class="avatar placeholder">
-            <div class="bg-primary text-primary-content rounded-lg w-10 grid place-items-center">
+            <div
+              class="bg-primary text-primary-content rounded-lg w-10 grid place-items-center"
+            >
               <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">
@@ -181,16 +252,24 @@
             <NuxtLink
               to="/"
               class="transition-colors px-3 py-2 rounded-md"
-              :class="isActive('/') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
+              :class="
+                isActive('/')
+                  ? 'bg-primary text-primary-content font-semibold shadow-sm'
+                  : 'text-base-content hover:bg-primary/10 hover:text-primary'
+              "
             >
-              Dashboard
+              Vue d'ensemble
             </NuxtLink>
           </li>
           <li>
             <NuxtLink
               to="/machines"
               class="transition-colors px-3 py-2 rounded-md"
-              :class="isActive('/machines') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
+              :class="
+                isActive('/machines')
+                  ? 'bg-primary text-primary-content font-semibold shadow-sm'
+                  : 'text-base-content hover:bg-primary/10 hover:text-primary'
+              "
             >
               Parc Machines
             </NuxtLink>
@@ -199,7 +278,11 @@
             <NuxtLink
               to="/machine-skeleton"
               class="transition-colors px-3 py-2 rounded-md"
-              :class="isActive('/machine-skeleton') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
+              :class="
+                isActive('/machine-skeleton')
+                  ? 'bg-primary text-primary-content font-semibold shadow-sm'
+                  : 'text-base-content hover:bg-primary/10 hover:text-primary'
+              "
             >
               Squelettes de machine
             </NuxtLink>
@@ -216,16 +299,27 @@
               tabindex="0"
               role="button"
               class="transition-colors px-3 py-2 rounded-md inline-flex items-center gap-1 cursor-pointer"
-              :class="(isActive('/pieces-catalog') || isActive('/piece-category')) ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
+              :class="
+                isActive('/pieces-catalog') || isActive('/piece-category')
+                  ? 'bg-primary text-primary-content font-semibold shadow-sm'
+                  : 'text-base-content hover:bg-primary/10 hover:text-primary'
+              "
             >
               Pièces
             </div>
-            <ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-60">
+            <ul
+              tabindex="0"
+              class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-60"
+            >
               <li>
                 <NuxtLink
                   to="/piece-category"
                   class="rounded-md px-2 py-1 transition-colors"
-                  :class="isActive('/piece-category') ? 'bg-primary/10 text-primary font-semibold' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
+                  :class="
+                    isActive('/piece-category')
+                      ? 'bg-primary/10 text-primary font-semibold'
+                      : 'text-base-content hover:bg-primary/10 hover:text-primary'
+                  "
                 >
                   Catégorie de pièce
                 </NuxtLink>
@@ -234,7 +328,11 @@
                 <NuxtLink
                   to="/pieces-catalog"
                   class="rounded-md px-2 py-1 transition-colors"
-                  :class="isActive('/pieces-catalog') ? 'bg-primary/10 text-primary font-semibold' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
+                  :class="
+                    isActive('/pieces-catalog')
+                      ? 'bg-primary/10 text-primary font-semibold'
+                      : 'text-base-content hover:bg-primary/10 hover:text-primary'
+                  "
                 >
                   Catalogue de pièce
                 </NuxtLink>
@@ -253,16 +351,28 @@
               tabindex="0"
               role="button"
               class="transition-colors px-3 py-2 rounded-md inline-flex items-center gap-1 cursor-pointer"
-              :class="(isActive('/component-category') || isActive('/component-catalog')) ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
+              :class="
+                isActive('/component-category') ||
+                isActive('/component-catalog')
+                  ? 'bg-primary text-primary-content font-semibold shadow-sm'
+                  : 'text-base-content hover:bg-primary/10 hover:text-primary'
+              "
             >
               Composant
             </div>
-            <ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-64">
+            <ul
+              tabindex="0"
+              class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-64"
+            >
               <li>
                 <NuxtLink
                   to="/component-category"
                   class="rounded-md px-2 py-1 transition-colors"
-                  :class="isActive('/component-category') ? 'bg-primary/10 text-primary font-semibold' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
+                  :class="
+                    isActive('/component-category')
+                      ? 'bg-primary/10 text-primary font-semibold'
+                      : 'text-base-content hover:bg-primary/10 hover:text-primary'
+                  "
                 >
                   Catégorie de composant
                 </NuxtLink>
@@ -271,7 +381,11 @@
                 <NuxtLink
                   to="/component-catalog"
                   class="rounded-md px-2 py-1 transition-colors"
-                  :class="isActive('/component-catalog') ? 'bg-primary/10 text-primary font-semibold' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
+                  :class="
+                    isActive('/component-catalog')
+                      ? 'bg-primary/10 text-primary font-semibold'
+                      : 'text-base-content hover:bg-primary/10 hover:text-primary'
+                  "
                 >
                   Catalogue de composant
                 </NuxtLink>
@@ -290,16 +404,29 @@
               tabindex="0"
               role="button"
               class="transition-colors px-3 py-2 rounded-md inline-flex items-center gap-1 cursor-pointer"
-              :class="(isActive('/sites') || isActive('/documents') || isActive('/constructeurs')) ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
+              :class="
+                isActive('/sites') ||
+                isActive('/documents') ||
+                isActive('/constructeurs')
+                  ? 'bg-primary text-primary-content font-semibold shadow-sm'
+                  : 'text-base-content hover:bg-primary/10 hover:text-primary'
+              "
             >
               Ressources liées
             </div>
-            <ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-60">
+            <ul
+              tabindex="0"
+              class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-60"
+            >
               <li>
                 <NuxtLink
                   to="/sites"
                   class="rounded-md px-2 py-1 transition-colors"
-                  :class="isActive('/sites') ? 'bg-primary/10 text-primary font-semibold' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
+                  :class="
+                    isActive('/sites')
+                      ? 'bg-primary/10 text-primary font-semibold'
+                      : 'text-base-content hover:bg-primary/10 hover:text-primary'
+                  "
                 >
                   Sites
                 </NuxtLink>
@@ -308,7 +435,11 @@
                 <NuxtLink
                   to="/documents"
                   class="rounded-md px-2 py-1 transition-colors"
-                  :class="isActive('/documents') ? 'bg-primary/10 text-primary font-semibold' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
+                  :class="
+                    isActive('/documents')
+                      ? 'bg-primary/10 text-primary font-semibold'
+                      : 'text-base-content hover:bg-primary/10 hover:text-primary'
+                  "
                 >
                   Documents
                 </NuxtLink>
@@ -317,7 +448,11 @@
                 <NuxtLink
                   to="/constructeurs"
                   class="rounded-md px-2 py-1 transition-colors"
-                  :class="isActive('/constructeurs') ? 'bg-primary/10 text-primary font-semibold' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
+                  :class="
+                    isActive('/constructeurs')
+                      ? 'bg-primary/10 text-primary font-semibold'
+                      : 'text-base-content hover:bg-primary/10 hover:text-primary'
+                  "
                 >
                   Constructeurs
                 </NuxtLink>
@@ -329,23 +464,29 @@
       <div class="navbar-end">
         <div class="flex items-center gap-2">
           <!-- Bouton paramètres d'affichage -->
-          <button 
-            @click="openDisplaySettings" 
+          <button
+            @click="openDisplaySettings"
             class="btn btn-ghost btn-circle hidden lg:inline-flex"
             title="Paramètres d'affichage"
           >
             <IconLucideSettings class="w-5 h-5" aria-hidden="true" />
           </button>
-          
+
           <!-- Menu Nouveau -->
           <div class="dropdown dropdown-end">
             <div tabindex="0" role="button" class="btn btn-primary">
               <IconLucidePlus class="w-5 h-5 mr-2" aria-hidden="true" />
               Nouveau
             </div>
-            <ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52">
+            <ul
+              tabindex="0"
+              class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52"
+            >
               <li>
-                <NuxtLink to="/machines?add=true" class="flex items-center gap-2">
+                <NuxtLink
+                  to="/machines?add=true"
+                  class="flex items-center gap-2"
+                >
                   <IconLucideCpu class="w-4 h-4" aria-hidden="true" />
                   Nouvelle Machine
                 </NuxtLink>
@@ -367,8 +508,14 @@
 
           <ClientOnly>
             <div class="dropdown dropdown-end" v-if="activeProfile">
-              <div tabindex="0" role="button" class="btn btn-ghost btn-circle avatar placeholder">
-                <div class="bg-secondary text-secondary-content rounded-full w-10 h-10 grid place-items-center">
+              <div
+                tabindex="0"
+                role="button"
+                class="btn btn-ghost btn-circle avatar placeholder"
+              >
+                <div
+                  class="bg-secondary text-secondary-content rounded-full w-10 h-10 grid place-items-center"
+                >
                   <span
                     class="flex h-full w-full items-center justify-center text-sm font-semibold leading-none tracking-tight"
                   >
@@ -376,20 +523,32 @@
                   </span>
                 </div>
               </div>
-              <ul tabindex="0" class="menu dropdown-content mt-3 p-2 shadow bg-base-100 rounded-box w-64">
+              <ul
+                tabindex="0"
+                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 />
-                  <span class="font-semibold text-base-content">{{ activeProfileLabel }}</span>
+                  <span class="font-semibold text-base-content">{{
+                    activeProfileLabel
+                  }}</span>
                 </li>
                 <li><hr class="my-1" /></li>
                 <li>
                   <NuxtLink to="/profiles/manage" class="justify-between">
                     Gestion des profils
-                    <IconLucideChevronRight class="w-4 h-4" aria-hidden="true" />
+                    <IconLucideChevronRight
+                      class="w-4 h-4"
+                      aria-hidden="true"
+                    />
                   </NuxtLink>
                 </li>
                 <li>
-                  <button type="button" class="text-error justify-between" @click="handleLogout">
+                  <button
+                    type="button"
+                    class="text-error justify-between"
+                    @click="handleLogout"
+                  >
                     Déconnexion
                     <IconLucideLogOut class="w-4 h-4" aria-hidden="true" />
                   </button>
@@ -408,8 +567,8 @@
     <ToastContainer />
 
     <!-- Paramètres d'affichage -->
-    <DisplaySettings 
-      :is-open="displaySettingsOpen" 
+    <DisplaySettings
+      :is-open="displaySettingsOpen"
       @close="closeDisplaySettings"
       @update-settings="handleSettingsUpdate"
     />
@@ -424,96 +583,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
-  return `${firstName.charAt(0) || ''}${lastName.charAt(0) || ''}`.toUpperCase() || '??'
-})
+  if (!activeProfile.value) return "??";
+  const { firstName = "", lastName = "" } = activeProfile.value;
+  return (
+    `${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>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index f0832e0..3322c2c 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,12 +1,11 @@
 <template>
   <main class="container mx-auto px-6 py-8">
-
     <!-- Hierarchical View -->
     <div class="my-8">
       <!-- Header with Stats -->
       <div class="flex justify-between items-center mb-6">
         <div>
-          <h2 class="text-2xl font-bold text-gray-800">Vue Hiérarchique</h2>
+          <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">
@@ -29,10 +28,10 @@
               <label class="label">
                 <span class="label-text">Rechercher</span>
               </label>
-              <input 
-                v-model="searchTerm" 
-                type="text" 
-                placeholder="Nom de machine ou site..." 
+              <input
+                v-model="searchTerm"
+                type="text"
+                placeholder="Nom de machine ou site..."
                 class="input input-bordered"
               />
             </div>
@@ -42,7 +41,11 @@
               </label>
               <select v-model="selectedType" class="select select-bordered">
                 <option value="">Tous les types</option>
-                <option v-for="type in machineTypes" :key="type.id" :value="type.id">
+                <option
+                  v-for="type in machineTypes"
+                  :key="type.id"
+                  :value="type.id"
+                >
                   {{ type.name }}
                 </option>
               </select>
@@ -53,7 +56,11 @@
               </label>
               <select v-model="selectedCategory" class="select select-bordered">
                 <option value="">Toutes les catégories</option>
-                <option v-for="category in categories" :key="category" :value="category">
+                <option
+                  v-for="category in categories"
+                  :key="category"
+                  :value="category"
+                >
                   {{ category }}
                 </option>
               </select>
@@ -70,14 +77,24 @@
       <!-- Hierarchical Machines View -->
       <div v-else-if="filteredSites.length === 0" class="text-center py-12">
         <div class="max-w-md mx-auto">
-          <IconLucideFactory class="w-16 h-16 mx-auto text-gray-400 mb-4" aria-hidden="true" />
-          <h3 class="text-lg font-medium text-gray-900 mb-2">Aucune machine trouvée</h3>
-          <p class="text-gray-500 mb-4">Commencez par ajouter des sites et des machines.</p>
+          <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 des sites et des machines.
+          </p>
           <div class="flex gap-2 justify-center">
             <button @click="showAddSiteModal = true" class="btn btn-primary">
               Ajouter un site
             </button>
-            <button @click="showAddMachineModal = true" class="btn btn-secondary">
+            <button
+              @click="showAddMachineModal = true"
+              class="btn btn-secondary"
+            >
               Ajouter une machine
             </button>
           </div>
@@ -85,8 +102,8 @@
       </div>
 
       <div v-else class="space-y-6">
-        <div 
-          v-for="site in filteredSites" 
+        <div
+          v-for="site in filteredSites"
           :key="site.id"
           class="card bg-base-100 shadow-lg"
         >
@@ -95,7 +112,9 @@
             <div class="flex items-center justify-between mb-4">
               <div class="flex items-center gap-3">
                 <div class="avatar placeholder">
-                  <div class="bg-primary text-primary-content rounded-lg w-12 grid place-items-center">
+                  <div
+                    class="bg-primary text-primary-content rounded-lg w-12 grid place-items-center"
+                  >
                     <IconLucideMapPin class="w-6 h-6" aria-hidden="true" />
                   </div>
                 </div>
@@ -103,15 +122,24 @@
                   <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 class="w-4 h-4 text-primary" aria-hidden="true" />
+                      <IconLucideUser
+                        class="w-4 h-4 text-primary"
+                        aria-hidden="true"
+                      />
                       <span class="font-medium">{{ site.contactName }}</span>
                     </div>
                     <div class="flex items-center gap-2">
-                      <IconLucidePhone class="w-4 h-4 text-secondary" aria-hidden="true" />
+                      <IconLucidePhone
+                        class="w-4 h-4 text-secondary"
+                        aria-hidden="true"
+                      />
                       <span>{{ site.contactPhone }}</span>
                     </div>
                     <div class="flex items-start gap-2">
-                      <IconLucideMapPinned class="w-4 h-4 text-accent mt-1" aria-hidden="true" />
+                      <IconLucideMapPinned
+                        class="w-4 h-4 text-accent mt-1"
+                        aria-hidden="true"
+                      />
                       <span>
                         {{ site.contactAddress }}<br />
                         {{ site.contactPostalCode }} {{ site.contactCity }}
@@ -121,11 +149,18 @@
                 </div>
               </div>
               <div class="flex items-center gap-2">
-                <div class="badge badge-primary badge-lg">{{ site.machines?.length || 0 }} machines</div>
-                <button @click="toggleSiteCollapse(site.id)" class="btn btn-ghost btn-sm">
+                <div class="badge badge-primary badge-lg">
+                  {{ site.machines?.length || 0 }} machines
+                </div>
+                <button
+                  @click="toggleSiteCollapse(site.id)"
+                  class="btn btn-ghost btn-sm"
+                >
                   <IconLucideChevronDown
                     class="w-5 h-5 transition-transform"
-                    :class="collapsedSites.includes(site.id) ? 'rotate-180' : ''"
+                    :class="
+                      collapsedSites.includes(site.id) ? 'rotate-180' : ''
+                    "
                     aria-hidden="true"
                   />
                 </button>
@@ -133,11 +168,18 @@
             </div>
 
             <!-- Machines List -->
-            <div v-if="!collapsedSites.includes(site.id) && site.machines && site.machines.length > 0" class="space-y-3">
+            <div
+              v-if="
+                !collapsedSites.includes(site.id) &&
+                site.machines &&
+                site.machines.length > 0
+              "
+              class="space-y-3"
+            >
               <div class="divider"></div>
               <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-                <div 
-                  v-for="machine in site.machines" 
+                <div
+                  v-for="machine in site.machines"
                   :key="machine.id"
                   class="card bg-base-200 hover:bg-base-300 transition-colors cursor-pointer"
                   @click="viewMachineDetails(machine)"
@@ -145,32 +187,53 @@
                   <div class="card-body p-4">
                     <div class="flex items-center justify-between mb-2">
                       <h4 class="font-semibold text-sm">{{ machine.name }}</h4>
-                      <div class="badge badge-sm" :class="getCategoryBadgeClass(machine.typeMachine?.category)">
-                        {{ machine.typeMachine?.category || 'N/A' }}
+                      <div
+                        class="badge badge-sm"
+                        :class="
+                          getCategoryBadgeClass(machine.typeMachine?.category)
+                        "
+                      >
+                        {{ machine.typeMachine?.category || "N/A" }}
                       </div>
                     </div>
-                    
+
                     <div class="space-y-1 text-xs text-gray-600">
                       <div class="flex items-center gap-1">
-                        <IconLucideSettings2 class="w-3 h-3" aria-hidden="true" />
-                        <span>{{ machine.typeMachine?.name || 'Type inconnu' }}</span>
+                        <IconLucideSettings2
+                          class="w-3 h-3"
+                          aria-hidden="true"
+                        />
+                        <span>{{
+                          machine.typeMachine?.name || "Type inconnu"
+                        }}</span>
                       </div>
-                      
-                      <div v-if="machine.reference" class="flex items-center gap-1">
+
+                      <div
+                        v-if="machine.reference"
+                        class="flex items-center gap-1"
+                      >
                         <IconLucideTag class="w-3 h-3" aria-hidden="true" />
                         <span>{{ machine.reference }}</span>
                       </div>
-
                     </div>
-                    
+
                     <div class="card-actions justify-end mt-3">
-                      <button class="btn btn-xs btn-outline" @click.stop="editMachine(machine)">
+                      <button
+                        class="btn btn-xs btn-outline"
+                        @click.stop="editMachine(machine)"
+                      >
                         Modifier
                       </button>
-                      <button class="btn btn-xs btn-error" @click.stop="confirmDeleteMachine(machine)">
+                      <button
+                        class="btn btn-xs btn-error"
+                        @click.stop="confirmDeleteMachine(machine)"
+                      >
                         Supprimer
                       </button>
-                      <NuxtLink :to="`/machine/${machine.id}`" class="btn btn-xs btn-primary">
+                      <NuxtLink
+                        :to="`/machine/${machine.id}`"
+                        class="btn btn-xs btn-primary"
+                      >
                         Détails
                       </NuxtLink>
                     </div>
@@ -180,12 +243,23 @@
             </div>
 
             <!-- Empty Site State -->
-            <div v-else-if="!collapsedSites.includes(site.id) && (!site.machines || site.machines.length === 0)" class="text-center py-6">
+            <div
+              v-else-if="
+                !collapsedSites.includes(site.id) &&
+                (!site.machines || site.machines.length === 0)
+              "
+              class="text-center py-6"
+            >
               <div class="text-gray-400 mb-2">
                 <IconLucideFactory class="w-8 h-8 mx-auto" aria-hidden="true" />
               </div>
-              <p class="text-sm text-gray-500 mb-3">Aucune machine dans ce site</p>
-              <button @click="addMachineToSite(site)" class="btn btn-sm btn-primary">
+              <p class="text-sm text-gray-500 mb-3">
+                Aucune machine dans ce site
+              </p>
+              <button
+                @click="addMachineToSite(site)"
+                class="btn btn-sm btn-primary"
+              >
                 Ajouter une machine
               </button>
             </div>
@@ -203,11 +277,11 @@
             <label class="label">
               <span class="label-text">Nom du site</span>
             </label>
-            <input 
-              v-model="newSite.name" 
-              type="text" 
-              placeholder="Ex: Usine de production" 
-              class="input input-bordered" 
+            <input
+              v-model="newSite.name"
+              type="text"
+              placeholder="Ex: Usine de production"
+              class="input input-bordered"
               required
             />
           </div>
@@ -215,12 +289,14 @@
           <SiteContactFormFields :form="newSite" />
 
           <div class="modal-action">
-            <button type="button" @click="showAddSiteModal = false" class="btn btn-outline">
+            <button
+              type="button"
+              @click="showAddSiteModal = false"
+              class="btn btn-outline"
+            >
               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>
@@ -236,20 +312,24 @@
               <label class="label">
                 <span class="label-text">Nom de la machine</span>
               </label>
-              <input 
-                v-model="newMachine.name" 
-                type="text" 
-                placeholder="Ex: Presse hydraulique #1" 
-                class="input input-bordered" 
+              <input
+                v-model="newMachine.name"
+                type="text"
+                placeholder="Ex: Presse hydraulique #1"
+                class="input input-bordered"
                 required
               />
             </div>
-            
+
             <div class="form-control">
               <label class="label">
                 <span class="label-text">Site</span>
               </label>
-              <select v-model="newMachine.siteId" class="select select-bordered" required>
+              <select
+                v-model="newMachine.siteId"
+                class="select select-bordered"
+                required
+              >
                 <option value="">Sélectionner un site</option>
                 <option v-for="site in sites" :key="site.id" :value="site.id">
                   {{ site.name }}
@@ -263,9 +343,17 @@
               <label class="label">
                 <span class="label-text">Type de machine</span>
               </label>
-              <select v-model="newMachine.typeMachineId" class="select select-bordered" required>
+              <select
+                v-model="newMachine.typeMachineId"
+                class="select select-bordered"
+                required
+              >
                 <option value="">Sélectionner un type</option>
-                <option v-for="type in machineTypes" :key="type.id" :value="type.id">
+                <option
+                  v-for="type in machineTypes"
+                  :key="type.id"
+                  :value="type.id"
+                >
                   {{ type.name }} ({{ type.category }})
                 </option>
               </select>
@@ -275,36 +363,51 @@
               <label class="label">
                 <span class="label-text">Référence</span>
               </label>
-              <input 
-                v-model="newMachine.reference" 
-                type="text" 
-                placeholder="Ex: PRESS-001" 
+              <input
+                v-model="newMachine.reference"
+                type="text"
+                placeholder="Ex: PRESS-001"
                 class="input input-bordered"
               />
             </div>
           </div>
 
           <!-- Type Preview -->
-          <div v-if="selectedMachineType" class="mb-4 p-4 bg-gray-50 rounded-lg">
-            <h4 class="font-semibold text-sm mb-2">Structure du type sélectionné :</h4>
+          <div
+            v-if="selectedMachineType"
+            class="mb-4 p-4 bg-gray-50 rounded-lg"
+          >
+            <h4 class="font-semibold text-sm mb-2">
+              Structure du type sélectionné :
+            </h4>
             <div class="text-xs space-y-1">
               <div class="flex items-center gap-2">
                 <span class="font-medium">Familles de composants :</span>
-                <span class="badge badge-sm">{{ selectedMachineType.componentRequirements?.length || 0 }}</span>
+                <span class="badge badge-sm">{{
+                  selectedMachineType.componentRequirements?.length || 0
+                }}</span>
               </div>
               <div class="flex items-center gap-2">
                 <span class="font-medium">Groupes de pièces :</span>
-                <span class="badge badge-sm">{{ selectedMachineType.pieceRequirements?.length || 0 }}</span>
+                <span class="badge badge-sm">{{
+                  selectedMachineType.pieceRequirements?.length || 0
+                }}</span>
               </div>
               <div class="flex items-center gap-2">
                 <span class="font-medium">Catégorie :</span>
-                <span class="badge badge-outline badge-sm">{{ selectedMachineType.category }}</span>
+                <span class="badge badge-outline badge-sm">{{
+                  selectedMachineType.category
+                }}</span>
               </div>
             </div>
           </div>
 
           <div class="modal-action">
-            <button type="button" @click="showAddMachineModal = false" class="btn btn-outline">
+            <button
+              type="button"
+              @click="showAddMachineModal = false"
+              class="btn btn-outline"
+            >
               Annuler
             </button>
             <button type="submit" class="btn btn-primary">
@@ -318,116 +421,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
-  return machineTypes.value.find(type => type.id === newMachine.typeMachineId)
-})
+  if (!newMachine.typeMachineId) return null;
+  return machineTypes.value.find(
+    (type) => type.id === newMachine.typeMachineId
+  );
+});
 
 const categories = computed(() => {
-  const cats = new Set()
-  machineTypes.value.forEach(type => {
-    if (type.category) cats.add(type.category)
-  })
-  return Array.from(cats)
-})
+  const cats = new Set();
+  machineTypes.value.forEach((type) => {
+    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()
+    filtered = filtered.filter((site) => {
+      const lowerTerm = searchTerm.value.toLowerCase();
       const siteMatches = [
         site.name,
         site.contactName,
         site.contactPhone,
         site.contactAddress,
         site.contactPostalCode,
-        site.contactCity
-      ].some(field => {
-        if (!field) return false
-        return field.toLowerCase().includes(lowerTerm)
-      })
-      
-      const machineMatches = site.machines?.some(machine => 
-        machine.name.toLowerCase().includes(lowerTerm) ||
-        machine.reference?.toLowerCase().includes(lowerTerm)
-      )
-      
-      return siteMatches || machineMatches
-    })
+        site.contactCity,
+      ].some((field) => {
+        if (!field) return false;
+        return field.toLowerCase().includes(lowerTerm);
+      });
+
+      const machineMatches = site.machines?.some(
+        (machine) =>
+          machine.name.toLowerCase().includes(lowerTerm) ||
+          machine.reference?.toLowerCase().includes(lowerTerm)
+      );
+
+      return siteMatches || machineMatches;
+    });
   }
 
   // Filtrer par type de machine
   if (selectedType.value) {
-    filtered = filtered.map(site => ({
-      ...site,
-      machines: site.machines?.filter(machine => machine.typeMachineId === selectedType.value) || []
-    })).filter(site => site.machines.length > 0)
+    filtered = filtered
+      .map((site) => ({
+        ...site,
+        machines:
+          site.machines?.filter(
+            (machine) => machine.typeMachineId === selectedType.value
+          ) || [],
+      }))
+      .filter((site) => site.machines.length > 0);
   }
 
   // Filtrer par catégorie
   if (selectedCategory.value) {
-    filtered = filtered.map(site => ({
-      ...site,
-      machines: site.machines?.filter(machine => machine.typeMachine?.category === selectedCategory.value) || []
-    })).filter(site => site.machines.length > 0)
+    filtered = filtered
+      .map((site) => ({
+        ...site,
+        machines:
+          site.machines?.filter(
+            (machine) =>
+              machine.typeMachine?.category === selectedCategory.value
+          ) || [],
+      }))
+      .filter((site) => site.machines.length > 0);
   }
 
-  return filtered
-})
+  return filtered;
+});
 
 // Methods
 const handleCreateSite = async () => {
@@ -437,102 +553,106 @@ 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
+  );
 
-  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()
-  
-  if (confirm(`Êtes-vous sûr de vouloir supprimer la machine "${machine.name}" ? Cette action est irréversible.`)) {
+  const { showError, showSuccess } = useToast();
+
+  if (
+    confirm(
+      `Êtes-vous sûr de vouloir supprimer la machine "${machine.name}" ? Cette action est irréversible.`
+    )
+  ) {
     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()
-  ])
-})
-</script> 
+  await Promise.all([loadSites(), loadMachineTypes()]);
+});
+</script>