fix: resolve conflict after merge dev

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>

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>

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

@@ -5,6 +5,7 @@ import type { MaterialFormData } from '~/schemas/material'
 // helpers
 import { toTypedSchema } from '@vee-validate/zod'
 import { useForm } from 'vee-validate'
+// components
 
 interface Props {
   schema: z.ZodSchema<any>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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" />

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>

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',
+}

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

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>