wip: adjust strict form data

person-relative: schema bind strict typed
person-contact: strict schema type
person-families: strict schema type
person-address-relative: strict schema type
patient: strict schema type
person-address: strict schema type

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

@@ -1,10 +1,12 @@
 <script setup lang="ts">
+import { useForm } from 'vee-validate'
 import { toTypedSchema } from '@vee-validate/zod'
-import { Form } from '~/components/pub/ui/form'
+
+// types
+import { type PatientFormData, PatientSchema } from '~/schemas/patient.schema'
 
 // components
 import * as DE from '~/components/pub/my-ui/doc-entry'
-
 import { InputBase, FileField as FileUpload } from '~/components/pub/my-ui/form'
 import { SelectBirthPlace } from '~/components/app/person/fields'
 import {
@@ -24,33 +26,31 @@ import {
   SelectReligion,
 } from './fields'
 
-const props = defineProps<{
+interface FormData extends PatientFormData {}
-  schema: any
+interface Props {
-  initialValues?: any
+  initialValues?: FormData
-}>()
+}
 
-const formSchema = toTypedSchema(props.schema)
+const props = defineProps<Props>()
-const formRef = ref()
+const formSchema = toTypedSchema(PatientSchema)
+
+const { values, resetForm, setValues, validate } = useForm<FormData>({
+  name: 'patientForm',
+  validationSchema: formSchema,
+  initialValues: props.initialValues && {},
+  validateOnMount: false,
+})
 
 defineExpose({
-  validate: () => formRef.value?.validate(),
+  validate,
-  resetForm: () => formRef.value?.resetForm(),
+  resetForm,
-  setValues: (values: any, shouldValidate = true) => formRef.value?.setValues(values, shouldValidate),
+  setValues,
-  values: computed(() => formRef.value?.values),
+  values,
 })
 </script>
 
 <template>
-  <Form
+  <form @submit.prevent="">
-    ref="formRef"
-    v-slot="{ values }"
-    as=""
-    keep-values
-    :validation-schema="formSchema"
-    :validate-on-mount="false"
-    validation-mode="onSubmit"
-    :initial-values="initialValues ? initialValues : {}"
-  >
     <p class="mb-2 text-sm font-semibold 2xl:mb-3 2xl:text-base">Data Diri Pasien</p>
     <DE.Block
       :col-count="4"
@@ -192,5 +192,5 @@ defineExpose({
         :max-size-mb="1"
       />
     </DE.Block>
-  </Form>
+  </form>
 </template>

app/components/app/person-address/entry-form-relative.vue

@@ -1,31 +1,45 @@
 <script setup lang="ts">
+import { useForm } from 'vee-validate'
 import { toTypedSchema } from '@vee-validate/zod'
 
+// schemas
+import {
+  type PersonAddressRelativeFormData,
+  PersonAddressRelativeSchema,
+} from '~/schemas/person-address-relative.schema'
+
 // components
-import { Form } from '~/components/pub/ui/form'
 import * as DE from '~/components/pub/my-ui/doc-entry'
 import { Label as RadioLabel } from '~/components/pub/ui/label'
 import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
 import { SelectDistrict, SelectPostal, SelectProvince, SelectRegency, SelectVillage } from './fields'
-import InputBase from '~/components/pub/my-ui/form/input-base.vue'
+import { InputBase } from '~/components/pub/my-ui/form'
 
-const props = defineProps<{
+interface FormData extends PersonAddressRelativeFormData {}
+
+interface Props {
   title: string
   conf?: {
     withAddressName?: boolean
   }
-  schema: any
   initialValues?: any
-}>()
+}
+const props = defineProps<Props>()
 
-const formSchema = toTypedSchema(props.schema)
+const formSchema = toTypedSchema(PersonAddressRelativeSchema)
-const formRef = ref()
+
+const { values, resetForm, setFieldValue, setValues, validate, setFieldError } = useForm<FormData>({
+  name: 'encounterActionReportForm',
+  validationSchema: formSchema,
+  initialValues: props.initialValues ? props.initialValues : { isSameAddress: '1', locationType_code: 'identity' },
+  validateOnMount: false,
+})
 
 defineExpose({
-  validate: () => formRef.value?.validate(),
+  validate,
-  resetForm: () => formRef.value?.resetForm(),
+  resetForm,
-  setValues: (values: any, shouldValidate = true) => formRef.value?.setValues(values, shouldValidate),
+  setValues,
-  values: computed(() => formRef.value?.values),
+  values,
 })
 
 // Watchers untuk cascading reset
@@ -44,16 +58,22 @@ const fieldStates: Record<string, { dependsOn?: string; placeholder: string }> =
 
 // Computed untuk konversi boolean ke string untuk radio group
 const isSameAddressString = computed(() => {
-  const value = formRef.value?.values?.isSameAddress
+  const value = values.isSameAddress
   if (typeof value === 'boolean') {
     return value ? '1' : '0'
   }
   return value || '1'
 })
+
+// Computed untuk cek apakah alamat sama (menangani boolean dan string)
+const isSameAddress = computed(() => {
+  const value = values.isSameAddress as boolean | string | undefined
+  return value === true || value === '1'
+})
 // #region Function Helper
 function getFieldState(field: string) {
   const state = fieldStates[field]
-  const isSame = formRef.value?.values?.isSameAddress === true || formRef.value?.values?.isSameAddress === '1'
+  const isSame = isSameAddress.value
 
   // Jika alamat sama, semua field kecuali provinsi disabled
   if (['address', 'rt', 'rw'].includes(field) && isSame) {
@@ -62,7 +82,7 @@ function getFieldState(field: string) {
 
   // Untuk field yang tergantung pada field lain
   if (state?.dependsOn) {
-    const dependencyValue = formRef.value?.values?.[state.dependsOn]
+    const dependencyValue = values[state.dependsOn as keyof FormData]
     const isDisabledByDependency = !dependencyValue
 
     // Jika isSame, semua field location disabled
@@ -89,14 +109,14 @@ function getFieldState(field: string) {
 
 // Watch province_code changes
 watch(
-  () => formRef.value?.values?.province_code,
+  () => values.province_code,
   (newValue, oldValue) => {
-    if (isResetting || !formRef.value || newValue === oldValue) return
+    if (isResetting || newValue === oldValue) return
 
     if (oldValue && newValue !== oldValue) {
       isResetting = true
 
-      formRef.value.setValues(
+      setValues(
         {
           regency_code: undefined,
           district_code: undefined,
@@ -115,14 +135,14 @@ watch(
 
 // Watch regency_code changes
 watch(
-  () => formRef.value?.values?.regency_code,
+  () => values.regency_code,
   (newValue, oldValue) => {
-    if (isResetting || !formRef.value || newValue === oldValue) return
+    if (isResetting || newValue === oldValue) return
 
     if (oldValue && newValue !== oldValue) {
       isResetting = true
 
-      formRef.value.setValues(
+      setValues(
         {
           district_code: undefined,
           village_code: undefined,
@@ -140,14 +160,14 @@ watch(
 
 // Watch district_code changes
 watch(
-  () => formRef.value?.values?.district_code,
+  () => values.district_code,
   (newValue, oldValue) => {
-    if (isResetting || !formRef.value || newValue === oldValue) return
+    if (isResetting || newValue === oldValue) return
 
     if (oldValue && newValue !== oldValue) {
       isResetting = true
 
-      formRef.value.setValues(
+      setValues(
         {
           village_code: undefined,
           postalRegion_code: undefined,
@@ -164,14 +184,14 @@ watch(
 
 // Watch village_code changes
 watch(
-  () => formRef.value?.values?.village_code,
+  () => values.village_code,
   (newValue, oldValue) => {
-    if (isResetting || !formRef.value || newValue === oldValue) return
+    if (isResetting || newValue === oldValue) return
 
     if (oldValue && newValue !== oldValue) {
       isResetting = true
 
-      formRef.value.setValues(
+      setValues(
         {
           postalRegion_code: undefined,
         },
@@ -187,19 +207,19 @@ watch(
 
 // Watch isSameAddress changes untuk trigger validasi
 watch(
-  () => formRef.value?.values?.isSameAddress,
+  () => values.isSameAddress,
   (newValue, oldValue) => {
-    if (!formRef.value || newValue === oldValue) return
+    if (isResetting || newValue === oldValue) return
 
     // Konversi ke boolean untuk perbandingan yang konsisten
-    const newBool = newValue === true || newValue === '1'
+    const newBool = newValue === true || newValue === ('1' as unknown)
-    const oldBool = oldValue === true || oldValue === '1'
+    const oldBool = oldValue === true || oldValue === ('1' as unknown)
 
     // Ketika berubah dari true ke false, clear empty strings dan trigger validasi
     if (oldBool && !newBool) {
       nextTick(() => {
         // Set empty strings ke undefined untuk trigger required validation
-        const currentValues = formRef.value.values
+        const currentValues = values
         const updatedValues = { ...currentValues }
 
         // Convert empty strings to undefined untuk field yang sekarang required
@@ -211,11 +231,11 @@ watch(
         if (updatedValues.address === '') updatedValues.address = undefined
 
         // Update values dan trigger validasi
-        formRef.value.setValues(updatedValues, false)
+        setValues(updatedValues, false)
 
         // Trigger validasi untuk menampilkan error
         setTimeout(() => {
-          formRef.value?.validate()
+          validate()
         }, 50)
       })
     }
@@ -224,14 +244,14 @@ watch(
     if (!oldBool && newBool) {
       nextTick(() => {
         // Clear error messages untuk field yang tidak lagi required
-        formRef.value?.setFieldError('province_code', undefined)
+        setFieldError('province_code', undefined)
-        formRef.value?.setFieldError('regency_code', undefined)
+        setFieldError('regency_code', undefined)
-        formRef.value?.setFieldError('district_code', undefined)
+        setFieldError('district_code', undefined)
-        formRef.value?.setFieldError('village_code', undefined)
+        setFieldError('village_code', undefined)
-        formRef.value?.setFieldError('postalRegion_code', undefined)
+        setFieldError('postalRegion_code', undefined)
-        formRef.value?.setFieldError('address', undefined)
+        setFieldError('address', undefined)
-        formRef.value?.setFieldError('rt', undefined)
+        setFieldError('rt', undefined)
-        formRef.value?.setFieldError('rw', undefined)
+        setFieldError('rw', undefined)
       })
     }
   },
@@ -240,16 +260,7 @@ watch(
 </script>
 
 <template>
-  <Form
+  <form @submit-prevent="">
-    ref="formRef"
-    v-slot="{ values }"
-    as=""
-    keep-values
-    :validation-schema="formSchema"
-    :validate-on-mount="false"
-    validation-mode="onSubmit"
-    :initial-values="initialValues ?? { isSameAddress: '1', locationType_code: 'identity' }"
-  >
     <div>
       <p
         v-if="props.title"
@@ -323,33 +334,33 @@ watch(
       <SelectProvince
         field-name="province_code"
         placeholder="Pilih"
-        :is-disabled="values.isSameAddress === true || values.isSameAddress === '1'"
+        :is-disabled="isSameAddress"
-        :is-required="values.isSameAddress !== true && values.isSameAddress !== '1'"
+        :is-required="!isSameAddress"
       />
       <SelectRegency
         field-name="regency_code"
         :province-code="values.province_code"
         :is-disabled="getFieldState('regency_code').disabled"
-        :is-required="values.isSameAddress !== true && values.isSameAddress !== '1'"
+        :is-required="!isSameAddress"
       />
       <SelectDistrict
         field-name="district_code"
         :regency-code="values.regency_code"
         :is-disabled="getFieldState('district_code').disabled"
-        :is-required="values.isSameAddress !== true && values.isSameAddress !== '1'"
+        :is-required="!isSameAddress"
       />
       <SelectVillage
         field-name="village_code"
         :district-code="values.district_code"
         :is-disabled="getFieldState('village_code').disabled"
-        :is-required="values.isSameAddress !== true && values.isSameAddress !== '1'"
+        :is-required="!isSameAddress"
       />
       <InputBase
         field-name="address"
         label="Alamat"
         :placeholder="getFieldState('address').placeholder"
         :is-disabled="getFieldState('address').disabled"
-        :is-required="values.isSameAddress !== true && values.isSameAddress !== '1'"
+        :is-required="!isSameAddress"
         :col-span="2"
       />
       <div class="grid grid-cols-2 gap-1">
@@ -377,5 +388,5 @@ watch(
         :is-disabled="getFieldState('postalRegion_code').disabled || !values.village_code"
       />
     </DE.Block>
-  </Form>
+  </form>
 </template>

app/components/app/person-address/entry-form.vue

@@ -1,29 +1,44 @@
 <script setup lang="ts">
+import { useForm } from 'vee-validate'
 import { toTypedSchema } from '@vee-validate/zod'
 
+// types
+import { type PersonAddressFormData, PersonAddressSchema } from '~/schemas/person-address.schema'
+
 // components
 import { Form } from '~/components/pub/ui/form'
 import * as DE from '~/components/pub/my-ui/doc-entry'
 import InputBase from '~/components/pub/my-ui/form/input-base.vue'
 import { SelectDistrict, SelectPostal, SelectProvince, SelectRegency, SelectVillage } from './fields'
 
-const props = defineProps<{
+interface FormData extends PersonAddressFormData {}
+
+interface Props {
   title: string
   conf?: {
     withAddressName?: boolean
   }
-  schema: any
   initialValues?: any
-}>()
+}
 
-const formSchema = toTypedSchema(props.schema)
+const props = defineProps<Props>()
-const formRef = ref()
+const formSchema = toTypedSchema(PersonAddressSchema)
+
+const { values, resetForm, setValues, validate } = useForm<FormData>({
+  name: 'patientForm',
+  validationSchema: formSchema,
+  initialValues: {
+    locationType_code: 'domicile',
+    ...props.initialValues,
+  },
+  validateOnMount: false,
+})
 
 defineExpose({
-  validate: () => formRef.value?.validate(),
+  validate,
-  resetForm: () => formRef.value?.resetForm(),
+  resetForm,
-  setValues: (values: any, shouldValidate = true) => formRef.value?.setValues(values, shouldValidate),
+  setValues,
-  values: computed(() => formRef.value?.values),
+  values,
 })
 
 // Watchers untuk cascading reset
@@ -32,22 +47,22 @@ let isResetting = false
 // #region Watch provinceCode changes
 
 watch(
-  () => formRef.value?.values?.provinceCode,
+  () => values.province_code,
   (newValue, oldValue) => {
-    if (isResetting || !formRef.value || newValue === oldValue) return
+    if (isResetting || !values || newValue === oldValue) return
 
     if (oldValue && newValue !== oldValue) {
       isResetting = true
 
       // Delay reset untuk memberikan waktu composable menyelesaikan request
       setTimeout(() => {
-        if (formRef.value) {
+        if (values) {
-          formRef.value.setValues(
+          setValues(
             {
-              regencyId: undefined,
+              regency_code: undefined,
-              districtId: undefined,
+              district_code: undefined,
-              villageId: undefined,
+              village_code: undefined,
-              zipCode: undefined,
+              postalRegion_code: undefined,
             },
             false,
           )
@@ -63,21 +78,21 @@ watch(
 
 // Watch regencyId changes
 watch(
-  () => formRef.value?.values?.regencyId,
+  () => values.regency_code,
   (newValue, oldValue) => {
-    if (isResetting || !formRef.value || newValue === oldValue) return
+    if (isResetting || !values || newValue === oldValue) return
 
     if (oldValue && newValue !== oldValue) {
       isResetting = true
 
       // Delay reset untuk memberikan waktu composable menyelesaikan request
       setTimeout(() => {
-        if (formRef.value) {
+        if (values) {
-          formRef.value.setValues(
+          setValues(
             {
-              districtId: undefined,
+              district_code: undefined,
-              villageId: undefined,
+              village_code: undefined,
-              zipCode: undefined,
+              postalRegion_code: undefined,
             },
             false,
           )
@@ -93,20 +108,20 @@ watch(
 
 // Watch districtId changes
 watch(
-  () => formRef.value?.values?.districtId,
+  () => values.district_code,
   (newValue, oldValue) => {
-    if (isResetting || !formRef.value || newValue === oldValue) return
+    if (isResetting || !values || newValue === oldValue) return
 
     if (oldValue && newValue !== oldValue) {
       isResetting = true
 
       // Delay reset untuk memberikan waktu composable menyelesaikan request
       setTimeout(() => {
-        if (formRef.value) {
+        if (values) {
-          formRef.value.setValues(
+          setValues(
             {
-              villageId: undefined,
+              village_code: undefined,
-              zipCode: undefined,
+              postalRegion_code: undefined,
             },
             false,
           )
@@ -122,16 +137,16 @@ watch(
 
 // Watch villageId changes
 watch(
-  () => formRef.value?.values?.villageId,
+  () => values.village_code,
   (newValue, oldValue) => {
-    if (isResetting || !formRef.value || newValue === oldValue) return
+    if (isResetting || !values || newValue === oldValue) return
 
     if (oldValue && newValue !== oldValue) {
       isResetting = true
 
-      formRef.value.setValues(
+      setValues(
         {
-          zipCode: undefined,
+          postalRegion_code: undefined,
         },
         false,
       )
@@ -146,18 +161,7 @@ watch(
 </script>
 
 <template>
-  <Form
+  <form>
-    ref="formRef"
-    v-slot="{ values }"
-    as=""
-    keep-values
-    :validation-schema="formSchema"
-    :validate-on-mount="false"
-    validation-mode="onSubmit"
-    :initial-values="
-      initialValues ? { locationType_code: 'domicile', ...initialValues } : { locationType_code: 'domicile' }
-    "
-  >
     <div>
       <p
         v-if="props.title"
@@ -233,5 +237,5 @@ watch(
         :is-disabled="!values.village_code"
       />
     </DE.Block>
-  </Form>
+  </form>
 </template>

app/components/app/person-contact/entry-form.vue

@@ -1,45 +1,47 @@
 <script setup lang="ts">
+import { useForm, FieldArray } from 'vee-validate'
 import { toTypedSchema } from '@vee-validate/zod'
 
+// type
+import { type PersonContactFormData, PersonContactListSchema } from '~/schemas/person-contact.schema'
+
 // components
 import * as DE from '~/components/pub/my-ui/doc-entry'
-import { Form } from '~/components/pub/ui/form'
-import { FieldArray } from 'vee-validate'
 import { SelectContactType } from './fields'
 import { ButtonAction, InputBase } from '~/components/pub/my-ui/form'
 
-const props = defineProps<{
+interface FormData extends PersonContactFormData {}
+
+interface Props {
   title: string
-  schema: any
   contactLimit?: number
   initialValues?: any
   isReadonly?: boolean
-}>()
+}
 
+const props = defineProps<Props>()
 const { contactLimit = 5 } = props
-const formSchema = toTypedSchema(props.schema)
+
-const formRef = ref()
+const formSchema = toTypedSchema(PersonContactListSchema)
+const { values, resetForm, setValues, validate } = useForm<FormData>({
+  name: 'personContactForm',
+  validationSchema: formSchema,
+  initialValues: props.initialValues ? props.initialValues : {},
+  validateOnMount: false,
+})
 
 defineExpose({
-  validate: () => formRef.value?.validate(),
+  validate,
-  resetForm: () => formRef.value?.resetForm(),
+  resetForm,
-  setValues: (values: any, shouldValidate = true) => formRef.value?.setValues(values, shouldValidate),
+  setValues,
-  values: computed(() => formRef.value?.values),
+  values,
 })
 
 const { title = 'Kontak Pasien', isReadonly = false } = props
 </script>
 
 <template>
-  <Form
+  <form @submit.prevent>
-    ref="formRef"
-    as=""
-    keep-values
-    :validation-schema="formSchema"
-    :validate-on-mount="false"
-    :initial-values="initialValues ? initialValues : {}"
-    validation-mode="onSubmit"
-  >
     <div>
       <p class="text-md mb-2 mt-1 font-semibold">
         {{ title }}
@@ -99,5 +101,5 @@ const { title = 'Kontak Pasien', isReadonly = false } = props
         />
       </FieldArray>
     </div>
-  </Form>
+  </form>
 </template>

app/components/app/person-relative/entry-form.vue

@@ -1,44 +1,46 @@
 <script setup lang="ts">
+import { useForm, FieldArray } from 'vee-validate'
 import { toTypedSchema } from '@vee-validate/zod'
-import { FieldArray } from 'vee-validate'
+
+// schemas
+import { type PersonRelativeFormData, ResponsiblePersonSchema } from '~/schemas/person-relative.schema'
 
 // components
 import * as DE from '~/components/pub/my-ui/doc-entry'
-import { Form } from '~/components/pub/ui/form'
 import { SelectRelations } from './fields'
 import { ButtonAction, InputBase } from '~/components/pub/my-ui/form'
 
-const props = defineProps<{
+interface FormData extends PersonRelativeFormData {}
+
+interface Props {
   title: string
-  schema: any
   isReadonly?: boolean
   initialValues?: any
   contactLimit?: number
-}>()
+}
+const props = defineProps<Props>()
 
-const formSchema = toTypedSchema(props.schema)
+const formSchema = toTypedSchema(ResponsiblePersonSchema)
-const formRef = ref()
+
+const { values, resetForm, setValues, validate } = useForm<FormData>({
+  name: 'personRelativeForm',
+  validationSchema: formSchema,
+  initialValues: props.initialValues ? props.initialValues : {},
+  validateOnMount: false,
+})
 
 defineExpose({
-  validate: () => formRef.value?.validate(),
+  validate,
-  resetForm: () => formRef.value?.resetForm(),
+  resetForm,
-  setValues: (values: any, shouldValidate = true) => formRef.value?.setValues(values, shouldValidate),
+  setValues,
-  values: computed(() => formRef.value?.values),
+  values: values,
 })
 
 const { title = 'Kontak Pasien', isReadonly = false, contactLimit = 5 } = props
 </script>
 
 <template>
-  <Form
+  <form @submit.prevent>
-    ref="formRef"
-    as=""
-    keep-values
-    :validation-schema="formSchema"
-    :validate-on-mount="false"
-    :initial-values="initialValues ? initialValues : {}"
-    validation-mode="onSubmit"
-  >
     <div>
       <p class="text-md mb-2 mt-1 font-semibold">
         {{ title }}
@@ -111,5 +113,5 @@ const { title = 'Kontak Pasien', isReadonly = false, contactLimit = 5 } = props
         />
       </FieldArray>
     </div>
-  </Form>
+  </form>
 </template>

app/components/app/person/family-parents-form.vue

@@ -1,47 +1,60 @@
 <script setup lang="ts">
-import type { PersonFamilyFormData as FamilyData } from '~/schemas/person-family.schema'
+import type { PersonFamilyFormData as FamilyData, PersonFamiliesFormData } from '~/schemas/person-family.schema'
+import { PersonFamiliesSchema } from '~/schemas/person-family.schema'
 import { toTypedSchema } from '@vee-validate/zod'
-import { FieldArray } from 'vee-validate'
+import { useForm, FieldArray } from 'vee-validate'
 
 // component
 import * as DE from '~/components/pub/my-ui/doc-entry'
-import { Form } from '~/components/pub/ui/form'
 import { SelectEducation } from '~/components/app/patient/fields'
 import { InputBase } from '~/components/pub/my-ui/form'
 import { RadioParentsInput } from './fields'
 
-const props = defineProps<{
+interface FormData extends PersonFamiliesFormData {}
-  title: string
-  schema: any
-  initialValues?: any
-}>()
 
-const formSchema = toTypedSchema(props.schema)
+interface Props {
-const formRef = ref()
+  title: string
+  initialValues?: any
+}
+
+const props = defineProps<Props>()
+
+const formSchema = toTypedSchema(PersonFamiliesSchema)
 const isFamilyFormDisabled = ref(true)
 
-const isEditing = computed(() => !!props.initialValues?.id)
+const { values, resetForm, setValues, validate, setFieldValue } = useForm<FormData>({
+  name: 'familyParentsForm',
+  validationSchema: formSchema,
+  initialValues: props.initialValues
+    ? props.initialValues
+    : {
+        shareFamilyData: '0',
+        families: [],
+      },
+  validateOnMount: false,
+})
 
 defineExpose({
-  validate: () => formRef.value?.validate(),
+  validate,
-  resetForm: () => formRef.value?.resetForm(),
+  resetForm,
-  values: computed(() => formRef.value?.values),
+  setValues,
+  values,
 })
 
 watch(
-  () => formRef.value?.values?.shareFamilyData,
+  () => values.shareFamilyData,
   (newValue) => {
-    if (!formRef.value) return
+    if (!newValue) return
 
     if (newValue === '1') {
       isFamilyFormDisabled.value = false
 
-      const fam = formRef.value.values?.families || []
+      const fam = values?.families || []
 
       const needsReset = fam.length !== 2 || fam[0]?.relation !== 'mother' || fam[1]?.relation !== 'father'
 
       if (needsReset) {
-        formRef.value.setFieldValue('families', [
+        setFieldValue('families', [
           { relation: 'mother', name: '', education: '', occupation: '' },
           { relation: 'father', name: '', education: '', occupation: '' },
         ])
@@ -52,28 +65,14 @@ watch(
 
     isFamilyFormDisabled.value = true
 
-    formRef.value.setFieldValue('families', [])
+    setFieldValue('families', [])
   },
   { immediate: true },
 )
 </script>
 
 <template>
-  <Form
+  <form @submit.prevent>
-    ref="formRef"
-    v-slot="{ values }"
-    as=""
-    keep-values
-    :validation-schema="formSchema"
-    :validate-on-mount="false"
-    validation-mode="onSubmit"
-    :initial-values="
-      initialValues || {
-        shareFamilyData: '0',
-        families: [],
-      }
-    "
-  >
     <div>
       <p
         v-if="props.title"
@@ -171,5 +170,5 @@ watch(
         </template>
       </div>
     </div>
-  </Form>
+  </form>
 </template>

app/components/content/patient/form.vue

@@ -0,0 +1,358 @@
+<script setup lang="ts">
+// type
+import { withBase } from '~/models/_base'
+import type { PatientEntity, PatientBase, Patient, genPatientProps } from '~/models/patient'
+import type { Person } from '~/models/person'
+
+import type { ExposedForm } from '~/types/form'
+import type { HeaderPrep } from '~/components/pub/my-ui/data/types'
+
+// schema and models
+import { genPatient } from '~/models/patient'
+import { PatientSchema } from '~/schemas/patient.schema'
+import { PersonAddressRelativeSchema } from '~/schemas/person-address-relative.schema'
+import { PersonAddressSchema } from '~/schemas/person-address.schema'
+import { PersonContactListSchema } from '~/schemas/person-contact.schema'
+import { PersonFamiliesSchema } from '~/schemas/person-family.schema'
+import { ResponsiblePersonSchema } from '~/schemas/person-relative.schema'
+
+// components
+import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
+import AppPatientEntryForm from '~/components/app/patient/entry-form.vue'
+import AppPersonAddressEntryForm from '~/components/app/person-address/entry-form.vue'
+import AppPersonAddressEntryFormRelative from '~/components/app/person-address/entry-form-relative.vue'
+import AppPersonFamilyParentsForm from '~/components/app/person/family-parents-form.vue'
+import AppPersonContactEntryForm from '~/components/app/person-contact/entry-form.vue'
+import AppPersonRelativeEntryForm from '~/components/app/person-relative/entry-form.vue'
+
+// services
+import { getPatientDetail, uploadAttachment } from '~/services/patient.service'
+
+import {
+  // for form entry
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleCancelForm,
+} from '~/handlers/patient.handler'
+
+import { toast } from '~/components/pub/ui/toast'
+
+// #region Props & Emits
+const props = defineProps<{
+  callbackUrl?: string
+  mode: 'add' | 'edit'
+  patientId?: string | number
+}>()
+
+const residentIdentityFile = ref<File>()
+const familyCardFile = ref<File>()
+
+// form related state
+const personAddressForm = ref<ExposedForm<any> | null>(null)
+const personAddressRelativeForm = ref<ExposedForm<any> | null>(null)
+const personContactForm = ref<ExposedForm<any> | null>(null)
+const personEmergencyContactRelative = ref<ExposedForm<any> | null>(null)
+const personFamilyForm = ref<ExposedForm<any> | null>(null)
+const personPatientForm = ref<ExposedForm<any> | null>(null)
+
+// #endregion
+
+// #region State & Computed
+const patient = ref(
+  withBase<PatientEntity>({
+    person: {} as Person,
+    personAddresses: [],
+    personContacts: [],
+    personRelatives: [],
+  }),
+)
+// #endregion
+
+// #region Lifecycle Hooks
+onMounted(() => {
+  // Initial synchronization when forms are mounted and isSameAddress is true by default
+  nextTick(() => {
+    const isSameAddress = personAddressRelativeForm.value?.values?.isSameAddress
+    if (
+      (isSameAddress === true || isSameAddress === '1') &&
+      personAddressForm.value?.values &&
+      personAddressRelativeForm.value
+    ) {
+      const currentAddressValues = personAddressForm.value.values
+      if (Object.keys(currentAddressValues).length > 0) {
+        personAddressRelativeForm.value.setValues(
+          {
+            ...personAddressRelativeForm.value.values,
+            province_code: currentAddressValues.province_code || undefined,
+            regency_code: currentAddressValues.regency_code || undefined,
+            district_code: currentAddressValues.district_code || undefined,
+            village_code: currentAddressValues.village_code || undefined,
+            postalRegion_code: currentAddressValues.postalRegion_code || undefined,
+            address: currentAddressValues.address || undefined,
+            rt: currentAddressValues.rt || undefined,
+            rw: currentAddressValues.rw || undefined,
+          },
+          false,
+        )
+      }
+    }
+  })
+
+  // if edit mode, fetch patient detail
+  if (props.mode === 'edit' && props.patientId) {
+    void getPatientDetail(props.patientId as number).then((v) => {
+      if (v.success) {
+        patient.value = v.body.data || {}
+      }
+    })
+  }
+})
+// #endregion
+
+// #region Functions
+async function composeFormData(): Promise<Patient> {
+  const [patient, address, addressRelative, families, contacts, emergencyContact] = await Promise.all([
+    personPatientForm.value?.validate(),
+    personAddressForm.value?.validate(),
+    personAddressRelativeForm.value?.validate(),
+    personFamilyForm.value?.validate(),
+    personContactForm.value?.validate(),
+    personEmergencyContactRelative.value?.validate(),
+  ])
+
+  const results = [patient, address, addressRelative, families, contacts, emergencyContact]
+  console.log(results)
+  const allValid = results.every((r) => r?.valid)
+
+  // exit, if form errors happend during validation
+  // for example: dropdown not selected
+  if (!allValid) return Promise.reject('Form validation failed')
+
+  const formDataRequest: genPatientProps = {
+    patient: patient?.values,
+    residentAddress: address?.values,
+    cardAddress: addressRelative?.values,
+    familyData: families?.values,
+    contacts: contacts?.values,
+    responsible: emergencyContact?.values,
+  }
+
+  const formData = genPatient()
+
+  if (patient?.values.residentIdentityFile) {
+    residentIdentityFile.value = patient?.values.residentIdentityFile
+  }
+
+  if (patient?.values.familyIdentityFile) {
+    familyCardFile.value = patient?.values.familyIdentityFile
+  }
+
+  return new Promise((resolve) => resolve(formData))
+}
+// #endregion region
+
+// #region Utilities & event handlers
+async function handleActionClick(eventType: string) {
+  try {
+    if (eventType === 'submit') {
+      const patient: Patient = await composeFormData()
+      let createdPatientId = 0
+
+      const response = await handleActionSave(
+        patient,
+        () => {},
+        () => {},
+        toast,
+      )
+
+      const data = (response?.body?.data ?? null) as PatientBase | null
+      if (!data) return
+      createdPatientId = data.id
+
+      if (residentIdentityFile.value) {
+        void uploadAttachment(residentIdentityFile.value, createdPatientId, 'ktp')
+      }
+      if (familyCardFile.value) {
+        void uploadAttachment(familyCardFile.value, createdPatientId, 'kk')
+      }
+
+      // If has callback provided redirect to callback with patientData
+      if (props.callbackUrl && props.callbackUrl.length > 0) {
+        await navigateTo(props.callbackUrl + '?patient-id=' + createdPatientId)
+        return
+      }
+
+      // Navigate to patient list or show success message
+      await navigateTo('/client/patient')
+      return
+    }
+
+    if (eventType === 'cancel') {
+      if (props.callbackUrl) {
+        await navigateTo(props.callbackUrl)
+        return
+      }
+
+      await navigateTo({
+        name: 'client-patient',
+      })
+      // handleCancelForm()
+    }
+  } catch (error) {
+    // Show error toast to user
+    if (typeof error === 'string') {
+      toast({
+        title: 'Error',
+        description: error,
+        variant: 'destructive',
+      })
+    } else if (error instanceof Error) {
+      toast({
+        title: 'Error',
+        description: error.message || 'Terjadi kesalahan saat menyimpan data',
+        variant: 'destructive',
+      })
+    } else {
+      toast({
+        title: 'Error',
+        description: 'Terjadi kesalahan saat menyimpan data',
+        variant: 'destructive',
+      })
+    }
+  }
+}
+// #endregion
+
+// #region Watchers
+// Watcher untuk sinkronisasi initial ketika kedua form sudah ready
+watch(
+  [() => personAddressForm.value, () => personAddressRelativeForm.value],
+  ([addressForm, relativeForm]) => {
+    if (addressForm && relativeForm) {
+      // Trigger initial sync jika isSameAddress adalah true
+      nextTick(() => {
+        const isSameAddress = relativeForm.values?.isSameAddress
+        if ((isSameAddress === true || isSameAddress === '1') && addressForm.values) {
+          const currentAddressValues = addressForm.values
+          if (Object.keys(currentAddressValues).length > 0) {
+            relativeForm.setValues(
+              {
+                ...relativeForm.values,
+                province_code: currentAddressValues.province_code || undefined,
+                regency_code: currentAddressValues.regency_code || undefined,
+                district_code: currentAddressValues.district_code || undefined,
+                village_code: currentAddressValues.village_code || undefined,
+                postalRegion_code: currentAddressValues.postalRegion_code || undefined,
+                address: currentAddressValues.address || undefined,
+                rt: currentAddressValues.rt || undefined,
+                rw: currentAddressValues.rw || undefined,
+              },
+              false,
+            )
+          }
+        }
+      })
+    }
+  },
+  { immediate: true },
+)
+
+// Watcher untuk sinkronisasi alamat ketika isSameAddress = true
+watch(
+  () => personAddressForm.value?.values,
+  (newAddressValues) => {
+    // Cek apakah alamat KTP harus sama dengan alamat sekarang
+    const isSameAddress = personAddressRelativeForm.value?.values?.isSameAddress
+
+    if ((isSameAddress === true || isSameAddress === '1') && newAddressValues && personAddressRelativeForm.value) {
+      // Sinkronkan semua field alamat dari alamat sekarang ke alamat KTP
+      personAddressRelativeForm.value.setValues(
+        {
+          ...personAddressRelativeForm.value.values,
+          province_code: newAddressValues.province_code || undefined,
+          regency_code: newAddressValues.regency_code || undefined,
+          district_code: newAddressValues.district_code || undefined,
+          village_code: newAddressValues.village_code || undefined,
+          postalRegion_code: newAddressValues.postalRegion_code || undefined,
+          address: newAddressValues.address || undefined,
+          rt: newAddressValues.rt || undefined,
+          rw: newAddressValues.rw || undefined,
+        },
+        false,
+      )
+    }
+  },
+  { deep: true },
+)
+
+// Watcher untuk memantau perubahan isSameAddress
+watch(
+  () => personAddressRelativeForm.value?.values?.isSameAddress,
+  (isSameAddress) => {
+    if (
+      (isSameAddress === true || isSameAddress === '1') &&
+      personAddressForm.value?.values &&
+      personAddressRelativeForm.value?.values
+    ) {
+      // Ketika isSameAddress diubah menjadi true, copy alamat sekarang ke alamat KTP
+      const currentAddressValues = personAddressForm.value.values
+      personAddressRelativeForm.value.setValues(
+        {
+          ...personAddressRelativeForm.value.values,
+          province_code: currentAddressValues.province_code || undefined,
+          regency_code: currentAddressValues.regency_code || undefined,
+          district_code: currentAddressValues.district_code || undefined,
+          village_code: currentAddressValues.village_code || undefined,
+          postalRegion_code: currentAddressValues.postalRegion_code || undefined,
+          address: currentAddressValues.address || undefined,
+          rt: currentAddressValues.rt || undefined,
+          rw: currentAddressValues.rw || undefined,
+        },
+        false,
+      )
+    }
+  },
+)
+// #endregion
+</script>
+
+<template>
+  <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg font-semibold xl:text-xl">Tambah Pasien</div>
+  <AppPatientEntryForm ref="personPatientForm" />
+  <div class="h-6"></div>
+  <AppPersonAddressEntryForm
+    ref="personAddressForm"
+    title="Alamat Sekarang"
+  />
+  <div class="h-6"></div>
+  <AppPersonAddressEntryFormRelative
+    ref="personAddressRelativeForm"
+    title="Alamat KTP"
+  />
+  <div class="h-6"></div>
+  <AppPersonFamilyParentsForm
+    ref="personFamilyForm"
+    title="Identitas Orang Tua"
+  />
+  <div class="h-6"></div>
+  <AppPersonContactEntryForm
+    ref="personContactForm"
+    title="Kontak Pasien"
+  />
+  <AppPersonRelativeEntryForm
+    ref="personEmergencyContactRelative"
+    title="Penanggung Jawab"
+  />
+
+  <div class="my-2 flex justify-end py-2">
+    <Action @click="handleActionClick" />
+  </div>
+</template>
+
+<style scoped>
+/* component style */
+</style>

app/pages/(features)/client/patient/[id]/edit.vue

@@ -33,7 +33,12 @@ const canRead = true
 
 <template>
   <div>
-    <div v-if="canRead">Edit patient id: {{ route.params.id }}</div>
+    <div v-if="canRead">
+      <ContentPatientForm
+        :mode="'edit'"
+        :patient-id="route.params.id"
+      />
+    </div>
     <Error
       v-else
       :status-code="403"

app/pages/(features)/client/patient/add.vue

@@ -34,7 +34,10 @@ const callbackUrl = route.query['return-path'] as string | undefined
 <template>
   <div>
     <div v-if="canRead">
-      <ContentPatientAdd :callback-url="callbackUrl" />
+      <ContentPatientForm
+        :mode="'add'"
+        :callback-url="callbackUrl"
+      />
     </div>
     <Error
       v-else

app/schemas/person-family.schema.ts

@@ -26,8 +26,18 @@ const PersonFamiliesSchema = z.discriminatedUnion('shareFamilyData', [
   }),
 ])
 
+interface PersonFamiliesFormData {
+  shareFamilyData: '0' | '1'
+  families: {
+    relation: 'mother' | 'father' | 'guardian' | 'emergency_contact'
+    name: string
+    education: string
+    occupation?: string
+  }[]
+}
+
 type PersonFamilyFormData = z.infer<typeof PersonFamilySchema>
-type PersonFamiliesFormData = z.infer<typeof PersonFamiliesSchema>
+// type PersonFamiliesFormData = z.infer<typeof PersonFamiliesSchema>
 
 export { PersonFamilySchema, PersonFamiliesSchema }
 export type { PersonFamilyFormData, PersonFamiliesFormData }