feat(ui) : add tabs to component detail page

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

@@ -43,6 +43,9 @@
             @toggle-edit="isEditMode = !isEditMode"
           />
 
+          <EntityTabs v-model="activeTab" :tabs="entityTabs" aria-label="Sections composant">
+            <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">
@@ -195,7 +198,11 @@
                     </p>
                   </div>
                 </div>
+              </div>
+            </template>
 
+            <template #tab-structure>
+              <div class="space-y-6">
                 <!-- Skeleton preview (edit mode only) -->
                 <StructureSkeletonPreview
                   v-if="isEditMode && selectedType"
@@ -320,36 +327,10 @@
                     </div>
                   </div>
                 </div>
-
-          <!-- 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 à ce composant.
-              </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>
               <!-- Documents -->
               <div
                 v-if="isEditMode || componentDocuments.length > 0"
@@ -407,7 +388,41 @@
                   />
                 </template>
               </div>
+            </template>
 
+            <template #tab-custom-fields>
+              <!-- 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 à ce composant.
+                  </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>
+
+            <template #tab-history>
+              <div class="space-y-6">
                 <EntityHistorySection
                   :entries="history"
                   :loading="historyLoading"
@@ -423,17 +438,6 @@
                   @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">
-              Annuler
-            </button>
-            <button type="button" class="btn btn-primary" :disabled="!canSubmit" @click="submitEdition">
-              <span v-if="saving" class="loading loading-spinner loading-sm mr-2" />
-              Enregistrer les modifications
-            </button>
-          </div>
-
                 <!-- Comments -->
                 <div class="mt-4">
                   <CommentSection
@@ -444,6 +448,20 @@
                   />
                 </div>
               </div>
+            </template>
+          </EntityTabs>
+
+          <!-- Save/Cancel buttons (outside tabs) -->
+          <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">
+              Annuler
+            </button>
+            <button type="button" class="btn btn-primary" :disabled="!canSubmit" @click="submitEdition">
+              <span v-if="saving" class="loading loading-spinner loading-sm mr-2" />
+              Enregistrer les modifications
+            </button>
+          </div>
+        </div>
       </section>
     </main>
   </div>
@@ -466,6 +484,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 {
   component,
   loading,
@@ -547,6 +570,14 @@ const visibleCustomFields = computed(() => {
   )
 })
 
+const entityTabs = computed(() => [
+  { key: 'general', label: 'Général' },
+  { key: 'structure', label: 'Structure', count: pieceSlotEntries.value.length + productSlotEntries.value.length + subcomponentSlotEntries.value.length },
+  { key: 'documents', label: 'Documents', count: componentDocuments.value.length },
+  { key: 'custom-fields', label: 'Champs perso', count: visibleCustomFields.value.length },
+  { key: 'history', label: 'Historique' },
+])
+
 const openEditModal = (doc: any) => {
   editingDocument.value = doc
   editModalVisible.value = true