feat: Pages de détail et édition

- type/[id].vue : Page de détail et édition des types de machines
- machine/[id].vue : Page de détail et édition des machines
- Support du mode édition avec paramètre URL ?edit=true
- Gestion des composants hiérarchiques et champs personnalisés
- Interface d'édition en temps réel avec sauvegarde

app/pages/machine/[id].vue

@@ -0,0 +1,646 @@
+<template>
+  <main class="container mx-auto px-6 py-8">
+    <!-- Loading State -->
+    <div v-if="loading" class="flex justify-center items-center py-12">
+      <span class="loading loading-spinner loading-lg"></span>
+    </div>
+
+    <!-- Machine Details -->
+    <div v-else-if="machine" class="space-y-8">
+      <!-- Header with Edit Button -->
+      <div class="flex justify-between items-center">
+        <h1 class="text-3xl font-bold">Détails de la machine</h1>
+        <button 
+          @click="toggleEditMode" 
+          class="btn btn-primary"
+          :class="{ 'btn-outline': isEditMode }"
+        >
+          <svg v-if="!isEditMode" 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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
+          </svg>
+          <svg v-else 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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
+          </svg>
+          {{ isEditMode ? 'Voir détails' : 'Modifier' }}
+        </button>
+      </div>
+
+      <!-- Debug info -->
+      <div v-if="debug" class="bg-yellow-100 p-4 rounded-lg">
+        <p>Debug: Machine trouvée - {{ machine.name }}</p>
+        <p>Components count: {{ components.length }}</p>
+        <p>Pieces count: {{ pieces.length }}</p>
+      </div>
+      
+      <!-- Header -->
+      <div class="hero bg-gradient-to-r from-primary to-secondary min-h-[20vh] rounded-lg">
+        <div class="hero-content text-center text-neutral-content">
+          <div class="max-w-md">
+            <h1 class="mb-5 text-4xl font-bold">{{ machine.name }}</h1>
+            <p class="mb-5">{{ machine.description || machine.typeMachine?.description }}</p>
+            <div class="flex justify-center gap-4">
+              <div class="badge badge-outline">{{ machine.typeMachine?.category || 'N/A' }}</div>
+              <div class="badge badge-outline">{{ machine.site?.name }}</div>
+              <div v-if="machine.reference" class="badge badge-outline">{{ machine.reference }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Machine Info Card -->
+      <div class="card bg-base-100 shadow-lg">
+        <div class="card-body">
+          <h2 class="card-title">Informations de la machine</h2>
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div class="form-control">
+              <label class="label">
+                <span class="label-text">Nom</span>
+              </label>
+              <input 
+                v-if="isEditMode"
+                :id="getMachineFieldId('name')"
+                v-model="machineName" 
+                type="text" 
+                class="input input-bordered"
+                @blur="updateMachineInfo"
+              />
+              <div v-else class="input input-bordered bg-base-200">
+                {{ machineName }}
+              </div>
+            </div>
+            <div class="form-control">
+              <label class="label">
+                <span class="label-text">Référence</span>
+              </label>
+              <input 
+                v-if="isEditMode"
+                :id="getMachineFieldId('reference')"
+                v-model="machineReference" 
+                type="text" 
+                class="input input-bordered"
+                @blur="updateMachineInfo"
+              />
+              <div v-else class="input input-bordered bg-base-200">
+                {{ machineReference || 'Non définie' }}
+              </div>
+            </div>
+            <div class="form-control">
+              <label class="label">
+                <span class="label-text">Emplacement</span>
+              </label>
+              <input 
+                v-if="isEditMode"
+                :id="getMachineFieldId('emplacement')"
+                v-model="machineEmplacement" 
+                type="text" 
+                class="input input-bordered"
+                @blur="updateMachineInfo"
+              />
+              <div v-else class="input input-bordered bg-base-200">
+                {{ machineEmplacement || 'Non défini' }}
+              </div>
+            </div>
+            <div class="form-control">
+              <label class="label">
+                <span class="label-text">Prestataire</span>
+              </label>
+              <input 
+                v-if="isEditMode"
+                :id="getMachineFieldId('prestataire')"
+                v-model="machinePrestataire" 
+                type="text" 
+                class="input input-bordered"
+                @blur="updateMachineInfo"
+              />
+              <div v-else class="input input-bordered bg-base-200">
+                {{ machinePrestataire || 'Non défini' }}
+              </div>
+            </div>
+          </div>
+          
+          <!-- Champs personnalisés de la machine -->
+          <div v-if="machine && machine.customFieldValues && machine.customFieldValues.length > 0" class="mt-6 pt-4 border-t border-gray-200">
+            <h4 class="font-semibold text-gray-700 mb-3">Champs personnalisés de la machine</h4>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div 
+                v-for="fieldValue in machine.customFieldValues" 
+                :key="fieldValue.id"
+                class="form-control"
+              >
+                <label class="label">
+                  <span class="label-text text-sm">{{ fieldValue.customField.name }}</span>
+                  <span v-if="fieldValue.customField.required" class="label-text-alt text-error">*</span>
+                </label>
+                
+                <!-- Mode édition -->
+                <template v-if="isEditMode">
+                  <!-- Champ de type TEXT -->
+                  <input 
+                    v-if="fieldValue.customField.type === 'text'"
+                    :value="fieldValue.value"
+                    @input="setMachineCustomFieldValue(fieldValue.id, $event.target.value)"
+                    type="text"
+                    :placeholder="fieldValue.customField.defaultValue || ''"
+                    class="input input-bordered input-sm"
+                    :required="fieldValue.customField.required"
+                    @blur="updateMachineCustomField(fieldValue.id)"
+                  />
+                  
+                  <!-- Champ de type NUMBER -->
+                  <input 
+                    v-else-if="fieldValue.customField.type === 'number'"
+                    :value="fieldValue.value"
+                    @input="setMachineCustomFieldValue(fieldValue.id, $event.target.value)"
+                    type="number"
+                    :placeholder="fieldValue.customField.defaultValue || ''"
+                    class="input input-bordered input-sm"
+                    :required="fieldValue.customField.required"
+                    @blur="updateMachineCustomField(fieldValue.id)"
+                  />
+                  
+                  <!-- Champ de type SELECT -->
+                  <select 
+                    v-else-if="fieldValue.customField.type === 'select'"
+                    :value="fieldValue.value"
+                    @change="setMachineCustomFieldValue(fieldValue.id, $event.target.value)"
+                    class="select select-bordered select-sm"
+                    :required="fieldValue.customField.required"
+                    @blur="updateMachineCustomField(fieldValue.id)"
+                  >
+                    <option value="">{{ fieldValue.customField.defaultValue || 'Sélectionner...' }}</option>
+                    <option 
+                      v-for="option in fieldValue.customField.options" 
+                      :key="option" 
+                      :value="option"
+                    >
+                      {{ option }}
+                    </option>
+                  </select>
+                  
+                  <!-- Champ de type BOOLEAN -->
+                  <div v-else-if="fieldValue.customField.type === 'boolean'" class="flex items-center gap-2">
+                    <input 
+                      :value="fieldValue.value"
+                      @change="setMachineCustomFieldValue(fieldValue.id, $event.target.checked ? 'true' : 'false')"
+                      type="checkbox"
+                      class="checkbox checkbox-sm"
+                      :checked="fieldValue.value === 'true'"
+                      @blur="updateMachineCustomField(fieldValue.id)"
+                    />
+                    <span class="text-sm">{{ fieldValue.value === 'true' ? 'Oui' : 'Non' }}</span>
+                  </div>
+                  
+                  <!-- Champ de type DATE -->
+                  <input 
+                    v-else-if="fieldValue.customField.type === 'date'"
+                    :value="fieldValue.value"
+                    @input="setMachineCustomFieldValue(fieldValue.id, $event.target.value)"
+                    type="date"
+                    :placeholder="fieldValue.customField.defaultValue || ''"
+                    class="input input-bordered input-sm"
+                    :required="fieldValue.customField.required"
+                    @blur="updateMachineCustomField(fieldValue.id)"
+                  />
+                </template>
+                
+                <!-- Mode lecture seule -->
+                <template v-else>
+                  <div class="input input-bordered input-sm bg-base-200">
+                    {{ fieldValue.value || fieldValue.customField.defaultValue || 'Non défini' }}
+                  </div>
+                </template>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Components Section -->
+      <div class="card bg-base-100 shadow-lg">
+        <div class="card-body">
+          <div class="flex justify-between items-center mb-4">
+            <h2 class="card-title">Composants</h2>
+          </div>
+
+          <!-- Components Tree -->
+          <ComponentHierarchy 
+            :components="components"
+            :is-edit-mode="isEditMode"
+            @update="updateComponent"
+            @edit-piece="updatePieceFromComponent"
+          />
+        </div>
+      </div>
+
+      <!-- Machine Pieces Section -->
+      <div class="card bg-base-100 shadow-lg">
+        <div class="card-body">
+          <div class="flex justify-between items-center mb-4">
+            <h2 class="card-title">Pièces de la machine</h2>
+          </div>
+
+          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            <PieceItem 
+              v-for="piece in machinePieces" 
+              :key="piece.id"
+              :piece="piece"
+              :is-edit-mode="isEditMode"
+              @update="updatePieceInfo"
+              @edit="editPiece"
+              @custom-field-update="updatePieceCustomField"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Error State -->
+    <div v-else 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="M9.172 16.172a4 4 0 015.656 0M9 12h6m-6-4h6m2 5.291A7.962 7.962 0 0112 15c-2.34 0-4.47-.881-6.08-2.33"></path>
+        </svg>
+        <h3 class="text-lg font-medium text-gray-900 mb-2">Machine non trouvée</h3>
+        <p class="text-gray-500 mb-4">La machine avec l'ID "{{ machineId }}" n'existe pas ou a été supprimée.</p>
+        <NuxtLink to="/machines" class="btn btn-primary">
+          Retour aux machines
+        </NuxtLink>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted, computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { useMachines } from '~/composables/useMachines'
+import { useComposants } from '~/composables/useComposants'
+import { usePieces } from '~/composables/usePieces'
+import { useCustomFields } from '~/composables/useCustomFields'
+import { useApi } from '~/composables/useApi'
+import { useToast } from '~/composables/useToast'
+import ComponentHierarchy from '~/components/ComponentHierarchy.vue'
+
+const route = useRoute()
+const machineId = route.params.id
+
+// Vérifier que l'ID est valide
+if (!machineId) {
+  console.error('ID de machine manquant')
+}
+
+// Composables
+const { updateMachine: updateMachineApi } = useMachines()
+const { 
+  getComposantsByMachine, 
+  updateComposant: updateComposantApi 
+} = useComposants()
+const { 
+  getPiecesByMachine, 
+  updatePiece: updatePieceApi 
+} = usePieces()
+
+const { upsertCustomFieldValue } = useCustomFields()
+
+// Data
+const loading = ref(true)
+const machine = ref(null)
+const components = ref([])
+const pieces = ref([])
+
+// Champs de la machine
+const machineName = ref('')
+const machineReference = ref('')
+const machineEmplacement = ref('')
+const machinePrestataire = ref('')
+
+// Valeurs des champs personnalisés de la machine
+const machineCustomFieldValues = reactive({})
+
+// Mode d'édition
+const isEditMode = ref(false)
+const debug = ref(false) // Ajout de debug pour afficher les infos de debug
+
+// Méthodes pour initialiser les champs
+const initMachineFields = () => {
+  if (machine.value) {
+    machineName.value = machine.value.name || ''
+    machineReference.value = machine.value.reference || ''
+    machineEmplacement.value = machine.value.emplacement || ''
+    machinePrestataire.value = machine.value.prestataire || ''
+  }
+}
+
+// Fonctions pour générer des IDs uniques
+const getMachineFieldId = (fieldName) => {
+  return machine.value ? `machine-${fieldName}-${machine.value.id}` : `machine-${fieldName}`
+}
+
+// Computed
+const machinePieces = computed(() => {
+  const filteredPieces = pieces.value.filter(piece => !piece.composantId)
+  console.log('machinePieces computed:', filteredPieces)
+  return filteredPieces
+})
+
+const allComponents = computed(() => {
+  return components.value
+})
+
+const subComponents = (parentId) => {
+  return components.value.filter(comp => comp.parentComposantId === parentId)
+}
+
+const componentPieces = (composantId) => {
+  return pieces.value.filter(piece => piece.composantId === composantId)
+}
+
+// Transform custom field values to custom fields format
+const transformCustomFields = (pieces) => {
+  return pieces.map(piece => {
+    const customFields = piece.customFieldValues?.map(cfv => ({
+      id: cfv.customField.id,
+      name: cfv.customField.name,
+      type: cfv.customField.type,
+      required: cfv.customField.required,
+      defaultValue: cfv.customField.defaultValue,
+      options: cfv.customField.options || [],
+      value: cfv.value
+    })) || []
+    
+    return {
+      ...piece,
+      customFields
+    }
+  })
+}
+
+// Transform custom fields for components (now handles nested structure)
+const transformComponentCustomFields = (componentsData) => {
+  console.log('transformComponentCustomFields called with:', componentsData)
+  
+  return componentsData.map(component => {
+    console.log('Processing component:', component.name, 'with sousComposants:', component.sousComposants?.length || 0)
+    
+    // Transform custom fields for the current component
+    const customFields = component.customFieldValues?.map(cfv => ({
+      id: cfv.customField.id,
+      name: cfv.customField.name,
+      type: cfv.customField.type,
+      required: cfv.customField.required,
+      defaultValue: cfv.customField.defaultValue,
+      options: cfv.customField.options || [],
+      value: cfv.value
+    })) || [];
+    
+    // Transform pieces for the current component
+    const pieces = component.pieces ? transformCustomFields(component.pieces) : [];
+    
+    // Recursively transform sub-components (using 'sousComposants' from backend)
+    const subComponents = component.sousComposants ? transformComponentCustomFields(component.sousComposants) : [];
+    
+    const result = {
+      ...component,
+      customFields, // Use customFields for frontend display
+      pieces,
+      subComponents // Use the transformed sousComposants as subComponents
+    };
+    
+    console.log('Transformed component:', result.name, 'with subComponents:', result.subComponents?.length || 0)
+    return result;
+  });
+};
+
+// Methods
+const loadMachineData = async () => {
+  loading.value = true
+  try {
+    console.log('Début du chargement des données pour machineId:', machineId)
+    
+    // Load specific machine directly from API
+    const { apiCall } = useApi()
+    console.log('Appel API pour machine:', machineId)
+    const machineResult = await apiCall(`/machines/${machineId}`, { method: 'GET' })
+    console.log('Résultat machine complet:', machineResult)
+    console.log('machineResult.success:', machineResult.success)
+    console.log('machineResult.data:', machineResult.data)
+    console.log('machineResult.error:', machineResult.error)
+    console.log('Machine customFieldValues:', machineResult.data?.customFieldValues)
+    console.log('Nombre de champs personnalisés:', machineResult.data?.customFieldValues?.length)
+    
+    if (machineResult.success) {
+      machine.value = machineResult.data
+      console.log('Machine trouvée et assignée:', machine.value)
+    } else {
+      console.error('Machine non trouvée:', machineId)
+      console.error('Erreur API:', machineResult.error)
+      loading.value = false
+      return
+    }
+    
+    // Initialize machine fields
+    initMachineFields()
+    console.log('Champs machine initialisés')
+    console.log('Machine après initialisation:', machine.value)
+    console.log('Machine name:', machineName.value)
+    console.log('Machine reference:', machineReference.value)
+    
+    // Load components with hierarchy
+    console.log('Chargement des composants avec hiérarchie...')
+    const componentsResult = await apiCall(`/composants/hierarchy/${machineId}`, { method: 'GET' })
+    console.log('Résultat composants:', componentsResult)
+    console.log('Structure des données reçues:', JSON.stringify(componentsResult.data, null, 2))
+    if (componentsResult.success) {
+      console.log('Transformation des composants...')
+      components.value = transformComponentCustomFields(componentsResult.data)
+      console.log('Composants chargés:', components.value.length)
+      console.log('Composants transformés:', components.value)
+      
+      // Debug: afficher la hiérarchie
+      console.log('=== HIÉRARCHIE DES COMPOSANTS ===')
+      components.value.forEach(comp => {
+        console.log(`Composant: ${comp.name} (ID: ${comp.id}, Parent: ${comp.parentComposantId})`)
+        if (comp.subComponents && comp.subComponents.length > 0) {
+          console.log(`  Sous-composants: ${comp.subComponents.map(sc => sc.name).join(', ')}`)
+        }
+      })
+      console.log('=== FIN HIÉRARCHIE ===')
+    } else {
+      console.error('Erreur lors du chargement des composants:', componentsResult.error)
+    }
+    
+    // Load pieces from machine response instead of separate API call
+    if (machine.value && machine.value.pieces) {
+      // Transformer les champs personnalisés
+      pieces.value = transformCustomFields(machine.value.pieces)
+      console.log('Pièces transformées:', pieces.value)
+      console.log('Pièces chargées:', pieces.value.length)
+    } else {
+      console.log('Aucune pièce trouvée dans la réponse de la machine')
+    }
+    
+    console.log('Chargement terminé avec succès')
+  } catch (error) {
+    console.error('Erreur lors du chargement des données:', error)
+  } finally {
+    loading.value = false
+    console.log('Loading terminé, loading.value =', loading.value)
+  }
+}
+
+const updateMachineInfo = async () => {
+  if (!machine.value) return
+  
+  try {
+    const result = await updateMachineApi(machine.value.id, {
+      name: machineName.value,
+      reference: machineReference.value,
+      emplacement: machineEmplacement.value,
+      prestataire: machinePrestataire.value
+    })
+    if (result.success) {
+      // Machine updated successfully
+    }
+  } catch (error) {
+    console.error('Erreur lors de la mise à jour de la machine:', error)
+  }
+}
+
+const updateComponent = async (updatedComponent) => {
+  try {
+    const prixValue = updatedComponent.prix
+    const result = await updateComposantApi(updatedComponent.id, {
+      name: updatedComponent.name,
+      reference: updatedComponent.reference,
+      prestataire: updatedComponent.prestataire,
+      emplacement: updatedComponent.emplacement,
+      prix: prixValue && prixValue !== '' ? parseFloat(prixValue) : null
+    })
+    if (result.success) {
+      // Component updated successfully
+    }
+  } catch (error) {
+    console.error('Erreur lors de la mise à jour du composant:', error)
+  }
+}
+
+const updatePieceFromComponent = async (updatedPiece) => {
+  try {
+    const result = await updatePieceApi(updatedPiece.id, {
+      name: updatedPiece.name,
+      reference: updatedPiece.reference,
+      prestataire: updatedPiece.prestataire,
+      emplacement: updatedPiece.emplacement,
+      prix: updatedPiece.prix && updatedPiece.prix !== '' ? parseFloat(updatedPiece.prix) : null
+    })
+    if (result.success) {
+      // Piece updated successfully
+      
+      // Si la pièce a des champs personnalisés mis à jour, les traiter
+      if (updatedPiece.customFields) {
+        for (const field of updatedPiece.customFields) {
+          if (field.value !== undefined) {
+            await upsertCustomFieldValue(
+              field.id,
+              'piece',
+              updatedPiece.id,
+              field.value
+            )
+          }
+        }
+      }
+    }
+  } catch (error) {
+    console.error('Erreur lors de la mise à jour de la pièce:', error)
+  }
+}
+
+const updatePieceInfo = async (updatedPiece) => {
+  try {
+    const result = await updatePieceApi(updatedPiece.id, {
+      name: updatedPiece.name,
+      reference: updatedPiece.reference,
+      prestataire: updatedPiece.prestataire,
+      emplacement: updatedPiece.emplacement,
+      prix: updatedPiece.prix && updatedPiece.prix !== '' ? parseFloat(updatedPiece.prix) : null
+    })
+    if (result.success) {
+      // Piece updated successfully
+    }
+  } catch (error) {
+    console.error('Erreur lors de la mise à jour de la pièce:', error)
+  }
+}
+
+// Méthodes pour les champs personnalisés de la machine
+const setMachineCustomFieldValue = (fieldValueId, value) => {
+  const fieldValue = machine.value?.customFieldValues?.find(fv => fv.id === fieldValueId)
+  if (fieldValue) {
+    fieldValue.value = value
+  }
+}
+
+const updateMachineCustomField = async (fieldValueId) => {
+  const fieldValue = machine.value?.customFieldValues?.find(fv => fv.id === fieldValueId)
+  if (fieldValue) {
+    const { updateCustomFieldValue } = useCustomFields()
+    const { showSuccess, showError } = useToast()
+    
+    const result = await updateCustomFieldValue(fieldValueId, { value: fieldValue.value })
+    if (result.success) {
+      showSuccess(`Champ "${fieldValue.customField.name}" de la machine mis à jour avec succès`)
+    } else {
+      showError(`Erreur lors de la mise à jour du champ "${fieldValue.customField.name}"`)
+    }
+  }
+}
+
+const updatePieceCustomField = async (fieldUpdate) => {
+  const { showSuccess, showError } = useToast()
+  
+  try {
+    const result = await upsertCustomFieldValue(
+      fieldUpdate.fieldId,
+      'piece',
+      fieldUpdate.pieceId,
+      fieldUpdate.value
+    )
+    if (result.success) {
+      showSuccess(`Champ personnalisé mis à jour avec succès`)
+    } else {
+      showError(`Erreur lors de la mise à jour du champ personnalisé`)
+    }
+  } catch (error) {
+    showError(`Erreur lors de la mise à jour du champ personnalisé`)
+    console.error('Erreur lors de la mise à jour du champ personnalisé:', error)
+  }
+}
+
+const editComponent = (component) => {
+  // TODO: Implement edit modal
+  console.log('Edit component:', component)
+}
+
+const editPiece = (piece) => {
+  // TODO: Implement edit modal
+  console.log('Edit piece:', piece)
+}
+
+const toggleEditMode = () => {
+  isEditMode.value = !isEditMode.value
+  debug.value = !debug.value // Inversez la valeur de debug
+}
+
+// Lifecycle
+onMounted(() => {
+  loadMachineData()
+  
+  // Vérifier si on doit activer le mode édition depuis l'URL
+  const route = useRoute()
+  if (route.query.edit === 'true') {
+    isEditMode.value = true
+    console.log('Mode édition activé depuis l\'URL')
+  }
+})
+</script> 

app/pages/type/[id].vue

@@ -0,0 +1,249 @@
+<template>
+  <main class="container mx-auto px-6 py-8">
+    <!-- Hero Section -->
+    <div class="hero min-h-[30vh] bg-gradient-to-r from-secondary to-primary">
+      <div class="hero-content text-center text-neutral-content">
+        <div class="max-w-md">
+          <h1 class="mb-5 text-4xl font-bold">Modifier le Type</h1>
+          <p class="mb-5">
+            Ajoutez des éléments au type de machine existant.
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <!-- Loading State -->
+    <div v-if="loading" class="my-8 text-center">
+      <div class="loading loading-spinner loading-lg"></div>
+      <p class="mt-4 text-gray-600">Chargement du type...</p>
+    </div>
+
+    <!-- Edit Form -->
+    <div v-else-if="type" class="my-8">
+      <div class="card bg-base-100 shadow-xl">
+        <div class="card-body">
+          <div class="flex items-center justify-between mb-6">
+            <h2 class="card-title text-2xl">
+              Modifier : {{ type.name }}
+            </h2>
+            <NuxtLink to="/types" class="btn btn-outline">
+              Retour
+            </NuxtLink>
+          </div>
+
+          <!-- Current Type Info -->
+          <TypeInfoDisplay :type="type" />
+
+          <!-- Affichage des composants existants -->
+          <div v-if="type.components && type.components.length > 0" class="mb-8">
+            <h3 class="text-lg font-semibold mb-4">Composants existants</h3>
+            <div class="space-y-4">
+              <TypeComponentDisplay 
+                v-for="(component, componentIndex) in type.components" 
+                :key="componentIndex"
+                :component="component"
+              />
+            </div>
+          </div>
+
+          <!-- Affichage des pièces principales existantes -->
+          <div v-if="type.machinePieces && type.machinePieces.length > 0" class="mb-8">
+            <h3 class="text-lg font-semibold mb-4">Pièces principales existantes</h3>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+              <TypeMachinePieceDisplay 
+                v-for="(piece, pieceIndex) in type.machinePieces" 
+                :key="pieceIndex"
+                :piece="piece"
+              />
+            </div>
+          </div>
+
+          <form @submit.prevent="saveChanges" class="space-y-6">
+            <!-- Add Machine Pieces -->
+            <div class="form-control">
+              <label class="label">
+                <span class="label-text">Ajouter des pièces de machine</span>
+                <span class="label-text-alt">Nouvelles pièces directement attachées à la machine</span>
+              </label>
+              <TypeMachinePieceForm v-model="newMachinePieces" />
+            </div>
+
+            <!-- Add Components -->
+            <div class="form-control">
+              <label class="label">
+                <span class="label-text">Ajouter des composants</span>
+                <span class="label-text-alt">Nouveaux composants principaux avec sous-composants</span>
+              </label>
+              <TypeComponentForm v-model="newComponents" />
+            </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" :disabled="saving">
+                <svg v-if="saving" class="w-5 h-5 mr-2 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
+                </svg>
+                <svg v-else 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>
+                {{ saving ? 'Sauvegarde...' : 'Sauvegarder les modifications' }}
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+
+    <!-- Error State -->
+    <div v-else class="my-8 text-center">
+      <div class="alert alert-error">
+        <div>
+          <h3 class="font-bold">Type non trouvé</h3>
+          <p>Le type de machine demandé n'existe pas.</p>
+        </div>
+      </div>
+      <NuxtLink to="/types" class="btn btn-primary mt-4">
+        Retour aux types
+      </NuxtLink>
+    </div>
+  </main>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useMachineTypesApi } from '~/composables/useMachineTypesApi'
+import { useToast } from '~/composables/useToast'
+
+const route = useRoute()
+const router = useRouter()
+const { getMachineTypeById, updateMachineType } = useMachineTypesApi()
+const { showSuccess, showError } = useToast()
+
+const type = ref(null)
+const loading = ref(true)
+const saving = ref(false)
+
+// Nouvelles données à ajouter
+const newMachinePieces = ref([])
+const newComponents = ref([])
+
+const resetForm = () => {
+  newMachinePieces.value = []
+  newComponents.value = []
+}
+
+const saveChanges = async () => {
+  try {
+    saving.value = true
+
+    // Préparer les données mises à jour
+    const updatedType = {
+      ...type.value,
+      machinePieces: [
+        ...(type.value.machinePieces || []),
+        ...newMachinePieces.value
+          .filter(piece => piece.name.trim() !== '')
+          .map(piece => ({
+            name: piece.name,
+            reference: piece.reference,
+            prestataire: piece.prestataire,
+            emplacement: piece.emplacement,
+            prix: piece.prix,
+            customFields: piece.customFields || []
+          }))
+      ],
+      components: [
+        ...(type.value.components || []),
+        ...newComponents.value
+          .filter(comp => comp.name.trim() !== '')
+          .map(comp => ({
+            name: comp.name,
+            reference: comp.reference,
+            prestataire: comp.prestataire,
+            emplacement: comp.emplacement,
+            prix: comp.prix,
+            customFields: comp.customFields || [],
+            pieces: comp.pieces
+              .filter(piece => piece.name.trim() !== '')
+              .map(piece => ({
+                name: piece.name,
+                reference: piece.reference,
+                prestataire: piece.prestataire,
+                emplacement: piece.emplacement,
+                prix: piece.prix,
+                customFields: piece.customFields || []
+              })),
+            subComponents: comp.subComponents
+              .filter(subComp => subComp.name.trim() !== '')
+              .map(subComp => ({
+                name: subComp.name,
+                reference: subComp.reference,
+                prestataire: subComp.prestataire,
+                emplacement: subComp.emplacement,
+                prix: subComp.prix,
+                customFields: subComp.customFields || [],
+                pieces: subComp.pieces
+                  .filter(piece => piece.name.trim() !== '')
+                  .map(piece => ({
+                    name: piece.name,
+                    reference: piece.reference,
+                    prestataire: piece.prestataire,
+                    emplacement: piece.emplacement,
+                    prix: piece.prix,
+                    customFields: piece.customFields || []
+                  }))
+              }))
+          }))
+      ]
+    }
+
+    const result = await updateMachineType(type.value.id, updatedType)
+    
+    if (result.success) {
+      showSuccess('Type mis à jour avec succès !')
+      router.push('/types')
+    } else {
+      showError('Erreur lors de la mise à jour du type')
+    }
+  } catch (error) {
+    console.error('Erreur lors de la sauvegarde:', error)
+    showError('Erreur lors de la sauvegarde')
+  } finally {
+    saving.value = false
+  }
+}
+
+// Charger le type au montage
+onMounted(async () => {
+  try {
+    const typeId = route.params.id
+    console.log('=== EDIT PAGE LOADING ===')
+    console.log('Loading type with ID:', typeId)
+    console.log('Route params:', route.params)
+    console.log('Current route:', route.path)
+    
+    const result = await getMachineTypeById(typeId)
+    console.log('API Result:', result)
+    
+    if (result.success) {
+      type.value = result.data
+      console.log('Type loaded successfully:', type.value)
+      console.log('Type ID:', type.value.id)
+      console.log('Type name:', type.value.name)
+    } else {
+      console.error('Failed to load type:', result.error)
+      showError('Type non trouvé')
+    }
+  } catch (error) {
+    console.error('Erreur lors du chargement:', error)
+    showError('Erreur lors du chargement')
+  } finally {
+    loading.value = false
+    console.log('Loading finished, loading.value:', loading.value)
+  }
+})
+</script>