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

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

@@ -24,6 +24,8 @@ import { useForm } from 'vee-validate'
 const props = defineProps<{
   isLoading?: boolean
   isReadonly?: boolean
+  isSepValid?: boolean
+  isCheckingSep?: boolean
   doctor?: any[]
   subSpecialist?: any[]
   specialists?: TreeItem[]
@@ -61,6 +63,10 @@ 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: '' }]
@@ -86,6 +92,11 @@ watch(subSpecialistId, async (newValue) => {
   }
 })
 
+// Watch SEP number changes to notify parent
+watch(sepNumber, (newValue) => {
+  emit('event', 'sep-number-changed', newValue)
+})
+
 // Sync props to form fields
 watch(
   () => props.objects,
@@ -403,13 +414,33 @@ defineExpose({
                   :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"
+                  />
+                  <span v-else>+</span>
+                </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>