diff --git a/src/modules/13_salary/components/SalaryLists/DialogAddPerson.vue b/src/modules/13_salary/components/SalaryLists/DialogAddPerson.vue
index ce110f65f..7ce6a408b 100644
--- a/src/modules/13_salary/components/SalaryLists/DialogAddPerson.vue
+++ b/src/modules/13_salary/components/SalaryLists/DialogAddPerson.vue
@@ -292,7 +292,7 @@ watch(
       </q-card-section>
       <q-separator />
 
-      <q-card-actions align="right" class="bg-white text-teal">
+      <!-- <q-card-actions align="right" class="bg-white text-teal">
         <q-btn
           type="submit"
           unelevated
@@ -301,7 +301,7 @@ watch(
           color="light-blue-10"
           label="บันทึก"
         />
-      </q-card-actions>
+      </q-card-actions> -->
     </q-card>
   </q-dialog>
 </template>
diff --git a/src/modules/13_salary/components/SalaryLists/DialogFormEdit.vue b/src/modules/13_salary/components/SalaryLists/DialogFormEdit.vue
index 342b1f64d..832096723 100644
--- a/src/modules/13_salary/components/SalaryLists/DialogFormEdit.vue
+++ b/src/modules/13_salary/components/SalaryLists/DialogFormEdit.vue
@@ -1,37 +1,46 @@
 <script setup lang="ts">
-import { ref, defineModel } from "vue";
-import Header from "@/components/DialogHeader.vue";
-import { useCounterMixin } from "@/stores/mixin";
-
+import { ref } from "vue";
 import { useQuasar } from "quasar";
 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();
+const { dialogConfirm, success, messageError } = mixin;
+
+/** props*/
 const modal = defineModel<boolean>("modal", { required: true });
 const amount = defineModel<number | null>("amount", { required: true });
 const profileId = defineModel<string>("profileId", { required: true });
-
 const props = defineProps({
   fetchData: {
     type: Function,
   },
 });
 
-const mixin = useCounterMixin();
-const { dialogConfirm, success, messageError } = mixin;
+const amountRef = ref<any>();
 
-/*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
+/** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
 function validateForm() {
-  onSubmit();
+  if (amountRef.value.validate()) {
+    onSubmit();
+  }
 }
 
+/** function ปืด Popup */
 function close() {
   modal.value = false;
   amount.value = null;
 }
 
+/** function ยืนยันการบันทึกข้อมูล*/
 function onSubmit() {
   dialogConfirm($q, () => {
     if (amount.value !== null) {
@@ -69,6 +78,7 @@ function onSubmit() {
       <q-card-section class="scroll" style="max-height: 70vh">
         <div class="q-gutter-y-sm">
           <q-input
+            ref="amountRef"
             dense
             outlined
             v-model="amount"
diff --git a/src/modules/13_salary/components/SalaryLists/DialogMoveGroup.vue b/src/modules/13_salary/components/SalaryLists/DialogMoveGroup.vue
index 0e88a09eb..f9cba5cab 100644
--- a/src/modules/13_salary/components/SalaryLists/DialogMoveGroup.vue
+++ b/src/modules/13_salary/components/SalaryLists/DialogMoveGroup.vue
@@ -1,17 +1,23 @@
 <script setup lang="ts">
-import { ref, defineModel } from "vue";
-import Header from "@/components/DialogHeader.vue";
-import { useCounterMixin } from "@/stores/mixin";
-import type { DataOption } from "@/modules/13_salary/interface/response/Main";
+import { ref, defineModel, watch } from "vue";
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
-
-import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
-
 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 } =
+  useCounterMixin();
+
+/** props*/
 const modal = defineModel<boolean>("modal", { required: true });
 const profileId = defineModel<string>("profileId", { required: true });
 const props = defineProps({
@@ -21,25 +27,25 @@ const props = defineProps({
   },
 });
 
+/** ตัวแปร*/
 const group = ref<string>("");
 const groupRef = ref<any>(null);
 const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
-const mixin = useCounterMixin();
-const { dialogConfirm, success, messageError, showLoader, hideLoader } = mixin;
 
 /*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
 function validateForm() {
-  groupRef.value.validate();
   if (groupRef.value.validate()) {
     onSubmit();
   }
 }
 
+/** function ปืด Popup */
 function close() {
   modal.value = false;
   group.value = "";
 }
 
+/** function ยืนยันการบันทึกข้อมูล*/
 function onSubmit() {
   dialogConfirm($q, () => {
     showLoader();
@@ -63,6 +69,16 @@ function onSubmit() {
   });
 }
 
+watch(
+  () => modal.value,
+  () => {
+    if (modal.value) {
+      group.value =
+        props.group === "กลุ่ม1" ? store.groupOp[1].id : store.groupOp[0].id;
+    }
+  }
+);
+
 function inputEdit(val: boolean) {
   return {
     "full-width cursor-pointer inputgreen ": val,
diff --git a/src/modules/13_salary/components/SalaryLists/DialogMoveLevel.vue b/src/modules/13_salary/components/SalaryLists/DialogMoveLevel.vue
index c057d35e9..927edf3d1 100644
--- a/src/modules/13_salary/components/SalaryLists/DialogMoveLevel.vue
+++ b/src/modules/13_salary/components/SalaryLists/DialogMoveLevel.vue
@@ -1,43 +1,64 @@
 <script setup lang="ts">
-import { ref, defineModel, computed } from "vue";
-import Header from "@/components/DialogHeader.vue";
-import { useCounterMixin } from "@/stores/mixin";
-import type { DataOption } from "@/modules/13_salary/interface/response/Main";
+import { ref, computed } from "vue";
 import { useQuasar } from "quasar";
 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 } =
+  useCounterMixin();
+
+/**porps*/
 const modal = defineModel<boolean>("modal", { required: true });
 const profileId = defineModel<string>("profileId", { required: true });
-const type = ref<string>("");
-const typeRef = ref<any>(null);
-const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
-const mixin = useCounterMixin();
-const { dialogConfirm, success, messageError, showLoader, hideLoader } = mixin;
-
 const props = defineProps({
   fetchData: {
     type: Function,
   },
 });
 
+const type = ref<string>("");
+const typeRef = ref<any>(null);
+const isReadonly = 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() {
-  typeRef.value.validate();
   if (typeRef.value.validate()) {
     onSubmit();
   }
 }
 
+/** function ปืด Popup */
 function close() {
   modal.value = false;
   type.value = "";
 }
 
+/** function ยืนยันการบันทึกข้อมูล*/
 function onSubmit() {
   dialogConfirm($q, () => {
     showLoader();
@@ -61,21 +82,6 @@ function onSubmit() {
   });
 }
 
-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 ขั้น" },
-      ];
-});
-
 function inputEdit(val: boolean) {
   return {
     "full-width cursor-pointer inputgreen ": val,
diff --git a/src/modules/13_salary/components/SalaryLists/TabMain.vue b/src/modules/13_salary/components/SalaryLists/TabMain.vue
index 2676384bf..2c3ecafd1 100644
--- a/src/modules/13_salary/components/SalaryLists/TabMain.vue
+++ b/src/modules/13_salary/components/SalaryLists/TabMain.vue
@@ -1,13 +1,17 @@
 <script setup lang="ts">
 import { ref, onMounted, reactive, computed } from "vue";
 import { useQuasar } from "quasar";
-import { useRouter } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+/** importType*/
 import type { DataFilter } from "@/modules/13_salary/interface/index/SalaryList";
-import type { DataPeriodLatest } from "@/modules/13_salary/interface/response/SalaryList";
+import type {
+  DataPeriodLatest,
+  DataPeriod,
+} 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";
 
@@ -16,23 +20,19 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
 
 /** use*/
-const router = useRouter();
 const $q = useQuasar();
 const store = useSalaryListSDataStore();
-const {
-  date2Thai,
-  dialogRemove,
-  messageError,
-  showLoader,
-  hideLoader,
-  success,
-} = useCounterMixin();
+const { messageError, showLoader, hideLoader } = useCounterMixin();
 
+/** props*/
 const props = defineProps({
   periodLatest: { type: Object as () => DataPeriodLatest, require: true },
 });
 
 const splitterModel = ref<number>(13);
+const rows = ref<DataPeriod[]>([]);
+
+/** itemsTab กลุ่ม*/
 const itemsTabGroup = ref([
   {
     lable: "กลุ่ม 1",
@@ -44,6 +44,7 @@ const itemsTabGroup = ref([
   },
 ]);
 
+/** itemsTab ขั้น*/
 const itemsTabType = computed(() => {
   return store.roundMainCode === "OCT"
     ? [
@@ -102,6 +103,7 @@ const itemsTabType = computed(() => {
       ];
 });
 
+/** itemsCard*/
 const itemsCard = ref([
   {
     lable: "จำนวนคนทั้งหมด",
@@ -110,7 +112,7 @@ const itemsCard = ref([
     total: 0,
   },
   {
-    lable: "ของจำนวนคน",
+    lable: "15% ของจำนวนคน",
     name: "group2",
     color: "light-blue-4",
     total: 0,
@@ -166,6 +168,19 @@ const itemsCard = ref([
   },
 ]);
 
+/** ข้อมูลค้นหารายชื่อคยขึ้นเงินเดือน*/
+const formFilter = reactive<DataFilter>({
+  page: 1,
+  pageSize: 10,
+  keyword: "",
+  type: store.tabType,
+});
+const maxPage = ref<number>(1);
+
+/**
+ * function เรียกข้อมูลจำนวนโควต้า
+ * @param id กลุ่ม
+ */
 async function fetchDataQuota(id: string) {
   showLoader();
   await http
@@ -192,22 +207,18 @@ async function fetchDataQuota(id: string) {
     });
 }
 
-const formFilter = reactive<DataFilter>({
-  page: 1,
-  pageSize: 10,
-  keyword: "",
-  type: store.tabType,
-});
-const maxPage = ref<number>(1);
-
-const rows = ref<any>();
+/**
+ * function เรียกข้อมูลรายชื่อ
+ * @param id กลุ่ม
+ */
 async function fetchDataPeriod(id: string) {
   rows.value = [];
   const formData = {
     page: formFilter.page.toString(),
     pageSize: formFilter.pageSize.toString(),
     keyword: formFilter.keyword,
-    type: store.tabType,
+    type: store.tabType === "RETIRE" ? "" : store.tabType,
+    isRetire: store.tabType === "RETIRE" ? true : null,
   };
 
   await http
@@ -221,6 +232,7 @@ async function fetchDataPeriod(id: string) {
     });
 }
 
+/**function เปลี่ยนกลุ่ม*/
 async function changeTabGroup() {
   formFilter.page = 1;
   formFilter.pageSize = 10;
@@ -232,6 +244,7 @@ async function changeTabGroup() {
   store.groupId && fetchDataPeriod(store.groupId);
 }
 
+/**function เปลี่ยนขั้น*/
 function changeTabType() {
   formFilter.page = 1;
   formFilter.pageSize = 10;
@@ -239,7 +252,8 @@ function changeTabType() {
   store.groupId && fetchDataPeriod(store.groupId);
 }
 
-function updatePagination() {
+/** function เรียกข้อมูลรายชื่ออีกครั้ง*/
+function fetchDataPeriodNew() {
   store.groupId && fetchDataPeriod(store.groupId);
   store.groupId && fetchDataQuota(store.groupId);
 }
@@ -251,6 +265,7 @@ onMounted(async () => {
 </script>
 
 <template>
+  <!-- Tab กลุ่ม -->
   <q-tabs
     v-model="store.tabGroup"
     dense
@@ -276,6 +291,7 @@ onMounted(async () => {
       :key="index"
       :name="item.name"
     >
+      <!-- Card โควต้า -->
       <div class="row col-12 q-pa-md">
         <div class="row col-12 items-start q-gutter-md items-center">
           <div
@@ -295,7 +311,7 @@ onMounted(async () => {
                   </div>
 
                   <div :class="`text-${item.color} text-bold`">
-                    {{ item.total }}
+                    {{ item.total ? item.total.toLocaleString() : 0 }}
                   </div>
                 </div>
               </q-card-section>
@@ -306,9 +322,9 @@ onMounted(async () => {
           </div>
         </div>
       </div>
-
       <q-separator />
 
+      <!-- Tab ขั้น -->
       <q-card flat bordered>
         <q-splitter v-model="splitterModel" disable>
           <template v-slot:before>
@@ -358,14 +374,14 @@ onMounted(async () => {
                   :rows="rows"
                   v-model:maxPage="maxPage"
                   v-model:formFilter="formFilter"
-                  :fetchDataTable="updatePagination"
+                  :fetchDataTable="fetchDataPeriodNew"
                 />
                 <TableTabType2
                   v-else
                   :rows="rows"
                   v-model:maxPage="maxPage"
                   v-model:formFilter="formFilter"
-                  :fetchDataTable="updatePagination"
+                  :fetchDataTable="fetchDataPeriodNew"
                 />
               </q-tab-panel>
             </q-tab-panels>
diff --git a/src/modules/13_salary/components/SalaryLists/TableTypeOther.vue b/src/modules/13_salary/components/SalaryLists/TableTypeOther.vue
index f944d8da0..d5c402b9e 100644
--- a/src/modules/13_salary/components/SalaryLists/TableTypeOther.vue
+++ b/src/modules/13_salary/components/SalaryLists/TableTypeOther.vue
@@ -6,10 +6,7 @@ import http from "@/plugins/http";
 
 /** importType*/
 import type { QTableProps } from "quasar";
-import type {
-  NewPagination,
-  ItemsMenu,
-} from "@/modules/13_salary/interface/index/Main";
+import type { NewPagination } from "@/modules/13_salary/interface/index/Main";
 import type { DataFilter } from "@/modules/13_salary/interface/index/SalaryList";
 
 /** importComponents*/
@@ -22,17 +19,13 @@ import DialogMoveLevel from "@/modules/13_salary/components/SalaryLists/DialogMo
 import { useCounterMixin } from "@/stores/mixin";
 import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
 
+/** use*/
 const $q = useQuasar();
 const store = useSalaryListSDataStore();
-const {
-  date2Thai,
-  dialogRemove,
-  messageError,
-  showLoader,
-  hideLoader,
-  success,
-} = useCounterMixin();
+const { dialogRemove, messageError, showLoader, hideLoader, success } =
+  useCounterMixin();
 
+/** props*/
 const formFilter = defineModel<DataFilter>("formFilter", { required: true });
 const maxPage = defineModel<Number>("maxPage", { required: true });
 const props = defineProps({
@@ -42,6 +35,7 @@ const props = defineProps({
   },
 });
 
+/** ข้อมูล Table*/
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -79,10 +73,19 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
+  {
+    name: "posType",
+    align: "left",
+    label: "ตำแหน่งประเภท",
+    sortable: false,
+    field: "posType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
   {
     name: "posLevel",
     align: "left",
-    label: "ตำแหน่งประเภทระดับ",
+    label: "ระดับตำแหน่ง",
     sortable: false,
     field: "posLevel",
     headerStyle: "font-size: 14px",
@@ -115,46 +118,79 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
+  {
+    name: "positionSalaryAmount",
+    align: "left",
+    label: "เงินเดือนหลังเลื่อน",
+    sortable: false,
+    field: "positionSalaryAmount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
 ]);
 const visibleColumns = ref<string[]>([
   "no",
   "posNo",
   "fullName",
   "position",
+  "posType",
   "posLevel",
   "posExecutive",
   "amount",
   "amountUse",
+  "positionSalaryAmount",
 ]);
 
-/** modal*/
+/** modalDialog*/
 const modalDialogAddPerson = ref<boolean>(false);
 const modalDialogForm = ref<boolean>(false);
 const modalDialogMoveGroup = ref<boolean>(false);
 const modalDialogMoveLeve = ref<boolean>(false);
 
+const profileId = ref<string>("");
+const amount = ref<number>(0);
+
+/** function openPopup เพิ่มคนเลื่อนเงินเดือน*/
 function onClickAddPerson() {
   modalDialogAddPerson.value = !modalDialogAddPerson.value;
 }
 
-const profileId = ref<string>("");
-const amount = ref<number>(0);
+/**
+ * function openPopup แก้ไขเงินเดือน
+ * @param id profileId
+ * @param amountSalary จำนวนเงินเดือน
+ *
+ */
 function onClickEdit(id: string, amountSalary: number) {
   profileId.value = id;
   amount.value = amountSalary;
   modalDialogForm.value = !modalDialogForm.value;
 }
 
+/**
+ * function openPopup ย้ายกลุ่ม
+ * @param id profileId
+ *
+ */
 function onClickMovieGroup(id: string) {
   profileId.value = id;
   modalDialogMoveGroup.value = !modalDialogMoveGroup.value;
 }
 
+/**
+ * function openPopup ย้ายกขั้น
+ * @param id profileId
+ *
+ */
 function onClickMoveLevel(id: string) {
   profileId.value = id;
   modalDialogMoveLeve.value = !modalDialogMoveLeve.value;
 }
 
+/**
+ * function ยืนยันการลบรายชื่อ
+ *  @param id profileId
+ */
 function onClickDelete(id: string) {
   dialogRemove($q, async () => {
     showLoader();
@@ -173,19 +209,24 @@ function onClickDelete(id: string) {
   });
 }
 
+/** function updatePageTable*/
 function updatePagePagination() {
   props.fetchDataTable?.();
 }
 
+/** function updatePageSizeTable*/
 function updatePageSizePagination(newPagination: NewPagination) {
   formFilter.value.page = 1;
   formFilter.value.pageSize = newPagination.rowsPerPage;
 }
 
+/** function ค้นหาข้อมูล Table*/
 function searchData() {
   formFilter.value.page = 1;
   props.fetchDataTable?.();
 }
+
+/** callblack function เรียกข้อมูลรายชื่อใหม่ เมื่อมีการเปลี่ยน PageSize*/
 watch(
   () => formFilter.value.pageSize,
   () => {
@@ -268,10 +309,23 @@ watch(
             }}
           </div>
           <div v-else-if="col.name === 'amount'">
-            {{ props.row.amount.toLocaleString() }}
+            {{
+              props.row.amount !== null ? props.row.amount.toLocaleString() : ""
+            }}
           </div>
           <div v-else-if="col.name === 'amountUse'">
-            {{ props.row.amountUse.toLocaleString() }}
+            {{
+              props.row.amountUse !== null
+                ? props.row.amountUse.toLocaleString()
+                : ""
+            }}
+          </div>
+          <div v-else-if="col.name === 'positionSalaryAmount'">
+            {{
+              props.row.positionSalaryAmount !== null
+                ? props.row.positionSalaryAmount.toLocaleString()
+                : ""
+            }}
           </div>
 
           <div v-else>
diff --git a/src/modules/13_salary/components/SalaryLists/TableTypePending.vue b/src/modules/13_salary/components/SalaryLists/TableTypePending.vue
index fc4a24453..952b0ec9c 100644
--- a/src/modules/13_salary/components/SalaryLists/TableTypePending.vue
+++ b/src/modules/13_salary/components/SalaryLists/TableTypePending.vue
@@ -19,18 +19,26 @@ import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsSt
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-const store = useSalaryListSDataStore();
-
+/** use*/
 const $q = useQuasar();
-const {
-  date2Thai,
-  dialogRemove,
-  messageError,
-  showLoader,
-  hideLoader,
-  success,
-} = useCounterMixin();
+const store = useSalaryListSDataStore();
+const { dialogRemove, messageError, showLoader, hideLoader, success } =
+  useCounterMixin();
 
+/** Props*/
+const formFilter = defineModel<DataFilter>("formFilter", { required: true });
+const maxPage = defineModel<Number>("maxPage", { required: true });
+const props = defineProps({
+  rows: { type: Array },
+  fetchDataTable: {
+    type: Function,
+  },
+  maxPage: {
+    type: Number,
+  },
+});
+
+/** ข้อมูล Table*/
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -53,7 +61,7 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "position",
     align: "left",
-    label: "ตำแหน่ง",
+    label: "ตำแหน่งในสายงาน",
     field: "position",
     sortable: true,
     headerStyle: "font-size: 14px",
@@ -126,27 +134,20 @@ const visibleColumns = ref<string[]>([
   "retired2",
 ]);
 
-const formFilter = defineModel<DataFilter>("formFilter", { required: true });
-const maxPage = defineModel<Number>("maxPage", { required: true });
-const props = defineProps({
-  rows: { type: Array },
-  fetchDataTable: {
-    type: Function,
-  },
-  maxPage: {
-    type: Number,
-  },
-});
-
-/** modal*/
+/** modalDialog*/
 const modalDialogAddPerson = ref<boolean>(false);
 const modalDialogForm = ref<boolean>(false);
 const modalDialogMoveGroup = ref<boolean>(false);
 const modalDialogMoveLeve = ref<boolean>(false);
 
+/** ตัวแปร*/
 const profileId = ref<string>("");
 const amount = ref<number>(0);
 
+/**
+ * function ยืนยันการลบรายชื่อ
+ *  @param id profileId
+ */
 function onClickDelete(id: string) {
   dialogRemove($q, async () => {
     showLoader();
@@ -164,39 +165,62 @@ function onClickDelete(id: string) {
       });
   });
 }
+
+/** function openPopup เพิ่มคนเลื่อนเงินเดือน*/
 function onClickAddPerson() {
   modalDialogAddPerson.value = !modalDialogAddPerson.value;
 }
 
+/**
+ * function openPopup แก้ไขเงินเดือน
+ * @param id profileId
+ * @param amountSalary จำนวนเงินเดือน
+ *
+ */
 function onClickEdit(id: string, amountSalary: number) {
   profileId.value = id;
   amount.value = amountSalary;
   modalDialogForm.value = !modalDialogForm.value;
 }
 
+/**
+ * function openPopup ย้ายกลุ่ม
+ * @param id profileId
+ *
+ */
 function onClickMovieGroup(id: string) {
   profileId.value = id;
   modalDialogMoveGroup.value = !modalDialogMoveGroup.value;
 }
 
+/**
+ * function openPopup ย้ายกขั้น
+ * @param id profileId
+ *
+ */
 function onClickMoveLevel(id: string) {
   profileId.value = id;
   modalDialogMoveLeve.value = !modalDialogMoveLeve.value;
 }
 
+/** function updatePageTable*/
 function updatePagePagination() {
   props.fetchDataTable?.();
 }
 
+/** function updatePageSizeTable*/
 function updatePageSizePagination(newPagination: NewPagination) {
   formFilter.value.page = 1;
   formFilter.value.pageSize = newPagination.rowsPerPage;
 }
 
+/** function ค้นหาข้อมูล Table*/
 function searchData() {
   formFilter.value.page = 1;
   props.fetchDataTable?.();
 }
+
+/** callblack function เรียกข้อมูลรายชื่อใหม่ เมื่อมีการเปลี่ยน PageSize*/
 watch(
   () => formFilter.value.pageSize,
   () => {
diff --git a/src/modules/13_salary/interface/response/SalaryList.ts b/src/modules/13_salary/interface/response/SalaryList.ts
index 7c8ea0350..d32951527 100644
--- a/src/modules/13_salary/interface/response/SalaryList.ts
+++ b/src/modules/13_salary/interface/response/SalaryList.ts
@@ -74,10 +74,56 @@ interface DataPerson {
   root: string;
   rootId: string;
 }
+
+interface DataPeriod {
+  amount: number;
+  amountSpecial: null | number;
+  amountUse: null | number;
+  child1: string | null;
+  child1Id: string | null;
+  child2: string | null;
+  child2Id: string | null;
+  child3: string | null;
+  child3Id: string | null;
+  child4: string | null;
+  child4Id: string | null;
+  citizenId: string;
+  createdAt: string;
+  createdFullName: string;
+  createdUserId: string;
+  duration: null | number;
+  firstName: string;
+  id: string;
+  lastName: string;
+  lastUpdateFullName: string;
+  lastUpdateUserId: string;
+  lastUpdatedAt: string;
+  orgShortName: string;
+  posExecutive: null | string;
+  posLevel: string;
+  posMasterNo: number;
+  posMasterNoPrefix: string;
+  posMasterNoSuffix: string;
+  posType: string;
+  position: string;
+  positionSalaryAmount: null | number;
+  prefix: string;
+  punish: null | string;
+  result: null | string;
+  retired: null | string;
+  retired2: null | string;
+  revisionId: string;
+  root: string;
+  rootId: string;
+  salaryOrgId: string;
+  status: string;
+  type: string;
+}
 export type {
   DataPeriodLatest,
   DataPeriodQuota,
   DataRound,
   DataAgency,
   DataPerson,
+  DataPeriod,
 };