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..0e46075d4 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,15 @@ 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 +70,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 +94,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 +162,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 +201,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 +227,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/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/interface/index/Main.ts b/src/modules/11_discipline/interface/index/Main.ts
index 1a6136942..2a943c3e2 100644
--- a/src/modules/11_discipline/interface/index/Main.ts
+++ b/src/modules/11_discipline/interface/index/Main.ts
@@ -2,6 +2,15 @@ interface DataOption {
     id: string;
     name: string;
 }
+interface investigatefactsDataRowType {
+subject: string;
+interrogated: string;
+fault: string;
+status: string;
+active: string;
+}
+
 export type {
-    DataOption
+    DataOption,
+    investigatefactsDataRowType
 };
diff --git a/src/modules/11_discipline/router.ts b/src/modules/11_discipline/router.ts
index 3d4ce56dd..d81c6be67 100644
--- a/src/modules/11_discipline/router.ts
+++ b/src/modules/11_discipline/router.ts
@@ -4,7 +4,7 @@ const factsMain = () =>
   import("@/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue");
 const investigatefactsAdd = () =>
   import(
-    "@/modules/11_discipline/components/2_InvestigateFacts/investigatefactsAdd.vue"
+    "@/modules/11_discipline/components/2_InvestigateFacts/AddPage.vue"
   );
 const disciplinaryMain = () =>
   import(
@@ -29,7 +29,7 @@ const channelAdd = () =>
 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(
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,
   };
 });