feat(ui) : create EntityTabs shared component for tabbed detail pages

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>