diff --git a/app/components/app/control-letter/_common/select-unit.vue b/app/components/app/control-letter/_common/select-unit.vue
index afe0ca0a..0aef857f 100644
--- a/app/components/app/control-letter/_common/select-unit.vue
+++ b/app/components/app/control-letter/_common/select-unit.vue
@@ -33,7 +33,7 @@ const {
 const units = ref<Array<Item>>([])
 
 async function fetchData() {
-  units.value = await getUnitLabelList({}, true)
+  units.value = await getUnitLabelList({})
 }
 
 const selectedUnitId = inject<Ref<string | null>>("selectedUnitId")!
diff --git a/app/components/app/summary-medic/entry.vue b/app/components/app/summary-medic/entry.vue
new file mode 100644
index 00000000..f75e918e
--- /dev/null
+++ b/app/components/app/summary-medic/entry.vue
@@ -0,0 +1,147 @@
+<script setup lang="ts">
+import Block from '~/components/pub/my-ui/doc-entry/block.vue'
+import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
+import Field from '~/components/pub/my-ui/doc-entry/field.vue'
+import Label from '~/components/pub/my-ui/doc-entry/label.vue'
+// Helpers
+import type z from 'zod'
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+// import { ref, watch, inject } from 'vue'
+
+const props = defineProps<{
+  modelValue: any
+  schema: z.ZodSchema<any>
+  excludeFields?: string[]
+  isReadonly?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', val: any): void
+  (e: 'submit', val: any): void
+}>()
+
+// Setup form
+const {
+  validate: _validate,
+  defineField,
+  handleSubmit,
+  errors,
+  values,
+} = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: props.modelValue,
+})
+
+watch(values, (val) => emit('update:modelValue', val), { deep: true })
+
+// Define form fields
+// const [relatives, relativesAttrs] = defineField('relatives')
+const [date, dateAttrs] = defineField('date')
+const [doctor, doctorAttrs] = defineField('doctor')
+const [diagnosis, diagnosisAttrs] = defineField('diagnosis')
+const [essay, essayAttrs] = defineField('essay')
+const [plan, planAttrs] = defineField('plan')
+const [note, noteAttrs] = defineField('note')
+
+const tanggal = ref('')
+const tanggalAttrs = ref({
+  type: 'date',
+  required: true,
+  disabled: props.isReadonly,
+})
+
+// Relatives list handling
+const addRelative = () => {
+  relatives.value = [...(relatives.value || []), { name: '', phone: '' }]
+}
+
+const removeRelative = (index: number) => {
+  relatives.value = relatives.value.filter((_: any, i: number) => i !== index)
+}
+
+const validate = async () => {
+  const result = await _validate()
+  return {
+    valid: true,
+    data: result.values,
+    errors: result.errors,
+  }
+}
+
+defineExpose({ validate })
+
+const icdPreview = inject('icdPreview')
+
+const isExcluded = (key: string) => props.excludeFields?.includes(key)
+</script>
+
+<template>
+  <form id="entry-form">
+    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+      <Block :colCount="2">
+        <Cell>
+          <Label dynamic>Tanggal</Label>
+          <Field>
+            <Input
+              v-model="date"
+              v-bind="dateAttrs"
+              type="date"
+            />
+          </Field>
+        </Cell>
+        <Cell>
+          <Label dynamic>Dokter</Label>
+          <Field>
+            <Input
+              v-model="doctor"
+              v-bind="doctorAttrs"
+            />
+          </Field>
+        </Cell>
+      </Block>
+      <Block :colCount="2">
+        <Cell>
+          <Label dynamic>Diagnosis Penting</Label>
+          <Field>
+            <Textarea
+              v-model="diagnosis"
+              v-bind="diagnosisAttrs"
+            />
+          </Field>
+        </Cell>
+        <Cell>
+          <Label dynamic>Uraian Klinik Penting</Label>
+          <Field>
+            <Textarea
+              v-model="essay"
+              v-bind="essayAttrs"
+            />
+          </Field>
+        </Cell>
+      </Block>
+      <Block :colCount="2">
+        <Cell>
+          <Label dynamic>Rencana Penting</Label>
+          <Field>
+            <Textarea
+              v-model="plan"
+              v-bind="planAttrs"
+            />
+          </Field>
+        </Cell>
+        <Cell>
+          <Label dynamic>Catatan</Label>
+          <Field>
+            <Textarea
+              v-model="note"
+              v-bind="noteAttrs"
+            />
+          </Field>
+        </Cell>
+      </Block>
+
+      <Separator class="mt-8" />
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/summary-medic/list.cfg.ts b/app/components/app/summary-medic/list.cfg.ts
new file mode 100644
index 00000000..c2f57c54
--- /dev/null
+++ b/app/components/app/summary-medic/list.cfg.ts
@@ -0,0 +1,82 @@
+import type { Config, RecComponent, RecStrFuncComponent, RecStrFuncUnknown } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+import type { GeneralConsent } from '~/models/general-consent'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-ud.vue'))
+export const config: Config = {
+  cols: [{ width: 100 }, {}, {}, {}, { width: 50 }],
+  headers: [
+    [
+      { label: 'Tanggal' },
+      { label: 'Anggota Keluarga' },
+      { label: 'Penanggung Jawab' },
+      { label: 'Pemberi Informasi' },
+      { label: 'Saksi 1' },
+      { label: 'Saksi 2' },
+      { label: '' },
+    ],
+  ],
+  keys: ['date', 'relatives', 'responsible', 'informant', 'witness1', 'witness2', 'action'],
+  delKeyNames: [
+    { key: 'data', label: 'Tanggal' },
+    { key: 'dstDoctor.name', label: 'Dokter' },
+  ],
+  parses: {
+    date(rec) {
+      const recX = rec as GeneralConsent
+      return recX?.createdAt?.substring(0, 10) || '-'
+    },
+    relatives(rec) {
+      const recX = rec as GeneralConsent
+      const parsed = JSON.parse(recX?.value || '{}')
+      return parsed?.relatives?.join(', ') || '-'
+    },
+    responsible(rec) {
+      const recX = rec as GeneralConsent
+      const parsed = JSON.parse(recX?.value || '{}')
+      return parsed?.responsible || '-'
+    },
+    informant(rec) {
+      const recX = rec as GeneralConsent
+      const parsed = JSON.parse(recX?.value || '{}')
+      return parsed?.informant || '-'
+    },
+    witness1(rec) {
+      const recX = rec as GeneralConsent
+      const parsed = JSON.parse(recX?.value || '{}')
+      return parsed?.witness1 || '-'
+    },
+    witness2(rec) {
+      const recX = rec as GeneralConsent
+      const parsed = JSON.parse(recX?.value || '{}')
+      return parsed?.witness2 || '-'
+    },
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+        props: {
+          size: 'sm',
+        },
+      }
+      return res
+    },
+  },
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+        props: {
+          size: 'sm',
+        },
+      }
+      return res
+    },
+  } as RecStrFuncComponent,
+  htmls: {} as RecStrFuncUnknown,
+}
diff --git a/app/components/app/summary-medic/list.vue b/app/components/app/summary-medic/list.vue
new file mode 100644
index 00000000..46f595f5
--- /dev/null
+++ b/app/components/app/summary-medic/list.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+import { config } from './list.cfg'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+    <!-- FIXME: pindahkan ke content/division/list.vue   -->
+    <PaginationView
+      :pagination-meta="paginationMeta"
+      @page-change="handlePageChange"
+    />
+  </div>
+</template>
diff --git a/app/components/app/surgery-report/_common/history-dialog.vue b/app/components/app/surgery-report/_common/history-dialog.vue
index d92da4a5..4172aaec 100644
--- a/app/components/app/surgery-report/_common/history-dialog.vue
+++ b/app/components/app/surgery-report/_common/history-dialog.vue
@@ -42,7 +42,7 @@ const itemsCount = computed(() => items.length || 0)
             {{ item?.createdAt.toLocaleDateString('id-ID') }}
           </time>
           <h1 :class="cn('text-gray-500 dark:text-gray-400', '')">Ditambahkan Oleh : {{ item.updatedBy }}</h1>
-          <NuxtLink class="mt-1 text-orange-500" :to="`surgery-report/${item.id}`">
+          <NuxtLink class="mt-1 text-orange-500" :to="`process?menu=surgery-report&mode=list&record-id=${item.id}`">
             Lihat Detail
           </NuxtLink>
         </div>
diff --git a/app/components/content/control-letter/add.vue b/app/components/content/control-letter/add.vue
index 44f03a2f..4ca1d089 100644
--- a/app/components/content/control-letter/add.vue
+++ b/app/components/content/control-letter/add.vue
@@ -10,13 +10,14 @@ import Confirmation from '~/components/pub/my-ui/confirmation/confirmation.vue'
 import { type ControlLetter } from '~/models/control-letter'
 
 // #region Props & Emits
-const props = defineProps<{
+const props = withDefaults(defineProps<{ 
+  encounter_id: number
   callbackUrl?: string
-}>()
+}>(), {
+
+})
 
 // form related state
-const route = useRoute()
-const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
 const controlLetterForm = ref<ExposedForm<any> | null>(null)
 // #endregion
 
@@ -72,7 +73,7 @@ async function composeFormData(): Promise<ControlLetter> {
   if (!allValid) return Promise.reject('Form validation failed')
 
   const formData = controlLetter?.values
-  formData.encounter_id = encounterId
+  formData.encounter_id = props.encounter_id
   return new Promise((resolve) => resolve(formData))
 }
 // #endregion region
diff --git a/app/components/content/control-letter/detail.vue b/app/components/content/control-letter/detail.vue
index d9019d57..effabb7f 100644
--- a/app/components/content/control-letter/detail.vue
+++ b/app/components/content/control-letter/detail.vue
@@ -1,9 +1,6 @@
 <script setup lang="ts">
 import { useRouter } from 'vue-router'
-import { withBase } from '~/models/_base'
 import type { HeaderPrep } from '~/components/pub/my-ui/data/types'
-import type { Patient } from '~/models/patient'
-import type { Person } from '~/models/person'
 import { getDetail } from '~/services/control-letter.service'
 
 // Components
@@ -11,18 +8,19 @@ import Header from '~/components/pub/my-ui/nav-header/prep.vue'
 import type { ControlLetter } from '~/models/control-letter'
 
 // #region Props & Emits
-const props = defineProps<{
-}>()
+const props = withDefaults(defineProps<{ 
+  encounter_id: number
+  record_id: number 
+  redirectToForm?: (myRecord_id?: any) => void
+}>(), {
+  redirectToForm: () => {},
+})
 
 // #endregion
 
 // #region State & Computed
 
-const route = useRoute()
 const router = useRouter()
-const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
-const controlLetterId = typeof route.params.control_letter_id == 'string' ? parseInt(route.params.control_letter_id) : 0
-
 const controlLetter = ref<ControlLetter | null>(null)
 
 const headerPrep: HeaderPrep = {
@@ -34,7 +32,7 @@ const headerPrep: HeaderPrep = {
 
 // #region Lifecycle Hooks
 onMounted(async () => {
-  const result = await getDetail(controlLetterId, {
+  const result = await getDetail(props.record_id, {
     includes: "unit,specialist,subspecialist,doctor-employee-person",
   })
   if (result.success) {
@@ -54,11 +52,7 @@ function goBack() {
 function handleAction(type: string) {
   switch (type) {
     case 'edit':
-      // TODO: Handle edit action
-      navigateTo({
-        name: 'rehab-encounter-id-control-letter-control_letter_id-edit',
-        params: { id: encounterId, "control_letter_id": controlLetterId },
-      })
+      props.redirectToForm(props.record_id)
       break
 
     case 'back':
diff --git a/app/components/content/control-letter/edit.vue b/app/components/content/control-letter/edit.vue
index 99a5c282..0d81eb17 100644
--- a/app/components/content/control-letter/edit.vue
+++ b/app/components/content/control-letter/edit.vue
@@ -1,17 +1,7 @@
 <script setup lang="ts">
 import { useRouter } from 'vue-router'
-import type { Patient, genPatientProps } from '~/models/patient'
 import type { ExposedForm } from '~/types/form'
-import type { PatientBase } from '~/models/patient'
 import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
-import { genPatient } from '~/models/patient'
-import { PatientSchema } from '~/schemas/patient.schema'
-import { PersonAddressRelativeSchema } from '~/schemas/person-address-relative.schema'
-import { PersonAddressSchema } from '~/schemas/person-address.schema'
-import { PersonContactListSchema } from '~/schemas/person-contact.schema'
-import { PersonFamiliesSchema } from '~/schemas/person-family.schema'
-import { ResponsiblePersonSchema } from '~/schemas/person-relative.schema'
-import { uploadAttachment } from '~/services/patient.service'
 import { getDetail, update } from '~/services/control-letter.service'
 
 import {
@@ -26,27 +16,26 @@ import {
 } from '~/handlers/control-letter.handler'
 
 import { toast } from '~/components/pub/ui/toast'
-import { withBase } from '~/models/_base'
-import type { Person } from '~/models/person'
 import Confirmation from '~/components/pub/my-ui/confirmation/confirmation.vue'
 import type { ControlLetter } from '~/models/control-letter'
 import { ControlLetterSchema } from '~/schemas/control-letter.schema'
 import { formatDateYyyyMmDd } from '~/lib/date'
 
 // #region Props & Emits
-const props = defineProps<{
+const props = withDefaults(defineProps<{ 
+  encounter_id: number
   callbackUrl?: string
-}>()
+  record_id: number 
+}>(), {
+
+})
 
 // form related state
 const controlLetterForm = ref<ExposedForm<any> | null>(null)
 // #endregion
 
 // #region State & Computed
-const route = useRoute()
 const router = useRouter()
-const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
-const controlLetterId = typeof route.params.control_letter_id == 'string' ? parseInt(route.params.control_letter_id) : 0
 
 const isConfirmationOpen = ref(false)
 const controlLetter = ref({})
@@ -58,7 +47,7 @@ const selectedSubSpecialistId = ref<number|null>(null)
 
 // #region Lifecycle Hooks
 onMounted(async () => {
-  const result = await getDetail(controlLetterId)
+  const result = await getDetail(props.record_id)
   if (result.success) {
     const responseData = {...result.body.data, date: formatDateYyyyMmDd(result.body.data.date)}
     selectedUnitId.value = responseData?.unit_code
@@ -78,7 +67,7 @@ function goBack() {
 
 async function handleConfirmAdd() {
   const response = await handleActionEdit(
-    controlLetterId,
+    props.record_id,
     await composeFormData(),
     () => { },
     () => { },
@@ -99,7 +88,7 @@ async function composeFormData(): Promise<ControlLetter> {
   if (!allValid) return Promise.reject('Form validation failed')
 
   const formData = controlLetter?.values
-  formData.encounter_id = encounterId
+  formData.encounter_id = props.encounter_id
   return new Promise((resolve) => resolve(formData))
 }
 // #endregion region
diff --git a/app/components/content/control-letter/list.vue b/app/components/content/control-letter/list.vue
index 5a879eb4..4308269b 100644
--- a/app/components/content/control-letter/list.vue
+++ b/app/components/content/control-letter/list.vue
@@ -13,24 +13,28 @@ import type { Encounter } from '~/models/encounter'
 import WarningAlert from '~/components/pub/my-ui/alert/warning-alert.vue'
 // import type { PagePermission } from '~/models/role'
 import { PAGE_PERMISSIONS } from '~/lib/page-permission'
-import { permissions } from '~/const/page-permission/chemoteraphy'
+import { permissions } from '~/const/page-permission/ambulatory'
 import { unauthorizedToast } from '~/lib/utils'
 import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
 import DocPreviewDialog from '~/components/pub/my-ui/modal/doc-preview-dialog.vue'
 import HistoryDialog from '~/components/app/control-letter/history-dialog.vue'
+import type { RoleAccesses } from '~/models/role'
 // #endregion
 
 // #region Permission
-const roleAccess = permissions['/rehab/encounter'] || {}
+const roleAccess: RoleAccesses = permissions['/ambulatory/encounter'] || {}
 const { getPagePermissions } = useRBAC()
 const pagePermission = getPagePermissions(roleAccess)
 
 // #region State
-const props = defineProps<{
-  encounter?: Encounter
-}>()
-const route = useRoute()
-const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
+const props = withDefaults(defineProps<{ 
+  encounter_id: number
+  redirectToForm?: (myRecord_id?: any) => void
+  redirectToDetail?: (myRecord_id: string|number) => void
+}>(), {
+  redirectToForm: () => { },
+  redirectToDetail: () => { }
+})
 
 const { data, isLoading, paginationMeta, searchInput, handlePageChange, handleSearch, fetchData } = usePaginatedList({
   fetchFn: (params) => getList({ ...params, includes: 'specialist,subspecialist,doctor-employee-person', }),
@@ -73,10 +77,11 @@ const headerPrep: HeaderPrep = {
 if (pagePermission.canCreate) {
   headerPrep.addNav = {
     label: "Surat Kontrol",
-    onClick: () => navigateTo({
-        name: 'rehab-encounter-id-control-letter-add',
-        params: { id: encounterId },
-      }),
+    onClick: () => {
+      console.log('redirectToForm')
+      console.log(props.redirectToForm())
+      props.redirectToForm()
+    },
   }
 }
 // #endregion
@@ -136,18 +141,12 @@ provide('table_data_loader', isLoading)
 watch([recId, recAction, timestamp], () => {
   switch (recAction.value) {
     case ActionEvents.showDetail:
-      navigateTo({
-        name: 'rehab-encounter-id-control-letter-control_letter_id',
-        params: { id: encounterId, "control_letter_id": recId.value },
-      })
+      props.redirectToDetail(recId.value)
       break
 
     case ActionEvents.showEdit:
       if(pagePermission.canUpdate){ 
-        navigateTo({
-          name: 'rehab-encounter-id-control-letter-control_letter_id-edit',
-          params: { id: encounterId, "control_letter_id": recId.value },
-        })
+        props.redirectToForm(recId.value)
       } else {
         unauthorizedToast()
       }
diff --git a/app/components/content/control-letter/main.vue b/app/components/content/control-letter/main.vue
new file mode 100644
index 00000000..0850c900
--- /dev/null
+++ b/app/components/content/control-letter/main.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { crudQueryParamsMode } from '~/lib/system-constants';
+import List from './list.vue'
+import Detail from './detail.vue'
+import Add from './add.vue'
+import Edit from './edit.vue'
+
+const props = defineProps<{
+  encounter_id: number
+}>()
+
+const { crudQueryParams, goToDetail, goToEntry } = useQueryCRUD()
+</script>
+
+<template>
+  <List v-if="crudQueryParams.mode === crudQueryParamsMode.list && !crudQueryParams.recordId"
+    :encounter_id="encounter_id"
+    :redirectToForm="goToEntry"
+    :redirectToDetail="goToDetail"/>
+  <Detail v-else-if="crudQueryParams.mode === crudQueryParamsMode.list && crudQueryParams.recordId"
+    :encounter_id="encounter_id"
+    :record_id="crudQueryParams.recordId"
+    :redirectToForm="goToEntry"/>
+  <Add v-else-if="crudQueryParams.mode === crudQueryParamsMode.entry && !crudQueryParams.recordId"
+    :encounter_id="encounter_id" />
+  <Edit v-else-if="crudQueryParams.mode === crudQueryParamsMode.entry && crudQueryParams.recordId"
+    :encounter_id="encounter_id"
+    :record_id="crudQueryParams.recordId" />
+    
+  <List v-else :encounter_id="encounter_id" :redirectToForm="goToEntry" :redirectToDetail="goToDetail" />
+</template>
diff --git a/app/components/content/document-upload/add.vue b/app/components/content/document-upload/add.vue
index 9d099189..95febcca 100644
--- a/app/components/content/document-upload/add.vue
+++ b/app/components/content/document-upload/add.vue
@@ -10,13 +10,13 @@ import { toFormData } from '~/lib/utils'
 import { uploadAttachment } from '~/services/supporting-document.service'
 
 // #region Props & Emits
-const props = defineProps<{
-  callbackUrl?: string
-}>()
+const props = withDefaults(defineProps<{ 
+  encounter_id: number 
+}>(), {
+
+})
 
 // form related state
-const route = useRoute()
-const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
 const inputForm = ref<ExposedForm<any> | null>(null)
 const { user } = useUserStore()
 // #endregion
@@ -43,20 +43,14 @@ async function handleConfirmAdd() {
   const inputFormData: FormData = toFormData(inputData)
 
   const response = await handleActionSave(inputFormData, () => { }, () => { }, toast, )
-  const data = (response?.body?.data ?? null)
-  if (!data) return
-
-  // // If has callback provided redirect to callback with patientData
-  if (props.callbackUrl) {
-    navigateTo(props.callbackUrl + '?control-letter-id=' + inputData.id)
-  }
+  // const data = (response?.body?.data ?? null)
   goBack()
 }
 
 async function composeFormData(): Promise<any> {
   inputForm.value?.setValues({
     ...inputForm.value?.values,
-    ref_id: encounterId,
+    ref_id: props.encounter_id,
     upload_employee_id: user.employee_id
   })
 
@@ -83,13 +77,7 @@ async function handleActionClick(eventType: string) {
     isConfirmationOpen.value = true
   }
 
-  if (eventType === 'back') {
-    if (props.callbackUrl) {
-      await navigateTo(props.callbackUrl)
-      return
-    }
-    goBack()
-  }
+  if (eventType === 'back') goBack()
 }
 
 function handleCancelAdd() {
diff --git a/app/components/content/document-upload/edit.vue b/app/components/content/document-upload/edit.vue
index c4033fb2..1719c274 100644
--- a/app/components/content/document-upload/edit.vue
+++ b/app/components/content/document-upload/edit.vue
@@ -8,15 +8,15 @@ import Confirmation from '~/components/pub/my-ui/confirmation/confirmation.vue'
 import { DocumentUploadSchema } from '~/schemas/document-upload.schema'
 import { getDetail } from '~/services/supporting-document.service'
 
-// #region Props & Emits
-const props = defineProps<{
-  callbackUrl?: string
-}>()
+const props = withDefaults(defineProps<{ 
+  encounter_id: number 
+  record_id: number 
+}>(), {
+  
+})
 
 // form related state
-const route = useRoute()
-const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
-const docId = typeof route.params.document_id == 'string' ? parseInt(route.params.document_id) : 0
+const docId = props.record_id
 const inputForm = ref<ExposedForm<any> | null>(null)
 // #endregion
 
@@ -77,7 +77,7 @@ async function composeFormData(): Promise<any> {
   if (!allValid) return Promise.reject('Form validation failed')
 
   const formData = inputFormState?.values
-  formData.encounter_id = encounterId
+  formData.encounter_id = props.encounter_id
   return new Promise((resolve) => resolve(formData))
 }
 // #endregion region
@@ -88,14 +88,7 @@ async function handleActionClick(eventType: string) {
     isConfirmationOpen.value = true
   }
 
-  if (eventType === 'back') {
-    if (props.callbackUrl) {
-      await navigateTo(props.callbackUrl)
-      return
-    }
-
-    goBack()
-  }
+  if (eventType === 'back') goBack()
 }
 
 function handleCancelAdd() {
@@ -109,7 +102,7 @@ function handleCancelAdd() {
 
 <template>
   <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg font-semibold xl:text-xl">
-    <h1>Upload Dokumen</h1>
+    <h1>Update Upload Dokumen</h1>
   </div>
   <AppDocumentUploadEntryForm
     ref="inputForm"
diff --git a/app/components/content/document-upload/list.vue b/app/components/content/document-upload/list.vue
index 7f7631d9..5283ada1 100644
--- a/app/components/content/document-upload/list.vue
+++ b/app/components/content/document-upload/list.vue
@@ -9,33 +9,30 @@ import type { Encounter } from '~/models/encounter'
 import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
 import DocPreviewDialog from '~/components/pub/my-ui/modal/doc-preview-dialog.vue'
 import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
-import type { PagePermission } from '~/models/role'
-import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+import type { Permission, RoleAccesses, } from '~/models/role'
 import { unauthorizedToast } from '~/lib/utils'
+import { permissions } from '~/const/page-permission/ambulatory'
+import { usePageChecker } from '~/lib/page-checker'
 // #endregion
 
 
 // #region Permission
-const roleAccess: PagePermission = PAGE_PERMISSIONS['/rehab/encounter']
+const roleAccess: RoleAccesses = permissions['/ambulatory/encounter'] || {}
 const { getPagePermissions } = useRBAC()
 const pagePermission = getPagePermissions(roleAccess)
-
-// const {user,userRole} = useUserStore()
-// const {getUserPermissions} = useRBAC()
 // #endregion
 
 // #region State
-const props = defineProps<{
-  encounter?: Encounter
-  refresh: () => void
-}>()
-
-const route = useRoute()
-const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
+const props = withDefaults(defineProps<{ 
+  encounter_id: number
+  redirectToForm?: (myRecord_id?: any) => void
+}>(), {
+  redirectToForm: () => { }
+})
 
 const { data, paginationMeta, handlePageChange, handleSearch, searchInput, fetchData } = usePaginatedList({
   fetchFn: (params) => getList({
-    'encounter-id': encounterId,
+    'encounter-id': props.encounter_id,
     // includes: "employee",
     ...params,
   }),
@@ -56,10 +53,9 @@ const headerPrep: HeaderPrep = {
 if (pagePermission.canCreate) {
   headerPrep.addNav = {
     label: "Upload Dokumen",
-    onClick: () => navigateTo({
-        name: 'rehab-encounter-id-document-upload-add',
-        params: { id: encounterId },
-      }),
+    onClick: () => {
+      props.redirectToForm()
+    },
    }
 }
 
@@ -78,6 +74,7 @@ const refSearchNav: RefSearchNav = {
 
 // #region Lifecycle Hooks
 onMounted(() => {
+
 })
 // #endregion
 
@@ -99,7 +96,6 @@ async function handleConfirmDelete(record: any, action: string) {
   }
 }
 
-
 function handleCancelConfirmation() {
   // Reset record state when cancelled
   recId.value = 0
@@ -124,10 +120,7 @@ watch([recId, recAction, timestamp], () => {
 
     case ActionEvents.showEdit:
       if(pagePermission.canUpdate){
-        navigateTo({
-          name: 'rehab-encounter-id-document-upload-document_id-edit',
-          params: { id: encounterId, "document_id": recId.value },
-        })
+        props.redirectToForm(recId.value)
       } else {
         unauthorizedToast()
       }
diff --git a/app/components/content/document-upload/main.vue b/app/components/content/document-upload/main.vue
new file mode 100644
index 00000000..d4e09da3
--- /dev/null
+++ b/app/components/content/document-upload/main.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { crudQueryParamsMode } from '~/lib/system-constants';
+import List from './list.vue'
+import Add from './add.vue'
+import Edit from './edit.vue'
+
+const props = defineProps<{
+  encounter_id: number
+}>()
+
+const { crudQueryParams, goToEntry } = useQueryCRUD()
+</script>
+
+<template>
+  <List v-if="crudQueryParams.mode === crudQueryParamsMode.list" :encounter_id="encounter_id" :redirectToForm="goToEntry" />
+  <Add v-else-if="crudQueryParams.mode === crudQueryParamsMode.entry && !crudQueryParams.recordId" :encounter_id="encounter_id" />
+  <Edit v-else-if="crudQueryParams.mode === crudQueryParamsMode.entry && crudQueryParams.recordId"
+    :encounter_id="encounter_id" 
+    :record_id="crudQueryParams.recordId" />
+    
+  <List v-else :encounter_id="encounter_id" :redirectToForm="goToEntry" />
+</template>
diff --git a/app/components/content/encounter/process.vue b/app/components/content/encounter/process.vue
index 4f44ecf8..5bbf9c53 100644
--- a/app/components/content/encounter/process.vue
+++ b/app/components/content/encounter/process.vue
@@ -32,6 +32,7 @@ import Cprj from '~/components/content/cprj/entry.vue'
 import ActionReport from '~/components/content/action-report/entry.vue'
 import DocUploadList from '~/components/content/document-upload/list.vue'
 import GeneralConsentList from '~/components/content/general-consent/entry.vue'
+import SummaryMedic from '~/components/content/summary-medic/entry.vue'
 import ResumeList from '~/components/content/resume/list.vue'
 import ControlLetterList from '~/components/content/control-letter/list.vue'
 import InitialNursingStudy from '~/components/content/initial-nursing/entry.vue'
@@ -102,6 +103,13 @@ const protocolRows = [
   { value: 'therapy-protocol', label: 'Protokol Terapi' },
   { value: 'education-assessment', label: 'Asesmen Kebutuhan Edukasi' },
   { value: 'patient-note', label: 'CPRJ', component: Cprj, props: { encounter: data } },
+  { value: 'summary-medic', label: 'Profil Ringkasan Medis', component: SummaryMedic, props: { encounter: data } },
+  { value: 'consent', label: 'General Consent', component: GeneralConsentList, props: { encounter: data } },
+  { value: 'prescription', label: 'Order Obat', component: Prescription, props: { encounter_id: data.value.id } },
+  { value: 'device-order', label: 'Order Alkes', component: DeviceOrder, props: { encounter_id: data.value.id } },
+  { value: 'device', label: 'Order Alkes' },
+  { value: 'mcu-radiology', label: 'Order Radiologi', component: Radiology, props: { encounter_id: data.id } },
+  { value: 'mcu-lab-cp', label: 'Order Lab PK', component: CpLabOrder, props: { encounter_id: data.id } },
   { value: 'consent', label: 'General Consent', component: GeneralConsentList, props: { encounter: data } },
   {
     value: 'initial-nursing-study',
@@ -109,11 +117,6 @@ const protocolRows = [
     component: InitialNursingStudy,
     props: { encounter: data },
   },
-  { value: 'prescription', label: 'Order Obat', component: Prescription, props: { encounter_id: data.value.id } },
-  { value: 'device-order', label: 'Order Alkes', component: DeviceOrder, props: { encounter_id: data.value.id } },
-  { value: 'device', label: 'Order Alkes' },
-  { value: 'mcu-radiology', label: 'Order Radiologi', component: Radiology, props: { encounter_id: data.value.id } },
-  { value: 'mcu-lab-cp', label: 'Order Lab PK', component: CpLabOrder, props: { encounter_id: data.value.id } },
   { value: 'mcu-lab-micro', label: 'Order Lab Mikro' },
   { value: 'mcu-lab-pa', label: 'Order Lab PA' },
   { value: 'medical-action', label: 'Order Ruang Tindakan' },
@@ -216,4 +219,4 @@ async function getData() {
       :can-delete="canDelete"
     />
   </div>
-</template>
+</template>
\ No newline at end of file
diff --git a/app/components/content/kfr/entry.vue b/app/components/content/kfr/entry.vue
index a2352c1a..142b5fe4 100644
--- a/app/components/content/kfr/entry.vue
+++ b/app/components/content/kfr/entry.vue
@@ -10,17 +10,16 @@ import { getDetail } from '~/services/kfr.service';
 
 // #region Props & Emits
 const props = withDefaults(defineProps<{
+  encounter_id: number
   callbackUrl?: string
-  mode?: 'add' | 'edit'
+  record_id: number 
 }>(), {
-  mode: "add",
+
 })
 
 // form related state
 const route = useRoute()
-
-const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
-const kfrId = typeof route.params.kfr_id == 'string' ? parseInt(route.params.kfr_id) : 0
+const mode = computed(() => props.record_id ? `edit` : `add`)
 const inputForm = ref<ExposedForm<any> | null>(null)
 // #endregion
 
@@ -31,13 +30,13 @@ const isConfirmationOpen = ref(false)
 
 // #region Lifecycle Hooks
 onMounted(() => {
-  if(props.mode === `edit`) init()
+  if(mode.value === `edit`) init()
 })
 // #endregion
 
 // #region Functions
 async function init(){
-  const result = await getDetail(kfrId)
+  const result = await getDetail(props.record_id)
   if (result.success) {
     const currentValue = result.body?.data || {}
     inputForm.value?.setValues(currentValue)
@@ -50,7 +49,7 @@ function goBack() {
 
 async function handleConfirmAdd() {
   const inputData: any = await composeFormData()
-  const response = props.mode === `add` 
+  const response = mode.value === `add` 
   ? await handleActionSave(
       inputData,
       () => { },
@@ -58,7 +57,7 @@ async function handleConfirmAdd() {
       toast,
     )
   : await handleActionEdit(
-      kfrId,
+      props.record_id,
       inputData,
       () => { },
       () => { },
@@ -82,7 +81,7 @@ async function composeFormData(): Promise<any> {
   if (!allValid) return Promise.reject('Form validation failed')
 
   const formData = input?.values
-  formData.encounter_id = encounterId
+  formData.encounter_id = props.encounter_id
 
   return new Promise((resolve) => resolve(formData))
 }
@@ -123,7 +122,7 @@ const initial = {
 
 <template>
   <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg font-semibold xl:text-xl">
-    {{ props.mode === "add" ? `Tambah` : `Update` }} Formulir Rawat Jalan KFR
+    Formulir Rawat Jalan KFR
   </div>
   <AppKfrEntry
     ref="inputForm"
diff --git a/app/components/content/kfr/list.vue b/app/components/content/kfr/list.vue
index 4a4613e9..a8aafdac 100644
--- a/app/components/content/kfr/list.vue
+++ b/app/components/content/kfr/list.vue
@@ -27,10 +27,12 @@ import Confirmation from '~/components/pub/my-ui/confirmation/confirmation.vue'
 interface Props {
   encounter: Encounter
 }
-const props = defineProps<Props>()
-const route = useRoute()
-const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
-const kfrId = typeof route.params.kfr_id == 'string' ? parseInt(route.params.kfr_id) : 0
+const props = withDefaults(defineProps<{ 
+  encounter_id: number
+  redirectToForm?: (myRecord_id?: any) => void
+}>(), {
+  redirectToForm: () => { }
+})
 // #endregion
 
 // #region State
@@ -104,17 +106,16 @@ const addBtnTxt = computed(() => {
   }
   return `Tambah Asesmen`
 })
-
-  const headerPrep: HeaderPrep = {
+const headerPrep: HeaderPrep = {
     title: "Formulir Rawat Jalan KFR",
     icon: 'i-lucide-newspaper',
   }
 if(isDoctor.value || isAdmin.value) {
   headerPrep.addNav = {
     label: addBtnTxt.value,
-    onClick: () => navigateTo({
-      name: 'rehab-encounter-id-kfr-add',
-    }),
+    onClick: () => {
+      props.redirectToForm()
+    },
   }
 }
 if(!isAssessment.value) {
@@ -283,12 +284,7 @@ watch([recId, recAction, timestamp], () => {
   switch (recAction.value) {
     case ActionEvents.showEdit:
       // if(pagePermission.canUpdate) { 
-      navigateTo({
-        name: 'rehab-encounter-id-kfr-kfr_id-edit',
-        params: {
-          kfr_id: kfrId
-        }
-      })
+      props.redirectToForm(recId.value)
       // } else {
       //   unauthorizedToast()
       // }
diff --git a/app/components/content/kfr/main.vue b/app/components/content/kfr/main.vue
new file mode 100644
index 00000000..22be2bca
--- /dev/null
+++ b/app/components/content/kfr/main.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { crudQueryParamsMode } from '~/lib/system-constants';
+import List from './list.vue'
+import Entry from './entry.vue'
+
+const props = defineProps<{
+  encounter_id: number
+}>()
+
+const { crudQueryParams, goToDetail, goToEntry } = useQueryCRUD()
+</script>
+
+<template>
+  <List v-if="crudQueryParams.mode === crudQueryParamsMode.list"
+    :encounter_id="encounter_id"
+    :redirectToForm="goToEntry"
+    :redirectToDetail="goToDetail"/>
+  <Entry v-else-if="crudQueryParams.mode === crudQueryParamsMode.entry"
+    :encounter_id="encounter_id"
+    :record_id="crudQueryParams.recordId" />
+    
+  <List v-else :encounter_id="encounter_id" :redirectToForm="goToEntry" :redirectToDetail="goToDetail" />
+</template>
diff --git a/app/components/content/prb/detail.vue b/app/components/content/prb/detail.vue
index 4de8f260..43b09fa6 100644
--- a/app/components/content/prb/detail.vue
+++ b/app/components/content/prb/detail.vue
@@ -11,17 +11,18 @@ import Header from '~/components/pub/my-ui/nav-header/prep.vue'
 import type { Prb } from '~/models/prb'
 
 // #region Props & Emits
-const props = defineProps<{
-}>()
+const props = withDefaults(defineProps<{ 
+  encounter_id: number
+  record_id: number 
+}>(), {
+  
+})
 
 // #endregion
 
 // #region State & Computed
 
-const route = useRoute()
 const router = useRouter()
-const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
-const PrbId = typeof route.params.surgery_report_id == 'string' ? parseInt(route.params.surgery_report_id) : 0
 const Prb = ref<Prb | null>(null)
 
 const headerPrep: HeaderPrep = {
diff --git a/app/components/content/prb/entry.vue b/app/components/content/prb/entry.vue
index 244c49b0..a6612411 100644
--- a/app/components/content/prb/entry.vue
+++ b/app/components/content/prb/entry.vue
@@ -4,21 +4,11 @@ import type { Patient, genPatientProps } from '~/models/patient'
 import type { ExposedForm } from '~/types/form'
 import type { PatientBase } from '~/models/patient'
 import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
-import Header from '~/components/pub/my-ui/nav-header/prep.vue'
-import { genPatient } from '~/models/patient'
-import { PatientSchema } from '~/schemas/patient.schema'
-import { PersonAddressRelativeSchema } from '~/schemas/person-address-relative.schema'
-import { PersonAddressSchema } from '~/schemas/person-address.schema'
-import { PersonContactListSchema } from '~/schemas/person-contact.schema'
-import { PersonFamiliesSchema } from '~/schemas/person-family.schema'
-import { ResponsiblePersonSchema } from '~/schemas/person-relative.schema'
-import { uploadAttachment } from '~/services/patient.service'
 import { getDetail, update } from '~/services/prb.service'
 import type { Prb } from '~/models/prb'
 import ActionDialog from '~/components/pub/my-ui/nav-footer/ba-su.vue'
 
 import { toast } from '~/components/pub/ui/toast'
-import { withBase } from '~/models/_base'
 import Confirmation from '~/components/pub/my-ui/confirmation/confirmation.vue'
 import { PrbSchema } from '~/schemas/prb.schema'
 import { formatDateYyyyMmDd } from '~/lib/date'
@@ -29,8 +19,10 @@ import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types
 import { formatDateToDatetimeLocal } from '~/lib/utils'
 
 // #region Props & Emits
-const props = withDefaults(defineProps<{
+const props = withDefaults(defineProps<{ 
+  encounter_id: number
   callbackUrl?: string
+  record_id: number 
   isBpjs?: boolean
 }>(), {
   isBpjs: false,
@@ -44,11 +36,7 @@ const { data, isLoading, paginationMeta, searchInput, handlePageChange, handleSe
 // #endregion
 
 // #region State & Computed
-const route = useRoute()
 const router = useRouter()
-const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
-const PrbId = typeof route.params.surgery_report_id == 'string' ? parseInt(route.params.surgery_report_id) : 0
-
 const inputForm = ref<ExposedForm<any> | null>(null)
 const Prb = ref({})
 const isConfirmationOpen = ref(false)
@@ -60,7 +48,7 @@ provide("isSepDialogOpen", isSepDialogOpen);
 
 // #region Lifecycle Hooks
 onMounted(async () => {
-  const result = await getDetail(PrbId)
+  const result = await getDetail(props.record_id)
   if (result.success) {
     const responseData = {...result.body.data, date: formatDateYyyyMmDd(result.body.data.date)}
     Prb.value = responseData
@@ -76,7 +64,7 @@ function goBack() {
 
 async function handleConfirmAdd() {
   const response = await handleActionEdit(
-    PrbId,
+    props.record_id,
     await composeFormData(),
     () => { },
     () => { },
@@ -97,7 +85,7 @@ async function composeFormData(): Promise<Prb> {
   if (!allValid) return Promise.reject('Form validation failed')
 
   const formData = input?.values
-  formData.encounter_id = encounterId
+  formData.encounter_id = props.encounter_id
   return new Promise((resolve) => resolve(formData))
 }
 // #endregion region
diff --git a/app/components/content/prb/list.vue b/app/components/content/prb/list.vue
index a1c09696..02acba94 100644
--- a/app/components/content/prb/list.vue
+++ b/app/components/content/prb/list.vue
@@ -19,13 +19,16 @@ import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
 
 // #region State
 const props = withDefaults(defineProps<{
-  encounter?: Encounter
+  encounter_id: number
   isBpjs?: boolean
+  redirectToForm?: (myRecord_id?: any) => void
+  redirectToDetail?: (myRecord_id: string|number) => void
 }>(), {
   isBpjs: false,
+  redirectToForm: () => { },
+  redirectToDetail: () => { }
 })
-const route = useRoute()
-const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
+const { user } = useUserStore()
 
 const { data, isLoading, paginationMeta, searchInput, handlePageChange, handleSearch, fetchData } = usePaginatedList({
   fetchFn: (params) => getList({ ...params, includes: '', }),
@@ -66,10 +69,9 @@ const headerPrep: HeaderPrep = {
 if(true){
   headerPrep.addNav = {
     label: "Program Rujuk Balik",
-    onClick: () => navigateTo({
-        name: 'rehab-encounter-id-prb-add',
-        params: { id: encounterId },
-      }),
+    onClick: () => {
+      props.redirectToForm()
+    },
   };
 }
 headerPrep.components = [
@@ -134,10 +136,7 @@ provide('isHistoryDialogOpen', isHistoryDialogOpen)
 watch([recId, recAction, timestamp], () => {
   switch (recAction.value) {
     case ActionEvents.showEdit:
-      navigateTo({
-        name: 'rehab-encounter-id-prb-prb_id-edit',
-        params: { id: encounterId, "prb_id": recId.value },
-      })
+      props.redirectToForm(recId.value)
       break
 
     case ActionEvents.showPrint:
diff --git a/app/components/content/prb/main.vue b/app/components/content/prb/main.vue
new file mode 100644
index 00000000..29993fbd
--- /dev/null
+++ b/app/components/content/prb/main.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { crudQueryParamsMode } from '~/lib/system-constants';
+import List from './list.vue'
+import Detail from './detail.vue'
+import Entry from './entry.vue'
+
+const props = defineProps<{
+  encounter_id: number
+}>()
+
+const { crudQueryParams, goToDetail, goToEntry } = useQueryCRUD()
+</script>
+
+<template>
+  <List v-if="crudQueryParams.mode === crudQueryParamsMode.list && !crudQueryParams.recordId"
+    :encounter_id="encounter_id"
+    :redirectToForm="goToEntry"
+    :redirectToDetail="goToDetail"/>
+  <Detail v-else-if="crudQueryParams.mode === crudQueryParamsMode.list && crudQueryParams.recordId"
+    :encounter_id="encounter_id"
+    :record_id="crudQueryParams.recordId"
+    :redirectToForm="goToEntry"/>
+  <Entry v-else-if="crudQueryParams.mode === crudQueryParamsMode.entry"
+    :encounter_id="encounter_id"
+    :record_id="crudQueryParams.recordId" />
+    
+  <List v-else :encounter_id="encounter_id" :redirectToForm="goToEntry" :redirectToDetail="goToDetail" />
+</template>
diff --git a/app/components/content/resume/add.vue b/app/components/content/resume/add.vue
index 6fda4bf8..a3dba4b6 100644
--- a/app/components/content/resume/add.vue
+++ b/app/components/content/resume/add.vue
@@ -13,9 +13,13 @@ import FarmacyHistoryDialog from '~/components/app/resume/history-list/farmacy-h
 import NationalProgramHistoryDialog from '~/components/app/resume/history-list/national-program-history-dialog.vue';
 
 // #region Props & Emits
-const props = defineProps<{
+const props = withDefaults(defineProps<{
+  encounter_id: number
   callbackUrl?: string
-}>()
+  record_id: number 
+}>(), {
+
+})
 
 // form related state
 const personPatientForm = ref<ExposedForm<any> | null>(null)
diff --git a/app/components/content/resume/list.vue b/app/components/content/resume/list.vue
index 4b5b5001..70bde415 100644
--- a/app/components/content/resume/list.vue
+++ b/app/components/content/resume/list.vue
@@ -19,18 +19,27 @@ import Confirmation from '~/components/pub/my-ui/confirmation/confirmation.vue'
 import type { ExposedForm } from '~/types/form'
 import { VerificationSchema } from '~/schemas/verification.schema'
 import DocPreviewDialog from '~/components/pub/my-ui/modal/doc-preview-dialog.vue'
-import type { PagePermission } from '~/models/role'
+import type { RoleAccesses } from '~/models/role'
 import { PAGE_PERMISSIONS } from '~/lib/page-permission'
 import { unauthorizedToast } from '~/lib/utils'
+import { permissions } from '~/const/page-permission/ambulatory'
 // #endregion
 
 
 // #region Permission
-const roleAccess: PagePermission = PAGE_PERMISSIONS['/rehab/encounter']
+const roleAccess: RoleAccesses = permissions['/ambulatory/encounter'] || {}
 const { getPagePermissions } = useRBAC()
 const pagePermission = getPagePermissions(roleAccess)
+// #endregion
 
 // #region State
+const props = withDefaults(defineProps<{ 
+  encounter_id: number
+  redirectToForm?: (myRecord_id?: any) => void
+}>(), {
+  redirectToForm: () => { }
+})
+
 const { data, isLoading, paginationMeta, searchInput, handlePageChange, handleSearch, fetchData } = usePaginatedList({
   fetchFn: (params) => getPatients({ ...params, includes: ['person', 'person-Addresses'] }),
   entityName: 'patient',
@@ -67,7 +76,9 @@ const headerPrep: HeaderPrep = {
   if (pagePermission.canCreate) {
     headerPrep.addNav = {
       label: "Resume",
-      onClick: () => navigateTo('/resume/add'),
+      onClick: () => {
+        props.redirectToForm()
+      },
     }
   }
 // #endregion
@@ -158,6 +169,7 @@ provide('table_data_loader', isLoading)
 watch([recId, recAction], () => {
     switch (recAction.value) {
       case ActionEvents.showVerify:
+          isVerifyDialogOpen.value = true
         if(pagePermission.canUpdate) { 
           isVerifyDialogOpen.value = true
         } else {
@@ -165,6 +177,7 @@ watch([recId, recAction], () => {
         }
         break
       case ActionEvents.showValidate:
+          isRecordConfirmationOpen.value = true
         if(pagePermission.canUpdate) {        
           isRecordConfirmationOpen.value = true
         } else {
diff --git a/app/components/content/resume/main.vue b/app/components/content/resume/main.vue
new file mode 100644
index 00000000..44700587
--- /dev/null
+++ b/app/components/content/resume/main.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { crudQueryParamsMode } from '~/lib/system-constants';
+import List from './list.vue'
+import Entry from './add.vue'
+
+const props = defineProps<{
+  encounter_id: number
+}>()
+
+const { crudQueryParams, goToDetail, goToEntry } = useQueryCRUD()
+</script>
+
+<template>
+  <List v-if="crudQueryParams.mode === crudQueryParamsMode.list"
+    :encounter_id="encounter_id"
+    :redirectToForm="goToEntry"
+    :redirectToDetail="goToDetail"/>
+  <Entry v-else-if="crudQueryParams.mode === crudQueryParamsMode.entry"
+    :encounter_id="encounter_id"
+    :record_id="crudQueryParams.recordId" />
+    
+  <List v-else :encounter_id="encounter_id" :redirectToForm="goToEntry" :redirectToDetail="goToDetail" />
+</template>
diff --git a/app/components/content/summary-medic/entry.vue b/app/components/content/summary-medic/entry.vue
new file mode 100644
index 00000000..5769e967
--- /dev/null
+++ b/app/components/content/summary-medic/entry.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { useQueryMode } from '@/composables/useQueryMode'
+
+import List from './list.vue'
+import Form from './form.vue'
+
+// Models
+import type { Encounter } from '~/models/encounter'
+
+// Props
+interface Props {
+  encounter: Encounter
+}
+
+const props = defineProps<Props>()
+const route = useRoute()
+
+const { mode, goToEntry, backToList } = useQueryCRUDMode('mode')
+</script>
+
+<template>
+  <div>
+    <List
+      v-if="mode === 'list'"
+      :encounter="props.encounter"
+      @add="goToEntry"
+      @edit="goToEntry"
+    />
+    <Form
+      v-else
+      @back="backToList"
+    />
+  </div>
+</template>
diff --git a/app/components/content/summary-medic/form.vue b/app/components/content/summary-medic/form.vue
new file mode 100644
index 00000000..998270d9
--- /dev/null
+++ b/app/components/content/summary-medic/form.vue
@@ -0,0 +1,163 @@
+<script setup lang="ts">
+import { z } from 'zod'
+import Entry from '~/components/app/summary-medic/entry.vue'
+import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
+import ActionDialog from '~/components/pub/my-ui/nav-footer/ba-su.vue'
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import { SummaryMedicSchema } from '~/schemas/soapi.schema'
+import { toast } from '~/components/pub/ui/toast'
+import { handleActionSave, handleActionEdit } from '~/handlers/soapi-early.handler'
+// Services
+import { getDetail } from '~/services/summary-medic.service'
+const { backToList } = useQueryCRUDMode('mode')
+const { recordId } = useQueryCRUDRecordId('record-id')
+
+const route = useRoute()
+const isOpenProcedure = ref(false)
+const isOpenDiagnose = ref(false)
+const isOpenFungsional = ref(false)
+const procedures = ref([])
+const diagnoses = ref([])
+const fungsional = ref([])
+const selectedProcedure = ref<any>(null)
+const selectedDiagnose = ref<any>(null)
+const selectedFungsional = ref<any>(null)
+const schema = SummaryMedicSchema
+const payload = ref({
+  typeCode: 'amb-resume',
+  encounter_id: 0,
+  time: '',
+  value: '',
+})
+const model = ref({
+  date: '',
+  doctor: '',
+  diagnosis: '',
+  essay: '',
+  plan: '',
+  note: '',
+})
+
+const fileUrl = ref('')
+const isLoading = reactive<DataTableLoader>({
+  isTableLoading: false,
+})
+
+async function getDiagnoses() {
+  isLoading.isTableLoading = true
+  const resp = await xfetch('/api/v1/diagnose-src')
+  if (resp.success) {
+    diagnoses.value = (resp.body as Record<string, any>).data
+  }
+  isLoading.isTableLoading = false
+}
+
+async function getProcedures() {
+  isLoading.isTableLoading = true
+  const resp = await xfetch('/api/v1/procedure-src')
+  if (resp.success) {
+    procedures.value = (resp.body as Record<string, any>).data
+  }
+  isLoading.isTableLoading = false
+}
+
+onMounted(() => {
+  const mode = route.query.mode
+  const recordId = route.query['record-id']
+  if (mode === 'entry' && recordId) {
+  }
+})
+
+// TODO: mapping data detail when edit
+const loadEntryForEdit = async (id: number) => {
+  const result = await getDetail(id)
+
+  if (result?.success) {
+    console.log('model', model.value)
+  }
+}
+
+function handleClick(type: string) {
+  if (type === 'prosedur') {
+    isOpenProcedure.value = true
+  } else if (type === 'diagnosa') {
+    isOpenDiagnose.value = true
+  } else if (type === 'fungsional') {
+    isOpenDiagnose.value = true
+  }
+}
+const entryGeneralConsent = ref()
+async function actionHandler(type: string) {
+  if (type === 'back') {
+    backToList()
+    return
+  }
+  if (type === 'print') {
+    return
+  }
+  const result = await entryGeneralConsent.value?.validate()
+  if (result?.valid) {
+    // if (result.data.relatives.length > 0) {
+    //   result.data.relatives = result.data.relatives.map((item: any) => {
+    //     return item.name
+    //   })
+    // }
+
+    console.log('data', result)
+    const resp = await handleActionSave(
+      {
+        ...payload.value,
+        value: JSON.stringify(result.data),
+        encounter_id: +route.params.id,
+        time: new Date().toISOString(),
+      },
+      () => {},
+      () => {},
+      toast,
+    )
+    backToList()
+  } else {
+    console.log('Ada error di form', result)
+  }
+}
+
+const icdPreview = ref({
+  procedures: [],
+  diagnoses: [],
+})
+
+function actionDialogHandler(type: string) {
+  if (type === 'submit') {
+    // icdPreview.value.procedures = selectedProcedure.value || []
+    // icdPreview.value.diagnoses = selectedDiagnose.value || []
+    // icdPreview.value.fungsional = selectedFungsional.value || []
+  }
+  isOpenProcedure.value = false
+  isOpenDiagnose.value = false
+}
+
+provide('table_data_loader', isLoading)
+provide('icdPreview', icdPreview)
+</script>
+<template>
+  <Entry
+    ref="entryGeneralConsent"
+    v-model="model"
+    :schema="schema"
+    @click="handleClick"
+  />
+  <div class="my-2 flex justify-end py-2">
+    <Action @click="actionHandler" />
+  </div>
+  <Dialog
+    v-model:open="isOpenDiagnose"
+    title="Preview General Content"
+    size="xl"
+    prevent-outside
+  >
+    <embed
+      style="width: 100%; height: 90vh"
+      :src="fileUrl"
+    />
+  </Dialog>
+</template>
diff --git a/app/components/content/summary-medic/list.vue b/app/components/content/summary-medic/list.vue
new file mode 100644
index 00000000..5d7d3117
--- /dev/null
+++ b/app/components/content/summary-medic/list.vue
@@ -0,0 +1,185 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import List from '~/components/app/soapi/list.vue'
+import Entry from '~/components/app/summary-medic/entry.vue'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { GeneralConsentSchema, type GeneralConsentFormData } from '~/schemas/general-consent.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/summary-medic.handler'
+
+// Services
+import { getList, getDetail } from '~/services/soapi-early.service'
+
+// Models
+import type { Encounter } from '~/models/encounter'
+
+// Props
+interface Props {
+  encounter: Encounter
+}
+const props = defineProps<Props>()
+const emits = defineEmits(['add', 'edit'])
+const router = useRouter()
+const route = useRoute()
+
+const { goToEntry, backToList } = useQueryCRUDMode('mode')
+
+let units = ref<{ value: string; label: string }[]>([])
+const encounterId = ref<number>(props?.encounter?.id || 0)
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getMyList,
+} = usePaginatedList({
+  fetchFn: async ({ page, search }) => {
+    const result = await getList({
+      'encounter-id': route.params.id,
+      includes: 'encounter,employee',
+      'type-code': 'amb-resume',
+      search,
+      page,
+    })
+    if (result.success) {
+      data.value = result.body.data
+    }
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'summary-medic',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Profil Ringkasan Medis',
+  icon: 'i-lucide-box',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (value: string) => {
+      searchInput.value = value
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      goToEntry()
+    },
+  },
+}
+
+const goEdit = (id: string) => {
+  router.replace({
+    path: route.path,
+    query: {
+      ...route.query,
+      mode: 'entry',
+      'record-id': id,
+    },
+  })
+}
+
+const today = new Date()
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const getMyDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+// Watch for row actions when recId or recAction changes
+watch(recId, () => {
+  console.log('recId', recId.value)
+  if (recAction.value === ActionEvents.showEdit) {
+    goEdit(recId.value)
+    return
+  } else {
+    isRecordConfirmationOpen.value = true
+  }
+})
+
+onMounted(async () => {
+  await getMyList()
+})
+</script>
+
+<template>
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+    class="mb-4 xl:mb-5"
+  />
+
+  <List
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+
+  <!-- Record Confirmation Modal -->
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getMyList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p>
+          <strong>ID:</strong>
+          {{ record?.id }}
+        </p>
+        <p v-if="record?.name">
+          <strong>Nama:</strong>
+          {{ record.name }}
+        </p>
+        <p v-if="record?.code">
+          <strong>Kode:</strong>
+          {{ record.code }}
+        </p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>
diff --git a/app/components/content/surgery-report/detail.vue b/app/components/content/surgery-report/detail.vue
index 7c266329..5fc7f2d6 100644
--- a/app/components/content/surgery-report/detail.vue
+++ b/app/components/content/surgery-report/detail.vue
@@ -11,17 +11,18 @@ import Header from '~/components/pub/my-ui/nav-header/prep.vue'
 import type { SurgeryReport } from '~/models/surgery-report'
 
 // #region Props & Emits
-const props = defineProps<{
-}>()
+const props = withDefaults(defineProps<{ 
+  encounter_id: number
+  record_id: number 
+}>(), {
+  
+})
 
 // #endregion
 
 // #region State & Computed
 
-const route = useRoute()
 const router = useRouter()
-const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
-const surgeryReportId = typeof route.params.surgery_report_id == 'string' ? parseInt(route.params.surgery_report_id) : 0
 const surgeryReport = ref<SurgeryReport | null>(null)
 
 const headerPrep: HeaderPrep = {
@@ -33,11 +34,11 @@ const headerPrep: HeaderPrep = {
 
 // #region Lifecycle Hooks
 // onMounted(async () => {
-//   const result = await getDetail(controlLetterId, {
+//   const result = await getDetail(props.record_id, {
 //     includes: "unit,specialist,subspecialist,doctor-employee-person",
 //   })
 //   if (result.success) {
-//     controlLetter.value = result.body?.data
+//     surgeryReport.value = result.body?.data
 //   }
 // })
 // #endregion
diff --git a/app/components/content/surgery-report/entry.vue b/app/components/content/surgery-report/entry.vue
index ff817905..4a2d0911 100644
--- a/app/components/content/surgery-report/entry.vue
+++ b/app/components/content/surgery-report/entry.vue
@@ -28,9 +28,13 @@ import { handleActionEdit } from '~/handlers/surgery-report.handler'
 import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
 
 // #region Props & Emits
-const props = defineProps<{
+const props = withDefaults(defineProps<{ 
+  encounter_id: number
   callbackUrl?: string
-}>()
+  record_id: number 
+}>(), {
+
+})
 
 // form related state
 const { data, isLoading, paginationMeta, searchInput, handlePageChange, handleSearch, fetchData } = usePaginatedList({
@@ -40,10 +44,7 @@ const { data, isLoading, paginationMeta, searchInput, handlePageChange, handleSe
 // #endregion
 
 // #region State & Computed
-const route = useRoute()
 const router = useRouter()
-const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
-const surgeryReportId = typeof route.params.surgery_report_id == 'string' ? parseInt(route.params.surgery_report_id) : 0
 
 const inputForm = ref<ExposedForm<any> | null>(null)
 const surgeryReport = ref({})
@@ -53,7 +54,7 @@ const selectedOperativeAction = ref<any>(null)
 
 // #region Lifecycle Hooks
 onMounted(async () => {
-  const result = await getDetail(surgeryReportId)
+  const result = await getDetail(props.record_id)
   if (result.success) {
     const responseData = {...result.body.data, date: formatDateYyyyMmDd(result.body.data.date)}
     surgeryReport.value = responseData
@@ -69,7 +70,7 @@ function goBack() {
 
 async function handleConfirmAdd() {
   const response = await handleActionEdit(
-    surgeryReportId,
+    props.record_id,
     await composeFormData(),
     () => { },
     () => { },
@@ -90,7 +91,7 @@ async function composeFormData(): Promise<SurgeryReport> {
   if (!allValid) return Promise.reject('Form validation failed')
 
   const formData = input?.values
-  formData.encounter_id = encounterId
+  formData.encounter_id = props.encounter_id
   return new Promise((resolve) => resolve(formData))
 }
 // #endregion region
diff --git a/app/components/content/surgery-report/list.vue b/app/components/content/surgery-report/list.vue
index 82bbd7b3..bb3a6728 100644
--- a/app/components/content/surgery-report/list.vue
+++ b/app/components/content/surgery-report/list.vue
@@ -16,11 +16,14 @@ import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
 // #endregion
 
 // #region State
-const props = defineProps<{
-  encounter?: Encounter
-}>()
-const route = useRoute()
-const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
+const props = withDefaults(defineProps<{
+  encounter_id: number
+  redirectToForm?: (myRecord_id?: any) => void
+  redirectToDetail?: (myRecord_id: string|number) => void
+}>(), {
+  redirectToForm: () => { },
+  redirectToDetail: () => { }
+})
 
 const { data, isLoading, paginationMeta, searchInput, handlePageChange, handleSearch, fetchData } = usePaginatedList({
   fetchFn: (params) => getList({ ...params, includes: 'specialist,subspecialist,doctor-employee-person', }),
@@ -42,10 +45,9 @@ const headerPrep: HeaderPrep = {
   icon: 'i-lucide-history',
   addNav: {
     label: "Laporan Operasi",
-    onClick: () => navigateTo({
-        name: 'rehab-encounter-id-surgery-report-add',
-        params: { id: encounterId },
-      }),
+    onClick: () => {
+      props.redirectToForm()
+    },
   },
 }
 const refSearchNav: RefSearchNav = {
@@ -125,23 +127,14 @@ provide('isHistoryDialogOpen', isHistoryDialogOpen)
 watch([recId, recAction], () => {
   switch (recAction.value) {
     case ActionEvents.showDetail:
-      navigateTo({
-        name: 'rehab-encounter-id-surgery-report-control_letter_id',
-        params: { id: encounterId, "control_letter_id": recId.value },
-      })
+      props.redirectToDetail(recId.value)
       break
 
     case ActionEvents.showEdit:
-      // TODO: Handle edit action
-      // isFormEntryDialogOpen.value = true
-      navigateTo({
-        name: 'rehab-encounter-id-surgery-report-control_letter_id-edit',
-        params: { id: encounterId, "control_letter_id": recId.value },
-      })
+      props.redirectToForm(recId.value)
       break
 
     case ActionEvents.showConfirmDelete:
-      // Trigger confirmation modal open
       isRecordConfirmationOpen.value = true
       break
   }
diff --git a/app/components/content/surgery-report/main.vue b/app/components/content/surgery-report/main.vue
new file mode 100644
index 00000000..29993fbd
--- /dev/null
+++ b/app/components/content/surgery-report/main.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { crudQueryParamsMode } from '~/lib/system-constants';
+import List from './list.vue'
+import Detail from './detail.vue'
+import Entry from './entry.vue'
+
+const props = defineProps<{
+  encounter_id: number
+}>()
+
+const { crudQueryParams, goToDetail, goToEntry } = useQueryCRUD()
+</script>
+
+<template>
+  <List v-if="crudQueryParams.mode === crudQueryParamsMode.list && !crudQueryParams.recordId"
+    :encounter_id="encounter_id"
+    :redirectToForm="goToEntry"
+    :redirectToDetail="goToDetail"/>
+  <Detail v-else-if="crudQueryParams.mode === crudQueryParamsMode.list && crudQueryParams.recordId"
+    :encounter_id="encounter_id"
+    :record_id="crudQueryParams.recordId"
+    :redirectToForm="goToEntry"/>
+  <Entry v-else-if="crudQueryParams.mode === crudQueryParamsMode.entry"
+    :encounter_id="encounter_id"
+    :record_id="crudQueryParams.recordId" />
+    
+  <List v-else :encounter_id="encounter_id" :redirectToForm="goToEntry" :redirectToDetail="goToDetail" />
+</template>
diff --git a/app/components/content/vaccine-data/detail.vue b/app/components/content/vaccine-data/detail.vue
index fd977b39..9377c374 100644
--- a/app/components/content/vaccine-data/detail.vue
+++ b/app/components/content/vaccine-data/detail.vue
@@ -11,17 +11,18 @@ import Header from '~/components/pub/my-ui/nav-header/prep.vue'
 import type { VaccineData } from '~/models/vaccine-data'
 
 // #region Props & Emits
-const props = defineProps<{
-}>()
+const props = withDefaults(defineProps<{ 
+  encounter_id: number
+  record_id: number 
+}>(), {
+  
+})
 
 // #endregion
 
 // #region State & Computed
 
-const route = useRoute()
 const router = useRouter()
-const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
-const VaccineDataId = typeof route.params.surgery_report_id == 'string' ? parseInt(route.params.surgery_report_id) : 0
 const VaccineData = ref<VaccineData | null>(null)
 
 const headerPrep: HeaderPrep = {
diff --git a/app/components/content/vaccine-data/entry.vue b/app/components/content/vaccine-data/entry.vue
index 60fe3775..d8afd94b 100644
--- a/app/components/content/vaccine-data/entry.vue
+++ b/app/components/content/vaccine-data/entry.vue
@@ -1,21 +1,9 @@
 <script setup lang="ts">
 import { useRouter } from 'vue-router'
-import type { Patient, genPatientProps } from '~/models/patient'
 import type { ExposedForm } from '~/types/form'
-import type { PatientBase } from '~/models/patient'
 import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
-import Header from '~/components/pub/my-ui/nav-header/prep.vue'
-import { genPatient } from '~/models/patient'
-import { PatientSchema } from '~/schemas/patient.schema'
-import { PersonAddressRelativeSchema } from '~/schemas/person-address-relative.schema'
-import { PersonAddressSchema } from '~/schemas/person-address.schema'
-import { PersonContactListSchema } from '~/schemas/person-contact.schema'
-import { PersonFamiliesSchema } from '~/schemas/person-family.schema'
-import { ResponsiblePersonSchema } from '~/schemas/person-relative.schema'
-import { uploadAttachment } from '~/services/patient.service'
 import { getDetail, update } from '~/services/vaccine-data.service'
 import type { VaccineData } from '~/models/vaccine-data'
-import ActionDialog from '~/components/pub/my-ui/nav-footer/ba-su.vue'
 
 import { toast } from '~/components/pub/ui/toast'
 import { withBase } from '~/models/_base'
@@ -25,12 +13,13 @@ import { formatDateYyyyMmDd } from '~/lib/date'
 import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
 import { getList, remove } from '~/services/vaccine-data.service'
 import { handleActionEdit, handleActionSave } from '~/handlers/vaccine-data.handler'
-import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
 import { formatDateToDatetimeLocal } from '~/lib/utils'
 
 // #region Props & Emits
-const props = withDefaults(defineProps<{
+const props = withDefaults(defineProps<{ 
+  encounter_id: number
   callbackUrl?: string
+  record_id: number 
   isBpjs?: boolean
 }>(), {
   isBpjs: false,
@@ -44,11 +33,7 @@ const { data, isLoading, paginationMeta, searchInput, handlePageChange, handleSe
 // #endregion
 
 // #region State & Computed
-const route = useRoute()
 const router = useRouter()
-const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
-const VaccineDataId = typeof route.params.surgery_report_id == 'string' ? parseInt(route.params.surgery_report_id) : 0
-
 const inputForm = ref<ExposedForm<any> | null>(null)
 const VaccineData = ref({})
 const isConfirmationOpen = ref(false)
@@ -60,7 +45,7 @@ provide("isSepDialogOpen", isSepDialogOpen);
 
 // #region Lifecycle Hooks
 onMounted(async () => {
-  const result = await getDetail(VaccineDataId)
+  const result = await getDetail(props.record_id)
   if (result.success) {
     const responseData = {...result.body.data, date: formatDateYyyyMmDd(result.body.data.date)}
     VaccineData.value = responseData
@@ -96,7 +81,7 @@ async function composeFormData(): Promise<VaccineData> {
   if (!allValid) return Promise.reject('Form validation failed')
 
   const formData = input?.values
-  formData.encounter_id = encounterId
+  formData.encounter_id = props.encounter_id
   return new Promise((resolve) => resolve(formData))
 }
 // #endregion region
diff --git a/app/components/content/vaccine-data/list.vue b/app/components/content/vaccine-data/list.vue
index a701271e..d9520c98 100644
--- a/app/components/content/vaccine-data/list.vue
+++ b/app/components/content/vaccine-data/list.vue
@@ -20,14 +20,16 @@ import { medicalRoles } from '~/const/common/role'
 
 // #region State
 const props = withDefaults(defineProps<{
-  encounter?: Encounter
+  encounter_id: number
   isBpjs?: boolean
+  redirectToForm?: (myRecord_id?: any) => void
+  redirectToDetail?: (myRecord_id: string|number) => void
 }>(), {
   isBpjs: false,
+  redirectToForm: () => { },
+  redirectToDetail: () => { }
 })
-const route = useRoute()
-const {user} = useUserStore()
-const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
+const { user } = useUserStore()
 
 const { data, isLoading, paginationMeta, searchInput, handlePageChange, handleSearch, fetchData } = usePaginatedList({
   fetchFn: (params) => getList({ ...params, includes: '', }),
@@ -61,10 +63,9 @@ const headerPrep: HeaderPrep = {
 if(user.activeRole === 'emp|doc' || user.activeRole === 'system') {
   headerPrep.addNav = {
     label: "Data Vaksin",
-    onClick: () => navigateTo({
-        name: 'rehab-encounter-id-vaccine-data-add',
-        params: { id: encounterId },
-      }),
+    onClick: () => {
+      props.redirectToForm()
+    },
   };
 }
 // #endregion
@@ -123,10 +124,7 @@ provide('isHistoryDialogOpen', isHistoryDialogOpen)
 watch([recId, recAction, timestamp], () => {
   switch (recAction.value) {
     case ActionEvents.showDetail:
-      navigateTo({
-        name: 'rehab-encounter-id-vaccine-data-vaccine_data_id',
-        params: { id: encounterId, "vaccine_data_id": recId.value },
-      })
+      props.redirectToDetail(recId.value)
       break
 
     case ActionEvents.showConfirmDelete:
diff --git a/app/components/content/vaccine-data/main.vue b/app/components/content/vaccine-data/main.vue
new file mode 100644
index 00000000..29993fbd
--- /dev/null
+++ b/app/components/content/vaccine-data/main.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { crudQueryParamsMode } from '~/lib/system-constants';
+import List from './list.vue'
+import Detail from './detail.vue'
+import Entry from './entry.vue'
+
+const props = defineProps<{
+  encounter_id: number
+}>()
+
+const { crudQueryParams, goToDetail, goToEntry } = useQueryCRUD()
+</script>
+
+<template>
+  <List v-if="crudQueryParams.mode === crudQueryParamsMode.list && !crudQueryParams.recordId"
+    :encounter_id="encounter_id"
+    :redirectToForm="goToEntry"
+    :redirectToDetail="goToDetail"/>
+  <Detail v-else-if="crudQueryParams.mode === crudQueryParamsMode.list && crudQueryParams.recordId"
+    :encounter_id="encounter_id"
+    :record_id="crudQueryParams.recordId"
+    :redirectToForm="goToEntry"/>
+  <Entry v-else-if="crudQueryParams.mode === crudQueryParamsMode.entry"
+    :encounter_id="encounter_id"
+    :record_id="crudQueryParams.recordId" />
+    
+  <List v-else :encounter_id="encounter_id" :redirectToForm="goToEntry" :redirectToDetail="goToDetail" />
+</template>
diff --git a/app/components/pub/my-ui/checkboxes/checkboxes.vue b/app/components/pub/my-ui/checkboxes/checkboxes.vue
new file mode 100644
index 00000000..0cd21392
--- /dev/null
+++ b/app/components/pub/my-ui/checkboxes/checkboxes.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { Item } from './index'
+
+const props = defineProps<{
+  items: Item[]
+  useFlex?: boolean
+}>()
+
+const model = defineModel<string[]>()
+const checks: Record<string, any> = ref({})
+
+model.value = []
+props.items.forEach((item) => {
+  checks.value[item.value] = item.checked || false
+})
+
+watch(checks, () => {
+  const list: string[] = []
+  Object.keys(checks.value).forEach((key) => {
+    if (checks.value[key]) {
+      list.push(key)
+    }
+  })
+  model.value = list
+}, { deep: true })
+
+function check(value: string, status: boolean) {
+  checks.value[value] = status
+}
+</script>
+
+<template>
+  <div :class="useFlex ? 'flex gap-2' : ''">
+    <label v-for="item, idx in items" :key="item.value" class="flex pe-4">
+      <Checkbox @update:checked="(status) => check(item.value, status)" :checked="checks[item.value]" />
+      <div class="pt-0.5 ps-2">
+        {{ item.label }}
+      </div>
+    </label>
+  </div>
+</template>
diff --git a/app/components/pub/my-ui/checkboxes/index.ts b/app/components/pub/my-ui/checkboxes/index.ts
new file mode 100644
index 00000000..100ae6ab
--- /dev/null
+++ b/app/components/pub/my-ui/checkboxes/index.ts
@@ -0,0 +1,14 @@
+export interface Item {
+  value: string
+  label: string
+  checked?: boolean
+}
+
+export function checkItems(items: Item[], value: string[]) {
+  items.forEach((item, idx) => {
+    items[idx]!.checked = value.includes(item.value)
+    // item.checked = value.includes(item.value)
+  })
+}
+
+export { default as Checkboxes } from './checkboxes.vue'
diff --git a/app/composables/useQueryCRUD.ts b/app/composables/useQueryCRUD.ts
index 481142aa..ee993a8e 100644
--- a/app/composables/useQueryCRUD.ts
+++ b/app/composables/useQueryCRUD.ts
@@ -30,15 +30,17 @@ export function useQueryCRUD(modeKey: string = 'mode', recordIdKey: string = 're
   })
 
   const goToEntry = (myRecord_id?: any) => {
-    if (myRecord_id) {
-      crudQueryParams.value.mode = 'entry'
-      crudQueryParams.value.recordId = myRecord_id
+    if(myRecord_id) {
+      crudQueryParams.value = { mode: 'entry', recordId: myRecord_id }
     } else {
-      crudQueryParams.value.mode = 'entry'
-      crudQueryParams.value.recordId = undefined
+      crudQueryParams.value = { mode: 'entry', recordId: undefined }
     }
   }
 
+  const goToDetail = (myRecord_id: string|number) => {
+    crudQueryParams.value = { mode: 'list', recordId: String(myRecord_id) }
+  }
+
   const backToList = () => {
     delete route.query[recordIdKey]
     router.push({
@@ -50,7 +52,7 @@ export function useQueryCRUD(modeKey: string = 'mode', recordIdKey: string = 're
     })
   }
 
-  return { crudQueryParams, goToEntry, backToList }
+  return { crudQueryParams, goToEntry, goToDetail, backToList }
 }
 
 export function useQueryCRUDMode(key: string = 'mode') {
diff --git a/app/handlers/encounter-init.handler.ts b/app/handlers/encounter-init.handler.ts
index 7652d124..c0071669 100644
--- a/app/handlers/encounter-init.handler.ts
+++ b/app/handlers/encounter-init.handler.ts
@@ -45,16 +45,17 @@ const MicroLabOrderAsync = defineAsyncComponent(() => import('~/components/conte
 const CprjAsync = defineAsyncComponent(() => import('~/components/content/cprj/entry.vue'))
 const RadiologyAsync = defineAsyncComponent(() => import('~/components/content/radiology-order/main.vue'))
 const ConsultationAsync = defineAsyncComponent(() => import('~/components/content/consultation/list.vue'))
-const DocUploadListAsync = defineAsyncComponent(() => import('~/components/content/document-upload/list.vue'))
+const DocUploadListAsync = defineAsyncComponent(() => import('~/components/content/document-upload/main.vue'))
 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 ActionReportEntryAsync = defineAsyncComponent(() => import('~/components/content/action-report/entry.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 ResumeListAsync = defineAsyncComponent(() => import('~/components/content/resume/main.vue'))
+const ControlLetterListAsync = defineAsyncComponent(() => import('~/components/content/control-letter/main.vue'))
+const KfrListAsync = defineAsyncComponent(() => import('~/components/content/kfr/main.vue'))
+const PrbListAsync = defineAsyncComponent(() => import('~/components/content/prb/main.vue'))
+const SurgeryReportListAsync = defineAsyncComponent(() => import('~/components/content/surgery-report/main.vue'))
+const VaccineDataListAsync = defineAsyncComponent(() => import('~/components/content/vaccine-data/main.vue'))
 const InitialNursingStudyAsync = defineAsyncComponent(() => import('~/components/content/initial-nursing/entry.vue'))
+const SummaryMedicAsync = defineAsyncComponent(() => import('~/components/content/summary-medic/entry.vue'))
+const ActionReportEntryAsync = defineAsyncComponent(() => import('~/components/content/action-report/entry.vue'))
 
 const defaultKeys: Record<string, any> = {
   status: {
@@ -263,6 +264,12 @@ const defaultKeys: Record<string, any> = {
     classCode: ['ambulatory', 'emergency', 'inpatient'],
     unit: 'all',
   },
+  summaryMedic: {
+    id: 'summary-medic',
+    title: 'Profil Ringkasan Medis',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+  },
   initialNursingStudy: {
     id: 'initial-nursing-study',
     title: 'Kajian Awal Keperawatan',
@@ -442,7 +449,10 @@ export function injectComponents(id: string | number, data: EncounterListData, m
     currentKeys.priceList['component'] = null
     currentKeys.priceList['props'] = { encounter_id: id }
   }
-
+  if (currentKeys?.summaryMedic) {
+    currentKeys.summaryMedic['component'] = SummaryMedicAsync
+    currentKeys.summaryMedic['props'] = { encounter_id: id }
+  }
   if (currentKeys?.initialNursingStudy) {
     currentKeys.initialNursingStudy['component'] = InitialNursingStudyAsync
     currentKeys.initialNursingStudy['props'] = { encounter: data?.encounter }
diff --git a/app/handlers/summary-medic.handler.ts b/app/handlers/summary-medic.handler.ts
new file mode 100644
index 00000000..50e404a7
--- /dev/null
+++ b/app/handlers/summary-medic.handler.ts
@@ -0,0 +1,24 @@
+// Handlers
+import { genCrudHandler } from '~/handlers/_handler'
+
+// Services
+import { create, update, remove } from '~/services/summary-medic.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({
+  create,
+  update,
+  remove,
+})
diff --git a/app/lib/system-constants.ts b/app/lib/system-constants.ts
new file mode 100644
index 00000000..60072d3f
--- /dev/null
+++ b/app/lib/system-constants.ts
@@ -0,0 +1,5 @@
+export type CrudQueryParamsModeType = "list" | "entry"| "add"| "edit"
+export const crudQueryParamsMode = {
+  list: 'list',
+  entry: 'entry',
+}
\ No newline at end of file
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
deleted file mode 100644
index e06920ba..00000000
--- a/app/pages/(features)/rehab/encounter/[id]/document-upload/[document_id]/edit.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<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
deleted file mode 100644
index fcc7432e..00000000
--- a/app/pages/(features)/rehab/encounter/[id]/document-upload/add.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<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/schemas/soapi.schema.ts b/app/schemas/soapi.schema.ts
index 1d4faaba..73a43814 100644
--- a/app/schemas/soapi.schema.ts
+++ b/app/schemas/soapi.schema.ts
@@ -153,6 +153,15 @@ export const ObjectSchema = z.object({
   'head-to-toe': z.record(z.string()).default({}),
 })
 
+export const SummaryMedicSchema = z.object({
+  date: z.string().default(''),
+  doctor: z.string().default(''),
+  diagnosis: z.string().default(''),
+  essay: z.string().default(''),
+  plan: z.string().default(''),
+  note: z.string().default(''),
+})
+
 export const InitialNursingSchema = z.object({
   'pri-complain': z.string().default(''),
   'med-type': z.string().default(''),
diff --git a/app/services/summary-medic.service.ts b/app/services/summary-medic.service.ts
new file mode 100644
index 00000000..2a6611fc
--- /dev/null
+++ b/app/services/summary-medic.service.ts
@@ -0,0 +1,23 @@
+import * as base from './_crud-base'
+
+const path = '/api/v1/general-consent'
+
+export function create(data: any) {
+  return base.create(path, data)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id)
+}