diff --git a/app/components/app/encounter/entry-form.vue b/app/components/app/encounter/entry-form.vue
index 918982b7..22acbbb8 100644
--- a/app/components/app/encounter/entry-form.vue
+++ b/app/components/app/encounter/entry-form.vue
@@ -454,7 +454,11 @@ defineExpose({
                     name="i-lucide-loader-2"
                     class="h-4 w-4 animate-spin"
                   />
-                  <span v-else>+</span>
+                   <Icon
+                    v-else
+                    name="i-lucide-plus"
+                    class="h-4 w-4"
+                  />
                 </Button>
                 <Button
                   v-else
diff --git a/app/components/content/encounter/entry.vue b/app/components/content/encounter/entry.vue
index 90d3c26e..228d165e 100644
--- a/app/components/content/encounter/entry.vue
+++ b/app/components/content/encounter/entry.vue
@@ -1,42 +1,14 @@
 <script setup lang="ts">
 // Components
-import { toast } from '~/components/pub/ui/toast'
 import { Button } from '~/components/pub/ui/button'
 import AppEncounterEntryForm from '~/components/app/encounter/entry-form.vue'
 import AppViewPatient from '~/components/app/patient/view-patient.vue'
 
-// Types
-import type { DataTableLoader } from '~/components/pub/my-ui/data-table/type'
-import type { TreeItem } from '~/components/pub/my-ui/select-tree/type'
-
-// Constants
-import { paymentTypes, sepRefTypeCodes, participantGroups } from '~/lib/constants.vclaim'
-
-// Services
-import {
-  getList as getSpecialistList,
-  getValueTreeItems as getSpecialistTreeItems,
-} from '~/services/specialist.service'
-import { getValueLabelList as getDoctorValueLabelList } from '~/services/doctor.service'
-import { create as createEncounter, getDetail as getEncounterDetail, update as updateEncounter } from '~/services/encounter.service'
-import { getList as getSepList } from '~/services/vclaim-sep.service'
-
 // Helpers
 import { refDebounced } from '@vueuse/core'
 
 // Handlers
-import {
-  patients,
-  selectedPatient,
-  selectedPatientObject,
-  paginationMeta,
-  getPatientsList,
-  getPatientCurrent,
-  getPatientByIdentifierSearch,
-} from '~/handlers/patient.handler'
-
-// Stores
-import { useUserStore } from '~/stores/user'
+import { useEncounterEntry } from '~/handlers/encounter-entry.handler'
 
 const props = defineProps<{
   id: number
@@ -46,54 +18,43 @@ const props = defineProps<{
 }>()
 
 const route = useRoute()
-const userStore = useUserStore()
-const openPatient = ref(false)
-const isLoading = reactive<DataTableLoader>({
-  isTableLoading: false,
-})
-const paymentsList = ref<Array<{ value: string; label: string }>>([])
-const sepsList = ref<Array<{ value: string; label: string }>>([])
-const participantGroupsList = ref<Array<{ value: string; label: string }>>([])
-const specialistsTree = ref<TreeItem[]>([])
-const specialistsData = ref<any[]>([]) // Store full specialist data with id
-const doctorsList = ref<Array<{ value: string; label: string }>>([])
-const recSelectId = ref<number | null>(null)
-const isSaving = ref(false)
-const isLoadingDetail = ref(false)
 const formRef = ref<InstanceType<typeof AppEncounterEntryForm> | null>(null)
-const encounterData = ref<any>(null)
-const formObjects = ref<any>({})
 
-// SEP validation state
-const isSepValid = ref(false)
-const isCheckingSep = ref(false)
-const sepNumber = ref('')
+const {
+  paymentsList,
+  sepNumber,
+  sepsList,
+  participantGroupsList,
+  specialistsTree,
+  doctorsList,
+  recSelectId,
+  isLoadingDetail,
+  formObjects,
+  openPatient,
+  isSepValid,
+  isCheckingSep,
+  isSaveDisabled,
+  isSaving,
+  isLoading,
+  patients,
+  selectedPatient,
+  selectedPatientObject,
+  paginationMeta,
+  toNavigateSep,
+  getListPath,
+  handleInit,
+  loadEncounterDetail,
+  handleSaveEncounter,
+  getPatientsList,
+  getPatientCurrent,
+  getPatientByIdentifierSearch,
+  getIsSubspecialist,
+  getValidateSepNumber,
+  handleFetchDoctors,
+} = useEncounterEntry(props)
+
 const debouncedSepNumber = refDebounced(sepNumber, 500)
 
-// Computed for edit mode
-const isEditMode = computed(() => props.id > 0)
-
-// Computed for save button disable state
-const isSaveDisabled = computed(() => {
-  return !selectedPatient.value || !selectedPatientObject.value || isSaving.value || isLoadingDetail.value
-})
-
-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'
-  }
-  return '/encounter' // fallback
-}
-
 function handleSavePatient() {
   selectedPatientObject.value = null
   setTimeout(() => {
@@ -101,140 +62,15 @@ function handleSavePatient() {
   }, 150)
 }
 
-function toKebabCase(str: string): string {
-  return str.replace(/([A-Z])/g, '-$1').toLowerCase()
+function handleSaveClick() {
+  if (formRef.value && typeof formRef.value.submitForm === 'function') {
+    formRef.value.submitForm()
+  }
 }
 
-function toNavigateSep(values: any) {
-  const queryParams = new URLSearchParams()
-  if (values['subSpecialistCode']) {
-    const isSub = isSubspecialist(values['subSpecialistCode'], specialistsTree.value)
-    if (!isSub) {
-      values['specialistCode'] = values['subSpecialistCode']
-      delete values['subSpecialistCode']
-    }
-  }
-
-  Object.keys(values).forEach((field) => {
-    if (values[field]) {
-      queryParams.append(toKebabCase(field), values[field])
-    }
-  })
-
-  navigateTo('/integration/bpjs-vclaim/sep/add' + `?${queryParams.toString()}`)
-}
-
-async function handleSaveEncounter(formValues: any) {
-  // Validate patient is selected
-  if (!selectedPatient.value || !selectedPatientObject.value) {
-    toast({
-      title: 'Gagal',
-      description: 'Pasien harus dipilih terlebih dahulu',
-      variant: 'destructive',
-    })
-    return
-  }
-
-  try {
-    isSaving.value = true
-
-    // Get employee_id from user store
-    const employeeId = userStore.user?.employee_id || userStore.user?.employee?.id || 0
-
-    // Format date to ISO format
-    const formatDate = (dateString: string): string => {
-      if (!dateString) return ''
-      const date = new Date(dateString)
-      return date.toISOString()
-    }
-
-    // Get specialist_id and subspecialist_id from TreeSelect value (code)
-    const { specialist_id, subspecialist_id } = getSpecialistIdsFromCode(formValues.subSpecialistId || '')
-
-    // Build payload
-    const payload: any = {
-      patient_id: selectedPatientObject.value?.id || Number(selectedPatient.value),
-      registeredAt: formatDate(formValues.registerDate),
-      visitDate: formatDate(formValues.registerDate),
-      class_code: props.classCode || '',
-      subClass_code: props.subClassCode || '',
-      infra_id: null,
-      unit_id: null,
-      appointment_doctor_id: Number(formValues.doctorId),
-      responsible_doctor_id: Number(formValues.doctorId),
-      paymentType: formValues.paymentType,
-      cardNumber: formValues.cardNumber,
-      refSource_name: '',
-      appointment_id: null,
-    }
-
-    if (employeeId && employeeId > 0) {
-      payload.adm_employee_id = employeeId
-    }
-
-    // Add specialist_id and subspecialist_id if available
-    if (specialist_id) {
-      payload.specialist_id = specialist_id
-    }
-    if (subspecialist_id) {
-      payload.subspecialist_id = subspecialist_id
-    }
-
-    let paymentMethod = 'cash'
-    if (formValues.paymentType === 'jkn' || formValues.paymentType === 'jkmm') {
-      paymentMethod = 'insurance'
-    } else if (formValues.paymentType === 'spm') {
-      paymentMethod = 'cash'
-    } else if (formValues.paymentType === 'pks') {
-      paymentMethod = 'membership'
-    }
-
-    if (paymentMethod === 'insurance') {
-      payload.paymentMethod_code = paymentMethod
-      payload.insuranceCompany_id = null
-      payload.member_number = formValues.cardNumber
-      payload.ref_number = formValues.sepNumber
-    }
-
-    // Add visitMode_code and allocatedVisitCount only if classCode is ambulatory
-    if (props.classCode === 'ambulatory') {
-      payload.visitMode_code = 'adm'
-      payload.allocatedVisitCount = 0
-    }
-
-    // Call encounter service - use update if edit mode, create otherwise
-    let result
-    if (isEditMode.value) {
-      result = await updateEncounter(props.id, payload)
-    } else {
-      result = await createEncounter(payload)
-    }
-
-    if (result.success) {
-      toast({
-        title: 'Berhasil',
-        description: isEditMode.value ? 'Kunjungan berhasil diperbarui' : 'Kunjungan berhasil dibuat',
-        variant: 'default',
-      })
-      // Redirect to list page
-      await navigateTo(getListPath())
-    } else {
-      const errorMessage = result.body?.message || (isEditMode.value ? 'Gagal memperbarui kunjungan' : 'Gagal membuat kunjungan')
-      toast({
-        title: 'Gagal',
-        description: errorMessage,
-        variant: 'destructive',
-      })
-    }
-  } catch (error: any) {
-    console.error('Error saving encounter:', error)
-    toast({
-      title: 'Gagal',
-      description: error?.message || (isEditMode.value ? 'Gagal memperbarui kunjungan' : 'Gagal membuat kunjungan'),
-      variant: 'destructive',
-    })
-  } finally {
-    isSaving.value = false
+function handleFetch(value?: any) {
+  if (value?.subSpecialistId) {
+    handleFetchDoctors(value.subSpecialistId)
   }
 }
 
@@ -246,11 +82,9 @@ async function handleEvent(menu: string, value?: any) {
   } else if (menu === 'add') {
     navigateTo('/client/patient/add')
   } else if (menu === 'add-sep') {
-    // If SEP is already valid, don't navigate
     if (isSepValid.value) {
       return
     }
-    recSelectId.value = null
     toNavigateSep({
       isService: 'false',
       sourcePath: route.path,
@@ -258,10 +92,7 @@ async function handleEvent(menu: string, value?: any) {
       ...value,
     })
   } else if (menu === 'sep-number-changed') {
-    // Update sepNumber when it changes in form (only if different to prevent loop)
-    // When SEP number changes from child form, trigger validation/getList immediately
-    // so parent can react (this will also be picked up by the debounced watcher)
-    await validateSepNumber(String(value || ''))
+    await getValidateSepNumber(String(value || ''))
   } else if (menu === 'save') {
     await handleSaveEncounter(value)
   } else if (menu === 'cancel') {
@@ -269,421 +100,26 @@ async function handleEvent(menu: string, value?: any) {
   }
 }
 
-// Handle save button click
-function handleSaveClick() {
-  console.log('🔵 handleSaveClick called')
-  console.log('🔵 formRef:', formRef.value)
-  console.log('🔵 isSaveDisabled:', isSaveDisabled.value)
-  console.log('🔵 selectedPatient:', selectedPatient.value)
-  console.log('🔵 selectedPatientObject:', selectedPatientObject.value)
-  console.log('🔵 isSaving:', isSaving.value)
-  console.log('🔵 isLoadingDetail:', isLoadingDetail.value)
-  
-  if (formRef.value && typeof formRef.value.submitForm === 'function') {
-    console.log('🔵 Calling formRef.value.submitForm()')
-    formRef.value.submitForm()
-  } else {
-    console.error('❌ formRef.value is null or submitForm is not a function')
-  }
-}
+provide('rec_select_id', recSelectId)
+provide('table_data_loader', isLoading)
 
-/**
- * Validate SEP number
- */
-async function validateSepNumber(sepNumberValue: string) {
-  // Reset validation if SEP number is empty
-  if (!sepNumberValue || sepNumberValue.trim() === '') {
-    isSepValid.value = false
-    isCheckingSep.value = false
-    return
-  }
-
-  try {
-    isSepValid.value = false
-    isCheckingSep.value = true
-    const result = await getSepList({ number: sepNumberValue.trim() })
-    // Check if SEP is found
-    // If response is not null, SEP is found
-    // If response is null with metaData code "201", SEP is not found
-    if (result.success && result.body?.response !== null) {
-      isSepValid.value = result.body?.response?.metaData?.code === '200'
-    }
-  } catch (error) {
-    console.error('Error checking SEP:', error)
-    isSepValid.value = false
-  } finally {
-    isCheckingSep.value = false
-  }
-}
-
-// Watch debounced SEP number to validate
 watch(debouncedSepNumber, async (newValue) => {
-  await validateSepNumber(newValue)
+  await getValidateSepNumber(newValue)
 })
 
-// Watch payment type to reset SEP validation
 watch(
   () => formObjects.value?.paymentType,
   (newValue) => {
     isSepValid.value = false
-    // If payment type is not JKN, clear SEP number
     if (newValue !== 'jkn') {
       sepNumber.value = ''
     }
   },
 )
 
-async function handleFetchSpecialists() {
-  try {
-    const specialistsResult = await getSpecialistList({ 'page-size': 100, includes: 'subspecialists' })
-    if (specialistsResult.success) {
-      const specialists = specialistsResult.body?.data || []
-      specialistsData.value = specialists // Store full data for mapping
-      specialistsTree.value = getSpecialistTreeItems(specialists)
-    }
-  } catch (error) {
-    console.error('Error fetching specialist-subspecialist tree:', error)
-  }
-}
-
-/**
- * Helper function to check if a value exists in the specialistsTree
- * Returns true if it's a leaf node (subspecialist), false if parent node (specialist)
- */
-function isSubspecialist(value: string, items: TreeItem[]): boolean {
-  for (const item of items) {
-    if (item.value === value) {
-      // If this item has children, it's not selected, so skip
-      // If this is the selected item, check if it has children in the tree
-      return false // This means it's a specialist, not a subspecialist
-    }
-    if (item.children) {
-      for (const child of item.children) {
-        if (child.value === value) {
-          // This is a subspecialist (leaf node)
-          return true
-        }
-      }
-    }
-  }
-  return false
-}
-
-/**
- * Helper function to get specialist/subspecialist code from ID
- * Returns code string or null if not found
- */
-function getSpecialistCodeFromId(id: number | null | undefined): string | null {
-  if (!id) return null
-
-  // First check if encounter has specialist object with code
-  if (encounterData.value?.specialist?.id === id) {
-    return encounterData.value.specialist.code || null
-  }
-
-  // Search in specialistsData
-  for (const specialist of specialistsData.value) {
-    if (specialist.id === id) {
-      return specialist.code || null
-    }
-    // Check subspecialists
-    if (specialist.subspecialists && Array.isArray(specialist.subspecialists)) {
-      for (const subspecialist of specialist.subspecialists) {
-        if (subspecialist.id === id) {
-          return subspecialist.code || null
-        }
-      }
-    }
-  }
-
-  return null
-}
-
-/**
- * Helper function to get subspecialist code from ID
- * Returns code string or null if not found
- */
-function getSubspecialistCodeFromId(id: number | null | undefined): string | null {
-  if (!id) return null
-
-  // First check if encounter has subspecialist object with code
-  if (encounterData.value?.subspecialist?.id === id) {
-    return encounterData.value.subspecialist.code || null
-  }
-
-  // Search in specialistsData
-  for (const specialist of specialistsData.value) {
-    if (specialist.subspecialists && Array.isArray(specialist.subspecialists)) {
-      for (const subspecialist of specialist.subspecialists) {
-        if (subspecialist.id === id) {
-          return subspecialist.code || null
-        }
-      }
-    }
-  }
-
-  return null
-}
-
-/**
- * Helper function to find specialist_id and subspecialist_id from TreeSelect value (code)
- * Returns { specialist_id: number | null, subspecialist_id: number | null }
- */
-function getSpecialistIdsFromCode(code: string): { specialist_id: number | null; subspecialist_id: number | null } {
-  if (!code) {
-    return { specialist_id: null, subspecialist_id: null }
-  }
-
-  // Check if it's a subspecialist
-  const isSub = isSubspecialist(code, specialistsTree.value)
-
-  if (isSub) {
-    // Find subspecialist and its parent specialist
-    for (const specialist of specialistsData.value) {
-      if (specialist.subspecialists && Array.isArray(specialist.subspecialists)) {
-        for (const subspecialist of specialist.subspecialists) {
-          if (subspecialist.code === code) {
-            return {
-              specialist_id: specialist.id ? Number(specialist.id) : null,
-              subspecialist_id: subspecialist.id ? Number(subspecialist.id) : null,
-            }
-          }
-        }
-      }
-    }
-  } else {
-    // It's a specialist
-    for (const specialist of specialistsData.value) {
-      if (specialist.code === code) {
-        return {
-          specialist_id: specialist.id ? Number(specialist.id) : null,
-          subspecialist_id: null,
-        }
-      }
-    }
-  }
-
-  return { specialist_id: null, subspecialist_id: null }
-}
-
-async function handleFetchDoctors(subSpecialistId: string | null = null) {
-  try {
-    // Build filter based on selection type
-    const filterParams: any = { 'page-size': 100, includes: 'employee-Person' }
-
-    if (!subSpecialistId) {
-      const doctors = await getDoctorValueLabelList(filterParams)
-      doctorsList.value = doctors
-      return
-    }
-
-    // Check if the selectd value is a subspecialist or specialist
-    const isSub = isSubspecialist(subSpecialistId, specialistsTree.value)
-
-    if (isSub) {
-      // If selected is subspecialist, filter by subspecialist-id
-      filterParams['subspecialist-id'] = subSpecialistId
-    } else {
-      // If selected is specialist, filter by specialist-id
-      filterParams['specialist-id'] = subSpecialistId
-    }
-
-    const doctors = await getDoctorValueLabelList(filterParams)
-    doctorsList.value = doctors
-  } catch (error) {
-    console.error('Error fetching doctors:', error)
-    doctorsList.value = []
-  }
-}
-
-function handleFetch(value?: any) {
-  if (value?.subSpecialistId) {
-    // handleFetchDoctors(value.subSpecialistId)
-  }
-}
-
-async function handleInit() {
-  selectedPatientObject.value = null
-  paymentsList.value = Object.keys(paymentTypes).map((item) => ({
-    value: item.toString(),
-    label: paymentTypes[item],
-  })) as any
-  sepsList.value = Object.keys(sepRefTypeCodes).map((item) => ({
-    value: item.toString(),
-    label: sepRefTypeCodes[item],
-  })) as any
-  participantGroupsList.value = Object.keys(participantGroups).map((item) => ({
-    value: item.toString(),
-    label: participantGroups[item],
-  })) as any
-  // Fetch tree data
-  await handleFetchDoctors()
-  await handleFetchSpecialists()
-}
-
-/**
- * Load encounter detail data for edit mode
- */
-async function loadEncounterDetail() {
-  if (!isEditMode.value || props.id <= 0) {
-    return
-  }
-
-  try {
-    isLoadingDetail.value = true
-    // Include patient, person, specialist, and subspecialist in the response
-    const result = await getEncounterDetail(props.id, {
-      includes: 'patient,patient-person,specialist,subspecialist',
-    })
-    if (result.success && result.body?.data) {
-      encounterData.value = result.body.data
-      await mapEncounterToForm(encounterData.value)
-      // Set loading to false after mapping is complete
-      isLoadingDetail.value = false
-    } else {
-      toast({
-        title: 'Gagal',
-        description: 'Gagal memuat data kunjungan',
-        variant: 'destructive',
-      })
-      // Redirect to list page if encounter not found
-      await navigateTo(getListPath())
-    }
-  } catch (error: any) {
-    console.error('Error loading encounter detail:', error)
-    toast({
-      title: 'Gagal',
-      description: error?.message || 'Gagal memuat data kunjungan',
-      variant: 'destructive',
-    })
-    // Redirect to list page on error
-    await navigateTo(getListPath())
-  } finally {
-    isLoadingDetail.value = false
-  }
-}
-
-/**
- * Map encounter data to form fields
- */
-async function mapEncounterToForm(encounter: any) {
-  if (!encounter) return
-
-  // Set patient data - use data from response if available
-  if (encounter.patient) {
-    selectedPatient.value = String(encounter.patient.id)
-    selectedPatientObject.value = encounter.patient
-    // Only fetch patient if person data is missing
-    if (!encounter.patient.person) {
-      await getPatientCurrent(selectedPatient.value)
-    }
-  }
-
-  // Map form fields
-  const formData: any = {}
-
-  // Patient data (readonly, populated from selected patient)
-  // Use encounter.patient.person which is already in the response
-  if (encounter.patient?.person) {
-    formData.patientName = encounter.patient.person.name || ''
-    formData.nationalIdentity = encounter.patient.person.residentIdentityNumber || ''
-    formData.medicalRecordNumber = encounter.patient.number || ''
-  } else if (selectedPatientObject.value?.person) {
-    // Fallback to selectedPatientObject if encounter.patient.person is not available
-    formData.patientName = selectedPatientObject.value.person.name || ''
-    formData.nationalIdentity = selectedPatientObject.value.person.residentIdentityNumber || ''
-    formData.medicalRecordNumber = selectedPatientObject.value.number || ''
-  }
-
-  // Doctor ID
-  const doctorId = encounter.appointment_doctor_id || encounter.responsible_doctor_id
-  if (doctorId) {
-    formData.doctorId = String(doctorId)
-  }
-
-  // Specialist/Subspecialist - use helper function to get code from ID
-  // Priority: subspecialist_id > specialist_id
-  if (encounter.subspecialist_id) {
-    const subspecialistCode = getSubspecialistCodeFromId(encounter.subspecialist_id)
-    if (subspecialistCode) {
-      formData.subSpecialistId = subspecialistCode
-    }
-  } else if (encounter.specialist_id) {
-    const specialistCode = getSpecialistCodeFromId(encounter.specialist_id)
-    if (specialistCode) {
-      formData.subSpecialistId = specialistCode
-    }
-  }
-  
-  // Fallback: if encounter has specialist/subspecialist object with code
-  if (!formData.subSpecialistId) {
-    if (encounter.subspecialist?.code) {
-      formData.subSpecialistId = encounter.subspecialist.code
-    } else if (encounter.specialist?.code) {
-      formData.subSpecialistId = encounter.specialist.code
-    }
-  }
-
-  // Register date
-  if (encounter.registeredAt) {
-    // Convert ISO date to local date string (YYYY-MM-DD)
-    const date = new Date(encounter.registeredAt)
-    formData.registerDate = date.toISOString().split('T')[0]
-  } else if (encounter.visitDate) {
-    const date = new Date(encounter.visitDate)
-    formData.registerDate = date.toISOString().split('T')[0]
-  }
-
-  // Payment data - use fields directly from encounter
-  // Map paymentMethod_code to paymentType
-  if (encounter.paymentMethod_code) {
-    // Map paymentMethod_code to paymentType
-    // 'insurance' typically means JKN/JKMM
-    if (encounter.paymentMethod_code === 'insurance') {
-      formData.paymentType = 'jkn' // Default to JKN for insurance
-    } else {
-      // For other payment methods, use the code directly if it matches
-      // Otherwise default to 'spm'
-      const validPaymentTypes = ['jkn', 'jkmm', 'spm', 'pks']
-      if (validPaymentTypes.includes(encounter.paymentMethod_code)) {
-        formData.paymentType = encounter.paymentMethod_code
-      } else {
-        formData.paymentType = 'spm' // Default to SPM
-      }
-    }
-  } else {
-    // If paymentMethod_code is empty or null, default to 'spm'
-    formData.paymentType = 'spm'
-  }
-
-  // Map payment fields directly from encounter
-  formData.cardNumber = encounter.member_number || ''
-  formData.sepNumber = encounter.ref_number || ''
-
-  // Note: patientCategory and sepType might not be available in the response
-  // These fields might need to be set manually or fetched from other sources
-
-  // Set form objects for the form component
-  formObjects.value = formData
-
-  // Update sepNumber for validation
-  if (formData.sepNumber) {
-    sepNumber.value = formData.sepNumber
-  }
-
-  // Fetch doctors based on specialist/subspecialist selection
-  if (formData.subSpecialistId) {
-    await handleFetchDoctors(formData.subSpecialistId)
-  }
-}
-
-provide('rec_select_id', recSelectId)
-provide('table_data_loader', isLoading)
-
 onMounted(async () => {
   await handleInit()
-  // Load encounter detail if in edit mode
-  if (isEditMode.value) {
+  if (props.id > 0) {
     await loadEncounterDetail()
   }
 })
diff --git a/app/components/content/sep/entry.vue b/app/components/content/sep/entry.vue
index 1636df66..6e91f464 100644
--- a/app/components/content/sep/entry.vue
+++ b/app/components/content/sep/entry.vue
@@ -11,15 +11,9 @@ import AppViewLetter from '~/components/app/sep/view-letter.vue'
 import useIntegrationSepEntry from '~/handlers/integration-sep-entry.handler'
 
 const {
-  openPatient,
-  openLetter,
-  openHistory,
-  selectedLetter,
-  selectedObjects,
-  selectedServiceType,
-  selectedAdmissionType,
   histories,
   letters,
+  patients,
   doctors,
   diagnoses,
   facilitiesFrom,
@@ -41,18 +35,24 @@ const {
   isSaveLoading,
   isLetterReadonly,
   isLoadingPatient,
+  openPatient,
+  openLetter,
+  openHistory,
+  selectedLetter,
+  selectedObjects,
+  selectedServiceType,
+  selectedAdmissionType,
   specialistsTree,
+  selectedPatient,
+  paginationMeta,
+  getLetterMappers,
+  getPatientsList,
+  getPatientByIdentifierSearch,
   handleSaveLetter,
   handleSavePatient,
   handleEvent,
   handleFetch,
   handleInit,
-  getLetterMappers,
-  patients,
-  selectedPatient,
-  paginationMeta,
-  getPatientsList,
-  getPatientByIdentifierSearch,
 } = useIntegrationSepEntry()
 
 onMounted(async () => {
diff --git a/app/handlers/encounter-entry.handler.ts b/app/handlers/encounter-entry.handler.ts
new file mode 100644
index 00000000..ad7c09b4
--- /dev/null
+++ b/app/handlers/encounter-entry.handler.ts
@@ -0,0 +1,560 @@
+import { ref, reactive, computed } from 'vue'
+import { useRoute } from 'vue-router'
+
+// Components
+import { toast } from '~/components/pub/ui/toast'
+
+// Models
+import type { TreeItem } from '~/components/pub/my-ui/select-tree/type'
+import type { DataTableLoader } from '~/components/pub/my-ui/data-table/type'
+import { paymentTypes, sepRefTypeCodes, participantGroups } from '~/lib/constants.vclaim'
+
+// Stores
+import { useUserStore } from '~/stores/user'
+
+// Services
+import {
+  getList as getSpecialistList,
+  getValueTreeItems as getSpecialistTreeItems,
+} from '~/services/specialist.service'
+import { getValueLabelList as getDoctorValueLabelList } from '~/services/doctor.service'
+import {
+  create as createEncounter,
+  getDetail as getEncounterDetail,
+  update as updateEncounter,
+} from '~/services/encounter.service'
+import { getList as getSepList } from '~/services/vclaim-sep.service'
+
+// Handlers
+import {
+  patients,
+  selectedPatient,
+  selectedPatientObject,
+  paginationMeta,
+  getPatientsList,
+  getPatientCurrent,
+  getPatientByIdentifierSearch,
+} from '~/handlers/patient.handler'
+
+export function useEncounterEntry(props: {
+  id: number
+  classCode?: 'ambulatory' | 'emergency' | 'inpatient' | 'outpatient'
+  subClassCode?: 'reg' | 'rehab' | 'chemo' | 'emg' | 'eon' | 'op' | 'icu' | 'hcu' | 'vk'
+}) {
+  const route = useRoute()
+  const userStore = useUserStore()
+  const openPatient = ref(false)
+  const isLoading = reactive<DataTableLoader>({
+    isTableLoading: false,
+  })
+  const paymentsList = ref<Array<{ value: string; label: string }>>([])
+  const sepsList = ref<Array<{ value: string; label: string }>>([])
+  const participantGroupsList = ref<Array<{ value: string; label: string }>>([])
+  const specialistsTree = ref<TreeItem[]>([])
+  const specialistsData = ref<any[]>([])
+  const doctorsList = ref<Array<{ value: string; label: string }>>([])
+  const recSelectId = ref<number | null>(null)
+  const isSaving = ref(false)
+  const isLoadingDetail = ref(false)
+  const encounterData = ref<any>(null)
+  const formObjects = ref<any>({})
+  const isSepValid = ref(false)
+  const isCheckingSep = ref(false)
+  const sepNumber = ref('')
+
+  const isEditMode = computed(() => props.id > 0)
+
+  const isSaveDisabled = computed(() => {
+    return !selectedPatient.value || !selectedPatientObject.value || isSaving.value || isLoadingDetail.value
+  })
+
+  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'
+    }
+    return '/encounter'
+  }
+
+  function toKebabCase(str: string): string {
+    return str.replace(/([A-Z])/g, '-$1').toLowerCase()
+  }
+
+  function toNavigateSep(values: any) {
+    const queryParams = new URLSearchParams()
+    if (values['subSpecialistCode']) {
+      const isSub = getIsSubspecialist(values['subSpecialistCode'], specialistsTree.value)
+      if (!isSub) {
+        values['specialistCode'] = values['subSpecialistCode']
+        delete values['subSpecialistCode']
+      }
+    }
+
+    Object.keys(values).forEach((field) => {
+      if (values[field]) {
+        queryParams.append(toKebabCase(field), values[field])
+      }
+    })
+
+    navigateTo('/integration/bpjs-vclaim/sep/add' + `?${queryParams.toString()}`)
+  }
+
+  function getIsSubspecialist(value: string, items: TreeItem[]): boolean {
+    for (const item of items) {
+      if (item.value === value) {
+        return false
+      }
+      if (item.children) {
+        for (const child of item.children) {
+          if (child.value === value) {
+            return true
+          }
+        }
+      }
+    }
+    return false
+  }
+
+  function getSpecialistCodeFromId(id: number | null | undefined): string | null {
+    if (!id) return null
+
+    if (encounterData.value?.specialist?.id === id) {
+      return encounterData.value.specialist.code || null
+    }
+
+    for (const specialist of specialistsData.value) {
+      if (specialist.id === id) {
+        return specialist.code || null
+      }
+      if (specialist.subspecialists && Array.isArray(specialist.subspecialists)) {
+        for (const subspecialist of specialist.subspecialists) {
+          if (subspecialist.id === id) {
+            return subspecialist.code || null
+          }
+        }
+      }
+    }
+
+    return null
+  }
+
+  function getSubspecialistCodeFromId(id: number | null | undefined): string | null {
+    if (!id) return null
+
+    if (encounterData.value?.subspecialist?.id === id) {
+      return encounterData.value.subspecialist.code || null
+    }
+
+    for (const specialist of specialistsData.value) {
+      if (specialist.subspecialists && Array.isArray(specialist.subspecialists)) {
+        for (const subspecialist of specialist.subspecialists) {
+          if (subspecialist.id === id) {
+            return subspecialist.code || null
+          }
+        }
+      }
+    }
+
+    return null
+  }
+
+  function getSpecialistIdsFromCode(code: string): { specialist_id: number | null; subspecialist_id: number | null } {
+    if (!code) {
+      return { specialist_id: null, subspecialist_id: null }
+    }
+
+    const isSub = getIsSubspecialist(code, specialistsTree.value)
+
+    if (isSub) {
+      for (const specialist of specialistsData.value) {
+        if (specialist.subspecialists && Array.isArray(specialist.subspecialists)) {
+          for (const subspecialist of specialist.subspecialists) {
+            if (subspecialist.code === code) {
+              return {
+                specialist_id: specialist.id ? Number(specialist.id) : null,
+                subspecialist_id: subspecialist.id ? Number(subspecialist.id) : null,
+              }
+            }
+          }
+        }
+      }
+    } else {
+      for (const specialist of specialistsData.value) {
+        if (specialist.code === code) {
+          return {
+            specialist_id: specialist.id ? Number(specialist.id) : null,
+            subspecialist_id: null,
+          }
+        }
+      }
+    }
+
+    return { specialist_id: null, subspecialist_id: null }
+  }
+
+  async function getValidateSepNumber(sepNumberValue: string) {
+    if (!sepNumberValue || sepNumberValue.trim() === '') {
+      isSepValid.value = false
+      isCheckingSep.value = false
+      return
+    }
+
+    try {
+      isSepValid.value = false
+      isCheckingSep.value = true
+      const result = await getSepList({ number: sepNumberValue.trim() })
+      if (result.success && result.body?.response !== null) {
+        const response = result.body?.response || {}
+        if (Object.keys(response).length > 0) {
+          formObjects.value.patientName = response.peserta?.nama || '-'
+          formObjects.value.medicalRecordNumber = response.peserta?.noMr || '-'
+          formObjects.value.cardNumber = response.peserta?.noKartu || '-'
+          formObjects.value.registerDate = response.tglSep || null
+        }
+        isSepValid.value = result.body?.metaData?.code === '200'
+      }
+    } catch (error) {
+      console.error('Error checking SEP:', error)
+      isSepValid.value = false
+    } finally {
+      isCheckingSep.value = false
+    }
+  }
+
+  async function handleFetchSpecialists() {
+    try {
+      const specialistsResult = await getSpecialistList({ 'page-size': 100, includes: 'subspecialists' })
+      if (specialistsResult.success) {
+        const specialists = specialistsResult.body?.data || []
+        specialistsData.value = specialists
+        specialistsTree.value = getSpecialistTreeItems(specialists)
+      }
+    } catch (error) {
+      console.error('Error fetching specialist-subspecialist tree:', error)
+    }
+  }
+
+  async function handleFetchDoctors(subSpecialistId: string | null = null) {
+    try {
+      const filterParams: any = { 'page-size': 100, includes: 'employee-Person' }
+
+      if (!subSpecialistId) {
+        const doctors = await getDoctorValueLabelList(filterParams, true)
+        doctorsList.value = doctors
+        return
+      }
+
+      const isSub = getIsSubspecialist(subSpecialistId, specialistsTree.value)
+
+      if (isSub) {
+        filterParams['subspecialist-id'] = subSpecialistId
+      } else {
+        filterParams['specialist-id'] = subSpecialistId
+      }
+
+      const doctors = await getDoctorValueLabelList(filterParams, true)
+      doctorsList.value = doctors
+    } catch (error) {
+      console.error('Error fetching doctors:', error)
+      doctorsList.value = []
+    }
+  }
+
+  async function handleInit() {
+    selectedPatientObject.value = null
+    paymentsList.value = Object.keys(paymentTypes).map((item) => ({
+      value: item.toString(),
+      label: paymentTypes[item],
+    })) as any
+    sepsList.value = Object.keys(sepRefTypeCodes).map((item) => ({
+      value: item.toString(),
+      label: sepRefTypeCodes[item],
+    })) as any
+    participantGroupsList.value = Object.keys(participantGroups).map((item) => ({
+      value: item.toString(),
+      label: participantGroups[item],
+    })) as any
+    await handleFetchDoctors()
+    await handleFetchSpecialists()
+    if (route.query) {
+      formObjects.value = { ...formObjects.value }
+      const queries = route.query as any
+      if (queries['sep-number']) {
+        formObjects.value.sepNumber = queries['sep-number']
+        formObjects.value.paymentType = 'jkn'
+      }
+    }
+  }
+
+  async function loadEncounterDetail() {
+    if (!isEditMode.value || props.id <= 0) {
+      return
+    }
+
+    try {
+      isLoadingDetail.value = true
+      const result = await getEncounterDetail(props.id, {
+        includes: 'patient,patient-person,specialist,subspecialist',
+      })
+      if (result.success && result.body?.data) {
+        encounterData.value = result.body.data
+        await mapEncounterToForm(encounterData.value)
+        isLoadingDetail.value = false
+      } else {
+        toast({
+          title: 'Gagal',
+          description: 'Gagal memuat data kunjungan',
+          variant: 'destructive',
+        })
+        await navigateTo(getListPath())
+      }
+    } catch (error: any) {
+      console.error('Error loading encounter detail:', error)
+      toast({
+        title: 'Gagal',
+        description: error?.message || 'Gagal memuat data kunjungan',
+        variant: 'destructive',
+      })
+      await navigateTo(getListPath())
+    } finally {
+      isLoadingDetail.value = false
+    }
+  }
+
+  async function mapEncounterToForm(encounter: any) {
+    if (!encounter) return
+
+    if (encounter.patient) {
+      selectedPatient.value = String(encounter.patient.id)
+      selectedPatientObject.value = encounter.patient
+      if (!encounter.patient.person) {
+        await getPatientCurrent(selectedPatient.value)
+      }
+    }
+
+    const formData: any = {}
+    if (encounter.patient?.person) {
+      formData.patientName = encounter.patient.person.name || ''
+      formData.nationalIdentity = encounter.patient.person.residentIdentityNumber || ''
+      formData.medicalRecordNumber = encounter.patient.number || ''
+    } else if (selectedPatientObject.value?.person) {
+      formData.patientName = selectedPatientObject.value.person.name || ''
+      formData.nationalIdentity = selectedPatientObject.value.person.residentIdentityNumber || ''
+      formData.medicalRecordNumber = selectedPatientObject.value.number || ''
+    }
+
+    const doctorId = encounter.appointment_doctor_id || encounter.responsible_doctor_id
+    if (doctorId) {
+      formData.doctorId = String(doctorId)
+    }
+
+    if (encounter.subspecialist_id) {
+      const subspecialistCode = getSubspecialistCodeFromId(encounter.subspecialist_id)
+      if (subspecialistCode) {
+        formData.subSpecialistId = subspecialistCode
+      }
+    } else if (encounter.specialist_id) {
+      const specialistCode = getSpecialistCodeFromId(encounter.specialist_id)
+      if (specialistCode) {
+        formData.subSpecialistId = specialistCode
+      }
+    }
+
+    if (!formData.subSpecialistId) {
+      if (encounter.subspecialist?.code) {
+        formData.subSpecialistId = encounter.subspecialist.code
+      } else if (encounter.specialist?.code) {
+        formData.subSpecialistId = encounter.specialist.code
+      }
+    }
+
+    if (encounter.registeredAt) {
+      const date = new Date(encounter.registeredAt)
+      formData.registerDate = date.toISOString().split('T')[0]
+    } else if (encounter.visitDate) {
+      const date = new Date(encounter.visitDate)
+      formData.registerDate = date.toISOString().split('T')[0]
+    }
+
+    if (encounter.paymentMethod_code) {
+      if (encounter.paymentMethod_code === 'insurance') {
+        formData.paymentType = 'jkn'
+      } else {
+        const validPaymentTypes = ['jkn', 'jkmm', 'spm', 'pks']
+        if (validPaymentTypes.includes(encounter.paymentMethod_code)) {
+          formData.paymentType = encounter.paymentMethod_code
+        } else {
+          formData.paymentType = 'spm'
+        }
+      }
+    } else {
+      formData.paymentType = 'spm'
+    }
+
+    formData.cardNumber = encounter.member_number || ''
+    formData.sepNumber = encounter.ref_number || ''
+    formObjects.value = formData
+
+    if (formData.sepNumber) {
+      sepNumber.value = formData.sepNumber
+    }
+    if (formData.subSpecialistId) {
+      await handleFetchDoctors(formData.subSpecialistId)
+    }
+  }
+
+  async function handleSaveEncounter(formValues: any) {
+    if (!selectedPatient.value || !selectedPatientObject.value) {
+      toast({
+        title: 'Gagal',
+        description: 'Pasien harus dipilih terlebih dahulu',
+        variant: 'destructive',
+      })
+      return
+    }
+
+    try {
+      isSaving.value = true
+
+      const employeeId = userStore.user?.employee_id || userStore.user?.employee?.id || 0
+
+      const formatDate = (dateString: string): string => {
+        if (!dateString) return ''
+        const date = new Date(dateString)
+        return date.toISOString()
+      }
+
+      const { specialist_id, subspecialist_id } = getSpecialistIdsFromCode(formValues.subSpecialistId || '')
+
+      const payload: any = {
+        patient_id: selectedPatientObject.value?.id || Number(selectedPatient.value),
+        registeredAt: formatDate(formValues.registerDate),
+        visitDate: formatDate(formValues.registerDate),
+        class_code: props.classCode || '',
+        subClass_code: props.subClassCode || '',
+        infra_id: null,
+        unit_id: null,
+        appointment_doctor_id: Number(formValues.doctorId),
+        responsible_doctor_id: Number(formValues.doctorId),
+        paymentType: formValues.paymentType,
+        cardNumber: formValues.cardNumber,
+        refSource_name: '',
+        appointment_id: null,
+      }
+
+      if (employeeId && employeeId > 0) {
+        payload.adm_employee_id = employeeId
+      }
+
+      if (specialist_id) {
+        payload.specialist_id = specialist_id
+      }
+      if (subspecialist_id) {
+        payload.subspecialist_id = subspecialist_id
+      }
+
+      let paymentMethod = 'cash'
+      if (formValues.paymentType === 'jkn' || formValues.paymentType === 'jkmm') {
+        paymentMethod = 'insurance'
+      } else if (formValues.paymentType === 'spm') {
+        paymentMethod = 'cash'
+      } else if (formValues.paymentType === 'pks') {
+        paymentMethod = 'membership'
+      }
+
+      if (paymentMethod === 'insurance') {
+        payload.paymentMethod_code = paymentMethod
+        payload.insuranceCompany_id = null
+        payload.member_number = formValues.cardNumber
+        payload.ref_number = formValues.sepNumber
+      }
+
+      if (props.classCode === 'ambulatory') {
+        payload.visitMode_code = 'adm'
+        payload.allocatedVisitCount = 0
+      }
+
+      let result
+      if (isEditMode.value) {
+        result = await updateEncounter(props.id, payload)
+      } else {
+        result = await createEncounter(payload)
+      }
+
+      if (result.success) {
+        toast({
+          title: 'Berhasil',
+          description: isEditMode.value ? 'Kunjungan berhasil diperbarui' : 'Kunjungan berhasil dibuat',
+          variant: 'default',
+        })
+        await navigateTo(getListPath())
+      } else {
+        const errorMessage =
+          result.body?.message || (isEditMode.value ? 'Gagal memperbarui kunjungan' : 'Gagal membuat kunjungan')
+        toast({
+          title: 'Gagal',
+          description: errorMessage,
+          variant: 'destructive',
+        })
+      }
+    } catch (error: any) {
+      console.error('Error saving encounter:', error)
+      toast({
+        title: 'Gagal',
+        description: error?.message || (isEditMode.value ? 'Gagal memperbarui kunjungan' : 'Gagal membuat kunjungan'),
+        variant: 'destructive',
+      })
+    } finally {
+      isSaving.value = false
+    }
+  }
+
+  return {
+    patients,
+    paymentsList,
+    sepsList,
+    sepNumber,
+    participantGroupsList,
+    specialistsTree,
+    doctorsList,
+    recSelectId,
+    isSaving,
+    isLoadingDetail,
+    encounterData,
+    formObjects,
+    openPatient,
+    isSepValid,
+    isCheckingSep,
+    isEditMode,
+    isSaveDisabled,
+    isLoading,
+    selectedPatient,
+    selectedPatientObject,
+    paginationMeta,
+    loadEncounterDetail,
+    mapEncounterToForm,
+    toKebabCase,
+    toNavigateSep,
+    getListPath,
+    getSpecialistCodeFromId,
+    getSubspecialistCodeFromId,
+    getIsSubspecialist,
+    getSpecialistIdsFromCode,
+    getPatientsList,
+    getPatientCurrent,
+    getPatientByIdentifierSearch,
+    getValidateSepNumber,
+    handleFetchSpecialists,
+    handleFetchDoctors,
+    handleInit,
+    handleSaveEncounter,
+  }
+}