diff --git a/app/components/app/encounter/assesment-function/entry-form.vue b/app/components/app/encounter/assesment-function/entry-form.vue
new file mode 100644
index 00000000..5768c6a0
--- /dev/null
+++ b/app/components/app/encounter/assesment-function/entry-form.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import Block from '~/components/pub/form/block.vue'
+import FieldGroup from '~/components/pub/form/field-group.vue'
+import Field from '~/components/pub/form/field.vue'
+import Label from '~/components/pub/form/label.vue'
+</script>
+
+<template>
+  <form id="entry-form">
+    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+      <Icon name="i-lucide-user" class="me-2" />
+      <span class="font-semibold">Tambah</span> Pasien
+    </div>
+
+    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+      <Block>
+        <FieldGroup :column="3">
+          <Label>Nama</Label>
+          <Field>
+            <Input type="text" name="name" />
+          </Field>
+        </FieldGroup>
+        <FieldGroup :column="3">
+          <Label>Nama</Label>
+          <Field>
+            <Input type="text" name="name" />
+          </Field>
+        </FieldGroup>
+        <FieldGroup :column="3">
+          <Label>Nomor RM</Label>
+          <Field>
+            <Input type="text" name="name" />
+          </Field>
+        </FieldGroup>
+        <FieldGroup>
+          <Label dynamic>Alamat</Label>
+          <Field>
+            <Input type="text" name="name" />
+          </Field>
+        </FieldGroup>
+      </Block>
+    </div>
+    <div class="my-2 flex justify-end py-2">
+      <PubNavFooterCsd />
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/encounter/assesment-function/list-cfg.ts b/app/components/app/encounter/assesment-function/list-cfg.ts
new file mode 100644
index 00000000..24cc80d1
--- /dev/null
+++ b/app/components/app/encounter/assesment-function/list-cfg.ts
@@ -0,0 +1,112 @@
+import type { Col, KeyLabel, RecComponent, RecStrFuncComponent, RecStrFuncUnknown, Th } from '~/components/pub/custom-ui/data/types'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/custom-ui/data/dropdown-action-dud.vue'))
+
+export const cols: Col[] = [
+  {},
+  {},
+  {},
+  { width: 100 },
+  { width: 120 },
+  {},
+  {},
+  {},
+  { width: 100 },
+  { width: 100 },
+  {},
+  { width: 50 },
+]
+
+export const header: Th[][] = [
+  [
+    { label: 'Nama' },
+    { label: 'Rekam Medis' },
+    { label: 'KTP' },
+    { label: 'Tgl Lahir' },
+    { label: 'Umur' },
+    { label: 'JK' },
+    { label: 'Pendidikan' },
+    { label: 'Status' },
+    { label: '' },
+  ],
+]
+
+export const keys = [
+  'name',
+  'medicalRecord_number',
+  'identity_number',
+  'birth_date',
+  'patient_age',
+  'gender',
+  'education',
+  'status',
+  'action',
+]
+
+export const delKeyNames: KeyLabel[] = [
+  { key: 'code', label: 'Kode' },
+  { key: 'name', label: 'Nama' },
+]
+
+export const funcParsed: RecStrFuncUnknown = {
+  name: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    return `${recX.firstName} ${recX.middleName || ''} ${recX.lastName || ''}`
+  },
+  identity_number: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    if (recX.identity_number?.substring(0, 5) === 'BLANK') {
+      return '(TANPA NIK)'
+    }
+    return recX.identity_number
+  },
+  birth_date: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    if (typeof recX.birth_date == 'object' && recX.birth_date) {
+      return (recX.birth_date as Date).toLocaleDateString()
+    } else if (typeof recX.birth_date == 'string') {
+      return (recX.birth_date as string).substring(0, 10)
+    }
+    return recX.birth_date
+  },
+  patient_age: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    return recX.birth_date?.split('T')[0]
+  },
+  gender: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    if (typeof recX?.gender_code !== 'number' && recX?.gender_code !== '') {
+      return 'Tidak Diketahui'
+    }
+    return recX.gender_code
+  },
+  education: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    if (typeof recX.education_code == 'number' && recX.education_code >= 0) {
+      return recX.education_code
+    } else if (typeof recX.education_code) {
+      return recX.education_code
+    }
+    return '-'
+  },
+}
+
+export const funcComponent: RecStrFuncComponent = {
+  action(rec, idx) {
+    const res: RecComponent = {
+      idx,
+      rec: rec as object,
+      component: action,
+    }
+    return res
+  },
+}
+
+export const funcHtml: RecStrFuncUnknown = {
+  patient_address(_rec) {
+    return '-'
+  },
+}
diff --git a/app/components/app/encounter/assesment-function/list.vue b/app/components/app/encounter/assesment-function/list.vue
new file mode 100644
index 00000000..5b8778d9
--- /dev/null
+++ b/app/components/app/encounter/assesment-function/list.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+
+defineProps<{
+  data: any[]
+}>()
+</script>
+
+<template>
+  <PubBaseDataTable
+    :rows="data"
+    :cols="cols"
+    :header="header"
+    :keys="keys"
+    :func-parsed="funcParsed"
+    :func-html="funcHtml"
+    :func-component="funcComponent"
+  />
+</template>
diff --git a/app/components/app/encounter/assesment-function/picker.vue b/app/components/app/encounter/assesment-function/picker.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/app/encounter/assesment-function/search.vue b/app/components/app/encounter/assesment-function/search.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/content/encounter/assesment-function/add.vue b/app/components/content/encounter/assesment-function/add.vue
new file mode 100644
index 00000000..128cf74a
--- /dev/null
+++ b/app/components/content/encounter/assesment-function/add.vue
@@ -0,0 +1,3 @@
+<template>
+  <div>halo</div>
+</template>
diff --git a/app/components/content/encounter/assesment-function/list.vue b/app/components/content/encounter/assesment-function/list.vue
new file mode 100644
index 00000000..c53a6881
--- /dev/null
+++ b/app/components/content/encounter/assesment-function/list.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import type { DataTableLoader } from '~/components/pub/base/data-table/type'
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/custom-ui/data/types'
+import AssesmentFunctionList from '~/components/app/encounter/assesment-function/list.vue'
+import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
+
+const props = defineProps<{
+  label: string
+}>()
+
+const data = ref([])
+
+const refSearchNav: RefSearchNav = {
+  onClick: () => {
+    // open filter modal
+  },
+  onInput: (_val: string) => {
+    // filter patient list
+  },
+  onClear: () => {
+    // clear url param
+  },
+}
+
+// Loading state management
+const isLoading = reactive<DataTableLoader>({
+  isTableLoading: false,
+})
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+
+const hreaderPrep: HeaderPrep = {
+  title: props.label,
+  icon: 'i-lucide-users',
+  addNav: {
+    label: 'Tambah',
+    onClick: () => navigateTo('/rehab/registration-queue/sep-prosedur/add'),
+  },
+}
+
+async function getPatientList() {
+  const resp = await xfetch('/api/v1/patient')
+  if (resp.success) {
+    data.value = (resp.body as Record<string, any>).data
+  }
+}
+
+onMounted(() => {
+  getPatientList()
+})
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+</script>
+
+<template>
+  <Header :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
+  <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
+    <AssesmentFunctionList :data="data" />
+  </div>
+</template>
diff --git a/app/components/content/encounter/home.vue b/app/components/content/encounter/home.vue
new file mode 100644
index 00000000..2a4be548
--- /dev/null
+++ b/app/components/content/encounter/home.vue
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import AssesmentFunctionList from './assesment-function/list.vue'
+
+interface TabItem {
+  value: string
+  label: string
+  component?: any
+  props?: Record<string, any>
+}
+
+const tabs: TabItem[] = [
+  { value: 'status', label: 'Status Masuk/Keluar' },
+  { value: 'medis', label: 'Pengkajian Awal Medis' },
+  { value: 'rehab', label: 'Pengkajian Awal Medis Rehabilitasi Medis' },
+  { value: 'fungsi', label: 'Asesmen Fungsi', component: AssesmentFunctionList },
+  { value: 'protokol', label: 'Protokol Terapi' },
+  { value: 'edukasi', label: 'Asesmen Kebutuhan Edukasi' },
+  { value: 'consent', label: 'General Consent' },
+  { value: 'cprj', label: 'CPRJ' },
+  { value: 'obat', label: 'Order Obat' },
+  { value: 'alkes', label: 'Order Alkes' },
+  { value: 'radiologi', label: 'Order Radiologi' },
+  { value: 'labpk', label: 'Order Lab PK' },
+  { value: 'labmikro', label: 'Order Lab Mikro' },
+  { value: 'labpa', label: 'Order Lab PA' },
+  { value: 'ruangtindakan', label: 'Order Ruang Tindakan' },
+  { value: 'hasil', label: 'Hasil Penunjang' },
+  { value: 'konsultasi', label: 'Konsultasi' },
+  { value: 'resume', label: 'Resume' },
+  { value: 'kontrol', label: 'Surat Kontrol' },
+  { value: 'skrining', label: 'Skrinning MPP' },
+  { value: 'upload', label: 'Upload Dokumen Pendukung' },
+]
+
+const route = useRoute()
+const router = useRouter()
+
+// activeTab selalu sinkron dengan hash (#fungsi, #status, dll)
+const activeTab = computed({
+  get: () => (route.hash ? route.hash.substring(1) : 'fungsi'),
+  set: (val: string) => {
+    router.replace({ hash: `#${val}` }) // <-- tambahin '#' disini
+  },
+})
+
+const data = {
+  noRm: 'RM21123',
+  nama: 'Ahmad Sutanto',
+  alamat: 'Jl Jaksa Agung Suprapto No. 12, Jakarta',
+  tanggalKunjungan: '23 April 2024',
+  klinik: 'Bedah',
+  tanggalLahir: '23 April 1990 (25 Tahun)',
+  jenisKelamin: 'Laki-laki',
+  jenisPembayaran: 'JKN',
+  noBilling: '223332',
+  dpjp: 'dr. Syaifullah, Sp.OT(K)',
+}
+</script>
+
+<template>
+  <div class="w-full">
+    <div class="mb-4">
+      <button
+        class="flex items-center gap-2 rounded-full border border-orange-400 bg-orange-50 px-3 py-1 text-sm font-medium text-orange-600 hover:bg-orange-100"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+        </svg>
+        Kembali ke Daftar Kunjungan
+      </button>
+    </div>
+
+    <AppPatientQuickInfo :data="data" />
+
+    <!-- Tabs -->
+    <div class="mt-4 flex flex-wrap gap-2 rounded-md border bg-white p-4 shadow-sm">
+      <button
+        v-for="tab in tabs"
+        :key="tab.value"
+        :data-active="activeTab === tab.value"
+        class="flex-shrink-0 rounded-full px-4 py-2 text-sm font-medium transition data-[active=false]:bg-gray-100 data-[active=true]:bg-green-600 data-[active=false]:text-gray-700 data-[active=true]:text-white"
+        @click="activeTab = tab.value"
+      >
+        {{ tab.label }}
+      </button>
+    </div>
+
+    <!-- Active Tab Content -->
+    <div class="mt-4 rounded-md border p-4">
+      <component
+        :is="tabs.find((t) => t.value === activeTab)?.component"
+        v-if="tabs.find((t) => t.value === activeTab)?.component"
+        v-bind="tabs.find((t) => t.value === activeTab)?.props || {}"
+        :label="tabs.find((t) => t.value === activeTab)?.label"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/components/content/encounter/list.vue b/app/components/content/encounter/list.vue
index 363d99bf..33ed1483 100644
--- a/app/components/content/encounter/list.vue
+++ b/app/components/content/encounter/list.vue
@@ -8,6 +8,10 @@ import Dialog from '~/components/pub/base/modal/dialog.vue'
 import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
 import Filter from '~/components/pub/custom-ui/nav-header/filter.vue'
 
+const props = defineProps<{
+  type: string
+}>()
+
 const data = ref([])
 const isLoading = reactive<DataTableLoader>({
   summary: false,
@@ -60,14 +64,26 @@ watch(
   () => recAction.value,
   () => {
     console.log('recAction.value', recAction.value)
-    if (recAction.value === 'showDetail') {
-      navigateTo(`/rehab/encounter/${recId.value}/detail`)
-    } else if (recAction.value === 'showEdit') {
-      navigateTo(`/rehab/encounter/${recId.value}/edit`)
-    } else if (recAction.value === 'showProcess') {
-      navigateTo(`/rehab/encounter/${recId.value}/process`)
-    } else {
-      // handle other actions
+    if (props.type === 'encounter') {
+      if (recAction.value === 'showDetail') {
+        navigateTo(`/rehab/encounter/${recId.value}/detail`)
+      } else if (recAction.value === 'showEdit') {
+        navigateTo(`/rehab/encounter/${recId.value}/edit`)
+      } else if (recAction.value === 'showProcess') {
+        navigateTo(`/rehab/encounter/${recId.value}/process`)
+      } else {
+        // handle other actions
+      }
+    } else if (props.type === 'registration') {
+      if (recAction.value === 'showDetail') {
+        navigateTo(`/rehab/registration/${recId.value}/detail`)
+      } else if (recAction.value === 'showEdit') {
+        navigateTo(`/rehab/registration/${recId.value}/edit`)
+      } else if (recAction.value === 'showProcess') {
+        navigateTo(`/rehab/registration/${recId.value}/process`)
+      } else {
+        // handle other actions
+      }
     }
   },
 )
@@ -86,7 +102,7 @@ provide('table_data_loader', isLoading)
       <AppEncounterList :data="data" />
     </div>
 
-    <Dialog v-model:open="isFormEntryDialogOpen" title="Tambah Divisi" size="lg" prevent-outside>
+    <Dialog v-model:open="isFormEntryDialogOpen" title="Filter" size="lg" prevent-outside>
       <AppEncounterFilter />
     </Dialog>
     <!-- <Pagination :pagination-meta="paginationMeta" @page-change="handlePageChange" /> -->
diff --git a/app/lib/page-permission.ts b/app/lib/page-permission.ts
index 95673f20..c527a8cc 100644
--- a/app/lib/page-permission.ts
+++ b/app/lib/page-permission.ts
@@ -33,4 +33,12 @@ export const PAGE_PERMISSIONS = {
     billing: ['R'],
     management: ['R'],
   },
+  '/rehab/registration': {
+    doctor: ['C', 'R', 'U', 'D'],
+    nurse: ['R'],
+    admisi: ['R'],
+    pharmacy: ['R'],
+    billing: ['R'],
+    management: ['R'],
+  },
 } as const satisfies Record<string, RoleAccess>
diff --git a/app/pages/(features)/rehab/encounter/[id]/process.vue b/app/pages/(features)/rehab/encounter/[id]/process.vue
index ad499dfe..c1b8b716 100644
--- a/app/pages/(features)/rehab/encounter/[id]/process.vue
+++ b/app/pages/(features)/rehab/encounter/[id]/process.vue
@@ -35,7 +35,7 @@ const canCreate = hasCreateAccess(roleAccess)
 
 <template>
   <div v-if="canCreate">
-    <ContentRehabRegistrationHome />
+    <ContentEncounterHome />
   </div>
   <Error v-else :status-code="403" />
 </template>
diff --git a/app/pages/(features)/rehab/encounter/index.vue b/app/pages/(features)/rehab/encounter/index.vue
index 777eebf3..7cd6c5ed 100644
--- a/app/pages/(features)/rehab/encounter/index.vue
+++ b/app/pages/(features)/rehab/encounter/index.vue
@@ -33,7 +33,7 @@ const canRead = hasReadAccess(roleAccess)
 <template>
   <div>
     <div v-if="canRead">
-      <ContentEncounterList />
+      <ContentEncounterList type="encounter" />
     </div>
     <Error v-else :status-code="403" />
   </div>
diff --git a/app/pages/(features)/rehab/registration/[id]/detail.vue b/app/pages/(features)/rehab/registration/[id]/detail.vue
new file mode 100644
index 00000000..fe91932a
--- /dev/null
+++ b/app/pages/(features)/rehab/registration/[id]/detail.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/base/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Tambah Kunjungan',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/rehab/registration']
+
+const { checkRole, hasCreateAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  throw createError({
+    statusCode: 403,
+    statusMessage: 'Access denied',
+  })
+}
+
+// Define permission-based computed properties
+const canCreate = hasCreateAccess(roleAccess)
+</script>
+
+<template>
+  <div v-if="canCreate">
+    <ContentEncounterEntry :id="1" form-type="Detail" />
+  </div>
+  <Error v-else :status-code="403" />
+</template>
diff --git a/app/pages/(features)/rehab/registration/[id]/edit.vue b/app/pages/(features)/rehab/registration/[id]/edit.vue
new file mode 100644
index 00000000..a2cfab84
--- /dev/null
+++ b/app/pages/(features)/rehab/registration/[id]/edit.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/base/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Tambah Kunjungan',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/rehab/registration']
+
+const { checkRole, hasCreateAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  throw createError({
+    statusCode: 403,
+    statusMessage: 'Access denied',
+  })
+}
+
+// Define permission-based computed properties
+const canCreate = hasCreateAccess(roleAccess)
+</script>
+
+<template>
+  <div v-if="canCreate">
+    <ContentEncounterEntry :id="1" form-type="Edit" />
+  </div>
+  <Error v-else :status-code="403" />
+</template>
diff --git a/app/pages/(features)/rehab/registration/add.vue b/app/pages/(features)/rehab/registration/add.vue
new file mode 100644
index 00000000..d316351e
--- /dev/null
+++ b/app/pages/(features)/rehab/registration/add.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/base/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Tambah Kunjungan',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/rehab/registration']
+
+const { checkRole, hasCreateAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  throw createError({
+    statusCode: 403,
+    statusMessage: 'Access denied',
+  })
+}
+
+// Define permission-based computed properties
+const canCreate = hasCreateAccess(roleAccess)
+</script>
+
+<template>
+  <div v-if="canCreate">
+    <ContentEncounterEntry form-type="Tambah" />
+  </div>
+  <Error v-else :status-code="403" />
+</template>
diff --git a/app/pages/(features)/rehab/registration/index.vue b/app/pages/(features)/rehab/registration/index.vue
index 90430b84..99d3a397 100644
--- a/app/pages/(features)/rehab/registration/index.vue
+++ b/app/pages/(features)/rehab/registration/index.vue
@@ -1,3 +1,40 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/base/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Pendaftaran',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/rehab/registration']
+
+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)
+</script>
+
 <template>
-  <div>Registration</div>
+  <div>
+    <div v-if="canRead">
+      <ContentEncounterList type="registration" />
+    </div>
+    <Error v-else :status-code="403" />
+  </div>
 </template>