From 5895bbc9f2b043fbfb8f59fa885deb952fa5823f Mon Sep 17 00:00:00 2001
From: "STW_TTTY\\stwtt" <trx.setthawut@gmail.com>
Date: Tue, 14 May 2024 18:13:03 +0700
Subject: [PATCH] no message

---
 src/api/manage/api.person.ts                  |   8 +
 .../components/personal/08ListProvince.vue    |  48 +--
 .../components/personal/DialogForm.vue        |   3 +-
 .../personal/province/01_District.vue         | 307 ++++++++++++++++++
 .../personal/province/02_SubDistrict.vue      | 297 +++++++++++++++++
 .../interface/response/personal/personal.ts   |  19 +-
 src/modules/01_metadataNew/router.ts          |  24 ++
 7 files changed, 674 insertions(+), 32 deletions(-)
 create mode 100644 src/modules/01_metadataNew/components/personal/province/01_District.vue
 create mode 100644 src/modules/01_metadataNew/components/personal/province/02_SubDistrict.vue

diff --git a/src/api/manage/api.person.ts b/src/api/manage/api.person.ts
index 048c08977..26f48d0eb 100644
--- a/src/api/manage/api.person.ts
+++ b/src/api/manage/api.person.ts
@@ -22,6 +22,10 @@ const orgGender = `${env.API_URI}/org/metadata/gender/`;
 const orgReligion = `${env.API_URI}/org/metadata/religion/`;
 const orgEducationLevel = `${env.API_URI}/org/metadata/educationLevel/`;
 
+const orgProvince = `${env.API_URI}/org/metadata/province/`;
+const orgDistrict = `${env.API_URI}/org/metadata/district/`;
+const orgSubDistrict = `${env.API_URI}/org/metadata/subDistrict/`;
+
 export default {
   person: `${person}person`,
 
@@ -129,4 +133,8 @@ export default {
   orgReligionId: (id: string) => `${orgReligion}${id}`,
   orgEducationLevel,
   orgEducationLevelId: (id: string) => `${orgEducationLevel}${id}`,
+
+  orgProvince,
+  orgDistrict,
+  orgSubDistrict,
 };
diff --git a/src/modules/01_metadataNew/components/personal/08ListProvince.vue b/src/modules/01_metadataNew/components/personal/08ListProvince.vue
index 8016e7c20..c21ad28ed 100644
--- a/src/modules/01_metadataNew/components/personal/08ListProvince.vue
+++ b/src/modules/01_metadataNew/components/personal/08ListProvince.vue
@@ -9,6 +9,7 @@ import DialogForm from "@/modules/01_metadataNew/components/personal/DialogForm.
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+const router = useRouter()
 const store = usePersonalDataStore();
 const mixin = useCounterMixin();
 const { dialogRemove, messageError, showLoader, hideLoader, success } = mixin;
@@ -24,17 +25,6 @@ const columns = [
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
-  {
-    name: "rank",
-    align: "left",
-    label: "ลำดับ",
-    sortable: true,
-    field: "rank",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
   {
     name: "createdAt",
     align: "left",
@@ -74,13 +64,12 @@ const $q = useQuasar();
 const editId = ref<string>("");
 const filterKeyword = ref<string>("");
 const dialog = ref<boolean>(false);
-const educationLevel = ref<string>("");
-const educationRank = ref<number>();
+const province = ref<string>("");
+
 const dialogStatus = ref<string>("");
-const personalName = ref<string>("ระดับการศึกษา");
+const personalName = ref<string>("จังหวัด");
 const visibleColumns = ref<string[]>([
   "name",
-  "rank",
   "createdAt",
   "lastUpdatedAt",
   "lastUpdateFullName",
@@ -89,7 +78,7 @@ const visibleColumns = ref<string[]>([
 async function fetchData() {
   showLoader();
   await http
-    .get(config.API.orgEducationLevel)
+    .get(config.API.orgProvince)
     .then(async (res) => {
       store.save(res.data.result);
     })
@@ -103,9 +92,8 @@ async function fetchData() {
 
 async function addData() {
   await http
-    .post(config.API.orgEducationLevel, {
-      name: educationLevel.value,
-      rank: educationRank.value,
+    .post(config.API.orgProvince, {
+      name: province.value,
     })
     .then(() => {
       fetchData();
@@ -121,9 +109,8 @@ async function addData() {
 
 async function editData(id: string) {
   await http
-    .put(config.API.orgEducationLevelId(id), {
-      name: educationLevel.value,
-      rank: educationRank.value,
+    .put(config.API.orgProvince+`${id}`, {
+      name: province.value,
     })
     .then(() => {
       fetchData();
@@ -139,7 +126,7 @@ async function editData(id: string) {
 
 async function deleteData(id: string) {
   await http
-    .delete(config.API.orgEducationLevelId(id))
+    .delete(config.API.orgProvince+`${id}`)
     .then(() => {
       fetchData();
       success($q, "ลบข้อมูลสำเร็จ");
@@ -152,6 +139,10 @@ async function deleteData(id: string) {
     });
 }
 
+function nextPage(id:string){
+  router.push(`/master-data/personal/district/${id}`)
+}
+
 onMounted(async () => {
   fetchData();
 });
@@ -168,8 +159,7 @@ onMounted(async () => {
         () => {
           dialogStatus = 'create';
           dialog = true;
-          educationLevel = '';
-          educationRank = undefined;
+          province = '';
         }
       "
     >
@@ -218,7 +208,7 @@ onMounted(async () => {
     </template>
     <template v-slot:body="props">
       <q-tr :props="props" class="cursor-pointer">
-        <q-td v-for="col in props.cols" :key="col.id">
+        <q-td v-for="col in props.cols" :key="col.id" @click="nextPage(props.row.id)">
           <div>
             {{ col.value }}
           </div>
@@ -238,8 +228,7 @@ onMounted(async () => {
                 dialogStatus = 'edit';
                 dialog = true;
                 editId = props.row.id;
-                educationLevel = props.row.name;
-                educationRank = props.row.rank;
+                province = props.row.name;
               }
             "
           >
@@ -266,9 +255,8 @@ onMounted(async () => {
   </d-table>
 
   <DialogForm
-    v-model:educationRank="educationRank"
     v-model:dialog="dialog"
-    v-model:data="educationLevel"
+    v-model:data="province"
     v-model:personalName="personalName"
     v-model:dialogStatus="dialogStatus"
     v-model:editId="editId"
diff --git a/src/modules/01_metadataNew/components/personal/DialogForm.vue b/src/modules/01_metadataNew/components/personal/DialogForm.vue
index 0845140a6..72e086dfe 100644
--- a/src/modules/01_metadataNew/components/personal/DialogForm.vue
+++ b/src/modules/01_metadataNew/components/personal/DialogForm.vue
@@ -81,6 +81,7 @@ async function onSubmit() {
               v-model="data"
               :label="personalName"
               dense
+              class="inputgreen"
               lazy-rules
               borderless
               :rules="[(val) => val.length > 0 || 'กรุณากรอก' + personalName]"
@@ -108,7 +109,7 @@ async function onSubmit() {
             />
           </div>
         </q-card-section>
-
+        <q-separator color="grey-4" />
         <q-card-actions align="right">
           <q-btn
             id="onSubmit"
diff --git a/src/modules/01_metadataNew/components/personal/province/01_District.vue b/src/modules/01_metadataNew/components/personal/province/01_District.vue
new file mode 100644
index 000000000..fd3e8464d
--- /dev/null
+++ b/src/modules/01_metadataNew/components/personal/province/01_District.vue
@@ -0,0 +1,307 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import type { QTableProps } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import { useRouter,useRoute } from "vue-router";
+import { usePersonalDataStore } from "@/modules/01_metadataNew/stores/personalStore";
+import { useQuasar } from "quasar";
+import DialogForm from "@/modules/01_metadataNew/components/personal/DialogForm.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type{ FormDistrict } from '@/modules/01_metadataNew/interface/response/personal/personal'
+
+const router = useRouter();
+const route = useRoute();
+const id = ref<string>(route.params.id as string)
+const store = usePersonalDataStore();
+const mixin = useCounterMixin();
+const { dialogRemove, messageError, showLoader, hideLoader, success,date2Thai } = mixin;
+const columns = [
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อ",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่สร้าง",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastUpdatedAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "lastUpdatedAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastUpdateFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "lastUpdateFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+] as const satisfies QTableProps["columns"];
+
+const $q = useQuasar();
+const editId = ref<string>("");
+const filterKeyword = ref<string>("");
+const dialog = ref<boolean>(false);
+const district = ref<string>("");
+const rows = ref<FormDistrict[]>([])
+
+const dialogStatus = ref<string>("");
+const personalName = ref<string>("อำเภอ");
+const visibleColumns = ref<string[]>([
+  "name",
+  "createdAt",
+  "lastUpdatedAt",
+  "lastUpdateFullName",
+]);
+
+async function fetchData() {
+  showLoader();
+  await http
+    .get(config.API.orgProvince+`${id.value}`)
+    .then(async (res) => {
+      const data = res.data.result.districts
+      const list = data.map((e:any) => ({
+      ...e,
+      createdAt: e.createdAt ? date2Thai(e.createdAt) : "",
+      lastUpdatedAt: e.lastUpdatedAt ? date2Thai(e.lastUpdatedAt) : "",
+    }));
+      rows.value = list
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function addData() {
+  await http
+    .post(config.API.orgDistrict, {
+      name: district.value,
+      provinceId:id.value
+    })
+    .then(() => {
+      fetchData();
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function editData(id: string) {
+  await http
+    .put(config.API.orgDistrict + `${id}`, {
+      name: district.value,
+    })
+    .then(() => {
+      fetchData();
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function deleteData(id: string) {
+  await http
+    .delete(config.API.orgDistrict + `${id}`)
+    .then(() => {
+      fetchData();
+      success($q, "ลบข้อมูลสำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function nextPage(idSub: string) {
+  router.push(`/master-data/personal/sub-district/${id.value}/${idSub}`);
+}
+
+onMounted(async () => {
+  fetchData();
+});
+</script>
+
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    <q-btn
+      icon="mdi-arrow-left"
+      unelevated
+      round
+      dense
+      flat
+      color="primary"
+      class="q-mr-sm"
+      @click="router.go(-1)"
+    />
+    เขต/อำเภอ
+  </div>
+
+  
+  <q-card flat bordered>
+    <div class="q-pa-md">
+      <q-toolbar class="q-pa-none">
+        <q-btn
+          flat
+          round
+          color="primary"
+          icon="add"
+          @click.stop="
+            () => {
+              dialogStatus = 'create';
+              dialog = true;
+              district = '';
+            }
+          "
+        >
+          <q-tooltip> เพิ่มข้อมูล </q-tooltip>
+        </q-btn>
+        <q-space />
+        <div class="row q-gutter-sm">
+          <q-input
+            outlined
+            dense
+            v-model="filterKeyword"
+            label="ค้นหา"
+          ></q-input>
+          <q-select
+            v-model="visibleColumns"
+            multiple
+            outlined
+            dense
+            options-dense
+            :display-value="$q.lang.table.columns"
+            emit-value
+            map-options
+            :options="columns"
+            option-value="name"
+            options-cover
+            style="min-width: 150px"
+          />
+        </div>
+      </q-toolbar>
+
+      <d-table
+        ref="table"
+        :columns="columns"
+        :rows="rows"
+        :filter="filterKeyword"
+        row-key="name"
+        flat
+        bordered
+        :paging="true"
+        dense
+        class="custom-header-table"
+        :visible-columns="visibleColumns"
+      >
+        <template v-slot:header="props">
+          <q-tr :props="props">
+            <q-th v-for="col in props.cols" :key="col.name" :props="props">
+              <span class="text-weight-medium">{{ col.label }}</span>
+            </q-th>
+            <q-th auto-width />
+          </q-tr>
+        </template>
+        <template v-slot:body="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.id"
+              @click="nextPage(props.row.id)"
+            >
+              <div>
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                color="edit"
+                flat
+                dense
+                round
+                class="q-mr-xs"
+                size="12px"
+                icon="edit"
+                clickable
+                @click.stop="
+                  () => {
+                    dialogStatus = 'edit';
+                    dialog = true;
+                    editId = props.row.id;
+                    district = props.row.name;
+                  }
+                "
+              >
+                <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+              </q-btn>
+              <q-btn
+                color="red"
+                flat
+                dense
+                round
+                size="12px"
+                icon="mdi-delete"
+                clickable
+                @click.stop="
+                  dialogRemove($q, async () => await deleteData(props.row.id))
+                "
+                v-close-popup
+              >
+                <q-tooltip>ลบข้อมูล</q-tooltip>
+              </q-btn>
+            </q-td>
+          </q-tr>
+        </template>
+      </d-table>
+    </div>
+  </q-card>
+
+  <DialogForm
+    v-model:dialog="dialog"
+    v-model:data="district"
+    v-model:personalName="personalName"
+    v-model:dialogStatus="dialogStatus"
+    v-model:editId="editId"
+    :addData="addData"
+    :fetch-data="fetchData"
+    :edit-data="editData"
+  />
+</template>
diff --git a/src/modules/01_metadataNew/components/personal/province/02_SubDistrict.vue b/src/modules/01_metadataNew/components/personal/province/02_SubDistrict.vue
new file mode 100644
index 000000000..1f6f68733
--- /dev/null
+++ b/src/modules/01_metadataNew/components/personal/province/02_SubDistrict.vue
@@ -0,0 +1,297 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import type { QTableProps } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import { useRouter,useRoute } from "vue-router";
+import { usePersonalDataStore } from "@/modules/01_metadataNew/stores/personalStore";
+import { useQuasar } from "quasar";
+import DialogForm from "@/modules/01_metadataNew/components/personal/DialogForm.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const router = useRouter();
+const route = useRoute();
+const id = ref<string>(route.params.id as string)
+const store = usePersonalDataStore();
+const mixin = useCounterMixin();
+const { dialogRemove, messageError, showLoader, hideLoader, success } = mixin;
+const columns = [
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อ",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่สร้าง",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastUpdatedAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "lastUpdatedAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastUpdateFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "lastUpdateFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+] as const satisfies QTableProps["columns"];
+
+const $q = useQuasar();
+const editId = ref<string>("");
+const filterKeyword = ref<string>("");
+const dialog = ref<boolean>(false);
+const province = ref<string>("");
+
+const dialogStatus = ref<string>("");
+const personalName = ref<string>("อำเภอ");
+const visibleColumns = ref<string[]>([
+  "name",
+  "createdAt",
+  "lastUpdatedAt",
+  "lastUpdateFullName",
+]);
+
+async function fetchData() {
+  showLoader();
+  await http
+    .get(config.API.orgDistrict+`${id.value}`)
+    .then(async (res) => {
+      store.save(res.data.result);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function addData() {
+  await http
+    .post(config.API.orgDistrict, {
+      name: province.value,
+    })
+    .then(() => {
+      fetchData();
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function editData(id: string) {
+  await http
+    .put(config.API.orgDistrict + `${id}`, {
+      name: province.value,
+    })
+    .then(() => {
+      fetchData();
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function deleteData(id: string) {
+  await http
+    .delete(config.API.orgDistrict + `${id}`)
+    .then(() => {
+      fetchData();
+      success($q, "ลบข้อมูลสำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function nextPage(id: string) {
+  router.push(`/master-data/personal/sub-district/${id}`);
+}
+
+onMounted(async () => {
+  fetchData();
+});
+</script>
+
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    <q-btn
+      icon="mdi-arrow-left"
+      unelevated
+      round
+      dense
+      flat
+      color="primary"
+      class="q-mr-sm"
+      @click="router.go(-1)"
+    />
+    แขวง/ตำบล
+  </div>
+
+  
+  <q-card flat bordered>
+    <div class="q-pa-md">
+      <q-toolbar class="q-pa-none">
+        <q-btn
+          flat
+          round
+          color="primary"
+          icon="add"
+          @click.stop="
+            () => {
+              dialogStatus = 'create';
+              dialog = true;
+              province = '';
+            }
+          "
+        >
+          <q-tooltip> เพิ่มข้อมูล </q-tooltip>
+        </q-btn>
+        <q-space />
+        <div class="row q-gutter-sm">
+          <q-input
+            outlined
+            dense
+            v-model="filterKeyword"
+            label="ค้นหา"
+          ></q-input>
+          <q-select
+            v-model="visibleColumns"
+            multiple
+            outlined
+            dense
+            options-dense
+            :display-value="$q.lang.table.columns"
+            emit-value
+            map-options
+            :options="columns"
+            option-value="name"
+            options-cover
+            style="min-width: 150px"
+          />
+        </div>
+      </q-toolbar>
+
+      <d-table
+        ref="table"
+        :columns="columns"
+        :rows="store.row"
+        :filter="filterKeyword"
+        row-key="name"
+        flat
+        bordered
+        :paging="true"
+        dense
+        class="custom-header-table"
+        :visible-columns="visibleColumns"
+      >
+        <template v-slot:header="props">
+          <q-tr :props="props">
+            <q-th v-for="col in props.cols" :key="col.name" :props="props">
+              <span class="text-weight-medium">{{ col.label }}</span>
+            </q-th>
+            <q-th auto-width />
+          </q-tr>
+        </template>
+        <template v-slot:body="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.id"
+              @click="nextPage(props.row.id)"
+            >
+              <div>
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                color="edit"
+                flat
+                dense
+                round
+                class="q-mr-xs"
+                size="12px"
+                icon="edit"
+                clickable
+                @click.stop="
+                  () => {
+                    dialogStatus = 'edit';
+                    dialog = true;
+                    editId = props.row.id;
+                    province = props.row.name;
+                  }
+                "
+              >
+                <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+              </q-btn>
+              <q-btn
+                color="red"
+                flat
+                dense
+                round
+                size="12px"
+                icon="mdi-delete"
+                clickable
+                @click.stop="
+                  dialogRemove($q, async () => await deleteData(props.row.id))
+                "
+                v-close-popup
+              >
+                <q-tooltip>ลบข้อมูล</q-tooltip>
+              </q-btn>
+            </q-td>
+          </q-tr>
+        </template>
+      </d-table>
+    </div>
+  </q-card>
+
+  <DialogForm
+    v-model:dialog="dialog"
+    v-model:data="province"
+    v-model:personalName="personalName"
+    v-model:dialogStatus="dialogStatus"
+    v-model:editId="editId"
+    :addData="addData"
+    :fetch-data="fetchData"
+    :edit-data="editData"
+  />
+</template>
diff --git a/src/modules/01_metadataNew/interface/response/personal/personal.ts b/src/modules/01_metadataNew/interface/response/personal/personal.ts
index b5dfaa78b..f360fae42 100644
--- a/src/modules/01_metadataNew/interface/response/personal/personal.ts
+++ b/src/modules/01_metadataNew/interface/response/personal/personal.ts
@@ -26,4 +26,21 @@ interface DataRow {
   name?: string;
 }
 
-export type { DataResponse, DataRow };
+interface FormDistrict {
+  id: string;
+  name: string;
+  districts: District[];
+}
+
+interface District {
+  id: string;
+  createdAt: string;
+  createdUserId: string;
+  lastUpdatedAt: string;
+  lastUpdateUserId: string;
+  createdFullName: string;
+  lastUpdateFullName: string;
+  name: string;
+  provinceId: string;
+}
+export type { DataResponse, DataRow,FormDistrict,District };
diff --git a/src/modules/01_metadataNew/router.ts b/src/modules/01_metadataNew/router.ts
index f716f1775..94f8fdcbc 100644
--- a/src/modules/01_metadataNew/router.ts
+++ b/src/modules/01_metadataNew/router.ts
@@ -6,6 +6,10 @@ const detailInsignia = () =>
   import("@/modules/01_metadataNew/components/insignia/InsigniaDetail.vue");
 const personalPage = () =>
   import("@/modules/01_metadataNew/views/personal.vue");
+const personalDistrict = () =>
+  import("@/modules/01_metadataNew/components/personal/province/01_District.vue");
+const personalSubDistrict = () =>
+  import("@/modules/01_metadataNew/components/personal/province/02_SubDistrict.vue");
 const positionPage = () =>
   import("@/modules/01_metadataNew/views/position.vue");
 const positionLevelPage = () =>
@@ -83,6 +87,26 @@ export default [
       Role: "metadata",
     },
   },
+  {
+    path: "/master-data/personal/district/:id",
+    name: "masterPersonalDistrict",
+    component: personalDistrict,
+    meta: {
+      Auth: true,
+      Key: [7],
+      Role: "metadata",
+    },
+  },
+  {
+    path: "/master-data/personal/sub-district/:provinceId/:id",
+    name: "masterPersonalSubDistrict",
+    component: personalSubDistrict,
+    meta: {
+      Auth: true,
+      Key: [7],
+      Role: "metadata",
+    },
+  },
   {
     path: "/master-data/position",
     name: "masterPosition",