feat(frontend): add reusable search select and wire it into machine creation

fix(frontend): guard custom field persistence against non-string values

app/pages/component-catalog.vue

@@ -50,12 +50,22 @@
                 <td>{{ component.typeComposant?.name || '—' }}</td>
                 <td>{{ component.reference || '—' }}</td>
                 <td>
-                  <NuxtLink
-                    :to="`/component/${component.id}/edit`"
-                    class="btn btn-ghost btn-xs"
-                  >
-                    Modifier
-                  </NuxtLink>
+                  <div class="flex items-center gap-2">
+                    <NuxtLink
+                      :to="`/component/${component.id}/edit`"
+                      class="btn btn-ghost btn-xs"
+                    >
+                      Modifier
+                    </NuxtLink>
+                    <button
+                      type="button"
+                      class="btn btn-error btn-xs"
+                      :disabled="loadingComposants"
+                      @click="handleDeleteComponent(component)"
+                    >
+                      Supprimer
+                    </button>
+                  </div>
                 </td>
               </tr>
             </tbody>
@@ -70,9 +80,33 @@
 <script setup lang="ts">
 import { computed, onMounted } from 'vue'
 import { useComposants } from '~/composables/useComposants'
-const { composants, loadComposants, loading: loadingComposantsRef } = useComposants()
+import { useToast } from '~/composables/useToast'
+
+const { showError } = useToast()
+const { composants, loadComposants, loading: loadingComposantsRef, deleteComposant } = useComposants()
 const loadingComposants = computed(() => loadingComposantsRef.value)
 const composantsList = computed(() => composants.value || [])
+
+const handleDeleteComponent = async (component: Record<string, any>) => {
+  const hasLinkedElements =
+    (component?.machineLinks?.length ?? 0) > 0 ||
+    (component?.documents?.length ?? 0) > 0 ||
+    (component?.customFieldValues?.length ?? 0) > 0
+
+  if (hasLinkedElements) {
+    showError('Impossible de supprimer ce composant car il possède des éléments liés.')
+    return
+  }
+
+  const componentName = component?.name || 'ce composant'
+  const confirmed = window.confirm(`Voulez-vous vraiment supprimer ${componentName} ?`)
+  if (!confirmed) {
+    return
+  }
+
+  await deleteComposant(component.id)
+}
+
 onMounted(async () => {
   await loadComposants()
 })