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"