diff --git a/src/modules/14_KPI/views/indicatorByPlan.vue b/src/modules/14_KPI/views/indicatorByPlan.vue
index bc091d4a3..ed1a3cf9b 100644
--- a/src/modules/14_KPI/views/indicatorByPlan.vue
+++ b/src/modules/14_KPI/views/indicatorByPlan.vue
@@ -1,5 +1,241 @@
+<script setup lang="ts">
+import { ref, reactive, onMounted } from "vue";
+import { useQuasar, type QTableProps } from "quasar";
+import { useRouter } from "vue-router";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+
+/** use*/
+const $q = useQuasar();
+const router = useRouter();
+const { showLoader, hideLoader, dialogRemove, success } = useCounterMixin();
+
+/** หัวตาราง */
+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",
+    align: "left",
+    label: "รหัสตัวชี้วัด",
+    sortable: true,
+    field: "indicatorPass",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "indicatorName",
+    align: "left",
+    label: "ชื่อตัวชี้วัด",
+    sortable: true,
+    field: "indicatorName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const visibleColumns = ref<string[]>([
+  "indicatorNo",
+  "indicatorPass",
+  "indicatorName",
+]);
+
+const orgOp = ref<any[]>([
+  { id: "1", name: "กลุ่มงานช่วยนักบริหาร" },
+  { id: "2", name: "กลุ่มงานช่วยนักบริหาร 2" },
+]);
+
+const roundOp = ref<any[]>([
+  { id: "1", name: "รอบเมษายน" },
+  { id: "2", name: "รอบตุลาคม" },
+]);
+
+const formFilter = reactive({
+  page: 1,
+  pageSize: 10,
+  org: "1",
+  round: "1",
+  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);
+}
+
+function onClickAddOrView(status: boolean = false, id: string = "") {
+  //   status
+  //     ? router.push(`/development/scholarship/${id}`)
+  //     : router.push("/development/scholarship/add");
+}
+
+function onClickDelete(id: number) {
+  dialogRemove($q, () => {
+    rows.value.splice(id, 1);
+    success($q, "ลบข้อมูลสำเร็จ");
+  });
+}
+
+onMounted(() => {
+  fetchList();
+});
+</script>
+
 <template>
-    <div>
-        ตามแผนปฏิบัติราชการประจำปี
+  <div class="toptitle text-dark col-12 row items-center">
+    ตามแผนปฏิบัติราชการประจำปี
+  </div>
+  <q-card flat bordered class="q-pa-md">
+    <q-toolbar style="padding: 0px">
+      <div class="row q-gutter-sm">
+        <q-select
+          dense
+          outlined
+          v-model="formFilter.org"
+          :options="orgOp"
+          label="หน่วยงาน/ส่วนราชการ"
+          option-label="name"
+          option-value="id"
+          emit-value
+          map-options
+        />
+
+        <q-select
+          dense
+          outlined
+          v-model="formFilter.round"
+          :options="roundOp"
+          label="รอบการประเมิน"
+          option-label="name"
+          option-value="id"
+          emit-value
+          map-options
+        />
+        <q-btn
+          flat
+          round
+          dense
+          icon="add"
+          color="primary"
+          @click="onClickAddOrView()"
+        >
+          <q-tooltip>เพิ่ม</q-tooltip>
+        </q-btn>
+      </div>
+
+      <q-space />
+      <div class="row q-gutter-sm">
+        <q-input
+          standout
+          dense
+          v-model="formFilter.keyword"
+          ref="filterRef"
+          outlined
+          debounce="300"
+          placeholder="ค้นหา"
+        >
+          <template v-slot:append>
+            <q-icon v-if="formFilter.keyword == ''" name="search" />
+            <q-icon
+              v-if="formFilter.keyword !== ''"
+              name="clear"
+              class="cursor-pointer"
+              @click="formFilter.keyword = ''"
+            />
+          </template>
+        </q-input>
+
+        <q-select
+          v-model="visibleColumns"
+          multiple
+          outlined
+          dense
+          options-dense
+          :display-value="$q.lang.table.columns"
+          emit-value
+          map-options
+          :options="columns"
+          option-value="name"
+          options-cover
+          style="min-width: 150px"
+        />
+      </div>
+    </q-toolbar>
+
+    <div class="col-12">
+      <d-table
+        for="table"
+        ref="table"
+        :columns="columns"
+        :rows="rows"
+        row-key="subject"
+        flat
+        bordered
+        dense
+        class="custom-header-table"
+        :visible-columns="visibleColumns"
+      >
+        <template v-slot:header="props">
+          <q-tr :props="props">
+            <q-th v-for="col in props.cols" :key="col.name" :props="props">
+              <span class="text-weight-medium">{{ col.label }}</span>
+            </q-th>
+            <q-th auto-width />
+          </q-tr>
+        </template>
+        <template v-slot:body="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="onClickAddOrView(true, props.row.id)"
+            >
+              <div class="table_ellipsis">
+                {{ col.value ? col.value : "-" }}
+              </div>
+            </q-td>
+            <q-td>
+              <q-btn
+                flat
+                round
+                icon="delete"
+                color="red"
+                @click.stop.pervent="onClickDelete(props.rowIndex)"
+              >
+                <q-tooltip>ลบข้อมูล </q-tooltip>
+              </q-btn>
+            </q-td>
+          </q-tr>
+        </template>
+      </d-table>
     </div>
-</template>
\ No newline at end of file
+  </q-card>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/14_KPI/views/indicatorByRole.vue b/src/modules/14_KPI/views/indicatorByRole.vue
index ba4eeccc6..e5631962f 100644
--- a/src/modules/14_KPI/views/indicatorByRole.vue
+++ b/src/modules/14_KPI/views/indicatorByRole.vue
@@ -1,5 +1,241 @@
+<script setup lang="ts">
+import { ref, reactive, onMounted } from "vue";
+import { useQuasar, type QTableProps } from "quasar";
+import { useRouter } from "vue-router";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+
+/** use*/
+const $q = useQuasar();
+const router = useRouter();
+const { showLoader, hideLoader, dialogRemove, success } = useCounterMixin();
+
+/** หัวตาราง */
+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",
+    align: "left",
+    label: "รหัสตัวชี้วัด",
+    sortable: true,
+    field: "indicatorPass",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "indicatorName",
+    align: "left",
+    label: "ชื่อตัวชี้วัด",
+    sortable: true,
+    field: "indicatorName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const visibleColumns = ref<string[]>([
+  "indicatorNo",
+  "indicatorPass",
+  "indicatorName",
+]);
+
+const positionOp = ref<any[]>([
+  { id: "1", name: "นักจัดการทั่วไป 1" },
+  { id: "2", name: "นักจัดการทั่วไป 2" },
+]);
+
+const roundOp = ref<any[]>([
+  { id: "1", name: "รอบเมษายน" },
+  { id: "2", name: "รอบตุลาคม" },
+]);
+
+const formFilter = reactive({
+  page: 1,
+  pageSize: 10,
+  position: "1",
+  round: "1",
+  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);
+}
+
+function onClickAddOrView(status: boolean = false, id: string = "") {
+  //   status
+  //     ? router.push(`/development/scholarship/${id}`)
+  //     : router.push("/development/scholarship/add");
+}
+
+function onClickDelete(id: number) {
+  dialogRemove($q, () => {
+    rows.value.splice(id, 1);
+    success($q, "ลบข้อมูลสำเร็จ");
+  });
+}
+
+onMounted(() => {
+  fetchList();
+});
+</script>
+
 <template>
-    <div>
-        ตามหน้าที่ความรับผิดชอบ
+  <div class="toptitle text-dark col-12 row items-center">
+    ตามหน้าที่ความรับผิดชอบ
+  </div>
+  <q-card flat bordered class="q-pa-md">
+    <q-toolbar style="padding: 0px">
+      <div class="row q-gutter-sm">
+        <q-select
+          dense
+          outlined
+          v-model="formFilter.position"
+          :options="positionOp"
+          label="ตำแหน่ง"
+          option-label="name"
+          option-value="id"
+          emit-value
+          map-options
+        />
+
+        <q-select
+          dense
+          outlined
+          v-model="formFilter.round"
+          :options="positionOp"
+          label="ตำแหน่ง"
+          option-label="name"
+          option-value="id"
+          emit-value
+          map-options
+        />
+        <q-btn
+          flat
+          round
+          dense
+          icon="add"
+          color="primary"
+          @click="onClickAddOrView()"
+        >
+          <q-tooltip>เพิ่ม</q-tooltip>
+        </q-btn>
+      </div>
+
+      <q-space />
+      <div class="row q-gutter-sm">
+        <q-input
+          standout
+          dense
+          v-model="formFilter.keyword"
+          ref="filterRef"
+          outlined
+          debounce="300"
+          placeholder="ค้นหา"
+        >
+          <template v-slot:append>
+            <q-icon v-if="formFilter.keyword == ''" name="search" />
+            <q-icon
+              v-if="formFilter.keyword !== ''"
+              name="clear"
+              class="cursor-pointer"
+              @click="formFilter.keyword = ''"
+            />
+          </template>
+        </q-input>
+
+        <q-select
+          v-model="visibleColumns"
+          multiple
+          outlined
+          dense
+          options-dense
+          :display-value="$q.lang.table.columns"
+          emit-value
+          map-options
+          :options="columns"
+          option-value="name"
+          options-cover
+          style="min-width: 150px"
+        />
+      </div>
+    </q-toolbar>
+
+    <div class="col-12">
+      <d-table
+        for="table"
+        ref="table"
+        :columns="columns"
+        :rows="rows"
+        row-key="subject"
+        flat
+        bordered
+        dense
+        class="custom-header-table"
+        :visible-columns="visibleColumns"
+      >
+        <template v-slot:header="props">
+          <q-tr :props="props">
+            <q-th v-for="col in props.cols" :key="col.name" :props="props">
+              <span class="text-weight-medium">{{ col.label }}</span>
+            </q-th>
+            <q-th auto-width />
+          </q-tr>
+        </template>
+        <template v-slot:body="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="onClickAddOrView(true, props.row.id)"
+            >
+              <div class="table_ellipsis">
+                {{ col.value ? col.value : "-" }}
+              </div>
+            </q-td>
+            <q-td>
+              <q-btn
+                flat
+                round
+                icon="delete"
+                color="red"
+                @click.stop.pervent="onClickDelete(props.rowIndex)"
+              >
+                <q-tooltip>ลบข้อมูล </q-tooltip>
+              </q-btn>
+            </q-td>
+          </q-tr>
+        </template>
+      </d-table>
     </div>
-</template>
\ No newline at end of file
+  </q-card>
+</template>
+
+<style scoped></style>