diff --git a/src/modules/08_registryEmployee/components/AddEmployee/Main.vue b/src/modules/08_registryEmployee/components/AddEmployee/Main.vue
index 35098cfc7..162446638 100644
--- a/src/modules/08_registryEmployee/components/AddEmployee/Main.vue
+++ b/src/modules/08_registryEmployee/components/AddEmployee/Main.vue
@@ -359,7 +359,7 @@ const clickBack = () => {
       <div class="row">
         <div class="row col-12 q-col-gutter-x-sm q-mb-xs">
           <div class="col-xs-6 col-sm-3 col-md-3">
-            <q-input hide-bottom-space outlined v-model="informaData.cardid" dense @update:model-value="changeCardID"
+            <q-input hide-bottom-space outlined v-model="informaData.cardid" dense @update:model-value="changeCardID " for="#cardId"
               lazy-rules :rules="[
                 (val: string) => !!val || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
                 (val: string) =>
@@ -369,23 +369,23 @@ const clickBack = () => {
             <!-- :rules="[(val:any) =>val.length != 13 ||`${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,]" -->
           </div>
           <div class="col-xs-6 col-sm-3 col-md-3">
-            <selector hide-bottom-space outlined :rules="[(val: string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]" dense
+            <selector for="#prefixId" hide-bottom-space outlined :rules="[(val: string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]" dense
               lazy-rules v-model="informaData.prefixId" emit-value map-options option-label="name"
               :options="Ops.prefixOps" option-value="id" :label="`${'คำนำหน้าชื่อ'}`" use-input input-debounce="0"
               @filter="(inputValue: any, doneFn: Function) => filterSelector(inputValue, doneFn, 'prefixOps')" />
           </div>
           <div class="col-xs-6 col-sm-3 col-md-3">
-            <q-input hide-bottom-space outlined dense lazy-rules v-model="informaData.firstname"
+            <q-input for="#firstname" hide-bottom-space outlined dense lazy-rules v-model="informaData.firstname"
               :rules="[(val: string) => !!val || `${'กรุณากรอก ชื่อ'}`]" :label="`${'ชื่อ'}`" />
           </div>
           <div class="col-xs-6 col-sm-3 col-md-3">
-            <q-input hide-bottom-space outlined dense lazy-rules v-model="informaData.lastname"
+            <q-input for="#lastname" hide-bottom-space outlined dense lazy-rules v-model="informaData.lastname"
               :rules="[(val: string) => !!val || `${'กรุณากรอก นามสกุล'}`]" :label="`${'นามสกุล'}`" />
           </div>
         </div>
         <div class="row col-12 q-col-gutter-x-sm q-mb-xs">
           <div class="col-xs-6 col-sm-2 col-md-2">
-            <datepicker v-model="informaData.birthDate" :locale="'th'" autoApply :enableTimePicker="false" week-start="0"
+            <datepicker  v-model="informaData.birthDate" :locale="'th'" autoApply :enableTimePicker="false" week-start="0"
               :max-date="calculateMaxDate()" @update:model-value="calRetire">
               <template #year="{ year }">
                 {{ year + 543 }}
@@ -394,7 +394,7 @@ const clickBack = () => {
                 {{ parseInt(value + 543) }}
               </template>
               <template #trigger>
-                <q-input hide-bottom-space outlined dense lazy-rules :model-value="informaData.birthDate == null
+                <q-input for="#birthDate" hide-bottom-space outlined dense lazy-rules :model-value="informaData.birthDate == null
                   ? null
                   : date2Thai(informaData.birthDate)
                   " :rules="[(val: string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
@@ -412,45 +412,45 @@ const clickBack = () => {
               :model-value="informaData.age" :label="`${'อายุ'}`" />
           </div>
           <div class="col-xs-6 col-sm-2 col-md-2">
-            <selector hide-bottom-space outlined dense lazy-rules v-model="informaData.genderId" emit-value map-options
+            <selector for="#genderId" hide-bottom-space outlined dense lazy-rules v-model="informaData.genderId" emit-value map-options
               option-label="name" :options="Ops.genderOps" option-value="id" :label="`${'เพศ'}`" use-input
               input-debounce="0" @filter="(inputValue: any,
                 doneFn: Function) => filterSelector(inputValue, doneFn, 'genderOps'
                 )" />
           </div>
           <div class="col-xs-6 col-sm-2 col-md-2">
-            <selector hide-bottom-space outlined dense lazy-rules v-model="informaData.statusId" emit-value map-options
+            <selector for="#statusId" hide-bottom-space outlined dense lazy-rules v-model="informaData.statusId" emit-value map-options
               option-label="name" :options="Ops.statusOps" option-value="id" :label="`${'สถานภาพ'}`" use-input
               input-debounce="0" @filter="(inputValue: any,
                 doneFn: Function) => filterSelector(inputValue, doneFn, 'statusOps'
                 )" />
           </div>
           <div class="col-xs-6 col-sm-2 col-md-2">
-            <q-input hide-bottom-space outlined dense lazy-rules v-model="informaData.nationality"
+            <q-input for="#nationality" hide-bottom-space outlined dense lazy-rules v-model="informaData.nationality"
               :label="`${'สัญชาติ'}`" />
           </div>
           <div class="col-xs-6 col-sm-2 col-md-2">
-            <q-input hide-bottom-space outlined dense lazy-rules v-model="informaData.ethnicity"
+            <q-input for="#ethnicity" hide-bottom-space outlined dense lazy-rules v-model="informaData.ethnicity"
               :label="`${'เชื้อชาติ'}`" />
           </div>
         </div>
         <div class="row col-12 q-col-gutter-x-sm q-mb-xs">
           <div class="col-xs-6 col-sm-2 col-md-2">
-            <selector hide-bottom-space outlined dense lazy-rules v-model="informaData.religionId" emit-value map-options
+            <selector for="#religionId" hide-bottom-space outlined dense lazy-rules v-model="informaData.religionId" emit-value map-options
               option-label="name" :options="Ops.religionOps" option-value="id" :label="`${'ศาสนา'}`" use-input
               input-debounce="0" @filter="(inputValue: any,
                 doneFn: Function) => filterSelector(inputValue, doneFn, 'religionOps'
                 )" />
           </div>
           <div class="col-xs-6 col-sm-2 col-md-2">
-            <selector hide-bottom-space outlined dense lazy-rules v-model="informaData.bloodId" emit-value map-options
+            <selector for="#bloodId" hide-bottom-space outlined dense lazy-rules v-model="informaData.bloodId" emit-value map-options
               option-label="name" :options="Ops.bloodOps" option-value="id" :label="`${'หมู่เลือด'}`" use-input
               input-debounce="0" @filter="(inputValue: any,
                 doneFn: Function) => filterSelector(inputValue, doneFn, 'bloodOps'
                 )" clearable />
           </div>
           <div class="col-xs-6 col-sm-2 col-md-2">
-            <q-input hide-bottom-space outlined dense lazy-rules type="tel" v-model="informaData.tel"
+            <q-input for="#tel" hide-bottom-space outlined dense lazy-rules type="tel" v-model="informaData.tel"
               :label="`${'เบอร์โทร'}`" :rules="[
                 (val: string) => !!val || `${'กรุณากรอก เบอร์โทร'}`,
                 (val: string) =>
@@ -464,7 +464,7 @@ const clickBack = () => {
     <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
     <div class="row col-12">
       <q-space />
-      <q-btn unelevated dense class="q-px-md items-center" color="light-blue-10" label="บันทึก" @click="saveData" />
+      <q-btn for="#submitForm" unelevated dense class="q-px-md items-center" color="light-blue-10" label="บันทึก" @click="saveData" />
     </div>
   </q-card>
 
@@ -482,7 +482,7 @@ const clickBack = () => {
             <q-tooltip>อัปเดตรูปภาพ</q-tooltip>
           </q-icon>
 
-          <input type="file" style="display: none" ref="inputImage" accept="image/*" @change="uploadImage" />
+          <input for="#profile" type="file" style="display: none" ref="inputImage" accept="image/*" @change="uploadImage" />
         </div>
       </q-avatar>
 
diff --git a/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue b/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue
index cb8e5d0e0..8635c2d3c 100644
--- a/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue
+++ b/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, useAttrs, onMounted } from "vue";
-import type { QTableProps } from "quasar";
+
 import router from "@/router";
 import { useQuasar } from "quasar";
 // import { useCounterMixin } from "@/stores/mixin";
@@ -8,10 +8,9 @@ import { useQuasar } from "quasar";
 // import config from "@/app.config";
 // import http from "@/plugins/http";
 
-import { useInvestigateFactStore }  from '../../store/InvestigateFactStore'
-const dataInvestigate = useInvestigateFactStore()
-const { fecthList } = dataInvestigate
-
+import { useInvestigateFactStore } from "@/modules/11_discipline/store/InvestigateFactStore";
+const dataInvestigate = useInvestigateFactStore();
+const { fecthList } = dataInvestigate;
 // const mixin = useCounterMixin();
 // const {
 //   date2Thai,
@@ -24,69 +23,6 @@ const { fecthList } = dataInvestigate
 // } = mixin;
 const $q = useQuasar(); //ใช้ noti quasar
 
-const visibleColumns = ref<string[]>([
-  "no",
-  "subject",
-  "interrogated",
-  "fault",
-  "status",
-]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
-
-// หัวตาราง
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "no",
-    align: "center",
-    label: "ลำดับ",
-    sortable: false,
-    field: "no",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "subject",
-    align: "left",
-    label: "เรื่อง",
-    sortable: true,
-    field: "subject",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "interrogated",
-    align: "left",
-    label: "ผู้ถูกสอบสวน",
-    sortable: true,
-    field: "interrogated",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "fault",
-    align: "left",
-    label: "ลักษณะความผิด",
-    sortable: true,
-    field: "fault",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "status",
-    align: "left",
-    label: "สถานะ",
-    sortable: false,
-    field: "status",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-]);
-
-
-
 // ค้นหาในตาราง
 const filterKeyword = ref<string>("");
 const filterRef = ref<HTMLInputElement | null>(null);
@@ -97,7 +33,6 @@ const resetFilter = () => {
   }
 };
 
-
 const attrs = ref<any>(useAttrs());
 const paging = ref<boolean>(true);
 const pagination = ref({
@@ -111,45 +46,41 @@ const paginationLabel = (start: string, end: string, total: string) => {
   else return start + "-" + end + " ใน " + total;
 };
 
-function fecthInvestigateFact() {
-  const data = [
+const clickAdd = () => {
+  router.push(`/discipline/investigatefacts/add`);
+};
+onMounted(() => {
+  fecthList([
     {
       subject: "ทุจริตในหน้าที่",
       interrogated: "ศิรินภา คงน้อยี่",
       fault: "1",
       status: "0",
-      active:'1'
+      active: "1",
     },
     {
       subject: "ทุจริตในหน้าที่",
       interrogated: "นายนครชัย วันดี",
       fault: "1",
       status: "1",
-      active:'1'
+      active: "1",
     },
     {
       subject: "กระทำทุจริตเงินกองทุน",
       interrogated: "นายกัณฐิมา  กาฬสินธ์ุ",
       fault: "0",
       status: "1",
-      active:'1'
+      active: "1",
     },
     {
       subject: "พูดจาไม่สุภาพ",
       interrogated: "นายปิยรมย์ ศิริธาราฟ",
       fault: "0",
       status: "1",
-      active:'1'
+      active: "1",
     },
-  ];
-  fecthList(data); // ส่งข้อมูลไป stores
-}
-const clickAdd = () => {
-  router.push(`/discipline/investigatefacts/add`)
-}
-onMounted(()=>{
-  fecthInvestigateFact()
-})
+  ]);
+});
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
@@ -194,7 +125,7 @@ onMounted(()=>{
         </q-input>
 
         <q-select
-          v-model="visibleColumns"
+          v-model="dataInvestigate.visibleColumns"
           multiple
           outlined
           dense
@@ -202,7 +133,7 @@ onMounted(()=>{
           :display-value="$q.lang.table.columns"
           emit-value
           map-options
-          :options="columns"
+          :options="dataInvestigate.columns"
           option-value="name"
           options-cover
           style="min-width: 150px"
@@ -212,7 +143,7 @@ onMounted(()=>{
       <div class="col-12">
         <d-table
           ref="table"
-          :columns="columns"
+          :columns="dataInvestigate.columns"
           :rows="dataInvestigate.rows"
           :filter="filterKeyword"
           row-key="interrogated"
@@ -222,13 +153,18 @@ onMounted(()=>{
           dense
           class="custom-header-table"
           v-bind="attrs"
-          :visible-columns="visibleColumns"
+          :visible-columns="dataInvestigate.visibleColumns"
           :pagination-label="paginationLabel"
           v-model:pagination="pagination"
         >
           <template v-slot:header="props">
             <q-tr :props="props">
-              <q-th v-for="col in props.cols" :key="col.name" :props="props" style="padding: 10px;color:#35373C;font-weight: 500;">
+              <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 />
@@ -237,57 +173,29 @@ onMounted(()=>{
           </template>
           <template v-slot:body="props">
             <q-tr :props="props" class="cursor-pointer">
-              <q-td key="no" :props="props">
-                {{ props.rowIndex + 1 }}
+              <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                <q-td v-if="col.name == 'no'">
+                  {{ props.rowIndex + 1 }}
+                </q-td>
+                <div>
+                  {{ col.value }}
+                </div>
               </q-td>
-              <q-td
-                key="subject"
-                :props="props"
-              >
-              {{ props.row.subject }}
-              </q-td>
-              <q-td
-                key="interrogated"
-                :props="props"
-              >
-                {{ props.row.interrogated }}
-              </q-td>
-              <q-td
-                key="fault"
-                :props="props"
-              >
-                {{ props.row.fault }}
-              </q-td>
-              <q-td
-                key="status"
-                :props="props"
-              >
-                {{ props.row.status }}
-              </q-td>
-              <q-td style="font-size: 14px;width: 10rem">
+              <q-td auto-width style="font-size: 14px; width: 10rem">
                 {{ props.row.active }}
               </q-td>
-              <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 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>
-          <!-- <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>
       </div>
     </div>
   </q-card>
 </template>
-
-
diff --git a/src/modules/11_discipline/interface/index/Main.ts b/src/modules/11_discipline/interface/index/Main.ts
index d61ea9435..a9c8d518c 100644
--- a/src/modules/11_discipline/interface/index/Main.ts
+++ b/src/modules/11_discipline/interface/index/Main.ts
@@ -5,9 +5,9 @@ interface DataOption {
 interface investigatefactsDataRowType {
   subject: string;
   interrogated: string;
-  fault: string;
-  status: string;
-  active: string;
+  fault: string|undefined;
+  status: string|undefined;
+  active: string|undefined;
 }
 interface MyObjectRef {
   orderType: any;
diff --git a/src/modules/11_discipline/store/InvestigateFactStore.ts b/src/modules/11_discipline/store/InvestigateFactStore.ts
index 99c039f89..9b645d940 100644
--- a/src/modules/11_discipline/store/InvestigateFactStore.ts
+++ b/src/modules/11_discipline/store/InvestigateFactStore.ts
@@ -1,5 +1,6 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
+import type { QTableProps } from "quasar";
 import type { investigatefactsDataRowType, DataOption } from '@/modules/11_discipline/interface/index/Main'
 
 export const useInvestigateFactStore = defineStore("DisciplineInvestigateFact", () => {
@@ -23,6 +24,66 @@ export const useInvestigateFactStore = defineStore("DisciplineInvestigateFact",
         { id: "002", name: "ไม่ร้ายเเรง" },
         { id: "003", name: "ร้ายเเรง" },
     ]);
+    const visibleColumns = ref<string[]>([
+        "no",
+        "subject",
+        "interrogated",
+        "fault",
+        "status",
+    ]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+
+    // หัวตาราง
+    const columns = ref<QTableProps["columns"]>([
+        {
+            name: "no",
+            align: "center",
+            label: "ลำดับ",
+            sortable: false,
+            field: "no",
+            headerStyle: "font-size: 14px",
+            style: "font-size: 14px",
+        },
+        {
+            name: "subject",
+            align: "left",
+            label: "เรื่อง",
+            sortable: true,
+            field: "subject",
+            headerStyle: "font-size: 14px",
+            style: "font-size: 14px",
+        },
+        {
+            name: "interrogated",
+            align: "left",
+            label: "ผู้ถูกสอบสวน",
+            sortable: true,
+            field: "interrogated",
+            headerStyle: "font-size: 14px",
+            style: "font-size: 14px",
+            sort: (a: string, b: string) =>
+                a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+        },
+        {
+            name: "fault",
+            align: "left",
+            label: "ลักษณะความผิด",
+            sortable: true,
+            field: "fault",
+            headerStyle: "font-size: 14px",
+            style: "font-size: 14px",
+            sort: (a: string, b: string) =>
+                a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+        },
+        {
+            name: "status",
+            align: "left",
+            label: "สถานะ",
+            sortable: false,
+            field: "status",
+            headerStyle: "font-size: 14px",
+            style: "font-size: 14px",
+        },
+    ]);
     function filterFnOptionsType(val: string, update: any, type: string) {
         update(() => {
             const needle = val.toLowerCase();
@@ -44,16 +105,17 @@ export const useInvestigateFactStore = defineStore("DisciplineInvestigateFact",
 
         });
     }
-    async function fecthList(data: investigatefactsDataRowType[]) {
-        let datalist: investigatefactsDataRowType[] = data.map((e: any) => ({
-            subject: e.subject,
-            interrogated: e.interrogated,
-            fault: e.fault ?? convertFault(e.fault),
-            status: e.status ?? convertSatatus(e.status),
-            active: e.active ?? activeStatus(e.active)
-
-        }))
-        rows.value = datalist
+    function fecthList(data: investigatefactsDataRowType[]) {
+        let datalist: investigatefactsDataRowType[] = data.map((e: investigatefactsDataRowType) => {
+            return {
+                subject: e.subject,
+                interrogated: e.interrogated,
+                fault: e.fault ? convertFault(e.fault):'-',
+                status: e.status ? convertSatatus(e.status):'-',
+                active: e.active ? activeStatus(e.active):'-'
+            };
+        });
+        rows.value = datalist;
     }
     function convertFault(val: string) {
         switch (val) {
@@ -89,5 +151,7 @@ export const useInvestigateFactStore = defineStore("DisciplineInvestigateFact",
         faultOp,
         daysExtendOp,
         investigationOp,
+        visibleColumns,
+        columns
     };
 })
\ No newline at end of file