diff --git a/src/api/02_organizational/api.organization.ts b/src/api/02_organizational/api.organization.ts
index be30dbfae..be7d27acd 100644
--- a/src/api/02_organizational/api.organization.ts
+++ b/src/api/02_organizational/api.organization.ts
@@ -6,6 +6,7 @@ const orgProfile = `${env.API_URI}/org/profile`;
 const orgEmployeePos = `${env.API_URI}/org/employee/pos`;
 const orgAct = `${env.API_URI}/org/act`;
 const orgPosAct = `${env.API_URI}/org/pos/act`;
+const workflow = `${env.API_URI}/org/workflow`;
 
 export default {
   keycloakPosition: () => `${organization}/profile/keycloak/position`,
@@ -134,4 +135,9 @@ export default {
   orgPermissionsSys: `${organization}/permission`,
 
   checkIsOfficer: (id: string) => `${organization}/check/child1/${id}`,
+
+  /**
+   * workflow
+   */
+  workflow: `${workflow}/`,
 };
diff --git a/src/components/Workflow/DialogApprove.vue b/src/components/Workflow/DialogApprove.vue
index f075cc475..9e54b0058 100644
--- a/src/components/Workflow/DialogApprove.vue
+++ b/src/components/Workflow/DialogApprove.vue
@@ -1,34 +1,90 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import { useQuasar } from "quasar";
 
 import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 import DialogHeader from "@/components/DialogHeader.vue";
 
 const $q = useQuasar();
-const { dialogConfirm } = useCounterMixin();
+const { dialogConfirm, showLoader, hideLoader, messageError } =
+  useCounterMixin();
 
 const modal = defineModel<boolean>("modal", { required: true });
+const { stateId } = defineProps({
+  stateId: { type: String, require: true },
+});
 
-const isAcknowledge = ref<boolean>(false);
-const isConsider = ref<boolean>(true);
-const isComment = ref<boolean>(true);
+const isAcceptSetting = ref<boolean>(false);
+const isApproveSetting = ref<boolean>(false);
+const isReasonSetting = ref<boolean>(false);
 
-const acknowledge = ref<boolean>(false);
-const consider = ref<string>("");
-const comment = ref<string>("");
+const isAccept = ref<boolean>(false);
+const isApprove = ref<string>("");
+const reason = ref<string>("");
+
+async function fetchData() {
+  showLoader();
+  await http
+    .post(config.API.workflow + `comment-state-user`, { stateId: stateId })
+    .then(async (res) => {
+      const data = res.data.result;
+      isAcceptSetting.value = data.isAcceptSetting;
+      isApproveSetting.value = data.isApproveSetting;
+      isReasonSetting.value = data.isReasonSetting;
+
+      isAccept.value = data.isAccept;
+      isApprove.value = data.isApprove ? "approve" : "";
+      reason.value = data.reason;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
 
 function onSubmit() {
-  dialogConfirm($q, () => {});
+  dialogConfirm($q, async () => {
+    showLoader();
+    await http
+      .post(config.API.workflow + `comment`, {
+        stateId: stateId,
+        isAccept: isAcceptSetting.value ? isAccept.value : undefined,
+        isApprove: isApproveSetting.value
+          ? isApprove.value === "approve"
+            ? true
+            : false
+          : undefined,
+        reason: isReasonSetting.value ? reason.value : undefined,
+      })
+      .then(async () => {
+        onCloseModal();
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
 }
 
 function onCloseModal() {
   modal.value = false;
-  acknowledge.value = false;
-  consider.value = "";
-  comment.value = "";
+  isAccept.value = false;
+  isApprove.value = "";
+  reason.value = "";
 }
+
+watch(modal, (val) => {
+  if (val) {
+    fetchData();
+  }
+});
 </script>
 
 <template>
@@ -43,23 +99,23 @@ function onCloseModal() {
 
         <q-card-section>
           <div class="q-gutter-xs">
-            <div v-if="isAcknowledge">
+            <div v-if="isAcceptSetting">
               <q-checkbox
                 keep-color
                 color="primary"
                 dense
-                v-model="acknowledge"
+                v-model="isAccept"
                 label="รับทราบ"
               />
             </div>
-            <div v-if="!isAcknowledge && isConsider">
+            <div v-if="!isAcceptSetting && isApproveSetting">
               <div class="text-weight-bold">พิจารณา (อนุมัติ/ไม่อนุมัติ)</div>
               <div class="q-pa-sm q-gutter-sm">
                 <q-radio
                   dense
                   keep-color
                   color="primary"
-                  v-model="consider"
+                  v-model="isApprove"
                   label="อนุมัติ"
                   val="approve"
                 />
@@ -67,14 +123,14 @@ function onCloseModal() {
                   dense
                   keep-color
                   color="primary"
-                  v-model="consider"
+                  v-model="isApprove"
                   label="ไม่อนุมัติ"
                   val="reject"
                 />
               </div>
             </div>
 
-            <div v-if="!isAcknowledge && isComment">
+            <div v-if="!isAcceptSetting && isReasonSetting">
               <div class="text-weight-bold">แสดงความเห็นในเอกสาร</div>
               <div class="q-pa-sm q-gutter-sm">
                 <div class="col-12">
@@ -82,7 +138,7 @@ function onCloseModal() {
                     dense
                     outlined
                     label="ความเห็น"
-                    v-model="comment"
+                    v-model="reason"
                     type="textarea"
                     lazy-rules
                     :rules="[
@@ -103,7 +159,7 @@ function onCloseModal() {
             label="บันทึก"
             color="public"
             type="submit"
-            :disable="!isAcknowledge && !isConsider && !isComment"
+            :disable="!isAcceptSetting && !isApproveSetting && !isReasonSetting"
           >
           </q-btn>
         </q-card-actions>
diff --git a/src/components/Workflow/DialogSelectPerson.vue b/src/components/Workflow/DialogSelectPerson.vue
index d392c6215..b49d61687 100644
--- a/src/components/Workflow/DialogSelectPerson.vue
+++ b/src/components/Workflow/DialogSelectPerson.vue
@@ -3,15 +3,22 @@ import { ref, watch } from "vue";
 import { useQuasar } from "quasar";
 
 import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 import type { QTableProps } from "quasar";
 
 import DialogHeader from "@/components/DialogHeader.vue";
 
 const $q = useQuasar();
-const { dialogConfirm } = useCounterMixin();
+const { dialogConfirm, showLoader, hideLoader, messageError } =
+  useCounterMixin();
 
 const modal = defineModel<boolean>("modal", { required: true });
+const { stateId, fetchData } = defineProps({
+  stateId: { type: String, require: true },
+  fetchData: { type: Function, require: true },
+});
 
 /** table*/
 const selected = ref<any[]>([]);
@@ -62,14 +69,34 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
-const isAcknowledge = ref<boolean>(false);
-const isConsider = ref<boolean>(false);
-const isComment = ref<boolean>(false);
+const isAcceptSetting = ref<boolean>(false);
+const isApproveSetting = ref<boolean>(false);
+const isReasonSetting = ref<boolean>(false);
 
 function fetchLists() {}
 
 function onSubmit() {
-  dialogConfirm($q, () => {});
+  dialogConfirm($q, async () => {
+    showLoader();
+    await http
+      .post(config.API.workflow + `add-step`, {
+        stateId: stateId,
+        profileId: selected.value[0].id,
+        isAcceptSetting: isAcceptSetting.value,
+        isApproveSetting: isApproveSetting.value,
+        isReasonSetting: isReasonSetting.value,
+      })
+      .then(async () => {
+        await fetchData?.();
+        onCloseModal();
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
 }
 
 function onCloseModal() {
@@ -146,26 +173,28 @@ watch(modal, (val) => {
                 keep-color
                 color="primary"
                 dense
-                v-model="isAcknowledge"
+                v-model="isAcceptSetting"
                 label="ให้เลือกรับทราบ"
-                @update:model-value="(isConsider = false), (isComment = false)"
+                @update:model-value="
+                  (isApproveSetting = false), (isReasonSetting = false)
+                "
               />
             </div>
-            <div v-if="!isAcknowledge">
+            <div v-if="!isAcceptSetting">
               <q-checkbox
                 dense
                 keep-color
                 color="primary"
-                v-model="isConsider"
+                v-model="isApproveSetting"
                 label="ให้เลือกพิจารณา (อนุมัติ/ไม่อนุมัติ)"
               />
             </div>
-            <div v-if="!isAcknowledge">
+            <div v-if="!isAcceptSetting">
               <q-checkbox
                 dense
                 keep-color
                 color="primary"
-                v-model="isComment"
+                v-model="isReasonSetting"
                 label="ให้แสดงความเห็นในเอกสาร"
               />
             </div>
@@ -181,7 +210,7 @@ watch(modal, (val) => {
             type="submit"
             :disable="
               selected.length === 0 ||
-              (!isAcknowledge && !isConsider && !isComment)
+              (!isAcceptSetting && !isApproveSetting && !isReasonSetting)
             "
           >
           </q-btn>
diff --git a/src/components/Workflow/Main.vue b/src/components/Workflow/Main.vue
index ef2ed51ec..5197c3241 100644
--- a/src/components/Workflow/Main.vue
+++ b/src/components/Workflow/Main.vue
@@ -3,74 +3,100 @@ import { onMounted, ref } from "vue";
 import { useQuasar } from "quasar";
 
 import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 import DialogSelectPerson from "@/components/Workflow/DialogSelectPerson.vue";
 import DialogApprove from "@/components/Workflow/DialogApprove.vue";
 
 const $q = useQuasar();
-const { dialogConfirm } = useCounterMixin();
+const { dialogConfirm, showLoader, hideLoader, messageError } =
+  useCounterMixin();
 
 const { id, sysName } = defineProps({
   id: { type: String, require: true },
   sysName: { type: String, require: true },
 });
 
-const state = ref<number>(1);
-const isChangeState = ref<boolean>(false);
-const isOperate = ref<boolean>(false);
+const stateId = ref<string>(""); //id state ปัจุบัน
+const state = ref<number>(2); //state ปัจุบัน
+
+const isChangeState = ref<boolean>(false); //ส่งไปยังผู้บังคับบัญชา/ผู้มีอำนาจ
+const isOperate = ref<boolean>(true); //เปลี่ยนสถานะ (state) เอกสารได้
+const isView = ref<boolean>(true); //ดูเอกสารได้
+const isUpdate = ref<boolean>(true); //แก้ไขเอกสารได้
+const isDelete = ref<boolean>(true); //ลบเอกสารได้ (ถ้ามี)
+const isCancel = ref<boolean>(true); //ลบเอกสารได้ (ถ้ามี)
 
-const rowsOperate = ref<any[]>([
-  {
-    fullName: "ชื่อนาม - สกุล",
-    comment: "ความเห็น",
-    position: " บริหาร - ต้น ",
-    status: "อนุมัติ",
-  },
-]);
 const modalSelectPerson = ref<boolean>(false);
 const modalApprove = ref<boolean>(false);
 
-const itemState = ref<any[]>([
-  {
-    stateNo: 1,
-    stateName: "Darft",
-  },
-  {
-    stateNo: 2,
-    stateName: "Operate",
-  },
-  {
-    stateNo: 3,
-    stateName: "Finish",
-  },
-]);
+const itemState = ref<any[]>([]);
 
-function fetchData() {
+async function fetchData() {
   console.log(id, sysName);
-  const data = {
-    stateNo: 1,
-    step: 1,
-    can_view: true,
-    can_update: true,
-    can_operate: true,
-    can_change_state: true,
-    can_delete: false,
-    can_cancel: false,
-  };
-
-  state.value = data.stateNo;
-  isChangeState.value = data.can_change_state;
-  isOperate.value = data.can_operate;
+  await http
+    .post(config.API.workflow + `check-state-all`, {
+      refId: id,
+      system: sysName,
+    })
+    .then(async (res) => {
+      const data = await res.data.result;
+      itemState.value = data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
 }
 
-function onConfirmDraft() {
-  dialogConfirm($q, () => {
-    state.value++;
+async function fetchCheckState() {
+  await http
+    .post(config.API.workflow + `check-user-now`, {
+      refId: id,
+      system: sysName,
+    })
+    .then(async (res) => {
+      const data = await res.data.result;
+      stateId.value = data.stateId;
+      state.value = data.stateNo;
+      isChangeState.value = data.can_change_state;
+      isOperate.value = data.can_operate;
+      isView.value = data.can_view;
+      isUpdate.value = data.can_update;
+      isDelete.value = data.can_delete;
+      isCancel.value = data.can_cancel;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+function onChangeState() {
+  dialogConfirm($q, async () => {
+    showLoader();
+    await http
+      .post(config.API.workflow + `state-next`, {
+        refId: id,
+        system: sysName,
+      })
+      .then(async () => {
+        await Promise.all([fetchData(), fetchCheckState()]);
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
   });
 }
 
-onMounted(() => {
-  fetchData();
+async function fetchAllFunction() {
+  await Promise.all([fetchData(), fetchCheckState()]);
+}
+
+onMounted(async () => {
+  await fetchAllFunction();
 });
 </script>
 
@@ -103,14 +129,11 @@ onMounted(() => {
             :color="state < index + 1 ? 'grey-4' : ''"
           >
             <!-- Darft -->
-            <div
-              class="row q-col-gutter-sm"
-              v-if="step.stateName === 'Darft' && state === 1"
-            >
+            <div class="row q-col-gutter-sm" v-if="state === 1">
               <div>
                 <q-btn
                   v-if="isChangeState"
-                  @click.prevent="onConfirmDraft"
+                  @click.prevent="onChangeState"
                   label="Next Step"
                   color="primary"
                 />
@@ -120,31 +143,44 @@ onMounted(() => {
             <!-- Operate -->
             <div
               class="q-col-gutter-sm"
-              v-if="step.stateName === 'Operate' && state > 1"
+              v-if="index > 0 && index < itemState.length - 1 && state > index"
             >
-              <div>
+              <div v-if="step.stateUserComments.length !== 0">
                 <q-list bordered separator style="min-width: 20vw">
-                  <q-item v-for="(item, index) in rowsOperate" :key="index">
+                  <q-item
+                    v-for="(item, index) in step.stateUserComments"
+                    :key="index"
+                  >
                     <q-item-section>
                       <q-item-label
-                        >{{ item.fullName }}
-                        {{ `(${item.position})` }}</q-item-label
-                      >
+                        >{{ item.createdFullName }}
+                        <!-- {{ `(${item.position})` }} -->
+                      </q-item-label>
                       <q-item-label caption lines="2">{{
-                        item.comment
+                        item.isReasonSetting ? item.reason : ""
                       }}</q-item-label>
                     </q-item-section>
 
                     <q-item-section side top>
                       <q-item-label class="text-green">
-                        {{ item.status }}</q-item-label
+                        {{
+                          item.isAcceptSetting
+                            ? item.isAccept
+                              ? "รับทราบ"
+                              : ""
+                            : item.isApproveSetting
+                            ? item.isApprove
+                              ? "อนุมันติ"
+                              : ""
+                            : ""
+                        }}</q-item-label
                       >
                     </q-item-section>
                   </q-item>
                 </q-list>
               </div>
 
-              <div v-if="isOperate && state === 2">
+              <div v-if="isOperate">
                 <q-btn
                   @click.prevent="modalSelectPerson = true"
                   label="ส่งไปผู้บังคับบัญชา/ผู้มีอำนาจ"
@@ -152,9 +188,9 @@ onMounted(() => {
                 />
               </div>
 
-              <div v-if="isChangeState && state === 2">
+              <div v-if="isChangeState">
                 <q-btn
-                  @click.prevent="onConfirmDraft"
+                  @click.prevent="onChangeState"
                   label="Next Step"
                   color="primary"
                 />
@@ -166,7 +202,11 @@ onMounted(() => {
     </q-card-section>
   </q-card>
 
-  <DialogSelectPerson v-model:modal="modalSelectPerson" />
+  <DialogSelectPerson
+    v-model:modal="modalSelectPerson"
+    :state-id="stateId"
+    :fetch-data="fetchAllFunction"
+  />
 
-  <DialogApprove v-model:modal="modalApprove" />
+  <DialogApprove v-model:modal="modalApprove" :state-id="stateId" />
 </template>
diff --git a/src/modules/05_placement/components/Transfer/TransferDetail.vue b/src/modules/05_placement/components/Transfer/TransferDetail.vue
index c9e4fdb21..d9f921005 100644
--- a/src/modules/05_placement/components/Transfer/TransferDetail.vue
+++ b/src/modules/05_placement/components/Transfer/TransferDetail.vue
@@ -686,7 +686,7 @@ onMounted(async () => {
     </q-card>
 
     <!-- Workflow -->
-    <WorkFlow :id="transferId" :sys-name="'transfer'" />
+    <WorkFlow :id="transferId" :sys-name="'PLACEMENT_TRANSFER'" />
   </div>
 </template>