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..88c80b3ae 100644
--- a/src/components/Workflow/DialogSelectPerson.vue
+++ b/src/components/Workflow/DialogSelectPerson.vue
@@ -3,26 +3,26 @@ 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[]>([]);
-const rows = ref<any[]>([
-  {
-    fullName: "นายศรัณย์ ศิลาดี",
-    position: "นักบริหาร",
-    posType: "บริหาร(สูง)",
-    organization: "",
-  },
-]);
+const rows = ref<any[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "fullName",
@@ -30,6 +30,9 @@ const columns = ref<QTableProps["columns"]>([
     label: "ชื่อ-นามสกุล",
     sortable: true,
     field: "fullName",
+    format(val, row) {
+      return `${row.prefix}${row.firstName} ${row.lastName}`;
+    },
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -42,15 +45,15 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-  {
-    name: "posType",
-    align: "left",
-    label: "ประเภทตำแหน่ง",
-    sortable: true,
-    field: "posType",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
+  // {
+  //   name: "posType",
+  //   align: "left",
+  //   label: "ประเภทตำแหน่ง",
+  //   sortable: true,
+  //   field: "posType",
+  //   headerStyle: "font-size: 14px",
+  //   style: "font-size: 14px",
+  // },
   {
     name: "organization",
     align: "left",
@@ -62,14 +65,47 @@ 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() {}
+async function fetchLists() {
+  showLoader();
+  await http
+    .get(config.API.workflow + `commander`)
+    .then(async (res) => {
+      rows.value = res.data.result;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
 
 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 +182,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 +219,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..35703d950 100644
--- a/src/components/Workflow/Main.vue
+++ b/src/components/Workflow/Main.vue
@@ -3,79 +3,112 @@ 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 type { Permission } from "@/interface/index/workflow/Main";
+import type { DataListState } from "@/interface/response/workflow/Main";
 
 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>(1); //state ปัจุบัน
+
+const isPermission = ref<boolean>(true); //การเข้าถึง Workflow
+const permission = ref<Permission>({
+  isChangeState: false, //ส่งไปยังผู้บังคับบัญชา/ผู้มีอำนาจ
+  isOperate: false, //เปลี่ยนสถานะ (state) เอกสารได้
+  isView: false, //ดูเอกสารได้
+  isUpdate: false, //แก้ไขเอกสารได้
+  isDelete: false, //ลบเอกสารได้ (ถ้ามี)
+  isCancel: false, //ลบเอกสารได้ (ถ้ามี)
+});
+const itemState = ref<DataListState[]>([]);
 
-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",
-  },
-]);
-
-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;
+async function fetchCheckState() {
+  await http
+    .post(config.API.workflow + `check-user-now`, {
+      refId: id,
+      system: sysName,
+    })
+    .then(async (res) => {
+      await fetchData();
+      const data = await res.data.result;
+      stateId.value = data.stateId;
+      state.value = data.stateNo === 4 ? 5 : data.stateNo;
+      permission.value = {
+        isChangeState: data.can_change_state,
+        isOperate: data.can_operate,
+        isView: data.can_view,
+        isUpdate: data.can_update,
+        isDelete: data.can_delete,
+        isCancel: data.can_cancel,
+      };
+    })
+    .catch(() => {
+      isPermission.value = false;
+    });
 }
 
-function onConfirmDraft() {
-  dialogConfirm($q, () => {
-    state.value++;
+async function fetchData() {
+  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 onChangeState() {
+  dialogConfirm($q, async () => {
+    showLoader();
+    await http
+      .post(config.API.workflow + `state-next`, {
+        refId: id,
+        system: sysName,
+      })
+      .then(async () => {
+        await fetchCheckState();
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
   });
 }
 
-onMounted(() => {
-  fetchData();
+onMounted(async () => {
+  await fetchCheckState();
+});
+
+defineExpose({
+  permission,
 });
 </script>
 
 <template>
-  <q-card bordered class="row col-12">
+  <q-card bordered class="row col-12" v-if="isPermission">
     <div class="bg-grey-1 q-pa-sm col-12 row items-center">
       <div class="q-pl-sm text-weight-bold text-dark">Workflow</div>
       <q-space />
@@ -103,14 +136,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 && index === 0">
               <div>
                 <q-btn
-                  v-if="isChangeState"
-                  @click.prevent="onConfirmDraft"
+                  v-if="permission.isChangeState"
+                  @click.prevent="onChangeState"
                   label="Next Step"
                   color="primary"
                 />
@@ -120,31 +150,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
-                      >
+                      <q-item-label>
+                        {{ `${item.prefix}${item.firstName} ${item.lastName}` }}
+                        <!-- {{ `(${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="permission.isOperate && state === index + 1">
                 <q-btn
                   @click.prevent="modalSelectPerson = true"
                   label="ส่งไปผู้บังคับบัญชา/ผู้มีอำนาจ"
@@ -152,9 +195,9 @@ onMounted(() => {
                 />
               </div>
 
-              <div v-if="isChangeState && state === 2">
+              <div v-if="permission.isChangeState && state === index + 1">
                 <q-btn
-                  @click.prevent="onConfirmDraft"
+                  @click.prevent="onChangeState"
                   label="Next Step"
                   color="primary"
                 />
@@ -166,7 +209,11 @@ onMounted(() => {
     </q-card-section>
   </q-card>
 
-  <DialogSelectPerson v-model:modal="modalSelectPerson" />
+  <DialogSelectPerson
+    v-model:modal="modalSelectPerson"
+    :state-id="stateId"
+    :fetch-data="fetchCheckState"
+  />
 
-  <DialogApprove v-model:modal="modalApprove" />
+  <DialogApprove v-model:modal="modalApprove" :state-id="stateId" />
 </template>
diff --git a/src/interface/index/Main.ts b/src/interface/index/Main.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/interface/index/workflow/Main.ts b/src/interface/index/workflow/Main.ts
new file mode 100644
index 000000000..ae0e81a3d
--- /dev/null
+++ b/src/interface/index/workflow/Main.ts
@@ -0,0 +1,10 @@
+interface Permission {
+  isChangeState: boolean; //ส่งไปยังผู้บังคับบัญชา/ผู้มีอำนาจ
+  isOperate: boolean; //เปลี่ยนสถานะ (state) เอกสารได้
+  isView: boolean; //ดูเอกสารได้
+  isUpdate: boolean; //แก้ไขเอกสารได้
+  isDelete: boolean; //ลบเอกสารได้ (ถ้ามี)
+  isCancel: boolean; //ลบเอกสารได้ (ถ้ามี)
+}
+
+export type { Permission };
diff --git a/src/interface/response/workflow/Main.ts b/src/interface/response/workflow/Main.ts
new file mode 100644
index 000000000..99b0da399
--- /dev/null
+++ b/src/interface/response/workflow/Main.ts
@@ -0,0 +1,39 @@
+interface DataListState {
+  stateId: string;
+  stateName: string;
+  stateNo: number;
+  stateUserComments: StateUserComments[];
+}
+
+interface StateUserComments {
+  createdAt: string;
+  createdFullName: string;
+  createdUserId: string;
+  id: string;
+  isAccept: boolean | null;
+  isAcceptSetting: boolean | null;
+  isApprove: boolean | null;
+  isApproveSetting: boolean | null;
+  isReasonSetting: boolean | null;
+  lastUpdateFullName: string;
+  lastUpdateUserId: string;
+  lastUpdatedAt: string;
+  order: null;
+  profileId: string;
+  reason: string;
+  stateId: string;
+  firstName: string;
+  lastName: string;
+  prefix: string;
+}
+
+interface DataCommander {
+  firstName: string;
+  id: string;
+  lastName: string;
+  orgRoot: string;
+  position: string;
+  prefix: string;
+}
+
+export type { DataListState, DataCommander };
diff --git a/src/modules/02_organization/components/TreeMain.vue b/src/modules/02_organization/components/TreeMain.vue
index b8ad0c228..cfb53cde5 100644
--- a/src/modules/02_organization/components/TreeMain.vue
+++ b/src/modules/02_organization/components/TreeMain.vue
@@ -436,8 +436,15 @@ watch(
               class="row col-12 text-dark items-center q-py-xs q-pl-sm rounded-borders my-list"
             >
               <div>
-                <div class="text-weight-medium">
+                <div
+                  :class="
+                    prop.node.isOfficer
+                      ? 'text-weight-medium text-blue'
+                      : 'text-weight-medium'
+                  "
+                >
                   {{ prop.node.orgTreeName }}
+                  {{ prop.node.isOfficer ? "(สกจ.)" : "" }}
                 </div>
                 <div class="text-weight-light text-grey-8">
                   {{ prop.node.orgCode == null ? null : prop.node.orgCode }}
diff --git a/src/modules/02_organization/components/TreeTable.vue b/src/modules/02_organization/components/TreeTable.vue
index fc9fca910..142c4f773 100644
--- a/src/modules/02_organization/components/TreeTable.vue
+++ b/src/modules/02_organization/components/TreeTable.vue
@@ -28,7 +28,6 @@ import DialogMovePos from "@/modules/02_organization/components/DialogMovePos.vu
 import DialogHistoryPos from "@/modules/02_organization/components/DialogHistoryPos.vue"; // ประวัติตำแหน่ง
 import DialogSelectPerson from "@/modules/02_organization/components/DialogSelectPerson.vue"; // เลือกคนครอง
 import DialogSuccession from "@/modules/02_organization/components/DialogSuccession.vue"; // สืบทอดตำแหน่ง
-import DialogCreateCommandORG from "@/modules/18_command/components/DialogCreateCommandORG.vue";
 
 const $q = useQuasar();
 const store = useOrganizational();
@@ -252,7 +251,6 @@ const columnsExpand = ref<QTableProps["columns"]>([
 ]);
 
 const dialogPosition = ref<boolean>(false); //ตำแหน่ง
-const modalCommand = ref<boolean>(false); //สร้างคำสั่ง
 
 /**
  * function  openPopup เพิ่มอัตรากำลัง
@@ -542,18 +540,6 @@ watch(
         <q-tooltip>ดาวน์โหลด</q-tooltip>
       </q-btn>
 
-      <q-btn
-        v-if="store.typeOrganizational === 'draft'"
-        flat
-        round
-        dense
-        color="add"
-        icon="mdi-account-arrow-right"
-        @click.prevent="modalCommand = true"
-      >
-        <q-tooltip>ส่งไปออกคำสั่ง</q-tooltip>
-      </q-btn>
-
       <q-space />
       <div class="row q-gutter-md">
         <div>
@@ -905,12 +891,6 @@ watch(
 
   <!-- สืบทอดตำแหน่ง -->
   <DialogSuccession v-model:modal="modalDialogSuccession" :rowId="rowId" />
-
-  <!-- dialog สร้างคำสั่ง -->
-  <DialogCreateCommandORG
-    v-model:modal="modalCommand"
-    command-type-code="C-PM-38"
-  />
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/modules/02_organization/interface/response/organizational.ts b/src/modules/02_organization/interface/response/organizational.ts
index 34b1dc941..4bb9717f8 100644
--- a/src/modules/02_organization/interface/response/organizational.ts
+++ b/src/modules/02_organization/interface/response/organizational.ts
@@ -35,6 +35,7 @@ interface OrgTree {
   orgTreePhoneIn: string;
   orgTreeFax: string;
   orgRevisionId: string;
+  isOfficer: boolean;
   children: OrgTree[];
 }
 
diff --git a/src/modules/02_organization/views/main.vue b/src/modules/02_organization/views/main.vue
index 820e1629c..a5eadf47f 100644
--- a/src/modules/02_organization/views/main.vue
+++ b/src/modules/02_organization/views/main.vue
@@ -22,6 +22,7 @@ import StructureView from "@/modules/02_organization/components/StructureMain.vu
 import StructureOrgMain from "@/modules/02_organization/components/StructureOrgMain.vue";
 import DialogFormNewStructure from "@/modules/02_organization/components/DialogNewStructure.vue";
 import DialogDateTime from "@/modules/02_organization/components/DialogFormDateTime.vue";
+import DialogCreateCommandORG from "@/modules/18_command/components/DialogCreateCommandORG.vue"; //ส่่งไปออกคำสั่ง
 
 /**
  * use
@@ -30,9 +31,7 @@ const $q = useQuasar();
 const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
 const store = useOrganizational();
 
-/**
- * ตัวแปร
- */
+/** ตัวแปร*/
 const modalNewStructure = ref<boolean>(false); // เพิ่มโครงสร้าง
 const modalDateTime = ref<boolean>(false); //  ตั้งเวลาเผยแพร่
 const isStatusData = ref<boolean>(false); // แสดงตั้งเวลาเผยแพร่
@@ -43,29 +42,10 @@ const historyId = ref<string>(""); // ID ประวัติโครงสร
 const labelHistory = ref<string>("ประวัติโครงสร้าง"); // ชื่อประวัติโครงสร้าง
 const count = ref<number>(0);
 
-// รายการเมนูเพิ่มโครงสร้าง
-const itemStructure = ref<DataOption[]>([
-  {
-    id: "NEW",
-    name: "สร้างใหม่",
-  },
-  {
-    id: "ORG",
-    name: "ทำสำเนาเฉพาะโครงสร้าง",
-  },
-  {
-    id: "ORG_POSITION",
-    name: "ทำสำเนาโครงสร้างและตำแหน่ง",
-  },
-  {
-    id: "ORG_POSITION_PERSON",
-    name: "ทำสำเนาโครงสร้าง ตำแหน่งและคนครอง",
-  },
-]);
+const modalCommand = ref<boolean>(false); //ส่งไปออกคำสั่ง
 
 /**
  * function เรียกข้อมูลโครงสร้าง แบบปัจุบันและ แบบร่าง
- *
  * เก็บข่อมูลใน store
  */
 async function fetchOrganizationActive() {
@@ -225,6 +205,7 @@ onMounted(async () => {
         </div>
       </q-card>
     </div>
+
     <div v-else>
       <q-card class="my-card">
         <q-card-section class="q-pa-sm">
@@ -294,6 +275,17 @@ onMounted(async () => {
               @click="ocClickAddStructure('ADD')"
               class="q-px-md"
             />
+            <q-btn
+              v-if="store.typeOrganizational === 'draft'"
+              flat
+              round
+              dense
+              color="add"
+              icon="mdi-account-arrow-right"
+              @click.prevent="modalCommand = true"
+            >
+              <q-tooltip>ส่งไปออกคำสั่ง</q-tooltip>
+            </q-btn>
 
             <!-- <q-btn-dropdown
               v-if="checkPermission($route)?.attrOwnership == 'OWNER'"
@@ -383,6 +375,13 @@ onMounted(async () => {
     :close="onClickDateTime"
     :fetch-active="fetchOrganizationActive"
   />
+
+  <!-- dialog ส่งไปออกคำสั่ง -->
+  <DialogCreateCommandORG
+    v-model:modal="modalCommand"
+    command-type-code="C-PM-38"
+    :org-publish-date="store.orgPublishDate as Date | undefined"
+  />
 </template>
 
 <style scoped></style>
diff --git a/src/modules/05_placement/components/Transfer/TransferDetail.vue b/src/modules/05_placement/components/Transfer/TransferDetail.vue
index c9e4fdb21..60887d856 100644
--- a/src/modules/05_placement/components/Transfer/TransferDetail.vue
+++ b/src/modules/05_placement/components/Transfer/TransferDetail.vue
@@ -38,6 +38,7 @@ const transferId = ref<string>(route.params.id as string); //Id รายกา
 const roleAdmin = ref<boolean>(false); //admin
 const edit = ref<boolean>(false); //การแก่ไข
 const dataProfile = ref<DataProfile>(); //ข้อมูลส่วนตัว
+const workflowRef = ref<any>(null);
 
 const organizationPositionOld = ref<string>(""); //ตำแหน่ง/สังกัด
 const positionTypeOld = ref<string>(""); //ประเภทตำแหน่ง
@@ -335,7 +336,7 @@ onMounted(async () => {
       <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
         <div class="q-pl-sm text-weight-bold text-dark">ข้อมูลการขอโอน</div>
         <q-space />
-        <q-btn
+        <!-- <q-btn
           v-if="!roleAdmin && responseData.status != 'APPROVE'"
           outline
           color="primary"
@@ -344,7 +345,7 @@ onMounted(async () => {
           class="q-px-sm"
           label="ส่งคำร้องไปยัง สกจ."
           @click="confirmMessage"
-        />
+        /> -->
       </div>
       <div class="col-12"><q-separator /></div>
       <div class="row col-12 q-pa-md">
@@ -489,7 +490,8 @@ onMounted(async () => {
               v-if="
                 !(
                   responseData.status == 'REPORT' ||
-                  responseData.status == 'DONE'
+                  responseData.status == 'DONE' ||
+                  !workflowRef?.permission.isUpdate
                 ) && checkPermission($route)?.attrIsUpdate
               "
             />
@@ -686,7 +688,11 @@ onMounted(async () => {
     </q-card>
 
     <!-- Workflow -->
-    <WorkFlow :id="transferId" :sys-name="'transfer'" />
+    <WorkFlow
+      ref="workflowRef"
+      :id="transferId"
+      :sys-name="'PLACEMENT_TRANSFER'"
+    />
   </div>
 </template>
 
diff --git a/src/modules/18_command/components/DialogCreateCommandORG.vue b/src/modules/18_command/components/DialogCreateCommandORG.vue
index 701ad93a2..65023c0f0 100644
--- a/src/modules/18_command/components/DialogCreateCommandORG.vue
+++ b/src/modules/18_command/components/DialogCreateCommandORG.vue
@@ -8,7 +8,12 @@ import { useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useCommandMainStore } from "@/modules/18_command/store/Main";
 
-import type { ListCommand } from "@/modules/18_command/interface/index/Main";
+/** importType*/
+import type { QTableProps } from "quasar";
+import type {
+  ListCommand,
+  DataOption,
+} from "@/modules/18_command/interface/index/Main";
 
 import DialogHeader from "@/components/DialogHeader.vue";
 
@@ -28,6 +33,7 @@ const {
 const modal = defineModel<boolean>("modal", { required: true });
 const props = defineProps({
   commandTypeCode: String, // ไอดีประเภทคำสั่ง
+  orgPublishDate: { type: Date, defult: undefined },
 });
 
 const commandOp = ref<ListCommand[]>([]); // ประเภทคำสั่ง
@@ -36,33 +42,123 @@ const commandNo = ref<string>(""); //คำสั่งเลขที่
 const commandYear = ref<number>(new Date().getFullYear());
 const commandAffectDate = ref<Date | null>(null); //วันที่ลงนาม
 const commandExcecuteDate = ref<Date | null>(null); //วันที่คำสั่งมีผล
+const group = ref<string>(
+  "กลุ่มที่ 1.1 : ปฏิบัติงาน ชำนาญงาน ปฏิบัติการ ชำนาญการ"
+); //กลุ่ม
+const isCheckOrgPublishDate = ref<boolean>(false); //เช็คค่าของวันที่คำสั่งมีผล
+const groupOp = ref<DataOption[]>([]);
+const groupDataOp = ref<DataOption[]>([
+  {
+    id: "1.1",
+    name: "กลุ่มที่ 1.1 : ปฏิบัติงาน ชำนาญงาน ปฏิบัติการ ชำนาญการ",
+  },
+  {
+    id: "1.2",
+    name: "กลุ่มที่ 1.2 : อาวุโส ชำนาญการพิเศษ อำนวยการต้น",
+  },
+  {
+    id: "2",
+    name: "กลุ่มที่ 2 : ทักษะพิเศษ เชี่ยวชาญ ทรงคุณวุฒิ อำนวยการสูง บริหารต้น บริหารสูง",
+  },
+]);
+
+//Table
+const rows = ref<any[]>([
+  {
+    id: "1",
+    posMasterNo: "สกก.3",
+    positionName: "นักจัดการงานทั่วไป",
+    posTypeName: "ทั่วไป",
+    posLevelName: "ปฏิบัติงาน",
+    positionIsSelected: "นายศรัณย์ ศิลาดี",
+    group: "1.1",
+    selected: true,
+  },
+  {
+    id: "4",
+    posMasterNo: "สกก.4",
+    positionName: "นักจัดการงานทั่วไป",
+    posTypeName: "วิชาการ",
+    posLevelName: "ปฏิบัติการ",
+    positionIsSelected: "นางเกษมณี ใจดี",
+    group: "1.1",
+    selected: true,
+  },
+]);
+const selected = ref<any[]>([]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "posMasterNo",
+    align: "left",
+    label: "ตำแหน่งเลขที่",
+    sortable: false,
+    field: "posMasterNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionName",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    field: "positionName",
+    sortable: false,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posTypeName",
+    align: "left",
+    label: "ประเภทตำแหน่ง",
+    sortable: false,
+    field: "posTypeName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posLevelName",
+    align: "left",
+    label: "ระดับตำแหน่ง",
+    sortable: false,
+    field: "posLevelName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionIsSelected",
+    align: "left",
+    label: "คนครอง",
+    sortable: false,
+    field: "positionIsSelected",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
 
 /** ฟังก์ชันบันทึกและไปยังหน้าคำสั่ง*/
 function onSubmit() {
   dialogConfirm($q, async () => {
-    showLoader();
-    const body = {
-      commandYear: commandYear.value,
-      commandNo: commandNo.value,
-      commandTypeId: commandType.value,
-      commandAffectDate: commandAffectDate.value,
-      commandExcecuteDate: commandExcecuteDate.value,
-      persons: [],
-    };
-
-    await http
-      .post(config.API.command + `/person`, body)
-      .then(async (res) => {
-        const id = await res.data.result;
-        router.push(`/command/edit/${id}`);
-        modal.value = false;
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(() => {
-        hideLoader();
-      });
+    // showLoader();
+    // const body = {
+    //   commandYear: commandYear.value,
+    //   commandNo: commandNo.value,
+    //   commandTypeId: commandType.value,
+    //   commandAffectDate: commandAffectDate.value,
+    //   commandExcecuteDate: commandExcecuteDate.value,
+    //   persons: [],
+    // };
+    // await http
+    //   .post(config.API.command + `/person`, body)
+    //   .then(async (res) => {
+    //     const id = await res.data.result;
+    //     router.push(`/command/edit/${id}`);
+    //     modal.value = false;
+    //   })
+    //   .catch((e) => {
+    //     messageError($q, e);
+    //   })
+    //   .finally(() => {
+    //     hideLoader();
+    //   });
   });
 }
 
@@ -76,6 +172,10 @@ function closeModal() {
   commandYear.value = new Date().getFullYear();
   commandAffectDate.value = null;
   commandExcecuteDate.value = null;
+  group.value = "กลุ่มที่ 1.1 : ปฏิบัติงาน ชำนาญงาน ปฏิบัติการ ชำนาญการ";
+  isCheckOrgPublishDate.value = false;
+  // rows.value = [];
+  // selected.value = [];
 }
 
 /** ฟังก์ชันดึงข้อมูลคำสั่ง */
@@ -88,9 +188,69 @@ async function fetchCommandType() {
   commandType.value = commandOp.value[0].id;
 }
 
+/**
+ * ฟังก์ชันต้นหาข้อมูลของ Option ขอสถานะ
+ * @param val ค่าที่ต้องการฟิลเตอร์
+ * @param update  อัพเดทค่า
+ * @param refData ดาต้าที่ต้องการฟิลเตอร์
+ */
+function filterOption(val: string, update: Function) {
+  update(() => {
+    group.value = val ? "" : group.value;
+    groupOp.value = groupDataOp.value.filter(
+      (v: DataOption) => v.name.indexOf(val) > -1
+    );
+  });
+}
+
+/**
+ * ฟังก์ชันเลือกกลุ่ม
+ * @param val กลุ่มที่ต้องการค้นหา
+ */
+function updateGroup(val: string) {
+  const data = [
+    {
+      id: "1",
+      posMasterNo: "สกก.3",
+      positionName: "นักจัดการงานทั่วไป",
+      posTypeName: "ทั่วไป",
+      posLevelName: "ปฏิบัติงาน",
+      positionIsSelected: "นายศรัณย์ ศิลาดี",
+      group: "1.1",
+      selected: true,
+    },
+    {
+      id: "2",
+      posMasterNo: "สกก.2",
+      positionName: "นักทรัพยากรบุคคล",
+      posTypeName: "วิชาการ",
+      posLevelName: "ชำนาญการพิเศษ",
+      positionIsSelected: "นางสาวพรทิพย์ กาญจนา",
+      group: "1.2",
+      selected: true,
+    },
+    {
+      id: "3",
+      posMasterNo: "สกก.1",
+      positionName: "นักบริหาร",
+      posTypeName: "บริหาร",
+      posLevelName: "สูง",
+      positionIsSelected: "นางสาวพรทิพย์ กาญจนา",
+      group: "2",
+      selected: true,
+    },
+  ];
+
+  rows.value = data.filter((e: any) => e.group === val);
+}
+
 watch(modal, () => {
   if (modal.value) {
     fetchCommandType();
+    if (props.orgPublishDate) {
+      commandExcecuteDate.value = props.orgPublishDate;
+      isCheckOrgPublishDate.value = true;
+    }
   }
 });
 </script>
@@ -128,19 +288,23 @@ watch(modal, () => {
                 </template>
               </q-select>
             </div>
+
+            <!-- คำสั่งเลขที่ -->
             <div class="col-6">
               <q-input
                 class="inputgreen"
                 outlined
                 dense
+                hide-bottom-space
                 v-model="commandNo"
                 :label="`${'คำสั่งเลขที่'}`"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกคำสั่งเลขที่'}`]"
               />
             </div>
             <label class="col-1 flex justify-center items-center text-bold"
               >/</label
             >
-
+            <!-- พ.ศ -->
             <div class="col-5">
               <datepicker
                 menu-class-name="modalfix"
@@ -179,6 +343,7 @@ watch(modal, () => {
               </datepicker>
             </div>
 
+            <!-- วันที่ลงนาม -->
             <div class="col-6">
               <datepicker
                 clearable
@@ -222,6 +387,7 @@ watch(modal, () => {
               </datepicker>
             </div>
 
+            <!-- วันที่คำสั่งมีผล -->
             <div class="col-6">
               <datepicker
                 clearable
@@ -230,7 +396,8 @@ watch(modal, () => {
                 :locale="'th'"
                 autoApply
                 :enableTimePicker="false"
-                class="inputgreen"
+                :class="!isCheckOrgPublishDate ? 'inputgreen' : ''"
+                :readonly="isCheckOrgPublishDate"
               >
                 <template #year="{ year }">
                   {{ year + 543 }}
@@ -240,11 +407,12 @@ watch(modal, () => {
                 </template>
                 <template #trigger>
                   <q-input
+                    :readonly="isCheckOrgPublishDate"
                     clearable
                     dense
                     outlined
                     hide-bottom-space
-                    class="inputgreen"
+                    :class="!isCheckOrgPublishDate ? 'inputgreen' : ''"
                     :model-value="
                       commandExcecuteDate == null
                         ? null
@@ -265,6 +433,111 @@ watch(modal, () => {
                 </template>
               </datepicker>
             </div>
+
+            <!-- กลุ่ม -->
+            <div class="col-12">
+              <q-select
+                v-model="group"
+                :label="`${'กลุ่ม'}`"
+                option-label="name"
+                :options="groupOp"
+                option-value="id"
+                class="inputgreen"
+                dense
+                emit-value
+                map-options
+                lazy-rules
+                use-input
+                hide-bottom-space
+                outlined
+                @update:model-value="updateGroup"
+                @filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn) "
+              >
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+            </div>
+
+            <!-- TABLE -->
+            <div class="col-12">
+              <d-table
+                ref="table"
+                :columns="columns"
+                :rows="rows"
+                :paging="true"
+                row-key="id"
+                flat
+                bordered
+                dense
+                :rows-per-page-options="[10, 25, 50, 100]"
+                selection="multiple"
+                v-model:selected="selected"
+              >
+                <template v-slot:header-selection="scope">
+                  <q-checkbox
+                    keep-color
+                    color="primary"
+                    dense
+                    v-model="scope.selected"
+                  />
+                </template>
+                <template v-slot:body="props">
+                  <q-tr :props="props">
+                    <q-td>
+                      <q-checkbox
+                        keep-color
+                        color="primary"
+                        dense
+                        v-model="props.row.selected"
+                      />
+                    </q-td>
+
+                    <q-td
+                      v-for="col in props.cols"
+                      :key="col.name"
+                      :props="props"
+                    >
+                      <div v-if="col.name === 'posMasterNo'">
+                        {{
+                          props.row.isSit
+                            ? col.value + " " + "(นั่งทับตำแหน่ง)"
+                            : col.value
+                        }}
+                      </div>
+                      <div v-else-if="col.name === 'posLevelName'">
+                        {{
+                          props.row.posLevelName
+                            ? props.row.isSpecial == true
+                              ? `${props.row.posLevelName} (ฉ)`
+                              : props.row.posLevelName
+                            : "-"
+                        }}
+                      </div>
+                      <div v-else>
+                        {{ col.value ? col.value : "-" }}
+                      </div>
+                    </q-td>
+                  </q-tr>
+                </template>
+                <!-- <template v-slot:pagination="scope">
+                    <q-pagination
+                      v-model="reqMaster.page"
+                      active-color="primary"
+                      color="dark"
+                      :max="totalPage"
+                      :max-pages="5"
+                      size="sm"
+                      boundary-links
+                      direction-links
+                    ></q-pagination>
+                  </template> -->
+              </d-table>
+            </div>
           </div>
         </q-card-section>
 
@@ -272,8 +545,13 @@ watch(modal, () => {
 
         <q-card-actions align="right">
           <q-btn
-            label="บันทึกและไปยังหน้าคำสั่ง"
-            :disable="commandType == ''"
+            label="ส่งไปออกคำสั่ง"
+            :disable="
+              commandType == '' ||
+              rows.filter((x) => x.selected).length === 0 ||
+              !commandNo ||
+              !commandYear
+            "
             type="submit"
             color="public"
           >