diff --git a/src/api/09_leave/api.leave.ts b/src/api/09_leave/api.leave.ts
index daebda442..7276d605d 100644
--- a/src/api/09_leave/api.leave.ts
+++ b/src/api/09_leave/api.leave.ts
@@ -6,5 +6,6 @@ export default {
 
   /**รายการลงเวลาปฏิบัติงาน */
   logRecord: () => `${leave}/log-record`,
+  timeRecord: () => `${leave}/time-record`,
   timeRecordById: (id: string) => `${leave}/time-record/${id}`,
 };
diff --git a/src/modules/09_leave/components/1_Work/Tab1.vue b/src/modules/09_leave/components/1_Work/Tab1.vue
index ed16da718..bed1e3c3e 100644
--- a/src/modules/09_leave/components/1_Work/Tab1.vue
+++ b/src/modules/09_leave/components/1_Work/Tab1.vue
@@ -1,5 +1,8 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 /** importType*/
 import type { QTableProps } from "quasar";
@@ -19,13 +22,15 @@ import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
 /** useStore */
 const mixin = useCounterMixin();
 const workStore = useWorklistDataStore();
-const { date2Thai, dateToISO, showLoader, hideLoader } = mixin;
+const { date2Thai, dateToISO, showLoader, hideLoader, messageError } = mixin;
+
+const $q = useQuasar(); //ใช้ noti quasar
 
 const keyword = ref<string>("");
 const page = ref<number>(1);
-const rowsPerPage = ref<number>(10);
+const rowsPerPage = ref<number>(3);
 const maxPage = ref<number>(1);
-const filetStatus = ref<string>("");
+const filetStatus = ref<string>("LATE");
 
 /** ข้อมูลหัวตาราง*/
 const columns = ref<QTableProps["columns"]>([
@@ -115,42 +120,6 @@ const visibleColumns = ref<string[]>([
 const rows = ref<TableRowsTime[]>([]);
 
 async function fetchListTimeRecord() {
-  showLoader();
-  const listData: DataResTime[] = [
-    {
-      id: "00000000-0000-0000-0000-000000000000",
-      fullName: "นางอมร ใจดี",
-      checkInDate: new Date(),
-      checkInTime: "08:30",
-      checkInLocation: "สำนักงงาน",
-      checkInLat: "18.7903",
-      checkInLon: "99.0029",
-      checkInStatus: "normal",
-      checkOutDate: new Date(),
-      checkOutLocation: "สำนักงงาน",
-      checkOutTime: "18:04",
-      checkOutLat: "18.7903",
-      checkOutLon: "99.0029",
-      checkOutStatus: "late",
-    },
-    {
-      id: "00000000-0000-0000-0000-000000000000",
-      fullName: "นางอมร ใจดี",
-      checkInDate: new Date(),
-      checkInTime: "08:30",
-      checkInLocation: "สำนักงงาน",
-      checkInLat: "18.7903",
-      checkInLon: "99.0029",
-      checkInStatus: "normal",
-      checkOutDate: new Date(),
-      checkOutLocation: "สำนักงงาน",
-      checkOutTime: "18:04",
-      checkOutLat: "18.7903",
-      checkOutLon: "99.0029",
-      checkOutStatus: "late",
-    },
-  ];
-
   const date = new Date(workStore.selectDate as string | Date);
   const querySting = {
     startDate: dateToISO(date), //*วันที่เริ่ม
@@ -160,29 +129,43 @@ async function fetchListTimeRecord() {
     pageSize: rowsPerPage.value, //*จำนวนแถวต่อหน้า
     keyword: keyword.value, //keyword ค้นหา
   };
-
-  console.log(querySting);
-
-  const datalist: TableRowsTime[] = listData.map((e: DataResTime) => ({
-    id: e.id,
-    fullName: e.fullName,
-    checkInDate: e.checkInDate && date2Thai(e.checkInDate),
-    checkInTime: e.checkInTime,
-    checkInLocation: e.checkInLocation,
-    checkInLat: e.checkInLat,
-    checkInLon: e.checkInLon,
-    checkInStatus: e.checkInStatus && workStore.convertSatatus(e.checkInStatus),
-    checkOutDate: e.checkOutDate && date2Thai(e.checkOutDate),
-    checkOutLocation: e.checkOutLocation,
-    checkOutTime: e.checkOutTime,
-    checkOutLat: e.checkOutLat,
-    checkOutLon: e.checkOutLon,
-    checkOutStatus:
-      e.checkOutStatus && workStore.convertSatatus(e.checkOutStatus),
-  }));
-  rows.value = datalist;
-  maxPage.value = Math.ceil(rows.value.length / rowsPerPage.value);
-  hideLoader();
+  showLoader();
+  await http
+    .get(
+      config.API.timeRecord() +
+        `?startDate=${querySting.startDate}&endDate=${querySting.startDate}
+        &status=${querySting.status}&page=${querySting.page}&pageSize=${querySting.pageSize}&keyword=${querySting.keyword}`
+    )
+    .then((res) => {
+      maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
+      const datalist: TableRowsTime[] = res.data.result.data.map(
+        (e: DataResTime) => ({
+          id: e.id,
+          fullName: e.fullName,
+          checkInDate: e.checkInDate && date2Thai(e.checkInDate),
+          checkInTime: e.checkInTime,
+          checkInLocation: e.checkInLocation,
+          checkInLat: e.checkInLat,
+          checkInLon: e.checkInLon,
+          checkInStatus:
+            e.checkInStatus && workStore.convertSatatus(e.checkInStatus),
+          checkOutDate: e.checkOutDate && date2Thai(e.checkOutDate),
+          checkOutLocation: e.checkOutLocation,
+          checkOutTime: e.checkOutTime,
+          checkOutLat: e.checkOutLat,
+          checkOutLon: e.checkOutLon,
+          checkOutStatus:
+            e.checkOutStatus && workStore.convertSatatus(e.checkOutStatus),
+        })
+      );
+      rows.value = datalist;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 async function updatePaging(
@@ -194,7 +177,7 @@ async function updatePaging(
   page.value = currentPage;
   rowsPerPage.value = params.rowsPerPage ?? rowsPerPage.value;
   keyword.value = key ?? keyword.value;
-  filetStatus.value = status;
+  filetStatus.value = status ?? filetStatus.value;
   await fetchListTimeRecord();
 }
 
diff --git a/src/modules/09_leave/components/1_Work/ToolBar.vue b/src/modules/09_leave/components/1_Work/ToolBar.vue
index 55a305e1f..db6f7853d 100644
--- a/src/modules/09_leave/components/1_Work/ToolBar.vue
+++ b/src/modules/09_leave/components/1_Work/ToolBar.vue
@@ -16,10 +16,10 @@ const updateProp = (newPagination: any, keyword: string, status: string) => {
 };
 
 const option = ref<any[]>([
-  { id: "", name: "ทั้งหมด" },
-  { id: "normal", name: "ปกติ" },
-  { id: "late", name: "สาย" },
-  { id: "absent", name: "ขาดราชการ" },
+  { id: "ALL", name: "ทั้งหมด" },
+  { id: "NORMAL", name: "ปกติ" },
+  { id: "LATE", name: "สาย" },
+  { id: "ABSENT", name: "ขาดราชการ" },
 ]);
 const filetStatus = ref<string>("");
 const keyword = ref<string>("");
diff --git a/src/modules/11_discipline/components/1_Complaint/Popup.vue b/src/modules/11_discipline/components/1_Complaint/Popup.vue
index 54d7e8398..b33523316 100644
--- a/src/modules/11_discipline/components/1_Complaint/Popup.vue
+++ b/src/modules/11_discipline/components/1_Complaint/Popup.vue
@@ -15,6 +15,10 @@ const $q = useQuasar();
 const { dialogConfirm, dialogMessageNotify, success } = mixin;
 
 const props = defineProps({
+  title: {
+    type: String,
+    default: 'ส่งไปสืบสวน',
+  },
   modal: {
     type: Boolean,
     require: true,
@@ -128,13 +132,13 @@ function onclickSend() {
     dialogConfirm(
       $q,
       async () => {
-        success($q, "ส่งข้อมูลไปสืบสวนสำเร็จ");
+        success($q, `ส่งข้อมูล${props.title}สำเร็จ`);
         console.log(selected.value);
 
         props.close?.();
       },
-      "ยืนยันการส่งไปสืบสวน",
-      "ต้องการยืนยันการส่งไปสืบสวนหรือไม่"
+      `ยืนยันการส่ง${props.title}`,
+      `ต้องการยืนยันการส่ง${props.title}หรือไม่`
     );
   } else {
     dialogMessageNotify($q, "กรุณาเลือกรายชื่อ");
@@ -155,7 +159,7 @@ watch([() => props.modal], () => {
 <template>
   <q-dialog v-model="props.modal">
     <q-card style="width: 820px; max-width: 80vw">
-      <DialogHeader tittle="มีมูลส่งไปสืบสวน" :close="onClickClose" />
+      <DialogHeader :tittle="props.title" :close="onClickClose" />
 
       <q-separator />
 
@@ -277,7 +281,7 @@ watch([() => props.modal], () => {
       </q-card-section>
       <q-separator />
       <q-card-actions align="right" class="bg-white text-teal">
-        <q-btn label="ส่งไปสืบสวน" color="public" @click="onclickSend" />
+        <q-btn :label="props.title" color="public" @click="onclickSend" />
       </q-card-actions>
     </q-card>
   </q-dialog>
diff --git a/src/modules/11_discipline/components/2_InvestigateFacts/EditPage.vue b/src/modules/11_discipline/components/2_InvestigateFacts/EditPage.vue
index d4d26cc64..111fe4d86 100644
--- a/src/modules/11_discipline/components/2_InvestigateFacts/EditPage.vue
+++ b/src/modules/11_discipline/components/2_InvestigateFacts/EditPage.vue
@@ -2,11 +2,12 @@
 import { onMounted, reactive, ref } from "vue";
 import FormComplaints from "@/modules/11_discipline/components/1_Complaint/Form.vue"; //เรื่องร้องเรียน
 import FormInvestigatefacts from "@/modules/11_discipline/components/2_InvestigateFacts/Form.vue"; //สืบสวนข้อเท็จจริง
-import type { FormData } from "@/modules/11_discipline/interface/request/investigate";
 import { useRouter, useRoute } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useInvestigateFactStore } from "@/modules/11_discipline/store/InvestigateFactStore";
 import { useQuasar } from "quasar";
+import Popup from "@/modules/11_discipline/components/1_Complaint/Popup.vue";
+import type { FormData } from "@/modules/11_discipline/interface/request/investigateFact";
 
 const $q = useQuasar();
 const mixin = useCounterMixin();
@@ -32,7 +33,8 @@ const data = reactive<FormData>({
   daysExtend: null,
   statusResult: "",
   causeText: "",
-  complaintStatus: "NEW",
+  complaintStatus: "",
+  reason: "",
 });
 
 /** จำลองข้อมูลจาก api */
@@ -48,10 +50,11 @@ const fetchData = async () => {
   data.clickTime = false;
   data.date = new Date("2023-11-07T14:58:00");
   data.dateEnd = new Date("2023-11-08T14:58:00");
-  data.investigation = "002";
+  data.investigation = "appoint_directors";
   data.daysExtend = null;
-  data.statusResult = "ไม่ระบุ";
+  data.statusResult = "not_specified";
   data.causeText = "";
+  data.complaintStatus = "NEW";
 };
 
 /**
@@ -64,14 +67,20 @@ async function onSubmit(id: string) {
   router.push(`/discipline/investigatefacts`);
 }
 
+const modalPopup = ref<boolean>(false);
 /** ยืนยัน ส่งไปสอบสวน */
 function sentInvestigate() {
-  dialogConfirm(
-    $q,
-    () => confirmSentInvestigate(),
-    "ยืนยันส่งไปสอบสวน",
-    "ต้องการยืนยันส่งไปสอบสวนใช่หรือไม่?"
-  );
+  modalPopup.value = true;
+  // dialogConfirm(
+  //   $q,
+  //   () => confirmSentInvestigate(),
+  //   "ยืนยันส่งไปสอบสวน",
+  //   "ต้องการยืนยันส่งไปสอบสวนใช่หรือไม่?"
+  // );
+}
+
+function closePopup() {
+  modalPopup.value = false;
 }
 
 /** ยืนยัน ยุติเรื่อง */
@@ -177,7 +186,7 @@ onMounted(() => {
       </q-tab-panels>
     </q-card>
 
-    <!-- <Form :on-submit="onSubmit" :data="data" /> -->
+    <Popup :modal="modalPopup" :close="closePopup" title="ส่งไปสอบสวน"/>
   </div>
 </template>
 <style scoped>
diff --git a/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue b/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue
index 939201bf7..25840ddc5 100644
--- a/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue
+++ b/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue
@@ -10,8 +10,7 @@ import { useInvestigateFactStore } from "@/modules/11_discipline/store/Investiga
 import type {
   FormData,
   MyObjectInvestigateRef,
-} from "@/modules/11_discipline/interface/request/investigate";
-import { diffDates } from "@fullcalendar/core/internal";
+} from "@/modules/11_discipline/interface/request/investigateFact";
 
 const $q = useQuasar();
 const route = useRoute();
@@ -23,7 +22,7 @@ const { filterFnOptionsType } = investigateFactStore;
 const { date2Thai, dialogConfirm } = mixin;
 const investigateDis = useInvestigateDisStore();
 
-const complaintsOptions = ref<any>([]);
+// const complaintsOptions = ref<any>([]);
 const isUpdate = ref<boolean>(false);
 
 /** ตัวแปร ref สำหรับแสดง validate */
@@ -41,6 +40,7 @@ const investigationRef = ref<Object | null>(null);
 const daysExtendRef = ref<Object | null>(null);
 const statusResultRef = ref<Object | null>(null);
 const causeTextRef = ref<Object | null>(null);
+const reasonRef = ref<Object | null>(null);
 
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
@@ -70,11 +70,12 @@ const formData = reactive<FormData>({
   dateEnd: new Date(),
   investigation: "",
   daysExtend: null,
-  statusResult: "ยังไม่ระบุ",
+  statusResult: "",
   causeText: "",
   complaintStatus: "",
+  reason: "",
 });
-const evidenceFiles = ref<any>([{ name: "ชื่อไฟล" }, { name: "ชื่อไฟล" }]);
+const evidenceFiles = ref<any>([{ name: "ชื่อไฟล์" }, { name: "ชื่อไฟล์" }]);
 
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const objectInvestigate: MyObjectInvestigateRef = {
@@ -91,6 +92,7 @@ const objectInvestigate: MyObjectInvestigateRef = {
   daysExtend: daysExtendRef,
   statusResult: statusResultRef,
   causeText: causeTextRef,
+  reason: reasonRef,
 };
 
 const rows = ref([]);
@@ -163,7 +165,7 @@ async function fetchDataDetail() {
     formData.dateEnd = props.data.dateEnd;
     formData.investigation = props.data.investigation;
     formData.daysExtend = props.data.daysExtend;
-    formData.statusResult = props.data.results;
+    formData.statusResult = props.data.statusResult;
     formData.causeText = props.data.results;
   }
 }
@@ -601,61 +603,162 @@ watch(props.data, async () => {
           />
         </div>
 
-        <div class="row col-12 q-col-gutter-md">
-          <div class="col-3">
-            <q-select
-              for="#fault"
-              outlined
-              dense
-              :readonly="statusStep"
-              lazy-rules
-              ref="statusResultRef"
-              v-model="formData.statusResult"
-              :rules="[(val) => !!val || `${'กรุณาเลือกผลการสืบสวน'}`]"
-              :options="investigateFactStore.statusResultOptions"
-              label="ผลการสืบสวน"
-              emit-value
-              map-options
-              option-label="name"
-              option-value="id"
-              use-input
-              @filter="(inputValue: any,
+        <div class="row col-12">
+          <q-card bordered class="row col-12" style="border: 1px solid #d6dee1">
+            <div
+              class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
+            >
+              ผลการสืบสวน
+            </div>
+
+            <div class="col-12"><q-separator /></div>
+
+            <div class="col-xs-12 q-pa-sm row">
+              <div class="row col-12 q-col-gutter-md">
+                <div class="col-3">
+                  <q-select
+                    for="#fault"
+                    outlined
+                    dense
+                    :readonly="statusStep"
+                    lazy-rules
+                    ref="statusResultRef"
+                    v-model="formData.statusResult"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกผลการสืบสวน'}`]"
+                    :options="investigateFactStore.statusResultOptions"
+                    label="ผลการสืบสวน"
+                    emit-value
+                    map-options
+                    option-label="name"
+                    option-value="id"
+                    use-input
+                    @filter="(inputValue: any,
                 doneFn: Function) => filterFnOptionsType(inputValue, doneFn, 'faultOp'
                 )"
-              ><template v-slot:no-option>
-                <q-item>
-                  <q-item-section class="text-grey">
-                    ไม่มีข้อมูล
-                  </q-item-section>
-                </q-item>
-              </template>
-            </q-select>
-          </div>
+                    ><template v-slot:no-option>
+                      <q-item>
+                        <q-item-section class="text-grey">
+                          ไม่มีข้อมูล
+                        </q-item-section>
+                      </q-item>
+                    </template>
+                  </q-select>
+                </div>
 
-          <div v-if="formData.statusResult == 'have_cause'" class="col-3">
-            <q-select
-              for="#fault"
-              outlined
-              dense
-              ref="causeTextRef"
-              v-model="formData.causeText"
-              :rules="[(val) => !!val || `${'กรุณาเลือกร้ายแรง/ไม่ร้ายแรง'}`]"
-              :options="investigateFactStore.causeTextOptions"
-              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">
-                    ไม่มีข้อมูล
+                <div v-if="formData.statusResult == 'have_cause'" class="col-3">
+                  <q-select
+                    for="#fault"
+                    outlined
+                    dense
+                    ref="causeTextRef"
+                    v-model="formData.causeText"
+                    :rules="[
+                      (val) => !!val || `${'กรุณาเลือกร้ายแรง/ไม่ร้ายแรง'}`,
+                    ]"
+                    :options="investigateFactStore.causeTextOptions"
+                    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>
+
+              <div class="row col-12">
+                <q-input
+                  class="full-width cursor-pointer"
+                  outlined
+                  ref="reasonRef"
+                  dense
+                  lazy-rules
+                  borderless
+                  v-model="formData.reason"
+                  :rules="[(val) => !!val || `${'กรุณากรอกเหตุผล'}`]"
+                  hide-bottom-space
+                  :label="`${'เหตุผล'}`"
+                  type="textarea"
+                />
+              </div>
+            </div>
+
+            <div class="col-xs-12 q-pa-sm row">
+              <q-file
+                class="col-11"
+                for="#evidenceFiles"
+                outlined
+                dense
+                ref="evidenceFilesRef"
+                v-model="formData.evidenceFiles"
+                label="เอกสารที่เกี่ยวข้องกับการสืบสวน"
+                lazy-rules
+                :rules="[(val) => !!val || 'กรุณาเลือกไฟล์เอกสารที่เกี่ยวข้องกับการสืบสวน']"
+                hide-bottom-space
+              >
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" color="primary" />
+                </template>
+              </q-file>
+              <div class="col-1 self-center">
+                <q-btn
+                  size="14px"
+                  flat
+                  round
+                  dense
+                  color="add"
+                  class="q-ml-sm"
+                  icon="mdi-upload"
+                  ><q-tooltip>อัปโหลดเอกสาร</q-tooltip></q-btn
+                >
+              </div>
+
+              <q-list bordered separator class="full-width q-mt-md">
+                <q-item
+                  clickable
+                  v-ripple
+                  v-for="(file, index) in evidenceFiles"
+                  :key="index"
+                >
+                  <q-item-section>{{ file.name + (index + 1) }}</q-item-section>
+                  <q-item-section avatar>
+                    <div class="row">
+                      <div>
+                        <q-btn
+                          dense
+                          flat
+                          round
+                          size="12px"
+                          color="blue"
+                          icon="mdi-download-outline"
+                        >
+                          <q-tooltip>ดาวน์โหลด</q-tooltip>
+                        </q-btn>
+                      </div>
+                      <div>
+                        <q-btn
+                          dense
+                          flat
+                          round
+                          size="12px"
+                          color="red"
+                          icon="mdi-delete-outline"
+                          ><q-tooltip>ลบเอกสารหลักฐาน</q-tooltip></q-btn
+                        >
+                      </div>
+                    </div>
                   </q-item-section>
                 </q-item>
-              </template>
-            </q-select>
-          </div>
+              </q-list>
+            </div>
+          </q-card>
         </div>
       </div>
 
@@ -668,87 +771,88 @@ watch(props.data, async () => {
       </div>
     </form>
   </q-card>
-  <div class="col-12 row q-col-gutter-md q-mt-sm">
-    <div class="row col-12">
-      <q-card bordered class="row col-12" style="border: 1px solid #d6dee1">
-        <div
-          class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
-        >
-          อัปโหลดไฟล์เอกสารหลักฐาน
-        </div>
-        <div class="col-12"><q-separator /></div>
-        <div class="col-xs-12 q-pa-sm row">
-          <q-file
-            class="col-11 q-mt-sm"
-            for="#evidenceFiles"
-            outlined
-            dense
-            ref="evidenceFilesRef"
-            v-model="formData.evidenceFiles"
-            label="ไฟล์เอกสารหลักฐาน"
-            lazy-rules
-            :rules="[(val) => !!val || 'กรุณาเลือกไฟล์เอกสารหลักฐาน']"
-            hide-bottom-space
-          >
-            <template v-slot:prepend>
-              <q-icon name="attach_file" color="primary" />
-            </template>
-          </q-file>
-          <div class="col-1 self-center">
-            <q-btn
-              size="14px"
-              flat
-              round
-              dense
-              color="add"
-              class="q-ml-sm q-mt-sm"
-              icon="mdi-upload"
-              ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-            >
+
+  <q-card flat class="q-pa-md q-mt-sm">
+    <div class="col-12 row q-col-gutter-md">
+      <div class="row col-12">
+        <q-card bordered class="row col-12" style="border: 1px solid #d6dee1">
+          <div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
+            อัปโหลดไฟล์เอกสารหลักฐาน
           </div>
-        </div>
-        <div class="col-xs-12 q-pa-sm row">
-          <q-list bordered separator class="full-width">
-            <q-item
-              clickable
-              v-ripple
-              v-for="(file, index) in evidenceFiles"
-              :key="index"
+          <div class="col-12"><q-separator /></div>
+          <div class="col-xs-12 q-pa-sm row">
+            <q-file
+              class="col-11 q-mt-sm"
+              for="#evidenceFiles"
+              outlined
+              dense
+              ref="evidenceFilesRef"
+              v-model="formData.evidenceFiles"
+              label="ไฟล์เอกสารหลักฐาน"
+              lazy-rules
+              :rules="[(val) => !!val || 'กรุณาเลือกไฟล์เอกสารหลักฐาน']"
+              hide-bottom-space
             >
-              <q-item-section>{{ file.name + (index + 1) }}</q-item-section>
-              <q-item-section avatar>
-                <div class="row">
-                  <div>
-                    <q-btn
-                      dense
-                      flat
-                      round
-                      size="12px"
-                      color="blue"
-                      icon="mdi-download-outline"
-                    >
-                      <q-tooltip>ดาวน์โหลดเอกสารหลักฐาน</q-tooltip>
-                    </q-btn>
+              <template v-slot:prepend>
+                <q-icon name="attach_file" color="primary" />
+              </template>
+            </q-file>
+            <div class="col-1 self-center">
+              <q-btn
+                size="14px"
+                flat
+                round
+                dense
+                color="add"
+                class="q-ml-sm q-mt-sm"
+                icon="mdi-upload"
+                ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+              >
+            </div>
+          </div>
+          <div class="col-xs-12 q-pa-sm row">
+            <q-list bordered separator class="full-width">
+              <q-item
+                clickable
+                v-ripple
+                v-for="(file, index) in evidenceFiles"
+                :key="index"
+              >
+                <q-item-section>{{ file.name + (index + 1) }}</q-item-section>
+                <q-item-section avatar>
+                  <div class="row">
+                    <div>
+                      <q-btn
+                        dense
+                        flat
+                        round
+                        size="12px"
+                        color="blue"
+                        icon="mdi-download-outline"
+                      >
+                        <q-tooltip>ดาวน์โหลดเอกสารหลักฐาน</q-tooltip>
+                      </q-btn>
+                    </div>
+                    <div>
+                      <q-btn
+                        dense
+                        flat
+                        round
+                        size="12px"
+                        color="red"
+                        icon="mdi-delete-outline"
+                        ><q-tooltip>ลบเอกสารหลักฐาน</q-tooltip></q-btn
+                      >
+                    </div>
                   </div>
-                  <div>
-                    <q-btn
-                      dense
-                      flat
-                      round
-                      size="12px"
-                      color="red"
-                      icon="mdi-delete-outline"
-                      ><q-tooltip>ลบเอกสารหลักฐาน</q-tooltip></q-btn
-                    >
-                  </div>
-                </div>
-              </q-item-section>
-            </q-item>
-          </q-list>
-        </div>
-      </q-card>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </div>
+        </q-card>
+      </div>
     </div>
-  </div>
+  </q-card>
 
   <Dialogbody
     v-model:Modal="modal"
diff --git a/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue b/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue
index 44800e122..70fdc98bc 100644
--- a/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue
+++ b/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue
@@ -64,34 +64,13 @@ onMounted(async () => {
     {
       id: "001",
       subject: "ทุจริตในหน้าที่",
-      interrogated: "ศิรินภา คงน้อยี่",
-      fault: "1",
-      status: "0",
-      active: "1",
-    },
-    {
-      id: "002",
-      subject: "ทุจริตในหน้าที่",
-      interrogated: "นายนครชัย วันดี",
-      fault: "1",
-      status: "1",
-      active: "1",
-    },
-    {
-      id: "003",
-      subject: "กระทำทุจริตเงินกองทุน",
-      interrogated: "นายกัณฐิมา  กาฬสินธ์ุ",
-      fault: "0",
-      status: "1",
-      active: "1",
-    },
-    {
-      id: "004",
-      subject: "พูดจาไม่สุภาพ",
-      interrogated: "นายปิยรมย์ ศิริธาราฟ",
-      fault: "0",
-      status: "1",
-      active: "1",
+      interrogated: "บุคคล",
+      complaintOffenseDetails: "NOT_SPECIFIED",
+      investigationDetail: "appoint_directors",
+      startDate: new Date ("2023-11-20"),
+      endDate: new Date ("2023-11-25"),
+      statusResult: "not_specified",
+      status: "new"
     },
   ]);
 });
diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue
index 8456e260d..0ee6e2bc8 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue
@@ -673,355 +673,369 @@ onMounted(async () => {
           </div>
         </q-card>
 
-        <div class="col-12 row q-col-gutter-md q-mt-sm">
-          <div class="row col-12">
-            <q-card
-              bordered
-              class="row col-12"
-              style="border: 1px solid #d6dee1"
-            >
-              <div
-                class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
+        <q-card flat class="q-pa-md q-mt-sm">
+          <div class="col-12 row q-col-gutter-md">
+            <div class="row col-12">
+              <q-card
+                bordered
+                class="row col-12"
+                style="border: 1px solid #d6dee1"
               >
-                อัปโหลดหลักฐานสนับสนุนข้อกล่าวหา
-              </div>
-              <div class="col-12"><q-separator /></div>
-              <div class="col-xs-12 q-pa-sm row">
-                <q-file
-                  class="col-11 q-mt-sm"
-                  outlined
-                  dense
-                  ref="filesEvidenceRef"
-                  for="#filesEvidence"
-                  v-model="formData.filesEvidence"
-                  @added="fileUploadDoc"
-                  label="ไฟล์เอกสารหลักฐานสรุปพยานหลักฐานสนับสนุนข้อกล่าวหา"
-                  hide-bottom-space
-                  lazy-rules
-                  accept=".pdf,.xlsx,.doc"
+                <div
+                  class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
                 >
-                  <template v-slot:prepend>
-                    <q-icon name="attach_file" />
-                  </template>
-                </q-file>
-                <div class="col-1 self-center">
-                  <q-btn
-                    size="14px"
-                    flat
-                    round
-                    dense
-                    color="add"
-                    class="q-ml-sm q-mt-sm"
-                    icon="mdi-upload"
-                    ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-                  >
+                  อัปโหลดหลักฐานสนับสนุนข้อกล่าวหา
                 </div>
-              </div>
-              <div class="col-xs-12 q-pa-sm row">
-                <q-list bordered separator class="full-width">
-                  <q-item
-                    clickable
-                    v-ripple
-                    v-for="(file, index) in filesEvidence"
-                    :key="index"
+                <div class="col-12"><q-separator /></div>
+                <div class="col-xs-12 q-pa-sm row">
+                  <q-file
+                    class="col-11 q-mt-sm"
+                    outlined
+                    dense
+                    ref="filesEvidenceRef"
+                    for="#filesEvidence"
+                    v-model="formData.filesEvidence"
+                    @added="fileUploadDoc"
+                    label="ไฟล์เอกสารหลักฐานสรุปพยานหลักฐานสนับสนุนข้อกล่าวหา"
+                    hide-bottom-space
+                    lazy-rules
+                    accept=".pdf,.xlsx,.doc"
                   >
-                    <q-item-section>{{
-                      file.name + (index + 1)
-                    }}</q-item-section>
-                    <q-item-section avatar>
-                      <div class="row">
-                        <div>
-                          <q-btn
-                            dense
-                            flat
-                            round
-                            size="12px"
-                            color="blue"
-                            icon="mdi-download-outline"
-                          >
-                            <q-tooltip>ดาวน์โหลดเอกสารหลักฐาน</q-tooltip>
-                          </q-btn>
+                    <template v-slot:prepend>
+                      <q-icon name="attach_file" />
+                    </template>
+                  </q-file>
+                  <div class="col-1 self-center">
+                    <q-btn
+                      size="14px"
+                      flat
+                      round
+                      dense
+                      color="add"
+                      class="q-ml-sm q-mt-sm"
+                      icon="mdi-upload"
+                      ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                    >
+                  </div>
+                </div>
+                <div class="col-xs-12 q-pa-sm row">
+                  <q-list bordered separator class="full-width">
+                    <q-item
+                      clickable
+                      v-ripple
+                      v-for="(file, index) in filesEvidence"
+                      :key="index"
+                    >
+                      <q-item-section>{{
+                        file.name + (index + 1)
+                      }}</q-item-section>
+                      <q-item-section avatar>
+                        <div class="row">
+                          <div>
+                            <q-btn
+                              dense
+                              flat
+                              round
+                              size="12px"
+                              color="blue"
+                              icon="mdi-download-outline"
+                            >
+                              <q-tooltip>ดาวน์โหลดเอกสารหลักฐาน</q-tooltip>
+                            </q-btn>
+                          </div>
+                          <div>
+                            <q-btn
+                              dense
+                              flat
+                              round
+                              size="12px"
+                              color="red"
+                              icon="mdi-delete-outline"
+                              ><q-tooltip>ลบเอกสารหลักฐาน</q-tooltip></q-btn
+                            >
+                          </div>
                         </div>
-                        <div>
-                          <q-btn
-                            dense
-                            flat
-                            round
-                            size="12px"
-                            color="red"
-                            icon="mdi-delete-outline"
-                            ><q-tooltip>ลบเอกสารหลักฐาน</q-tooltip></q-btn
-                          >
-                        </div>
-                      </div>
-                    </q-item-section>
-                  </q-item>
-                </q-list>
-              </div>
-            </q-card>
+                      </q-item-section>
+                    </q-item>
+                  </q-list>
+                </div>
+              </q-card>
+            </div>
           </div>
+        </q-card>
 
-          <div class="row col-12">
-            <q-card
-              bordered
-              class="row col-12"
-              style="border: 1px solid #d6dee1"
-            >
-              <div
-                class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
+        <q-card flat class="q-pa-md q-mt-sm">
+          <div class="col-12 row q-col-gutter-md">
+            <div class="row col-12">
+              <q-card
+                bordered
+                class="row col-12"
+                style="border: 1px solid #d6dee1"
               >
-                อัปโหลดบันทึกถ้อยคำของผู้กล่าวหา
-              </div>
-              <div class="col-12"><q-separator /></div>
-              <div class="col-xs-12 q-pa-sm row">
-                <q-file
-                  class="col-11 q-mt-sm"
-                  outlined
-                  dense
-                  ref="filesRecordAccuserRef"
-                  for="#filesRecordAccuser"
-                  v-model="formData.filesRecordAccuser"
-                  @added="fileUploadDoc"
-                  label="ไฟล์เอกสารบันทึกถ้อยคำของผู้กล่าวหา"
-                  hide-bottom-space
-                  lazy-rules
-                  accept=".pdf,.xlsx,.doc"
+                <div
+                  class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
                 >
-                  <template v-slot:prepend>
-                    <q-icon name="attach_file" />
-                  </template>
-                </q-file>
-                <div class="col-1 self-center">
-                  <q-btn
-                    size="14px"
-                    flat
-                    round
-                    dense
-                    color="add"
-                    class="q-ml-sm q-mt-sm"
-                    icon="mdi-upload"
-                    ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-                  >
+                  อัปโหลดบันทึกถ้อยคำของผู้กล่าวหา
                 </div>
-              </div>
-              <div class="col-xs-12 q-pa-sm row">
-                <q-list bordered separator class="full-width">
-                  <q-item
-                    clickable
-                    v-ripple
-                    v-for="(file, index) in filesRecordAccuser"
-                    :key="index"
+                <div class="col-12"><q-separator /></div>
+                <div class="col-xs-12 q-pa-sm row">
+                  <q-file
+                    class="col-11 q-mt-sm"
+                    outlined
+                    dense
+                    ref="filesRecordAccuserRef"
+                    for="#filesRecordAccuser"
+                    v-model="formData.filesRecordAccuser"
+                    @added="fileUploadDoc"
+                    label="ไฟล์เอกสารบันทึกถ้อยคำของผู้กล่าวหา"
+                    hide-bottom-space
+                    lazy-rules
+                    accept=".pdf,.xlsx,.doc"
                   >
-                    <q-item-section>{{
-                      file.name + (index + 1)
-                    }}</q-item-section>
-                    <q-item-section avatar>
-                      <div class="row">
-                        <div>
-                          <q-btn
-                            dense
-                            flat
-                            round
-                            size="12px"
-                            color="blue"
-                            icon="mdi-download-outline"
-                          >
-                            <q-tooltip>ดาวน์โหลดเอกสารหลักฐาน</q-tooltip>
-                          </q-btn>
+                    <template v-slot:prepend>
+                      <q-icon name="attach_file" />
+                    </template>
+                  </q-file>
+                  <div class="col-1 self-center">
+                    <q-btn
+                      size="14px"
+                      flat
+                      round
+                      dense
+                      color="add"
+                      class="q-ml-sm q-mt-sm"
+                      icon="mdi-upload"
+                      ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                    >
+                  </div>
+                </div>
+                <div class="col-xs-12 q-pa-sm row">
+                  <q-list bordered separator class="full-width">
+                    <q-item
+                      clickable
+                      v-ripple
+                      v-for="(file, index) in filesRecordAccuser"
+                      :key="index"
+                    >
+                      <q-item-section>{{
+                        file.name + (index + 1)
+                      }}</q-item-section>
+                      <q-item-section avatar>
+                        <div class="row">
+                          <div>
+                            <q-btn
+                              dense
+                              flat
+                              round
+                              size="12px"
+                              color="blue"
+                              icon="mdi-download-outline"
+                            >
+                              <q-tooltip>ดาวน์โหลดเอกสารหลักฐาน</q-tooltip>
+                            </q-btn>
+                          </div>
+                          <div>
+                            <q-btn
+                              dense
+                              flat
+                              round
+                              size="12px"
+                              color="red"
+                              icon="mdi-delete-outline"
+                              ><q-tooltip>ลบเอกสารหลักฐาน</q-tooltip></q-btn
+                            >
+                          </div>
                         </div>
-                        <div>
-                          <q-btn
-                            dense
-                            flat
-                            round
-                            size="12px"
-                            color="red"
-                            icon="mdi-delete-outline"
-                            ><q-tooltip>ลบเอกสารหลักฐาน</q-tooltip></q-btn
-                          >
-                        </div>
-                      </div>
-                    </q-item-section>
-                  </q-item>
-                </q-list>
-              </div>
-            </q-card>
+                      </q-item-section>
+                    </q-item>
+                  </q-list>
+                </div>
+              </q-card>
+            </div>
           </div>
+        </q-card>
 
-          <div class="row col-12">
-            <q-card
-              bordered
-              class="row col-12"
-              style="border: 1px solid #d6dee1"
-            >
-              <div
-                class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
+        <q-card flat class="q-pa-md q-mt-sm">
+          <div class="col-12 row q-col-gutter-md">
+            <div class="row col-12">
+              <q-card
+                bordered
+                class="row col-12"
+                style="border: 1px solid #d6dee1"
               >
-                อัปโหลดพยานและการบันทึกถ้อยคำ
-              </div>
-              <div class="col-12"><q-separator /></div>
-              <div class="col-xs-12 q-pa-sm row">
-                <q-file
-                  class="col-11 q-mt-sm"
-                  outlined
-                  dense
-                  ref="filesWitnessesRef"
-                  for="#filesWitnesses"
-                  v-model="formData.filesWitnesses"
-                  @added="fileUploadDoc"
-                  label="ไฟล์เอกสารพยานและการบันทึกถ้อยคำ"
-                  hide-bottom-space
-                  lazy-rules
-                  accept=".pdf,.xlsx,.doc"
+                <div
+                  class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
                 >
-                  <template v-slot:prepend>
-                    <q-icon name="attach_file" />
-                  </template>
-                </q-file>
-                <div class="col-1 self-center">
-                  <q-btn
-                    size="14px"
-                    flat
-                    round
-                    dense
-                    color="add"
-                    class="q-ml-sm q-mt-sm"
-                    icon="mdi-upload"
-                    ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-                  >
+                  อัปโหลดพยานและการบันทึกถ้อยคำ
                 </div>
-              </div>
-              <div class="col-xs-12 q-pa-sm row">
-                <q-list bordered separator class="full-width">
-                  <q-item
-                    clickable
-                    v-ripple
-                    v-for="(file, index) in filesWitnesses"
-                    :key="index"
+                <div class="col-12"><q-separator /></div>
+                <div class="col-xs-12 q-pa-sm row">
+                  <q-file
+                    class="col-11 q-mt-sm"
+                    outlined
+                    dense
+                    ref="filesWitnessesRef"
+                    for="#filesWitnesses"
+                    v-model="formData.filesWitnesses"
+                    @added="fileUploadDoc"
+                    label="ไฟล์เอกสารพยานและการบันทึกถ้อยคำ"
+                    hide-bottom-space
+                    lazy-rules
+                    accept=".pdf,.xlsx,.doc"
                   >
-                    <q-item-section>{{
-                      file.name + (index + 1)
-                    }}</q-item-section>
-                    <q-item-section avatar>
-                      <div class="row">
-                        <div>
-                          <q-btn
-                            dense
-                            flat
-                            round
-                            size="12px"
-                            color="blue"
-                            icon="mdi-download-outline"
-                          >
-                            <q-tooltip>ดาวน์โหลดเอกสารหลักฐาน</q-tooltip>
-                          </q-btn>
+                    <template v-slot:prepend>
+                      <q-icon name="attach_file" />
+                    </template>
+                  </q-file>
+                  <div class="col-1 self-center">
+                    <q-btn
+                      size="14px"
+                      flat
+                      round
+                      dense
+                      color="add"
+                      class="q-ml-sm q-mt-sm"
+                      icon="mdi-upload"
+                      ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                    >
+                  </div>
+                </div>
+                <div class="col-xs-12 q-pa-sm row">
+                  <q-list bordered separator class="full-width">
+                    <q-item
+                      clickable
+                      v-ripple
+                      v-for="(file, index) in filesWitnesses"
+                      :key="index"
+                    >
+                      <q-item-section>{{
+                        file.name + (index + 1)
+                      }}</q-item-section>
+                      <q-item-section avatar>
+                        <div class="row">
+                          <div>
+                            <q-btn
+                              dense
+                              flat
+                              round
+                              size="12px"
+                              color="blue"
+                              icon="mdi-download-outline"
+                            >
+                              <q-tooltip>ดาวน์โหลดเอกสารหลักฐาน</q-tooltip>
+                            </q-btn>
+                          </div>
+                          <div>
+                            <q-btn
+                              dense
+                              flat
+                              round
+                              size="12px"
+                              color="red"
+                              icon="mdi-delete-outline"
+                              ><q-tooltip>ลบเอกสารหลักฐาน</q-tooltip></q-btn
+                            >
+                          </div>
                         </div>
-                        <div>
-                          <q-btn
-                            dense
-                            flat
-                            round
-                            size="12px"
-                            color="red"
-                            icon="mdi-delete-outline"
-                            ><q-tooltip>ลบเอกสารหลักฐาน</q-tooltip></q-btn
-                          >
-                        </div>
-                      </div>
-                    </q-item-section>
-                  </q-item>
-                </q-list>
-              </div>
-            </q-card>
+                      </q-item-section>
+                    </q-item>
+                  </q-list>
+                </div>
+              </q-card>
+            </div>
           </div>
+        </q-card>
 
-          <div class="row col-12">
-            <q-card
-              bordered
-              class="row col-12"
-              style="border: 1px solid #d6dee1"
-            >
-              <div
-                class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
+        <q-card flat class="q-pa-md q-mt-sm">
+          <div class="col-12 row q-col-gutter-md">
+            <div class="row col-12">
+              <q-card
+                bordered
+                class="row col-12"
+                style="border: 1px solid #d6dee1"
               >
-                อัปโหลดไฟล์เอกสารหลักฐานอื่น ๆ
-              </div>
-              <div class="col-12"><q-separator /></div>
-              <div class="col-xs-12 q-pa-sm row">
-                <q-file
-                  class="col-11 q-mt-sm"
-                  outlined
-                  dense
-                  ref="filesEtcRef"
-                  for="#filesEtc"
-                  v-model="formData.filesEtc"
-                  @added="fileUploadDoc"
-                  label="ไฟล์เอกสารหลักฐานอื่น ๆ"
-                  hide-bottom-space
-                  lazy-rules
-                  accept=".pdf,.xlsx,.doc"
+                <div
+                  class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
                 >
-                  <template v-slot:prepend>
-                    <q-icon name="attach_file" />
-                  </template>
-                </q-file>
-                <div class="col-1 self-center">
-                  <q-btn
-                    size="14px"
-                    flat
-                    round
-                    dense
-                    color="add"
-                    class="q-ml-sm q-mt-sm"
-                    icon="mdi-upload"
-                    ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-                  >
+                  อัปโหลดไฟล์เอกสารหลักฐานอื่น ๆ
                 </div>
-              </div>
-              <div class="col-xs-12 q-pa-sm row">
-                <q-list bordered separator class="full-width">
-                  <q-item
-                    clickable
-                    v-ripple
-                    v-for="(file, index) in filesEtc"
-                    :key="index"
+                <div class="col-12"><q-separator /></div>
+                <div class="col-xs-12 q-pa-sm row">
+                  <q-file
+                    class="col-11 q-mt-sm"
+                    outlined
+                    dense
+                    ref="filesEtcRef"
+                    for="#filesEtc"
+                    v-model="formData.filesEtc"
+                    @added="fileUploadDoc"
+                    label="ไฟล์เอกสารหลักฐานอื่น ๆ"
+                    hide-bottom-space
+                    lazy-rules
+                    accept=".pdf,.xlsx,.doc"
                   >
-                    <q-item-section>{{
-                      file.name + (index + 1)
-                    }}</q-item-section>
-                    <q-item-section avatar>
-                      <div class="row">
-                        <div>
-                          <q-btn
-                            dense
-                            flat
-                            round
-                            size="12px"
-                            color="blue"
-                            icon="mdi-download-outline"
-                          >
-                            <q-tooltip>ดาวน์โหลดเอกสารหลักฐาน</q-tooltip>
-                          </q-btn>
+                    <template v-slot:prepend>
+                      <q-icon name="attach_file" />
+                    </template>
+                  </q-file>
+                  <div class="col-1 self-center">
+                    <q-btn
+                      size="14px"
+                      flat
+                      round
+                      dense
+                      color="add"
+                      class="q-ml-sm q-mt-sm"
+                      icon="mdi-upload"
+                      ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                    >
+                  </div>
+                </div>
+                <div class="col-xs-12 q-pa-sm row">
+                  <q-list bordered separator class="full-width">
+                    <q-item
+                      clickable
+                      v-ripple
+                      v-for="(file, index) in filesEtc"
+                      :key="index"
+                    >
+                      <q-item-section>{{
+                        file.name + (index + 1)
+                      }}</q-item-section>
+                      <q-item-section avatar>
+                        <div class="row">
+                          <div>
+                            <q-btn
+                              dense
+                              flat
+                              round
+                              size="12px"
+                              color="blue"
+                              icon="mdi-download-outline"
+                            >
+                              <q-tooltip>ดาวน์โหลดเอกสารหลักฐาน</q-tooltip>
+                            </q-btn>
+                          </div>
+                          <div>
+                            <q-btn
+                              dense
+                              flat
+                              round
+                              size="12px"
+                              color="red"
+                              icon="mdi-delete-outline"
+                              ><q-tooltip>ลบเอกสารหลักฐาน</q-tooltip></q-btn
+                            >
+                          </div>
                         </div>
-                        <div>
-                          <q-btn
-                            dense
-                            flat
-                            round
-                            size="12px"
-                            color="red"
-                            icon="mdi-delete-outline"
-                            ><q-tooltip>ลบเอกสารหลักฐาน</q-tooltip></q-btn
-                          >
-                        </div>
-                      </div>
-                    </q-item-section>
-                  </q-item>
-                </q-list>
-              </div>
-            </q-card>
+                      </q-item-section>
+                    </q-item>
+                  </q-list>
+                </div>
+              </q-card>
+            </div>
           </div>
-        </div>
+        </q-card>
       </div>
     </form>
   </div>
diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue
index 0713ddbe9..9055bbc36 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue
@@ -4,7 +4,7 @@ import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
 import Table from "@/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue";
 import { useCounterMixin } from "@/stores/mixin";
-import { useInvestigateDisStore } from "../../store/InvestigateDisStore";
+import { useInvestigateDisStore } from "@/modules/11_discipline/store/InvestigateDisStore";
 import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
 
 const $q = useQuasar(); // show dialog
@@ -117,17 +117,6 @@ onMounted(async () => {
                 {{ col.value }}
               </div>
             </q-td>
-            <q-td style="font-size: 14px; width: 10rem">
-              <q-btn
-                v-if="props.row.active === 'ยืนยันผล'"
-                color="primary"
-                class="q-px-md"
-                dense
-                unelevated
-                >ยืนยันผล</q-btn
-              >
-              <span v-else>{{ props.row.active }}</span>
-            </q-td>
           </q-tr>
         </template>
       </Table>
diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue
index 39c9898fb..c147645d6 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue
@@ -133,7 +133,6 @@ function resetFilter() {
         <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 v-if="nornmalData == true" />
       </q-tr>
     </template>
     <template #body="props">
diff --git a/src/modules/11_discipline/components/6_BasicInformation/Director/Form.vue b/src/modules/11_discipline/components/6_BasicInformation/Director/Form.vue
index eb353531b..5cfd0022f 100644
--- a/src/modules/11_discipline/components/6_BasicInformation/Director/Form.vue
+++ b/src/modules/11_discipline/components/6_BasicInformation/Director/Form.vue
@@ -245,6 +245,8 @@ function onValidate() {
               label="เบอร์โทร"
               ref="phoneRef"
               for="phoneRef"
+              type="tel"
+              mask="##########"
               hide-bottom-space
               :rules="[(val: string) => !!val || `${'กรุณากรอกเบอร์โทร'}`]"
             />
diff --git a/src/modules/11_discipline/interface/index/Main.ts b/src/modules/11_discipline/interface/index/Main.ts
index 7a60a9798..2a453b95f 100644
--- a/src/modules/11_discipline/interface/index/Main.ts
+++ b/src/modules/11_discipline/interface/index/Main.ts
@@ -8,13 +8,15 @@ interface DataNumberOption {
   name: string;
 }
 
-interface investigatefactsDataRowType {
+interface InvestigatefactsDataRowType {
   id:string,
   subject: string;
   interrogated: string;
-  fault: string | undefined;
-  status: string | undefined;
-  active: string | undefined;
+  complaintOffenseDetails: string,
+  investigationDetail: string,
+  dateInvestigate: string,
+  statusResult: string,
+  status: string
 }
 
 interface investigateDisDataRowType {
@@ -40,7 +42,7 @@ interface directorType {
 
 export type {
   DataOption,
-  investigatefactsDataRowType,
+  InvestigatefactsDataRowType,
   investigateDisDataRowType,
   directorType,
   DataNumberOption
diff --git a/src/modules/11_discipline/interface/request/investigate.ts b/src/modules/11_discipline/interface/request/investigate.ts
index c64700f6d..9e9e030d9 100644
--- a/src/modules/11_discipline/interface/request/investigate.ts
+++ b/src/modules/11_discipline/interface/request/investigate.ts
@@ -14,6 +14,7 @@ interface FormData {
   statusResult: string;
   causeText: string;
   complaintStatus:string
+  reason: string
 }
 interface MyObjectInvestigateRef {
   complaint: object | null;
@@ -28,6 +29,7 @@ interface MyObjectInvestigateRef {
   daysExtend: object | null;
   statusResult: object | null;
   causeText: object | null;
+  reason: object | null;
   [key: string]: any;
 }
 export type { FormData, MyObjectInvestigateRef };
diff --git a/src/modules/11_discipline/interface/request/investigateFact.ts b/src/modules/11_discipline/interface/request/investigateFact.ts
new file mode 100644
index 000000000..9e9e030d9
--- /dev/null
+++ b/src/modules/11_discipline/interface/request/investigateFact.ts
@@ -0,0 +1,35 @@
+interface FormData {
+  complaint: string;
+  complaintdetail: string;
+  detail: string;
+  fault: string;
+  other: string;
+  evidenceFiles: File | null;
+  fileComplaint: File | null;
+  clickTime: boolean;
+  date: Date | null;
+  dateEnd: Date;
+  daysExtend: number | null;
+  investigation: string;
+  statusResult: string;
+  causeText: string;
+  complaintStatus:string
+  reason: string
+}
+interface MyObjectInvestigateRef {
+  complaint: object | null;
+  complaintdetail: object | null;
+  detail: object | null;
+  fault: object | null;
+  evidenceFiles: object | null;
+  fileComplaint: object | null;
+  date: object | null;
+  dateEnd: object | null;
+  investigation: object | null;
+  daysExtend: object | null;
+  statusResult: object | null;
+  causeText: object | null;
+  reason: object | null;
+  [key: string]: any;
+}
+export type { FormData, MyObjectInvestigateRef };
diff --git a/src/modules/11_discipline/interface/response/investigate.ts b/src/modules/11_discipline/interface/response/investigate.ts
new file mode 100644
index 000000000..ed1c0f327
--- /dev/null
+++ b/src/modules/11_discipline/interface/response/investigate.ts
@@ -0,0 +1,13 @@
+interface ListData {
+  id: string;
+  subject: string;
+  interrogated: string;
+  complaintOffenseDetails: string;
+  investigationDetail: string;
+  startDate: Date | null;
+  endDate: Date | null;
+  statusResult: string;
+  status: string;
+}
+
+export type { ListData };
diff --git a/src/modules/11_discipline/store/InvestigateFactStore.ts b/src/modules/11_discipline/store/InvestigateFactStore.ts
index dd32c58d5..4d1637dc3 100644
--- a/src/modules/11_discipline/store/InvestigateFactStore.ts
+++ b/src/modules/11_discipline/store/InvestigateFactStore.ts
@@ -1,18 +1,23 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+
 import type { QTableProps } from "quasar";
 import type {
-  investigatefactsDataRowType,
+  InvestigatefactsDataRowType,
   DataOption,
   DataNumberOption,
 } from "@/modules/11_discipline/interface/index/Main";
+import type { ListData } from "@/modules/11_discipline/interface/response/investigate";
+
+const mixin = useCounterMixin();
+const { date2Thai } = mixin;
 
 /*** store ของข้อมูลสืบสวนข้อเท็จจริง */
 export const useInvestigateFactStore = defineStore(
   "DisciplineInvestigateFact",
   () => {
     const tabMenu = ref<string>("investigatefacts");
-    const rows = ref<investigatefactsDataRowType[]>([]);
 
     const daysExtendOps = ref<DataNumberOption[]>([
       { id: 15, name: "15 วัน" },
@@ -20,15 +25,21 @@ export const useInvestigateFactStore = defineStore(
       { id: 45, name: "45 วัน" },
       { id: 60, name: "60 วัน" },
     ]);
+
+    const offenseDetailsOps = ref<DataOption[]>([
+      { id: "NOT_SPECIFIED", name: "ยังไม่ระบุ" },
+      { id: "NOT_DEADLY", name: "ไม่ร้ายแรง" },
+      { id: "DEADLY", name: "ร้ายแรง" },
+    ]);
     const investigationOps = ref<DataOption[]>([
-      { id: "001", name: "แต่งตั้งกรรมการสืบสวน" },
-      { id: "002", name: "สืบสวนทางลับ" },
-      { id: "003", name: "อื่นๆ" },
+      { id: "appoint_directors", name: "แต่งตั้งกรรมการสืบสวน" },
+      { id: "secret_investigation", name: "สืบสวนทางลับ" },
+      { id: "other", name: "อื่นๆ" },
     ]);
     const faultOps = ref<DataOption[]>([
-      { id: "001", name: "ยังไม่ระบุ" },
-      { id: "002", name: "ไม่ร้ายเเรง" },
-      { id: "003", name: "ร้ายเเรง" },
+      { id: "new", name: "กำลังสืบสวน" },
+      { id: "stop", name: "ยุติเรื่อง" },
+      { id: "complete", name: "ส่งไปสอบสวน" },
     ]);
     const statusResultOptions = ref<DataOption[]>([
       { id: "not_specified", name: "ยังไม่ระบุ" },
@@ -47,7 +58,10 @@ export const useInvestigateFactStore = defineStore(
       "no",
       "subject",
       "interrogated",
-      "fault",
+      "complaintOffenseDetails",
+      "investigationDetail",
+      "dateInvestigate",
+      "statusResult",
       "status",
     ]);
 
@@ -65,7 +79,7 @@ export const useInvestigateFactStore = defineStore(
       {
         name: "subject",
         align: "left",
-        label: "เรื่อง",
+        label: "เรื่องร้องเรียน",
         sortable: true,
         field: "subject",
         headerStyle: "font-size: 14px",
@@ -83,11 +97,44 @@ export const useInvestigateFactStore = defineStore(
           a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
       },
       {
-        name: "fault",
+        name: "complaintOffenseDetails",
         align: "left",
         label: "ลักษณะความผิด",
         sortable: true,
-        field: "fault",
+        field: "complaintOffenseDetails",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+        sort: (a: string, b: string) =>
+          a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+      },
+      {
+        name: "investigationDetail",
+        align: "left",
+        label: "ลักษณะการสืบสวน",
+        sortable: true,
+        field: "investigationDetail",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+        sort: (a: string, b: string) =>
+          a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+      },
+      {
+        name: "dateInvestigate",
+        align: "left",
+        label: "วันที่สืบสวน",
+        sortable: true,
+        field: "dateInvestigate",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+        sort: (a: string, b: string) =>
+          a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+      },
+      {
+        name: "statusResult",
+        align: "left",
+        label: "ผลการสืบสวน",
+        sortable: true,
+        field: "statusResult",
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",
         sort: (a: string, b: string) =>
@@ -103,6 +150,7 @@ export const useInvestigateFactStore = defineStore(
         style: "font-size: 14px",
       },
     ]);
+
     function filterFnOptionsType(
       val: string | number,
       update: any,
@@ -124,45 +172,51 @@ export const useInvestigateFactStore = defineStore(
         }
       });
     }
-    function fecthList(data: investigatefactsDataRowType[]) {
-      let datalist: investigatefactsDataRowType[] = data.map(
-        (e: investigatefactsDataRowType) => {
-          return {
-            id: e.id,
-            subject: e.subject,
-            interrogated: e.interrogated,
-            fault: e.fault ? convertFault(e.fault) : "-",
-            status: e.status ? convertSatatus(e.status) : "-",
-            active: e.active ? activeStatus(e.active) : "-",
-          };
-        }
-      );
-      rows.value = datalist;
+
+    const rows = ref<InvestigatefactsDataRowType[]>();
+    async function fecthList(data: ListData[]) {
+      rows.value = await data.map((e: ListData) => {
+        return {
+          id: e.id,
+          subject: e.subject,
+          interrogated: e.interrogated,
+          complaintOffenseDetails: convertOffenseDetails(
+            e.complaintOffenseDetails
+          ),
+          investigationDetail: convertInvestigationDetail(
+            e.investigationDetail
+          ),
+          dateInvestigate:
+            e.startDate && e.endDate
+              ? `${date2Thai(e.startDate)} - ${date2Thai(e.endDate)}`
+              : "-",
+          statusResult: activeStatusResult(e.statusResult),
+          status: convertStatus(e.status),
+        };
+      });
     }
-    function convertFault(val: string) {
-      switch (val) {
-        case "0":
-          return "ความผิดวินัยไม่ร้ายแรง";
-        case "1":
-          return "ความผิดวินัยร้ายแรง";
-      }
+
+    function convertOffenseDetails(val: string) {
+      const result = offenseDetailsOps.value.find((x: any) => x.id == val)?.name;
+      return result ? result : "-";
     }
-    function convertSatatus(val: string) {
-      switch (val) {
-        case "0":
-          return "ยุติเรื่อง";
-        case "1":
-          return "เสร็จสิ้นเเล้ว";
-      }
+
+    function convertInvestigationDetail(val: string) {
+      const result = investigationOps.value.find((x: any) => x.id == val)?.name;
+      return result ? result : "-";
     }
-    function activeStatus(val: string) {
-      switch (val) {
-        case "0":
-          return "ยังไม่ได้ยืนยันผล";
-        case "1":
-          return "ยืนยันผลเเล้ว";
-      }
+
+    function convertStatus(val: string) {
+      const result = faultOps.value.find((x: any) => x.id == val)?.name;
+      return result ? result : "-";
     }
+    function activeStatusResult(val: string) {
+      const result = statusResultOptions.value.find(
+        (x: any) => x.id == val
+      )?.name;
+      return result ? result : "-";
+    }
+
     return {
       tabMenu,
       fecthList,