feat(specialist): add installation-unit relationship to specialist form

- Implement installation-unit mapping and filtering logic
- Update entry form to handle installation selection and unit filtering
- Add installation and unit dropdowns with combobox components

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

@@ -1,26 +1,52 @@
 <script setup lang="ts">
 import type { FormErrors } from '~/types/error'
 import { toTypedSchema } from '@vee-validate/zod'
+import Combobox from '~/components/pub/custom-ui/form/combobox.vue'
 import FieldGroup from '~/components/pub/custom-ui/form/field-group.vue'
 import Field from '~/components/pub/custom-ui/form/field.vue'
 import Label from '~/components/pub/custom-ui/form/label.vue'
-import Select from '~/components/pub/custom-ui/form/select.vue'
 
 interface SpecialistFormData {
   name: string
   code: string
-  encounterClassCode: string
+  installationId: string
+  unitId: string
 }
 
 const props = defineProps<{
   schema: any
   initialValues?: Partial<SpecialistFormData>
   errors?: FormErrors
+  installation: {
+    msg: {
+      placeholder: string
+      search: string
+      empty: string
+    }
+    items: {
+      value: string
+      label: string
+      code: string
+    }[]
+  }
+  unit: {
+    msg: {
+      placeholder: string
+      search: string
+      empty: string
+    }
+    items: {
+      value: string
+      label: string
+      code: string
+    }[]
+  }
 }>()
 
 const emit = defineEmits<{
   'submit': [values: SpecialistFormData, resetForm: () => void]
   'cancel': [resetForm: () => void]
+  'installationChanged': [id: string]
 }>()
 
 const formSchema = toTypedSchema(props.schema)
@@ -30,7 +56,8 @@ function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
   const formData: SpecialistFormData = {
     name: values.name || '',
     code: values.code || '',
-    encounterClassCode: values.encounterClassCode || '',
+    installationId: values.installationId || '',
+    unitId: values.unitId || '',
   }
   emit('submit', formData, resetForm)
 }
@@ -39,11 +66,17 @@ function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
 function onCancelForm({ resetForm }: { resetForm: () => void }) {
   emit('cancel', resetForm)
 }
+
+// Watch for installation changes
+function onInstallationChanged(installationId: string, setFieldValue: any) {
+  setFieldValue('unitId', '', false)
+  emit('installationChanged', installationId || '')
+}
 </script>
 
 <template>
   <Form
-    v-slot="{ handleSubmit, resetForm }" as="" keep-values :validation-schema="formSchema"
+    v-slot="{ handleSubmit, resetForm, values, setFieldValue }" as="" keep-values :validation-schema="formSchema"
     :initial-values="initialValues"
     >
     <form id="entry-form" @submit="handleSubmit($event, (values) => onSubmitForm(values, { resetForm }))">
@@ -56,9 +89,12 @@ function onCancelForm({ resetForm }: { resetForm: () => void }) {
                 <FormItem>
                   <FormControl>
                     <Input
-                      id="name" type="text" placeholder="Masukkan nama instalasi" autocomplete="off"
+                      id="name"
+                      type="text"
+                      placeholder="Masukkan nama spesialisasi"
+                      autocomplete="off"
                       v-bind="componentField"
-                      />
+                    />
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -72,7 +108,57 @@ function onCancelForm({ resetForm }: { resetForm: () => void }) {
               <FormField v-slot="{ componentField }" name="code">
                 <FormItem>
                   <FormControl>
-                    <Input id="code" type="text" placeholder="Masukkan kode instalasi" autocomplete="off" v-bind="componentField" />
+                    <Input
+                      id="code"
+                      type="text"
+                      placeholder="Masukkan kode spesialisasi"
+                      autocomplete="off"
+                      v-bind="componentField"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </FieldGroup>
+
+          <FieldGroup>
+            <Label label-for="installationId">Instalasi</Label>
+            <Field id="installationId" :errors="errors">
+              <FormField v-slot="{ componentField }" name="installationId">
+                <FormItem>
+                  <FormControl>
+                    <Combobox
+                      id="installationId"
+                      v-bind="componentField"
+                      :items="installation.items"
+                      :placeholder="installation.msg.placeholder"
+                      :search-placeholder="installation.msg.search"
+                      :empty-message="installation.msg.empty"
+                      @update:model-value="(value) => onInstallationChanged(value, setFieldValue)"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </FieldGroup>
+
+          <FieldGroup>
+            <Label label-for="unitId">Unit</Label>
+            <Field id="unitId" :errors="errors">
+              <FormField v-slot="{ componentField }" name="unitId">
+                <FormItem>
+                  <FormControl>
+                    <Combobox
+                      id="unitId"
+                      :disabled="!values.installationId"
+                      v-bind="componentField"
+                      :items="unit.items"
+                      :placeholder="unit.msg.placeholder"
+                      :search-placeholder="unit.msg.search"
+                      :empty-message="unit.msg.empty"
+                    />
                   </FormControl>
                   <FormMessage />
                 </FormItem>