From 8965ee97a3397f1ad4e8669aef1f54227597dbcc Mon Sep 17 00:00:00 2001
From: Matthieu <mtholot19@gmail.com>
Date: Wed, 30 Jul 2025 08:18:11 +0200
Subject: [PATCH] feat: Pages principales de l'application
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- index.vue : Dashboard avec vue hiérarchique des sites et machines
- machines.vue : Liste des machines avec filtres et actions
- sites.vue : Gestion des sites industriels
- types.vue : Gestion des types de machines
- generator.vue : Générateur de types de machines
- Système de navigation et gestion d'état
---
 app/pages/generator.vue | 1416 +++++++++++++++++++++++++++++++++++++++
 app/pages/index.vue     |  535 +++++++++++++++
 app/pages/machines.vue  |  379 +++++++++++
 app/pages/sites.vue     |  191 ++++++
 app/pages/types.vue     |  147 ++++
 5 files changed, 2668 insertions(+)
 create mode 100644 app/pages/generator.vue
 create mode 100644 app/pages/index.vue
 create mode 100644 app/pages/machines.vue
 create mode 100644 app/pages/sites.vue
 create mode 100644 app/pages/types.vue

diff --git a/app/pages/generator.vue b/app/pages/generator.vue
new file mode 100644
index 0000000..42912b5
--- /dev/null
+++ b/app/pages/generator.vue
@@ -0,0 +1,1416 @@
+<template>
+  <main class="container mx-auto px-6 py-8">
+    <!-- Hero Section -->
+    <div class="hero min-h-[30vh] bg-gradient-to-r from-primary to-secondary">
+      <div class="hero-content text-center text-neutral-content">
+        <div class="max-w-md">
+          <h1 class="mb-5 text-4xl font-bold">Générateur de Types</h1>
+          <p class="mb-5">
+            Créez des types de machines avec une hiérarchie infinie de composants et pièces.
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <!-- Generator Form -->
+    <div class="my-8">
+      <div class="card bg-base-100 shadow-xl">
+        <div class="card-body">
+          <h2 class="card-title mb-6">
+            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
+            </svg>
+            Nouveau Type de Machine
+          </h2>
+
+          <form @submit.prevent="generateType" class="space-y-6">
+            <!-- Basic Information -->
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+              <div class="form-control">
+                <label class="label">
+                  <span class="label-text">Nom du type</span>
+                </label>
+                <input 
+                  v-model="newType.name" 
+                  type="text" 
+                  placeholder="Ex: Presse hydraulique" 
+                  class="input input-bordered" 
+                  required
+                />
+              </div>
+
+              <div class="form-control">
+                <label class="label">
+                  <span class="label-text">Catégorie</span>
+                </label>
+                <select v-model="newType.category" class="select select-bordered" required>
+                  <option value="">Sélectionner une catégorie</option>
+                  <option v-for="category in categories" :key="category" :value="category">
+                    {{ category }}
+                  </option>
+                </select>
+              </div>
+            </div>
+
+            <div class="form-control">
+              <label class="label">
+                <span class="label-text">Description</span>
+              </label>
+              <textarea 
+                v-model="newType.description" 
+                placeholder="Description détaillée du type de machine..." 
+                class="textarea textarea-bordered h-24" 
+                required
+              ></textarea>
+            </div>
+
+            <div class="form-control">
+              <label class="label">
+                <span class="label-text">Fréquence de maintenance</span>
+              </label>
+              <select v-model="newType.maintenanceFrequency" class="select select-bordered" required>
+                <option value="">Sélectionner une fréquence</option>
+                <option value="Quotidienne">Quotidienne</option>
+                <option value="Hebdomadaire">Hebdomadaire</option>
+                <option value="Mensuelle">Mensuelle</option>
+                <option value="Trimestrielle">Trimestrielle</option>
+                <option value="Semestrielle">Semestrielle</option>
+                <option value="Annuelle">Annuelle</option>
+              </select>
+            </div>
+
+            <!-- Machine Pieces (Root Level) -->
+            <div class="form-control">
+              <label class="label">
+                <span class="label-text">Pièces de la machine</span>
+                <span class="label-text-alt">Pièces directement attachées à la machine (optionnel)</span>
+              </label>
+              <div class="space-y-4">
+                <div v-for="(piece, index) in newType.machinePieces" :key="index" class="border border-gray-200 rounded-lg p-4 bg-gray-50">
+                  <div class="flex items-center justify-between mb-3">
+                    <h5 class="text-sm font-medium">Pièce {{ index + 1 }}</h5>
+                    <button 
+                      type="button" 
+                      @click="removeMachinePiece(index)" 
+                      class="btn btn-square btn-error btn-sm"
+                      v-if="newType.machinePieces.length > 0"
+                    >
+                      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                      </svg>
+                    </button>
+                  </div>
+                  
+                  <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-3">
+                    <div class="form-control">
+                      <label class="label">
+                        <span class="label-text">Nom de la pièce</span>
+                      </label>
+                      <input 
+                        v-model="newType.machinePieces[index].name" 
+                        type="text" 
+                        :placeholder="`Pièce de machine ${index + 1}`" 
+                        class="input input-bordered input-sm" 
+                      />
+                    </div>
+                    <div class="form-control">
+                      <label class="label">
+                        <span class="label-text">Actions</span>
+                      </label>
+                      <button 
+                        type="button" 
+                        @click="addCustomFieldToPiece('machine', index, null)" 
+                        class="btn btn-outline btn-sm"
+                      >
+                        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
+                        </svg>
+                        Ajouter champs personnalisés
+                      </button>
+                    </div>
+                  </div>
+                  
+                  <!-- Champs personnalisés de cette pièce -->
+                  <div v-if="piece.customFields && piece.customFields.length > 0" class="mt-4">
+                    <h6 class="text-xs font-medium text-gray-600 mb-2">Champs personnalisés de cette pièce :</h6>
+                    <div class="space-y-2">
+                      <div 
+                        v-for="(field, fieldIndex) in piece.customFields" 
+                        :key="fieldIndex"
+                        class="border border-gray-200 rounded p-2 bg-white"
+                      >
+                        <div class="flex items-center justify-between mb-2">
+                          <span class="text-xs font-medium">Champ {{ fieldIndex + 1 }}</span>
+                          <button 
+                            type="button" 
+                            @click="removeCustomFieldFromPiece('machine', index, fieldIndex, null)" 
+                            class="btn btn-square btn-error btn-xs"
+                          >
+                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                            </svg>
+                          </button>
+                        </div>
+                        
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
+                          <div>
+                            <input 
+                              v-model="field.name" 
+                              type="text" 
+                              placeholder="Nom du champ" 
+                              class="input input-bordered input-xs w-full" 
+                            />
+                          </div>
+                          <div>
+                            <select v-model="field.type" class="select select-bordered select-xs w-full">
+                              <option value="">Type</option>
+                              <option value="text">Texte</option>
+                              <option value="number">Nombre</option>
+                              <option value="select">Liste</option>
+                              <option value="boolean">Oui/Non</option>
+                              <option value="date">Date</option>
+                            </select>
+                          </div>
+                        </div>
+                        
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-2 mt-2">
+                          <div class="flex items-center gap-2">
+                            <input 
+                              v-model="field.required" 
+                              type="checkbox" 
+                              class="checkbox checkbox-xs" 
+                            />
+                            <span class="text-xs">Obligatoire</span>
+                          </div>
+                          <div>
+                            <input 
+                              v-model="field.defaultValue" 
+                              type="text" 
+                              placeholder="Valeur par défaut" 
+                              class="input input-bordered input-xs w-full" 
+                            />
+                          </div>
+                        </div>
+                        
+                        <!-- Options pour les champs de type SELECT -->
+                        <div v-if="field.type === 'select'" class="mt-2">
+                          <textarea 
+                            v-model="field.optionsText" 
+                            placeholder="Option 1&#10;Option 2&#10;Option 3" 
+                            class="textarea textarea-bordered textarea-xs w-full h-16"
+                            @input="updatePieceFieldOptions('machine', index, fieldIndex, null)"
+                          ></textarea>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                
+                <button 
+                  type="button" 
+                  @click="addMachinePiece" 
+                  class="btn btn-outline btn-sm"
+                >
+                  <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
+                  </svg>
+                  Ajouter une pièce de machine
+                </button>
+              </div>
+            </div>
+
+            <!-- Hierarchical Components -->
+            <div class="form-control">
+              <label class="label">
+                <span class="label-text">Structure hiérarchique</span>
+                <span class="label-text-alt">Définissez les composants, sous-composants et leurs pièces (optionnel)</span>
+              </label>
+              
+              <div class="space-y-4">
+                <!-- Root Components -->
+                <div class="space-y-3">
+                  <h4 class="text-sm font-semibold text-gray-700">Composants principaux :</h4>
+                  <div 
+                    v-for="(component, index) in newType.components" 
+                    :key="index"
+                    class="border border-gray-200 rounded-lg p-4 bg-gray-50"
+                  >
+                    <div class="flex items-center gap-2 mb-3">
+                      <svg class="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path>
+                      </svg>
+                      <input 
+                        v-model="component.name" 
+                        type="text" 
+                        :placeholder="`Composant ${index + 1}`" 
+                        class="input input-bordered input-sm flex-1" 
+                        required
+                      />
+                      <button 
+                        type="button" 
+                        @click="removeComponent(index)" 
+                        class="btn btn-square btn-error btn-sm"
+                      >
+                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                        </svg>
+                      </button>
+                    </div>
+
+                    <!-- Champs personnalisés du composant -->
+                    <div class="mb-3">
+                      <div class="flex items-center gap-2 mb-2">
+                        <span class="text-xs font-medium text-gray-600">Champs personnalisés du composant :</span>
+                        <button 
+                          type="button" 
+                          @click="addComponentCustomField(component)" 
+                          class="btn btn-xs btn-outline"
+                        >
+                          <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
+                          </svg>
+                          Ajouter champ
+                        </button>
+                      </div>
+                      <div class="space-y-2">
+                        <div 
+                          v-for="(field, fieldIndex) in component.customFields" 
+                          :key="fieldIndex"
+                          class="border border-gray-200 rounded p-2 bg-white"
+                        >
+                          <div class="flex items-center justify-between mb-2">
+                            <span class="text-xs font-medium">Champ personnalisé {{ fieldIndex + 1 }}</span>
+                            <button 
+                              type="button" 
+                              @click="removeComponentCustomField(component, fieldIndex)" 
+                              class="btn btn-square btn-error btn-xs"
+                            >
+                              <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                              </svg>
+                            </button>
+                          </div>
+                          
+                          <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
+                            <div>
+                              <input 
+                                v-model="field.name" 
+                                type="text" 
+                                placeholder="Nom du champ" 
+                                class="input input-bordered input-xs w-full" 
+                              />
+                            </div>
+                            <div>
+                              <select v-model="field.type" class="select select-bordered select-xs w-full">
+                                <option value="">Type</option>
+                                <option value="text">Texte</option>
+                                <option value="number">Nombre</option>
+                                <option value="select">Liste</option>
+                                <option value="boolean">Oui/Non</option>
+                                <option value="date">Date</option>
+                              </select>
+                            </div>
+                          </div>
+                          
+                          <div class="grid grid-cols-1 md:grid-cols-2 gap-2 mt-2">
+                            <div class="flex items-center gap-2">
+                              <input 
+                                v-model="field.required" 
+                                type="checkbox" 
+                                class="checkbox checkbox-xs" 
+                              />
+                              <span class="text-xs">Obligatoire</span>
+                            </div>
+                            <div>
+                              <input 
+                                v-model="field.defaultValue" 
+                                type="text" 
+                                placeholder="Valeur par défaut" 
+                                class="input input-bordered input-xs w-full" 
+                              />
+                            </div>
+                          </div>
+                          
+                          <!-- Options pour les champs de type SELECT -->
+                          <div v-if="field.type === 'select'" class="mt-2">
+                            <textarea 
+                              v-model="field.optionsText" 
+                              placeholder="Option 1&#10;Option 2&#10;Option 3" 
+                              class="textarea textarea-bordered textarea-xs w-full h-16"
+                              @input="updateComponentFieldOptions(component, fieldIndex)"
+                            ></textarea>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    <!-- Pièces du composant principal -->
+                    <div class="mb-3">
+                      <div class="flex items-center gap-2 mb-2">
+                        <span class="text-xs font-medium text-gray-600">Pièces du composant :</span>
+                        <button 
+                          type="button" 
+                          @click="addComponentPiece(component)" 
+                          class="btn btn-xs btn-outline"
+                        >
+                          <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
+                          </svg>
+                          Ajouter pièce
+                        </button>
+                      </div>
+                      <div class="space-y-2">
+                        <div 
+                          v-for="(piece, pieceIndex) in component.pieces" 
+                          :key="pieceIndex"
+                          class="border border-gray-200 rounded p-2 bg-white"
+                        >
+                          <div class="flex items-center justify-between mb-2">
+                            <div class="flex items-center gap-2">
+                              <svg class="w-3 h-3 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
+                              </svg>
+                              <input 
+                                v-model="component.pieces[pieceIndex].name" 
+                                type="text" 
+                                :placeholder="`Pièce ${pieceIndex + 1}`" 
+                                class="input input-bordered input-xs flex-1" 
+                              />
+                            </div>
+                            <div class="flex gap-1">
+                              <button 
+                                type="button" 
+                                @click="addCustomFieldToPiece('component', component, pieceIndex)" 
+                                class="btn btn-xs btn-ghost"
+                              >
+                                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
+                                </svg>
+                              </button>
+                              <button 
+                                type="button" 
+                                @click="removeComponentPiece(component, pieceIndex)" 
+                                class="btn btn-square btn-error btn-xs"
+                              >
+                                <svg class="w-2 h-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                                </svg>
+                              </button>
+                            </div>
+                          </div>
+                          
+                          <!-- Champs personnalisés de cette pièce -->
+                          <div v-if="piece.customFields && piece.customFields.length > 0" class="mt-2 ml-4">
+                            <div class="space-y-1">
+                              <div 
+                                v-for="(field, fieldIndex) in piece.customFields" 
+                                :key="fieldIndex"
+                                class="border border-gray-100 rounded p-1 bg-gray-50"
+                              >
+                                <div class="flex items-center justify-between mb-1">
+                                  <span class="text-xs">Champ {{ fieldIndex + 1 }}</span>
+                                  <button 
+                                    type="button" 
+                                    @click="removeCustomFieldFromPiece('component', component, fieldIndex, pieceIndex)" 
+                                    class="btn btn-square btn-error btn-xs"
+                                  >
+                                    <svg class="w-2 h-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                                    </svg>
+                                  </button>
+                                </div>
+                                
+                                <div class="grid grid-cols-2 gap-1">
+                                  <input 
+                                    v-model="field.name" 
+                                    type="text" 
+                                    placeholder="Nom" 
+                                    class="input input-bordered input-xs" 
+                                  />
+                                  <select v-model="field.type" class="select select-bordered select-xs">
+                                    <option value="">Type</option>
+                                    <option value="text">Texte</option>
+                                    <option value="number">Nombre</option>
+                                    <option value="select">Liste</option>
+                                    <option value="boolean">Oui/Non</option>
+                                    <option value="date">Date</option>
+                                  </select>
+                                </div>
+                                
+                                <div class="grid grid-cols-2 gap-1 mt-1">
+                                  <div class="flex items-center gap-1">
+                                    <input 
+                                      v-model="field.required" 
+                                      type="checkbox" 
+                                      class="checkbox checkbox-xs" 
+                                    />
+                                    <span class="text-xs">Obligatoire</span>
+                                  </div>
+                                  <input 
+                                    v-model="field.defaultValue" 
+                                    type="text" 
+                                    placeholder="Défaut" 
+                                    class="input input-bordered input-xs" 
+                                  />
+                                </div>
+                                
+                                <!-- Options pour les champs de type SELECT -->
+                                <div v-if="field.type === 'select'" class="mt-1">
+                                  <textarea 
+                                    v-model="field.optionsText" 
+                                    placeholder="Option 1&#10;Option 2&#10;Option 3" 
+                                    class="textarea textarea-bordered textarea-xs w-full h-12"
+                                    @input="updatePieceFieldOptions('component', pieceIndex, fieldIndex, component)"
+                                  ></textarea>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    <!-- Sub-components -->
+                    <div class="ml-6 space-y-2">
+                      <div class="flex items-center gap-2 mb-2">
+                        <span class="text-xs font-medium text-gray-600">Sous-composants :</span>
+                        <button 
+                          type="button" 
+                          @click="addSubComponent(component)" 
+                          class="btn btn-xs btn-outline"
+                        >
+                          <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
+                          </svg>
+                          Ajouter
+                        </button>
+                      </div>
+                      
+                      <div 
+                        v-for="(subComponent, subIndex) in component.subComponents" 
+                        :key="subIndex"
+                        class="border border-gray-200 rounded p-3 bg-white"
+                      >
+                        <div class="flex items-center gap-2 mb-2">
+                          <svg class="w-3 h-3 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                          </svg>
+                          <input 
+                            v-model="subComponent.name" 
+                            type="text" 
+                            :placeholder="`Sous-composant ${subIndex + 1}`" 
+                            class="input input-bordered input-xs flex-1" 
+                            required
+                          />
+                          <button 
+                            type="button" 
+                            @click="removeSubComponent(component, subIndex)" 
+                            class="btn btn-square btn-error btn-xs"
+                          >
+                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                            </svg>
+                          </button>
+                        </div>
+
+                        <!-- Champs personnalisés du sous-composant -->
+                        <div class="mb-2">
+                          <div class="flex items-center gap-2 mb-1">
+                            <span class="text-xs text-gray-500">Champs personnalisés :</span>
+                            <button 
+                              type="button" 
+                              @click="addSubComponentCustomField(subComponent)" 
+                              class="btn btn-xs btn-ghost"
+                            >
+                              <svg class="w-2 h-2 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
+                              </svg>
+                              +
+                            </button>
+                          </div>
+                          <div class="space-y-1">
+                            <div 
+                              v-for="(field, fieldIndex) in subComponent.customFields" 
+                              :key="fieldIndex"
+                              class="border border-gray-100 rounded p-1 bg-gray-50"
+                            >
+                              <div class="flex items-center justify-between mb-1">
+                                <span class="text-xs">Champ {{ fieldIndex + 1 }}</span>
+                                <button 
+                                  type="button" 
+                                  @click="removeSubComponentCustomField(subComponent, fieldIndex)" 
+                                  class="btn btn-square btn-error btn-xs"
+                                >
+                                  <svg class="w-2 h-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                                  </svg>
+                                </button>
+                              </div>
+                              
+                              <div class="grid grid-cols-2 gap-1">
+                                <input 
+                                  v-model="field.name" 
+                                  type="text" 
+                                  placeholder="Nom" 
+                                  class="input input-bordered input-xs" 
+                                />
+                                <select v-model="field.type" class="select select-bordered select-xs">
+                                  <option value="">Type</option>
+                                  <option value="text">Texte</option>
+                                  <option value="number">Nombre</option>
+                                  <option value="select">Liste</option>
+                                  <option value="boolean">Oui/Non</option>
+                                  <option value="date">Date</option>
+                                </select>
+                              </div>
+                              
+                              <div class="grid grid-cols-2 gap-1 mt-1">
+                                <div class="flex items-center gap-1">
+                                  <input 
+                                    v-model="field.required" 
+                                    type="checkbox" 
+                                    class="checkbox checkbox-xs" 
+                                  />
+                                  <span class="text-xs">Obligatoire</span>
+                                </div>
+                                <input 
+                                  v-model="field.defaultValue" 
+                                  type="text" 
+                                  placeholder="Défaut" 
+                                  class="input input-bordered input-xs" 
+                                />
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+
+                        <!-- Pièces du sous-composant -->
+                        <div class="mb-2">
+                          <div class="flex items-center gap-2 mb-1">
+                            <span class="text-xs text-gray-500">Pièces :</span>
+                            <button 
+                              type="button" 
+                              @click="addSubComponentPiece(subComponent)" 
+                              class="btn btn-xs btn-ghost"
+                            >
+                              <svg class="w-2 h-2 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
+                              </svg>
+                              +
+                            </button>
+                          </div>
+                          <div class="space-y-1">
+                            <div 
+                              v-for="(piece, pieceIndex) in subComponent.pieces" 
+                              :key="pieceIndex"
+                              class="border border-gray-100 rounded p-1 bg-gray-50"
+                            >
+                              <div class="flex items-center justify-between mb-1">
+                                <div class="flex items-center gap-1">
+                                  <svg class="w-2 h-2 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
+                                  </svg>
+                                  <input 
+                                    v-model="subComponent.pieces[pieceIndex].name" 
+                                    type="text" 
+                                    :placeholder="`Pièce ${pieceIndex + 1}`" 
+                                    class="input input-bordered input-xs flex-1" 
+                                  />
+                                </div>
+                                <div class="flex gap-1">
+                                  <button 
+                                    type="button" 
+                                    @click="addCustomFieldToPiece('subComponent', subComponent, pieceIndex)" 
+                                    class="btn btn-xs btn-ghost"
+                                  >
+                                    <svg class="w-2 h-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
+                                    </svg>
+                                  </button>
+                                  <button 
+                                    type="button" 
+                                    @click="removeSubComponentPiece(subComponent, pieceIndex)" 
+                                    class="btn btn-square btn-error btn-xs"
+                                  >
+                                    <svg class="w-2 h-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                                    </svg>
+                                  </button>
+                                </div>
+                              </div>
+                              
+                              <!-- Champs personnalisés de cette pièce -->
+                              <div v-if="piece.customFields && piece.customFields.length > 0" class="mt-1 ml-3">
+                                <div class="space-y-1">
+                                  <div 
+                                    v-for="(field, fieldIndex) in piece.customFields" 
+                                    :key="fieldIndex"
+                                    class="border border-gray-50 rounded p-1 bg-gray-25"
+                                  >
+                                    <div class="flex items-center justify-between mb-1">
+                                      <span class="text-xs">Champ {{ fieldIndex + 1 }}</span>
+                                      <button 
+                                        type="button" 
+                                        @click="removeCustomFieldFromPiece('subComponent', subComponent, fieldIndex, pieceIndex)" 
+                                        class="btn btn-square btn-error btn-xs"
+                                      >
+                                        <svg class="w-2 h-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                                        </svg>
+                                      </button>
+                                    </div>
+                                    
+                                    <div class="grid grid-cols-2 gap-1">
+                                      <input 
+                                        v-model="field.name" 
+                                        type="text" 
+                                        placeholder="Nom" 
+                                        class="input input-bordered input-xs" 
+                                      />
+                                      <select v-model="field.type" class="select select-bordered select-xs">
+                                        <option value="">Type</option>
+                                        <option value="text">Texte</option>
+                                        <option value="number">Nombre</option>
+                                        <option value="select">Liste</option>
+                                        <option value="boolean">Oui/Non</option>
+                                        <option value="date">Date</option>
+                                      </select>
+                                    </div>
+                                    
+                                    <div class="grid grid-cols-2 gap-1 mt-1">
+                                      <div class="flex items-center gap-1">
+                                        <input 
+                                          v-model="field.required" 
+                                          type="checkbox" 
+                                          class="checkbox checkbox-xs" 
+                                        />
+                                        <span class="text-xs">Obligatoire</span>
+                                      </div>
+                                      <input 
+                                        v-model="field.defaultValue" 
+                                        type="text" 
+                                        placeholder="Défaut" 
+                                        class="input input-bordered input-xs" 
+                                      />
+                                    </div>
+                                    
+                                    <!-- Options pour les champs de type SELECT -->
+                                    <div v-if="field.type === 'select'" class="mt-1">
+                                      <textarea 
+                                        v-model="field.optionsText" 
+                                        placeholder="Option 1&#10;Option 2&#10;Option 3" 
+                                        class="textarea textarea-bordered textarea-xs w-full h-10"
+                                        @input="updatePieceFieldOptions('subComponent', pieceIndex, fieldIndex, subComponent)"
+                                      ></textarea>
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+
+                        <!-- Sub-sub-components (recursive) -->
+                        <div class="ml-4 space-y-1">
+                          <div class="flex items-center gap-2 mb-1">
+                            <span class="text-xs text-gray-500">Sous-éléments :</span>
+                            <button 
+                              type="button" 
+                              @click="addSubSubComponent(subComponent)" 
+                              class="btn btn-xs btn-ghost"
+                            >
+                              <svg class="w-2 h-2 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
+                              </svg>
+                              +
+                            </button>
+                          </div>
+                          
+                          <div 
+                            v-for="(subSubComponent, subSubIndex) in subComponent.subComponents" 
+                            :key="subSubIndex"
+                            class="border border-gray-100 rounded p-2 bg-gray-50"
+                          >
+                            <div class="flex items-center gap-2">
+                              <svg class="w-2 h-2 text-orange-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
+                              </svg>
+                              <input 
+                                v-model="subSubComponent.name" 
+                                type="text" 
+                                :placeholder="`Élément ${subSubIndex + 1}`" 
+                                class="input input-bordered input-xs flex-1" 
+                                required
+                              />
+                              <button 
+                                type="button" 
+                                @click="removeSubSubComponent(subComponent, subSubIndex)" 
+                                class="btn btn-square btn-error btn-xs"
+                              >
+                                <svg class="w-2 h-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                                </svg>
+                              </button>
+                            </div>
+
+                            <!-- Pièces du sous-sous-composant -->
+                            <div class="mt-1">
+                              <div class="flex items-center gap-1 mb-1">
+                                <span class="text-xs text-gray-400">Pièces :</span>
+                                <button 
+                                  type="button" 
+                                  @click="addSubSubComponentPiece(subSubComponent)" 
+                                  class="btn btn-xs btn-ghost"
+                                >
+                                  <svg class="w-2 h-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
+                                  </svg>
+                                </button>
+                              </div>
+                              <div class="space-y-1">
+                                <div 
+                                  v-for="(piece, pieceIndex) in subSubComponent.pieces" 
+                                  :key="pieceIndex"
+                                  class="border border-gray-50 rounded p-1 bg-gray-25"
+                                >
+                                  <div class="flex items-center justify-between mb-1">
+                                    <div class="flex items-center gap-1">
+                                      <svg class="w-2 h-2 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
+                                      </svg>
+                                      <input 
+                                        v-model="subSubComponent.pieces[pieceIndex].name" 
+                                        type="text" 
+                                        :placeholder="`Pièce ${pieceIndex + 1}`" 
+                                        class="input input-bordered input-xs flex-1" 
+                                      />
+                                    </div>
+                                    <div class="flex gap-1">
+                                      <button 
+                                        type="button" 
+                                        @click="addCustomFieldToPiece('subSubComponent', subSubComponent, pieceIndex)" 
+                                        class="btn btn-xs btn-ghost"
+                                      >
+                                        <svg class="w-2 h-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
+                                        </svg>
+                                      </button>
+                                      <button 
+                                        type="button" 
+                                        @click="removeSubSubComponentPiece(subSubComponent, pieceIndex)" 
+                                        class="btn btn-square btn-error btn-xs"
+                                      >
+                                        <svg class="w-2 h-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                                        </svg>
+                                      </button>
+                                    </div>
+                                  </div>
+                                  
+                                  <!-- Champs personnalisés de cette pièce -->
+                                  <div v-if="piece.customFields && piece.customFields.length > 0" class="mt-1 ml-3">
+                                    <div class="space-y-1">
+                                      <div 
+                                        v-for="(field, fieldIndex) in piece.customFields" 
+                                        :key="fieldIndex"
+                                        class="border border-gray-25 rounded p-1 bg-gray-10"
+                                      >
+                                        <div class="flex items-center justify-between mb-1">
+                                          <span class="text-xs">Champ {{ fieldIndex + 1 }}</span>
+                                          <button 
+                                            type="button" 
+                                            @click="removeCustomFieldFromPiece('subSubComponent', subSubComponent, fieldIndex, pieceIndex)" 
+                                            class="btn btn-square btn-error btn-xs"
+                                          >
+                                            <svg class="w-2 h-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                                            </svg>
+                                          </button>
+                                        </div>
+                                        
+                                        <div class="grid grid-cols-2 gap-1">
+                                          <input 
+                                            v-model="field.name" 
+                                            type="text" 
+                                            placeholder="Nom" 
+                                            class="input input-bordered input-xs" 
+                                          />
+                                          <select v-model="field.type" class="select select-bordered select-xs">
+                                            <option value="">Type</option>
+                                            <option value="text">Texte</option>
+                                            <option value="number">Nombre</option>
+                                            <option value="select">Liste</option>
+                                            <option value="boolean">Oui/Non</option>
+                                            <option value="date">Date</option>
+                                          </select>
+                                        </div>
+                                        
+                                        <div class="grid grid-cols-2 gap-1 mt-1">
+                                          <div class="flex items-center gap-1">
+                                            <input 
+                                              v-model="field.required" 
+                                              type="checkbox" 
+                                              class="checkbox checkbox-xs" 
+                                            />
+                                            <span class="text-xs">Obligatoire</span>
+                                          </div>
+                                          <input 
+                                            v-model="field.defaultValue" 
+                                            type="text" 
+                                            placeholder="Défaut" 
+                                            class="input input-bordered input-xs" 
+                                          />
+                                        </div>
+                                        
+                                        <!-- Options pour les champs de type SELECT -->
+                                        <div v-if="field.type === 'select'" class="mt-1">
+                                          <textarea 
+                                            v-model="field.optionsText" 
+                                            placeholder="Option 1&#10;Option 2&#10;Option 3" 
+                                            class="textarea textarea-bordered textarea-xs w-full h-8"
+                                            @input="updatePieceFieldOptions('subSubComponent', pieceIndex, fieldIndex, subSubComponent)"
+                                          ></textarea>
+                                        </div>
+                                      </div>
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  
+                  <button 
+                    type="button" 
+                    @click="addComponent" 
+                    class="btn btn-outline btn-sm"
+                  >
+                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
+                    </svg>
+                    Ajouter un composant
+                  </button>
+                </div>
+              </div>
+            </div>
+
+            <!-- Custom Fields -->
+            <div class="form-control">
+              <label class="label">
+                <span class="label-text">Champs personnalisés</span>
+                <span class="label-text-alt">Définissez des champs personnalisés pour ce type de machine (optionnel)</span>
+              </label>
+              <div class="space-y-4">
+                <div v-for="(field, index) in newType.customFields" :key="index" class="border border-gray-200 rounded-lg p-4 bg-gray-50">
+                  <div class="flex items-center justify-between mb-3">
+                    <h5 class="text-sm font-medium">Champ personnalisé {{ index + 1 }}</h5>
+                    <button 
+                      type="button" 
+                      @click="removeCustomField(index)" 
+                      class="btn btn-square btn-error btn-sm"
+                    >
+                      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                      </svg>
+                    </button>
+                  </div>
+                  
+                  <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 champ</span>
+                      </label>
+                      <input 
+                        v-model="field.name" 
+                        type="text" 
+                        placeholder="Ex: Température maximale" 
+                        class="input input-bordered input-sm" 
+                        required
+                      />
+                    </div>
+                    
+                    <div class="form-control">
+                      <label class="label">
+                        <span class="label-text">Type de champ</span>
+                      </label>
+                      <select v-model="field.type" class="select select-bordered select-sm" required>
+                        <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 class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-3">
+                    <div class="form-control">
+                      <label class="label cursor-pointer">
+                        <span class="label-text">Champ obligatoire</span>
+                        <input 
+                          v-model="field.required" 
+                          type="checkbox" 
+                          class="checkbox checkbox-sm" 
+                        />
+                      </label>
+                    </div>
+                    
+                    <div class="form-control">
+                      <label class="label">
+                        <span class="label-text">Valeur par défaut</span>
+                      </label>
+                      <input 
+                        v-model="field.defaultValue" 
+                        type="text" 
+                        placeholder="Valeur par défaut (optionnel)" 
+                        class="input input-bordered input-sm" 
+                      />
+                    </div>
+                  </div>
+                  
+                  <!-- Options pour les champs de type SELECT -->
+                  <div v-if="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 
+                      v-model="field.optionsText" 
+                      placeholder="Option 1&#10;Option 2&#10;Option 3" 
+                      class="textarea textarea-bordered textarea-sm h-20"
+                      @input="updateFieldOptions(index)"
+                    ></textarea>
+                  </div>
+                </div>
+                
+                <button 
+                  type="button" 
+                  @click="addCustomField" 
+                  class="btn btn-outline btn-sm"
+                >
+                  <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
+                  </svg>
+                  Ajouter un champ personnalisé
+                </button>
+              </div>
+            </div>
+
+            <!-- Actions -->
+            <div class="card-actions justify-end">
+              <button type="button" @click="resetForm" class="btn btn-outline">
+                Réinitialiser
+              </button>
+              <button type="submit" class="btn btn-primary">
+                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+                </svg>
+                Générer le type
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+
+      <!-- Generated Types List -->
+      <div class="mt-8">
+        <h3 class="text-xl font-semibold mb-4">Types générés récemment</h3>
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          <div 
+            v-for="type in recentTypes" 
+            :key="type.id"
+            class="card bg-base-100 shadow-lg"
+          >
+            <div class="card-body">
+              <div class="flex items-center justify-between mb-2">
+                <h4 class="card-title text-sm">{{ type.name }}</h4>
+                <div class="badge badge-primary badge-sm">{{ type.category }}</div>
+              </div>
+              <p class="text-xs text-gray-600">{{ type.description }}</p>
+              <div class="text-xs text-gray-500 mt-2">
+                {{ type.components?.length || 0 }} composants
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import { useMachineTypesApi } from '~/composables/useMachineTypesApi'
+import { useToast } from '~/composables/useToast'
+
+const { machineTypes, loading, loadMachineTypes, createMachineType } = useMachineTypesApi()
+const { showSuccess } = useToast()
+
+const categories = ref([
+  'Production',
+  'Transformation', 
+  'Manutention',
+  'Traitement',
+  'Contrôle'
+])
+
+const recentTypes = ref([])
+
+// Form data with hierarchical structure
+const newType = reactive({
+  name: '',
+  category: '',
+  description: '',
+  maintenanceFrequency: '',
+  components: [], // Changed to empty array to make it optional
+  machinePieces: [], // Changed to empty array to make it optional
+  customFields: [] // Changed to empty array to make it optional
+})
+
+// Methods for hierarchical components
+const addComponent = () => {
+  newType.components.push({
+    name: '',
+    subComponents: [
+      {
+        name: '',
+        subComponents: [],
+        pieces: [{ name: '', customFields: [] }],
+        customFields: []
+      }
+    ],
+    pieces: [{ name: '', customFields: [] }],
+    customFields: []
+  })
+}
+
+const removeComponent = (index) => {
+  newType.components.splice(index, 1)
+}
+
+const addSubComponent = (component) => {
+  component.subComponents.push({
+    name: '',
+    subComponents: [],
+    pieces: [{ name: '', customFields: [] }],
+    customFields: []
+  })
+}
+
+const removeSubComponent = (component, index) => {
+  component.subComponents.splice(index, 1)
+}
+
+const addSubSubComponent = (subComponent) => {
+  subComponent.subComponents.push({
+    name: '',
+    subComponents: [],
+    pieces: [{ name: '', customFields: [] }],
+    customFields: []
+  })
+}
+
+const removeSubSubComponent = (subComponent, index) => {
+  subComponent.subComponents.splice(index, 1)
+}
+
+// Methods for components and sub-components pieces
+const addComponentPiece = (component) => {
+  component.pieces.push({
+    name: '',
+    customFields: []
+  })
+}
+
+const removeComponentPiece = (component, index) => {
+  component.pieces.splice(index, 1)
+}
+
+const addSubComponentPiece = (subComponent) => {
+  subComponent.pieces.push({ name: '', customFields: [] })
+}
+
+const removeSubComponentPiece = (subComponent, index) => {
+  subComponent.pieces.splice(index, 1)
+}
+
+const addSubSubComponentPiece = (subSubComponent) => {
+  subSubComponent.pieces.push({ name: '', customFields: [] })
+}
+
+const removeSubSubComponentPiece = (subSubComponent, index) => {
+  subSubComponent.pieces.splice(index, 1)
+}
+
+// Methods for machine pieces
+const addMachinePiece = () => {
+  newType.machinePieces.push({
+    name: '',
+    customFields: []
+  })
+}
+
+const removeMachinePiece = (index) => {
+  newType.machinePieces.splice(index, 1)
+}
+
+// Methods for custom fields
+const addCustomField = () => {
+  newType.customFields.push({
+    name: '',
+    type: '',
+    required: false,
+    defaultValue: '',
+    options: [],
+    optionsText: ''
+  })
+}
+
+const removeCustomField = (index) => {
+  newType.customFields.splice(index, 1)
+}
+
+const updateFieldOptions = (index) => {
+  const field = newType.customFields[index]
+  field.options = field.optionsText.split('\n').map(option => option.trim()).filter(option => option !== '')
+}
+
+const addComponentCustomField = (component) => {
+  if (!component.customFields) {
+    component.customFields = []
+  }
+  component.customFields.push({
+    name: '',
+    type: '',
+    required: false,
+    defaultValue: '',
+    options: [],
+    optionsText: ''
+  })
+}
+
+const removeComponentCustomField = (component, index) => {
+  if (component.customFields) {
+    component.customFields.splice(index, 1)
+  }
+}
+
+const updateComponentFieldOptions = (component, index) => {
+  if (component.customFields && component.customFields[index]) {
+    const field = component.customFields[index]
+    field.options = field.optionsText.split('\n').map(option => option.trim()).filter(option => option !== '')
+  }
+}
+
+const addSubComponentCustomField = (subComponent) => {
+  if (!subComponent.customFields) {
+    subComponent.customFields = []
+  }
+  subComponent.customFields.push({
+    name: '',
+    type: '',
+    required: false,
+    defaultValue: '',
+    options: [],
+    optionsText: ''
+  })
+}
+
+const removeSubComponentCustomField = (subComponent, index) => {
+  if (subComponent.customFields) {
+    subComponent.customFields.splice(index, 1)
+  }
+}
+
+
+
+const addCustomFieldToPiece = (type, source, pieceIndex) => {
+  if (type === 'machine') {
+    if (!newType.machinePieces[source].customFields) {
+      newType.machinePieces[source].customFields = []
+    }
+    newType.machinePieces[source].customFields.push({
+      name: '',
+      type: '',
+      required: false,
+      defaultValue: '',
+      options: [],
+      optionsText: ''
+    })
+  } else if (type === 'component') {
+    if (!source.pieces[pieceIndex].customFields) {
+      source.pieces[pieceIndex].customFields = []
+    }
+    source.pieces[pieceIndex].customFields.push({
+      name: '',
+      type: '',
+      required: false,
+      defaultValue: '',
+      options: [],
+      optionsText: ''
+    })
+  } else if (type === 'subComponent') {
+    if (!source.pieces[pieceIndex].customFields) {
+      source.pieces[pieceIndex].customFields = []
+    }
+    source.pieces[pieceIndex].customFields.push({
+      name: '',
+      type: '',
+      required: false,
+      defaultValue: '',
+      options: [],
+      optionsText: ''
+    })
+  } else if (type === 'subSubComponent') {
+    if (!source.pieces[pieceIndex].customFields) {
+      source.pieces[pieceIndex].customFields = []
+    }
+    source.pieces[pieceIndex].customFields.push({
+      name: '',
+      type: '',
+      required: false,
+      defaultValue: '',
+      options: [],
+      optionsText: ''
+    })
+  }
+}
+
+const removeCustomFieldFromPiece = (type, source, fieldIndex, pieceIndex) => {
+  if (type === 'machine') {
+    if (newType.machinePieces[source].customFields) {
+      newType.machinePieces[source].customFields.splice(fieldIndex, 1)
+    }
+  } else if (type === 'component') {
+    if (source.pieces[pieceIndex].customFields) {
+      source.pieces[pieceIndex].customFields.splice(fieldIndex, 1)
+    }
+  } else if (type === 'subComponent') {
+    if (source.pieces[pieceIndex].customFields) {
+      source.pieces[pieceIndex].customFields.splice(fieldIndex, 1)
+    }
+  } else if (type === 'subSubComponent') {
+    if (source.pieces[pieceIndex].customFields) {
+      source.pieces[pieceIndex].customFields.splice(fieldIndex, 1)
+    }
+  }
+}
+
+const updatePieceFieldOptions = (type, pieceIndex, fieldIndex, source) => {
+  if (type === 'machine') {
+    const field = newType.machinePieces[source].customFields[fieldIndex]
+    if (field && field.optionsText) {
+      field.options = field.optionsText.split('\n').map(option => option.trim()).filter(option => option !== '')
+    }
+  } else if (type === 'component') {
+    const field = source.pieces[pieceIndex].customFields[fieldIndex]
+    if (field && field.optionsText) {
+      field.options = field.optionsText.split('\n').map(option => option.trim()).filter(option => option !== '')
+    }
+  } else if (type === 'subComponent') {
+    const field = source.pieces[pieceIndex].customFields[fieldIndex]
+    if (field && field.optionsText) {
+      field.options = field.optionsText.split('\n').map(option => option.trim()).filter(option => option !== '')
+    }
+  } else if (type === 'subSubComponent') {
+    const field = source.pieces[pieceIndex].customFields[fieldIndex]
+    if (field && field.optionsText) {
+      field.options = field.optionsText.split('\n').map(option => option.trim()).filter(option => option !== '')
+    }
+  }
+}
+
+const updateComponentPieceFieldOptions = (component, fieldIndex) => {
+  if (component.pieceCustomFields && component.pieceCustomFields[fieldIndex]) {
+    const field = component.pieceCustomFields[fieldIndex]
+    field.options = field.optionsText.split('\n').map(option => option.trim()).filter(option => option !== '')
+  }
+}
+
+const resetForm = () => {
+  newType.name = ''
+  newType.category = ''
+  newType.description = ''
+  newType.maintenanceFrequency = ''
+  newType.components = [] // Reset to empty array
+  newType.machinePieces = [] // Reset to empty array
+  newType.customFields = [] // Reset to empty array
+}
+
+const generateType = async () => {
+  // Clean up components (remove empty ones and clean their pieces)
+  const cleanComponents = newType.components
+    .filter(comp => comp.name.trim() !== '')
+    .map(comp => ({
+      ...comp,
+      pieces: comp.pieces
+        .filter(piece => piece.name.trim() !== '')
+        .map(piece => ({
+          name: piece.name,
+          customFields: piece.customFields.filter(field => field.name.trim() !== '')
+        })),
+      customFields: comp.customFields.filter(field => field.name.trim() !== ''),
+      subComponents: comp.subComponents.map(subComp => ({
+        ...subComp,
+        pieces: subComp.pieces
+          .filter(piece => piece.name.trim() !== '')
+          .map(piece => ({
+            name: piece.name,
+            customFields: piece.customFields.filter(field => field.name.trim() !== '')
+          })),
+        customFields: subComp.customFields.filter(field => field.name.trim() !== ''),
+        subComponents: subComp.subComponents.map(subSubComp => ({
+          ...subSubComp,
+          pieces: subSubComp.pieces
+            .filter(piece => piece.name.trim() !== '')
+            .map(piece => ({
+              name: piece.name,
+              customFields: piece.customFields.filter(field => field.name.trim() !== '')
+            })),
+          customFields: subSubComp.customFields.filter(field => field.name.trim() !== '')
+        }))
+      }))
+    }))
+
+  // Clean up machine pieces (remove empty ones and clean custom fields)
+  const cleanMachinePieces = newType.machinePieces
+    .filter(piece => piece.name.trim() !== '')
+    .map(piece => ({
+      name: piece.name,
+      customFields: piece.customFields.filter(field => field.name.trim() !== '')
+    }))
+
+  // Clean up custom fields (remove empty ones)
+  const cleanCustomFields = newType.customFields.filter(field => field.name.trim() !== '')
+
+  const typeToAdd = {
+    name: newType.name,
+    category: newType.category,
+    description: newType.description,
+    maintenanceFrequency: newType.maintenanceFrequency,
+    components: cleanComponents,
+    machinePieces: cleanMachinePieces,
+    customFields: cleanCustomFields
+  }
+
+  const result = await createMachineType(typeToAdd)
+  
+  if (result.success) {
+    // Add to recent types
+    recentTypes.value = machineTypes.value.slice(-3).reverse()
+    
+    // Reset form
+    resetForm()
+  }
+}
+
+// Load machine types on mount
+onMounted(async () => {
+  await loadMachineTypes()
+  recentTypes.value = machineTypes.value.slice(-3).reverse()
+})
+</script> 
\ No newline at end of file
diff --git a/app/pages/index.vue b/app/pages/index.vue
new file mode 100644
index 0000000..e0fb70d
--- /dev/null
+++ b/app/pages/index.vue
@@ -0,0 +1,535 @@
+<template>
+  <main class="container mx-auto px-6 py-8">
+    <!-- Hero Section -->
+    <div class="hero min-h-[30vh] bg-gradient-to-r from-primary to-secondary">
+      <div class="hero-content text-center text-neutral-content">
+        <div class="max-w-md">
+          <h1 class="mb-5 text-4xl font-bold">Dashboard Inventaire</h1>
+          <p class="mb-5">
+            Vue hiérarchique de vos sites et machines industrielles.
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <!-- Hierarchical View -->
+    <div class="my-8">
+      <!-- Header with Stats -->
+      <div class="flex justify-between items-center mb-6">
+        <div>
+          <h2 class="text-2xl font-bold text-gray-800">Vue Hiérarchique</h2>
+          <p class="text-gray-600">Machines organisées par site</p>
+        </div>
+        <div class="stats shadow">
+          <div class="stat">
+            <div class="stat-title">Sites</div>
+            <div class="stat-value text-primary">{{ sites.length }}</div>
+          </div>
+          <div class="stat">
+            <div class="stat-title">Machines</div>
+            <div class="stat-value text-secondary">{{ totalMachines }}</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Filters -->
+      <div class="card bg-base-100 shadow-lg mb-6">
+        <div class="card-body">
+          <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <div class="form-control">
+              <label class="label">
+                <span class="label-text">Rechercher</span>
+              </label>
+              <input 
+                v-model="searchTerm" 
+                type="text" 
+                placeholder="Nom de machine ou site..." 
+                class="input input-bordered"
+              />
+            </div>
+            <div class="form-control">
+              <label class="label">
+                <span class="label-text">Type de machine</span>
+              </label>
+              <select v-model="selectedType" class="select select-bordered">
+                <option value="">Tous les types</option>
+                <option v-for="type in machineTypes" :key="type.id" :value="type.id">
+                  {{ type.name }}
+                </option>
+              </select>
+            </div>
+            <div class="form-control">
+              <label class="label">
+                <span class="label-text">Catégorie</span>
+              </label>
+              <select v-model="selectedCategory" class="select select-bordered">
+                <option value="">Toutes les catégories</option>
+                <option v-for="category in categories" :key="category" :value="category">
+                  {{ category }}
+                </option>
+              </select>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Loading State -->
+      <div v-if="loading" class="flex justify-center items-center py-12">
+        <span class="loading loading-spinner loading-lg"></span>
+      </div>
+
+      <!-- Hierarchical Machines View -->
+      <div v-else-if="filteredSites.length === 0" class="text-center py-12">
+        <div class="max-w-md mx-auto">
+          <svg class="w-16 h-16 mx-auto text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path>
+          </svg>
+          <h3 class="text-lg font-medium text-gray-900 mb-2">Aucune machine trouvée</h3>
+          <p class="text-gray-500 mb-4">Commencez par ajouter des sites et des machines.</p>
+          <div class="flex gap-2 justify-center">
+            <button @click="showAddSiteModal = true" class="btn btn-primary">
+              Ajouter un site
+            </button>
+            <button @click="showAddMachineModal = true" class="btn btn-secondary">
+              Ajouter une machine
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div v-else class="space-y-6">
+        <div 
+          v-for="site in filteredSites" 
+          :key="site.id"
+          class="card bg-base-100 shadow-lg"
+        >
+          <!-- Site Header -->
+          <div class="card-body">
+            <div class="flex items-center justify-between mb-4">
+              <div class="flex items-center gap-3">
+                <div class="avatar placeholder">
+                  <div class="bg-primary text-primary-content rounded-lg w-12">
+                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
+                    </svg>
+                  </div>
+                </div>
+                <div>
+                  <h3 class="text-xl font-bold">{{ site.name }}</h3>
+                  <p v-if="site.description" class="text-sm text-gray-600">{{ site.description }}</p>
+                </div>
+              </div>
+              <div class="flex items-center gap-2">
+                <div class="badge badge-primary badge-lg">{{ site.machines?.length || 0 }} machines</div>
+                <button @click="toggleSiteCollapse(site.id)" class="btn btn-ghost btn-sm">
+                  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+                  </svg>
+                </button>
+              </div>
+            </div>
+
+            <!-- Machines List -->
+            <div v-if="!collapsedSites.includes(site.id) && site.machines && site.machines.length > 0" class="space-y-3">
+              <div class="divider"></div>
+              <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                <div 
+                  v-for="machine in site.machines" 
+                  :key="machine.id"
+                  class="card bg-base-200 hover:bg-base-300 transition-colors cursor-pointer"
+                  @click="viewMachineDetails(machine)"
+                >
+                  <div class="card-body p-4">
+                    <div class="flex items-center justify-between mb-2">
+                      <h4 class="font-semibold text-sm">{{ machine.name }}</h4>
+                      <div class="badge badge-sm" :class="getCategoryBadgeClass(machine.typeMachine?.category)">
+                        {{ machine.typeMachine?.category || 'N/A' }}
+                      </div>
+                    </div>
+                    
+                    <div class="space-y-1 text-xs text-gray-600">
+                      <div class="flex items-center gap-1">
+                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path>
+                        </svg>
+                        <span>{{ machine.typeMachine?.name || 'Type inconnu' }}</span>
+                      </div>
+                      
+                      <div v-if="machine.reference" class="flex items-center gap-1">
+                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
+                        </svg>
+                        <span>{{ machine.reference }}</span>
+                      </div>
+                      
+                      <div v-if="machine.emplacement" class="flex items-center gap-1">
+                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
+                        </svg>
+                        <span>{{ machine.emplacement }}</span>
+                      </div>
+                    </div>
+                    
+                    <div class="card-actions justify-end mt-3">
+                      <button class="btn btn-xs btn-outline" @click.stop="editMachine(machine)">
+                        Modifier
+                      </button>
+                      <button class="btn btn-xs btn-error" @click.stop="confirmDeleteMachine(machine)">
+                        Supprimer
+                      </button>
+                      <NuxtLink :to="`/machine/${machine.id}`" class="btn btn-xs btn-primary">
+                        Détails
+                      </NuxtLink>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Empty Site State -->
+            <div v-else-if="!collapsedSites.includes(site.id) && (!site.machines || site.machines.length === 0)" class="text-center py-6">
+              <div class="text-gray-400 mb-2">
+                <svg class="w-8 h-8 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path>
+                </svg>
+              </div>
+              <p class="text-sm text-gray-500 mb-3">Aucune machine dans ce site</p>
+              <button @click="addMachineToSite(site)" class="btn btn-sm btn-primary">
+                Ajouter une machine
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Add Site Modal -->
+    <div v-if="showAddSiteModal" class="modal modal-open">
+      <div class="modal-box">
+        <h3 class="font-bold text-lg mb-4">Ajouter un nouveau site</h3>
+        <form @submit.prevent="handleCreateSite">
+          <div class="form-control">
+            <label class="label">
+              <span class="label-text">Nom du site</span>
+            </label>
+            <input 
+              v-model="newSite.name" 
+              type="text" 
+              placeholder="Ex: Usine de production" 
+              class="input input-bordered" 
+              required
+            />
+          </div>
+          <div class="form-control">
+            <label class="label">
+              <span class="label-text">Description</span>
+            </label>
+            <textarea 
+              v-model="newSite.description" 
+              placeholder="Description du site..." 
+              class="textarea textarea-bordered h-20"
+            ></textarea>
+          </div>
+          <div class="modal-action">
+            <button type="button" @click="showAddSiteModal = false" class="btn btn-outline">
+              Annuler
+            </button>
+            <button type="submit" class="btn btn-primary">
+              Créer le site
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+
+    <!-- Add Machine Modal -->
+    <div v-if="showAddMachineModal" class="modal modal-open">
+      <div class="modal-box max-w-2xl">
+        <h3 class="font-bold text-lg mb-4">Ajouter une nouvelle machine</h3>
+        <form @submit.prevent="handleCreateMachine">
+          <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="newMachine.name" 
+                type="text" 
+                placeholder="Ex: Presse hydraulique #1" 
+                class="input input-bordered" 
+                required
+              />
+            </div>
+            
+            <div class="form-control">
+              <label class="label">
+                <span class="label-text">Site</span>
+              </label>
+              <select v-model="newMachine.siteId" class="select select-bordered" required>
+                <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="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+            <div class="form-control">
+              <label class="label">
+                <span class="label-text">Type de machine</span>
+              </label>
+              <select v-model="newMachine.typeMachineId" class="select select-bordered" required>
+                <option value="">Sélectionner un type</option>
+                <option v-for="type in machineTypes" :key="type.id" :value="type.id">
+                  {{ type.name }} ({{ type.category }})
+                </option>
+              </select>
+            </div>
+
+            <div class="form-control">
+              <label class="label">
+                <span class="label-text">Référence</span>
+              </label>
+              <input 
+                v-model="newMachine.reference" 
+                type="text" 
+                placeholder="Ex: PRESS-001" 
+                class="input input-bordered"
+              />
+            </div>
+          </div>
+
+          <div class="form-control mb-4">
+            <label class="label">
+              <span class="label-text">Emplacement</span>
+            </label>
+            <input 
+              v-model="newMachine.emplacement" 
+              type="text" 
+              placeholder="Ex: Atelier A, Zone 1" 
+              class="input input-bordered"
+            />
+          </div>
+
+          <!-- Type Preview -->
+          <div v-if="selectedMachineType" class="mb-4 p-4 bg-gray-50 rounded-lg">
+            <h4 class="font-semibold text-sm mb-2">Structure du type sélectionné :</h4>
+            <div class="text-xs space-y-1">
+              <div class="flex items-center gap-2">
+                <span class="font-medium">Composants :</span>
+                <span class="badge badge-sm">{{ selectedMachineType.components?.length || 0 }}</span>
+              </div>
+              <div class="flex items-center gap-2">
+                <span class="font-medium">Pièces critiques :</span>
+                <span class="badge badge-sm">{{ selectedMachineType.criticalParts?.length || 0 }}</span>
+              </div>
+              <div class="flex items-center gap-2">
+                <span class="font-medium">Catégorie :</span>
+                <span class="badge badge-outline badge-sm">{{ selectedMachineType.category }}</span>
+              </div>
+            </div>
+          </div>
+
+          <div class="modal-action">
+            <button type="button" @click="showAddMachineModal = false" class="btn btn-outline">
+              Annuler
+            </button>
+            <button type="submit" class="btn btn-primary">
+              Créer la machine
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted, computed } from 'vue'
+import { useSites } from '~/composables/useSites'
+import { useMachineTypesApi } from '~/composables/useMachineTypesApi'
+import { useMachines } from '~/composables/useMachines'
+import { useToast } from '~/composables/useToast'
+
+const { sites, loading, loadSites, createSite } = useSites()
+const { machineTypes, loadMachineTypes } = useMachineTypesApi()
+const { createMachineFromType, deleteMachine } = useMachines()
+
+// Data
+const showAddSiteModal = ref(false)
+const showAddMachineModal = ref(false)
+const searchTerm = ref('')
+const selectedType = ref('')
+const selectedCategory = ref('')
+const collapsedSites = ref([])
+
+const newSite = reactive({
+  name: '',
+  description: ''
+})
+
+const newMachine = reactive({
+  name: '',
+  siteId: '',
+  typeMachineId: '',
+  reference: '',
+  emplacement: ''
+})
+
+// Computed
+const selectedMachineType = computed(() => {
+  if (!newMachine.typeMachineId) return null
+  return machineTypes.value.find(type => type.id === newMachine.typeMachineId)
+})
+
+const categories = computed(() => {
+  const cats = new Set()
+  machineTypes.value.forEach(type => {
+    if (type.category) cats.add(type.category)
+  })
+  return Array.from(cats)
+})
+
+const totalMachines = computed(() => {
+  return sites.value.reduce((total, site) => {
+    return total + (site.machines?.length || 0)
+  }, 0)
+})
+
+const filteredSites = computed(() => {
+  let filtered = sites.value
+
+  // Filtrer par terme de recherche
+  if (searchTerm.value) {
+    filtered = filtered.filter(site => {
+      const siteMatches = site.name.toLowerCase().includes(searchTerm.value.toLowerCase()) ||
+                         site.description?.toLowerCase().includes(searchTerm.value.toLowerCase())
+      
+      const machineMatches = site.machines?.some(machine => 
+        machine.name.toLowerCase().includes(searchTerm.value.toLowerCase()) ||
+        machine.reference?.toLowerCase().includes(searchTerm.value.toLowerCase())
+      )
+      
+      return siteMatches || machineMatches
+    })
+  }
+
+  // Filtrer par type de machine
+  if (selectedType.value) {
+    filtered = filtered.map(site => ({
+      ...site,
+      machines: site.machines?.filter(machine => machine.typeMachineId === selectedType.value) || []
+    })).filter(site => site.machines.length > 0)
+  }
+
+  // Filtrer par catégorie
+  if (selectedCategory.value) {
+    filtered = filtered.map(site => ({
+      ...site,
+      machines: site.machines?.filter(machine => machine.typeMachine?.category === selectedCategory.value) || []
+    })).filter(site => site.machines.length > 0)
+  }
+
+  return filtered
+})
+
+// Methods
+const handleCreateSite = async () => {
+  const result = await createSite(newSite)
+  if (result.success) {
+    showAddSiteModal.value = false
+    
+    // Reset form
+    newSite.name = ''
+    newSite.description = ''
+  }
+}
+
+const handleCreateMachine = async () => {
+  if (!selectedMachineType.value) {
+    console.error('Aucun type de machine sélectionné')
+    return
+  }
+
+  const machineData = {
+    name: newMachine.name,
+    siteId: newMachine.siteId,
+    reference: newMachine.reference,
+    emplacement: newMachine.emplacement
+  }
+
+  const result = await createMachineFromType(machineData, selectedMachineType.value)
+  
+  if (result.success) {
+    // Reset form
+    newMachine.name = ''
+    newMachine.siteId = ''
+    newMachine.typeMachineId = ''
+    newMachine.reference = ''
+    newMachine.emplacement = ''
+    showAddMachineModal.value = false
+  }
+}
+
+const toggleSiteCollapse = (siteId) => {
+  const index = collapsedSites.value.indexOf(siteId)
+  if (index > -1) {
+    collapsedSites.value.splice(index, 1)
+  } else {
+    collapsedSites.value.push(siteId)
+  }
+}
+
+const viewMachineDetails = (machine) => {
+  // Navigation vers la page de détails de la machine
+  navigateTo(`/machine/${machine.id}`)
+}
+
+const editMachine = (machine) => {
+  // Rediriger vers la page d'édition de la machine
+  navigateTo(`/machine/${machine.id}?edit=true`)
+}
+
+const confirmDeleteMachine = async (machine) => {
+  const { showError, showSuccess } = useToast()
+  
+  if (confirm(`Êtes-vous sûr de vouloir supprimer la machine "${machine.name}" ? Cette action est irréversible.`)) {
+    try {
+      const result = await deleteMachine(machine.id)
+      if (result.success) {
+        showSuccess(`Machine "${machine.name}" supprimée avec succès`)
+      } else {
+        showError(`Erreur lors de la suppression: ${result.error}`)
+      }
+    } catch (error) {
+      showError(`Erreur lors de la suppression: ${error.message}`)
+    }
+  }
+}
+
+const addMachineToSite = (site) => {
+  newMachine.siteId = site.id
+  showAddMachineModal.value = true
+}
+
+const getCategoryBadgeClass = (category) => {
+  const classes = {
+    'Production': 'badge-primary',
+    'Transformation': 'badge-secondary',
+    'Manutention': 'badge-accent',
+    'Traitement': 'badge-info',
+    'Contrôle': 'badge-warning'
+  }
+  return classes[category] || 'badge-neutral'
+}
+
+// Lifecycle
+onMounted(async () => {
+  await Promise.all([
+    loadSites(),
+    loadMachineTypes()
+  ])
+})
+</script> 
\ No newline at end of file
diff --git a/app/pages/machines.vue b/app/pages/machines.vue
new file mode 100644
index 0000000..40db60d
--- /dev/null
+++ b/app/pages/machines.vue
@@ -0,0 +1,379 @@
+<template>
+  <main class="container mx-auto px-6 py-8">
+    <!-- Hero Section -->
+    <div class="hero min-h-[30vh] bg-gradient-to-r from-primary to-secondary">
+      <div class="hero-content text-center text-neutral-content">
+        <div class="max-w-md">
+          <h1 class="mb-5 text-4xl font-bold">Gestion des Machines</h1>
+          <p class="mb-5">
+            Gérez vos machines industrielles par site et par type.
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <!-- Machines Management -->
+    <div class="my-8">
+      <!-- Header with Add Button -->
+      <div class="flex justify-between items-center mb-6">
+        <h2 class="text-2xl font-bold">Machines</h2>
+        <button @click="showAddMachineModal = true" class="btn btn-primary">
+          <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
+          </svg>
+          Ajouter une machine
+        </button>
+      </div>
+
+      <!-- Filters -->
+      <div class="card bg-base-100 shadow-lg mb-6">
+        <div class="card-body">
+          <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <div class="form-control">
+              <label class="label">
+                <span class="label-text">Site</span>
+              </label>
+              <select v-model="selectedSite" class="select select-bordered">
+                <option value="">Tous les sites</option>
+                <option v-for="site in sites" :key="site.id" :value="site.id">
+                  {{ site.name }}
+                </option>
+              </select>
+            </div>
+            <div class="form-control">
+              <label class="label">
+                <span class="label-text">Type de machine</span>
+              </label>
+              <select v-model="selectedType" class="select select-bordered">
+                <option value="">Tous les types</option>
+                <option v-for="type in machineTypes" :key="type.id" :value="type.id">
+                  {{ type.name }}
+                </option>
+              </select>
+            </div>
+            <div class="form-control">
+              <label class="label">
+                <span class="label-text">Catégorie</span>
+              </label>
+              <select v-model="selectedCategory" class="select select-bordered">
+                <option value="">Toutes les catégories</option>
+                <option v-for="category in categories" :key="category" :value="category">
+                  {{ category }}
+                </option>
+              </select>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Machines Grid -->
+      <div v-if="loading" class="flex justify-center items-center py-12">
+        <span class="loading loading-spinner loading-lg"></span>
+      </div>
+
+      <div v-else-if="filteredMachines.length === 0" class="text-center py-12">
+        <div class="max-w-md mx-auto">
+          <svg class="w-16 h-16 mx-auto text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path>
+          </svg>
+          <h3 class="text-lg font-medium text-gray-900 mb-2">Aucune machine trouvée</h3>
+          <p class="text-gray-500 mb-4">Commencez par ajouter votre première machine.</p>
+          <button @click="showAddMachineModal = true" class="btn btn-primary">
+            Ajouter une machine
+          </button>
+        </div>
+      </div>
+
+      <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        <div 
+          v-for="machine in filteredMachines" 
+          :key="machine.id"
+          class="card bg-base-100 shadow-lg hover:shadow-xl transition-shadow cursor-pointer"
+          @click="viewMachineDetails(machine)"
+        >
+          <div class="card-body">
+            <div class="flex items-center justify-between mb-2">
+              <h3 class="card-title text-lg">{{ machine.name }}</h3>
+              <div class="badge badge-primary badge-sm">{{ machine.typeMachine?.category || 'N/A' }}</div>
+            </div>
+            
+            <p class="text-sm text-gray-600 mb-3">{{ machine.description || machine.typeMachine?.description }}</p>
+            
+            <div class="space-y-2 text-sm">
+              <div class="flex items-center gap-2">
+                <svg class="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
+                </svg>
+                <span class="text-gray-600">{{ machine.site?.name || 'Site inconnu' }}</span>
+              </div>
+              
+              <div class="flex items-center gap-2">
+                <svg class="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path>
+                </svg>
+                <span class="text-gray-600">{{ machine.typeMachine?.name || 'Type inconnu' }}</span>
+              </div>
+              
+              <div v-if="machine.reference" class="flex items-center gap-2">
+                <svg class="w-4 h-4 text-orange-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
+                </svg>
+                <span class="text-gray-600">{{ machine.reference }}</span>
+              </div>
+              
+              <div v-if="machine.emplacement" class="flex items-center gap-2">
+                <svg class="w-4 h-4 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
+                </svg>
+                <span class="text-gray-600">{{ machine.emplacement }}</span>
+              </div>
+            </div>
+            
+            <div class="card-actions justify-end mt-4">
+              <button class="btn btn-sm btn-outline" @click.stop="editMachine(machine)">
+                Modifier
+              </button>
+              <button class="btn btn-sm btn-error" @click.stop="confirmDeleteMachine(machine)">
+                Supprimer
+              </button>
+              <NuxtLink :to="`/machine/${machine.id}`" class="btn btn-sm btn-primary">
+                Voir détails
+              </NuxtLink>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Add Machine Modal -->
+    <div v-if="showAddMachineModal" class="modal modal-open">
+      <div class="modal-box max-w-2xl">
+        <h3 class="font-bold text-lg mb-4">Ajouter une nouvelle machine</h3>
+        <form @submit.prevent="handleCreateMachine">
+          <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="newMachine.name" 
+                type="text" 
+                placeholder="Ex: Presse hydraulique #1" 
+                class="input input-bordered" 
+                required
+              />
+            </div>
+            
+            <div class="form-control">
+              <label class="label">
+                <span class="label-text">Site</span>
+              </label>
+              <select v-model="newMachine.siteId" class="select select-bordered" required>
+                <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="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+            <div class="form-control">
+              <label class="label">
+                <span class="label-text">Type de machine</span>
+              </label>
+              <select v-model="newMachine.typeMachineId" class="select select-bordered" required>
+                <option value="">Sélectionner un type</option>
+                <option v-for="type in machineTypes" :key="type.id" :value="type.id">
+                  {{ type.name }} ({{ type.category }})
+                </option>
+              </select>
+            </div>
+
+            <div class="form-control">
+              <label class="label">
+                <span class="label-text">Référence</span>
+              </label>
+              <input 
+                v-model="newMachine.reference" 
+                type="text" 
+                placeholder="Ex: PRESS-001" 
+                class="input input-bordered"
+              />
+            </div>
+          </div>
+
+          <div class="form-control mb-4">
+            <label class="label">
+              <span class="label-text">Emplacement</span>
+            </label>
+            <input 
+              v-model="newMachine.emplacement" 
+              type="text" 
+              placeholder="Ex: Atelier A, Zone 1" 
+              class="input input-bordered"
+            />
+          </div>
+
+          <!-- Type Preview -->
+          <div v-if="selectedMachineType" class="mb-4 p-4 bg-gray-50 rounded-lg">
+            <h4 class="font-semibold text-sm mb-2">Structure du type sélectionné :</h4>
+            <div class="text-xs space-y-1">
+              <div class="flex items-center gap-2">
+                <span class="font-medium">Composants :</span>
+                <span class="badge badge-sm">{{ selectedMachineType.components?.length || 0 }}</span>
+              </div>
+              <div class="flex items-center gap-2">
+                <span class="font-medium">Pièces critiques :</span>
+                <span class="badge badge-sm">{{ selectedMachineType.criticalParts?.length || 0 }}</span>
+              </div>
+              <div class="flex items-center gap-2">
+                <span class="font-medium">Catégorie :</span>
+                <span class="badge badge-outline badge-sm">{{ selectedMachineType.category }}</span>
+              </div>
+            </div>
+          </div>
+
+          <div class="modal-action">
+            <button type="button" @click="showAddMachineModal = false" class="btn btn-outline">
+              Annuler
+            </button>
+            <button type="submit" class="btn btn-primary">
+              Créer la machine
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted, computed } from 'vue'
+import { useMachines } from '~/composables/useMachines'
+import { useSites } from '~/composables/useSites'
+import { useMachineTypesApi } from '~/composables/useMachineTypesApi'
+import { useToast } from '~/composables/useToast'
+
+const { machines, loading, loadMachines, createMachineFromType, deleteMachine } = useMachines()
+const { sites, loadSites } = useSites()
+const { machineTypes, loadMachineTypes } = useMachineTypesApi()
+
+// Data
+const showAddMachineModal = ref(false)
+const selectedSite = ref('')
+const selectedType = ref('')
+const selectedCategory = ref('')
+
+const newMachine = reactive({
+  name: '',
+  siteId: '',
+  typeMachineId: '',
+  reference: '',
+  emplacement: ''
+})
+
+// Computed
+const selectedMachineType = computed(() => {
+  if (!newMachine.typeMachineId) return null
+  return machineTypes.value.find(type => type.id === newMachine.typeMachineId)
+})
+
+const categories = computed(() => {
+  const cats = new Set()
+  machineTypes.value.forEach(type => {
+    if (type.category) cats.add(type.category)
+  })
+  return Array.from(cats)
+})
+
+const filteredMachines = computed(() => {
+  let filtered = machines.value
+
+  if (selectedSite.value) {
+    filtered = filtered.filter(machine => machine.siteId === selectedSite.value)
+  }
+
+  if (selectedType.value) {
+    filtered = filtered.filter(machine => machine.typeMachineId === selectedType.value)
+  }
+
+  if (selectedCategory.value) {
+    filtered = filtered.filter(machine => machine.typeMachine?.category === selectedCategory.value)
+  }
+
+  return filtered
+})
+
+// Methods
+const handleCreateMachine = async () => {
+  if (!selectedMachineType.value) {
+    console.error('Aucun type de machine sélectionné')
+    return
+  }
+
+  const machineData = {
+    name: newMachine.name,
+    siteId: newMachine.siteId,
+    reference: newMachine.reference,
+    emplacement: newMachine.emplacement
+  }
+
+  const result = await createMachineFromType(machineData, selectedMachineType.value)
+  
+  if (result.success) {
+    // Reset form
+    newMachine.name = ''
+    newMachine.siteId = ''
+    newMachine.typeMachineId = ''
+    newMachine.reference = ''
+    newMachine.emplacement = ''
+    showAddMachineModal.value = false
+  }
+}
+
+const viewMachineDetails = (machine) => {
+  // Naviguer vers la page de détails de la machine en mode lecture seule
+  navigateTo(`/machine/${machine.id}`)
+}
+
+const editMachine = (machine) => {
+  // Naviguer vers la page machine en mode édition
+  navigateTo(`/machine/${machine.id}?edit=true`)
+}
+
+const confirmDeleteMachine = async (machine) => {
+  const { showError, showSuccess } = useToast()
+  
+  if (confirm(`Êtes-vous sûr de vouloir supprimer la machine "${machine.name}" ? Cette action est irréversible.`)) {
+    try {
+      const result = await deleteMachine(machine.id)
+      if (result.success) {
+        showSuccess(`Machine "${machine.name}" supprimée avec succès`)
+      } else {
+        showError(`Erreur lors de la suppression: ${result.error}`)
+      }
+    } catch (error) {
+      showError(`Erreur lors de la suppression: ${error.message}`)
+    }
+  }
+}
+
+// Lifecycle
+onMounted(async () => {
+  await Promise.all([
+    loadMachines(),
+    loadSites(),
+    loadMachineTypes()
+  ])
+  
+  // Vérifier si on doit ouvrir automatiquement la modale d'ajout
+  const route = useRoute()
+  if (route.query.add === 'true') {
+    showAddMachineModal.value = true
+    // Nettoyer l'URL
+    await navigateTo('/machines', { replace: true })
+  }
+})
+</script> 
\ No newline at end of file
diff --git a/app/pages/sites.vue b/app/pages/sites.vue
new file mode 100644
index 0000000..d5b1443
--- /dev/null
+++ b/app/pages/sites.vue
@@ -0,0 +1,191 @@
+<template>
+  <main class="container mx-auto px-6 py-8">
+    <!-- Hero Section -->
+    <div class="hero min-h-[30vh] bg-gradient-to-r from-primary to-secondary">
+      <div class="hero-content text-center text-neutral-content">
+        <div class="max-w-md">
+          <h1 class="mb-5 text-4xl font-bold">Gestion des Sites</h1>
+          <p class="mb-5">
+            Gérez vos sites industriels et leurs emplacements.
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <!-- Sites Management -->
+    <div class="my-8">
+      <!-- Header with Add Button -->
+      <div class="flex justify-between items-center mb-6">
+        <h2 class="text-2xl font-bold">Sites</h2>
+        <button @click="showAddSiteModal = true" class="btn btn-primary">
+          <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
+          </svg>
+          Ajouter un site
+        </button>
+      </div>
+
+      <!-- Sites Grid -->
+      <div v-if="loading" class="flex justify-center items-center py-12">
+        <span class="loading loading-spinner loading-lg"></span>
+      </div>
+
+      <div v-else-if="sites.length === 0" class="text-center py-12">
+        <div class="max-w-md mx-auto">
+          <svg class="w-16 h-16 mx-auto text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
+          </svg>
+          <h3 class="text-lg font-medium text-gray-900 mb-2">Aucun site trouvé</h3>
+          <p class="text-gray-500 mb-4">Commencez par ajouter votre premier site.</p>
+          <button @click="showAddSiteModal = true" class="btn btn-primary">
+            Ajouter un site
+          </button>
+        </div>
+      </div>
+
+      <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        <div 
+          v-for="site in sites" 
+          :key="site.id"
+          class="card bg-base-100 shadow-lg hover:shadow-xl transition-shadow"
+        >
+          <div class="card-body">
+            <div class="flex items-center justify-between mb-4">
+              <h3 class="card-title text-lg">{{ site.name }}</h3>
+              <div class="badge badge-primary badge-sm">{{ site.machines?.length || 0 }} machines</div>
+            </div>
+            
+            <p v-if="site.description" class="text-sm text-gray-600 mb-3">{{ site.description }}</p>
+            
+            <div class="space-y-2 text-sm">
+              <div class="flex items-center gap-2">
+                <svg class="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path>
+                </svg>
+                <span class="text-gray-600">{{ site.machines?.length || 0 }} machine(s)</span>
+              </div>
+            </div>
+            
+            <div class="card-actions justify-end mt-4">
+              <button class="btn btn-sm btn-outline" @click="editSite(site)">
+                Modifier
+              </button>
+              <button class="btn btn-sm btn-error" @click="confirmDeleteSite(site)">
+                Supprimer
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Add Site Modal -->
+    <div v-if="showAddSiteModal" class="modal modal-open">
+      <div class="modal-box max-w-md">
+        <h3 class="font-bold text-lg mb-4">Ajouter un nouveau site</h3>
+        <form @submit.prevent="handleCreateSite">
+          <div class="form-control mb-4">
+            <label class="label">
+              <span class="label-text">Nom du site</span>
+            </label>
+            <input 
+              v-model="newSite.name" 
+              type="text" 
+              placeholder="Ex: Usine principale" 
+              class="input input-bordered" 
+              required
+            />
+          </div>
+          
+          <div class="form-control mb-4">
+            <label class="label">
+              <span class="label-text">Description (optionnel)</span>
+            </label>
+            <textarea 
+              v-model="newSite.description" 
+              placeholder="Description du site..." 
+              class="textarea textarea-bordered"
+              rows="3"
+            ></textarea>
+          </div>
+
+          <div class="modal-action">
+            <button type="button" class="btn" @click="showAddSiteModal = false">
+              Annuler
+            </button>
+            <button type="submit" class="btn btn-primary">
+              Créer le site
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import { useSites } from '~/composables/useSites'
+import { useToast } from '~/composables/useToast'
+
+const { sites, loading, loadSites, createSite, updateSite, deleteSite } = useSites()
+
+// Data
+const showAddSiteModal = ref(false)
+
+const newSite = reactive({
+  name: '',
+  description: ''
+})
+
+// Methods
+const handleCreateSite = async () => {
+  const result = await createSite({
+    name: newSite.name,
+    description: newSite.description
+  })
+  
+  if (result.success) {
+    // Reset form
+    newSite.name = ''
+    newSite.description = ''
+    showAddSiteModal.value = false
+  }
+}
+
+const editSite = (site) => {
+  // TODO: Ouvrir le modal d'édition
+  console.log('Modifier le site:', site)
+}
+
+const confirmDeleteSite = async (site) => {
+  const { showError, showSuccess } = useToast()
+  
+  if (confirm(`Êtes-vous sûr de vouloir supprimer le site "${site.name}" ? Cette action est irréversible.`)) {
+    try {
+      const result = await deleteSite(site.id)
+      if (result.success) {
+        showSuccess(`Site "${site.name}" supprimé avec succès`)
+      } else {
+        showError(`Erreur lors de la suppression: ${result.error}`)
+      }
+    } catch (error) {
+      showError(`Erreur lors de la suppression: ${error.message}`)
+    }
+  }
+}
+
+// Lifecycle
+onMounted(async () => {
+  await loadSites()
+  
+  // Vérifier si on doit ouvrir automatiquement la modale d'ajout
+  const route = useRoute()
+  if (route.query.add === 'true') {
+    showAddSiteModal.value = true
+    // Nettoyer l'URL
+    await navigateTo('/sites', { replace: true })
+  }
+})
+</script> 
\ No newline at end of file
diff --git a/app/pages/types.vue b/app/pages/types.vue
new file mode 100644
index 0000000..5ffa991
--- /dev/null
+++ b/app/pages/types.vue
@@ -0,0 +1,147 @@
+<template>
+  <main class="container mx-auto px-6 py-8">
+    <!-- Hero Section -->
+    <div class="hero min-h-[30vh] bg-gradient-to-r from-primary to-secondary">
+      <div class="hero-content text-center text-neutral-content">
+        <div class="max-w-md">
+          <h1 class="mb-5 text-4xl font-bold">Types de Machines</h1>
+          <p class="mb-5">
+            Consultez et gérez les différents types de machines avec leur structure hiérarchique.
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <!-- Machine Types List -->
+    <div class="my-8">
+      <!-- Header with Add Button -->
+      <div class="flex justify-between items-center mb-6">
+        <h2 class="text-2xl font-bold text-gray-800">Types de Machines</h2>
+        <NuxtLink to="/generator" class="btn btn-primary">
+          <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
+          </svg>
+          Créer un type
+        </NuxtLink>
+      </div>
+
+      <!-- Categories Tabs -->
+      <div class="tabs tabs-boxed mb-6">
+        <a 
+          v-for="category in categories" 
+          :key="category"
+          class="tab"
+          :class="{ 'tab-active': selectedCategory === category }"
+          @click="selectedCategory = category"
+        >
+          {{ category }}
+        </a>
+      </div>
+
+      <!-- Machine Types Grid -->
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        <div 
+          v-for="type in filteredTypes" 
+          :key="type.id"
+          class="card bg-base-100 shadow-lg hover:shadow-xl transition-all duration-300 cursor-pointer"
+        >
+          <div class="card-body">
+            <div class="flex items-center justify-between mb-4">
+              <h3 class="card-title text-lg">{{ type.name }}</h3>
+              <div class="badge badge-primary">{{ type.category }}</div>
+            </div>
+            <p class="text-gray-600 mb-4">{{ type.description }}</p>
+            <div class="space-y-2">
+              <div class="flex items-center text-sm text-gray-500">
+                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                </svg>
+                Maintenance: {{ type.maintenanceFrequency }}
+              </div>
+              <div class="flex items-center text-sm text-gray-500">
+                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path>
+                </svg>
+                {{ type.components?.length || 0 }} composants principaux
+              </div>
+              <div class="flex items-center text-sm text-gray-500">
+                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
+                </svg>
+                {{ type.machinePieces?.length || 0 }} pièces totales
+              </div>
+            </div>
+            <div class="card-actions justify-end mt-4">
+              <button class="btn btn-sm btn-error" @click.stop="confirmDeleteType(type)">
+                Supprimer
+              </button>
+              <NuxtLink :to="`/type/${type.id}`" class="btn btn-sm btn-outline">Voir détails</NuxtLink>
+              <button class="btn btn-sm btn-primary">Utiliser</button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Empty State -->
+      <div v-if="filteredTypes.length === 0" class="text-center py-12">
+        <div class="avatar placeholder">
+          <div class="bg-neutral text-neutral-content rounded-full w-16">
+            <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"></path>
+            </svg>
+          </div>
+        </div>
+        <h3 class="text-lg font-semibold text-gray-600 mt-4">Aucun type trouvé</h3>
+        <p class="text-gray-500">Aucun type de machine ne correspond à cette catégorie.</p>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { useMachineTypesApi } from '~/composables/useMachineTypesApi'
+import { useToast } from '~/composables/useToast'
+
+const { machineTypes, loading, loadMachineTypes, deleteMachineType } = useMachineTypesApi()
+
+const categories = ref([
+  'Toutes',
+  'Production',
+  'Transformation', 
+  'Manutention',
+  'Traitement',
+  'Contrôle'
+])
+
+const selectedCategory = ref('Toutes')
+
+const filteredTypes = computed(() => {
+  if (selectedCategory.value === 'Toutes') {
+    return machineTypes.value
+  }
+  return machineTypes.value.filter(type => type.category === selectedCategory.value)
+})
+
+const confirmDeleteType = async (type) => {
+  const { showError, showSuccess } = useToast()
+  
+  if (confirm(`Êtes-vous sûr de vouloir supprimer le type "${type.name}" ? Cette action est irréversible.`)) {
+    try {
+      const result = await deleteMachineType(type.id)
+      if (result.success) {
+        showSuccess(`Type "${type.name}" supprimé avec succès`)
+      } else {
+        showError(`Erreur lors de la suppression: ${result.error}`)
+      }
+    } catch (error) {
+      showError(`Erreur lors de la suppression: ${error.message}`)
+    }
+  }
+}
+
+// Load machine types on mount
+onMounted(async () => {
+  await loadMachineTypes()
+})
+</script> 
\ No newline at end of file