diff --git a/env.d.ts b/env.d.ts
index 11f02fe2a..33cd2182c 100644
--- a/env.d.ts
+++ b/env.d.ts
@@ -1 +1,2 @@
 /// <reference types="vite/client" />
+declare module 'quasar-ui-q-draggable-table';
\ No newline at end of file
diff --git a/package.json b/package.json
index 403f6f025..cc3443f41 100644
--- a/package.json
+++ b/package.json
@@ -58,6 +58,7 @@
     "node-sass": "^9.0.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.7.1",
+    "quasar-ui-q-draggable-table": "^1.0.1",
     "sass": "^1.69.4",
     "start-server-and-test": "^1.15.2",
     "typescript": "~4.7.4",
diff --git a/src/components/Dialogs/AddPersonal.vue b/src/components/Dialogs/AddPersonal.vue
index 29789e049..40c173324 100644
--- a/src/components/Dialogs/AddPersonal.vue
+++ b/src/components/Dialogs/AddPersonal.vue
@@ -179,9 +179,9 @@ watch(
         />
       </q-toolbar>
       <q-separator />
-      <q-card-section class="q-pa-md bg-grey-1">
+      <q-card-section class="q-pa-md">
         <div class="row col-12 q-col-gutter-sm items-start">
-          <div class="col-12 col-sm-6 col-md-3">
+          <div class="col-12 col-sm-5 col-md-3">
             <q-select
               label="ค้นหาจาก"
               v-model="type"
@@ -196,7 +196,7 @@ watch(
             />
           </div>
 
-          <div class="col-12 col-sm-6 col-md-6">
+          <div class="col-12 col-sm-7 col-md-9">
             <q-input
               ref="searchRef"
               v-model="search"
@@ -205,22 +205,23 @@ watch(
               dense
               label="คำค้น"
               :rules="[(val) => !!val || `กรุณากรอกคำค้น`]"
-            />
-          </div>
-
-          <div class="col-12 col-sm-6 col-md-2">
-            <q-btn
-              color="primary"
-              icon="search"
-              label="ค้นหา"
-              class="full-width q-pa-sm"
-              @click="searchInput()"
             >
-            </q-btn>
+            <template v-slot:after>
+              <q-btn
+                color="primary"
+                icon="search"
+                label="ค้นหา"
+                outline
+                class="full-width q-py-sm q-px-md"
+                @click="searchInput()"
+              >
+              </q-btn>
+            </template>
+            </q-input>
           </div>
         </div>
 
-        <div class="full-width q-mt-sm">
+        <div class="full-width">
           <d-table
             ref="table"
             :columns="mainStore.columnsRespondent"
diff --git a/src/main.ts b/src/main.ts
index 2926f9112..79578a04c 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -2,7 +2,10 @@ import { createApp, defineAsyncComponent } from "vue";
 import App from "./App.vue";
 import router from "./router";
 import { Dialog, Notify, Quasar, Loading } from "quasar";
-import quasarUserOptions from "./quasar-user-options";
+import "./quasar-user-options";
+
+import qDraggableTable from 'quasar-ui-q-draggable-table';
+import 'quasar-ui-q-draggable-table/dist/index.css';
 
 import "quasar/src/css/index.sass";
 import th from "quasar/lang/th";
@@ -29,6 +32,7 @@ app.config.globalProperties.$filters = filters;
 
 app.use(router);
 app.use(pinia);
+app.use(qDraggableTable);
 
 app.use(
   Quasar,
diff --git a/src/modules/01_metadataNew/components/insignia/InsigniaDetail.vue b/src/modules/01_metadataNew/components/insignia/InsigniaDetail.vue
index db71f6c5e..7a82b6fab 100644
--- a/src/modules/01_metadataNew/components/insignia/InsigniaDetail.vue
+++ b/src/modules/01_metadataNew/components/insignia/InsigniaDetail.vue
@@ -43,6 +43,7 @@ onMounted(async () => {
   fetchData(id.value);
 });
 </script>
+
 <template>
   <div class="toptitle text-dark col-12 row items-center">
     <q-btn
diff --git a/src/modules/01_metadataNew/components/insignia/InsigniaList.vue b/src/modules/01_metadataNew/components/insignia/InsigniaList.vue
index a77a1fe19..e00d6202c 100644
--- a/src/modules/01_metadataNew/components/insignia/InsigniaList.vue
+++ b/src/modules/01_metadataNew/components/insignia/InsigniaList.vue
@@ -5,6 +5,7 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useRouter, useRoute } from "vue-router";
 import { useInsigniaDataStore } from "@/modules/01_metadataNew/stores/InsigniaStore";
 import dialogHeader from "@/components/DialogHeader.vue";
+import TableDraggable from "@/modules/01_metadataNew/components/insignia/TableDraggable.vue";
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -181,7 +182,6 @@ async function fetchData(id: string) {
 }
 onMounted(async () => {
   fetchData(id.value);
-  console.log(id.value);
 });
 
 async function onSubmit() {
@@ -207,7 +207,7 @@ async function addData() {
     name: name.value,
     isActive: isActive.value,
     shortName: shortName.value,
-    note: note.value == "" ? "-" : "",
+    note: note.value == "" ? "-" : note.value,
     insigniaTypeId: id.value,
   });
   fetchData(id.value);
@@ -218,7 +218,7 @@ async function editData(idData: string) {
     name: name.value,
     isActive: isActive.value,
     shortName: shortName.value,
-    note: note.value == "" ? "-" : "",
+    note: note.value == "" ? "-" : note.value,
     insigniaTypeId: id.value,
   });
   fetchData(id.value);
@@ -232,10 +232,7 @@ async function deleteData(idData: string) {
 import { defineEmits } from "vue";
 
 const emit = defineEmits(["nameType"]);
-
-const nameType = () => {
-  emit("nameType", insigniaTypeId.value);
-};
+const dialogOrder = ref<boolean>(false);
 </script>
 
 <template>
@@ -255,6 +252,16 @@ const nameType = () => {
       >
         <q-tooltip> เพิ่มข้อมูล </q-tooltip>
       </q-btn>
+      <q-btn
+        flat
+        round
+        color="blue-6"
+        icon="mdi-sort"
+        @click.stop="() => (dialogOrder = true)"
+      >
+        <q-tooltip> จัดลำดับการแสดงผล </q-tooltip>
+      </q-btn>
+      <TableDraggable v-model:modal="dialogOrder" />
       <q-space />
       <div class="row q-gutter-sm">
         <q-input outlined dense v-model="filterKeyword" label="ค้นหา"></q-input>
diff --git a/src/modules/01_metadataNew/components/insignia/InsigniaType.vue b/src/modules/01_metadataNew/components/insignia/InsigniaType.vue
index 684fe5740..224266e55 100644
--- a/src/modules/01_metadataNew/components/insignia/InsigniaType.vue
+++ b/src/modules/01_metadataNew/components/insignia/InsigniaType.vue
@@ -102,7 +102,6 @@ async function fetchData() {
   await http
     .get(config.API.insigniaTypeNew)
     .then(async (res) => {
-      console.log(res.data.result);
       store.fetchData(res.data.result);
     })
     .catch((err) => {
diff --git a/src/modules/01_metadataNew/components/insignia/TableDraggable.vue b/src/modules/01_metadataNew/components/insignia/TableDraggable.vue
new file mode 100644
index 000000000..5f1d8bdc9
--- /dev/null
+++ b/src/modules/01_metadataNew/components/insignia/TableDraggable.vue
@@ -0,0 +1,153 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import type { QTableProps } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import { useRouter, useRoute } from "vue-router";
+import { useInsigniaDataStore } from "@/modules/01_metadataNew/stores/InsigniaStore";
+import dialogHeader from "@/components/DialogHeader.vue";
+import { useQuasar } from "quasar";
+import DialogHeader from "@/components/DialogHeader.vue";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+const store = useInsigniaDataStore();
+const mixin = useCounterMixin();
+const { dialogRemove, dialogConfirm, showLoader, hideLoader, messageError } =
+  mixin;
+const $q = useQuasar();
+const route = useRoute();
+const modal = defineModel("modal", { type: Boolean });
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "name",
+    required: true,
+    label: "ชื่อเครื่องราชฯ",
+    align: "left",
+    field: "name",
+    sortable: true,
+  },
+  {
+    name: "shortName",
+    align: "center",
+    label: "ชื่อย่อ",
+    field: "shortName",
+  },
+  {
+    name: "insigniaType",
+    align: "left",
+    label: "ลำดับชั้นเครื่องราชฯ",
+    field: "insigniaType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sortable: true,
+  },
+]);
+
+function onDrop(from: any, to: any) {
+  onDropRow(from, to);
+}
+
+const rows = ref<any>([]);
+function onDropRow(from: any, to: any) {
+  rows.value.splice(to, 0, rows.value.splice(from, 1)[0]);
+}
+
+async function save() {
+  const dataPost = await rows.value.map((obj:any) => {
+  return obj.id;
+});
+  console.log("post data===>", dataPost);
+  modal.value = false
+  // showLoader();
+  // await http
+  //   .put(config.API.insigniaTypeNewId(id), dataPost)
+  //   .then(async (res) => {
+  //   })
+  //   .catch((err) => {
+  //     messageError($q, err);
+  //   })
+  //   .finally(() => {
+  //     hideLoader();
+  //   });
+}
+
+async function onSubmit() {
+  dialogConfirm($q, async () => {
+    save();
+  });
+}
+
+watch(modal, () => {
+  if (modal.value === true) {
+    // rows.value = store.row;
+    rows.value = [...store.row]; // ดึงมาใช้ sort แล้วใน store ไม่เปลี่ยน
+  }
+});
+</script>
+
+<template>
+  <q-dialog v-model="modal" class="dialog" persistent>
+    <q-card style="min-width: 50vw" class="bg-grey-11">
+      <form @submit.prevent="onSubmit">
+        <DialogHeader
+          tittle="จัดลำดับการแสดงผล"
+          :close="() => (modal = false)"
+        />
+        <q-separator />
+        <q-card-section class="q-pa-md bg-grey-1">
+          <q-table
+            v-draggable-table="{
+              options: {
+                mode: 'row',
+                onlyBody: true,
+                dragHandler: 'th,td',
+              },
+              onDrop,
+            }"
+            flat
+            bordered
+            :rows="rows"
+            :columns="columns"
+            :rows-per-page-options="[100]"
+            row-key="name"
+            hide-bottom
+            hide-pagination
+            hide-header
+          />
+          <!-- <q-table
+            v-draggable-table="{
+              options: {
+                mode: 'row',
+                onlyBody: true,
+                dragHandler: 'tr',
+              },
+              onDrop,
+            }"
+            ref="table"
+            :columns="columns"
+            :rows="rows"
+            row-key="name"
+            flat
+            bordered
+            hide-bottom
+          /> -->
+        </q-card-section>
+
+        <q-separator />
+        <q-card-actions align="right">
+          <q-btn
+            type="submit"
+            dense
+            unelevated
+            label="บันทึก"
+            color="public"
+            class="q-px-md"
+          >
+            <!-- icon="mdi-content-save-outline" -->
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </form>
+    </q-card>
+  </q-dialog>
+</template>
diff --git a/src/modules/01_metadataNew/interface/response/insignia/Insignia.ts b/src/modules/01_metadataNew/interface/response/insignia/Insignia.ts
index afa2247f4..b95bf82e2 100644
--- a/src/modules/01_metadataNew/interface/response/insignia/Insignia.ts
+++ b/src/modules/01_metadataNew/interface/response/insignia/Insignia.ts
@@ -5,6 +5,7 @@ interface DataResponse {
   lastUpdateFullName: String;
   lastUpdatedAt: Date;
   name: string;
+  level: Number;
 }
 
 interface DataRow {
diff --git a/src/modules/01_metadataNew/stores/InsigniaStore.ts b/src/modules/01_metadataNew/stores/InsigniaStore.ts
index b5b7873bd..c1a101b40 100644
--- a/src/modules/01_metadataNew/stores/InsigniaStore.ts
+++ b/src/modules/01_metadataNew/stores/InsigniaStore.ts
@@ -9,16 +9,18 @@ import { useCounterMixin } from "@/stores/mixin";
 const { date2Thai } = useCounterMixin();
 
 export const useInsigniaDataStore = defineStore("insigniaData", () => {
-  const row = ref<DataRow[]>();
-  const name1 = ref<string>("");
+  const row = ref<DataRow[]>([]);
   function fetchData(data: DataResponse[], insigniaType?: string) {
+    data.forEach((row, index) => {
+      row.level = index + 1;
+    });
     const list = data.map((e) => ({
       ...e,
       insigniaType: insigniaType,
       createdAt: e.createdAt ? date2Thai(e.createdAt) : "",
       lastUpdatedAt: e.lastUpdatedAt ? date2Thai(e.lastUpdatedAt) : "",
     }));
-    console.log("test");
+    list;
     row.value = list;
   }
 
diff --git a/src/modules/11_discipline/components/1_Complaint/AddComplaintPage.vue b/src/modules/11_discipline/components/1_Complaint/AddComplaintPage.vue
index b103acbe8..3c49bc768 100644
--- a/src/modules/11_discipline/components/1_Complaint/AddComplaintPage.vue
+++ b/src/modules/11_discipline/components/1_Complaint/AddComplaintPage.vue
@@ -87,6 +87,6 @@ async function onSubmit(data: any) {
       เพิ่มเรื่องร้องเรียน
     </div>
 
-    <Form :on-submit="onSubmit" />
+    <q-card bordered><Form :on-submit="onSubmit" /></q-card>
   </div>
 </template>
diff --git a/src/modules/11_discipline/components/1_Complaint/EditPage.vue b/src/modules/11_discipline/components/1_Complaint/EditPage.vue
index 67691ce19..d6de14f06 100644
--- a/src/modules/11_discipline/components/1_Complaint/EditPage.vue
+++ b/src/modules/11_discipline/components/1_Complaint/EditPage.vue
@@ -406,7 +406,7 @@ onMounted(() => {
       </div>
     </div>
 
-    <Form :on-submit="onSubmit" :data="data" :get-data="getData" />
+    <q-card bordered><Form :on-submit="onSubmit" :data="data" :get-data="getData" /></q-card>
     <PopupSendToNext
       :modal="modalPopup"
       :close="closePopup"
diff --git a/src/modules/11_discipline/components/1_Complaint/Form.vue b/src/modules/11_discipline/components/1_Complaint/Form.vue
index 48dd6303a..827f090ff 100644
--- a/src/modules/11_discipline/components/1_Complaint/Form.vue
+++ b/src/modules/11_discipline/components/1_Complaint/Form.vue
@@ -359,533 +359,633 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="row col-12 bg-white">
-    <div class="col-sm-12 col-md-9">
-      <div v-if="isSave" class="q-pa-sm q-gutter-sm">
-        <q-banner
-          inline-actions
-          bordered
-          class="bg-red-1 text-red border-orange"
-        >
-          <q-icon name="mdi-information-outline" size="20px" /> แจ้งเตือน
-          ยังไม่ได้บันทึกข้อมูล
-        </q-banner>
-      </div>
+  <div  class="row col-12 bg-white">
+    <div v-if="isSave" class=" col-12">
+      <q-banner
+        inline-actions
+        bordered
+        rounded
+        class="bg-red-1 text-red border-orange q-ma-md"
+      >
+        <q-icon name="mdi-information-outline" size="20px" /> แจ้งเตือน
+        ยังไม่ได้บันทึกข้อมูล
+      </q-banner>
+      <q-separator />
+    </div>
 
-      <form @submit.prevent="validateForm">
-        <div class="col-12">
-          <q-card bordered>
-            <div class="col-12 row q-pa-md">
-              <div class="col-xs-12 col-sm-12 row q-col-gutter-md">
-                <div class="col-xs-12 col-sm-4" id="respondentType">
-                  <q-select
-                    :class="inputEdit(isReadonly)"
-                    for="SelectrespondentType"
-                    v-model="formData.respondentType"
-                    ref="respondentTypeRef"
-                    dense
-                    outlined
-                    :readonly="isReadonly"
-                    label="ผู้ถูกร้องเรียน"
-                    option-value="id"
-                    option-label="name"
-                    emit-value
-                    use-input
-                    map-options
-                    hide-bottom-space
-                    :options="complainstStore.complainantoptions"
-                    :rules="[(val) => !!val || `${'กรุณาเลือกผู้ร้องเรียน'}`]"
-                    lazy-rules
-                    @filter="(inputValue: any,
-                doneFn: Function) => filterSelector(inputValue, doneFn, 'filterrespondentType'
-                )"
-                    @update:model-value="changeFormData()"
-                  >
-                    <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-4"
-                  v-if="formData.respondentType === 'ORGANIZATION'"
-                  id="organizationId"
+    <form @submit.prevent="validateForm">
+      <div class="col-12 row">
+        <div class="col-sm-12 col-md-9 row no-wrap">
+          <div class="col-12 row q-pa-md">
+            <div class="row q-col-gutter-md">
+              <div class="col-xs-12 col-sm-4" id="respondentType">
+                <q-select
+                  :class="inputEdit(isReadonly)"
+                  for="SelectrespondentType"
+                  v-model="formData.respondentType"
+                  ref="respondentTypeRef"
+                  dense
+                  outlined
+                  :readonly="isReadonly"
+                  label="ผู้ถูกร้องเรียน"
+                  option-value="id"
+                  option-label="name"
+                  emit-value
+                  use-input
+                  map-options
+                  hide-bottom-space
+                  :options="complainstStore.complainantoptions"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกผู้ร้องเรียน'}`]"
+                  lazy-rules
+                  @filter="(inputValue: any,
+              doneFn: Function) => filterSelector(inputValue, doneFn, 'filterrespondentType'
+              )"
+                  @update:model-value="changeFormData()"
                 >
-                  <q-select
-                    :class="inputEdit(isReadonly)"
-                    for="inputOffice"
-                    name="organizationId"
-                    ref="organizationIdRef"
-                    dense
-                    hide-bottom-space
-                    :readonly="isReadonly"
-                    outlined
-                    option-label="name"
-                    option-value="id"
-                    emit-value
-                    map-options
-                    v-model="formData.organizationId"
-                    :options="complainstStore.organizationIdOp"
-                    label="เลือกสำนักงาน"
-                    :rules="[(val) => !!val || `${'กรุณาเลือกสำนักงาน'}`]"
-                    lazy-rules
-                    @update:model-value="changeFormData()"
-                  />
-                </div>
+                  <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-4" id="consideredAgency">
-                  <q-select
-                    :class="inputEdit(isReadonly)"
-                    ref="consideredAgencyRef"
-                    for="selectAgency"
-                    dense
-                    outlined
-                    v-model="formData.consideredAgency"
-                    :options="complainstStore.consideredAgencytoptions"
-                    label="หน่วยงานที่พิจารณา"
-                    option-value="id"
-                    option-label="name"
-                    :readonly="isReadonly"
-                    hide-bottom-space
-                    emit-value
-                    map-options
-                    :rules="[(val) => !!val || `${'กรุณาเลือกหน่วยงาน'}`]"
-                    lazy-rules
-                    use-input
-                    @filter="(inputValue: any,
-                doneFn: Function) => filterSelector(inputValue, doneFn, 'filterconsideredAgencytoptions'
-                )"
-                    @update:model-value="changeFormData()"
-                  >
-                    <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-4"
+                v-if="formData.respondentType === 'ORGANIZATION'"
+                id="organizationId"
+              >
+                <q-select
+                  :class="inputEdit(isReadonly)"
+                  for="inputOffice"
+                  name="organizationId"
+                  ref="organizationIdRef"
+                  dense
+                  hide-bottom-space
+                  :readonly="isReadonly"
+                  outlined
+                  option-label="name"
+                  option-value="id"
+                  emit-value
+                  map-options
+                  v-model="formData.organizationId"
+                  :options="complainstStore.organizationIdOp"
+                  label="เลือกสำนักงาน"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกสำนักงาน'}`]"
+                  lazy-rules
+                  @update:model-value="changeFormData()"
+                />
+              </div>
 
-                <div
+              <div class="col-xs-12 col-sm-4" id="consideredAgency">
+                <q-select
+                  :class="inputEdit(isReadonly)"
+                  ref="consideredAgencyRef"
+                  for="selectAgency"
+                  dense
+                  outlined
+                  v-model="formData.consideredAgency"
+                  :options="complainstStore.consideredAgencytoptions"
+                  label="หน่วยงานที่พิจารณา"
+                  option-value="id"
+                  option-label="name"
+                  :readonly="isReadonly"
+                  hide-bottom-space
+                  emit-value
+                  map-options
+                  :rules="[(val) => !!val || `${'กรุณาเลือกหน่วยงาน'}`]"
+                  lazy-rules
+                  use-input
+                  @filter="(inputValue: any,
+              doneFn: Function) => filterSelector(inputValue, doneFn, 'filterconsideredAgencytoptions'
+              )"
+                  @update:model-value="changeFormData()"
+                >
+                  <template v-slot:no-option>
+                    <q-item>
+                      <q-item-section class="text-grey">
+                        ไม่มีข้อมูล
+                      </q-item-section>
+                    </q-item>
+                  </template>
+                </q-select>
+              </div>
+
+              <div
+                class="row col-12"
+                v-if="formData.respondentType === 'PERSON'"
+              >
+                <q-card
+                  bordered
                   class="row col-12"
-                  v-if="formData.respondentType === 'PERSON'"
+                  style="border: 1px solid #d6dee1"
                 >
-                  <q-card
-                    bordered
-                    class="row col-12"
-                    style="border: 1px solid #d6dee1"
+                  <div
+                    class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
                   >
-                    <div
-                      class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
+                    ผู้ถูกร้องเรียน
+                    <q-btn
+                      v-if="!isReadonly"
+                      size="12px"
+                      flat
+                      round
+                      dense
+                      color="add"
+                      class="q-ml-sm"
+                      @click="toggleModal"
+                      icon="mdi-plus"
                     >
-                      ผู้ถูกร้องเรียน
-                      <q-btn
-                        v-if="!isReadonly"
-                        size="12px"
+                      <q-tooltip>เพิ่มผู้ถูกร้องเรียน</q-tooltip>
+                    </q-btn>
+                  </div>
+                  <div class="col-12"><q-separator /></div>
+
+                  <div class="col-xs-12 q-pa-sm">
+                    <d-table
+                      ref="table"
+                      :columns="mainStore.columnsRespondent"
+                      :rows="mainStore.rowsAdd"
+                      row-key="idcard"
+                      flat
+                      bordered
+                      :paging="true"
+                      dense
+                      class="custom-header-table"
+                      :visible-columns="mainStore.visibleColumnsRespondent"
+                    >
+                      <template v-slot:header="props">
+                        <q-tr :props="props">
+                          <q-th auto-width></q-th>
+                          <q-th
+                            v-for="col in props.cols"
+                            :key="col.name"
+                            :props="props"
+                            style="color: #000000; font-weight: 500"
+                          >
+                            <span class="text-weight-medium">{{
+                              col.label
+                            }}</span>
+                          </q-th>
+                          <q-th auto-width></q-th>
+                        </q-tr>
+                      </template>
+                      <template v-slot:body="props">
+                        <q-tr :props="props" class="cursor-pointer">
+                          <td>
+                            <q-btn
+                              dense
+                              flat
+                              round
+                              color="info"
+                              icon="info"
+                              @click="onclickViewinfo(props.row.personId)"
+                            >
+                              <q-tooltip>ดูข้อมูลในทะเบียนประวัติ</q-tooltip>
+                            </q-btn>
+                          </td>
+                          <q-td
+                            v-for="col in props.cols"
+                            :key="col.name"
+                            :props="props"
+                          >
+                            <div v-if="col.name == 'no'">
+                              {{ props.rowIndex + 1 }}
+                            </div>
+                            <div
+                              v-else-if="col.name === 'organization'"
+                              class="table_ellipsis"
+                            >
+                              {{ props.row.organization }}
+                            </div>
+                            <div v-else-if="col.name === 'salary'">
+                              {{ props.row.salary.toLocaleString() }}
+                            </div>
+                            <div v-else>
+                              {{ col.value }}
+                            </div>
+                          </q-td>
+                          <q-td auto-width>
+                            <q-btn
+                              v-if="!isReadonly"
+                              size="12px"
+                              flat
+                              round
+                              dense
+                              color="red"
+                              class="q-ml-sm"
+                              icon="mdi-delete-outline"
+                              @click="deletePerson(props.row.personId)"
+                              ><q-tooltip>ลบผู้ถูกร้องเรียน</q-tooltip></q-btn
+                            >
+                          </q-td>
+                        </q-tr>
+                      </template>
+                    </d-table>
+                  </div>
+                </q-card>
+              </div>
+
+              <div class="col-xs-12 col-sm-12" id="title">
+                <q-input
+                  for="inputTopicComplaint"
+                  ref="titleRef"
+                  dense
+                  :class="inputEdit(isReadonly)"
+                  outlined
+                  :readonly="isReadonly"
+                  hide-bottom-space
+                  v-model="formData.title"
+                  :rules="[(val) => !!val || 'กรุณากรอกเรื่องร้องเรียน']"
+                  lazy-rules
+                  label="เรื่องร้องเรียน"
+                  type="textarea"
+                  rows="5"
+                  @update:model-value="changeFormData()"
+                />
+              </div>
+
+              <div class="col-xs-12 col-sm-12" id="description">
+                <q-input
+                  :class="inputEdit(isReadonly)"
+                  for="inputDetail"
+                  ref="descriptionRef"
+                  dense
+                  outlined
+                  :readonly="isReadonly"
+                  hide-bottom-space
+                  v-model="formData.description"
+                  label="รายละเอียดเรื่องร้องเรียน"
+                  type="textarea"
+                  rows="5"
+                  @update:model-value="changeFormData()"
+                />
+              </div>
+
+              <div class="col-xs-12 col-sm-3" id="dateReceived">
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="formData.dateReceived"
+                  :locale="'th'"
+                  autoApply
+                  borderless
+                  :readonly="isReadonly"
+                  :enableTimePicker="false"
+                  week-start="0"
+                  @update:model-value="changeFormData()"
+                >
+                  <template #year="{ year }">
+                    {{ year + 543 }}
+                  </template>
+                  <template #year-overlay-value="{ value }">
+                    {{ parseInt(value + 543) }}
+                  </template>
+                  <template #trigger>
+                    <q-input
+                      for="inputDatereceive"
+                      ref="dateReceivedRef"
+                      outlined
+                      dense
+                      :class="inputEdit(isReadonly)"
+                      :readonly="isReadonly"
+                      hide-bottom-space
+                      :model-value="
+                        formData.dateReceived != null
+                          ? date2Thai(formData.dateReceived)
+                          : null
+                      "
+                      label="วันที่รับเรื่อง"
+                      :rules="[
+                        (val) => !!val || `${'กรุณาเลือกวันที่รับเรื่อง'}`,
+                      ]"
+                      lazy-rules
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          style="color: var(--q-primary)"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+              </div>
+
+              <div class="col-xs-12 col-sm-3" id="levelConsideration">
+                <q-select
+                  :class="inputEdit(isReadonly)"
+                  for="selectConsiderationLevel"
+                  ref="levelConsiderationRef"
+                  dense
+                  outlined
+                  :readonly="isReadonly"
+                  v-model="formData.levelConsideration"
+                  :options="complainstStore.levelConsiderationtOptions"
+                  label="ระดับการพิจารณา"
+                  option-value="id"
+                  option-label="name"
+                  emit-value
+                  clearable
+                  hide-bottom-space
+                  map-options
+                  @update:model-value="
+                    selectLevel(formData.levelConsideration);
+                    changeFormData();
+                  "
+                />
+              </div>
+
+              <div class="col-xs-12 col-sm-3" id="dateConsideration">
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="formData.dateConsideration"
+                  @update:model-value="changeFormData()"
+                  :locale="'th'"
+                  :readonly="isReadonly"
+                  autoApply
+                  borderless
+                  :enableTimePicker="false"
+                  week-start="0"
+                >
+                  <template #year="{ year }">
+                    {{ year + 543 }}
+                  </template>
+                  <template #year-overlay-value="{ value }">
+                    {{ parseInt(value + 543) }}
+                  </template>
+                  <template #trigger>
+                    <q-input
+                      for="inputDateconsideration"
+                      ref="dateConsiderationRef"
+                      outlined
+                      :class="inputEdit(isReadonly)"
+                      dense
+                      :model-value="
+                        formData.dateConsideration != null
+                          ? date2Thai(formData.dateConsideration)
+                          : null
+                      "
+                      :readonly="isReadonly"
+                      label="วันที่กำหนดพิจารณา"
+                      hide-bottom-space
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          style="color: var(--q-primary)"
+                        >
+                        </q-icon>
+                      </template>
+                      <template v-if="formData.dateConsideration && !isReadonly" v-slot:append>
+                        <q-icon
+                          name="cancel"
+                          @click.stop.prevent="formData.dateConsideration = null"
+                          class="cursor-pointer"
+                        />
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+              </div>
+
+              <div class="col-xs-12 col-sm-3" id="offenseDetails">
+                <q-select
+                  :class="inputEdit(isReadonly)"
+                  for="selectOffenseDescription"
+                  ref="offenseDetailsRef"
+                  dense
+                  outlined
+                  :readonly="isReadonly"
+                  v-model="formData.offenseDetails"
+                  :options="mainStore.offenseDetailstOptions"
+                  label="ลักษณะความผิด"
+                  option-value="id"
+                  option-label="name"
+                  emit-value
+                  hide-bottom-space
+                  map-options
+                  clearable
+                  @update:model-value="changeFormData()"
+                />
+              </div>
+
+              <div class="col-xs-12 col-sm-3" id="dateNotification">
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="formData.dateNotification"
+                  :locale="'th'"
+                  autoApply
+                  :readonly="isReadonly"
+                  borderless
+                  :enableTimePicker="false"
+                  week-start="0"
+                  @update:model-value="changeFormData()"
+                >
+                  <template #year="{ year }">
+                    {{ year + 543 }}
+                  </template>
+                  <template #year-overlay-value="{ value }">
+                    {{ parseInt(value + 543) }}
+                  </template>
+                  <template #trigger>
+                    <q-input
+                      for="inputDatewarn"
+                      ref="dateNotificationRef"
+                      outlined
+                      :class="inputEdit(isReadonly)"
+                      dense
+                      :readonly="isReadonly"
+                      hide-bottom-space
+                      :model-value="
+                        formData.dateNotification != null
+                          ? date2Thai(formData.dateNotification)
+                          : null
+                      "
+                      label="วันที่แจ้งเตือนล่วงหน้า"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          style="color: var(--q-primary)"
+                        >
+                        </q-icon>
+                      </template>
+                      <template v-if="formData.dateNotification && !isReadonly" v-slot:append>
+                        <q-icon
+                          name="cancel"
+                          @click.stop.prevent="formData.dateNotification = null"
+                          class="cursor-pointer"
+                        />
+                      </template>
+                      
+                    </q-input>
+                  </template>
+                </datepicker>
+              </div>
+
+              <div class="col-xs-12 col-sm-3" id="complaintFrom">
+                <q-select
+                  :class="inputEdit(isReadonly)"
+                  for="selectReceivecomplaints"
+                  ref="complaintFromRef"
+                  dense
+                  :readonly="isReadonly"
+                  outlined
+                  v-model="formData.complaintFrom"
+                  :options="channelOptions"
+                  label="รับเรื่องร้องเรียน"
+                  option-value="id"
+                  option-label="name"
+                  hide-bottom-space
+                  emit-value
+                  clearable
+                  map-options
+                  @update:model-value="changeFormData()"
+                />
+              </div>
+
+              <div class="col-xs-12 col-sm-12" id="appellant">
+                <q-input
+                  :class="inputEdit(isReadonly)"
+                  for="inputPetitioner"
+                  ref="appellantRef"
+                  dense
+                  outlined
+                  v-model="formData.appellant"
+                  :readonly="isReadonly"
+                  label="ผู้ร้องเรียน"
+                  hide-bottom-space
+                  type="textarea"
+                  rows="5"
+                  @update:model-value="changeFormData()"
+                />
+              </div>
+              <div class="col-xs-12 col-sm-12">
+                <q-input
+                  :class="inputEdit(isReadonly)"
+                  :readonly="isReadonly"
+                  for="result"
+                  ref="resultRef"
+                  dense
+                  outlined
+                  hide-bottom-space
+                  v-model="formData.result"
+                  label="ผลการตรวจสอบเรื่องร้องเรียน"
+                  type="textarea"
+                  rows="5"
+                  @update:model-value="changeFormData()"
+                />
+              </div>
+            </div>
+          </div>
+          <div class="col-12 row"><q-separator vertical /></div>
+        </div> 
+        
+        <!-- อัพโหลดไฟล์ -->
+        <div class="col-sm-12 col-md-3">
+          <div flat class="q-pa-md" >
+            <div class="col-12 row q-col-gutter-md">
+              <div class="row col-12">
+                <q-card
+                  bordered
+                  class="row col-12"
+                  style="border: 1px solid #d6dee1"
+                >
+                  <div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
+                    {{
+                      !isReadonly ? "อัปโหลดไฟล์เอกสารหลักฐาน" : "ไฟล์เอกสารหลักฐาน"
+                    }}
+                  </div>
+                  <div class="col-12"><q-separator /></div>
+
+                  <div
+                    v-if="!isReadonly && formData.id !== ''"
+                    class="col-12 q-pa-sm row"
+                  >
+                    <q-file
+                      for="inputFiles"
+                      class="col-12"
+                      outlined
+                      dense
+                      v-model="formData.documentFile"
+                      @added="fileUploadDoc"
+                      label="ไฟล์เอกสารหลักฐาน"
+                      hide-bottom-space
+                      lazy-rules
+                      accept=".pdf,.xlsx,.docx,.png,.jpg"
+                      clearable
+                    >
+                      <template v-slot:prepend>
+                        <q-icon name="attach_file" color="primary" />
+                      </template>
+                      <template v-slot:after>
+                        <q-btn
+                        size="14px"
                         flat
                         round
                         dense
                         color="add"
-                        class="q-ml-sm"
-                        @click="toggleModal"
-                        icon="mdi-plus"
-                      >
-                        <q-tooltip>เพิ่มผู้ถูกร้องเรียน</q-tooltip>
-                      </q-btn>
-                    </div>
-                    <div class="col-12"><q-separator /></div>
+                        icon="mdi-upload"
+                        @click="upLoadFileDoc()"
+                        ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn>
+                      </template>
+                    </q-file>
 
-                    <div class="col-xs-12 q-pa-sm">
-                      <d-table
-                        ref="table"
-                        :columns="mainStore.columnsRespondent"
-                        :rows="mainStore.rowsAdd"
-                        row-key="idcard"
-                        flat
-                        bordered
-                        :paging="true"
-                        dense
-                        class="custom-header-table"
-                        :visible-columns="mainStore.visibleColumnsRespondent"
-                      >
-                        <template v-slot:header="props">
-                          <q-tr :props="props">
-                            <q-th auto-width></q-th>
-                            <q-th
-                              v-for="col in props.cols"
-                              :key="col.name"
-                              :props="props"
-                              style="color: #000000; font-weight: 500"
-                            >
-                              <span class="text-weight-medium">{{
-                                col.label
-                              }}</span>
-                            </q-th>
-                            <q-th auto-width></q-th>
-                          </q-tr>
-                        </template>
-                        <template v-slot:body="props">
-                          <q-tr :props="props" class="cursor-pointer">
-                            <td>
-                              <q-btn
-                                dense
-                                flat
-                                round
-                                color="info"
-                                icon="info"
-                                @click="onclickViewinfo(props.row.personId)"
-                              >
-                                <q-tooltip>ดูข้อมูลในทะเบียนประวัติ</q-tooltip>
-                              </q-btn>
-                            </td>
-                            <q-td
-                              v-for="col in props.cols"
-                              :key="col.name"
-                              :props="props"
-                            >
-                              <div v-if="col.name == 'no'">
-                                {{ props.rowIndex + 1 }}
-                              </div>
-                              <div
-                                v-else-if="col.name === 'organization'"
-                                class="table_ellipsis"
-                              >
-                                {{ props.row.organization }}
-                              </div>
-                              <div v-else-if="col.name === 'salary'">
-                                {{ props.row.salary.toLocaleString() }}
-                              </div>
-                              <div v-else>
-                                {{ col.value }}
-                              </div>
-                            </q-td>
-                            <q-td auto-width>
-                              <q-btn
-                                v-if="!isReadonly"
-                                size="12px"
-                                flat
-                                round
-                                dense
-                                color="red"
-                                class="q-ml-sm"
-                                icon="mdi-delete-outline"
-                                @click="deletePerson(props.row.personId)"
-                                ><q-tooltip>ลบผู้ถูกร้องเรียน</q-tooltip></q-btn
-                              >
-                            </q-td>
-                          </q-tr>
-                        </template>
-                      </d-table>
-                    </div>
-                  </q-card>
-                </div>
+                    <!-- <div class="col-1 self-center" v-if="formData.documentFile"></div> -->
+                  </div>
 
-                <div class="col-xs-12 col-sm-12" id="title">
-                  <q-input
-                    for="inputTopicComplaint"
-                    ref="titleRef"
-                    dense
-                    :class="inputEdit(isReadonly)"
-                    outlined
-                    :readonly="isReadonly"
-                    hide-bottom-space
-                    v-model="formData.title"
-                    :rules="[(val) => !!val || 'กรุณากรอกเรื่องร้องเรียน']"
-                    lazy-rules
-                    label="เรื่องร้องเรียน"
-                    type="textarea"
-                    rows="5"
-                    @update:model-value="changeFormData()"
-                  />
-                </div>
+                  <div v-if="fileList.length > 0" class="col-xs-12 q-pa-sm row">
+                    <q-list
+                      v-for="data in fileList"
+                      :key="data.id"
+                      class="full-width"
+                      bordered
+                      separator
+                    >
+                      <q-item clickable v-ripple>
+                        <q-item-section>{{ data.fileName }}</q-item-section>
+                        <q-space />
+                        <q-btn
+                          size="12px"
+                          flat
+                          round
+                          dense
+                          color="blue"
+                          icon="mdi-download"
+                          @click="downloadFile(data.pathName)"
+                          ><q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
+                        >
+                        <q-btn
+                          v-if="!isReadonly"
+                          size="12px"
+                          flat
+                          round
+                          dense
+                          color="red"
+                          class="q-ml-sm"
+                          icon="mdi-delete-outline"
+                          @click="deleteFile(data.id)"
+                          ><q-tooltip>ลบไฟล์</q-tooltip></q-btn
+                        >
+                      </q-item>
+                    </q-list>
+                  </div>
 
-                <div class="col-xs-12 col-sm-12" id="description">
-                  <q-input
-                    :class="inputEdit(isReadonly)"
-                    for="inputDetail"
-                    ref="descriptionRef"
-                    dense
-                    outlined
-                    :readonly="isReadonly"
-                    hide-bottom-space
-                    v-model="formData.description"
-                    label="รายละเอียดเรื่องร้องเรียน"
-                    type="textarea"
-                    rows="5"
-                    @update:model-value="changeFormData()"
-                  />
-                </div>
-
-                <div class="col-xs-12 col-sm-3" id="dateReceived">
-                  <datepicker
-                    menu-class-name="modalfix"
-                    v-model="formData.dateReceived"
-                    :locale="'th'"
-                    autoApply
-                    borderless
-                    :readonly="isReadonly"
-                    :enableTimePicker="false"
-                    week-start="0"
-                    @update:model-value="changeFormData()"
-                  >
-                    <template #year="{ year }">
-                      {{ year + 543 }}
-                    </template>
-                    <template #year-overlay-value="{ value }">
-                      {{ parseInt(value + 543) }}
-                    </template>
-                    <template #trigger>
-                      <q-input
-                        for="inputDatereceive"
-                        ref="dateReceivedRef"
-                        outlined
-                        dense
-                        :class="inputEdit(isReadonly)"
-                        :readonly="isReadonly"
-                        hide-bottom-space
-                        :model-value="
-                          formData.dateReceived != null
-                            ? date2Thai(formData.dateReceived)
-                            : null
-                        "
-                        label="วันที่รับเรื่อง"
-                        :rules="[
-                          (val) => !!val || `${'กรุณาเลือกวันที่รับเรื่อง'}`,
-                        ]"
-                        lazy-rules
-                      >
-                        <template v-slot:prepend>
-                          <q-icon
-                            name="event"
-                            class="cursor-pointer"
-                            style="color: var(--q-primary)"
-                          >
-                          </q-icon>
-                        </template>
-                      </q-input>
-                    </template>
-                  </datepicker>
-                </div>
-
-                <div class="col-xs-12 col-sm-3" id="levelConsideration">
-                  <q-select
-                    :class="inputEdit(isReadonly)"
-                    for="selectConsiderationLevel"
-                    ref="levelConsiderationRef"
-                    dense
-                    outlined
-                    :readonly="isReadonly"
-                    v-model="formData.levelConsideration"
-                    :options="complainstStore.levelConsiderationtOptions"
-                    label="ระดับการพิจารณา"
-                    option-value="id"
-                    option-label="name"
-                    emit-value
-                    clearable
-                    hide-bottom-space
-                    map-options
-                    @update:model-value="
-                      selectLevel(formData.levelConsideration);
-                      changeFormData();
-                    "
-                  />
-                </div>
-
-                <div class="col-xs-12 col-sm-3" id="dateConsideration">
-                  <datepicker
-                    menu-class-name="modalfix"
-                    v-model="formData.dateConsideration"
-                    @update:model-value="changeFormData()"
-                    :locale="'th'"
-                    :readonly="isReadonly"
-                    autoApply
-                    borderless
-                    :enableTimePicker="false"
-                    week-start="0"
-                  >
-                    <template #year="{ year }">
-                      {{ year + 543 }}
-                    </template>
-                    <template #year-overlay-value="{ value }">
-                      {{ parseInt(value + 543) }}
-                    </template>
-                    <template #trigger>
-                      <q-input
-                        for="inputDateconsideration"
-                        ref="dateConsiderationRef"
-                        outlined
-                        :class="inputEdit(isReadonly)"
-                        dense
-                        :model-value="
-                          formData.dateConsideration != null
-                            ? date2Thai(formData.dateConsideration)
-                            : null
-                        "
-                        :readonly="isReadonly"
-                        label="วันที่กำหนดพิจารณา"
-                        hide-bottom-space
-                      >
-                        <template v-slot:prepend>
-                          <q-icon
-                            name="event"
-                            class="cursor-pointer"
-                            style="color: var(--q-primary)"
-                          >
-                          </q-icon>
-                        </template>
-                        <template v-if="formData.dateConsideration && !isReadonly" v-slot:append>
-                          <q-icon
-                            name="cancel"
-                            @click.stop.prevent="formData.dateConsideration = null"
-                            class="cursor-pointer"
-                          />
-                        </template>
-                      </q-input>
-                    </template>
-                  </datepicker>
-                </div>
-
-                <div class="col-xs-12 col-sm-3" id="offenseDetails">
-                  <q-select
-                    :class="inputEdit(isReadonly)"
-                    for="selectOffenseDescription"
-                    ref="offenseDetailsRef"
-                    dense
-                    outlined
-                    :readonly="isReadonly"
-                    v-model="formData.offenseDetails"
-                    :options="mainStore.offenseDetailstOptions"
-                    label="ลักษณะความผิด"
-                    option-value="id"
-                    option-label="name"
-                    emit-value
-                    hide-bottom-space
-                    map-options
-                    clearable
-                    @update:model-value="changeFormData()"
-                  />
-                </div>
-
-                <div class="col-xs-12 col-sm-3" id="dateNotification">
-                  <datepicker
-                    menu-class-name="modalfix"
-                    v-model="formData.dateNotification"
-                    :locale="'th'"
-                    autoApply
-                    :readonly="isReadonly"
-                    borderless
-                    :enableTimePicker="false"
-                    week-start="0"
-                    @update:model-value="changeFormData()"
-                  >
-                    <template #year="{ year }">
-                      {{ year + 543 }}
-                    </template>
-                    <template #year-overlay-value="{ value }">
-                      {{ parseInt(value + 543) }}
-                    </template>
-                    <template #trigger>
-                      <q-input
-                        for="inputDatewarn"
-                        ref="dateNotificationRef"
-                        outlined
-                        :class="inputEdit(isReadonly)"
-                        dense
-                        :readonly="isReadonly"
-                        hide-bottom-space
-                        :model-value="
-                          formData.dateNotification != null
-                            ? date2Thai(formData.dateNotification)
-                            : null
-                        "
-                        label="วันที่แจ้งเตือนล่วงหน้า"
-                      >
-                        <template v-slot:prepend>
-                          <q-icon
-                            name="event"
-                            class="cursor-pointer"
-                            style="color: var(--q-primary)"
-                          >
-                          </q-icon>
-                        </template>
-                        <template v-if="formData.dateNotification && !isReadonly" v-slot:append>
-                          <q-icon
-                            name="cancel"
-                            @click.stop.prevent="formData.dateNotification = null"
-                            class="cursor-pointer"
-                          />
-                        </template>
-                        
-                      </q-input>
-                    </template>
-                  </datepicker>
-                </div>
-
-                <div class="col-xs-12 col-sm-3" id="complaintFrom">
-                  <q-select
-                    :class="inputEdit(isReadonly)"
-                    for="selectReceivecomplaints"
-                    ref="complaintFromRef"
-                    dense
-                    :readonly="isReadonly"
-                    outlined
-                    v-model="formData.complaintFrom"
-                    :options="channelOptions"
-                    label="รับเรื่องร้องเรียน"
-                    option-value="id"
-                    option-label="name"
-                    hide-bottom-space
-                    emit-value
-                    clearable
-                    map-options
-                    @update:model-value="changeFormData()"
-                  />
-                </div>
-
-                <div class="col-xs-12 col-sm-12" id="appellant">
-                  <q-input
-                    :class="inputEdit(isReadonly)"
-                    for="inputPetitioner"
-                    ref="appellantRef"
-                    dense
-                    outlined
-                    v-model="formData.appellant"
-                    :readonly="isReadonly"
-                    label="ผู้ร้องเรียน"
-                    hide-bottom-space
-                    type="textarea"
-                    rows="5"
-                    @update:model-value="changeFormData()"
-                  />
-                </div>
-                <div class="col-xs-12 col-sm-12">
-                  <q-input
-                    :class="inputEdit(isReadonly)"
-                    :readonly="isReadonly"
-                    for="result"
-                    ref="resultRef"
-                    dense
-                    outlined
-                    hide-bottom-space
-                    v-model="formData.result"
-                    label="ผลการตรวจสอบเรื่องร้องเรียน"
-                    type="textarea"
-                    rows="5"
-                    @update:model-value="changeFormData()"
-                  />
-                </div>
+                  <div class="col-12 q-pa-sm" v-else>
+                    <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
+                  </div>
+                </q-card>
               </div>
             </div>
-          </q-card>
+          </div>
         </div>
 
-        <q-separator />
+        <div class="col-12 "><q-separator /></div>
         <div class="row col-12 q-pa-sm" v-if="!isReadonly">
           <q-space />
           <q-btn
@@ -897,107 +997,10 @@ onMounted(() => {
             ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
           >
         </div>
-      </form>
-    </div>
+      </div>
+    </form>
 
-    <!-- อัพโหลดไฟล์ -->
-    <div class="col-sm-12 col-md-3">
-      <q-card flat class="q-pa-md" bordered>
-        <div class="col-12 row q-col-gutter-md">
-          <div class="row col-12">
-            <q-card
-              bordered
-              class="row col-12"
-              style="border: 1px solid #d6dee1"
-            >
-              <div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
-                {{
-                  !isReadonly ? "อัปโหลดไฟล์เอกสารหลักฐาน" : "ไฟล์เอกสารหลักฐาน"
-                }}
-              </div>
-              <div class="col-12"><q-separator /></div>
-
-              <div
-                v-if="!isReadonly && formData.id !== ''"
-                class="col-12 q-pa-sm row"
-              >
-                <q-file
-                  for="inputFiles"
-                  class="col-11"
-                  outlined
-                  dense
-                  v-model="formData.documentFile"
-                  @added="fileUploadDoc"
-                  label="ไฟล์เอกสารหลักฐาน"
-                  hide-bottom-space
-                  lazy-rules
-                  accept=".pdf,.xlsx,.docx,.png,.jpg"
-                  clearable
-                >
-                  <template v-slot:prepend>
-                    <q-icon name="attach_file" color="primary" />
-                  </template>
-                </q-file>
-
-                <div class="col-1 self-center" v-if="formData.documentFile">
-                  <q-btn
-                    size="14px"
-                    flat
-                    round
-                    dense
-                    color="add"
-                    icon="mdi-upload"
-                    @click="upLoadFileDoc()"
-                    ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-                  >
-                </div>
-              </div>
-
-              <div v-if="fileList.length > 0" class="col-xs-12 q-pa-sm row">
-                <q-list
-                  v-for="data in fileList"
-                  :key="data.id"
-                  class="full-width"
-                  bordered
-                  separator
-                >
-                  <q-item clickable v-ripple>
-                    <q-item-section>{{ data.fileName }}</q-item-section>
-                    <q-space />
-                    <q-btn
-                      size="12px"
-                      flat
-                      round
-                      dense
-                      color="blue"
-                      icon="mdi-download"
-                      @click="downloadFile(data.pathName)"
-                      ><q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
-                    >
-                    <q-btn
-                      v-if="!isReadonly"
-                      size="12px"
-                      flat
-                      round
-                      dense
-                      color="red"
-                      class="q-ml-sm"
-                      icon="mdi-delete-outline"
-                      @click="deleteFile(data.id)"
-                      ><q-tooltip>ลบไฟล์</q-tooltip></q-btn
-                    >
-                  </q-item>
-                </q-list>
-              </div>
-
-              <div class="col-12 q-pa-sm" v-else>
-                <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
-              </div>
-            </q-card>
-          </div>
-        </div>
-      </q-card>
-    </div>
+   
   </div>
 
   <!-- Popup ผู้ถูกร้องเรียน -->
diff --git a/src/modules/11_discipline/components/2_InvestigateFacts/AddPage.vue b/src/modules/11_discipline/components/2_InvestigateFacts/AddPage.vue
index f37aa616a..aa5cbe6d9 100644
--- a/src/modules/11_discipline/components/2_InvestigateFacts/AddPage.vue
+++ b/src/modules/11_discipline/components/2_InvestigateFacts/AddPage.vue
@@ -27,6 +27,6 @@ async function onSubmit(){
       เพิ่มรายการสืบสวนข้อเท็จจริง
     </div>
 
-    <Form :on-submit="onSubmit" />
+    <q-card bordered><Form :on-submit="onSubmit" /></q-card>
   </div>
 </template>
diff --git a/src/modules/11_discipline/components/2_InvestigateFacts/EditPage.vue b/src/modules/11_discipline/components/2_InvestigateFacts/EditPage.vue
index a0a9636ce..2c5e84200 100644
--- a/src/modules/11_discipline/components/2_InvestigateFacts/EditPage.vue
+++ b/src/modules/11_discipline/components/2_InvestigateFacts/EditPage.vue
@@ -405,7 +405,7 @@ watch(
       </div>
     </div>
 
-    <q-card flat class="col-12">
+    <q-card bordered flat class="col-12">
       <q-tabs
         v-model="store.tabMenu"
         dense
diff --git a/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue b/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue
index c10ac1e69..52fabe4dd 100644
--- a/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue
+++ b/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue
@@ -643,22 +643,23 @@ onMounted(async () => {
 </script>
 <template>
   <div class="row col-12 bg-white">
-    <div class="col-sm-12 col-md-9">
-      <div v-if="isSave" class="q-pa-sm q-gutter-sm">
-        <q-banner
-          inline-actions
-          bordered
-          class="bg-red-1 text-red border-orange"
-        >
-          <q-icon name="mdi-information-outline" size="20px" /> แจ้งเตือน
-          ยังไม่ได้บันทึกข้อมูล
-        </q-banner>
-      </div>
-
-      <form @submit.prevent="validateForm">
-        <div class="col-12">
-          <q-card bordered>
-            <div class="col-12 row q-pa-md q-col-gutter-md">
+    <div v-if="isSave" class=" col-12">
+      <q-banner
+        inline-actions
+        bordered
+        rounded
+        class="bg-red-1 text-red border-orange q-ma-md"
+      >
+        <q-icon name="mdi-information-outline" size="20px" /> แจ้งเตือน
+        ยังไม่ได้บันทึกข้อมูล
+      </q-banner>
+      <q-separator />
+    </div>
+    <form @submit.prevent="validateForm">
+      <div class="col-12 row">
+        <div class="col-sm-12 col-md-9 row no-wrap">
+          <div class="col-12 row q-pa-md">
+            <div class="row q-col-gutter-md">
               <div class="col-xs-12 row q-col-gutter-md">
                 <div class="col-xs-12 col-sm-3" id="respondentType">
                   <q-select
@@ -1365,215 +1366,214 @@ onMounted(async () => {
                   </div>
                 </q-card>
               </div>
-
-              <q-separator />
-              <div v-if="!isReadonly" class="row col-12 q-pa-sm">
-                <q-space />
-                <q-btn
-                  id="onSubmit"
-                  type="submit"
-                  label="บันทึก"
-                  color="secondary"
-                  ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
-                >
-              </div>
             </div>
-          </q-card>
+          </div>
+          <div class="col-12 row"><q-separator vertical /></div> 
         </div>
-      </form>
-    </div>
+        <div class="col-xs-12 col-sm-12 col-md-3">
+          <div class="q-col-gutter-md row q-pa-md">
+            <div class="col-xs-12">
+              <q-card bordered class="row col-12" style="border: 1px solid #d6dee1">
+                <div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
+                  อัปโหลดไฟล์เอกสารที่เกี่ยวข้องกับการสืบสวน
+                </div>
+                <div class="col-12"><q-separator /></div>
 
-    <!-- อัพโหลดไฟล์ -->
-    <div class="col-xs-12 col-sm-12 col-md-3">
-      <q-card flat bordered class="q-pa-md q-mb-sm">
-        <div class="col-xs-12 q-mb-sm">
-          <q-card bordered class="row col-12" style="border: 1px solid #d6dee1">
-            <div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
-              อัปโหลดไฟล์เอกสารที่เกี่ยวข้องกับการสืบสวน
-            </div>
-            <div class="col-12"><q-separator /></div>
-
-            <div
-              v-if="!isReadonly && formData.id !== ''"
-              class="col-12 q-pa-sm row"
-            >
-              <q-file
-                class="col-11"
-                for="#evidenceFiles"
-                outlined
-                dense
-                v-model="formData.evidenceFiles"
-                label="เอกสารที่เกี่ยวข้องกับการสืบสวน"
-                hide-bottom-space
-              >
-                <template v-slot:prepend>
-                  <q-icon name="attach_file" color="primary" />
-                </template>
-              </q-file>
-              <div class="col-1 self-center">
-                <q-btn
-                  v-if="formData.evidenceFiles"
-                  size="14px"
-                  flat
-                  round
-                  dense
-                  color="add"
-                  icon="mdi-upload"
-                  @click="uploadFileRelevant"
-                  ><q-tooltip>อัปโหลดเอกสาร</q-tooltip></q-btn
+                <div
+                  v-if="!isReadonly && formData.id !== ''"
+                  class="col-12 q-pa-sm row"
                 >
-              </div>
-            </div>
-
-            <div
-              v-if="props.data.disciplineInvestigateRelevantDocs.length > 0"
-              class="col-xs-12 q-pa-sm row"
-            >
-              <q-list
-                v-for="file in props.data.disciplineInvestigateRelevantDocs"
-                :key="file.id"
-                class="full-width"
-                bordered
-                separator
-              >
-                <q-item clickable v-ripple>
-                  <q-item-section>{{ file.fileName }}</q-item-section>
-                  <q-item-section avatar>
-                    <div class="row">
-                      <div>
+                  <q-file
+                    class="col-11"
+                    for="#evidenceFiles"
+                    outlined
+                    dense
+                    v-model="formData.evidenceFiles"
+                    label="เอกสารที่เกี่ยวข้องกับการสืบสวน"
+                    hide-bottom-space
+                  >
+                    <template v-slot:prepend>
+                      <q-icon name="attach_file" color="primary" />
+                    </template>
+                    <template v-slot:after>
                         <q-btn
-                          dense
+                          v-if="formData.evidenceFiles"
+                          size="14px"
                           flat
                           round
-                          size="12px"
-                          color="blue"
-                          icon="mdi-download-outline"
-                          @click="downloadFileRelevant(file.pathName)"
-                        >
-                          <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
-                        </q-btn>
-                      </div>
-                      <div>
-                        <q-btn
-                          v-if="!isReadonly"
                           dense
-                          flat
-                          round
-                          size="12px"
-                          color="red"
-                          icon="mdi-delete-outline"
-                          @click="deleteFileRelevant(file.id)"
-                          ><q-tooltip>ลบไฟล์</q-tooltip></q-btn
-                        >
-                      </div>
-                    </div>
-                  </q-item-section>
-                </q-item>
-              </q-list>
-            </div>
+                          color="add"
+                          icon="mdi-upload"
+                          @click="uploadFileRelevant"
+                          ><q-tooltip>อัปโหลดเอกสาร</q-tooltip></q-btn>
+                    </template>
+                  </q-file>
+                </div>
 
-            <div class="col-12 q-pa-sm" v-else>
-              <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
-            </div>
-          </q-card>
-        </div>
-        <div class="col-xs-12">
-          <q-card bordered class="row col-12" style="border: 1px solid #d6dee1">
-            <div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
-              อัปโหลดไฟล์เอกสารหลักฐาน
-            </div>
-            <div class="col-12"><q-separator /></div>
-            <div
-              v-if="!isReadonly && formData.id !== ''"
-              class="col-12 q-pa-sm row"
-            >
-              <q-file
-                for="inputFiles"
-                class="col-11"
-                outlined
-                dense
-                v-model="formData.documentFile"
-                @added="uploadFile"
-                label="ไฟล์เอกสารหลักฐาน"
-                accept=".pdf,.xlsx,.doc"
-                clearable
-              >
-                <template v-slot:prepend>
-                  <q-icon name="attach_file" color="primary" />
-                </template>
-              </q-file>
-
-              <div class="col-1 self-center">
-                <q-btn
-                  v-if="formData.documentFile"
-                  size="14px"
-                  flat
-                  round
-                  dense
-                  color="add"
-                  icon="mdi-upload"
-                  @click="uploadFile"
-                  ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                <div
+                  v-if="props.data.disciplineInvestigateRelevantDocs.length > 0"
+                  class="col-xs-12 q-pa-sm row"
                 >
-              </div>
-            </div>
+                  <q-list
+                    v-for="file in props.data.disciplineInvestigateRelevantDocs"
+                    :key="file.id"
+                    class="full-width"
+                    bordered
+                    separator
+                  >
+                    <q-item clickable v-ripple>
+                      <q-item-section>{{ file.fileName }}</q-item-section>
+                      <q-item-section avatar>
+                        <div class="row">
+                          <div>
+                            <q-btn
+                              dense
+                              flat
+                              round
+                              size="12px"
+                              color="blue"
+                              icon="mdi-download-outline"
+                              @click="downloadFileRelevant(file.pathName)"
+                            >
+                              <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+                            </q-btn>
+                          </div>
+                          <div>
+                            <q-btn
+                              v-if="!isReadonly"
+                              dense
+                              flat
+                              round
+                              size="12px"
+                              color="red"
+                              icon="mdi-delete-outline"
+                              @click="deleteFileRelevant(file.id)"
+                              ><q-tooltip>ลบไฟล์</q-tooltip></q-btn
+                            >
+                          </div>
+                        </div>
+                      </q-item-section>
+                    </q-item>
+                  </q-list>
+                </div>
 
-            <div
-              v-if="props.data.disciplineInvestigateDocs.length > 0"
-              class="col-xs-12 q-pa-sm row"
-            >
-              <q-list
-                v-for="file in props.data.disciplineInvestigateDocs"
-                :key="file.id"
-                class="full-width"
-                bordered
-                separator
-              >
-                <q-item clickable v-ripple>
-                  <q-item-section>{{ file.fileName }}</q-item-section>
-                  <q-item-section avatar>
-                    <div class="row">
-                      <div>
-                        <q-btn
-                          dense
-                          flat
-                          round
-                          size="12px"
-                          color="blue"
-                          icon="mdi-download-outline"
-                          @click="downloadFile(file.pathName)"
-                        >
-                          <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
-                        </q-btn>
-                      </div>
-                      <div>
-                        <q-btn
-                          v-if="!isReadonly"
-                          dense
-                          flat
-                          round
-                          size="12px"
-                          color="red"
-                          icon="mdi-delete-outline"
-                          @click="deleteFile(file.id)"
-                          ><q-tooltip>ลบไฟล์</q-tooltip></q-btn
-                        >
-                      </div>
-                    </div>
-                  </q-item-section>
-                </q-item>
-              </q-list>
+                <div class="col-12 q-pa-sm" v-else>
+                  <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
+                </div>
+              </q-card>
             </div>
+            <div class="col-xs-12">
+              <q-card bordered class="row col-12" style="border: 1px solid #d6dee1">
+                <div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
+                  อัปโหลดไฟล์เอกสารหลักฐาน
+                </div>
+                <div class="col-12"><q-separator /></div>
+                <div
+                  v-if="!isReadonly && formData.id !== ''"
+                  class="col-12 q-pa-sm row"
+                >
+                  <q-file
+                    for="inputFiles"
+                    class="col-11"
+                    outlined
+                    dense
+                    v-model="formData.documentFile"
+                    @added="uploadFile"
+                    label="ไฟล์เอกสารหลักฐาน"
+                    accept=".pdf,.xlsx,.doc"
+                    clearable
+                  >
+                    <template v-slot:prepend>
+                      <q-icon name="attach_file" color="primary" />
+                    </template>
+                  </q-file>
 
-            <div class="col-12 q-pa-sm" v-else>
-              <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
+                  <div class="col-1 self-center">
+                    <q-btn
+                      v-if="formData.documentFile"
+                      size="14px"
+                      flat
+                      round
+                      dense
+                      color="add"
+                      icon="mdi-upload"
+                      @click="uploadFile"
+                      ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                    >
+                  </div>
+                </div>
+
+                <div
+                  v-if="props.data.disciplineInvestigateDocs.length > 0"
+                  class="col-xs-12 q-pa-sm row"
+                >
+                  <q-list
+                    v-for="file in props.data.disciplineInvestigateDocs"
+                    :key="file.id"
+                    class="full-width"
+                    bordered
+                    separator
+                  >
+                    <q-item clickable v-ripple>
+                      <q-item-section>{{ file.fileName }}</q-item-section>
+                      <q-item-section avatar>
+                        <div class="row">
+                          <div>
+                            <q-btn
+                              dense
+                              flat
+                              round
+                              size="12px"
+                              color="blue"
+                              icon="mdi-download-outline"
+                              @click="downloadFile(file.pathName)"
+                            >
+                              <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+                            </q-btn>
+                          </div>
+                          <div>
+                            <q-btn
+                              v-if="!isReadonly"
+                              dense
+                              flat
+                              round
+                              size="12px"
+                              color="red"
+                              icon="mdi-delete-outline"
+                              @click="deleteFile(file.id)"
+                              ><q-tooltip>ลบไฟล์</q-tooltip></q-btn
+                            >
+                          </div>
+                        </div>
+                      </q-item-section>
+                    </q-item>
+                  </q-list>
+                </div>
+
+                <div class="col-12 q-pa-sm" v-else>
+                  <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
+                </div>
+              </q-card>
             </div>
-          </q-card>
+          </div>
         </div>
-      </q-card>
-    </div>
+        <div class="col-12 "><q-separator /></div>
+        <div class="row col-12 q-pa-sm" v-if="!isReadonly">
+          <q-space />
+          <q-btn
+            id="onSubmit"
+            type="submit"
+            label="บันทึก"
+            color="secondary"
+            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+          >
+        </div>
+      </div>
+    </form>
   </div>
 
+    <!-- อัพโหลดไฟล์ -->
+    
   <DialogDuty
     :modal="modalEditDirector"
     :close-popup="closeEditDirector"
diff --git a/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue b/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue
index 1c1527c3d..6e32a2f55 100644
--- a/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue
+++ b/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue
@@ -109,7 +109,7 @@ onMounted(async () => {
   </div>
   <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
     <div class="row col-12 q-col-gutter-sm q-mb-sm">
-      <div class="col-2">
+      <div class="col-xs-12 col-sm-4 col-md-3">
         <q-select
           v-model="statusFilter"
           label="สถานะ"
diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/AddPage.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/AddPage.vue
index 2bb23ad22..44f74b8d5 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/AddPage.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/AddPage.vue
@@ -25,6 +25,6 @@ const onSubmit = async () => {
       เพิ่มการสอบสวนความผิดทางวินัย
     </div>
 
-    <Form :on-submit="onSubmit" />
+    <q-card bordered><Form :on-submit="onSubmit" /></q-card>
   </div>
 </template>
diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/EditPage.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/EditPage.vue
index 6ddd4ec56..251fe61fd 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/EditPage.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/EditPage.vue
@@ -459,7 +459,7 @@ onMounted(async () => {
       </div>
     </div>
 
-    <q-card flat class="col-12">
+    <q-card bordered flat class="col-12">
       <q-tabs
         v-model="store.tabMenu"
         dense
diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue
index be04adf4c..f691cf4d4 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue
@@ -684,613 +684,334 @@ onMounted(async () => {
 </script>
 <template>
   <div class="row col-12 bg-white">
-    <div class="col-sm-12 col-md-9">
-      <div v-if="isSave" class="q-pa-sm q-gutter-sm">
-        <q-banner
-          inline-actions
-          bordered
-          class="bg-red-1 text-red border-orange"
-        >
-          <q-icon name="mdi-information-outline" size="20px" /> แจ้งเตือน
-          ยังไม่ได้บันทึกข้อมูล
-        </q-banner>
-      </div>
-
-      <form @submit.prevent="validateForm">
-        <div class="col-12">
-          <q-card bordered>
-            <div class="col-12 row q-pa-md">
-              <div class="col-12 row q-col-gutter-md">
-                <div class="row col-12 q-col-gutter-x-md">
-                  <div class="col-xs-12 col-sm-3">
-                    <q-select
-                      :class="inputEdit(isReadonly)"
-                      :readonly="isReadonly"
-                      for="SelectrespondentType"
-                      v-model="formData.respondentType"
-                      ref="respondentTypeRef"
-                      dense
-                      outlined
-                      label="ผู้ถูกร้องเรียน"
-                      option-value="id"
-                      option-label="name"
-                      emit-value
-                      use-input
-                      map-options
-                      hide-bottom-space
-                      :options="complainstStore.complainantoptions"
-                      @update:model-value="
-                        selectComplainant(formData.respondentType);
-                        changeFormData();
-                      "
-                      @filter="(inputValue: any,
-                doneFn: Function) => filterSelector(inputValue, doneFn, 'filterrespondentType'
-                )"
-                    >
-                      <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-3"
-                    v-if="formData.respondentType === 'ORGANIZATION'"
-                    id="organizationId"
-                  >
-                    <q-select
-                      :readonly="isReadonly"
-                      for="inputOffice"
-                      name="organizationId"
-                      ref="organizationIdRef"
-                      dense
-                      hide-bottom-space
-                      outlined
-                      option-label="name"
-                      option-value="id"
-                      emit-value
-                      map-options
-                      v-model="formData.organizationId"
-                      :options="organizationOption"
-                      label="เลือกสำนักงาน"
-                      @update:model-value="changeFormData()"
-                    />
-                  </div>
-                  <div
-                    class="col-xs-12 col-sm-4"
-                    v-if="
-                      route.name === 'disciplineDisciplinaryEdit' &&
-                      props.data &&
-                      props.data.status === 'NEW' &&
-                      mainStore.rowsCheck.length > 0
+    <div v-if="isSave" class=" col-12">
+      <q-banner
+        inline-actions
+        bordered
+        rounded
+        class="bg-red-1 text-red border-orange q-ma-md"
+      >
+        <q-icon name="mdi-information-outline" size="20px" /> แจ้งเตือน
+        ยังไม่ได้บันทึกข้อมูล
+      </q-banner>
+      <q-separator />
+    </div>
+    <form @submit.prevent="validateForm">
+      <div class="col-12 row">
+        <div class="col-sm-12 col-md-9 row no-wrap">
+          
+          <div class="col-12 row q-pa-md">
+            <div class="row q-col-gutter-md">
+              <div class="row col-12 q-col-gutter-x-md">
+                <div class="col-xs-12 col-sm-4">
+                  <q-select
+                    :class="inputEdit(isReadonly)"
+                    :readonly="isReadonly"
+                    for="SelectrespondentType"
+                    v-model="formData.respondentType"
+                    ref="respondentTypeRef"
+                    dense
+                    outlined
+                    label="ผู้ถูกร้องเรียน"
+                    option-value="id"
+                    option-label="name"
+                    emit-value
+                    use-input
+                    map-options
+                    hide-bottom-space
+                    :options="complainstStore.complainantoptions"
+                    @update:model-value="
+                      selectComplainant(formData.respondentType);
+                      changeFormData();
                     "
+                    @filter="(inputValue: any,
+              doneFn: Function) => filterSelector(inputValue, doneFn, 'filterrespondentType'
+              )"
                   >
-                    <q-btn
-                      class="q-pa-sm"
-                      color="orange"
-                      label="ส่งรายชื่อไปออกคำสั่งยุติเรื่อง"
-                      @click="openModal"
-                    />
-                  </div>
+                    <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-4"
+                  v-if="formData.respondentType === 'ORGANIZATION'"
+                  id="organizationId"
+                >
+                  <q-select
+                    :readonly="isReadonly"
+                    for="inputOffice"
+                    name="organizationId"
+                    ref="organizationIdRef"
+                    dense
+                    hide-bottom-space
+                    outlined
+                    option-label="name"
+                    option-value="id"
+                    emit-value
+                    map-options
+                    v-model="formData.organizationId"
+                    :options="organizationOption"
+                    label="เลือกสำนักงาน"
+                    @update:model-value="changeFormData()"
+                  />
                 </div>
                 <div
-                  class="row col-12"
-                  v-if="formData.respondentType === 'PERSON'"
+                  class="col-xs-12 col-sm-4"
+                  v-if="
+                    route.name === 'disciplineDisciplinaryEdit' &&
+                    props.data &&
+                    props.data.status === 'NEW' &&
+                    mainStore.rowsCheck.length > 0
+                  "
                 >
-                  <q-card
-                    bordered
-                    class="row col-12"
-                    style="border: 1px solid #d6dee1"
-                  >
-                    <div
-                      class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
-                    >
-                      ผู้ถูกร้องเรียน
-                      <q-btn
-                        v-if="!isReadonly"
-                        size="12px"
-                        flat
-                        round
-                        dense
-                        color="add"
-                        class="q-ml-sm"
-                        icon="mdi-plus"
-                        @click="toggleModal"
-                      >
-                        <q-tooltip>เพิ่มผู้ถูกร้องเรียน</q-tooltip>
-                      </q-btn>
-                    </div>
-                    <div class="col-12"><q-separator /></div>
-
-                    <div class="col-xs-12 q-pa-sm">
-                      <d-table
-                        ref="table"
-                        :columns="mainStore.columnsRespondent"
-                        :rows="mainStore.rowsAdd"
-                        row-key="personId"
-                        flat
-                        bordered
-                        :paging="true"
-                        dense
-                        class="custom-header-table"
-                      >
-                        <template v-slot:header="props">
-                          <q-tr :props="props">
-                            <q-th auto-width></q-th>
-                            <q-th
-                              v-for="col in props.cols"
-                              :key="col.name"
-                              :props="props"
-                              style="color: #000000; font-weight: 500"
-                            >
-                              <span class="text-weight-medium">{{
-                                col.label
-                              }}</span>
-                            </q-th>
-                            <q-th auto-width></q-th>
-                          </q-tr>
-                        </template>
-                        <template v-slot:body="props">
-                          <q-tr :props="props" class="cursor-pointer">
-                            <td>
-                              <q-btn
-                                dense
-                                flat
-                                round
-                                color="info"
-                                icon="info"
-                                @click="onclickViewinfo(props.row.personId)"
-                              >
-                                <q-tooltip>ดูข้อมูลในทะเบียนประวัติ</q-tooltip>
-                              </q-btn>
-                            </td>
-                            <q-td
-                              v-for="col in props.cols"
-                              :key="col.name"
-                              :props="props"
-                            >
-                              <div v-if="col.name == 'no'">
-                                {{ props.rowIndex + 1 }}
-                              </div>
-                              <div
-                                v-else-if="col.name === 'organization'"
-                                class="table_ellipsis"
-                              >
-                                {{ props.row.organization }}
-                              </div>
-                              <div v-else-if="col.name === 'salary'">
-                                {{ props.row.salary.toLocaleString() }}
-                              </div>
-                              <div v-else>
-                                {{ col.value }}
-                              </div>
-                            </q-td>
-                            <q-td auto-width>
-                              <q-btn
-                                v-if="!isReadonly && props.row.isAncestorDNA === false"
-                                size="12px"
-                                flat
-                                round
-                                dense
-                                color="red"
-                                class="q-ml-sm"
-                                icon="mdi-delete-outline"
-                                @click="deletePerson(props.row.personId)"
-                                ><q-tooltip>ลบผู้ถูกร้องเรียน</q-tooltip></q-btn
-                              >
-                            </q-td>
-                          </q-tr>
-                        </template>
-                      </d-table>
-                    </div>
-                  </q-card>
+                  <q-btn
+                    class="q-pa-sm"
+                    color="orange"
+                    label="ส่งรายชื่อไปออกคำสั่งยุติเรื่อง"
+                    @click="openModal"
+                  />
                 </div>
-
-                <div class="row col-12 q-col-gutter-x-md">
-                  <datepicker
-                    :readonly="isReadonly"
-                    menu-class-name="modalfix"
-                    for="#dateAllegation"
-                    v-model="formData.disciplinaryDateInvestigation"
-                    class="col-xs-12 col-sm-3"
-                    :locale="'th'"
-                    autoApply
-                    borderless
-                    :enableTimePicker="false"
-                    week-start="0"
-                    @update:model-value="changeFormData()"
+              </div>
+              <div
+                class="row col-12"
+                v-if="formData.respondentType === 'PERSON'"
+              >
+                <q-card
+                  bordered
+                  class="row col-12"
+                  style="border: 1px solid #d6dee1"
+                >
+                  <div
+                    class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
                   >
-                    <template #year="{ year }">
-                      {{ year + 543 }}
-                    </template>
-                    <template #year-overlay-value="{ value }">
-                      {{ parseInt(value + 543) }}
-                    </template>
-                    <template #trigger>
-                      <q-input
-                        :readonly="isReadonly"
-                        outlined
-                        dense
-                        :class="inputEdit(isReadonly)"
-                        hide-bottom-space
-                        :model-value="
-                          formData.disciplinaryDateInvestigation != null
-                            ? date2Thai(formData.disciplinaryDateInvestigation)
-                            : null
-                        "
-                        :label="`${'วันที่มีคำสั่งให้สอบสวน'}`"
-                      >
-                        <template v-slot:prepend>
-                          <q-icon
-                            name="event"
-                            class="cursor-pointer"
-                            style="color: var(--q-primary)"
-                          >
-                          </q-icon>
-                        </template>
-                        <template
-                          v-if="
-                            formData.disciplinaryDateInvestigation &&
-                            isReadonly === false
-                          "
-                          v-slot:append
-                        >
-                          <q-icon
-                            name="cancel"
-                            @click.stop.prevent="
-                              formData.disciplinaryDateInvestigation = null
-                            "
-                            class="cursor-pointer"
-                          />
-                        </template>
-                      </q-input>
-                    </template>
-                  </datepicker>
-
-                  <datepicker
-                    :readonly="isReadonly"
-                    menu-class-name="modalfix"
-                    for="#dateAllegation"
-                    v-model="formData.disciplinaryDateAllegation"
-                    class="col-xs-12 col-sm-3"
-                    :locale="'th'"
-                    autoApply
-                    borderless
-                    :enableTimePicker="false"
-                    week-start="0"
-                    @update:model-value="changeFormData()"
-                  >
-                    <template #year="{ year }">
-                      {{ year + 543 }}
-                    </template>
-                    <template #year-overlay-value="{ value }">
-                      {{ parseInt(value + 543) }}
-                    </template>
-                    <template #trigger>
-                      <q-input
-                        :readonly="isReadonly"
-                        ref="disciplinaryDateAllegationRef"
-                        outlined
-                        :class="inputEdit(isReadonly)"
-                        dense
-                        hide-bottom-space
-                        :model-value="
-                          formData.disciplinaryDateAllegation != null
-                            ? date2Thai(formData.disciplinaryDateAllegation)
-                            : null
-                        "
-                        :label="`${'วันที่รับทราบข้อกล่าวหา'}`"
-                      >
-                        <template v-slot:prepend>
-                          <q-icon
-                            name="event"
-                            class="cursor-pointer"
-                            style="color: var(--q-primary)"
-                          >
-                          </q-icon>
-                        </template>
-                        <template
-                          v-if="
-                            formData.disciplinaryDateAllegation &&
-                            isReadonly === false
-                          "
-                          v-slot:append
-                        >
-                          <q-icon
-                            name="cancel"
-                            @click.stop.prevent="
-                              formData.disciplinaryDateAllegation = null
-                            "
-                            class="cursor-pointer"
-                          />
-                        </template>
-                      </q-input>
-                    </template>
-                  </datepicker>
-                </div>
-
-                <div class="row col-12">
-                  <q-card
-                    bordered
-                    class="col-12"
-                    style="border: 1px solid #d6dee1"
-                  >
-                    <div
-                      class="row col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
+                    ผู้ถูกร้องเรียน
+                    <q-btn
+                      v-if="!isReadonly"
+                      size="12px"
+                      flat
+                      round
+                      dense
+                      color="add"
+                      class="q-ml-sm"
+                      icon="mdi-plus"
+                      @click="toggleModal"
                     >
-                      <div>
-                        วันที่สอบสวน
-                        <q-checkbox
-                          v-if="
-                            formData.disciplinaryExtendHistory.length > 0 &&
-                            !isReadonly
-                          "
-                          :disable="isReadonly"
-                          for="#extendStatus"
-                          size="md"
-                          v-model="extendStatus"
-                          label="ขยายเวลา"
-                          color="primary"
-                          dense
-                          class="text-weight-medium q-ml-sm"
-                          keep-color
-                          @update:model-value="
-                            changeFormData();
-                            resetExtend();
+                      <q-tooltip>เพิ่มผู้ถูกร้องเรียน</q-tooltip>
+                    </q-btn>
+                  </div>
+                  <div class="col-12"><q-separator /></div>
+
+                  <div class="col-xs-12 q-pa-sm">
+                    <d-table
+                      ref="table"
+                      :columns="mainStore.columnsRespondent"
+                      :rows="mainStore.rowsAdd"
+                      row-key="personId"
+                      flat
+                      bordered
+                      :paging="true"
+                      dense
+                      class="custom-header-table"
+                    >
+                      <template v-slot:header="props">
+                        <q-tr :props="props">
+                          <q-th auto-width></q-th>
+                          <q-th
+                            v-for="col in props.cols"
+                            :key="col.name"
+                            :props="props"
+                            style="color: #000000; font-weight: 500"
+                          >
+                            <span class="text-weight-medium">{{
+                              col.label
+                            }}</span>
+                          </q-th>
+                          <q-th auto-width></q-th>
+                        </q-tr>
+                      </template>
+                      <template v-slot:body="props">
+                        <q-tr :props="props" class="cursor-pointer">
+                          <td>
+                            <q-btn
+                              dense
+                              flat
+                              round
+                              color="info"
+                              icon="info"
+                              @click="onclickViewinfo(props.row.personId)"
+                            >
+                              <q-tooltip>ดูข้อมูลในทะเบียนประวัติ</q-tooltip>
+                            </q-btn>
+                          </td>
+                          <q-td
+                            v-for="col in props.cols"
+                            :key="col.name"
+                            :props="props"
+                          >
+                            <div v-if="col.name == 'no'">
+                              {{ props.rowIndex + 1 }}
+                            </div>
+                            <div
+                              v-else-if="col.name === 'organization'"
+                              class="table_ellipsis"
+                            >
+                              {{ props.row.organization }}
+                            </div>
+                            <div v-else-if="col.name === 'salary'">
+                              {{ props.row.salary.toLocaleString() }}
+                            </div>
+                            <div v-else>
+                              {{ col.value }}
+                            </div>
+                          </q-td>
+                          <q-td auto-width>
+                            <q-btn
+                              v-if="!isReadonly && props.row.isAncestorDNA === false"
+                              size="12px"
+                              flat
+                              round
+                              dense
+                              color="red"
+                              class="q-ml-sm"
+                              icon="mdi-delete-outline"
+                              @click="deletePerson(props.row.personId)"
+                              ><q-tooltip>ลบผู้ถูกร้องเรียน</q-tooltip></q-btn
+                            >
+                          </q-td>
+                        </q-tr>
+                      </template>
+                    </d-table>
+                  </div>
+                </q-card>
+              </div>
+
+              <div class="row col-12 q-col-gutter-x-md">
+                <datepicker
+                  :readonly="isReadonly"
+                  menu-class-name="modalfix"
+                  for="#dateAllegation"
+                  v-model="formData.disciplinaryDateInvestigation"
+                  class="col-xs-12 col-sm-3"
+                  :locale="'th'"
+                  autoApply
+                  borderless
+                  :enableTimePicker="false"
+                  week-start="0"
+                  @update:model-value="changeFormData()"
+                >
+                  <template #year="{ year }">
+                    {{ year + 543 }}
+                  </template>
+                  <template #year-overlay-value="{ value }">
+                    {{ parseInt(value + 543) }}
+                  </template>
+                  <template #trigger>
+                    <q-input
+                      :readonly="isReadonly"
+                      outlined
+                      dense
+                      :class="inputEdit(isReadonly)"
+                      hide-bottom-space
+                      :model-value="
+                        formData.disciplinaryDateInvestigation != null
+                          ? date2Thai(formData.disciplinaryDateInvestigation)
+                          : null
+                      "
+                      :label="`${'วันที่มีคำสั่งให้สอบสวน'}`"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          style="color: var(--q-primary)"
+                        >
+                        </q-icon>
+                      </template>
+                      <template
+                        v-if="
+                          formData.disciplinaryDateInvestigation &&
+                          isReadonly === false
+                        "
+                        v-slot:append
+                      >
+                        <q-icon
+                          name="cancel"
+                          @click.stop.prevent="
+                            formData.disciplinaryDateInvestigation = null
                           "
+                          class="cursor-pointer"
                         />
-                      </div>
-                      <q-space style="height: 1px" />
-                      <div>
-                        <q-btn
-                          name="calendar"
-                          round
-                          size="12px"
-                          flat
-                          dense
-                          icon="mdi-calendar-month"
-                          class="self-center items-center"
-                          color="primary"
-                          @click="calendarOpen"
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+
+                <datepicker
+                  :readonly="isReadonly"
+                  menu-class-name="modalfix"
+                  for="#dateAllegation"
+                  v-model="formData.disciplinaryDateAllegation"
+                  class="col-xs-12 col-sm-3"
+                  :locale="'th'"
+                  autoApply
+                  borderless
+                  :enableTimePicker="false"
+                  week-start="0"
+                  @update:model-value="changeFormData()"
+                >
+                  <template #year="{ year }">
+                    {{ year + 543 }}
+                  </template>
+                  <template #year-overlay-value="{ value }">
+                    {{ parseInt(value + 543) }}
+                  </template>
+                  <template #trigger>
+                    <q-input
+                      :readonly="isReadonly"
+                      ref="disciplinaryDateAllegationRef"
+                      outlined
+                      :class="inputEdit(isReadonly)"
+                      dense
+                      hide-bottom-space
+                      :model-value="
+                        formData.disciplinaryDateAllegation != null
+                          ? date2Thai(formData.disciplinaryDateAllegation)
+                          : null
+                      "
+                      :label="`${'วันที่รับทราบข้อกล่าวหา'}`"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          style="color: var(--q-primary)"
                         >
-                          <q-tooltip>ปฏิทิน</q-tooltip>
-                        </q-btn>
-                      </div>
-                    </div>
-                    <div class="col-12"><q-separator /></div>
-                    <div class="q-pa-sm">
-                      <div class="q-col-gutter-sm row col-12">
-                        <div class="col-12">
-                          <div class="row q-col-gutter-sm">
-                            <div v-if="extendStatus" class="col-3">
-                              <q-select
-                                :class="inputEdit(isReadonly)"
-                                :readonly="isReadonly"
-                                for="#daysExtend"
-                                outlined
-                                dense
-                                ref="daysExtendRef"
-                                v-model="formData.daysExtend"
-                                :options="investigateDis.daysExtendOps"
-                                label="จำนวนวันที่ต้องการขยาย"
-                                emit-value
-                                hide-bottom-space
-                                map-options
-                                option-label="name"
-                                option-value="id"
-                                use-input
-                                @update:model-value="calEndDate"
-                                ><template v-slot:no-option>
-                                  <q-item>
-                                    <q-item-section class="text-grey">
-                                      ไม่มีข้อมูล
-                                    </q-item-section>
-                                  </q-item>
-                                </template>
-                                <template
-                                  v-if="formData.daysExtend === 0"
-                                  v-slot:append
-                                >
-                                  <q-icon
-                                    name="cancel"
-                                    @click.stop.prevent="
-                                      formData.daysExtend = 0
-                                    "
-                                    class="cursor-pointer"
-                                  />
-                                </template>
-                              </q-select>
-                            </div>
-
-                            <div v-if="!extendStatus" class="col-3">
-                              <datepicker
-                                menu-class-name="modalfix"
-                                :readonly="
-                                  isReadonly ||
-                                  formData.disciplinaryExtendHistory.length > 0
-                                "
-                                v-model="formData.disciplinaryDateStart"
-                                :locale="'th'"
-                                autoApply
-                                :enableTimePicker="false"
-                                week-start="0"
-                                @update:model-value="changeFormDataDate()"
-                              >
-                                <template #year="{ year }">{{
-                                  year + 543
-                                }}</template>
-                                <template #year-overlay-value="{ value }">{{
-                                  parseInt(value + 543)
-                                }}</template>
-                                <template #trigger>
-                                  <q-input
-                                    for="#date"
-                                    class="full-width cursor-pointer"
-                                    ref="dateRef"
-                                    :class="inputEditExtend(isReadonly)"
-                                    :readonly="
-                                      isReadonly ||
-                                      formData.disciplinaryExtendHistory
-                                        .length > 0
-                                    "
-                                    outlined
-                                    dense
-                                    borderless
-                                    hide-bottom-space
-                                    :model-value="
-                                      formData.disciplinaryDateStart
-                                        ? date2Thai(
-                                            formData.disciplinaryDateStart as Date
-                                          )
-                                        : null
-                                    "
-                                    :label="`${'วันที่เริ่มการสอบสวน'}`"
-                                  >
-                                    <template v-slot:prepend>
-                                      <q-icon
-                                        name="event"
-                                        class="cursor-pointer"
-                                        color="primary"
-                                      >
-                                      </q-icon>
-                                    </template>
-                                    <template
-                                      v-if="
-                                        formData.disciplinaryDateStart &&
-                                        isReadonly === false &&
-                                        formData.disciplinaryExtendHistory
-                                          .length === 0
-                                      "
-                                      v-slot:append
-                                    >
-                                      <q-icon
-                                        name="cancel"
-                                        @click.stop.prevent="
-                                          (formData.disciplinaryDateStart =
-                                            null),
-                                            (formData.disciplinaryDateEnd =
-                                              null)
-                                        "
-                                        class="cursor-pointer"
-                                      />
-                                    </template>
-                                  </q-input>
-                                </template>
-                              </datepicker>
-                            </div>
-
-                            <div class="col-3">
-                              <datepicker
-                                :class="isReadonly ? '' : dateEndInputStyle"
-                                menu-class-name="modalfix"
-                                v-model="formData.disciplinaryDateEnd"
-                                :readonly="
-                                  formData.disciplinaryDateStart === null ||
-                                  isReadonly ||
-                                  formData.disciplinaryExtendHistory.length > 0
-                                "
-                                :locale="'th'"
-                                autoApply
-                                :enableTimePicker="false"
-                                week-start="0"
-                                @update:model-value="changeFormData()"
-                                :min-date="formData.disciplinaryDateStart"
-                              >
-                                <template #year="{ year }">{{
-                                  year + 543
-                                }}</template>
-                                <template #year-overlay-value="{ value }">{{
-                                  parseInt(value + 543)
-                                }}</template>
-                                <template #trigger>
-                                  <q-input
-                                    for="#dateEnd"
-                                    :class="inputEditExtend(isReadonly)"
-                                    ref="dateEndRef"
-                                    :readonly="
-                                      formData.disciplinaryDateStart === null ||
-                                      isReadonly ||
-                                      formData.disciplinaryExtendHistory
-                                        .length > 0
-                                    "
-                                    outlined
-                                    dense
-                                    hide-bottom-space
-                                    borderless
-                                    :model-value="
-                                      formData.disciplinaryDateEnd
-                                        ? date2Thai(
-                                            formData.disciplinaryDateEnd as Date
-                                          )
-                                        : null
-                                    "
-                                    :label="`${'วันที่สิ้นสุดการสอบสวน'}`"
-                                  >
-                                    <template v-slot:prepend>
-                                      <q-icon
-                                        name="event"
-                                        class="cursor-pointer"
-                                        color="primary"
-                                      >
-                                      </q-icon>
-                                    </template>
-                                    <template
-                                      v-if="
-                                        formData.disciplinaryDateEnd &&
-                                        isReadonly === false &&
-                                        formData.disciplinaryExtendHistory
-                                          .length === 0
-                                      "
-                                      v-slot:append
-                                    >
-                                      <q-icon
-                                        name="cancel"
-                                        @click.stop.prevent="
-                                          formData.disciplinaryDateEnd = null
-                                        "
-                                        class="cursor-pointer"
-                                      />
-                                    </template>
-                                  </q-input>
-                                </template>
-                              </datepicker>
-                            </div>
-                          </div>
-                        </div>
-
-                        <!-- วันที่สอบสวน (List Log) -->
-                        <div
-                          v-if="
-                            formData.disciplinaryExtendHistory !== null &&
-                            formData.disciplinaryExtendHistory.length > 1
+                        </q-icon>
+                      </template>
+                      <template
+                        v-if="
+                          formData.disciplinaryDateAllegation &&
+                          isReadonly === false
+                        "
+                        v-slot:append
+                      >
+                        <q-icon
+                          name="cancel"
+                          @click.stop.prevent="
+                            formData.disciplinaryDateAllegation = null
                           "
-                          class="col-12 fixed-height-history"
-                        >
-                          <q-list bordered separator>
-                            <q-item
-                              v-for="(
-                                e, key
-                              ) in formData.disciplinaryExtendHistory.slice(1)"
-                            >
-                              <q-item-section :key="key">
-                                {{ e.name }} ({{ e.daysExtend }} วัน)
-                                <p class="q-mb-none">
-                                  {{ date2Thai(e.dateStart) }} -
-                                  {{ date2Thai(e.dateEnd) }}
-                                </p>
-                              </q-item-section>
-                            </q-item>
-                          </q-list>
-                        </div>
-                      </div>
-                    </div>
-                  </q-card>
-                </div>
-
+                          class="cursor-pointer"
+                        />
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
                 <datepicker
                   :readonly="isReadonly"
                   menu-class-name="modalfix"
@@ -1351,7 +1072,7 @@ onMounted(async () => {
                     </q-input>
                   </template>
                 </datepicker>
-
+              
                 <datepicker
                   :readonly="isReadonly"
                   menu-class-name="modalfix"
@@ -1413,419 +1134,697 @@ onMounted(async () => {
                     </q-input>
                   </template>
                 </datepicker>
-
-                <div class="row col-12">
-                  <q-card
-                    bordered
-                    class="row col-12"
-                    style="border: 1px solid #d6dee1"
+              </div>
+              <div class="row col-12">
+                <q-card
+                  bordered
+                  class="col-12"
+                  style="border: 1px solid #d6dee1"
+                >
+                  <div
+                    class="row col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
                   >
-                    <div
-                      class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
-                    >
-                      รายชื่อกรรมการเพื่อพิจารณาความผิดทางวินัย
+                    <div>
+                      วันที่สอบสวน
+                      <q-checkbox
+                        v-if="
+                          formData.disciplinaryExtendHistory.length > 0 &&
+                          !isReadonly
+                        "
+                        :disable="isReadonly"
+                        for="#extendStatus"
+                        size="md"
+                        v-model="extendStatus"
+                        label="ขยายเวลา"
+                        color="primary"
+                        dense
+                        class="text-weight-medium q-ml-sm"
+                        keep-color
+                        @update:model-value="
+                          changeFormData();
+                          resetExtend();
+                        "
+                      />
+                    </div>
+                    <q-space style="height: 1px" />
+                    <div>
                       <q-btn
-                        v-if="!isReadonly"
+                        name="calendar"
+                        round
                         size="12px"
                         flat
-                        round
                         dense
-                        color="add"
-                        class="q-ml-sm"
-                        @click="popup()"
-                        icon="mdi-plus"
+                        icon="mdi-calendar-month"
+                        class="self-center items-center"
+                        color="primary"
+                        @click="calendarOpen"
                       >
-                        <q-tooltip>เพิ่มกรรมการ</q-tooltip>
+                        <q-tooltip>ปฏิทิน</q-tooltip>
                       </q-btn>
                     </div>
-                    <div class="col-12"><q-separator /></div>
-                    <div class="col-xs-12 q-pa-sm row">
-                      <Table
-                        class="col-12"
-                        style="max-height: 80vh"
-                        :rows="rows"
-                        :columns="investigateDis.columnsDirector"
-                        :filter="filter"
-                        :visible-columns="investigateDis.visibleColumnsDirector"
-                        v-model:inputfilter="filter"
-                        v-model:inputvisible="
-                          investigateDis.visibleColumnsDirector
-                        "
-                        :pagination="initialPagination"
-                        :nornmalData="true"
-                        :paging="true"
-                        :titleText="''"
-                      >
-                        <template #columns="props">
-                          <q-tr :props="props" class="cursor-pointer">
-                            <q-td
-                              v-for="col in props.cols"
-                              :key="col.name"
-                              :props="props"
-                            >
-                              <div
-                                v-if="col.name == 'no'"
-                                class="table_ellipsis2"
-                              >
-                                {{ props.rowIndex + 1 }}
-                              </div>
-                              <div v-else class="table_ellipsis2">
-                                {{ col.value }}
-                              </div>
-                            </q-td>
-                            <q-td class="text-right">
-                              <!-- แก้ไขกรรมการ -->
-                              <q-btn
-                                v-if="
-                                  !isReadonly && props.row.check === 'props'
-                                "
-                                dense
-                                size="12px"
-                                flat
-                                round
-                                color="blue"
-                                @click="openEditDirector(props.row)"
-                                icon="mdi-pencil-outline"
-                              >
-                                <q-tooltip>แก้ไข</q-tooltip>
-                              </q-btn>
-
-                              <q-btn
-                                v-if="!isReadonly"
-                                dense
-                                size="12px"
-                                flat
-                                round
-                                color="red"
-                                @click="deleteDirector(props.row.id)"
-                                icon="mdi-delete-outline"
-                              >
-                                <q-tooltip>ลบข้อมูล</q-tooltip>
-                              </q-btn>
-                            </q-td>
-                          </q-tr>
-                        </template>
-                      </Table>
-                    </div>
-                  </q-card>
-                </div>
-                <div class="row col-12 q-col-gutter-sm">
-                  <div class="col-xs-12 col-sm-3">
-                    <q-input
-                      :class="inputEdit(isReadonly)"
-                      :readonly="isReadonly"
-                      dense
-                      outlined
-                      ref="disciplinaryCaseFaultRef"
-                      v-model="formData.disciplinaryCaseFault"
-                      for="#casefault"
-                      label="กรณีมีความผิด"
-                      hide-bottom-space
-                      @update:model-value="changeFormData()"
-                    />
                   </div>
-
-                  <div class="col-xs-12 col-sm-3">
-                    <q-input
-                      :class="inputEdit(isReadonly)"
-                      :readonly="isReadonly"
-                      dense
-                      hide-bottom-space
-                      outlined
-                      for="#whereInvestigate"
-                      ref="disciplinaryInvestigateAtRef"
-                      v-model="formData.disciplinaryInvestigateAt"
-                      label="สอบสวนที่"
-                      @update:model-value="changeFormData()"
-                    />
-                  </div>
-
-                  <div class="col-xs-12 col-sm-3">
-                    <q-select
-                      :class="inputEdit(isReadonly)"
-                      :readonly="isReadonly"
-                      dense
-                      outlined
-                      for="#faultLevel"
-                      ref="disciplinaryFaultLevelRef"
-                      v-model="formData.disciplinaryFaultLevel"
-                      option-label="name"
-                      option-value="id"
-                      emit-value
-                      map-options
-                      hide-bottom-space
-                      :options="investigateDis.optionsfaultLevel"
-                      label="ระดับโทษความผิด"
-                      group-label="group"
-                      group-values="options"
-                      clearable
-                      @update:model-value="changeFormData()"
-                    >
-                    </q-select>
-                  </div>
-                  <div
-                    class="col-3"
-                    v-if="formData.disciplinaryFaultLevel === 'อื่นๆ'"
-                  >
-                    <q-input
-                      :class="inputEdit(isReadonly)"
-                      outlined
-                      dense
-                      label="ระดับโทษความผิดอื่นๆ"
-                      v-model="formData.disciplinaryFaultLevelOther"
-                    />
-                  </div>
-                  <div class="col-xs-12 col-sm-3">
-                    <q-input
-                      :class="inputEdit(isReadonly)"
-                      :readonly="isReadonly"
-                      dense
-                      for="#refLaw"
-                      hide-bottom-space
-                      outlined
-                      ref="disciplinaryRefLawRef"
-                      v-model="formData.disciplinaryRefLaw"
-                      label="อ้างอิงมาตราตามกฎหมาย"
-                      @update:model-value="changeFormData()"
-                    />
-                  </div>
-                </div>
-
-                <div class="col-xs-12 col-sm-6">
-                  <q-input
-                    :readonly="isReadonly"
-                    :class="inputEdit(isReadonly)"
-                    dense
-                    outlined
-                    for="#evidence"
-                    ref="disciplinarySummaryEvidenceRef"
-                    hide-bottom-space
-                    v-model="formData.disciplinarySummaryEvidence"
-                    label="สรุปพยานหลักฐานสนับสนุนข้อกล่าวหา"
-                    type="textarea"
-                    @update:model-value="changeFormData()"
-                  />
-                </div>
-
-                <div class="col-xs-12 col-sm-6">
-                  <q-input
-                    :readonly="isReadonly"
-                    :class="inputEdit(isReadonly)"
-                    dense
-                    outlined
-                    ref="disciplinaryRecordAccuserRef"
-                    for="#recordAccuser"
-                    v-model="formData.disciplinaryRecordAccuser"
-                    label="บันทึกถ้อยคำของผู้กล่าวหา"
-                    hide-bottom-space
-                    type="textarea"
-                    @update:model-value="changeFormData()"
-                  />
-                </div>
-
-                <div class="col-xs-12 col-sm-6">
-                  <q-input
-                    :readonly="isReadonly"
-                    :class="inputEdit(isReadonly)"
-                    dense
-                    outlined
-                    for="#witnesses"
-                    ref="disciplinaryWitnessesRef"
-                    v-model="formData.disciplinaryWitnesses"
-                    label="พยานและบันทึกถ้อยคำพยาน"
-                    hide-bottom-space
-                    type="textarea"
-                    @update:model-value="changeFormData()"
-                  />
-                </div>
-
-                <div class="col-xs-12 col-sm-6">
-                  <q-input
-                    :readonly="isReadonly"
-                    :class="inputEdit(isReadonly)"
-                    dense
-                    outlined
-                    for="#InvestResults"
-                    ref="resultRef"
-                    v-model="formData.result"
-                    label="ผลการสอบสวน"
-                    hide-bottom-space
-                    type="textarea"
-                    @update:model-value="changeFormData()"
-                  />
-                </div>
-
-                <div class="row col-12">
-                  <q-card
-                    bordered
-                    class="col-12"
-                    style="border: 1px solid #d6dee1"
-                  >
-                    <div
-                      class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
-                    >
-                      ผลการพิจารณาความผิดทางวินัย
-                    </div>
-
-                    <div class="col-12"><q-separator /></div>
-
-                    <div class="q-pa-sm row q-col-gutter-sm">
-                      <div class="col-3">
-                        <q-select
-                          :class="inputEdit(isReadonly)"
-                          for="#fault"
-                          outlined
-                          dense
-                          :readonly="isReadonly"
-                          ref="disciplinaryStatusResultRef"
-                          v-model="formData.disciplinaryStatusResult"
-                          :options="mainStore.statusResultOptions"
-                          label="ผลการสอบสวน"
-                          emit-value
-                          hide-bottom-space
-                          map-options
-                          option-label="name"
-                          option-value="id"
-                          use-input
-                          @filter="(inputValue: any,
-                doneFn: Function) => investigateDis.filterFnOptionsType(inputValue, doneFn, 'offenseDetailsOps'
-                )"
-                          @update:model-value="changeFormData()"
-                          ><template v-slot:no-option>
-                            <q-item>
-                              <q-item-section class="text-grey">
-                                ไม่มีข้อมูล
-                              </q-item-section>
-                            </q-item>
-                          </template>
-                        </q-select>
-                      </div>
-                      <div
-                        v-if="formData.disciplinaryStatusResult == 'HAVE_CAUSE'"
-                        class="col-3"
-                      >
-                        <q-select
-                          :class="inputEdit(isReadonly)"
-                          :readonly="isReadonly"
-                          for="#fault"
-                          outlined
-                          dense
-                          ref="disciplinaryCauseTextRef"
-                          v-model="formData.disciplinaryCauseText"
-                          :options="investigateDis.causeTextOptions"
-                          label="ร้ายแรง/ไม่ร้ายแรง"
-                          emit-value
-                          map-options
-                          option-label="name"
-                          option-value="id"
-                          use-input
-                          clearable
-                          @update:model-value="changeFormData()"
-                          ><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-12"><q-separator /></div>
+                  <div class="q-pa-sm">
+                    <div class="q-col-gutter-sm row col-12">
                       <div class="col-12">
-                        <q-input
-                          :class="inputEdit(isReadonly)"
-                          :readonly="isReadonly"
-                          class="full-width cursor-pointer"
-                          outlined
-                          ref="disciplinaryResultRef"
-                          dense
-                          borderless
-                          v-model="formData.disciplinaryResult"
-                          hide-bottom-space
-                          :label="`${'เหตุผล'}`"
-                          type="textarea"
-                          @update:model-value="changeFormData()"
-                        />
+                        <div class="row q-col-gutter-sm">
+                          <div v-if="extendStatus" class="col-3">
+                            <q-select
+                              :class="inputEdit(isReadonly)"
+                              :readonly="isReadonly"
+                              for="#daysExtend"
+                              outlined
+                              dense
+                              ref="daysExtendRef"
+                              v-model="formData.daysExtend"
+                              :options="investigateDis.daysExtendOps"
+                              label="จำนวนวันที่ต้องการขยาย"
+                              emit-value
+                              hide-bottom-space
+                              map-options
+                              option-label="name"
+                              option-value="id"
+                              use-input
+                              @update:model-value="calEndDate"
+                              ><template v-slot:no-option>
+                                <q-item>
+                                  <q-item-section class="text-grey">
+                                    ไม่มีข้อมูล
+                                  </q-item-section>
+                                </q-item>
+                              </template>
+                              <template
+                                v-if="formData.daysExtend === 0"
+                                v-slot:append
+                              >
+                                <q-icon
+                                  name="cancel"
+                                  @click.stop.prevent="
+                                    formData.daysExtend = 0
+                                  "
+                                  class="cursor-pointer"
+                                />
+                              </template>
+                            </q-select>
+                          </div>
+
+                          <div v-if="!extendStatus" class="col-3">
+                            <datepicker
+                              menu-class-name="modalfix"
+                              :readonly="
+                                isReadonly ||
+                                formData.disciplinaryExtendHistory.length > 0
+                              "
+                              v-model="formData.disciplinaryDateStart"
+                              :locale="'th'"
+                              autoApply
+                              :enableTimePicker="false"
+                              week-start="0"
+                              @update:model-value="changeFormDataDate()"
+                            >
+                              <template #year="{ year }">{{
+                                year + 543
+                              }}</template>
+                              <template #year-overlay-value="{ value }">{{
+                                parseInt(value + 543)
+                              }}</template>
+                              <template #trigger>
+                                <q-input
+                                  for="#date"
+                                  class="full-width cursor-pointer"
+                                  ref="dateRef"
+                                  :class="inputEditExtend(isReadonly)"
+                                  :readonly="
+                                    isReadonly ||
+                                    formData.disciplinaryExtendHistory
+                                      .length > 0
+                                  "
+                                  outlined
+                                  dense
+                                  borderless
+                                  hide-bottom-space
+                                  :model-value="
+                                    formData.disciplinaryDateStart
+                                      ? date2Thai(
+                                          formData.disciplinaryDateStart as Date
+                                        )
+                                      : null
+                                  "
+                                  :label="`${'วันที่เริ่มการสอบสวน'}`"
+                                >
+                                  <template v-slot:prepend>
+                                    <q-icon
+                                      name="event"
+                                      class="cursor-pointer"
+                                      color="primary"
+                                    >
+                                    </q-icon>
+                                  </template>
+                                  <template
+                                    v-if="
+                                      formData.disciplinaryDateStart &&
+                                      isReadonly === false &&
+                                      formData.disciplinaryExtendHistory
+                                        .length === 0
+                                    "
+                                    v-slot:append
+                                  >
+                                    <q-icon
+                                      name="cancel"
+                                      @click.stop.prevent="
+                                        (formData.disciplinaryDateStart =
+                                          null),
+                                          (formData.disciplinaryDateEnd =
+                                            null)
+                                      "
+                                      class="cursor-pointer"
+                                    />
+                                  </template>
+                                </q-input>
+                              </template>
+                            </datepicker>
+                          </div>
+
+                          <div class="col-3">
+                            <datepicker
+                              :class="isReadonly ? '' : dateEndInputStyle"
+                              menu-class-name="modalfix"
+                              v-model="formData.disciplinaryDateEnd"
+                              :readonly="
+                                formData.disciplinaryDateStart === null ||
+                                isReadonly ||
+                                formData.disciplinaryExtendHistory.length > 0
+                              "
+                              :locale="'th'"
+                              autoApply
+                              :enableTimePicker="false"
+                              week-start="0"
+                              @update:model-value="changeFormData()"
+                              :min-date="formData.disciplinaryDateStart"
+                            >
+                              <template #year="{ year }">{{
+                                year + 543
+                              }}</template>
+                              <template #year-overlay-value="{ value }">{{
+                                parseInt(value + 543)
+                              }}</template>
+                              <template #trigger>
+                                <q-input
+                                  for="#dateEnd"
+                                  :class="inputEditExtend(isReadonly)"
+                                  ref="dateEndRef"
+                                  :readonly="
+                                    formData.disciplinaryDateStart === null ||
+                                    isReadonly ||
+                                    formData.disciplinaryExtendHistory
+                                      .length > 0
+                                  "
+                                  outlined
+                                  dense
+                                  hide-bottom-space
+                                  borderless
+                                  :model-value="
+                                    formData.disciplinaryDateEnd
+                                      ? date2Thai(
+                                          formData.disciplinaryDateEnd as Date
+                                        )
+                                      : null
+                                  "
+                                  :label="`${'วันที่สิ้นสุดการสอบสวน'}`"
+                                >
+                                  <template v-slot:prepend>
+                                    <q-icon
+                                      name="event"
+                                      class="cursor-pointer"
+                                      color="primary"
+                                    >
+                                    </q-icon>
+                                  </template>
+                                  <template
+                                    v-if="
+                                      formData.disciplinaryDateEnd &&
+                                      isReadonly === false &&
+                                      formData.disciplinaryExtendHistory
+                                        .length === 0
+                                    "
+                                    v-slot:append
+                                  >
+                                    <q-icon
+                                      name="cancel"
+                                      @click.stop.prevent="
+                                        formData.disciplinaryDateEnd = null
+                                      "
+                                      class="cursor-pointer"
+                                    />
+                                  </template>
+                                </q-input>
+                              </template>
+                            </datepicker>
+                          </div>
+                        </div>
+                      </div>
+
+                      <!-- วันที่สอบสวน (List Log) -->
+                      <div
+                        v-if="
+                          formData.disciplinaryExtendHistory !== null &&
+                          formData.disciplinaryExtendHistory.length > 1
+                        "
+                        class="col-12 fixed-height-history"
+                      >
+                        <q-list bordered separator>
+                          <q-item
+                            v-for="(
+                              e, key
+                            ) in formData.disciplinaryExtendHistory.slice(1)"
+                          >
+                            <q-item-section :key="key">
+                              {{ e.name }} ({{ e.daysExtend }} วัน)
+                              <p class="q-mb-none">
+                                {{ date2Thai(e.dateStart) }} -
+                                {{ date2Thai(e.dateEnd) }}
+                              </p>
+                            </q-item-section>
+                          </q-item>
+                        </q-list>
                       </div>
                     </div>
-                  </q-card>
+                  </div>
+                </q-card>
+              </div>
+
+              <div class="row col-12">
+                <q-card
+                  bordered
+                  class="row col-12"
+                  style="border: 1px solid #d6dee1"
+                >
+                  <div
+                    class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
+                  >
+                    รายชื่อกรรมการเพื่อพิจารณาความผิดทางวินัย
+                    <q-btn
+                      v-if="!isReadonly"
+                      size="12px"
+                      flat
+                      round
+                      dense
+                      color="add"
+                      class="q-ml-sm"
+                      @click="popup()"
+                      icon="mdi-plus"
+                    >
+                      <q-tooltip>เพิ่มกรรมการ</q-tooltip>
+                    </q-btn>
+                  </div>
+                  <div class="col-12"><q-separator /></div>
+                  <div class="col-xs-12 q-pa-sm row">
+                    <Table
+                      class="col-12"
+                      style="max-height: 80vh"
+                      :rows="rows"
+                      :columns="investigateDis.columnsDirector"
+                      :filter="filter"
+                      :visible-columns="investigateDis.visibleColumnsDirector"
+                      v-model:inputfilter="filter"
+                      v-model:inputvisible="
+                        investigateDis.visibleColumnsDirector
+                      "
+                      :pagination="initialPagination"
+                      :nornmalData="true"
+                      :paging="true"
+                      :titleText="''"
+                    >
+                      <template #columns="props">
+                        <q-tr :props="props" class="cursor-pointer">
+                          <q-td
+                            v-for="col in props.cols"
+                            :key="col.name"
+                            :props="props"
+                          >
+                            <div
+                              v-if="col.name == 'no'"
+                              class="table_ellipsis2"
+                            >
+                              {{ props.rowIndex + 1 }}
+                            </div>
+                            <div v-else class="table_ellipsis2">
+                              {{ col.value }}
+                            </div>
+                          </q-td>
+                          <q-td class="text-right">
+                            <!-- แก้ไขกรรมการ -->
+                            <q-btn
+                              v-if="
+                                !isReadonly && props.row.check === 'props'
+                              "
+                              dense
+                              size="12px"
+                              flat
+                              round
+                              color="blue"
+                              @click="openEditDirector(props.row)"
+                              icon="mdi-pencil-outline"
+                            >
+                              <q-tooltip>แก้ไข</q-tooltip>
+                            </q-btn>
+
+                            <q-btn
+                              v-if="!isReadonly"
+                              dense
+                              size="12px"
+                              flat
+                              round
+                              color="red"
+                              @click="deleteDirector(props.row.id)"
+                              icon="mdi-delete-outline"
+                            >
+                              <q-tooltip>ลบข้อมูล</q-tooltip>
+                            </q-btn>
+                          </q-td>
+                        </q-tr>
+                      </template>
+                    </Table>
+                  </div>
+                </q-card>
+              </div>
+              <div class="row col-12 q-col-gutter-sm">
+                <div class="col-xs-12 col-sm-3">
+                  <q-input
+                    :class="inputEdit(isReadonly)"
+                    :readonly="isReadonly"
+                    dense
+                    outlined
+                    ref="disciplinaryCaseFaultRef"
+                    v-model="formData.disciplinaryCaseFault"
+                    for="#casefault"
+                    label="กรณีมีความผิด"
+                    hide-bottom-space
+                    @update:model-value="changeFormData()"
+                  />
+                </div>
+
+                <div class="col-xs-12 col-sm-3">
+                  <q-input
+                    :class="inputEdit(isReadonly)"
+                    :readonly="isReadonly"
+                    dense
+                    hide-bottom-space
+                    outlined
+                    for="#whereInvestigate"
+                    ref="disciplinaryInvestigateAtRef"
+                    v-model="formData.disciplinaryInvestigateAt"
+                    label="สอบสวนที่"
+                    @update:model-value="changeFormData()"
+                  />
+                </div>
+
+                <div class="col-xs-12 col-sm-3">
+                  <q-select
+                    :class="inputEdit(isReadonly)"
+                    :readonly="isReadonly"
+                    dense
+                    outlined
+                    for="#faultLevel"
+                    ref="disciplinaryFaultLevelRef"
+                    v-model="formData.disciplinaryFaultLevel"
+                    option-label="name"
+                    option-value="id"
+                    emit-value
+                    map-options
+                    hide-bottom-space
+                    :options="investigateDis.optionsfaultLevel"
+                    label="ระดับโทษความผิด"
+                    group-label="group"
+                    group-values="options"
+                    clearable
+                    @update:model-value="changeFormData()"
+                  >
+                  </q-select>
+                </div>
+                <div
+                  class="col-3"
+                  v-if="formData.disciplinaryFaultLevel === 'อื่นๆ'"
+                >
+                  <q-input
+                    :class="inputEdit(isReadonly)"
+                    outlined
+                    dense
+                    label="ระดับโทษความผิดอื่นๆ"
+                    v-model="formData.disciplinaryFaultLevelOther"
+                  />
+                </div>
+                <div class="col-xs-12 col-sm-3">
+                  <q-input
+                    :class="inputEdit(isReadonly)"
+                    :readonly="isReadonly"
+                    dense
+                    for="#refLaw"
+                    hide-bottom-space
+                    outlined
+                    ref="disciplinaryRefLawRef"
+                    v-model="formData.disciplinaryRefLaw"
+                    label="อ้างอิงมาตราตามกฎหมาย"
+                    @update:model-value="changeFormData()"
+                  />
                 </div>
               </div>
+
+              <div class="col-xs-12 col-sm-6">
+                <q-input
+                  :readonly="isReadonly"
+                  :class="inputEdit(isReadonly)"
+                  dense
+                  outlined
+                  for="#evidence"
+                  ref="disciplinarySummaryEvidenceRef"
+                  hide-bottom-space
+                  v-model="formData.disciplinarySummaryEvidence"
+                  label="สรุปพยานหลักฐานสนับสนุนข้อกล่าวหา"
+                  type="textarea"
+                  @update:model-value="changeFormData()"
+                />
+              </div>
+
+              <div class="col-xs-12 col-sm-6">
+                <q-input
+                  :readonly="isReadonly"
+                  :class="inputEdit(isReadonly)"
+                  dense
+                  outlined
+                  ref="disciplinaryRecordAccuserRef"
+                  for="#recordAccuser"
+                  v-model="formData.disciplinaryRecordAccuser"
+                  label="บันทึกถ้อยคำของผู้กล่าวหา"
+                  hide-bottom-space
+                  type="textarea"
+                  @update:model-value="changeFormData()"
+                />
+              </div>
+
+              <div class="col-xs-12 col-sm-6">
+                <q-input
+                  :readonly="isReadonly"
+                  :class="inputEdit(isReadonly)"
+                  dense
+                  outlined
+                  for="#witnesses"
+                  ref="disciplinaryWitnessesRef"
+                  v-model="formData.disciplinaryWitnesses"
+                  label="พยานและบันทึกถ้อยคำพยาน"
+                  hide-bottom-space
+                  type="textarea"
+                  @update:model-value="changeFormData()"
+                />
+              </div>
+
+              <div class="col-xs-12 col-sm-6">
+                <q-input
+                  :readonly="isReadonly"
+                  :class="inputEdit(isReadonly)"
+                  dense
+                  outlined
+                  for="#InvestResults"
+                  ref="resultRef"
+                  v-model="formData.result"
+                  label="ผลการสอบสวน"
+                  hide-bottom-space
+                  type="textarea"
+                  @update:model-value="changeFormData()"
+                />
+              </div>
+
+              <div class="row col-12">
+                <q-card
+                  bordered
+                  class="col-12"
+                  style="border: 1px solid #d6dee1"
+                >
+                  <div
+                    class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
+                  >
+                    ผลการพิจารณาความผิดทางวินัย
+                  </div>
+
+                  <div class="col-12"><q-separator /></div>
+
+                  <div class="q-pa-sm row q-col-gutter-sm">
+                    <div class="col-3">
+                      <q-select
+                        :class="inputEdit(isReadonly)"
+                        for="#fault"
+                        outlined
+                        dense
+                        :readonly="isReadonly"
+                        ref="disciplinaryStatusResultRef"
+                        v-model="formData.disciplinaryStatusResult"
+                        :options="mainStore.statusResultOptions"
+                        label="ผลการสอบสวน"
+                        emit-value
+                        hide-bottom-space
+                        map-options
+                        option-label="name"
+                        option-value="id"
+                        use-input
+                        @filter="(inputValue: any,
+              doneFn: Function) => investigateDis.filterFnOptionsType(inputValue, doneFn, 'offenseDetailsOps'
+              )"
+                        @update:model-value="changeFormData()"
+                        ><template v-slot:no-option>
+                          <q-item>
+                            <q-item-section class="text-grey">
+                              ไม่มีข้อมูล
+                            </q-item-section>
+                          </q-item>
+                        </template>
+                      </q-select>
+                    </div>
+                    <div
+                      v-if="formData.disciplinaryStatusResult == 'HAVE_CAUSE'"
+                      class="col-3"
+                    >
+                      <q-select
+                        :class="inputEdit(isReadonly)"
+                        :readonly="isReadonly"
+                        for="#fault"
+                        outlined
+                        dense
+                        ref="disciplinaryCauseTextRef"
+                        v-model="formData.disciplinaryCauseText"
+                        :options="investigateDis.causeTextOptions"
+                        label="ร้ายแรง/ไม่ร้ายแรง"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        option-value="id"
+                        use-input
+                        clearable
+                        @update:model-value="changeFormData()"
+                        ><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-12">
+                      <q-input
+                        :class="inputEdit(isReadonly)"
+                        :readonly="isReadonly"
+                        class="full-width cursor-pointer"
+                        outlined
+                        ref="disciplinaryResultRef"
+                        dense
+                        borderless
+                        v-model="formData.disciplinaryResult"
+                        hide-bottom-space
+                        :label="`${'เหตุผล'}`"
+                        type="textarea"
+                        @update:model-value="changeFormData()"
+                      />
+                    </div>
+                  </div>
+                </q-card>
+              </div>
             </div>
-            <q-separator />
-            <div v-if="!isReadonly" class="row col-12 q-pa-sm">
-              <q-space />
-              <q-btn
-                for="ButtonOnSubmit"
-                id="formSubmit"
-                color="secondary"
-                label="บันทึก"
-                type="submit"
-                ><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn
-              >
-            </div>
-          </q-card>
+          </div>
+          <div class="col-12 row"><q-separator vertical /></div> 
         </div>
-      </form>
-    </div>
 
-    <!-- อัพโหลดไฟล์ -->
-    <div class="col-sm-12 col-md-3">
-      <!-- ยังไม่มี api  -->
-      <UploadFile
-        title="อัปโหลดไฟล์เอกสารที่เกี่ยวข้องกับการสอบสวน"
-        label="เลือกไฟล์"
-        :files="disciplineDisciplinary_DocRelevants"
-        :id="id"
-        type="relevant"
-        :fetchData="props.fetchData"
-        :is-readonly="isReadonly"
-        :return-count="returnCount"
-      />
+        <!-- อัพโหลดไฟล์ -->
+        <div class="col-sm-12 col-md-3 q-col-gutter-md q-pa-md">
+          <!-- ยังไม่มี api  -->
+          <UploadFile
+            title="อัปโหลดไฟล์เอกสารที่เกี่ยวข้องกับการสอบสวน"
+            label="เลือกไฟล์"
+            :files="disciplineDisciplinary_DocRelevants"
+            :id="id"
+            type="relevant"
+            :fetchData="props.fetchData"
+            :is-readonly="isReadonly"
+            :return-count="returnCount"
+          />
 
-      <UploadFile
-        title="อัปโหลดหลักฐานสนับสนุนข้อกล่าวหา"
-        label="เลือกไฟล์"
-        :files="disciplineDisciplinary_DocSummaryEvidences"
-        :id="id"
-        type="summaryEvidence"
-        :fetchData="props.fetchData"
-        :is-readonly="isReadonly"
-        :return-count="returnCount"
-      />
-      <UploadFile
-        title="อัปโหลดบันทึกถ้อยคำของผู้กล่าวหา"
-        label="เลือกไฟล์"
-        :files="disciplineDisciplinary_DocRecordAccusers"
-        :id="id"
-        type="recordAccuser"
-        :fetchData="props.fetchData"
-        :is-readonly="isReadonly"
-        :return-count="returnCount"
-      />
+          <UploadFile
+            title="อัปโหลดหลักฐานสนับสนุนข้อกล่าวหา"
+            label="เลือกไฟล์"
+            :files="disciplineDisciplinary_DocSummaryEvidences"
+            :id="id"
+            type="summaryEvidence"
+            :fetchData="props.fetchData"
+            :is-readonly="isReadonly"
+            :return-count="returnCount"
+          />
+          <UploadFile
+            title="อัปโหลดบันทึกถ้อยคำของผู้กล่าวหา"
+            label="เลือกไฟล์"
+            :files="disciplineDisciplinary_DocRecordAccusers"
+            :id="id"
+            type="recordAccuser"
+            :fetchData="props.fetchData"
+            :is-readonly="isReadonly"
+            :return-count="returnCount"
+          />
 
-      <UploadFile
-        title="อัปโหลดพยานและการบันทึกถ้อยคำ"
-        label="เลือกไฟล์"
-        :files="disciplineDisciplinary_DocWitnessess"
-        :id="id"
-        type="witnesses"
-        :fetchData="props.fetchData"
-        :is-readonly="isReadonly"
-        :return-count="returnCount"
-      />
+          <UploadFile
+            title="อัปโหลดพยานและการบันทึกถ้อยคำ"
+            label="เลือกไฟล์"
+            :files="disciplineDisciplinary_DocWitnessess"
+            :id="id"
+            type="witnesses"
+            :fetchData="props.fetchData"
+            :is-readonly="isReadonly"
+            :return-count="returnCount"
+          />
 
-      <UploadFile
-        title="อัปโหลดไฟล์เอกสารหลักฐานอื่น ๆ"
-        label="เลือกไฟล์"
-        :files="disciplineDisciplinary_DocOthers"
-        :id="id"
-        type="other"
-        :fetchData="props.fetchData"
-        :is-readonly="isReadonly"
-        :return-count="returnCount"
-      />
-    </div>
+          <UploadFile
+            title="อัปโหลดไฟล์เอกสารหลักฐานอื่น ๆ"
+            label="เลือกไฟล์"
+            :files="disciplineDisciplinary_DocOthers"
+            :id="id"
+            type="other"
+            :fetchData="props.fetchData"
+            :is-readonly="isReadonly"
+            :return-count="returnCount"
+          />
+        </div>
+        <div class="col-12 "><q-separator /></div>
+        <div v-if="!isReadonly" class="row col-12 q-pa-sm">
+          <q-space />
+          <q-btn
+            for="ButtonOnSubmit"
+            id="formSubmit"
+            color="secondary"
+            label="บันทึก"
+            type="submit"
+            ><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn
+          >
+        </div>
+      </div>
+    </form>
   </div>
 
   <DialogDuty
diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue
index 605f4d6ef..0029abe53 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue
@@ -128,7 +128,7 @@ function filterFn() {
 
 <template>
   <div class="q-pb-sm row q-col-gutter-sm">
-    <div class="col-2">
+    <div class="col-xs-12 col-sm-4 col-md-3">
       <q-select
         v-model="statusFilter"
         label="สถานะ"
diff --git a/src/modules/11_discipline/components/4_Result/EditPage.vue b/src/modules/11_discipline/components/4_Result/EditPage.vue
index a944d8498..1c2cd722f 100644
--- a/src/modules/11_discipline/components/4_Result/EditPage.vue
+++ b/src/modules/11_discipline/components/4_Result/EditPage.vue
@@ -293,7 +293,7 @@ onMounted(async () => {
         /> -->
       </div>
     </div>
-    <q-card flat class="col-12">
+    <q-card bordered flat class="col-12">
       <q-tabs
         v-model="store.tabMenu"
         dense
diff --git a/src/modules/11_discipline/components/4_Result/Form.vue b/src/modules/11_discipline/components/4_Result/Form.vue
index 29d9cb808..4e919f9dd 100644
--- a/src/modules/11_discipline/components/4_Result/Form.vue
+++ b/src/modules/11_discipline/components/4_Result/Form.vue
@@ -260,346 +260,354 @@ function updatemodalPersonal(modal: boolean) {
 </script>
 <template>
   <div class="row q-col-gutter-sm">
-    <div class="col-sm-12 col-md-9">
-      <div v-if="isSave" class="q-pa-sm q-gutter-sm">
-        <q-banner
-          inline-actions
-          bordered
-          class="bg-red-1 text-red border-orange"
-        >
-          <q-icon name="mdi-information-outline" size="20px" /> แจ้งเตือน
-          ยังไม่ได้บันทึกข้อมูล
-        </q-banner>
-      </div>
+    <div v-if="isSave" class=" col-12">
+      <q-banner
+        inline-actions
+        bordered
+        rounded
+        class="bg-red-1 text-red border-orange q-ma-md"
+      >
+        <q-icon name="mdi-information-outline" size="20px" /> แจ้งเตือน
+        ยังไม่ได้บันทึกข้อมูล
+      </q-banner>
+      <q-separator />
+    </div>
+    
+      
       <form @submit.prevent="validateForm">
         <q-card bordered>
-          <div class="q-pa-md">
-            <div class="row col-12 q-gutter-sm">
-              <div class="col-xs-12 col-sm-2">
-                <q-select
-                  readonly
-                  for="SelectrespondentType"
-                  v-model="respondentType"
-                  ref="respondentTypeRef"
-                  dense
-                  outlined
-                  label="ผู้ถูกร้องเรียน"
-                  option-value="id"
-                  option-label="name"
-                  emit-value
-                  use-input
-                  map-options
-                  hide-bottom-space
-                  :options="dataStore.complainantoptions"
-                  @update:model-value="selectComplainant(respondentType)"
-                  @filter="(inputValue: any,
-                doneFn: Function) => dataStore.filterSelector(inputValue, doneFn, 'filterrespondentType'
-                )"
-                >
-                  <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-3"
-                v-if="respondentType === 'ORGANIZATION'"
-                id="organizationId"
-              >
-                <q-select
-                  for="inputOffice"
-                  name="organizationId"
-                  ref="organizationIdRef"
-                  dense
-                  hide-bottom-space
-                  outlined
-                  option-label="name"
-                  option-value="id"
-                  emit-value
-                  map-options
-                  v-model="organizationId"
-                  :options="organizationOption"
-                  label="เลือกสำนักงาน"
-                />
-              </div>
-              <div class="row col-12" v-if="respondentType === 'PERSON'">
-                <q-card
-                  bordered
-                  class="row col-12"
-                  style="border: 1px solid #d6dee1"
-                >
+          <div class="col-12 row">
+            <div class="col-sm-12 col-md-9 row no-wrap">
+              <div class="row col-12 q-pa-md">
+                <div class="row q-col-gutter-md">
+                  
+                  <div class="col-xs-12 col-sm-4">
+                    <q-select
+                      readonly
+                      for="SelectrespondentType"
+                      v-model="respondentType"
+                      ref="respondentTypeRef"
+                      dense
+                      outlined
+                      label="ผู้ถูกร้องเรียน"
+                      option-value="id"
+                      option-label="name"
+                      emit-value
+                      use-input
+                      map-options
+                      hide-bottom-space
+                      :options="dataStore.complainantoptions"
+                      @update:model-value="selectComplainant(respondentType)"
+                      @filter="(inputValue: any,
+                    doneFn: Function) => dataStore.filterSelector(inputValue, doneFn, 'filterrespondentType'
+                    )"
+                    >
+                      <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 text-weight-medium bg-grey-1 q-py-xs q-px-md"
+                    class="col-xs-12 col-sm-3"
+                    v-if="respondentType === 'ORGANIZATION'"
+                    id="organizationId"
                   >
-                    ผู้ถูกร้องเรียน
+                    <q-select
+                      for="inputOffice"
+                      name="organizationId"
+                      ref="organizationIdRef"
+                      dense
+                      hide-bottom-space
+                      outlined
+                      option-label="name"
+                      option-value="id"
+                      emit-value
+                      map-options
+                      v-model="organizationId"
+                      :options="organizationOption"
+                      label="เลือกสำนักงาน"
+                    />
                   </div>
-                  <div class="col-12"><q-separator /></div>
-                  <div class="col-xs-12 q-pa-sm">
-                    <d-table
-                      ref="table"
-                      :columns="mainStore.columnsRespondent"
-                      :rows="mainStore.rowsAdd"
-                      row-key="idcard"
-                      flat
+                  <div class="row col-12" v-if="respondentType === 'PERSON'">
+                    <q-card
                       bordered
-                      :paging="true"
-                      dense
-                      class="custom-header-table"
-                      :visible-columns="mainStore.visibleColumnsRespondent"
+                      class="row col-12"
+                      style="border: 1px solid #d6dee1"
                     >
-                      <template v-slot:header="props">
-                        <q-tr :props="props">
-                          <q-th auto-width></q-th>
-                          <q-th
-                            v-for="col in props.cols"
-                            :key="col.name"
-                            :props="props"
-                            style="color: #000000; font-weight: 500"
-                          >
-                            <span class="text-weight-medium">{{
-                              col.label
-                            }}</span>
-                          </q-th>
-                        </q-tr>
-                      </template>
-                      <template v-slot:body="props">
-                        <q-tr :props="props" class="cursor-pointer">
-                          <td>
-                            <q-btn
-                              dense
-                              flat
-                              round
-                              color="info"
-                              icon="info"
-                              @click="onclickViewinfo(props.row.personId)"
-                            >
-                              <q-tooltip>ดูข้อมูลในทะเบียนประวัติ</q-tooltip>
-                            </q-btn>
-                          </td>
-                          <q-td
-                            v-for="col in props.cols"
-                            :key="col.name"
-                            :props="props"
-                            @click="openDetial(props.row.personId)"
-                          >
-                            <div v-if="col.name == 'no'">
-                              {{ props.rowIndex + 1 }}
-                            </div>
+                      <div
+                        class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
+                      >
+                        ผู้ถูกร้องเรียน
+                      </div>
+                      <div class="col-12"><q-separator /></div>
+                      <div class="col-xs-12 q-pa-sm">
+                        <d-table
+                          ref="table"
+                          :columns="mainStore.columnsRespondent"
+                          :rows="mainStore.rowsAdd"
+                          row-key="idcard"
+                          flat
+                          bordered
+                          :paging="true"
+                          dense
+                          class="custom-header-table"
+                          :visible-columns="mainStore.visibleColumnsRespondent"
+                        >
+                          <template v-slot:header="props">
+                            <q-tr :props="props">
+                              <q-th auto-width></q-th>
+                              <q-th
+                                v-for="col in props.cols"
+                                :key="col.name"
+                                :props="props"
+                                style="color: #000000; font-weight: 500"
+                              >
+                                <span class="text-weight-medium">{{
+                                  col.label
+                                }}</span>
+                              </q-th>
+                            </q-tr>
+                          </template>
+                          <template v-slot:body="props">
+                            <q-tr :props="props" class="cursor-pointer">
+                              <td>
+                                <q-btn
+                                  dense
+                                  flat
+                                  round
+                                  color="info"
+                                  icon="info"
+                                  @click="onclickViewinfo(props.row.personId)"
+                                >
+                                  <q-tooltip>ดูข้อมูลในทะเบียนประวัติ</q-tooltip>
+                                </q-btn>
+                              </td>
+                              <q-td
+                                v-for="col in props.cols"
+                                :key="col.name"
+                                :props="props"
+                                @click="openDetial(props.row.personId)"
+                              >
+                                <div v-if="col.name == 'no'">
+                                  {{ props.rowIndex + 1 }}
+                                </div>
 
-                            <div
-                              v-else-if="col.name === 'organization'"
-                              class="table_ellipsis"
-                            >
-                              {{ props.row.organization }}
-                            </div>
-                            <div v-else-if="col.name === 'salary'">
-                              {{ props.row.salary.toLocaleString() }}
-                            </div>
-                            <div v-else>
-                              {{ col.value }}
-                            </div>
-                          </q-td>
-                        </q-tr>
-                      </template>
-                    </d-table>
+                                <div
+                                  v-else-if="col.name === 'organization'"
+                                  class="table_ellipsis"
+                                >
+                                  {{ props.row.organization }}
+                                </div>
+                                <div v-else-if="col.name === 'salary'">
+                                  {{ props.row.salary.toLocaleString() }}
+                                </div>
+                                <div v-else>
+                                  {{ col.value }}
+                                </div>
+                              </q-td>
+                            </q-tr>
+                          </template>
+                        </d-table>
+                      </div>
+                    </q-card>
                   </div>
-                </q-card>
-              </div>
-              <div class="col-12">
-                <q-input
-                  :class="inputEdit(isReadonly)"
-                  type="textarea"
-                  dense
-                  outlined
-                  ref="detailRef"
-                  v-model="formData.resultDescription"
-                  for="#detail"
-                  label="สรุปผลการพิจารณา"
-                  hide-bottom-space
-                  @update:model-value="changeFormData()"
-                />
-              </div>
-              <div class="col-12">
-                <div class="row q-col-gutter-sm">
-                  <div class="col-3">
+                  <div class="col-12">
                     <q-input
-                      v-model="formData.disciplineType"
-                      dense
                       :class="inputEdit(isReadonly)"
-                      outlined
-                      label="ประเภทวินัย"
-                    />
-                  </div>
-                  <div class="col-3">
-                    <q-input
-                      v-model="formData.titleType"
+                      type="textarea"
                       dense
                       outlined
-                      :class="inputEdit(isReadonly)"
-                      label="ประเภทของเรื่อง"
+                      ref="detailRef"
+                      v-model="formData.resultDescription"
+                      for="#detail"
+                      label="สรุปผลการพิจารณา"
+                      hide-bottom-space
+                      @update:model-value="changeFormData()"
                     />
                   </div>
-                  <div class="col-4">
-                    <q-input
-                      v-model="formData.oc"
-                      dense
-                      outlined
-                      :class="inputEdit(isReadonly)"
-                      label="หน่วยงาน/ส่วนราชการ"
-                    />
-                  </div>
-                  <div class="col-2">
-                    <datepicker
-                      menu-class-name="modalfix"
-                      v-model="formData.year"
-                      class="col-2"
-                      :locale="'th'"
-                      autoApply
-                      year-picker
-                      :enableTimePicker="false"
-                    >
-                      <template #year="{ year }">{{ year + 543 }}</template>
-                      <template #year-overlay-value="{ value }">{{
-                        parseInt(value + 543)
-                      }}</template>
-                      <template #trigger>
+                  <div class="col-12">
+                    <div class="row q-col-gutter-sm">
+                      <div class="col-3">
                         <q-input
+                          v-model="formData.disciplineType"
                           dense
                           :class="inputEdit(isReadonly)"
                           outlined
-                          :model-value="
-                            formData.year === 0
-                              ? null
-                              : Number(formData.year) + 543
-                          "
-                          :label="`${'ปีงบประมาณ'}`"
+                          label="ประเภทวินัย"
+                        />
+                      </div>
+                      <div class="col-3">
+                        <q-input
+                          v-model="formData.titleType"
+                          dense
+                          outlined
+                          :class="inputEdit(isReadonly)"
+                          label="ประเภทของเรื่อง"
+                        />
+                      </div>
+                      <div class="col-4">
+                        <q-input
+                          v-model="formData.oc"
+                          dense
+                          outlined
+                          :class="inputEdit(isReadonly)"
+                          label="หน่วยงาน/ส่วนราชการ"
+                        />
+                      </div>
+                      <div class="col-2">
+                        <datepicker
+                          menu-class-name="modalfix"
+                          v-model="formData.year"
+                          class="col-2"
+                          :locale="'th'"
+                          autoApply
+                          year-picker
+                          :enableTimePicker="false"
                         >
-                          <template v-slot:prepend>
-                            <q-icon
-                              name="event"
-                              class="cursor-pointer"
-                              style="color: var(--q-primary)"
+                          <template #year="{ year }">{{ year + 543 }}</template>
+                          <template #year-overlay-value="{ value }">{{
+                            parseInt(value + 543)
+                          }}</template>
+                          <template #trigger>
+                            <q-input
+                              dense
+                              :class="inputEdit(isReadonly)"
+                              outlined
+                              :model-value="
+                                formData.year === 0
+                                  ? null
+                                  : Number(formData.year) + 543
+                              "
+                              :label="`${'ปีงบประมาณ'}`"
                             >
-                            </q-icon>
+                              <template v-slot:prepend>
+                                <q-icon
+                                  name="event"
+                                  class="cursor-pointer"
+                                  style="color: var(--q-primary)"
+                                >
+                                </q-icon>
+                              </template>
+                              <template v-if="formData.year" v-slot:append>
+                                <q-icon
+                                  name="cancel"
+                                  @click.stop.prevent="formData.year = 0"
+                                  class="cursor-pointer"
+                                />
+                              </template>
+                            </q-input>
                           </template>
-                          <template v-if="formData.year" v-slot:append>
-                            <q-icon
-                              name="cancel"
-                              @click.stop.prevent="formData.year = 0"
-                              class="cursor-pointer"
-                            />
-                          </template>
-                        </q-input>
-                      </template>
-                    </datepicker>
+                        </datepicker>
+                      </div>
+                    </div>
                   </div>
                 </div>
               </div>
+              <div class="col-12 row"><q-separator vertical /></div> 
+            </div>
+
+            <!-- อัพโหลดไฟล์ -->
+            <div class="col-sm-12 col-md-3 q-pa-md">
+              <q-card bordered class="row col-12" style="border: 1px solid #d6dee1">
+                <div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
+                  อัปโหลดไฟล์เอกสารหลักฐาน
+                </div>
+                <div class="col-12"><q-separator /></div>
+                <div class="col-12 q-pa-sm row">
+                  <q-file
+                    for="inputFiles"
+                    class="col-12"
+                    outlined
+                    dense
+                    v-model="formData.file"
+                    @added="uploadFile"
+                    label="ไฟล์เอกสารหลักฐาน"
+                    hide-bottom-space
+                    accept=".pdf,.xlsx,.docx,.png,.jpg"
+                    clearable
+                  >
+                    <template v-slot:prepend>
+                      <q-icon name="attach_file" color="primary" />
+                    </template>
+                    <template v-slot:after>
+                      <q-btn
+                      v-if="formData.file"
+                      size="14px"
+                      flat
+                      round
+                      dense
+                      color="add"
+                      icon="mdi-upload"
+                      @click="uploadFile"
+                      ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn>
+                    </template>
+                  </q-file>
+                </div>
+                <div
+                  v-if="formData.disciplineDisciplinary_DocResults.length > 0"
+                  class="col-xs-12 q-pa-sm row"
+                >
+                  <q-list
+                    v-for="data in formData.disciplineDisciplinary_DocResults"
+                    :key="data.id"
+                    class="full-width"
+                    bordered
+                    separator
+                  >
+                    <q-item clickable v-ripple>
+                      <q-item-section>{{ data.fileName }}</q-item-section>
+                      <q-space />
+                      <q-btn
+                        size="12px"
+                        flat
+                        round
+                        dense
+                        color="blue"
+                        icon="mdi-download"
+                        @click="downloadFile(data.pathName)"
+                        ><q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
+                      >
+                      <q-btn
+                        size="12px"
+                        flat
+                        round
+                        dense
+                        color="red"
+                        class="q-ml-sm"
+                        icon="mdi-delete-outline"
+                        @click="deleteFile(data.id)"
+                        ><q-tooltip>ลบไฟล์</q-tooltip></q-btn
+                      >
+                    </q-item>
+                  </q-list>
+                </div>
+                <div class="col-12 q-pa-sm" v-else>
+                  <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
+                </div>
+              </q-card>
+            </div>
+          
+            <div class="col-12 "><q-separator /></div>
+            <div class="row col-12 q-pa-sm">
+              <q-space />
+              <q-btn
+                for="ButtonOnSubmit"
+                id="formSubmit"
+                color="secondary"
+                label="บันทึก"
+                type="submit"
+                ><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn
+              >
             </div>
-          </div>
-          <q-separator />
-          <div class="row col-12 q-pa-sm">
-            <q-space />
-            <q-btn
-              for="ButtonOnSubmit"
-              id="formSubmit"
-              color="secondary"
-              label="บันทึก"
-              type="submit"
-              ><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn
-            >
           </div>
         </q-card>
       </form>
     </div>
-    <!-- อัพโหลดไฟล์ -->
-    <div class="col-sm-12 col-md-3">
-      <q-card bordered class="row col-12" style="border: 1px solid #d6dee1">
-        <div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
-          อัปโหลดไฟล์เอกสารหลักฐาน
-        </div>
-        <div class="col-12"><q-separator /></div>
-        <div class="col-12 q-pa-sm row">
-          <q-file
-            for="inputFiles"
-            class="col-11"
-            outlined
-            dense
-            v-model="formData.file"
-            @added="uploadFile"
-            label="ไฟล์เอกสารหลักฐาน"
-            hide-bottom-space
-            accept=".pdf,.xlsx,.docx,.png,.jpg"
-            clearable
-          >
-            <template v-slot:prepend>
-              <q-icon name="attach_file" color="primary" />
-            </template>
-          </q-file>
-
-          <div class="col-1 self-center text-center">
-            <q-btn
-              v-if="formData.file"
-              size="14px"
-              flat
-              round
-              dense
-              color="add"
-              icon="mdi-upload"
-              @click="uploadFile"
-              ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-            >
-          </div>
-        </div>
-        <div
-          v-if="formData.disciplineDisciplinary_DocResults.length > 0"
-          class="col-xs-12 q-pa-sm row"
-        >
-          <q-list
-            v-for="data in formData.disciplineDisciplinary_DocResults"
-            :key="data.id"
-            class="full-width"
-            bordered
-            separator
-          >
-            <q-item clickable v-ripple>
-              <q-item-section>{{ data.fileName }}</q-item-section>
-              <q-space />
-              <q-btn
-                size="12px"
-                flat
-                round
-                dense
-                color="blue"
-                icon="mdi-download"
-                @click="downloadFile(data.pathName)"
-                ><q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
-              >
-              <q-btn
-                size="12px"
-                flat
-                round
-                dense
-                color="red"
-                class="q-ml-sm"
-                icon="mdi-delete-outline"
-                @click="deleteFile(data.id)"
-                ><q-tooltip>ลบไฟล์</q-tooltip></q-btn
-              >
-            </q-item>
-          </q-list>
-        </div>
-        <div class="col-12 q-pa-sm" v-else>
-          <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
-        </div>
-      </q-card>
-    </div>
-  </div>
-
+    
   <PopupPersonal
     :modal="modalPersonal"
     :id="personId"
diff --git a/src/modules/11_discipline/components/4_Result/Table.vue b/src/modules/11_discipline/components/4_Result/Table.vue
index 387e41177..fd7d8a705 100644
--- a/src/modules/11_discipline/components/4_Result/Table.vue
+++ b/src/modules/11_discipline/components/4_Result/Table.vue
@@ -112,7 +112,7 @@ function filterFn() {
 <template>
   <div class="q-pb-sm row q-col-gutter-sm">
     <div class="q-gutter-sm" v-if="nornmalData == true"></div>
-    <div class="col-2">
+    <div class="col-xs-12 col-sm-4 col-md-3">
       <q-select
         v-model="statusFilter"
         label="สถานะ"
diff --git a/src/modules/11_discipline/components/6_BasicInformation/Director/Form.vue b/src/modules/11_discipline/components/6_BasicInformation/Director/Form.vue
index 9e06d5caf..76ec60df7 100644
--- a/src/modules/11_discipline/components/6_BasicInformation/Director/Form.vue
+++ b/src/modules/11_discipline/components/6_BasicInformation/Director/Form.vue
@@ -292,10 +292,10 @@ function updatemodalPersonal(modal: boolean) {
 <template>
   <form @submit.prevent.stop="onValidate">
     <q-card bordered>
-      <div class="col-12 q-pa-md">
+      <div class="col-12 row q-pa-md">
         <div class="row col-12 q-col-gutter-md">
-          <div class="col-12 q-gutter-y-sm" v-if="data === null">
-            <div class="row q-col-gutter-md items-start">
+          <div class="col-12" v-if="data === null">
+            <div class="row q-col-gutter-sm">
               <div class="col-12 col-sm-6 col-md-3">
                 <q-select
                   label="ค้นหาจาก"
@@ -311,7 +311,7 @@ function updatemodalPersonal(modal: boolean) {
                 />
               </div>
 
-              <div class="col-12 col-sm-6 col-md-6">
+              <div class="col-12 col-sm-6 col-md-9">
                 <q-input
                   ref="searchRef"
                   v-model="search"
@@ -321,22 +321,22 @@ function updatemodalPersonal(modal: boolean) {
                   dense
                   label="คำค้น"
                   :rules="[(val) => !!val || `กรุณากรอกคำค้น`]"
-                />
-              </div>
-
-              <div class="col-12 col-sm-6 col-md-3">
-                <q-btn
-                  color="primary"
-                  icon="search"
-                  label="ค้นหา"
-                  class="full-width q-pa-sm"
-                  @click="searchInput()"
                 >
-                </q-btn>
+                <template v-slot:after>
+                  <q-btn
+                    color="primary"
+                    icon="search"
+                    label="ค้นหา"
+                    class="full-width q-py-sm q-px-md"
+                    @click="searchInput()"
+                  >
+                  </q-btn>
+                </template>
+                </q-input>
               </div>
             </div>
 
-            <div class="col-12">
+            <div class="col-12 q-pt-sm">
               <d-table
                 ref="table"
                 :columns="columnsRespondent"
@@ -398,6 +398,7 @@ function updatemodalPersonal(modal: boolean) {
               </d-table>
             </div>
           </div>
+          <!-- <div class="col-12"><q-separator /></div> -->
 
           <div class="col-3">
             <q-input
diff --git a/src/modules/11_discipline/components/7_ListSuspend/DialogSendToCommand.vue b/src/modules/11_discipline/components/7_ListSuspend/DialogSendToCommand.vue
index dc6aa74df..0fa10f342 100644
--- a/src/modules/11_discipline/components/7_ListSuspend/DialogSendToCommand.vue
+++ b/src/modules/11_discipline/components/7_ListSuspend/DialogSendToCommand.vue
@@ -168,8 +168,8 @@ onMounted(() => {
     <q-card style="width: 1200px; max-width: 80vw">
       <DialogHeader tittle="ส่งไปออกคำสั่ง" :close="closeModal" />
       <q-separator />
-      <q-card-section class="q-pt-none">
-        <div class="row justify-between">
+      <q-card-section class="q-pa-md">
+        <div class="row">
           <div class="col-5">
             <q-toolbar style="padding: 0">
               <q-select
@@ -194,6 +194,7 @@ onMounted(() => {
               </q-select>
             </q-toolbar>
           </div>
+          <q-space />
 
           <div class="col-5">
             <q-toolbar style="padding: 0">
@@ -281,7 +282,7 @@ onMounted(() => {
           </template>
         </d-table>
       </q-card-section>
-
+      <q-separator />
       <q-card-actions align="right" class="bg-white text-teal">
         <q-btn
           label="ส่งไปออกคำสั่ง"
diff --git a/src/modules/11_discipline/components/8_AppealComplain/Form.vue b/src/modules/11_discipline/components/8_AppealComplain/Form.vue
index e83c9135e..79938705a 100644
--- a/src/modules/11_discipline/components/8_AppealComplain/Form.vue
+++ b/src/modules/11_discipline/components/8_AppealComplain/Form.vue
@@ -339,7 +339,7 @@ onMounted(() => {
 </script>
 <template>
   <div class="row q-col-gutter-xs">
-    <div class="col-sm-12 col-md-9">
+    <div class="col-12">
       <form @submit.prevent="validateForm">
         <q-card bordered>
           <div class="q-pa-md">
@@ -690,6 +690,7 @@ onMounted(() => {
 </template>
 
 <style lang="scss">
+
 .icon-color {
   color: #4154b3;
 }
diff --git a/src/modules/11_discipline/components/8_AppealComplain/MainPage.vue b/src/modules/11_discipline/components/8_AppealComplain/MainPage.vue
index a361cebab..aaf281727 100644
--- a/src/modules/11_discipline/components/8_AppealComplain/MainPage.vue
+++ b/src/modules/11_discipline/components/8_AppealComplain/MainPage.vue
@@ -276,134 +276,137 @@ onMounted(async () => {
     รายการอุทธรณ์/ร้องทุกข์
   </div>
   <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
-    <div class="row q-mb-sm">
-      <div>
-        <q-btn
-          id="addComplaints"
-          for="addComplaints"
-          size="12px"
-          flat
-          round
-          color="primary"
-          icon="mdi-plus"
-          @click="redirectToPageadd()"
-          ><q-tooltip>เพิ่มการอุทธรณ์/ร้องทุกข์</q-tooltip></q-btn
+    <div class="row q-mb-sm q-col-gutter-sm">
+        <div>
+          <q-btn
+            id="addComplaints"
+            for="addComplaints"
+            size="12px"
+            flat
+            round
+            color="primary"
+            icon="mdi-plus"
+            @click="redirectToPageadd()"
+            ><q-tooltip>เพิ่มการอุทธรณ์/ร้องทุกข์</q-tooltip></q-btn
+          >
+        </div>
+        <q-space />
+        <q-input
+          for="#search"
+          class="col-xs-12 col-sm-3 col-md-2"
+          standout
+          dense
+          v-model="filterKeyword"
+          ref="filterRef"
+          outlined
+          placeholder="ค้นหา"
+          @keydown.enter.prevent="filterFn"
         >
-      </div>
-    </div>
-    <div class="row col-12 q-col-gutter-sm q-mb-sm">
-      <div class="col-2">
-        <datepicker
-          menu-class-name="modalfix"
-          v-model="formData.year"
-          class="col-2"
-          :locale="'th'"
-          autoApply
-          year-picker
-          :enableTimePicker="false"
-          @update:model-value="dataUpdate"
-        >
-          <template #year="{ year }">{{ year + 543 }}</template>
-          <template #year-overlay-value="{ value }">{{
-            parseInt(value + 543)
-          }}</template>
-          <template #trigger>
-            <q-input
-              dense
-              lazy-rules
-              outlined
-              :model-value="
-                formData.year === 0 ? null : Number(formData.year) + 543
-              "
-              :label="`${'ปีงบประมาณ'}`"
-            >
-              <template v-if="formData.year" v-slot:append>
-                <q-icon
-                  name="cancel"
-                  @click.stop.prevent="yearAll"
-                  class="cursor-pointer"
-                />
-              </template>
-              <template v-slot:prepend>
-                <q-icon
-                  name="event"
-                  class="cursor-pointer"
-                  style="color: var(--q-primary)"
-                >
-                </q-icon>
-              </template>
-            </q-input>
+          <template v-slot:append>
+            <q-icon
+              v-if="filterKeyword !== ''"
+              name="clear"
+              class="cursor-pointer"
+              @click="resetFilter"
+            />
           </template>
-        </datepicker>
-      </div>
+        </q-input>
 
-      <div class="col-2">
         <q-select
-          v-model="formData.type"
-          label="ประเภท"
-          dense
+          id="visibleColumns"
+          for="visibleColumns"
+          v-model="dataStore.visibleColumns"
+          multiple
           outlined
+          dense
+          options-dense
+          :display-value="$q.lang.table.columns"
           emit-value
           map-options
-          option-label="name"
-          option-value="id"
-          :options="type"
-          @update:model-value="dataUpdate"
+          :options="dataStore.columns"
+          option-value="name"
+          options-cover
+          class="col-xs-12 col-sm-3 col-md-2"
         />
-      </div>
-      <div class="col-2">
-        <q-select
-          v-model="formData.status"
-          label="สถานะ"
-          dense
-          outlined
-          emit-value
-          map-options
-          option-label="name"
-          option-value="id"
-          :options="dataStore.statusOptions"
-          @update:model-value="dataUpdate"
-        />
-      </div>
-      <q-space />
-
-      <q-input
-        for="#search"
-        class="col-xs-12 col-sm-3 col-md-2"
-        standout
-        dense
-        v-model="filterKeyword"
-        ref="filterRef"
-        outlined
-        placeholder="ค้นหา"
-        @keydown.enter.prevent="filterFn"
-      >
-        <template v-slot:append>
-          <q-icon
-            v-if="filterKeyword !== ''"
-            name="clear"
-            class="cursor-pointer"
-            @click="resetFilter"
-          />
-        </template>
-      </q-input>
-
-      <q-select
-        id="visibleColumns"
-        for="visibleColumns"
-        v-model="dataStore.visibleColumns"
-        multiple
-        outlined
-        dense
-        options-dense
-        :display-value="$q.lang.table.columns"
-        emit-value
-        map-options
-        :options="dataStore.columns"
-        option-value="name"
-        options-cover
-        class="col-xs-12 col-sm-3 col-md-2"
-      />
+    </div>
+    <div class="col-12 row q-mb-sm">
+      <q-card bordered class="col-12 filter-card q-pa-sm">
+        <div class="row col-12 q-col-gutter-sm">
+          <div class="col-2">
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="formData.year"
+              class="col-2"
+              :locale="'th'"
+              autoApply
+              year-picker
+              :enableTimePicker="false"
+              @update:model-value="dataUpdate"
+            >
+              <template #year="{ year }">{{ year + 543 }}</template>
+              <template #year-overlay-value="{ value }">{{
+                parseInt(value + 543)
+              }}</template>
+              <template #trigger>
+                <q-input
+                  dense
+                  lazy-rules
+                  outlined
+                  :model-value="
+                    formData.year === 0 ? null : Number(formData.year) + 543
+                  "
+                  :label="`${'ปีงบประมาณ'}`"
+                >
+                  <template v-if="formData.year" v-slot:append>
+                    <q-icon
+                      name="cancel"
+                      @click.stop.prevent="yearAll"
+                      class="cursor-pointer"
+                    />
+                  </template>
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+          <div class="col-2">
+            <q-select
+              v-model="formData.type"
+              label="ประเภท"
+              dense
+              outlined
+              emit-value
+              map-options
+              option-label="name"
+              option-value="id"
+              :options="type"
+              @update:model-value="dataUpdate"
+            />
+          </div>
+          <div class="col-2">
+            <q-select
+              v-model="formData.status"
+              label="สถานะ"
+              dense
+              outlined
+              emit-value
+              map-options
+              option-label="name"
+              option-value="id"
+              :options="dataStore.statusOptions"
+              @update:model-value="dataUpdate"
+            />
+          </div>
+          
+        </div>
+      </q-card>
     </div>
 
     <div class="col-12">
@@ -481,4 +484,8 @@ onMounted(async () => {
   <DialogStatus :modal="modalStatusEdit" :data="dataRow" :close="close" />
 </template>
 
-<style scoped></style>
+<style scoped>
+.filter-card {
+  background-color: #f1f1f1b0;
+}
+</style>
diff --git a/src/modules/11_discipline/components/UploadFile.vue b/src/modules/11_discipline/components/UploadFile.vue
index 2f9206894..70a5b0755 100644
--- a/src/modules/11_discipline/components/UploadFile.vue
+++ b/src/modules/11_discipline/components/UploadFile.vue
@@ -127,16 +127,16 @@ function downloadFile(link: string) {
 </script>
 
 <template>
-  <q-card flat class="q-pa-md" bordered>
+  <div>
     <q-card bordered style="border: 1px solid #d6dee1">
       <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
         {{ title }}
       </div>
       <div class="col-12"><q-separator /></div>
       <div v-if="!isReadonly" class="row">
-        <div class="col-12 q-pa-sm row">
+        <div class="col-12 q-px-sm q-pt-sm row">
           <q-file
-            class="col-11"
+            class="col-12"
             outlined
             dense
             ref="fileRef"
@@ -150,21 +150,20 @@ function downloadFile(link: string) {
             <template v-slot:prepend>
               <q-icon name="attach_file" />
             </template>
+            <template v-slot:after>
+              <q-btn
+                v-if="file"
+                size="14px"
+                flat
+                round
+                dense
+                color="add"
+                icon="mdi-upload"
+                @click="uploadFile()"
+                ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+              >
+            </template>
           </q-file>
-
-          <div class="col-1 self-center">
-            <q-btn
-              v-if="file"
-              size="14px"
-              flat
-              round
-              dense
-              color="add"
-              icon="mdi-upload"
-              @click="uploadFile()"
-              ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-            >
-          </div>
         </div>
       </div>
 
@@ -212,9 +211,9 @@ function downloadFile(link: string) {
         </q-list>
       </div>
 
-      <div class="col-12 q-ma-xs" v-if="props.files.length == 0">
-        <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
+      <div class="col-12  q-pa-sm" v-if="props.files.length == 0">
+        <q-card class="q-py-sm q-px-md" bordered> ไม่มีรายการเอกสาร </q-card>
       </div>
     </q-card>
-  </q-card>
+  </div>
 </template>
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index ce5834086..8357baf27 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -164,19 +164,17 @@ const thaiOptions: Intl.DateTimeFormatOptions = {
         <div
           v-if="totalInbox != 0"
           ref="scrollTargetRef"
-          class="q-pa-md"
           style="max-height: 90%; overflow: auto"
         >
           <q-infinite-scroll
             @load="onLoad"
             :offset="250"
-            class="q-pa-md"
+            class="q-pa-sm"
             :scroll-target="scrollTargetRef"
           >
             <q-list
               v-for="(contact, index) in inboxList"
               :key="contact.no"
-              class="q-pt-sm"
             >
               <q-item
                 clickable
diff --git a/tsconfig.json b/tsconfig.json
index 7f365145e..3a8d5e262 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -13,6 +13,8 @@
   ],
   
   "compilerOptions": {
+    "typeRoots": ["./typings", "./node_modules/@types"],
+    "types": ["quasar-ui-q-draggable-table"],
     /* other configs */
     "paths": {
       "@/*": [