feat(ui) : add tabs to piece detail page

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

@@ -43,6 +43,13 @@
             @toggle-edit="isEditMode = !isEditMode"
           />
 
+          <EntityTabs
+            v-model="activeTab"
+            :tabs="entityTabs"
+            aria-label="Sections de la pièce"
+          >
+            <template #tab-general>
+              <div class="space-y-6">
                 <!-- Catégorie (always shown) -->
                 <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
                   <div class="form-control">
@@ -207,6 +214,19 @@
                   </div>
                 </div>
 
+                <!-- Skeleton preview (edit mode only) -->
+                <StructureSkeletonPreview
+                  v-if="isEditMode && (selectedType || resolvedStructure)"
+                  :structure="resolvedStructure"
+                  :description="selectedType?.description || 'Ce squelette définit la structure et les champs personnalisés de la pièce.'"
+                  :preview-badge="formatPieceStructurePreview(resolvedStructure)"
+                  variant="piece"
+                />
+              </div>
+            </template>
+
+            <template #tab-products>
+              <div class="space-y-6">
                 <!-- Product requirements -->
                 <div
                   v-if="structureProducts.length"
@@ -266,45 +286,11 @@
                     </div>
                   </div>
                 </div>
-
-          <!-- Skeleton preview (edit mode only) -->
-          <StructureSkeletonPreview
-            v-if="isEditMode && (selectedType || resolvedStructure)"
-            :structure="resolvedStructure"
-            :description="selectedType?.description || 'Ce squelette définit la structure et les champs personnalisés de la pièce.'"
-            :preview-badge="formatPieceStructurePreview(resolvedStructure)"
-            variant="piece"
-          />
-
-          <!-- Custom fields -->
-          <div v-if="visibleCustomFields.length" class="space-y-4 rounded-lg border border-base-200 bg-base-200/40 p-4">
-            <header class="space-y-1">
-              <h2 class="font-semibold text-base-content">Champs personnalisés</h2>
-              <p v-if="isEditMode" class="text-xs text-base-content/70">
-                Mettez à jour les valeurs propres à cette pièce.
-              </p>
-            </header>
-            <template v-if="isEditMode">
-              <CustomFieldInputGrid :fields="customFieldInputs" :disabled="!canEdit || saving" />
-            </template>
-            <template v-else>
-              <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
-                <div
-                  v-for="field in visibleCustomFields"
-                  :key="field.customFieldValueId || field.customFieldId || field.name"
-                  class="form-control"
-                >
-                  <label class="label">
-                    <span class="label-text text-sm">{{ field.name }}</span>
-                  </label>
-                  <p class="text-sm font-medium text-base-content py-1">
-                    {{ field.value }}
-                  </p>
-                </div>
               </div>
             </template>
-          </div>
 
+            <template #tab-documents>
+              <div class="space-y-6">
                 <!-- Documents -->
                 <div
                   v-if="isEditMode || pieceDocuments.length > 0"
@@ -362,7 +348,44 @@
                     />
                   </template>
                 </div>
+              </div>
+            </template>
 
+            <template #tab-custom-fields>
+              <div class="space-y-6">
+                <!-- Custom fields -->
+                <div v-if="visibleCustomFields.length" class="space-y-4 rounded-lg border border-base-200 bg-base-200/40 p-4">
+                  <header class="space-y-1">
+                    <h2 class="font-semibold text-base-content">Champs personnalisés</h2>
+                    <p v-if="isEditMode" class="text-xs text-base-content/70">
+                      Mettez à jour les valeurs propres à cette pièce.
+                    </p>
+                  </header>
+                  <template v-if="isEditMode">
+                    <CustomFieldInputGrid :fields="customFieldInputs" :disabled="!canEdit || saving" />
+                  </template>
+                  <template v-else>
+                    <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+                      <div
+                        v-for="field in visibleCustomFields"
+                        :key="field.customFieldValueId || field.customFieldId || field.name"
+                        class="form-control"
+                      >
+                        <label class="label">
+                          <span class="label-text text-sm">{{ field.name }}</span>
+                        </label>
+                        <p class="text-sm font-medium text-base-content py-1">
+                          {{ field.value }}
+                        </p>
+                      </div>
+                    </div>
+                  </template>
+                </div>
+              </div>
+            </template>
+
+            <template #tab-history>
+              <div class="space-y-6">
                 <EntityHistorySection
                   :entries="history"
                   :loading="historyLoading"
@@ -378,6 +401,19 @@
                   @restored="fetchPiece()"
                 />
 
+                <!-- Comments -->
+                <div class="mt-4">
+                  <CommentSection
+                    entity-type="piece"
+                    :entity-id="String(route.params.id)"
+                    :entity-name="piece?.name"
+                    show-resolved
+                  />
+                </div>
+              </div>
+            </template>
+          </EntityTabs>
+
           <!-- 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">
@@ -388,16 +424,6 @@
               Enregistrer les modifications
             </button>
           </div>
-
-          <!-- Comments -->
-          <div class="mt-4">
-            <CommentSection
-              entity-type="piece"
-              :entity-id="String(route.params.id)"
-              :entity-name="piece?.name"
-              show-resolved
-            />
-          </div>
         </div>
       </section>
     </main>
@@ -418,6 +444,11 @@ const { updateDocument } = useDocuments()
 const isEditMode = ref(false)
 const versionRefreshKey = ref(0)
 
+const activeTab = ref((route.query.tab as string) || 'general')
+watch(activeTab, (val) => {
+  navigateTo({ query: { ...route.query, tab: val } }, { replace: true })
+})
+
 const {
   piece,
   loading,
@@ -454,6 +485,14 @@ const {
   formatPieceStructurePreview,
 } = usePieceEdit(String(route.params.id))
 
+const entityTabs = computed(() => [
+  { key: 'general', label: 'Général' },
+  { key: 'products', label: 'Produits liés', count: structureProducts.value.length },
+  { key: 'documents', label: 'Documents', count: pieceDocuments.value.length },
+  { key: 'custom-fields', label: 'Champs perso', count: visibleCustomFields.value.length },
+  { key: 'history', label: 'Historique' },
+])
+
 const submitEdition = async () => {
   await _submitEdition()
   if (!saving.value) {