@eeplatform/nuxt-layer-common 1.7.29 → 1.7.31

package/components/EnrollmentForm.vue

@@ -116,7 +116,7 @@
           </v-row>
         </v-col>
 
-        <v-col cols="2" class="pb-0">
+        <v-col cols="3" class="pb-0">
           <v-row no-gutters>
             <InputLabel class="text-capitalize" title="Grade Level" required />
             <v-col cols="12">
@@ -167,6 +167,28 @@
                   </v-row>
                 </v-col>
 
+                <v-col
+                  v-if="
+                    enrollment.specialProgram && selectedProgram.majors.length
+                  "
+                  cols="12"
+                >
+                  <v-row no-gutters>
+                    <InputLabel
+                      class="text-capitalize"
+                      title="Major"
+                      required
+                    />
+                    <v-col cols="12">
+                      <v-autocomplete
+                        v-model="enrollment.specialProgramMajor"
+                        :rules="[requiredRule]"
+                        :items="selectedProgram.majors"
+                      ></v-autocomplete>
+                    </v-col>
+                  </v-row>
+                </v-col>
+
                 <v-col
                   v-if="enrollment.specialProgram && selectedProgram.gwa"
                   cols="12"
@@ -385,12 +407,13 @@
             <v-col cols="2">
               <v-row no-gutters>
                 <v-col cols="12">
-                  <InputLabel class="text-capitalize" title="Sex" />
+                  <InputLabel class="text-capitalize" title="Sex" required />
                 </v-col>
                 <v-col cols="12">
                   <v-select
                     v-model="enrollment.learnerInfo.sex"
                     :items="['Male', 'Female']"
+                    :rules="[requiredRule]"
                     placeholder="Select Sex"
                   ></v-select>
                 </v-col>
@@ -401,35 +424,42 @@
 
         <v-col cols="12" class="mt-4">
           <v-row>
-            <v-col cols="4">
+            <v-col cols="3">
               <v-row no-gutters>
                 <InputLabel
                   class="text-capitalize"
-                  title="Place of Birth (Municipality/City)"
+                  title="Place of Birth(Municipality/City)"
                   required
                 />
                 <v-col cols="12">
-                  <v-autocomplete
-                    v-model="enrollment.learnerInfo.placeOfBirth"
+                  <v-combobox
+                    v-model="
+                      enrollment.learnerInfo.placeOfBirth.cityMunicipality
+                    "
                     :rules="[requiredRule]"
-                    :items="citiesMunicipalities"
+                    :items="birthCitiesMunicipalities"
                     item-title="name"
-                    items-value="name"
+                    item-value="code"
+                    :return-object="false"
                     :hide-no-data="false"
+                    :loading="loadingBirthCityMun"
                   >
                     <template v-slot:no-data>
                       <v-list-item>
                         <v-list-item-title>
-                          No results matching "<strong>search</strong>". Press
-                          <kbd>enter</kbd> to create a new one
+                          No results found. Press <kbd>enter</kbd> to search
                         </v-list-item-title>
                       </v-list-item>
                     </template>
-                  </v-autocomplete>
+                  </v-combobox>
                 </v-col>
               </v-row>
             </v-col>
+          </v-row>
+        </v-col>
 
+        <v-col cols="12">
+          <v-row>
             <v-col cols="3">
               <v-row no-gutters>
                 <InputLabel
@@ -458,14 +488,12 @@
             </v-col>
 
             <v-col cols="4">
-              <v-row>
-                <v-col cols="12" class="pb-0">
-                  <InputLabel
-                    class="text-capitalize"
-                    title="Indigenous People/Cultural Community"
-                  />
-                </v-col>
-                <v-col cols="9" class="pt-0">
+              <v-row no-gutters>
+                <InputLabel
+                  class="text-capitalize"
+                  title="Indigenous People/Cultural Community"
+                />
+                <v-col cols="12" class="pt-0">
                   <v-combobox
                     v-model="enrollment.learnerInfo.indigenousCommunity"
                     :items="indigenousCommunitiesPhilippines"
@@ -483,21 +511,19 @@
                 </v-col>
               </v-row>
             </v-col>
-          </v-row>
-        </v-col>
 
-        <v-col cols="12">
-          <v-row>
-            <v-col cols="12" class="pb-0">
-              <InputLabel
-                class="text-capitalize"
-                title="4Ps Household ID Number"
-              />
-            </v-col>
-            <v-col cols="4" class="pt-0">
-              <v-text-field
-                v-model="enrollment.learnerInfo.fourPsHouseholdId"
-              ></v-text-field>
+            <v-col cols="3">
+              <v-row no-gutters>
+                <InputLabel
+                  class="text-capitalize"
+                  title="4Ps Household ID Number"
+                />
+                <v-col cols="12" class="pt-0">
+                  <v-text-field
+                    v-model="enrollment.learnerInfo.fourPsHouseholdId"
+                  ></v-text-field>
+                </v-col>
+              </v-row>
             </v-col>
           </v-row>
         </v-col>
@@ -665,66 +691,35 @@
 
             <v-col cols="12">
               <v-row>
-                <v-col cols="3">
-                  <v-row no-gutters>
-                    <InputLabel class="text-capitalize" title="House No." />
-                    <v-col cols="12">
-                      <v-text-field
-                        v-model="enrollment.address.current.houseNumber"
-                      ></v-text-field>
-                    </v-col>
-                  </v-row>
-                </v-col>
-
-                <v-col cols="3">
-                  <v-row no-gutters>
-                    <InputLabel class="text-capitalize" title="Street" />
-                    <v-col cols="12">
-                      <v-text-field
-                        v-model="enrollment.address.current.streetName"
-                      ></v-text-field>
-                    </v-col>
-                  </v-row>
-                </v-col>
-
                 <v-col cols="3">
                   <v-row no-gutters>
                     <InputLabel
                       class="text-capitalize"
-                      title="Barangay"
+                      title="Country"
                       required
                     />
                     <v-col cols="12">
                       <v-text-field
-                        v-model="enrollment.address.current.barangay"
+                        v-model="enrollment.address.current.country"
                         :rules="[requiredRule]"
+                        readonly
                       ></v-text-field>
                     </v-col>
                   </v-row>
                 </v-col>
-              </v-row>
-            </v-col>
 
-            <v-col cols="12">
-              <v-row>
                 <v-col cols="3">
                   <v-row no-gutters>
-                    <InputLabel
-                      class="text-capitalize"
-                      title="Province"
-                      required
-                    />
+                    <InputLabel class="text-capitalize" title="Province" />
                     <v-col cols="12">
                       <v-combobox
                         v-model="enrollment.address.current.province"
-                        :rules="[requiredRule]"
                         :items="currentProvinces"
                         item-title="name"
-                        item-value="name"
+                        item-value="code"
                         :return-object="false"
                         :hide-no-data="false"
                         :loading="loadingCurrentProvinces"
-                        @keydown.enter="getCurrentCityMun()"
                       >
                         <template v-slot:no-data>
                           <v-list-item>
@@ -753,10 +748,9 @@
                         :rules="[requiredRule]"
                         :items="currentCitiesMunicipalities"
                         item-title="name"
-                        item-value="name"
+                        item-value="code"
                         :return-object="false"
                         :hide-no-data="false"
-                        :disabled="!enrollment.address.current.province"
                         :loading="loadingCurrentCityMun"
                       >
                         <template v-slot:no-data>
@@ -773,34 +767,71 @@
                   </v-row>
                 </v-col>
 
+                <v-col cols="2">
+                  <v-row no-gutters>
+                    <InputLabel class="text-capitalize" title="Zip Code" />
+                    <v-col cols="12">
+                      <v-text-field
+                        v-model="enrollment.address.current.zipCode"
+                      ></v-text-field>
+                    </v-col>
+                  </v-row>
+                </v-col>
+              </v-row>
+            </v-col>
+
+            <v-col cols="12">
+              <v-row>
                 <v-col cols="3">
                   <v-row no-gutters>
                     <InputLabel
                       class="text-capitalize"
-                      title="Country"
+                      title="Barangay"
                       required
                     />
                     <v-col cols="12">
-                      <v-text-field
-                        v-model="enrollment.address.current.country"
+                      <v-combobox
+                        v-model="enrollment.address.current.barangay"
                         :rules="[requiredRule]"
-                        readonly
+                        :items="currentBarangays"
+                        item-title="name"
+                        item-value="code"
+                        :return-object="false"
+                        :hide-no-data="false"
+                        :disabled="!enrollment.address.current.municipalityCity"
+                        :loading="loadingCurrentBarangay"
+                      >
+                        <template v-slot:no-data>
+                          <v-list-item>
+                            <v-list-item-title>
+                              No results matching "<strong>search</strong>".
+                              Press
+                              <kbd>enter</kbd> to create a new one
+                            </v-list-item-title>
+                          </v-list-item>
+                        </template>
+                      </v-combobox>
+                    </v-col>
+                  </v-row>
+                </v-col>
+
+                <v-col cols="3">
+                  <v-row no-gutters>
+                    <InputLabel class="text-capitalize" title="Street" />
+                    <v-col cols="12">
+                      <v-text-field
+                        v-model="enrollment.address.current.streetName"
                       ></v-text-field>
                     </v-col>
                   </v-row>
                 </v-col>
 
-                <v-col cols="2">
+                <v-col cols="3">
                   <v-row no-gutters>
-                    <InputLabel
-                      class="text-capitalize"
-                      title="Zip Code"
-                      required
-                    />
+                    <InputLabel class="text-capitalize" title="House No." />
                     <v-col cols="12">
                       <v-text-field
-                        v-model="enrollment.address.current.zipCode"
-                        :rules="[requiredRule]"
+                        v-model="enrollment.address.current.houseNumber"
                       ></v-text-field>
                     </v-col>
                   </v-row>
@@ -829,70 +860,37 @@
 
             <v-col cols="12">
               <v-row>
-                <v-col cols="3">
-                  <v-row no-gutters>
-                    <InputLabel class="text-capitalize" title="House No." />
-                    <v-col cols="12">
-                      <v-text-field
-                        v-model="enrollment.address.permanent.houseNumber"
-                        :readonly="sameAsCurrentAddress"
-                      ></v-text-field>
-                    </v-col>
-                  </v-row>
-                </v-col>
-
-                <v-col cols="3">
-                  <v-row no-gutters>
-                    <InputLabel class="text-capitalize" title="Street" />
-                    <v-col cols="12">
-                      <v-text-field
-                        v-model="enrollment.address.permanent.streetName"
-                        :readonly="sameAsCurrentAddress"
-                      ></v-text-field>
-                    </v-col>
-                  </v-row>
-                </v-col>
-
                 <v-col cols="3">
                   <v-row no-gutters>
                     <InputLabel
                       class="text-capitalize"
-                      title="Barangay"
+                      title="Country"
                       required
                     />
                     <v-col cols="12">
                       <v-text-field
-                        v-model="enrollment.address.permanent.barangay"
+                        v-model="enrollment.address.permanent.country"
                         :rules="[requiredRule]"
                         :readonly="sameAsCurrentAddress"
                       ></v-text-field>
                     </v-col>
                   </v-row>
                 </v-col>
-              </v-row>
-            </v-col>
 
-            <v-col cols="12">
-              <v-row>
                 <v-col cols="3">
                   <v-row no-gutters>
-                    <InputLabel
-                      class="text-capitalize"
-                      title="Province"
-                      required
-                    />
+                    <InputLabel class="text-capitalize" title="Province" />
                     <v-col cols="12">
                       <v-combobox
                         v-model="enrollment.address.permanent.province"
-                        :rules="[requiredRule]"
                         :readonly="sameAsCurrentAddress"
                         :items="permanentProvinces"
                         item-title="name"
-                        item-value="name"
+                        item-value="code"
                         :return-object="false"
                         :hide-no-data="false"
                         :loading="loadingPermanentProvinces"
-                        @keydown.enter="getPermanentCityMun()"
+                        :disabled="sameAsCurrentAddress"
                       >
                         <template v-slot:no-data>
                           <v-list-item>
@@ -922,10 +920,10 @@
                         :readonly="sameAsCurrentAddress"
                         :items="permanentCitiesMunicipalities"
                         item-title="name"
-                        item-value="name"
+                        item-value="code"
                         :return-object="false"
                         :hide-no-data="false"
-                        :disabled="!enrollment.address.permanent.province"
+                        :disabled="sameAsCurrentAddress"
                         :loading="loadingPermanentCityMun"
                       >
                         <template v-slot:no-data>
@@ -942,34 +940,77 @@
                   </v-row>
                 </v-col>
 
+                <v-col cols="2">
+                  <v-row no-gutters>
+                    <InputLabel class="text-capitalize" title="Zip Code" />
+                    <v-col cols="12">
+                      <v-text-field
+                        v-model="enrollment.address.permanent.zipCode"
+                        :readonly="sameAsCurrentAddress"
+                      ></v-text-field>
+                    </v-col>
+                  </v-row>
+                </v-col>
+              </v-row>
+            </v-col>
+
+            <v-col cols="12">
+              <v-row>
                 <v-col cols="3">
                   <v-row no-gutters>
                     <InputLabel
                       class="text-capitalize"
-                      title="Country"
+                      title="Barangay"
                       required
                     />
                     <v-col cols="12">
-                      <v-text-field
-                        v-model="enrollment.address.permanent.country"
+                      <v-combobox
+                        v-model="enrollment.address.permanent.barangay"
                         :rules="[requiredRule]"
                         :readonly="sameAsCurrentAddress"
+                        :items="permanentBarangays"
+                        item-title="name"
+                        item-value="code"
+                        :return-object="false"
+                        :hide-no-data="false"
+                        :disabled="
+                          !enrollment.address.permanent.municipalityCity ||
+                          sameAsCurrentAddress
+                        "
+                        :loading="loadingPermanentBarangay"
+                      >
+                        <template v-slot:no-data>
+                          <v-list-item>
+                            <v-list-item-title>
+                              No results matching "<strong>search</strong>".
+                              Press
+                              <kbd>enter</kbd> to create a new one
+                            </v-list-item-title>
+                          </v-list-item>
+                        </template>
+                      </v-combobox>
+                    </v-col>
+                  </v-row>
+                </v-col>
+
+                <v-col cols="3">
+                  <v-row no-gutters>
+                    <InputLabel class="text-capitalize" title="Street" />
+                    <v-col cols="12">
+                      <v-text-field
+                        v-model="enrollment.address.permanent.streetName"
+                        :readonly="sameAsCurrentAddress"
                       ></v-text-field>
                     </v-col>
                   </v-row>
                 </v-col>
 
-                <v-col cols="2">
+                <v-col cols="3">
                   <v-row no-gutters>
-                    <InputLabel
-                      class="text-capitalize"
-                      title="Zip Code"
-                      required
-                    />
+                    <InputLabel class="text-capitalize" title="House No." />
                     <v-col cols="12">
                       <v-text-field
-                        v-model="enrollment.address.permanent.zipCode"
-                        :rules="[requiredRule]"
+                        v-model="enrollment.address.permanent.houseNumber"
                         :readonly="sameAsCurrentAddress"
                       ></v-text-field>
                     </v-col>
@@ -1332,21 +1373,21 @@
                 </v-col>
               </v-row>
             </v-col>
-          </v-row>
-        </v-col>
 
-        <v-col cols="8">
-          <v-row no-gutters>
-            <InputLabel
-              class="text-capitalize"
-              title="Last School Attended"
-              :required="!isKindergarten"
-            />
-            <v-col cols="12">
-              <v-text-field
-                v-model="enrollment.returningLearnerInfo.lastSchoolAttended"
-                :rules="isKindergarten ? [] : [requiredRule]"
-              ></v-text-field>
+            <v-col cols="6">
+              <v-row no-gutters>
+                <InputLabel
+                  class="text-capitalize"
+                  title="Last School Attended"
+                  :required="!isKindergarten"
+                />
+                <v-col cols="12">
+                  <v-text-field
+                    v-model="enrollment.returningLearnerInfo.lastSchoolAttended"
+                    :rules="isKindergarten ? [] : [requiredRule]"
+                  ></v-text-field>
+                </v-col>
+              </v-row>
             </v-col>
           </v-row>
         </v-col>
@@ -1609,43 +1650,73 @@ watchEffect(() => {
 });
 
 const currentCitiesMunicipalities = ref<Array<Record<string, any>>>([]);
-const selectedCurrentProvince = computed(() => {
-  const province = currentProvinces.value.find(
-    (p) => p.name === enrollment.value.address.current.province
-  );
 
-  if (!province) {
-    return "";
+const loadingCurrentCityMun = ref(false);
+
+const getCurrentCityMun = debounce(async () => {
+  try {
+    loadingCurrentCityMun.value = true;
+    const res = await getAllPSGC({
+      type: "City",
+      prefix: enrollment.value.address.current.province
+        ? enrollment.value.address.current.province.slice(0, 5)
+        : "",
+      limit: 1700,
+    });
+
+    currentCitiesMunicipalities.value = res.items.map((i: any) => ({
+      ...i,
+      props: {
+        subtitle: `${i.region}${i.province ? ` - ${i.province}` : ""}`,
+      },
+    }));
+  } catch (error) {
+    currentCitiesMunicipalities.value = [];
+  } finally {
+    loadingCurrentCityMun.value = false;
+  }
+}, 500);
+
+watch(
+  () => enrollment.value.address.current.province,
+  () => {
+    getCurrentCityMun();
   }
+);
+
+getCurrentCityMun();
 
-  return province.code;
+// Current Address - Barangays
+const currentBarangays = ref<Array<Record<string, any>>>([]);
+const selectedCurrentCityMun = computed(() => {
+  return enrollment.value.address.current.municipalityCity || "";
 });
 
-const loadingCurrentCityMun = ref(false);
+const loadingCurrentBarangay = ref(false);
 
-const getCurrentCityMun = debounce(async () => {
-  if (!selectedCurrentProvince.value) {
-    currentCitiesMunicipalities.value = [];
+const getCurrentBarangays = debounce(async () => {
+  if (!selectedCurrentCityMun.value) {
+    currentBarangays.value = [];
     return;
   }
 
   try {
-    loadingCurrentCityMun.value = true;
+    loadingCurrentBarangay.value = true;
     const res = await getAllPSGC({
-      type: "City",
-      prefix: selectedCurrentProvince.value.slice(0, 5),
-      limit: 2000,
+      type: "Bgy",
+      prefix: selectedCurrentCityMun.value.slice(0, 7),
+      limit: 1000,
     });
-    currentCitiesMunicipalities.value = res.items;
+    currentBarangays.value = res.items;
   } catch (error) {
-    currentCitiesMunicipalities.value = [];
+    currentBarangays.value = [];
   } finally {
-    loadingCurrentCityMun.value = false;
+    loadingCurrentBarangay.value = false;
   }
 }, 500);
 
-watch(selectedCurrentProvince, () => {
-  getCurrentCityMun();
+watch(selectedCurrentCityMun, () => {
+  getCurrentBarangays();
 });
 
 // Permanent Address - Province and City/Municipality
@@ -1670,46 +1741,310 @@ watchEffect(() => {
 });
 
 const permanentCitiesMunicipalities = ref<Array<Record<string, any>>>([]);
-const selectedPermanentProvince = computed(() => {
-  const province = permanentProvinces.value.find(
-    (p) => p.name === enrollment.value.address.permanent.province
-  );
 
-  if (!province) {
-    return "";
+const loadingPermanentCityMun = ref(false);
+
+const getPermanentCityMun = debounce(async () => {
+  try {
+    loadingPermanentCityMun.value = true;
+    const res = await getAllPSGC({
+      type: "City",
+      prefix: enrollment.value.address.permanent.province
+        ? enrollment.value.address.permanent.province.slice(0, 5)
+        : "",
+      limit: 1700,
+    });
+
+    permanentCitiesMunicipalities.value = res.items.map((i: any) => ({
+      ...i,
+      props: {
+        subtitle: `${i.region}${i.province ? ` - ${i.province}` : ""}`,
+      },
+    }));
+  } catch (error) {
+    permanentCitiesMunicipalities.value = [];
+  } finally {
+    loadingPermanentCityMun.value = false;
+  }
+}, 500);
+
+watch(
+  () => enrollment.value.address.permanent.province,
+  () => {
+    getPermanentCityMun();
   }
+);
+
+getPermanentCityMun();
 
-  return province.code;
+// Permanent Address - Barangays
+const permanentBarangays = ref<Array<Record<string, any>>>([]);
+const selectedPermanentCityMun = computed(() => {
+  return enrollment.value.address.permanent.municipalityCity || "";
 });
 
-const loadingPermanentCityMun = ref(false);
+const loadingPermanentBarangay = ref(false);
 
-const getPermanentCityMun = debounce(async () => {
-  if (!selectedPermanentProvince.value) {
-    permanentCitiesMunicipalities.value = [];
+const getPermanentBarangays = debounce(async () => {
+  if (!selectedPermanentCityMun.value) {
+    permanentBarangays.value = [];
     return;
   }
 
   try {
-    loadingPermanentCityMun.value = true;
+    loadingPermanentBarangay.value = true;
     const res = await getAllPSGC({
-      type: "City",
-      prefix: selectedPermanentProvince.value.slice(0, 5),
-      limit: 2000,
+      type: "Bgy",
+      prefix: selectedPermanentCityMun.value.slice(0, 7),
+      limit: 1000,
     });
-    permanentCitiesMunicipalities.value = res.items;
+    permanentBarangays.value = res.items;
   } catch (error) {
-    permanentCitiesMunicipalities.value = [];
+    permanentBarangays.value = [];
   } finally {
-    loadingPermanentCityMun.value = false;
+    loadingPermanentBarangay.value = false;
   }
 }, 500);
 
-watch(selectedPermanentProvince, () => {
-  getPermanentCityMun();
+watch(selectedPermanentCityMun, () => {
+  getPermanentBarangays();
 });
 
-const { getAll } = useProgram();
+const birthCitiesMunicipalities = ref<Array<Record<string, any>>>([]);
+
+const loadingBirthCityMun = ref(false);
+
+const getBirthCityMun = debounce(async () => {
+  try {
+    loadingBirthCityMun.value = true;
+    const res = await getAllPSGC({
+      type: "City",
+      limit: 1700,
+    });
+
+    birthCitiesMunicipalities.value = res.items.map((i: any) => ({
+      ...i,
+      props: {
+        subtitle: `${i.region}${i.province ? ` - ${i.province}` : ""}`,
+      },
+    }));
+  } catch (error) {
+    birthCitiesMunicipalities.value = [];
+  } finally {
+    loadingBirthCityMun.value = false;
+  }
+}, 500);
+
+getBirthCityMun();
+
+// Auto-fill place of birth city/municipality name when selected
+watch(
+  () => enrollment.value.learnerInfo.placeOfBirth.cityMunicipality,
+  (cityMunCode) => {
+    if (!cityMunCode) {
+      enrollment.value.learnerInfo.placeOfBirth.cityMunicipalityName = "";
+      return;
+    }
+
+    const cityMun = birthCitiesMunicipalities.value.find(
+      (c) => c.code === cityMunCode
+    );
+    if (cityMun) {
+      enrollment.value.learnerInfo.placeOfBirth.cityMunicipalityName =
+        cityMun.name;
+      enrollment.value.learnerInfo.placeOfBirth.province = cityMun.province
+        ? cityMun.code.slice(0, 5) + "00000"
+        : "";
+      enrollment.value.learnerInfo.placeOfBirth.provinceName =
+        cityMun.province ?? "";
+      enrollment.value.learnerInfo.placeOfBirth.region =
+        cityMun.code.slice(0, 2) + "00000000";
+      enrollment.value.learnerInfo.placeOfBirth.regionName = cityMun.region;
+    }
+  }
+);
+
+// Auto-fill current address province name when province is selected
+watch(
+  () => enrollment.value.address.current.province,
+  (provinceCode) => {
+    if (!provinceCode) {
+      enrollment.value.address.current.provinceName = "";
+      enrollment.value.address.current.municipalityCity = "";
+      enrollment.value.address.current.municipalityCityName = "";
+      enrollment.value.address.current.barangay = "";
+      enrollment.value.address.current.barangayName = "";
+      enrollment.value.address.current.streetName = "";
+      enrollment.value.address.current.houseNumber = "";
+      return;
+    }
+
+    // Clear dependent fields when province changes
+    enrollment.value.address.current.municipalityCity = "";
+    enrollment.value.address.current.municipalityCityName = "";
+    enrollment.value.address.current.barangay = "";
+    enrollment.value.address.current.barangayName = "";
+    enrollment.value.address.current.streetName = "";
+    enrollment.value.address.current.houseNumber = "";
+
+    const province = currentProvinces.value.find(
+      (p) => p.code === provinceCode
+    );
+    if (province) {
+      enrollment.value.address.current.provinceName = province.name;
+    }
+  }
+);
+
+// Auto-fill current address city/municipality, province, and region when selected
+watch(
+  () => enrollment.value.address.current.municipalityCity,
+  (cityMunCode) => {
+    if (!cityMunCode) {
+      enrollment.value.address.current.municipalityCityName = "";
+      enrollment.value.address.current.barangay = "";
+      enrollment.value.address.current.barangayName = "";
+      enrollment.value.address.current.streetName = "";
+      enrollment.value.address.current.houseNumber = "";
+      return;
+    }
+
+    // Clear dependent fields when city/municipality changes
+    enrollment.value.address.current.barangay = "";
+    enrollment.value.address.current.barangayName = "";
+    enrollment.value.address.current.streetName = "";
+    enrollment.value.address.current.houseNumber = "";
+
+    const cityMun = currentCitiesMunicipalities.value.find(
+      (c) => c.code === cityMunCode
+    );
+    if (cityMun) {
+      enrollment.value.address.current.municipalityCityName = cityMun.name;
+      enrollment.value.address.current.province = cityMun.province
+        ? cityMun.code.slice(0, 5) + "00000"
+        : "";
+      enrollment.value.address.current.provinceName = cityMun.province ?? "";
+      enrollment.value.address.current.region =
+        cityMun.code.slice(0, 2) + "00000000";
+      enrollment.value.address.current.regionName = cityMun.region;
+    }
+  }
+);
+
+// Auto-fill current address barangay name when selected
+watch(
+  () => enrollment.value.address.current.barangay,
+  (barangayCode) => {
+    if (!barangayCode) {
+      enrollment.value.address.current.barangayName = "";
+      return;
+    }
+
+    const barangay = currentBarangays.value.find(
+      (b) => b.code === barangayCode
+    );
+    if (barangay) {
+      enrollment.value.address.current.barangayName = barangay.name;
+    }
+  }
+);
+
+// Auto-fill permanent address province name when province is selected
+watch(
+  () => enrollment.value.address.permanent.province,
+  (provinceCode) => {
+    // Don't clear fields if permanent address is same as current address
+    if (sameAsCurrentAddress.value) {
+      return;
+    }
+
+    if (!provinceCode) {
+      enrollment.value.address.permanent.provinceName = "";
+      enrollment.value.address.permanent.municipalityCity = "";
+      enrollment.value.address.permanent.municipalityCityName = "";
+      enrollment.value.address.permanent.barangay = "";
+      enrollment.value.address.permanent.barangayName = "";
+      enrollment.value.address.permanent.streetName = "";
+      enrollment.value.address.permanent.houseNumber = "";
+      return;
+    }
+
+    // Clear dependent fields when province changes
+    enrollment.value.address.permanent.municipalityCity = "";
+    enrollment.value.address.permanent.municipalityCityName = "";
+    enrollment.value.address.permanent.barangay = "";
+    enrollment.value.address.permanent.barangayName = "";
+    enrollment.value.address.permanent.streetName = "";
+    enrollment.value.address.permanent.houseNumber = "";
+
+    const province = permanentProvinces.value.find(
+      (p) => p.code === provinceCode
+    );
+    if (province) {
+      enrollment.value.address.permanent.provinceName = province.name;
+    }
+  }
+);
+
+// Auto-fill permanent address city/municipality, province, and region when selected
+watch(
+  () => enrollment.value.address.permanent.municipalityCity,
+  (cityMunCode) => {
+    // Don't clear fields if permanent address is same as current address
+    if (sameAsCurrentAddress.value) {
+      return;
+    }
+
+    if (!cityMunCode) {
+      enrollment.value.address.permanent.municipalityCityName = "";
+      enrollment.value.address.permanent.barangay = "";
+      enrollment.value.address.permanent.barangayName = "";
+      enrollment.value.address.permanent.streetName = "";
+      enrollment.value.address.permanent.houseNumber = "";
+      return;
+    }
+
+    // Clear dependent fields when city/municipality changes
+    enrollment.value.address.permanent.barangay = "";
+    enrollment.value.address.permanent.barangayName = "";
+    enrollment.value.address.permanent.streetName = "";
+    enrollment.value.address.permanent.houseNumber = "";
+
+    const cityMun = permanentCitiesMunicipalities.value.find(
+      (c) => c.code === cityMunCode
+    );
+    if (cityMun) {
+      enrollment.value.address.permanent.municipalityCityName = cityMun.name;
+      enrollment.value.address.permanent.province = cityMun.province
+        ? cityMun.code.slice(0, 5) + "00000"
+        : "";
+      enrollment.value.address.permanent.provinceName = cityMun.province ?? "";
+      enrollment.value.address.permanent.region =
+        cityMun.code.slice(0, 2) + "00000000";
+      enrollment.value.address.permanent.regionName = cityMun.region;
+    }
+  }
+);
+
+// Auto-fill permanent address barangay name when selected
+watch(
+  () => enrollment.value.address.permanent.barangay,
+  (barangayCode) => {
+    if (!barangayCode) {
+      enrollment.value.address.permanent.barangayName = "";
+      return;
+    }
+
+    const barangay = permanentBarangays.value.find(
+      (b) => b.code === barangayCode
+    );
+    if (barangay) {
+      enrollment.value.address.permanent.barangayName = barangay.name;
+    }
+  }
+);
+
+const { getAll: getSpecialPrograms } = useProgram();
 
 const programs = ref<Array<Record<string, any>>>([]);
 
@@ -1718,7 +2053,7 @@ const enrollmentSchool = computed(() => enrollment.value.school);
 const { data: getPrograms } = await useLazyAsyncData(
   `get-programs-as-options-enrollment-form-${enrollment.value.school}`,
   () =>
-    getAll({
+    getSpecialPrograms({
       limit: 20,
       school: enrollment.value.school,
     }),
@@ -1756,19 +2091,11 @@ watchEffect(() => {
 });
 
 const hasSpecialProgram = computed(() => {
-  if (!programs.value.length) {
-    return false;
-  }
-
-  const juniorHigh = ["grade-7", "grade-8", "grade-9", "grade-10"];
-
-  const isJuniorHigh = juniorHigh.includes(enrollment.value.gradeLevel);
-
-  if (isJuniorHigh && programs.value.length > 0) {
-    return true;
-  }
+  const program = programs.value.filter((i) =>
+    i.gradeLevels.includes(enrollment.value.gradeLevel)
+  );
 
-  return false;
+  return program.length > 0;
 });
 
 const schools = ref<TSchool[]>([]);
@@ -1871,7 +2198,9 @@ watch(selectedSchool, (val) => {
 watch(
   () => enrollment.value.gradeLevel,
   () => {
-    enrollment.value.returningLearnerInfo.lastGradeLevelCompleted = "";
+    if (enrollment.value.returningLearnerInfo) {
+      enrollment.value.returningLearnerInfo.lastGradeLevelCompleted = "";
+    }
   }
 );
 
@@ -1953,11 +2282,16 @@ const allowedLastGradeLevels = computed(() => {
   const currentIndex = gradeOrder.indexOf(currentGrade);
   if (currentIndex === -1) return gradeLevels;
 
+  // Special case for grade-1: include both kindergarten and kinder
+  let startIndex;
+  if (currentGrade === "grade-1") {
+    startIndex = 0; // Include from kindergarten
+  } else {
+    startIndex = Math.max(0, currentIndex - 1);
+  }
+
   // Get grades that are equal to or one level below current grade
-  const allowedGrades = gradeOrder.slice(
-    Math.max(0, currentIndex - 1),
-    currentIndex + 1
-  );
+  const allowedGrades = gradeOrder.slice(startIndex, currentIndex + 1);
 
   // Filter gradeLevels to only include allowed grades
   return gradeLevels.filter((level) => {
@@ -2064,7 +2398,12 @@ watch(enrollment, (val) => {
     enrollment.value.learnerInfo.lastName = "";
     enrollment.value.learnerInfo.extensionName = "";
     enrollment.value.learnerInfo.birthDate = "";
-    enrollment.value.learnerInfo.placeOfBirth = "";
+    enrollment.value.learnerInfo.placeOfBirth.region = "";
+    enrollment.value.learnerInfo.placeOfBirth.regionName = "";
+    enrollment.value.learnerInfo.placeOfBirth.province = "";
+    enrollment.value.learnerInfo.placeOfBirth.provinceName = "";
+    enrollment.value.learnerInfo.placeOfBirth.cityMunicipality = "";
+    enrollment.value.learnerInfo.placeOfBirth.cityMunicipalityName = "";
     enrollment.value.learnerInfo.sex = "";
     enrollment.value.learnerInfo.motherTongue = "";
     enrollment.value.learnerInfo.age = 0;
@@ -2088,16 +2427,26 @@ watch(enrollment, (val) => {
     enrollment.value.address.current.streetName = "";
     enrollment.value.address.current.sitio = "";
     enrollment.value.address.current.barangay = "";
+    enrollment.value.address.current.barangayName = "";
     enrollment.value.address.current.municipalityCity = "";
+    enrollment.value.address.current.municipalityCityName = "";
     enrollment.value.address.current.province = "";
+    enrollment.value.address.current.provinceName = "";
+    enrollment.value.address.current.region = "";
+    enrollment.value.address.current.regionName = "";
     enrollment.value.address.current.country = "Philippines";
     enrollment.value.address.current.zipCode = "";
     enrollment.value.address.permanent.houseNumber = "";
     enrollment.value.address.permanent.streetName = "";
     enrollment.value.address.permanent.sitio = "";
     enrollment.value.address.permanent.barangay = "";
+    enrollment.value.address.permanent.barangayName = "";
     enrollment.value.address.permanent.municipalityCity = "";
+    enrollment.value.address.permanent.municipalityCityName = "";
     enrollment.value.address.permanent.province = "";
+    enrollment.value.address.permanent.provinceName = "";
+    enrollment.value.address.permanent.region = "";
+    enrollment.value.address.permanent.regionName = "";
     enrollment.value.address.permanent.country = "Philippines";
     enrollment.value.address.permanent.zipCode = "";
   }
@@ -2113,10 +2462,20 @@ watchEffect(() => {
       enrollment.value.address.current.sitio;
     enrollment.value.address.permanent.barangay =
       enrollment.value.address.current.barangay;
+    enrollment.value.address.permanent.barangayName =
+      enrollment.value.address.current.barangayName;
     enrollment.value.address.permanent.municipalityCity =
       enrollment.value.address.current.municipalityCity;
+    enrollment.value.address.permanent.municipalityCityName =
+      enrollment.value.address.current.municipalityCityName;
     enrollment.value.address.permanent.province =
       enrollment.value.address.current.province;
+    enrollment.value.address.permanent.provinceName =
+      enrollment.value.address.current.provinceName;
+    enrollment.value.address.permanent.region =
+      enrollment.value.address.current.region;
+    enrollment.value.address.permanent.regionName =
+      enrollment.value.address.current.regionName;
     enrollment.value.address.permanent.country =
       enrollment.value.address.current.country || "Philippines";
     enrollment.value.address.permanent.zipCode =
@@ -2126,8 +2485,13 @@ watchEffect(() => {
     enrollment.value.address.permanent.streetName = "";
     enrollment.value.address.permanent.sitio = "";
     enrollment.value.address.permanent.barangay = "";
+    enrollment.value.address.permanent.barangayName = "";
     enrollment.value.address.permanent.municipalityCity = "";
+    enrollment.value.address.permanent.municipalityCityName = "";
     enrollment.value.address.permanent.province = "";
+    enrollment.value.address.permanent.provinceName = "";
+    enrollment.value.address.permanent.region = "";
+    enrollment.value.address.permanent.regionName = "";
     enrollment.value.address.permanent.country = "Philippines";
     enrollment.value.address.permanent.zipCode = "";
   }