fix: add tree select subspecialist and filter doctor

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

@@ -9,10 +9,12 @@ 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 DatepickerSingle from '~/components/pub/my-ui/datepicker/datepicker-single.vue'
+import TreeSelect from '~/components/pub/my-ui/select-tree/tree-select.vue'
 
 // Types
 import { IntegrationEncounterSchema, type IntegrationEncounterFormData } from '~/schemas/integration-encounter.schema'
 import type { PatientEntity } from '~/models/patient'
+import type { TreeItem } from '~/components/pub/my-ui/select-tree/type'
 
 // Helpers
 import { toTypedSchema } from '@vee-validate/zod'
@@ -23,6 +25,7 @@ const props = defineProps<{
   isReadonly?: boolean
   doctor?: any[]
   subSpecialist?: any[]
+  specialists?: TreeItem[]
   payments: any[]
   participantGroups?: any[]
   seps: any[]
@@ -60,18 +63,31 @@ const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
 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 doctorOpts = computed(() => {
+  // Add default option
+  const defaultOption = [{ label: 'Pilih', value: '' }]
+  // Add doctors from props
+  const doctors = props.doctor || []
+  return [...defaultOption, ...doctors]
+})
 
 const isJKNPayment = computed(() => paymentType.value === 'jkn')
 
+async function onFetchChildren(parentId: string): Promise<void> {
+  console.log('onFetchChildren', parentId)
+}
+
+// Watch specialist/subspecialist selection to fetch doctors
+watch(subSpecialistId, async (newValue) => {
+  if (newValue) {
+    console.log('SubSpecialist changed:', newValue)
+    // Reset doctor selection
+    doctorId.value = ''
+    // Emit fetch event to parent
+    emit('fetch', { subSpecialistId: newValue })
+  }
+})
+
 // Sync props to form fields
 watch(props, (value) => {
   const patient = value.patient || ({} as PatientEntity)
@@ -233,17 +249,17 @@ const onSubmit = handleSubmit((values) => {
         :cellFlex="false"
       >
         <Cell>
-          <Label height="compact">Spesialis / Subspesialis</Label>
+          <Label height="compact">
+            Spesialis / Subspesialis
+            <span class="text-red-500">*</span>
+          </Label>
           <Field :errMessage="errors.subSpecialistId">
-            <Combobox
+            <TreeSelect
               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"
+              :data="specialists || []"
+              :on-fetch-children="onFetchChildren"
             />
           </Field>
         </Cell>
@@ -364,7 +380,14 @@ const onSubmit = handleSubmit((values) => {
               />
             </Field>
           </Cell>
+        </Block>
 
+        <Block
+          labelSize="thin"
+          class="!pt-0"
+          :colCount="3"
+          :cellFlex="false"
+        >
           <Cell>
             <Label height="compact">
               No. SEP
@@ -392,14 +415,7 @@ const onSubmit = handleSubmit((values) => {
               </div>
             </Field>
           </Cell>
-        </Block>
 
-        <Block
-          labelSize="thin"
-          class="!pt-0"
-          :colCount="3"
-          :cellFlex="false"
-        >
           <Cell>
             <Label height="compact">Dokumen SEP</Label>
             <Field>