diff --git a/src/modules/02_organizationalNew/components/DialogMovePos.vue b/src/modules/02_organizationalNew/components/DialogMovePos.vue
index ae406442c..8335e92cf 100644
--- a/src/modules/02_organizationalNew/components/DialogMovePos.vue
+++ b/src/modules/02_organizationalNew/components/DialogMovePos.vue
@@ -9,6 +9,7 @@ import type {
   OrgTree,
   PosMaster2,
 } from "@/modules/02_organizationalNew/interface/response/organizational";
+import type { NewPagination } from "@/modules/02_organizationalNew/interface/index/Main";
 import type {
   MovePos,
   FilterMaster,
@@ -125,6 +126,7 @@ watch(
   () => {
     reqMaster.value.page = 1;
     filterTree.value = "";
+    pagination.value.rowsPerPage = reqMaster.value.pageSize;
 
     title.value = `ย้ายตำแหน่งจากหน่วยงาน/ส่วนราชการปัจจุบัน ${props.mainTree.orgName}`;
     if (modal.value && props.type === "SINGER") {
@@ -137,173 +139,207 @@ watch(
     }
   }
 );
+
+/**
+ * function updatePagination
+ * @param newPagination ข้อมูล Pagination ใหม่
+ */
+function updatePagination(newPagination: NewPagination) {
+  reqMaster.value.pageSize = newPagination.rowsPerPage;
+  reqMaster.value.page = 1;
+}
+
+const pagination = ref({
+  page: reqMaster.value.page,
+  rowsPerPage: reqMaster.value.pageSize,
+});
 </script>
+
 <template>
   <q-dialog v-model="modal" full-width persistent>
-    <q-card>
-      <HeaderDialog :tittle="title" :close="() => (modal = false)" />
-      <q-separator />
+    <q-layout
+      view="lHh lpr lFf"
+      container
+      style="height: 90vh"
+      class="bg-white"
+    >
+      <q-header>
+        <q-toolbar>
+          <HeaderDialog :tittle="title" :close="() => (modal = false)" />
+        </q-toolbar>
+        <q-separator color="grey-4" />
+      </q-header>
 
-      <q-card-section class="q-pt-none bg-grey-2 q-pa-sm">
-        <div class="row">
-          <q-card bordered class="col-12 col-sm-8 q-pa-sm">
-            <q-toolbar style="padding: 0">
-              <q-toolbar-title class="text-subtitle2 text-bold"
-                >เลือกตำแหน่งที่ต้องการย้าย</q-toolbar-title
-              >
-              <q-space />
-
-              <div>
-                <q-input outlined dense v-model="filterTable" label="ค้นหา" />
-              </div>
-            </q-toolbar>
-
-            <d-table
-              flat
-              bordered
-              :rows="rows"
-              :columns="columns"
-              row-key="id"
-              :filter="filterTable"
-              no-data-label="ไม่มีข้อมูล"
-              selection="multiple"
-              v-model:selected="selectedFilter"
-            >
-              <template v-slot:header-selection="scope">
-                <q-checkbox
-                  keep-color
-                  color="primary"
-                  dense
-                  v-model="scope.selected"
-                />
-              </template>
-              <template v-slot:body="props">
-                <q-tr :props="props" class="cursor-pointer">
-                  <q-td>
-                    <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'">
-                      {{
-                        (reqMaster.page - 1) * Number(reqMaster.pageSize) +
-                        props.rowIndex +
-                        1
-                      }}
-                    </div>
-
-                    <div v-else>
-                      {{ col.value }}
-                    </div>
-                  </q-td>
-                </q-tr>
-              </template>
-              <template v-slot:pagination="scope">
-                <q-pagination
-                  v-model="reqMaster.page"
-                  active-color="primary"
-                  color="dark"
-                  :max="totalPage"
-                  size="sm"
-                  boundary-links
-                  direction-links
-                ></q-pagination>
-              </template>
-            </d-table>
-          </q-card>
-
-          <q-card
-            bordered
-            class="col-12 col-sm-4 scroll q-pa-sm"
-            style="height: 750px"
-          >
-            <q-toolbar style="padding: 0">
-              <q-toolbar-title class="text-subtitle2 text-bold"
-                >เลือกหน่วยงาน/ส่วนราชการปลายทาง</q-toolbar-title
-              >
-            </q-toolbar>
-
-            <q-input
-              ref="filterRef"
-              dense
-              outlined
-              v-model="filterTree"
-              label="ค้นหา"
-            >
-              <template v-slot:append>
-                <q-icon
-                  v-if="filterTree !== ''"
-                  name="clear"
-                  class="cursor-pointer"
-                  @click="resetFilter"
-                />
-              </template>
-            </q-input>
-            <q-tree
-              class="q-pa-md q-gutter-sm"
-              dense
-              default-expand-all
-              selected-color="primary"
-              :nodes="nodeTree"
-              node-key="orgTreeId"
-              label-key="labelName"
-              :filter="filterTree"
-              no-results-label="ไม่พบข้อมูลที่ค้นหา"
-              no-nodes-label="ไม่มีข้อมูล"
-            >
-              <template v-slot:default-header="prop">
-                <!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
-
-                <q-item
-                  clickable
-                  :active="selectedTree == prop.node.orgTreeId"
-                  @click.stop="updateSelected(prop.node)"
-                  active-class="my-list-link text-primary text-weight-medium"
-                  class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
+      <q-page-container>
+        <q-page class="q-pa-md">
+          <div class="row">
+            <q-card bordered class="col-12 col-sm-8 q-pa-sm">
+              <q-toolbar style="padding: 0">
+                <q-toolbar-title class="text-subtitle2 text-bold"
+                  >เลือกตำแหน่งที่ต้องการย้าย</q-toolbar-title
                 >
-                  <div>
-                    <div class="text-weight-medium">
-                      {{ prop.node.orgTreeName }}
-                    </div>
-                    <div class="text-weight-light">
-                      {{ prop.node.orgCode == null ? null : prop.node.orgCode }}
-                      {{
-                        prop.node.orgTreeShortName == null
-                          ? null
-                          : prop.node.orgTreeShortName
-                      }}
-                    </div>
-                  </div>
-                </q-item>
-              </template>
-            </q-tree>
-          </q-card>
-        </div>
-      </q-card-section>
-      <q-separator />
+                <q-space />
 
-      <q-card-actions align="right">
-        <q-btn
-          unelevated
-          label="ย้ายตำแหน่ง"
-          color="public"
-          @click="onClickMovePos"
-          class="q-px-md"
-          :disable="isDisable"
-        >
-          <q-tooltip>ย้ายตำแหน่ง</q-tooltip>
-        </q-btn>
-      </q-card-actions>
-    </q-card>
+                <div>
+                  <q-input outlined dense v-model="filterTable" label="ค้นหา" />
+                </div>
+              </q-toolbar>
+
+              <d-table
+                flat
+                bordered
+                :rows="rows"
+                :columns="columns"
+                row-key="id"
+                :filter="filterTable"
+                no-data-label="ไม่มีข้อมูล"
+                selection="multiple"
+                v-model:selected="selectedFilter"
+                :rows-per-page-options="[10, 25, 50, 100]"
+                v-model:pagination="pagination"
+                @update:pagination="updatePagination"
+              >
+                <template v-slot:header-selection="scope">
+                  <q-checkbox
+                    keep-color
+                    color="primary"
+                    dense
+                    v-model="scope.selected"
+                  />
+                </template>
+                <template v-slot:body="props">
+                  <q-tr :props="props" class="cursor-pointer">
+                    <q-td>
+                      <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'">
+                        {{
+                          (reqMaster.page - 1) * Number(reqMaster.pageSize) +
+                          props.rowIndex +
+                          1
+                        }}
+                      </div>
+
+                      <div v-else>
+                        {{ col.value }}
+                      </div>
+                    </q-td>
+                  </q-tr>
+                </template>
+                <template v-slot:pagination="scope">
+                  <q-pagination
+                    v-model="reqMaster.page"
+                    active-color="primary"
+                    color="dark"
+                    :max="totalPage"
+                    :max-pages="5"
+                    size="sm"
+                    boundary-links
+                    direction-links
+                  ></q-pagination>
+                </template>
+              </d-table>
+            </q-card>
+
+            <q-card
+              bordered
+              class="col-12 col-sm-4 scroll q-pa-sm"
+              style="height: 75vh"
+            >
+              <q-toolbar style="padding: 0">
+                <q-toolbar-title class="text-subtitle2 text-bold"
+                  >เลือกหน่วยงาน/ส่วนราชการปลายทาง</q-toolbar-title
+                >
+              </q-toolbar>
+
+              <q-input
+                ref="filterRef"
+                dense
+                outlined
+                v-model="filterTree"
+                label="ค้นหา"
+              >
+                <template v-slot:append>
+                  <q-icon
+                    v-if="filterTree !== ''"
+                    name="clear"
+                    class="cursor-pointer"
+                    @click="resetFilter"
+                  />
+                </template>
+              </q-input>
+              <q-tree
+                class="q-pa-md q-gutter-sm"
+                dense
+                default-expand-all
+                selected-color="primary"
+                :nodes="nodeTree"
+                node-key="orgTreeId"
+                label-key="labelName"
+                :filter="filterTree"
+                no-results-label="ไม่พบข้อมูลที่ค้นหา"
+                no-nodes-label="ไม่มีข้อมูล"
+              >
+                <template v-slot:default-header="prop">
+                  <!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
+
+                  <q-item
+                    clickable
+                    :active="selectedTree == prop.node.orgTreeId"
+                    @click.stop="updateSelected(prop.node)"
+                    active-class="my-list-link text-primary text-weight-medium"
+                    class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
+                  >
+                    <div>
+                      <div class="text-weight-medium">
+                        {{ prop.node.orgTreeName }}
+                      </div>
+                      <div class="text-weight-light">
+                        {{
+                          prop.node.orgCode == null ? null : prop.node.orgCode
+                        }}
+                        {{
+                          prop.node.orgTreeShortName == null
+                            ? null
+                            : prop.node.orgTreeShortName
+                        }}
+                      </div>
+                    </div>
+                  </q-item>
+                </template>
+              </q-tree>
+            </q-card>
+          </div>
+        </q-page>
+      </q-page-container>
+
+      <q-footer>
+        <q-separator color="grey-4" />
+        <q-toolbar class="fit row wrap justify-end items-start content-start">
+          <q-btn
+            unelevated
+            label="ย้ายตำแหน่ง"
+            color="public"
+            @click="onClickMovePos"
+            class="q-px-md"
+            :disable="isDisable"
+          >
+            <q-tooltip>ย้ายตำแหน่ง</q-tooltip>
+          </q-btn>
+        </q-toolbar>
+      </q-footer>
+    </q-layout>
   </q-dialog>
 </template>
 
diff --git a/src/modules/02_organizationalNew/components/TreeTable.vue b/src/modules/02_organizationalNew/components/TreeTable.vue
index f920550f6..88ccb2738 100644
--- a/src/modules/02_organizationalNew/components/TreeTable.vue
+++ b/src/modules/02_organizationalNew/components/TreeTable.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import { useQuasar } from "quasar";
 import config from "@/app.config";
 import http from "@/plugins/http";
@@ -435,9 +435,19 @@ async function onClickDownloadReport(val: string, name: string) {
 }
 
 const pagination = ref({
-  page: 1,
-  rowsPerPage: 10,
+  page: reqMaster.value.page,
+  rowsPerPage: reqMaster.value.pageSize,
 });
+
+watch(
+  () => modalDialogMMove.value,
+  () => {
+    if (!modalDialogMMove.value) {
+      pagination.value.page = 1;
+      pagination.value.rowsPerPage = reqMaster.value.pageSize;
+    }
+  }
+);
 </script>
 
 <template>
diff --git a/src/modules/14_KPI/components/competency/01ListCompetency.vue b/src/modules/14_KPI/components/competency/01ListCompetency.vue
index ef260ec99..f0dd94301 100644
--- a/src/modules/14_KPI/components/competency/01ListCompetency.vue
+++ b/src/modules/14_KPI/components/competency/01ListCompetency.vue
@@ -5,9 +5,12 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
 
+import type { DataOption } from "@/modules/14_KPI/interface/index/Main";
+import type { FormQueryCapacity } from "@/modules/14_KPI/interface/request/Main";
+import type { ResDataCapacity } from "@/modules/14_KPI/interface/response/Main";
+
 import { useKPIDataStore } from "@/modules/14_KPI/store/KPIStore";
 
-import type { DataOption } from "@/modules/14_KPI/interface/index/Main";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -54,8 +57,8 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 const visibleColumns = ref<string[]>(["name"]);
 
-const rows = ref<any[]>([]);
-const formQuery = reactive({
+const rows = ref<ResDataCapacity[]>([]);
+const formQuery = reactive<FormQueryCapacity>({
   page: 1,
   pageSize: 10,
   keyword: "",
@@ -71,7 +74,7 @@ async function fetchList() {
         `?page=${formQuery.page}&pageSize=${formQuery.pageSize}&keyword=${formQuery.keyword}&type=${store.competencyType}`
     )
     .then(async (res) => {
-      const data = res.data.result.data;
+      const data: ResDataCapacity[] = res.data.result.data;
       totalList.value = Math.ceil(res.data.result.total / formQuery.pageSize);
       rows.value = data;
     })
diff --git a/src/modules/14_KPI/components/competency/Forms/Main.vue b/src/modules/14_KPI/components/competency/Forms/Main.vue
index cf0d3a7c7..88db3c360 100644
--- a/src/modules/14_KPI/components/competency/Forms/Main.vue
+++ b/src/modules/14_KPI/components/competency/Forms/Main.vue
@@ -56,11 +56,13 @@ function fetchDetail() {
 function onClickAddLevels() {
   const levelName = formData.levels.length + 1;
   const data = {
-    level: levelName.toString(),
+    level:
+      store.competencyType === "HEAD" || store.competencyType === "GROUP"
+        ? (formData.levels[formData.levels.length].level = levelName.toString())
+        : "",
     description: "",
   };
   formData.levels.push(data);
-  formData.levels[formData.levels.length].level = levelName.toString();
 }
 
 function onSubmit() {
@@ -256,9 +258,10 @@ onMounted(() => {
                       v-if="
                         (store.competencyType === 'HEAD' && index > 4) ||
                         (store.competencyType === 'GROUP' && index > 4) ||
-                        store.competencyType === 'EXECUTIVE' ||
-                        store.competencyType === 'DIRECTOR' ||
-                        store.competencyType === 'INSPECTOR'
+                        ((store.competencyType === 'EXECUTIVE' ||
+                          store.competencyType === 'DIRECTOR' ||
+                          store.competencyType === 'INSPECTOR') &&
+                          index > 0)
                       "
                     >
                       <q-tooltip>ลบ</q-tooltip></q-btn
diff --git a/src/modules/14_KPI/components/indicatorByPlan/DetailView.vue b/src/modules/14_KPI/components/indicatorByPlan/DetailView.vue
index f4115488a..9cb5a5ad9 100644
--- a/src/modules/14_KPI/components/indicatorByPlan/DetailView.vue
+++ b/src/modules/14_KPI/components/indicatorByPlan/DetailView.vue
@@ -26,10 +26,7 @@ async function fetchData() {
   showLoader();
   await http
     .get(config.API.kpiPlan)
-    .then(async (res) => {
-      console.log(res.data.result);
-      console.log("test");
-    })
+    .then(async (res) => {})
     .catch((err) => {
       messageError($q, err);
     })
diff --git a/src/modules/14_KPI/components/indicatorByPlan/IndicatorByPlan.vue b/src/modules/14_KPI/components/indicatorByPlan/IndicatorByPlan.vue
index c57279515..91968d13c 100644
--- a/src/modules/14_KPI/components/indicatorByPlan/IndicatorByPlan.vue
+++ b/src/modules/14_KPI/components/indicatorByPlan/IndicatorByPlan.vue
@@ -4,6 +4,7 @@ import { useCounterMixin } from "@/stores/mixin";
 import config from "@/app.config";
 import { QForm, useQuasar } from "quasar";
 import http from "@/plugins/http";
+import { useRoute } from "vue-router";
 import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
 const store = usePositionEmp();
 const mixin = useCounterMixin();
@@ -19,15 +20,35 @@ const {
 } = mixin;
 
 const planData = reactive<any>({
-  year: null,
+  year: 0, //ปีงบประมาณ
+  round: "", //รอบการประเมิน(เมษา->APR, ตุลา->OCT)
+  including: "", //รหัสตัวชี้วัด
+  includingName: "", //ชื่อตัวชี้วัด
+  target: "", //ค่าเป้าหมาย
+  unit: null, //หน่วยนับ
+  weight: null, //น้ำหนัก
+  achievement1: "", //ผลสำเร็จของงาน 1
+  achievement2: "", //ผลสำเร็จของงาน 2
+  achievement3: "", //ผลสำเร็จของงาน 3
+  achievement4: "", //ผลสำเร็จของงาน 4
+  achievement5: "", //ผลสำเร็จของงาน 5
+  meaning: "", //นิยามหรือความหมาย
+  formula: "", //สูตรคำนวณ
+  node: null, //ระดับหน่วยงาน
+  nodeId: "", //id หน่วยงาน
+  orgRevisionId: "", //RevisionId หน่วยงาน
+  strategy: null, //ระดับยุทธศาสตร์
+  strategyId: "", //id ยุทธศาสตร์
 });
 
 const filter = ref<string>("");
 const filterAgency = ref<string>("");
+const route = useRoute();
+const id = ref<string | string[]>(route.params.id);
 
 const roundOp = ref<any[]>([
-  { id: "APRIL", name: "เมษายน" },
-  { id: "OCTOBER", name: "ตุลาคม" },
+  { id: "APR", name: "เมษายน" },
+  { id: "OCT", name: "ตุลาคม" },
 ]);
 const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
 const noData = ref<string>("ไม่มีข้อมูล");
@@ -35,11 +56,13 @@ const expandedPlan = ref<Array<string | null>>([]);
 const expandedAgency = ref<Array<string | null>>([]);
 const nodeplan = ref<any>([]);
 const nodeAgency = ref<any>([]);
-const nodeId = ref<string>("");
+const editStatus = ref<boolean>(false);
 async function onSubmit() {
   dialogConfirm(
     $q,
-    async () => {},
+    async () => {
+      editStatus.value ? editData(id.value) : addData();
+    },
     "ยืนยันการบันทึกข้อมูล",
     "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
   );
@@ -97,19 +120,92 @@ async function fetchOrganizationActive() {
     });
 }
 
+async function fetchDataById(id: any) {
+  showLoader();
+  await http
+    .get(config.API.kpiPlanById(id))
+    .then(async (res) => {
+      const data = res.data.result;
+      // planData.value = data;
+      planData.year = data.year;
+      planData.round = data.round;
+      planData.including = data.including;
+      planData.includingName = data.includingName;
+      planData.target = data.target;
+      planData.unit = data.unit;
+      planData.weight = data.weight;
+      planData.achievement1 = data.achievement1;
+      planData.achievement2 = data.achievement2;
+      planData.achievement3 = data.achievement3;
+      planData.achievement4 = data.achievement4;
+      planData.achievement5 = data.achievement5;
+      planData.meaning = data.meaning;
+      planData.formula = data.formula;
+      planData.node = data.node;
+      planData.nodeId = data.nodeId;
+      planData.orgRevisionId = data.orgRevisionId;
+      planData.strategy = data.strategy;
+      planData.strategyId = data.strategyId;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 function updateSelected(data: any) {
-  planData.strategyChildPlannedId = data.id;
-  planData.strategyChildPlannedNode = data.level;
+  planData.strategyId = data.id;
+  planData.strategy = data.level;
 }
 function updateSelectedAgency(data: any) {
-  planData.agencyId = data.orgTreeId;
-  planData.agencyLevel = data.orgLevel;
+  if (planData.node === data.orgLevel && planData.nodeId === data.orgTreeId) {
+    planData.node = null;
+    planData.nodeId = null;
+  } else {
+    planData.node = data.orgLevel;
+    planData.nodeId = data.orgTreeId;
+  }
+  planData.orgRevisionId = data.orgRevisionId;
+}
+
+async function addData() {
+  await http
+    .post(config.API.kpiPlan, planData)
+    .then(() => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function editData(id: any) {
+  await http
+    .put(config.API.kpiPlanById(id), planData)
+    .then(() => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 onMounted(async () => {
   //   fetchData();
   await fetchTree();
   await fetchOrganizationActive();
+  if (id.value !== undefined) {
+    editStatus.value = true;
+    fetchDataById(id.value);
+  }
   setTimeout(async () => {
     store.activeId && (await fetchDataTree(store.activeId));
   }, 200);
@@ -140,13 +236,19 @@ onMounted(async () => {
                 lazy-rules
                 outlined
                 class="inputgreen"
-                clearable
-                @clear="() => (planData.year = null)"
                 hide-bottom-space
                 :model-value="!!planData.year ? planData.year + 543 : null"
                 :label="`${'ปีงบประมาณ'}`"
                 @update:modelValue="planData.year = null"
               >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    style="color: var(--q-primary)"
+                  >
+                  </q-icon>
+                </template>
               </q-input>
             </template>
           </datepicker>
@@ -174,7 +276,7 @@ onMounted(async () => {
         <div class="col-2">
           <q-input
             outlined
-            v-model="planData.Data1"
+            v-model="planData.including"
             label="รหัสตัวชี้วัด"
             bg-color="white"
             dense
@@ -186,7 +288,7 @@ onMounted(async () => {
         <div class="col-6">
           <q-input
             outlined
-            v-model="planData.Data2"
+            v-model="planData.includingName"
             label="ชื่อตัวชี้วัด"
             bg-color="white"
             dense
@@ -198,7 +300,7 @@ onMounted(async () => {
         <div class="col-3">
           <q-input
             outlined
-            v-model="planData.Data3"
+            v-model="planData.target"
             label="ค่าเป้าหมาย"
             bg-color="white"
             dense
@@ -210,9 +312,10 @@ onMounted(async () => {
         <div class="col-3">
           <q-input
             outlined
-            v-model="planData.Data4"
+            v-model="planData.unit"
             label="หน่วยนับ"
             bg-color="white"
+            type="number"
             dense
             class="inputgreen"
             :rules="[(val) => !!val || `${'กรุณากรอกหน่วยนับ'}`]"
@@ -222,8 +325,9 @@ onMounted(async () => {
         <div class="col-3">
           <q-input
             outlined
-            v-model="planData.Data5"
+            v-model="planData.weight"
             label="น้ำหนัก"
+            type="number"
             bg-color="white"
             dense
             class="inputgreen"
@@ -248,7 +352,7 @@ onMounted(async () => {
               <div class="col-8 q-pa-sm">
                 <q-input
                   outlined
-                  v-model="planData.point5"
+                  v-model="planData.achievement5"
                   label="กรอกผลสำเร็จของงาน"
                   bg-color="white"
                   dense
@@ -265,7 +369,7 @@ onMounted(async () => {
               <div class="col-8 q-pa-sm">
                 <q-input
                   outlined
-                  v-model="planData.point4"
+                  v-model="planData.achievement4"
                   label="กรอกผลสำเร็จของงาน"
                   bg-color="white"
                   dense
@@ -282,7 +386,7 @@ onMounted(async () => {
               <div class="col-8 q-pa-sm">
                 <q-input
                   outlined
-                  v-model="planData.point3"
+                  v-model="planData.achievement3"
                   label="กรอกผลสำเร็จของงาน"
                   bg-color="white"
                   dense
@@ -299,7 +403,7 @@ onMounted(async () => {
               <div class="col-8 q-pa-sm">
                 <q-input
                   outlined
-                  v-model="planData.point2"
+                  v-model="planData.achievement2"
                   label="กรอกผลสำเร็จของงาน"
                   bg-color="white"
                   dense
@@ -316,7 +420,7 @@ onMounted(async () => {
               <div class="col-8 q-pa-sm">
                 <q-input
                   outlined
-                  v-model="planData.point1"
+                  v-model="planData.achievement1"
                   label="กรอกผลสำเร็จของงาน"
                   bg-color="white"
                   dense
@@ -331,7 +435,7 @@ onMounted(async () => {
         <div class="col-12">
           <q-input
             outlined
-            v-model="planData.Data7"
+            v-model="planData.meaning"
             label="นิยามหรือความหมาย"
             type="textarea"
             bg-color="white"
@@ -344,7 +448,7 @@ onMounted(async () => {
         <div class="col-12">
           <q-input
             outlined
-            v-model="planData.Data8"
+            v-model="planData.formula"
             label="สูตรคำนวณ"
             bg-color="white"
             type="textarea"
@@ -386,12 +490,13 @@ onMounted(async () => {
                 :no-results-label="notFound"
                 :no-nodes-label="noData"
                 v-model:expanded="expandedAgency"
+                v-model:selected="planData.nodeId"
               >
                 <template v-slot:default-header="prop">
                   <q-item
                     clickable
                     @click.stop="updateSelectedAgency(prop.node)"
-                    :active="nodeId == prop.node.orgTreeId"
+                    :active="planData.nodeId == prop.node.orgTreeId"
                     active-class="my-list-link text-primary text-weight-medium"
                     class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
                   >
@@ -448,12 +553,13 @@ onMounted(async () => {
                 :no-results-label="notFound"
                 :no-nodes-label="noData"
                 v-model:expanded="expandedPlan"
+                v-model:selected="planData.strategyId"
               >
                 <template v-slot:default-header="prop">
                   <q-item
                     clickable
                     @click.stop="updateSelected(prop.node)"
-                    :active="planData.strategyChildPlannedId == prop.node.id"
+                    :active="planData.strategyId == prop.node.id"
                     active-class="my-list-link text-primary text-weight-medium"
                     class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
                   >
diff --git a/src/modules/14_KPI/interface/request/Main.ts b/src/modules/14_KPI/interface/request/Main.ts
index 51ab7b843..c8d8f976a 100644
--- a/src/modules/14_KPI/interface/request/Main.ts
+++ b/src/modules/14_KPI/interface/request/Main.ts
@@ -52,4 +52,19 @@ interface ListGroup{
   id:string
   nameGroupKPI:string
 }
-export type { FormQueryRound, FormRound, FormCompetency, FormDataRole,NewPagination,ListGroup };
+
+interface FormQueryCapacity {
+  page: number;
+  pageSize: number;
+  keyword: string;
+}
+
+export type {
+  FormQueryRound,
+  FormRound,
+  FormCompetency,
+  FormDataRole,
+  NewPagination,
+  FormQueryCapacity,
+  ListGroup
+};
diff --git a/src/modules/14_KPI/interface/response/Main.ts b/src/modules/14_KPI/interface/response/Main.ts
index da7e92931..1fdf8ce0e 100644
--- a/src/modules/14_KPI/interface/response/Main.ts
+++ b/src/modules/14_KPI/interface/response/Main.ts
@@ -11,4 +11,19 @@ interface ResRound {
   startDate: Date;
 }
 
-export type { ResRound };
+interface ResDataCapacity {
+  description: string;
+  id: string;
+  name: string;
+  type: string;
+  capacityDetails: capacityDetails;
+}
+
+interface capacityDetails {
+  capacityId: string;
+  description: string;
+  id: string;
+  level: string;
+}
+
+export type { ResRound, ResDataCapacity };
diff --git a/src/modules/14_KPI/views/indicatorByPlan.vue b/src/modules/14_KPI/views/indicatorByPlan.vue
index 11a853a8e..3e6dcb168 100644
--- a/src/modules/14_KPI/views/indicatorByPlan.vue
+++ b/src/modules/14_KPI/views/indicatorByPlan.vue
@@ -17,42 +17,28 @@ const { showLoader, hideLoader, dialogRemove, success, messageError } =
 const rows = ref<any>([]);
 const columns = ref<QTableProps["columns"]>([
   {
-    name: "indicatorNo",
-    align: "left",
-    label: "ลำดับตัวชี้วัด ",
-    sortable: true,
-    field: "indicatorNo",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "indicatorPass",
+    name: "including",
     align: "left",
     label: "รหัสตัวชี้วัด",
     sortable: true,
-    field: "indicatorPass",
+    field: "including",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "indicatorName",
+    name: "includingName",
     align: "left",
     label: "ชื่อตัวชี้วัด",
     sortable: true,
-    field: "indicatorName",
+    field: "includingName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
 ]);
 const node = ref<any>([]);
 const expanded = ref<any>([]);
-const filter = ref<string>("");
 const filterMain = ref<string>("");
-const visibleColumns = ref<string[]>([
-  "indicatorNo",
-  "indicatorPass",
-  "indicatorName",
-]);
+const visibleColumns = ref<string[]>(["including", "includingName"]);
 
 const orgOp = ref<any[]>([
   { id: "1", name: "กลุ่มงานช่วยนักบริหาร" },
@@ -60,43 +46,46 @@ const orgOp = ref<any[]>([
 ]);
 
 const roundOp = ref<any[]>([
-  { id: "1", name: "รอบเมษายน" },
-  { id: "2", name: "รอบตุลาคม" },
+  { id: "APR", name: "รอบเมษายน" },
+  { id: "OCT", name: "รอบตุลาคม" },
 ]);
 
 const formFilter = reactive({
   page: 1,
   pageSize: 10,
   org: "1",
-  round: "1",
+  round: "",
   keyword: "",
 });
+const totalList = ref<number>(1);
 
 const nodeData = reactive<any>({
-  node: null,
+  page: 1,
+  pageSize: 10,
+  round: "",
   nodeId: null,
+  node: null,
+  keyword: "",
 });
 
 function fetchList() {
   showLoader();
-  const data = [
-    {
-      id: "1",
-      indicatorNo: "1",
-      indicatorPass: "1กก",
-      indicatorName: "ตัวชี้วัด 1",
-    },
-    {
-      id: "2",
-      indicatorNo: "2",
-      indicatorPass: "2กก",
-      indicatorName: "ตัวชี้วัด 2",
-    },
-  ];
-  rows.value = data;
-  setTimeout(() => {
-    hideLoader();
-  }, 500);
+  http
+    .get(
+      config.API.kpiPlan +
+        `?page=${nodeData.page}&pageSize=${nodeData.pageSize}&round=${nodeData.round}&nodeId=${nodeData.nodeId}&node=${nodeData.node}&keyword=${nodeData.keyword}`
+    )
+    .then((res) => {
+      const data = res.data.result.data;
+      totalList.value = Math.ceil(res.data.result.total / nodeData.pageSize);
+      rows.value = data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 function onClickAddOrView(status: boolean = false, id: string = "") {
@@ -112,6 +101,22 @@ function onClickDelete(id: number) {
   });
 }
 
+async function fetchData() {
+  showLoader();
+  await http
+    .get(config.API.kpiPlan)
+    .then(async (res) => {
+      const data = res.data.result.data;
+      rows.value = data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 function fetchActive() {
   showLoader();
   http
@@ -150,11 +155,34 @@ function updateSelectedTreeMain(data: any) {
     nodeData.node = data.orgLevel;
     nodeData.nodeId = data.orgTreeId;
   }
+  fetchListProjectNew();
+}
+
+function fetchListProjectNew() {
+  nodeData.page = 1;
+  fetchList();
+}
+
+async function deleteData(idData: string) {
+  dialogRemove($q, () =>
+    http
+      .delete(config.API.kpiPlanById(idData))
+      .then(() => {
+        fetchData();
+        success($q, "ลบข้อมูลสำเร็จ");
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      })
+  );
 }
 
 onMounted(() => {
-  fetchList();
   fetchActive();
+  fetchData();
 });
 </script>
 
@@ -239,7 +267,7 @@ onMounted(() => {
             <q-select
               dense
               outlined
-              v-model="formFilter.round"
+              v-model="nodeData.round"
               :options="roundOp"
               label="รอบการประเมิน"
               option-label="name"
@@ -264,19 +292,19 @@ onMounted(() => {
             <q-input
               standout
               dense
-              v-model="formFilter.keyword"
+              v-model="nodeData.keyword"
               ref="filterRef"
               outlined
               debounce="300"
               placeholder="ค้นหา"
             >
               <template v-slot:append>
-                <q-icon v-if="formFilter.keyword == ''" name="search" />
+                <q-icon v-if="nodeData.keyword == ''" name="search" />
                 <q-icon
-                  v-if="formFilter.keyword !== ''"
+                  v-if="nodeData.keyword !== ''"
                   name="clear"
                   class="cursor-pointer"
-                  @click="formFilter.keyword = ''"
+                  @click="nodeData.keyword = ''"
                 />
               </template>
             </q-input>
@@ -305,6 +333,7 @@ onMounted(() => {
             :columns="columns"
             :rows="rows"
             row-key="subject"
+            :filter="nodeData.keyword"
             flat
             bordered
             dense
@@ -337,7 +366,7 @@ onMounted(() => {
                     round
                     icon="delete"
                     color="red"
-                    @click.stop.pervent="onClickDelete(props.rowIndex)"
+                    @click.stop.pervent="deleteData(props.row.id)"
                   >
                     <q-tooltip>ลบข้อมูล </q-tooltip>
                   </q-btn>
diff --git a/src/modules/16_positionEmployee/components/DialogMovePos.vue b/src/modules/16_positionEmployee/components/DialogMovePos.vue
index 7d731b50d..7795987c7 100644
--- a/src/modules/16_positionEmployee/components/DialogMovePos.vue
+++ b/src/modules/16_positionEmployee/components/DialogMovePos.vue
@@ -118,11 +118,26 @@ function onClickMovePos() {
   }
 }
 
+/**
+ * function updatePagination
+ * @param newPagination ข้อมูล Pagination ใหม่
+ */
+function updatePagination(newPagination: any) {
+  reqMaster.value.pageSize = newPagination.rowsPerPage;
+  reqMaster.value.page = 1;
+}
+
+const pagination = ref({
+  page: reqMaster.value.page,
+  rowsPerPage: reqMaster.value.pageSize,
+});
+
 watch(
   () => modal.value,
   () => {
     reqMaster.value.page = 1;
     filterTree.value = "";
+    pagination.value.rowsPerPage = reqMaster.value.pageSize;
 
     title.value = `ย้ายตำแหน่งจากหน่วยงาน/ส่วนราชการปัจจุบัน ${props.mainTree.orgName}`;
     if (modal.value && props.type === "SINGER") {
@@ -138,171 +153,189 @@ watch(
 </script>
 <template>
   <q-dialog v-model="modal" full-width persistent>
-    <q-card>
-      <HeaderDialog :tittle="title" :close="() => (modal = false)" />
-      <q-separator />
+    <q-layout
+      view="lHh lpr lFf"
+      container
+      style="height: 90vh"
+      class="bg-white"
+    >
+      <q-header>
+        <q-toolbar>
+          <HeaderDialog :tittle="title" :close="() => (modal = false)" />
+        </q-toolbar>
+        <q-separator color="grey-4" />
+      </q-header>
 
-      <q-card-section class="q-pt-none bg-grey-2 q-pa-sm">
-        <div class="row">
-          <q-card bordered class="col-12 col-sm-8 q-pa-sm">
-            <q-toolbar style="padding: 0">
-              <q-toolbar-title class="text-subtitle2 text-bold"
-                >เลือกตำแหน่งที่ต้องการย้าย</q-toolbar-title
-              >
-              <q-space />
-
-              <div>
-                <q-input outlined dense v-model="filterTable" label="ค้นหา" />
-              </div>
-            </q-toolbar>
-
-            <d-table
-              flat
-              bordered
-              :rows="rows"
-              :columns="columns"
-              row-key="id"
-              :filter="filterTable"
-              no-data-label="ไม่มีข้อมูล"
-              selection="multiple"
-              v-model:selected="selectedFilter"
-            >
-              <template v-slot:header-selection="scope">
-                <q-checkbox
-                  keep-color
-                  color="primary"
-                  dense
-                  v-model="scope.selected"
-                />
-              </template>
-              <template v-slot:body="props">
-                <q-tr :props="props" class="cursor-pointer">
-                  <q-td>
-                    <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'">
-                      {{
-                        (reqMaster.page - 1) * Number(reqMaster.pageSize) +
-                        props.rowIndex +
-                        1
-                      }}
-                    </div>
-
-                    <div v-else>
-                      {{ col.value }}
-                    </div>
-                  </q-td>
-                </q-tr>
-              </template>
-              <template v-slot:pagination="scope">
-                <q-pagination
-                  v-model="reqMaster.page"
-                  active-color="primary"
-                  color="dark"
-                  :max="totalPage"
-                  :max-pages="5"
-                  size="sm"
-                  boundary-links
-                  direction-links
-                ></q-pagination>
-              </template>
-            </d-table>
-          </q-card>
-
-          <q-card
-            bordered
-            class="col-12 col-sm-4 scroll q-pa-sm"
-            style="height: 750px"
-          >
-            <q-toolbar style="padding: 0">
-              <q-toolbar-title class="text-subtitle2 text-bold"
-                >เลือกหน่วยงาน/ส่วนราชการปลายทาง</q-toolbar-title
-              >
-            </q-toolbar>
-
-            <q-input
-              ref="filterRef"
-              dense
-              outlined
-              v-model="filterTree"
-              label="ค้นหา"
-            >
-              <template v-slot:append>
-                <q-icon
-                  v-if="filterTree !== ''"
-                  name="clear"
-                  class="cursor-pointer"
-                  @click="resetFilter"
-                />
-              </template>
-            </q-input>
-            <q-tree
-              class="q-pa-md q-gutter-sm"
-              dense
-              default-expand-all
-              selected-color="primary"
-              :nodes="nodeTree"
-              node-key="orgTreeId"
-              label-key="labelName"
-              :filter="filterTree"
-              no-results-label="ไม่พบข้อมูลที่ค้นหา"
-              no-nodes-label="ไม่มีข้อมูล"
-            >
-              <template v-slot:default-header="prop">
-                <!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
-
-                <q-item
-                  clickable
-                  :active="selectedTree == prop.node.orgTreeId"
-                  @click.stop="updateSelected(prop.node)"
-                  active-class="my-list-link text-primary text-weight-medium"
-                  class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
+      <q-page-container>
+        <q-page class="q-pa-md">
+          <div class="row">
+            <q-card bordered class="col-12 col-sm-8 q-pa-sm">
+              <q-toolbar style="padding: 0">
+                <q-toolbar-title class="text-subtitle2 text-bold"
+                  >เลือกตำแหน่งที่ต้องการย้าย</q-toolbar-title
                 >
-                  <div>
-                    <div class="text-weight-medium">
-                      {{ prop.node.orgTreeName }}
-                    </div>
-                    <div class="text-weight-light">
-                      {{ prop.node.orgCode == null ? null : prop.node.orgCode }}
-                      {{
-                        prop.node.orgTreeShortName == null
-                          ? null
-                          : prop.node.orgTreeShortName
-                      }}
-                    </div>
-                  </div>
-                </q-item>
-              </template>
-            </q-tree>
-          </q-card>
-        </div>
-      </q-card-section>
-      <q-separator />
+                <q-space />
 
-      <q-card-actions align="right">
-        <q-btn
-          unelevated
-          label="ย้ายตำแหน่ง"
-          color="public"
-          @click="onClickMovePos"
-          class="q-px-md"
-          :disable="isDisable"
-        >
-          <q-tooltip>ย้ายตำแหน่ง</q-tooltip>
-        </q-btn>
-      </q-card-actions>
-    </q-card>
+                <div>
+                  <q-input outlined dense v-model="filterTable" label="ค้นหา" />
+                </div>
+              </q-toolbar>
+
+              <d-table
+                flat
+                bordered
+                :rows="rows"
+                :columns="columns"
+                row-key="id"
+                :filter="filterTable"
+                no-data-label="ไม่มีข้อมูล"
+                selection="multiple"
+                v-model:selected="selectedFilter"
+                :rows-per-page-options="[10, 25, 50, 100]"
+                v-model:pagination="pagination"
+                @update:pagination="updatePagination"
+              >
+                <template v-slot:header-selection="scope">
+                  <q-checkbox
+                    keep-color
+                    color="primary"
+                    dense
+                    v-model="scope.selected"
+                  />
+                </template>
+                <template v-slot:body="props">
+                  <q-tr :props="props" class="cursor-pointer">
+                    <q-td>
+                      <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'">
+                        {{
+                          (reqMaster.page - 1) * Number(reqMaster.pageSize) +
+                          props.rowIndex +
+                          1
+                        }}
+                      </div>
+
+                      <div v-else>
+                        {{ col.value }}
+                      </div>
+                    </q-td>
+                  </q-tr>
+                </template>
+                <template v-slot:pagination="scope">
+                  <q-pagination
+                    v-model="reqMaster.page"
+                    active-color="primary"
+                    color="dark"
+                    :max="totalPage"
+                    :max-pages="5"
+                    size="sm"
+                    boundary-links
+                    direction-links
+                  ></q-pagination>
+                </template>
+              </d-table>
+            </q-card>
+
+            <q-card
+              bordered
+              class="col-12 col-sm-4 scroll q-pa-sm"
+              style="height: 75vh"
+            >
+              <q-toolbar style="padding: 0">
+                <q-toolbar-title class="text-subtitle2 text-bold"
+                  >เลือกหน่วยงาน/ส่วนราชการปลายทาง</q-toolbar-title
+                >
+              </q-toolbar>
+
+              <q-input
+                ref="filterRef"
+                dense
+                outlined
+                v-model="filterTree"
+                label="ค้นหา"
+              >
+                <template v-slot:append>
+                  <q-icon
+                    v-if="filterTree !== ''"
+                    name="clear"
+                    class="cursor-pointer"
+                    @click="resetFilter"
+                  />
+                </template>
+              </q-input>
+              <q-tree
+                class="q-pa-md q-gutter-sm"
+                dense
+                default-expand-all
+                selected-color="primary"
+                :nodes="nodeTree"
+                node-key="orgTreeId"
+                label-key="labelName"
+                :filter="filterTree"
+                no-results-label="ไม่พบข้อมูลที่ค้นหา"
+                no-nodes-label="ไม่มีข้อมูล"
+              >
+                <template v-slot:default-header="prop">
+                  <!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
+
+                  <q-item
+                    clickable
+                    :active="selectedTree == prop.node.orgTreeId"
+                    @click.stop="updateSelected(prop.node)"
+                    active-class="my-list-link text-primary text-weight-medium"
+                    class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
+                  >
+                    <div>
+                      <div class="text-weight-medium">
+                        {{ prop.node.orgTreeName }}
+                      </div>
+                      <div class="text-weight-light">
+                        {{
+                          prop.node.orgCode == null ? null : prop.node.orgCode
+                        }}
+                        {{
+                          prop.node.orgTreeShortName == null
+                            ? null
+                            : prop.node.orgTreeShortName
+                        }}
+                      </div>
+                    </div>
+                  </q-item>
+                </template>
+              </q-tree>
+            </q-card>
+          </div>
+        </q-page>
+      </q-page-container>
+
+      <q-footer>
+        <q-separator color="grey-4" />
+        <q-toolbar class="fit row wrap justify-end items-start content-start">
+          <q-btn
+            unelevated
+            label="ย้ายตำแหน่ง"
+            color="public"
+            @click="onClickMovePos"
+            class="q-px-md"
+            :disable="isDisable"
+          >
+            <q-tooltip>ย้ายตำแหน่ง</q-tooltip>
+          </q-btn>
+        </q-toolbar>
+      </q-footer>
+    </q-layout>
   </q-dialog>
 </template>
 
diff --git a/src/modules/16_positionEmployee/components/TreeTable.vue b/src/modules/16_positionEmployee/components/TreeTable.vue
index bc41b5f21..e022d9b45 100644
--- a/src/modules/16_positionEmployee/components/TreeTable.vue
+++ b/src/modules/16_positionEmployee/components/TreeTable.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import { useQuasar } from "quasar";
 import config from "@/app.config";
 import http from "@/plugins/http";
@@ -346,6 +346,21 @@ async function onClickDownloadReport(val: string, name: string) {
       messageError($q, err);
     });
 }
+
+const pagination = ref({
+  page: reqMaster.value.page,
+  rowsPerPage: reqMaster.value.pageSize,
+});
+
+watch(
+  () => modalDialogMMove.value,
+  () => {
+    if (!modalDialogMMove.value) {
+      pagination.value.page = 1;
+      pagination.value.rowsPerPage = reqMaster.value.pageSize;
+    }
+  }
+);
 </script>
 
 <template>
@@ -458,6 +473,7 @@ async function onClickDownloadReport(val: string, name: string) {
       :rows-per-page-options="[10, 25, 50, 100]"
       @update:pagination="updatePagination"
       class="tableTb"
+      v-model:pagination="pagination"
     >
       <template v-slot:header="props">
         <q-tr :props="props">