diff --git a/src/modules/13_salary/components/SalaryLists/DialogFormEdit.vue b/src/modules/13_salary/components/SalaryLists/DialogFormEdit.vue
index 6f4ba3af2..b81c553c1 100644
--- a/src/modules/13_salary/components/SalaryLists/DialogFormEdit.vue
+++ b/src/modules/13_salary/components/SalaryLists/DialogFormEdit.vue
@@ -10,12 +10,17 @@ import config from "@/app.config";
 
 const $q = useQuasar();
 const modal = defineModel<boolean>("modal", { required: true });
-const amount = ref<number | null>(null);
+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, date2Thai, messageError } = mixin;
-
-
+const { dialogConfirm, success, messageError } = mixin;
 
 /*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
 function validateForm() {
@@ -24,25 +29,33 @@ function validateForm() {
 
 function close() {
   modal.value = false;
-  amount.value = null
+  amount.value = null;
 }
 
 function onSubmit() {
   dialogConfirm($q, () => {
-    const body = {
-      profileId: '????????????????????????????????????????????',
-      amount: amount.value,
-    };
-    http
-      .post(config.API.salaryPeriod() + `/change/amount`, body)
-      .then((res) => {
-        modal.value = false;
-        amount.value = null
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(() => {});
+    if (amount.value) {
+      const amountString: string = amount.value.toString();
+      const body = {
+        profileId: profileId.value,
+        amount:
+          typeof amount.value === "number"
+            ? amount.value
+            : Number(amountString.replace(/,/g, "")),
+      };
+      http
+        .post(config.API.salaryPeriod() + `/change/amount`, body)
+        .then(() => {
+          success($q, "บันทึกข้อมูลสำเร็จ");
+          props.fetchData?.();
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          close();
+        });
+    }
   });
 }
 
diff --git a/src/modules/13_salary/components/SalaryLists/DialogMoveGroup.vue b/src/modules/13_salary/components/SalaryLists/DialogMoveGroup.vue
index 067d8c050..b83e41eeb 100644
--- a/src/modules/13_salary/components/SalaryLists/DialogMoveGroup.vue
+++ b/src/modules/13_salary/components/SalaryLists/DialogMoveGroup.vue
@@ -6,18 +6,25 @@ import type { DataOption } from "@/modules/13_salary/interface/response/Main";
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 
+import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
+
 import config from "@/app.config";
 
 const $q = useQuasar();
+const store = useSalaryListSDataStore();
 const modal = defineModel<boolean>("modal", { required: true });
+const profileId = defineModel<string>("profileId", { required: true });
+const props = defineProps({
+  group: { type: String },
+  fetchData: {
+    type: Function,
+  },
+});
+
 const group = ref<string>("");
 const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
 const mixin = useCounterMixin();
-const { dialogConfirm, date2Thai, messageError } = mixin;
-const groupOp = ref<DataOption[]>([
-  { id: "g1", name: "กลุ่ม1" },
-  { id: "g2", name: "กลุ่ม2" },
-]);
+const { dialogConfirm, success, messageError, showLoader, hideLoader } = mixin;
 
 /*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
 function validateForm() {
@@ -31,20 +38,24 @@ function close() {
 
 function onSubmit() {
   dialogConfirm($q, () => {
+    showLoader();
     const body = {
-      profileId: "????????????????????????????????????????????",
+      profileId: profileId.value,
       groupId: group.value,
     };
     http
       .post(config.API.salaryPeriod() + `/change/group`, body)
-      .then((res) => {
-        modal.value = false;
-        group.value = "";
+      .then(() => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        props.fetchData?.();
       })
       .catch((e) => {
         messageError($q, e);
       })
-      .finally(() => {});
+      .finally(() => {
+        hideLoader();
+        close();
+      });
   });
 }
 
@@ -75,7 +86,7 @@ function inputEdit(val: boolean) {
             map-options
             option-label="name"
             option-value="id"
-            :options="groupOp"
+            :options="store.groupOp.filter((e) => e.name !== props.group)"
             :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 582168a41..25698e626 100644
--- a/src/modules/13_salary/components/SalaryLists/DialogMoveLevel.vue
+++ b/src/modules/13_salary/components/SalaryLists/DialogMoveLevel.vue
@@ -7,13 +7,22 @@ import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 
 import config from "@/app.config";
+import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
 
 const $q = useQuasar();
+const store = useSalaryListSDataStore();
 const modal = defineModel<boolean>("modal", { required: true });
+const profileId = defineModel<string>("profileId", { required: true });
 const type = ref<string>("");
 const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
 const mixin = useCounterMixin();
-const { dialogConfirm, date2Thai, messageError } = mixin;
+const { dialogConfirm, success, messageError, showLoader, hideLoader } = mixin;
+
+const props = defineProps({
+  fetchData: {
+    type: Function,
+  },
+});
 const typeOp = ref<DataOption[]>([
   { id: "NONE", name: "ไม่ได้เลื่อน" },
   { id: "HAFT", name: "ครึ่งขั้น" },
@@ -33,20 +42,24 @@ function close() {
 
 function onSubmit() {
   dialogConfirm($q, () => {
+    showLoader();
     const body = {
-      profileId: "????????????????????????????????????????????",
+      profileId: profileId.value,
       type: type.value,
     };
     http
       .post(config.API.salaryPeriod() + `/change/type`, body)
-      .then((res) => {
-        modal.value = false;
-        type.value = "";
+      .then(() => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        props.fetchData?.();
       })
       .catch((e) => {
         messageError($q, e);
       })
-      .finally(() => {});
+      .finally(() => {
+        close();
+        hideLoader();
+      });
   });
 }
 
@@ -77,7 +90,7 @@ function inputEdit(val: boolean) {
             map-options
             option-label="name"
             option-value="id"
-            :options="typeOp"
+            :options="typeOp.filter((e) => e.id !== store.tabType)"
             :rules="[(val) => !!val || `${'กรุณาเลือก ขั้น'}`]"
             lazy-rules
             hide-bottom-space
diff --git a/src/modules/13_salary/components/SalaryLists/TableTypeOther.vue b/src/modules/13_salary/components/SalaryLists/TableTypeOther.vue
index f60870d8b..7716dae31 100644
--- a/src/modules/13_salary/components/SalaryLists/TableTypeOther.vue
+++ b/src/modules/13_salary/components/SalaryLists/TableTypeOther.vue
@@ -12,10 +12,17 @@ import type {
 } from "@/modules/13_salary/interface/index/Main";
 import type { DataFilter } from "@/modules/13_salary/interface/index/SalaryList";
 
+/** importComponents*/
+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";
+
 /** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
+import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
 
 const $q = useQuasar();
+const store = useSalaryListSDataStore();
 const {
   date2Thai,
   dialogRemove,
@@ -119,34 +126,28 @@ const visibleColumns = ref<string[]>([
   "amountUse",
 ]);
 
-/** List Mune*/
-const itemMenu = ref<ItemsMenu[]>([
-  {
-    label: "แก้ไขเงินเดือน",
-    icon: "edit",
-    color: "edit",
-    type: "edit",
-  },
-  {
-    label: "ย้ายกลุ่ม",
-    icon: "mdi-account-arrow-right-outline",
-    color: "indigo-6",
-    type: "moveGroup",
-  },
-  {
-    label: "ย้ายขั้น",
-    icon: "mdi-account-arrow-left-outline",
-    color: "green-6",
-    type: "moveStep",
-  },
-  {
-    label: "ลบ",
-    icon: "delete",
-    color: "red",
-    type: "delete",
-  },
-]);
-const filter = ref<string>("");
+/** modal*/
+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 onClickEdit(id: string, amountSalary: number) {
+  profileId.value = id;
+  amount.value = amountSalary;
+  modalDialogForm.value = !modalDialogForm.value;
+}
+
+function onClickMovieGroup(id: string) {
+  profileId.value = id;
+  modalDialogMoveGroup.value = !modalDialogMoveGroup.value;
+}
+
+function onClickMoveLevel(id: string) {
+  profileId.value = id;
+  modalDialogMoveLeve.value = !modalDialogMoveLeve.value;
+}
 
 function onClickDelete(id: string) {
   dialogRemove($q, async () => {
@@ -232,7 +233,6 @@ watch(
     bordered
     :paging="true"
     dense
-    :filter="filter"
     :rows-per-page-options="[10, 25, 50, 100]"
     :visible-columns="visibleColumns"
     @update:pagination="updatePageSizePagination"
@@ -282,12 +282,20 @@ watch(
             <q-menu>
               <q-list dense style="min-width: 150px">
                 <q-item
-                  v-for="(item, index) in itemMenu"
+                  v-for="(item, index) in store.itemMenu"
                   :key="index"
                   clickable
                   v-close-popup
                   @click="
-                    item.type === 'delete' ? onClickDelete(props.row.id) : null
+                    item.type === 'edit'
+                      ? onClickEdit(props.row.id, props.row.amount)
+                      : item.type === 'moveGroup'
+                      ? onClickMovieGroup(props.row.id)
+                      : item.type === 'moveLevel'
+                      ? onClickMoveLevel(props.row.id)
+                      : item.type === 'delete'
+                      ? onClickDelete(props.row.id)
+                      : null
                   "
                 >
                   <q-item-section>
@@ -319,6 +327,25 @@ watch(
       @update:model-value="updatePagePagination()"
     ></q-pagination>
   </d-table>
+
+  <DialogFormEdit
+    v-model:modal="modalDialogForm"
+    v-model:profileId="profileId"
+    v-model:amount="amount"
+    :fetchData="props.updatePagination"
+  />
+  <DialogMoveGroup
+    v-model:modal="modalDialogMoveGroup"
+    v-model:profileId="profileId"
+    :group="store.tabGroup === 'group1' ? 'กลุ่ม1' : 'กลุ่ม2'"
+    :fetchData="props.updatePagination"
+  />
+  <DialogMoveLevel
+    v-model:modal="modalDialogMoveLeve"
+    v-model:profileId="profileId"
+    :fetchData="props.updatePagination"
+    :type="store.tabType"
+  />
 </template>
 
 <style scoped></style>
diff --git a/src/modules/13_salary/components/SalaryLists/TableTypePending.vue b/src/modules/13_salary/components/SalaryLists/TableTypePending.vue
index b49a53bc4..4081d582e 100644
--- a/src/modules/13_salary/components/SalaryLists/TableTypePending.vue
+++ b/src/modules/13_salary/components/SalaryLists/TableTypePending.vue
@@ -7,6 +7,11 @@ import type { QTableProps } from "quasar";
 import type { NewPagination } from "@/modules/13_salary/interface/index/Main";
 import type { DataFilter } from "@/modules/13_salary/interface/index/SalaryList";
 
+/** importComponents*/
+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";
+
 /** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
 import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
@@ -130,7 +135,13 @@ const props = defineProps({
   },
 });
 
-const filter = ref<string>("");
+/** modal*/
+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 onClickDelete() {
   dialogRemove($q, () => {
@@ -138,6 +149,22 @@ function onClickDelete() {
   });
 }
 
+function onClickEdit(id: string, amountSalary: number) {
+  profileId.value = id;
+  amount.value = amountSalary;
+  modalDialogForm.value = !modalDialogForm.value;
+}
+
+function onClickMovieGroup(id: string) {
+  profileId.value = id;
+  modalDialogMoveGroup.value = !modalDialogMoveGroup.value;
+}
+
+function onClickMoveLevel(id: string) {
+  profileId.value = id;
+  modalDialogMoveLeve.value = !modalDialogMoveLeve.value;
+}
+
 function updatePagePagination() {
   props.updatePagination?.();
 }
@@ -307,7 +334,17 @@ watch(
                   :key="index"
                   clickable
                   v-close-popup
-                  @click="item.type === 'delete' ? onClickDelete() : null"
+                  @click="
+                    item.type === 'edit'
+                      ? onClickEdit(props.row.id, props.row.amount)
+                      : item.type === 'moveGroup'
+                      ? onClickMovieGroup(props.row.id)
+                      : item.type === 'moveLevel'
+                      ? onClickMoveLevel(props.row.id)
+                      : item.type === 'delete'
+                      ? onClickDelete()
+                      : null
+                  "
                 >
                   <q-item-section>
                     <div class="row items-center">
@@ -340,6 +377,24 @@ watch(
       ></q-pagination>
     </template>
   </d-table>
+
+  <DialogFormEdit
+    v-model:modal="modalDialogForm"
+    v-model:profileId="profileId"
+    v-model:amount="amount"
+    :fetchData="props.updatePagination"
+  />
+  <DialogMoveGroup
+    v-model:modal="modalDialogMoveGroup"
+    v-model:profileId="profileId"
+    :group="store.tabGroup === 'group1' ? 'กลุ่ม1' : 'กลุ่ม2'"
+    :fetchData="props.updatePagination"
+  />
+  <DialogMoveLevel
+    v-model:modal="modalDialogMoveLeve"
+    v-model:profileId="profileId"
+    :fetchData="props.updatePagination"
+  />
 </template>
 
 <style scoped></style>
diff --git a/src/modules/13_salary/store/SalaryListsStore.ts b/src/modules/13_salary/store/SalaryListsStore.ts
index b36e2cc4e..9aede7f45 100644
--- a/src/modules/13_salary/store/SalaryListsStore.ts
+++ b/src/modules/13_salary/store/SalaryListsStore.ts
@@ -2,13 +2,20 @@ import { defineStore } from "pinia";
 import { ref } from "vue";
 
 /** importType*/
-import type { ItemsMenu } from "@/modules/13_salary/interface/index/Main";
+import type {
+  ItemsMenu,
+  DataOption,
+} from "@/modules/13_salary/interface/index/Main";
 import type { DataPeriodLatest } from "@/modules/13_salary/interface/response/SalaryList";
 
 export const useSalaryListSDataStore = defineStore("salaryListStore", () => {
   const titelPage = ref<string>("");
   const tabGroup = ref<string>("group1");
   const tabType = ref<string>("PENDING");
+  const groupOp = ref<DataOption[]>([
+    { id: "", name: "กลุ่ม1" },
+    { id: "", name: "กลุ่ม2" },
+  ]);
   const groupId = ref<string>("");
   /** List Menu*/
   const itemMenu = ref<ItemsMenu[]>([
@@ -28,7 +35,7 @@ export const useSalaryListSDataStore = defineStore("salaryListStore", () => {
       label: "ย้ายขั้น",
       icon: "mdi-account-arrow-left-outline",
       color: "green-6",
-      type: "moveStep",
+      type: "moveLevel",
     },
     {
       label: "ลบ",
@@ -46,6 +53,16 @@ export const useSalaryListSDataStore = defineStore("salaryListStore", () => {
         : data.period === "APR"
         ? "รอบเมษายน"
         : "รอบตุลาคม";
+    groupOp.value[0].id = data.group1id;
+    groupOp.value[1].id = data.group2id;
   }
-  return { titelPage, tabGroup, tabType, itemMenu, groupId, fetchPeriodLatest };
+  return {
+    titelPage,
+    tabGroup,
+    tabType,
+    itemMenu,
+    groupId,
+    fetchPeriodLatest,
+    groupOp,
+  };
 });