From 00302ece84c4f632271b782be96d53f7281b8797 Mon Sep 17 00:00:00 2001
From: riefive <rie.five@gmail.com>
Date: Wed, 22 Oct 2025 14:27:43 +0700
Subject: [PATCH] feat(sep): add form traffic accident

---
 app/components/app/sep/entry-form.vue         | 174 +++++++++++++++++-
 app/components/content/sep/entry.vue          |  79 +++++---
 .../pub/my-ui/combobox/combobox.vue           |   4 -
 app/schemas/integration-bpjs.schema.ts        |  40 ++++
 app/services/vclaim-region-city.service.ts    |  13 ++
 .../vclaim-region-district.service.ts         |  13 ++
 .../vclaim-region-province.service.ts         |  13 ++
 7 files changed, 307 insertions(+), 29 deletions(-)

diff --git a/app/components/app/sep/entry-form.vue b/app/components/app/sep/entry-form.vue
index 2bc87911..e5ad833a 100644
--- a/app/components/app/sep/entry-form.vue
+++ b/app/components/app/sep/entry-form.vue
@@ -19,11 +19,12 @@ import type { PatientEntity } from '~/models/patient'
 // Helpers
 import { toTypedSchema } from '@vee-validate/zod'
 import { useForm } from 'vee-validate'
-import { se } from "date-fns/locale"
+import { is } from "date-fns/locale"
 
 const props = defineProps<{
   isLoading?: boolean
   isReadonly?: boolean
+  mode?: string
   doctors: any[]
   diagnoses: any[]
   facilities: any[]
@@ -34,6 +35,9 @@ const props = defineProps<{
   procedures: any[]
   assessments: any[]
   supportCodes: any[]
+  provinces: any[]
+  cities: any[]
+  districts: any[]
   patient?: PatientEntity | null | undefined
   values?: any
 }>()
@@ -43,6 +47,7 @@ const emit = defineEmits<{
   (e: 'fetch', value?: any): void
 }>()
 
+const mode = props.mode !== undefined ? props.mode : 'add'
 const isLoading = props.isLoading !== undefined ? props.isLoading : false
 const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
 
@@ -75,10 +80,25 @@ const [note, noteAttrs] = defineField('note')
 const [accident, accidentAttrs] = defineField('trafficAccident')
 const [purposeOfVisit, purposeOfVisitAttrs] = defineField('purposeOfVisit')
 const [serviceAssessment, serviceAssessmentAttrs] = defineField('serviceAssessment')
+const [lpNumber, lpNumberAttrs] = defineField('lpNumber')
+const [accidentDate, accidentDateAttrs] = defineField('accidentDate')
+const [accidentNote, accidentNoteAttrs] = defineField('accidentNote')
+const [accidentProvince, accidentProvinceAttrs] = defineField('accidentProvince')
+const [accidentCity, accidentCityAttrs] = defineField('accidentCity')
+const [accidentDistrict, accidentDistrictAttrs] = defineField('accidentDistrict')
+const [suplesi, suplesiAttrs] = defineField('suplesi')
+const [suplesiNumber, suplesiNumberAttrs] = defineField('suplesiNumber')
 const titleLetterNumber = computed(() => (admissionType.value === '3' ? 'Surat Kontrol' : 'Surat Rujukan'))
 const titleLetterDate = computed(() =>
   admissionType.value === '3' ? 'Tanggal Surat Kontrol' : 'Tanggal Surat Rujukan',
 )
+const isAccidentally = computed(() => accident.value === '1' || accident.value === '2')
+const isProvinceSelected = computed(() => accidentProvince.value !== '')
+const isCitySelected = computed(() => accidentCity.value !== '')
+
+if (mode === 'add') {
+  // sepDate.value = new Date().toISOString()
+}
 
 // Submit handler
 const onSubmit = handleSubmit((values) => {
@@ -121,7 +141,7 @@ watch(props, (value) => {
               id="sepDate"
               v-model="sepDate"
               v-bind="sepDateAttrs"
-              :disabled="isLoading || isReadonly"
+              :disabled="true"
               placeholder="Pilih tanggal sep"
             />
           </Field>
@@ -536,6 +556,156 @@ watch(props, (value) => {
             />
           </Field>
         </Cell>
+
+        <Cell v-if="isAccidentally">
+          <Label height="compact">
+            No LP
+            <span class="text-red-500">*</span>
+          </Label>
+          <Field :errMessage="errors.lpNumber">
+            <Input
+              id="lpNumber"
+              v-model="lpNumber"
+              v-bind="lpNumberAttrs"
+              :disabled="isLoading || isReadonly"
+            />
+          </Field>
+        </Cell>
+
+        <Cell v-if="isAccidentally">
+          <Label height="compact">
+            Tanggal Kejadian
+            <span class="text-red-500">*</span>
+          </Label>
+          <Field :errMessage="errors.accidentDate">
+            <DatepickerSingle
+              id="accidentDate"
+              v-model="accidentDate"
+              v-bind="accidentDateAttrs"
+              :disabled="true"
+              placeholder="Pilih tanggal kejadian"
+            />
+          </Field>
+        </Cell>
+
+        <Cell v-if="isAccidentally">
+          <Label height="compact">
+            Keterangan
+            <span class="text-red-500">*</span>
+          </Label>
+          <Field :errMessage="errors.accidentNote">
+            <Input
+              id="accidentNote"
+              v-model="accidentNote"
+              v-bind="accidentNoteAttrs"
+              :disabled="isLoading || isReadonly"
+            />
+          </Field>
+        </Cell>
+
+        <Cell v-if="isAccidentally">
+          <Label height="compact">
+            Provinsi
+            <span class="text-red-500">*</span>
+          </Label>
+          <Field :errMessage="errors.accidentProvince">
+            <Combobox
+              id="accidentProvince"
+              v-model="accidentProvince"
+              v-bind="accidentProvinceAttrs"
+              :items="provinces"
+              :is-disabled="isLoading || isReadonly"
+              placeholder="Pilih Provinsi"
+              search-placeholder="Cari Provinsi"
+              empty-message="Item tidak ditemukan"
+              @update:modelValue="emit('fetch', { menu: 'province', value: $event })"
+            />
+          </Field>
+        </Cell>
+
+        <Cell v-if="isAccidentally">
+          <Label height="compact">
+            Kota
+            <span class="text-red-500">*</span>
+          </Label>
+          <Field :errMessage="errors.accidentCity">
+            <Combobox
+              id="accidentCity"
+              v-model="accidentCity"
+              v-bind="accidentCityAttrs"
+              :items="cities"
+              :is-disabled="isLoading || isReadonly || !isProvinceSelected"
+              placeholder="Pilih Kota"
+              search-placeholder="Cari Kota"
+              empty-message="Item tidak ditemukan"
+              @update:modelValue="emit('fetch', { menu: 'city', value: $event })"
+            />
+          </Field>
+        </Cell>
+
+        <Cell v-if="isAccidentally">
+          <Label height="compact">
+            Kecamatan
+            <span class="text-red-500">*</span>
+          </Label>
+          <Field :errMessage="errors.accidentDistrict">
+            <Combobox
+              id="accidentDistrict"
+              v-model="accidentDistrict"
+              v-bind="accidentDistrictAttrs"
+              :items="districts"
+              :is-disabled="isLoading || isReadonly || !isProvinceSelected || !isCitySelected"
+              placeholder="Pilih Kecamatan"
+              search-placeholder="Cari Kecamatan"
+              empty-message="Item tidak ditemukan"
+              @update:modelValue="emit('fetch', { menu: 'district', value: $event })"
+            />
+          </Field>
+        </Cell>
+
+        <Cell v-if="isAccidentally">
+          <Label height="compact">
+            Suplesi
+            <span class="text-red-500">*</span>
+          </Label>
+          <Field :errMessage="errors.suplesi">
+            <RadioGroup
+              v-model="suplesi"
+              v-bind="suplesiAttrs"
+              class="flex items-center gap-2"
+            >
+              <div class="flex items-center space-x-2">
+                <RadioGroupItem
+                  value="yes"
+                  id="suplesi-yes"
+                />
+                <Label for="suplesi-yes">Ya</Label>
+              </div>
+              <div class="flex items-center space-x-2">
+                <RadioGroupItem
+                  value="no"
+                  id="suplesi-no"
+                />
+                <Label for="suplesi-no">Tidak</Label>
+              </div>
+            </RadioGroup>
+          </Field>
+        </Cell>
+
+        <Cell v-if="isAccidentally && suplesi === 'yes'">
+          <Label height="compact">
+            No. SEP Suplesi
+            <span class="text-red-500">*</span>
+          </Label>
+          <Field :errMessage="errors.suplesiNumber">
+            <Input
+              id="lpNumber"
+              v-model="suplesiNumber"
+              v-bind="suplesiNumberAttrs"
+              :disabled="isLoading || isReadonly"
+            />
+          </Field>
+        </Cell>
       </Block>
 
       <Block
diff --git a/app/components/content/sep/entry.vue b/app/components/content/sep/entry.vue
index 278324bd..e153aa5f 100644
--- a/app/components/content/sep/entry.vue
+++ b/app/components/content/sep/entry.vue
@@ -12,17 +12,24 @@ import type { SepHistoryData } from '~/components/app/sep/list-cfg.history'
 import type { SepVisitData } from '~/components/app/sep/list-cfg.visit'
 
 // Constants
-import { serviceTypes, serviceAssessments, registerMethods, trafficAccidents, supportCodes, procedureTypes, purposeOfVisits } from '~/lib/constants.vclaim'
+import {
+  serviceTypes,
+  serviceAssessments,
+  registerMethods,
+  trafficAccidents,
+  supportCodes,
+  procedureTypes,
+  purposeOfVisits,
+} from '~/lib/constants.vclaim'
 
 // Services
 import { getPatientDetail, getPatients } from '~/services/patient.service'
-import { getList as getProvinceList } from '~/services/vclaim-region-province.service'
-import { getList as getCityList } from '~/services/vclaim-region-city.service'
-import { getList as getDistrictList } from '~/services/vclaim-region-district.service'
+import { getValueLabelList as getProvinceList } from '~/services/vclaim-region-province.service'
+import { getValueLabelList as getCityList } from '~/services/vclaim-region-city.service'
+import { getValueLabelList as getDistrictList } from '~/services/vclaim-region-district.service'
 import { getValueLabelList as getDoctorLabelList } from '~/services/vclaim-doctor.service'
 import { getValueLabelList as getHealthFacilityLabelList } from '~/services/vclaim-health-facility.service'
 import { getValueLabelList as getDiagnoseLabelList } from '~/services/vclaim-diagnose.service'
-import { getList as getDiagnoseReferralList } from '~/services/vclaim-diagnose-referral.service'
 import { getList as geMonitoringVisitList } from '~/services/vclaim-monitoring-visit.service'
 import { getList as getMonitoringHistoryList } from '~/services/vclaim-monitoring-history.service'
 import { create as createSep, createPayload as createSepPayload } from '~/services/vclaim-sep.service'
@@ -49,6 +56,9 @@ const accidentsList = ref<Array<{ value: string; label: string }>>([])
 const purposeOfVisitsList = ref<Array<{ value: string; label: string }>>([])
 const proceduresList = ref<Array<{ value: string; label: string }>>([])
 const assessmentsList = ref<Array<{ value: string; label: string }>>([])
+const provincesList = ref<Array<{ value: string; label: string }>>([])
+const citiesList = ref<Array<{ value: string; label: string }>>([])
+const districtsList = ref<Array<{ value: string; label: string }>>([])
 const isPatientsLoading = ref(false)
 const paginationMeta = ref<PaginationMeta>({
   recordCount: 0,
@@ -253,25 +263,48 @@ function handleEvent(menu: string, value: any) {
 async function handleFetch(params: any) {
   const menu = params.menu || ''
   const value = params.value || ''
+  if (menu === 'service-type') {
+    selectedServiceType.value = value
+  }
   if (menu === 'diagnosis') {
     diagnoses.value = await getDiagnoseLabelList({ diagnosa: value })
   }
-  if (menu === 'doctor') {
-    console.log('value:', value)
-  }
   if (menu === 'clinic') {
-    facilities.value = await getHealthFacilityLabelList({ faskes: value, 'jenis-faskes': 1 })
+    facilities.value = await getHealthFacilityLabelList({
+      faskes: value,
+      'jenis-faskes': selectedServiceType.value || 1,
+    })
+    facilities.value = await getHealthFacilityLabelList({
+      faskes: 'Puskesmas',
+      'jenis-faskes': selectedLetter.value || 1,
+    })
+    doctors.value = await getDoctorLabelList({
+      'jenis-pelayanan': selectedServiceType.value || 1,
+      'tgl-pelayanan': new Date().toISOString().substring(0, 10),
+      'kode-spesialis': 0,
+    })
+  }
+  if (menu === 'province') {
+    citiesList.value = await getCityList({ province: value })
+    districtsList.value = []
+  }
+  if (menu === 'city') {
+    districtsList.value = await getDistrictList({ city: value })
   }
 }
 
 async function handleInit() {
   diagnoses.value = await getDiagnoseLabelList({ diagnosa: 'paru' })
-  facilities.value = await getHealthFacilityLabelList({ faskes: 'Puskesmas', 'jenis-faskes': 1 })
+  facilities.value = await getHealthFacilityLabelList({
+    faskes: 'Puskesmas',
+    'jenis-faskes': selectedLetter.value || 1,
+  })
   doctors.value = await getDoctorLabelList({
-    'jenis-pelayanan': 1,
+    'jenis-pelayanan': selectedServiceType.value || 1,
     'tgl-pelayanan': new Date().toISOString().substring(0, 10),
     'kode-spesialis': 0,
   })
+  provincesList.value = await getProvinceList()
   serviceTypesList.value = Object.keys(serviceTypes).map((item) => ({
     value: item.toString(),
     label: serviceTypes[item],
@@ -306,18 +339,15 @@ async function handleInit() {
 
 onMounted(async () => {
   await handleInit()
-  getProvinceList().then((value) => {
-    console.log('value:', value)
-  })
-  getCityList({ province: '14' }).then((value) => {
-    console.log('value:', value)
-  })
-  getDistrictList({ city: '0187' }).then((value) => {
-    console.log('value:', value)
-  })
-  getDiagnoseReferralList().then((value) => {
-    console.log('value:', value)
-  })
+  // getProvinceList().then((value) => {
+  //   console.log('value:', value)
+  // })
+  // getCityList({ province: '14' }).then((value) => {
+  //   console.log('value:', value)
+  // })
+  // getDistrictList({ city: '0187' }).then((value) => {
+  //   console.log('value:', value)
+  // })
   if (route.query) {
     selectedObjects.value = { ...route.query }
   }
@@ -345,6 +375,9 @@ onMounted(async () => {
     :procedures="proceduresList"
     :assessments="assessmentsList"
     :support-codes="supportCodesList"
+    :provinces="provincesList"
+    :cities="citiesList"
+    :districts="districtsList"
     :patient="selectedPatientObject"
     @fetch="handleFetch"
     @event="handleEvent"
diff --git a/app/components/pub/my-ui/combobox/combobox.vue b/app/components/pub/my-ui/combobox/combobox.vue
index 70f70d9e..713edd57 100644
--- a/app/components/pub/my-ui/combobox/combobox.vue
+++ b/app/components/pub/my-ui/combobox/combobox.vue
@@ -31,10 +31,6 @@ const displayText = computed(() => {
   return props.placeholder || 'Pilih item'
 })
 
-watch(props, () => {
-  console.log(props.modelValue)
-})
-
 watch(debouncedSearchText, (newValue) => {
   emit('update:searchText', newValue)
 })
diff --git a/app/schemas/integration-bpjs.schema.ts b/app/schemas/integration-bpjs.schema.ts
index 857b570f..8e8a2495 100644
--- a/app/schemas/integration-bpjs.schema.ts
+++ b/app/schemas/integration-bpjs.schema.ts
@@ -27,6 +27,14 @@ const ERROR_MESSAGES = {
     trafficAccident: 'Kejadian lalu lintas wajib diisi',
     purposeOfVisit: 'Tujuan Kunjungan wajib diisi',
     serviceAssessment: 'Assemen Pelayanan wajib diisi',
+    lpNumber: 'Nomor LP wajib diisi',
+    accidentDate: 'Tanggal Kejadian lalu lintas wajib diisi',
+    accidentNote: 'Keterangan Kejadian lalu lintas wajib diisi',
+    accidentProvince: 'Provinsi Kejadian lalu lintas wajib diisi',
+    accidentCity: 'Kota Kejadian lalu lintas wajib diisi',
+    accidentDistrict: 'Kecamatan Kejadian lalu lintas wajib diisi',
+    suplesi: 'Suplesi wajib diisi',
+    suplesiNumber: 'Nomor Suplesi wajib diisi',
   },
 }
 
@@ -97,6 +105,38 @@ const IntegrationBpjsSchema = z.object({
     .string({ required_error: ERROR_MESSAGES.required.serviceAssessment })
     .min(1, ERROR_MESSAGES.required.serviceAssessment)
     .optional(),
+  lpNumber: z
+    .string({ required_error: ERROR_MESSAGES.required.lpNumber })
+    .min(1, ERROR_MESSAGES.required.lpNumber)
+    .optional(),
+  accidentDate: z
+    .string({ required_error: ERROR_MESSAGES.required.accidentDate })
+    .min(1, ERROR_MESSAGES.required.accidentDate)
+    .optional(),
+  accidentNote: z
+    .string({ required_error: ERROR_MESSAGES.required.accidentNote })
+    .min(1, ERROR_MESSAGES.required.accidentNote)
+    .optional(),
+  accidentProvince: z
+    .string({ required_error: ERROR_MESSAGES.required.accidentProvince })
+    .min(1, ERROR_MESSAGES.required.accidentProvince)
+    .optional(),
+  accidentCity: z
+    .string({ required_error: ERROR_MESSAGES.required.accidentCity })
+    .min(1, ERROR_MESSAGES.required.accidentCity)
+    .optional(),
+  accidentDistrict: z
+    .string({ required_error: ERROR_MESSAGES.required.accidentDistrict })
+    .min(1, ERROR_MESSAGES.required.accidentDistrict)
+    .optional(),
+  suplesi: z
+    .string({ required_error: ERROR_MESSAGES.required.suplesi })
+    .min(1, ERROR_MESSAGES.required.suplesi)
+    .optional(),
+  suplesiNumber: z
+    .string({ required_error: ERROR_MESSAGES.required.suplesiNumber })
+    .min(1, ERROR_MESSAGES.required.suplesiNumber)
+    .optional(),
 })
 
 type IntegrationBpjsFormData = z.infer<typeof IntegrationBpjsSchema>
diff --git a/app/services/vclaim-region-city.service.ts b/app/services/vclaim-region-city.service.ts
index 522bc1cf..a77880f4 100644
--- a/app/services/vclaim-region-city.service.ts
+++ b/app/services/vclaim-region-city.service.ts
@@ -12,3 +12,16 @@ export function getList(params: any = null) {
   }
   return base.getList(url, params, name)
 }
+
+export async function getValueLabelList(params: any = null): Promise<{ value: string; label: string }[]> {
+  let data: { value: string; label: string }[] = []
+  const result = await getList(params)
+  if (result.success) {
+    const resultData = result.body?.response?.list || []
+    data = resultData.map((item: any) => ({
+      value: item.kode ? String(item.kode) : '',
+      label: item.nama,
+    }))
+  }
+  return data
+}
diff --git a/app/services/vclaim-region-district.service.ts b/app/services/vclaim-region-district.service.ts
index 99996b0e..15a27526 100644
--- a/app/services/vclaim-region-district.service.ts
+++ b/app/services/vclaim-region-district.service.ts
@@ -12,3 +12,16 @@ export function getList(params: any = null) {
   }
   return base.getList(url, params, name)
 }
+
+export async function getValueLabelList(params: any = null): Promise<{ value: string; label: string }[]> {
+  let data: { value: string; label: string }[] = []
+  const result = await getList(params)
+  if (result.success) {
+    const resultData = result.body?.response?.list || []
+    data = resultData.map((item: any) => ({
+      value: item.kode ? String(item.kode) : '',
+      label: item.nama,
+    }))
+  }
+  return data
+}
diff --git a/app/services/vclaim-region-province.service.ts b/app/services/vclaim-region-province.service.ts
index 33355f0e..3284cfd5 100644
--- a/app/services/vclaim-region-province.service.ts
+++ b/app/services/vclaim-region-province.service.ts
@@ -7,3 +7,16 @@ const name = 'provinces'
 export function getList(params: any = null) {
   return base.getList(path, params, name)
 }
+
+export async function getValueLabelList(params: any = null): Promise<{ value: string; label: string }[]> {
+  let data: { value: string; label: string }[] = []
+  const result = await getList(params)
+  if (result.success) {
+    const resultData = result.body?.response?.list || []
+    data = resultData.map((item: any) => ({
+      value: item.kode ? String(item.kode) : '',
+      label: item.nama,
+    }))
+  }
+  return data
+}