diff --git a/app/pages/(features)/emergency/encounter/add.vue b/app/pages/(features)/emergency/encounter/add.vue
index aa382643..587e00e7 100644
--- a/app/pages/(features)/emergency/encounter/add.vue
+++ b/app/pages/(features)/emergency/encounter/add.vue
@@ -1,44 +1,46 @@
 <script setup lang="ts">
-import type { PagePermission } from '~/models/role'
+import type { Permission } from '~/models/role'
+import { permissions } from '~/const/page-permission/outpatient'
 import Error from '~/components/pub/my-ui/error/error.vue'
-import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+import Content from '~/components/content/encounter/entry.vue'
 
 definePageMeta({
   middleware: ['rbac'],
-  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  roles: ['emp|reg'],
   title: 'Tambah Kunjungan',
   contentFrame: 'cf-full-width',
 })
 
-const route = useRoute()
-
-useHead({
-  title: () => `${route.meta.title}`, // backtick to avoid the ts-plugin(2322) warning
-})
-
-const roleAccess: PagePermission = PAGE_PERMISSIONS['/emergency/encounter']
-
-const { checkRole, hasCreateAccess } = useRBAC()
+// Preps role checking
+const roleAccess: Record<string, Permission[]> = permissions['/outpatient/encounter'] || {}
+const { checkRole, hasReadAccess, hasCreateAccess } = useRBAC()
 
 // Check if user has access to this page
 const hasAccess = checkRole(roleAccess)
 if (!hasAccess) {
-  throw createError({
-    statusCode: 403,
-    statusMessage: 'Access denied',
-  })
+  navigateTo('/403')
 }
 
+// Define permission-based computed properties
+const canRead = hasReadAccess(roleAccess)
+
+// Page needs
+const route = useRoute()
+useHead({
+  title: () => route.meta.title as string,
+})
+
 // Define permission-based computed properties
 const canCreate = hasCreateAccess(roleAccess)
 </script>
 
 <template>
   <div v-if="canCreate">
-    <ContentEncounterEntry
+    <Content
       :id="0"
       class-code="emergency"
-      sub-class-code="emg"
+      sub-class-code="reg"
       form-type="Tambah"
     />
   </div>
diff --git a/app/pages/(features)/emergency/encounter/index.vue b/app/pages/(features)/emergency/encounter/index.vue
index ed05c25e..1d5827c5 100644
--- a/app/pages/(features)/emergency/encounter/index.vue
+++ b/app/pages/(features)/emergency/encounter/index.vue
@@ -1,23 +1,19 @@
 <script setup lang="ts">
-import type { PagePermission } from '~/models/role'
+import type { Permission } from '~/models/role'
+import { permissions } from '~/const/page-permission/outpatient'
 import Error from '~/components/pub/my-ui/error/error.vue'
-import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+import Content from '~/components/content/encounter/list.vue'
 
 definePageMeta({
   middleware: ['rbac'],
-  roles: ['system', 'doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  roles: ['emp|reg', 'emp|nur', 'emp|doc', 'emp|miw', 'emp|thr', 'emp|nut', 'emp|pha', 'emp|lab'],
   title: 'Daftar Kunjungan',
   contentFrame: 'cf-full-width',
 })
 
-const route = useRoute()
-
-useHead({
-  title: () => route.meta.title as string,
-})
-
-const roleAccess: PagePermission = PAGE_PERMISSIONS['/emergency/encounter']
-
+// Preps role checking
+const roleAccess: Record<string, Permission[]> = permissions['/outpatient/encounter'] || {}
 const { checkRole, hasReadAccess } = useRBAC()
 
 // Check if user has access to this page
@@ -28,14 +24,28 @@ if (!hasAccess) {
 
 // Define permission-based computed properties
 const canRead = hasReadAccess(roleAccess)
+
+// Page needs
+const route = useRoute()
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const { user, getActiveRole } = useUserStore()
+// const activeRole = getActiveRole()
+// const activeRoleParts = activeRole ? activeRole.split('|') : ['', '']
+// const activeRolePos = activeRoleParts[0] // reaching this page means it is already set
+// const activeRoleType = activeRoleParts[1] == 'rehab' ? activeRoleParts[1] : ''
+const subClassCode = user.unit_code == 'rehab' ? 'rehab' : 'reg'
+
 </script>
 
 <template>
   <div>
     <div v-if="canRead">
-      <ContentEncounterList
+      <Content
         class-code="emergency"
-        sub-class-code="emg"
+        sub-class-code="reg"
         type="encounter"
       />
     </div>
diff --git a/app/pages/(features)/inpatient/encounter/add.vue b/app/pages/(features)/inpatient/encounter/add.vue
index bd827f79..3f2c8245 100644
--- a/app/pages/(features)/inpatient/encounter/add.vue
+++ b/app/pages/(features)/inpatient/encounter/add.vue
@@ -1,44 +1,46 @@
 <script setup lang="ts">
-import type { PagePermission } from '~/models/role'
+import type { Permission } from '~/models/role'
+import { permissions } from '~/const/page-permission/outpatient'
 import Error from '~/components/pub/my-ui/error/error.vue'
-import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+import Content from '~/components/content/encounter/entry.vue'
 
 definePageMeta({
   middleware: ['rbac'],
-  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  roles: ['emp|reg'],
   title: 'Tambah Kunjungan',
   contentFrame: 'cf-full-width',
 })
 
-const route = useRoute()
-
-useHead({
-  title: () => `${route.meta.title}`, // backtick to avoid the ts-plugin(2322) warning
-})
-
-const roleAccess: PagePermission = PAGE_PERMISSIONS['/inpatient/encounter']
-
-const { checkRole, hasCreateAccess } = useRBAC()
+// Preps role checking
+const roleAccess: Record<string, Permission[]> = permissions['/outpatient/encounter'] || {}
+const { checkRole, hasReadAccess, hasCreateAccess } = useRBAC()
 
 // Check if user has access to this page
 const hasAccess = checkRole(roleAccess)
 if (!hasAccess) {
-  throw createError({
-    statusCode: 403,
-    statusMessage: 'Access denied',
-  })
+  navigateTo('/403')
 }
 
+// Define permission-based computed properties
+const canRead = hasReadAccess(roleAccess)
+
+// Page needs
+const route = useRoute()
+useHead({
+  title: () => route.meta.title as string,
+})
+
 // Define permission-based computed properties
 const canCreate = hasCreateAccess(roleAccess)
 </script>
 
 <template>
   <div v-if="canCreate">
-    <ContentEncounterEntry
+    <Content
       :id="0"
-      class-code="inpatient"
-      sub-class-code="icu"
+      class-code="ambulatory"
+      sub-class-code="reg"
       form-type="Tambah"
     />
   </div>
diff --git a/app/pages/(features)/inpatient/encounter/index.vue b/app/pages/(features)/inpatient/encounter/index.vue
index 7c9d1ac5..c40fec0b 100644
--- a/app/pages/(features)/inpatient/encounter/index.vue
+++ b/app/pages/(features)/inpatient/encounter/index.vue
@@ -1,23 +1,19 @@
 <script setup lang="ts">
-import type { PagePermission } from '~/models/role'
+import type { Permission } from '~/models/role'
+import { permissions } from '~/const/page-permission/outpatient'
 import Error from '~/components/pub/my-ui/error/error.vue'
-import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+import Content from '~/components/content/encounter/list.vue'
 
 definePageMeta({
   middleware: ['rbac'],
-  roles: ['system', 'doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  roles: ['emp|reg', 'emp|nur', 'emp|doc', 'emp|miw', 'emp|thr', 'emp|nut', 'emp|pha', 'emp|lab'],
   title: 'Daftar Kunjungan',
   contentFrame: 'cf-full-width',
 })
 
-const route = useRoute()
-
-useHead({
-  title: () => route.meta.title as string,
-})
-
-const roleAccess: PagePermission = PAGE_PERMISSIONS['/inpatient/encounter']
-
+// Preps role checking
+const roleAccess: Record<string, Permission[]> = permissions['/outpatient/encounter'] || {}
 const { checkRole, hasReadAccess } = useRBAC()
 
 // Check if user has access to this page
@@ -28,14 +24,28 @@ if (!hasAccess) {
 
 // Define permission-based computed properties
 const canRead = hasReadAccess(roleAccess)
+
+// Page needs
+const route = useRoute()
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const { user, getActiveRole } = useUserStore()
+// const activeRole = getActiveRole()
+// const activeRoleParts = activeRole ? activeRole.split('|') : ['', '']
+// const activeRolePos = activeRoleParts[0] // reaching this page means it is already set
+// const activeRoleType = activeRoleParts[1] == 'rehab' ? activeRoleParts[1] : ''
+const subClassCode = user.unit_code == 'rehab' ? 'rehab' : 'reg'
+
 </script>
 
 <template>
   <div>
     <div v-if="canRead">
-      <ContentEncounterList
+      <Content
         class-code="inpatient"
-        sub-class-code="vk"
+        sub-class-code="reg"
         type="encounter"
       />
     </div>
diff --git a/app/pages/(features)/outpatient/polyclinic-queue/index.vue b/app/pages/(features)/outpatient/encounter-queue/index.vue
similarity index 100%
rename from app/pages/(features)/outpatient/polyclinic-queue/index.vue
rename to app/pages/(features)/outpatient/encounter-queue/index.vue
diff --git a/app/pages/(features)/outpatient/encounter/[id]/process.vue b/app/pages/(features)/outpatient/encounter/[id]/process.vue
new file mode 100644
index 00000000..dfe36eed
--- /dev/null
+++ b/app/pages/(features)/outpatient/encounter/[id]/process.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { Permission } from '~/models/role'
+import { permissions } from '~/const/page-permission/outpatient'
+import Error from '~/components/pub/my-ui/error/error.vue'
+
+import Content from '~/components/content/encounter/process.vue'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['emp|doc', 'emp|nur', 'emp|reg', 'emp|pha', 'emp|pay', 'emp|mng'],
+  title: 'Tambah Kunjungan',
+  contentFrame: 'cf-full-width',
+})
+
+// Preps role checking
+const roleAccess: Record<string, Permission[]> = permissions['/outpatient/encounter'] || {}
+const { checkRole, hasReadAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  navigateTo('/403')
+}
+
+// Define permission-based computed properties
+const canRead = hasReadAccess(roleAccess)
+
+// Page needs
+const route = useRoute()
+useHead({
+  title: () => `${route.meta.title}`,
+})
+
+</script>
+
+<template>
+    <div v-if="canRead">
+    <Content />
+  </div>
+  <Error v-else :status-code="403" />
+</template>
diff --git a/app/pages/(features)/outpatient/encounter/add.vue b/app/pages/(features)/outpatient/encounter/add.vue
index 948b16c6..3f2c8245 100644
--- a/app/pages/(features)/outpatient/encounter/add.vue
+++ b/app/pages/(features)/outpatient/encounter/add.vue
@@ -1,41 +1,43 @@
 <script setup lang="ts">
-import type { PagePermission } from '~/models/role'
+import type { Permission } from '~/models/role'
+import { permissions } from '~/const/page-permission/outpatient'
 import Error from '~/components/pub/my-ui/error/error.vue'
-import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+import Content from '~/components/content/encounter/entry.vue'
 
 definePageMeta({
   middleware: ['rbac'],
-  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  roles: ['emp|reg'],
   title: 'Tambah Kunjungan',
   contentFrame: 'cf-full-width',
 })
 
-const route = useRoute()
-
-useHead({
-  title: () => `${route.meta.title}`, // backtick to avoid the ts-plugin(2322) warning
-})
-
-const roleAccess: PagePermission = PAGE_PERMISSIONS['/outpatient/encounter']
-
-const { checkRole, hasCreateAccess } = useRBAC()
+// Preps role checking
+const roleAccess: Record<string, Permission[]> = permissions['/outpatient/encounter'] || {}
+const { checkRole, hasReadAccess, hasCreateAccess } = useRBAC()
 
 // Check if user has access to this page
 const hasAccess = checkRole(roleAccess)
 if (!hasAccess) {
-  throw createError({
-    statusCode: 403,
-    statusMessage: 'Access denied',
-  })
+  navigateTo('/403')
 }
 
+// Define permission-based computed properties
+const canRead = hasReadAccess(roleAccess)
+
+// Page needs
+const route = useRoute()
+useHead({
+  title: () => route.meta.title as string,
+})
+
 // Define permission-based computed properties
 const canCreate = hasCreateAccess(roleAccess)
 </script>
 
 <template>
   <div v-if="canCreate">
-    <ContentEncounterEntry
+    <Content
       :id="0"
       class-code="ambulatory"
       sub-class-code="reg"
diff --git a/app/pages/(features)/outpatient/encounter/index.vue b/app/pages/(features)/outpatient/encounter/index.vue
index 1e679c5d..24520382 100644
--- a/app/pages/(features)/outpatient/encounter/index.vue
+++ b/app/pages/(features)/outpatient/encounter/index.vue
@@ -1,23 +1,19 @@
 <script setup lang="ts">
-import type { PagePermission } from '~/models/role'
+import type { Permission } from '~/models/role'
+import { permissions } from '~/const/page-permission/outpatient'
 import Error from '~/components/pub/my-ui/error/error.vue'
-import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+import Content from '~/components/content/encounter/list.vue'
 
 definePageMeta({
   middleware: ['rbac'],
-  roles: ['system', 'doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  roles: ['emp|reg', 'emp|nur', 'emp|doc', 'emp|miw', 'emp|thr', 'emp|nut', 'emp|pha', 'emp|lab'],
   title: 'Daftar Kunjungan',
   contentFrame: 'cf-full-width',
 })
 
-const route = useRoute()
-
-useHead({
-  title: () => route.meta.title as string,
-})
-
-const roleAccess: PagePermission = PAGE_PERMISSIONS['/outpatient/encounter']
-
+// Preps role checking
+const roleAccess: Record<string, Permission[]> = permissions['/outpatient/encounter'] || {}
 const { checkRole, hasReadAccess } = useRBAC()
 
 // Check if user has access to this page
@@ -28,15 +24,28 @@ if (!hasAccess) {
 
 // Define permission-based computed properties
 const canRead = hasReadAccess(roleAccess)
+
+// Page needs
+const route = useRoute()
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const { user, getActiveRole } = useUserStore()
+// const activeRole = getActiveRole()
+// const activeRoleParts = activeRole ? activeRole.split('|') : ['', '']
+// const activeRolePos = activeRoleParts[0] // reaching this page means it is already set
+// const activeRoleType = activeRoleParts[1] == 'rehab' ? activeRoleParts[1] : ''
+const subClassCode = user.unit_code == 'rehab' ? 'rehab' : 'reg'
+
 </script>
 
 <template>
   <div>
     <div v-if="canRead">
-      <ContentEncounterList
+      <Content
         class-code="ambulatory"
-        sub-class-code="reg"
-        type="encounter"
+        :sub-class-code="subClassCode"
       />
     </div>
     <Error