diff --git a/src/api/scholarship/api.scholarship.ts b/src/api/scholarship/api.scholarship.ts
new file mode 100644
index 0000000..1bc081c
--- /dev/null
+++ b/src/api/scholarship/api.scholarship.ts
@@ -0,0 +1,11 @@
+import env from "../index";
+
+const development = `${env.API_URI}/development`;
+const developmentScholarshipReport = `${env.API_URI}/development/report/scholarship`;
+const developmentSalaryFile = `${env.API_URI}/salary/file`;
+
+export default {
+  developmentScholarshipReport,
+  developmentScholarship: `${development}/scholarship`,
+  developmentSalaryFile: (name: string, group: string, id: string) => `${developmentSalaryFile}/${name}/${group}/${id}`,
+};
diff --git a/src/app.config.ts b/src/app.config.ts
index 20be1e7..4d711c9 100644
--- a/src/app.config.ts
+++ b/src/app.config.ts
@@ -9,6 +9,7 @@ import message from "./api/api.message";
 import evaluate from "./api/evaluate/api.evaluate";
 import support from "./api/support/api.support";
 import org from "./api/org/api.org";
+import scholarship from "./api/scholarship/api.scholarship";
 
 const API = {
   ...testtest,
@@ -19,6 +20,7 @@ const API = {
   ...appeal,
   ...support,
   ...org,
+  ...scholarship,
 };
 
 export default {
diff --git a/src/modules/01_dashboard/views/Dashboard.vue b/src/modules/01_dashboard/views/Dashboard.vue
index 39e0fd0..600b514 100644
--- a/src/modules/01_dashboard/views/Dashboard.vue
+++ b/src/modules/01_dashboard/views/Dashboard.vue
@@ -81,6 +81,30 @@ const items = ref<any>([
     path: "/appeal-complain",
     active: false,
   },
+  {
+    icon: "mdi-account-box-outline",
+    title: "ขอรับการประเมิน (KPI)",
+    sub: "ประเมินผลการปฏิบัติหน้าที่ราชการ",
+    color: "red-2",
+    path: "/KPI",
+    active: false,
+  },
+  {
+    icon: "mdi-elevator",
+    title: "ทำการประเมิน (KPI)",
+    sub: "ประเมินผลการปฏิบัติหน้าที่ราชการ",
+    color: "red-2",
+    path: "/KPI-evaluator",
+    active: false,
+  },
+  {
+    icon: "mdi-school",
+    title: "ทุนการศึกษา/ฝึกอบรม",
+    sub: "รายการทุนการศึกษา/ฝึกอบรม",
+    color: "teal-2",
+    path: "/scholarship",
+    active: false,
+  },
 ]);
 onMounted(async () => {
   await fetchlistInbox(1);
diff --git a/src/modules/03_retire/views/addRetire.vue b/src/modules/03_retire/views/addRetire.vue
index 8090194..e38ae32 100644
--- a/src/modules/03_retire/views/addRetire.vue
+++ b/src/modules/03_retire/views/addRetire.vue
@@ -1,425 +1,584 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue"
-import { useQuasar } from "quasar"
-import { useRouter, useRoute } from "vue-router"
-import { useCounterMixin } from "@/stores/mixin"
-import http from "@/plugins/http"
-import config from "@/app.config"
-import type { QForm } from "quasar"
-import Dialog from '@/modules/03_retire/views/DialogRetire.vue'
+import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import { useRouter, useRoute } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type { QForm } from "quasar";
+import Dialog from "@/modules/03_retire/views/DialogRetire.vue";
 
-const mixin = useCounterMixin()
-const { date2Thai, dateToISO, success, messageError, showLoader, hideLoader, fails } = mixin
-const router = useRouter()
-const route = useRoute()
-const $q = useQuasar()
-const routeName = router.currentRoute.value.name
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  dateToISO,
+  success,
+  messageError,
+  showLoader,
+  hideLoader,
+  fails,
+} = mixin;
+const router = useRouter();
+const route = useRoute();
+const $q = useQuasar();
+const routeName = router.currentRoute.value.name;
 
 /**
  * ตัวแปรที่ใช้งาน
  */
-const id = ref<string>("")
-const myform = ref<QForm | null>(null)
-const tranferOrg = ref("")
-const dateCommand = ref<Date>(new Date())
-const dateLeave = ref<Date>(new Date())
-const noteReason = ref("")
-const modal = ref<boolean>(false)
+const id = ref<string>("");
+const myform = ref<QForm | null>(null);
+const tranferOrg = ref("");
+const dateCommand = ref<Date>(new Date());
+const dateLeave = ref<Date>(new Date());
+const noteReason = ref("");
+const modal = ref<boolean>(false);
 /** ข้อมูล v-model ของฟอร์ม */
 const dataDetail = ref<any>({
-	datetext: "",
-	activeDate: new Date(),
-	createdAt: new Date(),
-	firstName: "",
-	id: "",
-	isActive: true,
-	lastName: "",
-	location: "",
-	organizationPositionOld: "",
-	positionLevelOld: "",
-	positionNumberOld: "",
-	positionTypeOld: "",
-	prefix: "",
-	profileId: "",
-	reason: "",
-	salary: 0,
-	sendDate: new Date(),
-	status: "",
-	statustext: "",
-	fullname: "",
-})
+  datetext: "",
+  activeDate: new Date(),
+  createdAt: new Date(),
+  firstName: "",
+  id: "",
+  isActive: true,
+  lastName: "",
+  location: "",
+  organizationPositionOld: "",
+  positionLevelOld: "",
+  positionNumberOld: "",
+  positionTypeOld: "",
+  prefix: "",
+  profileId: "",
+  reason: "",
+  salary: 0,
+  sendDate: new Date(),
+  status: "",
+  statustext: "",
+  fullname: "",
+});
 
 /**
  * ฟังก์ชั่นย้อนกลับไปยังหน้ารายการลาออก
  */
 const clickBack = () => {
-	router.push(`/retire`)
-}
+  router.push(`/retire`);
+};
 
 /**
  * ฟังก์ชั่นเปลี่ยนเป็น string ของ status
  * @param val value ของ status true/false
  */
 const statusOrder = (val: boolean) => {
-	switch (val) {
-		case true:
-			return "ยับยั้งการลาออก"
-		case false:
-			return "อนุมัติการลาออก"
-	}
-}
+  switch (val) {
+    case true:
+      return "ยับยั้งการลาออก";
+    case false:
+      return "อนุมัติการลาออก";
+  }
+};
 
 /**
  * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
  */
 onMounted(() => {
-	if (route.params.id !== undefined) {
-		id.value = route.params.id.toString()
-		fectDataresign(id.value)
-	}
-})
+  if (route.params.id !== undefined) {
+    id.value = route.params.id.toString();
+    fectDataresign(id.value);
+  }
+});
 
 /**
  * บันทึกข้อมูลการลาออก
  */
 const saveData = async () => {
-	if (myform.value != null) {
-		await myform.value.validate().then(async (saveDataTest: Boolean) => {
-			if (saveDataTest) {
-				saveResing()
-			}
-		})
-	}
-}
+  if (myform.value != null) {
+    await myform.value.validate().then(async (saveDataTest: Boolean) => {
+      if (saveDataTest) {
+        saveResing();
+      }
+    });
+  }
+};
 
 /**
  * ฟังก์ชั่นดาว์โหลดอัพโหลดไฟล์
  */
 const filesNull = () => {
-	files.value = null
-}
-const nameFile = ref<string>("")
-const fileDocDataUpload = ref<File[]>([])
-const files = ref<any>()
+  files.value = null;
+};
+const nameFile = ref<string>("");
+const fileDocDataUpload = ref<File[]>([]);
+const files = ref<any>();
 //อัพโหลดไฟล์
 const fileUploadDoc = async (file: any) => {
-	fileDocDataUpload.value.push(file)
-	nameFile.value = file[0].name
-	files.value = file
-}
+  fileDocDataUpload.value.push(file);
+  nameFile.value = file[0].name;
+  files.value = file;
+};
 
 /**
  * ฟังก์ชั่นเซฟข้อมูลลาออกเเล้วเรียกใช้งานApi
  */
 const saveResing = () => {
-	$q.dialog({
-		title: "ยืนยันการยื่นข้อมูลลาออก",
-		message: "ต้องการยื่นข้อมูลลาออกนี้ใช่หรือไม่?",
-		cancel: {
-			flat: true,
-			color: "negative",
-		},
-		persistent: true,
-	})
-		.onOk(() => {
-			createFormresign()
-		})
-		.onCancel(() => {})
-		.onDismiss(() => {})
-}
+  $q.dialog({
+    title: "ยืนยันการยื่นข้อมูลลาออก",
+    message: "ต้องการยื่นข้อมูลลาออกนี้ใช่หรือไม่?",
+    cancel: {
+      flat: true,
+      color: "negative",
+    },
+    persistent: true,
+  })
+    .onOk(() => {
+      createFormresign();
+    })
+    .onCancel(() => {})
+    .onDismiss(() => {});
+};
 
 //ยกเลิกการลาออก
 const cancelResing = () => {
-	modal.value = true
-}
+  modal.value = true;
+};
 
 /**
  * ฟังก์ชั่นลบ
  * @param id ไอดีของข้อมูลการลาออก
  */
 const deleteResting = async (id: string) => {
-	showLoader()
-	await http
-		.delete(config.API.resingByid(id))
-		.then(() => {
-			success($q, "ยกเลิกการลาออกขอสำเร็จ")
-		})
-		.catch(e => {
-			messageError($q, e)
-		})
-		.finally(() => {
-			hideLoader()
-			clickBack()
-		})
-}
+  showLoader();
+  await http
+    .delete(config.API.resingByid(id))
+    .then(() => {
+      success($q, "ยกเลิกการลาออกขอสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+      clickBack();
+    });
+};
 
 //บันทึกข้อมูล
 const createFormresign = async () => {
-	const formData = new FormData()
-	if (files.value > 0) {
-		const blob = files.value.slice(0, files.value[0].size)
-		const newFile = new File(blob, nameFile.value, {
-			type: files.value[0].type,
-		})
-		formData.append("file", newFile)
-	}
+  const formData = new FormData();
+  if (files.value.length > 0) {
+    const blob = files.value.slice(0, files.value[0].size);
+    const newFile = new File(blob, nameFile.value, {
+      type: files.value[0].type,
+    });
+    formData.append("file", newFile);
+  }
 
-	formData.append("Location", tranferOrg.value)
-	formData.append("SendDate", dateToISO(dateCommand.value))
-	formData.append("ActiveDate", dateToISO(dateLeave.value))
-	formData.append("Reason", noteReason.value)
+  formData.append("Location", tranferOrg.value);
+  formData.append("SendDate", dateToISO(dateCommand.value));
+  formData.append("ActiveDate", dateToISO(dateLeave.value));
+  formData.append("Reason", noteReason.value);
 
-	await http
-		.post(config.API.listResign(), formData)
-		.then((res: any) => {
-			let data = res.data.result.id
-			success($q, "บันทึกข้อมูลสำเร็จ")
-			router.push(`/retire/result/${data}`)
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
+  await http
+    .post(config.API.listResign(), formData)
+    .then((res: any) => {
+      let data = res.data.result.id;
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      router.push(`/retire/result/${data}`);
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    });
+};
 
 /**
  * ฟังก์ชั่นเรียกข้อมูลจาก Api
  * @param id ไอดีของข้อมูล
  */
 const fectDataresign = async (id: string) => {
-	showLoader()
-	await http
-		.get(config.API.resingByid(id))
-		.then((res: any) => {
-			let data = res.data.result
-			;(tranferOrg.value = data.location),
-				(dateCommand.value = data.sendDate),
-				(dateLeave.value = data.activeDate),
-				(noteReason.value = data.reason),
-				(files.value = data.docs),
-				(dataDetail.value = data)
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-		.finally(() => {
-			hideLoader()
-		})
+  showLoader();
+  await http
+    .get(config.API.resingByid(id))
+    .then((res: any) => {
+      let data = res.data.result;
+      (tranferOrg.value = data.location),
+        (dateCommand.value = data.sendDate),
+        (dateLeave.value = data.activeDate),
+        (noteReason.value = data.reason),
+        (files.value = data.docs),
+        (dataDetail.value = data);
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+function downloadFile(data: string) {
+  window.open(data, "_blank");
 }
 </script>
 <template>
-	<div class="col-12 row justify-center">
-		<div class="col-xs-12 col-sm-12 col-md-11">
-			<div class="toptitle text-white col-12 row items-center">
-				<q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="router.go(-1)" />
-				<div v-if="routeName == 'AddRetire'">เพิ่มเรื่องลาออก</div>
-				<div v-else>รายละเอียดเรื่องลาออก</div>
-			</div>
-			<q-form ref="myform" class="col-12">
-				<q-card bordered>
-					<div class="col-12 row q-col-gutter-md q-pa-md">
-						<div class="col-xs-12 col-sm-12">
-							<div class="col-12 row q-pa-sm q-col-gutter-sm">
-								<q-input
-									class="col-8"
-									dense
-									outlined
-									v-model="tranferOrg"
-									label="สถานที่ยื่นขอลาออกจากราชการ"
-									:readonly="routeName != 'AddRetire'"
-									:rules="[(val:string) => !!val || `${'กรุณากรอกสถานที่ยื่นขอลาออกจากราชการ'}`]"
-								/>
-								<datepicker class="col-2" menu-class-name="modalfix" v-model="dateCommand" :locale="'th'" autoApply readonly borderless :enableTimePicker="false" week-start="0">
-									<template #year="{ year }">
-										{{ year + 543 }}
-									</template>
-									<template #year-overlay-value="{ value }">
-										{{ parseInt(value + 543) }}
-									</template>
-									<template #trigger>
-										<q-input
-											outlined
-											readonly
-											dense
-											hide-bottom-space
-											class="full-width datepicker"
-											:model-value="dateCommand != null ? date2Thai(dateCommand) : null"
-											:label="`${'วันที่ยื่นขอลาออกจากราชการ'}`"
-											:rules="[val => !!val || `${'กรุณาเลือกวันที่ยื่นขอลาออกจากราชการ'}`]"
-										>
-											<template v-slot:prepend>
-												<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-											</template>
-										</q-input>
-									</template>
-								</datepicker>
-								<datepicker
-									class="col-2"
-									menu-class-name="modalfix"
-									v-model="dateLeave"
-									:locale="'th'"
-									autoApply
-									borderless
-									:enableTimePicker="false"
-									week-start="0"
-									:readonly="routeName != 'AddRetire'"
-								>
-									<template #year="{ year }">
-										{{ year + 543 }}
-									</template>
-									<template #year-overlay-value="{ value }">
-										{{ parseInt(value + 543) }}
-									</template>
-									<template #trigger>
-										<q-input
-											outlined
-											dense
-											hide-bottom-space
-											:readonly="routeName != 'AddRetire'"
-											class="full-width datepicker"
-											:model-value="dateLeave != null ? date2Thai(dateLeave) : null"
-											:label="`${'วันที่ขอลาออกจากราชการ'}`"
-											:rules="[val => !!val || `${'กรุณาเลือกวันที่ขอลาออกจากราชการ'}`]"
-										>
-											<template v-slot:prepend>
-												<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-											</template>
-										</q-input>
-									</template>
-								</datepicker>
-								<q-input
-									class="col-12"
-									dense
-									outlined
-									v-model="noteReason"
-									label="เหตุผลที่ลาออกจากราชการ"
-									type="textarea"
-									:readonly="routeName != 'AddRetire'"
-									:rules="[val => !!val || `${'กรุณากรอกเหตุผลที่ลาออกจากราชการ'}`]"
-								/>
+  <div class="col-12 row justify-center">
+    <div class="col-xs-12 col-sm-12 col-md-11">
+      <div class="toptitle text-white col-12 row items-center">
+        <q-btn
+          icon="mdi-arrow-left"
+          unelevated
+          round
+          dense
+          flat
+          color="primary"
+          class="q-mr-sm"
+          @click="router.go(-1)"
+        />
+        <div v-if="routeName == 'AddRetire'">เพิ่มเรื่องลาออก</div>
+        <div v-else>รายละเอียดเรื่องลาออก</div>
+      </div>
+      <q-form ref="myform" class="col-12">
+        <q-card bordered>
+          <div class="col-12 row q-col-gutter-sm q-pa-md">
+            <div class="col-xs-12 col-sm-12">
+              <div class="col-12 row q-pa-sm q-col-gutter-sm">
+                <q-input
+                  class="col-8"
+                  dense
+                  outlined
+                  v-model="tranferOrg"
+                  hide-bottom-space
+                  label="สถานที่ยื่นขอลาออกจากราชการ"
+                  :readonly="routeName != 'AddRetire'"
+                  :rules="[(val:string) => !!val || `${'กรุณากรอกสถานที่ยื่นขอลาออกจากราชการ'}`]"
+                />
+                <datepicker
+                  class="col-2"
+                  menu-class-name="modalfix"
+                  v-model="dateCommand"
+                  :locale="'th'"
+                  autoApply
+                  readonly
+                  borderless
+                  :enableTimePicker="false"
+                  week-start="0"
+                >
+                  <template #year="{ year }">
+                    {{ year + 543 }}
+                  </template>
+                  <template #year-overlay-value="{ value }">
+                    {{ parseInt(value + 543) }}
+                  </template>
+                  <template #trigger>
+                    <q-input
+                      outlined
+                      readonly
+                      dense
+                      hide-bottom-space
+                      class="full-width datepicker"
+                      :model-value="
+                        dateCommand != null ? date2Thai(dateCommand) : null
+                      "
+                      :label="`${'วันที่ยื่นขอลาออกจากราชการ'}`"
+                      :rules="[
+                        (val) =>
+                          !!val || `${'กรุณาเลือกวันที่ยื่นขอลาออกจากราชการ'}`,
+                      ]"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          style="color: var(--q-primary)"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+                <datepicker
+                  class="col-2"
+                  menu-class-name="modalfix"
+                  v-model="dateLeave"
+                  :locale="'th'"
+                  autoApply
+                  borderless
+                  :enableTimePicker="false"
+                  week-start="0"
+                  :readonly="routeName != 'AddRetire'"
+                >
+                  <template #year="{ year }">
+                    {{ year + 543 }}
+                  </template>
+                  <template #year-overlay-value="{ value }">
+                    {{ parseInt(value + 543) }}
+                  </template>
+                  <template #trigger>
+                    <q-input
+                      outlined
+                      dense
+                      hide-bottom-space
+                      :readonly="routeName != 'AddRetire'"
+                      class="full-width datepicker"
+                      :model-value="
+                        dateLeave != null ? date2Thai(dateLeave) : null
+                      "
+                      :label="`${'วันที่ขอลาออกจากราชการ'}`"
+                      :rules="[
+                        (val) =>
+                          !!val || `${'กรุณาเลือกวันที่ขอลาออกจากราชการ'}`,
+                      ]"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          style="color: var(--q-primary)"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+                <q-input
+                  class="col-12"
+                  dense
+                  outlined
+                  v-model="noteReason"
+                  label="เหตุผลที่ลาออกจากราชการ"
+                  type="textarea"
+                  hide-bottom-space
+                  :readonly="routeName != 'AddRetire'"
+                  :rules="[
+                    (val) => !!val || `${'กรุณากรอกเหตุผลที่ลาออกจากราชการ'}`,
+                  ]"
+                />
 
-								<div class="col-12 row" v-if="routeName == 'AddRetire'">
-									<q-uploader
-										flat
-										bordered
-										class="col-xs-12 col-sm-12"
-										accept=".jpg,.png,.pdf,.csv,.doc"
-										url="http://localhost:4444/upload"
-										label="เอกสารเพิ่มเติม"
-										type="file"
-										@added="fileUploadDoc"
-										@removed="filesNull"
-										style="max-width: px"
-									/>
-								</div>
-								<div class="col-12 row" v-if="routeName != 'AddRetire'">
-									<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-										<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
-									</div>
-									<q-card bordered flat class="full-width">
-										<q-list separator>
-											<q-item v-for="file in files" :key="file.key" class="q-my-xs">
-												<q-item-section>
-													<q-item-label class="full-width ellipsis">
-														{{ file.fileName }}
-													</q-item-label>
+                <div class="col-12 row" v-if="routeName == 'AddRetire'">
+                  <q-uploader
+                    flat
+                    bordered
+                    class="col-xs-12 col-sm-12"
+                    accept=".jpg,.png,.pdf,.csv,.doc"
+                    url="http://localhost:4444/upload"
+                    label="เอกสารเพิ่มเติม"
+                    type="file"
+                    @added="fileUploadDoc"
+                    @removed="filesNull"
+                    style="max-width: px"
+                  />
+                </div>
+                <div class="col-12 row">
+                  <q-card
+                    bordered
+                    flat
+                    class="row col-12 text-dark q-mt-sm"
+                    v-if="routeName != 'AddRetire'"
+                  >
+                    <div
+                      class="bg-grey-1 q-pa-sm col-12 row items-center text-primary"
+                    >
+                      <div class="q-pl-sm text-weight-bold text-dark">
+                        เอกสารเพิ่มเติม
+                      </div>
+                    </div>
+                    <q-list class="col-12">
+                      <q-item
+                        v-for="file in files"
+                        :key="file.key"
+                        class="q-my-xs"
+                      >
+                        <q-item-section>
+                          <q-item-label class="full-width ellipsis">
+                            {{ file.fileName }}
+                          </q-item-label>
 
-													<q-item-label caption> </q-item-label>
-												</q-item-section>
-											</q-item>
-										</q-list>
-									</q-card>
-								</div>
-							</div>
-							<q-card bordered class="row col-12 text-dark q-mt-sm" v-if="routeName != 'AddRetire'">
-								<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-									<div class="q-pl-sm text-weight-bold text-dark">ผลการพิจารณาของผู้บังคับบัญชา</div>
-								</div>
-								<q-separator />
-								<div class="row col-12 q-pa-md">
-									<div class="col-12 row bg-white q-col-gutter-md">
-										<div class="col-xs-6 row items-start">
-											<div class="col-12 text-top">สถานะ</div>
-											<div class="col-12 text-detail">
-												{{ dataDetail.commanderReject !== null ? statusOrder(dataDetail.commanderReject) : "-" }}
-											</div>
-										</div>
-										<div class="col-xs-6 row items-start">
-											<div class="col-12 text-top">วันสุดท้ายที่ยับยั้ง</div>
-											<div class="col-12 text-detail">
-												{{ dataDetail.commanderRejectDate !== null ? date2Thai(dataDetail.commanderRejectDate) : "-" }}
-											</div>
-										</div>
-										<div class="col-xs-12 row items-start">
-											<div class="col-12 text-top">ความคิดเห็นและเหตุผล</div>
-											<div class="col-12 text-detail" v-if="dataDetail.commanderReject === false">
-												{{ dataDetail.commanderApproveReason !== null ? dataDetail.commanderApproveReason : "-" }}
-											</div>
-											<div class="col-12 text-detail" v-if="dataDetail.commanderReject === true">
-												{{ dataDetail.commanderRejectReason !== null ? dataDetail.commanderRejectReason : "-" }}
-											</div>
-										</div>
-									</div>
-								</div>
-							</q-card>
+                          <q-item-label caption> </q-item-label>
+                        </q-item-section>
+                        <q-space />
 
-							<q-card bordered class="row col-12 text-dark q-mt-sm" v-if="routeName != 'AddRetire'">
-								<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-									<div class="q-pl-sm text-weight-bold text-dark">ผลการพิจารณาของผู้มีอำนาจ</div>
-								</div>
-								<q-separator />
-								<div class="row col-12 q-pa-md">
-									<div class="col-12 row bg-white q-col-gutter-md">
-										<div class="col-xs-6 row items-start">
-											<div class="col-12 text-top">สถานะ</div>
-											<div class="col-12 text-detail">
-												{{ dataDetail.oligarchReject !== null ? statusOrder(dataDetail.oligarchReject) : "-" }}
-											</div>
-										</div>
-										<div class="col-xs-6 row items-start">
-											<div class="col-12 text-top">วันสุดท้ายที่ยับยั้ง</div>
-											<div class="col-12 text-detail">
-												{{ dataDetail.oligarchRejectDate !== null ? date2Thai(dataDetail.oligarchRejectDate) : "-" }}
-											</div>
-										</div>
-										<div class="col-xs-12 row items-start">
-											<div class="col-12 text-top">ความคิดเห็นและเหตุผล</div>
-											<div class="col-12 text-detail" v-if="dataDetail.oligarchReject == false">
-												{{ dataDetail.oligarchApproveReason !== null ? dataDetail.oligarchApproveReason : "-" }}
-											</div>
-											<div class="col-12 text-detail" v-else-if="dataDetail.oligarchReject == true">
-												{{ dataDetail.oligarchRejectReason !== null ? dataDetail.oligarchRejectReason : "-" }}
-											</div>
-										</div>
-									</div>
-								</div>
-							</q-card>
-						</div>
+                        <q-btn
+                          size="12px"
+                          flat
+                          round
+                          dense
+                          color="blue"
+                          icon="mdi-download"
+                          @click="downloadFile(file.pathName)"
+                          ><q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
+                        >
+                      </q-item>
+                    </q-list>
+                  </q-card>
+                </div>
+                <div class="col-12 row">
+                  <q-card
+                    bordered
+                    class="row col-12 text-dark q-mt-sm"
+                    v-if="routeName != 'AddRetire'"
+                  >
+                    <div
+                      class="bg-grey-1 q-pa-sm col-12 row items-center text-primary"
+                    >
+                      <div class="q-pl-sm text-weight-bold text-dark">
+                        ผลการพิจารณาของผู้บังคับบัญชา
+                      </div>
+                    </div>
+                    <q-separator />
+                    <div class="row col-12 q-pa-md">
+                      <div class="col-12 row bg-white q-col-gutter-md">
+                        <div class="col-xs-6 row items-start">
+                          <div class="col-12 text-top">สถานะ</div>
+                          <div class="col-12 text-detail">
+                            {{
+                              dataDetail.commanderReject !== null
+                                ? statusOrder(dataDetail.commanderReject)
+                                : "-"
+                            }}
+                          </div>
+                        </div>
+                        <div class="col-xs-6 row items-start">
+                          <div class="col-12 text-top">
+                            วันสุดท้ายที่ยับยั้ง
+                          </div>
+                          <div class="col-12 text-detail">
+                            {{
+                              dataDetail.commanderRejectDate !== null
+                                ? date2Thai(dataDetail.commanderRejectDate)
+                                : "-"
+                            }}
+                          </div>
+                        </div>
+                        <div class="col-xs-12 row items-start">
+                          <div class="col-12 text-top">
+                            ความคิดเห็นและเหตุผล
+                          </div>
+                          <div
+                            class="col-12 text-detail"
+                            v-if="dataDetail.commanderReject === false"
+                          >
+                            {{
+                              dataDetail.commanderApproveReason !== null
+                                ? dataDetail.commanderApproveReason
+                                : "-"
+                            }}
+                          </div>
+                          <div
+                            class="col-12 text-detail"
+                            v-if="dataDetail.commanderReject === true"
+                          >
+                            {{
+                              dataDetail.commanderRejectReason !== null
+                                ? dataDetail.commanderRejectReason
+                                : "-"
+                            }}
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </q-card>
+                </div>
+                <div class="col-12 row">
+                  <q-card
+                    bordered
+                    class="row col-12 text-dark q-mt-sm"
+                    v-if="routeName != 'AddRetire'"
+                  >
+                    <div
+                      class="bg-grey-1 q-pa-sm col-12 row items-center text-primary"
+                    >
+                      <div class="q-pl-sm text-weight-bold text-dark">
+                        ผลการพิจารณาของผู้มีอำนาจ
+                      </div>
+                    </div>
+                    <q-separator />
+                    <div class="row col-12 q-pa-md">
+                      <div class="col-12 row bg-white q-col-gutter-md">
+                        <div class="col-xs-6 row items-start">
+                          <div class="col-12 text-top">สถานะ</div>
+                          <div class="col-12 text-detail">
+                            {{
+                              dataDetail.oligarchReject !== null
+                                ? statusOrder(dataDetail.oligarchReject)
+                                : "-"
+                            }}
+                          </div>
+                        </div>
+                        <div class="col-xs-6 row items-start">
+                          <div class="col-12 text-top">
+                            วันสุดท้ายที่ยับยั้ง
+                          </div>
+                          <div class="col-12 text-detail">
+                            {{
+                              dataDetail.oligarchRejectDate !== null
+                                ? date2Thai(dataDetail.oligarchRejectDate)
+                                : "-"
+                            }}
+                          </div>
+                        </div>
+                        <div class="col-xs-12 row items-start">
+                          <div class="col-12 text-top">
+                            ความคิดเห็นและเหตุผล
+                          </div>
+                          <div
+                            class="col-12 text-detail"
+                            v-if="dataDetail.oligarchReject == false"
+                          >
+                            {{
+                              dataDetail.oligarchApproveReason !== null
+                                ? dataDetail.oligarchApproveReason
+                                : "-"
+                            }}
+                          </div>
+                          <div
+                            class="col-12 text-detail"
+                            v-else-if="dataDetail.oligarchReject == true"
+                          >
+                            {{
+                              dataDetail.oligarchRejectReason !== null
+                                ? dataDetail.oligarchRejectReason
+                                : "-"
+                            }}
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </q-card>
+                </div>
+              </div>
+            </div>
 
-						<div class="row col-12 q-pa-md" v-if="routeName != 'AddRetire'">
-							<q-space />
-							<q-btn
-								v-if="dataDetail.status !== 'DELETE' && dataDetail.status !== 'DONE'"
-								unelevated
-								dense
-								class="q-px-md items-center"
-								color="orange"
-								label="ยกเลิกการลาออก"
-								@click="cancelResing"
-								:disable="tranferOrg == '' && noteReason == ''"
-							/>
-						</div>
-					</div>
-					<q-separator v-if="routeName == 'AddRetire'" />
-					<div class="row col-12 q-pa-md" v-if="routeName == 'AddRetire'">
-						<q-space />
-						<q-btn unelevated dense class="q-px-md items-center" color="primary" label="ยื่นเรื่องขอลาออก" @click="saveData" :disable="tranferOrg == '' && noteReason == ''" />
-					</div>
-				</q-card>
-			</q-form>
-		</div>
-	</div>
+            <div class="row col-12 q-pa-md" v-if="routeName != 'AddRetire'">
+              <q-space />
+              <q-btn
+                v-if="
+                  dataDetail.status !== 'DELETE' && dataDetail.status !== 'DONE'
+                "
+                unelevated
+                dense
+                class="q-px-md items-center"
+                color="orange"
+                label="ยกเลิกการลาออก"
+                @click="cancelResing"
+                :disable="tranferOrg == '' && noteReason == ''"
+              />
+            </div>
+          </div>
+          <q-separator v-if="routeName == 'AddRetire'" />
+          <div class="row col-12 q-pa-md" v-if="routeName == 'AddRetire'">
+            <q-space />
+            <q-btn
+              unelevated
+              dense
+              class="q-px-md items-center"
+              color="primary"
+              label="ยื่นเรื่องขอลาออก"
+              @click="saveData"
+              :disable="tranferOrg == '' && noteReason == ''"
+            />
+          </div>
+        </q-card>
+      </q-form>
+    </div>
+  </div>
 
-	<Dialog
-	v-model:modal="modal"
-	/>
+  <Dialog v-model:modal="modal" />
 </template>
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..1d4c17e
--- /dev/null
+++ b/src/modules/08_KPI/components/Tab/01_Assessment.vue
@@ -0,0 +1,84 @@
+<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: 56vh" class="bg-white row col-12 text-dark q-pa-md">
+    <div class="text-weight-bold text-body2">
+      <span class="txt-under text-blue-6">องค์ประกอบที่ 1</span>
+      <span class="q-ml-sm"> ผลสัมฤทธิ์ของงาน</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-body2 text-weight-bold">
+        <div class="col-6 text-center row justify-center">
+          <span>รวมผลการประเมิน (ร้อยละ) 100</span>
+          <div class="text-primary q-pl-md">{{ total }}</div>
+        </div>
+        
+        <div class="col-6 text-center row justify-center">
+          <span>สรุปผลการประเมินผลสัมฤทธิ์ของงาน (คะแนนเต็ม 70 คะแนน)</span>
+           <div class="text-primary q-pl-md">{{ resultWork }}</div>
+        </div>
+      </div>
+
+      <q-separator size="3px" class="q-my-lg" />
+
+      <!-- องค์ประกอบที่ 2 -->
+      <div class="text-weight-bold text-body2 q-mb-sm">
+        <span class="txt-under text-blue-6">องค์ประกอบที่ 2</span>
+        <span class="q-ml-sm"> พฤติกรรมการปฎิบัติราชการ (สมรรถนะ)</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 text-body2 text-weight-bold justify-center">
+        <span>ผลการประเมินสมรรถนะ (20 คะแนน)</span>
+        <div class="text-primary q-pl-md">{{ 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..d33dbfe
--- /dev/null
+++ b/src/modules/08_KPI/components/Tab/02_CommanderAbove.vue
@@ -0,0 +1,3 @@
+<template>
+    <div class="q-pa-md">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..c60e299
--- /dev/null
+++ b/src/modules/08_KPI/components/Tab/03_CommanderAboveOneStep.vue
@@ -0,0 +1,3 @@
+<template>
+    <div class="q-pa-md">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..dd2618a
--- /dev/null
+++ b/src/modules/08_KPI/components/Tab/04_File.vue
@@ -0,0 +1,3 @@
+<template>
+    <div class="q-pa-md">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..1314c8e
--- /dev/null
+++ b/src/modules/08_KPI/components/Tab/Dialog/01_Dialog.vue
@@ -0,0 +1,288 @@
+<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>(25);
+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: 85%">
+      <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">
+        <div class="col-12 row">
+            <div class="bg-grey-1 q-pa-md col-xs-12 col-sm-4 col-md-3 row lineRight">
+              <div class="col-12 fit">
+                <div class="col-12 ">
+                  <q-input
+                    v-model="search"
+                    outlined
+                    dense
+                    label="ค้นหา"
+                    :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>
+                  </div>
+                  <q-card bordered flat class="q-mt-sm no-shadow bg-white col-12">
+                    <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-list
+                          separator
+                          dense
+                        >
+                          <q-item
+                            v-for="(item, index) in listTarget"
+                          :key="index"
+                            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-card-section>
+                  </q-card>
+                </div>
+            </div>
+
+            <div class="col-xs-12 col-sm-8 col-md-9 row">
+              <div class="row q-pa-md q-col-gutter-sm">
+                <div class="col-12">
+                  <span class="text-body2 text-weight-medium"
+                    >รายละเอียดตัวชี้วัด</span
+                  >
+                </div>
+                <div class="col-8">
+                  <q-card bordered class="full-height q-pa-sm">
+                    <div
+                      v-for="(field, index) in Object.keys(fieldDetailLabels)"
+                      :key="index + 1"
+                    >
+                      <div class="row q-pa-sm q-col-gutter-lg col-12">
+                        <div class="col-4 text-grey-6">
+                          {{
+                            fieldDetailLabels[
+                              field as keyof typeof fieldDetailLabels
+                            ]
+                          }}
+                        </div>
+                        <div class="col-8">
+                          <span>{{
+                            formDetail[field] ? formDetail[field] : "-"
+                          }}</span>
+                        </div>
+                      </div>
+                    </div>
+                  </q-card>
+                </div>
+                <div class="col-4 row ">
+                  <div class="row col-12 card-box">
+                    <div class="col-12 bg-grey-2 row items-center text-weight-medium">
+                      <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"
+                      class="row col-12 items-center lineTop"
+                    >
+                        <div
+                          class="col-6 text-center text-body2"
+                        >
+                          {{ fieldLabels[field as keyof typeof fieldLabels] }}
+                        </div>
+                        <div class="col-6 text-center text-primary">
+                          <span>{{
+                            formScore[field] ? formScore[field] : "-"
+                          }}</span>
+                        </div>
+                        
+                      
+                    </div>
+                  </div>
+                </div>
+                <div class="col-12">
+                  <q-input
+                    v-model="define"
+                    label="นิยามหรือความหมายของตัวชี้วัด"
+                    type="textarea"
+                    outlined
+                    autogrow
+                    dense
+                    :rules="[(val:string) => !!val || `${'กรุณากรอกตัวชี้วัด'}`,]"
+                    hide-bottom-space
+                    :class="getclass()"
+                  />
+                </div>
+                <div class="col-12">
+                  <q-input
+                    v-model="formula"
+                    label="สูตรคำนวณ"
+                    type="textarea"
+                    outlined
+                    autogrow
+                    dense
+                    :rules="[(val:string) => !!val || `${'กรุณากรอกตัวชี้วัด'}`,]"
+                    hide-bottom-space
+                    :class="getclass()"
+                  />
+                </div>
+              </div>
+            </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;
+}
+.no-shadow{
+  box-shadow:none !important;
+}
+.lineRight{
+  border-right: 1px solid #EDEDED !important;
+}
+.lineTop{
+  border-top: 1px solid #EDEDED !important;
+}
+.card-box{
+  border: 1px solid #EDEDED !important;
+  border-radius: 8px;
+}
+</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..12aa2e5
--- /dev/null
+++ b/src/modules/08_KPI/components/Tab/Dialog/04_Dialog.vue
@@ -0,0 +1,297 @@
+<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: 85%">
+      <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">
+          <div class="col-12 row">
+            <div class="bg-grey-1 q-pa-md col-xs-12 col-sm-4 col-md-3 row lineRight">
+              <div class="col-12 q-col-gutter-sm fit">
+                <div class="col-12 ">
+                  <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
+                  />
+                </div>
+                <div class="col-12 ">
+                  <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>
+                </div>
+                <div class="col-12 ">
+                  <q-card bordered flat class="no-shadow bg-white col-12">
+                    <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-list
+                          separator
+                          dense
+                        >
+                          <q-item
+                            v-for="(item, index) in listTarget"
+                            :key="index"
+                            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-card-section>
+                  </q-card>
+                </div>
+              </div>
+            </div>
+
+            <div class="col-xs-12 col-sm-8 col-md-9 row">
+              <div class="row col-12 q-pa-md q-col-gutter-sm">
+                <div class="col-12">
+                  <span class="text-body2 text-weight-medium"
+                    >รายละเอียดตัวชี้วัด</span
+                  >
+                </div>
+                <div class="col-8 row">
+                  <q-card bordered class="fit q-pa-sm no-shadow">
+                    <div
+                      v-for="(field, index) in Object.keys(fieldDetailLabels)"
+                      :key="index + 1"
+                    >
+                      <div class="row q-pa-sm q-col-gutter-lg col-12">
+                        <div class="col-4 text-grey-6">
+                          {{
+                            fieldDetailLabels[
+                              field as keyof typeof fieldDetailLabels
+                            ]
+                          }}
+                        </div>
+                        <div class="col-8">
+                          <span>{{
+                            formDetail[field] ? formDetail[field] : "-"
+                          }}</span>
+                        </div>
+                      </div>
+                    </div>
+                  </q-card>
+                </div>
+                <div class="col-4 row ">
+                  <q-card bordered class="col-12 row no-shadow">
+                    <div class="bg-grey-2 row q-py-sm text-weight-bold col-12">
+                      <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"
+                      class="col-12"
+                    >
+                      <div class="row col-12 q-py-sm">
+                        <div
+                          class="col-6 text-center text-body2"
+                        >
+                          {{ 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>
+            </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;
+}
+.no-shadow{
+  box-shadow:none !important;
+}
+.lineRight{
+  border-right: 1px solid #EDEDED !important;
+}
+.lineTop{
+  border-top: 1px solid #EDEDED !important;
+}
+.card-box{
+  border: 1px solid #EDEDED !important;
+  border-radius: 8px;
+}
+</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..dfbb22f
--- /dev/null
+++ b/src/modules/08_KPI/components/Tab/Topic/01_Template.vue
@@ -0,0 +1,206 @@
+<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" class="no-shadow">
+    <q-card-section class="bg-grey-2 q-py-sm">
+      <span class="text-weight-medium">{{ title }}</span>
+      <q-btn
+        class="q-ml-xs"
+        flat
+        round
+        icon="mdi-plus"
+        color="primary"
+        size="12px"
+        dense
+        @click="onAdd"
+      >
+        <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+      </q-btn>
+    </q-card-section>
+    <q-separator/>
+    <q-card-section class="q-pa-sm">
+      <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..8335cc1
--- /dev/null
+++ b/src/modules/08_KPI/components/Tab/Topic/02_Template.vue
@@ -0,0 +1,188 @@
+<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" class="no-shadow">
+    <q-card-section class="bg-grey-3 q-py-sm">
+      <span class="text-weight-medium">{{ title }}</span>
+      <q-btn
+        class="q-ml-xs"
+        flat
+        round
+        icon="mdi-plus"
+        color="primary"
+        size="12px"
+        dense
+        @click="onAdd"
+      >
+        <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+      </q-btn>
+    </q-card-section>
+    <q-card-section class="q-pa-sm">
+      <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/router.ts b/src/modules/08_KPI/router.ts
new file mode 100644
index 0000000..e0cc5c1
--- /dev/null
+++ b/src/modules/08_KPI/router.ts
@@ -0,0 +1,55 @@
+/**
+ * Router ขอโอน
+ */
+
+const KPIPage = () => import("@/modules/08_KPI/views/main.vue");
+const FormPage = () => import("@/modules/08_KPI/views/form.vue");
+const KPIMainEvaluator = () => import("@/modules/08_KPI/views/mainEvaluator.vue");
+
+export default [
+  {
+    path: "/KPI",
+    name: "KPIMain",
+    component: KPIPage,
+    meta: {
+      Auth: true,
+      Key: [8],
+    },
+  },
+  {
+    path: "/KPI/add",
+    name: "KPIAdd",
+    component: FormPage,
+    meta: {
+      Auth: true,
+      Key: [8.1],
+    },
+  },
+  {
+    path: "/KPI/:id",
+    name: "KPIEdit",
+    component: FormPage,
+    meta: {
+      Auth: true,
+      Key: [8.2],
+    },
+  },
+  {
+    path: "/KPI-evaluator",
+    name: "KPIMainEvaluator",
+    component: KPIMainEvaluator,
+    meta: {
+      Auth: true,
+      Key: [8.3],
+    },
+  },
+  {
+    path: "/KPI-evaluator/:id",
+    name: "KPIEditEvaluator",
+    component: FormPage,
+    meta: {
+      Auth: true,
+      Key: [8.4],
+    },
+  },
+];
diff --git a/src/modules/08_KPI/store.ts b/src/modules/08_KPI/store.ts
new file mode 100644
index 0000000..7e9a157
--- /dev/null
+++ b/src/modules/08_KPI/store.ts
@@ -0,0 +1,7 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+export const useKpiDataStore = defineStore("KPIDate", () => {
+  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..dd1eeba
--- /dev/null
+++ b/src/modules/08_KPI/views/TabMain.vue
@@ -0,0 +1,86 @@
+<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>(12);
+</script>
+<template>
+  <q-splitter v-model="splitterModel" disable>
+    <template v-slot:before>
+      <q-tabs v-model="store.tabMain" vertical class="text-grey-7 text-weight-light" active-class="bg-blue-1 text-blue-8 text-weight-bold">
+        <!-- <q-tab
+          class="hover-tab"
+          v-for="(tab, index) in itemsTab"
+          :key="index"
+          :name="tab.name"
+          :icon="tab.icon"
+          :label="tab.label"
+        /> -->
+        <q-tab name="1" label="ผู้ขอรับการประเมิน" />
+        <q-tab name="2" label="ผู้บังคับบัญชา">
+         <div class="text-caption">เหนือขึ้นไป</div>
+        </q-tab>
+        <q-tab name="3" label="ผู้บังคับบัญชา">
+          <div class="text-caption">เหนือขึ้นไปอีกหนึ่งขั้น</div>
+        </q-tab>
+        <q-tab name="4" 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"
+      >
+        <q-tab-panel
+          v-for="(tab, index) in itemsTab"
+          :key="index"
+          :name="tab.name"
+          class="q-pa-none"
+        >
+          <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
new file mode 100644
index 0000000..9750935
--- /dev/null
+++ b/src/modules/08_KPI/views/form.vue
@@ -0,0 +1,185 @@
+<script setup lang="ts">
+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://cdn.quasar.dev/img/boy-avatar.png",
+});
+
+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();
+    });
+}
+
+/** save */
+function onSave() {}
+
+onMounted(() => {
+  getProfile();
+});
+</script>
+
+<template>
+  <div class="col-12 row justify-center">
+    <div class="col-xs-12 col-sm-12 col-md-11">
+      <div class="toptitle text-white col-12 row items-center">
+        <q-btn
+          icon="mdi-arrow-left"
+          unelevated
+          round
+          dense
+          flat
+          color="primary"
+          class="q-mr-sm"
+          @click="router.push(`/KPI`)"
+        />
+        {{ id ? `แก้ไขแบบประเมิน` : `เพิ่มแบบประเมิน` }}
+        <q-space />
+        <q-btn label="บันทึก" color="secondary" unelevated @click="onSave"
+          ><q-tooltip>บันทึก</q-tooltip></q-btn
+        >
+      </div>
+      <div class="col-12">
+        <q-card bordered flat class="relative-position"> 
+          <div
+              class="absolute"
+              style="left: 2%; top: 50%; transform: translateY(-50%)"
+            >
+              <q-avatar size="95px">
+                <q-img :src="formProfile.avartar" />
+              </q-avatar>
+            </div>
+          <div class="row col-12">
+            <div class="row items-center col-12 q-pa-sm">
+              <div class="col-12" style="padding-left: 12%;">
+                <div class="row col-12 items-center">
+                  <span class="text-h6 text-weight-medium 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"
+                      size="md"
+                    >
+                      <q-tooltip>ดูข้อมูลการช่วยราชการ</q-tooltip>
+                    </q-btn>
+                    <q-btn
+                      unelevated
+                      round
+                      color="grey-2"
+                      text-color="blue-5"
+                      icon="mdi-file-eye-outline"
+                      size="md"
+                    >
+                      <q-tooltip>ดูข้อมูลการทดลองงาน</q-tooltip>
+                    </q-btn>
+                  </div>
+                </div>
+              </div>
+            </div>
+           
+
+            <div class="row items-center bg-toolbar col-12 q-pa-sm">
+              <div class="col-12 q-py-xs" style="padding-left: 12%;">
+                <div class="row no-wrap">
+                  <div class="col-2">
+                    <div class="column">
+                      <span class="text-grey-6">ตำแหน่งในสายงาน</span>
+                      <span class="text-weight-medium text-dark">{{
+                        formProfile.position
+                      }}</span>
+                    </div>
+                  </div>
+                  <div class="col-2">
+                    <div class="column">
+                      <span class="text-grey-6">ประเภท</span>
+                      <span class="text-weight-medium text-dark">{{
+                        formProfile.type
+                      }}</span>
+                    </div>
+                  </div>
+                  <div class="col-2">
+                    <div class="column">
+                      <span class="text-grey-6">ระดับชั้นงาน</span>
+                      <span class="text-weight-medium text-dark">{{
+                        formProfile.level
+                      }}</span>
+                    </div>
+                  </div>
+                  <div class="col-2">
+                    <div class="column">
+                      <span class="text-grey-6">สถานะการประเมิน</span>
+                      <span class="text-weight-medium text-dark">{{
+                        formProfile.status
+                      }}</span>
+                    </div>
+                  </div>
+                  <div class="col-2">
+                    <div class="column">
+                      <span class="text-grey-6">คะแนนประเมิน</span>
+                      <span class="text-weight-medium 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>
+</template>
+<style>
+.bg-toolbar{
+  background-color: #F2FBFA;
+}
+
+</style>
diff --git a/src/modules/08_KPI/views/main.vue b/src/modules/08_KPI/views/main.vue
new file mode 100644
index 0000000..e92b50b
--- /dev/null
+++ b/src/modules/08_KPI/views/main.vue
@@ -0,0 +1,245 @@
+<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>
+  <div class="col-12 row justify-center">
+    <div class="col-xs-12 col-sm-12 col-md-11">
+      <div class="toptitle text-white col-12 row items-center">
+        <q-btn
+          icon="mdi-arrow-left"
+          unelevated
+          round
+          dense
+          flat
+          color="primary"
+          class="q-mr-sm"
+          @click="router.push(`/`)"
+        />
+        รายการขอรับประเมินผลการปฏิบัติราชการระดับบุคคล
+      </div>
+      <div class="col-12">
+        <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 class="q-ml-sm" 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>
diff --git a/src/modules/08_KPI/views/mainEvaluator.vue b/src/modules/08_KPI/views/mainEvaluator.vue
new file mode 100644
index 0000000..8c5911d
--- /dev/null
+++ b/src/modules/08_KPI/views/mainEvaluator.vue
@@ -0,0 +1,255 @@
+<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[]>(["name", "createDate", "status", "result"]);
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "name",
+    align: "left",
+    label: "ผู้ขอรับการประเมิน",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    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",
+      name: "สมศรี ใจดี",
+      createDate: '2024-02-16T06:01:00.000Z',
+      status: "รอดำเนินการ",
+      result: "ผ่านเกณฑ์การประเมิน",
+    },
+    {
+      id: "ID1",
+      name: "สมจิตร ใจดี",
+      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-evaluator/${id}`)
+}
+onMounted(async () => {
+  getData();
+});
+</script>
+
+<template>
+  <div class="col-12 row justify-center">
+    <div class="col-xs-12 col-sm-12 col-md-11">
+      <div class="toptitle text-white col-12 row items-center">
+        <q-btn
+          icon="mdi-arrow-left"
+          unelevated
+          round
+          dense
+          flat
+          color="primary"
+          class="q-mr-sm"
+          @click="router.push(`/`)"
+        />
+        รายการการประเมินผลการปฏิบัติราชการระดับบุคคล
+      </div>
+      <div class="col-12">
+        <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-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>
diff --git a/src/modules/09_scholarship/components/Dialog/DialogReturn.vue b/src/modules/09_scholarship/components/Dialog/DialogReturn.vue
new file mode 100644
index 0000000..68bc4f5
--- /dev/null
+++ b/src/modules/09_scholarship/components/Dialog/DialogReturn.vue
@@ -0,0 +1,327 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import DialogHeader from "@/components/DialogHeader.vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRoute } from "vue-router";
+
+const route = useRoute();
+const id = ref<string>(route.params.id.toLocaleString());
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  dialogMessageNotify,
+  showLoader,
+  hideLoader,
+  messageError,
+  dialogConfirm,
+  success,
+} = mixin;
+const modal = defineModel<boolean>("modal", { required: true });
+
+const governmentDate = ref<any>(null);
+const graduatedDate = ref<any>(null);
+const isGraduated = ref<any>(null);
+const graduatedReason = ref<string>("");
+
+const bookNumber = ref<string>("");
+const bookDate = ref<any>(null);
+const governmentEndDate = ref<any>(null);
+
+function close() {
+  modal.value = false;
+
+  bookNumber.value = "";
+  bookDate.value = null;
+  governmentDate.value = null;
+  governmentEndDate.value = null;
+
+  isGraduated.value = null;
+  graduatedDate.value = null;
+  graduatedReason.value = "";
+}
+
+function onSubmit() {
+  if (isGraduated.value == null) {
+    dialogMessageNotify($q, "กรุณาเลือกสำเร็จการศึกษาตามที่หลักสูตรกำหนด");
+  } else {
+    dialogConfirm($q, () => {
+      showLoader();
+      http
+        .put(config.API.developmentScholarship + `/user/detail/${id.value}`, {
+          bookNumber: bookNumber.value,
+          bookDate: bookDate.value,
+          governmentDate: governmentDate.value,
+          governmentEndDate: governmentEndDate.value,
+          isGraduated: isGraduated.value,
+          graduatedDate: isGraduated.value == 'true' ? graduatedDate.value : null,
+          graduatedReason: isGraduated.value == 'false' ? graduatedReason.value : null,
+        })
+        .then((res) => {
+          success($q, "บันทึกสำเร็จ");
+          close();
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    });
+  }
+}
+
+watch(
+  () => modal.value,
+  () => {
+    if (modal.value == true) {
+      showLoader();
+      http
+        .get(config.API.developmentScholarship + `/user/detail/${id.value}`)
+        .then((res) => {
+          const data = res.data.result;
+          bookNumber.value = data.bookNumber;
+          bookDate.value = data.bookDate;
+          governmentDate.value = data.governmentDate;
+          governmentEndDate.value = data.governmentEndDate;
+          isGraduated.value = data.isGraduated.toLocaleString();
+          graduatedDate.value = data.graduatedDate;
+          graduatedReason.value = data.graduatedReason;
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    }
+  }
+);
+</script>
+<template>
+  <q-dialog v-model="modal">
+    <q-card flat style="min-width: 30vw">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader tittle="รายงานตัวกลับเข้ารับราชการ" :close="close" />
+        <q-separator />
+        <q-card-section>
+          <div class="row q-col-gutter-sm">
+            <div class="col-6">
+              <q-input
+                label="เลขที่หนังสือรายงานตัวกลับเข้าปฏิบัติราชการ"
+                v-model="bookNumber"
+                outlined
+                lazy-rules
+                dense
+                hide-bottom-space
+                :rules="[
+                            (val:string) =>
+                                !!val || `${'กรุณากรอกเลขที่หนังสือรายงานตัวกลับเข้าปฏิบัติราชการ'}`,
+                            ]"
+                class="inputgreen"
+              />
+            </div>
+            <div class="col-6">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="bookDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    outlined
+                    :model-value="bookDate ? date2Thai(bookDate) : null"
+                    :label="`${'หนังสือรายงานตัวกลับเข้าปฏิบัติราชการลงวันที่'}`"
+                    hide-bottom-space
+                    class="inputgreen"
+                    :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-6">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="governmentDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    outlined
+                    :model-value="
+                      governmentDate ? date2Thai(governmentDate) : null
+                    "
+                    :label="`${'วันที่กลับเข้าปฏิบัติราชการ'}`"
+                    hide-bottom-space
+                    class="inputgreen"
+                    :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-6">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="governmentEndDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    outlined
+                    :model-value="
+                      governmentEndDate ? date2Thai(governmentEndDate) : null
+                    "
+                    :label="`${' วันสิ้นสุดภาระผูกพัน'}`"
+                    hide-bottom-space
+                    class="inputgreen"
+                    :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>
+            <q-radio
+              v-model="isGraduated"
+              checked-icon="task_alt"
+              unchecked-icon="panorama_fish_eye"
+              val="true"
+              label="สำเร็จการศึกษาตามที่หลักสูตรกำหนด"
+            />
+
+            <q-radio
+              v-model="isGraduated"
+              checked-icon="task_alt"
+              unchecked-icon="panorama_fish_eye"
+              val="false"
+              label="เสร็จสิ้นการศึกษาตามที่หลักสูตรกำหนดแล้วแต่ยังไม่สำเร็จการศึกษา"
+            />
+            <div v-if="isGraduated == 'true'" class="col-12">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="graduatedDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    outlined
+                    :model-value="
+                      graduatedDate ? date2Thai(graduatedDate) : null
+                    "
+                    :label="`${'ตั้งแต่ (วันที่)'}`"
+                    hide-bottom-space
+                    class="inputgreen"
+                    :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 v-if="isGraduated == 'false'" class="col-12">
+              <q-input
+                v-model="graduatedReason"
+                type="textarea"
+                dense
+                outlined
+                hide-bottom-space
+                    class="inputgreen"
+                    :rules="[
+                            (val:string) =>
+                                !!val || `${'กรุณากรอก เนื่องจาก'}`,
+                            ]"
+                label="เนื่องจาก"
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right">
+          <q-btn label="บันทึก" color="secondary" type="submit"
+            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+          >
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
diff --git a/src/modules/09_scholarship/interface/index/Main.ts b/src/modules/09_scholarship/interface/index/Main.ts
new file mode 100644
index 0000000..80143f3
--- /dev/null
+++ b/src/modules/09_scholarship/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/09_scholarship/interface/request/index.ts b/src/modules/09_scholarship/interface/request/index.ts
new file mode 100644
index 0000000..8b76853
--- /dev/null
+++ b/src/modules/09_scholarship/interface/request/index.ts
@@ -0,0 +1,132 @@
+interface FormsSholarship {
+    profileId: string;
+    rank: string; //ยศ
+    prefix: string; //คำนำหน้าชื่อ
+    firstName: string; //ชื่อ
+    lastName: string; //นามสกุล
+    citizenId: string; //เลขประจำตัวประชาชน
+    position: string; //ตำแหน่ง
+    posExecutive: string; //ชื่อตำแหน่งทางการบริหาร
+    posLevelId: string | null; //ไอดีระดับตำแหน่ง
+    posTypeId: string | null; //ไอดีประเภทตำแหน่ง
+    org: string;
+    rootId: string | null;
+    root: string;
+    orgRootShortName: string;
+    orgRevisionId: string | null;
+    guarantorRank: string; //ยศ(ผู้ค้ำ)
+    guarantorPrefix: string; //คำนำหน้าชื่อ(ผู้ค้ำ)
+    guarantorFirstName: string; //ชื่อ(ผู้ค้ำ)
+    guarantorLastName: string; //นามสกุล(ผู้ค้ำ)
+    guarantorCitizenId: string; //เลขประจำตัวประชาชน(ผู้ค้ำ)
+    guarantorPosition: string; //ตำแหน่ง(ผู้ค้ำ)
+    guarantorPosExecutive: string; //ชื่อตำแหน่งทางการบริหาร(ผู้ค้ำ)
+    guarantorOrg: string;
+    guarantorRootId: string | null;
+    guarantorRoot: string;
+    guarantorOrgRootShortName: string;
+    guarantorOrgRevisionId: string | null;
+    posLevelguarantorId: string | null; //ไอดีระดับตำแหน่ง(ผู้ค้ำ)
+    posTypeguarantorId: string | null; //ไอดีประเภทตำแหน่ง(ผู้ค้ำ)
+    scholarshipYear: number | null; //ปีงบประมาณที่ได้รับทุน
+    budgetSource: string; //แหล่งงบประมาณ
+    budgetApprove: number | string | null; //งบประมาณที่ได้รับอนุมัติตลอดหลักสูตร
+    bookNo: string; //เลขที่หนังสืออนุมัติ
+    bookNoDate: Date | null; //ลงวันที่(หนังสือ)
+    bookApproveDate: Date | null; //หนังสืออนุมัติเมื่อวันที่
+    useOfficialTime: boolean; //ใช้เวลาราชการ
+    changeDetail: string; //เปลี่ยนแปลงรายละเอียด
+    scholarshipType: string; //เลือกประเภททุน
+    fundType: string; //ประเภททุน
+    contractNo: string; //เลขที่สัญญา
+    contractDate: Date | null; //ลงวันที่(เลขที่สัญญา)
+    reportBackNo: string; //เลขที่หนังสือรายงานตัวกลับ
+    reportBackNoDate: Date | null; //ลงวันที่(เลขที่หนังสือรายงานตัวกลับ)
+    reportBackDate: Date | null; //รายงานตัวกลับวันที่
+    degreeLevel: string; //ระดับปริญญา
+    course: string; //หลักสูตรการศึกษา/หลักสูตรการฝึกอบรม
+    field: string; //สาขาวิชา/สาขา
+    faculty: string; //คณะ
+    educationalInstitution: string; //สถาบันการศึกษา/สถาบันการศึกษา_หน่วยงานผู้จัดการฝึกอบรม/สถานที่ไปศึกษาดูงานในประเทศ
+    startDate: Date | null; //วันเริ่มต้นการศึกษา/วันเริ่มต้นการฝึกอบรม/วันเริ่มต้นการศึกษาดูงานในประเทศ
+    endDate: Date | null; //วันสิ้นสุดการศึกษา/วันสิ้นสุดการฝึกอบรม/วันสิ้นสุดการศึกษาดูงานในประเทศ
+    studyPlace: string; //สถานที่ไปศึกษาดูงาน
+    studyTopic: string; //หัวข้อการไปศึกษาดูงาน/หัวข้อการไปศึกษาดูงานในประเทศ
+    studyStartDate: Date | null; //วันเริ่มต้นการศึกษาดูงาน
+    studyEndDate: Date | null; //วันสิ้นสุดการศึกษาดูงาน
+    studyCountry: string; //ประเทศที่เดินทางไปศึกษาดูงาน
+    studyAbroadTopic: string; //หัวข้อการไปศึกษาดูงานต่างประเทศ
+    studyAbroadStartDate: Date | null; //วันเริ่มต้นการศึกษาดูงานต่างประเทศ
+    studyAbroadEndDate: Date | null; //วันสิ้นสุดการศึกษาดูงานต่างประเทศ
+    totalPeriod: string; //รวมระยะเวลาในการศึกษา/รวมระยะเวลาในการฝึกอบรม
+    planType: string; // INPLAN ในแผนฯ, OUTPLAN นอกแผนฯ
+    isNoUseBudget: boolean; //
+  }
+  
+  interface DataSholarship {
+    rank: string; //ยศ
+    prefix: string; //คำนำหน้าชื่อ
+    firstName: string; //ชื่อ
+    lastName: string; //นามสกุล
+    citizenId: string; //เลขประจำตัวประชาชน
+    position: string; //ตำแหน่ง
+    posExecutive: string; //ชื่อตำแหน่งทางการบริหาร
+    posLevelId: string; //ไอดีระดับตำแหน่ง
+    posTypeId: string; //ไอดีประเภทตำแหน่ง
+    posTypeName: string; //ไอดีระดับตำแหน่ง
+    posLevelName: string; //ไอดีประเภทตำแหน่ง
+    org: string;
+    guarantorRank: string; //ยศ(ผู้ค้ำ)
+    guarantorPrefix: string; //คำนำหน้าชื่อ(ผู้ค้ำ)
+    guarantorFirstName: string; //ชื่อ(ผู้ค้ำ)
+    guarantorLastName: string; //นามสกุล(ผู้ค้ำ)
+    guarantorCitizenId: string; //เลขประจำตัวประชาชน(ผู้ค้ำ)
+    guarantorPosition: string; //ตำแหน่ง(ผู้ค้ำ)
+    guarantorPosExecutive: string; //ชื่อตำแหน่งทางการบริหาร(ผู้ค้ำ)
+    guarantorOrg: string;
+    guarantorRootId: string | null;
+    guarantorRoot: string;
+    guarantorOrgRootShortName: string;
+    guarantorOrgRevisionId: string | null;
+    posLevelguarantorId: string; //ไอดีระดับตำแหน่ง(ผู้ค้ำ)
+    posTypeguarantorId: string; //ไอดีประเภทตำแหน่ง(ผู้ค้ำ)
+    posTypeguarantorName: string; //ไอดีระดับตำแหน่ง(ผู้ค้ำ)
+    posLevelguarantorName: string; //ไอดีประเภทตำแหน่ง(ผู้ค้ำ)
+    scholarshipYear: number | null; //ปีงบประมาณที่ได้รับทุน
+    budgetSource: string; //แหล่งงบประมาณ
+    budgetApprove: number | null; //งบประมาณที่ได้รับอนุมัติตลอดหลักสูตร
+    bookNo: string; //เลขที่หนังสืออนุมัติ
+    bookNoDate: Date | null; //ลงวันที่(หนังสือ)
+    bookApproveDate: Date | null; //หนังสืออนุมัติเมื่อวันที่
+    useOfficialTime: boolean; //ใช้เวลาราชการ
+    changeDetail: string; //เปลี่ยนแปลงรายละเอียด
+    scholarshipType: string; //เลือกประเภททุน
+    fundType: string; //ประเภททุน
+    contractNo: string; //เลขที่สัญญา
+    contractDate: Date | null; //ลงวันที่(เลขที่สัญญา)
+    reportBackNo: string; //เลขที่หนังสือรายงานตัวกลับ
+    reportBackNoDate: Date | null; //ลงวันที่(เลขที่หนังสือรายงานตัวกลับ)
+    reportBackDate: Date | null; //รายงานตัวกลับวันที่
+    degreeLevel: string; //ระดับปริญญา
+    course: string; //หลักสูตรการศึกษา/หลักสูตรการฝึกอบรม
+    field: string; //สาขาวิชา/สาขา
+    faculty: string; //คณะ
+    educationalInstitution: string; //สถาบันการศึกษา/สถาบันการศึกษา_หน่วยงานผู้จัดการฝึกอบรม/สถานที่ไปศึกษาดูงานในประเทศ
+    startDate: Date | null; //วันเริ่มต้นการศึกษา/วันเริ่มต้นการฝึกอบรม/วันเริ่มต้นการศึกษาดูงานในประเทศ
+    endDate: Date | null; //วันสิ้นสุดการศึกษา/วันสิ้นสุดการฝึกอบรม/วันสิ้นสุดการศึกษาดูงานในประเทศ
+    studyPlace: string; //สถานที่ไปศึกษาดูงาน
+    studyTopic: string; //หัวข้อการไปศึกษาดูงาน/หัวข้อการไปศึกษาดูงานในประเทศ
+    studyStartDate: Date | null; //วันเริ่มต้นการศึกษาดูงาน
+    studyEndDate: Date | null; //วันสิ้นสุดการศึกษาดูงาน
+    studyCountry: string; //ประเทศที่เดินทางไปศึกษาดูงาน
+    studyAbroadTopic: string; //หัวข้อการไปศึกษาดูงานต่างประเทศ
+    studyAbroadStartDate: Date | null; //วันเริ่มต้นการศึกษาดูงานต่างประเทศ
+    studyAbroadEndDate: Date | null; //วันสิ้นสุดการศึกษาดูงานต่างประเทศ
+    totalPeriod: string; //รวมระยะเวลาในการศึกษา/รวมระยะเวลาในการฝึกอบรม
+    status: string;
+    planType: string; // INPLAN ในแผนฯ, OUTPLAN นอกแผนฯ
+    isNoUseBudget: boolean; // ไม่ใช้งบประมาณ
+  }
+
+  export type { FormsSholarship,DataSholarship };
+  
\ No newline at end of file
diff --git a/src/modules/09_scholarship/router.ts b/src/modules/09_scholarship/router.ts
new file mode 100644
index 0000000..ca4af1c
--- /dev/null
+++ b/src/modules/09_scholarship/router.ts
@@ -0,0 +1,26 @@
+/**
+ * Router ขอโอน
+ */
+
+const scholarshipPage = () => import("@/modules/09_scholarship/views/main.vue");
+const scholarshipDetail = () => import('@/modules/09_scholarship/views/detail.vue')
+export default [
+  {
+    path: "/scholarship",
+    name: "scholarshipMain",
+    component: scholarshipPage,
+    meta: {
+      Auth: true,
+      Key: [9],
+    },
+  },
+  {
+    path: "/scholarship/:id",
+    name: "scholarshipDetail",
+    component: scholarshipDetail,
+    meta: {
+      Auth: true,
+      Key: [9],
+    },
+  },
+];
diff --git a/src/modules/09_scholarship/views/detail.vue b/src/modules/09_scholarship/views/detail.vue
new file mode 100644
index 0000000..8fea0e5
--- /dev/null
+++ b/src/modules/09_scholarship/views/detail.vue
@@ -0,0 +1,2508 @@
+<script setup lang="ts">
+import { onMounted, reactive, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import axios from "axios";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type { DataOptions } from "@/modules/09_scholarship/interface/index/Main";
+import type {
+  FormsSholarship,
+  DataSholarship,
+} from "@/modules/09_scholarship/interface/request/index";
+
+import DialogReturn from "@/modules/09_scholarship/components/Dialog/DialogReturn.vue";
+import genReport from "@/plugins/genreport";
+
+const isGuarantor = ref<boolean>(false);
+const isGov = ref<boolean>(false);
+const isStatus = ref<string>("");
+const fileList = ref<any[]>();
+const route = useRoute();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  showLoader,
+  hideLoader,
+  messageError,
+  date2Thai,
+  calculateDurationYmd,
+  dialogConfirm,
+  success,
+} = mixin;
+const router = useRouter();
+
+const dialogReturn = ref<boolean>(false);
+
+const documentFile = ref<any>(null);
+const id = ref<string>(route.params.id.toLocaleString());
+const budgetSourceOp = ref<DataOptions[]>([
+  { id: "BKK", name: "งบประมาณ กทม." },
+  { id: "HOSPITAL", name: "เงินบำรุงโรงพยาบาล" },
+  { id: "FUND", name: "เงินกองทุน" },
+  { id: "SUBSIDY", name: "เงินอุดหนุน" },
+  { id: "OTHER", name: "เงินอื่น ๆ" },
+]);
+
+const formBody = reactive<FormsSholarship>({
+  profileId: "",
+  rank: "", //ยศ
+  prefix: "", //คำนำหน้าชื่อ
+  firstName: "", //ชื่อ
+  lastName: "", //นามสกุล
+  citizenId: "", //เลขประจำตัวประชาชน
+  position: "", //ตำแหน่ง
+  posExecutive: "", //ชื่อตำแหน่งทางการบริหาร
+  posLevelId: null, //ไอดีระดับตำแหน่ง
+  posTypeId: null, //ไอดีประเภทตำแหน่ง
+  org: "",
+  rootId: null,
+  root: "",
+  orgRootShortName: "",
+  orgRevisionId: null,
+  guarantorRank: "", //ยศ(ผู้ค้ำ)
+  guarantorPrefix: "", //คำนำหน้าชื่อ(ผู้ค้ำ)
+  guarantorFirstName: "", //ชื่อ(ผู้ค้ำ)
+  guarantorLastName: "", //นามสกุล(ผู้ค้ำ)
+  guarantorCitizenId: "", //เลขประจำตัวประชาชน(ผู้ค้ำ)
+  guarantorPosition: "", //ตำแหน่ง(ผู้ค้ำ)
+  guarantorPosExecutive: "", //ชื่อตำแหน่งทางการบริหาร(ผู้ค้ำ)
+  guarantorOrg: "",
+  guarantorRootId: null,
+  guarantorRoot: "",
+  guarantorOrgRootShortName: "",
+  guarantorOrgRevisionId: null,
+  posLevelguarantorId: null, //ไอดีระดับตำแหน่ง(ผู้ค้ำ)
+  posTypeguarantorId: null, //ไอดีประเภทตำแหน่ง(ผู้ค้ำ)
+  scholarshipYear: null, //ปีงบประมาณที่ได้รับทุน
+  budgetSource: "", //แหล่งงบประมาณ
+  budgetApprove: null, //งบประมาณที่ได้รับอนุมัติตลอดหลักสูตร
+  bookNo: "", //เลขที่หนังสืออนุมัติ
+  bookNoDate: null, //ลงวันที่(หนังสือ)
+  bookApproveDate: null, //หนังสืออนุมัติเมื่อวันที่
+  useOfficialTime: false, //ใช้เวลาราชการ
+  changeDetail: "", //เปลี่ยนแปลงรายละเอียด
+  scholarshipType: "", //เลือกประเภททุน
+  fundType: "", //ประเภททุน
+  contractNo: "", //เลขที่สัญญา
+  contractDate: null, //ลงวันที่(เลขที่สัญญา)
+  reportBackNo: "", //เลขที่หนังสือรายงานตัวกลับ
+  reportBackNoDate: null, //ลงวันที่(เลขที่หนังสือรายงานตัวกลับ)
+  reportBackDate: null, //รายงานตัวกลับวันที่
+  degreeLevel: "", //ระดับปริญญา
+  course: "", //หลักสูตรการศึกษา/หลักสูตรการฝึกอบรม
+  field: "", //สาขาวิชา/สาขา
+  faculty: "", //คณะ
+  educationalInstitution: "", //สถาบันการศึกษา/สถาบันการศึกษา_หน่วยงานผู้จัดการฝึกอบรม/สถานที่ไปศึกษาดูงานในประเทศ
+  startDate: null, //วันเริ่มต้นการศึกษา/วันเริ่มต้นการฝึกอบรม/วันเริ่มต้นการศึกษาดูงานในประเทศ
+  endDate: null, //วันสิ้นสุดการศึกษา/วันสิ้นสุดการฝึกอบรม/วันสิ้นสุดการศึกษาดูงานในประเทศ
+  studyPlace: "", //สถานที่ไปศึกษาดูงาน
+  studyTopic: "", //หัวข้อการไปศึกษาดูงาน/หัวข้อการไปศึกษาดูงานในประเทศ
+  studyStartDate: null, //วันเริ่มต้นการศึกษาดูงาน
+  studyEndDate: null, //วันสิ้นสุดการศึกษาดูงาน
+  studyCountry: "", //ประเทศที่ไปศึกษาดูงาน
+  studyAbroadTopic: "", //หัวข้อการไปศึกษาดูงานต่างประเทศ
+  studyAbroadStartDate: null, //วันเริ่มต้นการศึกษาดูงานต่างประเทศ
+  studyAbroadEndDate: null, //วันสิ้นสุดการศึกษาดูงานต่างประเทศ
+  totalPeriod: "", //รวมระยะเวลาในการศึกษา/รวมระยะเวลาในการฝึกอบรม
+  planType: "",
+  isNoUseBudget: false,
+});
+
+const dataPerson = reactive({
+  id: "",
+  citizenId: "",
+  name: "",
+  prefix: "",
+  firstName: "",
+  lastName: "",
+  position: "",
+  type: "",
+  level: "",
+  positionSide: "",
+  org: "-",
+});
+
+const dataGuarantor = reactive({
+  id: "",
+  prefix: "",
+  firstName: "",
+  lastName: "",
+  citizenId: "",
+  name: "",
+  position: "",
+  type: "",
+  level: "",
+  positionSide: "",
+  org: "-",
+});
+
+const scholarshipTypeOp = ref<DataOptions[]>([
+  { id: "DOMESTICE", name: "การศึกษาในประเทศ" },
+  {
+    id: "NOABROAD",
+    name: "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยงานภายนอก (หลักสูตรที่ไม่มีการไปต่างประเทศ)",
+  },
+  {
+    id: "ABROAD",
+    name: "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยงานภายนอก (หลักสูตรที่มีการไปต่างประเทศ)",
+  },
+  {
+    id: "EXECUTIVE",
+    name: " ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยงานภายนอก (หลักสูตรประเภทนักบริหาร)",
+  },
+  {
+    id: "RESEARCH",
+    name: "ศึกษา ฝึกอบรม ประชุม ดูงาน และปฏิบัติการวิจัย ณ ต่างประเทศ",
+  },
+]);
+
+const fundTypeOp = ref<DataOptions[]>([
+  { id: "FUND1", name: "ทุน 1 (ก)" },
+  { id: "FUND2", name: "ทุน 1 (ข)" },
+  { id: "FUND3", name: "ทุน 1 (ค)" },
+  { id: "FUND4", name: "ทุน 2" },
+  { id: "FUND5", name: "ทุนส่วนตัว" },
+]);
+
+function updateTotalPeriod(
+  startDate: any,
+  endDate: any,
+  toDo: boolean = false
+) {
+  if (!toDo && startDate && endDate) {
+    const start = new Date(startDate);
+    const end = new Date(endDate);
+    formBody.totalPeriod = calculateDurationYmd(start, end);
+  }
+}
+
+function changeStartDate(type: string) {
+  switch (type) {
+    case "startDate":
+      if (formBody?.startDate !== null && formBody?.endDate !== null) {
+        const startDate = new Date(formBody.startDate);
+        const endDate = new Date(formBody?.endDate);
+        if (startDate > endDate) {
+          formBody.endDate = null;
+        }
+      }
+      break;
+
+    case "studyStartDate":
+      if (
+        formBody?.studyStartDate !== null &&
+        formBody?.studyEndDate !== null
+      ) {
+        const startDate = new Date(formBody.studyStartDate);
+        const endDate = new Date(formBody?.studyEndDate);
+        if (startDate > endDate) {
+          formBody.studyEndDate = null;
+          if (formBody.scholarshipType === "NOABROAD") {
+            formBody.totalPeriod = "";
+          }
+        } else {
+          if (formBody.scholarshipType === "NOABROAD") {
+            formBody.totalPeriod = calculateDurationYmd(startDate, endDate);
+          }
+        }
+      }
+      break;
+
+    case "studyAbroadStartDate":
+      if (
+        formBody?.studyAbroadStartDate !== null &&
+        formBody?.studyAbroadEndDate !== null
+      ) {
+        const startDate = new Date(formBody.studyAbroadStartDate);
+        const endDate = new Date(formBody?.studyAbroadEndDate);
+        if (startDate > endDate) {
+          formBody.studyAbroadEndDate = null;
+        } else {
+          formBody.totalPeriod = calculateDurationYmd(startDate, endDate);
+        }
+      }
+      break;
+
+    default:
+      break;
+  }
+}
+
+function onOpenReturn() {
+  dialogReturn.value = true;
+}
+
+function onDownload() {
+  showLoader();
+  http
+    .get(config.API.developmentScholarshipReport + `/${id.value}`)
+    .then((res) => {
+      const dataList = res.data.result;
+      genReport(dataList, "ฟอร์มรายงานตัวกลับเข้ารับราชการ(ต้นแบบ)");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function clickUpload(file: any) {
+  const fileName = { fileName: file.name };
+
+  dialogConfirm(
+    $q,
+    async () => {
+      const selectedFile = file;
+      const formdata = new FormData();
+      formdata.append("file", selectedFile);
+      await http
+        .post(
+          config.API.developmentSalaryFile(
+            "ระบบพัฒนาบุคคล",
+            "ฟอร์มรายงานตัวกลับเข้ารับราชการ",
+            id.value
+          ),
+          {
+            replace: false,
+            fileList: fileName,
+          }
+        )
+        .then(async (res) => {
+          const foundKey: string | undefined = Object.keys(res.data).find(
+            (key) =>
+              res.data[key]?.fileName !== undefined &&
+              res.data[key]?.fileName !== ""
+          );
+          foundKey &&
+            uploadFileDoc(res.data[foundKey]?.uploadUrl, documentFile.value);
+        })
+        .catch((err) => {
+          messageError($q, err);
+        });
+    },
+    "ยืนยันการอัปโหลดไฟล์",
+    "ต้องการยืนยันการอัปโหลดไฟล์นี้หรือไม่ ?"
+  );
+}
+
+/**
+ * ฟังก์ชั่นสำหรับอัพโหลดไฟล์เอกสารหลักฐาน
+ */
+async function uploadFileDoc(uploadUrl: string, file: any) {
+  const Data = new FormData();
+  Data.append("file", documentFile.value);
+  showLoader();
+  await axios
+    .put(uploadUrl, file, {
+      headers: {
+        "Content-Type": file.type,
+      },
+    })
+    .then((res) => {
+      success($q, "อัปโหลดไฟล์สำเร็จ");
+      fetchDataDetail(id.value);
+      getFile();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+      documentFile.value = null;
+    });
+}
+
+function getFile() {
+  http
+    .get(
+      config.API.developmentSalaryFile(
+        "ระบบพัฒนาบุคคล",
+        "ฟอร์มรายงานตัวกลับเข้ารับราชการ",
+        id.value
+      )
+    )
+    .then((res) => {
+      if (res) {
+        const dataFile = res.data;
+        fileList.value = dataFile[0];
+      }
+    })
+    .finally(() => {});
+}
+
+function downloadFile(file: any) {
+  showLoader();
+  http
+    .get(
+      config.API.developmentSalaryFile(
+        "ระบบพัฒนาบุคคล",
+        "ฟอร์มรายงานตัวกลับเข้ารับราชการ",
+        id.value
+      ) + `/${file.fileName}`
+    )
+    .then((res) => {
+      const data = res.data.downloadUrl;
+      window.open(data, "_blank");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function fetchDataDetail(id: string) {
+  showLoader();
+  http
+    .get(config.API.developmentScholarship + `/${id}`)
+    .then((res) => {
+      const data: DataSholarship = res.data.result;
+      console.log(data);
+      formBody.rank = data.rank;
+      formBody.prefix = data.prefix;
+      formBody.firstName = data.firstName;
+      formBody.lastName = data.lastName;
+      formBody.citizenId = data.citizenId;
+      formBody.position = data.position;
+      formBody.posExecutive = data.posExecutive;
+      formBody.posLevelId = data.posLevelId;
+      formBody.posTypeId = data.posTypeId;
+      formBody.guarantorRank = data.guarantorRank;
+      formBody.guarantorPrefix = data.guarantorPrefix;
+      formBody.guarantorFirstName = data.guarantorFirstName;
+      formBody.guarantorLastName = data.guarantorLastName;
+      formBody.guarantorCitizenId = data.guarantorCitizenId;
+      formBody.guarantorPosition = data.guarantorPosition;
+      formBody.guarantorPosExecutive = data.guarantorPosExecutive;
+      formBody.guarantorOrg = data.guarantorOrg;
+      formBody.guarantorRootId = data.guarantorRootId;
+      formBody.guarantorRoot = data.guarantorRoot;
+      formBody.guarantorOrgRootShortName = data.guarantorOrgRootShortName;
+      formBody.guarantorOrgRevisionId = data.guarantorOrgRevisionId;
+      formBody.posLevelguarantorId = data.posLevelguarantorId;
+      formBody.posTypeguarantorId = data.posTypeguarantorId;
+      formBody.scholarshipYear = data.scholarshipYear;
+      formBody.budgetSource = data.budgetSource;
+      formBody.budgetApprove = data.budgetApprove;
+      formBody.bookNo = data.bookNo;
+      formBody.bookNoDate = data.bookNoDate;
+      formBody.bookApproveDate = data.bookApproveDate;
+      formBody.useOfficialTime = data.useOfficialTime
+        ? data.useOfficialTime
+        : false;
+      formBody.changeDetail = data.changeDetail;
+      formBody.scholarshipType = data.scholarshipType;
+      formBody.fundType = data.fundType;
+      formBody.contractNo = data.contractNo;
+      formBody.contractDate = data.contractDate;
+      formBody.reportBackNo = data.reportBackNo;
+      formBody.reportBackNoDate = data.reportBackNoDate;
+      formBody.reportBackDate = data.reportBackDate;
+
+      formBody.degreeLevel = data.degreeLevel;
+      formBody.course = data.course;
+      formBody.field = data.field;
+      formBody.faculty = data.faculty;
+      formBody.educationalInstitution = data.educationalInstitution;
+      formBody.startDate = data.startDate;
+      formBody.endDate = data.endDate;
+      formBody.studyPlace = data.studyPlace;
+      formBody.studyTopic = data.studyTopic;
+      formBody.studyStartDate = data.studyStartDate;
+      formBody.studyEndDate = data.studyEndDate;
+      formBody.studyCountry = data.studyCountry;
+      formBody.studyAbroadTopic = data.studyAbroadTopic;
+      formBody.studyAbroadStartDate = data.studyAbroadStartDate;
+      formBody.studyAbroadEndDate = data.studyAbroadEndDate;
+      formBody.totalPeriod = data.totalPeriod;
+      formBody.planType = data.planType ? data.planType : "";
+      formBody.isNoUseBudget = data.isNoUseBudget ? data.isNoUseBudget : false;
+
+      dataPerson.citizenId = data.citizenId ? data.citizenId : "-";
+      dataPerson.name = `${data.prefix}${data.firstName}  ${data.lastName}`;
+      dataPerson.prefix = data.prefix,
+      dataPerson.firstName = data.firstName,
+      dataPerson.lastName = data.lastName,
+      dataPerson.position = data.position ? data.position : "-";
+      dataPerson.type = data.posTypeName ? data.posTypeName : "-";
+      dataPerson.level = data.posLevelName ? data.posLevelName : "-";
+      dataPerson.positionSide = data.posExecutive ? data.posExecutive : "-";
+      dataPerson.org = data.org ? data.org : "-";
+
+      dataGuarantor.citizenId = data.guarantorCitizenId
+        ? data.guarantorCitizenId
+        : "-";
+      dataGuarantor.name = `${data.guarantorPrefix}${data.guarantorFirstName} ${data.guarantorLastName}`;
+      dataGuarantor.position = data.position ? data.position : "-";
+      dataGuarantor.type = data.posTypeguarantorName
+        ? data.posTypeguarantorName
+        : "-";
+      dataGuarantor.level = data.posLevelguarantorName
+        ? data.posLevelguarantorName
+        : "-";
+      dataGuarantor.positionSide = data.guarantorPosExecutive
+        ? data.guarantorPosExecutive
+        : "-";
+      dataGuarantor.org = data.guarantorOrg ? data.guarantorOrg : "-";
+      isStatus.value = data.status;
+      isGov.value = data.citizenId ? true : false;
+      isGuarantor.value = data.guarantorCitizenId ? true : false;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+onMounted(async () => {
+  await fetchDataDetail(id.value);
+  await getFile();
+});
+</script>
+<template>
+  <div class="col-12 row justify-center">
+    <div class="col-xs-12 col-sm-12 col-md-11">
+      <div class="toptitle text-white col-12 row items-center">
+        <q-btn
+          icon="mdi-arrow-left"
+          unelevated
+          round
+          dense
+          flat
+          color="primary"
+          class="q-mr-sm"
+          @click="router.push(`/scholarship`)"
+        />
+        รายละเอียดทุนการศึกษา/ฝึกอบรม
+      </div>
+
+      <q-card flat bordered class="col-12 q-pa-md">
+        <q-toolbar class="q-px-none q-pb-sm">
+          <div class="row q-col-gutter-x-sm full-width">
+            <div class="col-2 q-pa-none">
+              <q-btn
+                flat
+                icon="mdi-dots-vertical"
+                color="grey-8"
+                for="#cancel"
+                dense
+                round
+                unelevated
+              >
+                <q-menu>
+                  <q-list>
+                    <q-item clickable v-close-popup @click="onOpenReturn">
+                      <q-item-section>
+                        <q-item-label>
+                          <q-icon name="edit" color="edit" size="18px" />
+                          แก้ไขข้อมูลรายงานตัวกลับเข้ารับราชการ
+                        </q-item-label>
+                      </q-item-section>
+                    </q-item>
+                    <q-item clickable v-close-popup @click="onDownload">
+                      <q-item-section>
+                        <q-item-label>
+                          <q-icon name="download" color="primary" size="18px" />
+                          ดาวน์โหลดฟอร์มต้นแบบ
+                        </q-item-label>
+                      </q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-menu>
+              </q-btn>
+            </div>
+
+            <q-space />
+            <div v-if="fileList == null" class="col-3">
+              <q-file
+                for="inputFiles"
+                class="col-12"
+                outlined
+                dense
+                v-model="documentFile"
+                label="ไฟล์เอกสารหลักฐาน"
+                accept=".pdf,.xlsx,.docx,.png,.jpg"
+                clearable
+              >
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" color="primary" />
+                </template>
+                <template v-slot:after>
+                  <q-btn
+                    size="14px"
+                    v-if="documentFile"
+                    flat
+                    round
+                    dense
+                    color="add"
+                    icon="mdi-upload"
+                    @click="clickUpload(documentFile)"
+                    ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                  >
+                </template>
+              </q-file>
+            </div>
+            <div v-else class="col-2 text-right">
+              <q-btn
+                size="12px"
+                flat
+                round
+                dense
+                color="blue"
+                icon="mdi-download"
+                @click="downloadFile(fileList)"
+              >
+                <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
+              >
+            </div>
+          </div>
+        </q-toolbar>
+
+        <q-card flat style="border-radius: 5px; border: 1px solid #d6dee1">
+          <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
+            ข้อมูลราชการ
+          </div>
+          <div class="col-12"><q-separator /></div>
+          <div class="row col-12 q-col-gutter-md q-pa-md" v-if="isGov">
+            <div class="col">
+              <div class="row q-col-gutter-md">
+                <div class="col-4 text-grey">เลขประจำตัวประชาชน</div>
+                <div class="col-8 text-weight-medium">
+                  {{ dataPerson.citizenId ? dataPerson.citizenId:'-' }}
+                </div>
+                <div class="col-4 text-grey">ชื่อ-นามสกุล</div>
+                <div class="col-8 text-weight-medium">
+                  {{ dataPerson.firstName ? dataPerson.name:'-' }}
+                </div>
+                <div class="col-4 text-grey">ตำแหน่ง</div>
+                <div class="col-8 text-weight-medium">
+                  {{ dataPerson.position ? dataPerson.position:'-' }}
+                </div>
+                <div class="col-4 text-grey">ประเภทตำแหน่ง</div>
+                <div class="col-8 text-weight-medium">
+                  {{ dataPerson.type ? dataPerson.type:'-' }}
+                </div>
+              </div>
+            </div>
+            <div class="col">
+              <div class="row q-col-gutter-md">
+                <div class="col-4 text-grey">ระดับตำแหน่ง</div>
+                <div class="col-8 text-weight-medium">
+                  {{ dataPerson.level ? dataPerson.level:'-' }}
+                </div>
+                <div class="col-4 text-grey">ตำแหน่งทางการบริหาร</div>
+                <div class="col-8 text-weight-medium">
+                  {{ dataPerson.positionSide ? dataPerson.positionSide:'-' }}
+                </div>
+                <div class="col-4 text-grey">หน่วยงานที่สังกัด</div>
+                <div class="col-8 text-weight-medium">
+                  {{ dataPerson.org ? dataPerson.org:'-' }}
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="row col-12 q-pa-md" v-else>
+            <q-banner class="bg-grey-3 text-black col-12 text-center">
+              เลือกข้าราชการ
+            </q-banner>
+          </div>
+        </q-card>
+
+        <div class="row q-col-gutter-md q-mt-sm">
+          <div class="col-9">
+            <q-select
+              dense
+              readonly
+              outlined
+              v-model="formBody.scholarshipType"
+              :options="scholarshipTypeOp"
+              option-label="name"
+              option-value="id"
+              emit-value
+              map-options
+              class="inputgreen"
+              label="เลือกประเภททุน"
+            />
+          </div>
+          <div
+            class="col-3"
+            v-if="
+              formBody.scholarshipType !== '' &&
+              formBody.scholarshipType !== 'EXECUTIVE' &&
+              formBody.scholarshipType !== 'RESEARCH'
+            "
+          >
+            <q-select
+              dense
+              outlined
+              class="inputgreen"
+              v-model="formBody.fundType"
+              :options="fundTypeOp"
+              option-label="name"
+              option-value="id"
+              emit-value
+              readonly
+              map-options
+              label="ประเภททุน"
+            />
+          </div>
+
+          <div v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-12">
+            <q-radio
+              v-model="formBody.planType"
+              checked-icon="task_alt"
+              unchecked-icon="panorama_fish_eye"
+              val="INPLAN"
+              label="ในแผนฯ"
+              dense
+              disable
+            />
+            <q-radio
+              v-model="formBody.planType"
+              checked-icon="task_alt"
+              unchecked-icon="panorama_fish_eye"
+              val="OUTPLAN"
+              label="นอกแผนฯ"
+              dense
+              disable
+              class="q-pl-sm"
+            />
+          </div>
+
+          <div class="row col-12 q-col-gutter-md">
+            <div class="col-3">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formBody.scholarshipYear"
+                :locale="'th'"
+                autoApply
+                readonly
+                year-picker
+                :enableTimePicker="false"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    outlined
+                    readonly
+                    class="inputgreen"
+                    :model-value="
+                      formBody.scholarshipYear
+                        ? Number(formBody.scholarshipYear) + 543
+                        : null
+                    "
+                    :label="`${
+                      formBody.scholarshipType === 'RESEARCH'
+                        ? 'ปีงบประมาณที่ได้รับอนุมัติ '
+                        : 'ปีงบประมาณที่ได้รับทุน'
+                    }`"
+                  >
+                    <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 v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-3">
+              <q-select
+                dense
+                outlined
+                class="inputgreen"
+                label="แหล่งงบประมาณ"
+                v-model="formBody.budgetSource"
+                :options="budgetSourceOp"
+                option-label="name"
+                option-value="id"
+                emit-value
+                map-options
+                readonly
+              />
+            </div>
+            <div class="col-3">
+              <q-input
+                dense
+                outlined
+                readonly
+                class="inputgreen"
+                v-model="formBody.budgetApprove"
+                label="งบประมาณที่ได้รับอนุมัติตลอดหลักสูตร"
+                mask="###,###,###,###,###,###"
+                reverse-fill-mask
+              />
+            </div>
+            <div class="col-3">
+              <q-checkbox
+                keep-color
+                disable
+                color="primary"
+                v-model="formBody.isNoUseBudget"
+                label="ไม่ใช้งบประมาณ"
+              />
+            </div>
+          </div>
+
+          <div class="row col-12 q-col-gutter-md">
+            <div class="col-3">
+              <q-input
+                dense
+                readonly
+                outlined
+                class="inputgreen"
+                v-model="formBody.bookNo"
+                label="เลขที่หนังสืออนุมัติ"
+              />
+            </div>
+            <div class="col-3">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formBody.bookNoDate"
+                :locale="'th'"
+                readonly
+                autoApply
+                :enableTimePicker="false"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    outlined
+                    readonly
+                    class="inputgreen"
+                    :model-value="
+                      formBody.bookNoDate
+                        ? date2Thai(formBody.bookNoDate)
+                        : null
+                    "
+                    :label="`${'ลงวันที่'}`"
+                  >
+                    <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-3">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formBody.bookApproveDate"
+                :locale="'th'"
+                autoApply
+                readonly
+                :enableTimePicker="false"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    readonly
+                    outlined
+                    class="inputgreen"
+                    :model-value="
+                      formBody.bookApproveDate
+                        ? date2Thai(formBody.bookApproveDate)
+                        : null
+                    "
+                    :label="`${'หนังสืออนุมัติเมื่อวันที่'}`"
+                  >
+                    <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 v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-3">
+              <q-checkbox
+                keep-color
+                disable
+                color="primary"
+                v-model="formBody.useOfficialTime"
+                label="ใช้เวลาราชการ"
+              />
+            </div>
+          </div>
+
+          <div v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-12">
+            <q-input
+              outlined
+              dense
+              readonly
+              class="inputgreen"
+              v-model="formBody.changeDetail"
+              label="เปลี่ยนแปลงรายละเอียด"
+              rows="3"
+              type="textarea"
+            />
+          </div>
+
+          <div class="col-12" v-if="formBody.scholarshipType !== 'EXECUTIVE'">
+            <div class="row col-12 q-col-gutter-md">
+              <div class="col-3">
+                <q-input
+                  dense
+                  readonly
+                  outlined
+                  label="เลขที่สัญญา"
+                  class="inputgreen"
+                  v-model="formBody.contractNo"
+                />
+              </div>
+              <div class="col-2">
+                <datepicker
+                  readonly
+                  menu-class-name="modalfix"
+                  v-model="formBody.contractDate"
+                  :locale="'th'"
+                  autoApply
+                >
+                  <template #year="{ year }">{{ year + 543 }}</template>
+                  <template #year-overlay-value="{ value }">{{
+                    parseInt(value + 543)
+                  }}</template>
+                  <template #trigger>
+                    <q-input
+                      dense
+                      readonly
+                      outlined
+                      class="inputgreen"
+                      :model-value="
+                        formBody.contractDate
+                          ? date2Thai(formBody.contractDate)
+                          : null
+                      "
+                      :label="`${'ลงวันที่'}`"
+                    >
+                      <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 v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-3">
+                <q-input
+                  dense
+                  readonly
+                  outlined
+                  class="inputgreen"
+                  v-model="formBody.reportBackNo"
+                  label="เลขที่หนังสือรายงานตัวกลับ"
+                />
+              </div>
+              <div v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-2">
+                <datepicker
+                  readonly
+                  menu-class-name="modalfix"
+                  v-model="formBody.reportBackNoDate"
+                  :locale="'th'"
+                  autoApply
+                  :enableTimePicker="false"
+                >
+                  <template #year="{ year }">{{ year + 543 }}</template>
+                  <template #year-overlay-value="{ value }">{{
+                    parseInt(value + 543)
+                  }}</template>
+                  <template #trigger>
+                    <q-input
+                      dense
+                      readonly
+                      outlined
+                      class="inputgreen"
+                      :model-value="
+                        formBody.reportBackNoDate
+                          ? date2Thai(formBody.reportBackNoDate)
+                          : null
+                      "
+                      :label="`${'ลงวันที่'}`"
+                    >
+                      <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 v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-2">
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="formBody.reportBackDate"
+                  :locale="'th'"
+                  autoApply
+                  readonly
+                  :enableTimePicker="false"
+                >
+                  <template #year="{ year }">{{ year + 543 }}</template>
+                  <template #year-overlay-value="{ value }">{{
+                    parseInt(value + 543)
+                  }}</template>
+                  <template #trigger>
+                    <q-input
+                      dense
+                      outlined
+                      readonly
+                      class="inputgreen"
+                      :model-value="
+                        formBody.reportBackDate
+                          ? date2Thai(formBody.reportBackDate)
+                          : null
+                      "
+                      :label="`${'รายงานตัวกลับเมื่่อวันที่'}`"
+                    >
+                      <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" >
+                <q-card bordered tyle="border: 1px solid #d6dee1">
+                  <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
+                    ข้อมูลผู้ค้ำประกัน
+                  </div>
+                  <div class="col-12"><q-separator /></div>
+                  <div
+                    class="row col-12 q-col-gutter-md q-pa-md"
+                   
+                  >
+                    <div class="col">
+                      <div class="row q-col-gutter-md">
+                        <div class="col-4 text-grey">เลขประจำตัวประชาชน</div>
+                        <div class="col-8 text-weight-medium">
+                          {{ dataGuarantor.citizenId ? dataGuarantor.citizenId :'-' }}
+                        </div>
+                        <div class="col-4 text-grey">ชื่อ-นามสกุล</div>
+                        <div class="col-8 text-weight-medium">
+                          {{ dataGuarantor.firstName ? dataGuarantor.name:'-' }}
+                        </div>
+                        <div class="col-4 text-grey">ตำแหน่ง</div>
+                        <div class="col-8 text-weight-medium">
+                          {{ dataGuarantor.position ? dataGuarantor.position:'-' }}
+                        </div>
+                        <div class="col-4 text-grey">ประเภท</div>
+                        <div class="col-8 text-weight-medium">
+                          {{ dataGuarantor.type ? dataGuarantor.type :'-' }}
+                        </div>
+                      </div>
+                    </div>
+                    <div class="col">
+                      <div class="row q-col-gutter-md">
+                        <div class="col-4 text-grey">ระดับตำแหน่ง</div>
+                        <div class="col-8 text-weight-medium">
+                          {{ dataGuarantor.level ? dataGuarantor.level:'-' }}
+                        </div>
+                        <div class="col-4 text-grey">ตำแหน่งทางการบริหาร</div>
+                        <div class="col-8 text-weight-medium">
+                          {{ dataGuarantor.positionSide ? dataGuarantor.positionSide:'-' }}
+                        </div>
+                        <div class="col-4 text-grey">หน่วยงานที่สังกัด</div>
+                        <div class="col-8 text-weight-medium">
+                          {{ dataGuarantor.org ? dataGuarantor.org:'-' }}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </q-card>
+              </div>
+
+              <!-- เลือกทุน 1 -->
+              <div
+                class="col-12"
+                v-if="formBody.scholarshipType === 'DOMESTICE'"
+              >
+                <div class="row q-col-gutter-md">
+                  <div class="col-3">
+                    <q-input
+                      dense
+                      readonly
+                      outlined
+                      label="ระดับปริญญา"
+                      class="inputgreen"
+                      v-model="formBody.degreeLevel"
+                    />
+                  </div>
+                  <div class="col-3">
+                    <q-input
+                      dense
+                      readonly
+                      outlined
+                      label="หลักสูตรการศึกษา"
+                      class="inputgreen"
+                      v-model="formBody.course"
+                    />
+                  </div>
+                  <div class="col-3">
+                    <q-input
+                      dense
+                      outlined
+                      readonly
+                      label="สาขาวิชา"
+                      class="inputgreen"
+                      v-model="formBody.field"
+                    />
+                  </div>
+                  <div class="col-3">
+                    <q-input
+                      dense
+                      outlined
+                      readonly
+                      label="คณะ"
+                      class="inputgreen"
+                      v-model="formBody.faculty"
+                    />
+                  </div>
+                  <div class="col-6">
+                    <q-input
+                      dense
+                      outlined
+                      readonly
+                      label="สถาบันการศึกษา"
+                      class="inputgreen"
+                      v-model="formBody.educationalInstitution"
+                    />
+                  </div>
+                  <div class="col-3">
+                    <datepicker
+                      menu-class-name="modalfix"
+                      v-model="formBody.startDate"
+                      :locale="'th'"
+                      autoApply
+                      readonly
+                      :enableTimePicker="false"
+                      week-start="0"
+                      @update:model-value="changeStartDate('startDate')"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          dense
+                          outlined
+                          readonly
+                          class="inputgreen"
+                          :model-value="
+                            formBody.startDate
+                              ? date2Thai(formBody.startDate)
+                              : null
+                          "
+                          :label="`${'วันเริ่มต้นการศึกษา'}`"
+                        >
+                          <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-3">
+                    <datepicker
+                      menu-class-name="modalfix"
+                      v-model="formBody.endDate"
+                      :locale="'th'"
+                      readonly
+                      autoApply
+                      :enableTimePicker="false"
+                      week-start="0"
+                      :min-date="formBody.startDate"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          dense
+                          outlined
+                          readonly
+                          class="inputgreen"
+                          :model-value="
+                            formBody.endDate
+                              ? date2Thai(formBody.endDate)
+                              : null
+                          "
+                          :label="`${'วันสิ้นสุดการศึกษา'}`"
+                        >
+                          <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-6">
+                    <q-input
+                      dense
+                      readonly
+                      outlined
+                      label="สถานที่ไปศึกษาดูงาน"
+                      class="inputgreen"
+                      v-model="formBody.studyPlace"
+                    />
+                  </div>
+                  <div class="col-6">
+                    <q-input
+                      dense
+                      readonly
+                      outlined
+                      label="หัวข้อการไปศึกษาดูงาน"
+                      class="inputgreen"
+                      v-model="formBody.studyTopic"
+                    />
+                  </div>
+                  <div class="col-3">
+                    <datepicker
+                      readonly
+                      menu-class-name="modalfix"
+                      v-model="formBody.studyStartDate"
+                      :locale="'th'"
+                      autoApply
+                      :enableTimePicker="false"
+                      week-start="0"
+                      @update:model-value="changeStartDate('studyStartDate')"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          dense
+                          outlined
+                          readonly
+                          class="inputgreen"
+                          :model-value="
+                            formBody.studyStartDate
+                              ? date2Thai(formBody.studyStartDate)
+                              : null
+                          "
+                          :label="`${'วันเริ่มต้นการศึกษาดูงาน'}`"
+                        >
+                          <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-3">
+                    <datepicker
+                      menu-class-name="modalfix"
+                      readonly
+                      v-model="formBody.studyEndDate"
+                      :locale="'th'"
+                      autoApply
+                      :enableTimePicker="false"
+                      week-start="0"
+                      :min-date="formBody.studyStartDate"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          dense
+                          outlined
+                          readonly
+                          class="inputgreen"
+                          :model-value="
+                            formBody.studyEndDate
+                              ? date2Thai(formBody.studyEndDate)
+                              : null
+                          "
+                          :label="`${'วันสิ้นสุดการศึกษาดูงาน'}`"
+                        >
+                          <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-6"></div>
+                  <div class="col-6">
+                    <q-input
+                      dense
+                      readonly
+                      outlined
+                      label="ประเทศที่ไปศึกษาดูงาน"
+                      class="inputgreen"
+                      v-model="formBody.studyCountry"
+                    />
+                  </div>
+                  <div class="col-6">
+                    <q-input
+                      dense
+                      readonly
+                      outlined
+                      label="หัวข้อการไปศึกษาดูงานต่างประเทศ"
+                      class="inputgreen"
+                      v-model="formBody.studyAbroadTopic"
+                    />
+                  </div>
+                  <div class="col-3">
+                    <datepicker
+                      readonly
+                      menu-class-name="modalfix"
+                      v-model="formBody.studyAbroadStartDate"
+                      :locale="'th'"
+                      autoApply
+                      :enableTimePicker="false"
+                      week-start="0"
+                      @update:model-value="
+                        changeStartDate('studyAbroadStartDate')
+                      "
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          dense
+                          readonly
+                          outlined
+                          class="inputgreen"
+                          :model-value="
+                            formBody.studyAbroadStartDate
+                              ? date2Thai(formBody.studyAbroadStartDate)
+                              : null
+                          "
+                          :label="`${'วันเริ่มต้นการศึกษาดูงานต่างประเทศ'}`"
+                        >
+                          <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-3">
+                    <datepicker
+                      readonly
+                      menu-class-name="modalfix"
+                      v-model="formBody.studyAbroadEndDate"
+                      :locale="'th'"
+                      autoApply
+                      :enableTimePicker="false"
+                      week-start="0"
+                      :min-date="formBody.studyAbroadStartDate"
+                      @update:model-value="
+                        updateTotalPeriod(
+                          formBody.studyAbroadStartDate,
+                          formBody.studyAbroadEndDate
+                        )
+                      "
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          dense
+                          readonly
+                          outlined
+                          class="inputgreen"
+                          :model-value="
+                            formBody.studyAbroadEndDate
+                              ? date2Thai(formBody.studyAbroadEndDate)
+                              : null
+                          "
+                          :label="`${'วันสิ้นสุดการศึกษาดูงานต่างประเทศ'}`"
+                        >
+                          <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-3">
+                    <q-input
+                      dense
+                      readonly
+                      outlined
+                      label="รวมระยะเวลาในการศึกษา"
+                      class="inputgreen"
+                      v-model="formBody.totalPeriod"
+                    />
+                  </div>
+                </div>
+              </div>
+
+              <!-- เลือกทุน 2 -->
+              <div
+                class="col-12"
+                v-else-if="formBody.scholarshipType === 'NOABROAD'"
+              >
+                <div class="row q-col-gutter-md">
+                  <div class="col-6">
+                    <q-input
+                      dense
+                      outlined
+                      readonly
+                      label="หลักสูตรการฝึกอบรม"
+                      class="inputgreen"
+                      v-model="formBody.course"
+                    />
+                  </div>
+                  <div class="col-6">
+                    <q-input
+                      dense
+                      readonly
+                      outlined
+                      label="สาขา"
+                      class="inputgreen"
+                      v-model="formBody.field"
+                    />
+                  </div>
+                  <div class="col-6">
+                    <q-input
+                      readonly
+                      dense
+                      outlined
+                      label="สถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม"
+                      class="inputgreen"
+                      v-model="formBody.educationalInstitution"
+                    />
+                  </div>
+                  <div class="col-3">
+                    <datepicker
+                      readonly
+                      menu-class-name="modalfix"
+                      v-model="formBody.startDate"
+                      :locale="'th'"
+                      autoApply
+                      :enableTimePicker="false"
+                      week-start="0"
+                      @update:model-value="changeStartDate('startDate')"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          dense
+                          readonly
+                          outlined
+                          class="inputgreen"
+                          :model-value="
+                            formBody.startDate
+                              ? date2Thai(formBody.startDate)
+                              : null
+                          "
+                          :label="`${'วันเริ่มต้นการฝึกอบรม'}`"
+                        >
+                          <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-3">
+                    <datepicker
+                      readonly
+                      menu-class-name="modalfix"
+                      v-model="formBody.endDate"
+                      :locale="'th'"
+                      autoApply
+                      :enableTimePicker="false"
+                      week-start="0"
+                      :min-date="formBody.startDate"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          dense
+                          outlined
+                          readonly
+                          class="inputgreen"
+                          :model-value="
+                            formBody.endDate
+                              ? date2Thai(formBody.endDate)
+                              : null
+                          "
+                          :label="`${'วันสิ้นสุดการฝึกอบรม'}`"
+                        >
+                          <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-6">
+                    <q-input
+                      dense
+                      readonly
+                      outlined
+                      label="สถานที่ไปศึกษาดูงาน"
+                      class="inputgreen"
+                      v-model="formBody.studyPlace"
+                    />
+                  </div>
+                  <div class="col-6">
+                    <q-input
+                      dense
+                      readonly
+                      outlined
+                      label="หัวข้อการไปศึกษาดูงาน"
+                      class="inputgreen"
+                      v-model="formBody.studyTopic"
+                    />
+                  </div>
+                  <div class="col-3">
+                    <datepicker
+                      menu-class-name="modalfix"
+                      v-model="formBody.studyStartDate"
+                      :locale="'th'"
+                      autoApply
+                      readonly
+                      :enableTimePicker="false"
+                      week-start="0"
+                      @update:model-value="changeStartDate('studyStartDate')"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          dense
+                          outlined
+                          readonly
+                          class="inputgreen"
+                          :model-value="
+                            formBody.studyStartDate
+                              ? date2Thai(formBody.studyStartDate)
+                              : null
+                          "
+                          :label="`${'วันเริ่มต้นการศึกษาดูงาน'}`"
+                        >
+                          <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-3">
+                    <datepicker
+                      readonly
+                      menu-class-name="modalfix"
+                      v-model="formBody.studyEndDate"
+                      :locale="'th'"
+                      autoApply
+                      :enableTimePicker="false"
+                      week-start="0"
+                      :min-date="formBody.studyStartDate"
+                      @update:model-value="
+                        updateTotalPeriod(
+                          formBody.studyStartDate,
+                          formBody.studyEndDate
+                        )
+                      "
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          dense
+                          outlined
+                          readonly
+                          class="inputgreen"
+                          :model-value="
+                            formBody.studyEndDate
+                              ? date2Thai(formBody.studyEndDate)
+                              : null
+                          "
+                          :label="`${'วันสิ้นสุดการศึกษาดูงาน'}`"
+                        >
+                          <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-3">
+                    <q-input
+                      dense
+                      readonly
+                      outlined
+                      label="รวมระยะเวลาในการฝึกอบรม"
+                      class="inputgreen"
+                      v-model="formBody.totalPeriod"
+                    />
+                  </div>
+                </div>
+              </div>
+
+              <!-- เลือกทุน 3 -->
+              <div
+                class="col-12"
+                v-else-if="formBody.scholarshipType === 'ABROAD'"
+              >
+                <div class="row q-col-gutter-md">
+                  <div class="col-6">
+                    <q-input
+                      dense
+                      readonly
+                      outlined
+                      label="หลักสูตรการฝึกอบรม"
+                      class="inputgreen"
+                      v-model="formBody.course"
+                    />
+                  </div>
+                  <div class="col-6">
+                    <q-input
+                      dense
+                      outlined
+                      readonly
+                      label="สาขา"
+                      class="inputgreen"
+                      v-model="formBody.field"
+                    />
+                  </div>
+                  <div class="col-6">
+                    <q-input
+                      dense
+                      readonly
+                      outlined
+                      label="สถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม"
+                      class="inputgreen"
+                      v-model="formBody.educationalInstitution"
+                    />
+                  </div>
+                  <div class="col-3">
+                    <datepicker
+                      readonly
+                      menu-class-name="modalfix"
+                      v-model="formBody.startDate"
+                      :locale="'th'"
+                      autoApply
+                      :enableTimePicker="false"
+                      week-start="0"
+                      @update:model-value="changeStartDate('startDate')"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          readonly
+                          dense
+                          outlined
+                          class="inputgreen"
+                          :model-value="
+                            formBody.startDate
+                              ? date2Thai(formBody.startDate)
+                              : null
+                          "
+                          :label="`${'วันเริ่มต้นการฝึกอบรม'}`"
+                        >
+                          <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-3">
+                    <datepicker
+                      readonly
+                      menu-class-name="modalfix"
+                      v-model="formBody.endDate"
+                      :locale="'th'"
+                      autoApply
+                      :enableTimePicker="false"
+                      week-start="0"
+                      :min-date="formBody.startDate"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          dense
+                          readonly
+                          outlined
+                          class="inputgreen"
+                          :model-value="
+                            formBody.endDate
+                              ? date2Thai(formBody.endDate)
+                              : null
+                          "
+                          :label="`${'วันสิ้นสุดการฝึกอบรม'}`"
+                        >
+                          <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-6">
+                    <q-input
+                      dense
+                      readonly
+                      outlined
+                      label="สถานที่ไปศึกษาดูงานในประเทศ"
+                      class="inputgreen"
+                      v-model="formBody.studyPlace"
+                    />
+                  </div>
+                  <div class="col-6">
+                    <q-input
+                      dense
+                      readonly
+                      outlined
+                      label="หัวข้อการไปศึกษาดูงานในประเทศ"
+                      class="inputgreen"
+                      v-model="formBody.studyTopic"
+                    />
+                  </div>
+                  <div class="col-3">
+                    <datepicker
+                      readonly
+                      menu-class-name="modalfix"
+                      v-model="formBody.studyStartDate"
+                      :locale="'th'"
+                      autoApply
+                      :enableTimePicker="false"
+                      week-start="0"
+                      @update:model-value="changeStartDate('studyStartDate')"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          dense
+                          readonly
+                          outlined
+                          class="inputgreen"
+                          :model-value="
+                            formBody.studyStartDate
+                              ? date2Thai(formBody.studyStartDate)
+                              : null
+                          "
+                          :label="`${'วันเริ่มต้นการศึกษาดูงานในประเทศ'}`"
+                        >
+                          <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-3">
+                    <datepicker
+                      readonly
+                      menu-class-name="modalfix"
+                      v-model="formBody.studyEndDate"
+                      :locale="'th'"
+                      autoApply
+                      :enableTimePicker="false"
+                      week-start="0"
+                      :min-date="formBody.studyStartDate"
+                      @update:model-value="
+                        updateTotalPeriod(
+                          formBody.studyStartDate,
+                          formBody.studyEndDate,
+                          true
+                        )
+                      "
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          dense
+                          readonly
+                          outlined
+                          class="inputgreen"
+                          :model-value="
+                            formBody.studyEndDate
+                              ? date2Thai(formBody.studyEndDate)
+                              : null
+                          "
+                          :label="`${'วันสิ้นสุดการศึกษาดูงานในประเทศ'}`"
+                        >
+                          <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-6"></div>
+                  <div class="col-6">
+                    <q-input
+                      dense
+                      readonly
+                      outlined
+                      label="ประเทศที่เดินทางไปศึกษาดูงาน"
+                      class="inputgreen"
+                      v-model="formBody.studyCountry"
+                    />
+                  </div>
+                  <div class="col-6">
+                    <q-input
+                      dense
+                      readonly
+                      outlined
+                      label="หัวข้อการไปศึกษาดูงานต่างประเทศ"
+                      class="inputgreen"
+                      v-model="formBody.studyAbroadTopic"
+                    />
+                  </div>
+                  <div class="col-3">
+                    <datepicker
+                      readonly
+                      menu-class-name="modalfix"
+                      v-model="formBody.studyAbroadStartDate"
+                      :locale="'th'"
+                      autoApply
+                      :enableTimePicker="false"
+                      week-start="0"
+                      @update:model-value="
+                        changeStartDate('studyAbroadStartDate')
+                      "
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          dense
+                          readonly
+                          outlined
+                          class="inputgreen"
+                          :model-value="
+                            formBody.studyAbroadStartDate
+                              ? date2Thai(formBody.studyAbroadStartDate)
+                              : null
+                          "
+                          :label="`${'วันเริ่มต้นการศึกษาดูงานต่างประเทศ'}`"
+                        >
+                          <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-3">
+                    <datepicker
+                      readonly
+                      menu-class-name="modalfix"
+                      v-model="formBody.studyAbroadEndDate"
+                      :locale="'th'"
+                      autoApply
+                      :enableTimePicker="false"
+                      week-start="0"
+                      :min-date="formBody.studyAbroadStartDate"
+                      @update:model-value="
+                        updateTotalPeriod(
+                          formBody.studyAbroadStartDate,
+                          formBody.studyAbroadEndDate
+                        )
+                      "
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          dense
+                          readonly
+                          outlined
+                          class="inputgreen"
+                          :model-value="
+                            formBody.studyAbroadEndDate
+                              ? date2Thai(formBody.studyAbroadEndDate)
+                              : null
+                          "
+                          :label="`${'วันสิ้นสุดการศึกษาดูงานต่างประเทศ'}`"
+                        >
+                          <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-3">
+                    <q-input
+                      readonly
+                      dense
+                      outlined
+                      label="รวมระยะเวลาในการศึกษา"
+                      class="inputgreen"
+                      v-model="formBody.totalPeriod"
+                    />
+                  </div>
+                </div>
+              </div>
+
+              <!-- เลือกทุน 5 -->
+              <div
+                class="col-12"
+                v-else-if="formBody.scholarshipType === 'RESEARCH'"
+              >
+                <div class="row q-col-gutter-md">
+                  <div class="col-3">
+                    <q-select
+                      dense
+                      readonly
+                      outlined
+                      class="inputgreen"
+                      label="ประเภทการพัฒนา"
+                      v-model="formBody.studyTopic"
+                      :options="[
+                        'ศึกษา',
+                        'ฝึกอบรม',
+                        'ประชุม',
+                        'ดูงาน',
+                        'ปฏิบัติการวิจัย',
+                      ]"
+                    />
+                  </div>
+
+                  <div class="col-3">
+                    <q-input
+                      dense
+                      readonly
+                      outlined
+                      label="ระดับปริญญา"
+                      class="inputgreen"
+                      v-model="formBody.degreeLevel"
+                    />
+                  </div>
+
+                  <div class="col-6">
+                    <q-input
+                      dense
+                      readonly
+                      outlined
+                      class="inputgreen"
+                      label="หลักสูตรการฝึกอบรม"
+                      v-model="formBody.course"
+                    />
+                  </div>
+
+                  <div class="col-3">
+                    <q-input
+                      dense
+                      readonly
+                      outlined
+                      label="สาขาวิชา"
+                      class="inputgreen"
+                      v-model="formBody.field"
+                    />
+                  </div>
+
+                  <div class="col-3">
+                    <q-input
+                      dense
+                      readonly
+                      outlined
+                      label="คณะ"
+                      class="inputgreen"
+                      v-model="formBody.faculty"
+                    />
+                  </div>
+
+                  <div class="col-6">
+                    <q-input
+                      readonly
+                      dense
+                      outlined
+                      label="สถาบันการศึกษา/หน่วยงานผู้จัด"
+                      class="inputgreen"
+                      v-model="formBody.studyPlace"
+                    />
+                  </div>
+
+                  <div class="col-3">
+                    <datepicker
+                      readonly
+                      menu-class-name="modalfix"
+                      v-model="formBody.startDate"
+                      :locale="'th'"
+                      autoApply
+                      :enableTimePicker="false"
+                      week-start="0"
+                      @update:model-value="changeStartDate('startDate')"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          dense
+                          outlined
+                          readonly
+                          class="inputgreen"
+                          :model-value="
+                            formBody.startDate
+                              ? date2Thai(formBody.startDate)
+                              : null
+                          "
+                          :label="`${'วันเริ่มต้นการฝึกอบรม'}`"
+                        >
+                          <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-3">
+                    <datepicker
+                      readonly
+                      menu-class-name="modalfix"
+                      v-model="formBody.endDate"
+                      :locale="'th'"
+                      autoApply
+                      :enableTimePicker="false"
+                      week-start="0"
+                      :min-date="formBody.startDate"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          dense
+                          outlined
+                          readonly
+                          class="inputgreen"
+                          :model-value="
+                            formBody.endDate
+                              ? date2Thai(formBody.endDate)
+                              : null
+                          "
+                          :label="`${'วันสิ้นสุดการฝึกอบรม'}`"
+                        >
+                          <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-6">
+                    <q-input
+                      dense
+                      readonly
+                      outlined
+                      label="ประเทศที่ไปศึกษา ฝึกอบรม ประชุม ดูงาน และปฏิบัติการวิจัย"
+                      class="inputgreen"
+                      v-model="formBody.studyCountry"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- เลือกทุน 4 -->
+          <div
+            class="col-12"
+            v-else-if="formBody.scholarshipType === 'EXECUTIVE'"
+          >
+            <div class="row q-col-gutter-md">
+              <div class="col-6">
+                <q-input
+                  readonly
+                  dense
+                  outlined
+                  class="inputgreen"
+                  label="หลักสูตรการฝึกอบรม"
+                  v-model="formBody.course"
+                />
+              </div>
+              <div class="col-6">
+                <q-input
+                  dense
+                  readonly
+                  outlined
+                  class="inputgreen"
+                  label="สถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม"
+                  v-model="formBody.educationalInstitution"
+                />
+              </div>
+              <div class="col-3">
+                <datepicker
+                  readonly
+                  menu-class-name="modalfix"
+                  v-model="formBody.startDate"
+                  :locale="'th'"
+                  autoApply
+                  :enableTimePicker="false"
+                  week-start="0"
+                  @update:model-value="changeStartDate('startDate')"
+                >
+                  >
+                  <template #year="{ year }">{{ year + 543 }}</template>
+                  <template #year-overlay-value="{ value }">{{
+                    parseInt(value + 543)
+                  }}</template>
+                  <template #trigger>
+                    <q-input
+                      dense
+                      readonly
+                      outlined
+                      class="inputgreen"
+                      :model-value="
+                        formBody.startDate
+                          ? date2Thai(formBody.startDate)
+                          : null
+                      "
+                      :label="`${'วันเริ่มต้นการฝึกอบรม'}`"
+                    >
+                      <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-3">
+                <datepicker
+                  readonly
+                  menu-class-name="modalfix"
+                  v-model="formBody.endDate"
+                  :locale="'th'"
+                  autoApply
+                  :enableTimePicker="false"
+                  week-start="0"
+                  :min-date="formBody.startDate"
+                >
+                  <template #year="{ year }">{{ year + 543 }}</template>
+                  <template #year-overlay-value="{ value }">{{
+                    parseInt(value + 543)
+                  }}</template>
+                  <template #trigger>
+                    <q-input
+                      dense
+                      outlined
+                      readonly
+                      class="inputgreen"
+                      :model-value="
+                        formBody.endDate ? date2Thai(formBody.endDate) : null
+                      "
+                      :label="`${'วันสิ้นสุดการฝึกอบรม'}`"
+                    >
+                      <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-6"></div>
+              <div class="col-6">
+                <q-input
+                  dense
+                  readonly
+                  outlined
+                  label="สถานที่ไปศึกษาดูงานในประเทศ"
+                  class="inputgreen"
+                  v-model="formBody.studyPlace"
+                />
+              </div>
+              <div class="col-6">
+                <q-input
+                  dense
+                  readonly
+                  outlined
+                  label="หัวข้อการไปศึกษาดูงานในประเทศ"
+                  class="inputgreen"
+                  v-model="formBody.studyTopic"
+                />
+              </div>
+              <div class="col-3">
+                <datepicker
+                  readonly
+                  menu-class-name="modalfix"
+                  v-model="formBody.studyStartDate"
+                  :locale="'th'"
+                  autoApply
+                  :enableTimePicker="false"
+                  week-start="0"
+                  @update:model-value="changeStartDate('studyAbroadStartDate')"
+                >
+                  <template #year="{ year }">{{ year + 543 }}</template>
+                  <template #year-overlay-value="{ value }">{{
+                    parseInt(value + 543)
+                  }}</template>
+                  <template #trigger>
+                    <q-input
+                      dense
+                      readonly
+                      outlined
+                      class="inputgreen"
+                      :model-value="
+                        formBody.studyStartDate
+                          ? date2Thai(formBody.studyStartDate)
+                          : null
+                      "
+                      :label="`${'วันเริ่มต้นการศึกษาดูงานในประเทศ'}`"
+                    >
+                      <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-3">
+                <datepicker
+                  readonly
+                  menu-class-name="modalfix"
+                  v-model="formBody.studyEndDate"
+                  :locale="'th'"
+                  autoApply
+                  :enableTimePicker="false"
+                  week-start="0"
+                  :min-date="formBody.studyStartDate"
+                  @update:model-value="
+                    updateTotalPeriod(
+                      formBody.studyStartDate,
+                      formBody.studyEndDate
+                    )
+                  "
+                >
+                  <template #year="{ year }">{{ year + 543 }}</template>
+                  <template #year-overlay-value="{ value }">{{
+                    parseInt(value + 543)
+                  }}</template>
+                  <template #trigger>
+                    <q-input
+                      dense
+                      readonly
+                      outlined
+                      class="inputgreen"
+                      :model-value="
+                        formBody.studyEndDate
+                          ? date2Thai(formBody.studyEndDate)
+                          : null
+                      "
+                      :label="`${'วันสิ้นสุดการศึกษาดูงานในประเทศ'}`"
+                    >
+                      <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-6"></div>
+              <div class="col-6">
+                <q-input
+                  dense
+                  readonly
+                  outlined
+                  label="ประเทศที่ไปศึกษาดูงาน"
+                  class="inputgreen"
+                  v-model="formBody.studyCountry"
+                />
+              </div>
+              <div class="col-6">
+                <q-input
+                  dense
+                  outlined
+                  readonly
+                  label="หัวข้อการไปศึกษาดูงานต่างประเทศ"
+                  class="inputgreen"
+                  v-model="formBody.studyAbroadTopic"
+                />
+              </div>
+              <div class="col-3">
+                <datepicker
+                  readonly
+                  menu-class-name="modalfix"
+                  v-model="formBody.studyAbroadStartDate"
+                  :locale="'th'"
+                  autoApply
+                  :enableTimePicker="false"
+                  week-start="0"
+                  @update:model-value="changeStartDate('studyAbroadStartDate')"
+                >
+                  <template #year="{ year }">{{ year + 543 }}</template>
+                  <template #year-overlay-value="{ value }">{{
+                    parseInt(value + 543)
+                  }}</template>
+                  <template #trigger>
+                    <q-input
+                      dense
+                      readonly
+                      outlined
+                      class="inputgreen"
+                      :model-value="
+                        formBody.studyAbroadStartDate
+                          ? date2Thai(formBody.studyAbroadStartDate)
+                          : null
+                      "
+                      :label="`${'วันเริ่มต้นการศึกษาดูงานต่างประเทศ'}`"
+                    >
+                      <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-3">
+                <datepicker
+                  readonly
+                  menu-class-name="modalfix"
+                  v-model="formBody.studyAbroadEndDate"
+                  :locale="'th'"
+                  autoApply
+                  :enableTimePicker="false"
+                  week-start="0"
+                  :min-date="formBody.studyAbroadStartDate"
+                  @update:model-value="
+                    updateTotalPeriod(
+                      formBody.studyAbroadStartDate,
+                      formBody.studyAbroadEndDate
+                    )
+                  "
+                >
+                  <template #year="{ year }">{{ year + 543 }}</template>
+                  <template #year-overlay-value="{ value }">{{
+                    parseInt(value + 543)
+                  }}</template>
+                  <template #trigger>
+                    <q-input
+                      dense
+                      readonly
+                      outlined
+                      class="inputgreen"
+                      :model-value="
+                        formBody.studyAbroadEndDate
+                          ? date2Thai(formBody.studyAbroadEndDate)
+                          : null
+                      "
+                      :label="`${'วันสิ้นสุดการศึกษาดูงานต่างประเทศ'}`"
+                    >
+                      <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-3">
+                <q-input
+                  readonly
+                  dense
+                  outlined
+                  label="รวมระยะเวลาในการฝึกอบรม "
+                  class="inputgreen"
+                  v-model="formBody.totalPeriod"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </q-card>
+    </div>
+  </div>
+
+  <DialogReturn v-model:modal="dialogReturn" />
+</template>
diff --git a/src/modules/09_scholarship/views/main.vue b/src/modules/09_scholarship/views/main.vue
new file mode 100644
index 0000000..5ab249b
--- /dev/null
+++ b/src/modules/09_scholarship/views/main.vue
@@ -0,0 +1,363 @@
+<script setup lang="ts">
+import { ref, onMounted, watch } from "vue";
+import { useRouter } from "vue-router";
+import { useQuasar, type QTableProps } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+import type { DataOptions } from "@/modules/09_scholarship/interface/index/Main";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+const mixin = useCounterMixin();
+const { date2Thai, showLoader, hideLoader, messageError } = mixin;
+const router = useRouter();
+
+const $q = useQuasar();
+const filterKeyword = ref<string>("");
+
+const profilId = ref<string>("");
+const currentPage = ref<number>(1);
+const maxPage = ref<number>(1);
+const page = ref<number>(1);
+const rowsPerPage = ref<number>(10);
+
+const rows = ref<any>();
+const year = ref<number>(0);
+const type = ref<string>("DOMESTICE");
+const scholarshipTypeOp = ref<DataOptions[]>([
+  { id: "DOMESTICE", name: "การศึกษาในประเทศ" },
+  {
+    id: "NOABROAD",
+    name: "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยงานภายนอก (หลักสูตรที่ไม่มีการไปต่างประเทศ)",
+  },
+  {
+    id: "ABROAD",
+    name: "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยงานภายนอก (หลักสูตรที่มีการไปต่างประเทศ)",
+  },
+  {
+    id: "EXECUTIVE",
+    name: " ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยงานภายนอก (หลักสูตรประเภทนักบริหาร)",
+  },
+  {
+    id: "RESEARCH",
+    name: "ศึกษา ฝึกอบรม ประชุม ดูงาน และปฏิบัติการวิจัย ณ ต่างประเทศ",
+  },
+]);
+
+/**
+ * ตั้งค่า pagination
+ */
+const pagination = ref({
+  sortBy: "lastUpdatedAt",
+  descending: true,
+  page: page.value,
+  rowsPerPage: rowsPerPage.value,
+});
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "scholarshipYear",
+    align: "left",
+    label: "ปีงบประมาณที่ได้รับทุน ",
+    sortable: true,
+    field: "scholarshipYear",
+    headerStyle: "font-size: 14px ;width:20%",
+    style: "font-size: 14px",
+  },
+  {
+    name: "scholarshipType",
+    align: "left",
+    label: "ประเภททุน",
+    sortable: true,
+    field: "scholarshipType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const visibleColumns = ref<string[]>(["scholarshipYear", "scholarshipType"]);
+
+/** ดึงข้อมูล */
+function getData() {
+  http
+    .get(config.API.developmentScholarship + `/user/${profilId.value}?year=${year.value}&type=${type.value}`)
+    .then((res) => {
+      rows.value = res.data.result;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {});
+}
+
+function onEdit(id: string) {
+  router.push(`/scholarship/${id}`);
+}
+
+watch(
+  () => currentPage.value,
+  () => {
+    rowsPerPage.value = pagination.value.rowsPerPage;
+    getData();
+  }
+);
+
+watch(
+  () => pagination.value.rowsPerPage,
+  () => {
+    rowsPerPage.value = pagination.value.rowsPerPage;
+    currentPage.value = 1;
+    getData();
+  }
+);
+
+function getProfileId() {
+  showLoader();
+  http
+    .get(config.API.profilePosition())
+    .then((res) => {
+      profilId.value = res.data.result.profileId;
+      getData();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function convertType(val: string) {
+  switch (val) {
+    case "DOMESTICE":
+      return "การศึกษาในประเทศ";
+    case "NOABROAD":
+      return "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรที่ไม่มีการไปต่างประเทศ)";
+    case "ABROAD":
+      return "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรที่มีการไปต่างประเทศ)";
+    case "EXECUTIVE":
+      return "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรประเภทนักบริหาร)";
+    case "RESEARCH":
+      return "ศึกษา ฝึกอบรม ประชุม ดูงาน และปฏิบัติการวิจัย ณ ต่างประเทศ";
+  }
+}
+
+onMounted(async () => {
+  getProfileId();
+});
+</script>
+
+<template>
+  <div class="col-12 row justify-center">
+    <div class="col-xs-12 col-sm-12 col-md-11">
+      <div class="toptitle text-white col-12 row items-center">
+        <q-btn
+          icon="mdi-arrow-left"
+          unelevated
+          round
+          dense
+          flat
+          color="primary"
+          class="q-mr-sm"
+          @click="router.push(`/`)"
+        />
+        รายการทุนการศึกษา/ฝึกอบรม
+      </div>
+      <div class="col-12">
+        <q-card bordered class="q-pa-md">
+          <q-toolbar style="padding: 0">
+            <div class="row q-gutter-sm">
+              <datepicker
+                style="width: 150px"
+                menu-class-name="modalfix"
+                v-model="year"
+                :locale="'th'"
+                autoApply
+                year-picker
+                :enableTimePicker="false"
+                @update:model-value="getData()"
+              >
+                <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="year === 0 ? 'ทั้งหมด' : Number(year) + 543"
+                    :label="`${'ปีงบประมาณ'}`"
+                  >
+                    <template v-if="year" v-slot:append>
+                      <q-icon
+                        name="cancel"
+                        @click.stop.prevent="(year = 0), getData()"
+                        class="cursor-pointer"
+                      />
+                    </template>
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+              <q-select
+                dense
+                outlined
+                v-model="type"
+                :options="scholarshipTypeOp"
+                emit-value
+                map-options
+                option-value="id"
+                option-label="name"
+                label="เลือกประเภททุน"
+                @update:model-value="getData()"
+                style="width: 350px"
+              />
+              <!-- <q-btn
+                flat
+                round
+                color="primary"
+                icon="add"
+                @click="router.push(`/KPI/add`)"
+              >
+                <q-tooltip> เพิ่มข้อมูล </q-tooltip>
+              </q-btn> -->
+            </div>
+
+            <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
+            hide-pagination
+            class="custom-table2"
+            :visible-columns="visibleColumns"
+            v-model:pagination="pagination"
+            :rows-per-page-options="[10, 25, 50, 100]"
+          >
+            <template v-slot:pagination="scope">
+              <q-pagination
+                v-model="currentPage"
+                active-color="primary"
+                color="dark"
+                :max="Number(maxPage)"
+                size="sm"
+                boundary-links
+                direction-links
+              ></q-pagination>
+            </template>
+            <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-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 == 'scholarshipYear'">
+                    {{ col.value ? col.value + 543 : "-" }}
+                  </div>
+                  <div v-else-if="col.name == 'scholarshipType'">
+                    {{ col.value ? convertType(col.value) : "-" }}
+                  </div>
+                  <div v-else>
+                    {{ col.value ? 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>
diff --git a/src/router/index.ts b/src/router/index.ts
index d0f7fcb..c3b8dbb 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -11,6 +11,8 @@ import ModuleLeave from "@/modules/05_leave/router";
 import ModuEvaluate from "@/modules/06_evaluate/router";
 import ModuAppealComplain from "@/modules/07_appealComplain/router";
 import ModuleSupport from "@/modules/00_support/router";
+import ModuleKPI from "@/modules/08_KPI/router";
+import ModuleScholarship from "@/modules/09_scholarship/router";
 // TODO: ใช้หรือไม่?
 import keycloak from "@/plugins/keycloak";
 
@@ -47,6 +49,8 @@ const router = createRouter({
         ...ModuEvaluate,
         ...ModuAppealComplain,
         ...ModuleSupport,
+        ...ModuleKPI,
+        ...ModuleScholarship,
       ],
     },
   ],
diff --git a/src/stores/mixin.ts b/src/stores/mixin.ts
index a091e50..5b92180 100644
--- a/src/stores/mixin.ts
+++ b/src/stores/mixin.ts
@@ -988,7 +988,7 @@ export const useCounterMixin = defineStore("mixin", () => {
    * @param endDate วันสิ้นสุด format MM-DD-YYYY"
    * @returns ผลการคำนวน ปี เดือน วัน ในรูปแบบ 1 ปี 10 เดือน 5 วัน
    */
-  function calculateDurationYmd(startDate: string, endDate: string) {
+  function calculateDurationYmd(startDate: any, endDate: any) {
     if (startDate && endDate) {
       const start = new Date(startDate);
       const end = new Date(endDate);
diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index 5de1a24..5035a60 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -90,7 +90,7 @@ const fetchlistNotification = async (index: number, type: string) => {
 const doLogout = () => {
   $q.dialog({
     title: "ยืนยันการออกจากระบบ",
-    message: `ต้องการออกจากระบบใช้หรือไม่?`,
+    message: `ต้องการออกจากระบบใช่หรือไม่?`,
     cancel: "ยกเลิก",
     ok: "ยืนยัน",
     persistent: true,