From 64d432f75a3a94e26ce2f6995a98e43bf884c021 Mon Sep 17 00:00:00 2001
From: Abizrh <abizarah857@gmail.com>
Date: Thu, 11 Sep 2025 00:56:36 +0700
Subject: [PATCH 1/4] =?UTF-8?q?=E2=9A=A1=20enhance=20(lib):=20adjust=20lib?=
 =?UTF-8?q?s?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/lib/constants.ts | 14 ++++++++++++++
 app/lib/utils.ts     |  6 ++++--
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/app/lib/constants.ts b/app/lib/constants.ts
index d904a87e..866fc520 100644
--- a/app/lib/constants.ts
+++ b/app/lib/constants.ts
@@ -218,3 +218,17 @@ export const instructionCodes: Record<string, string> = {
   medication: 'Obat',
   material: 'BMHP',
 }
+
+export const relationshipCodes: Record<string, string> = {
+  mother: 'Ibu',
+  father: 'Ayah',
+  uncle: 'Paman',
+  aunt: 'Bibi',
+  sibling: 'Saudara',
+  'gd-mother': 'Nenek',
+  'gd-father': 'Kakek',
+  child: 'Anak',
+  nephew: 'Keponakan',
+  'gd-child': 'Cucu',
+  other: 'Lainnya',
+}
diff --git a/app/lib/utils.ts b/app/lib/utils.ts
index 59afb775..c6098e1b 100644
--- a/app/lib/utils.ts
+++ b/app/lib/utils.ts
@@ -3,15 +3,16 @@ import { clsx } from 'clsx'
 import { twMerge } from 'tailwind-merge'
 
 export interface SelectOptionType<T> {
+  value: string
   label: string
-  value: T
+  code?: string
 }
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
 
-export function mapToFlowbiteOptList(items: Record<string, string>): SelectOptionType<string>[] {
+export function mapToComboboxOptList(items: Record<string, string>): SelectOptionType<string>[] {
   if (!items) {
     return []
   }
@@ -20,6 +21,7 @@ export function mapToFlowbiteOptList(items: Record<string, string>): SelectOptio
     result.push({
       label: items[item] as string,
       value: item,
+      code: item,
     })
   })
   return result

From 053a540638e93249bb8ae071e1d094eaab1f57f9 Mon Sep 17 00:00:00 2001
From: Abizrh <abizarah857@gmail.com>
Date: Thu, 11 Sep 2025 00:57:12 +0700
Subject: [PATCH 2/4] =?UTF-8?q?=E2=9A=A1=20enhance=20(pub):=20adjust=20for?=
 =?UTF-8?q?m=20label?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/pub/custom-ui/form/label.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/pub/custom-ui/form/label.vue b/app/components/pub/custom-ui/form/label.vue
index f04081ee..42274ee6 100644
--- a/app/components/pub/custom-ui/form/label.vue
+++ b/app/components/pub/custom-ui/form/label.vue
@@ -48,7 +48,7 @@ const labelClass = computed(() => [props.stacked ? 'block mb-1 text-sm font-medi
 
 <template>
   <div :class="wrapperClass">
-    <label :class="labelClass" :for="labelFor">
+    <label class="block text-base font-medium text-gray-600" :class="labelClass" :for="labelFor">
       <slot />
     </label>
   </div>

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 3/4] =?UTF-8?q?=E2=9C=A8=20feat=20(app):=20add=20person=20?=
 =?UTF-8?q?form?=
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>

From a68f6b9eb0a791018a7898accbcf7c41bc4e47ad Mon Sep 17 00:00:00 2001
From: Abizrh <abizarah857@gmail.com>
Date: Thu, 11 Sep 2025 01:00:16 +0700
Subject: [PATCH 4/4] =?UTF-8?q?=F0=9F=90=9B=20fix=20(employee):=20fix=20us?=
 =?UTF-8?q?er=20entry=20component=20on=20employee=20add=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/app/doctor/entry-form.vue         | 12 ++++++------
 app/components/app/employee/entry-form.vue       | 16 ++++++++--------
 app/components/app/equipment/entry-form.vue      |  4 ----
 app/components/app/laborant/entry-form.vue       |  4 ++--
 app/components/app/nurse/entry-form.vue          |  4 ++--
 app/components/app/nutritionist/entry-form.vue   |  4 ++--
 app/components/app/pharmacist/entry-form.vue     |  4 ++--
 app/components/app/user/entry-form.vue           |  8 ++++----
 .../{flow => content}/employee/entry.vue         |  6 ++++++
 .../{flow => content}/employee/list.vue          |  0
 app/pages/(features)/human-src/employee/add.vue  |  2 +-
 11 files changed, 33 insertions(+), 31 deletions(-)
 rename app/components/{flow => content}/employee/entry.vue (79%)
 rename app/components/{flow => content}/employee/list.vue (100%)

diff --git a/app/components/app/doctor/entry-form.vue b/app/components/app/doctor/entry-form.vue
index b5ac8613..bfa9802e 100644
--- a/app/components/app/doctor/entry-form.vue
+++ b/app/components/app/doctor/entry-form.vue
@@ -23,20 +23,20 @@ const items = [
     <div class="mb-2 border-b border-b-slate-300 text-lg xl:text-xl">
       <div class="flex flex-col justify-between">
         <Block>
-          <FieldGroup :column="2" layout="stacked">
-            <Label stacked>No. IHS</Label>
+          <FieldGroup :column="2">
+            <Label>No. IHS</Label>
             <Field>
               <Input />
             </Field>
           </FieldGroup>
-          <FieldGroup :column="2" layout="stacked">
-            <Label stacked>No. SIP</Label>
+          <FieldGroup :column="2">
+            <Label>No. SIP</Label>
             <Field>
               <Input />
             </Field>
           </FieldGroup>
-          <FieldGroup :column="2" layout="stacked">
-            <Label stacked>Unit</Label>
+          <FieldGroup :column="2">
+            <Label>Unit</Label>
             <Field>
               <Select v-model="data.type" :items="items" placeholder="Pilih jenis" />
             </Field>
diff --git a/app/components/app/employee/entry-form.vue b/app/components/app/employee/entry-form.vue
index 73c45f98..7bb9dfd7 100644
--- a/app/components/app/employee/entry-form.vue
+++ b/app/components/app/employee/entry-form.vue
@@ -18,26 +18,26 @@ const data = computed({
     <div class="mb-5 border-b border-b-slate-300 text-lg xl:text-xl">
       <div class="flex flex-col justify-between">
         <Block>
-          <FieldGroup :column="2" layout="stacked">
-            <Label stacked>Nomor Induk Pegawai</Label>
+          <FieldGroup :column="2">
+            <Label>Nomor Induk Pegawai</Label>
             <Field>
               <Input v-model="data.number" />
             </Field>
           </FieldGroup>
-          <FieldGroup :column="2" layout="stacked">
-            <Label stacked>Status</Label>
+          <FieldGroup :column="2">
+            <Label>Status</Label>
             <Field>
               <Select v-model="data.type" :items="items" placeholder="Pilih jenis" />
             </Field>
           </FieldGroup>
-          <FieldGroup :column="2" layout="stacked">
-            <Label stacked>Position</Label>
+          <FieldGroup :column="2">
+            <Label>Position</Label>
             <Field>
               <Select v-model="data.type" :items="items" placeholder="Pilih jenis" />
             </Field>
           </FieldGroup>
-          <FieldGroup :column="2" layout="stacked">
-            <Label stacked>Divisi</Label>
+          <FieldGroup :column="2">
+            <Label>Divisi</Label>
             <Field>
               <Select v-model="data.type" :items="items" placeholder="Pilih jenis" />
             </Field>
diff --git a/app/components/app/equipment/entry-form.vue b/app/components/app/equipment/entry-form.vue
index f54a8389..759f011d 100644
--- a/app/components/app/equipment/entry-form.vue
+++ b/app/components/app/equipment/entry-form.vue
@@ -2,14 +2,10 @@
 // types
 import type z from 'zod'
 import type { MaterialFormData } from '~/schemas/material'
-<<<<<<< HEAD:app/components/app/equipment/entry-form.vue
-=======
 // helpers
 import { toTypedSchema } from '@vee-validate/zod'
 import { useForm } from 'vee-validate'
 // components
-import Label from '~/components/pub/custom-ui/form/label.vue'
->>>>>>> 266d5f740b15942ca7b8845c00573640fdc9a3b2:app/components/app/material/entry-form.vue
 
 interface Props {
   schema: z.ZodSchema<any>
diff --git a/app/components/app/laborant/entry-form.vue b/app/components/app/laborant/entry-form.vue
index 2a190160..4bf7bc68 100644
--- a/app/components/app/laborant/entry-form.vue
+++ b/app/components/app/laborant/entry-form.vue
@@ -18,8 +18,8 @@ const data = computed({
     <div class="mb-2 border-b border-b-slate-300 text-lg xl:text-xl">
       <div class="flex flex-col justify-between">
         <Block>
-          <FieldGroup layout="stacked">
-            <Label stacked>No. IHS</Label>
+          <FieldGroup>
+            <Label>No. IHS</Label>
             <Field>
               <Input />
             </Field>
diff --git a/app/components/app/nurse/entry-form.vue b/app/components/app/nurse/entry-form.vue
index 2a190160..4bf7bc68 100644
--- a/app/components/app/nurse/entry-form.vue
+++ b/app/components/app/nurse/entry-form.vue
@@ -18,8 +18,8 @@ const data = computed({
     <div class="mb-2 border-b border-b-slate-300 text-lg xl:text-xl">
       <div class="flex flex-col justify-between">
         <Block>
-          <FieldGroup layout="stacked">
-            <Label stacked>No. IHS</Label>
+          <FieldGroup>
+            <Label>No. IHS</Label>
             <Field>
               <Input />
             </Field>
diff --git a/app/components/app/nutritionist/entry-form.vue b/app/components/app/nutritionist/entry-form.vue
index 2a190160..4bf7bc68 100644
--- a/app/components/app/nutritionist/entry-form.vue
+++ b/app/components/app/nutritionist/entry-form.vue
@@ -18,8 +18,8 @@ const data = computed({
     <div class="mb-2 border-b border-b-slate-300 text-lg xl:text-xl">
       <div class="flex flex-col justify-between">
         <Block>
-          <FieldGroup layout="stacked">
-            <Label stacked>No. IHS</Label>
+          <FieldGroup>
+            <Label>No. IHS</Label>
             <Field>
               <Input />
             </Field>
diff --git a/app/components/app/pharmacist/entry-form.vue b/app/components/app/pharmacist/entry-form.vue
index 17f2f2b4..5dbe9bb0 100644
--- a/app/components/app/pharmacist/entry-form.vue
+++ b/app/components/app/pharmacist/entry-form.vue
@@ -18,8 +18,8 @@ const data = computed({
     <div class="mb-2 border-b border-b-slate-300 text-lg xl:text-xl">
       <div class="flex flex-col justify-between">
         <Block>
-          <FieldGroup :column="2" layout="stacked">
-            <Label stacked>No. IHS</Label>
+          <FieldGroup :column="2">
+            <Label>No. IHS</Label>
             <Field>
               <Input />
             </Field>
diff --git a/app/components/app/user/entry-form.vue b/app/components/app/user/entry-form.vue
index 202a494e..8e2f9a6b 100644
--- a/app/components/app/user/entry-form.vue
+++ b/app/components/app/user/entry-form.vue
@@ -18,14 +18,14 @@ const data = computed({
     <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 :column="2" layout="stacked">
-            <Label stacked>Username</Label>
+          <FieldGroup :column="2">
+            <Label>Username</Label>
             <Field>
               <Input v-model="data.name" />
             </Field>
           </FieldGroup>
-          <FieldGroup :column="2" layout="stacked">
-            <Label stacked>Password</Label>
+          <FieldGroup :column="2">
+            <Label>Password</Label>
             <Field>
               <Input v-model="data.password" type="password" />
             </Field>
diff --git a/app/components/flow/employee/entry.vue b/app/components/content/employee/entry.vue
similarity index 79%
rename from app/components/flow/employee/entry.vue
rename to app/components/content/employee/entry.vue
index 774cf9b4..509baad0 100644
--- a/app/components/flow/employee/entry.vue
+++ b/app/components/content/employee/entry.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import Action from '~/components/pub/custom-ui/nav-footer/ba-dr-su.vue'
+import { MaterialSchema, type MaterialFormData } from '~/schemas/material'
 
 const data = ref({
   name: '',
@@ -38,6 +39,11 @@ const items = [
 
   <AppEmployeeEntryForm v-model="data" :items="items" />
 
+  <AppPersonEntryForm v-model="data" :items="items" :schema="MaterialSchema" />
+  <AppPersonAddressEntryForm v-model="data" :items="items" :schema="MaterialSchema" />
+  <AppPersonContactEntryForm v-model="data" :items="items" :schema="MaterialSchema" />
+  <AppPersonRelativeEntryForm v-model="data" :items="items" :schema="MaterialSchema" />
+
   <AppDoctorEntryForm v-if="data.type === 'doctor'" v-model="data" />
   <AppNurseEntryForm v-else-if="data.type === 'nurse'" v-model="data" />
   <AppPharmacistEntryForm v-else-if="data.type === 'pharmacist'" v-model="data" />
diff --git a/app/components/flow/employee/list.vue b/app/components/content/employee/list.vue
similarity index 100%
rename from app/components/flow/employee/list.vue
rename to app/components/content/employee/list.vue
diff --git a/app/pages/(features)/human-src/employee/add.vue b/app/pages/(features)/human-src/employee/add.vue
index 8478c9b2..b615504e 100644
--- a/app/pages/(features)/human-src/employee/add.vue
+++ b/app/pages/(features)/human-src/employee/add.vue
@@ -35,7 +35,7 @@ const canCreate = hasCreateAccess(roleAccess)
 
 <template>
   <div v-if="canCreate">
-    <ContentUserEntry />
+    <ContentEmployeeEntry />
   </div>
   <Error v-else :status-code="403" />
 </template>