From 8762424e2e89b358ce12c819ead87475d1f342f5 Mon Sep 17 00:00:00 2001
From: Abizrh <abizarah857@gmail.com>
Date: Thu, 11 Sep 2025 00:59:54 +0700
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat=20(app):=20add=20person=20form?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/person-address/entry-form.vue         | 170 +++++++++
 .../app/person-contact/entry-form.vue         | 111 ++++++
 .../app/person-relative/entry-form.vue        | 234 ++++++++++++
 app/components/app/person/entry-form.vue      | 340 ++++++++++++++++++
 4 files changed, 855 insertions(+)
 create mode 100644 app/components/app/person-address/entry-form.vue
 create mode 100644 app/components/app/person-contact/entry-form.vue
 create mode 100644 app/components/app/person-relative/entry-form.vue
 create mode 100644 app/components/app/person/entry-form.vue

diff --git a/app/components/app/person-address/entry-form.vue b/app/components/app/person-address/entry-form.vue
new file mode 100644
index 00000000..3160ea82
--- /dev/null
+++ b/app/components/app/person-address/entry-form.vue
@@ -0,0 +1,170 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import { toTypedSchema } from '@vee-validate/zod'
+import Block from '~/components/pub/custom-ui/form/block.vue'
+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 { educationCodes, genderCodes, occupationCodes, religionCodes } from '~/lib/constants'
+import { mapToComboboxOptList } from '~/lib/utils'
+
+interface DivisionFormData {
+  name: string
+  code: string
+  parentId: string
+}
+
+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
+}>()
+
+const emit = defineEmits<{
+  submit: [values: DivisionFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const educationOpts = mapToComboboxOptList(educationCodes)
+const occupationOpts = mapToComboboxOptList(occupationCodes)
+const religionOpts = mapToComboboxOptList(religionCodes)
+const genderOpts = mapToComboboxOptList(genderCodes)
+
+const formSchema = toTypedSchema(props.schema)
+
+// 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)
+}
+</script>
+
+<template>
+  <Form
+    v-slot="{ handleSubmit, resetForm }"
+    as=""
+    keep-values
+    :validation-schema="formSchema"
+    :initial-values="initialValues"
+  >
+    <form id="entry-form" @submit="handleSubmit($event, (values) => onSubmitForm(values, { resetForm }))">
+      <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+        <div class="flex flex-col justify-between">
+          <Block>
+            <!-- LocationType -->
+            <FieldGroup>
+              <Label label-for="locationType">Jenis Alamat</Label>
+              <Field id="locationType" :errors="errors">
+                <FormField v-slot="{ componentField }" name="locationType">
+                  <FormItem>
+                    <FormControl>
+                      <Select id="locationType" v-bind="componentField" :items="genderOpts" />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+
+            <!-- Address -->
+            <FieldGroup>
+              <Label label-for="address">Alamat</Label>
+              <Field id="address" :errors="errors">
+                <FormField v-slot="{ componentField }" name="address">
+                  <FormItem>
+                    <FormControl>
+                      <Input
+                        id="address"
+                        type="text"
+                        placeholder="Masukkan alamat lengkap"
+                        autocomplete="off"
+                        v-bind="componentField"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+
+            <!-- Rt -->
+            <FieldGroup>
+              <Label label-for="rt">RT</Label>
+              <Field id="rt" :errors="errors">
+                <FormField v-slot="{ componentField }" name="rt">
+                  <FormItem>
+                    <FormControl>
+                      <Input
+                        id="rt"
+                        type="text"
+                        maxlength="2"
+                        placeholder="01"
+                        autocomplete="off"
+                        v-bind="componentField"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+
+            <!-- Rw -->
+            <FieldGroup>
+              <Label label-for="rw">RW</Label>
+              <Field id="rw" :errors="errors">
+                <FormField v-slot="{ componentField }" name="rw">
+                  <FormItem>
+                    <FormControl>
+                      <Input
+                        id="rw"
+                        type="text"
+                        maxlength="2"
+                        placeholder="01"
+                        autocomplete="off"
+                        v-bind="componentField"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+
+            <!-- Village_Code -->
+            <FieldGroup>
+              <Label label-for="villageCode">Desa/Kelurahan</Label>
+              <Field id="villageCode" :errors="errors">
+                <FormField v-slot="{ componentField }" name="villageCode">
+                  <FormItem>
+                    <FormControl>
+                      <Combobox id="villageCode" v-bind="componentField" :items="genderOpts" />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+          </Block>
+        </div>
+      </div>
+    </form>
+  </Form>
+</template>
diff --git a/app/components/app/person-contact/entry-form.vue b/app/components/app/person-contact/entry-form.vue
new file mode 100644
index 00000000..a5a4d58c
--- /dev/null
+++ b/app/components/app/person-contact/entry-form.vue
@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import { toTypedSchema } from '@vee-validate/zod'
+import Block from '~/components/pub/custom-ui/form/block.vue'
+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 { educationCodes, genderCodes, occupationCodes, religionCodes } from '~/lib/constants'
+import { mapToComboboxOptList } from '~/lib/utils'
+
+interface DivisionFormData {
+  name: string
+  code: string
+  parentId: string
+}
+
+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
+}>()
+
+const emit = defineEmits<{
+  submit: [values: DivisionFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const educationOpts = mapToComboboxOptList(educationCodes)
+const occupationOpts = mapToComboboxOptList(occupationCodes)
+const religionOpts = mapToComboboxOptList(religionCodes)
+const genderOpts = mapToComboboxOptList(genderCodes)
+
+const formSchema = toTypedSchema(props.schema)
+
+// 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)
+}
+</script>
+
+<template>
+  <Form
+    v-slot="{ handleSubmit, resetForm }"
+    as=""
+    keep-values
+    :validation-schema="formSchema"
+    :initial-values="initialValues"
+  >
+    <form id="entry-form" @submit="handleSubmit($event, (values) => onSubmitForm(values, { resetForm }))">
+      <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+        <div class="flex flex-col justify-between">
+          <Block>
+            <!-- LocationType -->
+            <FieldGroup>
+              <Label label-for="type">Tipe</Label>
+              <Field id="type" :errors="errors">
+                <FormField v-slot="{ componentField }" name="type">
+                  <FormItem>
+                    <FormControl>
+                      <Select id="type" v-bind="componentField" :items="genderOpts" />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+
+            <!-- Address -->
+            <FieldGroup>
+              <Label label-for="value">Value</Label>
+              <Field id="value" :errors="errors">
+                <FormField v-slot="{ componentField }" name="value">
+                  <FormItem>
+                    <FormControl>
+                      <Input
+                        id="value"
+                        type="text"
+                        placeholder="Masukkan alamat lengkap"
+                        autocomplete="off"
+                        v-bind="componentField"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+          </Block>
+        </div>
+      </div>
+    </form>
+  </Form>
+</template>
diff --git a/app/components/app/person-relative/entry-form.vue b/app/components/app/person-relative/entry-form.vue
new file mode 100644
index 00000000..fc961520
--- /dev/null
+++ b/app/components/app/person-relative/entry-form.vue
@@ -0,0 +1,234 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import { toTypedSchema } from '@vee-validate/zod'
+import Block from '~/components/pub/custom-ui/form/block.vue'
+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 { educationCodes, genderCodes, occupationCodes, religionCodes, relationshipCodes } from '~/lib/constants'
+import { mapToComboboxOptList } from '~/lib/utils'
+
+interface DivisionFormData {
+  name: string
+  code: string
+  parentId: string
+}
+
+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
+}>()
+
+const emit = defineEmits<{
+  submit: [values: DivisionFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const relationshipOpts = mapToComboboxOptList(relationshipCodes)
+const educationOpts = mapToComboboxOptList(educationCodes)
+const occupationOpts = mapToComboboxOptList(occupationCodes)
+const genderOpts = mapToComboboxOptList(genderCodes)
+
+const formSchema = toTypedSchema(props.schema)
+
+// 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)
+}
+</script>
+
+<template>
+  <Form
+    v-slot="{ handleSubmit, resetForm }"
+    as=""
+    keep-values
+    :validation-schema="formSchema"
+    :initial-values="initialValues"
+  >
+    <form id="entry-form" @submit="handleSubmit($event, (values) => onSubmitForm(values, { resetForm }))">
+      <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+        <div class="flex flex-col justify-between">
+          <Block>
+            <!-- Relationship_Code -->
+            <FieldGroup>
+              <Label label-for="relationshipCode">Hubungan</Label>
+              <Field id="relationshipCode" :errors="errors">
+                <FormField v-slot="{ componentField }" name="relationshipCode">
+                  <FormItem>
+                    <FormControl>
+                      <Select id="relationshipCode" v-bind="componentField" :items="relationshipOpts" />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+
+            <!-- Name -->
+            <FieldGroup>
+              <Label label-for="relativeName">Nama</Label>
+              <Field id="relativeName" :errors="errors">
+                <FormField v-slot="{ componentField }" name="relativeName">
+                  <FormItem>
+                    <FormControl>
+                      <Input
+                        id="relativeName"
+                        type="text"
+                        placeholder="Masukkan nama kerabat"
+                        autocomplete="off"
+                        v-bind="componentField"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+
+            <!-- Address -->
+            <FieldGroup>
+              <Label label-for="relativeAddress">Alamat</Label>
+              <Field id="relativeAddress" :errors="errors">
+                <FormField v-slot="{ componentField }" name="relativeAddress">
+                  <FormItem>
+                    <FormControl>
+                      <Input
+                        id="relativeAddress"
+                        type="text"
+                        placeholder="Alamat kerabat"
+                        autocomplete="off"
+                        v-bind="componentField"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+
+            <!-- Village_Code -->
+            <FieldGroup>
+              <Label label-for="relativeVillageCode">Desa/Kelurahan</Label>
+              <Field id="relativeVillageCode" :errors="errors">
+                <FormField v-slot="{ componentField }" name="relativeVillageCode">
+                  <FormItem>
+                    <FormControl>
+                      <Combobox id="relativeVillageCode" v-bind="componentField" :items="genderOpts" />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+
+            <!-- Gender_Code -->
+            <FieldGroup>
+              <Label label-for="relativeGender">Jenis Kelamin</Label>
+              <Field id="relativeGender" :errors="errors">
+                <FormField v-slot="{ componentField }" name="relativeGender">
+                  <FormItem>
+                    <FormControl>
+                      <Select id="relativeGender" v-bind="componentField" :items="genderOpts" />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+
+            <!-- PhoneNumber -->
+            <FieldGroup>
+              <Label label-for="phoneNumber">Nomor Telepon</Label>
+              <Field id="phoneNumber" :errors="errors">
+                <FormField v-slot="{ componentField }" name="phoneNumber">
+                  <FormItem>
+                    <FormControl>
+                      <Input
+                        id="phoneNumber"
+                        type="text"
+                        placeholder="0812xxxxxx"
+                        autocomplete="off"
+                        v-bind="componentField"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+
+            <!-- Education_Code -->
+            <FieldGroup>
+              <Label label-for="relativeEducation">Pendidikan</Label>
+              <Field id="relativeEducation" :errors="errors">
+                <FormField v-slot="{ componentField }" name="relativeEducation">
+                  <FormItem>
+                    <FormControl>
+                      <Select id="relativeEducation" v-bind="componentField" :items="educationOpts" />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+
+            <!-- Occupation_Code -->
+            <FieldGroup>
+              <Label label-for="relativeOccupationCode">Pekerjaan</Label>
+              <Field id="relativeOccupationCode" :errors="errors">
+                <FormField v-slot="{ componentField }" name="relativeOccupationCode">
+                  <FormItem>
+                    <FormControl>
+                      <Select id="relativeOccupationCode" v-bind="componentField" :items="occupationOpts" />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+
+            <!-- Occupation_Name -->
+            <FieldGroup>
+              <Label label-for="relativeOccupationName">Nama Pekerjaan</Label>
+              <Field id="relativeOccupationName" :errors="errors">
+                <FormField v-slot="{ componentField }" name="relativeOccupationName">
+                  <FormItem>
+                    <FormControl>
+                      <Input
+                        id="relativeOccupationName"
+                        type="text"
+                        placeholder="Contoh: Guru, Dokter, Petani"
+                        autocomplete="off"
+                        v-bind="componentField"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+          </Block>
+        </div>
+      </div>
+    </form>
+  </Form>
+</template>
diff --git a/app/components/app/person/entry-form.vue b/app/components/app/person/entry-form.vue
new file mode 100644
index 00000000..ee365b7b
--- /dev/null
+++ b/app/components/app/person/entry-form.vue
@@ -0,0 +1,340 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import { toTypedSchema } from '@vee-validate/zod'
+import Block from '~/components/pub/custom-ui/form/block.vue'
+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 { educationCodes, genderCodes, occupationCodes, religionCodes } from '~/lib/constants'
+import { mapToComboboxOptList } from '~/lib/utils'
+
+interface DivisionFormData {
+  name: string
+  code: string
+  parentId: string
+}
+
+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
+}>()
+
+const emit = defineEmits<{
+  submit: [values: DivisionFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const educationOpts = mapToComboboxOptList(educationCodes)
+const occupationOpts = mapToComboboxOptList(occupationCodes)
+const religionOpts = mapToComboboxOptList(religionCodes)
+const genderOpts = mapToComboboxOptList(genderCodes)
+
+const formSchema = toTypedSchema(props.schema)
+
+// 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)
+}
+</script>
+
+<template>
+  <Form
+    v-slot="{ handleSubmit, resetForm }"
+    as=""
+    keep-values
+    :validation-schema="formSchema"
+    :initial-values="initialValues"
+  >
+    <form id="entry-form" @submit="handleSubmit($event, (values) => onSubmitForm(values, { resetForm }))">
+      <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+        <div class="flex flex-col justify-between">
+          <Block>
+            <FieldGroup>
+              <Label label-for="residentIdentityNumber">KTP</Label>
+              <Field id="residentIdentityNumber" :errors="errors">
+                <FormField v-slot="{ componentField }" name="residentIdentityNumber">
+                  <FormItem>
+                    <FormControl>
+                      <Input
+                        id="residentIdentityNumber"
+                        type="text"
+                        maxlength="16"
+                        placeholder="Nomor KTP"
+                        autocomplete="off"
+                        v-bind="componentField"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+
+            <!-- FrontTitle -->
+            <FieldGroup :column="3">
+              <Label label-for="frontTitle">Gelar Depan</Label>
+              <Field id="frontTitle" :errors="errors">
+                <FormField v-slot="{ componentField }" name="frontTitle">
+                  <FormItem>
+                    <FormControl>
+                      <Input
+                        id="frontTitle"
+                        type="text"
+                        placeholder="Dr., Ir., dll"
+                        autocomplete="off"
+                        v-bind="componentField"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+
+            <FieldGroup :column="3">
+              <Label label-for="name" position="dynamic">Nama</Label>
+              <Field id="name" :errors="errors">
+                <FormField v-slot="{ componentField }" name="name">
+                  <FormItem>
+                    <FormControl>
+                      <Input
+                        id="name"
+                        type="text"
+                        placeholder="Nama lengkap"
+                        autocomplete="off"
+                        v-bind="componentField"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+
+            <!-- EndTitle -->
+            <FieldGroup :column="3">
+              <Label label-for="endTitle" position="dynamic">Gelar Belakang</Label>
+              <Field id="endTitle" :errors="errors">
+                <FormField v-slot="{ componentField }" name="endTitle">
+                  <FormItem>
+                    <FormControl>
+                      <Input
+                        id="endTitle"
+                        type="text"
+                        placeholder="S.Kom, M.Kes, dll"
+                        autocomplete="off"
+                        v-bind="componentField"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+
+            <!-- BirthDate -->
+            <FieldGroup :column="2">
+              <Label label-for="birthDate">Tanggal Lahir</Label>
+              <Field id="birthDate" :errors="errors">
+                <FormField v-slot="{ componentField }" name="birthDate">
+                  <FormItem>
+                    <FormControl>
+                      <Input id="birthDate" type="date" v-bind="componentField" />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+
+            <!-- BirthRegency_Code -->
+            <FieldGroup :column="2">
+              <Label label-for="birthRegencyCode">Tempat Lahir</Label>
+              <Field id="birthRegencyCode" :errors="errors">
+                <FormField v-slot="{ componentField }" name="birthRegencyCode">
+                  <FormItem>
+                    <FormControl>
+                      <Combobox id="parentId" v-bind="componentField" :items="educationOpts" />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+
+            <!-- Gender_Code -->
+            <FieldGroup>
+              <Label label-for="genderCode">Jenis Kelamin</Label>
+              <Field id="genderCode" :errors="errors">
+                <FormField v-slot="{ componentField }" name="genderCode">
+                  <FormItem>
+                    <FormControl>
+                      <Combobox id="genderCode" v-bind="componentField" :items="genderOpts" />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+
+            <!-- PassportNumber -->
+            <FieldGroup :column="2">
+              <Label label-for="passportNumber">Paspor</Label>
+              <Field id="passportNumber" :errors="errors">
+                <FormField v-slot="{ componentField }" name="passportNumber">
+                  <FormItem>
+                    <FormControl>
+                      <Input
+                        id="passportNumber"
+                        type="text"
+                        placeholder="Nomor Paspor"
+                        autocomplete="off"
+                        v-bind="componentField"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+
+            <!-- DrivingLicenseNumber -->
+            <FieldGroup :column="2">
+              <Label label-for="drivingLicenseNumber">SIM</Label>
+              <Field id="drivingLicenseNumber" :errors="errors">
+                <FormField v-slot="{ componentField }" name="drivingLicenseNumber">
+                  <FormItem>
+                    <FormControl>
+                      <Input
+                        id="drivingLicenseNumber"
+                        type="text"
+                        placeholder="Nomor SIM"
+                        autocomplete="off"
+                        v-bind="componentField"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+
+            <!-- Religion_Code -->
+            <FieldGroup :column="2">
+              <Label label-for="religionCode">Agama</Label>
+              <Field id="religionCode" :errors="errors">
+                <FormField v-slot="{ componentField }" name="religionCode">
+                  <FormItem>
+                    <FormControl>
+                      <Combobox id="religionCode" v-bind="componentField" :items="religionOpts" />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+
+            <FieldGroup :column="2">
+              <Label label-for="ethnicCode">Suku</Label>
+              <Field id="ethnicCode" :errors="errors">
+                <FormField v-slot="{ componentField }" name="ethnicCode">
+                  <FormItem>
+                    <FormControl>
+                      <Combobox id="ethnicCode" v-bind="componentField" :items="occupationOpts" />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+
+            <!-- Language_Code -->
+            <FieldGroup :column="2">
+              <Label label-for="languageCode">Bahasa</Label>
+              <Field id="languageCode" :errors="errors">
+                <FormField v-slot="{ componentField }" name="languageCode">
+                  <FormItem>
+                    <FormControl>
+                      <Combobox id="parentId" v-bind="componentField" :items="educationOpts" />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+
+            <!-- Education_Code -->
+            <FieldGroup :column="2">
+              <Label label-for="educationCode">Pendidikan</Label>
+              <Field id="educationCode" :errors="errors">
+                <FormField v-slot="{ componentField }" name="educationCode">
+                  <FormItem>
+                    <FormControl>
+                      <Combobox id="educationCode" v-bind="componentField" :items="educationOpts" />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+
+            <!-- Occupation_Code -->
+            <FieldGroup :column="2">
+              <Label label-for="occupationCode">Pekerjaan</Label>
+              <Field id="occupationCode" :errors="errors">
+                <FormField v-slot="{ componentField }" name="occupationCode">
+                  <FormItem>
+                    <FormControl>
+                      <Combobox id="occupationCode" v-bind="componentField" :items="occupationOpts" />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+
+            <!-- Occupation_Name -->
+            <FieldGroup :column="2">
+              <Label label-for="occupationName">Detail Pekerjaan</Label>
+              <Field id="occupationName" :errors="errors">
+                <FormField v-slot="{ componentField }" name="occupationName">
+                  <FormItem>
+                    <FormControl>
+                      <Input
+                        id="occupationName"
+                        type="text"
+                        placeholder="Contoh: Guru SMP, Petani"
+                        autocomplete="off"
+                        v-bind="componentField"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+          </Block>
+        </div>
+      </div>
+    </form>
+  </Form>
+</template>