feat(ui) : highlight empty slots with category name in red

- Empty component slots (pieces, products, subcomponents) now display
  the category/type name with red styling instead of generic labels
- Machine view: empty structure pieces show type name + "manquant" in red
- Backend: include typePiece in structure slot data for name resolution

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/app/components/PieceItem.vue

@@ -14,7 +14,7 @@
     />
 
     <!-- Piece Header (collapsible, same pattern as ComponentItem) -->
-    <div class="flex items-start justify-between p-4 bg-base-200 rounded-lg">
+    <div class="flex items-start justify-between p-4 rounded-lg" :class="piece._emptySlot ? 'bg-error/10 border border-error' : 'bg-base-200'">
       <div class="flex items-start gap-3 flex-1 min-w-0">
         <button
           type="button"
@@ -28,8 +28,9 @@
           <span class="sr-only">{{ isCollapsed ? 'Déplier' : 'Replier' }} la pièce</span>
         </button>
         <div class="flex-1 min-w-0">
-          <h3 class="text-lg font-semibold">
+          <h3 class="text-lg font-semibold" :class="{ 'text-error': piece._emptySlot }">
             {{ pieceData.name }}
+            <span v-if="piece._emptySlot" class="text-sm font-semibold text-error ml-1">— manquant</span>
             <span
               v-if="displayQuantity > 1"
               class="text-sm font-normal text-base-content/60 ml-1"

frontend/app/composables/useComponentEdit.ts

@@ -288,14 +288,16 @@ export function useComponentEdit(componentId: string) {
     if (!structure?.pieces) return []
     return (structure.pieces as any[]).map((slot: any, i: number) => {
       const edits = slotEdits.pieces[slot.slotId]
+      const selectedPieceId = edits && 'selectedPieceId' in edits ? edits.selectedPieceId : (slot.selectedPieceId ?? null)
       return {
         slotId: slot.slotId,
         typePieceId: slot.typePieceId,
-        selectedPieceId: edits && 'selectedPieceId' in edits ? edits.selectedPieceId : (slot.selectedPieceId ?? null),
+        selectedPieceId,
         selectedPieceName: slot.selectedPieceName ?? null,
         quantity: edits && 'quantity' in edits ? edits.quantity! : (slot.quantity ?? 1),
         position: slot.position ?? i,
         label: pieceTypeLabelMap.value[slot.typePieceId] || `Pièce #${i + 1}`,
+        isEmpty: !selectedPieceId,
       }
     })
   })
@@ -305,14 +307,16 @@ export function useComponentEdit(componentId: string) {
     if (!structure?.products) return []
     return (structure.products as any[]).map((slot: any, i: number) => {
       const edits = slotEdits.products[slot.slotId]
+      const selectedProductId = edits && 'selectedProductId' in edits ? edits.selectedProductId : (slot.selectedProductId ?? null)
       return {
         slotId: slot.slotId,
         typeProductId: slot.typeProductId,
-        selectedProductId: edits && 'selectedProductId' in edits ? edits.selectedProductId : (slot.selectedProductId ?? null),
+        selectedProductId,
         selectedProductName: slot.selectedProductName ?? null,
         familyCode: slot.familyCode,
         position: slot.position ?? i,
         label: productTypeLabelMap.value[slot.typeProductId] || `Produit #${i + 1}`,
+        isEmpty: !selectedProductId,
       }
     })
   })
@@ -322,15 +326,17 @@ export function useComponentEdit(componentId: string) {
     if (!structure?.subcomponents) return []
     return (structure.subcomponents as any[]).map((slot: any, i: number) => {
       const edits = slotEdits.subcomponents[slot.slotId]
+      const selectedComponentId = edits && 'selectedComposantId' in edits ? edits.selectedComposantId : (slot.selectedComponentId ?? null)
       return {
         slotId: slot.slotId,
         typeComposantId: slot.typeComposantId,
-        selectedComponentId: edits && 'selectedComposantId' in edits ? edits.selectedComposantId : (slot.selectedComponentId ?? null),
+        selectedComponentId,
         selectedComponentName: slot.selectedComponentName ?? null,
         alias: slot.alias,
         familyCode: slot.familyCode,
         position: slot.position ?? i,
         label: slot.alias || `Sous-composant #${i + 1}`,
+        isEmpty: !selectedComponentId,
       }
     })
   })

frontend/app/composables/useMachineHierarchy.ts

@@ -227,11 +227,13 @@ export const buildMachineHierarchyFromLinks = (
       const definition = (def.definition && typeof def.definition === 'object' ? def.definition : def) as AnyRecord
       const resolved = (def.resolvedPiece && typeof def.resolvedPiece === 'object' ? def.resolvedPiece : null) as AnyRecord | null
       const quantity = typeof definition.quantity === 'number' ? definition.quantity : (typeof def.quantity === 'number' ? def.quantity : 1)
+      const isEmpty = !resolved
+      const typePieceName = (resolved?.typePiece as AnyRecord)?.name || (definition.typePiece as AnyRecord)?.name || (def.typePiece as AnyRecord)?.name || null
       return {
         ...(resolved || {}),
         id: resolved?.id || `structure-piece-${composantId}-${index}`,
         pieceId: resolved?.id || null,
-        name: resolved?.name || definition.role || definition.name || def.role || def.name || `Pièce ${index + 1}`,
+        name: resolved?.name || definition.role || definition.name || def.role || def.name || (typePieceName ? `${typePieceName}` : `Pièce ${index + 1}`),
         reference: resolved?.reference || definition.reference || def.reference || null,
         prix: resolved?.prix ?? null,
         constructeurs: resolved?.constructeurs || [],
@@ -243,6 +245,7 @@ export const buildMachineHierarchyFromLinks = (
         parentComponentLinkId: machineComponentLinkId,
         parentComponentName: componentName,
         _structurePiece: true,
+        _emptySlot: isEmpty,
       }
     }) as AnyRecord[]
 

frontend/app/pages/component/[id]/edit.vue

@@ -195,7 +195,7 @@
                 class="form-control"
               >
                 <label class="label">
-                  <span class="label-text text-xs font-medium">{{ slot.label }}</span>
+                  <span class="label-text text-xs font-medium" :class="{ 'text-error font-semibold': slot.isEmpty }">{{ slot.label }}</span>
                 </label>
                 <div class="flex items-start gap-2">
                   <div class="flex-1">
@@ -231,7 +231,7 @@
                 class="form-control"
               >
                 <label class="label">
-                  <span class="label-text text-xs font-medium">{{ slot.label }}</span>
+                  <span class="label-text text-xs font-medium" :class="{ 'text-error font-semibold': slot.isEmpty }">{{ slot.label }}</span>
                 </label>
                 <ProductSelect
                   :model-value="slot.selectedProductId"
@@ -252,7 +252,7 @@
                 class="form-control"
               >
                 <label class="label">
-                  <span class="label-text text-xs font-medium">{{ slot.label }}</span>
+                  <span class="label-text text-xs font-medium" :class="{ 'text-error font-semibold': slot.isEmpty }">{{ slot.label }}</span>
                 </label>
                 <ComposantSelect
                   :model-value="slot.selectedComponentId"

frontend/app/pages/component/[id]/index.vue

@@ -230,7 +230,7 @@
                   class="form-control"
                 >
                   <label class="label">
-                    <span class="label-text text-xs font-medium">{{ slot.label }}</span>
+                    <span class="label-text text-xs font-medium" :class="{ 'text-error font-semibold': slot.isEmpty }">{{ slot.label }}</span>
                   </label>
                   <template v-if="isEditMode">
                     <div class="flex items-start gap-2">
@@ -255,9 +255,12 @@
                       </div>
                     </div>
                   </template>
-                  <div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center gap-2">
+                  <div v-else class="input input-bordered input-sm md:input-md flex items-center gap-2" :class="slot.isEmpty ? 'border-error bg-error/10 text-error font-semibold' : 'bg-base-200'">
-                    {{ slot.selectedPieceName || '— Non sélectionné' }}
+                    <template v-if="slot.isEmpty">{{ slot.label }} — manquant</template>
-                    <span v-if="slot.quantity > 1" class="badge badge-sm">x{{ slot.quantity }}</span>
+                    <template v-else>
+                      {{ slot.selectedPieceName }}
+                      <span v-if="slot.quantity > 1" class="badge badge-sm">x{{ slot.quantity }}</span>
+                    </template>
                   </div>
                 </div>
               </div>
@@ -272,7 +275,7 @@
                   class="form-control"
                 >
                   <label class="label">
-                    <span class="label-text text-xs font-medium">{{ slot.label }}</span>
+                    <span class="label-text text-xs font-medium" :class="{ 'text-error font-semibold': slot.isEmpty }">{{ slot.label }}</span>
                   </label>
                   <template v-if="isEditMode">
                     <ProductSelect
@@ -282,8 +285,9 @@
                       @update:model-value="(value) => setProductSlotSelection(slot.slotId, value)"
                     />
                   </template>
-                  <div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center">
+                  <div v-else class="input input-bordered input-sm md:input-md flex items-center" :class="slot.isEmpty ? 'border-error bg-error/10 text-error font-semibold' : 'bg-base-200'">
-                    {{ slot.selectedProductName || '— Non sélectionné' }}
+                    <template v-if="slot.isEmpty">{{ slot.label }} — manquant</template>
+                    <template v-else>{{ slot.selectedProductName }}</template>
                   </div>
                 </div>
               </div>
@@ -298,7 +302,7 @@
                   class="form-control"
                 >
                   <label class="label">
-                    <span class="label-text text-xs font-medium">{{ slot.label }}</span>
+                    <span class="label-text text-xs font-medium" :class="{ 'text-error font-semibold': slot.isEmpty }">{{ slot.label }}</span>
                   </label>
                   <template v-if="isEditMode">
                     <ComposantSelect
@@ -308,8 +312,9 @@
                       @update:model-value="(value) => setSubcomponentSlotSelection(slot.slotId, value)"
                     />
                   </template>
-                  <div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center">
+                  <div v-else class="input input-bordered input-sm md:input-md flex items-center" :class="slot.isEmpty ? 'border-error bg-error/10 text-error font-semibold' : 'bg-base-200'">
-                    {{ slot.selectedComponentName || '— Non sélectionné' }}
+                    <template v-if="slot.isEmpty">{{ slot.label }} — manquant</template>
+                    <template v-else>{{ slot.selectedComponentName }}</template>
                   </div>
                 </div>
               </div>

frontend/app/pages/piece/[id].vue

@@ -224,7 +224,7 @@
                 class="form-control"
               >
                 <label class="label">
-                  <span class="label-text text-xs font-medium">
+                  <span class="label-text text-xs font-medium" :class="{ 'text-error font-semibold': !productSelections[entry.index] }">
                     {{ entry.label }}
                   </span>
                 </label>
@@ -244,10 +244,11 @@
                 class="form-control"
               >
                 <label class="label">
-                  <span class="label-text text-xs font-medium">{{ entry.label }}</span>
+                  <span class="label-text text-xs font-medium" :class="{ 'text-error font-semibold': !productSelectionLabels[index] }">{{ entry.label }}</span>
                 </label>
-                <div class="input input-bordered input-sm md:input-md bg-base-200 flex items-center">
+                <div class="input input-bordered input-sm md:input-md flex items-center" :class="productSelectionLabels[index] ? 'bg-base-200' : 'border-error bg-error/10 text-error font-semibold'">
-                  {{ productSelectionLabels[index] || '— Non sélectionné' }}
+                  <template v-if="!productSelectionLabels[index]">{{ entry.label }} — manquant</template>
+                  <template v-else>{{ productSelectionLabels[index] }}</template>
                 </div>
               </div>
             </div>

src/Controller/MachineStructureController.php

@@ -728,6 +728,7 @@ class MachineStructureController extends AbstractController
             $pieceData = [
                 'slotId'          => $slot->getId(),
                 'typePieceId'     => $slot->getTypePiece()?->getId(),
+                'typePiece'       => $this->normalizeModelType($slot->getTypePiece()),
                 'quantity'        => $slot->getQuantity(),
                 'selectedPieceId' => $slot->getSelectedPiece()?->getId(),
             ];