diff --git a/src/api/13_salary/api.salary.ts b/src/api/13_salary/api.salary.ts
index 4c106ad34..c99cdd567 100644
--- a/src/api/13_salary/api.salary.ts
+++ b/src/api/13_salary/api.salary.ts
@@ -49,5 +49,9 @@ export default {
   salaryFormula:()=>`${salaryFormula}`,
   salaryFormulaById:(id:string)=>`${salaryFormula}/${id}`,
   salaryEmployeePositionType:(key:string)=>`${salaryOrg}/pos/position?keyword=${key}&type=positionType`,
-  salaryEmployeeActive :()=>`${salary}/employee/active`
+  salaryEmployeeActive :()=>`${salary}/employee/active`,
+
+
+  salaryPeriodStatus:(type:string,periodId:string,rootId:string)=>`${salaryPeriod}/${type}/approve/${periodId}/${rootId}`,
+  salaryPeriodStatusComment:(type:string,periodId:string,rootId:string)=>`${salaryPeriod}/${type}/comment/${periodId}/${rootId}`
 };
diff --git a/src/modules/13_salary/components/SalaryLists/ProcessStep.vue b/src/modules/13_salary/components/SalaryLists/ProcessStep.vue
index ce53168f7..6bda13d2c 100644
--- a/src/modules/13_salary/components/SalaryLists/ProcessStep.vue
+++ b/src/modules/13_salary/components/SalaryLists/ProcessStep.vue
@@ -1,20 +1,25 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref,defineProps } from "vue";
 import { useQuasar } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
 import DialogPopupReason from "@/components/Dialogs/PopupReason.vue"; //หมายเหตุ
-
+import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
+const store = useSalaryListSDataStore();
 import { useCounterMixin } from "@/stores/mixin";
 
 const $q = useQuasar(); //ใช้ noti quasar
 const mixin = useCounterMixin();
 const { messageError, dialogConfirm, showLoader, hideLoader, success } = mixin;
-
+const type = ref<string>('')
 const sendStep = ref<number>(1);
 const fileUpload = ref<any>(null);
 const document = ref<string>("");
+const props = defineProps({
+  rootId:String,
+  periodId:String
+})
 /**
  * function อัปโหลดไฟล์เจ้าหน้าที่
  * @param event file
@@ -47,10 +52,22 @@ async function uploadFile(event: any) {
   );
 }
 
-function saveReccommend() {
+function saveReccommend(reason:string) {
   dialogConfirm(
     $q,
     async () => {
+      showLoader()
+      http
+      .put(config.API.salaryPeriodStatusComment(type.value, props.periodId ? props.periodId:'', props.rootId ? props.rootId:''),{
+        titleRecommend:reason
+      })
+      .then((res)=>{
+        console.log(res)
+      }).catch((e)=>{
+        messageError($q,e)
+      }).finally(()=>{
+        hideLoader()
+      })
       sendStep.value = sendStep.value + 1;
       modalRecommend.value = false;
     },
@@ -59,10 +76,20 @@ function saveReccommend() {
   );
 }
 
-function sendToDirector(msg: string) {
+function sendToDirector(msg: string,type:string) {
   dialogConfirm(
     $q,
     async () => {
+      showLoader()
+      http
+      .get(config.API.salaryPeriodStatus(type, props.periodId ? props.periodId:'', props.rootId ? props.rootId:''))
+      .then((res)=>{
+        console.log(res)
+      }).catch((e)=>{
+        messageError($q,e)
+      }).finally(()=>{
+        hideLoader()
+      })
       sendStep.value = sendStep.value == 3 ? 6 : sendStep.value + 1;
     },
     "ยืนยันการ" + msg,
@@ -72,9 +99,10 @@ function sendToDirector(msg: string) {
 
 const modalRecommend = ref<boolean>(false);
 const titleRecommend = ref<string>("");
-function sendAndRecommend(title: string) {
+function sendAndRecommend(title: string,typeOrder:string) {
   modalRecommend.value = true;
   titleRecommend.value = title;
+  type.value = typeOrder
 }
 </script>
 
@@ -128,7 +156,7 @@ function sendAndRecommend(title: string) {
           unelevated
           color="public"
           label="ส่งเอกสารให้ ผอ. ตรวจสอบ"
-          @click="sendToDirector('ส่งเอกสารให้ ผอ. ตรวจสอบ')"
+          @click="sendToDirector('ส่งเอกสารให้ ผอ. ตรวจสอบ','officer')"
         />
 
         <!-- ผอ. หน่วยงานทำการยืนยันและส่งให้ สกจ. -->
@@ -137,7 +165,7 @@ function sendAndRecommend(title: string) {
           unelevated
           color="public"
           label="ยืนยันและส่งเอกสารให้ สกจ."
-          @click="sendToDirector('ยืนยันและส่งเอกสารให้ สกจ.')"
+          @click="sendToDirector('ยืนยันและส่งเอกสารให้ สกจ.','head')"
         />
 
         <!-- สกจ. ตรวจสอบเอกสารและข้อมูลรายการเงินเดือนที่แต่ละหน่วยงานส่งมา ไม่มีปรับโควต้า -->
@@ -146,7 +174,7 @@ function sendAndRecommend(title: string) {
           unelevated
           color="green"
           label="ยืนยันการตรวจสอบ"
-          @click="sendToDirector('ยืนยันการตรวจสอบ')"
+          @click="sendToDirector('ยืนยันการตรวจสอบ','owner')"
         />
 
         <!-- สกจ. ตรวจสอบเอกสารและข้อมูลรายการเงินเดือนที่แต่ละหน่วยงานส่งมา มีปรับโควต้า -->
@@ -156,7 +184,7 @@ function sendAndRecommend(title: string) {
           unelevated
           color="warning"
           label="ส่งคำแนะนำให้ ผอ. ตรวจสอบ"
-          @click="sendAndRecommend('ส่งคำแนะนำให้ ผอ. ตรวจสอบ')"
+          @click="sendAndRecommend('ส่งคำแนะนำให้ ผอ. ตรวจสอบ','owner')"
         />
 
         <!-- ผอ.หน่วยงานส่งคำแนะนำให้การเจ้าหน้าที่หน่วยงาน -->
@@ -165,7 +193,7 @@ function sendAndRecommend(title: string) {
           unelevated
           color="public"
           label="ส่งคำแนะนำให้การเจ้าหน้าที่หน่วยงาน"
-          @click="sendAndRecommend('ส่งคำแนะนำให้ ผอ. ตรวจสอบ')"
+          @click="sendAndRecommend('ส่งคำแนะนำให้ ผอ. ตรวจสอบ','head')"
         />
 
         <q-btn
diff --git a/src/modules/13_salary/views/salaryLists.vue b/src/modules/13_salary/views/salaryLists.vue
index 11228afba..86d7e35f4 100644
--- a/src/modules/13_salary/views/salaryLists.vue
+++ b/src/modules/13_salary/views/salaryLists.vue
@@ -322,7 +322,6 @@ onMounted(async () => {
       รายการเลื่อนเงินเดือนข้าราชการฯ
     </div>
     <q-space />
-
     <q-select
       v-model="roundFilter"
       label="รอบการขึ้นเงินเดือน"
@@ -422,7 +421,7 @@ onMounted(async () => {
     bordered
     class="row col-12 q-mt-xs"
   >
-    <ProcessStep />
+    <ProcessStep :periodId="roundFilter.id" :rootId="agencyFilter"/>
   </q-card>
 
   <!-- </q-card> -->