diff --git a/src/api/14_KPI/api.KPI.ts b/src/api/14_KPI/api.KPI.ts
index 7132bd98b..c79f6b90b 100644
--- a/src/api/14_KPI/api.KPI.ts
+++ b/src/api/14_KPI/api.KPI.ts
@@ -6,6 +6,7 @@ const kpiUserEvaluation = `${env.API_URI}/kpi/user/evaluation`;
 const kpiAchievement = `${env.API_URI}/kpi/user/achievement`;
 const kpiGroup = `${env.API_URI}/kpi/group`;
 const kpiPlan = `${env.API_URI}/kpi/plan`;
+const kpiSpecial = `${env.API_URI}/kpi/special`;
 const kpiCapacity = `${env.API_URI}/kpi/capacity`;
 const kpiLink = `${env.API_URI}/kpi/link`;
 const KpiUser = `${env.API_URI}/kpi/user`;
@@ -25,6 +26,7 @@ export default {
   kpiGroupById: (id: string) => `${kpiGroup}/${id}`,
   kpiPlan,
   kpiPlanById: (id: string) => `${kpiPlan}/${id}`,
+  kpiSpecial,
 
   /** สมรรถนะ */
   kpiCapacity,
diff --git a/src/modules/01_metadataNew/components/Indicators/Assignment/DetailView.vue b/src/modules/01_metadataNew/components/Indicators/Assignment/DetailView.vue
index bd5d8ff1a..62a63bca6 100644
--- a/src/modules/01_metadataNew/components/Indicators/Assignment/DetailView.vue
+++ b/src/modules/01_metadataNew/components/Indicators/Assignment/DetailView.vue
@@ -13,29 +13,14 @@ import type { DataOption } from "@/modules/01_metadataNew/interface/index/Main";
 const $q = useQuasar();
 const route = useRoute();
 const router = useRouter();
+const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
 
 const heightSize = ref<string>("224");
-const filter = ref<string>("");
-const node = ref<any>([]);
-const expanded = ref<string[]>([]);
-const orgName = ref<string>("");
-const nodeId = ref<string>("");
-
 const id = ref<string>(route.params.id ? route.params.id.toLocaleString() : "");
-const {
-  showLoader,
-  hideLoader,
-  messageError,
-  success,
-  dialogConfirm,
-  dialogMessageNotify,
-} = useCounterMixin();
-const title = ref<string>(route.params.id ? "แก้ไข" : "เพิ่ม");
 
-const modalDialogSelect = ref<boolean>(false);
 const form = reactive<FormDataRole>({
   position: "", //ตำแหน่งในสายงาน
-  year: new Date().getFullYear(), //ปีงบประมาณ
+  year: null, //ปีงบประมาณ
   round: "", //รอบการประเมิน
   org: "", //หน่วยงาน/ส่วนราชการ
   including: "", //รหัสตัวชี้วัด
@@ -50,6 +35,7 @@ const form = reactive<FormDataRole>({
   node: null,
   nodeId: null,
   orgRevisionId: null,
+  date: [null, null],
 });
 
 const fieldLabels = {
@@ -68,170 +54,36 @@ const formScore = reactive<any>({
   score1: "",
 });
 
-const positionOp = ref<DataOption[]>([]);
-const positionMainOp = ref<DataOption[]>([]);
-
 /** Option  รอบการประเมิน*/
 const roundOp = ref<DataOption[]>([
   { id: "APR", name: "รอบเมษายน" },
   { id: "OCT", name: "รอบตุลาคม" },
 ]);
 
-/**
- * function ต้นหาข้อมูลของ Option
- * @param val ค่าที่ต้องการฟิลเตอร์
- * @param update  อัพเดทค่า
- * @param refData ดาต้าที่ต้องการฟิลเตอร์
- */
-function filterOption(val: any, update: Function) {
-  update(() => {
-    positionOp.value = positionMainOp.value.filter(
-      (v: any) => v.name.indexOf(val) > -1
-    );
-  });
-}
-
-/** ดึงข้อมูลตำแหน่ง */
-function getOptions() {
-  http.get(config.API.orgSalaryPosition).then((res) => {
-    const dataOp = res.data.result;
-    const uniqueNames = new Set();
-    const filteredData = dataOp
-      .filter((item: any) => {
-        if (!uniqueNames.has(item.positionName)) {
-          uniqueNames.add(item.positionName);
-          return true;
-        }
-        return false;
-      })
-      .map((item: any) => ({
-        id: item.positionName,
-        name: item.positionName,
-      }));
-
-    positionMainOp.value = filteredData;
-  });
-}
-
-/** เปิด Dialog หน่วยงาน */
-function selectAgency() {
-  modalDialogSelect.value = true;
-}
-
-/** บันทึกข้อมูล */
-function onSubmit() {
-  const url = id.value
-    ? config.API.kpiRoleMainList + `/${id.value}`
-    : config.API.kpiRoleMainList;
-
-  const body = {
-    year: form.year == 0 ? null : form.year,
-    position: form.position, //ตำแหน่ง
-    period: form.round, //รอบการประเมิน(เมษา->APR, ตุลา->OCT)
-    includingName: form.includingName, //ชื่อตัวชี้วัด
-    target: form.target, //ค่าเป้าหมาย
-    unit: form.unit, //หน่วยนับ
-    weight: form.weight, //น้ำหนัก
-    achievement1: formScore.score1, //ผลสำเร็จของงาน 1
-    achievement2: formScore.score2, //ผลสำเร็จของงาน 2
-    achievement3: formScore.score3, //ผลสำเร็จของงาน 3
-    achievement4: formScore.score4, //ผลสำเร็จของงาน 4
-    achievement5: formScore.score5, //ผลสำเร็จของงาน 5
-    meaning: form.meaning, //นิยามหรือความหมาย
-    formula: form.formula, //สูตรคำนวณ
-    documentInfoEvidence: form.documentInfoEvidence, //ข้อมูลเอกสารหลักฐาน
-
-    node: form.node, //ระดับหน่วยงาน
-    nodeId: form.nodeId, //id หน่วยงาน
-    orgRevisionId: form.orgRevisionId, //RevisionId หน่วยงาน
-  };
-
-  if (form.nodeId == null) {
-    dialogMessageNotify($q, "กรุณาเลือกหน่วยงาน/ส่วนราชการ");
-  } else {
-    dialogConfirm($q, () => {
-      showLoader();
-      http[id.value ? "put" : "post"](url, body)
-        .then(() => {
-          success($q, "บันทึกสำเร็จ");
-          id.value ? getDetail() : router.push(`/KPI-indicator-role`);
-        })
-        .catch((err) => {
-          messageError($q, err);
-        })
-        .finally(() => {
-          hideLoader();
-        });
-    });
-  }
-}
-
-//
-//
-function getDetail() {
+function fetchspecialByid(id: string) {
   showLoader();
   http
-    .get(config.API.kpiRoleMainList + `/${id.value}`)
+    .get(config.API.kpiSpecial + `/${id}`)
     .then((res) => {
       const data = res.data.result;
-      form.position = data.position;
-      form.year = data.year == null ? 0 : data.year;
-      form.round = data.round;
+      form.year = data.year;
+      form.round = data.period;
       form.including = data.including;
       form.includingName = data.includingName;
       form.target = data.target;
       form.unit = data.unit;
       form.weight = data.weight;
-      form.meaning = data.meaning;
-      form.formula = data.formula;
-
       formScore.score1 = data.achievement1;
       formScore.score2 = data.achievement2;
       formScore.score3 = data.achievement3;
       formScore.score4 = data.achievement4;
       formScore.score5 = data.achievement5;
-
-      form.node = data.node;
-      form.nodeId = data.nodeId;
-      form.orgRevisionId = data.orgRevisionId;
-      const arrayExpanded = [
-        data.root,
-        data.child1,
-        data.child2,
-        data.child3,
-        data.child4,
-      ];
-      expanded.value = arrayExpanded.filter((e) => e !== null).slice(0, -1);
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-function fetchActive() {
-  showLoader();
-  http
-    .get(config.API.activeOrganization)
-    .then((res) => {
-      const data = res.data.result;
-      fetchTree(data.activeId);
-    })
-    .catch((err) => {
-      messageError($q, err);
-      hideLoader();
-    });
-}
-
-async function fetchTree(id: string) {
-  showLoader();
-  http
-    .get(config.API.orgByid(id.toString()))
-    .then((res) => {
-      const data = res.data.result;
-      node.value = data;
+      form.formula = data.formula;
+      form.meaning = data.meaning;
+      form.documentInfoEvidence = data.documentInfoEvidence;
+      if (data.startDate && data.endDate) {
+        form.date = [data.startDate, data.endDate];
+      }
     })
     .catch((err) => {
       messageError($q, err);
@@ -241,28 +93,12 @@ async function fetchTree(id: string) {
     });
 }
 
-function updateSelected(data: any) {
-  nodeId.value = data.orgTreeId;
-  orgName.value = data.orgTreeName;
-  form.node = data.orgLevel;
-  form.nodeId = data.orgTreeId;
-  form.orgRevisionId = data.orgRevisionId;
-}
-
 function onResize(size: any) {
   heightSize.value = `${size.height - 99}`;
 }
 
-function setModel(val: string) {
-  form.position = val;
-}
-
 onMounted(() => {
-  fetchActive();
-//   getOptions();
-//   if (id.value !== "") {
-//     getDetail();
-//   }
+  fetchspecialByid(id.value);
 });
 </script>
 <template>
@@ -276,370 +112,251 @@ onMounted(() => {
       color="primary"
       @click="router.go(-1)"
     />
-    {{ `${title}งานที่ได้รับมอบหมาย` }}
+    รายละเอียดงานที่ได้รับมอบหมาย
   </div>
   <q-card flat>
-    <q-form greedy @submit.prevent @validation-success="onSubmit">
-      <q-card-section>
-        <div class="row q-col-gutter-sm">
-          <div class="col-8">
-            <q-select
-              dense
-              :model-value="form.position"
-              label="ตำแหน่งในสายงาน"
-              outlined
-              emit-value
-              map-options
-              fill-input
-              hide-selected
-              lazy-rules
-              :rules="[(val:string) => !!val || `${'กรุณาเลือกตำแหน่งในสายงาน'}`,]"
-              hide-bottom-space
-              option-label="name"
-              option-value="id"
-              class="inputgreen"
-              :options="positionOp"
-              use-input
-              @input-value="setModel"
-              @filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn) "
-            >
-              <template v-slot:no-option>
-                <q-item>
-                  <q-item-section class="text-grey">
-                    ไม่มีข้อมูล
-                  </q-item-section>
-                </q-item>
-              </template></q-select
-            >
-          </div>
-          <div class="col-2">
-            <datepicker
-              menu-class-name="modalfix"
-              v-model="form.year"
-              :locale="'th'"
-              autoApply
-              year-picker
-              :enableTimePicker="false"
-              @update:model-value="form.round = ''"
-            >
-              <template #year="{ year }">{{ year + 543 }}</template>
-              <template #year-overlay-value="{ value }">{{
-                parseInt(value + 543)
-              }}</template>
-              <template #trigger>
-                <q-input
-                  dense
-                  class="inputgreen"
-                  outlined
-                  :model-value="
-                    form.year === 0 ? null : Number(form.year) + 543
-                  "
-                  :label="`${'ปีงบประมาณ'}`"
-                >
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--q-primary)"
-                    >
-                    </q-icon>
-                  </template>
-                  <template v-slot:append>
-                    <q-icon
-                      v-if="form.year"
-                      name="cancel"
-                      class="cursor-pointer"
-                      @click.stop.prevent="
-                        form.year = 0;
-                        form.round = '';
-                      "
-                    />
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
-          </div>
-          <div class="col-2">
-            <q-select
-              :readonly="form.year == 0"
-              dense
-              outlined
-              v-model="form.round"
-              :options="roundOp"
-              option-label="name"
-              option-value="id"
-              emit-value
-              map-options
-              input-class="text-red"
-              label="รอบการประเมิน"
-              class="inputgreen"
-            />
-          </div>
-          <div class="col-2" v-if="id">
-            <q-input
-              label="ลำดับ/รหัสตัวชี้วัด"
-              v-model="form.including"
-              outlined
-              readonly
-              dense
-              class="inputgreen"
-            />
-          </div>
-          <div class="col-4">
-            <q-input
-              label="ชื่อตัวชี้วัด"
-              v-model="form.includingName"
-              outlined
-              dense
-              class="inputgreen"
-              lazy-rules
-              :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อตัวชี้วัด'}`,]"
-              hide-bottom-space
-            />
-          </div>
-          <div class="col-2">
-            <q-input
-              label="ค่าเป้าหมาย"
-              v-model="form.target"
-              outlined
-              dense
-              class="inputgreen"
-              lazy-rules
-              :rules="[(val:string) => !!val || `${'กรุณากรอกค่าเป้าหมาย'}`,]"
-              hide-bottom-space
-            />
-          </div>
-          <div class="col-2">
-            <q-input
-              label="หน่วยนับ"
-              v-model="form.unit"
-              outlined
-              dense
-              class="inputgreen"
-              lazy-rules
-              :rules="[(val:string) => !!val || `${'กรุณากรอกหน่วยนับ'}`,]"
-              hide-bottom-space
-            />
-          </div>
-          <div class="col-2">
-            <q-input
-              label="น้ำหนัก"
-              v-model="form.weight"
-              outlined
-              dense
-              class="inputgreen"
-              lazy-rules
-              :rules="[(val:string) => !!val || `${'กรุณากรอกน้ำหนัก'}`,]"
-              hide-bottom-space
-            />
-          </div>
-          <div class="col-4">
-            <q-card flat bordered class="full-height">
-              <q-card-section class="bg-grey-3 q-pa-sm">
-                <div class="text-dark text-body2 text-weight-medium">
-                  หน่วยงาน/ส่วนราชการ
-                </div>
-              </q-card-section>
-              <q-card-section class="q-pa-sm">
-                <q-input
-                  dense
-                  outlined
-                  v-model="filter"
-                  label="ค้นหา"
-                  class="inputgreen"
-                >
-                  <template v-slot:append>
-                    <q-icon
-                      v-if="filter !== ''"
-                      name="clear"
-                      class="cursor-pointer"
-                      @click="filter = ''"
-                    />
-                    <q-icon v-else name="search" color="grey-5" />
-                  </template>
-                </q-input>
-                <q-scroll-area
-                  visible
-                  :style="{ height: `${heightSize}px`, marginTop: '5px' }"
-                >
-                  <q-tree
-                    dense
-                    :nodes="node"
-                    node-key="orgTreeId"
-                    label-key="orgTreeName"
-                    v-model:expanded="expanded"
-                    :filter="filter"
-                    no-results-label="ไม่พบข้อมูลที่ค้นหา"
-                    no-nodes-label="ไม่มีข้อมูล"
+    <q-card-section>
+      <div class="row q-col-gutter-sm">
+        <div class="col-2">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="form.year"
+            :locale="'th'"
+            autoApply
+            year-picker
+            :enableTimePicker="false"
+            @update:model-value="form.round = ''"
+            readonly
+          >
+            <template #year="{ year }">{{ year + 543 }}</template>
+            <template #year-overlay-value="{ value }">{{
+              parseInt(value + 543)
+            }}</template>
+            <template #trigger>
+              <q-input
+                dense
+                class="inputgreen"
+                outlined
+                :model-value="form.year === 0 ? null : Number(form.year) + 543"
+                :label="`${'ปีงบประมาณ'}`"
+                readonly
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    style="color: var(--q-primary)"
                   >
-                    <template v-slot:default-header="prop">
-                      <q-item
-                        clickable
-                        @click.stop="updateSelected(prop.node)"
-                        :active="form.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>
-                </q-scroll-area>
-              </q-card-section>
-            </q-card>
-          </div>
-          <div class="col-8">
-            <q-card flat bordered>
-              <q-resize-observer @resize="onResize" />
-              <q-card-section class="bg-grey-3 q-pa-sm">
-                <div class="row text-dark text-body2 text-weight-medium">
-                  <div class="text-center col-4">ระดับคะแนน</div>
-                  <div class="col-8">ผลสำเร็จของงาน</div>
-                </div>
-              </q-card-section>
-              <q-card-section class="q-pa-none">
-                <div
-                  v-for="(field, index) in Object.keys(fieldLabels)"
-                  :key="index + 1"
-                >
-                  <div class="row q-pa-sm">
-                    <div
-                      class="col-4 text-center text-body1 text-weight-bold self-center"
-                    >
-                      {{ fieldLabels[field as keyof typeof fieldLabels] }}
-                    </div>
-                    <div class="col-8 text-left">
-                      <!-- <q-field
-                    class="q_field_p_none"
-                    ref="fieldRef"
-                    v-model="formScore[field]"
-                    label-slot
-                    borderless
-                    :rules="[(val) => !!val || 'กรุณากรอกมาตรฐานพฤติกรรม']"
-                    hide-bottom-space
-                  >
-                    <template #control>
-                      <q-editor
-                        class="full-width"
-                        v-model="formScore[field]"
-                        :dense="$q.screen.lt.md"
-                        min-height="5rem"
-                        :toolbar="[
-                          [
-                            'bold',
-                            'italic',
-                            'strike',
-                            'underline',
-                            'subscript',
-                            'superscript',
-                          ],
-
-                          ['unordered', 'ordered'],
-                        ]"
-                        :fonts="{
-                          arial: 'Arial',
-                          arial_black: 'Arial Black',
-                          comic_sans: 'Comic Sans MS',
-                          courier_new: 'Courier New',
-                          impact: 'Impact',
-                          lucida_grande: 'Lucida Grande',
-                          times_new_roman: 'Times New Roman',
-                          verdana: 'Verdana',
-                        }"
-                      />
-                    </template>
-                  </q-field> -->
-                      <q-input
-                        v-model="formScore[field]"
-                        dense
-                        outlined
-                        class="inputgreen"
-                        label="กรอกผลสำเร็จของงาน"
-                        :rules="[(val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,]"
-                        hide-bottom-space
-                      />
-                    </div>
-                  </div>
-                  <div
-                    class="col-12"
-                    v-if="index !== Object.keys(fieldLabels).length - 1"
-                  >
-                    <q-separator />
-                  </div>
-                </div>
-              </q-card-section>
-            </q-card>
-          </div>
-          <div class="col-12">
-            <q-input
-              v-model="form.meaning"
-              label="นิยามหรือความหมาย"
-              dense
-              outlined
-              lazy-rules
-              class="inputgreen"
-              :rules="[(val:string) => !!val || `${'กรุณากรอกนิยามหรือความหมาย'}`,]"
-              hide-bottom-space
-              type="textarea"
-            />
-          </div>
-          <div class="col-12">
-            <q-input
-              v-model="form.formula"
-              label="สูตรคำนวณ"
-              dense
-              outlined
-              lazy-rules
-              class="inputgreen"
-              :rules="[(val:string) => !!val || `${'กรุณากรอกสูตรคำนวณ'}`,]"
-              hide-bottom-space
-              type="textarea"
-            />
-          </div>
-          <div class="col-12">
-            <q-input
-              class="inputgreen"
-              v-model="form.documentInfoEvidence"
-              label="ข้อมูลเอกสารหลักฐาน"
-              outlined
-              dense
-              type="textarea"
-            ></q-input>
-          </div>
+                  </q-icon>
+                </template>
+              </q-input>
+            </template>
+          </datepicker>
         </div>
-      </q-card-section>
-      <q-separator />
-      <q-card-actions align="right">
-        <q-btn color="public" label="บันทึก" type="submit" unelevated>
-          <q-tooltip>บันทึกข้อมูล</q-tooltip>
-        </q-btn>
-      </q-card-actions>
-    </q-form>
+        <div class="col-2">
+          <q-select
+            readonly
+            dense
+            outlined
+            v-model="form.round"
+            :options="roundOp"
+            option-label="name"
+            option-value="id"
+            emit-value
+            map-options
+            input-class="text-red"
+            label="รอบการประเมิน"
+            class="inputgreen"
+          />
+        </div>
+        <div class="col-2" v-if="id">
+          <q-input
+            label="ลำดับ/รหัสตัวชี้วัด"
+            v-model="form.including"
+            outlined
+            readonly
+            dense
+            class="inputgreen"
+          />
+        </div>
+        <div class="col-6">
+          <q-input
+            readonly
+            label="ชื่อตัวชี้วัด"
+            v-model="form.includingName"
+            outlined
+            dense
+            class="inputgreen"
+            lazy-rules
+            :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อตัวชี้วัด'}`,]"
+            hide-bottom-space
+          />
+        </div>
+        <div class="col-4">
+          <q-input
+            readonly
+            label="ค่าเป้าหมาย"
+            v-model="form.target"
+            outlined
+            dense
+            class="inputgreen"
+            lazy-rules
+            :rules="[(val:string) => !!val || `${'กรุณากรอกค่าเป้าหมาย'}`,]"
+            hide-bottom-space
+          />
+        </div>
+        <div class="col-4">
+          <q-input
+            readonly
+            label="หน่วยนับ"
+            v-model="form.unit"
+            outlined
+            dense
+            class="inputgreen"
+            lazy-rules
+            :rules="[(val:string) => !!val || `${'กรุณากรอกหน่วยนับ'}`,]"
+            hide-bottom-space
+          />
+        </div>
+        <div class="col-4">
+          <q-input
+            readonly
+            label="น้ำหนัก"
+            v-model="form.weight"
+            outlined
+            dense
+            class="inputgreen"
+            lazy-rules
+            :rules="[(val:string) => !!val || `${'กรุณากรอกน้ำหนัก'}`,]"
+            hide-bottom-space
+          />
+        </div>
+
+        <div class="col-12">
+          <q-card flat bordered>
+            <q-resize-observer @resize="onResize" />
+            <q-card-section class="bg-grey-3 q-pa-sm">
+              <div class="row text-dark text-body2 text-weight-medium">
+                <div class="text-center col-4">ระดับคะแนน</div>
+                <div class="col-8">ผลสำเร็จของงาน</div>
+              </div>
+            </q-card-section>
+            <q-card-section class="q-pa-none">
+              <div
+                v-for="(field, index) in Object.keys(fieldLabels)"
+                :key="index + 1"
+              >
+                <div class="row q-pa-sm">
+                  <div
+                    class="col-4 text-center text-body1 text-weight-bold self-center"
+                  >
+                    {{ fieldLabels[field as keyof typeof fieldLabels] }}
+                  </div>
+                  <div class="col-8 text-left">
+                    <q-input
+                      readonly
+                      v-model="formScore[field]"
+                      dense
+                      outlined
+                      class="inputgreen"
+                      label="กรอกผลสำเร็จของงาน"
+                      :rules="[(val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,]"
+                      hide-bottom-space
+                    />
+                  </div>
+                </div>
+                <div
+                  class="col-12"
+                  v-if="index !== Object.keys(fieldLabels).length - 1"
+                >
+                  <q-separator />
+                </div>
+              </div>
+            </q-card-section>
+          </q-card>
+        </div>
+        <div class="col-12">
+          <q-input
+            readonly
+            v-model="form.meaning"
+            label="นิยามหรือความหมาย"
+            dense
+            outlined
+            lazy-rules
+            class="inputgreen"
+            :rules="[(val:string) => !!val || `${'กรุณากรอกนิยามหรือความหมาย'}`,]"
+            hide-bottom-space
+            type="textarea"
+          />
+        </div>
+        <div class="col-12">
+          <q-input
+            readonly
+            v-model="form.formula"
+            label="สูตรคำนวณ"
+            dense
+            outlined
+            lazy-rules
+            class="inputgreen"
+            :rules="[(val:string) => !!val || `${'กรุณากรอกสูตรคำนวณ'}`,]"
+            hide-bottom-space
+            type="textarea"
+          />
+        </div>
+        <div class="col-12">
+          <q-input
+            readonly
+            class="inputgreen"
+            v-model="form.documentInfoEvidence"
+            label="ข้อมูลเอกสารหลักฐาน"
+            outlined
+            dense
+            type="textarea"
+          ></q-input>
+        </div>
+        <div class="col-3">
+          <datepicker
+            v-model="form.date"
+            :locale="'th'"
+            autoApply
+            :enableTimePicker="false"
+            week-start="0"
+            range
+            readonly
+          >
+            <template #year="{ year }">{{ year + 543 }}</template>
+            <template #year-overlay-value="{ value }">{{
+              parseInt(value + 543)
+            }}</template>
+            <template #trigger>
+              <q-input
+                readonly
+                dense
+                outlined
+                class="inputgreen"
+                :model-value="
+                  form.date
+                    ? `${date2Thai(form.date[0])} - ${date2Thai(form.date[1])}`
+                    : null
+                "
+                :label="`${'ช่วงเวลาเริ่มต้น-สิ้นสุด'}`"
+                hide-bottom-space
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    style="color: var(--q-primary)"
+                  >
+                  </q-icon>
+                </template>
+              </q-input>
+            </template>
+          </datepicker>
+        </div>
+      </div>
+    </q-card-section>
   </q-card>
 </template>
 
-<style 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>
+<style scoped></style>
diff --git a/src/modules/01_metadataNew/interface/request/Main.ts b/src/modules/01_metadataNew/interface/request/Main.ts
index a2448b81a..5cb7bdbfd 100644
--- a/src/modules/01_metadataNew/interface/request/Main.ts
+++ b/src/modules/01_metadataNew/interface/request/Main.ts
@@ -35,6 +35,7 @@ interface FormDataRole {
   node: number | null;
   nodeId: string | null;
   orgRevisionId: string | null;
+  date: any | null;
 }
 
 interface FormCompetency {
diff --git a/src/modules/01_metadataNew/views/Assignment.vue b/src/modules/01_metadataNew/views/Assignment.vue
index d38186ddb..4912a42ed 100644
--- a/src/modules/01_metadataNew/views/Assignment.vue
+++ b/src/modules/01_metadataNew/views/Assignment.vue
@@ -1,7 +1,14 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, reactive, watch } from "vue";
 import { useRouter } from "vue-router";
 import { useQuasar, type QTableProps } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type {
+  DataOption,
+  NewPagination,
+} from "@/modules/01_metadataNew/interface/index/Main";
 
 /** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
@@ -32,36 +39,85 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
+
+/** Option  รอบการประเมิน*/
+const roundOp = ref<DataOption[]>([
+  { id: "APR", name: "รอบเมษายน" },
+  { id: "OCT", name: "รอบตุลาคม" },
+]);
 const visibleColumns = ref<string[]>(["including", "includingName"]);
 const rows = ref<any[]>([]);
-const filter = ref<string>("");
+
+const formFilter = reactive<any>({
+  keyword: "",
+  period: "",
+  year: new Date().getFullYear(),
+  pageSize: 10,
+  page: 1,
+});
+const totalList = ref<number>(0); //จำนวนข้อมูลรายการ
+const maxPage = ref<number>(1);
+
+function fetchList() {
+  showLoader();
+  formFilter.year = formFilter.year ? formFilter.year.toString() : null;
+  http
+    .post(config.API.kpiSpecial + `/search`, formFilter)
+    .then((res) => {
+      maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
+      totalList.value = res.data.result.total;
+      rows.value = res.data.result.data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+      rows.value = [];
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
 
 function onClickView(id: string = "") {
   router.push(`/assignment/${id}`);
 }
 
-function onClickHistory(id: string) {}
-
 function onClickDelete(id: string) {
   dialogRemove($q, () => {
-    console.log(id);
+    showLoader();
+    http
+      .delete(config.API.kpiSpecial + `/${id}`)
+      .then(() => {
+        fetchList();
+        success($q, "ลบข้อมูลสำเร็จ");
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
   });
 }
 
-onMounted(() => {
-  showLoader();
-  const list = [
-    {
-      id: "1",
-      including: "12",
-      includingName: "name",
-    },
-  ];
+function fetchNewList() {
+  formFilter.page = 1;
+  fetchList();
+}
 
-  setTimeout(() => {
-    rows.value = list;
-    hideLoader();
-  }, 100);
+function updatePageSize(newPagination: NewPagination) {
+  formFilter.page = 1;
+  formFilter.pageSize = newPagination.rowsPerPage;
+}
+
+watch(
+  () => formFilter.pageSize,
+  () => {
+    fetchList();
+  }
+);
+
+onMounted(() => {
+  fetchList();
 });
 </script>
 
@@ -72,15 +128,92 @@ onMounted(() => {
   <q-card flat bordered class="q-pa-md">
     <div class="row q-col-gutter-sm q-pl-sm">
       <q-toolbar style="padding: 0">
+        <div class="row q-gutter-sm">
+          <datepicker
+            style="width: 150px"
+            menu-class-name="modalfix"
+            v-model="formFilter.year"
+            :locale="'th'"
+            autoApply
+            year-picker
+            :enableTimePicker="false"
+            @update:model-value="(formFilter.period = ''), fetchNewList()"
+          >
+            <template #year="{ year }">{{ year + 543 }}</template>
+            <template #year-overlay-value="{ value }">{{
+              parseInt(value + 543)
+            }}</template>
+            <template #trigger>
+              <q-input
+                dense
+                outlined
+                :model-value="
+                  formFilter.year === null
+                    ? 'ทั้งหมด'
+                    : 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 = null), fetchNewList()
+                    "
+                    class="cursor-pointer"
+                  />
+                </template>
+              </q-input>
+            </template>
+          </datepicker>
+          <q-select
+            dense
+            outlined
+            v-model="formFilter.period"
+            :model-value="
+              formFilter.period === '' ? 'ทั้งหมด' : formFilter.period
+            "
+            :options="roundOp"
+            label="รอบการประเมิน"
+            option-label="name"
+            option-value="id"
+            emit-value
+            map-options
+            @update:model-value="fetchNewList"
+            style="width: 160px"
+          >
+            <template v-if="formFilter.period" v-slot:append>
+              <q-icon
+                name="cancel"
+                @click.stop.prevent="(formFilter.period = ''), fetchNewList()"
+                class="cursor-pointer"
+              />
+            </template>
+          </q-select>
+        </div>
         <q-space />
         <div class="row q-gutter-sm">
-          <q-input dense outlined v-model="filter" label="ค้นหา">
+          <q-input
+            dense
+            outlined
+            v-model="formFilter.keyword"
+            label="ค้นหา"
+            @keydown.enter="fetchNewList"
+          >
             <template v-slot:append>
               <q-icon
-                v-if="filter !== ''"
+                v-if="formFilter.keyword !== ''"
                 name="clear"
                 class="cursor-pointer"
-                @click="filter = ''"
+                @click="(formFilter.keyword = ''), fetchNewList()"
               />
               <q-icon v-else name="search" color="grey-5" />
             </template>
@@ -115,6 +248,7 @@ onMounted(() => {
         class="custom-header-table"
         :rows-per-page-options="[10, 25, 50, 100]"
         :visible-columns="visibleColumns"
+        @update:pagination="updatePageSize"
       >
         <template v-slot:header="props">
           <q-tr :props="props">
@@ -135,68 +269,40 @@ onMounted(() => {
               <q-btn
                 flat
                 round
-                color="grey"
-                @click.stop
+                color="primary"
                 size="14px"
-                icon="more_vert"
+                icon="mdi-eye"
+                @click.pervent="onClickView(props.row.id)"
               >
-                <q-menu>
-                  <q-list style="min-width: 180px">
-                    <q-item
-                      clickable
-                      v-close-popup
-                      @click="onClickView(props.row.id)"
-                    >
-                      <q-item-section
-                        style="min-width: 0px"
-                        avatar
-                        class="q-py-sm"
-                      >
-                        <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-                        <q-icon
-                          color="primary"
-                          size="xs"
-                          name="mdi-pencil-outline"
-                        />
-                      </q-item-section>
-                      <q-item-section>แก้ไขข้อมูล</q-item-section>
-                    </q-item>
-                    <q-item
-                      clickable
-                      v-close-popup
-                      @click="onClickHistory(props.row.id)"
-                    >
-                      <q-item-section
-                        style="min-width: 0px"
-                        avatar
-                        class="q-py-sm"
-                      >
-                        <q-tooltip>ประวัติการแก้ไข</q-tooltip>
-                        <q-icon color="info" size="xs" name="mdi-history" />
-                      </q-item-section>
-                      <q-item-section>ประวัติการแก้ไข</q-item-section>
-                    </q-item>
-                    <q-item
-                      clickable
-                      v-close-popup
-                      @click.stop.pervent="onClickDelete(props.row.id)"
-                    >
-                      <q-item-section
-                        style="min-width: 0px"
-                        avatar
-                        class="q-py-sm"
-                      >
-                        <q-tooltip>ลบข้อมูล</q-tooltip>
-                        <q-icon color="red" size="xs" name="mdi-delete" />
-                      </q-item-section>
-                      <q-item-section>ลบข้อมูล</q-item-section>
-                    </q-item>
-                  </q-list>
-                </q-menu>
+                <q-tooltip>ดูข้อมูล</q-tooltip>
+              </q-btn>
+              <q-btn
+                flat
+                round
+                color="red"
+                size="14px"
+                icon="mdi-delete "
+                @click.pervent="onClickDelete(props.row.id)"
+              >
+                <q-tooltip>ลบข้อมูล</q-tooltip>
               </q-btn>
             </q-td>
           </q-tr>
         </template>
+        <template v-slot:pagination="scope">
+          ทั้งหมด {{ totalList }} รายการ
+          <q-pagination
+            v-model="formFilter.page"
+            active-color="primary"
+            color="dark"
+            :max="maxPage"
+            :max-pages="5"
+            size="sm"
+            boundary-links
+            direction-links
+            @update:model-value="fetchList"
+          ></q-pagination>
+        </template>
       </d-table>
     </div>
   </q-card>
diff --git a/src/modules/01_metadataNew/views/indicatorByPlan.vue b/src/modules/01_metadataNew/views/indicatorByPlan.vue
index a2d64691e..fcda07998 100644
--- a/src/modules/01_metadataNew/views/indicatorByPlan.vue
+++ b/src/modules/01_metadataNew/views/indicatorByPlan.vue
@@ -204,13 +204,7 @@ onMounted(async () => {
           <div class="q-gutter-sm">
             <div class="text-subtitle2 text-bold">หน่วยงาน/ส่วนราชการ</div>
 
-            <q-input
-              class="inputgreen"
-              dense
-              outlined
-              v-model="filterMain"
-              label="ค้นหา"
-            >
+            <q-input dense outlined v-model="filterMain" label="ค้นหา">
               <template v-slot:append>
                 <q-icon
                   v-if="filterMain !== ''"
@@ -300,7 +294,6 @@ onMounted(async () => {
               }}</template>
               <template #trigger>
                 <q-input
-                  class="inputgreen"
                   dense
                   outlined
                   :model-value="year === null ? 'ทั้งหมด' : Number(year) + 543"
@@ -329,7 +322,6 @@ onMounted(async () => {
               </template>
             </datepicker>
             <q-select
-              class="inputgreen"
               dense
               outlined
               v-model="nodeData.round"
diff --git a/src/modules/01_metadataNew/views/indicatorByRole.vue b/src/modules/01_metadataNew/views/indicatorByRole.vue
index b31493914..6e0dc1a90 100644
--- a/src/modules/01_metadataNew/views/indicatorByRole.vue
+++ b/src/modules/01_metadataNew/views/indicatorByRole.vue
@@ -118,13 +118,19 @@ function onClickAddOrView(status: boolean = false, id: string = "") {
 
 function onClickDelete(id: number) {
   dialogRemove($q, () => {
+    showLoader();
     http
       .delete(config.API.kpiRoleMainList + `/${id}`)
-      .then((res) => {
+      .then(() => {
         success($q, "ลบข้อมูลสำเร็จ");
         fetchList();
       })
-      .finally(() => {});
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
   });
 }
 
@@ -301,7 +307,6 @@ onMounted(async () => {
           hide-bottom-space
           option-label="name"
           option-value="id"
-          class="inputgreen"
           :options="positionOp"
           use-input
           @input-value="setModel"
@@ -325,19 +330,8 @@ onMounted(async () => {
           </template>
         </q-select>
 
-        <!-- <q-select
-          dense
-          outlined
-          v-model="formFilter.position"
-          :options="positionOp"
-          label="ตำแหน่ง"
-          option-label="name"
-          option-value="id"
-          emit-value
-          map-options
-        /> -->
         <datepicker
-          style="width: 120px"
+          style="width: 150px"
           menu-class-name="modalfix"
           v-model="formFilter.year"
           :locale="'th'"
@@ -356,7 +350,6 @@ onMounted(async () => {
             <q-input
               dense
               outlined
-              class="inputgreen"
               :model-value="
                 formFilter.year === null
                   ? 'ทั้งหมด'
@@ -390,7 +383,6 @@ onMounted(async () => {
           outlined
           v-model="formFilter.round"
           :model-value="formFilter.round === '' ? 'ทั้งหมด' : formFilter.round"
-          class="inputgreen"
           :options="roundOp"
           label="รอบการประเมิน"
           option-label="name"