diff --git a/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue b/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue
index 1bddcd329..cdac0c77f 100644
--- a/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue
+++ b/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue
@@ -657,7 +657,7 @@ onMounted(async () => {
     </div>
     <form @submit.prevent="validateForm" class="col-12 row">
       <div class="col-12 row">
-        <div class="col-sm-12 col-md-9 row no-wrap">
+        <div class="col-xs-12 col-sm-12 col-md-9 row no-wrap">
           <div class="col-12 row q-pl-md q-py-md">
             <div class="row col-12 q-col-gutter-md">
               <div class="col-xs-12 col-sm-5" id="respondentType">
@@ -1366,6 +1366,7 @@ onMounted(async () => {
           </div>
           <div class="row"><q-separator vertical /></div> 
         </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">
@@ -1560,6 +1561,7 @@ onMounted(async () => {
             </div>
           </div>
         </div>
+        
         <div class="col-12 "><q-separator /></div>
         <div class="row col-12 q-pa-sm" v-if="!isReadonly">
           <q-space />
diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue
index cc013c673..c43848b3a 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue
@@ -182,7 +182,7 @@ const dateEndInputStyle = computed(() => {
   if (formData.disciplinaryDateStart) {
     const currentDate = new Date();
     const investigationDateEnd = new Date(formData.disciplinaryDateEnd as Date);
-    
+
     const isInNext7Days =
       investigationDateEnd >= currentDate &&
       investigationDateEnd <=
@@ -378,11 +378,11 @@ async function fetchDatadetail() {
         prefix: item.prefix,
         firstName: item.firstName,
         lastName: item.lastName,
-        position: item.position == '' ? "-" : item.position,
-        email: item.email == '' ? '-' : item.email,
-        phone: item.phone == '' ? '-' : item.phone,
-        commandNo: item.commandNo == '' ? '-' : item.commandNo,
-        duty: item.duty == '' ? '-' : item.duty,
+        position: item.position == "" ? "-" : item.position,
+        email: item.email == "" ? "-" : item.email,
+        phone: item.phone == "" ? "-" : item.phone,
+        commandNo: item.commandNo == "" ? "-" : item.commandNo,
+        duty: item.duty == "" ? "-" : item.duty,
         check: "props",
       }));
 
@@ -476,8 +476,8 @@ async function fetchDListDirector() {
         firstName: e.firstName,
         lastName: e.lastName,
         position: e.position,
-        email: e.email == '' ? '-' : e.email,
-        phone: e.phone == '' ? '-' : e.phone,
+        email: e.email == "" ? "-" : e.email,
+        phone: e.phone == "" ? "-" : e.phone,
         total: e.total,
         duty: e.duty,
       }));
@@ -684,98 +684,93 @@ onMounted(async () => {
 </script>
 <template>
   <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"
-      >
+    <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>
-      <q-separator />
     </div>
-    <form @submit.prevent="validateForm" class="col-12 row">
-      <div class="col-12 row">
-        <div class="col-sm-12 col-md-9 row no-wrap">
-          
-          <div class="col-12 row q-pl-md q-py-md">
-            <div class="row col-12 q-col-gutter-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'
-            )"
-                >
-                  <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-8"
-                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
-                "
-              >
-                <q-btn
-                  class="q-pa-sm"
-                  color="orange"
-                  label="ส่งรายชื่อไปออกคำสั่งยุติเรื่อง"
-                  @click="openModal"
-                  outline
-                />
+    <form @submit.prevent="validateForm" class="col-12 row">
+      <div class="row col-12">
+        <div class="col-xs-12 col-sm-12 col-md-9 row no-wrap">
+          <div class="col-12 row q-pl-md q-py-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
+                  "
+                >
+                  <q-btn
+                    class="q-pa-sm"
+                    color="orange"
+                    label="ส่งรายชื่อไปออกคำสั่งยุติเรื่อง"
+                    @click="openModal"
+                  />
+                </div>
               </div>
               <div
                 class="row col-12"
@@ -871,7 +866,9 @@ onMounted(async () => {
                           </q-td>
                           <q-td auto-width>
                             <q-btn
-                              v-if="!isReadonly && props.row.isAncestorDNA === false"
+                              v-if="
+                                !isReadonly && props.row.isAncestorDNA === false
+                              "
                               size="12px"
                               flat
                               round
@@ -890,248 +887,129 @@ onMounted(async () => {
                 </q-card>
               </div>
 
-              <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
+              <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
                       "
-                      v-slot:append
+                      :label="`${'วันที่มีคำสั่งให้สอบสวน'}`"
                     >
-                      <q-icon
-                        name="cancel"
-                        @click.stop.prevent="
-                          formData.disciplinaryDateInvestigation = null
+                      <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
                         "
-                        class="cursor-pointer"
-                      />
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
+                        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
+                <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
                       "
-                      v-slot:append
+                      :label="`${'วันที่รับทราบข้อกล่าวหา'}`"
                     >
-                      <q-icon
-                        name="cancel"
-                        @click.stop.prevent="
-                          formData.disciplinaryDateAllegation = null
+                      <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
                         "
-                        class="cursor-pointer"
-                      />
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-              <datepicker
-                :readonly="isReadonly"
-                menu-class-name="modalfix"
-                for="#dateEvident"
-                v-model="formData.disciplinaryDateEvident"
-                :locale="'th'"
-                autoApply
-                class="col-xs-12 col-sm-3"
-                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="disciplinaryDateEvidentRef"
-                    outlined
-                    dense
-                    hide-bottom-space
-                    :class="inputEdit(isReadonly)"
-                    :model-value="
-                      formData.disciplinaryDateEvident != null
-                        ? date2Thai(formData.disciplinaryDateEvident)
-                        : null
-                    "
-                    :label="`${'วันที่สรุปพยานหลักฐาน'}`"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        color="primary"
+                        v-slot:append
                       >
-                      </q-icon>
-                    </template>
-                    <template
-                      v-if="
-                        formData.disciplinaryDateEvident &&
-                        isReadonly === false
-                      "
-                      v-slot:append
-                    >
-                      <q-icon
-                        name="cancel"
-                        @click.stop.prevent="
-                          formData.disciplinaryDateEvident = null
-                        "
-                        class="cursor-pointer"
-                      />
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-            
-              <datepicker
-                :readonly="isReadonly"
-                menu-class-name="modalfix"
-                for="#dateResult"
-                v-model="formData.disciplinaryDateResult"
-                :locale="'th'"
-                autoApply
-                class="col-xs-12 col-sm-3"
-                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>
+                        <q-icon
+                          name="cancel"
+                          @click.stop.prevent="
+                            formData.disciplinaryDateAllegation = null
+                          "
+                          class="cursor-pointer"
+                        />
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+              </div>
 
-                <template #trigger>
-                  <q-input
-                    :readonly="isReadonly"
-                    ref="disciplinaryDateResultRef"
-                    outlined
-                    :class="inputEdit(isReadonly)"
-                    dense
-                    hide-bottom-space
-                    :model-value="
-                      formData.disciplinaryDateResult != null
-                        ? date2Thai(formData.disciplinaryDateResult)
-                        : null
-                    "
-                    :label="`${'วันที่รายงานผลการสอบสวน'}`"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        color="primary"
-                      >
-                      </q-icon>
-                    </template>
-                    <template
-                      v-if="
-                        formData.disciplinaryDateResult &&
-                        isReadonly === false
-                      "
-                      v-slot:append
-                    >
-                      <q-icon
-                        name="cancel"
-                        @click.stop.prevent="
-                          formData.disciplinaryDateResult = null
-                        "
-                        class="cursor-pointer"
-                      />
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
               <div class="row col-12">
                 <q-card
                   bordered
@@ -1216,9 +1094,7 @@ onMounted(async () => {
                               >
                                 <q-icon
                                   name="cancel"
-                                  @click.stop.prevent="
-                                    formData.daysExtend = 0
-                                  "
+                                  @click.stop.prevent="formData.daysExtend = 0"
                                   class="cursor-pointer"
                                 />
                               </template>
@@ -1253,20 +1129,20 @@ onMounted(async () => {
                                   :class="inputEditExtend(isReadonly)"
                                   :readonly="
                                     isReadonly ||
-                                    formData.disciplinaryExtendHistory
-                                      .length > 0
+                                    formData.disciplinaryExtendHistory.length >
+                                      0
                                   "
                                   outlined
                                   dense
                                   borderless
                                   hide-bottom-space
                                   :model-value="
-                                    formData.disciplinaryDateStart
-                                      ? date2Thai(
-                                          formData.disciplinaryDateStart as Date
-                                        )
-                                      : null
-                                  "
+                                      formData.disciplinaryDateStart
+                                        ? date2Thai(
+                                            formData.disciplinaryDateStart as Date
+                                          )
+                                        : null
+                                    "
                                   :label="`${'วันที่เริ่มการสอบสวน'}`"
                                 >
                                   <template v-slot:prepend>
@@ -1289,10 +1165,8 @@ onMounted(async () => {
                                     <q-icon
                                       name="cancel"
                                       @click.stop.prevent="
-                                        (formData.disciplinaryDateStart =
-                                          null),
-                                          (formData.disciplinaryDateEnd =
-                                            null)
+                                        (formData.disciplinaryDateStart = null),
+                                          (formData.disciplinaryDateEnd = null)
                                       "
                                       class="cursor-pointer"
                                     />
@@ -1333,20 +1207,20 @@ onMounted(async () => {
                                   :readonly="
                                     formData.disciplinaryDateStart === null ||
                                     isReadonly ||
-                                    formData.disciplinaryExtendHistory
-                                      .length > 0
+                                    formData.disciplinaryExtendHistory.length >
+                                      0
                                   "
                                   outlined
                                   dense
                                   hide-bottom-space
                                   borderless
                                   :model-value="
-                                    formData.disciplinaryDateEnd
-                                      ? date2Thai(
-                                          formData.disciplinaryDateEnd as Date
-                                        )
-                                      : null
-                                  "
+                                      formData.disciplinaryDateEnd
+                                        ? date2Thai(
+                                            formData.disciplinaryDateEnd as Date
+                                          )
+                                        : null
+                                    "
                                   :label="`${'วันที่สิ้นสุดการสอบสวน'}`"
                                 >
                                   <template v-slot:prepend>
@@ -1410,6 +1284,127 @@ onMounted(async () => {
                 </q-card>
               </div>
 
+              <datepicker
+                :readonly="isReadonly"
+                menu-class-name="modalfix"
+                for="#dateEvident"
+                v-model="formData.disciplinaryDateEvident"
+                :locale="'th'"
+                autoApply
+                class="col-xs-12 col-sm-3"
+                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="disciplinaryDateEvidentRef"
+                    outlined
+                    dense
+                    hide-bottom-space
+                    :class="inputEdit(isReadonly)"
+                    :model-value="
+                      formData.disciplinaryDateEvident != null
+                        ? date2Thai(formData.disciplinaryDateEvident)
+                        : null
+                    "
+                    :label="`${'วันที่สรุปพยานหลักฐาน'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        color="primary"
+                      >
+                      </q-icon>
+                    </template>
+                    <template
+                      v-if="
+                        formData.disciplinaryDateEvident && isReadonly === false
+                      "
+                      v-slot:append
+                    >
+                      <q-icon
+                        name="cancel"
+                        @click.stop.prevent="
+                          formData.disciplinaryDateEvident = null
+                        "
+                        class="cursor-pointer"
+                      />
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+
+              <datepicker
+                :readonly="isReadonly"
+                menu-class-name="modalfix"
+                for="#dateResult"
+                v-model="formData.disciplinaryDateResult"
+                :locale="'th'"
+                autoApply
+                class="col-xs-12 col-sm-3"
+                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="disciplinaryDateResultRef"
+                    outlined
+                    :class="inputEdit(isReadonly)"
+                    dense
+                    hide-bottom-space
+                    :model-value="
+                      formData.disciplinaryDateResult != null
+                        ? date2Thai(formData.disciplinaryDateResult)
+                        : null
+                    "
+                    :label="`${'วันที่รายงานผลการสอบสวน'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        color="primary"
+                      >
+                      </q-icon>
+                    </template>
+                    <template
+                      v-if="
+                        formData.disciplinaryDateResult && isReadonly === false
+                      "
+                      v-slot:append
+                    >
+                      <q-icon
+                        name="cancel"
+                        @click.stop.prevent="
+                          formData.disciplinaryDateResult = null
+                        "
+                        class="cursor-pointer"
+                      />
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+
               <div class="row col-12">
                 <q-card
                   bordered
@@ -1472,9 +1467,7 @@ onMounted(async () => {
                           <q-td class="text-right">
                             <!-- แก้ไขกรรมการ -->
                             <q-btn
-                              v-if="
-                                !isReadonly && props.row.check === 'props'
-                              "
+                              v-if="!isReadonly && props.row.check === 'props'"
                               dense
                               size="12px"
                               flat
@@ -1505,84 +1498,86 @@ onMounted(async () => {
                   </div>
                 </q-card>
               </div>
-              <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="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-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()"
+                <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-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()"
-                />
+                  <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">
@@ -1682,8 +1677,8 @@ onMounted(async () => {
                         option-value="id"
                         use-input
                         @filter="(inputValue: any,
-              doneFn: Function) => investigateDis.filterFnOptionsType(inputValue, doneFn, 'offenseDetailsOps'
-              )"
+                doneFn: Function) => investigateDis.filterFnOptionsType(inputValue, doneFn, 'offenseDetailsOps'
+                )"
                         @update:model-value="changeFormData()"
                         ><template v-slot:no-option>
                           <q-item>
@@ -1746,79 +1741,87 @@ onMounted(async () => {
               </div>
             </div>
           </div>
-          <div class="row"><q-separator vertical /></div> 
+          <div class="row"><q-separator vertical /></div>
         </div>
-
         <!-- อัพโหลดไฟล์ -->
-        <div class="col-sm-12 col-md-3 q-col-gutter-y-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_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>
-        <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 class="col-xs-12 col-sm-12 col-md-3">
+          <div class="q-col-gutter-md row q-pa-md">
+            <!-- ยังไม่มี api  -->
+            <div class="col-xs-12">
+              <UploadFile
+                title="อัปโหลดไฟล์เอกสารที่เกี่ยวข้องกับการสอบสวน"
+                label="เลือกไฟล์"
+                :files="disciplineDisciplinary_DocRelevants"
+                :id="id"
+                type="relevant"
+                :fetchData="props.fetchData"
+                :is-readonly="isReadonly"
+                :return-count="returnCount"
+              />
+            </div>
+            <div class="col-xs-12">
+              <UploadFile
+                title="อัปโหลดหลักฐานสนับสนุนข้อกล่าวหา"
+                label="เลือกไฟล์"
+                :files="disciplineDisciplinary_DocSummaryEvidences"
+                :id="id"
+                type="summaryEvidence"
+                :fetchData="props.fetchData"
+                :is-readonly="isReadonly"
+                :return-count="returnCount"
+              />
+            </div>
+            <div class="col-xs-12">
+              <UploadFile
+                title="อัปโหลดบันทึกถ้อยคำของผู้กล่าวหา"
+                label="เลือกไฟล์"
+                :files="disciplineDisciplinary_DocRecordAccusers"
+                :id="id"
+                type="recordAccuser"
+                :fetchData="props.fetchData"
+                :is-readonly="isReadonly"
+                :return-count="returnCount"
+              />
+            </div>
+            <div class="col-xs-12">
+              <UploadFile
+                title="อัปโหลดพยานและการบันทึกถ้อยคำ"
+                label="เลือกไฟล์"
+                :files="disciplineDisciplinary_DocWitnessess"
+                :id="id"
+                type="witnesses"
+                :fetchData="props.fetchData"
+                :is-readonly="isReadonly"
+                :return-count="returnCount"
+              />
+            </div>
+            <div class="col-xs-12">
+              <UploadFile
+                title="อัปโหลดไฟล์เอกสารหลักฐานอื่น ๆ"
+                label="เลือกไฟล์"
+                :files="disciplineDisciplinary_DocOthers"
+                :id="id"
+                type="other"
+                :fetchData="props.fetchData"
+                :is-readonly="isReadonly"
+                :return-count="returnCount"
+              />
+            </div>
+          </div>
         </div>
       </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>
     </form>
   </div>