refactor(machines) : remove TypeMachine skeleton system, simplify machine creation

- Remove TypeEdit*, TypeInfoDisplay, MachineSkeletonSummary, MachineCreatePreview components - Remove machine-skeleton pages and type pages - Remove useMachineTypesApi, useMachineSkeletonEditor, useMachineCreateSelections composables - Add AddEntityToMachineModal for direct entity linking - Update machine detail/create pages for direct custom fields - Fix SearchSelect, category display, and ipartial search filters Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
refacto(tables) : composant DataTable global + migration de toutes les tables
2026-03-05 17:25:23 +01:00 · 2026-03-04 16:05:00 +01:00 · 2026-03-04 10:45:32 +01:00 · 2026-03-04 10:37:59 +01:00 · 2026-03-04 10:08:32 +01:00 · 2026-03-04 10:00:18 +01:00
179 changed files with 18985 additions and 17828 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -22,3 +22,8 @@ logs
 .env
 .env.*
 !.env.example
+
+# Playwright
+e2e/.auth/
+playwright-report/
+test-results/
--- a/README.md
+++ b/README.md
@@ -1,75 +1,155 @@
-# Nuxt Minimal Starter
+# Inventory Frontend

-Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+Interface web de gestion d'inventaire industriel pour **Malio**. Application SPA complète permettant la gestion du parc machines, des pièces, composants, produits, fournisseurs et documents associés.

-## Setup
+## Stack technique

-Make sure to install dependencies:
+| Technologie | Version | Rôle |
+|-------------|---------|------|
+| [Nuxt](https://nuxt.com) | 4 | Framework (SPA, SSR désactivé) |
+| [Vue 3](https://vuejs.org) | 3.5 | Composition API + `<script setup>` |
+| [TypeScript](https://www.typescriptlang.org) | 5.7 | Typage strict sur l'ensemble du projet |
+| [TailwindCSS](https://tailwindcss.com) | 4 | Utility-first CSS |
+| [DaisyUI](https://daisyui.com) | 5 | Composants UI (alertes, modales, badges, etc.) |
+| [Lucide](https://lucide.dev) | via unplugin-icons | Icônes SVG |
+| [Vitest](https://vitest.dev) | 4 | Tests unitaires |
+| [Playwright](https://playwright.dev) | 1.58 | Tests E2E |
+
+## Prérequis
+
+- **Node.js** >= 20
+- **npm**
+- **Backend Symfony** démarré avec l'API sur `http://localhost:8081/api`
+
+## Installation

 ```bash
-# npm
 npm install
-
-# pnpm
-pnpm install
-
-# yarn
-yarn install
-
-# bun
-bun install
 ```

-## Development Server
-
-Start the development server on `http://localhost:3000`:
+## Développement

 ```bash
-# npm
 npm run dev
-
-# pnpm
-pnpm dev
-
-# yarn
-yarn dev
-
-# bun
-bun run dev
 ```

-## Production
+L'application est accessible sur **http://localhost:3001**.

-Build the application for production:
+## Commandes disponibles

-```bash
-# npm
-npm run build
+| Commande | Description |
+|----------|-------------|
+| `npm run dev` | Serveur de développement avec HMR |
+| `npm run build` | Build de production |
+| `npm run lint:fix` | Correction automatique ESLint |
+| `npx nuxi typecheck` | Vérification TypeScript (0 erreurs attendu) |
+| `npm run test` | Tests unitaires Vitest |
+| `npm run test:watch` | Tests unitaires en mode watch |
+| `npm run test:e2e` | Tests E2E Playwright (Chrome) |

-# pnpm
-pnpm build
+## Fonctionnalités

-# yarn
-yarn build
+### Gestion du parc

-# bun
-bun run build
+- **Machines** : création, édition, vue détaillée avec structure hiérarchique (composants, pièces, produits)
+- **Squelettes machines** : templates réutilisables pour créer des machines à partir d'un modèle type
+- **Sites** : gestion multi-sites avec coordonnées de contact
+
+### Catalogues
+
+- **Composants**, **Pièces**, **Produits** : catalogues avec recherche serveur, tri, pagination et filtres
+- **Catégories** : système de types avec champs personnalisés configurables et exigences (contraintes de structure)
+- **Fournisseurs** : gestion des constructeurs/fabricants avec liaison multi-entités
+
+### Documents et traçabilité
+
+- **Documents** : upload, prévisualisation PDF/images, stockage sur système de fichiers avec compression PDF automatique
+- **Journal d'activité** : audit trail complet sur toutes les entités (création, modification, suppression)
+- **Commentaires** : système de tickets/commentaires sur les fiches avec statut ouvert/résolu
+
+### Administration
+
+- **Rôles** : ADMIN, GESTIONNAIRE, VIEWER avec permissions granulaires
+- **Profils** : gestion des utilisateurs et attribution des rôles
+- **Notifications** : badge compteur de commentaires ouverts avec polling
+
+## Architecture
+
+```
+app/
+├── pages/                  # 36 pages (file-based routing)
+├── components/             # 57 composants Vue (auto-imported par Nuxt)
+│   ├── common/             #   Composants UI réutilisables (modales, pagination, recherche)
+│   ├── form/               #   Champs de formulaire (email, téléphone)
+│   ├── layout/             #   Navbar principale
+│   ├── machine/            #   Vue détail et création de machines
+│   │   └── create/         #   Wizard de création machine
+│   ├── model-types/        #   Gestion des types/catégories
+│   └── sites/              #   Modales site (création, édition)
+├── composables/            # 45 composables (logique métier)
+├── shared/                 # Types, utilitaires, validation
+│   ├── utils/              #   Helpers API, champs personnalisés, affichage, erreurs
+│   ├── validation/         #   Validation email, téléphone
+│   └── model/              #   Définitions de structures
+├── services/               # Service layer (wrappers API spécialisés)
+├── middleware/              # Middleware d'auth global (session cookie)
+└── utils/                  # Formatage dates, montants, événements
 ```

-Locally preview production build:
+## Conventions de code

-```bash
-# npm
-npm run preview
+### Composables

-# pnpm
-pnpm preview
+Pattern avec injection de dépendances explicite :

-# yarn
-yarn preview
+```typescript
+interface Deps {
+  machineId: Ref<string>
+  onSave: () => void
+}

-# bun
-bun run preview
+export function useMachineDetail(deps: Deps) {
+  // ...
+}
 ```

-Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
+### Communication entre composants
+
+**Props + Events uniquement** — pas de `provide/inject` dans le projet.
+
+### Appels API
+
+Le composable `useApi.ts` centralise tous les appels HTTP :
+- Cookies de session inclus automatiquement (`credentials: 'include'`)
+- `application/ld+json` pour POST/PUT
+- `application/merge-patch+json` pour PATCH
+- Gestion d'erreurs centralisée avec traduction des messages backend en français
+
+### Styles
+
+Classes DaisyUI standard :
+- Input : `input input-bordered input-sm md:input-md`
+- Select : `select select-bordered select-sm md:select-md`
+- Button : `btn btn-sm md:btn-md btn-primary`
+
+## Authentification
+
+L'application utilise une **authentification par session (cookies)**, pas de JWT.
+
+Le middleware global `profile.global.ts` vérifie la session à chaque navigation :
+- Utilisateur non connecté → redirection vers `/profiles`
+- Route `/admin/*` → accès restreint à `ROLE_ADMIN`
+
+## Tests
+
+- **13 tests unitaires** (Vitest + happy-dom) couvrant composables, utils et composants
+- **3 specs E2E** (Playwright + Chrome) avec setup d'authentification
+
+## Submodule Git
+
+Ce repo est un **submodule** du repo principal [Inventory](https://gitea.malio.fr/MALIO-DEV/Inventory).
+
+Workflow de commit :
+1. Commiter dans ce repo (frontend) en premier
+2. Commiter dans le repo principal pour mettre à jour le pointeur submodule
+3. Pousser les deux repos
--- a/app/app.vue
+++ b/app/app.vue
@@ -1,859 +1,52 @@
 <template>
  <div class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
-    <!-- Navbar -->
-    <div class="navbar bg-base-100 shadow-lg">
-      <div class="navbar-start">
-        <div class="dropdown">
-          <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"
-          >
-            <li class="pt-1 pb-2 lg:hidden">
-              <button
-                class="w-full flex items-center gap-2 rounded-md px-2 py-1 transition-colors text-base-content hover:bg-primary/10 hover:text-primary"
-                @click="openDisplaySettings"
-              >
-                <IconLucideSettings class="w-4 h-4" aria-hidden="true" />
-                Paramètres d'affichage
-              </button>
-            </li>
-            <li>
-              <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'
-                "
-              >
-                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'
-                "
-              >
-                Parc Machines
-              </NuxtLink>
-            </li>
-            <li>
-              <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'
-                "
-              >
-                Squelettes de machine
-              </NuxtLink>
-            </li>
-            <li class="mt-1 border-t border-base-200 pt-2">
-              <button
-                type="button"
-                class="flex w-full items-center justify-between rounded-md px-2 py-1 text-left transition-colors"
-                :class="
-                  isActive('/piece-category') || isActive('/pieces-catalog')
-                    ? 'bg-primary text-primary-content font-semibold shadow-sm'
-                    : 'text-base-content hover:bg-primary/10 hover:text-primary'
-                "
-                @click="toggleDropdown('pieces-mobile')"
-                @keydown.enter.prevent="toggleDropdown('pieces-mobile')"
-                @keydown.space.prevent="toggleDropdown('pieces-mobile')"
-                :aria-expanded="openDropdown === 'pieces-mobile'"
-              >
-                <span>Pièces</span>
-                <IconLucideChevronRight
-                  class="h-4 w-4 transition-transform"
-                  :class="openDropdown === 'pieces-mobile' ? 'rotate-90' : ''"
-                  aria-hidden="true"
-                />
-              </button>
-              <Transition name="nav-dropdown-mobile">
-                <ul
-                  v-if="openDropdown === 'pieces-mobile'"
-                  class="mt-2 space-y-1 rounded-md border border-base-200 bg-base-100 p-2 shadow-sm overflow-hidden"
-                >
-                  <li>
-                    <NuxtLink
-                      to="/pieces-catalog"
-                      class="rounded-md px-2 py-1 transition-colors block"
-                      :class="
-                        isActive('/pieces-catalog')
-                          ? 'bg-primary/10 text-primary font-semibold'
-                          : 'text-base-content hover:bg-primary/10 hover:text-primary'
-                      "
-                    >
-                      Catalogue des pièces
-                    </NuxtLink>
-                  </li>
-                  <li>
-                    <NuxtLink
-                      to="/piece-category"
-                      class="rounded-md px-2 py-1 transition-colors block"
-                      :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>
-                  </li>
-                </ul>
-              </Transition>
-            </li>
-            <li class="mt-1 border-t border-base-200 pt-2">
-              <button
-                type="button"
-                class="flex w-full items-center justify-between rounded-md px-2 py-1 text-left transition-colors"
-                :class="
-                  isActive('/product-category') || isActive('/product-catalog')
-                    ? 'bg-primary text-primary-content font-semibold shadow-sm'
-                    : 'text-base-content hover:bg-primary/10 hover:text-primary'
-                "
-                @click="toggleDropdown('products-mobile')"
-                @keydown.enter.prevent="toggleDropdown('products-mobile')"
-                @keydown.space.prevent="toggleDropdown('products-mobile')"
-                :aria-expanded="openDropdown === 'products-mobile'"
-              >
-                <span>Produits</span>
-                <IconLucideChevronRight
-                  class="h-4 w-4 transition-transform"
-                  :class="openDropdown === 'products-mobile' ? 'rotate-90' : ''"
-                  aria-hidden="true"
-                />
-              </button>
-              <Transition name="nav-dropdown-mobile">
-                <ul
-                  v-if="openDropdown === 'products-mobile'"
-                  class="mt-2 space-y-1 rounded-md border border-base-200 bg-base-100 p-2 shadow-sm overflow-hidden"
-                >
-                  <li>
-                    <NuxtLink
-                      to="/product-catalog"
-                      class="rounded-md px-2 py-1 transition-colors block"
-                      :class="
-                        isActive('/product-catalog')
-                          ? 'bg-primary/10 text-primary font-semibold'
-                          : 'text-base-content hover:bg-primary/10 hover:text-primary'
-                      "
-                    >
-                      Catalogue des produits
-                    </NuxtLink>
-                  </li>
-                  <li>
-                    <NuxtLink
-                      to="/product-category"
-                      class="rounded-md px-2 py-1 transition-colors block"
-                      :class="
-                        isActive('/product-category')
-                          ? 'bg-primary/10 text-primary font-semibold'
-                          : 'text-base-content hover:bg-primary/10 hover:text-primary'
-                      "
-                    >
-                      Catégorie de produit
-                    </NuxtLink>
-                  </li>
-                </ul>
-              </Transition>
-            </li>
-            <li class="mt-1 border-t border-base-200 pt-2">
-              <button
-                type="button"
-                class="flex w-full items-center justify-between rounded-md px-2 py-1 text-left transition-colors"
-                :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'
-                "
-                @click="toggleDropdown('component-mobile')"
-                @keydown.enter.prevent="toggleDropdown('component-mobile')"
-                @keydown.space.prevent="toggleDropdown('component-mobile')"
-                :aria-expanded="openDropdown === 'component-mobile'"
-              >
-                <span>Composant</span>
-                <IconLucideChevronRight
-                  class="h-4 w-4 transition-transform"
-                  :class="openDropdown === 'component-mobile' ? 'rotate-90' : ''"
-                  aria-hidden="true"
-                />
-              </button>
-              <Transition name="nav-dropdown-mobile">
-                <ul
-                  v-if="openDropdown === 'component-mobile'"
-                  class="mt-2 space-y-1 rounded-md border border-base-200 bg-base-100 p-2 shadow-sm overflow-hidden"
-                >
-                  <li>
-                    <NuxtLink
-                      to="/component-catalog"
-                      class="block 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'
-                      "
-                    >
-                      Catalogue des composants
-                    </NuxtLink>
-                  </li>
-                  <li>
-                    <NuxtLink
-                      to="/component-category"
-                      class="block 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'
-                      "
-                    >
-                      Catégorie de composant
-                    </NuxtLink>
-                  </li>
-                </ul>
-              </Transition>
-            </li>
-            <li class="mt-1 border-t border-base-200 pt-2">
-              <button
-                type="button"
-                class="flex w-full items-center justify-between rounded-md px-2 py-1 text-left transition-colors"
-                :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'
-                "
-                @click="toggleDropdown('resources-mobile')"
-                @keydown.enter.prevent="toggleDropdown('resources-mobile')"
-                @keydown.space.prevent="toggleDropdown('resources-mobile')"
-                :aria-expanded="openDropdown === 'resources-mobile'"
-              >
-                <span>Ressources liées</span>
-                <IconLucideChevronRight
-                  class="h-4 w-4 transition-transform"
-                  :class="openDropdown === 'resources-mobile' ? 'rotate-90' : ''"
-                  aria-hidden="true"
-                />
-              </button>
-              <Transition name="nav-dropdown-mobile">
-                <ul
-                  v-if="openDropdown === 'resources-mobile'"
-                  class="mt-2 space-y-1 rounded-md border border-base-200 bg-base-100 p-2 shadow-sm overflow-hidden"
-                >
-                  <li>
-                    <NuxtLink
-                      to="/sites"
-                      class="block 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="block 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="block 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'
-                      "
-                    >
-                      Fournisseurs
-                    </NuxtLink>
-                  </li>
-                </ul>
-              </Transition>
-            </li>
-          </ul>
-        </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"
-            >
-              <IconLucideBoxes class="w-6 h-6" aria-hidden="true" />
-            </div>
-          </div>
-          <NuxtLink to="/" class="btn btn-ghost text-xl">
-            Inventaire Pro
-          </NuxtLink>
-        </div>
-      </div>
-      <div class="navbar-center hidden lg:flex">
-        <ul class="menu menu-horizontal px-1">
-          <li>
-            <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'
-              "
-            >
-              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'
-              "
-            >
-              Parc Machines
-            </NuxtLink>
-          </li>
-          <li>
-            <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'
-              "
-            >
-              Squelettes de machine
-            </NuxtLink>
-          </li>
-          <li
-            class="relative"
-            @mouseenter="setDropdown('pieces-desktop')"
-            @mouseleave="scheduleDropdownClose('pieces-desktop')"
-            @focusin="setDropdown('pieces-desktop')"
-            @focusout="scheduleDropdownClose('pieces-desktop')"
-          >
-            <button
-              type="button"
-              class="inline-flex items-center gap-1 rounded-md px-3 py-2 transition-colors"
-              :class="
-                isActive('/piece-category') || isActive('/pieces-catalog')
-                  ? 'bg-primary text-primary-content font-semibold shadow-sm'
-                  : 'text-base-content hover:bg-primary/10 hover:text-primary'
-              "
-              @click="toggleDropdown('pieces-desktop')"
-              @keydown.enter.prevent="toggleDropdown('pieces-desktop')"
-              @keydown.space.prevent="toggleDropdown('pieces-desktop')"
-              :aria-expanded="openDropdown === 'pieces-desktop'"
-            >
-              Pièces
-              <IconLucideChevronRight
-                class="h-4 w-4 transition-transform"
-                :class="openDropdown === 'pieces-desktop' ? 'rotate-90' : ''"
-                aria-hidden="true"
-              />
-            </button>
-            <Transition name="nav-dropdown-desktop">
-              <ul
-                v-if="openDropdown === 'pieces-desktop'"
-                class="absolute left-0 top-full mt-2 w-60 rounded-lg border border-base-200 bg-base-100 p-2 shadow-lg z-50"
-              >
-                <li>
-                  <NuxtLink
-                    to="/piece-category"
-                    class="block 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'
-                    "
-                  >
-                    Catégorie de pièce
-                  </NuxtLink>
-                </li>
-                <li>
-                  <NuxtLink
-                    to="/pieces-catalog"
-                    class="block 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'
-                    "
-                  >
-                    Catalogue des pièces
-                  </NuxtLink>
-                </li>
-              </ul>
-            </Transition>
-          </li>
-          <li
-            class="relative"
-            @mouseenter="setDropdown('products-desktop')"
-            @mouseleave="scheduleDropdownClose('products-desktop')"
-            @focusin="setDropdown('products-desktop')"
-            @focusout="scheduleDropdownClose('products-desktop')"
-          >
-            <button
-              type="button"
-              class="inline-flex items-center gap-1 rounded-md px-3 py-2 transition-colors"
-              :class="
-                isActive('/product-category') || isActive('/product-catalog')
-                  ? 'bg-primary text-primary-content font-semibold shadow-sm'
-                  : 'text-base-content hover:bg-primary/10 hover:text-primary'
-              "
-              @click="toggleDropdown('products-desktop')"
-              @keydown.enter.prevent="toggleDropdown('products-desktop')"
-              @keydown.space.prevent="toggleDropdown('products-desktop')"
-              :aria-expanded="openDropdown === 'products-desktop'"
-            >
-              Produits
-              <IconLucideChevronRight
-                class="h-4 w-4 transition-transform"
-                :class="openDropdown === 'products-desktop' ? 'rotate-90' : ''"
-                aria-hidden="true"
-              />
-            </button>
-            <Transition name="nav-dropdown-desktop">
-              <ul
-                v-if="openDropdown === 'products-desktop'"
-                class="absolute left-0 top-full mt-2 w-64 rounded-lg border border-base-200 bg-base-100 p-2 shadow-lg z-50"
-              >
-                <li>
-                  <NuxtLink
-                    to="/product-category"
-                    class="block rounded-md px-2 py-1 transition-colors"
-                    :class="
-                      isActive('/product-category')
-                        ? 'bg-primary/10 text-primary font-semibold'
-                        : 'text-base-content hover:bg-primary/10 hover:text-primary'
-                    "
-                  >
-                    Catégorie de produit
-                  </NuxtLink>
-                </li>
-                <li>
-                  <NuxtLink
-                    to="/product-catalog"
-                    class="block rounded-md px-2 py-1 transition-colors"
-                    :class="
-                      isActive('/product-catalog')
-                        ? 'bg-primary/10 text-primary font-semibold'
-                        : 'text-base-content hover:bg-primary/10 hover:text-primary'
-                    "
-                  >
-                    Catalogue des produits
-                  </NuxtLink>
-                </li>
-              </ul>
-            </Transition>
-          </li>
-          <li
-            class="relative"
-            @mouseenter="setDropdown('component-desktop')"
-            @mouseleave="scheduleDropdownClose('component-desktop')"
-            @focusin="setDropdown('component-desktop')"
-            @focusout="scheduleDropdownClose('component-desktop')"
-          >
-            <button
-              type="button"
-              class="inline-flex items-center gap-1 rounded-md px-3 py-2 transition-colors"
-              :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'
-              "
-              @click="toggleDropdown('component-desktop')"
-              @keydown.enter.prevent="toggleDropdown('component-desktop')"
-              @keydown.space.prevent="toggleDropdown('component-desktop')"
-              :aria-expanded="openDropdown === 'component-desktop'"
-            >
-              Composant
-              <IconLucideChevronRight
-                class="h-4 w-4 transition-transform"
-                :class="openDropdown === 'component-desktop' ? 'rotate-90' : ''"
-                aria-hidden="true"
-              />
-            </button>
-            <Transition name="nav-dropdown-desktop">
-              <ul
-                v-if="openDropdown === 'component-desktop'"
-                class="absolute left-0 top-full mt-2 w-64 rounded-lg border border-base-200 bg-base-100 p-2 shadow-lg z-50"
-              >
-                <li>
-                  <NuxtLink
-                    to="/component-category"
-                    class="block 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'
-                    "
-                  >
-                    Catégorie de composant
-                  </NuxtLink>
-                </li>
-                <li>
-                  <NuxtLink
-                    to="/component-catalog"
-                    class="block 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'
-                    "
-                  >
-                    Catalogue des composants
-                  </NuxtLink>
-                </li>
-              </ul>
-            </Transition>
-          </li>
-          <li
-            class="relative"
-            @mouseenter="setDropdown('resources-desktop')"
-            @mouseleave="scheduleDropdownClose('resources-desktop')"
-            @focusin="setDropdown('resources-desktop')"
-            @focusout="scheduleDropdownClose('resources-desktop')"
-          >
-            <button
-              type="button"
-              class="inline-flex items-center gap-1 rounded-md px-3 py-2 transition-colors"
-              :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'
-              "
-              @click="toggleDropdown('resources-desktop')"
-              @keydown.enter.prevent="toggleDropdown('resources-desktop')"
-              @keydown.space.prevent="toggleDropdown('resources-desktop')"
-              :aria-expanded="openDropdown === 'resources-desktop'"
-            >
-              Ressources liées
-              <IconLucideChevronRight
-                class="h-4 w-4 transition-transform"
-                :class="openDropdown === 'resources-desktop' ? 'rotate-90' : ''"
-                aria-hidden="true"
-              />
-            </button>
-            <Transition name="nav-dropdown-desktop">
-              <ul
-                v-if="openDropdown === 'resources-desktop'"
-                class="absolute left-0 top-full mt-2 w-60 rounded-lg border border-base-200 bg-base-100 p-2 shadow-lg z-50"
-              >
-                <li>
-                  <NuxtLink
-                    to="/sites"
-                    class="block 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="block 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="block 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'
-                    "
-                  >
-                    Fournisseurs
-                  </NuxtLink>
-                </li>
-              </ul>
-            </Transition>
-          </li>
-        </ul>
-      </div>
-      <div class="navbar-end">
-        <div class="flex items-center gap-2">
-          <!-- Bouton paramètres d'affichage -->
-          <button
-            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>
+    <LayoutAppNavbar
+      @open-settings="displaySettingsOpen = true"
+      @logout="handleLogout"
+    />

-          <ClientOnly>
-            <div v-if="activeProfile" class="dropdown dropdown-end">
-              <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"
-                  >
-                    {{ activeProfileInitials }}
-                  </span>
-                </div>
-              </div>
-              <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>
-                </li>
-
-                <li>
-                  <NuxtLink to="/profiles/manage" class="justify-between">
-                    Gestion des profils
-                    <IconLucideChevronRight
-                      class="w-4 h-4"
-                      aria-hidden="true"
-                    />
-                  </NuxtLink>
-                </li>
-                <li>
-                  <button
-                    type="button"
-                    class="text-error justify-between"
-                    @click="handleLogout"
-                  >
-                    Déconnexion
-                    <IconLucideLogOut class="w-4 h-4" aria-hidden="true" />
-                  </button>
-                </li>
-              </ul>
-            </div>
-          </ClientOnly>
-        </div>
-      </div>
-    </div>
-
-    <!-- Page Content -->
    <NuxtPage />

-    <!-- Toast Notifications -->
    <ToastContainer />

-    <!-- Paramètres d'affichage -->
+    <CommonConfirmModal />
+
    <DisplaySettings
      :is-open="displaySettingsOpen"
-      @close="closeDisplaySettings"
+      @close="displaySettingsOpen = false"
      @update-settings="handleSettingsUpdate"
    />

-    <!-- Footer -->
    <footer class="footer p-4 bg-neutral text-neutral-content">
      <div class="items-center grid-flow-col">
-        <p>@Malio 2025 · v{{ appVersion }}</p>
+        <p>
+          @Malio 2025 · <NuxtLink to="/changelog" class="link link-hover">v{{ appVersion }}</NuxtLink>
+        </p>
      </div>
    </footer>
  </div>
 </template>

-<script setup>
-import { ref, computed, onMounted, onUnmounted, watch } from "vue";
-import { useRoute, navigateTo, useRuntimeConfig } 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";
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { navigateTo, useRuntimeConfig } from '#imports'
+import { useProfileSession } from '~/composables/useProfileSession'

-// État du modal des paramètres d'affichage
-const displaySettingsOpen = ref(false);
-const { activeProfile, ensureSession, logout } = useProfileSession();
-const runtimeConfig = useRuntimeConfig();
-const appVersion = computed(() => runtimeConfig.public?.appVersion ?? "0.1.0");
+const displaySettingsOpen = ref(false)
+const { ensureSession, logout } = useProfileSession()
+const runtimeConfig = useRuntimeConfig()
+const appVersion = computed(() => (runtimeConfig.public?.appVersion as string) ?? '0.1.0')

-// Route active pour souligner l'onglet sélectionné dans la navbar
-const route = useRoute();
-const isActive = (path) => {
-  if (path === "/") {
-    return route.path === "/";
-  }
-  return route.path.startsWith(path);
-};
-
-// Ouvrir les paramètres d'affichage
-const openDisplaySettings = () => {
-  displaySettingsOpen.value = true;
-};
-
-// Fermer les paramètres d'affichage
-const closeDisplaySettings = () => {
-  displaySettingsOpen.value = false;
-};
-
-// Gérer les mises à jour des paramètres
-const handleSettingsUpdate = (settings) => {
-  console.log("Paramètres d'affichage mis à jour:", settings);
-};
+const handleSettingsUpdate = (_settings: unknown) => {
+  // Placeholder for future persistence
+}

 const handleLogout = async () => {
-  await logout();
-  await navigateTo("/profiles");
-};
-
-const openDropdown = ref(null);
-let dropdownCloseTimer = null;
-
-const setDropdown = (name) => {
-  if (dropdownCloseTimer) {
-    clearTimeout(dropdownCloseTimer);
-    dropdownCloseTimer = null;
-  }
-  if (openDropdown.value !== name) {
-    openDropdown.value = name;
-  }
-};
-
-const scheduleDropdownClose = (name) => {
-  if (dropdownCloseTimer) {
-    clearTimeout(dropdownCloseTimer);
-  }
-  dropdownCloseTimer = setTimeout(() => {
-    if (openDropdown.value === name) {
-      openDropdown.value = null;
-    }
-    dropdownCloseTimer = null;
-  }, 200);
-};
-
-const closeDropdownNow = () => {
-  if (dropdownCloseTimer) {
-    clearTimeout(dropdownCloseTimer);
-    dropdownCloseTimer = null;
-  }
-  openDropdown.value = null;
-};
-
-const toggleDropdown = (name) => {
-  if (openDropdown.value === name) {
-    closeDropdownNow();
-    return;
-  }
-  setDropdown(name);
-};
-
-watch(
-  () => route.fullPath,
-  () => {
-    closeDropdownNow();
-  },
-);
-
-const activeProfileLabel = computed(() => {
-  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() ||
-    "??"
-  );
-});
+  await logout()
+  await navigateTo('/profiles')
+}

 onMounted(async () => {
-  await ensureSession();
-});
-
-onUnmounted(() => {
-  if (dropdownCloseTimer) {
-    clearTimeout(dropdownCloseTimer);
-    dropdownCloseTimer = null;
-  }
-});
+  await ensureSession()
+})
 </script>
-
-<style scoped>
-.nav-dropdown-desktop-enter-active,
-.nav-dropdown-desktop-leave-active {
-  transition: opacity 0.15s ease, transform 0.15s ease;
-}
-.nav-dropdown-desktop-enter-from,
-.nav-dropdown-desktop-leave-to {
-  opacity: 0;
-  transform: translateY(0.25rem);
-}
-.nav-dropdown-desktop-enter-to,
-.nav-dropdown-desktop-leave-from {
-  opacity: 1;
-  transform: translateY(0);
-}
-
-.nav-dropdown-mobile-enter-active,
-.nav-dropdown-mobile-leave-active {
-  transition: max-height 0.2s ease, opacity 0.2s ease;
-}
-.nav-dropdown-mobile-enter-from,
-.nav-dropdown-mobile-leave-to {
-  max-height: 0;
-  opacity: 0;
-}
-.nav-dropdown-mobile-enter-to,
-.nav-dropdown-mobile-leave-from {
-  max-height: 12rem;
-  opacity: 1;
-}
-</style>
--- a/app/assets/LOGO_CARRE_BLANC.png
+++ b/app/assets/LOGO_CARRE_BLANC.png
--- a/app/assets/app.css
+++ b/app/assets/app.css
@@ -6,26 +6,31 @@
  prefersdark: false; /* set as default dark mode (prefers-color-scheme:dark) */
  color-scheme: light; /* color of browser-provided UI */

-  --color-base-100: oklch(98% 0.02 240);
-  --color-base-200: oklch(95% 0.03 240);
-  --color-base-300: oklch(92% 0.04 240);
-  --color-base-content: oklch(20% 0.05 240);
-  --color-primary: oklch(55% 0.3 240);
-  --color-primary-content: oklch(98% 0.01 240);
-  --color-secondary: oklch(70% 0.25 200);
-  --color-secondary-content: oklch(98% 0.01 200);
-  --color-accent: oklch(65% 0.25 160);
-  --color-accent-content: oklch(98% 0.01 160);
-  --color-neutral: oklch(50% 0.05 240);
-  --color-neutral-content: oklch(98% 0.01 240);
-  --color-info: oklch(70% 0.2 220);
-  --color-info-content: oklch(98% 0.01 220);
-  --color-success: oklch(65% 0.25 140);
-  --color-success-content: oklch(98% 0.01 140);
-  --color-warning: oklch(80% 0.25 80);
-  --color-warning-content: oklch(20% 0.05 80);
-  --color-error: oklch(65% 0.3 30);
-  --color-error-content: oklch(98% 0.01 30);
+  /* #FBFAFA — gris clair */
+  --color-base-100: oklch(98% 0.003 0);
+  --color-base-200: oklch(94% 0.01 262);
+  --color-base-300: oklch(90% 0.02 262);
+  --color-base-content: oklch(20% 0.03 262);
+  /* #304998 — bleu Malio */
+  --color-primary: oklch(37% 0.15 262);
+  --color-primary-content: oklch(98% 0.005 262);
+  /* #A5ACD0 — lavande */
+  --color-secondary: oklch(75% 0.055 270);
+  --color-secondary-content: oklch(20% 0.03 270);
+  /* #ED8521 — orange */
+  --color-accent: oklch(71% 0.17 58);
+  --color-accent-content: oklch(98% 0.005 58);
+  /* neutral dérivé du bleu Malio */
+  --color-neutral: oklch(37% 0.08 262);
+  --color-neutral-content: oklch(98% 0.005 262);
+  --color-info: oklch(55% 0.12 262);
+  --color-info-content: oklch(98% 0.005 262);
+  --color-success: oklch(65% 0.2 145);
+  --color-success-content: oklch(98% 0.005 145);
+  --color-warning: oklch(78% 0.15 70);
+  --color-warning-content: oklch(20% 0.05 70);
+  --color-error: oklch(60% 0.25 25);
+  --color-error-content: oklch(98% 0.005 25);

  /* border radius */
  --radius-selector: 1rem;
@@ -114,7 +119,7 @@

 /* Focus visible pour l'accessibilité */
 *:focus-visible {
-  outline: 2px solid #3b82f6;
+  outline: 2px solid #304998;
  outline-offset: 2px;
 }

--- a/app/components/CommentSection.vue
+++ b/app/components/CommentSection.vue
@@ -0,0 +1,212 @@
+<template>
+  <div class="space-y-4">
+    <div class="flex items-center justify-between">
+      <h3 class="text-lg font-semibold flex items-center gap-2">
+        <IconLucideMessageSquare class="w-5 h-5" />
+        Commentaires
+        <span v-if="openComments.length" class="badge badge-warning badge-sm">
+          {{ openComments.length }}
+        </span>
+      </h3>
+      <button
+        v-if="showResolved && resolvedComments.length"
+        type="button"
+        class="btn btn-ghost btn-xs"
+        @click="showResolvedList = !showResolvedList"
+      >
+        {{ showResolvedList ? 'Masquer résolus' : `Voir résolus (${resolvedComments.length})` }}
+      </button>
+    </div>
+
+    <!-- Formulaire d'ajout -->
+    <div class="flex gap-2">
+      <textarea
+        v-model="newContent"
+        class="textarea textarea-bordered flex-1 text-sm"
+        rows="2"
+        placeholder="Ajouter un commentaire..."
+        :disabled="submitting"
+        @keydown.ctrl.enter="handleSubmit"
+      />
+      <button
+        type="button"
+        class="btn btn-primary btn-sm self-end"
+        :disabled="!newContent.trim() || submitting"
+        @click="handleSubmit"
+      >
+        <span v-if="submitting" class="loading loading-spinner loading-xs" />
+        <IconLucideSend v-else class="w-4 h-4" />
+      </button>
+    </div>
+
+    <!-- Liste des commentaires ouverts -->
+    <div v-if="loadingComments" class="flex justify-center py-4">
+      <span class="loading loading-spinner loading-sm" />
+    </div>
+
+    <div v-else-if="openComments.length === 0" class="text-sm text-base-content/50 py-2">
+      Aucun commentaire ouvert.
+    </div>
+
+    <div v-else class="space-y-3">
+      <div
+        v-for="comment in openComments"
+        :key="comment.id"
+        class="bg-base-200 rounded-lg p-3 space-y-2"
+      >
+        <div class="flex items-start justify-between gap-2">
+          <div class="flex-1">
+            <p class="text-sm whitespace-pre-wrap">{{ comment.content }}</p>
+          </div>
+        </div>
+        <div class="flex items-center justify-between text-xs text-base-content/60">
+          <span>
+            {{ comment.authorName }} — {{ formatCommentDate(comment.createdAt) }}
+          </span>
+          <div v-if="canEdit" class="flex gap-1">
+            <button
+              type="button"
+              class="btn btn-success btn-xs gap-1"
+              :disabled="loading"
+              @click="handleResolve(comment.id)"
+            >
+              <IconLucideCheck class="w-3 h-3" />
+              Résoudre
+            </button>
+            <button
+              type="button"
+              class="btn btn-ghost btn-xs text-error"
+              :disabled="loading"
+              @click="handleDelete(comment.id)"
+            >
+              <IconLucideTrash2 class="w-3 h-3" />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Commentaires résolus -->
+    <div v-if="showResolvedList && resolvedComments.length" class="space-y-2">
+      <div class="divider text-xs text-base-content/40">
+        Résolus
+      </div>
+      <div
+        v-for="comment in resolvedComments"
+        :key="comment.id"
+        class="bg-base-200/50 rounded-lg p-3 opacity-60 space-y-1"
+      >
+        <p class="text-sm whitespace-pre-wrap">{{ comment.content }}</p>
+        <div class="flex items-center justify-between text-xs text-base-content/50">
+          <span>{{ comment.authorName }} — {{ formatCommentDate(comment.createdAt) }}</span>
+          <span v-if="comment.resolvedByName">
+            Résolu par {{ comment.resolvedByName }}
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { useComments, type Comment } from '~/composables/useComments'
+import { usePermissions } from '~/composables/usePermissions'
+import IconLucideMessageSquare from '~icons/lucide/message-square'
+import IconLucideSend from '~icons/lucide/send'
+import IconLucideCheck from '~icons/lucide/check'
+import IconLucideTrash2 from '~icons/lucide/trash-2'
+
+const props = defineProps<{
+  entityType: string
+  entityId: string
+  entityName?: string
+  showResolved?: boolean
+}>()
+
+const { canEdit } = usePermissions()
+const {
+  loading,
+  fetchComments,
+  createComment,
+  resolveComment,
+  deleteComment,
+} = useComments()
+
+const comments = ref<Comment[]>([])
+const newContent = ref('')
+const submitting = ref(false)
+const loadingComments = ref(false)
+const showResolvedList = ref(false)
+
+const openComments = computed(() =>
+  comments.value.filter(c => c.status === 'open'),
+)
+
+const resolvedComments = computed(() =>
+  comments.value.filter(c => c.status === 'resolved'),
+)
+
+const formatCommentDate = (dateStr: string): string => {
+  const date = new Date(dateStr)
+  if (Number.isNaN(date.getTime())) return '—'
+  return new Intl.DateTimeFormat('fr-FR', {
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  }).format(date)
+}
+
+const loadComments = async () => {
+  loadingComments.value = true
+  const [openResult, resolvedResult] = await Promise.all([
+    fetchComments(props.entityType, props.entityId, 'open'),
+    props.showResolved
+      ? fetchComments(props.entityType, props.entityId, 'resolved')
+      : Promise.resolve({ success: true, data: [] as Comment[] }),
+  ])
+  const open = openResult.success ? (openResult.data ?? []) : []
+  const resolved = resolvedResult.success ? (resolvedResult.data ?? []) : []
+  comments.value = [...open, ...resolved]
+  loadingComments.value = false
+}
+
+const handleSubmit = async () => {
+  const content = newContent.value.trim()
+  if (!content) return
+  submitting.value = true
+  const result = await createComment(
+    props.entityType,
+    props.entityId,
+    content,
+    props.entityName,
+  )
+  submitting.value = false
+  if (result.success) {
+    newContent.value = ''
+    await loadComments()
+  }
+}
+
+const handleResolve = async (commentId: string) => {
+  const result = await resolveComment(commentId)
+  if (result.success) {
+    await loadComments()
+  }
+}
+
+const handleDelete = async (commentId: string) => {
+  const result = await deleteComment(commentId)
+  if (result.success) {
+    comments.value = comments.value.filter(c => c.id !== commentId)
+  }
+}
+
+onMounted(() => {
+  if (props.entityId) {
+    loadComments()
+  }
+})
+</script>
--- a/app/components/ComponentItem.vue
+++ b/app/components/ComponentItem.vue
--- a/app/components/ComponentModelStructureEditor.vue
+++ b/app/components/ComponentModelStructureEditor.vue
@@ -10,6 +10,7 @@
      :locked-type-label="displayedRootTypeLabel"
      :allow-subcomponents="allowSubcomponents"
      :max-subcomponent-depth="maxSubcomponentDepth"
+      :restricted-mode="restrictedMode"
      is-root
    />
  </div>
@@ -55,6 +56,10 @@ const props = defineProps({
    type: Number,
    default: Infinity,
  },
+  restrictedMode: {
+    type: Boolean,
+    default: false,
+  },
 })

 const emit = defineEmits(['update:modelValue'])
@@ -110,7 +115,7 @@ const applyCustomFieldOptions = (node: Record<string, any> | null | undefined) =
  }

  if (Array.isArray(node.customFields)) {
-    node.customFields = node.customFields.map((field: any) => {
+    node.customFields = node.customFields.map((field: Record<string, any>) => {
      if (!field || typeof field !== 'object') {
        return field
      }
@@ -140,7 +145,7 @@ const applyCustomFieldOptions = (node: Record<string, any> | null | undefined) =
  }

  if (Array.isArray(node.subcomponents)) {
-    node.subcomponents = node.subcomponents.map((sub: any) => {
+    node.subcomponents = node.subcomponents.map((sub: Record<string, any>) => {
      if (!sub || typeof sub !== 'object') {
        return sub
      }
@@ -241,7 +246,7 @@ watch(
 )

 onMounted(async () => {
-  const loaders: Promise<any>[] = []
+  const loaders: Promise<unknown>[] = []
  if (!availablePieceTypes.value.length) {
    loaders.push(loadPieceTypes())
  }
--- a/app/components/ComponentStructureAssignmentNode.vue
+++ b/app/components/ComponentStructureAssignmentNode.vue
@@ -137,6 +137,7 @@
 import { computed, ref, watch } from 'vue';
 import SearchSelect from '~/components/common/SearchSelect.vue';
 import { useApi } from '~/composables/useApi';
+import { extractCollection } from '~/shared/utils/apiHelpers';
 import type {
  ComponentModelPiece,
  ComponentModelProduct,
@@ -243,22 +244,6 @@ const pieceLoadingByPath = ref<Record<string, boolean>>({});
 const productLoadingByPath = ref<Record<string, boolean>>({});
 const componentLoadingByPath = ref<Record<string, boolean>>({});

-const extractCollection = (payload: any): any[] => {
-  if (Array.isArray(payload)) {
-    return payload;
-  }
-  if (Array.isArray(payload?.member)) {
-    return payload.member;
-  }
-  if (Array.isArray(payload?.['hydra:member'])) {
-    return payload['hydra:member'];
-  }
-  if (Array.isArray(payload?.data)) {
-    return payload.data;
-  }
-  return [];
-};
-
 const setLoading = (target: Record<string, boolean>, key: string, value: boolean) => {
  target[key] = value;
 };
@@ -362,7 +347,7 @@ const fetchPieceOptions = async (assignment: StructurePieceAssignment, term = ''

  const definition = assignment.definition || {};
  const requiredTypeId =
-    definition.typePieceId || (definition as any).typePiece?.id || null;
+    definition.typePieceId || definition.typePiece?.id || null;

  const params = new URLSearchParams();
  params.set('itemsPerPage', '50');
@@ -392,7 +377,7 @@ const fetchProductOptions = async (assignment: StructureProductAssignment, term

  const definition = assignment.definition || {};
  const requiredTypeId =
-    definition.typeProductId || (definition as any).typeProduct?.id || null;
+    definition.typeProductId || definition.typeProduct?.id || null;

  const params = new URLSearchParams();
  params.set('itemsPerPage', '50');
@@ -447,14 +432,14 @@ const describePieceRequirement = (assignment: StructurePieceAssignment) => {
  addPart(definition.role);
  const explicitLabel =
    definition.typePieceLabel ||
-    (definition as any).typePiece?.name ||
+    definition.typePiece?.name ||
    (definition.typePieceId ? props.pieceTypeLabelMap[definition.typePieceId] : null) ||
    fallbackType?.name;
  addPart(explicitLabel);

  const family =
    definition.familyCode ||
-    (definition as any).typePiece?.code ||
+    definition.typePiece?.code ||
    fallbackType?.code ||
    null;
  if (family) {
@@ -483,7 +468,7 @@ const getProductOptions = (assignment: StructureProductAssignment) => {
  const definition = assignment.definition;
  const requiredTypeId =
    definition.typeProductId ||
-    (definition as any).typeProduct?.id ||
+    definition.typeProduct?.id ||
    definition.familyCode ||
    null;

@@ -494,7 +479,7 @@ const getProductOptions = (assignment: StructureProductAssignment) => {
    if (!requiredTypeId) {
      return true;
    }
-    if (definition.typeProductId || (definition as any).typeProduct?.id) {
+    if (definition.typeProductId || definition.typeProduct?.id) {
      return (
        product.typeProductId === requiredTypeId ||
        product.typeProduct?.id === requiredTypeId
@@ -550,14 +535,14 @@ const describeProductRequirement = (assignment: StructureProductAssignment) => {
  addPart(definition.role);
  const explicitLabel =
    definition.typeProductLabel ||
-    (definition as any).typeProduct?.name ||
+    definition.typeProduct?.name ||
    (definition.typeProductId ? props.productTypeLabelMap[definition.typeProductId] : null) ||
    fallbackType?.name;
  addPart(explicitLabel);

  const family =
    definition.familyCode ||
-    (definition as any).typeProduct?.code ||
+    definition.typeProduct?.code ||
    fallbackType?.code ||
    null;
  if (family) {
@@ -617,7 +602,7 @@ const getPieceOptions = (assignment: StructurePieceAssignment) => {
  const definition = assignment.definition;
  const requiredTypeId =
    definition.typePieceId ||
-    (definition as any).typePiece?.id ||
+    definition.typePiece?.id ||
    definition.familyCode ||
    null;

@@ -628,7 +613,7 @@ const getPieceOptions = (assignment: StructurePieceAssignment) => {
    if (!requiredTypeId) {
      return true;
    }
-    if (definition.typePieceId || (definition as any).typePiece?.id) {
+    if (definition.typePieceId || definition.typePiece?.id) {
      return (
        piece.typePieceId === requiredTypeId ||
        piece.typePiece?.id === requiredTypeId
--- a/app/components/ConstructeurSelect.vue
+++ b/app/components/ConstructeurSelect.vue
@@ -20,16 +20,16 @@
        </button>
        <div
          v-if="openDropdown"
-          class="absolute z-20 mt-1 w-full max-h-48 overflow-y-auto bg-base-100 border border-base-200 rounded-box shadow-lg flex flex-col"
+          class="absolute z-20 mt-1 w-full max-h-60 overflow-y-auto bg-base-100 border border-base-200 rounded-box shadow-lg flex flex-col"
        >
          <div
-            v-if="options.length === 0"
+            v-if="filteredOptions.length === 0"
            class="px-3 py-2 text-xs text-gray-500"
          >
            Aucun fournisseur trouvé
          </div>
          <button
-            v-for="option in options"
+            v-for="option in filteredOptions"
            :key="option.id"
            type="button"
            class="w-full text-left px-3 py-2 hover:bg-base-200 focus:bg-base-200 focus:outline-none"
@@ -164,8 +164,7 @@ const openCreateModal = ref(false)
 const creating = ref(false)
 const options = ref<ConstructeurSummary[]>([])
 const selectedIds = ref<string[]>([])
-let searchTimeout: ReturnType<typeof setTimeout> | null = null
-let lastSearchTerm = ''
+

 const uniqueOptions = (items: ConstructeurSummary[] = []) => {
  const seen = new Map<string, ConstructeurSummary>()
@@ -182,32 +181,22 @@ const normalizedInitialOptions = computed(() =>
 )

 const applyOptions = (items: ConstructeurSummary[] = []) => {
-  const normalized = uniqueOptions([
+  options.value = uniqueOptions([
    ...normalizedInitialOptions.value,
    ...items,
  ])
-  const limited = normalized.slice(0, 10)
-
-  selectedIds.value.forEach((id) => {
-    if (!limited.some((item) => item.id === id)) {
-      const match =
-        normalized.find((item) => item.id === id) ||
-        constructeurs.value.find((item) => item.id === id)
-      if (match) {
-        if (limited.length >= 10) {
-          limited.pop()
-        }
-        limited.unshift(match)
-      }
-    }
-  })
-
-  options.value = uniqueOptions([
-    ...normalizedInitialOptions.value,
-    ...limited,
-  ])
 }

+const filteredOptions = computed(() => {
+  const term = searchTerm.value.trim().toLowerCase()
+  if (!term) return options.value
+  return options.value.filter((option) =>
+    (option.name ?? '').toLowerCase().includes(term)
+    || (option.email && option.email.toLowerCase().includes(term))
+    || (option.phone && option.phone.toLowerCase().includes(term))
+  )
+})
+
 const createForm = ref({
  name: '',
  email: '',
@@ -246,47 +235,31 @@ const emitSelection = (ids: string[]) => {
  emit('update:modelValue', normalized)
 }

+const extractDataArray = (data: unknown): ConstructeurSummary[] => {
+  if (Array.isArray(data)) {
+    return data as ConstructeurSummary[]
+  }
+  if (data && typeof data === 'object' && 'id' in data) {
+    return [data as ConstructeurSummary]
+  }
+  return []
+}
+
 const ensureOptionsLoaded = async (force = false) => {
-  if (!force && !searchTerm.value && constructeurs.value.length) {
+  if (!force && constructeurs.value.length) {
    applyOptions(constructeurs.value as ConstructeurSummary[])
    return
  }

-  if (!force && searchTerm.value === lastSearchTerm && options.value.length) {
-    return
-  }
-
-  if (options.value.length && !force) {
-    return
-  }
-
-  const result = await searchConstructeurs(searchTerm.value)
+  const result = await searchConstructeurs('')
  if (result.success) {
-    applyOptions(result.data || [])
-    lastSearchTerm = searchTerm.value
+    applyOptions(extractDataArray(result.data))
  }
 }

 const onSearch = () => {
  openDropdown.value = true
-  if (searchTimeout) {
-    clearTimeout(searchTimeout)
-  }
-  searchTimeout = setTimeout(async () => {
-    if (!searchTerm.value && constructeurs.value.length) {
-      applyOptions(constructeurs.value as ConstructeurSummary[])
-      lastSearchTerm = ''
-      return
-    }
-    if (searchTerm.value === lastSearchTerm) {
-      return
-    }
-    const result = await searchConstructeurs(searchTerm.value)
-    if (result.success) {
-      applyOptions(result.data || [])
-      lastSearchTerm = searchTerm.value
-    }
-  }, 250)
+  ensureOptionsLoaded()
 }

 const toggleOption = (option: ConstructeurSummary) => {
@@ -309,17 +282,29 @@ const closeCreateModal = () => {
 }

 const handleCreate = async () => {
-  creating.value = true
-  const payload = { ...createForm.value }
-  if (!payload.phone) {
-    delete payload.phone
+  const trimmedName = createForm.value.name.trim()
+  const duplicate = options.value.find(
+    (o) => (o.name ?? '').toLowerCase() === trimmedName.toLowerCase(),
+  )
+  if (duplicate) {
+    emitSelection([...selectedIds.value, duplicate.id])
+    closeCreateModal()
+    return
  }
-  if (!payload.email) {
-    delete payload.email
+
+  creating.value = true
+  const payload: { name: string; email?: string; phone?: string } = {
+    name: trimmedName,
+  }
+  if (createForm.value.email) {
+    payload.email = createForm.value.email
+  }
+  if (createForm.value.phone) {
+    payload.phone = createForm.value.phone
  }
  const result = await createConstructeur(payload)
  creating.value = false
-  if (result.success) {
+  if (result.success && result.data && !Array.isArray(result.data)) {
    emitSelection([...selectedIds.value, result.data.id])
    searchTerm.value = ''
    closeCreateModal()
@@ -371,9 +356,6 @@ watch(
  constructeurs,
  (list) => {
    applyOptions((list as ConstructeurSummary[]) || [])
-    if (!searchTerm.value) {
-      lastSearchTerm = ''
-    }
  },
  { immediate: true },
 )
@@ -393,9 +375,6 @@ onMounted(() => {

 onBeforeUnmount(() => {
  window.removeEventListener('click', clickHandler)
-  if (searchTimeout) {
-    clearTimeout(searchTimeout)
-  }
 })

 watch(
--- a/app/components/CustomFieldsDisplay.vue
+++ b/app/components/CustomFieldsDisplay.vue
@@ -55,16 +55,16 @@
        </select>

        <!-- Champ de type BOOLEAN -->
-        <div v-else-if="field.type === 'boolean'" class="flex items-center gap-2">
+        <label v-else-if="field.type === 'boolean'" class="flex items-center gap-3 cursor-pointer">
          <input
            v-model="fieldValues[field.id]"
            type="checkbox"
-            class="checkbox checkbox-sm"
+            class="toggle toggle-primary toggle-sm"
            :checked="fieldValues[field.id] === 'true'"
            @change="updateCustomFieldValue(field.id)"
          >
-          <span class="text-sm">{{ fieldValues[field.id] === 'true' ? 'Oui' : 'Non' }}</span>
-        </div>
+          <span class="text-sm" :class="fieldValues[field.id] === 'true' ? 'text-success font-medium' : 'text-base-content/60'">{{ fieldValues[field.id] === 'true' ? 'Oui' : 'Non' }}</span>
+        </label>

        <!-- Champ de type DATE -->
        <input
@@ -81,7 +81,7 @@
 </template>

 <script setup>
-import { ref, reactive, onMounted, watch, computed } from 'vue'
+import { reactive, onMounted, watch, computed } from 'vue'

 const props = defineProps({
  customFields: {
--- a/app/components/DisplaySettings.vue
+++ b/app/components/DisplaySettings.vue
@@ -103,7 +103,7 @@
 <script setup>
 import { ref, onMounted } from 'vue'

-const props = defineProps({
+defineProps({
  isOpen: {
    type: Boolean,
    default: false
--- a/app/components/DocumentPreviewModal.vue
+++ b/app/components/DocumentPreviewModal.vue
@@ -10,9 +10,12 @@
          <div class="min-w-0">
            <h3 class="font-bold text-xl truncate">
              Prévisualisation
+              <span v-if="navTotal > 1" class="text-base font-normal text-gray-500">
+                {{ activeIndex + 1 }} / {{ navTotal }}
+              </span>
            </h3>
            <p class="text-sm text-gray-500 truncate">
-              {{ document?.name || document?.filename }}<span v-if="documentDescription"> • {{ documentDescription }}</span>
+              {{ activeDoc?.name || activeDoc?.filename }}<span v-if="documentDescription"> &bull; {{ documentDescription }}</span>
            </p>
          </div>
          <button type="button" class="btn btn-ghost btn-sm shrink-0" @click="close">
@@ -20,15 +23,35 @@
          </button>
        </header>

-        <section class="flex-1 bg-base-200/40 px-6 py-5 overflow-hidden">
+        <section class="flex-1 bg-base-200/40 px-6 py-5 overflow-hidden relative">
+          <button
+            v-if="hasPrev"
+            type="button"
+            class="absolute left-8 top-1/2 -translate-y-1/2 z-10 btn btn-circle bg-base-100/80 hover:bg-base-100 shadow-lg border-base-300"
+            title="Document précédent (←)"
+            @click="goToPrev"
+          >
+            ❮
+          </button>
+
+          <button
+            v-if="hasNext"
+            type="button"
+            class="absolute right-8 top-1/2 -translate-y-1/2 z-10 btn btn-circle bg-base-100/80 hover:bg-base-100 shadow-lg border-base-300"
+            title="Document suivant (→)"
+            @click="goToNext"
+          >
+            ❯
+          </button>
+
          <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="documentSrc" alt="preview" class="max-h-full max-w-full object-contain">
            </template>

            <template v-else-if="previewType === 'pdf'">
              <iframe
-                :src="document?.path"
+                :src="documentSrc"
                class="w-full h-full bg-white"
                frameborder="0"
                title="Aperçu PDF"
@@ -36,11 +59,11 @@
            </template>

            <template v-else-if="previewType === 'audio'">
-              <audio :src="document?.path" controls class="w-full" />
+              <audio :src="documentSrc" controls class="w-full" />
            </template>

            <template v-else-if="previewType === 'video'">
-              <video :src="document?.path" controls class="w-full h-full bg-black" />
+              <video :src="documentSrc" controls class="w-full h-full bg-black" />
            </template>

            <template v-else-if="previewType === 'text'">
@@ -80,31 +103,110 @@
 </template>

 <script setup>
-import { ref, computed, watch } from 'vue'
-import { getPreviewType, describeDocument } from '~/utils/documentPreview'
+import { ref, computed, watch, onUnmounted } from 'vue'
+import { getPreviewType, describeDocument, canPreviewDocument } from '~/utils/documentPreview'

 const props = defineProps({
  document: {
    type: Object,
-    default: null
+    default: null,
  },
  visible: {
    type: Boolean,
-    default: false
-  }
+    default: false,
+  },
+  documents: {
+    type: Array,
+    default: () => [],
+  },
 })

 const emit = defineEmits(['close'])

-const previewType = computed(() => getPreviewType(props.document))
-const documentDescription = computed(() => describeDocument(props.document))
+// --- Carousel navigation ---
+
+const previewableDocuments = computed(() => {
+  if (!props.documents?.length) return []
+  return props.documents.filter((doc) => canPreviewDocument(doc))
+})
+
+const navTotal = computed(() => previewableDocuments.value.length)
+
+const activeIndex = ref(0)
+
+// Sync index when the parent changes the document prop (e.g. user clicks a different "Consulter")
+watch(
+  () => props.document,
+  (doc) => {
+    if (!doc || !previewableDocuments.value.length) {
+      activeIndex.value = 0
+      return
+    }
+    const idx = previewableDocuments.value.findIndex((d) => d.id === doc.id)
+    activeIndex.value = idx >= 0 ? idx : 0
+  },
+  { immediate: true },
+)
+
+const activeDoc = computed(() => {
+  if (previewableDocuments.value.length && activeIndex.value < previewableDocuments.value.length) {
+    return previewableDocuments.value[activeIndex.value]
+  }
+  return props.document
+})
+
+const hasPrev = computed(() => navTotal.value > 1 && activeIndex.value > 0)
+const hasNext = computed(() => navTotal.value > 1 && activeIndex.value < navTotal.value - 1)
+
+const goToPrev = () => {
+  if (hasPrev.value) activeIndex.value--
+}
+const goToNext = () => {
+  if (hasNext.value) activeIndex.value++
+}
+
+// Keyboard navigation
+const handleKeydown = (e) => {
+  if (!props.visible) return
+  if (e.key === 'ArrowLeft') {
+    e.preventDefault()
+    goToPrev()
+  } else if (e.key === 'ArrowRight') {
+    e.preventDefault()
+    goToNext()
+  } else if (e.key === 'Escape') {
+    e.preventDefault()
+    close()
+  }
+}
+
+watch(
+  () => props.visible,
+  (val) => {
+    if (val) {
+      document.addEventListener('keydown', handleKeydown)
+    } else {
+      document.removeEventListener('keydown', handleKeydown)
+    }
+  },
+)
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', handleKeydown)
+})
+
+// --- Preview logic (uses activeDoc) ---
+
+const previewType = computed(() => getPreviewType(activeDoc.value))
+const documentDescription = computed(() => describeDocument(activeDoc.value))
+const documentSrc = computed(() => activeDoc.value?.fileUrl || activeDoc.value?.path || '')

 const textContent = ref('')
 const textLoading = ref(false)
 const textError = ref('')

 watch(
-  () => props.document,
+  activeDoc,
  async (doc) => {
    textContent.value = ''
    textError.value = ''
@@ -115,22 +217,17 @@ watch(

    try {
      textLoading.value = true
-      const path = doc.path || ''
-      if (path.startsWith('data:')) {
-        const base64Part = path.split(',')[1] || ''
-        if (!base64Part) {
-          textError.value = 'Impossible de lire ce document texte.'
-          return
-        }
-        const decoded = atob(base64Part)
-        textContent.value = decodeURIComponent(escape(decoded))
-      } else {
-        const response = await fetch(path)
-        if (!response.ok) {
-          throw new Error('Téléchargement du document impossible')
-        }
-        textContent.value = await response.text()
+      const url = doc.fileUrl || doc.path || ''
+      if (!url) {
+        textError.value = 'Aucune URL de document disponible.'
+        return
      }
+
+      const response = await fetch(url, { credentials: 'include' })
+      if (!response.ok) {
+        throw new Error('Téléchargement du document impossible')
+      }
+      textContent.value = await response.text()
    } catch (error) {
      console.error('Erreur lors du chargement du texte:', error)
      textError.value = error.message || 'Impossible de lire ce document.'
@@ -138,7 +235,7 @@ watch(
      textLoading.value = false
    }
  },
-  { immediate: true }
+  { immediate: true },
 )

 const close = () => {
@@ -146,11 +243,8 @@ const close = () => {
 }

 const download = () => {
-  if (!props.document?.path) { return }
-  const link = document.createElement('a')
-  link.href = props.document.path
-  link.download = props.document.filename || props.document.name || 'document'
-  link.target = '_blank'
-  link.click()
+  const url = activeDoc.value?.downloadUrl || activeDoc.value?.fileUrl || activeDoc.value?.path
+  if (!url) { return }
+  window.open(url, '_blank')
 }
 </script>
--- a/app/components/DocumentThumbnail.vue
+++ b/app/components/DocumentThumbnail.vue
@@ -40,6 +40,8 @@ type GenericDocument = {
  filename?: string | null;
  mimeType?: string | null;
  path?: string | null;
+  fileUrl?: string | null;
+  downloadUrl?: string | null;
  size?: number | null;
 };

@@ -52,7 +54,7 @@ const normalizedDocument = computed(() => props.document ?? null);

 const canRenderImage = computed(() => {
  const doc = normalizedDocument.value;
-  return !!(doc && isImageDocument(doc) && doc.path);
+  return !!(doc && isImageDocument(doc) && (doc.fileUrl || doc.path));
 });

 const canRenderPdf = computed(() => {
@@ -73,13 +75,14 @@ const appendPdfViewerParams = (src: string) => {

 const previewSrc = computed(() => {
  const doc = normalizedDocument.value;
-  if (!doc || !doc.path) {
+  const url = doc?.fileUrl || doc?.path;
+  if (!doc || !url) {
    return '';
  }
  if (isPdfDocument(doc)) {
-    return appendPdfViewerParams(doc.path);
+    return appendPdfViewerParams(url);
  }
-  return doc.path;
+  return url;
 });

 const thumbnailClass = computed(() => (canRenderImage.value || canRenderPdf.value ? 'h-20 w-16' : 'h-16 w-16'));
--- a/app/components/PieceItem.vue
+++ b/app/components/PieceItem.vue
--- a/app/components/PieceModelStructureEditor.vue
+++ b/app/components/PieceModelStructureEditor.vue
@@ -7,10 +7,10 @@
            Produits inclus par défaut
          </h3>
          <p class="text-xs text-base-content/70">
-            Ces produits s’afficheront lors de la création d’une pièce basée sur cette catégorie.
+            Ces produits s'afficheront lors de la création d'une pièce basée sur cette catégorie.
          </p>
        </div>
-        <button type="button" class="btn btn-outline btn-xs" @click="addProduct">
+        <button v-if="!restrictedMode" type="button" class="btn btn-outline btn-xs" @click="addProduct">
          <IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" />
          Ajouter
        </button>
@@ -35,6 +35,7 @@
                <select
                  v-model="product.typeProductId"
                  class="select select-bordered select-xs"
+                  :disabled="isProductLocked(product)"
                  @change="handleProductTypeSelect(product)"
                >
                  <option value="">
@@ -51,12 +52,22 @@
              </div>
            </div>
            <button
+              v-if="!isProductLocked(product)"
              type="button"
              class="btn btn-error btn-xs btn-square"
              @click="removeProduct(index)"
            >
              <IconLucideTrash class="w-4 h-4" aria-hidden="true" />
            </button>
+            <div v-else class="tooltip tooltip-left" data-tip="Ce produit ne peut pas être supprimé car des éléments utilisent cette catégorie">
+              <button
+                type="button"
+                class="btn btn-ghost btn-xs btn-square opacity-30 cursor-not-allowed"
+                disabled
+              >
+                <IconLucideTrash class="w-4 h-4" aria-hidden="true" />
+              </button>
+            </div>
          </div>
        </li>
      </ul>
@@ -108,7 +119,7 @@
                class="input input-bordered input-xs"
                placeholder="Nom du champ"
              >
-              <select v-model="field.type" class="select select-bordered select-xs">
+              <select v-model="field.type" class="select select-bordered select-xs" :disabled="isFieldLocked(field)">
                <option value="text">
                  Texte
                </option>
@@ -128,7 +139,7 @@
            </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" :disabled="isFieldLocked(field)">
              Obligatoire
            </div>

@@ -137,16 +148,27 @@
              v-model="field.optionsText"
              class="textarea textarea-bordered textarea-xs h-20"
              placeholder="Option 1&#10;Option 2"
+              :disabled="isFieldLocked(field)"
            />
          </div>

          <button
+            v-if="!isFieldLocked(field)"
            type="button"
            class="btn btn-error btn-xs btn-square"
            @click="removeField(index)"
          >
            <IconLucideTrash class="w-4 h-4" aria-hidden="true" />
          </button>
+          <div v-else class="tooltip tooltip-left" data-tip="Ce champ ne peut pas être supprimé car des éléments utilisent cette catégorie">
+            <button
+              type="button"
+              class="btn btn-ghost btn-xs btn-square opacity-30 cursor-not-allowed"
+              disabled
+            >
+              <IconLucideTrash class="w-4 h-4" aria-hidden="true" />
+            </button>
+          </div>
        </div>
      </li>
    </ul>
@@ -181,6 +203,7 @@ type EditorProduct = {

 const props = defineProps<{
  modelValue?: PieceModelStructure | null
+  restrictedMode?: boolean
 }>()

 const emit = defineEmits<{
@@ -330,6 +353,19 @@ const fields = ref<EditorField[]>(hydrateFields(props.modelValue))
 const products = ref<EditorProduct[]>(hydrateProducts(props.modelValue))
 const restState = ref<Record<string, unknown>>(extractRest(props.modelValue))

+const initialFieldUids = ref<Set<string>>(new Set(fields.value.map(f => f.uid)))
+const initialProductUids = ref<Set<string>>(new Set(products.value.map(p => p.uid)))
+
+const isFieldLocked = (field: EditorField): boolean => {
+  return props.restrictedMode === true && initialFieldUids.value.has(field.uid)
+}
+
+const isProductLocked = (product: EditorProduct): boolean => {
+  return props.restrictedMode === true && initialProductUids.value.has(product.uid)
+}
+
+const restrictedMode = computed(() => props.restrictedMode === true)
+
 const applyOrderIndex = (list: EditorField[]): EditorField[] =>
  list.map((field, index) => ({
    ...field,
@@ -438,6 +474,8 @@ watch(
    products.value = hydrateProducts(value)
    products.value.forEach((product) => updateProductTypeMetadata(product))
    lastEmitted = incomingSerialized
+    initialFieldUids.value = new Set(fields.value.map(f => f.uid))
+    initialProductUids.value = new Set(products.value.map(p => p.uid))
  },
  { deep: true },
 )
@@ -472,6 +510,10 @@ const reorderFields = (from: number, to: number) => {
  }

  const [moved] = list.splice(from, 1)
+  if (!moved) {
+    resetDragState()
+    return
+  }
  list.splice(to, 0, moved)
  fields.value = applyOrderIndex(list)
  resetDragState()
--- a/app/components/ProductSelect.vue
+++ b/app/components/ProductSelect.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="space-y-1">
    <SearchSelect
-      :model-value="modelValue"
+      :model-value="modelValue ?? undefined"
      :options="productOptions"
      :loading="loading"
      :placeholder="placeholder"
--- a/app/components/StructureNodeEditor.vue
+++ b/app/components/StructureNodeEditor.vue
@@ -17,6 +17,7 @@
            <select
              v-model="node.typeComposantId"
              class="select select-bordered select-sm w-full"
+              :disabled="isLocked"
              @change="handleComponentTypeSelect(node)"
            >
              <option value="">
@@ -42,6 +43,7 @@
                type="text"
                class="input input-bordered input-xs"
                placeholder="Alias du sous-composant"
+                :disabled="isLocked"
              />
            </div>
          </template>
@@ -52,13 +54,18 @@
          </template>
        </div>
        <button
-          v-if="!isRoot"
+          v-if="!isRoot && !isLocked"
          type="button"
          class="btn btn-error btn-xs btn-square"
          @click="emit('remove')"
        >
          <IconLucideTrash class="w-4 h-4" aria-hidden="true" />
        </button>
+        <div v-else-if="!isRoot && isLocked" class="tooltip tooltip-left" data-tip="Ce sous-composant ne peut pas être supprimé">
+          <button type="button" class="btn btn-ghost btn-xs btn-square opacity-30 cursor-not-allowed" disabled>
+            <IconLucideTrash class="w-4 h-4" aria-hidden="true" />
+          </button>
+        </div>
      </div>

      <div class="px-4 py-4 space-y-5">
@@ -108,7 +115,7 @@
                      class="input input-bordered input-xs"
                      placeholder="Nom du champ"
                    />
-                    <select v-model="field.type" class="select select-bordered select-xs">
+                    <select v-model="field.type" class="select select-bordered select-xs" :disabled="isCustomFieldLocked(index)">
                      <option value="text">Texte</option>
                      <option value="number">Nombre</option>
                      <option value="select">Liste</option>
@@ -117,7 +124,7 @@
                    </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" :disabled="isCustomFieldLocked(index)" />
                    Obligatoire
                  </div>
                  <textarea
@@ -125,15 +132,26 @@
                    v-model="field.optionsText"
                    class="textarea textarea-bordered textarea-xs h-20"
                    placeholder="Option 1&#10;Option 2"
+                    :disabled="isCustomFieldLocked(index)"
                  ></textarea>
                </div>
                <button
+                  v-if="!isCustomFieldLocked(index)"
                  type="button"
                  class="btn btn-error btn-xs btn-square"
                  @click="removeCustomField(index)"
                >
                  <IconLucideTrash class="w-4 h-4" aria-hidden="true" />
                </button>
+                <div v-else class="tooltip tooltip-left" data-tip="Ce champ ne peut pas être supprimé car des éléments utilisent cette catégorie">
+                  <button
+                    type="button"
+                    class="btn btn-ghost btn-xs btn-square opacity-30 cursor-not-allowed"
+                    disabled
+                  >
+                    <IconLucideTrash class="w-4 h-4" aria-hidden="true" />
+                  </button>
+                </div>
              </div>
            </div>
          </div>
@@ -144,7 +162,7 @@
            <h4 :class="headingClass">
              {{ isRoot ? 'Produits inclus par défaut' : 'Produits' }}
            </h4>
-            <button type="button" class="btn btn-outline btn-xs" @click="addProduct">
+            <button v-if="!restrictedMode" type="button" class="btn btn-outline btn-xs" @click="addProduct">
              <IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" />
              Ajouter
            </button>
@@ -179,6 +197,7 @@
                    <select
                      v-model="product.typeProductId"
                      class="select select-bordered select-xs"
+                      :disabled="isProductLocked(index)"
                      @change="handleProductTypeSelect(product)"
                    >
                      <option value="">
@@ -194,9 +213,18 @@
                    </select>
                  </div>
                </div>
-                <button type="button" class="btn btn-error btn-xs btn-square" @click="removeProduct(index)">
+                <button v-if="!isProductLocked(index)" type="button" class="btn btn-error btn-xs btn-square" @click="removeProduct(index)">
                  <IconLucideTrash class="w-4 h-4" aria-hidden="true" />
                </button>
+                <div v-else class="tooltip tooltip-left" data-tip="Ce produit ne peut pas être supprimé car des éléments utilisent cette catégorie">
+                  <button
+                    type="button"
+                    class="btn btn-ghost btn-xs btn-square opacity-30 cursor-not-allowed"
+                    disabled
+                  >
+                    <IconLucideTrash class="w-4 h-4" aria-hidden="true" />
+                  </button>
+                </div>
              </div>
            </div>
          </div>
@@ -207,7 +235,7 @@
            <h4 :class="headingClass">
              {{ isRoot ? 'Pièces incluses par défaut' : 'Pièces' }}
            </h4>
-            <button type="button" class="btn btn-outline btn-xs" @click="addPiece">
+            <button v-if="!restrictedMode" type="button" class="btn btn-outline btn-xs" @click="addPiece">
              <IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" />
              Ajouter
            </button>
@@ -243,6 +271,7 @@
                      <select
                        v-model="piece.typePieceId"
                        class="select select-bordered select-xs"
+                        :disabled="isPieceLocked(index)"
                        @change="handlePieceTypeSelect(piece)"
                      >
                        <option value="">
@@ -262,9 +291,14 @@
                    </p>
                  </div>
                </div>
-                <button type="button" class="btn btn-error btn-xs btn-square" @click="removePiece(index)">
+                <button v-if="!isPieceLocked(index)" type="button" class="btn btn-error btn-xs btn-square" @click="removePiece(index)">
                  <IconLucideTrash class="w-4 h-4" aria-hidden="true" />
                </button>
+                <div v-else class="tooltip tooltip-left" data-tip="Cette pièce ne peut pas être supprimée">
+                  <button type="button" class="btn btn-ghost btn-xs btn-square opacity-30 cursor-not-allowed" disabled>
+                    <IconLucideTrash class="w-4 h-4" aria-hidden="true" />
+                  </button>
+                </div>
              </div>
            </div>
          </div>
@@ -274,7 +308,7 @@
          <div class="flex items-center justify-between gap-2">
            <h4 :class="headingClass">Sous-composants</h4>
            <button
-              v-if="canManageSubcomponents"
+              v-if="canManageSubcomponents && !restrictedMode"
              type="button"
              class="btn btn-outline btn-xs"
              @click="addSubComponent"
@@ -317,6 +351,8 @@
                :product-types="productTypes"
                :allow-subcomponents="childAllowSubcomponents"
                :max-subcomponent-depth="maxSubcomponentDepth"
+                :restricted-mode="restrictedMode"
+                :is-locked="isSubcomponentLocked(index)"
                @remove="removeSubComponent(index)"
              />
            </div>
@@ -359,6 +395,8 @@ const props = withDefaults(defineProps<{
  lockedTypeLabel?: string
  allowSubcomponents?: boolean
  maxSubcomponentDepth?: number
+  restrictedMode?: boolean
+  isLocked?: boolean
 }>(), {
  depth: 0,
  componentTypes: () => [],
@@ -369,10 +407,52 @@ const props = withDefaults(defineProps<{
  lockedTypeLabel: '',
  allowSubcomponents: true,
  maxSubcomponentDepth: Infinity,
+  restrictedMode: false,
+  isLocked: false,
 })

 const emit = defineEmits(['remove'])

+const initialCustomFieldIndices = ref<Set<number>>(new Set())
+const initialPieceIndices = ref<Set<number>>(new Set())
+const initialProductIndices = ref<Set<number>>(new Set())
+const initialSubcomponentIndices = ref<Set<number>>(new Set())
+
+const initializeLockedIndices = () => {
+  if (props.restrictedMode) {
+    const customFieldsLength = Array.isArray(props.node.customFields) ? props.node.customFields.length : 0
+    const piecesLength = Array.isArray(props.node.pieces) ? props.node.pieces.length : 0
+    const productsLength = Array.isArray(props.node.products) ? props.node.products.length : 0
+    const subcomponentsLength = Array.isArray(props.node.subcomponents) ? props.node.subcomponents.length : 0
+
+    initialCustomFieldIndices.value = new Set(Array.from({ length: customFieldsLength }, (_, i) => i))
+    initialPieceIndices.value = new Set(Array.from({ length: piecesLength }, (_, i) => i))
+    initialProductIndices.value = new Set(Array.from({ length: productsLength }, (_, i) => i))
+    initialSubcomponentIndices.value = new Set(Array.from({ length: subcomponentsLength }, (_, i) => i))
+  }
+}
+
+initializeLockedIndices()
+
+const isCustomFieldLocked = (index: number): boolean => {
+  return props.restrictedMode === true && initialCustomFieldIndices.value.has(index)
+}
+
+const isPieceLocked = (index: number): boolean => {
+  return props.restrictedMode === true && initialPieceIndices.value.has(index)
+}
+
+const isProductLocked = (index: number): boolean => {
+  return props.restrictedMode === true && initialProductIndices.value.has(index)
+}
+
+const isSubcomponentLocked = (index: number): boolean => {
+  return props.restrictedMode === true && initialSubcomponentIndices.value.has(index)
+}
+
+const isLocked = computed(() => props.isLocked === true)
+const restrictedMode = computed(() => props.restrictedMode === true)
+
 const componentTypes = computed(() => props.componentTypes ?? [])
 const pieceTypes = computed(() => props.pieceTypes ?? [])
 const productTypes = computed(() => props.productTypes ?? [])
@@ -460,7 +540,7 @@ const getPieceTypeLabel = (id?: string) => {
  return formatModelTypeOption(pieceTypeMap.value.get(id))
 }

-const getProductTypeLabel = (id?: string) => {
+const _getProductTypeLabel = (id?: string) => {
  if (!id) return ''
  return formatModelTypeOption(productTypeMap.value.get(id))
 }
@@ -744,10 +824,9 @@ const customFieldReorderClass = (index: number) => {

 const addCustomField = () => {
  ensureArray('customFields')
-  const nextIndex = Array.isArray(props.node.customFields)
-    ? props.node.customFields.length
-    : 0
-  props.node.customFields.push({
+  const fields = props.node.customFields!
+  const nextIndex = fields.length
+  fields.push({
    name: '',
    type: 'text',
    required: false,
@@ -766,7 +845,7 @@ const removeCustomField = (index: number) => {

 const addPiece = () => {
  ensureArray('pieces')
-  props.node.pieces.push({
+  props.node.pieces!.push({
    typePieceId: '',
    typePieceLabel: '',
    reference: '',
@@ -782,7 +861,7 @@ const removePiece = (index: number) => {

 const addProduct = () => {
  ensureArray('products')
-  props.node.products.push({
+  props.node.products!.push({
    typeProductId: '',
    typeProductLabel: '',
    familyCode: '',
@@ -830,6 +909,7 @@ const moveItemInPlace = <T,>(list: T[], from: number, to: number) => {
  }
  const updated = list.slice()
  const [item] = updated.splice(from, 1)
+  if (item === undefined) return
  updated.splice(to, 0, item)
  list.splice(0, list.length, ...updated)
 }
--- a/app/components/ToastContainer.vue
+++ b/app/components/ToastContainer.vue
@@ -24,7 +24,7 @@
                class="w-4 h-4"
                aria-hidden="true"
              />
-              <IconLucideX
+              <IconLucideCircleX
                v-else-if="toast.type === 'error'"
                class="w-4 h-4"
                aria-hidden="true"
@@ -64,6 +64,7 @@
 import { useToast } from '~/composables/useToast'
 import IconLucideCheck from '~icons/lucide/check'
 import IconLucideX from '~icons/lucide/x'
+import IconLucideCircleX from '~icons/lucide/circle-x'
 import IconLucideAlertTriangle from '~icons/lucide/alert-triangle'
 import IconLucideInfo from '~icons/lucide/info'

--- a/app/components/TypeEditActionsBar.vue
+++ b/app/components/TypeEditActionsBar.vue
@@ -1,34 +0,0 @@
-<template>
-  <div class="card bg-base-100 shadow-lg">
-    <div class="card-body">
-      <div class="card-actions justify-end">
-        <button type="button" class="btn btn-outline" @click="$emit('reset')">
-          Réinitialiser
-        </button>
-        <button type="submit" class="btn btn-primary" :disabled="saving">
-          <IconLucideRefreshCw
-            v-if="saving"
-            class="w-5 h-5 mr-2 animate-spin"
-            aria-hidden="true"
-          />
-          <IconLucideCheck v-else class="w-5 h-5 mr-2" aria-hidden="true" />
-          {{ saving ? 'Sauvegarde...' : 'Sauvegarder les modifications' }}
-        </button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import IconLucideRefreshCw from '~icons/lucide/refresh-cw'
-import IconLucideCheck from '~icons/lucide/check'
-
-defineProps({
-  saving: {
-    type: Boolean,
-    default: false
-  }
-})
-
-defineEmits(['reset'])
-</script>
--- a/app/components/TypeEditBaseInfoSection.vue
+++ b/app/components/TypeEditBaseInfoSection.vue
@@ -1,105 +0,0 @@
-<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>
-
-      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <div class="form-control">
-          <label class="label">
-            <span class="label-text">Nom du type</span>
-            <span class="label-text-alt text-error">*</span>
-          </label>
-          <input
-            v-model="nameModel"
-            type="text"
-            placeholder="Nom du type de machine"
-            class="input input-bordered"
-            required
-          >
-        </div>
-
-        <div class="form-control">
-          <label class="label">
-            <span class="label-text">Catégorie</span>
-          </label>
-          <input
-            v-model="categoryModel"
-            type="text"
-            placeholder="Catégorie du type"
-            class="input input-bordered"
-          >
-        </div>
-
-        <div class="form-control md:col-span-2">
-          <label class="label">
-            <span class="label-text">Description</span>
-          </label>
-          <textarea
-            v-model="descriptionModel"
-            placeholder="Description du type de machine"
-            class="textarea textarea-bordered h-24"
-          />
-        </div>
-
-        <div class="form-control">
-          <label class="label">
-            <span class="label-text">Fréquence de maintenance</span>
-          </label>
-          <input
-            v-model="maintenanceModel"
-            type="text"
-            placeholder="ex: Mensuelle, Trimestrielle"
-            class="input input-bordered"
-          >
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { computed } from 'vue'
-
-const props = defineProps({
-  name: {
-    type: String,
-    default: ''
-  },
-  category: {
-    type: String,
-    default: ''
-  },
-  description: {
-    type: String,
-    default: ''
-  },
-  maintenanceFrequency: {
-    type: String,
-    default: ''
-  }
-})
-
-const emit = defineEmits(['update:name', 'update:category', 'update:description', 'update:maintenanceFrequency'])
-
-const nameModel = computed({
-  get: () => props.name,
-  set: value => emit('update:name', value)
-})
-
-const categoryModel = computed({
-  get: () => props.category,
-  set: value => emit('update:category', value)
-})
-
-const descriptionModel = computed({
-  get: () => props.description,
-  set: value => emit('update:description', value)
-})
-
-const maintenanceModel = computed({
-  get: () => props.maintenanceFrequency,
-  set: value => emit('update:maintenanceFrequency', value)
-})
-</script>
--- a/app/components/TypeEditComponentRequirementsSection.vue
+++ b/app/components/TypeEditComponentRequirementsSection.vue
@@ -1,95 +0,0 @@
-<template>
-  <RequirementListEditor
-    v-model="requirements"
-    :type-options="componentTypes"
-    type-field="typeComposantId"
-    :labels="labels"
-    :default-requirement="createDefaultRequirement"
-    :required-fallback="true"
-    :min-fallback="1"
-    :type-loading="loadingComponentTypes"
-  />
-</template>
-
-<script setup lang="ts">
-import { computed, onMounted } from 'vue'
-import RequirementListEditor from '~/components/common/RequirementListEditor.vue'
-import { useComponentTypes } from '~/composables/useComponentTypes'
-
-type Requirement = Record<string, unknown> & {
-  id?: string | number
-  typeComposantId?: string | number | null
-  label?: string
-  minCount?: number | null
-  maxCount?: number | null
-  required?: boolean | null
-  allowNewModels?: boolean | null
-}
-
-type Labels = {
-  headerTitle: string
-  addButton: string
-  description: string
-  emptyState: string
-  typeSelectLabel: string
-  typePlaceholder: string
-  labelFieldLabel: string
-  labelFieldHelper: string
-  labelPlaceholder: string
-  minLabel: string
-  maxLabel: string
-  maxHelper: string
-  requiredLabel: string
-  allowNewModelsLabel: string
-}
-
-const props = defineProps({
-  modelValue: {
-    type: Array as () => Requirement[],
-    default: () => [],
-  },
-})
-
-const emit = defineEmits(['update:modelValue'])
-
-const { componentTypes, loadComponentTypes, loadingComponentTypes } = useComponentTypes()
-
-const requirements = computed({
-  get: () => props.modelValue,
-  set: (value: Requirement[]) => emit('update:modelValue', value),
-})
-
-const createDefaultRequirement = (): Requirement => ({
-  id: undefined,
-  typeComposantId: null,
-  label: '',
-  minCount: 1,
-  maxCount: null,
-  required: true,
-  allowNewModels: true,
-})
-
-const labels: Labels = {
-  headerTitle: 'Familles de composants',
-  addButton: 'Ajouter une famille',
-  description:
-    "Chaque ligne correspond à un groupe de composants attendus pour le type de machine. Sélectionnez le type de composant (famille), puis définissez le nombre minimal/maximal et si l'utilisateur peut créer un nouveau modèle lors de l'instanciation d'une machine.",
-  emptyState: 'Aucun groupe configuré. Ajoutez votre première famille de composants.',
-  typeSelectLabel: 'Type de composant',
-  typePlaceholder: 'Sélectionner un type',
-  labelFieldLabel: 'Libellé',
-  labelFieldHelper: 'Optionnel',
-  labelPlaceholder: 'Ex: Sangles principales',
-  minLabel: 'Minimum requis',
-  maxLabel: 'Maximum autorisé',
-  maxHelper: 'Laisser vide pour illimité',
-  requiredLabel: 'Requis',
-  allowNewModelsLabel: "Autoriser la création de nouveaux modèles lors de l'instanciation",
-}
-
-onMounted(async () => {
-  if (!componentTypes.value.length) {
-    await loadComponentTypes()
-  }
-})
-</script>
--- a/app/components/TypeEditCustomFieldsSection.vue
+++ b/app/components/TypeEditCustomFieldsSection.vue
@@ -1,356 +0,0 @@
-<template>
-  <div class="card bg-base-100 shadow-lg">
-    <div class="card-body">
-      <div class="flex items-center justify-between mb-4">
-        <div class="flex items-center gap-2">
-          <button
-            type="button"
-            class="btn btn-ghost btn-sm p-1"
-            @click="toggleSection"
-          >
-            <IconLucideChevronRight
-              class="w-4 h-4 transition-transform duration-200"
-              :class="{ 'rotate-90': expanded }"
-              aria-hidden="true"
-            />
-          </button>
-          <h3 class="card-title text-lg">
-            Champs personnalisés du type
-          </h3>
-          <span class="badge badge-primary">{{ fields.length }}</span>
-        </div>
-      </div>
-
-      <div v-if="expanded" class="space-y-4">
-        <div
-          v-for="(field, fieldIndex) in fields"
-          :key="field.id || field.customFieldId || field.__key || `field-${fieldIndex}`"
-          class="border border-gray-200 rounded-lg p-4 bg-gray-50 transition-colors"
-          :class="fieldReorderClass(fieldIndex)"
-          draggable="true"
-          @dragstart="onFieldDragStart(fieldIndex, $event)"
-          @dragenter="onFieldDragEnter(fieldIndex)"
-          @dragover.prevent
-          @drop="onFieldDrop(fieldIndex)"
-          @dragend="onFieldDragEnd"
-        >
-          <div class="flex items-center justify-between mb-3">
-            <div class="flex items-center gap-2">
-              <button
-                type="button"
-                class="btn btn-ghost btn-xs btn-square cursor-grab active:cursor-grabbing"
-                title="Réorganiser"
-                draggable="false"
-              >
-                <IconLucideGripVertical class="w-4 h-4" aria-hidden="true" />
-              </button>
-              <button
-                type="button"
-                class="btn btn-ghost btn-xs p-1"
-                title="Plier / déplier le champ"
-                @click="toggleField(fieldIndex)"
-              >
-                <IconLucideChevronRight
-                  class="w-4 h-4 transition-transform duration-200"
-                  :class="{ 'rotate-90': isFieldExpanded(fieldIndex) }"
-                  aria-hidden="true"
-                />
-              </button>
-              <IconLucideListChecks class="w-4 h-4 text-blue-500" aria-hidden="true" />
-              <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"
-              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>
-          </div>
-
-          <div v-if="isFieldExpanded(fieldIndex)" class="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <div class="form-control">
-              <label class="label">
-                <span class="label-text">Nom du champ</span>
-                <span class="label-text-alt text-error">*</span>
-              </label>
-              <input
-                :value="field.name"
-                type="text"
-                placeholder="Nom du champ"
-                class="input input-bordered input-sm"
-                required
-                @input="updateField(fieldIndex, { name: $event.target.value })"
-              >
-            </div>
-
-            <div class="form-control">
-              <label class="label">
-                <span class="label-text">Type de champ</span>
-                <span class="label-text-alt text-error">*</span>
-              </label>
-              <select
-                class="select select-bordered select-sm"
-                required
-                :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>
-              </select>
-            </div>
-          </div>
-
-          <div v-if="isFieldExpanded(fieldIndex)" class="mt-3">
-            <div class="flex items-center gap-2">
-              <input
-                type="checkbox"
-                class="checkbox checkbox-sm"
-                :checked="field.required"
-                @change="updateField(fieldIndex, { required: $event.target.checked })"
-              >
-              <span class="text-sm">Champ obligatoire</span>
-            </div>
-          </div>
-
-          <div
-            v-if="isFieldExpanded(fieldIndex) && field.type === 'select'"
-            class="mt-3"
-          >
-            <label class="label">
-              <span class="label-text">Options de la liste</span>
-              <span class="label-text-alt">Une option par ligne</span>
-            </label>
-            <textarea
-              :value="field.optionsText || ''"
-              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)"
-            />
-          </div>
-        </div>
-
-        <div class="flex justify-end">
-          <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" 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>
-</template>
-
-<script setup>
-import { computed, ref, watch } from 'vue'
-import IconLucideChevronRight from '~icons/lucide/chevron-right'
-import IconLucideListChecks from '~icons/lucide/list-checks'
-import IconLucideX from '~icons/lucide/x'
-import IconLucidePlus from '~icons/lucide/plus'
-import IconLucideGripVertical from '~icons/lucide/grip-vertical'
-
-const props = defineProps({
-  modelValue: {
-    type: Array,
-    default: () => []
-  },
-  allExpanded: {
-    type: Boolean,
-    default: false
-  },
-  expandAllTrigger: {
-    type: Number,
-    default: 0
-  }
-})
-
-const emit = defineEmits(['update:modelValue'])
-
-const fields = computed({
-  get: () => props.modelValue,
-  set: value => emit('update:modelValue', value)
-})
-
-const createFieldKey = () => `cf-${Math.random().toString(16).slice(2)}-${Date.now()}`
-
-const expanded = ref(false)
-const expandedFields = ref([])
-const draggingFieldIndex = ref(null)
-const fieldDropTargetIndex = ref(null)
-
-const applyOrderIndex = (list = []) => {
-  if (!Array.isArray(list)) { return [] }
-  list.forEach((field, index) => {
-    if (field && typeof field === 'object') {
-      field.orderIndex = index
-      if (typeof field.__key !== 'string' || !field.__key) {
-        field.__key = createFieldKey()
-      }
-    }
-  })
-  return list
-}
-
-const createEmptyField = () => ({
-  name: '',
-  type: '',
-  required: false,
-  optionsText: '',
-  orderIndex: fields.value.length,
-  __key: createFieldKey()
-})
-
-const resetDragState = () => {
-  draggingFieldIndex.value = null
-  fieldDropTargetIndex.value = null
-}
-
-const reorderFields = (from, to) => {
-  const list = Array.isArray(fields.value) ? fields.value.slice() : []
-  if (from === to || from < 0 || to < 0 || from >= list.length || to >= list.length) {
-    resetDragState()
-    return
-  }
-  const [moved] = list.splice(from, 1)
-  list.splice(to, 0, moved)
-  if (Array.isArray(expandedFields.value)) {
-    const expandedCopy = expandedFields.value.slice()
-    const [expandedState] = expandedCopy.splice(from, 1)
-    expandedCopy.splice(to, 0, expandedState)
-    expandedFields.value = expandedCopy
-  }
-  fields.value = applyOrderIndex(list)
-  resetDragState()
-}
-
-watch(
-  () => props.expandAllTrigger,
-  () => {
-    expanded.value = props.allExpanded
-    expandedFields.value = fields.value.map(() => props.allExpanded)
-  },
-  { immediate: true }
-)
-
-watch(
-  () => fields.value.length,
-  (length) => {
-    expandedFields.value = Array.from({ length }, (_, index) => expandedFields.value[index] ?? props.allExpanded)
-  }
-)
-
-const toggleSection = () => {
-  expanded.value = !expanded.value
-}
-
-const ensureFieldState = (index) => {
-  if (expandedFields.value[index] === undefined) {
-    expandedFields.value[index] = props.allExpanded
-  }
-}
-
-const isFieldExpanded = (index) => {
-  ensureFieldState(index)
-  return expandedFields.value[index]
-}
-
-const toggleField = (index) => {
-  ensureFieldState(index)
-  expandedFields.value[index] = !expandedFields.value[index]
-}
-
-const addField = () => {
-  const next = Array.isArray(fields.value) ? fields.value.slice() : []
-  next.push(createEmptyField())
-  fields.value = applyOrderIndex(next)
-  expandedFields.value.push(true)
-  expanded.value = true
-}
-
-const removeField = (index) => {
-  const next = Array.isArray(fields.value)
-    ? fields.value.filter((_, i) => i !== index)
-    : []
-  fields.value = applyOrderIndex(next)
-  expandedFields.value.splice(index, 1)
-}
-
-const updateField = (index, patch) => {
-  const next = Array.isArray(fields.value) ? fields.value.slice() : []
-  next[index] = { ...next[index], ...patch }
-  fields.value = applyOrderIndex(next)
-}
-
-const updateOptions = (index, value) => {
-  updateField(index, {
-    optionsText: value.replace(/\r\n/g, '\n').replace(/\r/g, '\n')
-  })
-}
-
-const onFieldDragStart = (index, event) => {
-  draggingFieldIndex.value = index
-  fieldDropTargetIndex.value = index
-  if (event.dataTransfer) {
-    event.dataTransfer.effectAllowed = 'move'
-  }
-}
-
-const onFieldDragEnter = (index) => {
-  if (draggingFieldIndex.value === null) { return }
-  fieldDropTargetIndex.value = index
-}
-
-const onFieldDrop = (index) => {
-  if (draggingFieldIndex.value === null) {
-    resetDragState()
-    return
-  }
-  reorderFields(draggingFieldIndex.value, index)
-}
-
-const onFieldDragEnd = () => {
-  resetDragState()
-}
-
-const fieldReorderClass = (index) => {
-  if (draggingFieldIndex.value === index) {
-    return 'border-dashed border-primary'
-  }
-  if (
-    draggingFieldIndex.value !== null &&
-    fieldDropTargetIndex.value === index &&
-    draggingFieldIndex.value !== index
-  ) {
-    return 'border-primary border-dashed bg-primary/5'
-  }
-  return ''
-}
-</script>
--- a/app/components/TypeEditForm.vue
+++ b/app/components/TypeEditForm.vue
@@ -1,161 +0,0 @@
-<template>
-  <form class="space-y-6" @submit.prevent="handleSubmit">
-    <TypeEditToolbar :all-expanded="allExpanded" @toggle="toggleAllSections" />
-
-    <TypeEditBaseInfoSection
-      v-model:name="formData.name"
-      v-model:category="formData.category"
-      v-model:description="formData.description"
-      v-model:maintenance-frequency="formData.maintenanceFrequency"
-    />
-
-    <TypeEditCustomFieldsSection
-      :model-value="formData.customFields"
-      :all-expanded="allExpanded"
-      :expand-all-trigger="expandAllTrigger"
-      @update:model-value="(value) => (formData.customFields = value)"
-    />
-
-    <TypeEditComponentRequirementsSection
-      :model-value="formData.componentRequirements"
-      @update:model-value="(value) => (formData.componentRequirements = value)"
-    />
-
-    <TypeEditPieceRequirementsSection
-      :model-value="formData.pieceRequirements"
-      @update:model-value="(value) => (formData.pieceRequirements = value)"
-    />
-
-    <TypeEditProductRequirementsSection
-      :model-value="formData.productRequirements"
-      @update:model-value="(value) => (formData.productRequirements = value)"
-    />
-
-    <TypeEditActionsBar :saving="saving" @reset="resetForm" />
-  </form>
-</template>
-
-<script setup>
-import { reactive, ref, watch } from 'vue'
-import TypeEditActionsBar from '~/components/TypeEditActionsBar.vue'
-import TypeEditBaseInfoSection from '~/components/TypeEditBaseInfoSection.vue'
-import TypeEditCustomFieldsSection from '~/components/TypeEditCustomFieldsSection.vue'
-import TypeEditToolbar from '~/components/TypeEditToolbar.vue'
-import TypeEditComponentRequirementsSection from '~/components/TypeEditComponentRequirementsSection.vue'
-import TypeEditPieceRequirementsSection from '~/components/TypeEditPieceRequirementsSection.vue'
-import TypeEditProductRequirementsSection from '~/components/TypeEditProductRequirementsSection.vue'
-
-const props = defineProps({
-  modelValue: {
-    type: Object,
-    required: true
-  },
-  saving: {
-    type: Boolean,
-    default: false
-  }
-})
-
-const emit = defineEmits(['update:modelValue', 'submit'])
-
-const deepClone = value => JSON.parse(JSON.stringify(value))
-
-const createFieldKey = () => `cf-${Math.random().toString(16).slice(2)}-${Date.now()}`
-
-const normalizeCustomField = (field = {}, index = 0) => {
-  const clone = deepClone(field)
-  if (clone.type === 'select') {
-    if (typeof clone.optionsText !== 'string' || !clone.optionsText.length) {
-      if (Array.isArray(clone.options)) {
-        clone.optionsText = clone.options.map(option => String(option).trim()).filter(Boolean).join('\n')
-      } else {
-        clone.optionsText = ''
-      }
-    }
-  }
-  const currentOrder =
-    typeof clone?.orderIndex === 'number' ? clone.orderIndex : index
-  clone.orderIndex = currentOrder
-  if (typeof clone?.__key !== 'string' || !clone.__key) {
-    clone.__key = createFieldKey()
-  }
-  return clone
-}
-
-const withNormalizedOrder = (items = []) => {
-  if (!Array.isArray(items)) { return [] }
-  return items
-    .map((item, index) => normalizeCustomField(item, index))
-    .sort((a, b) => (a.orderIndex ?? 0) - (b.orderIndex ?? 0))
-    .map((item, index) => ({ ...item, orderIndex: index }))
-}
-
-const createDefaultForm = (source = {}) => ({
-  name: source.name || '',
-  description: source.description || '',
-  category: source.category || '',
-  maintenanceFrequency: source.maintenanceFrequency || '',
-  customFields: withNormalizedOrder(source.customFields || []),
-  componentRequirements: withNormalizedOrder(source.componentRequirements || []),
-  pieceRequirements: withNormalizedOrder(source.pieceRequirements || []),
-  productRequirements: withNormalizedOrder(source.productRequirements || []),
-})
-
-const formData = reactive(createDefaultForm(props.modelValue))
-const allExpanded = ref(false)
-const expandAllTrigger = ref(0)
-
-let syncingFromParent = false
-const toPlainObject = value => JSON.parse(JSON.stringify(value))
-const lastSnapshot = ref(toPlainObject(createDefaultForm(props.modelValue)))
-
-watch(
-  () => props.modelValue,
-  (value) => {
-    const normalized = createDefaultForm(value)
-    if (JSON.stringify(normalized) === JSON.stringify(lastSnapshot.value)) {
-      return
-    }
-
-    syncingFromParent = true
-    Object.assign(formData, normalized)
-    lastSnapshot.value = toPlainObject(normalized)
-    syncingFromParent = false
-  },
-  { deep: true }
-)
-
-watch(
-  formData,
-  (value) => {
-    if (syncingFromParent) { return }
-    const normalized = createDefaultForm(value)
-    if (JSON.stringify(normalized) === JSON.stringify(lastSnapshot.value)) {
-      return
-    }
-
-    lastSnapshot.value = toPlainObject(normalized)
-    emit('update:modelValue', normalized)
-  },
-  { deep: true }
-)
-
-const toggleAllSections = () => {
-  allExpanded.value = !allExpanded.value
-  expandAllTrigger.value += 1
-}
-
-const resetForm = () => {
-  const normalized = createDefaultForm(props.modelValue)
-  syncingFromParent = true
-  Object.assign(formData, normalized)
-  lastSnapshot.value = toPlainObject(normalized)
-  syncingFromParent = false
-  allExpanded.value = false
-  expandAllTrigger.value += 1
-}
-
-const handleSubmit = () => {
-  emit('submit')
-}
-</script>
--- a/app/components/TypeEditPieceRequirementsSection.vue
+++ b/app/components/TypeEditPieceRequirementsSection.vue
@@ -1,101 +0,0 @@
-<template>
-  <RequirementListEditor
-    v-model="requirements"
-    :type-options="pieceTypes"
-    type-field="typePieceId"
-    :labels="labels"
-    :default-requirement="createDefaultRequirement"
-    :required-fallback="false"
-    :min-fallback="0"
-    :type-loading="loadingPieceTypes"
-  />
-</template>
-
-<script setup lang="ts">
-import { computed, onMounted, watch } from 'vue'
-import RequirementListEditor from '~/components/common/RequirementListEditor.vue'
-import { usePieceTypes } from '~/composables/usePieceTypes'
-
-type Requirement = Record<string, unknown> & {
-  id?: string | number
-  typePieceId?: string | number | null
-  label?: string
-  minCount?: number | null
-  maxCount?: number | null
-  required?: boolean | null
-  allowNewModels?: boolean | null
-}
-
-type Labels = {
-  headerTitle: string
-  addButton: string
-  description: string
-  emptyState: string
-  typeSelectLabel: string
-  typePlaceholder: string
-  labelFieldLabel: string
-  labelFieldHelper: string
-  labelPlaceholder: string
-  minLabel: string
-  maxLabel: string
-  maxHelper: string
-  requiredLabel: string
-  allowNewModelsLabel: string
-}
-
-const props = defineProps({
-  modelValue: {
-    type: Array as () => Requirement[],
-    default: () => [],
-  },
-})
-
-const emit = defineEmits(['update:modelValue'])
-
-const { pieceTypes, loadPieceTypes, loadingPieceTypes } = usePieceTypes()
-
-const requirements = computed({
-  get: () => props.modelValue,
-  set: (value: Requirement[]) => emit('update:modelValue', value),
-})
-
-const createDefaultRequirement = (): Requirement => ({
-  id: undefined,
-  typePieceId: null,
-  label: '',
-  minCount: 0,
-  maxCount: null,
-  required: false,
-  allowNewModels: true,
-})
-
-const labels: Labels = {
-  headerTitle: 'Pièces principales',
-  addButton: 'Ajouter un groupe',
-  description:
-    "Configurez ici les familles de pièces principales attendues pour ce type de machine. Le nombre minimal/maximal est utilisé pour guider la création d'une machine.",
-  emptyState: 'Aucun groupe configuré. Ajoutez votre première famille de pièces.',
-  typeSelectLabel: 'Type de pièce',
-  typePlaceholder: 'Sélectionner un type',
-  labelFieldLabel: 'Libellé',
-  labelFieldHelper: 'Optionnel',
-  labelPlaceholder: 'Ex: Vis principale',
-  minLabel: 'Minimum requis',
-  maxLabel: 'Maximum autorisé',
-  maxHelper: 'Laisser vide pour illimité',
-  requiredLabel: 'Requis',
-  allowNewModelsLabel: "Autoriser la création de nouveaux modèles lors de l'instanciation",
-}
-
-onMounted(async () => {
-  if (!pieceTypes.value.length) {
-    await loadPieceTypes()
-  }
-  console.log('[PieceRequirementsSection] pieceTypes loaded:', pieceTypes.value.map(t => ({ id: t.id, name: t.name })))
-  console.log('[PieceRequirementsSection] requirements on mount:', props.modelValue.map(r => ({ id: r.id, typePieceId: r.typePieceId })))
-})
-
-watch(() => props.modelValue, (newVal) => {
-  console.log('[PieceRequirementsSection] requirements updated:', newVal.map(r => ({ id: r.id, typePieceId: r.typePieceId })))
-}, { deep: true })
-</script>
--- a/app/components/TypeEditProductRequirementsSection.vue
+++ b/app/components/TypeEditProductRequirementsSection.vue
@@ -1,95 +0,0 @@
-<template>
-  <RequirementListEditor
-    v-model="requirements"
-    :type-options="productTypes"
-    type-field="typeProductId"
-    :labels="labels"
-    :default-requirement="createDefaultRequirement"
-    :required-fallback="false"
-    :min-fallback="0"
-    :type-loading="loadingProductTypes"
-  />
-</template>
-
-<script setup lang="ts">
-import { computed, onMounted } from 'vue'
-import RequirementListEditor from '~/components/common/RequirementListEditor.vue'
-import { useProductTypes } from '~/composables/useProductTypes'
-
-type Requirement = Record<string, unknown> & {
-  id?: string | number
-  typeProductId?: string | number | null
-  label?: string
-  minCount?: number | null
-  maxCount?: number | null
-  required?: boolean | null
-  allowNewModels?: boolean | null
-}
-
-type Labels = {
-  headerTitle: string
-  addButton: string
-  description: string
-  emptyState: string
-  typeSelectLabel: string
-  typePlaceholder: string
-  labelFieldLabel: string
-  labelFieldHelper: string
-  labelPlaceholder: string
-  minLabel: string
-  maxLabel: string
-  maxHelper: string
-  requiredLabel: string
-  allowNewModelsLabel: string
-}
-
-const props = defineProps({
-  modelValue: {
-    type: Array as () => Requirement[],
-    default: () => [],
-  },
-})
-
-const emit = defineEmits(['update:modelValue'])
-
-const { productTypes, loadProductTypes, loadingProductTypes } = useProductTypes()
-
-const requirements = computed({
-  get: () => props.modelValue,
-  set: (value: Requirement[]) => emit('update:modelValue', value),
-})
-
-const createDefaultRequirement = (): Requirement => ({
-  id: undefined,
-  typeProductId: null,
-  label: '',
-  minCount: 0,
-  maxCount: null,
-  required: false,
-  allowNewModels: true,
-})
-
-const labels: Labels = {
-  headerTitle: 'Produits requis',
-  addButton: 'Ajouter un produit',
-  description:
-    "Définissez les produits catalogue attendus pour ce type de machine. Sélectionnez la catégorie de produit, précisez les quantités minimales et maximales, puis indiquez si de nouveaux produits peuvent être créés à l'usage.",
-  emptyState: 'Aucun produit requis configuré pour le moment.',
-  typeSelectLabel: 'Catégorie de produit',
-  typePlaceholder: 'Sélectionner une catégorie',
-  labelFieldLabel: 'Libellé',
-  labelFieldHelper: 'Optionnel',
-  labelPlaceholder: 'Ex : Lubrifiant recommandé',
-  minLabel: 'Minimum requis',
-  maxLabel: 'Maximum autorisé',
-  maxHelper: 'Laisser vide pour illimité',
-  requiredLabel: 'Requis',
-  allowNewModelsLabel: "Autoriser la création de nouveaux produits lors de l'instanciation",
-}
-
-onMounted(async () => {
-  if (!productTypes.value.length) {
-    await loadProductTypes()
-  }
-})
-</script>
--- a/app/components/TypeEditToolbar.vue
+++ b/app/components/TypeEditToolbar.vue
@@ -1,23 +0,0 @@
-<template>
-  <div class="flex justify-end">
-    <button type="button" class="btn btn-outline btn-sm" @click="$emit('toggle')">
-      <IconLucideMinus v-if="allExpanded" class="w-4 h-4 mr-2" aria-hidden="true" />
-      <IconLucidePlus v-else class="w-4 h-4 mr-2" aria-hidden="true" />
-      {{ allExpanded ? 'Tout plier' : 'Tout déplier' }}
-    </button>
-  </div>
-</template>
-
-<script setup>
-import IconLucideMinus from '~icons/lucide/minus'
-import IconLucidePlus from '~icons/lucide/plus'
-
-defineProps({
-  allExpanded: {
-    type: Boolean,
-    default: false
-  }
-})
-
-defineEmits(['toggle'])
-</script>
--- a/app/components/TypeInfoDisplay.vue
+++ b/app/components/TypeInfoDisplay.vue
@@ -1,28 +0,0 @@
-<template>
-  <div class="alert alert-info mb-6">
-    <div>
-      <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><strong>Produits requis:</strong> {{ type.productRequirements?.length || 0 }}</p>
-        <p v-if="type.description">
-          <strong>Description:</strong> {{ type.description }}
-        </p>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-defineProps({
-  type: {
-    type: Object,
-    required: true
-  }
-})
-</script>
--- a/app/components/common/ConfirmModal.vue
+++ b/app/components/common/ConfirmModal.vue
@@ -0,0 +1,41 @@
+<template>
+  <teleport to="body">
+    <div
+      v-if="confirmState.open"
+      class="fixed inset-0 z-[1200] flex items-center justify-center bg-black/60 backdrop-blur-sm"
+      @click.self="handleCancel"
+    >
+      <div class="bg-base-100 rounded-box shadow-xl w-full max-w-md mx-4 p-6 space-y-4">
+        <h3 class="font-bold text-lg">
+          {{ confirmState.title }}
+        </h3>
+
+        <p class="whitespace-pre-line text-base-content/80">
+          {{ confirmState.message }}
+        </p>
+
+        <div class="flex justify-end gap-2 pt-2">
+          <button
+            class="btn btn-ghost btn-sm"
+            @click="handleCancel"
+          >
+            {{ confirmState.cancelText }}
+          </button>
+          <button
+            class="btn btn-sm"
+            :class="confirmState.dangerous ? 'btn-error' : 'btn-primary'"
+            @click="handleConfirm"
+          >
+            {{ confirmState.confirmText }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </teleport>
+</template>
+
+<script setup lang="ts">
+import { useConfirm } from '~/composables/useConfirm'
+
+const { confirmState, handleConfirm, handleCancel } = useConfirm()
+</script>
--- a/app/components/common/DataTable.vue
+++ b/app/components/common/DataTable.vue
@@ -0,0 +1,308 @@
+<template>
+  <div class="space-y-4">
+    <!-- Toolbar + counter row -->
+    <div
+      v-if="$slots.toolbar || showCounter || showPerPage"
+      class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between"
+    >
+      <div class="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center">
+        <slot name="toolbar" />
+      </div>
+
+      <div class="flex items-center gap-3">
+        <div v-if="showPerPage && pagination?.perPageOptions?.length" class="flex items-center gap-2">
+          <label
+            class="text-xs font-semibold uppercase tracking-wide text-base-content/70"
+            for="dt-per-page"
+          >
+            Par page
+          </label>
+          <select
+            id="dt-per-page"
+            :value="pagination.perPage"
+            class="select select-bordered select-sm"
+            @change="emit('update:perPage', Number(($event.target as HTMLSelectElement).value))"
+          >
+            <option v-for="opt in pagination.perPageOptions" :key="opt" :value="opt">
+              {{ opt }}
+            </option>
+          </select>
+        </div>
+
+        <p v-if="showCounter && pagination" class="text-xs text-base-content/50 whitespace-nowrap">
+          {{ pagination.pageItems }} / {{ pagination.totalItems }}
+          résultat{{ pagination.totalItems > 1 ? 's' : '' }}
+        </p>
+      </div>
+    </div>
+
+    <!-- Loading state (full spinner only when no filterable columns to keep visible) -->
+    <div v-if="loading && !hasFilterableColumns" class="flex justify-center py-8">
+      <slot name="loading">
+        <span class="loading loading-spinner" aria-hidden="true" />
+      </slot>
+    </div>
+
+    <!-- Empty state (no data at all, no filterable columns to keep visible) -->
+    <template v-else-if="isEmpty && !hasFilterableColumns">
+      <slot name="empty">
+        <p class="text-sm text-base-content/70 py-8 text-center">
+          {{ emptyMessage }}
+        </p>
+      </slot>
+    </template>
+
+    <!-- No results without filterable columns -->
+    <template v-else-if="rows.length === 0 && !hasFilterableColumns">
+      <slot name="no-results">
+        <p class="text-sm text-base-content/70 py-8 text-center">
+          {{ noResultsMessage }}
+        </p>
+      </slot>
+    </template>
+
+    <!-- Table (always shown when there are filterable columns, even during loading or with 0 rows) -->
+    <template v-else>
+      <div class="overflow-x-auto relative">
+        <!-- Loading overlay (keeps table & filter inputs visible) -->
+        <div
+          v-if="loading && hasFilterableColumns"
+          class="absolute inset-0 bg-base-100/50 z-10 flex items-center justify-center"
+        >
+          <span class="loading loading-spinner" aria-hidden="true" />
+        </div>
+        <table :class="['table table-sm md:table-md', tableClass]">
+          <thead>
+            <!-- Header labels + sort -->
+            <tr>
+              <th
+                v-for="col in columns"
+                :key="col.key"
+                :class="[
+                  col.width,
+                  col.class,
+                  col.headerClass,
+                  alignClass(col),
+                  { 'hidden sm:table-cell': col.hiddenMobile },
+                ]"
+              >
+                <slot :name="`header-${col.key}`" :column="col">
+                  <span
+                    :class="[
+                      'inline-flex items-center gap-1',
+                      col.sortable ? 'cursor-pointer select-none hover:text-base-content' : '',
+                    ]"
+                    @click="col.sortable && handleHeaderSort(col)"
+                  >
+                    {{ col.label }}
+                    <template v-if="col.sortable">
+                      <IconLucideChevronUp
+                        v-if="isSortedAsc(col)"
+                        class="h-3.5 w-3.5"
+                        aria-label="Trié croissant"
+                      />
+                      <IconLucideChevronDown
+                        v-else-if="isSortedDesc(col)"
+                        class="h-3.5 w-3.5"
+                        aria-label="Trié décroissant"
+                      />
+                      <IconLucideChevronsUpDown
+                        v-else
+                        class="h-3.5 w-3.5 opacity-30"
+                        aria-label="Triable"
+                      />
+                    </template>
+                  </span>
+                </slot>
+              </th>
+              <th v-if="expandable" class="w-12" />
+            </tr>
+            <!-- Filter inputs row -->
+            <tr v-if="hasFilterableColumns">
+              <th
+                v-for="col in columns"
+                :key="`filter-${col.key}`"
+                class="p-1"
+                :class="{ 'hidden sm:table-cell': col.hiddenMobile }"
+              >
+                <input
+                  v-if="col.filterable"
+                  type="text"
+                  class="input input-bordered input-xs w-full"
+                  :placeholder="col.filterPlaceholder || 'Filtrer…'"
+                  :value="columnFilters[col.key] ?? ''"
+                  @input="handleFilterInput(col.key, ($event.target as HTMLInputElement).value)"
+                />
+              </th>
+              <th v-if="expandable" />
+            </tr>
+          </thead>
+          <tbody>
+            <!-- No results message (inside table to keep headers visible) -->
+            <tr v-if="rows.length === 0">
+              <td :colspan="expandable ? columns.length + 1 : columns.length" class="text-center py-8">
+                <p class="text-sm text-base-content/70">
+                  {{ isEmpty ? emptyMessage : noResultsMessage }}
+                </p>
+              </td>
+            </tr>
+            <template v-for="(row, idx) in rows" :key="getRowKey(row)">
+              <tr>
+                <td
+                  v-for="col in columns"
+                  :key="col.key"
+                  :class="[
+                    col.class,
+                    alignClass(col),
+                    { 'hidden sm:table-cell': col.hiddenMobile },
+                  ]"
+                >
+                  <slot :name="`cell-${col.key}`" :row="row" :column="col" :index="idx">
+                    {{ row[col.key] ?? '—' }}
+                  </slot>
+                </td>
+                <td v-if="expandable" class="text-center">
+                  <button
+                    v-if="!canExpand || canExpand(row)"
+                    type="button"
+                    class="btn btn-ghost btn-xs"
+                    @click="emit('toggle-expand', getRowKey(row))"
+                  >
+                    {{ isExpanded(row) ? 'Masquer' : 'Voir' }}
+                  </button>
+                  <span v-else class="text-xs text-base-content/50">—</span>
+                </td>
+              </tr>
+              <!-- Expanded row -->
+              <tr v-if="expandable && isExpanded(row)">
+                <td :colspan="columns.length + 1" class="bg-base-200/50 p-4">
+                  <slot name="row-expanded" :row="row" :index="idx" />
+                </td>
+              </tr>
+            </template>
+          </tbody>
+        </table>
+      </div>
+
+      <!-- Pagination -->
+      <Pagination
+        v-if="pagination && pagination.totalPages > 1"
+        :current-page="pagination.currentPage"
+        :total-pages="pagination.totalPages"
+        @update:current-page="emit('update:currentPage', $event)"
+      />
+    </template>
+
+    <slot name="footer" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { DataTableColumn, DataTableSort, DataTablePagination, DataTableColumnFilters } from '~/shared/types/dataTable'
+import Pagination from '~/components/common/Pagination.vue'
+import IconLucideChevronUp from '~icons/lucide/chevron-up'
+import IconLucideChevronDown from '~icons/lucide/chevron-down'
+import IconLucideChevronsUpDown from '~icons/lucide/chevrons-up-down'
+
+const props = withDefaults(defineProps<{
+  columns: DataTableColumn[]
+  rows: any[]
+  rowKey?: string
+  loading?: boolean
+  sort?: DataTableSort | null
+  pagination?: DataTablePagination | null
+  columnFilters?: DataTableColumnFilters
+  emptyMessage?: string
+  noResultsMessage?: string
+  expandable?: boolean
+  expandedKeys?: Set<string>
+  canExpand?: (row: any) => boolean
+  tableClass?: string
+  showCounter?: boolean
+  showPerPage?: boolean
+}>(), {
+  rowKey: 'id',
+  loading: false,
+  sort: null,
+  pagination: null,
+  columnFilters: () => ({}),
+  emptyMessage: 'Aucune donnée disponible.',
+  noResultsMessage: 'Aucun résultat ne correspond à vos critères.',
+  expandable: false,
+  expandedKeys: () => new Set<string>(),
+  canExpand: undefined,
+  tableClass: '',
+  showCounter: true,
+  showPerPage: false,
+})
+
+const emit = defineEmits<{
+  (e: 'sort', sort: DataTableSort): void
+  (e: 'update:currentPage', page: number): void
+  (e: 'update:perPage', perPage: number): void
+  (e: 'update:columnFilters', filters: DataTableColumnFilters): void
+  (e: 'toggle-expand', key: string): void
+}>()
+
+const hasFilterableColumns = computed(() =>
+  props.columns.some(col => col.filterable),
+)
+
+const isEmpty = computed(() => {
+  if (props.pagination) {
+    return props.pagination.totalItems === 0
+  }
+  return props.rows.length === 0
+})
+
+const getRowKey = (row: any): string => {
+  return String(row[props.rowKey] ?? '')
+}
+
+const isExpanded = (row: any): boolean => {
+  return props.expandedKeys?.has(getRowKey(row)) ?? false
+}
+
+const sortKeyForColumn = (col: DataTableColumn): string => {
+  return col.sortKey ?? col.key
+}
+
+const isSortedAsc = (col: DataTableColumn): boolean => {
+  return props.sort?.field === sortKeyForColumn(col) && props.sort?.direction === 'asc'
+}
+
+const isSortedDesc = (col: DataTableColumn): boolean => {
+  return props.sort?.field === sortKeyForColumn(col) && props.sort?.direction === 'desc'
+}
+
+const handleHeaderSort = (col: DataTableColumn) => {
+  const key = sortKeyForColumn(col)
+  const currentDirection = props.sort?.field === key ? props.sort.direction : null
+
+  emit('sort', {
+    field: key,
+    direction: currentDirection === 'asc' ? 'desc' : 'asc',
+  })
+}
+
+let filterDebounceTimer: ReturnType<typeof setTimeout> | null = null
+
+const handleFilterInput = (key: string, value: string) => {
+  if (filterDebounceTimer) clearTimeout(filterDebounceTimer)
+  filterDebounceTimer = setTimeout(() => {
+    const updated = { ...props.columnFilters, [key]: value }
+    // Remove empty filter keys
+    for (const k of Object.keys(updated)) {
+      if (!updated[k]) delete updated[k]
+    }
+    emit('update:columnFilters', updated)
+  }, 300)
+}
+
+const alignClass = (col: DataTableColumn): string => {
+  if (col.align === 'center') return 'text-center'
+  if (col.align === 'right') return 'text-right'
+  return ''
+}
+</script>
--- a/app/components/common/RequirementListEditor.vue
+++ b/app/components/common/RequirementListEditor.vue
@@ -66,7 +66,7 @@
                type="text"
                class="input input-bordered input-sm"
                :placeholder="labels.labelPlaceholder"
-                @input="updateRequirement(index, { label: $event.target.value })"
+                @input="handleLabelInput(index, $event)"
              />
            </div>

@@ -79,7 +79,7 @@
                type="number"
                min="0"
                class="input input-bordered input-sm"
-                @input="updateRequirement(index, { minCount: parseNumber($event.target.value) })"
+                @input="handleMinInput(index, $event)"
              />
            </div>

@@ -93,7 +93,7 @@
                type="number"
                min="0"
                class="input input-bordered input-sm"
-                @input="updateRequirement(index, { maxCount: parseOptionalNumber($event.target.value) })"
+                @input="handleMaxInput(index, $event)"
              />
            </div>
          </div>
@@ -113,7 +113,7 @@
              type="checkbox"
              class="checkbox checkbox-sm"
              :checked="(requirement.required ?? requiredFallback) === true"
-              @change="updateRequirement(index, { required: $event.target.checked })"
+              @change="handleRequiredChange(index, $event)"
            />
            {{ labels.requiredLabel }}
          </label>
@@ -123,7 +123,7 @@
              type="checkbox"
              class="checkbox checkbox-sm"
              :checked="(requirement.allowNewModels ?? allowNewModelsFallback) === true"
-              @change="updateRequirement(index, { allowNewModels: $event.target.checked })"
+              @change="handleAllowNewModelsChange(index, $event)"
            />
            {{ labels.allowNewModelsLabel }}
          </label>
@@ -277,6 +277,37 @@ const parseOptionalNumber = (value: string) => {
  return Number.isFinite(parsed) ? parsed : null
 }

+// Type-safe event handlers
+const getInputValue = (event: Event): string => {
+  const target = event.target as HTMLInputElement | null
+  return target?.value ?? ''
+}
+
+const getCheckboxValue = (event: Event): boolean => {
+  const target = event.target as HTMLInputElement | null
+  return target?.checked ?? false
+}
+
+const handleLabelInput = (index: number, event: Event) => {
+  updateRequirement(index, { label: getInputValue(event) })
+}
+
+const handleMinInput = (index: number, event: Event) => {
+  updateRequirement(index, { minCount: parseNumber(getInputValue(event)) })
+}
+
+const handleMaxInput = (index: number, event: Event) => {
+  updateRequirement(index, { maxCount: parseOptionalNumber(getInputValue(event)) })
+}
+
+const handleRequiredChange = (index: number, event: Event) => {
+  updateRequirement(index, { required: getCheckboxValue(event) })
+}
+
+const handleAllowNewModelsChange = (index: number, event: Event) => {
+  updateRequirement(index, { allowNewModels: getCheckboxValue(event) })
+}
+
 const draggingRequirementIndex = ref<number | null>(null)
 const requirementDropTargetIndex = ref<number | null>(null)

@@ -297,6 +328,10 @@ const reorderRequirements = (from: number, to: number) => {
  }
  const updated = list.slice() as Requirement[]
  const [moved] = updated.splice(from, 1)
+  if (!moved) {
+    resetRequirementDragState()
+    return
+  }
  updated.splice(to, 0, moved)
  requirements.value = applyOrderIndex(updated)
  resetRequirementDragState()
--- a/app/components/common/SearchSelect.vue
+++ b/app/components/common/SearchSelect.vue
@@ -18,6 +18,15 @@
        @keydown.enter.prevent="selectHighlighted"
        @input="handleInput"
      >
+      <button
+        v-if="clearable && modelValue"
+        type="button"
+        class="absolute top-1/2 -translate-y-1/2 right-8 btn btn-ghost btn-xs"
+        aria-label="Effacer la sélection"
+        @click.stop="clearSelection"
+      >
+        <IconLucideX class="w-3 h-3" aria-hidden="true" />
+      </button>
      <button
        type="button"
        :class="toggleButtonClasses"
@@ -77,6 +86,7 @@
 <script setup>
 import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue'
 import IconLucideChevronsUpDown from '~icons/lucide/chevrons-up-down'
+import IconLucideX from '~icons/lucide/x'

 const props = defineProps({
  modelValue: {
@@ -111,6 +121,10 @@ const props = defineProps({
    type: [String, Function],
    default: null
  },
+  clearable: {
+    type: Boolean,
+    default: false
+  },
  size: {
    type: String,
    default: 'md',
@@ -155,7 +169,8 @@ const displayedOptions = computed(() => {
 })

 const inputClasses = computed(() => {
-  const base = ['input', 'input-bordered', 'w-full', 'pr-10']
+  const pr = props.clearable && props.modelValue ? 'pr-16' : 'pr-10'
+  const base = ['input', 'input-bordered', 'w-full', pr]
  if (props.size === 'xs') base.push('input-xs')
  if (props.size === 'sm') base.push('input-sm')
  if (props.size === 'lg') base.push('input-lg')
@@ -184,8 +199,7 @@ watch(

 watch(
  baseOptions,
-  (newOptions) => {
-    console.log('[SearchSelect] baseOptions changed, count:', newOptions.length, 'modelValue:', props.modelValue, 'selectedOption:', selectedOption.value?.id)
+  (_newOptions) => {
    if (!openDropdown.value && selectedOption.value) {
      searchTerm.value = resolveLabel(selectedOption.value)
    }
@@ -270,9 +284,17 @@ function handleInput () {
  emit('search', searchTerm.value)
 }

+function clearSelection () {
+  emit('update:modelValue', '')
+  searchTerm.value = ''
+  openDropdown.value = false
+}
+
 function closeDropdown () {
  openDropdown.value = false
-  if (selectedOption.value) {
+  if (searchTerm.value.trim() === '' && selectedOption.value) {
+    emit('update:modelValue', '')
+  } else if (selectedOption.value) {
    searchTerm.value = resolveLabel(selectedOption.value)
  }
 }
--- a/app/components/layout/AppNavbar.vue
+++ b/app/components/layout/AppNavbar.vue
@@ -0,0 +1,443 @@
+<template>
+  <div class="navbar bg-base-100 shadow-lg">
+    <div class="navbar-start">
+      <!-- Mobile hamburger menu -->
+      <div class="dropdown">
+        <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"
+        >
+          <li class="pt-1 pb-2 lg:hidden">
+            <button
+              class="w-full flex items-center gap-2 rounded-md px-2 py-1 transition-colors text-base-content hover:bg-primary/10 hover:text-primary"
+              @click="$emit('open-settings')"
+            >
+              <IconLucideSettings class="w-4 h-4" aria-hidden="true" />
+              Paramètres d'affichage
+            </button>
+          </li>
+
+          <!-- Mobile: simple links -->
+          <li v-for="link in simpleLinks" :key="link.to">
+            <NuxtLink
+              :to="link.to"
+              class="rounded-md px-2 py-1 transition-colors flex items-center gap-2"
+              :class="linkClass(link)"
+            >
+              <component :is="link.icon" v-if="link.icon" class="w-4 h-4" aria-hidden="true" />
+              {{ link.label }}
+            </NuxtLink>
+          </li>
+
+          <!-- Mobile: dropdown groups -->
+          <li
+            v-for="group in navGroups"
+            :key="group.id + '-mobile'"
+            class="mt-1 border-t border-base-200 pt-2"
+          >
+            <button
+              type="button"
+              class="flex w-full items-center justify-between rounded-md px-2 py-1 text-left transition-colors"
+              :class="groupClass(group)"
+              :aria-expanded="openDropdown === group.id + '-mobile'"
+              @click="toggleDropdown(group.id + '-mobile')"
+              @keydown.enter.prevent="toggleDropdown(group.id + '-mobile')"
+              @keydown.space.prevent="toggleDropdown(group.id + '-mobile')"
+            >
+              <span class="flex items-center gap-2">
+                <component :is="group.icon" v-if="group.icon" class="w-4 h-4" aria-hidden="true" />
+                {{ group.label }}
+              </span>
+              <IconLucideChevronRight
+                class="h-4 w-4 transition-transform"
+                :class="openDropdown === group.id + '-mobile' ? 'rotate-90' : ''"
+                aria-hidden="true"
+              />
+            </button>
+            <Transition name="nav-dropdown-mobile">
+              <ul
+                v-if="openDropdown === group.id + '-mobile'"
+                class="mt-2 space-y-1 rounded-md border border-base-200 bg-base-100 p-2 shadow-sm overflow-hidden"
+              >
+                <li v-for="child in group.children" :key="child.to">
+                  <NuxtLink
+                    :to="child.to"
+                    class="rounded-md px-2 py-1 transition-colors block"
+                    :class="childLinkClass(child)"
+                  >
+                    {{ child.label }}
+                    <span v-if="child.to === '/comments' && unresolvedCount > 0" class="badge badge-warning badge-xs ml-1">
+                      {{ unresolvedCount }}
+                    </span>
+                  </NuxtLink>
+                </li>
+              </ul>
+            </Transition>
+          </li>
+        </ul>
+      </div>
+
+      <!-- Logo -->
+      <div class="flex items-center space-x-3">
+        <div class="avatar">
+          <div class="w-14">
+            <img
+              :src="logoSrc"
+              alt="Logo Malio"
+              class="h-full w-full object-contain"
+            />
+          </div>
+        </div>
+        <NuxtLink to="/" class="btn btn-ghost text-xl">
+          Inventory
+        </NuxtLink>
+      </div>
+    </div>
+
+    <!-- Desktop navbar -->
+    <div class="navbar-center hidden lg:flex">
+      <ul class="menu menu-horizontal px-1">
+        <!-- Desktop: simple links -->
+        <li v-for="link in simpleLinks" :key="link.to">
+          <NuxtLink
+            :to="link.to"
+            class="transition-colors px-3 py-2 rounded-md flex items-center gap-1.5"
+            :class="linkClass(link)"
+          >
+            <component :is="link.icon" v-if="link.icon" class="w-4 h-4" aria-hidden="true" />
+            {{ link.label }}
+          </NuxtLink>
+        </li>
+
+        <!-- Desktop: dropdown groups -->
+        <li
+          v-for="group in navGroups"
+          :key="group.id + '-desktop'"
+          class="relative"
+          @mouseenter="setDropdown(group.id + '-desktop')"
+          @mouseleave="scheduleDropdownClose(group.id + '-desktop')"
+          @focusin="setDropdown(group.id + '-desktop')"
+          @focusout="scheduleDropdownClose(group.id + '-desktop')"
+        >
+          <button
+            type="button"
+            class="inline-flex items-center gap-1.5 rounded-md px-3 py-2 transition-colors"
+            :class="groupClass(group)"
+            :aria-expanded="openDropdown === group.id + '-desktop'"
+            @click="toggleDropdown(group.id + '-desktop')"
+            @keydown.enter.prevent="toggleDropdown(group.id + '-desktop')"
+            @keydown.space.prevent="toggleDropdown(group.id + '-desktop')"
+          >
+            <component :is="group.icon" v-if="group.icon" class="w-4 h-4" aria-hidden="true" />
+            {{ group.label }}
+            <IconLucideChevronRight
+              class="h-4 w-4 transition-transform"
+              :class="openDropdown === group.id + '-desktop' ? 'rotate-90' : ''"
+              aria-hidden="true"
+            />
+          </button>
+          <Transition name="nav-dropdown-desktop">
+            <ul
+              v-if="openDropdown === group.id + '-desktop'"
+              class="absolute left-0 top-full mt-2 w-64 rounded-lg border border-base-200 bg-base-100 p-2 shadow-lg z-50"
+            >
+              <li v-for="child in group.children" :key="child.to">
+                <NuxtLink
+                  :to="child.to"
+                  class="block rounded-md px-2 py-1 transition-colors"
+                  :class="childLinkClass(child)"
+                >
+                  {{ child.label }}
+                  <span v-if="child.to === '/comments' && unresolvedCount > 0" class="badge badge-warning badge-xs ml-1">
+                    {{ unresolvedCount }}
+                  </span>
+                </NuxtLink>
+              </li>
+            </ul>
+          </Transition>
+        </li>
+      </ul>
+    </div>
+
+    <!-- Navbar end -->
+    <div class="navbar-end">
+      <div class="flex items-center gap-2">
+        <button
+          class="btn btn-ghost btn-circle hidden lg:inline-flex"
+          title="Paramètres d'affichage"
+          @click="$emit('open-settings')"
+        >
+          <IconLucideSettings class="w-5 h-5" aria-hidden="true" />
+        </button>
+
+        <ClientOnly>
+          <div v-if="activeProfile" class="dropdown dropdown-end">
+            <div
+              tabindex="0"
+              role="button"
+              class="btn btn-ghost btn-circle avatar placeholder indicator"
+            >
+              <span
+                v-if="unresolvedCount > 0"
+                class="indicator-item badge badge-warning badge-xs"
+              >
+                {{ unresolvedCount }}
+              </span>
+              <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"
+                >
+                  {{ activeProfileInitials }}
+                </span>
+              </div>
+            </div>
+            <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="badge badge-sm" :class="roleBadgeClass">{{ roleLabel }}</span>
+              </li>
+              <li v-if="isAdmin">
+                <NuxtLink to="/admin" class="justify-between">
+                  Administration
+                  <IconLucideChevronRight class="w-4 h-4" aria-hidden="true" />
+                </NuxtLink>
+              </li>
+              <li>
+                <NuxtLink to="/comments" class="justify-between">
+                  Commentaires
+                  <span v-if="unresolvedCount > 0" class="badge badge-warning badge-xs">
+                    {{ unresolvedCount }}
+                  </span>
+                  <IconLucideChevronRight v-else class="w-4 h-4" aria-hidden="true" />
+                </NuxtLink>
+              </li>
+              <li>
+                <button
+                  type="button"
+                  class="text-error justify-between"
+                  @click="$emit('logout')"
+                >
+                  Déconnexion
+                  <IconLucideLogOut class="w-4 h-4" aria-hidden="true" />
+                </button>
+              </li>
+            </ul>
+          </div>
+        </ClientOnly>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onBeforeUnmount, type Component } from 'vue'
+import { useRoute } from '#imports'
+import { useNavDropdown } from '~/composables/useNavDropdown'
+import { usePermissions } from '~/composables/usePermissions'
+import { useProfileSession } from '~/composables/useProfileSession'
+import { useComments } from '~/composables/useComments'
+import IconLucideMenu from '~icons/lucide/menu'
+import IconLucideSettings from '~icons/lucide/settings'
+import IconLucideChevronRight from '~icons/lucide/chevron-right'
+import IconLucideLogOut from '~icons/lucide/log-out'
+import IconLucideLayoutDashboard from '~icons/lucide/layout-dashboard'
+import IconLucideFactory from '~icons/lucide/factory'
+
+import IconLucideCpu from '~icons/lucide/cpu'
+import IconLucidePuzzle from '~icons/lucide/puzzle'
+import IconLucidePackage from '~icons/lucide/package'
+import IconLucideLink from '~icons/lucide/link'
+import logoSrc from '~/assets/LOGO_CARRE_BLANC.png'
+
+defineEmits<{
+  (e: 'open-settings'): void
+  (e: 'logout'): void
+}>()
+
+interface NavLink {
+  to: string
+  label: string
+  icon?: Component
+}
+
+interface NavGroup {
+  id: string
+  label: string
+  icon?: Component
+  activePaths: string[]
+  children: NavLink[]
+}
+
+const simpleLinks: NavLink[] = [
+  { to: '/', label: 'Vue d\'ensemble', icon: IconLucideLayoutDashboard },
+  { to: '/machines', label: 'Parc Machines', icon: IconLucideFactory },
+]
+
+const navGroups: NavGroup[] = [
+  {
+    id: 'component',
+    label: 'Composants',
+    icon: IconLucideCpu,
+    activePaths: ['/component-category', '/component-catalog'],
+    children: [
+      { to: '/component-catalog', label: 'Catalogue des composants' },
+      { to: '/component-category', label: 'Catégorie de composant' },
+    ],
+  },
+  {
+    id: 'pieces',
+    label: 'Pièces',
+    icon: IconLucidePuzzle,
+    activePaths: ['/piece-category', '/pieces-catalog'],
+    children: [
+      { to: '/pieces-catalog', label: 'Catalogue des pièces' },
+      { to: '/piece-category', label: 'Catégorie de pièce' },
+    ],
+  },
+  {
+    id: 'products',
+    label: 'Produits',
+    icon: IconLucidePackage,
+    activePaths: ['/product-category', '/product-catalog'],
+    children: [
+      { to: '/product-catalog', label: 'Catalogue des produits' },
+      { to: '/product-category', label: 'Catégorie de produit' },
+    ],
+  },
+  {
+    id: 'resources',
+    label: 'Ressources liées',
+    icon: IconLucideLink,
+    activePaths: ['/sites', '/documents', '/constructeurs', '/activity-log', '/comments'],
+    children: [
+      { to: '/sites', label: 'Sites' },
+      { to: '/documents', label: 'Documents' },
+      { to: '/constructeurs', label: 'Fournisseurs' },
+      { to: '/comments', label: 'Commentaires' },
+      { to: '/activity-log', label: 'Journal d\'activité' },
+    ],
+  },
+]
+
+const route = useRoute()
+const { openDropdown, setDropdown, scheduleDropdownClose, toggleDropdown } = useNavDropdown()
+const { activeProfile } = useProfileSession()
+const { isAdmin, canEdit } = usePermissions()
+const { fetchUnresolvedCount } = useComments()
+
+const unresolvedCount = ref(0)
+let pollInterval: ReturnType<typeof setInterval> | null = null
+
+const refreshUnresolvedCount = async () => {
+  if (!activeProfile.value) return
+  unresolvedCount.value = await fetchUnresolvedCount()
+}
+
+onMounted(() => {
+  refreshUnresolvedCount()
+  pollInterval = setInterval(refreshUnresolvedCount, 60_000)
+})
+
+onBeforeUnmount(() => {
+  if (pollInterval) clearInterval(pollInterval)
+})
+
+const isActive = (path: string) => {
+  if (path === '/') {
+    return route.path === '/'
+  }
+  return route.path.startsWith(path)
+}
+
+const isGroupActive = (group: NavGroup) => {
+  return group.activePaths.some((path) => isActive(path))
+}
+
+const linkClass = (link: NavLink) => {
+  return isActive(link.to)
+    ? 'bg-primary text-primary-content font-semibold shadow-sm'
+    : 'text-base-content hover:bg-primary/10 hover:text-primary'
+}
+
+const groupClass = (group: NavGroup) => {
+  return isGroupActive(group)
+    ? 'bg-primary text-primary-content font-semibold shadow-sm'
+    : 'text-base-content hover:bg-primary/10 hover:text-primary'
+}
+
+const childLinkClass = (child: NavLink) => {
+  return isActive(child.to)
+    ? 'bg-primary/10 text-primary font-semibold'
+    : 'text-base-content hover:bg-primary/10 hover:text-primary'
+}
+
+const roleLabel = computed(() => {
+  if (isAdmin.value) return 'Admin'
+  if (canEdit.value) return 'Gestionnaire'
+  return 'Lecteur'
+})
+
+const roleBadgeClass = computed(() => {
+  if (isAdmin.value) return 'badge-error'
+  if (canEdit.value) return 'badge-warning'
+  return 'badge-info'
+})
+
+const activeProfileLabel = computed(() => {
+  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() || '??'
+  )
+})
+</script>
+
+<style scoped>
+.nav-dropdown-desktop-enter-active,
+.nav-dropdown-desktop-leave-active {
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+.nav-dropdown-desktop-enter-from,
+.nav-dropdown-desktop-leave-to {
+  opacity: 0;
+  transform: translateY(0.25rem);
+}
+.nav-dropdown-desktop-enter-to,
+.nav-dropdown-desktop-leave-from {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.nav-dropdown-mobile-enter-active,
+.nav-dropdown-mobile-leave-active {
+  transition: max-height 0.2s ease, opacity 0.2s ease;
+}
+.nav-dropdown-mobile-enter-from,
+.nav-dropdown-mobile-leave-to {
+  max-height: 0;
+  opacity: 0;
+}
+.nav-dropdown-mobile-enter-to,
+.nav-dropdown-mobile-leave-from {
+  max-height: 12rem;
+  opacity: 1;
+}
+</style>
--- a/app/components/machine/AddEntityToMachineModal.vue
+++ b/app/components/machine/AddEntityToMachineModal.vue
@@ -0,0 +1,207 @@
+<template>
+  <div v-if="open" class="modal modal-open">
+    <div class="modal-box max-w-xl w-full" style="overflow: visible">
+      <button
+        type="button"
+        class="btn btn-sm btn-circle btn-ghost absolute right-3 top-3"
+        @click="handleClose"
+      >
+        &times;
+      </button>
+
+      <h3 class="font-bold text-lg mb-6">
+        {{ title }}
+      </h3>
+
+      <!-- Step 1: Choose category -->
+      <div class="form-control mb-5" style="position: relative; z-index: 20">
+        <label class="label pb-1">
+          <span class="label-text font-medium">Catégorie</span>
+        </label>
+        <SearchSelect
+          v-model="selectedTypeId"
+          :options="types"
+          :loading="loadingTypes"
+          :max-visible="8"
+          placeholder="Rechercher une catégorie..."
+          empty-text="Aucune catégorie disponible"
+          :option-label="(t: any) => t.name"
+          :option-description="(t: any) => t.code"
+        />
+      </div>
+
+      <!-- Step 2: Choose entity (visible only after category selected) -->
+      <div v-if="selectedTypeName" class="form-control mb-5" style="position: relative; z-index: 10">
+        <label class="label pb-1">
+          <span class="label-text font-medium">{{ entityLabel }}</span>
+        </label>
+        <SearchSelect
+          v-model="selectedEntityId"
+          :options="entities"
+          :loading="loadingEntities"
+          :max-visible="8"
+          :placeholder="`Rechercher ${entityLabelLower}...`"
+          :empty-text="`Aucun ${entityLabelLower} disponible dans cette catégorie`"
+          :option-label="entityOptionLabel"
+          :option-description="entityOptionDescription"
+        />
+      </div>
+
+      <!-- Summary of selection -->
+      <div v-if="selectedEntitySummary" class="bg-base-200 rounded-lg p-3 mb-4">
+        <p class="text-sm font-medium">{{ selectedEntitySummary.name }}</p>
+        <p v-if="selectedEntitySummary.reference" class="text-xs text-base-content/60">
+          Réf : {{ selectedEntitySummary.reference }}
+        </p>
+      </div>
+
+      <div class="modal-action mt-4 pt-4 border-t border-base-200" style="position: relative; z-index: 0">
+        <button type="button" class="btn btn-ghost" @click="handleClose">
+          Annuler
+        </button>
+        <button
+          type="button"
+          class="btn btn-primary"
+          :disabled="!selectedEntityId"
+          @click="handleConfirm"
+        >
+          Ajouter
+        </button>
+      </div>
+    </div>
+    <div class="modal-backdrop" @click="handleClose" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import SearchSelect from '~/components/common/SearchSelect.vue'
+import { useComponentTypes } from '~/composables/useComponentTypes'
+import { usePieceTypes } from '~/composables/usePieceTypes'
+import { useProductTypes } from '~/composables/useProductTypes'
+import { useComposants } from '~/composables/useComposants'
+import { usePieces } from '~/composables/usePieces'
+import { useProducts } from '~/composables/useProducts'
+
+type EntityKind = 'component' | 'piece' | 'product'
+
+const props = defineProps<{
+  open: boolean
+  entityKind: EntityKind
+}>()
+
+const emit = defineEmits<{
+  close: []
+  confirm: [entityId: string]
+}>()
+
+const selectedTypeId = ref('')
+const selectedEntityId = ref('')
+const loadingEntities = ref(false)
+const entities = ref<any[]>([])
+
+const { componentTypes, loadingComponentTypes, loadComponentTypes } = useComponentTypes()
+const { pieceTypes, loadingPieceTypes, loadPieceTypes } = usePieceTypes()
+const { productTypes, loadingProductTypes, loadProductTypes } = useProductTypes()
+const { loadComposants } = useComposants()
+const { loadPieces } = usePieces()
+const { loadProducts } = useProducts()
+
+const title = computed(() => {
+  const labels: Record<EntityKind, string> = {
+    component: 'Ajouter un composant',
+    piece: 'Ajouter une pièce',
+    product: 'Ajouter un produit',
+  }
+  return labels[props.entityKind]
+})
+
+const entityLabel = computed(() => {
+  const labels: Record<EntityKind, string> = {
+    component: 'Composant',
+    piece: 'Pièce',
+    product: 'Produit',
+  }
+  return labels[props.entityKind]
+})
+
+const entityLabelLower = computed(() => entityLabel.value.toLowerCase())
+
+const types = computed(() => {
+  if (props.entityKind === 'component') return componentTypes.value
+  if (props.entityKind === 'piece') return pieceTypes.value
+  return productTypes.value
+})
+
+const loadingTypes = computed(() => {
+  if (props.entityKind === 'component') return loadingComponentTypes.value
+  if (props.entityKind === 'piece') return loadingPieceTypes.value
+  return loadingProductTypes.value
+})
+
+const selectedTypeName = computed(() => {
+  if (!selectedTypeId.value) return ''
+  const found = types.value.find((t: any) => t.id === selectedTypeId.value)
+  return found?.name || ''
+})
+
+const entityOptionLabel = (e: any) => e.name || '(sans nom)'
+const entityOptionDescription = (e: any) => e.reference || ''
+
+const selectedEntitySummary = computed(() => {
+  if (!selectedEntityId.value || !entities.value.length) return null
+  const found = entities.value.find((e: any) => e.id === selectedEntityId.value)
+  if (!found) return null
+  return { name: found.name || '(sans nom)', reference: found.reference || null }
+})
+
+// Load types when modal opens
+watch(() => props.open, async (isOpen) => {
+  if (!isOpen) return
+  if (props.entityKind === 'component') await loadComponentTypes()
+  else if (props.entityKind === 'piece') await loadPieceTypes()
+  else await loadProductTypes()
+})
+
+// Load entities when type changes
+watch(selectedTypeId, async () => {
+  selectedEntityId.value = ''
+  entities.value = []
+
+  if (!selectedTypeName.value) return
+
+  loadingEntities.value = true
+  try {
+    if (props.entityKind === 'component') {
+      const result = await loadComposants({ typeName: selectedTypeName.value, itemsPerPage: 200 })
+      entities.value = result?.data?.items || []
+    } else if (props.entityKind === 'piece') {
+      const result = await loadPieces({ typeName: selectedTypeName.value, itemsPerPage: 200 })
+      entities.value = result?.data?.items || []
+    } else {
+      const result = await loadProducts({ typeName: selectedTypeName.value, itemsPerPage: 200 })
+      entities.value = result?.data?.items || []
+    }
+  } finally {
+    loadingEntities.value = false
+  }
+})
+
+const handleClose = () => {
+  resetState()
+  emit('close')
+}
+
+const handleConfirm = () => {
+  if (!selectedEntityId.value) return
+  emit('confirm', selectedEntityId.value)
+  resetState()
+  emit('close')
+}
+
+const resetState = () => {
+  selectedTypeId.value = ''
+  selectedEntityId.value = ''
+  entities.value = []
+}
+</script>
--- a/app/components/machine/MachineComponentsCard.vue
+++ b/app/components/machine/MachineComponentsCard.vue
@@ -0,0 +1,80 @@
+<template>
+  <div class="card bg-base-100 shadow-lg">
+    <div class="card-body">
+      <div class="flex justify-between items-center mb-4">
+        <h2 class="card-title">Composants</h2>
+        <div class="flex items-center gap-2">
+          <button
+            v-if="isEditMode"
+            type="button"
+            class="btn btn-sm md:btn-md btn-primary"
+            @click="$emit('add-component')"
+          >
+            Ajouter un composant
+          </button>
+          <button
+            type="button"
+            class="btn btn-ghost btn-sm gap-2"
+            @click="$emit('toggle-collapse')"
+            :title="collapsed ? 'Déplier tous les composants' : 'Replier tous les composants'"
+          >
+            <IconLucideChevronRight
+              class="w-5 h-5 transition-transform"
+              :class="collapsed ? 'rotate-0' : 'rotate-90'"
+              aria-hidden="true"
+            />
+            <span class="text-sm">
+              {{ collapsed ? 'Tout déplier' : 'Tout replier' }}
+            </span>
+          </button>
+        </div>
+      </div>
+
+      <div v-if="components.length === 0" class="text-sm text-gray-500 py-4">
+        Aucun composant associé à cette machine.
+      </div>
+
+      <div v-else class="space-y-2">
+        <div v-for="component in components" :key="component.id" class="relative">
+          <button
+            v-if="isEditMode"
+            type="button"
+            class="btn btn-error btn-xs absolute top-2 right-2 z-10"
+            title="Supprimer ce composant"
+            @click="$emit('remove-component', component.linkId || component.id)"
+          >
+            Supprimer
+          </button>
+          <ComponentHierarchy
+            :components="[component]"
+            :is-edit-mode="false"
+            :collapse-all="collapsed"
+            :toggle-token="collapseToggleToken"
+            @edit-piece="$emit('edit-piece', $event)"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import ComponentHierarchy from '~/components/ComponentHierarchy.vue'
+import IconLucideChevronRight from '~icons/lucide/chevron-right'
+
+defineProps<{
+  components: any[]
+  isEditMode: boolean
+  collapsed: boolean
+  collapseToggleToken: number
+}>()
+
+defineEmits<{
+  'toggle-collapse': []
+  'update-component': [component: any]
+  'edit-piece': [piece: any]
+  'custom-field-update': [fieldUpdate: any]
+  'add-component': []
+  'remove-component': [linkId: string]
+}>()
+</script>
--- a/app/components/machine/MachineDetailHeader.vue
+++ b/app/components/machine/MachineDetailHeader.vue
@@ -0,0 +1,53 @@
+<template>
+  <div class="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
+    <div class="flex flex-col gap-2">
+      <h1 class="text-3xl font-bold">
+        {{ title }}
+      </h1>
+    </div>
+    <div class="flex items-center gap-2 print:hidden" data-print-hide>
+      <button
+        @click="$emit('toggle-edit')"
+        class="btn btn-primary"
+        :class="{ 'btn-outline': isEditMode }"
+      >
+        <IconLucideSquarePen
+          v-if="!isEditMode"
+          class="w-5 h-5 mr-2"
+          aria-hidden="true"
+        />
+        <IconLucideEye
+          v-else
+          class="w-5 h-5 mr-2"
+          aria-hidden="true"
+        />
+        {{ isEditMode ? 'Voir détails' : 'Modifier' }}
+      </button>
+      <button
+        v-if="!isEditMode"
+        @click="$emit('open-print')"
+        type="button"
+        class="btn btn-outline btn-secondary"
+      >
+        <IconLucidePrinter class="w-5 h-5 mr-2" aria-hidden="true" />
+        Imprimer
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import IconLucideSquarePen from '~icons/lucide/square-pen'
+import IconLucideEye from '~icons/lucide/eye'
+import IconLucidePrinter from '~icons/lucide/printer'
+
+defineProps<{
+  title: string
+  isEditMode: boolean
+}>()
+
+defineEmits<{
+  'toggle-edit': []
+  'open-print': []
+}>()
+</script>
--- a/app/components/machine/MachineDocumentsCard.vue
+++ b/app/components/machine/MachineDocumentsCard.vue
@@ -0,0 +1,116 @@
+<template>
+  <div class="card bg-base-100 shadow-lg mt-6">
+    <div class="card-body space-y-4">
+      <div class="flex items-center justify-between">
+        <div>
+          <h2 class="card-title">Documents de la machine</h2>
+          <p class="text-xs text-gray-500">Ajoutez ou consultez les documents liés à cette machine.</p>
+        </div>
+        <span v-if="isEditMode && files.length" class="badge badge-outline">
+          {{ files.length }} fichier{{ files.length > 1 ? 's' : '' }} sélectionné{{ files.length > 1 ? 's' : '' }}
+        </span>
+      </div>
+
+      <DocumentUpload
+        v-if="isEditMode"
+        :model-value="files"
+        @update:model-value="$emit('update:files', $event)"
+        title="Déposer des fichiers pour la machine"
+        subtitle="Formats acceptés : PDF, images, documents..."
+        @files-added="$emit('files-added', $event)"
+      />
+
+      <div v-if="documents.length" class="space-y-2">
+        <div
+          v-for="doc in documents"
+          :key="doc.id"
+          class="flex items-center justify-between rounded border border-base-200 bg-base-100 px-3 py-2"
+        >
+          <div class="flex items-center gap-3 text-sm">
+            <div
+              class="flex-shrink-0 overflow-hidden rounded-md border border-base-200 bg-base-200/70 flex items-center justify-center"
+              :class="documentThumbnailClass(doc)"
+            >
+              <img
+                v-if="isImageDocument(doc) && (doc.fileUrl || doc.path)"
+                :src="doc.fileUrl || doc.path"
+                class="h-full w-full object-cover"
+                :alt="`Aperçu de ${doc.name}`"
+              >
+              <iframe
+                v-else-if="shouldInlinePdf(doc)"
+                :src="documentPreviewSrc(doc)"
+                class="h-full w-full border-0 bg-white"
+                title="Aperçu PDF"
+              />
+              <component
+                v-else
+                :is="documentIcon(doc).component"
+                class="h-6 w-6"
+                :class="documentIcon(doc).colorClass"
+                aria-hidden="true"
+              />
+            </div>
+            <div>
+              <div class="font-medium">{{ doc.name }}</div>
+              <div class="text-xs text-gray-500">
+                {{ doc.mimeType || 'Inconnu' }} &bull; {{ formatSize(doc.size) }}
+              </div>
+            </div>
+          </div>
+          <div class="flex items-center gap-2">
+            <button
+              type="button"
+              class="btn btn-ghost btn-xs"
+              :disabled="!canPreviewDocument(doc)"
+              :title="canPreviewDocument(doc) ? 'Consulter le document' : 'Aucun aperçu disponible pour ce type'"
+              @click="$emit('preview', doc)"
+            >
+              Consulter
+            </button>
+            <button type="button" class="btn btn-ghost btn-xs" @click="$emit('download', doc)">
+              Télécharger
+            </button>
+            <button
+              v-if="isEditMode"
+              type="button"
+              class="btn btn-error btn-xs"
+              :disabled="uploading"
+              @click="$emit('remove', doc.id)"
+            >
+              Supprimer
+            </button>
+          </div>
+        </div>
+      </div>
+      <p v-else class="text-xs text-gray-500">Aucun document lié à cette machine.</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import DocumentUpload from '~/components/DocumentUpload.vue'
+import { canPreviewDocument, isImageDocument } from '~/utils/documentPreview'
+import {
+  formatSize,
+  shouldInlinePdf,
+  documentPreviewSrc,
+  documentThumbnailClass,
+  documentIcon,
+} from '~/shared/utils/documentDisplayUtils'
+
+defineProps<{
+  documents: any[]
+  isEditMode: boolean
+  uploading: boolean
+  files: File[]
+}>()
+
+defineEmits<{
+  'update:files': [files: File[]]
+  'files-added': [files: File[]]
+  'preview': [doc: any]
+  'download': [doc: any]
+  'remove': [documentId: string]
+}>()
+</script>
--- a/app/components/machine/MachineInfoCard.vue
+++ b/app/components/machine/MachineInfoCard.vue
@@ -0,0 +1,184 @@
+<template>
+  <div class="card bg-base-100 shadow-lg">
+    <div class="card-body">
+      <h2 class="card-title">Informations de la machine</h2>
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div class="form-control">
+          <label class="label">
+            <span class="label-text">Nom</span>
+          </label>
+          <input
+            v-if="isEditMode"
+            :id="getMachineFieldId('name')"
+            :value="machineName"
+            type="text"
+            class="input input-bordered"
+            @input="$emit('update:machine-name', ($event.target as HTMLInputElement).value)"
+            @blur="$emit('blur-field')"
+          />
+          <div v-else class="input input-bordered bg-base-200">
+            {{ machineName }}
+          </div>
+        </div>
+        <div v-if="isEditMode || machineReference" class="form-control">
+          <label class="label">
+            <span class="label-text">Référence</span>
+          </label>
+          <input
+            v-if="isEditMode"
+            :id="getMachineFieldId('reference')"
+            :value="machineReference"
+            type="text"
+            class="input input-bordered"
+            @input="$emit('update:machine-reference', ($event.target as HTMLInputElement).value)"
+            @blur="$emit('blur-field')"
+          />
+          <div v-else class="input input-bordered bg-base-200">
+            {{ machineReference }}
+          </div>
+        </div>
+        <div v-if="isEditMode || hasMachineConstructeur" class="form-control">
+          <label class="label">
+            <span class="label-text">Fournisseur</span>
+          </label>
+          <ConstructeurSelect
+            v-if="isEditMode"
+            class="w-full"
+            :model-value="machineConstructeurIds"
+            :initial-options="machineConstructeursDisplay"
+            placeholder="Rechercher un ou plusieurs fournisseurs..."
+            @update:modelValue="$emit('update:constructeur-ids', $event)"
+          />
+          <div v-else class="input input-bordered bg-base-200">
+            <div v-if="machineConstructeursDisplay.length" class="space-y-1">
+              <div
+                v-for="constructeur in machineConstructeursDisplay"
+                :key="constructeur.id"
+                class="flex flex-col"
+              >
+                <span class="font-medium">{{ constructeur.name }}</span>
+                <span
+                  v-if="formatConstructeurContactSummary(constructeur)"
+                  class="text-xs text-gray-500"
+                >
+                  {{ formatConstructeurContactSummary(constructeur) }}
+                </span>
+              </div>
+            </div>
+            <span v-else class="font-medium">Non défini</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Champs personnalisés -->
+      <div v-if="visibleCustomFields.length" class="mt-6 pt-4 border-t border-gray-200">
+        <h4 class="font-semibold text-gray-700 mb-3">Champs personnalisés de la machine</h4>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div
+            v-for="field in visibleCustomFields"
+            :key="field.customFieldValueId || field.id || field.name"
+            class="form-control"
+          >
+            <label class="label">
+              <span class="label-text text-sm">{{ field.name }}</span>
+              <span v-if="field.required" class="label-text-alt text-error">*</span>
+            </label>
+
+            <template v-if="isEditMode">
+              <input
+                v-if="field.type === 'text'"
+                :value="field.value ?? ''"
+                type="text"
+                class="input input-bordered input-sm"
+                :required="field.required"
+                @input="$emit('set-custom-field-value', field, ($event.target as HTMLInputElement).value)"
+                @blur="$emit('update-custom-field', field)"
+              />
+              <input
+                v-else-if="field.type === 'number'"
+                :value="field.value ?? ''"
+                type="number"
+                class="input input-bordered input-sm"
+                :required="field.required"
+                @input="$emit('set-custom-field-value', field, ($event.target as HTMLInputElement).value)"
+                @blur="$emit('update-custom-field', field)"
+              />
+              <select
+                v-else-if="field.type === 'select'"
+                :value="field.value ?? ''"
+                class="select select-bordered select-sm"
+                :required="field.required"
+                @change="$emit('set-custom-field-value', field, ($event.target as HTMLSelectElement).value)"
+                @blur="$emit('update-custom-field', field)"
+              >
+                <option value="">Sélectionner...</option>
+                <option
+                  v-for="option in field.options"
+                  :key="option"
+                  :value="option"
+                >
+                  {{ option }}
+                </option>
+              </select>
+              <label v-else-if="field.type === 'boolean'" class="flex items-center gap-3 cursor-pointer">
+                <input
+                  type="checkbox"
+                  class="toggle toggle-primary toggle-sm"
+                  :checked="String(field.value).toLowerCase() === 'true'"
+                  @change="$emit('set-custom-field-value', field, ($event.target as HTMLInputElement).checked ? 'true' : 'false')"
+                  @blur="$emit('update-custom-field', field)"
+                >
+                <span class="text-sm" :class="String(field.value).toLowerCase() === 'true' ? 'text-success font-medium' : 'text-base-content/60'">{{ String(field.value).toLowerCase() === 'true' ? 'Oui' : 'Non' }}</span>
+              </label>
+              <input
+                v-else-if="field.type === 'date'"
+                :value="field.value ?? ''"
+                type="date"
+                class="input input-bordered input-sm"
+                :required="field.required"
+                @input="$emit('set-custom-field-value', field, ($event.target as HTMLInputElement).value)"
+                @blur="$emit('update-custom-field', field)"
+              />
+              <div v-else class="text-xs text-error">
+                Type de champ non pris en charge
+              </div>
+            </template>
+            <template v-else>
+              <div class="input input-bordered input-sm bg-base-200">
+                {{ formatCustomFieldValue(field) }}
+              </div>
+            </template>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import ConstructeurSelect from '~/components/ConstructeurSelect.vue'
+import {
+  formatConstructeurContact as formatConstructeurContactSummary,
+} from '~/shared/constructeurUtils'
+import { formatCustomFieldValue } from '~/shared/utils/customFieldUtils'
+
+defineProps<{
+  isEditMode: boolean
+  machineName: string
+  machineReference: string
+  machineConstructeurIds: string[]
+  machineConstructeursDisplay: any[]
+  hasMachineConstructeur: boolean
+  visibleCustomFields: any[]
+  getMachineFieldId: (fieldName: string) => string
+}>()
+
+defineEmits<{
+  'update:machine-name': [value: string]
+  'update:machine-reference': [value: string]
+  'update:constructeur-ids': [ids: unknown]
+  'blur-field': []
+  'set-custom-field-value': [field: any, value: unknown]
+  'update-custom-field': [field: any]
+}>()
+</script>
--- a/app/components/machine/MachinePiecesCard.vue
+++ b/app/components/machine/MachinePiecesCard.vue
@@ -0,0 +1,77 @@
+<template>
+  <div class="card bg-base-100 shadow-lg">
+    <div class="card-body">
+      <div class="flex justify-between items-center mb-4">
+        <h2 class="card-title">Pièces de la machine</h2>
+        <div class="flex items-center gap-2">
+          <button
+            v-if="isEditMode"
+            type="button"
+            class="btn btn-sm md:btn-md btn-primary"
+            @click="$emit('add-piece')"
+          >
+            Ajouter une pièce
+          </button>
+          <button
+            type="button"
+            class="btn btn-ghost btn-sm gap-2"
+            @click="$emit('toggle-collapse')"
+            :title="collapsed ? 'Déplier toutes les pièces' : 'Replier toutes les pièces'"
+          >
+            <IconLucideChevronRight
+              class="w-5 h-5 transition-transform"
+              :class="collapsed ? 'rotate-0' : 'rotate-90'"
+              aria-hidden="true"
+            />
+            <span class="text-sm">
+              {{ collapsed ? 'Tout déplier' : 'Tout replier' }}
+            </span>
+          </button>
+        </div>
+      </div>
+
+      <div v-if="pieces.length === 0" class="text-sm text-gray-500 py-4">
+        Aucune pièce associée à cette machine.
+      </div>
+
+      <div v-else class="space-y-2">
+        <div v-for="piece in pieces" :key="piece.id" class="relative">
+          <button
+            v-if="isEditMode"
+            type="button"
+            class="btn btn-error btn-xs absolute top-2 right-2 z-10"
+            title="Supprimer cette pièce"
+            @click="$emit('remove-piece', piece.linkId || piece.id)"
+          >
+            Supprimer
+          </button>
+          <PieceItem
+            :piece="piece"
+            :is-edit-mode="false"
+            :collapse-all="collapsed"
+            :toggle-token="collapseToggleToken"
+            @edit="$emit('edit-piece', $event)"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import IconLucideChevronRight from '~icons/lucide/chevron-right'
+
+defineProps<{
+  pieces: any[]
+  isEditMode: boolean
+  collapsed: boolean
+  collapseToggleToken: number
+}>()
+
+defineEmits<{
+  'toggle-collapse': []
+  'edit-piece': [piece: any]
+  'add-piece': []
+  'remove-piece': [linkId: string]
+}>()
+</script>
--- a/app/components/machine/MachineProductsCard.vue
+++ b/app/components/machine/MachineProductsCard.vue
@@ -0,0 +1,174 @@
+<template>
+  <div class="card bg-base-100 shadow-lg">
+    <div class="card-body space-y-4">
+      <DocumentPreviewModal
+        :document="previewDocument"
+        :visible="previewVisible"
+        :documents="previewDocumentList"
+        @close="closePreview"
+      />
+
+      <div class="flex items-center justify-between">
+        <div>
+          <h2 class="card-title">Produits associés</h2>
+          <p class="text-xs text-gray-500">
+            Produits sélectionnés directement pour cette machine.
+          </p>
+        </div>
+        <div class="flex items-center gap-2">
+          <button
+            v-if="isEditMode"
+            type="button"
+            class="btn btn-sm md:btn-md btn-primary"
+            @click="$emit('add-product')"
+          >
+            Ajouter un produit
+          </button>
+          <span class="badge badge-outline" v-if="products.length">
+            {{ products.length }} produit{{ products.length > 1 ? 's' : '' }}
+          </span>
+        </div>
+      </div>
+
+      <div v-if="products.length" class="space-y-3">
+        <div
+          v-for="product in products"
+          :key="product.id || product.name"
+          class="rounded border border-base-200 bg-base-200/60 p-3 text-sm space-y-2 relative"
+        >
+          <button
+            v-if="isEditMode"
+            type="button"
+            class="btn btn-error btn-xs absolute top-2 right-2"
+            title="Supprimer ce produit"
+            @click="$emit('remove-product', (product.linkId || product.id) as string)"
+          >
+            Supprimer
+          </button>
+          <div class="flex items-center justify-between flex-wrap gap-2">
+            <p class="font-semibold text-base-content">
+              {{ product.name }}
+            </p>
+            <span v-if="product.groupLabel" class="badge badge-ghost badge-sm">
+              {{ product.groupLabel }}
+            </span>
+          </div>
+          <p v-if="product.reference" class="text-xs text-base-content/70">
+            <span class="font-medium">Référence :</span>
+            <span class="ml-1">{{ product.reference }}</span>
+          </p>
+          <p v-if="product.supplierLabel" class="text-xs text-base-content/70">
+            <span class="font-medium">Fournisseurs :</span>
+            <span class="ml-1">{{ product.supplierLabel }}</span>
+          </p>
+          <p v-if="product.priceLabel" class="text-xs text-base-content/70">
+            <span class="font-medium">Prix indicatif :</span>
+            <span class="ml-1">{{ product.priceLabel }}</span>
+          </p>
+
+          <!-- Documents liés au produit -->
+          <div v-if="product.documents?.length" class="mt-2 space-y-1">
+            <p class="text-xs font-medium text-base-content/70">Documents :</p>
+            <div
+              v-for="doc in product.documents"
+              :key="doc.id || doc.name"
+              class="flex items-center justify-between gap-3 rounded border border-base-200 bg-base-100 px-3 py-2"
+            >
+              <div class="flex items-center gap-3 text-xs">
+                <div
+                  class="flex-shrink-0 overflow-hidden rounded-md border border-base-200 bg-base-200/70 flex items-center justify-center h-8 w-6"
+                >
+                  <component
+                    :is="documentIcon(doc).component"
+                    class="h-4 w-4"
+                    :class="documentIcon(doc).colorClass"
+                    aria-hidden="true"
+                  />
+                </div>
+                <div>
+                  <div class="font-medium text-base-content">{{ doc.name }}</div>
+                  <div class="text-xs text-base-content/60">
+                    {{ doc.mimeType || 'Inconnu' }} • {{ formatSize(doc.size) }}
+                  </div>
+                </div>
+              </div>
+              <div class="flex items-center gap-2 text-xs">
+                <button
+                  type="button"
+                  class="btn btn-ghost btn-xs"
+                  :disabled="!canPreviewDocument(doc)"
+                  :title="canPreviewDocument(doc) ? 'Consulter le document' : 'Aucun aperçu disponible pour ce type'"
+                  @click="openPreview(doc, product.documents || [])"
+                >
+                  Consulter
+                </button>
+                <button
+                  type="button"
+                  class="btn btn-ghost btn-xs"
+                  @click="downloadDocument(doc)"
+                >
+                  Télécharger
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <p v-else class="text-xs text-gray-500">
+        Aucun produit n'a été associé directement à cette machine.
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import DocumentPreviewModal from '~/components/DocumentPreviewModal.vue'
+import { canPreviewDocument } from '~/utils/documentPreview'
+import {
+  formatSize,
+  documentIcon,
+  downloadDocument,
+} from '~/shared/utils/documentDisplayUtils'
+
+defineProps<{
+  products: Array<{
+    id?: string | null
+    linkId?: string | null
+    name?: string
+    reference?: string | null
+    supplierLabel?: string | null
+    priceLabel?: string | null
+    groupLabel?: string
+    documents?: Array<{
+      id?: string
+      name?: string
+      mimeType?: string
+      size?: number
+      fileUrl?: string
+      downloadUrl?: string
+    }>
+  }>
+  isEditMode: boolean
+}>()
+
+defineEmits<{
+  'add-product': []
+  'remove-product': [linkId: string]
+}>()
+
+const previewDocument = ref<any>(null)
+const previewVisible = ref(false)
+const previewDocumentList = ref<any[]>([])
+
+const openPreview = (doc: any, docs: any[]) => {
+  previewDocument.value = doc
+  previewDocumentList.value = docs
+  previewVisible.value = true
+}
+
+const closePreview = () => {
+  previewVisible.value = false
+  previewDocument.value = null
+}
+</script>
--- a/app/components/model-types/ConversionModal.vue
+++ b/app/components/model-types/ConversionModal.vue
@@ -0,0 +1,172 @@
+<template>
+  <dialog class="modal" :class="{ 'modal-open': open }">
+    <div class="modal-box max-w-2xl">
+      <h3 class="text-lg font-bold text-base-content">
+        Convertir la catégorie
+      </h3>
+
+      <!-- Loading state -->
+      <div v-if="checking" class="mt-4 flex items-center gap-2 text-sm text-info">
+        <span class="loading loading-spinner loading-sm" aria-hidden="true"></span>
+        Vérification de la conversion…
+      </div>
+
+      <!-- Error state -->
+      <div v-else-if="checkError" class="mt-4 text-sm text-error">
+        {{ checkError }}
+      </div>
+
+      <!-- Blocked state -->
+      <template v-else-if="checkResult && !checkResult.canConvert">
+        <p class="mt-3 text-sm text-base-content/70">
+          La conversion de « {{ modelType?.name }} » est impossible pour les raisons suivantes :
+        </p>
+        <ul class="mt-3 space-y-1">
+          <li
+            v-for="(blocker, i) in checkResult.blockers"
+            :key="i"
+            class="flex items-start gap-2 rounded-lg border border-error/20 bg-error/5 px-3 py-2 text-sm text-error"
+          >
+            <IconLucideCircleX class="mt-0.5 h-4 w-4 shrink-0" aria-hidden="true" />
+            {{ blocker }}
+          </li>
+        </ul>
+      </template>
+
+      <!-- Eligible state -->
+      <template v-else-if="checkResult && checkResult.canConvert">
+        <div class="mt-3 rounded-lg border border-warning/20 bg-warning/5 px-4 py-3">
+          <p class="text-sm font-medium text-warning">
+            {{ directionLabel }}
+          </p>
+          <p class="mt-1 text-sm text-base-content/70">
+            {{ checkResult.itemCount }} élément(s) seront convertis. Cette opération est irréversible.
+          </p>
+        </div>
+
+        <div
+          v-if="checkResult.names.length > 0"
+          class="mt-3 rounded-xl border border-base-200 bg-base-100"
+        >
+          <p class="px-4 pt-3 text-sm font-medium text-base-content/70">
+            Éléments concernés :
+          </p>
+          <ul class="max-h-48 divide-y divide-base-200 overflow-y-auto px-4 pb-3">
+            <li
+              v-for="(name, i) in checkResult.names"
+              :key="i"
+              class="py-1.5 text-sm text-base-content"
+            >
+              {{ name }}
+            </li>
+          </ul>
+        </div>
+
+        <div v-if="convertError" class="mt-3 text-sm text-error">
+          {{ convertError }}
+        </div>
+      </template>
+
+      <div class="modal-action">
+        <button
+          type="button"
+          class="btn"
+          :disabled="converting"
+          @click="emit('close')"
+        >
+          Fermer
+        </button>
+        <button
+          v-if="checkResult?.canConvert"
+          type="button"
+          class="btn btn-warning"
+          :disabled="converting"
+          @click="doConvert"
+        >
+          <span v-if="converting" class="loading loading-spinner loading-sm" aria-hidden="true"></span>
+          Convertir
+        </button>
+      </div>
+    </div>
+  </dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import IconLucideCircleX from '~icons/lucide/circle-x';
+import {
+  checkConversion,
+  convertCategory,
+  type ConversionCheck,
+  type ModelType,
+} from '~/services/modelTypes';
+
+const props = defineProps<{
+  open: boolean;
+  modelType: ModelType | null;
+}>();
+
+const emit = defineEmits<{
+  (e: 'close'): void;
+  (e: 'converted'): void;
+}>();
+
+const checking = ref(false);
+const checkError = ref<string | null>(null);
+const checkResult = ref<ConversionCheck | null>(null);
+const converting = ref(false);
+const convertError = ref<string | null>(null);
+
+const directionLabel = computed(() => {
+  if (!checkResult.value) return '';
+  return checkResult.value.direction === 'piece_to_component'
+    ? 'Conversion : Catégorie de pièce → Catégorie de composant'
+    : 'Conversion : Catégorie de composant → Catégorie de pièce';
+});
+
+watch(
+  () => props.open,
+  async (isOpen) => {
+    if (!isOpen || !props.modelType) {
+      return;
+    }
+
+    checking.value = true;
+    checkError.value = null;
+    checkResult.value = null;
+    convertError.value = null;
+
+    try {
+      checkResult.value = await checkConversion(props.modelType.id);
+    } catch (err: any) {
+      checkError.value =
+        err?.data?.message || err?.message || 'Erreur lors de la vérification.';
+    } finally {
+      checking.value = false;
+    }
+  },
+);
+
+const doConvert = async () => {
+  if (!props.modelType) return;
+
+  converting.value = true;
+  convertError.value = null;
+
+  try {
+    const result = await convertCategory(props.modelType.id);
+
+    if (!result.success) {
+      convertError.value = result.error || 'La conversion a échoué.';
+      return;
+    }
+
+    emit('converted');
+  } catch (err: any) {
+    convertError.value =
+      err?.data?.message || err?.message || 'Erreur lors de la conversion.';
+  } finally {
+    converting.value = false;
+  }
+};
+</script>
--- a/app/components/model-types/ManagementView.vue
+++ b/app/components/model-types/ManagementView.vue
@@ -9,130 +9,328 @@
      </p>
    </header>

-    <ModelTypesToolbar
-      :category="selectedCategory"
-      :search="searchInput"
-      :sort="sort"
-      :dir="dir"
+    <nav
+      v-if="allowCategorySwitch"
+      class="tabs tabs-boxed inline-flex"
+      role="tablist"
+      aria-label="Catégories"
+    >
+      <button
+        v-for="option in categories"
+        :key="option.value"
+        type="button"
+        class="tab"
+        :class="{ 'tab-active': option.value === selectedCategory }"
+        role="tab"
+        :aria-selected="option.value === selectedCategory"
+        @click="onCategoryChange(option.value)"
+      >
+        {{ option.label }}
+      </button>
+    </nav>
+
+    <DataTable
+      :columns="columns"
+      :rows="items"
      :loading="loading"
-      :show-category-tabs="allowCategorySwitch"
-      @update:category="onCategoryChange"
-      @update:search="onSearchInput"
-      @update:sort="onSortChange"
-      @update:dir="onDirChange"
-      @create="openCreatePage"
+      :sort="currentSort"
+      :pagination="paginationState"
+      :show-per-page="true"
+      row-key="id"
+      empty-message="Aucune catégorie trouvée."
+      no-results-message="Aucune catégorie ne correspond à votre recherche."
+      @sort="handleSort"
+      @update:current-page="handlePageChange"
+      @update:per-page="handlePerPageChange"
+    >
+      <template #toolbar>
+        <label class="input input-bordered flex items-center gap-2 w-full sm:w-72" :aria-busy="loading">
+          <IconLucideSearch class="w-4 h-4" aria-hidden="true" />
+          <input
+            v-model="searchInput"
+            type="search"
+            class="grow min-w-0"
+            placeholder="Rechercher par nom…"
+            autocomplete="off"
+          />
+        </label>
+
+        <button
+          v-if="canEdit"
+          type="button"
+          class="btn btn-primary btn-sm"
+          :disabled="loading"
+          @click="openCreatePage"
+        >
+          <IconLucidePlus class="w-4 h-4" aria-hidden="true" />
+          Créer
+        </button>
+      </template>
+
+      <template #cell-name="{ row }">
+        <span class="font-medium">{{ row.name }}</span>
+      </template>
+
+      <template #cell-notes="{ row }">
+        <span v-if="row.notes" class="block text-sm text-base-content/80 break-words">{{ row.notes }}</span>
+        <span v-else class="text-base-content/50">—</span>
+      </template>
+
+      <template #cell-actions="{ row }">
+        <div class="flex justify-end gap-2">
+          <button type="button" class="btn btn-ghost btn-xs" @click="openRelatedModal(row)">
+            Liés
+          </button>
+          <button
+            v-if="canEdit && showConvertButton"
+            type="button"
+            class="btn btn-ghost btn-xs text-warning"
+            @click="openConversionModal(row)"
+          >
+            Convertir
+          </button>
+          <button type="button" class="btn btn-ghost btn-xs" @click="openEditPage(row)">
+            Éditer
+          </button>
+          <button v-if="canEdit" type="button" class="btn btn-ghost btn-xs text-error" @click="confirmDelete(row)">
+            Supprimer
+          </button>
+        </div>
+      </template>
+    </DataTable>
+
+    <ModelTypesConversionModal
+      :open="conversionModalOpen"
+      :model-type="conversionTarget"
+      @close="closeConversionModal"
+      @converted="onConverted"
    />

-    <ModelTypesTable
-      :items="items"
-      :loading="loading"
-      :total="total"
-      :limit="limit"
-      :offset="offset"
-      @edit="openEditPage"
-      @delete="confirmDelete"
-      @update:offset="onOffsetChange"
-    />
+    <dialog class="modal" :class="{ 'modal-open': relatedModalOpen }">
+      <div class="modal-box max-w-3xl">
+        <h3 class="text-lg font-bold text-base-content">
+          {{ relatedModalTitle }}
+        </h3>
+        <p class="mt-1 text-sm text-base-content/70">
+          {{ relatedModalSubtitle }}
+        </p>
+
+        <div class="mt-4 rounded-xl border border-base-200 bg-base-100">
+          <div v-if="relatedLoading" class="flex items-center gap-2 px-4 py-6 text-sm text-info">
+            <span class="loading loading-spinner loading-sm" aria-hidden="true" />
+            Chargement des éléments liés…
+          </div>
+
+          <div v-else-if="relatedError" class="px-4 py-6 text-sm text-error">
+            {{ relatedError }}
+          </div>
+
+          <div
+            v-else-if="relatedItems.length === 0"
+            class="px-4 py-6 text-sm text-base-content/60"
+          >
+            Aucun élément lié à cette catégorie.
+          </div>
+
+          <ul v-else class="max-h-96 divide-y divide-base-200 overflow-y-auto">
+            <li
+              v-for="entry in relatedItems"
+              :key="entry.id"
+              class="px-2 py-1"
+            >
+              <button
+                type="button"
+                class="flex w-full flex-col gap-1 rounded-lg px-2 py-2 text-left hover:bg-base-200 focus:bg-base-200 focus:outline-none"
+                @click="openRelatedEdit(entry)"
+              >
+                <span class="font-medium text-base-content">{{ entry.name }}</span>
+                <span v-if="entry.reference" class="text-xs text-base-content/60">
+                  Référence: {{ entry.reference }}
+                </span>
+              </button>
+            </li>
+          </ul>
+        </div>
+
+        <div class="modal-action">
+          <button type="button" class="btn" @click="closeRelatedModal">
+            Fermer
+          </button>
+        </div>
+      </div>
+    </dialog>
  </main>
 </template>

 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
-import { useHead, useRouter } from "#imports";
-import ModelTypesToolbar from "~/components/model-types/Toolbar.vue";
-import ModelTypesTable from "~/components/model-types/Table.vue";
+import { computed, onBeforeUnmount, onMounted, ref, watch, type Ref } from 'vue'
+import { useHead, useRouter } from '#imports'
+import DataTable from '~/components/common/DataTable.vue'
+import ModelTypesConversionModal from '~/components/model-types/ConversionModal.vue'
+import { useApi } from '~/composables/useApi'
+import { useUrlState } from '~/composables/useUrlState'
+import { extractCollection } from '~/shared/utils/apiHelpers'
+import type { DataTableSort } from '~/shared/types/dataTable'
 import {
  deleteModelType,
  listModelTypes,
  type ModelCategory,
  type ModelType,
  type ModelTypeListResponse,
-} from "~/services/modelTypes";
-import { useToast } from "~/composables/useToast";
+} from '~/services/modelTypes'
+import { useToast } from '~/composables/useToast'
+import { humanizeError } from '~/shared/utils/errorMessages'
+import { invalidateEntityTypeCache } from '~/composables/useEntityTypes'
+import IconLucideSearch from '~icons/lucide/search'
+import IconLucidePlus from '~icons/lucide/plus'

-const DEFAULT_DESCRIPTION =
-  "Gérez les catégories utilisées pour structurer les catalogues de composants, de pièces et de produits. Ajoutez, modifiez ou supprimez des entrées avec tri, recherche et pagination.";
+const DEFAULT_DESCRIPTION
+  = 'Gérez les catégories utilisées pour structurer les catalogues de composants, de pièces et de produits. Ajoutez, modifiez ou supprimez des entrées avec tri, recherche et pagination.'

 const props = withDefaults(
  defineProps<{
-    category: ModelCategory;
-    heading: string;
-    description?: string;
-    allowCategorySwitch?: boolean;
+    category: ModelCategory
+    heading: string
+    description?: string
+    allowCategorySwitch?: boolean
  }>(),
  {
    allowCategorySwitch: false,
-  }
-);
+  },
+)

-const selectedCategory = ref<ModelCategory>(props.category);
-const searchInput = ref("");
-const searchTerm = ref("");
-const sort = ref<"name" | "createdAt">("name");
-const dir = ref<"asc" | "desc">("asc");
-const limit = ref(20);
-const offset = ref(0);
+const selectedCategory = ref<ModelCategory>(props.category)
+const searchInput = ref('')

-const items = ref<ModelType[]>([]);
-const total = ref(0);
-const loading = ref(false);
+// State synced with URL query params
+const urlState = useUrlState({
+  q: { default: '' },
+  sort: { default: 'name' },
+  dir: { default: 'asc' },
+  limit: { default: 20, type: 'number' },
+  offset: { default: 0, type: 'number' },
+}, {
+  onRestore: () => {
+    searchInput.value = urlState.q.value
+    doRefresh()
+  },
+})
+const searchTerm = urlState.q
+const sort = urlState.sort as Ref<'name' | 'createdAt'>
+const dir = urlState.dir as Ref<'asc' | 'desc'>
+const limit = urlState.limit
+const offset = urlState.offset

-let debounceTimer: ReturnType<typeof setTimeout> | null = null;
-let activeController: AbortController | null = null;
+// Initialize searchInput from URL
+searchInput.value = searchTerm.value

-const router = useRouter();
-const { showError, showSuccess } = useToast();
+const items = ref<ModelType[]>([])
+const total = ref(0)
+const loading = ref(false)

-const headingText = computed(() => props.heading);
-const descriptionText = computed(
-  () => props.description ?? DEFAULT_DESCRIPTION
-);
-const allowCategorySwitch = computed(() => props.allowCategorySwitch ?? false);
+let debounceTimer: ReturnType<typeof setTimeout> | null = null
+let activeController: AbortController | null = null

-useHead(() => ({
-  title: headingText.value,
-}));
+const router = useRouter()
+const { showError, showSuccess } = useToast()
+const { get } = useApi()
+const { canEdit } = usePermissions()

-const extractErrorMessage = (error: unknown) => {
-  if (error && typeof error === "object") {
+const headingText = computed(() => props.heading)
+const descriptionText = computed(() => props.description ?? DEFAULT_DESCRIPTION)
+const allowCategorySwitch = computed(() => props.allowCategorySwitch ?? false)
+
+useHead(() => ({ title: headingText.value }))
+
+const columns = [
+  { key: 'name', label: 'Nom', sortable: true },
+  { key: 'notes', label: 'Notes' },
+  { key: 'actions', label: 'Actions', align: 'right' as const, width: 'w-48' },
+]
+
+const showConvertButton = computed(() =>
+  selectedCategory.value === 'PIECE' || selectedCategory.value === 'COMPONENT',
+)
+
+const categories: Array<{ label: string, value: ModelCategory }> = [
+  { label: 'Composants', value: 'COMPONENT' },
+  { label: 'Pièces', value: 'PIECE' },
+  { label: 'Produits', value: 'PRODUCT' },
+]
+
+// Sort state for DataTable
+const currentSort = computed<DataTableSort>(() => ({
+  field: sort.value,
+  direction: dir.value,
+}))
+
+const handleSort = (newSort: DataTableSort) => {
+  sort.value = newSort.field as 'name' | 'createdAt'
+  dir.value = newSort.direction as 'asc' | 'desc'
+  offset.value = 0
+  doRefresh()
+}
+
+// Pagination: convert offset/limit to page-based for DataTable
+const currentPage = computed(() => {
+  if (limit.value <= 0) return 1
+  return Math.floor(offset.value / limit.value) + 1
+})
+
+const totalPages = computed(() => {
+  if (limit.value <= 0) return 1
+  return Math.max(1, Math.ceil(total.value / limit.value))
+})
+
+const paginationState = computed(() => ({
+  currentPage: currentPage.value,
+  totalPages: totalPages.value,
+  totalItems: total.value,
+  pageItems: items.value.length,
+  perPageOptions: [20, 50, 100],
+  perPage: limit.value,
+}))
+
+const handlePageChange = (page: number) => {
+  offset.value = (page - 1) * limit.value
+  doRefresh()
+}
+
+const handlePerPageChange = (perPage: number) => {
+  limit.value = perPage
+  offset.value = 0
+  doRefresh()
+}
+
+const extractErrorMessage = (error: unknown): string => {
+  let raw: string | null = null
+  if (error && typeof error === 'object') {
    const maybeFetchError = error as {
-      data?: any;
-      statusMessage?: string;
-      message?: string;
-    };
+      data?: Record<string, unknown>
+      statusMessage?: string
+      message?: string
+    }
    if (maybeFetchError.data) {
-      const data = maybeFetchError.data;
-      if (typeof data.message === "string") {
-        return data.message;
-      }
-      if (Array.isArray(data.message) && data.message.length > 0) {
-        return data.message[0];
-      }
-    }
-    if (typeof maybeFetchError.statusMessage === "string") {
-      return maybeFetchError.statusMessage;
-    }
-    if (typeof maybeFetchError.message === "string") {
-      return maybeFetchError.message;
+      const data = maybeFetchError.data
+      if (typeof data['hydra:description'] === 'string') raw = data['hydra:description']
+      else if (typeof data.detail === 'string') raw = data.detail
+      else if (typeof data.message === 'string') raw = data.message
+      else if (Array.isArray(data.message) && data.message.length > 0) raw = data.message[0]
+      else if (typeof data.error === 'string') raw = data.error
    }
+    if (!raw && typeof maybeFetchError.statusMessage === 'string') raw = maybeFetchError.statusMessage
+    if (!raw && typeof maybeFetchError.message === 'string') raw = maybeFetchError.message
  }
-  return "Une erreur est survenue lors de la communication avec le serveur.";
-};
+  return humanizeError(raw)
+}

-const refresh = async ({
-  resetOffset = false,
-}: { resetOffset?: boolean } = {}) => {
-  if (resetOffset) {
-    offset.value = 0;
-  }
+const doRefresh = async ({ resetOffset = false }: { resetOffset?: boolean } = {}) => {
+  if (resetOffset) offset.value = 0

-  if (activeController) {
-    activeController.abort();
-  }
-
-  const controller = new AbortController();
-  activeController = controller;
-  loading.value = true;
+  if (activeController) activeController.abort()
+  const controller = new AbortController()
+  activeController = controller
+  loading.value = true

  try {
    const response: ModelTypeListResponse = await listModelTypes(
@@ -144,142 +342,236 @@ const refresh = async ({
        limit: limit.value,
        offset: offset.value,
      },
-      { signal: controller.signal }
-    );
-
-    items.value = response.items;
-    total.value = response.total;
-    offset.value = response.offset;
-    limit.value = response.limit;
-  } catch (error: any) {
-    if (error?.name === "AbortError") {
-      return;
-    }
-    showError(extractErrorMessage(error));
-  } finally {
+      { signal: controller.signal },
+    )
+    items.value = response.items
+    total.value = response.total
+    offset.value = response.offset
+    limit.value = response.limit
+  }
+  catch (error: unknown) {
+    if (error && typeof error === 'object' && (error as { name?: string }).name === 'AbortError') return
+    showError(extractErrorMessage(error))
+  }
+  finally {
    if (activeController === controller) {
-      loading.value = false;
-      activeController = null;
+      loading.value = false
+      activeController = null
    }
  }
-};
+}

 watch(
  () => props.category,
  (value) => {
    if (value !== selectedCategory.value) {
-      selectedCategory.value = value;
-      refresh({ resetOffset: true });
+      selectedCategory.value = value
+      doRefresh({ resetOffset: true })
    }
-  }
-);
-
-const onSearchInput = (value: string) => {
-  searchInput.value = value;
-};
+  },
+)

 const onCategoryChange = (value: ModelCategory) => {
-  if (!allowCategorySwitch.value) {
-    return;
-  }
+  if (!props.allowCategorySwitch) return
  if (selectedCategory.value !== value) {
-    selectedCategory.value = value;
-    refresh({ resetOffset: true });
+    selectedCategory.value = value
+    doRefresh({ resetOffset: true })
  }
-};
-
-const onSortChange = (value: "name" | "createdAt") => {
-  if (sort.value !== value) {
-    sort.value = value;
-    refresh({ resetOffset: true });
-  }
-};
-
-const onDirChange = (value: "asc" | "desc") => {
-  if (dir.value !== value) {
-    dir.value = value;
-    refresh({ resetOffset: true });
-  }
-};
-
-const onOffsetChange = (value: number) => {
-  const nextOffset = Math.max(0, value);
-  if (nextOffset !== offset.value) {
-    offset.value = nextOffset;
-    refresh();
-  }
-};
+}

 const resolveCategoryBasePath = (category: ModelCategory) => {
-  if (category === "COMPONENT") {
-    return "/component-category";
-  }
-  if (category === "PIECE") {
-    return "/piece-category";
-  }
-  return "/product-category";
-};
+  if (category === 'COMPONENT') return '/component-category'
+  if (category === 'PIECE') return '/piece-category'
+  return '/product-category'
+}

 const openCreatePage = () => {
-  const basePath = resolveCategoryBasePath(selectedCategory.value);
+  const basePath = resolveCategoryBasePath(selectedCategory.value)
  router.push(`${basePath}/new`).catch(() => {
-    showError("Navigation impossible vers la page de création.");
-  });
-};
+    showError('Navigation impossible vers la page de création.')
+  })
+}

 const openEditPage = (item: ModelType) => {
-  const category = item.category ?? selectedCategory.value;
-  const basePath = resolveCategoryBasePath(category);
+  const category = item.category ?? selectedCategory.value
+  const basePath = resolveCategoryBasePath(category)
  router.push(`${basePath}/${item.id}/edit`).catch(() => {
-    showError("Navigation impossible vers la page d'édition.");
-  });
-};
+    showError("Navigation impossible vers la page d'édition.")
+  })
+}
+
+const { confirm } = useConfirm()

 const confirmDelete = async (item: ModelType) => {
-  const confirmed = window.confirm(
-    "Supprimer ce type ? Cette action est irréversible."
-  );
-  if (!confirmed) {
-    return;
-  }
+  const confirmed = await confirm({
+    message: 'Supprimer ce type ? Cette action est irréversible.',
+  })
+  if (!confirmed) return

  try {
-    await deleteModelType(item.id);
-    showSuccess(`Type « ${item.name} » supprimé avec succès.`);
-
+    await deleteModelType(item.id)
+    invalidateEntityTypeCache(item.category)
+    showSuccess(`Type « ${item.name} » supprimé avec succès.`)
    if (items.value.length === 1 && offset.value >= limit.value) {
-      offset.value = Math.max(0, offset.value - limit.value);
+      offset.value = Math.max(0, offset.value - limit.value)
    }
-
-    await refresh();
-  } catch (error) {
-    showError(extractErrorMessage(error));
+    await doRefresh()
  }
-};
+  catch (error) {
+    showError(extractErrorMessage(error))
+  }
+}
+
+type RelatedEntry = {
+  id: string
+  name: string
+  reference?: string | null
+}
+
+const relatedModalOpen = ref(false)
+const relatedLoading = ref(false)
+const relatedError = ref<string | null>(null)
+const relatedItems = ref<RelatedEntry[]>([])
+const relatedType = ref<ModelType | null>(null)
+
+const relatedCategoryLabels: Record<ModelCategory, { plural: string, singular: string }> = {
+  COMPONENT: { plural: 'composants', singular: 'composant' },
+  PIECE: { plural: 'pièces', singular: 'pièce' },
+  PRODUCT: { plural: 'produits', singular: 'produit' },
+}
+
+const relatedModalTitle = computed(() => {
+  const current = relatedType.value
+  if (!current) return 'Éléments liés'
+  return `Éléments liés à « ${current.name} »`
+})
+
+const relatedModalSubtitle = computed(() => {
+  const current = relatedType.value
+  if (!current) return ''
+  const labels = relatedCategoryLabels[current.category] ?? relatedCategoryLabels.COMPONENT
+  const count = relatedItems.value.length
+  if (relatedLoading.value) return `Chargement des ${labels.plural}…`
+  if (count === 0) return `Aucun ${labels.singular} lié.`
+  if (count === 1) return `1 ${labels.singular} lié.`
+  return `${count} ${labels.plural} liés.`
+})
+
+const buildModelTypeIri = (id: string) => `/api/model_types/${id}`
+
+const resolveRelatedConfig = (category: ModelCategory) => {
+  if (category === 'COMPONENT') return { endpoint: '/composants', filterKey: 'typeComposant' }
+  if (category === 'PIECE') return { endpoint: '/pieces', filterKey: 'typePiece' }
+  return { endpoint: '/products', filterKey: 'typeProduct' }
+}
+
+const resolveRelatedEditBasePath = (category: ModelCategory) => {
+  if (category === 'COMPONENT') return '/component'
+  if (category === 'PIECE') return '/pieces'
+  return '/product'
+}
+
+const mapRelatedEntry = (item: unknown): RelatedEntry | null => {
+  if (!item || typeof item !== 'object') return null
+  const record = item as Record<string, unknown>
+  if (typeof record.id !== 'string') return null
+  const name = typeof record.name === 'string' && record.name.trim() ? record.name : 'Sans nom'
+  const reference
+    = typeof record.reference === 'string' && record.reference.trim()
+      ? record.reference
+      : typeof record.code === 'string' && record.code.trim()
+        ? record.code
+        : null
+  return { id: record.id, name, reference }
+}
+
+const loadRelatedItems = async (item: ModelType) => {
+  const { endpoint, filterKey } = resolveRelatedConfig(item.category)
+  const params = new URLSearchParams()
+  params.set('itemsPerPage', '200')
+  params.set(filterKey, buildModelTypeIri(item.id))
+  params.set('order[name]', 'asc')
+
+  relatedLoading.value = true
+  relatedError.value = null
+  relatedItems.value = []
+
+  try {
+    const result = await get(`${endpoint}?${params.toString()}`)
+    if (!result.success) {
+      relatedError.value = result.error ?? 'Impossible de charger les éléments liés.'
+      return
+    }
+    const collection = extractCollection(result.data)
+    relatedItems.value = collection
+      .map(mapRelatedEntry)
+      .filter((entry): entry is RelatedEntry => Boolean(entry))
+  }
+  catch (error) {
+    relatedError.value = extractErrorMessage(error)
+  }
+  finally {
+    relatedLoading.value = false
+  }
+}
+
+const openRelatedModal = (item: ModelType) => {
+  relatedType.value = item
+  relatedModalOpen.value = true
+  void loadRelatedItems(item)
+}
+
+const openRelatedEdit = (entry: RelatedEntry) => {
+  const current = relatedType.value
+  if (!current) return
+  const basePath = resolveRelatedEditBasePath(current.category)
+  relatedModalOpen.value = false
+  router.push(`${basePath}/${entry.id}/edit`).catch(() => {
+    showError("Navigation impossible vers la fiche d'édition.")
+  })
+}
+
+const closeRelatedModal = () => {
+  relatedModalOpen.value = false
+}
+
+const conversionModalOpen = ref(false)
+const conversionTarget = ref<ModelType | null>(null)
+
+const openConversionModal = (item: ModelType) => {
+  conversionTarget.value = item
+  conversionModalOpen.value = true
+}
+
+const closeConversionModal = () => {
+  conversionModalOpen.value = false
+}
+
+const onConverted = () => {
+  conversionModalOpen.value = false
+  invalidateEntityTypeCache('PIECE')
+  invalidateEntityTypeCache('COMPONENT')
+  showSuccess('Catégorie convertie avec succès.')
+  doRefresh()
+}

 watch(
  () => searchInput.value,
  (value) => {
-    if (debounceTimer) {
-      clearTimeout(debounceTimer);
-    }
+    if (debounceTimer) clearTimeout(debounceTimer)
    debounceTimer = setTimeout(() => {
-      searchTerm.value = value.trim();
-      refresh({ resetOffset: true });
-    }, 300);
-  }
-);
+      searchTerm.value = value.trim()
+      doRefresh({ resetOffset: true })
+    }, 300)
+  },
+)

 onMounted(() => {
-  refresh();
-});
+  doRefresh()
+})

 onBeforeUnmount(() => {
-  if (debounceTimer) {
-    clearTimeout(debounceTimer);
-  }
-  if (activeController) {
-    activeController.abort();
-  }
-});
+  if (debounceTimer) clearTimeout(debounceTimer)
+  if (activeController) activeController.abort()
+})
 </script>
--- a/app/components/model-types/ModelTypeForm.vue
+++ b/app/components/model-types/ModelTypeForm.vue
@@ -15,6 +15,7 @@
          minlength="2"
          maxlength="120"
          required
+          :disabled="restrictedMode"
        />
        <p v-if="errors.name" class="mt-1 text-sm text-error">{{ errors.name }}</p>
      </div>
@@ -28,7 +29,7 @@
          class="select select-bordered w-full"
          name="category"
          required
-          :disabled="lockCategory"
+          :disabled="lockCategory || isReadonly"
        >
          <option value="COMPONENT">Composants</option>
          <option value="PIECE">Pièces</option>
@@ -47,6 +48,7 @@
          rows="4"
          name="notes"
          maxlength="2000"
+          :disabled="restrictedMode"
        ></textarea>
        <p class="mt-1 text-xs text-base-content/70">Saisissez des informations complémentaires (facultatif).</p>
      </div>
@@ -81,6 +83,7 @@
            v-model="componentStructure"
            :allow-subcomponents="allowComponentSubcomponents"
            :max-subcomponent-depth="componentSubcomponentMaxDepth"
+            :restricted-mode="restrictedMode"
          />
        </div>

@@ -92,7 +95,7 @@
            Aperçu :
            <span class="font-medium text-base-content">{{ pieceStructurePreview }}</span>
          </p>
-          <PieceModelStructureEditor v-model="pieceStructure" />
+          <PieceModelStructureEditor v-model="pieceStructure" :restricted-mode="restrictedMode" />
        </div>

        <div
@@ -103,16 +106,35 @@
            Aperçu :
            <span class="font-medium text-base-content">{{ productStructurePreview }}</span>
          </p>
-          <PieceModelStructureEditor v-model="productStructure" />
+          <PieceModelStructureEditor v-model="productStructure" :restricted-mode="restrictedMode" />
        </div>
      </template>
    </section>

+    <div
+      v-if="restrictedMode && restrictedModeMessage"
+      class="alert alert-info"
+      role="status"
+      aria-live="polite"
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+      <span>{{ restrictedModeMessage }}</span>
+    </div>
+
+    <div
+      v-if="disableSubmit"
+      class="alert alert-warning"
+      role="alert"
+      aria-live="polite"
+    >
+      <span>{{ disableSubmitMessage }}</span>
+    </div>
+
    <footer class="flex flex-col gap-3 border-t border-base-300 pt-4 sm:flex-row sm:justify-end">
      <button type="button" class="btn btn-ghost" :disabled="saving" @click="emit('cancel')">
        Annuler
      </button>
-      <button type="submit" class="btn btn-primary" :disabled="isSubmitDisabled">
+      <button v-if="!isReadonly" type="submit" class="btn btn-primary" :disabled="isSubmitDisabled">
        <span v-if="saving" class="loading loading-spinner loading-sm" aria-hidden="true"></span>
        {{ submitLabel }}
      </button>
@@ -150,6 +172,11 @@ const props = withDefaults(defineProps<{
  structureLoading?: boolean
  allowComponentSubcomponents?: boolean
  componentSubcomponentMaxDepth?: number
+  disableSubmit?: boolean
+  disableSubmitMessage?: string
+  restrictedMode?: boolean
+  restrictedModeMessage?: string
+  readonly?: boolean
 }>(), {
  initialData: null,
  saving: false,
@@ -157,6 +184,11 @@ const props = withDefaults(defineProps<{
  structureLoading: false,
  allowComponentSubcomponents: true,
  componentSubcomponentMaxDepth: 1,
+  disableSubmit: false,
+  disableSubmitMessage: '',
+  restrictedMode: false,
+  restrictedModeMessage: '',
+  readonly: false,
 })

 const emit = defineEmits<{
@@ -173,6 +205,19 @@ const componentSubcomponentMaxDepth = computed(() =>
    ? props.componentSubcomponentMaxDepth
    : 1,
 )
+const disableSubmit = computed(() => props.disableSubmit === true)
+const disableSubmitMessage = computed(() =>
+  (props.disableSubmitMessage && props.disableSubmitMessage.trim())
+    ? props.disableSubmitMessage
+    : 'Cette catégorie ne peut pas être modifiée car des éléments y sont déjà liés.',
+)
+const isReadonly = computed(() => props.readonly === true)
+const restrictedMode = computed(() => props.restrictedMode === true || isReadonly.value)
+const restrictedModeMessage = computed(() =>
+  (props.restrictedModeMessage && props.restrictedModeMessage.trim())
+    ? props.restrictedModeMessage
+    : '',
+)

 const form = reactive<ModelTypePayload>({
  name: '',
@@ -236,10 +281,11 @@ const resetForm = () => {
    ? incoming.code
    : generateCodeFromName(form.name)
  form.category = incoming.category ?? props.initialCategory
+  const incomingRecord = incoming as Record<string, unknown>
  form.notes = typeof incoming.notes === 'string'
    ? incoming.notes
-    : typeof (incoming as any).description === 'string'
-      ? (incoming as any).description
+    : typeof incomingRecord.description === 'string'
+      ? incomingRecord.description
      : ''

  errors.name = undefined
@@ -248,7 +294,7 @@ const resetForm = () => {
 }

 const submitLabel = computed(() => (props.mode === 'edit' ? 'Enregistrer' : 'Créer'))
-const isSubmitDisabled = computed(() => saving.value || structureLoading.value)
+const isSubmitDisabled = computed(() => saving.value || structureLoading.value || disableSubmit.value || isReadonly.value)

 const validate = () => {
  errors.name = undefined
@@ -265,6 +311,7 @@ const validate = () => {
 }

 const handleSubmit = () => {
+  if (isReadonly.value) return
  if (!validate()) {
    return
  }
--- a/app/components/model-types/Table.vue
+++ b/app/components/model-types/Table.vue
@@ -34,7 +34,7 @@
            <tr class="text-base-content/70">
              <th scope="col">Nom</th>
              <th scope="col">Notes</th>
-              <th scope="col" class="w-32 text-right">Actions</th>
+              <th scope="col" class="w-48 text-right">Actions</th>
            </tr>
          </thead>
          <tbody>
@@ -45,10 +45,22 @@
                <span v-else class="text-base-content/50">—</span>
              </td>
              <td class="text-right space-x-2">
+                <button type="button" class="btn btn-ghost btn-sm" @click="emit('related', item)">
+                  Liés
+                </button>
+                <button
+                  v-if="canEdit && showConvertButton"
+                  type="button"
+                  class="btn btn-ghost btn-sm text-warning"
+                  @click="emit('convert', item)"
+                >
+                  <IconLucideArrowLeftRight class="h-4 w-4" aria-hidden="true" />
+                  Convertir
+                </button>
                <button type="button" class="btn btn-ghost btn-sm" @click="emit('edit', item)">
                  Éditer
                </button>
-                <button type="button" class="btn btn-ghost btn-sm text-error" @click="emit('delete', item)">
+                <button v-if="canEdit" type="button" class="btn btn-ghost btn-sm text-error" @click="emit('delete', item)">
                  Supprimer
                </button>
              </td>
@@ -72,10 +84,22 @@
          <p class="mt-3 text-sm text-base-content/80" v-if="item.notes">{{ item.notes }}</p>
          <p class="mt-3 text-sm text-base-content/50" v-else>Pas de notes</p>
          <footer class="mt-4 flex flex-wrap items-center gap-2 justify-end">
+            <button type="button" class="btn btn-ghost btn-sm" @click="emit('related', item)">
+              Liés
+            </button>
+            <button
+              v-if="canEdit && showConvertButton"
+              type="button"
+              class="btn btn-ghost btn-sm text-warning"
+              @click="emit('convert', item)"
+            >
+              <IconLucideArrowLeftRight class="h-4 w-4" aria-hidden="true" />
+              Convertir
+            </button>
            <button type="button" class="btn btn-ghost btn-sm" @click="emit('edit', item)">
              Éditer
            </button>
-            <button type="button" class="btn btn-ghost btn-sm text-error" @click="emit('delete', item)">
+            <button v-if="canEdit" type="button" class="btn btn-ghost btn-sm text-error" @click="emit('delete', item)">
              Supprimer
            </button>
          </footer>
@@ -112,6 +136,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import IconLucideInbox from '~icons/lucide/inbox';
+import IconLucideArrowLeftRight from '~icons/lucide/arrow-left-right';
 import type { ModelType, ModelCategory } from '~/services/modelTypes';

 const props = defineProps<{
@@ -120,14 +145,22 @@ const props = defineProps<{
  total: number;
  limit: number;
  offset: number;
+  category?: ModelCategory;
+  canEdit?: boolean;
 }>();

 const emit = defineEmits<{
+  (e: 'related', item: ModelType): void;
  (e: 'edit', item: ModelType): void;
  (e: 'delete', item: ModelType): void;
+  (e: 'convert', item: ModelType): void;
  (e: 'update:offset', offset: number): void;
 }>();

+const showConvertButton = computed(() =>
+  props.category === 'PIECE' || props.category === 'COMPONENT',
+);
+
 const categoryDictionary: Record<ModelCategory, string> = {
  COMPONENT: 'Composants',
  PIECE: 'Pièces',
--- a/app/components/model-types/Toolbar.vue
+++ b/app/components/model-types/Toolbar.vue
@@ -83,13 +83,14 @@ import type { ModelCategory } from '~/services/modelTypes';
 type SortField = 'name' | 'createdAt';
 type SortDirection = 'asc' | 'desc';

-const props = defineProps<{ 
+const props = defineProps<{
  category: ModelCategory;
  search: string;
  sort: SortField;
  dir: SortDirection;
  loading?: boolean;
  showCategoryTabs?: boolean;
+  canEdit?: boolean;
 }>();

 const emit = defineEmits<{
--- a/app/components/sites/SiteCard.vue
+++ b/app/components/sites/SiteCard.vue
@@ -37,9 +37,9 @@

      <div class="card-actions justify-end mt-4">
        <button class="btn btn-sm btn-outline" @click="emit('edit', site)">
-          Modifier
+          {{ canEdit ? 'Modifier' : 'Consulter' }}
        </button>
-        <button class="btn btn-sm btn-error" @click="emit('delete', site)">
+        <button v-if="canEdit" class="btn btn-sm btn-error" @click="emit('delete', site)">
          Supprimer
        </button>
      </div>
@@ -55,6 +55,8 @@ import IconLucidePhone from '~icons/lucide/phone'
 import IconLucideUser from '~icons/lucide/user'
 import { formatPhone } from '~/utils/formatters/phone'

+const { canEdit } = usePermissions()
+
 const props = defineProps({
  site: {
    type: Object,
--- a/app/components/sites/SiteContactFormFields.vue
+++ b/app/components/sites/SiteContactFormFields.vue
@@ -9,11 +9,12 @@
        type="text"
        placeholder="Nom et prénom"
        class="input input-bordered"
+        :disabled="disabled"
        required
      />
    </div>

-    <FieldPhone v-model="contactPhone" required />
+    <FieldPhone v-model="contactPhone" :disabled="disabled" required />

    <div class="form-control">
      <label class="label">
@@ -24,6 +25,7 @@
        type="text"
        placeholder="Adresse complète"
        class="input input-bordered"
+        :disabled="disabled"
        required
      />
    </div>
@@ -38,6 +40,7 @@
          type="text"
          placeholder="Code postal"
          class="input input-bordered"
+          :disabled="disabled"
          required
        />
      </div>
@@ -51,6 +54,7 @@
          type="text"
          placeholder="Ville"
          class="input input-bordered"
+          :disabled="disabled"
          required
        />
      </div>
@@ -77,6 +81,10 @@ const props = defineProps({
    type: Object as PropType<SiteForm>,
    required: true,
  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
 })

 const form = toRef(props, 'form')
--- a/app/components/sites/SiteCreateModal.vue
+++ b/app/components/sites/SiteCreateModal.vue
@@ -12,17 +12,18 @@
            type="text"
            placeholder="Ex: Usine principale"
            class="input input-bordered"
+            :disabled="disabled"
            required
          />
        </div>

-        <SiteContactFormFields :form="siteRef" />
+        <SiteContactFormFields :form="siteRef" :disabled="disabled" />

        <div class="modal-action">
          <button type="button" class="btn" @click="emit('close')">
            Annuler
          </button>
-          <button type="submit" class="btn btn-primary">
+          <button type="submit" class="btn btn-primary" :disabled="disabled">
            Créer le site
          </button>
        </div>
@@ -53,6 +54,10 @@ const props = defineProps({
  site: {
    type: Object as PropType<SiteForm>,
    required: true
+  },
+  disabled: {
+    type: Boolean,
+    default: false
  }
 })

--- a/app/components/sites/SiteEditModal.vue
+++ b/app/components/sites/SiteEditModal.vue
@@ -2,7 +2,7 @@
  <div v-if="visible" class="modal modal-open">
    <div class="modal-box max-w-md">
      <h3 class="font-bold text-lg mb-4">
-        Modifier le site
+        {{ disabled ? 'Détails du site' : 'Modifier le site' }}
        <span v-if="siteName" class="block text-sm font-normal text-gray-500">{{ siteName }}</span>
      </h3>
      <form class="space-y-4" @submit.prevent="emit('submit')">
@@ -15,11 +15,12 @@
            type="text"
            placeholder="Nom du site"
            class="input input-bordered"
+            :disabled="disabled"
            required
          >
        </div>

-        <SiteContactFormFields :form="props.form" />
+        <SiteContactFormFields :form="props.form" :disabled="disabled" />

        <div class="border-t border-base-200 pt-4 space-y-4">
          <div class="flex items-center justify-between">
@@ -37,6 +38,7 @@
          </div>

          <DocumentUpload
+            v-if="!disabled"
            v-model="selectedFilesModel"
            title="Déposer vos fichiers"
            subtitle="Formats courants acceptés : PDF, JPG, PNG, DOCX..."
@@ -55,8 +57,8 @@
                <div class="flex items-center gap-3 text-sm">
                  <div class="h-14 w-14 flex-shrink-0 overflow-hidden rounded-md border border-base-200 bg-base-200/70 flex items-center justify-center">
                    <img
-                      v-if="isImageDocument(document) && document.path"
-                      :src="document.path"
+                      v-if="isImageDocument(document) && (document.fileUrl || document.path)"
+                      :src="document.fileUrl || document.path"
                      class="h-full w-full object-cover"
                      :alt="`Aperçu de ${document.name}`"
                    >
@@ -90,7 +92,7 @@
                  <button type="button" class="btn btn-ghost btn-xs" @click="emit('download-document', document)">
                    Télécharger
                  </button>
-                  <button type="button" class="btn btn-error btn-xs" @click="emit('remove-document', document.id)">
+                  <button v-if="!disabled" type="button" class="btn btn-error btn-xs" @click="emit('remove-document', document.id)">
                    Supprimer
                  </button>
                </div>
@@ -103,7 +105,7 @@
          <button type="button" class="btn" @click="emit('close')">
            Annuler
          </button>
-          <button type="submit" class="btn btn-primary" :disabled="uploadingDocuments">
+          <button type="submit" class="btn btn-primary" :disabled="disabled || uploadingDocuments">
            <span v-if="uploadingDocuments" class="loading loading-spinner loading-xs mr-2" />
            Enregistrer
          </button>
@@ -114,7 +116,7 @@
 </template>

 <script setup>
-import { computed, toRefs } from 'vue'
+import { computed } from 'vue'
 import { isImageDocument } from '~/utils/documentPreview'
 import DocumentUpload from '~/components/DocumentUpload.vue'
 import SiteContactFormFields from '~/components/sites/SiteContactFormFields.vue'
@@ -155,6 +157,10 @@ const props = defineProps({
  formatSize: {
    type: Function,
    required: true
+  },
+  disabled: {
+    type: Boolean,
+    default: false
  }
 })

@@ -167,8 +173,6 @@ const emit = defineEmits([
  'update:selectedFiles'
 ])

-const form = toRefs(props.form)
-
 const selectedFilesModel = computed({
  get: () => props.selectedFiles,
  set: value => emit('update:selectedFiles', value)
--- a/app/composables/useActivityLog.ts
+++ b/app/composables/useActivityLog.ts
@@ -0,0 +1,70 @@
+import { ref } from 'vue'
+import { useApi } from '~/composables/useApi'
+
+export type ActivityLogActor = {
+  id: string
+  label: string
+}
+
+export type ActivityLogEntry = {
+  id: string
+  entityType: string
+  entityId: string
+  entityName: string | null
+  entityRef: string | null
+  action: 'create' | 'update' | 'delete' | string
+  createdAt: string
+  actor: ActivityLogActor | null
+  diff: Record<string, { from: unknown; to: unknown }> | null
+  snapshot: Record<string, unknown> | null
+}
+
+interface LoadActivityLogOptions {
+  page?: number
+  itemsPerPage?: number
+  entityType?: string
+  action?: string
+}
+
+export function useActivityLog() {
+  const { get } = useApi()
+
+  const entries = ref<ActivityLogEntry[]>([])
+  const total = ref(0)
+  const loading = ref(false)
+  const error = ref<string | null>(null)
+
+  const loadActivityLog = async (options: LoadActivityLogOptions = {}) => {
+    loading.value = true
+    error.value = null
+    try {
+      const params = new URLSearchParams()
+      params.set('page', String(options.page ?? 1))
+      params.set('itemsPerPage', String(options.itemsPerPage ?? 30))
+      if (options.entityType) params.set('entityType', options.entityType)
+      if (options.action) params.set('action', options.action)
+
+      const result = await get(`/activity-logs?${params.toString()}`)
+      if (!result.success) {
+        error.value = result.error ?? 'Impossible de charger le journal d\'activité.'
+        entries.value = []
+        return result
+      }
+
+      const data = result.data as any
+      entries.value = Array.isArray(data?.items) ? data.items : []
+      total.value = typeof data?.total === 'number' ? data.total : entries.value.length
+
+      return { success: true, data: entries.value }
+    } catch (err: any) {
+      const message = err?.message ?? 'Erreur inconnue'
+      error.value = message
+      entries.value = []
+      return { success: false, error: message }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  return { entries, total, loading, error, loadActivityLog }
+}
--- a/app/composables/useAdminProfiles.ts
+++ b/app/composables/useAdminProfiles.ts
@@ -0,0 +1,80 @@
+import { ref } from 'vue'
+import { useApi } from './useApi'
+
+export interface AdminProfile {
+  id: string
+  firstName: string
+  lastName: string
+  email: string | null
+  isActive: boolean
+  hasPassword: boolean
+  roles: string[]
+  createdAt: string
+  updatedAt: string
+}
+
+export function useAdminProfiles() {
+  const { get, post, put } = useApi()
+  const profiles = ref<AdminProfile[]>([])
+  const loading = ref(false)
+
+  const fetchAll = async () => {
+    loading.value = true
+    try {
+      const result = await get<AdminProfile[]>('/admin/profiles')
+      if (result.success && result.data) {
+        profiles.value = result.data
+      }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const createProfile = async (data: {
+    firstName: string
+    lastName: string
+    email?: string
+    password?: string
+    role?: string
+  }) => {
+    const result = await post<AdminProfile>('/admin/profiles', data)
+    if (result.success) {
+      await fetchAll()
+    }
+    return result
+  }
+
+  const updateRole = async (id: string, role: string) => {
+    const result = await put<AdminProfile>(`/admin/profiles/${id}/role`, { role })
+    if (result.success) {
+      await fetchAll()
+    }
+    return result
+  }
+
+  const setPassword = async (id: string, password: string) => {
+    const result = await put<AdminProfile>(`/admin/profiles/${id}/password`, { password })
+    if (result.success) {
+      await fetchAll()
+    }
+    return result
+  }
+
+  const deactivateProfile = async (id: string) => {
+    const result = await put<AdminProfile>(`/admin/profiles/${id}/deactivate`, {})
+    if (result.success) {
+      await fetchAll()
+    }
+    return result
+  }
+
+  return {
+    profiles,
+    loading,
+    fetchAll,
+    createProfile,
+    updateRole,
+    setPassword,
+    deactivateProfile,
+  }
+}
--- a/app/composables/useApi.js
+++ b/app/composables/useApi.js
@@ -1,105 +0,0 @@
-import { useToast } from './useToast'
-
-export function useApi () {
-  const { showSuccess, showError, showInfo } = useToast()
-  const { public: publicConfig } = useRuntimeConfig()
-  const API_BASE_URL = publicConfig.apiBaseUrl || 'http://localhost:3000'
-  const parsedApiTimeout = Number(publicConfig.apiTimeout ?? 30000)
-  const API_TIMEOUT = Number.isNaN(parsedApiTimeout) ? 30000 : parsedApiTimeout
-
-  const apiCall = async (endpoint, options = {}) => {
-    const url = `${API_BASE_URL}${endpoint}`
-    const defaultOptions = {
-      credentials: 'include',
-      headers: {
-        'Content-Type': 'application/json'
-      }
-    }
-
-    // Ajouter un timeout à la requête
-    const controller = new AbortController()
-    const timeoutId = setTimeout(() => controller.abort(), API_TIMEOUT)
-
-    try {
-      const response = await fetch(url, {
-        ...defaultOptions,
-        ...options,
-        headers: {
-          ...defaultOptions.headers,
-          ...options.headers
-        },
-        signal: controller.signal
-      })
-
-      clearTimeout(timeoutId)
-
-      if (response.ok) {
-        let data = null
-        if (response.status !== 204) {
-          const contentType = response.headers.get('content-type') || ''
-          if (contentType.includes('application/json') || contentType.includes('application/ld+json') || contentType.includes('+json')) {
-            const text = await response.text()
-            data = text ? JSON.parse(text) : null
-          } else {
-            const text = await response.text()
-            data = text || null
-          }
-        }
-        return { success: true, data }
-      } else {
-        const contentType = response.headers.get('content-type') || ''
-        let errorData = {}
-        if (contentType.includes('application/json')) {
-          errorData = await response.json().catch(() => ({}))
-        } else {
-          const text = await response.text().catch(() => '')
-          errorData = text ? { message: text } : {}
-        }
-        const errorMessage = errorData.message || `Erreur ${response.status}: ${response.statusText}`
-        showError(errorMessage)
-        return { success: false, error: errorMessage, status: response.status }
-      }
-    } catch (error) {
-      clearTimeout(timeoutId)
-      const errorMessage = error.name === 'AbortError' ? 'Timeout de la requête' : error.message || 'Erreur réseau'
-      showError(`Erreur réseau: ${errorMessage}`)
-      return { success: false, error: errorMessage }
-    }
-  }
-
-  const get = async (endpoint) => {
-    return apiCall(endpoint, { method: 'GET' })
-  }
-
-  const post = async (endpoint, data) => {
-    return apiCall(endpoint, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/ld+json'
-      },
-      body: JSON.stringify(data)
-    })
-  }
-
-  const patch = async (endpoint, data) => {
-    return apiCall(endpoint, {
-      method: 'PATCH',
-      headers: {
-        'Content-Type': 'application/merge-patch+json'
-      },
-      body: JSON.stringify(data)
-    })
-  }
-
-  const del = async (endpoint) => {
-    return apiCall(endpoint, { method: 'DELETE' })
-  }
-
-  return {
-    apiCall,
-    get,
-    post,
-    patch,
-    delete: del
-  }
-}
--- a/app/composables/useApi.ts
+++ b/app/composables/useApi.ts
@@ -0,0 +1,141 @@
+import { useToast } from './useToast'
+import { humanizeError, extractApiErrorMessage } from '~/shared/utils/errorMessages'
+
+export interface ApiResponse<T = any> {
+  success: boolean
+  data?: T
+  error?: string
+  status?: number
+}
+
+interface ApiCallOptions extends RequestInit {
+  headers?: Record<string, string>
+}
+
+export function useApi() {
+  const { showError } = useToast()
+  const { public: publicConfig } = useRuntimeConfig()
+  const API_BASE_URL = (publicConfig.apiBaseUrl as string) || 'http://localhost:3000'
+  const parsedApiTimeout = Number(publicConfig.apiTimeout ?? 30000)
+  const API_TIMEOUT = Number.isNaN(parsedApiTimeout) ? 30000 : parsedApiTimeout
+
+  const apiCall = async <T = any>(endpoint: string, options: ApiCallOptions = {}): Promise<ApiResponse<T>> => {
+    const url = `${API_BASE_URL}${endpoint}`
+    const isFormData = options.body instanceof FormData
+    const defaultOptions: ApiCallOptions = {
+      credentials: 'include',
+      headers: isFormData ? {} : { 'Content-Type': 'application/json' },
+    }
+
+    // Ajouter un timeout à la requête
+    const controller = new AbortController()
+    const timeoutId = setTimeout(() => controller.abort(), API_TIMEOUT)
+
+    try {
+      const response = await fetch(url, {
+        ...defaultOptions,
+        ...options,
+        headers: {
+          ...defaultOptions.headers,
+          ...options.headers,
+        },
+        signal: controller.signal,
+      })
+
+      clearTimeout(timeoutId)
+
+      if (response.ok) {
+        let data: T | null = null
+        if (response.status !== 204) {
+          const contentType = response.headers.get('content-type') || ''
+          if (contentType.includes('application/json') || contentType.includes('application/ld+json') || contentType.includes('+json')) {
+            const text = await response.text()
+            data = text ? JSON.parse(text) : null
+          } else {
+            const text = await response.text()
+            data = (text || null) as T | null
+          }
+        }
+        return { success: true, data: data as T }
+      } else {
+        const contentType = response.headers.get('content-type') || ''
+        let errorData: Record<string, unknown> = {}
+        if (contentType.includes('json')) {
+          errorData = await response.json().catch(() => ({}))
+        } else {
+          const text = await response.text().catch(() => '')
+          errorData = text ? { message: text } : {}
+        }
+        const rawMessage = response.status === 403
+          ? 'Permissions insuffisantes pour cette action.'
+          : extractApiErrorMessage(errorData) || `Erreur ${response.status}: ${response.statusText}`
+        const errorMessage = humanizeError(rawMessage)
+        showError(errorMessage)
+        return { success: false, error: errorMessage, status: response.status }
+      }
+    } catch (error) {
+      clearTimeout(timeoutId)
+      const err = error as Error & { name?: string }
+      const errorMessage = err.name === 'AbortError'
+        ? 'La requête a pris trop de temps. Veuillez réessayer.'
+        : 'Impossible de contacter le serveur. Vérifiez votre connexion.'
+      showError(errorMessage)
+      return { success: false, error: errorMessage }
+    }
+  }
+
+  const get = async <T = any>(endpoint: string): Promise<ApiResponse<T>> => {
+    return apiCall<T>(endpoint, { method: 'GET' })
+  }
+
+  const post = async <T = any>(endpoint: string, data?: unknown): Promise<ApiResponse<T>> => {
+    return apiCall<T>(endpoint, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/ld+json',
+      },
+      body: data !== undefined ? JSON.stringify(data) : undefined,
+    })
+  }
+
+  const patch = async <T = any>(endpoint: string, data?: unknown): Promise<ApiResponse<T>> => {
+    return apiCall<T>(endpoint, {
+      method: 'PATCH',
+      headers: {
+        'Content-Type': 'application/merge-patch+json',
+      },
+      body: data !== undefined ? JSON.stringify(data) : undefined,
+    })
+  }
+
+  const put = async <T = any>(endpoint: string, data?: unknown): Promise<ApiResponse<T>> => {
+    return apiCall<T>(endpoint, {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/ld+json',
+      },
+      body: data !== undefined ? JSON.stringify(data) : undefined,
+    })
+  }
+
+  const postFormData = async <T = any>(endpoint: string, formData: FormData): Promise<ApiResponse<T>> => {
+    return apiCall<T>(endpoint, {
+      method: 'POST',
+      body: formData,
+    })
+  }
+
+  const del = async <T = any>(endpoint: string): Promise<ApiResponse<T>> => {
+    return apiCall<T>(endpoint, { method: 'DELETE' })
+  }
+
+  return {
+    apiCall,
+    get,
+    post,
+    postFormData,
+    patch,
+    put,
+    delete: del,
+  }
+}
--- a/app/composables/useCategoryEditGuard.ts
+++ b/app/composables/useCategoryEditGuard.ts
@@ -0,0 +1,114 @@
+import { computed, ref } from 'vue'
+import { useApi } from '~/composables/useApi'
+import { useToast } from '~/composables/useToast'
+
+type GuardLabels = {
+  singular: string
+  plural: string
+  verifying: string
+}
+
+type GuardConfig = {
+  endpoint: string
+  filterKey: string
+  labels: GuardLabels
+}
+
+const extractTotal = (payload: any, fallbackLength: number) => {
+  if (typeof payload?.totalItems === 'number') {
+    return payload.totalItems
+  }
+  if (typeof payload?.['hydra:totalItems'] === 'number') {
+    return payload['hydra:totalItems']
+  }
+  if (Array.isArray(payload?.member)) {
+    return payload.member.length
+  }
+  if (Array.isArray(payload?.['hydra:member'])) {
+    return payload['hydra:member'].length
+  }
+  return fallbackLength
+}
+
+export function useCategoryEditGuard (config: GuardConfig) {
+  const { get } = useApi()
+  const { showInfo } = useToast()
+
+  const linkedCount = ref(0)
+  const linkedLoading = ref(false)
+
+  const loadLinkedCount = async (modelTypeId: string) => {
+    linkedLoading.value = true
+    try {
+      const params = new URLSearchParams()
+      params.set('itemsPerPage', '1')
+      params.set(config.filterKey, `/api/model_types/${modelTypeId}`)
+
+      const result = await get(`${config.endpoint}?${params.toString()}`)
+      if (!result.success) {
+        linkedCount.value = 0
+        return
+      }
+
+      const fallbackLength = Array.isArray(result.data?.member)
+        ? result.data.member.length
+        : Array.isArray(result.data?.['hydra:member'])
+          ? result.data['hydra:member'].length
+          : 0
+
+      linkedCount.value = extractTotal(result.data, fallbackLength)
+    } catch (_error) {
+      linkedCount.value = 0
+    } finally {
+      linkedLoading.value = false
+    }
+  }
+
+  const isRestrictedMode = computed(
+    () => !linkedLoading.value && linkedCount.value > 0,
+  )
+
+  const isSubmitBlocked = computed(
+    () => linkedLoading.value,
+  )
+
+  const restrictedModeMessage = computed(() => {
+    if (linkedLoading.value) {
+      return config.labels.verifying
+    }
+    if (linkedCount.value <= 0) {
+      return ''
+    }
+    if (linkedCount.value === 1) {
+      return `Mode restreint : 1 ${config.labels.singular} est déjà lié à cette catégorie. Vous pouvez ajouter de nouveaux champs personnalisés et renommer les existants, mais pas modifier leur type ou les supprimer.`
+    }
+    return `Mode restreint : ${linkedCount.value} ${config.labels.plural} sont déjà liés à cette catégorie. Vous pouvez ajouter de nouveaux champs personnalisés et renommer les existants, mais pas modifier leur type ou les supprimer.`
+  })
+
+  const submitBlockMessage = computed(() => {
+    if (linkedLoading.value) {
+      return config.labels.verifying
+    }
+    return ''
+  })
+
+  const guardSubmitOrNotify = () => {
+    if (!isSubmitBlocked.value) {
+      return false
+    }
+    showInfo(submitBlockMessage.value || 'Veuillez patienter...')
+    return true
+  }
+
+  return {
+    linkedCount,
+    linkedLoading,
+    isRestrictedMode,
+    isSubmitBlocked,
+    restrictedModeMessage,
+    submitBlockMessage,
+    loadLinkedCount,
+    guardSubmitOrNotify,
+  }
+}
+
--- a/app/composables/useComments.ts
+++ b/app/composables/useComments.ts
@@ -0,0 +1,190 @@
+import { ref } from 'vue'
+import { useApi } from './useApi'
+import { useToast } from './useToast'
+import { extractCollection } from '~/shared/utils/apiHelpers'
+
+export interface Comment {
+  id: string
+  content: string
+  entityType: string
+  entityId: string
+  entityName?: string | null
+  authorId: string
+  authorName: string
+  status: 'open' | 'resolved'
+  resolvedById?: string | null
+  resolvedByName?: string | null
+  resolvedAt?: string | null
+  createdAt: string
+  updatedAt: string
+}
+
+interface CommentResult {
+  success: boolean
+  data?: Comment | Comment[]
+  error?: string
+}
+
+interface CommentListResult {
+  success: boolean
+  data?: Comment[]
+  total?: number
+  error?: string
+}
+
+export function useComments() {
+  const { get, post, patch, delete: del } = useApi()
+  const { showSuccess, showError } = useToast()
+  const loading = ref(false)
+
+  const fetchComments = async (
+    entityType: string,
+    entityId: string,
+    status: string = 'open',
+  ): Promise<CommentListResult> => {
+    loading.value = true
+    try {
+      const params = new URLSearchParams({
+        entityType,
+        entityId,
+        status,
+        'order[createdAt]': 'desc',
+        itemsPerPage: '200',
+      })
+      const result = await get(`/comments?${params.toString()}`)
+      if (result.success) {
+        const items = extractCollection<Comment>(result.data)
+        return { success: true, data: items }
+      }
+      return { success: false, error: result.error }
+    } catch (error) {
+      const err = error as Error
+      return { success: false, error: err.message }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const fetchAllComments = async (options: {
+    status?: string
+    entityType?: string
+    entityName?: string
+    page?: number
+    itemsPerPage?: number
+    orderBy?: string
+    orderDir?: string
+  } = {}): Promise<CommentListResult> => {
+    loading.value = true
+    try {
+      const params = new URLSearchParams()
+      if (options.status) params.set('status', options.status)
+      if (options.entityType) params.set('entityType', options.entityType)
+      if (options.entityName) params.set('entityName', options.entityName)
+      const sortField = options.orderBy || 'createdAt'
+      const sortDir = options.orderDir || 'desc'
+      params.set(`order[${sortField}]`, sortDir)
+      params.set('itemsPerPage', String(options.itemsPerPage || 30))
+      params.set('page', String(options.page || 1))
+
+      const result = await get(`/comments?${params.toString()}`)
+      if (result.success) {
+        const items = extractCollection<Comment>(result.data)
+        const raw = result.data as Record<string, unknown> | null
+        const total = Number(raw?.['hydra:totalItems'] ?? raw?.totalItems ?? items.length)
+        return { success: true, data: items, total }
+      }
+      return { success: false, error: result.error }
+    } catch (error) {
+      const err = error as Error
+      return { success: false, error: err.message }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const createComment = async (
+    entityType: string,
+    entityId: string,
+    content: string,
+    entityName?: string,
+  ): Promise<CommentResult> => {
+    loading.value = true
+    try {
+      const payload: Record<string, string> = { entityType, entityId, content }
+      if (entityName) payload.entityName = entityName
+      const result = await post('/comments', payload)
+      if (result.success) {
+        showSuccess('Commentaire ajouté')
+        return { success: true, data: result.data as Comment }
+      }
+      if (result.error) showError(result.error)
+      return { success: false, error: result.error }
+    } catch (error) {
+      const err = error as Error
+      showError('Impossible d\'ajouter le commentaire')
+      return { success: false, error: err.message }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const resolveComment = async (commentId: string): Promise<CommentResult> => {
+    loading.value = true
+    try {
+      const result = await patch(`/comments/${commentId}/resolve`)
+      if (result.success) {
+        showSuccess('Commentaire résolu')
+        return { success: true, data: result.data as Comment }
+      }
+      if (result.error) showError(result.error)
+      return { success: false, error: result.error }
+    } catch (error) {
+      const err = error as Error
+      showError('Impossible de résoudre le commentaire')
+      return { success: false, error: err.message }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const deleteComment = async (commentId: string): Promise<CommentResult> => {
+    loading.value = true
+    try {
+      const result = await del(`/comments/${commentId}`)
+      if (result.success) {
+        showSuccess('Commentaire supprimé')
+        return { success: true }
+      }
+      if (result.error) showError(result.error)
+      return { success: false, error: result.error }
+    } catch (error) {
+      const err = error as Error
+      showError('Impossible de supprimer le commentaire')
+      return { success: false, error: err.message }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const fetchUnresolvedCount = async (): Promise<number> => {
+    try {
+      const result = await get<{ count: number }>('/comments/stats/unresolved-count')
+      if (result.success && result.data) {
+        return result.data.count
+      }
+      return 0
+    } catch {
+      return 0
+    }
+  }
+
+  return {
+    loading,
+    fetchComments,
+    fetchAllComments,
+    createComment,
+    resolveComment,
+    deleteComment,
+    fetchUnresolvedCount,
+  }
+}
--- a/app/composables/useComponentHistory.ts
+++ b/app/composables/useComponentHistory.ts
@@ -0,0 +1,12 @@
+/**
+ * Backward-compatible wrapper around useEntityHistory.
+ * Real logic lives in useEntityHistory.ts.
+ */
+import { useEntityHistory, type EntityHistoryActor, type EntityHistoryEntry } from './useEntityHistory'
+
+export type ComponentHistoryActor = EntityHistoryActor
+export type ComponentHistoryEntry = EntityHistoryEntry
+
+export function useComponentHistory() {
+  return useEntityHistory('composant')
+}
--- a/app/composables/useComponentModels.js
+++ b/app/composables/useComponentModels.js
@@ -1,47 +0,0 @@
-import { ref, computed } from 'vue'
-
-let hasWarned = false
-
-const warnDeprecated = () => {
-  if (hasWarned) return
-  if (process.dev) {
-    console.warn('[useComponentModels] Ce composable est conservé pour compatibilité mais les modèles ont été remplacés par les catégories enrichies de squelette. Utilisez useComponentTypes / useComposants à la place.')
-  }
-  hasWarned = true
-}
-
-const buildUnsupportedResult = () => ({
-  success: false,
-  error: 'Les modèles de composants ont été retirés. Gérez les squelettes via les catégories et utilisez les requirements machine pour instancier des composants.'
-})
-
-export function useComponentModels () {
-  warnDeprecated()
-
-  const componentModelsBuckets = ref({})
-  const loadingComponentModels = ref(false)
-
-  const componentModels = computed(() => [])
-
-  const noLongerSupported = async () => {
-    warnDeprecated()
-    return buildUnsupportedResult()
-  }
-
-  const getComponentModels = () => componentModels.value
-  const getComponentModelsForType = () => []
-  const isComponentModelLoading = () => loadingComponentModels.value
-
-  return {
-    componentModels,
-    componentModelsBuckets,
-    loadingComponentModels,
-    loadComponentModels: noLongerSupported,
-    createComponentModel: noLongerSupported,
-    updateComponentModel: noLongerSupported,
-    deleteComponentModel: noLongerSupported,
-    getComponentModels,
-    getComponentModelsForType,
-    isComponentModelLoading
-  }
-}
--- a/app/composables/useComponentTypes.js
+++ b/app/composables/useComponentTypes.js
@@ -1,140 +0,0 @@
-import { ref } from 'vue'
-import { useToast } from './useToast'
-import { listModelTypes, createModelType, updateModelType, deleteModelType } from '~/services/modelTypes'
-
-const componentTypes = ref([])
-const loadingComponentTypes = ref(false)
-
-export function useComponentTypes () {
-  const { showSuccess, showError } = useToast()
-
-  const generateCodeFromName = (name) => {
-    return (name || '')
-      .normalize('NFD')
-      .replace(/[\u0300-\u036F]/g, '')
-      .toLowerCase()
-      .replace(/[^a-z0-9]+/g, '-')
-      .replace(/^-+|-+$/g, '')
-      .replace(/-+/g, '-') || 'type'
-  }
-
-  const loadComponentTypes = async () => {
-    loadingComponentTypes.value = true
-    try {
-      const data = await listModelTypes({
-        category: 'COMPONENT',
-        sort: 'name',
-        dir: 'asc',
-        limit: 200
-      })
-
-      componentTypes.value = data.items.map(item => ({
-        ...item,
-        description: item.description ?? item.notes ?? null
-      }))
-
-      return { success: true, data: componentTypes.value }
-    } catch (error) {
-      const message = error?.message || 'Erreur inconnue'
-      showError(`Impossible de charger les types de composant: ${message}`)
-      return { success: false, error: message }
-    } finally {
-      loadingComponentTypes.value = false
-    }
-  }
-
-  const createComponentType = async (payload) => {
-    loadingComponentTypes.value = true
-    try {
-      const data = await createModelType({
-        name: payload.name,
-        code: payload.code || generateCodeFromName(payload.name),
-        category: 'COMPONENT',
-        notes: payload.description ?? payload.notes,
-        description: payload.description ?? null,
-        structure: payload.structure
-      })
-
-      const normalized = {
-        ...data,
-        description: data.description ?? data.notes ?? null
-      }
-
-      componentTypes.value.push(normalized)
-      showSuccess(`Type de composant "${data.name}" créé`)
-
-      return { success: true, data: normalized }
-    } catch (error) {
-      const message = error?.data?.message || error?.message || 'Erreur inconnue'
-      showError(`Erreur lors de la création du type de composant: ${message}`)
-      return { success: false, error: message }
-    } finally {
-      loadingComponentTypes.value = false
-    }
-  }
-
-  const updateComponentType = async (id, payload) => {
-    loadingComponentTypes.value = true
-    try {
-      const data = await updateModelType(id, {
-        name: payload.name,
-        description: payload.description,
-        notes: payload.notes,
-        code: payload.code,
-        structure: payload.structure
-      })
-
-      const normalized = {
-        ...data,
-        description: data.description ?? data.notes ?? null
-      }
-
-      const index = componentTypes.value.findIndex(type => type.id === id)
-      if (index !== -1) {
-        componentTypes.value[index] = normalized
-      }
-      showSuccess(`Type de composant "${data.name}" mis à jour`)
-
-      return {
-        success: true,
-        data: normalized
-      }
-    } catch (error) {
-      const message = error?.data?.message || error?.message || 'Erreur inconnue'
-      showError(`Erreur lors de la mise à jour du type de composant: ${message}`)
-      return { success: false, error: message }
-    } finally {
-      loadingComponentTypes.value = false
-    }
-  }
-
-  const deleteComponentType = async (id) => {
-    loadingComponentTypes.value = true
-    try {
-      await deleteModelType(id)
-      componentTypes.value = componentTypes.value.filter(type => type.id !== id)
-      showSuccess('Type de composant supprimé')
-      return { success: true }
-    } catch (error) {
-      const message = error?.data?.message || error?.message || 'Erreur inconnue'
-      showError(`Erreur lors de la suppression du type de composant: ${message}`)
-      return { success: false, error: message }
-    } finally {
-      loadingComponentTypes.value = false
-    }
-  }
-
-  const getComponentTypes = () => componentTypes.value
-  const isComponentTypeLoading = () => loadingComponentTypes.value
-
-  return {
-    componentTypes,
-    loadingComponentTypes,
-    loadComponentTypes,
-    createComponentType,
-    updateComponentType,
-    deleteComponentType,
-    getComponentTypes,
-    isComponentTypeLoading
-  }
-}
--- a/app/composables/useComponentTypes.ts
+++ b/app/composables/useComponentTypes.ts
@@ -0,0 +1,29 @@
+/**
+ * Backward-compatible wrapper around useEntityTypes.
+ * Preserves the original API surface (renamed fields) so consumers need no changes.
+ */
+import { useEntityTypes, type EntityType } from './useEntityTypes'
+import type { ComponentModelStructure } from '~/shared/types/inventory'
+import type { Ref } from 'vue'
+
+export interface ComponentType extends EntityType {
+  structure: ComponentModelStructure | null
+}
+
+export function useComponentTypes() {
+  const { types, loading, loadTypes, createType, updateType, deleteType } = useEntityTypes({
+    category: 'COMPONENT',
+    label: 'composant',
+  })
+
+  return {
+    componentTypes: types as Ref<ComponentType[]>,
+    loadingComponentTypes: loading,
+    loadComponentTypes: loadTypes,
+    createComponentType: createType,
+    updateComponentType: updateType,
+    deleteComponentType: deleteType,
+    getComponentTypes: () => types.value as ComponentType[],
+    isComponentTypeLoading: () => loading.value,
+  }
+}
--- a/app/composables/useComposants.js
+++ b/app/composables/useComposants.js
@@ -1,213 +0,0 @@
-import { ref } from 'vue'
-import { useToast } from './useToast'
-import { useApi } from './useApi'
-import { buildConstructeurRequestPayload, uniqueConstructeurIds } from '~/shared/constructeurUtils'
-import { useConstructeurs } from './useConstructeurs'
-import { extractRelationId, normalizeRelationIds } from '~/shared/apiRelations'
-
-const composants = ref([])
-const total = ref(0)
-const loading = ref(false)
-
-const extractCollection = (payload) => {
-  if (Array.isArray(payload)) {
-    return payload
-  }
-  if (Array.isArray(payload?.member)) {
-    return payload.member
-  }
-  if (Array.isArray(payload?.['hydra:member'])) {
-    return payload['hydra:member']
-  }
-  if (Array.isArray(payload?.data)) {
-    return payload.data
-  }
-  return []
-}
-
-const extractTotal = (payload, fallbackLength) => {
-  if (typeof payload?.totalItems === 'number') {
-    return payload.totalItems
-  }
-  if (typeof payload?.['hydra:totalItems'] === 'number') {
-    return payload['hydra:totalItems']
-  }
-  return fallbackLength
-}
-
-export function useComposants () {
-  const { showSuccess, showError, showInfo } = useToast()
-  const { get, post, patch, delete: del } = useApi()
-  const { ensureConstructeurs } = useConstructeurs()
-
-  const withResolvedConstructeurs = async (composant) => {
-    if (!composant || typeof composant !== 'object') {
-      return composant
-    }
-    if (!composant.typeComposantId) {
-      const typeComposantId = extractRelationId(composant.typeComposant)
-      if (typeComposantId) {
-        composant.typeComposantId = typeComposantId
-      }
-    }
-    if (!composant.productId) {
-      const productId = extractRelationId(composant.product)
-      if (productId) {
-        composant.productId = productId
-      }
-    }
-    const ids = uniqueConstructeurIds(
-      composant.constructeurIds,
-      composant.constructeurs,
-      composant.constructeur,
-    )
-    const hasResolvedConstructeurs =
-      Array.isArray(composant.constructeurs)
-      && composant.constructeurs.length > 0
-      && composant.constructeurs.every((item) => item && typeof item === 'object')
-
-    if (ids.length && !hasResolvedConstructeurs) {
-      const resolved = await ensureConstructeurs(ids)
-      if (resolved.length) {
-        composant.constructeurs = resolved
-        composant.constructeurIds = ids
-      }
-    }
-    return composant
-  }
-
-  /**
-   * Load composants with pagination and search support
-   * @param {Object} options - Query options
-   * @param {string} [options.search] - Search term for name/reference
-   * @param {number} [options.page=1] - Current page (1-based)
-   * @param {number} [options.itemsPerPage=30] - Items per page
-   * @param {string} [options.orderBy='name'] - Field to order by
-   * @param {string} [options.orderDir='asc'] - Order direction (asc/desc)
-   */
-  const loadComposants = async (options = {}) => {
-    loading.value = true
-    try {
-      const {
-        search = '',
-        page = 1,
-        itemsPerPage = 30,
-        orderBy = 'name',
-        orderDir = 'asc'
-      } = options
-
-      const params = new URLSearchParams()
-      params.set('itemsPerPage', String(itemsPerPage))
-      params.set('page', String(page))
-
-      if (search && search.trim()) {
-        params.set('name', search.trim())
-      }
-
-      params.set(`order[${orderBy}]`, orderDir)
-
-      const result = await get(`/composants?${params.toString()}`)
-      if (result.success) {
-        const items = extractCollection(result.data)
-        const enrichedItems = await Promise.all(items.map((item) => withResolvedConstructeurs(item)))
-        composants.value = enrichedItems
-        total.value = extractTotal(result.data, items.length)
-        return {
-          success: true,
-          data: {
-            items: enrichedItems,
-            total: total.value,
-            page,
-            itemsPerPage
-          }
-        }
-      }
-      return result
-    } catch (error) {
-      console.error('Erreur lors du chargement des composants:', error)
-      return { success: false, error: error.message }
-    } finally {
-      loading.value = false
-    }
-  }
-
-  const createComposant = async (composantData) => {
-    loading.value = true
-    try {
-      const normalizedPayload = normalizeRelationIds(buildConstructeurRequestPayload(composantData))
-      const result = await post('/composants', normalizedPayload)
-      if (result.success) {
-        const enriched = await withResolvedConstructeurs(result.data)
-        composants.value.unshift(enriched)
-        total.value += 1
-        const displayName = result.data?.name
-          || composantData?.definition?.name
-          || composantData?.name
-          || 'Composant'
-        showSuccess(`Composant "${displayName}" créé avec succès`)
-      }
-      return result
-    } catch (error) {
-      console.error('Erreur lors de la création du composant:', error)
-      return { success: false, error: error.message }
-    } finally {
-      loading.value = false
-    }
-  }
-
-  const updateComposantData = async (id, composantData) => {
-    loading.value = true
-    try {
-      const normalizedPayload = normalizeRelationIds(buildConstructeurRequestPayload(composantData))
-      const result = await patch(`/composants/${id}`, normalizedPayload)
-      if (result.success) {
-        const updated = await withResolvedConstructeurs(result.data)
-        const index = composants.value.findIndex(comp => comp.id === id)
-        if (index !== -1) {
-          composants.value[index] = updated
-        }
-        showSuccess(`Composant "${updated?.name || composantData.name || ''}" mis à jour avec succès`)
-      }
-      return result
-    } catch (error) {
-      console.error('Erreur lors de la mise à jour du composant:', error)
-      return { success: false, error: error.message }
-    } finally {
-      loading.value = false
-    }
-  }
-
-  const deleteComposant = async (id) => {
-    loading.value = true
-    try {
-      const result = await del(`/composants/${id}`)
-      if (result.success) {
-        const deletedComposant = composants.value.find(comp => comp.id === id)
-        composants.value = composants.value.filter(comp => comp.id !== id)
-        total.value = Math.max(0, total.value - 1)
-        showSuccess(`Composant "${deletedComposant?.name || 'inconnu'}" supprimé avec succès`)
-      }
-      return result
-    } catch (error) {
-      console.error('Erreur lors de la suppression du composant:', error)
-      return { success: false, error: error.message }
-    } finally {
-      loading.value = false
-    }
-  }
-
-  const getComposants = () => composants.value
-  const isLoading = () => loading.value
-
-  return {
-    composants,
-    total,
-    loading,
-    loadComposants,
-    createComposant,
-    updateComposant: updateComposantData,
-    deleteComposant,
-    getComposants,
-    isLoading
-  }
-}
--- a/app/composables/useComposants.ts
+++ b/app/composables/useComposants.ts
@@ -0,0 +1,264 @@
+import { ref } from 'vue'
+import { useToast } from './useToast'
+import { useApi } from './useApi'
+import { buildConstructeurRequestPayload, uniqueConstructeurIds } from '~/shared/constructeurUtils'
+import { useConstructeurs, type Constructeur } from './useConstructeurs'
+import { extractRelationId, normalizeRelationIds } from '~/shared/apiRelations'
+import { extractCollection } from '~/shared/utils/apiHelpers'
+
+export interface Composant {
+  id: string
+  name: string
+  reference?: string | null
+  description?: string | null
+  typeComposantId?: string | null
+  typeComposant?: { id: string; name?: string } | null
+  productId?: string | null
+  product?: { id: string; name?: string } | null
+  constructeurs?: Constructeur[]
+  constructeurIds?: string[]
+  documents?: unknown[]
+  createdAt?: string | null
+  updatedAt?: string | null
+  [key: string]: unknown
+}
+
+interface ComposantListResult {
+  success: boolean
+  data?: { items: Composant[]; total: number; page: number; itemsPerPage: number }
+  error?: string
+}
+
+interface ComposantSingleResult {
+  success: boolean
+  data?: Composant
+  error?: string
+}
+
+interface LoadComposantsOptions {
+  search?: string
+  page?: number
+  itemsPerPage?: number
+  orderBy?: string
+  orderDir?: 'asc' | 'desc'
+  typeName?: string
+  force?: boolean
+}
+
+const composants = ref<Composant[]>([])
+const total = ref(0)
+const loading = ref(false)
+const loaded = ref(false)
+
+const extractTotal = (payload: unknown, fallbackLength: number): number => {
+  const p = payload as Record<string, unknown> | null
+  if (typeof p?.totalItems === 'number') {
+    return p.totalItems
+  }
+  if (typeof p?.['hydra:totalItems'] === 'number') {
+    return p['hydra:totalItems']
+  }
+  return fallbackLength
+}
+
+export function useComposants() {
+  const { showSuccess } = useToast()
+  const { get, post, patch, delete: del } = useApi()
+  const { ensureConstructeurs } = useConstructeurs()
+
+  const withResolvedConstructeurs = async (composant: Composant): Promise<Composant> => {
+    if (!composant || typeof composant !== 'object') {
+      return composant
+    }
+    if (!composant.typeComposantId) {
+      const typeComposantId = extractRelationId(composant.typeComposant)
+      if (typeComposantId) {
+        composant.typeComposantId = typeComposantId
+      }
+    }
+    if (!composant.productId) {
+      const productId = extractRelationId(composant.product)
+      if (productId) {
+        composant.productId = productId
+      }
+    }
+    const ids = uniqueConstructeurIds(
+      composant.constructeurIds,
+      composant.constructeurs,
+    )
+    const hasResolvedConstructeurs =
+      Array.isArray(composant.constructeurs) &&
+      composant.constructeurs.length > 0 &&
+      composant.constructeurs.every((item) => item && typeof item === 'object')
+
+    if (ids.length && !hasResolvedConstructeurs) {
+      const resolved = await ensureConstructeurs(ids)
+      if (resolved.length) {
+        composant.constructeurs = resolved
+        composant.constructeurIds = ids
+      }
+    }
+    return composant
+  }
+
+  const loadComposants = async (options: LoadComposantsOptions = {}): Promise<ComposantListResult> => {
+    const {
+      search = '',
+      page = 1,
+      itemsPerPage = 30,
+      orderBy = 'name',
+      orderDir = 'asc',
+      typeName,
+      force = false,
+    } = options
+
+    if (!force && loaded.value && !search && !typeName && page === 1) {
+      return {
+        success: true,
+        data: { items: composants.value, total: total.value, page, itemsPerPage },
+      }
+    }
+
+    if (loading.value) {
+      return {
+        success: true,
+        data: { items: composants.value, total: total.value, page, itemsPerPage },
+      }
+    }
+
+    loading.value = true
+    try {
+
+      const params = new URLSearchParams()
+      params.set('itemsPerPage', String(itemsPerPage))
+      params.set('page', String(page))
+
+      if (search && search.trim()) {
+        params.set('name', search.trim())
+      }
+
+      if (typeName && typeName.trim()) {
+        params.set('typeComposant.name', typeName.trim())
+      }
+
+      params.set(`order[${orderBy}]`, orderDir)
+
+      const result = await get(`/composants?${params.toString()}`)
+      if (result.success) {
+        const items = extractCollection(result.data)
+        const enrichedItems = await Promise.all(items.map((item) => withResolvedConstructeurs(item)))
+        composants.value = enrichedItems
+        total.value = extractTotal(result.data, items.length)
+        loaded.value = true
+        return {
+          success: true,
+          data: {
+            items: enrichedItems,
+            total: total.value,
+            page,
+            itemsPerPage,
+          },
+        }
+      }
+      return result as ComposantListResult
+    } catch (error) {
+      console.error('Erreur lors du chargement des composants:', error)
+      return { success: false, error: (error as Error).message }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const createComposant = async (composantData: Partial<Composant>): Promise<ComposantSingleResult> => {
+    loading.value = true
+    try {
+      const normalizedPayload = normalizeRelationIds(buildConstructeurRequestPayload(composantData))
+      const result = await post('/composants', normalizedPayload)
+      if (result.success && result.data) {
+        const enriched = await withResolvedConstructeurs(result.data as Composant)
+        composants.value.unshift(enriched)
+        total.value += 1
+        const definition = (composantData as Record<string, unknown>)?.definition as Record<string, unknown> | undefined
+        const displayName =
+          (result.data as Composant)?.name ||
+          (definition?.name as string | undefined) ||
+          composantData?.name ||
+          'Composant'
+        showSuccess(`Composant "${displayName}" créé avec succès`)
+        return { success: true, data: enriched }
+      }
+      return { success: false, error: result.error }
+    } catch (error) {
+      console.error('Erreur lors de la création du composant:', error)
+      return { success: false, error: (error as Error).message }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const updateComposantData = async (id: string, composantData: Partial<Composant>): Promise<ComposantSingleResult> => {
+    loading.value = true
+    try {
+      const normalizedPayload = normalizeRelationIds(buildConstructeurRequestPayload(composantData))
+      const result = await patch(`/composants/${id}`, normalizedPayload)
+      if (result.success && result.data) {
+        const updated = await withResolvedConstructeurs(result.data as Composant)
+        const index = composants.value.findIndex((comp) => comp.id === id)
+        if (index !== -1) {
+          composants.value[index] = updated
+        }
+        showSuccess(`Composant "${updated?.name || composantData.name || ''}" mis à jour avec succès`)
+        return { success: true, data: updated }
+      }
+      return { success: false, error: result.error }
+    } catch (error) {
+      console.error('Erreur lors de la mise à jour du composant:', error)
+      return { success: false, error: (error as Error).message }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const deleteComposant = async (id: string): Promise<ComposantSingleResult> => {
+    loading.value = true
+    try {
+      const result = await del(`/composants/${id}`)
+      if (result.success) {
+        const deletedComposant = composants.value.find((comp) => comp.id === id)
+        composants.value = composants.value.filter((comp) => comp.id !== id)
+        total.value = Math.max(0, total.value - 1)
+        showSuccess(`Composant "${deletedComposant?.name || 'inconnu'}" supprimé avec succès`)
+        return { success: true }
+      }
+      return { success: false, error: result.error }
+    } catch (error) {
+      console.error('Erreur lors de la suppression du composant:', error)
+      return { success: false, error: (error as Error).message }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const getComposants = () => composants.value
+  const isLoading = () => loading.value
+
+  const clearComposantsCache = () => {
+    composants.value = []
+    total.value = 0
+    loaded.value = false
+  }
+
+  return {
+    composants,
+    total,
+    loading,
+    loaded,
+    loadComposants,
+    createComposant,
+    updateComposant: updateComposantData,
+    deleteComposant,
+    getComposants,
+    isLoading,
+    clearComposantsCache,
+  }
+}
--- a/app/composables/useConfirm.ts
+++ b/app/composables/useConfirm.ts
@@ -0,0 +1,73 @@
+/**
+ * Promise-based confirmation dialog composable.
+ *
+ * Usage:
+ *   const { confirm, confirmState } = useConfirm()
+ *   const ok = await confirm({ message: 'Supprimer ?' })
+ *   if (ok) { ... }
+ *
+ * The ConfirmModal component reads `confirmState` to render the dialog.
+ */
+
+import { reactive } from 'vue'
+
+export interface ConfirmOptions {
+  title?: string
+  message: string
+  confirmText?: string
+  cancelText?: string
+  dangerous?: boolean
+}
+
+export interface ConfirmState {
+  open: boolean
+  title: string
+  message: string
+  confirmText: string
+  cancelText: string
+  dangerous: boolean
+  resolve: ((value: boolean) => void) | null
+}
+
+const state = reactive<ConfirmState>({
+  open: false,
+  title: '',
+  message: '',
+  confirmText: 'Supprimer',
+  cancelText: 'Annuler',
+  dangerous: true,
+  resolve: null,
+})
+
+function confirm(options: ConfirmOptions): Promise<boolean> {
+  return new Promise((resolve) => {
+    state.title = options.title ?? 'Confirmation'
+    state.message = options.message
+    state.confirmText = options.confirmText ?? 'Supprimer'
+    state.cancelText = options.cancelText ?? 'Annuler'
+    state.dangerous = options.dangerous ?? true
+    state.resolve = resolve
+    state.open = true
+  })
+}
+
+function handleConfirm() {
+  state.resolve?.(true)
+  state.open = false
+  state.resolve = null
+}
+
+function handleCancel() {
+  state.resolve?.(false)
+  state.open = false
+  state.resolve = null
+}
+
+export function useConfirm() {
+  return {
+    confirm,
+    confirmState: state,
+    handleConfirm,
+    handleCancel,
+  }
+}
--- a/app/composables/useConstructeurs.ts
+++ b/app/composables/useConstructeurs.ts
@@ -1,12 +1,27 @@
 import { ref } from 'vue'
 import { useApi } from './useApi'
 import { useToast } from './useToast'
+import { extractCollection } from '~/shared/utils/apiHelpers'

-const constructeurs = ref([])
+export interface Constructeur {
+  id: string
+  name: string
+  email?: string | null
+  phone?: string | null
+}
+
+interface ConstructeurResult {
+  success: boolean
+  data?: Constructeur | Constructeur[]
+  error?: string
+}
+
+const constructeurs = ref<Constructeur[]>([])
 const loading = ref(false)
+const loaded = ref(false)

-const uniqueConstructeurs = (items = []) => {
-  const map = new Map()
+const uniqueConstructeurs = (items: Constructeur[] = []): Constructeur[] => {
+  const map = new Map<string, Constructeur>()
  items.forEach((item) => {
    if (item && typeof item === 'object' && typeof item.id === 'string') {
      map.set(item.id, item)
@@ -15,7 +30,7 @@ const uniqueConstructeurs = (items = []) => {
  return Array.from(map.values())
 }

-const normalizeIds = (ids = []) => {
+const normalizeIds = (ids: unknown[] = []): string[] => {
  if (!Array.isArray(ids)) {
    return []
  }
@@ -28,7 +43,7 @@ const normalizeIds = (ids = []) => {
  )
 }

-const upsertConstructeurs = (items = []) => {
+const upsertConstructeurs = (items: Constructeur[] = []) => {
  if (!Array.isArray(items) || !items.length) {
    return
  }
@@ -36,32 +51,19 @@ const upsertConstructeurs = (items = []) => {
  constructeurs.value = merged
 }

-const getIndexedConstructeur = (id) =>
+const getIndexedConstructeur = (id: string): Constructeur | null =>
  constructeurs.value.find((item) => item && item.id === id) || null

-const extractCollection = (payload) => {
-  if (Array.isArray(payload)) {
-    return payload
-  }
-  if (Array.isArray(payload?.member)) {
-    return payload.member
-  }
-  if (Array.isArray(payload?.['hydra:member'])) {
-    return payload['hydra:member']
-  }
-  if (Array.isArray(payload?.data)) {
-    return payload.data
-  }
-  return []
-}
+const pendingFetches = new Map<string, Promise<Constructeur | null>>()

-const pendingFetches = new Map()
-
-export function useConstructeurs () {
+export function useConstructeurs() {
  const { get, post, patch, delete: del } = useApi()
  const { showSuccess, showError } = useToast()

-  const loadConstructeurs = async (search = '') => {
+  const loadConstructeurs = async (search = '', options: { force?: boolean } = {}): Promise<ConstructeurResult> => {
+    if (!search && !options.force && loaded.value) {
+      return { success: true, data: constructeurs.value }
+    }
    loading.value = true
    try {
      const query = search ? `?search=${encodeURIComponent(search)}` : ''
@@ -69,48 +71,51 @@ export function useConstructeurs () {
      if (result.success) {
        const items = extractCollection(result.data)
        constructeurs.value = uniqueConstructeurs(items)
+        if (!search) loaded.value = true
      }
-      return result
+      return result as ConstructeurResult
    } catch (error) {
+      const err = error as Error
      console.error('Erreur lors du chargement des fournisseurs:', error)
-      return { success: false, error: error.message }
+      return { success: false, error: err.message }
    } finally {
      loading.value = false
    }
  }

-  const searchConstructeurs = async (search = '') => {
+  const searchConstructeurs = async (search = ''): Promise<ConstructeurResult> => {
    return loadConstructeurs(search)
  }

-  const createConstructeur = async (data) => {
+  const createConstructeur = async (data: Partial<Constructeur>): Promise<ConstructeurResult> => {
    loading.value = true
    try {
      const result = await post('/constructeurs', data)
      if (result.success) {
-        upsertConstructeurs([result.data])
-        showSuccess(`Fournisseur "${result.data.name}" créé`)
+        upsertConstructeurs([result.data as Constructeur])
+        showSuccess(`Fournisseur "${(result.data as Constructeur).name}" créé`)
      } else if (result.error) {
        showError(result.error)
      }
-      return result
+      return result as ConstructeurResult
    } catch (error) {
+      const err = error as Error
      console.error('Erreur lors de la création du fournisseur:', error)
      showError('Impossible de créer le fournisseur')
-      return { success: false, error: error.message }
+      return { success: false, error: err.message }
    } finally {
      loading.value = false
    }
  }

-  const ensureConstructeurs = async (ids = []) => {
+  const ensureConstructeurs = async (ids: unknown[] = []): Promise<Constructeur[]> => {
    const normalizedIds = normalizeIds(ids)
    if (!normalizedIds.length) {
      return []
    }

-    const collected = []
-    const missing = []
+    const collected: Constructeur[] = []
+    const missing: string[] = []
    normalizedIds.forEach((id) => {
      const existing = getIndexedConstructeur(id)
      if (existing) {
@@ -129,7 +134,7 @@ export function useConstructeurs () {
        const task = get(`/constructeurs/${id}`)
          .then((result) => {
            if (result.success && result.data) {
-              return result.data
+              return result.data as Constructeur
            }
            return null
          })
@@ -145,7 +150,7 @@ export function useConstructeurs () {
      })

      const fetched = await Promise.all(fetchTasks)
-      const validFetched = fetched.filter((item) => item && item.id)
+      const validFetched = fetched.filter((item): item is Constructeur => item !== null && item.id !== undefined)
      if (validFetched.length) {
        upsertConstructeurs(validFetched)
      }
@@ -153,50 +158,52 @@ export function useConstructeurs () {

    return normalizedIds
      .map((id) => getIndexedConstructeur(id))
-      .filter((item) => Boolean(item))
+      .filter((item): item is Constructeur => item !== null)
  }

-  const updateConstructeur = async (id, data) => {
+  const updateConstructeur = async (id: string, data: Partial<Constructeur>): Promise<ConstructeurResult> => {
    loading.value = true
    try {
      const result = await patch(`/constructeurs/${id}`, data)
      if (result.success) {
-        upsertConstructeurs([result.data])
-        showSuccess(`Fournisseur "${result.data.name}" mis à jour`)
+        upsertConstructeurs([result.data as Constructeur])
+        showSuccess(`Fournisseur "${(result.data as Constructeur).name}" mis à jour`)
      } else if (result.error) {
        showError(result.error)
      }
-      return result
+      return result as ConstructeurResult
    } catch (error) {
+      const err = error as Error
      console.error('Erreur lors de la mise à jour du fournisseur:', error)
      showError('Impossible de mettre à jour le fournisseur')
-      return { success: false, error: error.message }
+      return { success: false, error: err.message }
    } finally {
      loading.value = false
    }
  }

-  const deleteConstructeur = async (id) => {
+  const deleteConstructeur = async (id: string): Promise<ConstructeurResult> => {
    loading.value = true
    try {
      const result = await del(`/constructeurs/${id}`)
      if (result.success) {
-        constructeurs.value = constructeurs.value.filter(item => item.id !== id)
+        constructeurs.value = constructeurs.value.filter((item) => item.id !== id)
        showSuccess('Fournisseur supprimé')
      } else if (result.error) {
        showError(result.error)
      }
-      return result
+      return result as ConstructeurResult
    } catch (error) {
+      const err = error as Error
      console.error('Erreur lors de la suppression du fournisseur:', error)
      showError('Impossible de supprimer le fournisseur')
-      return { success: false, error: error.message }
+      return { success: false, error: err.message }
    } finally {
      loading.value = false
    }
  }

-  const getConstructeurById = (id) => getIndexedConstructeur(id)
+  const getConstructeurById = (id: string) => getIndexedConstructeur(id)

  return {
    constructeurs,
--- a/app/composables/useCustomFields.ts
+++ b/app/composables/useCustomFields.ts
@@ -1,66 +1,75 @@
 import { ref } from 'vue'
-import { useApi } from './useApi'
+import { useApi, type ApiResponse } from './useApi'

-export function useCustomFields () {
+export interface CustomFieldValue {
+  id: string
+  customFieldId: string
+  entityType: string
+  entityId: string
+  value: unknown
+  [key: string]: unknown
+}
+
+export function useCustomFields() {
  const { apiCall } = useApi()
-  const customFieldValues = ref([])
+  const customFieldValues = ref<CustomFieldValue[]>([])
  const loading = ref(false)

  // Créer une valeur de champ personnalisé
-  const createCustomFieldValue = async (customFieldValueData) => {
+  const createCustomFieldValue = async (customFieldValueData: Record<string, unknown>): Promise<ApiResponse> => {
    try {
      const result = await apiCall('/custom-fields/values', {
        method: 'POST',
-        body: JSON.stringify(customFieldValueData)
+        body: JSON.stringify(customFieldValueData),
      })
      return result
    } catch (error) {
      console.error('Erreur lors de la création de la valeur de champ personnalisé:', error)
-      return { success: false, error }
+      return { success: false, error: (error as Error).message }
    }
  }

  // Obtenir les valeurs de champs personnalisés pour une entité
-  const getCustomFieldValuesByEntity = async (entityType, entityId) => {
+  const getCustomFieldValuesByEntity = async (entityType: string, entityId: string): Promise<ApiResponse> => {
    try {
      loading.value = true
      const result = await apiCall(`/custom-fields/values/${entityType}/${entityId}`, {
-        method: 'GET'
+        method: 'GET',
      })
      if (result.success) {
-        customFieldValues.value = result.data
+        customFieldValues.value = result.data as CustomFieldValue[]
      }
      return result
    } catch (error) {
      console.error('Erreur lors de la récupération des valeurs de champs personnalisés:', error)
-      return { success: false, error }
+      return { success: false, error: (error as Error).message }
    } finally {
      loading.value = false
    }
  }

  // Mettre à jour une valeur de champ personnalisé
-  const updateCustomFieldValue = async (id, updateData) => {
+  const updateCustomFieldValue = async (id: string, updateData: Record<string, unknown>): Promise<ApiResponse> => {
    try {
      const result = await apiCall(`/custom-fields/values/${id}`, {
        method: 'PATCH',
-        body: JSON.stringify(updateData)
+        body: JSON.stringify(updateData),
      })
      return result
    } catch (error) {
      console.error('Erreur lors de la mise à jour de la valeur de champ personnalisé:', error)
-      return { success: false, error }
+      return { success: false, error: (error as Error).message }
    }
  }

  // Créer ou mettre à jour une valeur de champ personnalisé
  const upsertCustomFieldValue = async (
-    customFieldId,
-    entityType,
-    entityId,
-    value,
-    metadata = {},
-  ) => {
+    customFieldId: string | null,
+    entityType: string,
+    entityId: string,
+    value: unknown,
+    metadata: Record<string, unknown> = {},
+  ): Promise<ApiResponse> => {
    try {
      const result = await apiCall('/custom-fields/values/upsert', {
        method: 'POST',
@@ -69,26 +78,26 @@ export function useCustomFields () {
          entityType,
          entityId,
          value,
-          ...metadata
-        })
+          ...metadata,
+        }),
      })
      return result
    } catch (error) {
      console.error('Erreur lors de la création/mise à jour de la valeur de champ personnalisé:', error)
-      return { success: false, error }
+      return { success: false, error: (error as Error).message }
    }
  }

  // Supprimer une valeur de champ personnalisé
-  const deleteCustomFieldValue = async (id) => {
+  const deleteCustomFieldValue = async (id: string): Promise<ApiResponse> => {
    try {
      const result = await apiCall(`/custom-fields/values/${id}`, {
-        method: 'DELETE'
+        method: 'DELETE',
      })
      return result
    } catch (error) {
      console.error('Erreur lors de la suppression de la valeur de champ personnalisé:', error)
-      return { success: false, error }
+      return { success: false, error: (error as Error).message }
    }
  }

@@ -99,6 +108,6 @@ export function useCustomFields () {
    getCustomFieldValuesByEntity,
    updateCustomFieldValue,
    upsertCustomFieldValue,
-    deleteCustomFieldValue
+    deleteCustomFieldValue,
  }
 }
--- a/app/composables/useDataTable.ts
+++ b/app/composables/useDataTable.ts
@@ -0,0 +1,186 @@
+import { ref, computed, type Ref, type ComputedRef } from 'vue'
+import { useUrlState } from './useUrlState'
+import type { DataTableSort, DataTablePagination, DataTableColumnFilters, SortDirection } from '~/shared/types/dataTable'
+
+export interface UseDataTableDeps {
+  /** Called whenever sort/page/search/perPage/filter changes. The composable does NOT fetch data itself. */
+  fetchData: () => void | Promise<void>
+}
+
+export interface UseDataTableOptions {
+  /** Default sort field */
+  defaultSort?: string
+  /** Default sort direction */
+  defaultDirection?: SortDirection
+  /** Default items per page */
+  defaultPerPage?: number
+  /** Available per-page options */
+  perPageOptions?: number[]
+  /** Search debounce in ms. Default: 300 */
+  searchDebounceMs?: number
+  /** Whether to persist state to URL. Default: true */
+  persistToUrl?: boolean
+  /** Extra URL state params for page-specific filters */
+  extraParams?: Record<string, { default: string | number; type?: 'string' | 'number' }>
+}
+
+export interface UseDataTableReturn {
+  searchTerm: Ref<string>
+  sortField: Ref<string>
+  sortDirection: Ref<SortDirection>
+  currentPage: Ref<number>
+  itemsPerPage: Ref<number>
+  columnFilters: Ref<DataTableColumnFilters>
+  filters: Record<string, Ref<string | number>>
+  sort: ComputedRef<DataTableSort>
+  pagination: (total: Ref<number>, pageItems: Ref<number>) => ComputedRef<DataTablePagination>
+  handleSort: (newSort: DataTableSort) => void
+  handlePageChange: (page: number) => void
+  handlePerPageChange: (perPage: number) => void
+  handleFilterChange: () => void
+  handleColumnFiltersChange: (filters: DataTableColumnFilters) => void
+  debouncedSearch: () => void
+  refresh: () => void
+  perPageOptions: number[]
+}
+
+export function useDataTable(
+  deps: UseDataTableDeps,
+  options: UseDataTableOptions = {},
+): UseDataTableReturn {
+  const {
+    defaultSort = 'name',
+    defaultDirection = 'asc',
+    defaultPerPage = 20,
+    perPageOptions = [20, 50, 100],
+    searchDebounceMs = 300,
+    persistToUrl = true,
+    extraParams = {},
+  } = options
+
+  let searchTerm: Ref<string>
+  let sortField: Ref<string>
+  let sortDirection: Ref<SortDirection>
+  let currentPage: Ref<number>
+  let itemsPerPage: Ref<number>
+  const filters: Record<string, Ref<string | number>> = {}
+
+  if (persistToUrl) {
+    const paramDefs: Record<string, { default: string | number; type?: 'string' | 'number'; debounce?: number }> = {
+      page: { default: 1, type: 'number' },
+      perPage: { default: defaultPerPage, type: 'number' },
+      q: { default: '', debounce: searchDebounceMs },
+      sort: { default: defaultSort },
+      dir: { default: defaultDirection },
+      ...extraParams,
+    }
+
+    const state = useUrlState(paramDefs, {
+      onRestore: () => deps.fetchData(),
+    })
+
+    searchTerm = state.q as Ref<string>
+    sortField = state.sort as Ref<string>
+    sortDirection = state.dir as unknown as Ref<SortDirection>
+    currentPage = state.page as unknown as Ref<number>
+    itemsPerPage = state.perPage as unknown as Ref<number>
+
+    for (const key of Object.keys(extraParams)) {
+      filters[key] = (state as Record<string, Ref<string | number>>)[key]!
+    }
+  }
+  else {
+    searchTerm = ref('')
+    sortField = ref(defaultSort)
+    sortDirection = ref(defaultDirection) as Ref<SortDirection>
+    currentPage = ref(1)
+    itemsPerPage = ref(defaultPerPage)
+
+    for (const [key, def] of Object.entries(extraParams)) {
+      filters[key] = ref(def.default)
+    }
+  }
+
+  // Search debounce
+  let searchTimeout: ReturnType<typeof setTimeout> | null = null
+
+  const debouncedSearch = () => {
+    if (searchTimeout) clearTimeout(searchTimeout)
+    searchTimeout = setTimeout(() => {
+      currentPage.value = 1
+      deps.fetchData()
+    }, searchDebounceMs)
+  }
+
+  // Sort
+  const sort = computed<DataTableSort>(() => ({
+    field: sortField.value,
+    direction: sortDirection.value,
+  }))
+
+  const handleSort = (newSort: DataTableSort) => {
+    sortField.value = newSort.field
+    sortDirection.value = newSort.direction
+    currentPage.value = 1
+    deps.fetchData()
+  }
+
+  // Pagination
+  const handlePageChange = (page: number) => {
+    currentPage.value = page
+    deps.fetchData()
+  }
+
+  const handlePerPageChange = (perPage: number) => {
+    itemsPerPage.value = perPage
+    currentPage.value = 1
+    deps.fetchData()
+  }
+
+  // Column filters
+  const columnFilters = ref<DataTableColumnFilters>({})
+
+  const handleColumnFiltersChange = (newFilters: DataTableColumnFilters) => {
+    columnFilters.value = newFilters
+    currentPage.value = 1
+    deps.fetchData()
+  }
+
+  // Generic filter change handler (resets page and refetches)
+  const handleFilterChange = () => {
+    currentPage.value = 1
+    deps.fetchData()
+  }
+
+  const pagination = (total: Ref<number>, pageItems: Ref<number>): ComputedRef<DataTablePagination> =>
+    computed(() => ({
+      currentPage: currentPage.value,
+      totalPages: Math.ceil(total.value / itemsPerPage.value) || 1,
+      totalItems: total.value,
+      pageItems: pageItems.value,
+      perPageOptions,
+      perPage: itemsPerPage.value,
+    }))
+
+  const refresh = () => deps.fetchData()
+
+  return {
+    searchTerm,
+    sortField,
+    sortDirection,
+    currentPage,
+    itemsPerPage,
+    columnFilters,
+    filters,
+    sort,
+    pagination,
+    handleSort,
+    handlePageChange,
+    handlePerPageChange,
+    handleFilterChange,
+    handleColumnFiltersChange,
+    debouncedSearch,
+    refresh,
+    perPageOptions,
+  }
+}
--- a/app/composables/useDocuments.js
+++ b/app/composables/useDocuments.js
@@ -1,169 +0,0 @@
-import { ref } from 'vue'
-import { useApi } from './useApi'
-import { useToast } from './useToast'
-import { normalizeRelationIds } from '~/shared/apiRelations'
-
-const documents = ref([])
-const loading = ref(false)
-
-const extractCollection = (payload) => {
-  if (Array.isArray(payload)) {
-    return payload
-  }
-  if (Array.isArray(payload?.member)) {
-    return payload.member
-  }
-  if (Array.isArray(payload?.['hydra:member'])) {
-    return payload['hydra:member']
-  }
-  if (Array.isArray(payload?.data)) {
-    return payload.data
-  }
-  return []
-}
-
-const fileToBase64 = file =>
-  new Promise((resolve, reject) => {
-    const reader = new FileReader()
-    reader.onload = () => resolve(reader.result)
-    reader.onerror = () => reject(new Error(`Lecture du fichier ${file.name} impossible`))
-    reader.readAsDataURL(file)
-  })
-
-export function useDocuments () {
-  const { get, post, delete: del } = useApi()
-  const { showError, showSuccess } = useToast()
-
-  const loadFromEndpoint = async (endpoint, { updateStore = false } = {}) => {
-    loading.value = true
-    try {
-      const result = await get(endpoint)
-      if (result.success) {
-        const data = extractCollection(result.data)
-        if (updateStore) {
-          documents.value = data
-        }
-        return { success: true, data }
-      }
-      if (result.error) {
-        showError(result.error)
-      }
-      return result
-    } catch (error) {
-      console.error(`Erreur lors du chargement des documents (${endpoint}):`, error)
-      showError('Impossible de charger les documents')
-      return { success: false, error: error.message }
-    } finally {
-      loading.value = false
-    }
-  }
-
-  const loadDocuments = async (options = {}) => {
-    return loadFromEndpoint('/documents', { updateStore: options.updateStore ?? true })
-  }
-
-  const loadDocumentsBySite = async (siteId, options = {}) => {
-    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' } }
-    return loadFromEndpoint(`/documents/machine/${machineId}`, { updateStore: options.updateStore ?? false })
-  }
-
-  const loadDocumentsByComponent = async (componentId, options = {}) => {
-    if (!componentId) { return { success: false, error: 'Aucun composant sélectionné' } }
-    return loadFromEndpoint(`/documents/composant/${componentId}`, { updateStore: options.updateStore ?? false })
-  }
-
-  const loadDocumentsByProduct = async (productId, options = {}) => {
-    if (!productId) { return { success: false, error: 'Aucun produit sélectionné' } }
-    return loadFromEndpoint(`/documents/product/${productId}`, { updateStore: options.updateStore ?? false })
-  }
-
-  const loadDocumentsByPiece = async (pieceId, options = {}) => {
-    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é' } }
-
-    loading.value = true
-    const created = []
-
-    try {
-      for (const file of files) {
-        const dataUrl = await fileToBase64(file)
-
-        const payload = normalizeRelationIds({
-          name: file.name,
-          filename: file.name,
-          mimeType: file.type || 'application/octet-stream',
-          size: file.size,
-          path: dataUrl,
-          ...context
-        })
-
-        const result = await post('/documents', payload)
-        if (result.success) {
-          created.push(result.data)
-          showSuccess(`Document "${file.name}" ajouté`)
-        } else if (result.error) {
-          showError(`Erreur sur ${file.name} : ${result.error}`)
-        }
-      }
-
-      if (created.length) {
-        if (updateStore) {
-          documents.value = [...created, ...documents.value]
-        }
-        return { success: true, data: created }
-      }
-
-      return { success: false, error: 'Aucun document ajouté' }
-    } catch (error) {
-      console.error('Erreur lors de l\'upload des documents:', error)
-      showError("Échec de l'ajout des documents")
-      return { success: false, error: error.message }
-    } finally {
-      loading.value = false
-    }
-  }
-
-  const deleteDocument = async (id, { updateStore = false } = {}) => {
-    if (!id) { return { success: false, error: 'Identifiant manquant' } }
-
-    loading.value = true
-    try {
-      const result = await del(`/documents/${id}`)
-      if (result.success) {
-        if (updateStore) {
-          documents.value = documents.value.filter(doc => doc.id !== id)
-        }
-        showSuccess('Document supprimé')
-      }
-      return result
-    } catch (error) {
-      console.error('Erreur lors de la suppression du document:', error)
-      showError('Impossible de supprimer le document')
-      return { success: false, error: error.message }
-    } finally {
-      loading.value = false
-    }
-  }
-
-  return {
-    documents,
-    loading,
-    loadDocuments,
-    loadDocumentsBySite,
-    loadDocumentsByMachine,
-    loadDocumentsByComponent,
-    loadDocumentsByPiece,
-    loadDocumentsByProduct,
-    uploadDocuments,
-    deleteDocument
-  }
-}
--- a/app/composables/useDocuments.ts
+++ b/app/composables/useDocuments.ts
@@ -0,0 +1,297 @@
+import { ref } from 'vue'
+import { useApi } from './useApi'
+import { useToast } from './useToast'
+import { extractCollection } from '~/shared/utils/apiHelpers'
+
+export interface Document {
+  id: string
+  name: string
+  filename: string
+  mimeType: string
+  size: number
+  fileUrl: string
+  downloadUrl: string
+  /** @deprecated Legacy Base64 data URI — use fileUrl instead */
+  path?: string
+  createdAt?: string
+  siteId?: string
+  machineId?: string
+  composantId?: string
+  productId?: string
+  pieceId?: string
+  site?: { id: string; name?: string } | null
+  machine?: { id: string; name?: string } | null
+  composant?: { id: string; name?: string } | null
+  piece?: { id: string; name?: string } | null
+  product?: { id: string; name?: string } | null
+}
+
+export interface UploadContext {
+  siteId?: string
+  machineId?: string
+  composantId?: string
+  productId?: string
+  pieceId?: string
+}
+
+export interface DocumentResult {
+  success: boolean
+  data?: Document | Document[]
+  error?: string
+}
+
+interface LoadDocumentsOptions {
+  search?: string
+  page?: number
+  itemsPerPage?: number
+  orderBy?: string
+  orderDir?: 'asc' | 'desc'
+  attachmentFilter?: string
+  force?: boolean
+}
+
+const documents = ref<Document[]>([])
+const total = ref(0)
+const loading = ref(false)
+const loaded = ref(false)
+
+const extractTotal = (payload: unknown, fallbackLength: number): number => {
+  const p = payload as Record<string, unknown> | null
+  if (typeof p?.totalItems === 'number') return p.totalItems
+  if (typeof p?.['hydra:totalItems'] === 'number') return p['hydra:totalItems']
+  return fallbackLength
+}
+
+export function useDocuments() {
+  const { get, postFormData, delete: del } = useApi()
+  const { showError, showSuccess } = useToast()
+
+  const loadFromEndpoint = async (
+    endpoint: string,
+    { updateStore = false, itemsPerPage }: { updateStore?: boolean; itemsPerPage?: number } = {},
+  ): Promise<DocumentResult> => {
+    loading.value = true
+    try {
+      const url = itemsPerPage ? `${endpoint}${endpoint.includes('?') ? '&' : '?'}itemsPerPage=${itemsPerPage}` : endpoint
+      const result = await get(url)
+      if (result.success) {
+        const data = extractCollection(result.data)
+        if (updateStore) {
+          documents.value = data
+        }
+        return { success: true, data }
+      }
+      if (result.error) {
+        showError(result.error)
+      }
+      return result as DocumentResult
+    } catch (error) {
+      const err = error as Error
+      console.error(`Erreur lors du chargement des documents (${endpoint}):`, error)
+      showError('Impossible de charger les documents')
+      return { success: false, error: err.message }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const loadDocuments = async (options: LoadDocumentsOptions = {}): Promise<DocumentResult> => {
+    const {
+      search = '',
+      page = 1,
+      itemsPerPage = 30,
+      orderBy = 'createdAt',
+      orderDir = 'desc',
+      attachmentFilter = 'all',
+      force = false,
+    } = options
+
+    if (!force && loaded.value && !search && page === 1 && attachmentFilter === 'all') {
+      return { success: true, data: documents.value }
+    }
+
+    if (loading.value) {
+      return { success: true, data: documents.value }
+    }
+
+    loading.value = true
+    try {
+      const params = new URLSearchParams()
+      params.set('itemsPerPage', String(itemsPerPage))
+      params.set('page', String(page))
+
+      if (search && search.trim()) {
+        params.set('name', search.trim())
+      }
+
+      if (attachmentFilter && attachmentFilter !== 'all') {
+        params.set(`exists[${attachmentFilter}]`, 'true')
+      }
+
+      params.set(`order[${orderBy}]`, orderDir)
+
+      const result = await get(`/documents?${params.toString()}`)
+      if (result.success) {
+        const items = extractCollection(result.data)
+        documents.value = items
+        total.value = extractTotal(result.data, items.length)
+        loaded.value = true
+        return { success: true, data: items }
+      }
+      if (result.error) {
+        showError(result.error)
+      }
+      return result as DocumentResult
+    } catch (error) {
+      const err = error as Error
+      console.error('Erreur lors du chargement des documents:', error)
+      showError('Impossible de charger les documents')
+      return { success: false, error: err.message }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const loadDocumentsBySite = async (
+    siteId: string,
+    options: { updateStore?: boolean } = {},
+  ): Promise<DocumentResult> => {
+    if (!siteId) {
+      return { success: false, error: 'Aucun site sélectionné' }
+    }
+    return loadFromEndpoint(`/documents/site/${siteId}`, { updateStore: options.updateStore ?? false })
+  }
+
+  const loadDocumentsByMachine = async (
+    machineId: string,
+    options: { updateStore?: boolean } = {},
+  ): Promise<DocumentResult> => {
+    if (!machineId) {
+      return { success: false, error: 'Aucune machine sélectionnée' }
+    }
+    return loadFromEndpoint(`/documents/machine/${machineId}`, { updateStore: options.updateStore ?? false })
+  }
+
+  const loadDocumentsByComponent = async (
+    componentId: string,
+    options: { updateStore?: boolean } = {},
+  ): Promise<DocumentResult> => {
+    if (!componentId) {
+      return { success: false, error: 'Aucun composant sélectionné' }
+    }
+    return loadFromEndpoint(`/documents/composant/${componentId}`, { updateStore: options.updateStore ?? false })
+  }
+
+  const loadDocumentsByProduct = async (
+    productId: string,
+    options: { updateStore?: boolean } = {},
+  ): Promise<DocumentResult> => {
+    if (!productId) {
+      return { success: false, error: 'Aucun produit sélectionné' }
+    }
+    return loadFromEndpoint(`/documents/product/${productId}`, { updateStore: options.updateStore ?? false })
+  }
+
+  const loadDocumentsByPiece = async (
+    pieceId: string,
+    options: { updateStore?: boolean } = {},
+  ): Promise<DocumentResult> => {
+    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 = {} }: { files: File[]; context?: UploadContext },
+    { updateStore = false }: { updateStore?: boolean } = {},
+  ): Promise<DocumentResult> => {
+    if (!files.length) {
+      return { success: false, error: 'Aucun fichier sélectionné' }
+    }
+
+    loading.value = true
+    const created: Document[] = []
+
+    try {
+      for (const file of files) {
+        const formData = new FormData()
+        formData.append('file', file)
+        formData.append('name', file.name)
+
+        if (context.siteId) formData.append('siteId', context.siteId)
+        if (context.machineId) formData.append('machineId', context.machineId)
+        if (context.composantId) formData.append('composantId', context.composantId)
+        if (context.productId) formData.append('productId', context.productId)
+        if (context.pieceId) formData.append('pieceId', context.pieceId)
+
+        const result = await postFormData('/documents', formData)
+        if (result.success) {
+          created.push(result.data as Document)
+          showSuccess(`Document "${file.name}" ajouté`)
+        } else if (result.error) {
+          showError(`Erreur sur ${file.name} : ${result.error}`)
+        }
+      }
+
+      if (created.length) {
+        if (updateStore) {
+          documents.value = [...created, ...documents.value]
+        }
+        return { success: true, data: created }
+      }
+
+      return { success: false, error: 'Aucun document ajouté' }
+    } catch (error) {
+      const err = error as Error
+      console.error("Erreur lors de l'upload des documents:", error)
+      showError("Échec de l'ajout des documents")
+      return { success: false, error: err.message }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const deleteDocument = async (
+    id: string | number,
+    { updateStore = false }: { updateStore?: boolean } = {},
+  ): Promise<DocumentResult> => {
+    if (!id) {
+      return { success: false, error: 'Identifiant manquant' }
+    }
+
+    loading.value = true
+    try {
+      const result = await del(`/documents/${id}`)
+      if (result.success) {
+        if (updateStore) {
+          documents.value = documents.value.filter((doc) => doc.id !== id)
+        }
+        showSuccess('Document supprimé')
+      }
+      return result as DocumentResult
+    } catch (error) {
+      const err = error as Error
+      console.error('Erreur lors de la suppression du document:', error)
+      showError('Impossible de supprimer le document')
+      return { success: false, error: err.message }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  return {
+    documents,
+    total,
+    loading,
+    loaded,
+    loadDocuments,
+    loadDocumentsBySite,
+    loadDocumentsByMachine,
+    loadDocumentsByComponent,
+    loadDocumentsByPiece,
+    loadDocumentsByProduct,
+    uploadDocuments,
+    deleteDocument,
+  }
+}
--- a/app/composables/useEntityCustomFields.ts
+++ b/app/composables/useEntityCustomFields.ts
@@ -0,0 +1,181 @@
+/**
+ * Reactive custom field management for entity items (ComponentItem, PieceItem).
+ *
+ * Wraps the pure logic from entityCustomFieldLogic.ts with Vue reactivity,
+ * watchers, and API calls for updating/upserting custom field values.
+ */
+
+import { computed, watch } from 'vue'
+import { useCustomFields } from '~/composables/useCustomFields'
+import { useToast } from '~/composables/useToast'
+import {
+  buildDefinitionSources,
+  buildCandidateCustomFields,
+  mergeFieldDefinitionsWithValues,
+  dedupeMergedFields,
+  ensureCustomFieldId,
+  resolveFieldId,
+  resolveFieldName,
+  resolveFieldType,
+  resolveFieldReadOnly,
+  resolveCustomFieldId,
+  buildCustomFieldMetadata,
+} from '~/shared/utils/entityCustomFieldLogic'
+
+export interface EntityCustomFieldsDeps {
+  entity: () => any
+  entityType: 'composant' | 'piece'
+}
+
+export function useEntityCustomFields(deps: EntityCustomFieldsDeps) {
+  const { entity, entityType } = deps
+  const {
+    updateCustomFieldValue: updateCustomFieldValueApi,
+    upsertCustomFieldValue,
+  } = useCustomFields()
+  const { showSuccess, showError } = useToast()
+
+  const definitionSources = computed(() =>
+    buildDefinitionSources(entity(), entityType),
+  )
+
+  const displayedCustomFields = computed(() =>
+    dedupeMergedFields(
+      mergeFieldDefinitionsWithValues(
+        definitionSources.value,
+        entity().customFieldValues,
+      ),
+    ),
+  )
+
+  const candidateCustomFields = computed(() =>
+    buildCandidateCustomFields(entity(), definitionSources.value),
+  )
+
+  // Watchers to ensure field IDs are resolved
+  watch(
+    candidateCustomFields,
+    () => {
+      const candidates = candidateCustomFields.value
+      ;(displayedCustomFields.value || []).forEach((field: any) => {
+        if (field) ensureCustomFieldId(field, candidates)
+      })
+    },
+    { immediate: true, deep: true },
+  )
+
+  watch(
+    displayedCustomFields,
+    (fields) => {
+      const candidates = candidateCustomFields.value
+      ;(fields || []).forEach((field: any) => {
+        if (field) ensureCustomFieldId(field, candidates)
+      })
+    },
+    { immediate: true, deep: true },
+  )
+
+  const updateCustomField = async (field: any) => {
+    if (!field || resolveFieldReadOnly(field)) return
+
+    const e = entity()
+    const fieldValueId = resolveFieldId(field)
+
+    // Update existing field value
+    if (fieldValueId) {
+      const result: any = await updateCustomFieldValueApi(fieldValueId, { value: field.value ?? '' })
+      if (result.success) {
+        const existingValue = e.customFieldValues?.find((v: any) => v.id === fieldValueId)
+        if (existingValue?.customField?.id) {
+          field.customFieldId = existingValue.customField.id
+          field.customField = existingValue.customField
+        }
+        showSuccess(`Champ "${resolveFieldName(field)}" mis à jour avec succès`)
+      } else {
+        showError(`Erreur lors de la mise à jour du champ "${resolveFieldName(field)}"`)
+      }
+      return
+    }
+
+    // Create new field value
+    const customFieldId = ensureCustomFieldId(field, candidateCustomFields.value)
+    const fieldName = resolveFieldName(field)
+    if (!e?.id) {
+      showError(`Impossible de créer la valeur pour ce champ`)
+      return
+    }
+    if (!customFieldId && (!fieldName || fieldName === 'Champ')) {
+      showError(`Impossible de créer la valeur pour ce champ`)
+      return
+    }
+
+    const metadata = customFieldId ? undefined : buildCustomFieldMetadata(field)
+    const result: any = await upsertCustomFieldValue(
+      customFieldId,
+      entityType,
+      e.id,
+      field.value ?? '',
+      metadata,
+    )
+
+    if (result.success) {
+      const newValue = result.data
+      if (newValue?.id) {
+        field.customFieldValueId = newValue.id
+        field.value = newValue.value ?? field.value ?? ''
+        if (newValue.customField?.id) {
+          field.customFieldId = newValue.customField.id
+          field.customField = newValue.customField
+        }
+
+        if (Array.isArray(e.customFieldValues)) {
+          const index = e.customFieldValues.findIndex((v: any) => v.id === newValue.id)
+          if (index !== -1) {
+            e.customFieldValues.splice(index, 1, newValue)
+          } else {
+            e.customFieldValues.push(newValue)
+          }
+        } else {
+          e.customFieldValues = [newValue]
+        }
+      }
+      showSuccess(`Champ "${resolveFieldName(field)}" créé avec succès`)
+
+      // Update definitions list
+      const definitions = Array.isArray(e.customFields) ? [...e.customFields] : []
+      const fieldIdentifier = ensureCustomFieldId(field, candidateCustomFields.value)
+      const existingIndex = definitions.findIndex((definition: any) => {
+        const definitionId = resolveCustomFieldId(definition)
+        if (fieldIdentifier && definitionId) return definitionId === fieldIdentifier
+        return definition?.name === resolveFieldName(field)
+      })
+
+      const updatedDefinition = {
+        ...(existingIndex !== -1 ? definitions[existingIndex] : {}),
+        customFieldValueId: field.customFieldValueId,
+        customFieldId: fieldIdentifier,
+        name: resolveFieldName(field),
+        type: resolveFieldType(field),
+        required: field.required ?? false,
+        options: field.options ?? [],
+        value: field.value ?? '',
+        customField: field.customField ?? null,
+      }
+
+      if (existingIndex !== -1) {
+        definitions.splice(existingIndex, 1, updatedDefinition)
+      } else {
+        definitions.push(updatedDefinition)
+      }
+      e.customFields = definitions
+    } else {
+      showError(`Erreur lors de la sauvegarde du champ "${resolveFieldName(field)}"`)
+    }
+  }
+
+  return {
+    displayedCustomFields,
+    candidateCustomFields,
+    updateCustomField,
+  }
+}
--- a/app/composables/useEntityDocuments.ts
+++ b/app/composables/useEntityDocuments.ts
@@ -0,0 +1,122 @@
+/**
+ * Reactive document management for entity items (ComponentItem, PieceItem).
+ *
+ * Handles document CRUD operations, preview modal state, and lazy loading.
+ * Display helpers (formatSize, shouldInlinePdf, etc.) are imported from
+ * shared/utils/documentDisplayUtils.ts.
+ */
+
+import { ref, computed, watch } from 'vue'
+import { useDocuments } from '~/composables/useDocuments'
+import { canPreviewDocument } from '~/utils/documentPreview'
+
+export interface EntityDocumentsDeps {
+  entity: () => any
+  entityType: 'composant' | 'piece'
+}
+
+export function useEntityDocuments(deps: EntityDocumentsDeps) {
+  const { entity, entityType } = deps
+  const { uploadDocuments, deleteDocument } = useDocuments()
+
+  const loadDocumentsFn = entityType === 'composant'
+    ? useDocuments().loadDocumentsByComponent
+    : useDocuments().loadDocumentsByPiece
+
+  const selectedFiles = ref<File[]>([])
+  const uploadingDocuments = ref(false)
+  const loadingDocuments = ref(false)
+  const documentsLoaded = ref(!!(entity().documents && entity().documents.length))
+
+  const documents = computed(() => entity().documents || [])
+
+  // Preview modal state
+  const previewDocument = ref<any>(null)
+  const previewVisible = ref(false)
+
+  const openPreview = (doc: any) => {
+    if (!canPreviewDocument(doc)) return
+    previewDocument.value = doc
+    previewVisible.value = true
+  }
+
+  const closePreview = () => {
+    previewVisible.value = false
+    previewDocument.value = null
+  }
+
+  // Document watchers
+  watch(
+    () => entity().documents,
+    (docs: any) => {
+      documentsLoaded.value = !!(docs && docs.length)
+    },
+  )
+
+  // CRUD operations
+  const refreshDocuments = async () => {
+    const e = entity()
+    if (!e?.id) return
+    loadingDocuments.value = true
+    try {
+      const result: any = await loadDocumentsFn(e.id, { updateStore: false })
+      if (result.success) {
+        e.documents = result.data || []
+        documentsLoaded.value = true
+      }
+    } finally {
+      loadingDocuments.value = false
+    }
+  }
+
+  const ensureDocumentsLoaded = async () => {
+    if (documentsLoaded.value || !entity()?.id) return
+    await refreshDocuments()
+  }
+
+  const handleFilesAdded = async (files: File[]) => {
+    const e = entity()
+    if (!files.length || !e?.id) return
+    uploadingDocuments.value = true
+    try {
+      const contextKey = entityType === 'composant' ? 'composantId' : 'pieceId'
+      const result: any = await uploadDocuments(
+        { files, context: { [contextKey]: e.id } } as any,
+        { updateStore: false } as any,
+      )
+      if (result.success) {
+        const newDocs = result.data || []
+        e.documents = [...newDocs, ...(e.documents || [])]
+        documentsLoaded.value = true
+        selectedFiles.value = []
+      }
+    } finally {
+      uploadingDocuments.value = false
+    }
+  }
+
+  const removeDocument = async (documentId: string) => {
+    if (!documentId) return
+    const result: any = await deleteDocument(documentId, { updateStore: false } as any)
+    if (result.success) {
+      const e = entity()
+      e.documents = (e.documents || []).filter((doc: any) => doc.id !== documentId)
+    }
+  }
+
+  return {
+    documents,
+    selectedFiles,
+    uploadingDocuments,
+    loadingDocuments,
+    documentsLoaded,
+    previewDocument,
+    previewVisible,
+    openPreview,
+    closePreview,
+    refreshDocuments,
+    ensureDocumentsLoaded,
+    handleFilesAdded,
+    removeDocument,
+  }
+}
--- a/app/composables/useEntityHistory.ts
+++ b/app/composables/useEntityHistory.ts
@@ -0,0 +1,69 @@
+/**
+ * Generic entity history composable.
+ *
+ * Replaces useComponentHistory, usePieceHistory, useProductHistory which were
+ * 99% identical (only the API endpoint differed).
+ */
+
+import { ref } from 'vue'
+import { useApi } from '~/composables/useApi'
+
+export type EntityHistoryActor = {
+  id: string
+  label: string
+}
+
+export type EntityHistoryEntry = {
+  id: string
+  action: 'create' | 'update' | 'delete' | string
+  createdAt: string
+  actor: EntityHistoryActor | null
+  diff: Record<string, { from: unknown; to: unknown }> | null
+  snapshot: Record<string, unknown> | null
+}
+
+const ENTITY_ENDPOINTS: Record<string, string> = {
+  composant: '/composants',
+  piece: '/pieces',
+  product: '/products',
+}
+
+const extractItems = (payload: any): EntityHistoryEntry[] => {
+  if (Array.isArray(payload?.items)) return payload.items
+  if (Array.isArray(payload?.member)) return payload.member
+  if (Array.isArray(payload?.['hydra:member'])) return payload['hydra:member']
+  return []
+}
+
+export function useEntityHistory(entityType: 'composant' | 'piece' | 'product') {
+  const { get } = useApi()
+  const basePath = ENTITY_ENDPOINTS[entityType]
+
+  const history = ref<EntityHistoryEntry[]>([])
+  const loading = ref(false)
+  const error = ref<string | null>(null)
+
+  const loadHistory = async (entityId: string) => {
+    loading.value = true
+    error.value = null
+    try {
+      const result = await get(`${basePath}/${entityId}/history`)
+      if (!result.success) {
+        error.value = result.error ?? 'Impossible de charger l\'historique.'
+        history.value = []
+        return result
+      }
+      history.value = extractItems(result.data)
+      return { success: true, data: history.value }
+    } catch (err: any) {
+      const message = err?.message ?? 'Erreur inconnue'
+      error.value = message
+      history.value = []
+      return { success: false, error: message }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  return { history, loading, error, loadHistory }
+}
--- a/app/composables/useEntityProductDisplay.ts
+++ b/app/composables/useEntityProductDisplay.ts
@@ -0,0 +1,103 @@
+/**
+ * Reactive product display for entity items (ComponentItem, PieceItem).
+ *
+ * Resolves product information from entity.product, entity.__productDisplay,
+ * or a selectedProduct ref, and produces display-ready computed properties.
+ */
+
+import { computed, type Ref } from 'vue'
+
+const currencyFormatter = new Intl.NumberFormat('fr-FR', {
+  style: 'currency',
+  currency: 'EUR',
+  currencyDisplay: 'narrowSymbol',
+})
+
+function buildProductDisplay(product: any) {
+  if (!product || typeof product !== 'object') return null
+
+  const suppliers = Array.isArray(product.constructeurs)
+    ? product.constructeurs
+        .map((c: any) => c?.name)
+        .filter((name: any) => typeof name === 'string' && name.trim().length > 0)
+        .join(', ')
+    : product.supplierLabel || null
+
+  const priceValue = product.supplierPrice ?? product.price ?? product.priceLabel ?? product.priceDisplay ?? null
+  let price: string | null = null
+  if (priceValue !== null && priceValue !== undefined) {
+    const parsed = Number(priceValue)
+    if (!Number.isNaN(parsed)) {
+      price = currencyFormatter.format(parsed)
+    } else if (typeof priceValue === 'string' && priceValue.trim().length > 0) {
+      price = priceValue
+    }
+  }
+
+  return {
+    name: product.name || product.label || product.reference || product.productName || null,
+    reference: product.reference || null,
+    category: product.typeProduct?.name || product.category || null,
+    suppliers,
+    price,
+  }
+}
+
+export interface EntityProductDisplayDeps {
+  entity: () => any
+  selectedProduct?: Ref<any>
+}
+
+export function useEntityProductDisplay(deps: EntityProductDisplayDeps) {
+  const { entity, selectedProduct } = deps
+
+  const displayProduct = computed(() => {
+    // Priority: selectedProduct (for PieceItem) → entity.product → entity.__productDisplay
+    if (selectedProduct?.value) {
+      const normalized = buildProductDisplay(selectedProduct.value)
+      if (normalized) return normalized
+    }
+    const explicit = entity().product || null
+    const normalized = buildProductDisplay(explicit)
+    if (normalized) return normalized
+    const fallback = entity().__productDisplay
+    if (fallback) {
+      return {
+        name: fallback.name || null,
+        reference: fallback.reference || null,
+        category: fallback.category || null,
+        suppliers: fallback.suppliers || null,
+        price: fallback.price || null,
+      }
+    }
+    return null
+  })
+
+  const displayProductName = computed(() => {
+    if (displayProduct.value?.name) return displayProduct.value.name
+    const e = entity()
+    return e.product?.name || e.productName || e.productLabel || null
+  })
+
+  const productInfoRows = computed(() => {
+    if (!displayProduct.value) return []
+    const rows: { label: string; value: string }[] = []
+    if (displayProduct.value.reference) rows.push({ label: 'Référence', value: displayProduct.value.reference })
+    if (displayProduct.value.price) rows.push({ label: 'Prix indicatif', value: displayProduct.value.price })
+    if (displayProduct.value.suppliers) rows.push({ label: 'Fournisseur(s)', value: displayProduct.value.suppliers })
+    if (displayProduct.value.category) rows.push({ label: 'Catégorie', value: displayProduct.value.category })
+    return rows
+  })
+
+  const productDocuments = computed(() => {
+    const product = selectedProduct?.value || entity().product || null
+    return Array.isArray(product?.documents) ? product.documents : []
+  })
+
+  return {
+    displayProduct,
+    displayProductName,
+    productInfoRows,
+    productDocuments,
+  }
+}
--- a/app/composables/useEntityTypes.ts
+++ b/app/composables/useEntityTypes.ts
@@ -0,0 +1,192 @@
+/**
+ * Generic entity types composable.
+ *
+ * Replaces useComponentTypes, usePieceTypes, useProductTypes which were
+ * 95%+ identical (only the category string and labels differed).
+ */
+
+import { ref, type Ref } from 'vue'
+import { useToast } from './useToast'
+import { humanizeError } from '~/shared/utils/errorMessages'
+import {
+  listModelTypes,
+  createModelType,
+  updateModelType,
+  deleteModelType,
+  type ModelType,
+  type ModelCategory,
+} from '~/services/modelTypes'
+
+export interface EntityType extends ModelType {
+  description?: string | null
+}
+
+interface EntityTypePayload {
+  name: string
+  code?: string
+  description?: string | null
+  notes?: string | null
+  structure?: any
+}
+
+interface EntityTypeResult {
+  success: boolean
+  data?: EntityType | EntityType[]
+  error?: string
+}
+
+interface EntityTypeConfig {
+  category: ModelCategory
+  label: string // e.g. 'composant', 'pièce', 'produit'
+}
+
+const generateCodeFromName = (name: string): string => {
+  return (name || '')
+    .normalize('NFD')
+    .replace(/[\u0300-\u036F]/g, '')
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+    .replace(/-+/g, '-') || 'type'
+}
+
+// Shared state per category (module-level singletons)
+const stateByCategory: Record<string, { types: Ref<EntityType[]>; loading: Ref<boolean>; loaded: Ref<boolean> }> = {}
+
+function getOrCreateState(category: ModelCategory) {
+  if (!stateByCategory[category]) {
+    stateByCategory[category] = {
+      types: ref<EntityType[]>([]),
+      loading: ref(false),
+      loaded: ref(false),
+    }
+  }
+  return stateByCategory[category]
+}
+
+/**
+ * Marks the cache for a given category as stale.
+ * Next call to `loadTypes()` (without `force`) will refetch from the API.
+ * Safe to call from event handlers (no setup context required).
+ */
+export function invalidateEntityTypeCache(category: ModelCategory) {
+  const state = stateByCategory[category]
+  if (state) {
+    state.loaded.value = false
+  }
+}
+
+export function useEntityTypes(config: EntityTypeConfig) {
+  const { category, label } = config
+  const { showSuccess, showError } = useToast()
+  const state = getOrCreateState(category)
+
+  const normalizeItem = (item: ModelType): EntityType => ({
+    ...item,
+    description: item.description ?? item.notes ?? null,
+  })
+
+  const loadTypes = async (options: { force?: boolean } = {}): Promise<EntityTypeResult> => {
+    if (!options.force && state.loaded.value) {
+      return { success: true, data: state.types.value }
+    }
+    state.loading.value = true
+    try {
+      const data = await listModelTypes({
+        category,
+        sort: 'name',
+        dir: 'asc',
+        limit: 200,
+      })
+      state.types.value = data.items.map(normalizeItem)
+      state.loaded.value = true
+      return { success: true, data: state.types.value }
+    } catch (error) {
+      const err = error as Error & { message?: string }
+      const message = humanizeError(err?.message)
+      showError(`Impossible de charger les types de ${label}.`)
+      return { success: false, error: message }
+    } finally {
+      state.loading.value = false
+    }
+  }
+
+  const createType = async (payload: EntityTypePayload): Promise<EntityTypeResult> => {
+    state.loading.value = true
+    try {
+      const data = await createModelType({
+        name: payload.name,
+        code: payload.code || generateCodeFromName(payload.name),
+        category,
+        notes: payload.description ?? payload.notes ?? undefined,
+        description: payload.description ?? undefined,
+        structure: payload.structure ?? undefined,
+      })
+      const normalized = normalizeItem(data)
+      state.types.value.push(normalized)
+      showSuccess(`Type de ${label} "${data.name}" créé`)
+      return { success: true, data: normalized }
+    } catch (error) {
+      const err = error as Error & { data?: { message?: string }; message?: string }
+      const raw = err?.data?.message || err?.message
+      const message = humanizeError(raw)
+      showError(`Impossible de créer le type de ${label} : ${message}`)
+      return { success: false, error: message }
+    } finally {
+      state.loading.value = false
+    }
+  }
+
+  const updateType = async (id: string, payload: EntityTypePayload): Promise<EntityTypeResult> => {
+    state.loading.value = true
+    try {
+      const data = await updateModelType(id, {
+        name: payload.name,
+        description: payload.description ?? undefined,
+        notes: payload.notes ?? undefined,
+        code: payload.code,
+        structure: payload.structure ?? undefined,
+      })
+      const normalized = normalizeItem(data)
+      const index = state.types.value.findIndex((t) => t.id === id)
+      if (index !== -1) state.types.value[index] = normalized
+      showSuccess(`Type de ${label} "${data.name}" mis à jour`)
+      return { success: true, data: normalized }
+    } catch (error) {
+      const err = error as Error & { data?: { message?: string }; message?: string }
+      const raw = err?.data?.message || err?.message
+      const message = humanizeError(raw)
+      showError(`Impossible de mettre à jour le type de ${label} : ${message}`)
+      return { success: false, error: message }
+    } finally {
+      state.loading.value = false
+    }
+  }
+
+  const deleteType = async (id: string): Promise<EntityTypeResult> => {
+    state.loading.value = true
+    try {
+      await deleteModelType(id)
+      state.types.value = state.types.value.filter((t) => t.id !== id)
+      showSuccess(`Type de ${label} supprimé`)
+      return { success: true }
+    } catch (error) {
+      const err = error as Error & { data?: { message?: string }; message?: string }
+      const raw = err?.data?.message || err?.message
+      const message = humanizeError(raw)
+      showError(`Impossible de supprimer le type de ${label} : ${message}`)
+      return { success: false, error: message }
+    } finally {
+      state.loading.value = false
+    }
+  }
+
+  return {
+    types: state.types,
+    loading: state.loading,
+    loadTypes,
+    createType,
+    updateType,
+    deleteType,
+  }
+}
--- a/app/composables/useMachineCreatePage.ts
+++ b/app/composables/useMachineCreatePage.ts
@@ -0,0 +1,123 @@
+/**
+ * Machine creation page – orchestration composable.
+ *
+ * Simplified: no more TypeMachine / skeleton system.
+ * Supports direct creation or cloning from an existing machine.
+ */
+
+import { ref, reactive, onMounted } from 'vue'
+import { useMachines } from '~/composables/useMachines'
+import { useSites } from '~/composables/useSites'
+import { useToast } from '~/composables/useToast'
+import { humanizeError } from '~/shared/utils/errorMessages'
+
+export function useMachineCreatePage() {
+  // ---------------------------------------------------------------------------
+  // Composable calls
+  // ---------------------------------------------------------------------------
+
+  const { machines, loadMachines, createMachine, cloneMachine } = useMachines()
+  const { sites, loadSites } = useSites()
+  const toast = useToast()
+
+  // ---------------------------------------------------------------------------
+  // Local state
+  // ---------------------------------------------------------------------------
+
+  const submitting = ref(false)
+  const loading = ref(true)
+
+  const newMachine = reactive({
+    name: '',
+    siteId: '',
+    reference: '',
+    cloneFromMachineId: '',
+  })
+
+  // ---------------------------------------------------------------------------
+  // Machine creation
+  // ---------------------------------------------------------------------------
+
+  const finalizeMachineCreation = async () => {
+    if (submitting.value) return
+
+    if (!newMachine.name?.trim()) {
+      toast.showError('Merci de renseigner un nom pour la machine')
+      return
+    }
+
+    submitting.value = true
+    try {
+      let result: any
+
+      if (newMachine.cloneFromMachineId) {
+        result = await cloneMachine(newMachine.cloneFromMachineId, {
+          name: newMachine.name,
+          siteId: newMachine.siteId,
+          ...(newMachine.reference ? { reference: newMachine.reference } : {}),
+        })
+      } else {
+        result = await createMachine({
+          name: newMachine.name,
+          siteId: newMachine.siteId || undefined,
+          reference: newMachine.reference || undefined,
+        } as any)
+      }
+
+      if (result.success) {
+        const machineId = result.data?.id
+          || (result.data?.machine as any)?.id
+          || null
+
+        newMachine.name = ''
+        newMachine.siteId = ''
+        newMachine.reference = ''
+        newMachine.cloneFromMachineId = ''
+
+        if (machineId) {
+          await navigateTo(`/machine/${machineId}`)
+        } else {
+          await navigateTo('/machines')
+        }
+      } else if (result.error) {
+        toast.showError(`Impossible de créer la machine : ${humanizeError(result.error)}`)
+      }
+    } catch (error: any) {
+      toast.showError(`Impossible de créer la machine : ${humanizeError(error.message)}`)
+    } finally {
+      submitting.value = false
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+  // Lifecycle
+  // ---------------------------------------------------------------------------
+
+  onMounted(async () => {
+    loading.value = true
+    try {
+      await Promise.all([
+        loadSites(),
+        loadMachines(),
+      ])
+    } finally {
+      loading.value = false
+    }
+  })
+
+  // ---------------------------------------------------------------------------
+  // Public API
+  // ---------------------------------------------------------------------------
+
+  return {
+    // State
+    newMachine,
+    sites,
+    machines,
+    submitting,
+    loading,
+
+    // Actions
+    finalizeMachineCreation,
+  }
+}
--- a/app/composables/useMachineDetailData.ts
+++ b/app/composables/useMachineDetailData.ts
--- a/app/composables/useMachineHierarchy.ts
+++ b/app/composables/useMachineHierarchy.ts
@@ -0,0 +1,281 @@
+/**
+ * Builds a component/piece hierarchy tree from flat machine link arrays.
+ *
+ * Extracted from pages/machine/[id].vue to keep the page orchestrator lean.
+ */
+
+import { resolveIdentifier, getProductDisplay } from '~/shared/utils/productDisplayUtils'
+import { resolveConstructeurs, uniqueConstructeurIds, type ConstructeurSummary } from '~/shared/constructeurUtils'
+
+type AnyRecord = Record<string, unknown>
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+const collectConstructeurs = (
+  allConstructeurs: AnyRecord[],
+  ...sources: unknown[]
+): AnyRecord[] => {
+  const ids = uniqueConstructeurIds(...sources)
+  if (!ids.length) return []
+
+  const pools = sources
+    .flatMap((source) => {
+      if (Array.isArray(source)) return [source]
+      if (source && typeof source === 'object' && (source as AnyRecord).id) return [[source]]
+      return []
+    })
+    .filter(Boolean) as AnyRecord[][]
+
+  // ConstructeurSummary and AnyRecord are structurally compatible at runtime
+  const allPools = [...pools, allConstructeurs] as unknown as Array<ConstructeurSummary[]>
+  return resolveConstructeurs(ids, ...allPools) as unknown as AnyRecord[]
+}
+
+// ---------------------------------------------------------------------------
+// Link array resolution
+// ---------------------------------------------------------------------------
+
+export const resolveLinkArray = (source: unknown, keys: string[]): unknown[] | null => {
+  if (!source || typeof source !== 'object') return null
+  for (const key of keys) {
+    const value = (source as AnyRecord)[key]
+    if (Array.isArray(value)) return value
+  }
+  return null
+}
+
+// ---------------------------------------------------------------------------
+// Merge trees (for incremental updates)
+// ---------------------------------------------------------------------------
+
+export function mergePieceLists(existing: AnyRecord[] = [], updates: AnyRecord[] = []): AnyRecord[] {
+  if (!existing.length) {
+    return updates.map((piece) => ({ ...piece, constructeurs: piece.constructeurs || [] }))
+  }
+  if (!updates.length) {
+    return existing.map((piece) => ({ ...piece, constructeurs: piece.constructeurs || [] }))
+  }
+
+  const updateMap = new Map<unknown, AnyRecord>(
+    updates.map((piece) => [piece.id, { ...piece, constructeurs: piece.constructeurs || [] }]),
+  )
+  const merged = existing.map((piece) => {
+    const update = updateMap.get(piece.id)
+    if (!update) return piece
+    return { ...piece, ...update, customFields: update.customFields ?? piece.customFields }
+  })
+
+  updates.forEach((update) => {
+    if (!existing.some((piece) => piece.id === update.id)) merged.push(update)
+  })
+
+  return merged
+}
+
+export function mergeComponentTrees(existing: AnyRecord[] = [], updates: AnyRecord[] = []): AnyRecord[] {
+  if (!existing.length) {
+    return updates.map((component) => ({
+      ...component,
+      constructeurs: component.constructeurs || [],
+      pieces: ((component.pieces || []) as AnyRecord[]).map((piece) => ({
+        ...piece,
+        constructeurs: piece.constructeurs || [],
+      })),
+      subComponents: mergeComponentTrees([], (component.subComponents || []) as AnyRecord[]),
+    }))
+  }
+  if (!updates.length) return existing
+
+  const updateMap = new Map<unknown, AnyRecord>(
+    updates.map((component) => [
+      component.id,
+      {
+        ...component,
+        constructeurs: component.constructeurs || [],
+        pieces: ((component.pieces || []) as AnyRecord[]).map((piece) => ({
+          ...piece,
+          constructeurs: piece.constructeurs || [],
+        })),
+        subComponents: mergeComponentTrees([], (component.subComponents || []) as AnyRecord[]),
+      },
+    ]),
+  )
+  const merged: AnyRecord[] = existing.map((component) => {
+    const update = updateMap.get(component.id)
+    if (!update) {
+      return {
+        ...component,
+        constructeurs: component.constructeurs || [],
+        pieces: mergePieceLists((component.pieces || []) as AnyRecord[], []),
+        subComponents: mergeComponentTrees((component.subComponents || []) as AnyRecord[], []),
+      }
+    }
+    return {
+      ...component,
+      ...update,
+      customFields: update.customFields ?? component.customFields,
+      pieces: mergePieceLists((component.pieces || []) as AnyRecord[], (update.pieces || []) as AnyRecord[]),
+      subComponents: mergeComponentTrees(
+        (component.subComponents || []) as AnyRecord[],
+        (update.subComponents || []) as AnyRecord[],
+      ),
+    }
+  })
+
+  updates.forEach((update) => {
+    if (!existing.some((component) => component.id === update.id)) merged.push(update)
+  })
+
+  return merged
+}
+
+// ---------------------------------------------------------------------------
+// Build hierarchy from links
+// ---------------------------------------------------------------------------
+
+export const buildMachineHierarchyFromLinks = (
+  componentLinks: AnyRecord[] = [],
+  pieceLinks: AnyRecord[] = [],
+  findProductById: (id: string) => AnyRecord | null,
+  allConstructeurs: AnyRecord[] = [],
+): { components: AnyRecord[]; machinePieces: AnyRecord[] } => {
+  const normalizeComponentLinkId = (link: AnyRecord) =>
+    resolveIdentifier(link?.id, link?.linkId, link?.machineComponentLinkId)
+
+  const normalizePieceLinkId = (link: AnyRecord) =>
+    resolveIdentifier(link?.id, link?.linkId, link?.machinePieceLinkId)
+
+  const createPieceNode = (link: AnyRecord, parentComponentName: string | null = null): AnyRecord | null => {
+    if (!link || typeof link !== 'object') return null
+
+    const appliedPiece = (link.piece && typeof link.piece === 'object' ? link.piece : {}) as AnyRecord
+    const originalPiece = (link.originalPiece && typeof link.originalPiece === 'object' ? link.originalPiece : null) as AnyRecord | null
+
+    const machinePieceLinkId = normalizePieceLinkId(link)
+    const pieceId = resolveIdentifier(appliedPiece.id, appliedPiece.pieceId, link.pieceId)
+
+    const overrides = (link.overrides || null) as AnyRecord | null
+
+    const basePiece: AnyRecord = {
+      ...appliedPiece,
+      id: appliedPiece.id || pieceId || machinePieceLinkId || `piece-${machinePieceLinkId}`,
+      pieceId,
+      name: overrides?.name || appliedPiece.name || (appliedPiece.definition as AnyRecord)?.name || (appliedPiece.definition as AnyRecord)?.role || originalPiece?.name || 'Pièce',
+      reference: overrides?.reference || appliedPiece.reference || (appliedPiece.definition as AnyRecord)?.reference || originalPiece?.reference || null,
+      prix: overrides?.prix ?? appliedPiece.prix ?? originalPiece?.prix ?? null,
+      constructeur: appliedPiece.constructeur || originalPiece?.constructeur || null,
+      constructeurId: appliedPiece.constructeurId || (appliedPiece.constructeur as AnyRecord)?.id || originalPiece?.constructeurId || null,
+      documents: Array.isArray(appliedPiece.documents) ? appliedPiece.documents : Array.isArray(originalPiece?.documents) ? originalPiece!.documents : [],
+      typePiece: appliedPiece.typePiece || null,
+      typePieceId: appliedPiece.typePieceId || (appliedPiece.typePiece as AnyRecord)?.id || null,
+      overrides,
+      originalPiece,
+      machinePieceLink: link,
+      machinePieceLinkId,
+      linkId: machinePieceLinkId,
+      parentComponentLinkId: resolveIdentifier(link.parentComponentLinkId, link.parentLinkId, link.parentMachineComponentLinkId, appliedPiece.parentComponentLinkId),
+      parentComponentId: resolveIdentifier(appliedPiece.parentComponentId, link.parentComponentId),
+      parentComponentName,
+      parentLinkId: resolveIdentifier(link.parentLinkId, link.parentMachinePieceLinkId, appliedPiece.parentLinkId),
+      parentPieceLinkId: resolveIdentifier(link.parentPieceLinkId, appliedPiece.parentPieceLinkId),
+      parentPieceId: resolveIdentifier(appliedPiece.parentPieceId, link.parentPieceId),
+      definition: appliedPiece.definition || originalPiece?.definition || {},
+      customFields: appliedPiece.customFields || [],
+    }
+
+    const resolvedProductId = resolveIdentifier(appliedPiece.productId, (appliedPiece.product as AnyRecord)?.id, link.productId, (link.product as AnyRecord)?.id, originalPiece?.productId, (originalPiece?.product as AnyRecord)?.id)
+    const resolvedProduct = (appliedPiece.product || link.product || originalPiece?.product || (resolvedProductId ? findProductById(resolvedProductId) : null) || null) as AnyRecord | null
+
+    const constructeurs = collectConstructeurs(allConstructeurs, appliedPiece.constructeurs, appliedPiece.constructeur, appliedPiece.constructeurIds, appliedPiece.constructeurId, originalPiece?.constructeurs, originalPiece?.constructeur, originalPiece?.constructeurIds, originalPiece?.constructeurId)
+
+    return {
+      ...basePiece,
+      constructeurs,
+      constructeur: constructeurs[0] || basePiece.constructeur || null,
+      constructeurId: (constructeurs[0] as AnyRecord)?.id || basePiece.constructeurId || null,
+      productId: resolvedProductId || appliedPiece.productId || null,
+      product: resolvedProduct || appliedPiece.product || null,
+      __productDisplay: getProductDisplay({ product: resolvedProduct || appliedPiece.product || null, productId: resolvedProductId || appliedPiece.productId || null } as AnyRecord, findProductById),
+    }
+  }
+
+  const createComponentNode = (link: AnyRecord): AnyRecord | null => {
+    if (!link || typeof link !== 'object') return null
+
+    const appliedComponent = (link.composant && typeof link.composant === 'object' ? link.composant : {}) as AnyRecord
+    const originalComponent = (link.originalComposant && typeof link.originalComposant === 'object' ? link.originalComposant : null) as AnyRecord | null
+
+    const machineComponentLinkId = normalizeComponentLinkId(link)
+    const composantId = resolveIdentifier(appliedComponent.id, appliedComponent.composantId, link.composantId)
+
+    const compOverrides = (link.overrides || null) as AnyRecord | null
+
+    const componentName = (compOverrides?.name || appliedComponent.name || (appliedComponent.definition as AnyRecord)?.alias || (appliedComponent.definition as AnyRecord)?.name || originalComponent?.name || 'Composant') as string
+
+    const pieces = Array.isArray(link.pieceLinks)
+      ? (link.pieceLinks as AnyRecord[]).map((pl) => createPieceNode(pl, componentName)).filter(Boolean) as AnyRecord[]
+      : []
+
+    const subComponents = Array.isArray(link.childLinks)
+      ? (link.childLinks as AnyRecord[]).map(createComponentNode).filter(Boolean) as AnyRecord[]
+      : []
+
+    const resolvedProductId = resolveIdentifier(appliedComponent.productId, (appliedComponent.product as AnyRecord)?.id, link.productId, (link.product as AnyRecord)?.id, originalComponent?.productId, (originalComponent?.product as AnyRecord)?.id)
+    const resolvedProduct = (appliedComponent.product || link.product || originalComponent?.product || (resolvedProductId ? findProductById(resolvedProductId) : null) || null) as AnyRecord | null
+
+    const baseComponent: AnyRecord = {
+      ...appliedComponent,
+      id: appliedComponent.id || composantId || machineComponentLinkId || `component-${machineComponentLinkId}`,
+      composantId,
+      name: componentName,
+      reference: compOverrides?.reference || appliedComponent.reference || (appliedComponent.definition as AnyRecord)?.reference || originalComponent?.reference || null,
+      prix: compOverrides?.prix ?? appliedComponent.prix ?? originalComponent?.prix ?? null,
+      constructeur: appliedComponent.constructeur || originalComponent?.constructeur || null,
+      constructeurId: appliedComponent.constructeurId || (appliedComponent.constructeur as AnyRecord)?.id || originalComponent?.constructeurId || null,
+      documents: Array.isArray(appliedComponent.documents) ? appliedComponent.documents : Array.isArray(originalComponent?.documents) ? originalComponent!.documents : [],
+      typeComposant: appliedComponent.typeComposant || null,
+      typeComposantId: appliedComponent.typeComposantId || (appliedComponent.typeComposant as AnyRecord)?.id || null,
+      overrides: compOverrides,
+      machineComponentLinkOverrides: compOverrides,
+      definitionOverrides: compOverrides,
+      originalComposant: originalComponent,
+      machineComponentLink: link,
+      machineComponentLinkId,
+      componentLinkId: machineComponentLinkId,
+      parentComponentLinkId: resolveIdentifier(link.parentComponentLinkId, link.parentLinkId, link.parentMachineComponentLinkId, appliedComponent.parentComponentLinkId),
+      parentComposantId: resolveIdentifier(appliedComponent.parentComposantId, link.parentComponentId),
+      definition: appliedComponent.definition || originalComponent?.definition || {},
+      customFields: appliedComponent.customFields || [],
+      pieces,
+      subComponents,
+      subcomponents: subComponents,
+      sousComposants: subComponents,
+    }
+
+    const constructeurs = collectConstructeurs(allConstructeurs, appliedComponent.constructeurs, appliedComponent.constructeur, appliedComponent.constructeurIds, appliedComponent.constructeurId, originalComponent?.constructeurs, originalComponent?.constructeur, originalComponent?.constructeurIds, originalComponent?.constructeurId)
+
+    return {
+      ...baseComponent,
+      constructeurs,
+      constructeur: constructeurs[0] || baseComponent.constructeur || null,
+      constructeurId: (constructeurs[0] as AnyRecord)?.id || baseComponent.constructeurId || null,
+      productId: resolvedProductId || appliedComponent.productId || null,
+      product: resolvedProduct || appliedComponent.product || null,
+      __productDisplay: getProductDisplay({ product: resolvedProduct || appliedComponent.product || null, productId: resolvedProductId || appliedComponent.productId || null } as AnyRecord, findProductById),
+    }
+  }
+
+  const rootComponents = (Array.isArray(componentLinks) ? componentLinks : [])
+    .filter((link) => !resolveIdentifier(link?.parentComponentLinkId, link?.parentLinkId, link?.parentMachineComponentLinkId))
+    .map(createComponentNode)
+    .filter(Boolean) as AnyRecord[]
+
+  const machinePieces = (Array.isArray(pieceLinks) ? pieceLinks : [])
+    .filter((link) => !resolveIdentifier(link?.parentComponentLinkId, link?.parentLinkId, link?.parentMachineComponentLinkId))
+    .map((link) => createPieceNode(link, null))
+    .filter(Boolean) as AnyRecord[]
+
+  return { components: rootComponents, machinePieces }
+}
--- a/app/composables/useMachinePrint.ts
+++ b/app/composables/useMachinePrint.ts
@@ -0,0 +1,163 @@
+/**
+ * Machine print selection and execution logic.
+ *
+ * Extracted from pages/machine/[id].vue.
+ */
+
+import { ref, reactive, nextTick } from 'vue'
+import { buildMachinePrintContext, buildMachinePrintHtml } from '~/utils/printTemplates/machineReport'
+
+type AnyRecord = Record<string, unknown>
+
+export interface PrintSelection {
+  machine: { info: boolean; customFields: boolean; documents: boolean }
+  components: Record<string, boolean>
+  pieces: Record<string, boolean>
+}
+
+export function useMachinePrint() {
+  const printModalOpen = ref(false)
+  const printSelection = reactive<PrintSelection>({
+    machine: { info: true, customFields: true, documents: true },
+    components: {},
+    pieces: {},
+  })
+
+  const ensurePrintSelectionEntries = (
+    components: AnyRecord[],
+    machinePieces: AnyRecord[],
+  ) => {
+    printSelection.machine.info ??= true
+    printSelection.machine.customFields ??= true
+    printSelection.machine.documents ??= true
+
+    const ensureComponent = (component: AnyRecord) => {
+      if (component?.id !== undefined && printSelection.components[component.id as string] === undefined) {
+        printSelection.components[component.id as string] = true
+      }
+      ;((component.pieces || []) as AnyRecord[]).forEach((piece) => {
+        if (piece?.id !== undefined && printSelection.pieces[piece.id as string] === undefined) {
+          printSelection.pieces[piece.id as string] = true
+        }
+      })
+      ;((component.subComponents || []) as AnyRecord[]).forEach(ensureComponent)
+    }
+
+    components.forEach(ensureComponent)
+    machinePieces.forEach((piece) => {
+      if (piece?.id !== undefined && printSelection.pieces[piece.id as string] === undefined) {
+        printSelection.pieces[piece.id as string] = true
+      }
+    })
+  }
+
+  const setAllPrintSelection = (
+    value: boolean,
+    components: AnyRecord[],
+    machinePieces: AnyRecord[],
+  ) => {
+    ensurePrintSelectionEntries(components, machinePieces)
+    printSelection.machine.info = value
+    printSelection.machine.customFields = value
+    printSelection.machine.documents = value
+    Object.keys(printSelection.components).forEach((key) => {
+      printSelection.components[key] = value
+    })
+    Object.keys(printSelection.pieces).forEach((key) => {
+      printSelection.pieces[key] = value
+    })
+  }
+
+  const openPrintModal = (components: AnyRecord[], machinePieces: AnyRecord[]) => {
+    ensurePrintSelectionEntries(components, machinePieces)
+    printModalOpen.value = true
+  }
+
+  const closePrintModal = () => {
+    printModalOpen.value = false
+  }
+
+  const printMachine = (
+    machine: AnyRecord,
+    machineName: string,
+    machineReference: string,
+    machinePieces: AnyRecord[],
+    components: AnyRecord[],
+    currentSelection: PrintSelection = printSelection,
+  ) => {
+    if (typeof window === 'undefined') return
+
+    // machineReport.js has no type annotations; cast to avoid inferred never[] params
+    const context = (buildMachinePrintContext as unknown as (config: Record<string, unknown>) => Record<string, unknown>)({
+      machine,
+      machineName,
+      machineReference,
+      machinePieces,
+      components,
+      selection: currentSelection,
+    })
+    const styles = Array.from(document.querySelectorAll('link[rel="stylesheet"], style'))
+      .map((node) => node.outerHTML)
+      .join('')
+
+    const htmlContent = buildMachinePrintHtml(context, styles)
+
+    const iframe = document.createElement('iframe')
+    iframe.style.position = 'fixed'
+    iframe.style.right = '0'
+    iframe.style.bottom = '0'
+    iframe.style.width = '0'
+    iframe.style.height = '0'
+    iframe.style.border = '0'
+    iframe.setAttribute('title', 'print-frame')
+    document.body.appendChild(iframe)
+
+    const iframeWindow = iframe.contentWindow
+    const iframeDocument = iframe.contentDocument || iframeWindow?.document
+    if (!iframeDocument || !iframeWindow) {
+      iframe.remove()
+      return
+    }
+
+    iframeDocument.open()
+    iframeDocument.write(htmlContent)
+    iframeDocument.close()
+
+    const triggerPrint = () => {
+      iframeWindow.focus()
+      iframeWindow.print()
+      setTimeout(() => {
+        iframe.remove()
+      }, 1000)
+    }
+
+    if (iframeDocument.readyState === 'complete') {
+      setTimeout(triggerPrint, 50)
+    } else {
+      iframe.onload = () => setTimeout(triggerPrint, 50)
+    }
+  }
+
+  const handlePrintConfirm = async (
+    machine: AnyRecord,
+    machineName: string,
+    machineReference: string,
+    machinePieces: AnyRecord[],
+    components: AnyRecord[],
+  ) => {
+    closePrintModal()
+    await nextTick()
+    printMachine(machine, machineName, machineReference, machinePieces, components, printSelection)
+  }
+
+  return {
+    printModalOpen,
+    printSelection,
+    ensurePrintSelectionEntries,
+    setAllPrintSelection,
+    openPrintModal,
+    closePrintModal,
+    printMachine,
+    handlePrintConfirm,
+  }
+}
--- a/app/composables/useMachineTypesApi.js
+++ b/app/composables/useMachineTypesApi.js
@@ -1,187 +0,0 @@
-import { ref } from 'vue'
-import { useToast } from './useToast'
-import { useApi } from './useApi'
-import { extractRelationId } from '~/shared/apiRelations'
-
-const machineTypes = ref([])
-const loading = ref(false)
-
-const normalizeRequirementList = (value, relationKey) => {
-  if (!Array.isArray(value)) {
-    return []
-  }
-  return value.map((entry, index) => {
-    if (!entry || typeof entry !== 'object') {
-      return entry
-    }
-    const normalized = { ...entry }
-    const relationField = relationKey.replace('Id', '')
-    const relationValue = normalized[relationField]
-    console.log(`[normalizeRequirementList] Entry ${index}:`, {
-      relationKey,
-      relationField,
-      hasRelationKey: !!normalized[relationKey],
-      relationValue,
-      relationValueType: typeof relationValue
-    })
-    if (relationKey && !normalized[relationKey]) {
-      const relationId = extractRelationId(relationValue)
-      console.log(`[normalizeRequirementList] Extracted ID:`, relationId)
-      if (relationId) {
-        normalized[relationKey] = relationId
-      }
-    }
-    console.log(`[normalizeRequirementList] Normalized entry:`, normalized)
-    return normalized
-  })
-}
-
-const normalizeMachineType = (type) => {
-  if (!type || typeof type !== 'object') {
-    return type
-  }
-  return {
-    ...type,
-    componentRequirements: normalizeRequirementList(type.componentRequirements, 'typeComposantId'),
-    pieceRequirements: normalizeRequirementList(type.pieceRequirements, 'typePieceId'),
-    productRequirements: normalizeRequirementList(type.productRequirements, 'typeProductId'),
-  }
-}
-
-const extractCollection = (payload) => {
-  if (Array.isArray(payload)) {
-    return payload
-  }
-  if (Array.isArray(payload?.member)) {
-    return payload.member
-  }
-  if (Array.isArray(payload?.['hydra:member'])) {
-    return payload['hydra:member']
-  }
-  if (Array.isArray(payload?.data)) {
-    return payload.data
-  }
-  return []
-}
-
-export function useMachineTypesApi () {
-  const { showSuccess, showError, showInfo } = useToast()
-  const { get, post, put, delete: del } = useApi()
-
-  const loadMachineTypes = async () => {
-    loading.value = true
-    try {
-      const result = await get('/type_machines')
-      if (result.success) {
-        const items = extractCollection(result.data)
-        machineTypes.value = items.map(normalizeMachineType)
-        showInfo(`Chargement de ${machineTypes.value.length} type(s) de machine réussi`)
-      }
-    } catch (error) {
-      console.error('Erreur lors du chargement des types de machines:', error)
-    } finally {
-      loading.value = false
-    }
-  }
-
-  const createMachineType = async (typeData) => {
-    loading.value = true
-    try {
-      const result = await post('/type_machines', typeData)
-      if (result.success) {
-        machineTypes.value.push(normalizeMachineType(result.data))
-        showSuccess(`Type de machine "${typeData.name}" créé avec succès`)
-      }
-      return result
-    } catch (error) {
-      console.error('Erreur lors de la création du type de machine:', error)
-      return { success: false, error: error.message }
-    } finally {
-      loading.value = false
-    }
-  }
-
-  const updateMachineType = async (id, typeData) => {
-    loading.value = true
-    try {
-      const result = await put(`/type_machines/${id}`, typeData)
-      if (result.success) {
-        const normalized = normalizeMachineType(result.data)
-        const index = machineTypes.value.findIndex(type => type.id === id)
-        if (index !== -1) {
-          machineTypes.value[index] = normalized
-        }
-        showSuccess(`Type de machine "${typeData.name}" mis à jour avec succès`)
-      }
-      return result
-    } catch (error) {
-      console.error('Erreur lors de la mise à jour du type de machine:', error)
-      return { success: false, error: error.message }
-    } finally {
-      loading.value = false
-    }
-  }
-
-  const deleteMachineType = async (id) => {
-    loading.value = true
-    try {
-      const result = await del(`/type_machines/${id}`)
-      if (result.success) {
-        const deletedType = machineTypes.value.find(type => type.id === id)
-        machineTypes.value = machineTypes.value.filter(type => type.id !== id)
-        showSuccess(`Type de machine "${deletedType?.name || 'inconnu'}" supprimé avec succès`)
-      }
-      return result
-    } catch (error) {
-      console.error('Erreur lors de la suppression du type de machine:', error)
-      return { success: false, error: error.message }
-    } finally {
-      loading.value = false
-    }
-  }
-
-  const getMachineTypeById = async (id, forceRefresh = false) => {
-    // D'abord chercher dans le cache local (sauf si forceRefresh)
-    if (!forceRefresh) {
-      const localType = machineTypes.value.find(type => type.id === id)
-      if (localType) {
-        return { success: true, data: localType }
-      }
-    }
-
-    // Récupérer depuis l'API
-    try {
-      const result = await get(`/type_machines/${id}`)
-      if (result.success) {
-        const normalized = normalizeMachineType(result.data)
-        // Mettre à jour le cache local
-        const index = machineTypes.value.findIndex(type => type.id === id)
-        if (index !== -1) {
-          machineTypes.value[index] = normalized
-        } else {
-          machineTypes.value.push(normalized)
-        }
-        return { success: true, data: normalized }
-      }
-      return result
-    } catch (error) {
-      console.error('Erreur lors de la récupération du type de machine:', error)
-      return { success: false, error: error.message }
-    }
-  }
-
-  const getMachineTypes = () => machineTypes.value
-  const isLoading = () => loading.value
-
-  return {
-    machineTypes,
-    loading,
-    loadMachineTypes,
-    createMachineType,
-    updateMachineType,
-    deleteMachineType,
-    getMachineTypeById,
-    getMachineTypes,
-    isLoading
-  }
-}
--- a/app/composables/useMachines.ts
+++ b/app/composables/useMachines.ts
@@ -1,13 +1,24 @@
 import { ref } from 'vue'
 import { useToast } from './useToast'
-import { useApi } from './useApi'
+import { useApi, type ApiResponse } from './useApi'
 import { buildConstructeurRequestPayload } from '~/shared/constructeurUtils'
 import { extractRelationId, normalizeRelationIds } from '~/shared/apiRelations'
+import { extractCollection } from '~/shared/utils/apiHelpers'

-const machines = ref([])
+export interface Machine {
+  id: string
+  name?: string
+  siteId?: string | null
+  componentLinks?: unknown[]
+  pieceLinks?: unknown[]
+  [key: string]: unknown
+}
+
+const machines = ref<Machine[]>([])
 const loading = ref(false)
+const loaded = ref(false)

-const resolveLinkCollection = (source, keys) => {
+const resolveLinkCollection = (source: Record<string, unknown>, keys: string[]): unknown[] | undefined => {
  if (!source || typeof source !== 'object') {
    return undefined
  }
@@ -22,16 +33,17 @@ const resolveLinkCollection = (source, keys) => {
  return undefined
 }

-const normalizeMachineResponse = (payload) => {
+const normalizeMachineResponse = (payload: unknown): Machine | null => {
  if (!payload || typeof payload !== 'object') {
    return null
  }

-  const container = payload.machine && typeof payload.machine === 'object'
-    ? payload.machine
-    : payload
+  const raw = payload as Record<string, unknown>
+  const container = raw.machine && typeof raw.machine === 'object'
+    ? raw.machine as Record<string, unknown>
+    : raw

-  const normalized = { ...container }
+  const normalized: Record<string, unknown> = { ...container }

  if (!normalized.siteId) {
    const siteId = extractRelationId(container.site)
@@ -40,51 +52,35 @@ const normalizeMachineResponse = (payload) => {
    }
  }

-  if (!normalized.typeMachineId) {
-    const typeMachineId = extractRelationId(container.typeMachine)
-    if (typeMachineId) {
-      normalized.typeMachineId = typeMachineId
-    }
-  }
-
-  const componentLinks = resolveLinkCollection(payload, ['componentLinks', 'machineComponentLinks']) ??
+  const componentLinks = resolveLinkCollection(raw, ['componentLinks', 'machineComponentLinks']) ??
    resolveLinkCollection(container, ['componentLinks', 'machineComponentLinks']) ??
    []
-  const pieceLinks = resolveLinkCollection(payload, ['pieceLinks', 'machinePieceLinks']) ??
+  const pieceLinks = resolveLinkCollection(raw, ['pieceLinks', 'machinePieceLinks']) ??
    resolveLinkCollection(container, ['pieceLinks', 'machinePieceLinks']) ??
    []

  normalized.componentLinks = componentLinks
  normalized.pieceLinks = pieceLinks

-  return normalized
+  return normalized as Machine
 }

-export function useMachines () {
-  const { showSuccess, showError, showInfo } = useToast()
+export function useMachines() {
+  const { showSuccess, showError } = useToast()
  const { get, post, patch, delete: del } = useApi()

-  const loadMachines = async () => {
+  const loadMachines = async (options: { force?: boolean } = {}): Promise<void> => {
+    if (!options.force && loaded.value) return
    loading.value = true
    try {
      const result = await get('/machines')
      if (result.success) {
-        const machineList = Array.isArray(result.data)
-          ? result.data
-          : Array.isArray(result.data?.member)
-            ? result.data.member
-            : Array.isArray(result.data?.['hydra:member'])
-              ? result.data['hydra:member']
-              : Array.isArray(result.data?.machines)
-                ? result.data.machines
-                : Array.isArray(result.data?.data)
-                  ? result.data.data
-                  : []
+        const machineList = extractCollection(result.data)
        const normalized = machineList
          .map((item) => normalizeMachineResponse(item))
-          .filter(Boolean)
+          .filter((item): item is Machine => item !== null)
        machines.value = normalized
-        showInfo(`Chargement de ${normalized.length} machine(s) réussi`)
+        loaded.value = true
      }
    } catch (error) {
      console.error('Erreur lors du chargement des machines:', error)
@@ -93,14 +89,14 @@ export function useMachines () {
    }
  }

-  const createMachine = async (machineData) => {
+  const createMachine = async (machineData: Partial<Machine>): Promise<ApiResponse> => {
    loading.value = true
    try {
      const normalizedPayload = normalizeRelationIds(buildConstructeurRequestPayload(machineData))
      const result = await post('/machines', normalizedPayload)
      if (result.success) {
        const createdMachine = normalizeMachineResponse(result.data) ||
-          normalizeMachineResponse(result.data?.machine) ||
+          normalizeMachineResponse((result.data as Record<string, unknown>)?.machine) ||
          null
        if (createdMachine) {
          machines.value.push(createdMachine)
@@ -111,34 +107,22 @@ export function useMachines () {
      return result
    } catch (error) {
      console.error('Erreur lors de la création de la machine:', error)
-      return { success: false, error: error.message }
+      return { success: false, error: (error as Error).message }
    } finally {
      loading.value = false
    }
  }

-  const createMachineFromType = async (machineData, typeMachine) => {
-    // Créer la machine avec la structure héritée du type
-    const machineWithStructure = {
-      ...machineData,
-      typeMachineId: typeMachine.id
-      // La structure sera automatiquement héritée du type
-      // Les composants et pièces seront créés automatiquement
-    }
-
-    return await createMachine(machineWithStructure)
-  }
-
-  const updateMachineData = async (id, machineData) => {
+  const updateMachineData = async (id: string, machineData: Partial<Machine>): Promise<ApiResponse> => {
    loading.value = true
    try {
      const normalizedPayload = normalizeRelationIds(buildConstructeurRequestPayload(machineData))
      const result = await patch(`/machines/${id}`, normalizedPayload)
      if (result.success) {
        const updatedMachine = normalizeMachineResponse(result.data) ||
-          normalizeMachineResponse(result.data?.machine) ||
+          normalizeMachineResponse((result.data as Record<string, unknown>)?.machine) ||
          null
-        const index = machines.value.findIndex(machine => machine.id === id)
+        const index = machines.value.findIndex((machine) => machine.id === id)
        if (index !== -1 && updatedMachine) {
          machines.value[index] = {
            ...machines.value[index],
@@ -150,43 +134,65 @@ export function useMachines () {
      return result
    } catch (error) {
      console.error('Erreur lors de la mise à jour de la machine:', error)
-      return { success: false, error: error.message }
+      return { success: false, error: (error as Error).message }
    } finally {
      loading.value = false
    }
  }

-  const reconfigureSkeleton = async (machineId, payload) => {
+  const updateStructure = async (machineId: string, payload: unknown): Promise<ApiResponse> => {
    if (!machineId) {
      return { success: false, error: 'Identifiant de machine manquant' }
    }

    loading.value = true
    try {
-      const result = await patch(`/machines/${machineId}/skeleton`, payload)
+      const result = await patch(`/machines/${machineId}/structure`, payload)
      if (result.success) {
-        const index = machines.value.findIndex(machine => machine.id === machineId)
+        const index = machines.value.findIndex((machine) => machine.id === machineId)
        if (index !== -1) {
          const updatedMachine = normalizeMachineResponse(result.data) ||
-            normalizeMachineResponse(result.data?.machine) ||
+            normalizeMachineResponse((result.data as Record<string, unknown>)?.machine) ||
            machines.value[index]
          machines.value[index] = {
            ...machines.value[index],
-            ...(updatedMachine || {}),
-          }
+            ...updatedMachine,
+          } as Machine
        }
        showSuccess('Structure de la machine mise à jour avec succès')
      }
      return result
    } catch (error) {
-      console.error('Erreur lors de la reconfiguration du squelette de la machine:', error)
-      return { success: false, error: error.message }
+      console.error('Erreur lors de la mise à jour de la structure de la machine:', error)
+      return { success: false, error: (error as Error).message }
    } finally {
      loading.value = false
    }
  }

-  const addMissingCustomFields = async (machineId, { showToast: shouldShowToast = true } = {}) => {
+  const cloneMachine = async (sourceId: string, data: { name: string; siteId: string; reference?: string }): Promise<ApiResponse> => {
+    loading.value = true
+    try {
+      const result = await post(`/machines/${sourceId}/clone`, data)
+      if (result.success) {
+        const clonedMachine = normalizeMachineResponse(result.data) ||
+          normalizeMachineResponse((result.data as Record<string, unknown>)?.machine) ||
+          null
+        if (clonedMachine) {
+          machines.value.push(clonedMachine)
+        }
+        showSuccess(`Machine "${clonedMachine?.name || data.name}" clonée avec succès`)
+      }
+      return result
+    } catch (error) {
+      console.error('Erreur lors du clonage de la machine:', error)
+      return { success: false, error: (error as Error).message }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const addMissingCustomFields = async (machineId: string, { showToast: shouldShowToast = true } = {}): Promise<ApiResponse> => {
    if (!machineId) {
      const error = 'Identifiant de machine manquant'
      if (shouldShowToast) {
@@ -206,61 +212,56 @@ export function useMachines () {
      }
      return result
    } catch (error) {
-      console.error('Erreur lors de l’ajout des champs personnalisés manquants:', error)
+      console.error('Erreur lors de l\'ajout des champs personnalisés manquants:', error)
      if (shouldShowToast) {
        showError('Erreur lors de la complétion des champs personnalisés')
      }
-      return { success: false, error: error.message }
+      return { success: false, error: (error as Error).message }
    }
  }

-  const deleteMachine = async (id) => {
+  const deleteMachine = async (id: string): Promise<ApiResponse> => {
    loading.value = true
    try {
      const result = await del(`/machines/${id}`)
      if (result.success) {
-        const deletedMachine = machines.value.find(machine => machine.id === id)
-        machines.value = machines.value.filter(machine => machine.id !== id)
+        const deletedMachine = machines.value.find((machine) => machine.id === id)
+        machines.value = machines.value.filter((machine) => machine.id !== id)
        showSuccess(`Machine "${deletedMachine?.name || 'inconnu'}" supprimée avec succès`)
      }
      return result
    } catch (error) {
      console.error('Erreur lors de la suppression de la machine:', error)
-      return { success: false, error: error.message }
+      return { success: false, error: (error as Error).message }
    } finally {
      loading.value = false
    }
  }

-  const getMachineById = (id) => {
-    return machines.value.find(machine => machine.id === id)
+  const getMachineById = (id: string): Machine | undefined => {
+    return machines.value.find((machine) => machine.id === id)
  }

-  const getMachinesBySite = (siteId) => {
-    return machines.value.filter(machine => machine.siteId === siteId)
+  const getMachinesBySite = (siteId: string): Machine[] => {
+    return machines.value.filter((machine) => machine.siteId === siteId)
  }

-  const getMachinesByType = (typeMachineId) => {
-    return machines.value.filter(machine => machine.typeMachineId === typeMachineId)
-  }
-
-  const getMachines = () => machines.value
-  const isLoading = () => loading.value
+  const getMachines = (): Machine[] => machines.value
+  const isLoading = (): boolean => loading.value

  return {
    machines,
    loading,
    loadMachines,
    createMachine,
-    createMachineFromType,
    updateMachine: updateMachineData,
-    reconfigureSkeleton,
+    updateStructure,
+    cloneMachine,
    deleteMachine,
    getMachineById,
    getMachinesBySite,
-    getMachinesByType,
    getMachines,
    isLoading,
-    addMissingCustomFields
+    addMissingCustomFields,
  }
 }
--- a/app/composables/useNavDropdown.ts
+++ b/app/composables/useNavDropdown.ts
@@ -0,0 +1,65 @@
+import { ref, watch, onUnmounted } from 'vue'
+import { useRoute } from '#imports'
+
+export function useNavDropdown() {
+  const openDropdown = ref<string | null>(null)
+  let dropdownCloseTimer: ReturnType<typeof setTimeout> | null = null
+  const route = useRoute()
+
+  const setDropdown = (name: string) => {
+    if (dropdownCloseTimer) {
+      clearTimeout(dropdownCloseTimer)
+      dropdownCloseTimer = null
+    }
+    if (openDropdown.value !== name) {
+      openDropdown.value = name
+    }
+  }
+
+  const scheduleDropdownClose = (name: string) => {
+    if (dropdownCloseTimer) {
+      clearTimeout(dropdownCloseTimer)
+    }
+    dropdownCloseTimer = setTimeout(() => {
+      if (openDropdown.value === name) {
+        openDropdown.value = null
+      }
+      dropdownCloseTimer = null
+    }, 200)
+  }
+
+  const closeDropdownNow = () => {
+    if (dropdownCloseTimer) {
+      clearTimeout(dropdownCloseTimer)
+      dropdownCloseTimer = null
+    }
+    openDropdown.value = null
+  }
+
+  const toggleDropdown = (name: string) => {
+    if (openDropdown.value === name) {
+      closeDropdownNow()
+      return
+    }
+    setDropdown(name)
+  }
+
+  watch(() => route.fullPath, () => {
+    closeDropdownNow()
+  })
+
+  onUnmounted(() => {
+    if (dropdownCloseTimer) {
+      clearTimeout(dropdownCloseTimer)
+      dropdownCloseTimer = null
+    }
+  })
+
+  return {
+    openDropdown,
+    setDropdown,
+    scheduleDropdownClose,
+    closeDropdownNow,
+    toggleDropdown,
+  }
+}
--- a/app/composables/usePermissions.ts
+++ b/app/composables/usePermissions.ts
@@ -0,0 +1,41 @@
+import { computed } from 'vue'
+import { useProfileSession } from './useProfileSession'
+
+const ROLE_HIERARCHY: Record<string, string[]> = {
+  ROLE_ADMIN: ['ROLE_ADMIN', 'ROLE_GESTIONNAIRE', 'ROLE_VIEWER', 'ROLE_USER'],
+  ROLE_GESTIONNAIRE: ['ROLE_GESTIONNAIRE', 'ROLE_VIEWER', 'ROLE_USER'],
+  ROLE_VIEWER: ['ROLE_VIEWER', 'ROLE_USER'],
+  ROLE_USER: ['ROLE_USER'],
+}
+
+export function usePermissions() {
+  const { activeProfile } = useProfileSession()
+
+  const effectiveRoles = computed<string[]>(() => {
+    const roles = (activeProfile.value?.roles as string[] | undefined) ?? ['ROLE_USER']
+    const all = new Set<string>()
+    for (const role of roles) {
+      const inherited = ROLE_HIERARCHY[role] ?? [role]
+      for (const r of inherited) {
+        all.add(r)
+      }
+    }
+    return [...all]
+  })
+
+  const isGranted = (role: string): boolean => {
+    return effectiveRoles.value.includes(role)
+  }
+
+  const isAdmin = computed(() => isGranted('ROLE_ADMIN'))
+  const canEdit = computed(() => isGranted('ROLE_GESTIONNAIRE'))
+  const canView = computed(() => isGranted('ROLE_VIEWER'))
+
+  return {
+    isAdmin,
+    canEdit,
+    canView,
+    isGranted,
+    effectiveRoles,
+  }
+}
--- a/app/composables/usePieceHistory.ts
+++ b/app/composables/usePieceHistory.ts
@@ -0,0 +1,12 @@
+/**
+ * Backward-compatible wrapper around useEntityHistory.
+ * Real logic lives in useEntityHistory.ts.
+ */
+import { useEntityHistory, type EntityHistoryActor, type EntityHistoryEntry } from './useEntityHistory'
+
+export type PieceHistoryActor = EntityHistoryActor
+export type PieceHistoryEntry = EntityHistoryEntry
+
+export function usePieceHistory() {
+  return useEntityHistory('piece')
+}
--- a/app/composables/usePieceModels.js
+++ b/app/composables/usePieceModels.js
@@ -1,47 +0,0 @@
-import { ref, computed } from 'vue'
-
-let hasWarned = false
-
-const warnDeprecated = () => {
-  if (hasWarned) return
-  if (process.dev) {
-    console.warn('[usePieceModels] Ce composable est conservé pour compatibilité mais les modèles ont été remplacés par les catégories enrichies de squelette. Utilisez usePieceTypes / usePieces à la place.')
-  }
-  hasWarned = true
-}
-
-const buildUnsupportedResult = () => ({
-  success: false,
-  error: 'Les modèles de pièces ont été retirés. Gérez les squelettes via les catégories et utilisez les requirements machine pour instancier des pièces.'
-})
-
-export function usePieceModels () {
-  warnDeprecated()
-
-  const pieceModelsBuckets = ref({})
-  const loadingPieceModels = ref(false)
-
-  const pieceModels = computed(() => [])
-
-  const noLongerSupported = async () => {
-    warnDeprecated()
-    return buildUnsupportedResult()
-  }
-
-  const getPieceModels = () => pieceModels.value
-  const getPieceModelsForType = () => []
-  const isPieceModelLoading = () => loadingPieceModels.value
-
-  return {
-    pieceModels,
-    pieceModelsBuckets,
-    loadingPieceModels,
-    loadPieceModels: noLongerSupported,
-    createPieceModel: noLongerSupported,
-    updatePieceModel: noLongerSupported,
-    deletePieceModel: noLongerSupported,
-    getPieceModels,
-    getPieceModelsForType,
-    isPieceModelLoading
-  }
-}
--- a/app/composables/usePieceTypes.js
+++ b/app/composables/usePieceTypes.js
@@ -1,140 +0,0 @@
-import { ref } from 'vue'
-import { useToast } from './useToast'
-import { listModelTypes, createModelType, updateModelType, deleteModelType } from '~/services/modelTypes'
-
-const pieceTypes = ref([])
-const loadingPieceTypes = ref(false)
-
-export function usePieceTypes () {
-  const { showSuccess, showError } = useToast()
-
-  const generateCodeFromName = (name) => {
-    return (name || '')
-      .normalize('NFD')
-      .replace(/[\u0300-\u036F]/g, '')
-      .toLowerCase()
-      .replace(/[^a-z0-9]+/g, '-')
-      .replace(/^-+|-+$/g, '')
-      .replace(/-+/g, '-') || 'type'
-  }
-
-  const loadPieceTypes = async () => {
-    loadingPieceTypes.value = true
-    try {
-      const data = await listModelTypes({
-        category: 'PIECE',
-        sort: 'name',
-        dir: 'asc',
-        limit: 200
-      })
-
-      pieceTypes.value = data.items.map(item => ({
-        ...item,
-        description: item.description ?? item.notes ?? null
-      }))
-
-      return { success: true, data: pieceTypes.value }
-    } catch (error) {
-      const message = error?.message || 'Erreur inconnue'
-      showError(`Impossible de charger les types de pièce: ${message}`)
-      return { success: false, error: message }
-    } finally {
-      loadingPieceTypes.value = false
-    }
-  }
-
-  const createPieceType = async (payload) => {
-    loadingPieceTypes.value = true
-    try {
-      const data = await createModelType({
-        name: payload.name,
-        code: payload.code || generateCodeFromName(payload.name),
-        category: 'PIECE',
-        notes: payload.description ?? payload.notes,
-        description: payload.description ?? null,
-        structure: payload.structure
-      })
-
-      const normalized = {
-        ...data,
-        description: data.description ?? data.notes ?? null
-      }
-
-      pieceTypes.value.push(normalized)
-      showSuccess(`Type de pièce "${data.name}" créé`)
-
-      return { success: true, data: normalized }
-    } catch (error) {
-      const message = error?.data?.message || error?.message || 'Erreur inconnue'
-      showError(`Erreur lors de la création du type de pièce: ${message}`)
-      return { success: false, error: message }
-    } finally {
-      loadingPieceTypes.value = false
-    }
-  }
-
-  const updatePieceType = async (id, payload) => {
-    loadingPieceTypes.value = true
-    try {
-      const data = await updateModelType(id, {
-        name: payload.name,
-        description: payload.description,
-        notes: payload.notes,
-        code: payload.code,
-        structure: payload.structure
-      })
-
-      const normalized = {
-        ...data,
-        description: data.description ?? data.notes ?? null
-      }
-
-      const index = pieceTypes.value.findIndex(type => type.id === id)
-      if (index !== -1) {
-        pieceTypes.value[index] = normalized
-      }
-      showSuccess(`Type de pièce "${data.name}" mis à jour`)
-
-      return {
-        success: true,
-        data: normalized
-      }
-    } catch (error) {
-      const message = error?.data?.message || error?.message || 'Erreur inconnue'
-      showError(`Erreur lors de la mise à jour du type de pièce: ${message}`)
-      return { success: false, error: message }
-    } finally {
-      loadingPieceTypes.value = false
-    }
-  }
-
-  const deletePieceType = async (id) => {
-    loadingPieceTypes.value = true
-    try {
-      await deleteModelType(id)
-      pieceTypes.value = pieceTypes.value.filter(type => type.id !== id)
-      showSuccess('Type de pièce supprimé')
-      return { success: true }
-    } catch (error) {
-      const message = error?.data?.message || error?.message || 'Erreur inconnue'
-      showError(`Erreur lors de la suppression du type de pièce: ${message}`)
-      return { success: false, error: message }
-    } finally {
-      loadingPieceTypes.value = false
-    }
-  }
-
-  const getPieceTypes = () => pieceTypes.value
-  const isPieceTypeLoading = () => loadingPieceTypes.value
-
-  return {
-    pieceTypes,
-    loadingPieceTypes,
-    loadPieceTypes,
-    createPieceType,
-    updatePieceType,
-    deletePieceType,
-    getPieceTypes,
-    isPieceTypeLoading
-  }
-}
--- a/app/composables/usePieceTypes.ts
+++ b/app/composables/usePieceTypes.ts
@@ -0,0 +1,29 @@
+/**
+ * Backward-compatible wrapper around useEntityTypes.
+ * Preserves the original API surface (renamed fields) so consumers need no changes.
+ */
+import { useEntityTypes, type EntityType } from './useEntityTypes'
+import type { PieceModelStructure } from '~/shared/types/inventory'
+import type { Ref } from 'vue'
+
+export interface PieceType extends EntityType {
+  structure: PieceModelStructure | null
+}
+
+export function usePieceTypes() {
+  const { types, loading, loadTypes, createType, updateType, deleteType } = useEntityTypes({
+    category: 'PIECE',
+    label: 'pièce',
+  })
+
+  return {
+    pieceTypes: types as Ref<PieceType[]>,
+    loadingPieceTypes: loading,
+    loadPieceTypes: loadTypes,
+    createPieceType: createType,
+    updatePieceType: updateType,
+    deletePieceType: deleteType,
+    getPieceTypes: () => types.value as PieceType[],
+    isPieceTypeLoading: () => loading.value,
+  }
+}
--- a/app/composables/usePieces.ts
+++ b/app/composables/usePieces.ts
@@ -2,45 +2,72 @@ import { ref } from 'vue'
 import { useToast } from './useToast'
 import { useApi } from './useApi'
 import { buildConstructeurRequestPayload, uniqueConstructeurIds } from '~/shared/constructeurUtils'
-import { useConstructeurs } from './useConstructeurs'
+import { useConstructeurs, type Constructeur } from './useConstructeurs'
 import { extractRelationId, normalizeRelationIds } from '~/shared/apiRelations'
+import { extractCollection } from '~/shared/utils/apiHelpers'

-const pieces = ref([])
-const total = ref(0)
-const loading = ref(false)
-
-const extractCollection = (payload) => {
-  if (Array.isArray(payload)) {
-    return payload
-  }
-  if (Array.isArray(payload?.member)) {
-    return payload.member
-  }
-  if (Array.isArray(payload?.['hydra:member'])) {
-    return payload['hydra:member']
-  }
-  if (Array.isArray(payload?.data)) {
-    return payload.data
-  }
-  return []
+export interface Piece {
+  id: string
+  name: string
+  reference?: string | null
+  description?: string | null
+  typePieceId?: string | null
+  typePiece?: { id: string; name?: string } | null
+  productId?: string | null
+  productIds?: string[]
+  product?: { id: string; name?: string } | null
+  constructeurs?: Constructeur[]
+  constructeurIds?: string[]
+  documents?: unknown[]
+  createdAt?: string | null
+  updatedAt?: string | null
+  [key: string]: unknown
 }

-const extractTotal = (payload, fallbackLength) => {
-  if (typeof payload?.totalItems === 'number') {
-    return payload.totalItems
+interface PieceListResult {
+  success: boolean
+  data?: { items: Piece[]; total: number; page: number; itemsPerPage: number }
+  error?: string
+}
+
+interface PieceSingleResult {
+  success: boolean
+  data?: Piece
+  error?: string
+}
+
+interface LoadPiecesOptions {
+  search?: string
+  page?: number
+  itemsPerPage?: number
+  orderBy?: string
+  orderDir?: 'asc' | 'desc'
+  typeName?: string
+  force?: boolean
+}
+
+const pieces = ref<Piece[]>([])
+const total = ref(0)
+const loading = ref(false)
+const loaded = ref(false)
+
+const extractTotal = (payload: unknown, fallbackLength: number): number => {
+  const p = payload as Record<string, unknown> | null
+  if (typeof p?.totalItems === 'number') {
+    return p.totalItems
  }
-  if (typeof payload?.['hydra:totalItems'] === 'number') {
-    return payload['hydra:totalItems']
+  if (typeof p?.['hydra:totalItems'] === 'number') {
+    return p['hydra:totalItems']
  }
  return fallbackLength
 }

-export function usePieces () {
-  const { showSuccess, showError, showInfo } = useToast()
+export function usePieces() {
+  const { showSuccess } = useToast()
  const { get, post, patch, delete: del } = useApi()
  const { ensureConstructeurs } = useConstructeurs()

-  const withResolvedConstructeurs = async (piece) => {
+  const withResolvedConstructeurs = async (piece: Piece): Promise<Piece> => {
    if (!piece || typeof piece !== 'object') {
      return piece
    }
@@ -68,12 +95,11 @@ export function usePieces () {
    const ids = uniqueConstructeurIds(
      piece.constructeurIds,
      piece.constructeurs,
-      piece.constructeur,
    )
    const hasResolvedConstructeurs =
-      Array.isArray(piece.constructeurs)
-      && piece.constructeurs.length > 0
-      && piece.constructeurs.every((item) => item && typeof item === 'object')
+      Array.isArray(piece.constructeurs) &&
+      piece.constructeurs.length > 0 &&
+      piece.constructeurs.every((item) => item && typeof item === 'object')

    if (ids.length && !hasResolvedConstructeurs) {
      const resolved = await ensureConstructeurs(ids)
@@ -85,36 +111,46 @@ export function usePieces () {
    return piece
  }

-  /**
-   * Load pieces with pagination and search support
-   * @param {Object} options - Query options
-   * @param {string} [options.search] - Search term for name/reference
-   * @param {number} [options.page=1] - Current page (1-based)
-   * @param {number} [options.itemsPerPage=30] - Items per page
-   * @param {string} [options.orderBy='name'] - Field to order by
-   * @param {string} [options.orderDir='asc'] - Order direction (asc/desc)
-   */
-  const loadPieces = async (options = {}) => {
+  const loadPieces = async (options: LoadPiecesOptions = {}): Promise<PieceListResult> => {
+    const {
+      search = '',
+      page = 1,
+      itemsPerPage = 30,
+      orderBy = 'name',
+      orderDir = 'asc',
+      typeName,
+      force = false,
+    } = options
+
+    if (!force && loaded.value && !search && !typeName && page === 1) {
+      return {
+        success: true,
+        data: { items: pieces.value, total: total.value, page, itemsPerPage },
+      }
+    }
+
+    if (loading.value) {
+      return {
+        success: true,
+        data: { items: pieces.value, total: total.value, page, itemsPerPage },
+      }
+    }
+
    loading.value = true
    try {
-      const {
-        search = '',
-        page = 1,
-        itemsPerPage = 30,
-        orderBy = 'name',
-        orderDir = 'asc'
-      } = options

      const params = new URLSearchParams()
      params.set('itemsPerPage', String(itemsPerPage))
      params.set('page', String(page))

      if (search && search.trim()) {
-        // API Platform uses property filters
        params.set('name', search.trim())
      }

-      // API Platform OrderFilter syntax: order[field]=direction
+      if (typeName && typeName.trim()) {
+        params.set('typePiece.name', typeName.trim())
+      }
+
      params.set(`order[${orderBy}]`, orderDir)

      const result = await get(`/pieces?${params.toString()}`)
@@ -123,85 +159,91 @@ export function usePieces () {
        const enrichedItems = await Promise.all(items.map((item) => withResolvedConstructeurs(item)))
        pieces.value = enrichedItems
        total.value = extractTotal(result.data, items.length)
+        loaded.value = true
        return {
          success: true,
          data: {
            items: enrichedItems,
            total: total.value,
            page,
-            itemsPerPage
-          }
+            itemsPerPage,
+          },
        }
      }
-      return result
+      return result as PieceListResult
    } catch (error) {
      console.error('Erreur lors du chargement des pièces:', error)
-      return { success: false, error: error.message }
+      return { success: false, error: (error as Error).message }
    } finally {
      loading.value = false
    }
  }

-  const createPiece = async (pieceData) => {
+  const createPiece = async (pieceData: Partial<Piece>): Promise<PieceSingleResult> => {
    loading.value = true
    try {
      const normalizedPayload = normalizeRelationIds(buildConstructeurRequestPayload(pieceData))
      const result = await post('/pieces', normalizedPayload)
-      if (result.success) {
-        const enriched = await withResolvedConstructeurs(result.data)
+      if (result.success && result.data) {
+        const enriched = await withResolvedConstructeurs(result.data as Piece)
        pieces.value.unshift(enriched)
        total.value += 1
-        const displayName = result.data?.name
-          || pieceData?.definition?.name
-          || pieceData?.name
-          || 'Pièce'
+        const definition = (pieceData as Record<string, unknown>)?.definition as Record<string, unknown> | undefined
+        const displayName =
+          (result.data as Piece)?.name ||
+          (definition?.name as string | undefined) ||
+          pieceData?.name ||
+          'Pièce'
        showSuccess(`Pièce "${displayName}" créée avec succès`)
+        return { success: true, data: enriched }
      }
-      return result
+      return { success: false, error: result.error }
    } catch (error) {
      console.error('Erreur lors de la création de la pièce:', error)
-      return { success: false, error: error.message }
+      return { success: false, error: (error as Error).message }
    } finally {
      loading.value = false
    }
  }

-  const updatePieceData = async (id, pieceData) => {
+  const updatePieceData = async (id: string, pieceData: Partial<Piece>): Promise<PieceSingleResult> => {
    loading.value = true
    try {
      const normalizedPayload = normalizeRelationIds(buildConstructeurRequestPayload(pieceData))
      const result = await patch(`/pieces/${id}`, normalizedPayload)
-      if (result.success) {
-        const updated = await withResolvedConstructeurs(result.data)
-        const index = pieces.value.findIndex(piece => piece.id === id)
+      if (result.success && result.data) {
+        const updated = await withResolvedConstructeurs(result.data as Piece)
+        const index = pieces.value.findIndex((piece) => piece.id === id)
        if (index !== -1) {
          pieces.value[index] = updated
        }
        showSuccess(`Pièce "${updated?.name || pieceData.name || ''}" mise à jour avec succès`)
+        return { success: true, data: updated }
      }
-      return result
+      return { success: false, error: result.error }
    } catch (error) {
      console.error('Erreur lors de la mise à jour de la pièce:', error)
-      return { success: false, error: error.message }
+      return { success: false, error: (error as Error).message }
    } finally {
      loading.value = false
    }
  }

-  const deletePiece = async (id) => {
+  const deletePiece = async (id: string): Promise<PieceSingleResult> => {
    loading.value = true
    try {
      const result = await del(`/pieces/${id}`)
      if (result.success) {
-        const deletedPiece = pieces.value.find(piece => piece.id === id)
-        pieces.value = pieces.value.filter(piece => piece.id !== id)
+        const deletedPiece = pieces.value.find((piece) => piece.id === id)
+        pieces.value = pieces.value.filter((piece) => piece.id !== id)
        total.value = Math.max(0, total.value - 1)
        showSuccess(`Pièce "${deletedPiece?.name || 'inconnu'}" supprimée avec succès`)
+        return { success: true }
      }
-      return result
+      return { success: false, error: result.error }
    } catch (error) {
      console.error('Erreur lors de la suppression de la pièce:', error)
-      return { success: false, error: error.message }
+      return { success: false, error: (error as Error).message }
    } finally {
      loading.value = false
    }
@@ -210,15 +252,23 @@ export function usePieces () {
  const getPieces = () => pieces.value
  const isLoading = () => loading.value

+  const clearPiecesCache = () => {
+    pieces.value = []
+    total.value = 0
+    loaded.value = false
+  }
+
  return {
    pieces,
    total,
    loading,
+    loaded,
    loadPieces,
    createPiece,
    updatePiece: updatePieceData,
    deletePiece,
    getPieces,
-    isLoading
+    isLoading,
+    clearPiecesCache,
  }
 }
--- a/app/composables/useProductHistory.ts
+++ b/app/composables/useProductHistory.ts
@@ -0,0 +1,12 @@
+/**
+ * Backward-compatible wrapper around useEntityHistory.
+ * Real logic lives in useEntityHistory.ts.
+ */
+import { useEntityHistory, type EntityHistoryActor, type EntityHistoryEntry } from './useEntityHistory'
+
+export type ProductHistoryActor = EntityHistoryActor
+export type ProductHistoryEntry = EntityHistoryEntry
+
+export function useProductHistory() {
+  return useEntityHistory('product')
+}
--- a/app/composables/useProductTypes.js
+++ b/app/composables/useProductTypes.js
@@ -1,132 +0,0 @@
-import { ref } from 'vue'
-import { useToast } from './useToast'
-import { listModelTypes, createModelType, updateModelType, deleteModelType } from '~/services/modelTypes'
-
-const productTypes = ref([])
-const loadingProductTypes = ref(false)
-
-export function useProductTypes () {
-  const { showSuccess, showError } = useToast()
-
-  const generateCodeFromName = (name) => {
-    return (name || '')
-      .normalize('NFD')
-      .replace(/[\u0300-\u036F]/g, '')
-      .toLowerCase()
-      .replace(/[^a-z0-9]+/g, '-')
-      .replace(/^-+|-+$/g, '')
-      .replace(/-+/g, '-') || 'type'
-  }
-
-  const loadProductTypes = async () => {
-    loadingProductTypes.value = true
-    try {
-      const data = await listModelTypes({
-        category: 'PRODUCT',
-        sort: 'name',
-        dir: 'asc',
-        limit: 200,
-      })
-
-      productTypes.value = data.items.map(item => ({
-        ...item,
-        description: item.description ?? item.notes ?? null,
-      }))
-
-      return { success: true, data: productTypes.value }
-    } catch (error) {
-      const message = error?.message || 'Erreur inconnue'
-      showError(`Impossible de charger les types de produit: ${message}`)
-      return { success: false, error: message }
-    } finally {
-      loadingProductTypes.value = false
-    }
-  }
-
-  const createProductType = async (payload) => {
-    loadingProductTypes.value = true
-    try {
-      const data = await createModelType({
-        name: payload.name,
-        code: payload.code || generateCodeFromName(payload.name),
-        category: 'PRODUCT',
-        notes: payload.description ?? payload.notes,
-        description: payload.description ?? null,
-        structure: payload.structure,
-      })
-
-      const normalized = {
-        ...data,
-        description: data.description ?? data.notes ?? null,
-      }
-
-      productTypes.value.push(normalized)
-      showSuccess(`Type de produit "${data.name}" créé`)
-
-      return { success: true, data: normalized }
-    } catch (error) {
-      const message = error?.data?.message || error?.message || 'Erreur inconnue'
-      showError(`Erreur lors de la création du type de produit: ${message}`)
-      return { success: false, error: message }
-    } finally {
-      loadingProductTypes.value = false
-    }
-  }
-
-  const updateProductType = async (id, payload) => {
-    loadingProductTypes.value = true
-    try {
-      const data = await updateModelType(id, {
-        name: payload.name,
-        description: payload.description,
-        notes: payload.notes,
-        code: payload.code,
-        structure: payload.structure,
-      })
-
-      const normalized = {
-        ...data,
-        description: data.description ?? data.notes ?? null,
-      }
-
-      const index = productTypes.value.findIndex(type => type.id === id)
-      if (index !== -1) {
-        productTypes.value[index] = normalized
-      }
-      showSuccess(`Type de produit "${data.name}" mis à jour`)
-
-      return { success: true, data: normalized }
-    } catch (error) {
-      const message = error?.data?.message || error?.message || 'Erreur inconnue'
-      showError(`Erreur lors de la mise à jour du type de produit: ${message}`)
-      return { success: false, error: message }
-    } finally {
-      loadingProductTypes.value = false
-    }
-  }
-
-  const deleteProductType = async (id) => {
-    loadingProductTypes.value = true
-    try {
-      await deleteModelType(id)
-      productTypes.value = productTypes.value.filter(type => type.id !== id)
-      showSuccess('Type de produit supprimé')
-      return { success: true }
-    } catch (error) {
-      const message = error?.data?.message || error?.message || 'Erreur inconnue'
-      showError(`Erreur lors de la suppression du type de produit: ${message}`)
-      return { success: false, error: message }
-    } finally {
-      loadingProductTypes.value = false
-    }
-  }
-
-  return {
-    productTypes,
-    loadingProductTypes,
-    loadProductTypes,
-    createProductType,
-    updateProductType,
-    deleteProductType,
-  }
-}
--- a/app/composables/useProductTypes.ts
+++ b/app/composables/useProductTypes.ts
@@ -0,0 +1,27 @@
+/**
+ * Backward-compatible wrapper around useEntityTypes.
+ * Preserves the original API surface (renamed fields) so consumers need no changes.
+ */
+import { useEntityTypes, type EntityType } from './useEntityTypes'
+import type { ProductModelStructure } from '~/shared/types/inventory'
+import type { Ref } from 'vue'
+
+export interface ProductType extends EntityType {
+  structure: ProductModelStructure | null
+}
+
+export function useProductTypes() {
+  const { types, loading, loadTypes, createType, updateType, deleteType } = useEntityTypes({
+    category: 'PRODUCT',
+    label: 'produit',
+  })
+
+  return {
+    productTypes: types as Ref<ProductType[]>,
+    loadingProductTypes: loading,
+    loadProductTypes: loadTypes,
+    createProductType: createType,
+    updateProductType: updateType,
+    deleteProductType: deleteType,
+  }
+}
--- a/app/composables/useProducts.ts
+++ b/app/composables/useProducts.ts
@@ -1,17 +1,56 @@
 import { ref } from 'vue'
 import { useToast } from './useToast'
 import { useApi } from './useApi'
+import { humanizeError } from '~/shared/utils/errorMessages'
 import { buildConstructeurRequestPayload, uniqueConstructeurIds } from '~/shared/constructeurUtils'
-import { useConstructeurs } from './useConstructeurs'
+import { useConstructeurs, type Constructeur } from './useConstructeurs'
 import { extractRelationId, normalizeRelationIds } from '~/shared/apiRelations'
+import { extractCollection } from '~/shared/utils/apiHelpers'

-const products = ref([])
+export interface Product {
+  id: string
+  name: string
+  reference?: string | null
+  typeProductId?: string | null
+  typeProduct?: { id: string; name?: string } | null
+  constructeurs?: Constructeur[]
+  constructeurIds?: string[]
+  supplierPrice?: number | null
+  createdAt?: string | null
+  updatedAt?: string | null
+  documents?: unknown[]
+  [key: string]: unknown
+}
+
+interface ProductListResult {
+  success: boolean
+  data?: { items: Product[]; total: number; page: number; itemsPerPage: number }
+  error?: string
+}
+
+interface ProductSingleResult {
+  success: boolean
+  data?: Product
+  error?: string
+}
+
+interface LoadProductsOptions {
+  search?: string
+  page?: number
+  itemsPerPage?: number
+  orderBy?: string
+  orderDir?: 'asc' | 'desc'
+  typeName?: string
+  force?: boolean
+}
+
+const products = ref<Product[]>([])
 const total = ref(0)
 const loading = ref(false)
 const loaded = ref(false)
-const error = ref(null)
+const error = ref<string | null>(null)

-const replaceInCache = (item) => {
+const replaceInCache = (item: Product): boolean => {
  if (!item?.id) {
    return false
  }
@@ -26,38 +65,23 @@ const replaceInCache = (item) => {
  return false
 }

-const extractCollection = (payload) => {
-  if (Array.isArray(payload)) {
-    return payload
+const extractTotal = (payload: unknown, fallbackLength: number): number => {
+  const p = payload as Record<string, unknown> | null
+  if (typeof p?.totalItems === 'number') {
+    return p.totalItems
  }
-  if (Array.isArray(payload?.member)) {
-    return payload.member
-  }
-  if (Array.isArray(payload?.['hydra:member'])) {
-    return payload['hydra:member']
-  }
-  if (Array.isArray(payload?.data)) {
-    return payload.data
-  }
-  return []
-}
-
-const extractTotal = (payload, fallbackLength) => {
-  if (typeof payload?.totalItems === 'number') {
-    return payload.totalItems
-  }
-  if (typeof payload?.['hydra:totalItems'] === 'number') {
-    return payload['hydra:totalItems']
+  if (typeof p?.['hydra:totalItems'] === 'number') {
+    return p['hydra:totalItems']
  }
  return fallbackLength
 }

-export function useProducts () {
+export function useProducts() {
  const { showError } = useToast()
  const { get, post, patch, delete: del } = useApi()
  const { ensureConstructeurs } = useConstructeurs()

-  const withResolvedConstructeurs = async (product) => {
+  const withResolvedConstructeurs = async (product: Product): Promise<Product> => {
    if (!product || typeof product !== 'object') {
      return product
    }
@@ -70,12 +94,11 @@ export function useProducts () {
    const ids = uniqueConstructeurIds(
      product.constructeurIds,
      product.constructeurs,
-      product.constructeur,
    )
    const hasResolvedConstructeurs =
-      Array.isArray(product.constructeurs)
-      && product.constructeurs.length > 0
-      && product.constructeurs.every((item) => item && typeof item === 'object')
+      Array.isArray(product.constructeurs) &&
+      product.constructeurs.length > 0 &&
+      product.constructeurs.every((item) => item && typeof item === 'object')

    if (ids.length && !hasResolvedConstructeurs) {
      const resolved = await ensureConstructeurs(ids)
@@ -87,26 +110,24 @@ export function useProducts () {
    return product
  }

-  /**
-   * Load products with pagination and search support
-   * @param {Object} options - Query options
-   * @param {string} [options.search] - Search term for name/reference
-   * @param {number} [options.page=1] - Current page (1-based)
-   * @param {number} [options.itemsPerPage=30] - Items per page
-   * @param {string} [options.orderBy='name'] - Field to order by
-   * @param {string} [options.orderDir='asc'] - Order direction (asc/desc)
-   * @param {boolean} [options.force=false] - Force reload even if already loaded
-   */
-  const loadProducts = async (options = {}) => {
+  const loadProducts = async (options: LoadProductsOptions = {}): Promise<ProductListResult> => {
    const {
      search = '',
      page = 1,
      itemsPerPage = 30,
      orderBy = 'name',
      orderDir = 'asc',
-      force = false
+      typeName,
+      force = false,
    } = options

+    if (!force && loaded.value && !search && !typeName && page === 1) {
+      return {
+        success: true,
+        data: { items: products.value, total: total.value, page, itemsPerPage },
+      }
+    }
+
    if (loading.value) {
      return {
        success: true,
@@ -125,6 +146,10 @@ export function useProducts () {
        params.set('name', search.trim())
      }

+      if (typeName && typeName.trim()) {
+        params.set('typeProduct.name', typeName.trim())
+      }
+
      params.set(`order[${orderBy}]`, orderDir)

      const result = await get(`/products?${params.toString()}`)
@@ -140,104 +165,106 @@ export function useProducts () {
            items: enrichedItems,
            total: total.value,
            page,
-            itemsPerPage
-          }
+            itemsPerPage,
+          },
        }
      } else if (result.error) {
        error.value = result.error
        showError(`Impossible de charger les produits: ${result.error}`)
      }
-      return result
+      return result as ProductListResult
    } catch (err) {
      console.error('Erreur lors du chargement des produits:', err)
-      const message = err?.message ?? 'Erreur inconnue'
+      const message = humanizeError((err as Error)?.message)
      error.value = message
-      showError(`Impossible de charger les produits: ${message}`)
+      showError(`Impossible de charger les produits.`)
      return { success: false, error: message }
    } finally {
      loading.value = false
    }
  }

-  const createProduct = async (payload) => {
+  const createProduct = async (payload: Partial<Product>): Promise<ProductSingleResult> => {
    const normalizedPayload = normalizeRelationIds(buildConstructeurRequestPayload(payload))
    loading.value = true
    error.value = null
    try {
      const result = await post('/products', normalizedPayload)
      if (result.success && result.data) {
-        const enriched = await withResolvedConstructeurs(result.data)
+        const enriched = await withResolvedConstructeurs(result.data as Product)
        const added = replaceInCache(enriched)
        if (added) {
          total.value += 1
        }
+        return { success: true, data: enriched }
      } else if (result.error) {
        error.value = result.error
        showError(result.error)
      }
-      return result
+      return { success: false, error: result.error }
    } catch (err) {
      console.error('Erreur lors de la création du produit:', err)
-      const message = err?.message ?? 'Erreur inconnue'
+      const message = humanizeError((err as Error)?.message)
      error.value = message
-      showError(message)
+      showError('Impossible de créer le produit.')
      return { success: false, error: message }
    } finally {
      loading.value = false
    }
  }

-  const updateProduct = async (id, payload) => {
+  const updateProduct = async (id: string, payload: Partial<Product>): Promise<ProductSingleResult> => {
    const normalizedPayload = normalizeRelationIds(buildConstructeurRequestPayload(payload))
    loading.value = true
    error.value = null
    try {
      const result = await patch(`/products/${id}`, normalizedPayload)
      if (result.success && result.data) {
-        const enriched = await withResolvedConstructeurs(result.data)
+        const enriched = await withResolvedConstructeurs(result.data as Product)
        replaceInCache(enriched)
+        return { success: true, data: enriched }
      } else if (result.error) {
        error.value = result.error
        showError(result.error)
      }
-      return result
+      return { success: false, error: result.error }
    } catch (err) {
      console.error('Erreur lors de la mise à jour du produit:', err)
-      const message = err?.message ?? 'Erreur inconnue'
+      const message = humanizeError((err as Error)?.message)
      error.value = message
-      showError(message)
+      showError('Impossible de mettre à jour le produit.')
      return { success: false, error: message }
    } finally {
      loading.value = false
    }
  }

-  const deleteProduct = async (id) => {
+  const deleteProduct = async (id: string): Promise<ProductSingleResult> => {
    loading.value = true
    error.value = null
    try {
      const result = await del(`/products/${id}`)
      if (result.success) {
-        const removed = products.value.find((product) => product.id === id)
        products.value = products.value.filter((product) => product.id !== id)
        total.value = Math.max(0, total.value - 1)
+        return { success: true }
      } else if (result.error) {
        error.value = result.error
        showError(result.error)
      }
-      return result
+      return { success: false, error: result.error }
    } catch (err) {
      console.error('Erreur lors de la suppression du produit:', err)
-      const message = err?.message ?? 'Erreur inconnue'
+      const message = humanizeError((err as Error)?.message)
      error.value = message
-      showError(message)
+      showError('Impossible de supprimer le produit.')
      return { success: false, error: message }
    } finally {
      loading.value = false
    }
  }

-  const getProduct = async (id, options = {}) => {
+  const getProduct = async (id: string, options: { force?: boolean } = {}): Promise<ProductSingleResult> => {
    const shouldForce = !!options.force
    if (!shouldForce) {
      const cached = products.value.find((product) => product.id === id)
@@ -249,14 +276,14 @@ export function useProducts () {
    try {
      const result = await get(`/products/${id}`)
      if (result.success && result.data) {
-        const enriched = await withResolvedConstructeurs(result.data)
+        const enriched = await withResolvedConstructeurs(result.data as Product)
        replaceInCache(enriched)
        return { success: true, data: enriched }
      }
-      return result
+      return { success: false, error: result.error }
    } catch (err) {
      console.error('Erreur lors du chargement du produit:', err)
-      const message = err?.message ?? 'Erreur inconnue'
+      const message = (err as Error)?.message ?? 'Erreur inconnue'
      return { success: false, error: message }
    }
  }
--- a/app/composables/useProfileSession.js
+++ b/app/composables/useProfileSession.js
@@ -1,84 +0,0 @@
-import { useState, useRequestHeaders, useRuntimeConfig } from '#imports'
-
-const buildUrl = (path) => {
-  const config = useRuntimeConfig()
-  const baseUrl = process.server
-    ? (config.apiBaseUrl || config.public.apiBaseUrl || '')
-    : (config.public.apiBaseUrl || '')
-  const base = baseUrl.replace(/\/$/, '')
-  return `${base}${path}`
-}
-
-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 }
-    const headers = useRequestHeaders(['cookie'])
-    return headers?.cookie ? { cookie: headers.cookie } : undefined
-  }
-
-  const fetchCurrentProfile = async () => {
-    loading.value = true
-    try {
-      activeProfile.value = await $fetch(buildUrl('/session/profile'), {
-        method: 'GET',
-        credentials: 'include',
-        headers: getSessionHeaders()
-      })
-    } catch (error) {
-      if (error?.status === 401) {
-        activeProfile.value = null
-      } else {
-        console.error('Erreur lors du chargement du profil actif', error)
-        activeProfile.value = null
-      }
-    } finally {
-      sessionLoaded.value = true
-      loading.value = false
-    }
-    return activeProfile.value
-  }
-
-  const ensureSession = () => {
-    if (!sessionLoaded.value) {
-      return fetchCurrentProfile()
-    }
-    return Promise.resolve(activeProfile.value)
-  }
-
-  const activateProfile = async (profileId) => {
-    await $fetch(buildUrl('/session/profile'), {
-      method: 'POST',
-      credentials: 'include',
-      body: { profileId },
-      headers: getSessionHeaders()
-    })
-    await fetchCurrentProfile()
-  }
-
-  const logout = async () => {
-    try {
-      await $fetch(buildUrl('/session/profile'), {
-        method: 'DELETE',
-        credentials: 'include',
-        headers: getSessionHeaders()
-      })
-    } finally {
-      activeProfile.value = null
-      sessionLoaded.value = true
-    }
-  }
-
-  return {
-    activeProfile,
-    loading,
-    sessionLoaded,
-    ensureSession,
-    fetchCurrentProfile,
-    activateProfile,
-    logout
-  }
-}
--- a/app/composables/useProfileSession.ts
+++ b/app/composables/useProfileSession.ts
@@ -0,0 +1,78 @@
+import { useState, useRuntimeConfig } from '#imports'
+import type { Profile } from './useProfiles'
+
+const buildUrl = (path: string): string => {
+  const config = useRuntimeConfig()
+  const base = ((config.public.apiBaseUrl as string) || '').replace(/\/$/, '')
+  return `${base}${path}`
+}
+
+export function useProfileSession() {
+  const activeProfile = useState<Profile | null>('profileSession:active', () => null)
+  const sessionLoaded = useState<boolean>('profileSession:loaded', () => false)
+  const loading = useState<boolean>('profileSession:loading', () => false)
+
+  const fetchCurrentProfile = async (): Promise<Profile | null> => {
+    loading.value = true
+    try {
+      activeProfile.value = await $fetch<Profile>(buildUrl('/session/profile'), {
+        method: 'GET',
+        credentials: 'include',
+      })
+    } catch (error) {
+      const err = error as { status?: number }
+      if (err?.status === 401) {
+        activeProfile.value = null
+      } else {
+        console.error('Erreur lors du chargement du profil actif', error)
+        activeProfile.value = null
+      }
+    } finally {
+      sessionLoaded.value = true
+      loading.value = false
+    }
+    return activeProfile.value
+  }
+
+  const ensureSession = (): Promise<Profile | null> => {
+    if (!sessionLoaded.value) {
+      return fetchCurrentProfile()
+    }
+    return Promise.resolve(activeProfile.value)
+  }
+
+  const activateProfile = async (profileId: string, password?: string): Promise<void> => {
+    const body: Record<string, string> = { profileId }
+    if (password) {
+      body.password = password
+    }
+    await $fetch(buildUrl('/session/profile'), {
+      method: 'POST',
+      credentials: 'include',
+      body,
+    })
+    await fetchCurrentProfile()
+  }
+
+  const logout = async (): Promise<void> => {
+    try {
+      await $fetch(buildUrl('/session/profile'), {
+        method: 'DELETE',
+        credentials: 'include',
+      })
+    } finally {
+      activeProfile.value = null
+      sessionLoaded.value = true
+    }
+  }
+
+  return {
+    activeProfile,
+    loading,
+    sessionLoaded,
+    ensureSession,
+    fetchCurrentProfile,
+    activateProfile,
+    logout,
+  }
+}
--- a/app/composables/useProfiles.js
+++ b/app/composables/useProfiles.js
@@ -1,67 +0,0 @@
-import { useState, useRequestHeaders, useRuntimeConfig } from '#imports'
-
-const buildUrl = (path) => {
-  const config = useRuntimeConfig()
-  const base = config.public.apiBaseUrl?.replace(/\/$/, '') || ''
-  return `${base}${path}`
-}
-
-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 }
-    const headers = useRequestHeaders(['cookie'])
-    return headers?.cookie ? { cookie: headers.cookie } : undefined
-  }
-
-  const fetchProfiles = async () => {
-    loadingProfiles.value = true
-    try {
-      profiles.value = await $fetch(buildUrl('/session/profiles'), {
-        method: 'GET',
-        credentials: 'include',
-        headers: getSessionHeaders()
-      })
-      profilesLoaded.value = true
-    } catch (error) {
-      console.error('Erreur lors du chargement des profils', error)
-      profiles.value = []
-      profilesLoaded.value = false
-    } finally {
-      loadingProfiles.value = false
-    }
-    return profiles.value
-  }
-
-  const createProfile = async ({ firstName, lastName }) => {
-    const profile = await $fetch(buildUrl('/session/profiles'), {
-      method: 'POST',
-      credentials: 'include',
-      body: { firstName, lastName },
-      headers: getSessionHeaders()
-    })
-    await fetchProfiles()
-    return profile
-  }
-
-  const deleteProfile = async (profileId) => {
-    await $fetch(buildUrl(`/session/profiles/${profileId}`), {
-      method: 'DELETE',
-      credentials: 'include',
-      headers: getSessionHeaders()
-    })
-    await fetchProfiles()
-  }
-
-  return {
-    profiles,
-    loadingProfiles,
-    profilesLoaded,
-    fetchProfiles,
-    createProfile,
-    deleteProfile
-  }
-}
--- a/app/composables/useProfiles.ts
+++ b/app/composables/useProfiles.ts
@@ -0,0 +1,49 @@
+import { useState, useRuntimeConfig } from '#imports'
+
+export interface Profile {
+  id: string
+  firstName: string
+  lastName: string
+  email?: string | null
+  isActive?: boolean
+  hasPassword?: boolean
+  roles?: string[]
+  [key: string]: unknown
+}
+
+const buildUrl = (path: string): string => {
+  const config = useRuntimeConfig()
+  const base = (config.public.apiBaseUrl as string)?.replace(/\/$/, '') || ''
+  return `${base}${path}`
+}
+
+export function useProfiles() {
+  const profiles = useState<Profile[]>('profiles:list', () => [])
+  const loadingProfiles = useState<boolean>('profiles:loading', () => false)
+  const profilesLoaded = useState<boolean>('profiles:loaded', () => false)
+
+  const fetchProfiles = async (): Promise<Profile[]> => {
+    loadingProfiles.value = true
+    try {
+      profiles.value = await $fetch<Profile[]>(buildUrl('/session/profiles'), {
+        method: 'GET',
+        credentials: 'include',
+      })
+      profilesLoaded.value = true
+    } catch (error) {
+      console.error('Erreur lors du chargement des profils', error)
+      profiles.value = []
+      profilesLoaded.value = false
+    } finally {
+      loadingProfiles.value = false
+    }
+    return profiles.value
+  }
+
+  return {
+    profiles,
+    loadingProfiles,
+    profilesLoaded,
+    fetchProfiles,
+  }
+}
--- a/app/composables/useSiteManagement.ts
+++ b/app/composables/useSiteManagement.ts
@@ -2,7 +2,9 @@ import { computed, onMounted, reactive, ref, watch } from 'vue'
 import { navigateTo, useRoute } from '#imports'
 import { useSites } from '~/composables/useSites'
 import { useToast } from '~/composables/useToast'
+import { humanizeError } from '~/shared/utils/errorMessages'
 import { useDocuments } from '~/composables/useDocuments'
+import { useConfirm } from '~/composables/useConfirm'
 import { getFileIcon } from '~/utils/fileIcons'
 import { canPreviewDocument } from '~/utils/documentPreview'

@@ -22,6 +24,8 @@ type SiteDocument = {
  mimeType?: string
  size?: number
  path?: string
+  fileUrl?: string
+  downloadUrl?: string
 }

 type SiteWithDocuments = {
@@ -41,6 +45,7 @@ export function useSiteManagement() {
  const { showError, showSuccess } = useToast()
  const { sites, loading, loadSites, createSite, updateSite, deleteSite } = useSites()
  const { uploadDocuments, deleteDocument, loadDocumentsBySite } = useDocuments()
+  const { confirm: confirmDialog } = useConfirm()

  const showAddSiteModal = ref(false)
  const showEditSiteModal = ref(false)
@@ -132,7 +137,8 @@ export function useSiteManagement() {
    if (index !== -1) {
      sites.value[index] = {
        ...sites.value[index],
-        ...updated
+        ...updated,
+        id,
      }
    }
  }
@@ -166,8 +172,9 @@ export function useSiteManagement() {
      )
      uploadingDocuments.value = false

-      if (uploadResult.success) {
-        uploadedDocuments = uploadResult.data || []
+      if (uploadResult.success && uploadResult.data) {
+        const data = uploadResult.data
+        uploadedDocuments = (Array.isArray(data) ? data : [data]) as SiteDocument[]
        selectedFiles.value = []
      }
    }
@@ -205,17 +212,23 @@ export function useSiteManagement() {
  }

  const downloadDocument = (doc: SiteDocument) => {
-    if (!doc?.path) return
+    if (doc?.downloadUrl) {
+      window.open(doc.downloadUrl, '_blank')
+      return
+    }

-    if (doc.path.startsWith('data:')) {
+    const url = doc?.fileUrl || doc?.path
+    if (!url) return
+
+    if (url.startsWith('data:')) {
      const link = document.createElement('a')
-      link.href = doc.path
+      link.href = url
      link.download = doc.filename || doc.name || 'document'
      link.click()
      return
    }

-    window.open(doc.path, '_blank')
+    window.open(url, '_blank')
  }

  const openPreview = (doc: SiteDocument) => {
@@ -250,9 +263,9 @@ export function useSiteManagement() {

  const confirmDeleteSite = async (site: SiteWithDocuments) => {
    if (
-      !confirm(
-        `Êtes-vous sûr de vouloir supprimer le site "${site.name}" ? Cette action est irréversible.`
-      )
+      !await confirmDialog({
+        message: `Êtes-vous sûr de vouloir supprimer le site "${site.name}" ? Cette action est irréversible.`,
+      })
    ) {
      return
    }
@@ -262,10 +275,10 @@ export function useSiteManagement() {
      if (result.success) {
        showSuccess(`Site "${site.name}" supprimé avec succès`)
      } else {
-        showError(`Erreur lors de la suppression: ${result.error}`)
+        showError(`Impossible de supprimer le site : ${humanizeError(result.error)}`)
      }
    } catch (error: any) {
-      showError(`Erreur lors de la suppression: ${error.message}`)
+      showError(`Impossible de supprimer le site : ${humanizeError(error.message)}`)
    }
  }

--- a/app/composables/useSites.js
+++ b/app/composables/useSites.js
@@ -1,111 +0,0 @@
-import { ref } from 'vue'
-import { useToast } from './useToast'
-import { useApi } from './useApi'
-
-const sites = ref([])
-const loading = ref(false)
-
-export function useSites () {
-  const { showSuccess, showInfo } = useToast()
-  const { get, post, patch, delete: del } = useApi()
-
-  const loadSites = async () => {
-    loading.value = true
-    try {
-      const result = await get('/sites')
-      console.log('sites api result', result)
-
-      if (result.success) {
-        const collection = Array.isArray(result.data)
-          ? result.data
-          : Array.isArray(result.data?.member)
-            ? result.data.member
-            : Array.isArray(result.data?.['hydra:member'])
-              ? result.data['hydra:member']
-              : Array.isArray(result.data?.data)
-                ? result.data.data
-                : []
-        sites.value = collection
-        showInfo(`Chargement de ${collection.length} site(s) réussi`)
-      }
-    } catch (error) {
-      console.error('Erreur lors du chargement des sites:', error)
-    } finally {
-      loading.value = false
-    }
-  }
-
-  const createSite = async (siteData) => {
-    loading.value = true
-    try {
-      const result = await post('/sites', siteData)
-      if (result.success) {
-        sites.value.push(result.data)
-        showSuccess(`Site "${siteData.name}" créé avec succès`)
-      }
-      return result
-    } catch (error) {
-      console.error('Erreur lors de la création du site:', error)
-      return { success: false, error: error.message }
-    } finally {
-      loading.value = false
-    }
-  }
-
-  const updateSite = async (id, siteData) => {
-    loading.value = true
-    try {
-      const result = await patch(`/sites/${id}`, siteData)
-      if (result.success) {
-        const index = sites.value.findIndex(site => site.id === id)
-        if (index !== -1) {
-          sites.value[index] = result.data
-        }
-        showSuccess(`Site "${siteData.name}" mis à jour avec succès`)
-      }
-      return result
-    } catch (error) {
-      console.error('Erreur lors de la mise à jour du site:', error)
-      return { success: false, error: error.message }
-    } finally {
-      loading.value = false
-    }
-  }
-
-  const deleteSite = async (id) => {
-    loading.value = true
-    try {
-      const result = await del(`/sites/${id}`)
-      if (result.success) {
-        const deletedSite = sites.value.find(site => site.id === id)
-        sites.value = sites.value.filter(site => site.id !== id)
-        showSuccess(`Site "${deletedSite?.name || 'inconnu'}" supprimé avec succès`)
-      }
-      return result
-    } catch (error) {
-      console.error('Erreur lors de la suppression du site:', error)
-      return { success: false, error: error.message }
-    } finally {
-      loading.value = false
-    }
-  }
-
-  const getSiteById = (id) => {
-    return sites.value.find(site => site.id === id)
-  }
-
-  const getSites = () => sites.value
-  const isLoading = () => loading.value
-
-  return {
-    sites,
-    loading,
-    loadSites,
-    createSite,
-    updateSite,
-    deleteSite,
-    getSiteById,
-    getSites,
-    isLoading
-  }
-}
--- a/app/composables/useSites.ts
+++ b/app/composables/useSites.ts
@@ -0,0 +1,123 @@
+import { ref } from 'vue'
+import { useToast } from './useToast'
+import { useApi } from './useApi'
+import { extractCollection } from '~/shared/utils/apiHelpers'
+
+export interface Site {
+  id: string
+  name?: string
+  contactName?: string
+  contactPhone?: string
+  contactAddress?: string
+  contactPostalCode?: string
+  contactCity?: string
+  machines?: unknown[]
+  documents?: unknown[]
+  [key: string]: unknown
+}
+
+interface SiteResult {
+  success: boolean
+  data?: Site
+  error?: string
+}
+
+const sites = ref<Site[]>([])
+const loading = ref(false)
+const loaded = ref(false)
+
+export function useSites() {
+  const { showSuccess } = useToast()
+  const { get, post, patch, delete: del } = useApi()
+
+  const loadSites = async (options: { force?: boolean } = {}): Promise<void> => {
+    if (!options.force && loaded.value) return
+    loading.value = true
+    try {
+      const result = await get('/sites')
+      if (result.success) {
+        const collection = extractCollection(result.data)
+        sites.value = collection
+        loaded.value = true
+      }
+    } catch (error) {
+      console.error('Erreur lors du chargement des sites:', error)
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const createSite = async (siteData: Partial<Site>): Promise<SiteResult> => {
+    loading.value = true
+    try {
+      const result = await post('/sites', siteData)
+      if (result.success && result.data) {
+        sites.value.push(result.data as Site)
+        showSuccess(`Site "${siteData.name}" créé avec succès`)
+      }
+      return result as SiteResult
+    } catch (error) {
+      console.error('Erreur lors de la création du site:', error)
+      return { success: false, error: (error as Error).message }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const updateSite = async (id: string, siteData: Partial<Site>): Promise<SiteResult> => {
+    loading.value = true
+    try {
+      const result = await patch(`/sites/${id}`, siteData)
+      if (result.success && result.data) {
+        const index = sites.value.findIndex((site) => site.id === id)
+        if (index !== -1) {
+          sites.value[index] = result.data as Site
+        }
+        showSuccess(`Site "${siteData.name}" mis à jour avec succès`)
+      }
+      return result as SiteResult
+    } catch (error) {
+      console.error('Erreur lors de la mise à jour du site:', error)
+      return { success: false, error: (error as Error).message }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const deleteSite = async (id: string): Promise<SiteResult> => {
+    loading.value = true
+    try {
+      const result = await del(`/sites/${id}`)
+      if (result.success) {
+        const deletedSite = sites.value.find((site) => site.id === id)
+        sites.value = sites.value.filter((site) => site.id !== id)
+        showSuccess(`Site "${deletedSite?.name || 'inconnu'}" supprimé avec succès`)
+      }
+      return result as SiteResult
+    } catch (error) {
+      console.error('Erreur lors de la suppression du site:', error)
+      return { success: false, error: (error as Error).message }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const getSiteById = (id: string): Site | undefined => {
+    return sites.value.find((site) => site.id === id)
+  }
+
+  const getSites = () => sites.value
+  const isLoading = () => loading.value
+
+  return {
+    sites,
+    loading,
+    loadSites,
+    createSite,
+    updateSite,
+    deleteSite,
+    getSiteById,
+    getSites,
+    isLoading,
+  }
+}
--- a/app/composables/useToast.js
+++ b/app/composables/useToast.js
@@ -1,71 +0,0 @@
-import { ref } from 'vue'
-
-const toasts = ref([])
-const MAX_TOASTS = 3
-let nextId = 1
-
-export function useToast () {
-  const showToast = (message, type = 'info', duration = 3500) => {
-    const id = nextId++
-    const toast = {
-      id,
-      message,
-      type,
-      visible: true
-    }
-
-    if (toasts.value.length >= MAX_TOASTS) {
-      toasts.value.shift()
-    }
-
-    toasts.value.push(toast)
-
-    // Auto-remove after duration
-    setTimeout(() => {
-      removeToast(id)
-    }, duration)
-
-    return id
-  }
-
-  const showSuccess = (message, duration = 5000) => {
-    return showToast(message, 'success', duration)
-  }
-
-  const showError = (message, duration = 5000) => {
-    return showToast(message, 'error', duration)
-  }
-
-  const showWarning = (message, duration = 6000) => {
-    return showToast(message, 'warning', duration)
-  }
-
-  const showInfo = (message, duration = 5000) => {
-    return showToast(message, 'info', duration)
-  }
-
-  const removeToast = (id) => {
-    const index = toasts.value.findIndex(toast => toast.id === id)
-    if (index !== -1) {
-      toasts.value[index].visible = false
-      setTimeout(() => {
-        toasts.value.splice(index, 1)
-      }, 300) // Animation duration
-    }
-  }
-
-  const clearAll = () => {
-    toasts.value = []
-  }
-
-  return {
-    toasts,
-    showToast,
-    showSuccess,
-    showError,
-    showWarning,
-    showInfo,
-    removeToast,
-    clearAll
-  }
-}
--- a/app/composables/useToast.ts
+++ b/app/composables/useToast.ts
@@ -0,0 +1,91 @@
+import { ref } from 'vue'
+
+export type ToastType = 'success' | 'error' | 'warning' | 'info'
+
+export interface Toast {
+  id: number
+  message: string
+  type: ToastType
+  visible: boolean
+}
+
+const toasts = ref<Toast[]>([])
+const MAX_TOASTS = 3
+let nextId = 1
+
+// Anti-doublon : ignore un toast identique affiché dans les 2 dernières secondes
+const recentMessages = new Map<string, number>()
+const DEDUP_WINDOW = 2000
+
+export function useToast() {
+  const showToast = (message: string, type: ToastType = 'info', duration = 3500): number => {
+    const dedupKey = `${type}::${message}`
+    const lastShown = recentMessages.get(dedupKey)
+    if (lastShown && Date.now() - lastShown < DEDUP_WINDOW) {
+      return -1
+    }
+    recentMessages.set(dedupKey, Date.now())
+
+    const id = nextId++
+    const toast: Toast = {
+      id,
+      message,
+      type,
+      visible: true,
+    }
+
+    if (toasts.value.length >= MAX_TOASTS) {
+      toasts.value.shift()
+    }
+
+    toasts.value.push(toast)
+
+    // Auto-remove after duration
+    setTimeout(() => {
+      removeToast(id)
+    }, duration)
+
+    return id
+  }
+
+  const showSuccess = (message: string, duration = 5000): number => {
+    return showToast(message, 'success', duration)
+  }
+
+  const showError = (message: string, duration = 5000): number => {
+    return showToast(message, 'error', duration)
+  }
+
+  const showWarning = (message: string, duration = 6000): number => {
+    return showToast(message, 'warning', duration)
+  }
+
+  const showInfo = (message: string, duration = 5000): number => {
+    return showToast(message, 'info', duration)
+  }
+
+  const removeToast = (id: number): void => {
+    const index = toasts.value.findIndex((toast) => toast.id === id)
+    if (index !== -1 && toasts.value[index]) {
+      toasts.value[index].visible = false
+      setTimeout(() => {
+        toasts.value.splice(index, 1)
+      }, 300) // Animation duration
+    }
+  }
+
+  const clearAll = (): void => {
+    toasts.value = []
+  }
+
+  return {
+    toasts,
+    showToast,
+    showSuccess,
+    showError,
+    showWarning,
+    showInfo,
+    removeToast,
+    clearAll,
+  }
+}
--- a/app/composables/useUrlState.ts
+++ b/app/composables/useUrlState.ts
@@ -0,0 +1,116 @@
+import { ref, watch, nextTick, type Ref } from 'vue'
+import { useRoute, useRouter } from '#imports'
+
+interface ParamDef<T extends string | number = string | number> {
+  default: T
+  type?: 'string' | 'number'
+  /** Debounce URL writes (ms). Default: 0 (immediate). */
+  debounce?: number
+}
+
+type ParamDefs = Record<string, ParamDef>
+
+type InferRef<D extends ParamDef> = D['default'] extends number ? Ref<number> : Ref<string>
+
+type StateRefs<T extends ParamDefs> = {
+  [K in keyof T]: InferRef<T[K]>
+}
+
+interface UseUrlStateOptions {
+  /** Called when state is restored from URL (back/forward navigation). */
+  onRestore?: () => void
+}
+
+export function useUrlState<T extends ParamDefs>(
+  params: T,
+  options?: UseUrlStateOptions,
+): StateRefs<T> {
+  const route = useRoute()
+  const router = useRouter()
+
+  const keys = Object.keys(params) as (keyof T & string)[]
+  const refs: Record<string, Ref<string | number>> = {}
+  const timers: Record<string, ReturnType<typeof setTimeout> | null> = {}
+
+  for (const key of keys) {
+    refs[key] = ref(parseValue(route.query[key], params[key]!))
+    timers[key] = null
+  }
+
+  let isProgrammatic = false
+
+  const buildQuery = (): Record<string, string> => {
+    const q: Record<string, string> = {}
+    for (const key of keys) {
+      const val = refs[key]!.value
+      if (val !== params[key]!.default) {
+        q[key] = String(val)
+      }
+    }
+    return q
+  }
+
+  const pushToUrl = () => {
+    if (isProgrammatic) return
+    isProgrammatic = true
+    const query = buildQuery()
+    router
+      .replace({ path: route.path, query })
+      .catch(() => {})
+      .finally(() => {
+        nextTick(() => {
+          isProgrammatic = false
+        })
+      })
+  }
+
+  for (const key of keys) {
+    const ms = params[key]!.debounce ?? 0
+    watch(refs[key]!, () => {
+      if (isProgrammatic) return
+      if (ms > 0) {
+        if (timers[key]) clearTimeout(timers[key]!)
+        timers[key] = setTimeout(pushToUrl, ms)
+      } else {
+        pushToUrl()
+      }
+    })
+  }
+
+  watch(
+    () => ({ ...route.query }),
+    (newQuery) => {
+      if (isProgrammatic) return
+      isProgrammatic = true
+      let changed = false
+      for (const key of keys) {
+        const parsed = parseValue(newQuery[key], params[key]!)
+        if (refs[key]!.value !== parsed) {
+          refs[key]!.value = parsed
+          changed = true
+        }
+      }
+      nextTick(() => {
+        isProgrammatic = false
+        if (changed && options?.onRestore) {
+          options.onRestore()
+        }
+      })
+    },
+  )
+
+  return refs as StateRefs<T>
+}
+
+function parseValue(
+  raw: unknown,
+  def: ParamDef,
+): string | number {
+  const str = typeof raw === 'string' ? raw : null
+  if (str === null) return def.default
+  if (def.type === 'number' || typeof def.default === 'number') {
+    const n = Number(str)
+    return Number.isFinite(n) ? n : def.default
+  }
+  return str
+}
--- a/app/middleware/profile.global.ts
+++ b/app/middleware/profile.global.ts
@@ -1,8 +1,7 @@
-import { useProfileSession } from "#imports";
+import { useProfileSession, usePermissions } from "#imports";

 export default defineNuxtRouteMiddleware(async (to) => {
-  const { ensureSession, fetchCurrentProfile, activeProfile } =
-    useProfileSession();
+  const { ensureSession, activeProfile } = useProfileSession();
  await ensureSession();

  const rawPath = to?.path ?? "";
@@ -14,11 +13,21 @@ export default defineNuxtRouteMiddleware(async (to) => {
    fullPath.startsWith("/profiles") ||
    routeName.startsWith("profiles");

-  if (process.client && !activeProfile.value) {
-    await fetchCurrentProfile();
-  }
-
-  if (process.client && !activeProfile.value && !isProfilesRoute) {
+  // Redirect to login if no active profile
+  if (!activeProfile.value && !isProfilesRoute) {
    return navigateTo("/profiles");
  }
+
+  // Permission checks
+  if (activeProfile.value) {
+    const { isAdmin } = usePermissions();
+
+    // Admin-only routes
+    if (normalizedPath.startsWith("/admin")) {
+      if (!isAdmin.value) {
+        return navigateTo("/");
+      }
+    }
+
+  }
 });
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Matthieu	32d03b480d	refactor(machines) : remove TypeMachine skeleton system, simplify machine creation - Remove TypeEdit*, TypeInfoDisplay, MachineSkeletonSummary, MachineCreatePreview components - Remove machine-skeleton pages and type pages - Remove useMachineTypesApi, useMachineSkeletonEditor, useMachineCreateSelections composables - Add AddEntityToMachineModal for direct entity linking - Update machine detail/create pages for direct custom fields - Fix SearchSelect, category display, and ipartial search filters Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-05 17:25:23 +01:00
Matthieu	6f1bac381d	refacto(tables) : composant DataTable global + migration de toutes les tables - Nouveau composant DataTable réutilisable avec tri par en-têtes, pagination, filtres colonnes - Nouveau composable useDataTable (sort/page/search/perPage/columnFilters + persistance URL) - Migration des 9 tables : constructeurs, comments, admin, pieces-catalog, component-catalog, product-catalog, documents, activity-log, ManagementView (catégories) - Filtres "Type de" server-side (ipartial) pour pièces, composants, produits Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-04 16:05:00 +01:00
Matthieu	89dc2e93b8	docs(readme) : comprehensive project documentation Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-04 10:45:32 +01:00
Matthieu	8f5f25b3e7	docs(readme) : replace default Nuxt template with project documentation Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-04 10:37:59 +01:00
Matthieu	c06c852493	chore : remove obsolete migration and refactoring docs Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-04 10:08:32 +01:00
Matthieu	41f5319b67	chore(changelog) : add v1.7.0 and v1.8.0 entries Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-04 10:00:18 +01:00
Matthieu	c7fd8328d6	fix(errors) : humanize backend error messages for end users Add centralized error translation layer (humanizeError) that converts raw Symfony/Doctrine/API Platform messages into user-friendly French. Fix useApi to extract errors from all backend response formats (violations, error, message, hydra:description, detail). Add toast deduplication to prevent double display. Replace error toast icon (X → CircleX) to distinguish from the dismiss button. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-04 09:48:51 +01:00
Matthieu	55e2a4fafe	fix(navbar) : reorder nav groups and add lucide icons - Reorder: Composants, Pieces, Produits (was Pieces, Produits, Composants) - Add icons to all nav links and dropdown groups - Dashboard, Factory, ClipboardList, Cpu, Puzzle, Package, Link Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-03 15:31:26 +01:00
Matthieu	e88ed5b8f2	feat(documents): migrate storage to filesystem, add server-side pagination - Replace Base64 data URIs with file-based storage served via dedicated endpoints - Add DocumentPreviewModal navigation, DocumentThumbnail fileUrl support - Refactor documents page with server-side pagination, search, sort and filters - Update all components to use fileUrl/downloadUrl instead of raw path - Add pagination composable support (total, page, itemsPerPage, attachmentFilter) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-03 15:17:59 +01:00
Matthieu	546cc37a09	feat(catalog): add description column with hover popover + skeleton edit guard - Add description column to pieces and component catalog tables - Show full text in a popover on hover for truncated descriptions - Block skeleton editing when machines are linked (warning alert) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-03 10:13:06 +01:00
Matthieu	efd0fbe407	feat(catalog) : add description textarea to piece and component forms Add description field (textarea) between name and reference/fournisseur on create and edit pages for both pieces and components. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-02 17:35:52 +01:00
Matthieu	607f84fc3d	fix(sites): remove toRefs shadowing causing [object Object] in site name field	2026-03-02 16:33:30 +01:00
Matthieu	a98ab8c275	feat(comments): add comment/ticket system across all entity pages Add CommentSection component for inline comments on entity detail pages (machines, pieces, composants, products, categories, skeleton types). Add dedicated /comments page with filters, pagination and clickable links. Add unresolved count badge on avatar and in profile dropdown. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-02 14:06:06 +01:00
Matthieu	e22463874c	fix(constructeurs): improve search filtering and duplicate prevention Switch ConstructeurSelect to client-side filtering instead of debounced API calls. Add duplicate name check before creating a new constructeur in both ConstructeurSelect and the constructeurs page. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-02 14:05:54 +01:00
Matthieu	256039264e	chore: update package-lock.json Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-02 10:02:13 +01:00
Matthieu	e459da7c20	fix(ui) : replace checkbox with toggle switch for boolean custom fields Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-02 09:56:51 +01:00
Matthieu	e84b5cf674	feat(ui) : display role badge in profile dropdown Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-02 09:42:05 +01:00
Matthieu	cc70fe2b29	feat(permissions) : add role-based UI guards and readonly mode for viewers - Add usePermissions composable (isAdmin, canEdit, canView) - Password-protected profile login with modal on profiles page - Disable all form fields for ROLE_VIEWER across edit/create pages - Show navigation buttons (Modifier/Consulter) for all roles, hide delete for viewers - Add readonly prop to ModelTypeForm for category pages - Disable modal fields (sites, constructeurs) for viewers - Guard /admin routes in middleware Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-26 13:36:42 +01:00
Matthieu	6bed715b7f	fix(machines): fix skeleton creation — load all items + atomic creation - Load composants/pieces/products with itemsPerPage: 200 instead of 30 (root cause: only first 30 items were available in creation dropdowns) - Rollback machine if skeleton PATCH fails (delete orphaned machine) - Initialize custom fields after successful machine creation Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-18 10:39:45 +01:00
Matthieu	dbf8c8856b	test(e2e) : add Playwright setup with product and category CRUD specs Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-13 09:07:23 +01:00
Matthieu	62127a33f5	chore(release) : update changelog for v1.6.1 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-12 14:51:13 +01:00
Matthieu	2fffe4a368	chore(release) : update changelog for v1.6.0 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-12 14:27:43 +01:00
Matthieu	c9054e5b4d	feat(categories): add bidirectional piece/component category conversion Add a "Convertir" button on piece and component category lists that allows converting an entire category (and all its items) between piece and component. Includes a modal with eligibility checks and blocker display. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-12 14:26:41 +01:00
Matthieu	5cab15422d	fix(documents) : exclude path from collection to prevent OOM, lazy-load on demand The path field contains base64 data URIs that can be several MB each. Loading 200 documents at once exceeded the 128MB PHP memory limit. Now the collection endpoint uses document:list group (without path) and the frontend fetches the full document on demand when the user clicks download or preview. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-11 17:16:15 +01:00
Matthieu	439db8117a	feat(changelog) : add changelog page accessible from footer version link Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-11 17:01:28 +01:00
Matthieu	675820532c	Merge branch 'develop' into master — v1.5.0	2026-02-11 16:50:44 +01:00
Matthieu	4edfc55c37	Merge branch 'fix/filtres-listes' into develop	2026-02-11 16:50:39 +01:00
Matthieu	480aaa24b2	feat(navigation) : preserve list state in URL and use browser history for back buttons Add useUrlState composable to sync page, search, sort and filter state with URL query params. Back/forward navigation now restores the exact list position. Replace hardcoded NuxtLink back buttons with router.back() across all create/edit pages. Fix documents attachment filter that checked non-existent ID fields instead of relation objects. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-11 16:48:40 +01:00
Matthieu	185af65519	fix(filters) : repair broken filters on catalog and document pages - modelTypes.ts: use API Platform OrderFilter format (order[field]=dir) and proper page param - product-catalog: load all products (itemsPerPage: 200) instead of default 30 - documents: load all documents (itemsPerPage: 200) instead of default 30 - useDocuments: support itemsPerPage option in loadDocuments/loadFromEndpoint - pieces-catalog + component-catalog: add force:true to bypass stale cache on sort/filter Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-11 15:32:54 +01:00
Matthieu	8fecf67a7f	fix(api): reduce itemsPerPage from 500 to 200 on bulk catalog loads Prevents memory exhaustion (OOM) on production server when loading pieces, products, and composants in the component edit page. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-11 11:10:52 +01:00
Matthieu	79d2df8bc6	perf(composables) : add smart cache to usePieces and useComposants Align with useProducts pattern: loaded flag, cache-first return, loading guard, and clearCache helper to avoid redundant API calls. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-10 09:18:42 +01:00
Matthieu	23da4ba4c7	style(theme) : apply Malio brand colors Primary #304998 (bleu Malio), base #FBFAFA (gris), accent #ED8521 (orange), secondary #A5ACD0 (lavande). Focus ring updated to match. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-10 09:06:20 +01:00
Matthieu	635b8f0461	feat(activity-log) : add global activity log page with filters and pagination New /activity-log page showing all audit entries across pieces, products and composants. Includes entity type and action filters, expandable diffs, clickable entity links and pagination. Navbar link added under Ressources liées. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-10 08:54:12 +01:00
Matthieu	bf74a50f57	feat(catalog) : make category types clickable in catalog pages Type columns in piece, component and product catalogs now link directly to the category edit page for quick access. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-10 08:54:07 +01:00
Matthieu	7c44778f25	fix(edit-pages): resolve custom field display race condition The init watcher destructured currentType/currentStructure before setting selectedTypeId, so the values were stale (null). This caused refreshCustomFieldInputs to receive null structure → empty definitions, permanently wiping custom field display on piece and component edit pages. Read selectedType.value / selectedTypeStructure.value after setting the ID so the computed is already updated. Also remove the guard on the piece selectedType watcher that prevented recovery. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-09 16:47:54 +01:00
Matthieu	9f7dd12b34	perf(edit-pages) : reduce blocking API calls on edit pages - Remove redundant getCustomFieldValuesByEntity() calls (use entity response) - Remove redundant refreshDocuments() from onMounted (docs already in entity) - Make loadHistory() non-blocking (fire-and-forget) - Defer bulk catalog loads on component edit (pieces/products/composants) - Use pieceTypes cache instead of separate getModelType() call on piece edit - Try embedded typeProduct from entity response on product edit Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-09 15:58:36 +01:00
Matthieu	67af3c9c46	feat: add API optimizations, cache invalidation and comprehensive test suite - Add abort controllers and request deduplication to composables - Add entity type cache invalidation on create/update/delete flows - Add 179 new tests (utilities, services, composables, components) - Fix Vue runtime warnings in structure editors Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-09 14:19:08 +01:00
Matthieu	634184c2be	test: configure Vitest and add 54 unit tests (F6.1, F6.2) Set up Vitest with happy-dom, mock Nuxt auto-imports via #imports alias. Add tests for: inventory-types validators (9), apiHelpers (10), modelUtils (18), useConfirm (8), useToast (9). All 54 tests pass. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-09 11:20:28 +01:00
Matthieu	6152848957	feat(ui): replace native confirm() with DaisyUI modal composable (F7.2) Create useConfirm composable (promise-based, singleton state) and ConfirmModal component. Replace all 10 confirm()/window.confirm() calls across 9 pages and 1 composable. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-09 11:20:13 +01:00
Matthieu	046f464378	refactor(layout): extract AppNavbar component and rewrite app.vue (F7.3) Extract 680-line navbar into LayoutAppNavbar component with useNavDropdown composable. app.vue reduced from 698 to 22 LOC. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-09 11:20:04 +01:00
Matthieu	8700c253cd	chore(lint): enable strict ESLint rules and fix unused-vars violations (F4.1) Enable no-console (warn, allow error), @typescript-eslint/no-unused-vars (warn, ignore _ prefix), and @typescript-eslint/no-explicit-any (warn). Fix all 26 no-unused-vars violations across 9 files. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-09 11:19:56 +01:00
Matthieu	519fa3a8f4	refactor(components): extract shared entity utilities and simplify item components (F1.3, F1.4) Extract 3 entity composables (useEntityCustomFields, useEntityDocuments, useEntityProductDisplay) and entityCustomFieldLogic utility shared across ComponentItem (1336→585 LOC) and PieceItem (1588→740 LOC). Improve type safety in edit/create pages with explicit casts. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-09 11:19:40 +01:00
Matthieu	e1594cab76	refactor(machine): decompose create page into composable + 5 components (F1.2) Extract useMachineCreatePage composable and 5 preview/selector components from machines/new.vue, reducing it from 1231 to 196 LOC. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-09 11:19:29 +01:00
Matthieu	daaa1c4cb9	refactor(machine): decompose detail page into composables + 7 components (F1.1) Extract 2 composables (useMachineDetailData, useMachineSkeletonEditor) and 7 UI components from machine/[id].vue, reducing it from 2989 to 219 LOC. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-09 11:19:22 +01:00
Matthieu	786b1d91f6	refactor(model): split modelUtils.ts into 3 thematic modules (F5.1) Split 1017 LOC monolith into: - shared/model/componentStructure.ts (~590 LOC) - shared/model/pieceProductStructure.ts (~155 LOC) - shared/model/definitionOverrides.ts (~50 LOC) Rewrite modelUtils.ts as 37 LOC barrel re-export for backward compat. All 11 consumer files unchanged. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-09 11:14:15 +01:00
Matthieu	3436cd0b90	chore: remove 19 debug console.log statements (F4.2) Remove all console.log/warn/debug/info from production code across 6 files. Keep console.error for legitimate error handling (72 instances). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-09 11:14:05 +01:00
Matthieu	efe1fd2a73	refactor(types): eliminate explicit any casts across components (F3.3) Extend ComponentModelPiece/Product with optional typePiece/typeProduct nested objects. Replace 12 'as any' casts in assignment node, convert Promise<any> to Promise<unknown>, use Record<string, unknown> at API boundaries. ~15 casts eliminated. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-09 11:13:50 +01:00
Matthieu	a6664ce9a2	refactor(composables): merge 3 type composables into generic (F2.3) Create useEntityTypes.ts with CRUD + singleton state by category. Rewrite useComponentTypes, usePieceTypes, useProductTypes as thin wrappers that rename fields for backward compatibility. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-09 11:13:39 +01:00
Matthieu	399ec1f7b4	refactor(composables): merge 3 history composables into generic (F2.2) Create useEntityHistory.ts with parameterized entity type. Rewrite useComponentHistory, usePieceHistory, useProductHistory as thin backward-compatible wrappers (67→13 LOC each). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-09 11:13:31 +01:00
Matthieu	86bb8af32d	refactor(api): extract shared extractCollection helper (F2.1) Create shared/utils/apiHelpers.ts with generic extractCollection<T>() that handles hydra:member, member, items, data, and array formats. Replace 7 local implementations in CRUD composables. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-09 11:13:20 +01:00
Matthieu	78718b85ae	refactor(composables): migrate JS composables to TypeScript (F3.2) Convert 7 composables from JS to TS with proper type annotations: useApi, useCustomFields, useProfileSession, useProfiles, useToast, useMachineTypesApi, useMachines. Remove deprecated stubs useComponentModels.js and usePieceModels.js. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-09 11:13:09 +01:00
Matthieu	9ee348fff0	refactor(front): extract shared utils and rewire pages	2026-02-06 17:16:16 +01:00
Matthieu	1fbd1d1b2e	refacto(F1.2) : extract modules from machines/new.vue (2313→1231 LOC) Extract assignment normalization utils to shared/utils/assignmentUtils.ts. Extract selection state management to composables/useMachineCreateSelections.ts. Extract preview computation and validation to composables/useMachineCreatePreview.ts. Wire machines/new.vue to use extracted modules (-47% LOC). Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>	2026-02-04 09:15:22 +01:00
Matthieu	1f2d6c78e8	refacto(F1.1) : wire [id].vue to use extracted modules and fix TS errors Wire machine/[id].vue to import from extracted utility modules (customFieldUtils, productDisplayUtils, useMachineHierarchy, useMachinePrint). Remove ~1400 LOC of inline functions replaced by imports. Fix TypeScript errors in extracted composables (AnyRecord/ConstructeurSummary boundary casts, Map generics, optional chaining on unknown). Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>	2026-02-04 08:58:42 +01:00
Matthieu	649f8ca9cc	refacto(F1.1): extract utility modules from machine/[id].vue Extract ~1300 LOC of reusable logic into dedicated modules: - shared/utils/customFieldUtils.ts: field normalization, merge, dedup, display - shared/utils/productDisplayUtils.ts: product resolution and display helpers - composables/useMachineHierarchy.ts: hierarchy tree builder from links - composables/useMachinePrint.ts: print selection and execution logic These extractions prepare the ground for wiring [id].vue to import from these modules instead of inlining all logic. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>	2026-02-03 17:34:33 +01:00
matthieu	3705b8daed	feat(model-types): allow adding custom fields in restricted mode When a category has linked items (pieces, components, products), enable restricted mode instead of blocking all edits: - Allow adding new custom fields - Lock existing fields from modification or deletion - Hide add buttons for products, pieces, and subcomponents - Display informative message about restricted mode Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>	2026-01-29 19:53:56 +01:00
Matthieu	202b964b24	chore(branding): update navbar logo and app name	2026-01-25 22:31:40 +01:00
Matthieu	a1d15c23a4	feat(history): add audit history views for products, pieces and components	2026-01-25 21:20:14 +01:00
Matthieu	a7101c7e77	feat(model-types): add related-items modal and guard category edits	2026-01-25 20:29:28 +01:00