diff --git a/src/modules/05_placement/components/Transfer/DialogOrders.vue b/src/modules/05_placement/components/Transfer/DialogOrders.vue
index eed1b283e..df5088ea0 100644
--- a/src/modules/05_placement/components/Transfer/DialogOrders.vue
+++ b/src/modules/05_placement/components/Transfer/DialogOrders.vue
@@ -276,3 +276,5 @@ watch(
     </q-card>
   </q-dialog>
 </template>
+
+<style scoped></style>
diff --git a/src/modules/12_evaluatePersonal/components/Detail/Tab1.vue b/src/modules/12_evaluatePersonal/components/Detail/Tab1.vue
index 6962fbb85..854f43546 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/Tab1.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/Tab1.vue
@@ -213,7 +213,7 @@ onBeforeMount(async () => {
   <PopupHistory :modal="modalHistory" :close="onClickPopupHistory" :id="id" />
 </template>
 
-<style scoped>
+<style>
 .q-stepper--vertical .q-stepper__step-inner {
   padding: 0;
 }
diff --git a/src/modules/13_salary/components/SalaryChart/DialogFormMain.vue b/src/modules/13_salary/components/01_Salary/DialogFormMain.vue
similarity index 95%
rename from src/modules/13_salary/components/SalaryChart/DialogFormMain.vue
rename to src/modules/13_salary/components/01_Salary/DialogFormMain.vue
index 56cee398d..b80fcdde7 100644
--- a/src/modules/13_salary/components/SalaryChart/DialogFormMain.vue
+++ b/src/modules/13_salary/components/01_Salary/DialogFormMain.vue
@@ -44,7 +44,7 @@ const props = defineProps({
   },
 });
 
-const salaryId = ref<string>("");
+const salaryId = ref<string>(""); //id รายการผังบัญชีเงินเดือน
 const formData = reactive<FormData>({
   name: "", //*ชื่อผังบัญชีอัตราเงินเดือน
   posTypeId: "", //*ประเภทของตำแหน่ง
@@ -57,12 +57,13 @@ const formData = reactive<FormData>({
   isSpecial: false,
 });
 
-const posType = ref<SalaryPosType[]>([]);
-const salaryPosTypeOptionMain = ref<DataOption[]>([]);
-const salaryPosTypeOption = ref<DataOption[]>([]);
-const salaryPosLevelOptionMain = ref<DataOption[]>([]);
-const salaryPosLevelOption = ref<DataOption[]>([]);
+const posType = ref<SalaryPosType[]>([]); //ข้อมูลประเภทตำแหน่ง
+const salaryPosTypeOptionMain = ref<DataOption[]>([]); //ข้อมูลรายการประเภทตำแหน่ง
+const salaryPosTypeOption = ref<DataOption[]>([]); //ตัวเลือกรายการประเภทตำแหน่ง
+const salaryPosLevelOptionMain = ref<DataOption[]>([]); //ข้อมูลรายการระดับตำแหน่ง
+const salaryPosLevelOption = ref<DataOption[]>([]); //ตัวเลือกรายการระดับตำแหน่ง
 
+//ชื่อ popup
 const title = computed(() => {
   const name =
     props.typeAction === "add"
@@ -150,7 +151,7 @@ watch(
   () => modal.value,
   async () => {
     if (modal.value) {
-      await fetchPosType();
+      fetchPosType();
 
       if (props.typeAction === "edit" || props.typeAction === "view") {
         showLoader();
diff --git a/src/modules/13_salary/components/SalaryChart/DialogFormRate.vue b/src/modules/13_salary/components/01_Salary/DialogFormRate.vue
similarity index 93%
rename from src/modules/13_salary/components/SalaryChart/DialogFormRate.vue
rename to src/modules/13_salary/components/01_Salary/DialogFormRate.vue
index af9d1090f..47d4e08d1 100644
--- a/src/modules/13_salary/components/SalaryChart/DialogFormRate.vue
+++ b/src/modules/13_salary/components/01_Salary/DialogFormRate.vue
@@ -39,20 +39,21 @@ const props = defineProps({
   },
 });
 
-const isReadonly = ref<boolean>(false);
-const salaryId = ref<string>(route.params.id.toString());
+const salaryId = ref<string>(route.params.id.toString()); //id รายการอัตราเงินเดือน
+const isReadonly = ref<boolean>(false); //อ่านอย่างเดียว
 const formData = reactive<FormSalaryRate>({
   salaryId: "",
-  salary: null,
-  salaryHalf: null,
-  salaryHalfSpecial: null,
-  salaryFull: null,
-  salaryFullSpecial: null,
-  salaryFullHalf: null,
-  salaryFullHalfSpecial: null,
-  isNext: false,
+  salary: null, //เงินเดือนฐาน
+  salaryHalf: null, //เลื่อน 0.5 ขั้น
+  salaryHalfSpecial: null, //เงินพิเศษ
+  salaryFull: null, //เลื่อน 1 ขั้น
+  salaryFullSpecial: null, //เงินพิเศษ
+  salaryFullHalf: null, //เลื่อน 1.5 ขั้น
+  salaryFullHalfSpecial: null, //เงินพิเศษ
+  isNext: false, //ทะลุขั้น
 });
 
+//ชื่อ Popup
 const title = computed(() => {
   const name =
     props.typeAction === "add"
@@ -155,6 +156,17 @@ function onSubmit() {
   });
 }
 
+/**
+ * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
+ * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
+ */
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+
 /** callbackFunction ทำการ fetch ข้อมูลไฟล์เมื่อเปิด Dialog*/
 watch(
   () => modal.value,
@@ -175,17 +187,6 @@ watch(
     }
   }
 );
-
-/**
- * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
- * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
- */
-const getClass = (val: boolean) => {
-  return {
-    "full-width inputgreen cursor-pointer": val,
-    "full-width cursor-pointer": !val,
-  };
-};
 </script>
 
 <template>
diff --git a/src/modules/13_salary/components/SalaryChart/DialogUpload.vue b/src/modules/13_salary/components/01_Salary/DialogUpload.vue
similarity index 87%
rename from src/modules/13_salary/components/SalaryChart/DialogUpload.vue
rename to src/modules/13_salary/components/01_Salary/DialogUpload.vue
index 24f67985f..4c3f89853 100644
--- a/src/modules/13_salary/components/SalaryChart/DialogUpload.vue
+++ b/src/modules/13_salary/components/01_Salary/DialogUpload.vue
@@ -39,17 +39,6 @@ const props = defineProps({
 });
 
 const salaryId = ref<string>("");
-const formData = reactive({
-  salaryType: "", //*ประเภทผัง (OFFICER->"ข้าราชการกรุงเทพมหานครสามัญ",EMPLOYEE->"ลูกจ้างประจำกรุงเทพมหานคร")
-  posTypeId: "", //*ประเภทของตำแหน่ง
-  posLevelId: "", //*ระดับของตำแหน่ง
-  isActive: false, //*สถานะการใช้งาน
-  date: null, //ให้ไว้ ณ วันที่
-  startDate: null, //วันที่มีผลบังคับใช้
-  endDate: null, //วันที่สิ้นสุดบังคับใช้
-  details: "", //คำอธิบาย
-  isSpecial: false,
-});
 
 const documentFile = ref<any>(null);
 const itemsDocument = ref<any>([]);
@@ -58,12 +47,12 @@ const itemsDocument = ref<any>([]);
  * function fetch ข้อมูลรายการ ไฟล์
  * @param id ไฟล์
  */
-function fetchDocumentFile(id: string) {
+async function fetchDocumentFile(id: string) {
   showLoader();
-  http
+  await http
     .get(config.API.salaryChartFile(id))
-    .then((res) => {
-      const list = res.data.map((e: any) => ({ name: e.fileName }));
+    .then(async (res) => {
+      const list = await res.data.map((e: any) => ({ name: e.fileName }));
       itemsDocument.value = list;
     })
     .catch((err) => {
@@ -79,22 +68,6 @@ function fetchDocumentFile(id: string) {
  */
 function closeDialog() {
   modal.value = !modal.value;
-  clearFormData();
-}
-
-/**
- * function เคลียข้อมูล form*
- */
-function clearFormData() {
-  formData.salaryType = "";
-  formData.posTypeId = "";
-  formData.posLevelId = "";
-  formData.isSpecial = false;
-  formData.isActive = false;
-  formData.date = null;
-  formData.startDate = null;
-  formData.endDate = null;
-  formData.details = "";
   documentFile.value = null;
   itemsDocument.value = [];
 }
@@ -133,7 +106,7 @@ async function uploadDocumentFile() {
  * function อัปโหลดไฟล์
  * @param url link อัปโหลด
  */
-function fileUpLoad(url: string) {
+async function fileUpLoad(url: string) {
   axios
     .put(url, documentFile.value, {
       headers: { "Content-Type": documentFile.value?.type },
diff --git a/src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeChart.vue b/src/modules/13_salary/components/02_salaryEmployee/DialogEmployeeChart.vue
similarity index 100%
rename from src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeChart.vue
rename to src/modules/13_salary/components/02_salaryEmployee/DialogEmployeeChart.vue
diff --git a/src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeRate.vue b/src/modules/13_salary/components/02_salaryEmployee/DialogEmployeeRate.vue
similarity index 95%
rename from src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeRate.vue
rename to src/modules/13_salary/components/02_salaryEmployee/DialogEmployeeRate.vue
index 36d94ea54..9b900cb52 100644
--- a/src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeRate.vue
+++ b/src/modules/13_salary/components/02_salaryEmployee/DialogEmployeeRate.vue
@@ -43,11 +43,13 @@ const props = defineProps({
   },
 });
 
+const isReadonly = ref<boolean>(false); //อ่านอย่างเดียว
+
 /** form อัตราค่าจ้าง */
 const formData = reactive<FormDataRateEpm>({
-  salaryNo: null,
-  salaryMonth: null,
-  salaryDay: null,
+  salaryNo: null, //ลำดับชั้น
+  salaryMonth: null, //อัตราค่าจ้าง/ขั้นวิ่ง (รายเดือน)
+  salaryDay: null, //อัตราค่าจ้าง/ขั้นวิ่ง (รายวัน)
 });
 
 /** function ปืด Dialog*/
@@ -119,8 +121,6 @@ watch(
   }
 );
 
-const isReadonly = ref<boolean>(false);
-
 /**
  * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
  * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
diff --git a/src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeUpload.vue b/src/modules/13_salary/components/02_salaryEmployee/DialogEmployeeUpload.vue
similarity index 98%
rename from src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeUpload.vue
rename to src/modules/13_salary/components/02_salaryEmployee/DialogEmployeeUpload.vue
index fceccec04..2c27f7af2 100644
--- a/src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeUpload.vue
+++ b/src/modules/13_salary/components/02_salaryEmployee/DialogEmployeeUpload.vue
@@ -89,8 +89,8 @@ async function uploadDocumentFile() {
  * function อัปโหลดไฟล์
  * @param url link อัปโหลด
  */
-function fileUpLoad(url: string) {
-  axios
+async function fileUpLoad(url: string) {
+  await axios
     .put(url, documentFile.value, {
       headers: { "Content-Type": documentFile.value?.type },
       onUploadProgress: (e) => console.log(e),
@@ -118,7 +118,7 @@ function onClickDeleteFile(fileName: string) {
     await http
       .delete(config.API.salaryEmployeeChartDelFile(salaryId.value, fileName))
       .then(async () => {
-        await setTimeout(async () => {
+        setTimeout(async () => {
           await fetchDocumentFile(salaryId.value);
           await success($q, "ลบไฟล์สำเร็จ");
         }, 1500);
diff --git a/src/modules/13_salary/components/salaryEmployeeChart/DialogFormCriteria.vue b/src/modules/13_salary/components/02_salaryEmployee/DialogFormCriteria.vue
similarity index 89%
rename from src/modules/13_salary/components/salaryEmployeeChart/DialogFormCriteria.vue
rename to src/modules/13_salary/components/02_salaryEmployee/DialogFormCriteria.vue
index ae956b9a6..478c172d6 100644
--- a/src/modules/13_salary/components/salaryEmployeeChart/DialogFormCriteria.vue
+++ b/src/modules/13_salary/components/02_salaryEmployee/DialogFormCriteria.vue
@@ -1,4 +1,3 @@
-div
 <script setup lang="ts">
 import { ref, reactive, watch } from "vue";
 import { useQuasar } from "quasar";
@@ -33,15 +32,15 @@ const props = defineProps({
   getDataMain: Function,
 });
 
-const posTypeOp = ref<DataOptions[]>([]);
-const posTypeOpMain = ref<DataOptions[]>([]);
-const posNameOp = ref<DataOptions[]>([]);
-const posNameOpMain = ref<DataOptions[]>([]);
-const groupOldOp = ref<DataOptions[]>([]);
-const groupOldOpMain = ref<DataOptions[]>([]);
-const posLevelOp = ref<any[]>([]);
-const posNameListOp = ref<DataListOptions[]>([]);
-const isReadonly = ref<boolean>(false);
+const posTypeOp = ref<DataOptions[]>([]); //ตัวเลือกรายการกลุ่มงาน
+const posTypeOpMain = ref<DataOptions[]>([]); //ข้อมูลรายการกลุ่มงาน
+const posNameOp = ref<DataOptions[]>([]); //ตัวเลือกตำแหน่ง
+const posNameOpMain = ref<DataOptions[]>([]); //ข้อมูลรายการตำแหน่ง
+const groupOldOp = ref<DataOptions[]>([]); //ตัวเลือกกลุ่มของผังบัญชีอัตราค่าจ้าง
+const groupOldOpMain = ref<DataOptions[]>([]); //ข้อมูลกลุ่มของผังบัญชีอัตราค่าจ้าง
+const posLevelOp = ref<any[]>([]); //ระดับชั้นงาน
+const posNameListOp = ref<DataListOptions[]>([]); //ข้อมูลระดับชั้นงาน
+const isReadonly = ref<boolean>(false); //อ่านอย่างเดียว
 
 const formData = reactive<any>({
   id: "",
@@ -265,23 +264,6 @@ function getDataEdit() {
       }, 1500);
     });
 }
-watch(
-  () => modal.value,
-  (check) => {
-    if (check) {
-      getPosType();
-      getSalaryGroup();
-
-      if (isEdit.value) {
-        isReadonly.value = actionsType.value === "view" ? true : false;
-        formData.id = props.data?.id ? props.data.id : null;
-        getDataEdit();
-      } else {
-        isReadonly.value = false;
-      }
-    }
-  }
-);
 
 /**
  * function ต้นหาข้อมูลของ Option
@@ -289,7 +271,7 @@ watch(
  * @param update  อัพเดทค่า
  * @param refData ดาต้าที่ต้องการฟิลเตอร์
  */
-function filterOption(val: any, update: Function, type: string) {
+function filterOption(val: string, update: Function, type: string) {
   switch (type) {
     case "group":
       update(() => {
@@ -330,6 +312,26 @@ const getClass = (val: boolean) => {
     "full-width cursor-pointer": !val,
   };
 };
+
+/**
+ * ทำงานเมื่อ  modal เป็น true
+ */
+watch(
+  () => modal.value,
+  async (check) => {
+    if (check) {
+      await Promise.all([getPosType(), getSalaryGroup()]);
+
+      if (isEdit.value) {
+        isReadonly.value = actionsType.value === "view" ? true : false;
+        formData.id = props.data?.id ? props.data.id : null;
+        getDataEdit();
+      } else {
+        isReadonly.value = false;
+      }
+    }
+  }
+);
 </script>
 
 <template>
@@ -358,7 +360,7 @@ const getClass = (val: boolean) => {
                 outlined
                 v-model="formData.posType"
                 label="กลุ่มงาน"
-                :rules="[(val) => !!val || 'กรุณาเลือกกลุ่มงาน']"
+                :rules="[(val:string) => !!val || 'กรุณาเลือกกลุ่มงาน']"
                 :options="posTypeOp"
                 option-label="name"
                 option-value="id"
@@ -387,7 +389,7 @@ const getClass = (val: boolean) => {
                 outlined
                 v-model="formData.posName"
                 label="ตำแหน่ง"
-                :rules="[(val) => !!val || 'กรุณาเลือกตำแหน่ง']"
+                :rules="[(val:string) => !!val || 'กรุณาเลือกตำแหน่ง']"
                 :options="posNameOp"
                 option-label="name"
                 option-value="name"
@@ -420,7 +422,7 @@ const getClass = (val: boolean) => {
                 option-value="id"
                 map-options
                 label="ระดับชั้นงาน"
-                :rules="[(val) => !!val || 'กรุณาเลือกระดับชั้นงาน']"
+                :rules="[(val:string) => !!val || 'กรุณาเลือกระดับชั้นงาน']"
                 lazy-rules
                 hide-bottom-space
               >
@@ -459,7 +461,7 @@ const getClass = (val: boolean) => {
                 mask="###,###,###,###,###,###,###,###"
                 reverse-fill-mask
                 :rules="[
-                  (val) => !!val || `${'กรุณากรอกอัตราค่าจ้าง ขั้นต่ำสุด'}`,
+                  (val:string) => !!val || `${'กรุณากรอกอัตราค่าจ้าง ขั้นต่ำสุด'}`,
                 ]"
                 lazy-rules
                 hide-bottom-space
@@ -476,7 +478,7 @@ const getClass = (val: boolean) => {
                 v-model="formData.groupOld"
                 label="กลุ่มของผังบัญชีอัตราค่าจ้าง"
                 :rules="[
-                  (val) =>
+                  (val:string) =>
                     !!val ||
                     `${'กรุณาเลือกอัตราค่าจ้าง กลุ่มของผังบัญชีอัตราค่าจ้าง'}`,
                 ]"
@@ -510,7 +512,7 @@ const getClass = (val: boolean) => {
                 mask="###,###,###,###,###,###,###,###"
                 reverse-fill-mask
                 :rules="[
-                  (val) => !!val || `${'กรุณากรอกอัตราค่าจ้าง ขั้นสูงสุดเดิม'}`,
+                  (val:string) => !!val || `${'กรุณากรอกอัตราค่าจ้าง ขั้นสูงสุดเดิม'}`,
                 ]"
                 lazy-rules
                 hide-bottom-space
@@ -530,7 +532,7 @@ const getClass = (val: boolean) => {
                 v-model="formData.groupRateHigh"
                 label="กลุ่มบัญชีค่าจ้าง"
                 :rules="[
-                  (val) => !!val || `${'กรุณากรอกเลือกกลุ่มบัญชีค่าจ้าง'}`,
+                  (val:string) => !!val || `${'กรุณากรอกเลือกกลุ่มบัญชีค่าจ้าง'}`,
                 ]"
                 lazy-rules
                 :options="groupOldOp"
@@ -563,7 +565,7 @@ const getClass = (val: boolean) => {
                 mask="###,###,###,###,###,###,###,###"
                 reverse-fill-mask
                 :rules="[
-                  (val) => !!val || `${'กรุณากรอกอัตราค่าจ้างขั้นสูงใหม่'}`,
+                  (val:string) => !!val || `${'กรุณากรอกอัตราค่าจ้างขั้นสูงใหม่'}`,
                 ]"
                 lazy-rules
                 hide-bottom-space
diff --git a/src/modules/13_salary/components/salaryEmployeeChart/TabCriteria.vue b/src/modules/13_salary/components/02_salaryEmployee/TabCriteria.vue
similarity index 90%
rename from src/modules/13_salary/components/salaryEmployeeChart/TabCriteria.vue
rename to src/modules/13_salary/components/02_salaryEmployee/TabCriteria.vue
index 5aaeb1638..fdfff1da6 100644
--- a/src/modules/13_salary/components/salaryEmployeeChart/TabCriteria.vue
+++ b/src/modules/13_salary/components/02_salaryEmployee/TabCriteria.vue
@@ -18,7 +18,7 @@ import type {
 import type { PosType } from "@/modules/13_salary/interface/response/salaryEmployeeChart";
 
 /** importCompopnents*/
-import DialogFormCriteria from "@/modules/13_salary/components/salaryEmployeeChart/DialogFormCriteria.vue";
+import DialogFormCriteria from "@/modules/13_salary/components/02_salaryEmployee/DialogFormCriteria.vue";
 
 /** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
@@ -138,19 +138,21 @@ const formFilter = reactive({
   pageSize: 10,
   keyword: "",
 });
+const maxPage = ref<number>(1); //จำนวนหน้า
+const totalList = ref<number>(0); //จำนวนรายการ
 
-const modalForm = ref<boolean>(false);
-const isStatusEdit = ref<boolean>(false);
+const modalForm = ref<boolean>(false); //Popup ข้อมูลหลักเกณฑ์
+const isStatusEdit = ref<boolean>(false); //สถานะการแก้ไข
 const actionsType = ref<string>("");
-const dataRow = ref<ListData>();
+const dataRow = ref<ListData>(); //ข้อมูลที่ต้องการแก้ไข
 
-const posTypeOpMain = ref<DataOption[]>([]);
-const posTypeOp = ref<DataOption[]>([]);
-const posType = ref<string | null>("");
-const maxPage = ref<number>(1);
-const totalList = ref<number>(0);
+const posTypeOpMain = ref<DataOption[]>([]); //ข้อมูลกลุ่มงาน
+const posTypeOp = ref<DataOption[]>([]); //ตัวเลือกข้อมูลรายการกลุ่มงาน
+const posType = ref<string | null>(""); //กลุ่มงาน
 
-/** ดึงข้อมูลกลุ่มงาน */
+/**
+ * ดึงข้อมูลกลุ่มงาน
+ */
 function getPosType() {
   http
     .get(config.API.salaryEmployeePosType())
@@ -176,7 +178,9 @@ function getPosType() {
     });
 }
 
-/** ดึงข้อมูลรายการหลักเกณฑ์ */
+/**
+ * ดึงข้อมูลรายการหลักเกณฑ์
+ */
 function getData() {
   showLoader();
   http
@@ -229,7 +233,9 @@ function updatePage(val: number) {
   getData();
 }
 
-/** function อัปเดทแถวต่อหน้า*/
+/**
+ * function อัปเดทแถวต่อหน้า
+ */
 function updatePageSize(newPagination: NewPagination) {
   formFilter.page = 1;
   formFilter.pageSize = newPagination.rowsPerPage;
@@ -271,7 +277,9 @@ function filterSelector(val: string, update: Function) {
   });
 }
 
-/** callbackFuntioon ทำงานเมื่อมี่การอัปเดทแถว */
+/**
+ * callbackFuntioon ทำงานเมื่อมี่การอัปเดทแถว
+ */
 watch(
   () => formFilter.pageSize,
   () => {
@@ -279,7 +287,9 @@ watch(
   }
 );
 
-/** functionn fetch ข้อมูลรายการหน้าแรก*/
+/**
+ * functionn fetch ข้อมูลรายการหน้าแรก
+ */
 function filterFn() {
   formFilter.page = 1;
   getData();
@@ -290,9 +300,8 @@ const pagination = ref({
   rowsPerPage: formFilter.pageSize,
 });
 
-onMounted(() => {
-  getData();
-  getPosType();
+onMounted(async () => {
+  await Promise.all([getData(), getPosType()]);
 });
 </script>
 
diff --git a/src/modules/13_salary/components/salaryEmployeeChart/TabStructure.vue b/src/modules/13_salary/components/02_salaryEmployee/TabStructure.vue
similarity index 89%
rename from src/modules/13_salary/components/salaryEmployeeChart/TabStructure.vue
rename to src/modules/13_salary/components/02_salaryEmployee/TabStructure.vue
index da83e82d3..86eee3dfa 100644
--- a/src/modules/13_salary/components/salaryEmployeeChart/TabStructure.vue
+++ b/src/modules/13_salary/components/02_salaryEmployee/TabStructure.vue
@@ -13,8 +13,8 @@ import type { FormFilter } from "@/modules/13_salary/interface/request/EmployeeC
 import type { EmployeeSalary } from "@/modules/13_salary/interface/response/salaryEmployeeChart";
 
 /** importComponents*/
-import DialogEmployeeChart from "@/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeChart.vue"; //ผังบัญชีค่าจ้างลูกจ้างประจำ
-import DialogEmployeeUpload from "@/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeUpload.vue"; //อัปโหลดเอกสารอ้างอิง
+import DialogEmployeeChart from "@/modules/13_salary/components/02_salaryEmployee/DialogEmployeeChart.vue"; //ผังบัญชีค่าจ้างลูกจ้างประจำ
+import DialogEmployeeUpload from "@/modules/13_salary/components/02_salaryEmployee/DialogEmployeeUpload.vue"; //อัปโหลดเอกสารอ้างอิง
 
 /** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
@@ -32,20 +32,23 @@ const {
 } = useCounterMixin();
 
 const formFilter = reactive<FormFilter>({
-  page: 1,
-  pageSize: 10,
-  keyword: "",
+  page: 1, //*หน้า
+  pageSize: 10, //*จำนวนแถวต่อหน้า
+  keyword: "", //keyword ค้นหา
 });
-const maxPage = ref<number>(1);
-const totalList = ref<number>(0);
+const maxPage = ref<number>(1); //จำนวนหน้า
+const totalList = ref<number>(0); //จำนวนรายการ
 
-const modalDialogEmployeeChart = ref<boolean>(false);
-const isStatusEdit = ref<boolean>(false);
-const activeType = ref<string>("");
-const dataRow = ref<EmployeeSalary>();
+const modalDialogEmployeeChart = ref<boolean>(false); //popup ผังบัญชีค่าจ้างลูกจ้างประจำ
+const isStatusEdit = ref<boolean>(false); //สถานะการแก้ไข
+const activeType = ref<string>(""); //ประเภทการกระทำ
+const dataRow = ref<EmployeeSalary>(); //ข้อมูลรายกาผังบัญชีค่าจ้างลูกจ้างประจำ
+const modalDialogUpload = ref<boolean>(false); //popup อัปโหลดเอกสารอ้างอิง
+const salaryChartId = ref<string>(""); //id ผังบัญชีค่าจ้างลูกจ้างประจำ
+const isActive = ref<boolean>(false); //สถานะการใช้งาน
 
 /** ข้อมูล Table*/
-const rows = ref<EmployeeSalary[]>([]);
+const rows = ref<EmployeeSalary[]>([]); //รายการผังบัญชีค่าจ้างลูกจ้างประจำ
 const columns = ref<QTableProps["columns"]>([
   {
     name: "name",
@@ -94,9 +97,9 @@ const visibleColumns = ref<string[]>([
 /**
  * fetch ข้แมูลรายาการผังบัญชีค่าจ้างลูกจ้างประจำ
  */
-function fetchListChart() {
+async function fetchListChart() {
   showLoader();
-  http
+  await http
     .get(
       config.API.salaryEmployeeChart +
         `?page=${formFilter.page}&pageSize=${formFilter.pageSize}&keyword=${formFilter.keyword}`
@@ -125,10 +128,6 @@ function onEdit(data: EmployeeSalary, type: string) {
   modalDialogEmployeeChart.value = true;
 }
 
-const modalDialogUpload = ref<boolean>(false);
-const salaryChartId = ref<string>("");
-const isActive = ref<boolean>(false);
-
 /**
  * function เปิด Dialog อัปโหลดเอกสารอ้างอิง
  * @param id  ผังบัญชีค่าจ้างลูกจ้างประจำ
@@ -455,20 +454,20 @@ onMounted(() => {
     </template>
   </d-table>
 
-  <!-- ผังบัญชีค่าจ้างลูกจ้างประจำ -->
-  <DialogEmployeeChart
-    v-model:modal="modalDialogEmployeeChart"
-    :isStatusEdit="isStatusEdit"
-    :data="dataRow as EmployeeSalary"
-    :fetchData="fetchListChart"
-    :activeType="activeType"
-  />
-
   <!-- อัปโหลดเอกสารอ้างอิง -->
   <DialogEmployeeUpload
     v-model:modal="modalDialogUpload"
     :id="salaryChartId"
-    :isActive="isActive"
+    :is-active="isActive"
+  />
+
+  <!-- ผังบัญชีค่าจ้างลูกจ้างประจำ -->
+  <DialogEmployeeChart
+    v-model:modal="modalDialogEmployeeChart"
+    :is-status-edit="isStatusEdit"
+    :active-type="activeType"
+    :fetch-data="fetchListChart"
+    :data="dataRow as EmployeeSalary"
   />
 </template>
 
diff --git a/src/modules/13_salary/components/SalaryRound/DialogForm.vue b/src/modules/13_salary/components/03_salaryRound/DialogForm.vue
similarity index 77%
rename from src/modules/13_salary/components/SalaryRound/DialogForm.vue
rename to src/modules/13_salary/components/03_salaryRound/DialogForm.vue
index b7fe9f7ea..fba35d643 100644
--- a/src/modules/13_salary/components/SalaryRound/DialogForm.vue
+++ b/src/modules/13_salary/components/03_salaryRound/DialogForm.vue
@@ -41,16 +41,19 @@ const props = defineProps({
   isRead: Boolean,
 });
 
-const period = ref<string>("");
-const isActive = ref<boolean>(false);
-const effectiveDate = ref<Date | null>(null);
+const period = ref<string>(""); //รอบการขึ้นเงินเดือน
+const isActive = ref<boolean>(false); //สถานะการใช้งาน
+const effectiveDate = ref<Date | null>(null); //วันที่มีผล
+//ตัวเลือกรอบ
 const typeOptions = ref<DataOption[]>([
   { id: "SPECIAL", name: "รอบพิเศษ" },
   { id: "APR", name: "รอบเมษายน" },
   { id: "OCT", name: "รอบตุลาคม" },
 ]);
 
-/** function เคลียข้อมูล form*/
+/**
+ * function เคลียข้อมูล form
+ */
 function clearForm() {
   isActive.value = false;
   period.value = "";
@@ -59,13 +62,17 @@ function clearForm() {
   isRead.value = false;
 }
 
-/** function ปืด Dialog*/
+/**
+ *  function ปืด Dialog
+ */
 function close() {
   modal.value = false;
   clearForm();
 }
 
-/** function บัยทึกข้อมูลรอบการขึ้นเงินเดือน*/
+/**
+ * function บัยทึกข้อมูลรอบการขึ้นเงินเดือน
+ */
 function onSubmit() {
   dialogConfirm($q, async () => {
     showLoader();
@@ -82,8 +89,7 @@ function onSubmit() {
       await http[!props.edit ? "post" : "put"](url, body);
       await props.getData?.();
       await success($q, "บันทีกข้อมูลสำเร็จ");
-      modal.value = false;
-      clearForm();
+      close();
     } catch (err) {
       messageError($q, err);
     } finally {
@@ -107,7 +113,9 @@ function onUpdatePeriod(val: string) {
   }
 }
 
-/** callbackFunction ทำการ fetch ข้อมูลไฟล์เมื่อเปิด Dialog*/
+/**
+ * callbackFunction ทำการ fetch ข้อมูลไฟล์เมื่อเปิด Dialog
+ */
 watch(
   () => modal.value,
   () => {
@@ -244,20 +252,14 @@ watch(
               </template>
             </datepicker>
             <div class="col q-pa-sm bg-white border_custom text-weight-medium">
-              <div class="row items-center q-my-sm justify-between">
+              <div class="row items-center justify-between">
                 <p class="q-ma-none">สถานะการใช้งาน</p>
-                <label
-                  :class="
-                    isRead == true ? 'toggle-control noClick' : 'toggle-control'
-                  "
-                >
-                  <input
-                    type="checkbox"
+                <label>
+                  <q-toggle
                     v-model="isActive"
+                    :disable="period === 'SPECIAL' || isRead"
                     :readonly="isRead"
-                    :disabled="period === 'SPECIAL'"
                   />
-                  <span class="control"></span>
                 </label>
               </div>
             </div>
@@ -279,71 +281,4 @@ watch(
   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;
-    }
-  }
-}
-.noClick {
-  pointer-events: none;
-}
 </style>
diff --git a/src/modules/13_salary/components/SalaryLists/Dashboard.vue b/src/modules/13_salary/components/04_salaryLists/Dashboard.vue
similarity index 98%
rename from src/modules/13_salary/components/SalaryLists/Dashboard.vue
rename to src/modules/13_salary/components/04_salaryLists/Dashboard.vue
index f730b5e8e..9fa548061 100644
--- a/src/modules/13_salary/components/SalaryLists/Dashboard.vue
+++ b/src/modules/13_salary/components/04_salaryLists/Dashboard.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { ref, onMounted, computed, watch } from "vue";
 import { useQuasar } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
+import { useCounterMixin } from "@/stores/mixin";
 
 /** importType*/
 import type { QTableProps } from "quasar";
@@ -13,8 +16,6 @@ import type {
 import type { ResSalaryOrg } from "@/modules/13_salary/interface/response/SalaryList";
 
 /** importStore*/
-import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
-import { useCounterMixin } from "@/stores/mixin";
 
 /** use*/
 const $q = useQuasar();
@@ -145,6 +146,7 @@ const itemsCard = computed(() => {
 
 /** ข้อมูล Table*/
 const rows = ref<ResSalaryOrg[]>([]);
+const filter = ref<string>("");
 const columnsAPR = ref<QTableProps["columns"]>([
   {
     name: "org",
@@ -385,10 +387,11 @@ const columns = computed(() => {
       : columnsSpeciel.value;
   return columnsss;
 });
-const filter = ref<string>("");
 
-/** function fetch ข้อมูลสถิติ*/
-function fetchDataDashboard() {
+/**
+ * function fetch ข้อมูลสถิติ
+ */
+async function fetchDataDashboard() {
   showLoader();
   const formData = {
     year: props?.year,
@@ -396,10 +399,10 @@ function fetchDataDashboard() {
     period: props?.roundFilter?.id,
     snapshot: props?.snapShot,
   };
-  http
+  await http
     .post(config.API.salaryDashboard, formData)
-    .then((res) => {
-      const quota = res.data.result.dashboard;
+    .then(async (res) => {
+      const quota = await res.data.result.dashboard;
       itemsCardAPR.value[0].total = quota.total;
       itemsCardAPR.value[1].total = quota.fifteenPercent.toLocaleString("en", {
         minimumFractionDigits: 2,
diff --git a/src/modules/13_salary/components/SalaryLists/DialogAddPerson.vue b/src/modules/13_salary/components/04_salaryLists/DialogAddPerson.vue
similarity index 92%
rename from src/modules/13_salary/components/SalaryLists/DialogAddPerson.vue
rename to src/modules/13_salary/components/04_salaryLists/DialogAddPerson.vue
index 4fe7679e6..40d6c2277 100644
--- a/src/modules/13_salary/components/SalaryLists/DialogAddPerson.vue
+++ b/src/modules/13_salary/components/04_salaryLists/DialogAddPerson.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { ref, reactive, watch } from "vue";
 import { useQuasar } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
 import config from "@/app.config";
 import http from "@/plugins/http";
 
@@ -14,10 +17,6 @@ import type { DataPerson } from "@/modules/13_salary/interface/response/SalaryLi
 /** importComponents*/
 import Header from "@/components/DialogHeader.vue";
 
-/** importStore*/
-import { useCounterMixin } from "@/stores/mixin";
-import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
-
 /** use*/
 const $q = useQuasar();
 const store = useSalaryListSDataStore();
@@ -33,6 +32,7 @@ const props = defineProps({
 });
 
 /** Table*/
+const rows = ref<DataPerson[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -89,8 +89,6 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
-const rows = ref<DataPerson[]>([]);
-
 /** ข้อมูุลค้นหา*/
 const formFilter = reactive<DataFilterPerson>({
   page: 1,
@@ -102,14 +100,18 @@ const formFilter = reactive<DataFilterPerson>({
 });
 const maxPage = ref<number>(1);
 
-/** function close popup*/
+/**
+ * function close popup
+ */
 function closeModal() {
   modal.value = false;
   formFilter.page = 1;
   formFilter.keyword = "";
 }
 
-/** function เรียกรายชื่อ คนเลื่อนเงินเดือน*/
+/**
+ * function เรียกรายชื่อ คนเลื่อนเงินเดือน
+ */
 function fetchListPerson() {
   showLoader();
   formFilter.rootId = store.rootId;
@@ -164,24 +166,32 @@ function onClickAddPerson(data: DataPerson) {
   );
 }
 
-/** function updatePage*/
+/**
+ * function updatePage
+ */
 async function updatePagePagination() {
   fetchListPerson();
 }
 
-/** function updatePageSize*/
+/**
+ * function updatePageSize
+ */
 function updatePageSizePagination(newPagination: NewPagination) {
   formFilter.page = 1;
   formFilter.pageSize = newPagination.rowsPerPage;
 }
 
-/** function ค้นหาข้อมูลตาม keyword*/
+/**
+ * function ค้นหาข้อมูลตาม keyword
+ */
 function searchData() {
   formFilter.page = 1;
   fetchListPerson();
 }
 
-/** callblack function เรียกข้อมูลรายชื่อคนเลื่อนเงินเดือน เมื่อมีการเปิด Popup*/
+/**
+ * callblack function เรียกข้อมูลรายชื่อคนเลื่อนเงินเดือน เมื่อมีการเปิด Popup
+ */
 watch(
   () => modal.value,
   () => {
@@ -191,7 +201,9 @@ watch(
   }
 );
 
-/** callblack function เรียกข้อมูลรายชื่อคนเลื่อนเงินเดือน เมื่อมีการเปลี่ยน PageSize*/
+/**
+ * callblack function เรียกข้อมูลรายชื่อคนเลื่อนเงินเดือน เมื่อมีการเปลี่ยน PageSize
+ */
 watch(
   () => formFilter.pageSize,
   () => {
diff --git a/src/modules/13_salary/components/SalaryLists/DialogFormEdit.vue b/src/modules/13_salary/components/04_salaryLists/DialogFormEditSalary.vue
similarity index 62%
rename from src/modules/13_salary/components/SalaryLists/DialogFormEdit.vue
rename to src/modules/13_salary/components/04_salaryLists/DialogFormEditSalary.vue
index c701d1843..dbc848472 100644
--- a/src/modules/13_salary/components/SalaryLists/DialogFormEdit.vue
+++ b/src/modules/13_salary/components/04_salaryLists/DialogFormEditSalary.vue
@@ -1,15 +1,13 @@
 <script setup lang="ts">
-import { ref } from "vue";
 import { useQuasar } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
 /** importComponents*/
 import Header from "@/components/DialogHeader.vue";
 
-/** importStore*/
-import { useCounterMixin } from "@/stores/mixin";
-
 /** use*/
 const $q = useQuasar();
 const mixin = useCounterMixin();
@@ -25,24 +23,19 @@ const props = defineProps({
   },
 });
 
-const amountRef = ref<any>();
-
-/** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
-function validateForm() {
-  if (amountRef.value.validate()) {
-    onSubmit();
-  }
-}
-
-/** function ปืด Popup */
+/**
+ * function ปืด Popup
+ */
 function close() {
   modal.value = false;
   amount.value = null;
 }
 
-/** function ยืนยันการบันทึกข้อมูล*/
+/**
+ * function ยืนยันการบันทึกข้อมูล
+ */
 function onSubmit() {
-  dialogConfirm($q, () => {
+  dialogConfirm($q, async () => {
     if (amount.value !== null) {
       showLoader();
       const amountString: string = amount.value.toString();
@@ -53,7 +46,7 @@ function onSubmit() {
             ? amount.value
             : Number(amountString.replace(/,/g, "")),
       };
-      http
+      await http
         .post(config.API.salaryPeriod() + `/change/amount`, body)
         .then(async () => {
           await props.fetchData?.();
@@ -74,28 +67,29 @@ function onSubmit() {
 <template>
   <q-dialog v-model="modal" persistent>
     <q-card class="col-12" style="width: 30%">
-      <Header :tittle="`แก้ไขเงินเดือน`" :close="close" />
-      <q-separator />
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <Header :tittle="`แก้ไขเงินเดือน`" :close="close" />
+        <q-separator />
+
+        <q-card-section class="scroll" style="max-height: 70vh">
+          <div class="q-gutter-y-sm">
+            <q-input
+              ref="amountRef"
+              dense
+              outlined
+              v-model="amount"
+              label="เงินเดือนฐาน"
+              mask="###,###,###,###"
+              reverse-fill-mask
+              :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือนฐาน'}`]"
+              lazy-rules
+              hide-bottom-space
+              class="inputgreen"
+            />
+          </div>
+        </q-card-section>
+        <q-separator />
 
-      <q-card-section class="scroll" style="max-height: 70vh">
-        <div class="q-gutter-y-sm">
-          <q-input
-            ref="amountRef"
-            dense
-            outlined
-            v-model="amount"
-            label="เงินเดือนฐาน"
-            mask="###,###,###,###"
-            reverse-fill-mask
-            :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือนฐาน'}`]"
-            lazy-rules
-            hide-bottom-space
-            class="inputgreen"
-          />
-        </div>
-      </q-card-section>
-      <q-separator />
-      <form @submit.prevent="validateForm">
         <q-card-actions align="right" class="bg-white text-teal">
           <q-btn
             type="submit"
@@ -104,7 +98,7 @@ function onSubmit() {
             label="บันทึก"
           />
         </q-card-actions>
-      </form>
+      </q-form>
     </q-card>
   </q-dialog>
 </template>
diff --git a/src/modules/13_salary/components/SalaryLists/DialogInfoCriteria.vue b/src/modules/13_salary/components/04_salaryLists/DialogInfoCriteria.vue
similarity index 99%
rename from src/modules/13_salary/components/SalaryLists/DialogInfoCriteria.vue
rename to src/modules/13_salary/components/04_salaryLists/DialogInfoCriteria.vue
index fe9bf7f45..a4f73bf78 100644
--- a/src/modules/13_salary/components/SalaryLists/DialogInfoCriteria.vue
+++ b/src/modules/13_salary/components/04_salaryLists/DialogInfoCriteria.vue
@@ -1,10 +1,13 @@
 <script setup lang="ts">
 import { ref } from "vue";
+
 import Header from "@/components/DialogHeader.vue";
 
 const modal = defineModel<boolean>("modal", { required: true });
 const separator = ref<any>("cell");
-/** ปิด Dialog */
+/**
+ * ปิด Dialog
+ */
 function closeDialog() {
   modal.value = !modal.value;
 }
diff --git a/src/modules/13_salary/components/SalaryLists/DialogMoveGroup.vue b/src/modules/13_salary/components/04_salaryLists/DialogMoveGroup.vue
similarity index 62%
rename from src/modules/13_salary/components/SalaryLists/DialogMoveGroup.vue
rename to src/modules/13_salary/components/04_salaryLists/DialogMoveGroup.vue
index bf5ab3d2c..605d5d39e 100644
--- a/src/modules/13_salary/components/SalaryLists/DialogMoveGroup.vue
+++ b/src/modules/13_salary/components/04_salaryLists/DialogMoveGroup.vue
@@ -1,16 +1,15 @@
 <script setup lang="ts">
 import { ref, defineModel, watch } from "vue";
 import { useQuasar } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
 /** importComponents*/
 import Header from "@/components/DialogHeader.vue";
 
-/** importStore*/
-import { useCounterMixin } from "@/stores/mixin";
-import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
-
 /** use*/
 const $q = useQuasar();
 const store = useSalaryListSDataStore();
@@ -28,32 +27,28 @@ const props = defineProps({
 });
 
 /** ตัวแปร*/
-const group = ref<string>("");
-const groupRef = ref<any>(null);
+const group = ref<string>(""); //กลุ่ม
 const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
 
-/*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
-function validateForm() {
-  if (groupRef.value.validate()) {
-    onSubmit();
-  }
-}
-
-/** function ปืด Popup */
+/**
+ *  function ปืด Popup
+ */
 function close() {
   modal.value = false;
   group.value = "";
 }
 
-/** function ยืนยันการบันทึกข้อมูล*/
+/**
+ * function ยืนยันการบันทึกข้อมูล
+ */
 function onSubmit() {
-  dialogConfirm($q, () => {
+  dialogConfirm($q, async () => {
     showLoader();
     const body = {
       profileId: profileId.value,
       groupId: group.value,
     };
-    http
+    await http
       .post(config.API.salaryPeriod() + `/change/group`, body)
       .then(async () => {
         await props.fetchData?.();
@@ -90,32 +85,33 @@ function inputEdit(val: boolean) {
 <template>
   <q-dialog v-model="modal" persistent>
     <q-card class="col-12" style="width: 30%">
-      <Header :tittle="`ย้ายกลุ่ม`" :close="close" />
-      <q-separator />
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <Header :tittle="`ย้ายกลุ่ม`" :close="close" />
+        <q-separator />
 
-      <q-card-section class="scroll" style="max-height: 70vh">
-        <div class="q-gutter-y-sm">
-          <q-select
-            ref="groupRef"
-            :class="inputEdit(isReadonly)"
-            v-model="group"
-            label="กลุ่ม"
-            dense
-            outlined
-            emit-value
-            map-options
-            option-label="name"
-            option-value="id"
-            :options="store.groupOp.filter((e) => e.name !== props.group)"
-            :rules="[(val) => !!val || `${'กรุณากลุ่ม'}`]"
-            lazy-rules
-            hide-bottom-space
-          />
-        </div>
-      </q-card-section>
-      <q-separator />
-      <form @submit.prevent="validateForm">
-        <q-card-actions align="right" class="bg-white text-teal">
+        <q-card-section class="scroll" style="max-height: 70vh">
+          <div class="q-gutter-y-sm">
+            <q-select
+              ref="groupRef"
+              :class="inputEdit(isReadonly)"
+              v-model="group"
+              label="กลุ่ม"
+              dense
+              outlined
+              emit-value
+              map-options
+              option-label="name"
+              option-value="id"
+              :options="store.groupOp.filter((e) => e.name !== props.group)"
+              :rules="[(val:string) => !!val || `${'กรุณากลุ่ม'}`]"
+              lazy-rules
+              hide-bottom-space
+            />
+          </div>
+        </q-card-section>
+        <q-separator />
+
+        <q-card-actions align="right">
           <q-btn
             type="submit"
             for="#submitForm"
@@ -123,7 +119,7 @@ function inputEdit(val: boolean) {
             label="บันทึก"
           />
         </q-card-actions>
-      </form>
+      </q-form>
     </q-card>
   </q-dialog>
 </template>
diff --git a/src/modules/13_salary/components/SalaryLists/DialogMoveLevel.vue b/src/modules/13_salary/components/04_salaryLists/DialogMoveLevel.vue
similarity index 61%
rename from src/modules/13_salary/components/SalaryLists/DialogMoveLevel.vue
rename to src/modules/13_salary/components/04_salaryLists/DialogMoveLevel.vue
index 96e2e6bab..d0c98ac92 100644
--- a/src/modules/13_salary/components/SalaryLists/DialogMoveLevel.vue
+++ b/src/modules/13_salary/components/04_salaryLists/DialogMoveLevel.vue
@@ -1,27 +1,20 @@
 <script setup lang="ts">
 import { ref, computed, watch } from "vue";
 import { useQuasar } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
 /** importComponents*/
 import Header from "@/components/DialogHeader.vue";
 
-/** importStore*/
-import { useCounterMixin } from "@/stores/mixin";
-import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
-
 /** use*/
 const $q = useQuasar();
 const store = useSalaryListSDataStore();
-const {
-  dialogConfirm,
-  success,
-  messageError,
-  showLoader,
-  hideLoader,
-  dialogMessageNotify,
-} = useCounterMixin();
+const { dialogConfirm, success, messageError, showLoader, hideLoader } =
+  useCounterMixin();
 
 /**porps*/
 const modal = defineModel<boolean>("modal", { required: true });
@@ -35,9 +28,8 @@ const props = defineProps({
   },
 });
 
-const type = ref<string>("");
-const note = ref<string>("");
-const typeRef = ref<any>(null);
+const type = ref<string>(""); //เลื่อนขั้น
+const note = ref<string>(""); //หมายเหตุ
 const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
 const isChange = ref<boolean>(false); // มีการแก้ไขข้อมูลหรือไม่
 const isReserve = ref<boolean>(false); // สำรองหรือไม่
@@ -62,22 +54,19 @@ const typeRangeOps = computed(() => {
       ];
 });
 
-/*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
-function validateForm() {
-  if (typeRef.value.validate()) {
-    onSubmit();
-  }
-}
-
-/** function ปืด Popup */
+/**
+ * function ปืด Popup
+ */
 function close() {
   modal.value = false;
   type.value = "";
 }
 
-/** function ยืนยันการบันทึกข้อมูล*/
+/**
+ * function ยืนยันการบันทึกข้อมูล
+ */
 function onSubmit() {
-  dialogConfirm($q, () => {
+  dialogConfirm($q, async () => {
     showLoader();
     const body = {
       profileId: profileId.value,
@@ -85,7 +74,7 @@ function onSubmit() {
       isReserve: isReserve.value,
       remark: type.value === "NONE" ? note.value : undefined,
     };
-    http
+    await http
       .post(config.API.salaryPeriod() + `/change/type`, body)
       .then(async () => {
         await props.fetchData?.();
@@ -101,80 +90,81 @@ function onSubmit() {
   });
 }
 
+/**
+ * function เปลี่ยนระดับ
+ */
 function chengType() {
   note.value = props.typeLevel === "NONE" ? props.remark : "";
 }
 
-watch(
-  () => modal.value,
-  () => {
-    console.log(props.remark);
-
-    type.value = props.typeLevel == "PENDING" ? "" : props.typeLevel;
-    note.value = props.typeLevel === "NONE" ? props.remark : "";
-    isReserve.value = props.isReserve;
-    isChange.value = false;
-  }
-);
-
 function inputEdit(val: boolean) {
   return {
     "full-width cursor-pointer inputgreen ": val,
     "full-width cursor-pointer inputgreen": !val,
   };
 }
+
+watch(
+  () => modal.value,
+  () => {
+    type.value = props.typeLevel == "PENDING" ? "" : props.typeLevel;
+    note.value = props.typeLevel === "NONE" ? props.remark : "";
+    isReserve.value = props.isReserve;
+    isChange.value = false;
+  }
+);
 </script>
 
 <template>
   <q-dialog v-model="modal" persistent>
     <q-card class="col-12" style="width: 30%">
-      <Header :tittle="`เลื่อนขั้น`" :close="close" />
-      <q-separator />
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <Header :tittle="`เลื่อนขั้น`" :close="close" />
+        <q-separator />
 
-      <q-card-section class="scroll" style="max-height: 70vh">
-        <div class="q-gutter-y-sm">
-          <q-select
-            ref="typeRef"
-            :class="inputEdit(isReadonly)"
-            v-model="type"
-            label="เลื่อนขั้น"
-            dense
-            outlined
-            emit-value
-            map-options
-            option-label="name"
-            option-value="id"
-            :options="typeRangeOps"
-            :rules="[(val) => !!val || `${'กรุณาเลือก ขั้น'}`]"
-            lazy-rules
-            hide-bottom-space
-            @update:model-value="(isChange = true), chengType()"
-          />
+        <q-card-section class="scroll" style="max-height: 70vh">
+          <div class="q-gutter-y-sm">
+            <q-select
+              ref="typeRef"
+              :class="inputEdit(isReadonly)"
+              v-model="type"
+              label="เลื่อนขั้น"
+              dense
+              outlined
+              emit-value
+              map-options
+              option-label="name"
+              option-value="id"
+              :options="typeRangeOps"
+              :rules="[(val) => !!val || `${'กรุณาเลือก ขั้น'}`]"
+              lazy-rules
+              hide-bottom-space
+              @update:model-value="(isChange = true), chengType()"
+            />
 
-          <q-checkbox
-            v-if="type === 'FULL'"
-            keep-color
-            label="สำรอง"
-            dense
-            v-model="isReserve"
-            @update:model-value="isChange = true"
-          />
+            <q-checkbox
+              v-if="type === 'FULL'"
+              keep-color
+              label="สำรอง"
+              dense
+              v-model="isReserve"
+              @update:model-value="isChange = true"
+            />
 
-          <q-input
-            v-if="type === 'NONE'"
-            outlined
-            dense
-            v-model="note"
-            label="หมายเหตุ"
-            type="textarea"
-            :class="inputEdit(isReadonly)"
-            @update:model-value="isChange = true"
-          />
-        </div>
-      </q-card-section>
-      <q-separator />
-      <form @submit.prevent="validateForm">
-        <q-card-actions align="right" class="bg-white text-teal">
+            <q-input
+              v-if="type === 'NONE'"
+              outlined
+              dense
+              v-model="note"
+              label="หมายเหตุ"
+              type="textarea"
+              :class="inputEdit(isReadonly)"
+              @update:model-value="isChange = true"
+            />
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right">
           <q-btn
             :disabled="!isChange"
             type="submit"
@@ -183,7 +173,7 @@ function inputEdit(val: boolean) {
             label="บันทึก"
           />
         </q-card-actions>
-      </form>
+      </q-form>
     </q-card>
   </q-dialog>
 </template>
diff --git a/src/modules/13_salary/components/SalaryLists/DialogProperties.vue b/src/modules/13_salary/components/04_salaryLists/DialogProperties.vue
similarity index 57%
rename from src/modules/13_salary/components/SalaryLists/DialogProperties.vue
rename to src/modules/13_salary/components/04_salaryLists/DialogProperties.vue
index aed091630..1f3181912 100644
--- a/src/modules/13_salary/components/SalaryLists/DialogProperties.vue
+++ b/src/modules/13_salary/components/04_salaryLists/DialogProperties.vue
@@ -1,27 +1,20 @@
 <script setup lang="ts">
-import { ref, computed, watch } from "vue";
+import { ref, watch } from "vue";
 import { useQuasar } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
 
 /** importComponents*/
 import Header from "@/components/DialogHeader.vue";
 
-/** importStore*/
-import { useCounterMixin } from "@/stores/mixin";
-import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
-
 /** use*/
 const $q = useQuasar();
 const store = useSalaryListSDataStore();
-const {
-  dialogConfirm,
-  success,
-  messageError,
-  showLoader,
-  hideLoader,
-  dialogMessageNotify,
-} = useCounterMixin();
+const { dialogConfirm, success, messageError, showLoader, hideLoader } =
+  useCounterMixin();
 
 /**porps*/
 const modal = defineModel<boolean>("modal", { required: true });
@@ -37,41 +30,24 @@ const props = defineProps({
 });
 
 const type = ref<string>("");
-
 const isPunish = ref<boolean>(false); // มีการแก้ไขข้อมูลหรือไม่
 const isSuspension = ref<boolean>(false); // สำรองหรือไม่
 const isAbsent = ref<boolean>(false); // สำรองหรือไม่
 const isLeave = ref<boolean>(false); // สำรองหรือไม่
 
-const typeRangeOps = computed(() => {
-  return store.roundMainCode == "OCT"
-    ? [
-        { id: "NONE", name: "ไม่ได้เลื่อน" },
-        { id: "HAFT", name: "0.5 ขั้น" },
-        { id: "FULL", name: "1 ขั้น" },
-        { id: "FULLHAFT", name: "1.5 ขั้น" },
-      ]
-    : [
-        { id: "NONE", name: "ไม่ได้เลื่อน" },
-        { id: "HAFT", name: "0.5 ขั้น" },
-        { id: "FULL", name: "1 ขั้น" },
-      ];
-});
-
-/*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
-function validateForm() {
-  onSubmit();
-}
-
-/** function ปืด Popup */
+/**
+ * function ปืด Popup
+ */
 function close() {
   modal.value = false;
   type.value = "";
 }
 
-/** function ยืนยันการบันทึกข้อมูล*/
+/**
+ * function ยืนยันการบันทึกข้อมูล
+ */
 function onSubmit() {
-  dialogConfirm($q, () => {
+  dialogConfirm($q, async () => {
     showLoader();
     const body = {
       isPunish: isPunish.value,
@@ -79,7 +55,7 @@ function onSubmit() {
       isAbsent: isAbsent.value,
       isLeave: isLeave.value,
     };
-    http
+    await http
       .put(config.API.salaryProperty(profileId.value), body)
       .then(async () => {
         await props.fetchData?.();
@@ -111,34 +87,40 @@ watch(
 <template>
   <q-dialog v-model="modal" persistent>
     <q-card class="col-12" style="width: 20%">
-      <Header :tittle="`แก้ไขคุณสมบัติ`" :close="close" />
-      <q-separator />
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <Header :tittle="`แก้ไขคุณสมบัติ`" :close="close" />
+        <q-separator />
+
+        <q-card-section class="scroll" style="max-height: 70vh">
+          <div class="q-gutter-y-sm column">
+            <q-checkbox
+              keep-color
+              label="ไม่ถูกลงโทษทางวินัย"
+              dense
+              v-model="isPunish"
+            />
+            <q-checkbox
+              keep-color
+              label="ไม่ถูกพักราชการ"
+              dense
+              v-model="isSuspension"
+            />
+            <q-checkbox
+              keep-color
+              label="ไม่ขาดราชการ"
+              dense
+              v-model="isAbsent"
+            />
+            <q-checkbox
+              keep-color
+              label="วันลาไม่เกิน"
+              dense
+              v-model="isLeave"
+            />
+          </div>
+        </q-card-section>
+        <q-separator />
 
-      <q-card-section class="scroll" style="max-height: 70vh">
-        <div class="q-gutter-y-sm column">
-          <q-checkbox
-            keep-color
-            label="ไม่ถูกลงโทษทางวินัย"
-            dense
-            v-model="isPunish"
-          />
-          <q-checkbox
-            keep-color
-            label="ไม่ถูกพักราชการ"
-            dense
-            v-model="isSuspension"
-          />
-          <q-checkbox
-            keep-color
-            label="ไม่ขาดราชการ"
-            dense
-            v-model="isAbsent"
-          />
-          <q-checkbox keep-color label="วันลาไม่เกิน" dense v-model="isLeave" />
-        </div>
-      </q-card-section>
-      <q-separator />
-      <form @submit.prevent="validateForm">
         <q-card-actions align="right" class="bg-white text-teal">
           <q-btn
             type="submit"
@@ -147,7 +129,7 @@ watch(
             label="บันทึก"
           />
         </q-card-actions>
-      </form>
+      </q-form>
     </q-card>
   </q-dialog>
 </template>
diff --git a/src/modules/13_salary/components/SalaryLists/ProcessStep.vue b/src/modules/13_salary/components/04_salaryLists/ProcessStep.vue
similarity index 96%
rename from src/modules/13_salary/components/SalaryLists/ProcessStep.vue
rename to src/modules/13_salary/components/04_salaryLists/ProcessStep.vue
index 2ebecb678..2613ed0db 100644
--- a/src/modules/13_salary/components/SalaryLists/ProcessStep.vue
+++ b/src/modules/13_salary/components/04_salaryLists/ProcessStep.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
-import { checkPermission } from "@/utils/permissions";
 import axios from "axios";
+
+import { checkPermission } from "@/utils/permissions";
+import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
+import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -10,8 +13,6 @@ import config from "@/app.config";
 import DialogPopupReason from "@/components/Dialogs/PopupReason.vue"; //หมายเหตุ
 
 /** importStore*/
-import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
-import { useCounterMixin } from "@/stores/mixin";
 
 /* use**/
 const $q = useQuasar(); //ใช้ noti quasar
@@ -32,13 +33,13 @@ const props = defineProps({
   getData: Function,
 });
 
-const modalRecommend = ref<boolean>(false);
-const titleRecommend = ref<string>("");
-const listFile = ref<any>([]);
-const type = ref<string>("");
+const modalRecommend = ref<boolean>(false); //popup
+const titleRecommend = ref<string>(""); //หัวข้อ Popup
+const listFile = ref<any[]>([]); //รายการไฟล์
+const type = ref<string>(""); //ประเภท
 const sendStep = ref<number>(1);
-const fileUpload = ref<any>(null);
-const document = ref<string>("");
+const fileUpload = ref<any>(null); //ไฟล์
+const document = ref<string>(""); //ดาวน์โหลดไฟล์
 
 /**
  * function อัปโหลดไฟล์เจ้าหน้าที่
@@ -112,10 +113,10 @@ function uploadfile(uploadUrl: string, file: any) {
 }
 
 /**
- * fetchList ไฟล์
+ * fetch รายการไฟล์
  */
-function getListFile() {
-  http
+async function getListFile() {
+  await http
     .get(
       config.API.subFile(
         "ระบบเงินเดือน",
diff --git a/src/modules/13_salary/components/SalaryLists/TabMain.vue b/src/modules/13_salary/components/04_salaryLists/TabMain.vue
similarity index 98%
rename from src/modules/13_salary/components/SalaryLists/TabMain.vue
rename to src/modules/13_salary/components/04_salaryLists/TabMain.vue
index 13c6a1dac..dd41627f8 100644
--- a/src/modules/13_salary/components/SalaryLists/TabMain.vue
+++ b/src/modules/13_salary/components/04_salaryLists/TabMain.vue
@@ -15,9 +15,9 @@ import type {
 } from "@/modules/13_salary/interface/response/SalaryList";
 
 /** importComponents*/
-import TableTabType1 from "@/modules/13_salary/components/SalaryLists/TableTypePending.vue";
-import TableTabType2 from "@/modules/13_salary/components/SalaryLists/TableTypeOther.vue";
-import DialogInfoCriteria from "@/modules/13_salary/components/SalaryLists/DialogInfoCriteria.vue";
+import TableTabType1 from "@/modules/13_salary/components/04_salaryLists/TableTypePending.vue";
+import TableTabType2 from "@/modules/13_salary/components/04_salaryLists/TableTypeOther.vue";
+import DialogInfoCriteria from "@/modules/13_salary/components/04_salaryLists/DialogInfoCriteria.vue";
 
 /** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
diff --git a/src/modules/13_salary/components/SalaryLists/TableTypeOther.vue b/src/modules/13_salary/components/04_salaryLists/TableTypeOther.vue
similarity index 88%
rename from src/modules/13_salary/components/SalaryLists/TableTypeOther.vue
rename to src/modules/13_salary/components/04_salaryLists/TableTypeOther.vue
index b3bcbf7b1..728407d28 100644
--- a/src/modules/13_salary/components/SalaryLists/TableTypeOther.vue
+++ b/src/modules/13_salary/components/04_salaryLists/TableTypeOther.vue
@@ -11,10 +11,10 @@ import type { NewPagination } from "@/modules/13_salary/interface/index/Main";
 import type { DataFilter } from "@/modules/13_salary/interface/index/SalaryList";
 
 /** importComponents*/
-import DialogAddPerson from "@/modules/13_salary/components/SalaryLists//DialogAddPerson.vue";
-import DialogFormEdit from "@/modules/13_salary/components/SalaryLists/DialogFormEdit.vue";
-import DialogMoveGroup from "@/modules/13_salary/components/SalaryLists/DialogMoveGroup.vue";
-import DialogMoveLevel from "@/modules/13_salary/components/SalaryLists/DialogMoveLevel.vue";
+import DialogAddPerson from "@/modules/13_salary/components/04_salaryLists//DialogAddPerson.vue";
+import DialogFormEdit from "@/modules/13_salary/components/04_salaryLists/DialogFormEditSalary.vue";
+import DialogMoveGroup from "@/modules/13_salary/components/04_salaryLists/DialogMoveGroup.vue";
+import DialogMoveLevel from "@/modules/13_salary/components/04_salaryLists/DialogMoveLevel.vue";
 
 /** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
@@ -155,7 +155,6 @@ const baseColumns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
-
 const visibleColumns = ref<string[]>([
   "no",
   "posNo",
@@ -170,27 +169,30 @@ const visibleColumns = ref<string[]>([
   "isRetired",
   "remark",
 ]);
-
 const columns = computed(() => {
   if (props.type !== "NONE") {
     if (baseColumns.value) {
       return baseColumns.value.filter((column) => column.name !== "remark");
     }
   }
-
   return baseColumns.value;
 });
 
 /** modalDialog*/
-const modalDialogAddPerson = ref<boolean>(false);
-const modalDialogForm = ref<boolean>(false);
-const modalDialogMoveGroup = ref<boolean>(false);
-const modalDialogMoveLeve = ref<boolean>(false);
+const modalDialogAddPerson = ref<boolean>(false); //popup เพิ่มคนเลื่อนเงินเดือน
+const modalDialogForm = ref<boolean>(false); //popup  แก้ไขเงินเดือน
+const modalDialogMoveGroup = ref<boolean>(false); //popup ย้ายกลุ่ม
+const modalDialogMoveLeve = ref<boolean>(false); //popup เลื่อนขั้น
 
-const profileId = ref<string>("");
-const amount = ref<number>(0);
+const profileId = ref<string>(""); //id คน
+const amount = ref<number>(0); //เงินเดือน
+const typeLevel = ref<string>(""); //เลื่อนขั้น
+const isReserve = ref<boolean>(false);
+const remark = ref<string>(""); //หมายเหตุ
 
-/** function openPopup เพิ่มคนเลื่อนเงินเดือน*/
+/**
+ * function openPopup เพิ่มคนเลื่อนเงินเดือน
+ */
 function onClickAddPerson() {
   modalDialogAddPerson.value = !modalDialogAddPerson.value;
 }
@@ -217,12 +219,8 @@ function onClickMovieGroup(id: string) {
   modalDialogMoveGroup.value = !modalDialogMoveGroup.value;
 }
 
-const typeLevel = ref<string>("");
-const isReserve = ref<boolean>(false);
-const remark = ref<string>("");
-
 /**
- * function openPopup ย้ายกขั้น
+ * function openPopup ย้ายกลุ่ม
  * @param id profileId
  *
  */
@@ -261,24 +259,32 @@ function onClickDelete(id: string) {
   });
 }
 
-/** function updatePageTable*/
+/**
+ * function updatePageTable
+ */
 function updatePagePagination() {
   props.fetchDataTable?.();
 }
 
-/** function updatePageSizeTable*/
+/**
+ * function updatePageSizeTable
+ */
 function updatePageSizePagination(newPagination: NewPagination) {
   formFilter.value.page = 1;
   formFilter.value.pageSize = newPagination.rowsPerPage;
 }
 
-/** function ค้นหาข้อมูล Table*/
+/**
+ * function ค้นหาข้อมูล Table
+ */
 function searchData() {
   formFilter.value.page = 1;
   props.fetchDataTable?.();
 }
 
-/** callblack function เรียกข้อมูลรายชื่อใหม่ เมื่อมีการเปลี่ยน PageSize*/
+/**
+ * callblack function เรียกข้อมูลรายชื่อใหม่ เมื่อมีการเปลี่ยน PageSize
+ */
 watch(
   () => formFilter.value.pageSize,
   () => {
@@ -515,27 +521,27 @@ watch(
 
   <DialogAddPerson
     v-model:modal="modalDialogAddPerson"
-    :fetchData="props.fetchDataTable"
+    :fetch-data="props.fetchDataTable"
   />
 
   <DialogFormEdit
     v-model:modal="modalDialogForm"
-    v-model:profileId="profileId"
+    v-model:profile-id="profileId"
     v-model:amount="amount"
-    :fetchData="props.fetchDataTable"
+    :fetch-data="props.fetchDataTable"
   />
   <DialogMoveGroup
     v-model:modal="modalDialogMoveGroup"
-    v-model:profileId="profileId"
+    v-model:profile-id="profileId"
+    :fetch-data="props.fetchDataTable"
     :group="store.tabGroup === 'group1' ? 'กลุ่ม1' : 'กลุ่ม2'"
-    :fetchData="props.fetchDataTable"
   />
   <DialogMoveLevel
-    :typeLevel="typeLevel"
-    :isReserve="isReserve"
     v-model:modal="modalDialogMoveLeve"
-    v-model:profileId="profileId"
-    :fetchData="props.fetchDataTable"
+    v-model:profile-id="profileId"
+    :fetch-data="props.fetchDataTable"
+    :type-level="typeLevel"
+    :is-reserve="isReserve"
     :type="store.tabType"
     :remark="remark"
   />
diff --git a/src/modules/13_salary/components/SalaryLists/TableTypePending.vue b/src/modules/13_salary/components/04_salaryLists/TableTypePending.vue
similarity index 86%
rename from src/modules/13_salary/components/SalaryLists/TableTypePending.vue
rename to src/modules/13_salary/components/04_salaryLists/TableTypePending.vue
index 5068f7aa7..5028a9a81 100644
--- a/src/modules/13_salary/components/SalaryLists/TableTypePending.vue
+++ b/src/modules/13_salary/components/04_salaryLists/TableTypePending.vue
@@ -9,11 +9,11 @@ import type { NewPagination } from "@/modules/13_salary/interface/index/Main";
 import type { DataFilter } from "@/modules/13_salary/interface/index/SalaryList";
 
 /** importComponents*/
-import DialogAddPerson from "@/modules/13_salary/components/SalaryLists//DialogAddPerson.vue"; //เพิ่มคนเลื่อนเงินเดือน
-import DialogFormEdit from "@/modules/13_salary/components/SalaryLists/DialogFormEdit.vue"; // แก้ไขเงินเดือน
-import DialogMoveGroup from "@/modules/13_salary/components/SalaryLists/DialogMoveGroup.vue"; // ย้ายกลุ่ม
-import DialogMoveLevel from "@/modules/13_salary/components/SalaryLists/DialogMoveLevel.vue"; // เลื่อนขั้น
-import DialogProperties from "@/modules/13_salary/components/SalaryLists/DialogProperties.vue"; //แก้ไขคุณสมบัติ
+import DialogAddPerson from "@/modules/13_salary/components/04_salaryLists//DialogAddPerson.vue"; //เพิ่มคนเลื่อนเงินเดือน
+import DialogFormEdit from "@/modules/13_salary/components/04_salaryLists/DialogFormEditSalary.vue"; // แก้ไขเงินเดือน
+import DialogMoveGroup from "@/modules/13_salary/components/04_salaryLists/DialogMoveGroup.vue"; // ย้ายกลุ่ม
+import DialogMoveLevel from "@/modules/13_salary/components/04_salaryLists/DialogMoveLevel.vue"; // เลื่อนขั้น
+import DialogProperties from "@/modules/13_salary/components/04_salaryLists/DialogProperties.vue"; //แก้ไขคุณสมบัติ
 import DialogInfo from "@/modules/13_salary/components/DialogInfoMain.vue";
 
 /** importStore*/
@@ -181,20 +181,23 @@ const visibleColumns = ref<string[]>([
 ]);
 
 /** modalDialog*/
-const modalDialogAddPerson = ref<boolean>(false);
-const modalDialogForm = ref<boolean>(false);
-const modalDialogMoveGroup = ref<boolean>(false);
-const modalDialogMoveLeve = ref<boolean>(false);
+const modalDialogAddPerson = ref<boolean>(false); //popup เพิ่มคนเลื่อนเงินเดือน
+const modalDialogForm = ref<boolean>(false); //popup  แก้ไขเงินเดือน
+const modalDialogMoveGroup = ref<boolean>(false); //popup ย้ายกลุ่ม
+const modalDialogMoveLeve = ref<boolean>(false); //popup เลื่อนขั้น
 const modalDialogProperties = ref<boolean>(false);
-const modalDialogInfo = ref<boolean>(false);
+const modalDialogInfo = ref<boolean>(false); // /popup ข้อมูลส่วนตัว
 
 /** ตัวแปร*/
-const profileId = ref<string>("");
-const amount = ref<number>(0);
+const profileId = ref<string>(""); //id คน
+const amount = ref<number>(0); //เงินเดือน
+const typeLevel = ref<string>(""); //เลื่อนขั้น
+const isReserve = ref<boolean>(false);
 const isPunish = ref<boolean>(false);
 const isSuspension = ref<boolean>(false);
 const isAbsent = ref<boolean>(false);
 const isLeave = ref<boolean>(false);
+
 /**
  * function ยืนยันการลบรายชื่อ
  *  @param id profileId
@@ -217,7 +220,9 @@ function onClickDelete(id: string) {
   });
 }
 
-/** function openPopup เพิ่มคนเลื่อนเงินเดือน*/
+/**
+ * function openPopup เพิ่มคนเลื่อนเงินเดือน
+ */
 function onClickAddPerson() {
   modalDialogAddPerson.value = !modalDialogAddPerson.value;
 }
@@ -244,9 +249,6 @@ function onClickMovieGroup(id: string) {
   modalDialogMoveGroup.value = !modalDialogMoveGroup.value;
 }
 
-const typeLevel = ref<string>("");
-const isReserve = ref<boolean>(false);
-
 /**
  * function openPopup ย้ายกขั้น
  * @param id profileId
@@ -259,23 +261,33 @@ function onClickMoveLevel(id: string, typeVal: string, isReserveVal: boolean) {
   isReserve.value = isReserveVal;
 }
 
-/** function updatePageTable*/
+/**
+ * function updatePageTable
+ */
 function updatePagePagination() {
   props.fetchDataTable?.();
 }
 
-/** function updatePageSizeTable*/
+/**
+ * function updatePageSizeTable
+ */
 function updatePageSizePagination(newPagination: NewPagination) {
   formFilter.value.page = 1;
   formFilter.value.pageSize = newPagination.rowsPerPage;
 }
 
-/** function ค้นหาข้อมูล Table*/
+/**
+ * function ค้นหาข้อมูล Table
+ */
 function searchData() {
   formFilter.value.page = 1;
   props.fetchDataTable?.();
 }
 
+/**
+ * function เปิด popup คุณสมบัติ
+ * @param data ข่อมูลคุณสมบัติ
+ */
 function onProperties(data: any) {
   modalDialogProperties.value = true;
   profileId.value = data.id;
@@ -293,7 +305,12 @@ watch(
   }
 );
 
-const infoType = ref<string>("");
+const infoType = ref<string>(""); //ประเภทข้อมูล
+/**
+ * function ดูข้อมูลส่วนตัว
+ * @param type ประเภทข้อมูล
+ * @param id id ที่ต้องการดู
+ */
 function onClickViewInfo(type: string, id: string) {
   infoType.value = type;
   profileId.value = id;
@@ -513,13 +530,13 @@ function onClickViewInfo(type: string, id: string) {
   <!-- เพิ่มคนเลื่อนเงินเดือน -->
   <DialogAddPerson
     v-model:modal="modalDialogAddPerson"
-    :fetchData="props.fetchDataTable"
+    :fetch-data="props.fetchDataTable"
   />
 
   <!-- แก้ไขเงินเดือน -->
   <DialogFormEdit
     v-model:modal="modalDialogForm"
-    v-model:profileId="profileId"
+    v-model:profile-id="profileId"
     v-model:amount="amount"
     :fetchData="props.fetchDataTable"
   />
@@ -527,18 +544,18 @@ function onClickViewInfo(type: string, id: string) {
   <!-- ย้ายกลุ่ม -->
   <DialogMoveGroup
     v-model:modal="modalDialogMoveGroup"
-    v-model:profileId="profileId"
+    v-model:profile-id="profileId"
+    :fetch-data="props.fetchDataTable"
     :group="store.tabGroup === 'group1' ? 'กลุ่ม1' : 'กลุ่ม2'"
-    :fetchData="props.fetchDataTable"
   />
 
   <!-- เลื่อนขั้น -->
   <DialogMoveLevel
-    :typeLevel="typeLevel"
-    :isReserve="isReserve"
     v-model:modal="modalDialogMoveLeve"
-    v-model:profileId="profileId"
-    :fetchData="props.fetchDataTable"
+    v-model:profile-id="profileId"
+    :fetch-data="props.fetchDataTable"
+    :type-level="typeLevel"
+    :is-reserve="isReserve"
     :remark="''"
   />
 
@@ -555,9 +572,9 @@ function onClickViewInfo(type: string, id: string) {
 
   <DialogInfo
     v-model:modal="modalDialogInfo"
-    v-model:profileId="profileId"
+    v-model:profile-id="profileId"
     :type="infoType"
-    :employeeClass="''"
+    :employee-class="''"
   />
 </template>
 
diff --git a/src/modules/13_salary/components/SalaryEmployeeLists/Dashboard.vue b/src/modules/13_salary/components/05_salaryListsEmployee/Dashboard.vue
similarity index 100%
rename from src/modules/13_salary/components/SalaryEmployeeLists/Dashboard.vue
rename to src/modules/13_salary/components/05_salaryListsEmployee/Dashboard.vue
diff --git a/src/modules/13_salary/components/SalaryEmployeeLists/DialogAddPerson.vue b/src/modules/13_salary/components/05_salaryListsEmployee/DialogAddPerson.vue
similarity index 89%
rename from src/modules/13_salary/components/SalaryEmployeeLists/DialogAddPerson.vue
rename to src/modules/13_salary/components/05_salaryListsEmployee/DialogAddPerson.vue
index 2022ef5d2..ac13456c6 100644
--- a/src/modules/13_salary/components/SalaryEmployeeLists/DialogAddPerson.vue
+++ b/src/modules/13_salary/components/05_salaryListsEmployee/DialogAddPerson.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { ref, reactive, watch } from "vue";
 import { useQuasar } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { useSalaryEmployeeListSDataStore } from "@/modules/13_salary/store/SalaryEmployeeListsStore";
 import config from "@/app.config";
 import http from "@/plugins/http";
 
@@ -14,10 +17,6 @@ import type { DataPerson } from "@/modules/13_salary/interface/response/SalaryLi
 /** importComponents*/
 import Header from "@/components/DialogHeader.vue";
 
-/** importStore*/
-import { useCounterMixin } from "@/stores/mixin";
-import { useSalaryEmployeeListSDataStore } from "@/modules/13_salary/store/SalaryEmployeeListsStore";
-
 /** use*/
 const $q = useQuasar();
 const store = useSalaryEmployeeListSDataStore();
@@ -33,6 +32,7 @@ const props = defineProps({
 });
 
 /** Table*/
+const rows = ref<DataPerson[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -89,8 +89,6 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
-const rows = ref<DataPerson[]>([]);
-
 /** ข้อมูุลค้นหา*/
 const formFilter = reactive<DataFilterPerson>({
   page: 1,
@@ -102,21 +100,25 @@ const formFilter = reactive<DataFilterPerson>({
 });
 const maxPage = ref<number>(1);
 
-/** function close popup*/
+/**
+ * function close popup
+ */
 function closeModal() {
   modal.value = false;
   formFilter.page = 1;
   formFilter.keyword = "";
 }
 
-/** function เรียกรายชื่อ คนเลื่อนเงินเดือน*/
-function fetchListPerson() {
+/**
+ * function เรียกรายชื่อ คนเลื่อนเงินเดือน
+ */
+async function fetchListPerson() {
   showLoader();
   formFilter.rootId = store.rootId;
   formFilter.period = store.roundMainCode;
   formFilter.year = store.roundYear;
 
-  http
+  await http
     .post(config.API.salaryListPersonEmp, formFilter)
     .then((res) => {
       const data = res.data.result.data;
@@ -168,24 +170,32 @@ function onClickAddPerson(data: DataPerson) {
   );
 }
 
-/** function updatePage*/
+/**
+ *  function updatePage
+ */
 async function updatePagePagination() {
   fetchListPerson();
 }
 
-/** function updatePageSize*/
+/**
+ * function updatePageSize
+ */
 function updatePageSizePagination(newPagination: NewPagination) {
   formFilter.page = 1;
   formFilter.pageSize = newPagination.rowsPerPage;
 }
 
-/** function ค้นหาข้อมูลตาม keyword*/
+/**
+ * function ค้นหาข้อมูลตาม keyword
+ */
 function searchData() {
   formFilter.page = 1;
   fetchListPerson();
 }
 
-/** callblack function เรียกข้อมูลรายชื่อคนเลื่อนเงินเดือน เมื่อมีการเปิด Popup*/
+/**
+ * callblack function เรียกข้อมูลรายชื่อคนเลื่อนเงินเดือน เมื่อมีการเปิด Popup
+ */
 watch(
   () => modal.value,
   () => {
@@ -195,7 +205,9 @@ watch(
   }
 );
 
-/** callblack function เรียกข้อมูลรายชื่อคนเลื่อนเงินเดือน เมื่อมีการเปลี่ยน PageSize*/
+/**
+ * callblack function เรียกข้อมูลรายชื่อคนเลื่อนเงินเดือน เมื่อมีการเปลี่ยน PageSize
+ */
 watch(
   () => formFilter.pageSize,
   () => {
@@ -302,17 +314,6 @@ watch(
         </div>
       </q-card-section>
       <q-separator />
-
-      <!-- <q-card-actions align="right" class="bg-white text-teal">
-        <q-btn
-          type="submit"
-          unelevated
-          dense
-          class="q-px-md items-center"
-          color="light-blue-10"
-          label="บันทึก"
-        />
-      </q-card-actions> -->
     </q-card>
   </q-dialog>
 </template>
diff --git a/src/modules/13_salary/components/SalaryEmployeeLists/DialogFormEdit.vue b/src/modules/13_salary/components/05_salaryListsEmployee/DialogFormEditSalary.vue
similarity index 61%
rename from src/modules/13_salary/components/SalaryEmployeeLists/DialogFormEdit.vue
rename to src/modules/13_salary/components/05_salaryListsEmployee/DialogFormEditSalary.vue
index 89b69c2ba..aefebf65d 100644
--- a/src/modules/13_salary/components/SalaryEmployeeLists/DialogFormEdit.vue
+++ b/src/modules/13_salary/components/05_salaryListsEmployee/DialogFormEditSalary.vue
@@ -1,15 +1,13 @@
 <script setup lang="ts">
-import { ref } from "vue";
 import { useQuasar } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
 /** importComponents*/
 import Header from "@/components/DialogHeader.vue";
 
-/** importStore*/
-import { useCounterMixin } from "@/stores/mixin";
-
 /** use*/
 const $q = useQuasar();
 const mixin = useCounterMixin();
@@ -25,24 +23,17 @@ const props = defineProps({
   },
 });
 
-const amountRef = ref<any>();
-
-/** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
-function validateForm() {
-  if (amountRef.value.validate()) {
-    onSubmit();
-  }
-}
-
 /** function ปืด Popup */
 function close() {
   modal.value = false;
   amount.value = null;
 }
 
-/** function ยืนยันการบันทึกข้อมูล*/
+/**
+ * function ยืนยันการบันทึกข้อมูล
+ */
 function onSubmit() {
-  dialogConfirm($q, () => {
+  dialogConfirm($q, async () => {
     if (amount.value !== null) {
       showLoader();
       const amountString: string = amount.value.toString();
@@ -53,7 +44,7 @@ function onSubmit() {
             ? amount.value
             : Number(amountString.replace(/,/g, "")),
       };
-      http
+      await http
         .post(config.API.salaryPeriodEmp() + `/change/amount`, body)
         .then(async () => {
           await props.fetchData?.();
@@ -74,29 +65,30 @@ function onSubmit() {
 <template>
   <q-dialog v-model="modal" persistent>
     <q-card class="col-12" style="width: 30%">
-      <Header :tittle="`แก้ไขเงินเดือน`" :close="close" />
-      <q-separator />
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <Header :tittle="`แก้ไขเงินเดือน`" :close="close" />
+        <q-separator />
 
-      <q-card-section class="scroll" style="max-height: 70vh">
-        <div class="q-gutter-y-sm">
-          <q-input
-            ref="amountRef"
-            dense
-            outlined
-            v-model="amount"
-            label="เงินเดือนฐาน"
-            mask="###,###,###,###"
-            reverse-fill-mask
-            :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือนฐาน'}`]"
-            lazy-rules
-            hide-bottom-space
-            class="inputgreen"
-          />
-        </div>
-      </q-card-section>
-      <q-separator />
-      <form @submit.prevent="validateForm">
-        <q-card-actions align="right" class="bg-white text-teal">
+        <q-card-section class="scroll" style="max-height: 70vh">
+          <div class="q-gutter-y-sm">
+            <q-input
+              ref="amountRef"
+              dense
+              outlined
+              v-model="amount"
+              label="เงินเดือนฐาน"
+              mask="###,###,###,###"
+              reverse-fill-mask
+              :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือนฐาน'}`]"
+              lazy-rules
+              hide-bottom-space
+              class="inputgreen"
+            />
+          </div>
+        </q-card-section>
+        <q-separator />
+
+        <q-card-actions align="right">
           <q-btn
             type="submit"
             for="#submitForm"
@@ -104,7 +96,7 @@ function onSubmit() {
             label="บันทึก"
           />
         </q-card-actions>
-      </form>
+      </q-form>
     </q-card>
   </q-dialog>
 </template>
diff --git a/src/modules/13_salary/components/SalaryEmployeeLists/DialogInfoCriteria.vue b/src/modules/13_salary/components/05_salaryListsEmployee/DialogInfoCriteria.vue
similarity index 99%
rename from src/modules/13_salary/components/SalaryEmployeeLists/DialogInfoCriteria.vue
rename to src/modules/13_salary/components/05_salaryListsEmployee/DialogInfoCriteria.vue
index fe9bf7f45..9b4006e4e 100644
--- a/src/modules/13_salary/components/SalaryEmployeeLists/DialogInfoCriteria.vue
+++ b/src/modules/13_salary/components/05_salaryListsEmployee/DialogInfoCriteria.vue
@@ -4,7 +4,10 @@ import Header from "@/components/DialogHeader.vue";
 
 const modal = defineModel<boolean>("modal", { required: true });
 const separator = ref<any>("cell");
-/** ปิด Dialog */
+
+/**
+ * ปิด Dialog
+ */
 function closeDialog() {
   modal.value = !modal.value;
 }
diff --git a/src/modules/13_salary/components/SalaryEmployeeLists/DialogMoveGroup.vue b/src/modules/13_salary/components/05_salaryListsEmployee/DialogMoveGroup.vue
similarity index 62%
rename from src/modules/13_salary/components/SalaryEmployeeLists/DialogMoveGroup.vue
rename to src/modules/13_salary/components/05_salaryListsEmployee/DialogMoveGroup.vue
index 28c814adc..d24ea999e 100644
--- a/src/modules/13_salary/components/SalaryEmployeeLists/DialogMoveGroup.vue
+++ b/src/modules/13_salary/components/05_salaryListsEmployee/DialogMoveGroup.vue
@@ -1,16 +1,15 @@
 <script setup lang="ts">
 import { ref, defineModel, watch } from "vue";
 import { useQuasar } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { useSalaryEmployeeListSDataStore } from "@/modules/13_salary/store/SalaryEmployeeListsStore";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
 /** importComponents*/
 import Header from "@/components/DialogHeader.vue";
 
-/** importStore*/
-import { useCounterMixin } from "@/stores/mixin";
-import { useSalaryEmployeeListSDataStore } from "@/modules/13_salary/store/SalaryEmployeeListsStore";
-
 /** use*/
 const $q = useQuasar();
 const store = useSalaryEmployeeListSDataStore();
@@ -28,32 +27,29 @@ const props = defineProps({
 });
 
 /** ตัวแปร*/
-const group = ref<string>("");
-const groupRef = ref<any>(null);
+const group = ref<string>(""); //กลุ่ม
+
 const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
 
-/*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
-function validateForm() {
-  if (groupRef.value.validate()) {
-    onSubmit();
-  }
-}
-
-/** function ปืด Popup */
+/**
+ *  function ปืด Popup
+ */
 function close() {
   modal.value = false;
   group.value = "";
 }
 
-/** function ยืนยันการบันทึกข้อมูล*/
+/**
+ *  function ยืนยันการบันทึกข้อมูล
+ */
 function onSubmit() {
-  dialogConfirm($q, () => {
+  dialogConfirm($q, async () => {
     showLoader();
     const body = {
       profileId: profileId.value,
       groupId: group.value,
     };
-    http
+    await http
       .post(config.API.salaryPeriod() + `/change/group`, body)
       .then(async () => {
         await props.fetchData?.();
@@ -69,6 +65,13 @@ function onSubmit() {
   });
 }
 
+function inputEdit(val: boolean) {
+  return {
+    "full-width cursor-pointer inputgreen ": val,
+    "full-width cursor-pointer inputgreen": !val,
+  };
+}
+
 watch(
   () => modal.value,
   () => {
@@ -78,45 +81,38 @@ watch(
     }
   }
 );
-
-function inputEdit(val: boolean) {
-  return {
-    "full-width cursor-pointer inputgreen ": val,
-    "full-width cursor-pointer inputgreen": !val,
-  };
-}
 </script>
 
 <template>
   <q-dialog v-model="modal" persistent>
     <q-card class="col-12" style="width: 30%">
-      <Header :tittle="`ย้ายกลุ่ม`" :close="close" />
-      <q-separator />
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <Header :tittle="`ย้ายกลุ่ม`" :close="close" />
+        <q-separator />
 
-      <q-card-section class="scroll" style="max-height: 70vh">
-        <div class="q-gutter-y-sm">
-          <q-select
-            ref="groupRef"
-            :class="inputEdit(isReadonly)"
-            v-model="group"
-            label="กลุ่ม"
-            dense
-            outlined
-            emit-value
-            map-options
-            option-label="name"
-            option-value="id"
-            :options="store.groupOp.filter((e) => e.name !== props.group)"
-            :rules="[(val) => !!val || `${'กรุณากลุ่ม'}`]"
-            lazy-rules
-            hide-bottom-space
-          />
-        </div>
-      </q-card-section>
-      <q-separator />
-      <form @submit.prevent="validateForm">
-        <q-card-actions align="right" class="bg-white text-teal">
-          <!-- <q-btn flat label="OK" v-close-popup /> -->
+        <q-card-section class="scroll" style="max-height: 70vh">
+          <div class="q-gutter-y-sm">
+            <q-select
+              ref="groupRef"
+              :class="inputEdit(isReadonly)"
+              v-model="group"
+              label="กลุ่ม"
+              dense
+              outlined
+              emit-value
+              map-options
+              option-label="name"
+              option-value="id"
+              :options="store.groupOp.filter((e) => e.name !== props.group)"
+              :rules="[(val) => !!val || `${'กรุณากลุ่ม'}`]"
+              lazy-rules
+              hide-bottom-space
+            />
+          </div>
+        </q-card-section>
+        <q-separator />
+
+        <q-card-actions align="right">
           <q-btn
             type="submit"
             for="#submitForm"
@@ -124,7 +120,7 @@ function inputEdit(val: boolean) {
             label="บันทึก"
           />
         </q-card-actions>
-      </form>
+      </q-form>
     </q-card>
   </q-dialog>
 </template>
diff --git a/src/modules/13_salary/components/SalaryEmployeeLists/DialogMoveLevel.vue b/src/modules/13_salary/components/05_salaryListsEmployee/DialogMoveLevel.vue
similarity index 63%
rename from src/modules/13_salary/components/SalaryEmployeeLists/DialogMoveLevel.vue
rename to src/modules/13_salary/components/05_salaryListsEmployee/DialogMoveLevel.vue
index c4fb4e080..70f9c1c25 100644
--- a/src/modules/13_salary/components/SalaryEmployeeLists/DialogMoveLevel.vue
+++ b/src/modules/13_salary/components/05_salaryListsEmployee/DialogMoveLevel.vue
@@ -1,16 +1,15 @@
 <script setup lang="ts">
 import { ref, computed, watch } from "vue";
 import { useQuasar } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { useSalaryEmployeeListSDataStore } from "@/modules/13_salary/store/SalaryEmployeeListsStore";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
 /** importComponents*/
 import Header from "@/components/DialogHeader.vue";
 
-/** importStore*/
-import { useCounterMixin } from "@/stores/mixin";
-import { useSalaryEmployeeListSDataStore } from "@/modules/13_salary/store/SalaryEmployeeListsStore";
-
 /** use*/
 const $q = useQuasar();
 const store = useSalaryEmployeeListSDataStore();
@@ -29,13 +28,11 @@ const props = defineProps({
   },
 });
 
-const type = ref<string>("");
-const note = ref<string>("");
-const typeRef = ref<any>(null);
+const type = ref<string>(""); //เลื่อนระดับ
+const note = ref<string>(""); //หมายเหตุ
 const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
 const isChange = ref<boolean>(false); // มีการแก้ไขข้อมูลหรือไม่
 const isReserve = ref<boolean>(false); // สำรองหรือไม่
-
 const typeRangeOps = computed(() => {
   return store.roundMainCode === "OCT"
     ? [
@@ -56,22 +53,19 @@ const typeRangeOps = computed(() => {
       ];
 });
 
-/*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
-function validateForm() {
-  if (typeRef.value.validate()) {
-    onSubmit();
-  }
-}
-
-/** function ปืด Popup */
+/**
+ * function ปืด Popup
+ */
 function close() {
   modal.value = false;
   type.value = "";
 }
 
-/** function ยืนยันการบันทึกข้อมูล*/
+/**
+ * function ยืนยันการบันทึกข้อมูล
+ */
 function onSubmit() {
-  dialogConfirm($q, () => {
+  dialogConfirm($q, async () => {
     showLoader();
     const body = {
       profileId: profileId.value,
@@ -79,7 +73,7 @@ function onSubmit() {
       isReserve: isReserve.value,
       remark: type.value === "NONE" ? note.value : undefined,
     };
-    http
+    await http
       .post(config.API.salaryPeriodEmp() + `/change/type`, body)
       .then(async () => {
         await props.fetchData?.();
@@ -95,10 +89,20 @@ function onSubmit() {
   });
 }
 
+/**
+ * function เปลี่ยนระดับ
+ */
 function chengType() {
   note.value = props.typeLevel === "NONE" ? props.remark : "";
 }
 
+function inputEdit(val: boolean) {
+  return {
+    "full-width cursor-pointer inputgreen ": val,
+    "full-width cursor-pointer inputgreen": !val,
+  };
+}
+
 watch(
   () => modal.value,
   () => {
@@ -108,66 +112,60 @@ watch(
     isChange.value = false;
   }
 );
-
-function inputEdit(val: boolean) {
-  return {
-    "full-width cursor-pointer inputgreen ": val,
-    "full-width cursor-pointer inputgreen": !val,
-  };
-}
 </script>
 
 <template>
   <q-dialog v-model="modal" persistent>
     <q-card class="col-12" style="width: 30%">
-      <Header :tittle="`เลื่อนขั้น`" :close="close" />
-      <q-separator />
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <Header :tittle="`เลื่อนขั้น`" :close="close" />
+        <q-separator />
 
-      <q-card-section class="scroll" style="max-height: 70vh">
-        <div class="q-gutter-y-sm">
-          <q-select
-            ref="typeRef"
-            :class="inputEdit(isReadonly)"
-            v-model="type"
-            label="เลื่อนขั้น"
-            dense
-            outlined
-            emit-value
-            map-options
-            option-label="name"
-            option-value="id"
-            :options="typeRangeOps"
-            :rules="[(val) => !!val || `${'กรุณาเลือก ขั้น'}`]"
-            lazy-rules
-            hide-bottom-space
-            @update:model-value="(isChange = true), chengType()"
-          />
-          <!-- :options="typeRangeOps.filter((e) => e.id !== store.tabType)" -->
+        <q-card-section class="scroll" style="max-height: 70vh">
+          <div class="q-gutter-y-sm">
+            <q-select
+              ref="typeRef"
+              :class="inputEdit(isReadonly)"
+              v-model="type"
+              label="เลื่อนขั้น"
+              dense
+              outlined
+              emit-value
+              map-options
+              option-label="name"
+              option-value="id"
+              :options="typeRangeOps"
+              :rules="[(val) => !!val || `${'กรุณาเลือก ขั้น'}`]"
+              lazy-rules
+              hide-bottom-space
+              @update:model-value="(isChange = true), chengType()"
+            />
+            <!-- :options="typeRangeOps.filter((e) => e.id !== store.tabType)" -->
 
-          <q-checkbox
-            v-if="type === 'FULL'"
-            keep-color
-            label="สำรอง"
-            dense
-            v-model="isReserve"
-            @update:model-value="isChange = true"
-          />
+            <q-checkbox
+              v-if="type === 'FULL'"
+              keep-color
+              label="สำรอง"
+              dense
+              v-model="isReserve"
+              @update:model-value="isChange = true"
+            />
 
-          <q-input
-            v-if="type === 'NONE'"
-            :class="inputEdit(isReadonly)"
-            outlined
-            dense
-            v-model="note"
-            label="หมายเหตุ"
-            type="textarea"
-            @update:model-value="isChange = true"
-          />
-        </div>
-      </q-card-section>
-      <q-separator />
-      <form @submit.prevent="validateForm">
-        <q-card-actions align="right" class="bg-white text-teal">
+            <q-input
+              v-if="type === 'NONE'"
+              :class="inputEdit(isReadonly)"
+              outlined
+              dense
+              v-model="note"
+              label="หมายเหตุ"
+              type="textarea"
+              @update:model-value="isChange = true"
+            />
+          </div>
+        </q-card-section>
+        <q-separator />
+
+        <q-card-actions align="right">
           <q-btn
             :disabled="!isChange"
             type="submit"
@@ -176,7 +174,7 @@ function inputEdit(val: boolean) {
             label="บันทึก"
           />
         </q-card-actions>
-      </form>
+      </q-form>
     </q-card>
   </q-dialog>
 </template>
diff --git a/src/modules/13_salary/components/SalaryEmployeeLists/DialogProperties.vue b/src/modules/13_salary/components/05_salaryListsEmployee/DialogProperties.vue
similarity index 64%
rename from src/modules/13_salary/components/SalaryEmployeeLists/DialogProperties.vue
rename to src/modules/13_salary/components/05_salaryListsEmployee/DialogProperties.vue
index ce5e3eefb..99007cfcf 100644
--- a/src/modules/13_salary/components/SalaryEmployeeLists/DialogProperties.vue
+++ b/src/modules/13_salary/components/05_salaryListsEmployee/DialogProperties.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
-import { ref, computed, watch } from "vue";
+import { ref,  watch } from "vue";
 import { useQuasar } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { useSalaryEmployeeListSDataStore } from "@/modules/13_salary/store/SalaryEmployeeListsStore";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -8,8 +11,6 @@ import config from "@/app.config";
 import Header from "@/components/DialogHeader.vue";
 
 /** importStore*/
-import { useCounterMixin } from "@/stores/mixin";
-import { useSalaryEmployeeListSDataStore } from "@/modules/13_salary/store/SalaryEmployeeListsStore";
 
 /** use*/
 const $q = useQuasar();
@@ -43,20 +44,19 @@ const isSuspension = ref<boolean>(false); // สำรองหรือไม
 const isAbsent = ref<boolean>(false); // สำรองหรือไม่
 const isLeave = ref<boolean>(false); // สำรองหรือไม่
 
-/*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
-function validateForm() {
-  onSubmit();
-}
-
-/** function ปืด Popup */
+/**
+ * function ปืด Popup
+ */
 function close() {
   modal.value = false;
   type.value = "";
 }
 
-/** function ยืนยันการบันทึกข้อมูล*/
+/**
+ * function ยืนยันการบันทึกข้อมูล
+ */
 function onSubmit() {
-  dialogConfirm($q, () => {
+  dialogConfirm($q, async () => {
     showLoader();
     const body = {
       isPunish: isPunish.value,
@@ -64,7 +64,7 @@ function onSubmit() {
       isAbsent: isAbsent.value,
       isLeave: isLeave.value,
     };
-    http
+    await http
       .put(config.API.salaryPropertyEmp(profileId.value), body)
       .then(async () => {
         await props.fetchData?.();
@@ -94,43 +94,44 @@ watch(
 <template>
   <q-dialog v-model="modal" persistent>
     <q-card class="col-12" style="width: 20%">
-      <Header :tittle="`แก้ไขคุณสมบัติ`" :close="close" />
-      <q-separator />
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <Header :tittle="`แก้ไขคุณสมบัติ`" :close="close" />
+        <q-separator />
+
+        <q-card-section class="scroll" style="max-height: 70vh">
+          <div class="q-gutter-y-sm column">
+            <q-checkbox
+              toggle-indeterminate
+              keep-color
+              label="ไม่ถูกลงโทษทางวินัย"
+              dense
+              v-model="isPunish"
+            />
+            <q-checkbox
+              toggle-indeterminate
+              keep-color
+              label="ไม่ถูกพักราชการ"
+              dense
+              v-model="isSuspension"
+            />
+            <q-checkbox
+              toggle-indeterminate
+              keep-color
+              label="ไม่ขาดราชการ"
+              dense
+              v-model="isAbsent"
+            />
+            <q-checkbox
+              toggle-indeterminate
+              keep-color
+              label="วันลาไม่เกิน"
+              dense
+              v-model="isLeave"
+            />
+          </div>
+        </q-card-section>
+        <q-separator />
 
-      <q-card-section class="scroll" style="max-height: 70vh">
-        <div class="q-gutter-y-sm column">
-          <q-checkbox
-            toggle-indeterminate
-            keep-color
-            label="ไม่ถูกลงโทษทางวินัย"
-            dense
-            v-model="isPunish"
-          />
-          <q-checkbox
-            toggle-indeterminate
-            keep-color
-            label="ไม่ถูกพักราชการ"
-            dense
-            v-model="isSuspension"
-          />
-          <q-checkbox
-            toggle-indeterminate
-            keep-color
-            label="ไม่ขาดราชการ"
-            dense
-            v-model="isAbsent"
-          />
-          <q-checkbox
-            toggle-indeterminate
-            keep-color
-            label="วันลาไม่เกิน"
-            dense
-            v-model="isLeave"
-          />
-        </div>
-      </q-card-section>
-      <q-separator />
-      <form @submit.prevent="validateForm">
         <q-card-actions align="right" class="bg-white text-teal">
           <q-btn
             type="submit"
@@ -139,7 +140,7 @@ watch(
             label="บันทึก"
           />
         </q-card-actions>
-      </form>
+      </q-form>
     </q-card>
   </q-dialog>
 </template>
diff --git a/src/modules/13_salary/components/SalaryEmployeeLists/ProcessStep.vue b/src/modules/13_salary/components/05_salaryListsEmployee/ProcessStep.vue
similarity index 91%
rename from src/modules/13_salary/components/SalaryEmployeeLists/ProcessStep.vue
rename to src/modules/13_salary/components/05_salaryListsEmployee/ProcessStep.vue
index 94b94d47f..358f05219 100644
--- a/src/modules/13_salary/components/SalaryEmployeeLists/ProcessStep.vue
+++ b/src/modules/13_salary/components/05_salaryListsEmployee/ProcessStep.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
-import { checkPermission } from "@/utils/permissions";
 import axios from "axios";
 
+import { checkPermission } from "@/utils/permissions";
+import { useCounterMixin } from "@/stores/mixin";
+import { useSalaryEmployeeListSDataStore } from "@/modules/13_salary/store/SalaryEmployeeListsStore";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
 import DialogPopupReason from "@/components/Dialogs/PopupReason.vue"; //หมายเหตุ
 
-import { useCounterMixin } from "@/stores/mixin";
-import { useSalaryEmployeeListSDataStore } from "@/modules/13_salary/store/SalaryEmployeeListsStore";
-
 const $q = useQuasar(); //ใช้ noti quasar
 const mixin = useCounterMixin();
 const store = useSalaryEmployeeListSDataStore();
@@ -29,11 +29,12 @@ const props = defineProps({
   getData: Function,
 });
 
+const modalRecommend = ref<boolean>(false); //popup
+const titleRecommend = ref<string>(""); //หัวข้อ Popup
 const sendStep = ref<number>(1);
-const fileUpload = ref<any>(null);
-const document = ref<string>("");
-const type = ref<string>("");
-const listFile = ref<any>([]);
+const fileUpload = ref<any>(null); //ไฟล์
+const type = ref<string>(""); //ประเภท
+const listFile = ref<any[]>([]); //รายการไฟล์
 /**
  * function อัปโหลดไฟล์เจ้าหน้าที่
  * @param event file
@@ -79,6 +80,10 @@ async function uploadFile(event: any) {
   );
 }
 
+/**
+ *  functoin อัปโหลดไฟล์
+ * @param uploadUrl  link อัปโหลด
+ */
 function fileUpLoad(url: string) {
   axios
     .put(url, fileUpload.value, {
@@ -98,6 +103,10 @@ function fileUpLoad(url: string) {
     });
 }
 
+/**
+ * ยินยันการบันทึกคำแนะนำ
+ * @param reason คำแนะนำ
+ */
 function saveReccommend(reason: string) {
   dialogConfirm(
     $q,
@@ -131,6 +140,11 @@ function saveReccommend(reason: string) {
   );
 }
 
+/**
+ * ยืนยันการส่ง
+ * @param msg ส่งเอกสารให้ ผอ. ตรวจสอบ,ยืนยันและส่งเอกสารให้,ยืนยันการตรวจสอบ
+ * @param type officer, head,owner
+ */
 function sendToDirector(msg: string, type: string) {
   dialogConfirm(
     $q,
@@ -160,16 +174,22 @@ function sendToDirector(msg: string, type: string) {
   );
 }
 
-const modalRecommend = ref<boolean>(false);
-const titleRecommend = ref<string>("");
+/**
+ * ส่งคำแนะนำให้ ผอ. ตรวจสอบ
+ * @param title หัวข้อ
+ * @param typeOrder ประเภทคำสั่ง
+ */
 function sendAndRecommend(title: string, typeOrder: string) {
   modalRecommend.value = true;
   titleRecommend.value = title;
   type.value = typeOrder;
 }
 
-function fetchListFile() {
-  http
+/**
+ * fetch รายการไฟล์
+ */
+async function fetchListFile() {
+  await http
     .get(
       config.API.subFile(
         "ระบบเงินเดือน",
@@ -186,6 +206,10 @@ function fetchListFile() {
     });
 }
 
+/**
+ *  ลบไฟล์
+ * @param fileName  ชื่อไฟล์
+ */
 function onDeleteFile(fileName: string) {
   dialogRemove($q, () => {
     showLoader();
@@ -213,6 +237,10 @@ function onDeleteFile(fileName: string) {
   });
 }
 
+/**
+ *  โหลดไฟล์
+ * @param fileName  ชื่อไฟล์
+ */
 function downloadFile(fileName: string) {
   showLoader();
   http
@@ -236,6 +264,7 @@ function downloadFile(fileName: string) {
       hideLoader();
     });
 }
+
 onMounted(() => {
   if (props.rootId) {
     fetchListFile();
diff --git a/src/modules/13_salary/components/SalaryEmployeeLists/TabMain.vue b/src/modules/13_salary/components/05_salaryListsEmployee/TabMain.vue
similarity index 85%
rename from src/modules/13_salary/components/SalaryEmployeeLists/TabMain.vue
rename to src/modules/13_salary/components/05_salaryListsEmployee/TabMain.vue
index b524faeb1..242eaab1b 100644
--- a/src/modules/13_salary/components/SalaryEmployeeLists/TabMain.vue
+++ b/src/modules/13_salary/components/05_salaryListsEmployee/TabMain.vue
@@ -15,9 +15,9 @@ import type {
 } from "@/modules/13_salary/interface/response/SalaryList";
 
 /** importComponents*/
-import TableTabType1 from "@/modules/13_salary/components/SalaryEmployeeLists/TableTypePending.vue";
-import TableTabType2 from "@/modules/13_salary/components/SalaryEmployeeLists/TableTypeOther.vue";
-import DialogInfoCriteria from "@/modules/13_salary/components/SalaryEmployeeLists/DialogInfoCriteria.vue";
+import TableTabType1 from "@/modules/13_salary/components/05_salaryListsEmployee/TableTypePending.vue";
+import TableTabType2 from "@/modules/13_salary/components/05_salaryListsEmployee/TableTypeOther.vue";
+import DialogInfoCriteria from "@/modules/13_salary/components/05_salaryListsEmployee/DialogInfoCriteria.vue";
 
 /** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
@@ -36,11 +36,14 @@ const props = defineProps({
   roundFilter: { type: Object, require: true },
 });
 
-const total = ref<number>();
 const splitterModel = ref<number>(13);
-const rows = ref<DataPeriod[]>([]);
+const modalDialogInfoCriteria = ref<boolean>(false); //popup หลักเกณฑ์การพิจารณาเลื่อนขั้นเงินข้าราชการ
+const isRetire = ref<boolean | string>(false); //แสดงเฉพาะผู้เกษียณอายุราชการ
+const rows = ref<DataPeriod[]>([]); //ข้อมูลรายชื่อ
+const total = ref<number>(0); //จำนวนรายการ
+const maxPage = ref<number>(1); //จำนวนหน้า
 
-/** itemsTab กลุ่ม*/
+//itemsTab กลุ่ม
 const itemsTabGroup = ref([
   {
     lable: "กลุ่ม 1",
@@ -51,8 +54,7 @@ const itemsTabGroup = ref([
     name: "group2",
   },
 ]);
-
-/** itemsTab ขั้น*/
+//itemsTab ขั้น
 const itemsTabType = computed(() => {
   return store.roundMainCode === "OCT"
     ? [
@@ -61,11 +63,6 @@ const itemsTabType = computed(() => {
           name: "tab1",
           type: "PENDING",
         },
-        // {
-        //   lable: "รายชื่อผู้เกษียณอายุราชการ",
-        //   name: "tab5",
-        //   type: "RETIRE",
-        // },
         {
           lable: "1 ขั้น",
           name: "tab2",
@@ -128,8 +125,7 @@ const itemsTabType = computed(() => {
         },
       ];
 });
-
-/** itemsCard*/
+//itemsCard
 const itemsCard = ref([
   {
     lable: "จำนวนคนทั้งหมด",
@@ -205,15 +201,13 @@ const itemsCard = ref([
     total: 0,
   },
 ]);
-
-/** ข้อมูลค้นหารายชื่อคยขึ้นเงินเดือน*/
+//ข้อมูลค้นหารายชื่อคยขึ้นเงินเดือน
 const formFilter = reactive<DataFilter>({
   page: 1,
   pageSize: 10,
   keyword: "",
   type: store.tabType,
 });
-const maxPage = ref<number>(1);
 
 /**
  * function เรียกข้อมูลจำนวนโควต้า
@@ -250,7 +244,7 @@ function fetchDataQuota(id: string) {
  * function เรียกข้อมูลรายชื่อ
  * @param id กลุ่ม
  */
-function fetchDataPeriod(id: string) {
+async function fetchDataPeriod(id: string) {
   showLoader();
   rows.value = [];
   let formData = {
@@ -266,7 +260,7 @@ function fetchDataPeriod(id: string) {
         : "0",
   };
 
-  http
+  await http
     .put(config.API.salaryListPeriodORGEmp(id), formData)
     .then((res) => {
       rows.value = res.data.result.data;
@@ -283,7 +277,9 @@ function fetchDataPeriod(id: string) {
     });
 }
 
-/**function เปลี่ยนขั้น*/
+/**
+ * function เปลี่ยนขั้น
+ */
 function changeTabType() {
   formFilter.page = 1;
   formFilter.pageSize = 10;
@@ -291,13 +287,20 @@ function changeTabType() {
   store.groupId && fetchDataPeriod(store.groupId);
 }
 
-/** function เรียกข้อมูลรายชื่ออีกครั้ง*/
+/**
+ * function เรียกข้อมูลรายชื่ออีกครั้ง
+ */
 function fetchDataPeriodNew() {
   store.groupId && fetchDataPeriod(store.groupId);
   store.groupId && fetchDataQuota(store.groupId);
 }
 
-function onClickDownload(data: DataOption, type: string = "xlsx") {
+/**
+ * function โหลดไฟล์
+ * @param data ข้อมูลที่ต้องการโหล
+ * @param type ประเภทไฟล์ docx,xlsx
+ */
+async function onClickDownload(data: DataOption, type: string = "xlsx") {
   showLoader();
   if (data.id === "emp-08" || data.id === "emp2-08") {
     const formData = {
@@ -311,11 +314,11 @@ function onClickDownload(data: DataOption, type: string = "xlsx") {
           ? `${props?.roundFilter?.year}-03-31`
           : `${props?.roundFilter?.year}-09-30`,
     };
-    http
+    await http
       .post(config.API.leaveReportLeaveday("employee"), formData)
-      .then((res) => {
-        const dataList = res.data.result;
-        genReportXLSX(dataList, data.name);
+      .then(async (res) => {
+        const dataList = await res.data.result;
+        await genReportXLSX(dataList, data.name);
       })
       .catch((e) => {
         messageError($q, e);
@@ -325,7 +328,7 @@ function onClickDownload(data: DataOption, type: string = "xlsx") {
       });
   } else {
     if (props.rootId && props.periodId) {
-      http
+      await http
         .get(
           config.API.salaryReportListsByid(
             data.id,
@@ -333,15 +336,9 @@ function onClickDownload(data: DataOption, type: string = "xlsx") {
             props.periodId
           )
         )
-        .then((res) => {
-          const dataList = res.data.result;
-          // if (type === "pdf") {
-          //   console.log(type);
-
-          //   genReport(dataList, data.name, type);
-          // } else {
-          genReportXLSX(dataList, data.name, type);
-          // }
+        .then(async (res) => {
+          const dataList = await res.data.result;
+          await genReportXLSX(dataList, data.name, type);
         })
         .catch((e) => {
           messageError($q, e);
@@ -353,7 +350,14 @@ function onClickDownload(data: DataOption, type: string = "xlsx") {
   }
 }
 
-const modalDialogInfoCriteria = ref<boolean>(false);
+/**
+ * funrion แสดงเฉพาะผู้เกษียณอายุราชการ
+ */
+function updateIsShowRetire() {
+  isRetire.value = !isRetire.value;
+  fetchDataPeriodNew();
+}
+
 onMounted(() => {
   if (props.rootId) {
     fetchDataQuota(store.groupId);
@@ -361,12 +365,6 @@ onMounted(() => {
     splitterModel.value = store.roundMainCode === "APR" ? 13 : 16;
   }
 });
-
-const isRetire = ref<boolean | string>(false);
-const updateIsShowRetire = () => {
-  isRetire.value = !isRetire.value;
-  fetchDataPeriodNew();
-};
 </script>
 
 <template>
@@ -505,18 +503,18 @@ const updateIsShowRetire = () => {
               >
                 <TableTabType1
                   v-if="index === 0"
+                  v-model:max-page="maxPage"
+                  v-model:form-filter="formFilter"
+                  :fetch-data-table="fetchDataPeriodNew"
                   :rows="rows"
-                  v-model:maxPage="maxPage"
-                  v-model:formFilter="formFilter"
-                  :fetchDataTable="fetchDataPeriodNew"
                   :total="total"
                 />
                 <TableTabType2
                   v-else
                   :rows="rows"
-                  v-model:maxPage="maxPage"
-                  v-model:formFilter="formFilter"
-                  :fetchDataTable="fetchDataPeriodNew"
+                  v-model:max-page="maxPage"
+                  v-model:form-filter="formFilter"
+                  :fetch-data-table="fetchDataPeriodNew"
                   :total="total"
                   :type="item.type"
                 />
diff --git a/src/modules/13_salary/components/SalaryEmployeeLists/TableTypeOther.vue b/src/modules/13_salary/components/05_salaryListsEmployee/TableTypeOther.vue
similarity index 88%
rename from src/modules/13_salary/components/SalaryEmployeeLists/TableTypeOther.vue
rename to src/modules/13_salary/components/05_salaryListsEmployee/TableTypeOther.vue
index 4e3d1db50..609ceafa3 100644
--- a/src/modules/13_salary/components/SalaryEmployeeLists/TableTypeOther.vue
+++ b/src/modules/13_salary/components/05_salaryListsEmployee/TableTypeOther.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import { ref, watch, computed } from "vue";
 import { useQuasar } from "quasar";
+
 import { checkPermission } from "@/utils/permissions";
+import { useCounterMixin } from "@/stores/mixin";
+import { useSalaryEmployeeListSDataStore } from "@/modules/13_salary/store/SalaryEmployeeListsStore";
 import config from "@/app.config";
 import http from "@/plugins/http";
 
@@ -11,14 +14,10 @@ import type { NewPagination } from "@/modules/13_salary/interface/index/Main";
 import type { DataFilter } from "@/modules/13_salary/interface/index/SalaryList";
 
 /** importComponents*/
-import DialogAddPerson from "@/modules/13_salary/components/SalaryEmployeeLists//DialogAddPerson.vue";
-import DialogFormEdit from "@/modules/13_salary/components/SalaryEmployeeLists/DialogFormEdit.vue";
-import DialogMoveGroup from "@/modules/13_salary/components/SalaryEmployeeLists/DialogMoveGroup.vue";
-import DialogMoveLevel from "@/modules/13_salary/components/SalaryEmployeeLists/DialogMoveLevel.vue";
-
-/** importStore*/
-import { useCounterMixin } from "@/stores/mixin";
-import { useSalaryEmployeeListSDataStore } from "@/modules/13_salary/store/SalaryEmployeeListsStore";
+import DialogAddPerson from "@/modules/13_salary/components/05_salaryListsEmployee//DialogAddPerson.vue";
+import DialogFormEdit from "@/modules/13_salary/components/05_salaryListsEmployee/DialogFormEditSalary.vue";
+import DialogMoveGroup from "@/modules/13_salary/components/05_salaryListsEmployee/DialogMoveGroup.vue";
+import DialogMoveLevel from "@/modules/13_salary/components/05_salaryListsEmployee/DialogMoveLevel.vue";
 
 /** use*/
 const $q = useQuasar();
@@ -167,7 +166,6 @@ const baseColumns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
-
 const visibleColumns = ref<string[]>([
   "no",
   "posNo",
@@ -183,7 +181,6 @@ const visibleColumns = ref<string[]>([
   "isRetired",
   "remark",
 ]);
-
 const columns = computed(() => {
   if (props.type !== "NONE") {
     if (baseColumns.value) {
@@ -194,15 +191,20 @@ const columns = computed(() => {
 });
 
 /** modalDialog*/
-const modalDialogAddPerson = ref<boolean>(false);
-const modalDialogForm = ref<boolean>(false);
-const modalDialogMoveGroup = ref<boolean>(false);
-const modalDialogMoveLeve = ref<boolean>(false);
+const modalDialogAddPerson = ref<boolean>(false); //popup คนเลื่อนเงินเดือน
+const modalDialogForm = ref<boolean>(false); //popup แก้ไขเงินเดือน
+const modalDialogMoveGroup = ref<boolean>(false); //popup ย้ายกลุ่ม
+const modalDialogMoveLeve = ref<boolean>(false); //popup เลื่อนขั้น
 
-const profileId = ref<string>("");
-const amount = ref<number>(0);
+const profileId = ref<string>(""); //id คน
+const amount = ref<number>(0); //เงินเดือน
+const typeLevel = ref<string>(""); //เลื่อนขั้น
+const isReserve = ref<boolean>(false); //สำรอง
+const remark = ref<string>(""); //หมายเหตุ
 
-/** function openPopup เพิ่มคนเลื่อนค่าจ้าง*/
+/**
+ * function openPopup เพิ่มคนเลื่อนค่าจ้าง
+ */
 function onClickAddPerson() {
   modalDialogAddPerson.value = !modalDialogAddPerson.value;
 }
@@ -229,10 +231,6 @@ function onClickMovieGroup(id: string) {
   modalDialogMoveGroup.value = !modalDialogMoveGroup.value;
 }
 
-const typeLevel = ref<string>("");
-const isReserve = ref<boolean>(false);
-const remark = ref<string>("");
-
 /**
  * function openPopup ย้ายกขั้น
  * @param id profileId
@@ -273,24 +271,32 @@ function onClickDelete(id: string) {
   });
 }
 
-/** function updatePageTable*/
+/**
+ * function updatePageTable
+ */
 function updatePagePagination() {
   props.fetchDataTable?.();
 }
 
-/** function updatePageSizeTable*/
+/**
+ * function updatePageSizeTable
+ */
 function updatePageSizePagination(newPagination: NewPagination) {
   formFilter.value.page = 1;
   formFilter.value.pageSize = newPagination.rowsPerPage;
 }
 
-/** function ค้นหาข้อมูล Table*/
+/**
+ * function ค้นหาข้อมูล Table
+ */
 function searchData() {
   formFilter.value.page = 1;
   props.fetchDataTable?.();
 }
 
-/** callblack function เรียกข้อมูลรายชื่อใหม่ เมื่อมีการเปลี่ยน PageSize*/
+/**
+ * callblack function เรียกข้อมูลรายชื่อใหม่ เมื่อมีการเปลี่ยน PageSize
+ */
 watch(
   () => formFilter.value.pageSize,
   () => {
@@ -528,27 +534,27 @@ watch(
 
   <DialogAddPerson
     v-model:modal="modalDialogAddPerson"
-    :fetchData="props.fetchDataTable"
+    :fetch-data="props.fetchDataTable"
   />
 
   <DialogFormEdit
     v-model:modal="modalDialogForm"
-    v-model:profileId="profileId"
+    v-model:profile-id="profileId"
     v-model:amount="amount"
-    :fetchData="props.fetchDataTable"
+    :fetch-data="props.fetchDataTable"
   />
   <DialogMoveGroup
     v-model:modal="modalDialogMoveGroup"
-    v-model:profileId="profileId"
+    v-model:profile-id="profileId"
+    :fetch-data="props.fetchDataTable"
     :group="store.tabGroup === 'group1' ? 'กลุ่ม1' : 'กลุ่ม2'"
-    :fetchData="props.fetchDataTable"
   />
   <DialogMoveLevel
-    :typeLevel="typeLevel"
-    :isReserve="isReserve"
     v-model:modal="modalDialogMoveLeve"
-    v-model:profileId="profileId"
-    :fetchData="props.fetchDataTable"
+    v-model:profile-id="profileId"
+    :fetch-data="props.fetchDataTable"
+    :type-level="typeLevel"
+    :is-reserve="isReserve"
     :type="store.tabType"
     :remark="remark"
   />
diff --git a/src/modules/13_salary/components/SalaryEmployeeLists/TableTypePending.vue b/src/modules/13_salary/components/05_salaryListsEmployee/TableTypePending.vue
similarity index 85%
rename from src/modules/13_salary/components/SalaryEmployeeLists/TableTypePending.vue
rename to src/modules/13_salary/components/05_salaryListsEmployee/TableTypePending.vue
index 605d41ebe..3297cd57d 100644
--- a/src/modules/13_salary/components/SalaryEmployeeLists/TableTypePending.vue
+++ b/src/modules/13_salary/components/05_salaryListsEmployee/TableTypePending.vue
@@ -1,7 +1,12 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
 import { useQuasar } from "quasar";
+
 import { checkPermission } from "@/utils/permissions";
+import { useCounterMixin } from "@/stores/mixin";
+import { useSalaryEmployeeListSDataStore } from "@/modules/13_salary/store/SalaryEmployeeListsStore";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 /** importType*/
 import type { QTableProps } from "quasar";
@@ -9,19 +14,13 @@ import type { NewPagination } from "@/modules/13_salary/interface/index/Main";
 import type { DataFilter } from "@/modules/13_salary/interface/index/SalaryList";
 
 /** importComponents*/
-import DialogAddPerson from "@/modules/13_salary/components/SalaryEmployeeLists//DialogAddPerson.vue";
-import DialogFormEdit from "@/modules/13_salary/components/SalaryEmployeeLists/DialogFormEdit.vue";
-import DialogMoveGroup from "@/modules/13_salary/components/SalaryEmployeeLists/DialogMoveGroup.vue";
-import DialogMoveLevel from "@/modules/13_salary/components/SalaryEmployeeLists/DialogMoveLevel.vue";
-import DialogProperties from "@/modules/13_salary/components/SalaryEmployeeLists/DialogProperties.vue";
+import DialogAddPerson from "@/modules/13_salary/components/05_salaryListsEmployee//DialogAddPerson.vue";
+import DialogFormEdit from "@/modules/13_salary/components/05_salaryListsEmployee/DialogFormEditSalary.vue";
+import DialogMoveGroup from "@/modules/13_salary/components/05_salaryListsEmployee/DialogMoveGroup.vue";
+import DialogMoveLevel from "@/modules/13_salary/components/05_salaryListsEmployee/DialogMoveLevel.vue";
+import DialogProperties from "@/modules/13_salary/components/05_salaryListsEmployee/DialogProperties.vue";
 import DialogInfo from "@/modules/13_salary/components/DialogInfoMain.vue";
 
-/** importStore*/
-import { useCounterMixin } from "@/stores/mixin";
-import { useSalaryEmployeeListSDataStore } from "@/modules/13_salary/store/SalaryEmployeeListsStore";
-import http from "@/plugins/http";
-import config from "@/app.config";
-
 /** use*/
 const $q = useQuasar();
 const store = useSalaryEmployeeListSDataStore();
@@ -194,20 +193,23 @@ const visibleColumns = ref<string[]>([
 ]);
 
 /** modalDialog*/
-const modalDialogAddPerson = ref<boolean>(false);
-const modalDialogForm = ref<boolean>(false);
-const modalDialogMoveGroup = ref<boolean>(false);
-const modalDialogMoveLeve = ref<boolean>(false);
-const modalDialogProperties = ref<boolean>(false);
-const modalDialogInfo = ref<boolean>(false);
+const modalDialogAddPerson = ref<boolean>(false); //popup คนเลื่อนเงินเดือน
+const modalDialogForm = ref<boolean>(false); //popup แก้ไขเงินเดือน
+const modalDialogMoveGroup = ref<boolean>(false); //popup ย้ายกลุ่ม
+const modalDialogMoveLeve = ref<boolean>(false); //popup เลื่อนขั้น
+const modalDialogProperties = ref<boolean>(false); //popup คุณสมบัติ
+const modalDialogInfo = ref<boolean>(false); //popup ข้อมูลส่วนตัว
 
 /** ตัวแปร*/
-const profileId = ref<string>("");
-const amount = ref<number>(0);
+const profileId = ref<string>(""); //id คน
+const amount = ref<number>(0); //เงินเดือน
+const typeLevel = ref<string>(""); //เลื่อนขั้น
+const isReserve = ref<boolean>(false); //สำรอง
 const isPunish = ref<boolean>(false);
 const isSuspension = ref<boolean>(false);
 const isAbsent = ref<boolean>(false);
 const isLeave = ref<boolean>(false);
+
 /**
  * function ยืนยันการลบรายชื่อ
  *  @param id profileId
@@ -230,7 +232,9 @@ function onClickDelete(id: string) {
   });
 }
 
-/** function openPopup เพิ่มคนเลื่อนค่าจ้าง*/
+/**
+ * function openPopup เพิ่มคนเลื่อนค่าจ้าง
+ */
 function onClickAddPerson() {
   modalDialogAddPerson.value = !modalDialogAddPerson.value;
 }
@@ -257,8 +261,6 @@ function onClickMovieGroup(id: string) {
   modalDialogMoveGroup.value = !modalDialogMoveGroup.value;
 }
 
-const typeLevel = ref<string>("");
-const isReserve = ref<boolean>(false);
 /**
  * function openPopup ย้ายกขั้น
  * @param id profileId
@@ -271,23 +273,33 @@ function onClickMoveLevel(id: string, typeVal: string, isReserveVal: boolean) {
   isReserve.value = isReserveVal;
 }
 
-/** function updatePageTable*/
+/**
+ * function updatePageTable
+ */
 function updatePagePagination() {
   props.fetchDataTable?.();
 }
 
-/** function updatePageSizeTable*/
+/**
+ * function updatePageSizeTable
+ */
 function updatePageSizePagination(newPagination: NewPagination) {
   formFilter.value.page = 1;
   formFilter.value.pageSize = newPagination.rowsPerPage;
 }
 
-/** function ค้นหาข้อมูล Table*/
+/**
+ * function ค้นหาข้อมูล Table
+ */
 function searchData() {
   formFilter.value.page = 1;
   props.fetchDataTable?.();
 }
 
+/**
+ * function เปิด popup คุณสมบัติ
+ * @param data ข่อมูลคุณสมบัติ
+ */
 function onProperties(data: any) {
   modalDialogProperties.value = true;
   profileId.value = data.id;
@@ -296,20 +308,28 @@ function onProperties(data: any) {
   isAbsent.value = data.isAbsent;
   isLeave.value = data.isLeave;
 }
-/** callblack function เรียกข้อมูลรายชื่อใหม่ เมื่อมีการเปลี่ยน PageSize*/
+
+const infoType = ref<string>(""); //ประเภทข้อมูล
+/**
+ * function ดูข้อมูลส่วนตัว
+ * @param type ประเภทข้อมูล
+ * @param id id ที่ต้องการดู
+ */
+function onClickViewInfo(type: string, id: string) {
+  infoType.value = type;
+  profileId.value = id;
+  modalDialogInfo.value = true;
+}
+
+/**
+ * callblack function เรียกข้อมูลรายชื่อใหม่ เมื่อมีการเปลี่ยน PageSize
+ */
 watch(
   () => formFilter.value.pageSize,
   () => {
     updatePagePagination();
   }
 );
-
-const infoType = ref<string>("");
-function onClickViewInfo(type: string, id: string) {
-  infoType.value = type;
-  profileId.value = id;
-  modalDialogInfo.value = true;
-}
 </script>
 
 <template>
@@ -531,44 +551,44 @@ function onClickViewInfo(type: string, id: string) {
 
   <DialogAddPerson
     v-model:modal="modalDialogAddPerson"
-    :fetchData="props.fetchDataTable"
+    :fetch-data="props.fetchDataTable"
   />
 
   <DialogFormEdit
     v-model:modal="modalDialogForm"
-    v-model:profileId="profileId"
+    v-model:profile-id="profileId"
     v-model:amount="amount"
-    :fetchData="props.fetchDataTable"
+    :fetch-data="props.fetchDataTable"
   />
   <DialogMoveGroup
     v-model:modal="modalDialogMoveGroup"
-    v-model:profileId="profileId"
+    v-model:profile-id="profileId"
+    :fetch-data="props.fetchDataTable"
     :group="store.tabGroup === 'group1' ? 'กลุ่ม1' : 'กลุ่ม2'"
-    :fetchData="props.fetchDataTable"
   />
   <DialogMoveLevel
-    :typeLevel="typeLevel"
-    :isReserve="isReserve"
     v-model:modal="modalDialogMoveLeve"
-    v-model:profileId="profileId"
-    :fetchData="props.fetchDataTable"
+    v-model:profile-id="profileId"
+    :type-level="typeLevel"
+    :is-reserve="isReserve"
+    :fetch-data="props.fetchDataTable"
     :remark="''"
   />
   <DialogProperties
     v-model:modal="modalDialogProperties"
     v-model:id="profileId"
+    :fetch-data="props.fetchDataTable"
     :is-punish="isPunish"
     :is-suspension="isSuspension"
     :is-absent="isAbsent"
     :is-leave="isLeave"
-    :fetch-data="props.fetchDataTable"
   />
 
   <DialogInfo
     v-model:modal="modalDialogInfo"
-    v-model:profileId="profileId"
+    v-model:profile-id="profileId"
     :type="infoType"
-    :employeeClass="'-employee'"
+    :employee-class="'-employee'"
   />
 </template>
 
diff --git a/src/modules/13_salary/router.ts b/src/modules/13_salary/router.ts
index ca6af3afb..04283ad12 100644
--- a/src/modules/13_salary/router.ts
+++ b/src/modules/13_salary/router.ts
@@ -1,20 +1,32 @@
-const salaryChart = () => import("@/modules/13_salary/views/salaryChart.vue");
+// รายการผังบัญชีเงินเดือน
+const salaryChart = () => import("@/modules/13_salary/views/01_salaryMain.vue");
+const salaryRate = () =>
+  import("@/modules/13_salary/views/page01_salaryRate.vue");
+
+// ผังบัญชีค่าจ้างลูกจ้างประจำ
 const salaryEmployeeChart = () =>
-  import("@/modules/13_salary/views/salaryEmployeeChart.vue");
+  import("@/modules/13_salary/views/02_salaryEmployeeMain.vue");
 const salaryEmployeeRate = () =>
-  import("@/modules/13_salary/views/salaryEmployeeRate.vue");
-const salaryRate = () => import("@/modules/13_salary/views/salaryRate.vue");
-const salaryRound = () => import("@/modules/13_salary/views/salaryRound.vue");
-const salaryLists = () => import("@/modules/13_salary/views/salaryLists.vue");
+  import("@/modules/13_salary/views/page02_salaryEmployeeRate.vue");
+
+// รอบการขึ้นเงินเดือน
+const salaryRound = () =>
+  import("@/modules/13_salary/views/03_salaryRound.vue");
+
+// รายการเลื่อนเงินเดือนข้าราชการ ฯ
+const salaryLists = () =>
+  import("@/modules/13_salary/views/04_salaryLists.vue");
+
+// รายการเลื่อนค่าจ้างลูกจ้างประจำ
 const salaryEmployeeLists = () =>
-  import("@/modules/13_salary/views/salaryEmployeeLists.vue");
+  import("@/modules/13_salary/views/05_salaryListsEmployee.vue");
+
+//ออกคำสั่ง
 const commandSalary = () =>
   import("@/modules/13_salary/views/commandSalary.vue");
-
 const commandSalaryAdd = () =>
   import("@/modules/13_salary/components/Command/detail.vue");
-// const commandSalary = () => import("@/modules/13_salary/views/commandSalary.vue");
-// const commandSalary = () => import("@/modules/13_salary/views/commandSalary.vue");
+
 export default [
   {
     path: "/salary",
diff --git a/src/modules/13_salary/views/salaryChart.vue b/src/modules/13_salary/views/01_salaryMain.vue
similarity index 90%
rename from src/modules/13_salary/views/salaryChart.vue
rename to src/modules/13_salary/views/01_salaryMain.vue
index 68cbfe455..c9d78c291 100644
--- a/src/modules/13_salary/views/salaryChart.vue
+++ b/src/modules/13_salary/views/01_salaryMain.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { ref, onMounted, reactive, watch } from "vue";
-import { checkPermission } from "@/utils/permissions";
 import { useQuasar } from "quasar";
+
 import { useRouter } from "vue-router";
+import { checkPermission } from "@/utils/permissions";
+import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -17,13 +19,8 @@ import type { FormQuerySalary } from "@/modules/13_salary/interface/request/Main
 /**
  * importComponents
  */
-import DialogFormMain from "@/modules/13_salary/components/SalaryChart/DialogFormMain.vue"; // ผังบัญชีเงินเดือน
-import DialogFormUpload from "@/modules/13_salary/components/SalaryChart/DialogUpload.vue"; // อัปโหลดเอกสารอ้างอิง
-
-/**
- *importStore
- */
-import { useCounterMixin } from "@/stores/mixin";
+import DialogFormMain from "@/modules/13_salary/components/01_Salary/DialogFormMain.vue"; // ผังบัญชีเงินเดือน
+import DialogFormUpload from "@/modules/13_salary/components/01_Salary/DialogUpload.vue"; // อัปโหลดเอกสารอ้างอิง
 
 /** use*/
 const $q = useQuasar();
@@ -38,12 +35,12 @@ const {
 } = useCounterMixin();
 
 /** modalDialog*/
-const modalDialogFormMain = ref<boolean>(false);
-const modalUpload = ref<boolean>(false);
-const rowId = ref<string>("");
+const modalDialogFormMain = ref<boolean>(false); //popup เพิ่ม,แก้ไข ผังบัญชีเงินเดือน
+const modalUpload = ref<boolean>(false); //popup อัปโหลดเอกสารอ้างอิง
+const rowId = ref<string>(""); // id รายการผังบัญชีเงินเดือน
 
 /** Table*/
-const rows = ref<Salary[]>([]);
+const rows = ref<Salary[]>([]); //รายการผังบัญชีเงินเดือน
 const columns = ref<QTableProps["columns"]>([
   {
     name: "name",
@@ -95,30 +92,30 @@ const formQuery = reactive<FormQuerySalary>({
   pageSize: 10, //*จำนวนแถวต่อหน้า
   keyword: "", //keyword ค้นหา
 });
-const maxPage = ref<number>(1);
-const total = ref<number>();
-const isActive = ref<boolean>(false);
-const typeAction = ref<string>("");
-const dataRow = ref<Salary>();
+const maxPage = ref<number>(1); //จำนวนหน้า
+const total = ref<number>(); //จำนวนรายการ
+const isActive = ref<boolean>(false); //สถานะการใช้งาน
+const typeAction = ref<string>(""); //ประเภทการกระทำ
+const dataSalary = ref<Salary>(); //ข้อมูลรายการผังบัญชีเงินเดือนที่ต้องการแก้ไข
 
 /**
  *  fetch ข้อมูลรายการผังบัญชีเงินเดือน
  */
-function fetchListSalaly() {
+async function fetchListSalaly() {
   showLoader();
   const page = formQuery.page.toString();
   const pageSize = formQuery.pageSize.toString();
   const keyword = formQuery.keyword.toString();
-  http
+  await http
     .get(
       config.API.salaryChart +
         `?page=${page}&pageSize=${pageSize}&keyword=${keyword}`
     )
     .then(async (res) => {
-      total.value = res.data.result.total;
-      maxPage.value = Math.ceil(res.data.result.total / formQuery.pageSize);
-      const data = await res.data.result.data;
-      rows.value = await data;
+      const data = await res.data.result;
+      rows.value = data.data;
+      total.value = data.total;
+      maxPage.value = Math.ceil(data.total / formQuery.pageSize);
     })
     .catch((err) => {
       messageError($q, err);
@@ -137,7 +134,7 @@ function onClickSalary(type: string, data: Salary | null) {
   modalDialogFormMain.value = !modalDialogFormMain.value;
   typeAction.value = type;
   if (data) {
-    dataRow.value = data;
+    dataSalary.value = data;
   }
 }
 
@@ -204,13 +201,6 @@ function onClickUpload(type: string, id: string, active: boolean) {
   isActive.value = active;
 }
 
-/**
- * callbackFunction ทำงานเมื่อมีการ เปลี่ยนหน่าหรือ แถว
- */
-watch([() => formQuery.page, () => formQuery.pageSize], () => {
-  fetchListSalaly();
-});
-
 /**
  * function updatePagination
  * @param newPagination ข้อมูล Pagination ใหม่
@@ -227,6 +217,13 @@ function filterFn(page: number) {
   page !== 1 ? (formQuery.page = 1) : fetchListSalaly();
 }
 
+/**
+ * callbackFunction ทำงานเมื่อมีการ เปลี่ยนหน้าหรือ แถว
+ */
+watch([() => formQuery.page, () => formQuery.pageSize], () => {
+  fetchListSalaly();
+});
+
 /** hooklifecycle*/
 onMounted(() => {
   fetchListSalaly();
@@ -497,17 +494,17 @@ onMounted(() => {
   <!-- popup ผังบัญชีเงินเดือน -->
   <DialogFormMain
     v-model:modal="modalDialogFormMain"
-    :typeAction="typeAction"
-    :data="dataRow"
-    :fetchData="fetchListSalaly"
+    :fetch-data="fetchListSalaly"
+    :type-action="typeAction"
+    :data="dataSalary"
   />
 
   <!-- popup อัปโหลดเอกสารอ้างอิง -->
   <DialogFormUpload
     v-model:modal="modalUpload"
-    :typeAction="typeAction"
+    :type-action="typeAction"
+    :fetch-data="fetchListSalaly"
     :id="rowId"
-    :fetchData="fetchListSalaly"
     :isActive="isActive"
   />
 </template>
diff --git a/src/modules/13_salary/views/salaryEmployeeChart.vue b/src/modules/13_salary/views/02_salaryEmployeeMain.vue
similarity index 81%
rename from src/modules/13_salary/views/salaryEmployeeChart.vue
rename to src/modules/13_salary/views/02_salaryEmployeeMain.vue
index 8128edd4f..7053e55ad 100644
--- a/src/modules/13_salary/views/salaryEmployeeChart.vue
+++ b/src/modules/13_salary/views/02_salaryEmployeeMain.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 /** importComponents*/
-import TabStructure from "@/modules/13_salary/components/salaryEmployeeChart/TabStructure.vue";
-import TabCriteris from "@/modules/13_salary/components/salaryEmployeeChart/TabCriteria.vue";
+import TabStructure from "@/modules/13_salary/components/02_salaryEmployee/TabStructure.vue"; //ชื่อผังบัญชีอัตราค่าจ้าง
+import TabCriteris from "@/modules/13_salary/components/02_salaryEmployee/TabCriteria.vue"; //หลักเกณฑ์
 
 /** importStore*/
 import { useSalaryEmployeeChartDataStore } from "@/modules/13_salary/store/SalaryEmployeeChart";
diff --git a/src/modules/13_salary/views/salaryRound.vue b/src/modules/13_salary/views/03_salaryRound.vue
similarity index 88%
rename from src/modules/13_salary/views/salaryRound.vue
rename to src/modules/13_salary/views/03_salaryRound.vue
index 4da92db65..33160491e 100644
--- a/src/modules/13_salary/views/salaryRound.vue
+++ b/src/modules/13_salary/views/03_salaryRound.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { ref, watch, onMounted } from "vue";
-import { useSalaryDataStore } from "@/modules/13_salary/store/SalaryStore";
+import { useQuasar } from "quasar";
+
 import { checkPermission } from "@/utils/permissions";
 import { useCounterMixin } from "@/stores/mixin";
+import { useSalaryDataStore } from "@/modules/13_salary/store/SalaryStore";
 import config from "@/app.config";
 import http from "@/plugins/http";
 
@@ -12,10 +14,7 @@ import type { NewPagination } from "@/modules/13_salary/interface/index/Main";
 import type { RowList } from "@/modules/13_salary/interface/response/Main";
 
 /** importComponents*/
-import Dialog from "@/modules/13_salary/components/SalaryRound/DialogForm.vue";
-
-/** importStore*/
-import { useQuasar } from "quasar";
+import Dialog from "@/modules/13_salary/components/03_salaryRound/DialogForm.vue";
 
 /** use*/
 const $q = useQuasar();
@@ -30,24 +29,24 @@ const {
   success,
 } = useCounterMixin();
 
-const idRound = ref<string>("");
-const year = ref<number>(0);
-const filterKeyword = ref<string>("");
-const editCheck = ref<boolean>(false);
-const dialog = ref<boolean>(false);
-const period = ref<string>("");
-const isActive = ref<boolean>(false);
-const isRead = ref<boolean>(false);
-const effectiveDate = ref<Date | null>(null);
+const idRound = ref<string>(""); //id รอบการขึ้นเงินเดือน
 
-const yearData = ref<number | null>(0);
-const maxPage = ref<number>(1);
-const totalList = ref<number>(0);
-const currentPage = ref<number>(1);
-const page = ref<number>(1);
-const rowsPerPage = ref<number>(10);
+const editCheck = ref<boolean>(false); //สถานะแก้ไข
+const dialog = ref<boolean>(false); //popup ข้อมูลรอบการขึ้นเงินเดือน
+const period = ref<string>("");
+const isActive = ref<boolean>(false); //สถานะการทำงาน
+const isRead = ref<boolean>(false); //อ่านอย่างเดียว
+const effectiveDate = ref<Date | null>(null); //วันบังคับใช้งาน
+const yearData = ref<number | null>(0); //ปีงบประมาณ
 
 /** Table*/
+const year = ref<number>(0); //ปีงบประมาณ
+const filterKeyword = ref<string>(""); //คำค้นหา
+const currentPage = ref<number>(1); //หน้า
+const maxPage = ref<number>(1); //จำนวนหน้า
+const totalList = ref<number>(0); //จำนวนรายการ
+const page = ref<number>(1); //หน้า
+const rowsPerPage = ref<number>(10); //จำนวนรายการต่อหน้า
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -118,7 +117,9 @@ const pagination = ref({
   rowsPerPage: rowsPerPage.value,
 });
 
-/** function เปืด Dialog เพิ่มรอบการขึ้นเงินเดือน */
+/**
+ * function เปืด Dialog เพิ่มรอบการขึ้นเงินเดือน
+ */
 function clickAdd() {
   dialog.value = true;
   editCheck.value = false;
@@ -127,17 +128,18 @@ function clickAdd() {
 /**
  * fetch รายการรอบการขึ้นเงินเดือน
  */
-function getData() {
+async function getData() {
   showLoader();
-  http
+  await http
     .get(
       config.API.salaryPeriod() +
         `?page=${page.value}&pageSise=${rowsPerPage.value}&keyword=${filterKeyword.value}&year=${year.value}`
     )
-    .then((res) => {
-      dataStore.fetchDataMap(res.data.result.data);
-      maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
-      totalList.value = res.data.result.total;
+    .then(async (res) => {
+      const data = await res.data.result;
+      dataStore.fetchDataMap(data.data);
+      maxPage.value = Math.ceil(data.total / rowsPerPage.value);
+      totalList.value = data.total;
     })
     .catch((e) => {
       messageError($q, e);
@@ -147,12 +149,16 @@ function getData() {
     });
 }
 
-/** function เลือกปีงบประมาณ*/
+/**
+ *  function เลือกปีงบประมาณ
+ */
 function updateYear() {
   page.value = 1;
   getData();
 }
-/** set ปี ทั้งหมด */
+/**
+ * set ปี ทั้งหมด
+ */
 function yearAll() {
   year.value = 0;
   getData();
@@ -234,7 +240,9 @@ function updatePageSize(newPagination: NewPagination) {
   rowsPerPage.value = newPagination.rowsPerPage;
 }
 
-/** callbackFunction ทำเมื่อมีการอัปเดท แถวต่อหน้า แล้ว fetch รายการรอบการขึ้นเงินเดือน*/
+/**
+ * callbackFunction ทำเมื่อมีการอัปเดท แถวต่อหน้า แล้ว fetch รายการรอบการขึ้นเงินเดือน
+ */
 watch(
   () => rowsPerPage.value,
   () => {
@@ -246,7 +254,6 @@ watch(
 onMounted(async () => {
   year.value = new Date().getFullYear();
   getData();
-
   dataStore.visibleColumns = visibleColumns.value;
   dataStore.columns = columns.value;
 });
@@ -518,14 +525,14 @@ onMounted(async () => {
 
   <Dialog
     v-model:modal="dialog"
-    :edit="editCheck"
-    :get-data="getData"
-    :idRound="idRound"
-    :period="period"
-    v-model:effective="effectiveDate"
-    :isActive="isActive"
     v-model:is-read="isRead"
     v-model:year="yearData"
+    v-model:effective="effectiveDate"
+    :edit="editCheck"
+    :get-data="getData"
+    :id-round="idRound"
+    :period="period"
+    :is-active="isActive"
   />
 </template>
 
diff --git a/src/modules/13_salary/views/salaryLists.vue b/src/modules/13_salary/views/04_salaryLists.vue
similarity index 85%
rename from src/modules/13_salary/views/salaryLists.vue
rename to src/modules/13_salary/views/04_salaryLists.vue
index 7edafe8ea..2da5289e0 100644
--- a/src/modules/13_salary/views/salaryLists.vue
+++ b/src/modules/13_salary/views/04_salaryLists.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
 import { useQuasar } from "quasar";
+
+import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
+import { useCounterMixin } from "@/stores/mixin";
 import config from "@/app.config";
 import http from "@/plugins/http";
-import ProcessStep from "@/modules/13_salary/components/SalaryLists/ProcessStep.vue";
-import PageDashBoard from "@/modules/13_salary/components/SalaryLists/Dashboard.vue";
 
 /** importType*/
 import type {
@@ -18,11 +19,11 @@ import type {
 } from "@/modules/13_salary/interface/response/SalaryList";
 
 /** importComponents*/
-import TabGroup from "@/modules/13_salary/components/SalaryLists/TabMain.vue";
+import TabGroup from "@/modules/13_salary/components/04_salaryLists/TabMain.vue";
+import ProcessStep from "@/modules/13_salary/components/04_salaryLists/ProcessStep.vue";
+import PageDashBoard from "@/modules/13_salary/components/04_salaryLists/Dashboard.vue";
 
 /** importStore*/
-import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
-import { useCounterMixin } from "@/stores/mixin";
 
 /** use*/
 const store = useSalaryListSDataStore();
@@ -30,16 +31,18 @@ const $q = useQuasar();
 const { messageError, showLoader, hideLoader } = useCounterMixin();
 
 /** ตัวแปร*/
-const year = ref<number>(new Date().getFullYear());
-const roundFilter = ref<any>();
-const roundOptions = ref<DataOptionShort[]>([]);
-const agencyFilter = ref<string>("");
-const agencyOptionsMain = ref<DataOption[]>([]);
-const agencyOptions = ref<DataOption[]>([]);
-const snapFilter = ref<string>("");
-const snapOptions = ref<DataOption[]>([]);
+const year = ref<number>(new Date().getFullYear()); //ปีงบประมาณ
+const roundFilter = ref<any>(); //รอบการขึ้นเงินเดือน
+const agencyFilter = ref<string>(""); //หน่วยงาน
+const snapFilter = ref<string>(""); //รอบ
 const periodLatest = ref<DataPeriodLatest>();
 
+//ตัวเลือก
+const roundOptions = ref<DataOptionShort[]>([]); //ตัวเลือกรอบการขึ้นเงินเดือน
+const snapOptions = ref<DataOption[]>([]); //รอบ
+const agencyOptionsMain = ref<DataOption[]>([]); //ข้อมูลหน่วยงาน
+const agencyOptions = ref<DataOption[]>([]); //หน่วยงาน
+
 const isLoad = ref<boolean>(false);
 const isDisable = ref<boolean>(false);
 
@@ -48,11 +51,13 @@ const page = ref<number>(1);
 const pageSize = ref<number>(50);
 const lastPage = ref<number>(0);
 
-/**function เรียกข้อมูลรอบการขึ้นเงินเดือน*/
-function getRound() {
+/**
+ * function เรียกข้อมูลรอบการขึ้นเงินเดือน
+ */
+async function getRound() {
   showLoader();
   isDisable.value = false;
-  http
+  await http
     .get(
       config.API.salaryPeriodActive(year.value.toString()) +
         `?page=${page.value}&pageSize=${pageSize.value}&keyword=&year=0`
@@ -105,7 +110,9 @@ function getRound() {
     });
 }
 
-/** function เรียกรอบ*/
+/**
+ * function เรียกรอบ
+ */
 function getSnap(code: string) {
   snapOptions.value =
     code == "OCT"
@@ -147,9 +154,9 @@ function getSnap(code: string) {
  * function เรียกข้อมูลหน่ยวงาน
  * @param id  revisionId
  */
-function getAgency(id: string) {
+async function getAgency(id: string) {
   if (id) {
-    http
+    await http
       .get(config.API.activeOrganizationRootById(id))
       .then(async (res) => {
         const data = res.data.result;
@@ -181,9 +188,9 @@ function getAgency(id: string) {
  * function เรียกข้อมูลหน่ยวงานปจุบัน
  * @param id  revisionId
  */
-function getAgencyPosition(id: string) {
+async function getAgencyPosition(id: string) {
   if (id) {
-    http
+    await http
       .get(config.API.keycloakPositionByid(id))
       .then(async (res) => {
         const data = await res.data.result;
@@ -213,7 +220,11 @@ function getAgencyPosition(id: string) {
  * @param periodId id รอบการขึ้นเงินเดือน
  * @param snap id รอบ
  */
-function fetchSalalyPeriod(rootId: string, periodId: string, snap: string) {
+async function fetchSalalyPeriod(
+  rootId: string,
+  periodId: string,
+  snap: string
+) {
   if (rootId) {
     showLoader();
     isLoad.value = false;
@@ -223,10 +234,10 @@ function fetchSalalyPeriod(rootId: string, periodId: string, snap: string) {
       snapshot: snap,
     };
 
-    http
+    await http
       .post(config.API.salaryListPeriodLatest, body)
       .then(async (res) => {
-        const data = res.data.result;
+        const data = await res.data.result;
 
         if (roundFilter.value.shortCode !== "SPECIAL") {
           if (Object.values(data).includes(null)) {
@@ -253,7 +264,9 @@ function fetchSalalyPeriod(rootId: string, periodId: string, snap: string) {
   }
 }
 
-/** function เปลี่ยนรอบการขั้นเงินเดือน*/
+/**
+ * function เปลี่ยนรอบการขั้นเงินเดือน
+ */
 async function onChangeRound() {
   // เก็บสถานะการปิดรอบในตัวแปร isClosedRound เพื่อใช้ในการเช็ค
   store.isClosedRound = roundFilter.value.isClose;
@@ -272,7 +285,9 @@ async function onChangeRound() {
   }
 }
 
-/** function เปลี่ยนรอบ*/
+/**
+ * function เปลี่ยนรอบ
+ */
 async function onChangeSnap() {
   // agencyFilter.value = "";
   if (agencyFilter.value && roundFilter.value.id && snapFilter.value) {
@@ -284,7 +299,9 @@ async function onChangeSnap() {
   }
 }
 
-/** function เปลี่ยนหน่วยงาน*/
+/**
+ * function เปลี่ยนหน่วยงาน
+ */
 async function onChangeAgency() {
   store.rootId = agencyFilter.value;
   if (
@@ -300,7 +317,9 @@ async function onChangeAgency() {
   }
 }
 
-/** function fetch PeriodQuota*/
+/**
+ *  function fetch PeriodQuota
+ */
 function getQuota() {
   http
     .get(config.API.salaryListPeriodQuota(store.groupId))
@@ -323,7 +342,7 @@ function filterSelector(val: string, update: Function, refData: string) {
   switch (refData) {
     case "agencyFilter":
       update(() => {
-        agencyFilter.value = "";
+        agencyFilter.value = val === "" ? agencyFilter.value : "";
         agencyOptions.value = agencyOptionsMain.value.filter(
           (v: DataOption) => v.name.indexOf(val) > -1
         );
@@ -462,10 +481,10 @@ onMounted(() => {
     <div v-if="agencyFilter !== 'ALL'">
       <TabGroup
         v-if="isLoad"
-        :periodLatest="periodLatest"
-        :periodId="roundFilter.id"
-        :rootId="agencyFilter"
-        :roundFilter="roundFilter"
+        :period-latest="periodLatest"
+        :period-id="roundFilter.id"
+        :root-id="agencyFilter"
+        :round-filter="roundFilter"
       />
       <q-card v-else class="q-pa-sm">
         <div class="q-pa-sm">
@@ -478,8 +497,8 @@ onMounted(() => {
     <div v-else>
       <PageDashBoard
         :year="year"
-        :snapShot="snapFilter"
-        :roundFilter="roundFilter"
+        :snap-shot="snapFilter"
+        :round-filter="roundFilter"
       />
     </div>
   </q-card>
@@ -492,8 +511,8 @@ onMounted(() => {
   >
     <ProcessStep
       v-if="agencyFilter !== 'ALL'"
-      :periodId="roundFilter.id"
-      :rootId="agencyFilter"
+      :period-id="roundFilter.id"
+      :root-id="agencyFilter"
       :get-data="getQuota"
     />
   </q-card>
diff --git a/src/modules/13_salary/views/salaryEmployeeLists.vue b/src/modules/13_salary/views/05_salaryListsEmployee.vue
similarity index 83%
rename from src/modules/13_salary/views/salaryEmployeeLists.vue
rename to src/modules/13_salary/views/05_salaryListsEmployee.vue
index f66a10de0..dbc02c89a 100644
--- a/src/modules/13_salary/views/salaryEmployeeLists.vue
+++ b/src/modules/13_salary/views/05_salaryListsEmployee.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { onMounted, ref, nextTick } from "vue";
 import { useQuasar } from "quasar";
+
+import { useSalaryEmployeeListSDataStore } from "@/modules/13_salary/store/SalaryEmployeeListsStore";
+import { useCounterMixin } from "@/stores/mixin";
 import config from "@/app.config";
 import http from "@/plugins/http";
 
@@ -16,13 +19,9 @@ import type {
 } from "@/modules/13_salary/interface/response/SalaryList";
 
 /** importComponents*/
-import TabGroup from "@/modules/13_salary/components/SalaryEmployeeLists/TabMain.vue";
-import ProcessStep from "@/modules/13_salary/components/SalaryEmployeeLists/ProcessStep.vue";
-import PageDashBoard from "@/modules/13_salary/components/SalaryEmployeeLists/Dashboard.vue";
-
-/** importStore*/
-import { useSalaryEmployeeListSDataStore } from "@/modules/13_salary/store/SalaryEmployeeListsStore";
-import { useCounterMixin } from "@/stores/mixin";
+import TabGroup from "@/modules/13_salary/components/05_salaryListsEmployee/TabMain.vue";
+import ProcessStep from "@/modules/13_salary/components/05_salaryListsEmployee/ProcessStep.vue";
+import PageDashBoard from "@/modules/13_salary/components/05_salaryListsEmployee/Dashboard.vue";
 
 /** use*/
 const store = useSalaryEmployeeListSDataStore();
@@ -30,17 +29,18 @@ const $q = useQuasar();
 const { messageError, showLoader, hideLoader } = useCounterMixin();
 
 /** ตัวแปร*/
-const year = ref<number>(new Date().getFullYear());
-const roundFilter = ref<any>();
-const roundOptions = ref<DataOptionShort[]>([]);
-const agencyFilter = ref<string>("");
-const agencyOptions = ref<DataOption[]>([]);
-const agencyOptionsMain = ref<DataOption[]>([]);
-
-const snapFilter = ref<string>("");
-const snapOptions = ref<DataOption[]>([]);
+const year = ref<number>(new Date().getFullYear()); //ปีงบประมาณ
+const roundFilter = ref<any>(); //รอบการขึ้นเงินเดือน
+const agencyFilter = ref<string>(""); //หน่วยงาน
+const snapFilter = ref<string>(""); //รอบ
 const periodLatest = ref<DataPeriodLatest>();
 
+//ตัวเลือก
+const roundOptions = ref<DataOptionShort[]>([]); //ตัวเลือกรอบการขึ้นเงินเดือน
+const snapOptions = ref<DataOption[]>([]); //รอบ
+const agencyOptionsMain = ref<DataOption[]>([]); //ข้อมูลหน่วยงาน
+const agencyOptions = ref<DataOption[]>([]); //หน่วยงาน
+
 const isLoad = ref<boolean>(false);
 const isDisable = ref<boolean>(false);
 
@@ -51,11 +51,13 @@ const lastPage = ref<number>(0);
 const loading = ref(false);
 const nextPage = ref<number>(1);
 
-/**function เรียกข้อมูลรอบการขึ้นค่าจ้าง*/
-function getRound() {
+/**
+ * function เรียกข้อมูลรอบการขึ้นค่าจ้าง
+ */
+async function getRound() {
   showLoader();
   isDisable.value = false;
-  http
+  await http
     .get(
       config.API.salaryPeriodActive(year.value.toString()) +
         `?page=${page.value}&pageSize=${pageSize.value}&keyword=&year=0`
@@ -107,8 +109,10 @@ function getRound() {
     });
 }
 
-/** function เรียกรอบ*/
-function getSnap(code: string) {
+/**
+ * function เรียกรอบ
+ */
+async function getSnap(code: string) {
   snapOptions.value =
     code == "OCT"
       ? [
@@ -213,7 +217,11 @@ async function getAgencyPosition(id: string) {
  * @param periodId id รอบการขึ้นค่าจ้าง
  * @param snap id รอบ
  */
-function fetchSalalyPeriod(rootId: string, periodId: string, snap: string) {
+async function fetchSalalyPeriod(
+  rootId: string,
+  periodId: string,
+  snap: string
+) {
   if (rootId) {
     showLoader();
     isLoad.value = false;
@@ -223,14 +231,12 @@ function fetchSalalyPeriod(rootId: string, periodId: string, snap: string) {
       snapshot: snap,
     };
 
-    http
+    await http
       .post(config.API.salaryListPeriodLatestEmp, body)
       .then(async (res) => {
         const data = res.data.result;
-
         data && store.fetchPeriodLatest(data, store.tabGroup);
         periodLatest.value = data;
-
         isLoad.value = data.group1id ? true : false;
       })
       .catch((err) => {
@@ -244,7 +250,9 @@ function fetchSalalyPeriod(rootId: string, periodId: string, snap: string) {
   }
 }
 
-/** function เปลี่ยนรอบการขั้นค่าจ้าง*/
+/**
+ * function เปลี่ยนรอบการขั้นค่าจ้าง
+ */
 async function onChangeRound() {
   // เก็บสถานะการปิดรอบในตัวแปร isClosedRound เพื่อใช้ในการเช็ค
   store.isClosedRound = roundFilter.value.isClose;
@@ -260,7 +268,9 @@ async function onChangeRound() {
   }
 }
 
-/** function เปลี่ยนรอบ*/
+/**
+ * function เปลี่ยนรอบ
+ */
 async function onChangeSnap() {
   if (agencyFilter.value && roundFilter.value.id && snapFilter.value) {
     await fetchSalalyPeriod(
@@ -271,7 +281,9 @@ async function onChangeSnap() {
   }
 }
 
-/** function เปลี่ยนหน่วยงาน*/
+/**
+ * function เปลี่ยนหน่วยงาน
+ */
 async function onChangeAgency() {
   store.rootId = agencyFilter.value;
 
@@ -288,7 +300,9 @@ async function onChangeAgency() {
   }
 }
 
-/** function onScrollSelect รอบการขึ้นค่าจ้าง*/
+/**
+ * function onScrollSelect รอบการขึ้นค่าจ้าง
+ */
 function onScroll({ to, ref }: { to: number; ref: any }) {
   const lastIndex = roundOptions.value.length - 1;
 
@@ -311,15 +325,24 @@ function onScroll({ to, ref }: { to: number; ref: any }) {
   }
 }
 
+/**
+ *  function fetch PeriodQuota
+ */
 function getQuota() {
   fetchSalalyPeriod(agencyFilter.value, roundFilter.value.id, snapFilter.value);
 }
 
-function filterSelector(val: any, update: Function, refData: string) {
+/**
+ * functioon ค้นหาข้อมูลรายการหน่วยงาน
+ * @param val คำค้นหา
+ * @param update function
+ * @param refData typeSelector
+ */
+function filterSelector(val: string, update: Function, refData: string) {
   switch (refData) {
     case "agencyFilter":
       update(() => {
-        agencyFilter.value = "";
+        agencyFilter.value = val === "" ? agencyFilter.value : "";
         agencyOptions.value = agencyOptionsMain.value.filter(
           (v: DataOption) => v.name.indexOf(val) > -1
         );
@@ -455,10 +478,10 @@ onMounted(() => {
     <div v-if="agencyFilter !== 'ALL'">
       <TabGroup
         v-if="isLoad"
-        :periodLatest="periodLatest"
-        :periodId="roundFilter.id"
-        :rootId="agencyFilter"
-        :roundFilter="roundFilter"
+        :period-latest="periodLatest"
+        :period-id="roundFilter.id"
+        :root-id="agencyFilter"
+        :round-filter="roundFilter"
       />
       <q-card v-else class="q-pa-sm">
         <div class="q-pa-sm">
@@ -471,8 +494,8 @@ onMounted(() => {
     <div v-else>
       <PageDashBoard
         :year="year"
-        :snapShot="snapFilter"
-        :roundFilter="roundFilter"
+        :snap-shot="snapFilter"
+        :round-filter="roundFilter"
       />
     </div>
   </q-card>
@@ -485,8 +508,8 @@ onMounted(() => {
   >
     <ProcessStep
       v-if="agencyFilter !== 'ALL'"
-      :periodId="roundFilter.id"
-      :rootId="agencyFilter"
+      :period-id="roundFilter.id"
+      :root-id="agencyFilter"
       :get-data="getQuota"
     />
   </q-card>
diff --git a/src/modules/13_salary/views/salaryRate.vue b/src/modules/13_salary/views/page01_salaryRate.vue
similarity index 87%
rename from src/modules/13_salary/views/salaryRate.vue
rename to src/modules/13_salary/views/page01_salaryRate.vue
index e8d06b89d..29cf649df 100644
--- a/src/modules/13_salary/views/salaryRate.vue
+++ b/src/modules/13_salary/views/page01_salaryRate.vue
@@ -21,7 +21,7 @@ import type { FormQuerySalary } from "@/modules/13_salary/interface/request/Main
 /**
  * importComponents
  */
-import DialogFormRate from "@/modules/13_salary/components/SalaryChart/DialogFormRate.vue";
+import DialogFormRate from "@/modules/13_salary/components/01_Salary/DialogFormRate.vue";
 
 /**
  * importStore
@@ -125,30 +125,34 @@ const formQuery = reactive<FormQuerySalary>({
   pageSize: 100, //*จำนวนแถวต่อหน้า
   keyword: "", //keyword ค้นหา
 });
-const maxPage = ref<number>(1);
-const totalRow = ref<number>(0);
+const maxPage = ref<number>(1); //จำนวนหน้า
+const totalRow = ref<number>(0); //จำนวนรายการ
 const pagination = ref({
   page: 1,
   rowsPerPage: 100,
 });
 
+const typeAction = ref<string>(""); //ประเภทการกระทำ
+const dataSalaryRate = ref<SalaryRate>(); //ข้อมูลรายการ
+
 /**
  * fetch รายการอัตราเงินเดือน
  */
 async function fetchListSalalyRate() {
   showLoader();
-  const page = await formQuery.page.toString();
-  const pageSize = await formQuery.pageSize.toString();
-  const keyword = await formQuery.keyword.toString();
+  const page = formQuery.page.toString();
+  const pageSize = formQuery.pageSize.toString();
+  const keyword = formQuery.keyword.toString();
   await http
     .get(
       config.API.salaryRateListByid(salaryId.value) +
         `?page=${page}&pageSize=${pageSize}&keyword=${keyword}`
     )
-    .then((res) => {
-      maxPage.value = Math.ceil(res.data.result.total / formQuery.pageSize);
-      totalRow.value = res.data.result.total;
-      rows.value = res.data.result.data;
+    .then(async (res) => {
+      const data = await res.data.result;
+      rows.value = data.data;
+      totalRow.value = data.total;
+      maxPage.value = Math.ceil(data.total / formQuery.pageSize);
     })
     .catch((err) => {
       messageError($q, err);
@@ -158,13 +162,16 @@ async function fetchListSalalyRate() {
     });
 }
 
-const typeAction = ref<string>("");
-const dataRow = ref<SalaryRate>();
+/**
+ *  function openDialog เพิ่ม,แก้ไข อัตราเงินเดือน
+ * @param type ประเภท แก่ไข,เพิ่ม
+ * @param data ข้อมูลอัตราเงินเดือน
+ */
 function onClickSalaryRate(type: string, data: SalaryRate | null) {
   modalDialogFormRate.value = !modalDialogFormRate.value;
   typeAction.value = type;
   if (data) {
-    dataRow.value = data;
+    dataSalaryRate.value = data;
   }
 }
 
@@ -215,9 +222,10 @@ function clickDownload() {
 function fetchDataSalary() {
   http
     .get(config.API.salaryChartByid(salaryId.value))
-    .then((res) => {
-      isActive.value = res.data.result.isActive;
-      posType.value = `${res.data.result.posTypeName}(${res.data.result.posLevelName})`;
+    .then(async (res) => {
+      const data = await res.data.result;
+      isActive.value = data.isActive;
+      posType.value = `${data.posTypeName}(${data.posLevelName})`;
     })
     .catch((e) => {
       messageError($q, e);
@@ -233,13 +241,15 @@ function updatePagination(newPagination: NewPagination) {
   formQuery.pageSize = newPagination.rowsPerPage;
 }
 
-onMounted(async () => {
-  fetchDataSalary();
+/**
+ *  ทำงานเมื่อมีการ เปลี่ยนหน้าหรือ แถว
+ */
+watch([() => formQuery.page, () => formQuery.pageSize], async () => {
   await fetchListSalalyRate();
 });
 
-watch([() => formQuery.page, () => formQuery.pageSize], async () => {
-  await fetchListSalalyRate();
+onMounted(async () => {
+  await Promise.all([fetchDataSalary(), fetchListSalalyRate()]);
 });
 </script>
 
@@ -259,6 +269,7 @@ watch([() => formQuery.page, () => formQuery.pageSize], async () => {
       อัตราเงินเดือนของ{{ posType }}
     </div>
   </div>
+
   <q-card flat bordered class="q-pa-md">
     <div class="col-12 row">
       <q-btn
@@ -402,9 +413,9 @@ watch([() => formQuery.page, () => formQuery.pageSize], async () => {
 
   <DialogFormRate
     v-model:modal="modalDialogFormRate"
-    :typeAction="typeAction"
-    :data="dataRow"
-    :fetchData="fetchListSalalyRate"
+    :type-action="typeAction"
+    :fetch-data="fetchListSalalyRate"
+    :data="dataSalaryRate"
   />
 </template>
 
diff --git a/src/modules/13_salary/views/salaryEmployeeRate.vue b/src/modules/13_salary/views/page02_salaryEmployeeRate.vue
similarity index 84%
rename from src/modules/13_salary/views/salaryEmployeeRate.vue
rename to src/modules/13_salary/views/page02_salaryEmployeeRate.vue
index 275e19fbb..43bf30ea1 100644
--- a/src/modules/13_salary/views/salaryEmployeeRate.vue
+++ b/src/modules/13_salary/views/page02_salaryEmployeeRate.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted, watch } from "vue";
-import { checkPermission } from "@/utils/permissions";
 import { useQuasar } from "quasar";
+
 import { useRouter, useRoute } from "vue-router";
+import { checkPermission } from "@/utils/permissions";
+import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import genReportXLSX from "@/plugins/genreportxlsx";
@@ -17,10 +19,7 @@ import type { FormFilter } from "@/modules/13_salary/interface/request/EmployeeC
 import type { EmployeeRateSalary } from "@/modules/13_salary/interface/response/salaryEmployeeChart";
 
 /** importComponts*/
-import DialogEmployeeRate from "@/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeRate.vue";
-
-/** importStore*/
-import { useCounterMixin } from "@/stores/mixin";
+import DialogEmployeeRate from "@/modules/13_salary/components/02_salaryEmployee/DialogEmployeeRate.vue";
 
 /** use*/
 const route = useRoute();
@@ -29,9 +28,21 @@ const $q = useQuasar();
 const { dialogRemove, messageError, showLoader, hideLoader, success } =
   useCounterMixin();
 
-const salaryEmployeeId = ref<string>(route.params.id.toString());
+const salaryEmployeeId = ref<string>(route.params.id.toString()); //id อัตราค่าจ้าง
+const modalDialogEmployeeRate = ref<boolean>(false); //เพิ่มอัตราค่าจ้าง;
+const isStatusEdit = ref<boolean>(false); //สถานะการแก้ไขข้อมูล
+const dataRow = ref<EmployeeRateSalary>(); //ข้อมูลที่จะแก้ไข
 
 /** ข้อมูล Table*/
+const formFilter = reactive<FormFilter>({
+  page: 1,
+  pageSize: 100,
+  keyword: "",
+});
+const rows = ref<EmployeeRateSalary[]>([]); //รายการอัตราค่าจ้าง
+const maxPage = ref<number>(1); //จำนวนหน้า
+const totalList = ref<number>(0); //จำนวนรายการ
+
 const columns = ref<QTableProps["columns"]>([
   {
     name: "step",
@@ -75,9 +86,11 @@ const columns = ref<QTableProps["columns"]>([
       }),
   },
 ]);
-const rows = ref<EmployeeRateSalary[]>([]);
 const visibleColumns = ref<string[]>(["step", "salaryMonth", "salaryDay"]);
-
+const pagination = ref({
+  page: formFilter.page,
+  rowsPerPage: formFilter.pageSize,
+});
 /** List Mune*/
 const itemMenu = ref<ItemsMenu[]>([
   {
@@ -94,27 +107,14 @@ const itemMenu = ref<ItemsMenu[]>([
     type: "delete",
   },
 ]);
-
-const formFilter = reactive<FormFilter>({
-  page: 1,
-  pageSize: 100,
-  keyword: "",
-});
-const maxPage = ref<number>(1);
-const totalList = ref<number>(0);
-
-const pagination = ref({
-  page: formFilter.page,
-  rowsPerPage: formFilter.pageSize,
-});
-const isActive = ref<boolean>(false);
-const groupSalary = ref<string>("");
+const isActive = ref<boolean>(false); //สถานะการใช้งาน
+const groupSalary = ref<string>(""); //ชื่ออัตราค่าจ้าง
 
 /**
  * fetch ข้อมูลอัตราค่าจ้าง
  */
-function fetchDataDetail() {
-  http
+async function fetchDataDetail() {
+  await http
     .get(config.API.salaryEmployeeChartByid(salaryEmployeeId.value))
     .then((res) => {
       isActive.value = res.data.result.isActive;
@@ -128,17 +128,18 @@ function fetchDataDetail() {
 /**
  * fetch อัตราค่าจ้าง
  */
-function fetchSalalyEmployeeRate() {
+async function fetchSalalyEmployeeRate() {
   showLoader();
-  http
+  await http
     .get(
       config.API.salaryEmployeeRateListByid(salaryEmployeeId.value) +
         `?page=${formFilter.page}&pageSize=${formFilter.pageSize}&keyword=${formFilter.keyword}`
     )
-    .then((res) => {
-      rows.value = res.data.result.data;
-      maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
-      totalList.value = res.data.result.total;
+    .then(async (res) => {
+      const data = res.data.result;
+      rows.value = data.data;
+      maxPage.value = Math.ceil(data.total / formFilter.pageSize);
+      totalList.value = data.total;
     })
     .catch((err) => {
       messageError($q, err);
@@ -148,10 +149,6 @@ function fetchSalalyEmployeeRate() {
     });
 }
 
-const modalDialogEmployeeRate = ref<boolean>(false);
-const isStatusEdit = ref<boolean>(false);
-const dataRow = ref<EmployeeRateSalary>();
-
 /**
  * แก่ไขข้อมูลรายการอัตราค่าจ้าง
  * @param data  ข้อมูลรายการอัตราค่าจ้าง
@@ -192,17 +189,27 @@ function onClickAdd() {
   isStatusEdit.value = false;
 }
 
+/**
+ * ฟังก์ชันเปลี่ยนหน้าข้อมูล
+ * @param val หน้าที่จ้องการไป
+ */
 function updatePage(val: number) {
   formFilter.page = val;
   fetchSalalyEmployeeRate();
 }
 
+/**
+ * ฟังก์ชันเปลี่ยนแถวต่อหน้า
+ * @param newPagination จำนวนแถว
+ */
 function updatePageSize(newPagination: NewPagination) {
   formFilter.page = 1;
   formFilter.pageSize = newPagination.rowsPerPage;
 }
 
-/** click download */
+/**
+ * click download
+ */
 function clickDownload() {
   showLoader();
   http
@@ -337,8 +344,8 @@ onMounted(async () => {
 
   <DialogEmployeeRate
     v-model:modal="modalDialogEmployeeRate"
-    :isStatusEdit="isStatusEdit"
-    :fetchData="fetchSalalyEmployeeRate"
+    :is-status-edit="isStatusEdit"
+    :fetch-data="fetchSalalyEmployeeRate"
     :data="dataRow as EmployeeRateSalary"
   />
 </template>
diff --git a/src/modules/18_command/components/Step/3_ReceivedCopy.vue b/src/modules/18_command/components/Step/3_ReceivedCopy.vue
index b6efa67ce..5825b94ed 100644
--- a/src/modules/18_command/components/Step/3_ReceivedCopy.vue
+++ b/src/modules/18_command/components/Step/3_ReceivedCopy.vue
@@ -350,3 +350,5 @@ defineExpose({
     :saveData="onSubmitPerson"
   />
 </template>
+
+<style scoped></style>