From f924c65ab8d18e5a7e9d026cde4bd8ae18e8ae78 Mon Sep 17 00:00:00 2001
From: Matthieu <mtholot19@gmail.com>
Date: Wed, 24 Sep 2025 09:39:15 +0200
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20harmoniser=20navigation=20et?=
 =?UTF-8?q?=20libell=C3=A9s?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/app.vue                          | 290 ++++++++++++++++++---------
 app/components/model-types/Table.vue |  10 +-
 app/pages/machines/index.vue         |   2 +-
 app/pages/model-types.vue            |  14 +-
 app/pages/models/components.vue      |   2 +-
 app/pages/models/index.vue           |   6 +-
 app/pages/models/pieces.vue          |   2 +-
 app/pages/types.vue                  |   2 +-
 8 files changed, 210 insertions(+), 118 deletions(-)

diff --git a/app/app.vue b/app/app.vue
index 09295f1..9fe1fca 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -32,7 +32,7 @@
                 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'"
               >
-                Machines
+                Parc Machines
               </NuxtLink>
             </li>
             <li>
@@ -41,62 +41,107 @@
                 class="rounded-md px-2 py-1 transition-colors"
                 :class="isActive('/types') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
               >
-                Types de Machines
+                Schémas de machine
               </NuxtLink>
             </li>
             <li>
-              <NuxtLink
-                to="/models"
-                class="rounded-md px-2 py-1 transition-colors"
-                :class="isActive('/models') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
-              >
-                Modèles
-              </NuxtLink>
+              <details class="group">
+                <summary
+                  class="rounded-md px-2 py-1 transition-colors cursor-pointer"
+                  :class="isActive('/models/pieces') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
+                >
+                  Pièces
+                </summary>
+                <ul class="menu menu-sm bg-base-100 rounded-box p-2 shadow space-y-1">
+                  <li>
+                    <NuxtLink
+                      to="/model-types"
+                      class="rounded-md px-2 py-1 transition-colors"
+                      :class="isActive('/model-types') ? 'bg-primary/10 text-primary font-semibold' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
+                    >
+                      Catégorie de pièce
+                    </NuxtLink>
+                  </li>
+                  <li>
+                    <NuxtLink
+                      to="/models/pieces"
+                      class="rounded-md px-2 py-1 transition-colors"
+                      :class="isActive('/models/pieces') ? 'bg-primary/10 text-primary font-semibold' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
+                    >
+                      Catalogue de pièce
+                    </NuxtLink>
+                  </li>
+                </ul>
+              </details>
             </li>
             <li>
-              <NuxtLink
-                to="/model-types"
-                class="rounded-md px-2 py-1 transition-colors"
-                :class="isActive('/model-types') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
-              >
-                Types de modèles
-              </NuxtLink>
+              <details class="group">
+                <summary
+                  class="rounded-md px-2 py-1 transition-colors cursor-pointer"
+                  :class="(isActive('/models/components') || isActive('/model-types')) ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
+                >
+                  Composant
+                </summary>
+                <ul class="menu menu-sm bg-base-100 rounded-box p-2 shadow space-y-1">
+                  <li>
+                    <NuxtLink
+                      to="/model-types"
+                      class="rounded-md px-2 py-1 transition-colors"
+                      :class="isActive('/model-types') ? 'bg-primary/10 text-primary font-semibold' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
+                    >
+                      Catégorie de composant
+                    </NuxtLink>
+                  </li>
+                  <li>
+                    <NuxtLink
+                      to="/models/components"
+                      class="rounded-md px-2 py-1 transition-colors"
+                      :class="isActive('/models/components') ? 'bg-primary/10 text-primary font-semibold' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
+                    >
+                      Catalogue de composant
+                    </NuxtLink>
+                  </li>
+                </ul>
+              </details>
             </li>
             <li>
-              <NuxtLink
-                to="/sites"
-                class="rounded-md px-2 py-1 transition-colors"
-                :class="isActive('/sites') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
-              >
-                Sites
-              </NuxtLink>
-            </li>
-            <li>
-              <NuxtLink
-                to="/generator"
-                class="rounded-md px-2 py-1 transition-colors"
-                :class="isActive('/generator') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
-              >
-                Générateur
-              </NuxtLink>
-            </li>
-            <li>
-              <NuxtLink
-                to="/documents"
-                class="rounded-md px-2 py-1 transition-colors"
-                :class="isActive('/documents') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
-              >
-                Documents
-              </NuxtLink>
-            </li>
-            <li>
-              <NuxtLink
-                to="/constructeurs"
-                class="rounded-md px-2 py-1 transition-colors"
-                :class="isActive('/constructeurs') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
-              >
-                Constructeurs
-              </NuxtLink>
+              <details class="group">
+                <summary
+                  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'"
+                >
+                  Ressources liées
+                </summary>
+                <ul class="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'"
+                    >
+                      Sites
+                    </NuxtLink>
+                  </li>
+                  <li>
+                    <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'"
+                    >
+                      Documents
+                    </NuxtLink>
+                  </li>
+                  <li>
+                    <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'"
+                    >
+                      Constructeurs
+                    </NuxtLink>
+                  </li>
+                </ul>
+              </details>
             </li>
           </ul>
         </div>
@@ -126,7 +171,7 @@
               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'"
             >
-              Machines
+              Parc Machines
             </NuxtLink>
           </li>
           <li>
@@ -135,62 +180,107 @@
               class="transition-colors px-3 py-2 rounded-md"
               :class="isActive('/types') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
             >
-              Types de Machines
+              Schémas de machine
             </NuxtLink>
           </li>
-          <li>
-            <NuxtLink
-              to="/models"
-              class="transition-colors px-3 py-2 rounded-md"
-              :class="isActive('/models') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
+          <li class="dropdown dropdown-hover">
+            <div
+              tabindex="0"
+              role="button"
+              class="transition-colors px-3 py-2 rounded-md inline-flex items-center gap-1 cursor-pointer"
+              :class="isActive('/models/pieces') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
             >
-              Modèles
-            </NuxtLink>
+              Pièces
+            </div>
+            <ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-60">
+              <li>
+                <NuxtLink
+                  to="/model-types"
+                  class="rounded-md px-2 py-1 transition-colors"
+                  :class="isActive('/model-types') ? 'bg-primary/10 text-primary font-semibold' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
+                >
+                  Catégorie de pièce
+                </NuxtLink>
+              </li>
+              <li>
+                <NuxtLink
+                  to="/models/pieces"
+                  class="rounded-md px-2 py-1 transition-colors"
+                  :class="isActive('/models/pieces') ? 'bg-primary/10 text-primary font-semibold' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
+                >
+                  Catalogue de pièce
+                </NuxtLink>
+              </li>
+            </ul>
           </li>
-          <li>
-            <NuxtLink
-              to="/model-types"
-              class="transition-colors px-3 py-2 rounded-md"
-              :class="isActive('/model-types') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
+          <li class="dropdown dropdown-hover">
+            <div
+              tabindex="0"
+              role="button"
+              class="transition-colors px-3 py-2 rounded-md inline-flex items-center gap-1 cursor-pointer"
+              :class="(isActive('/model-types') || isActive('/models/components')) ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
             >
-              Types de modèles
-            </NuxtLink>
+              Composant
+            </div>
+            <ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-64">
+              <li>
+                <NuxtLink
+                  to="/model-types"
+                  class="rounded-md px-2 py-1 transition-colors"
+                  :class="isActive('/model-types') ? 'bg-primary/10 text-primary font-semibold' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
+                >
+                  Catégorie de composant
+                </NuxtLink>
+              </li>
+              <li>
+                <NuxtLink
+                  to="/models/components"
+                  class="rounded-md px-2 py-1 transition-colors"
+                  :class="isActive('/models/components') ? 'bg-primary/10 text-primary font-semibold' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
+                >
+                  Catalogue de composant
+                </NuxtLink>
+              </li>
+            </ul>
           </li>
-          <li>
-            <NuxtLink
-              to="/sites"
-              class="transition-colors px-3 py-2 rounded-md"
-              :class="isActive('/sites') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
+          <li class="dropdown dropdown-hover">
+            <div
+              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'"
             >
-              Sites
-            </NuxtLink>
-          </li>
-          <li>
-            <NuxtLink
-              to="/generator"
-              class="transition-colors px-3 py-2 rounded-md"
-              :class="isActive('/generator') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
-            >
-              Générateur
-            </NuxtLink>
-          </li>
-          <li>
-            <NuxtLink
-              to="/documents"
-              class="transition-colors px-3 py-2 rounded-md"
-              :class="isActive('/documents') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
-            >
-              Documents
-            </NuxtLink>
-          </li>
-          <li>
-            <NuxtLink
-              to="/constructeurs"
-              class="transition-colors px-3 py-2 rounded-md"
-              :class="isActive('/constructeurs') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
-            >
-              Constructeurs
-            </NuxtLink>
+              Ressources liées
+            </div>
+            <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'"
+                >
+                  Sites
+                </NuxtLink>
+              </li>
+              <li>
+                <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'"
+                >
+                  Documents
+                </NuxtLink>
+              </li>
+              <li>
+                <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'"
+                >
+                  Constructeurs
+                </NuxtLink>
+              </li>
+            </ul>
           </li>
         </ul>
       </div>
diff --git a/app/components/model-types/Table.vue b/app/components/model-types/Table.vue
index 85517eb..119f7db 100644
--- a/app/components/model-types/Table.vue
+++ b/app/components/model-types/Table.vue
@@ -2,7 +2,7 @@
   <section class="space-y-4" aria-live="polite">
     <header class="flex flex-col gap-1 sm:flex-row sm:items-end sm:justify-between">
       <div>
-        <h2 class="text-xl font-semibold text-base-content">Types de modèles</h2>
+        <h2 class="text-xl font-semibold text-base-content">Catégories enregistrées</h2>
         <p class="text-sm text-base-content/70">
           {{ totalLabel }}
         </p>
@@ -23,8 +23,8 @@
 
     <div v-else-if="items.length === 0" class="rounded-xl border border-dashed border-base-200 p-10 text-center">
       <IconLucideInbox class="mx-auto h-12 w-12 text-base-content/30" aria-hidden="true" />
-      <h3 class="mt-4 text-lg font-medium text-base-content">Aucun type trouvé</h3>
-      <p class="text-sm text-base-content/70">Ajustez votre recherche ou créez un nouveau type.</p>
+      <h3 class="mt-4 text-lg font-medium text-base-content">Aucune catégorie trouvée</h3>
+      <p class="text-sm text-base-content/70">Ajustez votre recherche ou créez une nouvelle catégorie.</p>
     </div>
 
     <div v-else class="space-y-6">
@@ -155,7 +155,7 @@ const canGoNext = computed(() => props.offset + props.limit < props.total);
 
 const totalLabel = computed(() => {
   if (props.total === 0) return 'Aucun résultat';
-  if (props.total === 1) return '1 type trouvé';
-  return `${props.total} types trouvés`;
+  if (props.total === 1) return '1 catégorie trouvée';
+  return `${props.total} catégories trouvées`;
 });
 </script>
diff --git a/app/pages/machines/index.vue b/app/pages/machines/index.vue
index 6b69a55..7c9b6a6 100644
--- a/app/pages/machines/index.vue
+++ b/app/pages/machines/index.vue
@@ -2,7 +2,7 @@
   <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">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
diff --git a/app/pages/model-types.vue b/app/pages/model-types.vue
index d2a1da7..ee84f5b 100644
--- a/app/pages/model-types.vue
+++ b/app/pages/model-types.vue
@@ -2,9 +2,9 @@
   <main class="mx-auto flex w-full max-w-6xl flex-col gap-8 px-4 py-8 sm:px-6 lg:px-8">
     <header class="space-y-2">
       <p class="text-sm uppercase tracking-wide text-primary">Administration</p>
-      <h1 class="text-3xl font-bold text-base-content">Types de modèles</h1>
+      <h1 class="text-3xl font-bold text-base-content">{{ heading }}</h1>
       <p class="text-base text-base-content/70">
-        Gérez les types de modèles pour les composants et les pièces. Ajoutez, modifiez ou supprimez des entrées avec tri, recherche et pagination.
+        Gérez les catégories utilisées pour structurer les catalogues de composants et de pièces. Ajoutez, modifiez ou supprimez des entrées avec tri, recherche et pagination.
       </p>
     </header>
 
@@ -45,7 +45,7 @@
 </template>
 
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import { useHead } from '#imports';
 import ModelTypesToolbar from '~/components/model-types/Toolbar.vue';
 import ModelTypesTable from '~/components/model-types/Table.vue';
@@ -85,9 +85,11 @@ let activeController: AbortController | null = null;
 
 const { showError, showSuccess } = useToast();
 
-useHead({
-  title: 'Types de modèles',
-});
+const heading = computed(() => (category.value === 'COMPONENT' ? 'Catégorie de composant' : 'Catégorie de pièce'));
+
+useHead(() => ({
+  title: heading.value,
+}));
 
 const extractErrorMessage = (error: unknown) => {
   if (error && typeof error === 'object') {
diff --git a/app/pages/models/components.vue b/app/pages/models/components.vue
index 9a4d2ea..80372f7 100644
--- a/app/pages/models/components.vue
+++ b/app/pages/models/components.vue
@@ -2,7 +2,7 @@
   <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">Modèles de composants</h1>
+        <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">
diff --git a/app/pages/models/index.vue b/app/pages/models/index.vue
index ed13d21..cb9dcfc 100644
--- a/app/pages/models/index.vue
+++ b/app/pages/models/index.vue
@@ -1,17 +1,17 @@
 <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 modèles</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>
     </div>
     <div class="flex flex-wrap items-center justify-center gap-3">
       <NuxtLink to="/models/components" class="btn btn-primary">
-        Modèles de composants
+        Catalogue de composant
       </NuxtLink>
       <NuxtLink to="/models/pieces" class="btn btn-outline">
-        Modèles de pièces
+        Catalogue de pièce
       </NuxtLink>
     </div>
   </div>
diff --git a/app/pages/models/pieces.vue b/app/pages/models/pieces.vue
index 9e41dd4..ab75aea 100644
--- a/app/pages/models/pieces.vue
+++ b/app/pages/models/pieces.vue
@@ -2,7 +2,7 @@
   <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">Modèles de pièces</h1>
+        <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">
diff --git a/app/pages/types.vue b/app/pages/types.vue
index 5507227..cd73b47 100644
--- a/app/pages/types.vue
+++ b/app/pages/types.vue
@@ -6,7 +6,7 @@
     <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">Types de Machines</h2>
+        <h2 class="text-2xl font-bold text-gray-800">Schémas de machine</h2>
         <NuxtLink to="/generator" class="btn btn-primary">
           <IconLucidePlus
             class="w-5 h-5 mr-2"