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