feat(sep): implement debounced search for patient identifiers and enhance entry form functionality

app/components/app/sep/entry-form.vue

@@ -17,14 +17,16 @@ import { IntegrationBpjsSchema, type IntegrationBpjsFormData } from '~/schemas/i
 import type { PatientEntity } from '~/models/patient'
 
 // Helpers
+import { watch } from 'vue'
 import { toTypedSchema } from '@vee-validate/zod'
 import { useForm } from 'vee-validate'
-import { is } from "date-fns/locale"
+import { refDebounced } from '@vueuse/core'
 
 const props = defineProps<{
   isLoading?: boolean
   isReadonly?: boolean
   isService?: boolean
+  isShowPatient?: boolean;
   mode?: string
   doctors: any[]
   diagnoses: any[]
@@ -105,8 +107,13 @@ const mode = props.mode !== undefined ? props.mode : 'add'
 const isLoading = props.isLoading !== undefined ? props.isLoading : false
 const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
 const isService = ref(props.isService || false)
+const isShowPatient = ref(props.isShowPatient || false)
 const isDateReload = ref(false)
 
+// Debounced search for bpjsNumber and nationalId
+const debouncedBpjsNumber = refDebounced(bpjsNumber, 500)
+const debouncedNationalId = refDebounced(nationalId, 500)
+
 if (mode === 'add') {
   // Set default sepDate to current date in YYYY-MM-DD format
   const today = new Date()
@@ -154,6 +161,19 @@ watch(props, (value) => {
   }
 })
 
+// Watch debounced search values
+watch(debouncedBpjsNumber, (newValue) => {
+  if (newValue && newValue !== '-' && newValue.length >= 3) {
+    emit('event', 'search-patient-by-identifier', { text: newValue, type: 'bpjs' })
+  }
+})
+
+watch(debouncedNationalId, (newValue) => {
+  if (newValue && newValue !== '-' && newValue.length >= 3) {
+    emit('event', 'search-patient-by-identifier', { text: newValue, type: 'nationalId' })
+  }
+})
+
 onMounted(() => {
   if (!isService.value) {
     serviceType.value = '2'
@@ -229,6 +249,7 @@ onMounted(() => {
       <div class="flex items-center gap-2">
         <h3 class="text-lg font-semibold">Data Pasien</h3>
         <Button
+          v-if="isShowPatient"
           variant="outline"
           type="button"
           class="h-[40px] rounded-md border-orange-400 text-orange-400 hover:bg-green-50"
@@ -258,7 +279,7 @@ onMounted(() => {
               id="bpjsNumber"
               v-model="bpjsNumber"
               v-bind="bpjsNumberAttrs"
-              :disabled="true"
+              :disabled="false"
             />
           </Field>
         </Cell>
@@ -273,7 +294,7 @@ onMounted(() => {
               id="nationalId"
               v-model="nationalId"
               v-bind="nationalIdAttrs"
-              :disabled="true"
+              :disabled="false"
             />
           </Field>
         </Cell>