diff --git a/src/api/registry/api.registry.ts b/src/api/registry/api.registry.ts
index 62ecb17e9..3d27609ca 100644
--- a/src/api/registry/api.registry.ts
+++ b/src/api/registry/api.registry.ts
@@ -44,8 +44,7 @@ export default {
   profileNewInsignByProfileId: (profileId: string, type: string) =>
     `${registryNew}${type}/insignia/${profileId}`,
 
-  orgInsigniaActive: () =>
-    `${org}/insignia/insignia-type/active`,
+  orgInsigniaActive: () => `${org}/insignia/insignia-type/active`,
 
   profileNewInsignById: (dataId: string, type: string) =>
     `${registryNew}${type}/insignia/${dataId}`,
@@ -169,6 +168,17 @@ export default {
   leaveListCard: (id: string, type: string) =>
     `${registryNew}${type}/leave/admin/${id}`, //noPermission
 
+  /** ตำแหน่ง*/
+  profileSalaryPositionNew: (type: string) => `${registryNew}${type}/salary/position`,
+  profileListSalaryPositionNew: (id: string, type: string) =>
+    `${registryNew}${type}/salary/position/${id}`,
+  profileListSalaryPositionHistoryNew: (profileId: string, type: string) =>
+    `${registryNew}${type}/salary/position/admin/history/${profileId}`,
+  profileSalaryPositionSwapNew: (type: string, id: string, type2: string) =>
+    `${registryNew}${type2}/salary/position/swap/${type}/${id}`,
+  salaryListCardPosition: (id: string, type: string) =>
+    `${registryNew}${type}/salary/position/admin/${id}`, //noPermission
+
   /** ตำแหน่งเงินเดือน*/
   profileSalaryNew: (type: string) => `${registryNew}${type}/salary`,
   profileListSalaryNew: (id: string, type: string) =>
diff --git a/src/modules/04_registryPerson/components/detail/GovernmentInformation/05_ActingPos.vue b/src/modules/04_registryPerson/components/detail/GovernmentInformation/05_ActingPos.vue
index 4b5222de3..2b584fb6a 100644
--- a/src/modules/04_registryPerson/components/detail/GovernmentInformation/05_ActingPos.vue
+++ b/src/modules/04_registryPerson/components/detail/GovernmentInformation/05_ActingPos.vue
@@ -102,7 +102,7 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     format(val, row) {
-      return row.status ? "Active" : "-";
+      return row.status ? "ใช้งาน" : "-";
     },
   },
 ]);
@@ -444,7 +444,7 @@ onMounted(() => {
               <div class="col-3" v-else>-</div>
               <div class="col-3 text-grey-6 text-weight-medium">สถานะ</div>
               <div class="col-3">
-                {{ props.row.status ? "Active" : "-" }}
+                {{ props.row.status ? "ใช้งาน" : "-" }}
               </div>
             </div>
             <q-separator />
@@ -572,7 +572,7 @@ onMounted(() => {
               <q-checkbox
                 disable
                 v-model="formData.status"
-                label="Active"
+                label="ใช้งาน"
                 keep-color="primary"
               />
             </div>
diff --git a/src/modules/04_registryPerson/components/detail/GovernmentInformation/05_ActingPosHistory.vue b/src/modules/04_registryPerson/components/detail/GovernmentInformation/05_ActingPosHistory.vue
index ad7084b08..81ecb5897 100644
--- a/src/modules/04_registryPerson/components/detail/GovernmentInformation/05_ActingPosHistory.vue
+++ b/src/modules/04_registryPerson/components/detail/GovernmentInformation/05_ActingPosHistory.vue
@@ -76,7 +76,7 @@ const columns = ref<QTableProps["columns"]>([
     sortable: true,
     field: "status",
     format(val, row) {
-      return row.status ? "Active" : "-";
+      return row.status ? "ใช้งาน" : "-";
     },
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
diff --git a/src/modules/04_registryPerson/components/detail/GovernmentInformation/07_Position.vue b/src/modules/04_registryPerson/components/detail/GovernmentInformation/07_Position.vue
index 6b440a7d0..a378bf804 100644
--- a/src/modules/04_registryPerson/components/detail/GovernmentInformation/07_Position.vue
+++ b/src/modules/04_registryPerson/components/detail/GovernmentInformation/07_Position.vue
@@ -1,11 +1,1261 @@
 <script setup lang="ts">
+import { ref, reactive, onMounted, computed } from "vue";
+import { checkPermission } from "@/utils/permissions";
+
+import { useQuasar } from "quasar";
+import { useRoute } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type { QTableProps } from "quasar";
+import type {
+  DataOption2,
+  DataOption,
+} from "@/modules/04_registryPerson/interface/index/Main";
+
+import type { FormSalaryNew } from "@/modules/04_registryPerson/interface/request/Salary";
+import type {
+  ResListSalary,
+  ResType,
+} from "@/modules/04_registryPerson/interface/response/Salary";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+import DialogHistory from "@/modules/04_registryPerson/components/detail/GovernmentInformation/07_PositionHistory.vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { useSalaryDataStore } from "@/modules/04_registryPerson/stores/salary";
+import DialogPreviewCommand from "@/modules/18_command/components/DialogPreviewCommand.vue";
+
+const $q = useQuasar();
+const route = useRoute();
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
+
+/** props*/
 const isLeave = defineModel<boolean>("isLeave", {
   required: true,
 });
-</script>
 
+const store = useSalaryDataStore();
+const {
+  date2Thai,
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+  pathRegistryEmp,
+  onSearchDataTable,
+} = useCounterMixin();
+
+const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
+
+//Table
+const rows = ref<ResListSalary[]>([]); //รายการตำแหน่งเงินเดือน
+const rowsMain = ref<ResListSalary[]>([]); //รายการตำแหน่งเงินเดือน
+const keyword = ref<string>(""); //คำค้นหา
+const modalCommand = ref<boolean>(false);
+const command = ref<string>("");
+const commandId = ref<string>("");
+const baseColumns = ref<QTableProps["columns"]>([
+  {
+    name: "commandDateAffect",
+    align: "left",
+    label: "วัน เดือน ปี",
+    sortable: true,
+    field: "commandDateAffect",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v),
+  },
+  {
+    name: "amount",
+    align: "left",
+    label: empType.value === "-employee" ? "ค่าตอบแทนรายเดือน" : "เงินเดือน",
+    sortable: true,
+    field: "amount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => Number(v).toLocaleString(),
+  },
+  {
+    name: "positionSalaryAmount",
+    align: "left",
+    label: "เงินประจำตำแหน่ง",
+    sortable: true,
+    field: "positionSalaryAmount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => Number(v).toLocaleString(),
+  },
+  {
+    name: "mouthSalaryAmount",
+    align: "left",
+    label: "เงินค่าตอบแทนรายเดือน",
+    sortable: true,
+    field: "mouthSalaryAmount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => Number(v).toLocaleString(),
+  },
+
+  {
+    name: "posNo",
+    align: "left",
+    label: "ตำแหน่งเลขที่",
+    sortable: true,
+    field: "posNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionName",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "positionName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionType",
+    align: "left",
+    label: "ประเภทตำแหน่ง",
+    sortable: true,
+    field: "positionType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionLevel",
+    align: "left",
+    label: "ระดับ",
+    sortable: true,
+    field: "positionLevel",
+    format(val, row) {
+      return `${
+        row.positionLevel
+          ? row.positionLevel
+          : row.positionCee
+          ? row.positionCee
+          : "-"
+      }`;
+    },
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "commandName",
+    align: "left",
+    label: "เอกสารอ้างอิง",
+    sortable: true,
+    field: "commandName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    format(val, row) {
+      return row.commandNo && row.commandYear
+        ? `${row.commandNo}/${row.commandYear}`
+        : "";
+    },
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "remark",
+    align: "left",
+    label: "หมายเหตุ",
+    sortable: true,
+    field: "remark",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const columns = computed(() => {
+  if (empType.value === "-employee") {
+    if (baseColumns.value) {
+      return baseColumns.value.filter(
+        (column) =>
+          column.name !== "positionSalaryAmount" &&
+          column.name !== "mouthSalaryAmount"
+      );
+    }
+  }
+  return baseColumns.value;
+});
+const visibleColumns = ref<string[]>([
+  "commandDateAffect",
+  "amount",
+  "positionSalaryAmount",
+  "mouthSalaryAmount",
+  "posNo",
+  "positionName",
+  "positionType",
+  "positionLevel",
+  "commandName",
+  "refCommandNo",
+  "remark",
+]);
+const pagination = ref({
+  page: 1,
+  rowsPerPage: 10,
+});
+
+const formDataSalary = reactive<FormSalaryNew>({
+  date: null, //วัน/เดือน/ปี
+  posNo: "", //ตำแหน่งเลขที่
+  templatePos: "", //ต้นแบบ (template) ตำแหน่ง
+  position: "", //ตำแหน่ง
+  positionType: "", //ประเภทตำแหน่ง, กลุ่มงาน
+  positionLevel: "", //ระดับตำแหน่ง, ระดับชั้นงาน
+  positionLine: "", // สายงาน
+  positionPathSide: "", //ด้าน/สาขา
+  positionExecutive: "", //ตำแหน่งทางการบริหาร
+  salary: null, //เงินเดือน
+  salaryPos: null, //เงินประจำตำแหน่ง
+  salaryCompensation: null, //เงินค่าตอบแทนรายเดือน
+  refCommandNo: "", //เลขที่คำสั่ง
+  templateDoc: "", //ต้นแบบ (template) เอกสารอ้างอิง
+  doc: "", //เอกสารอ้างอิง
+  amountSpecial: null, //เงินค่าตอบแทนพิเศษ
+});
+
+const modalDialogSalary = ref<boolean>(false); //แสดง popup ตำแหน่งเงินเดือน
+const isStatusEdit = ref<boolean>(false); //สถานะแก้ไขข้อมูลตำแหน่งเงินเดือน
+const salaryId = ref<string>(""); //id ที่ต้องการแก้ไข
+const dataLevel = ref<ResType[]>([]); //รายการ ตำแหน่งเงินเดือน
+
+const posNoOptions = ref<DataOption2[]>(store.optionTemplatePos);
+
+const posTypeOptions = ref<DataOption[]>([]);
+const posTypeOptionsMain = ref<DataOption[]>([]);
+const posLevelOption = ref<DataOption[]>([]);
+const posLevelOptionMain = ref<DataOption[]>([]);
+const positionFielOptiond = ref<DataOption[]>([]);
+const positionFielOptiondMain = ref<DataOption[]>([]);
+const positionAreaOptiond = ref<DataOption[]>([]);
+const positionAreaOptiondMain = ref<DataOption[]>([]);
+const posExecutiveOption = ref<DataOption[]>([]);
+const posExecutiveOptionMain = ref<DataOption[]>([]);
+
+const docOption = ref<DataOption2[]>(store.optionTemplateDoc);
+
+/** function fetch รายการ ตำแหน่งเงินเดือน*/
+async function fetchListSalary() {
+  showLoader();
+  await http
+    .get(
+      config.API.profileListSalaryPositionNew(profileId.value, empType.value)
+    )
+    .then((res) => {
+      rows.value = res.data.result;
+      rowsMain.value = res.data.result;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** function fetch รายการ ตำแหน่งเงินเดือน*/
+function fetchType() {
+  http
+    .get(config.API.orgPosType)
+    .then((res) => {
+      dataLevel.value = res.data.result;
+      posTypeOptionsMain.value = res.data.result.map((e: any) => ({
+        id: e.id,
+        name: e.posTypeName,
+      }));
+      posTypeOptions.value = posTypeOptionsMain.value;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+/**
+ * function เลือกประเภทตำแหน่ง
+ * @param val
+ * @param status
+ */
+async function updateSelectType(val: string, status: boolean = false) {
+  const listLevel = await dataLevel.value.find(
+    (e: any) => e.posTypeName === val
+  );
+
+  if (listLevel) {
+    posLevelOptionMain.value = listLevel.posLevels.map((e: any) => ({
+      id: e.id,
+      name:
+        empType.value === ""
+          ? e.posLevelName
+          : `${listLevel.posTypeShortName} ${e.posLevelName}`,
+    }));
+
+    formDataSalary.positionLevel = !status ? "" : formDataSalary.positionLevel;
+  }
+}
+
+/**
+ * function  เปิด dialog ตำแหน่งเงินเดือน
+ * @param statusEdit แก้ไข,เพิ่ม
+ * @param data
+ */
+function onClickOpenDialog(statusEdit: boolean = false, data: any = []) {
+  if (empType.value === "") {
+    dataLevel.value.length === 0 && fetchType();
+    fetchDataOption();
+    fetchDataOptionExecutive();
+  } else {
+    fetchOptionGroup();
+  }
+
+  //  หาระดับตำแหน่ง
+  setTimeout(async () => {
+    statusEdit && (await updateSelectType(data.positionType, true));
+    isStatusEdit.value = statusEdit;
+  }, 500);
+
+  posLevelOptionMain.value = !statusEdit ? [] : posLevelOptionMain.value;
+  modalDialogSalary.value = true;
+  salaryId.value = data.id;
+  formDataSalary.date = statusEdit ? data.date : null;
+  formDataSalary.posNo = statusEdit ? data.posNo : "";
+  formDataSalary.templatePos = "";
+  formDataSalary.position = statusEdit ? data.position : "";
+  formDataSalary.positionLine = statusEdit ? data.positionLine : "";
+  formDataSalary.positionType = statusEdit ? data.positionType : "";
+  formDataSalary.positionLevel = statusEdit ? data.positionLevel : "";
+  formDataSalary.positionPathSide = statusEdit ? data.positionPathSide : "";
+  formDataSalary.positionExecutive = statusEdit ? data.positionExecutive : "";
+  formDataSalary.salaryCompensation = statusEdit ? data.mouthSalaryAmount : "";
+  formDataSalary.salary = statusEdit
+    ? data.amount
+      ? data.amount.toLocaleString()
+      : ""
+    : "";
+  formDataSalary.salaryPos = statusEdit
+    ? data.positionSalaryAmount
+      ? data.positionSalaryAmount.toLocaleString()
+      : ""
+    : "";
+  formDataSalary.refCommandNo = statusEdit ? data.refCommandNo : "";
+  formDataSalary.templateDoc = "";
+  formDataSalary.doc = statusEdit ? data.templateDoc : "";
+
+  formDataSalary.amountSpecial = statusEdit
+    ? data.amountSpecial === 0
+      ? ""
+      : data.amountSpecial
+    : "";
+}
+
+/** function  ปิด dialog ตำแหน่งเงินเดือน*/
+function onClickCloseDialog() {
+  modalDialogSalary.value = false;
+}
+
+/**
+ * ฟิลเตอร์ข้อมูลจาก input
+ * @param val ค่าที่ป้อนให้ input
+ * @param update function จาก quasar
+ * @param filtername type ที่กำหนด ของ input นั้นๆ
+ */
+function filterSelector(val: string, update: Function, filtername: string) {
+  switch (filtername) {
+    case "pos":
+      update(() => {
+        posNoOptions.value = store.optionTemplatePos.filter(
+          (v: DataOption2) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "positionLine":
+      update(() => {
+        positionFielOptiond.value = positionFielOptiondMain.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "posType":
+      update(() => {
+        posTypeOptions.value = posTypeOptionsMain.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "posLevel":
+      update(() => {
+        posLevelOption.value = posLevelOptionMain.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "doc":
+      update(() => {
+        docOption.value = store.optionTemplateDoc.filter(
+          (v: DataOption2) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "positionPathSide":
+      update(() => {
+        positionAreaOptiond.value = positionAreaOptiondMain.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+
+    case "positionExecutive":
+      update(() => {
+        posExecutiveOption.value = posExecutiveOptionMain.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+
+    default:
+      break;
+  }
+}
+
+/**
+ * function เลือกต้นแบบ tamplate ตำแหน่ง
+ * @param val
+ */
+function updatePos(val: string) {
+  formDataSalary.position = val;
+}
+
+/**
+ * function เลือกต้นแบบ tamplate เอกสาร
+ * @param val
+ */
+function updateDoc(val: string) {
+  formDataSalary.doc = val;
+}
+
+/** function ยืนยันการบันทึกข้อมูล */
+function onSubmit() {
+  dialogConfirm($q, async () => {
+    showLoader();
+    const formData = {
+      profileEmployeeId:
+        !isStatusEdit.value && empType.value !== ""
+          ? profileId.value
+          : undefined,
+      profileId:
+        !isStatusEdit.value && empType.value === ""
+          ? profileId.value
+          : undefined,
+      date: formDataSalary.date, // วันที่
+      posNo: formDataSalary.posNo, //ตำแหน่งเลขที่
+      position: formDataSalary.position, //ตำแหน่ง
+      positionLine:
+        empType.value === "" ? formDataSalary.positionLine : undefined, //สายงาน
+      positionPathSide:
+        empType.value === "" ? formDataSalary.positionPathSide : undefined, // ด้าน/สาขา
+      positionExecutive:
+        empType.value === "" ? formDataSalary.positionExecutive : undefined, //ตำแหน่งทางการบริหาร
+      positionType: formDataSalary.positionType, // ประเภทตำแหน่ง
+      positionLevel: formDataSalary.positionLevel, // ระดับตำแหน่ง
+      amount:
+        typeof formDataSalary.salary === "number"
+          ? formDataSalary.salary
+          : Number(formDataSalary?.salary?.replace(/,/g, "")), //เงินเดือนฐาน
+      positionSalaryAmount:
+        typeof formDataSalary.salaryPos === "number"
+          ? formDataSalary.salaryPos
+          : Number(formDataSalary?.salaryPos?.replace(/,/g, "")), // เงินประจำตำแหน่ง
+      mouthSalaryAmount:
+        typeof formDataSalary.salaryCompensation === "number"
+          ? formDataSalary.salaryCompensation
+          : Number(formDataSalary?.salaryCompensation?.replace(/,/g, "")), //เงินค่าตอบแทนรายเดือน
+      amountSpecial:
+        typeof formDataSalary.amountSpecial === "number"
+          ? formDataSalary.amountSpecial
+          : Number(formDataSalary?.amountSpecial?.replace(/,/g, "")), //เงินค่าตอบแทนพิเศษ
+      refCommandNo: formDataSalary.refCommandNo, // เลขที่คำสั่ง
+      templateDoc: formDataSalary.doc, // เอกสารอ้างอิง
+    };
+
+    try {
+      const url = isStatusEdit.value
+        ? config.API.profileListSalaryPositionNew(salaryId.value, empType.value)
+        : config.API.profileSalaryPositionNew(empType.value);
+      const method = isStatusEdit.value ? "patch" : "post";
+      await http[method](url, formData);
+      await onClickCloseDialog();
+      await fetchListSalary();
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    } catch (e) {
+      messageError($q, e);
+      hideLoader();
+    } finally {
+    }
+  });
+}
+
+/**
+ * function เลื่อนรายการเงินเดือนขึ้น
+ * @param id รายการเงินเดือน
+ */
+function onSwapUp(id: string) {
+  showLoader();
+  http
+    .get(config.API.profileSalaryPositionSwapNew("up", id, empType.value))
+    .then(async () => {
+      await fetchListSalary();
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * function เลื่อนรายการเงินเดือนลง
+ * @param id รายการเงินเดือน
+ */
+function onSwapDown(id: string) {
+  showLoader();
+  http
+    .get(config.API.profileSalaryPositionSwapNew("down", id, empType.value))
+    .then(async () => {
+      await fetchListSalary();
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+const modalHistory = ref<boolean>(false);
+
+/**
+ * function ดูข้อมูลประวัติการแก้ไขรายการเงินเดือน
+ * @param id รายการเงินเดือน
+ */
+function onClikcHistory(id: string) {
+  salaryId.value = id;
+  modalHistory.value = true;
+}
+
+/** function fetch ข้อมูลสายงาน*/
+function fetchDataOption() {
+  showLoader();
+  http
+    .get(config.API.orgPosPosition + `?keyword=&type=ALL`)
+    .then((res) => {
+      const data = res.data.result;
+
+      const seen = new Set();
+      const seen2 = new Set();
+
+      const listPositionField = data.filter((item: any) => {
+        if (seen.has(item.positionField)) {
+          return false;
+        } else {
+          seen.add(item.positionField);
+          return true;
+        }
+      });
+      positionFielOptiondMain.value = listPositionField.map((e: any) => ({
+        id: e.positionField,
+        name: e.positionField,
+      }));
+
+      const listPositionArea = data.filter((item: any) => {
+        if (
+          item.positionArea === null ||
+          item.positionArea === "" ||
+          item.positionArea === "-" ||
+          seen2.has(item.positionArea)
+        ) {
+          return false;
+        } else {
+          seen2.add(item.positionArea);
+          return true;
+        }
+      });
+      positionAreaOptiondMain.value = listPositionArea.map((e: any) => ({
+        id: e.positionArea,
+        name: e.positionArea,
+      }));
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** function fetch ข้อมูลตำแหน่งข้อมูลทางการบริหาร*/
+function fetchDataOptionExecutive() {
+  showLoader();
+  http
+    .get(config.API.orgPosExecutive)
+    .then((res) => {
+      const data = res.data.result;
+      posExecutiveOptionMain.value = data.map((e: any) => ({
+        id: e.posExecutiveName,
+        name: e.posExecutiveName,
+      }));
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** function fetch ข้อมูลปรเภทตำแหน่ง*/
+function fetchOptionGroup() {
+  showLoader();
+  http
+    .get(config.API.orgEmployeeType)
+    .then((res) => {
+      dataLevel.value = res.data.result;
+      posTypeOptionsMain.value = res.data.result.map((e: any) => ({
+        id: e.id,
+        name: e.posTypeName,
+      }));
+      posTypeOptions.value = posTypeOptionsMain.value;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+const classInput = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+
+function onRefCommand(data: ResListSalary) {
+  modalCommand.value = true;
+  command.value = data.refCommandNo;
+  commandId.value = data.commandId;
+  // commandId.value = 'bdf9da91-ba45-497a-a2b7-cc49e2446d97'; //จำลอง
+}
+
+function serchDataTable() {
+  rows.value = onSearchDataTable(
+    keyword.value,
+    rowsMain.value,
+    columns.value ? columns.value : []
+  );
+}
+
+/** ทำงานเมื่อ Components ถูกเรียกใช้งาน*/
+onMounted(() => {
+  fetchListSalary();
+});
+</script>
 <template>
-  <h5>ตำแหน่ง</h5>
+  <div class="row items-center q-gutter-x-sm q-pb-sm">
+    <q-btn
+      v-if="!isLeave && checkPermission($route)?.attrIsUpdate"
+      flat
+      color="primary"
+      round
+      dense
+      icon="add"
+      @click="onClickOpenDialog()"
+    >
+      <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+    </q-btn>
+    <q-space />
+    <q-input
+      dense
+      outlined
+      v-model="keyword"
+      label="ค้นหา"
+      class="q-mr-sm"
+      @keydown.enter.pervent="serchDataTable"
+    >
+      <template v-slot:append>
+        <q-icon name="search" />
+      </template>
+    </q-input>
+
+    <q-select
+      v-model="visibleColumns"
+      multiple
+      outlined
+      dense
+      options-dense
+      :display-value="$q.lang.table.columns"
+      emit-value
+      map-options
+      :options="columns"
+      option-value="name"
+      style="min-width: 140px"
+    />
+  </div>
+  <d-table
+    ref="table"
+    row-key="id"
+    flat
+    bordered
+    dense
+    :columns="columns"
+    :rows="rows"
+    :paging="true"
+    v-model:pagination="pagination"
+    :rows-per-page-options="[10, 20, 50, 100]"
+    :visible-columns="visibleColumns"
+  >
+    <template v-slot:header="props">
+      <q-tr :props="props">
+        <q-th auto-width />
+        <q-th v-for="col in props.cols" :key="col.name" :props="props">
+          <span class="text-weight-medium">{{ col.label }}</span>
+        </q-th>
+      </q-tr>
+    </template>
+    <template v-slot:body="props">
+      <q-tr :props="props">
+        <q-td>
+          <q-btn
+            flat
+            dense
+            round
+            color="deep-purple"
+            icon="mdi-history"
+            @click="onClikcHistory(props.row.id)"
+          >
+            <q-tooltip>ประวัติแก้ไขตำแหน่ง/เงินเดือน</q-tooltip>
+          </q-btn>
+
+          <q-btn
+            v-if="isLeave == false && checkPermission($route)?.attrIsUpdate"
+            flat
+            :disable="
+              props.row.commandId !== null && props.row.commandId !== ''
+            "
+            :color="props.row.commandId ? 'grey' : 'edit'"
+            dense
+            round
+            icon="edit"
+            clickable
+            @click="onClickOpenDialog(true, props.row)"
+          >
+            <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+          </q-btn>
+          <q-btn
+            v-if="isLeave == false && checkPermission($route)?.attrIsUpdate"
+            dense
+            flat
+            round
+            :color="props.rowIndex + 1 == 1 ? 'grey' : 'green'"
+            :disable="props.rowIndex + 1 == 1"
+            icon="mdi-arrow-up-bold"
+            @click="onSwapUp(props.row.id)"
+          >
+          </q-btn>
+
+          <q-btn
+            v-if="isLeave == false && checkPermission($route)?.attrIsUpdate"
+            dense
+            flat
+            round
+            :color="rows.length == props.rowIndex + 1 ? 'grey' : 'red'"
+            :disable="rows.length == props.rowIndex + 1"
+            icon="mdi-arrow-down-bold"
+            @click="onSwapDown(props.row.id)"
+          >
+          </q-btn>
+        </q-td>
+
+        <q-td v-for="col in props.cols" :key="col.id">
+          <div
+            v-if="col.name == 'refCommandNo' && props.row.commandId"
+            @click="col.value ? onRefCommand(props.row) : null"
+            :class="
+              col.value
+                ? 'table_ellipsis text-blue cursor-pointer'
+                : 'table_ellipsis'
+            "
+          >
+            {{ col.value ? col.value : "-" }}
+            <q-tooltip v-if="col.value">ดูคำสั่ง</q-tooltip>
+          </div>
+          <div v-else-if="col.name == 'amount'">
+            {{
+              props.row.amount
+                ? `${props.row.amount.toLocaleString()}${
+                    props.row.amountSpecial !== 0 && props.row.amountSpecial
+                      ? ` (${props.row.amountSpecial.toLocaleString()})`
+                      : ""
+                  }`
+                : "-"
+            }}
+          </div>
+          <div v-else-if="col.name == 'refCommandNo' && !props.row.commandId">
+            -
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value ? col.value : "-" }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </d-table>
+
+  <q-dialog v-model="modalDialogSalary" persistent>
+    <q-card style="width: 900px; max-width: 80vw">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader
+          :tittle="
+            isStatusEdit ? 'แก้ไขตำแหน่ง/เงินเดือน' : 'เพิ่มตำแหน่ง/เงินเดือน'
+          "
+          :close="onClickCloseDialog"
+        />
+        <q-separator color="grey-4" />
+
+        <q-card-section style="max-height: 100%" class="scroll">
+          <div class="row col-12 q-col-gutter-sm">
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                v-model="formDataSalary.date"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+                :class="classInput(true)"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    borderless
+                    :model-value="date2Thai(formDataSalary.date)"
+                    :rules="[
+                          (val: string) =>
+                            !!val ||
+                            `${'กรุณาเลือก วัน/เดือน/ปี'}`,
+                        ]"
+                    :label="`${'วัน/เดือน/ปี'}`"
+                    hide-bottom-space
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        color="primary"
+                        class="cursor-pointer"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                ref="posNoRef"
+                :class="classInput(true)"
+                outlined
+                dense
+                lazy-rules
+                borderless
+                v-model="formDataSalary.posNo"
+                hide-bottom-space
+                :label="`${'ตำแหน่งเลขที่'}`"
+                :rules="empType !== '-temp'? [(val: string) => !!val || `${'กรุณากรอกตำแหน่งเลขที่'}`]:[]"
+              >
+              </q-input>
+            </div>
+
+            <div class="col-xs-12 col-sm-12 col-md-12">
+              <q-select
+                ref="templatePosRef"
+                :class="classInput(true)"
+                outlined
+                dense
+                lazy-rules
+                borderless
+                clearable
+                v-model="formDataSalary.templatePos"
+                :label="`${'ต้นแบบ (template) ตำแหน่ง'}`"
+                option-label="name"
+                :options="posNoOptions"
+                option-value="name"
+                hide-bottom-space
+                emit-value
+                use-input
+                hide-selected
+                fill-input
+                input-debounce="0"
+                @update:modelValue="updatePos"
+                @filter="(inputValue: string,
+                      doneFn: Function) => filterSelector(inputValue, doneFn, 'pos'
+                      )"
+              >
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template></q-select
+              >
+            </div>
+
+            <div class="col-xs-12 col-sm-12 col-md-12">
+              <q-input
+                ref="positionRef"
+                :class="classInput(true)"
+                outlined
+                dense
+                lazy-rules
+                borderless
+                v-model="formDataSalary.position"
+                :label="`${'ตำแหน่ง'}`"
+                type="textarea"
+                hide-bottom-space
+                :rules="[(val: string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
+              />
+            </div>
+
+            <div class="col-xs-6 col-sm-6 col-md-4">
+              <q-select
+                ref="positionType Ref"
+                outlined
+                :class="classInput(true)"
+                dense
+                lazy-rules
+                borderless
+                v-model="formDataSalary.positionType"
+                :label="empType == '' ? 'ประเภทตำแหน่ง' : 'กลุ่มงาน'"
+                emit-value
+                map-options
+                option-label="name"
+                :options="posTypeOptions"
+                option-value="name"
+                hide-bottom-space
+                use-input
+                hide-selected
+                fill-input
+                input-debounce="0"
+                @update:model-value="updateSelectType"
+                :rules="empType == '' ? [(val: string) => !!val || 'กรุณาเลือกประเภทตำแหน่ง'  ]:[(val: string) => !!val ||  'กรุณาเลือกกลุ่มงาน' ]"
+                @filter="(inputValue: string,
+                      doneFn: Function) => filterSelector(inputValue, doneFn, 'posType'
+                      )"
+              >
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+            </div>
+
+            <div class="col-xs-6 col-sm-6 col-md-4">
+              <q-select
+                :class="classInput(true)"
+                ref="positionLevel Ref"
+                outlined
+                dense
+                lazy-rules
+                borderless
+                v-model="formDataSalary.positionLevel"
+                :rules="empType == '' ? [(val: string) => !!val || 'กรุณาเลือกระดับตำแหน่ง' ] : [(val: string) => !!val ||   'กรุณาเลือกระดับชั้นงาน']"
+                :label="empType == '' ? 'ระดับตำแหน่ง' : 'ระดับชั้นงาน'"
+                emit-value
+                map-options
+                option-label="name"
+                :options="posLevelOption"
+                option-value="name"
+                hide-bottom-space
+                use-input
+                hide-selected
+                fill-input
+                input-debounce="0"
+                @filter="(inputValue: string,
+                        doneFn: Function) => filterSelector(inputValue, doneFn, 'posLevel'
+                        )"
+                ><template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+            </div>
+            <div class="col-md-4"></div>
+
+            <div class="col-xs-6 col-sm-6 col-md-4" v-if="empType == ''">
+              <q-select
+                outlined
+                :class="classInput(true)"
+                dense
+                lazy-rules
+                borderless
+                v-model="formDataSalary.positionLine"
+                :label="`${'สายงาน'}`"
+                emit-value
+                map-options
+                option-label="name"
+                :options="positionFielOptiond"
+                option-value="id"
+                hide-bottom-space
+                use-input
+                hide-selected
+                fill-input
+                clearable
+                input-debounce="0"
+                @filter="(inputValue: string,
+                      doneFn: Function) => filterSelector(inputValue, doneFn, 'positionLine'
+                      )"
+              >
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template></q-select
+              >
+            </div>
+
+            <div class="col-xs-6 col-sm-6 col-md-4" v-if="empType == ''">
+              <q-select
+                :class="classInput(true)"
+                outlined
+                dense
+                lazy-rules
+                borderless
+                v-model="formDataSalary.positionPathSide"
+                :label="`${'ด้าน/สาขา'}`"
+                emit-value
+                map-options
+                option-label="name"
+                :options="positionAreaOptiond"
+                option-value="id"
+                hide-bottom-space
+                use-input
+                hide-selected
+                fill-input
+                clearable
+                input-debounce="0"
+                @filter="(inputValue: string,
+                      doneFn: Function) => filterSelector(inputValue, doneFn, 'positionPathSide'
+                      )"
+              >
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+            </div>
+
+            <div class="col-xs-6 col-sm-6 col-md-4" v-if="empType == ''">
+              <q-select
+                :class="classInput(true)"
+                outlined
+                dense
+                lazy-rules
+                borderless
+                v-model="formDataSalary.positionExecutive"
+                :label="`${'ตำแหน่งทางการบริหาร'}`"
+                emit-value
+                map-options
+                option-label="name"
+                :options="posExecutiveOption"
+                option-value="id"
+                hide-bottom-space
+                use-input
+                hide-selected
+                fill-input
+                input-debounce="0"
+                clearable
+                @filter="(inputValue: string,
+                    doneFn: Function) => filterSelector(inputValue, doneFn, 'positionExecutive'
+                    )"
+              >
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+            </div>
+
+            <div class="col-xs-6 col-sm-6 col-md-4">
+              <q-input
+                :class="classInput(true)"
+                ref="salaryRef"
+                dense
+                outlined
+                v-model="formDataSalary.salary"
+                label="เงินเดือน"
+                mask="###,###,###,###"
+                reverse-fill-mask
+                :rules="[(val:string) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
+                lazy-rules
+                hide-bottom-space
+              />
+            </div>
+
+            <div class="col-xs-6 col-sm-6 col-md-4">
+              <q-input
+                :class="classInput(true)"
+                ref="amountRef"
+                dense
+                outlined
+                v-model="formDataSalary.salaryPos"
+                label="เงินประจำตำแหน่ง"
+                mask="###,###,###,###"
+                reverse-fill-mask
+                lazy-rules
+                hide-bottom-space
+              />
+            </div>
+
+            <div class="col-xs-6 col-sm-6 col-md-4">
+              <q-input
+                :class="classInput(true)"
+                ref="amountRef"
+                dense
+                outlined
+                v-model="formDataSalary.salaryCompensation"
+                label="เงินค่าตอบแทนรายเดือน"
+                mask="###,###,###,###"
+                reverse-fill-mask
+                lazy-rules
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-4">
+              <q-input
+                :class="classInput(true)"
+                ref="amountSpecialRef"
+                dense
+                outlined
+                v-model="formDataSalary.amountSpecial"
+                label="เงินค่าตอบแทนพิเศษ"
+                mask="###,###,###,###"
+                reverse-fill-mask
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-12">
+              <q-input
+                :class="classInput(true)"
+                outlined
+                dense
+                lazy-rules
+                borderless
+                v-model="formDataSalary.refCommandNo"
+                hide-bottom-space
+                :label="`${'เลขที่คำสั่ง'}`"
+              >
+                <!-- mask="#####################" -->
+                <!-- :rules="[(val: string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]" -->
+              </q-input>
+            </div>
+
+            <div class="col-xs-12 col-sm-12 col-md-12">
+              <q-select
+                :class="classInput(true)"
+                ref="templateDocRef"
+                outlined
+                dense
+                lazy-rules
+                borderless
+                clearable
+                v-model="formDataSalary.templateDoc"
+                :label="`${'ต้นแบบ (template) เอกสารอ้างอิง'}`"
+                option-label="name"
+                :options="docOption"
+                option-value="name"
+                emit-value
+                hide-bottom-space
+                use-input
+                hide-selected
+                fill-input
+                input-debounce="0"
+                @update:modelValue="updateDoc"
+                @filter="(inputValue: string,
+                        doneFn: Function) => filterSelector(inputValue, doneFn, 'doc'
+                        )"
+              >
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+            </div>
+
+            <div class="col-xs-12 col-sm-12 col-md-12">
+              <q-input
+                :class="classInput(true)"
+                ref="docRef"
+                outlined
+                dense
+                borderless
+                v-model="formDataSalary.doc"
+                :label="`${'เอกสารอ้างอิง'}`"
+                type="textarea"
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right">
+          <q-btn label="บันทึก" id="onSubmit" type="submit" color="public">
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+
+  <DialogHistory v-model:modal="modalHistory" v-model:salaryId="salaryId" />
+  <DialogPreviewCommand
+    v-model:modal="modalCommand"
+    v-model:command="command"
+    v-model:commandId="commandId"
+  />
 </template>
 
 <style scoped></style>
diff --git a/src/modules/04_registryPerson/components/detail/GovernmentInformation/07_PositionHistory.vue b/src/modules/04_registryPerson/components/detail/GovernmentInformation/07_PositionHistory.vue
new file mode 100644
index 000000000..8f50b09f4
--- /dev/null
+++ b/src/modules/04_registryPerson/components/detail/GovernmentInformation/07_PositionHistory.vue
@@ -0,0 +1,387 @@
+<script setup lang="ts">
+import { ref, watch, computed } from "vue";
+import { useQuasar } from "quasar";
+
+import { useRoute } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type { QTableProps } from "quasar";
+import type { ResListSalary } from "@/modules/04_registryPerson/interface/response/Salary";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+const $q = useQuasar();
+const route = useRoute();
+const {
+  date2Thai,
+  showLoader,
+  hideLoader,
+  messageError,
+  pathRegistryEmp,
+  onSearchDataTable,
+} = useCounterMixin();
+
+/** props*/
+const modal = defineModel<boolean>("modal", { required: true });
+const salaryId = defineModel<string>("salaryId", { required: true });
+
+const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
+
+const rows = ref<ResListSalary[]>([]); //รายการข้อมูลประวัติการแก้ไข
+const rowsMain = ref<ResListSalary[]>([]); //รายการข้อมูลประวัติการแก้ไข
+const keyword = ref<string>(""); //คำค้นหา
+const baseColumns = ref<QTableProps["columns"]>([
+  {
+    name: "commandDateAffect",
+    align: "left",
+    label: "วัน เดือน ปี",
+    sortable: true,
+    field: "commandDateAffect",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v),
+  },
+  {
+    name: "amount",
+    align: "left",
+    label: empType.value === "-employee" ? "ค่าตอบแทนรายเดือน" : "เงินเดือน",
+    sortable: true,
+    field: "amount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => Number(v).toLocaleString(),
+  },
+  {
+    name: "positionSalaryAmount",
+    align: "left",
+    label: "เงินประจำตำแหน่ง",
+    sortable: true,
+    field: "positionSalaryAmount",
+    headerStyle: "font-size: 14px",
+    format: (v) => Number(v).toLocaleString(),
+    style: "font-size: 14px",
+  },
+  {
+    name: "mouthSalaryAmount",
+    align: "left",
+    label: "เงินค่าตอบแทนรายเดือน",
+    sortable: true,
+    field: "mouthSalaryAmount",
+    headerStyle: "font-size: 14px",
+    format: (v) => Number(v).toLocaleString(),
+    style: "font-size: 14px",
+  },
+  {
+    name: "oc",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "oc",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionName",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "positionName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posNo",
+    align: "left",
+    label: "ตำแหน่งเลขที่",
+    sortable: true,
+    field: "posNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionLine",
+    align: "left",
+    label: "สายงาน",
+    sortable: true,
+    field: "positionLine",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionPathSide",
+    align: "left",
+    label: "ด้าน/สาขา",
+    sortable: true,
+    field: "positionPathSide",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionType",
+    align: "left",
+    label: "ตำแหน่งประเภท",
+    sortable: true,
+    field: "positionType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionLevel",
+    align: "left",
+    label: "ระดับ",
+    sortable: true,
+    field: "positionLevel",
+    format(val, row) {
+      return `${
+        row.positionLevel
+          ? row.positionLevel
+          : row.positionCee
+          ? row.positionCee
+          : "-"
+      }`;
+    },
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionExecutive",
+    align: "left",
+    label: "ตำแหน่งทางการบริหาร",
+    sortable: true,
+    field: "positionExecutive",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionExecutiveSide",
+    align: "left",
+    label: "ด้านทางการบริหาร",
+    sortable: true,
+    field: "positionExecutiveSide",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "salaryClass",
+    align: "left",
+    label: "ตำแหน่ง (รายละเอียด)",
+    sortable: true,
+    field: "salaryClass",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "commandName",
+    align: "left",
+    label: "เอกสารอ้างอิง",
+    sortable: true,
+    field: "commandName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    format(val, row) {
+      return row.commandNo && row.commandYear
+        ? `${row.commandNo}/${row.commandYear}`
+        : "";
+    },
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "remark",
+    align: "left",
+    label: "หมายเหตุ",
+    sortable: true,
+    field: "remark",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "lastUpdateFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "lastUpdateFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "lastUpdatedAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "lastUpdatedAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v, false, true),
+  },
+]);
+const visibleColumns = ref<string[]>([
+  "commandDateAffect",
+  "amount",
+  "positionSalaryAmount",
+  "mouthSalaryAmount",
+  "oc",
+  "positionName",
+  "posNo",
+  "positionLine",
+  "positionPathSide",
+  "positionType",
+  "positionLevel",
+  "positionExecutive",
+  "positionExecutiveSide",
+  "salaryClass",
+  "commandName",
+  "refCommandNo",
+  "remark",
+  "lastUpdateFullName",
+  "lastUpdatedAt",
+]);
+const columns = computed(() => {
+  if (empType.value === "-employee") {
+    if (baseColumns.value) {
+      return baseColumns.value.filter(
+        (column) =>
+          column.name !== "positionSalaryAmount" &&
+          column.name !== "mouthSalaryAmount"
+      );
+    }
+  }
+  return baseColumns.value;
+});
+const pagination = ref({
+  page: 1,
+  rowsPerPage: 10,
+});
+
+/** function fetch ข้อมูลประวัติการแก้ไข*/
+function fetchListHistory() {
+  showLoader();
+  http
+    .get(
+      config.API.profileListSalaryPositionHistoryNew(
+        salaryId.value,
+        empType.value
+      )
+    )
+    .then((res) => {
+      rows.value = res.data.result;
+      rowsMain.value = res.data.result;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** ฟังก์ชันปิด Popup*/
+function closeDialog() {
+  modal.value = false;
+  keyword.value = "";
+  rows.value = [];
+}
+
+/** ฟังก์ค้นหาข้อมูลรายการวินัย */
+function serchDataTable() {
+  rows.value = onSearchDataTable(
+    keyword.value,
+    rowsMain.value,
+    columns.value ? columns.value : []
+  );
+}
+
+/**
+ * ดูการเปลี่ยนแปลงของ modal
+ * ถ้า modal เป็น true  เรียก getHistory เพิ่อดึงข้อมูลประวัติการแก้ไข
+ */
+watch(
+  () => modal.value,
+  () => {
+    modal.value && fetchListHistory();
+  }
+);
+</script>
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="min-width: 80%">
+      <DialogHeader
+        :tittle="'ประวัติแก้ไขตำแหน่ง/เงินเดือน'"
+        :close="closeDialog"
+      />
+      <q-separator color="grey-4" />
+      <q-card-section style="max-height: 60vh" class="scroll">
+        <div class="row q-gutter-sm q-mb-sm">
+          <q-space />
+          <q-input
+            dense
+            outlined
+            v-model="keyword"
+            label="ค้นหา"
+            class="q-mr-sm"
+            @keydown.enter.pervent="serchDataTable"
+          >
+            <template v-slot:append>
+              <q-icon name="search" />
+            </template>
+          </q-input>
+
+          <q-select
+            v-model="visibleColumns"
+            multiple
+            outlined
+            dense
+            options-dense
+            :display-value="$q.lang.table.columns"
+            emit-value
+            map-options
+            :options="columns"
+            option-value="name"
+            style="min-width: 140px"
+          />
+        </div>
+        <d-table
+          ref="table"
+          row-key="id"
+          flat
+          bordered
+          dense
+          :columns="columns"
+          :rows="rows"
+          :paging="true"
+          v-model:pagination="pagination"
+          :rows-per-page-options="[10, 20, 50, 100]"
+          :visible-columns="visibleColumns"
+        >
+          <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-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props">
+              <q-td v-for="col in props.cols">
+                <div class="table_ellipsis">
+                  {{ col.value ? col.value : "-" }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/04_registryPerson/components/detail/GovernmentInformation/Main.vue b/src/modules/04_registryPerson/components/detail/GovernmentInformation/Main.vue
index 4cfe2ed29..4c9bc0777 100644
--- a/src/modules/04_registryPerson/components/detail/GovernmentInformation/Main.vue
+++ b/src/modules/04_registryPerson/components/detail/GovernmentInformation/Main.vue
@@ -35,10 +35,10 @@ const storeRegistry = useRegistryNewDataStore();
   >
     <q-tab name="1" label="ข้อมูลราชการ" />
     <q-tab name="7" label="ตำแหน่ง" />
+    <q-tab name="5" label="รักษาการในตำแหน่ง" />
     <q-tab name="2" label="วินัย" />
     <q-tab name="3" label="การลา" />
     <q-tab name="4" label="ปฏิบัติราชการพิเศษ" />
-    <q-tab name="5" label="รักษาการในตำแหน่ง" />
     <q-tab name="6" label="ช่วยราชการ" />
   </q-tabs>
   <q-separator />
diff --git a/src/modules/04_registryPerson/components/detail/Salary/01_PositionSalaryHistory.vue b/src/modules/04_registryPerson/components/detail/Salary/01_PositionSalaryHistory.vue
index 0e118bff4..6fad3db7b 100644
--- a/src/modules/04_registryPerson/components/detail/Salary/01_PositionSalaryHistory.vue
+++ b/src/modules/04_registryPerson/components/detail/Salary/01_PositionSalaryHistory.vue
@@ -34,11 +34,11 @@ const rowsMain = ref<ResListSalary[]>([]); //รายการข้อมู
 const keyword = ref<string>(""); //คำค้นหา
 const baseColumns = ref<QTableProps["columns"]>([
   {
-    name: "date",
+    name: "commandDateAffect",
     align: "left",
     label: "วัน เดือน ปี",
     sortable: true,
-    field: "date",
+    field: "commandDateAffect",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     format: (v) => date2Thai(v),
@@ -83,11 +83,11 @@ const baseColumns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "position",
+    name: "positionName",
     align: "left",
     label: "ตำแหน่ง",
     sortable: true,
-    field: "position",
+    field: "positionName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -133,6 +133,15 @@ const baseColumns = ref<QTableProps["columns"]>([
     label: "ระดับ",
     sortable: true,
     field: "positionLevel",
+    format(val, row) {
+      return `${
+        row.positionLevel
+          ? row.positionLevel
+          : row.positionCee
+          ? row.positionCee
+          : "-"
+      }`;
+    },
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -164,11 +173,11 @@ const baseColumns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "templateDoc",
+    name: "commandName",
     align: "left",
     label: "เอกสารอ้างอิง",
     sortable: true,
-    field: "templateDoc",
+    field: "commandName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -178,6 +187,20 @@ const baseColumns = ref<QTableProps["columns"]>([
     label: "เลขที่คำสั่ง",
     sortable: true,
     field: "refCommandNo",
+    format(val, row) {
+      return row.commandNo && row.commandYear
+        ? `${row.commandNo}/${row.commandYear}`
+        : "";
+    },
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "remark",
+    align: "left",
+    label: "หมายเหตุ",
+    sortable: true,
+    field: "remark",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -202,12 +225,12 @@ const baseColumns = ref<QTableProps["columns"]>([
   },
 ]);
 const visibleColumns = ref<string[]>([
-  "date",
+  "commandDateAffect",
   "amount",
   "positionSalaryAmount",
   "mouthSalaryAmount",
   "oc",
-  "position",
+  "positionName",
   "posNo",
   "positionLine",
   "positionPathSide",
@@ -216,8 +239,9 @@ const visibleColumns = ref<string[]>([
   "positionExecutive",
   "positionExecutiveSide",
   "salaryClass",
-  "templateDoc",
+  "commandName",
   "refCommandNo",
+  "remark",
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
diff --git a/src/modules/04_registryPerson/views/listView.vue b/src/modules/04_registryPerson/views/listView.vue
index 8ecd04468..89f64532f 100644
--- a/src/modules/04_registryPerson/views/listView.vue
+++ b/src/modules/04_registryPerson/views/listView.vue
@@ -779,6 +779,11 @@ onMounted(async () => {
               </q-list>
             </q-btn-dropdown>
           </div>
+          <div class="row justify-center">
+            <a href="/report/registry" class="text-white" target="_blank">
+              Advanced search
+            </a>
+          </div>
         </div>
       </div>
     </q-card-section>