fix: refactor entry form of encounter

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

@@ -1,105 +1,114 @@
 <script setup lang="ts">
-import type { FormErrors } from '~/types/error'
-import { toTypedSchema } from '@vee-validate/zod'
+// 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 { Form } from '~/components/pub/ui/form'
 import DatepickerSingle from '~/components/pub/my-ui/datepicker/datepicker-single.vue'
 
-import { educationCodes, genderCodes, occupationCodes, religionCodes, relationshipCodes } from '~/lib/constants'
-import { mapToComboboxOptList } from '~/lib/utils'
-import { computed } from 'vue'
+// Types
+import { IntegrationEncounterSchema, type IntegrationEncounterFormData } from '~/schemas/integration-encounter.schema'
+import type { PatientEntity } from '~/models/patient'
 
-interface DivisionFormData {
-  name: string
-  code: string
-  parentId: string
-}
+// Helpers
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
 
 const props = defineProps<{
-  division: {
-    msg: {
-      placeholder: string
-      search: string
-      empty: string
-    }
-  }
-  items: {
-    value: string
-    label: string
-    code: string
-  }[]
-  schema: any
-  initialValues?: Partial<DivisionFormData>
-  errors?: FormErrors
-  selectedPatientObject?: any
+  isLoading?: boolean
+  isReadonly?: boolean
+  doctor?: any[]
+  subSpecialist?: any[]
+  payments: any[]
+  participantGroups?: any[]
+  seps: any[]
+  patient?: PatientEntity | null | undefined
+  objects?: any
 }>()
 
 const emit = defineEmits<{
-  (e: 'submit', values: DivisionFormData, resetForm: () => void): void
-  (e: 'cancel', resetForm: () => void): void
-  (e: 'click', action: 'search' | 'add' | 'add-sep', values?: any): void
+  (e: 'event', menu: string, value?: any): void
+  (e: 'fetch', value?: any): void
 }>()
 
-const relationshipOpts = mapToComboboxOptList(relationshipCodes)
-const educationOpts = mapToComboboxOptList(educationCodes)
-const occupationOpts = mapToComboboxOptList(occupationCodes)
-const genderOpts = mapToComboboxOptList(genderCodes)
-
-const formSchema = toTypedSchema(props.schema)
-
-// Computed properties for patient data
-const patientName = computed(() => {
-  return props.selectedPatientObject?.person?.name || ''
+// Validation schema
+const { handleSubmit, errors, defineField } = useForm<IntegrationEncounterFormData>({
+  validationSchema: toTypedSchema(IntegrationEncounterSchema),
 })
 
-const patientNationalIdentity = computed(() => {
-  return props.selectedPatientObject?.person?.residentIdentityNumber || ''
-})
+// 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 [bpjsNumber, bpjsNumberAttrs] = defineField('bpjsNumber')
+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 patientMedicalRecordNumber = computed(() => {
-  return props.selectedPatientObject?.number || ''
-})
+const mode = props.isLoading !== undefined ? props.isLoading : false
+const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
 
-// Form submission handler
-function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
-  const formData: DivisionFormData = {
-    name: values.name || '',
-    code: values.code || '',
-    parentId: values.parentId || '',
-  }
-  emit('submit', formData, resetForm)
-}
-const doctorOpts = ref([
-  { label: 'Pilih', value: null },
-  { label: 'Dr. A', value: 1 },
-])
-const paymentOpts = ref([
-  { label: 'Umum', value: 'umum' },
-  { label: 'BPJS', value: 'bpjs' },
-])
-const sepOpts = ref([
-  { label: 'Rujukan Internal', value: 'ri' },
-  { label: 'SEP Rujukan', value: 'sr' },
-])
-
-// file refs untuk tombol "Pilih Berkas"
+// File refs
 const sepFileInput = ref<HTMLInputElement | null>(null)
 const sippFileInput = ref<HTMLInputElement | null>(null)
 
+const doctorOpts = ref([
+  { label: 'Pilih', value: '' },
+  { label: 'Dr. A', value: '1' },
+])
+
+const subSpecialistOpts = ref([
+  { label: 'Pilih', value: '' },
+  { label: 'Subspesialis A', value: '1' },
+])
+
+const isJKNPayment = computed(() => paymentType.value === 'jkn')
+
+// Sync props to form fields
+watch(props, (value) => {
+  const patient = value.patient || ({} as PatientEntity)
+  const objects = value.objects || ({} as any)
+
+  if (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 || ''
+    bpjsNumber.value = objects?.bpjsNumber || ''
+    sepType.value = objects?.sepType || ''
+    sepNumber.value = objects?.sepNumber || ''
+  }
+
+  if (Object.keys(patient).length > 0) {
+    patientName.value = patient?.person?.name || ''
+    nationalIdentity.value = patient?.person?.residentIdentityNumber || ''
+    medicalRecordNumber.value = patient?.number || ''
+  }
+})
+
+// File handling functions
 function pickSepFile() {
   sepFileInput.value?.click()
 }
+
 function pickSippFile() {
   sippFileInput.value?.click()
 }
 
 function onSepFileChange(e: Event) {
   const f = (e.target as HTMLInputElement).files?.[0]
-  // set ke form / emit / simpan di state sesuai form library-mu
   console.log('sep file', f)
 }
 
@@ -108,283 +117,370 @@ function onSippFileChange(e: Event) {
   console.log('sipp file', f)
 }
 
-function onAddSep(formContext: any) {
-  console.log('formContext', formContext)
+function onAddSep() {
   const formValues = {
-    patient_name: formContext?.patient_name || patientName.value,
-    national_identity: formContext?.national_identity || patientNationalIdentity.value,
-    medical_record_number: formContext?.medical_record_number || patientMedicalRecordNumber.value,
-    doctor_id: formContext?.doctor_id,
-    register_date: formContext?.register_date,
-    payment_type: formContext?.payment_type,
-    bpjs_number: formContext?.bpjs_number,
-    sep_type: formContext?.sep_type,
-    sep_number: formContext?.sep_number
+    patientName: patientName.value,
+    nationalIdentity: nationalIdentity.value,
+    medicalRecordNumber: medicalRecordNumber.value,
+    doctorId: doctorId.value,
+    registerDate: registerDate.value,
+    paymentType: paymentType.value,
+    bpjsNumber: bpjsNumber.value,
+    sepType: sepType.value,
+    sepNumber: sepNumber.value,
   }
-  emit('click', 'add-sep', formValues)
+  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)
+})
 </script>
 
 <template>
-  <Form
-    v-slot="{ handleSubmit, resetForm, values }"
-    as=""
-    keep-values
-    :validation-schema="formSchema"
-    :initial-values="initialValues"
-  >
-    <form id="entry-form" @submit="handleSubmit($event, (values) => onSubmitForm(values, { resetForm }))">
-      <div class="flex flex-col justify-between">
-        <div class="mb-2 2xl:mb-3 text-sm 2xl:text-base font-semibold">
-          Data Pasien
+  <div class="mx-auto w-full">
+    <form
+      @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 class="flex gap-6 mb-2 2xl:mb-2">
-          <span>
-            Sudah pernah terdaftar sebagai pasien?
-            <Button class="bg-primary" size="sm" @click.prevent="emit('click', 'search')">
-              <Icon name="i-lucide-search" class="mr-1" /> Cari Pasien
-            </Button>
-          </span>
-          <span>
-            Belum pernah terdaftar sebagai pasien?
-            <Button class="bg-primary" size="sm" @click.prevent="emit('click', 'add')">
-              <Icon name="i-lucide-plus" class="mr-1" /> Tambah Pasien Baru
-            </Button>
-          </span>
-        </div>
-        <Block :colCount="3">
+      </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">Spesialis / Subspesialis</Label>
+          <Field :errMessage="errors.subSpecialistId">
+            <Combobox
+              id="subSpecialistId"
+              v-model="subSpecialistId"
+              v-bind="subSpecialistIdAttrs"
+              :items="subSpecialistOpts"
+              :is-disabled="isLoading || isReadonly"
+              placeholder="Pilih Subspesialis"
+              search-placeholder="Cari Subspesialis"
+              empty-message="Subspesialis tidak ditemukan"
+            />
+          </Field>
+        </Cell>
+
+        <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>
+      </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 label-for="patient_name">Nama Pasien</Label>
-            <Field id="patient_name" :errors="errors">
-              <FormField v-slot="{ componentField }" name="patient_name">
-                <FormItem>
-                  <FormControl>
-                    <Input
-                      id="patient_name"
-                      v-model="patientName"
-                      disabled
-                      placeholder="Tambah data pasien terlebih dahulu"
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              </FormField>
+            <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>
 
-          <!-- NIK -->
-          <Cell :cosSpan="3">
-            <Label label-for="national_identity">NIK</Label>
-            <Field id="national_identity" :errors="errors">
-              <FormField v-slot="{ componentField }" name="national_identity">
-                <FormItem>
-                  <FormControl>
-                    <Input 
-                      id="national_identity" 
-                      v-model="patientNationalIdentity"
-                      disabled 
-                      placeholder="-" 
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              </FormField>
-            </Field>
-          </Cell>
           <Cell>
-            <Label label-for="medical_record_number">No. RM</Label>
-            <Field id="medical_record_number" :errors="errors">
-              <FormField v-slot="{ componentField }" name="medical_record_number">
-                <FormItem>
-                  <FormControl>
-                    <Input 
-                      id="medical_record_number" 
-                      v-model="patientMedicalRecordNumber"
-                      disabled 
-                      placeholder="-" 
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              </FormField>
+            <Label height="compact">
+              No. Kartu BPJS
+              <span class="text-red-500">*</span>
+            </Label>
+            <Field :errMessage="errors.bpjsNumber">
+              <Input
+                id="bpjsNumber"
+                v-model="bpjsNumber"
+                v-bind="bpjsNumberAttrs"
+                :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>
+
+          <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
+                  variant="outline"
+                  type="button"
+                  class="bg-primary"
+                  size="sm"
+                  @click="onAddSep"
+                >
+                  +
+                </Button>
+              </div>
             </Field>
           </Cell>
         </Block>
 
-        <Separator class="my-4 2xl:my-5" />
-
-        <div class="mb-2 2xl:mb-3 text-sm 2xl:text-base font-semibold">
-          Data Kunjungan
-        </div>
-        <Block :colCount="3">
-          <!-- Dokter (Combobox) -->
-          <Cell :cosSpan="3">
-            <Label label-for="doctor_id">Dokter</Label>
-            <Field id="doctor_id" :errors="errors">
-              <FormField v-slot="{ componentField }" name="doctor_id">
-                <FormItem>
-                  <FormControl>
-                    <Combobox id="doctor_id" v-bind="componentField" :items="doctorOpts as any" />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              </FormField>
+        <Block
+          labelSize="thin"
+          class="!pt-0"
+          :colCount="3"
+          :cellFlex="false"
+        >
+          <Cell>
+            <Label height="compact">Dokumen SEP</Label>
+            <Field>
+              <div class="flex items-center gap-2">
+                <input
+                  ref="sepFileInput"
+                  type="file"
+                  class="hidden"
+                  @change="onSepFileChange"
+                />
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  class="bg-primary"
+                  @click.prevent="pickSepFile"
+                >
+                  Pilih Berkas
+                </Button>
+                <Input
+                  readonly
+                  placeholder="Unggah dokumen SEP"
+                />
+              </div>
             </Field>
           </Cell>
 
-          <!-- Tanggal Daftar (DatePicker) -->
-          <Cell :cosSpan="3">
-            <Label label-for="register_date">Tanggal Daftar</Label>
-            <Field id="register_date" :errors="errors">
-              <FormField v-slot="{ componentField }" name="register_date">
-                <FormItem>
-                  <FormControl>
-                    <DatepickerSingle v-bind="componentField" placeholder="Pilih tanggal" />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              </FormField>
-            </Field>
-          </Cell>
-
-          <!-- Jenis Pembayaran (Combobox) -->
-          <Cell :cosSpan="3">
-            <Label label-for="payment_type">Jenis Pembayaran</Label>
-            <Field id="payment_type" :errors="errors">
-              <FormField v-slot="{ componentField }" name="payment_type">
-                <FormItem>
-                  <FormControl>
-                    <!-- <Combobox id="payment_type" v-bind="componentField" :items="paymentOpts" /> -->
-                    <Select id="payment_type" v-bind="componentField" :items="paymentOpts" />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              </FormField>
+          <Cell>
+            <Label height="compact">Dokumen SIPP</Label>
+            <Field>
+              <div class="flex items-center gap-2">
+                <input
+                  ref="sippFileInput"
+                  type="file"
+                  class="hidden"
+                  @change="onSippFileChange"
+                />
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  class="bg-primary"
+                  @click.prevent="pickSippFile"
+                >
+                  Pilih Berkas
+                </Button>
+                <Input
+                  readonly
+                  placeholder="Unggah dokumen SIPP"
+                />
+              </div>
             </Field>
           </Cell>
         </Block>
+      </template>
 
-        <Block :colCount="3">
-          <Cell :cosSpan="3">
-            <Label label-for="bpjs_number">Kelompok Peserta</Label>
-            <Field id="bpjs_number" :errors="errors">
-              <FormField v-slot="{ componentField }" name="bpjs_number">
-                <FormItem>
-                  <FormControl>
-                    <Input
-                      id="bpjs_number"
-                      v-bind="componentField"
-                      placeholder="Pilih jenis pembayaran terlebih dahulu"
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              </FormField>
-            </Field>
-          </Cell>
-
-          <!-- No. Kartu BPJS -->
-          <Cell :cosSpan="3">
-            <Label label-for="bpjs_number">No. Kartu BPJS</Label>
-            <Field id="bpjs_number" :errors="errors">
-              <FormField v-slot="{ componentField }" name="bpjs_number">
-                <FormItem>
-                  <FormControl>
-                    <Input
-                      id="bpjs_number"
-                      v-bind="componentField"
-                      placeholder="Pilih jenis pembayaran terlebih dahulu"
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              </FormField>
-            </Field>
-          </Cell>
-
-          <!-- Jenis SEP -->
-          <Cell :cosSpan="3">
-            <Label label-for="sep_type">Jenis SEP</Label>
-            <Field id="sep_type" :errors="errors">
-              <FormField v-slot="{ componentField }" name="sep_type">
-                <FormItem>
-                  <FormControl>
-                    <Select id="sep_type" v-bind="componentField" :items="sepOpts" />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              </FormField>
-            </Field>
-          </Cell>
-        </Block>
-
-        <Block :colCount="3">
-          <!-- No. SEP (input + tombol +) -->
-          <Cell :cosSpan="3">
-            <Label label-for="sep_number">No. SEP</Label>
-            <Field id="sep_number" :errors="errors">
-              <FormField v-slot="{ componentField }" name="sep_number">
-                <FormItem>
-                  <FormControl>
-                    <div class="flex gap-2">
-                      <Input
-                        id="sep_number"
-                        v-bind="componentField"
-                        placeholder="Tambah SEP terlebih dahulu"
-                        class="flex-1"
-                      />
-                      <Button class="bg-primary" size="sm" variant="outline" @click.prevent="() => onAddSep(values)">+</Button>
-                    </div>
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              </FormField>
-            </Field>
-          </Cell>
-
-          <!-- Dokumen SEP (file) -->
-          <Cell :cosSpan="3">
-            <Label label-for="sep_file">Dokumen SEP</Label>
-            <Field id="sep_file" :errors="errors">
-              <FormField v-slot="{ componentField }" name="sep_file">
-                <FormItem>
-                  <FormControl>
-                    <div class="flex items-center gap-2">
-                      <input ref="sepFileInput" type="file" class="hidden" @change="onSepFileChange" />
-                      <Button class="bg-primary" size="sm" variant="ghost" @click.prevent="pickSepFile"
-                        >Pilih Berkas</Button
-                      >
-                      <Input readonly v-bind="componentField" placeholder="Unggah dokumen SEP" />
-                    </div>
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              </FormField>
-            </Field>
-          </Cell>
-
-          <!-- Dokumen SIPP (file) -->
-          <Cell :cosSpan="3" labelSize="thin">
-            <Label label-for="sipp_file">Dokumen SIPP</Label>
-            <Field id="sipp_file" :errors="errors">
-              <FormField v-slot="{ componentField }" name="sipp_file">
-                <FormItem>
-                  <FormControl>
-                    <div class="flex items-center gap-2">
-                      <input ref="sippFileInput" type="file" class="hidden" @change="onSippFileChange" />
-                      <Button class="bg-primary" size="sm" variant="ghost" @click.prevent="pickSippFile"
-                        >Pilih Berkas</Button
-                      >
-                      <Input readonly v-bind="componentField" placeholder="Unggah dokumen SIPP" />
-                    </div>
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              </FormField>
-            </Field>
-          </Cell>
-        </Block>
+      <!-- Actions -->
+      <div class="mt-6 flex justify-end gap-2">
+        <Button
+          variant="outline"
+          type="button"
+          class="h-[40px] min-w-[120px] rounded-md border-orange-400 text-orange-400 hover:bg-green-50 hover:text-orange-400"
+          @click="emit('event', 'cancel')"
+        >
+          <Icon
+            name="i-lucide-x"
+            class="h-5 w-5"
+          />
+          Batal
+        </Button>
+        <Button
+          type="button"
+          class="h-[40px] min-w-[120px] text-white"
+          :disabled="isLoading"
+          @click="onSubmit"
+        >
+          <Icon
+            name="i-lucide-save"
+            class="h-5 w-5"
+          />
+          Simpan
+        </Button>
       </div>
     </form>
-  </Form>
+  </div>
 </template>

app/components/content/encounter/entry.vue

@@ -1,10 +1,13 @@
 <script setup lang="ts">
 // Components
+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 { PatientEntity } from '~/models/patient'
+
+// Constants
+import { paymentTypes, sepRefTypeCodes, participantGroups } from '~/lib/constants.vclaim'
 
 // Handlers
 import {
@@ -26,18 +29,9 @@ const openPatient = ref(false)
 const isLoading = reactive<DataTableLoader>({
   isTableLoading: false,
 })
-
-const division = {
-  msg: {
-    placeholder: 'Pilih Divisi',
-    search: 'Cari Divisi',
-    empty: 'Divisi tidak ditemukan',
-  },
-}
-
-const items = ref([{ value: '1', label: 'Division 1', code: 'DIV1' }])
-
-const schema = {}
+const paymentsList = ref<Array<{ value: string; label: string }>>([])
+const sepsList = ref<Array<{ value: string; label: string }>>([])
+const participantGroupsList = ref<Array<{ value: string; label: string }>>([])
 
 function handleSavePatient() {
   selectedPatientObject.value = null
@@ -47,7 +41,7 @@ function handleSavePatient() {
 }
 
 function toKebabCase(str: string): string {
-  return str.replace(/_/g, '-').toLowerCase()
+  return str.replace(/([A-Z])/g, '-$1').toLowerCase()
 }
 
 function toNavigateSep(values: any) {
@@ -60,32 +54,43 @@ function toNavigateSep(values: any) {
   navigateTo('/integration/bpjs/sep/add' + `?${queryParams.toString()}`)
 }
 
-function onSubmit(values: any, resetForm: () => void) {
-  console.log('submit', values)
-  resetForm()
-}
-
-function onCancel(resetForm: () => void) {
-  console.log('cancel')
-  resetForm()
-}
-
-function onClick(e: 'search' | 'add' | 'add-sep', formValues?: any) {
-  console.log('click', e)
-  if (e === 'search') {
+function handleEvent(menu: string, value?: any) {
+  if (menu === 'search') {
     getPatientsList({ 'page-size': 10, includes: 'person' }).then(() => {
       openPatient.value = true
     })
-  } else if (e === 'add') {
+  } else if (menu === 'add') {
     navigateTo('/client/patient/add')
-  } else if (e === 'add-sep') {
-    selectedPatientObject.value = {} as PatientEntity
-    console.log('formValues', formValues)
-    toNavigateSep({ resource: 'encounter', is_service: 'false', ...formValues })
+  } else if (menu === 'add-sep') {
+    console.log('formValues', value)
+    toNavigateSep({ resource: 'encounter', isService: 'false', ...value })
+  } else if (menu === 'save') {
+    console.log('Save encounter:', value)
+  } else if (menu === 'cancel') {
+    console.log('Cancel')
   }
 }
 
+async function handleInit() {
+  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
+}
+
 provide('table_data_loader', isLoading)
+
+onMounted(async () => {
+  await handleInit()
+})
 </script>
 
 <template>
@@ -99,15 +104,12 @@ provide('table_data_loader', isLoading)
   </div>
 
   <AppEncounterEntryForm
-    :division="division"
-    :items="items"
-    :schema="schema"
-    :selected-patient-object="selectedPatientObject"
-    @click="onClick"
-    @submit="onSubmit"
-    @cancel="onCancel"
+    :payments="paymentsList"
+    :seps="sepsList"
+    :participant-groups="participantGroupsList"
+    :patient="selectedPatientObject"
+    @event="handleEvent"
   />
-  <AppSepSmallEntry v-if="props.id" />
 
   <AppViewPatient
     v-model:open="openPatient"

app/lib/constants.vclaim.ts

@@ -85,3 +85,10 @@ export const sepRefTypeCodes: Record<string, string> = {
   internal: 'Rujukan Internal',
   external: 'Faskes Lain',
 }
+
+export const participantGroups: Record<string, string> = {
+  pbi: 'PBI (Penerima Bantuan Iuran)',
+  ppu: 'PPU (Pekerja Penerima Upah)',
+  pbu: 'PBU (Pekerja Bukan Penerima Upah)',
+  bp: 'BP (Bukan Pekerja)',
+}

app/schemas/integration-encounter.schema.ts

@@ -0,0 +1,133 @@
+import { z } from 'zod'
+
+const ERROR_MESSAGES = {
+  required: {
+    doctorId: 'Dokter wajib diisi',
+    registerDate: 'Tanggal Daftar wajib diisi',
+    paymentType: 'Jenis Pembayaran wajib diisi',
+    subSpecialistId: 'Subspesialis wajib diisi',
+    patientCategory: 'Kelompok Peserta wajib diisi',
+    bpjsNumber: 'No. Kartu BPJS wajib diisi',
+    sepType: 'Jenis SEP wajib diisi',
+    sepNumber: 'No. SEP wajib diisi',
+  },
+}
+
+const ACCEPTED_UPLOAD_TYPES = ['image/jpeg', 'image/png', 'application/pdf']
+
+const IntegrationEncounterSchema = z
+  .object({
+    // Patient data (readonly, populated from selected patient)
+    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)
+      .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),
+    
+    // BPJS related fields
+    patientCategory: z
+      .string()
+      .min(1, ERROR_MESSAGES.required.patientCategory)
+      .optional(),
+    bpjsNumber: z
+      .string()
+      .min(1, ERROR_MESSAGES.required.bpjsNumber)
+      .optional(),
+    sepType: z
+      .string()
+      .min(1, ERROR_MESSAGES.required.sepType)
+      .optional(),
+    sepNumber: z
+      .string()
+      .min(1, ERROR_MESSAGES.required.sepNumber)
+      .optional(),
+    
+    // File uploads
+    sepFile: z
+      .any()
+      .optional()
+      .refine((f) => !f || f instanceof File, { message: 'Harus berupa file yang valid' })
+      .refine((f) => !f || ACCEPTED_UPLOAD_TYPES.includes(f.type), {
+        message: 'Format file harus JPG, PNG, atau PDF',
+      })
+      .refine((f) => !f || f.size <= 1 * 1024 * 1024, { message: 'Maksimal 1MB' }),
+    sippFile: z
+      .any()
+      .optional()
+      .refine((f) => !f || f instanceof File, { message: 'Harus berupa file yang valid' })
+      .refine((f) => !f || ACCEPTED_UPLOAD_TYPES.includes(f.type), {
+        message: 'Format file harus JPG, PNG, atau PDF',
+      })
+      .refine((f) => !f || f.size <= 1 * 1024 * 1024, { message: 'Maksimal 1MB' }),
+  })
+  .refine(
+    (data) => {
+      // If payment type is jkn, then patient category is required
+      if (data.paymentType === 'jkn') {
+        return data.patientCategory && data.patientCategory.trim() !== ''
+      }
+      return true
+    },
+    {
+      message: ERROR_MESSAGES.required.patientCategory,
+      path: ['patientCategory'],
+    },
+  )
+  .refine(
+    (data) => {
+      // If payment type is jkn, then bpjs number is required
+      if (data.paymentType === 'jkn') {
+        return data.bpjsNumber && data.bpjsNumber.trim() !== ''
+      }
+      return true
+    },
+    {
+      message: ERROR_MESSAGES.required.bpjsNumber,
+      path: ['bpjsNumber'],
+    },
+  )
+  .refine(
+    (data) => {
+      // If payment type is jkn, then SEP type is required
+      if (data.paymentType === 'jkn') {
+        return data.sepType && data.sepType.trim() !== ''
+      }
+      return true
+    },
+    {
+      message: ERROR_MESSAGES.required.sepType,
+      path: ['sepType'],
+    },
+  )
+  .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() !== '') {
+        return data.sepNumber && data.sepNumber.trim() !== ''
+      }
+      return true
+    },
+    {
+      message: ERROR_MESSAGES.required.sepNumber,
+      path: ['sepNumber'],
+    },
+  )
+
+type IntegrationEncounterFormData = z.infer<typeof IntegrationEncounterSchema>
+
+export { IntegrationEncounterSchema }
+export type { IntegrationEncounterFormData }
+