diff --git a/app/components/content/encounter/home.vue b/app/components/content/encounter/home.vue
index 9e71ecd3..40828502 100644
--- a/app/components/content/encounter/home.vue
+++ b/app/components/content/encounter/home.vue
@@ -22,13 +22,15 @@ const authStore = useUserStore()
 const route = useRoute()
 const router = useRouter()
 
-const activeRole = authStore.getActiveRole()
-const activePosition = getPositionAs(activeRole)
 const props = defineProps<{
   classCode?: 'ambulatory' | 'emergency' | 'inpatient' | 'outpatient'
   subClassCode?: 'reg' | 'rehab' | 'chemo' | 'emg' | 'eon' | 'op' | 'icu' | 'hcu' | 'vk'
 }>()
 
+const activeRole = authStore.getActiveRole()
+const activePosition = getPositionAs(activeRole)
+const tabs = ref([] as any)
+
 // activeTab selalu sinkron dengan query param
 const activeTab = computed({
   get: () => (route.query?.tab && typeof route.query.tab === 'string' ? route.query.tab : 'status'),
@@ -291,12 +293,27 @@ const tabsRaws: TabItem[] = [
   },
 ]
 
-const tabs = computed(() => {
+function getTabs() {
   return tabsRaws
     .filter((tab: TabItem) => (tab.groups ? tab.groups.some((group: string) => group?.includes(activePosition)) : true))
+    .filter((tab: TabItem) => (tab.classCode && props.classCode ? tab.classCode.includes(props.classCode) : true))
+    .filter((tab: TabItem) => (tab.subClassCode && props.subClassCode ? tab.subClassCode.includes(props.subClassCode) : true))
     .map((tab: TabItem) => {
       return { ...tab, props: { ...tab.props, encounter: data } }
     })
+}
+
+watch(
+  () => activePosition,
+  () => {
+    if (activePosition) {
+      tabs.value = getTabs()
+    }
+  }
+)
+
+onMounted(() => {
+  tabs.value = getTabs()
 })
 </script>