diff --git a/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue b/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue
index 9908a051e..a15f5730b 100644
--- a/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue
+++ b/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue
@@ -1,9 +1,340 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref, useAttrs, onMounted } from "vue";
+import type { QTableProps } from "quasar";
+import router from "@/router";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
 
+import config from "@/app.config";
+import http from "@/plugins/http";
+
+import { useInvestigateFactStore }  from '../../stroes/InvestigateFactStore'
+const dataInvestigate = useInvestigateFactStore()
+const { fecthList } = dataInvestigate
+
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  success,
+  messageError,
+  showLoader,
+  hideLoader,
+  dialogConfirm,
+  dialogRemove,
+} = mixin;
+const $q = useQuasar(); //ใช้ noti quasar
+
+const visibleColumns = ref<string[]>([
+  "no",
+  "subject",
+  "interrogated",
+  "fault",
+  "status",
+]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+
+// หัวตาราง
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "center",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "subject",
+    align: "left",
+    label: "เรื่อง",
+    sortable: true,
+    field: "subject",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "interrogated",
+    align: "left",
+    label: "ผู้ถูกสอบสวน",
+    sortable: true,
+    field: "interrogated",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "fault",
+    align: "left",
+    label: "ลักษณะความผิด",
+    sortable: true,
+    field: "fault",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะ",
+    sortable: false,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+
+
+// ค้นหาในตาราง
+const filterKeyword = ref<string>("");
+const filterRef = ref<HTMLInputElement | null>(null);
+const resetFilter = () => {
+  filterKeyword.value = "";
+  if (filterRef.value) {
+    filterRef.value.focus();
+  }
+};
+
+
+const attrs = ref<any>(useAttrs());
+const paging = ref<boolean>(true);
+const pagination = ref({
+  // sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+const paginationLabel = (start: string, end: string, total: string) => {
+  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
+  else return start + "-" + end + " ใน " + total;
+};
+
+function fecthInvestigateFact() {
+  const data = [
+    {
+      subject: "ทุจริตในหน้าที่",
+      interrogated: "ศิรินภา คงน้อยี่",
+      fault: "0",
+      status: "0",
+      active:'1'
+    },
+    {
+      subject: "ทุจริตในหน้าที่",
+      interrogated: "นายนครชัย วันดี",
+      fault: "1",
+      status: "1",
+      active:'1'
+    },
+    {
+      subject: "กระทำทุจริตเงินกองทุน",
+      interrogated: "นายกัณฐิมา  กาฬสินธ์ุ",
+      fault: "1",
+      status: "2",
+      active:'1'
+    },
+    {
+      subject: "พูดจาไม่สุภาพ",
+      interrogated: "นายปิยรมย์ ศิริธาราฟ",
+      fault: "2",
+      status: "3",
+      active:'1'
+    },
+  ];
+  fecthList(data); // ส่งข้อมูลไป stores
+}
+const clickAdd = () => {
+  router.push(`/discipline/investigatefacts/add`)
+}
+onMounted(()=>{
+  fecthInvestigateFact()
+})
+</script>
 <template>
-  <div>
-    <h1>สืบสวนข้อเท็จจริง</h1>
+  <div class="toptitle text-dark col-12 row items-center">
+    รายการสืบสวนข้อเท็จจริง
   </div>
+  <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
+    <div class="row q-col-gutter-sm">
+      <div class="row col-12 q-col-gutter-sm">
+        <div>
+          <q-btn
+            @click="clickAdd()"
+            size="12px"
+            flat
+            round
+            color="add"
+            icon="mdi-plus"
+          >
+            <q-tooltip>เพิ่มรายการสืบสวนข้อเท็จจริง</q-tooltip>
+          </q-btn>
+        </div>
+        <q-space />
+
+        <q-input
+          class="col-xs-12 col-sm-3 col-md-2"
+          standout
+          dense
+          v-model="filterKeyword"
+          ref="filterRef"
+          outlined
+          debounce="300"
+          placeholder="ค้นหา"
+        >
+          <template v-slot:append>
+            <q-icon v-if="filterKeyword == ''" name="search" />
+            <q-icon
+              v-if="filterKeyword !== ''"
+              name="clear"
+              class="cursor-pointer"
+              @click="resetFilter"
+            />
+          </template>
+        </q-input>
+
+        <q-select
+          v-model="visibleColumns"
+          multiple
+          outlined
+          dense
+          options-dense
+          :display-value="$q.lang.table.columns"
+          emit-value
+          map-options
+          :options="columns"
+          option-value="name"
+          options-cover
+          style="min-width: 150px"
+          class="col-xs-12 col-sm-3 col-md-2"
+        />
+      </div>
+      <div class="col-12">
+        <q-table
+          ref="table"
+          :columns="columns"
+          :rows="dataInvestigate.rows"
+          :filter="filterKeyword"
+          row-key="interrogated"
+          flat
+          bordered
+          :paging="true"
+          dense
+          class="custom-header-table"
+          v-bind="attrs"
+          :visible-columns="visibleColumns"
+          :pagination-label="paginationLabel"
+          v-model:pagination="pagination"
+        >
+          <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" :props="props">
+                {{ props.rowIndex + 1 }}
+              </q-td>
+              <q-td
+                key="subject"
+                :props="props"
+              >
+              {{ props.row.subject }}
+              </q-td>
+              <q-td
+                key="interrogated"
+                :props="props"
+              >
+                {{ props.row.interrogated }}
+              </q-td>
+              <q-td
+                key="fault"
+                :props="props"
+              >
+                {{ props.row.fault }}
+              </q-td>
+              <q-td
+                key="status"
+                :props="props"
+              >
+                {{ props.row.status }}
+              </q-td>
+              <q-td style="font-size: 14px;width: 10rem">
+                {{ props.row.active }}
+              </q-td>
+              <q-td auto-width style="width: 10rem">
+                <q-btn v-if="props.row.status === 'ยุติเรื่อง'" color="primary" class="q-px-xl q-py-xs">ยกเลิกยุติเรื่อง</q-btn>
+              </q-td>
+            </q-tr>
+          </template>
+          <template v-slot:pagination="scope">
+            <q-pagination
+              v-model="pagination.page"
+              active-color="primary"
+              color="dark"
+              :max="scope.pagesNumber"
+              :max-pages="5"
+              size="sm"
+              boundary-links
+              direction-links
+            ></q-pagination>
+          </template>
+        </q-table>
+      </div>
+    </div>
+  </q-card>
 </template>
 
-<style scoped></style>
\ No newline at end of file
+<style lang="scss" scope>
+.filter-card {
+  background-color: #f1f1f1b0;
+}
+
+.toggle-expired-account {
+  font-size: 12px;
+  font-weight: 400;
+  font-size: 15px;
+  line-height: 150%;
+  color: #35373c;
+}
+
+.icon-color {
+  color: #4154b3;
+}
+
+.custom-header-table {
+  max-height: 64vh;
+
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+    z-index: 1;
+  }
+
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>
diff --git a/src/modules/11_discipline/components/2_InvestigateFacts/investigatefactsAdd.vue b/src/modules/11_discipline/components/2_InvestigateFacts/investigatefactsAdd.vue
new file mode 100644
index 000000000..8ec344347
--- /dev/null
+++ b/src/modules/11_discipline/components/2_InvestigateFacts/investigatefactsAdd.vue
@@ -0,0 +1,350 @@
+<script setup lang="ts">
+import router from "@/router";
+import { onMounted, ref } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+const mixin = useCounterMixin();
+const {
+  messageError,
+  showLoader,
+  hideLoader,
+  date2Thai,
+  dialogConfirm,
+  success,
+} = mixin;
+const complaint = ref<string>("");
+const complaintdetail = ref<string>("");
+const detail = ref<string>("");
+const fault = ref<string>("");
+const results = ref<string>("");
+const evidenceFiles = ref<any>(null);
+const fileComplaint = ref<any>(null);
+const clickTime = ref<boolean>(false);
+const date = ref<Date | null>(null);
+const dateEnd = ref<Date | null>(null);
+const investigation = ref<string>("");
+const faultOps = ref<any>([
+  { id: "000-000", value: "test1" },
+  { id: "000-001", value: "test2" },
+]);
+const faultOp = ref<any>();
+const investigationOps = ref<any>([
+  { id: "000-000", value: "test1" },
+  { id: "000-001", value: "test2" },
+]);
+const daysExtend = ref<string>("");
+const daysExtendOp = ref<any>();
+const daysExtendOps = ref<any>([
+  { id: "000-000", value: "test1" },
+  { id: "000-001", value: "test2" },
+]);
+const investigationOp = ref<any>();
+
+function filterFnOptionsType(val: string, update: any, type: string) {
+  update(() => {
+    const needle = val.toLowerCase();
+    if (type === "faultOp") {
+      faultOp.value = faultOps.value.filter(
+        (v: any) => v.value.toLowerCase().indexOf(needle) > -1
+      );
+    } else if (type === "investigationOp") {
+      investigationOp.value = investigationOps.value.filter(
+        (v: any) => v.value.toLowerCase().indexOf(needle) > -1
+      );
+    } else if (type === "daysExtendOp") {
+      daysExtendOp.value = daysExtendOps.value.filter(
+        (v: any) => v.value.toLowerCase().indexOf(needle) > -1
+      );
+    }
+  });
+}
+</script>
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    <q-btn
+      icon="mdi-arrow-left"
+      unelevated
+      round
+      dense
+      flat
+      color="primary"
+      class="q-mr-sm"
+      @click="router.go(-1)"
+    />
+    เพิ่มรายการสืบสวนข้อเท็จจริง
+  </div>
+  <q-card flat bordered class="col-12 q-mt-sm">
+    <div class="q-pa-md">
+      <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-12">
+                <q-input
+                  class="full-width inputgreen cursor-pointer"
+                  outlined
+                  dense
+                  lazy-rules
+                  borderless
+                  v-model="complaint"
+                  :rules="[(val) => !!val || `${'กรุณากรอกเรื่องร้องเรียน'}`]"
+                  hide-bottom-space
+                  :label="`${'เรื่องร้องเรียน'}`"
+                  type="textarea"
+                />
+              </div>
+              <div class="col-4 q-my-md q-mr-xs">
+                <q-select
+                  outlined
+                  dense
+                  v-model="fault"
+                  :options="faultOp"
+                  label="ลักษณะความผิด"
+                  emit-value
+                  map-options
+                  option-label="value"
+                  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>
+              <div class="col-4 q-my-md q-ml-xs">
+                <q-select
+                  outlined
+                  dense
+                  v-model="investigation"
+                  :options="investigationOp"
+                  label="ลักษณะการสืบสวน"
+                  emit-value
+                  map-options
+                  option-label="value"
+                  option-value="id"
+                  use-input
+                  @filter="(inputValue: any,
+            doneFn: Function) => filterFnOptionsType(inputValue, doneFn, 'investigationOp'
+            )"
+                  ><template v-slot:no-option>
+                    <q-item>
+                      <q-item-section class="text-grey">
+                        ไม่มีข้อมูล
+                      </q-item-section>
+                    </q-item>
+                  </template>
+                </q-select>
+              </div>
+              <div class="row items-start col-12">
+                <p
+                  class="text-weight-medium q-ma-none text-center align-top q-pt-sm"
+                >
+                  วันที่สืบสวน
+                </p>
+                <q-checkbox
+                  size="md"
+                  v-model="clickTime"
+                  label="ขยายเวลา"
+                  color="primary"
+                  class="text-weight-medium q-ml-sm"
+                  keep-color
+                />
+                <div v-if="clickTime !== true" class="self-start row">
+                  <div class="q-mx-xs">
+                    <datepicker
+                      menu-class-name="modalfix"
+                      v-model="date"
+                      :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="full-width inputgreen cursor-pointer"
+                          outlined
+                          dense
+                          lazy-rules
+                          borderless
+                          :model-value="date !== null ? date2Thai(date) : null"
+                          :rules="[
+                            (val) =>
+                              !!val || `${'กรุณาเลือกวันที่เริ่มการสอบสวน'}`,
+                          ]"
+                          :label="`${'วันที่เริ่มการสอบสวน'}`"
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              color="primary"
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                  </div>
+                  <div class="q-mx-xs q-">
+                    <datepicker
+                      menu-class-name="modalfix"
+                      v-model="dateEnd"
+                      :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="full-width inputgreen cursor-pointer"
+                          outlined
+                          dense
+                          lazy-rules
+                          borderless
+                          :model-value="
+                            dateEnd !== null ? date2Thai(dateEnd) : null
+                          "
+                          :rules="[
+                            (val) =>
+                              !!val || `${'กรุณาเลือกวันที่สิ้นสุดการสอบสวน'}`,
+                          ]"
+                          :label="`${'วันที่สิ้นสุดการสอบสวน'}`"
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              color="primary"
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                  </div>
+                </div>
+                <div v-else class="q-mx-xs">
+                  <q-select
+                    outlined
+                    dense
+                    lazy-rules
+                    v-model="daysExtend"
+                    :options="daysExtendOp"
+                    label="จำนวนวันที่ต้องการขยาย"
+                    emit-value
+                    map-options
+                    :rules="[
+                      (val) => !!val || `${'กรุณาเลือกจำนวนวันที่ต้องการขยาย'}`,
+                    ]"
+                    option-label="value"
+                    option-value="id"
+                    use-input
+                    @filter="(inputValue: any,
+            doneFn: Function) => filterFnOptionsType(inputValue, doneFn, 'daysExtendOp'
+            )"
+                    ><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="col-12 q-my-xs">
+                <q-input
+                  class="full-width inputgreen cursor-pointer"
+                  outlined
+                  dense
+                  lazy-rules
+                  borderless
+                  v-model="complaintdetail"
+                  :rules="[
+                    (val) => !!val || `${'กรุณากรอกรายละเอียดเรื่องร้องเรียน'}`,
+                  ]"
+                  hide-bottom-space
+                  :label="`${'รายละเอียดเรื่องร้องเรียน'}`"
+                  type="textarea"
+                />
+              </div>
+              <div class="col-12 q-my-sm">
+                <q-file
+                  outlined
+                  dense
+                  v-model="fileComplaint"
+                  label="ไฟล์เอกสารหลักฐานเรื่องร้องเรียน"
+                  lazy-rules
+                  :rules="[(val) => val || 'กรุณาเลือกไฟล์หลักฐานการรับ']"
+                  hide-bottom-space
+                >
+                  <template v-slot:prepend>
+                    <q-icon name="attach_file" color="primary" />
+                  </template>
+                </q-file>
+              </div>
+              <div class="col-12 q-my-sm">
+                <q-input
+                  class="full-width inputgreen cursor-pointer"
+                  outlined
+                  dense
+                  lazy-rules
+                  borderless
+                  v-model="detail"
+                  :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
+                  hide-bottom-space
+                  :label="`${'รายละเอียด'}`"
+                  type="textarea"
+                />
+              </div>
+              <div class="col-12 q-my-xs">
+                <q-file
+                  outlined
+                  dense
+                  v-model="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>
+              <div class="col-4 q-mr-sm">
+                <q-input
+                  standout
+                  dense
+                  v-model="results"
+                  outlined
+                  debounce="300"
+                  placeholder="ผลการสืบสวน"
+                >
+                </q-input>
+              </div>
+              <div class="col-4">
+                <q-btn label="ยืนยันผลการสืบสวน" color="public">
+                  <q-tooltip>ยืนยันผลการสืบสวน</q-tooltip>
+                </q-btn>
+              </div>
+            </div>
+          </div>
+        </div>
+      </q-form>
+    </div>
+  </q-card>
+</template>
diff --git a/src/modules/11_discipline/router.ts b/src/modules/11_discipline/router.ts
index 0f41d90f9..90a6286b1 100644
--- a/src/modules/11_discipline/router.ts
+++ b/src/modules/11_discipline/router.ts
@@ -1,6 +1,7 @@
 
 const complaintMain = () => import("@/modules/11_discipline/components/1_Complaint/MainPage.vue")
 const factsMain = () => import("@/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue")
+const investigatefactsAdd = () => import("@/modules/11_discipline/components/2_InvestigateFacts/investigatefactsAdd.vue")
 const disciplinaryMain = () => import("@/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue")
 
 
@@ -35,4 +36,14 @@ export default [
             Role: "coin",
         },
     },
+    {
+        path: "/discipline/investigatefacts/add",
+        name: "/discipline-investigatefactsAdd",
+        component: investigatefactsAdd,
+        meta: {
+            Auth: true,
+            Key: [11.2],
+            Role: "coin",
+        },
+    },
 ]
\ No newline at end of file
diff --git a/src/modules/11_discipline/stroes/InvestigateFactStore.ts b/src/modules/11_discipline/stroes/InvestigateFactStore.ts
new file mode 100644
index 000000000..072fe5ee4
--- /dev/null
+++ b/src/modules/11_discipline/stroes/InvestigateFactStore.ts
@@ -0,0 +1,53 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+export const useInvestigateFactStore = defineStore("InvestigateFact", () => {
+    const rows = ref<any>([])
+
+    async function fecthList(data: any) {
+        let datalist = data.map((e: any) => ({
+            subject: e.subject,
+            interrogated: e.interrogated,
+            fault: convertFault(e.fault),
+            status: convertSatatus(e.status),
+            active: activeStatus(e.active)
+            
+        }))
+        rows.value = datalist
+        console.log(rows.value)
+    }
+    function convertFault(val: string) {
+        switch (val) {
+            case "0":
+                return "ความผิดวินัยยังไม่ระบุ"
+            case "1":
+                return "ความผิดวินัยไม่ร้ายแรง"
+            case "2":
+                return "ความผิดวินัยร้ายแรง"
+        }
+    }
+    function convertSatatus(val: string) {
+        switch (val) {
+            case "0":
+                return "ยังไม่ระบุ"
+            case "1":
+                return "ร้ายแรง"
+            case "2":
+                return "ไม่ร้ายแรง"
+            case "3":
+                return "ยุติเรื่อง"
+        }
+    }
+    function activeStatus(val: string) {
+        switch (val) {
+            case "0":
+                return "ยังไม่ได้ยืนยันผล"
+            case "1":
+                return "ยืนยันผลเเล้ว"
+        }
+    }
+    return {
+        fecthList,
+        rows,
+    };
+})
\ No newline at end of file