diff --git a/src/api/13_salary/api.salary.ts b/src/api/13_salary/api.salary.ts
index f835154f9..9af69c3c1 100644
--- a/src/api/13_salary/api.salary.ts
+++ b/src/api/13_salary/api.salary.ts
@@ -26,4 +26,6 @@ export default {
   salaryListPeriodQuota: (id: string) => `${salaryPeriod}/quota/${id}`,
   salaryListPeriodORG: (id: string) => `${salaryPeriod}/org/${id}`,
   salaryListPeriodProfileById: (id: string) => `${salaryPeriod}/profile/${id}`,
+  salaryListPerson: `${env.API_URI}/org/profile/salary/gen`,
+  salaryPeriodProfile: `${salary}/period/org/profile`,
 };
diff --git a/src/modules/13_salary/components/SalaryLists/DialogAddPerson.vue b/src/modules/13_salary/components/SalaryLists/DialogAddPerson.vue
new file mode 100644
index 000000000..ce110f65f
--- /dev/null
+++ b/src/modules/13_salary/components/SalaryLists/DialogAddPerson.vue
@@ -0,0 +1,309 @@
+<script setup lang="ts">
+import { ref, reactive, watch } from "vue";
+import { useQuasar } from "quasar";
+import config from "@/app.config";
+import http from "@/plugins/http";
+
+/** importType*/
+import type { QTableProps } from "quasar";
+import type { NewPagination } from "@/modules/13_salary/interface/index/Main";
+import type { DataFilterPerson } from "@/modules/13_salary/interface/index/SalaryList";
+import type { DataPersonReq } from "@/modules/13_salary/interface/request/SalaryList";
+import type { DataPerson } from "@/modules/13_salary/interface/response/SalaryList";
+
+/** 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 { messageError, showLoader, hideLoader, dialogConfirm, success } =
+  useCounterMixin();
+
+/** props*/
+const modal = defineModel<boolean>("modal", { required: true });
+const props = defineProps({
+  fetchData: {
+    type: Function,
+  },
+});
+
+/** Table*/
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "citizenId",
+    align: "left",
+    label: "เลขประจำตัวประชาชน",
+    sortable: true,
+    field: "citizenId",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullName",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    field: "fullName",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    sortable: true,
+    field: "position",
+    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: "ระดับตำเเหน่ง",
+    sortable: false,
+    field: "posLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const rows = ref<DataPerson[]>([]);
+
+/** ข้อมูุลค้นหา*/
+const formFilter = reactive<DataFilterPerson>({
+  page: 1,
+  pageSize: 10,
+  keyword: "",
+});
+const maxPage = ref<number>(1);
+
+/** function close popup*/
+function closeModal() {
+  modal.value = false;
+  formFilter.page = 1;
+}
+
+/** function เรียกรายชื่อ คนเลื่อนเงินเดือน*/
+async function fetchListPerson() {
+  showLoader();
+  await http
+    .post(config.API.salaryListPerson, formFilter)
+    .then((res) => {
+      const data = res.data.result.data;
+      maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
+      rows.value = data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+      closeModal();
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * function ยืนยันการเพิ่มคนเลื่อนเงินเดือน
+ * @param data ข้อมูลคนที่เพิ่ม
+ */
+async function onClickAddPerson(data: DataPerson) {
+  const body: DataPersonReq = {
+    id: store.groupId,
+    type: store.tabType,
+    ...data,
+  };
+
+  dialogConfirm(
+    $q,
+    async () => {
+      await http
+        .post(config.API.salaryPeriodProfile, body)
+        .then(() => {
+          props.fetchData?.();
+          success($q, "เพื่มรายชื่อสำเร็จ");
+          closeModal();
+        })
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    },
+    "ยืนยันการเพิ่มรายชื่อ",
+    "ต้องการยืนยันการเพิ่มรายชื่อนี้ใช่หรือไม่?"
+  );
+}
+
+/** function updatePage*/
+async function updatePagePagination() {
+  fetchListPerson();
+}
+
+/** function updatePageSize*/
+function updatePageSizePagination(newPagination: NewPagination) {
+  formFilter.page = 1;
+  formFilter.pageSize = newPagination.rowsPerPage;
+}
+
+/** function ค้นหาข้อมูลตาม keyword*/
+function searchData() {
+  formFilter.page = 1;
+  fetchListPerson();
+}
+
+/** callblack function เรียกข้อมูลรายชื่อคนเลื่อนเงินเดือน เมื่อมีการเปิด Popup*/
+watch(
+  () => modal.value,
+  async () => {
+    if (modal.value) {
+      await fetchListPerson();
+    }
+  }
+);
+
+/** callblack function เรียกข้อมูลรายชื่อคนเลื่อนเงินเดือน เมื่อมีการเปลี่ยน PageSize*/
+watch(
+  () => formFilter.pageSize,
+  () => {
+    updatePagePagination();
+  }
+);
+</script>
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="max-width: 100vw">
+      <Header :tittle="'เพิ่มคนเลื่อนเงินเดือน'" :close="closeModal" />
+      <q-separator />
+
+      <q-card-section class="scroll" style="max-height: 70vh">
+        <div class="row q-col-gutter-sm">
+          <div class="col-12">
+            <q-input
+              borderless
+              dense
+              debounce="300"
+              outlined
+              placeholder="ค้นหา"
+              v-model="formFilter.keyword"
+              @keydown.enter.prevent="searchData"
+            >
+              <template v-slot:append>
+                <q-icon name="search" />
+              </template>
+            </q-input>
+          </div>
+          <div class="col-12">
+            <d-table
+              ref="table"
+              :columns="columns"
+              :rows="rows"
+              row-key="id"
+              flat
+              bordered
+              :paging="true"
+              dense
+              :rows-per-page-options="[10, 25, 50, 100]"
+              @update:pagination="updatePageSizePagination"
+            >
+              <template v-slot:header="props">
+                <q-tr :props="props">
+                  <q-th
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                  >
+                    <span class="text-weight-medium">{{ col.label }}</span>
+                  </q-th>
+                  <q-th auto-width></q-th>
+                </q-tr>
+              </template>
+              <template v-slot:body="props">
+                <q-tr :props="props" class="cursor-pointer">
+                  <q-td
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                  >
+                    <div v-if="col.name === 'no'">
+                      {{
+                        (formFilter.page - 1) * formFilter.pageSize +
+                        props.rowIndex +
+                        1
+                      }}
+                    </div>
+                    <div v-else-if="col.name === 'fullName'">
+                      {{
+                        `${props.row.prefix}${props.row.firstName}  ${props.row.lastName}`
+                      }}
+                    </div>
+                    <div v-else>
+                      {{ col.value ? col.value : "-" }}
+                    </div>
+                  </q-td>
+                  <q-td>
+                    <q-btn
+                      outline
+                      color="primary"
+                      label="เพิ่ม"
+                      @click="onClickAddPerson(props.row)"
+                    />
+                  </q-td>
+                </q-tr>
+              </template>
+              <template v-slot:pagination="scope">
+                <q-pagination
+                  v-model="formFilter.page"
+                  active-color="primary"
+                  color="dark"
+                  :max="Number(maxPage)"
+                  :max-pages="5"
+                  size="sm"
+                  boundary-links
+                  direction-links
+                  @update:model-value="updatePagePagination()"
+                ></q-pagination>
+              </template>
+            </d-table>
+          </div>
+        </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>
+
+<style scoped></style>
diff --git a/src/modules/13_salary/components/SalaryLists/DialogFormEdit.vue b/src/modules/13_salary/components/SalaryLists/DialogFormEdit.vue
index b81c553c1..342b1f64d 100644
--- a/src/modules/13_salary/components/SalaryLists/DialogFormEdit.vue
+++ b/src/modules/13_salary/components/SalaryLists/DialogFormEdit.vue
@@ -34,7 +34,7 @@ function close() {
 
 function onSubmit() {
   dialogConfirm($q, () => {
-    if (amount.value) {
+    if (amount.value !== null) {
       const amountString: string = amount.value.toString();
       const body = {
         profileId: profileId.value,
@@ -58,13 +58,6 @@ function onSubmit() {
     }
   });
 }
-
-function inputEdit(val: boolean) {
-  return {
-    "full-width cursor-pointer inputgreen ": val,
-    "full-width cursor-pointer inputgreen": !val,
-  };
-}
 </script>
 
 <template>
@@ -76,7 +69,6 @@ function inputEdit(val: boolean) {
       <q-card-section class="scroll" style="max-height: 70vh">
         <div class="q-gutter-y-sm">
           <q-input
-            ref="salaryRef"
             dense
             outlined
             v-model="amount"
@@ -92,7 +84,6 @@ function inputEdit(val: boolean) {
       <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-btn
             type="submit"
             for="#submitForm"
diff --git a/src/modules/13_salary/components/SalaryLists/DialogMoveGroup.vue b/src/modules/13_salary/components/SalaryLists/DialogMoveGroup.vue
index b83e41eeb..0e88a09eb 100644
--- a/src/modules/13_salary/components/SalaryLists/DialogMoveGroup.vue
+++ b/src/modules/13_salary/components/SalaryLists/DialogMoveGroup.vue
@@ -22,13 +22,17 @@ 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() {
-  onSubmit();
+  groupRef.value.validate();
+  if (groupRef.value.validate()) {
+    onSubmit();
+  }
 }
 
 function close() {
@@ -76,7 +80,7 @@ function inputEdit(val: boolean) {
       <q-card-section class="scroll" style="max-height: 70vh">
         <div class="q-gutter-y-sm">
           <q-select
-            ref="periodRef"
+            ref="groupRef"
             :class="inputEdit(isReadonly)"
             v-model="group"
             label="กลุ่ม"
@@ -87,7 +91,7 @@ function inputEdit(val: boolean) {
             option-label="name"
             option-value="id"
             :options="store.groupOp.filter((e) => e.name !== props.group)"
-            :rules="[(val) => !!val || `${'กรุณาเลือกรอบการขึ้นเงินเดือน'}`]"
+            :rules="[(val) => !!val || `${'กรุณากลุ่ม'}`]"
             lazy-rules
             hide-bottom-space
           />
diff --git a/src/modules/13_salary/components/SalaryLists/DialogMoveLevel.vue b/src/modules/13_salary/components/SalaryLists/DialogMoveLevel.vue
index ab2eac513..101e4c1cc 100644
--- a/src/modules/13_salary/components/SalaryLists/DialogMoveLevel.vue
+++ b/src/modules/13_salary/components/SalaryLists/DialogMoveLevel.vue
@@ -14,6 +14,7 @@ const store = useSalaryListSDataStore();
 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;
@@ -26,7 +27,10 @@ const props = defineProps({
 
 /*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
 function validateForm() {
-  onSubmit();
+  typeRef.value.validate();
+  if (typeRef.value.validate()) {
+    onSubmit();
+  }
 }
 
 function close() {
@@ -74,7 +78,7 @@ function inputEdit(val: boolean) {
       <q-card-section class="scroll" style="max-height: 70vh">
         <div class="q-gutter-y-sm">
           <q-select
-            ref="periodRef"
+            ref="typeRef"
             :class="inputEdit(isReadonly)"
             v-model="type"
             label="เลื่อนขั้น"
diff --git a/src/modules/13_salary/components/SalaryLists/TabMain.vue b/src/modules/13_salary/components/SalaryLists/TabMain.vue
index c9a999d04..3f3af5ac8 100644
--- a/src/modules/13_salary/components/SalaryLists/TabMain.vue
+++ b/src/modules/13_salary/components/SalaryLists/TabMain.vue
@@ -171,7 +171,6 @@ async function fetchDataPeriod(id: string) {
     .then((res) => {
       rows.value = res.data.result.data;
       maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
-      // maxPage.value = 10;
     })
     .catch((err) => {
       messageError($q, err);
@@ -198,6 +197,7 @@ function changeTabType() {
 
 function updatePagination() {
   store.groupId && fetchDataPeriod(store.groupId);
+  store.groupId && fetchDataQuota(store.groupId);
 }
 
 onMounted(async () => {
@@ -307,28 +307,28 @@ onMounted(async () => {
                   :rows="rows"
                   v-model:maxPage="maxPage"
                   v-model:formFilter="formFilter"
-                  :updatePagination="updatePagination"
+                  :fetchDataTable="updatePagination"
                 />
                 <TableTabType2
                   v-if="index + 1 === 2"
                   :rows="rows"
                   v-model:maxPage="maxPage"
                   v-model:formFilter="formFilter"
-                  :updatePagination="updatePagination"
+                  :fetchDataTable="updatePagination"
                 />
                 <TableTabType2
                   v-if="index + 1 === 3"
                   :rows="rows"
                   v-model:maxPage="maxPage"
                   v-model:formFilter="formFilter"
-                  :updatePagination="updatePagination"
+                  :fetchDataTable="updatePagination"
                 />
                 <TableTabType2
                   v-if="index + 1 === 4"
                   :rows="rows"
                   v-model:maxPage="maxPage"
                   v-model:formFilter="formFilter"
-                  :updatePagination="updatePagination"
+                  :fetchDataTable="updatePagination"
                 />
                 <TableTabType2
                   v-if="index + 1 === 5"
diff --git a/src/modules/13_salary/components/SalaryLists/TableTypeOther.vue b/src/modules/13_salary/components/SalaryLists/TableTypeOther.vue
index 7716dae31..f944d8da0 100644
--- a/src/modules/13_salary/components/SalaryLists/TableTypeOther.vue
+++ b/src/modules/13_salary/components/SalaryLists/TableTypeOther.vue
@@ -13,6 +13,7 @@ import type {
 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";
@@ -36,7 +37,7 @@ const formFilter = defineModel<DataFilter>("formFilter", { required: true });
 const maxPage = defineModel<Number>("maxPage", { required: true });
 const props = defineProps({
   rows: { type: Array },
-  updatePagination: {
+  fetchDataTable: {
     type: Function,
   },
 });
@@ -70,11 +71,11 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "posPath",
+    name: "position",
     align: "left",
     label: "ตำแหน่งในสายงาน",
     sortable: true,
-    field: "posPath",
+    field: "position",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -119,7 +120,7 @@ const visibleColumns = ref<string[]>([
   "no",
   "posNo",
   "fullName",
-  "posPath",
+  "position",
   "posLevel",
   "posExecutive",
   "amount",
@@ -127,10 +128,15 @@ const visibleColumns = ref<string[]>([
 ]);
 
 /** modal*/
+const modalDialogAddPerson = ref<boolean>(false);
 const modalDialogForm = ref<boolean>(false);
 const modalDialogMoveGroup = ref<boolean>(false);
 const modalDialogMoveLeve = ref<boolean>(false);
 
+function onClickAddPerson() {
+  modalDialogAddPerson.value = !modalDialogAddPerson.value;
+}
+
 const profileId = ref<string>("");
 const amount = ref<number>(0);
 function onClickEdit(id: string, amountSalary: number) {
@@ -156,7 +162,7 @@ function onClickDelete(id: string) {
       .delete(config.API.salaryListPeriodProfileById(id))
       .then(() => {
         success($q, "ลบข้อมูลสำเร็จ");
-        props.updatePagination?.();
+        props.fetchDataTable?.();
       })
       .catch((err) => {
         messageError($q, err);
@@ -168,7 +174,7 @@ function onClickDelete(id: string) {
 }
 
 function updatePagePagination() {
-  props.updatePagination?.();
+  props.fetchDataTable?.();
 }
 
 function updatePageSizePagination(newPagination: NewPagination) {
@@ -178,7 +184,7 @@ function updatePageSizePagination(newPagination: NewPagination) {
 
 function searchData() {
   formFilter.value.page = 1;
-  props.updatePagination?.();
+  props.fetchDataTable?.();
 }
 watch(
   () => formFilter.value.pageSize,
@@ -189,7 +195,7 @@ watch(
 </script>
 <template>
   <q-toolbar class="text-primary" style="padding: 0px">
-    <q-btn flat round dense icon="add">
+    <q-btn flat round dense icon="add" @click="onClickAddPerson">
       <q-tooltip>เพิ่ม </q-tooltip>
     </q-btn>
     <q-space />
@@ -249,7 +255,9 @@ watch(
       <q-tr :props="props" class="cursor-pointer">
         <q-td v-for="col in props.cols" :key="col.name" :props="props">
           <div v-if="col.name === 'no'">
-            {{ props.rowIndex + 1 }}
+            {{
+              (formFilter.page - 1) * formFilter.pageSize + props.rowIndex + 1
+            }}
           </div>
           <div v-else-if="col.name === 'posNo'">
             {{ `${props.row.orgShortName}${props.row.posMasterNo}` }}
@@ -328,22 +336,27 @@ watch(
     ></q-pagination>
   </d-table>
 
+  <DialogAddPerson
+    v-model:modal="modalDialogAddPerson"
+    :fetchData="props.fetchDataTable"
+  />
+
   <DialogFormEdit
     v-model:modal="modalDialogForm"
     v-model:profileId="profileId"
     v-model:amount="amount"
-    :fetchData="props.updatePagination"
+    :fetchData="props.fetchDataTable"
   />
   <DialogMoveGroup
     v-model:modal="modalDialogMoveGroup"
     v-model:profileId="profileId"
     :group="store.tabGroup === 'group1' ? 'กลุ่ม1' : 'กลุ่ม2'"
-    :fetchData="props.updatePagination"
+    :fetchData="props.fetchDataTable"
   />
   <DialogMoveLevel
     v-model:modal="modalDialogMoveLeve"
     v-model:profileId="profileId"
-    :fetchData="props.updatePagination"
+    :fetchData="props.fetchDataTable"
     :type="store.tabType"
   />
 </template>
diff --git a/src/modules/13_salary/components/SalaryLists/TableTypePending.vue b/src/modules/13_salary/components/SalaryLists/TableTypePending.vue
index 4081d582e..34832561c 100644
--- a/src/modules/13_salary/components/SalaryLists/TableTypePending.vue
+++ b/src/modules/13_salary/components/SalaryLists/TableTypePending.vue
@@ -8,6 +8,7 @@ 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";
@@ -127,7 +128,7 @@ const formFilter = defineModel<DataFilter>("formFilter", { required: true });
 const maxPage = defineModel<Number>("maxPage", { required: true });
 const props = defineProps({
   rows: { type: Array },
-  updatePagination: {
+  fetchDataTable: {
     type: Function,
   },
   maxPage: {
@@ -136,6 +137,7 @@ const props = defineProps({
 });
 
 /** modal*/
+const modalDialogAddPerson = ref<boolean>(false);
 const modalDialogForm = ref<boolean>(false);
 const modalDialogMoveGroup = ref<boolean>(false);
 const modalDialogMoveLeve = ref<boolean>(false);
@@ -148,6 +150,9 @@ function onClickDelete() {
     success($q, "ลบข้อมูลสำเร็จ");
   });
 }
+function onClickAddPerson() {
+  modalDialogAddPerson.value = !modalDialogAddPerson.value;
+}
 
 function onClickEdit(id: string, amountSalary: number) {
   profileId.value = id;
@@ -166,7 +171,7 @@ function onClickMoveLevel(id: string) {
 }
 
 function updatePagePagination() {
-  props.updatePagination?.();
+  props.fetchDataTable?.();
 }
 
 function updatePageSizePagination(newPagination: NewPagination) {
@@ -176,7 +181,7 @@ function updatePageSizePagination(newPagination: NewPagination) {
 
 function searchData() {
   formFilter.value.page = 1;
-  props.updatePagination?.();
+  props.fetchDataTable?.();
 }
 watch(
   () => formFilter.value.pageSize,
@@ -187,7 +192,7 @@ watch(
 </script>
 <template>
   <q-toolbar class="text-primary" style="padding: 0px">
-    <q-btn flat round dense icon="add">
+    <q-btn flat round dense icon="add" @click="onClickAddPerson">
       <q-tooltip>เพิ่ม </q-tooltip>
     </q-btn>
     <q-space />
@@ -246,7 +251,9 @@ watch(
       <q-tr :props="props" class="cursor-pointer">
         <q-td v-for="col in props.cols" :key="col.name" :props="props">
           <div v-if="col.name === 'no'">
-            {{ props.rowIndex + 1 }}
+            {{
+              (formFilter.page - 1) * formFilter.pageSize + props.rowIndex + 1
+            }}
           </div>
           <div v-else-if="col.name === 'fullName'">
             {{
@@ -378,22 +385,27 @@ watch(
     </template>
   </d-table>
 
+  <DialogAddPerson
+    v-model:modal="modalDialogAddPerson"
+    :fetchData="props.fetchDataTable"
+  />
+
   <DialogFormEdit
     v-model:modal="modalDialogForm"
     v-model:profileId="profileId"
     v-model:amount="amount"
-    :fetchData="props.updatePagination"
+    :fetchData="props.fetchDataTable"
   />
   <DialogMoveGroup
     v-model:modal="modalDialogMoveGroup"
     v-model:profileId="profileId"
     :group="store.tabGroup === 'group1' ? 'กลุ่ม1' : 'กลุ่ม2'"
-    :fetchData="props.updatePagination"
+    :fetchData="props.fetchDataTable"
   />
   <DialogMoveLevel
     v-model:modal="modalDialogMoveLeve"
     v-model:profileId="profileId"
-    :fetchData="props.updatePagination"
+    :fetchData="props.fetchDataTable"
   />
 </template>
 
diff --git a/src/modules/13_salary/interface/index/SalaryList.ts b/src/modules/13_salary/interface/index/SalaryList.ts
index 0f8d7fa16..4a2767dfd 100644
--- a/src/modules/13_salary/interface/index/SalaryList.ts
+++ b/src/modules/13_salary/interface/index/SalaryList.ts
@@ -5,4 +5,10 @@ interface DataFilter {
   type: string;
 }
 
-export type { DataFilter };
+interface DataFilterPerson {
+  page: number;
+  pageSize: number;
+  keyword: string;
+}
+
+export type { DataFilter, DataFilterPerson };
diff --git a/src/modules/13_salary/interface/request/SalaryList.ts b/src/modules/13_salary/interface/request/SalaryList.ts
new file mode 100644
index 000000000..11938e9a5
--- /dev/null
+++ b/src/modules/13_salary/interface/request/SalaryList.ts
@@ -0,0 +1,33 @@
+interface DataPersonReq {
+  id: string;
+  type: string;
+  amount: number;
+  child1: string;
+  child1Id: string;
+  child2: string;
+  child2Id: string;
+  child3: string | null;
+  child3Id: string | null;
+  child4: string | null;
+  child4Id: string | null;
+  citizenId: string;
+  firstName: string;
+  isDuration: boolean;
+  isPunish: boolean;
+  isResult: boolean;
+  isRetired: boolean;
+  isRetired2: boolean;
+  lastName: string;
+  orgShortName: string;
+  posExecutive: string | null;
+  posLevel: string;
+  posMasterNo: number;
+  posMasterNoPrefix: string;
+  posMasterNoSuffix: string;
+  posType: string;
+  position: string;
+  prefix: string;
+  root: string;
+  rootId: string;
+}
+export type { DataPersonReq };
diff --git a/src/modules/13_salary/interface/response/SalaryList.ts b/src/modules/13_salary/interface/response/SalaryList.ts
index 4f9848b6f..7c8ea0350 100644
--- a/src/modules/13_salary/interface/response/SalaryList.ts
+++ b/src/modules/13_salary/interface/response/SalaryList.ts
@@ -11,4 +11,73 @@ interface DataPeriodQuota {
   chosen: number; //เลือกไปแล้ว
   remaining: number; //คงเหลือโควตาnumber
 }
-export type { DataPeriodLatest, DataPeriodQuota };
+
+interface DataRound {
+  effectiveDate: string;
+  id: string;
+  isActive: boolean;
+  period: string;
+  revisionId: string;
+  status: string;
+  year: number;
+}
+
+interface DataAgency {
+  ancestorDNA: string;
+  createdAt: string;
+  createdFullName: string;
+  createdUserId: string;
+  id: string;
+  lastUpdateFullName: string;
+  lastUpdateUserId: string;
+  lastUpdatedAt: string;
+  orgChild1s: any[];
+  orgRevision: any[];
+  orgRevisionId: string;
+  orgRootCode: string;
+  orgRootFax: string;
+  orgRootName: string;
+  orgRootOrder: number;
+  orgRootPhoneEx: string;
+  orgRootPhoneIn: string;
+  orgRootRank: string;
+  orgRootShortName: string;
+}
+
+interface DataPerson {
+  amount: number;
+  child1: string;
+  child1Id: string;
+  child2: string;
+  child2Id: string;
+  child3: string | null;
+  child3Id: string | null;
+  child4: string | null;
+  child4Id: string | null;
+  citizenId: string;
+  firstName: string;
+  isDuration: boolean;
+  isPunish: boolean;
+  isResult: boolean;
+  isRetired: boolean;
+  isRetired2: boolean;
+  lastName: string;
+  orgShortName: string;
+  posExecutive: string | null;
+  posLevel: string;
+  posMasterNo: number;
+  posMasterNoPrefix: string;
+  posMasterNoSuffix: string;
+  posType: string;
+  position: string;
+  prefix: string;
+  root: string;
+  rootId: string;
+}
+export type {
+  DataPeriodLatest,
+  DataPeriodQuota,
+  DataRound,
+  DataAgency,
+  DataPerson,
+};
diff --git a/src/modules/13_salary/views/salaryLists.vue b/src/modules/13_salary/views/salaryLists.vue
index 809ed54b7..2546c3be7 100644
--- a/src/modules/13_salary/views/salaryLists.vue
+++ b/src/modules/13_salary/views/salaryLists.vue
@@ -1,42 +1,51 @@
 <script setup lang="ts">
-import type { DataPeriodLatest } from "@/modules/13_salary/interface/response/SalaryList";
-import TabGroup from "@/modules/13_salary/components/SalaryLists/TabMain.vue";
-
-import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
 import { onMounted, ref } from "vue";
+import { useQuasar } from "quasar";
+import config from "@/app.config";
+import http from "@/plugins/http";
+
+/** importType*/
 import type {
   DataOption,
   DataOptionShort,
 } from "@/modules/13_salary/interface/index/Main";
-import config from "@/app.config";
-import http from "@/plugins/http";
+import type {
+  DataRound,
+  DataAgency,
+  DataPeriodLatest,
+} from "@/modules/13_salary/interface/response/SalaryList";
+
+/** importComponents*/
+import TabGroup from "@/modules/13_salary/components/SalaryLists/TabMain.vue";
+
+/** importStore*/
+import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
 import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar } from "quasar";
-
-const { messageError, showLoader, hideLoader } = useCounterMixin();
 
+/** use*/
 const store = useSalaryListSDataStore();
 const $q = useQuasar();
+const { messageError, showLoader, hideLoader } = useCounterMixin();
 
+/** ตัวแปร*/
 const roundFilter = ref<any>();
 const roundOptions = ref<DataOptionShort[]>([]);
 const agencyFilter = ref<string>("");
 const agencyOptions = ref<DataOption[]>();
 const snapFilter = ref<string>("");
 const snapOptions = ref<DataOption[]>();
-// const tabMain = ref<string>("first_snapshot");
 const periodLatest = ref<DataPeriodLatest>();
 
 const isLoad = ref<boolean>(false);
 
+/**function เรียกข้อมูลรอบการขึ้นเงินเดือน*/
 async function getRound() {
   showLoader();
   http
     .get(config.API.salaryPeriod() + `?page=1&pageSise=10&keyword=&year=0`)
     .then(async (res) => {
       const data = res.data.result.data;
-
-      roundOptions.value = await data.map((x: any) => ({
+      roundOptions.value = await data.map((x: DataRound) => ({
         id: x.id,
         revisionId: x.revisionId,
         shortCode: x.period,
@@ -73,6 +82,7 @@ async function getRound() {
     });
 }
 
+/** function เรียกรอบ*/
 function getSnap(code: string) {
   snapOptions.value =
     code === "OCT"
@@ -110,17 +120,19 @@ function getSnap(code: string) {
   snapFilter.value = snapOptions.value[0].id;
 }
 
+/**
+ * function เรียกข้อมูลหน่ยวงาน
+ * @param id  revisionId
+ */
 async function getAgency(id: string) {
   await http
     .get(config.API.activeOrganizationRootById(id))
     .then(async (res) => {
       const data = res.data.result;
-
-      agencyOptions.value = await data.map((x: any) => ({
+      agencyOptions.value = await data.map((x: DataAgency) => ({
         id: x.id,
         name: x.orgRootName,
       }));
-
       agencyFilter.value = store.rootId;
     })
     .catch((err) => {
@@ -128,13 +140,18 @@ async function getAgency(id: string) {
     });
 }
 
+/**
+ * function เรียกข้อมูลหน่ยวงานปจุบัน
+ * @param id  revisionId
+ */
 async function getAgencyPosition(id: string) {
   await http
     .get(config.API.keycloakPositionByid(id))
     .then(async (res) => {
       const data = res.data.result;
+
       const position = agencyOptions.value?.find(
-        (e: any) => e.id === data.rootId
+        (e: DataOption) => e.id === data.rootId
       );
       agencyFilter.value = position ? position.id : "";
     })
@@ -143,12 +160,19 @@ async function getAgencyPosition(id: string) {
     });
 }
 
+/**
+ *
+ * @param rootId id หน่วยงาน
+ * @param periodId id รอบการขึ้นเงินเดือน
+ * @param snap id รอบ
+ */
 async function fetchSalalyPeriod(
   rootId: string,
   periodId: string,
   snap: string
 ) {
   showLoader();
+  isLoad.value = false;
   const body = {
     rootId: rootId,
     salaryPeriodId: periodId,
@@ -157,12 +181,9 @@ async function fetchSalalyPeriod(
 
   await http
     .post(config.API.salaryListPeriodLatest, body)
-
     .then(async (res) => {
       const data = res.data.result;
-
       if (Object.values(data).includes(null)) {
-        console.log("มีค่า null ในคุณสมบัติบางอย่าง");
         isLoad.value = false;
       } else {
         data && store.fetchPeriodLatest(data, store.tabGroup);
@@ -177,6 +198,8 @@ async function fetchSalalyPeriod(
       hideLoader();
     });
 }
+
+/** function เปลี่ยนรอบการขั้นเงินเดือน*/
 async function onChangeRound() {
   await getSnap(roundFilter.value.shortCode);
   await getAgency(roundFilter.value.revisionId);
@@ -190,6 +213,7 @@ async function onChangeRound() {
   }
 }
 
+/** function เปลี่ยนรอบ*/
 async function onChangeSnap() {
   if (agencyFilter.value && roundFilter.value.id && snapFilter.value) {
     await fetchSalalyPeriod(
@@ -200,6 +224,7 @@ async function onChangeSnap() {
   }
 }
 
+/** function เปลี่ยนหน่วยงาน*/
 async function onChangeAgency() {
   if (agencyFilter.value && roundFilter.value.id && snapFilter.value) {
     await fetchSalalyPeriod(
@@ -210,8 +235,8 @@ async function onChangeAgency() {
   }
 }
 
-onMounted(() => {
-  getRound();
+onMounted(async () => {
+  await getRound();
 });
 </script>