From 54b3b03611874660665439f97bf4fdcdb9bc165c Mon Sep 17 00:00:00 2001
From: r-dev <matthieu@yuno.malio.fr>
Date: Sat, 4 Apr 2026 16:56:45 +0200
Subject: [PATCH] feat(ui) : create EntityTabs shared component for tabbed
 detail pages

---
 frontend/app/components/common/EntityTabs.vue | 42 +++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 frontend/app/components/common/EntityTabs.vue

diff --git a/frontend/app/components/common/EntityTabs.vue b/frontend/app/components/common/EntityTabs.vue
new file mode 100644
index 0000000..80fa409
--- /dev/null
+++ b/frontend/app/components/common/EntityTabs.vue
@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <nav class="tabs tabs-bordered mb-6" role="tablist" :aria-label="ariaLabel">
+      <button
+        v-for="tab in tabs"
+        :key="tab.key"
+        type="button"
+        class="tab"
+        :class="{ 'tab-active': modelValue === tab.key }"
+        role="tab"
+        :aria-selected="modelValue === tab.key"
+        @click="emit('update:modelValue', tab.key)"
+      >
+        {{ tab.label }}
+        <span v-if="tab.count !== undefined && tab.count > 0" class="badge badge-outline badge-xs ml-1.5">
+          {{ tab.count }}
+        </span>
+      </button>
+    </nav>
+    <div role="tabpanel">
+      <slot :name="`tab-${modelValue}`" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+export interface TabDefinition {
+  key: string
+  label: string
+  count?: number
+}
+
+defineProps<{
+  tabs: TabDefinition[]
+  modelValue: string
+  ariaLabel?: string
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+</script>