diff --git a/src/api/09_leave/api.leave.ts b/src/api/09_leave/api.leave.ts
index 369549925..764503896 100644
--- a/src/api/09_leave/api.leave.ts
+++ b/src/api/09_leave/api.leave.ts
@@ -20,5 +20,6 @@ export default {
   /** รายการลา*/
   leaveType: () => `${leave}/type`,
   leaveList: () => `${leave}/admin`,
+  leaveListDelete: () => `${leave}/admin/delete`,
   leaveListById: (id: string) => `${leave}/admin/${id}`,
 };
diff --git a/src/api/11_discipline/api.discipline.ts b/src/api/11_discipline/api.discipline.ts
index 093b52c26..292bb3a4b 100644
--- a/src/api/11_discipline/api.discipline.ts
+++ b/src/api/11_discipline/api.discipline.ts
@@ -2,6 +2,7 @@ import env from "../index";
 const disciplineMain = `${env.API_URI}/discipline`;
 const discipline = `${env.API_URI}/discipline/disciplinary`;
 const investigate = `${env.API_URI}/discipline/investigate`;
+const suspend = `${env.API_URI}/discipline/suspend`;
 
 export default {
   directorList: (page: number, pageSize: number, keyword: string) =>
@@ -65,4 +66,10 @@ export default {
   /** รายการผลการพิจารณาทางวินัย*/
   listResult: () => `${disciplineMain}/result`,
   listResultById: (id: string) => `${disciplineMain}/result/${id}`,
+
+  /** ผู้ถูกพักราชการ */
+  suspendMain:(page: number, pageSize: number, keyword: string) => `${suspend}?page=${page}&pageSize=${pageSize}&keyword=${keyword}`,
+  suspendById: (id: string) => `${suspend}/${id}`,
+
+  suspendReport: () => `${suspend}/report`,
 };
diff --git a/src/modules/09_leave/components/1_Work/TableList.vue b/src/modules/09_leave/components/1_Work/TableList.vue
index e72e5e330..b23e09053 100644
--- a/src/modules/09_leave/components/1_Work/TableList.vue
+++ b/src/modules/09_leave/components/1_Work/TableList.vue
@@ -122,7 +122,13 @@ function updateRowsPerPagen(newPagination: any) {
           @click.prevent="clickDetail(props.row)"
         >
           <div v-if="col.name == 'no'">
-            {{ props.rowIndex + 1 }}
+            <!-- {{ props.rowIndex + 1 }} -->
+
+            {{
+              (currentPage - 1) * Number(pagination.rowsPerPage) +
+              props.rowIndex +
+              1
+            }}
           </div>
           <div v-else-if="col.name == 'checkInLocation'">
             <q-item style="padding: 0">
diff --git a/src/modules/09_leave/components/2_Leave/Tab1.vue b/src/modules/09_leave/components/2_Leave/Tab1.vue
index c40561b04..82cf89ef0 100644
--- a/src/modules/09_leave/components/2_Leave/Tab1.vue
+++ b/src/modules/09_leave/components/2_Leave/Tab1.vue
@@ -1,5 +1,8 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 /**importType*/
 import type {
@@ -12,19 +15,17 @@ import ToolBar from "@/modules/09_leave/components/2_Leave/ToolBarLeave.vue";
 import CalendarView from "@/modules/09_leave/components/2_Leave/Calendar.vue";
 
 /**importStroe*/
+import { useCounterMixin } from "@/stores/mixin";
 import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
 import { useLeavelistDataStoreTest } from "@/modules/09_leave/stores/ListLeave";
 
+const mixin = useCounterMixin();
 const leaveStore = useLeavelistDataStore();
 const APIDATA = useLeavelistDataStoreTest();
+const { date2Thai, dateToISO, showLoader, hideLoader, messageError } = mixin;
 const { fetchListLeave } = leaveStore;
 
-//** เรียกข้อมูลจาก API*/
-function fecthLeaveList() {
-  const data = APIDATA.data;
-  maxPage.value = Math.ceil(data.length / querySting.pageSize);
-  fetchListLeave(data); /** ส่งข้อมูลไป stores*/
-}
+const $q = useQuasar(); //ใช้ noti quasar
 
 //
 const querySting = reactive<QuerySting>({
@@ -37,13 +38,34 @@ const querySting = reactive<QuerySting>({
 });
 const maxPage = ref<number>(1);
 
+//** เรียกข้อมูลจาก API*/
+async function fecthLeaveList() {
+  // showLoader();
+  // await http
+  //   .post(config.API.leaveList(), querySting)
+  //   .then((res) => {
+  //     console.log(res);
+
+  //     maxPage.value = Math.ceil(data.length / querySting.pageSize);
+  //   })
+  //   .catch((err) => {
+  //     messageError($q, err);
+  //   })
+  //   .finally(() => {
+  //     hideLoader();
+  //   });
+  const data = APIDATA.data;
+  maxPage.value = Math.ceil(data.length / querySting.pageSize);
+  fetchListLeave(data); /** ส่งข้อมูลไป stores*/
+}
+
 /**
  *
  * @param newPage หน้า
  * @param pageSize จำนวนต่อแถว
  * @param dateFilter ข้อมูลค้นหา
  */
-function updatePaging(
+async function updatePaging(
   newPage: number,
   pageSize: number,
   dateFilter: DateFilter
@@ -52,9 +74,10 @@ function updatePaging(
   querySting.type = dateFilter ? dateFilter.type : querySting.type;
   querySting.status = dateFilter ? dateFilter.status : querySting.status;
   querySting.page = newPage;
-  querySting.pageSize = pageSize;
+  querySting.pageSize = pageSize ? pageSize : querySting.pageSize;
   querySting.keyword = dateFilter ? dateFilter.keyword : querySting.keyword;
   console.log(querySting);
+  await fecthLeaveList();
 }
 
 onMounted(async () => {
diff --git a/src/modules/09_leave/components/2_Leave/Tab2.vue b/src/modules/09_leave/components/2_Leave/Tab2.vue
index 0cd0fdcb7..17e7fe91b 100644
--- a/src/modules/09_leave/components/2_Leave/Tab2.vue
+++ b/src/modules/09_leave/components/2_Leave/Tab2.vue
@@ -1,5 +1,8 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 /**importType*/
 import type {
@@ -11,15 +14,20 @@ import TableList from "@/modules/09_leave/components/2_Leave/TableList.vue";
 import ToolBar from "@/modules/09_leave/components/2_Leave/ToolBarLeave.vue";
 
 /**importStroe*/
+import { useCounterMixin } from "@/stores/mixin";
 import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
 import { useLeavelistDataStoreTest } from "@/modules/09_leave/stores/ListLeave";
 
+const mixin = useCounterMixin();
 const leaveStore = useLeavelistDataStore();
 const APIDATA = useLeavelistDataStoreTest();
+const { date2Thai, dateToISO, showLoader, hideLoader, messageError } = mixin;
 const { fetchListLeaveReject } = leaveStore;
 
+const $q = useQuasar(); //ใช้ noti quasar
+
 const querySting = reactive<QuerySting>({
-  year: 0, //*ปีในการยื่นขอใบลา(ใช้เป็น คศ.)
+  year: new Date().getFullYear(), //*ปีในการยื่นขอใบลา(ใช้เป็น คศ.)
   type: "00000000-0000-0000-0000-000000000000", //*Id ประเภทการลา
   status: "ALL", //*สถานะการของลา
   page: 1, //*หน้า
@@ -29,9 +37,23 @@ const querySting = reactive<QuerySting>({
 const maxPage = ref<number>(1);
 
 //** เรียกข้อมูลจาก API*/
-function fecthLeaveList() {
+async function fecthLeaveList() {
+  // showLoader();
+  // await http
+  //   .post(config.API.leaveListDelete(), querySting)
+  //   .then((res) => {
+  //     console.log(res);
+
+  //     maxPage.value = Math.ceil(data.length / querySting.pageSize);
+  //   })
+  //   .catch((err) => {
+  //     messageError($q, err);
+  //   })
+  //   .finally(() => {
+  //     hideLoader();
+  //   });
   const data = APIDATA.data;
-  maxPage.value = Math.ceil(data.length / querySting.pageSize);
+
   fetchListLeaveReject(data); /** ส่งข้อมูลไป stores*/
 }
 
@@ -41,7 +63,7 @@ function fecthLeaveList() {
  * @param pageSize จำนวนต่อแถว
  * @param dateFilter ข้อมูลค้นหา
  */
-function updatePaging(
+async function updatePaging(
   newPage: number,
   pageSize: number,
   dateFilter: DateFilter
@@ -54,6 +76,7 @@ function updatePaging(
   querySting.keyword = dateFilter ? dateFilter.keyword : querySting.keyword;
 
   console.log(querySting);
+  await fecthLeaveList();
 }
 
 onMounted(async () => {
diff --git a/src/modules/09_leave/components/2_Leave/TableList.vue b/src/modules/09_leave/components/2_Leave/TableList.vue
index eefba63b8..8874d03ff 100644
--- a/src/modules/09_leave/components/2_Leave/TableList.vue
+++ b/src/modules/09_leave/components/2_Leave/TableList.vue
@@ -163,8 +163,12 @@ function redirectToDetail(id: string) {
   router.push(`${routePrefix}/detail/${id}`);
 }
 
+function updatedPagination(newPageZize: any) {
+  currentPage.value = 1;
+  pagination.value.rowsPerPage = newPageZize.rowsPerPage;
+}
+
 watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
-  // updateProp(pagination.value, currentPage.value);
   currentPage.value &&
     pagination.value.rowsPerPage &&
     updateQuerySting(currentPage.value, pagination.value.rowsPerPage);
@@ -172,7 +176,6 @@ watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
 
 /** Hook*/
 onMounted(() => {
-  console.log(leaveStore.tabMenu);
   if (leaveStore.tabMenu === "1") {
     leaveStore.visibleColumns = visibleColumnsLeave.value;
     leaveStore.columns = columnsLeave.value;
@@ -194,8 +197,10 @@ onMounted(() => {
     :paging="true"
     dense
     class="custom-header-table"
+    :rows-per-page-options="[10, 25, 50, 100]"
     :visible-columns="leaveStore.visibleColumns"
-    v-model:pagination="pagination"
+    :pagination="pagination"
+    @update:pagination="updatedPagination"
   >
     <template v-slot:header="props">
       <q-tr :props="props">
@@ -213,7 +218,11 @@ onMounted(() => {
           @click.prevent="redirectToDetail(props.row.id)"
         >
           <div v-if="col.name == 'no'">
-            {{ props.rowIndex + 1 }}
+            {{
+              (currentPage - 1) * Number(pagination.rowsPerPage) +
+              props.rowIndex +
+              1
+            }}
           </div>
 
           <div v-else>
diff --git a/src/modules/09_leave/components/2_Leave/ToolBarLeave.vue b/src/modules/09_leave/components/2_Leave/ToolBarLeave.vue
index 79bfa610e..63bef1b53 100644
--- a/src/modules/09_leave/components/2_Leave/ToolBarLeave.vue
+++ b/src/modules/09_leave/components/2_Leave/ToolBarLeave.vue
@@ -47,20 +47,12 @@ function updateQuerySting(
 
 /** function ค้นหาข้อมูลใน Table*/
 async function filterListLeave() {
-  console.log("test");
-
-  // filter.status &&
-  //   filter.type &&
-  //   (await updateQuerySting(1, Number(props.rowsPerPage), filter));
+  updateQuerySting(1, 0, filter);
 }
 
 /** Option*/
-const optionType = ref<DataOption[]>([
-  {
-    id: "00000000-0000-0000-0000-000000000000",
-    name: "ทั้งหมด",
-  },
-]);
+const optionTypeMain = ref<DataOption[]>([]);
+const optionType = ref<DataOption[]>([]);
 const optionStatus = ref<DataOption[]>([
   {
     id: "ALL",
@@ -93,29 +85,37 @@ const optionStatus2 = ref<DataOption[]>([
     name: "ขอยกเลิก",
   },
   {
-    id: "PENDING ",
+    id: "APPROVE  ",
     name: "อนุมัติ",
   },
   {
-    id: "APPROVE ",
+    id: "REJECT  ",
     name: "ไม่อนุมัติ",
   },
 ]);
-const optionTypeMain = ref<DataOption[]>(optionType.value);
+
 const optionStatusMain = ref<DataOption[]>(
   leaveStore.tabMenu == "1" ? optionStatus.value : optionStatus2.value
 );
 
 async function fetchOption() {
-  console.log("loadOption  รอ API");
-  //   await http
-  //     .get(config.API.leaveType())
-  //     .then((res) => {
-  //       console.log(res);
-  //     })
-  //     .catch((err) => {
-  //       console.log(err);
-  //     });
+  await http
+    .get(config.API.leaveType())
+    .then((res) => {
+      const data = res.data.result;
+      optionTypeMain.value = [
+        { id: "00000000-0000-0000-0000-000000000000", name: "ทั้งหมด" },
+      ];
+      const option = data.map((e: DataOption) => ({
+        id: e.id,
+        name: e.name,
+      }));
+      optionTypeMain.value.push(...option);
+      optionType.value = optionTypeMain.value;
+    })
+    .catch((err) => {
+      console.log(err);
+    });
 }
 
 /**
@@ -141,8 +141,6 @@ function filterOption(val: string, update: any, name: string) {
 
 onMounted(async () => {
   await fetchOption();
-  // optionTypeMain.value =
-  //   leaveStore.tabMenu == "1" ? optionStatus.value : optionStatus2.value;
 });
 </script>
 
@@ -182,19 +180,6 @@ onMounted(async () => {
           </q-input>
         </template>
       </datepicker>
-      <!-- <q-select
-        for="selectYear"
-        emit-value
-        map-options
-        outlined
-        dense
-        v-model="filter.year"
-        :options="optionStatus"
-        option-value="id"
-        option-label="name"
-        label="ปีงบประมาณ"
-        @update:model-value="filterListLeave"
-      /> -->
     </div>
     <div class="col-xs-12 col-sm-3 col-md-2">
       <q-select
diff --git a/src/modules/09_leave/components/4_specialTime/DialogApprove.vue b/src/modules/09_leave/components/4_specialTime/DialogApprove.vue
index 5d0615ac3..f0b422790 100644
--- a/src/modules/09_leave/components/4_specialTime/DialogApprove.vue
+++ b/src/modules/09_leave/components/4_specialTime/DialogApprove.vue
@@ -104,6 +104,7 @@ const approveData = async () => {
       hideLoader();
     })
     .finally(async () => {
+      SpecialTimeStore.fetchData();
       hideLoader();
     });
 };
diff --git a/src/modules/09_leave/interface/request/specialTime.ts b/src/modules/09_leave/interface/request/specialTime.ts
index fa44490f8..f11b3a282 100644
--- a/src/modules/09_leave/interface/request/specialTime.ts
+++ b/src/modules/09_leave/interface/request/specialTime.ts
@@ -13,4 +13,9 @@ interface ListData {
   checkOut: string;
   checkIn: string;
 }
-export type { ListData };
+
+interface DataDateMonthObject {
+  month: number;
+  year: number;
+}
+export type { ListData, DataDateMonthObject };
diff --git a/src/modules/09_leave/stores/SpecialTimeStore.ts b/src/modules/09_leave/stores/SpecialTimeStore.ts
index 0735dcdaa..ecdd6ffd8 100644
--- a/src/modules/09_leave/stores/SpecialTimeStore.ts
+++ b/src/modules/09_leave/stores/SpecialTimeStore.ts
@@ -2,12 +2,14 @@ import { defineStore } from "pinia";
 import { ref, watch, defineEmits } from "vue";
 import type { QTableProps } from "quasar";
 import type { DataRows } from "@/modules/09_leave/interface/response/specialTime";
-import type { ListData } from "@/modules/09_leave/interface/request/specialTime";
+import type { DataDateMonthObject } from "@/modules/09_leave/interface/request/specialTime";
+
 import { useCounterMixin } from "@/stores/mixin";
 import type { DataOption } from "@/modules/09_leave/interface/index/Main";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useQuasar } from "quasar";
+import { mount } from "@vue/test-utils";
 
 const $q = useQuasar();
 const mixin = useCounterMixin();
@@ -45,32 +47,6 @@ export const useSpecialTimeStore = defineStore("LeaveSpecialTime", () => {
   const pageSize = ref<number>(10);
   const filter = ref<string>(""); //search data table
   const maxPage = ref<number>(0);
-  // Pagination - update rowsPerPage
-  // async function updatePagination(newPagination: any) {
-  //   initialPagination.value = newPagination;
-  //   // currentPage.value = 1;
-  //   console.log("updatePagination");
-  // }
-
-  // Pagination - initial pagination
-  const initialPagination = ref<any>({
-    sortBy: null,
-    descending: false,
-    page: 1,
-    // rowsPerPage: pageSize,
-  });
-
-  /**
-   * ฟังก์ชั่น api เปลี่ยนหน้า
-   * @param pageVal page
-   * @param pageSizeVal pagesize
-   */
-  async function changePage(pageVal: number, pageSizeVal: number) {
-    page.value = await pageVal;
-    pageSize.value = await pageSizeVal;
-    console.log("changePage");
-    fetchData();
-  }
 
   /**
    * ฟังชั้นเรียกดูข้อมูล
@@ -126,6 +102,19 @@ export const useSpecialTimeStore = defineStore("LeaveSpecialTime", () => {
       });
   };
 
+  /**
+   * ฟังก์ชั่น api เปลี่ยนหน้า
+   * @param pageVal page
+   * @param pageSizeVal pagesize
+   */
+  async function changePage(pageVal: number, pageSizeVal: number) {
+    page.value = await pageVal;
+    pageSize.value = await pageSizeVal;
+    console.log(pageSize.value);
+
+    fetchData();
+  }
+
   //--------------|ฟิลเตอร์|--------------------------------------//
   const searchFilterTable = async (searchDate: any) => {
     rows.value = [];
@@ -268,5 +257,7 @@ export const useSpecialTimeStore = defineStore("LeaveSpecialTime", () => {
     page,
     pageSize,
     month,
+    filter,
+    // changeMonth,
   };
 });
diff --git a/src/modules/09_leave/views/SpecialTimeMain.vue b/src/modules/09_leave/views/SpecialTimeMain.vue
index 42021a04e..3868106c5 100644
--- a/src/modules/09_leave/views/SpecialTimeMain.vue
+++ b/src/modules/09_leave/views/SpecialTimeMain.vue
@@ -8,7 +8,7 @@ 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";
 
@@ -28,6 +28,7 @@ const name = ref<string>("");
 const id = ref<string>("");
 const dateDialog = ref<string>("");
 const dateFixDialog = ref<string>("");
+const dateYear = ref<number>(new Date().getFullYear());
 
 /**ฟังก์ชั่นไม่อนุมัติ */
 const unapprove = async (fullname: string, personId: string) => {
@@ -35,6 +36,7 @@ const unapprove = async (fullname: string, personId: string) => {
   dialogTitle.value = " ไม่อนุมัติการลงเวลาพิเศษของ" + fullname;
   name.value = fullname;
   modalUnapprove.value = true;
+
   // rejectData();
 };
 
@@ -79,35 +81,20 @@ const clickSave = async (reason: string) => {
     .catch((e) => {
       messageError($q, e);
     })
-    .finally(async () => {});
+    .finally(async () => {
+      dataSpecialTime.fetchData();
+    });
+
   console.log(reason);
 };
 
-// ค้นหาในตาราง
-const filterKeyword = ref<string>("");
-const filterRef = ref<HTMLInputElement | null>(null);
-const resetFilter = () => {
-  filterKeyword.value = "";
-  if (filterRef.value) {
-    filterRef.value.focus();
-  }
-};
-
 // paging
-const page = ref<number>(1);
 const pageSize = ref<number>(10);
-const filter = ref<string>(""); //search data table
 /**
  * ฟังก์ชั่น api เปลี่ยนหน้า
  * @param pageVal page
  * @param pageSizeVal pagesize
  */
-async function changePage(pageVal: number, pageSizeVal: number) {
-  // page.value = await pageVal;
-  // pageSize.value = await pageSizeVal;
-  // dataSpecialTime.fetchData();
-  console.log("test");
-}
 // Pagination - initial pagination
 const initialPagination = ref<any>({
   sortBy: null,
@@ -123,21 +110,36 @@ watch(
   async () => {
     dataSpecialTime.page = currentPage.value;
     await dataSpecialTime.fetchData();
-    // emit(
-    //   "update:change-page",
-    //   currentPage.value,
-    //   initialPagination.value.rowsPerPage,
-    //   true
-    // );
   }
 );
+
 // Pagination - update rowsPerPage
-async function updatePagination(newPagination: any) {
+async function updatePagination(initialPagination: any) {
   currentPage.value = 1;
-  dataSpecialTime.pageSize = initialPagination.value.rowsPerPage;
+  dataSpecialTime.pageSize = initialPagination.rowsPerPage;
   dataSpecialTime.page = 1; // set current page เป็น 1 เสมอเมื่อเปลี่ยน per row
 }
 
+// ค้นหาในตาราง
+const filterKeyword = ref<string>("");
+const filterRef = ref<HTMLInputElement | null>(null);
+const resetFilter = () => {
+  filterKeyword.value = "";
+  dataSpecialTime.filter = filterKeyword.value;
+  dataSpecialTime.fetchData();
+  if (filterRef.value) {
+    filterRef.value.focus();
+  }
+};
+/** function ค้นหาข้อมูลแล้วอัปเดท*/
+function filterFn() {
+  updatePagination(filterKeyword.value);
+  console.log(filterKeyword.value);
+  dataSpecialTime.filter = filterKeyword.value;
+  dataSpecialTime.pageSize = pageSize.value;
+  dataSpecialTime.fetchData();
+}
+
 /**Hook */
 onMounted(async () => {
   console.log("test");
@@ -145,11 +147,23 @@ onMounted(async () => {
 });
 
 /** Function Date */
-const selectedDate = ref<string>("");
 const dateMonth = ref<any>({
   month: new Date().getMonth(),
   year: new Date().getFullYear(),
 });
+const updateMonth = async (e: DataDateMonthObject) => {
+  // console.log(dateMonth.value);
+  if (e != null) {
+    dateYear.value = e.year;
+    dateYear.value = dataSpecialTime.year;
+    dataSpecialTime.month = dateMonth.value.month + 1;
+    dataSpecialTime.year = dateMonth.value.year;
+    // filterKeyword.value = "";
+  }
+  await dataSpecialTime.fetchData();
+};
+
+//แปลงเดือนเป็นไทย
 const monthYearThai = (val: any) => {
   if (val == null) return "";
   else return monthYear2Thai(val.month, val.year);
@@ -164,11 +178,12 @@ const monthYearThai = (val: any) => {
     <div class="row col-12 q-col-gutter-sm q-mb-sm">
       <div class="q-gutter-sm">
         <datepicker
-          v-model="selectedDate"
+          v-model="dateMonth"
           :locale="'th'"
           autoApply
           month-picker
           :enableTimePicker="false"
+          @update:modelValue="updateMonth"
         >
           <template #year="{ year }">{{ year + 543 }}</template>
           <template #year-overlay-value="{ value }">{{
@@ -205,7 +220,8 @@ const monthYearThai = (val: any) => {
         ref="filterRef"
         outlined
         debounce="300"
-        placeholder="ค้นหา"
+        placeholder="ค้นหาชื่อ-นามสกุล"
+        @keydown.enter.prevent="filterFn"
       >
         <template v-slot:append>
           <q-icon v-if="filterKeyword == ''" name="search" />
@@ -246,7 +262,7 @@ const monthYearThai = (val: any) => {
         :paging="false"
         dense
         :visible-columns="dataSpecialTime.visibleColumns"
-        :rows-per-page-options="[5, 10, 25, 50, 100]"
+        :rows-per-page-options="[10, 25, 50, 100]"
         v-model:pagination="initialPagination"
         @update:pagination="updatePagination"
       >
@@ -275,7 +291,11 @@ const monthYearThai = (val: any) => {
           <q-tr :props="props" class="cursor-pointer">
             <q-td v-for="col in props.cols" :key="col.name" :props="props">
               <div v-if="col.name == 'no'">
-                {{ props.rowIndex + 1 }}
+                {{
+                  (dataSpecialTime.page - 1) * dataSpecialTime.pageSize +
+                  props.rowIndex +
+                  1
+                }}
               </div>
               <div v-else>
                 {{ col.value }}
diff --git a/src/modules/11_discipline/components/7_ListSuspend/DialogSendToCommand.vue b/src/modules/11_discipline/components/7_ListSuspend/DialogSendToCommand.vue
index e341c4d56..08aff7b6d 100644
--- a/src/modules/11_discipline/components/7_ListSuspend/DialogSendToCommand.vue
+++ b/src/modules/11_discipline/components/7_ListSuspend/DialogSendToCommand.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, watchEffect } from "vue";
+import { ref, computed, watch } from "vue";
 import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import type { QTableProps } from "quasar";
@@ -10,7 +10,7 @@ import config from "@/app.config";
 
 /** use */
 const $q = useQuasar();
-const selected = ref<ResponseItems[]>([]);
+const selected = ref<any>([]);
 const mixin = useCounterMixin();
 const { showLoader, success, messageError, dialogConfirm, hideLoader } = mixin;
 
@@ -26,11 +26,11 @@ const columns2 = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "fullname",
+    name: "name",
     align: "left",
     label: "ชื่อ-นามสกุล",
     sortable: true,
-    field: "fullname",
+    field: "name",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -53,20 +53,20 @@ const columns2 = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "organizationPositionOld",
+    name: "organization",
     align: "left",
     label: "สังกัด",
     sortable: true,
-    field: "organizationPositionOld",
+    field: "organization",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "statustext",
+    name: "status",
     align: "left",
     label: "สถานะ",
     sortable: true,
-    field: "statustext",
+    field: "status",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -75,12 +75,12 @@ const columns2 = ref<QTableProps["columns"]>([
 /** คอลัมน์ที่แสดง */
 const visibleColumns2 = ref<string[]>([
   "no",
-  "fullname",
+  "name",
   "position",
   "positionLevel",
-  "positionNumberOld",
-  "organizationPositionOld",
-  "statustext",
+  "posNo",
+  "organization",
+  "status",
 ]);
 
 /** props*/
@@ -104,36 +104,19 @@ const checkSelected = computed(() => {
 //popup ยืนยันส่งัว
 const saveOrder = () => {
   dialogConfirm(
-    $q,
-    () => Ordersave(),
-    "ยืนยันส่งไปออกคำสั่ง",
-    "ต้องการยืนยันส่งไปออกคำสั่งใช่หรือไม่?"
-  );
+      $q,
+      async () => {
+        success($q, `ส่งข้อมูลไปออกคำสั่งสำเร็จ`);
+        emit("returnPerson", selected.value);
+        props.closeModal?.();
+      },
+      `ยืนยันการส่งไปออกคำสั่ง`,
+      `ต้องการยืนยันการส่งไปออกคำสั่งหรือไม่`
+    );
 };
 
-//ส่งไปออกคำสั่ง
-const Ordersave = async () => {
-  const id = selected.value.map((r) => r.id);
-  const body = {
-    id,
-  };
-  showLoader();
-  await http
-    .post(config.API.outReport, body)
-    .then((res: any) => {
-      success($q, "ส่งไปออกคำสั่งสำเร็จ");
-      props.closeModal?.();
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      props.getData?.();
-      hideLoader();
-    });
-};
 
-const emit = defineEmits(["update:filterKeyword2", "update:selected"]);
+const emit = defineEmits(["update:filterKeyword2", "update:selected",'returnPerson']);
 const updateInput = (value: any) => {
   emit("update:filterKeyword2", value);
 };
@@ -142,9 +125,10 @@ const updateInput = (value: any) => {
 const Reset = () => {
   emit("update:filterKeyword2", "");
 };
-watchEffect(() => {
+watch([()=>props.modal],() => {
+  selected.value = props.modal ? [] : [];
   if (props.modal === true) {
-    selected.value = [];
+    selected.value = props.rows2;
   }
 });
 </script>
@@ -205,15 +189,26 @@ watchEffect(() => {
           selection="multiple"
           v-model:selected="selected"
         >
-          <template v-slot:header-selection="scope">
-            <q-checkbox
-              keep-color
-              color="primary"
-              dense
-              v-model="scope.selected"
-            />
+        <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th auto-width>
+                <!-- <q-checkbox
+                  keep-color
+                  color="primary"
+                  dense
+                  v-model="props.selected"
+                /> -->
+              </q-th>
+              <q-th
+                v-for="col in props.cols"
+                :key="col.name"
+                :props="props"
+                style="color: #000000; font-weight: 500"
+              >
+                <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>
@@ -224,31 +219,14 @@ watchEffect(() => {
                   v-model="props.selected"
                 />
               </q-td>
-              <q-td key="no" :props="props">
-                {{ props.rowIndex + 1 }}
-              </q-td>
-              <q-td key="fullname" :props="props">
-                {{ props.row.fullname }}
-              </q-td>
-              <q-td key="position" :props="props">
-                {{ props.row.position }}
-              </q-td>
-              <q-td key="positionLevel" :props="props">
-                {{ props.row.positionLevel }}
-              </q-td>
-              <q-td key="organizationPositionOld" :props="props">
-                <div class="table_ellipsis">
-                  {{ props.row.organizationPositionOld }}
+              <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                <div v-if="col.name == 'no'">
+                  {{ props.rowIndex + 1 }}
                 </div>
-              </q-td>
-              <q-td key="organization" :props="props">
-                <div class="table_ellipsis">
-                  {{ props.row.organization }}
+                <div>
+                  {{ col.value }}
                 </div>
               </q-td>
-              <q-td key="statustext" :props="props">
-                {{ props.row.statustext }}
-              </q-td>
             </q-tr>
           </template>
         </d-table>
diff --git a/src/modules/11_discipline/components/7_ListSuspend/DismissOrder.vue b/src/modules/11_discipline/components/7_ListSuspend/DismissOrder.vue
index 781416f10..d90e9ea76 100644
--- a/src/modules/11_discipline/components/7_ListSuspend/DismissOrder.vue
+++ b/src/modules/11_discipline/components/7_ListSuspend/DismissOrder.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, watch } from "vue";
 import type { QTableProps } from "quasar";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
@@ -8,9 +8,12 @@ import { useTransferDataStore } from "@/modules/05_placement/store";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import DialogSendToCommand from "@/modules/11_discipline/components/7_ListSuspend/DialogSendToCommand.vue";
+import type { dataType } from '@/modules/11_discipline/interface/response/suspend'
 import type { ResponseData } from "@/modules/06_retirement/interface/response/out";
+import { useDisciplineSuspendStore } from "@/modules/11_discipline/store/SuspendStore";
 
 /** use */
+const dataStore = useDisciplineSuspendStore();
 const $q = useQuasar();
 const router = useRouter();
 const mixin = useCounterMixin();
@@ -29,12 +32,12 @@ const modal = ref<boolean>(false);
 /** คอลัมน์ที่แสดง */
 const visibleColumns = ref<string[]>([
   "no",
-  "fullname",
+  "name",
   "position",
   "positionLevel",
-  "organizationPositionOld",
-  "createdAt",
-  "statustext",
+  "organization",
+  "dateTotal",
+  "status",
 ]);
 
 //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
@@ -43,9 +46,7 @@ const filterKeyword2 = ref<string>("");
 const filterRef = ref<any>(null);
 
 //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
-const rows = ref<ResponseData[]>([]);
-const rows2 = ref<ResponseData[]>([]);
-const filters = ref<ResponseData[]>([]);
+const rows2 = ref<dataType[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -57,11 +58,11 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "fullname",
+    name: "name",
     align: "left",
     label: "ชื่อ-นามสกุล",
     sortable: true,
-    field: "fullname",
+    field: "name",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -84,123 +85,49 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "organizationPositionOld",
+    name: "organization",
     align: "left",
     label: "สังกัด",
     sortable: true,
-    field: "organizationPositionOld",
+    field: "organization",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "createdAt",
+    name: "dateTotal",
     align: "left",
     label: "วันที่ดำเนินการ",
     sortable: true,
-    field: "createdAt",
+    field: "dateTotal",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "statustext",
+    name: "status",
     align: "left",
     label: "สถานะ",
     sortable: true,
-    field: "statustext",
+    field: "status",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
 ]);
 onMounted(async () => {
-  await getData();
+  await getList();
 });
 
-const openModalOrder = () => {
+function openModalOrder(){
   openModal();
-  const row = filters.value.filter(
-    (r: ResponseData) =>
-      (r.status == "WAITTING" ||
-        r.status == "PENDING" ||
-        r.status == "APPROVE") &&
-      r.organizationPositionOld &&
-      r.positionTypeOld &&
-      r.positionLevelOld &&
-      r.positionNumberOld &&
-      r.salary &&
+  const dataMap = dataStore.rows.filter((r: dataType) => 
+      r.statusEn == "PENDING" &&
+      r.name &&
       r.organization &&
-      r.date
-  );
-  rows2.value = row;
-};
-
-//นำข้อมูลมาแสดง
-const getData = async () => {
-  showLoader();
-  await http
-    .get(config.API.retirementOut)
-    .then((res: any) => {
-      const data = res.data.result;
-      let list: ResponseData[] = [];
-      data.map((r: ResponseData) => {
-        list.push({
-          createdAt: date2Thai(r.createdAt),
-          date: r.date,
-          firstName: r.firstName ?? "",
-          id: r.id ?? "",
-          isActive: r.isActive ? r.isActive : false,
-          lastName: r.lastName ?? "",
-          organization: r.organization ?? "",
-          organizationPositionOld: r.organizationPositionOld ?? "",
-          posNo: r.posNo ?? "",
-          position: r.position ?? "",
-          positionLevel: r.positionLevel ?? "",
-          positionLevelOld: r.positionLevelOld ?? "",
-          positionNumberOld: r.positionNumberOld ?? "",
-          positionTypeOld: r.positionTypeOld ?? "",
-          prefix: r.prefix ?? "",
-          reason: r.reason ?? "",
-          salary: r.salary ? r.salary : 0,
-          status: r.status ?? "",
-          statustext: statusText(r.status ?? ""),
-          fullname: `${r.prefix ?? ""}${r.firstName ?? ""} ${r.lastName ?? ""}`,
-        });
-      });
-      rows.value = list;
-      filters.value = list;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-const clickDelete = async (id: string) => {
-  dialogMessage(
-    $q,
-    `ลบข้อมูล`,
-    `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
-    "delete",
-    "ยืนยัน",
-    "red",
-    async () => await deleteData(id),
-    async () => await getData()
-  );
-};
-
-const deleteData = async (id: string) => {
-  await http
-    .delete(config.API.outByid(id))
-    .then((res) => {
-      success($q, "ลบข้อมูลสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await getData();
-    });
+      r.position &&
+      r.positionLevel &&
+      r.posNo &&
+      r.organization
+  )
+  rows2.value = dataMap;
 };
 
 const openModal = () => (modal.value = true);
@@ -211,15 +138,90 @@ const resetFilter = () => {
   filterKeyword2.value = "";
   filterRef.value.focus();
 };
+
+const currentPage = ref<number>(1);
+const maxPage = ref<number>(1);
+const page = ref<number>(1);
+const rowsPerPage = ref<number>(10);
+
+/**
+ *pagination ของตาราง
+ */
 const pagination = ref({
-  sortBy: "createdAt",
-  descending: true,
-  page: 1,
-  rowsPerPage: 10,
+  descending: false,
+  page: page.value,
+  rowsPerPage: rowsPerPage.value,
+});
+
+watch(
+  () => currentPage.value,
+  () => {
+    rowsPerPage.value = pagination.value.rowsPerPage;
+    getList();
+  }
+);
+
+watch(
+  () => pagination.value.rowsPerPage,
+  () => {
+    rowsPerPage.value = pagination.value.rowsPerPage;
+    currentPage.value = 1;
+    getList();
+  }
+);
+
+/** ดึงข้อมูลหน้าหลัก */
+async function getList() {
+  showLoader();
+  await http
+    .get(
+      config.API.suspendMain(
+        currentPage.value,
+        rowsPerPage.value,
+        filterKeyword.value
+      )
+    )
+    .then((res) => {
+      maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
+      const data = res.data.result.data;
+      dataStore.getData(data);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function onSubmit(data:dataType[]){
+  console.log(data)
+  const dataMapId = data.map((item: dataType) => item.id);
+  showLoader();
+  http
+    .post(config.API.suspendReport(), {
+      id: dataMapId,
+    })
+    .then((res) => {
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+      getList()
+    });
+}
+onMounted(() => {
+  getList();
+  dataStore.columns = columns.value;
+  dataStore.visibleColumns = visibleColumns.value;
 });
 </script>
 <template>
-  <div class="toptitle text-dark col-12 row items-center">รายชื่อผู้ถูกพักราชการ</div>
+  <div class="toptitle text-dark col-12 row items-center">
+    รายชื่อผู้ถูกพักราชการ
+  </div>
   <q-card flat bordered class="col-12 q-mt-sm">
     <q-separator />
     <div class="row q-pa-md">
@@ -259,7 +261,7 @@ const pagination = ref({
           </q-input>
 
           <q-select
-            v-model="visibleColumns"
+            v-model="dataStore.visibleColumns"
             multiple
             outlined
             dense
@@ -277,91 +279,53 @@ const pagination = ref({
 
         <div class="col-12 q-pt-sm">
           <d-table
-            :columns="columns"
-            :rows="rows"
+            :columns="dataStore.columns"
+            :rows="dataStore.rows"
             :filter="filterKeyword"
             row-key="id"
-            :visible-columns="visibleColumns"
+            :visible-columns="dataStore.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-th auto-width />
+                <!-- <q-th auto-width /> -->
               </q-tr>
             </template>
             <template v-slot:body="props">
               <q-tr :props="props" class="cursor-pointer">
                 <q-td
-                  key="no"
+                  v-for="col in props.cols"
+                  :key="col.name"
                   :props="props"
-                  @click="router.push(`/retirement/out/${props.row.id}`)"
+                  @click="router.push(`/discipline-suspend/${props.row.id}`)"
                 >
-                  {{ props.rowIndex + 1 }}
-                </q-td>
-                <q-td
-                  key="fullname"
-                  :props="props"
-                  @click="router.push(`/retirement/out/${props.row.id}`)"
-                >
-                  {{ props.row.fullname }}
-                </q-td>
-                <q-td
-                  key="position"
-                  :props="props"
-                  @click="router.push(`/retirement/out/${props.row.id}`)"
-                >
-                  {{ props.row.position }}
-                </q-td>
-                <q-td
-                  key="positionLevel"
-                  :props="props"
-                  @click="router.push(`/retirement/out/${props.row.id}`)"
-                >
-                  {{ props.row.positionLevel }}
-                </q-td>
-                <q-td
-                  key="organizationPositionOld"
-                  :props="props"
-                  @click="router.push(`/retirement/out/${props.row.id}`)"
-                >
-                  <div class="table_ellipsis">
-                    {{ props.row.organizationPositionOld }}
+                  <div v-if="col.name === 'no'">
+                    {{ props.rowIndex + 1 }}
                   </div>
-                </q-td>
-                <q-td
-                  key="organization"
-                  :props="props"
-                  @click="router.push(`/retirement/out/${props.row.id}`)"
-                >
-                  <div class="table_ellipsis">
+                  <div
+                    v-else-if="col.name === 'organization'"
+                    class="table_ellipsis"
+                  >
                     {{ props.row.organization }}
                   </div>
-                </q-td>
-                <q-td key="createdAt" :props="props">
-                  {{ props.row.createdAt }}
-                </q-td>
-                <q-td key="statustext" :props="props">
-                  {{ props.row.statustext }}
-                </q-td>
-                <q-td auto-width>
-                  <q-btn
-                    v-if="
-                      props.row.status !== 'DONE' &&
-                      props.row.status !== 'REPORT'
-                    "
-                    dense
-                    size="12px"
-                    flat
-                    round
-                    color="red"
-                    @click="clickDelete(props.row.id)"
-                    icon="mdi-delete"
-                  >
-                    <q-tooltip>ลบข้อมูล</q-tooltip>
-                  </q-btn>
+                  <div v-else>
+                    {{ col.value }}
+                  </div>
                 </q-td>
               </q-tr>
             </template>
@@ -376,7 +340,7 @@ const pagination = ref({
     :closeModal="closeModal"
     :rows2="rows2"
     v-model:filterKeyword2="filterKeyword2"
-    :fecthlistRecevice="getData"
+    @returnPerson="onSubmit"
   />
 </template>
 <style scoped lang="scss"></style>
diff --git a/src/modules/11_discipline/components/7_ListSuspend/OutRegistry.vue b/src/modules/11_discipline/components/7_ListSuspend/OutRegistry.vue
index 0608a1301..c74a2df5d 100644
--- a/src/modules/11_discipline/components/7_ListSuspend/OutRegistry.vue
+++ b/src/modules/11_discipline/components/7_ListSuspend/OutRegistry.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
+import { onMounted, ref, reactive } from "vue";
 import { useQuasar } from "quasar";
 import { useRoute, useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
@@ -7,12 +7,14 @@ import CurrencyInput from "@/components/CurruncyInput.vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import keycloak from "@/plugins/keycloak";
+import { useDisciplineSuspendStore } from "@/modules/11_discipline/store/SuspendStore";
 
 /**Import type */
 import type { QForm } from "quasar";
-import type { ResponseDataDetail } from "@/modules/06_retirement/interface/response/expulsion";
+import type { dataDetail } from "@/modules/11_discipline/interface/response/suspend";
 
 /** use */
+const dataStore = useDisciplineSuspendStore();
 const $q = useQuasar();
 const route = useRoute();
 const router = useRouter();
@@ -37,25 +39,31 @@ const organizationPositionOld = ref<string>("");
 const positionTypeOld = ref<string>("");
 const positionLevelOld = ref<string>("");
 const posNo = ref<string>("");
-const salary = ref<number>(0);
 const organization = ref<string>("");
 const date = ref<Date | null>(null);
 const reason = ref<string>("");
-const responseData = ref<ResponseDataDetail>({
-  personId: "",
-  avataPath: "",
-  createdAt: new Date(),
-  date: new Date(),
+
+const data = reactive<dataDetail>({
   id: "",
+  citizenId: "",
+  avataPath: "",
+  name: "",
+  prefix: "",
+  firstName: "",
+  lastName: "",
   organization: "",
-  organizationPositionOld: "",
-  positionLevelOld: "",
-  positionNumberOld: "",
-  positionTypeOld: "",
-  reason: "",
+  position: "",
+  posNo: "",
+  positionLevel: "",
   salary: 0,
   status: "",
-  fullname: "",
+  descriptionSuspend: "",
+  startDateSuspend: null,
+  endDateSuspend: null,
+  title: "",
+  offenseDetails: "",
+  disciplinaryFaultLevel: "",
+  disciplinaryCaseFault: "",
 });
 
 /** Hook */
@@ -70,36 +78,31 @@ onMounted(async () => {
 const getData = async () => {
   showLoader();
   await http
-    .get(config.API.outByid(dataId))
+    .get(config.API.suspendById(dataId))
     .then((res) => {
-      const data = res.data.result;
-      responseData.value.personId = data.profileId;
-      responseData.value.createdAt = data.createdAt;
-      responseData.value.date =
-        data.date !== null ? new Date(data.date) : new Date();
-      responseData.value.id = data.id ?? "";
-      responseData.value.organization = data.organization ?? "";
-      responseData.value.organizationPositionOld =
-        data.organizationPositionOld ?? "";
-      responseData.value.positionLevelOld = data.positionLevelOld ?? "";
-      responseData.value.positionNumberOld = data.positionNumberOld ?? "";
-      responseData.value.positionTypeOld = data.positionTypeOld ?? "";
-      responseData.value.reason = data.reason ?? "";
-      responseData.value.salary = data.salary !== null ? data.salary : 0;
-      responseData.value.status = data.status ?? "";
-      responseData.value.avataPath = data.avatar ?? "";
-      responseData.value.fullname = `${data.firstName ?? "-"} ${
-        data.lastName ?? "-"
-      }`;
-
-      organizationPositionOld.value = data.organizationPositionOld ?? "";
-      positionTypeOld.value = data.positionTypeOld ?? "";
-      positionLevelOld.value = data.positionLevelOld ?? "";
-      posNo.value = data.positionNumberOld ?? "";
-      salary.value = data.salary ?? "";
-      organization.value = data.organization ?? "";
-      date.value = data.date !== null ? new Date(data.date) : null;
-      reason.value = data.reason ?? "";
+      console.log(res.data.result);
+      const dataGet = res.data.result;
+      data.id = dataGet.id;
+      data.citizenId = dataGet.citizenId;
+      data.name = `${dataGet.prefix}${dataGet.firstName} ${dataGet.lastName}`;
+      data.prefix = dataGet.prefix;
+      data.firstName = dataGet.firstName;
+      data.lastName = dataGet.lastName;
+      data.organization = dataGet.organization;
+      data.position = dataGet.position;
+      data.posNo = dataGet.posNo;
+      data.positionLevel = dataGet.positionLevel;
+      data.salary = dataGet.salary;
+      data.status = dataGet.status;
+      data.descriptionSuspend = dataGet.descriptionSuspend
+        ? dataGet.descriptionSuspend
+        : "ออกจากราชการ";
+      data.startDateSuspend = dataGet.startDateSuspend;
+      data.endDateSuspend = dataGet.endDateSuspend;
+      data.title = dataGet.title;
+      data.offenseDetails = dataGet.offenseDetails;
+      data.disciplinaryFaultLevel = dataGet.disciplinaryFaultLevel;
+      data.disciplinaryCaseFault = dataGet.disciplinaryCaseFault;
     })
     .catch((e) => {
       messageError($q, e);
@@ -144,18 +147,18 @@ const conditionSave = async () => {
  */
 const saveData = async () => {
   const body = {
-    organization: organization.value,
-    reason: reason.value,
-    organizationPositionOld: organizationPositionOld.value,
-    date: date.value,
-    positionTypeOld: positionTypeOld.value,
-    positionLevelOld: positionLevelOld.value,
-    positionNumberOld: posNo.value,
-    amountOld: salary.value,
+    organization: data.organization,
+    position: data.position,
+    posNo: data.posNo,
+    positionLevel: data.positionLevel,
+    salary: data.salary,
+    descriptionSuspend: data.descriptionSuspend,
+    startDateSuspend: data.startDateSuspend,
+    endDateSuspend: data.endDateSuspend,
   };
   showLoader();
   await http
-    .put(config.API.outByid(dataId), body)
+    .put(config.API.suspendById(dataId), body)
     .then((res: any) => {
       success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
       edit.value = false;
@@ -192,12 +195,12 @@ const getClass = (val: boolean) => {
       class="q-mr-sm"
       @click="router.go(-1)"
     />
-    รายละเอียดการของ {{ responseData.fullname }}
+    รายละเอียดการของ {{ data.name }}
   </div>
   <q-card bordered class="row col-12 text-dark">
     <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
       <div class="q-pl-sm text-weight-bold text-subtitle2">
-        {{ responseData.fullname }}
+        {{ data.name }}
       </div>
       <q-space />
       <q-btn
@@ -207,24 +210,21 @@ const getClass = (val: boolean) => {
         icon-right="mdi-open-in-new"
         class="q-px-sm"
         label="ดูข้อมูลทะเบียนประวัติ"
-        @click="router.push(`/registry/${responseData.personId}`)"
+        @click="router.push(`/registry/${data.id}`)"
       />
     </div>
     <div class="col-12"><q-separator /></div>
     <div class="row col-12 q-pa-md">
       <div class="col-12 row bg-white q-col-gutter-md">
         <div class="col-xs-3 col-sm-2 col-md-1 row">
-          <q-img
-            :src="responseData.avataPath"
-            v-if="responseData.avataPath !== ''"
-          />
+          <q-img :src="data.avataPath" v-if="data.avataPath !== ''" />
           <q-img src="@/assets/avatar_user.jpg" v-else />
         </div>
         <div class="col-xs-6 col-sm-3 row items-center">
           <div class="col-12 q-pl-md">
             <div class="col-12 text-top">ตำแหน่งในสายงาน</div>
             <div class="col-12 text-detail">
-              {{ responseData.positionTypeOld }}
+              {{ data.position }}
             </div>
           </div>
         </div>
@@ -232,7 +232,7 @@ const getClass = (val: boolean) => {
           <div class="col-12">
             <div class="col-12 text-top">ระดับ</div>
             <div class="col-12 text-detail">
-              {{ responseData.positionLevelOld }}
+              {{ data.positionLevel }}
             </div>
           </div>
         </div>
@@ -240,7 +240,7 @@ const getClass = (val: boolean) => {
           <div class="col-12">
             <div class="col-12 text-top">สังกัด</div>
             <div class="col-12 text-detail">
-              {{ responseData.organizationPositionOld }}
+              {{ data.organization }}
             </div>
           </div>
         </div>
@@ -254,11 +254,7 @@ const getClass = (val: boolean) => {
         แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย
       </div>
       <q-space />
-      <div
-        v-if="
-          responseData.status !== 'DONE' && responseData.status !== 'REPORT'
-        "
-      >
+      <div v-if="data.status !== 'DONE' && data.status !== 'REPORT'">
         <div class="q-gutter-sm" v-if="!edit">
           <q-btn
             outline
@@ -297,7 +293,7 @@ const getClass = (val: boolean) => {
     <q-form ref="myForm">
       <div class="row col-12 q-pa-md">
         <div class="col-12 row bg-white q-col-gutter-md">
-          <div class="col-xs-12 row items-center">
+          <!-- <div class="col-xs-12 row items-center">
             <div class="col-12">
               <div class="text-weight-bold">ตำแหน่งและหน่วยงานเดิม</div>
             </div>
@@ -316,7 +312,7 @@ const getClass = (val: boolean) => {
                 type="textarea"
               />
             </div>
-          </div>
+          </div> -->
           <div class="col-xs-6 col-sm-3 row">
             <div class="col-12">
               <q-input
@@ -326,7 +322,7 @@ const getClass = (val: boolean) => {
                 lazy-rules
                 :readonly="!edit"
                 :borderless="!edit"
-                v-model="positionTypeOld"
+                v-model="data.position"
                 :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]"
                 hide-bottom-space
                 :label="`${'ตำแหน่งประเภท'}`"
@@ -342,7 +338,7 @@ const getClass = (val: boolean) => {
                 lazy-rules
                 :readonly="!edit"
                 :borderless="!edit"
-                v-model="positionLevelOld"
+                v-model="data.positionLevel"
                 :rules="[(val) => !!val || `${'กรุณากรอกระดับ'}`]"
                 hide-bottom-space
                 :label="`${'ระดับ'}`"
@@ -358,17 +354,17 @@ const getClass = (val: boolean) => {
                 lazy-rules
                 :readonly="!edit"
                 :borderless="!edit"
-                v-model="posNo"
-                :rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]"
+                v-model="data.posNo"
+                :rules="[(val) => !!val || `${'กรุณากรอกเลขที่ตำแหน่ง'}`]"
                 hide-bottom-space
-                :label="`${'เลขที่'}`"
+                :label="`${'เลขที่ตำแหน่ง'}`"
               />
             </div>
           </div>
           <div class="col-xs-6 col-sm-3 row">
             <div class="col-12">
               <CurrencyInput
-                v-model="salary"
+                v-model="data.salary"
                 :edit="edit"
                 :options="{
                   currency: 'THB',
@@ -387,19 +383,19 @@ const getClass = (val: boolean) => {
                 lazy-rules
                 :readonly="!edit"
                 :borderless="!edit"
-                v-model="organization"
+                v-model="data.organization"
                 :rules="[(val) => !!val || `${'กรุณากรอก'}`]"
                 hide-bottom-space
                 :label="`${'สังกัด'}`"
               />
             </div>
           </div>
-          <div class="col-xs-6 col-sm-6 row">
+          <div class="col-xs-3 col-sm-3 row">
             <div class="col-12">
               <datepicker
                 menu-class-name="modalfix"
                 :readonly="!edit"
-                v-model="date"
+                v-model="data.startDateSuspend"
                 :locale="'th'"
                 autoApply
                 :enableTimePicker="false"
@@ -417,7 +413,11 @@ const getClass = (val: boolean) => {
                     lazy-rules
                     :readonly="!edit"
                     :borderless="!edit"
-                    :model-value="date !== null ? date2Thai(date) : null"
+                    :model-value="
+                      data.startDateSuspend !== null
+                        ? date2Thai(data.startDateSuspend)
+                        : null
+                    "
                     :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
                     hide-bottom-space
                     :label="`${'ตั้งแต่วัน'}`"
@@ -439,7 +439,134 @@ const getClass = (val: boolean) => {
               </datepicker>
             </div>
           </div>
+          <div class="col-xs-3 col-sm-3 row">
+            <div class="col-12">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="data.endDateSuspend"
+                :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
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :readonly="!edit"
+                    :borderless="!edit"
+                    :model-value="
+                      data.endDateSuspend !== null
+                        ? date2Thai(data.endDateSuspend)
+                        : null
+                    "
+                    :rules="[(val) => !!val || `${'กรุณาเลือกถึงวันที่'}`]"
+                    hide-bottom-space
+                    :label="`${'ถึงวันที่'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+          </div>
           <div class="col-12">
+            <q-input
+              :class="getClass(edit)"
+              :outlined="edit"
+              dense
+              readonly
+              :borderless="!edit"
+              v-model="data.title"
+              hide-bottom-space
+              :label="`${'เรื่องร้องเรียน '}`"
+              type="textarea"
+            />
+          </div>
+          <div class="col-3">
+            <q-select
+              for="#fault"
+              :outlined="edit"
+              dense
+              readonly
+              v-model="data.offenseDetails"
+              :options="
+                          dataStore.offenseDetailsOps
+                        "
+              label="ผลการสืบสวน"
+              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>
+          </div>
+          <div class="col-4">
+            <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                readonly
+                :borderless="!edit"
+                v-model="data.disciplinaryFaultLevel"
+                hide-bottom-space
+                :label="`${'ระดับโทษความผิด'}`"
+              />
+          </div>
+          <div class="col-12">
+            <q-input
+              :class="getClass(edit)"
+              :outlined="edit"
+              dense
+              lazy-rules
+              readonly
+              :borderless="!edit"
+              v-model="data.disciplinaryCaseFault"
+              hide-bottom-space
+              :label="`${'กรณีความผิด '}`"
+              type="textarea"
+            />
+          </div>
+          <div class="col-12">
+            <q-input
+              :class="getClass(edit)"
+              :outlined="edit"
+              dense
+              lazy-rules
+              :readonly="!edit"
+              :borderless="!edit"
+              v-model="data.descriptionSuspend"
+              hide-bottom-space
+              :label="`${'เหตุที่ถูกสั่งพักราชการ '}`"
+              type="textarea"
+            />
+          </div>
+          <!-- <div class="col-12">
             <q-input
               :class="getClass(edit)"
               :outlined="edit"
@@ -452,7 +579,7 @@ const getClass = (val: boolean) => {
               :label="`${'หมายเหตุ '}`"
               type="textarea"
             />
-          </div>
+          </div> -->
         </div>
       </div>
     </q-form>
diff --git a/src/modules/11_discipline/interface/response/suspend.ts b/src/modules/11_discipline/interface/response/suspend.ts
new file mode 100644
index 000000000..e4ada0030
--- /dev/null
+++ b/src/modules/11_discipline/interface/response/suspend.ts
@@ -0,0 +1,78 @@
+interface listData{
+        id: string
+        citizenId: string
+        prefix: string
+        firstName: string
+        lastName: string
+        organization: string
+        position: string
+        posNo: string
+        positionLevel: string
+        salary: number
+        status: string
+        descriptionSuspend: string
+        startDateSuspend: Date,
+        endDateSuspend: Date,
+        title: string
+        offenseDetails: string
+        disciplinaryFaultLevel: string
+        disciplinaryCaseFault: string
+}
+
+interface dataType{
+        id: string
+        citizenId: string
+        name:string
+        prefix: string
+        firstName: string
+        lastName: string
+        organization: string
+        position: string
+        posNo: string
+        positionLevel: string
+        salary: number
+        status: string
+        statusEn: string
+        descriptionSuspend: string
+        dateTotal:string
+        startDateSuspend: Date,
+        endDateSuspend: Date,
+        title: string
+        offenseDetails: string
+        disciplinaryFaultLevel: string
+        disciplinaryCaseFault: string
+}
+
+interface dataDetail{
+    id: string
+    citizenId: string
+    avataPath:string
+    name:string
+    prefix: string
+    firstName: string
+    lastName: string
+    organization: string
+    position: string
+    posNo: string
+    positionLevel: string
+    salary: number
+    status: string
+    descriptionSuspend: string
+    startDateSuspend: Date|null
+    endDateSuspend: Date|null
+    title: string
+    offenseDetails: string
+    disciplinaryFaultLevel: string
+    disciplinaryCaseFault: string
+}
+
+interface DataOption {
+    id:string
+    name:string
+}
+export type {
+    listData,
+    dataType,
+    dataDetail,
+    DataOption
+}
\ No newline at end of file
diff --git a/src/modules/11_discipline/store/ComplaintsStore.ts b/src/modules/11_discipline/store/ComplaintsStore.ts
index 4928b8a35..dd8a51d2f 100644
--- a/src/modules/11_discipline/store/ComplaintsStore.ts
+++ b/src/modules/11_discipline/store/ComplaintsStore.ts
@@ -65,7 +65,7 @@ export const useComplainstDataStore = defineStore(
       { id: "URGENT", name: "ด่วน" },
       { id: "VERY_URGENT", name: "ด่วนมาก" },
     ]);
-
+    
     function levelConsiderationTran(val: string) {
       return (
         levelConsiderationtOptions.value.find((v: any) => v.id === val)?.name ??
diff --git a/src/modules/11_discipline/store/SuspendStore.ts b/src/modules/11_discipline/store/SuspendStore.ts
new file mode 100644
index 000000000..c87b40533
--- /dev/null
+++ b/src/modules/11_discipline/store/SuspendStore.ts
@@ -0,0 +1,85 @@
+import { defineStore } from "pinia";
+import { ref } from 'vue'
+import type { listData, dataType ,DataOption} from '@/modules/11_discipline/interface/response/suspend'
+import type { QTableProps } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+
+export const useDisciplineSuspendStore = defineStore(
+  "disciplineSuspendStore",
+  () => {
+    const rows = ref<dataType[]>([])
+    const columns = ref<QTableProps["columns"]>([])
+    const visibleColumns = ref<string[]>([])
+
+    const mixin = useCounterMixin()
+    const { date2Thai } = mixin
+    
+    const offenseDetailsOps = ref<DataOption[]>([
+      { id: "NOT_SPECIFIED", name: "ยังไม่ระบุ" },
+      { id: "NOT_DEADLY", name: "ไม่ร้ายแรง" },
+      { id: "DEADLY", name: "ร้ายแรง" },
+    ]);
+
+    function getData(data: listData[]) {
+      console.log(data)
+      const dataList: dataType[] =  data.map((item: listData) => ({
+        id: item.id,
+        citizenId: item.citizenId,
+        name: `${item.prefix}${item.firstName} ${item.lastName}`,
+        prefix: item.prefix,
+        firstName: item.firstName,
+        lastName: item.lastName,
+        organization: item.organization,
+        position: item.position,
+        posNo: item.posNo,
+        positionLevel: item.positionLevel,
+        salary: item.salary,
+        status: statusTothai(item.status),
+        statusEn: item.status,
+        descriptionSuspend: item.descriptionSuspend,
+        dateTotal:item.startDateSuspend && item.endDateSuspend ? `${date2Thai(item.startDateSuspend)} - ${date2Thai(item.endDateSuspend)}`:'-',
+        startDateSuspend: item.startDateSuspend,
+        endDateSuspend: item.endDateSuspend,
+        title: item.title,
+        offenseDetails: item.offenseDetails,
+        disciplinaryFaultLevel: item.disciplinaryFaultLevel,
+        disciplinaryCaseFault: item.disciplinaryCaseFault,
+      }))
+
+      console.log('dataList ===',dataList)
+      rows.value = dataList
+    }
+
+    const statusTothai = (val: string) => {
+      switch (val) {
+        case "WAITTING":
+          return "รอดำเนินการ";
+        case "PENDING":
+          return "รอออกคำสั่ง";
+        case "APPROVE":
+          return "อนุมัติ";
+        case "REJECT":
+          return "ไม่อนุมัติ";
+        case "REPORT":
+          return "ส่งรายชื่อไปออกคำสั่ง";
+        case "DONE":
+          return "ออกคำสั่งเสร็จแล้ว";
+  
+        default:
+          return "-";
+      }
+    };
+    function convertOffenseDetails(val: string) {
+      const result = offenseDetailsOps.value.find((x: any) => x.id == val)?.name;
+      return result ? result : "-";
+    }
+
+    return {
+      rows,
+      columns,
+      visibleColumns,
+      getData,
+      offenseDetailsOps
+    };
+  }
+);