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

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

app/pages/pieces-catalog.vue

@@ -49,12 +49,22 @@
                 <td>{{ piece.typePiece?.name || '—' }}</td>
                 <td>{{ piece.reference || '—' }}</td>
                 <td>
-                  <NuxtLink
-                    :to="`/pieces/${piece.id}/edit`"
-                    class="btn btn-ghost btn-xs"
-                  >
-                    Modifier
-                  </NuxtLink>
+                  <div class="flex items-center gap-2">
+                    <NuxtLink
+                      :to="`/pieces/${piece.id}/edit`"
+                      class="btn btn-ghost btn-xs"
+                    >
+                      Modifier
+                    </NuxtLink>
+                    <button
+                      type="button"
+                      class="btn btn-error btn-xs"
+                      :disabled="loadingPieces"
+                      @click="handleDeletePiece(piece)"
+                    >
+                      Supprimer
+                    </button>
+                  </div>
                 </td>
               </tr>
             </tbody>
@@ -69,10 +79,33 @@
 <script setup lang="ts">
 import { computed, onMounted } from 'vue'
 import { usePieces } from '~/composables/usePieces'
-const { pieces, loadPieces, loading: loadingPiecesRef } = usePieces()
+import { useToast } from '~/composables/useToast'
+
+const { showError } = useToast()
+const { pieces, loadPieces, loading: loadingPiecesRef, deletePiece } = usePieces()
 const loadingPieces = computed(() => loadingPiecesRef.value)
 const piecesList = computed(() => pieces.value || [])
 
+const handleDeletePiece = async (piece: Record<string, any>) => {
+  const hasLinkedElements =
+    (piece?.machineLinks?.length ?? 0) > 0 ||
+    (piece?.documents?.length ?? 0) > 0 ||
+    (piece?.customFieldValues?.length ?? 0) > 0
+
+  if (hasLinkedElements) {
+    showError('Impossible de supprimer cette pièce car elle possède des éléments liés.')
+    return
+  }
+
+  const pieceName = piece?.name || 'cette pièce'
+  const confirmed = window.confirm(`Voulez-vous vraiment supprimer ${pieceName} ?`)
+  if (!confirmed) {
+    return
+  }
+
+  await deletePiece(piece.id)
+}
+
 onMounted(async () => {
   await loadPieces()
 })