feat(ui) : add tabs to product detail page

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

@@ -43,6 +43,13 @@
             @toggle-edit="isEditMode = !isEditMode"
           />
 
+          <EntityTabs
+            v-model="activeTab"
+            :tabs="entityTabs"
+            aria-label="Sections du produit"
+          >
+            <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">
@@ -191,41 +198,13 @@
                     <span class="badge badge-outline">{{ structurePreview }}</span>
                   </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 produit.
-              </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
+                <div class="space-y-4 rounded-lg border border-base-200 bg-base-200/40 p-4">
-            v-if="isEditMode || productDocuments.length > 0"
-            class="space-y-4 rounded-lg border border-base-200 bg-base-200/40 p-4"
-          >
                   <header class="flex flex-col gap-1 md:flex-row md:items-center md:justify-between">
                     <div>
                       <h2 class="font-semibold text-base-content">Documents</h2>
@@ -278,7 +257,47 @@
                     />
                   </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 à ce produit.
+                    </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>
+                <p v-else class="text-sm text-base-content/60">
+                  Aucun champ personnalisé n'est défini pour ce produit.
+                </p>
+              </div>
+            </template>
+
+            <template #tab-history>
+              <div class="space-y-6">
                 <EntityHistorySection
                   :entries="history"
                   :loading="historyLoading"
@@ -294,6 +313,19 @@
                   @restored="loadProduct()"
                 />
 
+                <!-- Comments -->
+                <div class="mt-4">
+                  <CommentSection
+                    entity-type="product"
+                    :entity-id="String(route.params.id)"
+                    :entity-name="product?.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">
@@ -307,16 +339,6 @@
           <p v-if="isEditMode && product && !requiredCustomFieldsFilled" class="text-xs text-error text-right">
             Merci de renseigner tous les champs personnalisés obligatoires.
           </p>
-
-          <!-- Comments -->
-          <div class="mt-4">
-            <CommentSection
-              entity-type="product"
-              :entity-id="String(route.params.id)"
-              :entity-name="product?.name"
-              show-resolved
-            />
-          </div>
         </div>
       </section>
     </main>
@@ -325,7 +347,7 @@
 
 <script setup lang="ts">
 import { computed, onMounted, reactive, ref, watch } from 'vue'
-import { useRoute, useRouter } from '#imports'
+import { useRoute, useRouter, navigateTo } from '#imports'
 import ConstructeurSelect from '~/components/ConstructeurSelect.vue'
 import DocumentUpload from '~/components/DocumentUpload.vue'
 import DocumentPreviewModal from '~/components/DocumentPreviewModal.vue'
@@ -438,6 +460,18 @@ const visibleCustomFields = computed(() => {
   )
 })
 
+const activeTab = ref((route.query.tab as string) || 'general')
+watch(activeTab, (val) => {
+  navigateTo({ query: { ...route.query, tab: val } }, { replace: true })
+})
+
+const entityTabs = computed(() => [
+  { key: 'general', label: 'Général' },
+  { key: 'documents', label: 'Documents', count: productDocuments.value.length },
+  { key: 'custom-fields', label: 'Champs perso', count: visibleCustomFields.value.length },
+  { key: 'history', label: 'Historique' },
+])
+
 const openPreview = (doc: any) => {
   if (!doc || !canPreviewDocument(doc)) return
   previewDocument.value = doc