diff --git a/src/modules/09_leave/components/1_Work/DialogDetail.vue b/src/modules/09_leave/components/1_Work/DialogDetail.vue
index e018e379b..647682135 100644
--- a/src/modules/09_leave/components/1_Work/DialogDetail.vue
+++ b/src/modules/09_leave/components/1_Work/DialogDetail.vue
@@ -4,6 +4,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import { useQuasar } from "quasar";
 
+/** import Type*/
 import type { FormDetail } from "@/modules/09_leave/interface/response/work";
 
 /** importStores */
diff --git a/src/modules/09_leave/components/1_Work/TableList.vue b/src/modules/09_leave/components/1_Work/TableList.vue
index b23e09053..27b8930b1 100644
--- a/src/modules/09_leave/components/1_Work/TableList.vue
+++ b/src/modules/09_leave/components/1_Work/TableList.vue
@@ -85,6 +85,10 @@ watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
   updateProp(pagination.value, currentPage.value);
 });
 
+/**
+ * function updatePageSize
+ * @param newPagination  PageSize
+ */
 function updateRowsPerPagen(newPagination: any) {
   pagination.value.rowsPerPage = newPagination.rowsPerPage;
   currentPage.value = 1;
@@ -122,8 +126,6 @@ function updateRowsPerPagen(newPagination: any) {
           @click.prevent="clickDetail(props.row)"
         >
           <div v-if="col.name == 'no'">
-            <!-- {{ props.rowIndex + 1 }} -->
-
             {{
               (currentPage - 1) * Number(pagination.rowsPerPage) +
               props.rowIndex +
diff --git a/src/modules/09_leave/components/1_Work/ToolBar.vue b/src/modules/09_leave/components/1_Work/ToolBar.vue
index 23412af3a..16c881267 100644
--- a/src/modules/09_leave/components/1_Work/ToolBar.vue
+++ b/src/modules/09_leave/components/1_Work/ToolBar.vue
@@ -7,6 +7,7 @@ import type { DataOption } from "@/modules/09_leave/interface/index/Main";
 /** importStores */
 import { useCounterMixin } from "@/stores/mixin";
 import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
+
 /** useStore */
 const workStore = useWorklistDataStore();
 const mixin = useCounterMixin();
diff --git a/src/modules/09_leave/components/1_Work/ToolBarDate.vue b/src/modules/09_leave/components/1_Work/ToolBarDate.vue
index 67b62fc02..aa44960ac 100644
--- a/src/modules/09_leave/components/1_Work/ToolBarDate.vue
+++ b/src/modules/09_leave/components/1_Work/ToolBarDate.vue
@@ -4,6 +4,7 @@ import { ref } from "vue";
 /** importStores */
 import { useCounterMixin } from "@/stores/mixin";
 import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
+
 /** useStore */
 const workStore = useWorklistDataStore();
 const mixin = useCounterMixin();
diff --git a/src/modules/09_leave/components/3_Report/DetailReport.vue b/src/modules/09_leave/components/3_Report/DetailReport.vue
index 7086336b6..e50c97593 100644
--- a/src/modules/09_leave/components/3_Report/DetailReport.vue
+++ b/src/modules/09_leave/components/3_Report/DetailReport.vue
@@ -11,8 +11,7 @@ import { useCounterMixin } from "@/stores/mixin";
 const route = useRoute();
 
 const mixin = useCounterMixin();
-const { messageError, showLoader, hideLoader, date2Thai, monthYear2Thai } =
-  mixin;
+const { date2Thai, monthYear2Thai } = mixin;
 
 const typeReport = route.params.type.toString();
 const titleReport = computed(() => {
@@ -59,6 +58,12 @@ const employeeClassOption = ref<DataOption[]>(employeeClassMain.value);
 const yearTypeOptionOption = ref<DataOption[]>(yearTypeOptionMain.value);
 const filterTypeOption = ref<DataOption[]>(filterTypeMain.value);
 
+/**
+ * function ค้นหาข้อมูล Option
+ * @param val คำค้นหา
+ * @param update  function
+ * @param type   ประเภท option
+ */
 function filterFnOptions(val: any, update: Function, type: string) {
   switch (type) {
     case "filterType":
diff --git a/src/modules/09_leave/components/3_WorkTime/DialogForm.vue b/src/modules/09_leave/components/3_WorkTime/DialogForm.vue
index 3dbb7eaca..967471626 100644
--- a/src/modules/09_leave/components/3_WorkTime/DialogForm.vue
+++ b/src/modules/09_leave/components/3_WorkTime/DialogForm.vue
@@ -2,6 +2,7 @@
 import { ref, reactive, watch } from "vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useQuasar } from "quasar";
 
 /** ImportType */
 import type {
@@ -11,10 +12,12 @@ import type {
 
 /** ImportComponents */
 import DialogHeader from "@/components/DialogHeader.vue";
+
+/** importstore*/
 import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar } from "quasar";
 
 const $q = useQuasar();
+
 const mixin = useCounterMixin();
 const { dialogConfirm, success, messageError } = mixin;
 
@@ -142,7 +145,7 @@ function close() {
 /***/
 watch(
   () => props.modal,
-  (newDetailData, oldDetailData) => {
+  () => {
     if (props.editCheck === "add") {
       formData.startTimeMorning = "";
       formData.endTimeMorning = "";
diff --git a/src/modules/09_leave/components/4_ChangeRound/DialogForm.vue b/src/modules/09_leave/components/4_ChangeRound/DialogForm.vue
index 5812ae463..1eff7447b 100644
--- a/src/modules/09_leave/components/4_ChangeRound/DialogForm.vue
+++ b/src/modules/09_leave/components/4_ChangeRound/DialogForm.vue
@@ -3,7 +3,6 @@ import { ref, reactive, watch, onMounted } from "vue";
 import { date, useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useRoute } from "vue-router";
 
 /** importType */
 import type {
@@ -15,6 +14,7 @@ import type {
 /** importStore */
 import { useCounterMixin } from "@/stores/mixin";
 import { useChangeRoundDataStore } from "@/modules/09_leave/stores/ChangeRoundStore";
+
 /** useStore */
 const dataStore = useChangeRoundDataStore();
 const mixin = useCounterMixin();
@@ -27,9 +27,7 @@ const {
   success,
 } = mixin;
 
-const route = useRoute();
 const $q = useQuasar();
-const roundOp = ref<any>([]);
 
 /**Hook */
 onMounted(async () => {
@@ -78,7 +76,7 @@ const dataToday = ref<Date>(new Date());
 function onSubmit() {
   dialogConfirm(
     $q,
-    async () => {
+    () => {
       changeRound();
       props.closeDialog?.();
     },
@@ -107,6 +105,7 @@ async function changeRound() {
     });
 }
 
+const roundOp = ref<any>([]);
 /**
  *ประวัติการเปลี่ยนรอบการปฏิบัติงาน"
  *
@@ -138,9 +137,8 @@ async function fetchDataOption() {
 }
 
 // paging
-const page = ref<number>(1);
 const pageSize = ref<number>(10);
-const filter = ref<string>(""); //search data table
+
 /**
  * ฟังก์ชั่น api เปลี่ยนหน้า
  * @param pageVal page
@@ -169,7 +167,6 @@ watch(
   }
 );
 const emit = defineEmits(["update:change-page"]);
-// Pagination - update rowsPerPage
 async function updatePagination(newPagination: any) {
   initialPagination.value = newPagination;
   currentPage.value = 1; // set current page เป็น 1 เสมอเมื่อเปลี่ยน per row
@@ -192,7 +189,7 @@ function close() {
 }
 watch(
   () => props.modal,
-  async (newDetailData, oldDetailData) => {
+  async () => {
     if (props.editCheck === "edit") {
       formData.round = "";
       formData.reson = "";
diff --git a/src/modules/09_leave/components/4_specialTime/DialogApprove.vue b/src/modules/09_leave/components/4_specialTime/DialogApprove.vue
index 8652e6645..2fcd3a31c 100644
--- a/src/modules/09_leave/components/4_specialTime/DialogApprove.vue
+++ b/src/modules/09_leave/components/4_specialTime/DialogApprove.vue
@@ -1,28 +1,38 @@
 <script setup lang="ts">
-import { ref, reactive, watchEffect, watch } from "vue";
+import { ref, reactive, watch } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/** importType*/
 import type {
   dataRowRound,
   MyObjectRoundRef,
 } from "@/modules/09_leave/interface/response/specialTime";
 import DialogHeader from "@/components/DialogHeader.vue";
-import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar } from "quasar";
-import { useSpecialTimeStore } from "@/modules/09_leave/stores/SpecialTimeStore";
-import http from "@/plugins/http";
-import config from "@/app.config";
 
+/** importStores*/
+import { useCounterMixin } from "@/stores/mixin";
+import { useSpecialTimeStore } from "@/modules/09_leave/stores/SpecialTimeStore";
+
+/** useStore*/
 const SpecialTimeStore = useSpecialTimeStore();
-const $q = useQuasar();
 const mixin = useCounterMixin();
-const {
-  dialogConfirm,
-  date2Thai,
-  showLoader,
-  success,
-  messageError,
-  hideLoader,
-} = mixin;
-const currentDate = ref<Date | null>(new Date());
+const { dialogConfirm, showLoader, success, messageError, hideLoader } = mixin;
+
+const $q = useQuasar();
+
+/** props*/
+const props = defineProps({
+  modal: { type: Boolean, default: "" },
+  editCheck: { type: String, default: "" },
+  date: { type: String, default: "" },
+  dateFix: { type: String, default: "" },
+  id: { type: String, default: "" },
+  closeDialog: { type: Function, default: () => {} },
+  detailData: Object,
+});
+
 const checkInRef = ref<Object | null>(null);
 const checkOutRef = ref<Object | null>(null);
 const checkInStatusRef = ref<Object | null>(null);
@@ -35,8 +45,8 @@ const formData = reactive<dataRowRound>({
   note: "",
   checkInStatus: "",
   checkOutStatus: "",
-  checkInEdit:false,
-  checkOutEdit:false
+  checkInEdit: false,
+  checkOutEdit: false,
 });
 
 const objectRound: MyObjectRoundRef = {
@@ -47,6 +57,7 @@ const objectRound: MyObjectRoundRef = {
   note: reasonRef,
 };
 
+/** function validateFom*/
 function validateForm() {
   const hasError = [];
   for (const key in objectRound) {
@@ -60,37 +71,26 @@ function validateForm() {
   }
   if (hasError.every((result) => result === true)) {
     onSubmit();
-    console.log(hasError);
   } else {
     console.log(hasError);
   }
 }
 
-const props = defineProps({
-  modal: { type: Boolean, default: "" },
-  editCheck: { type: String, default: "" },
-  date: { type: String, default: "" },
-  dateFix: { type: String, default: "" },
-  id: { type: String, default: "" },
-  closeDialog: { type: Function, default: () => {} },
-  detailData: Object,
-});
-
+/** function confrim*/
 function onSubmit() {
   dialogConfirm(
     $q,
     async () => {
-      props.closeDialog?.();
       await approveData();
+      props.closeDialog?.();
     },
     "ยืนยันการบันทึกข้อมูล",
     "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
   );
-  console.log(props.dateFix);
-  console.log(props.id);
 }
 
-const approveData = async () => {
+/** function บันทึกข้อมูล*/
+async function approveData() {
   showLoader();
   const body = {
     checkInTime: formData.checkIn,
@@ -101,27 +101,28 @@ const approveData = async () => {
   };
   await http
     .put(config.API.specialTimeApprove(props.id), body)
-    .then((res) => {
+    .then(() => {
       success($q, "บันทึกข้อมูลสำเร็จ");
     })
     .catch((e) => {
       messageError($q, e);
-      hideLoader();
     })
     .finally(async () => {
       SpecialTimeStore.fetchData();
       hideLoader();
     });
-};
+}
 
+/** function closeDialog*/
 function close() {
   if (props.closeDialog) {
     props.closeDialog();
   }
 }
+
 watch(
   () => props.modal,
-  (newDetailData, oldDetailData) => {
+  () => {
     if (props.editCheck === "APPROVE") {
       formData.checkIn = "";
       formData.checkOut = "";
@@ -202,8 +203,16 @@ watch(
               </template>
             </datepicker>
             <div class="column">
-              <q-checkbox disabled :model-value="formData.checkInEdit" label="ขอแก้ไขเวลาช่วงเช้า" />
-              <q-checkbox disabled :model-value="formData.checkOutEdit" label="ขอแก้ไขเวลาช่วงบ่าย" />
+              <q-checkbox
+                disabled
+                :model-value="formData.checkInEdit"
+                label="ขอแก้ไขเวลาช่วงเช้า"
+              />
+              <q-checkbox
+                disabled
+                :model-value="formData.checkOutEdit"
+                label="ขอแก้ไขเวลาช่วงบ่าย"
+              />
             </div>
           </div>
           <div
diff --git a/src/modules/09_leave/components/4_specialTime/Table.vue b/src/modules/09_leave/components/4_specialTime/Table.vue
index a4c12392f..003b79c6a 100644
--- a/src/modules/09_leave/components/4_specialTime/Table.vue
+++ b/src/modules/09_leave/components/4_specialTime/Table.vue
@@ -1,3 +1,94 @@
+<script setup lang="ts">
+import { ref, useAttrs } from "vue";
+
+/** import Type*/
+import type { Pagination } from "@/modules/04_registry/interface/index/Main";
+
+/** import Stoer*/
+import { useCounterMixin } from "@/stores/mixin";
+import { useSpecialTimeStore } from "@/modules/09_leave/stores/SpecialTimeStore";
+
+const attrs = ref<any>(useAttrs());
+const SpecialTimeStore = useSpecialTimeStore();
+const mixin = useCounterMixin();
+
+const { date2Thai } = mixin;
+const { searchFilterTable } = SpecialTimeStore;
+
+/** props*/
+const props = defineProps({
+  count: Number,
+  pass: Number,
+  notpass: Number,
+
+  inputfilter: String,
+  name: String,
+  icon: String,
+  inputvisible: Array,
+  editvisible: Boolean,
+  add: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  validate: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  nornmalData: {
+    type: Boolean,
+    defualt: true,
+  },
+  conclude: {
+    type: Boolean,
+    defualt: false,
+  },
+});
+
+/**emit Function*/
+const emit = defineEmits([
+  "update:inputfilter",
+  "update:inputvisible",
+  "update:editvisible",
+]);
+
+const table = ref<any>(null);
+const filterRef = ref<any>(null);
+
+/** pagination*/
+const paging = ref<boolean>(true);
+const pagination = ref({
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+
+function paginationLabel(start: string, end: string, total: string) {
+  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
+  else return start + "-" + end + " ใน " + total;
+}
+
+/**
+ * function update filter
+ * @param value คำค้นหา
+ */
+function updateInput(value: string | number | null) {
+  emit("update:inputfilter", value);
+}
+
+/**
+ * function updateVisible
+ * @param value ค่า Visible
+ */
+function updateVisible(value: []) {
+  emit("update:inputvisible", value);
+}
+
+function resetFilter() {
+  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
+  emit("update:inputfilter", "");
+  filterRef.value.focus();
+}
+</script>
 <template>
   <div class="q-pb-sm row q-col-gutter-sm">
     <!--  -->
@@ -104,83 +195,7 @@
     </template>
   </d-table>
 </template>
-<script setup lang="ts">
-import { ref, useAttrs } from "vue";
-import type { Pagination } from "@/modules/04_registry/interface/index/Main";
-import { useCounterMixin } from "@/stores/mixin";
-import { useSpecialTimeStore } from "@/modules/09_leave/stores/SpecialTimeStore";
 
-const SpecialTimeStore = useSpecialTimeStore();
-const { searchFilterTable } = SpecialTimeStore;
-const mixin = useCounterMixin();
-const { hideLoader, monthYear2Thai, date2Thai } = mixin;
-const attrs = ref<any>(useAttrs());
-const paging = ref<boolean>(true);
-const pagination = ref({
-  // sortBy: "desc",
-  descending: false,
-  page: 1,
-  rowsPerPage: 10,
-});
-const paginationLabel = (start: string, end: string, total: string) => {
-  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
-  else return start + "-" + end + " ใน " + total;
-};
-const table = ref<any>(null);
-const filterRef = ref<any>(null);
-const initialPagination = ref<Pagination>({
-  rowsPerPage: 0,
-});
-
-const props = defineProps({
-  count: Number,
-  pass: Number,
-  notpass: Number,
-
-  inputfilter: String,
-  name: String,
-  icon: String,
-  inputvisible: Array,
-  editvisible: Boolean,
-  add: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-  validate: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-  nornmalData: {
-    type: Boolean,
-    defualt: true,
-  },
-  conclude: {
-    type: Boolean,
-    defualt: false,
-  },
-});
-const emit = defineEmits([
-  "update:inputfilter",
-  "update:inputvisible",
-  "update:editvisible",
-]);
-const updateInput = (value: string | number | null) => {
-  emit("update:inputfilter", value);
-};
-const updateVisible = (value: []) => {
-  emit("update:inputvisible", value);
-};
-
-const checkAdd = () => {
-  props.add();
-};
-
-const resetFilter = () => {
-  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
-  emit("update:inputfilter", "");
-  filterRef.value.focus();
-};
-</script>
 <style lang="scss">
 .icon-color {
   color: #4154b3;
diff --git a/src/modules/09_leave/views/ChangeRoundMain.vue b/src/modules/09_leave/views/ChangeRoundMain.vue
index 1ddff22df..1863febd4 100644
--- a/src/modules/09_leave/views/ChangeRoundMain.vue
+++ b/src/modules/09_leave/views/ChangeRoundMain.vue
@@ -7,14 +7,14 @@ import type { dataPost } from "@/modules/09_leave/interface/request/changeRound"
 
 /** importComponents */
 import Dialogform from "@/modules/09_leave/components/4_ChangeRound/DialogForm.vue";
-import Modal from "@/modules/05_placement/components/AppointEmployee/Modal.vue";
 
 /** importStore */
 import { useCounterMixin } from "@/stores/mixin";
 import { useChangeRoundDataStore } from "@/modules/09_leave/stores/ChangeRoundStore";
+
 /** useStore */
 const mixin = useCounterMixin();
-const { dialogConfirm, date2Thai, dialogMessageNotify } = mixin;
+const { dialogMessageNotify } = mixin;
 const dataStore = useChangeRoundDataStore();
 
 /** use */
@@ -43,8 +43,6 @@ function Openmodal(check: string, detail: any) {
     modal.value = true;
     dataStore.fetchDatainHistory();
   }
-
-  console.log(detail);
 }
 
 /** Function closePopup */
diff --git a/src/modules/09_leave/views/LeaveListMain.vue b/src/modules/09_leave/views/LeaveListMain.vue
index 55a9919f6..d68d15826 100644
--- a/src/modules/09_leave/views/LeaveListMain.vue
+++ b/src/modules/09_leave/views/LeaveListMain.vue
@@ -31,13 +31,6 @@ const leaveStore = useLeavelistDataStore();
 
         <q-tab-panel name="2"> <Tab2 /> </q-tab-panel>
       </q-tab-panels>
-      <!-- <ToolBar @update:querySting="updatePaging" />
-      <TableList
-        :page="querySting.page"
-        :rowsPerPage="querySting.pageSize"
-        :maxPage="maxPage"
-        @update:querySting="updatePaging"
-      /> -->
     </q-card>
   </div>
 </template>
diff --git a/src/modules/09_leave/views/RoundMain.vue b/src/modules/09_leave/views/RoundMain.vue
index 9b1330afa..332e44917 100644
--- a/src/modules/09_leave/views/RoundMain.vue
+++ b/src/modules/09_leave/views/RoundMain.vue
@@ -15,8 +15,8 @@ const mixin = useCounterMixin();
 const dataStore = useRoundDataStore();
 const { fetchData } = dataStore;
 const { showLoader, hideLoader, messageError, dialogRemove, success } = mixin;
-const $q = useQuasar(); //ใช้ noti quasar
 
+const $q = useQuasar(); //ใช้ noti quasar
 const attrs = ref<any>(useAttrs());
 
 const modal = ref<boolean>(false);
@@ -91,7 +91,6 @@ function closeDialog() {
 
 /**  pagination */
 const pagination = ref({
-  // sortBy: "desc",
   descending: false,
   page: 1,
   rowsPerPage: 10,
diff --git a/src/modules/09_leave/views/SpecialTimeMain.vue b/src/modules/09_leave/views/SpecialTimeMain.vue
index dedca606d..8324590a5 100644
--- a/src/modules/09_leave/views/SpecialTimeMain.vue
+++ b/src/modules/09_leave/views/SpecialTimeMain.vue
@@ -1,23 +1,29 @@
 <script setup lang="ts">
 import { onMounted, ref, watch } from "vue";
 import { useQuasar } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
-import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
-import { useSpecialTimeStore } from "@/modules/09_leave/stores/SpecialTimeStore";
-import DialogReason from "@/components/Dialogs/PopupReason.vue";
-import DialogApprove from "@/modules/09_leave/components/4_specialTime/DialogApprove.vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import type { DataDateMonthObject } from "@/modules/09_leave/interface/request/specialTime";
-import { useRouter } from "vue-router";
-import { identity } from "@fullcalendar/core/internal";
 
-/**ตัวแปรที่ใช้ */
+/** importType*/
+import type { DataDateMonthObject } from "@/modules/09_leave/interface/request/specialTime";
+
+/** importComponents*/
+import DialogReason from "@/components/Dialogs/PopupReason.vue";
+import DialogApprove from "@/modules/09_leave/components/4_specialTime/DialogApprove.vue";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+import { useSpecialTimeStore } from "@/modules/09_leave/stores/SpecialTimeStore";
+
 const dataSpecialTime = useSpecialTimeStore();
 const $q = useQuasar(); // show dialog
 const mixin = useCounterMixin();
-const router = useRouter();
+
 const { hideLoader, monthYear2Thai, messageError, showLoader, success } = mixin;
+
+const emit = defineEmits(["update:change-page"]);
+
+/**ตัวแปรที่ใช้ */
 const modalUnapprove = ref(false);
 const modalApprove = ref(false);
 const detailData = ref<any>();
@@ -30,18 +36,19 @@ const dateDialog = ref<string>("");
 const dateFixDialog = ref<string>("");
 const dateYear = ref<number>(new Date().getFullYear());
 
-/**ฟังก์ชั่นไม่อนุมัติ */
-const unapprove = async (fullname: string, personId: string) => {
+/**
+ * ฟังก์ชั่นไม่อนุมัติ
+ * @param fullname ชื่อ
+ * @param personId personId
+ */
+async function unapprove(fullname: string, personId: string) {
   id.value = personId;
-  dialogTitle.value = " ไม่อนุมัติคำขอ"// + fullname;
+  dialogTitle.value = " ไม่อนุมัติคำขอ"; // + fullname;
   name.value = fullname;
   modalUnapprove.value = true;
+}
 
-  // rejectData();
-};
-
-/** function Model */
-//เปิด
+/** function openDialog */
 function openModal(
   data: any,
   check: string,
@@ -58,9 +65,9 @@ function openModal(
   if (check === "PENDING") {
     detailData.value = data;
   }
-  console.log(data);
 }
-//ปิด
+
+/** function closeDialog */
 const closeDialog = () => {
   modalUnapprove.value = false;
   modalApprove.value = false;
@@ -69,32 +76,28 @@ const closeDialog = () => {
 
 /** API reject */
 const clickSave = async (reason: string) => {
+  showLoader();
   modalUnapprove.value = false;
   const body = {
     reason: reason,
   };
   await http
     .put(config.API.specialTimeReject(id.value), body)
-    .then((res) => {
+    .then(() => {
       success($q, "บันทึกข้อมูลสำเร็จ");
     })
     .catch((e) => {
       messageError($q, e);
     })
     .finally(async () => {
-      dataSpecialTime.fetchData();
+      await dataSpecialTime.fetchData();
+      hideLoader();
     });
-
-  console.log(reason);
 };
 
 // paging
 const pageSize = ref<number>(10);
-/**
- * ฟังก์ชั่น api เปลี่ยนหน้า
- * @param pageVal page
- * @param pageSizeVal pagesize
- */
+
 // Pagination - initial pagination
 const initialPagination = ref<any>({
   sortBy: null,
@@ -102,7 +105,7 @@ const initialPagination = ref<any>({
   page: 1,
   rowsPerPage: pageSize, // set ตาม page หลักส่งมา
 });
-const emit = defineEmits(["update:change-page"]);
+
 // Pagination - page & change page & get new data
 const currentPage = ref<number>(1);
 watch(
@@ -131,6 +134,7 @@ const resetFilter = () => {
     filterRef.value.focus();
   }
 };
+
 /** function ค้นหาข้อมูลแล้วอัปเดท*/
 function filterFn() {
   updatePagination(filterKeyword.value);
diff --git a/src/modules/09_leave/views/WorkingMain.vue b/src/modules/09_leave/views/WorkingMain.vue
index 6fc5e6092..a7baf4bd6 100644
--- a/src/modules/09_leave/views/WorkingMain.vue
+++ b/src/modules/09_leave/views/WorkingMain.vue
@@ -1,22 +1,10 @@
 <script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
-import http from "@/plugins/http";
-import config from "@/app.config";
+import { ref } from "vue";
 
 /** import Components */
 import Tab1 from "@/modules/09_leave/components/1_Work/Tab1.vue";
 import Tab2 from "@/modules/09_leave/components/1_Work/Tab2.vue";
 
-// /** importStores */
-// import { useCounterMixin } from "@/stores/mixin";
-// import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
-
-/** use Store */
-// const mixin = useCounterMixin();
-// const workStore = useWorklistDataStore();
-// const { dateToISO, date2Thai, showLoader, hideLoader } = mixin;
-// const { fetchListLog, fetchListTime } = workStore;
-
 const tab = ref("1");
 </script>
 <template>
@@ -41,22 +29,15 @@ const tab = ref("1");
 
       <q-separator />
 
-      <q-tab-panels v-model="tab" animated >
+      <q-tab-panels v-model="tab" animated>
         <q-tab-panel name="1">
-          <!-- <TableList1 /> -->
-          <!-- <ToolBar /> -->
           <Tab1 />
-          <!-- <TableList /> -->
         </q-tab-panel>
 
         <q-tab-panel name="2">
-          <!-- <TabList2Vue /> -->
-          <!-- <ToolBarDate /> -->
           <Tab2 />
-          <!-- <TableList /> -->
         </q-tab-panel>
       </q-tab-panels>
-      <!-- </q-card> -->
     </q-card>
   </div>
 </template>
diff --git a/src/modules/11_discipline/components/4_Result/DialogSendToCommand.vue b/src/modules/11_discipline/components/4_Result/DialogSendToCommand.vue
index a19ab4206..fabd59ab0 100644
--- a/src/modules/11_discipline/components/4_Result/DialogSendToCommand.vue
+++ b/src/modules/11_discipline/components/4_Result/DialogSendToCommand.vue
@@ -22,7 +22,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 
 const type = ref<string>("");
-const rows = ref<DataListRow[]>([])
+const rows = ref<DataListRow[]>([]);
 const $q = useQuasar();
 const selected = ref<ResponseData[]>([]);
 const mixin = useCounterMixin();
@@ -125,9 +125,11 @@ const fecthTypeOption = async () => {
     .then((res) => {
       optionsType.value = res.data.result.filter(
         (e: OpType) =>
-          e.commandCode === "C-PM-26" ||
+          e.commandCode === "C-PM-19" ||
+          e.commandCode === "C-PM-20" ||
           e.commandCode === "C-PM-27" ||
-          e.commandCode === "C-PM-28"
+          e.commandCode === "C-PM-28" ||
+          e.commandCode === "C-PM-29"
       );
     })
     .catch((e) => {
@@ -141,9 +143,11 @@ const fecthTypeOption = async () => {
 watchEffect(() => {
   if (props.Modal === true) {
     selected.value = [];
-    type.value = ''
+    type.value = "";
     //  console.log(props.data.status)
-    rows.value = props.data.persons.filter((item: any) => item.status !== 'REPORT');
+    rows.value = props.data.persons.filter(
+      (item: any) => item.status !== "REPORT"
+    );
   }
 });
 
diff --git a/src/modules/11_discipline/components/7_ListSuspend/DialogSendToCommand.vue b/src/modules/11_discipline/components/7_ListSuspend/DialogSendToCommand.vue
index b83c3fb67..e94acbda9 100644
--- a/src/modules/11_discipline/components/7_ListSuspend/DialogSendToCommand.vue
+++ b/src/modules/11_discipline/components/7_ListSuspend/DialogSendToCommand.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { ref, computed, watch } from "vue";
+import { ref, computed, watch, onMounted } from "vue";
 import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import DialogHeader from "@/components/DialogHeader.vue";
 
 import type { QTableProps } from "quasar";
 import type { ResponseItems } from "@/modules/06_retirement/interface/response/Main";
+import type { OpType } from "@/modules/05_placement/interface/response/Main";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -14,7 +15,7 @@ import config from "@/app.config";
 const $q = useQuasar();
 const selected = ref<any>([]);
 const mixin = useCounterMixin();
-const {  success, dialogConfirm } = mixin;
+const { showLoader, success, messageError, dialogConfirm, hideLoader } = mixin;
 const emit = defineEmits([
   "update:filterKeyword2",
   "update:selected",
@@ -130,20 +131,71 @@ function updateInput(value: any) {
 function Reset() {
   emit("update:filterKeyword2", "");
 }
+
+const type = ref<string>("");
+//----(ดึงข้อมูลประเภทคำสั่ง)------//
+const optionsType = ref<[]>([]);
+const fecthTypeOption = async () => {
+  showLoader();
+  await http
+    .get(config.API.typeOrder())
+    .then((res) => {
+      optionsType.value = res.data.result.filter(
+        (e: OpType) =>
+          e.commandCode === "C-PM-25" || e.commandCode === "C-PM-26"
+      );
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
 // watch([()=>props.modal],() => {
 //   selected.value = props.modal ? [] : [];
 //   if (props.modal === true) {
 //     selected.value = props.rows2;
 //   }
 // });
+onMounted(() => {
+  fecthTypeOption();
+});
 </script>
+
 <template>
   <q-dialog v-model="props.modal">
     <q-card style="width: 1200px; max-width: 80vw">
       <DialogHeader tittle="ส่งไปออกคำสั่ง" :close="closeModal" />
       <q-separator />
       <q-card-section class="q-pt-none">
-        <div class="row justify-end">
+        <div class="row justify-between">
+          <div class="col-5">
+            <q-toolbar style="padding: 0">
+              <q-select
+                outlined
+                dense
+                v-model="type"
+                :options="optionsType"
+                label="ประเภทคำสั่ง"
+                style="width: 400px; max-width: auto"
+                emit-value
+                map-options
+                option-label="name"
+                option-value="id"
+                use-input
+                ><template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+            </q-toolbar>
+          </div>
+
           <div class="col-5">
             <q-toolbar style="padding: 0">
               <q-input
@@ -166,7 +218,7 @@ function Reset() {
                   />
                 </template>
               </q-input>
-              
+
               <q-select
                 v-model="visibleColumns2"
                 multiple
diff --git a/src/modules/12_evaluatePersonal/components/Detail/Stepper.vue b/src/modules/12_evaluatePersonal/components/Detail/Stepper.vue
index 3c221f21b..9d73cc7ba 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/Stepper.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/Stepper.vue
@@ -24,10 +24,20 @@ const store = useEvaluateDetailStore();
     >
     </q-step>
 
-    <q-step :name="2" prefix="2" title="จัดเตรียมเอกสาร" :done="store.step > 2">
+    <q-step
+      :name="2"
+      prefix="2"
+      title="จัดเตรียมเอกสารเล่ม 1"
+      :done="store.step > 2"
+    >
     </q-step>
 
-    <q-step :name="3" prefix="3" title="ตรวจสอบเอกสาร" :done="store.step > 3">
+    <q-step
+      :name="3"
+      prefix="3"
+      title="ตรวจสอบเอกสารเล่ม 1"
+      :done="store.step > 3"
+    >
     </q-step>
 
     <q-step
diff --git a/src/modules/12_evaluatePersonal/components/Detail/Tab1.vue b/src/modules/12_evaluatePersonal/components/Detail/Tab1.vue
index 91569f9d1..9b34515b4 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/Tab1.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/Tab1.vue
@@ -1,7 +1,12 @@
 <script setup lang="ts">
-import { onMounted } from "vue";
+import { onMounted, ref, reactive } from "vue";
 import { useQuasar } from "quasar";
 
+import type {
+  FormCommand,
+  FormCommandRef,
+} from "@/modules/12_evaluatePersonal/interface/index/evalute";
+
 import Stepper from "@/modules/12_evaluatePersonal/components/Detail/Stepper.vue";
 import Step1 from "@/modules/12_evaluatePersonal/components/Detail/step/step1.vue";
 import Step2 from "@/modules/12_evaluatePersonal/components/Detail/step/step2.vue";
@@ -29,16 +34,61 @@ const $q = useQuasar();
 const externalLink =
   "https://accreditation.ocsc.go.th/accreditation/search/curriculum";
 
-function onCilckNextStep() {
-  store.step < 9 &&
-    dialogConfirm(
-      $q,
-      () => {
-        store.step++;
-      },
-      "ยืนยันการดำเนินการ",
-      "ต้องการยืนยันการดำเนินการต่อใช่หรือไม่?"
-    );
+const formCommand = reactive<FormCommand>({
+  elementaryFullName: "",
+  elementaryPosition: "",
+  abovelevelFullname: "",
+  abovelevelPosition: "",
+});
+
+const elementaryFullNameRef = ref<object | null>(null);
+const elementaryPositonRef = ref<object | null>(null);
+const abovelevelFullnameRef = ref<object | null>(null);
+const abovelevelPositionRef = ref<object | null>(null);
+
+const formCommandRef: FormCommandRef = {
+  elementaryFullName: elementaryFullNameRef,
+  elementaryPosition: elementaryPositonRef,
+  abovelevelFullname: abovelevelFullnameRef,
+  abovelevelPosition: abovelevelPositionRef,
+};
+
+async function onCilckNextStep() {
+  const functionCreateDoc: (() => Promise<void>) | null =
+    store.step === 1
+      ? await saveStep1
+      : store.step === 3
+      ? await saveStep3
+      : store.step === 4
+      ? await saveStep4
+      : store.step === 5
+      ? await saveStep5
+      : store.step === 5
+      ? await saveStep5
+      : store.step === 6
+      ? await saveStep6
+      : store.step === 7
+      ? await saveStep7
+      : store.step === 8
+      ? await saveStep8
+      : store.step === 9
+      ? await saveStep9
+      : null;
+  store.step === 2
+    ? validateStep2()
+    : store.step < 9 &&
+      dialogConfirm(
+        $q,
+        () => {
+          functionCreateDoc?.();
+          store.step++;
+        },
+        "ยืนยันการดำเนินการ",
+        "ต้องการยืนยันการดำเนินการต่อใช่หรือไม่?"
+      );
+
+  // functionCreateDoc?.();
+  // store.step < 9 &&
 }
 
 function onCilckprPeviousStep() {
@@ -53,6 +103,71 @@ function onCilckprPeviousStep() {
     );
 }
 
+function updateformCommand(val: any, ref: any) {
+  formCommand.elementaryFullName = val.elementaryFullName;
+  formCommand.elementaryPosition = val.elementaryPosition;
+  formCommand.abovelevelFullname = val.abovelevelFullname;
+  formCommand.abovelevelPosition = val.abovelevelPosition;
+
+  elementaryFullNameRef.value = ref.elementaryFullNameRef;
+  elementaryPositonRef.value = ref.elementaryPositonRef;
+  abovelevelFullnameRef.value = ref.abovelevelFullnameRef;
+  abovelevelPositionRef.value = ref.abovelevelPositionRef;
+}
+
+async function validateStep2() {
+  const hasError = [];
+  for (const key in formCommandRef) {
+    if (Object.prototype.hasOwnProperty.call(formCommandRef, key)) {
+      const property = formCommandRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    saveStep2();
+  } else {
+    console.log("ไม่ผ่าน");
+  }
+}
+
+async function saveStep1() {
+  console.log("Save 1");
+}
+async function saveStep2() {
+  dialogConfirm(
+    $q,
+    () => {
+      store.step++;
+    },
+    "ยืนยันการดำเนินการ",
+    "ต้องการยืนยันการดำเนินการต่อใช่หรือไม่?"
+  );
+}
+async function saveStep3() {
+  console.log("Save 3");
+}
+async function saveStep4() {
+  console.log("Save 4");
+}
+async function saveStep5() {
+  console.log("Save 5");
+}
+async function saveStep6() {
+  console.log("Save 6");
+}
+async function saveStep7() {
+  console.log("Save 7");
+}
+async function saveStep8() {
+  console.log("Save 8");
+}
+async function saveStep9() {
+  console.log("Save 9");
+}
+
 onMounted(() => {
   store.step = 1;
 });
@@ -87,7 +202,7 @@ onMounted(() => {
           <q-card flat bordered class="col-12 q-pa-md">
             <q-card-section>
               <Step1 v-if="store.step === 1" />
-              <Step2 v-if="store.step === 2" />
+              <Step2 v-if="store.step === 2" @update:form="updateformCommand" />
               <Step3 v-if="store.step === 3" />
               <Step4 v-if="store.step === 4" />
               <Step5 v-if="store.step === 5" />
diff --git a/src/modules/12_evaluatePersonal/components/Detail/step/step2.vue b/src/modules/12_evaluatePersonal/components/Detail/step/step2.vue
index f4ea37d17..b66b0246b 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/step/step2.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/step/step2.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, reactive, onMounted } from "vue";
 import keycloak from "@/plugins/keycloak";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import genReport from "@/plugins/genreport";
 import { useQuasar } from "quasar";
 
+import type { FormCommand } from "@/modules/12_evaluatePersonal/interface/index/evalute";
+
 import { useCounterMixin } from "@/stores/mixin";
 
 const $q = useQuasar();
@@ -17,6 +19,30 @@ const fullName = ref<string>(
   keycloak.tokenParsed ? keycloak.tokenParsed.name!.toString() : ""
 );
 
+const emit = defineEmits(["update:form"]);
+
+const formCommand = reactive<FormCommand>({
+  elementaryFullName: "",
+  elementaryPosition: "",
+  abovelevelFullname: "",
+  abovelevelPosition: "",
+});
+
+const elementaryFullNameRef = ref<object | null>(null);
+const elementaryPositonRef = ref<object | null>(null);
+const abovelevelFullnameRef = ref<object | null>(null);
+const abovelevelPositionRef = ref<object | null>(null);
+
+const updateInput = (value: any) => {
+  const ref = {
+    elementaryFullNameRef: elementaryFullNameRef.value,
+    elementaryPositonRef: elementaryPositonRef.value,
+    abovelevelFullnameRef: abovelevelFullnameRef.value,
+    abovelevelPositionRef: abovelevelPositionRef.value,
+  };
+  emit("update:form", value, ref);
+};
+
 const fileEvaluation1 = ref<any>();
 const fileEvaluation2 = ref<any>();
 const fileEvaluation3 = ref<any>();
@@ -69,6 +95,16 @@ async function onClickDowloadFile(
   };
   await genReport(body, fileName);
 }
+
+onMounted(() => {
+  const ref = {
+    elementaryFullNameRef: elementaryFullNameRef.value,
+    elementaryPositonRef: elementaryPositonRef.value,
+    abovelevelFullnameRef: abovelevelFullnameRef.value,
+    abovelevelPositionRef: abovelevelPositionRef.value,
+  };
+  emit("update:form", formCommand, ref);
+});
 </script>
 
 <template>
@@ -114,7 +150,7 @@ async function onClickDowloadFile(
                   <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
                 >
               </div>
-              <div class="col-xs-12 col-sm-11 row">
+              <div class="col-xs-12 col-sm-10 row">
                 <q-file
                   v-model="fileEvaluation1"
                   class="col-12"
@@ -129,7 +165,7 @@ async function onClickDowloadFile(
                   </template>
                 </q-file>
               </div>
-              <div class="col-1 self-center text-center">
+              <div class="col-2 self-center text-center q-pl-none">
                 <q-btn flat round dense color="primary" icon="mdi-upload"
                   ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                 >
@@ -180,7 +216,7 @@ async function onClickDowloadFile(
                   <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
                 >
               </div>
-              <div class="col-xs-12 col-sm-11 row">
+              <div class="col-xs-12 col-sm-10 row">
                 <q-file
                   v-model="fileEvaluation2"
                   class="col-12"
@@ -195,7 +231,7 @@ async function onClickDowloadFile(
                   </template>
                 </q-file>
               </div>
-              <div class="col-1 self-center text-center">
+              <div class="col-2 self-center text-center q-pl-none">
                 <q-btn flat round dense color="primary" icon="mdi-upload"
                   ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                 >
@@ -246,7 +282,7 @@ async function onClickDowloadFile(
                   <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
                 >
               </div>
-              <div class="col-xs-12 col-sm-11 row">
+              <div class="col-xs-12 col-sm-10 row">
                 <q-file
                   v-model="fileEvaluation3"
                   class="col-12"
@@ -261,7 +297,7 @@ async function onClickDowloadFile(
                   </template>
                 </q-file>
               </div>
-              <div class="col-1 self-center text-center">
+              <div class="col-2 self-center text-center q-pl-none">
                 <q-btn flat round dense color="primary" icon="mdi-upload"
                   ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                 >
@@ -312,7 +348,7 @@ async function onClickDowloadFile(
                   <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
                 >
               </div>
-              <div class="col-xs-12 col-sm-11 row">
+              <div class="col-xs-12 col-sm-10 row">
                 <q-file
                   v-model="fileEvaluation4"
                   class="col-12"
@@ -327,7 +363,7 @@ async function onClickDowloadFile(
                   </template>
                 </q-file>
               </div>
-              <div class="col-1 self-center text-center">
+              <div class="col-2 self-center text-center q-pl-none">
                 <q-btn flat round dense color="primary" icon="mdi-upload"
                   ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                 >
@@ -379,7 +415,7 @@ async function onClickDowloadFile(
                   <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
                 >
               </div>
-              <div class="col-xs-12 col-sm-11 row">
+              <div class="col-xs-12 col-sm-10 row">
                 <q-file
                   v-model="fileEvaluation5"
                   class="col-12"
@@ -394,7 +430,7 @@ async function onClickDowloadFile(
                   </template>
                 </q-file>
               </div>
-              <div class="col-1 self-center text-center">
+              <div class="col-2 self-center text-center q-pl-none">
                 <q-btn flat round dense color="primary" icon="mdi-upload"
                   ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                 >
@@ -445,7 +481,7 @@ async function onClickDowloadFile(
                   <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
                 >
               </div>
-              <div class="col-xs-12 col-sm-11 row">
+              <div class="col-xs-12 col-sm-10 row">
                 <q-file
                   v-model="fileEvaluation6"
                   class="col-12"
@@ -460,7 +496,7 @@ async function onClickDowloadFile(
                   </template>
                 </q-file>
               </div>
-              <div class="col-1 self-center text-center">
+              <div class="col-2 self-center text-center q-pl-none">
                 <q-btn flat round dense color="primary" icon="mdi-upload"
                   ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                 >
@@ -470,6 +506,83 @@ async function onClickDowloadFile(
         </div>
       </q-card>
     </div>
+
+    <!-- เลือกผู้เซ็นเอกสาร -->
+    <div class="col-12">
+      <q-card bordered style="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">
+          <div class="col-12 q-pa-sm">
+            <div class="row q-col-gutter-md col-12">
+              <div class="col-xs-12 col-sm-12 row">
+                <div class="text-weight-medium q-py-sm">
+                  ผู้บังคับบัญชาชั้นต้น
+                </div>
+                <div class="row col-12 q-col-gutter-md q-pa-sm">
+                  <q-input
+                    ref="elementaryFullNameRef"
+                    dense
+                    class="col-xs-12 col-sm-6"
+                    outlined
+                    label="ชื่อ-นามสกุล"
+                    v-model="formCommand.elementaryFullName"
+                    @update:model-value="updateInput(formCommand)"
+                    :rules="[(val) => !!val || `${'กรุณากรอกชื่อ-นามสกุล'}`]"
+                    lazy-rules
+                  />
+                  <q-input
+                    ref="elementaryPositonRef"
+                    class="col-xs-12 col-sm-6"
+                    dense
+                    outlined
+                    v-model="formCommand.elementaryPosition"
+                    @update:model-value="updateInput(formCommand)"
+                    label="ตำแหน่ง"
+                    :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
+                    lazy-rules
+                  />
+                </div>
+              </div>
+            </div>
+
+            <div class="row q-col-gutter-md col-12">
+              <div class="col-xs-12 col-sm-12 row">
+                <div class="text-weight-medium q-py-sm">
+                  ผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
+                </div>
+                <div class="row col-12 q-col-gutter-md q-pa-sm">
+                  <q-input
+                    ref="abovelevelFullnameRef"
+                    dense
+                    class="col-xs-12 col-sm-6"
+                    outlined
+                    v-model="formCommand.abovelevelFullname"
+                    label="ชื่อ-นามสกุล"
+                    :rules="[(val) => !!val || `${'กรุณากรอกชื่อ-นามสกุล'}`]"
+                    lazy-rules
+                    @update:model-value="updateInput(formCommand)"
+                  />
+                  <q-input
+                    ref="abovelevelPositionRef"
+                    class="col-xs-12 col-sm-6"
+                    dense
+                    outlined
+                    v-model="formCommand.abovelevelPosition"
+                    label="ตำแหน่ง"
+                    :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
+                    lazy-rules
+                    @update:model-value="updateInput(formCommand)"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </q-card>
+    </div>
   </div>
 
   <!-- Dialog Full Screen -->
diff --git a/src/modules/12_evaluatePersonal/components/Detail/viewstep/tableStep1.vue b/src/modules/12_evaluatePersonal/components/Detail/viewstep/tableStep1.vue
new file mode 100644
index 000000000..e2600c51b
--- /dev/null
+++ b/src/modules/12_evaluatePersonal/components/Detail/viewstep/tableStep1.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+const props = defineProps({
+  columns: {
+    type: Object,
+    require: true,
+  },
+});
+</script>
+
+<template>
+  <d-table
+    ref="table"
+    :columns="props.columns"
+    row-key="name"
+    flat
+    bordered
+    dense
+    class="custom-header-table"
+    style="width: 580px"
+  >
+    <!-- <template v-slot:header="props">
+      <q-tr :props="props">
+        <q-th v-for="col in props.cols" :key="col.name" :props="props">
+          <span class="text-weight-medium" v-html="col.label" />
+        </q-th>
+        <q-th auto-width />
+      </q-tr>
+    </template> -->
+    <!-- <template v-slot:body="props">
+      <q-tr :props="props" class="cursor-pointer">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div>
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template> -->
+  </d-table>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep1.vue b/src/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep1.vue
index 7bb1f2bf1..d102f1809 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep1.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep1.vue
@@ -1,304 +1,292 @@
 <script setup lang="ts">
-import { storeToRefs } from "pinia";
-import { useEvalutuonStore } from "@/modules/12_evaluatePersonal/store/Evaluate";
+import TableData from "@/modules/12_evaluatePersonal/components/Detail/viewstep/tableStep1.vue";
 
-const storageEvalutuon = useEvalutuonStore();
+import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/EvaluateDetail";
+
+const store = useEvaluateDetailStore();
 const {
-  rows,
   columnsLicense,
   columnPeriodhistory,
   columnTrainingHistory,
   columnProjectsProposed,
-} = storeToRefs(storageEvalutuon);
+} = store;
 </script>
 
 <template>
-  <q-card class="bg-grey-2">
-    <div class="text-weight-bold row items-center">
-      <span class="q-ml-lg q-my-sm">ข้อมูลส่วนตัว</span>
-    </div>
+  <div>
+    <q-scroll-area style="height: 450px; max-width: 100%">
+      <div class="q-pa-xs">
+        <q-card class="q-gutter-md" style="max-width: 100%">
+          <q-card bordered style="border: 1px solid #d6dee1">
+            <div class="text-weight-bold row items-center bg-grey-2">
+              <span class="q-ml-lg q-my-sm">ข้อมูลส่วนตัว</span>
+            </div>
+            <q-separator />
+            <div class="row q-pa-sm">
+              <div class="col-xs-6 col-sm-4 col-md-3">
+                <q-input
+                  borderless
+                  readonly
+                  model-value="นาย"
+                  label="คำนำหน้าชื่อ"
+                />
+              </div>
 
-    <q-separator />
+              <div class="col-xs-6 col-sm-4 col-md-3">
+                <q-input
+                  borderless
+                  readonly
+                  model-value="ธนพนธ์ แสงจันทร์"
+                  label="ชื่อ - นามสกุล"
+                />
+              </div>
+              <div class="col-xs-6 col-sm-4 col-md-3">
+                <q-input
+                  borderless
+                  model-value="19/03/44"
+                  readonly
+                  label="วันเดือนปีเกิด"
+                >
+                  <template v-slot:prepend>
+                    <q-icon class="size-icon" name="o_calendar_today" />
+                  </template>
+                </q-input>
+              </div>
+              <div class="col-xs-6 col-sm-4 col-md-3">
+                <q-input
+                  borderless
+                  readonly
+                  model-value="ไม่มี"
+                  label="ตำแหน่ง"
+                />
+              </div>
 
-    <q-card-actions class="q-ml-md">
-      <div class="col-xs-6 col-sm-3 col-md-3">
-        <q-input borderless readonly model-value="นาย" label="คำนำหน้าชื่อ" />
+              <div class="col-xs-6 col-sm-4 col-md-3">
+                <q-input
+                  borderless
+                  readonly
+                  model-value="กย.11"
+                  label="ตำแหน่งเลขที่"
+                />
+              </div>
+              <div class="col-xs-6 col-sm-4 col-md-3">
+                <q-input
+                  borderless
+                  readonly
+                  model-value="หน่วยใหม่กับหน่วยเก่า"
+                  label="สังกัด"
+                />
+              </div>
+              <div class="col-xs-6 col-sm-4 col-md-3">
+                <q-input
+                  borderless
+                  readonly
+                  model-value="1,0000"
+                  label="เงินเดือน"
+                />
+              </div>
+
+              <div class="col-xs-6 col-sm-4 col-md-3">
+                <q-input
+                  borderless
+                  readonly
+                  model-value="ระดับปัจจุบัน"
+                  label="ระดับปัจจุบัน"
+                />
+              </div>
+
+              <div class="col-xs-6 col-sm-4 col-md-3">
+                <q-input
+                  borderless
+                  readonly
+                  model-value="ระดับที่ประเมิน"
+                  label="ระดับที่ประเมิน"
+                />
+              </div>
+
+              <div class="col-xs-6 col-sm-4 col-md-3">
+                <q-input
+                  borderless
+                  readonly
+                  model-value="1000 ปี"
+                  label="อายุราชการ"
+                />
+              </div>
+            </div>
+          </q-card>
+
+          <q-card bordered style="border: 1px solid #d6dee1">
+            <div class="text-weight-bold row items-center bg-grey-2">
+              <span class="q-ml-lg q-my-sm">ประวัติการศึกษา</span>
+            </div>
+            <q-separator />
+            <div class="row q-pa-sm">
+              <div class="col-xs-6 col-sm-4 col-md-3">
+                <q-input
+                  borderless
+                  readonly
+                  model-value="ปริญญาตรี"
+                  label="ระดับศึกษา"
+                />
+              </div>
+
+              <div class="col-xs-6 col-sm-4 col-md-3">
+                <q-input
+                  borderless
+                  readonly
+                  model-value="มหาวิทยาลัยก."
+                  label="สถานศึกษา"
+                />
+              </div>
+
+              <div class="col-xs-6 col-sm-4 col-md-3">
+                <q-input
+                  borderless
+                  model-value="19/03/44"
+                  readonly
+                  label="ตั้งแต่"
+                >
+                  <template v-slot:prepend>
+                    <q-icon class="size-icon" name="o_calendar_today" />
+                  </template>
+                </q-input>
+              </div>
+
+              <div class="col-xs-6 col-sm-4 col-md-3">
+                <q-input borderless model-value="19/03/44" readonly label="ถึง">
+                  <template v-slot:prepend>
+                    <q-icon class="size-icon" name="o_calendar_today" />
+                  </template>
+                </q-input>
+              </div>
+              <div class="col-xs-6 col-sm-4 col-md-3">
+                <q-input
+                  borderless
+                  model-value="19/03/44"
+                  readonly
+                  label="วันทราสำเร็จการศึกษา"
+                >
+                  <template v-slot:prepend>
+                    <q-icon class="size-icon" name="o_calendar_today" />
+                  </template>
+                </q-input>
+              </div>
+
+              <div class="col-xs-6 col-sm-4 col-md-3">
+                <q-input
+                  borderless
+                  readonly
+                  model-value="ปริญญาตรี"
+                  label="วุฒิการศึกษาในตําแหน่ง"
+                />
+              </div>
+
+              <div class="col-xs-6 col-sm-4 col-md-3">
+                <q-input
+                  borderless
+                  readonly
+                  model-value="ปริญญาตรี"
+                  label="วุฒิการศึกษา"
+                />
+              </div>
+
+              <div class="col-xs-6 col-sm-4 col-md-3">
+                <q-input
+                  borderless
+                  readonly
+                  model-value="-"
+                  label="สาขาวิชา/ทาง"
+                />
+              </div>
+              <div class="col-xs-6 col-sm-4 col-md-3">
+                <q-input borderless readonly model-value="-" label="ทุน" />
+              </div>
+
+              <div class="col-xs-6 col-sm-4 col-md-3">
+                <q-input
+                  borderless
+                  readonly
+                  model-value="3.33"
+                  label="เกรดเฉลี่ย"
+                />
+              </div>
+
+              <div class="col-xs-6 col-sm-4 col-md-6">
+                <q-input borderless readonly model-value="ไทย" label="ประเทศ" />
+              </div>
+            </div>
+          </q-card>
+
+          <q-card bordered style="border: 1px solid #d6dee1">
+            <div class="text-weight-bold row items-center bg-grey-2">
+              <span class="q-ml-lg q-my-sm">ใบอนุญาตประกอบวิชาชีพ</span>
+            </div>
+            <q-separator />
+            <div class="row q-pa-sm">
+              <div class="col-xs-12 col-sm-12 col-md-12">
+                <TableData :columns="columnsLicense" />
+              </div>
+            </div>
+          </q-card>
+
+          <q-card bordered style="border: 1px solid #d6dee1">
+            <div class="text-weight-bold row items-center bg-grey-2">
+              <span class="q-ml-lg q-my-sm">ประวัติการรับราชการ</span>
+            </div>
+            <q-separator />
+            <div class="row q-pa-sm">
+              <div class="col-xs-12 col-sm-12 col-md-12">
+                <TableData :columns="columnPeriodhistory" />
+              </div>
+            </div>
+          </q-card>
+
+          <q-card bordered style="border: 1px solid #d6dee1">
+            <div class="text-weight-bold row items-center bg-grey-2">
+              <span class="q-ml-lg q-my-sm">ประวัติการฝึกอบรมดูงาน</span>
+            </div>
+            <q-separator />
+            <div class="row q-pa-sm">
+              <div class="col-xs-12 col-sm-12 col-md-12">
+                <TableData :columns="columnTrainingHistory" />
+              </div>
+            </div>
+          </q-card>
+
+          <q-card bordered style="border: 1px solid #d6dee1">
+            <div class="text-weight-bold row items-center bg-grey-2">
+              <span class="q-ml-lg q-my-sm">ประสบการณ์ในการปฏิบัติงาน </span>
+            </div>
+            <q-separator />
+            <div class="row q-pa-sm">
+              <div class="col-xs-12 col-sm-12 col-md-12">
+                <TableData :columns="columnTrainingHistory" />
+              </div>
+            </div>
+          </q-card>
+
+          <q-card bordered style="border: 1px solid #d6dee1">
+            <div class="text-weight-bold row items-center bg-grey-2">
+              <span class="q-ml-lg q-my-sm"
+                >ผลงานทีเคยเสนอขอประเมิน (ถ้ามี)</span
+              >
+            </div>
+            <q-separator />
+            <div class="row q-pa-sm">
+              <div class="col-xs-12 col-sm-12 col-md-12">
+                <TableData :columns="columnProjectsProposed" />
+              </div>
+            </div>
+          </q-card>
+        </q-card>
       </div>
-
-      <div class="col-xs-6 col-sm-3 col-md-3">
-        <q-input
-          borderless
-          readonly
-          model-value="ธนพนธ์ แสงจันทร์"
-          label="ชื่อ - นามสกุล"
-        />
-      </div>
-
-      <div class="col-xs-6 col-sm-6 col-md-6">
-        <q-input
-          borderless
-          model-value="19/03/44"
-          readonly
-          label="วันเดือนปีเกิด"
-        >
-          <template v-slot:prepend>
-            <q-icon class="size-icon" name="o_calendar_today" />
-          </template>
-        </q-input>
-      </div>
-
-   
-    </q-card-actions>
-
-    <q-card-actions class="q-ml-md">
-      <div class="col-xs-6 col-sm-3 col-md-3">
-        <q-input borderless readonly model-value="ไม่มี" label="ตำแหน่ง" />
-      </div>
-
-      <div class="col-xs-6 col-sm-3 col-md-3">
-        <q-input
-          borderless
-          readonly
-          model-value="กย.11"
-          label="ตำแหน่งเลขที่"
-        />
-      </div>
-
-      <div class="col-xs-9 col-sm-6 col-md-6">
-        <q-input
-          borderless
-          readonly
-          model-value="หน่วยใหม่กับหน่วยเก่า"
-          label="สังกัด"
-        />
-      </div>
-    </q-card-actions>
-
-    <q-card-actions class="q-ml-md">
-      <div class="col-xs-6 col-sm-3 col-md-3">
-        <q-input borderless readonly model-value="" label="เงินเดือน" />
-      </div>
-
-      <div class="col-xs-6 col-sm-3 col-md-3">
-        <q-input borderless readonly model-value="" label="ระดับปัจจุบัน" />
-      </div>
-
-      <div class="col-xs-6 col-sm-3 col-md-3">
-        <q-input borderless readonly model-value="" label="ระดับที่ประเมิน" />
-      </div>
-
-      <div class="col-xs-6 col-sm-3 col-md-3">
-        <q-input borderless readonly model-value="1000 ปี" label="อายุราชการ" />
-      </div>
-    </q-card-actions>
-  </q-card>
-
-  <q-card class="bg-grey-2 q-mt-xl">
-    <div class=" text-weight-bold row items-center">
-      <span class="q-ml-lg q-my-sm">ประวัติการศึกษา</span>
-    </div>
-
-    <q-separator />
-
-    <q-card-actions class="q-ml-md">
-      <div class="col-xs-6 col-sm-3 col-md-3">
-        <q-input
-          borderless
-          readonly
-          model-value="ปริญญาตรี"
-          label="ระดับศึกษา"
-        />
-      </div>
-
-      <div class="col-xs-6 col-sm-3 col-md-3">
-        <q-input
-          borderless
-          readonly
-          model-value="มหาวิทยาลัยก."
-          label="สถานศึกษา"
-        />
-      </div>
-
-      <div class="col-xs-6 col-sm-3 col-md-3">
-        <q-input borderless model-value="19/03/44" readonly label="ตั้งแต่">
-          <template v-slot:prepend>
-            <q-icon class="size-icon" name="o_calendar_today" />
-          </template>
-        </q-input>
-      </div>
-
-      <div class="col-xs-6 col-sm-3 col-md-3">
-        <q-input borderless model-value="19/03/44" readonly label="ถึง">
-          <template v-slot:prepend>
-            <q-icon class="size-icon" name="o_calendar_today" />
-          </template>
-        </q-input>
-      </div>
-    </q-card-actions>
-
-    <q-card-actions class="q-ml-md">
-      <div class="col-xs-6 col-sm-6 col-md-6">
-        <q-input
-          borderless
-          model-value="19/03/44"
-          readonly
-          label="วันทราสำเร็จการศึกษา"
-        >
-          <template v-slot:prepend>
-            <q-icon class="size-icon" name="o_calendar_today" />
-          </template>
-        </q-input>
-      </div>
-
-      <div class="col-xs-6 col-sm-6 col-md-6">
-        <q-input
-          borderless
-          readonly
-          model-value="ปริญญาตรี"
-          label="วุฒิการศึกษาในตําแหน่ง"
-        />
-      </div>
-
-      <div class="col-xs-6 col-sm-6 col-md-6">
-        <q-input
-          borderless
-          readonly
-          model-value="ปริญญาตรี"
-          label="วุฒิการศึกษา"
-        />
-      </div>
-
-      <div class="col-xs-6 col-sm-6 col-md-6">
-        <q-input borderless readonly model-value="-" label="สาขาวิชา/ทาง" />
-      </div>
-    </q-card-actions>
-
-    <q-card-actions class="q-ml-md">
-      <div class="col-xs-6 col-sm-3 col-md-3">
-        <q-input borderless readonly model-value="-" label="ทุน" />
-      </div>
-
-      <div class="col-xs-6 col-sm-3 col-md-3">
-        <q-input borderless readonly model-value="3.33" label="เกรดเฉลี่ย" />
-      </div>
-
-      <div class="col-xs-6 col-sm-6 col-md-6">
-        <q-input borderless readonly model-value="ไทย" label="ประเทศ" />
-      </div>
-    </q-card-actions>
-  </q-card>
-
-  <q-card class="bg-grey-2 q-mt-xl">
-    <div class=" text-weight-bold row items-center">
-      <span class="q-ml-lg q-my-sm">ใบอนุญาตประกอบวิชาชีพ</span>
-    </div>
-
-    <q-separator />
-
-    <q-card-actions class="q-ma-md">
-      <div class="col-xs-12 col-sm-12 col-md-12">
-        <q-table
-          table-header-class="bg-grey-4 "
-          flat
-          bordered
-          :rows="rows"
-          :columns="columnsLicense"
-        >
-        </q-table>
-      </div>
-    </q-card-actions>
-  </q-card>
-
-  <q-card class="bg-grey-2 q-mt-xl">
-    <div class=" text-weight-bold row items-center">
-      <span class="q-ml-lg q-my-sm">ประวัติการรับราชการ</span>
-    </div>
-
-    <q-separator />
-
-    <q-card-actions class="q-ma-md">
-      <div class="col-xs-12 col-sm-12 col-md-12">
-        <q-table
-          table-header-class="bg-grey-4 "
-          flat
-          bordered
-          :rows="rows"
-          :columns="columnPeriodhistory"
-        >
-        </q-table>
-      </div>
-    </q-card-actions>
-  </q-card>
-
-  <q-card class="bg-grey-2 q-mt-xl">
-    <div class=" text-weight-bold row items-center">
-      <span class="q-ml-lg q-my-sm">ประวัติการฝึกอบรมดูงาน</span>
-    </div>
-
-    <q-separator />
-
-    <q-card-actions class="q-ma-md">
-      <div class="col-xs-12 col-sm-12 col-md-12">
-        <q-table
-          table-header-class="bg-grey-4 "
-          flat
-          bordered
-          :rows="rows"
-          :columns="columnTrainingHistory"
-        >
-        </q-table>
-      </div>
-    </q-card-actions>
-  </q-card>
-
-  <q-card class="bg-grey-2 q-mt-xl">
-    <div class=" text-weight-bold row items-center">
-      <span class="q-ml-lg q-my-sm">ประสบการณ์ในการปฏิบัติงาน</span>
-    </div>
-
-    <q-separator />
-
-    <q-card-actions class="q-ma-md">
-      <div class="col-xs-12 col-sm-12 col-md-12">
-        <q-table
-          table-header-class="bg-grey-4 "
-          flat
-          bordered
-          :rows="rows"
-          :columns="columnTrainingHistory"
-        >
-        </q-table>
-      </div>
-    </q-card-actions>
-  </q-card>
-
-  <q-card class="bg-grey-2 q-mt-xl">
-    <div class=" text-weight-bold row items-center">
-      <span class="q-ml-lg q-my-sm">ผลงานทีเคยเสนอขอประเมิน (ถ้ามี)</span>
-    </div>
-
-    <q-separator />
-
-    <q-card-actions class="q-ma-md">
-      <div class="col-xs-12 col-sm-12 col-md-12">
-        <q-table
-          table-header-class="bg-grey-4 "
-          flat
-          bordered
-          :rows="rows"
-          :columns="columnProjectsProposed"
-        >
-        </q-table>
-      </div>
-    </q-card-actions>
-  </q-card>
+    </q-scroll-area>
+  </div>
 </template>
 
 <style scoped lang="scss">
-
 .size-icon {
-    font-size: 20px; /* ปรับขนาดตามที่คุณต้องการ */
-  }
-
+  font-size: 20px; /* ปรับขนาดตามที่คุณต้องการ */
+}
 </style>
-@/modules/12_evaluatePersonal/store/evaluate
\ No newline at end of file
+@/modules/12_evaluatePersonal/store/evaluate
diff --git a/src/modules/12_evaluatePersonal/interface/index/evalute.ts b/src/modules/12_evaluatePersonal/interface/index/evalute.ts
new file mode 100644
index 000000000..60f9e8e24
--- /dev/null
+++ b/src/modules/12_evaluatePersonal/interface/index/evalute.ts
@@ -0,0 +1,17 @@
+interface FormCommand {
+  elementaryFullName: string;
+  elementaryPosition: string;
+  abovelevelFullname: string;
+  abovelevelPosition: string;
+}
+
+interface FormCommandRef {
+  elementaryFullName: object | null;
+  elementaryPosition: object | null;
+  abovelevelFullname: object | null;
+  abovelevelPosition: object | null;
+
+  [key: string]: any;
+}
+
+export type { FormCommand, FormCommandRef };
diff --git a/src/modules/12_evaluatePersonal/store/Evaluate.ts b/src/modules/12_evaluatePersonal/store/Evaluate.ts
index 1560fa238..9241e78e0 100644
--- a/src/modules/12_evaluatePersonal/store/Evaluate.ts
+++ b/src/modules/12_evaluatePersonal/store/Evaluate.ts
@@ -28,7 +28,6 @@ export const useEvalutuonStore = defineStore("EvalutuonStore", () => {
         return "ตรวจสอบความถูกต้องของเอกสารเล่ม";
       case "DONE":
         return "เสร็จสิ้น";
-        
     }
   }
 
@@ -150,287 +149,11 @@ export const useEvalutuonStore = defineStore("EvalutuonStore", () => {
     },
   ]);
 
-  const columnsLicense = ref<QTableProps["columns"]>([
-    {
-      name: "",
-      align: "center",
-      label: "ชื่อใบอนุณาต",
-      sortable: false,
-      field: "",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-    },
-    {
-      name: "",
-      align: "left",
-      label: "หน่วยงานผู้ออกใบอนุญาต",
-      sortable: true,
-      field: "",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-    },
-    {
-      name: "",
-      align: "left",
-      label: "เลขที่ใบอนุญาต",
-      sortable: true,
-      field: "",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-    },
-    {
-      name: "",
-      align: "left",
-      label: "วันที่ออกใบอนุญาต",
-      sortable: true,
-      field: "",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-    },
-    {
-      name: "",
-      align: "left",
-      label: "วันที่หมดอายุ",
-      sortable: true,
-      field: "",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-    },
-  ]);
-
-  const columnPeriodhistory = ref<QTableProps["columns"]>([
-    {
-      name: "",
-      align: "center",
-      label: "วัน เดือน ปี",
-      sortable: false,
-      field: "",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-    },
-    {
-      name: "",
-      align: "left",
-      label: "สังกัด",
-      sortable: true,
-      field: "",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-    },
-    {
-      name: "",
-      align: "left",
-      label: "ตำแหน่ง",
-      sortable: true,
-      field: "",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-    },
-    {
-      name: "",
-      align: "left",
-      label: "ตำแหน่งเลขที่",
-      sortable: true,
-      field: "",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-    },
-    {
-      name: "",
-      align: "left",
-      label: "สายงาน",
-      sortable: true,
-      field: "",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-    },
-    {
-      name: "",
-      align: "left",
-      label: "ด้าน/สาขา",
-      sortable: true,
-      field: "",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-    },
-    {
-      name: "",
-      align: "left",
-      label: "ตำแหน่งประเภท",
-      sortable: true,
-      field: "",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-    },
-    {
-      name: "",
-      align: "left",
-      label: "ระดับ",
-      sortable: true,
-      field: "",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-    },
-    {
-      name: "",
-      align: "left",
-      label: "ตำแหน่งทางการบริหาร",
-      sortable: true,
-      field: "",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-    },
-    {
-      name: "",
-      align: "left",
-      label: "ด้านทางการบริหาร",
-      sortable: true,
-      field: "",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-    },
-  ]);
-
-  const columnTrainingHistory = ref<QTableProps["columns"]>([
-    {
-      name: "",
-      align: "center",
-      label: "ชื่อโครงการ/หลักสูตรการฝึกอบรม",
-      sortable: false,
-      field: "",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-    },
-    {
-      name: "",
-      align: "left",
-      label: "หัวข้อการฝึกอบรม/ดูงาน",
-      sortable: true,
-      field: "",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-    },
-    {
-      name: "",
-      align: "left",
-      label: "วันเริ่มต้นการฝึกอบรม/ดูงาน",
-      sortable: true,
-      field: "",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-    },
-    {
-      name: "",
-      align: "left",
-      label: "วันสิ้นสุดการฝึกอบรม/ดูงาน",
-      sortable: true,
-      field: "",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-    },
-    {
-      name: "",
-      align: "left",
-      label: "ปีที่อบรม/ดูงาน",
-      sortable: true,
-      field: "",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-    },
-    {
-      name: "",
-      align: "left",
-      label: "รวมระยะเวลาในการฝึกอบรม/ดูงาน",
-      sortable: true,
-      field: "",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-    },
-    {
-      name: "",
-      align: "left",
-      label: "หน่วยงานที่รับผิดชอบจัดการฝึกอบรม/ดูงาน",
-      sortable: true,
-      field: "",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-    },
-  ]);
-
-  const columnProjectsProposed = ref<QTableProps["columns"]>([
-    {
-      name: "",
-      align: "center",
-      label: "วันที่ได้รับ",
-      sortable: false,
-      field: "",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-    },
-    {
-      name: "",
-      align: "left",
-      label: "ผู้มีอำนาจลงนาม",
-      sortable: true,
-      field: "",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-    },
-    {
-      name: "",
-      align: "left",
-      label: "รายละเอียด",
-      sortable: true,
-      field: "",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-     
-    },
-    {
-      name: "",
-      align: "left",
-      label: "เลขที่คำสั่ง",
-      sortable: true,
-      field: "",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-    },
-    {
-      name: "",
-      align: "left",
-      label: "เอกสารอ้างอิง",
-      sortable: true,
-      field: "",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-    },
-  ]);
-
   return {
     visibleColumns,
     columns,
     rows,
     convertStatus,
     fetchData,
-    columnsLicense,
-    columnPeriodhistory,
-    columnTrainingHistory,
-    columnProjectsProposed,
   };
 });
diff --git a/src/modules/12_evaluatePersonal/store/EvaluateDetail.ts b/src/modules/12_evaluatePersonal/store/EvaluateDetail.ts
index 0940a9c5e..44796b05e 100644
--- a/src/modules/12_evaluatePersonal/store/EvaluateDetail.ts
+++ b/src/modules/12_evaluatePersonal/store/EvaluateDetail.ts
@@ -1,14 +1,15 @@
-
 import { defineStore } from "pinia";
 import { ref } from "vue";
 
+import type { QTableProps } from "quasar";
+
 export const useEvaluateDetailStore = defineStore("evaluateDetailStore", () => {
   const tabMenu = ref<string>("1");
   const step = ref<number>(1);
   const titel = ref<string[]>([
     "ตรวจสอบคุณสมบัติ",
-    "จัดเตรียมเอกสาร",
-    "ตรวจสอบเอกสาร",
+    "จัดเตรียมเอกสารเล่ม 1",
+    "ตรวจสอบเอกสารเล่ม 1",
     "รอตรวจสอบคุณสมบัติ",
     "ประกาศบนเว็บไซต์",
     "จัดเตรียมเอกสารเล่ม 2",
@@ -19,10 +20,286 @@ export const useEvaluateDetailStore = defineStore("evaluateDetailStore", () => {
 
   const tabPanels = ref<string>("1");
 
+  const columnsLicense = ref<QTableProps["columns"]>([
+    {
+      name: "",
+      align: "center",
+      label: "ชื่อใบอนุณาต",
+      sortable: false,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "",
+      align: "left",
+      label: "หน่วยงานผู้ออกใบอนุญาต",
+      sortable: true,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "",
+      align: "left",
+      label: "เลขที่ใบอนุญาต",
+      sortable: true,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "",
+      align: "left",
+      label: "วันที่ออกใบอนุญาต",
+      sortable: true,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+      sort: (a: string, b: string) =>
+        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    },
+    {
+      name: "",
+      align: "left",
+      label: "วันที่หมดอายุ",
+      sortable: true,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+      sort: (a: string, b: string) =>
+        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    },
+  ]);
+
+  const columnPeriodhistory = ref<QTableProps["columns"]>([
+    {
+      name: "",
+      align: "center",
+      label: "วัน เดือน ปี",
+      sortable: false,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+      sort: (a: string, b: string) =>
+        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    },
+    {
+      name: "",
+      align: "left",
+      label: "สังกัด",
+      sortable: true,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "",
+      align: "left",
+      label: "ตำแหน่ง",
+      sortable: true,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "",
+      align: "left",
+      label: "ตำแหน่งเลขที่",
+      sortable: true,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+      sort: (a: string, b: string) =>
+        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    },
+    {
+      name: "",
+      align: "left",
+      label: "สายงาน",
+      sortable: true,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "",
+      align: "left",
+      label: "ด้าน/สาขา",
+      sortable: true,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "",
+      align: "left",
+      label: "ตำแหน่งประเภท",
+      sortable: true,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "",
+      align: "left",
+      label: "ระดับ",
+      sortable: true,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "",
+      align: "left",
+      label: "ตำแหน่งทางการบริหาร",
+      sortable: true,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "",
+      align: "left",
+      label: "ด้านทางการบริหาร",
+      sortable: true,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+  ]);
+
+  const columnTrainingHistory = ref<QTableProps["columns"]>([
+    {
+      name: "",
+      align: "center",
+      label: "ชื่อโครงการ/หลักสูตรการฝึกอบรม",
+      sortable: false,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "",
+      align: "left",
+      label: "หัวข้อการฝึกอบรม/ดูงาน",
+      sortable: true,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "",
+      align: "left",
+      label: "วันเริ่มต้นการฝึกอบรม/ดูงาน",
+      sortable: true,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+      sort: (a: string, b: string) =>
+        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    },
+    {
+      name: "",
+      align: "left",
+      label: "วันสิ้นสุดการฝึกอบรม/ดูงาน",
+      sortable: true,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+      sort: (a: string, b: string) =>
+        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    },
+    {
+      name: "",
+      align: "left",
+      label: "ปีที่อบรม/ดูงาน",
+      sortable: true,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "",
+      align: "left",
+      label: "รวมระยะเวลาในการฝึกอบรม/ดูงาน",
+      sortable: true,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "",
+      align: "left",
+      label: "หน่วยงานที่รับผิดชอบจัดการฝึกอบรม/ดูงาน",
+      sortable: true,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+  ]);
+
+  const columnProjectsProposed = ref<QTableProps["columns"]>([
+    {
+      name: "",
+      align: "center",
+      label: "วันที่ได้รับ",
+      sortable: false,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+      sort: (a: string, b: string) =>
+        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    },
+    {
+      name: "",
+      align: "left",
+      label: "ผู้มีอำนาจลงนาม",
+      sortable: true,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "",
+      align: "left",
+      label: "รายละเอียด",
+      sortable: true,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "",
+      align: "left",
+      label: "เลขที่คำสั่ง",
+      sortable: true,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+      sort: (a: string, b: string) =>
+        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    },
+    {
+      name: "",
+      align: "left",
+      label: "เอกสารอ้างอิง",
+      sortable: true,
+      field: "",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+  ]);
+
   return {
     tabMenu,
     step,
     titel,
     tabPanels,
+    /** step1*/
+    columnsLicense,
+    columnPeriodhistory,
+    columnTrainingHistory,
+    columnProjectsProposed,
   };
-});
\ No newline at end of file
+});