diff --git a/src/modules/13_salary/components/DialogInfoMain.vue b/src/modules/13_salary/components/DialogInfoMain.vue
new file mode 100644
index 000000000..90722a956
--- /dev/null
+++ b/src/modules/13_salary/components/DialogInfoMain.vue
@@ -0,0 +1,178 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useQuasar } from "quasar";
+import { useRouter } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/**
+ * importCOmponents
+ */
+import InfoSalary from "@/modules/13_salary/components/InfoSalary.vue";
+import InfoDiscipline from "@/modules/13_salary/components/InfoDiscipline.vue";
+import InfoLeave from "@/modules/13_salary/components/InfoLeave.vue";
+
+/**
+ * importStore
+ */
+import { useCounterMixin } from "@/stores/mixin";
+
+/**
+ * use
+ */
+const $q = useQuasar();
+const router = useRouter();
+const { showLoader, hideLoader, messageError } = useCounterMixin();
+
+/**
+ *  props
+ */
+const modal = defineModel<boolean>("modal", { required: true });
+const profileId = defineModel<string>("profileId", { required: true });
+const props = defineProps({
+  type: { type: String, default: "" },
+  employeeClass: { type: String, default: "" },
+});
+
+/**
+ * ตัวแปร
+ */
+const avatar = ref<string>("");
+const fullName = ref<string>("");
+const position = ref<string>("");
+
+/**
+ * function เรียกข้อมูลส่วนตัว
+ */
+function fetchInformation() {
+  showLoader();
+  http
+    .get(config.API.orgProfileById(profileId.value, props.employeeClass))
+    .then((res) => {
+      const data = res.data.result;
+      fullName.value = `${data.prefix}${data.firstName} ${data.lastName}`;
+      position.value = data.position;
+      if (data.avatarName) {
+        fetchProfile(data.id as string, data.avatarName);
+      }
+    })
+    .catch((err) => {
+      messageError($q, err);
+      hideLoader();
+    });
+}
+
+/**
+ * function fetch รูปโปรไฟล์
+ * @param id profileId
+ * @param avatarName ชื้อไฟล์
+ */
+function fetchProfile(id: string, avatarName: string) {
+  http
+    .get(config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, avatarName))
+    .then(async (res) => {
+      avatar.value = res.data.downloadUrl;
+    });
+}
+
+/**
+ * function rediract ไปทะเบียนประวัติ
+ */
+function redirecToRegistry() {
+  router.push(`/registry-new${props.employeeClass}/${profileId.value}`);
+  modal.value = false;
+}
+
+watch(
+  () => modal.value,
+  async () => {
+    modal.value && fetchInformation();
+  }
+);
+</script>
+
+<template>
+  <q-dialog v-model="modal" position="right" :maximized="true">
+    <q-card style="width: 1300px; overflow: visible">
+      <q-card-section class="col q-pt-none bg-grey-12" style="height: 100%">
+        <div class="q-gutter-md">
+          <q-card bordered class="text-center bg-grey-12">
+            <div class="q-mt-md">
+              <q-avatar size="120px" color="grey-4">
+                <img
+                  v-if="avatar"
+                  :src="avatar"
+                  class="bg-grey-3"
+                  style="object-fit: cover"
+                />
+                <img
+                  src="@/assets/avatar_user.jpg"
+                  class="bg-grey-3"
+                  style="object-fit: cover"
+                />
+              </q-avatar>
+            </div>
+            <div
+              class="q-mt-md text-subtitle2 text-bold"
+              style="font-size: 18px"
+            >
+              {{ fullName }}
+            </div>
+
+            <div class="q-mb-xs text-center text-grey" v-if="position">
+              {{ position }}
+            </div>
+            <div class="q-mt-md">
+              <q-btn
+                class="bg-white"
+                outline
+                rounded
+                label="ดูรายละเอียดเพิ่มเติมทั้งหมด"
+                color="secondary"
+                @click.prevent="redirecToRegistry"
+              />
+            </div>
+          </q-card>
+
+          <q-scroll-area style="height: 65vh; max-width: 100%">
+            <div class="q-gutter-md q-pa-sm">
+              <q-card bordered style="border: 1px solid #d6dee1">
+                <q-card-section>
+                  <div class="text-weight-bold row items-center">
+                    <span class="q-ml-md">
+                      {{
+                        type === "posSalary"
+                          ? "ข้อมูลเงินเดือน / ค่าจ้าง"
+                          : type === "discipline"
+                          ? "ข้อมูลวินัย"
+                          : "ข้อมูลการลา"
+                      }}
+                    </span>
+                  </div>
+                </q-card-section>
+
+                <InfoSalary
+                  v-if="type === 'posSalary'"
+                  v-model:profileId="profileId"
+                  :employeeClass="employeeClass"
+                />
+                <InfoDiscipline
+                  v-if="type === 'discipline'"
+                  v-model:profileId="profileId"
+                  :employeeClass="employeeClass"
+                />
+                <InfoLeave
+                  v-if="type === 'leave'"
+                  v-model:profileId="profileId"
+                  :employeeClass="employeeClass"
+                />
+              </q-card>
+            </div>
+          </q-scroll-area>
+        </div>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/13_salary/components/InfoDiscipline.vue b/src/modules/13_salary/components/InfoDiscipline.vue
new file mode 100644
index 000000000..5b5a21a20
--- /dev/null
+++ b/src/modules/13_salary/components/InfoDiscipline.vue
@@ -0,0 +1,194 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useQuasar } from "quasar";
+
+/**
+ * importType
+ */
+import type { QTableProps } from "quasar";
+import type { DataDiscipline } from "@/modules/13_salary/interface/response/Main";
+
+/**
+ * importStore
+ */
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
+const { date2Thai, showLoader, hideLoader, messageError } = useCounterMixin();
+
+/**
+ *  props
+ */
+
+const profileId = defineModel<string>("profileId", { required: true });
+const employeeClass = defineModel<string>("employeeClass", { required: true });
+
+/**
+ * Table
+ */
+const keyword = ref<string>("");
+const rows = ref<DataDiscipline[]>([]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "date",
+    align: "left",
+    label: "วัน เดือน ปี",
+    sortable: true,
+    field: "date",
+    format: (v) => date2Thai(v),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "detail",
+    align: "left",
+    label: "รายละเอียด",
+    sortable: true,
+    field: "detail",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "level",
+    align: "left",
+    label: "ระดับการลงโทษทางวินัย",
+    sortable: true,
+    field: "level",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "unStigma",
+    align: "left",
+    label: "ประเภทคำสั่ง",
+    sortable: true,
+    field: "unStigma",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "refCommandDate",
+    align: "left",
+    label: "เอกสารอ้างอิง (ลงวันที่)",
+    sortable: true,
+    field: "refCommandDate",
+    format: (v) => date2Thai(v),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const visibleColumns = ref<string[]>([
+  "level",
+  "detail",
+  "unStigma",
+  "refCommandNo",
+  "refCommandDate",
+  "date",
+]);
+
+/**
+ * function fetch ข้อมูลวินัย
+ */
+function fetchListDiscipline() {
+  showLoader();
+  http
+    .get(
+      config.API.profileNewDisciplineByProfileId(
+        profileId.value,
+        employeeClass.value
+      )
+    )
+    .then((res) => {
+      rows.value = res.data.result;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+onMounted(() => {
+  fetchListDiscipline();
+});
+</script>
+
+<template>
+  <q-card-section>
+    <div class="row items-center q-gutter-x-sm q-pb-sm">
+      <q-space />
+      <q-input dense outlined v-model="keyword" label="ค้นหา" class="q-mr-sm">
+        <template v-slot:append>
+          <q-icon v-if="keyword == ''" name="search" />
+          <q-icon
+            v-else
+            name="clear"
+            class="cursor-pointer"
+            @click="keyword = ''"
+          />
+        </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"
+        options-cover
+        style="min-width: 150px"
+      />
+    </div>
+    <div class="col-12">
+      <d-table
+        ref="table"
+        row-key="id"
+        flat
+        bordered
+        dense
+        :filter="keyword"
+        :paging="true"
+        :rows-per-page-options="[20, 50, 100]"
+        :visible-columns="visibleColumns"
+        :rows="rows"
+        :columns="columns"
+      >
+        <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" class="cursor-pointer">
+            <q-td v-for="col in props.cols" :key="col.id">
+              <div class="table_ellipsis">
+                {{ col.value ? col.value : "-" }}
+              </div>
+            </q-td>
+          </q-tr>
+        </template>
+      </d-table>
+    </div>
+  </q-card-section>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/13_salary/components/InfoLeave.vue b/src/modules/13_salary/components/InfoLeave.vue
new file mode 100644
index 000000000..8a98b9f13
--- /dev/null
+++ b/src/modules/13_salary/components/InfoLeave.vue
@@ -0,0 +1,219 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useQuasar } from "quasar";
+
+/**
+ * importType
+ */
+import type { QTableProps } from "quasar";
+import type { DataLeave } from "@/modules/13_salary/interface/response/Main";
+
+/**
+ * importStore
+ */
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
+const { date2Thai, showLoader, hideLoader, messageError } = useCounterMixin();
+
+/**
+ *  props
+ */
+
+const profileId = defineModel<string>("profileId", { required: true });
+const employeeClass = defineModel<string>("employeeClass", { required: true });
+
+/**
+ * Table
+ */
+const keyword = ref<string>("");
+const rows = ref<DataLeave[]>([]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    field: (row) => rows.value.indexOf(row) + 1,
+  },
+  {
+    name: "leaveType",
+    align: "left",
+    label: "ประเภทการลา",
+    sortable: true,
+    field: "leaveType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    field: (row) => row.leaveType.name,
+  },
+  {
+    name: "dateLeave",
+    align: "left",
+    label: "วัน เดือน ปี ที่ลา",
+    sortable: true,
+    field: "dateLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    field: (row) => dateThaiRange([row.dateLeaveStart, row.dateLeaveEnd]),
+  },
+  {
+    name: "leaveDays",
+    align: "left",
+    label: "จำนวนวันลา",
+    sortable: true,
+    field: "leaveDays",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => convertStatus(v),
+  },
+  {
+    name: "reason",
+    align: "left",
+    label: "เหตุผล",
+    sortable: true,
+    field: "reason",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const visibleColumns = ref<string[]>([
+  "no",
+  "leaveType",
+  "dateLeave",
+  "leaveDays",
+  "status",
+  "reason",
+]);
+
+/**
+ * function fetch ข้อมูลการลา
+ */
+function fetchListSalary() {
+  showLoader();
+  http
+    .get(config.API.profileNewLeaveById(profileId.value, employeeClass.value))
+    .then((res) => {
+      rows.value = res.data.result;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * แปลงช่วงวันที่ถ้า2ค่าเป็นวันเดียวกันจะโชววันเดียวแต่ถ้าไม่เท่ากันจะแสดงเป็นช่วง
+ * @param val ช่วงวันที่
+ */
+function dateThaiRange(val: [Date, Date]) {
+  if (val === null) {
+  } else if (date2Thai(val[0]) === date2Thai(val[1])) {
+    return `${date2Thai(val[0])}`;
+  } else {
+    return `${date2Thai(val[0])} - ${date2Thai(val[1])} `;
+  }
+}
+
+function convertStatus(val: string) {
+  switch (val) {
+    case "waitting":
+      return "รออนุมัติ";
+    case "reject":
+      return "ไม่ผ่านการอนุมัติ";
+    case "approve":
+      return "ผ่านการอนุมัติ";
+    case "cancel":
+      return "ยกเลิก";
+    default:
+      return "-";
+  }
+}
+
+onMounted(() => {
+  fetchListSalary();
+});
+</script>
+
+<template>
+  <q-card-section>
+    <div class="row items-center q-gutter-x-sm q-pb-sm">
+      <q-space />
+      <q-input dense outlined v-model="keyword" label="ค้นหา" class="q-mr-sm">
+        <template v-slot:append>
+          <q-icon v-if="keyword == ''" name="search" />
+          <q-icon
+            v-else
+            name="clear"
+            class="cursor-pointer"
+            @click="keyword = ''"
+          />
+        </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"
+        options-cover
+        style="min-width: 150px"
+      />
+    </div>
+    <div class="col-12">
+      <d-table
+        ref="table"
+        row-key="id"
+        flat
+        bordered
+        dense
+        :filter="keyword"
+        :paging="true"
+        :rows-per-page-options="[20, 50, 100]"
+        :visible-columns="visibleColumns"
+        :rows="rows"
+        :columns="columns"
+      >
+        <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" class="cursor-pointer">
+            <q-td v-for="col in props.cols" :key="col.id">
+              <div class="table_ellipsis">
+                {{ col.value ? col.value : "-" }}
+              </div>
+            </q-td>
+          </q-tr>
+        </template>
+      </d-table>
+    </div>
+  </q-card-section>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/13_salary/components/InfoSalary.vue b/src/modules/13_salary/components/InfoSalary.vue
new file mode 100644
index 000000000..829fbdcc3
--- /dev/null
+++ b/src/modules/13_salary/components/InfoSalary.vue
@@ -0,0 +1,237 @@
+<script setup lang="ts">
+import { ref, onMounted, computed } from "vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useQuasar } from "quasar";
+
+/**
+ * importType
+ */
+import type { QTableProps } from "quasar";
+import type { DataPosSalary } from "@/modules/13_salary/interface/response/Main";
+
+/**
+ * importStore
+ */
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
+const { date2Thai, showLoader, hideLoader, messageError } = useCounterMixin();
+
+/**
+ *  props
+ */
+
+const profileId = defineModel<string>("profileId", { required: true });
+const employeeClass = defineModel<string>("employeeClass", { required: true });
+
+/**
+ * Table
+ */
+const keyword = ref<string>("");
+const rows = ref<DataPosSalary[]>([]);
+const baseColumns = ref<QTableProps["columns"]>([
+  {
+    name: "date",
+    align: "left",
+    label: "วัน เดือน ปี",
+    sortable: true,
+    field: "date",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v),
+  },
+  {
+    name: "amount",
+    align: "left",
+    label:
+      employeeClass.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: "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",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+
+  {
+    name: "templateDoc",
+    align: "left",
+    label: "เอกสารอ้างอิง",
+    sortable: true,
+    field: "templateDoc",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const columns = computed(() => {
+  if (employeeClass.value === "-employee") {
+    if (baseColumns.value) {
+      return baseColumns.value.filter(
+        (column) =>
+          column.name !== "positionSalaryAmount" &&
+          column.name !== "mouthSalaryAmount"
+      );
+    }
+  }
+  return baseColumns.value;
+});
+const visibleColumns = ref<string[]>([
+  "date",
+  "amount",
+  "positionSalaryAmount",
+  "mouthSalaryAmount",
+  "posNo",
+  "positionType",
+  "positionLevel",
+  "templateDoc",
+  "refCommandNo",
+]);
+
+/**
+ * function fetch ข้อมูลเงินเดือน / ค่าจ้าง
+ */
+function fetchListSalary() {
+  showLoader();
+  http
+    .get(config.API.profileListSalaryNew(profileId.value, employeeClass.value))
+    .then((res) => {
+      rows.value = res.data.result;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+onMounted(() => {
+  fetchListSalary();
+});
+</script>
+
+<template>
+  <q-card-section>
+    <div class="row items-center q-gutter-x-sm q-pb-sm">
+      <q-space />
+      <q-input dense outlined v-model="keyword" label="ค้นหา" class="q-mr-sm">
+        <template v-slot:append>
+          <q-icon v-if="keyword == ''" name="search" />
+          <q-icon
+            v-else
+            name="clear"
+            class="cursor-pointer"
+            @click="keyword = ''"
+          />
+        </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"
+        options-cover
+        style="min-width: 150px"
+      />
+    </div>
+    <div class="col-12">
+      <d-table
+        ref="table"
+        row-key="id"
+        flat
+        bordered
+        dense
+        :filter="keyword"
+        :paging="true"
+        :rows-per-page-options="[20, 50, 100]"
+        :visible-columns="visibleColumns"
+        :rows="rows"
+        :columns="columns"
+      >
+        <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" class="cursor-pointer">
+            <q-td v-for="col in props.cols" :key="col.id">
+              <div class="table_ellipsis">
+                {{ col.value ? col.value : "-" }}
+              </div>
+            </q-td>
+          </q-tr>
+        </template>
+      </d-table>
+    </div>
+  </q-card-section>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/13_salary/components/SalaryEmployeeLists/TableTypePending.vue b/src/modules/13_salary/components/SalaryEmployeeLists/TableTypePending.vue
index d181c0cd6..e15253f7c 100644
--- a/src/modules/13_salary/components/SalaryEmployeeLists/TableTypePending.vue
+++ b/src/modules/13_salary/components/SalaryEmployeeLists/TableTypePending.vue
@@ -13,6 +13,7 @@ import DialogFormEdit from "@/modules/13_salary/components/SalaryEmployeeLists/D
 import DialogMoveGroup from "@/modules/13_salary/components/SalaryEmployeeLists/DialogMoveGroup.vue";
 import DialogMoveLevel from "@/modules/13_salary/components/SalaryEmployeeLists/DialogMoveLevel.vue";
 import DialogProperties from "@/modules/13_salary/components/SalaryEmployeeLists/DialogProperties.vue";
+import DialogInfo from "@/modules/13_salary/components/DialogInfoMain.vue";
 
 /** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
@@ -137,24 +138,6 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-  {
-    name: "duration",
-    align: "center",
-    label: "ระยะเวลาการปฏิบัติราชการในรอบครึ่งปี",
-    sortable: false,
-    field: "duration",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "isPunish",
-    align: "center",
-    label: "ไม่ถูกลงโทษทางวินัย",
-    sortable: false,
-    field: "isPunish",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
   {
     name: "isSuspension",
     align: "center",
@@ -165,20 +148,29 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "isAbsent",
+    name: "posSalary",
     align: "center",
-    label: "ไม่ขาดราชการ",
+    label: "ประวัติตำแหน่ง/เงินเดือน",
     sortable: false,
-    field: "isAbsent",
+    field: "posSalary",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "isLeave",
+    name: "discipline",
     align: "center",
-    label: "วันลาไม่เกิน",
+    label: "วินัย",
     sortable: false,
-    field: "isLeave",
+    field: "discipline",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "leave",
+    align: "center",
+    label: "การลา",
+    sortable: false,
+    field: "leave",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -192,13 +184,12 @@ const visibleColumns = ref<string[]>([
   "amount",
   "organization",
   "result",
-  "duration",
-  "isPunish",
   "isSuspension",
-  "isAbsent",
-  "isLeave",
   "group",
   "salaryLevel",
+  "posSalary",
+  "discipline",
+  "leave",
 ]);
 
 /** modalDialog*/
@@ -207,6 +198,7 @@ const modalDialogForm = ref<boolean>(false);
 const modalDialogMoveGroup = ref<boolean>(false);
 const modalDialogMoveLeve = ref<boolean>(false);
 const modalDialogProperties = ref<boolean>(false);
+const modalDialogInfo = ref<boolean>(false);
 
 /** ตัวแปร*/
 const profileId = ref<string>("");
@@ -311,6 +303,13 @@ watch(
     updatePagePagination();
   }
 );
+
+const infoType = ref<string>("");
+function onClickViewInfo(type: string, id: string) {
+  infoType.value = type;
+  profileId.value = id;
+  modalDialogInfo.value = true;
+}
 </script>
 
 <template>
@@ -410,58 +409,7 @@ watch(
               }${props.row.root ? props.row.root : ""}`
             }}
           </div>
-          <!-- <div v-else-if="col.name === 'isResult'">
-            <q-checkbox
-              disable
-              keep-color
-              color="primary"
-              v-model="props.row.isResult"
-            />
-          </div>
-          <div v-else-if="col.name === 'isDuration'">
-            <q-checkbox
-              disable
-              keep-color
-              color="primary"
-              v-model="props.row.isDuration"
-            />
-          </div>
-          <div v-else-if="col.name === 'isPunish'">
-            <q-checkbox
-              disable
-              keep-color
-              color="primary"
-              v-model="props.row.isPunish"
-            />
-          </div>
-          <div v-else-if="col.name === 'isRetired'">
-            <q-checkbox
-              disable
-              keep-color
-              color="primary"
-              v-model="props.row.isRetired"
-            />
-          </div>
-          <div v-else-if="col.name === 'isRetired2'">
-            <q-checkbox
-              disable
-              keep-color
-              color="primary"
-              v-model="props.row.isRetired2"
-              false
-            />
-          </div> -->
-          <div v-else-if="col.name == 'isPunish'">
-            <q-icon
-              v-if="props.row.isPunish !== null"
-              :name="props.row.isPunish ? 'done' : 'close'"
-              :color="props.row.isPunish ? 'primary' : 'red'"
-              size="24px"
-            />
-            <div v-else-if="props.row.isPunish == null">
-              {{ props.row.isPunish == null ? "-" : "" }}
-            </div>
-          </div>
+
           <div v-else-if="col.name == 'isSuspension'">
             <q-icon
               v-if="props.row.isSuspension !== null"
@@ -473,31 +421,30 @@ watch(
               {{ props.row.isSuspension == null ? "-" : "" }}
             </div>
           </div>
-          <div v-else-if="col.name == 'isAbsent'">
-            <q-icon
-              v-if="props.row.isAbsent !== null"
-              :name="props.row.isAbsent ? 'done' : 'close'"
-              :color="props.row.isAbsent ? 'primary' : 'red'"
-              size="24px"
-            />
-            <div v-else-if="props.row.isAbsent == null">
-              {{ props.row.isAbsent == null ? "-" : "" }}
-            </div>
-          </div>
+
           <div v-else-if="col.name == 'amount'">
             {{ Number(props.row.amount).toLocaleString() }}
           </div>
-          <div v-else-if="col.name == 'isLeave'">
-            <q-icon
-              v-if="props.row.isLeave !== null"
-              :name="props.row.isLeave ? 'done' : 'close'"
-              :color="props.row.isLeave ? 'primary' : 'red'"
-              size="24px"
-            />
-            <div v-else-if="props.row.isLeave == null">
-              {{ props.row.isLeave == null ? "-" : "" }}
-            </div>
+
+          <div
+            v-else-if="
+              col.name == 'posSalary' ||
+              col.name == 'discipline' ||
+              col.name == 'leave'
+            "
+          >
+            <q-btn
+              flat
+              dense
+              icon="info"
+              class="q-pa-none q-ml-xs"
+              color="info"
+              size="12px"
+              @click.pervent="onClickViewInfo(col.name, props.row.profileId)"
+            >
+            </q-btn>
           </div>
+
           <div v-else>
             {{ col.value ? col.value : "-" }}
           </div>
@@ -593,6 +540,7 @@ watch(
     v-model:modal="modalDialogMoveLeve"
     v-model:profileId="profileId"
     :fetchData="props.fetchDataTable"
+    :remark="''"
   />
   <DialogProperties
     v-model:modal="modalDialogProperties"
@@ -603,6 +551,13 @@ watch(
     :is-leave="isLeave"
     :fetch-data="props.fetchDataTable"
   />
+
+  <DialogInfo
+    v-model:modal="modalDialogInfo"
+    v-model:profileId="profileId"
+    :type="infoType"
+    :employeeClass="'-employee'"
+  />
 </template>
 
 <style scoped></style>
diff --git a/src/modules/13_salary/components/SalaryLists/DialogMoveLevel.vue b/src/modules/13_salary/components/SalaryLists/DialogMoveLevel.vue
index acfc11957..831f7d44d 100644
--- a/src/modules/13_salary/components/SalaryLists/DialogMoveLevel.vue
+++ b/src/modules/13_salary/components/SalaryLists/DialogMoveLevel.vue
@@ -108,6 +108,8 @@ function chengType() {
 watch(
   () => modal.value,
   () => {
+    console.log(props.remark);
+
     type.value = props.typeLevel == "PENDING" ? "" : props.typeLevel;
     note.value = props.typeLevel === "NONE" ? props.remark : "";
     isReserve.value = props.isReserve;
diff --git a/src/modules/13_salary/components/SalaryLists/TableTypePending.vue b/src/modules/13_salary/components/SalaryLists/TableTypePending.vue
index 0b160c6d0..f1f779934 100644
--- a/src/modules/13_salary/components/SalaryLists/TableTypePending.vue
+++ b/src/modules/13_salary/components/SalaryLists/TableTypePending.vue
@@ -13,6 +13,7 @@ import DialogFormEdit from "@/modules/13_salary/components/SalaryLists/DialogFor
 import DialogMoveGroup from "@/modules/13_salary/components/SalaryLists/DialogMoveGroup.vue";
 import DialogMoveLevel from "@/modules/13_salary/components/SalaryLists/DialogMoveLevel.vue";
 import DialogProperties from "@/modules/13_salary/components/SalaryLists/DialogProperties.vue";
+import DialogInfo from "@/modules/13_salary/components/DialogInfoMain.vue";
 
 /** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
@@ -125,24 +126,6 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-  {
-    name: "duration",
-    align: "center",
-    label: "ระยะเวลาการปฏิบัติราชการในรอบครึ่งปี",
-    sortable: false,
-    field: "duration",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "isPunish",
-    align: "center",
-    label: "ไม่ถูกลงโทษทางวินัย",
-    sortable: false,
-    field: "isPunish",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
   {
     name: "isSuspension",
     align: "center",
@@ -152,21 +135,31 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
+
   {
-    name: "isAbsent",
+    name: "posSalary",
     align: "center",
-    label: "ไม่ขาดราชการ",
+    label: "ประวัติตำแหน่ง/เงินเดือน",
     sortable: false,
-    field: "isAbsent",
+    field: "posSalary",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "isLeave",
+    name: "discipline",
     align: "center",
-    label: "วันลาไม่เกิน",
+    label: "วินัย",
     sortable: false,
-    field: "isLeave",
+    field: "discipline",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "leave",
+    align: "center",
+    label: "การลา",
+    sortable: false,
+    field: "leave",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -181,11 +174,10 @@ const visibleColumns = ref<string[]>([
   "amount",
   "organization",
   "result",
-  "duration",
-  "isPunish",
+  "posSalary",
+  "discipline",
+  "leave",
   "isSuspension",
-  "isAbsent",
-  "isLeave",
 ]);
 
 /** modalDialog*/
@@ -194,6 +186,7 @@ const modalDialogForm = ref<boolean>(false);
 const modalDialogMoveGroup = ref<boolean>(false);
 const modalDialogMoveLeve = ref<boolean>(false);
 const modalDialogProperties = ref<boolean>(false);
+const modalDialogInfo = ref<boolean>(false);
 
 /** ตัวแปร*/
 const profileId = ref<string>("");
@@ -253,6 +246,7 @@ function onClickMovieGroup(id: string) {
 
 const typeLevel = ref<string>("");
 const isReserve = ref<boolean>(false);
+
 /**
  * function openPopup ย้ายกขั้น
  * @param id profileId
@@ -290,6 +284,7 @@ function onProperties(data: any) {
   isAbsent.value = data.isAbsent;
   isLeave.value = data.isLeave;
 }
+
 /** callblack function เรียกข้อมูลรายชื่อใหม่ เมื่อมีการเปลี่ยน PageSize*/
 watch(
   () => formFilter.value.pageSize,
@@ -297,6 +292,13 @@ watch(
     updatePagePagination();
   }
 );
+
+const infoType = ref<string>("");
+function onClickViewInfo(type: string, id: string) {
+  infoType.value = type;
+  profileId.value = id;
+  modalDialogInfo.value = true;
+}
 </script>
 
 <template>
@@ -396,57 +398,8 @@ watch(
               }${props.row.root ? props.row.root : ""}`
             }}
           </div>
-          <!-- <div v-else-if="col.name === 'isResult'">
-            <q-checkbox
-              disable
-              keep-color
-              color="primary"
-              v-model="props.row.isResult"
-            />
-          </div>
-          <div v-else-if="col.name === 'isDuration'">
-            <q-checkbox
-              disable
-              keep-color
-              color="primary"
-              v-model="props.row.isDuration"
-            />
-          </div>
-          <div v-else-if="col.name === 'isPunish'">
-            <q-checkbox
-              disable
-              keep-color
-              color="primary"
-              v-model="props.row.isPunish"
-            />
-          </div>
-          <div v-else-if="col.name === 'isRetired'">
-            <q-checkbox
-              disable
-              keep-color
-              color="primary"
-              v-model="props.row.isRetired"
-            />
-          </div>
-          <div v-else-if="col.name === 'isRetired2'">
-            <q-checkbox
-              disable
-              keep-color
-              color="primary"
-              v-model="props.row.isRetired2"
-              false
-            />
-          </div> -->
-          <div v-else-if="col.name == 'isPunish'">
-            <q-icon
-              v-if="props.row.isPunish !== null"
-              :name="props.row.isPunish ? 'done' : 'close'"
-              :color="props.row.isPunish ? 'primary' : 'red'"
-              size="24px"
-            />
-            <div v-else-if="props.row.isPunish == null">
-              {{ props.row.isPunish == null ? "-" : "" }}
-            </div>
+          <div v-else-if="col.name == 'amount'">
+            {{ Number(props.row.amount).toLocaleString() }}
           </div>
           <div v-else-if="col.name == 'isSuspension'">
             <q-icon
@@ -459,31 +412,25 @@ watch(
               {{ props.row.isSuspension == null ? "-" : "" }}
             </div>
           </div>
-          <div v-else-if="col.name == 'isAbsent'">
-            <q-icon
-              v-if="props.row.isAbsent !== null"
-              :name="props.row.isAbsent ? 'done' : 'close'"
-              :color="props.row.isAbsent ? 'primary' : 'red'"
-              size="24px"
-            />
-            <div v-else-if="props.row.isAbsent == null">
-              {{ props.row.isAbsent == null ? "-" : "" }}
-            </div>
-          </div>
-          <div v-else-if="col.name == 'amount'">
-            {{ Number(props.row.amount).toLocaleString() }}
-          </div>
-          <div v-else-if="col.name == 'isLeave'">
-            <q-icon
-              v-if="props.row.isLeave !== null"
-              :name="props.row.isLeave ? 'done' : 'close'"
-              :color="props.row.isLeave ? 'primary' : 'red'"
-              size="24px"
-            />
-            <div v-else-if="props.row.isLeave == null">
-              {{ props.row.isLeave == null ? "-" : "" }}
-            </div>
+          <div
+            v-else-if="
+              col.name == 'posSalary' ||
+              col.name == 'discipline' ||
+              col.name == 'leave'
+            "
+          >
+            <q-btn
+              flat
+              dense
+              icon="info"
+              class="q-pa-none q-ml-xs"
+              color="info"
+              size="12px"
+              @click.pervent="onClickViewInfo(col.name, props.row.profileId)"
+            >
+            </q-btn>
           </div>
+
           <div v-else>
             {{ col.value ? col.value : "-" }}
           </div>
@@ -579,6 +526,7 @@ watch(
     v-model:modal="modalDialogMoveLeve"
     v-model:profileId="profileId"
     :fetchData="props.fetchDataTable"
+    :remark="''"
   />
   <DialogProperties
     v-model:modal="modalDialogProperties"
@@ -589,6 +537,13 @@ watch(
     :is-leave="isLeave"
     :fetch-data="props.fetchDataTable"
   />
+
+  <DialogInfo
+    v-model:modal="modalDialogInfo"
+    v-model:profileId="profileId"
+    :type="infoType"
+    :employeeClass="''"
+  />
 </template>
 
 <style scoped></style>
diff --git a/src/modules/13_salary/interface/response/Main.ts b/src/modules/13_salary/interface/response/Main.ts
index 0b828a3b3..48eea3705 100644
--- a/src/modules/13_salary/interface/response/Main.ts
+++ b/src/modules/13_salary/interface/response/Main.ts
@@ -56,6 +56,75 @@ interface Row {
   total: number;
 }
 
+interface DataPosSalary {
+  amount: number;
+  createdAt: string;
+  createdFullName: string;
+  createdUserId: string;
+  date: string;
+  id: string;
+  lastUpdateFullName: string;
+  lastUpdateUserId: string;
+  lastUpdatedAt: string;
+  mouthSalaryAmount: number;
+  order: number;
+  posNo: string;
+  position: string;
+  positionExecutive: string;
+  positionLevel: string;
+  positionLine: string;
+  positionPathSide: string;
+  positionSalaryAmount: number;
+  positionType: string;
+  profileEmployeeId: string;
+  profileId: string;
+  refCommandNo: string;
+  templateDoc: string;
+}
+
+interface DataDiscipline {
+  date: string;
+  detail: string;
+  id: string;
+  lastUpdateFullName: string;
+  lastUpdatedAt: string;
+  level: string;
+  refCommandDate: string;
+  refCommandNo: string;
+  unStigma: string;
+}
+interface DataLeave {
+  id: string;
+  createdAt: string;
+  createdUserId: string;
+  lastUpdatedAt: string;
+  lastUpdateUserId: string;
+  createdFullName: string;
+  lastUpdateFullName: string;
+  profileId: string;
+  profileEmployeeId: string;
+  leaveTypeId: string;
+  dateLeaveStart: string;
+  dateLeaveEnd: string;
+  leaveDays: number;
+  leaveCount: number;
+  totalLeave: number;
+  status: string;
+  reason: string;
+  leaveType: {
+    id: string;
+    createdAt: string;
+    createdUserId: string;
+    lastUpdatedAt: string;
+    lastUpdateUserId: string;
+    createdFullName: string;
+    lastUpdateFullName: string;
+    name: string;
+    code: string;
+    limit: number;
+  };
+}
+
 export type {
   Salary,
   SalaryRate,
@@ -64,4 +133,7 @@ export type {
   RowList,
   Row,
   DataOption,
+  DataPosSalary,
+  DataDiscipline,
+  DataLeave,
 };
diff --git a/src/modules/14_KPI/views/report.vue b/src/modules/14_KPI/views/report.vue
index 409003368..bda3917fa 100644
--- a/src/modules/14_KPI/views/report.vue
+++ b/src/modules/14_KPI/views/report.vue
@@ -233,6 +233,7 @@ function changOption(val: string) {
     val === "KPI2" ||
     val === "KPI3" ||
     val === "KPI7" ||
+    val === "KPI8" ||
     val === "KPI9"
   ) {
     persanalId.value = "";
@@ -552,6 +553,7 @@ onMounted(() => {
             typeReport === 'KPI2' ||
             typeReport === 'KPI3' ||
             typeReport === 'KPI7' ||
+            typeReport === 'KPI8' ||
             typeReport === 'KPI9'
           "
         >
@@ -605,6 +607,7 @@ onMounted(() => {
             @update:model-value="changOption(typeReport)"
           />
           <q-select
+            v-if="typeReport !== 'KPI8'"
             class="bg-white"
             :disable="roundOp.length === 0"
             style="min-width: 100px"
@@ -632,8 +635,21 @@ onMounted(() => {
           >
         </div>
 
-        <div class="q-pa-sm" v-else>
-          <q-btn color="primary" label="เลือกรายชื่อ" @click="onClickModal" />
+        <div
+          class="q-pa-sm"
+          v-if="
+            typeReport === 'KPI4' ||
+            typeReport === 'KPI5' ||
+            typeReport === 'KPI6' ||
+            typeReport === 'KPI8'
+          "
+        >
+          <q-btn
+            color="primary"
+            label="เลือกรายชื่อ"
+            @click="onClickModal"
+            :disable="roundOp.length === 0 && typeReport === 'KPI8'"
+          />
         </div>
       </q-toolbar>