diff --git a/.env.example b/.env.example
index 884ee1fb..864bbbe6 100644
--- a/.env.example
+++ b/.env.example
@@ -1,4 +1,5 @@
 NUXT_MAIN_API_ORIGIN=
 NUXT_BPJS_API_ORIGIN=
+NUXT_API_VCLAIM_SWAGGER= # https://vclaim-api.multy.chat 
 NUXT_SYNC_API_ORIGIN=
 NUXT_API_ORIGIN=
diff --git a/app/components/app/action-report/entry-form.vue b/app/components/app/action-report/entry-form.vue
new file mode 100644
index 00000000..2479e1c7
--- /dev/null
+++ b/app/components/app/action-report/entry-form.vue
@@ -0,0 +1,468 @@
+<script setup lang="ts">
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+import { type Duration, intervalToDuration } from 'date-fns'
+
+// schema
+import { type ActionReportFormData, ActionReportSchema } from '~/schemas/action-report.schema'
+
+// type
+import type { Doctor } from '~/models/doctor'
+import { type ClickType as ActionClickType } from '~/components/pub/my-ui/nav-footer/index'
+
+// components
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import Separator from '~/components/pub/ui/separator/Separator.vue'
+import { ArrayMessage } from '~/components/pub/ui/form'
+import ActionForm from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
+
+// form field components
+import {
+  FillNotes,
+  RadioBloods,
+  SelectBilling,
+  SelectBirthPlace,
+  SelectBirthType,
+  SelectOperationSystem,
+  SelectOperationType,
+  SelectSpecimen,
+  SelectSurgeryCounter,
+  SelectSurgeryType,
+} from './fields'
+import { ButtonAction, Fragment, InputBase, TextAreaInput } from '~/components/pub/my-ui/form/'
+import { SelectDoctor } from '~/components/app/doctor/fields'
+// Helpers
+
+// #region Props & Emits
+interface FormData extends ActionReportFormData {
+  _operationDuration: string
+  _anesthesiaDuration: string
+}
+
+interface Props {
+  isLoading: boolean
+  mode: 'add' | 'edit' | 'view'
+  initialValues?: Partial<FormData>
+
+  // form related
+  doctors: Doctor[]
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<{
+  (e: 'submit', payload: FormData): void
+  (e: 'back'): void
+  (e: 'error', errors: Error): void
+}>()
+
+const tissueNotesLimit = 5
+const mode = toRef(props, 'mode')
+const isLoading = toRef(props, 'isLoading')
+
+const isReadonly = computed(() => {
+  if (isLoading.value === true) {
+    return true
+  }
+
+  if (mode.value === 'view') {
+    return true
+  }
+
+  return false
+})
+
+const formSchema = toTypedSchema(ActionReportSchema)
+
+const { errors, handleSubmit, values, meta, resetForm, setFieldValue, setValues, validate } = useForm<FormData>({
+  name: 'encounterActionReportForm',
+  validationSchema: formSchema,
+  initialValues: props.initialValues ? props.initialValues : {},
+  validateOnMount: false,
+})
+
+defineExpose({
+  validate,
+  resetForm,
+  setValues,
+  values,
+})
+// #endregion
+
+// #region State & Computed
+// #endregion
+
+// #region Lifecycle Hooks
+// #endregion
+
+// #region Functions
+// #endregion region
+
+// #region Utilities & event handlers
+const onFormActionClicked = (action: ActionClickType) => {
+  if (action === 'back') {
+    emit('back')
+    return
+  }
+  if (action === 'submit') {
+    onSubmit()
+    return
+  }
+}
+
+const onSubmit = handleSubmit(
+  (values) => {
+    console.log(JSON.stringify(values))
+    emit('submit', values)
+  },
+  (errors) => {
+    console.error(errors)
+    emit('error', new Error('Silahkan lengkapi form terlebih dahulu'))
+  },
+)
+// #endregion
+
+// #region Watcher
+watch(
+  () => [values.operationExecution.operationStartAt, values.operationExecution.operationEndAt],
+  ([start, end]) => {
+    if (!start || !end) return
+    const pStart = new Date(start)
+    const pEnd = new Date(end)
+
+    const formatTime = (r: Duration) =>
+      [r.hours && `${r.hours} jam`, r.minutes && `${r.minutes} menit`, r.seconds && `${r.seconds} detik`]
+        .filter(Boolean)
+        .join(' ')
+
+    const res = intervalToDuration({
+      start: pStart,
+      end: pEnd,
+    })
+
+    setFieldValue('_operationDuration', formatTime(res))
+  },
+  { immediate: true },
+)
+
+watch(
+  () => [values.operationExecution.anesthesiaStartAt, values.operationExecution.anesthesiaEndAt],
+  ([start, end]) => {
+    if (!start || !end) return
+    const pStart = new Date(start)
+    const pEnd = new Date(end)
+
+    const formatTime = (r: Duration) =>
+      [r.hours && `${r.hours} jam`, r.minutes && `${r.minutes} menit`, r.seconds && `${r.seconds} detik`]
+        .filter(Boolean)
+        .join(' ')
+
+    const res = intervalToDuration({
+      start: pStart,
+      end: pEnd,
+    })
+
+    setFieldValue('_anesthesiaDuration', formatTime(res))
+  },
+  { immediate: true },
+)
+// #endregion
+</script>
+
+<template>
+  <form @submit.prevent="onSubmit">
+    <Fragment
+      v-slot="{ section }"
+      title="Tim Pelaksana Tindakan"
+    >
+      <p class="text-lg font-semibold">{{ section }}</p>
+
+      <DE.Block
+        :col-count="4"
+        :cell-flex="false"
+      >
+        <SelectDoctor
+          fieldName="operatorTeam.dpjpId"
+          label="Dokter Pemeriksa"
+          placeholder="Pilih dokter"
+          :doctors="doctors"
+          :is-disabled="isReadonly"
+        />
+        <InputBase
+          field-name="operatorTeam.operatorName"
+          label="Operator"
+          placeholder="Masukkan operator"
+          :is-disabled="isReadonly"
+        />
+        <InputBase
+          field-name="operatorTeam.assistantOperatorName"
+          label="Asisten Operator"
+          placeholder="Masukkan asisten operator"
+          :is-disabled="isReadonly"
+        />
+        <InputBase
+          field-name="operatorTeam.instrumentNurseName"
+          label="Instrumentir"
+          placeholder="Masukkan instrumentir"
+          :is-disabled="isReadonly"
+        />
+        <InputBase
+          field-name="operatorTeam.surgeryDate"
+          label="Tanggal Pembedahan"
+          input-type="datetime-local"
+          :is-disabled="isReadonly"
+          placeholder=""
+        />
+      </DE.Block>
+      <DE.Block
+        :col-count="4"
+        :cell-flex="false"
+      >
+        <TextAreaInput
+          field-name="operatorTeam.actionDiagnosis"
+          label="Diagnosa Tindakan"
+          placeholder="Masukkan diagnosa tindakan"
+          :col-span="2"
+          :rows="5"
+          :is-disabled="isReadonly"
+        />
+        <InputBase
+          field-name="operatorTeam.postSurgeryNurseId"
+          label="Perawat Pasca Bedah"
+          placeholder="Masukkan perawat pasca bedah"
+          :is-disabled="isReadonly"
+        />
+      </DE.Block>
+    </Fragment>
+
+    <Separator class="my-4" />
+
+    <Fragment
+      v-slot="{ section }"
+      title="Tindakan Operatif/Non Operatif Lain"
+    >
+      <!-- <p class="text-lg font-semibold">{{ section }}</p> -->
+      <DE.Block
+        :col-count="2"
+        :cell-flex="false"
+      >
+        <DE.Cell>
+          <slot name="procedures" />
+          <ArrayMessage
+            class="mt-1"
+            v-if="meta.touched"
+            name="procedures"
+          />
+        </DE.Cell>
+      </DE.Block>
+    </Fragment>
+
+    <Separator class="my-4" />
+
+    <Fragment
+      v-slot="{ section }"
+      title="Data Pelaksanaan Operasi"
+    >
+      <p class="text-lg font-semibold">{{ section }}</p>
+
+      <DE.Block
+        :col-count="3"
+        :cell-flex="false"
+      >
+        <SelectSurgeryType
+          field-name="operationExecution.surgeryType"
+          label="Jenis Operasi"
+          placeholder="Pilih jenis operasi"
+          :is-disabled="isReadonly"
+        />
+        <SelectBilling
+          field-name="operationExecution.billingCode"
+          label="Kode Billing"
+          placeholder="Pilih kode billing"
+          :is-disabled="isReadonly"
+        />
+        <SelectOperationSystem
+          field-name="operationExecution.operationSystem"
+          label="Sistem Operasi"
+          placeholder="Pilih sistem operasi"
+          :is-disabled="isReadonly"
+        />
+      </DE.Block>
+
+      <DE.Block
+        :col-count="3"
+        :cell-flex="false"
+      >
+        <InputBase
+          field-name="operationExecution.operationStartAt"
+          label="Operasi Mulai"
+          placeholder="Pilih Tanggal"
+          input-type="datetime-local"
+          :is-disabled="isReadonly"
+        />
+        <InputBase
+          field-name="operationExecution.operationEndAt"
+          label="Operasi Selesai"
+          placeholder="Pilih Tanggal"
+          input-type="datetime-local"
+          :is-disabled="isReadonly"
+        />
+        <InputBase
+          field-name="_operationDuration"
+          label="Lama Operasi"
+          placeholder="-"
+          is-disabled
+        />
+      </DE.Block>
+
+      <DE.Block
+        :col-count="3"
+        :cell-flex="false"
+      >
+        <InputBase
+          field-name="operationExecution.anesthesiaStartAt"
+          label="Pembiusan Mulai"
+          placeholder="Pilih Tanggal"
+          input-type="datetime-local"
+          :is-disabled="isReadonly"
+        />
+        <InputBase
+          field-name="operationExecution.anesthesiaEndAt"
+          label="Pembiusan Selesai"
+          placeholder="Pilih Tanggal"
+          input-type="datetime-local"
+          :is-disabled="isReadonly"
+        />
+        <InputBase
+          field-name="_anesthesiaDuration"
+          label="Lama Pembiusan"
+          placeholder="-"
+          is-disabled
+        />
+      </DE.Block>
+
+      <DE.Block
+        :col-count="3"
+        :cell-flex="false"
+      >
+        <SelectOperationType
+          field-name="operationExecution.surgeryCleanType"
+          label="Jenis Pembedahan"
+          placeholder="Pilih jenis pembedahan"
+          :is-disabled="isReadonly"
+        />
+        <SelectSurgeryCounter
+          field-name="operationExecution.surgeryNumber"
+          label="Operasi Ke"
+          placeholder="Pilih"
+          :is-disabled="isReadonly"
+        />
+        <SelectBirthType
+          field-name="operationExecution.birthRemark"
+          label="Keterangan Lahir"
+          placeholder="Pilih"
+          :is-disabled="isReadonly"
+        />
+        <SelectBirthPlace
+          field-name="operationExecution.birthPlaceNote"
+          label="Ket. Tempat Lahir"
+          placeholder="Pilih keterangan tempat lahir"
+          :is-disabled="isReadonly"
+        />
+
+        <InputBase
+          field-name="operationExecution.personWeight"
+          label="Berat Badan"
+          placeholder="Masukkan berat badan"
+          numeric-only
+          suffix-msg="Gram"
+          :is-disabled="isReadonly"
+        />
+        <InputBase
+          field-name="operationExecution.birthCondition"
+          label="Ket. Saat Lahir"
+          placeholder="Tambah catatan"
+          :is-disabled="isReadonly"
+        />
+      </DE.Block>
+
+      <DE.Block
+        :col-count="4"
+        :cell-flex="false"
+      >
+        <TextAreaInput
+          field-name="operationExecution.operationDescription"
+          label="Uraian Operasi"
+          placeholder="Masukkan uraian"
+          :rows="3"
+          :col-span="2"
+          :is-disabled="isReadonly"
+        />
+        <InputBase
+          field-name="operationExecution.bleedingAmountCc"
+          label="Jumlah Pendarahan"
+          placeholder="Masukkan jumlah pendarahan"
+          suffix-msg="CC"
+          numeric-only
+          :is-disabled="isReadonly"
+        />
+      </DE.Block>
+      <DE.Block
+        :col-count="3"
+        :cell-flex="false"
+      >
+        <RadioBloods
+          field-name="bloodInput"
+          label="Jenis & Jumlah Darah Masuk"
+          :is-disabled="isReadonly"
+        />
+      </DE.Block>
+
+      <DE.Block
+        :col-count="3"
+        :cell-flex="false"
+      >
+        <InputBase
+          field-name="implant.brand"
+          label="Merk"
+          placeholder="Masukkan merk"
+          :is-disabled="isReadonly"
+        />
+
+        <InputBase
+          field-name="implant.name"
+          label="Nama Implant"
+          placeholder="Masukkan nama implant"
+          :is-disabled="isReadonly"
+        />
+
+        <InputBase
+          field-name="implant.sticker"
+          label="Sticker/Nomer Register Implant"
+          placeholder="Masukkan sticker/nomor register implant"
+          :is-disabled="isReadonly"
+        />
+
+        <InputBase
+          field-name="implant.companionName"
+          label="Nama Pendamping Implant"
+          placeholder="Masukkan nama pendamping implant"
+          :is-disabled="isReadonly"
+        />
+        <SelectSpecimen
+          field-name="specimen.destination"
+          label="Specimen/Jaringan dikirim ke"
+          placeholder="Pilih"
+          :is-disabled="isReadonly"
+        />
+      </DE.Block>
+      <FillNotes
+        title="Keterangan Jaringan"
+        :limit="tissueNotesLimit"
+        :is-disabled="isReadonly"
+      />
+    </Fragment>
+    <div class="mt-4 flex justify-end">
+      <ActionForm @click="onFormActionClicked" />
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/action-report/fields/fill-notes.vue b/app/components/app/action-report/fields/fill-notes.vue
new file mode 100644
index 00000000..41c948c5
--- /dev/null
+++ b/app/components/app/action-report/fields/fill-notes.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+// components
+import { FieldArray } from 'vee-validate'
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+// form field components
+import { ButtonAction, InputBase } from '~/components/pub/my-ui/form'
+
+interface Props {
+  isDisabled: boolean
+  limit: number
+  title: string
+}
+
+const props = defineProps<Props>()
+
+const isReadonly = computed(() => props.isDisabled)
+</script>
+<template>
+  <FieldArray
+    v-slot="{ fields, push, remove }"
+    name="tissueNotes"
+  >
+    <template v-if="fields.length === 0">
+      {{ push({ note: '' }) }}
+    </template>
+    <div class="space-y-4">
+      <DE.Block
+        v-for="(field, idx) in fields"
+        :key="field.key"
+        :col-count="3"
+        :cell-flex="false"
+      >
+        <InputBase
+          :label="idx === 0 ? 'Keterangan Jaringan' : undefined"
+          :field-name="`tissueNotes[${idx}].note`"
+          placeholder="Masukkan catatan"
+          :is-disabled="isReadonly"
+        />
+        <DE.Cell class="flex items-start justify-start">
+          <DE.Field :class="idx === 0 ? 'mt-[30px]' : 'mt-0'">
+            <ButtonAction
+              v-if="idx !== 0"
+              :disabled="isReadonly"
+              preset="delete"
+              :title="`Hapus Kontak ${idx + 1}`"
+              icon-only
+              @click="remove(idx)"
+            />
+          </DE.Field>
+        </DE.Cell>
+      </DE.Block>
+    </div>
+
+    <ButtonAction
+      preset="add"
+      label="Tambah Catatan"
+      title="Tambah Catatan Keterangan Jaringan"
+      :disabled="fields.length >= limit || isReadonly"
+      :full-width-mobile="true"
+      class="mt-4"
+      @click="push({ name: '', dose: '', unit: '' })"
+    />
+  </FieldArray>
+</template>
diff --git a/app/components/app/action-report/fields/index.ts b/app/components/app/action-report/fields/index.ts
new file mode 100644
index 00000000..ea1a0e72
--- /dev/null
+++ b/app/components/app/action-report/fields/index.ts
@@ -0,0 +1,10 @@
+export { default as FillNotes } from './fill-notes.vue'
+export { default as RadioBloods } from './radio-bloods.vue'
+export { default as SelectBilling } from './select-billing.vue'
+export { default as SelectBirthPlace } from './select-birth-place.vue'
+export { default as SelectBirthType } from './select-birth-type.vue'
+export { default as SelectOperationSystem } from './select-operation-system.vue'
+export { default as SelectOperationType } from './select-operation-type.vue'
+export { default as SelectSpecimen } from './select-specimen.vue'
+export { default as SelectSurgeryCounter } from './select-surgery-counter.vue'
+export { default as SelectSurgeryType } from './select-surgery-type.vue'
diff --git a/app/components/app/action-report/fields/radio-bloods.vue b/app/components/app/action-report/fields/radio-bloods.vue
new file mode 100644
index 00000000..9bdaa187
--- /dev/null
+++ b/app/components/app/action-report/fields/radio-bloods.vue
@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { cn } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
+import { Label as RadioLabel } from '~/components/pub/ui/label'
+import { Input } from '~/components/pub/ui/input'
+
+const props = defineProps<{
+  fieldName: string
+  label: string
+  class?: string
+  radioGroupClass?: string
+  radioItemClass?: string
+  labelClass?: string
+  isDisabled?: boolean
+}>()
+
+const { class: containerClass, radioGroupClass, radioItemClass, labelClass } = props
+
+const opts = [
+  { label: 'PRC', value: 'prc' },
+  { label: 'WB', value: 'wb' },
+  { label: 'FFP', value: 'ffp' },
+  { label: 'TC', value: 'tc' },
+]
+</script>
+
+<template>
+  <DE.Cell
+    :class="cn('radio-group-field', containerClass)"
+    :col-span="2"
+  >
+    <DE.Label :label-for="fieldName">
+      {{ label }}
+    </DE.Label>
+    <DE.Field :id="fieldName">
+      <FormField
+        v-slot="{ componentField: radioField }"
+        :name="`${fieldName}.type`"
+      >
+        <FormItem>
+          <FormControl>
+            <RadioGroup
+              :model-value="radioField.modelValue"
+              @update:model-value="radioField.onChange"
+              :class="cn('grid grid-cols-1 items-start gap-4 sm:grid-cols-2 ', radioGroupClass)"
+            >
+              <div
+                v-for="(option, index) in opts"
+                :key="option.value"
+                :class="cn('grid grid-cols-1 items-start gap-3 sm:grid-cols-[auto,1fr]', radioItemClass)"
+              >
+                <div class="flex min-w-fit items-center gap-2">
+                  <RadioGroupItem
+                    :id="`type-${index}`"
+                    :value="option.value"
+                    :disabled="isDisabled"
+                  />
+                  <RadioLabel :for="`type-${index}`">
+                    {{ option.label }}
+                  </RadioLabel>
+                </div>
+
+                <FormField
+                  v-slot="{ componentField: amountField }"
+                  :name="`${fieldName}.amount.${option.value}`"
+                >
+                  <FormItem>
+                    <FormControl>
+                      <div class="relative w-[140px]">
+                        <Input
+                          v-bind="amountField"
+                          placeholder="00"
+                          class="pr-10"
+                          :disabled="radioField.modelValue !== option.value || isDisabled"
+                          @input="
+                            (e: InputEvent) => {
+                              const target = e.target as HTMLInputElement
+                              const v = target.value.replace(/\D/g, '')
+                              amountField.onChange(v)
+                            }
+                          "
+                        />
+                        <span
+                          class="absolute inset-y-0 end-0 flex items-center justify-center px-2 text-sm text-muted-foreground"
+                        >
+                          CC
+                        </span>
+                      </div>
+                    </FormControl>
+                  </FormItem>
+                </FormField>
+              </div>
+            </RadioGroup>
+          </FormControl>
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/action-report/fields/select-billing.vue b/app/components/app/action-report/fields/select-billing.vue
new file mode 100644
index 00000000..f8df074e
--- /dev/null
+++ b/app/components/app/action-report/fields/select-billing.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Select from '~/components/pub/my-ui/form/select.vue'
+import { cn } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName: string
+  label: string
+  isDisabled?: boolean
+  isRequired?: boolean
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+}>()
+
+const { errors, class: containerClass, selectClass, fieldGroupClass } = props
+
+const opts = [
+  { label: 'General', value: 'general' },
+  { label: 'Regional', value: 'regional' },
+  { label: 'Local', value: 'local' },
+]
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      label-for="fieldName"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Select
+              :id="fieldName"
+              :is-disabled="isDisabled"
+              v-bind="componentField"
+              :items="opts"
+              :placeholder="placeholder"
+              :preserve-order="false"
+              :class="
+                cn(
+                  'text-sm transition-all duration-200 focus:outline-none focus:ring-1 focus:ring-black focus:ring-offset-0',
+                  selectClass,
+                )
+              "
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/action-report/fields/select-birth-place.vue b/app/components/app/action-report/fields/select-birth-place.vue
new file mode 100644
index 00000000..b2314129
--- /dev/null
+++ b/app/components/app/action-report/fields/select-birth-place.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Select from '~/components/pub/my-ui/form/select.vue'
+import { cn } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName: string
+  label: string
+  isDisabled?: boolean
+  isRequired?: boolean
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+}>()
+
+const { errors, class: containerClass, selectClass, fieldGroupClass } = props
+
+const opts = [
+  { label: 'RSSA', value: 'rssa' },
+  { label: 'Bidan Luar', value: 'out1' },
+  { label: 'Dokter Luar', value: 'out2' },
+  { label: 'Dukun Bayi', value: 'out3' },
+  { label: 'Puskesmas', value: 'out4' },
+  { label: 'Paramedis Luar', value: 'out5' },
+]
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      label-for="fieldName"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Select
+              :id="fieldName"
+              :is-disabled="isDisabled"
+              v-bind="componentField"
+              :items="opts"
+              :placeholder="placeholder"
+              :preserve-order="false"
+              :class="
+                cn(
+                  'text-sm transition-all duration-200 focus:outline-none focus:ring-1 focus:ring-black focus:ring-offset-0',
+                  selectClass,
+                )
+              "
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/action-report/fields/select-birth-type.vue b/app/components/app/action-report/fields/select-birth-type.vue
new file mode 100644
index 00000000..537e8282
--- /dev/null
+++ b/app/components/app/action-report/fields/select-birth-type.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Select from '~/components/pub/my-ui/form/select.vue'
+import { cn } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName: string
+  label: string
+  isDisabled?: boolean
+  isRequired?: boolean
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+}>()
+
+const { errors, class: containerClass, selectClass, fieldGroupClass } = props
+
+const opts = [
+  { label: 'Lahir Hidup', value: 'lahir_hidup' },
+  { label: 'Lahir Mati', value: 'lahir_mati' },
+]
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      label-for="fieldName"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Select
+              :id="fieldName"
+              :is-disabled="isDisabled"
+              v-bind="componentField"
+              :items="opts"
+              :placeholder="placeholder"
+              :preserve-order="false"
+              :class="
+                cn(
+                  'text-sm transition-all duration-200 focus:outline-none focus:ring-1 focus:ring-black focus:ring-offset-0',
+                  selectClass,
+                )
+              "
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/action-report/fields/select-operation-system.vue b/app/components/app/action-report/fields/select-operation-system.vue
new file mode 100644
index 00000000..bae300b2
--- /dev/null
+++ b/app/components/app/action-report/fields/select-operation-system.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Select from '~/components/pub/my-ui/form/select.vue'
+import { cn } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName: string
+  label: string
+  isDisabled?: boolean
+  isRequired?: boolean
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+}>()
+
+const { errors, class: containerClass, selectClass, fieldGroupClass } = props
+
+const opts = [
+  { label: 'Cito', value: 'cito' },
+  { label: 'Urgent', value: 'urgent' },
+  { label: 'Efektif', value: 'efektif' },
+  { label: 'Khusus', value: 'khusus' },
+]
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      label-for="fieldName"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Select
+              :id="fieldName"
+              :is-disabled="isDisabled"
+              v-bind="componentField"
+              :items="opts"
+              :placeholder="placeholder"
+              :preserve-order="false"
+              :class="
+                cn(
+                  'text-sm transition-all duration-200 focus:outline-none focus:ring-1 focus:ring-black focus:ring-offset-0',
+                  selectClass,
+                )
+              "
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/action-report/fields/select-operation-type.vue b/app/components/app/action-report/fields/select-operation-type.vue
new file mode 100644
index 00000000..e05a4196
--- /dev/null
+++ b/app/components/app/action-report/fields/select-operation-type.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Select from '~/components/pub/my-ui/form/select.vue'
+import { cn } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName: string
+  label: string
+  isDisabled?: boolean
+  isRequired?: boolean
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+}>()
+
+const { errors, class: containerClass, selectClass, fieldGroupClass } = props
+
+const opts = [
+  { label: 'Bersih', value: 'bersih' },
+  { label: 'Bersih Terkontaminasi', value: 'bersih_terkontaminasi' },
+  { label: 'Terkontaminasi Kotor', value: 'terkontaminasi' },
+  { label: 'Kotor', value: 'kotor' },
+]
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      label-for="fieldName"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Select
+              :id="fieldName"
+              :is-disabled="isDisabled"
+              v-bind="componentField"
+              :items="opts"
+              :placeholder="placeholder"
+              :preserve-order="false"
+              :class="
+                cn(
+                  'text-sm transition-all duration-200 focus:outline-none focus:ring-1 focus:ring-black focus:ring-offset-0',
+                  selectClass,
+                )
+              "
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/action-report/fields/select-specimen.vue b/app/components/app/action-report/fields/select-specimen.vue
new file mode 100644
index 00000000..9be2bb93
--- /dev/null
+++ b/app/components/app/action-report/fields/select-specimen.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Select from '~/components/pub/my-ui/form/select.vue'
+import { cn } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName: string
+  label: string
+  isDisabled?: boolean
+  isRequired?: boolean
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+}>()
+
+const { errors, class: containerClass, selectClass, fieldGroupClass } = props
+
+const opts = [
+  { label: 'PA', value: 'pa' },
+  { label: 'Mikrobiologi', value: 'microbiology' },
+  { label: 'Laborat', value: 'laboratory' },
+  { label: 'Tidak Perlu', value: 'none' },
+]
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      label-for="fieldName"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Select
+              :id="fieldName"
+              :is-disabled="isDisabled"
+              v-bind="componentField"
+              :items="opts"
+              :placeholder="placeholder"
+              :preserve-order="false"
+              :class="
+                cn(
+                  'text-sm transition-all duration-200 focus:outline-none focus:ring-1 focus:ring-black focus:ring-offset-0',
+                  selectClass,
+                )
+              "
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/action-report/fields/select-surgery-counter.vue b/app/components/app/action-report/fields/select-surgery-counter.vue
new file mode 100644
index 00000000..2c682529
--- /dev/null
+++ b/app/components/app/action-report/fields/select-surgery-counter.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Select from '~/components/pub/my-ui/form/select.vue'
+import { cn } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName: string
+  label: string
+  isDisabled?: boolean
+  isRequired?: boolean
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+}>()
+
+const { errors, class: containerClass, selectClass, fieldGroupClass } = props
+
+const opts = [
+  { label: '1 (Satu)', value: 'first' },
+  { label: 'Ulangan', value: 'retry' },
+]
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      label-for="fieldName"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Select
+              :id="fieldName"
+              :is-disabled="isDisabled"
+              v-bind="componentField"
+              :items="opts"
+              :placeholder="placeholder"
+              :preserve-order="false"
+              :class="
+                cn(
+                  'text-sm transition-all duration-200 focus:outline-none focus:ring-1 focus:ring-black focus:ring-offset-0',
+                  selectClass,
+                )
+              "
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/action-report/fields/select-surgery-type.vue b/app/components/app/action-report/fields/select-surgery-type.vue
new file mode 100644
index 00000000..2c59438a
--- /dev/null
+++ b/app/components/app/action-report/fields/select-surgery-type.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Select from '~/components/pub/my-ui/form/select.vue'
+import { cn } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName: string
+  label: string
+  isDisabled?: boolean
+  isRequired?: boolean
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+}>()
+
+const { errors, class: containerClass, selectClass, fieldGroupClass } = props
+
+const opts = [
+  { label: 'Kecil', value: 'kecil' },
+  { label: 'Sedang', value: 'sedang' },
+  { label: 'Besar', value: 'besar' },
+  { label: 'Khusus', value: 'khusus' },
+]
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      label-for="fieldName"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Select
+              :id="fieldName"
+              :is-disabled="isDisabled"
+              v-bind="componentField"
+              :items="opts"
+              :placeholder="placeholder"
+              :preserve-order="false"
+              :class="
+                cn(
+                  'text-sm transition-all duration-200 focus:outline-none focus:ring-1 focus:ring-black focus:ring-offset-0',
+                  selectClass,
+                )
+              "
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/action-report/list-history.cfg.ts b/app/components/app/action-report/list-history.cfg.ts
new file mode 100644
index 00000000..d943bc7d
--- /dev/null
+++ b/app/components/app/action-report/list-history.cfg.ts
@@ -0,0 +1,88 @@
+import { defineAsyncComponent } from 'vue'
+
+import { format } from 'date-fns'
+import { id } from 'date-fns/locale'
+
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import type { ActionReportData } from '~/components/app/action-report/sample'
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-d.vue'))
+
+export const config: Config = {
+  cols: [
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 50 },
+  ],
+
+  headers: [
+    [
+      { label: 'TANGGAL LAPORAN' },
+      { label: 'DPJP' },
+      { label: 'OPERATOR' },
+      { label: 'TANGGAL PEMBEDAHAN' },
+      { label: 'JENIS OPERASI' },
+      { label: 'KODE BILLING' },
+      { label: 'SISTEM OPERASI' },
+      { label: 'AKSI' },
+    ],
+  ],
+
+  keys: ['reportAt', 'dpjp', 'operator', 'operationAt', 'operationType', 'billing', 'system', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    reportAt: (rec: unknown): unknown => {
+      const attr = (rec as ActionReportData).reportAt
+      const result = format(new Date(attr), 'd MMMM yyyy, HH:mm', { locale: id })
+
+      return result
+    },
+    operationAt: (rec: unknown): unknown => {
+      const attr = (rec as ActionReportData).operationAt
+      const result = format(new Date(attr), 'd MMMM yyyy', { locale: id })
+
+      return result
+    },
+    system: (rec: unknown): unknown => {
+      return 'Cito'
+    },
+    operator: (rec: unknown): unknown => {
+      return 'dr. Dewi Arum Sawitri, Sp.An'
+    },
+    billing: (rec: unknown): unknown => {
+      return 'General'
+    },
+    operationType: (rec: unknown): unknown => {
+      return 'Besar'
+    },
+    dpjp: (rec: unknown): unknown => {
+      return 'dr. Irwansyah Kurniawan Sp.Bo'
+    },
+    parent: (rec: unknown): unknown => {
+      const recX = rec as any
+      return recX.parent?.name || '-'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}
diff --git a/app/components/app/action-report/list-history.vue b/app/components/app/action-report/list-history.vue
new file mode 100644
index 00000000..6ad7dd81
--- /dev/null
+++ b/app/components/app/action-report/list-history.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list.cfg'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+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"
+    />
+    <PaginationView
+      :pagination-meta="paginationMeta"
+      @page-change="handlePageChange"
+    />
+  </div>
+</template>
diff --git a/app/components/app/action-report/list.cfg.ts b/app/components/app/action-report/list.cfg.ts
new file mode 100644
index 00000000..13a78728
--- /dev/null
+++ b/app/components/app/action-report/list.cfg.ts
@@ -0,0 +1,89 @@
+import { defineAsyncComponent } from 'vue'
+
+import { format } from 'date-fns'
+import { id } from 'date-fns/locale'
+
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import type { ActionReportData } from '~/components/app/action-report/sample'
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 50 },
+  ],
+
+  headers: [
+    [
+      { label: 'TANGGAL LAPORAN' },
+      { label: 'DPJP' },
+      { label: 'OPERATOR' },
+      { label: 'TANGGAL PEMBEDAHAN' },
+      { label: 'JENIS OPERASI' },
+      { label: 'KODE BILLING' },
+      { label: 'SISTEM OPERASI' },
+      { label: 'AKSI' },
+    ],
+  ],
+
+  keys: ['reportAt', 'dpjp', 'operator', 'operationAt', 'operationType', 'billing', 'system', 'action'],
+
+  delKeyNames: [
+    { key: 'id', label: 'ID' },
+    { key: 'dokter', label: 'Dokter' },
+    { key: 'reportAt', label: 'Tanggal Laporan' },
+  ],
+
+  parses: {
+    reportAt: (rec: unknown): unknown => {
+      const attr = (rec as ActionReportData).reportAt
+      const result = format(new Date(attr), 'd MMMM yyyy, HH:mm', { locale: id })
+
+      return result
+    },
+    operationAt: (rec: unknown): unknown => {
+      const attr = (rec as ActionReportData).operationAt
+      const result = format(new Date(attr), 'd MMMM yyyy', { locale: id })
+
+      return result
+    },
+    system: (rec: unknown): unknown => {
+      return 'Cito'
+    },
+    operator: (rec: unknown): unknown => {
+      return 'dr. Dewi Arum Sawitri, Sp.An'
+    },
+    billing: (rec: unknown): unknown => {
+      return 'General'
+    },
+    operationType: (rec: unknown): unknown => {
+      return 'Besar'
+    },
+    dpjp: (rec: unknown): unknown => {
+      return 'dr. Irwansyah Kurniawan Sp.Bo'
+    },
+    parent: (rec: unknown): unknown => {
+      const recX = rec as any
+      return recX.parent?.name || '-'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}
diff --git a/app/components/app/action-report/list.vue b/app/components/app/action-report/list.vue
new file mode 100644
index 00000000..6ad7dd81
--- /dev/null
+++ b/app/components/app/action-report/list.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list.cfg'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+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"
+    />
+    <PaginationView
+      :pagination-meta="paginationMeta"
+      @page-change="handlePageChange"
+    />
+  </div>
+</template>
diff --git a/app/components/app/action-report/preview.vue b/app/components/app/action-report/preview.vue
new file mode 100644
index 00000000..fa113333
--- /dev/null
+++ b/app/components/app/action-report/preview.vue
@@ -0,0 +1,166 @@
+<script setup lang="ts">
+import { format } from 'date-fns'
+import { id } from 'date-fns/locale'
+
+// type
+import { type ProcedureSrc } from '~/models/procedure-src'
+import { type ActionReportFormData } from '~/schemas/action-report.schema'
+
+// componenets
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '~/components/pub/ui/accordion'
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import DetailRow from '~/components/pub/my-ui/form/view/detail-row.vue'
+import ArrangementProcedurePicker from '~/components/app/therapy-protocol/picker-dialog/arrangement-procedure/procedure-picker.vue'
+
+// #region Props & Emits
+const props = defineProps<{
+  data: ActionReportFormData
+}>()
+
+const emit = defineEmits<{
+  (e: 'back'): void
+  (e: 'edit'): void
+}>()
+
+// #endregion
+
+// #region State & Computed
+const { operatorTeam, procedures, operationExecution, bloodInput, implant, specimen, tissueNotes = [] } = props.data
+
+const procedureSampleData = procedures as unknown as ProcedureSrc[]
+// #region Lifecycle Hooks
+// #endregion
+
+// #region Functions
+
+// #endregion region
+// #region Utilities & event handlers
+function onNavigate(type: string) {
+  if (type == 'back') emit('back')
+  if (type == 'edit') emit('edit')
+}
+// #endregion
+
+// #region Watchers
+// #endregion
+</script>
+
+<template>
+  <DetailRow label="Tanggal Laporan">
+    {{ format(new Date(), 'd MMMM yyyy, HH:mm', { locale: id }) }}
+  </DetailRow>
+
+  <Accordion
+    type="multiple"
+    class="w-full"
+    collapsible
+    :default-value="['section-1', 'section-2', 'section-3']"
+  >
+    <AccordionItem value="section-1">
+      <AccordionTrigger>Tim Pelaksanaan Tindakan</AccordionTrigger>
+      <AccordionContent>
+        <DE.Block
+          :cell-flex="false"
+          :col-count="2"
+        >
+          <DE.Cell>
+            <DetailRow label="DPJP">dr. Marcell Galliard Sp.Gr</DetailRow>
+            <DetailRow label="Operator">Sumitro</DetailRow>
+            <DetailRow label="Asisten Operator">Alexis Lewis Carol</DetailRow>
+            <DetailRow label="Instrumentir">Mikel Arteta</DetailRow>
+            <DetailRow label="Tanggal Pembedahan">
+              {{ format(new Date(), 'd MMMM yyyy', { locale: id }) }}
+            </DetailRow>
+            <DetailRow label="Diagnosa Tindakan">{{ operatorTeam?.actionDiagnosis || '-' }}</DetailRow>
+            <DetailRow label="Perawat Pasca Bedah">Cak Armuji</DetailRow>
+          </DE.Cell>
+        </DE.Block>
+      </AccordionContent>
+    </AccordionItem>
+
+    <AccordionItem value="section-2">
+      <AccordionTrigger>Tindakan Operatif / Non Operatif Lain</AccordionTrigger>
+      <AccordionContent>
+        <DE.Block
+          :cell-flex="false"
+          :col-count="2"
+        >
+          <DE.Cell>
+            <ArrangementProcedurePicker
+              field-name="procedures"
+              title="List Prosedur"
+              sub-title="Pilih Prosedur"
+              :mode="'preview'"
+              :sample-items="procedureSampleData"
+            />
+          </DE.Cell>
+        </DE.Block>
+      </AccordionContent>
+    </AccordionItem>
+
+    <AccordionItem value="section-3">
+      <AccordionTrigger>Data Pelaksanaan Tindakan</AccordionTrigger>
+      <AccordionContent>
+        <DE.Block
+          :cell-flex="false"
+          :col-count="2"
+        >
+          <DE.Cell>
+            <DetailRow label="Jenis Operasi">dr. Marcell Galliard Sp.Gr</DetailRow>
+            <DetailRow label="Kode Billing">GCASH1128190</DetailRow>
+            <DetailRow label="Sistem Operasi">Alexis Lewis Carol</DetailRow>
+            <DetailRow label="Operasi Mulai">
+              {{ format(new Date(), 'd MMMM yyyy, HH:mm', { locale: id }) }}
+            </DetailRow>
+            <DetailRow label="Operasi Selesai">
+              {{ format(new Date(), 'd MMMM yyyy, HH:mm', { locale: id }) }}
+            </DetailRow>
+            <DetailRow label="Lama Operasi">5 menit</DetailRow>
+            <DetailRow label="Pembiusan Mulai">
+              {{ format(new Date(), 'd MMMM yyyy, HH:mm', { locale: id }) }}
+            </DetailRow>
+            <DetailRow label="Pembiusan Selesai">
+              {{ format(new Date(), 'd MMMM yyyy, HH:mm', { locale: id }) }}
+            </DetailRow>
+            <DetailRow label="Lama Pembiusan">5 menit</DetailRow>
+
+            <DetailRow label="PRC">300 CC</DetailRow>
+            <DetailRow label="FPP">-</DetailRow>
+            <DetailRow label="WB">-</DetailRow>
+            <DetailRow label="TC">-</DetailRow>
+            <DetailRow label="Merk">-</DetailRow>
+            <DetailRow label="Nama Implant">-</DetailRow>
+            <DetailRow label="Sticker / Nomor Register Implant">-</DetailRow>
+            <DetailRow label="Nama Pendamping Implant">-</DetailRow>
+          </DE.Cell>
+          <DE.Cell>
+            <DetailRow label="Jenis Pembedahan">Bersih</DetailRow>
+            <DetailRow label="Operasi ke">1 (Satu)</DetailRow>
+            <DetailRow label="Keterangan Lahir">Lahir Hidup</DetailRow>
+            <DetailRow label="Ket. Tempat Lahir">RSSA</DetailRow>
+            <DetailRow label="Berat Badan">18 gram</DetailRow>
+            <DetailRow label="Ket. Saat Lahir">Normal dan sehat</DetailRow>
+            <DetailRow label="Uraian Operasi">-</DetailRow>
+            <DetailRow label="Jumlah Pendarahan">300 CC</DetailRow>
+            <DetailRow label="Specimen / Jaringan dikirim ke">PA</DetailRow>
+            <DetailRow label="Keterangan Jaringan">
+              <ul
+                class="list-disc space-y-1 pl-5 text-sm"
+                v-if="tissueNotes.length > 0"
+                v-for="item in tissueNotes"
+              >
+                <li>{{ item.note }}</li>
+              </ul>
+              <span v-else>-</span>
+            </DetailRow>
+          </DE.Cell>
+        </DE.Block>
+      </AccordionContent>
+    </AccordionItem>
+  </Accordion>
+  <div class="my-2 flex justify-end py-2">
+    <PubMyUiNavFooterBaEd @click="onNavigate" />
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/app/components/app/action-report/sample.ts b/app/components/app/action-report/sample.ts
new file mode 100644
index 00000000..b067e859
--- /dev/null
+++ b/app/components/app/action-report/sample.ts
@@ -0,0 +1,54 @@
+import { addWeeks, formatISO } from 'date-fns'
+
+export type ActionReportData = {
+  id: number
+  reportAt: string
+  operationAt: string
+  noRm: string
+  noBill: string
+  nama: string
+  jk: string
+  alamat: string
+  klinik: string
+  dokter: string
+  caraBayar: string
+  rujukan: string
+  ketRujukan: string
+  asal: string
+}
+
+export const sampleRows: ActionReportData[] = [
+  {
+    id: 1,
+    reportAt: formatISO(addWeeks(new Date(), -1)),
+    operationAt: formatISO(addWeeks(new Date(), 1)),
+    noRm: 'RM23311224',
+    noBill: '-',
+    nama: 'Ahmad Baidowi',
+    jk: 'L',
+    alamat: 'Jl Jaksa Agung S. No. 9',
+    klinik: 'Penyakit dalam',
+    dokter: 'Dr. Andreas Sutaji',
+    caraBayar: 'JKN',
+    rujukan: 'Faskes BPJS',
+    ketRujukan: 'RUMAH SAKIT - RS Lawang Medika - Malang',
+    asal: 'Rawat Jalan Reguler',
+  },
+  {
+    id: 2,
+    reportAt: new Date().toISOString(),
+    operationAt: formatISO(addWeeks(new Date(), 2)),
+    noRm: 'RM23455667',
+    noBill: '-',
+    nama: 'Abraham Sulaiman',
+    jk: 'L',
+    alamat: 'Purwantoro, Blimbing',
+    klinik: 'Penyakit dalam',
+    dokter: 'Dr. Andreas Sutaji',
+    caraBayar: 'JKN',
+    rujukan: 'Faskes BPJS',
+    ketRujukan: 'RUMAH SAKIT - RS Lawang Medika - Malang',
+    asal: 'Rawat Jalan Reguler',
+  },
+  // tambahkan lebih banyak baris contoh jika perlu
+]
diff --git a/app/components/app/ap-lab-order/list.cfg.ts b/app/components/app/ap-lab-order/list.cfg.ts
new file mode 100644
index 00000000..186e9f26
--- /dev/null
+++ b/app/components/app/ap-lab-order/list.cfg.ts
@@ -0,0 +1,58 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, { width: 50 }],
+
+  headers: [[
+    { label: 'Tgl. Order' },
+    { label: 'No. Order' },
+    { label: 'Jadwal Pemeriksaan' },
+    { label: 'Lokalisasi' },
+    { label: 'Stadium' },
+    { label: 'Status' },
+    { label: 'Resume' },
+    { label: '' }]],
+
+  keys: [
+    'date',
+    'number',
+    'examinationDate',
+    'localization',
+    'stadium',
+    'resume',
+    '',
+  ],
+
+  delKeyNames: [
+    { key: 'date', label: 'Tanggal' },
+    { key: 'number', label: 'Nomor' },
+  ],
+
+  parses: {
+    parent: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.parent?.name || '-'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+        props: {
+          size: 'sm',
+        },
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}
diff --git a/app/components/app/ap-lab-order/list.vue b/app/components/app/ap-lab-order/list.vue
new file mode 100644
index 00000000..5d4820cc
--- /dev/null
+++ b/app/components/app/ap-lab-order/list.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+// Components
+import DataTable from '~/components/pub/my-ui/data-table/data-table.vue'
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list.cfg'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <DataTable
+      v-bind="config"
+      :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>
diff --git a/app/components/app/assessment-education/entry.vue b/app/components/app/assessment-education/entry.vue
new file mode 100644
index 00000000..33cfa826
--- /dev/null
+++ b/app/components/app/assessment-education/entry.vue
@@ -0,0 +1,215 @@
+<script setup lang="ts">
+import { z } from 'zod'
+import { FieldArray, useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+
+// types
+// import { type AssessmentEducationFormData, AssessmentEducationSchema, encode } from '~/schemas/assessment-education'
+
+// componenets
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import Separator from '~/components/pub/ui/separator/Separator.vue'
+import { BaseSelect, CheckboxGeneral, CheckboxSpecial } from './fields'
+import { ButtonAction, TextAreaInput } from '~/components/pub/my-ui/form'
+import ActionForm from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
+
+// constant
+import {
+  abilityCode,
+  willCode,
+  medObstacleCode,
+  learnMethodCode,
+  langClassCode,
+  translatorSrcCode,
+} from '~/lib/clinical.constants'
+
+interface FormData {}
+interface Props {
+  noteLimit?: number
+  isLoading?: boolean
+  isReadonly?: boolean
+  mode: 'add' | 'edit' | 'view'
+  initialValues?: Partial<FormData>
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isLoading: false,
+  isReadonly: false,
+  noteLimit: 10,
+})
+const isDisabled = computed(() => props.isLoading || props.isReadonly)
+// const formSchema = toTypedSchema(AssessmentEducationSchema)
+const formSchema = toTypedSchema(z.object({}))
+const { errors, handleSubmit, values, meta, resetForm, setFieldValue, setValues, validate } = useForm<FormData>({
+  name: 'assessmentEducationForm',
+  validationSchema: formSchema,
+  initialValues: props.initialValues
+    ? props.initialValues
+    : {
+        plans: [
+          {
+            id: 1,
+            value: '',
+          },
+        ],
+      },
+  validateOnMount: false,
+})
+
+defineExpose({
+  validate,
+  resetForm,
+  setValues,
+  values,
+})
+</script>
+
+<template>
+  <form @submit.prevent="">
+    <p class="mb-2 text-sm font-semibold 2xl:mb-3 2xl:text-base">Kebutuhan Edukasi</p>
+    <DE.Block
+      :col-count="4"
+      :cell-flex="false"
+    >
+      <CheckboxGeneral
+        field-name="generalEducationNeeds"
+        label="Informasi Umum"
+        :col-span="2"
+        :is-disabled="isDisabled"
+      />
+      <CheckboxSpecial
+        field-name="specificEducationNeeds"
+        label="Edukasi Khusus"
+        :col-span="2"
+        :is-disabled="isDisabled"
+      />
+    </DE.Block>
+
+    <div class="h-6">
+      <Separator />
+    </div>
+
+    <p class="mb-2 text-sm font-semibold 2xl:mb-3 2xl:text-base">Asesmen Kemampuan dan Kemauan Belajar</p>
+    <DE.Block
+      :col-count="3"
+      :cell-flex="false"
+    >
+      <BaseSelect
+        field-name="learningAbility"
+        label="Kemampuan Belajar"
+        :items="abilityCode"
+        :is-disabled="isDisabled"
+      />
+
+      <BaseSelect
+        field-name="learningWillingness"
+        label="Kemauan Belajar"
+        :items="willCode"
+        :is-disabled="isDisabled"
+      />
+
+      <BaseSelect
+        field-name="barrier"
+        label="Hambatan"
+        :items="medObstacleCode"
+        :is-disabled="isDisabled"
+      />
+
+      <BaseSelect
+        field-name="learningMethod"
+        label="Metode Pembelajaran"
+        :items="learnMethodCode"
+        :is-disabled="isDisabled"
+      />
+
+      <BaseSelect
+        field-name="language"
+        label="Bahasa"
+        :items="langClassCode"
+        :is-disabled="isDisabled"
+      />
+
+      <BaseSelect
+        field-name="languageBarrier"
+        label="Hambatan Bahasa"
+        :items="translatorSrcCode"
+        :is-disabled="isDisabled"
+      />
+
+      <BaseSelect
+        field-name="beliefValue"
+        label="Keyakinan pada Nilai-Nilai yang Dianut"
+        :items="{
+          ya: 'IYA',
+          tidak: 'TIDAK',
+        }"
+        :is-disabled="isDisabled"
+      />
+    </DE.Block>
+    <div class="h-6">
+      <Separator />
+    </div>
+
+    <p class="mb-2 text-sm font-semibold 2xl:mb-3 2xl:text-base">Rencana Edukasi</p>
+    <DE.Block
+      :col-count="1"
+      :cell-flex="false"
+    >
+      <FieldArray
+        v-slot="{ fields, push, remove }"
+        name="tissueNotes"
+      >
+        <template v-if="fields.length === 0">
+          {{ push({ note: '' }) }}
+        </template>
+        <div class="space-y-4">
+          <DE.Block
+            v-for="(field, idx) in fields"
+            :key="field.key"
+            :col-count="6"
+            :cell-flex="false"
+          >
+            <DE.Cell :col-span="5">
+              <TextAreaInput
+                :field-name="`plans[${idx}].value`"
+                :label="'Rencana ' + Number(idx + 1)"
+                placeholder="Masukkan rencana catatan"
+                :col-span="2"
+                :rows="5"
+                :is-disabled="isReadonly"
+              />
+            </DE.Cell>
+            <DE.Cell class="flex items-start justify-start">
+              <DE.Field :class="idx === 0 ? 'mt-[30px]' : 'mt-0'">
+                <ButtonAction
+                  v-if="idx !== 0"
+                  :disabled="isReadonly"
+                  preset="delete"
+                  :title="`Hapus Rencana ${idx + 1}`"
+                  icon-only
+                  @click="remove(idx)"
+                />
+              </DE.Field>
+            </DE.Cell>
+          </DE.Block>
+        </div>
+
+        <div class="self-center pt-3">
+          <ButtonAction
+            preset="add"
+            label="Tambah Rencana"
+            title="Tambah Rencana Edukasi"
+            :disabled="fields.length >= noteLimit || isReadonly"
+            :full-width-mobile="true"
+            class="mt-4"
+            @click="push({ id: fields.length + 1, value: '' })"
+          />
+        </div>
+      </FieldArray>
+    </DE.Block>
+    <!-- todo -->
+    <div class="mt-4 flex justify-end">
+      <ActionForm @click="() => {}" />
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/assessment-education/fields/base-checkbox.vue b/app/components/app/assessment-education/fields/base-checkbox.vue
new file mode 100644
index 00000000..a002feb4
--- /dev/null
+++ b/app/components/app/assessment-education/fields/base-checkbox.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import { Checkbox } from '~/components/pub/ui/checkbox'
+
+import type { CheckItem } from '~/lib/utils'
+
+const props = defineProps<{
+  label: string
+  fieldName: string
+  items: CheckItem[]
+  isDisabled?: boolean
+  colSpan?: number
+}>()
+
+const { label, fieldName, items } = props
+</script>
+
+<template>
+  <DE.Cell :col-span="colSpan || 1">
+    <DE.Label :label-for="fieldName">
+      {{ label }}
+    </DE.Label>
+
+    <DE.Field :id="fieldName">
+      <FormField
+        :name="fieldName"
+        v-slot="{ value, handleChange }"
+      >
+        <FormItem>
+          <div
+            v-for="item in items"
+            :key="item.id"
+            class="ml-1 flex flex-row items-start space-x-3 space-y-0"
+          >
+            <FormControl>
+              <Checkbox
+                :disabled="isDisabled"
+                :id="`cb-${fieldName}-${item.id}`"
+                :checked="value?.includes(item.id)"
+                @update:checked="
+                  (checked) => {
+                    const newValue = [...(value || [])]
+                    if (checked) {
+                      if (!newValue.includes(item.id)) newValue.push(item.id)
+                    } else {
+                      const idx = newValue.indexOf(item.id)
+                      if (idx > -1) newValue.splice(idx, 1)
+                    }
+                    handleChange(newValue)
+                  }
+                "
+              />
+            </FormControl>
+            <FormLabel
+              :for="`cb-${fieldName}-${item.id}`"
+              class="font-normal leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 md:!text-xs 2xl:text-sm"
+            >
+              {{ item.label }}
+            </FormLabel>
+          </div>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/assessment-education/fields/base-select.vue b/app/components/app/assessment-education/fields/base-select.vue
new file mode 100644
index 00000000..965f0c08
--- /dev/null
+++ b/app/components/app/assessment-education/fields/base-select.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import Select from '~/components/pub/my-ui/form/select.vue'
+import { cn, mapToComboboxOptList } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName: string
+  label: string
+  items: Record<string, string>
+  placeholder?: string
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  isRequired?: boolean
+}>()
+
+const { placeholder = 'Pilih', class: containerClass, selectClass, fieldGroupClass, labelClass } = props
+
+const opts = computed(() => {
+  const data = mapToComboboxOptList(props.items)
+  // hide code on select options
+  const filtered = data
+    .filter((item) => item.code)
+    .reduce(
+      (acc, item) => {
+        acc.push({
+          label: item.label as string,
+          value: item.value as string,
+        })
+        return acc
+      },
+      [] as Array<{ label: string; value: string }>,
+    )
+
+  return filtered
+})
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      :label-for="fieldName"
+      :class="cn('select-field-label', labelClass)"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Select
+              :id="fieldName"
+              v-bind="componentField"
+              :items="opts"
+              :placeholder="placeholder"
+              :preserve-order="false"
+              :class="
+                cn(
+                  'text-sm transition-all duration-200 focus:outline-none focus:ring-1 focus:ring-black focus:ring-offset-0',
+                  selectClass,
+                )
+              "
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/assessment-education/fields/checkbox-general.vue b/app/components/app/assessment-education/fields/checkbox-general.vue
new file mode 100644
index 00000000..80ca534e
--- /dev/null
+++ b/app/components/app/assessment-education/fields/checkbox-general.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import BaseCheckbox from './base-checkbox.vue'
+import { generalEduCode } from '~/lib/clinical.constants'
+import { mapToCheckItems } from '~/lib/utils'
+
+interface Props {
+  label: string
+  fieldName: string
+  isDisabled?: boolean
+  colSpan?: number
+}
+defineProps<Props>()
+
+const generalItems = mapToCheckItems(generalEduCode)
+</script>
+
+<template>
+  <BaseCheckbox
+    :field-name="fieldName"
+    :label="label"
+    :is-disabled="isDisabled"
+    :col-span="colSpan"
+    :items="generalItems"
+  />
+</template>
diff --git a/app/components/app/assessment-education/fields/checkbox-special.vue b/app/components/app/assessment-education/fields/checkbox-special.vue
new file mode 100644
index 00000000..0754726c
--- /dev/null
+++ b/app/components/app/assessment-education/fields/checkbox-special.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import BaseCheckbox from './base-checkbox.vue'
+import { specialEduCode } from '~/lib/clinical.constants'
+import { mapToCheckItems } from '~/lib/utils'
+interface Props {
+  label: string
+  fieldName: string
+  colSpan?: number
+}
+defineProps<Props>()
+
+const specialItems = mapToCheckItems(specialEduCode)
+</script>
+
+<template>
+  <BaseCheckbox
+    :field-name="fieldName"
+    :label="label"
+    :col-span="colSpan"
+    :items="specialItems"
+  />
+</template>
diff --git a/app/components/app/assessment-education/fields/index.ts b/app/components/app/assessment-education/fields/index.ts
new file mode 100644
index 00000000..f813c494
--- /dev/null
+++ b/app/components/app/assessment-education/fields/index.ts
@@ -0,0 +1,4 @@
+export { default as BaseSelect } from './base-select.vue'
+export { default as CheckboxGeneral } from './checkbox-general.vue'
+export { default as CheckboxSpecial } from './checkbox-special.vue'
+export { default as SelectAssessmentCode } from './select-assessment-code.vue'
diff --git a/app/components/app/assessment-education/fields/select-assessment-code.vue b/app/components/app/assessment-education/fields/select-assessment-code.vue
new file mode 100644
index 00000000..9d006152
--- /dev/null
+++ b/app/components/app/assessment-education/fields/select-assessment-code.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  label: string
+  fieldName: string
+  placeholder?: string
+  colSpan?: number
+}>()
+
+const { label, fieldName, placeholder = 'Masukkan catatan' } = props
+</script>
+
+<template>
+  <DE.Cell :col-span="colSpan || 1">
+    <DE.Label :label-for="fieldName">
+      {{ label }}
+    </DE.Label>
+    <DE.Field :id="fieldName">
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Textarea
+              v-bind="componentField"
+              :placeholder="placeholder"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/assessment-education/list-history.cfg.ts b/app/components/app/assessment-education/list-history.cfg.ts
new file mode 100644
index 00000000..c02b3a52
--- /dev/null
+++ b/app/components/app/assessment-education/list-history.cfg.ts
@@ -0,0 +1,75 @@
+import { defineAsyncComponent } from 'vue'
+
+import { format } from 'date-fns'
+import { id } from 'date-fns/locale'
+
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import type { ActionReportData } from '~/components/app/action-report/sample'
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [{ width: 120 }, { width: 120 }, { width: 120 }, { width: 120 }, { width: 120 }, { width: 50 }],
+
+  headers: [
+    [
+      { label: 'TANGGAL' },
+      { label: 'INFORMASI UMUM' },
+      { label: 'EDUKASI KHUSUS' },
+      { label: 'RENCANA EDUKASI' },
+      { label: 'PELAKSANAAN' },
+      { label: 'AKSI' },
+    ],
+  ],
+
+  keys: ['reportAt', 'dpjp', 'operator', 'operationAt', 'operationType', 'action'],
+
+  delKeyNames: [
+    { key: 'id', label: 'ID' },
+    { key: 'dokter', label: 'Dokter' },
+    { key: 'reportAt', label: 'Tanggal Laporan' },
+  ],
+
+  parses: {
+    reportAt: (rec: unknown): unknown => {
+      const attr = (rec as ActionReportData).reportAt
+      const result = format(new Date(attr), 'd MMMM yyyy, HH:mm', { locale: id })
+
+      return result
+    },
+    operationAt: (rec: unknown): unknown => {
+      return '1 Rencana Edukasi'
+    },
+    system: (rec: unknown): unknown => {
+      return 'Cito'
+    },
+    operator: (rec: unknown): unknown => {
+      return '2 Edukasi dipilih'
+    },
+    billing: (rec: unknown): unknown => {
+      return 'General'
+    },
+    operationType: (rec: unknown): unknown => {
+      return '-'
+    },
+    dpjp: (rec: unknown): unknown => {
+      return '3 Informasi Dipilih'
+    },
+    parent: (rec: unknown): unknown => {
+      const recX = rec as any
+      return recX.parent?.name || '-'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}
diff --git a/app/components/app/assessment-education/list-history.vue b/app/components/app/assessment-education/list-history.vue
new file mode 100644
index 00000000..6ad7dd81
--- /dev/null
+++ b/app/components/app/assessment-education/list-history.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list.cfg'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+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"
+    />
+    <PaginationView
+      :pagination-meta="paginationMeta"
+      @page-change="handlePageChange"
+    />
+  </div>
+</template>
diff --git a/app/components/app/assessment-education/list.cfg.ts b/app/components/app/assessment-education/list.cfg.ts
new file mode 100644
index 00000000..c02b3a52
--- /dev/null
+++ b/app/components/app/assessment-education/list.cfg.ts
@@ -0,0 +1,75 @@
+import { defineAsyncComponent } from 'vue'
+
+import { format } from 'date-fns'
+import { id } from 'date-fns/locale'
+
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import type { ActionReportData } from '~/components/app/action-report/sample'
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [{ width: 120 }, { width: 120 }, { width: 120 }, { width: 120 }, { width: 120 }, { width: 50 }],
+
+  headers: [
+    [
+      { label: 'TANGGAL' },
+      { label: 'INFORMASI UMUM' },
+      { label: 'EDUKASI KHUSUS' },
+      { label: 'RENCANA EDUKASI' },
+      { label: 'PELAKSANAAN' },
+      { label: 'AKSI' },
+    ],
+  ],
+
+  keys: ['reportAt', 'dpjp', 'operator', 'operationAt', 'operationType', 'action'],
+
+  delKeyNames: [
+    { key: 'id', label: 'ID' },
+    { key: 'dokter', label: 'Dokter' },
+    { key: 'reportAt', label: 'Tanggal Laporan' },
+  ],
+
+  parses: {
+    reportAt: (rec: unknown): unknown => {
+      const attr = (rec as ActionReportData).reportAt
+      const result = format(new Date(attr), 'd MMMM yyyy, HH:mm', { locale: id })
+
+      return result
+    },
+    operationAt: (rec: unknown): unknown => {
+      return '1 Rencana Edukasi'
+    },
+    system: (rec: unknown): unknown => {
+      return 'Cito'
+    },
+    operator: (rec: unknown): unknown => {
+      return '2 Edukasi dipilih'
+    },
+    billing: (rec: unknown): unknown => {
+      return 'General'
+    },
+    operationType: (rec: unknown): unknown => {
+      return '-'
+    },
+    dpjp: (rec: unknown): unknown => {
+      return '3 Informasi Dipilih'
+    },
+    parent: (rec: unknown): unknown => {
+      const recX = rec as any
+      return recX.parent?.name || '-'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}
diff --git a/app/components/app/assessment-education/list.vue b/app/components/app/assessment-education/list.vue
new file mode 100644
index 00000000..6ad7dd81
--- /dev/null
+++ b/app/components/app/assessment-education/list.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list.cfg'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+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"
+    />
+    <PaginationView
+      :pagination-meta="paginationMeta"
+      @page-change="handlePageChange"
+    />
+  </div>
+</template>
diff --git a/app/components/app/assessment-education/sample.ts b/app/components/app/assessment-education/sample.ts
new file mode 100644
index 00000000..b067e859
--- /dev/null
+++ b/app/components/app/assessment-education/sample.ts
@@ -0,0 +1,54 @@
+import { addWeeks, formatISO } from 'date-fns'
+
+export type ActionReportData = {
+  id: number
+  reportAt: string
+  operationAt: string
+  noRm: string
+  noBill: string
+  nama: string
+  jk: string
+  alamat: string
+  klinik: string
+  dokter: string
+  caraBayar: string
+  rujukan: string
+  ketRujukan: string
+  asal: string
+}
+
+export const sampleRows: ActionReportData[] = [
+  {
+    id: 1,
+    reportAt: formatISO(addWeeks(new Date(), -1)),
+    operationAt: formatISO(addWeeks(new Date(), 1)),
+    noRm: 'RM23311224',
+    noBill: '-',
+    nama: 'Ahmad Baidowi',
+    jk: 'L',
+    alamat: 'Jl Jaksa Agung S. No. 9',
+    klinik: 'Penyakit dalam',
+    dokter: 'Dr. Andreas Sutaji',
+    caraBayar: 'JKN',
+    rujukan: 'Faskes BPJS',
+    ketRujukan: 'RUMAH SAKIT - RS Lawang Medika - Malang',
+    asal: 'Rawat Jalan Reguler',
+  },
+  {
+    id: 2,
+    reportAt: new Date().toISOString(),
+    operationAt: formatISO(addWeeks(new Date(), 2)),
+    noRm: 'RM23455667',
+    noBill: '-',
+    nama: 'Abraham Sulaiman',
+    jk: 'L',
+    alamat: 'Purwantoro, Blimbing',
+    klinik: 'Penyakit dalam',
+    dokter: 'Dr. Andreas Sutaji',
+    caraBayar: 'JKN',
+    rujukan: 'Faskes BPJS',
+    ketRujukan: 'RUMAH SAKIT - RS Lawang Medika - Malang',
+    asal: 'Rawat Jalan Reguler',
+  },
+  // tambahkan lebih banyak baris contoh jika perlu
+]
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/doctor/fields/index.ts b/app/components/app/doctor/fields/index.ts
new file mode 100644
index 00000000..32d92f2f
--- /dev/null
+++ b/app/components/app/doctor/fields/index.ts
@@ -0,0 +1 @@
+export { default as SelectDoctor } from './select-doctor.vue'
diff --git a/app/components/app/doctor/fields/select-doctor.vue b/app/components/app/doctor/fields/select-doctor.vue
new file mode 100644
index 00000000..8921350c
--- /dev/null
+++ b/app/components/app/doctor/fields/select-doctor.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { cn } from '~/lib/utils'
+
+// type
+import type { Doctor } from '~/models/doctor'
+import { type Person, parseName } from '~/models/person'
+
+// componenets
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+
+const props = defineProps<{
+  fieldName: string
+  label: string
+  placeholder: string
+  doctors?: Doctor[]
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  isRequired?: boolean
+  isDisabled?: boolean
+  colSpan?: number
+}>()
+
+const { class: containerClass, labelClass, colSpan = 1, doctors = [] } = props
+
+const opts = computed(() => {
+  return doctors.map((doc) => ({
+    value: doc.id,
+    label: parseName(doc.employee.person as Person),
+  }))
+})
+</script>
+
+<template>
+  <DE.Cell
+    :col-span="colSpan"
+    :class="cn('select-field-group', fieldGroupClass, containerClass)"
+  >
+    <DE.Label
+      :label-for="fieldName"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Combobox
+              :id="fieldName"
+              v-bind="componentField"
+              :items="opts"
+              :placeholder="placeholder"
+              :is-disabled="isDisabled"
+              search-placeholder="Cari dokter..."
+              empty-message="Dokter tidak ditemukan"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/encounter/entry-form-prev.vue b/app/components/app/encounter/entry-form-prev.vue
new file mode 100644
index 00000000..fdb9a43c
--- /dev/null
+++ b/app/components/app/encounter/entry-form-prev.vue
@@ -0,0 +1,699 @@
+<script setup lang="ts">
+// Components
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import { Button } from '~/components/pub/ui/button'
+import { Input } from '~/components/pub/ui/input'
+import * as CB from '~/components/pub/my-ui/combobox'
+
+import DatepickerSingle from '~/components/pub/my-ui/datepicker/datepicker-single.vue'
+import FileUpload from '~/components/pub/my-ui/form/file-field.vue'
+
+// Types
+import { IntegrationEncounterSchema, type IntegrationEncounterFormData } from '~/schemas/integration-encounter.schema'
+import type { PatientEntity } from '~/models/patient'
+
+// Helpers
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import { refDebounced } from '@vueuse/core'
+import type { Doctor } from '~/models/doctor'
+
+// References
+import { paymentMethodCodes } from '~/const/key-val/common'
+
+// App things
+import { genEncounter, type Encounter } from '~/models/encounter'
+
+// Props
+const props = defineProps<{
+  mode?: string
+  isLoading?: boolean
+  isReadonly?: boolean
+  isSepValid?: boolean
+  isMemberValid?: boolean
+  isCheckingSep?: boolean
+  doctorItems?: CB.Item[]
+  selectedDoctor: Doctor
+  // subSpecialist?: any[]
+  // specialists?: TreeItem[]
+  payments?: any[]
+  participantGroups?: any[]
+  seps: any[]
+  patient?: PatientEntity | null | undefined
+  objects?: any
+}>()
+
+// Model
+const model = defineModel<Encounter>()
+model.value = genEncounter()
+
+// Common preparation
+const defaultCBItems = [{ label: 'Pilih', value: '' }]
+const paymentMethodItems = ref<any>({})
+
+// Emit preparation
+const emit = defineEmits<{
+  (e: 'onSelectDoctor', code: string): void
+  (e: 'event', menu: string, value?: any): void
+  (e: 'fetch', value?: any): void
+}>()
+
+// Validation schema
+const { handleSubmit, errors, defineField, meta } = useForm<IntegrationEncounterFormData>({
+  validationSchema: toTypedSchema(IntegrationEncounterSchema),
+})
+
+// Bind fields and extract attrs
+const [doctorCode, doctorCodeAttrs] = defineField('doctor_code')
+const [unitCode, unitCodeAttrs] = defineField('unit_code')
+const [registerDate, registerDateAttrs] = defineField('registerDate')
+const [paymentMethodCode, paymentMethodCodeAttrs] = defineField('paymentMethod_code')
+const [patientCategory, patientCategoryAttrs] = defineField('patientCategory')
+const [cardNumber, cardNumberAttrs] = defineField('cardNumber')
+const [sepType, sepTypeAttrs] = defineField('sepType')
+const [sepNumber, sepNumberAttrs] = defineField('sepNumber')
+const [patientName, patientNameAttrs] = defineField('patientName')
+const [nationalIdentity, nationalIdentityAttrs] = defineField('nationalIdentity')
+const [medicalRecordNumber, medicalRecordNumberAttrs] = defineField('medicalRecordNumber')
+const [sepFile, sepFileAttrs] = defineField('sepFile')
+const [sippFile, sippFileAttrs] = defineField('sippFile')
+const patientId = ref('')
+const sepReference = ref('')
+const sepControlDate = ref('')
+const sepTrafficStatus = ref('')
+const diagnosis = ref('')
+const noteReference = ref('Hanya diperlukan jika pembayaran jenis JKN')
+const noteFile = ref('Gunakan file [.pdf, .jpg, .png] dengan ukuran maksimal 1MB')
+
+const isLoading = props.isLoading !== undefined ? props.isLoading : false
+const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
+const mode = props.mode !== undefined ? props.mode : 'add'
+// SEP validation state from props
+const isSepValid = computed(() => props.isSepValid || false)
+const isCheckingSep = computed(() => props.isCheckingSep || false)
+const isInsurancePayment = computed(() => ['insurance', 'jkn'].includes(paymentMethodCode.value))
+const isDateLoading = ref(false)
+const debouncedSepNumber = refDebounced(sepNumber, 500)
+const debouncedCardNumber = refDebounced(cardNumber, 500)
+const sepFileReview = ref<any>(null)
+const sippFileReview = ref<any>(null)
+const unitFullName = ref('') // Unit, specialist, subspecialist
+const formRef = ref<HTMLFormElement | null>(null) // Expose submit method for parent component
+
+if (mode === 'add') {
+  // Set default sepDate to current date in YYYY-MM-DD format
+  const today = new Date()
+  const year = today.getFullYear()
+  const month = String(today.getMonth() + 1).padStart(2, '0')
+  const day = String(today.getDate()).padStart(2, '0')
+  registerDate.value = `${year}-${month}-${day}`
+}
+
+watch(
+  () => props.selectedDoctor,
+  (doctor) => {
+    unitFullName.value = doctor.subspecialist?.name ?? doctor.specialist?.name ?? doctor.unit?.name ?? 'tidak diketahui'
+    model.value!.unit_code = doctor.unit_code || ''
+    model.value!.specialist_code = doctor.specialist_code || ''
+    model.value!.subspecialist_code = doctor.subspecialist_code || ''
+  },
+)
+
+// Sync props to form fields
+watch(
+  () => props.objects,
+  (objects) => {
+    if (objects && Object.keys(objects).length > 0) {
+      patientName.value = objects?.patientName || ''
+      nationalIdentity.value = objects?.nationalIdentity || ''
+      medicalRecordNumber.value = objects?.medicalRecordNumber || ''
+      doctorCode.value = objects?.doctorCode || ''
+      paymentMethodCode.value = objects?.paymentMethodCode || ''
+      patientCategory.value = objects?.patientCategory || ''
+      cardNumber.value = objects?.cardNumber || ''
+      sepType.value = objects?.sepType || ''
+      sepNumber.value = objects?.sepNumber || ''
+      sepFileReview.value = objects?.sepFileReview || ''
+      sippFileReview.value = objects?.sippFileReview || ''
+      isDateLoading.value = true
+      setTimeout(() => {
+        registerDate.value = objects?.registerDate || ''
+        isDateLoading.value = false
+      }, 100)
+    }
+  },
+  { deep: true, immediate: true },
+)
+
+watch(
+  () => props.patient,
+  (patient) => {
+    if (patient && Object.keys(patient).length > 0) {
+      patientId.value = patient?.id ? String(patient.id) : ''
+      patientName.value = patient?.person?.name || ''
+      nationalIdentity.value = patient?.person?.residentIdentityNumber || ''
+      medicalRecordNumber.value = patient?.number || ''
+    }
+  },
+  { deep: true, immediate: true },
+)
+
+watch(
+  () => props.isSepValid,
+  (value) => {
+    if (!value) return
+    const objects = props.objects
+    if (objects && Object.keys(objects).length > 0) {
+      sepReference.value = objects?.sepReference || ''
+      sepControlDate.value = objects?.sepControlDate || ''
+      sepTrafficStatus.value = objects?.sepTrafficStatus || ''
+      diagnosis.value = objects?.diagnosis || ''
+    }
+  },
+)
+
+watch(debouncedSepNumber, (newValue) => {
+  emit('event', 'sep-number-changed', newValue)
+})
+
+watch(debouncedCardNumber, (newValue) => {
+  emit('event', 'member-changed', newValue)
+})
+
+function onAddSep() {
+  const formValues = {
+    patientId: patientId.value || '',
+    doctorCode: doctorCode.value,
+    registerDate: registerDate.value,
+    cardNumber: cardNumber.value,
+    paymentMethodCode: paymentMethodCode.value,
+    sepFile: sepFile.value,
+    sippFile: sippFile.value,
+    sepType: sepType.value,
+  }
+  emit('event', 'add-sep', formValues)
+}
+
+function onSearchSep() {
+  emit('event', 'search-sep', { cardNumber: cardNumber.value })
+}
+
+// Submit handler
+const onSubmit = handleSubmit((values) => {
+  let payload: any = values
+  if (props.mode === 'edit') {
+    payload = {
+      ...payload,
+      sepFileReview: sepFileReview.value,
+      sippFileReview: sippFileReview.value,
+    }
+  }
+  emit('event', 'save', payload)
+})
+
+function openFile(path: string) {
+  window.open(path, '_blank')
+}
+
+function submitForm() {
+  // Trigger form submit using native form submit
+  // This will trigger validation and onSubmit handler
+  if (formRef.value) {
+    formRef.value.requestSubmit()
+  } else {
+    // Fallback: directly call onSubmit handler
+    // Create a mock event object
+    const mockEvent = {
+      preventDefault: () => {},
+      target: formRef.value || {},
+    } as SubmitEvent
+
+    // Call onSubmit directly
+    onSubmit(mockEvent)
+  }
+}
+
+defineExpose({
+  submitForm,
+})
+
+onMounted(() => {
+  const isPaymentMethodVclaim = true
+  paymentMethodItems.value = isPaymentMethodVclaim ? props.payments : CB.recStrToItem(paymentMethodCodes)
+})
+</script>
+
+<template>
+  <div class="mx-auto w-full">
+    <form
+      ref="formRef"
+      @submit.prevent="onSubmit"
+      class="grid gap-6 p-4"
+    >
+      <!-- Data Pasien -->
+      <div class="flex flex-col gap-2">
+        <h3 class="text-lg font-semibold">Data Pasien</h3>
+        <div class="flex items-center gap-2">
+          <span class="text-sm">sudah pernah terdaftar sebagai pasien?</span>
+          <Button
+            variant="outline"
+            type="button"
+            class="h-[40px] rounded-md border-orange-400 text-orange-400 hover:bg-green-50"
+            @click="emit('event', 'search')"
+          >
+            <Icon
+              name="i-lucide-search"
+              class="h-5 w-5"
+            />
+            Cari Pasien
+          </Button>
+          <span class="text-sm">belum pernah terdaftar sebagai pasien?</span>
+          <Button
+            variant="outline"
+            type="button"
+            class="h-[40px] rounded-md border-orange-400 text-orange-400 hover:bg-green-50"
+            @click="emit('event', 'add')"
+          >
+            <Icon
+              name="i-lucide-plus"
+              class="h-5 w-5"
+            />
+            Tambah Pasien Baru
+          </Button>
+        </div>
+      </div>
+
+      <DE.Block
+        labelSize="thin"
+        class="!pt-0"
+        :colCount="3"
+        :cellFlex="false"
+      >
+        <DE.Cell>
+          <DE.Label height="compact">Nama Pasien</DE.Label>
+          <DE.Field :errMessage="errors.patientName">
+            <Input
+              id="patientName"
+              v-model="patientName"
+              v-bind="patientNameAttrs"
+              :disabled="true"
+            />
+          </DE.Field>
+        </DE.Cell>
+
+        <DE.Cell>
+          <DE.Label height="compact">NIK</DE.Label>
+          <DE.Field :errMessage="errors.nationalIdentity">
+            <Input
+              id="nationalIdentity"
+              v-model="nationalIdentity"
+              v-bind="nationalIdentityAttrs"
+              :disabled="true"
+            />
+          </DE.Field>
+        </DE.Cell>
+
+        <DE.Cell>
+          <DE.Label height="compact">No. RM</DE.Label>
+          <DE.Field :errMessage="errors.medicalRecordNumber">
+            <Input
+              id="medicalRecordNumber"
+              v-model="medicalRecordNumber"
+              v-bind="medicalRecordNumberAttrs"
+              :disabled="true"
+            />
+          </DE.Field>
+        </DE.Cell>
+      </DE.Block>
+
+      <hr />
+
+      <!-- Data Kunjungan -->
+      <h3 class="text-lg font-semibold">Data Kunjungan</h3>
+
+      <DE.Block
+        labelSize="thin"
+        class="!pt-0"
+        :colCount="3"
+        :cellFlex="false"
+      >
+        <DE.Cell>
+          <DE.Label height="compact">
+            Dokter
+            <span class="text-red-500">*</span>
+          </DE.Label>
+          <DE.Field :errMessage="errors.doctor_code">
+            <CB.Combobox
+              id="doctorCode"
+              v-model="doctorCode"
+              v-bind="doctorCodeAttrs"
+              :items="[...defaultCBItems, ...doctorItems]"
+              :is-disabled="isLoading || isReadonly"
+              placeholder="Pilih Dokter"
+              search-placeholder="Cari Dokter"
+              empty-message="Dokter tidak ditemukan"
+              @update:model-value="(value: any) => emit('onSelectDoctor', value)"
+            />
+          </DE.Field>
+        </DE.Cell>
+
+        <DE.Cell>
+          <DE.Label height="compact">
+            Spesialis / Subspesialis
+            <span class="text-red-500">*</span>
+          </DE.Label>
+          <DE.Field :errMessage="errors.unit_code">
+            <Input
+              :value="unitFullName"
+              :disabled="true"
+            />
+          </DE.Field>
+        </DE.Cell>
+
+        <DE.Cell>
+          <DE.Label height="compact">
+            Tanggal Daftar
+            <span class="text-red-500">*</span>
+          </DE.Label>
+          <DE.Field :errMessage="errors.registerDate">
+            <DatepickerSingle
+              v-if="!isDateLoading"
+              id="registerDate"
+              v-model="registerDate"
+              v-bind="registerDateAttrs"
+              placeholder="Pilih tanggal"
+            />
+          </DE.Field>
+        </DE.Cell>
+      </DE.Block>
+
+      <DE.Block
+        labelSize="thin"
+        class="!pt-0"
+        :colCount="3"
+        :cellFlex="false"
+      >
+        <DE.Cell>
+          <DE.Label height="compact">
+            Jenis Pembayaran
+            <span class="text-red-500">*</span>
+          </DE.Label>
+          <DE.Field :errMessage="errors.paymentMethod_code">
+            <CB.Combobox
+              id="paymentMethodCode"
+              v-model="paymentMethodCode"
+              v-bind="paymentMethodCodeAttrs"
+              :items="paymentMethodItems"
+              :disabled="isLoading || isReadonly"
+              placeholder="Pilih Jenis Pembayaran"
+            />
+          </DE.Field>
+        </DE.Cell>
+      </DE.Block>
+
+      <!-- BPJS Fields (conditional) -->
+      <template v-if="isInsurancePayment">
+        <DE.Block
+          labelSize="thin"
+          class="!pt-0"
+          :colCount="3"
+          :cellFlex="false"
+        >
+          <DE.Cell>
+            <DE.Label height="compact">
+              Kelompok Peserta
+              <span class="text-red-500">*</span>
+            </DE.Label>
+            <DE.Field :errMessage="errors.patientCategory">
+              <Select
+                id="patientCategory"
+                v-model="patientCategory"
+                v-bind="patientCategoryAttrs"
+                :items="participantGroups || []"
+                :disabled="isLoading || isReadonly"
+                placeholder="Pilih Kelompok Peserta"
+              />
+            </DE.Field>
+            <span class="text-sm text-gray-500">
+              {{ noteReference }}
+            </span>
+          </DE.Cell>
+
+          <DE.Cell>
+            <DE.Label height="compact">
+              No. Kartu BPJS
+              <span class="text-red-500">*</span>
+            </DE.Label>
+            <DE.Field :errMessage="errors.cardNumber">
+              <Input
+                id="cardNumber"
+                v-model="cardNumber"
+                v-bind="cardNumberAttrs"
+                :disabled="isLoading || isReadonly"
+                placeholder="Masukkan nomor kartu BPJS"
+              />
+            </DE.Field>
+            <div
+              v-if="isMemberValid"
+              class="mt-1 flex items-center gap-2"
+            >
+              <Icon
+                name="i-lucide-badge-check"
+                class="h-4 w-4 bg-green-500 text-white"
+              />
+              <span class="text-sm text-green-500">Aktif</span>
+            </div>
+            <div
+              v-if="!isMemberValid"
+              class="mt-1 flex items-center gap-2"
+            >
+              <Icon
+                name="i-lucide-x"
+                class="h-4 w-4 bg-red-500 text-white"
+              />
+              <span class="text-sm text-red-500">Tidak aktif</span>
+            </div>
+          </DE.Cell>
+
+          <DE.Cell>
+            <DE.Label height="compact">
+              Jenis SEP
+              <span class="text-red-500">*</span>
+            </DE.Label>
+            <DE.Field :errMessage="errors.sepType">
+              <Select
+                id="sepType"
+                v-model="sepType"
+                v-bind="sepTypeAttrs"
+                :items="seps"
+                :disabled="isLoading || isReadonly"
+                placeholder="Pilih Jenis SEP"
+              />
+            </DE.Field>
+          </DE.Cell>
+        </DE.Block>
+
+        <DE.Block
+          labelSize="thin"
+          class="!pt-0"
+          :colCount="3"
+          :cellFlex="false"
+        >
+          <DE.Cell>
+            <DE.Label height="compact">
+              No. SEP
+              <span class="text-red-500">*</span>
+            </DE.Label>
+            <DE.Field :errMessage="errors.sepNumber">
+              <div class="flex gap-2">
+                <Input
+                  id="sepNumber"
+                  v-model="sepNumber"
+                  v-bind="sepNumberAttrs"
+                  placeholder="Tambah SEP terlebih dahulu"
+                  class="flex-1"
+                  :disabled="isLoading || isReadonly || isSepValid"
+                />
+                <Button
+                  v-if="!isSepValid"
+                  variant="outline"
+                  type="button"
+                  class="bg-primary"
+                  size="sm"
+                  :disabled="isCheckingSep || isLoading || isReadonly"
+                  @click="onAddSep"
+                >
+                  <Icon
+                    v-if="isCheckingSep"
+                    name="i-lucide-loader-2"
+                    class="h-4 w-4 animate-spin"
+                  />
+                  <Icon
+                    v-else
+                    name="i-lucide-plus"
+                    class="h-4 w-4"
+                  />
+                </Button>
+                <Button
+                  v-if="isMemberValid"
+                  variant="outline"
+                  type="button"
+                  class="bg-primary"
+                  size="sm"
+                  @click="onSearchSep"
+                >
+                  <Icon
+                    name="i-lucide-search"
+                    class="h-4 w-4"
+                  />
+                </Button>
+              </div>
+            </DE.Field>
+            <div
+              v-if="isSepValid"
+              class="mt-1 flex items-center gap-2"
+            >
+              <Icon
+                name="i-lucide-badge-check"
+                class="h-4 w-4 bg-green-500 text-white"
+              />
+              <span class="text-sm text-green-500">Aktif</span>
+            </div>
+            <span class="text-sm text-gray-500">
+              {{ noteReference }}
+            </span>
+          </DE.Cell>
+
+          <DE.Cell>
+            <FileUpload
+              field-name="sepFile"
+              label="Dokumen SEP"
+              placeholder="Pilih file"
+              :accept="['pdf', 'jpg', 'png']"
+              :max-size-mb="1"
+              v-model="sepFile"
+              v-bind="sepFileAttrs"
+              @file-selected="() => {}"
+            />
+            <span class="mt-1 text-sm text-gray-500">
+              {{ noteFile }}
+            </span>
+            <p v-if="sepFileReview">
+              <a
+                class="mt-1 text-sm capitalize text-blue-500"
+                href="#"
+                @click="openFile(sepFileReview.filePath)"
+              >
+                {{ sepFileReview?.fileName }}
+              </a>
+            </p>
+          </DE.Cell>
+
+          <DE.Cell>
+            <FileUpload
+              field-name="sippFile"
+              label="Dokumen SIPP"
+              placeholder="Pilih file"
+              :accept="['pdf', 'jpg', 'png']"
+              :max-size-mb="1"
+              v-model="sippFile"
+              v-bind="sippFileAttrs"
+              @file-selected="() => {}"
+            />
+            <span class="mt-1 text-sm text-gray-500">
+              {{ noteFile }}
+            </span>
+            <p v-if="sippFileReview">
+              <a
+                class="mt-1 text-sm capitalize text-blue-500"
+                href="#"
+                @click="openFile(sippFileReview.filePath)"
+              >
+                {{ sippFileReview?.fileName }}
+              </a>
+            </p>
+          </DE.Cell>
+        </DE.Block>
+      </template>
+
+      <template v-if="isSepValid">
+        <hr />
+        <!-- Data SEP -->
+        <h3 class="text-lg font-semibold">Data SEP</h3>
+
+        <DE.Block
+          labelSize="thin"
+          class="!pt-0"
+          :colCount="3"
+          :cellFlex="false"
+        >
+          <DE.Cell>
+            <Label height="compact">Dengan Rujukan / Surat Kontrol</Label>
+            <DE.Field>
+              <Input
+                id="sepReference"
+                v-model="sepReference"
+                :disabled="true"
+              />
+            </DE.Field>
+          </DE.Cell>
+
+          <DE.Cell>
+            <Label height="compact">No. Rujukan / Surat Kontrol</Label>
+            <DE.Field>
+              <Input
+                id="sepReference"
+                v-model="sepNumber"
+                :disabled="true"
+              />
+            </DE.Field>
+          </DE.Cell>
+
+          <DE.Cell>
+            <Label height="compact">
+              Tanggal Rujukan / Surat Kontrol
+              <span class="ml-1 text-red-500">*</span>
+            </Label>
+            <DE.Field>
+              <DatepickerSingle
+                id="sepControlDate"
+                v-model="sepControlDate"
+                :disabled="true"
+                placeholder="Pilih tanggal sep"
+              />
+            </DE.Field>
+          </DE.Cell>
+        </DE.Block>
+
+        <DE.Block
+          labelSize="thin"
+          class="!pt-0"
+          :colCount="3"
+          :cellFlex="false"
+        >
+          <DE.Cell :col-span="2">
+            <Label height="compact">Diagnosis</Label>
+            <DE.Field>
+              <Input
+                id="diagnosis"
+                v-model="diagnosis"
+                :disabled="true"
+              />
+            </DE.Field>
+          </DE.Cell>
+
+          <DE.Cell>
+            <Label height="compact">Status Kecelakaan</Label>
+            <DE.Field>
+              <Input
+                id="sepTrafficStatus"
+                v-model="sepTrafficStatus"
+                :disabled="true"
+              />
+            </DE.Field>
+          </DE.Cell>
+        </DE.Block>
+      </template>
+    </form>
+  </div>
+</template>
diff --git a/app/components/app/encounter/entry-form.vue b/app/components/app/encounter/entry-form.vue
index 9950a3dd..46ad2db7 100644
--- a/app/components/app/encounter/entry-form.vue
+++ b/app/components/app/encounter/entry-form.vue
@@ -23,7 +23,6 @@ import { paymentMethodCodes } from '~/const/key-val/common'
 
 // App things
 import { genEncounter, type Encounter } from '~/models/encounter'
-import { se } from 'date-fns/locale'
 
 // Props
 const props = defineProps<{
@@ -50,7 +49,6 @@ model.value = genEncounter()
 
 // Common preparation
 const defaultCBItems = [{ label: 'Pilih', value: '' }]
-const paymentMethodItems = CB.recStrToItem(paymentMethodCodes)
 
 // Emit preparation
 const emit = defineEmits<{
@@ -85,12 +83,10 @@ const sepTrafficStatus = ref('')
 const diagnosis = ref('')
 const noteReference = ref('Hanya diperlukan jika pembayaran jenis JKN')
 const noteFile = ref('Gunakan file [.pdf, .jpg, .png] dengan ukuran maksimal 1MB')
-
+const mode = props.mode !== undefined ? props.mode : 'add'
 const isLoading = props.isLoading !== undefined ? props.isLoading : false
 const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
-const mode = props.mode !== undefined ? props.mode : 'add'
-// SEP validation state from props
-const isSepValid = computed(() => props.isSepValid || false)
+const isSepValid = computed(() => props.isSepValid || false) // SEP validation state from props
 const isCheckingSep = computed(() => props.isCheckingSep || false)
 const isInsurancePayment = computed(() => ['insurance', 'jkn'].includes(paymentMethodCode.value))
 const isDateLoading = ref(false)
@@ -100,6 +96,7 @@ const sepFileReview = ref<any>(null)
 const sippFileReview = ref<any>(null)
 const unitFullName = ref('') // Unit, specialist, subspecialist
 const formRef = ref<HTMLFormElement | null>(null) // Expose submit method for parent component
+const paymentMethodItems = CB.recStrToItem(paymentMethodCodes)
 
 if (mode === 'add') {
   // Set default sepDate to current date in YYYY-MM-DD format
@@ -129,13 +126,15 @@ watch(
       nationalIdentity.value = objects?.nationalIdentity || ''
       medicalRecordNumber.value = objects?.medicalRecordNumber || ''
       doctorCode.value = objects?.doctorCode || ''
-      paymentMethodCode.value = objects?.paymentMethodCode || ''
       patientCategory.value = objects?.patientCategory || ''
       cardNumber.value = objects?.cardNumber || ''
       sepType.value = objects?.sepType || ''
       sepNumber.value = objects?.sepNumber || ''
       sepFileReview.value = objects?.sepFileReview || ''
       sippFileReview.value = objects?.sippFileReview || ''
+      if (objects.paymentType) {
+        paymentMethodCode.value = objects.paymentType || ''
+      }
       isDateLoading.value = true
       setTimeout(() => {
         registerDate.value = objects?.registerDate || ''
@@ -348,7 +347,7 @@ defineExpose({
               placeholder="Pilih Dokter"
               search-placeholder="Cari Dokter"
               empty-message="Dokter tidak ditemukan"
-              @update:model-value="(value) => emit('onSelectDoctor', value)"
+              @update:model-value="(value: any) => emit('onSelectDoctor', value)"
             />
           </DE.Field>
         </DE.Cell>
@@ -395,12 +394,12 @@ defineExpose({
             <span class="text-red-500">*</span>
           </DE.Label>
           <DE.Field :errMessage="errors.paymentMethod_code">
-            <CB.Combobox
+            <Select
               id="paymentMethodCode"
               v-model="paymentMethodCode"
               v-bind="paymentMethodCodeAttrs"
-              :items="paymentMethodItems"
-              :disabled="isLoading || isReadonly"
+              :items="payments || []"
+              :disabled="isLoading || isReadonly || mode === 'edit'"
               placeholder="Pilih Jenis Pembayaran"
             />
           </DE.Field>
@@ -576,7 +575,7 @@ defineExpose({
             </span>
             <p v-if="sepFileReview">
               <a
-                class="mt-1 text-sm text-blue-500 capitalize"
+                class="mt-1 text-sm capitalize text-blue-500"
                 href="#"
                 @click="openFile(sepFileReview.filePath)"
               >
@@ -601,7 +600,7 @@ defineExpose({
             </span>
             <p v-if="sippFileReview">
               <a
-                class="mt-1 text-sm text-blue-500 capitalize"
+                class="mt-1 text-sm capitalize text-blue-500"
                 href="#"
                 @click="openFile(sippFileReview.filePath)"
               >
diff --git a/app/components/app/general-consent/entry.vue b/app/components/app/general-consent/entry.vue
index 75e30cec..3056f3b6 100644
--- a/app/components/app/general-consent/entry.vue
+++ b/app/components/app/general-consent/entry.vue
@@ -85,10 +85,8 @@ const isExcluded = (key: string) => props.excludeFields?.includes(key)
         </Cell>
       </Block>
 
-      <Separator class="mt-8" />
-
       <div class="my-2 flex items-center justify-between">
-        <h1 class="font-semibold">Anggota Keluarga</h1>
+        <div class="text-sm 2xl:text-base font-semibold">Anggota Keluarga</div>
         <Button
           type="button"
           @click="addRelative"
@@ -102,7 +100,7 @@ const isExcluded = (key: string) => props.excludeFields?.includes(key)
         :key="idx"
         class="my-2 rounded-md border border-slate-300 p-4"
       >
-        <Block :colCount="2">
+        <Block :colCount="2" :cell-flex="false" class="!mb-2">
           <Cell>
             <Label dynamic>Nama Anggota Keluarga</Label>
             <Field>
@@ -118,97 +116,83 @@ const isExcluded = (key: string) => props.excludeFields?.includes(key)
           </Cell>
         </Block>
 
-        <button
+        <Button
+          variant="destructive"
           type="button"
-          class="mt-3 text-sm text-red-500"
           @click="removeRelative(idx)"
         >
           Hapus
-        </button>
+        </Button>
       </div>
 
-      <Separator class="mt-8" />
-
       <!-- Responsible Section -->
-      <div class="my-2">
-        <h1 class="font-semibold">Penanggung Jawab</h1>
+      <div class="mt-8 mb-1.5">
+        <div class="text-sm 2xl:text-base font-semibold">Penanggung Jawab</div>
       </div>
+      <Block :col-count="2" :cell-flex="false">
+        <Cell>
+          <Label dynamic>Nama Penanggung Jawab</Label>
+          <Field>
+            <Input
+              v-model="responsibleName"
+              v-bind="responsibleNameAttrs"
+            />
+          </Field>
+        </Cell>
 
-      <div class="my-2 rounded-md border border-slate-300 p-4">
-        <Block :colCount="2">
-          <Cell>
-            <Label dynamic>Nama Penanggung Jawab</Label>
-            <Field>
-              <Input
-                v-model="responsibleName"
-                v-bind="responsibleNameAttrs"
-              />
-            </Field>
-          </Cell>
-
-          <Cell>
-            <Label dynamic>No. Hp Penanggung Jawab</Label>
-            <Field>
-              <Input
-                v-model="responsiblePhone"
-                v-bind="responsiblePhoneAttrs"
-              />
-            </Field>
-          </Cell>
-        </Block>
-      </div>
-
-      <Separator class="mt-8" />
+        <Cell>
+          <Label dynamic>No. Hp Penanggung Jawab</Label>
+          <Field>
+            <Input
+              v-model="responsiblePhone"
+              v-bind="responsiblePhoneAttrs"
+            />
+          </Field>
+        </Cell>
+      </Block>
 
       <!-- Informant -->
-      <div class="my-2">
-        <h1 class="font-semibold">Pemberi Informasi</h1>
+      <div class="mt-8 mb-1.5">
+        <div class="text-sm 2xl:text-base font-semibold">Pemberi Informasi</div>
       </div>
+      <Block :col-count="2" :cell-flex="false">
+        <Cell>
+          <Label dynamic>Informant</Label>
+          <Field>
+            <Input
+              v-model="informant"
+              v-bind="informantAttrs"
+            />
+          </Field>
+        </Cell>
+      </Block>
 
-      <div class="my-2 rounded-md border border-slate-300 p-4">
-        <Block>
-          <Cell>
-            <Label dynamic>Informant</Label>
-            <Field>
-              <Input
-                v-model="informant"
-                v-bind="informantAttrs"
-              />
-            </Field>
-          </Cell>
-        </Block>
-      </div>
-
-      <Separator class="mt-8" />
 
       <!-- Witnesses -->
-      <div class="my-2">
-        <h1 class="font-semibold">Saksi</h1>
+      <div class="mt-8 mb-1.5">
+        <div class="text-sm 2xl:text-base font-semibold">Saksi</div>
       </div>
+      <Block :col-count="2" :cell-flex="false">
+        <Cell>
+          <Label dynamic>Saksi 1</Label>
+          <Field>
+            <Input
+              v-model="witness1"
+              v-bind="witness1Attrs"
+            />
+          </Field>
+        </Cell>
 
-      <div class="my-2 rounded-md border border-slate-300 p-4">
-        <Block :colCount="2">
-          <Cell>
-            <Label dynamic>Saksi 1</Label>
-            <Field>
-              <Input
-                v-model="witness1"
-                v-bind="witness1Attrs"
-              />
-            </Field>
-          </Cell>
-
-          <Cell>
-            <Label dynamic>Saksi 2</Label>
-            <Field>
-              <Input
-                v-model="witness2"
-                v-bind="witness2Attrs"
-              />
-            </Field>
-          </Cell>
-        </Block>
-      </div>
+        <Cell>
+          <Label dynamic>Saksi 2</Label>
+          <Field>
+            <Input
+              v-model="witness2"
+              v-bind="witness2Attrs"
+            />
+          </Field>
+        </Cell>
+      </Block>
     </div>
   </form>
 </template>
diff --git a/app/components/app/general-consent/list.cfg.ts b/app/components/app/general-consent/list.cfg.ts
index c2f57c54..24ed191a 100644
--- a/app/components/app/general-consent/list.cfg.ts
+++ b/app/components/app/general-consent/list.cfg.ts
@@ -6,7 +6,7 @@ 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 }],
+  cols: [{ width: 100 }, {}, {}, {}, {}, {}, { width: 50 }],
   headers: [
     [
       { label: 'Tanggal' },
diff --git a/app/components/app/item-price/entry-form.vue b/app/components/app/item-price/entry-form.vue
index f2f55d76..5f0fafdb 100644
--- a/app/components/app/item-price/entry-form.vue
+++ b/app/components/app/item-price/entry-form.vue
@@ -1,50 +1,140 @@
 <script setup lang="ts">
-import Block from '~/components/pub/my-ui/form/block.vue'
-import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
-import Field from '~/components/pub/my-ui/form/field.vue'
-import Label from '~/components/pub/my-ui/form/label.vue'
+// Components
+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'
+import Button from '~/components/pub/ui/button/Button.vue'
 
-const props = defineProps<{ modelValue: any }>()
-const emit = defineEmits(['update:modelValue', 'event'])
+// Types
+import type { ItemPriceFormData } from '~/schemas/item-price.schema'
 
-const data = computed({
-  get: () => props.modelValue,
-  set: (val) => emit('update:modelValue', val),
+// Helpers
+import type z from 'zod'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  items: any[]
+  values: any
+  isLoading?: boolean
+  isReadonly?: boolean
+}
+
+const props = defineProps<Props>()
+const isLoading = props.isLoading !== undefined ? props.isLoading : false
+const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
+const emit = defineEmits<{
+  submit: [values: ItemPriceFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: {
+    item_code: '',
+    price: 0,
+    insuranceCompany_code: '',
+  } as Partial<ItemPriceFormData>,
 })
 
-const items = [
-  { value: '1', label: 'item 1' },
-  { value: '2', label: 'item 2' },
-  { value: '3', label: 'item 3' },
-  { value: '4', label: 'item 4' },
-]
+const [item_code, item_codeAttrs] = defineField('item_code')
+const [price, priceAttrs] = defineField('price')
+const [insuranceCompany_code, insuranceCompany_codeAttrs] = defineField('insuranceCompany_code')
+
+if (props.values) {
+  if (props.values.item_code !== undefined) item_code.value = props.values.item_code
+  if (props.values.price !== undefined) price.value = props.values.price
+  if (props.values.insuranceCompany_code !== undefined) insuranceCompany_code.value = props.values.insuranceCompany_code
+}
+
+const resetForm = () => {
+  item_code.value = ''
+  price.value = 0
+  insuranceCompany_code.value = ''
+}
+
+function onSubmitForm() {
+  const formData: ItemPriceFormData = {
+    item_code: item_code.value || '',
+    price: Number(price.value) || 0,
+    insuranceCompany_code: insuranceCompany_code.value || '',
+  }
+  emit('submit', formData, resetForm)
+}
+
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
 </script>
 
 <template>
-  <form id="entry-form">
-    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
-      <div class="flex flex-col justify-between">
-        <Block>
-          <FieldGroup>
-            <Label>Items</Label>
-            <Field>
-              <Select :items="items" />
-            </Field>
-          </FieldGroup>
-          <FieldGroup>
-            <Label>Perusahaan Insuransi</Label>
-            <Field>
-              <Select :items="items" />
-            </Field>
-          </FieldGroup>
-          <FieldGroup>
-            <Label>Harga</Label>
-            <Field>
-              <Input v-model="data.price" />
-            </Field>
-          </FieldGroup>
-        </Block>
-      </div>
+  <form
+    id="form-item-price"
+    @submit.prevent
+  >
+    <Block
+      labelSize="thin"
+      class="!mb-2.5 !pt-0 xl:!mb-3"
+      :colCount="1"
+    >
+      <Cell>
+        <Label height="compact">Item</Label>
+        <Field :errMessage="errors.item_code">
+          <Select
+            id="item_code"
+            v-model="item_code"
+            icon-name="i-lucide-chevron-down"
+            placeholder="Pilih Item"
+            v-bind="item_codeAttrs"
+            :items="items"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Harga</Label>
+        <Field :errMessage="errors.price">
+          <Input
+            id="price"
+            type="number"
+            v-model="price"
+            v-bind="priceAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Perusahaan Asuransi</Label>
+        <Field :errMessage="errors.insuranceCompany_code">
+          <Input
+            id="insuranceCompany_code"
+            v-model="insuranceCompany_code"
+            v-bind="insuranceCompany_codeAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+    </Block>
+    <div class="my-2 flex justify-end gap-2 py-2">
+      <Button
+        type="button"
+        variant="secondary"
+        class="w-[120px]"
+        @click="onCancelForm"
+      >
+        Kembali
+      </Button>
+      <Button
+        v-if="!isReadonly"
+        type="button"
+        class="w-[120px]"
+        :disabled="isLoading || !meta.valid"
+        @click="onSubmitForm"
+      >
+        Simpan
+      </Button>
     </div>
   </form>
 </template>
diff --git a/app/components/app/item-price/list-cfg.ts b/app/components/app/item-price/list-cfg.ts
index c3db4f50..f1ebbd13 100644
--- a/app/components/app/item-price/list-cfg.ts
+++ b/app/components/app/item-price/list-cfg.ts
@@ -3,27 +3,23 @@ import { defineAsyncComponent } from 'vue'
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
-const _doctorStatus = {
-  0: 'Tidak Aktif',
-  1: 'Aktif',
-}
-
 export const config: Config = {
-  cols: [{}, {}, { width: 50 }],
+  cols: [{}, {}, {}, { width: 50 }],
 
   headers: [
     [
-      { label: 'Kode' },
-      { label: 'Nama' },
+      { label: 'Item' },
+      { label: 'Harga' },
+      { label: 'Perusahaan Asuransi' },
       { label: 'Aksi' },
     ],
   ],
 
-  keys: ['code', 'name', 'action'],
+  keys: ['item_code', 'price', 'insuranceCompany_code', 'action'],
 
   delKeyNames: [
-    { key: 'code', label: 'Kode' },
-    { key: 'name', label: 'Nama' },
+    { key: 'item_code', label: 'Item' },
+    { key: 'insuranceCompany_code', label: 'Perusahaan Asuransi' },
   ],
 
   parses: {},
@@ -39,9 +35,5 @@ export const config: Config = {
     },
   },
 
-  htmls: {
-    patient_address(_rec) {
-      return '-'
-    },
-  },
+  htmls: {},
 }
diff --git a/app/components/app/item-price/list.vue b/app/components/app/item-price/list.vue
index 96697bde..2f7908cb 100644
--- a/app/components/app/item-price/list.vue
+++ b/app/components/app/item-price/list.vue
@@ -1,14 +1,39 @@
 <script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
 import { config } from './list-cfg'
 
-defineProps<{
+interface Props {
   data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
 }>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
 </script>
 
 <template>
-  <PubMyUiDataTable
-    v-bind="config"
-    :rows="data"
-  />
+  <div class="space-y-4">
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+    <PaginationView
+      :pagination-meta="paginationMeta"
+      @page-change="handlePageChange"
+    />
+  </div>
 </template>
diff --git a/app/components/app/item-price/picker.vue b/app/components/app/item-price/picker.vue
deleted file mode 100644
index e69de29b..00000000
diff --git a/app/components/app/item-price/search.vue b/app/components/app/item-price/search.vue
deleted file mode 100644
index e69de29b..00000000
diff --git a/app/components/app/item-price/status-badge.vue b/app/components/app/item-price/status-badge.vue
deleted file mode 100644
index 32cdfbca..00000000
--- a/app/components/app/item-price/status-badge.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<script setup lang="ts">
-import { Badge } from '~/components/pub/ui/badge'
-
-const props = defineProps<{
-  rec: any
-  idx?: number
-}>()
-
-const doctorStatus = {
-  0: 'Tidak Aktif',
-  1: 'Aktif',
-}
-
-const statusText = computed(() => {
-  return doctorStatus[props.rec.status_code as keyof typeof doctorStatus]
-})
-
-const badgeVariant = computed(() => {
-  return props.rec.status_code === 1 ? 'default' : 'destructive'
-})
-</script>
-
-<template>
-  <div class="flex justify-center">
-    <Badge :variant="badgeVariant">
-      {{ statusText }}
-    </Badge>
-  </div>
-</template>
diff --git a/app/components/app/item/entry-form.vue b/app/components/app/item/entry-form.vue
index 7ddc930b..e40f1f66 100644
--- a/app/components/app/item/entry-form.vue
+++ b/app/components/app/item/entry-form.vue
@@ -1,68 +1,227 @@
 <script setup lang="ts">
-import Block from '~/components/pub/my-ui/form/block.vue'
-import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
-import Field from '~/components/pub/my-ui/form/field.vue'
-import Label from '~/components/pub/my-ui/form/label.vue'
+// Components
+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'
+import Button from '~/components/pub/ui/button/Button.vue'
 
-const props = defineProps<{ modelValue: any }>()
-const emit = defineEmits(['update:modelValue', 'event'])
+// Types
+import type { ItemFormData } from '~/schemas/item.schema'
 
-const data = computed({
-  get: () => props.modelValue,
-  set: (val) => emit('update:modelValue', val),
+// Helpers
+import type z from 'zod'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  itemGroups: any[]
+  uoms: any[]
+  values: any
+  isLoading?: boolean
+  isReadonly?: boolean
+}
+
+const props = defineProps<Props>()
+const isShowInfra = false;
+const isLoading = props.isLoading !== undefined ? props.isLoading : false
+const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
+const emit = defineEmits<{
+  submit: [values: ItemFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: {
+    code: '',
+    name: '',
+    itemGroup_code: '',
+    uom_code: '',
+    infra_code: '',
+    stock: 0,
+    buyingPrice: 0,
+    sellingPrice: 0,
+  } as Partial<ItemFormData>,
 })
 
-const items = [
-  { value: '1', label: 'item 1' },
-  { value: '2', label: 'item 2' },
-  { value: '3', label: 'item 3' },
-  { value: '4', label: 'item 4' },
-]
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+const [itemGroup_code, itemGroup_codeAttrs] = defineField('itemGroup_code')
+const [uom, uomAttrs] = defineField('uom_code')
+const [infra_code, infra_codeAttrs] = defineField('infra_code')
+const [stock, stockAttrs] = defineField('stock')
+const [buyingPrice, buyingPriceAttrs] = defineField('buyingPrice')
+const [sellingPrice, sellingPriceAttrs] = defineField('sellingPrice')
+
+if (props.values) {
+  if (props.values.code !== undefined) code.value = props.values.code
+  if (props.values.name !== undefined) name.value = props.values.name
+  if (props.values.itemGroup_code !== undefined) itemGroup_code.value = props.values.itemGroup_code
+  if (props.values.uom_code !== undefined) uom.value = props.values.uom_code
+  if (props.values.infra_code !== undefined) infra_code.value = props.values.infra_code
+  if (props.values.stock !== undefined) stock.value = props.values.stock
+  if (props.values.buyingPrice !== undefined) buyingPrice.value = props.values.buyingPrice
+  if (props.values.sellingPrice !== undefined) sellingPrice.value = props.values.sellingPrice
+}
+
+const resetForm = () => {
+  code.value = ''
+  name.value = ''
+  itemGroup_code.value = ''
+  uom.value = ''
+  infra_code.value = ''
+  stock.value = 0
+  buyingPrice.value = 0
+  sellingPrice.value = 0
+}
+
+function onSubmitForm() {
+  const formData: ItemFormData = {
+    code: code.value || '',
+    name: name.value || '',
+    itemGroup_code: itemGroup_code.value || '',
+    uom_code: uom.value || '',
+    infra_code: infra_code.value || '',
+    stock: Number(stock.value) || 0,
+    buyingPrice: Number(buyingPrice.value) || 0,
+    sellingPrice: Number(sellingPrice.value) || 0,
+  }
+  emit('submit', formData, resetForm)
+}
+
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
 </script>
 
 <template>
-  <form id="entry-form">
-    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
-      <div class="flex flex-col justify-between">
-        <Block>
-          <FieldGroup>
-            <Label>Nama</Label>
-            <Field>
-              <Input v-model="data.name" />
-            </Field>
-          </FieldGroup>
-          <FieldGroup>
-            <Label>Kode</Label>
-            <Field>
-              <Input v-model="data.code" />
-            </Field>
-          </FieldGroup>
-          <FieldGroup>
-            <Label>Item Group</Label>
-            <Field>
-              <Select :items="items" />
-            </Field>
-          </FieldGroup>
-          <FieldGroup>
-            <Label>UOM</Label>
-            <Field>
-              <Select :items="items" />
-            </Field>
-          </FieldGroup>
-          <FieldGroup>
-            <Label>Infra</Label>
-            <Field>
-              <Select :items="items" />
-            </Field>
-          </FieldGroup>
-          <FieldGroup>
-            <Label>Harga</Label>
-            <Field>
-              <Input v-model="data.price" />
-            </Field>
-          </FieldGroup>
-        </Block>
-      </div>
+  <form
+    id="form-item"
+    @submit.prevent
+  >
+    <Block
+      labelSize="thin"
+      class="!mb-2.5 !pt-0 xl:!mb-3"
+      :colCount="1"
+    >
+      <Cell>
+        <Label height="compact">Kode</Label>
+        <Field :errMessage="errors.code">
+          <Input
+            id="code"
+            v-model="code"
+            v-bind="codeAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Nama</Label>
+        <Field :errMessage="errors.name">
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Item Group</Label>
+        <Field :errMessage="errors.itemGroup_code">
+          <Select
+            id="itemGroup_code"
+            v-model="itemGroup_code"
+            icon-name="i-lucide-chevron-down"
+            placeholder="Pilih Item Group"
+            v-bind="itemGroup_codeAttrs"
+            :items="itemGroups"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">UOM</Label>
+        <Field :errMessage="errors.uom_code">
+          <Select
+            id="uom_code"
+            v-model="uom"
+            icon-name="i-lucide-chevron-down"
+            placeholder="Pilih satuan"
+            v-bind="uomAttrs"
+            :items="uoms"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell v-if="isShowInfra">
+        <Label height="compact">Infra</Label>
+        <Field :errMessage="errors.infra_code">
+          <Input
+            id="infra_code"
+            v-model="infra_code"
+            v-bind="infra_codeAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Stok</Label>
+        <Field :errMessage="errors.stock">
+          <Input
+            id="stock"
+            type="number"
+            v-model="stock"
+            v-bind="stockAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Harga Beli</Label>
+        <Field :errMessage="errors.buyingPrice">
+          <Input
+            id="buyingPrice"
+            type="number"
+            v-model="buyingPrice"
+            v-bind="buyingPriceAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Harga Jual</Label>
+        <Field :errMessage="errors.sellingPrice">
+          <Input
+            id="sellingPrice"
+            type="number"
+            v-model="sellingPrice"
+            v-bind="sellingPriceAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+    </Block>
+    <div class="my-2 flex justify-end gap-2 py-2">
+      <Button
+        type="button"
+        variant="secondary"
+        class="w-[120px]"
+        @click="onCancelForm"
+      >
+        Kembali
+      </Button>
+      <Button
+        v-if="!isReadonly"
+        type="button"
+        class="w-[120px]"
+        :disabled="isLoading || !meta.valid"
+        @click="onSubmitForm"
+      >
+        Simpan
+      </Button>
     </div>
   </form>
 </template>
diff --git a/app/components/app/item/list-cfg.ts b/app/components/app/item/list-cfg.ts
index c3db4f50..fc3e6770 100644
--- a/app/components/app/item/list-cfg.ts
+++ b/app/components/app/item/list-cfg.ts
@@ -3,30 +3,78 @@ import { defineAsyncComponent } from 'vue'
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
-const _doctorStatus = {
-  0: 'Tidak Aktif',
-  1: 'Aktif',
-}
-
 export const config: Config = {
-  cols: [{}, {}, { width: 50 }],
+  cols: [
+    { width: 100 },
+    { width: 100 },
+    { width: 100 },
+    { width: 100 },
+    { width: 100 },
+    { width: 100 },
+    { width: 100 },
+    { width: 100 },
+    { width: 50 },
+  ],
 
   headers: [
     [
       { label: 'Kode' },
       { label: 'Nama' },
+      { label: 'Item Group' },
+      { label: 'UOM' },
+      { label: 'Infra' },
+      { label: 'Stok' },
+      { label: 'Harga Beli' },
+      { label: 'Harga Jual' },
       { label: 'Aksi' },
     ],
   ],
 
-  keys: ['code', 'name', 'action'],
+  keys: ['code', 'name', 'itemGroup_code', 'uom_code', 'infra_code', 'stock', 'buyingPrice', 'sellingPrice', 'action'],
 
   delKeyNames: [
     { key: 'code', label: 'Kode' },
     { key: 'name', label: 'Nama' },
   ],
 
-  parses: {},
+  parses: {
+    itemGroup_code: (rec: unknown): unknown => {
+      const recX = rec as any
+      return recX.itemGroup_code || '-'
+    },
+    uom_code: (rec: unknown): unknown => {
+      const recX = rec as any
+      return recX.uom?.name || '-'
+    },
+    infra_code: (rec: unknown): unknown => {
+      const recX = rec as any
+      return recX.infra_code || '-'
+    },
+    stock: (rec: unknown): unknown => {
+      const recX = rec as any
+      const value = recX.stock
+      if (value === null || value === undefined) {
+        return '-'
+      }
+      return value
+    },
+    buyingPrice: (rec: unknown): unknown => {
+      const recX = rec as any
+      const value = recX.buyingPrice
+      if (value === null || value === undefined) {
+        return '-'
+      }
+      return value
+    },
+    sellingPrice: (rec: unknown): unknown => {
+      const recX = rec as any
+      const value = recX.sellingPrice
+      if (value === null || value === undefined) {
+        return '-'
+      }
+      return value
+    },
+  },
 
   components: {
     action(rec, idx) {
@@ -39,9 +87,5 @@ export const config: Config = {
     },
   },
 
-  htmls: {
-    patient_address(_rec) {
-      return '-'
-    },
-  },
+  htmls: {},
 }
diff --git a/app/components/app/item/list.vue b/app/components/app/item/list.vue
index 96697bde..2f7908cb 100644
--- a/app/components/app/item/list.vue
+++ b/app/components/app/item/list.vue
@@ -1,14 +1,39 @@
 <script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
 import { config } from './list-cfg'
 
-defineProps<{
+interface Props {
   data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
 }>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
 </script>
 
 <template>
-  <PubMyUiDataTable
-    v-bind="config"
-    :rows="data"
-  />
+  <div class="space-y-4">
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+    <PaginationView
+      :pagination-meta="paginationMeta"
+      @page-change="handlePageChange"
+    />
+  </div>
 </template>
diff --git a/app/components/app/item/picker.vue b/app/components/app/item/picker.vue
deleted file mode 100644
index e69de29b..00000000
diff --git a/app/components/app/item/search.vue b/app/components/app/item/search.vue
deleted file mode 100644
index e69de29b..00000000
diff --git a/app/components/app/item/status-badge.vue b/app/components/app/item/status-badge.vue
deleted file mode 100644
index 32cdfbca..00000000
--- a/app/components/app/item/status-badge.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<script setup lang="ts">
-import { Badge } from '~/components/pub/ui/badge'
-
-const props = defineProps<{
-  rec: any
-  idx?: number
-}>()
-
-const doctorStatus = {
-  0: 'Tidak Aktif',
-  1: 'Aktif',
-}
-
-const statusText = computed(() => {
-  return doctorStatus[props.rec.status_code as keyof typeof doctorStatus]
-})
-
-const badgeVariant = computed(() => {
-  return props.rec.status_code === 1 ? 'default' : 'destructive'
-})
-</script>
-
-<template>
-  <div class="flex justify-center">
-    <Badge :variant="badgeVariant">
-      {{ statusText }}
-    </Badge>
-  </div>
-</template>
diff --git a/app/components/app/mcu-order/detail.vue b/app/components/app/mcu-order/detail.vue
index 8d86a98b..59cd5595 100644
--- a/app/components/app/mcu-order/detail.vue
+++ b/app/components/app/mcu-order/detail.vue
@@ -13,20 +13,33 @@ const props = defineProps<{
       Order {{ data?.createdAt?.substring(0, 10) }} - {{ data?.status_code }}
     </div>
     <div class="max-w-[1000px]">
-      <DE.Block mode="preview" :col-count=5 class="!mb-3">
+      <DE.Block :col-count=5 class="!mb-3" :cell-flex="false">
         <DE.Cell :col-span="2">
-          <DE.Label class="font-semibold">DPJP</DE.Label>
+          <DE.Label>DPJP</DE.Label>
           <DE.Field>
-            {{  data?.doctor?.employee?.person?.name || '.........' }}
+            <Input :value="data?.doctor?.employee?.person?.name || '.........'" readonly />
           </DE.Field>
         </DE.Cell>
         <DE.Cell></DE.Cell>
         <DE.Cell :col-span="2">
-          <DE.Label class="font-semibold">PPDS</DE.Label>
+          <DE.Label>PPDS</DE.Label>
           <DE.Field>
-            ...........
+            <Input :value="'.........'" readonly />
+          </DE.Field>
+        </DE.Cell>
+        <DE.Cell :col-span="2">
+          <DE.Label>Pemeriksaan Ke</DE.Label>
+          <DE.Field>
+            <Input readonly />
+          </DE.Field>
+        </DE.Cell>
+        <DE.Cell></DE.Cell>
+        <DE.Cell :col-span="2">
+          <DE.Label>Temperatur Aksiler</DE.Label>
+          <DE.Field>
+            <Input />
           </DE.Field>
         </DE.Cell>
       </DE.Block>
     </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/app/components/app/mcu-order/entry-for-ap.vue b/app/components/app/mcu-order/entry-for-ap.vue
new file mode 100644
index 00000000..80d0f7df
--- /dev/null
+++ b/app/components/app/mcu-order/entry-for-ap.vue
@@ -0,0 +1,157 @@
+<script setup lang="ts">
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import * as Cbx from '~/components/pub/my-ui/checkboxes'
+import { fi } from 'date-fns/locale';
+
+const substances = [
+  { value: 'biopsi', label: 'Biopsi'},
+  { value: 'operation', label: 'Operasi' },
+  { value: 'scraping', label: 'Kerokan' },
+  { value: 'cytology', label: 'Sitologi' },
+  { value: 'fnab', label: 'FNAB' },
+]
+
+const fications = [
+  { value: 'pa-formaline-10p', label: 'pA. Formalin 10%' },
+  { value: 'spt-alcohol-70p', label: 'Sputum Alkohol 70%' },
+  { value: 'urn-alcohol-50p', label: 'Urine Alkohol 50%' },
+  { value: 'vgn-smr-alcohol-95p', label: 'Vagibal Smear 95%' },
+]
+
+const prevAp = [
+  { value: 'clinical', label: 'Klinik' },
+  { value: 'ro', label: 'RO' },
+  { value: 'clinical-pat', label: 'Pat. Klinik' },
+  { value: 'operation', label: 'Operasi' },
+  { value: 'necropsy', label: 'Nekropsi' },
+]
+
+
+
+</script>
+
+<template>
+  <div class="header">Data Order</div>
+  <DE.Block :col-count="3" :cell-flex="false">
+    <DE.Cell>
+      <DE.Label>Tgl. Order</DE.Label>
+      <DE.Field>
+        <Input readonly />
+      </DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+      <DE.Label>DPJP</DE.Label>
+      <DE.Field>
+        <Input readonly />
+      </DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+      <DE.Label>PPDS</DE.Label>
+      <DE.Field>
+        <Input readonly />
+      </DE.Field>
+    </DE.Cell>
+  </DE.Block>
+
+  <div class="header">Bahan</div>
+  <DE.Block :cell-flex="false">
+    <DE.Cell>
+      <DE.Field>
+        <Cbx.Checkboxes :items="substances" :use-flex="true" />
+      </DE.Field>
+    </DE.Cell>
+  </DE.Block>
+
+  <div class="header">Fiksasi</div>
+  <DE.Block :cell-flex="false">
+    <DE.Cell>
+      <DE.Field>
+        <Cbx.Checkboxes :items="fications" :use-flex="true" />
+      </DE.Field>
+    </DE.Cell>
+  </DE.Block>
+
+  <div class="header">Data Klinis Pasien</div>
+  <DE.Block :col-count="6" :cell-flex="false">
+    <DE.Cell :col-span="3">
+      <DE.Label>Lokalisasi</DE.Label>
+      <DE.Field>
+        <Textarea />
+      </DE.Field>
+    </DE.Cell>
+    <DE.Cell :col-span="3">
+      <DE.Label>Diagnosa Klinik</DE.Label>
+      <DE.Field>
+        <Textarea />
+      </DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+      <DE.Label>Stadium T</DE.Label>
+      <DE.Field>
+        <Input />
+      </DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+      <DE.Label>Stadium M</DE.Label>
+      <DE.Field>
+        <Input />
+      </DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+      <DE.Label>Stadium N</DE.Label>
+      <DE.Field>
+        <Input />
+      </DE.Field>
+    </DE.Cell>
+    <div class=""></div>
+    <DE.Cell :col-span="3">
+      <DE.Label>Keterangan Klinik</DE.Label>
+      <DE.Field>
+        <Textarea rows="2" />
+      </DE.Field>
+    </DE.Cell>
+  </DE.Block>
+
+  <div class="header">Riwayat Pemeriksaan</div>
+  <DE.Block :col-count="2" :cell-flex="false">
+    <DE.Cell>
+      <DE.Label>Riwayat Dulu</DE.Label>
+      <DE.Field>
+        <Textarea />
+      </DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+      <DE.Label>Riwayat Sekarang</DE.Label>
+      <DE.Field>
+        <Textarea />
+      </DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+      <DE.Label>Pemeriksaan PA Sebelumnya</DE.Label>
+      <DE.Field>
+        <Cbx.Checkboxes :items="prevAp" :use-flex="true" />
+      </DE.Field>
+    </DE.Cell>
+    <div></div>
+    <DE.Cell>
+      <DE.Label>Keterangan PA Sebelumnya</DE.Label>
+      <DE.Field>
+        <Textarea />
+      </DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+      <DE.Label>Pemeriksaan Penunjang</DE.Label>
+      <DE.Field>
+        <Textarea />
+      </DE.Field>
+    </DE.Cell>
+
+  </DE.Block>
+
+</template>
+
+<style>
+.header {
+  @apply mb-1.5 text-sm 2xl:text-base font-semibold
+}
+</style>
diff --git a/app/components/app/person-contact/entry-form.vue b/app/components/app/person-contact/entry-form.vue
index 708f3fdb..1ef212b7 100644
--- a/app/components/app/person-contact/entry-form.vue
+++ b/app/components/app/person-contact/entry-form.vue
@@ -41,8 +41,11 @@ defineExpose({
 <template>
   <form @submit.prevent>
     <div>
-      <p class="text-md mb-2 mt-1 font-semibold">
-        {{ title }}
+      <p
+        v-if="props.title"
+        class="mb-2 text-sm font-semibold 2xl:mb-3 2xl:text-base"
+      >
+        {{ props.title || 'Kontak Pasien' }}
       </p>
     </div>
     <div class="mb-5 space-y-4">
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/app/therapy-protocol/picker-dialog/arrangement-procedure/procedure-list.vue b/app/components/app/therapy-protocol/picker-dialog/arrangement-procedure/procedure-list.vue
index e4836c7c..fabb0463 100644
--- a/app/components/app/therapy-protocol/picker-dialog/arrangement-procedure/procedure-list.vue
+++ b/app/components/app/therapy-protocol/picker-dialog/arrangement-procedure/procedure-list.vue
@@ -45,6 +45,7 @@ const {
   handleSearch,
   fetchData: getItemList,
 } = usePaginatedList({
+  syncToUrl: false,
   fetchFn: async (params: any) => {
     const result = await getList({
       search: params.search,
@@ -102,19 +103,23 @@ onMounted(async () => {
 </script>
 
 <template>
-  <Dialog v-model:open="isModalOpen" title="" size="xl">
-  <Header
-    v-model="searchInput"
-    :prep="headerPrep"
-    :ref-search-nav="headerPrep.refSearchNav"
-    @search="handleSearch"
-    class=""
-  />
-  <AppProcedureSrcList
-    :table-config="config"
-    :data="data"
-    :pagination-meta="paginationMeta"
-    @page-change="handlePageChange"
-  />
+  <Dialog
+    v-model:open="isModalOpen"
+    title=""
+    size="xl"
+  >
+    <Header
+      v-model="searchInput"
+      :prep="headerPrep"
+      :ref-search-nav="headerPrep.refSearchNav"
+      @search="handleSearch"
+      class=""
+    />
+    <AppProcedureSrcList
+      :table-config="config"
+      :data="data"
+      :pagination-meta="paginationMeta"
+      @page-change="handlePageChange"
+    />
   </Dialog>
 </template>
diff --git a/app/components/app/therapy-protocol/picker-dialog/arrangement-procedure/procedure-picker.vue b/app/components/app/therapy-protocol/picker-dialog/arrangement-procedure/procedure-picker.vue
index 4a44a40f..11a2b514 100644
--- a/app/components/app/therapy-protocol/picker-dialog/arrangement-procedure/procedure-picker.vue
+++ b/app/components/app/therapy-protocol/picker-dialog/arrangement-procedure/procedure-picker.vue
@@ -1,62 +1,143 @@
 <script setup lang="ts">
-import ProcedureListDialog from './procedure-list.vue'
-import type { FormErrors } from '~/types/error'
-import { toTypedSchema } from '@vee-validate/zod'
-import { Form } from '~/components/pub/ui/form'
-import { FieldArray } from 'vee-validate'
-import InputBase from '~/components/pub/my-ui/form/input-base.vue'
-import * as DE from '~/components/pub/my-ui/doc-entry'
-import TextAreaInput from '~/components/pub/my-ui/form/text-area-input.vue'
+// Types
+import { type ProcedureSrc } from '~/models/procedure-src'
+
+// Helper
 import { cn } from '~/lib/utils'
+
+// Components
+import { FieldArray } from 'vee-validate'
+import { ButtonAction } from '~/components/pub/my-ui/form'
 import TableHeader from '~/components/pub/ui/table/TableHeader.vue'
-import { is } from 'date-fns/locale'
+import ProcedureListDialog from './procedure-list.vue'
 
 interface Props {
   fieldName: string
   title: string
+  subTitle?: string
+
+  // State UI (Loading / Disabled)
+  isReadonly?: boolean
+
+  // Data Architecture Switch
+  // 'form' = Pakai Vee-Validate (Parent wajib useForm)
+  // 'preview' = Pakai Props sampleItems (Parent bebas)
+  mode?: 'form' | 'preview'
+
+  // Data Source untuk mode 'preview' (atau initial data)
+  sampleItems?: ProcedureSrc[]
 }
-const props = defineProps<Props>()
+
+// Set default mode ke 'form' agar backward compatible
+const props = withDefaults(defineProps<Props>(), {
+  mode: 'form',
+  isReadonly: false,
+  sampleItems: () => [],
+})
 
 const isProcedurePickerDialogOpen = ref<boolean>(false)
 provide(`isProcedurePickerDialogOpen`, isProcedurePickerDialogOpen)
 </script>
 
 <template>
-  <div class="">
-    <div class="mb-2 flex items-center justify-between">
-      <h1 class="mb-2 font-medium">{{ title }}</h1>
-      <Button @click="isProcedurePickerDialogOpen = true" size="xs" variant="outline"
-        class="text-orange-400 border-orange-400 bg-transparent">
-        <Icon name="i-lucide-search" class="h-4 w-4 align-middle transition-colors" />
-        Pilih Diagnosis
-      </Button>
+  <div class="mb-2 flex items-center justify-between">
+    <p class="mb-2 font-medium">{{ title }}</p>
+
+    <ButtonAction
+      v-if="mode === 'form' && !isReadonly"
+      preset="add"
+      title="Tambah Item"
+      icon="i-lucide-search"
+      :label="subTitle || 'Pilih Diagnosis'"
+      :full-width-mobile="true"
+      @click="isProcedurePickerDialogOpen = true"
+    />
+  </div>
+
+  <FieldArray
+    v-if="mode === 'form'"
+    v-slot="{ fields, push, remove }"
+    :name="props.fieldName"
+  >
+    <ProcedureListDialog :process-fn="push" />
+
+    <div class="overflow-hidden rounded-lg border border-gray-200">
+      <Table>
+        <TableHeader class="bg-gray-100">
+          <TableRow>
+            <TableHead class="w-1/2">Prosedur</TableHead>
+            <TableHead class="w-1/2">ICD-X</TableHead>
+            <TableHead class="w-[50px]">Action</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <TableRow v-if="fields.length === 0">
+            <TableCell
+              colspan="3"
+              class="py-4 text-center text-muted-foreground"
+            >
+              Belum ada data dipilih.
+            </TableCell>
+          </TableRow>
+
+          <TableRow
+            v-for="(field, idx) in fields"
+            :key="field.key"
+          >
+            <TableCell :class="cn(isReadonly && 'opacity-50')">
+              {{ (field.value as ProcedureSrc)?.name }}
+            </TableCell>
+            <TableCell :class="cn(isReadonly && 'opacity-50')">
+              {{ (field.value as ProcedureSrc)?.code }}
+            </TableCell>
+            <TableCell>
+              <ButtonAction
+                v-if="!isReadonly"
+                preset="delete"
+                icon-only
+                :title="`Hapus ${(field.value as ProcedureSrc)?.name}`"
+                @click="remove(idx)"
+              />
+            </TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
     </div>
+  </FieldArray>
 
-    <FieldArray v-slot="{ fields, push, remove }" :name="props.fieldName">
-      <ProcedureListDialog :process-fn="push" />
+  <div
+    v-else
+    class="overflow-hidden rounded-lg border border-gray-200"
+  >
+    <Table>
+      <TableHeader class="bg-gray-100">
+        <TableRow>
+          <TableHead class="w-1/2">Prosedur</TableHead>
+          <TableHead class="w-1/2">ICD-X</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <TableRow v-if="sampleItems.length === 0">
+          <TableCell
+            colspan="2"
+            class="py-4 text-center text-muted-foreground"
+          >
+            Tidak ada data.
+          </TableCell>
+        </TableRow>
 
-      <div class="border border-gray-200 rounded-lg overflow-hidden">
-        <Table>
-          <TableHeader class="bg-gray-100">
-            <TableRow>
-              <TableHead class="w-1/2">Prosedur</TableHead>
-              <TableHead class="w-1/2">ICD-X</TableHead>
-              <TableHead class="w-1/2">Action</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            <TableRow v-for="(field, idx) in fields" :key="idx">
-              <TableCell class="">{{ field.value?.name }}</TableCell>
-              <TableCell class="">{{ field.value?.code }}</TableCell>
-              <TableCell class="">
-                <Button type="button" variant="destructive" size="sm" @click="remove(idx)">
-                  <Icon name="i-lucide-trash-2" class="h-4 w-4" />
-                </Button>
-              </TableCell>
-            </TableRow>
-          </TableBody>
-        </Table>
-      </div>
-    </FieldArray>
+        <TableRow
+          v-for="item in sampleItems"
+          :key="item.code || item.id"
+        >
+          <TableCell class="text-muted-foreground">
+            {{ item.name }}
+          </TableCell>
+          <TableCell class="text-muted-foreground">
+            {{ item.code }}
+          </TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
   </div>
 </template>
diff --git a/app/components/content/action-report/entry.vue b/app/components/content/action-report/entry.vue
new file mode 100644
index 00000000..a127b804
--- /dev/null
+++ b/app/components/content/action-report/entry.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import List from './list.vue'
+import Form from './form.vue'
+import View from './view.vue'
+
+// Models
+import type { Encounter } from '~/models/encounter'
+
+// Props
+interface Props {
+  encounter: Encounter
+}
+
+const props = defineProps<Props>()
+
+const { mode, goToEntry, goToView } = useQueryCRUDMode('mode')
+</script>
+
+<template>
+  <div>
+    <List
+      v-if="mode === 'list'"
+      :encounter="props.encounter"
+      @add="goToEntry"
+      @edit="goToEntry({ fromView: false })"
+      @view="goToView"
+    />
+    <View
+      v-else-if="mode === 'view'"
+      :encounter="props.encounter"
+    />
+    <Form v-else />
+  </div>
+</template>
diff --git a/app/components/content/action-report/form.vue b/app/components/content/action-report/form.vue
new file mode 100644
index 00000000..e6c30c73
--- /dev/null
+++ b/app/components/content/action-report/form.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import mockData from './sample'
+
+// type
+import { genDoctor, type Doctor } from '~/models/doctor'
+import type { ActionReportFormData } from '~/schemas/action-report.schema'
+
+// components
+import { toast } from '~/components/pub/ui/toast'
+import AppActionReportEntry from '~/components/app/action-report/entry-form.vue'
+import ArrangementProcedurePicker from '~/components/app/therapy-protocol/picker-dialog/arrangement-procedure/procedure-picker.vue'
+
+// states
+const route = useRoute()
+const { mode, goBack } = useQueryCRUDMode('mode')
+const { recordId } = useQueryCRUDRecordId('record-id')
+const reportData = ref<ActionReportFormData>({} as unknown as ActionReportFormData)
+const doctors = ref<Doctor[]>([])
+const isLoading = ref<boolean>(false)
+
+// TODO: dummy data
+;(() => {
+  doctors.value = [genDoctor()]
+})()
+
+const entryMode = ref<'add' | 'edit' | 'view'>('add')
+const isDataReady = ref(false)
+
+onMounted(async () => {
+  if (mode.value === 'entry' && recordId.value) {
+    entryMode.value = 'edit'
+    await loadEntryForEdit(+recordId.value)
+  } else {
+    // Untuk mode 'add', langsung set ready
+    isDataReady.value = true
+  }
+})
+
+// TODO: map data
+async function loadEntryForEdit(id: number | string) {
+  isLoading.value = true
+  const result = mockData
+  reportData.value = result as ActionReportFormData
+  isLoading.value = false
+  isDataReady.value = true
+}
+</script>
+
+<template>
+  <AppActionReportEntry
+    v-if="isDataReady"
+    :isLoading="isLoading"
+    :mode="entryMode"
+    @submit="(val) => console.log(val)"
+    @back="goBack"
+    @error="
+      (err: Error) => {
+        toast({
+          title: 'Terjadi Kesalahan',
+          description: err.message,
+          variant: 'destructive',
+        })
+      }
+    "
+    :doctors="doctors"
+    :initialValues="reportData"
+  >
+    <template #procedures>
+      <ArrangementProcedurePicker
+        field-name="procedures"
+        title="Tindakan Operatif/Non-Operatif Lain"
+        sub-title="Pilih Prosedur"
+      />
+    </template>
+  </AppActionReportEntry>
+  <div
+    v-else
+    class="flex items-center justify-center p-8"
+  >
+    <p class="text-muted-foreground">Memuat data...</p>
+  </div>
+</template>
diff --git a/app/components/content/action-report/list.vue b/app/components/content/action-report/list.vue
new file mode 100644
index 00000000..13e2825b
--- /dev/null
+++ b/app/components/content/action-report/list.vue
@@ -0,0 +1,276 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import AppActionReportList from '~/components/app/action-report/list.vue'
+import AppActionReportListHistory from '~/components/app/action-report/list-history.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import { ButtonAction } from '~/components/pub/my-ui/form'
+
+// config
+import { config } from '~/components/app/action-report/list.cfg'
+
+// types
+import { ActionEvents } from '~/components/pub/my-ui/data/types'
+import type { Encounter } from '~/models/encounter'
+
+// Samples
+import { sampleRows, type ActionReportData } from '~/components/app/action-report/sample'
+import sampleReport from './sample'
+
+// helpers
+import { toast } from '~/components/pub/ui/toast'
+
+// Props
+interface Props {
+  encounter: Encounter
+}
+const props = defineProps<Props>()
+const emits = defineEmits<{
+  (e: 'add'): void
+  (e: 'edit', id: number | string): void
+  (e: 'view', id: number | string): void
+}>()
+
+// states
+const router = useRouter()
+const route = useRoute()
+const { goToEntry, backToList } = useQueryCRUDMode('mode')
+const title = ref('')
+const search = ref('')
+const dateFrom = ref('')
+const dateTo = ref('')
+const isDialogOpen = ref<boolean>(false)
+const isLoading = ref<boolean>(false)
+
+// #region mock
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/consultation.handler'
+// #endregion
+
+// filter + pencarian sederhana (client-side)
+const filtered = computed(() => {
+  const q = search.value.trim().toLowerCase()
+  return sampleRows.filter((r: ActionReportData) => {
+    if (q) {
+      return r.nama.toLowerCase().includes(q) || r.noRm.toLowerCase().includes(q) || r.dokter.toLowerCase().includes(q)
+    }
+    return true
+  })
+})
+
+const goEdit = (id: number | string) => {
+  router.replace({
+    path: route.path,
+    query: {
+      ...route.query,
+      mode: 'entry',
+      'record-id': id,
+    },
+  })
+}
+
+const goView = (id: number | string) => {
+  router.replace({
+    path: route.path,
+    query: {
+      ...route.query,
+      mode: 'view',
+      'record-id': id,
+    },
+  })
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+async function onGetDetail(id: number | string) {
+  isLoading.value = true
+  const res = sampleReport
+  recItem.value = res
+  console.log(res)
+  isLoading.value = false
+}
+
+// #region watcher
+watch([recId, recAction], (newVal) => {
+  const [id, action] = newVal
+
+  // Guard: jangan proses jika id = 0 atau action kosong
+  if (!id || !action) return
+
+  switch (action) {
+    case ActionEvents.showDetail:
+      // onGetDetail(recId.value)
+      goView(id)
+      title.value = 'Detail Konsultasi'
+      break
+    case ActionEvents.showEdit:
+      goEdit(id)
+      title.value = 'Edit Konsultasi'
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+
+  // Reset KEDUANYA menggunakan nextTick agar tidak trigger watcher lagi
+  nextTick(() => {
+    recId.value = 0
+    recAction.value = ''
+  })
+})
+// #endregion
+</script>
+
+<template>
+  <div class="mx-auto max-w-full">
+    <div class="border-b p-6">
+      <h1 class="text-2xl font-semibold">Laporan Tindakan</h1>
+      <p class="mt-1 text-sm text-gray-500">Infomasi laporan tindakan pasien</p>
+    </div>
+
+    <div class="flex flex-wrap items-center gap-3 border-b p-4">
+      <div class="flex items-center gap-2">
+        <input
+          v-model="search"
+          placeholder="Cari Nama / No.RM"
+          class="w-64 rounded border px-3 py-2"
+        />
+      </div>
+
+      <div class="flex items-center gap-2">
+        <input
+          v-model="dateFrom"
+          type="date"
+          class="rounded border px-3 py-2"
+        />
+        <span class="text-sm text-gray-500">-</span>
+        <input
+          v-model="dateTo"
+          type="date"
+          class="rounded border px-3 py-2"
+        />
+        <ButtonAction
+          preset="custom"
+          title="Filter List Laporan Tindakan"
+          label="Filter"
+          icon="i-lucide-filter"
+          @click="
+            () => {
+              isDialogOpen = true
+            }
+          "
+        />
+      </div>
+
+      <div class="ml-auto flex items-center gap-2">
+        <ButtonAction
+          preset="custom"
+          title="Riwayat Laporan Tindakan"
+          icon="i-lucide-history"
+          label="Riwayat Laporan Tindakan"
+          @click="
+            () => {
+              isDialogOpen = true
+            }
+          "
+        />
+        <ButtonAction
+          preset="add"
+          title="Tambah Data Laporan Tindakan"
+          icon="i-lucide-plus"
+          label="Tambah Data"
+          @click="
+            () => {
+              goToEntry()
+            }
+          "
+        />
+      </div>
+    </div>
+
+    <div class="overflow-x-auto p-4">
+      <AppActionReportList
+        :data="filtered"
+        :pagination-meta="{
+          recordCount: 2,
+          page: 1,
+          pageSize: 10,
+          totalPage: 1,
+          hasPrev: false,
+          hasNext: false,
+        }"
+      />
+    </div>
+  </div>
+
+  <Dialog
+    v-model:open="isDialogOpen"
+    title="Arsip Riwayat Laporan Tindakan"
+    size="2xl"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        isDialogOpen = value
+      }
+    "
+  >
+    <AppActionReportListHistory
+      :data="filtered"
+      :pagination-meta="{
+        recordCount: 2,
+        page: 1,
+        pageSize: 10,
+        totalPage: 1,
+        hasPrev: false,
+        hasNext: false,
+      }"
+    />
+  </Dialog>
+
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="
+      () =>
+        handleActionRemove(
+          recItem.id,
+          () => {
+            router.go(0)
+          },
+          toast,
+        )
+    "
+    @cancel=""
+  >
+    <template #default="{ record }">
+      {{ console.log(JSON.stringify(record)) }}
+      <div class="space-y-1 text-sm">
+        <p
+          v-for="field in config.delKeyNames"
+          :key="field.key"
+          :v-if="record?.[field.key]"
+        >
+          <span class="font-semibold">{{ field.label }}:</span>
+          {{ record[field.key] }}
+        </p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>
diff --git a/app/components/content/action-report/sample.ts b/app/components/content/action-report/sample.ts
new file mode 100644
index 00000000..f368eea6
--- /dev/null
+++ b/app/components/content/action-report/sample.ts
@@ -0,0 +1,68 @@
+export default {
+  operatorTeam: {
+    dpjpId: -1,
+    operatorName: 'Julian Alvarez',
+    assistantOperatorName: 'Arda Guller',
+    instrumentNurseName: 'Kenan Yildiz',
+    surgeryDate: '2025-11-13T14:29:00',
+    actionDiagnosis: 'Sprei gratisnya mana',
+  },
+  procedures: [
+    {
+      id: -1,
+      name: 'Ndase mumet',
+      code: 'CX1',
+    },
+  ],
+  operationExecution: {
+    surgeryType: 'khusus',
+    billingCode: 'local',
+    operationSystem: 'cito',
+    surgeryCleanType: 'kotor',
+    surgeryNumber: 'retry',
+    birthPlaceNote: 'out3',
+    personWeight: 100,
+    operationDescription: 'asdsadsa1',
+    birthRemark: 'lahir_hidup',
+
+    operationStartAt: '2025-11-13T14:29:00',
+    operationEndAt: '2025-11-13T17:29:00',
+
+    anesthesiaStartAt: '2025-11-13T11:29:00',
+    anesthesiaEndAt: '2025-11-13T18:29:00',
+  },
+  bloodInput: {
+    type: 'tc',
+    amount: {
+      prc: null,
+      wb: null,
+      ffp: null,
+      tc: 3243324,
+    },
+  },
+  implant: {
+    brand: 'Samsung',
+    name: 'S.Komedi',
+    companionName: 'When ya',
+  },
+  specimen: {
+    destination: 'pa',
+  },
+  tissueNotes: [
+    {
+      note: 'Anjai',
+    },
+    {
+      note: 'Ciee Kaget',
+    },
+    {
+      note: 'Baper',
+    },
+    {
+      note: 'Saltink weeh',
+    },
+    {
+      note: 'Kaburrr',
+    },
+  ],
+}
diff --git a/app/components/content/action-report/view.vue b/app/components/content/action-report/view.vue
new file mode 100644
index 00000000..97508a22
--- /dev/null
+++ b/app/components/content/action-report/view.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import mockData from './sample'
+
+// types
+import { type ActionReportFormData } from '~/schemas/action-report.schema'
+import { type Encounter } from '~/models/encounter'
+
+// Components
+import AppActionReportPreview from '~/components/app/action-report/preview.vue'
+import type { HeaderPrep } from '~/components/pub/my-ui/data/types'
+
+// #region Props & Emits
+const router = useRouter()
+const { backToList, goToEntry } = useQueryCRUDMode('mode')
+const { recordId } = useQueryCRUDRecordId('record-id')
+
+function onEditFromView() {
+  goToEntry({ fromView: true })
+}
+
+const props = defineProps<{
+  encounter: Encounter
+}>()
+
+// #endregion
+
+// #region State & Computed
+const reportData = ref<ActionReportFormData | null>(null)
+
+const headerPrep: HeaderPrep = {
+  title: 'Detail Laporan Tindakan',
+  icon: 'i-lucide-stethoscope',
+}
+
+// #endregion
+
+// #region Lifecycle Hooks
+onMounted(async () => {
+  reportData.value = mockData as unknown as ActionReportFormData
+})
+// #endregion
+
+// #region Functions
+// #endregion region
+
+// #region Utilities & event handlers
+function onEdit() {
+  router.push({
+    name: 'action-report-id-edit',
+    params: { id: 100 },
+  })
+}
+function onBack() {}
+// #endregion
+
+// #region Watchers
+// #endregion
+</script>
+
+<template>
+  <AppActionReportPreview
+    v-if="reportData"
+    :data="reportData"
+    @back="backToList"
+    @edit="onEditFromView"
+  />
+</template>
diff --git a/app/components/content/ap-lab-order/entry.vue b/app/components/content/ap-lab-order/entry.vue
new file mode 100644
index 00000000..84349b70
--- /dev/null
+++ b/app/components/content/ap-lab-order/entry.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import Nav from '~/components/pub/my-ui/nav-footer/ba-de-su.vue'
+import NavOk from '~/components/pub/my-ui/nav-footer/ok.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+
+import { useQueryCRUDMode } from '~/composables/useQueryCRUD'
+import { type HeaderPrep } from '~/components/pub/my-ui/data/types'
+
+// mcu src category
+import ScrCategorySwitcher from '~/components/app/mcu-src-category/switcher.vue'
+import { getList as getMcuCategoryList } from '~/services/mcu-src-category.service'
+
+// mcu src
+import { type McuSrc } from '~/models/mcu-src'
+import { getList as getMcuSrcList } from '~/services/mcu-src.service'
+import McuSrcPicker from '~/components/app/mcu-src/picker-accordion.vue'
+
+// mcu order
+import { getDetail } from '~/services/mcu-order.service'
+import Detail from '~/components/app/mcu-order/detail.vue'
+
+// mcu order item, manually not using composable
+import {
+  getList as getMcuOrderItemList,
+  create as createMcuOrderItem,
+  remove as removeMcuOrderItem,
+} from '~/services/mcu-order-item.service'
+import { type McuOrderItem } from '~/models/mcu-order-item'
+import Entry from '~/components/app/mcu-order/entry-for-ap.vue'
+
+// props
+const props = defineProps<{
+  encounter_id: number
+}>()
+
+// declaration & flows
+
+// MCU Order
+const { getQueryParam } = useQueryParam()
+const id = getQueryParam('id')
+const dataRes = await getDetail(
+  typeof id === 'string' ? parseInt(id) : 0,
+  { includes: 'encounter,doctor,doctor-employee,doctor-employee-person' }
+)
+const data = dataRes.body?.data
+
+// MCU Sources
+const { backToList } = useQueryCRUDMode()
+
+const headerPrep: HeaderPrep = {
+  title: 'Entry Order LAB PA',
+  icon: 'i-lucide-box',
+}
+
+function navClick(type: 'back' | 'delete' | 'draft' | 'submit') {
+  if (type === 'back') {
+    backToList()
+  }
+}
+
+</script>
+
+<template>
+  <Header
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    class="mb-4 xl:mb-5"
+  />
+
+  <Entry />
+  <Separator class="my-5" />
+
+  <div class="w-full flex justify-center">
+    <Nav @click="navClick" />
+  </div>
+</template>
diff --git a/app/components/content/ap-lab-order/list.vue b/app/components/content/ap-lab-order/list.vue
new file mode 100644
index 00000000..b04cf7e5
--- /dev/null
+++ b/app/components/content/ap-lab-order/list.vue
@@ -0,0 +1,159 @@
+<script setup lang="ts">
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  handleActionSave,
+  handleActionRemove,
+} from '~/handlers/mcu-order.handler'
+
+// Apps
+import { getList, getDetail } from '~/services/mcu-order.service'
+import List from '~/components/app/mcu-order/list.vue'
+import type { McuOrder } from '~/models/mcu-order'
+
+const route = useRoute()
+const { setQueryParams } = useQueryParam()
+const { crudQueryParams } = useQueryCRUD()
+
+const title = ref('')
+
+const plainEid = route.params.id
+const encounter_id = (plainEid && typeof plainEid == 'string') ? parseInt(plainEid) : 0 // here the
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getMyList,
+} = usePaginatedList<McuOrder>({
+  fetchFn: async ({ page, search }) => {
+    const result = await getList({
+      search,
+      page,
+      'scope-code': "ap-lab",
+      'encounter-id': encounter_id,
+      includes: 'doctor,doctor-employee,doctor-employee-person',
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'mcu-order'
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Order Lab PA',
+  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: () => {
+      recItem.value = null
+      recId.value = 0
+      crudQueryParams.value = { mode: 'entry', recordId: undefined }
+    },
+  },
+}
+
+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, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getMyDetail(recId.value)
+      title.value = 'Detail Order Lab PK'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getMyDetail(recId.value)
+      title.value = 'Edit Order Lab PK'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+watch([isFormEntryDialogOpen], async () => {
+})
+
+onMounted(async () => {
+})
+
+function cancel(data: McuOrder) {
+  recId.value = data.id
+  recItem.value = data
+  isRecordConfirmationOpen.value = true
+}
+
+function edit(data: McuOrder) {
+  setQueryParams({
+    'mode': 'entry',
+    'id': data.id.toString()
+  })
+  recItem.value = data
+}
+
+function submit(data: McuOrder) {
+}
+</script>
+
+<template>
+  <Header :prep="{ ...headerPrep }" />
+
+  <List
+    v-if="!isLoading.dataListLoading"
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @cancel="cancel"
+    @edit="edit"
+    @submit="submit"
+  />
+
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getMyList, toast)"
+    @cancel=""
+  />
+</template>
diff --git a/app/components/content/ap-lab-order/main.vue b/app/components/content/ap-lab-order/main.vue
new file mode 100644
index 00000000..033d093f
--- /dev/null
+++ b/app/components/content/ap-lab-order/main.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+//
+import List from './list.vue'
+import Entry from './entry.vue'
+
+const props = defineProps<{
+  encounter_id: number
+}>()
+
+const { mode } = useQueryCRUDMode()
+</script>
+
+<template>
+  <List v-if="mode === 'list'" :encounter_id="encounter_id" />
+  <Entry v-else :encounter_id="encounter_id" />
+</template>
diff --git a/app/components/content/assessment-education/entry.vue b/app/components/content/assessment-education/entry.vue
new file mode 100644
index 00000000..a127b804
--- /dev/null
+++ b/app/components/content/assessment-education/entry.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import List from './list.vue'
+import Form from './form.vue'
+import View from './view.vue'
+
+// Models
+import type { Encounter } from '~/models/encounter'
+
+// Props
+interface Props {
+  encounter: Encounter
+}
+
+const props = defineProps<Props>()
+
+const { mode, goToEntry, goToView } = useQueryCRUDMode('mode')
+</script>
+
+<template>
+  <div>
+    <List
+      v-if="mode === 'list'"
+      :encounter="props.encounter"
+      @add="goToEntry"
+      @edit="goToEntry({ fromView: false })"
+      @view="goToView"
+    />
+    <View
+      v-else-if="mode === 'view'"
+      :encounter="props.encounter"
+    />
+    <Form v-else />
+  </div>
+</template>
diff --git a/app/components/content/assessment-education/form.vue b/app/components/content/assessment-education/form.vue
new file mode 100644
index 00000000..4553d7d5
--- /dev/null
+++ b/app/components/content/assessment-education/form.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import mockData from './sample'
+
+// type
+import { genDoctor, type Doctor } from '~/models/doctor'
+import type { ActionReportFormData } from '~/schemas/action-report.schema'
+
+// components
+import { toast } from '~/components/pub/ui/toast'
+import AppAssessmentEducationEntry from '~/components/app/assessment-education/entry.vue'
+
+// states
+const route = useRoute()
+const { mode, goBack } = useQueryCRUDMode('mode')
+const { recordId } = useQueryCRUDRecordId('record-id')
+const reportData = ref<ActionReportFormData>({} as unknown as ActionReportFormData)
+const doctors = ref<Doctor[]>([])
+const isLoading = ref<boolean>(false)
+
+// TODO: dummy data
+;(() => {
+  doctors.value = [genDoctor()]
+})()
+
+const entryMode = ref<'add' | 'edit' | 'view'>('add')
+const isDataReady = ref(false)
+
+onMounted(async () => {
+  if (mode.value === 'entry' && recordId.value) {
+    entryMode.value = 'edit'
+    await loadEntryForEdit(+recordId.value)
+  } else {
+    // Untuk mode 'add', langsung set ready
+    isDataReady.value = true
+  }
+})
+
+// TODO: map data
+async function loadEntryForEdit(id: number | string) {
+  isLoading.value = true
+  const result = mockData
+  reportData.value = result as ActionReportFormData
+  isLoading.value = false
+  isDataReady.value = true
+}
+</script>
+
+<template>
+  <AppAssessmentEducationEntry
+    v-if="isDataReady"
+    :isLoading="isLoading"
+    :mode="entryMode"
+    @submit="(val: {}) => console.log(val)"
+    @back="goBack"
+    @error="
+      (err: Error) => {
+        toast({
+          title: 'Terjadi Kesalahan',
+          description: err.message,
+          variant: 'destructive',
+        })
+      }
+    "
+    :doctors="doctors"
+    :initialValues="reportData"
+  />
+
+  <div
+    v-else
+    class="flex items-center justify-center p-8"
+  >
+    <p class="text-muted-foreground">Memuat data...</p>
+  </div>
+</template>
diff --git a/app/components/content/assessment-education/list.vue b/app/components/content/assessment-education/list.vue
new file mode 100644
index 00000000..91f5ab5d
--- /dev/null
+++ b/app/components/content/assessment-education/list.vue
@@ -0,0 +1,276 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import AppAssessmentEducationList from '~/components/app/assessment-education/list.vue'
+import AppAssessmentEducationListHistory from '~/components/app/assessment-education/list-history.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import { ButtonAction } from '~/components/pub/my-ui/form'
+
+// config
+import { config } from '~/components/app/assessment-education/list.cfg'
+
+// types
+import { ActionEvents } from '~/components/pub/my-ui/data/types'
+import type { Encounter } from '~/models/encounter'
+
+// Samples
+import { sampleRows, type AssessmentEducationData } from '~/components/app/assessment-education/sample'
+import sampleReport from './sample'
+
+// helpers
+import { toast } from '~/components/pub/ui/toast'
+
+// Props
+interface Props {
+  encounter: Encounter
+}
+const props = defineProps<Props>()
+const emits = defineEmits<{
+  (e: 'add'): void
+  (e: 'edit', id: number | string): void
+  (e: 'view', id: number | string): void
+}>()
+
+// states
+const router = useRouter()
+const route = useRoute()
+const { goToEntry, backToList } = useQueryCRUDMode('mode')
+const title = ref('')
+const search = ref('')
+const dateFrom = ref('')
+const dateTo = ref('')
+const isDialogOpen = ref<boolean>(false)
+const isLoading = ref<boolean>(false)
+
+// #region mock
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/consultation.handler'
+// #endregion
+
+// filter + pencarian sederhana (client-side)
+const filtered = computed(() => {
+  const q = search.value.trim().toLowerCase()
+  return sampleRows.filter((r: ActionReportData) => {
+    if (q) {
+      return r.nama.toLowerCase().includes(q) || r.noRm.toLowerCase().includes(q) || r.dokter.toLowerCase().includes(q)
+    }
+    return true
+  })
+})
+
+const goEdit = (id: number | string) => {
+  router.replace({
+    path: route.path,
+    query: {
+      ...route.query,
+      mode: 'entry',
+      'record-id': id,
+    },
+  })
+}
+
+const goView = (id: number | string) => {
+  router.replace({
+    path: route.path,
+    query: {
+      ...route.query,
+      mode: 'view',
+      'record-id': id,
+    },
+  })
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+async function onGetDetail(id: number | string) {
+  isLoading.value = true
+  const res = sampleReport
+  recItem.value = res
+  console.log(res)
+  isLoading.value = false
+}
+
+// #region watcher
+watch([recId, recAction], (newVal) => {
+  const [id, action] = newVal
+
+  // Guard: jangan proses jika id = 0 atau action kosong
+  if (!id || !action) return
+
+  switch (action) {
+    case ActionEvents.showDetail:
+      // onGetDetail(recId.value)
+      goView(id)
+      title.value = 'Detail Konsultasi'
+      break
+    case ActionEvents.showEdit:
+      goEdit(id)
+      title.value = 'Edit Konsultasi'
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+
+  // Reset KEDUANYA menggunakan nextTick agar tidak trigger watcher lagi
+  nextTick(() => {
+    recId.value = 0
+    recAction.value = ''
+  })
+})
+// #endregion
+</script>
+
+<template>
+  <div class="mx-auto max-w-full">
+    <div class="border-b p-6">
+      <h1 class="text-2xl font-semibold">Asesmen Kebutuhan Edukasi</h1>
+      <p class="mt-1 text-sm text-gray-500">Manajemen asesmen kebutuhan edukasi pasien rawat jalan</p>
+    </div>
+
+    <div class="flex flex-wrap items-center gap-3 border-b p-4">
+      <div class="flex items-center gap-2">
+        <input
+          v-model="search"
+          placeholder="Cari Nama / No.RM"
+          class="w-64 rounded border px-3 py-2"
+        />
+      </div>
+
+      <div class="flex items-center gap-2">
+        <input
+          v-model="dateFrom"
+          type="date"
+          class="rounded border px-3 py-2"
+        />
+        <span class="text-sm text-gray-500">-</span>
+        <input
+          v-model="dateTo"
+          type="date"
+          class="rounded border px-3 py-2"
+        />
+        <ButtonAction
+          preset="custom"
+          title="Filter List Asesmen"
+          label="Filter"
+          icon="i-lucide-filter"
+          @click="
+            () => {
+              isDialogOpen = true
+            }
+          "
+        />
+      </div>
+
+      <div class="ml-auto flex items-center gap-2">
+        <ButtonAction
+          preset="custom"
+          title="Riwayat"
+          icon="i-lucide-history"
+          label="Riwayat"
+          @click="
+            () => {
+              isDialogOpen = true
+            }
+          "
+        />
+        <ButtonAction
+          preset="add"
+          title="Tambah Asesmen"
+          icon="i-lucide-plus"
+          label="Asesmen"
+          @click="
+            () => {
+              goToEntry()
+            }
+          "
+        />
+      </div>
+    </div>
+
+    <div class="overflow-x-auto p-4">
+      <AppAssessmentEducationList
+        :data="filtered"
+        :pagination-meta="{
+          recordCount: 2,
+          page: 1,
+          pageSize: 10,
+          totalPage: 1,
+          hasPrev: false,
+          hasNext: false,
+        }"
+      />
+    </div>
+  </div>
+
+  <Dialog
+    v-model:open="isDialogOpen"
+    title="Arsip Riwayat Asesmen Kebutuhan Edukasi"
+    size="2xl"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        isDialogOpen = value
+      }
+    "
+  >
+    <AppAssessmentEducationListHistory
+      :data="filtered"
+      :pagination-meta="{
+        recordCount: 2,
+        page: 1,
+        pageSize: 10,
+        totalPage: 1,
+        hasPrev: false,
+        hasNext: false,
+      }"
+    />
+  </Dialog>
+
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="
+      () =>
+        handleActionRemove(
+          recItem.id,
+          () => {
+            router.go(0)
+          },
+          toast,
+        )
+    "
+    @cancel=""
+  >
+    <template #default="{ record }">
+      {{ console.log(JSON.stringify(record)) }}
+      <div class="space-y-1 text-sm">
+        <p
+          v-for="field in config.delKeyNames"
+          :key="field.key"
+          :v-if="record?.[field.key]"
+        >
+          <span class="font-semibold">{{ field.label }}:</span>
+          {{ record[field.key] }}
+        </p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>
diff --git a/app/components/content/assessment-education/sample.ts b/app/components/content/assessment-education/sample.ts
new file mode 100644
index 00000000..f368eea6
--- /dev/null
+++ b/app/components/content/assessment-education/sample.ts
@@ -0,0 +1,68 @@
+export default {
+  operatorTeam: {
+    dpjpId: -1,
+    operatorName: 'Julian Alvarez',
+    assistantOperatorName: 'Arda Guller',
+    instrumentNurseName: 'Kenan Yildiz',
+    surgeryDate: '2025-11-13T14:29:00',
+    actionDiagnosis: 'Sprei gratisnya mana',
+  },
+  procedures: [
+    {
+      id: -1,
+      name: 'Ndase mumet',
+      code: 'CX1',
+    },
+  ],
+  operationExecution: {
+    surgeryType: 'khusus',
+    billingCode: 'local',
+    operationSystem: 'cito',
+    surgeryCleanType: 'kotor',
+    surgeryNumber: 'retry',
+    birthPlaceNote: 'out3',
+    personWeight: 100,
+    operationDescription: 'asdsadsa1',
+    birthRemark: 'lahir_hidup',
+
+    operationStartAt: '2025-11-13T14:29:00',
+    operationEndAt: '2025-11-13T17:29:00',
+
+    anesthesiaStartAt: '2025-11-13T11:29:00',
+    anesthesiaEndAt: '2025-11-13T18:29:00',
+  },
+  bloodInput: {
+    type: 'tc',
+    amount: {
+      prc: null,
+      wb: null,
+      ffp: null,
+      tc: 3243324,
+    },
+  },
+  implant: {
+    brand: 'Samsung',
+    name: 'S.Komedi',
+    companionName: 'When ya',
+  },
+  specimen: {
+    destination: 'pa',
+  },
+  tissueNotes: [
+    {
+      note: 'Anjai',
+    },
+    {
+      note: 'Ciee Kaget',
+    },
+    {
+      note: 'Baper',
+    },
+    {
+      note: 'Saltink weeh',
+    },
+    {
+      note: 'Kaburrr',
+    },
+  ],
+}
diff --git a/app/components/content/assessment-education/view.vue b/app/components/content/assessment-education/view.vue
new file mode 100644
index 00000000..97508a22
--- /dev/null
+++ b/app/components/content/assessment-education/view.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import mockData from './sample'
+
+// types
+import { type ActionReportFormData } from '~/schemas/action-report.schema'
+import { type Encounter } from '~/models/encounter'
+
+// Components
+import AppActionReportPreview from '~/components/app/action-report/preview.vue'
+import type { HeaderPrep } from '~/components/pub/my-ui/data/types'
+
+// #region Props & Emits
+const router = useRouter()
+const { backToList, goToEntry } = useQueryCRUDMode('mode')
+const { recordId } = useQueryCRUDRecordId('record-id')
+
+function onEditFromView() {
+  goToEntry({ fromView: true })
+}
+
+const props = defineProps<{
+  encounter: Encounter
+}>()
+
+// #endregion
+
+// #region State & Computed
+const reportData = ref<ActionReportFormData | null>(null)
+
+const headerPrep: HeaderPrep = {
+  title: 'Detail Laporan Tindakan',
+  icon: 'i-lucide-stethoscope',
+}
+
+// #endregion
+
+// #region Lifecycle Hooks
+onMounted(async () => {
+  reportData.value = mockData as unknown as ActionReportFormData
+})
+// #endregion
+
+// #region Functions
+// #endregion region
+
+// #region Utilities & event handlers
+function onEdit() {
+  router.push({
+    name: 'action-report-id-edit',
+    params: { id: 100 },
+  })
+}
+function onBack() {}
+// #endregion
+
+// #region Watchers
+// #endregion
+</script>
+
+<template>
+  <AppActionReportPreview
+    v-if="reportData"
+    :data="reportData"
+    @back="backToList"
+    @edit="onEditFromView"
+  />
+</template>
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/entry.vue b/app/components/content/encounter/entry.vue
index a06a4165..6fab59e8 100644
--- a/app/components/content/encounter/entry.vue
+++ b/app/components/content/encounter/entry.vue
@@ -188,6 +188,7 @@ onMounted(async () => {
     @event="handleEvent"
     @fetch="handleFetch"
   />
+
   <AppViewPatient
     v-model:open="openPatient"
     v-model:selected="selectedPatient"
@@ -206,11 +207,13 @@ onMounted(async () => {
     "
     @save="handleSavePatient"
   />
+
   <AppViewHistory
     v-model:open="openHistory"
     :is-action="true"
     :histories="histories"
   />
+  
   <!-- Footer Actions -->
   <div class="mt-6 flex justify-end gap-2 border-t border-t-slate-300 pt-4">
     <Button
diff --git a/app/components/content/encounter/list.vue b/app/components/content/encounter/list.vue
index 3aeb1254..341ac42f 100644
--- a/app/components/content/encounter/list.vue
+++ b/app/components/content/encounter/list.vue
@@ -142,10 +142,10 @@ async function getPatientList() {
   try {
     const params: any = { includes: includesParams, ...filterParams.value }
     if (props.classCode) {
-      params.class_code = props.classCode
+      params['class-code'] = props.classCode
     }
     if (props.subClassCode) {
-      params.sub_class_code = props.subClassCode
+      params['sub-class-code'] = props.subClassCode
     }
     const result = await getEncounterList(params)
     if (result.success) {
diff --git a/app/components/content/encounter/process.vue b/app/components/content/encounter/process.vue
index fcfc3671..044b44dc 100644
--- a/app/components/content/encounter/process.vue
+++ b/app/components/content/encounter/process.vue
@@ -29,8 +29,10 @@ import CpLabOrder from '~/components/content/cp-lab-order/main.vue'
 import Radiology from '~/components/content/radiology-order/main.vue'
 import Consultation from '~/components/content/consultation/list.vue'
 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'
@@ -56,7 +58,7 @@ const router = useRouter()
 const { user, userActiveRole, getActiveRole } = useUserStore()
 const activeRole = getActiveRole()
 const activePosition = ref(getServicePosition(activeRole))
-const menus = ref([] as any)
+const menus = shallowRef([] as any)
 const activeMenu = computed({
   get: () => (route.query?.menu && typeof route.query.menu === 'string' ? route.query.menu : 'status'),
   set: (value: string) => {
@@ -101,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.value.id } },
+  { value: 'mcu-lab-cp', label: 'Order Lab PK', component: CpLabOrder, props: { encounter_id: data.value.id } },
   { value: 'consent', label: 'General Consent', component: GeneralConsentList, props: { encounter: data } },
   {
     value: 'initial-nursing-study',
@@ -108,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' },
@@ -121,6 +125,13 @@ const protocolRows = [
   { value: 'resume', label: 'Resume', component: ResumeList, props: { encounter: data } },
   { value: 'control', label: 'Surat Kontrol', component: ControlLetterList, props: { encounter: data } },
   { value: 'screening', label: 'Skrinning MPP' },
+  {
+    value: 'report',
+    label: 'Laporan Tindakan',
+    groups: ['ambulatory', 'rehabilitation', 'chemotherapy'],
+    component: ActionReport,
+    props: { encounter: data },
+  },
   {
     value: 'supporting-document',
     label: 'Upload Dokumen Pendukung',
diff --git a/app/components/content/general-consent/form.vue b/app/components/content/general-consent/form.vue
index 738adca1..c46e81cf 100644
--- a/app/components/content/general-consent/form.vue
+++ b/app/components/content/general-consent/form.vue
@@ -117,7 +117,6 @@ async function actionHandler(type: string) {
       })
     }
 
-    console.log('data', result)
     const resp = await handleActionSave(
       {
         ...payload.value,
diff --git a/app/components/content/item-price/list.vue b/app/components/content/item-price/list.vue
index aa277b71..e71e4cf2 100644
--- a/app/components/content/item-price/list.vue
+++ b/app/components/content/item-price/list.vue
@@ -1,70 +1,198 @@
 <script setup lang="ts">
-import type { DataTableLoader } from '~/components/pub/my-ui/data-table/type'
-import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
-import Modal from '~/components/pub/my-ui/modal/modal.vue'
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
 import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import AppItemList from '~/components/app/item-price/list.vue'
+import AppItemEntryForm from '~/components/app/item-price/entry-form.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
 
-const data = ref([])
-const entry = ref<any>({})
+// Constants
+import { infraGroupCodesKeys } from '~/lib/constants'
 
-const refSearchNav: RefSearchNav = {
-  onClick: () => {
-    // open filter modal
-  },
-  onInput: (_val: string) => {
-    // filter patient list
-  },
-  onClear: () => {
-    // clear url param
-  },
-}
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
 
-// Loading state management
-const isLoading = reactive<DataTableLoader>({
-  summary: false,
-  isTableLoading: false,
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { ItemPriceSchema, type ItemPriceFormData } from '~/schemas/item-price.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/item-price.handler'
+
+// Services
+import { getList, getDetail } from '~/services/item-price.service'
+import { getValueLabelList as getItemGroupList } from '~/services/item.service'
+
+const items = ref<{ value: string | number; label: string }[]>([])
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getItemList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      sort: 'createdAt:asc',
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'item-price',
 })
 
-const isOpen = ref(false)
-
-const recId = ref<number>(0)
-const recAction = ref<string>('')
-const recItem = ref<any>(null)
-
-const hreaderPrep: HeaderPrep = {
-  title: 'Golongan Obat',
-  icon: 'i-lucide-users',
+const headerPrep: HeaderPrep = {
+  title: 'Harga Item',
+  icon: 'i-lucide-layout-list',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (val: string) => {
+      searchInput.value = val
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
   addNav: {
     label: 'Tambah',
-    onClick: () => (isOpen.value = true),
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
   },
 }
 
-async function getPatientList() {
-  isLoading.isTableLoading = true
-  const resp = await xfetch('/api/v1/medicine-group')
-  if (resp.success) {
-    data.value = (resp.body as Record<string, any>).data
-  }
-  isLoading.isTableLoading = false
-}
-
-onMounted(() => {
-  getPatientList()
-})
-
 provide('rec_id', recId)
 provide('rec_action', recAction)
 provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
+
+const getCurrentDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+watch([recId, recAction], () => {
+  const currentId = recId.value
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentDetail(currentId)
+      title.value = 'Detail Harga Item'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentDetail(currentId)
+      title.value = 'Edit Harga Item'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  items.value = await getItemGroupList()
+  await getItemList()
+})
 </script>
 
 <template>
-  <Header :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+  />
 
-  <AppMedicineGroupList :data="data" />
+  <AppItemList
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
 
-  <Modal v-model:open="isOpen" title="Tambah Golongan Obat" size="lg" prevent-outside>
-    <AppMedicineGroupEntryForm v-model="entry" />
-  </Modal>
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Harga Item'"
+    size="lg"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
+  >
+    <AppItemEntryForm
+      :schema="ItemPriceSchema"
+      :items="items"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: ItemPriceFormData | Record<string, any>, resetForm: () => void) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getItemList, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getItemList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getItemList, 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/item/list.vue b/app/components/content/item/list.vue
index 15887985..727d5200 100644
--- a/app/components/content/item/list.vue
+++ b/app/components/content/item/list.vue
@@ -1,70 +1,208 @@
 <script setup lang="ts">
-import type { DataTableLoader } from '~/components/pub/my-ui/data-table/type'
-import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
-import Modal from '~/components/pub/my-ui/modal/modal.vue'
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
 import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import AppItemList from '~/components/app/item/list.vue'
+import AppItemEntryForm from '~/components/app/item/entry-form.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
 
-const data = ref([])
-const entry = ref<any>({})
+// Constants
+import { itemGroupCodes } from '~/lib/constants'
 
-const refSearchNav: RefSearchNav = {
-  onClick: () => {
-    // open filter modal
-  },
-  onInput: (_val: string) => {
-    // filter patient list
-  },
-  onClear: () => {
-    // clear url param
-  },
-}
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
 
-// Loading state management
-const isLoading = reactive<DataTableLoader>({
-  summary: false,
-  isTableLoading: false,
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { ItemSchema, type ItemFormData } from '~/schemas/item.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/item.handler'
+
+// Services
+import { getList, getDetail } from '~/services/item.service'
+import { getValueLabelList as getUomList } from '~/services/uom.service'
+
+const itemGroups = ref<{ value: string | number; label: string }[]>([])
+const uoms = ref<{ value: string | number; label: string }[]>([])
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getItemList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      sort: 'createdAt:asc',
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+      includes: 'uom',
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'item',
 })
 
-const isOpen = ref(false)
-
-const recId = ref<number>(0)
-const recAction = ref<string>('')
-const recItem = ref<any>(null)
-
-const hreaderPrep: HeaderPrep = {
+const headerPrep: HeaderPrep = {
   title: 'Item',
-  icon: 'i-lucide-users',
+  icon: 'i-lucide-layout-list',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (val: string) => {
+      searchInput.value = val
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
   addNav: {
     label: 'Tambah',
-    onClick: () => (isOpen.value = true),
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
   },
 }
 
-async function getPatientList() {
-  isLoading.isTableLoading = true
-  const resp = await xfetch('/api/v1/medicine-group')
-  if (resp.success) {
-    data.value = (resp.body as Record<string, any>).data
-  }
-  isLoading.isTableLoading = false
-}
-
-onMounted(() => {
-  getPatientList()
-})
-
 provide('rec_id', recId)
 provide('rec_action', recAction)
 provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
+
+const getCurrentDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+watch([recId, recAction], () => {
+  const currentId = recItem.value?.code ? recItem.value.code : recId.value
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentDetail(currentId)
+      title.value = 'Detail Item'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentDetail(currentId)
+      title.value = 'Edit Item'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  itemGroups.value = Object.keys(itemGroupCodes).map((key) => ({
+    value: key,
+    label: itemGroupCodes[key],
+  })) as any
+  uoms.value = await getUomList()
+  await getItemList()
+})
 </script>
 
 <template>
-  <Header :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+  />
 
-  <AppItemList :data="data" />
+  <AppItemList
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
 
-  <Modal v-model:open="isOpen" title="Tambah Golongan Obat" size="xl" prevent-outside>
-    <AppItemEntryForm v-model="entry" />
-  </Modal>
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Item'"
+    size="lg"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
+  >
+    <AppItemEntryForm
+      :schema="ItemSchema"
+      :values="recItem"
+      :item-groups="itemGroups"
+      :uoms="uoms"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: ItemFormData | Record<string, any>, resetForm: () => void) => {
+          if (recId > 0) {
+            handleActionEdit(recItem?.code ? recItem.code : recId, values, () => {
+              getItemList()
+              onResetState()
+            }, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getItemList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recItem?.code ? recItem.code : recId, getItemList, 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/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/mcu-order/entry.vue b/app/components/content/mcu-order/entry.vue
index f07310b3..0de46970 100644
--- a/app/components/content/mcu-order/entry.vue
+++ b/app/components/content/mcu-order/entry.vue
@@ -131,6 +131,7 @@ async function getItems() {
 
   <Detail :data="data" />
 
+  <div class="font-semibold pt-4 text-sm mb-1">Daftar Item</div>
   <ItemListEntry
     :data="items"
     @requestItem="requestItem"/>
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/radiology-order/entry.vue b/app/components/content/radiology-order/entry.vue
index 4d0aa002..795f85f8 100644
--- a/app/components/content/radiology-order/entry.vue
+++ b/app/components/content/radiology-order/entry.vue
@@ -132,9 +132,20 @@ async function getItems() {
 
   <Detail :data="data" />
 
+  <div class="mb-5">
+    <div>Keterangan Klinis</div>
+    <Textarea />
+  </div>
+
   <ItemListEntry
     :data="items"
     @requestItem="requestItem"/>
+
+  <div class="my-5">
+    <div>Catatan Pemeriksaan DSA</div>
+    <Textarea />
+  </div>
+
   <Separator class="my-5" />
 
   <div class="w-full flex justify-center">
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/components/pub/my-ui/combobox/combobox.vue b/app/components/pub/my-ui/combobox/combobox.vue
index ab625b01..5f0292e7 100644
--- a/app/components/pub/my-ui/combobox/combobox.vue
+++ b/app/components/pub/my-ui/combobox/combobox.vue
@@ -4,7 +4,7 @@ import { type Item } from './index'
 
 const props = defineProps<{
   id?: string
-  modelValue?: string
+  modelValue?: string | number
   items: Item[]
   placeholder?: string
   searchPlaceholder?: string
@@ -16,8 +16,8 @@ const props = defineProps<{
 const model = defineModel()
 
 const emit = defineEmits<{
-  'update:modelValue': [value: string]
-  'update:searchText': [value: string]
+  'update:modelValue': [value: string | number]
+  'update:searchText': [value: string | number]
 }>()
 
 const open = ref(false)
diff --git a/app/components/pub/my-ui/combobox/index.ts b/app/components/pub/my-ui/combobox/index.ts
index e4864f7f..f3038de7 100644
--- a/app/components/pub/my-ui/combobox/index.ts
+++ b/app/components/pub/my-ui/combobox/index.ts
@@ -1,5 +1,5 @@
 export interface Item {
-  value: string
+  value: string | number
   label: string
   code?: string
   priority?: number
@@ -7,12 +7,12 @@ export interface Item {
 
 export function recStrToItem(input: Record<string, string>): Item[] {
   const items: Item[] = []
-  let idx = 0;
+  let idx = 0
   for (const key in input) {
     if (input.hasOwnProperty(key)) {
       items.push({
-        value: key || ('unknown-' + idx),
-        label: input[key] || ('unknown-' + idx),
+        value: key || 'unknown-' + idx,
+        label: input[key] || 'unknown-' + idx,
       })
     }
     idx++
diff --git a/app/components/pub/my-ui/content-switcher/content-switcher.vue b/app/components/pub/my-ui/content-switcher/content-switcher.vue
index 267d94c1..3b79f193 100644
--- a/app/components/pub/my-ui/content-switcher/content-switcher.vue
+++ b/app/components/pub/my-ui/content-switcher/content-switcher.vue
@@ -1,33 +1,40 @@
 <script setup lang="ts">
 const props = defineProps<{
   height?: number
-  class?: string
   activeTab?: 1 | 2
 }>()
 
-const classVal = computed(() => {
-  return props.class ? props.class : ''
-})
 const activeTab = ref(props.activeTab || 1)
 
-function switchActiveTab() {
-  activeTab.value = activeTab.value === 1 ? 2 : 1
+function handleClick(value: 1 | 2) {
+  activeTab.value = value
 }
 </script>
 
 <template>
-  <div :class="`content-switcher ${classVal}`" :style="height ? `height:${200}px` : ''">
-    <div class="wrapper">
-      <div :class="`item item-1 ${activeTab === 1 ? 'active' : 'inactive'}`">
-        <slot name="content1" />
+  <div class="content-switcher" :style="`height: ${height || 200}px`">
+    <div :class="`${activeTab === 1 ? 'active' : 'inactive'}`">
+      <div class="content-wrapper">
+        <div>
+          <slot name="content1" />
+        </div>
       </div>
-      <div :class="`nav border-slate-300 ${ activeTab == 1 ? 'border-l' : 'border-r'}`">
-        <button @click="switchActiveTab()" class="!p-0 w-full h-full">
-          <Icon :name="activeTab == 1 ? 'i-lucide-chevron-left' : 'i-lucide-chevron-right'" class="text-3xl" />
+      <div class="content-nav">
+        <button @click="handleClick(1)">
+          <Icon name="i-lucide-chevron-right" />
         </button>
       </div>
-      <div :class="`item item-2 ${activeTab === 2 ? 'active' : 'inactive'}`">
-        <slot name="content2" />
+    </div>
+    <div :class="`${activeTab === 2 ? 'active' : 'inactive'}`">
+      <div class="content-nav">
+        <button @click="handleClick(2)">
+          <Icon name="i-lucide-chevron-left" />
+        </button>
+      </div>
+      <div class="content-wrapper">
+        <div>
+          <slot name="content2" />
+        </div>
       </div>
     </div>
   </div>
@@ -35,24 +42,45 @@ function switchActiveTab() {
 
 <style>
   .content-switcher {
-    @apply overflow-hidden
+    @apply flex overflow-hidden gap-3
   }
-  .wrapper {
-    @apply flex w-[200%] h-full
-  }
-  .item {
-    @apply w-[calc(50%-60px)]
+  .content-switcher > * {
+    @apply border border-slate-300 rounded-md flex overflow-hidden
   }
 
-  .item-1.active {
-    @apply ms-0 transition-all duration-500 ease-in-out
+  .content-wrapper {
+    @apply p-4 2xl:p-5 overflow-hidden grow
   }
-  .item-1.inactive {
-    @apply -ms-[calc(50%-60px)] transition-all duration-500 ease-in-out
+  .inactive .content-wrapper {
+    @apply p-0 w-0
   }
 
-  .nav {
-    @apply h-full w-[60px] flex flex-row items-center justify-center content-center !text-2xl overflow-hidden
+  .content-nav {
+    @apply h-full flex flex-row items-center justify-center content-center !text-2xl overflow-hidden
   }
 
+  .content-nav button {
+    @apply pt-2 px-2 h-full w-full
+  }
+
+  /* .content-switcher .inactive > .content-wrapper {
+    @apply w-0 p-0 opacity-0 transition-all duration-500 ease-in-out
+  } */
+  .content-switcher .inactive {
+    @apply w-16 transition-all duration-500 ease-in-out
+  }
+  .content-switcher .inactive > .content-nav {
+    @apply w-full transition-all duration-100 ease-in-out
+  }
+
+  .content-switcher .active {
+    @apply grow transition-all duration-500 ease-in-out
+  }
+  .content-switcher .active > .content-nav {
+    @apply w-0 transition-all duration-100 ease-in-out
+  }
+  /* .content-switcher .active > .content-wrapper {
+    @apply w-full delay-1000 transition-all duration-1000 ease-in-out
+  } */
+
 </style>
diff --git a/app/components/pub/my-ui/data/dropdown-action-d.vue b/app/components/pub/my-ui/data/dropdown-action-d.vue
new file mode 100644
index 00000000..ac15ff49
--- /dev/null
+++ b/app/components/pub/my-ui/data/dropdown-action-d.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import type { LinkItem, ListItemDto } from './types'
+import { ActionEvents } from './types'
+
+const props = defineProps<{
+  rec: ListItemDto
+}>()
+
+const recId = inject<Ref<number>>('rec_id')!
+const recAction = inject<Ref<string>>('rec_action')!
+const recItem = inject<Ref<any>>('rec_item')!
+const timestamp = inject<Ref<number>>('timestamp')!
+const activeKey = ref<string | null>(null)
+const linkItems: LinkItem[] = [
+  {
+    label: 'Detail',
+    onClick: () => {
+      detail()
+    },
+    icon: 'i-lucide-eye',
+  },
+]
+
+function detail() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showDetail
+  recItem.value = props.rec
+  timestamp.value = Date.now()
+}
+</script>
+
+<template>
+  <div>
+    <DropdownMenu>
+      <DropdownMenuTrigger as-child>
+        <SidebarMenuButton
+          size="lg"
+          class="data-[state=open]:text-sidebar-accent-foreground data-[state=open]:bg-white dark:data-[state=open]:bg-slate-800"
+        >
+          <Icon
+            name="i-lucide-chevrons-up-down"
+            class="ml-auto size-4"
+          />
+        </SidebarMenuButton>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        class="w-[--radix-dropdown-menu-trigger-width] min-w-40 rounded-lg border border-slate-200 bg-white text-black dark:border-slate-700 dark:bg-slate-800 dark:text-white"
+        align="end"
+      >
+        <DropdownMenuGroup>
+          <DropdownMenuItem
+            v-for="item in linkItems"
+            :key="item.label"
+            class="hover:bg-gray-100 dark:hover:bg-slate-700"
+            @click="item.onClick"
+            @mouseenter="activeKey = item.label"
+            @mouseleave="activeKey = null"
+          >
+            <Icon :name="item.icon ?? ''" />
+            <span :class="activeKey === item.label ? 'text-sidebar-accent-foreground' : ''">{{ item.label }}</span>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </div>
+</template>
diff --git a/app/components/pub/my-ui/doc-entry/block.vue b/app/components/pub/my-ui/doc-entry/block.vue
index 7e217542..b51ad72a 100644
--- a/app/components/pub/my-ui/doc-entry/block.vue
+++ b/app/components/pub/my-ui/doc-entry/block.vue
@@ -53,8 +53,8 @@ const settingClass = computed(() => {
       '[&_.cell]:2xl:flex',
     ][getBreakpointIdx(props.cellFlexPoint)]
     cls += ' [&_.label]:flex-shrink-0 ' + [
-      '[&_.label]:md:w-16 [&_.label]:xl:w-20',
-      '[&_.label]:md:w-20 [&_.label]:xl:w-24',
+      '[&_.label]:md:w-12 [&_.label]:xl:w-20',
+      '[&_.label]:md:w-16 [&_.label]:xl:w-24',
       '[&_.label]:md:w-24 [&_.label]:xl:w-32',
       '[&_.label]:md:w-32 [&_.label]:xl:w-40',
       '[&_.label]:md:w-44 [&_.label]:xl:w-52',
diff --git a/app/components/pub/my-ui/form/input-base.vue b/app/components/pub/my-ui/form/input-base.vue
index 050a0f78..398a5af2 100644
--- a/app/components/pub/my-ui/form/input-base.vue
+++ b/app/components/pub/my-ui/form/input-base.vue
@@ -7,6 +7,8 @@ import { useFieldError } from 'vee-validate'
 
 import * as DE from '~/components/pub/my-ui/doc-entry'
 
+type InputType = 'text' | 'number' | 'password' | 'email' | 'date' | 'time' | 'datetime-local' | 'search' | 'tel'
+
 const props = defineProps<{
   fieldName: string
   placeholder: string
@@ -22,8 +24,11 @@ const props = defineProps<{
   bottomLabel?: string
   suffixMsg?: string
   iconName?: string
+  inputType?: InputType
 }>()
 
+const { class: containerClass } = props
+
 function handleInput(event: Event) {
   const target = event.target as HTMLInputElement
   let value = target.value
@@ -69,23 +74,21 @@ const hasError = computed(() => !!fieldError.value)
         :name="fieldName"
       >
         <FormItem>
-          <FormControl class="relative">
+          <FormControl :class="cn('relative', containerClass)">
             <div class="relative w-full max-w-sm items-center">
               <Input
                 :disabled="isDisabled"
                 v-bind="componentField"
                 :placeholder="placeholder"
                 :maxlength="maxLength"
-                :class="cn(
-                  'focus:border-primary focus:ring-2 focus:ring-primary focus:ring-offset-0',
-                  hasError && 'border-red-500 focus:border-red-500 focus:ring-red-500'
-                )"
+                :class="cn(hasError && 'border-red-500 focus-visible:border-red-500 focus-visible:ring-red-500')"
                 autocomplete="off"
                 aria-autocomplete="none"
                 autocorrect="off"
                 autocapitalize="off"
                 spellcheck="false"
                 @input="handleInput"
+                :type="inputType"
               />
               <span
                 v-if="suffixMsg"
diff --git a/app/components/pub/my-ui/form/text-area-input.vue b/app/components/pub/my-ui/form/text-area-input.vue
index 43002c80..22015d54 100644
--- a/app/components/pub/my-ui/form/text-area-input.vue
+++ b/app/components/pub/my-ui/form/text-area-input.vue
@@ -1,9 +1,5 @@
 <script setup lang="ts">
 import type { FormErrors } from '~/types/error'
-import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
-import Field from '~/components/pub/my-ui/form/field.vue'
-import Label from '~/components/pub/my-ui/form/label.vue'
-import { Input } from '~/components/pub/ui/input'
 import { cn } from '~/lib/utils'
 
 import * as DE from '~/components/pub/my-ui/doc-entry'
@@ -19,8 +15,11 @@ const props = defineProps<{
   maxLength?: number
   isRequired?: boolean
   isDisabled?: boolean
+  resize?: 'none' | 'y' | 'x'
+  rows?: number
 }>()
 
+const { resize = 'none', class: className } = props
 function handleInput(event: Event) {
   const target = event.target as HTMLInputElement
   let value = target.value
@@ -47,7 +46,7 @@ function handleInput(event: Event) {
 <template>
   <DE.Cell :col-span="colSpan || 1">
     <DE.Label
-      class="font-medium mb-1"
+      :class="className"
       v-if="label !== ''"
       :label-for="fieldName"
       :is-required="isRequired && !isDisabled"
@@ -65,11 +64,12 @@ function handleInput(event: Event) {
         <FormItem>
           <FormControl>
             <Textarea
+              :rows="rows"
               :disabled="isDisabled"
               v-bind="componentField"
               :placeholder="placeholder"
               :maxlength="maxLength"
-              :class="cn('focus:border-primary focus:ring-2 focus:ring-primary focus:ring-offset-0', props.class)"
+              :class="cn('focus:border-primary focus:ring-2 focus:ring-primary focus:ring-offset-0')"
               autocomplete="off"
               aria-autocomplete="none"
               autocorrect="off"
@@ -83,4 +83,4 @@ function handleInput(event: Event) {
       </FormField>
     </DE.Field>
   </DE.Cell>
-</template>
\ No newline at end of file
+</template>
diff --git a/app/components/pub/my-ui/menus/submenu.vue b/app/components/pub/my-ui/menus/submenu.vue
index 8d60f742..ecfeb054 100644
--- a/app/components/pub/my-ui/menus/submenu.vue
+++ b/app/components/pub/my-ui/menus/submenu.vue
@@ -4,10 +4,6 @@ import { type EncounterItem } from "~/handlers/encounter-init.handler";
 const props = defineProps<{
   initialActiveMenu: string
   data: EncounterItem[]
-  canCreate?: boolean
-  canRead?: boolean
-  canUpdate?: boolean
-  canDelete?: boolean
 }>()
 
 const activeMenu = ref(props.initialActiveMenu)
@@ -42,12 +38,7 @@ function changeMenu(value: string) {
         class="flex-1 rounded-md border bg-white p-4 shadow-sm dark:bg-neutral-950">
         <component
           :is="data.find((m) => m.id === activeMenu)?.component"
-          v-bind="data.find((m) => m.id === activeMenu)?.props"
-          :can-create="canCreate"
-          :can-read="canRead"
-          :can-update="canUpdate"
-          :can-delete="canDelete"
-        />
+          v-bind="data.find((m) => m.id === activeMenu)?.props" />
       </div>
     </div>
   </div>
diff --git a/app/components/pub/my-ui/pagination/pagination.vue b/app/components/pub/my-ui/pagination/pagination.vue
index 9b1618c3..469f966d 100644
--- a/app/components/pub/my-ui/pagination/pagination.vue
+++ b/app/components/pub/my-ui/pagination/pagination.vue
@@ -93,7 +93,7 @@ function getButtonClass(pageNumber: number) {
 </script>
 
 <template>
-  <div class="flex w-full min-w-0 items-center justify-between px-2 py-2">
+  <div class="flex w-full min-w-0 items-center justify-between overflow-x-scroll px-2 py-2 md:overflow-hidden">
     <!-- Info text -->
     <div
       v-if="showInfo && endRecord > 0"
diff --git a/app/components/pub/ui/form/array-message.vue b/app/components/pub/ui/form/array-message.vue
new file mode 100644
index 00000000..03bbfc12
--- /dev/null
+++ b/app/components/pub/ui/form/array-message.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { ErrorMessage } from 'vee-validate'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  name: string
+  class?: string
+}>()
+</script>
+
+<template>
+  <ErrorMessage
+    :name="props.name"
+    v-slot="{ message }"
+  >
+    <p :class="cn('font-sans text-[0.8rem] text-destructive', props.class)">
+      {{ message }}
+    </p>
+  </ErrorMessage>
+</template>
diff --git a/app/components/pub/ui/form/index.ts b/app/components/pub/ui/form/index.ts
index 1a3be118..67c55c94 100644
--- a/app/components/pub/ui/form/index.ts
+++ b/app/components/pub/ui/form/index.ts
@@ -1,3 +1,4 @@
+export { default as ArrayMessage } from './array-message.vue'
 export { default as FormControl } from './FormControl.vue'
 export { default as FormDescription } from './FormDescription.vue'
 export { default as FormItem } from './FormItem.vue'
diff --git a/app/components/pub/ui/input/Input.vue b/app/components/pub/ui/input/Input.vue
index 21603c73..b4fcf935 100644
--- a/app/components/pub/ui/input/Input.vue
+++ b/app/components/pub/ui/input/Input.vue
@@ -24,7 +24,7 @@ const modelValue = useVModel(props, 'modelValue', emits, {
     v-model="modelValue"
     :class="
       cn(
-        'border-input dark:bg-slate-950 ring-offset-background placeholder:text-muted-foreground flex h-9 md:h-8 2xl:h-9 w-full rounded-md border border-gray-400 px-3 py-2 md:text-xs 2xl:text-sm file:border-0 file:bg-transparent md:file:!text-xs xl:file:!text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50',
+        'border-input dark:bg-slate-950 ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary focus-visible:ring-offset-0 focus-visible:border-primary flex h-9 md:h-8 2xl:h-9 w-full rounded-md border border-gray-400 px-3 py-2 md:text-xs 2xl:text-sm file:border-0 file:bg-transparent md:file:!text-xs xl:file:!text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50',
         props.class,
       )
     "
diff --git a/app/composables/usePaginatedList.ts b/app/composables/usePaginatedList.ts
index 71dd99b3..ce5dbb40 100644
--- a/app/composables/usePaginatedList.ts
+++ b/app/composables/usePaginatedList.ts
@@ -2,7 +2,6 @@ import type { DataTableLoader } from '~/components/pub/my-ui/data-table/type'
 import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
 import { refDebounced, useUrlSearchParams } from '@vueuse/core'
 import * as z from 'zod'
-import { is } from "date-fns/locale"
 
 // Default query schema yang bisa digunakan semua list
 export const defaultQuerySchema = z.object({
@@ -38,10 +37,23 @@ interface UsePaginatedListOptions<T = any> {
   }>
   // Nama endpoint untuk logging error
   entityName: string
+  /**
+   * Apakah state harus disinkronkan ke URL Browser?
+   * Set `false` jika digunakan di dalam Modal, Drawer, atau Nested Component
+   * agar tidak menimpa URL halaman induk.
+   * @default true
+   */
+  syncToUrl?: boolean
 }
 
 export function usePaginatedList<T = any>(options: UsePaginatedListOptions<T>) {
-  const { querySchema = defaultQuerySchema, defaultQuery = defaultQueryParams, fetchFn, entityName } = options
+  const {
+    querySchema = defaultQuerySchema,
+    defaultQuery = defaultQueryParams,
+    fetchFn,
+    entityName,
+    syncToUrl = true, // Default true agar behavior lama tetap jalan
+  } = options
 
   // State management
   const data = ref<T[]>([])
@@ -49,11 +61,19 @@ export function usePaginatedList<T = any>(options: UsePaginatedListOptions<T>) {
     isTableLoading: false,
   })
 
-  // URL state management
-  const queryParams = useUrlSearchParams('history', {
-    initialValue: defaultQuery,
-    removeFalsyValues: true,
-  })
+  let queryParams: any
+
+  if (syncToUrl) {
+    // Mode Halaman Utama: Sync ke URL
+    queryParams = useUrlSearchParams('history', {
+      initialValue: defaultQuery,
+      removeFalsyValues: true,
+      write: false,
+    })
+  } else {
+    // Mode Nested/Modal: Local Reactive State
+    queryParams = reactive({ ...defaultQuery })
+  }
 
   const params = computed(() => {
     const result = querySchema.safeParse(queryParams)
@@ -168,7 +188,7 @@ export function usePaginatedList<T = any>(options: UsePaginatedListOptions<T>) {
   }
 }
 
-export function transform(endpoint: string ,params: any): string {
+export function transform(endpoint: string, params: any): string {
   const urlParams = new URLSearchParams()
 
   Object.entries(params).forEach(([key, value]) => {
diff --git a/app/const/page-permission/ambulatory.ts b/app/const/page-permission/ambulatory.ts
index b66106d1..c77b59a4 100644
--- a/app/const/page-permission/ambulatory.ts
+++ b/app/const/page-permission/ambulatory.ts
@@ -158,7 +158,7 @@ export const permissions: Record<string, Record<string, Permission[]>> = {
     'emp|lab': ['R'],
     'emp|rad': ['R'],
   },
-  '/ambulatory/encounter/[id]/process?menu=pa-lab-order': {
+  '/ambulatory/encounter/[id]/process?menu=ap-lab-order': {
     'emp|doc': ['R', 'U'],
     'emp|nur': ['R'],
     'emp|thr': ['R'],
diff --git a/app/handlers/assessment-education.handler.ts b/app/handlers/assessment-education.handler.ts
new file mode 100644
index 00000000..80b24f40
--- /dev/null
+++ b/app/handlers/assessment-education.handler.ts
@@ -0,0 +1,24 @@
+// Handlers
+import { genCrudHandler } from '~/handlers/_handler'
+
+// Services
+import { create, update, remove } from '~/services/assessment-education.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({
+  create,
+  update,
+  remove,
+})
diff --git a/app/handlers/encounter-entry.handler.ts b/app/handlers/encounter-entry.handler.ts
index 5f632ac2..168b1f56 100644
--- a/app/handlers/encounter-entry.handler.ts
+++ b/app/handlers/encounter-entry.handler.ts
@@ -75,6 +75,7 @@ export function useEncounterEntry(props: {
   const isSaveDisabled = computed(() => {
     return !selectedPatient.value || !selectedPatientObject.value || isSaving.value || isLoadingDetail.value
   })
+  const isUsePaymentNew = true
 
   function getListPath(): string {
     if (props.classCode === 'ambulatory') {
@@ -436,7 +437,7 @@ export function useEncounterEntry(props: {
       formData.registerDate = date.toISOString().split('T')[0]
     }
 
-    if (encounter.paymentMethod_code) {
+    if (!isUsePaymentNew && encounter.paymentMethod_code) {
       formData.paymentMethodCode = encounter.paymentMethod_code
       if (encounter.paymentMethod_code === 'insurance') {
         formData.paymentType = 'jkn'
@@ -449,7 +450,7 @@ export function useEncounterEntry(props: {
         }
       }
     } else {
-      formData.paymentType = 'spm'
+      formData.paymentType = encounter.paymentMethod_code
     }
 
     formData.cardNumber = encounter.member_number || ''
@@ -520,7 +521,7 @@ export function useEncounterEntry(props: {
       sippFile.value = formValues.sippFile || null
 
       let paymentMethodCode = formValues.paymentMethod_code ?? null
-      if (!paymentMethodCode) {
+      if (!isUsePaymentNew && !paymentMethodCode) {
         if (formValues.paymentType === 'jkn' || formValues.paymentType === 'jkmm') {
           paymentMethodCode = 'insurance'
         } else if (formValues.paymentType === 'spm') {
diff --git a/app/handlers/encounter-init.handler.ts b/app/handlers/encounter-init.handler.ts
index 275228d7..83cdb529 100644
--- a/app/handlers/encounter-init.handler.ts
+++ b/app/handlers/encounter-init.handler.ts
@@ -42,6 +42,7 @@ const PrescriptionAsync = defineAsyncComponent(() => import('~/components/conten
 const CpLabOrderAsync = defineAsyncComponent(() => import('~/components/content/cp-lab-order/main.vue'))
 const ProcedureRoomOrderAsync = defineAsyncComponent(() => import('~/components/content/procedure-room-order/main.vue'))
 const MicroLabOrderAsync = defineAsyncComponent(() => import('~/components/content/micro-lab-order/main.vue'))
+const ApLabOrderAsync = defineAsyncComponent(() => import('~/components/content/ap-lab-order/main.vue'))
 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'))
@@ -54,6 +55,11 @@ const PrbListAsync = defineAsyncComponent(() => import('~/components/content/prb
 const SurgeryReportListAsync = defineAsyncComponent(() => import('~/components/content/surgery-report/list.vue'))
 const VaccineDataListAsync = defineAsyncComponent(() => import('~/components/content/vaccine-data/list.vue'))
 const InitialNursingStudyAsync = defineAsyncComponent(() => import('~/components/content/initial-nursing/entry.vue'))
+const AssessmentEducationEntryAsync = defineAsyncComponent(
+  () => import('~/components/content/assessment-education/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: {
@@ -62,19 +68,17 @@ const defaultKeys: Record<string, any> = {
     classCode: ['ambulatory', 'emergency', 'inpatient'],
     unit: 'all',
   },
-  // NOTE : HIDDEN UNTIL IT IS READY
-  // earlyNurseryAssessment: {
-  //   id: 'early-nursery-assessment',
-  //   title: 'Pengkajian Awal Keperawatan',
-  //   classCode: ['ambulatory', 'emergency', 'inpatient'],
-  //   unit: 'all',
-  // },
+  earlyNurseryAssessment: {
+    id: 'early-nursery-assessment',
+    title: 'Pengkajian Awal Keperawatan',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+  },
   earlyMedicalAssessment: {
     id: 'early-medical-assessment',
     title: 'Pengkajian Awal Medis',
     classCode: ['ambulatory', 'emergency', 'inpatient'],
     unit: 'all',
-    afterId: 'early-medical-assessment',
   },
   earlyMedicalRehabAssessment: {
     id: 'rehab-medical-assessment',
@@ -83,27 +87,31 @@ const defaultKeys: Record<string, any> = {
     unit: 'rehab',
     afterId: 'early-medical-assessment',
   },
-  fkr: {
-    id: 'fkr',
-    title: 'FKR',
-    classCode: ['ambulatory', 'emergency', 'inpatient'],
-    unit: 'all',
+  functionAssessment: {
+    id: 'function-assessment',
+    title: 'Asesmen Fungsi',
+    classCode: ['ambulatory'],
+    unit: 'rehab',
+    afterId: 'rehab-medical-assessment',
   },
-  // NOTE: Replaced by FRK
-  // functionAssessment: {
-  //   id: 'function-assessment',
-  //   title: 'Asesmen Fungsi',
-  //   classCode: ['ambulatory'],
-  //   unit: 'rehab',
-  //   afterId: 'rehab-medical-assessment',
-  // },
   // therapyProtocol: {
   //   id: 'therapy-protocol',
   //   classCode: ['ambulatory'],
   //   title: 'Protokol Terapi',
   //   unit: 'rehab',
   //   afterId: 'function-assessment',
-  // },
+  initialNursingStudy: {
+    id: 'initial-nursing-study',
+    title: 'Kajian Awal Keperawatan',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+  },
+  fkr: {
+    id: 'fkr',
+    title: 'FKR',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+  },
   chemotherapyProtocol: {
     id: 'chemotherapy-protocol',
     title: 'Protokol Kemoterapi',
@@ -172,8 +180,8 @@ const defaultKeys: Record<string, any> = {
     classCode: ['ambulatory', 'emergency', 'inpatient'],
     unit: 'all',
   },
-  paLabOrder: {
-    id: 'pa-lab-order',
+  apLabOrder: {
+    id: 'ap-lab-order',
     title: 'Order Lab PA',
     classCode: ['ambulatory', 'emergency', 'inpatient'],
     unit: 'all',
@@ -226,6 +234,12 @@ const defaultKeys: Record<string, any> = {
     classCode: ['ambulatory', 'emergency'],
     unit: 'all',
   },
+  kfr: {
+    id: 'kfr',
+    title: 'KFR',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+  },
   refBack: {
     id: 'reference-back',
     title: 'PRB',
@@ -262,12 +276,18 @@ const defaultKeys: Record<string, any> = {
     classCode: ['ambulatory', 'emergency', 'inpatient'],
     unit: 'all',
   },
-  initialNursingStudy: {
-    id: 'initial-nursing-study',
-    title: 'Kajian Awal Keperawatan',
+  // initialNursingStudy: {
+  //   id: 'initial-nursing-study',
+  //   title: 'Kajian Awal Keperawatan',
+  //   classCode: ['ambulatory', 'emergency', 'inpatient'],
+  //   unit: 'all',
+  // },
+  summaryMedic: {
+    id: 'summary-medic',
+    title: 'Profil Ringkasan Medis',
     classCode: ['ambulatory', 'emergency', 'inpatient'],
     unit: 'all',
-  },
+  }
 }
 
 export function getItemsByClassCode(classCode: string, items: EncounterItem[]) {
@@ -353,9 +373,12 @@ export function injectComponents(id: string | number, data: EncounterListData, m
     }
   }
   if (currentKeys?.educationAssessment) {
-    // TODO: add component for education assessment
-    currentKeys.educationAssessment['component'] = null
-    currentKeys.educationAssessment['props'] = { encounter_id: id }
+    currentKeys.educationAssessment['component'] = AssessmentEducationEntryAsync
+    currentKeys.educationAssessment['props'] = {
+      encounter: data?.encounter,
+      type: 'education-assessment',
+      label: currentKeys.educationAssessment['title'],
+    }
   }
   if (currentKeys?.generalConsent) {
     currentKeys.generalConsent['component'] = GeneralConsentListAsync
@@ -385,10 +408,10 @@ export function injectComponents(id: string | number, data: EncounterListData, m
     currentKeys.microLabOrder['component'] = MicroLabOrderAsync
     currentKeys.microLabOrder['props'] = { encounter_id: id }
   }
-  if (currentKeys?.paLabOrder) {
-    // TODO: add component for paLabOrder
-    currentKeys.paLabOrder['component'] = null
-    currentKeys.paLabOrder['props'] = { encounter_id: id }
+  if (currentKeys?.apLabOrder) {
+    // TODO: add component for apLabOrder
+    currentKeys.apLabOrder['component'] = ApLabOrderAsync
+    currentKeys.apLabOrder['props'] = { encounter_id: id }
   }
   if (currentKeys?.procedureRoomOrder) {
     currentKeys.procedureRoomOrder['component'] = ProcedureRoomOrderAsync
@@ -415,9 +438,9 @@ export function injectComponents(id: string | number, data: EncounterListData, m
     currentKeys.refBack['component'] = PrbListAsync
     currentKeys.refBack['props'] = { encounter: data?.encounter }
   }
-  if (currentKeys?.fkr) {
-    currentKeys.fkr['component'] = KfrListAsync
-    currentKeys.fkr['props'] = { encounter: data?.encounter }
+  if (currentKeys?.kfr) {
+    currentKeys.kfr['component'] = KfrListAsync
+    currentKeys.kfr['props'] = { encounter: data?.encounter }
   }
   if (currentKeys?.screening) {
     // TODO: add component for screening
@@ -447,6 +470,24 @@ export function injectComponents(id: string | number, data: EncounterListData, m
     currentKeys.initialNursingStudy['props'] = { encounter: data?.encounter }
   }
 
+  if (currentKeys?.initialNursingStudy) {
+    currentKeys.initialNursingStudy['component'] = InitialNursingStudyAsync
+    currentKeys.initialNursingStudy['props'] = { encounter: data?.encounter }
+  }
+
+  if (currentKeys?.initialNursingStudy) {
+    currentKeys.initialNursingStudy['component'] = InitialNursingStudyAsync
+    currentKeys.initialNursingStudy['props'] = { encounter: data?.encounter }
+  }
+
+  if (currentKeys?.actionReport) {
+    currentKeys.actionReport['component'] = ActionReportEntryAsync
+    currentKeys.actionReport['props'] = {
+      encounter: data?.encounter,
+      type: 'action-report',
+      label: currentKeys.actionReport['title'],
+    }
+  }
   return currentKeys
 }
 
@@ -502,12 +543,9 @@ export function mapResponseToEncounter(result: any): any {
       ? result.visitDate
       : result.registeredAt || result.patient?.registeredAt || null,
     adm_employee_id: result.adm_employee_id || 0,
-    adm_employee: result.adm_employee || null,
-    responsible_nurse_code: result.responsible_nurse_code || null,
-    responsible_nurse: result.responsible_nurse || null,
-    appointment_doctor_code: result.appointment_doctor_code || null,
+    appointment_doctor_id: result.appointment_doctor_id || null,
+    responsible_doctor_id: result.responsible_doctor_id || null,
     appointment_doctor: result.appointment_doctor || null,
-    responsible_doctor_code: result.responsible_doctor_id || null,
     responsible_doctor: result.responsible_doctor || null,
     refSource_name: result.refSource_name || null,
     appointment_id: result.appointment_id || null,
@@ -529,13 +567,7 @@ export function mapResponseToEncounter(result: any): any {
   return mapped
 }
 
-export function getMenuItems(
-  id: string | number,
-  props: any,
-  user: any,
-  data: EncounterListData,
-  meta: any,
-) {
+export function getMenuItems(id: string | number, props: any, user: any, data: EncounterListData, meta: any) {
   // const normalClassCode = props.classCode === 'ambulatory' ? 'outpatient' : props.classCode
   const normalClassCode = props.classCode === 'ambulatory' ? 'ambulatory' : props.classCode
   const currentKeys = injectComponents(id, data, meta)
diff --git a/app/handlers/encounter-init.handler.vue.bu b/app/handlers/encounter-init.handler.vue.bu
new file mode 100644
index 00000000..6c1580f1
--- /dev/null
+++ b/app/handlers/encounter-init.handler.vue.bu
@@ -0,0 +1,587 @@
+import { isValidDate } from '~/lib/date'
+import { medicalRoles } from '~/const/common/role'
+
+export interface EncounterItem {
+  id: string
+  title: string
+  classCode?: string[]
+  unit?: string
+  afterId?: string
+  component?: any
+  props?: Record<string, any>
+}
+
+export interface EncounterProps {
+  classCode: 'ambulatory' | 'emergency' | 'inpatient' | 'outpatient'
+  subClassCode: 'reg' | 'rehab' | 'chemo' | 'emg' | 'eon' | 'op' | 'icu' | 'hcu' | 'vk'
+}
+
+export interface EncounterListData {
+  encounter?: any
+  status?: any
+  medicalAssessment?: any
+  medicalAssessmentRehab: any
+  functionAssessment?: any
+  protocolTheraphy?: any
+  protocolChemotherapy?: any
+  medicineProtocolChemotherapy?: any
+  consultation?: any
+  letterOfControl?: any
+}
+
+const StatusAsync = defineAsyncComponent(() => import('~/components/content/encounter/status.vue'))
+const EarlyMedicalRehabListAsync = defineAsyncComponent(() => import('~/components/content/soapi/entry.vue'))
+const EarlyMedicalAssesmentListAsync = defineAsyncComponent(() => import('~/components/content/soapi/entry.vue'))
+const InitialNursingStudyAsync = defineAsyncComponent(() => import('~/components/content/initial-nursing/entry.vue'))
+// const AssesmentFunctionListAsync = defineAsyncComponent(() => import('~/components/content/soapi/entry.vue'))
+const KfrListAsync = defineAsyncComponent(() => import('~/components/content/kfr/main.vue'))
+const ChemoProtocolListAsync = defineAsyncComponent(() => import('~/components/app/chemotherapy/list.protocol.vue'))
+const ChemoMedicineProtocolListAsync = defineAsyncComponent(() => import('~/components/app/chemotherapy/list.medicine.vue'))
+const GeneralConsentListAsync = defineAsyncComponent(() => import('~/components/content/general-consent/entry.vue'))
+const CprjAsync = defineAsyncComponent(() => import('~/components/content/cprj/entry.vue'))
+
+const PrescriptionAsync = defineAsyncComponent(() => import('~/components/content/prescription/main.vue'))
+const DeviceOrderAsync = defineAsyncComponent(() => import('~/components/content/device-order/main.vue'))
+const RadiologyOrderAsync = defineAsyncComponent(() => import('~/components/content/radiology-order/main.vue'))
+const CpLabOrderAsync = defineAsyncComponent(() => import('~/components/content/cp-lab-order/main.vue'))
+const MicroLabOrderAsync = defineAsyncComponent(() => import('~/components/content/micro-lab-order/main.vue'))
+const ApLabOrderAsync = defineAsyncComponent(() => import('~/components/content/ap-lab-order/main.vue'))
+const ProcedureRoomOrderAsync = defineAsyncComponent(() => import('~/components/content/procedure-room-order/main.vue'))
+
+const ConsultationAsync = defineAsyncComponent(() => import('~/components/content/consultation/list.vue'))
+const DocUploadListAsync = defineAsyncComponent(() => import('~/components/content/document-upload/main.vue'))
+const ResumeListAsync = defineAsyncComponent(() => import('~/components/content/resume/main.vue'))
+const ControlLetterListAsync = defineAsyncComponent(() => import('~/components/content/control-letter/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 defaultKeys: Record<string, any> = {
+  status: {
+    id: 'status',
+    title: 'Status Masuk/Keluar',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+  },
+  earlyMedicalRehabAssessment: {
+    id: 'rehab-medical-assessment',
+    title: 'Pengkajian Awal Medis Rehabilitasi Medis',
+    classCode: ['ambulatory'],
+    unit: 'rehab',
+  },
+  earlyMedicalAssessment: {
+    id: 'early-medical-assessment',
+    title: 'Pengkajian Awal Medis',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+    afterId: 'early-medical-assessment',
+  },
+  initialNursingStudy: {
+    id: 'initial-nursing-study',
+    title: 'Kajian Awal Keperawatan',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+  },
+  fkr: {
+    id: 'fkr',
+    title: 'FKR',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'rehab',
+  },
+  chemotherapyProtocol: {
+    id: 'chemotherapy-protocol',
+    title: 'Protokol Kemoterapi',
+    classCode: ['ambulatory'],
+    unit: 'chemo',
+  },
+  chemotherapyMedicine: {
+    id: 'chemotherapy-medicine',
+    title: 'Protokol Obat Kemoterapi',
+    classCode: ['ambulatory'],
+    unit: 'chemo',
+  },
+  educationAssessment: {
+    id: 'education-assessment',
+    title: 'Asesmen Kebutuhan Edukasi',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+  },
+
+  // NOTE: Replaced by FRK
+  // functionAssessment: {
+  //   id: 'function-assessment',
+  //   title: 'Asesmen Fungsi',
+  //   classCode: ['ambulatory'],
+  //   unit: 'rehab',
+  //   afterId: 'rehab-medical-assessment',
+  // },
+  // therapyProtocol: {
+  //   id: 'therapy-protocol',
+  //   classCode: ['ambulatory'],
+  //   title: 'Protokol Terapi',
+  //   unit: 'rehab',
+  //   afterId: 'function-assessment',
+  // },
+  generalConsent: {
+    id: 'general-consent',
+    title: 'General Consent',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+  },
+  patientAmbNote: { // CPRJ
+    id: 'patient-amb-note',
+    title: 'CPRJ',
+    classCode: ['ambulatory', 'emergency'],
+    unit: 'ambulatory',
+  },
+  patientDevNote: { // CPPT
+    id: 'patient-dev-note',
+    title: 'CPP',
+    classCode: ['inpatient'],
+    unit: 'inpatient',
+  },
+
+  prescription: {
+    id: 'prescription',
+    title: 'Order Obat',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+  },
+  deviceOrder: {
+    id: 'device-order',
+    title: 'Order Alkes',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+  },
+  radiologyOrder: {
+    id: 'radiology-order',
+    title: 'Order Radiologi',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+  },
+  cpLabOrder: {
+    id: 'cp-lab-order',
+    title: 'Order Lab PK',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+  },
+  microLabOrder: {
+    id: 'micro-lab-order',
+    title: 'Order Lab Mikro',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+  },
+  paLabOrder: {
+    id: 'pa-lab-order',
+    title: 'Order Lab PA',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+  },
+  procedureRoomOrder: {
+    id: 'procedure-room-order',
+    title: 'Order Ruang Tindakan',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+  },
+  mcuResult: {
+    id: 'mcu-result',
+    title: 'Hasil Penunjang',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+  },
+  procedureReport: {
+    id: 'action-report',
+    title: 'Laporan Tindakan',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+  },
+  operationReport: {
+    id: 'action-report',
+    title: 'Laporan Tindakan',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+  },
+  ambulanceOrder: {
+    id: 'ambulance-order',
+    title: 'Order Ambulans',
+    classCode: ['ambulatory', 'emergency'],
+    unit: 'all',
+  },
+  surgeryReport: {
+    id: 'surgery-report',
+    title: 'Laporan Operasi',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+  },
+  forensic: {
+    id: 'surgery-report',
+    title: 'Laporan Operasi',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+  },
+  consultation: {
+    id: 'consultation',
+    title: 'Konsultasi',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+  },
+  resume: {
+    id: 'resume',
+    title: 'Resume Medis',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+  },
+  controlLetter: {
+    id: 'control-letter',
+    title: 'Surat Kontrol',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+  },
+  inpatientLetter: {
+    id: 'inpatient-letter',
+    title: 'SPRI',
+    classCode: ['ambulatory', 'emergency'],
+    unit: 'all',
+  },
+  refBack: {
+    id: 'reference-back',
+    title: 'PRB',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+  },
+  screening: {
+    id: 'screening',
+    title: 'Skrinning MPP',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+  },
+  supportingDocument: {
+    id: 'supporting-document',
+    title: 'Upload Dokumen Pendukung',
+    classCode: ['ambulatory'],
+    unit: 'all',
+  },
+  vaccineData: {
+    id: 'vaccine-data',
+    title: 'Data Vaksin',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+  },
+  priceList: {
+    id: 'price-list',
+    title: 'Tarif Tindakan',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
+  },
+}
+
+export function getItemsByClassCode(classCode: string, items: EncounterItem[]) {
+  return items.filter((item) => item.classCode?.includes(classCode))
+}
+
+export function getItemsByUnit(unit: string, items: EncounterItem[]) {
+  return items.filter((item) => item.unit === unit)
+}
+
+export function getItemsByIds(ids: string[], items: EncounterItem[]) {
+  return items.filter((item) => ids.includes(item.id))
+}
+
+export function getIndexById(id: string, items: EncounterItem[]) {
+  return items.findIndex((item) => item.id === id)
+}
+
+export const getItemsAll = (classCode: string, unit: string, items: EncounterItem[]) => {
+  const prevItems = [...items]
+  let updateItems = getItemsByClassCode(classCode, prevItems)
+  updateItems = getItemsByUnit(unit, updateItems)
+  return updateItems
+}
+
+export function insertItemByAfterId(id: string, items: EncounterItem[], newItem: EncounterItem) {
+  const index = getIndexById(id, items)
+  if (index > -1) {
+    items.splice(index + 1, 0, newItem)
+  }
+}
+
+export function injectComponents(id: string | number, data: EncounterListData, meta: EncounterListData) {
+  const currentKeys = { ...defaultKeys }
+  if (currentKeys?.status) {
+    currentKeys.status['component'] = StatusAsync
+    currentKeys.status['props'] = { encounter: data?.encounter }
+  }
+  if (currentKeys?.earlyMedicalAssessment) {
+    currentKeys.earlyMedicalAssessment['component'] = EarlyMedicalAssesmentListAsync
+    currentKeys.earlyMedicalAssessment['props'] = {
+      encounter: data?.encounter,
+      type: 'early-medic',
+      label: currentKeys.earlyMedicalAssessment['title'],
+    }
+  }
+  if (currentKeys?.earlyMedicalRehabAssessment) {
+    currentKeys.earlyMedicalRehabAssessment['component'] = EarlyMedicalRehabListAsync
+    currentKeys.earlyMedicalRehabAssessment['props'] = {
+      encounter: data?.encounter,
+      type: 'early-rehab',
+      label: currentKeys.earlyMedicalRehabAssessment['title'],
+    }
+  }
+  if (currentKeys?.functionAssessment) {
+    currentKeys.functionAssessment['component'] = AssesmentFunctionListAsync
+    currentKeys.functionAssessment['props'] = {
+      encounter: data?.encounter,
+      type: 'function',
+      label: currentKeys.functionAssessment['title'],
+    }
+  }
+  if (currentKeys?.therapyProtocol) {
+    // TODO: add component for therapyProtocol
+    currentKeys.therapyProtocol['component'] = null
+    currentKeys.therapyProtocol['props'] = {
+      data: data?.encounter,
+      paginationMeta: meta?.protocolTheraphy,
+    }
+  }
+  if (currentKeys?.chemotherapyProtocol) {
+    currentKeys.chemotherapyProtocol['component'] = ChemoProtocolListAsync
+    currentKeys.chemotherapyProtocol['props'] = {
+      data: data?.encounter,
+      paginationMeta: meta?.protocolChemotherapy,
+    }
+  }
+  if (currentKeys?.chemotherapyMedicine) {
+    currentKeys.chemotherapyMedicine['component'] = ChemoMedicineProtocolListAsync
+    currentKeys.chemotherapyMedicine['props'] = {
+      data: data?.encounter,
+      paginationMeta: meta?.medicineProtocolChemotherapy,
+    }
+  }
+  if (currentKeys?.educationAssessment) {
+    // TODO: add component for education assessment
+    currentKeys.educationAssessment['component'] = null
+    currentKeys.educationAssessment['props'] = { encounter_id: id }
+  }
+  if (currentKeys?.generalConsent) {
+    currentKeys.generalConsent['component'] = GeneralConsentListAsync
+    currentKeys.generalConsent['props'] = { encounter_id: id }
+  }
+  if (currentKeys?.patientAmbNote) {
+    currentKeys.patientAmbNote['component'] = CprjAsync
+    currentKeys.patientAmbNote['props'] = { encounter_id: id }
+  }
+  if (currentKeys?.prescription) {
+    currentKeys.prescription['component'] = PrescriptionAsync
+    currentKeys.prescription['props'] = { encounter_id: id }
+  }
+  if (currentKeys?.deviceOrder) {
+    currentKeys.deviceOrder['component'] = DeviceOrderAsync
+    currentKeys.deviceOrder['props'] = { encounter_id: id }
+  }
+  if (currentKeys?.radiologyOrder) {
+    currentKeys.radiologyOrder['component'] = RadiologyOrderAsync
+    currentKeys.radiologyOrder['props'] = { encounter_id: id }
+  }
+  if (currentKeys?.cpLabOrder) {
+    currentKeys.cpLabOrder['component'] = CpLabOrderAsync
+    currentKeys.cpLabOrder['props'] = { encounter_id: id }
+  }
+  if (currentKeys?.microLabOrder) {
+    currentKeys.microLabOrder['component'] = MicroLabOrderAsync
+    currentKeys.microLabOrder['props'] = { encounter_id: id }
+  }
+  if (currentKeys?.paLabOrder) {
+    // TODO: add component for paLabOrder
+    currentKeys.paLabOrder['component'] = null
+    currentKeys.paLabOrder['props'] = { encounter_id: id }
+  }
+  if (currentKeys?.procedureRoomOrder) {
+    currentKeys.procedureRoomOrder['component'] = ProcedureRoomOrderAsync
+    currentKeys.procedureRoomOrder['props'] = { encounter_id: id }
+  }
+  if (currentKeys?.mcuResult) {
+    // TODO: add component for mcuResult
+    currentKeys.mcuResult['component'] = null
+    currentKeys.mcuResult['props'] = { encounter_id: id }
+  }
+  if (currentKeys?.consultation) {
+    currentKeys.consultation['component'] = ConsultationAsync
+    currentKeys.consultation['props'] = { encounter: data?.encounter }
+  }
+  if (currentKeys?.resume) {
+    currentKeys.resume['component'] = ResumeListAsync
+    currentKeys.resume['props'] = { encounter_id: id }
+  }
+  if (currentKeys?.controlLetter) {
+    currentKeys.controlLetter['component'] = ControlLetterListAsync
+    currentKeys.controlLetter['props'] = { encounter: data?.encounter }
+  }
+  if (currentKeys?.refBack) {
+    currentKeys.refBack['component'] = PrbListAsync
+    currentKeys.refBack['props'] = { encounter: data?.encounter }
+  }
+  if (currentKeys?.fkr) {
+    currentKeys.fkr['component'] = KfrListAsync
+    currentKeys.fkr['props'] = { encounter: data?.encounter }
+  }
+  if (currentKeys?.screening) {
+    // TODO: add component for screening
+    currentKeys.screening['component'] = null
+    currentKeys.screening['props'] = { encounter_id: id }
+  }
+  if (currentKeys?.surgeryReport) {
+    currentKeys.surgeryReport['component'] = SurgeryReportListAsync
+    currentKeys.surgeryReport['props'] = { encounter: data?.encounter }
+  }
+  if (currentKeys?.vaccineData) {
+    currentKeys.vaccineData['component'] = VaccineDataListAsync
+    currentKeys.vaccineData['props'] = { encounter: data?.encounter }
+  }
+  if (currentKeys?.supportingDocument) {
+    currentKeys.supportingDocument['component'] = DocUploadListAsync
+    currentKeys.supportingDocument['props'] = { encounter_id: id }
+  }
+  if (currentKeys?.priceList) {
+    // TODO: add component for priceList
+    currentKeys.priceList['component'] = null
+    currentKeys.priceList['props'] = { encounter_id: id }
+  }
+
+  if (currentKeys?.initialNursingStudy) {
+    currentKeys.initialNursingStudy['component'] = InitialNursingStudyAsync
+    currentKeys.initialNursingStudy['props'] = { encounter: data?.encounter }
+  }
+
+  return currentKeys
+}
+
+export function mergeArrayAt<T>(arraysOne: T[], arraysTwo: T[] | T, deleteCount = 0): T[] {
+  const prevItems = arraysOne.slice()
+  if (!prevItems) return prevItems
+  const nextItems = Array.isArray(arraysTwo) ? arraysTwo : [arraysTwo]
+  if (nextItems.length === 0) return prevItems
+  // determine insertion position using the first item's `id` if available
+  const firstId = (nextItems[0] as any)?.afterId || (prevItems[0] as any)?.id
+  let pos = prevItems.length
+  if (typeof firstId === 'string') {
+    const index = prevItems.findIndex((item: any) => item.id === firstId)
+    pos = index < 0 ? Math.max(prevItems.length + index, 0) : Math.min(index, prevItems.length)
+  }
+  prevItems.splice(pos, deleteCount, ...nextItems)
+  return prevItems
+}
+
+// Function to map API response to Encounter structure
+export function mapResponseToEncounter(result: any): any {
+  if (!result) return null
+
+  // Check if patient and patient.person exist (minimal validation)
+  if (!result.patient || !result.patient.person) {
+    return null
+  }
+
+  const mapped: any = {
+    id: result.id || 0,
+    patient_id: result.patient_id || result.patient?.id || 0,
+    patient: {
+      id: result.patient?.id || 0,
+      number: result.patient?.number || '',
+      person: {
+        id: result.patient?.person?.id || 0,
+        name: result.patient?.person?.name || '',
+        birthDate: result.patient?.person?.birthDate || null,
+        gender_code: result.patient?.person?.gender_code || '',
+        residentIdentityNumber: result.patient?.person?.residentIdentityNumber || null,
+        frontTitle: result.patient?.person?.frontTitle || '',
+        endTitle: result.patient?.person?.endTitle || '',
+        addresses: result.patient?.person?.addresses || [],
+      },
+    },
+    registeredAt: result.registeredAt || result.patient?.registeredAt || null,
+    class_code: result.class_code || '',
+    unit_id: result.unit_id || 0,
+    unit: result.unit || null,
+    specialist_id: result.specialist_id || null,
+    subspecialist_id: result.subspecialist_id || null,
+    visitDate: isValidDate(result.visitDate)
+      ? result.visitDate
+      : result.registeredAt || result.patient?.registeredAt || null,
+    adm_employee_id: result.adm_employee_id || 0,
+    adm_employee: result.adm_employee || null,
+    responsible_nurse_code: result.responsible_nurse_code || null,
+    responsible_nurse: result.responsible_nurse || null,
+    appointment_doctor_code: result.appointment_doctor_code || null,
+    appointment_doctor: result.appointment_doctor || null,
+    responsible_doctor_code: result.responsible_doctor_id || null,
+    responsible_doctor: result.responsible_doctor || null,
+    refSource_name: result.refSource_name || null,
+    appointment_id: result.appointment_id || null,
+    earlyEducation: result.earlyEducation || null,
+    medicalDischargeEducation: result.medicalDischargeEducation || '',
+    admDischargeEducation: result.admDischargeEducation || null,
+    discharge_method_code: result.discharge_method_code || null,
+    discharge_reason: result.dischargeReason || result.discharge_reason || null,
+    discharge_date: result.discharge_date || null,
+    status_code: result.status_code || '',
+    // Payment related fields
+    paymentMethod_code:
+      result.paymentMethod_code && result.paymentMethod_code.trim() !== '' ? result.paymentMethod_code : null,
+    trx_number: result.trx_number || null,
+    member_number: result.member_number || null,
+    ref_number: result.ref_number || null,
+  }
+
+  return mapped
+}
+
+export function getMenuItems(
+  id: string | number,
+  props: any,
+  user: any,
+  data: EncounterListData,
+  meta: any,
+) {
+  // const normalClassCode = props.classCode === 'ambulatory' ? 'outpatient' : props.classCode
+  const normalClassCode = props.classCode === 'ambulatory' ? 'ambulatory' : props.classCode
+  const currentKeys = injectComponents(id, data, meta)
+  const defaultItems: EncounterItem[] = Object.values(currentKeys)
+  const listItemsForOutpatientRehab = mergeArrayAt(
+    getItemsAll('ambulatory', 'all', defaultItems),
+    getItemsAll('ambulatory', 'rehab', defaultItems),
+  )
+  const listItemsForOutpatientChemo = mergeArrayAt(
+    getItemsAll('ambulatory', 'all', defaultItems),
+    getItemsAll('ambulatory', 'chemo', defaultItems),
+  )
+  const listItems: Record<string, Record<string, Record<string, any>>> = {
+    'installation|ambulatory': {
+      'unit|rehab': {
+        items: listItemsForOutpatientRehab,
+        roles: medicalRoles,
+      },
+      'unit|chemo': {
+        items: listItemsForOutpatientChemo,
+        roles: medicalRoles,
+      },
+      all: getItemsAll('ambulatory', 'all', defaultItems),
+    },
+    'installation|emergency': {
+      all: getItemsAll('emergency', 'all', defaultItems),
+    },
+    'installation|inpatient': {
+      all: getItemsAll('inpatient', 'all', defaultItems),
+    },
+  }
+  const currentListItems = listItems[`installation|${normalClassCode}`]
+  if (!currentListItems) return []
+  const unitCode = user?.unit_code ? `unit|${user.unit_code}` : 'all'
+  const currentUnitItems: any = currentListItems[`${unitCode}`]
+  if (!currentUnitItems) return []
+  let menus = []
+  if (currentUnitItems.roles && currentUnitItems.roles?.includes(user.activeRole)) {
+    menus = [...currentUnitItems.items]
+  } else {
+    menus = unitCode !== 'all' && currentUnitItems?.items ? [...currentUnitItems.items] : [...currentUnitItems]
+  }
+  return menus
+}
diff --git a/app/handlers/item-price.handler.ts b/app/handlers/item-price.handler.ts
new file mode 100644
index 00000000..bd7dbefe
--- /dev/null
+++ b/app/handlers/item-price.handler.ts
@@ -0,0 +1,24 @@
+// Handlers
+import { genCrudHandler } from '~/handlers/_handler'
+
+// Services
+import { create, update, remove } from '~/services/item-price.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({
+  create,
+  update,
+  remove,
+})
diff --git a/app/handlers/item.handler.ts b/app/handlers/item.handler.ts
new file mode 100644
index 00000000..3911df83
--- /dev/null
+++ b/app/handlers/item.handler.ts
@@ -0,0 +1,24 @@
+// Handlers
+import { genCrudHandler } from '~/handlers/_handler'
+
+// Services
+import { create, update, remove } from '~/services/item.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({
+  create,
+  update,
+  remove,
+})
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/layouts/default.vue b/app/layouts/default.vue
index a79ecb98..8799fdd8 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -3,11 +3,10 @@ import CardContent from '~/components/pub/ui/card/CardContent.vue'
 
 const route = useRoute()
 
-
 const contentFrame = computed(() => route.meta.contentFrame)
 const contentPadding = computed(() => route.meta.contentPadding || 'p-4 2xl:p-5')
-const contentUseCard = computed(() => route.meta.contentUseCard === false ? false : true)
-console.log(route.meta.contentUseCard,contentUseCard)
+const contentUseCard = computed(() => (route.meta.contentUseCard === false ? false : true))
+console.log(route.meta.contentUseCard, contentUseCard)
 const contentFrameClass = computed(() => {
   switch (contentFrame.value) {
     case 'cf-container-2xl':
@@ -33,7 +32,7 @@ const contentFrameClass = computed(() => {
     <LayoutAppSidebar />
     <SidebarInset>
       <LayoutHeader />
-      <div :class="`w-full flex justify-center ${contentPadding} ${contentFrameClass}`">
+      <div :class="`flex w-full justify-center ${contentPadding} ${contentFrameClass}`">
         <div v-if="contentFrame !== 'cf-no-frame'">
           <Card v-if="contentUseCard">
             <CardContent>
diff --git a/app/lib/clinical.constants.ts b/app/lib/clinical.constants.ts
new file mode 100644
index 00000000..3b469499
--- /dev/null
+++ b/app/lib/clinical.constants.ts
@@ -0,0 +1,116 @@
+export const generalEduCode = {
+  'right-obg': 'Hak dan kewajiban pasien dan keluarga',
+  'general-consent': 'General Consent',
+  service: 'Pelayanan yang disediakan (jam pelayanan, akses pelayanan dan proses pelayanan)',
+  'all-care-service': 'Sumber alternatif asuhan di tempat lain/faskes lain',
+  'home-plan': 'Rencana tindakan di rumah',
+  'home-care': 'Kebutuhan perawatan di rumah',
+  orientation: 'Orientasi Ruangan',
+  'fall-risk-prevention': 'Pencegahan risiko jatuh',
+  'alt-care': 'Alternatif pelayanan',
+  'act-delay': 'Penundaan Tindakan',
+  others: 'Lain-lain',
+} as const
+
+export type GeneralEduCodeKey = keyof typeof generalEduCode
+
+export const specialEduCode = {
+  'disease-diag-dev': 'Diagnosa penyakit dan perkembangannya',
+  'safe-med-usage': 'Penggunaan obat yang aman',
+  'side-effect': 'Efek samping dan reaksi obat',
+  diet: 'Diet/Nutrisi',
+  'pain-mgmt': 'Manajemen nyeri',
+  'medical-eq-usage': 'Penggunaan Peralatan Medis',
+  'rehab-technique': 'Teknik Rehabilitasi',
+  'prevention-act': 'Tindakan pencegahan (cuci tangan, pemasangan gelang)',
+} as const
+
+export type SpecialEduCodeKey = keyof typeof specialEduCode
+
+export const eduAssessmentCode = {
+  'learn-ability': 'Kemampuan Belajar',
+  'learn-will': 'Kemauan Belajar',
+  obstacle: 'Hambatan',
+  'learn-method': 'Metode Pembelajaran',
+  lang: 'Bahasa',
+  'lang-obstacle': 'Hambatan Bahasa',
+  belief: 'Keyakinan',
+} as const
+
+export type EduAssessmentCodeKey = keyof typeof eduAssessmentCode
+
+export const abilityCode = {
+  able: 'Mampu',
+  'not-able': 'Tidak Mampu',
+} as const
+
+export type AbilityCodeKey = keyof typeof abilityCode
+
+export const willCode = {
+  ready: 'Siap',
+  interested: 'Tertarik',
+  'not-interested': 'Tidak Tertarik',
+} as const
+
+export type WillCodeKey = keyof typeof willCode
+
+export const medObstacleCode = {
+  hearing: 'Pendengaran',
+  sight: 'Penglihatan',
+  physical: 'Fisik',
+  emotional: 'Emosional',
+  cognitif: 'Kognitif',
+} as const
+
+export type MedObstacleCodeKey = keyof typeof medObstacleCode
+
+export const learnMethodCode = {
+  demo: 'Demonstrasi',
+  'discuss-leaflet': 'Diskusi Leaflet',
+} as const
+
+export type LearnMethodCodeKey = keyof typeof learnMethodCode
+
+export const langClassCode = {
+  ind: 'Indonesia',
+  region: 'Daerah',
+  foreign: 'Asing',
+} as const
+
+export type LangClassCodeKey = keyof typeof langClassCode
+
+export const translatorSrcCode = {
+  team: 'Tim Penerjemah',
+  family: 'Keluarga',
+} as const
+
+export type TranslatorSrcCodeKey = keyof typeof translatorSrcCode
+
+// helpers
+type EduCodeType = 'general' | 'special'
+export function serializeKeyToBoolean(type: EduCodeType, selected: string[]): Record<string, boolean> {
+  switch (type) {
+    case 'general': {
+      return Object.keys(generalEduCode).reduce(
+        (acc, key) => {
+          acc[key] = selected.includes(key)
+          return acc
+        },
+        {} as Record<string, boolean>,
+      )
+    }
+
+    case 'special': {
+      return Object.keys(specialEduCode).reduce(
+        (acc, key) => {
+          acc[key] = selected.includes(key)
+          return acc
+        },
+        {} as Record<string, boolean>,
+      )
+    }
+
+    default:
+      throw new Error('unknown type to serialize')
+  }
+}
diff --git a/app/lib/constants.vclaim.ts b/app/lib/constants.vclaim.ts
index 84fe5d52..8fd5cccb 100644
--- a/app/lib/constants.vclaim.ts
+++ b/app/lib/constants.vclaim.ts
@@ -79,6 +79,7 @@ export const paymentTypes: Record<string, string> = {
   jkmm: 'JKMM (Jaminan Kesehatan Mandiri)',
   spm: 'SPM (Sistem Pembayaran Mandiri)',
   pks: 'PKS (Pembiayaan Kesehatan Sosial)',
+  umum: 'Umum',
 }
 
 export const sepRefTypeCodes: Record<string, string> = {
diff --git a/app/lib/page-checker.ts b/app/lib/page-checker.ts
index f346f34a..40cf5551 100644
--- a/app/lib/page-checker.ts
+++ b/app/lib/page-checker.ts
@@ -19,25 +19,18 @@ export function usePageChecker() {
   ) {
     // Check if user has access to this page, need to use try - catch for proper handling
     const hasAccess = checkRole(roleAccess)
-    if (!hasAccess) {
-      navigateTo('/403')
-    }
+    if (!hasAccess) return false
 
     // Define permission-based computed properties
-    const canCreate = hasCreateAccess(roleAccess)
-    const canRead = hasReadAccess(roleAccess)
-    const canUpdate = hasUpdateAccess(roleAccess)
-    const canDelete = hasDeleteAccess(roleAccess)
-
     switch (type) {
       case 'create':
-        return canCreate
+        return hasCreateAccess(roleAccess)
       case 'read':
-        return canRead
+        return hasReadAccess(roleAccess)
       case 'update':
-        return canUpdate
+        return hasUpdateAccess(roleAccess)
       case 'delete':
-        return canDelete
+        return hasDeleteAccess(roleAccess)
       default:
         return false
     }
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/lib/utils.ts b/app/lib/utils.ts
index 180320ae..cc436459 100644
--- a/app/lib/utils.ts
+++ b/app/lib/utils.ts
@@ -9,6 +9,10 @@ export interface SelectOptionType<_T = string> {
   label: string
   code?: string
 }
+export interface CheckItem {
+  id: string
+  label: string
+}
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
@@ -29,6 +33,15 @@ export function mapToComboboxOptList(items: Record<string, string>): SelectOptio
   return result
 }
 
+export function mapToCheckItems<T extends Record<string, string>, K extends keyof T & string>(
+  items: T,
+): { id: K; label: T[K] }[] {
+  return Object.entries(items).map(([key, value]) => ({
+    id: key as K,
+    label: value as T[K],
+  }))
+}
+
 /**
  * Mengkonversi string menjadi title case (huruf pertama setiap kata kapital)
  * @param str - String yang akan dikonversi
@@ -38,7 +51,6 @@ export function toTitleCase(str: string): string {
   return str.toLowerCase().replace(/\b\w/g, (char) => char.toUpperCase())
 }
 
-
 /**
  * Menghitung umur berdasarkan tanggal lahir
  * @param birthDate - Tanggal lahir dalam format Date atau string
diff --git a/app/models/_base.ts b/app/models/_base.ts
index 6aaa99fc..ed6f7204 100644
--- a/app/models/_base.ts
+++ b/app/models/_base.ts
@@ -1,4 +1,3 @@
-
 export interface Base {
   id: number
   createdAt: string | null
@@ -20,7 +19,9 @@ export interface TreeItem {
 
 export function genBase(): Base {
   return {
-    id: 0,
+    // -1 buat mock data
+    // backend harusnya non-negative/ > 0  (untuk auto increment constraint) jadi harusnya aman ya
+    id: -1,
     createdAt: '',
     updatedAt: '',
   }
diff --git a/app/models/doctor.ts b/app/models/doctor.ts
index 297f9372..17c4f803 100644
--- a/app/models/doctor.ts
+++ b/app/models/doctor.ts
@@ -1,8 +1,8 @@
-import { type Base, genBase } from "./_base"
-import { type Employee, genEmployee } from "./employee"
-import type { Unit } from "./unit"
-import type { Specialist } from "./specialist"
-import type { Subspecialist } from "./subspecialist"
+import { type Base, genBase } from './_base'
+import { type Employee, genEmployee } from './employee'
+import type { Unit } from './unit'
+import type { Specialist } from './specialist'
+import type { Subspecialist } from './subspecialist'
 
 export interface Doctor extends Base {
   employee_id: number
diff --git a/app/models/encounter.ts b/app/models/encounter.ts
index 56ff2af7..95bccff0 100644
--- a/app/models/encounter.ts
+++ b/app/models/encounter.ts
@@ -52,7 +52,7 @@ export function genEncounter(): Encounter {
         patient: genPatient(),
         registeredAt: '',
         class_code: '',
-        unit_code: '',
+        unit_code: 0,
         unit: genUnit(),
         visitDate: '',
         adm_employee_id: 0,
diff --git a/app/models/nurse.ts b/app/models/nurse.ts
index 5f511781..d5e1f95f 100644
--- a/app/models/nurse.ts
+++ b/app/models/nurse.ts
@@ -1,9 +1,7 @@
 import { type Base, genBase } from "./_base"
-import type { Employee } from "./employee"
 
 export interface Nurse extends Base {
   employee_id: number
-  employee?: Employee
   ihs_number?: string
   unit_id: number
   infra_id: number
diff --git a/app/models/person.ts b/app/models/person.ts
index 06b313b8..f2c400b6 100644
--- a/app/models/person.ts
+++ b/app/models/person.ts
@@ -1,7 +1,7 @@
-import { type Base, genBase } from "./_base"
-import type { PersonAddress } from "./person-address"
-import type { PersonContact } from "./person-contact"
-import type { PersonRelative } from "./person-relative"
+import { type Base, genBase } from './_base'
+import type { PersonAddress } from './person-address'
+import type { PersonContact } from './person-contact'
+import type { PersonRelative } from './person-relative'
 import type { Ethnic } from './ethnic'
 import type { Language } from './language'
 import type { Regency } from './regency'
@@ -43,6 +43,15 @@ export interface Person extends Base {
 export function genPerson(): Person {
   return {
     ...genBase(),
-    name: '',
+    frontTitle: '[MOCK] dr. ',
+    name: 'Agus Iwan Setiawan',
+    endTitle: 'Sp.Bo',
   }
 }
+
+export function parseName(person: Person): string {
+  if (!person) return ''
+  const fullName = [person.frontTitle, person.name, person.endTitle].filter(Boolean).join(' ').trim()
+
+  return fullName
+}
diff --git a/app/pages/(features)/inpatient/encounter/index.vue b/app/pages/(features)/inpatient/encounter/index.vue
index 189b2611..334a0c29 100644
--- a/app/pages/(features)/inpatient/encounter/index.vue
+++ b/app/pages/(features)/inpatient/encounter/index.vue
@@ -41,9 +41,7 @@ const canRemove = getPageAccess(roleAccess, 'delete')
     <div v-if="hasAccess">
       <Content
         class-code="inpatient"
-        sub-class-code="vk"
-        :can-create="canCreate"
-        :can-delete="canRemove"
+        sub-class-code="reg"
       />
     </div>
     <Error
diff --git a/app/pages/(features)/item-price/index.vue b/app/pages/(features)/item-price/index.vue
new file mode 100644
index 00000000..b97966e5
--- /dev/null
+++ b/app/pages/(features)/item-price/index.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import Error from '~/components/pub/my-ui/error/error.vue'
+import Content from '~/components/content/item-price/list.vue'
+
+const route = useRoute()
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['emp|reg', 'emp|nur', 'emp|doc', 'emp|miw', 'emp|thr', 'emp|nut', 'emp|pha', 'emp|lab'],
+  title: 'Daftar Item Harga',
+  contentFrame: 'cf-container-lg',
+})
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const canRead = true
+</script>
+
+<template>
+  <template v-if="canRead">
+    <Content />
+  </template>
+  <Error
+    v-else
+    :status-code="403"
+  />
+</template>
diff --git a/app/pages/(features)/item/index.vue b/app/pages/(features)/item/index.vue
new file mode 100644
index 00000000..33fc9b23
--- /dev/null
+++ b/app/pages/(features)/item/index.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import Error from '~/components/pub/my-ui/error/error.vue'
+import Content from '~/components/content/item/list.vue'
+
+const route = useRoute()
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['emp|reg', 'emp|nur', 'emp|doc', 'emp|miw', 'emp|thr', 'emp|nut', 'emp|pha', 'emp|lab'],
+  title: 'Daftar Item',
+  contentFrame: 'cf-container-lg',
+})
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const canRead = true
+</script>
+
+<template>
+  <template v-if="canRead">
+    <Content />
+  </template>
+  <Error
+    v-else
+    :status-code="403"
+  />
+</template>
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/pages/(features)/rehab/encounter/[id]/education-assessment/add.vue b/app/pages/(features)/rehab/encounter/[id]/education-assessment/add.vue
new file mode 100644
index 00000000..98eee259
--- /dev/null
+++ b/app/pages/(features)/rehab/encounter/[id]/education-assessment/add.vue
@@ -0,0 +1,43 @@
+<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 Assessment Education',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+const { checkRole, hasReadAccess } = useRBAC()
+
+// Check if user has access to this page
+// const hasAccess = checkRole(roleAccess)
+const hasAccess = true
+if (!hasAccess) {
+  navigateTo('/403')
+}
+
+// Define permission-based computed properties
+const canRead = hasReadAccess(roleAccess)
+</script>
+
+<template>
+  <div>
+    <div v-if="canRead">
+      <ContentAssessmentEducationAdd />
+    </div>
+    <Error
+      v-else
+      :status-code="403"
+    />
+  </div>
+</template>
diff --git a/app/schemas/action-report.schema.ts b/app/schemas/action-report.schema.ts
new file mode 100644
index 00000000..cd23eb28
--- /dev/null
+++ b/app/schemas/action-report.schema.ts
@@ -0,0 +1,121 @@
+import { z } from 'zod'
+
+const isoDateTime = z
+  .string()
+  .min(1, 'Tanggal / waktu wajib diisi')
+  .refine((val) => {
+    const date = new Date(val)
+    return !isNaN(date.getTime())
+  }, 'Format tanggal / waktu tidak valid')
+
+const positiveInt = z.coerce.number().int().nonnegative()
+
+const OperatorTeamSchema = z.object({
+  dpjpId: z.coerce
+    .number({
+      invalid_type_error: 'Silahkan pilih dpjp terlebih dahulu',
+    })
+    .int(),
+  operatorName: z.string({
+    required_error: 'Masukkan nama operator',
+  }),
+  assistantOperatorName: z.string({
+    required_error: 'Masukkan nama asisten operator',
+  }),
+  instrumentNurseName: z.string({
+    required_error: 'Masukkan nama instrumentir',
+  }),
+
+  surgeryDate: isoDateTime,
+  actionDiagnosis: z.string(),
+
+  postSurgeryNurseId: z.number().int().optional().nullable(),
+})
+
+const ProcedureSchema = z.object({
+  id: z.number().int(),
+  name: z.string().min(1),
+  code: z.string().min(1),
+})
+
+const OperationExecutionSchema = z.object({
+  surgeryType: z.enum(['kecil', 'sedang', 'besar', 'khusus'], { required_error: 'Silahkan pilih jenis operasi' }),
+  billingCode: z.string({
+    required_error: 'Silahkan pilih kode billing',
+  }),
+  operationSystem: z.enum(['khusus', 'cito', 'efektif', 'urgent'], { required_error: 'Silahkan pilih sistem operasi' }),
+
+  operationStartAt: isoDateTime,
+  operationEndAt: isoDateTime,
+
+  anesthesiaStartAt: isoDateTime,
+  anesthesiaEndAt: isoDateTime,
+
+  surgeryCleanType: z.enum(['bersih', 'bersih_terkontaminasi', 'terkontaminasi', 'kotor']).optional(),
+  surgeryNumber: z.enum(['first', 'retry']).optional(),
+
+  birthPlaceNote: z.string().optional(),
+  personWeight: positiveInt.optional(),
+  birthCondition: z.string().optional(),
+
+  operationDescription: z.string({
+    required_error: 'Mohon lengkapi uraian operasi',
+  }),
+
+  bleedingAmountCc: positiveInt.optional(),
+
+  birthRemark: z.enum(['lahir_hidup', 'lahir_mati']).optional(),
+})
+
+const BloodInputSchema = z
+  .object({
+    type: z.enum(['prc', 'wb', 'ffp', 'tc']),
+    amount: z.object({
+      prc: z.coerce.number().optional(),
+      wb: z.coerce.number().optional(),
+      ffp: z.coerce.number().optional(),
+      tc: z.coerce.number().optional(),
+    }),
+  })
+  .transform((val) => ({
+    type: val.type,
+    amount: Object.fromEntries(
+      ['prc', 'wb', 'ffp', 'tc'].map((k) => [k, val.type === k ? (val.amount[k] ?? null) : null]),
+    ),
+  }))
+
+const ImplantSchema = z.object({
+  brand: z.string().optional(),
+  name: z.string().optional(),
+  stickerNumber: z.string().optional(),
+  companionName: z.string().optional(),
+})
+
+const SpecimenSchema = z.object({
+  destination: z.string({
+    required_error: 'Silahkan pilih specimen',
+  }),
+})
+
+const TissueNoteSchema = z.object({
+  note: z
+    .string()
+    .trim()
+    .transform((val) => (val === '' ? undefined : val))
+    .optional(),
+})
+
+export const ActionReportSchema = z.object({
+  operatorTeam: OperatorTeamSchema,
+  procedures: z.array(ProcedureSchema).min(1, { message: 'Silahkan pilih prosedur' }),
+
+  operationExecution: OperationExecutionSchema,
+
+  bloodInput: BloodInputSchema.optional(),
+  implant: ImplantSchema.optional(),
+  specimen: SpecimenSchema.optional(),
+
+  tissueNotes: z.array(TissueNoteSchema).optional(),
+})
+
+export type ActionReportFormData = z.infer<typeof ActionReportSchema>
diff --git a/app/schemas/encounter.schema.ts b/app/schemas/encounter.schema.ts
index 872c1e97..e3c9affc 100644
--- a/app/schemas/encounter.schema.ts
+++ b/app/schemas/encounter.schema.ts
@@ -4,9 +4,8 @@ import { InternalReferenceSchema } from './internal-reference.schema'
 // Check In
 const CheckInSchema = z.object({
   // registeredAt: z.string({ required_error: 'Tanggal masuk harus diisi' }),
-  responsible_doctor_code: z.string({ required_error: 'Dokter harus diisi' }),
-  // adm_employee_id: z.number({ required_error: 'PJA harus diisi' }).gt(0, 'PJA harus diisi'),
-  registeredAt: z.string({ required_error: 'waktu harus diisi' }),
+  responsible_doctor_id: z.number({ required_error: 'Dokter harus diisi' }).gt(0, 'Dokter harus diisi'),
+  adm_employee_id: z.number({ required_error: 'PJA harus diisi' }).gt(0, 'PJA harus diisi'),
 })
 type CheckInFormData = z.infer<typeof CheckInSchema>
 
diff --git a/app/schemas/integration-encounter.schema.ts b/app/schemas/integration-encounter.schema.ts
index f2c8dfce..bb6749c8 100644
--- a/app/schemas/integration-encounter.schema.ts
+++ b/app/schemas/integration-encounter.schema.ts
@@ -1,3 +1,4 @@
+import { isValid } from "date-fns"
 import { z } from 'zod'
 
 const ERROR_MESSAGES = {
@@ -16,6 +17,7 @@ const ERROR_MESSAGES = {
 }
 
 const ACCEPTED_UPLOAD_TYPES = ['image/jpeg', 'image/png', 'application/pdf']
+const isValidationSep = false
 
 const IntegrationEncounterSchema = z
   .object({
@@ -116,7 +118,7 @@ const IntegrationEncounterSchema = z
   .refine(
     (data) => {
       // If payment type is jkn and SEP type is selected, then SEP number is required
-      if (data.paymentMethod_code === 'jkn' && data.sepType && data.sepType.trim() !== '') {
+      if (isValidationSep && data.paymentMethod_code === 'jkn' && data.sepType && data.sepType.trim() !== '') {
         return data.sepNumber && data.sepNumber.trim() !== ''
       }
       return true
diff --git a/app/schemas/item-price.schema.ts b/app/schemas/item-price.schema.ts
new file mode 100644
index 00000000..a9408a9c
--- /dev/null
+++ b/app/schemas/item-price.schema.ts
@@ -0,0 +1,12 @@
+import { z } from 'zod'
+
+const ItemPriceSchema = z.object({
+  item_code: z.string({ required_error: 'Item harus diisi' }).min(1, 'Item harus diisi'),
+  price: z.number({ required_error: 'Harga harus diisi' }).min(0, 'Harga tidak boleh kurang dari 0'),
+  insuranceCompany_code: z.string({ required_error: 'Perusahaan Asuransi harus diisi' }).min(1, 'Perusahaan Asuransi harus diisi'),
+})
+
+type ItemPriceFormData = z.infer<typeof ItemPriceSchema>
+
+export { ItemPriceSchema }
+export type { ItemPriceFormData }
diff --git a/app/schemas/item.schema.ts b/app/schemas/item.schema.ts
new file mode 100644
index 00000000..1d69a4b8
--- /dev/null
+++ b/app/schemas/item.schema.ts
@@ -0,0 +1,17 @@
+import { z } from 'zod'
+
+const ItemSchema = z.object({
+  code: z.string({ required_error: 'Kode harus diisi' }).min(1, 'Kode minimum 1 karakter'),
+  name: z.string({ required_error: 'Nama harus diisi' }).min(1, 'Nama minimum 1 karakter'),
+  itemGroup_code: z.string({ required_error: 'Item Group harus diisi' }).min(1, 'Item Group harus diisi'),
+  uom_code: z.string({ required_error: 'UOM harus diisi' }).min(1, 'UOM harus diisi'),
+  infra_code: z.string({ required_error: 'Infra harus diisi' }).optional(),
+  stock: z.number({ required_error: 'Stok harus diisi' }).min(0, 'Stok tidak boleh kurang dari 0').optional(),
+  buyingPrice: z.number({ required_error: 'Harga Beli harus diisi' }).min(0, 'Harga Beli tidak boleh kurang dari 0').optional(),
+  sellingPrice: z.number({ required_error: 'Harga Jual harus diisi' }).min(0, 'Harga Jual tidak boleh kurang dari 0').optional(),
+})
+
+type ItemFormData = z.infer<typeof ItemSchema>
+
+export { ItemSchema }
+export type { ItemFormData }
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/assessment-education.service.ts b/app/services/assessment-education.service.ts
new file mode 100644
index 00000000..251ea1f9
--- /dev/null
+++ b/app/services/assessment-education.service.ts
@@ -0,0 +1,28 @@
+// Base
+import * as base from './_crud-base'
+
+// Types
+import type { EduAssessmentRaw, EduAssessment } from '~/models/edu-assessment'
+
+const path = '/api/v1/edu-assessment'
+const name = 'edu-assessment'
+
+export function create(data: EduAssessmentRaw) {
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}
diff --git a/app/services/item-group.service.ts b/app/services/item-group.service.ts
new file mode 100644
index 00000000..c7c2d82b
--- /dev/null
+++ b/app/services/item-group.service.ts
@@ -0,0 +1,41 @@
+// Base
+import * as base from './_crud-base'
+
+const path = '/api/v1/item-group'
+const name = 'item-group'
+
+export function create(data: any) {
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}
+
+export async function getValueLabelList(
+  params: any = null,
+  useCodeAsValue = false,
+): Promise<{ value: string; label: string }[]> {
+  let data: { value: string; label: string }[] = []
+  const result = await getList(params)
+  if (result.success) {
+    const resultData = result.body?.data || []
+    data = resultData.map((item: any) => ({
+      value: useCodeAsValue ? item.code : item.id ? Number(item.id) : item.code,
+      label: item.name,
+    }))
+  }
+  return data
+}
diff --git a/app/services/item-price.service.ts b/app/services/item-price.service.ts
new file mode 100644
index 00000000..764bded1
--- /dev/null
+++ b/app/services/item-price.service.ts
@@ -0,0 +1,25 @@
+// Base
+import * as base from './_crud-base'
+
+const path = '/api/v1/item-price'
+const name = 'item-price'
+
+export function create(data: any) {
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}
diff --git a/app/services/item.service.ts b/app/services/item.service.ts
index 8b44acd8..7d135201 100644
--- a/app/services/item.service.ts
+++ b/app/services/item.service.ts
@@ -24,13 +24,16 @@ export function remove(id: number | string) {
   return base.remove(path, id, name)
 }
 
-export async function getValueLabelList(params: any = null): Promise<{ value: string; label: string }[]> {
+export async function getValueLabelList(
+  params: any = null,
+  useCodeAsValue = false,
+): Promise<{ value: string; label: string }[]> {
   let data: { value: string; label: string }[] = []
   const result = await getList(params)
   if (result.success) {
     const resultData = result.body?.data || []
     data = resultData.map((item: any) => ({
-      value: item.id ? Number(item.id) : item.code,
+      value: useCodeAsValue ? item.code : item.id ? Number(item.id) : item.code,
       label: item.name,
     }))
   }
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)
+}
diff --git a/public/side-menu-items/emp-doc.json b/public/side-menu-items/emp-doc.json
index 292d8c5d..36be57c7 100644
--- a/public/side-menu-items/emp-doc.json
+++ b/public/side-menu-items/emp-doc.json
@@ -23,27 +23,6 @@
           }
         ]
       },
-      {
-        "title": "IGD",
-        "icon": "i-lucide-zap",
-        "children": [
-          {
-            "title": "Triase",
-            "icon": "i-lucide-stethoscope",
-            "link": "/emergency/triage"
-          },
-          {
-            "title": "Kunjungan",
-            "icon": "i-lucide-building-2",
-            "link": "/emergency/encounter"
-          },
-          {
-            "title": "Konsultasi",
-            "icon": "i-lucide-building-2",
-            "link": "/emergency/consultation"
-          }
-        ]
-      },
       {
         "title": "Rawat Inap",
         "icon": "i-lucide-building-2",
@@ -68,32 +47,7 @@
       {
         "title": "Kemoterapi",
         "icon": "i-lucide-droplets",
-        "link": "/outpation-action/chemotherapy"
-      },
-      {
-        "title": "Hemofilia",
-        "icon": "i-lucide-droplet-off",
-        "link": "/outpation-action/hemophilia"
-      }
-    ]
-  },
-  {
-    "heading": "Ruang Tindakan Anak",
-    "items": [
-      {
-        "title": "Thalasemi",
-        "icon": "i-lucide-baby",
-        "link": "/children-action/thalasemia"
-      },
-      {
-        "title": "Echocardiography",
-        "icon": "i-lucide-baby",
-        "link": "/children-action/echocardiography"
-      },
-      {
-        "title": "Spirometri",
-        "icon": "i-lucide-baby",
-        "link": "/children-action/spirometry"
+        "link": "/chemotherapy"
       }
     ]
   }
diff --git a/public/side-menu-items/emp-doc.json-bu b/public/side-menu-items/emp-doc.json-bu
new file mode 100644
index 00000000..2618a33b
--- /dev/null
+++ b/public/side-menu-items/emp-doc.json-bu
@@ -0,0 +1,100 @@
+[
+  {
+    "heading": "Menu Utama",
+    "items": [
+      {
+        "title": "Dashboard",
+        "icon": "i-lucide-home",
+        "link": "/"
+      },
+      {
+        "title": "Rawat Jalan",
+        "icon": "i-lucide-stethoscope",
+        "children": [
+          {
+            "title": "Kunjungan",
+            "icon": "i-lucide-stethoscope",
+            "link": "/ambulatory/encounter"
+          },
+          {
+            "title": "Konsultasi",
+            "icon": "i-lucide-building-2",
+            "link": "/ambulatory/consultation"
+          }
+        ]
+      },
+      {
+        "title": "IGD",
+        "icon": "i-lucide-zap",
+        "children": [
+          {
+            "title": "Triase",
+            "icon": "i-lucide-stethoscope",
+            "link": "/emergency/triage"
+          },
+          {
+            "title": "Kunjungan",
+            "icon": "i-lucide-building-2",
+            "link": "/emergency/encounter"
+          },
+          {
+            "title": "Konsultasi",
+            "icon": "i-lucide-building-2",
+            "link": "/emergency/consultation"
+          }
+        ]
+      },
+      {
+        "title": "Rawat Inap",
+        "icon": "i-lucide-building-2",
+        "children": [
+          {
+            "title": "Kunjungan",
+            "icon": "i-lucide-building-2",
+            "link": "/inpatient/encounter"
+          },
+          {
+            "title": "Konsultasi",
+            "icon": "i-lucide-building-2",
+            "link": "/inpatient/consultation"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "heading": "Ruang Tindakan Rajal",
+    "items": [
+      {
+        "title": "Kemoterapi",
+        "icon": "i-lucide-droplets",
+        "link": "/chemotherapy"
+      },
+      {
+        "title": "Hemofilia",
+        "icon": "i-lucide-droplet-off",
+        "link": "/hemophilia"
+      }
+    ]
+  },
+  {
+    "heading": "Ruang Tindakan Anak",
+    "items": [
+      {
+        "title": "Thalasemi",
+        "icon": "i-lucide-baby",
+        "link": "/thalasemia"
+      },
+      {
+        "title": "Echocardiography",
+        "icon": "i-lucide-baby",
+        "link": "/echocardiography"
+      },
+      {
+        "title": "Spirometri",
+        "icon": "i-lucide-baby",
+        "link": "/spirometry"
+      }
+    ]
+  }
+]