diff --git a/app/components/app/encounter/entry-form.vue b/app/components/app/encounter/entry-form.vue
index 22acbbb8..66d2e4e3 100644
--- a/app/components/app/encounter/entry-form.vue
+++ b/app/components/app/encounter/entry-form.vue
@@ -1,43 +1,57 @@
 <script setup lang="ts">
 // 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 * as DE from '~/components/pub/my-ui/doc-entry'
 import { Button } from '~/components/pub/ui/button'
 import { Input } from '~/components/pub/ui/input'
-import Select from '~/components/pub/ui/select/Select.vue'
-import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+import * as CB from '~/components/pub/my-ui/combobox'
+
 import DatepickerSingle from '~/components/pub/my-ui/datepicker/datepicker-single.vue'
-import TreeSelect from '~/components/pub/my-ui/select-tree/tree-select.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'
-import type { TreeItem } from '~/components/pub/my-ui/select-tree/type'
 
 // 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<{
   isLoading?: boolean
   isReadonly?: boolean
   isSepValid?: boolean
   isCheckingSep?: boolean
-  doctor?: any[]
-  subSpecialist?: any[]
-  specialists?: TreeItem[]
-  payments: any[]
+  doctorItems?: CB.Item[]
+  selectedDoctor: Doctor
+  // subSpecialist?: any[]
+  // specialists?: TreeItem[]
+  // paymentMethods: PaymentMethodCode[]
   participantGroups?: any[]
   seps: any[]
   patient?: PatientEntity | null | undefined
-  objects?: any
+  // objects?: any
 }>()
 
+// Model
+const model = defineModel<Encounter>()
+model.value = genEncounter()
+
+// Common preparation
+const defaultCBItems = [{ label: 'Pilih', value: '' }];
+const paymentMethodItems = CB.recStrToItem(paymentMethodCodes)
+
+// Emit preparation
 const emit = defineEmits<{
+  (e: 'onSelectDoctor', code: string): void
   (e: 'event', menu: string, value?: any): void
   (e: 'fetch', value?: any): void
 }>()
@@ -48,10 +62,10 @@ const { handleSubmit, errors, defineField, meta } = useForm<IntegrationEncounter
 })
 
 // Bind fields and extract attrs
-const [doctorId, doctorIdAttrs] = defineField('doctorId')
-const [subSpecialistId, subSpecialistIdAttrs] = defineField('subSpecialistId')
+const [doctorCode, doctorCodeAttrs] = defineField('doctor_code')
+const [unitCode, unitCodeAttrs] = defineField('unit_code')
 const [registerDate, registerDateAttrs] = defineField('registerDate')
-const [paymentType, paymentTypeAttrs] = defineField('paymentType')
+const [paymentMethodCode, paymentMethodCodeAttrs] = defineField('paymentMethod_code')
 const [patientCategory, patientCategoryAttrs] = defineField('patientCategory')
 const [cardNumber, cardNumberAttrs] = defineField('cardNumber')
 const [sepType, sepTypeAttrs] = defineField('sepType')
@@ -68,30 +82,50 @@ const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
 const isSepValid = computed(() => props.isSepValid || false)
 const isCheckingSep = computed(() => props.isCheckingSep || false)
 
-const doctorOpts = computed(() => {
-  // Add default option
-  const defaultOption = [{ label: 'Pilih', value: '' }]
-  // Add doctors from props
-  const doctors = props.doctor || []
-  return [...defaultOption, ...doctors]
-})
+// Unit, specialist, subspecialist
+const unitFullName = ref('')
+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 || ''
+  },
+)
+// const doctorOpts = computed(() => {
+//   const defaultOption = [{ label: 'Pilih', value: '' }]
+//   const doctors = props.doctors || []
+//   return [...defaultOption, ...doctors]
+// })
+// watch(doctorCode, (newValue) => {
+//   // doctor.value = props.doctors?.find(doc => doc.code === newValue)
+//   unitFullName.value = doctor.value?.subspecialist?.name ??
+//     doctor.value?.specialist?.name ??
+//     doctor.value?.unit?.name ??
+//     'tidak diketahui'
+//   model.value!.responsible_doctor_code = doctor.value?.code
+//   // const unitName = selectedDoctor?.specialist?.name || ''
+//   // emit('event', 'unit-changed', unitName)
+// })
 
-const isJKNPayment = computed(() => paymentType.value === 'jkn')
+const isJKNPayment = computed(() => paymentMethodCode.value === 'jkn')
 
-async function onFetchChildren(parentId: string): Promise<void> {
-  console.log('onFetchChildren', parentId)
-}
+// async function onFetchChildren(parentId: string): Promise<void> {
+//   console.log('onFetchChildren', parentId)
+// }
 
 // Watch specialist/subspecialist selection to fetch doctors
-watch(subSpecialistId, async (newValue) => {
-  if (newValue) {
-    console.log('SubSpecialist changed:', newValue)
-    // Reset doctor selection
-    doctorId.value = ''
-    // Emit fetch event to parent
-    emit('fetch', { subSpecialistId: newValue })
-  }
-})
+// watch(subSpecialistCode, async (newValue) => {
+//   if (newValue) {
+//     console.log('SubSpecialist changed:', newValue)
+//     // Reset doctor selection
+//     doctorCode.value = ''
+//     // Emit fetch event to parent
+//     emit('fetch', { subSpecialistCode: newValue })
+//   }
+// })
 
 // Debounced SEP number watcher: emit change only after user stops typing
 const debouncedSepNumber = refDebounced(sepNumber, 500)
@@ -100,25 +134,25 @@ watch(debouncedSepNumber, (newValue) => {
 })
 
 // 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 || ''
-      doctorId.value = objects?.doctorId || ''
-      subSpecialistId.value = objects?.subSpecialistId || ''
-      registerDate.value = objects?.registerDate || ''
-      paymentType.value = objects?.paymentType || ''
-      patientCategory.value = objects?.patientCategory || ''
-      cardNumber.value = objects?.cardNumber || ''
-      sepType.value = objects?.sepType || ''
-      sepNumber.value = objects?.sepNumber || ''
-    }
-  },
-  { deep: true, immediate: true },
-)
+// 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 || ''
+//       subSpecialistCode.value = objects?.subSpecialistCode || ''
+//       registerDate.value = objects?.registerDate || ''
+//       paymentMethodCode.value = objects?.paymentMethodCode || ''
+//       patientCategory.value = objects?.patientCategory || ''
+//       cardNumber.value = objects?.cardNumber || ''
+//       sepType.value = objects?.sepType || ''
+//       sepNumber.value = objects?.sepNumber || ''
+//     }
+//   },
+//   { deep: true, immediate: true },
+// )
 
 watch(
   () => props.patient,
@@ -136,11 +170,11 @@ watch(
 function onAddSep() {
   const formValues = {
     patientId: patientId.value || '',
-    doctorCode: doctorId.value,
-    subSpecialistCode: subSpecialistId.value,
+    doctorCode: doctorCode.value,
+    // subSpecialistCode: subSpecialistCode.value,
     registerDate: registerDate.value,
     cardNumber: cardNumber.value,
-    paymentType: paymentType.value,
+    paymentMethodCode: paymentMethodCode.value,
     sepType: sepType.value
   }
   emit('event', 'add-sep', formValues)
@@ -158,14 +192,14 @@ const formRef = ref<HTMLFormElement | null>(null)
 function submitForm() {
   console.log('🔵 submitForm called, formRef:', formRef.value)
   console.log('🔵 Form values:', {
-    doctorId: doctorId.value,
-    subSpecialistId: subSpecialistId.value,
+    doctorCode: doctorCode.value,
+    // subSpecialistCode: subSpecialistCode.value,
     registerDate: registerDate.value,
-    paymentType: paymentType.value,
+    paymentMethodCode: paymentMethodCode.value,
   })
   console.log('🔵 Form errors:', errors.value)
   console.log('🔵 Form meta:', meta.value)
-  
+
   // Trigger form submit using native form submit
   // This will trigger validation and onSubmit handler
   if (formRef.value) {
@@ -179,7 +213,7 @@ function submitForm() {
       preventDefault: () => {},
       target: formRef.value || {},
     } as SubmitEvent
-    
+
     // Call onSubmit directly
     console.log('🔵 Calling onSubmit with mock event')
     onSubmit(mockEvent)
@@ -231,149 +265,151 @@ defineExpose({
         </div>
       </div>
 
-      <Block
+      <DE.Block
         labelSize="thin"
         class="!pt-0"
         :colCount="3"
         :cellFlex="false"
       >
-        <Cell>
-          <Label height="compact">Nama Pasien</Label>
-          <Field :errMessage="errors.patientName">
+        <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"
             />
-          </Field>
-        </Cell>
+          </DE.Field>
+        </DE.Cell>
 
-        <Cell>
-          <Label height="compact">NIK</Label>
-          <Field :errMessage="errors.nationalIdentity">
+        <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"
             />
-          </Field>
-        </Cell>
+          </DE.Field>
+        </DE.Cell>
 
-        <Cell>
-          <Label height="compact">No. RM</Label>
-          <Field :errMessage="errors.medicalRecordNumber">
+        <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"
             />
-          </Field>
-        </Cell>
-      </Block>
+          </DE.Field>
+        </DE.Cell>
+      </DE.Block>
 
       <hr />
 
       <!-- Data Kunjungan -->
       <h3 class="text-lg font-semibold">Data Kunjungan</h3>
 
-      <Block
+      <DE.Block
         labelSize="thin"
         class="!pt-0"
         :colCount="3"
         :cellFlex="false"
       >
-        <Cell>
-          <Label height="compact">
+        <DE.Cell>
+          <DE.Label height="compact">
             Dokter
             <span class="text-red-500">*</span>
-          </Label>
-          <Field :errMessage="errors.doctorId">
-            <Combobox
-              id="doctorId"
-              v-model="doctorId"
-              v-bind="doctorIdAttrs"
-              :items="doctorOpts"
+          </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) => emit('onSelectDoctor', value)"
             />
-          </Field>
-        </Cell>
+          </DE.Field>
+        </DE.Cell>
 
-        <Cell>
-          <Label height="compact">
+        <DE.Cell>
+          <DE.Label height="compact">
             Spesialis / Subspesialis
             <span class="text-red-500">*</span>
-          </Label>
-          <Field :errMessage="errors.subSpecialistId">
-            <TreeSelect
-              id="subSpecialistId"
-              v-model="subSpecialistId"
-              v-bind="subSpecialistIdAttrs"
+          </DE.Label>
+          <DE.Field :errMessage="errors.unit_code">
+            <Input :value="unitFullName"/>
+            <!-- <TreeSelect
+              id="subSpecialistCode"
+              v-model="subSpecialistCode"
+              v-bind="subSpecialistCodeAttrs"
               :data="specialists || []"
               :on-fetch-children="onFetchChildren"
-            />
-          </Field>
-        </Cell>
-      </Block>
+            /> -->
+          </DE.Field>
+        </DE.Cell>
+      </DE.Block>
 
-      <Block
+      <DE.Block
         labelSize="thin"
         class="!pt-0"
         :colCount="3"
         :cellFlex="false"
       >
-        <Cell>
-          <Label height="compact">
+        <DE.Cell>
+          <DE.Label height="compact">
             Tanggal Daftar
             <span class="text-red-500">*</span>
-          </Label>
-          <Field :errMessage="errors.registerDate">
+          </DE.Label>
+          <DE.Field :errMessage="errors.registerDate">
             <DatepickerSingle
               id="registerDate"
               v-model="registerDate"
               v-bind="registerDateAttrs"
               placeholder="Pilih tanggal"
             />
-          </Field>
-        </Cell>
+          </DE.Field>
+        </DE.Cell>
 
-        <Cell>
-          <Label height="compact">
+        <DE.Cell>
+          <DE.Label height="compact">
             Jenis Pembayaran
             <span class="text-red-500">*</span>
-          </Label>
-          <Field :errMessage="errors.paymentType">
-            <Select
-              id="paymentType"
-              v-model="paymentType"
-              v-bind="paymentTypeAttrs"
-              :items="payments"
+          </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"
             />
-          </Field>
-        </Cell>
-      </Block>
+          </DE.Field>
+        </DE.Cell>
+      </DE.Block>
 
       <!-- BPJS Fields (conditional) -->
       <template v-if="isJKNPayment">
-        <Block
+        <DE.Block
           labelSize="thin"
           class="!pt-0"
           :colCount="3"
           :cellFlex="false"
         >
-          <Cell>
-            <Label height="compact">
+          <DE.Cell>
+            <DE.Label height="compact">
               Kelompok Peserta
               <span class="text-red-500">*</span>
-            </Label>
-            <Field :errMessage="errors.patientCategory">
+            </DE.Label>
+            <DE.Field :errMessage="errors.patientCategory">
               <Select
                 id="patientCategory"
                 v-model="patientCategory"
@@ -382,15 +418,15 @@ defineExpose({
                 :disabled="isLoading || isReadonly"
                 placeholder="Pilih Kelompok Peserta"
               />
-            </Field>
-          </Cell>
+            </DE.Field>
+          </DE.Cell>
 
-          <Cell>
-            <Label height="compact">
+          <DE.Cell>
+            <DE.Label height="compact">
               No. Kartu BPJS
               <span class="text-red-500">*</span>
-            </Label>
-            <Field :errMessage="errors.cardNumber">
+            </DE.Label>
+            <DE.Field :errMessage="errors.cardNumber">
               <Input
                 id="cardNumber"
                 v-model="cardNumber"
@@ -398,15 +434,15 @@ defineExpose({
                 :disabled="isLoading || isReadonly"
                 placeholder="Masukkan nomor kartu BPJS"
               />
-            </Field>
-          </Cell>
+            </DE.Field>
+          </DE.Cell>
 
-          <Cell>
-            <Label height="compact">
+          <DE.Cell>
+            <DE.Label height="compact">
               Jenis SEP
               <span class="text-red-500">*</span>
-            </Label>
-            <Field :errMessage="errors.sepType">
+            </DE.Label>
+            <DE.Field :errMessage="errors.sepType">
               <Select
                 id="sepType"
                 v-model="sepType"
@@ -415,22 +451,22 @@ defineExpose({
                 :disabled="isLoading || isReadonly"
                 placeholder="Pilih Jenis SEP"
               />
-            </Field>
-          </Cell>
-        </Block>
+            </DE.Field>
+          </DE.Cell>
+        </DE.Block>
 
-        <Block
+        <DE.Block
           labelSize="thin"
           class="!pt-0"
           :colCount="3"
           :cellFlex="false"
         >
-          <Cell>
-            <Label height="compact">
+          <DE.Cell>
+            <DE.Label height="compact">
               No. SEP
               <span class="text-red-500">*</span>
-            </Label>
-            <Field :errMessage="errors.sepNumber">
+            </DE.Label>
+            <DE.Field :errMessage="errors.sepNumber">
               <div class="flex gap-2">
                 <Input
                   id="sepNumber"
@@ -474,8 +510,8 @@ defineExpose({
                   />
                 </Button>
               </div>
-            </Field>
-          </Cell>
+            </DE.Field>
+          </DE.Cell>
 
           <FileUpload
             field-name="sepFile"
@@ -492,7 +528,7 @@ defineExpose({
             :accept="['pdf', 'jpg', 'png']"
             :max-size-mb="1"
           />
-        </Block>
+        </DE.Block>
       </template>
     </form>
   </div>
diff --git a/app/components/app/encounter/entry-form.vue.backup b/app/components/app/encounter/entry-form.vue.backup
new file mode 100644
index 00000000..f92b7736
--- /dev/null
+++ b/app/components/app/encounter/entry-form.vue.backup
@@ -0,0 +1,499 @@
+<script setup lang="ts">
+// 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'
+import { Input } from '~/components/pub/ui/input'
+import Select from '~/components/pub/ui/select/Select.vue'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+import DatepickerSingle from '~/components/pub/my-ui/datepicker/datepicker-single.vue'
+import TreeSelect from '~/components/pub/my-ui/select-tree/tree-select.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'
+import type { TreeItem } from '~/components/pub/my-ui/select-tree/type'
+
+// Helpers
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import { refDebounced } from '@vueuse/core'
+
+const props = defineProps<{
+  isLoading?: boolean
+  isReadonly?: boolean
+  isSepValid?: boolean
+  isCheckingSep?: boolean
+  doctor?: any[]
+  subSpecialist?: any[]
+  specialists?: TreeItem[]
+  payments: any[]
+  participantGroups?: any[]
+  seps: any[]
+  patient?: PatientEntity | null | undefined
+  objects?: any
+}>()
+
+const emit = defineEmits<{
+  (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 [doctorId, doctorIdAttrs] = defineField('doctorId')
+const [subSpecialistId, subSpecialistIdAttrs] = defineField('subSpecialistId')
+const [registerDate, registerDateAttrs] = defineField('registerDate')
+const [paymentType, paymentTypeAttrs] = defineField('paymentType')
+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 patientId = ref('')
+
+const isLoading = props.isLoading !== undefined ? props.isLoading : false
+const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
+
+// SEP validation state from props
+const isSepValid = computed(() => props.isSepValid || false)
+const isCheckingSep = computed(() => props.isCheckingSep || false)
+
+const doctorOpts = computed(() => {
+  // Add default option
+  const defaultOption = [{ label: 'Pilih', value: '' }]
+  // Add doctors from props
+  const doctors = props.doctor || []
+  return [...defaultOption, ...doctors]
+})
+
+const isJKNPayment = computed(() => paymentType.value === 'jkn')
+
+async function onFetchChildren(parentId: string): Promise<void> {
+  console.log('onFetchChildren', parentId)
+}
+
+// Watch specialist/subspecialist selection to fetch doctors
+watch(subSpecialistId, async (newValue) => {
+  if (newValue) {
+    console.log('SubSpecialist changed:', newValue)
+    // Reset doctor selection
+    doctorId.value = ''
+    // Emit fetch event to parent
+    emit('fetch', { subSpecialistId: newValue })
+  }
+})
+
+// Debounced SEP number watcher: emit change only after user stops typing
+const debouncedSepNumber = refDebounced(sepNumber, 500)
+watch(debouncedSepNumber, (newValue) => {
+  emit('event', 'sep-number-changed', newValue)
+})
+
+// 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 || ''
+      doctorId.value = objects?.doctorId || ''
+      subSpecialistId.value = objects?.subSpecialistId || ''
+      registerDate.value = objects?.registerDate || ''
+      paymentType.value = objects?.paymentType || ''
+      patientCategory.value = objects?.patientCategory || ''
+      cardNumber.value = objects?.cardNumber || ''
+      sepType.value = objects?.sepType || ''
+      sepNumber.value = objects?.sepNumber || ''
+    }
+  },
+  { 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 },
+)
+
+function onAddSep() {
+  const formValues = {
+    patientId: patientId.value || '',
+    doctorCode: doctorId.value,
+    subSpecialistCode: subSpecialistId.value,
+    registerDate: registerDate.value,
+    cardNumber: cardNumber.value,
+    paymentType: paymentType.value,
+    sepType: sepType.value
+  }
+  emit('event', 'add-sep', formValues)
+}
+
+// Submit handler
+const onSubmit = handleSubmit((values) => {
+  console.log('✅ Validated form values:', JSON.stringify(values, null, 2))
+  emit('event', 'save', values)
+})
+
+// Expose submit method for parent component
+const formRef = ref<HTMLFormElement | null>(null)
+
+function submitForm() {
+  console.log('🔵 submitForm called, formRef:', formRef.value)
+  console.log('🔵 Form values:', {
+    doctorId: doctorId.value,
+    subSpecialistId: subSpecialistId.value,
+    registerDate: registerDate.value,
+    paymentType: paymentType.value,
+  })
+  console.log('🔵 Form errors:', errors.value)
+  console.log('🔵 Form meta:', meta.value)
+
+  // Trigger form submit using native form submit
+  // This will trigger validation and onSubmit handler
+  if (formRef.value) {
+    console.log('🔵 Calling formRef.value.requestSubmit()')
+    formRef.value.requestSubmit()
+  } else {
+    console.warn('⚠️ formRef.value is null, cannot submit form')
+    // Fallback: directly call onSubmit handler
+    // Create a mock event object
+    const mockEvent = {
+      preventDefault: () => {},
+      target: formRef.value || {},
+    } as SubmitEvent
+
+    // Call onSubmit directly
+    console.log('🔵 Calling onSubmit with mock event')
+    onSubmit(mockEvent)
+  }
+}
+
+defineExpose({
+  submitForm,
+})
+</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>
+
+      <Block
+        labelSize="thin"
+        class="!pt-0"
+        :colCount="3"
+        :cellFlex="false"
+      >
+        <Cell>
+          <Label height="compact">Nama Pasien</Label>
+          <Field :errMessage="errors.patientName">
+            <Input
+              id="patientName"
+              v-model="patientName"
+              v-bind="patientNameAttrs"
+              :disabled="true"
+            />
+          </Field>
+        </Cell>
+
+        <Cell>
+          <Label height="compact">NIK</Label>
+          <Field :errMessage="errors.nationalIdentity">
+            <Input
+              id="nationalIdentity"
+              v-model="nationalIdentity"
+              v-bind="nationalIdentityAttrs"
+              :disabled="true"
+            />
+          </Field>
+        </Cell>
+
+        <Cell>
+          <Label height="compact">No. RM</Label>
+          <Field :errMessage="errors.medicalRecordNumber">
+            <Input
+              id="medicalRecordNumber"
+              v-model="medicalRecordNumber"
+              v-bind="medicalRecordNumberAttrs"
+              :disabled="true"
+            />
+          </Field>
+        </Cell>
+      </Block>
+
+      <hr />
+
+      <!-- Data Kunjungan -->
+      <h3 class="text-lg font-semibold">Data Kunjungan</h3>
+
+      <Block
+        labelSize="thin"
+        class="!pt-0"
+        :colCount="3"
+        :cellFlex="false"
+      >
+        <Cell>
+          <Label height="compact">
+            Dokter
+            <span class="text-red-500">*</span>
+          </Label>
+          <Field :errMessage="errors.doctorId">
+            <Combobox
+              id="doctorId"
+              v-model="doctorId"
+              v-bind="doctorIdAttrs"
+              :items="doctorOpts"
+              :is-disabled="isLoading || isReadonly"
+              placeholder="Pilih Dokter"
+              search-placeholder="Cari Dokter"
+              empty-message="Dokter tidak ditemukan"
+            />
+          </Field>
+        </Cell>
+
+        <Cell>
+          <Label height="compact">
+            Spesialis / Subspesialis
+            <span class="text-red-500">*</span>
+          </Label>
+          <Field :errMessage="errors.subSpecialistId">
+            <TreeSelect
+              id="subSpecialistId"
+              v-model="subSpecialistId"
+              v-bind="subSpecialistIdAttrs"
+              :data="specialists || []"
+              :on-fetch-children="onFetchChildren"
+            />
+          </Field>
+        </Cell>
+      </Block>
+
+      <Block
+        labelSize="thin"
+        class="!pt-0"
+        :colCount="3"
+        :cellFlex="false"
+      >
+        <Cell>
+          <Label height="compact">
+            Tanggal Daftar
+            <span class="text-red-500">*</span>
+          </Label>
+          <Field :errMessage="errors.registerDate">
+            <DatepickerSingle
+              id="registerDate"
+              v-model="registerDate"
+              v-bind="registerDateAttrs"
+              placeholder="Pilih tanggal"
+            />
+          </Field>
+        </Cell>
+
+        <Cell>
+          <Label height="compact">
+            Jenis Pembayaran
+            <span class="text-red-500">*</span>
+          </Label>
+          <Field :errMessage="errors.paymentType">
+            <Select
+              id="paymentType"
+              v-model="paymentType"
+              v-bind="paymentTypeAttrs"
+              :items="payments"
+              :disabled="isLoading || isReadonly"
+              placeholder="Pilih Jenis Pembayaran"
+            />
+          </Field>
+        </Cell>
+      </Block>
+
+      <!-- BPJS Fields (conditional) -->
+      <template v-if="isJKNPayment">
+        <Block
+          labelSize="thin"
+          class="!pt-0"
+          :colCount="3"
+          :cellFlex="false"
+        >
+          <Cell>
+            <Label height="compact">
+              Kelompok Peserta
+              <span class="text-red-500">*</span>
+            </Label>
+            <Field :errMessage="errors.patientCategory">
+              <Select
+                id="patientCategory"
+                v-model="patientCategory"
+                v-bind="patientCategoryAttrs"
+                :items="participantGroups || []"
+                :disabled="isLoading || isReadonly"
+                placeholder="Pilih Kelompok Peserta"
+              />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label height="compact">
+              No. Kartu BPJS
+              <span class="text-red-500">*</span>
+            </Label>
+            <Field :errMessage="errors.cardNumber">
+              <Input
+                id="cardNumber"
+                v-model="cardNumber"
+                v-bind="cardNumberAttrs"
+                :disabled="isLoading || isReadonly"
+                placeholder="Masukkan nomor kartu BPJS"
+              />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label height="compact">
+              Jenis SEP
+              <span class="text-red-500">*</span>
+            </Label>
+            <Field :errMessage="errors.sepType">
+              <Select
+                id="sepType"
+                v-model="sepType"
+                v-bind="sepTypeAttrs"
+                :items="seps"
+                :disabled="isLoading || isReadonly"
+                placeholder="Pilih Jenis SEP"
+              />
+            </Field>
+          </Cell>
+        </Block>
+
+        <Block
+          labelSize="thin"
+          class="!pt-0"
+          :colCount="3"
+          :cellFlex="false"
+        >
+          <Cell>
+            <Label height="compact">
+              No. SEP
+              <span class="text-red-500">*</span>
+            </Label>
+            <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"
+                />
+                <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-else
+                  variant="outline"
+                  type="button"
+                  class="bg-green-500 text-white hover:bg-green-600"
+                  size="sm"
+                  disabled
+                >
+                  <Icon
+                    name="i-lucide-check"
+                    class="h-4 w-4"
+                  />
+                </Button>
+              </div>
+            </Field>
+          </Cell>
+
+          <FileUpload
+            field-name="sepFile"
+            label="Dokumen SEP"
+            placeholder="Unggah dokumen SEP"
+            :accept="['pdf', 'jpg', 'png']"
+            :max-size-mb="1"
+          />
+
+          <FileUpload
+            field-name="sippFile"
+            label="Dokumen SIPP"
+            placeholder="Unggah dokumen SIPP"
+            :accept="['pdf', 'jpg', 'png']"
+            :max-size-mb="1"
+          />
+        </Block>
+      </template>
+    </form>
+  </div>
+</template>
diff --git a/app/components/content/encounter/entry.vue b/app/components/content/encounter/entry.vue
index 228d165e..203d781a 100644
--- a/app/components/content/encounter/entry.vue
+++ b/app/components/content/encounter/entry.vue
@@ -8,8 +8,11 @@ import AppViewPatient from '~/components/app/patient/view-patient.vue'
 import { refDebounced } from '@vueuse/core'
 
 // Handlers
+import { getDetail as getDoctorDetail  } from '~/services/doctor.service'
 import { useEncounterEntry } from '~/handlers/encounter-entry.handler'
+import { genDoctor, type Doctor } from '~/models/doctor'
 
+// Props
 const props = defineProps<{
   id: number
   classCode?: 'ambulatory' | 'emergency' | 'inpatient' | 'outpatient'
@@ -54,7 +57,33 @@ const {
 } = useEncounterEntry(props)
 
 const debouncedSepNumber = refDebounced(sepNumber, 500)
+const selectedDoctor = ref<Doctor>(genDoctor())
 
+provide('rec_select_id', recSelectId)
+provide('table_data_loader', isLoading)
+
+watch(debouncedSepNumber, async (newValue) => {
+  await getValidateSepNumber(newValue)
+})
+
+watch(
+  () => formObjects.value?.paymentType,
+  (newValue) => {
+    isSepValid.value = false
+    if (newValue !== 'jkn') {
+      sepNumber.value = ''
+    }
+  },
+)
+
+onMounted(async () => {
+  await handleInit()
+  if (props.id > 0) {
+    await loadEncounterDetail()
+  }
+})
+
+///// Functions
 function handleSavePatient() {
   selectedPatientObject.value = null
   setTimeout(() => {
@@ -100,29 +129,13 @@ async function handleEvent(menu: string, value?: any) {
   }
 }
 
-provide('rec_select_id', recSelectId)
-provide('table_data_loader', isLoading)
-
-watch(debouncedSepNumber, async (newValue) => {
-  await getValidateSepNumber(newValue)
-})
-
-watch(
-  () => formObjects.value?.paymentType,
-  (newValue) => {
-    isSepValid.value = false
-    if (newValue !== 'jkn') {
-      sepNumber.value = ''
-    }
-  },
-)
-
-onMounted(async () => {
-  await handleInit()
-  if (props.id > 0) {
-    await loadEncounterDetail()
+async function getDoctorInfo(value: string) {
+  const resp = await getDoctorDetail(value, { includes: 'unit,specialist,subspecialist'})
+  if (resp.success) {
+    selectedDoctor.value = resp.body.data
+    // console.log(selectedDoctor.value)
   }
-})
+}
 </script>
 
 <template>
@@ -144,9 +157,11 @@ onMounted(async () => {
     :seps="sepsList"
     :participant-groups="participantGroupsList"
     :specialists="specialistsTree"
-    :doctor="doctorsList"
+    :doctorItems="doctorsList"
+    :selectedDoctor="selectedDoctor"
     :patient="selectedPatientObject"
     :objects="formObjects"
+    @on-select-doctor="getDoctorInfo"
     @event="handleEvent"
     @fetch="handleFetch"
   />
diff --git a/app/handlers/encounter-entry.handler.ts b/app/handlers/encounter-entry.handler.ts
index 71594ebf..4d29defb 100644
--- a/app/handlers/encounter-entry.handler.ts
+++ b/app/handlers/encounter-entry.handler.ts
@@ -70,18 +70,18 @@ export function useEncounterEntry(props: {
   })
 
   function getListPath(): string {
-    if (props.classCode === 'ambulatory' && props.subClassCode === 'rehab') {
-      return '/rehab/encounter'
-    }
-    if (props.classCode === 'ambulatory' && props.subClassCode === 'reg') {
-      return '/outpatient/encounter'
-    }
-    if (props.classCode === 'emergency') {
-      return '/emergency/encounter'
-    }
-    if (props.classCode === 'inpatient') {
-      return '/inpatient/encounter'
+    if (props.classCode === 'ambulatory') {
+      return '/ambulatory/encounter'
     }
+    // if (props.classCode === 'ambulatory' && props.subClassCode === 'reg') {
+    //   return '/outpatient/encounter'
+    // }
+    // if (props.classCode === 'emergency') {
+    //   return '/emergency/encounter'
+    // }
+    // if (props.classCode === 'inpatient') {
+    //   return '/inpatient/encounter'
+    // }
     return '/encounter'
   }
 
@@ -257,11 +257,10 @@ export function useEncounterEntry(props: {
 
   async function handleFetchDoctors(subSpecialistId: string | null = null) {
     try {
-      const filterParams: any = { 'page-size': 100, includes: 'employee-Person' }
+      const filterParams: any = { 'page-size': 100, includes: 'employee-Person,unit,specialist,subspecialist' }
 
       if (!subSpecialistId) {
-        const doctors = await getDoctorValueLabelList(filterParams, true)
-        doctorsList.value = doctors
+        doctorsList.value = await getDoctorValueLabelList(filterParams, true)
         return
       }
 
@@ -273,8 +272,7 @@ export function useEncounterEntry(props: {
         filterParams['specialist-id'] = subSpecialistId
       }
 
-      const doctors = await getDoctorValueLabelList(filterParams, true)
-      doctorsList.value = doctors
+      doctorsList.value = await getDoctorValueLabelList(filterParams, true)
     } catch (error) {
       console.error('Error fetching doctors:', error)
       doctorsList.value = []
@@ -497,7 +495,7 @@ export function useEncounterEntry(props: {
       if (paymentMethodCode) {
         payload.paymentMethod_code = paymentMethodCode
       }
-      
+
       if (paymentMethodCode === 'insurance') {
         payload.insuranceCompany_id = formValues.insuranceCompany_id ?? null
         if (memberNumber) payload.member_number = memberNumber
diff --git a/app/models/doctor.ts b/app/models/doctor.ts
index 1b631907..297f9372 100644
--- a/app/models/doctor.ts
+++ b/app/models/doctor.ts
@@ -1,5 +1,6 @@
 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"
 
@@ -9,10 +10,11 @@ export interface Doctor extends Base {
   ihs_number: string
   sip_number: string
   code?: string
-  unit_icode?: number
-  specialist_icode?: number
+  unit_code?: string
+  unit?: Unit
+  specialist_code?: string
   specialist?: Specialist
-  subspecialist_icode?: number
+  subspecialist_code?: string
   subspecialist?: Subspecialist
   bpjs_code?: string
 }
diff --git a/app/models/encounter.ts b/app/models/encounter.ts
index 85a0012d..95bccff0 100644
--- a/app/models/encounter.ts
+++ b/app/models/encounter.ts
@@ -3,6 +3,7 @@ import { type Doctor, genDoctor } from "./doctor"
 import { genEmployee, type Employee } from "./employee"
 import type { EncounterDocument } from "./encounter-document"
 import type { InternalReference } from "./internal-reference"
+import type { Nurse } from "./nurse"
 import { type Patient, genPatient } from "./patient"
 import type { Specialist } from "./specialist"
 import type { Subspecialist } from "./subspecialist"
@@ -14,18 +15,20 @@ export interface Encounter {
     patient: Patient
     registeredAt: string
     class_code: string
-    unit_id: number
+    unit_code: string
     unit: Unit
-    specialist_id?: number
+    specialist_code?: string
     specilist?: Specialist
-    subspecialist_id?: number
+    subspecialist_code?: string
     subspecialist?: Subspecialist
     visitDate: string
     adm_employee_id: number
     adm_employee: Employee
-    appointment_doctor_id: number
+    responsible_nurse_code?: string
+    responsible_nurse?: Nurse
+    appointment_doctor_code: string
     appointment_doctor: Doctor
-    responsible_doctor_id?: number
+    responsible_doctor_code?: string
     responsible_doctor?: Doctor
     refSource_name?: string
     appointment_id?: number
@@ -49,12 +52,12 @@ export function genEncounter(): Encounter {
         patient: genPatient(),
         registeredAt: '',
         class_code: '',
-        unit_id: 0,
+        unit_code: 0,
         unit: genUnit(),
         visitDate: '',
         adm_employee_id: 0,
         adm_employee: genEmployee(),
-        appointment_doctor_id: 0,
+        appointment_doctor_code: '',
         appointment_doctor: genDoctor(),
         medicalDischargeEducation: '',
         status_code: '',
diff --git a/app/schemas/integration-encounter.schema.ts b/app/schemas/integration-encounter.schema.ts
index 32327328..b141f912 100644
--- a/app/schemas/integration-encounter.schema.ts
+++ b/app/schemas/integration-encounter.schema.ts
@@ -2,10 +2,12 @@ import { z } from 'zod'
 
 const ERROR_MESSAGES = {
   required: {
-    doctorId: 'Dokter wajib diisi',
+    doctor_code: 'Dokter wajib diisi',
     registerDate: 'Tanggal Daftar wajib diisi',
-    paymentType: 'Jenis Pembayaran wajib diisi',
-    subSpecialistId: 'Subspesialis wajib diisi',
+    paymentMethod_code: 'Jenis Pembayaran wajib diisi',
+    unit_code: 'Spesialis wajib diisi',
+    // specialist_code: 'Spesialis wajib diisi',
+    // subSpecialist_code: 'Subspesialis wajib diisi',
     patientCategory: 'Kelompok Peserta wajib diisi',
     cardNumber: 'No. Kartu BPJS wajib diisi',
     sepType: 'Jenis SEP wajib diisi',
@@ -21,22 +23,22 @@ const IntegrationEncounterSchema = z
     patientName: z.string().optional(),
     nationalIdentity: z.string().optional(),
     medicalRecordNumber: z.string().optional(),
-    
+
     // Visit data
-    doctorId: z
-      .string({ required_error: ERROR_MESSAGES.required.doctorId })
-      .min(1, ERROR_MESSAGES.required.doctorId),
-    subSpecialistId: z
-      .string({ required_error: ERROR_MESSAGES.required.subSpecialistId })
-      .min(1, ERROR_MESSAGES.required.subSpecialistId)
+    doctor_code: z
+      .string({ required_error: ERROR_MESSAGES.required.doctor_code })
+      .min(1, ERROR_MESSAGES.required.doctor_code),
+    unit_code: z
+      .string({ required_error: ERROR_MESSAGES.required.unit_code })
+      .min(1, ERROR_MESSAGES.required.unit_code)
       .optional(),
     registerDate: z
       .string({ required_error: ERROR_MESSAGES.required.registerDate })
       .min(1, ERROR_MESSAGES.required.registerDate),
-    paymentType: z
-      .string({ required_error: ERROR_MESSAGES.required.paymentType })
-      .min(1, ERROR_MESSAGES.required.paymentType),
-    
+    paymentMethod_code: z
+      .string({ required_error: ERROR_MESSAGES.required.paymentMethod_code })
+      .min(1, ERROR_MESSAGES.required.paymentMethod_code),
+
     // BPJS related fields
     patientCategory: z
       .string()
@@ -54,7 +56,7 @@ const IntegrationEncounterSchema = z
       .string()
       .min(1, ERROR_MESSAGES.required.sepNumber)
       .optional(),
-    
+
     // File uploads
     sepFile: z
       .any()
@@ -76,7 +78,7 @@ const IntegrationEncounterSchema = z
   .refine(
     (data) => {
       // If payment type is jkn, then patient category is required
-      if (data.paymentType === 'jkn') {
+      if (data.paymentMethod_code === 'jkn') {
         return data.patientCategory && data.patientCategory.trim() !== ''
       }
       return true
@@ -89,7 +91,7 @@ const IntegrationEncounterSchema = z
   .refine(
     (data) => {
       // If payment type is jkn, then card number is required
-      if (data.paymentType === 'jkn') {
+      if (data.paymentMethod_code === 'jkn') {
         return data.cardNumber && data.cardNumber.trim() !== ''
       }
       return true
@@ -102,7 +104,7 @@ const IntegrationEncounterSchema = z
   .refine(
     (data) => {
       // If payment type is jkn, then SEP type is required
-      if (data.paymentType === 'jkn') {
+      if (data.paymentMethod_code === 'jkn') {
         return data.sepType && data.sepType.trim() !== ''
       }
       return true
@@ -115,7 +117,7 @@ const IntegrationEncounterSchema = z
   .refine(
     (data) => {
       // If payment type is jkn and SEP type is selected, then SEP number is required
-      if (data.paymentType === 'jkn' && data.sepType && data.sepType.trim() !== '') {
+      if (data.paymentMethod_code === 'jkn' && data.sepType && data.sepType.trim() !== '') {
         return data.sepNumber && data.sepNumber.trim() !== ''
       }
       return true
diff --git a/app/services/_crud-base.ts b/app/services/_crud-base.ts
index bf3a89c5..c9a0f013 100644
--- a/app/services/_crud-base.ts
+++ b/app/services/_crud-base.ts
@@ -111,4 +111,4 @@ export async function removeCustom(path: string, data: any, name: string = 'item
     console.error(`Error deleting ${name}:`, error)
     throw new Error(`Failed to delete ${name}`)
   }
-}
\ No newline at end of file
+}
diff --git a/app/services/doctor.service.ts b/app/services/doctor.service.ts
index e6ae0051..5b855715 100644
--- a/app/services/doctor.service.ts
+++ b/app/services/doctor.service.ts
@@ -13,8 +13,8 @@ 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 getDetail(id: number | string, params?: any) {
+  return base.getDetail(path, id, name, params)
 }
 
 export function update(id: number | string, data: any) {
@@ -32,7 +32,7 @@ export async function getValueLabelList(params: any = null, useCodeAsValue = fal
     const resultData = result.body?.data || []
     data = resultData.map((item: Doctor) => ({
       value: useCodeAsValue ? item.code
-        : item.id ? Number(item.id) 
+        : item.id ? Number(item.id)
           : item.id,
       label: item.employee?.person?.name || '',
     }))