diff --git a/src/modules/14_KPI/interface/index/Main.ts b/src/modules/14_KPI/interface/index/Main.ts
index a2567bc87..e4ea7770c 100644
--- a/src/modules/14_KPI/interface/index/Main.ts
+++ b/src/modules/14_KPI/interface/index/Main.ts
@@ -1,6 +1 @@
-interface DataOption {
-  id: string;
-  name: string;
-}
-
-export type { DataOption };
+export type {};
diff --git a/src/modules/14_KPI/interface/request/Main.ts b/src/modules/14_KPI/interface/request/Main.ts
new file mode 100644
index 000000000..e4ea7770c
--- /dev/null
+++ b/src/modules/14_KPI/interface/request/Main.ts
@@ -0,0 +1 @@
+export type {};
diff --git a/src/modules/14_KPI/interface/response/Main.ts b/src/modules/14_KPI/interface/response/Main.ts
index a2567bc87..e4ea7770c 100644
--- a/src/modules/14_KPI/interface/response/Main.ts
+++ b/src/modules/14_KPI/interface/response/Main.ts
@@ -1,6 +1 @@
-interface DataOption {
-  id: string;
-  name: string;
-}
-
-export type { DataOption };
+export type {};
diff --git a/src/modules/14_KPI/views/MainPage.vue b/src/modules/14_KPI/views/MainPage.vue
index 5ff639155..61f395a65 100644
--- a/src/modules/14_KPI/views/MainPage.vue
+++ b/src/modules/14_KPI/views/MainPage.vue
@@ -1,12 +1,489 @@
 <script setup lang="ts">
-import { useQuasar } from "quasar";
+import { ref, reactive, onMounted } from "vue";
+import { useQuasar, type QTableProps } from "quasar";
 import { useRouter } from "vue-router";
 
+import DialogHeader from "@/components/DialogHeader.vue";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+
 /** use*/
+
 const $q = useQuasar();
 const router = useRouter();
+const { showLoader, hideLoader, date2Thai, dialogConfirm, dialogRemove } =
+  useCounterMixin();
+
+/** หัวตาราง */
+const rows = ref<any>([]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "round",
+    align: "left",
+    label: "รอบการประเมิน ",
+    sortable: true,
+    field: "round",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "dateStart",
+    align: "left",
+    label: "วันเริ่มต้น",
+    sortable: true,
+    field: "dateStart",
+    format: (val) => date2Thai(val),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+
+  {
+    name: "dateEnd",
+    align: "left",
+    label: "วันสิ้นสุด",
+    sortable: true,
+    field: "dateEnd",
+    format: (val) => date2Thai(val),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const visibleColumns = ref<string[]>(["round", "dateStart", "dateEnd"]);
+
+const options = ref<any>([
+  "การศึกษาในประเทศ",
+  "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรที่ไม่มีการไปต่างประเทศ)",
+  "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรที่มีการไปต่างประเทศ)",
+  "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรประเภทนักบริหาร)",
+]);
+const itemMenu = ref<any>([
+  {
+    label: "เปิดรอบ",
+    value: "open",
+    icon: "mdi-check",
+    color: "primary",
+  },
+  {
+    label: "ปิดรอบ",
+    value: "close",
+    icon: "mdi-close",
+    color: "orange",
+  },
+  {
+    label: "ลบรอบ",
+    value: "delete",
+    icon: "delete",
+    color: "red",
+  },
+]);
+
+const roundOp = ref<any>([
+  { id: "1", label: "รอบเมษา" },
+  {
+    id: "2",
+    label: "รอบตุลา",
+  },
+]);
+
+const formFilter = reactive({
+  page: 1,
+  pageSize: 10,
+  year: new Date().getFullYear(),
+  keyword: "",
+});
+
+const formData = reactive({
+  round: "",
+  dateStart: null,
+  dateEnd: null,
+});
+
+function fetchList() {
+  showLoader();
+  const data = [
+    {
+      id: "1",
+      round: "รอบเมษายน",
+      dateStart: new Date("2024-4-12"),
+      dateEnd: new Date("2024-4-12"),
+    },
+    {
+      id: "2",
+      round: "รอบตุลาคม",
+      dateStart: new Date("2024-4-12"),
+      dateEnd: new Date("2024-4-12"),
+    },
+  ];
+  rows.value = data;
+  setTimeout(() => {
+    hideLoader();
+  }, 500);
+}
+
+const modalDialog = ref<boolean>(false);
+const isStatusEdit = ref<boolean>(false);
+function onClickAddOrView(status: boolean = false, id: string = "") {
+  isStatusEdit.value = status;
+  modalDialog.value = true;
+}
+
+function closeDialog() {
+  modalDialog.value = false;
+  clearFormData();
+}
+
+function changeDateStart() {
+  if (formData?.dateStart !== null && formData?.dateEnd !== null) {
+    const startDate = new Date(formData.dateStart);
+    const endDate = new Date(formData?.dateEnd);
+    if (startDate > endDate) {
+      formData.dateEnd = null;
+    }
+  }
+}
+
+function clearFormData() {
+  formData.round = "";
+  formData.dateStart = null;
+  formData.dateEnd = null;
+}
+
+function onSubmit() {
+  dialogConfirm($q, () => {
+    closeDialog();
+  });
+}
+
+function onClickAction(action: string) {
+  switch (action) {
+    case "open":
+      onOpenRounde();
+      break;
+    case "close":
+      onCloseRounde();
+      break;
+    case "delete":
+      onDeleteRound();
+      break;
+    default:
+      break;
+  }
+}
+
+function onOpenRounde() {
+  dialogConfirm(
+    $q,
+    () => {},
+    "ยืนยันการเปิดรอบ",
+    "ต้องการยืนยันการเปิดรอบนี้หรือไม่ ?"
+  );
+}
+function onCloseRounde() {
+  dialogConfirm(
+    $q,
+    () => {},
+    "ยืนยันการปิดรอบ",
+    "ต้องการยืนยันการปิดรอบนี้หรือไม่ ?"
+  );
+}
+function onDeleteRound() {
+  dialogRemove($q, () => {});
+}
+
+onMounted(() => {
+  fetchList();
+});
 </script>
 
-<template>KPI Page</template>
+<template>
+  <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">
+        <datepicker
+          menu-class-name="modalfix"
+          v-model="formFilter.year"
+          :locale="'th'"
+          autoApply
+          year-picker
+          :enableTimePicker="false"
+        >
+          <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="Number(formFilter.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-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-btn
+          flat
+          round
+          color="blue"
+          icon="mdi-arrow-down-bold-circle-outline"
+        >
+          <q-menu>
+            <q-list style="min-width: 100px" dense>
+              <q-item clickable v-close-popup v-for="items in itemDownload">
+                <q-item-section avatar>
+                  <q-icon :color="items.color" :name="items.icon" />
+                </q-item-section>
+                <q-item-section :class="`text-${items.color}`">{{
+                  items.label
+                }}</q-item-section>
+              </q-item>
+            </q-list>
+          </q-menu>
+          <q-tooltip>ดาวน์โหลด</q-tooltip>
+        </q-btn> -->
+
+        <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">
+              <div class="table_ellipsis">
+                {{ col.value ? col.value : "-" }}
+              </div>
+            </q-td>
+            <q-td>
+              <q-btn flat round color="grey" icon="mdi-dots-vertical">
+                <q-menu>
+                  <q-list style="min-width: 150px" dense>
+                    <q-item
+                      clickable
+                      v-close-popup
+                      v-for="items in itemMenu"
+                      @click="onClickAction(items.value)"
+                    >
+                      <q-item-section avatar>
+                        <q-icon :color="items.color" :name="items.icon" />
+                      </q-item-section>
+                      <q-item-section>{{ items.label }}</q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-menu>
+                <q-tooltip>ดาวน์โหลด</q-tooltip>
+              </q-btn>
+            </q-td>
+          </q-tr>
+        </template>
+      </d-table>
+    </div>
+  </q-card>
+
+  <q-dialog v-model="modalDialog" persistent>
+    <q-card style="width: 350px">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader
+          :tittle="'เพิ่มรอบการประเมินผลกานปฏิบัติหน้าที่ราชการ'"
+          :close="closeDialog"
+        />
+        <q-separator />
+
+        <q-card-section class="q-pt-none">
+          <div class="row col-12 q-pa-md q-col-gutter-md">
+            <div class="col-12">
+              <q-select
+                dense
+                outlined
+                hide-bottom-space
+                lazy-rules
+                v-model="formData.round"
+                :options="roundOp"
+                option-label="label"
+                option-value="id"
+                emit-value
+                map-options
+                input-class="text-red"
+                label="รอบการประเมิน"
+                :rules="[
+          (val:string) =>
+            !!val || `${'กรุณาเลือกรอบการประเมิน'}`,
+        ]"
+              />
+            </div>
+            <div class="col-12">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formData.dateStart"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+                @update:model-value="changeDateStart()"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    outlined
+                    :model-value="
+                      formData.dateStart ? date2Thai(formData.dateStart) : null
+                    "
+                    :label="`${'วันเริ่มต้น'}`"
+                    hide-bottom-space
+                    :rules="[
+      (val:string) =>
+        !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`,
+    ]"
+                  >
+                    <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 class="col-12">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formData.dateEnd"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+                :min-date="formData.dateStart"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    outlined
+                    :model-value="
+                      formData.dateEnd ? date2Thai(formData.dateEnd) : null
+                    "
+                    :label="`${'วันสิ้นสุด'}`"
+                    hide-bottom-space
+                    :rules="[
+      (val:string) =>
+        !!val || `${'กรุณาเลือกวันที่วันสิ้นสุด'}`,
+    ]"
+                  >
+                    <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-separator />
+
+        <q-card-actions align="right" class="bg-white text-teal">
+          <q-btn dense unelevated label="บันทึก" type="submit" color="public">
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
 
 <style scoped></style>