diff --git a/src/modules/13_salary/store/SalaryEmployeeListsStore.ts b/src/modules/13_salary/store/SalaryEmployeeListsStore.ts
index bc6531fa9..66f4eed9b 100644
--- a/src/modules/13_salary/store/SalaryEmployeeListsStore.ts
+++ b/src/modules/13_salary/store/SalaryEmployeeListsStore.ts
@@ -107,6 +107,10 @@ export const useSalaryEmployeeListSDataStore = defineStore(
         id: "emp-12",
         name: "บัญชีรายละเอียดผู้ได้รับอัตราค่าจ้างสูงกว่าขั้นสูง (แนบท้ายคำสั่ง) ",
       },
+      {
+        id: "emp-12",
+        name: "บัญชีรายละเอียดผู้ได้รับอัตราค่าจ้างสูงกว่าขั้นสูง (แนบท้ายคำสั่ง PDF) ",
+      },
       {
         id: "emp-13",
         name: "บัญชีรายชื่อลูกจ้างประจำผู้ไม่ได้รับการเลื่อนขั้นค่าจ้าง",
@@ -115,6 +119,10 @@ export const useSalaryEmployeeListSDataStore = defineStore(
         id: "emp-15",
         name: "บัญชีรายละเอียดลูกจ้างประจำที่ได้รับค่าตอบแทนพิเศษ(แนบท้ายคำสั่ง)",
       },
+      {
+        id: "emp-15",
+        name: "บัญชีรายละเอียดลูกจ้างประจำที่ได้รับค่าตอบแทนพิเศษ(แนบท้ายคำสั่ง PDF)",
+      },
       {
         id: "emp-14",
         name: "บัญชีรายชื่อลูกจ้างประจำผู้ไม่ได้รับค่าตอบแทนพิเศษ",
@@ -171,6 +179,10 @@ export const useSalaryEmployeeListSDataStore = defineStore(
         id: "emp2-13",
         name: "บัญชีรายละเอียดแสดงการเลื่อนขั้นค่าจ้างและให้ลูกจ้างประจำกรุงเทพมหานครได้รับอัตราค่าจ้างสูงกว่า ฯ ที่เกษียณอายุราชการ ในสิ้นปีงบประมาณ (แนบท้ายคำสั่ง)",
       },
+      {
+        id: "emp2-13",
+        name: "บัญชีรายละเอียดแสดงการเลื่อนขั้นค่าจ้างและให้ลูกจ้างประจำกรุงเทพมหานครได้รับอัตราค่าจ้างสูงกว่า ฯ ที่เกษียณอายุราชการ ในสิ้นปีงบประมาณ (แนบท้ายคำสั่ง PDF)",
+      },
       {
         id: "emp2-14",
         name: "บัญชีรายชื่อลูกจ้างประจำกรุงเทพมหานครผู้ไม่ได้รับการเลื่อนขั้นค่าจ้างที่เกษียณอายุราชการ ในสิ้นปีงบประมาณ",
@@ -183,6 +195,10 @@ export const useSalaryEmployeeListSDataStore = defineStore(
         id: "emp2-17",
         name: "บัญชีรายละเอียดแสดงการเลื่อนขั้นค่าจ้างและให้ลูกจ้างประจำกรุงเทพมหานครได้รับอัตราค่าจ้างสูงกว่า อัตราค่าจ้างขั้นสูงของตำแหน่งที่ได้รับแต่งตั้งในแต่ละระดับ (แนบท้ายคำสั่ง)",
       },
+      {
+        id: "emp2-17",
+        name: "บัญชีรายละเอียดแสดงการเลื่อนขั้นค่าจ้างและให้ลูกจ้างประจำกรุงเทพมหานครได้รับอัตราค่าจ้างสูงกว่า อัตราค่าจ้างขั้นสูงของตำแหน่งที่ได้รับแต่งตั้งในแต่ละระดับ (แนบท้ายคำสั่ง PDF)",
+      },
       {
         id: "emp2-18",
         name: "บัญชีรายชื่อลูกจ้างประจำกรุงเทพมหานครผู้ไม่ได้รับการเลื่อนขั้นค่าจ้าง",
@@ -191,6 +207,10 @@ export const useSalaryEmployeeListSDataStore = defineStore(
         id: "emp2-20",
         name: "บัญชีรายละเอียดให้ลูกจ้างประจำกรุงเทพมหานครได้รับค่าตอบแทนพิเศษ (แนบท้ายคำสั่ง)",
       },
+      {
+        id: "emp2-20",
+        name: "บัญชีรายละเอียดให้ลูกจ้างประจำกรุงเทพมหานครได้รับค่าตอบแทนพิเศษ (แนบท้ายคำสั่ง PDF)",
+      },
       {
         id: "emp2-21",
         name: "บัญชีรายชื่อลูกจ้างประจำกรุงเทพมหานครผู้ไม่ได้รับค่าตอบแทนพิเศษ",
@@ -199,6 +219,10 @@ export const useSalaryEmployeeListSDataStore = defineStore(
         id: "emp2-23",
         name: "บัญชีรายละเอียดแสดงการเลื่อนขั้นค่าจ้างและให้ลูกจ้างประจำกรุงเทพมหานครได้รับอัตราค่าจ้างสูงกว่า อัตราค่าจ้างขั้นสูงของตำแหน่งที่ได้รับแต่งตั้งในแต่ละระดับ (แนบท้ายคำสั่ง)",
       },
+      {
+        id: "emp2-23",
+        name: "บัญชีรายละเอียดแสดงการเลื่อนขั้นค่าจ้างและให้ลูกจ้างประจำกรุงเทพมหานครได้รับอัตราค่าจ้างสูงกว่า อัตราค่าจ้างขั้นสูงของตำแหน่งที่ได้รับแต่งตั้งในแต่ละระดับ (แนบท้ายคำสั่ง PDF)",
+      },
       {
         id: "emp2-25",
         name: "แบบฟอร์มบัญชีถือจ่ายอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานคร ประจำปีงบประมาณ",
diff --git a/src/modules/13_salary/store/SalaryListsStore.ts b/src/modules/13_salary/store/SalaryListsStore.ts
index 3cf944cbe..73344ae05 100644
--- a/src/modules/13_salary/store/SalaryListsStore.ts
+++ b/src/modules/13_salary/store/SalaryListsStore.ts
@@ -89,10 +89,18 @@ export const useSalaryListSDataStore = defineStore("salaryListStore", () => {
       id: "gov-07",
       name: "แนบท้ายคำสั่งเลื่อนเงินเดือน รอบเมษายน",
     },
+    {
+      id: "gov-07",
+      name: "แนบท้ายคำสั่งเลื่อนเงินเดือน รอบเมษายน (PDF)",
+    },
     {
       id: "gov-08",
       name: "แนบท้ายคำสั่งค่าตอบแทนพิเศษ และผู้ไม่ได้เลื่อน รอบเมษายน",
     },
+    {
+      id: "gov-08",
+      name: "แนบท้ายคำสั่งค่าตอบแทนพิเศษ และผู้ไม่ได้เลื่อน รอบเมษายน (PDF)",
+    },
   ]);
 
   /** List Download รายงานของรอบตุลาคม*/
@@ -137,14 +145,26 @@ export const useSalaryListSDataStore = defineStore("salaryListStore", () => {
       id: "gov-07-01",
       name: "แนบท้ายคำสั่งเลื่อนเงินเดือนข้าราชการเกษียณ",
     },
+    {
+      id: "gov-07-01",
+      name: "แนบท้ายคำสั่งเลื่อนเงินเดือนข้าราชการเกษียณ (PDF)",
+    },
     {
       id: "gov-07",
       name: "แนบท้ายคำสั่งเลื่อนเงินเดือน รอบตุลาคม",
     },
+    {
+      id: "gov-07",
+      name: "แนบท้ายคำสั่งเลื่อนเงินเดือน รอบตุลาคม (PDF)",
+    },
     {
       id: "gov-08",
       name: "แนบท้ายคำสั่งค่าตอบแทนพิเศษ และผู้ไม่ได้เลื่อนเงินเดือน รอบตุลาคม",
     },
+    {
+      id: "gov-08",
+      name: "แนบท้ายคำสั่งค่าตอบแทนพิเศษ และผู้ไม่ได้เลื่อนเงินเดือน รอบตุลาคม (PDF)",
+    },
   ]);
 
   function fetchPeriodLatest(data: DataPeriodLatest, type: string) {
diff --git a/src/modules/14_KPI/components/results/tableIndividual.vue b/src/modules/14_KPI/components/results/tableIndividual.vue
new file mode 100644
index 000000000..77b574e12
--- /dev/null
+++ b/src/modules/14_KPI/components/results/tableIndividual.vue
@@ -0,0 +1,428 @@
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/**
+ * importType
+ */
+import type { QTableProps } from "quasar";
+import type { ResResults } from "@/modules/14_KPI/interface/response/Main";
+import type { DataOption } from "@/modules/14_KPI/interface/index/Main";
+
+/**
+ * importStore
+ */
+import { useCounterMixin } from "@/stores/mixin";
+import { useKpiDataStore } from "@/modules/14_KPI/store";
+
+/**
+ * use
+ */
+const $q = useQuasar();
+const {
+  showLoader,
+  success,
+  messageError,
+  dialogConfirm,
+  hideLoader,
+  date2Thai,
+} = useCounterMixin();
+const store = useKpiDataStore();
+
+/**
+ * props
+ */
+const tab = defineModel<string>("tab", { required: true });
+const rows = ref<[]>([]); // ข่อมูลรายการ
+const page = ref<number>(1);
+const pageSize = ref<number>(10);
+const maxPage = ref<number>(1);
+const total = ref<number>(1);
+const keyword = ref<string>("");
+
+/**
+ * Table
+ */
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullName",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "fullName",
+    format: (val, row) => {
+      return `${row.prefix ?? ""}${row.firstName ?? ""} ${row.lastName ?? ""}`;
+    },
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ความรู้/ทักษะ/สมรรถนะ ที่ต้องได้รับการพัฒนา",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "organization",
+    align: "left",
+    label: "หน่วยงาน/ส่วนราชการ",
+    sortable: true,
+    field: "organization",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posTypeName",
+    align: "left",
+    label: "ตำแหน่งประเภท",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posLevelName",
+    align: "left",
+    label: "ระดับตำแหน่ง",
+    sortable: true,
+    field: "posLevelName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "root",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "root",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const visibleColumns = ref<string[]>([
+  "no",
+  "fullName",
+  "name",
+  "organization",
+  "position",
+  "posTypeName",
+  "posLevelName",
+  "root",
+]);
+
+const pagination = ref({
+  page: page.value,
+  rowsPerPage: pageSize.value,
+});
+
+/**
+ * function fetch รายการแผนพัฒนาการปฏิบัติราชการรายบุคคลย้อนหลัง
+ */
+function fetcDataList() {
+  rows.value = [
+    {
+      id: "08dca241-ddfa-4678-89f4-62ad60c41aa8",
+      prefix: "นาย",
+      firstName: "ชัยชนะ",
+      lastName: "เรืองโรจน์",
+      root: "สำนักงานเขตพระนคร",
+      rootId: "e8493cd1-d371-402e-add6-566e68d5d1b3",
+      rootShortName: "ขพน.",
+      position: "นักวิเคราะห์นโยบายและแผน",
+      posTypeId: "1526d9d3-d8b1-43ab-81b5-a84dfbe08071",
+      posTypeName: "วิชาการ",
+      posLevelId: "1526d9d3-d8b1-43ab-81b5-a84dfbe08562",
+      posLevelName: "ปฏิบัติการ",
+      createdAt: "2024-07-12T14:11:35.885071",
+      name: "พัฒนาการสื่อสาร",
+      organization: "ฝ่ายทะเบียน สำนักงานเขตพระนคร",
+    },
+  ];
+  total.value = 1;
+  maxPage.value = Math.ceil(total.value / pageSize.value);
+
+  // showLoader();
+  // http
+  //   .post(config.API.evaluationUser, {
+  //     status: tab.value,
+  //     page: page.value,
+  //     pageSize: pageSize.value,
+  //     keyword: keyword.value,
+  //     kpiPeriodId: store.formQuery.round ? store.formQuery.round : "",
+  //   })
+  //   .then((res) => {
+  //     const data = res.data.result;
+  //     rows.value = data.data;
+  //     total.value = data.total;
+  //     maxPage.value = Math.ceil(total.value / pageSize.value);
+  //   })
+  //   .catch((err) => {
+  //     messageError($q, err);
+  //   })
+  //   .finally(() => {
+  //     hideLoader();
+  //   });
+}
+
+const year = ref<number | null>(new Date().getFullYear());
+const roundOp = ref<DataOption[]>([]);
+function fetchRoundOption() {
+  showLoader();
+  http
+    .get(
+      config.API.kpiPeriod +
+        `?page=${1}&pageSize=${10}&keyword=${""}&year=${year.value}`
+    )
+    .then(async (res) => {
+      const data = await res.data.result.data;
+      if (res.data.result.data.length > 0) {
+        const list = await data.map((e: any) => ({
+          id: e.id,
+          name:
+            e.durationKPI === "OCT"
+              ? "รอบที่ 2 ตุลาคม"
+              : e.durationKPI === "APR"
+              ? "รอบที่ 1 เมษายน"
+              : "",
+        }));
+
+        roundOp.value = list;
+        store.formQuery.round = list[0].id;
+        fetcDataList();
+      } else {
+        roundOp.value = [];
+        store.formQuery.round = "";
+      }
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function changRound() {
+  store.formQuery.page = 1;
+  fetcDataList();
+}
+
+/**
+ * ค้นหาข้อมูล
+ */
+function onSearchData() {
+  page.value = 1;
+  fetcDataList();
+}
+
+function clearYear() {
+  year.value = null;
+  store.formQuery.round = "";
+  roundOp.value = [];
+  fetcDataList();
+}
+/**
+ * ทำงานเมื่อมีการเปลี่ยนแถวต่อหน้า
+ */
+watch(pagination, () => {
+  page.value = 1;
+  pageSize.value = pagination.value.rowsPerPage;
+});
+
+onMounted(() => {
+  fetchRoundOption();
+});
+</script>
+
+<template>
+  <q-card-section>
+    <div class="items-center col-12 row q-gutter-x-sm q-mb-sm">
+      <div class="row q-gutter-sm">
+        <datepicker
+          menu-class-name="modalfix"
+          v-model="year"
+          style="width: 150px"
+          :locale="'th'"
+          autoApply
+          year-picker
+          :enableTimePicker="false"
+          @update:model-value="fetchRoundOption()"
+        >
+          <template #year="{ year }">{{ year + 543 }}</template>
+          <template #year-overlay-value="{ value }">{{
+            parseInt(value + 543)
+          }}</template>
+          <template #trigger>
+            <q-input
+              dense
+              outlined
+              hide-bottom-space
+              :model-value="!!year ? year + 543 : null"
+              :label="`${'ปีงบประมาณ'}`"
+              clearable
+              @clear="clearYear"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+
+        <q-select
+          v-model="store.formQuery.round"
+          outlined
+          label="รอบการประเมิน"
+          dense
+          option-label="name"
+          option-value="id"
+          :options="roundOp"
+          style="min-width: 150px"
+          emit-value
+          map-options
+          @update:model-value="changRound"
+        />
+
+        <!-- <q-select
+              v-model="status"
+              outlined
+              label="สถานะการประเมิน"
+              dense
+              option-label="name"
+              option-value="id"
+              :options="store.statusOptions"
+              style="min-width: 180px"
+              emit-value
+              map-options
+              @update:model-value="changRound"
+            /> -->
+      </div>
+
+      <q-space />
+
+      <q-input
+        borderless
+        dense
+        outlined
+        v-model="keyword"
+        placeholder="ค้นหา"
+        @keydown.enter="onSearchData"
+      >
+        <template v-slot:append>
+          <q-icon v-if="keyword === ''" name="search" />
+          <q-icon
+            v-else
+            name="clear"
+            class="cursor-pointer"
+            @click="(keyword = ''), onSearchData()"
+          />
+        </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
+      />
+    </div>
+    <d-table
+      :columns="columns"
+      :rows="rows"
+      row-key="id"
+      :selection="tab === 'COMPLETE' ? 'multiple' : null"
+      v-model:selected="selected"
+      :rows-per-page-options="[10, 25, 50, 100]"
+      v-model:pagination="pagination"
+      :paging="true"
+    >
+      <template v-slot:header-selection="scope" v-if="tab === 'COMPLETE'">
+        <q-checkbox keep-color color="primary" dense v-model="scope.selected" />
+      </template>
+      <template v-slot:body="props">
+        <q-tr :props="props" class="cursor-pointer">
+          <q-td v-if="tab === 'COMPLETE'">
+            <q-checkbox
+              keep-color
+              color="primary"
+              dense
+              v-model="props.selected"
+            />
+          </q-td>
+          <q-td v-for="col in props.cols" :key="col.name" :props="props">
+            <div v-if="col.name == 'no'">
+              {{ (page - 1) * pageSize + props.rowIndex + 1 }}
+            </div>
+            <div v-else>
+              {{ col.value ?? "-" }}
+            </div>
+          </q-td>
+        </q-tr>
+      </template>
+      <template v-slot:pagination="scope">
+        ทั้งหมด {{ total }} รายการ
+        <q-pagination
+          v-model="page"
+          active-color="primary"
+          color="dark"
+          :max="Number(maxPage)"
+          size="sm"
+          boundary-links
+          direction-links
+          :max-pages="5"
+          @update:model-value="fetcDataList()"
+        ></q-pagination>
+      </template>
+    </d-table>
+  </q-card-section>
+  <q-separator v-if="tab === 'COMPLETE'" />
+
+  <q-card-actions
+    align="right"
+    class="bg-white text-teal"
+    v-if="tab === 'COMPLETE'"
+  >
+    <q-btn
+      label="ประกาศผล"
+      color="public"
+      @click="onAnnounce"
+      :disable="selected.length === 0"
+    />
+  </q-card-actions>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/14_KPI/components/results/tableResults.vue b/src/modules/14_KPI/components/results/tableResults.vue
index 2f3935f14..f2832be07 100644
--- a/src/modules/14_KPI/components/results/tableResults.vue
+++ b/src/modules/14_KPI/components/results/tableResults.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { onMounted, ref, watch } from "vue";
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -9,6 +9,7 @@ import config from "@/app.config";
  */
 import type { QTableProps } from "quasar";
 import type { ResResults } from "@/modules/14_KPI/interface/response/Main";
+import type { DataOption } from "@/modules/14_KPI/interface/index/Main";
 
 /**
  * importStore
@@ -29,6 +30,7 @@ const {
   date2Thai,
 } = useCounterMixin();
 const { convertResults, convertStatus } = useKpiDataStore();
+const store = useKpiDataStore();
 
 /**
  * props
@@ -105,6 +107,51 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
+  {
+    name: "organization",
+    align: "left",
+    label: "หน่วยงาน/ส่วนราชการ",
+    sortable: true,
+    field: "organization",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posTypeName",
+    align: "left",
+    label: "ตำแหน่งประเภท",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posLevelName",
+    align: "left",
+    label: "ระดับตำแหน่ง",
+    sortable: true,
+    field: "posLevelName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "root",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "root",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
 ]);
 const visibleColumns = ref<string[]>([
   "no",
@@ -112,6 +159,11 @@ const visibleColumns = ref<string[]>([
   "createdAt",
   "evaluationStatus",
   "evaluationResults",
+  "organization",
+  "position",
+  "posTypeName",
+  "posLevelName",
+  "root",
 ]);
 const pagination = ref({
   page: page.value,
@@ -149,6 +201,49 @@ function onAnnounce() {
   );
 }
 
+const year = ref<number | null>(new Date().getFullYear());
+const roundOp = ref<DataOption[]>([]);
+function fetchRoundOption() {
+  showLoader();
+  http
+    .get(
+      config.API.kpiPeriod +
+        `?page=${1}&pageSize=${10}&keyword=${""}&year=${year.value}`
+    )
+    .then(async (res) => {
+      const data = await res.data.result.data;
+      if (res.data.result.data.length > 0) {
+        const list = await data.map((e: any) => ({
+          id: e.id,
+          name:
+            e.durationKPI === "OCT"
+              ? "รอบที่ 2 ตุลาคม"
+              : e.durationKPI === "APR"
+              ? "รอบที่ 1 เมษายน"
+              : "",
+        }));
+
+        roundOp.value = list;
+        store.formQuery.round = list[0].id;
+        porps.fetchData();
+      } else {
+        roundOp.value = [];
+        store.formQuery.round = "";
+      }
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function changRound() {
+  store.formQuery.page = 1;
+  porps.fetchData();
+}
+
 /**
  * ค้นหาข้อมูล
  */
@@ -157,6 +252,12 @@ function onSearchData() {
   porps.fetchData();
 }
 
+function clearYear() {
+  year.value = null;
+  store.formQuery.round = "";
+  roundOp.value = [];
+  porps.fetchData();
+}
 /**
  * ทำงานเมื่อมีการเปลี่ยนแถวต่อหน้า
  */
@@ -164,11 +265,81 @@ watch(pagination, () => {
   page.value = 1;
   pageSize.value = pagination.value.rowsPerPage;
 });
+
+onMounted(() => {
+  fetchRoundOption();
+});
 </script>
 
 <template>
   <q-card-section>
     <div class="items-center col-12 row q-gutter-x-sm q-mb-sm">
+      <div class="row q-gutter-sm">
+        <datepicker
+          menu-class-name="modalfix"
+          v-model="year"
+          style="width: 150px"
+          :locale="'th'"
+          autoApply
+          year-picker
+          :enableTimePicker="false"
+          @update:model-value="fetchRoundOption()"
+        >
+          <template #year="{ year }">{{ year + 543 }}</template>
+          <template #year-overlay-value="{ value }">{{
+            parseInt(value + 543)
+          }}</template>
+          <template #trigger>
+            <q-input
+              dense
+              outlined
+              hide-bottom-space
+              :model-value="!!year ? year + 543 : null"
+              :label="`${'ปีงบประมาณ'}`"
+              clearable
+              @clear="clearYear"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+
+        <q-select
+          v-model="store.formQuery.round"
+          outlined
+          label="รอบการประเมิน"
+          dense
+          option-label="name"
+          option-value="id"
+          :options="roundOp"
+          style="min-width: 150px"
+          emit-value
+          map-options
+          @update:model-value="changRound"
+        />
+
+        <!-- <q-select
+              v-model="status"
+              outlined
+              label="สถานะการประเมิน"
+              dense
+              option-label="name"
+              option-value="id"
+              :options="store.statusOptions"
+              style="min-width: 180px"
+              emit-value
+              map-options
+              @update:model-value="changRound"
+            /> -->
+      </div>
+
       <q-space />
 
       <q-input
diff --git a/src/modules/14_KPI/views/resultsMain.vue b/src/modules/14_KPI/views/resultsMain.vue
index c6be1b040..8251a4915 100644
--- a/src/modules/14_KPI/views/resultsMain.vue
+++ b/src/modules/14_KPI/views/resultsMain.vue
@@ -14,15 +14,17 @@ import type { ResResults } from "@/modules/14_KPI/interface/response/Main";
  * import components
  */
 import TableResults from "@/modules/14_KPI/components/results/tableResults.vue";
-
+import TableIndividual from "@/modules/14_KPI/components/results/tableIndividual.vue";
 /**
  * importStore
  */
 import { useCounterMixin } from "@/stores/mixin";
+import { useKpiDataStore } from "@/modules/14_KPI/store";
 
 /**
  *  use
  */
+const store = useKpiDataStore();
 const $q = useQuasar();
 const { messageError, showLoader, hideLoader } = useCounterMixin();
 
@@ -33,6 +35,7 @@ const tab = ref<string>("COMPLETE");
 const tabItems = ref<ItemsTab[]>([
   { name: "COMPLETE", label: " รอประกาศผล" },
   { name: "KP7", label: "ประกาศผลแล้ว" },
+  { name: "IDP", label: "แผนพัฒนาการปฏิบัติราชการรายบุคคล" },
 ]);
 const dataList = ref<ResResults[]>([]); // ข่อมูลรายการ
 const page = ref<number>(1);
@@ -52,10 +55,27 @@ function fetcDataList() {
       page: page.value,
       pageSize: pageSize.value,
       keyword: keyword.value,
+      kpiPeriodId: store.formQuery.round ? store.formQuery.round : "",
     })
     .then((res) => {
-      const data = res.data.result;
-      dataList.value = data.data;
+      const data = res.data.result.data;
+      for (let index = 0; index < data.length; index++) {
+        const element = data[index];
+        dataList.value.push({
+          ...element,
+          root: "สำนักงานเขตพระนคร",
+          rootId: "e8493cd1-d371-402e-add6-566e68d5d1b3",
+          rootShortName: "ขพน.",
+          position: "นักวิเคราะห์นโยบายและแผน",
+          posTypeId: "1526d9d3-d8b1-43ab-81b5-a84dfbe08071",
+          posTypeName: "วิชาการ",
+          posLevelId: "1526d9d3-d8b1-43ab-81b5-a84dfbe08562",
+          posLevelName: "ปฏิบัติการ",
+          organization: "ฝ่ายทะเบียน สำนักงานเขตพระนคร",
+        });
+      }
+      // dataList.value = data.data;
+
       total.value = data.total;
       maxPage.value = Math.ceil(total.value / pageSize.value);
     })
@@ -70,10 +90,10 @@ function fetcDataList() {
 /**
  * ทำงานเมื่อมีการเปลี่ยน Tab
  */
-watch(tab, () => {
+watch(tab, (t) => {
   page.value = 1;
   keyword.value = "";
-  fetcDataList();
+  t == "KP7" || t == "COMPLETE" ? fetcDataList() : "";
 });
 
 /**
@@ -135,6 +155,9 @@ onMounted(() => {
           :fetchData="fetcDataList"
         />
       </q-tab-panel>
+      <q-tab-panel name="IDP" style="padding: 0px">
+        <TableIndividual :tab="tab" />
+      </q-tab-panel>
     </q-tab-panels>
   </q-card>
 </template>
diff --git a/src/modules/15_development/views/MainPage.vue b/src/modules/15_development/views/MainPage.vue
index c16fa86d8..2876a15e3 100644
--- a/src/modules/15_development/views/MainPage.vue
+++ b/src/modules/15_development/views/MainPage.vue
@@ -411,7 +411,7 @@ onMounted(() => {
 
           <q-space />
 
-          <!-- <q-btn
+          <q-btn
             flat
             round
             dense
@@ -420,7 +420,7 @@ onMounted(() => {
             @click="onDownload"
           >
             <q-tooltip>ดาวน์โหลด</q-tooltip>
-          </q-btn> -->
+          </q-btn>
 
           <q-input
             standout