diff --git a/src/modules/06_retirement/components/ExitInterview/exitMain.vue b/src/modules/06_retirement/components/ExitInterview/exitMain.vue
index bb2a74ce4..a5f1c42aa 100644
--- a/src/modules/06_retirement/components/ExitInterview/exitMain.vue
+++ b/src/modules/06_retirement/components/ExitInterview/exitMain.vue
@@ -278,7 +278,7 @@ const openModalCalendar = (rows: any) => {
       <div class="row col-12">
         <div class="row col-12 q-col-gutter-sm">
           <div>
-            <q-btn color="info" @click="$router.push('/exit-Interview/edit-question')">แก้ไขคำถาม</q-btn>
+            <q-btn color="blue-9" icon="mdi-square-edit-outline" outline @click="$router.push('/exit-Interview/edit-question')"><span class="q-pl-sm">แก้ไขคำถาม</span></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
diff --git a/src/modules/09_leave/components/1_Work/DialogDetail.vue b/src/modules/09_leave/components/1_Work/DialogDetail.vue
index 7d866964e..b851b4476 100644
--- a/src/modules/09_leave/components/1_Work/DialogDetail.vue
+++ b/src/modules/09_leave/components/1_Work/DialogDetail.vue
@@ -42,9 +42,8 @@ function colsePopup() {
 <template>
   <q-dialog v-model="props.modal">
     <q-card style="width: 950px; max-width: 80vw">
-      <q-card-section>
         <q-toolbar>
-          <q-toolbar-title>
+          <q-toolbar-title class="text-subtitle1 text-weight-bold">
             <span style="margin-right: 0"> รายละเอียดการลงเวลาของ</span>
             <span class="text-primary">{{ titlename }}</span>
           </q-toolbar-title>
@@ -57,22 +56,19 @@ function colsePopup() {
             @click="colsePopup"
           />
         </q-toolbar>
-      </q-card-section>
       <q-separator />
-      <q-card-section class="q-pt-none">
+      <q-card-section class="q-pa-none">
         <div class="q-pa-md">
-          <q-banner
-            inline-actions
-            rounded
-            class="bg-grey-2"
-            style="border: 2px solid rgb(239, 236, 236)"
+          <q-card
+            bordered
+            class="q-pa-sm bg-grey-1"
           >
             <div class="row">
               <div class="col-4">
                 <q-list>
                   <q-item>
                     <q-item-section>
-                      <q-item-label class="text-grey-5"
+                      <q-item-label class="text-grey-8"
                         >ชื่อ-นามสกุล</q-item-label
                       >
                       <q-item-label>{{ titlename }}</q-item-label>
@@ -83,7 +79,7 @@ function colsePopup() {
               <div class="col-4">
                 <q-item>
                   <q-item-section>
-                    <q-item-label class="text-grey-5">
+                    <q-item-label class="text-grey-8">
                       วันที่เข้างาน</q-item-label
                     >
                     <q-item-label>05 ต.ค. 56</q-item-label>
@@ -93,12 +89,12 @@ function colsePopup() {
               <div class="col-3">
                 <q-item>
                   <q-item-section>
-                    <q-item-label class="text-grey-5">สถานะ</q-item-label>
+                    <q-item-label class="text-grey-8">สถานะ</q-item-label>
                     <q-item-label>{{ status }}</q-item-label>
                   </q-item-section>
                 </q-item>
               </div>
-              <div class="col">
+              <div class="col row items-center">
                 <q-btn
                   v-if="!statusEdit"
                   dense
@@ -106,8 +102,7 @@ function colsePopup() {
                   round
                   color="primary"
                   icon="mdi-pencil"
-                  size="sm"
-                  class="q-mt-lg"
+                  size="12px"
                   @click="statusEdit = true"
                 >
                   <q-tooltip>แก้ไข</q-tooltip>
@@ -119,8 +114,7 @@ function colsePopup() {
                     round
                     color="red"
                     icon="mdi-undo"
-                    size="sm"
-                    class="q-mt-lg"
+                    size="12px"
                     @click="statusEdit = false"
                   >
                     <q-tooltip>ยกเลิก</q-tooltip>
@@ -131,30 +125,29 @@ function colsePopup() {
                     round
                     color="secondary"
                     icon="save"
-                    size="sm"
-                    class="q-mt-lg"
+                    size="12px"
+                    class="q-ml-sm"
                   >
                     <q-tooltip>บันทึกข้อมูล</q-tooltip>
                   </q-btn>
                 </div>
               </div>
             </div>
-          </q-banner>
-          <div class="row q-gutter-md q-mt-md">
+          </q-card>
+          <div class="row q-gutter-md q-pt-md">
             <div class="col">
               <q-card flat bordered>
-                <q-card-section>
                   <div class="q-pa-md q-gutter-md">
                     <div class="row">
-                      <div class="col text-grey-6">เวลาเข้างาน</div>
+                      <div class="col text-grey-8">เวลาเข้างาน</div>
                       <div class="col">{{ timeIn }}</div>
                     </div>
                     <div class="row">
-                      <div class="col text-grey-6">พิกัด</div>
+                      <div class="col text-grey-8">พิกัด</div>
                       <div class="col">{{ coordinatesIn }}</div>
                     </div>
                     <div class="row">
-                      <div class="col-6 text-grey-6">รูปภาพ</div>
+                      <div class="col-6 text-grey-8">รูปภาพ</div>
                       <div class="col-5">
                         <q-img
                           style="
@@ -167,27 +160,25 @@ function colsePopup() {
                       </div>
                     </div>
                     <div class="row">
-                      <div class="col text-grey-6">หมายเหตุ</div>
+                      <div class="col text-grey-8">หมายเหตุ</div>
                       <div class="col">-</div>
                     </div>
                   </div>
-                </q-card-section>
               </q-card>
             </div>
             <div class="col">
               <q-card flat bordered>
-                <q-card-section>
                   <div class="q-pa-md q-gutter-md">
                     <div class="row">
-                      <div class="col text-grey-6">เวลาออกงาน</div>
+                      <div class="col text-grey-8">เวลาออกงาน</div>
                       <div class="col">{{ timeOut }}</div>
                     </div>
                     <div class="row">
-                      <div class="col text-grey-6">พิกัด</div>
+                      <div class="col text-grey-8">พิกัด</div>
                       <div class="col">{{ coordinatesOut }}</div>
                     </div>
                     <div class="row">
-                      <div class="col-6 text-grey-6">รูปภาพ</div>
+                      <div class="col-6 text-grey-8">รูปภาพ</div>
                       <div class="col-5">
                         <q-img
                           style="
@@ -200,11 +191,10 @@ function colsePopup() {
                       </div>
                     </div>
                     <div class="row">
-                      <div class="col text-grey-6">หมายเหตุ</div>
+                      <div class="col text-grey-8">หมายเหตุ</div>
                       <div class="col">-</div>
                     </div>
                   </div>
-                </q-card-section>
               </q-card>
             </div>
           </div>
diff --git a/src/modules/09_leave/views/LeaveListMain.vue b/src/modules/09_leave/views/LeaveListMain.vue
index c184af5e1..17dda82c2 100644
--- a/src/modules/09_leave/views/LeaveListMain.vue
+++ b/src/modules/09_leave/views/LeaveListMain.vue
@@ -51,28 +51,28 @@ function changTab() {
   <div class="toptitle text-dark col-12 row items-center">รายการลา</div>
   <div>
     <!-- <q-card flat bordered class="col-12 q-mt-sm"> -->
-    <div class="q-pa-md">
+    <q-card bordered flat >
       <q-tabs
         v-model="leaveStore.tab"
         dense
         align="left"
         inline-label
-        class="bg-grey-4 rounded-borders"
-        indicator-color="white"
+        class="rounded-borders"
+        indicator-color="primary"
+        active-bg-color="teal-1"
+        active-class="text-primary"
       >
         <q-tab
           @click="changTab"
           name="1"
           label="รายการลาที่อยู่ระหว่างดำเนิดการ"
-          :class="
-            leaveStore.tab == '1' ? 'bg-white text-primary rounded-borders	' : ''
-          "
+          
         >
           <q-badge
             color="grey-4"
             :class="
               leaveStore.tab == '1'
-                ? 'q-px-sm text-weight-medium text-primary q-ml-xl'
+                ? 'q-px-sm text-weight-medium text-primary q-ml-xl bg-teal-1'
                 : 'q-px-sm text-weight-medium text-black q-ml-xl'
             "
             :label="leaveStore.amounttab1"
@@ -83,17 +83,13 @@ function changTab() {
           @click="changTab"
           name="2"
           label="รายการลาทั้งหมด"
-          :class="
-            leaveStore.tab == '2'
-              ? 'bg-white text-primary rounded rounded-borders	'
-              : ''
-          "
+          
         >
           <q-badge
             color="grey-4"
             :class="
               leaveStore.tab == '2'
-                ? 'q-px-sm text-weight-medium text-primary q-ml-xl'
+                ? 'q-px-sm text-weight-medium text-primary q-ml-xl bg-teal-1'
                 : 'q-px-sm text-weight-medium text-black q-ml-xl'
             "
             :label="leaveStore.amounttab2"
@@ -101,6 +97,7 @@ function changTab() {
           />
         </q-tab>
       </q-tabs>
+      <q-separator />
 
       <q-tab-panels v-model="leaveStore.tab" animated>
         <q-tab-panel name="1">
@@ -113,8 +110,8 @@ function changTab() {
           <TableList />
         </q-tab-panel>
       </q-tab-panels>
-    </div>
     <!-- </q-card> -->
+    </q-card>
   </div>
 </template>
 
diff --git a/src/modules/11_discipline/components/1_Complaint/AddComplaintPage.vue b/src/modules/11_discipline/components/1_Complaint/AddComplaintPage.vue
index 4dd3cf3dd..7feb47c8d 100644
--- a/src/modules/11_discipline/components/1_Complaint/AddComplaintPage.vue
+++ b/src/modules/11_discipline/components/1_Complaint/AddComplaintPage.vue
@@ -1,23 +1,27 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
-import { useRoute, useRouter } from "vue-router";
+import { useRouter } from "vue-router";
 
-import type { DataOption } from "../../interface/index/Main";
+// import Type
+import type {
+  DataOption,
+  MyObjectComplaintsRef,
+} from "../../interface/index/Main";
 
 // importStroe
 import { useCounterMixin } from "@/stores/mixin";
 import { useComplainstDataStore } from "../../stroes/ComplaintsStore";
 
-const route = useRoute();
 const $q = useQuasar();
 const router = useRouter();
 const mixin = useCounterMixin();
-const { date2Thai, dialogConfirm } = mixin;
+const { date2Thai, dialogConfirm } = mixin; //function จาก stores หลัก
 
 const complainstStore = useComplainstDataStore();
-const { selectComplainantTpye, filterSelector, fectOptioin } = complainstStore;
+const { selectComplainantTpye, filterSelector, fectOptioin } = complainstStore; // function จาก store complainstStore
 
+// options ทั้งหมด
 const complainantoptions = ref<DataOption[]>([
   { id: "0", name: "บุคคล" },
   { id: "1", name: "หน่ายงาน" },
@@ -67,15 +71,15 @@ const fileDocDataUpload = ref<File[]>([]);
 onMounted(() => {
   fectOptioin(complainantoptions.value, agencytoptions.value);
 });
-
+// เลือกผู้ร้องเรียน
 async function selectComplainant(val: string) {
   complainant.value = "";
   office.value = "";
   agency.value = "";
   if (val === "0") {
-    await fectListname();
+    await fectListname(); // ถ้าเลือกบุกคลจะเรียก function fectListname เรียกรายชื่อจากทะเบียน
   } else if (val === "1") {
-    await fectOffice();
+    await fectOffice(); // ถ้าเลือกหน่วยงานจะเรียก function fectOffice  เรียกโครงสร้างสำนักงาน
   }
 }
 // เรียกรายชื่อ
@@ -96,6 +100,7 @@ async function fectListname() {
   ];
   selectComplainantTpye(listName);
 }
+// เรียกโครงสร้างสำนักงาน
 async function fectOffice() {
   // const listOffice = [
   //   {
@@ -112,22 +117,23 @@ async function fectOffice() {
   //   },
   // ];
 }
+// อัพโหลดไฟล์
 const fileUploadDoc = async (files: any) => {
   files.forEach((file: any) => {
     fileDocDataUpload.value.push(file);
   });
 };
-
+// เลือกระดับการพิจารณา
 function selectLevel(val: string) {
   let dayNum = 0;
   if (val == "0") {
-    dayNum = 45;
+    dayNum = 45; // ปกติ
   } else if (val == "1") {
-    dayNum = 30;
+    dayNum = 30; // ด่วน
   } else {
-    dayNum = 15;
+    dayNum = 15; // ด่วนมาก
   }
-
+  // วันแจ้งเตือนล่วงหน้า
   if (dateconsideration.value) {
     const currentDate = new Date(dateconsideration.value);
     const newDate = new Date(
@@ -136,7 +142,56 @@ function selectLevel(val: string) {
     datewarn.value = newDate;
   }
 }
+// validateForm
+const complainantTypeRef = ref<any>(null);
+const complainantRef = ref<any>(null);
+const officeRef = ref<any>(null);
+const agencyRef = ref<any>(null);
+const topicComplaintRef = ref<any>(null);
+const detailRef = ref<any>(null);
+const datereceiveRef = ref<any>();
+const dateconsiderationRef = ref<any>(null);
+const offenseDescriptionRef = ref<any>(null);
+const considerationLevelRef = ref<any>(null);
+const datewarnRef = ref<any>(null);
+const receivecomplaintsRef = ref<any>(null);
+const petitionerRef = ref<any>(null);
+const filesRef = ref<any>(null);
 
+const objectComplaintsRef: MyObjectComplaintsRef = {
+  complainantType: complainantTypeRef,
+  complainant: complainantRef,
+  office: officeRef,
+  agency: agencyRef,
+  topicComplaint: topicComplaintRef,
+  detail: detailRef,
+  datereceive: datereceiveRef,
+  dateconsideration: dateconsiderationRef,
+  offenseDescription: offenseDescriptionRef,
+  considerationLevel: considerationLevelRef,
+  datewarn: datewarnRef,
+  receivecomplaints: receivecomplaintsRef,
+  petitioner: petitionerRef,
+  files: filesRef,
+};
+function validateForm() {
+  const hasError = [];
+  for (const key in objectComplaintsRef) {
+    if (Object.prototype.hasOwnProperty.call(objectComplaintsRef, key)) {
+      const property = objectComplaintsRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    onSubmit();
+  } else {
+    console.log("ไม่ผ่าน ");
+  }
+}
+// บันทึกข้อมูล
 function onSubmit() {
   dialogConfirm(
     $q,
@@ -162,13 +217,14 @@ function onSubmit() {
   </div>
   <div class="col-12 q-mt-sm">
     <q-card flat bordered>
-      <q-form @submit.prevent="onSubmit">
+      <form @submit.prevent="validateForm">
         <div class="col-12 row q-pa-md">
           <div
             class="col-xs-12 col-sm-12 row q-col-gutter-x-md q-col-gutter-y-xs"
           >
             <div class="col-xs-12 col-sm-2">
               <q-select
+                ref="complainantTypeRef"
                 dense
                 outlined
                 v-model="complainantType"
@@ -185,26 +241,58 @@ function onSubmit() {
                 @filter="(inputValue: any,
                 doneFn: Function) => filterSelector(inputValue, doneFn, 'filtercomplainantType'
                 )"
-              />
+              >
+                <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-xs-12 col-sm-2" v-if="complainantType === '0'">
               <q-select
+                ref="complainantRef"
                 dense
                 outlined
                 v-model="complainant"
                 :options="complainstStore.optionListName"
-                label="ราชชื่อจากทะเบียรประวัติ"
+                label="รายชื่อจากทะเบียรประวัติ"
                 option-value="id"
                 option-label="name"
                 emit-value
                 map-options
-              />
+                :rules="[(val) => !!val || `${'กรุณาเลือกรายชื่อ'}`]"
+                lazy-rules
+                use-input
+                @filter="(inputValue: any,
+                doneFn: Function) => filterSelector(inputValue, doneFn, 'filtercomplainantOP'
+                )"
+                ><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-xs-12 col-sm-2" v-if="complainantType === '1'">
-              <q-input dense outlined v-model="office" label="เลือกสำนักงาน" />
+              <q-input
+                ref="officeRef"
+                dense
+                outlined
+                v-model="office"
+                label="เลือกสำนักงาน"
+                :rules="[(val) => !!val || `${'กรุณาเลือกสำนักงาน'}`]"
+                lazy-rules
+              />
             </div>
             <div class="col-xs-12 col-sm-2">
               <q-select
+                ref="agencyRef"
                 dense
                 outlined
                 v-model="agency"
@@ -220,10 +308,19 @@ function onSubmit() {
                 @filter="(inputValue: any,
                 doneFn: Function) => filterSelector(inputValue, doneFn, 'filteragencytoptions'
                 )"
-              />
+              >
+                <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-xs-12 col-sm-12">
               <q-input
+                ref="topicComplaintRef"
                 dense
                 outlined
                 v-model="topicComplaint"
@@ -236,6 +333,7 @@ function onSubmit() {
             </div>
             <div class="col-xs-12 col-sm-12">
               <q-input
+                ref="detailRef"
                 dense
                 outlined
                 v-model="detail"
@@ -264,6 +362,7 @@ function onSubmit() {
                 </template>
                 <template #trigger>
                   <q-input
+                    ref="datereceiveRef"
                     outlined
                     dense
                     class="full-width datepicker"
@@ -306,6 +405,7 @@ function onSubmit() {
                 </template>
                 <template #trigger>
                   <q-input
+                    ref="dateconsiderationRef"
                     outlined
                     dense
                     class="full-width datepicker"
@@ -334,6 +434,7 @@ function onSubmit() {
             </div>
             <div class="col-xs-12 col-sm-2">
               <q-select
+                ref="offenseDescriptionRef"
                 dense
                 outlined
                 v-model="offenseDescription"
@@ -349,6 +450,7 @@ function onSubmit() {
             </div>
             <div class="col-xs-12 col-sm-2">
               <q-select
+                ref="considerationLevelRef"
                 dense
                 outlined
                 v-model="considerationLevel"
@@ -382,6 +484,7 @@ function onSubmit() {
                 </template>
                 <template #trigger>
                   <q-input
+                    ref="datewarnRef"
                     outlined
                     dense
                     class="full-width datepicker"
@@ -407,6 +510,7 @@ function onSubmit() {
             </div>
             <div class="col-xs-12 col-sm-2">
               <q-select
+                ref="receivecomplaintsRef"
                 dense
                 outlined
                 v-model="receivecomplaints"
@@ -423,6 +527,7 @@ function onSubmit() {
             <div class="col-xs-12 col-sm-6"></div>
             <div class="col-xs-12 col-sm-4">
               <q-input
+                ref="petitionerRef"
                 dense
                 outlined
                 v-model="petitioner"
@@ -433,6 +538,7 @@ function onSubmit() {
             </div>
             <div class="col-xs-12 col-sm-4">
               <q-file
+                ref="filesRef"
                 class="col-xs-12 col-sm-10"
                 outlined
                 dense
@@ -443,6 +549,7 @@ function onSubmit() {
                 lazy-rules
                 accept=".pdf,.xlsx,.doc"
                 clearable
+                :rules="[(val) => !!val || `${'กรุณาเพิ่มไฟล์เอกสารหลักฐาน'}`]"
               >
                 <template v-slot:prepend>
                   <q-icon name="attach_file" />
@@ -463,7 +570,7 @@ function onSubmit() {
             ><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn
           >
         </div>
-      </q-form>
+      </form>
     </q-card>
   </div>
 </template>
diff --git a/src/modules/11_discipline/components/1_Complaint/MainPage.vue b/src/modules/11_discipline/components/1_Complaint/MainPage.vue
index c1d165519..2c9f6cbdb 100644
--- a/src/modules/11_discipline/components/1_Complaint/MainPage.vue
+++ b/src/modules/11_discipline/components/1_Complaint/MainPage.vue
@@ -7,7 +7,7 @@ import { useComplainstDataStore } from "../../stroes/ComplaintsStore";
 const router = useRouter();
 
 const complainstStore = useComplainstDataStore();
-const { fectComplainst } = complainstStore;
+const { fectComplainst } = complainstStore; // function จาก stores
 
 //ข้อมูล Table
 const filterTable = ref<string>("");
@@ -99,6 +99,7 @@ onMounted(async () => {
   await fecthListComplaints();
 });
 
+// เรีนกรายการเรื่องร้องเรียน
 async function fecthListComplaints() {
   const listData = [
     {
diff --git a/src/modules/11_discipline/components/2_InvestigateFacts/investigatefactsAdd.vue b/src/modules/11_discipline/components/2_InvestigateFacts/AddPage.vue
similarity index 85%
rename from src/modules/11_discipline/components/2_InvestigateFacts/investigatefactsAdd.vue
rename to src/modules/11_discipline/components/2_InvestigateFacts/AddPage.vue
index 0fabed5b6..d6071d6dc 100644
--- a/src/modules/11_discipline/components/2_InvestigateFacts/investigatefactsAdd.vue
+++ b/src/modules/11_discipline/components/2_InvestigateFacts/AddPage.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import router from "@/router";
-import { onMounted, ref } from "vue";
+import { onMounted, ref, watch } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
+import { useInvestigateFactStore } from "@/modules/11_discipline/stroes/InvestigateFactStore";
+const investigateFactStore = useInvestigateFactStore();
+const { filterFnOptionsType } = investigateFactStore;
 const mixin = useCounterMixin();
 const {
   messageError,
@@ -17,51 +20,14 @@ const detail = ref<string>("");
 const fault = ref<string>("");
 const results = ref<string>("");
 const other = ref<string>("");
-const evidenceFiles = ref<any>(null);
-const fileComplaint = ref<any>(null);
+const evidenceFiles = ref<File | null>(null);
+const fileComplaint = ref<File | null>(null);
 const clickTime = ref<boolean>(false);
-const date = ref<Date | null>(null);
-const dateEnd = ref<Date | null>(null);
+const date = ref<Date>();
+const dateEnd = ref<Date>();
 const investigation = ref<string>("");
-const faultOps = ref<any>([
-  { id: "001", value: "ยังไม่ระบุ" },
-  { id: "002", value: "ไม่ร้ายเเรง" },
-  { id: "003", value: "ร้ายเเรง" },
-]);
-const faultOp = ref<any>();
-const investigationOps = ref<any>([
-  { id: "001", value: "เเต่งตั้งการสืบสวน" },
-  { id: "002", value: "สืบสวนทางลับ" },
-  { id: "003", value: "อื่นๆ" },
-]);
-const daysExtend = ref<string>("");
-const daysExtendOp = ref<any>();
-const daysExtendOps = ref<any>([
-  { id: "000", value: "15 วัน" },
-  { id: "001", value: "30 วัน" },
-  { id: "002", value: "45 วัน" },
-  { id: "003", value: "60 วัน" },
-]);
-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
-      );
-    }
-  });
-}
+const daysExtend = ref<string>("");
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
@@ -103,11 +69,11 @@ function filterFnOptionsType(val: string, update: any, type: string) {
                     outlined
                     dense
                     v-model="fault"
-                    :options="faultOp"
+                    :options="investigateFactStore.faultOp"
                     label="ลักษณะความผิด"
                     emit-value
                     map-options
-                    option-label="value"
+                    option-label="name"
                     option-value="id"
                     use-input
                     @filter="(inputValue: any,
@@ -127,11 +93,11 @@ function filterFnOptionsType(val: string, update: any, type: string) {
                     outlined
                     dense
                     v-model="investigation"
-                    :options="investigationOp"
+                    :options="investigateFactStore.investigationOp"
                     label="ลักษณะการสืบสวน"
                     emit-value
                     map-options
-                    option-label="value"
+                    option-label="name"
                     option-value="id"
                     use-input
                     @filter="(inputValue: any,
@@ -195,7 +161,7 @@ function filterFnOptionsType(val: string, update: any, type: string) {
                           dense
                           lazy-rules
                           borderless
-                          :model-value="date !== null ? date2Thai(date) : null"
+                          :model-value="date ? date2Thai(date) : null"
                           :rules="[
                             (val) =>
                               !!val || `${'กรุณาเลือกวันที่เริ่มการสอบสวน'}`,
@@ -234,9 +200,7 @@ function filterFnOptionsType(val: string, update: any, type: string) {
                           dense
                           lazy-rules
                           borderless
-                          :model-value="
-                            dateEnd !== null ? date2Thai(dateEnd) : null
-                          "
+                          :model-value="dateEnd ? date2Thai(dateEnd) : null"
                           :rules="[
                             (val) =>
                               !!val || `${'กรุณาเลือกวันที่สิ้นสุดการสอบสวน'}`,
@@ -262,14 +226,17 @@ function filterFnOptionsType(val: string, update: any, type: string) {
                     dense
                     lazy-rules
                     v-model="daysExtend"
-                    :options="daysExtendOp"
+                    :options="investigateFactStore.daysExtendOp"
                     label="จำนวนวันที่ต้องการขยาย"
                     emit-value
                     map-options
                     :rules="[
-                      (val) => !!val || `${'กรุณาเลือกจำนวนวันที่ต้องการขยาย'}`,
+                      (val) =>
+                        clickTime === true
+                          ? !!val || 'กรุณาเลือกจำนวนวันที่ต้องการขยาย'
+                          : true,
                     ]"
-                    option-label="value"
+                    option-label="name"
                     option-value="id"
                     use-input
                     @filter="(inputValue: any,
diff --git a/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue b/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue
index a15f5730b..329b575b5 100644
--- a/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue
+++ b/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue
@@ -2,26 +2,26 @@
 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 { useCounterMixin } from "@/stores/mixin";
 
-import config from "@/app.config";
-import http from "@/plugins/http";
+// 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 mixin = useCounterMixin();
+// const {
+//   date2Thai,
+//   success,
+//   messageError,
+//   showLoader,
+//   hideLoader,
+//   dialogConfirm,
+//   dialogRemove,
+// } = mixin;
 const $q = useQuasar(); //ใช้ noti quasar
 
 const visibleColumns = ref<string[]>([
@@ -116,7 +116,7 @@ function fecthInvestigateFact() {
     {
       subject: "ทุจริตในหน้าที่",
       interrogated: "ศิรินภา คงน้อยี่",
-      fault: "0",
+      fault: "1",
       status: "0",
       active:'1'
     },
@@ -130,15 +130,15 @@ function fecthInvestigateFact() {
     {
       subject: "กระทำทุจริตเงินกองทุน",
       interrogated: "นายกัณฐิมา  กาฬสินธ์ุ",
-      fault: "1",
-      status: "2",
+      fault: "0",
+      status: "1",
       active:'1'
     },
     {
       subject: "พูดจาไม่สุภาพ",
       interrogated: "นายปิยรมย์ ศิริธาราฟ",
-      fault: "2",
-      status: "3",
+      fault: "0",
+      status: "1",
       active:'1'
     },
   ];
@@ -210,7 +210,7 @@ onMounted(()=>{
         />
       </div>
       <div class="col-12">
-        <q-table
+        <d-table
           ref="table"
           :columns="columns"
           :rows="dataInvestigate.rows"
@@ -228,7 +228,7 @@ onMounted(()=>{
         >
           <template v-slot:header="props">
             <q-tr :props="props">
-              <q-th v-for="col in props.cols" :key="col.name" :props="props">
+              <q-th v-for="col in props.cols" :key="col.name" :props="props" style="padding: 10px;color:#35373C;font-weight: 500;">
                 <span class="text-weight-medium">{{ col.label }}</span>
               </q-th>
               <q-th auto-width />
@@ -267,8 +267,8 @@ onMounted(()=>{
               <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 auto-width >
+                <q-btn v-if="props.row.status === 'ยุติเรื่อง'" class="q-px-xl q-py-xs text-white no-shadow" style="background-color:#00AA86 ; border-radius: 6px;">ยกเลิกยุติเรื่อง</q-btn>
               </q-td>
             </q-tr>
           </template>
@@ -284,57 +284,10 @@ onMounted(()=>{
               direction-links
             ></q-pagination>
           </template>
-        </q-table>
+        </d-table>
       </div>
     </div>
   </q-card>
 </template>
 
-<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/3_InvestigateDisciplinary/addInvestigate.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/AddPage.vue
similarity index 84%
rename from src/modules/11_discipline/components/3_InvestigateDisciplinary/addInvestigate.vue
rename to src/modules/11_discipline/components/3_InvestigateDisciplinary/AddPage.vue
index 8a3fa7802..ff10f259d 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/addInvestigate.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/AddPage.vue
@@ -7,15 +7,20 @@ import type { QTableProps } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import Dialogbody from "@/modules/11_discipline/components/3_InvestigateDisciplinary/Dialogbody.vue";
-import Table from "@/modules/11_discipline/components/3_InvestigateDisciplinary/director.vue";
+import Table from "@/modules/11_discipline/components/3_InvestigateDisciplinary/DirectorTable.vue";
+import { useInvestigateDisStore } from "@/modules/11_discipline/stroes/InvestigateDisStore";
+import type { directorType } from "@/modules/11_discipline/interface/index/Main";
+
+const investigateDis = useInvestigateDisStore();
+const { fecthDirector } = investigateDis;
 
 const visibleColumns = ref<String[]>([
   "no",
-  "subject",
-  "beingInvestigated",
-  "fault",
-  "penaltyLevel",
-  "caseFault",
+  "name",
+  "position",
+  "duty",
+  "email",
+  "telephone",
 ]);
 const columns = ref<QTableProps["columns"]>([
   {
@@ -28,52 +33,58 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "subject",
+    name: "name",
     align: "left",
     label: "ชื่อ - นามสกุล",
     sortable: true,
-    field: "subject",
+    field: "name",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "beingInvestigated",
+    name: "position",
     align: "left",
     label: "ตำแหน่ง",
     sortable: true,
-    field: "beingInvestigated",
+    field: "position",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "fault",
+    name: "duty",
     align: "left",
     label: "หน้าที่",
     sortable: true,
-    field: "fault",
+    field: "duty",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "penaltyLevel",
+    name: "email",
     align: "left",
     label: "อีเมล",
     sortable: true,
-    field: "penaltyLevel",
+    field: "email",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "caseFault",
+    name: "telephone",
     align: "left",
     label: "เบอร์โทรศัพท์",
     sortable: true,
-    field: "caseFault",
+    field: "telephone",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
 ]);
 
+onMounted(async () => {
+  await fecthInvestigateDisDirector();
+  await hideLoader();
+});
+const selected = ref<directorType[]>([]);
+
 const clickAdd = () => {
   console.log("clickadd");
 };
@@ -81,6 +92,7 @@ const clickAdd = () => {
 const popup = () => {
   modal.value = true;
   filterKeyword2.value = "";
+  fecthInvestigateDisDirector();
 };
 
 const mixin = useCounterMixin();
@@ -98,9 +110,10 @@ const {
 const initialPagination = ref<any>({
   rowsPerPage: 0,
 });
+
 const router = useRouter();
 const route = useRoute();
-const rows = ref<any[]>([]);
+const rows = ref([]);
 const modal = ref<boolean>(false);
 const $q = useQuasar();
 const id = ref<string>(route.params.id as string);
@@ -120,29 +133,15 @@ const evidence = ref<string>("");
 const recordAccuser = ref<string>("");
 const witnesses = ref<string>("");
 const InvestResults = ref<string>("");
-const files = ref<any>();
-const filesEvidence = ref<any>();
-const filesRecordAccuser = ref<any>();
-const filesWitnesses = ref<any>();
-const filesEtc = ref<any>();
+const files = ref<File>();
+const filesEvidence = ref<File>();
+const filesRecordAccuser = ref<File>();
+const filesWitnesses = ref<File>();
+const filesEtc = ref<File>();
 const fileDocDataUpload = ref<File[]>([]);
 const refRaw = ref<string>("");
 const casefault = ref<string>("");
 const whereInvestigate = ref<string>("");
-const optionsTypefault = ref([
-  { label: "ไม่ระบุ", value: 1 },
-  { label: "ร้ายแรง ", value: 2 },
-  { label: "ไม่ร้ายแรง", value: 3 },
-]);
-const optionsfaultLevel = ref([
-  { label: "ไม่ร้ายแรง", value: 1 },
-  { label: "ภาคทัณฑ์ ", value: 2 },
-  { label: "ตัดเงินเดือน", value: 3 },
-  { label: "ลดขั้นเงินเดือน", value: 4 },
-  { label: "ร้ายแรง", value: 5 },
-  { label: "ปลดออก", value: 6 },
-  { label: "ไล่ออก", value: 7 },
-]);
 
 const routeName = router.currentRoute.value.name;
 
@@ -150,54 +149,27 @@ const clickClose = () => {
   modal.value = false;
 };
 
-onMounted(async () => {
-  //   if (route.params.id) {
-  //     // มี params id ให้ เรียกข้อมูลของรอบการเสนอขอ
-  //     await fetchData();
-  //   }
-});
+onMounted(async () => {});
+function fecthInvestigateDisDirector() {
+  const data = [
+    {
+      nameDirector: "นาง เกสินี เจียรสุมัย",
+      position: "ครู",
+      duty: "ประธาน",
+      email: "e@email.com",
+      telephone: "0800808080",
+    },
+    {
+      nameDirector: "นาย สรวิชญ์ พลสิทธิ์",
+      position: "ทดลองงาน",
+      duty: "เลขานุการ",
+      email: "g@gmail.com",
+      telephone: "0614565145",
+    },
+  ];
+  fecthDirector(data); // ส่งข้อมูลไป stores
+}
 // เรียกข้อมูลของรอบการเสนอขอ
-const fetchData = async () => {
-  //   edit.value = true;
-  //   showLoader();
-  //   await http
-  //     .get(config.API.getRoundInsignia(id.value))
-  //     .then((res) => {
-  //       const data = res.data.result;
-  //       id.value = data.period_id;
-  //       roundInsig.value =
-  //         options.value.filter((r: any) => r.value == data.period_round).length >
-  //         0
-  //           ? options.value.filter((r: any) => r.value == data.period_round)[0]
-  //           : null;
-  //       yearly.value = data.period_year;
-  //       datelast.value = data.period_amount;
-  //       dateInvestigate.value = new Date(data.period_start);
-  //       dateAllegation.value = new Date(data.period_end);
-  //       files.value = data.period_doc;
-  //     })
-  //     .catch((e) => {
-  //       messageError($q, e);
-  //     })
-  //     .finally(() => {
-  //       hideLoader();
-  //     });
-};
-
-const deleteData = async (id: string) => {
-  //   showLoader();
-  //   await http
-  //     .delete(config.API.periodExamId(id))
-  //     .then((res) => {
-  //       success($q, "ลบข้อมูลสำเร็จ");
-  //     })
-  //     .catch((e) => {
-  //       messageError($q, e);
-  //     })
-  //     .finally(async () => {
-  //       hideLoader();
-  //     });
-};
 
 const filter = ref<string>(""); //search data table
 
@@ -221,6 +193,10 @@ const checkSave = () => {
   //     });
   //   }
 };
+
+const deleteData = async (id: string) => {
+  console.log("delete");
+};
 // บันทึกข้อมูล
 const SaveData = async () => {
   //   if (edit.value) {
@@ -260,37 +236,6 @@ const addData = async () => {
   //       hideLoader();
   //     });
 };
-// แก้ไขข้อมูล
-const editData = async (id: string) => {
-  //   const formData = new FormData();
-  //   const name = `รอบการเสนอขอพระราชทานเครื่องราชรอบที่ ${
-  //     roundInsig.value.value
-  //   } ปี ${yearly.value + 543}`;
-  //   formData.append("name", name);
-  //   formData.append("year", yearly.value.toString());
-  //   formData.append("amount", datelast.value.toString());
-  //   formData.append("round", roundInsig.value.value);
-  //   if (dateInvestigate.value !== null) {
-  //     formData.append("startDate", dateToISO(dateInvestigate.value));
-  //   }
-  //   if (dateAllegation.value !== null) {
-  //     formData.append("endDate", dateToISO(dateAllegation.value));
-  //   }
-  //   formData.append("file", files.value);
-  //   showLoader();
-  //   await http
-  //     .put(config.API.editRoundInsignia(id), formData)
-  //     .then(() => {
-  //       success($q, "แก้ไขข้อมูลสำเร็จ");
-  //     })
-  //     .catch((e) => {
-  //       messageError($q, e);
-  //     })
-  //     .finally(async () => {
-  //       hideLoader();
-  //       clickBack();
-  //     });
-};
 
 const clickBack = () => {
   router.push(`/discipline/disciplinary`);
@@ -533,7 +478,9 @@ const clickBack = () => {
                   class="col-xs-12 col-sm-3"
                   outlined
                   v-model="typefault"
-                  :options="optionsTypefault"
+                  option-label="name"
+                  option-value="id"
+                  :options="investigateDis.optionsTypefault"
                   label="ลักษณะความผิด"
                 />
                 <q-select
@@ -541,7 +488,9 @@ const clickBack = () => {
                   class="col-xs-12 col-sm-3"
                   outlined
                   v-model="faultLevel"
-                  :options="optionsfaultLevel"
+                  option-label="name"
+                  option-value="id"
+                  :options="investigateDis.optionsfaultLevel"
                   label="ระดับโทษความผิด"
                 />
                 <q-input
@@ -693,7 +642,7 @@ const clickBack = () => {
   <Dialogbody
     v-model:Modal="modal"
     :clickClose="clickClose"
-    :rows2="rows2"
+    :rows2="investigateDis.rows2"
     v-model:filterKeyword2="filterKeyword2"
     v-model:type="type"
   />
diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Dialogbody.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Dialogbody.vue
index 20b02789c..69dac2586 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Dialogbody.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Dialogbody.vue
@@ -3,21 +3,21 @@ import { ref, computed, watchEffect } from "vue";
 import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import type { QTableProps } from "quasar";
-import type { ResponseData } from "@/modules/05_placement/interface/response/Transfer";
+import type { directorType } from "@/modules/11_discipline/interface/index/Main";
 
 import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
 const $q = useQuasar();
-const selected = ref<ResponseData[]>([]);
+const selected = ref<directorType[]>([]);
 const mixin = useCounterMixin();
 const { showLoader, success, messageError, dialogConfirm, hideLoader } = mixin;
 
 //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
 const visibleColumns2 = ref<string[]>([
   "no",
-  "fullname",
+  "nameDirector",
   "position",
   "duty",
   "email",
@@ -36,11 +36,11 @@ const columns2 = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "fullname",
+    name: "nameDirector",
     align: "left",
     label: "ชื่อ-นามสกุล",
     sortable: true,
-    field: "fullname",
+    field: "nameDirector",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -104,6 +104,7 @@ const checkSelected = computed(() => {
   if (selected.value.length === 0) {
     return true;
   }
+  console.log(checkSelected.value);
 });
 
 //popup ยืนยันส่งัว
@@ -206,7 +207,7 @@ watchEffect(() => {
           :filter="filterKeyword2"
           row-key="id"
           :visible-columns="visibleColumns2"
-          selection="multiple"
+          selection="single"
           v-model:selected="selected"
         >
           <template v-slot:header-selection="scope">
@@ -231,8 +232,8 @@ watchEffect(() => {
               <q-td key="no" :props="props">
                 {{ props.rowIndex + 1 }}
               </q-td>
-              <q-td key="fullname" :props="props">
-                {{ props.row.fullname }}
+              <q-td key="nameDirector" :props="props">
+                {{ props.row.nameDirector }}
               </q-td>
               <q-td key="position" :props="props">
                 {{ props.row.position }}
diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/director.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/DirectorTable.vue
similarity index 98%
rename from src/modules/11_discipline/components/3_InvestigateDisciplinary/director.vue
rename to src/modules/11_discipline/components/3_InvestigateDisciplinary/DirectorTable.vue
index f12a5d8fb..854f5f2f6 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/director.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/DirectorTable.vue
@@ -1,45 +1,3 @@
-<template>
-  <div class="q-pb-sm row q-col-gutter-sm">
-    <!--  -->
-    <q-space />
-  </div>
-  <q-table
-    ref="table"
-    flat
-    bordered
-    class="custom-header-table"
-    v-bind="attrs"
-    virtual-scroll
-    :virtual-scroll-sticky-size-start="48"
-    dense
-    :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" v-html="col.label" />
-        </q-th>
-        <q-th auto-width v-if="nornmalData == true" />
-      </q-tr>
-    </template>
-    <template #body="props">
-      <slot v-bind="props" name="columns"></slot>
-    </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>
-</template>
 <script setup lang="ts">
 import { ref, useAttrs } from "vue";
 import type { Pagination } from "@/modules/04_registry/interface/index/Main";
@@ -118,6 +76,46 @@ const resetFilter = () => {
   filterRef.value.focus();
 };
 </script>
+<template>
+  <div class="q-pb-sm row q-col-gutter-sm">
+    <!--  -->
+    <q-space />
+  </div>
+  <d-table
+    ref="table"
+    flat
+    v-bind="attrs"
+    virtual-scroll
+    :virtual-scroll-sticky-size-start="48"
+    dense
+    :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" v-html="col.label" />
+        </q-th>
+        <q-th auto-width v-if="nornmalData == true" />
+      </q-tr>
+    </template>
+    <template #body="props">
+      <slot v-bind="props" name="columns"></slot>
+    </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>
+  </d-table>
+</template>
 <style lang="scss">
 .icon-color {
   color: #4154b3;
diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue
index dbf4d12c3..4a2dc57e1 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue
@@ -128,7 +128,7 @@ const clickDelete = (id: string) => {
     persistent: true,
   })
     .onOk(async () => {
-      await deleteData(id);
+      //   await deleteData(id);
     })
     .onCancel(() => {})
     .onDismiss(() => {});
@@ -139,40 +139,40 @@ function fecthInvestigateDis() {
     {
       subject: "ทุจริตในหน้าที่",
       interrogated: "ศิรินภา คงน้อยี่",
-      fault: "0",
-      penaltyLevel: "0",
-      caseFault: "test",
-      dateInvestigate: "test",
+      fault: "1",
+      penaltyLevel: "7",
+      caseFault: "ทุจริตในหน้าที่",
+      dateInvestigate: "1 ธ.ค. 2565",
       status: "0",
-      active: "1",
+      active: "2",
     },
     {
       subject: "ทุจริตในหน้าที่",
-      interrogated: "นายนครชัย วันดี",
+      interrogated: "ภัทรานุช คงน้อย",
       fault: "1",
-      penaltyLevel: "0",
-      caseFault: "test",
-      dateInvestigate: "test",
+      penaltyLevel: "7",
+      caseFault: "ทุจริตในหน้าที่",
+      dateInvestigate: "30 พ.ย. 2565",
+      status: "0",
+      active: "0",
+    },
+    {
+      subject: "กระทำทุจริตเงินกองทุน",
+      interrogated: "ปรมาพร ศรีมี",
+      fault: "2",
+      penaltyLevel: "1",
+      caseFault: "พบการทุจริต",
+      dateInvestigate: "14 ก.ย. 2565",
       status: "1",
       active: "1",
     },
-    {
-      subject: "กระทำทุจริตเงินกองทุน",
-      interrogated: "นายกัณฐิมา  กาฬสินธ์ุ",
-      fault: "1",
-      penaltyLevel: "0",
-      caseFault: "test",
-      dateInvestigate: "test",
-      status: "0",
-      active: "1",
-    },
     {
       subject: "พูดจาไม่สุภาพ",
-      interrogated: "นายปิยรมย์ ศิริธาราฟ",
+      interrogated: "สมรัก ใจอารีย์",
       fault: "2",
-      penaltyLevel: "0",
-      caseFault: "test",
-      dateInvestigate: "test",
+      penaltyLevel: "1",
+      caseFault: "พูดจาไม่สุภาพกับผู้บังคับบัญชา",
+      dateInvestigate: "11 ส.ค. 2565",
       status: "0",
       active: "1",
     },
@@ -185,18 +185,18 @@ const clickAdd = () => {
 };
 
 const deleteData = async (id: string) => {
-  showLoader();
-  await http
-    .delete(config.API.periodExamId(id))
-    .then((res) => {
-      success($q, "ลบข้อมูลสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      hideLoader();
-    });
+  //   showLoader();
+  //   await http
+  //     .delete(config.API.periodExamId(id))
+  //     .then((res) => {
+  //       success($q, "ลบข้อมูลสำเร็จ");
+  //     })
+  //     .catch((e) => {
+  //       messageError($q, e);
+  //     })
+  //     .finally(async () => {
+  //       hideLoader();
+  //     });
 };
 </script>
 
@@ -246,8 +246,14 @@ const deleteData = async (id: string) => {
             <q-td key="status" :props="props">
               {{ props.row.status }}
             </q-td>
-            <q-td auto-width style="width: 10rem">
-              <q-btn color="primary" class="q-px-xl q-py-xs">ยื่นยันผล</q-btn>
+            <q-td style="font-size: 14px; width: 10rem">
+              <q-btn
+                v-if="props.row.active === 'ยืนยันผล'"
+                color="primary"
+                class="q-px-md q-py-xs"
+                >ยืนยันผล</q-btn
+              >
+              <span v-else>{{ props.row.active }}</span>
             </q-td>
           </q-tr>
         </template>
diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue
index ec5dfc0de..7dfdef1d5 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue
@@ -57,11 +57,9 @@
       </q-select>
     </div>
   </div>
-  <q-table
+  <d-table
     ref="table"
     flat
-    bordered
-    class="custom-header-table"
     v-bind="attrs"
     virtual-scroll
     :virtual-scroll-sticky-size-start="48"
@@ -92,7 +90,7 @@
         direction-links
       ></q-pagination>
     </template>
-  </q-table>
+  </d-table>
 </template>
 <script setup lang="ts">
 import { ref, useAttrs } from "vue";
diff --git a/src/modules/11_discipline/components/4_Order/MainPage.vue b/src/modules/11_discipline/components/4_Order/MainPage.vue
index 1285c2868..5855cdb62 100644
--- a/src/modules/11_discipline/components/4_Order/MainPage.vue
+++ b/src/modules/11_discipline/components/4_Order/MainPage.vue
@@ -8,8 +8,9 @@ import { useOrderStore } from "../../stroes/OrderStore";
 
 const router = useRouter();
 const OrderStore = useOrderStore();
-const { fecthOrder } = OrderStore;
+const { fecthOrder } = OrderStore; // function จาก stores
 
+// ข้อมูล table
 const columns = ref<QTableProps["columns"]>([
   {
     name: "subject",
@@ -74,13 +75,13 @@ const visibleColumns = ref<string[]>([
   "signer",
   "statusorder",
 ]);
-
 const filterTable = ref<string>("");
 
 onMounted(async () => {
   await fecthListOrder();
 });
 
+// เรียกรายการคำสั่ง จาก API
 async function fecthListOrder() {
   const listData = [
     {
@@ -108,9 +109,10 @@ async function fecthListOrder() {
       statusorder: "เสร็จสิ้นแล้ว",
     },
   ];
-  await fecthOrder(listData);
+  await fecthOrder(listData); // ส่งข้อมูลไปยัง stores
 }
 
+// redirect ไปยังการเพิ่มออกคำสั่งลงโทษทางวินัย
 function redirectToPageadd() {
   router.push(`/discipline-order/add`);
 }
diff --git a/src/modules/11_discipline/components/4_Order/OrderPage.vue b/src/modules/11_discipline/components/4_Order/OrderPage.vue
index 3c8cbc24d..d13c0d7cf 100644
--- a/src/modules/11_discipline/components/4_Order/OrderPage.vue
+++ b/src/modules/11_discipline/components/4_Order/OrderPage.vue
@@ -2,6 +2,7 @@
 import { ref } from "vue";
 import { useRouter } from "vue-router";
 
+// import step
 import step01 from "./Step01.vue";
 import step02 from "./Step02.vue";
 import step03 from "./Step03.vue";
@@ -9,11 +10,12 @@ import step03 from "./Step03.vue";
 const router = useRouter();
 
 const step = ref<number>(1);
-
+// nextStep
 const nextStep = async () => {
   localStorage.setItem("currentStep", step.value.toString());
   step.value++;
 };
+// previousStep
 const previousStep = async () => {
   localStorage.setItem("currentStep", step.value.toString());
   step.value--;
diff --git a/src/modules/11_discipline/components/4_Order/Step01.vue b/src/modules/11_discipline/components/4_Order/Step01.vue
index 1a58c31ab..e9d1449cc 100644
--- a/src/modules/11_discipline/components/4_Order/Step01.vue
+++ b/src/modules/11_discipline/components/4_Order/Step01.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import { useQuasar } from "quasar";
+
+import type { DataOption, MyObjectRef } from "../../interface/index/Main";
 // importStroe
 import { useCounterMixin } from "@/stores/mixin";
 
@@ -19,10 +21,74 @@ const props = defineProps({
   },
 });
 const next = () => props.next();
-
-const typeOrder = ref<string>("");
+// Options ต่างๆ
+const orderTypeOptions = ref<DataOption[]>([
+  { id: "0", name: "ประเภทคำสั่ง 1" },
+  { id: "1", name: "ประเภทคำสั่ง 2" },
+  { id: "2", name: "ประเภทคำสั่ง 3" },
+]);
+const orderByOptions = ref<DataOption[]>([
+  { id: "0", name: "คำสั่งโดย 1" },
+  { id: "1", name: "คำสั่งโดย 2" },
+  { id: "2", name: "คำสั่งโดย 3" },
+]);
+const listInvestigationOptions = ref<DataOption[]>([
+  { id: "0", name: "รายการสอบสวนความผิดทางวินัย 1" },
+  { id: "1", name: "รายการสอบสวนความผิดทางวินัย 2" },
+  { id: "2", name: "รายการสอบสวนความผิดทางวินัย 3" },
+]);
+// ตัวแปรทั้งหมด
+const orderType = ref<string>("");
+const orderBy = ref<string>("");
+const listInvestigation = ref<string>("");
+const authority = ref<string>("");
+const orderNumber = ref<string>();
 const dateYear = ref<number>(2023);
 const date = ref<Date | null>(null);
+const authorityPosition = ref<string>("");
+const subject = ref<string>("");
+const mistakeDetail = ref<string>("");
+
+// validateForm
+const orderTypeRef = ref<any>(null);
+const orderByRef = ref<any>(null);
+const listInvestigationRef = ref<any>(null);
+const authorityRef = ref<any>(null);
+const orderNumberRef = ref<any>(null);
+const dateYearRef = ref<any>(null);
+const dateRef = ref<any>(null);
+const authorityPositionRef = ref<any>(null);
+const subjectRef = ref<any>(null);
+const mistakeDetailRef = ref<any>(null);
+const myObjectRef: MyObjectRef = {
+  orderType: orderTypeRef,
+  orderBy: orderByRef,
+  listInvestigation: listInvestigationRef,
+  authority: authorityRef,
+  orderNumber: orderNumberRef,
+  dateYear: dateYearRef,
+  date: dateRef,
+  authorityPosition: authorityPositionRef,
+  subject: subjectRef,
+  mistakeDetail: mistakeDetailRef,
+};
+function validateForm() {
+  const hasError = [];
+  for (const key in myObjectRef) {
+    if (Object.prototype.hasOwnProperty.call(myObjectRef, key)) {
+      const property = myObjectRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    onSubmit();
+  } else {
+    console.log("ไม่ผ่าน ");
+  }
+}
 
 function onSubmit() {
   dialogConfirm(
@@ -37,15 +103,17 @@ function onSubmit() {
 </script>
 
 <template>
-  <q-form @submit.prevent="onSubmit">
+  <form @submit.prevent.stop="validateForm">
     <div class="col-12 row q-pa-lg">
       <div class="col-xs-12 col-sm-12 q-col-gutter-x-lg row q-col-gutter-y-xs">
         <div class="col-xs-12 col-sm-6">
           ประเภทคำสั่ง
           <q-select
+            ref="orderTypeRef"
             dense
             outlined
-            v-model="typeOrder"
+            v-model="orderType"
+            :options="orderTypeOptions"
             option-value="id"
             option-label="name"
             emit-value
@@ -58,9 +126,11 @@ function onSubmit() {
         <div class="col-xs-12 col-sm-6">
           คำสั่งโดย
           <q-select
+            ref="orderByRef"
             dense
             outlined
-            v-model="typeOrder"
+            v-model="orderBy"
+            :options="orderByOptions"
             option-value="id"
             option-label="name"
             emit-value
@@ -73,9 +143,11 @@ function onSubmit() {
         <div class="col-xs-12 col-sm-6">
           เลือกรายการสอบสวนความผิดทางวินัย
           <q-select
+            ref="listInvestigationRef"
             dense
             outlined
-            v-model="typeOrder"
+            v-model="listInvestigation"
+            :options="listInvestigationOptions"
             option-value="id"
             option-label="name"
             emit-value
@@ -90,9 +162,10 @@ function onSubmit() {
         <div class="col-xs-12 col-sm-6">
           ผู้มีอำนาจลงนาม
           <q-input
+            ref="authorityRef"
             dense
             outlined
-            v-model="typeOrder"
+            v-model="authority"
             placeholder="กรอกผู้มีอำนาจลงนาม"
             :rules="[(val) => !!val || `${'กรุณากรอกผู้มีอำนาจลงนาม'}`]"
             lazy-rules
@@ -102,9 +175,10 @@ function onSubmit() {
           <div class="col-6">
             คำสั่งที่
             <q-input
+              ref="orderNumberRef"
               outlined
               dense
-              v-model="typeOrder"
+              v-model="orderNumber"
               hide-bottom-space
               :rules="[(val) => !!val || `${'กรุณากรอรคำสั่งที่'}`]"
               lazy-rules
@@ -129,6 +203,7 @@ function onSubmit() {
               }}</template>
               <template #trigger>
                 <q-input
+                  ref="dateYearRef"
                   :model-value="dateYear + 543"
                   :rules="[(val) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
                   :label="`${'พ.ศ.'}`"
@@ -159,6 +234,7 @@ function onSubmit() {
             </template>
             <template #trigger>
               <q-input
+                ref="dateRef"
                 outlined
                 dense
                 class="full-width datepicker"
@@ -180,9 +256,10 @@ function onSubmit() {
         <div class="col-xs-12 col-sm-6">
           ตำแหน่งผู้มีอำนาจลงนาม
           <q-input
+            ref="authorityPositionRef"
             dense
             outlined
-            v-model="typeOrder"
+            v-model="authorityPosition"
             placeholder="กรอกตำแหน่งผู้มีอำนาจลงนาม"
             :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งผู้มีอำนาจลงนาม'}`]"
             lazy-rules
@@ -191,9 +268,10 @@ function onSubmit() {
         <div class="col-xs-12 col-sm-6">
           คำสั่งเรื่อง
           <q-input
+            ref="subjectRef"
             dense
             outlined
-            v-model="typeOrder"
+            v-model="subject"
             placeholder="กรอกคำสั่งเรื่อง"
             :rules="[(val) => !!val || `${'กรุณากรอกคำสั่งเรื่อง'}`]"
             lazy-rules
@@ -202,9 +280,10 @@ function onSubmit() {
         <div class="col-xs-12 col-sm-12">
           รายละเอียดการกระทำความผิด
           <q-input
+            ref="mistakeDetailRef"
             dense
             outlined
-            v-model="typeOrder"
+            v-model="mistakeDetail"
             placeholder="กรอกรายละเอียดการกระทำความผิด"
             :rules="[(val) => !!val || `${'กรุณากรอกคำสั่งเรื่อง'}`]"
             lazy-rules
@@ -224,7 +303,7 @@ function onSubmit() {
         type="submit"
       />
     </q-card-actions>
-  </q-form>
+  </form>
 </template>
 
 <style scoped></style>
diff --git a/src/modules/11_discipline/components/4_Order/Step02.vue b/src/modules/11_discipline/components/4_Order/Step02.vue
index 8424b5991..a34136ed6 100644
--- a/src/modules/11_discipline/components/4_Order/Step02.vue
+++ b/src/modules/11_discipline/components/4_Order/Step02.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { ref } from "vue";
 const props = defineProps({
   next: {
     type: Function,
@@ -11,10 +12,79 @@ const props = defineProps({
 });
 const next = () => props.next();
 const previous = () => props.previous();
+
+const name = ref<string>("");
+const lastname = ref<string>("");
+const age = ref<string>("");
+
+const nameRef = ref<any>(null);
+const ageRef = ref<any>(null);
+const lastnameRef = ref<any>(null);
+const myObject: MyObject = {
+  name: nameRef,
+  lastname: lastnameRef,
+  age: ageRef,
+};
+interface MyObject {
+  name: any;
+  lastname: any;
+  age: any;
+  [key: string]: any;
+}
+
+function onSubmit() {
+  const hasError = [];
+  for (const key in myObject) {
+    if (Object.prototype.hasOwnProperty.call(myObject, key)) {
+      const property = myObject[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    console.log("ผ่าน  สำเร็จ!");
+  } else {
+    console.log("ไม่ผ่าน ");
+  }
+}
 </script>
 
 <template>
   <div><h1>step02</h1></div>
+  <form @submit.prevent.stop="onSubmit" class="q-gutter-md">
+    <q-input
+      ref="nameRef"
+      filled
+      v-model="name"
+      label="Your name *"
+      hint="Name and surname"
+      lazy-rules
+      :rules="[(val) => !!val || `${'Name and surname'}`]"
+    />
+    <q-input
+      ref="lastnameRef"
+      filled
+      v-model="lastname"
+      label="lastname *"
+      lazy-rules
+      :rules="[(val) => !!val || `${'lastname'}`]"
+    />
+    <q-input
+      ref="ageRef"
+      filled
+      type="number"
+      v-model="age"
+      label="Your age *"
+      lazy-rules
+      :rules="[(val) => !!val || `${'Your age'}`]"
+    />
+
+    <div>
+      <q-btn label="Submit" type="submit" color="primary" />
+    </div>
+  </form>
   <q-card-actions align="right">
     <q-btn
       dense
diff --git a/src/modules/11_discipline/components/5_Report/reportDetail.vue b/src/modules/11_discipline/components/5_Report/DetailPage.vue
similarity index 83%
rename from src/modules/11_discipline/components/5_Report/reportDetail.vue
rename to src/modules/11_discipline/components/5_Report/DetailPage.vue
index 4f36355c0..54b333f26 100644
--- a/src/modules/11_discipline/components/5_Report/reportDetail.vue
+++ b/src/modules/11_discipline/components/5_Report/DetailPage.vue
@@ -4,52 +4,31 @@ import { VuePDF, usePDF } from "@tato30/vue-pdf";
 import { useCounterMixin } from "@/stores/mixin";
 import { useRoute } from "vue-router";
 import { useQuasar } from "quasar";
-
+import type { DataOption } from "@/modules/11_discipline/interface/index/Main";
 import { useReportDataStore } from "@/modules/11_discipline/stroes/ReportStore";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
-const date = ref<Date | null>(null);
-const dateEnd = ref<Date | null>(null);
+const date = ref<Date>();
+const dateEnd = ref<Date>();
 const route = useRoute();
 const typeReport = route.params.type.toString();
 const store = useReportDataStore();
 const mixin = useCounterMixin();
 const { messageError, showLoader, hideLoader, date2Thai } = mixin;
-const { optionReport } = store;
+const { filterFnOptionsType } = store;
 const $q = useQuasar();
 const ocSelect = ref<string>("");
-const ocSelectOp = ref<any>();
-const ocSelectOps = ref<any>([
-  { id: "001", value: "กทม" },
-  { id: "002", value: "กรุงเทพ" },
-]);
 const government = ref<string>("");
-const governmentOp = ref<any>();
-const governmentOps = ref<any>([
-  { id: "001", value: "กทม" },
-  { id: "002", value: "กรุงเทพ" },
-  { id: "003", value: "bankok" },
-]);
-const fault = ref<any>();
-const faultOp = ref<any>();
-const faultOps = ref<any>([
-  { id: "001", value: "ยังไม่ระบุ" },
-  { id: "002", value: "ไม่ร้ายเเรง" },
-  { id: "003", value: "ร้ายเเรง" },
-]);
+const fault = ref<string>();
 const pdfSrc = ref<any>();
 const numOfPages = ref<number>(0);
 const page = ref<number>(1);
 const titleReport = ref<string>("");
-interface OptionReport {
-  id: string;
-  title: string;
-}
 
 onMounted(async () => {
-  let report = optionReport.find((e: OptionReport) => e.id == typeReport);
-  report && (titleReport.value = report.title);
+  let report = store.optionReport.find((e: DataOption) => e.id == typeReport);
+  report && (titleReport.value = report.name);
 });
 
 const splitterModel = ref(14);
@@ -75,25 +54,6 @@ const backPage = () => {
     page.value--;
   }
 };
-
-function filterFnOptionsType(val: string, update: any, type: string) {
-  update(() => {
-    const needle = val.toLowerCase();
-    if (type === "ocSelectOp") {
-      ocSelectOp.value = ocSelectOps.value.filter(
-        (v: any) => v.value.toLowerCase().indexOf(needle) > -1
-      );
-    } else if (type === "governmentOp") {
-      governmentOp.value = governmentOps.value.filter(
-        (v: any) => v.value.toLowerCase().indexOf(needle) > -1
-      );
-    } else if (type === "faultOp") {
-      faultOp.value = faultOps.value.filter(
-        (v: any) => v.value.toLowerCase().indexOf(needle) > -1
-      );
-    }
-  });
-}
 </script>
 <template>
   <div class="toptitle">
@@ -133,7 +93,7 @@ function filterFnOptionsType(val: string, update: any, type: string) {
                   dense
                   lazy-rules
                   borderless
-                  :model-value="date !== null ? date2Thai(date) : null"
+                  :model-value="date ? date2Thai(date) : null"
                   :label="`${'ตั้งเเต่วันที่'}`"
                 >
                   <template v-slot:prepend>
@@ -164,7 +124,7 @@ function filterFnOptionsType(val: string, update: any, type: string) {
                   dense
                   lazy-rules
                   borderless
-                  :model-value="dateEnd !== null ? date2Thai(dateEnd) : null"
+                  :model-value="dateEnd ? date2Thai(dateEnd) : null"
                   :label="`${'ถึงวันที่'}`"
                 >
                   <template v-slot:prepend>
@@ -194,11 +154,11 @@ function filterFnOptionsType(val: string, update: any, type: string) {
               outlined
               dense
               v-model="ocSelect"
-              :options="ocSelectOp"
+              :options="store.ocSelectOp"
               label="เลือกหน่วยงาน/สำนักงานเขต"
               emit-value
               map-options
-              option-label="value"
+              option-label="name"
               option-value="id"
               use-input
               @filter="(inputValue: any,
@@ -219,11 +179,11 @@ function filterFnOptionsType(val: string, update: any, type: string) {
               outlined
               dense
               v-model="government"
-              :options="governmentOp"
+              :options="store.governmentOp"
               label="เลือกหน่วยงาน/สำนักงานเขต"
               emit-value
               map-options
-              option-label="value"
+              option-label="name"
               option-value="id"
               use-input
               @filter="(inputValue: any,
@@ -240,15 +200,15 @@ function filterFnOptionsType(val: string, update: any, type: string) {
           </div>
           <div v-if="typeReport > '2'" class="q-pl-xs">
             <q-select
-            class="bg-white"
+              class="bg-white"
               outlined
               dense
               v-model="fault"
-              :options="faultOp"
+              :options="store.faultOp"
               label="เลือกลักษณะความผิด"
               emit-value
               map-options
-              option-label="value"
+              option-label="name"
               option-value="id"
               use-input
               @filter="(inputValue: any,
diff --git a/src/modules/11_discipline/components/6_BasicInformation/Channel/addChannel.vue b/src/modules/11_discipline/components/6_BasicInformation/Channel/AddPage.vue
similarity index 100%
rename from src/modules/11_discipline/components/6_BasicInformation/Channel/addChannel.vue
rename to src/modules/11_discipline/components/6_BasicInformation/Channel/AddPage.vue
diff --git a/src/modules/11_discipline/components/6_BasicInformation/Channel/MainPage.vue b/src/modules/11_discipline/components/6_BasicInformation/Channel/MainPage.vue
index 22e83bc1f..6b2a50487 100644
--- a/src/modules/11_discipline/components/6_BasicInformation/Channel/MainPage.vue
+++ b/src/modules/11_discipline/components/6_BasicInformation/Channel/MainPage.vue
@@ -93,20 +93,15 @@ const clickAdd = () => {
 };
 
 const clickDelete = (id: string) => {
-  $q.dialog({
-    title: "ยืนยันการลบช่องทาง",
-    message: "ต้องการลบช่องทางนี้ใช่หรือไม่?",
-    cancel: {
-      flat: true,
-      color: "negative",
+  dialogRemove(
+    $q,
+    async () => {
+      //   await deleteData(id);
+      //   await getData();
     },
-    persistent: true,
-  })
-    .onOk(async () => {
-      console.log("delete");
-    })
-    .onCancel(() => {})
-    .onDismiss(() => {});
+    `ลบข้อมูล`
+    // `ลบข้อมูลของ ${name}`
+  );
 };
 
 onMounted(() => {});
@@ -170,18 +165,11 @@ onMounted(() => {});
         />
       </div>
       <div class="col-12">
-        <q-table
-          ref="table"
+        <d-table
           :columns="columns"
           :rows="rows"
+          row-key="id"
           :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"
@@ -229,7 +217,7 @@ onMounted(() => {});
               direction-links
             ></q-pagination>
           </template>
-        </q-table>
+        </d-table>
       </div>
     </div>
   </q-card>
diff --git a/src/modules/11_discipline/components/ุ6_Information/Channel/AddPage.vue b/src/modules/11_discipline/components/ุ6_Information/Channel/AddPage.vue
new file mode 100644
index 000000000..0a6c0eccb
--- /dev/null
+++ b/src/modules/11_discipline/components/ุ6_Information/Channel/AddPage.vue
@@ -0,0 +1,214 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useQuasar, QForm } from "quasar";
+import { useRouter, useRoute } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import type { QTableProps } from "quasar";
+
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  dateToISO,
+  messageError,
+  showLoader,
+  hideLoader,
+  dialogConfirm,
+  success,
+  dialogMessageNotify,
+} = mixin;
+const router = useRouter();
+const route = useRoute();
+const myForm = ref<QForm | null>(null); //form data input
+const edit = ref<boolean>(false);
+const channel = ref<string>("");
+
+onMounted(async () => {
+  //   if (route.params.id) {
+  //     // มี params id ให้ เรียกข้อมูลของรอบการเสนอขอ
+  //     await fetchData();
+  //   }
+});
+// เรียกข้อมูลของรอบการเสนอขอ
+const fetchData = async () => {
+  //   edit.value = true;
+  //   showLoader();
+  //   await http
+  //     .get(config.API.getRoundInsignia(id.value))
+  //     .then((res) => {
+  //       const data = res.data.result;
+  //       id.value = data.period_id;
+  //       roundInsig.value =
+  //         options.value.filter((r: any) => r.value == data.period_round).length >
+  //         0
+  //           ? options.value.filter((r: any) => r.value == data.period_round)[0]
+  //           : null;
+  //       yearly.value = data.period_year;
+  //       datelast.value = data.period_amount;
+  //       dateStart.value = new Date(data.period_start);
+  //       dateEnd.value = new Date(data.period_end);
+  //       files.value = data.period_doc;
+  //     })
+  //     .catch((e) => {
+  //       messageError($q, e);
+  //     })
+  //     .finally(() => {
+  //       hideLoader();
+  //     });
+};
+
+const deleteData = async (id: string) => {
+  //   showLoader();
+  //   await http
+  //     .delete(config.API.periodExamId(id))
+  //     .then((res) => {
+  //       success($q, "ลบข้อมูลสำเร็จ");
+  //     })
+  //     .catch((e) => {
+  //       messageError($q, e);
+  //     })
+  //     .finally(async () => {
+  //       hideLoader();
+  //     });
+};
+
+// แก้ไขข้อมูล
+
+// คลิกบันทึก
+const checkSave = () => {
+  //   if (myForm.value !== null) {
+  //     myForm.value.validate().then(async (success) => {
+  //       if (success) {
+  //         dialogConfirm($q, () => SaveData());
+  //       } else if (Number(datelast.value) !== 0) {
+  //         dialogMessageNotify($q, "กรุณาเลือกรอบการเสนอขอพระราชทานเครื่องราชฯ");
+  //       }
+  //     });
+  //   }
+};
+// บันทึกข้อมูล
+const SaveData = async () => {
+  //   if (edit.value) {
+  //     await editData(id.value);
+  //   } else {
+  //     await addData();
+  //     clickBack();
+  //   }
+};
+// เพิ่มข้อมูลรอบการเสนอขอพระราชทานเครื่องราชฯ
+const addData = async () => {
+  //   const formData = new FormData();
+  //   const name = `รอบการเสนอขอพระราชทานเครื่องราชรอบที่ ${
+  //     roundInsig.value.value
+  //   }  ปี ${yearly.value + 543} `;
+  //   formData.append("name", name);
+  //   formData.append("year", yearly.value.toString());
+  //   formData.append("amount", datelast.value.toString());
+  //   formData.append("round", roundInsig.value.value);
+  //   if (dateStart.value !== null) {
+  //     formData.append("startDate", dateToISO(dateStart.value));
+  //   }
+  //   if (dateEnd.value !== null) {
+  //     formData.append("endDate", dateToISO(dateEnd.value));
+  //   }
+  //   formData.append("file", files.value);
+  //   showLoader();
+  //   await http
+  //     .post(config.API.listRoundInsignia(), formData)
+  //     .then(() => {
+  //       success($q, "บันทึกข้อมูลสำเร็จ");
+  //     })
+  //     .catch((e) => {
+  //       messageError($q, e);
+  //     })
+  //     .finally(async () => {
+  //       hideLoader();
+  //     });
+};
+// แก้ไขข้อมูล
+const editData = async (id: string) => {
+  //   const formData = new FormData();
+  //   const name = `รอบการเสนอขอพระราชทานเครื่องราชรอบที่ ${
+  //     roundInsig.value.value
+  //   } ปี ${yearly.value + 543}`;
+  //   formData.append("name", name);
+  //   formData.append("year", yearly.value.toString());
+  //   formData.append("amount", datelast.value.toString());
+  //   formData.append("round", roundInsig.value.value);
+  //   if (dateStart.value !== null) {
+  //     formData.append("startDate", dateToISO(dateStart.value));
+  //   }
+  //   if (dateEnd.value !== null) {
+  //     formData.append("endDate", dateToISO(dateEnd.value));
+  //   }
+  //   formData.append("file", files.value);
+  //   showLoader();
+  //   await http
+  //     .put(config.API.editRoundInsignia(id), formData)
+  //     .then(() => {
+  //       success($q, "แก้ไขข้อมูลสำเร็จ");
+  //     })
+  //     .catch((e) => {
+  //       messageError($q, e);
+  //     })
+  //     .finally(async () => {
+  //       hideLoader();
+  //       clickBack();
+  //     });
+};
+
+const clickBack = () => {
+  router.push(`/discipline/channel`);
+};
+</script>
+<template>
+  <div class="col-xs-12 col-sm-12 col-md-11">
+    <div class="toptitle col-12 row items-center">
+      <q-btn
+        icon="mdi-arrow-left"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="clickBack"
+      />
+      {{ edit ? "ช่องทางการร้องเรียน" : "เพิ่มช่องทางการร้องเรียน" }}
+    </div>
+    <q-form ref="myForm">
+      <div class="col-12">
+        <q-card bordered>
+          <div class="col-12 row q-col-gutter-md q-pa-md">
+            <div class="col-xs-12 col-sm-12 row">
+              <q-separator />
+              <div class="col-12 row q-pa-sm q-col-gutter-sm">
+                <q-input
+                  class="col-12"
+                  dense
+                  outlined
+                  v-model="channel"
+                  label="กรอกชื่อช่องทาง"
+                  :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อช่องทาง'}`]"
+                />
+              </div>
+            </div>
+          </div>
+          <q-separator />
+          <q-separator />
+          <div class="row col-12 q-pa-sm">
+            <q-space />
+            <q-btn
+              flat
+              round
+              color="public"
+              @click="checkSave"
+              icon="mdi-content-save-outline"
+            >
+              <q-tooltip>{{ edit ? "แก้ไขข้อมูล" : "บันทึกข้อมูล" }}</q-tooltip>
+            </q-btn>
+          </div>
+        </q-card>
+      </div>
+    </q-form>
+  </div>
+</template>
diff --git a/src/modules/11_discipline/interface/index/Main.ts b/src/modules/11_discipline/interface/index/Main.ts
index 1a6136942..d61ea9435 100644
--- a/src/modules/11_discipline/interface/index/Main.ts
+++ b/src/modules/11_discipline/interface/index/Main.ts
@@ -1,7 +1,68 @@
 interface DataOption {
-    id: string;
-    name: string;
+  id: string;
+  name: string;
 }
+interface investigatefactsDataRowType {
+  subject: string;
+  interrogated: string;
+  fault: string;
+  status: string;
+  active: string;
+}
+interface MyObjectRef {
+  orderType: any;
+  orderBy: any;
+  listInvestigation: any;
+  authority: any;
+  orderNumber: any;
+  dateYear: any;
+  date: any;
+  authorityPosition: any;
+  subject: any;
+  mistakeDetail: any;
+  [key: string]: any;
+}
+interface MyObjectComplaintsRef {
+  complainantType: any;
+  complainant: any;
+  office: any;
+  agency: any;
+  topicComplaint: any;
+  datereceive: any;
+  dateconsideration: any;
+  offenseDescription: any;
+  considerationLevel: any;
+  datewarn: any;
+  receivecomplaints: any;
+  petitioner: any;
+  files: any;
+  [key: string]: any;
+}
+
+interface investigateDisDataRowType {
+  subject: string;
+  interrogated: string;
+  fault: string;
+  penaltyLevel: string;
+  caseFault: string;
+  dateInvestigate: string;
+  status: string;
+  active: string;
+}
+
+interface directorType {
+  nameDirector: string;
+  position: string;
+  duty: string;
+  email: string;
+  telephone: string;
+}
+
 export type {
-    DataOption
+  DataOption,
+  investigatefactsDataRowType,
+  MyObjectRef,
+  MyObjectComplaintsRef,
+  investigateDisDataRowType,
+  directorType,
 };
diff --git a/src/modules/11_discipline/router.ts b/src/modules/11_discipline/router.ts
index 8744c5a70..b6335fe1e 100644
--- a/src/modules/11_discipline/router.ts
+++ b/src/modules/11_discipline/router.ts
@@ -3,9 +3,7 @@ const complaintMain = () =>
 const factsMain = () =>
   import("@/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue");
 const investigatefactsAdd = () =>
-  import(
-    "@/modules/11_discipline/components/2_InvestigateFacts/investigatefactsAdd.vue"
-  );
+  import("@/modules/11_discipline/components/2_InvestigateFacts/AddPage.vue");
 const disciplinaryMain = () =>
   import(
     "@/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue"
@@ -32,16 +30,16 @@ const channelMain = () =>
   );
 const channelAdd = () =>
   import(
-    "@/modules/11_discipline/components/6_BasicInformation/Channel/addChannel.vue"
+    "@/modules/11_discipline/components/6_BasicInformation/Channel/AddPage.vue"
   );
 const complaintAdd = () =>
   import("@/modules/11_discipline/components/1_Complaint/AddComplaintPage.vue");
 const reportType = () =>
-  import("@/modules/11_discipline/components/5_Report/reportDetail.vue");
+  import("@/modules/11_discipline/components/5_Report/DetailPage.vue");
 
 const InvestigateDisciplinaryAdd = () =>
   import(
-    "@/modules/11_discipline/components/3_InvestigateDisciplinary/addInvestigate.vue"
+    "@/modules/11_discipline/components/3_InvestigateDisciplinary/AddPage.vue"
   );
 const orderPage = () =>
   import("@/modules/11_discipline/components/4_Order/OrderPage.vue");
diff --git a/src/modules/11_discipline/stroes/ComplaintsStore.ts b/src/modules/11_discipline/stroes/ComplaintsStore.ts
index 26963a4a7..5c4520b65 100644
--- a/src/modules/11_discipline/stroes/ComplaintsStore.ts
+++ b/src/modules/11_discipline/stroes/ComplaintsStore.ts
@@ -5,7 +5,7 @@ import type { DataOption } from "../interface/index/Main";
 
 export const useComplainstDataStore = defineStore("DisciplineComplainst", () => {
     const rows = ref<any>([])
-    const optionListName = ref<any>([{}])
+
 
 
     function fectComplainst(data: any) {
@@ -21,49 +21,39 @@ export const useComplainstDataStore = defineStore("DisciplineComplainst", () =>
         rows.value = datalist
     }
 
-    function selectComplainantTpye(list: any) {
-        optionListName.value = list
-    }
+
 
     const complainantoptionsMain = ref<DataOption[]>()
     const complainantoptions = ref<DataOption[]>()
     const agencytoptionsMain = ref<DataOption[]>()
     const agencytoptions = ref<DataOption[]>()
+    const optionListNameMain = ref<DataOption[]>([])
+    const optionListName = ref<DataOption[]>([])
     function fectOptioin(complainantoptions: any, agencytoptions: any) {
         complainantoptionsMain.value = complainantoptions
         agencytoptionsMain.value = agencytoptions
-
+    }
+    function selectComplainantTpye(list: any) {
+        optionListNameMain.value = list
+        optionListName.value = list
     }
     function filterSelector(val: any, update: Function, type: string) {
-        console.log(val, type);
-        let data: DataOption[] | undefined = undefined;
-        let filter: DataOption[] | undefined = undefined;
-        if (type == "filtercomplainantType") {
-            data = complainantoptionsMain.value
-        } else if (type == "filteragencytoptions") {
-            data = agencytoptionsMain.value
-        }
-        if (val == "") {
-            update(() => {
-                filter = data;
-            });
-        } else {
-            update(() => {
-                if (data) {
-                    filter = data.filter(
-                        (e) => e.name.search(val) !== -1
-                    );
-                }
-            });
-        }
-        if (filter) {
-            if (type == "filtercomplainantType") {
-                complainantoptions.value = filter
-            } else if (type = "filteragencytoptions") {
-                agencytoptions.value = filter
+        update(() => {
+            if (type === "filtercomplainantType" && complainantoptionsMain.value) {
+                complainantoptions.value = complainantoptionsMain.value.filter(
+                    (e) => e.name.search(val) !== -1
+                );
+            } else if (type === "filteragencytoptions" && agencytoptionsMain.value) {
+                agencytoptions.value = agencytoptionsMain.value.filter(
+                    (e) => e.name.search(val) !== -1
+                );
+            } else if (type === "filtercomplainantOP" && optionListNameMain.value) {
+                optionListName.value = optionListNameMain.value.filter(
+                    (e) => e.name.search(val) !== -1
+                );
             }
-        }
 
+        })
     }
     return {
         rows,
diff --git a/src/modules/11_discipline/stroes/InvestigateDisStore.ts b/src/modules/11_discipline/stroes/InvestigateDisStore.ts
index 10483bbf2..083401b83 100644
--- a/src/modules/11_discipline/stroes/InvestigateDisStore.ts
+++ b/src/modules/11_discipline/stroes/InvestigateDisStore.ts
@@ -1,69 +1,109 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
+import type {
+  investigateDisDataRowType,
+  DataOption,
+  directorType,
+} from "@/modules/11_discipline/interface/index/Main";
 
-export const useInvestigateDisStore = defineStore("DisciplineInvestigateDis", () => {
-  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),
-      penaltyLevel: convertPenaltyLevel(e.penaltyLevel),
-      caseFault: e.caseFault,
-      dateInvestigate: e.dateInvestigate,
-      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 "ความผิดวินัยร้ายแรง";
+export const useInvestigateDisStore = defineStore(
+  "DisciplineInvestigateDis",
+  () => {
+    const rows = ref<investigateDisDataRowType[]>([]);
+    const rows2 = ref<directorType[]>([]);
+    const selected = ref<directorType[]>([]);
+    const optionsTypefault = ref<DataOption[]>([
+      { id: "0", name: "ไม่ระบุ" },
+      { id: "1", name: "ร้ายแรง" },
+      { id: "2", name: "ไม่ร้ายแรง" },
+    ]);
+    const optionsfaultLevel = ref<DataOption[]>([
+      { id: "0", name: "ไม่ร้ายแรง" },
+      { id: "1", name: "ภาคทัณฑ์" },
+      { id: "2", name: "ตัดเงินเดือน" },
+      { id: "3", name: "ลดขั้นเงินเดือน" },
+      { id: "4", name: "ร้ายแรง" },
+      { id: "5", name: "ปลดออก" },
+      { id: "6", name: "ไล่ออก" },
+    ]);
+    async function fecthList(data: investigateDisDataRowType[]) {
+      let datalist: any[] = data.map((e: any) => ({
+        subject: e.subject,
+        interrogated: e.interrogated,
+        fault: convertFault(e.fault),
+        penaltyLevel: convertPenaltyLevel(e.penaltyLevel),
+        caseFault: e.caseFault,
+        dateInvestigate: e.dateInvestigate,
+        status: convertSatatus(e.status),
+        active: activeStatus(e.active),
+      }));
+      rows.value = datalist;
     }
-  }
-  function convertSatatus(val: string) {
-    switch (val) {
-      case "0":
-        return "เสร็จสิ้นแล้ว";
-      case "1":
-        return "ยุติเรื่อง";
+    async function fecthDirector(data: directorType[]) {
+      let datalistDirector: any[] = data.map((e: any) => ({
+        nameDirector: e.nameDirector,
+        position: e.position,
+        duty: e.duty,
+        email: e.email,
+        telephone: e.telephone,
+      }));
+      rows2.value = datalistDirector;
+      selected.value = rows2.value;
+      console.log(rows2.value);
     }
-  }
-  function activeStatus(val: string) {
-    switch (val) {
-      case "0":
-        return "ยังไม่ได้ยืนยันผล";
-      case "1":
-        return "ยืนยันผลเเล้ว";
+    function convertFault(val: string) {
+      switch (val) {
+        case "0":
+          return "ความผิดวินัยยังไม่ระบุ";
+        case "1":
+          return "ความผิดวินัยไม่ร้ายแรง";
+        case "2":
+          return "ความผิดวินัยร้ายแรง";
+      }
     }
-  }
-  function convertPenaltyLevel(val: string) {
-    switch (val) {
-      case "0":
-        return "ไม่ร้ายแรง";
-      case "1":
-        return "ภาคทัณฑ์";
-      case "3":
-        return "ตัดเงินเดือน";
-      case "4":
-        return "ลดขั้นเงินเดือน";
-      case "5":
-        return "ร้ายแรง";
-      case "6":
-        return "ปลดออก";
-      case "7":
-        return "ไล่ออก";
+    function convertSatatus(val: string) {
+      switch (val) {
+        case "0":
+          return "เสร็จสิ้นแล้ว";
+        case "1":
+          return "ยุติเรื่อง";
+      }
     }
+    function activeStatus(val: string) {
+      switch (val) {
+        case "0":
+          return "กำลังยืนยันผล";
+        case "1":
+          return "ยืนยันผลเเล้ว";
+        case "2":
+          return "ยืนยันผล";
+      }
+    }
+    function convertPenaltyLevel(val: string) {
+      switch (val) {
+        case "0":
+          return "ไม่ร้ายแรง";
+        case "1":
+          return "ภาคทัณฑ์";
+        case "3":
+          return "ตัดเงินเดือน";
+        case "4":
+          return "ลดขั้นเงินเดือน";
+        case "5":
+          return "ร้ายแรง";
+        case "6":
+          return "ปลดออก";
+        case "7":
+          return "ไล่ออก";
+      }
+    }
+    return {
+      fecthList,
+      rows,
+      rows2,
+      optionsTypefault,
+      optionsfaultLevel,
+      fecthDirector,
+    };
   }
-  return {
-    fecthList,
-    rows,
-  };
-});
+);
diff --git a/src/modules/11_discipline/stroes/InvestigateFactStore.ts b/src/modules/11_discipline/stroes/InvestigateFactStore.ts
index 06ef20a77..99c039f89 100644
--- a/src/modules/11_discipline/stroes/InvestigateFactStore.ts
+++ b/src/modules/11_discipline/stroes/InvestigateFactStore.ts
@@ -1,41 +1,74 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
+import type { investigatefactsDataRowType, DataOption } from '@/modules/11_discipline/interface/index/Main'
 
 export const useInvestigateFactStore = defineStore("DisciplineInvestigateFact", () => {
-    const rows = ref<any>([])
+    const rows = ref<investigatefactsDataRowType[]>([])
+    const faultOp = ref<DataOption[]>();
+    const daysExtendOp = ref<DataOption[]>();
+    const investigationOp = ref<DataOption[]>();
+    const daysExtendOps = ref<DataOption[]>([
+        { id: "000", name: "15 วัน" },
+        { id: "001", name: "30 วัน" },
+        { id: "002", name: "45 วัน" },
+        { id: "003", name: "60 วัน" },
+    ]);
+    const investigationOps = ref<DataOption[]>([
+        { id: "001", name: "เเต่งตั้งการสืบสวน" },
+        { id: "002", name: "สืบสวนทางลับ" },
+        { id: "003", name: "อื่นๆ" },
+    ]);
+    const faultOps = ref<DataOption[]>([
+        { id: "001", name: "ยังไม่ระบุ" },
+        { id: "002", name: "ไม่ร้ายเเรง" },
+        { id: "003", name: "ร้ายเเรง" },
+    ]);
+    function filterFnOptionsType(val: string, update: any, type: string) {
+        update(() => {
+            const needle = val.toLowerCase();
 
-    async function fecthList(data: any) {
-        let datalist = data.map((e: any) => ({
+            if (type === "faultOp") {
+                faultOp.value = faultOps.value.filter(
+                    (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+                );
+
+            } else if (type === "investigationOp") {
+                investigationOp.value = investigationOps.value.filter(
+                    (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+                );
+            } else if (type === "daysExtendOp") {
+                daysExtendOp.value = daysExtendOps.value.filter(
+                    (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+                );
+            }
+
+        });
+    }
+    async function fecthList(data: investigatefactsDataRowType[]) {
+        let datalist: investigatefactsDataRowType[] = data.map((e: any) => ({
             subject: e.subject,
             interrogated: e.interrogated,
-            fault: convertFault(e.fault),
-            status: convertSatatus(e.status),
-            active: activeStatus(e.active)
-            
+            fault: e.fault ?? convertFault(e.fault),
+            status: e.status ?? convertSatatus(e.status),
+            active: e.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":
+            case "1":
                 return "ความผิดวินัยร้ายแรง"
         }
     }
     function convertSatatus(val: string) {
         switch (val) {
             case "0":
-                return "ยังไม่ระบุ"
-            case "1":
-                return "ร้ายแรง"
-            case "2":
-                return "ไม่ร้ายแรง"
-            case "3":
                 return "ยุติเรื่อง"
+            case "1":
+                return "เสร็จสิ้นเเล้ว"
         }
     }
     function activeStatus(val: string) {
@@ -49,5 +82,12 @@ export const useInvestigateFactStore = defineStore("DisciplineInvestigateFact",
     return {
         fecthList,
         rows,
+        daysExtendOps,
+        investigationOps,
+        faultOps,
+        filterFnOptionsType,
+        faultOp,
+        daysExtendOp,
+        investigationOp,
     };
 })
\ No newline at end of file
diff --git a/src/modules/11_discipline/stroes/ReportStore.ts b/src/modules/11_discipline/stroes/ReportStore.ts
index 3d003a224..201ce5b4c 100644
--- a/src/modules/11_discipline/stroes/ReportStore.ts
+++ b/src/modules/11_discipline/stroes/ReportStore.ts
@@ -1,24 +1,62 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
-
+import type { DataOption } from '@/modules/11_discipline/interface/index/Main'
 export const useReportDataStore = defineStore("DisciplineReport11", () => {
-  interface OptionReport {
-    id: string;
-    title: string;
-  }
-  const optionReport = ref<OptionReport[]>([
-    { id: "1", title: "รายงานเรื่องร้องเรียนแยกรายวัน รายเดือน รายปี" },
-    { id: "2", title: "รายงานเรื่องร้องเรียนข้าราชการสามัญฯ ในสังกัดกรุงเทพมหานคร แยกตามหน่วยงาน" },
-    { id: "3", title: "รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัย แยกตามลักษณะความผิด" },
-    { id: "4", title: "รายงานรายชื่อข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแยกตามลักษณะความผิด" },
-    { id: "5", title: "รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดแยกตามระดับความผิด" },
-    { id: "6", title: "รายงานรายชื่อข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแยกตามลักษณะความผิด" },
-    { id: "7", title: "รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแต่ยุติเรื่อง แยกลักษณะความผิด" },
-    { id: "8", title: "รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแต่ยุติเรื่อง แยกตามตำแหน่ง" },
+
+  const faultOp = ref<DataOption[]>();
+  const ocSelectOp = ref<DataOption[]>();
+  const governmentOp = ref<DataOption[]>();
+  const faultOps = ref<DataOption[]>([
+    { id: "001", name: "ยังไม่ระบุ" },
+    { id: "002", name: "ไม่ร้ายเเรง" },
+    { id: "003", name: "ร้ายเเรง" },
+  ]);
+  const ocSelectOps = ref<DataOption[]>([
+    { id: "001", name: "กทม" },
+    { id: "002", name: "กรุงเทพ" },
+  ]);
+  const governmentOps = ref<DataOption[]>([
+    { id: "001", name: "กทม" },
+    { id: "002", name: "กรุงเทพ" },
+    { id: "003", name: "bankok" },
+  ]);
+  const optionReport = ref<DataOption[]>([
+    { id: "1", name: "รายงานเรื่องร้องเรียนแยกรายวัน รายเดือน รายปี" },
+    { id: "2", name: "รายงานเรื่องร้องเรียนข้าราชการสามัญฯ ในสังกัดกรุงเทพมหานคร แยกตามหน่วยงาน" },
+    { id: "3", name: "รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัย แยกตามลักษณะความผิด" },
+    { id: "4", name: "รายงานรายชื่อข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแยกตามลักษณะความผิด" },
+    { id: "5", name: "รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดแยกตามระดับความผิด" },
+    { id: "6", name: "รายงานรายชื่อข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแยกตามลักษณะความผิด" },
+    { id: "7", name: "รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแต่ยุติเรื่อง แยกลักษณะความผิด" },
+    { id: "8", name: "รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแต่ยุติเรื่อง แยกตามตำแหน่ง" },
   ]);
 
-
+  function filterFnOptionsType(val: string, update: any, type: string) {
+    update(() => {
+      const needle = val.toLowerCase();
+      if (type === "ocSelectOp") {
+        ocSelectOp.value = ocSelectOps.value.filter(
+          (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+        );
+      } else if (type === "governmentOp") {
+        governmentOp.value = governmentOps.value.filter(
+          (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+        );
+      } else if (type === "faultOp") {
+        faultOp.value = faultOps.value.filter(
+          (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+        );
+      }
+    });
+  }
   return {
     optionReport,
+    filterFnOptionsType,
+    faultOp,
+    ocSelectOp,
+    governmentOp,
+    faultOps,
+    ocSelectOps,
+    governmentOps,
   };
 });