diff --git a/src/api/registry/api.profile.ts b/src/api/registry/api.profile.ts
index 77a70667b..9074e5cb8 100644
--- a/src/api/registry/api.profile.ts
+++ b/src/api/registry/api.profile.ts
@@ -178,6 +178,7 @@ export default {
   profileReportEmpId: (profileId: string) =>
     `${report}kk1-employee/${profileId}`,
   profileKp7ShortId: (profileId: string) => `${report}kp7-short/${profileId}`,
+  profileKp7ShortEmpId: (profileId: string) => `${report}kp7-short-employee/${profileId}`,
 
   profileChangeNameId: (profileId: string) =>
     `${profile}changeName/${profileId}`,
diff --git a/src/interface/main.ts b/src/interface/main.ts
index f34950b8f..edc4228f4 100644
--- a/src/interface/main.ts
+++ b/src/interface/main.ts
@@ -23,4 +23,35 @@ interface RoleData {
   parentNode: string;
 }
 
-export type { DataOption, FormProfile, RoleData };
+interface DataStructureTree {
+  labelName: string;
+  orgCode: string;
+  orgLevel: number;
+  orgName: string;
+  orgRevisionId: string;
+  orgRootName: string;
+  orgTreeCode: string;
+  orgTreeFax: string;
+  orgTreeId: string;
+  orgTreeName: string;
+  orgTreeOrder: number;
+  orgTreePhoneEx: string;
+  orgTreePhoneIn: string;
+  orgTreeRank: string;
+  orgTreeRankSub: string;
+  orgTreeShortName: string;
+  responsibility: string;
+  totalPosition: number;
+  totalPositionCurrentUse: number;
+  totalPositionCurrentVacant: number;
+  totalPositionNextUse: number;
+  totalPositionNextVacant: number;
+  totalRootPosition: number;
+  totalRootPositionCurrentUse: number;
+  totalRootPositionCurrentVacant: number;
+  totalRootPositionNextUse: number;
+  totalRootPositionNextVacant: number;
+  children: DataStructureTree[];
+}
+
+export type { DataOption, FormProfile, RoleData, DataStructureTree };
diff --git a/src/modules/04_registryPerson/components/TableView.vue b/src/modules/04_registryPerson/components/TableView.vue
index e5b14f53f..d672f6bf6 100644
--- a/src/modules/04_registryPerson/components/TableView.vue
+++ b/src/modules/04_registryPerson/components/TableView.vue
@@ -352,9 +352,13 @@ watch(
                     class="text-weight-medium"
                   >
                     {{
-                      `${props.row.prefix ? props.row.prefix : ""}${
-                        props.row.firstName
-                      } ${props.row.lastName}`
+                      `${
+                        props.row.rank
+                          ? props.row.rank
+                          : props.row.prefix
+                          ? props.row.prefix
+                          : ""
+                      }${props.row.firstName} ${props.row.lastName}`
                     }}
                   </div>
                   <div
@@ -367,9 +371,13 @@ watch(
                   >
                     <q-tooltip>รายละเอียด</q-tooltip>
                     {{
-                      `${props.row.prefix ? props.row.prefix : ""}${
-                        props.row.firstName
-                      } ${props.row.lastName}`
+                      `${
+                        props.row.rank
+                          ? props.row.rank
+                          : props.row.prefix
+                          ? props.row.prefix
+                          : ""
+                      }${props.row.firstName} ${props.row.lastName}`
                     }}
                     <q-icon name="mdi-open-in-new" size="xs"></q-icon>
                   </div>
diff --git a/src/modules/04_registryPerson/components/detail/PersonalInformation/04_FamilyNew.vue b/src/modules/04_registryPerson/components/detail/PersonalInformation/04_FamilyNew.vue
index 023677173..df1ac2ba4 100644
--- a/src/modules/04_registryPerson/components/detail/PersonalInformation/04_FamilyNew.vue
+++ b/src/modules/04_registryPerson/components/detail/PersonalInformation/04_FamilyNew.vue
@@ -25,6 +25,7 @@ const route = useRoute();
 const store = useProfileDataStore();
 const { filterSelector } = store;
 const {
+  date2Thai,
   dialogConfirm,
   showLoader,
   hideLoader,
@@ -47,6 +48,8 @@ const visibleColumns = ref<String[]>([
   "job",
   "isLive",
   "lastNameOld",
+  "lastUpdateFullName",
+  "lastUpdatedAt",
 ]);
 const columns = ref<QTableProps["columns"]>([
   {
@@ -114,6 +117,25 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
     format: (val) => (val ? "มีชีวิต" : "ถึงแก่กรรม"),
   },
+  {
+    name: "lastUpdateFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "lastUpdateFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "lastUpdatedAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "lastUpdatedAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (val) => date2Thai(val),
+  },
 ]);
 const rows = ref<any[]>([]);
 
@@ -173,13 +195,12 @@ const fromData = reactive({
  * function fetch ข้อมูลบิดา
  */
 async function fetchDataFather() {
-  showLoader();
   await http
     .get(
       config.API.profileFamily(empType.value, "father") + `/${profileId.value}`
     )
-    .then((res) => {
-      const data = res.data.result;
+    .then(async (res) => {
+      const data = await res.data.result;
 
       if (data) {
         fatherData.isLive = data.fatherLive;
@@ -192,9 +213,6 @@ async function fetchDataFather() {
     })
     .catch((err) => {
       messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
@@ -202,13 +220,12 @@ async function fetchDataFather() {
  * function fetch ข้อมูลมารดา
  */
 async function fetchDataMother() {
-  showLoader();
   await http
     .get(
       config.API.profileFamily(empType.value, "mother") + `/${profileId.value}`
     )
-    .then((res) => {
-      const data = res.data.result;
+    .then(async (res) => {
+      const data = await res.data.result;
       if (data) {
         motherData.isLive = data.motherLive;
         motherData.citizenId = data.motherCitizenId;
@@ -220,9 +237,6 @@ async function fetchDataMother() {
     })
     .catch((err) => {
       messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
@@ -230,13 +244,12 @@ async function fetchDataMother() {
  * function fetch ข้อมูลคู่สมรส
  */
 async function fetchDataCouple() {
-  showLoader();
   await http
     .get(
       config.API.profileFamily(empType.value, "couple") + `/${profileId.value}`
     )
-    .then((res) => {
-      const data = res.data.result;
+    .then(async (res) => {
+      const data = await res.data.result;
       if (data) {
         coupleData.isLive = data.coupleLive;
         coupleData.citizenId = data.coupleCitizenId;
@@ -250,9 +263,6 @@ async function fetchDataCouple() {
     })
     .catch((err) => {
       messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
@@ -260,21 +270,17 @@ async function fetchDataCouple() {
  * function fetch ข้อมูลบุตร
  */
 async function fetchDataChildren() {
-  showLoader();
   await http
     .get(
       config.API.profileFamily(empType.value, "children") +
         `/${profileId.value}`
     )
-    .then((res) => {
-      const data = res.data.result;
+    .then(async (res) => {
+      const data = await res.data.result;
       childData.value = data;
     })
     .catch((err) => {
       messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
@@ -339,6 +345,7 @@ function closeDialog() {
   fromData.job = "";
   fromData.lastNameOld = "";
   fromData.statusMarital = "";
+  rows.value = [];
 }
 
 /**
@@ -412,7 +419,6 @@ function onOpenDialogHistory(type: string, id: string = "") {
  * function fetch ข้อมูลความสัมพันธ์
  */
 function fetchDataRelationship() {
-  // showLoader();
   http
     .get(config.API.orgRelationship)
     .then((res) => {
@@ -424,11 +430,6 @@ function fetchDataRelationship() {
     })
     .catch((err) => {
       messageError($q, err);
-    })
-    .finally(() => {
-      // setTimeout(() => {
-      //   hideLoader();
-      // }, 2000);
     });
 }
 
@@ -450,13 +451,13 @@ function filterSelectorRelation(val: any, update: Function) {
  * @param id
  * @param type
  */
-function fetchHistory(id: string, type: string) {
-  hideLoader();
-  http
+async function fetchHistory(id: string, type: string) {
+  showLoader();
+  await http
     .get(config.API.profileFamilyHistory(id, empType.value, type))
-    .then((res) => {
-      const data = res.data.result;
-      rows.value = data.map((e: any) => ({
+    .then(async (res) => {
+      const data = await res.data.result;
+      rows.value = await data.map((e: any) => ({
         citizenId: e[`${type}CitizenId`],
         prefix: e[`${type}Prefix`],
         firstName: e[`${type}FirstName`],
@@ -464,6 +465,8 @@ function fetchHistory(id: string, type: string) {
         job: e[`${type}Career`],
         isLive: e[`${type}Live`],
         lastNameOld: type === "couple" ? e.coupleLastNameOld : undefined,
+        lastUpdateFullName: e.lastUpdateFullName,
+        lastUpdatedAt: e.lastUpdatedAt,
       }));
     })
     .catch((err) => {
@@ -482,9 +485,13 @@ onMounted(async () => {
     fetchDataCouple(),
     fetchDataChildren(),
     fetchDataRelationship(),
-  ]).then(() => {
-    hideLoader();
-  });
+  ])
+    .then(() => {
+      hideLoader();
+    })
+    .catch(() => {
+      hideLoader();
+    });
 });
 </script>
 
diff --git a/src/modules/04_registryPerson/interface/request/Main.ts b/src/modules/04_registryPerson/interface/request/Main.ts
index ecda33aae..0d25eb0b2 100644
--- a/src/modules/04_registryPerson/interface/request/Main.ts
+++ b/src/modules/04_registryPerson/interface/request/Main.ts
@@ -3,6 +3,7 @@ interface FormFilter {
   pageSize: number;
   keyword: string;
   type: string;
+  searchType?: string;
   posType: string;
   posLevel: string;
   retireYear: string | null;
diff --git a/src/modules/04_registryPerson/interface/response/Main.ts b/src/modules/04_registryPerson/interface/response/Main.ts
index 5735b5363..2a290a06a 100644
--- a/src/modules/04_registryPerson/interface/response/Main.ts
+++ b/src/modules/04_registryPerson/interface/response/Main.ts
@@ -22,6 +22,7 @@ interface DataPerson {
   posTypeId: string;
   position: string;
   prefix: string;
+  rank?: string;
 }
 
 export type { DataType, DataLevel, DataPerson };
diff --git a/src/modules/04_registryPerson/store.ts b/src/modules/04_registryPerson/store.ts
index 867a7e72d..3b4a67fd0 100644
--- a/src/modules/04_registryPerson/store.ts
+++ b/src/modules/04_registryPerson/store.ts
@@ -64,6 +64,7 @@ export const useRegistryNewDataStore = defineStore("registryNew", () => {
     isAll: true,
     nodeId: null,
     node: null,
+    searchType: "fullName",
   });
 
   const labelOption = reactive({
diff --git a/src/modules/04_registryPerson/views/detailView.vue b/src/modules/04_registryPerson/views/detailView.vue
index 308510db5..55ff17669 100644
--- a/src/modules/04_registryPerson/views/detailView.vue
+++ b/src/modules/04_registryPerson/views/detailView.vue
@@ -304,7 +304,10 @@ function onClickDownloadKp7(type: string) {
       ? empType.value
         ? config.API.profileReportEmpId(profileId.value)
         : config.API.profileReportId(profileId.value)
+      : empType.value
+      ? config.API.profileKp7ShortEmpId(profileId.value)
       : config.API.profileKp7ShortId(profileId.value);
+
   const fileName = type === "FULL" ? "ก.พ.7/ก.ก.1" : "ประวัติแบบย่อ";
   http
     .get(url, {
@@ -746,6 +749,7 @@ onMounted(async () => {
       </q-btn-dropdown>
 
       <q-btn
+        v-if="empType !== '-temp'"
         unelevated
         round
         color="grey-4"
diff --git a/src/modules/04_registryPerson/views/list.vue b/src/modules/04_registryPerson/views/list.vue
index e5f5b9d83..260cf9ae1 100644
--- a/src/modules/04_registryPerson/views/list.vue
+++ b/src/modules/04_registryPerson/views/list.vue
@@ -20,9 +20,11 @@ import DialogHeader from "@/components/DialogHeader.vue";
 import { useRegistryNewDataStore } from "@/modules/04_registryPerson/store";
 import { useCounterMixin } from "@/stores/mixin";
 import { useRoute } from "vue-router";
+import { useStructureTree } from "@/stores/structureTree";
 
 const $q = useQuasar();
 const store = useRegistryNewDataStore();
+const { fetchStructureTree } = useStructureTree();
 const { showLoader, hideLoader, messageError } = useCounterMixin();
 const route = useRoute();
 
@@ -32,7 +34,7 @@ const isShowFilter = ref<boolean>(true);
 const isShowBtnFilter = ref<boolean>(false);
 const empType = ref<string>("officer"); // officer / employee / perm
 
-const searchType = ref<string>("fullName");
+// const searchType = ref<string>("fullName");
 const node = ref<any>([]);
 const expanded = ref<any>([]);
 const maxPage = ref<number>(1);
@@ -115,7 +117,7 @@ function fetchDataPerson() {
 
   if (store.formFilter.keyword) {
     queryParams = Object.assign({}, queryParams, {
-      searchField: searchType.value,
+      searchField: store.formFilter.searchType,
       searchKeyword: store.formFilter.keyword,
     });
   }
@@ -262,9 +264,9 @@ async function selectType() {
       empType.value === "officer"
         ? "เลือกหน่วยงาน/ส่วนราชการ"
         : "เลือกหน่วยงาน";
+    store.formFilter.searchType = "fullName";
   } else {
     // แต่ถ้าประเภทเดิมระบบจะใช้ filter เดิมที่เคยค้นหาไว้
-
     if (
       store.formFilter.keyword != "" ||
       store.labelOption.posType != "ทั้งหมด" ||
@@ -331,36 +333,15 @@ function clearSelect(t: string) {
   fetchDataPerson();
 }
 
-async function fetchTree(id: string) {
-  showLoader();
-  http
-    .get(config.API.orgByIdSystem(id, route.meta.Key as string))
-    .then((res) => {
-      const data = res.data.result;
-      node.value = data;
-      store.formFilter.node = nodeData.node;
-      store.formFilter.nodeId = nodeData.nodeId;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-function fetchActive() {
-  showLoader();
-  http
-    .get(config.API.activeOrganization)
-    .then((res) => {
-      const data = res.data.result;
-      fetchTree(data.activeId);
-    })
-    .catch((err) => {
-      messageError($q, err);
-      hideLoader();
-    });
+const isLoad = ref<boolean>(false);
+async function fetchTree() {
+  const data = await fetchStructureTree(route.meta.Key as string);
+  if (data) {
+    isLoad.value = true;
+    node.value = data;
+    store.formFilter.node = nodeData.node;
+    store.formFilter.nodeId = nodeData.nodeId;
+  }
 }
 
 function sendNode() {
@@ -371,15 +352,6 @@ function sendNode() {
   fetchDataPerson();
 }
 
-watch(
-  () => selectNode.value,
-  () => {
-    if (selectNode.value) {
-      fetchActive();
-    }
-  }
-);
-
 function updateSelectedTreeMain(data: any) {
   if (nodeData.node === data.orgLevel && nodeData.nodeId === data.orgTreeId) {
     store.formFilter.node = null;
@@ -395,8 +367,14 @@ function updateSelectedTreeMain(data: any) {
   }
 }
 
+/** callback function เมื่อมีการเปิด popup*/
+watch(selectNode, () => {
+  isLoad.value && hideLoader();
+});
+
 onMounted(async () => {
   selectType();
+  fetchTree();
 });
 </script>
 
@@ -420,7 +398,7 @@ onMounted(async () => {
                   <q-select
                     borderless
                     bg-color="white"
-                    v-model="searchType"
+                    v-model="store.formFilter.searchType"
                     :options="store.searchTypeOption"
                     emit-value
                     dense
@@ -482,7 +460,7 @@ onMounted(async () => {
               label-color="white"
               dropdown-icon="mdi-chevron-down"
               class="q-px-sm"
-              @click="() => (selectNode = true)"
+              @click="() => ((selectNode = true), showLoader())"
             >
               <template v-slot:label>
                 {{
@@ -601,7 +579,7 @@ onMounted(async () => {
               inset
               vertical
               class="lineFil"
-              v-if="empType !== 'officer'"
+              v-if="empType !== 'officer' && store.formFilter.nodeId"
             />
 
             <q-toggle
diff --git a/src/modules/08_registryEmployee/components/DialogSelectPos.vue b/src/modules/08_registryEmployee/components/DialogSelectPos.vue
index 3d0bbd403..ef88d7e9a 100644
--- a/src/modules/08_registryEmployee/components/DialogSelectPos.vue
+++ b/src/modules/08_registryEmployee/components/DialogSelectPos.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, reactive, watch } from "vue";
+import { ref, reactive, watch, onBeforeMount, onMounted } from "vue";
 import { useQuasar } from "quasar";
 import { useRoute } from "vue-router";
 
@@ -19,10 +19,11 @@ import Header from "@/components/DialogHeader.vue";
 
 /** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
-import { asCleanDays } from "@fullcalendar/core/internal";
+import { useStructureTree } from "@/stores/structureTree";
 
 /** use*/
 const $q = useQuasar();
+const { fetchStructureTree } = useStructureTree();
 const {
   success,
   showLoader,
@@ -204,47 +205,18 @@ const selectedPos = ref<any[]>([]);
 const datePos = ref<Date>(new Date());
 const posMasterMain = ref<any>([]);
 const orgRevisionId = ref<string>("");
-
-/** function เรียกข้อมูลโครงสร้าง แบบปัจุบันและ แบบร่าง*/
-async function fetchOrganizationActive() {
-  showLoader();
-  await http
-    .get(config.API.activeOrganization)
-    .then((res) => {
-      const data = res.data.result;
-      if (data) {
-        orgRevisionId.value = data.activeId;
-        fetchDataTree(data.activeId);
-      }
-    })
-    .catch((err) => {
-      messageError($q, err);
-    });
-}
-
+const isLoad = ref<boolean>(false);
 /**
  * function fetch ข้อมูลของ Tree
  * @param id id โครงสร้าง
  */
-async function fetchDataTree(id: string) {
-  showLoader();
-  await http
-    .get(config.API.orgByIdSystem(id, route.meta.Key as string))
-    .then((res) => {
-      const data = res.data.result;
-      if (data) {
-        nodes.value = data;
-        filterItemsTaps(data);
-      }
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      setTimeout(() => {
-        hideLoader();
-      }, 1000);
-    });
+async function fetchDataTree() {
+  const data = await fetchStructureTree(route.meta.Key as string, true);
+  if (data) {
+    nodes.value = data;
+    filterItemsTaps(data);
+    isLoad.value = true;
+  }
 }
 
 /**
@@ -333,7 +305,7 @@ async function fetchPosFind(level: number, id: string) {
   await http
     .post(config.API.orgPosFind, body)
     .then(async (res) => {
-      const data = res.data.result;
+      const data = await res.data.result;
 
       expanded.value = data;
       nodeId.value = id;
@@ -400,7 +372,7 @@ function closePopup() {
 }
 
 /** function clearData*/
-function clearData() {
+async function clearData() {
   nodeId.value = "";
   expanded.value = [];
   positionId.value = "";
@@ -441,12 +413,14 @@ watch(
   () => modal.value,
   async () => {
     if (modal.value) {
-      await fetchOrganizationActive();
+      showLoader();
+      await clearData();
       if (props?.dataRow?.node !== null && props?.dataRow?.nodeId !== null) {
         await fetchPosFind(props?.dataRow?.node, props?.dataRow?.nodeId);
       } else {
         expanded.value = [];
       }
+      isLoad.value && hideLoader();
     }
   }
 );
@@ -468,6 +442,10 @@ watch(
     }
   }
 );
+
+onBeforeMount(async () => {
+  await fetchDataTree();
+});
 </script>
 
 <template>
diff --git a/src/modules/08_registryEmployee/components/DialogSendOrder.vue b/src/modules/08_registryEmployee/components/DialogSendOrder.vue
index a0f86c069..a909f994a 100644
--- a/src/modules/08_registryEmployee/components/DialogSendOrder.vue
+++ b/src/modules/08_registryEmployee/components/DialogSendOrder.vue
@@ -230,7 +230,7 @@ watch(
 
 <template>
   <q-dialog v-model="modal">
-    <q-card style="width: 900px; max-width: 80vw">
+    <q-card style="min-width: 80%">
       <DialogHeader tittle="ส่งรายชื่อไปออกคำสั่ง" :close="closeDialog" />
       <q-separator />
       <q-card-section class="q-pt-none">
diff --git a/src/modules/08_registryEmployee/views/Main.vue b/src/modules/08_registryEmployee/views/Main.vue
index 6b914c99f..1b4b5ac0e 100644
--- a/src/modules/08_registryEmployee/views/Main.vue
+++ b/src/modules/08_registryEmployee/views/Main.vue
@@ -215,14 +215,14 @@ watch(
   }
 );
 
-function fetchList() {
+async function fetchList() {
   showLoader();
   http
     .get(config.API.registryNew("-temp"), { params: queryParams })
-    .then((res) => {
+    .then(async (res) => {
+      rows.value = await res.data.result.data;
       maxPage.value = Math.ceil(res.data.result.total / queryParams.pageSize);
       total.value = res.data.result.total;
-      rows.value = res.data.result.data;
     })
     .catch((err) => {
       messageError($q, err);
@@ -273,8 +273,8 @@ function onClickSendOrder() {
   modalSendOrder.value = true;
 }
 
-onMounted(() => {
-  fetchList();
+onMounted(async () => {
+  await fetchList();
 });
 </script>
 
@@ -394,16 +394,24 @@ onMounted(() => {
             >
               <q-btn
                 v-if="
-                  (props.row.draftOrgEmployeeStatus === null ||
-                    props.row.draftOrgEmployeeStatus === 'WAITTING' ||
-                    props.row.draftOrgEmployeeStatus === 'PENDING') &&
                   checkPermission($route)?.attrIsUpdate &&
                   checkPermission($route)?.attrIsGet
                 "
+                :disable="
+                  props.row.draftOrgEmployeeStatus !== null &&
+                  props.row.draftOrgEmployeeStatus !== 'WAITTING' &&
+                  props.row.draftOrgEmployeeStatus !== 'PENDING'
+                "
                 flat
                 round
                 dense
-                color="blue"
+                :color="
+                  props.row.draftOrgEmployeeStatus !== null &&
+                  props.row.draftOrgEmployeeStatus !== 'WAITTING' &&
+                  props.row.draftOrgEmployeeStatus !== 'PENDING'
+                    ? 'grey-5'
+                    : 'blue'
+                "
                 icon="mdi-account-settings"
                 @click.pervent="onClickSelectPos(props.row)"
               >
diff --git a/src/stores/structureTree.ts b/src/stores/structureTree.ts
new file mode 100644
index 000000000..5a7d78bd6
--- /dev/null
+++ b/src/stores/structureTree.ts
@@ -0,0 +1,77 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+
+import type { DataStructureTree } from "@/interface/main";
+
+const $q = useQuasar();
+const { showLoader, hideLoader, messageError } = useCounterMixin();
+
+export const useStructureTree = defineStore("structureTree", () => {
+  const activeId = ref<string>("");
+  const dataStore = ref<{ [key: string]: DataStructureTree[] }>({});
+
+  /**
+   * fetch ข้อมูลโครงสร้างตามคีย์ของระบบ
+   * @param sysKey คีย์ของระบบ
+   * @param isLoad สถานะที่ใช้ในการแสดงตัวโหลด true = แสดง, false = ไม่แสดง
+   * @returns ข้อมูลโครงสร้าง
+   */
+  async function fetchStructureTree(sysKey: string, isLoad: boolean = false) {
+    if (dataStore.value[sysKey]) {
+      return dataStore.value[sysKey] || [];
+    } else {
+      activeId.value === "" && (await fetchActive());
+      const data = await fetchData(sysKey, isLoad);
+      return data || [];
+    }
+  }
+
+  /**
+   * fetch ข้อมูลโครงสร้างองค์กรปัจจุบัน
+   *
+   * เช็ต activeId.value เป็นค่า data.activeId ที่ได้จากข้อมูลที่ดึงมา
+   */
+  async function fetchActive() {
+    try {
+      const res = await http.get(config.API.activeOrganization);
+      const data = res.data.result;
+      activeId.value = data.activeId;
+    } catch (err) {
+      messageError($q, err);
+    }
+  }
+
+  /**
+   * fetch ข้อมูลโครงสร้างจาก API
+   * @param sysKey คีย์ของระบบ
+   * @param isLoad  สถานะที่ใช้ในการแสดงตัวโหลด true = แสดง, false = ไม่แสดง
+   * @returns ข้อมูลโครงสร้าง
+   *
+   * เมื่อ isLoad เป็น true จะทำการแสดงตัวโหลด showLoader
+   * และเก็บค่าใน dataStore.value ตามคีย์ของระบบที่รับมา
+   */
+  async function fetchData(sysKey: string, isLoad: boolean) {
+    isLoad && showLoader();
+    try {
+      const res = await http.get(
+        config.API.orgByIdSystem(activeId.value, sysKey)
+      );
+      const data = res.data.result;
+      dataStore.value[sysKey] = data;
+      return data;
+    } catch (err) {
+      messageError($q, err);
+    } finally {
+      hideLoader();
+    }
+  }
+
+  return {
+    fetchStructureTree,
+  };
+});