diff --git a/src/modules/14_KPI/components/indicatorByRole/DetailView.vue b/src/modules/14_KPI/components/indicatorByRole/DetailView.vue
index 94ad8bd6e..d0287e96e 100644
--- a/src/modules/14_KPI/components/indicatorByRole/DetailView.vue
+++ b/src/modules/14_KPI/components/indicatorByRole/DetailView.vue
@@ -74,13 +74,7 @@ const positionOp = ref<DataOption[]>([]);
 const positionMainOp = ref<DataOption[]>([]);
 
 /** Option  รอบการประเมิน*/
-const roundOp = ref<DataOption[]>([
-  { id: "APR", name: "รอบเมษายน" },
-  {
-    id: "OCT",
-    name: "รอบตุลาคม",
-  },
-]);
+const roundOp = ref<DataOption[]>([]);
 
 /**
  * function ต้นหาข้อมูลของ Option
@@ -245,7 +239,41 @@ function updateSelected(data: any) {
   form.orgRevisionId = data.orgRevisionId;
 }
 
+function getRound() {
+  showLoader();
+  http
+    .get(
+      config.API.kpiPeriod +
+        `?year=${form.year}`
+    )
+    .then((res) => {
+      const data = res.data.result.data;
+      roundOp.value = data.map((item: any) => ({
+        id: item.id,
+        name: statusTothai(item.durationKPI),
+      }))
+      console.log(roundOp.value)
+    })
+    .finally(() => {
+      hideLoader()
+    });
+}
+
+function statusTothai(val: string) {
+  switch (val) {
+    case "SPECIAL":
+      return "รอบพิเศษ";
+    case "APR":
+      return "รอบเมษายน";
+    case "OCT":
+      return "รอบตุลาคม";
+    default:
+      return "-";
+  }
+}
+
 onMounted(() => {
+  getRound()
   fetchActive();
   getOptions();
   if (id.value !== "") {
@@ -319,7 +347,7 @@ onMounted(() => {
                   hide-bottom-space
                   outlined
                   :model-value="
-                    form.year === 0 ? null : Number(form.year) + 543
+                    form.year === null ? null : Number(form.year) + 543
                   "
                   :label="`${'ปีงบประมาณ'}`"
                 >
diff --git a/src/modules/14_KPI/views/indicatorByRole.vue b/src/modules/14_KPI/views/indicatorByRole.vue
index 374735f34..5fa4180f5 100644
--- a/src/modules/14_KPI/views/indicatorByRole.vue
+++ b/src/modules/14_KPI/views/indicatorByRole.vue
@@ -58,8 +58,9 @@ const formFilter = reactive({
   page: 1,
   pageSize: 10,
   position: "",
-  round: "APR",
+  round: "",
   keyword: "",
+  year: new Date().getFullYear(),
 });
 const pagination = ref({
   page: formFilter.page,
@@ -67,20 +68,13 @@ const pagination = ref({
 });
 
 /** Option  รอบการประเมิน*/
-const roundOp = ref<DataOption[]>([
-  { id: "APR", name: "รอบเมษายน" },
-  {
-    id: "OCT",
-    name: "รอบตุลาคม",
-  },
-]);
+const roundOp = ref<DataOption[]>([]);
 
 function fetchList() {
-  showLoader();
   http
     .get(
       config.API.kpiRoleMainList +
-        `?page=${formFilter.page}&pageSize=${formFilter.pageSize}&round=${formFilter.round}&position=${formFilter.position}`
+        `?page=${formFilter.page}&pageSize=${formFilter.pageSize}&kpiPeriodId=${formFilter.round}&position=${formFilter.position}`
     )
     .then((res) => {
       console.log(res);
@@ -144,6 +138,7 @@ function filterOption(val: any, update: Function) {
 
 /** ดึงข้อมูลตำแหน่ง */
 function getOptions() {
+  showLoader();
   http.get(config.API.orgSalaryPosition).then((res) => {
     const dataOp = res.data.result;
     const uniqueNames = new Set();
@@ -164,9 +159,43 @@ function getOptions() {
   });
 }
 
-onMounted(() => {
-  fetchList();
-  getOptions();
+function getRound() {
+  showLoader();
+  http
+    .get(
+      config.API.kpiPeriod +
+        `?page=${formFilter.page}&pageSize=${formFilter.pageSize}&keyword=${formFilter.keyword}&year=${formFilter.year}`
+    )
+    .then((res) => {
+      const data = res.data.result.data;
+      roundOp.value = data.map((item: any) => ({
+        id: item.id,
+        name: statusTothai(item.durationKPI),
+      }))
+      console.log(roundOp.value)
+    })
+    .finally(() => {
+      hideLoader()
+    });
+}
+
+function statusTothai(val: string) {
+  switch (val) {
+    case "SPECIAL":
+      return "รอบพิเศษ";
+    case "APR":
+      return "รอบเมษายน";
+    case "OCT":
+      return "รอบตุลาคม";
+    default:
+      return "-";
+  }
+}
+
+onMounted(async () => {
+  await getOptions();
+  await getRound();
+  await fetchList();
 });
 </script>
 
@@ -192,7 +221,7 @@ onMounted(() => {
           use-input
           @filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn) "
           @update:model-value="fetchList"
-          >
+        >
           <template v-slot:no-option>
             <q-item>
               <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
@@ -201,7 +230,10 @@ onMounted(() => {
           <template v-if="formFilter.position" v-slot:append>
             <q-icon
               name="cancel"
-              @click.stop.prevent="formFilter.position = '';fetchList()"
+              @click.stop.prevent="
+                formFilter.position = '';
+                fetchList();
+              "
               class="cursor-pointer"
             />
           </template>
@@ -218,6 +250,52 @@ onMounted(() => {
           emit-value
           map-options
         /> -->
+        <datepicker
+          menu-class-name="modalfix"
+          v-model="formFilter.year"
+          :locale="'th'"
+          autoApply
+          year-picker
+          :enableTimePicker="false"
+          @update:model-value="(formFilter.page = 1),formFilter.round = '',getRound(),fetchList()"
+        >
+          <template #year="{ year }">{{ year + 543 }}</template>
+          <template #year-overlay-value="{ value }">{{
+            parseInt(value + 543)
+          }}</template>
+          <template #trigger>
+            <q-input
+              dense
+              lazy-rules
+              outlined
+              class="inputgreen"
+              :model-value="
+                formFilter.year === 0
+                  ? 'ทั้งหมด'
+                  : Number(formFilter.year) + 543
+              "
+              :label="`${'ปีงบประมาณ'}`"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+              <!-- <template v-if="formFilter.year" v-slot:append>
+                <q-icon
+                  name="cancel"
+                  @click.stop.prevent="
+                    (formFilter.year = 0), (formFilter.page = 1), getRound(),fetchList()
+                  "
+                  class="cursor-pointer"
+                />
+              </template> -->
+            </q-input>
+          </template>
+        </datepicker>
         <q-select
           dense
           outlined
@@ -229,6 +307,7 @@ onMounted(() => {
           emit-value
           map-options
           @update:model-value="fetchList"
+          style="width: 200px;"
         />
       </div>
       <q-toolbar-title>