From a8d794abe6028834f742a7a3c019863de320ad09 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 5 Sep 2024 14:14:15 +0700
Subject: [PATCH] Refactoring code module 01_metadata => 02_position

---
 .../components/position/01ListPosition.vue    | 309 +++++-----
 .../components/position/02ListType.vue        | 294 +++-------
 ...4ListExecutive.vue => 03ListExecutive.vue} | 104 ++--
 .../components/position/03ListLevel.vue       |  30 -
 .../components/position/05ListLevelDetail.vue | 544 ------------------
 .../position/DialogAddExecutive.vue           | 214 -------
 .../position/DialogFormExecutive.vue          | 175 ++++++
 ...AddPosition.vue => DialogFormPosition.vue} | 368 ++++++------
 .../components/position/ListLevel.vue         | 485 ++++++++++++++++
 .../interface/response/position/Main.ts       |  15 +
 src/modules/01_metadata/router.ts             |   2 +-
 .../01_metadata/stores/positionTypeStore.ts   |  10 +-
 src/modules/01_metadata/views/02_position.vue |  16 +-
 src/views/Dashboard.vue                       |  29 +-
 src/views/MainLayout.vue                      |  29 +-
 15 files changed, 1188 insertions(+), 1436 deletions(-)
 rename src/modules/01_metadata/components/position/{04ListExecutive.vue => 03ListExecutive.vue} (69%)
 delete mode 100644 src/modules/01_metadata/components/position/03ListLevel.vue
 delete mode 100644 src/modules/01_metadata/components/position/05ListLevelDetail.vue
 delete mode 100644 src/modules/01_metadata/components/position/DialogAddExecutive.vue
 create mode 100644 src/modules/01_metadata/components/position/DialogFormExecutive.vue
 rename src/modules/01_metadata/components/position/{DialogAddPosition.vue => DialogFormPosition.vue} (51%)
 create mode 100644 src/modules/01_metadata/components/position/ListLevel.vue
 create mode 100644 src/modules/01_metadata/interface/response/position/Main.ts

diff --git a/src/modules/01_metadata/components/position/01ListPosition.vue b/src/modules/01_metadata/components/position/01ListPosition.vue
index 94df8d65..8d058bd3 100644
--- a/src/modules/01_metadata/components/position/01ListPosition.vue
+++ b/src/modules/01_metadata/components/position/01ListPosition.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted } from "vue";
 import { useQuasar } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
 
 import type { QTableProps } from "quasar";
 import type {
@@ -11,17 +13,14 @@ import type {
   RowDetailPositions,
 } from "@/modules/01_metadata/interface/request/position/index";
 
-import DialogAddPosition from "@/modules/01_metadata/components/position/DialogAddPosition.vue";
-
-import { useCounterMixin } from "@/stores/mixin";
+import DialogFormPosition from "@/modules/01_metadata/components/position/DialogFormPosition.vue";
 
 const $q = useQuasar();
-const rowsPositionSelect = ref<RowDetailPositions[]>([]);
-const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, success, dialogRemove } = mixin;
+const { showLoader, hideLoader, messageError, success, dialogRemove } =
+  useCounterMixin();
 
 /** Table*/
-const rows = ref<RowDetailPositions[]>([]);
+const rowsPositionSelect = ref<RowDetailPositions[]>([]); // รายการข้อมูลตำแหน่งข้าราชการ ฯ
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -107,6 +106,7 @@ const visibleColumns = ref<string[]>([
   "positionArea",
 ]);
 
+// ฟอร์มข้อมูลตำแหน่ง
 const formPositionSelect = reactive<FormPositionSelect>({
   positionId: "",
   posTypeId: "",
@@ -119,17 +119,15 @@ const formPositionSelect = reactive<FormPositionSelect>({
   positionArea: "",
   isSpecial: false,
 });
-const editPosition = ref<boolean>(false);
-const copyPosition = ref<boolean>(false);
+const modalFormPosition = ref<boolean>(false); // สถานะการ DialogFormPosition
+const statusEdit = ref<boolean>(false); // สถานะการแก้ไขข้อมูล
+const copyPosition = ref<boolean>(false); // สถานะการคัดลอกข้อมูล
 
-const modalAddPosition = ref<boolean>(false);
-
-/** input ค้นหา */
-const searchRef = ref<any>(null);
-const search = ref<string>("");
-const type = ref<string>("positionName");
+const search = ref<string>(""); // คำค้นหา
+const type = ref<string>("ALL"); // ประเภท
 const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
 const optionFilter = ref<DataOption[]>([
+  { id: "ALL", name: "ทั้งหมด" },
   { id: "positionName", name: "ตำแหน่งในสายงาน" },
   { id: "positionField", name: "สายงาน" },
   { id: "positionType", name: "ประเภทตำแหน่ง" },
@@ -140,8 +138,39 @@ const optionFilter = ref<DataOption[]>([
 ]);
 
 /**
- * คัดลอกข้อมูล
- * @param data ข้อมูลตำแหน่ง
+ * ดึงข้อมูลรายการข้อมูลตำแหน่งข้าราชการ ฯ
+ */
+async function fetchData() {
+  showLoader();
+  await http
+    .get(
+      config.API.orgPosPosition + `?keyword=${search.value}&type=${type.value}`
+    )
+    .then(async (res) => {
+      rowsPositionSelect.value = await res.data.result;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * เปิด  DialogFormPosition สำหลับเพิ่มข้อมูลตำแหน่ง
+ */
+function popupAdd() {
+  modalFormPosition.value = true;
+}
+
+/**
+ * คัดลอกข้อมูลตำแหน่งไปยังแบบฟอร์ม
+ *
+ * @param data ข้อมูลตำแหน่งที่ต้องการคัดลอก
+ * - คัดลอกข้อมูลจาก data ไปยัง formPositionSelect เพื่อแสดงในแบบฟอร์ม
+ * - เปิด DialogFormPosition สำหลับคัดลอกข้อมูล
+ * - copyPosition` เป็น true
  */
 function copyDetiail(data: RowDetailPositions) {
   formPositionSelect.positionId = data.id;
@@ -153,12 +182,17 @@ function copyDetiail(data: RowDetailPositions) {
   formPositionSelect.positionExecutive = data.posExecutiveId;
   formPositionSelect.positionExecutiveField = data.positionExecutiveField;
   formPositionSelect.positionArea = data.positionArea;
-  modalAddPosition.value = true;
+  modalFormPosition.value = true;
   copyPosition.value = true;
 }
+
 /**
  * แก้ไขข้อมูล
- * @param data ข้อมูลตำแหน่ง
+ *
+ * @param data ข้อมูลตำแหน่งที่ต้องการแก้ไข
+ * - คัดลอกข้อมูลจาก data ไปยัง formPositionSelect เพื่อแสดงในแบบฟอร์ม
+ * - เปิด DialogFormPosition สำหลับแก้ไขข้อมูล
+ * - statusEdit = true
  */
 function editDetiail(data: RowDetailPositions) {
   formPositionSelect.positionId = data.id;
@@ -171,8 +205,32 @@ function editDetiail(data: RowDetailPositions) {
   formPositionSelect.positionExecutiveField = data.positionExecutiveField;
   formPositionSelect.positionArea = data.positionArea;
   formPositionSelect.isSpecial = data.isSpecial;
-  modalAddPosition.value = true;
-  editPosition.value = true;
+  modalFormPosition.value = true;
+  statusEdit.value = true;
+}
+
+/**
+ * ยืนยันการลบรายการข้อมูลตำแหน่งข้าราชการ ฯ
+ *
+ * @param id ข้อมูลตำแหน่งข้าราชการ ฯ
+ * - เมื่อการลบสำเร็จ จะดึงข้อมูลใหม่เพื่อแสดงผล และแสดงข้อความสำเร็จ
+ */
+function deletePos(id: string) {
+  dialogRemove($q, () => {
+    showLoader();
+    http
+      .delete(config.API.orgPosPositionById(id))
+      .then(async () => {
+        await fetchData();
+        success($q, "ลบข้อมูลสำเร็จ");
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
 }
 
 /**
@@ -186,137 +244,81 @@ function inputEdit(val: boolean) {
   };
 }
 
-async function searchInput() {
-  showLoader();
-  await http
-    .get(
-      config.API.orgPosPosition + `?keyword=${search.value}&type=${type.value}`
-    )
-    .then((res) => {
-      rowsPositionSelect.value = res.data.result;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-function addPosition(data: RowDetailPositions) {
-  const isIdExist = rows.value.some((item: any) => item.id === data.id);
-
-  if (!isIdExist) {
-    rows.value = [data, ...rows.value];
-  }
-}
-
-function deletePos(id: string) {
-  dialogRemove($q, () => {
-    showLoader();
-    http
-      .delete(config.API.orgPosPositionById(id))
-      .then(() => {
-        success($q, "ลบข้อมูลสำเร็จ");
-      })
-      .catch((err) => {
-        messageError($q, err);
-      })
-      .finally(() => {
-        searchInput();
-        hideLoader();
-      });
-  });
-}
-
-function popupAdd() {
-  modalAddPosition.value = true;
-}
-
-async function fetchData() {
-  search.value = "";
-  showLoader();
-  await http
-    .get(config.API.orgPosPosition + `?keyword=&type=ALL`)
-    .then((res) => {
-      rowsPositionSelect.value = res.data.result;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-onMounted(() => {
-  fetchData();
+/**
+ * hook ทำงานเมื่อ Components ถูกเรียกใช้งาน
+ */
+onMounted(async () => {
+  await fetchData();
 });
 </script>
+
 <template>
-  <div class="row col-12 q-mb-sm">
-    <div class="col-md-2">
-      <q-btn
-        id="addComplaints"
-        for="addComplaints"
-        size="12px"
-        flat
-        round
-        color="primary"
-        icon="mdi-plus"
-        @click="popupAdd()"
-        ><q-tooltip>เพิ่มตำเเหน่ง </q-tooltip></q-btn
-      >
-    </div>
-
-    <div class="row col-md-10 q-col-gutter-sm">
-      <div class="col-md-4">
-        <q-select
-          label="ค้นหาจาก"
-          v-model="type"
-          :options="optionFilter"
-          emit-value
-          dense
-          map-options
-          outlined
-          option-label="name"
-          option-value="id"
-        />
-      </div>
-
-      <div class="col-md-6">
-        <q-input
-          ref="searchRef"
-          :class="inputEdit(isReadonly)"
-          v-model="search"
-          outlined
-          dense
-          lazy-rules
-          label="คำค้น"
-          hide-bottom-space
-        >
-          <template v-slot:append>
-            <q-icon
-              v-if="search"
-              name="cancel"
-              @click="fetchData()"
-              class="cursor-pointer"
-            ></q-icon>
-          </template>
-        </q-input>
-      </div>
-
-      <div class="row col-md-2">
+  <q-form @submit.prevent="fetchData()">
+    <div class="row col-12 q-mb-sm">
+      <div class="col-md-2">
         <q-btn
+          id="addComplaints"
+          for="addComplaints"
+          size="12px"
+          flat
+          round
           color="primary"
-          icon="search"
-          label="ค้นหา"
-          class="full-width"
-          @click="searchInput()"
-        />
+          icon="mdi-plus"
+          @click="popupAdd()"
+          ><q-tooltip>เพิ่มตำเเหน่ง </q-tooltip></q-btn
+        >
+      </div>
+
+      <div class="row col-md-10 q-col-gutter-sm">
+        <div class="col-md-4">
+          <q-select
+            label="ค้นหาจาก"
+            v-model="type"
+            :options="optionFilter"
+            emit-value
+            dense
+            map-options
+            outlined
+            option-label="name"
+            option-value="id"
+            :clearable="type !== 'ALL'"
+            @clear="type = 'ALL'"
+          />
+        </div>
+
+        <div class="col-md-6">
+          <q-input
+            :class="inputEdit(isReadonly)"
+            v-model="search"
+            outlined
+            dense
+            lazy-rules
+            label="คำค้น"
+            hide-bottom-space
+          >
+            <template v-slot:append>
+              <q-icon
+                v-if="search"
+                name="cancel"
+                @click="search = ''"
+                class="cursor-pointer"
+              ></q-icon>
+            </template>
+          </q-input>
+        </div>
+
+        <div class="row col-md-2">
+          <q-btn
+            color="primary"
+            icon="search"
+            label="ค้นหา"
+            class="full-width"
+            type="submit"
+          />
+        </div>
       </div>
     </div>
-  </div>
+  </q-form>
 
   <div class="full-width q-mt-sm">
     <d-table
@@ -333,7 +335,7 @@ onMounted(() => {
     >
       <template v-slot:header="props">
         <q-tr :props="props">
-          <q-th auto-width></q-th>
+          <q-th auto-width />
           <q-th
             v-for="col in props.cols"
             :key="col.name"
@@ -388,12 +390,7 @@ onMounted(() => {
               <q-tooltip>ลบข้อมูล</q-tooltip>
             </q-btn>
           </q-td>
-          <q-td
-            v-for="col in props.cols"
-            :key="col.name"
-            :props="props"
-            @click="addPosition(props.row)"
-          >
+          <q-td v-for="col in props.cols" :key="col.name" :props="props">
             <div v-if="col.name == 'no'">
               {{ props.rowIndex + 1 }}
             </div>
@@ -415,11 +412,11 @@ onMounted(() => {
     </d-table>
   </div>
 
-  <DialogAddPosition
-    v-model:add-position="modalAddPosition"
+  <DialogFormPosition
+    v-model:add-position="modalFormPosition"
     v-model:form-data="formPositionSelect"
-    v-model:edit-check="editPosition"
+    v-model:edit-check="statusEdit"
     v-model:copy-check="copyPosition"
-    :get-data="searchInput"
+    :get-data="fetchData"
   />
 </template>
diff --git a/src/modules/01_metadata/components/position/02ListType.vue b/src/modules/01_metadata/components/position/02ListType.vue
index dd68b3bb..6dfdaeb9 100644
--- a/src/modules/01_metadata/components/position/02ListType.vue
+++ b/src/modules/01_metadata/components/position/02ListType.vue
@@ -1,25 +1,25 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
-import type { QInput, QTableProps } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
-import { useRouter } from "vue-router";
-import { usePositionTypeDataStore } from "@/modules/01_metadata/stores/positionTypeStore";
-import dialogHeader from "@/components/DialogHeader.vue";
 import { useQuasar } from "quasar";
+
+import { useRouter } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { usePositionTypeDataStore } from "@/modules/01_metadata/stores/positionTypeStore";
 
-const store = usePositionTypeDataStore();
+import type { QTableProps } from "quasar";
+
+import dialogHeader from "@/components/DialogHeader.vue";
+
+const $q = useQuasar();
 const router = useRouter();
-const mixin = useCounterMixin();
-const {
-  dialogRemove,
-  dialogConfirm,
-  success,
-  messageError,
-  showLoader,
-  hideLoader,
-} = mixin;
+const store = usePositionTypeDataStore();
+const { dialogConfirm, success, messageError, showLoader, hideLoader } =
+  useCounterMixin();
+
+// Table
+const filterKeyword = ref<string>(""); //คำค้นหา
 const columns = [
   {
     name: "posTypeName",
@@ -77,25 +77,25 @@ const columns = [
       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 posTypeName = ref<string>("");
-const posTypeNameRef = ref<QInput | null>(null);
-const posTypeRank = ref<number | null>(null);
-const posTypeRankRef = ref<QInput | null>(null);
-const dialogStatus = ref<string>("");
 const visibleColumns = ref<string[]>(["posTypeName", "posTypeRank"]);
 
+const editId = ref<string>(""); // id รายกรปะเภทตำแหน่ง
+const dialog = ref<boolean>(false); // modal popu เพิ่มข้อมูล,แก้ไข
+const dialogStatus = ref<string>(""); // สถานการแก้ไข
+const posTypeName = ref<string>(""); // ประเภทตำแหน่ง
+const posTypeRank = ref<number | null>(null); // ระดับตำแหน่ง
+
+/**
+ * ดึงข้อมูลรายการประเภทตำแหน่ง
+ *
+ * บันทึกข้อมูลรายการประเภทตำแหน่งใน Store positionTypeStore
+ */
 async function fetchData() {
   showLoader();
   await http
     .get(config.API.orgPosType)
     .then(async (res) => {
-      store.save(res.data.result);
+      await store.save(res.data.result);
     })
     .catch((err) => {
       messageError($q, err);
@@ -105,92 +105,70 @@ async function fetchData() {
     });
 }
 
-async function addData() {
-  await http
-    .post(config.API.orgPosType, {
-      posTypeName: posTypeName.value,
-      posTypeRank: posTypeRank.value,
-    })
-    .then(() => {
-      fetchData();
-      success($q, "บันทึกข้อมูลสำเร็จ");
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
+/**
+ * ยืนยันการบันทึกข้อมูลประเภทตำแหน่ง
+ *
+ * ุ ถ้า dialogStatus เป็น 'create' จะทำการเพิ่มข้อมูลรายการประเภทตำแหน่ง ถ่้าไม่จะทำการแก้ไขข้อมูล
+ * เมื่อบันทึกข้อมูลเสร็จจะเรียก function fetchData() เพื่อดึงข้อมูลรายการประเภทตำแหน่งใหม่
+ *
+ */
+function onSubmit() {
+  if (posTypeName.value.length > 0 && posTypeRank.value !== null) {
+    dialogConfirm($q, async () => {
+      showLoader();
+      // กำหนด Path API
+      const path =
+        dialogStatus.value === "create"
+          ? config.API.orgPosType // เพิ่มรายการประเภทตำแหน่ง
+          : config.API.orgPosTypeId(editId.value); // แก้ไขรายการประเภทตำแหน่ง
+
+      // กำหนด method
+      const method = dialogStatus.value === "create" ? "post" : "put";
+
+      await http[method](path, {
+        posTypeName: posTypeName.value,
+        posTypeRank: posTypeRank.value,
+      })
+        .then(async () => {
+          await fetchData();
+          success($q, "บันทึกข้อมูลสำเร็จ");
+          closeDialog();
+        })
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(() => {
+          hideLoader();
+        });
     });
+  }
 }
 
-async function editData(id: string) {
-  await http
-    .put(config.API.orgPosTypeId(id), {
-      posTypeName: posTypeName.value,
-      posTypeRank: posTypeRank.value,
-    })
-    .then(() => {
-      fetchData();
-      success($q, "บันทึกข้อมูลสำเร็จ");
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-async function deleteData(id: string) {
-  await http
-    .delete(config.API.orgPosTypeId(id))
-    .then(() => {
-      fetchData();
-      success($q, "ลบข้อมูลสำเร็จ");
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-onMounted(async () => {
-  fetchData();
-});
-
+/**
+ * ปืด popup ฟอร์มประเภทตำแหน่ง
+ *
+ * และเคลียร์ตัวแปรในฟอร์มประเภทตำแหน่ง
+ */
 function closeDialog() {
   dialog.value = false;
   posTypeName.value = "";
   posTypeRank.value = null;
 }
 
+/**
+ * ไปหน้ารายการระดับของประเภทตำแหน่ง
+ * @param id ของประเภทตำแหน่ง
+ */
 function onclickDetail(id: string) {
   router.push(`/master-data/position/level/${id}`);
 }
 
-function validateForm() {
-  posTypeNameRef.value?.validate();
-  posTypeRankRef.value?.validate();
-  onSubmit();
-}
-
-async function onSubmit() {
-  if (posTypeName.value.length > 0 && posTypeRank.value !== null) {
-    dialogConfirm(
-      $q,
-      async () => {
-        dialogStatus.value === "create" ? addData() : editData(editId.value);
-        closeDialog();
-        posTypeName.value = "";
-        posTypeRank.value = null;
-      },
-      "ยืนยันการบันทึกข้อมูล",
-      "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
-    );
-  }
-}
+/**
+ * hook ทำงานเมื่อ Components ถูกเรียกใช้งาน
+ */
+onMounted(async () => {
+  await fetchData();
+});
 </script>
 
 <template>
@@ -277,20 +255,6 @@ async function onSubmit() {
           >
             <q-tooltip>แก้ไขข้อมูล</q-tooltip>
           </q-btn>
-          <!-- <q-btn
-            color="red"
-            flat
-            dense
-            round
-            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-td v-for="col in props.cols" :key="col.id">
           {{ col.value }}
@@ -301,15 +265,12 @@ async function onSubmit() {
 
   <q-dialog v-model="dialog" class="dialog" persistent>
     <q-card style="min-width: 350px">
-      <form @submit.prevent="validateForm">
-        <q-card-section class="flex justify-between" style="padding: 0">
-          <dialog-header
-            :tittle="dialogStatus === 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
-            :close="closeDialog"
-          />
-        </q-card-section>
-
-        <q-separator color="grey-4" />
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <dialog-header
+          :tittle="dialogStatus === 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
+          :close="closeDialog"
+        />
+        <q-separator />
         <q-card-section class="q-pa-none">
           <div class="col-12 q-ma-md">
             <q-input
@@ -320,7 +281,7 @@ async function onSubmit() {
               dense
               lazy-rules
               borderless
-              :rules="[(val) => val.length > 0 || 'กรุณากรอกประเภทตำแหน่ง']"
+              :rules="[(val:string) => val.length > 0 || 'กรุณากรอกประเภทตำแหน่ง']"
               hide-bottom-space
               class="inputgreen"
             />
@@ -335,7 +296,7 @@ async function onSubmit() {
               lazy-rules
               borderless
               min="1"
-              :rules="[(val) => val != undefined || 'กรุณากรอกระดับตำแหน่ง']"
+              :rules="[(val:string) => val != undefined || 'กรุณากรอกระดับตำแหน่ง']"
               hide-bottom-space
               mask="############"
               class="inputgreen"
@@ -343,90 +304,15 @@ async function onSubmit() {
           </div>
         </q-card-section>
 
+        <q-separator />
         <q-card-actions align="right">
-          <q-btn
-            id="onSubmit"
-            type="submit"
-            dense
-            unelevated
-            label="บันทึก"
-            color="public"
-            class="q-px-md"
-          >
+          <q-btn id="onSubmit" type="submit" label="บันทึก" color="public">
             <q-tooltip>บันทึกข้อมูล</q-tooltip>
           </q-btn>
         </q-card-actions>
-      </form>
+      </q-form>
     </q-card>
   </q-dialog>
 </template>
 
-<style scoped lang="scss">
-.border_custom {
-  border-radius: 6px !important;
-  border: 1px solid #e1e1e1;
-}
-$toggle-background-color-on: #06884d;
-$toggle-background-color-off: darkgray;
-$toggle-control-color: white;
-$toggle-width: 40px;
-$toggle-height: 25px;
-$toggle-gutter: 3px;
-$toggle-radius: 50%;
-$toggle-control-speed: 0.15s;
-$toggle-control-ease: ease-in;
-
-// These are our computed variables
-// change at your own risk.
-$toggle-radius: $toggle-height / 2;
-$toggle-control-size: $toggle-height - ($toggle-gutter * 2);
-
-.toggle-control {
-  display: block;
-  position: relative;
-  padding-left: $toggle-width;
-  margin-bottom: 12px;
-  cursor: pointer;
-  font-size: 22px;
-  user-select: none;
-
-  input {
-    position: absolute;
-    opacity: 0;
-    cursor: pointer;
-    height: 0;
-    width: 0;
-  }
-
-  input:checked ~ .control {
-    background-color: $toggle-background-color-on;
-
-    &:after {
-      left: $toggle-width - $toggle-control-size - $toggle-gutter;
-    }
-  }
-
-  .control {
-    position: absolute;
-    top: -7px;
-    left: -15px;
-    height: $toggle-height;
-    width: $toggle-width;
-    border-radius: $toggle-radius;
-    background-color: $toggle-background-color-off;
-    transition: background-color $toggle-control-speed $toggle-control-ease;
-
-    &:after {
-      content: "";
-      position: absolute;
-      left: $toggle-gutter;
-      top: $toggle-gutter;
-      width: $toggle-control-size;
-      height: $toggle-control-size;
-      border-radius: $toggle-radius;
-      background: $toggle-control-color;
-      transition: left $toggle-control-speed $toggle-control-ease;
-    }
-  }
-}
-</style>
+<style scoped lang="scss"></style>
diff --git a/src/modules/01_metadata/components/position/04ListExecutive.vue b/src/modules/01_metadata/components/position/03ListExecutive.vue
similarity index 69%
rename from src/modules/01_metadata/components/position/04ListExecutive.vue
rename to src/modules/01_metadata/components/position/03ListExecutive.vue
index 28ed5764..50f444ff 100644
--- a/src/modules/01_metadata/components/position/04ListExecutive.vue
+++ b/src/modules/01_metadata/components/position/03ListExecutive.vue
@@ -1,50 +1,22 @@
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
-import type { QTableProps } from "quasar";
 import { useQuasar } from "quasar";
-import type {
-  RowListForm,
-  ListMenu,
-} from "@/modules/01_metadata/interface/request/position";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
-
-import DialogAdd from "@/modules/01_metadata/components/position/DialogAddExecutive.vue";
 import { useCounterMixin } from "@/stores/mixin";
 
+import type { QTableProps } from "quasar";
+import type { RowListForm } from "@/modules/01_metadata/interface/request/position";
+
+import DialogAdd from "@/modules/01_metadata/components/position/DialogFormExecutive.vue";
+
 const $q = useQuasar();
-const mixin = useCounterMixin();
-const {
-  dialogConfirm,
-  showLoader,
-  hideLoader,
-  messageError,
-  success,
-  dialogRemove,
-} = mixin;
-
-const dataEdit = ref<any>();
-const isEdit = ref<boolean>(false);
-const modalAdd = ref<boolean>(false);
-const filterKeyword = ref<string>("");
-const rows = ref<RowListForm[]>([]);
-
-const listMenu = ref<ListMenu[]>([
-  {
-    label: "แก้ไข",
-    icon: "mdi-pencil",
-    type: "copy",
-    color: "teal-6",
-  },
-  {
-    label: "ลบ",
-    icon: "delete",
-    type: "remove",
-    color: "red",
-  },
-]);
+const { showLoader, hideLoader, messageError } = useCounterMixin();
 
+// Table
+const rows = ref<RowListForm[]>([]); // รายากรข้อมูลตำแหน่งทางการบริหาร
+const filterKeyword = ref<string>(""); // คำค้นหา
 const visibleColumns = ref<string[]>([
   "no",
   "posExecutiveName",
@@ -80,13 +52,22 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
-function getData() {
+const dataEdit = ref<RowListForm>(); // ข้อมูลตำแหน่งทางการบริหารที่แก้ไข
+const isEdit = ref<boolean>(false); // สถานการแก้ไข
+const modalPosExecutive = ref<boolean>(false); // popup ตำแหน่งทางการบริหาร
+
+/**
+ * ดึงรายการข้อมูลตำแหน่งทางการบริหาร
+ *
+ * เก็บข้อมูลรายการตำแหน่งทางการบริหารใน rows.value
+ */
+async function getData() {
   showLoader();
   http
     .get(config.API.orgPosExecutive)
-    .then((res) => {
-      const dataList = res.data.result;
-      rows.value = dataList;
+    .then(async (res) => {
+      const data = await res.data.result;
+      rows.value = data;
     })
     .catch((e) => {
       messageError($q, e);
@@ -95,36 +76,29 @@ function getData() {
       hideLoader();
     });
 }
+
+/**
+ * เปิด popup เพื่อเพิ่มข้อมูลรายากรตำแหน่งทางการบริหาร
+ */
 function popUpAdd() {
-  modalAdd.value = true;
+  modalPosExecutive.value = true;
 }
 
-function editPopUp(data: RowListForm[]) {
+/**
+ * เปิด popup เพื่อแก่ไขข้อมูลรายากรตำแหน่งทางการบริหาร
+ * @param data ข้อมูลรายการตำแหน่งทางการบริหารที่ต้องการแก้ไข
+ */
+function editPopUp(data: RowListForm) {
+  modalPosExecutive.value = true;
   dataEdit.value = data;
-  modalAdd.value = true;
   isEdit.value = true;
 }
 
-function deletePos(id: string) {
-  dialogRemove($q, () => {
-    showLoader();
-    http
-      .delete(config.API.orgPosExecutiveById(id))
-      .then(() => {
-        success($q, "ลบข้อมูลสำเร็จ");
-        getData();
-      })
-      .catch((err) => {
-        messageError($q, err);
-      })
-      .finally(() => {
-        hideLoader();
-      });
-  });
-}
-
-onMounted(() => {
-  getData();
+/**
+ * hook ทำงานเมื่อ Components ถูกเรียกใช้งาน
+ */
+onMounted(async () => {
+  await getData();
 });
 </script>
 
@@ -232,7 +206,7 @@ onMounted(() => {
   </div>
 
   <DialogAdd
-    v-model:executive="modalAdd"
+    v-model:executive="modalPosExecutive"
     v-model:form-data="dataEdit"
     v-model:edit="isEdit"
     :get-data="getData"
diff --git a/src/modules/01_metadata/components/position/03ListLevel.vue b/src/modules/01_metadata/components/position/03ListLevel.vue
deleted file mode 100644
index 23d06d3b..00000000
--- a/src/modules/01_metadata/components/position/03ListLevel.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<script setup lang="ts">
-import { ref } from "vue";
-import { useRouter } from "vue-router";
-import ListLevelDetail from "@/modules/01_metadata/components/position/05ListLevelDetail.vue";
-
-const router = useRouter();
-const posName = ref<string>("");
-</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)"
-    />
-    รายการระดับของประเภทตำแหน่ง{{ posName }}
-  </div>
-
-  <q-card flat bordered>
-    <ListLevelDetail v-model:posName="posName" />
-  </q-card>
-</template>
-
-<style scoped></style>
diff --git a/src/modules/01_metadata/components/position/05ListLevelDetail.vue b/src/modules/01_metadata/components/position/05ListLevelDetail.vue
deleted file mode 100644
index c8f622ab..00000000
--- a/src/modules/01_metadata/components/position/05ListLevelDetail.vue
+++ /dev/null
@@ -1,544 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted } from "vue";
-import type { QInput, QTableProps } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
-import { useRoute } from "vue-router";
-import { usePositionDataStore } from "@/modules/01_metadata/stores/positionListStore";
-import { useMainOptionDataStore } from "@/modules/01_metadata/stores/main";
-import { usePositionTypeDataStore } from "@/modules/01_metadata/stores/positionTypeStore";
-import dialogHeader from "@/components/DialogHeader.vue";
-import { useQuasar } from "quasar";
-import http from "@/plugins/http";
-import config from "@/app.config";
-const store = usePositionDataStore();
-const storeOption = useMainOptionDataStore();
-const storeName = usePositionTypeDataStore();
-
-const mixin = useCounterMixin();
-
-const posName = defineModel<string>("posName", {
-  required: true,
-});
-
-const {
-  dialogRemove,
-  dialogConfirm,
-  showLoader,
-  hideLoader,
-  messageError,
-  success,
-} = mixin;
-const $q = useQuasar();
-
-const columns = [
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับ",
-    sortable: false,
-    field: "no",
-    headerStyle: "font-size: 14px; width:0px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "posLevelName",
-    align: "left",
-    label: "ชื่อระดับตำแหน่ง",
-    sortable: true,
-    field: "posLevelName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "posTypeName",
-    align: "left",
-    label: "ประเภทตำแหน่ง",
-    sortable: true,
-    field: "posTypeName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "posLevelRank",
-    align: "left",
-    label: "ระดับของระดับตำแหน่ง",
-    sortable: true,
-    field: "posLevelRank",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "posLevelAuthority",
-    align: "left",
-    label: "ผู้มีอำนาจสั่งบรรจุ",
-    sortable: true,
-    field: "posLevelAuthority",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-
-  {
-    name: "createdAt",
-    align: "center",
-    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: "center",
-    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 route = useRoute();
-const id = ref<string>(route.params.id.toString());
-const filterKeyword = ref<string>("");
-const dialog = ref<boolean>(false);
-const dialogStatus = ref<string>("");
-const editId = ref<string>("");
-const posLevelName = ref<string>("");
-const posLevelRank = ref<number>();
-const posLevelAuthority = ref<string>("");
-const posLevelNameRef = ref<QInput | null>(null);
-const posLevelRankRef = ref<QInput | null>(null);
-const posTypeIdRef = ref<QInput | null>(null);
-const posLevelAuthorityRef = ref<QInput | null>(null);
-const visibleColumns = ref<string[]>([
-  "no",
-  "posTypeName",
-  "posLevelName",
-  "posLevelRank",
-  "posLevelAuthority",
-]);
-
-async function fetchData() {
-  showLoader();
-  await http
-    .get(config.API.orgPosTypeId(id.value))
-    .then(async (res) => {
-      posName.value = res.data.result.posTypeName;
-      store.save(res.data.result.posLevels);
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-async function addData() {
-  await http
-    .post(config.API.orgPosLevel, {
-      posLevelName: posLevelName.value,
-      posLevelRank: posLevelRank.value,
-      posLevelAuthority:
-        posLevelAuthority.value == "" ? "" : posLevelAuthority.value,
-      posTypeId: id.value,
-    })
-    .then(() => {
-      fetchData();
-      success($q, "บันทึกข้อมูลสำเร็จ");
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-async function editData(editId: string) {
-  await http
-    .put(config.API.orgPosLevelId(editId), {
-      posLevelName: posLevelName.value,
-      posLevelRank: posLevelRank.value,
-      posLevelAuthority:
-        posLevelAuthority.value == "" ? "" : posLevelAuthority.value,
-      posTypeId: id.value,
-    })
-    .then(() => {
-      fetchData();
-      success($q, "บันทึกข้อมูลสำเร็จ");
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-async function deleteData(id: string) {
-  await http
-    .delete(config.API.orgPosLevelId(id))
-    .then(() => {
-      fetchData();
-      success($q, "ลบข้อมูลสำเร็จ");
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-function closeDialog() {
-  dialog.value = false;
-}
-
-function validateForm() {
-  posLevelNameRef.value?.validate();
-  posLevelRankRef.value?.validate();
-  posTypeIdRef.value?.validate();
-  posLevelAuthorityRef.value?.validate();
-  onSubmit();
-}
-
-async function onSubmit() {
-  if (
-    posLevelName.value.length > 0 &&
-    posLevelAuthority.value.length > 0 &&
-    posLevelRank.value !== undefined &&
-    posLevelRank.value > 0
-  ) {
-    dialogConfirm(
-      $q,
-      async () => {
-        dialogStatus.value === "create" ? addData() : editData(editId.value);
-        closeDialog();
-      },
-      "ยืนยันการบันทึกข้อมูล",
-      "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
-    );
-  }
-}
-
-onMounted(async () => {
-  fetchData();
-});
-</script>
-
-<template>
-  <div class="q-pa-md">
-    <q-toolbar style="padding: 0">
-      <q-btn
-        flat
-        round
-        color="primary"
-        icon="add"
-        @click.stop="
-          () => {
-            dialogStatus = 'create';
-            dialog = true;
-            posLevelName = '';
-            posLevelRank = undefined;
-            posLevelAuthority = '';
-          }
-        "
-      >
-        <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 auto-width />
-          <q-th v-for="col in props.cols" :key="col.name" :props="props">
-            <span class="text-weight-bold">{{ col.label }}</span>
-          </q-th>
-        </q-tr>
-      </template>
-      <template v-slot:body="props">
-        <q-tr :props="props">
-          <q-td auto-width>
-            <q-btn
-              color="edit"
-              flat
-              dense
-              round
-              class="q-mr-xs"
-              icon="edit"
-              clickable
-              @click.stop="
-                () => {
-                  dialogStatus = 'edit';
-                  editId = props.row.id;
-                  posLevelName = props.row.posLevelName;
-                  posLevelRank = props.row.posLevelRank;
-                  if (props.row.posLevelAuthority === 'หัวหน้าหน่วยงาน') {
-                    posLevelAuthority = 'HEAD';
-                  } else if (props.row.posLevelAuthority === 'ปลัด') {
-                    posLevelAuthority = 'DEPUTY';
-                  } else {
-                    posLevelAuthority = 'GOVERNOR';
-                  }
-
-                  dialog = true;
-                }
-              "
-            >
-              <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-            </q-btn>
-            <!-- <q-btn
-              color="red"
-              flat
-              dense
-              round
-              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-td v-for="(col, index) in props.cols" :key="col.id">
-            <div v-if="col.name === 'no'">
-              {{ props.rowIndex + 1 }}
-            </div>
-            <div v-if="col.name === 'posTypeName'">
-              {{ posName }}
-            </div>
-            <div v-else>
-              {{ col.value }}
-            </div>
-          </q-td>
-        </q-tr>
-      </template>
-    </d-table>
-  </div>
-  <q-dialog v-model="dialog" class="dialog" persistent>
-    <q-card style="width: 350px">
-      <form @submit.prevent="validateForm">
-        <q-card-section class="flex justify-between" style="padding: 0">
-          <dialog-header
-            :tittle="dialogStatus == 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
-            :close="closeDialog"
-          />
-        </q-card-section>
-
-        <q-separator color="grey-4" />
-        <q-card-section class="row q-gutter-y-md">
-          <div class="col-12">
-            <q-input
-              outlined
-              ref="posLevelNameRef"
-              v-model="posLevelName"
-              label="ชื่อระดับตำแหน่ง"
-              dense
-              lazy-rules
-              borderless
-              bg-color="white"
-              hide-bottom-space
-              :rules="[(val) => val.length > 0 || 'กรุณากรอกระดับตำแหน่ง']"
-              class="inputgreen"
-            />
-          </div>
-
-          <div class="col-12">
-            <q-input
-              ref="posLevelRankRef"
-              outlined
-              v-model="posLevelRank"
-              label="ระดับ"
-              dense
-              lazy-rules
-              borderless
-              min="1"
-              bg-color="white"
-              :rules="[(val) => val > 0 || 'กรุณากรอกระดับ']"
-              hide-bottom-space
-              mask="############"
-              class="inputgreen"
-            />
-          </div>
-
-          <div class="col-12">
-            <q-select
-              ref="posLevelAuthorityRef"
-              outlined
-              v-model="posLevelAuthority"
-              emit-value
-              map-options
-              :options="storeOption.posLevelAuthorityOption"
-              option-value="id"
-              label="ผู้มีอำนาจสั่งบรรจุ"
-              dense
-              lazy-rules
-              :rules="[(val) => !!val || 'กรุณาเลือกผู้มีอำนาจสั่งบรรจุ']"
-              borderless
-              bg-color="white"
-              hide-bottom-space
-              class="inputgreen"
-            />
-          </div>
-
-          <div class="col-12">
-            <q-select
-              ref="posTypeIdRef"
-              v-model="posName"
-              label="ประเภทตำแหน่ง"
-              outlined
-              dense
-              bg-color="white"
-              options-cover
-              hide-bottom-space
-              readonly
-              class="inputgreen"
-            />
-          </div>
-        </q-card-section>
-
-        <q-card-actions align="right">
-          <q-btn
-            id="onSubmit"
-            type="submit"
-            dense
-            unelevated
-            label="บันทึก"
-            color="public"
-            class="q-px-md"
-          >
-            <q-tooltip>บันทึกข้อมูล</q-tooltip>
-          </q-btn>
-        </q-card-actions>
-      </form>
-    </q-card>
-  </q-dialog>
-</template>
-
-<style scoped lang="scss">
-.border_custom {
-  border-radius: 6px !important;
-  border: 1px solid #e1e1e1;
-}
-$toggle-background-color-on: #06884d;
-$toggle-background-color-off: darkgray;
-$toggle-control-color: white;
-$toggle-width: 40px;
-$toggle-height: 25px;
-$toggle-gutter: 3px;
-$toggle-radius: 50%;
-$toggle-control-speed: 0.15s;
-$toggle-control-ease: ease-in;
-
-// These are our computed variables
-// change at your own risk.
-$toggle-radius: $toggle-height / 2;
-$toggle-control-size: $toggle-height - ($toggle-gutter * 2);
-
-.toggle-control {
-  display: block;
-  position: relative;
-  padding-left: $toggle-width;
-  margin-bottom: 12px;
-  cursor: pointer;
-  font-size: 22px;
-  user-select: none;
-
-  input {
-    position: absolute;
-    opacity: 0;
-    cursor: pointer;
-    height: 0;
-    width: 0;
-  }
-
-  input:checked ~ .control {
-    background-color: $toggle-background-color-on;
-
-    &:after {
-      left: $toggle-width - $toggle-control-size - $toggle-gutter;
-    }
-  }
-
-  .control {
-    position: absolute;
-    top: -7px;
-    left: -15px;
-    height: $toggle-height;
-    width: $toggle-width;
-    border-radius: $toggle-radius;
-    background-color: $toggle-background-color-off;
-    transition: background-color $toggle-control-speed $toggle-control-ease;
-
-    &:after {
-      content: "";
-      position: absolute;
-      left: $toggle-gutter;
-      top: $toggle-gutter;
-      width: $toggle-control-size;
-      height: $toggle-control-size;
-      border-radius: $toggle-radius;
-      background: $toggle-control-color;
-      transition: left $toggle-control-speed $toggle-control-ease;
-    }
-  }
-}
-</style>
diff --git a/src/modules/01_metadata/components/position/DialogAddExecutive.vue b/src/modules/01_metadata/components/position/DialogAddExecutive.vue
deleted file mode 100644
index 6b9d4a52..00000000
--- a/src/modules/01_metadata/components/position/DialogAddExecutive.vue
+++ /dev/null
@@ -1,214 +0,0 @@
-<script setup lang="ts">
-import { ref, reactive, watch } from "vue";
-import { useQuasar } from "quasar";
-import http from "@/plugins/http";
-import config from "@/app.config";
-import type { QTableProps } from "quasar";
-import DialogHeader from "@/components/DialogHeader.vue";
-import type {
-  FormExecutiveRef,
-  RowListForm,
-} from "@/modules/01_metadata/interface/request/position/index";
-import { useCounterMixin } from "@/stores/mixin";
-// import { bo } from "@fullcalendar/core/internal-common";
-const { dialogConfirm, showLoader, success, hideLoader, messageError } =
-  useCounterMixin();
-
-const formExecutive = reactive<RowListForm>({
-  id: "",
-  posExecutiveName: "",
-  posExecutivePriority: null,
-});
-const $q = useQuasar();
-
-const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
-const modal = defineModel<boolean>("executive", { required: true });
-const formData = defineModel<any>("formData", { required: true });
-const isEdit = defineModel<any>("edit", { required: true });
-
-const posExecutiveNameRef = ref<Object | null>(null);
-const posExecutivePriorityRef = ref<Object | null>(null);
-
-const objectExecutiveRef: FormExecutiveRef = {
-  posExecutiveName: posExecutiveNameRef,
-  posExecutivePriority: posExecutivePriorityRef,
-};
-
-const props = defineProps({
-  getData: Function,
-});
-/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
-function validateFormExecutive() {
-  const hasError = [];
-  for (const key in objectExecutiveRef) {
-    if (Object.prototype.hasOwnProperty.call(objectExecutiveRef, key)) {
-      const property = objectExecutiveRef[key];
-      if (property.value && typeof property.value.validate === "function") {
-        const isValid = property.value.validate();
-        hasError.push(isValid);
-      }
-    }
-  }
-  if (hasError.every((result) => result === true)) {
-    if (isEdit.value == false) {
-      onSubmit();
-    } else {
-      putSubmit();
-    }
-  }
-}
-
-/** ฟังชั่น บันทึก */
-function onSubmit() {
-  dialogConfirm(
-    $q,
-    async () => {
-      showLoader();
-      const body = {
-        posExecutiveName: formExecutive.posExecutiveName,
-        posExecutivePriority: formExecutive.posExecutivePriority, //สายงาน
-      };
-      await http
-        .post(config.API.orgPosExecutive, body)
-        .then(() => {
-          success($q, "เพิ่มข้อมูลสำเร็จ");
-          clearForm();
-          modal.value = false;
-          props.getData?.();
-        })
-        .catch((err) => {
-          messageError($q, err);
-        })
-        .finally(() => {
-          hideLoader();
-        });
-    },
-    "ยืนยันการเพิ่มตำแหน่ง",
-    "ต้องการยืนยันการเพิ่มตำแหน่งนี้ใช่หรือไม่?"
-  );
-}
-/** ฟังชั่น บันทึก */
-function putSubmit() {
-  dialogConfirm(
-    $q,
-    async () => {
-      showLoader();
-      const body = {
-        posExecutiveName: formExecutive.posExecutiveName,
-        posExecutivePriority: formExecutive.posExecutivePriority, //สายงาน
-      };
-      await http
-        .put(config.API.orgPosExecutive + `/${formExecutive.id}`, body)
-        .then(() => {
-          success($q, "เพิ่มข้อมูลสำเร็จ");
-          clearForm();
-          modal.value = false;
-          props.getData?.();
-        })
-        .catch((err) => {
-          messageError($q, err);
-        })
-        .finally(() => {
-          hideLoader();
-        });
-    },
-    "ยืนยันการเพิ่มตำแหน่ง",
-    "ต้องการยืนยันการเพิ่มตำแหน่งนี้ใช่หรือไม่?"
-  );
-}
-
-async function clearForm() {
-  formExecutive.id = "";
-  formExecutive.posExecutiveName = "";
-  formExecutive.posExecutivePriority = null;
-  isEdit.value = false;
-}
-
-/**
- * ส่งค่า css ออกไปตามเงื่อนไข
- * @param val true/false
- */
-function inputEdit(val: boolean) {
-  return {
-    "full-width cursor-pointer inputgreen ": val,
-    "full-width cursor-pointer inputgreen": !val,
-  };
-}
-
-function close() {
-  clearForm();
-  modal.value = false;
-}
-watch(
-  () => modal.value,
-  () => {
-    if (modal.value == true) {
-      const dataList = formData.value;
-      formExecutive.id = "";
-      formExecutive.posExecutiveName = "";
-      formExecutive.posExecutivePriority = null;
-      if (isEdit.value == true) {
-        formExecutive.id = dataList.id;
-        formExecutive.posExecutiveName = dataList.posExecutiveName;
-        formExecutive.posExecutivePriority = dataList.posExecutivePriority;
-      }
-    }
-  }
-);
-</script>
-
-<template>
-  <q-dialog v-model="modal" persistent>
-    <q-card style="min-width: 50vw">
-      <form @submit.prevent="validateFormExecutive">
-        <DialogHeader
-          :tittle="
-            isEdit ? `แก้ไขตำแหน่งทางการบริหาร` : 'เพิ่มตำแหน่งทางการบริหาร'
-          "
-          :close="close"
-        />
-        <q-separator />
-
-        <q-card-section>
-          <div class="row q-col-gutter-sm col-12">
-            <div class="col-6">
-              <q-input
-                ref="posExecutiveNameRef"
-                v-model="formExecutive.posExecutiveName"
-                :class="inputEdit(isReadonly)"
-                dense
-                outlined
-                for="#posExecutiveName"
-                label="ชื่อตำแหน่งทางการบริหาร"
-                lazy-rules
-                hide-bottom-space
-                :rules="[
-                  (val) => !!val || `${'กรุณากรอกชื่อตำแหน่งทางการบริหาร'}`,
-                ]"
-              />
-            </div>
-            <div class="col-6">
-              <q-input
-                ref="posExecutivePriorityRef"
-                v-model="formExecutive.posExecutivePriority"
-                :class="inputEdit(isReadonly)"
-                dense
-                outlined
-                type="number"
-                for="#posExecutivePriority"
-                label="ลำดับความสำคัญ"
-                lazy-rules
-                hide-bottom-space
-                :rules="[(val) => !!val || `${'กรุณากรอกลำดับความสำคัญ'}`]"
-              />
-            </div>
-          </div>
-        </q-card-section>
-        <q-separator />
-        <q-card-actions align="right" class="bg-white text-teal">
-          <q-btn type="submit" :label="`บันทึก`" color="public" />
-        </q-card-actions>
-      </form>
-    </q-card>
-  </q-dialog>
-</template>
diff --git a/src/modules/01_metadata/components/position/DialogFormExecutive.vue b/src/modules/01_metadata/components/position/DialogFormExecutive.vue
new file mode 100644
index 00000000..4b938ea0
--- /dev/null
+++ b/src/modules/01_metadata/components/position/DialogFormExecutive.vue
@@ -0,0 +1,175 @@
+<script setup lang="ts">
+import { ref, reactive, watch } from "vue";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+
+import type { RowListForm } from "@/modules/01_metadata/interface/request/position/index";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+const $q = useQuasar();
+const { dialogConfirm, showLoader, success, hideLoader, messageError } =
+  useCounterMixin();
+
+/**
+ * props
+ */
+const modal = defineModel<boolean>("executive", { required: true }); // popup
+const formData = defineModel<any>("formData", { required: true }); // ข้อมูลที่ต้องการแก้ไข
+const isEdit = defineModel<any>("edit", { required: true }); // สถานะการแก้ไข
+const props = defineProps({
+  getData: Function,
+});
+
+const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
+// ตัวแปรตำแหน่งทางการบริหาร
+const formExecutive = reactive<RowListForm>({
+  id: "",
+  posExecutiveName: "",
+  posExecutivePriority: null,
+});
+
+/**
+ * ยืนยันการบันทึกข้อมูลรายการตำแหน่งทางการบริหาร
+ *
+ * ุ ถ้า isEdit เป็น false จะทำการเพิ่มข้อมูลรายการตำแหน่งทางการบริหาร ถ่้าไม่จะทำการแก้ไขข้อมูล
+ * เมื่อบันทึกข้อมูลเสร็จจะเรียก function props.getData() เพื่อดึงข้อมูลรายการตำแหน่งทางการบริหาร
+ *
+ */
+function onSubmit() {
+  dialogConfirm($q, async () => {
+    showLoader();
+    const body = {
+      posExecutiveName: formExecutive.posExecutiveName,
+      posExecutivePriority: formExecutive.posExecutivePriority, //สายงาน
+    };
+
+    // กำหนด Path API
+    const path = isEdit.value
+      ? config.API.orgPosExecutive + `/${formExecutive.id}`
+      : config.API.orgPosExecutive;
+
+    // กำหนด method
+    const method = isEdit.value ? "put" : "post";
+
+    await http[method](path, body)
+      .then(async () => {
+        await props.getData?.();
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        close();
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+/**
+ * ปิด popup ฟอร์มข้อมูลรายการตำแหน่งทางการบริหาร
+ *
+ * และเคลียร  formExecutive ข้อมูลรายการตำแหน่งทางการบริหารให้เป็นค่าว่าง
+ */
+function close() {
+  modal.value = false;
+
+  formExecutive.id = "";
+  formExecutive.posExecutiveName = "";
+  formExecutive.posExecutivePriority = null;
+  isEdit.value = false;
+}
+
+/**
+ * ส่งค่า css ออกไปตามเงื่อนไข
+ * @param val true/false
+ */
+function inputEdit(val: boolean) {
+  return {
+    "full-width cursor-pointer inputgreen ": val,
+    "full-width cursor-pointer inputgreen": !val,
+  };
+}
+
+/**
+ * เมื่อค่า modal เป็น true จะทำการรีเซ็ตค่าของฟอร์ม formExecutive
+ *
+ * และเมื่อ isEdit เป็น true จะกำหนดข้อมูลลงในฟอร์ม formExecutive
+ */
+watch(
+  () => modal.value,
+  async () => {
+    if (modal.value) {
+      const dataList = await formData.value;
+      formExecutive.id = "";
+      formExecutive.posExecutiveName = "";
+      formExecutive.posExecutivePriority = null;
+      if (isEdit.value == true) {
+        formExecutive.id = dataList.id;
+        formExecutive.posExecutiveName = dataList.posExecutiveName;
+        formExecutive.posExecutivePriority = dataList.posExecutivePriority;
+      }
+    }
+  }
+);
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="min-width: 350px">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader
+          :tittle="
+            isEdit ? `แก้ไขตำแหน่งทางการบริหาร` : 'เพิ่มตำแหน่งทางการบริหาร'
+          "
+          :close="close"
+        />
+        <q-separator />
+
+        <q-card-section>
+          <div class="row q-col-gutter-sm col-12">
+            <div class="col-12">
+              <q-input
+                ref="posExecutiveNameRef"
+                v-model="formExecutive.posExecutiveName"
+                :class="inputEdit(isReadonly)"
+                dense
+                outlined
+                for="#posExecutiveName"
+                label="ชื่อตำแหน่งทางการบริหาร"
+                lazy-rules
+                hide-bottom-space
+                :rules="[
+                  (val:string) => !!val || `${'กรุณากรอกชื่อตำแหน่งทางการบริหาร'}`,
+                ]"
+              />
+            </div>
+            <div class="col-12">
+              <q-input
+                ref="posExecutivePriorityRef"
+                v-model="formExecutive.posExecutivePriority"
+                :class="inputEdit(isReadonly)"
+                dense
+                outlined
+                type="number"
+                for="#posExecutivePriority"
+                label="ลำดับความสำคัญ"
+                lazy-rules
+                hide-bottom-space
+                :rules="[(val:string) => !!val || `${'กรุณากรอกลำดับความสำคัญ'}`]"
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right">
+          <q-btn type="submit" :label="`บันทึก`" color="public" />
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
diff --git a/src/modules/01_metadata/components/position/DialogAddPosition.vue b/src/modules/01_metadata/components/position/DialogFormPosition.vue
similarity index 51%
rename from src/modules/01_metadata/components/position/DialogAddPosition.vue
rename to src/modules/01_metadata/components/position/DialogFormPosition.vue
index c31ff092..de8b5d4e 100644
--- a/src/modules/01_metadata/components/position/DialogAddPosition.vue
+++ b/src/modules/01_metadata/components/position/DialogFormPosition.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { ref, reactive, watch, defineProps } from "vue";
 import { useQuasar } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
 
 import type {
   DataOption,
@@ -10,136 +12,152 @@ import type {
   OptionType,
   OptionLevel,
   OptionExecutive,
+  FormPositionSelect,
 } from "@/modules/01_metadata/interface/request/position/index";
+import type { ResPosType } from "@/modules/01_metadata/interface/response/position/Main";
 
 import DialogHeader from "@/components/DialogHeader.vue";
 
-import { useCounterMixin } from "@/stores/mixin";
-
-const executiveOpsMain = ref<DataOption[]>([]);
-const levelOps = ref<DataOption[]>([]);
-const levelOpsMain = ref<DataOption[]>([]);
-const typeOps = ref<DataOption[]>([]);
-const typeOpsMain = ref<DataOption[]>([]);
-const dataLevel = ref<any>();
-const executiveOps = ref<DataOption[]>([]);
-const formPositionSelect = reactive<FormPositionSelectDialog>({
-  positionId: "",
-  positionName: "",
-  positionField: "",
-  positionType: "",
-  positionLevel: "",
-  positionExecutive: "",
-  positionExecutiveField: "",
-  positionArea: "",
-});
 const $q = useQuasar();
-const isSpecial = ref<boolean>(false);
-const props = defineProps({
-  getData: Function,
-});
 const { dialogConfirm, showLoader, success, hideLoader, messageError } =
   useCounterMixin();
 
-const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
+/**
+ * props
+ */
 const modal = defineModel<boolean>("addPosition", { required: true });
-const formData = defineModel<any>("formData", { required: true });
+const formData = defineModel<FormPositionSelect>("formData", {
+  required: true,
+});
 const editCheck = defineModel<boolean>("editCheck", { required: true });
 const copyCheck = defineModel<boolean>("copyCheck", { required: true });
+const props = defineProps({
+  getData: Function,
+});
 
-/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
-function validateFormPositionEdit() {
-  // const hasError = [];
-  // for (const key in objectPositionSelectRef) {
-  //   if (Object.prototype.hasOwnProperty.call(objectPositionSelectRef, key)) {
-  //     const property = objectPositionSelectRef[key];
-  //     if (property.value && typeof property.value.validate === "function") {
-  //       const isValid = property.value.validate();
-  //       hasError.push(isValid);
-  //     }
-  //   }
-  // }
-  // if (hasError.every((result) => result === true)) {
-  if (editCheck.value == true) {
-    saveSelectEdit();
-  } else {
-    onSubmitSelectEdit();
-  }
-  // }
+// ตัวเลือก
+const executiveOpsMain = ref<DataOption[]>([]); //ตำแหน่งทางการบริหารหลัก
+const executiveOps = ref<DataOption[]>([]); //ตำแหน่งทางการบริหาร
+const typeOpsMain = ref<DataOption[]>([]); // ประเภทตำแหน่งหลัก
+const typeOps = ref<DataOption[]>([]); // ประเภทตำแหน่ง
+const levelOpsMain = ref<DataOption[]>([]); // ระดับตำแหน่งหลัก
+const levelOps = ref<DataOption[]>([]); // ระดับตำแหน่ง
+
+const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
+const dataType = ref<ResPosType[]>([]); // ข้อมูลประเภทตำแหน่ง
+// ฟอร์มข้อมูลตำแหน่ง
+const formPositionSelect = reactive<FormPositionSelectDialog>({
+  positionId: "",
+  positionName: "", //ตำแหน่งในสายงาน
+  positionField: "", //สายงาน
+  positionType: "", //*ประเภทตำแหน่ง
+  positionLevel: "", // ระดับตำแหน่ง
+  positionExecutive: "", //ตำแหน่งทางการบริหาร
+  positionExecutiveField: "", //ด้านทางการบริหาร
+  positionArea: "", //ด้าน/สาขา
+});
+const isSpecial = ref<boolean>(false); // เฉพาะสายงานที่กำหนด
+
+/**
+ * เรียกรายการประเภทตำแหน่ง
+ *
+ * ฟังก์ชันนี้ดึงข้อมูลประเภทตำแหน่งจาก API และเซ็ตค่าให้กับตัวเลือกประเภทตำแหน่ง
+ */
+async function fetchType() {
+  showLoader();
+  await http
+    .get(config.API.orgPosType)
+    .then(async (res) => {
+      const data = await res.data.result;
+      dataType.value = data; // เก็บข้อมูลไว้ในตัวแปร dataType
+      typeOpsMain.value = data.map((e: OptionType) => ({
+        id: e.id,
+        name: e.posTypeName,
+      }));
+      typeOps.value = typeOpsMain.value;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
-/** ฟังชั่น บันทึก */
-function saveSelectEdit() {
-  dialogConfirm(
-    $q,
-    async () => {
-      showLoader();
-      const body = {
-        posDictName: formPositionSelect.positionName,
-        posDictField: formPositionSelect.positionField, //สายงาน
-        posTypeId: formPositionSelect.positionType, //*ประเภทตำแหน่ง
-        posLevelId: formPositionSelect.positionLevel, //*ระดับตำแหน่ง
-        posExecutiveId: formPositionSelect.positionExecutive, //ตำแหน่งทางการบริหาร
-        posDictExecutiveField: formPositionSelect.positionExecutiveField, //ด้านทางการบริหาร
-        posDictArea: formPositionSelect.positionArea, //ด้าน/สาขา
-        isSpecial: isSpecial.value,
-      };
-      await http
-        .put(config.API.orgPosPositionById(formPositionSelect.positionId), body)
-        .then(() => {
-          success($q, "เพิ่มข้อมูลสำเร็จ");
-          clearFormPositionSelect();
-          modal.value = false;
-          editCheck.value = false;
-          props.getData?.();
+/**
+ * เรียกรายการตำแหน่งทางการบริหาร
+ *
+ * ฟังก์ชันนี้ดึงข้อมูลตำแหน่งทางการบริหารจาก API และเซ็ตค่าให้กับตัวเลือกตำแหน่งทางการบริหาร
+ */
+async function fetchExecutive() {
+  showLoader();
+  await http
+    .get(config.API.orgPosExecutive)
+    .then(async (res) => {
+      executiveOpsMain.value = await res.data.result.map(
+        (e: OptionExecutive) => ({
+          id: e.id,
+          name: e.posExecutiveName,
         })
-        .catch((err) => {
-          messageError($q, err);
-        })
-        .finally(() => {
-          hideLoader();
-        });
-    },
-    "ยืนยันการเพิ่มตำแหน่ง",
-    "ต้องการยืนยันการเพิ่มตำแหน่งนี้ใช่หรือไม่?"
-  );
-}
-/** ฟังชั่น บันทึก */
-function onSubmitSelectEdit() {
-  dialogConfirm(
-    $q,
-    async () => {
-      showLoader();
-      const body = {
-        posDictName: formPositionSelect.positionName,
-        posDictField: formPositionSelect.positionField, //สายงาน
-        posTypeId: formPositionSelect.positionType, //*ประเภทตำแหน่ง
-        posLevelId: formPositionSelect.positionLevel, //*ระดับตำแหน่ง
-        posExecutiveId: formPositionSelect.positionExecutive,
-        posDictExecutiveField: formPositionSelect.positionExecutiveField, //ด้านทางการบริหาร
-        posDictArea: formPositionSelect.positionArea, //ด้าน/สาขา
-        isSpecial: isSpecial.value,
-      };
-      await http
-        .post(config.API.orgPosPosition, body)
-        .then(() => {
-          success($q, "เพิ่มข้อมูลสำเร็จ");
-          clearFormPositionSelect();
-          modal.value = false;
-          editCheck.value = false;
-        })
-        .catch((err) => {
-          messageError($q, err);
-        })
-        .finally(() => {
-          hideLoader();
-        });
-    },
-    "ยืนยันการเพิ่มตำแหน่ง",
-    "ต้องการยืนยันการเพิ่มตำแหน่งนี้ใช่หรือไม่?"
-  );
+      );
+      executiveOps.value = executiveOpsMain.value;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
+/**
+ * บันทึกข้อมูลตำแหน่ง
+ *
+ * editCheck เป็น true จำทำการแก้ไขข้อมูล ถ้าไม่จะเป็นการ เพิ่มข้อมูล
+ * บันทึกข้อมูลเสร็จ จะทำการโหลด ข้อมูลรายการตำแหน่งข้าราชการ ฯ ใหม่
+ */
+function onSubmit() {
+  dialogConfirm($q, async () => {
+    showLoader();
+    const body = {
+      posDictName: formPositionSelect.positionName,
+      posDictField: formPositionSelect.positionField, //สายงาน
+      posTypeId: formPositionSelect.positionType, //*ประเภทตำแหน่ง
+      posLevelId: formPositionSelect.positionLevel, //*ระดับตำแหน่ง
+      posExecutiveId: formPositionSelect.positionExecutive, //ตำแหน่งทางการบริหาร
+      posDictExecutiveField: formPositionSelect.positionExecutiveField, //ด้านทางการบริหาร
+      posDictArea: formPositionSelect.positionArea, //ด้าน/สาขา
+      isSpecial: isSpecial.value,
+    };
+
+    // กำหนด path API
+    const path = editCheck.value
+      ? config.API.orgPosPositionById(formPositionSelect.positionId)
+      : config.API.orgPosPosition;
+    // กำหนด method
+    const method = editCheck.value ? http.put : http.post;
+    await method(path, body)
+      .then(async () => {
+        await props.getData?.();
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        modal.value = false;
+        editCheck.value = false;
+        clearFormPositionSelect();
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+/**
+ * เคลียร์ข้อมูลในฟอร์มการเลือกตำแหน่ง
+ *
+ * รีเซ็ตค่าทุกฟิลด์ใน formPositionSelect ให้เป็นค่า default
+ */
 async function clearFormPositionSelect() {
   formPositionSelect.positionId = "";
   formPositionSelect.positionName = "";
@@ -151,8 +169,39 @@ async function clearFormPositionSelect() {
   formPositionSelect.positionArea = "";
 }
 
+/**
+ * อัปเดตตัวเลือกประเภทตำแหน่งและระดับตำแหน่งที่สอดคล้องกับประเภทที่เลือก
+ * @param val id ของประเภทตำแหน่งที่เลือก
+ */
+async function updateSelectType(val: string) {
+  // หาระดับตำแหน่งที่ตรงกับประเภทตำแหน่งที่เลือก
+  const listLevel = dataType.value.find((e: ResPosType) => e.id === val);
+
+  // ถ้าพบประเภทตำแหน่งที่ตรงกัน ให้กำหนดค่าตัวเลือกสำหรับระดับตำแหน่ง
+  if (listLevel) {
+    levelOpsMain.value = listLevel.posLevels.map((e: OptionLevel) => ({
+      id: e.id,
+      name: e.posLevelName,
+    }));
+    levelOps.value = levelOpsMain.value;
+  }
+}
+
+/**
+ * ปิด popup ฟอร์มข้อมูลตำแหน่ง
+ *
+ * และทำการเรียก function clearFormPositionSelect() เพื่อเคลียร์ข้อมูลในฟอร์มการเลือกตำแหน่ง
+ */
+function close() {
+  modal.value = false;
+  editCheck.value = false;
+  copyCheck.value = false;
+  clearFormPositionSelect();
+}
+
 /**
  * ส่งค่า css ออกไปตามเงื่อนไข
+ *
  * @param val true/false
  */
 function inputEdit(val: boolean) {
@@ -162,63 +211,24 @@ function inputEdit(val: boolean) {
   };
 }
 
-/** function เรียกรายการประเภทตำแหน่ง */
-async function fetchType() {
-  showLoader();
-  await http
-    .get(config.API.orgPosType)
-    .then((res) => {
-      const data = res.data.result;
-      dataLevel.value = data;
-      typeOpsMain.value = data.map((e: OptionType) => ({
-        id: e.id,
-        name: e.posTypeName,
-      }));
-      typeOps.value = typeOpsMain.value;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      setTimeout(() => {
-        hideLoader();
-      }, 1000);
-    });
-}
-
-/** function เรียกรายการตำแหน่งทางการบริหาร */
-async function fetchExecutive() {
-  showLoader();
-  await http
-    .get(config.API.orgPosExecutive)
-    .then((res) => {
-      executiveOpsMain.value = res.data.result.map((e: OptionExecutive) => ({
-        id: e.id,
-        name: e.posExecutiveName,
-      }));
-      executiveOps.value = executiveOpsMain.value;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      setTimeout(() => {
-        hideLoader();
-      }, 1000);
-    });
-}
-
+/**
+ * watch ค่าของ modal popup
+ */
 watch(
   () => modal.value,
-  () => {
+  async () => {
+    // ถ้า modal ถูกเปิดขึ้น
     if (modal.value == true) {
-      fetchType();
-      fetchExecutive();
+      // เรียกฟังก์ชัน fetchType และ fetchExecutive พร้อมกัน เพื่อดึงข้อมูลประเภทและข้อมูลตำแหน่งทางการบริหาร
+      await Promise.all([fetchType(), fetchExecutive()]);
+
+      // ถ้าอยู่ในโหมดแก้ไขหรือคัดลอกข้อมูล
       if (editCheck.value || copyCheck.value) {
-        const dataList = formData.value;
-        setTimeout(() => {
-          updateSelectType(dataList.posTypeId);
-        }, 1000);
+        const dataList = formData.value; // ดึงข้อมูลที่ต้องการจาก formData
+
+        // อัปเดตตัวเลือกประเภทตำแหน่งตามข้อมูลที่เลือก
+        await updateSelectType(dataList.posTypeId);
+
         formPositionSelect.positionId = dataList.positionId;
         formPositionSelect.positionName = dataList.positionName;
         formPositionSelect.positionField = dataList.positionField;
@@ -233,28 +243,12 @@ watch(
     }
   }
 );
-
-function updateSelectType(val: string) {
-  const listLevel = dataLevel.value.find((e: any) => e.id === val);
-  levelOpsMain.value = listLevel.posLevels.map((e: OptionLevel) => ({
-    id: e.id,
-    name: e.posLevelName,
-  }));
-  levelOps.value = levelOpsMain.value;
-}
-
-function close() {
-  modal.value = false;
-  editCheck.value = false;
-  copyCheck.value = false;
-  clearFormPositionSelect();
-}
 </script>
 
 <template>
   <q-dialog v-model="modal" persistent>
     <q-card style="min-width: 50vw">
-      <q-form greedy @submit.prevent="validateFormPositionEdit">
+      <q-form greedy @submit.prevent="onSubmit">
         <DialogHeader
           :tittle="`${editCheck ? 'แก้ไขข้อมูลตำแหน่ง' : 'เพิ่มข้อมูลตำแหน่ง'}`"
           :close="close"
@@ -274,7 +268,7 @@ function close() {
                 label="ตำแหน่งในสายงาน"
                 lazy-rules
                 hide-bottom-space
-                :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งในสายงาน'}`]"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่งในสายงาน'}`]"
               />
             </div>
             <div class="col-6">
@@ -301,7 +295,7 @@ function close() {
                 label="สายงาน"
                 lazy-rules
                 hide-bottom-space
-                :rules="[(val) => !!val || `${'กรุณากรอกสายงาน'}`]"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกสายงาน'}`]"
               />
             </div>
             <div class="col-6">
@@ -320,7 +314,7 @@ function close() {
                 option-value="id"
                 lazy-rules
                 hide-bottom-space
-                :rules="[(val) => !!val || `${'กรุณาเลือกประเภทตำแหน่ง'}`]"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือกประเภทตำแหน่ง'}`]"
               />
             </div>
             <div class="col-6">
@@ -339,7 +333,7 @@ function close() {
                 option-value="id"
                 lazy-rules
                 hide-bottom-space
-                :rules="[(val) => !!val || `${'กรุณาเลือกระดับตำแหน่ง'}`]"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือกระดับตำแหน่ง'}`]"
               />
             </div>
             <div class="col-6">
diff --git a/src/modules/01_metadata/components/position/ListLevel.vue b/src/modules/01_metadata/components/position/ListLevel.vue
new file mode 100644
index 00000000..9297ad2c
--- /dev/null
+++ b/src/modules/01_metadata/components/position/ListLevel.vue
@@ -0,0 +1,485 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+
+import { useRouter, useRoute } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { usePositionDataStore } from "@/modules/01_metadata/stores/positionListStore";
+import { useMainOptionDataStore } from "@/modules/01_metadata/stores/main";
+
+import type { QInput, QTableProps } from "quasar";
+
+import dialogHeader from "@/components/DialogHeader.vue";
+
+const $q = useQuasar();
+const route = useRoute();
+const router = useRouter();
+const store = usePositionDataStore();
+const storeOption = useMainOptionDataStore();
+const {
+  dialogRemove,
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+} = useCounterMixin();
+
+//table
+const filterKeyword = ref<string>(""); //คำค้นหา
+const columns = [
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px; width:0px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posLevelName",
+    align: "left",
+    label: "ชื่อระดับตำแหน่ง",
+    sortable: true,
+    field: "posLevelName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "posTypeName",
+    align: "left",
+    label: "ประเภทตำแหน่ง",
+    sortable: true,
+    field: "posTypeName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "posLevelRank",
+    align: "left",
+    label: "ระดับของระดับตำแหน่ง",
+    sortable: true,
+    field: "posLevelRank",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "posLevelAuthority",
+    align: "left",
+    label: "ผู้มีอำนาจสั่งบรรจุ",
+    sortable: true,
+    field: "posLevelAuthority",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+
+  {
+    name: "createdAt",
+    align: "center",
+    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: "center",
+    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 visibleColumns = ref<string[]>([
+  "no",
+  "posTypeName",
+  "posLevelName",
+  "posLevelRank",
+  "posLevelAuthority",
+]);
+
+const id = ref<string>(route.params.id.toString()); //ประเภทตำแหน่ง
+const posName = ref<string>(""); // ชื่อประเภทตำแหน่ง
+const dialog = ref<boolean>(false); // modal popu เพิ่มข้อมูล,แก้ไข
+const dialogStatus = ref<string>(""); //สถานการแก้ไข
+const editId = ref<string>(""); // id ระดับตำแหน่ง
+
+const posLevelName = ref<string>(""); // ชื่อระดับตำแหน่ง
+const posLevelRank = ref<number>(); // ระดับ
+const posLevelAuthority = ref<string>(""); //ผู้มีอำนวจ
+
+/**
+ * ดึงข้อมูลรายการระดับประเภทตำแหน่งตาม id ประเภทตำแหน่ง
+ *
+ * กำหนดชื่อของ ประเภทตำแหน่ง ในตัวแปร posName.velue
+ * บันทึกข้อมูลรายการระดับประเภทตำแหน่งใน Store positionTypeStore
+ */
+async function fetchData() {
+  showLoader();
+  await http
+    .get(config.API.orgPosTypeId(id.value))
+    .then(async (res) => {
+      posName.value = res.data.result.posTypeName;
+      store.save(res.data.result.posLevels);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * ยืนยันการบันทึกข้อมูลรายการระดับของประเภทตำแหน่ง
+ *
+ * ุ ถ้า dialogStatus เป็น 'create' จะทำการเพิ่มข้อมูลรายการระดับของประเภทตำแหน่ง ถ่้าไม่จะทำการแก้ไขข้อมูล
+ * เมื่อบันทึกข้อมูลเสร็จจะเรียก function fetchData() เพื่อดึงข้อมูลระดับของประเภทตำแหน่งใหม่
+ *
+ */
+async function onSubmit() {
+  if (
+    posLevelName.value.length > 0 &&
+    posLevelAuthority.value.length > 0 &&
+    posLevelRank.value !== undefined &&
+    posLevelRank.value > 0
+  ) {
+    dialogConfirm($q, async () => {
+      showLoader();
+      // กำหนด Path API
+      const path =
+        dialogStatus.value === "create"
+          ? config.API.orgPosLevel // เพิ่มรายการระดับของประเภทตำแหน่ง
+          : config.API.orgPosLevelId(editId.value); // แก้ไขรายการระดับของประเภทตำแหน่ง
+
+      // กำหนด method
+      const method = dialogStatus.value === "create" ? "post" : "put";
+
+      await http[method](path, {
+        posLevelName: posLevelName.value,
+        posLevelRank: posLevelRank.value,
+        posLevelAuthority:
+          posLevelAuthority.value == "" ? "" : posLevelAuthority.value,
+        posTypeId: id.value,
+      })
+        .then(async () => {
+          await fetchData();
+          success($q, "บันทึกข้อมูลสำเร็จ");
+          closeDialog();
+        })
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    });
+  }
+}
+
+/**
+ *  ยืนยันการลบข้อมูลรายการระดับของประเภทตำแหน่ง
+ * @param id รายการระดับของประเภทตำแหน่ง
+ */
+async function deleteData(id: string) {
+  await http
+    .delete(config.API.orgPosLevelId(id))
+    .then(async () => {
+      await fetchData();
+      success($q, "ลบข้อมูลสำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * ปิด popup ฟอร์มข้อมูลระดับของประเภทตำแหน่ง
+ */
+function closeDialog() {
+  dialog.value = false;
+}
+
+/**
+ * hook ทำงานเมื่อ Components ถูกเรียกใช้งาน
+ */
+onMounted(async () => {
+  await 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)"
+    />
+    รายการระดับของประเภทตำแหน่ง{{ posName }}
+  </div>
+
+  <q-card flat bordered>
+    <q-card-section>
+      <q-toolbar style="padding: 0">
+        <q-btn
+          flat
+          round
+          color="primary"
+          icon="add"
+          @click.stop="
+            () => {
+              dialogStatus = 'create';
+              dialog = true;
+              posLevelName = '';
+              posLevelRank = undefined;
+              posLevelAuthority = '';
+            }
+          "
+        >
+          <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 auto-width />
+            <q-th v-for="col in props.cols" :key="col.name" :props="props">
+              <span class="text-weight-bold">{{ col.label }}</span>
+            </q-th>
+          </q-tr>
+        </template>
+        <template v-slot:body="props">
+          <q-tr :props="props">
+            <q-td auto-width>
+              <q-btn
+                color="edit"
+                flat
+                dense
+                round
+                class="q-mr-xs"
+                icon="edit"
+                clickable
+                @click.stop="
+                  () => {
+                    dialogStatus = 'edit';
+                    editId = props.row.id;
+                    posLevelName = props.row.posLevelName;
+                    posLevelRank = props.row.posLevelRank;
+                    if (props.row.posLevelAuthority === 'หัวหน้าหน่วยงาน') {
+                      posLevelAuthority = 'HEAD';
+                    } else if (props.row.posLevelAuthority === 'ปลัด') {
+                      posLevelAuthority = 'DEPUTY';
+                    } else {
+                      posLevelAuthority = 'GOVERNOR';
+                    }
+
+                    dialog = true;
+                  }
+                "
+              >
+                <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+              </q-btn>
+              <q-btn
+                color="red"
+                flat
+                dense
+                round
+                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-td v-for="(col, index) in props.cols" :key="col.id">
+              <div v-if="col.name === 'no'">
+                {{ props.rowIndex + 1 }}
+              </div>
+              <div v-if="col.name === 'posTypeName'">
+                {{ posName }}
+              </div>
+              <div v-else>
+                {{ col.value }}
+              </div>
+            </q-td>
+          </q-tr>
+        </template>
+      </d-table>
+    </q-card-section>
+    <!-- <ListLevelDetail v-model:posName="posName" /> -->
+  </q-card>
+
+  <q-dialog v-model="dialog" class="dialog" persistent>
+    <q-card style="width: 350px">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <dialog-header
+          :tittle="dialogStatus == 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
+          :close="closeDialog"
+        />
+
+        <q-separator />
+        <q-card-section class="row q-gutter-y-md">
+          <div class="col-12">
+            <q-input
+              outlined
+              ref="posLevelNameRef"
+              v-model="posLevelName"
+              label="ชื่อระดับตำแหน่ง"
+              dense
+              lazy-rules
+              borderless
+              bg-color="white"
+              hide-bottom-space
+              :rules="[(val:string) => val.length > 0 || 'กรุณากรอกระดับตำแหน่ง']"
+              class="inputgreen"
+            />
+          </div>
+
+          <div class="col-12">
+            <q-input
+              ref="posLevelRankRef"
+              outlined
+              v-model="posLevelRank"
+              label="ระดับ"
+              dense
+              lazy-rules
+              borderless
+              min="1"
+              bg-color="white"
+              :rules="[(val:number) => val > 0 || 'กรุณากรอกระดับ']"
+              hide-bottom-space
+              mask="############"
+              class="inputgreen"
+            />
+          </div>
+
+          <div class="col-12">
+            <q-select
+              ref="posLevelAuthorityRef"
+              outlined
+              v-model="posLevelAuthority"
+              emit-value
+              map-options
+              :options="storeOption.posLevelAuthorityOption"
+              option-value="id"
+              label="ผู้มีอำนาจสั่งบรรจุ"
+              dense
+              lazy-rules
+              :rules="[(val:string) => !!val || 'กรุณาเลือกผู้มีอำนาจสั่งบรรจุ']"
+              borderless
+              bg-color="white"
+              hide-bottom-space
+              class="inputgreen"
+            />
+          </div>
+
+          <div class="col-12">
+            <q-select
+              ref="posTypeIdRef"
+              v-model="posName"
+              label="ประเภทตำแหน่ง"
+              outlined
+              dense
+              bg-color="white"
+              options-cover
+              hide-bottom-space
+              readonly
+            />
+          </div>
+        </q-card-section>
+        <q-separator />
+
+        <q-card-actions align="right">
+          <q-btn
+            id="onSubmit"
+            type="submit"
+            label="บันทึก"
+            color="public"
+            class="q-px-md"
+          >
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/01_metadata/interface/response/position/Main.ts b/src/modules/01_metadata/interface/response/position/Main.ts
new file mode 100644
index 00000000..7af19bb0
--- /dev/null
+++ b/src/modules/01_metadata/interface/response/position/Main.ts
@@ -0,0 +1,15 @@
+interface ResPosType {
+  id: string;
+  posTypeName: string;
+  posTypeRank: number;
+  posLevels: PosLevels[];
+}
+
+interface PosLevels {
+  id: string;
+  posLevelAuthority: string;
+  posLevelName: string;
+  posLevelRank: number;
+}
+
+export type { ResPosType };
diff --git a/src/modules/01_metadata/router.ts b/src/modules/01_metadata/router.ts
index 36a44a6a..c177ad07 100644
--- a/src/modules/01_metadata/router.ts
+++ b/src/modules/01_metadata/router.ts
@@ -16,7 +16,7 @@ const personalSubDistrict = () =>
 const positionPage = () =>
   import("@/modules/01_metadata/views/02_position.vue"); //ข้อมูลตำแหน่งข้าราชการ ฯ
 const positionLevelPage = () =>
-  import("@/modules/01_metadata/components/position/03ListLevel.vue"); //รายการระดับของประเภทตำแหน่งทั่วไป
+  import("@/modules/01_metadata/components/position/ListLevel.vue"); //รายการระดับของประเภทตำแหน่งทั่วไป
 
 /**
  * ข้อมูลตำแหน่งลูกจ้างประจำ
diff --git a/src/modules/01_metadata/stores/positionTypeStore.ts b/src/modules/01_metadata/stores/positionTypeStore.ts
index 255aa3a3..a9210f5e 100644
--- a/src/modules/01_metadata/stores/positionTypeStore.ts
+++ b/src/modules/01_metadata/stores/positionTypeStore.ts
@@ -1,17 +1,23 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+
 import type {
   DataResponse,
   DataRow,
 } from "../interface/response/position/ListType";
-import { useCounterMixin } from "@/stores/mixin";
 
 const { date2Thai } = useCounterMixin();
 
 export const usePositionTypeDataStore = defineStore("PositionTypeData", () => {
   const row = ref<DataRow[]>([]);
 
-  function save(data: DataResponse[]) {
+  /**
+   * บันทึกข้อมูลลงใน  row.value
+   * @param data ข้อมูลรายการจาก API
+   */
+  async function save(data: DataResponse[]) {
     const list = data.map((e) => ({
       ...e,
       posTypes: undefined,
diff --git a/src/modules/01_metadata/views/02_position.vue b/src/modules/01_metadata/views/02_position.vue
index 055108a1..2c4aa96e 100644
--- a/src/modules/01_metadata/views/02_position.vue
+++ b/src/modules/01_metadata/views/02_position.vue
@@ -1,15 +1,21 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 
-import ListPosition from "@/modules/01_metadata/components/position/01ListPosition.vue";
-import ListType from "@/modules/01_metadata/components/position/02ListType.vue";
-import ListExecutive from "@/modules/01_metadata/components/position/04ListExecutive.vue";
-
 import { usePositionDataStore } from "../stores/positionListStore";
 
-const tabs = ref<Array<any>>([]);
+import type { MainTabs } from "@/modules/01_metadata/interface/index/Main";
+
+import ListPosition from "@/modules/01_metadata/components/position/01ListPosition.vue"; //ตำแหน่ง
+import ListType from "@/modules/01_metadata/components/position/02ListType.vue"; // รายการประเภทตำแหน่ง
+import ListExecutive from "@/modules/01_metadata/components/position/03ListExecutive.vue"; // ตำแหน่งทางการบริหาร
+
 const store = usePositionDataStore();
 
+const tabs = ref<Array<MainTabs>>([]); // รายการ Tab
+
+/**
+ * hook ทำงานเมื่อ Components ถูกเรียกใช้งาน
+ */
 onMounted(() => {
   const tabsPerson = [
     { label: "ตำแหน่ง", value: "list_position" },
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index b66d1ed0..260230f6 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -55,21 +55,22 @@ async function getData(index: number) {
         totalInbox.value = await res.data.result.total;
 
         let list: DataInbox[] = [];
-        data.map((e: ResponseInbox) => {
-          list.push({
-            no: e.id ?? "",
-            sender:
-              e.createdFullName == "" || e.createdFullName == null
-                ? "เจ้าหน้าที่"
-                : e.createdFullName,
-            subject: e.subject ?? "",
-            timereceive: new Date(e.receiveDate),
-            body: e.body ?? "",
-            payload: e.payload,
-            ratingModel: 0,
-            isOpen: e.isOpen,
+        data &&
+          data.map((e: ResponseInbox) => {
+            list.push({
+              no: e.id ?? "",
+              sender:
+                e.createdFullName == "" || e.createdFullName == null
+                  ? "เจ้าหน้าที่"
+                  : e.createdFullName,
+              subject: e.subject ?? "",
+              timereceive: new Date(e.receiveDate),
+              body: e.body ?? "",
+              payload: e.payload,
+              ratingModel: 0,
+              isOpen: e.isOpen,
+            });
           });
-        });
         inboxList.value.push(...list);
 
         if (inboxList.value.length > 0 && index === 1) {
diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index 32c6f0c5..7ce59e15 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -98,27 +98,28 @@ async function getDataNotification(index: number, type: string) {
   };
   await http
     .get(config.API.msgNotificate + `?page=${index}&pageSize=${10}`)
-    .then((res: any) => {
+    .then((res) => {
       const response = res.data.result.data;
       totalInbox.value = res.data.result.total;
       let list: notiType[] = [];
       if (type === "DEL") {
         notiList.value = [];
       }
-      response.map((e: any) => {
-        list.push({
-          id: e.id,
-          sender:
-            e.createdFullName == "" || e.createdFullName == null
-              ? "เจ้าหน้าที่"[0]
-              : e.createdFullName[0],
-          body: e.body ?? "",
-          timereceive: `${date2Thai(e.receiveDate)} ${new Date(
-            e.receiveDate
-          ).toLocaleTimeString("th-TH", thaiOptions)} น.`,
-          isOpen: e.isOpen,
+      response &&
+        response.map((e: any) => {
+          list.push({
+            id: e.id,
+            sender:
+              e.createdFullName == "" || e.createdFullName == null
+                ? "เจ้าหน้าที่"[0]
+                : e.createdFullName[0],
+            body: e.body ?? "",
+            timereceive: `${date2Thai(e.receiveDate)} ${new Date(
+              e.receiveDate
+            ).toLocaleTimeString("th-TH", thaiOptions)} น.`,
+            isOpen: e.isOpen,
+          });
         });
-      });
       notiList.value.push(...list);
       statusLoad.value = totalInbox.value === 0 ? true : false;
     })