diff --git a/app/components/ComponentHierarchy.vue b/app/components/ComponentHierarchy.vue
new file mode 100644
index 0000000..445b5a3
--- /dev/null
+++ b/app/components/ComponentHierarchy.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="space-y-4">
+    <!-- Root Components -->
+    <div v-for="component in components" :key="component.id" class="border border-gray-200 rounded-lg p-4">
+      <ComponentItem 
+        :component="component"
+        :is-edit-mode="isEditMode"
+        @update="$emit('update', $event)"
+        @edit-piece="$emit('edit-piece', $event)"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import ComponentItem from './ComponentItem.vue'
+
+defineProps({
+  components: {
+    type: Array,
+    required: true
+  },
+  isEditMode: {
+    type: Boolean,
+    default: false
+  }
+})
+
+defineEmits(['update', 'edit-piece'])
+</script> 
\ No newline at end of file
diff --git a/app/components/ComponentItem.vue b/app/components/ComponentItem.vue
new file mode 100644
index 0000000..19fa99d
--- /dev/null
+++ b/app/components/ComponentItem.vue
@@ -0,0 +1,268 @@
+<template>
+  <div class="space-y-4">
+    <!-- Component Header -->
+    <div class="flex items-center justify-between p-4 bg-base-200 rounded-lg">
+      <div class="flex-1">
+        <h3 class="text-lg font-semibold">{{ component.name }}</h3>
+        <div class="flex flex-wrap gap-2 mt-2">
+          <span v-if="component.reference" class="badge badge-outline badge-sm">
+            {{ component.reference }}
+          </span>
+          <span v-if="component.prestataire" class="badge badge-outline badge-sm">
+            {{ component.prestataire }}
+          </span>
+          <span v-if="component.emplacement" class="badge badge-outline badge-sm">
+            {{ component.emplacement }}
+          </span>
+          <span v-if="component.prix" class="badge badge-primary badge-sm">
+            {{ component.prix }}€
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Component Info Display - Editable or Read-only -->
+    <div class="p-4 bg-base-100 border border-gray-200 rounded-lg">
+      <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 font-medium">Nom</span>
+          </label>
+          <input 
+            v-if="isEditMode"
+            v-model="component.name"
+            type="text" 
+            class="input input-bordered input-sm"
+            @blur="updateComponent"
+          />
+          <div v-else class="input input-bordered input-sm bg-base-200">
+            {{ component.name }}
+          </div>
+        </div>
+        <div class="form-control">
+          <label class="label">
+            <span class="label-text font-medium">Référence</span>
+          </label>
+          <input 
+            v-if="isEditMode"
+            v-model="component.reference"
+            type="text" 
+            class="input input-bordered input-sm"
+            @blur="updateComponent"
+          />
+          <div v-else class="input input-bordered input-sm bg-base-200">
+            {{ component.reference || 'Non définie' }}
+          </div>
+        </div>
+        <div class="form-control">
+          <label class="label">
+            <span class="label-text font-medium">Prestataire</span>
+          </label>
+          <input 
+            v-if="isEditMode"
+            v-model="component.prestataire"
+            type="text" 
+            class="input input-bordered input-sm"
+            @blur="updateComponent"
+          />
+          <div v-else class="input input-bordered input-sm bg-base-200">
+            {{ component.prestataire || 'Non défini' }}
+          </div>
+        </div>
+        <div class="form-control">
+          <label class="label">
+            <span class="label-text font-medium">Emplacement</span>
+          </label>
+          <input 
+            v-if="isEditMode"
+            v-model="component.emplacement"
+            type="text" 
+            class="input input-bordered input-sm"
+            @blur="updateComponent"
+          />
+          <div v-else class="input input-bordered input-sm bg-base-200">
+            {{ component.emplacement || 'Non défini' }}
+          </div>
+        </div>
+        <div class="form-control">
+          <label class="label">
+            <span class="label-text font-medium">Prix</span>
+          </label>
+          <input 
+            v-if="isEditMode"
+            v-model="component.prix"
+            type="number" 
+            step="0.01"
+            class="input input-bordered input-sm"
+            @blur="updateComponent"
+          />
+          <div v-else class="input input-bordered input-sm bg-base-200">
+            {{ component.prix ? `${component.prix}€` : 'Non défini' }}
+          </div>
+        </div>
+      </div>
+      
+      <!-- Custom Fields Display - Editable or Read-only -->
+      <div v-if="component.customFields && component.customFields.length > 0" class="mt-4 pt-4 border-t border-gray-200">
+        <h4 class="font-semibold text-sm text-gray-700 mb-3">Champs personnalisés</h4>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div 
+            v-for="field in component.customFields" 
+            :key="field.id"
+            class="form-control"
+          >
+            <label class="label">
+              <span class="label-text text-sm">{{ field.name }}</span>
+              <span v-if="field.required" class="label-text-alt text-error">*</span>
+            </label>
+            
+            <!-- Mode édition -->
+            <template v-if="isEditMode">
+              <!-- Champ de type TEXT -->
+              <input 
+                v-if="field.type === 'text'"
+                v-model="field.value"
+                type="text"
+                :placeholder="field.defaultValue || ''"
+                class="input input-bordered input-sm"
+                :required="field.required"
+                @blur="updateComponentCustomField(field)"
+              />
+              
+              <!-- Champ de type NUMBER -->
+              <input 
+                v-else-if="field.type === 'number'"
+                v-model="field.value"
+                type="number"
+                :placeholder="field.defaultValue || ''"
+                class="input input-bordered input-sm"
+                :required="field.required"
+                @blur="updateComponentCustomField(field)"
+              />
+              
+              <!-- Champ de type SELECT -->
+              <select 
+                v-else-if="field.type === 'select'"
+                v-model="field.value"
+                class="select select-bordered select-sm"
+                :required="field.required"
+                @change="updateComponentCustomField(field)"
+              >
+                <option value="">{{ field.defaultValue || 'Sélectionner...' }}</option>
+                <option 
+                  v-for="option in field.options" 
+                  :key="option" 
+                  :value="option"
+                >
+                  {{ option }}
+                </option>
+              </select>
+              
+              <!-- Champ de type BOOLEAN -->
+              <div v-else-if="field.type === 'boolean'" class="flex items-center gap-2">
+                <input 
+                  v-model="field.value"
+                  type="checkbox"
+                  class="checkbox checkbox-sm"
+                  :checked="field.value === 'true'"
+                  @change="updateComponentCustomField(field)"
+                />
+                <span class="text-sm">{{ field.value === 'true' ? 'Oui' : 'Non' }}</span>
+              </div>
+              
+              <!-- Champ de type DATE -->
+              <input 
+                v-else-if="field.type === 'date'"
+                v-model="field.value"
+                type="date"
+                :placeholder="field.defaultValue || ''"
+                class="input input-bordered input-sm"
+                :required="field.required"
+                @blur="updateComponentCustomField(field)"
+              />
+            </template>
+            
+            <!-- Mode lecture seule -->
+            <template v-else>
+              <div class="input input-bordered input-sm bg-base-200">
+                {{ field.value || field.defaultValue || 'Non défini' }}
+              </div>
+            </template>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Component Pieces -->
+    <div v-if="component.pieces && component.pieces.length > 0" class="space-y-2">
+      <h4 class="font-semibold text-gray-700">Pièces du composant</h4>
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
+        <PieceItem 
+          v-for="piece in component.pieces" 
+          :key="piece.id"
+          :piece="piece"
+          :is-edit-mode="isEditMode"
+          @update="updatePiece"
+          @edit="editPiece"
+          @custom-field-update="updatePieceCustomField"
+        />
+      </div>
+    </div>
+
+    <!-- Sub Components -->
+    <div v-if="component.subComponents && component.subComponents.length > 0" class="space-y-3">
+      <h4 class="font-semibold text-gray-700">Sous-composants</h4>
+      <div class="space-y-3 pl-4 border-l-2 border-gray-200">
+        <ComponentItem 
+          v-for="subComponent in component.subComponents" 
+          :key="subComponent.id"
+          :component="subComponent"
+          :is-edit-mode="isEditMode"
+          @update="$emit('update', $event)"
+          @edit-piece="$emit('edit-piece', $event)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, watch } from 'vue'
+import PieceItem from './PieceItem.vue'
+
+const props = defineProps({
+  component: {
+    type: Object,
+    required: true
+  },
+  isEditMode: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['update', 'edit-piece'])
+
+// Methods
+const updateComponent = () => {
+  emit('update', props.component)
+}
+
+const updateComponentCustomField = (field) => {
+  // Mettre à jour le champ personnalisé du composant
+  emit('update', props.component)
+}
+
+const updatePiece = (updatedPiece) => {
+  emit('edit-piece', updatedPiece)
+}
+
+const editPiece = (piece) => {
+  emit('edit-piece', piece)
+}
+
+const updatePieceCustomField = (fieldUpdate) => {
+  // Forward to parent
+  emit('edit-piece', { ...fieldUpdate, type: 'custom-field-update' })
+}
+</script> 
\ No newline at end of file
diff --git a/app/components/CustomFieldsDisplay.vue b/app/components/CustomFieldsDisplay.vue
new file mode 100644
index 0000000..276657a
--- /dev/null
+++ b/app/components/CustomFieldsDisplay.vue
@@ -0,0 +1,135 @@
+<template>
+  <div v-if="customFields && customFields.length > 0" class="space-y-4">
+    <h4 class="font-semibold text-gray-700 mb-3">Champs personnalisés</h4>
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+      <div 
+        v-for="field in customFields" 
+        :key="field.id"
+        class="form-control"
+      >
+        <label class="label">
+          <span class="label-text">{{ field.name }}</span>
+          <span v-if="field.required" class="label-text-alt text-error">*</span>
+        </label>
+        
+        <!-- Champ de type TEXT -->
+        <input 
+          v-if="field.type === 'text'"
+          v-model="fieldValues[field.id]"
+          type="text"
+          :placeholder="field.defaultValue || ''"
+          class="input input-bordered input-sm"
+          :required="field.required"
+          @blur="updateCustomFieldValue(field.id)"
+        />
+        
+        <!-- Champ de type NUMBER -->
+        <input 
+          v-else-if="field.type === 'number'"
+          v-model="fieldValues[field.id]"
+          type="number"
+          :placeholder="field.defaultValue || ''"
+          class="input input-bordered input-sm"
+          :required="field.required"
+          @blur="updateCustomFieldValue(field.id)"
+        />
+        
+        <!-- Champ de type SELECT -->
+        <select 
+          v-else-if="field.type === 'select'"
+          v-model="fieldValues[field.id]"
+          class="select select-bordered select-sm"
+          :required="field.required"
+          @change="updateCustomFieldValue(field.id)"
+        >
+          <option value="">{{ field.defaultValue || 'Sélectionner...' }}</option>
+          <option 
+            v-for="option in field.options" 
+            :key="option" 
+            :value="option"
+          >
+            {{ option }}
+          </option>
+        </select>
+        
+        <!-- Champ de type BOOLEAN -->
+        <div v-else-if="field.type === 'boolean'" class="flex items-center gap-2">
+          <input 
+            v-model="fieldValues[field.id]"
+            type="checkbox"
+            class="checkbox checkbox-sm"
+            :checked="fieldValues[field.id] === 'true'"
+            @change="updateCustomFieldValue(field.id)"
+          />
+          <span class="text-sm">{{ fieldValues[field.id] === 'true' ? 'Oui' : 'Non' }}</span>
+        </div>
+        
+        <!-- Champ de type DATE -->
+        <input 
+          v-else-if="field.type === 'date'"
+          v-model="fieldValues[field.id]"
+          type="date"
+          :placeholder="field.defaultValue || ''"
+          class="input input-bordered input-sm"
+          :required="field.required"
+          @blur="updateCustomFieldValue(field.id)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted, watch } from 'vue'
+
+const props = defineProps({
+  customFields: {
+    type: Array,
+    default: () => []
+  },
+  entityId: {
+    type: String,
+    required: true
+  },
+  entityType: {
+    type: String,
+    required: true, // 'machine', 'composant', 'piece'
+    validator: (value) => ['machine', 'composant', 'piece'].includes(value)
+  }
+})
+
+const emit = defineEmits(['update'])
+
+// Valeurs des champs personnalisés
+const fieldValues = reactive({})
+
+// Initialiser les valeurs avec les valeurs par défaut
+const initializeFieldValues = () => {
+  props.customFields.forEach(field => {
+    if (!fieldValues[field.id]) {
+      fieldValues[field.id] = field.defaultValue || ''
+    }
+  })
+}
+
+// Mettre à jour la valeur d'un champ personnalisé
+const updateCustomFieldValue = (fieldId) => {
+  const field = props.customFields.find(f => f.id === fieldId)
+  if (field) {
+    emit('update', {
+      fieldId,
+      value: fieldValues[fieldId],
+      field
+    })
+  }
+}
+
+// Surveiller les changements dans les champs personnalisés
+watch(() => props.customFields, () => {
+  initializeFieldValues()
+}, { deep: true })
+
+onMounted(() => {
+  initializeFieldValues()
+})
+</script> 
\ No newline at end of file
diff --git a/app/components/PieceItem.vue b/app/components/PieceItem.vue
new file mode 100644
index 0000000..b4f4d1f
--- /dev/null
+++ b/app/components/PieceItem.vue
@@ -0,0 +1,247 @@
+<template>
+  <div class="border border-gray-200 rounded-lg p-4">
+    <div class="flex items-center justify-between mb-3">
+      <div 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="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-if="isEditMode"
+          :id="`piece-name-${piece.id}`"
+          v-model="pieceData.name" 
+          type="text" 
+          class="font-semibold text-lg input input-sm input-bordered"
+          @blur="updatePiece"
+        />
+        <div v-else class="font-semibold text-lg input input-sm input-bordered bg-base-200">
+          {{ pieceData.name }}
+        </div>
+      </div>
+    </div>
+
+    <div class="space-y-2 text-sm">
+      <div>
+        <span class="font-medium">Référence:</span> 
+        <input 
+          v-if="isEditMode"
+          :id="`piece-reference-${piece.id}`"
+          v-model="pieceData.reference" 
+          type="text" 
+          class="input input-sm input-bordered ml-2"
+          @blur="updatePiece"
+        />
+        <span v-else class="ml-2">{{ pieceData.reference || 'Non définie' }}</span>
+      </div>
+      <div>
+        <span class="font-medium">Prestataire:</span> 
+        <input 
+          v-if="isEditMode"
+          :id="`piece-prestataire-${piece.id}`"
+          v-model="pieceData.prestataire" 
+          type="text" 
+          class="input input-sm input-bordered ml-2"
+          @blur="updatePiece"
+        />
+        <span v-else class="ml-2">{{ pieceData.prestataire || 'Non défini' }}</span>
+      </div>
+      <div>
+        <span class="font-medium">Emplacement:</span> 
+        <input 
+          v-if="isEditMode"
+          :id="`piece-emplacement-${piece.id}`"
+          v-model="pieceData.emplacement" 
+          type="text" 
+          class="input input-sm input-bordered ml-2"
+          @blur="updatePiece"
+        />
+        <span v-else class="ml-2">{{ pieceData.emplacement || 'Non défini' }}</span>
+      </div>
+      <div>
+        <span class="font-medium">Prix:</span> 
+        <input 
+          v-if="isEditMode"
+          :id="`piece-prix-${piece.id}`"
+          v-model="pieceData.prix" 
+          type="number" 
+          step="0.01"
+          class="input input-sm input-bordered ml-2"
+          @blur="updatePiece"
+        />
+        <span v-else class="ml-2">{{ pieceData.prix ? `${pieceData.prix}€` : 'Non défini' }}</span>
+      </div>
+    </div>
+
+    <!-- Champs personnalisés de la pièce -->
+    <div v-if="piece.customFieldValues && piece.customFieldValues.length > 0" class="mt-4 pt-4 border-t border-gray-200">
+      <h5 class="text-sm font-medium text-gray-700 mb-3">Champs personnalisés</h5>
+      <div class="space-y-3">
+        <div 
+          v-for="fieldValue in piece.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="setCustomFieldValue(fieldValue.id, $event.target.value)"
+              type="text"
+              :placeholder="fieldValue.customField.defaultValue || ''"
+              class="input input-bordered input-sm"
+              :required="fieldValue.customField.required"
+              @blur="updateCustomFieldValue(fieldValue.id)"
+            />
+            
+            <!-- Champ de type NUMBER -->
+            <input 
+              v-else-if="fieldValue.customField.type === 'number'"
+              :value="fieldValue.value"
+              @input="setCustomFieldValue(fieldValue.id, $event.target.value)"
+              type="number"
+              :placeholder="fieldValue.customField.defaultValue || ''"
+              class="input input-bordered input-sm"
+              :required="fieldValue.customField.required"
+              @blur="updateCustomFieldValue(fieldValue.id)"
+            />
+            
+            <!-- Champ de type SELECT -->
+            <select 
+              v-else-if="fieldValue.customField.type === 'select'"
+              :value="fieldValue.value"
+              @change="setCustomFieldValue(fieldValue.id, $event.target.value)"
+              class="select select-bordered select-sm"
+              :required="fieldValue.customField.required"
+              @blur="updateCustomFieldValue(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="setCustomFieldValue(fieldValue.id, $event.target.checked ? 'true' : 'false')"
+                type="checkbox"
+                class="checkbox checkbox-sm"
+                :checked="fieldValue.value === 'true'"
+                @blur="updateCustomFieldValue(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="setCustomFieldValue(fieldValue.id, $event.target.value)"
+              type="date"
+              :placeholder="fieldValue.customField.defaultValue || ''"
+              class="input input-bordered input-sm"
+              :required="fieldValue.customField.required"
+              @blur="updateCustomFieldValue(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>
+</template>
+
+<script setup>
+import { reactive, onMounted, watch } from 'vue'
+import { useCustomFields } from '~/composables/useCustomFields'
+import { useToast } from '~/composables/useToast'
+
+const props = defineProps({
+  piece: {
+    type: Object,
+    required: true
+  },
+  isEditMode: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['update', 'edit', 'custom-field-update'])
+
+// Données locales isolées pour cette pièce
+const pieceData = reactive({
+  name: props.piece.name || '',
+  reference: props.piece.reference || '',
+  prestataire: props.piece.prestataire || '',
+  emplacement: props.piece.emplacement || '',
+  prix: props.piece.prix || ''
+})
+
+// Méthodes pour gérer les champs personnalisés
+const setCustomFieldValue = (fieldValueId, value) => {
+  const fieldValue = props.piece.customFieldValues?.find(fv => fv.id === fieldValueId)
+  if (fieldValue) {
+    fieldValue.value = value
+  }
+}
+
+const updatePiece = () => {
+  const prixValue = pieceData.prix
+  emit('update', {
+    ...props.piece,
+    ...pieceData,
+    prix: prixValue && prixValue !== '' ? parseFloat(prixValue) : null
+  })
+}
+
+const updateCustomFieldValue = async (fieldValueId) => {
+  const fieldValue = props.piece.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}" mis à jour avec succès`)
+    } else {
+      showError(`Erreur lors de la mise à jour du champ "${fieldValue.customField.name}"`)
+    }
+  }
+}
+
+// Surveiller les changements dans les champs personnalisés
+watch(() => props.piece.customFieldValues, () => {
+  console.log('PieceItem - customFieldValues updated:', props.piece.customFieldValues)
+}, { deep: true })
+
+onMounted(() => {
+  // Initialiser les données avec les props
+  pieceData.name = props.piece.name || ''
+  pieceData.reference = props.piece.reference || ''
+  pieceData.prestataire = props.piece.prestataire || ''
+  pieceData.emplacement = props.piece.emplacement || ''
+  pieceData.prix = props.piece.prix || ''
+  
+  // Debug: vérifier si les champs personnalisés sont présents
+  console.log('PieceItem - piece:', props.piece)
+  console.log('PieceItem - customFieldValues:', props.piece.customFieldValues)
+})
+</script> 
\ No newline at end of file