diff --git a/src/modules/11_discipline/components/8_AppealComplain/evaluate/DetailPage.vue b/src/modules/11_discipline/components/8_AppealComplain/evaluate/DetailPage.vue
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/modules/11_discipline/components/8_AppealComplain/evaluate/MainPage.vue b/src/modules/11_discipline/components/8_AppealComplain/evaluate/MainPage.vue
new file mode 100644
index 000000000..948a78933
--- /dev/null
+++ b/src/modules/11_discipline/components/8_AppealComplain/evaluate/MainPage.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { useQuasar } from "quasar";
+import { useRouter } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import Table from "@/modules/11_discipline/components/8_AppealComplain/evaluate/Table.vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useDisciplineEvalutuonStore } from "@/modules/11_discipline/store/Evaluate";
+import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
+
+const $q = useQuasar(); // show dialog
+const router = useRouter();
+//search data table
+const mixin = useCounterMixin();
+const store = useDisciplineEvalutuonStore();
+const { showLoader, hideLoader, messageError } = mixin;
+
+const initialPagination = ref<Pagination>({
+  rowsPerPage: 0,
+});
+
+const page = ref<number>(1);
+const pageSize = ref<number>(5);
+const maxPage = ref<number>(1);
+const filter = ref<string>("");
+
+/**เมื่อเริ่มโหลดหน้า
+ * ส่งข้อมูลจำลองไปยัง store
+ */
+onMounted(async () => {});
+</script>
+
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    รายการคำขอประเมิน
+  </div>
+  <q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
+    <div>
+      <Table
+        style="max-height: 80vh"
+        :rows="store.rows"
+        :columns="store.columns"
+        :visible-columns="store.visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="store.visibleColumns"
+        :pagination="initialPagination"
+        :nornmalData="true"
+        :paging="true"
+        :titleText="''"
+        :page="page"
+        :pageSize="pageSize"
+        :maxPage="maxPage"
+      >
+        <template #columns="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td v-for="col in props.cols" :key="col.name" :props="props">
+              <div v-if="col.name == 'no'">
+                {{ props.rowIndex + 1 }}
+              </div>
+              <div v-else>
+                {{ col.value }}
+              </div>
+            </q-td>
+          </q-tr>
+        </template>
+      </Table>
+    </div>
+  </q-card>
+</template>
+
+<style></style>
diff --git a/src/modules/11_discipline/components/8_AppealComplain/evaluate/Table.vue b/src/modules/11_discipline/components/8_AppealComplain/evaluate/Table.vue
new file mode 100644
index 000000000..862cb5f87
--- /dev/null
+++ b/src/modules/11_discipline/components/8_AppealComplain/evaluate/Table.vue
@@ -0,0 +1,228 @@
+<script setup lang="ts">
+import { ref, useAttrs, watch } from "vue";
+
+const table = ref<any>(null);
+const filterRef = ref<any>(null);
+const attrs = ref<any>(useAttrs());
+const paging = ref<boolean>(true);
+
+/** รับ props มาจากหน้าหลัก */
+const props = defineProps({
+  count: Number,
+  pass: Number,
+  notpass: Number,
+  inputfilter: String,
+  name: String,
+  icon: String,
+  inputvisible: Array,
+  editvisible: Boolean,
+  validate: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  nornmalData: {
+    type: Boolean,
+    defualt: true,
+  },
+  conclude: {
+    type: Boolean,
+    defualt: false,
+  },
+  page: {
+    type: Number,
+  },
+  pageSize: {
+    type: Number,
+  },
+  maxPage: {
+    type: Number,
+  },
+});
+
+const currentPage = ref<number>(1);
+const filter = ref<string>("");
+const pagination = ref({
+  descending: false,
+  page: props.page,
+  rowsPerPage: props.pageSize,
+});
+
+const emit = defineEmits([
+  "update:inputfilter",
+  "update:inputvisible",
+  "update:editvisible",
+  "update:queryString",
+]);
+
+function updateInput(value: string | number | null) {
+  emit("update:inputfilter", value);
+}
+
+function updateVisible(value: []) {
+  emit("update:inputvisible", value);
+}
+
+function resetFilter() {
+  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
+  emit("update:inputfilter", "");
+  filterRef.value.focus();
+}
+
+function updateRowsPerPage(newPagination: any) {
+  pagination.value = newPagination;
+  currentPage.value = 1;
+}
+
+function filterFn() {
+  updatePaging(1, Number(pagination.value.rowsPerPage), filter.value);
+}
+
+function updatePaging(p: number, pS: number, key: string) {
+  emit("update:queryString", p, pS, key);
+}
+
+watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
+  emit(
+    "update:queryString",
+    currentPage.value,
+    Number(pagination.value.rowsPerPage),
+    filter.value
+  );
+});
+</script>
+
+<template>
+  <div class="q-pb-sm row q-col-gutter-sm">
+    <div class="q-gutter-sm" v-if="nornmalData == true">
+      <!-- <q-btn
+        to="/discipline-result/add"
+        size="12px"
+        flat
+        round
+        color="add"
+        icon="mdi-plus"
+      >
+        <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+      </q-btn> -->
+    </div>
+    <q-space />
+    <!-- ค้นหาข้อความใน table -->
+    <q-input
+      standout
+      dense
+      v-model="filter"
+      ref="filterRef"
+      @keydown.enter.prevent="filterFn"
+      outlined
+      placeholder="ค้นหา"
+      style="max-width: 200px"
+      class="col-xs-12 col-sm-3 col-md-2"
+    >
+      <template v-slot:append>
+        <q-icon v-if="filter == ''" name="search" />
+        <q-icon
+          v-if="filter !== ''"
+          name="clear"
+          class="cursor-pointer"
+          @click="resetFilter"
+        />
+      </template>
+    </q-input>
+    <!-- แสดงคอลัมน์ใน table -->
+    <q-select
+      :model-value="inputvisible"
+      @update:model-value="updateVisible"
+      :display-value="$q.lang.table.columns"
+      multiple
+      outlined
+      dense
+      :options="attrs.columns"
+      options-dense
+      option-value="name"
+      map-options
+      emit-value
+      class="col-xs-12 col-sm-3 col-md-2 gt-xs"
+    >
+    </q-select>
+  </div>
+  <d-table
+    ref="table"
+    flat
+    v-bind="attrs"
+    virtual-scroll
+    :virtual-scroll-sticky-size-start="48"
+    dense
+    :rows-per-page-options="[10, 25, 50, 100]"
+    :pagination="pagination"
+    @update:pagination="updateRowsPerPage"
+  >
+    <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" v-html="col.label" />
+        </q-th>
+      </q-tr>
+    </template>
+    <template #body="props">
+      <slot v-bind="props" name="columns"></slot>
+    </template>
+    <template v-slot:pagination="scope">
+      <q-pagination
+        v-model="currentPage"
+        active-color="primary"
+        color="dark"
+        :max="Number(props.maxPage)"
+        size="sm"
+        boundary-links
+        direction-links
+      ></q-pagination>
+    </template>
+  </d-table>
+</template>
+
+<style lang="scss">
+.icon-color {
+  color: #4154b3;
+}
+
+.custom-table2 {
+  max-height: 64vh;
+
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+  }
+
+  .q-table td:nth-of-type(2) {
+    z-index: 3 !important;
+  }
+
+  .q-table th:nth-of-type(2),
+  .q-table td:nth-of-type(2) {
+    position: sticky;
+    left: 0;
+    z-index: 1;
+  }
+
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>
diff --git a/src/modules/11_discipline/store/Evaluate.ts b/src/modules/11_discipline/store/Evaluate.ts
new file mode 100644
index 000000000..020f337fd
--- /dev/null
+++ b/src/modules/11_discipline/store/Evaluate.ts
@@ -0,0 +1,141 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import type { QTableProps } from "quasar";
+import type { DataOption } from "@/modules/11_discipline/interface/index/Main";
+import type {
+  DataResult,
+  DataResultList,
+} from "@/modules/11_discipline/interface/response/result";
+import { useCounterMixin } from "@/stores/mixin";
+
+import { useDisciplineMainStore } from "@/modules/11_discipline/store/main";
+const mixin = useCounterMixin();
+const storeMain = useDisciplineMainStore();
+const { date2Thai } = mixin;
+
+export const useDisciplineEvalutuonStore = defineStore(
+  "disciplineEvalutuonStore",
+  () => {
+    const complainantoptions = ref<DataOption[]>(
+      storeMain.complainantoptionsMain
+    );
+
+    function filterSelector(val: string, update: Function, type: string) {
+      update(() => {
+        const needle = val.toLowerCase();
+        if (type === "filterposition") {
+          complainantoptions.value = storeMain.complainantoptionsMain.filter(
+            (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+          );
+        }
+      });
+    }
+
+    /** function สถานะ*/
+    function convertStatus(val: string) {
+      switch (val) {
+        // case "NEW":
+        //   return "กำลังสรุปผลการพิจารณา";
+        // case "STOP":
+        //   return "ยุติเรื่อง";
+        case "DONE":
+          return "กำลังสรุปผลการพิจารณา";
+        case "REPORT":
+          return "ส่งไปออกคำสั่ง";
+      }
+    }
+
+    const visibleColumns = ref<String[]>([
+      "citizanId",
+      "fullName",
+      "position",
+      "level",
+      "positionNumber",
+      "agency",
+      "status",
+    ]);
+    const rows = ref<any[]>([]);
+
+    const columns = ref<QTableProps["columns"]>([
+      {
+        name: "citizanId",
+        align: "center",
+        label: "เลขประจำตัวประชาชน",
+        sortable: false,
+        field: "citizanId",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+      },
+      {
+        name: "fullName",
+        align: "left",
+        label: "ชื่อ-นามสกุล",
+        sortable: true,
+        field: "fullName",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+      },
+      {
+        name: "position",
+        align: "left",
+        label: "ตำแหน่ง",
+        sortable: true,
+        field: "position",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+        sort: (a: string, b: string) =>
+          a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+      },
+      {
+        name: "level",
+        align: "left",
+        label: "ระดับ",
+        sortable: true,
+        field: "level",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+        sort: (a: string, b: string) =>
+          a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+      },
+      {
+        name: "positionNumber",
+        align: "left",
+        label: "ตำแหน่งเลขที่",
+        sortable: true,
+        field: "positionNumber",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+        sort: (a: string, b: string) =>
+          a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+      },
+      {
+        name: "agency",
+        align: "left",
+        label: "สังกัด",
+        sortable: true,
+        field: "agency",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+        sort: (a: string, b: string) =>
+          a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+      },
+      {
+        name: "status",
+        align: "left",
+        label: "สถานะ(ตรวจสอบคุณสมบัติ)",
+        sortable: true,
+        field: "status",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+      },
+    ]);
+
+    return {
+      visibleColumns,
+      columns,
+      complainantoptions,
+      filterSelector,
+      rows,
+    };
+  }
+);