fix(slots) : check API response before updating local state on slot selection

The save functions (savePieceSlotSelection, saveProductSlotSelection,
saveSubcomponentSlotSelection) were not checking result.success before
updating local state and showing success toast. Since useApi.patch()
never throws, the catch block was dead code and errors were silently
ignored while the UI showed success.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

.gitignore

@@ -22,3 +22,8 @@ logs
 .env
 .env.*
 !.env.example
+
+# Playwright
+e2e/.auth/
+playwright-report/
+test-results/

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
+## Développement
-
-Start the development server on `http://localhost:3000`:
 
 ```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
+| Commande | Description |
-# npm
+|----------|-------------|
-npm run build
+| `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
+## Fonctionnalités
-pnpm build
 
-# yarn
+### Gestion du parc
-yarn build
 
-# bun
+- **Machines** : création, édition, vue détaillée avec structure hiérarchique (composants, pièces, produits)
-bun run build
+- **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
+### Composables
-# npm
-npm run preview
 
-# pnpm
+Pattern avec injection de dépendances explicite :
-pnpm preview
 
-# yarn
+```typescript
-yarn preview
+interface Deps {
+  machineId: Ref<string>
+  onSave: () => void
+}
 
-# bun
+export function useMachineDetail(deps: Deps) {
-bun run preview
+  // ...
+}
 ```
 
-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

app/app.vue

@@ -1,859 +1,63 @@
 <template>
-  <div class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
+  <div class="min-h-screen flex flex-col bg-base-200/40">
-    <!-- Navbar -->
+    <!-- Subtle dot pattern background -->
-    <div class="navbar bg-base-100 shadow-lg">
+    <div class="fixed inset-0 -z-10 bg-[radial-gradient(oklch(85%_0.02_260)_1px,transparent_1px)] bg-[size:24px_24px] opacity-40" />
-      <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>
 
-          <ClientOnly>
+    <AppNavbar
-            <div v-if="activeProfile" class="dropdown dropdown-end">
+      @open-settings="displaySettingsOpen = true"
-              <div
+      @logout="handleLogout"
-                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>
+    <main class="flex-1">
-                  <NuxtLink to="/profiles/manage" class="justify-between">
+      <NuxtPage :transition="{ name: 'page', mode: 'out-in' }" />
-                    Gestion des profils
+    </main>
-                    <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 -->
+    <ConfirmModal />
+
     <DisplaySettings
       :is-open="displaySettingsOpen"
-      @close="closeDisplaySettings"
+      @close="displaySettingsOpen = false"
       @update-settings="handleSettingsUpdate"
     />
 
-    <!-- Footer -->
+    <footer class="border-t border-base-300/50 bg-base-100/60 backdrop-blur-sm">
-    <footer class="footer p-4 bg-neutral text-neutral-content">
+      <div class="container mx-auto flex items-center justify-between px-6 py-3">
-      <div class="items-center grid-flow-col">
+        <p class="text-xs text-base-content/40 font-medium tracking-wide">
-        <p>@Malio 2025 · v{{ appVersion }}</p>
+          &copy; Malio {{ new Date().getFullYear() }}
+        </p>
+        <NuxtLink
+          to="/changelog"
+          class="text-xs text-base-content/40 hover:text-primary transition-colors font-medium"
+        >
+          v{{ appVersion }}
+        </NuxtLink>
       </div>
     </footer>
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted, watch } from "vue";
+import { ref, computed, onMounted } from 'vue'
-import { useRoute, navigateTo, useRuntimeConfig } from "#imports";
+import { navigateTo, useRuntimeConfig } from '#imports'
-import { useProfileSession } from "~/composables/useProfileSession";
+import { useProfileSession } from '~/composables/useProfileSession'
-import IconLucideMenu from "~icons/lucide/menu";
-import IconLucideSettings from "~icons/lucide/settings";
-import IconLucideBoxes from "~icons/lucide/boxes";
-import IconLucidePlus from "~icons/lucide/plus";
-import IconLucideCpu from "~icons/lucide/cpu";
-import IconLucideFilePlus from "~icons/lucide/file-plus";
-import IconLucideMapPin from "~icons/lucide/map-pin";
-import IconLucideChevronRight from "~icons/lucide/chevron-right";
-import IconLucideLogOut from "~icons/lucide/log-out";
 
-// État du modal des paramètres d'affichage
+const displaySettingsOpen = ref(false)
-const displaySettingsOpen = ref(false);
+const { ensureSession, logout } = useProfileSession()
-const { activeProfile, ensureSession, logout } = useProfileSession();
+const runtimeConfig = useRuntimeConfig()
-const runtimeConfig = useRuntimeConfig();
+const appVersion = computed(() => (runtimeConfig.public?.appVersion as string) ?? '0.1.0')
-const appVersion = computed(() => runtimeConfig.public?.appVersion ?? "0.1.0");
 
-// Route active pour souligner l'onglet sélectionné dans la navbar
+const handleSettingsUpdate = (_settings: unknown) => {
-const route = useRoute();
+  // Placeholder for future persistence
-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 handleLogout = async () => {
-  await logout();
+  await logout()
-  await navigateTo("/profiles");
+  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() ||
-    "??"
-  );
-});
 
 onMounted(async () => {
-  await ensureSession();
+  await ensureSession()
-});
+})
-
-onUnmounted(() => {
-  if (dropdownCloseTimer) {
-    clearTimeout(dropdownCloseTimer);
-    dropdownCloseTimer = null;
-  }
-});
 </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>

app/assets/app.css

@@ -1,50 +1,136 @@
+/* ─── Fonts ─── */
+@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap');
+
 @import "tailwindcss";
 @plugin "daisyui";
+
+/* ─── Theme ─── */
 @plugin "daisyui/theme" {
   name: "mytheme";
-  default: true; /* set as default */
+  default: true;
-  prefersdark: false; /* set as default dark mode (prefers-color-scheme:dark) */
+  prefersdark: false;
-  color-scheme: light; /* color of browser-provided UI */
+  color-scheme: light;
 
-  --color-base-100: oklch(98% 0.02 240);
+  /* Surfaces — warm gray with a hint of blue */
-  --color-base-200: oklch(95% 0.03 240);
+  --color-base-100: oklch(98.5% 0.004 260);
-  --color-base-300: oklch(92% 0.04 240);
+  --color-base-200: oklch(95% 0.008 260);
-  --color-base-content: oklch(20% 0.05 240);
+  --color-base-300: oklch(91% 0.015 260);
-  --color-primary: oklch(55% 0.3 240);
+  --color-base-content: oklch(22% 0.025 260);
-  --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);
 
-  /* border radius */
+  /* Primary — Malio blue, slightly richer */
-  --radius-selector: 1rem;
+  --color-primary: oklch(40% 0.16 262);
-  --radius-field: 0.25rem;
+  --color-primary-content: oklch(98% 0.005 262);
-  --radius-box: 0.5rem;
+
+  /* Secondary — refined lavender */
+  --color-secondary: oklch(72% 0.06 275);
+  --color-secondary-content: oklch(22% 0.03 275);
+
+  /* Accent — warm amber-orange */
+  --color-accent: oklch(72% 0.17 55);
+  --color-accent-content: oklch(20% 0.04 55);
+
+  /* Neutral — deep slate */
+  --color-neutral: oklch(28% 0.04 260);
+  --color-neutral-content: oklch(95% 0.005 260);
+
+  /* Semantic */
+  --color-info: oklch(58% 0.14 255);
+  --color-info-content: oklch(98% 0.005 255);
+  --color-success: oklch(62% 0.19 150);
+  --color-success-content: oklch(98% 0.005 150);
+  --color-warning: oklch(78% 0.15 70);
+  --color-warning-content: oklch(22% 0.05 70);
+  --color-error: oklch(58% 0.22 25);
+  --color-error-content: oklch(98% 0.005 25);
+
+  /* Geometry */
+  --radius-selector: 0.75rem;
+  --radius-field: 0.375rem;
+  --radius-box: 0.625rem;
 
-  /* base sizes */
   --size-selector: 0.25rem;
   --size-field: 0.25rem;
 
-  /* border size */
   --border: 1px;
-
-  /* effects */
   --depth: 1;
   --noise: 0;
 }
 
-/* Styles pour l'accessibilité et les paramètres d'affichage */
+@plugin "daisyui/theme" {
+  name: "mytheme-dark";
+  default: false;
+  prefersdark: true;
+  color-scheme: dark;
+
+  /* Surfaces — dark blue-gray */
+  --color-base-100: oklch(22% 0.015 260);
+  --color-base-200: oklch(18% 0.012 260);
+  --color-base-300: oklch(28% 0.018 260);
+  --color-base-content: oklch(92% 0.005 260);
+
+  /* Primary — Malio blue, brighter for dark */
+  --color-primary: oklch(55% 0.18 262);
+  --color-primary-content: oklch(98% 0.005 262);
+
+  /* Secondary — refined lavender */
+  --color-secondary: oklch(72% 0.06 275);
+  --color-secondary-content: oklch(22% 0.03 275);
+
+  /* Accent — warm amber-orange */
+  --color-accent: oklch(72% 0.17 55);
+  --color-accent-content: oklch(20% 0.04 55);
+
+  /* Neutral — lighter slate for dark mode */
+  --color-neutral: oklch(75% 0.02 260);
+  --color-neutral-content: oklch(18% 0.01 260);
+
+  /* Semantic */
+  --color-info: oklch(62% 0.14 255);
+  --color-info-content: oklch(98% 0.005 255);
+  --color-success: oklch(65% 0.19 150);
+  --color-success-content: oklch(98% 0.005 150);
+  --color-warning: oklch(78% 0.15 70);
+  --color-warning-content: oklch(22% 0.05 70);
+  --color-error: oklch(62% 0.22 25);
+  --color-error-content: oklch(98% 0.005 25);
+
+  /* Geometry — same as light */
+  --radius-selector: 0.75rem;
+  --radius-field: 0.375rem;
+  --radius-box: 0.625rem;
+
+  --size-selector: 0.25rem;
+  --size-field: 0.25rem;
+
+  --border: 1px;
+  --depth: 1;
+  --noise: 0;
+}
+
+/* ─── Typography ─── */
+:root {
+  --font-heading: 'Outfit', system-ui, sans-serif;
+  --font-body: 'DM Sans', system-ui, sans-serif;
+}
+
+body {
+  font-family: var(--font-body);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  letter-spacing: -0.01em;
+}
+
+h1, h2, h3, h4, h5, h6,
+.card-title,
+.stat-value,
+.text-2xl,
+.text-3xl,
+.text-4xl {
+  font-family: var(--font-heading);
+  letter-spacing: -0.025em;
+}
+
+/* ─── Density variables ─── */
 :root {
   --spacing-xs: 0.5rem;
   --spacing-sm: 0.75rem;
@@ -53,7 +139,6 @@
   --spacing-xl: 2rem;
 }
 
-/* Densité compacte */
 .density-compact {
   --spacing-xs: 0.25rem;
   --spacing-sm: 0.5rem;
@@ -62,7 +147,6 @@
   --spacing-xl: 1.25rem;
 }
 
-/* Densité confortable (défaut) */
 .density-comfortable {
   --spacing-xs: 0.5rem;
   --spacing-sm: 0.75rem;
@@ -71,7 +155,6 @@
   --spacing-xl: 2rem;
 }
 
-/* Densité espacée */
 .density-spacious {
   --spacing-xs: 0.75rem;
   --spacing-sm: 1rem;
@@ -80,251 +163,200 @@
   --spacing-xl: 3rem;
 }
 
-/* Contraste élevé avec DaisyUI */
+/* ─── High contrast mode ─── */
-.contrast-high .btn {
+.contrast-high .btn { @apply border-2; }
-  @apply border-2;
+.contrast-high .input { @apply border-2; }
-}
+.contrast-high .select { @apply border-2; }
+.contrast-high .textarea { @apply border-2; }
+.contrast-high .modal-box { @apply border-2 border-base-content; }
 
-.contrast-high .input {
+/* ─── Accessibility ─── */
-  @apply border-2;
-}
-
-.contrast-high .select {
-  @apply border-2;
-}
-
-.contrast-high .textarea {
-  @apply border-2;
-}
-
-.contrast-high .modal-box {
-  @apply border-2 border-base-content;
-}
-
-/* Amélioration de l'accessibilité */
 @media (prefers-reduced-motion: reduce) {
-  *,
+  *, *::before, *::after {
-  *::before,
-  *::after {
     animation-duration: 0.01ms !important;
     animation-iteration-count: 1 !important;
     transition-duration: 0.01ms !important;
   }
 }
 
-/* Focus visible pour l'accessibilité */
 *:focus-visible {
-  outline: 2px solid #3b82f6;
+  outline: 2px solid oklch(40% 0.16 262);
   outline-offset: 2px;
 }
 
-/* Styles pour les boutons de paramètres */
+/* ─── Cards ─── */
+.card {
+  border: 1px solid oklch(91% 0.015 260 / 0.6);
+  transition: box-shadow 0.2s ease, transform 0.2s ease;
+}
+
+.site-card {
+  background-color: oklch(100% 0 0);
+}
+
+[data-theme="mytheme-dark"] .site-card {
+  background-color: oklch(24% 0.015 260);
+}
+
+[data-theme="mytheme-dark"] .card {
+  border-color: oklch(30% 0.02 260 / 0.6);
+}
+
+.card:hover {
+  box-shadow:
+    0 4px 6px -1px oklch(22% 0.025 260 / 0.06),
+    0 2px 4px -2px oklch(22% 0.025 260 / 0.04);
+}
+
+/* ─── Navbar glass effect ─── */
+.navbar-glass {
+  background: oklch(98.5% 0.004 260 / 0.82);
+  backdrop-filter: blur(12px) saturate(1.5);
+  -webkit-backdrop-filter: blur(12px) saturate(1.5);
+  border-bottom: 1px solid oklch(91% 0.015 260 / 0.5);
+}
+
+[data-theme="mytheme-dark"] .navbar-glass {
+  background: oklch(22% 0.015 260 / 0.85);
+  border-bottom-color: oklch(30% 0.02 260 / 0.5);
+}
+
+/* ─── Buttons ─── */
+.btn {
+  font-family: var(--font-heading);
+  font-weight: 500;
+  letter-spacing: -0.01em;
+  transition: all 0.15s ease;
+}
+
 .btn-circle {
   transition: all 0.2s ease-in-out;
 }
-
 .btn-circle:hover {
   transform: scale(1.05);
 }
-
 .btn-circle:active {
   transform: scale(0.95);
 }
 
-/* Animation pour le modal */
+/* ─── Inputs ─── */
+.input, .select, .textarea {
+  font-family: var(--font-body);
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.input:focus, .select:focus, .textarea:focus {
+  box-shadow: 0 0 0 3px oklch(40% 0.16 262 / 0.1);
+}
+
+/* ─── Tables ─── */
+.table thead th {
+  font-family: var(--font-heading);
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  text-transform: uppercase;
+  font-size: 0.7rem;
+  color: oklch(45% 0.03 260);
+}
+
+.table tbody tr {
+  transition: background-color 0.1s ease;
+}
+
+/* ─── Badges ─── */
+.badge {
+  font-family: var(--font-heading);
+  font-weight: 500;
+  letter-spacing: 0;
+}
+
+/* ─── Stats ─── */
+.stat-title {
+  font-family: var(--font-body);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-size: 0.7rem;
+  font-weight: 500;
+  opacity: 0.6;
+}
+
+.stat-value {
+  font-weight: 700;
+}
+
+/* ─── Modals ─── */
 .modal {
-  transition: opacity 0.3s ease-in-out;
+  transition: opacity 0.25s ease;
-  font-size: 100% !important; /* Force la taille normale pour le modal */
-  transform: none !important; /* Empêche les transformations */
-  scale: 1 !important; /* Force l'échelle à 1 */
 }
 
-.modal.modal-open {
-  animation: modalFadeIn 0.3s ease-in-out;
-}
-
-/* S'assurer que le contenu du modal garde une taille normale */
 .modal-box {
-  font-size: 100% !important;
+  font-family: var(--font-body);
-  transform: none !important;
+  border-radius: 0.75rem;
-  scale: 1 !important;
+  border: 1px solid oklch(91% 0.015 260 / 0.5);
-  width: auto !important;
-  max-width: 500px !important;
 }
 
-.modal .form-control {
+@keyframes modalSlideUp {
-  font-size: 100% !important;
+  from { opacity: 0; transform: translateY(0.5rem); }
-  transform: none !important;
+  to { opacity: 1; transform: translateY(0); }
 }
 
-.modal .btn {
+.modal.modal-open .modal-box {
-  font-size: 100% !important;
+  animation: modalSlideUp 0.25s ease-out;
-  transform: none !important;
-  padding: 0.5rem 1rem !important;
-  height: auto !important;
-  min-height: 2.5rem !important;
 }
 
-.modal .input {
+/* ─── Page transitions ─── */
-  font-size: 100% !important;
+.page-enter-active {
-  transform: none !important;
+  transition: opacity 0.2s ease, transform 0.2s ease;
-  height: auto !important;
+}
-  min-height: 2.5rem !important;
+.page-leave-active {
+  transition: opacity 0.15s ease;
+}
+.page-enter-from {
+  opacity: 0;
+  transform: translateY(4px);
+}
+.page-leave-to {
+  opacity: 0;
 }
 
-.modal .select {
+/* ─── Scrollbar styling ─── */
-  font-size: 100% !important;
+::-webkit-scrollbar {
-  transform: none !important;
+  width: 6px;
-  height: auto !important;
+  height: 6px;
-  min-height: 2.5rem !important;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: oklch(75% 0.02 260);
+  border-radius: 3px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: oklch(60% 0.03 260);
 }
 
-.modal .textarea {
+/* ─── Readability ─── */
-  font-size: 100% !important;
+.text-sm { line-height: 1.5; }
-  transform: none !important;
+.text-xs { line-height: 1.4; }
-  min-height: 4rem !important;
-}
 
-.modal .range {
+/* ─── Adaptive spacing ─── */
-  font-size: 100% !important;
+.p-1 { padding: var(--spacing-xs); }
-  transform: none !important;
+.p-2 { padding: var(--spacing-sm); }
-  height: auto !important;
+.p-3 { padding: var(--spacing-md); }
-  min-height: 1.5rem !important;
+.p-4 { padding: var(--spacing-lg); }
-}
+.p-5 { padding: var(--spacing-xl); }
 
-.modal .label {
+.m-1 { margin: var(--spacing-xs); }
-  font-size: 100% !important;
+.m-2 { margin: var(--spacing-sm); }
-  transform: none !important;
+.m-3 { margin: var(--spacing-md); }
-}
+.m-4 { margin: var(--spacing-lg); }
+.m-5 { margin: var(--spacing-xl); }
 
-.modal .label-text {
+.gap-1 { gap: var(--spacing-xs); }
-  font-size: 100% !important;
+.gap-2 { gap: var(--spacing-sm); }
-  transform: none !important;
+.gap-3 { gap: var(--spacing-md); }
-}
+.gap-4 { gap: var(--spacing-lg); }
-
+.gap-5 { gap: var(--spacing-xl); }
-.modal .label-text-alt {
-  font-size: 100% !important;
-  transform: none !important;
-}
-
-.modal .checkbox {
-  font-size: 100% !important;
-  transform: none !important;
-  width: 1rem !important;
-  height: 1rem !important;
-}
-
-.modal .text-xs {
-  font-size: 0.75rem !important;
-  transform: none !important;
-}
-
-.modal .text-sm {
-  font-size: 0.875rem !important;
-  transform: none !important;
-}
-
-.modal .text-lg {
-  font-size: 1.125rem !important;
-  transform: none !important;
-}
-
-.modal .font-bold {
-  font-weight: 700 !important;
-  transform: none !important;
-}
-
-.modal .font-medium {
-  font-weight: 500 !important;
-  transform: none !important;
-}
-
-/* Empêcher les héritages de taille */
-.modal * {
-  font-size: inherit !important;
-  transform: none !important;
-  scale: 1 !important;
-}
-
-@keyframes modalFadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-/* Styles pour les contrôles de zoom */
-.range {
-  transition: all 0.2s ease-in-out;
-}
-
-.range::-webkit-slider-thumb {
-  transition: all 0.2s ease-in-out;
-}
-
-.range::-webkit-slider-thumb:hover {
-  transform: scale(1.1);
-}
-
-/* Amélioration de la lisibilité */
-.text-sm {
-  line-height: 1.5;
-}
-
-.text-xs {
-  line-height: 1.4;
-}
-
-/* Espacement adaptatif */
-.p-1 {
-  padding: var(--spacing-xs);
-}
-.p-2 {
-  padding: var(--spacing-sm);
-}
-.p-3 {
-  padding: var(--spacing-md);
-}
-.p-4 {
-  padding: var(--spacing-lg);
-}
-.p-5 {
-  padding: var(--spacing-xl);
-}
-
-.m-1 {
-  margin: var(--spacing-xs);
-}
-.m-2 {
-  margin: var(--spacing-sm);
-}
-.m-3 {
-  margin: var(--spacing-md);
-}
-.m-4 {
-  margin: var(--spacing-lg);
-}
-.m-5 {
-  margin: var(--spacing-xl);
-}
-
-.gap-1 {
-  gap: var(--spacing-xs);
-}
-.gap-2 {
-  gap: var(--spacing-sm);
-}
-.gap-3 {
-  gap: var(--spacing-md);
-}
-.gap-4 {
-  gap: var(--spacing-lg);
-}
-.gap-5 {
-  gap: var(--spacing-xl);
-}
 
 @layer components {
   .form-control .label {
@@ -332,7 +364,6 @@
     padding-bottom: 0;
     margin-right: 15px;
   }
-
   .form-control .label + * {
     margin-top: var(--spacing-xs);
   }

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>

app/components/ComponentHierarchy.vue

@@ -5,11 +5,13 @@
       <ComponentItem
         :component="component"
         :is-edit-mode="isEditMode"
+        :show-delete="showDelete"
         :collapse-all="collapseAll"
         :toggle-token="toggleToken"
         @update="$emit('update', $event)"
         @edit-piece="$emit('edit-piece', $event)"
         @custom-field-update="$emit('custom-field-update', $event)"
+        @delete="$emit('delete')"
       />
     </div>
   </div>
@@ -27,6 +29,10 @@ defineProps({
     type: Boolean,
     default: false
   },
+  showDelete: {
+    type: Boolean,
+    default: false
+  },
   collapseAll: {
     type: Boolean,
     default: true
@@ -37,5 +43,5 @@ defineProps({
   }
 })
 
-defineEmits(['update', 'edit-piece', 'custom-field-update'])
+defineEmits(['update', 'edit-piece', 'custom-field-update', 'delete'])
 </script>

app/components/ComponentModelStructureEditor.vue

@@ -110,7 +110,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 +140,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 +241,7 @@ watch(
 )
 
 onMounted(async () => {
-  const loaders: Promise<any>[] = []
+  const loaders: Promise<unknown>[] = []
   if (!availablePieceTypes.value.length) {
     loaders.push(loadPieceTypes())
   }

app/components/ComponentStructureAssignmentNode.vue

@@ -134,75 +134,24 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue';
+import { computed } from 'vue';
 import SearchSelect from '~/components/common/SearchSelect.vue';
-import { useApi } from '~/composables/useApi';
+import { useStructureAssignmentFetch } from '~/composables/useStructureAssignmentFetch';
 import type {
-  ComponentModelPiece,
+  ComponentOption,
-  ComponentModelProduct,
+  PieceOption,
-  ComponentModelStructureNode,
+  ProductOption,
-} from '~/shared/types/inventory';
+} from '~/composables/useStructureAssignmentFetch';
 
-interface ComponentOption {
+export type {
-  id: string;
+  StructureAssignmentNode,
-  name?: string | null;
+  StructurePieceAssignment,
-  reference?: string | null;
+  StructureProductAssignment,
-  typeComposantId?: string | null;
+} from '~/composables/useStructureAssignmentFetch';
-  typeComposant?: {
-    id: string;
-    name?: string | null;
-    code?: string | null;
-  } | null;
-}
-
-interface PieceOption {
-  id: string;
-  name?: string | null;
-  reference?: string | null;
-  typePieceId?: string | null;
-  typePiece?: {
-    id: string;
-    name?: string | null;
-    code?: string | null;
-  } | null;
-}
-
-interface ProductOption {
-  id: string;
-  name?: string | null;
-  reference?: string | null;
-  typeProductId?: string | null;
-  typeProduct?: {
-    id: string;
-    name?: string | null;
-    code?: string | null;
-  } | null;
-}
-
-export interface StructurePieceAssignment {
-  path: string;
-  definition: ComponentModelPiece;
-  selectedPieceId: string;
-}
-
-export interface StructureProductAssignment {
-  path: string;
-  definition: ComponentModelProduct;
-  selectedProductId: string;
-}
-
-export interface StructureAssignmentNode {
-  path: string;
-  definition: ComponentModelStructureNode;
-  selectedComponentId: string;
-  pieces: StructurePieceAssignment[];
-  products: StructureProductAssignment[];
-  subcomponents: StructureAssignmentNode[];
-}
 
 const props = withDefaults(
   defineProps<{
-    assignment: StructureAssignmentNode;
+    assignment: import('~/composables/useStructureAssignmentFetch').StructureAssignmentNode;
     pieces: PieceOption[] | null;
     products: ProductOption[] | null;
     components: ComponentOption[] | null;
@@ -235,347 +184,46 @@ const wrapperClass = computed(() =>
   depth.value === 0 ? 'space-y-6' : 'space-y-6 border-l border-base-300 pl-4',
 );
 
-const { get } = useApi();
+const {
-const pieceOptionsByPath = ref<Record<string, PieceOption[]>>({});
+  pieceLoadingByPath,
-const productOptionsByPath = ref<Record<string, ProductOption[]>>({});
+  productLoadingByPath,
-const componentOptionsByPath = ref<Record<string, ComponentOption[]>>({});
+  componentLoadingByPath,
-const pieceLoadingByPath = ref<Record<string, boolean>>({});
+  componentOptions,
-const productLoadingByPath = ref<Record<string, boolean>>({});
+  componentOptionLabel,
-const componentLoadingByPath = ref<Record<string, boolean>>({});
+  componentOptionDescription,
-
+  fetchComponentOptions,
-const extractCollection = (payload: any): any[] => {
+  getPieceOptions,
-  if (Array.isArray(payload)) {
+  pieceOptionLabel,
-    return payload;
+  pieceOptionDescription,
-  }
+  fetchPieceOptions,
-  if (Array.isArray(payload?.member)) {
+  describePieceRequirement,
-    return payload.member;
+  getProductOptions,
-  }
+  productOptionLabel,
-  if (Array.isArray(payload?.['hydra:member'])) {
+  productOptionDescription,
-    return payload['hydra:member'];
+  fetchProductOptions,
-  }
+  describeProductRequirement,
-  if (Array.isArray(payload?.data)) {
+} = useStructureAssignmentFetch({
-    return payload.data;
+  assignment: props.assignment,
-  }
+  pieces: props.pieces,
-  return [];
+  products: props.products,
-};
+  components: props.components,
-
+  isRoot: () => isRoot.value,
-const setLoading = (target: Record<string, boolean>, key: string, value: boolean) => {
+  pieceTypeLabelMap: props.pieceTypeLabelMap ?? {},
-  target[key] = value;
+  productTypeLabelMap: props.productTypeLabelMap ?? {},
-};
+  componentTypeLabelMap: props.componentTypeLabelMap ?? {},
-
-const componentOptions = computed(() => {
-  if (isRoot.value) {
-    return [];
-  }
-  const cached = componentOptionsByPath.value[props.assignment.path];
-  if (cached) {
-    return cached;
-  }
-  const definition = props.assignment.definition || {};
-  const requiredTypeId =
-    definition.typeComposantId || definition.modelId || null;
-  const requiredFamilyCode = definition.familyCode || null;
-
-  return (props.components || []).filter((component) => {
-    if (!component || typeof component !== 'object') {
-      return false;
-    }
-    if (requiredTypeId) {
-      return component.typeComposantId === requiredTypeId;
-    }
-    if (requiredFamilyCode) {
-      return (
-        component.typeComposant?.code === requiredFamilyCode ||
-        component.typeComposantId === requiredFamilyCode
-      );
-    }
-    return true;
-  });
 });
 
-const componentOptionLabel = (component?: ComponentOption | null) => {
+const normalizeSelectionValue = (value: unknown) => {
-  if (!component) {
+  if (value === null || value === undefined || value === '') {
-    return 'Composant sans nom';
-  }
-  return component.name || 'Composant sans nom';
-};
-
-const componentOptionDescription = (component?: ComponentOption | null) => {
-  if (!component) {
     return '';
   }
-  const parts: string[] = [];
+  if (typeof value === 'string') {
-  const typeLabel =
+    return value;
-    component.typeComposant?.name || component.typeComposant?.code || null;
-  if (typeLabel) {
-    parts.push(typeLabel);
   }
-  if (component.reference) {
+  if (typeof value === 'number') {
-    parts.push(`Ref. ${component.reference}`);
+    return String(value);
   }
-  return parts.join(' • ');
+  return '';
-};
-
-const typeIri = (id: string) => `/api/model_types/${id}`;
-const primedPiecePaths = new Set<string>();
-const primedProductPaths = new Set<string>();
-const primedComponentPaths = new Set<string>();
-
-const fetchComponentOptions = async (term = '') => {
-  if (isRoot.value) {
-    return;
-  }
-  const key = props.assignment.path;
-  if (componentLoadingByPath.value[key]) {
-    return;
-  }
-
-  const definition = props.assignment.definition || {};
-  const requiredTypeId =
-    definition.typeComposantId || definition.modelId || definition.typeComposant?.id || null;
-
-  const params = new URLSearchParams();
-  params.set('itemsPerPage', '50');
-  if (term.trim()) {
-    params.set('name', term.trim());
-  }
-  if (requiredTypeId) {
-    params.set('typeComposant', typeIri(requiredTypeId));
-  }
-
-  setLoading(componentLoadingByPath.value, key, true);
-  try {
-    const result = await get(`/composants?${params.toString()}`);
-    if (result.success) {
-      componentOptionsByPath.value[key] = extractCollection(result.data);
-    }
-  } finally {
-    setLoading(componentLoadingByPath.value, key, false);
-  }
-};
-
-const fetchPieceOptions = async (assignment: StructurePieceAssignment, term = '') => {
-  const key = assignment.path;
-  if (pieceLoadingByPath.value[key]) {
-    return;
-  }
-
-  const definition = assignment.definition || {};
-  const requiredTypeId =
-    definition.typePieceId || (definition as any).typePiece?.id || null;
-
-  const params = new URLSearchParams();
-  params.set('itemsPerPage', '50');
-  if (term.trim()) {
-    params.set('name', term.trim());
-  }
-  if (requiredTypeId) {
-    params.set('typePiece', typeIri(requiredTypeId));
-  }
-
-  setLoading(pieceLoadingByPath.value, key, true);
-  try {
-    const result = await get(`/pieces?${params.toString()}`);
-    if (result.success) {
-      pieceOptionsByPath.value[key] = extractCollection(result.data);
-    }
-  } finally {
-    setLoading(pieceLoadingByPath.value, key, false);
-  }
-};
-
-const fetchProductOptions = async (assignment: StructureProductAssignment, term = '') => {
-  const key = assignment.path;
-  if (productLoadingByPath.value[key]) {
-    return;
-  }
-
-  const definition = assignment.definition || {};
-  const requiredTypeId =
-    definition.typeProductId || (definition as any).typeProduct?.id || null;
-
-  const params = new URLSearchParams();
-  params.set('itemsPerPage', '50');
-  if (term.trim()) {
-    params.set('name', term.trim());
-  }
-  if (requiredTypeId) {
-    params.set('typeProduct', typeIri(requiredTypeId));
-  }
-
-  setLoading(productLoadingByPath.value, key, true);
-  try {
-    const result = await get(`/products?${params.toString()}`);
-    if (result.success) {
-      productOptionsByPath.value[key] = extractCollection(result.data);
-    }
-  } finally {
-    setLoading(productLoadingByPath.value, key, false);
-  }
-};
-
-watch(
-  componentOptions,
-  (options) => {
-    if (isRoot.value) {
-      return;
-    }
-    const hasMatch = options.some(
-      (component) => component.id === props.assignment.selectedComponentId,
-    );
-    if (!hasMatch) {
-      props.assignment.selectedComponentId = '';
-    }
-  },
-  { immediate: true },
-);
-
-const describePieceRequirement = (assignment: StructurePieceAssignment) => {
-  const definition = assignment.definition;
-  const parts: string[] = [];
-  const addPart = (value?: string | null) => {
-    const trimmed = typeof value === 'string' ? value.trim() : '';
-    if (trimmed && !parts.includes(trimmed)) {
-      parts.push(trimmed);
-    }
-  };
-
-  const options = getPieceOptions(assignment);
-  const fallbackPiece = options[0] || null;
-  const fallbackType = fallbackPiece?.typePiece || null;
-
-  addPart(definition.role);
-  const explicitLabel =
-    definition.typePieceLabel ||
-    (definition as any).typePiece?.name ||
-    (definition.typePieceId ? props.pieceTypeLabelMap[definition.typePieceId] : null) ||
-    fallbackType?.name;
-  addPart(explicitLabel);
-
-  const family =
-    definition.familyCode ||
-    (definition as any).typePiece?.code ||
-    fallbackType?.code ||
-    null;
-  if (family) {
-    addPart(`Famille ${family}`);
-  }
-
-  if (parts.length === 0) {
-    addPart(fallbackType?.name);
-    if (fallbackType?.code) {
-      addPart(`Famille ${fallbackType.code}`);
-    }
-  }
-
-  if (parts.length === 0 && definition.typePieceId) {
-    addPart(`#${definition.typePieceId}`);
-  }
-
-  return parts.length ? parts.join(' • ') : 'Pièce du squelette';
-};
-
-const getProductOptions = (assignment: StructureProductAssignment) => {
-  const cached = productOptionsByPath.value[assignment.path];
-  if (cached) {
-    return cached;
-  }
-  const definition = assignment.definition;
-  const requiredTypeId =
-    definition.typeProductId ||
-    (definition as any).typeProduct?.id ||
-    definition.familyCode ||
-    null;
-
-  return (props.products || []).filter((product) => {
-    if (!product || typeof product !== 'object') {
-      return false;
-    }
-    if (!requiredTypeId) {
-      return true;
-    }
-    if (definition.typeProductId || (definition as any).typeProduct?.id) {
-      return (
-        product.typeProductId === requiredTypeId ||
-        product.typeProduct?.id === requiredTypeId
-      );
-    }
-    if (definition.familyCode) {
-      return (
-        product.typeProduct?.code === requiredTypeId ||
-        product.typeProductId === requiredTypeId
-      );
-    }
-    return false;
-  });
-};
-
-const productOptionLabel = (product?: ProductOption | null) => {
-  if (!product) {
-    return 'Produit';
-  }
-  return product.name || product.reference || 'Produit';
-};
-
-const productOptionDescription = (product?: ProductOption | null) => {
-  if (!product) {
-    return '';
-  }
-  const parts: string[] = [];
-  const typeLabel =
-    product.typeProduct?.name || product.typeProduct?.code || null;
-  if (typeLabel) {
-    parts.push(typeLabel);
-  }
-  if (product.reference) {
-    parts.push(`Ref. ${product.reference}`);
-  }
-  return parts.join(' • ');
-};
-
-const describeProductRequirement = (assignment: StructureProductAssignment) => {
-  const definition = assignment.definition;
-  const parts: string[] = [];
-  const addPart = (value?: string | null) => {
-    const trimmed = typeof value === 'string' ? value.trim() : '';
-    if (trimmed && !parts.includes(trimmed)) {
-      parts.push(trimmed);
-    }
-  };
-
-  const options = getProductOptions(assignment);
-  const fallbackProduct = options[0] || null;
-  const fallbackType = fallbackProduct?.typeProduct || null;
-
-  addPart(definition.role);
-  const explicitLabel =
-    definition.typeProductLabel ||
-    (definition as any).typeProduct?.name ||
-    (definition.typeProductId ? props.productTypeLabelMap[definition.typeProductId] : null) ||
-    fallbackType?.name;
-  addPart(explicitLabel);
-
-  const family =
-    definition.familyCode ||
-    (definition as any).typeProduct?.code ||
-    fallbackType?.code ||
-    null;
-  if (family) {
-    addPart(`Famille ${family}`);
-  }
-
-  if (parts.length === 0) {
-    addPart(fallbackType?.name);
-    if (fallbackType?.code) {
-      addPart(`Famille ${fallbackType.code}`);
-    }
-  }
-
-  if (parts.length === 0 && definition.typeProductId) {
-    addPart(`#${definition.typeProductId}`);
-  }
-
-  return parts.length ? parts.join(' • ') : 'Produit du squelette';
 };
 
 const requirementLabel = computed(() => {
@@ -599,139 +247,13 @@ const requirementLabel = computed(() => {
 const requirementDescription = computed(() => {
   const definition = props.assignment.definition || {};
   const family =
-    definition.typeComposantLabel ||
+    definition.typeComposantLabel
-    (definition.typeComposantId ? props.componentTypeLabelMap[definition.typeComposantId] : null) ||
+    || (definition.typeComposantId ? props.componentTypeLabelMap[definition.typeComposantId] : null)
-    definition.typeComposant?.name ||
+    || definition.typeComposant?.name
-    definition.familyCode;
+    || definition.familyCode;
   if (family) {
     return `Doit appartenir à la famille "${family}".`;
   }
   return 'Sélectionnez un composant enfant conforme à cette position.';
 });
-
-const getPieceOptions = (assignment: StructurePieceAssignment) => {
-  const cached = pieceOptionsByPath.value[assignment.path];
-  if (cached) {
-    return cached;
-  }
-  const definition = assignment.definition;
-  const requiredTypeId =
-    definition.typePieceId ||
-    (definition as any).typePiece?.id ||
-    definition.familyCode ||
-    null;
-
-  return (props.pieces || []).filter((piece) => {
-    if (!piece || typeof piece !== 'object') {
-      return false;
-    }
-    if (!requiredTypeId) {
-      return true;
-    }
-    if (definition.typePieceId || (definition as any).typePiece?.id) {
-      return (
-        piece.typePieceId === requiredTypeId ||
-        piece.typePiece?.id === requiredTypeId
-      );
-    }
-    if (definition.familyCode) {
-      return (
-        piece.typePiece?.code === requiredTypeId ||
-        piece.typePieceId === requiredTypeId
-      );
-    }
-    return false;
-  });
-};
-
-const pieceOptionLabel = (piece?: PieceOption | null) => {
-  if (!piece) {
-    return 'Pièce';
-  }
-  return piece.name || 'Pièce';
-};
-
-const pieceOptionDescription = (piece?: PieceOption | null) => {
-  if (!piece) {
-    return '';
-  }
-  const parts: string[] = [];
-  const typeLabel =
-    piece.typePiece?.name || piece.typePiece?.code || null;
-  if (typeLabel) {
-    parts.push(typeLabel);
-  }
-  if (piece.reference) {
-    parts.push(`Ref. ${piece.reference}`);
-  }
-  return parts.join(' • ');
-};
-
-const normalizeSelectionValue = (value: unknown) => {
-  if (value === null || value === undefined || value === '') {
-    return '';
-  }
-  if (typeof value === 'string') {
-    return value;
-  }
-  if (typeof value === 'number') {
-    return String(value);
-  }
-  return '';
-};
-
-watch(
-  () => [props.pieces, props.assignment.pieces],
-  () => {
-    for (const pieceAssignment of props.assignment.pieces) {
-      const options = getPieceOptions(pieceAssignment);
-      if (
-        pieceAssignment.selectedPieceId &&
-        !options.some((piece) => piece.id === pieceAssignment.selectedPieceId)
-      ) {
-        pieceAssignment.selectedPieceId = '';
-      }
-      if (!primedPiecePaths.has(pieceAssignment.path) && !pieceOptionsByPath.value[pieceAssignment.path]) {
-        primedPiecePaths.add(pieceAssignment.path);
-        fetchPieceOptions(pieceAssignment).catch(() => {});
-      }
-    }
-  },
-  { deep: true, immediate: true },
-);
-
-watch(
-  () => [props.products, props.assignment.products],
-  () => {
-    for (const productAssignment of props.assignment.products) {
-      const options = getProductOptions(productAssignment);
-      if (
-        productAssignment.selectedProductId &&
-        !options.some((product) => product.id === productAssignment.selectedProductId)
-      ) {
-        productAssignment.selectedProductId = '';
-      }
-      if (!primedProductPaths.has(productAssignment.path) && !productOptionsByPath.value[productAssignment.path]) {
-        primedProductPaths.add(productAssignment.path);
-        fetchProductOptions(productAssignment).catch(() => {});
-      }
-    }
-  },
-  { deep: true, immediate: true },
-);
-
-watch(
-  () => props.assignment.definition,
-  () => {
-    if (isRoot.value) {
-      return;
-    }
-    const key = props.assignment.path;
-    if (!primedComponentPaths.has(key) && !componentOptionsByPath.value[key]) {
-      primedComponentPaths.add(key);
-      fetchComponentOptions().catch(() => {});
-    }
-  },
-  { immediate: true },
-);
 </script>

app/components/ComposantSelect.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="space-y-1">
+    <SearchSelect
+      :model-value="modelValue ?? undefined"
+      :options="composantOptions"
+      :loading="loading"
+      :placeholder="placeholder"
+      :empty-text="emptyText"
+      size="sm"
+      option-value="id"
+      option-label="name"
+      :disabled="disabled"
+      @update:modelValue="updateValue"
+    >
+      <template #option-description="{ option }">
+        <span class="text-xs text-base-content/60">
+          {{ formatDescription(option) }}
+        </span>
+      </template>
+    </SearchSelect>
+    <p v-if="helperText" class="text-xs text-base-content/60">
+      {{ helperText }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, watch } from 'vue'
+import SearchSelect from '~/components/common/SearchSelect.vue'
+import { useComposants } from '~/composables/useComposants'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string | null
+    placeholder?: string
+    emptyText?: string
+    helperText?: string
+    disabled?: boolean
+    typeComposantId?: string | null
+  }>(),
+  {
+    modelValue: '',
+    placeholder: 'Sélectionner un composant…',
+    emptyText: 'Aucun composant disponible',
+    helperText: '',
+    disabled: false,
+    typeComposantId: null,
+  },
+)
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string | null): void
+}>()
+
+const { composants, loading, loadComposants } = useComposants()
+
+const composantOptions = computed(() => {
+  const baseOptions = Array.isArray(composants.value) ? composants.value : []
+  if (!props.typeComposantId) {
+    return baseOptions
+  }
+
+  const allowedTypeId = String(props.typeComposantId)
+  return baseOptions.filter((composant: any) => {
+    const typeId =
+      composant?.typeComposantId ||
+      composant?.typeComposant?.id ||
+      null
+    return typeId ? String(typeId) === allowedTypeId : false
+  })
+})
+
+onMounted(() => {
+  if (composantOptions.value.length === 0) {
+    loadComposants({ itemsPerPage: 200 }).catch((error: unknown) => {
+      console.error('Erreur lors du chargement des composants:', error)
+    })
+  }
+})
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    if (typeof value === 'string' && value) {
+      const exists = composantOptions.value.some((c: any) => c.id === value)
+      if (!exists && !loading.value) {
+        loadComposants({ itemsPerPage: 200, force: true }).catch((error: unknown) => {
+          console.error('Erreur lors du chargement des composants:', error)
+        })
+      }
+    }
+  },
+)
+
+const updateValue = (value: string | number | null | undefined) => {
+  if (value === undefined || value === null || value === '') {
+    emit('update:modelValue', null)
+    return
+  }
+  emit('update:modelValue', String(value))
+}
+
+const formatDescription = (option: any) => {
+  const parts: string[] = []
+  if (option?.reference) {
+    parts.push(option.reference)
+  }
+  if (option?.prix !== undefined && option.prix !== null) {
+    const price = Number(option.prix)
+    if (!Number.isNaN(price)) {
+      parts.push(`${price.toFixed(2)} €`)
+    }
+  }
+  return parts.length ? parts.join(' • ') : 'Sans référence'
+}
+</script>

app/components/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) {
+  const result = await searchConstructeurs('')
-    return
-  }
-
-  if (options.value.length && !force) {
-    return
-  }
-
-  const result = await searchConstructeurs(searchTerm.value)
   if (result.success) {
-    applyOptions(result.data || [])
+    applyOptions(extractDataArray(result.data))
-    lastSearchTerm = searchTerm.value
   }
 }
 
 const onSearch = () => {
   openDropdown.value = true
-  if (searchTimeout) {
+  ensureOptionsLoaded()
-    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)
 }
 
 const toggleOption = (option: ConstructeurSummary) => {
@@ -309,17 +282,29 @@ const closeCreateModal = () => {
 }
 
 const handleCreate = async () => {
-  creating.value = true
+  const trimmedName = createForm.value.name.trim()
-  const payload = { ...createForm.value }
+  const duplicate = options.value.find(
-  if (!payload.phone) {
+    (o) => (o.name ?? '').toLowerCase() === trimmedName.toLowerCase(),
-    delete payload.phone
+  )
+  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(

app/components/CustomFieldsDisplay.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-if="customFields && customFields.length > 0" class="space-y-4">
-    <h4 class="font-semibold text-gray-700 mb-3">
+    <h4 class="font-semibold text-base-content/80 mb-3">
       Champs personnalisés
     </h4>
     <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
@@ -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>
+          <span class="text-sm" :class="fieldValues[field.id] === 'true' ? 'text-success font-medium' : 'text-base-content/60'">{{ fieldValues[field.id] === 'true' ? 'Oui' : 'Non' }}</span>
-        </div>
+        </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: {

app/components/DisplaySettings.vue

@@ -103,7 +103,7 @@
 <script setup>
 import { ref, onMounted } from 'vue'
 
-const props = defineProps({
+defineProps({
   isOpen: {
     type: Boolean,
     default: false

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-base-content/50">
+                {{ activeIndex + 1 }} / {{ navTotal }}
+              </span>
             </h3>
-            <p class="text-sm text-gray-500 truncate">
+            <p class="text-sm text-base-content/50 truncate">
-              {{ 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,16 +59,16 @@
             </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'">
               <div class="w-full h-full overflow-auto">
-                <div v-if="textLoading" class="flex items-center justify-center py-10 text-sm text-gray-500">
+                <div v-if="textLoading" class="flex items-center justify-center py-10 text-sm text-base-content/50">
                   <span class="loading loading-spinner loading-md mr-2" />
                   Chargement du document...
                 </div>
@@ -59,7 +82,7 @@
             </template>
 
             <template v-else>
-              <div class="text-sm text-gray-500 text-center px-6">
+              <div class="text-sm text-base-content/50 text-center px-6">
                 Prévisualisation non disponible pour ce type de document.
               </div>
             </template>
@@ -80,31 +103,110 @@
 </template>
 
 <script setup>
-import { ref, computed, watch } from 'vue'
+import { ref, computed, watch, onUnmounted } from 'vue'
-import { getPreviewType, describeDocument } from '~/utils/documentPreview'
+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))
+// --- Carousel navigation ---
-const documentDescription = computed(() => describeDocument(props.document))
+
+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 || ''
+      const url = doc.fileUrl || doc.path || ''
-      if (path.startsWith('data:')) {
+      if (!url) {
-        const base64Part = path.split(',')[1] || ''
+        textError.value = 'Aucune URL de document disponible.'
-        if (!base64Part) {
+        return
-          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 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 url = activeDoc.value?.downloadUrl || activeDoc.value?.fileUrl || activeDoc.value?.path
-  const link = document.createElement('a')
+  if (!url) { return }
-  link.href = props.document.path
+  window.open(url, '_blank')
-  link.download = props.document.filename || props.document.name || 'document'
-  link.target = '_blank'
-  link.click()
 }
 </script>

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'));

app/components/DocumentUpload.vue

@@ -13,7 +13,7 @@
         <h3 class="font-semibold">
           {{ title }}
         </h3>
-        <p class="text-sm text-gray-500">
+        <p class="text-sm text-base-content/50">
           {{ subtitle }}
         </p>
       </div>
@@ -22,7 +22,7 @@
         <button type="button" class="btn btn-primary btn-sm" @click="triggerFileDialog">
           Sélectionner des fichiers
         </button>
-        <span class="text-xs text-gray-500">ou glisser-déposer ici</span>
+        <span class="text-xs text-base-content/50">ou glisser-déposer ici</span>
       </div>
 
       <input
@@ -54,7 +54,7 @@
             </div>
             <div class="flex flex-col">
               <span class="font-medium">{{ file.name }}</span>
-              <span class="text-xs text-gray-500">{{ formatSize(file.size) }} • {{ file.type || 'Type inconnu' }}</span>
+              <span class="text-xs text-base-content/50">{{ formatSize(file.size) }} • {{ file.type || 'Type inconnu' }}</span>
             </div>
           </div>
           <button type="button" class="btn btn-ghost btn-xs" @click="removeFile(file)">
@@ -130,7 +130,7 @@ const cleanupRemovedPreviews = (previousFiles = [], nextFiles = []) => {
   })
 }
 
-const selectedFiles = computed(() => internalFiles.value)
+const selectedFiles = internalFiles
 
 watch(
   () => props.modelValue,

app/components/ModelStructureViewer.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="space-y-4">
-    <div class="flex flex-wrap items-center gap-2 text-sm text-gray-600">
+    <div class="flex flex-wrap items-center gap-2 text-sm text-base-content/60">
       <span v-if="stats.customFields" class="badge badge-outline badge-sm">{{ stats.customFields }} champ(s)</span>
       <span v-if="stats.pieces" class="badge badge-outline badge-sm">{{ stats.pieces }} pièce(s)</span>
       <span v-if="stats.subcomponents" class="badge badge-outline badge-sm">{{ stats.subcomponents }} sous-composant(s)</span>
-      <span v-if="!stats.customFields && !stats.pieces && !stats.subcomponents" class="text-xs text-gray-500">
+      <span v-if="!stats.customFields && !stats.pieces && !stats.subcomponents" class="text-xs text-base-content/50">
         Structure vide
       </span>
     </div>

app/components/PageHero.vue

@@ -1,11 +1,11 @@
 <template>
   <section :class="sectionClasses">
     <div :class="contentClasses">
-      <div :class="['space-y-4', maxWidthClass]">
+      <div :class="['space-y-3', maxWidthClass]">
-        <component :is="headingTag" v-if="title" class="text-4xl font-bold">
+        <component :is="headingTag" v-if="title" class="text-4xl font-bold tracking-tight">
           {{ title }}
         </component>
-        <p v-if="subtitle" class="text-sm opacity-90">
+        <p v-if="subtitle" class="text-sm opacity-80 leading-relaxed">
           {{ subtitle }}
         </p>
         <slot />
@@ -58,9 +58,9 @@ const props = defineProps({
 })
 
 const sectionClasses = computed(() => {
-  const classes = ['hero', 'bg-gradient-to-r', props.gradientFrom, props.gradientTo, props.minHeight]
+  const classes = ['hero', 'bg-gradient-to-br', props.gradientFrom, props.gradientTo, props.minHeight]
   if (props.rounded) {
-    classes.push('rounded-lg')
+    classes.push('rounded-xl', 'overflow-hidden')
   }
   return classes
 })

app/components/PieceModelStructureEditor.vue

@@ -1,22 +1,16 @@
 <template>
   <div class="space-y-6">
     <section class="space-y-3">
-      <header class="flex items-center justify-between">
+      <header>
-        <div>
+        <h3 class="text-sm font-semibold">
-          <h3 class="text-sm font-semibold">
+          Produits inclus par défaut
-            Produits inclus par défaut
+        </h3>
-          </h3>
+        <p class="text-xs text-base-content/70">
-          <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>
-          </p>
-        </div>
-        <button type="button" class="btn btn-outline btn-xs" @click="addProduct">
-          <IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" />
-          Ajouter
-        </button>
       </header>
 
-      <p v-if="!products.length" class="text-xs text-gray-500">
+      <p v-if="!products.length" class="text-xs text-base-content/50">
         Aucun produit défini.
       </p>
 
@@ -60,20 +54,18 @@
           </div>
         </li>
       </ul>
+      <button type="button" class="btn btn-outline btn-xs" @click="addProduct">
+        <IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" />
+        Ajouter
+      </button>
     </section>
 
     <section class="space-y-3">
-      <header class="flex items-center justify-between">
+      <h3 class="text-sm font-semibold">
-        <h3 class="text-sm font-semibold">
+        Champs personnalisés
-          Champs personnalisés
+      </h3>
-        </h3>
-        <button type="button" class="btn btn-outline btn-xs" @click="addField">
-          <IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" />
-          Ajouter
-        </button>
-      </header>
 
-      <p v-if="!fields.length" class="text-xs text-gray-500">
+      <p v-if="!fields.length" class="text-xs text-base-content/50">
         Aucun champ personnalisé n'a encore été défini.
       </p>
 
@@ -90,95 +82,83 @@
           @drop.prevent="onDrop(index)"
           @dragend="onDragEnd"
         >
-        <div class="flex items-start gap-3">
+          <div class="flex items-start gap-3">
-          <button
+            <button
-            type="button"
+              type="button"
-            class="btn btn-ghost btn-xs btn-square cursor-grab active:cursor-grabbing mt-1"
+              class="btn btn-ghost btn-xs btn-square cursor-grab active:cursor-grabbing mt-1"
-            title="Réordonner"
+              title="Réordonner"
-            draggable="false"
+              draggable="false"
-          >
+            >
-            <IconLucideGripVertical class="w-4 h-4" aria-hidden="true" />
+              <IconLucideGripVertical class="w-4 h-4" aria-hidden="true" />
-          </button>
+            </button>
 
-          <div class="flex-1 space-y-2">
+            <div class="flex-1 space-y-2">
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
-              <input
+                <input
-                v-model="field.name"
+                  v-model="field.name"
-                type="text"
+                  type="text"
-                class="input input-bordered input-xs"
+                  class="input input-bordered input-xs"
-                placeholder="Nom du champ"
+                  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">
-                <option value="text">
+                  <option value="text">
-                  Texte
+                    Texte
-                </option>
+                  </option>
-                <option value="number">
+                  <option value="number">
-                  Nombre
+                    Nombre
-                </option>
+                  </option>
-                <option value="select">
+                  <option value="select">
-                  Liste
+                    Liste
-                </option>
+                  </option>
-                <option value="boolean">
+                  <option value="boolean">
-                  Oui/Non
+                    Oui/Non
-                </option>
+                  </option>
-                <option value="date">
+                  <option value="date">
-                  Date
+                    Date
-                </option>
+                  </option>
-              </select>
+                </select>
+              </div>
+
+              <div class="flex items-center gap-2 text-xs">
+                <input v-model="field.required" type="checkbox" class="checkbox checkbox-xs">
+                Obligatoire
+              </div>
+
+              <textarea
+                v-if="field.type === 'select'"
+                v-model="field.optionsText"
+                class="textarea textarea-bordered textarea-xs h-20"
+                placeholder="Option 1&#10;Option 2"
+              />
             </div>
 
-            <div class="flex items-center gap-2 text-xs">
+            <button
-              <input v-model="field.required" type="checkbox" class="checkbox checkbox-xs">
+              type="button"
-              Obligatoire
+              class="btn btn-error btn-xs btn-square"
-            </div>
+              @click="removeField(index)"
-
+            >
-            <textarea
+              <IconLucideTrash class="w-4 h-4" aria-hidden="true" />
-              v-if="field.type === 'select'"
+            </button>
-              v-model="field.optionsText"
-              class="textarea textarea-bordered textarea-xs h-20"
-              placeholder="Option 1&#10;Option 2"
-            />
           </div>
-
+        </li>
-          <button
+      </ul>
-            type="button"
+      <button type="button" class="btn btn-outline btn-xs" @click="addField">
-            class="btn btn-error btn-xs btn-square"
+        <IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" />
-            @click="removeField(index)"
+        Ajouter
-          >
+      </button>
-            <IconLucideTrash class="w-4 h-4" aria-hidden="true" />
-          </button>
-        </div>
-      </li>
-    </ul>
     </section>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, reactive, ref, watch } from 'vue'
 import IconLucideGripVertical from '~icons/lucide/grip-vertical'
 import IconLucidePlus from '~icons/lucide/plus'
 import IconLucideTrash from '~icons/lucide/trash'
-import type {
+import type { PieceModelStructure } from '~/shared/types/inventory'
-  PieceModelCustomField,
+import { usePieceStructureEditorLogic } from '~/composables/usePieceStructureEditorLogic'
-  PieceModelCustomFieldType,
-  PieceModelProduct,
-  PieceModelStructure,
-  PieceModelStructureEditorField,
-} from '~/shared/types/inventory'
-import { normalizePieceStructureForSave } from '~/shared/modelUtils'
-import { useProductTypes } from '~/composables/useProductTypes'
 
 defineOptions({ name: 'PieceModelStructureEditor' })
 
-type EditorField = PieceModelStructureEditorField & { uid: string }
-type EditorProduct = {
-  uid: string
-  typeProductId: string
-  typeProductLabel: string
-  familyCode: string
-}
-
 const props = defineProps<{
   modelValue?: PieceModelStructure | null
 }>()
@@ -187,354 +167,20 @@ const emit = defineEmits<{
   (event: 'update:modelValue', value: PieceModelStructure): void
 }>()
 
-const { productTypes, loadProductTypes } = useProductTypes()
+const {
-
+  fields,
-const ensureArray = <T,>(value: T[] | null | undefined): T[] =>
+  products,
-  Array.isArray(value) ? value : []
+  productTypeOptions,
-
+  formatProductTypeOption,
-const normalizeLineEndings = (value: string): string =>
+  handleProductTypeSelect,
-  value.replace(/\r\n/g, '\n').replace(/\r/g, '\n')
+  addProduct,
-
+  removeProduct,
-const safeClone = <T,>(value: T, fallback: T): T => {
+  addField,
-  try {
+  removeField,
-    return JSON.parse(JSON.stringify(value ?? fallback)) as T
+  reorderClass,
-  } catch {
+  onDragStart,
-    return JSON.parse(JSON.stringify(fallback)) as T
+  onDragEnter,
-  }
+  onDrop,
-}
+  onDragEnd,
-
+} = usePieceStructureEditorLogic({ props, emit })
-const extractRest = (structure?: PieceModelStructure | null): Record<string, unknown> => {
-  if (!structure || typeof structure !== 'object') {
-    return {}
-  }
-  const entries = Object.entries(structure).filter(
-    ([key]) => key !== 'customFields' && key !== 'products',
-  )
-  return safeClone(Object.fromEntries(entries), {})
-}
-
-let uidCounter = 0
-const createUid = (scope: 'field' | 'product'): string => {
-  if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
-    return crypto.randomUUID()
-  }
-  uidCounter += 1
-  return `piece-${scope}-${Date.now().toString(36)}-${uidCounter}`
-}
-
-const toEditorField = (
-  input: Partial<PieceModelStructureEditorField> | null | undefined,
-  index: number,
-): EditorField => {
-  const baseType = typeof input?.type === 'string' && input.type ? input.type : 'text'
-  const optionsText = normalizeLineEndings(
-    typeof input?.optionsText === 'string'
-      ? input.optionsText
-      : Array.isArray(input?.options)
-        ? input.options.join('\n')
-        : '',
-  )
-
-  return {
-    uid: createUid('field'),
-    name: typeof input?.name === 'string' ? input.name : '',
-    type: baseType as PieceModelCustomFieldType,
-    required: Boolean(input?.required),
-    optionsText,
-    orderIndex: typeof input?.orderIndex === 'number' ? input.orderIndex : index,
-  }
-}
-
-const hydrateFields = (structure?: PieceModelStructure | null): EditorField[] => {
-  const source = ensureArray(structure?.customFields)
-  return source
-    .map((field, index) => toEditorField(field, index))
-    .sort((a, b) => (a.orderIndex ?? 0) - (b.orderIndex ?? 0))
-    .map((field, index) => ({ ...field, orderIndex: index }))
-}
-
-const toEditorProduct = (
-  input: Partial<PieceModelProduct> | null | undefined,
-): EditorProduct => ({
-  uid: createUid('product'),
-  typeProductId: typeof input?.typeProductId === 'string' ? input.typeProductId : '',
-  typeProductLabel:
-    typeof input?.typeProductLabel === 'string' ? input.typeProductLabel : '',
-  familyCode: typeof input?.familyCode === 'string' ? input.familyCode : '',
-})
-
-const hydrateProducts = (structure?: PieceModelStructure | null): EditorProduct[] => {
-  const source = Array.isArray(structure?.products) ? structure?.products : []
-  return source.map((product) => toEditorProduct(product))
-}
-
-const productTypeOptions = computed(() => productTypes.value ?? [])
-
-const productTypeMap = computed(() => {
-  const map = new Map<string, any>()
-  productTypeOptions.value.forEach((type: any) => {
-    if (type?.id) {
-      map.set(type.id, type)
-    }
-  })
-  return map
-})
-
-const formatProductTypeOption = (type: any) => {
-  if (!type) {
-    return ''
-  }
-  const parts: string[] = []
-  if (type.code) {
-    parts.push(type.code)
-  }
-  if (type.name) {
-    parts.push(type.name)
-  }
-  return parts.length ? parts.join(' • ') : type.id || ''
-}
-
-const updateProductTypeMetadata = (product: EditorProduct) => {
-  const option = product.typeProductId
-    ? productTypeMap.value.get(product.typeProductId)
-    : null
-  product.typeProductLabel = option?.name ?? ''
-}
-
-const handleProductTypeSelect = (product: EditorProduct) => {
-  const option = product.typeProductId
-    ? productTypeMap.value.get(product.typeProductId)
-    : null
-  product.typeProductLabel = option?.name ?? ''
-  if (option?.code) {
-    product.familyCode = option.code
-  }
-}
-
-const createEmptyProduct = (): EditorProduct => ({
-  uid: createUid('product'),
-  typeProductId: '',
-  typeProductLabel: '',
-  familyCode: '',
-})
-
-const addProduct = () => {
-  products.value.push(createEmptyProduct())
-}
-
-const removeProduct = (index: number) => {
-  products.value = products.value.filter((_, idx) => idx !== index)
-}
-
-const fields = ref<EditorField[]>(hydrateFields(props.modelValue))
-const products = ref<EditorProduct[]>(hydrateProducts(props.modelValue))
-const restState = ref<Record<string, unknown>>(extractRest(props.modelValue))
-
-const applyOrderIndex = (list: EditorField[]): EditorField[] =>
-  list.map((field, index) => ({
-    ...field,
-    orderIndex: index,
-  }))
-
-const normalizeProductEntry = (product: EditorProduct): PieceModelProduct | null => {
-  const typeProductId = typeof product.typeProductId === 'string' ? product.typeProductId.trim() : ''
-  const familyCode = typeof product.familyCode === 'string' ? product.familyCode.trim() : ''
-
-  if (!typeProductId && !familyCode) {
-    return null
-  }
-
-  const payload: PieceModelProduct = {}
-  if (typeProductId) {
-    payload.typeProductId = typeProductId
-  }
-  if (familyCode) {
-    payload.familyCode = familyCode
-  }
-  if (product.typeProductLabel) {
-    payload.typeProductLabel = product.typeProductLabel
-  }
-  return payload
-}
-
-const buildPayload = (
-  fieldsSource: EditorField[],
-  productsSource: EditorProduct[],
-  restSource: Record<string, unknown>,
-): PieceModelStructure => {
-  const normalizedFields = fieldsSource
-    .map<PieceModelCustomField | null>((field, index) => {
-      const name = field.name.trim()
-      if (!name) {
-        return null
-      }
-
-      const type = (field.type || 'text') as PieceModelCustomFieldType
-      const required = Boolean(field.required)
-      const payload: PieceModelCustomField = {
-        name,
-        type,
-        required,
-        orderIndex: index,
-      }
-
-      if (type === 'select') {
-        const options = normalizeLineEndings(field.optionsText)
-          .split('\n')
-          .map((option) => option.trim())
-          .filter((option) => option.length > 0)
-        if (options.length > 0) {
-          payload.options = options
-        }
-      }
-
-      return payload
-    })
-    .filter((field): field is PieceModelCustomField => Boolean(field))
-
-  const normalizedProducts = productsSource
-    .map((product) => normalizeProductEntry(product))
-    .filter((product): product is PieceModelProduct => Boolean(product))
-
-  const draft: PieceModelStructure = {
-    ...safeClone(restSource, {}),
-    products: normalizedProducts,
-    customFields: normalizedFields,
-  }
-
-  return normalizePieceStructureForSave(draft)
-}
-
-const serializeStructure = (structure?: PieceModelStructure | null): string => {
-  return JSON.stringify(normalizePieceStructureForSave(structure ?? { customFields: [] }))
-}
-
-let lastEmitted = serializeStructure(props.modelValue)
-
-const emitUpdate = () => {
-  const payload = buildPayload(fields.value, products.value, restState.value)
-  const serialized = JSON.stringify(payload)
-  if (serialized !== lastEmitted) {
-    lastEmitted = serialized
-    emit('update:modelValue', payload)
-  }
-}
-
-watch(fields, emitUpdate, { deep: true })
-watch(products, emitUpdate, { deep: true })
-watch(productTypeOptions, () => {
-  products.value.forEach((product) => updateProductTypeMetadata(product))
-})
-
-watch(
-  () => props.modelValue,
-  (value) => {
-    const incomingSerialized = serializeStructure(value)
-    if (incomingSerialized === lastEmitted) {
-      return
-    }
-    restState.value = extractRest(value)
-    fields.value = hydrateFields(value)
-    products.value = hydrateProducts(value)
-    products.value.forEach((product) => updateProductTypeMetadata(product))
-    lastEmitted = incomingSerialized
-  },
-  { deep: true },
-)
-
-onMounted(async () => {
-  if (!productTypeOptions.value.length) {
-    await loadProductTypes()
-  }
-  products.value.forEach((product) => updateProductTypeMetadata(product))
-})
-
-const dragState = reactive({
-  draggingIndex: null as number | null,
-  dropTargetIndex: null as number | null,
-})
-
-const resetDragState = () => {
-  dragState.draggingIndex = null
-  dragState.dropTargetIndex = null
-}
-
-const reorderFields = (from: number, to: number) => {
-  if (from === to) {
-    resetDragState()
-    return
-  }
-
-  const list = fields.value.slice()
-  if (from < 0 || to < 0 || from >= list.length || to >= list.length) {
-    resetDragState()
-    return
-  }
-
-  const [moved] = list.splice(from, 1)
-  list.splice(to, 0, moved)
-  fields.value = applyOrderIndex(list)
-  resetDragState()
-}
-
-const onDragStart = (index: number, event: DragEvent) => {
-  dragState.draggingIndex = index
-  dragState.dropTargetIndex = index
-  if (event.dataTransfer) {
-    event.dataTransfer.effectAllowed = 'move'
-  }
-}
-
-const onDragEnter = (index: number) => {
-  if (dragState.draggingIndex === null) {
-    return
-  }
-  dragState.dropTargetIndex = index
-}
-
-const onDrop = (index: number) => {
-  if (dragState.draggingIndex === null) {
-    resetDragState()
-    return
-  }
-  reorderFields(dragState.draggingIndex, index)
-}
-
-const onDragEnd = () => {
-  resetDragState()
-}
-
-const reorderClass = (index: number) => {
-  if (dragState.draggingIndex === index) {
-    return 'border-dashed border-primary bg-primary/5'
-  }
-  if (
-    dragState.draggingIndex !== null &&
-    dragState.dropTargetIndex === index &&
-    dragState.draggingIndex !== index
-  ) {
-    return 'border-primary border-dashed bg-primary/10'
-  }
-  return ''
-}
-
-const createEmptyField = (orderIndex: number): EditorField => ({
-  uid: createUid('field'),
-  name: '',
-  type: 'text',
-  required: false,
-  optionsText: '',
-  orderIndex,
-})
-
-const addField = () => {
-  const next = fields.value.slice()
-  next.push(createEmptyField(next.length))
-  fields.value = applyOrderIndex(next)
-}
-
-const removeField = (index: number) => {
-  const next = fields.value.filter((_, i) => i !== index)
-  fields.value = applyOrderIndex(next)
-}
 </script>

app/components/PieceSelect.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="space-y-1">
+    <SearchSelect
+      :model-value="modelValue ?? undefined"
+      :options="pieceOptions"
+      :loading="loading"
+      :placeholder="placeholder"
+      :empty-text="emptyText"
+      size="sm"
+      option-value="id"
+      option-label="name"
+      :disabled="disabled"
+      @update:modelValue="updateValue"
+    >
+      <template #option-description="{ option }">
+        <span class="text-xs text-base-content/60">
+          {{ formatDescription(option) }}
+        </span>
+      </template>
+    </SearchSelect>
+    <p v-if="helperText" class="text-xs text-base-content/60">
+      {{ helperText }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, watch } from 'vue'
+import SearchSelect from '~/components/common/SearchSelect.vue'
+import { usePieces } from '~/composables/usePieces'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string | null
+    placeholder?: string
+    emptyText?: string
+    helperText?: string
+    disabled?: boolean
+    typePieceId?: string | null
+  }>(),
+  {
+    modelValue: '',
+    placeholder: 'Sélectionner une pièce…',
+    emptyText: 'Aucune pièce disponible',
+    helperText: '',
+    disabled: false,
+    typePieceId: null,
+  },
+)
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string | null): void
+}>()
+
+const { pieces, loading, loadPieces } = usePieces()
+
+const pieceOptions = computed(() => {
+  const baseOptions = Array.isArray(pieces.value) ? pieces.value : []
+  if (!props.typePieceId) {
+    return baseOptions
+  }
+
+  const allowedTypeId = String(props.typePieceId)
+  return baseOptions.filter((piece: any) => {
+    const typeId =
+      piece?.typePieceId ||
+      piece?.typePiece?.id ||
+      null
+    return typeId ? String(typeId) === allowedTypeId : false
+  })
+})
+
+onMounted(() => {
+  if (pieceOptions.value.length === 0) {
+    loadPieces({ itemsPerPage: 200 }).catch((error: unknown) => {
+      console.error('Erreur lors du chargement des pièces:', error)
+    })
+  }
+})
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    if (typeof value === 'string' && value) {
+      const exists = pieceOptions.value.some((piece: any) => piece.id === value)
+      if (!exists && !loading.value) {
+        loadPieces({ itemsPerPage: 200, force: true }).catch((error: unknown) => {
+          console.error('Erreur lors du chargement des pièces:', error)
+        })
+      }
+    }
+  },
+)
+
+const updateValue = (value: string | number | null | undefined) => {
+  if (value === undefined || value === null || value === '') {
+    emit('update:modelValue', null)
+    return
+  }
+  emit('update:modelValue', String(value))
+}
+
+const formatDescription = (option: any) => {
+  const parts: string[] = []
+  if (option?.reference) {
+    parts.push(option.reference)
+  }
+  if (option?.prix !== undefined && option.prix !== null) {
+    const price = Number(option.prix)
+    if (!Number.isNaN(price)) {
+      parts.push(`${price.toFixed(2)} €`)
+    }
+  }
+  return parts.length ? parts.join(' • ') : 'Sans référence'
+}
+</script>

app/components/ProductDocumentsInline.vue

@@ -0,0 +1,78 @@
+<template>
+  <div
+    v-if="documents.length"
+    class="mt-2 space-y-2 rounded-md border border-base-200 bg-base-100 p-3 text-xs"
+  >
+    <h5 class="font-medium text-base-content">Documents du produit</h5>
+    <div
+      v-for="document in documents"
+      :key="document.id || document.path || document.name"
+      class="flex items-center justify-between gap-3 rounded border border-base-200 bg-base-100 px-3 py-2"
+    >
+      <div class="flex items-center gap-3">
+        <div
+          class="flex-shrink-0 overflow-hidden rounded-md border border-base-200 bg-base-200/70 flex items-center justify-center h-10 w-8"
+        >
+          <img
+            v-if="isImageDocument(document) && (document.fileUrl || document.path)"
+            :src="document.fileUrl || document.path"
+            class="h-full w-full object-cover"
+            :alt="`Aperçu de ${document.name}`"
+          >
+          <iframe
+            v-else-if="shouldInlinePdf(document)"
+            :src="documentPreviewSrc(document)"
+            class="h-full w-full border-0 bg-white"
+            title="Aperçu PDF"
+          />
+          <component
+            v-else
+            :is="documentIcon(document).component"
+            class="h-5 w-5"
+            :class="documentIcon(document).colorClass"
+            aria-hidden="true"
+          />
+        </div>
+        <div>
+          <div class="font-medium text-base-content">
+            {{ document.name }}
+          </div>
+          <div class="text-xs text-base-content/70">
+            {{ document.mimeType || 'Inconnu' }} • {{ formatSize(document.size) }}
+          </div>
+        </div>
+      </div>
+      <div class="flex items-center gap-2 text-xs">
+        <button
+          type="button"
+          class="btn btn-ghost btn-xs"
+          :disabled="!canPreviewDocument(document)"
+          :title="canPreviewDocument(document) ? 'Consulter le document' : 'Aucun aperçu disponible pour ce type'"
+          @click="$emit('preview', document)"
+        >
+          Consulter
+        </button>
+        <button type="button" class="btn btn-ghost btn-xs" @click="downloadDocument(document)">
+          Télécharger
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { canPreviewDocument, isImageDocument } from '~/utils/documentPreview'
+import {
+  formatSize,
+  shouldInlinePdf,
+  documentPreviewSrc,
+  documentIcon,
+  downloadDocument,
+} from '~/shared/utils/documentDisplayUtils'
+
+defineProps({
+  documents: { type: Array, required: true },
+})
+
+defineEmits(['preview'])
+</script>

app/components/ProductSelect.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="space-y-1">
     <SearchSelect
-      :model-value="modelValue"
+      :model-value="modelValue ?? undefined"
       :options="productOptions"
       :loading="loading"
       :placeholder="placeholder"
@@ -81,10 +81,10 @@ onMounted(() => {
 watch(
   () => props.modelValue,
   (value) => {
-    if (typeof value === 'string') {
+    if (typeof value === 'string' && value) {
       const exists = productOptions.value.some((product) => product.id === value)
-      if (!exists && productOptions.value.length === 0 && !loading.value) {
+      if (!exists && !loading.value) {
-        loadProducts().catch((error) => {
+        loadProducts({ force: true }).catch((error) => {
           console.error('Erreur lors du chargement des produits:', error)
         })
       }

app/components/StructureNodeEditor.vue

@@ -9,7 +9,7 @@
             </span>
           </label>
           <template v-if="isRoot">
-            <p class="text-[11px] text-gray-500">
+            <p class="text-[11px] text-base-content/50">
               Le composant racine correspond à la catégorie que vous éditez. Sélectionnez uniquement les familles pour les sous-composants.
             </p>
           </template>
@@ -17,6 +17,7 @@
             <select
               v-model="node.typeComposantId"
               class="select select-bordered select-sm w-full"
+              :disabled="isLocked"
               @change="handleComponentTypeSelect(node)"
             >
               <option value="">
@@ -30,7 +31,7 @@
                 {{ formatComponentTypeOption(type) }}
               </option>
             </select>
-            <p class="text-[11px] text-gray-500">
+            <p class="text-[11px] text-base-content/50">
               {{ node.typeComposantId ? `Sélection : ${getComponentTypeLabel(node.typeComposantId) || 'Inconnue'}` : 'Aucune famille sélectionnée' }}
             </p>
             <div v-if="!isRoot" class="form-control mt-2">
@@ -42,6 +43,7 @@
                 type="text"
                 class="input input-bordered input-xs"
                 placeholder="Alias du sous-composant"
+                :disabled="isLocked"
               />
             </div>
           </template>
@@ -52,27 +54,26 @@
           </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">
         <section v-if="isRoot" class="space-y-3">
-          <div class="flex items-center justify-between gap-2">
+          <h4 :class="headingClass">
-            <h4 :class="headingClass">
+            {{ isRoot ? 'Champs personnalisés du composant' : 'Champs personnalisés' }}
-              {{ isRoot ? 'Champs personnalisés du composant' : 'Champs personnalisés' }}
+          </h4>
-            </h4>
+          <p v-if="!(node.customFields?.length)" class="text-xs text-base-content/50">
-            <button type="button" class="btn btn-outline btn-xs" @click="addCustomField">
-              <IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" />
-              Ajouter
-            </button>
-          </div>
-          <p v-if="!(node.customFields?.length)" class="text-xs text-gray-500">
             Aucun champ n'a encore été défini.
           </p>
           <div v-else class="space-y-2">
@@ -137,19 +138,17 @@
               </div>
             </div>
           </div>
+          <button type="button" class="btn btn-outline btn-xs" @click="addCustomField">
+            <IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" />
+            Ajouter
+          </button>
         </section>
 
         <section v-if="isRoot" class="space-y-3">
-          <div class="flex items-center justify-between gap-2">
+          <h4 :class="headingClass">
-            <h4 :class="headingClass">
+            {{ isRoot ? 'Produits inclus par défaut' : 'Produits' }}
-              {{ isRoot ? 'Produits inclus par défaut' : 'Produits' }}
+          </h4>
-            </h4>
+          <p v-if="!(node.products?.length)" class="text-xs text-base-content/50">
-            <button type="button" class="btn btn-outline btn-xs" @click="addProduct">
-              <IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" />
-              Ajouter
-            </button>
-          </div>
-          <p v-if="!(node.products?.length)" class="text-xs text-gray-500">
             Aucun produit défini.
           </p>
           <div v-else class="space-y-2">
@@ -200,19 +199,17 @@
               </div>
             </div>
           </div>
+          <button type="button" class="btn btn-outline btn-xs" @click="addProduct">
+            <IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" />
+            Ajouter
+          </button>
         </section>
 
         <section v-if="isRoot" class="space-y-3">
-          <div class="flex items-center justify-between gap-2">
+          <h4 :class="headingClass">
-            <h4 :class="headingClass">
+            {{ isRoot ? 'Pièces incluses par défaut' : 'Pièces' }}
-              {{ isRoot ? 'Pièces incluses par défaut' : 'Pièces' }}
+          </h4>
-            </h4>
+          <p v-if="!(node.pieces?.length)" class="text-xs text-base-content/50">
-            <button type="button" class="btn btn-outline btn-xs" @click="addPiece">
-              <IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" />
-              Ajouter
-            </button>
-          </div>
-          <p v-if="!(node.pieces?.length)" class="text-xs text-gray-500">
             Aucune pièce définie.
           </p>
           <div v-else class="space-y-2">
@@ -257,10 +254,22 @@
                         </option>
                       </select>
                     </div>
-                    <p class="mt-1 text-[11px] text-gray-500">
+                    <p class="mt-1 text-[11px] text-base-content/50">
                       {{ piece.typePieceId ? `Sélection : ${getPieceTypeLabel(piece.typePieceId) || 'Inconnue'}` : 'Aucune famille sélectionnée' }}
                     </p>
                   </div>
+                  <div class="form-control">
+                    <label class="label py-1"><span class="label-text text-xs">Quantité</span></label>
+                    <input
+                      v-model.number="piece.quantity"
+                      type="number"
+                      :min="1"
+                      step="1"
+                      placeholder="Qté"
+                      class="input input-bordered input-sm md:input-md w-20"
+                      @input="piece.quantity = Math.max(1, piece.quantity || 1)"
+                    />
+                  </div>
                 </div>
                 <button type="button" class="btn btn-error btn-xs btn-square" @click="removePiece(index)">
                   <IconLucideTrash class="w-4 h-4" aria-hidden="true" />
@@ -268,25 +277,18 @@
               </div>
             </div>
           </div>
+          <button type="button" class="btn btn-outline btn-xs" @click="addPiece">
+            <IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" />
+            Ajouter
+          </button>
         </section>
 
         <section v-if="canManageSubcomponents || hasSubcomponents" class="space-y-3">
-          <div class="flex items-center justify-between gap-2">
+          <h4 :class="headingClass">Sous-composants</h4>
-            <h4 :class="headingClass">Sous-composants</h4>
+          <p v-if="!isRoot && canManageSubcomponents" class="text-[11px] text-base-content/50">
-            <button
-              v-if="canManageSubcomponents"
-              type="button"
-              class="btn btn-outline btn-xs"
-              @click="addSubComponent"
-            >
-              <IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" />
-              Ajouter
-            </button>
-          </div>
-          <p v-if="!isRoot && canManageSubcomponents" class="text-[11px] text-gray-500">
             Sélectionnez uniquement la famille de ce sous-composant ; il sera configuré via son propre modèle.
           </p>
-          <p v-if="!hasSubcomponents" class="text-xs text-gray-500">
+          <p v-if="!hasSubcomponents" class="text-xs text-base-content/50">
             Aucun sous-composant défini.
           </p>
           <div v-else class="space-y-3">
@@ -321,6 +323,15 @@
               />
             </div>
           </div>
+          <button
+            v-if="canManageSubcomponents"
+            type="button"
+            class="btn btn-outline btn-xs"
+            @click="addSubComponent"
+          >
+            <IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" />
+            Ajouter
+          </button>
         </section>
       </div>
     </div>
@@ -328,26 +339,13 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
 import IconLucidePlus from '~icons/lucide/plus'
 import IconLucideTrash from '~icons/lucide/trash'
 import IconLucideGripVertical from '~icons/lucide/grip-vertical'
-import type { ComponentModelPiece, ComponentModelProduct, ComponentModelStructureNode } from '~/shared/types/inventory'
+import type { EditableStructureNode, ModelTypeOption } from '~/composables/useStructureNodeLogic'
 
 defineOptions({ name: 'StructureNodeEditor' })
 
-type ModelTypeOption = {
-  id: string
-  name: string
-  code?: string | null
-}
-
-type EditableStructureNode = ComponentModelStructureNode & {
-  customFields?: any[]
-  pieces?: ComponentModelPiece[]
-  products?: ComponentModelProduct[]
-}
-
 const props = withDefaults(defineProps<{
   node: EditableStructureNode
   depth?: number
@@ -359,6 +357,7 @@ const props = withDefaults(defineProps<{
   lockedTypeLabel?: string
   allowSubcomponents?: boolean
   maxSubcomponentDepth?: number
+  isLocked?: boolean
 }>(), {
   depth: 0,
   componentTypes: () => [],
@@ -369,718 +368,60 @@ const props = withDefaults(defineProps<{
   lockedTypeLabel: '',
   allowSubcomponents: true,
   maxSubcomponentDepth: Infinity,
+  isLocked: false,
 })
 
 const emit = defineEmits(['remove'])
 
-const componentTypes = computed(() => props.componentTypes ?? [])
+const {
-const pieceTypes = computed(() => props.pieceTypes ?? [])
+  isLocked,
-const productTypes = computed(() => props.productTypes ?? [])
+  componentTypes,
-const allowSubcomponents = computed(() => props.allowSubcomponents !== false)
+  pieceTypes,
-const maxSubcomponentDepth = computed(() =>
+  productTypes,
-  typeof props.maxSubcomponentDepth === 'number' ? props.maxSubcomponentDepth : Infinity,
-)
-const currentDepth = computed(() => Math.max(0, props.depth ?? 0))
-const canManageSubcomponents = computed(
-  () => allowSubcomponents.value && currentDepth.value < maxSubcomponentDepth.value,
-)
-const childAllowSubcomponents = computed(
-  () => allowSubcomponents.value && currentDepth.value + 1 < maxSubcomponentDepth.value,
-)
-const hasSubcomponents = computed(
-  () => Array.isArray(props.node?.subcomponents) && props.node.subcomponents.length > 0,
-)
-
-const depthClasses = ['', 'ml-4', 'ml-8', 'ml-12', 'ml-16', 'ml-20']
-const containerClass = computed(() => {
-  const level = currentDepth.value
-  const index = Math.min(level, depthClasses.length - 1)
-  return level === 0 ? 'space-y-4' : `${depthClasses[index]} space-y-4`
-})
-
-const headingClass = computed(() => (props.isRoot ? 'text-sm font-semibold' : 'text-xs font-semibold'))
-const lockedTypeDisplay = computed(() => {
-  if (props.lockedTypeLabel) {
-    return props.lockedTypeLabel
-  }
-  return getComponentTypeLabel(props.node?.typeComposantId) || 'Famille non définie'
-})
-
-const formatModelTypeOption = (type: ModelTypeOption | undefined | null) =>
-  type?.name ?? ''
-
-const componentTypeMap = computed(() => {
-  const map = new Map<string, ModelTypeOption>()
-  componentTypes.value.forEach((type) => {
-    if (type && typeof type.id === 'string') {
-      map.set(type.id, type)
-    }
-  })
-  return map
-})
-
-const componentTypeCodeMap = computed(() => {
-  const map = new Map<string, ModelTypeOption>()
-  componentTypes.value.forEach((type) => {
-    const code = typeof type?.code === 'string' ? type.code.trim() : ''
-    if (code) {
-      map.set(code, type)
-    }
-  })
-  return map
-})
-
-const pieceTypeMap = computed(() => {
-  const map = new Map<string, ModelTypeOption>()
-  pieceTypes.value.forEach((type) => {
-    if (type && typeof type.id === 'string') {
-      map.set(type.id, type)
-    }
-  })
-  return map
-})
-
-const productTypeMap = computed(() => {
-  const map = new Map<string, ModelTypeOption>()
-  productTypes.value.forEach((type) => {
-    if (type && typeof type.id === 'string') {
-      map.set(type.id, type)
-    }
-  })
-  return map
-})
-
-const getComponentTypeLabel = (id?: string) => {
-  if (!id) return ''
-  return formatModelTypeOption(componentTypeMap.value.get(id))
-}
-
-const getPieceTypeLabel = (id?: string) => {
-  if (!id) return ''
-  return formatModelTypeOption(pieceTypeMap.value.get(id))
-}
-
-const getProductTypeLabel = (id?: string) => {
-  if (!id) return ''
-  return formatModelTypeOption(productTypeMap.value.get(id))
-}
-
-const formatComponentTypeOption = (type: ModelTypeOption | undefined | null) =>
-  formatModelTypeOption(type)
-
-const formatPieceTypeOption = (type: ModelTypeOption | undefined | null) =>
-  formatModelTypeOption(type)
-
-const formatProductTypeOption = (type: ModelTypeOption | undefined | null) =>
-  formatModelTypeOption(type)
-
-const ensureArray = (key: 'customFields' | 'pieces' | 'products' | 'subcomponents') => {
-  if (!Array.isArray((props.node as any)[key])) {
-    if (key === 'subcomponents') {
-      props.node.subcomponents = []
-    } else if (key === 'products') {
-      props.node.products = []
-    } else {
-      (props.node as any)[key] = []
-    }
-  }
-}
-
-const syncComponentType = (component: EditableStructureNode) => {
-  if (!component) {
-    return
-  }
-  if (props.isRoot) {
-    component.typeComposantId = ''
-    component.typeComposantLabel = ''
-    component.familyCode = ''
-    if (component.alias) {
-      component.alias = ''
-    }
-    return
-  }
-  if (props.lockType && props.isRoot) {
-    if (props.lockedTypeLabel) {
-      component.typeComposantLabel = props.lockedTypeLabel
-      if (!component.alias || component.alias === component.typeComposantLabel) {
-        component.alias = props.lockedTypeLabel
-      }
-    }
-    if (component.typeComposantId) {
-      const option = componentTypeMap.value.get(component.typeComposantId)
-      component.familyCode = option?.code ?? component.familyCode
-    }
-    return
-  }
-  const id = typeof component.typeComposantId === 'string'
-    ? component.typeComposantId
-    : ''
-
-  if (!id) {
-    const code =
-      typeof component.familyCode === 'string' && component.familyCode
-        ? component.familyCode
-        : ''
-    if (code) {
-      const codeMatch = componentTypeCodeMap.value.get(code)
-      if (codeMatch?.id) {
-        component.typeComposantId = codeMatch.id
-        component.typeComposantLabel = formatModelTypeOption(codeMatch)
-        component.familyCode = codeMatch.code ?? component.familyCode
-        if (!component.alias || component.alias === '' || component.alias === lockedTypeDisplay.value) {
-          component.alias = codeMatch.name || component.typeComposantLabel
-        }
-        return
-      }
-    }
-    component.typeComposantLabel = ''
-    component.familyCode = ''
-    return
-  }
-
-  const option = componentTypeMap.value.get(id)
-  if (!option) {
-    component.typeComposantLabel = ''
-    component.familyCode = ''
-    return
-  }
-
-  component.typeComposantLabel = formatModelTypeOption(option)
-  component.familyCode = option.code ?? component.familyCode
-  if (!component.alias || component.alias === '' || component.alias === lockedTypeDisplay.value) {
-    component.alias = option.name || component.typeComposantLabel
-  }
-}
-
-const updatePieceTypeLabel = (piece: ComponentModelPiece & Record<string, any>) => {
-  if (!piece) return
-
-  if (piece.typePieceId) {
-    const option = pieceTypeMap.value.get(piece.typePieceId)
-    if (option) {
-      piece.typePieceLabel = formatPieceTypeOption(option)
-      return
-    }
-  }
-
-  if (piece.typePieceLabel) {
-    const normalized = piece.typePieceLabel.trim().toLowerCase()
-    if (normalized) {
-      const match = pieceTypes.value.find((type) => {
-        const formatted = formatPieceTypeOption(type).toLowerCase()
-        const name = (type?.name ?? '').toLowerCase()
-        const code = (type?.code ?? '').toLowerCase()
-        return formatted === normalized || name === normalized || (!!code && code === normalized)
-      })
-      if (match) {
-        piece.typePieceId = match.id
-        piece.typePieceLabel = formatPieceTypeOption(match)
-        return
-      }
-    }
-  }
-}
-
-const updateProductTypeLabel = (product: ComponentModelProduct & Record<string, any>) => {
-  if (!product) return
-
-  if (product.typeProductId) {
-    const option = productTypeMap.value.get(product.typeProductId)
-    if (option) {
-      product.typeProductLabel = formatProductTypeOption(option)
-      product.familyCode = option.code ?? product.familyCode ?? ''
-      return
-    }
-  }
-
-  if (product.typeProductLabel) {
-    const normalized = product.typeProductLabel.trim().toLowerCase()
-    if (normalized) {
-      const match = productTypes.value.find((type) => {
-        const formatted = formatProductTypeOption(type).toLowerCase()
-        const name = (type?.name ?? '').toLowerCase()
-        const code = (type?.code ?? '').toLowerCase()
-        return formatted === normalized || name === normalized || (!!code && code === normalized)
-      })
-      if (match) {
-        product.typeProductId = match.id
-        product.typeProductLabel = formatProductTypeOption(match)
-        product.familyCode = match.code ?? product.familyCode ?? ''
-        return
-      }
-    }
-  }
-}
-
-const syncPieceLabels = (pieces?: any[]) => {
-  if (!Array.isArray(pieces)) {
-    return
-  }
-  pieces.forEach((piece) => {
-    updatePieceTypeLabel(piece)
-  })
-}
-
-const syncProductLabels = (products?: any[]) => {
-  if (!Array.isArray(products)) {
-    return
-  }
-  products.forEach((product) => {
-    updateProductTypeLabel(product)
-  })
-}
-
-const handleComponentTypeSelect = (component: any) => {
-  syncComponentType(component)
-}
-
-const handlePieceTypeSelect = (piece: ComponentModelPiece & Record<string, any>) => {
-  if (!piece) {
-    return
-  }
-  const id = typeof piece.typePieceId === 'string' ? piece.typePieceId : ''
-  if (!id) {
-    piece.typePieceLabel = ''
-    return
-  }
-  const option = pieceTypeMap.value.get(id)
-  if (!option) {
-    piece.typePieceId = ''
-    piece.typePieceLabel = ''
-    return
-  }
-  piece.typePieceLabel = formatPieceTypeOption(option)
-}
-
-const handleProductTypeSelect = (product: ComponentModelProduct & Record<string, any>) => {
-  if (!product) {
-    return
-  }
-  const id = typeof product.typeProductId === 'string' ? product.typeProductId : ''
-  if (!id) {
-    product.typeProductLabel = ''
-    return
-  }
-  const option = productTypeMap.value.get(id)
-  if (!option) {
-    product.typeProductId = ''
-    product.typeProductLabel = ''
-    return
-  }
-  product.typeProductLabel = formatProductTypeOption(option)
-  product.familyCode = option.code ?? product.familyCode ?? ''
-}
-
-const customFieldDragState = ref({
-  draggingIndex: null as number | null,
-  dropTargetIndex: null as number | null,
-})
-
-const reindexCustomFields = () => {
-  if (!Array.isArray(props.node.customFields)) {
-    return
-  }
-  props.node.customFields.forEach((field: any, index: number) => {
-    if (!field || typeof field !== 'object') {
-      return
-    }
-    field.orderIndex = index
-  })
-}
-
-const resetCustomFieldDragState = () => {
-  customFieldDragState.value.draggingIndex = null
-  customFieldDragState.value.dropTargetIndex = null
-}
-
-const onCustomFieldDragStart = (index: number, event: DragEvent) => {
-  customFieldDragState.value.draggingIndex = index
-  customFieldDragState.value.dropTargetIndex = index
-  if (event.dataTransfer) {
-    event.dataTransfer.effectAllowed = 'move'
-  }
-}
-
-const onCustomFieldDragEnter = (index: number) => {
-  if (customFieldDragState.value.draggingIndex === null) {
-    return
-  }
-  customFieldDragState.value.dropTargetIndex = index
-}
-
-const onCustomFieldDrop = (index: number) => {
-  if (!Array.isArray(props.node.customFields)) {
-    resetCustomFieldDragState()
-    return
-  }
-  const from = customFieldDragState.value.draggingIndex
-  const to = index
-  if (from === null || to === null) {
-    resetCustomFieldDragState()
-    return
-  }
-  moveItemInPlace(props.node.customFields, from, to)
-  reindexCustomFields()
-  resetCustomFieldDragState()
-}
-
-const onCustomFieldDragEnd = () => {
-  resetCustomFieldDragState()
-}
-
-const customFieldReorderClass = (index: number) => {
-  if (customFieldDragState.value.draggingIndex === index) {
-    return 'border-dashed border-primary'
-  }
-  if (
-    customFieldDragState.value.draggingIndex !== null &&
-    customFieldDragState.value.dropTargetIndex === index &&
-    customFieldDragState.value.draggingIndex !== index
-  ) {
-    return 'border-primary border-dashed bg-primary/5'
-  }
-  return ''
-}
-
-const addCustomField = () => {
-  ensureArray('customFields')
-  const nextIndex = Array.isArray(props.node.customFields)
-    ? props.node.customFields.length
-    : 0
-  props.node.customFields.push({
-    name: '',
-    type: 'text',
-    required: false,
-    optionsText: '',
-    options: [],
-    orderIndex: nextIndex,
-  })
-  reindexCustomFields()
-}
-
-const removeCustomField = (index: number) => {
-  if (!Array.isArray(props.node.customFields)) return
-  props.node.customFields.splice(index, 1)
-  reindexCustomFields()
-}
-
-const addPiece = () => {
-  ensureArray('pieces')
-  props.node.pieces.push({
-    typePieceId: '',
-    typePieceLabel: '',
-    reference: '',
-    familyCode: '',
-    role: '',
-  })
-}
-
-const removePiece = (index: number) => {
-  if (!Array.isArray(props.node.pieces)) return
-  props.node.pieces.splice(index, 1)
-}
-
-const addProduct = () => {
-  ensureArray('products')
-  props.node.products.push({
-    typeProductId: '',
-    typeProductLabel: '',
-    familyCode: '',
-  })
-}
-
-const removeProduct = (index: number) => {
-  if (!Array.isArray(props.node.products)) return
-  props.node.products.splice(index, 1)
-}
-
-const addSubComponent = () => {
-  if (!canManageSubcomponents.value) {
-    return
-  }
-  ensureArray('subcomponents')
-  props.node.subcomponents.push({
-    typeComposantId: '',
-    typeComposantLabel: '',
-    modelId: '',
-    familyCode: '',
-    alias: '',
-    subcomponents: [],
-  })
-}
-
-const removeSubComponent = (index: number) => {
-  if (!Array.isArray(props.node.subcomponents)) return
-  props.node.subcomponents.splice(index, 1)
-}
-
-const draggingPieceIndex = ref<number | null>(null)
-const pieceDropTargetIndex = ref<number | null>(null)
-const draggingProductIndex = ref<number | null>(null)
-const productDropTargetIndex = ref<number | null>(null)
-const draggingSubcomponentIndex = ref<number | null>(null)
-const subcomponentDropTargetIndex = ref<number | null>(null)
-
-const moveItemInPlace = <T,>(list: T[], from: number, to: number) => {
-  if (from === to) {
-    return
-  }
-  if (from < 0 || to < 0 || from >= list.length || to >= list.length) {
-    return
-  }
-  const updated = list.slice()
-  const [item] = updated.splice(from, 1)
-  updated.splice(to, 0, item)
-  list.splice(0, list.length, ...updated)
-}
-
-const resetPieceDragState = () => {
-  draggingPieceIndex.value = null
-  pieceDropTargetIndex.value = null
-}
-
-const resetProductDragState = () => {
-  draggingProductIndex.value = null
-  productDropTargetIndex.value = null
-}
-
-const onPieceDragStart = (index: number, event: DragEvent) => {
-  draggingPieceIndex.value = index
-  pieceDropTargetIndex.value = index
-  if (event.dataTransfer) {
-    event.dataTransfer.effectAllowed = 'move'
-  }
-}
-
-const onPieceDragEnter = (index: number) => {
-  if (draggingPieceIndex.value === null) {
-    return
-  }
-  pieceDropTargetIndex.value = index
-}
-
-const onPieceDragOver = (event: DragEvent) => {
-  event.preventDefault()
-}
-
-const onPieceDrop = (index: number) => {
-  if (!Array.isArray(props.node.pieces)) {
-    resetPieceDragState()
-    return
-  }
-  const from = draggingPieceIndex.value
-  const to = index
-  if (from === null || to === null) {
-    resetPieceDragState()
-    return
-  }
-  moveItemInPlace(props.node.pieces, from, to)
-  resetPieceDragState()
-}
-
-const onPieceDragEnd = () => {
-  resetPieceDragState()
-}
-
-const pieceReorderClass = (index: number) => {
-  if (draggingPieceIndex.value === index) {
-    return 'border-dashed border-primary'
-  }
-  if (
-    draggingPieceIndex.value !== null &&
-    pieceDropTargetIndex.value === index &&
-    draggingPieceIndex.value !== index
-  ) {
-    return 'border-primary border-dashed bg-primary/5'
-  }
-  return ''
-}
-
-const onProductDragStart = (index: number, event: DragEvent) => {
-  draggingProductIndex.value = index
-  productDropTargetIndex.value = index
-  if (event.dataTransfer) {
-    event.dataTransfer.effectAllowed = 'move'
-  }
-}
-
-const onProductDragEnter = (index: number) => {
-  if (draggingProductIndex.value === null) {
-    return
-  }
-  productDropTargetIndex.value = index
-}
-
-const onProductDragOver = (event: DragEvent) => {
-  event.preventDefault()
-}
-
-const onProductDrop = (index: number) => {
-  if (!Array.isArray(props.node.products)) {
-    resetProductDragState()
-    return
-  }
-  const from = draggingProductIndex.value
-  const to = index
-  if (from === null || to === null) {
-    resetProductDragState()
-    return
-  }
-  moveItemInPlace(props.node.products, from, to)
-  resetProductDragState()
-}
-
-const onProductDragEnd = () => {
-  resetProductDragState()
-}
-
-const productReorderClass = (index: number) => {
-  if (draggingProductIndex.value === index) {
-    return 'border-dashed border-primary'
-  }
-  if (
-    draggingProductIndex.value !== null &&
-    productDropTargetIndex.value === index &&
-    draggingProductIndex.value !== index
-  ) {
-    return 'border-primary border-dashed bg-primary/5'
-  }
-  return ''
-}
-
-const resetSubcomponentDragState = () => {
-  draggingSubcomponentIndex.value = null
-  subcomponentDropTargetIndex.value = null
-}
-
-const onSubcomponentDragStart = (index: number, event: DragEvent) => {
-  draggingSubcomponentIndex.value = index
-  subcomponentDropTargetIndex.value = index
-  if (event.dataTransfer) {
-    event.dataTransfer.effectAllowed = 'move'
-  }
-}
-
-const onSubcomponentDragEnter = (index: number) => {
-  if (draggingSubcomponentIndex.value === null) {
-    return
-  }
-  subcomponentDropTargetIndex.value = index
-}
-
-const onSubcomponentDragOver = (event: DragEvent) => {
-  event.preventDefault()
-}
-
-const onSubcomponentDrop = (index: number) => {
-  if (!Array.isArray(props.node.subcomponents)) {
-    resetSubcomponentDragState()
-    return
-  }
-  const from = draggingSubcomponentIndex.value
-  const to = index
-  if (from === null || to === null) {
-    resetSubcomponentDragState()
-    return
-  }
-  moveItemInPlace(props.node.subcomponents, from, to)
-  resetSubcomponentDragState()
-}
-
-const onSubcomponentDragEnd = () => {
-  resetSubcomponentDragState()
-}
-
-const subcomponentReorderClass = (index: number) => {
-  if (draggingSubcomponentIndex.value === index) {
-    return 'ring-2 ring-primary'
-  }
-  if (
-    draggingSubcomponentIndex.value !== null &&
-    subcomponentDropTargetIndex.value === index &&
-    draggingSubcomponentIndex.value !== index
-  ) {
-    return 'ring-2 ring-primary/70'
-  }
-  return ''
-}
-
-watch(
   canManageSubcomponents,
-  (allowed) => {
+  childAllowSubcomponents,
-    if (!allowed && Array.isArray(props.node.subcomponents) && props.node.subcomponents.length) {
+  hasSubcomponents,
-      props.node.subcomponents.splice(0, props.node.subcomponents.length)
+  containerClass,
-    }
+  headingClass,
-  },
+  lockedTypeDisplay,
-  { immediate: true }
+  getComponentTypeLabel,
-)
+  getPieceTypeLabel,
-
+  formatComponentTypeOption,
-watch(componentTypes, () => {
+  formatPieceTypeOption,
-  syncComponentType(props.node)
+  formatProductTypeOption,
-}, { deep: true, immediate: true })
+  handleComponentTypeSelect,
-
+  handlePieceTypeSelect,
-watch(
+  handleProductTypeSelect,
-  () => props.node.typeComposantId,
+  addCustomField,
-  () => {
+  removeCustomField,
-    syncComponentType(props.node)
+  addPiece,
-  },
+  removePiece,
-)
+  addProduct,
-
+  removeProduct,
-watch(pieceTypes, () => {
+  addSubComponent,
-  syncPieceLabels(props.node?.pieces)
+  removeSubComponent,
-}, { deep: true, immediate: true })
+  onCustomFieldDragStart,
-
+  onCustomFieldDragEnter,
-watch(
+  onCustomFieldDrop,
-  () => props.node.pieces,
+  onCustomFieldDragEnd,
-  (value) => {
+  customFieldReorderClass,
-    syncPieceLabels(value)
+  onPieceDragStart,
-  },
+  onPieceDragEnter,
-  { deep: true }
+  onPieceDragOver,
-)
+  onPieceDrop,
-
+  onPieceDragEnd,
-watch(productTypes, () => {
+  pieceReorderClass,
-  syncProductLabels(props.node?.products)
+  onProductDragStart,
-}, { deep: true, immediate: true })
+  onProductDragEnter,
-
+  onProductDragOver,
-watch(
+  onProductDrop,
-  () => props.node.products,
+  onProductDragEnd,
-  (value) => {
+  productReorderClass,
-    syncProductLabels(value)
+  onSubcomponentDragStart,
-  },
+  onSubcomponentDragEnter,
-  { deep: true }
+  onSubcomponentDragOver,
-)
+  onSubcomponentDrop,
-
+  onSubcomponentDragEnd,
-watch(
+  subcomponentReorderClass,
-  () => props.node.customFields,
+} = useStructureNodeLogic(props)
-  (value) => {
-    if (!Array.isArray(value)) {
-      return
-    }
-    value.sort((a: any, b: any) => {
-      const left = typeof a?.orderIndex === 'number' ? a.orderIndex : 0
-      const right = typeof b?.orderIndex === 'number' ? b.orderIndex : 0
-      return left - right
-    })
-    reindexCustomFields()
-  },
-  { deep: true }
-)
-
-watch(
-  () => [props.lockedTypeLabel, props.lockType],
-  () => {
-    if (props.lockType && props.isRoot) {
-      const label = props.lockedTypeLabel || lockedTypeDisplay.value
-      props.node.typeComposantLabel = label
-      if (label && (!props.node.alias || props.node.alias === lockedTypeDisplay.value)) {
-        props.node.alias = label
-      }
-      if (props.node.typeComposantId) {
-        const option = componentTypeMap.value.get(props.node.typeComposantId)
-        props.node.familyCode = option?.code ?? props.node.familyCode
-      }
-    }
-  },
-  { immediate: true }
-)
 </script>

app/components/SyncConfirmationModal.vue

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import type { SyncPreviewResult } from '~/services/modelTypes';
+
+const props = defineProps<{
+  preview: SyncPreviewResult | null;
+  open: boolean;
+  loading: boolean;
+}>();
+
+const emit = defineEmits<{
+  confirm: [];
+  cancel: [];
+}>();
+
+const dialogRef = ref<HTMLDialogElement>();
+
+watch(() => props.open, (isOpen) => {
+  if (isOpen) {
+    dialogRef.value?.showModal();
+  }
+  else {
+    dialogRef.value?.close();
+  }
+});
+
+const hasDeletions = computed(() => {
+  if (!props.preview) return false;
+  return Object.values(props.preview.deletions).some(v => v > 0);
+});
+
+const hasModifications = computed(() => {
+  if (!props.preview) return false;
+  return Object.values(props.preview.modifications).some(v => v > 0);
+});
+
+const totalAdditions = computed(() => {
+  if (!props.preview) return 0;
+  return Object.values(props.preview.additions).reduce((sum, v) => sum + v, 0);
+});
+
+const totalDeletions = computed(() => {
+  if (!props.preview) return 0;
+  return Object.values(props.preview.deletions).reduce((sum, v) => sum + v, 0);
+});
+
+const totalModifications = computed(() => {
+  if (!props.preview) return 0;
+  return Object.values(props.preview.modifications).reduce((sum, v) => sum + v, 0);
+});
+
+function handleCancel() {
+  emit('cancel');
+}
+
+function handleConfirm() {
+  emit('confirm');
+}
+</script>
+
+<template>
+  <dialog ref="dialogRef" class="modal" @close="handleCancel">
+    <div class="modal-box">
+      <h3 class="text-lg font-bold">
+        Synchronisation des éléments liés
+      </h3>
+
+      <div v-if="preview" class="py-4 space-y-3">
+        <p>
+          Cette modification impactera
+          <strong>{{ preview.itemCount }}</strong>
+          élément(s) lié(s).
+        </p>
+
+        <ul class="list-disc list-inside space-y-1">
+          <li v-if="totalAdditions > 0" class="text-success">
+            {{ totalAdditions }} ajout(s)
+          </li>
+          <li v-if="totalDeletions > 0" class="text-error">
+            {{ totalDeletions }} suppression(s)
+          </li>
+          <li v-if="totalModifications > 0" class="text-warning">
+            {{ totalModifications }} modification(s)
+          </li>
+        </ul>
+
+        <div v-if="hasDeletions" role="alert" class="alert alert-warning">
+          <span>Des éléments seront supprimés. Cette action est irréversible.</span>
+        </div>
+
+        <div v-if="hasModifications" role="alert" class="alert alert-info">
+          <span>Des valeurs de champs personnalisés seront réinitialisées.</span>
+        </div>
+      </div>
+
+      <div class="modal-action">
+        <button class="btn btn-ghost" :disabled="loading" @click="handleCancel">
+          Annuler
+        </button>
+        <button class="btn btn-primary" :disabled="loading" @click="handleConfirm">
+          <span v-if="loading" class="loading loading-spinner loading-sm" />
+          Confirmer la synchronisation
+        </button>
+      </div>
+    </div>
+
+    <form method="dialog" class="modal-backdrop">
+      <button @click="handleCancel">
+        close
+      </button>
+    </form>
+  </dialog>
+</template>

app/components/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'
 

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

app/components/common/CustomFieldDisplay.vue

@@ -0,0 +1,173 @@
+<template>
+  <div
+    v-if="fields.length"
+    class="mt-4 pt-4 border-t border-base-200"
+  >
+    <h5 class="text-sm font-medium text-base-content/80 mb-3">
+      Champs personnalisés
+    </h5>
+    <div :class="layoutClass">
+      <div
+        v-for="(field, index) in fields"
+        :key="resolveFieldKey(field, index)"
+        class="form-control"
+      >
+        <label class="label">
+          <span class="label-text text-sm">{{
+            resolveFieldName(field)
+          }}</span>
+          <span
+            v-if="resolveFieldRequired(field)"
+            class="label-text-alt text-error"
+          >*</span>
+        </label>
+
+        <!-- Mode édition -->
+        <template v-if="isEditMode && !resolveFieldReadOnly(field)">
+          <!-- Champ de type TEXT -->
+          <input
+            v-if="resolveFieldType(field) === 'text'"
+            :value="field.value ?? ''"
+            type="text"
+            class="input input-bordered input-sm"
+            :required="resolveFieldRequired(field)"
+            @input="onInput(field, ($event.target as HTMLInputElement).value)"
+            @blur="onBlur(field)"
+          >
+
+          <!-- Champ de type NUMBER -->
+          <input
+            v-else-if="resolveFieldType(field) === 'number'"
+            :value="field.value ?? ''"
+            type="number"
+            class="input input-bordered input-sm"
+            :required="resolveFieldRequired(field)"
+            @input="onInput(field, ($event.target as HTMLInputElement).value)"
+            @blur="onBlur(field)"
+          >
+
+          <!-- Champ de type SELECT -->
+          <select
+            v-else-if="resolveFieldType(field) === 'select'"
+            :value="field.value ?? ''"
+            class="select select-bordered select-sm"
+            :required="resolveFieldRequired(field)"
+            @change="onInput(field, ($event.target as HTMLSelectElement).value)"
+            @blur="onBlur(field)"
+          >
+            <option value="">
+              Sélectionner...
+            </option>
+            <option
+              v-for="option in resolveFieldOptions(field)"
+              :key="option"
+              :value="option"
+            >
+              {{ option }}
+            </option>
+          </select>
+
+          <!-- Champ de type BOOLEAN -->
+          <div
+            v-else-if="resolveFieldType(field) === 'boolean'"
+            class="flex items-center gap-2"
+          >
+            <input
+              type="checkbox"
+              class="checkbox checkbox-sm"
+              :checked="String(field.value).toLowerCase() === 'true'"
+              @change="onBooleanChange(field, ($event.target as HTMLInputElement).checked)"
+            >
+            <span class="text-sm">{{
+              String(field.value).toLowerCase() === "true" ? "Oui" : "Non"
+            }}</span>
+          </div>
+
+          <!-- Champ de type DATE -->
+          <input
+            v-else-if="resolveFieldType(field) === 'date'"
+            :value="field.value ?? ''"
+            type="date"
+            class="input input-bordered input-sm"
+            :required="resolveFieldRequired(field)"
+            @input="onInput(field, ($event.target as HTMLInputElement).value)"
+            @blur="onBlur(field)"
+          >
+
+          <!-- Champ de type TEXTAREA -->
+          <textarea
+            v-else-if="resolveFieldType(field) === 'textarea'"
+            :value="field.value ?? ''"
+            class="textarea textarea-bordered textarea-sm"
+            :required="resolveFieldRequired(field)"
+            @input="onInput(field, ($event.target as HTMLTextAreaElement).value)"
+            @blur="onBlur(field)"
+          />
+
+          <!-- Fallback: input text -->
+          <input
+            v-else
+            :value="field.value ?? ''"
+            type="text"
+            class="input input-bordered input-sm"
+            :required="resolveFieldRequired(field)"
+            @input="onInput(field, ($event.target as HTMLInputElement).value)"
+            @blur="onBlur(field)"
+          >
+        </template>
+
+        <!-- Mode lecture seule -->
+        <template v-else>
+          <div class="input input-bordered input-sm bg-base-200">
+            {{ formatFieldDisplayValue(field) }}
+          </div>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  resolveFieldKey,
+  resolveFieldName,
+  resolveFieldType,
+  resolveFieldOptions,
+  resolveFieldRequired,
+  resolveFieldReadOnly,
+  formatFieldDisplayValue,
+} from '~/shared/utils/entityCustomFieldLogic'
+
+const props = defineProps<{
+  fields: any[]
+  isEditMode: boolean
+  columns?: 1 | 2
+}>()
+
+const emit = defineEmits<{
+  'field-input': [field: any, value: string]
+  'field-blur': [field: any]
+}>()
+
+const layoutClass = computed(() =>
+  props.columns === 2
+    ? 'grid grid-cols-1 md:grid-cols-2 gap-4'
+    : 'space-y-3',
+)
+
+function onInput(field: any, value: string) {
+  field.value = value
+  emit('field-input', field, value)
+}
+
+function onBooleanChange(field: any, checked: boolean) {
+  const value = checked ? 'true' : 'false'
+  field.value = value
+  emit('field-input', field, value)
+  emit('field-blur', field)
+}
+
+function onBlur(field: any) {
+  emit('field-blur', field)
+}
+</script>

app/components/common/CustomFieldInputGrid.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+    <div
+      v-for="(field, index) in fields"
+      :key="fieldKey(field, index)"
+      class="form-control"
+    >
+      <label class="label">
+        <span class="label-text">{{ field.name }}</span>
+        <span v-if="field.required" class="label-text-alt text-error">*</span>
+      </label>
+      <input
+        v-if="field.type === 'text'"
+        v-model="field.value"
+        type="text"
+        class="input input-bordered input-sm md:input-md"
+        :required="field.required"
+        :disabled="disabled"
+      >
+      <input
+        v-else-if="field.type === 'number'"
+        v-model="field.value"
+        type="number"
+        step="0.01"
+        class="input input-bordered input-sm md:input-md"
+        :required="field.required"
+        :disabled="disabled"
+      >
+      <select
+        v-else-if="field.type === 'select'"
+        v-model="field.value"
+        class="select select-bordered select-sm md:select-md"
+        :required="field.required"
+        :disabled="disabled"
+      >
+        <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
+          v-model="field.value"
+          type="checkbox"
+          class="toggle toggle-primary toggle-sm md:toggle-md"
+          true-value="true"
+          false-value="false"
+          :disabled="disabled"
+        >
+        <span class="text-sm" :class="field.value === 'true' ? 'text-success font-medium' : 'text-base-content/60'">{{ field.value === 'true' ? 'Oui' : 'Non' }}</span>
+      </label>
+      <input
+        v-else-if="field.type === 'date'"
+        v-model="field.value"
+        type="date"
+        class="input input-bordered input-sm md:input-md"
+        :required="field.required"
+        :disabled="disabled"
+      >
+      <input
+        v-else
+        v-model="field.value"
+        type="text"
+        class="input input-bordered input-sm md:input-md"
+        :required="field.required"
+        :disabled="disabled"
+      >
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { fieldKey, type CustomFieldInput } from '~/shared/utils/customFieldFormUtils'
+
+defineProps<{
+  fields: CustomFieldInput[]
+  disabled?: boolean
+}>()
+</script>

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 overflow-y-clip relative rounded-lg border border-base-300/40">
+        <!-- Loading overlay (keeps table & filter inputs visible) -->
+        <div
+          v-if="loading && hasFilterableColumns"
+          class="absolute inset-0 bg-base-100/60 backdrop-blur-[1px] z-10 flex items-center justify-center"
+        >
+          <span class="loading loading-spinner text-primary" 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/30 p-4 border-t border-base-200/80">
+                  <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>

app/components/common/DocumentListInline.vue

@@ -0,0 +1,104 @@
+<template>
+  <div v-if="documents.length" class="space-y-2">
+    <div
+      v-for="document in documents"
+      :key="document.id || document.path || document.name"
+      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(document)"
+        >
+          <img
+            v-if="isImageDocument(document) && (document.fileUrl || document.path)"
+            :src="document.fileUrl || document.path"
+            class="h-full w-full object-cover"
+            :alt="`Aperçu de ${document.name}`"
+          >
+          <iframe
+            v-else-if="shouldInlinePdf(document)"
+            :src="documentPreviewSrc(document)"
+            class="h-full w-full border-0 bg-white"
+            title="Aperçu PDF"
+          />
+          <component
+            v-else
+            :is="documentIcon(document).component"
+            class="h-6 w-6"
+            :class="documentIcon(document).colorClass"
+            aria-hidden="true"
+          />
+        </div>
+        <div>
+          <div class="font-medium">
+            {{ document.name }}
+          </div>
+          <div class="text-xs text-base-content/70">
+            {{ document.mimeType || 'Inconnu' }} • {{ formatSize(document.size) }}
+          </div>
+        </div>
+      </div>
+      <div class="flex items-center gap-2">
+        <button
+          type="button"
+          class="btn btn-ghost btn-xs"
+          :disabled="!canPreviewDocument(document)"
+          :title="canPreviewDocument(document) ? 'Consulter le document' : 'Aucun aperçu disponible pour ce type'"
+          @click="$emit('preview', document)"
+        >
+          Consulter
+        </button>
+        <button
+          type="button"
+          class="btn btn-ghost btn-xs"
+          @click="downloadDocument(document)"
+        >
+          Télécharger
+        </button>
+        <button
+          v-if="canDelete"
+          type="button"
+          class="btn btn-error btn-xs"
+          :disabled="deleteDisabled"
+          @click="$emit('delete', document.id)"
+        >
+          Supprimer
+        </button>
+      </div>
+    </div>
+  </div>
+  <p v-else class="text-xs text-base-content/70">
+    {{ emptyText }}
+  </p>
+</template>
+
+<script setup lang="ts">
+import { canPreviewDocument, isImageDocument } from '~/utils/documentPreview'
+import {
+  documentIcon,
+  formatSize,
+  shouldInlinePdf,
+  documentPreviewSrc,
+  documentThumbnailClass,
+  downloadDocument,
+} from '~/shared/utils/documentDisplayUtils'
+
+import type { Document } from '~/composables/useDocuments'
+
+withDefaults(defineProps<{
+  documents: Document[]
+  canDelete?: boolean
+  deleteDisabled?: boolean
+  emptyText?: string
+}>(), {
+  canDelete: false,
+  deleteDisabled: false,
+  emptyText: 'Aucun document.',
+})
+
+defineEmits<{
+  (e: 'preview', document: Document): void
+  (e: 'delete', documentId: string): void
+}>()
+</script>

app/components/common/EntityHistorySection.vue

@@ -0,0 +1,97 @@
+<template>
+  <section class="space-y-3 rounded-lg border border-base-200 bg-base-200/40 p-4">
+    <header class="flex items-center justify-between gap-3">
+      <div>
+        <h2 class="font-semibold text-base-content">Historique</h2>
+        <p class="text-xs text-base-content/70">
+          Qui a changé quoi, et quand.
+        </p>
+      </div>
+      <span v-if="entries.length" class="badge badge-outline">
+        {{ entries.length }} entrée{{ entries.length > 1 ? 's' : '' }}
+      </span>
+    </header>
+
+    <div v-if="loading" class="flex items-center gap-2 text-sm text-base-content/70">
+      <span class="loading loading-spinner loading-sm" aria-hidden="true" />
+      Chargement de l'historique…
+    </div>
+
+    <div v-else-if="error" class="alert alert-warning">
+      <span>{{ error }}</span>
+    </div>
+
+    <p v-else-if="entries.length === 0" class="text-xs text-base-content/70">
+      Aucun changement enregistré pour le moment.
+    </p>
+
+    <ul v-else class="max-h-80 space-y-2 overflow-y-auto pr-1">
+      <li
+        v-for="entry in entries"
+        :key="entry.id"
+        class="rounded-md border border-base-200 bg-base-100 px-3 py-2"
+      >
+        <div class="flex flex-wrap items-center justify-between gap-2 text-xs text-base-content/70">
+          <span class="font-medium text-base-content">
+            {{ historyActionLabel(entry.action) }}
+          </span>
+          <span>{{ formatHistoryDate(entry.createdAt) }}</span>
+        </div>
+        <p class="mt-1 text-xs text-base-content/60">
+          Par {{ entry.actor?.label || 'Inconnu' }}
+        </p>
+
+        <ul
+          v-if="diffEntries(entry).length"
+          class="mt-2 space-y-1 text-xs"
+        >
+          <li
+            v-for="diffEntry in diffEntries(entry)"
+            :key="`${entry.id}-${diffEntry.field}`"
+            class="flex flex-col gap-0.5"
+          >
+            <span class="font-medium text-base-content/80">{{ diffEntry.label }}</span>
+            <span class="text-base-content/60">
+              {{ diffEntry.fromLabel }} → {{ diffEntry.toLabel }}
+            </span>
+          </li>
+        </ul>
+
+        <p
+          v-else-if="entry.snapshot?.name"
+          class="mt-2 text-xs text-base-content/70"
+        >
+          {{ entry.snapshot.name }}
+        </p>
+      </li>
+    </ul>
+  </section>
+</template>
+
+<script setup lang="ts">
+import {
+  historyActionLabel,
+  formatHistoryDate,
+  historyDiffEntries,
+  type HistoryDiffEntry,
+} from '~/shared/utils/historyDisplayUtils'
+
+interface HistoryEntry {
+  id: string
+  action: string
+  createdAt: string
+  actor?: { label?: string } | null
+  diff?: Record<string, { from?: unknown; to?: unknown }> | null
+  snapshot?: { name?: string } | null
+}
+
+const props = defineProps<{
+  entries: HistoryEntry[]
+  loading?: boolean
+  error?: string | null
+  fieldLabels: Record<string, string>
+}>()
+
+const diffEntries = (entry: HistoryEntry): HistoryDiffEntry[] =>
+  historyDiffEntries(entry, props.fieldLabels)
+</script>

app/components/common/RequirementListEditor.vue

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

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"
@@ -32,11 +41,11 @@
           v-if="openDropdown"
           class="absolute z-30 mt-1 w-full max-h-60 overflow-y-auto bg-base-100 border border-base-200 rounded-box shadow-lg"
         >
-          <div v-if="loading" class="flex items-center gap-2 px-3 py-2 text-xs text-gray-500">
+          <div v-if="loading" class="flex items-center gap-2 px-3 py-2 text-xs text-base-content/50">
             <span class="loading loading-spinner loading-xs" />
             Recherche en cours…
           </div>
-          <div v-else-if="displayedOptions.length === 0" class="px-3 py-2 text-xs text-gray-500">
+          <div v-else-if="displayedOptions.length === 0" class="px-3 py-2 text-xs text-base-content/50">
             {{ emptyText }}
           </div>
           <ul v-else class="flex flex-col">
@@ -60,7 +69,7 @@
                     {{ resolveLabel(option) }}
                   </slot>
                 </span>
-                <span v-if="resolveDescription(option)" class="text-xs text-gray-500">
+                <span v-if="resolveDescription(option)" class="text-xs text-base-content/50">
                   <slot name="option-description" :option="option">
                     {{ resolveDescription(option) }}
                   </slot>
@@ -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) => {
+  (_newOptions) => {
-    console.log('[SearchSelect] baseOptions changed, count:', newOptions.length, 'modelValue:', props.modelValue, 'selectedOption:', selectedOption.value?.id)
     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)
   }
 }

app/components/common/StructureSkeletonPreview.vue

@@ -0,0 +1,162 @@
+<template>
+  <div class="space-y-3 rounded-lg border border-base-200 bg-base-200/40 p-4">
+    <div class="flex items-center justify-between gap-4">
+      <div>
+        <h2 class="font-semibold text-base-content">Squelette sélectionné</h2>
+        <p class="text-xs text-base-content/70">
+          {{ description }}
+        </p>
+      </div>
+      <span class="badge badge-outline">{{ previewBadge }}</span>
+    </div>
+
+    <details v-if="structure" class="collapse collapse-arrow bg-base-100">
+      <summary class="collapse-title text-sm font-medium">
+        Consulter le détail du squelette
+      </summary>
+      <div class="collapse-content text-sm text-base-content/80" :class="variant === 'component' ? 'space-y-4' : 'space-y-2'">
+        <!-- Custom fields: component variant (rich display) -->
+        <div v-if="variant === 'component' && customFields.length" class="space-y-2">
+          <h3 class="font-semibold text-sm text-base-content">Champs personnalisés</h3>
+          <ul class="space-y-2">
+            <li
+              v-for="field in customFields"
+              :key="field.customFieldId || field.id || field.name"
+              class="rounded bg-base-200/60 px-3 py-2"
+            >
+              <p class="font-medium text-sm text-base-content">
+                {{ field.name || field.key }}
+              </p>
+              <p class="text-xs text-base-content/70 mt-1">
+                Type : {{ field.type || 'text' }}<span v-if="field.required"> &bull; Obligatoire</span>
+                <span v-if="Array.isArray(field.options) && field.options.length">
+                  &bull; Options : {{ field.options.join(', ') }}
+                </span>
+                <span v-if="field.defaultValue">
+                  &bull; Défaut : {{ field.defaultValue }}
+                </span>
+              </p>
+            </li>
+          </ul>
+        </div>
+
+        <!-- Custom fields: piece variant (simple display) -->
+        <div v-if="variant === 'piece' && customFields.length" class="space-y-1">
+          <h3 class="font-semibold text-sm text-base-content">Champs personnalisés</h3>
+          <ul class="list-disc list-inside space-y-1">
+            <li v-for="field in customFields" :key="field.name">
+              <span class="font-medium">{{ field.name }}</span>
+              <span v-if="field.value !== undefined && field.value !== null"> : {{ field.value }}</span>
+            </li>
+          </ul>
+        </div>
+
+        <!-- Pieces: component variant only -->
+        <div v-if="variant === 'component' && pieces.length" class="space-y-2">
+          <h3 class="font-semibold text-sm text-base-content">Pièces imposées</h3>
+          <ul class="list-disc list-inside space-y-1">
+            <li
+              v-for="(piece, index) in pieces"
+              :key="piece.role || piece.typePieceId || piece.familyCode || index"
+            >
+              {{ resolvePieceLabelFn(piece) }}
+            </li>
+          </ul>
+        </div>
+
+        <!-- Products: component variant only -->
+        <div v-if="variant === 'component' && products.length" class="space-y-2">
+          <h3 class="font-semibold text-sm text-base-content">Produits imposés</h3>
+          <ul class="list-disc list-inside space-y-1">
+            <li
+              v-for="(product, index) in products"
+              :key="product.role || product.typeProductId || product.familyCode || index"
+            >
+              {{ resolveProductLabelFn(product) }}
+            </li>
+          </ul>
+        </div>
+
+        <!-- Subcomponents: component variant only -->
+        <div v-if="variant === 'component' && subcomponents.length" class="space-y-2">
+          <h3 class="font-semibold text-sm text-base-content">Sous-composants</h3>
+          <ul class="list-disc list-inside space-y-1">
+            <li
+              v-for="(subcomponent, index) in subcomponents"
+              :key="subcomponent.alias || subcomponent.typeComposantId || subcomponent.familyCode || index"
+            >
+              {{ resolveSubcomponentLabelFn(subcomponent) }}
+            </li>
+          </ul>
+        </div>
+
+        <!-- Empty state: component variant -->
+        <p
+          v-if="variant === 'component' && showEmptyState && !customFields.length && !pieces.length && !products.length && !subcomponents.length"
+          class="text-xs text-base-content/50"
+        >
+          Ce squelette ne définit pas encore de pièces, sous-composants ou valeurs par défaut.
+        </p>
+
+        <!-- Empty state: piece variant -->
+        <p v-if="variant === 'piece' && !customFields.length" class="text-xs text-base-content/70">
+          Ce squelette ne définit pas encore de champs personnalisés.
+        </p>
+      </div>
+    </details>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  getStructureCustomFields,
+  getStructurePieces,
+  getStructureProducts,
+  getStructureSubcomponents,
+} from '~/shared/utils/structureDisplayUtils'
+
+const props = withDefaults(defineProps<{
+  structure: Record<string, any> | null
+  description?: string
+  previewBadge: string
+  variant: 'component' | 'piece'
+  showEmptyState?: boolean
+  resolvePieceLabel?: (piece: Record<string, any>) => string
+  resolveProductLabel?: (product: Record<string, any>) => string
+  resolveSubcomponentLabel?: (subcomponent: Record<string, any>) => string
+}>(), {
+  description: '',
+  showEmptyState: false,
+  resolvePieceLabel: undefined,
+  resolveProductLabel: undefined,
+  resolveSubcomponentLabel: undefined,
+})
+
+const customFields = computed(() =>
+  getStructureCustomFields(props.structure),
+)
+
+const pieces = computed(() =>
+  props.variant === 'component' ? getStructurePieces(props.structure) : [],
+)
+
+const products = computed(() =>
+  props.variant === 'component' ? getStructureProducts(props.structure) : [],
+)
+
+const subcomponents = computed(() =>
+  props.variant === 'component' ? getStructureSubcomponents(props.structure) : [],
+)
+
+const fallbackLabel = (item: Record<string, any>) =>
+  item?.name || item?.label || item?.role || item?.alias || 'N/A'
+
+const resolvePieceLabelFn = (piece: Record<string, any>) =>
+  props.resolvePieceLabel ? props.resolvePieceLabel(piece) : fallbackLabel(piece)
+
+const resolveProductLabelFn = (product: Record<string, any>) =>
+  props.resolveProductLabel ? props.resolveProductLabel(product) : fallbackLabel(product)
+
+const resolveSubcomponentLabelFn = (subcomponent: Record<string, any>) =>
+  props.resolveSubcomponentLabel ? props.resolveSubcomponentLabel(subcomponent) : fallbackLabel(subcomponent)
+</script>

app/components/form/FieldPhone.vue

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

app/components/home/AddMachineModal.vue

@@ -0,0 +1,108 @@
+<template>
+  <div v-if="open" class="modal modal-open">
+    <div class="modal-box max-w-2xl">
+      <h3 class="font-bold text-lg mb-4">
+        Ajouter une nouvelle machine
+      </h3>
+      <form @submit.prevent="handleSubmit">
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+          <div class="form-control">
+            <label class="label">
+              <span class="label-text">Nom de la machine</span>
+            </label>
+            <input
+              v-model="form.name"
+              type="text"
+              placeholder="Ex: Presse hydraulique #1"
+              class="input input-bordered"
+              :disabled="disabled"
+              required
+            >
+          </div>
+
+          <div class="form-control">
+            <label class="label">
+              <span class="label-text">Site</span>
+            </label>
+            <select
+              v-model="form.siteId"
+              class="select select-bordered"
+              :disabled="disabled"
+              required
+            >
+              <option value="">
+                Sélectionner un site
+              </option>
+              <option v-for="site in sites" :key="site.id" :value="site.id">
+                {{ site.name }}
+              </option>
+            </select>
+          </div>
+        </div>
+
+        <div class="form-control mb-4">
+          <label class="label">
+            <span class="label-text">Référence</span>
+          </label>
+          <input
+            v-model="form.reference"
+            type="text"
+            placeholder="Ex: PRESS-001"
+            class="input input-bordered"
+            :disabled="disabled"
+          >
+        </div>
+
+        <div class="modal-action">
+          <button
+            type="button"
+            class="btn btn-outline"
+            @click="$emit('close')"
+          >
+            Annuler
+          </button>
+          <button type="submit" class="btn btn-primary" :disabled="disabled">
+            Créer la machine
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, watch } from 'vue'
+
+const props = defineProps<{
+  open: boolean
+  sites: Array<{ id: string, name: string }>
+  disabled: boolean
+  preselectedSiteId?: string
+}>()
+
+const emit = defineEmits<{
+  close: []
+  create: [data: { name: string, siteId: string, reference: string }]
+}>()
+
+const form = reactive({
+  name: '',
+  siteId: '',
+  reference: '',
+})
+
+function handleSubmit() {
+  emit('create', { ...form })
+}
+
+watch(() => props.open, (isOpen) => {
+  if (isOpen && props.preselectedSiteId) {
+    form.siteId = props.preselectedSiteId
+  }
+  if (!isOpen) {
+    form.name = ''
+    form.siteId = ''
+    form.reference = ''
+  }
+})
+</script>

app/components/home/AddSiteModal.vue

@@ -0,0 +1,78 @@
+<template>
+  <div v-if="open" class="modal modal-open">
+    <div class="modal-box">
+      <h3 class="font-bold text-lg mb-4">
+        Ajouter un nouveau site
+      </h3>
+      <form class="space-y-4" @submit.prevent="handleSubmit">
+        <div class="form-control">
+          <label class="label">
+            <span class="label-text">Nom du site</span>
+          </label>
+          <input
+            v-model="form.name"
+            type="text"
+            placeholder="Ex: Usine de production"
+            class="input input-bordered"
+            :disabled="disabled"
+            required
+          >
+        </div>
+
+        <SiteContactFormFields :form="form" :disabled="disabled" />
+
+        <div class="modal-action">
+          <button
+            type="button"
+            class="btn btn-outline"
+            @click="$emit('close')"
+          >
+            Annuler
+          </button>
+          <button type="submit" class="btn btn-primary" :disabled="disabled">
+            Créer le site
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, watch } from 'vue'
+import SiteContactFormFields from '~/components/sites/SiteContactFormFields.vue'
+
+const props = defineProps<{
+  open: boolean
+  disabled: boolean
+}>()
+
+const emit = defineEmits<{
+  close: []
+  create: [data: { name: string, contactName: string, contactPhone: string, contactAddress: string, contactPostalCode: string, contactCity: string }]
+}>()
+
+const form = reactive({
+  name: '',
+  contactName: '',
+  contactPhone: '',
+  contactAddress: '',
+  contactPostalCode: '',
+  contactCity: '',
+})
+
+function handleSubmit() {
+  emit('create', { ...form })
+}
+
+watch(() => props.open, (isOpen) => {
+  if (!isOpen) {
+    form.name = ''
+    form.contactName = ''
+    form.contactPhone = ''
+    form.contactAddress = ''
+    form.contactPostalCode = ''
+    form.contactCity = ''
+  }
+})
+</script>

app/components/layout/AppNavbar.vue

@@ -0,0 +1,466 @@
+<template>
+  <div class="navbar navbar-glass sticky top-0 z-50 px-4 lg:px-6">
+    <div class="navbar-start">
+      <!-- Mobile hamburger menu -->
+      <div class="dropdown">
+        <div tabindex="0" role="button" class="btn btn-ghost btn-sm lg:hidden">
+          <IconLucideMenu class="w-5 h-5" aria-hidden="true" />
+        </div>
+        <ul
+          tabindex="0"
+          class="menu menu-sm dropdown-content mt-3 z-[1] p-3 shadow-lg bg-base-100 rounded-xl w-60 border border-base-300/50"
+        >
+          <li class="pt-1 pb-2 lg:hidden">
+            <button
+              class="w-full flex items-center gap-2 rounded-lg px-3 py-2 transition-colors text-base-content/70 hover:bg-primary/8 hover:text-primary"
+              @click="toggleDarkMode"
+            >
+              <IconLucideSun v-if="isDark" class="w-4 h-4" aria-hidden="true" />
+              <IconLucideMoon v-else class="w-4 h-4" aria-hidden="true" />
+              {{ isDark ? 'Mode clair' : 'Mode sombre' }}
+            </button>
+          </li>
+          <li class="pt-1 pb-2 lg:hidden">
+            <button
+              class="w-full flex items-center gap-2 rounded-lg px-3 py-2 transition-colors text-base-content/70 hover:bg-primary/8 hover:text-primary"
+              @click="$emit('open-settings')"
+            >
+              <IconLucideSettings class="w-4 h-4" aria-hidden="true" />
+              Paramètres d'affichage
+            </button>
+          </li>
+
+          <!-- Mobile: simple links -->
+          <li v-for="link in simpleLinks" :key="link.to">
+            <NuxtLink
+              :to="link.to"
+              class="rounded-lg px-3 py-2 transition-all flex items-center gap-2"
+              :class="linkClass(link)"
+            >
+              <component :is="link.icon" v-if="link.icon" class="w-4 h-4" aria-hidden="true" />
+              {{ 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-lg px-3 py-2 text-left transition-all"
+              :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-3.5 w-3.5 transition-transform duration-200"
+                :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-1 space-y-0.5 rounded-lg bg-base-200/50 p-2 overflow-hidden"
+              >
+                <li v-for="child in group.children" :key="child.to">
+                  <NuxtLink
+                    :to="child.to"
+                    class="rounded-md px-3 py-1.5 transition-colors block text-sm"
+                    :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 -->
+      <NuxtLink to="/" class="flex items-center gap-2.5 group">
+        <div class="w-9 h-9 rounded-lg overflow-hidden ring-1 ring-base-300/50 transition-all group-hover:ring-primary/30 group-hover:shadow-md">
+          <img
+            :src="logoSrc"
+            alt="Logo Malio"
+            class="h-full w-full object-contain"
+          />
+        </div>
+        <span class="text-lg font-bold tracking-tight text-base-content hidden sm:inline" style="font-family: var(--font-heading)">
+          Inventory
+        </span>
+      </NuxtLink>
+    </div>
+
+    <!-- Desktop navbar -->
+    <div class="navbar-center hidden lg:flex">
+      <ul class="menu menu-horizontal gap-0.5 px-1">
+        <!-- Desktop: simple links -->
+        <li v-for="link in simpleLinks" :key="link.to">
+          <NuxtLink
+            :to="link.to"
+            class="transition-all px-3 py-2 rounded-lg flex items-center gap-1.5 text-sm font-medium"
+            :class="linkClass(link)"
+          >
+            <component :is="link.icon" v-if="link.icon" class="w-4 h-4" aria-hidden="true" />
+            {{ 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-lg px-3 py-2 transition-all text-sm font-medium"
+            :class="groupClass(group)"
+            :aria-expanded="openDropdown === group.id + '-desktop'"
+            @click="toggleDropdown(group.id + '-desktop')"
+            @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 }}
+            <IconLucideChevronDown
+              class="h-3.5 w-3.5 transition-transform duration-200"
+              :class="openDropdown === group.id + '-desktop' ? 'rotate-180' : ''"
+              aria-hidden="true"
+            />
+          </button>
+          <Transition name="nav-dropdown-desktop">
+            <ul
+              v-if="openDropdown === group.id + '-desktop'"
+              class="absolute left-0 top-full mt-1.5 w-56 rounded-xl border border-base-300/50 bg-base-100 p-1.5 shadow-lg shadow-base-content/5 z-50"
+            >
+              <li v-for="child in group.children" :key="child.to">
+                <NuxtLink
+                  :to="child.to"
+                  class="block rounded-lg px-3 py-2 transition-all text-sm"
+                  :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-1.5">
+        <button
+          class="btn btn-ghost btn-sm btn-circle hidden lg:inline-flex text-base-content/50 hover:text-base-content"
+          :title="isDark ? 'Mode clair' : 'Mode sombre'"
+          @click="toggleDarkMode"
+        >
+          <IconLucideSun v-if="isDark" class="w-4 h-4" aria-hidden="true" />
+          <IconLucideMoon v-else class="w-4 h-4" aria-hidden="true" />
+        </button>
+        <button
+          class="btn btn-ghost btn-sm btn-circle hidden lg:inline-flex text-base-content/50 hover:text-base-content"
+          title="Paramètres d'affichage"
+          @click="$emit('open-settings')"
+        >
+          <IconLucideSettings class="w-4 h-4" aria-hidden="true" />
+        </button>
+
+        <ClientOnly>
+          <div v-if="activeProfile" class="dropdown dropdown-end">
+            <div
+              tabindex="0"
+              role="button"
+              class="indicator cursor-pointer"
+            >
+              <span
+                v-if="unresolvedCount > 0"
+                class="indicator-item badge badge-warning badge-xs"
+              >
+                {{ unresolvedCount }}
+              </span>
+              <div
+                class="bg-primary text-primary-content rounded-full w-8 h-8 flex items-center justify-center"
+              >
+                <span class="text-xs font-semibold">
+                  {{ activeProfileInitials }}
+                </span>
+              </div>
+            </div>
+            <ul
+              tabindex="0"
+              class="menu dropdown-content mt-3 p-2 shadow-lg bg-base-100 rounded-xl w-60 border border-base-300/50"
+            >
+              <li class="px-3 py-2">
+                <div class="flex flex-col gap-1 pointer-events-none">
+                  <span class="text-xs text-base-content/50">Connecté en tant que</span>
+                  <span class="font-semibold text-sm text-base-content">{{ activeProfileLabel }}</span>
+                  <span class="badge badge-sm" :class="roleBadgeClass">{{ roleLabel }}</span>
+                </div>
+              </li>
+              <div class="divider my-0.5 px-2" />
+              <li v-if="isAdmin">
+                <NuxtLink to="/admin" class="rounded-lg justify-between text-sm">
+                  Administration
+                  <IconLucideChevronRight class="w-3.5 h-3.5 text-base-content/30" aria-hidden="true" />
+                </NuxtLink>
+              </li>
+              <li>
+                <NuxtLink to="/comments" class="rounded-lg justify-between text-sm">
+                  Commentaires
+                  <span v-if="unresolvedCount > 0" class="badge badge-warning badge-xs">
+                    {{ unresolvedCount }}
+                  </span>
+                  <IconLucideChevronRight v-else class="w-3.5 h-3.5 text-base-content/30" aria-hidden="true" />
+                </NuxtLink>
+              </li>
+              <div class="divider my-0.5 px-2" />
+              <li>
+                <button
+                  type="button"
+                  class="rounded-lg text-error/80 hover:text-error hover:bg-error/5 justify-between text-sm"
+                  @click="$emit('logout')"
+                >
+                  Déconnexion
+                  <IconLucideLogOut class="w-3.5 h-3.5" 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 IconLucideChevronDown from '~icons/lucide/chevron-down'
+import IconLucideLogOut from '~icons/lucide/log-out'
+import IconLucideLayoutDashboard from '~icons/lucide/layout-dashboard'
+import IconLucideFactory from '~icons/lucide/factory'
+
+import IconLucideCpu from '~icons/lucide/cpu'
+import IconLucidePuzzle from '~icons/lucide/puzzle'
+import IconLucidePackage from '~icons/lucide/package'
+import IconLucideLink from '~icons/lucide/link'
+import IconLucideSun from '~icons/lucide/sun'
+import IconLucideMoon from '~icons/lucide/moon'
+import logoSrc from '~/assets/LOGO_CARRE_BLANC.png'
+
+defineEmits<{
+  (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 { isDark, toggle: toggleDarkMode, init: initDarkMode } = useDarkMode()
+
+const unresolvedCount = ref(0)
+let pollInterval: ReturnType<typeof setInterval> | null = null
+
+const refreshUnresolvedCount = async () => {
+  if (!activeProfile.value) return
+  unresolvedCount.value = await fetchUnresolvedCount()
+}
+
+onMounted(() => {
+  initDarkMode()
+  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/70 hover:bg-base-content/5 hover:text-base-content'
+}
+
+const groupClass = (group: NavGroup) => {
+  return isGroupActive(group)
+    ? 'bg-primary text-primary-content font-semibold shadow-sm'
+    : 'text-base-content/70 hover:bg-base-content/5 hover:text-base-content'
+}
+
+const childLinkClass = (child: NavLink) => {
+  return isActive(child.to)
+    ? 'bg-primary/10 text-primary font-semibold'
+    : 'text-base-content/70 hover:bg-base-content/5 hover:text-base-content'
+}
+
+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(4px) scale(0.98);
+}
+.nav-dropdown-desktop-enter-to,
+.nav-dropdown-desktop-leave-from {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+
+.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>

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>

app/components/machine/MachineComponentsCard.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="card bg-base-100 shadow-sm">
+    <div class="card-body">
+      <div class="flex justify-between items-center mb-4">
+        <h2 class="card-title">Composants</h2>
+        <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 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">
+          <ComponentHierarchy
+            :components="[component]"
+            :is-edit-mode="false"
+            :show-delete="isEditMode"
+            :collapse-all="collapsed"
+            :toggle-token="collapseToggleToken"
+            @edit-piece="$emit('edit-piece', $event)"
+            @delete="$emit('remove-component', component.linkId || component.id)"
+          />
+        </div>
+      </div>
+
+      <button
+        v-if="isEditMode"
+        type="button"
+        class="btn btn-sm md:btn-md btn-primary"
+        @click="$emit('add-component')"
+      >
+        Ajouter un composant
+      </button>
+    </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>

app/components/machine/MachineCustomFieldDefEditor.vue

@@ -0,0 +1,124 @@
+<template>
+  <section class="space-y-3">
+    <div class="flex items-center justify-between">
+      <h3 class="text-sm font-semibold">
+        Définitions des champs personnalisés
+      </h3>
+      <button
+        type="button"
+        class="btn btn-primary btn-sm"
+        :disabled="saving"
+        @click="$emit('save')"
+      >
+        <span v-if="saving" class="loading loading-spinner loading-xs" />
+        Enregistrer les champs
+      </button>
+    </div>
+
+    <p v-if="!fields.length" class="text-xs text-gray-500">
+      Aucun champ personnalisé défini. Cliquez sur « Ajouter » pour en créer un.
+    </p>
+
+    <ul v-else class="space-y-2" role="list">
+      <li
+        v-for="(field, index) in fields"
+        :key="field.uid"
+        class="border border-base-200 rounded-md p-3 space-y-2 bg-base-100 transition-colors"
+        :class="reorderClass(index)"
+        draggable="true"
+        @dragstart="onDragStart(index, $event)"
+        @dragenter="onDragEnter(index)"
+        @dragover.prevent="onDragEnter(index)"
+        @drop.prevent="onDrop(index)"
+        @dragend="onDragEnd"
+      >
+        <div class="flex items-start gap-3">
+          <button
+            type="button"
+            class="btn btn-ghost btn-xs btn-square cursor-grab active:cursor-grabbing mt-1"
+            title="Réordonner"
+            draggable="false"
+          >
+            <IconLucideGripVertical class="w-4 h-4" aria-hidden="true" />
+          </button>
+
+          <div class="flex-1 space-y-2">
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
+              <input
+                v-model="field.name"
+                type="text"
+                class="input input-bordered input-sm"
+                placeholder="Nom du champ"
+              >
+              <select v-model="field.type" class="select select-bordered select-sm">
+                <option value="text">
+                  Texte
+                </option>
+                <option value="number">
+                  Nombre
+                </option>
+                <option value="select">
+                  Liste
+                </option>
+                <option value="boolean">
+                  Oui/Non
+                </option>
+                <option value="date">
+                  Date
+                </option>
+              </select>
+            </div>
+
+            <div class="flex items-center gap-2 text-xs">
+              <input v-model="field.required" type="checkbox" class="checkbox checkbox-xs">
+              Obligatoire
+            </div>
+
+            <textarea
+              v-if="field.type === 'select'"
+              v-model="field.optionsText"
+              class="textarea textarea-bordered textarea-sm h-20"
+              placeholder="Option 1&#10;Option 2"
+            />
+          </div>
+
+          <button
+            type="button"
+            class="btn btn-ghost btn-xs btn-square text-error"
+            @click="$emit('remove-field', index)"
+          >
+            <IconLucideTrash class="w-4 h-4" aria-hidden="true" />
+          </button>
+        </div>
+      </li>
+    </ul>
+
+    <button type="button" class="btn btn-outline btn-sm" @click="$emit('add-field')">
+      <IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" />
+      Ajouter un champ
+    </button>
+  </section>
+</template>
+
+<script setup lang="ts">
+import type { MachineCustomFieldEditorField } from '~/composables/useMachineCustomFieldDefs'
+import IconLucideGripVertical from '~icons/lucide/grip-vertical'
+import IconLucidePlus from '~icons/lucide/plus'
+import IconLucideTrash from '~icons/lucide/trash'
+
+defineProps<{
+  fields: MachineCustomFieldEditorField[]
+  saving: boolean
+  reorderClass: (index: number) => string
+  onDragStart: (index: number, event: DragEvent) => void
+  onDragEnter: (index: number) => void
+  onDrop: (index: number) => void
+  onDragEnd: () => void
+}>()
+
+defineEmits<{
+  save: []
+  'add-field': []
+  'remove-field': [index: number]
+}>()
+</script>

app/components/machine/MachineCustomFieldsCard.vue

@@ -0,0 +1,221 @@
+<template>
+  <div class="card bg-base-100 shadow-lg">
+    <div class="card-body space-y-4">
+      <div class="flex items-center justify-between">
+        <div>
+          <h2 class="card-title">Champs personnalisés</h2>
+          <p class="text-xs text-gray-500">
+            Champs personnalisés propres à cette machine.
+          </p>
+        </div>
+        <span v-if="visibleCustomFields.length" class="badge badge-outline">
+          {{ visibleCustomFields.length }} champ{{ visibleCustomFields.length > 1 ? 's' : '' }}
+        </span>
+      </div>
+
+      <!-- View mode: display values -->
+      <template v-if="!isEditMode">
+        <div v-if="visibleCustomFields.length" class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div
+            v-for="field in visibleCustomFields"
+            :key="field.customFieldValueId || field.id || field.name"
+            class="form-control"
+          >
+            <label class="label">
+              <span class="label-text text-sm">{{ field.name }}</span>
+            </label>
+            <div class="input input-bordered input-sm bg-base-200">
+              {{ formatCustomFieldValue(field) }}
+            </div>
+          </div>
+        </div>
+        <p v-else class="text-xs text-gray-500">
+          Aucun champ personnalisé défini pour cette machine.
+        </p>
+      </template>
+
+      <!-- Edit mode: definition management + value editing -->
+      <template v-else>
+        <p v-if="!customFields.length" class="text-xs text-gray-500">
+          Aucun champ personnalisé défini.
+        </p>
+
+        <div v-else class="space-y-3">
+          <div
+            v-for="(field, index) in customFields"
+            :key="field.id || field.name || index"
+            class="border border-base-200 rounded-md p-3 space-y-2"
+          >
+            <div class="flex items-start justify-between gap-2">
+              <div class="flex-1 space-y-2">
+                <!-- Definition fields -->
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-2">
+                  <input
+                    :value="field.name"
+                    type="text"
+                    class="input input-bordered input-sm"
+                    placeholder="Nom du champ"
+                    @blur="handleDefinitionUpdate(field, 'name', ($event.target as HTMLInputElement).value)"
+                  />
+                  <select
+                    :value="field.type || 'text'"
+                    class="select select-bordered select-sm"
+                    @change="handleDefinitionUpdate(field, 'type', ($event.target as HTMLSelectElement).value)"
+                  >
+                    <option value="text">Texte</option>
+                    <option value="number">Nombre</option>
+                    <option value="select">Liste</option>
+                    <option value="boolean">Oui/Non</option>
+                    <option value="date">Date</option>
+                  </select>
+                  <div class="flex items-center gap-2 text-sm">
+                    <input
+                      type="checkbox"
+                      class="checkbox checkbox-sm"
+                      :checked="!!field.required"
+                      @change="handleDefinitionUpdate(field, 'required', ($event.target as HTMLInputElement).checked)"
+                    />
+                    Obligatoire
+                  </div>
+                </div>
+
+                <!-- Options for select type -->
+                <textarea
+                  v-if="(field.type || 'text') === 'select'"
+                  :value="field.optionsText || (Array.isArray(field.options) ? field.options.join('\n') : '')"
+                  class="textarea textarea-bordered textarea-sm h-20 w-full"
+                  placeholder="Option 1&#10;Option 2"
+                  @blur="handleOptionsUpdate(field, ($event.target as HTMLTextAreaElement).value)"
+                ></textarea>
+
+                <!-- Value editing -->
+                <div class="pt-1 border-t border-base-200">
+                  <label class="label py-0">
+                    <span class="label-text text-xs text-base-content/60">Valeur</span>
+                  </label>
+                  <input
+                    v-if="!field.type || field.type === 'text'"
+                    :value="field.value ?? ''"
+                    type="text"
+                    class="input input-bordered input-sm w-full"
+                    placeholder="Valeur..."
+                    @input="$emit('set-custom-field-value', field, ($event.target as HTMLInputElement).value)"
+                    @blur="$emit('update-custom-field', field)"
+                  />
+                  <input
+                    v-else-if="field.type === 'number'"
+                    :value="field.value ?? ''"
+                    type="number"
+                    class="input input-bordered input-sm w-full"
+                    placeholder="Valeur..."
+                    @input="$emit('set-custom-field-value', field, ($event.target as HTMLInputElement).value)"
+                    @blur="$emit('update-custom-field', field)"
+                  />
+                  <select
+                    v-else-if="field.type === 'select'"
+                    :value="field.value ?? ''"
+                    class="select select-bordered select-sm w-full"
+                    @change="onSelectChange(field, ($event.target as HTMLSelectElement).value)"
+                  >
+                    <option value="">Sélectionner...</option>
+                    <option
+                      v-for="option in field.options"
+                      :key="option"
+                      :value="option"
+                    >
+                      {{ option }}
+                    </option>
+                  </select>
+                  <label
+                    v-else-if="field.type === 'boolean'"
+                    class="flex items-center gap-3 cursor-pointer py-1"
+                  >
+                    <input
+                      type="checkbox"
+                      class="toggle toggle-primary toggle-sm"
+                      :checked="String(field.value).toLowerCase() === 'true'"
+                      @change="onBooleanChange(field, ($event.target as HTMLInputElement).checked)"
+                    >
+                    <span
+                      class="text-sm"
+                      :class="String(field.value).toLowerCase() === 'true' ? 'text-success font-medium' : 'text-base-content/60'"
+                    >
+                      {{ String(field.value).toLowerCase() === 'true' ? 'Oui' : 'Non' }}
+                    </span>
+                  </label>
+                  <input
+                    v-else-if="field.type === 'date'"
+                    :value="field.value ?? ''"
+                    type="date"
+                    class="input input-bordered input-sm w-full"
+                    @input="$emit('set-custom-field-value', field, ($event.target as HTMLInputElement).value)"
+                    @blur="$emit('update-custom-field', field)"
+                  />
+                </div>
+              </div>
+
+              <button
+                type="button"
+                class="btn btn-ghost btn-sm btn-square flex-shrink-0 text-error"
+                title="Supprimer ce champ"
+                @click="$emit('delete-field', field.id || field.customFieldId)"
+              >
+                <IconLucideTrash class="w-4 h-4" aria-hidden="true" />
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <button
+          type="button"
+          class="btn btn-sm md:btn-md btn-primary"
+          @click="$emit('add-field')"
+        >
+          Ajouter un champ personnalisé
+        </button>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import IconLucideTrash from '~icons/lucide/trash'
+import { formatCustomFieldValue } from '~/shared/utils/customFieldUtils'
+
+defineProps<{
+  customFields: any[]
+  visibleCustomFields: any[]
+  isEditMode: boolean
+}>()
+
+const emit = defineEmits<{
+  'set-custom-field-value': [field: any, value: unknown]
+  'update-custom-field': [field: any]
+  'add-field': []
+  'delete-field': [fieldId: string]
+  'update-field-definition': [fieldId: string, data: Record<string, unknown>]
+}>()
+
+const handleDefinitionUpdate = (field: any, key: string, value: unknown) => {
+  const fieldId = field.id || field.customFieldId
+  if (!fieldId) return
+  emit('update-field-definition', fieldId, { ...field, [key]: value })
+}
+
+const handleOptionsUpdate = (field: any, raw: string) => {
+  const fieldId = field.id || field.customFieldId
+  if (!fieldId) return
+  const options = raw.split('\n').map((o: string) => o.trim()).filter((o: string) => o.length > 0)
+  emit('update-field-definition', fieldId, { ...field, options })
+}
+
+const onSelectChange = (field: any, value: string) => {
+  emit('set-custom-field-value', field, value)
+  emit('update-custom-field', field)
+}
+
+const onBooleanChange = (field: any, checked: boolean) => {
+  emit('set-custom-field-value', field, checked ? 'true' : 'false')
+  emit('update-custom-field', field)
+}
+</script>

app/components/machine/MachineDetailHeader.vue

@@ -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>

app/components/machine/MachineDocumentsCard.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="card bg-base-100 shadow-sm mt-6">
+    <div class="card-body space-y-4">
+      <div class="flex items-center justify-between">
+        <div>
+          <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-ghost btn-xs text-error"
+              :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>

app/components/machine/MachineInfoCard.vue

@@ -0,0 +1,242 @@
+<template>
+  <div class="card bg-base-100 shadow-sm">
+    <div class="card-body">
+      <h2 class="card-title tracking-tight">Informations de la machine</h2>
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div class="form-control">
+          <label class="label">
+            <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 class="form-control">
+          <label class="label">
+            <span class="label-text">Site</span>
+          </label>
+          <select
+            v-if="isEditMode"
+            :value="machineSiteId"
+            class="select select-bordered"
+            @change="$emit('update:machine-site-id', ($event.target as HTMLSelectElement).value); $emit('blur-field')"
+          >
+            <option value="">Sélectionner un site</option>
+            <option
+              v-for="site in sites"
+              :key="site.id"
+              :value="site.id"
+            >
+              {{ site.name }}
+            </option>
+          </select>
+          <div v-else class="input input-bordered bg-base-200">
+            {{ machineSiteName || 'Non défini' }}
+          </div>
+        </div>
+        <div v-if="isEditMode || machineReference" class="form-control">
+          <label class="label">
+            <span class="label-text">Référence</span>
+          </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="border border-base-300 rounded-btn bg-base-200 px-4 py-2 min-h-12 flex items-center">
+            <div v-if="machineConstructeursDisplay.length" class="flex flex-wrap gap-2">
+              <span
+                v-for="constructeur in machineConstructeursDisplay"
+                :key="constructeur.id"
+                class="badge badge-ghost gap-1"
+              >
+                {{ constructeur.name }}
+                <span
+                  v-if="formatConstructeurContactSummary(constructeur)"
+                  class="text-xs opacity-60"
+                >
+                  · {{ formatConstructeurContactSummary(constructeur) }}
+                </span>
+              </span>
+            </div>
+            <span v-else class="text-base-content/50">Non défini</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Champs personnalisés -->
+      <div v-if="visibleCustomFields.length" class="mt-6 pt-4 border-t border-base-200">
+        <h4 class="font-semibold text-base-content/80 mb-3">Champs personnalisés de la machine</h4>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div
+            v-for="field in visibleCustomFields"
+            :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 v-if="isEditMode" class="mt-6 pt-4 border-t border-base-200">
+        <MachineCustomFieldDefEditor
+          :fields="fieldDefs.fields.value"
+          :saving="fieldDefs.saving.value"
+          :reorder-class="fieldDefs.reorderClass"
+          :on-drag-start="fieldDefs.onDragStart"
+          :on-drag-enter="fieldDefs.onDragEnter"
+          :on-drop="fieldDefs.onDrop"
+          :on-drag-end="fieldDefs.onDragEnd"
+          @save="fieldDefs.saveDefinitions()"
+          @add-field="fieldDefs.addField()"
+          @remove-field="fieldDefs.removeField($event)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { watch } from 'vue'
+import ConstructeurSelect from '~/components/ConstructeurSelect.vue'
+import MachineCustomFieldDefEditor from '~/components/machine/MachineCustomFieldDefEditor.vue'
+import {
+  formatConstructeurContact as formatConstructeurContactSummary,
+} from '~/shared/constructeurUtils'
+import { formatCustomFieldValue } from '~/shared/utils/customFieldUtils'
+import { useMachineCustomFieldDefs } from '~/composables/useMachineCustomFieldDefs'
+
+const props = defineProps<{
+  isEditMode: boolean
+  machineName: string
+  machineReference: string
+  machineSiteId: string
+  machineSiteName: string
+  sites: any[]
+  machineConstructeurIds: string[]
+  machineConstructeursDisplay: any[]
+  hasMachineConstructeur: boolean
+  visibleCustomFields: any[]
+  getMachineFieldId: (fieldName: string) => string
+  machineId: string
+  machineCustomFieldDefs: any[]
+}>()
+
+const emit = defineEmits<{
+  'update:machine-name': [value: string]
+  'update:machine-reference': [value: string]
+  'update:machine-site-id': [value: string]
+  'update:constructeur-ids': [ids: unknown]
+  'blur-field': []
+  'set-custom-field-value': [field: any, value: unknown]
+  'update-custom-field': [field: any]
+  'custom-fields-saved': []
+}>()
+
+const fieldDefs = useMachineCustomFieldDefs({
+  machineId: props.machineId,
+  initialDefs: props.machineCustomFieldDefs,
+  onSaved: () => emit('custom-fields-saved'),
+})
+
+watch(() => props.machineCustomFieldDefs, (newDefs) => {
+  fieldDefs.reinit(newDefs)
+}, { deep: true })
+</script>

app/components/machine/MachinePiecesCard.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="card bg-base-100 shadow-sm">
+    <div class="card-body">
+      <div class="flex justify-between items-center mb-4">
+        <h2 class="card-title">Pièces de la machine</h2>
+        <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 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">
+          <PieceItem
+            :piece="piece"
+            :is-edit-mode="isEditMode"
+            :show-delete="isEditMode"
+            :collapse-all="collapsed"
+            :toggle-token="collapseToggleToken"
+            @update="$emit('update-piece', $event)"
+            @edit="$emit('edit-piece', $event)"
+            @delete="$emit('remove-piece', piece.linkId || piece.id)"
+          />
+        </div>
+      </div>
+
+      <button
+        v-if="isEditMode"
+        type="button"
+        class="btn btn-sm md:btn-md btn-primary"
+        @click="$emit('add-piece')"
+      >
+        Ajouter une pièce
+      </button>
+    </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': []
+  'update-piece': [piece: any]
+  'edit-piece': [piece: any]
+  'add-piece': []
+  'remove-piece': [linkId: string]
+}>()
+</script>

app/components/machine/MachineProductsCard.vue

@@ -0,0 +1,175 @@
+<template>
+  <div class="card bg-base-100 shadow-sm">
+    <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>
+        <span class="badge badge-outline" v-if="products.length">
+          {{ products.length }} produit{{ products.length > 1 ? 's' : '' }}
+        </span>
+      </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"
+        >
+          <div class="flex items-center justify-between flex-wrap gap-2">
+            <p class="font-semibold text-base-content">
+              {{ product.name }}
+            </p>
+            <div class="flex items-center gap-2">
+              <span v-if="product.groupLabel" class="badge badge-ghost badge-sm">
+                {{ product.groupLabel }}
+              </span>
+              <button
+                v-if="isEditMode"
+                type="button"
+                class="btn btn-ghost btn-xs text-error"
+                title="Supprimer ce produit"
+                @click="$emit('remove-product', (product.linkId || product.id) as string)"
+              >
+                Supprimer
+              </button>
+            </div>
+          </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>
+
+      <button
+        v-if="isEditMode"
+        type="button"
+        class="btn btn-sm md:btn-md btn-primary"
+        @click="$emit('add-product')"
+      >
+        Ajouter un produit
+      </button>
+    </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>

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>

app/components/model-types/ManagementView.vue

@@ -9,130 +9,278 @@
       </p>
     </header>
 
-    <ModelTypesToolbar
+    <nav
-      :category="selectedCategory"
+      v-if="allowCategorySwitch"
-      :search="searchInput"
+      class="tabs tabs-boxed inline-flex"
-      :sort="sort"
+      role="tablist"
-      :dir="dir"
+      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"
+      :sort="currentSort"
-      @update:category="onCategoryChange"
+      :pagination="paginationState"
-      @update:search="onSearchInput"
+      :show-per-page="true"
-      @update:sort="onSortChange"
+      row-key="id"
-      @update:dir="onDirChange"
+      empty-message="Aucune catégorie trouvée."
-      @create="openCreatePage"
+      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>
+
+    <ConversionModal
+      :open="conversionModalOpen"
+      :model-type="conversionTarget"
+      @close="closeConversionModal"
+      @converted="onConverted"
     />
 
-    <ModelTypesTable
+    <RelatedItemsModal
-      :items="items"
+      :open="relatedModalOpen"
-      :loading="loading"
+      :model-type="relatedType"
-      :total="total"
+      @close="relatedModalOpen = false"
-      :limit="limit"
+      @open-edit="openRelatedEdit"
-      :offset="offset"
-      @edit="openEditPage"
-      @delete="confirmDelete"
-      @update:offset="onOffsetChange"
     />
   </main>
 </template>
 
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { computed, onBeforeUnmount, onMounted, ref, watch, type Ref } from 'vue'
-import { useHead, useRouter } from "#imports";
+import { useHead, useRouter } from '#imports'
-import ModelTypesToolbar from "~/components/model-types/Toolbar.vue";
+import DataTable from '~/components/common/DataTable.vue'
-import ModelTypesTable from "~/components/model-types/Table.vue";
+import ConversionModal from '~/components/model-types/ConversionModal.vue'
+import { useUrlState } from '~/composables/useUrlState'
+import type { DataTableSort } from '~/shared/types/dataTable'
 import {
   deleteModelType,
   listModelTypes,
   type ModelCategory,
   type ModelType,
   type ModelTypeListResponse,
-} from "~/services/modelTypes";
+} from '~/services/modelTypes'
-import { useToast } from "~/composables/useToast";
+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 =
+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.";
+  = '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;
+    category: ModelCategory
-    heading: string;
+    heading: string
-    description?: string;
+    description?: string
-    allowCategorySwitch?: boolean;
+    allowCategorySwitch?: boolean
   }>(),
   {
     allowCategorySwitch: false,
-  }
+  },
-);
+)
 
-const selectedCategory = ref<ModelCategory>(props.category);
+const selectedCategory = ref<ModelCategory>(props.category)
-const searchInput = ref("");
+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 items = ref<ModelType[]>([]);
+// State synced with URL query params
-const total = ref(0);
+const urlState = useUrlState({
-const loading = ref(false);
+  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;
+// Initialize searchInput from URL
-let activeController: AbortController | null = null;
+searchInput.value = searchTerm.value
 
-const router = useRouter();
+const items = ref<ModelType[]>([])
-const { showError, showSuccess } = useToast();
+const total = ref(0)
+const loading = ref(false)
 
-const headingText = computed(() => props.heading);
+let debounceTimer: ReturnType<typeof setTimeout> | null = null
-const descriptionText = computed(
+let activeController: AbortController | null = null
-  () => props.description ?? DEFAULT_DESCRIPTION
-);
-const allowCategorySwitch = computed(() => props.allowCategorySwitch ?? false);
 
-useHead(() => ({
+const router = useRouter()
-  title: headingText.value,
+const { showError, showSuccess } = useToast()
-}));
+const { canEdit } = usePermissions()
 
-const extractErrorMessage = (error: unknown) => {
+const headingText = computed(() => props.heading)
-  if (error && typeof error === "object") {
+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;
+      data?: Record<string, unknown>
-      statusMessage?: string;
+      statusMessage?: string
-      message?: string;
+      message?: string
-    };
+    }
     if (maybeFetchError.data) {
-      const data = maybeFetchError.data;
+      const data = maybeFetchError.data
-      if (typeof data.message === "string") {
+      if (typeof data['hydra:description'] === 'string') raw = data['hydra:description']
-        return data.message;
+      else if (typeof data.detail === 'string') raw = data.detail
-      }
+      else if (typeof data.message === 'string') raw = data.message
-      if (Array.isArray(data.message) && data.message.length > 0) {
+      else if (Array.isArray(data.message) && data.message.length > 0) raw = data.message[0]
-        return data.message[0];
+      else if (typeof data.error === 'string') raw = data.error
-      }
-    }
-    if (typeof maybeFetchError.statusMessage === "string") {
-      return maybeFetchError.statusMessage;
-    }
-    if (typeof maybeFetchError.message === "string") {
-      return maybeFetchError.message;
     }
+    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 ({
+const doRefresh = async ({ resetOffset = false }: { resetOffset?: boolean } = {}) => {
-  resetOffset = false,
+  if (resetOffset) offset.value = 0
-}: { resetOffset?: boolean } = {}) => {
-  if (resetOffset) {
-    offset.value = 0;
-  }
 
-  if (activeController) {
+  if (activeController) activeController.abort()
-    activeController.abort();
+  const controller = new AbortController()
-  }
+  activeController = controller
-
+  loading.value = true
-  const controller = new AbortController();
-  activeController = controller;
-  loading.value = true;
 
   try {
     const response: ModelTypeListResponse = await listModelTypes(
@@ -144,142 +292,147 @@ const refresh = async ({
         limit: limit.value,
         offset: offset.value,
       },
-      { signal: controller.signal }
+      { signal: controller.signal },
-    );
+    )
-
+    items.value = response.items
-    items.value = response.items;
+    total.value = response.total
-    total.value = response.total;
+    offset.value = response.offset
-    offset.value = response.offset;
+    limit.value = response.limit
-    limit.value = response.limit;
+  }
-  } catch (error: any) {
+  catch (error: unknown) {
-    if (error?.name === "AbortError") {
+    if (error && typeof error === 'object' && (error as { name?: string }).name === 'AbortError') return
-      return;
+    showError(extractErrorMessage(error))
-    }
+  }
-    showError(extractErrorMessage(error));
+  finally {
-  } finally {
     if (activeController === controller) {
-      loading.value = false;
+      loading.value = false
-      activeController = null;
+      activeController = null
     }
   }
-};
+}
 
 watch(
   () => props.category,
   (value) => {
     if (value !== selectedCategory.value) {
-      selectedCategory.value = value;
+      selectedCategory.value = value
-      refresh({ resetOffset: true });
+      doRefresh({ resetOffset: true })
     }
-  }
+  },
-);
+)
-
-const onSearchInput = (value: string) => {
-  searchInput.value = value;
-};
 
 const onCategoryChange = (value: ModelCategory) => {
-  if (!allowCategorySwitch.value) {
+  if (!props.allowCategorySwitch) return
-    return;
-  }
   if (selectedCategory.value !== value) {
-    selectedCategory.value = value;
+    selectedCategory.value = value
-    refresh({ resetOffset: true });
+    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") {
+  if (category === 'COMPONENT') return '/component-category'
-    return "/component-category";
+  if (category === 'PIECE') return '/piece-category'
-  }
+  return '/product-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 category = item.category ?? selectedCategory.value
-  const basePath = resolveCategoryBasePath(category);
+  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(
+  const confirmed = await confirm({
-    "Supprimer ce type ? Cette action est irréversible."
+    message: 'Supprimer ce type ? Cette action est irréversible.',
-  );
+  })
-  if (!confirmed) {
+  if (!confirmed) return
-    return;
-  }
 
   try {
-    await deleteModelType(item.id);
+    await deleteModelType(item.id)
-    showSuccess(`Type « ${item.name} » supprimé avec succès.`);
+    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 doRefresh()
-    await refresh();
-  } catch (error) {
-    showError(extractErrorMessage(error));
   }
-};
+  catch (error) {
+    showError(extractErrorMessage(error))
+  }
+}
+
+const relatedModalOpen = ref(false)
+const relatedType = ref<ModelType | null>(null)
+
+const resolveRelatedEditBasePath = (category: ModelCategory) => {
+  if (category === 'COMPONENT') return '/component'
+  if (category === 'PIECE') return '/pieces'
+  return '/product'
+}
+
+const openRelatedModal = (item: ModelType) => {
+  relatedType.value = item
+  relatedModalOpen.value = true
+}
+
+const openRelatedEdit = (entry: { id: string }) => {
+  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 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) {
+    if (debounceTimer) clearTimeout(debounceTimer)
-      clearTimeout(debounceTimer);
-    }
     debounceTimer = setTimeout(() => {
-      searchTerm.value = value.trim();
+      searchTerm.value = value.trim()
-      refresh({ resetOffset: true });
+      doRefresh({ resetOffset: true })
-    }, 300);
+    }, 300)
-  }
+  },
-);
+)
 
 onMounted(() => {
-  refresh();
+  doRefresh()
-});
+})
 
 onBeforeUnmount(() => {
-  if (debounceTimer) {
+  if (debounceTimer) clearTimeout(debounceTimer)
-    clearTimeout(debounceTimer);
+  if (activeController) activeController.abort()
-  }
+})
-  if (activeController) {
-    activeController.abort();
-  }
-});
 </script>

app/components/model-types/ModelTypeForm.vue

@@ -15,7 +15,7 @@
           minlength="2"
           maxlength="120"
           required
-        />
+          />
         <p v-if="errors.name" class="mt-1 text-sm text-error">{{ errors.name }}</p>
       </div>
       <div>
@@ -28,7 +28,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>
@@ -112,7 +112,7 @@
       <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 +150,7 @@ const props = withDefaults(defineProps<{
   structureLoading?: boolean
   allowComponentSubcomponents?: boolean
   componentSubcomponentMaxDepth?: number
+  readonly?: boolean
 }>(), {
   initialData: null,
   saving: false,
@@ -157,6 +158,7 @@ const props = withDefaults(defineProps<{
   structureLoading: false,
   allowComponentSubcomponents: true,
   componentSubcomponentMaxDepth: 1,
+  readonly: false,
 })
 
 const emit = defineEmits<{
@@ -173,6 +175,7 @@ const componentSubcomponentMaxDepth = computed(() =>
     ? props.componentSubcomponentMaxDepth
     : 1,
 )
+const isReadonly = computed(() => props.readonly === true)
 
 const form = reactive<ModelTypePayload>({
   name: '',
@@ -236,10 +239,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'
+    : typeof incomingRecord.description === 'string'
-      ? (incoming as any).description
+      ? incomingRecord.description
       : ''
 
   errors.name = undefined
@@ -248,7 +252,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 || isReadonly.value)
 
 const validate = () => {
   errors.name = undefined
@@ -265,6 +269,7 @@ const validate = () => {
 }
 
 const handleSubmit = () => {
+  if (isReadonly.value) return
   if (!validate()) {
     return
   }

app/components/model-types/RelatedItemsModal.vue

@@ -0,0 +1,182 @@
+<template>
+  <dialog class="modal" :class="{ 'modal-open': open }">
+    <div class="modal-box max-w-3xl">
+      <h3 class="text-lg font-bold text-base-content">
+        {{ modalTitle }}
+      </h3>
+      <p class="mt-1 text-sm text-base-content/70">
+        {{ modalSubtitle }}
+      </p>
+
+      <div class="mt-4 rounded-xl border border-base-200 bg-base-100">
+        <div v-if="loading" class="flex items-center gap-2 px-4 py-6 text-sm text-info">
+          <span class="loading loading-spinner loading-sm" aria-hidden="true" />
+          Chargement des éléments liés…
+        </div>
+
+        <div v-else-if="error" class="px-4 py-6 text-sm text-error">
+          {{ error }}
+        </div>
+
+        <div
+          v-else-if="items.length === 0"
+          class="px-4 py-6 text-sm text-base-content/60"
+        >
+          Aucun élément lié à cette catégorie.
+        </div>
+
+        <ul v-else class="max-h-96 divide-y divide-base-200 overflow-y-auto">
+          <li
+            v-for="entry in items"
+            :key="entry.id"
+            class="px-2 py-1"
+          >
+            <button
+              type="button"
+              class="flex w-full flex-col gap-1 rounded-lg px-2 py-2 text-left hover:bg-base-200 focus:bg-base-200 focus:outline-none"
+              @click="onOpenEdit(entry)"
+            >
+              <span class="font-medium text-base-content">{{ entry.name }}</span>
+              <span v-if="entry.reference" class="text-xs text-base-content/60">
+                Référence: {{ entry.reference }}
+              </span>
+            </button>
+          </li>
+        </ul>
+      </div>
+
+      <div class="modal-action">
+        <button type="button" class="btn" @click="emit('close')">
+          Fermer
+        </button>
+      </div>
+    </div>
+  </dialog>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { useApi } from '~/composables/useApi'
+import { extractCollection } from '~/shared/utils/apiHelpers'
+import { humanizeError } from '~/shared/utils/errorMessages'
+import type { ModelCategory, ModelType } from '~/services/modelTypes'
+
+type RelatedEntry = {
+  id: string
+  name: string
+  reference?: string | null
+}
+
+const props = defineProps<{
+  open: boolean
+  modelType: ModelType | null
+}>()
+
+const emit = defineEmits<{
+  close: []
+  'open-edit': [entry: RelatedEntry]
+}>()
+
+const { get } = useApi()
+
+const loading = ref(false)
+const error = ref<string | null>(null)
+const items = ref<RelatedEntry[]>([])
+
+const categoryLabels: Record<ModelCategory, { plural: string, singular: string }> = {
+  COMPONENT: { plural: 'composants', singular: 'composant' },
+  PIECE: { plural: 'pièces', singular: 'pièce' },
+  PRODUCT: { plural: 'produits', singular: 'produit' },
+}
+
+const modalTitle = computed(() => {
+  if (!props.modelType) return 'Éléments liés'
+  return `Éléments liés à « ${props.modelType.name} »`
+})
+
+const modalSubtitle = computed(() => {
+  if (!props.modelType) return ''
+  const labels = categoryLabels[props.modelType.category] ?? categoryLabels.COMPONENT
+  const count = items.value.length
+  if (loading.value) return `Chargement des ${labels.plural}…`
+  if (count === 0) return `Aucun ${labels.singular} lié.`
+  if (count === 1) return `1 ${labels.singular} lié.`
+  return `${count} ${labels.plural} liés.`
+})
+
+const resolveRelatedConfig = (category: ModelCategory) => {
+  if (category === 'COMPONENT') return { endpoint: '/composants', filterKey: 'typeComposant' }
+  if (category === 'PIECE') return { endpoint: '/pieces', filterKey: 'typePiece' }
+  return { endpoint: '/products', filterKey: 'typeProduct' }
+}
+
+const mapRelatedEntry = (item: unknown): RelatedEntry | null => {
+  if (!item || typeof item !== 'object') return null
+  const record = item as Record<string, unknown>
+  if (typeof record.id !== 'string') return null
+  const name = typeof record.name === 'string' && record.name.trim() ? record.name : 'Sans nom'
+  const reference
+    = typeof record.reference === 'string' && record.reference.trim()
+      ? record.reference
+      : typeof record.code === 'string' && record.code.trim()
+        ? record.code
+        : null
+  return { id: record.id, name, reference }
+}
+
+const loadRelatedItems = async (modelType: ModelType) => {
+  const { endpoint, filterKey } = resolveRelatedConfig(modelType.category)
+  const params = new URLSearchParams()
+  params.set('itemsPerPage', '200')
+  params.set(filterKey, `/api/model_types/${modelType.id}`)
+  params.set('order[name]', 'asc')
+
+  loading.value = true
+  error.value = null
+  items.value = []
+
+  try {
+    const result = await get(`${endpoint}?${params.toString()}`)
+    if (!result.success) {
+      error.value = result.error ?? 'Impossible de charger les éléments liés.'
+      return
+    }
+    const collection = extractCollection(result.data)
+    items.value = collection
+      .map(mapRelatedEntry)
+      .filter((entry): entry is RelatedEntry => Boolean(entry))
+  }
+  catch (err) {
+    let raw: string | null = null
+    if (err && typeof err === 'object') {
+      const e = err as { data?: Record<string, unknown>, statusMessage?: string, message?: string }
+      if (e.data) {
+        const data = e.data
+        if (typeof data['hydra:description'] === 'string') raw = data['hydra:description']
+        else if (typeof data.detail === 'string') raw = data.detail
+        else if (typeof data.message === 'string') raw = data.message
+        else if (typeof data.error === 'string') raw = data.error
+      }
+      if (!raw && typeof e.statusMessage === 'string') raw = e.statusMessage
+      if (!raw && typeof e.message === 'string') raw = e.message
+    }
+    error.value = humanizeError(raw)
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+const onOpenEdit = (entry: RelatedEntry) => {
+  emit('open-edit', entry)
+}
+
+watch(
+  () => props.open,
+  (isOpen) => {
+    if (isOpen && props.modelType) {
+      void loadRelatedItems(props.modelType)
+    }
+  },
+)
+</script>

app/components/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',

app/components/model-types/Toolbar.vue

@@ -90,6 +90,7 @@ const props = defineProps<{
   dir: SortDirection;
   loading?: boolean;
   showCategoryTabs?: boolean;
+  canEdit?: boolean;
 }>();
 
 const emit = defineEmits<{

app/components/sites/SiteCard.vue

@@ -1,27 +1,37 @@
 <template>
-  <div class="card bg-base-100 shadow-lg hover:shadow-xl transition-shadow">
+  <div
+    class="card site-card shadow-md hover:shadow-xl transition-shadow overflow-hidden"
+    :style="{
+      borderTop: site.color ? `4px solid ${site.color}` : '4px solid transparent',
+      background: site.color ? `linear-gradient(160deg, ${site.color}30 0%, ${site.color}08 40%, var(--color-base-100) 100%)` : undefined,
+    }"
+  >
     <div class="card-body">
       <div class="flex items-center justify-between mb-4">
-        <h3 class="card-title text-lg">
+        <h3 class="card-title text-lg text-base-content">
           {{ site.name }}
         </h3>
-        <div class="badge badge-primary badge-sm">
+        <div
+          class="badge font-bold"
+          :style="site.color ? { backgroundColor: site.color + '30', color: site.color, borderColor: site.color + '50' } : {}"
+          :class="!site.color ? 'badge-primary' : ''"
+        >
           {{ machineCount }} machines
         </div>
       </div>
 
       <div class="space-y-3 text-sm">
-        <div class="flex items-center gap-2 text-gray-700">
+        <div class="flex items-center gap-2 text-base-content/80">
           <IconLucideUser class="w-4 h-4 text-primary" aria-hidden="true" />
           <span class="font-medium">{{ site.contactName }}</span>
         </div>
 
-        <div class="flex items-center gap-2 text-gray-600">
+        <div class="flex items-center gap-2 text-base-content/60">
           <IconLucidePhone class="w-4 h-4 text-secondary" aria-hidden="true" />
           <span>{{ formattedContactPhone }}</span>
         </div>
 
-        <div class="flex items-start gap-2 text-gray-600">
+        <div class="flex items-start gap-2 text-base-content/60">
           <IconLucideMapPin class="w-4 h-4 text-accent mt-1" aria-hidden="true" />
           <span>
             {{ site.contactAddress }}<br>
@@ -29,7 +39,7 @@
           </span>
         </div>
 
-        <div class="flex items-center gap-2 text-gray-600">
+        <div class="flex items-center gap-2 text-base-content/60">
           <IconLucideFactory class="w-4 h-4 text-blue-500" aria-hidden="true" />
           <span>{{ machineCount }} machine(s)</span>
         </div>
@@ -37,9 +47,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 +65,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,

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')

app/components/sites/SiteCreateModal.vue

@@ -12,17 +12,58 @@
             type="text"
             placeholder="Ex: Usine principale"
             class="input input-bordered"
+            :disabled="disabled"
             required
           />
         </div>
 
-        <SiteContactFormFields :form="siteRef" />
+        <div class="form-control">
+          <label class="label">
+            <span class="label-text">Couleur</span>
+          </label>
+          <div v-if="siteRef.color" class="flex items-center gap-3">
+            <input
+              :value="siteRef.color"
+              type="color"
+              class="w-10 h-10 rounded cursor-pointer border border-base-300"
+              :disabled="disabled"
+              @input="(e: Event) => { siteRef.color = (e.target as HTMLInputElement).value }"
+            >
+            <input
+              v-model="siteRef.color"
+              type="text"
+              placeholder="#000000"
+              class="input input-bordered input-sm flex-1"
+              :disabled="disabled"
+              maxlength="7"
+            >
+            <button
+              type="button"
+              class="btn btn-ghost btn-xs"
+              :disabled="disabled"
+              @click="siteRef.color = ''"
+            >
+              Effacer
+            </button>
+          </div>
+          <button
+            v-else
+            type="button"
+            class="btn btn-outline btn-sm w-fit"
+            :disabled="disabled"
+            @click="siteRef.color = '#3b82f6'"
+          >
+            Choisir une couleur
+          </button>
+        </div>
+
+        <SiteContactFormFields :form="siteRef" :disabled="disabled" />
 
         <div class="modal-action">
           <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>
@@ -38,6 +79,7 @@ import SiteContactFormFields from '~/components/sites/SiteContactFormFields.vue'
 
 type SiteForm = {
   name: string
+  color: string
   contactName: string
   contactPhone: string
   contactAddress: string
@@ -53,6 +95,10 @@ const props = defineProps({
   site: {
     type: Object as PropType<SiteForm>,
     required: true
+  },
+  disabled: {
+    type: Boolean,
+    default: false
   }
 })
 

app/components/sites/SiteEditModal.vue

@@ -2,8 +2,8 @@
   <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>
+        <span v-if="siteName" class="block text-sm font-normal text-base-content/50">{{ siteName }}</span>
       </h3>
       <form class="space-y-4" @submit.prevent="emit('submit')">
         <div class="form-control">
@@ -15,11 +15,52 @@
             type="text"
             placeholder="Nom du site"
             class="input input-bordered"
+            :disabled="disabled"
             required
           >
         </div>
 
-        <SiteContactFormFields :form="props.form" />
+        <div class="form-control">
+          <label class="label">
+            <span class="label-text">Couleur</span>
+          </label>
+          <div v-if="form.color" class="flex items-center gap-3">
+            <input
+              :value="form.color"
+              type="color"
+              class="w-10 h-10 rounded cursor-pointer border border-base-300"
+              :disabled="disabled"
+              @input="form.color = $event.target.value"
+            >
+            <input
+              v-model="form.color"
+              type="text"
+              placeholder="#000000"
+              class="input input-bordered input-sm flex-1"
+              :disabled="disabled"
+              maxlength="7"
+            >
+            <button
+              type="button"
+              class="btn btn-ghost btn-xs"
+              :disabled="disabled"
+              @click="form.color = ''"
+            >
+              Effacer
+            </button>
+          </div>
+          <button
+            v-else
+            type="button"
+            class="btn btn-outline btn-sm w-fit"
+            :disabled="disabled"
+            @click="form.color = '#3b82f6'"
+          >
+            Choisir une couleur
+          </button>
+        </div>
+
+        <SiteContactFormFields :form="props.form" :disabled="disabled" />
 
         <div class="border-t border-base-200 pt-4 space-y-4">
           <div class="flex items-center justify-between">
@@ -27,7 +68,7 @@
               <h4 class="font-semibold text-sm">
                 Documents liés
               </h4>
-              <p class="text-xs text-gray-500">
+              <p class="text-xs text-base-content/50">
                 Ajoutez des documents (PDF, images...) relatifs à ce site.
               </p>
             </div>
@@ -37,6 +78,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 +97,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"
+                      v-if="isImageDocument(document) && (document.fileUrl || document.path)"
-                      :src="document.path"
+                      :src="document.fileUrl || document.path"
                       class="h-full w-full object-cover"
                       :alt="`Aperçu de ${document.name}`"
                     >
@@ -72,7 +114,7 @@
                     <div class="font-medium">
                       {{ document.name }}
                     </div>
-                    <div class="text-xs text-gray-500">
+                    <div class="text-xs text-base-content/50">
                       {{ document.mimeType || 'Inconnu' }} • {{ formatSize(document.size) }}
                     </div>
                   </div>
@@ -90,7 +132,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 +145,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 +156,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 +197,10 @@ const props = defineProps({
   formatSize: {
     type: Function,
     required: true
+  },
+  disabled: {
+    type: Boolean,
+    default: false
   }
 })
 
@@ -167,8 +213,6 @@ const emit = defineEmits([
   'update:selectedFiles'
 ])
 
-const form = toRefs(props.form)
-
 const selectedFilesModel = computed({
   get: () => props.selectedFiles,
   set: value => emit('update:selectedFiles', value)

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 }
+}

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,
+  }
+}

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
-  }
-}

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,
+  }
+}

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,
+  }
+}

app/composables/useComponentCreate.ts

@@ -0,0 +1,417 @@
+/**
+ * Component creation page – orchestration composable.
+ *
+ * Pure structure-assignment helpers live in
+ * `~/shared/utils/structureAssignmentHelpers.ts`.
+ */
+
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { useRoute, useRouter } from '#imports'
+import type { StructureAssignmentNode } from '~/components/ComponentStructureAssignmentNode.vue'
+import { useComponentTypes } from '~/composables/useComponentTypes'
+import { useComposants } from '~/composables/useComposants'
+import { usePieces } from '~/composables/usePieces'
+import { usePieceTypes } from '~/composables/usePieceTypes'
+import { useProducts } from '~/composables/useProducts'
+import { useProductTypes } from '~/composables/useProductTypes'
+import { useApi } from '~/composables/useApi'
+import { useToast } from '~/composables/useToast'
+import { humanizeError } from '~/shared/utils/errorMessages'
+import { useCustomFields } from '~/composables/useCustomFields'
+import { useDocuments } from '~/composables/useDocuments'
+import { formatStructurePreview, normalizeStructureForEditor } from '~/shared/modelUtils'
+import {
+  type CustomFieldInput,
+  normalizeCustomFieldInputs,
+  requiredCustomFieldsFilled as _requiredCustomFieldsFilled,
+  saveCustomFieldValues as _saveCustomFieldValues,
+} from '~/shared/utils/customFieldFormUtils'
+import { uniqueConstructeurIds } from '~/shared/constructeurUtils'
+import {
+  getStructurePieces,
+  resolvePieceLabel as _resolvePieceLabel,
+  resolveProductLabel as _resolveProductLabel,
+  resolveSubcomponentLabel,
+  fetchModelTypeNames,
+  buildTypeLabelMap,
+} from '~/shared/utils/structureDisplayUtils'
+import {
+  hasAssignments,
+  initializeStructureAssignments,
+  isAssignmentNodeComplete,
+  serializeStructureAssignments,
+} from '~/shared/utils/structureAssignmentHelpers'
+import type { ComponentModelStructure } from '~/shared/types/inventory'
+import type { ModelType } from '~/services/modelTypes'
+
+interface ComponentCatalogType extends ModelType {
+  structure: ComponentModelStructure | null
+  customFields?: Array<Record<string, any>>
+}
+
+// ---------------------------------------------------------------------------
+// Main composable
+// ---------------------------------------------------------------------------
+
+export function useComponentCreate() {
+  const route = useRoute()
+  const router = useRouter()
+  const { get } = useApi()
+
+  const { componentTypes, loadComponentTypes, loadingComponentTypes: loadingTypes } = useComponentTypes()
+  const { pieceTypes, loadPieceTypes } = usePieceTypes()
+  const { productTypes, loadProductTypes } = useProductTypes()
+  const {
+    createComposant,
+    composants: componentCatalogRef,
+    loading: componentsLoading,
+  } = useComposants()
+  const {
+    pieces: pieceCatalogRef,
+    loading: piecesLoading,
+  } = usePieces()
+  const {
+    products: productCatalogRef,
+    loading: productsLoading,
+  } = useProducts()
+  const toast = useToast()
+  const { upsertCustomFieldValue, updateCustomFieldValue } = useCustomFields()
+  const { uploadDocuments } = useDocuments()
+  const { canEdit } = usePermissions()
+
+  // -------------------------------------------------------------------------
+  // Local state
+  // -------------------------------------------------------------------------
+
+  const selectedTypeId = ref<string>(typeof route.query.typeId === 'string' ? route.query.typeId : '')
+  const submitting = ref(false)
+  const creationForm = reactive({
+    name: '' as string,
+    description: '' as string,
+    reference: '' as string,
+    constructeurIds: [] as string[],
+    prix: '' as string,
+  })
+  const lastSuggestedName = ref('')
+  const customFieldInputs = ref<CustomFieldInput[]>([])
+  const structureAssignments = ref<StructureAssignmentNode | null>(null)
+  const selectedDocuments = ref<File[]>([])
+  const uploadingDocuments = ref(false)
+
+  // -------------------------------------------------------------------------
+  // Computed
+  // -------------------------------------------------------------------------
+
+  const availablePieces = computed(() => pieceCatalogRef.value ?? [])
+  const availableProducts = computed(() => productCatalogRef.value ?? [])
+  const availableComponents = computed(() => componentCatalogRef.value ?? [])
+  const structureDataLoading = computed(
+    () => piecesLoading.value || componentsLoading.value || productsLoading.value,
+  )
+
+  const fetchedPieceTypeMap = ref<Record<string, string>>({})
+  const pieceTypeLabelMap = computed(() =>
+    buildTypeLabelMap(pieceTypes.value, fetchedPieceTypeMap.value),
+  )
+  const productTypeLabelMap = computed(() =>
+    buildTypeLabelMap(productTypes.value),
+  )
+  const componentTypeLabelMap = computed(() =>
+    buildTypeLabelMap(componentTypes.value),
+  )
+
+  const componentTypeList = computed<ComponentCatalogType[]>(() =>
+    (componentTypes.value || [])
+      .filter((item: any) => item?.category === 'COMPONENT') as ComponentCatalogType[],
+  )
+
+  const typeOptionLabel = (type?: ComponentCatalogType) =>
+    type?.name || 'Catégorie'
+
+  const typeOptionDescription = (type?: ComponentCatalogType) =>
+    type?.description ? String(type.description) : ''
+
+  const selectedType = computed(() => {
+    if (!selectedTypeId.value) {
+      return null
+    }
+    return componentTypeList.value.find((type) => type.id === selectedTypeId.value) ?? null
+  })
+
+  const selectedTypeStructure = computed<ComponentModelStructure | null>(() => {
+    const structure = selectedType.value?.structure ?? null
+    return structure ? normalizeStructureForEditor(structure) : null
+  })
+
+  const structureHasRequirements = computed(() =>
+    hasAssignments(structureAssignments.value),
+  )
+
+  const structureSelectionsComplete = computed(() => {
+    if (!structureHasRequirements.value) {
+      return true
+    }
+    if (structureDataLoading.value) {
+      return false
+    }
+    if (!structureAssignments.value) {
+      return false
+    }
+    return isAssignmentNodeComplete(structureAssignments.value, true)
+  })
+
+  const requiredCustomFieldsFilled = computed(() =>
+    _requiredCustomFieldsFilled(customFieldInputs.value),
+  )
+
+  const canSubmit = computed(() => Boolean(
+    canEdit.value
+    && selectedType.value
+    && creationForm.name
+    && requiredCustomFieldsFilled.value
+    && structureSelectionsComplete.value
+    && !submitting.value,
+  ))
+
+  const resolvePieceLabel = (piece: Record<string, any>) =>
+    _resolvePieceLabel(piece, pieceTypeLabelMap.value)
+
+  const resolveProductLabel = (product: Record<string, any>) =>
+    _resolveProductLabel(product, productTypeLabelMap.value)
+
+  // -------------------------------------------------------------------------
+  // Watchers
+  // -------------------------------------------------------------------------
+
+  watch(
+    () => route.query.typeId,
+    (value) => {
+      if (typeof value === 'string') {
+        selectedTypeId.value = value
+      }
+    },
+  )
+
+  watch(selectedTypeId, (id) => {
+    const current = typeof route.query.typeId === 'string' ? route.query.typeId : ''
+    if ((id || '') === current) {
+      return
+    }
+    const nextQuery = { ...route.query }
+    if (id) {
+      nextQuery.typeId = id
+    }
+    else {
+      delete nextQuery.typeId
+    }
+    router.replace({ path: route.path, query: nextQuery }).catch(() => {})
+  })
+
+  const clearCreationForm = () => {
+    creationForm.name = ''
+    creationForm.description = ''
+    creationForm.reference = ''
+    creationForm.constructeurIds = []
+    creationForm.prix = ''
+    lastSuggestedName.value = ''
+    structureAssignments.value = null
+  }
+
+  watch(selectedType, (type) => {
+    if (!type) {
+      clearCreationForm()
+      customFieldInputs.value = []
+      structureAssignments.value = null
+      return
+    }
+    if (!creationForm.name || creationForm.name === lastSuggestedName.value) {
+      creationForm.name = type.name
+    }
+    lastSuggestedName.value = creationForm.name
+    customFieldInputs.value = normalizeCustomFieldInputs(selectedTypeStructure.value)
+    structureAssignments.value = initializeStructureAssignments(selectedTypeStructure.value)
+  })
+
+  watch(
+    selectedTypeStructure,
+    (structure) => {
+      const ids = getStructurePieces(structure)
+        .map((piece: any) => piece?.typePieceId)
+        .filter((id: any): id is string => typeof id === 'string' && id.trim().length > 0)
+      if (!ids.length) {
+        return
+      }
+      fetchModelTypeNames(Array.from(new Set(ids)), pieceTypeLabelMap.value, get)
+        .then((additions) => {
+          if (Object.keys(additions).length) {
+            fetchedPieceTypeMap.value = { ...fetchedPieceTypeMap.value, ...additions }
+          }
+        })
+        .catch(() => {})
+    },
+    { immediate: true },
+  )
+
+  // -------------------------------------------------------------------------
+  // Submission
+  // -------------------------------------------------------------------------
+
+  const submitCreation = async () => {
+    if (!selectedType.value) {
+      toast.showError('Sélectionnez une catégorie de composant.')
+      return
+    }
+    const payload: Record<string, any> = {
+      name: creationForm.name.trim(),
+      typeComposantId: selectedType.value.id,
+    }
+
+    const description = creationForm.description.trim()
+    if (description) {
+      payload.description = description
+    }
+
+    const reference = creationForm.reference.trim()
+    if (reference) {
+      payload.reference = reference
+    }
+
+    if (creationForm.constructeurIds.length) {
+      payload.constructeurIds = uniqueConstructeurIds(creationForm.constructeurIds)
+    }
+
+    const rawPrice = typeof creationForm.prix === 'string'
+      ? creationForm.prix.trim()
+      : creationForm.prix === null || creationForm.prix === undefined
+        ? ''
+        : String(creationForm.prix).trim()
+
+    if (rawPrice) {
+      const parsed = Number(rawPrice)
+      if (!Number.isNaN(parsed)) {
+        payload.prix = String(parsed)
+      }
+    }
+
+    const rootProductSelection
+      = structureAssignments.value?.products?.find(
+        (product) => typeof product.selectedProductId === 'string' && product.selectedProductId.trim().length > 0,
+      ) ?? null
+
+    if (rootProductSelection?.selectedProductId) {
+      payload.productId = rootProductSelection.selectedProductId.trim()
+    }
+
+    if (structureHasRequirements.value && !structureSelectionsComplete.value) {
+      toast.showError('Complétez la sélection des pièces, produits et sous-composants.')
+      return
+    }
+
+    const serializedStructure = structureHasRequirements.value
+      ? serializeStructureAssignments(structureAssignments.value)
+      : null
+
+    if (serializedStructure) {
+      payload.structure = serializedStructure
+    }
+
+    submitting.value = true
+    try {
+      const result = await createComposant(payload)
+      if (result.success) {
+        const createdComponent = result.data as Record<string, any>
+        await _saveCustomFieldValues(
+          'composant',
+          createdComponent.id,
+          [createdComponent?.typeComposant?.customFields],
+          { customFieldInputs, upsertCustomFieldValue, updateCustomFieldValue, toast },
+        )
+        if (selectedDocuments.value.length && result.data?.id) {
+          uploadingDocuments.value = true
+          const uploadResult = await uploadDocuments(
+            {
+              files: selectedDocuments.value,
+              context: { composantId: result.data.id },
+            },
+            { updateStore: false },
+          )
+          if (!uploadResult.success) {
+            const message = uploadResult.error
+              ? `Documents non ajoutés : ${uploadResult.error}`
+              : 'Documents non ajoutés : une erreur est survenue.'
+            toast.showError(message)
+          }
+          selectedDocuments.value = []
+        }
+        toast.showSuccess('Composant créé avec succès')
+        await router.push('/component-catalog')
+      }
+      else if (result.error) {
+        toast.showError(result.error)
+      }
+    }
+    catch (error: any) {
+      toast.showError(humanizeError(error?.message) || 'Impossible de créer le composant')
+    }
+    finally {
+      submitting.value = false
+      uploadingDocuments.value = false
+    }
+  }
+
+  // -------------------------------------------------------------------------
+  // Initialization
+  // -------------------------------------------------------------------------
+
+  onMounted(async () => {
+    await Promise.allSettled([
+      loadComponentTypes(),
+      loadPieceTypes(),
+      loadProductTypes(),
+    ])
+  })
+
+  // -------------------------------------------------------------------------
+  // Public API
+  // -------------------------------------------------------------------------
+
+  return {
+    // State
+    selectedTypeId,
+    submitting,
+    creationForm,
+    customFieldInputs,
+    structureAssignments,
+    selectedDocuments,
+    uploadingDocuments,
+
+    // Computed
+    loadingTypes,
+    componentTypeList,
+    selectedType,
+    selectedTypeStructure,
+    availablePieces,
+    availableProducts,
+    availableComponents,
+    piecesLoading,
+    productsLoading,
+    componentsLoading,
+    structureDataLoading,
+    pieceTypeLabelMap,
+    productTypeLabelMap,
+    componentTypeLabelMap,
+    structureHasRequirements,
+    structureSelectionsComplete,
+    canEdit,
+    canSubmit,
+
+    // Functions
+    typeOptionLabel,
+    typeOptionDescription,
+    formatStructurePreview,
+    resolvePieceLabel,
+    resolveProductLabel,
+    resolveSubcomponentLabel,
+    submitCreation,
+  }
+}

app/composables/useComponentEdit.ts

@@ -0,0 +1,560 @@
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { useRouter } from '#imports'
+import { useComponentTypes } from '~/composables/useComponentTypes'
+import { useComposants } from '~/composables/useComposants'
+import { usePieceTypes } from '~/composables/usePieceTypes'
+import { useProductTypes } from '~/composables/useProductTypes'
+import { usePieces } from '~/composables/usePieces'
+import { useProducts } from '~/composables/useProducts'
+import { useCustomFields } from '~/composables/useCustomFields'
+import type { SelectionEntry } from '~/shared/utils/structureSelectionUtils'
+import { useApi } from '~/composables/useApi'
+import { useToast } from '~/composables/useToast'
+import { extractRelationId } from '~/shared/apiRelations'
+import { useDocuments } from '~/composables/useDocuments'
+import { useConstructeurs } from '~/composables/useConstructeurs'
+import { useComponentHistory } from '~/composables/useComponentHistory'
+import { formatStructurePreview, normalizeStructureForEditor } from '~/shared/modelUtils'
+import { uniqueConstructeurIds } from '~/shared/constructeurUtils'
+import {
+  getStructurePieces,
+  getStructureProducts,
+  resolvePieceLabel as _resolvePieceLabel,
+  resolveProductLabel as _resolveProductLabel,
+  resolveSubcomponentLabel,
+  fetchModelTypeNames,
+  buildTypeLabelMap,
+} from '~/shared/utils/structureDisplayUtils'
+import type { ComponentModelStructure } from '~/shared/types/inventory'
+import type { ModelType } from '~/services/modelTypes'
+import { canPreviewDocument } from '~/utils/documentPreview'
+import {
+  type CustomFieldInput,
+  buildCustomFieldInputs,
+  requiredCustomFieldsFilled as _requiredCustomFieldsFilled,
+  saveCustomFieldValues as _saveCustomFieldValues,
+} from '~/shared/utils/customFieldFormUtils'
+import { collectStructureSelections } from '~/shared/utils/structureSelectionUtils'
+
+interface ComponentCatalogType extends ModelType {
+  structure: ComponentModelStructure | null
+  customFields?: Array<Record<string, any>>
+}
+
+const historyFieldLabels: Record<string, string> = {
+  name: 'Nom',
+  reference: 'Référence',
+  prix: 'Prix',
+  structure: 'Structure',
+  typeComposant: 'Catégorie',
+  product: 'Produit lié',
+  constructeurIds: 'Fournisseurs',
+}
+
+export function useComponentEdit(componentId: string) {
+  const { canEdit } = usePermissions()
+  const router = useRouter()
+  const { get, patch } = useApi()
+  const { componentTypes, loadComponentTypes } = useComponentTypes()
+  const { pieceTypes, loadPieceTypes } = usePieceTypes()
+  const { productTypes, loadProductTypes } = useProductTypes()
+  const { updateComposant, loadComposants, composants: componentCatalogRef } = useComposants()
+  const { pieces, loadPieces } = usePieces()
+  const { products, loadProducts } = useProducts()
+  const { ensureConstructeurs } = useConstructeurs()
+  const { upsertCustomFieldValue, updateCustomFieldValue } = useCustomFields()
+  const toast = useToast()
+  const { loadDocumentsByComponent, uploadDocuments, deleteDocument } = useDocuments()
+  const {
+    history,
+    loading: historyLoading,
+    error: historyError,
+    loadHistory,
+  } = useComponentHistory()
+
+  const component = ref<any | null>(null)
+  const loading = ref(true)
+  const saving = ref(false)
+  const selectedFiles = ref<File[]>([])
+  const uploadingDocuments = ref(false)
+  const loadingDocuments = ref(false)
+  const componentDocuments = ref<any[]>([])
+  const previewDocument = ref<any | null>(null)
+  const previewVisible = ref(false)
+
+  const selectedTypeId = ref<string>('')
+  const editionForm = reactive({
+    name: '' as string,
+    description: '' as string,
+    reference: '' as string,
+    constructeurIds: [] as string[],
+    prix: '' as string,
+  })
+
+  const customFieldInputs = ref<CustomFieldInput[]>([])
+  const fetchedPieceTypeMap = ref<Record<string, string>>({})
+  const pieceTypeLabelMap = computed(() =>
+    buildTypeLabelMap(pieceTypes.value, fetchedPieceTypeMap.value),
+  )
+  const fetchedProductTypeMap = ref<Record<string, string>>({})
+  const productTypeLabelMap = computed(() =>
+    buildTypeLabelMap(productTypes.value, fetchedProductTypeMap.value),
+  )
+  const pieceCatalogMap = computed(() =>
+    new Map(
+      (pieces.value || [])
+        .filter((item: any) => item?.id)
+        .map((item: any) => [String(item.id), item]),
+    ),
+  )
+  const productCatalogMap = computed(() =>
+    new Map(
+      (products.value || [])
+        .filter((item: any) => item?.id)
+        .map((item: any) => [String(item.id), item]),
+    ),
+  )
+  const componentCatalogMap = computed(() =>
+    new Map(
+      (componentCatalogRef.value || [])
+        .filter((item: any) => item?.id)
+        .map((item: any) => [String(item.id), item]),
+    ),
+  )
+
+  const openPreview = (doc: any) => {
+    if (!doc || !canPreviewDocument(doc)) {
+      return
+    }
+    previewDocument.value = doc
+    previewVisible.value = true
+  }
+
+  const closePreview = () => {
+    previewVisible.value = false
+    previewDocument.value = null
+  }
+
+  const removeDocument = async (documentId: string | number | null | undefined) => {
+    if (!documentId) {
+      return
+    }
+    const result = await deleteDocument(documentId, { updateStore: false })
+    if (result.success) {
+      componentDocuments.value = componentDocuments.value.filter((doc) => doc.id !== documentId)
+    }
+  }
+
+  const refreshDocuments = async () => {
+    if (!component.value?.id) {
+      componentDocuments.value = []
+      return
+    }
+    loadingDocuments.value = true
+    try {
+      const result = await loadDocumentsByComponent(component.value.id, { updateStore: false })
+      if (result.success) {
+        componentDocuments.value = Array.isArray(result.data) ? result.data : result.data ? [result.data] : []
+      }
+    }
+    finally {
+      loadingDocuments.value = false
+    }
+  }
+
+  const handleFilesAdded = async (files: File[]) => {
+    if (!files?.length || !component.value?.id) {
+      return
+    }
+    uploadingDocuments.value = true
+    try {
+      const result = await uploadDocuments(
+        {
+          files,
+          context: { composantId: component.value.id },
+        },
+        { updateStore: false },
+      )
+      if (result.success) {
+        selectedFiles.value = []
+        await refreshDocuments()
+      }
+    }
+    finally {
+      uploadingDocuments.value = false
+    }
+  }
+
+  const componentTypeList = computed<ComponentCatalogType[]>(() =>
+    (componentTypes.value || [])
+      .filter((item: any) => item?.category === 'COMPONENT') as ComponentCatalogType[],
+  )
+
+  const selectedType = computed(() => {
+    if (!selectedTypeId.value) {
+      return null
+    }
+    return componentTypeList.value.find((type) => type.id === selectedTypeId.value) ?? null
+  })
+
+  const selectedTypeStructure = computed<ComponentModelStructure | null>(() => {
+    const structure = selectedType.value?.structure ?? null
+    return structure ? normalizeStructureForEditor(structure) : null
+  })
+
+  const refreshCustomFieldInputs = (
+    structureOverride?: ComponentModelStructure | null,
+    valuesOverride?: any[] | null,
+  ) => {
+    const structure = structureOverride ?? selectedTypeStructure.value ?? null
+    const values = valuesOverride ?? component.value?.customFieldValues ?? null
+    customFieldInputs.value = buildCustomFieldInputs(structure, values)
+  }
+
+  const requiredCustomFieldsFilled = computed(() =>
+    _requiredCustomFieldsFilled(customFieldInputs.value),
+  )
+
+  const canSubmit = computed(() => Boolean(
+    canEdit.value
+    && component.value
+    && editionForm.name
+    && requiredCustomFieldsFilled.value
+    && !saving.value,
+  ))
+
+  const fetchComponent = async () => {
+    if (!componentId || typeof componentId !== 'string') {
+      component.value = null
+      componentDocuments.value = []
+      return
+    }
+    const result = await get(`/composants/${componentId}`)
+    if (result.success) {
+      component.value = result.data
+      componentDocuments.value = Array.isArray(result.data?.documents) ? result.data.documents : []
+
+      const customValues = Array.isArray(result.data?.customFieldValues) ? result.data.customFieldValues : []
+      refreshCustomFieldInputs(undefined, customValues)
+
+      loadHistory(result.data.id).catch(() => {})
+    }
+    else {
+      component.value = null
+      componentDocuments.value = []
+    }
+  }
+
+  const resolvePieceLabel = (piece: Record<string, any>) =>
+    _resolvePieceLabel(piece, pieceTypeLabelMap.value)
+
+  const resolveProductLabel = (product: Record<string, any>) =>
+    _resolveProductLabel(product, productTypeLabelMap.value)
+
+  const structureSelections = computed(() => {
+    const selections = collectStructureSelections(
+      component.value?.structure,
+      {
+        pieceCatalogMap: pieceCatalogMap.value,
+        productCatalogMap: productCatalogMap.value,
+        componentCatalogMap: componentCatalogMap.value,
+      },
+      { resolvePieceLabel, resolveProductLabel, resolveSubcomponentLabel },
+    )
+    const total
+      = selections.pieces.length + selections.products.length + selections.components.length
+    return {
+      ...selections,
+      total,
+      hasAny: total > 0,
+    }
+  })
+
+  // --- Slot selection entries (for selectors) ---
+
+  const pieceSlotEntries = computed(() => {
+    const structure = component.value?.structure
+    if (!structure?.pieces) return []
+    return (structure.pieces as any[]).map((slot: any, i: number) => ({
+      slotId: slot.slotId,
+      typePieceId: slot.typePieceId,
+      selectedPieceId: slot.selectedPieceId ?? null,
+      quantity: slot.quantity ?? 1,
+      position: slot.position ?? i,
+      label: pieceTypeLabelMap.value[slot.typePieceId] || `Pièce #${i + 1}`,
+    }))
+  })
+
+  const productSlotEntries = computed(() => {
+    const structure = component.value?.structure
+    if (!structure?.products) return []
+    return (structure.products as any[]).map((slot: any, i: number) => ({
+      slotId: slot.slotId,
+      typeProductId: slot.typeProductId,
+      selectedProductId: slot.selectedProductId ?? null,
+      familyCode: slot.familyCode,
+      position: slot.position ?? i,
+      label: productTypeLabelMap.value[slot.typeProductId] || `Produit #${i + 1}`,
+    }))
+  })
+
+  const subcomponentSlotEntries = computed(() => {
+    const structure = component.value?.structure
+    if (!structure?.subcomponents) return []
+    return (structure.subcomponents as any[]).map((slot: any, i: number) => ({
+      slotId: slot.slotId,
+      typeComposantId: slot.typeComposantId,
+      selectedComponentId: slot.selectedComponentId ?? null,
+      alias: slot.alias,
+      familyCode: slot.familyCode,
+      position: slot.position ?? i,
+      label: slot.alias || `Sous-composant #${i + 1}`,
+    }))
+  })
+
+  const savePieceSlotSelection = async (slotId: string, selectedPieceId: string | null) => {
+    const result = await patch(`/composant-piece-slots/${slotId}`, { selectedPieceId })
+    if (result.success) {
+      const structure = component.value?.structure
+      if (structure?.pieces) {
+        const slot = (structure.pieces as any[]).find((s: any) => s.slotId === slotId)
+        if (slot) slot.selectedPieceId = selectedPieceId
+      }
+      toast.showSuccess('Pièce mise à jour')
+    }
+  }
+
+  const saveProductSlotSelection = async (slotId: string, selectedProductId: string | null) => {
+    const result = await patch(`/composant-product-slots/${slotId}`, { selectedProductId })
+    if (result.success) {
+      const structure = component.value?.structure
+      if (structure?.products) {
+        const slot = (structure.products as any[]).find((s: any) => s.slotId === slotId)
+        if (slot) slot.selectedProductId = selectedProductId
+      }
+      toast.showSuccess('Produit mis à jour')
+    }
+  }
+
+  const saveSubcomponentSlotSelection = async (slotId: string, selectedComposantId: string | null) => {
+    const result = await patch(`/composant-subcomponent-slots/${slotId}`, { selectedComposantId })
+    if (result.success) {
+      const structure = component.value?.structure
+      if (structure?.subcomponents) {
+        const slot = (structure.subcomponents as any[]).find((s: any) => s.slotId === slotId)
+        if (slot) slot.selectedComponentId = selectedComposantId
+      }
+      toast.showSuccess('Sous-composant mis à jour')
+    }
+  }
+
+  const saveSlotQuantity = async (entry: SelectionEntry) => {
+    const slotId = entry.slotId
+    const quantity = typeof entry._definition?.quantity === 'number'
+      ? Math.max(1, entry._definition.quantity)
+      : null
+    if (!slotId || quantity === null) return
+    try {
+      await patch(`/composant-piece-slots/${slotId}`, { quantity })
+      toast.showSuccess('Quantité mise à jour')
+    }
+    catch (error: any) {
+      toast.showError(error?.message || 'Erreur lors de la mise à jour de la quantité')
+    }
+  }
+
+  const submitEdition = async () => {
+    if (!component.value) {
+      return
+    }
+
+    const rawPrice = typeof editionForm.prix === 'string'
+      ? editionForm.prix.trim()
+      : editionForm.prix === null || editionForm.prix === undefined
+        ? ''
+        : String(editionForm.prix).trim()
+
+    const payload: Record<string, any> = {
+      name: editionForm.name.trim(),
+      description: editionForm.description.trim() || null,
+    }
+
+    const reference = editionForm.reference.trim()
+    payload.reference = reference || null
+    payload.constructeurIds = uniqueConstructeurIds(editionForm.constructeurIds)
+
+    if (rawPrice) {
+      const parsed = Number(rawPrice)
+      if (!Number.isNaN(parsed)) {
+        payload.prix = String(parsed)
+      }
+    }
+    else {
+      payload.prix = null
+    }
+
+    saving.value = true
+    try {
+      const result = await updateComposant(component.value.id, payload)
+      if (result.success && result.data) {
+        const updatedComponent = result.data as Record<string, any>
+        await _saveCustomFieldValues(
+          'composant',
+          updatedComponent.id,
+          [
+            updatedComponent?.typeComposant?.customFields,
+          ],
+          { customFieldInputs, upsertCustomFieldValue, updateCustomFieldValue, toast },
+        )
+        await router.push('/component-catalog')
+      }
+    }
+    catch (error: any) {
+      toast.showError(error?.message || 'Erreur lors de la mise à jour du composant')
+    }
+    finally {
+      saving.value = false
+    }
+  }
+
+  // --- Watchers ---
+
+  const initialized = ref(false)
+
+  watch(
+    [component, selectedTypeStructure],
+    ([currentComponent, currentStructure]) => {
+      if (!currentComponent) {
+        return
+      }
+
+      if (!initialized.value) {
+        const resolvedTypeId = currentComponent.typeComposantId
+          || extractRelationId(currentComponent.typeComposant)
+          || ''
+        if (resolvedTypeId && !currentComponent.typeComposantId) {
+          currentComponent.typeComposantId = resolvedTypeId
+        }
+        selectedTypeId.value = resolvedTypeId
+
+        editionForm.name = currentComponent.name || ''
+        editionForm.description = currentComponent.description || ''
+        editionForm.reference = currentComponent.reference || ''
+        editionForm.constructeurIds = uniqueConstructeurIds(
+          currentComponent,
+          Array.isArray(currentComponent.constructeurs) ? currentComponent.constructeurs : [],
+          currentComponent.constructeur ? [currentComponent.constructeur] : [],
+        )
+        editionForm.prix = currentComponent.prix !== null && currentComponent.prix !== undefined ? String(currentComponent.prix) : ''
+        if (editionForm.constructeurIds.length) {
+          void ensureConstructeurs(editionForm.constructeurIds)
+        }
+
+        initialized.value = true
+      }
+
+      refreshCustomFieldInputs(selectedTypeStructure.value ?? currentStructure, currentComponent.customFieldValues)
+    },
+    { immediate: true },
+  )
+
+  watch(
+    selectedTypeStructure,
+    (structure) => {
+      const pieceIds = getStructurePieces(structure)
+        .map((piece: any) => piece?.typePieceId)
+        .filter((id: any): id is string => typeof id === 'string' && id.trim().length > 0)
+      if (pieceIds.length) {
+        fetchModelTypeNames(Array.from(new Set(pieceIds)), pieceTypeLabelMap.value, get)
+          .then((additions) => {
+            if (Object.keys(additions).length) {
+              fetchedPieceTypeMap.value = { ...fetchedPieceTypeMap.value, ...additions }
+            }
+          })
+          .catch(() => {})
+      }
+
+      const productIds = getStructureProducts(structure)
+        .map((product: any) => product?.typeProductId)
+        .filter((id: any): id is string => typeof id === 'string' && id.trim().length > 0)
+      if (productIds.length) {
+        fetchModelTypeNames(Array.from(new Set(productIds)), productTypeLabelMap.value, get)
+          .then((additions) => {
+            if (Object.keys(additions).length) {
+              fetchedProductTypeMap.value = { ...fetchedProductTypeMap.value, ...additions }
+            }
+          })
+          .catch(() => {})
+      }
+    },
+    { immediate: true },
+  )
+
+  // --- Lifecycle ---
+
+  onMounted(async () => {
+    await Promise.allSettled([
+      loadComponentTypes(),
+      loadPieceTypes(),
+      loadProductTypes(),
+      fetchComponent(),
+    ])
+    loading.value = false
+
+    // Load catalogs for slot selectors (force: true to bypass cache from list pages that load fewer items)
+    Promise.allSettled([
+      loadPieces({ itemsPerPage: 200, force: true }),
+      loadProducts({ itemsPerPage: 200, force: true }),
+      loadComposants({ itemsPerPage: 200, force: true }),
+    ]).catch(() => {})
+  })
+
+  return {
+    // State
+    component,
+    loading,
+    saving,
+    selectedFiles,
+    uploadingDocuments,
+    loadingDocuments,
+    componentDocuments,
+    previewDocument,
+    previewVisible,
+    selectedTypeId,
+    editionForm,
+    customFieldInputs,
+    historyFieldLabels,
+
+    // Computed
+    canEdit,
+    canSubmit,
+    componentTypeList,
+    selectedType,
+    selectedTypeStructure,
+    structureSelections,
+    pieceSlotEntries,
+    productSlotEntries,
+    subcomponentSlotEntries,
+
+    // History
+    history,
+    historyLoading,
+    historyError,
+
+    // Methods
+    openPreview,
+    closePreview,
+    removeDocument,
+    handleFilesAdded,
+    refreshDocuments,
+    submitEdition,
+    saveSlotQuantity,
+    savePieceSlotSelection,
+    saveProductSlotSelection,
+    saveSubcomponentSlotSelection,
+    resolvePieceLabel,
+    resolveProductLabel,
+    resolveSubcomponentLabel,
+    formatStructurePreview,
+  }
+}

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')
+}

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
-  }
-}

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
-  }
-}

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,
+  }
+}

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
-  }
-}

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,
+  }
+}

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,
+  }
+}

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 uniqueConstructeurs = (items: Constructeur[] = []): Constructeur[] => {
-  const map = new Map()
+  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) => {
+const pendingFetches = new Map<string, Promise<Constructeur | null>>()
-  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()
+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])
+        upsertConstructeurs([result.data as Constructeur])
-        showSuccess(`Fournisseur "${result.data.name}" créé`)
+        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 collected: Constructeur[] = []
-    const missing = []
+    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])
+        upsertConstructeurs([result.data as Constructeur])
-        showSuccess(`Fournisseur "${result.data.name}" mis à jour`)
+        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,

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,
+    customFieldId: string | null,
-    entityType,
+    entityType: string,
-    entityId,
+    entityId: string,
-    value,
+    value: unknown,
-    metadata = {},
+    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,
   }
 }

app/composables/useDarkMode.ts

@@ -0,0 +1,26 @@
+const isDark = ref(false)
+
+export function useDarkMode() {
+  const toggle = () => {
+    isDark.value = !isDark.value
+    applyTheme()
+  }
+
+  const applyTheme = () => {
+    const theme = isDark.value ? 'mytheme-dark' : 'mytheme'
+    document.documentElement.setAttribute('data-theme', theme)
+    localStorage.setItem('theme', theme)
+  }
+
+  const init = () => {
+    const saved = localStorage.getItem('theme')
+    if (saved === 'mytheme-dark') {
+      isDark.value = true
+    } else if (!saved && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      isDark.value = true
+    }
+    applyTheme()
+  }
+
+  return { isDark, toggle, init }
+}

app/composables/useDataTable.ts

@@ -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,
+  }
+}

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
-  }
-}

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,
+  }
+}

app/composables/useDragReorder.ts

@@ -0,0 +1,109 @@
+import { ref } from 'vue'
+
+interface DragReorderHandlers {
+  draggingIndex: Ref<number | null>
+  dropTargetIndex: Ref<number | null>
+  onDragStart: (index: number, event: DragEvent) => void
+  onDragEnter: (index: number) => void
+  onDragOver: (event: DragEvent) => void
+  onDrop: (index: number) => void
+  onDragEnd: () => void
+  reorderClass: (index: number) => string
+  reset: () => void
+}
+
+interface DragReorderOptions {
+  draggingClass?: string
+  dropTargetClass?: string
+  onReorder?: () => void
+}
+
+function moveItemInPlace<T>(list: T[], from: number, to: number): void {
+  if (from === to) return
+  if (from < 0 || to < 0 || from >= list.length || to >= list.length) return
+  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)
+}
+
+export function useDragReorder(
+  getList: () => unknown[] | undefined,
+  options: DragReorderOptions = {},
+): DragReorderHandlers {
+  const {
+    draggingClass = 'border-dashed border-primary',
+    dropTargetClass = 'border-primary border-dashed bg-primary/5',
+    onReorder,
+  } = options
+
+  const draggingIndex = ref<number | null>(null)
+  const dropTargetIndex = ref<number | null>(null)
+
+  const reset = () => {
+    draggingIndex.value = null
+    dropTargetIndex.value = null
+  }
+
+  const onDragStart = (index: number, event: DragEvent) => {
+    draggingIndex.value = index
+    dropTargetIndex.value = index
+    if (event.dataTransfer) {
+      event.dataTransfer.effectAllowed = 'move'
+    }
+  }
+
+  const onDragEnter = (index: number) => {
+    if (draggingIndex.value === null) return
+    dropTargetIndex.value = index
+  }
+
+  const onDragOver = (event: DragEvent) => {
+    event.preventDefault()
+  }
+
+  const onDrop = (index: number) => {
+    const list = getList()
+    if (!Array.isArray(list)) {
+      reset()
+      return
+    }
+    const from = draggingIndex.value
+    if (from === null) {
+      reset()
+      return
+    }
+    moveItemInPlace(list, from, index)
+    onReorder?.()
+    reset()
+  }
+
+  const onDragEnd = () => {
+    reset()
+  }
+
+  const reorderClass = (index: number): string => {
+    if (draggingIndex.value === index) return draggingClass
+    if (
+      draggingIndex.value !== null
+      && dropTargetIndex.value === index
+      && draggingIndex.value !== index
+    ) {
+      return dropTargetClass
+    }
+    return ''
+  }
+
+  return {
+    draggingIndex,
+    dropTargetIndex,
+    onDragStart,
+    onDragEnter,
+    onDragOver,
+    onDrop,
+    onDragEnd,
+    reorderClass,
+    reset,
+  }
+}

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,
+  }
+}

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 || e._structurePiece) 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,
+  }
+}

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 }
+}

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,
+  }
+}

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,
+  }
+}

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,
+  }
+}

app/composables/useMachineCustomFieldDefs.ts

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

app/composables/useMachineDetailCustomFields.ts

@@ -0,0 +1,396 @@
+/**
+ * Machine detail — custom field management sub-composable.
+ *
+ * Handles custom field resolution, display filtering, sync and updates
+ * for machines, components and pieces.
+ */
+
+import { ref, computed } from 'vue'
+import { useCustomFields } from '~/composables/useCustomFields'
+import { useToast } from '~/composables/useToast'
+import { normalizeStructureForEditor } from '~/shared/modelUtils'
+import {
+  shouldDisplayCustomField,
+  normalizeExistingCustomFieldDefinitions,
+  normalizeCustomFieldValueEntry,
+  mergeCustomFieldValuesWithDefinitions,
+  dedupeCustomFieldEntries,
+} from '~/shared/utils/customFieldUtils'
+import {
+  resolveConstructeurs,
+  uniqueConstructeurIds,
+} from '~/shared/constructeurUtils'
+
+type AnyRecord = Record<string, unknown>
+
+interface MachineDetailCustomFieldsDeps {
+  machine: Ref<AnyRecord | null>
+  isEditMode: Ref<boolean>
+  constructeurs: Ref<unknown[]>
+  resolveProductReference: (source: AnyRecord) => { product: unknown; productId: string | null }
+  getProductDisplay: (source: AnyRecord) => unknown
+}
+
+export function useMachineDetailCustomFields(deps: MachineDetailCustomFieldsDeps) {
+  const { machine, isEditMode, constructeurs, resolveProductReference, getProductDisplay } = deps
+  const {
+    upsertCustomFieldValue,
+    updateCustomFieldValue: updateCustomFieldValueApi,
+  } = useCustomFields()
+  const toast = useToast()
+
+  // ---------------------------------------------------------------------------
+  // State
+  // ---------------------------------------------------------------------------
+
+  const machineCustomFields = ref<AnyRecord[]>([])
+
+  // ---------------------------------------------------------------------------
+  // Computed
+  // ---------------------------------------------------------------------------
+
+  const visibleMachineCustomFields = computed(() => {
+    const fields = Array.isArray(machineCustomFields.value) ? machineCustomFields.value : []
+    if (isEditMode.value) return fields
+    return fields.filter((field) => shouldDisplayCustomField(field))
+  })
+
+  // ---------------------------------------------------------------------------
+  // Transform helpers
+  // ---------------------------------------------------------------------------
+
+  const getStructureCustomFields = (structure: unknown): AnyRecord[] => {
+    if (!structure || typeof structure !== 'object') return []
+    const normalized = normalizeStructureForEditor(structure as any) as any
+    return Array.isArray(normalized?.customFields)
+      ? (normalized.customFields as AnyRecord[])
+      : []
+  }
+
+  const transformCustomFields = (piecesData: AnyRecord[]): AnyRecord[] => {
+    return (piecesData || []).map((piece) => {
+      const typePiece = (piece.typePiece as AnyRecord) || {}
+
+      const normalizeStructureDefs = (structure: unknown) =>
+        structure ? normalizeStructureForEditor(structure as AnyRecord) : null
+
+      const normalizedStructureDefs = [
+        normalizeStructureDefs((piece.definition as AnyRecord)?.structure),
+        normalizeStructureDefs(typePiece.structure),
+      ]
+
+      const valueEntries = [
+        ...(Array.isArray(piece.customFieldValues) ? piece.customFieldValues : []),
+        ...(Array.isArray(piece.customFields)
+          ? (piece.customFields as AnyRecord[])
+              .map(normalizeCustomFieldValueEntry)
+              .filter((e) => e !== null)
+          : []),
+        ...(Array.isArray(typePiece.customFieldValues)
+          ? (typePiece.customFieldValues as AnyRecord[])
+              .map(normalizeCustomFieldValueEntry)
+              .filter((e) => e !== null)
+          : []),
+      ]
+
+      const customFields = dedupeCustomFieldEntries(
+        mergeCustomFieldValuesWithDefinitions(
+          valueEntries,
+          normalizeExistingCustomFieldDefinitions(piece.customFields),
+          normalizeExistingCustomFieldDefinitions((piece.definition as AnyRecord)?.customFields),
+          normalizeExistingCustomFieldDefinitions((piece.typePiece as AnyRecord)?.customFields),
+          normalizeExistingCustomFieldDefinitions(typePiece.customFields),
+          ...normalizedStructureDefs.map((def) => getStructureCustomFields(def)),
+        ),
+      )
+
+      const constructeurIds = uniqueConstructeurIds(
+        piece.constructeurs,
+        piece.constructeurIds,
+        piece.constructeurId,
+        piece.constructeur,
+        (piece.originalPiece as AnyRecord)?.constructeurs,
+        (piece.originalPiece as AnyRecord)?.constructeurIds,
+        (piece.originalPiece as AnyRecord)?.constructeurId,
+        (piece.originalPiece as AnyRecord)?.constructeur,
+      )
+
+      const { product: resolvedProduct, productId: resolvedProductId } =
+        resolveProductReference(piece)
+
+      const constructeursList = resolveConstructeurs(
+        constructeurIds,
+        Array.isArray(piece.constructeurs) ? (piece.constructeurs as any[]) : [],
+        piece.constructeur ? [piece.constructeur as any] : [],
+        Array.isArray((piece.originalPiece as AnyRecord)?.constructeurs)
+          ? ((piece.originalPiece as AnyRecord).constructeurs as any[])
+          : [],
+        (piece.originalPiece as AnyRecord)?.constructeur
+          ? [(piece.originalPiece as AnyRecord).constructeur as any]
+          : [],
+        constructeurs.value as any,
+      ) as any[]
+
+      const normalizedPiece = {
+        ...piece,
+        product: resolvedProduct || piece.product || null,
+        productId: resolvedProductId || piece.productId || (piece.product as AnyRecord)?.id || null,
+      }
+      const productDisplay = getProductDisplay(normalizedPiece)
+
+      return {
+        ...normalizedPiece,
+        customFields,
+        documents: piece.documents || [],
+        constructeurs: constructeursList,
+        constructeur: constructeursList[0] || piece.constructeur || null,
+        constructeurIds,
+        constructeurId: constructeurIds[0] || null,
+        typePieceId:
+          piece.typePieceId ||
+          (piece.typePiece as AnyRecord)?.id ||
+          null,
+        __productDisplay: productDisplay,
+      }
+    })
+  }
+
+  const transformComponentCustomFields = (componentsData: AnyRecord[]): AnyRecord[] => {
+    const normalizeStructureDefs = (structure: unknown) =>
+      structure ? normalizeStructureForEditor(structure as AnyRecord) : null
+
+    return (componentsData || []).map((component) => {
+      const type = (component.typeComposant as AnyRecord) || {}
+
+      const normalizedStructureDefs = [
+        normalizeStructureDefs((component.definition as AnyRecord)?.structure),
+        normalizeStructureDefs(type.structure),
+      ]
+
+      const actualComponent = (component.originalComposant as AnyRecord) || component
+
+      const valueEntries = [
+        ...(Array.isArray(component.customFieldValues) ? component.customFieldValues : []),
+        ...(Array.isArray(component.customFields)
+          ? (component.customFields as AnyRecord[])
+              .map(normalizeCustomFieldValueEntry)
+              .filter((e) => e !== null)
+          : []),
+        ...(Array.isArray(actualComponent?.customFields)
+          ? (actualComponent.customFields as AnyRecord[])
+              .map(normalizeCustomFieldValueEntry)
+              .filter((e) => e !== null)
+          : []),
+      ]
+
+      const customFields = dedupeCustomFieldEntries(
+        mergeCustomFieldValuesWithDefinitions(
+          valueEntries,
+          normalizeExistingCustomFieldDefinitions(component.customFields),
+          normalizeExistingCustomFieldDefinitions((component.definition as AnyRecord)?.customFields),
+          normalizeExistingCustomFieldDefinitions((component.typeComposant as AnyRecord)?.customFields),
+          normalizeExistingCustomFieldDefinitions(type.customFields),
+          normalizeExistingCustomFieldDefinitions(actualComponent?.customFields),
+          ...normalizedStructureDefs.map((def) => getStructureCustomFields(def)),
+        ),
+      )
+
+      const piecesTransformed = component.pieces
+        ? transformCustomFields(component.pieces as AnyRecord[]).map((p) => ({
+            ...p,
+            parentComponentName: component.name,
+          }))
+        : []
+
+      const subComponents = component.sousComposants
+        ? transformComponentCustomFields(component.sousComposants as AnyRecord[])
+        : []
+
+      const constructeurIds = uniqueConstructeurIds(
+        component.constructeurs,
+        component.constructeurIds,
+        component.constructeurId,
+        component.constructeur,
+        actualComponent?.constructeurs,
+        actualComponent?.constructeurIds,
+        actualComponent?.constructeurId,
+        actualComponent?.constructeur,
+      )
+
+      const constructeursList = resolveConstructeurs(
+        constructeurIds,
+        Array.isArray(component.constructeurs) ? (component.constructeurs as any[]) : [],
+        component.constructeur ? [component.constructeur as any] : [],
+        Array.isArray(actualComponent?.constructeurs)
+          ? (actualComponent.constructeurs as any[])
+          : [],
+        actualComponent?.constructeur ? [actualComponent.constructeur as any] : [],
+        constructeurs.value as any,
+      ) as any[]
+
+      const { product: resolvedProduct, productId: resolvedProductId } =
+        resolveProductReference(component)
+      const normalizedComponent = {
+        ...component,
+        product: resolvedProduct || component.product || null,
+        productId:
+          resolvedProductId || component.productId || (component.product as AnyRecord)?.id || null,
+      }
+      const productDisplay = getProductDisplay(normalizedComponent)
+
+      return {
+        ...normalizedComponent,
+        customFields,
+        pieces: piecesTransformed,
+        subComponents,
+        documents: component.documents || [],
+        constructeurs: constructeursList,
+        constructeur: constructeursList[0] || component.constructeur || null,
+        constructeurIds,
+        constructeurId: constructeurIds[0] || null,
+        typeComposantId:
+          component.typeComposantId ||
+          (component.typeComposant as AnyRecord)?.id ||
+          null,
+        __productDisplay: productDisplay,
+      }
+    })
+  }
+
+  // ---------------------------------------------------------------------------
+  // Machine custom field methods
+  // ---------------------------------------------------------------------------
+
+  const syncMachineCustomFields = () => {
+    if (!machine.value) {
+      machineCustomFields.value = []
+      return
+    }
+    const valueEntries = [
+      ...(Array.isArray(machine.value.customFieldValues) ? machine.value.customFieldValues : []),
+      ...(Array.isArray(machine.value.customFields)
+        ? (machine.value.customFields as AnyRecord[])
+            .map(normalizeCustomFieldValueEntry)
+            .filter((e) => e !== null)
+        : []),
+    ]
+    const merged = dedupeCustomFieldEntries(
+      mergeCustomFieldValuesWithDefinitions(
+        valueEntries,
+        normalizeExistingCustomFieldDefinitions(machine.value.customFields),
+      ),
+    ).map((field: AnyRecord) => ({ ...field, readOnly: false }))
+    machineCustomFields.value = merged
+  }
+
+  const setMachineCustomFieldValue = (field: AnyRecord, value: unknown) => {
+    if (!field) return
+    field.value = value
+    if (field.customFieldValueId && (machine.value as AnyRecord)?.customFieldValues) {
+      const stored = ((machine.value as AnyRecord).customFieldValues as AnyRecord[]).find(
+        (fv) => fv.id === field.customFieldValueId,
+      )
+      if (stored) stored.value = value
+    }
+  }
+
+  const updateMachineCustomField = async (field: AnyRecord) => {
+    if (!machine.value || !field) return
+
+    const { id: customFieldId, customFieldValueId } = field
+    const fieldLabel = (field.name as string) || 'Champ personnalisé'
+
+    try {
+      if (customFieldValueId) {
+        const result: any = await updateCustomFieldValueApi(customFieldValueId as string, {
+          value: field.value ?? '',
+        } as any)
+        if (result.success) {
+          toast.showSuccess(`Champ "${fieldLabel}" de la machine mis à jour avec succès`)
+          syncMachineCustomFields()
+        } else {
+          toast.showError(`Erreur lors de la mise à jour du champ "${fieldLabel}"`)
+        }
+        return
+      }
+      if (!customFieldId) {
+        toast.showError(
+          'Impossible de mettre à jour ce champ personnalisé (identifiant manquant).',
+        )
+        return
+      }
+      const result: any = await upsertCustomFieldValue(
+        customFieldId as string,
+        'machine',
+        machine.value.id as string,
+        field.value ?? '',
+      )
+      if (result.success) {
+        const createdValue = result.data as AnyRecord
+        toast.showSuccess(`Champ "${fieldLabel}" de la machine mis à jour avec succès`)
+        if (createdValue?.id) {
+          if (!createdValue.customField) {
+            createdValue.customField = {
+              id: customFieldId,
+              name: field.name,
+              type: field.type,
+              required: field.required,
+              options: field.options,
+            }
+          }
+          field.customFieldValueId = createdValue.id
+          field.readOnly = false
+          const existingValues = Array.isArray(machine.value.customFieldValues)
+            ? (machine.value.customFieldValues as AnyRecord[]).filter(
+                (item) => item.id !== createdValue.id,
+              )
+            : []
+          machine.value.customFieldValues = [...existingValues, createdValue]
+        }
+        syncMachineCustomFields()
+      } else {
+        toast.showError(`Erreur lors de la mise à jour du champ "${fieldLabel}"`)
+      }
+    } catch (error) {
+      console.error('Erreur lors de la mise à jour du champ personnalisé de la machine:', error)
+      toast.showError(`Erreur lors de la mise à jour du champ "${fieldLabel}"`)
+    }
+  }
+
+  const updatePieceCustomField = async (fieldUpdate: AnyRecord) => {
+    try {
+      const result: any = await upsertCustomFieldValue(
+        fieldUpdate.fieldId as string,
+        'piece',
+        fieldUpdate.pieceId as string,
+        fieldUpdate.value,
+      )
+      if (result.success) {
+        toast.showSuccess('Champ personnalisé mis à jour avec succès')
+      } else {
+        toast.showError('Erreur lors de la mise à jour du champ personnalisé')
+      }
+    } catch (error) {
+      toast.showError('Erreur lors de la mise à jour du champ personnalisé')
+      console.error('Erreur lors de la mise à jour du champ personnalisé:', error)
+    }
+  }
+
+  return {
+    // State
+    machineCustomFields,
+
+    // Computed
+    visibleMachineCustomFields,
+
+    // Transform functions
+    transformCustomFields,
+    transformComponentCustomFields,
+
+    // Methods
+    syncMachineCustomFields,
+    setMachineCustomFieldValue,
+    updateMachineCustomField,
+    updatePieceCustomField,
+  }
+}

app/composables/useMachineDetailData.ts

@@ -0,0 +1,468 @@
+/**
+ * Machine detail page — core state & business logic (orchestrator).
+ *
+ * Extracted from pages/machine/[id].vue (F1.1).
+ * Composes sub-composables for documents, custom fields, hierarchy and products.
+ */
+
+import { ref, computed, watch } from 'vue'
+import { useMachines } from '~/composables/useMachines'
+import { useComposants } from '~/composables/useComposants'
+import { usePieces } from '~/composables/usePieces'
+import { useComponentTypes } from '~/composables/useComponentTypes'
+import { usePieceTypes } from '~/composables/usePieceTypes'
+import { useCustomFields } from '~/composables/useCustomFields'
+import { useApi } from '~/composables/useApi'
+import { useToast } from '~/composables/useToast'
+import { useConstructeurs } from '~/composables/useConstructeurs'
+import { useSites } from '~/composables/useSites'
+import { useMachinePrint } from '~/composables/useMachinePrint'
+import {
+  resolveConstructeurs,
+  uniqueConstructeurIds,
+  formatConstructeurContact as formatConstructeurContactSummary,
+} from '~/shared/constructeurUtils'
+import { useMachineDetailDocuments } from '~/composables/useMachineDetailDocuments'
+import { useMachineDetailCustomFields } from '~/composables/useMachineDetailCustomFields'
+import { useMachineDetailHierarchy } from '~/composables/useMachineDetailHierarchy'
+import { useMachineDetailProducts } from '~/composables/useMachineDetailProducts'
+import { useMachineDetailUpdates } from '~/composables/useMachineDetailUpdates'
+import { downloadDocument as downloadDocumentHelper } from '~/shared/utils/documentDisplayUtils'
+
+type AnyRecord = Record<string, unknown>
+
+export function useMachineDetailData(machineId: string) {
+  // External composables
+  const {
+    updateMachine: updateMachineApi,
+    updateStructure: updateMachineStructure,
+  } = useMachines()
+  const { updateComposant: updateComposantApi } = useComposants()
+  const { updatePiece: updatePieceApi } = usePieces()
+  const { componentTypes, loadComponentTypes } = useComponentTypes()
+  const { pieceTypes, loadPieceTypes } = usePieceTypes()
+  const { upsertCustomFieldValue } = useCustomFields()
+  const { get, patch: apiPatch } = useApi()
+  const toast = useToast()
+  const { constructeurs, loadConstructeurs } = useConstructeurs()
+  const { sites, loadSites } = useSites()
+
+  const {
+    printModalOpen,
+    printSelection,
+    ensurePrintSelectionEntries: _ensurePrintEntries,
+    setAllPrintSelection: _setAllPrint,
+    openPrintModal: _openPrintModal,
+    closePrintModal,
+    handlePrintConfirm: _handlePrintConfirm,
+  } = useMachinePrint()
+
+  // Core state
+  const loading = ref(true)
+  const machine = ref<AnyRecord | null>(null)
+  const productDocumentsMap = ref<Map<string, AnyRecord[]>>(new Map())
+  const printAreaRef = ref<HTMLElement | null>(null)
+
+  // Machine fields
+  const machineName = ref('')
+  const machineReference = ref('')
+  const machineSiteId = ref('')
+  const machineConstructeurIds = ref<string[]>([])
+
+  const machineConstructeurId = computed({
+    get: () => machineConstructeurIds.value[0] || null,
+    set: (value: string | null) => {
+      machineConstructeurIds.value = value ? [value] : []
+    },
+  })
+
+  const machineConstructeursDisplay = computed(() => {
+    const ids = uniqueConstructeurIds(
+      machineConstructeurIds.value,
+      (machine.value as AnyRecord)?.constructeurIds,
+      (machine.value as AnyRecord)?.constructeurs,
+      (machine.value as AnyRecord)?.constructeur,
+    )
+    return resolveConstructeurs(
+      ids,
+      Array.isArray((machine.value as AnyRecord)?.constructeurs)
+        ? ((machine.value as AnyRecord).constructeurs as any[])
+        : [],
+      (machine.value as AnyRecord)?.constructeur
+        ? [(machine.value as AnyRecord).constructeur as any]
+        : [],
+      constructeurs.value as any,
+    ) as any[]
+  })
+
+  const machineConstructeurContact = computed(() =>
+    machineConstructeursDisplay.value
+      .map((c: any) => formatConstructeurContactSummary(c))
+      .filter(Boolean)
+      .join(' • '),
+  )
+
+  const hasMachineConstructeur = computed(
+    () => machineConstructeursDisplay.value.length > 0,
+  )
+
+  // UI state
+  const isEditMode = ref(false)
+  const debug = ref(false)
+
+  const componentsCollapsed = ref(true)
+  const collapseToggleToken = ref(0)
+
+  const piecesCollapsed = ref(true)
+  const pieceCollapseToggleToken = ref(0)
+
+  // Sub-composables: Products (init first — hierarchy needs findProductById)
+  // Products needs machineProductLinks from hierarchy, but hierarchy needs
+  // findProductById from products. We break the cycle by passing a lazy
+  // computed that reads from the hierarchy ref once it exists.
+  const _machineProductLinksProxy = ref<AnyRecord[]>([])
+
+  const {
+    productInventory,
+    productById,
+    machineDirectProducts,
+    findProductById,
+    resolveProductReference,
+    getProductDisplay,
+    loadProducts,
+  } = useMachineDetailProducts({
+    machineProductLinks: _machineProductLinksProxy,
+    productDocumentsMap,
+    constructeurs,
+  })
+
+  // Sub-composables: Custom fields
+  const {
+    machineCustomFields,
+    visibleMachineCustomFields,
+    transformCustomFields,
+    transformComponentCustomFields,
+    syncMachineCustomFields,
+    setMachineCustomFieldValue,
+    updateMachineCustomField,
+    updatePieceCustomField,
+  } = useMachineDetailCustomFields({
+    machine,
+    isEditMode,
+    constructeurs,
+    resolveProductReference,
+    getProductDisplay,
+  })
+
+  // Sub-composables: Hierarchy (includes structure link CRUD)
+  const hierarchy = useMachineDetailHierarchy({
+    machineId,
+    machine,
+    constructeurs,
+    findProductById,
+    transformComponentCustomFields,
+    transformCustomFields,
+    syncMachineCustomFields,
+  })
+
+  const {
+    components,
+    pieces,
+    machineComponentLinks,
+    machinePieceLinks,
+    machineProductLinks,
+    flattenedComponents,
+    machinePieces,
+    applyMachineLinks,
+    reloadMachineStructure,
+    addComponentLink,
+    removeComponentLink,
+    addPieceLink,
+    removePieceLink,
+    addProductLink,
+    removeProductLink,
+  } = hierarchy
+
+  // Keep the product links proxy in sync with the hierarchy's machineProductLinks
+  watch(machineProductLinks, (val) => { _machineProductLinksProxy.value = val }, { immediate: true })
+
+  // Sub-composables: Documents
+  const {
+    machineDocumentFiles,
+    machineDocumentsUploading,
+    machineDocumentsLoaded,
+    previewDocument,
+    previewVisible,
+    machineDocumentsList,
+    refreshMachineDocuments,
+    handleMachineFilesAdded,
+    removeMachineDocument,
+    openPreview,
+    closePreview,
+    loadProductDocuments: _loadProductDocuments,
+  } = useMachineDetailDocuments({ machine })
+
+  // Type helpers
+  const componentTypeOptions = computed(() => componentTypes.value || [])
+  const pieceTypeOptions = computed(() => pieceTypes.value || [])
+
+  const componentTypeLabelMap = computed(() => {
+    const map = new Map<string, string>()
+    componentTypeOptions.value.forEach((type) => {
+      if (type?.id) map.set(type.id as string, (type.name as string) || '')
+    })
+    return map
+  })
+
+  const pieceTypeLabelMap = computed(() => {
+    const map = new Map<string, string>()
+    pieceTypeOptions.value.forEach((type) => {
+      if (type?.id) map.set(type.id as string, (type.name as string) || '')
+    })
+    return map
+  })
+
+  // Machine field methods
+  const initMachineFields = () => {
+    if (machine.value) {
+      machineName.value = (machine.value.name as string) || ''
+      machineReference.value = (machine.value.reference as string) || ''
+      machineConstructeurIds.value = uniqueConstructeurIds(
+        machine.value.constructeurIds,
+        machine.value.constructeurs,
+        machine.value.constructeur,
+      )
+      machineSiteId.value = (machine.value.siteId as string) || (machine.value.site as AnyRecord)?.id as string || ''
+    }
+  }
+
+  const getMachineFieldId = (fieldName: string): string => {
+    return machine.value ? `machine-${fieldName}-${machine.value.id}` : `machine-${fieldName}`
+  }
+
+  // Product documents wrapper
+  const loadProductDocuments = async () => {
+    const map = await _loadProductDocuments(machineProductLinks.value)
+    productDocumentsMap.value = map
+  }
+
+  // Update methods (delegated to useMachineDetailUpdates)
+  const {
+    updateMachineInfo,
+    updateComponent,
+    updatePieceFromComponent,
+    updatePieceInfo,
+    handleMachineConstructeurChange,
+    editComponent,
+    editPiece,
+  } = useMachineDetailUpdates({
+    machine,
+    machineName,
+    machineReference,
+    machineSiteId,
+    machineConstructeurIds,
+    machineDocumentsLoaded,
+    machineComponentLinks,
+    machinePieceLinks,
+    machineProductLinks,
+    applyMachineLinks,
+    refreshMachineDocuments,
+    transformComponentCustomFields,
+    transformCustomFields,
+    loadProductDocuments,
+    upsertCustomFieldValue,
+    updateMachineApi,
+    updateComposantApi: updateComposantApi,
+    updatePieceApi,
+    apiPatch,
+    toast,
+  })
+
+  // UI methods
+  const toggleEditMode = () => {
+    isEditMode.value = !isEditMode.value
+    debug.value = !debug.value
+    if (isEditMode.value && !machineDocumentsLoaded.value) {
+      refreshMachineDocuments()
+    }
+  }
+
+  const toggleAllComponents = () => {
+    componentsCollapsed.value = !componentsCollapsed.value
+    collapseToggleToken.value += 1
+  }
+
+  const collapseAllComponents = () => {
+    componentsCollapsed.value = true
+    collapseToggleToken.value += 1
+  }
+
+  const toggleAllPieces = () => {
+    piecesCollapsed.value = !piecesCollapsed.value
+    pieceCollapseToggleToken.value += 1
+  }
+
+  // Print wrappers
+  const ensurePrintSelectionEntries = () =>
+    _ensurePrintEntries(components.value, machinePieces.value)
+  const setAllPrintSelection = (value: boolean) =>
+    _setAllPrint(value, components.value, machinePieces.value)
+  const openPrintModal = () =>
+    _openPrintModal(components.value, machinePieces.value)
+  const handlePrintConfirm = () =>
+    _handlePrintConfirm(
+      machine.value as any,
+      machineName.value,
+      machineReference.value,
+      machinePieces.value as any,
+      components.value as any,
+    )
+
+  // Data loading
+  const loadMachineData = async () => {
+    loading.value = true
+    try {
+      const machineResult: any = await get(`/machines/${machineId}/structure`)
+
+      if (!machineResult.success) {
+        console.error('Machine non trouvée:', machineId, machineResult.error)
+        machine.value = null
+        components.value = []
+        pieces.value = []
+        return
+      }
+
+      const machinePayload =
+        machineResult.data?.machine && typeof machineResult.data.machine === 'object'
+          ? machineResult.data.machine
+          : machineResult.data
+
+      if (!machinePayload || typeof machinePayload !== 'object') {
+        console.error('Réponse machine invalide pour', machineId)
+        machine.value = null
+        components.value = []
+        pieces.value = []
+        return
+      }
+
+      machine.value = {
+        ...machinePayload,
+        documents: machinePayload.documents || [],
+        customFieldValues: machinePayload.customFieldValues || [],
+      }
+
+      machineDocumentsLoaded.value = !!((machine.value!.documents as AnyRecord[])?.length)
+      syncMachineCustomFields()
+      initMachineFields()
+
+      // Start document loading early (independent of products/links)
+      const documentPromise = !machineDocumentsLoaded.value
+        ? refreshMachineDocuments()
+        : Promise.resolve()
+
+      // Load products in parallel — don't block hierarchy rendering
+      const productsPromise = !(productInventory.value as AnyRecord[]).length
+        ? loadProducts().catch((error: unknown) => {
+            console.error('Erreur lors du chargement des produits:', error)
+          })
+        : Promise.resolve()
+
+      await productsPromise
+      const linksApplied = applyMachineLinks(machineResult.data)
+
+      if (machine.value) {
+        machine.value.componentLinks = machineComponentLinks.value
+        machine.value.pieceLinks = machinePieceLinks.value
+        machine.value.productLinks = machineProductLinks.value
+      }
+
+      if (!linksApplied) {
+        components.value = transformComponentCustomFields(machinePayload.components || [])
+        pieces.value = transformCustomFields(machinePayload.pieces || [])
+        machineProductLinks.value = Array.isArray(machinePayload.productLinks)
+          ? machinePayload.productLinks
+          : []
+      }
+
+      if (machine.value) {
+        machine.value.productLinks = machineProductLinks.value
+      }
+
+      collapseAllComponents()
+
+      // Load product documents in background
+      loadProductDocuments().catch(() => {})
+
+      // Wait for documents if still loading
+      await documentPromise
+    } catch (error) {
+      console.error('Erreur lors du chargement des données:', error)
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const loadInitialData = (): Promise<unknown[]> => {
+    return Promise.all([
+      loadConstructeurs(),
+      loadComponentTypes(),
+      loadPieceTypes(),
+      loadSites(),
+    ])
+  }
+
+  // Watchers
+  watch(() => (machine.value as AnyRecord)?.customFieldValues, () => syncMachineCustomFields(), { deep: true })
+  watch(() => (machine.value as AnyRecord)?.customFields, () => syncMachineCustomFields(), { deep: true })
+  watch(
+    () => [components.value.length, machinePieces.value.length],
+    () => ensurePrintSelectionEntries(),
+    { immediate: true },
+  )
+
+  return {
+    // State
+    loading, machine, components, pieces, printAreaRef,
+    machineComponentLinks, machinePieceLinks, machineProductLinks,
+
+    // Machine fields
+    machineName, machineReference, machineSiteId, machineConstructeurIds, machineConstructeurId,
+    machineConstructeursDisplay, machineConstructeurContact, hasMachineConstructeur,
+    sites,
+
+    // UI state
+    machineDocumentFiles, machineDocumentsUploading, machineDocumentsLoaded,
+    machineCustomFields, previewDocument, previewVisible,
+    isEditMode, debug,
+    componentsCollapsed, collapseToggleToken, piecesCollapsed, pieceCollapseToggleToken,
+
+    // Computed
+    componentTypeOptions, pieceTypeOptions, componentTypeLabelMap, pieceTypeLabelMap,
+    productInventory, productById, flattenedComponents, machinePieces,
+    machineDirectProducts, machineDocumentsList, visibleMachineCustomFields,
+
+    // Methods
+    findProductById, resolveProductReference, getProductDisplay,
+    initMachineFields, getMachineFieldId,
+    syncMachineCustomFields, setMachineCustomFieldValue,
+    updateMachineCustomField, updatePieceCustomField,
+    refreshMachineDocuments, handleMachineFilesAdded, removeMachineDocument,
+    openPreview, closePreview,
+    updateMachineInfo, updateComponent, updatePieceFromComponent,
+    updatePieceInfo, handleMachineConstructeurChange, editComponent, editPiece,
+    toggleEditMode, toggleAllComponents, collapseAllComponents, toggleAllPieces,
+
+    // Print
+    printModalOpen, printSelection, ensurePrintSelectionEntries,
+    setAllPrintSelection, openPrintModal, closePrintModal, handlePrintConfirm,
+
+    // Loading & structure
+    loadMachineData, loadInitialData,
+    addComponentLink, removeComponentLink, addPieceLink, removePieceLink,
+    addProductLink, removeProductLink, reloadMachineStructure,
+
+    // External
+    constructeurs, loadProducts, updateMachineStructure, toast,
+    downloadDocument: downloadDocumentHelper,
+  }
+}

app/composables/useMachineDetailDocuments.ts

@@ -0,0 +1,146 @@
+/**
+ * Machine detail — document management sub-composable.
+ *
+ * Handles document loading, upload, delete and preview state.
+ */
+
+import { ref, computed } from 'vue'
+import { useDocuments } from '~/composables/useDocuments'
+import { canPreviewDocument } from '~/utils/documentPreview'
+
+type AnyRecord = Record<string, unknown>
+
+interface MachineDetailDocumentsDeps {
+  machine: Ref<AnyRecord | null>
+}
+
+export function useMachineDetailDocuments(deps: MachineDetailDocumentsDeps) {
+  const { machine } = deps
+  const {
+    uploadDocuments,
+    deleteDocument,
+    loadDocumentsByMachine,
+    loadDocumentsByProduct,
+  } = useDocuments()
+
+  // ---------------------------------------------------------------------------
+  // State
+  // ---------------------------------------------------------------------------
+
+  const machineDocumentFiles = ref<File[]>([])
+  const machineDocumentsUploading = ref(false)
+  const machineDocumentsLoaded = ref(false)
+  const previewDocument = ref<AnyRecord | null>(null)
+  const previewVisible = ref(false)
+
+  // ---------------------------------------------------------------------------
+  // Computed
+  // ---------------------------------------------------------------------------
+
+  const machineDocumentsList = computed(
+    () => ((machine.value as AnyRecord)?.documents as AnyRecord[]) || [],
+  )
+
+  // ---------------------------------------------------------------------------
+  // Methods
+  // ---------------------------------------------------------------------------
+
+  const refreshMachineDocuments = async () => {
+    if (!machine.value?.id) return
+    const result: any = await loadDocumentsByMachine(machine.value.id as string, { updateStore: false })
+    if (result.success && machine.value) {
+      machine.value.documents = result.data || []
+      machineDocumentsLoaded.value = true
+    }
+  }
+
+  const handleMachineFilesAdded = async (files: File[]) => {
+    if (!files.length || !machine.value?.id) return
+    machineDocumentsUploading.value = true
+    try {
+      const result: any = await uploadDocuments(
+        { files, context: { machineId: machine.value.id } } as any,
+        { updateStore: false },
+      )
+      if (result.success && machine.value) {
+        const newDocs = (result.data as AnyRecord[]) || []
+        machine.value.documents = [
+          ...newDocs,
+          ...((machine.value.documents as AnyRecord[]) || []),
+        ]
+        machineDocumentFiles.value = []
+      }
+    } finally {
+      machineDocumentsUploading.value = false
+    }
+  }
+
+  const removeMachineDocument = async (documentId: string) => {
+    if (!documentId) return
+    const result: any = await deleteDocument(documentId, { updateStore: false })
+    if (result.success && machine.value) {
+      machine.value.documents = ((machine.value.documents as AnyRecord[]) || []).filter(
+        (doc) => doc.id !== documentId,
+      )
+    }
+  }
+
+  const openPreview = (doc: AnyRecord) => {
+    if (!canPreviewDocument(doc)) return
+    previewDocument.value = doc
+    previewVisible.value = true
+  }
+
+  const closePreview = () => {
+    previewVisible.value = false
+    previewDocument.value = null
+  }
+
+  const loadProductDocuments = async (machineProductLinks: AnyRecord[]) => {
+    const productIds = machineProductLinks
+      .map((link) => {
+        const p = link.product as AnyRecord | string | null
+        if (typeof p === 'string') return p.split('/').pop() || null
+        return (p as AnyRecord)?.id as string | null
+      })
+      .filter((id): id is string => !!id)
+
+    const results = await Promise.allSettled(
+      productIds.map(async (id) => {
+        const result: any = await loadDocumentsByProduct(id, { updateStore: false })
+        if (result.success && Array.isArray(result.data)) {
+          return { id, docs: result.data as AnyRecord[] }
+        }
+        return { id, docs: [] }
+      }),
+    )
+
+    const map = new Map<string, AnyRecord[]>()
+    results.forEach((r) => {
+      if (r.status === 'fulfilled' && r.value.docs.length) {
+        map.set(r.value.id, r.value.docs)
+      }
+    })
+    return map
+  }
+
+  return {
+    // State
+    machineDocumentFiles,
+    machineDocumentsUploading,
+    machineDocumentsLoaded,
+    previewDocument,
+    previewVisible,
+
+    // Computed
+    machineDocumentsList,
+
+    // Methods
+    refreshMachineDocuments,
+    handleMachineFilesAdded,
+    removeMachineDocument,
+    openPreview,
+    closePreview,
+    loadProductDocuments,
+  }
+}

app/composables/useMachineDetailHierarchy.ts

@@ -0,0 +1,306 @@
+/**
+ * Machine detail — hierarchy & link management sub-composable.
+ *
+ * Handles machine hierarchy building, component/piece tree resolution,
+ * flatten helpers, find-by-id utilities, and structure link CRUD.
+ */
+
+import { ref, computed } from 'vue'
+import { useApi } from '~/composables/useApi'
+import { useToast } from '~/composables/useToast'
+import {
+  resolveIdentifier,
+} from '~/shared/utils/productDisplayUtils'
+import {
+  buildMachineHierarchyFromLinks,
+  resolveLinkArray,
+} from '~/composables/useMachineHierarchy'
+
+type AnyRecord = Record<string, unknown>
+
+interface MachineDetailHierarchyDeps {
+  machineId: string
+  machine: Ref<AnyRecord | null>
+  constructeurs: Ref<unknown[]>
+  findProductById: (id: string | null | undefined) => AnyRecord | null
+  transformComponentCustomFields: (data: AnyRecord[]) => AnyRecord[]
+  transformCustomFields: (data: AnyRecord[]) => AnyRecord[]
+  syncMachineCustomFields: () => void
+}
+
+export function useMachineDetailHierarchy(deps: MachineDetailHierarchyDeps) {
+  const {
+    machineId,
+    machine,
+    constructeurs,
+    findProductById,
+    transformComponentCustomFields,
+    transformCustomFields,
+    syncMachineCustomFields,
+  } = deps
+
+  const { get, post: apiPost, delete: apiDel } = useApi()
+  const toast = useToast()
+
+  // ---------------------------------------------------------------------------
+  // State
+  // ---------------------------------------------------------------------------
+
+  const components = ref<AnyRecord[]>([])
+  const pieces = ref<AnyRecord[]>([])
+  const machineComponentLinks = ref<AnyRecord[]>([])
+  const machinePieceLinks = ref<AnyRecord[]>([])
+  const machineProductLinks = ref<AnyRecord[]>([])
+
+  // ---------------------------------------------------------------------------
+  // Helpers
+  // ---------------------------------------------------------------------------
+
+  const flattenComponents = (list: AnyRecord[] = []): AnyRecord[] => {
+    const result: AnyRecord[] = []
+    const traverse = (items: AnyRecord[]) => {
+      items.forEach((item) => {
+        result.push(item)
+        if (Array.isArray(item.subComponents) && item.subComponents.length) {
+          traverse(item.subComponents as AnyRecord[])
+        }
+      })
+    }
+    traverse(list)
+    return result
+  }
+
+  const findComponentById = (items: AnyRecord[] | undefined, id: string): AnyRecord | null => {
+    for (const item of items || []) {
+      if (item.id === id) return item
+      const found = findComponentById(item.subComponents as AnyRecord[] | undefined, id)
+      if (found) return found
+    }
+    return null
+  }
+
+  const findPieceById = (pieceId: string): AnyRecord | null => {
+    const direct = pieces.value.find((p) => p.id === pieceId)
+    if (direct) return direct
+
+    const searchInComponents = (items: AnyRecord[]): AnyRecord | null => {
+      for (const item of items || []) {
+        const match = ((item.pieces as AnyRecord[]) || []).find((p) => p.id === pieceId)
+        if (match) return match
+        const nested = searchInComponents((item.subComponents as AnyRecord[]) || [])
+        if (nested) return nested
+      }
+      return null
+    }
+    return searchInComponents(components.value)
+  }
+
+  // ---------------------------------------------------------------------------
+  // Hierarchy & links
+  // ---------------------------------------------------------------------------
+
+  const applyMachineLinks = (source: AnyRecord): boolean => {
+    const container = (source?.machine as AnyRecord) ?? null
+    const componentLinksData =
+      resolveLinkArray(source, ['componentLinks', 'machineComponentLinks']) ??
+      resolveLinkArray(container, ['componentLinks', 'machineComponentLinks'])
+    const pieceLinksData =
+      resolveLinkArray(source, ['pieceLinks', 'machinePieceLinks']) ??
+      resolveLinkArray(container, ['pieceLinks', 'machinePieceLinks'])
+    const productLinksData =
+      resolveLinkArray(source, ['productLinks', 'machineProductLinks']) ??
+      resolveLinkArray(container, ['productLinks', 'machineProductLinks'])
+
+    if (componentLinksData === null && pieceLinksData === null && productLinksData === null) {
+      return false
+    }
+
+    const normalizedComponentLinks = (componentLinksData ?? []) as AnyRecord[]
+    const normalizedPieceLinks = (pieceLinksData ?? []) as AnyRecord[]
+    const normalizedProductLinks = (productLinksData ?? []) as AnyRecord[]
+
+    machineComponentLinks.value = normalizedComponentLinks
+    machinePieceLinks.value = normalizedPieceLinks
+    machineProductLinks.value = normalizedProductLinks
+
+    const { components: hierarchy, machinePieces: machineLevelPieces } =
+      buildMachineHierarchyFromLinks(
+        normalizedComponentLinks,
+        normalizedPieceLinks,
+        findProductById as any,
+        constructeurs.value as any,
+      )
+
+    components.value = transformComponentCustomFields(hierarchy as AnyRecord[])
+    pieces.value = transformCustomFields(machineLevelPieces as AnyRecord[])
+
+    return true
+  }
+
+  // ---------------------------------------------------------------------------
+  // Computed
+  // ---------------------------------------------------------------------------
+
+  const flattenedComponents = computed(() => flattenComponents(components.value))
+
+  const machinePieces = computed(() => {
+    return pieces.value.filter((piece) => {
+      const parentLinkId = resolveIdentifier(
+        piece.parentComponentLinkId,
+        (piece.machinePieceLink as AnyRecord)?.parentComponentLinkId,
+        piece.parentLinkId,
+      )
+      if (parentLinkId) return false
+      return !piece.composantId
+    })
+  })
+
+  // ---------------------------------------------------------------------------
+  // Structure reload
+  // ---------------------------------------------------------------------------
+
+  const reloadMachineStructure = async () => {
+    const result: any = await get(`/machines/${machineId}/structure`)
+    if (result.success) {
+      const machinePayload =
+        result.data?.machine && typeof result.data.machine === 'object'
+          ? result.data.machine
+          : result.data
+      if (machinePayload && typeof machinePayload === 'object') {
+        machine.value = {
+          ...machine.value,
+          ...machinePayload,
+          documents: machinePayload.documents || (machine.value as AnyRecord)?.documents || [],
+          customFieldValues: machinePayload.customFieldValues || (machine.value as AnyRecord)?.customFieldValues || [],
+        }
+        const linksApplied = applyMachineLinks(result.data)
+        if (linksApplied && machine.value) {
+          machine.value.componentLinks = machineComponentLinks.value
+          machine.value.pieceLinks = machinePieceLinks.value
+          machine.value.productLinks = machineProductLinks.value
+        }
+        syncMachineCustomFields()
+      }
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+  // Structure link CRUD
+  // ---------------------------------------------------------------------------
+
+  const addComponentLink = async (composantId: string) => {
+    const result: any = await apiPost('/machine_component_links', {
+      machine: `/api/machines/${machineId}`,
+      composant: `/api/composants/${composantId}`,
+    })
+    if (result.success) {
+      toast.showSuccess('Composant ajouté à la machine')
+      await reloadMachineStructure()
+    } else {
+      toast.showError('Erreur lors de l\'ajout du composant')
+    }
+    return result
+  }
+
+  const removeComponentLink = async (linkId: string) => {
+    const result: any = await apiDel(`/machine_component_links/${linkId}`)
+    if (result.success) {
+      toast.showSuccess('Composant retiré de la machine')
+      await reloadMachineStructure()
+    } else {
+      toast.showError('Erreur lors de la suppression du composant')
+    }
+    return result
+  }
+
+  const addPieceLink = async (pieceId: string, parentComponentLinkId?: string) => {
+    const payload: any = {
+      machine: `/api/machines/${machineId}`,
+      piece: `/api/pieces/${pieceId}`,
+    }
+    if (parentComponentLinkId) {
+      payload.parentLink = `/api/machine_component_links/${parentComponentLinkId}`
+    }
+    const result: any = await apiPost('/machine_piece_links', payload)
+    if (result.success) {
+      toast.showSuccess('Pièce ajoutée à la machine')
+      await reloadMachineStructure()
+    } else {
+      toast.showError('Erreur lors de l\'ajout de la pièce')
+    }
+    return result
+  }
+
+  const removePieceLink = async (linkId: string) => {
+    const result: any = await apiDel(`/machine_piece_links/${linkId}`)
+    if (result.success) {
+      toast.showSuccess('Pièce retirée de la machine')
+      await reloadMachineStructure()
+    } else {
+      toast.showError('Erreur lors de la suppression de la pièce')
+    }
+    return result
+  }
+
+  const addProductLink = async (productId: string, parentComponentLinkId?: string, parentPieceLinkId?: string) => {
+    const payload: any = {
+      machine: `/api/machines/${machineId}`,
+      product: `/api/products/${productId}`,
+    }
+    if (parentComponentLinkId) {
+      payload.parentComponentLink = `/api/machine_component_links/${parentComponentLinkId}`
+    }
+    if (parentPieceLinkId) {
+      payload.parentPieceLink = `/api/machine_piece_links/${parentPieceLinkId}`
+    }
+    const result: any = await apiPost('/machine_product_links', payload)
+    if (result.success) {
+      toast.showSuccess('Produit ajouté à la machine')
+      await reloadMachineStructure()
+    } else {
+      toast.showError('Erreur lors de l\'ajout du produit')
+    }
+    return result
+  }
+
+  const removeProductLink = async (linkId: string) => {
+    const result: any = await apiDel(`/machine_product_links/${linkId}`)
+    if (result.success) {
+      toast.showSuccess('Produit retiré de la machine')
+      await reloadMachineStructure()
+    } else {
+      toast.showError('Erreur lors de la suppression du produit')
+    }
+    return result
+  }
+
+  return {
+    // State
+    components,
+    pieces,
+    machineComponentLinks,
+    machinePieceLinks,
+    machineProductLinks,
+
+    // Computed
+    flattenedComponents,
+    machinePieces,
+
+    // Helpers
+    flattenComponents,
+    findComponentById,
+    findPieceById,
+
+    // Hierarchy
+    applyMachineLinks,
+
+    // Structure link management
+    reloadMachineStructure,
+    addComponentLink,
+    removeComponentLink,
+    addPieceLink,
+    removePieceLink,
+    addProductLink,
+    removeProductLink,
+  }
+}