fix(encounter): menu activation logic by syncing active

app/components/app/encounter/history-button-menu.vue

@@ -2,6 +2,12 @@
 // Components
 import { Button } from '~/components/pub/ui/button'
 
+const route = useRoute()
+const router = useRouter()
+
+// Track active menu item from query param
+const activeMenu = computed(() => route.query.menu as string || '')
+
 interface ButtonItems {
   label: string
   icon: string
@@ -64,16 +70,20 @@ const itemsTwo: ButtonItems[] = [
   {
     label: 'Tarif Tindakan',
     icon: 'i-lucide-banknote-arrow-down',
-    value: 'action-fee',
+    value: 'price-list',
     type: 'icon',
   },
   {
     label: 'Tarif Tindakan Paket',
     icon: 'i-lucide-banknote-arrow-down',
-    value: 'action-fee-package',
+    value: 'price-list-package',
     type: 'icon',
   },
 ]
+
+function handleClick(value: string) {
+  router.replace({ path: route.path, query: { menu: value } })
+}
 </script>
 
 <template>
@@ -83,7 +93,13 @@ const itemsTwo: ButtonItems[] = [
     <Button
       v-for="item in itemsOne"
       :key="item.value"
-      class="flex items-center gap-2 rounded-lg border border-orange-300 bg-white px-3 py-1 text-sm font-medium text-orange-500 hover:bg-orange-400 hover:text-white"
+      :class="[
+        'flex items-center gap-2 rounded-lg border px-3 py-1 text-sm font-medium transition-colors',
+        activeMenu === item.value
+          ? 'border-orange-500 bg-orange-500 text-white'
+          : 'border-orange-300 bg-white text-orange-500 hover:bg-orange-400 hover:text-white'
+      ]"
+      @click="handleClick(item.value)"
     >
       <Icon
         :name="item.icon"
@@ -97,7 +113,13 @@ const itemsTwo: ButtonItems[] = [
     <Button
       v-for="item in itemsTwo"
       :key="item.value"
-      class="flex items-center gap-2 rounded-lg border border-orange-300 bg-white px-3 py-1 text-sm font-medium text-orange-500 hover:bg-orange-400 hover:text-white"
+      :class="[
+        'flex items-center gap-2 rounded-lg border px-3 py-1 text-sm font-medium transition-colors',
+        activeMenu === item.value
+          ? 'border-orange-500 bg-orange-500 text-white'
+          : 'border-orange-300 bg-white text-orange-500 hover:bg-orange-400 hover:text-white'
+      ]"
+      @click="handleClick(item.value)"
     >
       <Icon
         :name="item.icon"

app/components/content/encounter/home.vue

@@ -37,10 +37,10 @@ const tabs = ref([] as any)
 const currentDisplay = ref(props.display ?? 'tab')
 
 // activeTab selalu sinkron dengan query param
-const activeTab = computed({
-  get: () => (route.query?.tab && typeof route.query.tab === 'string' ? route.query.tab : 'status'),
-  set: (val: string) => {
-    router.replace({ path: route.path, query: { tab: val } })
+const activeMenu = computed({
+  get: () => (route.query?.menu && typeof route.query.menu === 'string' ? route.query.menu : 'status'),
+  set: (value: string) => {
+    router.replace({ path: route.path, query: { menu: value } })
   },
 })
 
@@ -413,14 +413,14 @@ onMounted(async () => {
     <CompTab
       v-if="currentDisplay === 'tab'"
       :data="tabs"
-      :initial-active-tab="activeTab"
-      @change-tab="activeTab = $event"
+      :initial-active-tab="activeMenu"
+      @change-tab="activeMenu = $event"
     />
     <CompMenu
       v-else-if="currentDisplay === 'menu'"
       :data="tabs"
-      :initial-active-tab="activeTab"
-      @change-tab="activeTab = $event"
+      :initial-active-menu="activeMenu"
+      @change-menu="activeMenu = $event"
     />
   </div>
 </template>

app/components/pub/my-ui/comp-menu/comp-menu.vue

@@ -2,11 +2,11 @@
 import { type TabItem } from '../comp-tab/type'
 
 const props = defineProps<{
-  initialActiveTab: string
+  initialActiveMenu: string
   data: TabItem[]
 }>()
 
-const activeMenu = ref(props.initialActiveTab)
+const activeMenu = ref(props.initialActiveMenu)
 const emit = defineEmits<{
   changeMenu: [value: string]
 }>()