From 05e2f32197381cf6caa6115a9172ecc35d4c1ab4 Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Sat, 6 Dec 2025 09:13:28 +0700
Subject: [PATCH] edit-mode: unwrap detail data and use strict type

refactor(patient-form): simplify address synchronization logic

- Extract address sync logic into helper functions
- Remove unused schema imports
- Streamline mounted hook with new loadInitData function
- Consolidate watchers into single efficient watcher

feat(forms): add readonly support across all form components

Implement readonly state handling for patient, relative, contact, and address forms
Add isDisabled prop to all form fields to support readonly mode
Update form components to respect isReadonly prop from parent

refactor(patient-form): reorganize imports and improve type usage

- Group related imports and move type imports to the top
- Replace genPatient with genPatientEntity for better type safety
- Remove console.log statement
- Fix formatting and indentation issues
---
 app/components/app/patient/entry-form.vue     |  54 ++-
 .../app/patient/fields/input-name.vue         |   2 +
 .../fields/radio-communication-barrier.vue    |  12 +-
 .../app/patient/fields/radio-disability.vue   |  12 +-
 .../app/patient/fields/radio-nationality.vue  |  12 +-
 .../app/patient/fields/radio-newborn.vue      |  17 +-
 .../app/patient/fields/select-dob.vue         |   2 +
 .../app/patient/fields/select-job.vue         |   4 +-
 .../app/patient/fields/select-lang.vue        |   2 +
 .../patient/fields/select-marital-status.vue  |   4 +-
 .../app/patient/fields/select-religion.vue    |   2 +
 .../person-address/entry-form-relative.vue    |  18 +-
 .../app/person-address/entry-form.vue         |   8 +
 .../app/person-contact/entry-form.vue         |   6 +-
 .../app/person-relative/entry-form.vue        |   4 +-
 .../app/person/family-parents-form.vue        |  12 +-
 .../app/person/fields/radio-parents-input.vue |  10 +-
 app/components/content/patient/form.vue       | 388 +++++++++++-------
 18 files changed, 392 insertions(+), 177 deletions(-)

diff --git a/app/components/app/patient/entry-form.vue b/app/components/app/patient/entry-form.vue
index 26f18c56..341bdcd5 100644
--- a/app/components/app/patient/entry-form.vue
+++ b/app/components/app/patient/entry-form.vue
@@ -27,8 +27,35 @@ import {
 } from './fields'
 
 interface FormData extends PatientFormData {}
+
+// Type untuk initial values (sebelum transform schema)
+interface PatientFormInput {
+  identityNumber?: string
+  drivingLicenseNumber?: string
+  passportNumber?: string
+  fullName?: string
+  isNewBorn?: 'YA' | 'TIDAK'
+  gender?: string
+  birthPlace?: string
+  birthDate?: string
+  education?: string
+  job?: string
+  maritalStatus?: string
+  nationality?: string
+  ethnicity?: string
+  language?: string
+  religion?: string
+  communicationBarrier?: 'YA' | 'TIDAK'
+  disability?: 'YA' | 'TIDAK'
+  disabilityType?: string
+  note?: string
+  residentIdentityFile?: File
+  familyIdentityFile?: File
+}
+
 interface Props {
-  initialValues?: FormData
+  isReadonly: boolean
+  initialValues?: PatientFormInput
 }
 
 const props = defineProps<Props>()
@@ -37,7 +64,7 @@ const formSchema = toTypedSchema(PatientSchema)
 const { values, resetForm, setValues, validate } = useForm<FormData>({
   name: 'patientForm',
   validationSchema: formSchema,
-  initialValues: props.initialValues && {},
+  initialValues: (props.initialValues ?? {}) as any,
   validateOnMount: false,
 })
 
@@ -61,6 +88,7 @@ defineExpose({
         label="No. KTP"
         placeholder="Masukkan NIK"
         numeric-only
+        :is-disabled="isReadonly"
       />
       <InputBase
         field-name="drivingLicenseNumber"
@@ -68,12 +96,14 @@ defineExpose({
         placeholder="Masukkan nomor SIM"
         numeric-only
         :max-length="20"
+        :is-disabled="isReadonly"
       />
       <InputBase
         field-name="passportNumber"
         label="No. Paspor"
         placeholder="Masukkan nomor paspor"
         :max-length="20"
+        :is-disabled="isReadonly"
       />
       <InputName
         field-name-alias="alias"
@@ -81,46 +111,54 @@ defineExpose({
         label-for-input="Nama Lengkap"
         placeholder="Masukkan nama lengkap pasien"
         is-required
+        :is-disabled="isReadonly"
       />
       <RadioNewborn
         field-name="isNewBorn"
         label="Pasien Bayi"
         placeholder="Pilih status pasien"
         is-required
+        :is-disabled="isReadonly"
       />
       <SelectGender
         field-name="gender"
         label="Jenis Kelamin"
         placeholder="Pilih jenis kelamin"
         is-required
+        :is-disabled="isReadonly"
       />
       <SelectBirthPlace
         field-name="birthPlace"
         label="Tempat Lahir"
         placeholder="Pilih tempat lahir"
         is-required
+        :is-disabled="isReadonly"
       />
       <SelectDob
         label="Tanggal Lahir"
         is-required
+        :is-disabled="isReadonly"
       />
       <SelectEducation
         field-name="education"
         label="Pendidikan"
         placeholder="Pilih pendidikan"
         is-required
+        :is-disabled="isReadonly"
       />
       <SelectJob
         field-name="job"
         label="Pekerjaan"
         placeholder="Pilih pekerjaan"
         is-required
+        :is-disabled="isReadonly"
       />
       <SelectMaritalStatus
         field-name="maritalStatus"
         label="Status Perkawinan"
         placeholder="Pilih status Perkawinan"
         is-required
+        :is-disabled="isReadonly"
       />
       <DE.Cell />
       <RadioNationality
@@ -128,45 +166,51 @@ defineExpose({
         label="Kebangsaan"
         placeholder="Pilih kebangsaan"
         is-required
+        :is-disabled="isReadonly"
       />
       <SelectEthnicity
         field-name="ethnicity"
         label="Suku"
         placeholder="Pilih suku bangsa"
-        :is-disabled="values.nationality !== 'WNI'"
+        :is-disabled="isReadonly || values.nationality !== 'WNI'"
       />
       <SelectLanguage
         field-name="language"
         label="Bahasa"
         placeholder="Pilih preferensi bahasa"
         is-required
+        :is-disabled="isReadonly"
       />
       <SelectReligion
         field-name="religion"
         label="Agama"
         placeholder="Pilih agama"
         is-required
+        :is-disabled="isReadonly"
       />
       <RadioCommunicationBarrier
         field-name="communicationBarrier"
         label="Hambatan Berkomunikasi"
         is-required
+        :is-disabled="isReadonly"
       />
       <RadioDisability
         field-name="disability"
         label="Disabilitas"
         is-required
+        :is-disabled="isReadonly"
       />
       <SelectDisability
         label="Jenis Disabilitas"
         field-name="disabilityType"
-        :is-disabled="values.disability !== 'YA'"
+        :is-disabled="isReadonly || values.disability !== 'YA'"
         :is-required="values.disability === 'YA'"
       />
       <InputBase
         field-name="note"
         label="Kepercayaan"
         placeholder="Contoh: tidak ingin diperiksa oleh dokter laki-laki"
+        :is-disabled="isReadonly"
       />
     </DE.Block>
 
@@ -183,6 +227,7 @@ defineExpose({
         placeholder="Unggah scan dokumen KTP"
         :accept="['pdf', 'jpg', 'png']"
         :max-size-mb="1"
+        :is-disabled="isReadonly"
       />
       <FileUpload
         field-name="familyCardFile"
@@ -190,6 +235,7 @@ defineExpose({
         placeholder="Unggah scan dokumen KK"
         :accept="['pdf', 'jpg', 'png']"
         :max-size-mb="1"
+        :is-disabled="isReadonly"
       />
     </DE.Block>
   </form>
diff --git a/app/components/app/patient/fields/input-name.vue b/app/components/app/patient/fields/input-name.vue
index db9005f1..14a27e63 100644
--- a/app/components/app/patient/fields/input-name.vue
+++ b/app/components/app/patient/fields/input-name.vue
@@ -17,6 +17,7 @@ defineProps<{
   labelClass?: string
   maxLength?: number
   isRequired?: boolean
+  isDisabled?: boolean
 }>()
 </script>
 
@@ -40,6 +41,7 @@ defineProps<{
         <FormItem>
           <FormControl>
             <Input
+              :disabled="isDisabled"
               v-bind="componentField"
               type="text"
               :placeholder="placeholder"
diff --git a/app/components/app/patient/fields/radio-communication-barrier.vue b/app/components/app/patient/fields/radio-communication-barrier.vue
index 56918101..d7f0950c 100644
--- a/app/components/app/patient/fields/radio-communication-barrier.vue
+++ b/app/components/app/patient/fields/radio-communication-barrier.vue
@@ -15,6 +15,7 @@ const props = defineProps<{
   radioItemClass?: string
   labelClass?: string
   isRequired?: boolean
+  isDisabled?: boolean
 }>()
 
 const {
@@ -55,6 +56,7 @@ const genderOptions = [
           <FormControl>
             <RadioGroup
               v-bind="componentField"
+              :disabled="isDisabled"
               :class="cn('flex flex-row flex-wrap gap-4 sm:gap-6', radioGroupClass)"
             >
               <div
@@ -63,20 +65,24 @@ const genderOptions = [
                 :class="cn('flex min-w-fit items-center space-x-2', radioItemClass)"
               >
                 <RadioGroupItem
+                  :disabled="isDisabled"
                   :id="`${fieldName}-${index}`"
                   :value="option.value"
                   :class="
                     cn(
-                      'relative h-4 w-4 rounded-full border-muted-foreground before:absolute before:inset-1 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity data-[state=checked]:border-primary data-[state=checked]:bg-white data-[state=checked]:before:opacity-100 sm:h-5 sm:w-5',
+                      'peer relative h-4 w-4 rounded-full border-muted-foreground before:absolute before:inset-1 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity data-[state=checked]:border-primary data-[state=checked]:bg-white data-[state=checked]:before:opacity-100 sm:h-5 sm:w-5',
                       containerClass,
                     )
                   "
                 />
                 <RadioLabel
-                  :for="`${fieldName}-${index}`"
+                  :for="isDisabled ? undefined : `${fieldName}-${index}`"
                   :class="
                     cn(
-                      'cursor-pointer select-none font-normal text-xs leading-none transition-colors hover:text-primary peer-disabled:cursor-not-allowed peer-disabled:opacity-70 sm:text-sm',
+                      'select-none text-xs !font-normal leading-none transition-colors sm:text-sm',
+                      isDisabled
+                        ? 'cursor-not-allowed opacity-70'
+                        : 'cursor-pointer hover:text-primary',
                       labelClass,
                     )
                   "
diff --git a/app/components/app/patient/fields/radio-disability.vue b/app/components/app/patient/fields/radio-disability.vue
index 6c1464e2..2c6fd581 100644
--- a/app/components/app/patient/fields/radio-disability.vue
+++ b/app/components/app/patient/fields/radio-disability.vue
@@ -15,6 +15,7 @@ const props = defineProps<{
   radioItemClass?: string
   labelClass?: string
   isRequired?: boolean
+  isDisabled?: boolean
 }>()
 
 const {
@@ -55,6 +56,7 @@ const dissabilityOptions = [
           <FormControl>
             <RadioGroup
               v-bind="componentField"
+              :disabled="isDisabled"
               :class="cn('flex flex-row flex-wrap gap-4 sm:gap-6', radioGroupClass)"
             >
               <div
@@ -63,20 +65,24 @@ const dissabilityOptions = [
                 :class="cn('flex min-w-fit items-center space-x-2', radioItemClass)"
               >
                 <RadioGroupItem
+                  :disabled="isDisabled"
                   :id="`${fieldName}-${index}`"
                   :value="option.value"
                   :class="
                     cn(
-                      'relative h-4 w-4 rounded-full border-1 border-muted-foreground before:absolute before:inset-1 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity data-[state=checked]:border-primary data-[state=checked]:bg-white data-[state=checked]:before:opacity-100 sm:h-5 sm:w-5',
+                      'peer border-1 relative h-4 w-4 rounded-full border-muted-foreground before:absolute before:inset-1 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity data-[state=checked]:border-primary data-[state=checked]:bg-white data-[state=checked]:before:opacity-100 sm:h-5 sm:w-5',
                       containerClass,
                     )
                   "
                 />
                 <RadioLabel
-                  :for="`${fieldName}-${index}`"
+                  :for="isDisabled ? undefined : `${fieldName}-${index}`"
                   :class="
                     cn(
-                      'cursor-pointer select-none text-xs !font-normal leading-none transition-colors hover:text-primary peer-disabled:cursor-not-allowed peer-disabled:opacity-70 sm:text-sm',
+                      'select-none text-xs !font-normal leading-none transition-colors',
+                      isDisabled
+                        ? 'cursor-not-allowed opacity-70'
+                        : 'cursor-pointer hover:text-primary',
                       labelClass,
                     )
                   "
diff --git a/app/components/app/patient/fields/radio-nationality.vue b/app/components/app/patient/fields/radio-nationality.vue
index 40525dff..2fc61a07 100644
--- a/app/components/app/patient/fields/radio-nationality.vue
+++ b/app/components/app/patient/fields/radio-nationality.vue
@@ -15,6 +15,7 @@ const props = defineProps<{
   radioItemClass?: string
   labelClass?: string
   isRequired?: boolean
+  isDisabled?: boolean
 }>()
 
 const {
@@ -55,6 +56,7 @@ const nationalityOptions = [
           <FormControl>
             <RadioGroup
               v-bind="componentField"
+              :disabled="isDisabled"
               :class="cn('flex flex-row flex-wrap gap-4 sm:gap-6', radioGroupClass)"
             >
               <div
@@ -63,20 +65,24 @@ const nationalityOptions = [
                 :class="cn('flex min-w-fit items-center space-x-2', radioItemClass)"
               >
                 <RadioGroupItem
+                  :disabled="isDisabled"
                   :id="`${fieldName}-${index}`"
                   :value="option.value"
                   :class="
                     cn(
-                      'relative h-4 w-4 rounded-full border-1 border-muted-foreground before:absolute before:inset-1 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity data-[state=checked]:border-primary data-[state=checked]:bg-white data-[state=checked]:before:opacity-100 sm:h-5 sm:w-5',
+                      'peer relative h-4 w-4 rounded-full border-1 border-muted-foreground before:absolute before:inset-1 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity data-[state=checked]:border-primary data-[state=checked]:bg-white data-[state=checked]:before:opacity-100 sm:h-5 sm:w-5',
                       containerClass,
                     )
                   "
                 />
                 <RadioLabel
-                  :for="`${fieldName}-${index}`"
+                  :for="isDisabled ? undefined : `${fieldName}-${index}`"
                   :class="
                     cn(
-                      'cursor-pointer select-none text-xs !font-normal leading-none transition-colors hover:text-primary peer-disabled:cursor-not-allowed peer-disabled:opacity-70 sm:text-sm',
+                      'select-none text-xs !font-normal leading-none transition-colors sm:text-sm',
+                      isDisabled
+                        ? 'cursor-not-allowed opacity-70'
+                        : 'cursor-pointer hover:text-primary',
                       labelClass,
                     )
                   "
diff --git a/app/components/app/patient/fields/radio-newborn.vue b/app/components/app/patient/fields/radio-newborn.vue
index 86953443..4b66f8db 100644
--- a/app/components/app/patient/fields/radio-newborn.vue
+++ b/app/components/app/patient/fields/radio-newborn.vue
@@ -15,6 +15,7 @@ const props = defineProps<{
   radioItemClass?: string
   labelClass?: string
   isRequired?: boolean
+  isDisabled?: boolean
 }>()
 
 const {
@@ -34,7 +35,10 @@ const newbornOptions = [
 </script>
 
 <template>
-  <DE.Cell :class="cn('radio-group-field', containerClass)" :col-span="2">
+  <DE.Cell
+    :class="cn('radio-group-field', containerClass)"
+    :col-span="2"
+  >
     <DE.Label
       :label-for="fieldName"
       :is-required="isRequired"
@@ -52,6 +56,7 @@ const newbornOptions = [
         <FormItem>
           <FormControl>
             <RadioGroup
+              :disabled="isDisabled"
               v-bind="componentField"
               :class="cn('flex flex-row flex-wrap gap-4 sm:gap-6', radioGroupClass)"
             >
@@ -61,20 +66,24 @@ const newbornOptions = [
                 :class="cn('flex min-w-fit items-center space-x-2 pt-1', radioItemClass)"
               >
                 <RadioGroupItem
+                  :disabled="isDisabled"
                   :id="`${fieldName}-${index}`"
                   :value="option.value"
                   :class="
                     cn(
-                      'relative h-4 w-4 rounded-full border-muted-foreground before:absolute before:inset-1 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity data-[state=checked]:border-primary data-[state=checked]:bg-white data-[state=checked]:before:opacity-100 sm:h-5 sm:w-5',
+                      'peer relative h-4 w-4 rounded-full border-muted-foreground before:absolute before:inset-1 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity data-[state=checked]:border-primary data-[state=checked]:bg-white data-[state=checked]:before:opacity-100 sm:h-5 sm:w-5',
                       containerClass,
                     )
                   "
                 />
                 <RadioLabel
-                  :for="`${fieldName}-${index}`"
+                  :for="isDisabled ? undefined : `${fieldName}-${index}`"
                   :class="
                     cn(
-                      'cursor-pointer select-none text-xs font-normal leading-none transition-colors hover:text-primary peer-disabled:cursor-not-allowed peer-disabled:opacity-70 sm:text-sm',
+                      'select-none text-xs !font-normal leading-none transition-colors',
+                      isDisabled
+                        ? 'cursor-not-allowed opacity-70'
+                        : 'cursor-pointer hover:text-primary',
                       labelClass,
                     )
                   "
diff --git a/app/components/app/patient/fields/select-dob.vue b/app/components/app/patient/fields/select-dob.vue
index eee11acc..985eb046 100644
--- a/app/components/app/patient/fields/select-dob.vue
+++ b/app/components/app/patient/fields/select-dob.vue
@@ -16,6 +16,7 @@ const props = defineProps<{
   fieldGroupClass?: string
   labelClass?: string
   isRequired?: boolean
+  isDisabled?: boolean
 }>()
 
 const {
@@ -95,6 +96,7 @@ function calculateAge(birthDate: string | Date | undefined): string {
         <FormItem>
           <FormControl>
             <Input
+              :disabled="isDisabled"
               id="birthDate"
               type="date"
               min="1900-01-01"
diff --git a/app/components/app/patient/fields/select-job.vue b/app/components/app/patient/fields/select-job.vue
index 814eb7ca..f9751a5e 100644
--- a/app/components/app/patient/fields/select-job.vue
+++ b/app/components/app/patient/fields/select-job.vue
@@ -16,6 +16,7 @@ const props = defineProps<{
   fieldGroupClass?: string
   labelClass?: string
   isRequired?: boolean
+  isDisabled?: boolean
 }>()
 
 const {
@@ -53,8 +54,9 @@ const jobOptions = mapToComboboxOptList(occupationCodes)
         <FormItem>
           <FormControl>
             <Combobox
-              :id="fieldName"
               v-bind="componentField"
+              :is-disabled="isDisabled"
+              :id="fieldName"
               :items="jobOptions"
               :placeholder="placeholder"
               search-placeholder="Cari..."
diff --git a/app/components/app/patient/fields/select-lang.vue b/app/components/app/patient/fields/select-lang.vue
index ce5bbac8..3f2b1bd1 100644
--- a/app/components/app/patient/fields/select-lang.vue
+++ b/app/components/app/patient/fields/select-lang.vue
@@ -15,6 +15,7 @@ const props = defineProps<{
   fieldGroupClass?: string
   labelClass?: string
   isRequired?: boolean
+  isDisabled?: boolean
 }>()
 
 const {
@@ -60,6 +61,7 @@ const langOptions = [
         <FormItem>
           <FormControl>
             <Select
+              :is-disabled="isDisabled"
               :id="fieldName"
               v-bind="componentField"
               :items="langOptions"
diff --git a/app/components/app/patient/fields/select-marital-status.vue b/app/components/app/patient/fields/select-marital-status.vue
index 21ebf0c2..f1cd2b8d 100644
--- a/app/components/app/patient/fields/select-marital-status.vue
+++ b/app/components/app/patient/fields/select-marital-status.vue
@@ -14,6 +14,7 @@ const props = defineProps<{
   fieldGroupClass?: string
   labelClass?: string
   isRequired?: boolean
+  isDisabled?: boolean
   placeholder?: string
 }>()
 
@@ -56,8 +57,9 @@ const maritalStatusOptions = [
         <FormItem>
           <FormControl>
             <Select
-              :id="fieldName"
               v-bind="componentField"
+              :is-disabled="isDisabled"
+              :id="fieldName"
               :items="maritalStatusOptions"
               :placeholder="placeholder"
               :preserve-order="true"
diff --git a/app/components/app/patient/fields/select-religion.vue b/app/components/app/patient/fields/select-religion.vue
index 676fa11e..aa35f188 100644
--- a/app/components/app/patient/fields/select-religion.vue
+++ b/app/components/app/patient/fields/select-religion.vue
@@ -16,6 +16,7 @@ const props = defineProps<{
   fieldGroupClass?: string
   labelClass?: string
   isRequired?: boolean
+  isDisabled?: boolean
 }>()
 
 const {
@@ -68,6 +69,7 @@ const religionOptions = Array.from(
         <FormItem>
           <FormControl>
             <Select
+              :is-disabled="isDisabled"
               :id="fieldName"
               v-bind="componentField"
               :items="religionOptions"
diff --git a/app/components/app/person-address/entry-form-relative.vue b/app/components/app/person-address/entry-form-relative.vue
index b59c7595..f438273c 100644
--- a/app/components/app/person-address/entry-form-relative.vue
+++ b/app/components/app/person-address/entry-form-relative.vue
@@ -19,6 +19,7 @@ interface FormData extends PersonAddressRelativeFormData {}
 
 interface Props {
   title: string
+  isReadonly: boolean
   conf?: {
     withAddressName?: boolean
   }
@@ -313,6 +314,7 @@ watch(
                     class="flex min-w-fit items-center space-x-2"
                   >
                     <RadioGroupItem
+                      :disabled="isReadonly"
                       :id="`isSameAddress-${index}`"
                       :value="option.value"
                       class="relative h-4 w-4 rounded-full border-2 border-muted-foreground before:absolute before:inset-1 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity data-[state=checked]:border-primary data-[state=checked]:bg-white data-[state=checked]:before:opacity-100 sm:h-5 sm:w-5"
@@ -334,32 +336,32 @@ watch(
       <SelectProvince
         field-name="province_code"
         placeholder="Pilih"
-        :is-disabled="isSameAddress"
+        :is-disabled="isReadonly || isSameAddress"
         :is-required="!isSameAddress"
       />
       <SelectRegency
         field-name="regency_code"
         :province-code="values.province_code"
-        :is-disabled="getFieldState('regency_code').disabled"
+        :is-disabled="isReadonly || getFieldState('regency_code').disabled"
         :is-required="!isSameAddress"
       />
       <SelectDistrict
         field-name="district_code"
         :regency-code="values.regency_code"
-        :is-disabled="getFieldState('district_code').disabled"
+        :is-disabled="isReadonly || getFieldState('district_code').disabled"
         :is-required="!isSameAddress"
       />
       <SelectVillage
         field-name="village_code"
         :district-code="values.district_code"
-        :is-disabled="getFieldState('village_code').disabled"
+        :is-disabled="isReadonly || getFieldState('village_code').disabled"
         :is-required="!isSameAddress"
       />
       <InputBase
         field-name="address"
         label="Alamat"
         :placeholder="getFieldState('address').placeholder"
-        :is-disabled="getFieldState('address').disabled"
+        :is-disabled="isReadonly || getFieldState('address').disabled"
         :is-required="!isSameAddress"
         :col-span="2"
       />
@@ -370,13 +372,13 @@ watch(
           numeric-only
           :max-length="2"
           :placeholder="getFieldState('rt').placeholder"
-          :is-disabled="getFieldState('rt').disabled"
+          :is-disabled="isReadonly || getFieldState('rt').disabled"
         />
         <InputBase
           field-name="rw"
           label="RW"
           :placeholder="getFieldState('rw').placeholder"
-          :is-disabled="getFieldState('rw').disabled"
+          :is-disabled="isReadonly || getFieldState('rw').disabled"
           :max-length="2"
           numeric-only
         />
@@ -385,7 +387,7 @@ watch(
         field-name="postalRegion_code"
         :village-code="values.village_code"
         :placeholder="getFieldState('postalRegion_code').placeholder"
-        :is-disabled="getFieldState('postalRegion_code').disabled || !values.village_code"
+        :is-disabled="isReadonly || getFieldState('postalRegion_code').disabled || !values.village_code"
       />
     </DE.Block>
   </form>
diff --git a/app/components/app/person-address/entry-form.vue b/app/components/app/person-address/entry-form.vue
index 7a9d3dc6..15bb71a2 100644
--- a/app/components/app/person-address/entry-form.vue
+++ b/app/components/app/person-address/entry-form.vue
@@ -15,6 +15,7 @@ interface FormData extends PersonAddressFormData {}
 
 interface Props {
   title: string
+  isReadonly: boolean
   conf?: {
     withAddressName?: boolean
   }
@@ -188,21 +189,25 @@ watch(
       <SelectProvince
         field-name="province_code"
         placeholder="Pilih"
+        :is-disabled="isReadonly"
         is-required
       />
       <SelectRegency
         field-name="regency_code"
         :province-code="values.province_code"
+        :is-disabled="isReadonly"
         is-required
       />
       <SelectDistrict
         field-name="district_code"
         :regency-code="values.regency_code"
+        :is-disabled="isReadonly"
         is-required
       />
       <SelectVillage
         field-name="village_code"
         :district-code="values.district_code"
+        :is-disabled="isReadonly"
         is-required
       />
       <InputBase
@@ -210,6 +215,7 @@ watch(
         label="Alamat"
         placeholder="Masukkan alamat"
         is-required
+        :is-disabled="isReadonly"
         :col-span="2"
       />
       <DE.Cell class="flex-row gap-2">
@@ -220,6 +226,7 @@ watch(
             placeholder="01"
             numeric-only
             :max-length="2"
+            :is-disabled="isReadonly"
           />
           <InputBase
             field-name="rw"
@@ -227,6 +234,7 @@ watch(
             placeholder="02"
             :max-length="2"
             numeric-only
+            :is-disabled="isReadonly"
           />
         </div>
       </DE.Cell>
diff --git a/app/components/app/person-contact/entry-form.vue b/app/components/app/person-contact/entry-form.vue
index ca92cccf..708f3fdb 100644
--- a/app/components/app/person-contact/entry-form.vue
+++ b/app/components/app/person-contact/entry-form.vue
@@ -14,9 +14,9 @@ interface FormData extends PersonContactFormData {}
 
 interface Props {
   title: string
+  isReadonly: boolean
   contactLimit?: number
   initialValues?: any
-  isReadonly?: boolean
 }
 
 const props = defineProps<Props>()
@@ -36,8 +36,6 @@ defineExpose({
   setValues,
   values,
 })
-
-const { title = 'Kontak Pasien', isReadonly = false } = props
 </script>
 
 <template>
@@ -94,7 +92,7 @@ const { title = 'Kontak Pasien', isReadonly = false } = props
           preset="add"
           label="Tambah Kontak"
           title="Tambah Kontak ke Daftar Kontak"
-          :disabled="fields.length >= contactLimit || isReadonly"
+          :disabled="isReadonly || fields.length >= contactLimit"
           :full-width-mobile="true"
           class="mt-4"
           @click="push({ contactType: '', contactNumber: '' })"
diff --git a/app/components/app/person-relative/entry-form.vue b/app/components/app/person-relative/entry-form.vue
index cfd49abe..90247b41 100644
--- a/app/components/app/person-relative/entry-form.vue
+++ b/app/components/app/person-relative/entry-form.vue
@@ -14,7 +14,7 @@ interface FormData extends PersonRelativeFormData {}
 
 interface Props {
   title: string
-  isReadonly?: boolean
+  isReadonly: boolean
   initialValues?: any
   contactLimit?: number
 }
@@ -36,7 +36,7 @@ defineExpose({
   values: values,
 })
 
-const { title = 'Kontak Pasien', isReadonly = false, contactLimit = 5 } = props
+const { title = 'Kontak Pasien', contactLimit = 5 } = props
 </script>
 
 <template>
diff --git a/app/components/app/person/family-parents-form.vue b/app/components/app/person/family-parents-form.vue
index 42b6a8fa..9f349259 100644
--- a/app/components/app/person/family-parents-form.vue
+++ b/app/components/app/person/family-parents-form.vue
@@ -14,6 +14,7 @@ interface FormData extends PersonFamiliesFormData {}
 
 interface Props {
   title: string
+  isReadonly: boolean
   initialValues?: any
 }
 
@@ -84,7 +85,10 @@ watch(
 
     <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
       <div class="mb-6">
-        <RadioParentsInput field-name="shareFamilyData" />
+        <RadioParentsInput
+          field-name="shareFamilyData"
+          :is-disabled="isReadonly"
+        />
       </div>
 
       <div
@@ -111,21 +115,21 @@ watch(
                     :field-name="`families[${idx}].name`"
                     label="Nama"
                     placeholder="Masukkan nama"
-                    :is-disabled="isFamilyFormDisabled"
+                    :is-disabled="isReadonly || isFamilyFormDisabled"
                   />
 
                   <SelectEducation
                     :field-name="`families[${idx}].education`"
                     label="Pendidikan"
                     placeholder="Pilih"
-                    :is-disabled="isFamilyFormDisabled"
+                    :is-disabled="isReadonly || isFamilyFormDisabled"
                   />
 
                   <InputBase
                     :field-name="`families[${idx}].occupation`"
                     label="Pekerjaan"
                     placeholder="Masukkan pekerjaan"
-                    :is-disabled="isFamilyFormDisabled"
+                    :is-disabled="isReadonly || isFamilyFormDisabled"
                   />
                 </DE.Block>
               </div>
diff --git a/app/components/app/person/fields/radio-parents-input.vue b/app/components/app/person/fields/radio-parents-input.vue
index bd8b6f15..0ee3d601 100644
--- a/app/components/app/person/fields/radio-parents-input.vue
+++ b/app/components/app/person/fields/radio-parents-input.vue
@@ -16,6 +16,7 @@ const props = defineProps<{
   radioItemClass?: string
   labelClass?: string
   isRequired?: boolean
+  isDisabled?: boolean
 }>()
 
 const {
@@ -55,6 +56,7 @@ const residenceOptions = [
           <FormControl>
             <RadioGroup
               v-bind="componentField"
+              :disabled="isDisabled"
               :class="cn('flex flex-row flex-wrap gap-4 sm:gap-6', radioGroupClass)"
             >
               <div
@@ -63,20 +65,22 @@ const residenceOptions = [
                 :class="cn('flex min-w-fit items-center space-x-2', radioItemClass)"
               >
                 <RadioGroupItem
+                  :disabled="isDisabled"
                   :id="`${fieldName}-${index}`"
                   :value="option.value"
                   :class="
                     cn(
-                      'relative h-4 w-4 rounded-full border-2 border-muted-foreground before:absolute before:inset-1 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity data-[state=checked]:border-primary data-[state=checked]:bg-white data-[state=checked]:before:opacity-100 sm:h-5 sm:w-5',
+                      'peer relative h-4 w-4 rounded-full border-2 border-muted-foreground before:absolute before:inset-1 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity data-[state=checked]:border-primary data-[state=checked]:bg-white data-[state=checked]:before:opacity-100 sm:h-5 sm:w-5',
                       containerClass,
                     )
                   "
                 />
                 <RadioLabel
-                  :for="`${fieldName}-${index}`"
+                  :for="isDisabled ? undefined : `${fieldName}-${index}`"
                   :class="
                     cn(
-                      'cursor-pointer select-none text-xs font-medium leading-none transition-colors hover:text-primary peer-disabled:cursor-not-allowed peer-disabled:opacity-70 sm:text-sm',
+                      'select-none text-xs font-medium leading-none transition-colors sm:text-sm',
+                      isDisabled ? 'cursor-not-allowed opacity-70' : 'cursor-pointer hover:text-primary',
                       labelClass,
                     )
                   "
diff --git a/app/components/content/patient/form.vue b/app/components/content/patient/form.vue
index 6e6053a1..5bb71b4b 100644
--- a/app/components/content/patient/form.vue
+++ b/app/components/content/patient/form.vue
@@ -1,20 +1,13 @@
 <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 { PersonAddress } from '~/models/person-address'
+import type { PersonContact } from '~/models/person-contact'
+import type { PersonRelative } from '~/models/person-relative'
 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'
+import type { PatientEntity, PatientBase, Patient, genPatientProps } from '~/models/patient'
+import { genPatientEntity } from '~/models/patient'
 
 // components
 import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
@@ -29,7 +22,6 @@ import AppPersonRelativeEntryForm from '~/components/app/person-relative/entry-f
 import { getPatientDetail, uploadAttachment } from '~/services/patient.service'
 
 import {
-  // for form entry
   isReadonly,
   isProcessing,
   isFormEntryDialogOpen,
@@ -41,6 +33,14 @@ import {
 
 import { toast } from '~/components/pub/ui/toast'
 
+// reverse mapping untuk contact type (backend → UI)
+const reverseContactTypeMapping: Record<string, string> = {
+  'm-phone': 'phoneNumber',
+  phone: 'homePhoneNumber',
+  email: 'email',
+  fax: 'fax',
+}
+
 // #region Props & Emits
 const props = defineProps<{
   callbackUrl?: string
@@ -70,51 +70,178 @@ const patient = ref(
     personRelatives: [],
   }),
 )
+
+// Key untuk memaksa re-render form saat data berubah
+const formKey = ref(0)
+
+// Computed: unwrap patient data untuk form patient
+const patientFormInitialValues = computed(() => {
+  const p = patient.value
+  const person = p.person
+  if (!person || !person.name) return undefined
+
+  return {
+    identityNumber: person.residentIdentityNumber || '',
+    drivingLicenseNumber: person.drivingLicenseNumber || '',
+    passportNumber: person.passportNumber || '',
+    fullName: person.name || '',
+    isNewBorn: (p.newBornStatus ? 'YA' : 'TIDAK') as 'YA' | 'TIDAK',
+    gender: person.gender_code || '',
+    birthPlace: person.birthRegency_code || '',
+    birthDate: person.birthDate ? new Date(person.birthDate).toISOString().split('T')[0] : '',
+    education: person.education_code || '',
+    job: person.occupation_code || '',
+    maritalStatus: '', // perlu mapping jika ada field ini
+    nationality: person.nationality || 'WNI',
+    ethnicity: person.ethnic_code || '',
+    language: person.language_code || '',
+    religion: person.religion_code || '',
+    communicationBarrier: (person.communicationIssueStatus ? 'YA' : 'TIDAK') as 'YA' | 'TIDAK',
+    disability: (person.disability ? 'YA' : 'TIDAK') as 'YA' | 'TIDAK',
+    disabilityType: person.disability || '',
+    note: '',
+  }
+})
+
+// Computed: unwrap alamat domisili (alamat sekarang)
+const addressFormInitialValues = computed(() => {
+  const addresses = patient.value.person?.addresses || patient.value.personAddresses || []
+  const domicileAddress = addresses.find((a: PersonAddress) => a.locationType_code === 'domicile')
+  if (!domicileAddress) return undefined
+
+  // extract kode wilayah dari preload data
+  const village = domicileAddress.postalRegion?.village
+  const district = village?.district
+  const regency = district?.regency
+  const province = regency?.province
+
+  return {
+    locationType_code: 'domicile',
+    province_code: province?.code || '',
+    regency_code: regency?.code || '',
+    district_code: district?.code || '',
+    village_code: village?.code || domicileAddress.village_code || '',
+    postalRegion_code: domicileAddress.postalRegion_code || '',
+    address: domicileAddress.address || '',
+    rt: domicileAddress.rt || '',
+    rw: domicileAddress.rw || '',
+  }
+})
+
+// Computed: unwrap alamat KTP (identity)
+const addressRelativeFormInitialValues = computed(() => {
+  const addresses = patient.value.person?.addresses || patient.value.personAddresses || []
+  const domicileAddress = addresses.find((a: PersonAddress) => a.locationType_code === 'domicile')
+  const identityAddress = addresses.find((a: PersonAddress) => a.locationType_code === 'identity')
+
+  // Jika tidak ada alamat KTP terpisah, berarti sama dengan domisili
+  if (!identityAddress) {
+    return {
+      isSameAddress: '1',
+      locationType_code: 'identity',
+    }
+  }
+
+  // Cek apakah alamat sama dengan domisili
+  const isSame =
+    domicileAddress &&
+    identityAddress.village_code === domicileAddress.village_code &&
+    identityAddress.address === domicileAddress.address
+
+  if (isSame) {
+    return {
+      isSameAddress: '1',
+      locationType_code: 'identity',
+    }
+  }
+
+  // extract kode wilayah dari preload data
+  const village = identityAddress.postalRegion?.village
+  const district = village?.district
+  const regency = district?.regency
+  const province = regency?.province
+
+  return {
+    isSameAddress: '0',
+    locationType_code: 'identity',
+    province_code: province?.code || '',
+    regency_code: regency?.code || '',
+    district_code: district?.code || '',
+    village_code: village?.code || identityAddress.village_code || '',
+    postalRegion_code: identityAddress.postalRegion_code || '',
+    address: identityAddress.address || '',
+    rt: identityAddress.rt || '',
+    rw: identityAddress.rw || '',
+  }
+})
+
+// Computed: unwrap data orang tua
+const familyFormInitialValues = computed(() => {
+  const relatives = patient.value.person?.relatives || patient.value.personRelatives || []
+  const parents = relatives.filter(
+    (r: PersonRelative) => !r.responsible && (r.relationship_code === 'mother' || r.relationship_code === 'father'),
+  )
+
+  if (parents.length === 0) {
+    return {
+      shareFamilyData: '0',
+      families: [],
+    }
+  }
+
+  return {
+    shareFamilyData: '1',
+    families: parents.map((parent: PersonRelative) => ({
+      relation: parent.relationship_code || '',
+      name: parent.name || '',
+      education: parent.education_code || '',
+      occupation: parent.occupation_name || parent.occupation_code || '',
+    })),
+  }
+})
+
+// Computed: unwrap kontak pasien
+const contactFormInitialValues = computed(() => {
+  const contacts = patient.value.person?.contacts || patient.value.personContacts || []
+  if (contacts.length === 0) return undefined
+
+  return {
+    contacts: contacts.map((contact: PersonContact) => ({
+      contactType: reverseContactTypeMapping[contact.type_code] || contact.type_code || '',
+      contactNumber: contact.value || '',
+    })),
+  }
+})
+
+// Computed: unwrap penanggung jawab
+const responsibleFormInitialValues = computed(() => {
+  const relatives = patient.value.person?.relatives || patient.value.personRelatives || []
+  const responsibles = relatives.filter((r: PersonRelative) => r.responsible === true)
+
+  if (responsibles.length === 0) return undefined
+
+  return {
+    contacts: responsibles.map((r: PersonRelative) => ({
+      relation: r.relationship_code || '',
+      name: r.name || '',
+      address: r.address || '',
+      phone: r.phoneNumber || '',
+    })),
+  }
+})
 // #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,
-        )
-      }
-    }
-  })
-
+onMounted(async () => {
   // 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 || {}
-      }
-    })
+    await loadInitData(props.patientId)
   }
 })
 // #endregion
 
 // #region Functions
-async function composeFormData(): Promise<Patient> {
+async function composeFormData(): Promise<PatientEntity> {
   const [patient, address, addressRelative, families, contacts, emergencyContact] = await Promise.all([
     personPatientForm.value?.validate(),
     personAddressForm.value?.validate(),
@@ -141,7 +268,7 @@ async function composeFormData(): Promise<Patient> {
     responsible: emergencyContact?.values,
   }
 
-  const formData = genPatient()
+  const formData = genPatientEntity(formDataRequest)
 
   if (patient?.values.residentIdentityFile) {
     residentIdentityFile.value = patient?.values.residentIdentityFile
@@ -156,6 +283,20 @@ async function composeFormData(): Promise<Patient> {
 // #endregion region
 
 // #region Utilities & event handlers
+async function loadInitData(id: number | string) {
+  isProcessing.value = true
+  try {
+    const response = await getPatientDetail(id as number)
+    if (response.success) {
+      patient.value = response.body.data || {}
+      // Increment key untuk memaksa re-render form dengan data baru
+      formKey.value++
+    }
+  } finally {
+    isProcessing.value = false
+  }
+}
+
 async function handleActionClick(eventType: string) {
   try {
     if (eventType === 'submit') {
@@ -197,10 +338,12 @@ async function handleActionClick(eventType: string) {
         return
       }
 
+      // handleCancelForm()
+    }
+    if (eventType === 'back') {
       await navigateTo({
         name: 'client-patient',
       })
-      // handleCancelForm()
     }
   } catch (error) {
     // Show error toast to user
@@ -228,124 +371,95 @@ async function handleActionClick(eventType: string) {
 // #endregion
 
 // #region Watchers
-// Watcher untuk sinkronisasi initial ketika kedua form sudah ready
+// Helper: Cek apakah isSameAddress aktif
+const isSameAddressActive = () => {
+  const val = personAddressRelativeForm.value?.values?.isSameAddress
+  return val === true || val === '1'
+}
+
+// Helper: Sinkronkan alamat sekarang ke alamat KTP
+const syncAddressToRelative = () => {
+  const source = personAddressForm.value?.values
+  const target = personAddressRelativeForm.value
+
+  if (!source || !target) return
+
+  const addressFields = [
+    'province_code',
+    'regency_code',
+    'district_code',
+    'village_code',
+    'postalRegion_code',
+    'address',
+    'rt',
+    'rw',
+  ] as const
+  const syncedValues = Object.fromEntries(addressFields.map((key) => [key, source[key] || undefined]))
+
+  target.setValues({ ...target.values, ...syncedValues }, false)
+}
+
+// Watcher: Sinkronisasi saat nilai alamat berubah atau isSameAddress diaktifkan
 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,
-      )
+  [() => personAddressForm.value?.values, () => personAddressRelativeForm.value?.values?.isSameAddress],
+  () => {
+    if (isSameAddressActive()) {
+      syncAddressToRelative()
     }
   },
+  { deep: true, immediate: true },
 )
 // #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="mb-5 border-b border-b-slate-300 pb-3 text-lg font-semibold xl:text-xl">
+    {{ mode === 'edit' ? 'Edit Pasien' : 'Tambah Pasien' }}
+  </div>
+  <AppPatientEntryForm
+    :key="`patient-${formKey}`"
+    ref="personPatientForm"
+    :is-readonly="isProcessing || isReadonly"
+    :initial-values="patientFormInitialValues"
+  />
   <div class="h-6"></div>
   <AppPersonAddressEntryForm
+    :key="`address-${formKey}`"
     ref="personAddressForm"
     title="Alamat Sekarang"
+    :is-readonly="isProcessing || isReadonly"
+    :initial-values="addressFormInitialValues"
   />
   <div class="h-6"></div>
   <AppPersonAddressEntryFormRelative
+    :key="`address-rel-${formKey}`"
     ref="personAddressRelativeForm"
     title="Alamat KTP"
+    :is-readonly="isProcessing || isReadonly"
+    :initial-values="addressRelativeFormInitialValues"
   />
   <div class="h-6"></div>
   <AppPersonFamilyParentsForm
+    :key="`family-${formKey}`"
     ref="personFamilyForm"
     title="Identitas Orang Tua"
+    :is-readonly="isProcessing || isReadonly"
+    :initial-values="familyFormInitialValues"
   />
   <div class="h-6"></div>
   <AppPersonContactEntryForm
+    :key="`contact-${formKey}`"
     ref="personContactForm"
     title="Kontak Pasien"
+    :is-readonly="isProcessing || isReadonly"
+    :initial-values="contactFormInitialValues"
   />
   <AppPersonRelativeEntryForm
+    :key="`responsible-${formKey}`"
     ref="personEmergencyContactRelative"
     title="Penanggung Jawab"
+    :is-readonly="isProcessing || isReadonly"
+    :initial-values="responsibleFormInitialValues"
   />
 
   <div class="my-2 flex justify-end py-2">