From 1963ce261dad3223e3de98204c61acd09d0bf013 Mon Sep 17 00:00:00 2001
From: r-dev <matthieu@yuno.malio.fr>
Date: Sat, 4 Apr 2026 16:42:23 +0200
Subject: [PATCH] feat(ui) : replace div-inputs with plain text in entity
 detail pages read mode

---
 frontend/app/pages/component/[id]/index.vue | 34 ++++++-----
 frontend/app/pages/piece/[id].vue           | 65 ++++++++++++---------
 frontend/app/pages/product/[id]/index.vue   | 53 ++++++++++++-----
 3 files changed, 97 insertions(+), 55 deletions(-)

diff --git a/frontend/app/pages/component/[id]/index.vue b/frontend/app/pages/component/[id]/index.vue
index 1610a0e..39b972b 100644
--- a/frontend/app/pages/component/[id]/index.vue
+++ b/frontend/app/pages/component/[id]/index.vue
@@ -81,9 +81,9 @@
                   La catégorie d'origine ne peut pas être modifiée depuis cette page.
                 </p>
               </template>
-              <div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center">
+              <p v-else class="text-sm font-medium text-base-content py-1">
                 {{ selectedType?.name || '—' }}
-              </div>
+              </p>
             </div>
           </div>
 
@@ -102,9 +102,9 @@
                 placeholder="Nom affiché dans le catalogue"
                 required
               >
-              <div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center">
+              <p v-else class="text-sm font-medium text-base-content py-1">
                 {{ component.name }}
-              </div>
+              </p>
             </div>
           </div>
 
@@ -143,9 +143,9 @@
                 :disabled="!canEdit || saving"
                 placeholder="Référence interne ou fournisseur"
               >
-              <div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center">
+              <p v-else class="text-sm font-medium text-base-content py-1">
                 {{ component.reference }}
-              </div>
+              </p>
             </div>
 
             <div v-if="isEditMode || constructeurLinks.length" class="form-control">
@@ -190,9 +190,9 @@
                 :disabled="!canEdit || saving"
                 placeholder="Valeur indicatrice"
               >
-              <div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center">
+              <p v-else class="text-sm font-medium text-base-content py-1">
                 {{ component.prix }} €
-              </div>
+              </p>
             </div>
           </div>
 
@@ -255,7 +255,7 @@
                       </div>
                     </div>
                   </template>
-                  <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'">
+                  <div v-else class="text-sm font-medium py-1 px-2 rounded" :class="slot.isEmpty ? 'border border-error bg-error/10 text-error font-semibold' : 'text-base-content'">
                     <template v-if="slot.isEmpty">{{ slot.label }} — manquant</template>
                     <template v-else>
                       {{ slot.selectedPieceName }}
@@ -285,7 +285,7 @@
                       @update:model-value="(value) => setProductSlotSelection(slot.slotId, value)"
                     />
                   </template>
-                  <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'">
+                  <div v-else class="text-sm font-medium py-1 px-2 rounded" :class="slot.isEmpty ? 'border border-error bg-error/10 text-error font-semibold' : 'text-base-content'">
                     <template v-if="slot.isEmpty">{{ slot.label }} — manquant</template>
                     <template v-else>{{ slot.selectedProductName }}</template>
                   </div>
@@ -312,7 +312,7 @@
                       @update:model-value="(value) => setSubcomponentSlotSelection(slot.slotId, value)"
                     />
                   </template>
-                  <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'">
+                  <div v-else class="text-sm font-medium py-1 px-2 rounded" :class="slot.isEmpty ? 'border border-error bg-error/10 text-error font-semibold' : 'text-base-content'">
                     <template v-if="slot.isEmpty">{{ slot.label }} — manquant</template>
                     <template v-else>{{ slot.selectedComponentName }}</template>
                   </div>
@@ -342,9 +342,9 @@
                   <label class="label">
                     <span class="label-text text-sm">{{ field.name }}</span>
                   </label>
-                  <div class="input input-bordered input-sm bg-base-200 flex items-center">
+                  <p class="text-sm font-medium text-base-content py-1">
                     {{ field.value }}
-                  </div>
+                  </p>
                 </div>
               </div>
             </template>
@@ -415,6 +415,14 @@
             :field-labels="historyFieldLabels"
           />
 
+          <EntityVersionList
+            entity-type="composant"
+            :entity-id="String(route.params.id)"
+            :field-labels="historyFieldLabels"
+            :refresh-key="versionRefreshKey"
+            @restored="fetchComponent()"
+          />
+
           <!-- Save buttons (edit mode only) -->
           <div v-if="isEditMode" class="flex flex-col gap-3 md:flex-row md:justify-end">
             <button type="button" class="btn btn-ghost" :class="{ 'btn-disabled': saving }" @click="isEditMode = false">
diff --git a/frontend/app/pages/piece/[id].vue b/frontend/app/pages/piece/[id].vue
index f9bbeac..2fdbb39 100644
--- a/frontend/app/pages/piece/[id].vue
+++ b/frontend/app/pages/piece/[id].vue
@@ -50,27 +50,40 @@
                 <span class="label-text">Catégorie de pièce</span>
               </label>
               <template v-if="isEditMode">
-                <select
-                  v-model="selectedTypeId"
-                  class="select select-bordered select-sm md:select-md"
-                  disabled
-                >
-                  <option value="">Sélectionner une catégorie</option>
-                  <option
-                    v-for="type in pieceTypeList"
-                    :key="type.id"
-                    :value="type.id"
+                <div class="flex items-center gap-2">
+                  <select
+                    v-model="selectedTypeId"
+                    class="select select-bordered select-sm md:select-md flex-1"
+                    disabled
                   >
-                    {{ type.name }}
-                  </option>
-                </select>
+                    <option value="">Sélectionner une catégorie</option>
+                    <option
+                      v-for="type in pieceTypeList"
+                      :key="type.id"
+                      :value="type.id"
+                    >
+                      {{ type.name }}
+                    </option>
+                  </select>
+                  <NuxtLink
+                    v-if="selectedTypeId"
+                    :to="`/piece-category/${selectedTypeId}/edit`"
+                    class="btn btn-ghost btn-sm"
+                    title="Voir la catégorie"
+                  >
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
+                      <path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z" />
+                      <path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z" />
+                    </svg>
+                  </NuxtLink>
+                </div>
                 <p class="text-xs text-base-content/60 mt-1">
                   La catégorie d'origine ne peut pas être modifiée depuis cette page.
                 </p>
               </template>
-              <div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center">
+              <p v-else class="text-sm font-medium text-base-content py-1">
                 {{ selectedType?.name || '—' }}
-              </div>
+              </p>
             </div>
           </div>
 
@@ -89,9 +102,9 @@
                 placeholder="Nom affiché dans le catalogue"
                 required
               >
-              <div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center">
+              <p v-else class="text-sm font-medium text-base-content py-1">
                 {{ piece.name }}
-              </div>
+              </p>
             </div>
           </div>
 
@@ -118,10 +131,10 @@
             <label class="label">
               <span class="label-text">Référence auto</span>
             </label>
-            <div class="input input-bordered input-sm md:input-md bg-base-200 flex items-center gap-2">
+            <p class="text-sm font-medium text-base-content py-1 flex items-center gap-2">
               <span class="font-mono font-semibold">{{ piece.referenceAuto }}</span>
               <span class="badge badge-sm badge-ghost">auto</span>
-            </div>
+            </p>
           </div>
 
           <!-- Référence + Fournisseurs (if value or edit mode) -->
@@ -141,9 +154,9 @@
                 :disabled="!canEdit || saving"
                 placeholder="Référence interne ou fournisseur"
               >
-              <div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center">
+              <p v-else class="text-sm font-medium text-base-content py-1">
                 {{ piece.reference }}
-              </div>
+              </p>
             </div>
 
             <div v-if="isEditMode || constructeurLinks.length" class="form-control">
@@ -188,9 +201,9 @@
                 :disabled="!canEdit || saving"
                 placeholder="Valeur indicatrice"
               >
-              <div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center">
+              <p v-else class="text-sm font-medium text-base-content py-1">
                 {{ piece.prix }} €
-              </div>
+              </p>
             </div>
           </div>
 
@@ -246,7 +259,7 @@
                 <label class="label">
                   <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 flex items-center" :class="productSelectionLabels[index] ? 'bg-base-200' : 'border-error bg-error/10 text-error font-semibold'">
+                <div class="text-sm font-medium py-1 px-2 rounded" :class="productSelectionLabels[index] ? 'text-base-content' : 'border border-error bg-error/10 text-error font-semibold'">
                   <template v-if="!productSelectionLabels[index]">{{ entry.label }} — manquant</template>
                   <template v-else>{{ productSelectionLabels[index] }}</template>
                 </div>
@@ -284,9 +297,9 @@
                   <label class="label">
                     <span class="label-text text-sm">{{ field.name }}</span>
                   </label>
-                  <div class="input input-bordered input-sm bg-base-200 flex items-center">
+                  <p class="text-sm font-medium text-base-content py-1">
                     {{ field.value }}
-                  </div>
+                  </p>
                 </div>
               </div>
             </template>
diff --git a/frontend/app/pages/product/[id]/index.vue b/frontend/app/pages/product/[id]/index.vue
index 40134af..51de9e1 100644
--- a/frontend/app/pages/product/[id]/index.vue
+++ b/frontend/app/pages/product/[id]/index.vue
@@ -50,19 +50,32 @@
                 <span class="label-text">Catégorie de produit</span>
               </label>
               <template v-if="isEditMode">
-                <input
-                  :value="product?.typeProduct?.name || 'Catégorie inconnue'"
-                  type="text"
-                  class="input input-bordered input-sm md:input-md bg-base-200"
-                  disabled
-                >
+                <div class="flex items-center gap-2">
+                  <input
+                    :value="product?.typeProduct?.name || 'Catégorie inconnue'"
+                    type="text"
+                    class="input input-bordered input-sm md:input-md bg-base-200 flex-1"
+                    disabled
+                  >
+                  <NuxtLink
+                    v-if="product?.typeProduct?.id"
+                    :to="`/product-category/${product.typeProduct.id}/edit`"
+                    class="btn btn-ghost btn-sm"
+                    title="Voir la catégorie"
+                  >
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
+                      <path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z" />
+                      <path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z" />
+                    </svg>
+                  </NuxtLink>
+                </div>
                 <p class="text-xs text-base-content/60 mt-1">
                   La catégorie d'origine ne peut pas être modifiée depuis cette page.
                 </p>
               </template>
-              <div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center">
+              <p v-else class="text-sm font-medium text-base-content py-1">
                 {{ product?.typeProduct?.name || '—' }}
-              </div>
+              </p>
             </div>
           </div>
 
@@ -81,9 +94,9 @@
                 placeholder="Nom affiché dans le catalogue"
                 required
               >
-              <div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center">
+              <p v-else class="text-sm font-medium text-base-content py-1">
                 {{ product.name }}
-              </div>
+              </p>
             </div>
           </div>
 
@@ -104,9 +117,9 @@
                 :disabled="!canEdit || saving"
                 placeholder="Référence interne ou fournisseur"
               >
-              <div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center">
+              <p v-else class="text-sm font-medium text-base-content py-1">
                 {{ product.reference }}
-              </div>
+              </p>
             </div>
 
             <div v-if="isEditMode || editionForm.constructeurIds.length" class="form-control">
@@ -160,9 +173,9 @@
                 :disabled="!canEdit || saving"
                 placeholder="Valeur indicatrice"
               >
-              <div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center">
+              <p v-else class="text-sm font-medium text-base-content py-1">
                 {{ product.supplierPrice }} €
-              </div>
+              </p>
             </div>
           </div>
 
@@ -200,9 +213,9 @@
                   <label class="label">
                     <span class="label-text text-sm">{{ field.name }}</span>
                   </label>
-                  <div class="input input-bordered input-sm bg-base-200 flex items-center">
+                  <p class="text-sm font-medium text-base-content py-1">
                     {{ field.value }}
-                  </div>
+                  </p>
                 </div>
               </div>
             </template>
@@ -273,6 +286,14 @@
             :field-labels="historyFieldLabels"
           />
 
+          <EntityVersionList
+            entity-type="product"
+            :entity-id="String(route.params.id)"
+            :field-labels="historyFieldLabels"
+            :refresh-key="versionRefreshKey"
+            @restored="loadProduct()"
+          />
+
           <!-- Save buttons (edit mode only) -->
           <div v-if="isEditMode" class="flex flex-col gap-3 md:flex-row md:justify-end">
             <button type="button" class="btn btn-ghost" :class="{ 'btn-disabled': saving }" @click="isEditMode = false">