diff --git a/app/handlers/encounter-init.handler.ts b/app/handlers/encounter-init.handler.ts
index 3e1e85f3..a7f5712d 100644
--- a/app/handlers/encounter-init.handler.ts
+++ b/app/handlers/encounter-init.handler.ts
@@ -47,6 +47,10 @@ const DocUploadListAsync = defineAsyncComponent(() => import('~/components/conte
 const GeneralConsentListAsync = defineAsyncComponent(() => import('~/components/content/general-consent/entry.vue'))
 const ResumeListAsync = defineAsyncComponent(() => import('~/components/content/resume/list.vue'))
 const ControlLetterListAsync = defineAsyncComponent(() => import('~/components/content/control-letter/list.vue'))
+const KfrListAsync = defineAsyncComponent(() => import('~/components/content/kfr/list.vue'))
+const PrbListAsync = defineAsyncComponent(() => import('~/components/content/prb/list.vue'))
+const SurgeryReportListAsync = defineAsyncComponent(() => import('~/components/content/surgery-report/list.vue'))
+const VaccineDataListAsync = defineAsyncComponent(() => import('~/components/content/vaccine-data/list.vue'))
 
 const defaultKeys: Record<string, any> = {
   status: {
@@ -186,8 +190,8 @@ const defaultKeys: Record<string, any> = {
     classCode: ['ambulatory', 'emergency', 'inpatient'],
     unit: 'all',
   },
-  vacsinData: {
-    id: 'vacsin-data',
+  vaccineData: {
+    id: 'vaccine-data',
     title: 'Data Vaksin',
     classCode: ['ambulatory', 'emergency', 'inpatient'],
     unit: 'all',
@@ -210,6 +214,12 @@ const defaultKeys: Record<string, any> = {
     classCode: ['ambulatory', 'emergency'],
     unit: 'all',
   },  
+  kfr: {
+    id: 'kfr',
+    title: 'KFR',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+  },  
   refBack: {
     id: 'reference-back',
     title: 'PRB',
@@ -387,15 +397,31 @@ export function injectComponents(id: string | number, data: EncounterListData, m
     currentKeys.resume['component'] = ResumeListAsync
     currentKeys.resume['props'] = { encounter_id: id }
   }
-  if (currentKeys?.control) {
-    currentKeys.control['component'] = ControlLetterListAsync
-    currentKeys.control['props'] = { encounter: data?.encounter }
+  if (currentKeys?.controlLetter) {
+    currentKeys.controlLetter['component'] = ControlLetterListAsync
+    currentKeys.controlLetter['props'] = { encounter: data?.encounter }
+  }
+  if (currentKeys?.refBack) {
+    currentKeys.refBack['component'] = PrbListAsync
+    currentKeys.refBack['props'] = { encounter: data?.encounter }
+  }
+  if (currentKeys?.kfr) {
+    currentKeys.kfr['component'] = KfrListAsync
+    currentKeys.kfr['props'] = { encounter: data?.encounter }
   }
   if (currentKeys?.screening) {
     // TODO: add component for screening
     currentKeys.screening['component'] = null
     currentKeys.screening['props'] = { encounter_id: id }
   }
+  if (currentKeys?.surgeryReport) {
+    currentKeys.surgeryReport['component'] = SurgeryReportListAsync
+    currentKeys.surgeryReport['props'] = { encounter: data?.encounter }
+  }
+  if (currentKeys?.vaccineData) {
+    currentKeys.vaccineData['component'] = VaccineDataListAsync
+    currentKeys.vaccineData['props'] = { encounter: data?.encounter }
+  }
   if (currentKeys?.supportingDocument) {
     currentKeys.supportingDocument['component'] = DocUploadListAsync
     currentKeys.supportingDocument['props'] = { encounter_id: id }
@@ -492,7 +518,6 @@ export function getMenuItems(
   data: EncounterListData,
   meta: any,
 ) {
-  console.log(props)
   // const normalClassCode = props.classCode === 'ambulatory' ? 'outpatient' : props.classCode
   const normalClassCode = props.classCode === 'ambulatory' ? 'ambulatory' : props.classCode
   const currentKeys = injectComponents(id, data, meta)
diff --git a/app/lib/utils.ts b/app/lib/utils.ts
index d6fa4c95..180320ae 100644
--- a/app/lib/utils.ts
+++ b/app/lib/utils.ts
@@ -3,7 +3,6 @@ import { clsx } from 'clsx'
 import { format } from 'date-fns'
 import { twMerge } from 'tailwind-merge'
 import { toast } from '~/components/pub/ui/toast'
-import { toast } from '~/components/pub/ui/toast'
 
 export interface SelectOptionType<_T = string> {
   value: string
diff --git a/app/pages/(features)/rehab/encounter/[id]/document-upload/[document_id]/edit.vue b/app/pages/(features)/rehab/encounter/[id]/document-upload/[document_id]/edit.vue
new file mode 100644
index 00000000..e06920ba
--- /dev/null
+++ b/app/pages/(features)/rehab/encounter/[id]/document-upload/[document_id]/edit.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+    middleware: ['rbac'],
+    roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+    title: 'Update Dokumen Pendukung',
+    contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+    title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS[`/rehab/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)
+const canRead = true
+</script>
+
+<template>
+    <div>
+        <div v-if="canRead">
+            <ContentDocumentUploadEdit />
+        </div>
+        <Error v-else :status-code="403" />
+    </div>
+</template>
\ No newline at end of file
diff --git a/app/pages/(features)/rehab/encounter/[id]/document-upload/add.vue b/app/pages/(features)/rehab/encounter/[id]/document-upload/add.vue
new file mode 100644
index 00000000..fcc7432e
--- /dev/null
+++ b/app/pages/(features)/rehab/encounter/[id]/document-upload/add.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+    middleware: ['rbac'],
+    roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+    title: 'Tambah Dokumen Pendukung',
+    contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+    title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS[`/rehab/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)
+const canRead = true
+const callbackUrl = route.query['return-path'] as string | undefined
+</script>
+
+<template>
+    <div>
+        <div v-if="canRead">
+            <ContentDocumentUploadAdd :callback-url="callbackUrl" />
+        </div>
+        <Error v-else :status-code="403" />
+    </div>
+</template>
\ No newline at end of file
diff --git a/app/pages/(features)/rehab/encounter/[id]/vaccine-data/[vaccine_data_id]/index.vue b/app/pages/(features)/rehab/encounter/[id]/vaccine-data/[vaccine_data_id]/index.vue
index 322d0ad8..a2f68104 100644
--- a/app/pages/(features)/rehab/encounter/[id]/vaccine-data/[vaccine_data_id]/index.vue
+++ b/app/pages/(features)/rehab/encounter/[id]/vaccine-data/[vaccine_data_id]/index.vue
@@ -16,7 +16,7 @@ useHead({
   title: () => route.meta.title as string,
 })
 
-const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+const roleAccess: PagePermission = PAGE_PERMISSIONS[`/rehab/encounter`]
 
 const { checkRole, hasReadAccess } = useRBAC()