From 6716d3112666340a8244ca1e3702e77171c76203 Mon Sep 17 00:00:00 2001
From: r-dev <matthieu@yuno.malio.fr>
Date: Sat, 4 Apr 2026 16:33:08 +0200
Subject: [PATCH] feat(ui) : add item counters to machine section titles

---
 frontend/app/components/ComponentItem.vue     |  9 +++++++-
 .../machine/MachineComponentsCard.vue         |  5 ++++-
 .../machine/MachineDocumentsCard.vue          |  5 ++++-
 .../components/machine/MachineInfoCard.vue    | 22 +++++++++----------
 .../components/machine/MachinePiecesCard.vue  |  5 ++++-
 5 files changed, 31 insertions(+), 15 deletions(-)

diff --git a/frontend/app/components/ComponentItem.vue b/frontend/app/components/ComponentItem.vue
index cd324bf..cf15a95 100644
--- a/frontend/app/components/ComponentItem.vue
+++ b/frontend/app/components/ComponentItem.vue
@@ -14,7 +14,14 @@
     />
 
     <!-- Component Header -->
-    <div class="flex items-center gap-3 p-3 rounded-lg cursor-pointer" :class="component.pendingEntity ? 'bg-error/10 border border-error' : 'bg-base-200'" @click="toggleCollapse">
+    <div
+      class="flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-shadow"
+      :class="[
+        component.pendingEntity ? 'bg-error/10 border border-error' : 'bg-base-200',
+        !isCollapsed ? 'sticky top-16 z-10 shadow-sm' : '',
+      ]"
+      @click="toggleCollapse"
+    >
       <IconLucideChevronRight
         class="w-4 h-4 shrink-0 transition-transform text-base-content/50"
         :class="{ 'rotate-90': !isCollapsed }"
diff --git a/frontend/app/components/machine/MachineComponentsCard.vue b/frontend/app/components/machine/MachineComponentsCard.vue
index 097a581..ba0e5c6 100644
--- a/frontend/app/components/machine/MachineComponentsCard.vue
+++ b/frontend/app/components/machine/MachineComponentsCard.vue
@@ -2,7 +2,10 @@
   <div class="card bg-base-100 shadow-sm">
     <div class="card-body">
       <div class="flex justify-between items-center mb-4">
-        <h2 class="card-title">Composants</h2>
+        <h2 class="card-title">
+          Composants
+          <span v-if="components.length" class="badge badge-outline badge-sm ml-1">{{ components.length }}</span>
+        </h2>
         <button
           type="button"
           class="btn btn-ghost btn-sm gap-2"
diff --git a/frontend/app/components/machine/MachineDocumentsCard.vue b/frontend/app/components/machine/MachineDocumentsCard.vue
index 4986cb2..c62fb87 100644
--- a/frontend/app/components/machine/MachineDocumentsCard.vue
+++ b/frontend/app/components/machine/MachineDocumentsCard.vue
@@ -3,7 +3,10 @@
     <div class="card-body space-y-4">
       <div class="flex items-center justify-between">
         <div>
-          <h2 class="card-title">Documents de la machine</h2>
+          <h2 class="card-title">
+            Documents de la machine
+            <span v-if="documents.length" class="badge badge-outline badge-sm ml-1">{{ documents.length }}</span>
+          </h2>
           <p class="text-xs text-gray-500">Ajoutez ou consultez les documents liés à cette machine.</p>
         </div>
         <span v-if="isEditMode && files.length" class="badge badge-outline">
diff --git a/frontend/app/components/machine/MachineInfoCard.vue b/frontend/app/components/machine/MachineInfoCard.vue
index 7f86f0c..f35938d 100644
--- a/frontend/app/components/machine/MachineInfoCard.vue
+++ b/frontend/app/components/machine/MachineInfoCard.vue
@@ -15,9 +15,9 @@
             class="input input-bordered"
             @input="$emit('update:machine-name', ($event.target as HTMLInputElement).value)"
           />
-          <div v-else class="input input-bordered bg-base-200">
+          <p v-else class="text-sm font-medium text-base-content py-1">
             {{ machineName }}
-          </div>
+          </p>
         </div>
         <div class="form-control">
           <label class="label">
@@ -38,9 +38,9 @@
               {{ site.name }}
             </option>
           </select>
-          <div v-else class="input input-bordered bg-base-200">
+          <p v-else class="text-sm font-medium text-base-content py-1">
             {{ machineSiteName || 'Non défini' }}
-          </div>
+          </p>
         </div>
         <div v-if="isEditMode || machineReference" class="form-control">
           <label class="label">
@@ -54,9 +54,9 @@
             class="input input-bordered"
             @input="$emit('update:machine-reference', ($event.target as HTMLInputElement).value)"
           />
-          <div v-else class="input input-bordered bg-base-200">
+          <p v-else class="text-sm font-medium text-base-content py-1">
             {{ machineReference }}
-          </div>
+          </p>
         </div>
         <div v-if="isEditMode || hasMachineConstructeur" class="form-control md:col-span-2">
           <label class="label">
@@ -77,9 +77,9 @@
             @update:model-value="$emit('update:constructeur-links', $event)"
             @remove="$emit('remove-constructeur-link', $event)"
           />
-          <div v-else-if="!isEditMode" class="border border-base-300 rounded-btn bg-base-200 px-4 py-2 min-h-12 flex items-center">
-            <span class="text-base-content/50">Non défini</span>
-          </div>
+          <p v-else-if="!isEditMode" class="text-sm font-medium text-base-content/50 py-1">
+            Non défini
+          </p>
         </div>
       </div>
 
@@ -152,9 +152,9 @@
               </div>
             </template>
             <template v-else>
-              <div class="input input-bordered input-sm bg-base-200">
+              <p class="text-sm font-medium text-base-content py-1">
                 {{ formatValueForDisplay(field) }}
-              </div>
+              </p>
             </template>
           </div>
         </div>
diff --git a/frontend/app/components/machine/MachinePiecesCard.vue b/frontend/app/components/machine/MachinePiecesCard.vue
index 68b157b..6f068f9 100644
--- a/frontend/app/components/machine/MachinePiecesCard.vue
+++ b/frontend/app/components/machine/MachinePiecesCard.vue
@@ -2,7 +2,10 @@
   <div class="card bg-base-100 shadow-sm">
     <div class="card-body">
       <div class="flex justify-between items-center mb-4">
-        <h2 class="card-title">Pièces de la machine</h2>
+        <h2 class="card-title">
+          Pièces de la machine
+          <span v-if="pieces.length" class="badge badge-outline badge-sm ml-1">{{ pieces.length }}</span>
+        </h2>
         <button
           type="button"
           class="btn btn-ghost btn-sm gap-2"