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

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

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"

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

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

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

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

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"

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

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"

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"

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"

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>

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>

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: '' })"

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>

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>

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

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'
+import type { PatientEntity, PatientBase, Patient, genPatientProps } from '~/models/patient'
-
+import { genPatientEntity } from '~/models/patient'
-// schema and models
-import { genPatient } from '~/models/patient'
-import { PatientSchema } from '~/schemas/patient.schema'
-import { PersonAddressRelativeSchema } from '~/schemas/person-address-relative.schema'
-import { PersonAddressSchema } from '~/schemas/person-address.schema'
-import { PersonContactListSchema } from '~/schemas/person-contact.schema'
-import { PersonFamiliesSchema } from '~/schemas/person-family.schema'
-import { ResponsiblePersonSchema } from '~/schemas/person-relative.schema'
 
 // components
 import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
@@ -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(() => {
+onMounted(async () => {
-  // Initial synchronization when forms are mounted and isSameAddress is true by default
-  nextTick(() => {
-    const isSameAddress = personAddressRelativeForm.value?.values?.isSameAddress
-    if (
-      (isSameAddress === true || isSameAddress === '1') &&
-      personAddressForm.value?.values &&
-      personAddressRelativeForm.value
-    ) {
-      const currentAddressValues = personAddressForm.value.values
-      if (Object.keys(currentAddressValues).length > 0) {
-        personAddressRelativeForm.value.setValues(
-          {
-            ...personAddressRelativeForm.value.values,
-            province_code: currentAddressValues.province_code || undefined,
-            regency_code: currentAddressValues.regency_code || undefined,
-            district_code: currentAddressValues.district_code || undefined,
-            village_code: currentAddressValues.village_code || undefined,
-            postalRegion_code: currentAddressValues.postalRegion_code || undefined,
-            address: currentAddressValues.address || undefined,
-            rt: currentAddressValues.rt || undefined,
-            rw: currentAddressValues.rw || undefined,
-          },
-          false,
-        )
-      }
-    }
-  })
-
   // if edit mode, fetch patient detail
   if (props.mode === 'edit' && props.patientId) {
-    void getPatientDetail(props.patientId as number).then((v) => {
+    await loadInitData(props.patientId)
-      if (v.success) {
-        patient.value = v.body.data || {}
-      }
-    })
   }
 })
 // #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],
+  [() => personAddressForm.value?.values, () => personAddressRelativeForm.value?.values?.isSameAddress],
-  ([addressForm, relativeForm]) => {
+  () => {
-    if (addressForm && relativeForm) {
+    if (isSameAddressActive()) {
-      // Trigger initial sync jika isSameAddress adalah true
+      syncAddressToRelative()
-      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,
-      )
     }
   },
+  { 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>
+  <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg font-semibold xl:text-xl">
-  <AppPatientEntryForm ref="personPatientForm" />
+    {{ 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">