feat(encounter): add SEP validation and handling in entry form

app/components/content/encounter/entry.vue

@@ -19,6 +19,10 @@ import {
 } 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 {
@@ -60,6 +64,12 @@ 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 debouncedSepNumber = refDebounced(sepNumber, 500)
+
 // Computed for edit mode
 const isEditMode = computed(() => props.id > 0)
 
@@ -236,6 +246,10 @@ 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',
@@ -243,6 +257,11 @@ async function handleEvent(menu: string, value?: any) {
       resource: `${props.classCode}-${props.subClassCode}`,
       ...value,
     })
+  } else if (menu === 'sep-number-changed') {
+    // Update sepNumber when it changes in form (only if different to prevent loop)
+    if (sepNumber.value !== value) {
+      sepNumber.value = value || ''
+    }
   } else if (menu === 'save') {
     await handleSaveEncounter(value)
   } else if (menu === 'cancel') {
@@ -250,6 +269,63 @@ async function handleEvent(menu: string, value?: any) {
   }
 }
 
+/**
+ * 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
+  }
+
+  // Only check if payment type is JKN
+  // We need to check from formObjects
+  const paymentType = formObjects.value?.paymentType
+  if (paymentType !== 'jkn') {
+    isSepValid.value = false
+    return
+  }
+
+  try {
+    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 = true
+    } else {
+      // SEP not found (response null with metaData code "201")
+      isSepValid.value = false
+    }
+  } 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)
+})
+
+// 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' })
@@ -583,6 +659,11 @@ async function mapEncounterToForm(encounter: any) {
   // 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)
@@ -613,6 +694,9 @@ onMounted(async () => {
 
   <AppEncounterEntryForm
     ref="formRef"
+    :is-loading="isLoadingDetail"
+    :is-sep-valid="isSepValid"
+    :is-checking-sep="isCheckingSep"
     :payments="paymentsList"
     :seps="sepsList"
     :participant-groups="participantGroupsList"
@@ -620,7 +704,6 @@ onMounted(async () => {
     :doctor="doctorsList"
     :patient="selectedPatientObject"
     :objects="formObjects"
-    :is-loading="isLoadingDetail"
     @event="handleEvent"
     @fetch="handleFetch"
   />