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"