From 59aa022bab8a1b7e5ad4e71f5c4acbc8e084c748 Mon Sep 17 00:00:00 2001
From: "STW_TTTY\\stwtt" <trx.setthawut@gmail.com>
Date: Tue, 9 Apr 2024 15:22:23 +0700
Subject: [PATCH] UI KPI

---
 .../08_KPI/components/Tab/01_Assessment.vue   |  85 ++++++
 .../components/Tab/02_CommanderAbove.vue      |   3 +
 .../Tab/03_CommanderAboveOneStep.vue          |   3 +
 src/modules/08_KPI/components/Tab/04_File.vue |   3 +
 .../components/Tab/Dialog/01_Dialog.vue       | 281 +++++++++++++++++
 .../components/Tab/Dialog/03_Dialog.vue       | 122 ++++++++
 .../components/Tab/Dialog/04_Dialog.vue       | 282 ++++++++++++++++++
 .../components/Tab/Topic/01_Template.vue      | 204 +++++++++++++
 .../components/Tab/Topic/02_Template.vue      | 187 ++++++++++++
 src/modules/08_KPI/interface/index/Main.ts    |   8 +
 src/modules/08_KPI/interface/request/index.ts |  22 ++
 src/modules/08_KPI/store.ts                   |   4 +-
 src/modules/08_KPI/views/TabMain.vue          |  78 +++++
 src/modules/08_KPI/views/form.vue             | 132 +++++++-
 src/modules/08_KPI/views/main.vue             | 221 +++++++++++++-
 15 files changed, 1629 insertions(+), 6 deletions(-)
 create mode 100644 src/modules/08_KPI/components/Tab/01_Assessment.vue
 create mode 100644 src/modules/08_KPI/components/Tab/02_CommanderAbove.vue
 create mode 100644 src/modules/08_KPI/components/Tab/03_CommanderAboveOneStep.vue
 create mode 100644 src/modules/08_KPI/components/Tab/04_File.vue
 create mode 100644 src/modules/08_KPI/components/Tab/Dialog/01_Dialog.vue
 create mode 100644 src/modules/08_KPI/components/Tab/Dialog/03_Dialog.vue
 create mode 100644 src/modules/08_KPI/components/Tab/Dialog/04_Dialog.vue
 create mode 100644 src/modules/08_KPI/components/Tab/Topic/01_Template.vue
 create mode 100644 src/modules/08_KPI/components/Tab/Topic/02_Template.vue
 create mode 100644 src/modules/08_KPI/interface/index/Main.ts
 create mode 100644 src/modules/08_KPI/interface/request/index.ts
 create mode 100644 src/modules/08_KPI/views/TabMain.vue

diff --git a/src/modules/08_KPI/components/Tab/01_Assessment.vue b/src/modules/08_KPI/components/Tab/01_Assessment.vue
new file mode 100644
index 0000000..1f45562
--- /dev/null
+++ b/src/modules/08_KPI/components/Tab/01_Assessment.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { useQuasar, type QTableProps } from "quasar";
+import { ref, onMounted } from "vue";
+
+import Work from "@/modules/08_KPI/components/Tab/Topic/01_Template.vue";
+import Capacity from "@/modules/08_KPI/components/Tab/Topic/02_Template.vue";
+
+const rows_01 = ref<any[]>();
+const rows_02 = ref<any[]>();
+const rows_03 = ref<any[]>();
+
+const rows_04 = ref<any[]>();
+const rows_05 = ref<any[]>();
+
+const total = ref<number>(0);
+const resultWork = ref<number>(0);
+const resultEvaluation = ref<number>(0);
+
+function getList() {
+  const data = [
+    {
+      indicators: "ตัวชี้วัด 1",
+      target: null,
+      scoreLevel: "4",
+      weight: "50",
+      workResult: "ระดับ 5",
+      evaluationResults: "50",
+    },
+  ];
+
+  rows_01.value = data;
+}
+
+onMounted(() => {
+  getList();
+});
+</script>
+<template>
+  <q-scroll-area style="height: 400px" class="bg-white row col-12">
+    <div class="text-weight-bold text-body1">
+      <span class="txt-under text-blue-5">องค์ประกอบที่ 1</span>
+      <span> ผลสัมฤทธิ์ของงาน</span>
+    </div>
+
+    <div class="q-gutter-md q-mt-sm">
+      <!-- องค์ประกอบที่ 1 -->
+      <Work v-model:data="rows_01" :title="`1. งานตามแผนปฏิบัติราชการประจำปี`" :page="1" />
+      <Work v-model:data="rows_02" :title="`2. งานตามหน้าที่ความรับผิดชอบหลัก`" :page="2" />
+      <Work v-model:data="rows_03" :title="`3. งานที่ได้รับมอบหมาย`" :page="3" />
+      <div class="row text-body1 text-weight-bold">
+        <div class="col-5 text-center">
+          <span>รวมผลการประเมิน (ร้อยละ) 100</span>
+        </div>
+        <div class="col-1 text-primary">{{ total }}</div>
+        <div class="col-5 text-center">
+          <span>สรุปผลการประเมินผลสัมฤทธิ์ของงาน (คะแนนเต็ม 70 คะแนน)</span>
+        </div>
+        <div class="col-1 text-primary">{{ resultWork }}</div>
+      </div>
+
+      <q-separator class="q-py-xs" />
+
+      <!-- องค์ประกอบที่ 2 -->
+      <div class="text-weight-bold text-body1 q-mb-sm">
+        <span class="txt-under text-blue-5">องค์ประกอบที่ 2</span>
+        <span> พฤติกรรมการปฎิบัติราชการ (สมรรถนะ)</span>
+      </div>
+
+      <Capacity v-model:data="rows_04" :title="`1. สมรรถนะหลัก`" :page="1" />
+      <Capacity v-model:data="rows_05" :title="`2. สมรรถนะประจำกลุ่ม`" :page="2" />
+
+      <div class="row justify-evenly text-body1 text-weight-bold">
+        <div class="col-5 text-right">
+          <span>ผลการประเมินสมรรถนะ (20 คะแนน)</span>
+        </div>
+        <div class="col-5 text-primary">{{ resultEvaluation }}</div>
+      </div>
+    </div>
+  </q-scroll-area>
+</template>
+<style scoped>
+.txt-under {
+  text-decoration: underline;
+}
+</style>
diff --git a/src/modules/08_KPI/components/Tab/02_CommanderAbove.vue b/src/modules/08_KPI/components/Tab/02_CommanderAbove.vue
new file mode 100644
index 0000000..e894c43
--- /dev/null
+++ b/src/modules/08_KPI/components/Tab/02_CommanderAbove.vue
@@ -0,0 +1,3 @@
+<template>
+    <div>2</div>
+</template>
\ No newline at end of file
diff --git a/src/modules/08_KPI/components/Tab/03_CommanderAboveOneStep.vue b/src/modules/08_KPI/components/Tab/03_CommanderAboveOneStep.vue
new file mode 100644
index 0000000..cb489dc
--- /dev/null
+++ b/src/modules/08_KPI/components/Tab/03_CommanderAboveOneStep.vue
@@ -0,0 +1,3 @@
+<template>
+    <div>3</div>
+</template>
\ No newline at end of file
diff --git a/src/modules/08_KPI/components/Tab/04_File.vue b/src/modules/08_KPI/components/Tab/04_File.vue
new file mode 100644
index 0000000..c8199f4
--- /dev/null
+++ b/src/modules/08_KPI/components/Tab/04_File.vue
@@ -0,0 +1,3 @@
+<template>
+    <div>4</div>
+</template>
\ No newline at end of file
diff --git a/src/modules/08_KPI/components/Tab/Dialog/01_Dialog.vue b/src/modules/08_KPI/components/Tab/Dialog/01_Dialog.vue
new file mode 100644
index 0000000..628e956
--- /dev/null
+++ b/src/modules/08_KPI/components/Tab/Dialog/01_Dialog.vue
@@ -0,0 +1,281 @@
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import DialogHeader from "@/components/DialogHeader.vue";
+
+const modal = defineModel<boolean>("modal", { required: true });
+const numpage = defineModel<number>("numpage", { required: true });
+const splitterModel = ref<number>(30);
+const search = ref<string>("");
+
+const define = ref<string>("");
+const formula = ref<string>("");
+
+const listCheck = ref<number | null>();
+const listTarget = ref<any>([
+  {
+    id: "ID1",
+    metricCode: "1กก",
+    indicatorName: "ตัวชี้วัด 1",
+  },
+  {
+    id: "ID2",
+    metricCode: "2กก",
+    indicatorName: "ตัวชี้วัด 2",
+  },
+]);
+
+const formDetail = reactive<any>({
+  oc: `สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร/กองบริหารทั่วไป/กลุ่มงานช่วยนักบริหาร`,
+  indicators: "1",
+  code: "1กก",
+  name: "ตัวชี้วัด 1",
+  target: "",
+  unit: "",
+  weight: "100",
+});
+const formScore = reactive<any>({
+  score5: "5",
+  score4: "4",
+  score3: "3",
+  score2: "2",
+  score1: "1",
+});
+
+const fieldDetailLabels = {
+  oc: "หน่วยงาน/ส่วนราชการ",
+  indicators: "ลำดับตัวชี้วัด",
+  code: "รหัสตัวชี้วัด",
+  name: "ชื่อตัวชี้วัด",
+  target: "ค่าเป้าหมาย",
+  unit: "หน่วยนับ",
+  weight: "น้ำหนัก (ร้อยละ)",
+};
+
+const fieldLabels = {
+  score5: "5",
+  score4: "4",
+  score3: "3",
+  score2: "2",
+  score1: "1",
+};
+
+function clickList(index: number, data: any) {
+  listCheck.value = index;
+  // dataList.value = data.map((i: any) => ({
+  //   commandNo: i.commandNo,
+  //   duty: i.duty,
+  //   prefix: i.prefix,
+  //   firstName: i.firstName,
+  //   lastName: i.lastName,
+  //   fullName:`${i.prefix}${i.firstName} ${i.lastName}`
+  // }));
+}
+
+/** ปิด dialog */
+function closeDialog() {
+  modal.value = false;
+  search.value = ''
+  define.value = ''
+  formula.value = ''
+}
+
+/** เรียกใช้ class */
+function getclass() {
+  return "inputgreen";
+}
+
+function onSubmit() {}
+</script>
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card class="col-12" style="width: 80%">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+      <DialogHeader
+        :tittle="
+          numpage == 1
+            ? 'เพิ่มตัวชี้วัดตามแผนปฏิบัติราชการประจําปี'
+            : 'เพิ่มตัวชี้วัดตามหน้าที่ความรับผิดชอบ'
+        "
+        :close="closeDialog"
+      />
+      <q-separator />
+
+      <q-card-section class="q-pa-none scroll" style="max-height: 80vh">
+        <q-splitter v-model="splitterModel" disable>
+          <template v-slot:before>
+            <div class="bg-grey-1 q-pa-md">
+              <q-input
+                v-model="search"
+                outlined
+                dense
+                label="ค้นหา"
+                bg-color="white"
+                :class="getclass()"
+              >
+                <template v-slot:append>
+                  <q-icon v-if="search == ''" name="search" />
+                  <q-icon
+                    v-if="search !== ''"
+                    name="clear"
+                    class="cursor-pointer"
+                    @click="search = ''"
+                  />
+                </template>
+              </q-input>
+              <q-card flat bordered class="q-mt-sm">
+                <div class="row q-px-md q-py-sm items-center bg-grey-1">
+                  <div class="col-4">
+                    <span>รหัสตัวชี้วัด</span>
+                  </div>
+                  <div class="col-4">
+                    <span>ชื่อตัวชี้วัด</span>
+                  </div>
+                </div>
+
+                <q-separator />
+                <q-card-section class="q-pa-none">
+                  <q-scroll-area
+                    style="height: 71vh"
+                    class="bg-white row col-12"
+                  >
+                    <q-list
+                      v-for="(item, index) in listTarget"
+                      :key="index"
+                      bordered
+                      separator
+                    >
+                      <q-item
+                        clickable
+                        v-ripple
+                        :active="listCheck === index"
+                        active-class="my-menu-link"
+                        @click="clickList(index, item.id)"
+                      >
+                        <q-item-section class="q-pa-none">
+                          <div class="row items-center" style="height: 20px">
+                            <div class="col-4">
+                              <span>{{ item.metricCode }}</span>
+                            </div>
+                            <div class="col-4">
+                              <span>{{ item.indicatorName }}</span>
+                            </div>
+                          </div>
+                        </q-item-section>
+                      </q-item>
+                    </q-list>
+                  </q-scroll-area>
+                </q-card-section>
+              </q-card>
+            </div>
+          </template>
+
+          <template v-slot:after>
+            <div class="row q-pa-md q-col-gutter-md">
+              <div class="col-12">
+                <span class="text-body1 text-weight-bold"
+                  >รายละเอียดตัวชี้วัด</span
+                >
+              </div>
+              <div class="col-8">
+                <q-card bordered class="full-height">
+                  <div
+                    v-for="(field, index) in Object.keys(fieldDetailLabels)"
+                    :key="index + 1"
+                  >
+                    <div class="row q-pa-md">
+                      <div class="col-3 text-grey-6 text-weight-medium">
+                        {{
+                          fieldDetailLabels[
+                            field as keyof typeof fieldDetailLabels
+                          ]
+                        }}
+                      </div>
+                      <div class="col-7">
+                        <span>{{
+                          formDetail[field] ? formDetail[field] : "-"
+                        }}</span>
+                      </div>
+                    </div>
+                  </div>
+                </q-card>
+              </div>
+              <div class="col-4">
+                <q-card bordered>
+                  <div class="bg-grey-2 row q-py-sm text-weight-bold">
+                    <div class="col-6 text-center">ระดับคะแนน</div>
+                    <div class="col-6 text-center">ผลสำเร็จของงาน</div>
+                  </div>
+                  <div
+                    v-for="(field, index) in Object.keys(fieldLabels)"
+                    :key="index + 1"
+                  >
+                    <div class="row q-py-lg">
+                      <div
+                        class="col-6 text-center text-body1 text-weight-bold"
+                      >
+                        {{ fieldLabels[field as keyof typeof fieldLabels] }}
+                      </div>
+                      <div class="col-6 text-center">
+                        <span>{{
+                          formScore[field] ? formScore[field] : "-"
+                        }}</span>
+                      </div>
+                    </div>
+                    <div
+                      class="col-12"
+                      v-if="index !== Object.keys(fieldLabels).length - 1"
+                    >
+                      <q-separator />
+                    </div>
+                  </div>
+                </q-card>
+              </div>
+              <div class="col-12">
+                <q-input
+                  v-model="define"
+                  label="นิยามหรือความหมายของตัวชี้วัด"
+                  type="textarea"
+                  outlined
+                  dense
+                  :rules="[(val:string) => !!val || `${'กรุณากรอกตัวชี้วัด'}`,]"
+                  hide-bottom-space
+                  :class="getclass()"
+                />
+              </div>
+              <div class="col-12">
+                <q-input
+                  v-model="formula"
+                  label="สูตรคำนวณ"
+                  type="textarea"
+                  outlined
+                  dense
+                  :rules="[(val:string) => !!val || `${'กรุณากรอกตัวชี้วัด'}`,]"
+                  hide-bottom-space
+                  :class="getclass()"
+                />
+              </div>
+            </div>
+          </template>
+        </q-splitter>
+      </q-card-section>
+      <q-separator />
+
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn
+          label="บันทึก"
+          color="secondary"
+          type="submit"
+          ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+        >
+      </q-card-actions>
+    </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped>
+.my-menu-link {
+  background: #ebf9f7 !important;
+  color: #1bb19ab8 !important;
+}
+</style>
diff --git a/src/modules/08_KPI/components/Tab/Dialog/03_Dialog.vue b/src/modules/08_KPI/components/Tab/Dialog/03_Dialog.vue
new file mode 100644
index 0000000..3efe102
--- /dev/null
+++ b/src/modules/08_KPI/components/Tab/Dialog/03_Dialog.vue
@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import DialogHeader from "@/components/DialogHeader.vue";
+import type { FormDataAssigned } from '@/modules/08_KPI/interface/request/index'
+
+const modal = defineModel<boolean>("modal", { required: true });
+
+const formData = reactive<FormDataAssigned>({
+  indicator:'',//ชื่อตัวชี้วัด
+  target:'',//ค่าเป้าหมาย
+  unit:'',//หน่วยนับ
+  weigth:'',//น้ำหนัก (ร้อยละ)
+  definition:'',//นิยามหรือความหมายของตัวชี้วัด
+})
+/** ปิด dialog */
+function closeDialog() {
+  modal.value = false;
+  formData.indicator = ''
+  formData.target = ''
+  formData.unit = ''
+  formData.weigth = ''
+  formData.definition = ''
+}
+
+/** เรียกใช้ class */
+function getclass() {
+  return "inputgreen";
+}
+
+function onSubmit() {}
+</script>
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card class="col-12" style="width: 50%">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+      <DialogHeader
+        :tittle="`เพิ่มตัวชี้วัดที่ได้รับมอบหมาย`"
+        :close="closeDialog"
+      />
+      <q-separator />
+
+      <q-card-section >
+        <div class="row q-col-gutter-sm">
+          <div class="col-12">
+            <q-input
+            v-model="formData.indicator"
+            label="ชื่อตัวชี้วัด"
+            outlined
+            dense
+            :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อตัวชี้วัด'}`,]"
+            hide-bottom-space
+            :class="getclass()"
+            />
+          </div>
+          <div class="col-4">
+            <q-input
+            v-model="formData.target"
+            label="ค่าเป้าหมาย"
+            outlined
+            dense
+            :rules="[(val:string) => !!val || `${'กรุณากรอกค่าเป้าหมาย'}`,]"
+            hide-bottom-space
+            :class="getclass()"
+            />
+          </div>
+          <div class="col-4">
+            <q-input
+            v-model="formData.unit"
+            label="หน่วยนับ"
+            outlined
+            dense
+            :rules="[(val:string) => !!val || `${'กรุณากรอกหน่วยนับ'}`,]"
+            hide-bottom-space
+            :class="getclass()"
+            />
+          </div>
+          <div class="col-4">
+            <q-input
+            v-model="formData.weigth"
+            label="น้ำหนัก (ร้อยละ)"
+            outlined
+            dense
+            :rules="[(val:string) => !!val || `${'กรุณากรอกน้ำหนัก (ร้อยละ)'}`,]"
+            hide-bottom-space
+            :class="getclass()"
+            />
+          </div>
+          <div class="col-12">
+            <q-input
+            v-model="formData.definition"
+            label="นิยามหรือความหมายของตัวชี้วัด"
+            outlined
+            dense
+            type="textarea"
+            :rules="[(val:string) => !!val || `${'กรุณากรอกนิยามหรือความหมายของตัวชี้วัด'}`,]"
+            hide-bottom-space
+            :class="getclass()"
+            />
+          </div>
+        </div>
+      </q-card-section>
+      <q-separator />
+
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn
+          label="บันทึก"
+          color="secondary"
+          type="submit"
+          ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+        >
+      </q-card-actions>
+    </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped>
+.my-menu-link {
+  background: #ebf9f7 !important;
+  color: #1bb19ab8 !important;
+}
+</style>
diff --git a/src/modules/08_KPI/components/Tab/Dialog/04_Dialog.vue b/src/modules/08_KPI/components/Tab/Dialog/04_Dialog.vue
new file mode 100644
index 0000000..6a31ada
--- /dev/null
+++ b/src/modules/08_KPI/components/Tab/Dialog/04_Dialog.vue
@@ -0,0 +1,282 @@
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import DialogHeader from "@/components/DialogHeader.vue";
+import type { DataOptions } from "@/modules/08_KPI/interface/index/Main";
+
+const modal = defineModel<boolean>("modal", { required: true });
+const numpage = defineModel<number>("numpage", { required: true });
+const splitterModel = ref<number>(30);
+const search = ref<string>("");
+
+const define = ref<string>("");
+const formula = ref<string>("");
+const type = ref<string>("");
+
+const listCheck = ref<number | null>();
+const listTarget = ref<any>([
+  {
+    id: "ID1",
+    metricCode: "1กก",
+    indicatorName: "ตัวชี้วัด 1",
+  },
+  {
+    id: "ID2",
+    metricCode: "2กก",
+    indicatorName: "ตัวชี้วัด 2",
+  },
+]);
+
+const formDetail = reactive<any>({
+  type: "สมรรถนะหลัก",
+  name: "สมรรถนะ 1",
+  definition: "",
+  criteria: "",
+});
+const formScore = reactive<any>({
+  score1: "1",
+  score2: "2",
+  score3: "3",
+  score4: "",
+  score5: "5",
+});
+
+const fieldDetailLabels = {
+  type: "ประเภทสมรรถนะ",
+  name: "ชื่อสมรรถนะ",
+  definition: "คำจำกัดความ",
+  criteria: "กำหนดเกณฑ์การประเมิน",
+};
+
+const fieldLabels = {
+  score1: "1",
+  score2: "2",
+  score3: "3",
+  score4: "4",
+  score5: "5",
+};
+
+const competencyTypeOp = ref<DataOptions[]>([
+  {
+    id: "ID1",
+    name: "สมรรถนะหลัก",
+  },
+  {
+    id: "ID2",
+    name: "สมรรถนะประจำกลุ่มงาน",
+  },
+  {
+    id: "ID3",
+    name: "สมรรถนะประจำกลุ่มงาน",
+  },
+  {
+    id: "ID4",
+    name: "สมรรถนะประจำผู้บริหารกรุงเทพมหานคร",
+  },
+  {
+    id: "ID5",
+    name: "สมรรถนะเฉพาะสำหรับตำแหน่ง ผอ.เขต ผช.ผอ.เขต และหัวหน้าฝ่ายในสังกัด สนง.เขต",
+  },
+  {
+    id: "ID6",
+    name: "สมรรถนะเฉพาะสำหรับตำแหน่งผู้ตรวจราชการ กทม. และผู้ตรวจราชการ",
+  },
+]);
+
+function clickList(index: number, data: any) {
+  listCheck.value = index;
+  // dataList.value = data.map((i: any) => ({
+  //   commandNo: i.commandNo,
+  //   duty: i.duty,
+  //   prefix: i.prefix,
+  //   firstName: i.firstName,
+  //   lastName: i.lastName,
+  //   fullName:`${i.prefix}${i.firstName} ${i.lastName}`
+  // }));
+}
+
+/** ปิด dialog */
+function closeDialog() {
+  modal.value = false;
+  type.value = ''
+  search.value = ''
+}
+
+/** เรียกใช้ class */
+function getclass() {
+  return "inputgreen";
+}
+
+function onSubmit() {}
+</script>
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card class="col-12" style="width: 80%">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader :tittle="`เพิ่มสมรรถนะ`" :close="closeDialog" />
+        <q-separator />
+
+        <q-card-section class="q-pa-none scroll" style="max-height: 80vh">
+          <q-splitter v-model="splitterModel" disable>
+            <template v-slot:before>
+              <div class="bg-grey-1 q-pa-md q-gutter-sm">
+                <q-select
+                  v-model="type"
+                  outlined
+                  label="ประเภทสมรรถนะ"
+                  dense
+                  bg-color="white"
+                  option-label="name"
+                  option-value="id"
+                  :options="competencyTypeOp"
+                  emit-value
+                  :class="getclass()"
+                  map-options
+                />
+                <q-input
+                  v-model="search"
+                  outlined
+                  dense
+                  label="ค้นหา"
+                  bg-color="white"
+                  :class="getclass()"
+                >
+                  <template v-slot:append>
+                    <q-icon v-if="search == ''" name="search" />
+                    <q-icon
+                      v-if="search !== ''"
+                      name="clear"
+                      class="cursor-pointer"
+                      @click="search = ''"
+                    />
+                  </template>
+                </q-input>
+                <q-card flat bordered>
+                  <div class="row q-px-md q-py-sm items-center bg-grey-1">
+                    <div class="col-4">
+                      <span>รหัสตัวชี้วัด</span>
+                    </div>
+                    <div class="col-4">
+                      <span>ชื่อตัวชี้วัด</span>
+                    </div>
+                  </div>
+
+                  <q-separator />
+                  <q-card-section class="q-pa-none">
+                    <q-scroll-area
+                      style="height: 33vh"
+                      class="bg-white row col-12"
+                    >
+                      <q-list
+                        v-for="(item, index) in listTarget"
+                        :key="index"
+                        bordered
+                        separator
+                      >
+                        <q-item
+                          clickable
+                          v-ripple
+                          :active="listCheck === index"
+                          active-class="my-menu-link"
+                          @click="clickList(index, item.id)"
+                        >
+                          <q-item-section class="q-pa-none">
+                            <div class="row items-center" style="height: 20px">
+                              <div class="col-4">
+                                <span>{{ item.metricCode }}</span>
+                              </div>
+                              <div class="col-4">
+                                <span>{{ item.indicatorName }}</span>
+                              </div>
+                            </div>
+                          </q-item-section>
+                        </q-item>
+                      </q-list>
+                    </q-scroll-area>
+                  </q-card-section>
+                </q-card>
+              </div>
+            </template>
+
+            <template v-slot:after>
+              <div class="row q-pa-md q-col-gutter-md">
+                <div class="col-12">
+                  <span class="text-body1 text-weight-bold"
+                    >รายละเอียดตัวชี้วัด</span
+                  >
+                </div>
+                <div class="col-8">
+                  <q-card bordered class="full-height">
+                    <div
+                      v-for="(field, index) in Object.keys(fieldDetailLabels)"
+                      :key="index + 1"
+                    >
+                      <div class="row q-pa-md">
+                        <div class="col-3 text-grey-6 text-weight-medium">
+                          {{
+                            fieldDetailLabels[
+                              field as keyof typeof fieldDetailLabels
+                            ]
+                          }}
+                        </div>
+                        <div class="col-7">
+                          <span>{{
+                            formDetail[field] ? formDetail[field] : "-"
+                          }}</span>
+                        </div>
+                      </div>
+                    </div>
+                  </q-card>
+                </div>
+                <div class="col-4">
+                  <q-card bordered>
+                    <div class="bg-grey-2 row q-py-sm text-weight-bold">
+                      <div class="col-6 text-center">ระดับคะแนน</div>
+                      <div class="col-6 text-center">ผลสำเร็จของงาน</div>
+                    </div>
+                    <div
+                      v-for="(field, index) in Object.keys(fieldLabels)"
+                      :key="index + 1"
+                    >
+                      <div class="row q-py-lg">
+                        <div
+                          class="col-6 text-center text-body1 text-weight-bold"
+                        >
+                          {{ fieldLabels[field as keyof typeof fieldLabels] }}
+                        </div>
+                        <div class="col-6 text-center">
+                          <span>{{
+                            formScore[field] ? formScore[field] : "-"
+                          }}</span>
+                        </div>
+                      </div>
+                      <div
+                        class="col-12"
+                        v-if="index !== Object.keys(fieldLabels).length - 1"
+                      >
+                        <q-separator />
+                      </div>
+                    </div>
+                  </q-card>
+                </div>
+              </div>
+            </template>
+          </q-splitter>
+        </q-card-section>
+        <q-separator />
+
+        <q-card-actions align="right" class="bg-white text-teal">
+          <q-btn label="บันทึก" color="secondary" type="submit"
+            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+          >
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped>
+.my-menu-link {
+  background: #ebf9f7 !important;
+  color: #1bb19ab8 !important;
+}
+</style>
diff --git a/src/modules/08_KPI/components/Tab/Topic/01_Template.vue b/src/modules/08_KPI/components/Tab/Topic/01_Template.vue
new file mode 100644
index 0000000..ef5c41d
--- /dev/null
+++ b/src/modules/08_KPI/components/Tab/Topic/01_Template.vue
@@ -0,0 +1,204 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import Dialog from "@/modules/08_KPI/components/Tab/Dialog/01_Dialog.vue";
+import Dialog03 from "@/modules/08_KPI/components/Tab/Dialog/03_Dialog.vue";
+import type { QTableProps } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+
+const title = defineModel<string>('title',{required:true})
+const rows = defineModel<any>('data',{required:true})
+const numpage = defineModel<number>('page',{required:true})
+
+const mixin = useCounterMixin();
+const { date2Thai } = mixin;
+const filterKeyword = ref<string>("");
+const modal = ref<boolean>(false);
+const modalAssigned = ref<boolean>(false);
+
+const visibleColumns = ref<string[]>([
+  "indicators",
+  "target",
+  "scoreLevel",
+  "weight",
+  "workResult",
+  "evaluationResults",
+]);
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "indicators",
+    align: "left",
+    label: "ตัวชี้วัด",
+    sortable: true,
+    field: "indicators",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "target",
+    align: "left",
+    label: "ค่าเป้าหมาย",
+    sortable: true,
+    field: "target",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "scoreLevel",
+    align: "left",
+    label: "ระดับคะแนนตามเกณฑ์การประเมิน",
+    sortable: true,
+    field: "scoreLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "weight",
+    align: "left",
+    label: "น้ำหนัก (ร้อยละ)",
+    sortable: true,
+    field: "weight",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "workResult",
+    align: "left",
+    label: "ผลสำเร็จของงาน",
+    sortable: true,
+    field: "workResult",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "evaluationResults",
+    align: "left",
+    label: "ผลการประเมิน",
+    sortable: true,
+    field: "evaluationResults",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+function onAdd() {
+  if(numpage.value !== 3){
+    modal.value = true;
+  }else if(numpage.value == 3){
+    modalAssigned.value = true
+  }
+}
+</script>
+<template>
+  <q-card bordered style="border-radius: 5px">
+    <q-card-section class="bg-grey-3 q-py-sm">
+      <span class="text-weight-bold">{{ title }}</span>
+      <q-btn
+        class="q-ml-xs"
+        flat
+        round
+        icon="mdi-plus"
+        color="primary"
+        size="md"
+        @click="onAdd"
+      >
+        <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+      </q-btn>
+    </q-card-section>
+    <q-card-section>
+      <q-table
+        ref="table"
+        :columns="columns"
+        :rows="rows"
+        :filter="filterKeyword"
+        row-key="id"
+        flat
+        bordered
+        :paging="true"
+        dense
+        hide-pagination
+        class="custom-table2"
+        :visible-columns="visibleColumns"
+        no-data-label="ยังไม่มีข้อมูลแสดงในตารางนี้"
+      >
+        <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.id">
+              <div v-if="col.name == 'createDate'">
+                {{ col.value ? date2Thai(col.value) : "-" }}
+              </div>
+              <div v-else>
+                {{ col.value ? col.value : "-" }}
+              </div>
+            </q-td>
+          </q-tr>
+        </template>
+      </q-table>
+    </q-card-section>
+  </q-card>
+
+  <Dialog v-model:modal="modal" :numpage="numpage"/>
+  <Dialog03 v-model:modal="modalAssigned" :numpage="numpage"/>
+</template>
+<style scoped>
+.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/08_KPI/components/Tab/Topic/02_Template.vue b/src/modules/08_KPI/components/Tab/Topic/02_Template.vue
new file mode 100644
index 0000000..cda94dc
--- /dev/null
+++ b/src/modules/08_KPI/components/Tab/Topic/02_Template.vue
@@ -0,0 +1,187 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import Dialog from "@/modules/08_KPI/components/Tab/Dialog/04_Dialog.vue";
+
+import type { QTableProps } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+
+const title = defineModel<string>('title',{required:true})
+const rows = defineModel<any>('data',{required:true})
+const numpage = defineModel<number>('page',{required:true})
+
+const mixin = useCounterMixin();
+const { date2Thai } = mixin;
+const filterKeyword = ref<string>("");
+const modal = ref<boolean>(false);
+const modalAssigned = ref<boolean>(false);
+
+const visibleColumns = ref<string[]>([
+  "capacity",
+  "level",
+  "scoreLevel",
+  "weight",
+  "evaluationResults",
+]);
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "capacity",
+    align: "left",
+    label: "รายการสมรรถนะ",
+    sortable: true,
+    field: "capacity",
+    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: "scoreLevel",
+    align: "left",
+    label: "ระดับคะแนนตามเกณฑ์การประเมิน",
+    sortable: true,
+    field: "scoreLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "weight",
+    align: "left",
+    label: "น้ำหนัก (ร้อยละ)",
+    sortable: true,
+    field: "weight",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "evaluationResults",
+    align: "left",
+    label: "ผลการประเมิน",
+    sortable: true,
+    field: "evaluationResults",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+function onAdd() {
+    modal.value = true;
+}
+</script>
+<template>
+  <q-card bordered style="border-radius: 5px">
+    <q-card-section class="bg-grey-3 q-py-sm">
+      <span class="text-weight-bold">{{ title }}</span>
+      <q-btn
+        class="q-ml-xs"
+        flat
+        round
+        icon="mdi-plus"
+        color="primary"
+        size="md"
+        @click="onAdd"
+      >
+        <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+      </q-btn>
+    </q-card-section>
+    <q-card-section>
+      <q-table
+        ref="table"
+        :columns="columns"
+        :rows="rows"
+        :filter="filterKeyword"
+        row-key="id"
+        flat
+        bordered
+        :paging="true"
+        dense
+        hide-pagination
+        class="custom-table2"
+        :visible-columns="visibleColumns"
+        no-data-label="ยังไม่มีข้อมูลแสดงในตารางนี้"
+      >
+        <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.id">
+              <div v-if="col.name == 'createDate'">
+                {{ col.value ? date2Thai(col.value) : "-" }}
+              </div>
+              <div v-else>
+                {{ col.value ? col.value : "-" }}
+              </div>
+            </q-td>
+          </q-tr>
+        </template>
+      </q-table>
+    </q-card-section>
+  </q-card>
+
+  <Dialog v-model:modal="modal" :numpage="numpage"/>
+</template>
+<style scoped>
+.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/08_KPI/interface/index/Main.ts b/src/modules/08_KPI/interface/index/Main.ts
new file mode 100644
index 0000000..80143f3
--- /dev/null
+++ b/src/modules/08_KPI/interface/index/Main.ts
@@ -0,0 +1,8 @@
+interface DataOptions {
+    id:string
+    name:string
+}
+
+export type {
+    DataOptions
+}
\ No newline at end of file
diff --git a/src/modules/08_KPI/interface/request/index.ts b/src/modules/08_KPI/interface/request/index.ts
new file mode 100644
index 0000000..b869e94
--- /dev/null
+++ b/src/modules/08_KPI/interface/request/index.ts
@@ -0,0 +1,22 @@
+interface FormProfile {
+  fullName: string;
+  prefix: string;
+  firstName: string;
+  lastName: string;
+  position: string;
+  type: string;
+  level: string;
+  status: string;
+  score: string;
+
+  avartar:string
+}
+
+interface FormDataAssigned{
+  indicator:string
+  target:string
+  unit:string
+  weigth:string
+  definition:string
+}
+export type { FormProfile ,FormDataAssigned};
diff --git a/src/modules/08_KPI/store.ts b/src/modules/08_KPI/store.ts
index 6a39078..7e9a157 100644
--- a/src/modules/08_KPI/store.ts
+++ b/src/modules/08_KPI/store.ts
@@ -1,5 +1,7 @@
 import { defineStore } from "pinia";
+import { ref } from "vue";
 
 export const useKpiDataStore = defineStore("KPIDate", () => {
-  return {};
+  const tabMain = ref<string>("1");
+  return {tabMain};
 });
diff --git a/src/modules/08_KPI/views/TabMain.vue b/src/modules/08_KPI/views/TabMain.vue
new file mode 100644
index 0000000..fec1e92
--- /dev/null
+++ b/src/modules/08_KPI/views/TabMain.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useKpiDataStore } from '@/modules/08_KPI/store'
+
+import Assessment from '@/modules/08_KPI/components/Tab/01_Assessment.vue'
+import CommanderAbove from '@/modules/08_KPI/components/Tab/02_CommanderAbove.vue'
+import CommanderAboveOneStep from '@/modules/08_KPI/components/Tab/03_CommanderAboveOneStep.vue'
+import File from '@/modules/08_KPI/components/Tab/04_File.vue'
+
+const store = useKpiDataStore()
+
+const itemsTab = ref<any>([
+  {
+    name: "1",
+    label: "ผู้ขอรับการประเมิน",
+  },
+  {
+    name: "2",
+    label: "ผู้บังคับบัญชาเหนือขึ้นไป",
+  },
+  {
+    name: "3",
+    label: "ผู้บังคับบัญชาเหนือขึ้นไปอีกหนึ่งขั้น",
+  },
+  {
+    name: "4",
+    label: "ไฟล์เอกสาร",
+  },
+]);
+
+const splitterModel = ref<number>(15);
+</script>
+<template>
+  <q-splitter v-model="splitterModel" disable>
+    <template v-slot:before>
+      <q-tabs v-model="store.tabMain" vertical class="text-blue">
+        <q-tab
+          class="hover-tab"
+          v-for="(tab, index) in itemsTab"
+          :key="index"
+          :name="tab.name"
+          :icon="tab.icon"
+          :label="tab.label"
+        />
+      </q-tabs>
+    </template>
+
+    <template v-slot:after>
+      <q-tab-panels
+        v-model="store.tabMain"
+        animated
+        swipeable
+        vertical
+        transition-prev="jump-up"
+        transition-next="jump-up"
+        class="q-px-md"
+      >
+        <q-tab-panel
+          v-for="(tab, index) in itemsTab"
+          :key="index"
+          :name="tab.name"
+        >
+          <Assessment v-if="store.tabMain === '1'" />
+          <CommanderAbove v-if="store.tabMain === '2'" />
+          <CommanderAboveOneStep v-if="store.tabMain === '3'" />
+          <File v-if="store.tabMain === '4'" />
+        </q-tab-panel>
+      </q-tab-panels>
+    </template>
+  </q-splitter>
+</template>
+<style scoped>
+.hover-tab:hover {
+  background-color: #0793f1;
+  color: white !important;
+  opacity: 1 !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/modules/08_KPI/views/form.vue b/src/modules/08_KPI/views/form.vue
index 6346a0b..1a56d0e 100644
--- a/src/modules/08_KPI/views/form.vue
+++ b/src/modules/08_KPI/views/form.vue
@@ -1,7 +1,56 @@
 <script setup lang="ts">
-import { useRouter } from "vue-router";
+import { ref, onMounted, reactive } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import TabMain from '@/modules/08_KPI/views/TabMain.vue'
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+
+import type { FormProfile } from "@/modules/08_KPI/interface/request/index";
+
+const route = useRoute()
+const id = route.params.id as string;
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError } = mixin;
+
+
+const formProfile = reactive<FormProfile>({
+  fullName: "นางสาวกัณฐิมา กาฬสินธุ์",
+  prefix: "นางสาว",
+  firstName: "กัณฐิมา",
+  lastName: "กาฬสินธุ์",
+  position: "หัวหน้าสำนักงาน",
+  type: "บริหาร",
+  level: "ชำนาญการพิเศษ",
+  status: "จัดเตรียมข้อมูล",
+  score: "100",
+  avartar:
+    "https://edm-s3.frappet.synology.me/edm/%E0%B8%97%E0%B8%B0%E0%B9%80%E0%B8%9A%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%9B%E0%B8%A3%E0%B8%B0%E0%B8%A7%E0%B8%B1%E0%B8%95%E0%B8%B4/%E0%B9%82%E0%B8%9B%E0%B8%A3%E0%B9%84%E0%B8%9F%E0%B8%A5%E0%B9%8C/1526d9d3-d8b1-43ab-81b5-a84dfbe99202/profile-1526d9d3-d8b1-43ab-81b5-a84dfbe99202?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=b63sTDiLkQPT06cpirTh%2F20240405%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240405T100811Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=a6b8cb6b4f1ffd4edff045ad9fd91bc9a7eb5e00c45c5283bd8bf8f8e1ff5bf0",
+});
 
 const router = useRouter();
+
+function getProfile() {
+  showLoader();
+  http
+    .get(config.API.profileBykeycloak())
+    .then((res) => {
+      const data = res.data.result;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+onMounted(() => {
+  getProfile();
+});
 </script>
 
 <template>
@@ -18,10 +67,87 @@ const router = useRouter();
           class="q-mr-sm"
           @click="router.push(`/KPI`)"
         />
-        เพิ่ม/แก้ไข
+        {{ id ? `แก้ไขแบบประเมิน`:`เพิ่มแบบประเมิน` }}
       </div>
       <div class="col-12">
-        <q-card bordered class="q-pa-md"> เพิ่ม/แก้ไข </q-card>
+        <q-card bordered flatclass="relative-position">
+          <div class="column">
+            <div class="row items-center">
+              <div class="offset-2 col-10">
+                <q-toolbar class="q-pl-none">
+                  <span class="text-h6 text-bold text-primary">{{
+                    formProfile.fullName ? formProfile.fullName : "-"
+                  }}</span>
+                  <q-space />
+                  <div class="q-gutter-x-sm">
+                    <q-btn
+                      unelevated
+                      round
+                      icon="mdi-file-eye-outline"
+                      color="grey-2"
+                      text-color="primary"
+                    >
+                      <q-tooltip>ดูข้อมูลการช่วยราชการ</q-tooltip>
+                    </q-btn>
+                    <q-btn unelevated round color="grey-2" text-color="blue-5">
+                      <q-icon name="mdi-briefcase-eye-outline" />
+                      <q-tooltip>ดูข้อมูลการทดลองงาน</q-tooltip>
+                    </q-btn>
+                  </div>
+                </q-toolbar>
+              </div>
+            </div>
+            <div
+              class="absolute"
+              style="left: 3%; top: 50%; transform: translateY(-50%)"
+            >
+              <q-avatar size="150px">
+                <img :src="formProfile.avartar" />
+              </q-avatar>
+            </div>
+
+            <div class="row items-center bg-teal-1">
+              <div class="offset-2 col-10">
+                <div class="row q-gutter-x-lg no-wrap text-weight-medium">
+                  <div class="col-2">
+                    <div class="column">
+                      <span class="text-grey-6">ตำแหน่งในสายงาน</span>
+                      <span class="text-weight-bold">{{ formProfile.position }}</span>
+                    </div>
+                  </div>
+                  <div class="col-2">
+                    <div class="column">
+                      <span class="text-grey-6">ประเภท</span>
+                      <span class="text-weight-bold">{{ formProfile.type }}</span>
+                    </div>
+                  </div>
+                  <div class="col-2">
+                    <div class="column">
+                      <span class="text-grey-6">ระดับชั้นงาน</span>
+                      <span class="text-weight-bold">{{ formProfile.level }}</span>
+                    </div>
+                  </div>
+                  <div class="col-2">
+                    <div class="column">
+                      <span class="text-grey-6">สถานะการประเมิน</span>
+                      <span class="text-weight-bold">{{ formProfile.status }}</span>
+                    </div>
+                  </div>
+                  <div class="col-2">
+                    <div class="column">
+                      <span class="text-grey-6">คะแนนประเมิน</span>
+                      <span class="text-weight-bold text-primary">{{ formProfile.score }}</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </q-card>
+
+        <q-card class="q-mt-md rounded">
+          <TabMain />
+        </q-card>
       </div>
     </div>
   </div>
diff --git a/src/modules/08_KPI/views/main.vue b/src/modules/08_KPI/views/main.vue
index 2f36072..1d35fa2 100644
--- a/src/modules/08_KPI/views/main.vue
+++ b/src/modules/08_KPI/views/main.vue
@@ -1,7 +1,102 @@
 <script setup lang="ts">
+import { ref, onMounted } from "vue";
 import { useRouter } from "vue-router";
 
+import type { DataOptions } from "@/modules/08_KPI/interface/index/Main";
+import type { QTableProps } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+const mixin = useCounterMixin()
+const { date2Thai } = mixin
 const router = useRouter();
+
+const filterKeyword = ref<string>("");
+
+const rows = ref<any>();
+
+const round = ref<string>("ID1");
+const roundOp = ref<DataOptions[]>([
+  {
+    id: "ID1",
+    name: "รอบเมษา",
+  },
+]);
+
+const visibleColumns = ref<string[]>(["createDate", "status", "result"]);
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "createDate",
+    align: "left",
+    label: "วันที่สร้างแบบประเมิน",
+    sortable: true,
+    field: "createDate",
+    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",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "result",
+    align: "left",
+    label: "ผลการประเมิน",
+    sortable: true,
+    field: "result",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+/** ดึงข้อมูล */
+function getData() {
+  const data = [
+    {
+      id: "ID1",
+      createDate: '2024-02-16T06:01:00.000Z',
+      status: "รอดำเนินการ",
+      result: "ผ่านเกณฑ์การประเมิน",
+    },
+    {
+      id: "ID1",
+      createDate: '2024-02-16T06:01:00.000Z',
+      status: "รอดำเนินการ",
+      result: "ผ่านเกณฑ์การประเมิน",
+    },
+  ];
+  rows.value = data;
+  // showLoader();
+  // await http
+  //   .get(config.API.orgPrefix)
+  //   .then(async (res) => {
+  //   })
+  //   .catch((err) => {
+  //     messageError($q, err);
+  //   })
+  //   .finally(() => {
+  //     hideLoader();
+  //   });
+}
+
+function onEdit(id:string){
+  router.push(`/KPI/${id}`)
+}
+onMounted(async () => {
+  getData();
+});
 </script>
 
 <template>
@@ -18,11 +113,133 @@ const router = useRouter();
           class="q-mr-sm"
           @click="router.push(`/`)"
         />
-        KPI
+        รายการประเมินผลการปฏิบัติราชการระดับบุคคล
       </div>
       <div class="col-12">
-        <q-card bordered class="q-pa-md"> หน้าหลัก </q-card>
+        <q-card bordered class="q-pa-md">
+          <q-toolbar style="padding: 0">
+            <q-select
+              v-model="round"
+              outlined
+              label="รอบการประเมิน"
+              dense
+              option-label="name"
+              option-value="id"
+              :options="roundOp"
+              style="min-width: 200px"
+              emit-value
+              map-options
+            />
+            <q-btn flat round color="primary" icon="add" @click="router.push(`/KPI/add`)">
+              <q-tooltip> เพิ่มข้อมูล </q-tooltip>
+            </q-btn>
+            <q-space />
+            <div class="row q-gutter-sm">
+              <q-input
+                outlined
+                dense
+                v-model="filterKeyword"
+                label="ค้นหา"
+              ></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>
+
+          <q-table
+            ref="table"
+            :columns="columns"
+            :rows="rows"
+            :filter="filterKeyword"
+            row-key="id"
+            flat
+            bordered
+            :paging="true"
+            dense
+            class="custom-table2"
+            :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.id" @click="onEdit(props.row.id)">
+                  <div v-if="col.name == 'createDate'">
+                  {{ col.value ? date2Thai(col.value):'-' }}
+                </div>
+                  <div v-else>
+                    {{ col.value }}
+                  </div>
+                </q-td>
+              </q-tr>
+            </template>
+          </q-table>
+        </q-card>
       </div>
     </div>
   </div>
 </template>
+<style scoped 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>