diff --git a/src/modules/14_KPI/components/indicatorByPlan/IndicatorByPlan.vue b/src/modules/14_KPI/components/indicatorByPlan/IndicatorByPlan.vue
index 91968d13c..75d971a54 100644
--- a/src/modules/14_KPI/components/indicatorByPlan/IndicatorByPlan.vue
+++ b/src/modules/14_KPI/components/indicatorByPlan/IndicatorByPlan.vue
@@ -20,8 +20,7 @@ const {
 } = mixin;
 
 const planData = reactive<any>({
-  year: 0, //ปีงบประมาณ
-  round: "", //รอบการประเมิน(เมษา->APR, ตุลา->OCT)
+  kpiPeriodId: "", //รอบการประเมิน(เมษา->APR, ตุลา->OCT)
   including: "", //รหัสตัวชี้วัด
   includingName: "", //ชื่อตัวชี้วัด
   target: "", //ค่าเป้าหมาย
@@ -44,12 +43,10 @@ const planData = reactive<any>({
 const filter = ref<string>("");
 const filterAgency = ref<string>("");
 const route = useRoute();
-const id = ref<string | string[]>(route.params.id);
+const id = ref<string>(route.params.id ? route.params.id.toLocaleString() : "");
+const year = ref<number>(0);
 
-const roundOp = ref<any[]>([
-  { id: "APR", name: "เมษายน" },
-  { id: "OCT", name: "ตุลาคม" },
-]);
+const roundOp = ref<any[]>([]);
 const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
 const noData = ref<string>("ไม่มีข้อมูล");
 const expandedPlan = ref<Array<string | null>>([]);
@@ -68,6 +65,40 @@ async function onSubmit() {
   );
 }
 
+const inputRef = ref<any>(null);
+function fetchRoundOption(isId: number | null = null) {
+  showLoader();
+  http
+    .get(
+      config.API.kpiPeriod +
+        `?page=${1}&pageSize=${10}&keyword=${""}&year=${year.value}`
+    )
+    .then((res) => {
+      const data = res.data.result.data;
+      const list = data.map((e: any) => ({
+        id: e.id,
+        name:
+          e.durationKPI === "OCT"
+            ? "รอบตุลาคม"
+            : e.durationKPI === "APR"
+            ? "รอบเมษายน"
+            : "",
+      }));
+      roundOp.value = list;
+
+      if (isId) {
+        planData.kpiPeriodId = "";
+        inputRef.value.resetValidation();
+      }
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 function fetchTree() {
   showLoader();
   http
@@ -88,11 +119,26 @@ async function fetchDataTree(id: string) {
   showLoader();
   await http
     .get(config.API.orgByid(id.toString()))
-    .then((res) => {
+    .then(async (res) => {
       const data = res.data.result;
       nodeAgency.value = data;
-
       store.treeId = "";
+
+      if (nodeAgency.value && planData.nodeId) {
+        const nodeTree = await searchAndReplace(
+          nodeAgency.value,
+          planData.nodeId
+        );
+        if (nodeTree) {
+          expandedAgency.value = [];
+          const parts = nodeTree?.orgName.split("/");
+          for (let i = 1; i < parts.length; i++) {
+            const arrangedParts = parts[i];
+            expandedAgency.value.push(arrangedParts);
+          }
+          updateSelectedAgency(nodeTree, true);
+        }
+      }
     })
     .catch((err) => {
       messageError($q, err);
@@ -126,9 +172,10 @@ async function fetchDataById(id: any) {
     .get(config.API.kpiPlanById(id))
     .then(async (res) => {
       const data = res.data.result;
+      year.value = data.year;
       // planData.value = data;
-      planData.year = data.year;
-      planData.round = data.round;
+      // planData.year = data.year;
+      planData.kpiPeriodId = data.kpiPeriodId;
       planData.including = data.including;
       planData.includingName = data.includingName;
       planData.target = data.target;
@@ -146,6 +193,9 @@ async function fetchDataById(id: any) {
       planData.orgRevisionId = data.orgRevisionId;
       planData.strategy = data.strategy;
       planData.strategyId = data.strategyId;
+      console.log(data);
+
+      fetchRoundOption();
     })
     .catch((err) => {
       messageError($q, err);
@@ -159,13 +209,20 @@ function updateSelected(data: any) {
   planData.strategyId = data.id;
   planData.strategy = data.level;
 }
-function updateSelectedAgency(data: any) {
-  if (planData.node === data.orgLevel && planData.nodeId === data.orgTreeId) {
+
+function updateSelectedAgency(data: any, isUpdate: boolean = false) {
+  if (
+    planData.node === data.orgLevel &&
+    planData.nodeId === data.orgTreeId &&
+    !isUpdate
+  ) {
     planData.node = null;
     planData.nodeId = null;
+    console.log("1");
   } else {
     planData.node = data.orgLevel;
     planData.nodeId = data.orgTreeId;
+    console.log("2");
   }
   planData.orgRevisionId = data.orgRevisionId;
 }
@@ -184,11 +241,12 @@ async function addData() {
     });
 }
 
-async function editData(id: any) {
+async function editData(id: string) {
   await http
     .put(config.API.kpiPlanById(id), planData)
     .then(() => {
       success($q, "บันทึกข้อมูลสำเร็จ");
+      fetchDataById(id);
     })
     .catch((err) => {
       messageError($q, err);
@@ -198,16 +256,37 @@ async function editData(id: any) {
     });
 }
 
+/**
+ * function หาหน่วยงานที่รับผิดชอบ
+ * @param orgTreeData ข้อมูล  nodeTree
+ * @param treeId tree ID
+ */
+async function searchAndReplace(orgTreeData: any, treeId: string | null) {
+  if (orgTreeData) {
+    for (let orgTree of orgTreeData) {
+      if (orgTree.orgTreeId === treeId) {
+        return orgTree;
+      }
+      let foundOrg: any = await searchAndReplace(orgTree.children, treeId);
+      if (foundOrg) {
+        return foundOrg;
+      }
+    }
+    return false;
+  }
+}
+
 onMounted(async () => {
   //   fetchData();
-  await fetchTree();
+
   await fetchOrganizationActive();
-  if (id.value !== undefined) {
+  if (id.value) {
     editStatus.value = true;
     fetchDataById(id.value);
   }
   setTimeout(async () => {
     store.activeId && (await fetchDataTree(store.activeId));
+    await fetchTree();
   }, 200);
 });
 </script>
@@ -219,12 +298,12 @@ onMounted(async () => {
         <div class="col-2">
           <datepicker
             menu-class-name="modalfix"
-            v-model="planData.year"
+            v-model="year"
             :locale="'th'"
             autoApply
             year-picker
             :enableTimePicker="false"
-            @update:modelValue="planData.year"
+            @update:modelValue="fetchRoundOption"
           >
             <template #year="{ year }">{{ year + 543 }}</template>
             <template #year-overlay-value="{ value }">{{
@@ -237,9 +316,8 @@ onMounted(async () => {
                 outlined
                 class="inputgreen"
                 hide-bottom-space
-                :model-value="!!planData.year ? planData.year + 543 : null"
+                :model-value="!!year ? year + 543 : null"
                 :label="`${'ปีงบประมาณ'}`"
-                @update:modelValue="planData.year = null"
               >
                 <template v-slot:prepend>
                   <q-icon
@@ -255,9 +333,11 @@ onMounted(async () => {
         </div>
         <div class="col-2">
           <q-select
+            ref="inputRef"
+            :readonly="roundOp.length === 0"
             dense
             outlined
-            v-model="planData.round"
+            v-model="planData.kpiPeriodId"
             :options="roundOp"
             label="รอบการประเมิน"
             hide-bottom-space
@@ -483,7 +563,7 @@ onMounted(async () => {
                 style="height: 350px; overflow: scroll"
                 dense
                 :nodes="nodeAgency"
-                node-key="orgTreeId"
+                node-key="orgTreeName"
                 label-key="labelName"
                 selected-color="primary"
                 :filter="filterAgency"
@@ -593,4 +673,12 @@ onMounted(async () => {
   </q-form>
 </template>
 
-<style scoped></style>
+<style lang="scss" scoped>
+.my-list-link {
+  color: rgb(118, 168, 222);
+  border-radius: 5px;
+  background: #a3d3fb48 !important;
+  font-weight: 600;
+  border: 1px solid rgba(175, 185, 196, 0.217);
+}
+</style>
diff --git a/src/modules/14_KPI/views/indicatorByPlan.vue b/src/modules/14_KPI/views/indicatorByPlan.vue
index a1e5dbaf9..a0cf629fd 100644
--- a/src/modules/14_KPI/views/indicatorByPlan.vue
+++ b/src/modules/14_KPI/views/indicatorByPlan.vue
@@ -14,7 +14,7 @@ const { showLoader, hideLoader, dialogRemove, success, messageError } =
   useCounterMixin();
 
 /** หัวตาราง */
-const rows = ref<any>([]);
+const rows = ref<any[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "including",
@@ -40,25 +40,14 @@ const expanded = ref<any>([]);
 const filterMain = ref<string>("");
 const visibleColumns = ref<string[]>(["including", "includingName"]);
 
-const orgOp = ref<any[]>([
-  { id: "1", name: "กลุ่มงานช่วยนักบริหาร" },
-  { id: "2", name: "กลุ่มงานช่วยนักบริหาร 2" },
-]);
-
 const roundOp = ref<any[]>([
   { id: "APR", name: "รอบเมษายน" },
   { id: "OCT", name: "รอบตุลาคม" },
 ]);
 
-const formFilter = reactive({
-  page: 1,
-  pageSize: 10,
-  org: "1",
-  round: "",
-  keyword: "",
-});
 const totalList = ref<number>(1);
 
+const year = ref<number>(new Date().getFullYear());
 const nodeData = reactive<any>({
   page: 1,
   pageSize: 10,
@@ -68,12 +57,41 @@ const nodeData = reactive<any>({
   keyword: "",
 });
 
+function fetchRoundOption() {
+  showLoader();
+  http
+    .get(
+      config.API.kpiPeriod +
+        `?page=${1}&pageSize=${10}&keyword=${""}&year=${year.value}`
+    )
+    .then((res) => {
+      const data = res.data.result.data;
+      const list = data.map((e: any) => ({
+        id: e.id,
+        name:
+          e.durationKPI === "OCT"
+            ? "รอบตุลาคม"
+            : e.durationKPI === "APR"
+            ? "รอบเมษายน"
+            : "",
+      }));
+      roundOp.value = list;
+      nodeData.round = "";
+      fetchListProjectNew();
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
 function fetchList() {
   showLoader();
   http
     .get(
       config.API.kpiPlan +
-        `?page=${nodeData.page}&pageSize=${nodeData.pageSize}&round=${nodeData.round}&nodeId=${nodeData.nodeId}&node=${nodeData.node}&keyword=${nodeData.keyword}`
+        `?page=${nodeData.page}&pageSize=${nodeData.pageSize}&kpiPeriodId=${nodeData.round}&nodeId=${nodeData.nodeId}&node=${nodeData.node}&keyword=${nodeData.keyword}`
     )
     .then((res) => {
       const data = res.data.result.data;
@@ -94,13 +112,6 @@ function onClickAddOrView(status: boolean = false, id: string = "") {
     : router.push("/KPI-indicator-plan/add");
 }
 
-function onClickDelete(id: number) {
-  dialogRemove($q, () => {
-    rows.value.splice(id, 1);
-    success($q, "ลบข้อมูลสำเร็จ");
-  });
-}
-
 async function fetchData() {
   showLoader();
   await http
@@ -182,7 +193,8 @@ async function deleteData(idData: string) {
 
 onMounted(() => {
   fetchActive();
-  fetchData();
+  fetchRoundOption();
+  // fetchData();
 });
 </script>
 
@@ -190,80 +202,103 @@ onMounted(() => {
   <div class="toptitle text-dark col-12 row items-center">
     รายการตัวชี้วัดตามแผนฯ
   </div>
-  <q-card flat bordered class="q-pa-md">
-    <div class="row q-col-gutter-sm">
-      <q-card bordered class="col-4">
-        <q-card-section class="q-py-sm">
-          <div class="text-subtitle2 text-bold">หน่วยงาน/ส่วนราชการ</div>
-        </q-card-section>
-        <div class="col-xs-12 col-sm-3 row">
-          <div class="col-12 row no-wrap">
-            <div class="col-12 q-py-sm q-px-sm">
-              <div class="q-gutter-sm">
-                <q-input dense outlined v-model="filterMain" label="ค้นหา">
-                  <template v-slot:append>
-                    <q-icon
-                      v-if="filterMain !== ''"
-                      name="clear"
-                      class="cursor-pointer"
-                      @click="filterMain = ''"
-                    />
-                    <q-icon v-else name="search" color="grey-5" />
-                  </template>
-                </q-input>
-                <div>
-                  <q-tree
-                    class="tree-container"
-                    dense
-                    :nodes="node"
-                    node-key="orgTreeName"
-                    label-key="labelName"
-                    v-model:expanded="expanded"
-                    :filter="filterMain"
-                    no-results-label="ไม่พบข้อมูลที่ค้นหา"
-                    no-nodes-label="ไม่มีข้อมูล"
-                    v-model:selected="nodeData.nodeId"
-                  >
-                    <template v-slot:default-header="prop">
-                      <q-item
-                        clickable
-                        @click.stop="updateSelectedTreeMain(prop.node)"
-                        :active="nodeData.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"
-                      >
-                        <div>
-                          <div class="text-weight-medium">
-                            {{ prop.node.orgTreeName }}
-                          </div>
-                          <div class="text-weight-light text-grey-8">
-                            {{
-                              prop.node.orgCode == null
-                                ? null
-                                : prop.node.orgCode
-                            }}
-                            {{
-                              prop.node.orgTreeShortName == null
-                                ? null
-                                : prop.node.orgTreeShortName
-                            }}
-                          </div>
-                        </div>
-                      </q-item>
-                    </template>
-                  </q-tree>
-                </div>
-              </div>
-            </div>
-            <div class="col-12 row">
-              <q-separator :vertical="!$q.screen.lt.md" />
-            </div>
+  <q-card bordered class="col-12 row caedNone">
+    <div class="col-xs-12 col-sm-3 row">
+      <div class="col-12 row no-wrap">
+        <div class="col-12 q-py-sm q-px-sm">
+          <div class="q-gutter-sm">
+            <div class="text-subtitle2 text-bold">หน่วยงาน/ส่วนราชการ</div>
+            <q-input dense outlined v-model="filterMain" label="ค้นหา">
+              <template v-slot:append>
+                <q-icon
+                  v-if="filterMain !== ''"
+                  name="clear"
+                  class="cursor-pointer"
+                  @click="filterMain = ''"
+                />
+                <q-icon v-else name="search" color="grey-5" />
+              </template>
+            </q-input>
+            <q-tree
+              class="tree-container"
+              dense
+              :nodes="node"
+              node-key="orgTreeName"
+              label-key="labelName"
+              v-model:expanded="expanded"
+              :filter="filterMain"
+              no-results-label="ไม่พบข้อมูลที่ค้นหา"
+              no-nodes-label="ไม่มีข้อมูล"
+              v-model:selected="nodeData.nodeId"
+            >
+              <template v-slot:default-header="prop">
+                <q-item
+                  clickable
+                  @click.stop="updateSelectedTreeMain(prop.node)"
+                  :active="nodeData.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"
+                >
+                  <div>
+                    <div class="text-weight-medium">
+                      {{ prop.node.orgTreeName }}
+                    </div>
+                    <div class="text-weight-light text-grey-8">
+                      {{ prop.node.orgCode == null ? null : prop.node.orgCode }}
+                      {{
+                        prop.node.orgTreeShortName == null
+                          ? null
+                          : prop.node.orgTreeShortName
+                      }}
+                    </div>
+                  </div>
+                </q-item>
+              </template>
+            </q-tree>
           </div>
         </div>
-      </q-card>
-      <div class="col-8">
-        <div class="row q-col-gutter-sm q-mb-sm">
-          <div class="col-3">
+        <div class="col-12 row">
+          <q-separator :vertical="!$q.screen.lt.md" />
+        </div>
+      </div>
+    </div>
+    <div class="col-xs-12 col-sm-9 q-pa-md row">
+      <div class="col-12">
+        <q-toolbar style="padding: 0">
+          <div class="row q-gutter-sm">
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="year"
+              :locale="'th'"
+              autoApply
+              year-picker
+              :enableTimePicker="false"
+              style="width: 150px"
+              @update:model-value="fetchRoundOption"
+            >
+              <template #year="{ year }">{{ year + 543 }}</template>
+              <template #year-overlay-value="{ value }">{{
+                parseInt(value + 543)
+              }}</template>
+              <template #trigger>
+                <q-input
+                  dense
+                  lazy-rules
+                  outlined
+                  :model-value="year === 0 ? 'ทั้งหมด' : Number(year) + 543"
+                  :label="`${'ปีงบประมาณ'}`"
+                >
+                  <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
               dense
               outlined
@@ -275,28 +310,29 @@ onMounted(() => {
               emit-value
               map-options
               @update:model-value="fetchListProjectNew"
+              style="min-width: 150px"
             />
+            <q-toolbar-title>
+              <q-btn
+                flat
+                round
+                dense
+                icon="add"
+                color="primary"
+                @click="onClickAddOrView()"
+              >
+                <q-tooltip>เพิ่ม</q-tooltip>
+              </q-btn>
+            </q-toolbar-title>
           </div>
-          <div class="col-2">
-            <q-btn
-              flat
-              round
-              dense
-              icon="add"
-              color="primary"
-              @click="onClickAddOrView()"
-            >
-              <q-tooltip>เพิ่ม</q-tooltip>
-            </q-btn>
-          </div>
-          <div class="col-4">
+          <q-space />
+          <div class="row q-gutter-sm">
             <q-input
               standout
               dense
               v-model="nodeData.keyword"
               ref="filterRef"
               outlined
-              debounce="300"
               placeholder="ค้นหา"
             >
               <template v-slot:append>
@@ -309,8 +345,6 @@ onMounted(() => {
                 />
               </template>
             </q-input>
-          </div>
-          <div class="col-3">
             <q-select
               v-model="visibleColumns"
               multiple
@@ -326,7 +360,7 @@ onMounted(() => {
               style="min-width: 150px"
             />
           </div>
-        </div>
+        </q-toolbar>
         <div class="col-12">
           <d-table
             for="table"
@@ -387,12 +421,14 @@ onMounted(() => {
       </div>
     </div>
   </q-card>
+
+ 
 </template>
 
 <style lang="scss" scoped>
 .tree-container {
   overflow: auto;
-  height: 65vh;
+  height: 73vh;
   border: 1px solid #e6e6e7;
   border-radius: 10px;
 }
diff --git a/src/modules/15_development/components/BasicInfo.vue b/src/modules/15_development/components/BasicInfo.vue
index d8e5c314f..37fc6727b 100644
--- a/src/modules/15_development/components/BasicInfo.vue
+++ b/src/modules/15_development/components/BasicInfo.vue
@@ -166,6 +166,7 @@ onMounted(async () => {
       <div class="col-xs-12 col-sm-3 row">
         <div class="col-12 row no-wrap">
           <div class="col-12 q-py-sm q-px-sm q-gutter-sm">
+            <div class="text-subtitle2 text-bold">หน่วยงาน/ส่วนราชการ</div>
             <q-input dense outlined v-model="filter" label="ค้นหา">
               <template v-slot:append>
                 <q-icon
diff --git a/src/modules/15_development/views/MainPage.vue b/src/modules/15_development/views/MainPage.vue
index 79fd0cba6..397965756 100644
--- a/src/modules/15_development/views/MainPage.vue
+++ b/src/modules/15_development/views/MainPage.vue
@@ -273,6 +273,7 @@ onMounted(() => {
       <div class="col-12 row no-wrap">
         <div class="col-12 q-py-sm q-px-sm">
           <div class="q-gutter-sm">
+            <div class="text-subtitle2 text-bold">หน่วยงาน/ส่วนราชการ</div>
             <q-input dense outlined v-model="filterMain" label="ค้นหา">
               <template v-slot:append>
                 <q-icon