fix(encounter): add component menu

app/components/content/chemotherapy/process.vue

@@ -3,5 +3,5 @@ import EncounterHome from '~/components/content/encounter/home.vue'
 </script>
 
 <template>
-  <EncounterHome class-code="ambulatory" sub-class-code="chemo" />
+  <EncounterHome display="menu" class-code="ambulatory" sub-class-code="chemo" />
 </template>

app/components/content/encounter/home.vue

@@ -6,6 +6,7 @@ import { getDetail } from '~/services/encounter.service'
 import { getPositionAs } from '~/lib/roles'
 
 import type { TabItem } from '~/components/pub/my-ui/comp-tab/type'
+import CompMenu from '~/components/pub/my-ui/comp-menu/comp-menu.vue'
 import CompTab from '~/components/pub/my-ui/comp-tab/comp-tab.vue'
 
 // PLASE ORDER BY TAB POSITION
@@ -23,6 +24,7 @@ const route = useRoute()
 const router = useRouter()
 
 const props = defineProps<{
+  display?: 'tab' | 'menu'
   classCode?: 'ambulatory' | 'emergency' | 'inpatient' | 'outpatient'
   subClassCode?: 'reg' | 'rehab' | 'chemo' | 'emg' | 'eon' | 'op' | 'icu' | 'hcu' | 'vk'
 }>()
@@ -30,6 +32,7 @@ const props = defineProps<{
 const activeRole = getActiveRole()
 const activePosition = ref(getPositionAs(activeRole))
 const tabs = ref([] as any)
+const currentDisplay = ref(props.display ?? 'tab')
 
 // activeTab selalu sinkron dengan query param
 const activeTab = computed({
@@ -293,11 +296,13 @@ const tabsRaws: TabItem[] = [
   },
 ]
 
-function getTabs() {
+function getMenus() {
   return tabsRaws
     .filter((tab: TabItem) => (tab.groups ? tab.groups.some((group: string) => group === activePosition.value) : false))
     .filter((tab: TabItem) => (tab.classCode && props.classCode ? tab.classCode.includes(props.classCode) : false))
-    .filter((tab: TabItem) => (tab.subClassCode && props.subClassCode ? tab.subClassCode.includes(props.subClassCode) : false))
+    .filter((tab: TabItem) =>
+      tab.subClassCode && props.subClassCode ? tab.subClassCode.includes(props.subClassCode) : false,
+    )
     .map((tab: TabItem) => {
       return { ...tab, props: { ...tab.props, encounter: data } }
     })
@@ -306,11 +311,11 @@ function getTabs() {
 watch(getActiveRole, () => {
   const activeRole = getActiveRole()
   activePosition.value = getPositionAs(activeRole)
-  tabs.value = getTabs()
+  tabs.value = getMenus()
 })
 
 onMounted(() => {
-  tabs.value = getTabs()
+  tabs.value = getMenus()
 })
 </script>
 
@@ -321,6 +326,13 @@ onMounted(() => {
     </div>
     <AppEncounterQuickInfo :data="data" />
     <CompTab
+      v-if="currentDisplay === 'tab'"
+      :data="tabs"
+      :initial-active-tab="activeTab"
+      @change-tab="activeTab = $event"
+    />
+    <CompMenu
+      v-else-if="currentDisplay === 'menu'"
       :data="tabs"
       :initial-active-tab="activeTab"
       @change-tab="activeTab = $event"

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

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { type TabItem } from '../comp-tab/type'
+
+const props = defineProps<{
+  initialActiveTab: string
+  data: TabItem[]
+}>()
+
+const activeMenu = ref(props.initialActiveTab)
+const emit = defineEmits<{
+  changeMenu: [value: string]
+}>()
+
+function changeMenu(value: string) {
+  activeMenu.value = value
+  emit('changeMenu', value)
+}
+</script>
+
+<template>
+  <div class="mt-4 flex gap-4">
+    <!-- Menu Sidebar -->
+    <div v-if="data.length > 0" class="w-72 flex-shrink-0 rounded-md border bg-white shadow-sm dark:bg-neutral-950">
+      <div class="max-h-[calc(100vh-12rem)] overflow-y-auto p-2">
+        <button
+          v-for="menu in data"
+          :key="menu.value"
+          :data-active="activeMenu === menu.value"
+          class="w-full rounded-md px-4 py-3 text-left text-sm transition-colors data-[active=false]:text-gray-700 data-[active=false]:hover:bg-gray-100 data-[active=true]:bg-primary data-[active=true]:text-white dark:data-[active=false]:text-gray-300 dark:data-[active=false]:hover:bg-neutral-800"
+          @click="changeMenu(menu.value)"
+        >
+          {{ menu.label }}
+        </button>
+      </div>
+    </div>
+
+    <!-- Active Menu Content -->
+    <div v-if="data.find((m) => m.value === activeMenu)?.component" class="flex-1 rounded-md border bg-white p-4 shadow-sm dark:bg-neutral-950">
+      <component
+        :is="data.find((m) => m.value === activeMenu)?.component"
+        v-bind="data.find((m) => m.value === activeMenu)?.props"
+      />
+    </div>
+  </div>
+</template>
+