diff --git a/src/interface/request/main/main.ts b/src/interface/request/main/main.ts
index efb3da8ad..3006d32d1 100644
--- a/src/interface/request/main/main.ts
+++ b/src/interface/request/main/main.ts
@@ -447,6 +447,12 @@ const menuList = readonly<any[]>([
       },
       {
         key: 11.5,
+        label: "รายชื่อผู้ถูกพักราชการ",
+        path: "disciplineListSuspend",
+        role: "discipline",
+      },
+      {
+        key: 11.6,
         label: "รายงาน",
         path: "disciplineReport",
         role: "discipline",
diff --git a/src/modules/11_discipline/components/1_Complaint/Form.vue b/src/modules/11_discipline/components/1_Complaint/Form.vue
index 3a39d1898..6c12f6979 100644
--- a/src/modules/11_discipline/components/1_Complaint/Form.vue
+++ b/src/modules/11_discipline/components/1_Complaint/Form.vue
@@ -444,493 +444,540 @@ onMounted(() => {
 });
 </script>
 <template>
-  <div class="col-12 q-mt-sm">
-    <q-card flat bordered>
+  <div class="row col-12 bg-white">
+    <div class="col-sm-12 col-md-9">
       <form @submit.prevent="validateForm">
-        <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-3" id="respondentType">
-              <q-select
-                for="SelectrespondentType"
-                v-model="formData.respondentType"
-                ref="respondentTypeRef"
-                dense
-                outlined
-                :readonly="formData.status !== 'NEW' && formData.status !== ''"
-                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,
+        <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-3" id="respondentType">
+                  <q-select
+                    for="SelectrespondentType"
+                    v-model="formData.respondentType"
+                    ref="respondentTypeRef"
+                    dense
+                    outlined
+                    :readonly="
+                      formData.status !== 'NEW' && formData.status !== ''
+                    "
+                    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'
                 )"
-              >
-                <template v-slot:no-option>
-                  <q-item>
-                    <q-item-section class="text-grey">
-                      ไม่มีข้อมูล
-                    </q-item-section>
-                  </q-item>
-                </template>
-              </q-select>
-            </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-3"
-              v-if="formData.respondentType === 'ORGANIZATION'"
-              id="organizationId"
-            >
-              <q-select
-                for="inputOffice"
-                name="organizationId"
-                ref="organizationIdRef"
-                dense
-                hide-bottom-space
-                :readonly="formData.status !== 'NEW' && formData.status !== ''"
-                outlined
-                option-label="name"
-                option-value="id"
-                emit-value
-                map-options
-                v-model="formData.organizationId"
-                :options="complainstStore.organizationIdOp"
-                label="เลือกสำนักงาน"
-                :rules="[(val) => !!val || `${'กรุณาเลือกสำนักงาน'}`]"
-                lazy-rules
-              />
-            </div>
+                <div
+                  class="col-xs-12 col-sm-3"
+                  v-if="formData.respondentType === 'ORGANIZATION'"
+                  id="organizationId"
+                >
+                  <q-select
+                    for="inputOffice"
+                    name="organizationId"
+                    ref="organizationIdRef"
+                    dense
+                    hide-bottom-space
+                    :readonly="
+                      formData.status !== 'NEW' && formData.status !== ''
+                    "
+                    outlined
+                    option-label="name"
+                    option-value="id"
+                    emit-value
+                    map-options
+                    v-model="formData.organizationId"
+                    :options="complainstStore.organizationIdOp"
+                    label="เลือกสำนักงาน"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกสำนักงาน'}`]"
+                    lazy-rules
+                  />
+                </div>
 
-            <div class="col-xs-12 col-sm-3" id="consideredAgency">
-              <q-select
-                ref="consideredAgencyRef"
-                for="selectAgency"
-                dense
-                outlined
-                v-model="formData.consideredAgency"
-                :options="complainstStore.consideredAgencytoptions"
-                label="หน่วยงานที่พิจารณา"
-                option-value="id"
-                option-label="name"
-                :readonly="formData.status !== 'NEW' && formData.status !== ''"
-                hide-bottom-space
-                emit-value
-                map-options
-                :rules="[(val) => !!val || `${'กรุณาเลือกหน่วยงาน'}`]"
-                lazy-rules
-                use-input
-                @filter="(inputValue: any,
+                <div class="col-xs-12 col-sm-3" id="consideredAgency">
+                  <q-select
+                    ref="consideredAgencyRef"
+                    for="selectAgency"
+                    dense
+                    outlined
+                    v-model="formData.consideredAgency"
+                    :options="complainstStore.consideredAgencytoptions"
+                    label="หน่วยงานที่พิจารณา"
+                    option-value="id"
+                    option-label="name"
+                    :readonly="
+                      formData.status !== 'NEW' && formData.status !== ''
+                    "
+                    hide-bottom-space
+                    emit-value
+                    map-options
+                    :rules="[(val) => !!val || `${'กรุณาเลือกหน่วยงาน'}`]"
+                    lazy-rules
+                    use-input
+                    @filter="(inputValue: any,
                 doneFn: Function) => filterSelector(inputValue, doneFn, 'filterconsideredAgencytoptions'
                 )"
-              >
-                <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"
-                style="border: 1px solid #d6dee1"
-              >
+                  >
+                    <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="row col-12"
+                  v-if="formData.respondentType === 'PERSON'"
                 >
-                  ผู้ถูกร้องเรียน
-                  <q-btn
-                    v-if="formData.status === 'NEW' || formData.status === ''"
-                    size="12px"
-                    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>
-                <div class="col-xs-12 q-pa-sm">
-                  <d-table
-                    ref="table"
-                    :columns="complainstStore.columns"
-                    :rows="complainstStore.rowsAdd"
-                    row-key="idcard"
-                    flat
+                  <q-card
                     bordered
-                    :paging="true"
-                    dense
-                    class="custom-header-table"
-                    :visible-columns="complainstStore.visibleColumns"
+                    class="row col-12"
+                    style="border: 1px solid #d6dee1"
                   >
-                    <template v-slot:header="props">
-                      <q-tr :props="props">
-                        <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">
-                        <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 == 'info'">
-                            <router-link :to="`/registry/${props.row.personId}`"
-                              ><q-icon name="info" color="info" size="sm"
-                                ><q-tooltip>ดูข้อมูลในทะเบียนประวัติ</q-tooltip>
-                              </q-icon></router-link
+                    <div
+                      class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
+                    >
+                      ผู้ถูกร้องเรียน
+                      <q-btn
+                        v-if="
+                          formData.status === 'NEW' || formData.status === ''
+                        "
+                        size="12px"
+                        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>
+                    <div class="col-xs-12 q-pa-sm">
+                      <d-table
+                        ref="table"
+                        :columns="complainstStore.columns"
+                        :rows="complainstStore.rowsAdd"
+                        row-key="idcard"
+                        flat
+                        bordered
+                        :paging="true"
+                        dense
+                        class="custom-header-table"
+                        :visible-columns="complainstStore.visibleColumns"
+                      >
+                        <template v-slot:header="props">
+                          <q-tr :props="props">
+                            <q-th
+                              v-for="col in props.cols"
+                              :key="col.name"
+                              :props="props"
+                              style="color: #000000; font-weight: 500"
                             >
-                            {{ col.value }}
-                          </div>
-                          <div
-                            v-else-if="col.name === 'organization'"
-                            class="table_ellipsis"
-                          >
-                            {{ props.row.organization }}
-                          </div>
-                          <div v-else>
-                            {{ col.value }}
-                          </div>
-                        </q-td>
-                        <q-td auto-width>
-                          <q-btn
-                            v-if="
-                              formData.status === 'NEW' ||
-                              formData.status === ''
-                            "
-                            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>
+                              <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">
+                            <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 == 'info'">
+                                <router-link
+                                  :to="`/registry/${props.row.personId}`"
+                                  ><q-icon name="info" color="info" size="sm"
+                                    ><q-tooltip
+                                      >ดูข้อมูลในทะเบียนประวัติ</q-tooltip
+                                    >
+                                  </q-icon></router-link
+                                >
+                                {{ col.value }}
+                              </div>
+                              <div
+                                v-else-if="col.name === 'organization'"
+                                class="table_ellipsis"
+                              >
+                                {{ props.row.organization }}
+                              </div>
+                              <div v-else>
+                                {{ col.value }}
+                              </div>
+                            </q-td>
+                            <q-td auto-width>
+                              <q-btn
+                                v-if="
+                                  formData.status === 'NEW' ||
+                                  formData.status === ''
+                                "
+                                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>
-              </q-card>
-            </div>
-            <div class="col-xs-12 col-sm-12" id="title">
-              <q-input
-                for="inputTopicComplaint"
-                ref="titleRef"
-                dense
-                outlined
-                :readonly="formData.status !== 'NEW' && formData.status !== ''"
-                hide-bottom-space
-                v-model="formData.title"
-                :rules="[(val) => !!val || 'กรุณาการข้อมูล']"
-                lazy-rules
-                label="เรื่องร้องเรียน"
-                type="textarea"
-                rows="5"
-              />
-            </div>
-
-            <div class="col-xs-12 col-sm-12" id="description">
-              <q-input
-                for="inputDetail"
-                ref="descriptionRef"
-                dense
-                outlined
-                :readonly="formData.status !== 'NEW' && formData.status !== ''"
-                hide-bottom-space
-                v-model="formData.description"
-                :rules="[(val) => !!val || 'กรุณาการข้อมูล']"
-                lazy-rules
-                label="รายละเอียดเรื่องร้องเรียน"
-                type="textarea"
-                rows="5"
-              />
-            </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="formData.status !== 'NEW' && formData.status !== ''"
-                :enableTimePicker="false"
-                week-start="0"
-              >
-                <template #year="{ year }">
-                  {{ year + 543 }}
-                </template>
-                <template #year-overlay-value="{ value }">
-                  {{ parseInt(value + 543) }}
-                </template>
-                <template #trigger>
+                <div class="col-xs-12 col-sm-12" id="title">
                   <q-input
-                    for="inputDatereceive"
-                    ref="dateReceivedRef"
-                    outlined
+                    for="inputTopicComplaint"
+                    ref="titleRef"
                     dense
+                    outlined
                     :readonly="
                       formData.status !== 'NEW' && formData.status !== ''
                     "
                     hide-bottom-space
-                    class="full-width datepicker"
-                    :model-value="
-                      formData.dateReceived != null
-                        ? date2Thai(formData.dateReceived)
-                        : null
-                    "
-                    label="วันที่รับเรื่อง"
-                    :rules="[
-                      (val) => !!val || `${'กรุณาเลือกวันที่รับเรื่อง'}`,
-                    ]"
+                    v-model="formData.title"
+                    :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>
+                    label="เรื่องร้องเรียน"
+                    type="textarea"
+                    rows="5"
+                  />
+                </div>
 
-            <div class="col-xs-12 col-sm-3" id="levelConsideration">
-              <q-select
-                for="selectConsiderationLevel"
-                ref="levelConsiderationRef"
-                dense
-                outlined
-                :readonly="formData.status !== 'NEW' && formData.status !== ''"
-                v-model="formData.levelConsideration"
-                :options="levelConsiderationtoptions"
-                label="ระดับการพิจารณา"
-                option-value="id"
-                option-label="name"
-                emit-value
-                hide-bottom-space
-                map-options
-                :rules="[(val) => !!val || `${'กรุณาเลือกระดับการพิจารณา'}`]"
-                lazy-rules
-                @update:model-value="selectLevel(formData.levelConsideration)"
-              />
-            </div>
-
-            <div class="col-xs-12 col-sm-3" id="dateConsideration">
-              <datepicker
-                menu-class-name="modalfix"
-                v-model="formData.dateConsideration"
-                @update:model-value="selectLevel(formData.levelConsideration)"
-                :locale="'th'"
-                :readonly="formData.status !== 'NEW' && formData.status !== ''"
-                autoApply
-                borderless
-                :enableTimePicker="false"
-                week-start="0"
-              >
-                <template #year="{ year }">
-                  {{ year + 543 }}
-                </template>
-                <template #year-overlay-value="{ value }">
-                  {{ parseInt(value + 543) }}
-                </template>
-                <template #trigger>
+                <div class="col-xs-12 col-sm-12" id="description">
                   <q-input
-                    for="inputDateconsideration"
-                    ref="dateConsiderationRef"
-                    outlined
+                    for="inputDetail"
+                    ref="descriptionRef"
                     dense
-                    class="full-width datepicker"
-                    :model-value="
-                      formData.dateConsideration != null
-                        ? date2Thai(formData.dateConsideration)
-                        : null
-                    "
-                    :readonly="
-                      formData.status !== 'NEW' && formData.status !== ''
-                    "
-                    label="วันที่กำหนดวันพิจารณา"
-                    hide-bottom-space
-                    :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="offenseDetails">
-              <q-select
-                for="selectOffenseDescription"
-                ref="offenseDetailsRef"
-                dense
-                outlined
-                :readonly="formData.status !== 'NEW' && formData.status !== ''"
-                v-model="formData.offenseDetails"
-                :options="offenseDetailstoptions"
-                label="ลักษณะความผิด"
-                option-value="id"
-                option-label="name"
-                emit-value
-                hide-bottom-space
-                map-options
-                :rules="[(val) => !!val || `${'กรุณาเลือกลักษณะความผิด'}`]"
-                lazy-rules
-              />
-            </div>
-
-            <div class="col-xs-12 col-sm-3" id="dateNotification">
-              <datepicker
-                menu-class-name="modalfix"
-                v-model="formData.dateNotification"
-                :locale="'th'"
-                autoApply
-                :readonly="formData.status !== 'NEW' && formData.status !== ''"
-                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="inputDatewarn"
-                    ref="dateNotificationRef"
                     outlined
-                    dense
                     :readonly="
                       formData.status !== 'NEW' && formData.status !== ''
                     "
                     hide-bottom-space
-                    class="full-width datepicker"
-                    :model-value="
-                      formData.dateNotification != null
-                        ? date2Thai(formData.dateNotification)
-                        : null
+                    v-model="formData.description"
+                    :rules="[(val) => !!val || 'กรุณาการข้อมูล']"
+                    lazy-rules
+                    label="รายละเอียดเรื่องร้องเรียน"
+                    type="textarea"
+                    rows="5"
+                  />
+                </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="
+                      formData.status !== 'NEW' && formData.status !== ''
                     "
-                    label="วันที่แจ้งเตือนล่วงหน้า"
+                    :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="inputDatereceive"
+                        ref="dateReceivedRef"
+                        outlined
+                        dense
+                        :readonly="
+                          formData.status !== 'NEW' && formData.status !== ''
+                        "
+                        hide-bottom-space
+                        class="full-width datepicker"
+                        :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
+                    for="selectConsiderationLevel"
+                    ref="levelConsiderationRef"
+                    dense
+                    outlined
+                    :readonly="
+                      formData.status !== 'NEW' && formData.status !== ''
+                    "
+                    v-model="formData.levelConsideration"
+                    :options="levelConsiderationtoptions"
+                    label="ระดับการพิจารณา"
+                    option-value="id"
+                    option-label="name"
+                    emit-value
+                    hide-bottom-space
+                    map-options
                     :rules="[
-                      (val) =>
-                        !!val || `${'กรุณาเลือกวันที่แจ้งเตือนล่วงหน้า'}`,
+                      (val) => !!val || `${'กรุณาเลือกระดับการพิจารณา'}`,
                     ]"
                     lazy-rules
+                    @update:model-value="
+                      selectLevel(formData.levelConsideration)
+                    "
+                  />
+                </div>
+
+                <div class="col-xs-12 col-sm-3" id="dateConsideration">
+                  <datepicker
+                    menu-class-name="modalfix"
+                    v-model="formData.dateConsideration"
+                    @update:model-value="
+                      selectLevel(formData.levelConsideration)
+                    "
+                    :locale="'th'"
+                    :readonly="
+                      formData.status !== 'NEW' && formData.status !== ''
+                    "
+                    autoApply
+                    borderless
+                    :enableTimePicker="false"
+                    week-start="0"
                   >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        style="color: var(--q-primary)"
-                      >
-                      </q-icon>
+                    <template #year="{ year }">
+                      {{ year + 543 }}
                     </template>
-                  </q-input>
-                </template>
-              </datepicker>
-            </div>
+                    <template #year-overlay-value="{ value }">
+                      {{ parseInt(value + 543) }}
+                    </template>
+                    <template #trigger>
+                      <q-input
+                        for="inputDateconsideration"
+                        ref="dateConsiderationRef"
+                        outlined
+                        dense
+                        class="full-width datepicker"
+                        :model-value="
+                          formData.dateConsideration != null
+                            ? date2Thai(formData.dateConsideration)
+                            : null
+                        "
+                        :readonly="
+                          formData.status !== 'NEW' && formData.status !== ''
+                        "
+                        label="วันที่กำหนดวันพิจารณา"
+                        hide-bottom-space
+                        :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="complaintFrom">
-              <q-select
-                for="selectReceivecomplaints"
-                ref="complaintFromRef"
-                dense
-                :readonly="formData.status !== 'NEW' && formData.status !== ''"
-                outlined
-                v-model="formData.complaintFrom"
-                :options="complaintFromtoptions"
-                label="รับเรื่องร้องเรียน"
-                option-value="id"
-                option-label="name"
-                hide-bottom-space
-                emit-value
-                map-options
-                :rules="[(val) => !!val || `${'กรุณาเลือกรับเรื่องร้องเรียน'}`]"
-                lazy-rules
-              />
-            </div>
+                <div class="col-xs-12 col-sm-3" id="offenseDetails">
+                  <q-select
+                    for="selectOffenseDescription"
+                    ref="offenseDetailsRef"
+                    dense
+                    outlined
+                    :readonly="
+                      formData.status !== 'NEW' && formData.status !== ''
+                    "
+                    v-model="formData.offenseDetails"
+                    :options="offenseDetailstoptions"
+                    label="ลักษณะความผิด"
+                    option-value="id"
+                    option-label="name"
+                    emit-value
+                    hide-bottom-space
+                    map-options
+                    :rules="[(val) => !!val || `${'กรุณาเลือกลักษณะความผิด'}`]"
+                    lazy-rules
+                  />
+                </div>
 
-            <div class="col-xs-12 col-sm-12" id="appellant">
-              <q-input
-                for="inputPetitioner"
-                ref="appellantRef"
-                dense
-                outlined
-                v-model="formData.appellant"
-                :readonly="formData.status !== 'NEW' && formData.status !== ''"
-                label="ผู้ร้องเรียน"
-                :rules="[(val) => !!val || `${'กรุณากรอกข้อมูล'}`]"
-                lazy-rules
-                hide-bottom-space
-                type="textarea"
-                rows="5"
-              />
+                <div class="col-xs-12 col-sm-3" id="dateNotification">
+                  <datepicker
+                    menu-class-name="modalfix"
+                    v-model="formData.dateNotification"
+                    :locale="'th'"
+                    autoApply
+                    :readonly="
+                      formData.status !== 'NEW' && formData.status !== ''
+                    "
+                    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="inputDatewarn"
+                        ref="dateNotificationRef"
+                        outlined
+                        dense
+                        :readonly="
+                          formData.status !== 'NEW' && formData.status !== ''
+                        "
+                        hide-bottom-space
+                        class="full-width datepicker"
+                        :model-value="
+                          formData.dateNotification != null
+                            ? date2Thai(formData.dateNotification)
+                            : 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="complaintFrom">
+                  <q-select
+                    for="selectReceivecomplaints"
+                    ref="complaintFromRef"
+                    dense
+                    :readonly="
+                      formData.status !== 'NEW' && formData.status !== ''
+                    "
+                    outlined
+                    v-model="formData.complaintFrom"
+                    :options="complaintFromtoptions"
+                    label="รับเรื่องร้องเรียน"
+                    option-value="id"
+                    option-label="name"
+                    hide-bottom-space
+                    emit-value
+                    map-options
+                    :rules="[
+                      (val) => !!val || `${'กรุณาเลือกรับเรื่องร้องเรียน'}`,
+                    ]"
+                    lazy-rules
+                  />
+                </div>
+
+                <div class="col-xs-12 col-sm-12" id="appellant">
+                  <q-input
+                    for="inputPetitioner"
+                    ref="appellantRef"
+                    dense
+                    outlined
+                    v-model="formData.appellant"
+                    :readonly="
+                      formData.status !== 'NEW' && formData.status !== ''
+                    "
+                    label="ผู้ร้องเรียน"
+                    :rules="[(val) => !!val || `${'กรุณากรอกข้อมูล'}`]"
+                    lazy-rules
+                    hide-bottom-space
+                    type="textarea"
+                    rows="5"
+                  />
+                </div>
+                <div class="col-xs-12 col-sm-12">
+                  <q-input
+                    :readonly="
+                      formData.status !== 'NEW' && formData.status !== ''
+                    "
+                    for="result"
+                    ref="resultRef"
+                    dense
+                    outlined
+                    hide-bottom-space
+                    v-model="formData.result"
+                    :rules="[
+                      (val) => !!val || 'กรุณากรอกผลการตรวจสอบเรื่องร้องเรียน',
+                    ]"
+                    lazy-rules
+                    label="ผลการตรวจสอบเรื่องร้องเรียน"
+                    type="textarea"
+                    rows="5"
+                  />
+                </div>
+              </div>
             </div>
-            <div class="col-xs-12 col-sm-12">
-              <q-input
-                for="result"
-                ref="resultRef"
-                dense
-                outlined
-                hide-bottom-space
-                v-model="formData.result"
-                :rules="[
-                  (val) => !!val || 'กรุณากรอกผลการตรวจสอบเรื่องร้องเรียน',
-                ]"
-                lazy-rules
-                label="ผลการตรวจสอบเรื่องร้องเรียน"
-                type="textarea"
-                rows="5"
-              />
-            </div>
-          </div>
+          </q-card>
         </div>
+
         <q-separator />
         <div
           class="row col-12 q-pa-sm"
@@ -947,90 +994,107 @@ onMounted(() => {
           >
         </div>
       </form>
-    </q-card>
-  </div>
-  <div class="col-12 q-mt-sm q-mb-lg" v-if="props.data">
-    <q-card flat bordered>
-      <div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
-        {{
-          formData.status === "NEW"
-            ? "อัปโหลดไฟล์เอกสารหลักฐาน"
-            : "ไฟล์เอกสารหลักฐาน"
-        }}
-      </div>
-      <div class="col-12"><q-separator /></div>
-      <div
-        class="col-xs-12 q-px-md q-py-sm row"
-        v-if="formData.status === 'NEW'"
-      >
-        <div class="col-11" id="documentFile">
-          <q-file
-            for="inputFiles"
-            outlined
-            dense
-            class="fit"
-            :readonly="formData.status !== 'NEW' && formData.status !== ''"
-            v-model="formData.documentFile"
-            @added="fileUploadDoc"
-            label="ไฟล์เอกสารหลักฐาน"
-            hide-bottom-space
-            lazy-rules
-            accept=".pdf,.xlsx,.doc"
-            clearable
-          >
-            <template v-slot:prepend>
-              <q-icon name="attach_file" color="primary" />
-            </template>
-          </q-file>
-        </div>
-        <div class="col-1 self-center" v-if="formData.documentFile">
-          <q-btn
-            size="14px"
-            flat
-            round
-            dense
-            color="add"
-            class="q-ml-sm"
-            icon="mdi-upload"
-            @click="upLoadFileDoc()"
-            ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-          >
-        </div>
-      </div>
-      <div class="q-px-md q-py-sm" v-if="fileList.length > 0">
-        <q-list bordered separator v-for="data in fileList" :key="data.id">
-          <q-item clickable v-ripple class="items-center">
-            <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
+    </div>
+    <!-- อัพโหลดไฟล์ -->
+    <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"
             >
-            <q-btn
-              v-if="formData.status === 'NEW'"
-              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="q-px-md q-py-sm" v-if="fileList.length === 0">
-        <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
-      </div>
-    </q-card>
+              <div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
+                {{
+                  formData.status === "NEW"
+                    ? "อัปโหลดไฟล์เอกสารหลักฐาน"
+                    : "ไฟล์เอกสารหลักฐาน"
+                }}
+              </div>
+              <div class="col-12"><q-separator /></div>
+
+              <div v-if="formData.status === 'NEW'" class="col-12 q-pa-sm row">
+                <q-file
+                  for="inputFiles"
+                  class="col-11"
+                  outlined
+                  dense
+                  :readonly="
+                    formData.status !== 'NEW' && formData.status !== ''
+                  "
+                  v-model="formData.documentFile"
+                  @added="fileUploadDoc"
+                  label="ไฟล์เอกสารหลักฐาน"
+                  hide-bottom-space
+                  lazy-rules
+                  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" 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="formData.status === 'NEW'"
+                      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-mt-sm" v-if="fileList.length == 0">
+                <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
+              </div>
+            </q-card>
+          </div>
+        </div>
+      </q-card>
+    </div>
   </div>
 
   <DialogAddPersonal
diff --git a/src/modules/11_discipline/components/2_InvestigateFacts/EditPage.vue b/src/modules/11_discipline/components/2_InvestigateFacts/EditPage.vue
index 8ac1109b1..c7e614f2c 100644
--- a/src/modules/11_discipline/components/2_InvestigateFacts/EditPage.vue
+++ b/src/modules/11_discipline/components/2_InvestigateFacts/EditPage.vue
@@ -378,6 +378,21 @@ function emitPerson(data: FormData[]) {
     });
 }
 
+/** ยืนยัน ส่งไปออกคำสั่ง */
+function sentIssue() {
+  dialogConfirm(
+    $q,
+    () => confirmSentIssue(),
+    "ยืนยันส่งไปสรุปผลการพิจารณา",
+    "ต้องการยืนยันส่งไปสรุปผลการพิจารณาใช่หรือไม่?"
+  );
+}
+
+/** ฟังชั่น ส่งไปออกคำสั่ง*/
+function confirmSentIssue() {
+  console.log("sent");
+}
+
 /** โหลดข้อมูลเมื่อเข้าหน้านี้ */
 onMounted(() => {
   getData();
@@ -417,7 +432,12 @@ watch(
           color="public"
           @click="sentInvestigate"
         />
-
+        <q-btn
+          v-if="data.status === 'NEW'"
+          label="ส่งไปพักราชการ"
+          color="primary"
+          @click="sentIssue"
+        />
         <q-btn
           v-if="data.status === 'NEW'"
           label="ยุติเรื่อง"
diff --git a/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue b/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue
index f766947cf..e8d42cbd0 100644
--- a/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue
+++ b/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue
@@ -527,11 +527,13 @@ onMounted(async () => {
 });
 </script>
 <template>
-  <q-card flat class="q-mt-sm">
-    <form @submit.prevent="validateForm">
-      <div class="q-pa-md q-col-gutter-md">
-        <div class="col-xs-12 row items-start q-col-gutter-md">
-          <!-- <div class="col-6">
+  <div class="row">
+    <div class="col-xs-12 col-sm-12 col-md-9">
+      <q-card flat bordered class="q-mb-md">
+        <form @submit.prevent="validateForm">
+          <div class="q-pa-md q-col-gutter-md">
+            <div class="col-xs-12 row items-start q-col-gutter-md">
+              <!-- <div class="col-6">
             <q-select
               for="#fault"
               outlined
@@ -560,7 +562,7 @@ onMounted(async () => {
             </q-select>
           </div> -->
 
-          <!-- <div class="col-3">
+              <!-- <div class="col-3">
             <q-select
               for="#fault"
               outlined
@@ -588,430 +590,442 @@ onMounted(async () => {
               </template>
             </q-select>
           </div> -->
-          <div class="col-xs-12 col-sm-3">
-            <q-select
-              for="SelectrespondentType"
-              v-model="formData.respondentType"
-              ref="respondentTypeRef"
-              dense
-              outlined
-              :readonly="formData.status !== 'NEW'"
-              label="ผู้ถูกร้องเรียน"
-              option-value="id"
-              option-label="name"
-              emit-value
-              use-input
-              map-options
-              hide-bottom-space
-              :options="investigateFactStore.respondentTypeOps"
-              :rules="[(val) => !!val || `${'กรุณาเลือกผู้ร้องเรียน'}`]"
-              lazy-rules
-              @filter="(inputValue: any,
+              <div class="col-xs-12 col-sm-3">
+                <q-select
+                  for="SelectrespondentType"
+                  v-model="formData.respondentType"
+                  ref="respondentTypeRef"
+                  dense
+                  outlined
+                  :readonly="formData.status !== 'NEW'"
+                  label="ผู้ถูกร้องเรียน"
+                  option-value="id"
+                  option-label="name"
+                  emit-value
+                  use-input
+                  map-options
+                  hide-bottom-space
+                  :options="investigateFactStore.respondentTypeOps"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกผู้ร้องเรียน'}`]"
+                  lazy-rules
+                  @filter="(inputValue: any,
                 doneFn: Function) => investigateFactStore.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>
+                >
+                  <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
-              for="inputOffice"
-              name="organizationId"
-              ref="organizationIdRef"
-              dense
-              hide-bottom-space
-              :readonly="formData.status !== 'NEW'"
-              outlined
-              option-label="name"
-              option-value="id"
-              emit-value
-              map-options
-              v-model="formData.organizationId"
-              :options="investigateFactStore.organizationIdOp"
-              label="เลือกสำนักงาน"
-              :rules="[(val) => !!val || `${'กรุณาเลือกสำนักงาน'}`]"
-              lazy-rules
-            />
-          </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"
+                class="col-xs-12 col-sm-3"
+                v-if="formData.respondentType === 'ORGANIZATION'"
+                id="organizationId"
               >
-                ผู้ถูกร้องเรียน
-                <q-btn
-                  v-if="formData.status === 'NEW'"
-                  size="12px"
-                  flat
-                  round
+                <q-select
+                  for="inputOffice"
+                  name="organizationId"
+                  ref="organizationIdRef"
                   dense
-                  color="add"
-                  class="q-ml-sm"
-                  @click="toggleModal"
-                  icon="mdi-plus"
-                >
-                  <q-tooltip>เพิ่มผู้ถูกร้องเรียน</q-tooltip>
-                </q-btn>
+                  hide-bottom-space
+                  :readonly="formData.status !== 'NEW'"
+                  outlined
+                  option-label="name"
+                  option-value="id"
+                  emit-value
+                  map-options
+                  v-model="formData.organizationId"
+                  :options="investigateFactStore.organizationIdOp"
+                  label="เลือกสำนักงาน"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกสำนักงาน'}`]"
+                  lazy-rules
+                />
               </div>
-              <div class="col-12"><q-separator /></div>
-              <div class="col-xs-12 q-pa-sm">
-                <d-table
-                  ref="table"
-                  :columns="investigateFactStore.columnsPerson"
-                  :rows="investigateFactStore.rowsAdd"
-                  row-key="idcard"
-                  flat
+
+              <div
+                class="row col-12"
+                v-if="formData.respondentType === 'PERSON'"
+              >
+                <q-card
                   bordered
-                  :paging="true"
-                  dense
-                  class="custom-header-table"
-                  :visible-columns="investigateFactStore.visibleColumnsPerson"
+                  class="row col-12"
+                  style="border: 1px solid #d6dee1"
                 >
-                  <template v-slot:header="props">
-                    <q-tr :props="props">
-                      <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">
-                      <q-td
-                        v-for="col in props.cols"
-                        :key="col.name"
-                        :props="props"
-                      >
-                        <div v-if="col.name == 'no'">
-                          {{ props.rowIndex + 1 }}
-                        </div>
-                        <div>
-                          {{ col.value }}
-                        </div>
-                      </q-td>
-                      <!-- v-if="formData.status === 'NEW'" -->
-                      <q-td auto-width>
-                        <q-btn
-                          v-if="formData.status === 'NEW'"
-                          size="12px"
-                          flat
-                          round
-                          dense
-                          color="red"
-                          class="q-ml-sm"
-                          icon="mdi-delete-outline"
-                          @click="deletePerson(props.row.id)"
-                          ><q-tooltip>ลบผู้ถูกร้องเรียน</q-tooltip></q-btn
-                        >
-                      </q-td>
-                    </q-tr>
-                  </template>
-                </d-table>
+                  <div
+                    class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
+                  >
+                    ผู้ถูกร้องเรียน
+                    <q-btn
+                      v-if="formData.status === 'NEW'"
+                      size="12px"
+                      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>
+                  <div class="col-xs-12 q-pa-sm">
+                    <d-table
+                      ref="table"
+                      :columns="investigateFactStore.columnsPerson"
+                      :rows="investigateFactStore.rowsAdd"
+                      row-key="idcard"
+                      flat
+                      bordered
+                      :paging="true"
+                      dense
+                      class="custom-header-table"
+                      :visible-columns="
+                        investigateFactStore.visibleColumnsPerson
+                      "
+                    >
+                      <template v-slot:header="props">
+                        <q-tr :props="props">
+                          <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">
+                          <q-td
+                            v-for="col in props.cols"
+                            :key="col.name"
+                            :props="props"
+                          >
+                            <div v-if="col.name == 'no'">
+                              {{ props.rowIndex + 1 }}
+                            </div>
+                            <div>
+                              {{ col.value }}
+                            </div>
+                          </q-td>
+                          <!-- v-if="formData.status === 'NEW'" -->
+                          <q-td auto-width>
+                            <q-btn
+                              v-if="formData.status === 'NEW'"
+                              size="12px"
+                              flat
+                              round
+                              dense
+                              color="red"
+                              class="q-ml-sm"
+                              icon="mdi-delete-outline"
+                              @click="deletePerson(props.row.id)"
+                              ><q-tooltip>ลบผู้ถูกร้องเรียน</q-tooltip></q-btn
+                            >
+                          </q-td>
+                        </q-tr>
+                      </template>
+                    </d-table>
+                  </div>
+                </q-card>
               </div>
-            </q-card>
-          </div>
-          <div class="col-xs-12 col-sm-3">
-            <q-select
-              :readonly="formData.status !== 'NEW'"
-              for="#investigationDetail"
-              outlined
-              hide-bottom-space
-              dense
-              lazy-rules
-              ref="investigationDetailRef"
-              :rules="[(val) => !!val || `${'กรุณาเลือกลักษณะการสืบสวน'}`]"
-              v-model="formData.investigationDetail"
-              :options="investigateFactStore.investigationDetailOp"
-              label="ลักษณะการสืบสวน"
-              emit-value
-              map-options
-              option-label="name"
-              option-value="id"
-              use-input
-              @filter="(inputValue: any,
+              <div class="col-xs-12 col-sm-3">
+                <q-select
+                  :readonly="formData.status !== 'NEW'"
+                  for="#investigationDetail"
+                  outlined
+                  hide-bottom-space
+                  dense
+                  lazy-rules
+                  ref="investigationDetailRef"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกลักษณะการสืบสวน'}`]"
+                  v-model="formData.investigationDetail"
+                  :options="investigateFactStore.investigationDetailOp"
+                  label="ลักษณะการสืบสวน"
+                  emit-value
+                  map-options
+                  option-label="name"
+                  option-value="id"
+                  use-input
+                  @filter="(inputValue: any,
         doneFn: Function) => filterFnOptionsType(inputValue, doneFn, 'investigationOp'
         )"
-              ><template v-slot:no-option>
-                <q-item>
-                  <q-item-section class="text-grey">
-                    ไม่มีข้อมูล
-                  </q-item-section>
-                </q-item>
-              </template>
-            </q-select>
-          </div>
-        </div>
-        <div v-if="formData.investigationDetail === 'OTHER'" class="col-12">
-          <q-input
-            for="#investigationDetailOther"
-            class="full-width cursor-pointer"
-            outlined
-            ref="investigationDetailOtherRef"
-            dense
-            borderless
-            v-model="formData.investigationDetailOther"
-            hide-bottom-space
-            :label="`${'รายการอื่นๆ(โปรดระบุ)'}`"
-            type="textarea"
-            :rules="[
-              (val) =>
-                formData.investigationDetail === 'OTHER'
-                  ? !!val || 'กรุณาเลือกจำนวนวันที่ต้องการขยาย'
-                  : true,
-            ]"
-          />
-        </div>
-
-        <div class="row">
-          <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-sm q-px-md"
-            >
-              วันที่สืบสวน
-              <q-checkbox
-                v-if="
-                  props.data.investigationDateStart != null &&
-                  props.data.investigationDateEnd != null
-                "
-                for="#clickTime"
-                size="md"
-                v-model="formData.clickTime"
-                label="ขยายเวลา"
-                color="primary"
-                dense
-                class="text-weight-medium q-ml-sm"
-                keep-color
-              />
-            </div>
-            <div class="col-12"><q-separator /></div>
-            <div class="q-pa-sm">
-              <div class="q-col-gutter-sm row">
-                <div class="col-3" v-if="!formData.clickTime">
-                  <datepicker
-                    menu-class-name="modalfix"
-                    :readonly="isUpdate && statusStep"
-                    v-model="formData.investigationDateStart"
-                    :locale="'th'"
-                    autoApply
-                    :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="#date"
-                        class="full-width cursor-pointer"
-                        ref="dateRef"
-                        :readonly="statusStep && isUpdate"
-                        outlined
-                        dense
-                        lazy-rules
-                        borderless
-                        hide-bottom-space
-                        :model-value="
-                          formData.investigationDateStart
-                            ? date2Thai(formData.investigationDateStart)
-                            : null
-                        "
-                        :rules="[
-                          (val) =>
-                            !!val || `${'กรุณาเลือกวันที่เริ่มการสืบสวน'}`,
-                        ]"
-                        :label="`${'วันที่เริ่มการสืบสวน'}`"
-                      >
-                        <template v-slot:prepend>
-                          <q-icon
-                            name="event"
-                            class="cursor-pointer"
-                            color="primary"
-                          >
-                          </q-icon>
-                        </template>
-                      </q-input>
-                    </template>
-                  </datepicker>
-                </div>
-
-                <div class="col-3" v-if="formData.clickTime">
-                  <q-select
-                    for="#daysExtend"
-                    outlined
-                    dense
-                    lazy-rules
-                    ref="daysExtendRef"
-                    v-model="formData.daysExtend"
-                    :options="investigateFactStore.daysExtendOp"
-                    label="จำนวนวันที่ต้องการขยาย"
-                    emit-value
-                    hide-bottom-space
-                    map-options
-                    :rules="[
-                      (val) =>
-                        formData.clickTime
-                          ? !!val || 'กรุณาเลือกจำนวนวันที่ต้องการขยาย'
-                          : true,
-                    ]"
-                    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>
-                  </q-select>
-                </div>
-
-                <div class="col-3">
-                  <datepicker
-                    menu-class-name="modalfix"
-                    v-model="formData.investigationDateEnd"
-                    :readonly="statusStep && isUpdate"
-                    :locale="'th'"
-                    autoApply
-                    :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="#dateEnd"
-                        ref="dateEndRef"
-                        class="full-width cursor-pointer"
-                        :readonly="statusStep && isUpdate"
-                        outlined
-                        dense
-                        lazy-rules
-                        hide-bottom-space
-                        borderless
-                        :model-value="
-                          formData.investigationDateEnd
-                            ? date2Thai(formData.investigationDateEnd)
-                            : null
-                        "
-                        :rules="[
-                          (val) =>
-                            !!val || `${'กรุณาเลือกวันที่สิ้นสุดการสืบสวน'}`,
-                        ]"
-                        :label="`${'วันที่สิ้นสุดการสืบสวน'}`"
-                      >
-                        <template v-slot:prepend>
-                          <q-icon
-                            name="event"
-                            class="cursor-pointer"
-                            color="primary"
-                          >
-                          </q-icon>
-                        </template>
-                      </q-input>
-                    </template>
-                  </datepicker>
-                </div>
+                  ><template v-slot:no-option>
+                    <q-item>
+                      <q-item-section class="text-grey">
+                        ไม่มีข้อมูล
+                      </q-item-section>
+                    </q-item>
+                  </template>
+                </q-select>
               </div>
             </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
-                size="12px"
-                flat
-                round
+            <div v-if="formData.investigationDetail === 'OTHER'" class="col-12">
+              <q-input
+                for="#investigationDetailOther"
+                class="full-width cursor-pointer"
+                outlined
+                ref="investigationDetailOtherRef"
                 dense
-                color="add"
-                class="q-ml-sm"
-                icon="mdi-plus"
-                @click="onClickOpenPopup"
-              >
-                <q-tooltip>เพิ่มกรรมการ</q-tooltip>
-              </q-btn>
+                borderless
+                v-model="formData.investigationDetailOther"
+                hide-bottom-space
+                :label="`${'รายการอื่นๆ(โปรดระบุ)'}`"
+                type="textarea"
+                :rules="[
+                  (val) =>
+                    formData.investigationDetail === 'OTHER'
+                      ? !!val || 'กรุณาเลือกจำนวนวันที่ต้องการขยาย'
+                      : true,
+                ]"
+              />
             </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>
-                      <q-btn
-                        dense
-                        size="12px"
-                        flat
-                        round
-                        color="red"
-                        icon="mdi-delete-outline"
-                        @click="deleteDirector(props.row.id)"
-                      >
-                        <q-tooltip>ลบข้อมูล</q-tooltip>
-                      </q-btn>
-                    </q-td>
-                  </q-tr>
-                </template>
-              </Table>
-            </div>
-          </q-card>
-        </div>
 
-        <!-- <div class="col-12">
+            <div class="row">
+              <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-sm q-px-md"
+                >
+                  วันที่สืบสวน
+                  <q-checkbox
+                    v-if="
+                      props.data.investigationDateStart != null &&
+                      props.data.investigationDateEnd != null
+                    "
+                    for="#clickTime"
+                    size="md"
+                    v-model="formData.clickTime"
+                    label="ขยายเวลา"
+                    color="primary"
+                    dense
+                    class="text-weight-medium q-ml-sm"
+                    keep-color
+                  />
+                </div>
+                <div class="col-12"><q-separator /></div>
+                <div class="q-pa-sm">
+                  <div class="q-col-gutter-sm row">
+                    <div class="col-3" v-if="!formData.clickTime">
+                      <datepicker
+                        menu-class-name="modalfix"
+                        :readonly="isUpdate && statusStep"
+                        v-model="formData.investigationDateStart"
+                        :locale="'th'"
+                        autoApply
+                        :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="#date"
+                            class="full-width cursor-pointer"
+                            ref="dateRef"
+                            :readonly="statusStep && isUpdate"
+                            outlined
+                            dense
+                            lazy-rules
+                            borderless
+                            hide-bottom-space
+                            :model-value="
+                              formData.investigationDateStart
+                                ? date2Thai(formData.investigationDateStart)
+                                : null
+                            "
+                            :rules="[
+                              (val) =>
+                                !!val || `${'กรุณาเลือกวันที่เริ่มการสืบสวน'}`,
+                            ]"
+                            :label="`${'วันที่เริ่มการสืบสวน'}`"
+                          >
+                            <template v-slot:prepend>
+                              <q-icon
+                                name="event"
+                                class="cursor-pointer"
+                                color="primary"
+                              >
+                              </q-icon>
+                            </template>
+                          </q-input>
+                        </template>
+                      </datepicker>
+                    </div>
+
+                    <div class="col-3" v-if="formData.clickTime">
+                      <q-select
+                        for="#daysExtend"
+                        outlined
+                        dense
+                        lazy-rules
+                        ref="daysExtendRef"
+                        v-model="formData.daysExtend"
+                        :options="investigateFactStore.daysExtendOp"
+                        label="จำนวนวันที่ต้องการขยาย"
+                        emit-value
+                        hide-bottom-space
+                        map-options
+                        :rules="[
+                          (val) =>
+                            formData.clickTime
+                              ? !!val || 'กรุณาเลือกจำนวนวันที่ต้องการขยาย'
+                              : true,
+                        ]"
+                        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>
+                      </q-select>
+                    </div>
+
+                    <div class="col-3">
+                      <datepicker
+                        menu-class-name="modalfix"
+                        v-model="formData.investigationDateEnd"
+                        :readonly="statusStep && isUpdate"
+                        :locale="'th'"
+                        autoApply
+                        :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="#dateEnd"
+                            ref="dateEndRef"
+                            class="full-width cursor-pointer"
+                            :readonly="statusStep && isUpdate"
+                            outlined
+                            dense
+                            lazy-rules
+                            hide-bottom-space
+                            borderless
+                            :model-value="
+                              formData.investigationDateEnd
+                                ? date2Thai(formData.investigationDateEnd)
+                                : null
+                            "
+                            :rules="[
+                              (val) =>
+                                !!val ||
+                                `${'กรุณาเลือกวันที่สิ้นสุดการสืบสวน'}`,
+                            ]"
+                            :label="`${'วันที่สิ้นสุดการสืบสวน'}`"
+                          >
+                            <template v-slot:prepend>
+                              <q-icon
+                                name="event"
+                                class="cursor-pointer"
+                                color="primary"
+                              >
+                              </q-icon>
+                            </template>
+                          </q-input>
+                        </template>
+                      </datepicker>
+                    </div>
+                  </div>
+                </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
+                    size="12px"
+                    flat
+                    round
+                    dense
+                    color="add"
+                    class="q-ml-sm"
+                    icon="mdi-plus"
+                    @click="onClickOpenPopup"
+                  >
+                    <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>
+                          <q-btn
+                            dense
+                            size="12px"
+                            flat
+                            round
+                            color="red"
+                            icon="mdi-delete-outline"
+                            @click="deleteDirector(props.row.id)"
+                          >
+                            <q-tooltip>ลบข้อมูล</q-tooltip>
+                          </q-btn>
+                        </q-td>
+                      </q-tr>
+                    </template>
+                  </Table>
+                </div>
+              </q-card>
+            </div>
+
+            <!-- <div class="col-12">
           <q-input
             for="#complaintdetail"
             class="full-width cursor-pointer"
@@ -1030,7 +1044,7 @@ onMounted(async () => {
           />
         </div> -->
 
-        <!-- <div class="col-12">
+            <!-- <div class="col-12">
           <q-file
             for="#fileComplaint"
             outlined
@@ -1048,257 +1062,187 @@ onMounted(async () => {
           </q-file>
         </div> -->
 
-        <div class="col-12">
-          <q-input
-            for="#investigationDescription"
-            class="full-width cursor-pointer"
-            outlined
-            ref="investigationDescriptionRef"
-            dense
-            lazy-rules
-            borderless
-            v-model="formData.investigationDescription"
-            :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
-            hide-bottom-space
-            :label="`${'รายละเอียด'}`"
-            type="textarea"
-          />
-        </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"
-            >
-              ผลการสืบสวน
+            <div class="col-12">
+              <q-input
+                for="#investigationDescription"
+                class="full-width cursor-pointer"
+                outlined
+                ref="investigationDescriptionRef"
+                dense
+                lazy-rules
+                borderless
+                v-model="formData.investigationDescription"
+                :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
+                hide-bottom-space
+                :label="`${'รายละเอียด'}`"
+                type="textarea"
+              />
             </div>
 
-            <div class="col-12"><q-separator /></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"
+                >
+                  ผลการสืบสวน
+                </div>
 
-            <div class="col-xs-12 q-pa-sm row">
-              <div class="row col-12 q-col-gutter-md">
-                <div class="col-3">
-                  <q-select
-                    for="#fault"
-                    outlined
-                    dense
-                    :readonly="statusStep"
-                    lazy-rules
-                    ref="investigationStatusResultRef"
-                    v-model="formData.investigationStatusResult"
-                    :rules="[(val) => !!val || `${'กรุณาเลือกผลการสืบสวน'}`]"
-                    :options="
-                      investigateFactStore.investigationStatusResultOptions
-                    "
-                    label="ผลการสืบสวน"
-                    emit-value
-                    map-options
-                    option-label="name"
-                    option-value="id"
-                    use-input
-                    @filter="(inputValue: any,
+                <div class="col-12"><q-separator /></div>
+
+                <div class="col-xs-12 q-pa-sm row">
+                  <div class="row col-12 q-col-gutter-md">
+                    <div class="col-3">
+                      <q-select
+                        for="#fault"
+                        outlined
+                        dense
+                        :readonly="statusStep"
+                        lazy-rules
+                        ref="investigationStatusResultRef"
+                        v-model="formData.investigationStatusResult"
+                        :rules="[
+                          (val) => !!val || `${'กรุณาเลือกผลการสืบสวน'}`,
+                        ]"
+                        :options="
+                          investigateFactStore.investigationStatusResultOptions
+                        "
+                        label="ผลการสืบสวน"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        option-value="id"
+                        use-input
+                        @filter="(inputValue: any,
                 doneFn: Function) => filterFnOptionsType(inputValue, doneFn, 'faultOp'
                 )"
-                    ><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.investigationStatusResult == 'HAVE_CAUSE'"
-                  class="col-3"
-                >
-                  <q-select
-                    for="#fault"
-                    outlined
-                    dense
-                    ref="investigationCauseTextRef"
-                    v-model="formData.investigationCauseText"
-                    :rules="[
-                      (val) => !!val || `${'กรุณาเลือกร้ายแรง/ไม่ร้ายแรง'}`,
-                    ]"
-                    :options="
-                      investigateFactStore.investigationCauseTextOptions
-                    "
-                    label="ร้ายแรง/ไม่ร้ายแรง"
-                    emit-value
-                    map-options
-                    option-label="name"
-                    option-value="id"
-                    use-input
-                    ><template v-slot:no-option>
-                      <q-item>
-                        <q-item-section class="text-grey">
-                          ไม่มีข้อมูล
-                        </q-item-section>
-                      </q-item>
-                    </template>
-                  </q-select>
-                </div>
-              </div>
-
-              <div class="row col-12">
-                <q-input
-                  class="full-width cursor-pointer"
-                  outlined
-                  ref="resultRef"
-                  dense
-                  lazy-rules
-                  borderless
-                  v-model="formData.result"
-                  :rules="[(val) => !!val || `${'กรุณากรอกเหตุผล'}`]"
-                  hide-bottom-space
-                  :label="`${'เหตุผล'}`"
-                  type="textarea"
-                />
-              </div>
-            </div>
-
-            <div class="col-xs-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"
-                  class="q-ml-sm"
-                  icon="mdi-upload"
-                  @click="uploadFileRelevant"
-                  ><q-tooltip>อัปโหลดเอกสาร</q-tooltip></q-btn
-                >
-              </div>
-              <div
-                class="col-12 q-mt-sm"
-                v-if="formData.disciplineInvestigateRelevantDocs.length === 0"
-              >
-                <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
-              </div>
-              <q-list separator class="full-width q-mt-md">
-                <q-item
-                  clickable
-                  v-ripple
-                  v-for="(file, index) in props.data
-                    .disciplineInvestigateRelevantDocs"
-                  :key="index"
-                >
-                  <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
-                          dense
-                          flat
-                          round
-                          size="12px"
-                          color="red"
-                          icon="mdi-delete-outline"
-                          @click="deleteFileRelevant(file.id)"
-                          ><q-tooltip>ลบเอกสารหลักฐาน</q-tooltip></q-btn
-                        >
-                      </div>
+                        ><template v-slot:no-option>
+                          <q-item>
+                            <q-item-section class="text-grey">
+                              ไม่มีข้อมูล
+                            </q-item-section>
+                          </q-item>
+                        </template>
+                      </q-select>
                     </div>
-                  </q-item-section>
-                </q-item>
-              </q-list>
+
+                    <div
+                      v-if="formData.investigationStatusResult == 'HAVE_CAUSE'"
+                      class="col-3"
+                    >
+                      <q-select
+                        for="#fault"
+                        outlined
+                        dense
+                        ref="investigationCauseTextRef"
+                        v-model="formData.investigationCauseText"
+                        :rules="[
+                          (val) => !!val || `${'กรุณาเลือกร้ายแรง/ไม่ร้ายแรง'}`,
+                        ]"
+                        :options="
+                          investigateFactStore.investigationCauseTextOptions
+                        "
+                        label="ร้ายแรง/ไม่ร้ายแรง"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        option-value="id"
+                        use-input
+                        ><template v-slot:no-option>
+                          <q-item>
+                            <q-item-section class="text-grey">
+                              ไม่มีข้อมูล
+                            </q-item-section>
+                          </q-item>
+                        </template>
+                      </q-select>
+                    </div>
+                  </div>
+
+                  <div class="row col-12">
+                    <q-input
+                      class="full-width cursor-pointer"
+                      outlined
+                      ref="resultRef"
+                      dense
+                      lazy-rules
+                      borderless
+                      v-model="formData.result"
+                      :rules="[(val) => !!val || `${'กรุณากรอกเหตุผล'}`]"
+                      hide-bottom-space
+                      :label="`${'เหตุผล'}`"
+                      type="textarea"
+                    />
+                  </div>
+                </div>
+              </q-card>
             </div>
-          </q-card>
-        </div>
-      </div>
-
-      <q-separator />
-      <div 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>
-    </form>
-  </q-card>
-
-  <q-card flat class="q-pa-md q-mt-sm">
-    <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">
-            อัปโหลดไฟล์เอกสารหลักฐาน
           </div>
-          <div class="col-12"><q-separator /></div>
-          <div class="col-xs-12 q-pa-sm row">
+
+          <q-separator />
+          <div 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>
+        </form>
+      </q-card>
+    </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>
             <q-file
-            v-if="formData.status === 'NEW'"
-              class="col-11 q-mt-sm"
-              for="#documentFile"
+              class="col-10 q-pa-sm"
+              for="#evidenceFiles"
               outlined
               dense
-              v-model="formData.documentFile"
-              label="ไฟล์เอกสารหลักฐาน"
+              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">
+            <div class="col-2 self-center">
               <q-btn
-                v-if="formData.documentFile"
+                v-if="formData.evidenceFiles"
                 size="14px"
                 flat
                 round
                 dense
                 color="add"
-                class="q-ml-sm q-mt-sm"
+                class="q-ml-sm"
                 icon="mdi-upload"
-                @click="uploadFile"
-                ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                @click="uploadFileRelevant"
+                ><q-tooltip>อัปโหลดเอกสาร</q-tooltip></q-btn
               >
             </div>
             <div
-              v-if="formData.disciplineInvestigateDocs.length === 0"
-              class="col-12 q-mt-sm"
+              class="col-12"
+              v-if="
+                formData.disciplineInvestigateRelevantDocs &&
+                formData.disciplineInvestigateRelevantDocs.length === 0
+              "
             >
-              <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
+              <q-card class="q-pa-md q-ma-xs" bordered> ไม่มีรายการเอกสาร </q-card>
             </div>
-          </div>
-          <div class="col-xs-12 q-pa-sm row">
-            <q-list separator class="full-width">
+            <q-list separator class="full-width q-mt-md" v-if="props.data.disciplineInvestigateRelevantDocs.length >0">
               <q-item
                 clickable
                 v-ripple
-                v-for="file in props.data.disciplineInvestigateDocs"
-                :key="file.id"
+                v-for="(file, index) in props.data
+                  .disciplineInvestigateRelevantDocs"
+                :key="index"
               >
                 <q-item-section>{{ file.fileName }}</q-item-section>
                 <q-item-section avatar>
@@ -1311,21 +1255,20 @@ onMounted(async () => {
                         size="12px"
                         color="blue"
                         icon="mdi-download-outline"
-                        @click="downloadFile(file.pathName)"
+                        @click="downloadFileRelevant(file.pathName)"
                       >
-                        <q-tooltip>ดาวน์โหลดเอกสารหลักฐาน</q-tooltip>
+                        <q-tooltip>ดาวน์โหลด</q-tooltip>
                       </q-btn>
                     </div>
                     <div>
                       <q-btn
-                        v-if="formData.status === 'NEW'"
                         dense
                         flat
                         round
                         size="12px"
                         color="red"
                         icon="mdi-delete-outline"
-                        @click="deleteFile(file.id)"
+                        @click="deleteFileRelevant(file.id)"
                         ><q-tooltip>ลบเอกสารหลักฐาน</q-tooltip></q-btn
                       >
                     </div>
@@ -1333,11 +1276,101 @@ onMounted(async () => {
                 </q-item-section>
               </q-item>
             </q-list>
-          </div>
-        </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>  
+                <q-file
+                  v-if="formData.status === 'NEW'"
+                  class="col-10 q-pa-sm"
+                  for="#documentFile"
+                  outlined
+                  dense
+                  v-model="formData.documentFile"
+                  label="ไฟล์เอกสารหลักฐาน"
+                  hide-bottom-space
+                >
+                  <template v-slot:prepend>
+                    <q-icon name="attach_file" color="primary" />
+                  </template>
+                </q-file>
+                
+                <div class="col-2 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
+                  v-if="formData.disciplineInvestigateDocs.length === 0"
+                  class="col-12"
+                >
+                  <q-card class="q-pa-md q-ma-xs" bordered> ไม่มีรายการเอกสาร </q-card>
+                </div>
+
+              <div class="col-xs-12 q-pa-sm row" v-if="props.data.disciplineInvestigateDocs.length >0">
+                <q-list separator class="full-width">
+                  <q-item
+                    clickable
+                    v-ripple
+                    v-for="file in props.data.disciplineInvestigateDocs"
+                    :key="file.id"
+                  >
+                    <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="formData.status === 'NEW'"
+                            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>
+            </q-card>
+      
+        </div>
+      </q-card>
     </div>
-  </q-card>
+  </div>
 
   <DialogAddPersonal
     title="ผู้ถูกร้องเรียน"
diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/EditPage.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/EditPage.vue
index 29df9467b..a5c962492 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/EditPage.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/EditPage.vue
@@ -33,6 +33,7 @@ const route = useRoute();
 
 const id = ref<string>(route.params.id as string);
 const data = ref<object>();
+const status = ref<string>("")
 
 /** function fetchData สอบสวนความผิดทางวินัย*/
 async function fetchDetailDisciplinary() {
@@ -41,6 +42,7 @@ async function fetchDetailDisciplinary() {
     .get(config.API.disciplineDisciplinaryById(id.value))
     .then((res) => {
       data.value = res.data.result;
+      status.value = res.data.result.status
     })
     .catch((err) => {
       messageError($q, err);
@@ -148,7 +150,6 @@ async function onSubmitDisciplinary(data: any) {
  * @param id ระบุ บุคคล
  */
 const onSubmit = async (id: string) => {
-  console.log("edit");
   router.push(`/discipline/disciplinary`);
 };
 
@@ -157,8 +158,8 @@ function sentIssue() {
   dialogConfirm(
     $q,
     () => confirmSentIssue(),
-    "ยืนยันส่งไปออกคำสั่ง",
-    "ต้องการยืนยันส่งไปออกคำสั่งใช่หรือไม่?"
+    "ยืนยันส่งไปสรุปผลการพิจารณา",
+    "ต้องการยืนยันส่งไปสรุปผลการพิจารณาใช่หรือไม่?"
   );
 }
 
@@ -309,24 +310,30 @@ const dataInvestigatefacts = reactive<FormInvestigateFact>({
       <div class="q-ma-none">แก้ไขการสอบสวนความผิดทางวินัย</div>
       <q-space />
       <div class="q-gutter-x-sm">
-        <!-- <q-btn
-          v-if="data.complaintStatus === 'NEW'"
+        <q-btn
+          v-if="status === 'NEW'"
           label="ส่งไปสรุปผลการพิจารณา"
           color="public"
           @click="sentIssue"
         />
         <q-btn
-          v-if="data.complaintStatus === 'NEW'"
+          v-if="status === 'NEW'"
+          label="ส่งไปพักราชการ"
+          color="primary"
+          @click="sentIssue"
+        />
+        <q-btn
+          v-if="status === 'NEW'"
           label="ยุติเรื่อง"
           color="red-7"
           @click="endInvestigate"
         />
         <q-btn
-          v-if="data.complaintStatus === 'STOP'"
+          v-if="status === 'STOP'"
           label="ยกเลิกการยุติเรื่อง"
           color="red-7"
           @click="cancelInvestigate"
-        /> -->
+        />
       </div>
     </div>
     <q-card flat class="col-12">
@@ -363,7 +370,6 @@ const dataInvestigatefacts = reactive<FormInvestigateFact>({
         </q-tab-panel>
       </q-tab-panels>
     </q-card>
-    <!-- <Form :on-submit="onSubmit" :data="data" /> -->
   </div>
 </template>
 
diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue
index 0b0578cc7..197912cb3 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue
@@ -43,6 +43,7 @@ const route = useRoute();
 const $q = useQuasar();
 
 const id = ref<string>(route.params.id as string);
+const isUpdate = ref<boolean>(false);
 const type = ref<string>("");
 const modal = ref<boolean>(false);
 const rows = ref<Director[]>([]);
@@ -54,7 +55,7 @@ function toggleModal() {
   modalPerson.value = !modalPerson.value;
 }
 
-/** หัวตาราง */
+/** หัวตารางของรายการผู้ถูกสอบสวน กรณีบุคคล */
 const columnsPerson = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -147,6 +148,16 @@ const formData = reactive<FormData>({
   result: "", // ผลการสอบสวน
   directors: [],
   persons: [],
+  clickTime: false,
+  disciplinaryDateStart: null, // วันที่เริ่มการสอบสวน
+  disciplinaryDateEnd: null, // วันที่สิ้นสุดการสอบสวน
+  daysExtend: 0,
+  disciplinaryDateInvestigation: null, // วันที่มีคำสั่งให้สอบสวน
+  disciplinaryDateResult: null, //วันที่รายงานผลการสอบสวน
+  disciplinaryStatusResult: "",
+  disciplinaryCauseText: "",
+  disciplinaryResult: "",
+
   // detailComplaint: "",
   // whereInvestigate: "",
   // trueDetail: "",
@@ -162,6 +173,7 @@ const formData = reactive<FormData>({
   // organizationId: "",
   // consideredAgency: "",
 });
+const disciplineDisciplinary_DocRelevants = ref<FileLists[]>([]); // ยังไม่มีรอ api
 const disciplineDisciplinary_DocSummaryEvidences = ref<FileLists[]>([]);
 const disciplineDisciplinary_DocRecordAccusers = ref<FileLists[]>([]);
 const disciplineDisciplinary_DocWitnessess = ref<FileLists[]>([]);
@@ -181,22 +193,35 @@ const disciplinarySummaryEvidenceRef = ref<Object | null>(null);
 const disciplinaryRecordAccuserRef = ref<Object | null>(null);
 const disciplinaryWitnessesRef = ref<Object | null>(null);
 const resultRef = ref<Object | null>(null);
+const dateRef = ref<Object | null>(null);
+const dateEndRef = ref<Object | null>(null);
+const daysExtendRef = ref<Object | null>(null);
+const disciplinaryDateResultRef = ref<Object | null>(null);
+const disciplinaryStatusResultRef = ref<Object | null>(null);
+const disciplinaryCauseTextRef = ref<Object | null>(null);
+const disciplinaryResultRef = ref<Object | null>(null);
 
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const objectdisciplinary: DisciplinaryRef = {
   respondentType: respondentTypeRef,
   organizationId: organizationIdRef,
   consideredAgency: consideredAgencyRef,
-  disciplinaryDateAllegation: disciplinaryDateAllegationRef,
-  disciplinaryDateEvident: disciplinaryDateEvidentRef,
-  disciplinaryCaseFault: disciplinaryCaseFaultRef,
-  disciplinaryInvestigateAt: disciplinaryInvestigateAtRef,
+  // disciplinaryDateAllegation: disciplinaryDateAllegationRef,
+  // disciplinaryDateEvident: disciplinaryDateEvidentRef,
+  // disciplinaryCaseFault: disciplinaryCaseFaultRef,
+  // disciplinaryInvestigateAt: disciplinaryInvestigateAtRef,
   disciplinaryFaultLevel: disciplinaryFaultLevelRef,
-  disciplinaryRefLaw: disciplinaryRefLawRef,
-  disciplinarySummaryEvidence: disciplinarySummaryEvidenceRef,
-  disciplinaryRecordAccuser: disciplinaryRecordAccuserRef,
-  disciplinaryWitnesses: disciplinaryWitnessesRef,
-  result: resultRef,
+  // disciplinaryRefLaw: disciplinaryRefLawRef,
+  // disciplinarySummaryEvidence: disciplinarySummaryEvidenceRef,
+  // disciplinaryRecordAccuser: disciplinaryRecordAccuserRef,
+  // disciplinaryWitnesses: disciplinaryWitnessesRef,
+  // result: resultRef,
+  date: dateRef,
+  dateEnd: dateEndRef,
+  daysExtend: daysExtendRef,
+  disciplinaryDateResult: disciplinaryDateResultRef,
+  disciplinaryStatusResult: disciplinaryStatusResultRef,
+  disciplinaryResult: disciplinaryResultRef,
 };
 
 const initialPagination = ref<any>({
@@ -250,6 +275,18 @@ function validateForm() {
   }
 }
 
+/**
+ * ฟังชั้นคำนวณเวลาวันที่สิ้นสุดจาก วันที่สิ้นสุดการสอบสวน
+ * @param val จำนวนวันที่ต้องการขยาย
+ */
+function calEndDate(val: string) {
+  const date = new Date(props.data.investigationDateEnd);
+  const dateNew = new Date();
+  formData.disciplinaryDateEnd = new Date(
+    dateNew.setDate(date.getDate() + Number(val))
+  );
+}
+
 /**
  * ฟังก์ชั่นสำหรับบันทึกข้อมูล ระบบจะแสดง dialog ให้ยืนยันการบันทึก
  * หากยืนยันจะส่งข้อมูลไปบันทึกที่ api
@@ -290,6 +327,11 @@ async function fetchDatadetail() {
     formData.result = props.data.result;
     formData.directors = props.data.director ?? [];
     formData.persons = props.data.persons ?? [];
+    formData.disciplinaryDateStart = props.data.disciplinaryDateStart ?? null;
+    formData.disciplinaryDateEnd = props.data.disciplinaryDateEnd ?? null;
+    formData.daysExtend = props.data.daysExtend ?? 0;
+    formData.disciplinaryDateInvestigation = props.data.disciplinaryDateInvestigation ?? null;
+    formData.disciplinaryDateResult = props.data.disciplinaryDateResult ?? null;
     disciplineDisciplinary_DocSummaryEvidences.value =
       props.data.disciplineDisciplinary_DocSummaryEvidences;
     disciplineDisciplinary_DocRecordAccusers.value =
@@ -299,6 +341,9 @@ async function fetchDatadetail() {
     disciplineDisciplinary_DocOthers.value =
       props.data.disciplineDisciplinary_DocOthers;
 
+    disciplineDisciplinary_DocRelevants.value =
+      props.data.disciplineDisciplinary_DocRelevants;
+
     /** MAP รายชื่อกรรมการ หน้าหลัก */
     let datalistDirector: responseType[] = formData.directors.map(
       (e: directorType) => ({
@@ -311,7 +356,7 @@ async function fetchDatadetail() {
         position: e.position ? e.position : "-",
         email: e.email ? e.email : "-",
         phone: e.phone ? e.phone : "-",
-        total: e.total ?? "-",
+        total: Number(e.total) ?? "-",
         duty: e.duty ? e.duty : "-",
       })
     );
@@ -460,70 +505,71 @@ onMounted(async () => {
 });
 </script>
 <template>
-  <div class="col-xs-12 col-sm-12 col-md-11">
-    <form @submit.prevent="validateForm">
-      <div class="col-12">
-        <q-card>
-          <div class="col-12 row q-pa-md">
-            <div class="col-12 row q-col-gutter-md">
-              <div class="col-xs-12 col-sm-3">
-                <q-select
-                  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"
-                  :rules="[(val) => !!val || `${'กรุณาเลือกผู้ร้องเรียน'}`]"
-                  lazy-rules
-                  @update:model-value="
-                    selectComplainant(formData.respondentType)
-                  "
-                  @filter="(inputValue: any,
+  <div class="row col-12 bg-white">
+    <div class="col-sm-12 col-md-9">
+      <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="col-xs-12 col-sm-3">
+                  <q-select
+                    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"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกผู้ร้องเรียน'}`]"
+                    lazy-rules
+                    @update:model-value="
+                      selectComplainant(formData.respondentType)
+                    "
+                    @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"
                 >
-                  <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
-                  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="เลือกสำนักงาน"
-                  :rules="[(val) => !!val || `${'กรุณาเลือกสำนักงาน'}`]"
-                  lazy-rules
-                />
-              </div>
-              <div class="col-xs-12 col-sm-3" id="consideredAgency">
-                <!-- <q-select
+                  <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="formData.organizationId"
+                    :options="organizationOption"
+                    label="เลือกสำนักงาน"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกสำนักงาน'}`]"
+                    lazy-rules
+                  />
+                </div>
+                <div class="col-xs-12 col-sm-3" id="consideredAgency">
+                  <!-- <q-select
                   ref="consideredAgencyRef"
                   for="selectAgency"
                   dense
@@ -551,427 +597,810 @@ onMounted(async () => {
                     </q-item>
                   </template>
                 </q-select> -->
-              </div>
+                </div>
 
-              <div
-                v-if="formData.respondentType !== 'ORGANIZATION'"
-                class="col-6"
-              ></div>
-              <div
-                class="row col-12"
-                v-if="formData.respondentType === 'PERSON'"
-              >
-                <q-card
-                  bordered
+                <div
+                  v-if="formData.respondentType !== 'ORGANIZATION'"
+                  class="col-6"
+                ></div>
+                <div
                   class="row col-12"
-                  style="border: 1px solid #d6dee1"
+                  v-if="formData.respondentType === 'PERSON'"
                 >
-                  <div
-                    class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
+                  <q-card
+                    bordered
+                    class="row col-12"
+                    style="border: 1px solid #d6dee1"
                   >
-                    ผู้ถูกร้องเรียน
-                    <q-btn
-                      size="12px"
-                      flat
-                      round
-                      dense
-                      color="add"
-                      class="q-ml-sm"
-                      icon="mdi-plus"
-                      @click="toggleModal"
+                    <div
+                      class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
                     >
-                      <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="columnsPerson"
-                      :rows="formData.persons"
-                      row-key="personId"
-                      flat
-                      bordered
-                      :paging="true"
-                      dense
-                      class="custom-header-table"
+                      ผู้ถูกร้องเรียน
+                      <q-btn
+                        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="columnsPerson"
+                        :rows="formData.persons"
+                        row-key="personId"
+                        flat
+                        bordered
+                        :paging="true"
+                        dense
+                        class="custom-header-table"
+                      >
+                        <template v-slot:header="props">
+                          <q-tr :props="props">
+                            <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">
+                            <q-td
+                              v-for="col in props.cols"
+                              :key="col.name"
+                              :props="props"
+                            >
+                              <div v-if="col.name == 'no'">
+                                {{ props.rowIndex + 1 }}
+                              </div>
+                              <div>
+                                {{ col.value }}
+                              </div>
+                            </q-td>
+                          </q-tr>
+                        </template>
+                      </d-table>
+                    </div>
+                  </q-card>
+                </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-sm q-px-md"
                     >
-                      <template v-slot:header="props">
-                        <q-tr :props="props">
-                          <q-th
-                            v-for="col in props.cols"
-                            :key="col.name"
-                            :props="props"
-                            style="color: #000000; font-weight: 500"
+                      วันที่สอบสวน
+                      <!-- v-if="
+                        props.data.disciplinaryDateStart &&
+                        props.data.disciplinaryDateStart != null &&
+                        props.data.disciplinaryDateEnd != null
+                      " -->
+
+                      <q-checkbox
+                        for="#clickTime"
+                        size="md"
+                        v-model="formData.clickTime"
+                        label="ขยายเวลา"
+                        color="primary"
+                        dense
+                        class="text-weight-medium q-ml-sm"
+                        keep-color
+                      />
+                    </div>
+                    <div class="col-12"><q-separator /></div>
+                    <div class="q-pa-sm">
+                      <div class="q-col-gutter-sm row">
+                        <div class="col-3" v-if="!formData.clickTime">
+                          <datepicker
+                            menu-class-name="modalfix"
+                            :readonly="isUpdate"
+                            v-model="formData.disciplinaryDateStart"
+                            :locale="'th'"
+                            autoApply
+                            :enableTimePicker="false"
+                            week-start="0"
                           >
-                            <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">
-                          <q-td
-                            v-for="col in props.cols"
-                            :key="col.name"
-                            :props="props"
+                            <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"
+                                :readonly="isUpdate"
+                                outlined
+                                dense
+                                lazy-rules
+                                borderless
+                                hide-bottom-space
+                                :model-value="
+                                  formData.disciplinaryDateStart
+                                    ? date2Thai(formData.disciplinaryDateStart)
+                                    : null
+                                "
+                                :rules="[
+                                  (val) =>
+                                    !!val ||
+                                    `${'กรุณาเลือกวันที่เริ่มการสอบสวน'}`,
+                                ]"
+                                :label="`${'วันที่เริ่มการสอบสวน'}`"
+                              >
+                                <template v-slot:prepend>
+                                  <q-icon
+                                    name="event"
+                                    class="cursor-pointer"
+                                    color="primary"
+                                  >
+                                  </q-icon>
+                                </template>
+                              </q-input>
+                            </template>
+                          </datepicker>
+                        </div>
+
+                        <div class="col-3" v-if="formData.clickTime">
+                          <q-selectinvestigateDis
+                            for="#daysExtend"
+                            outlined
+                            dense
+                            lazy-rules
+                            ref="daysExtendRef"
+                            v-model="formData.daysExtend"
+                            :options="investigateDis.daysExtendOps"
+                            label="จำนวนวันที่ต้องการขยาย"
+                            emit-value
+                            hide-bottom-space
+                            map-options
+                            :rules="[
+                            (val: any) =>
+                              formData.clickTime
+                                ? !!val || 'กรุณาเลือกจำนวนวันที่ต้องการขยาย'
+                                : true,
+                          ]"
+                            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>
+                          </q-selectinvestigateDis>
+                        </div>
+
+                        <div class="col-3">
+                          <datepicker
+                            menu-class-name="modalfix"
+                            v-model="formData.disciplinaryDateEnd"
+                            :readonly="isUpdate"
+                            :locale="'th'"
+                            autoApply
+                            :enableTimePicker="false"
+                            week-start="0"
                           >
-                            <div v-if="col.name == 'no'">
-                              {{ props.rowIndex + 1 }}
-                            </div>
-                            <div>
-                              {{ col.value }}
-                            </div>
-                          </q-td>
-                        </q-tr>
-                      </template>
-                    </d-table>
-                  </div>
-                </q-card>
-              </div>
+                            <template #year="{ year }">{{
+                              year + 543
+                            }}</template>
+                            <template #year-overlay-value="{ value }">{{
+                              parseInt(value + 543)
+                            }}</template>
+                            <template #trigger>
+                              <q-input
+                                for="#dateEnd"
+                                ref="dateEndRef"
+                                class="full-width cursor-pointer"
+                                :readonly="isUpdate"
+                                outlined
+                                dense
+                                lazy-rules
+                                hide-bottom-space
+                                borderless
+                                :model-value="
+                                  formData.disciplinaryDateEnd
+                                    ? date2Thai(formData.disciplinaryDateEnd)
+                                    : null
+                                "
+                                :rules="[
+                                  (val) =>
+                                    !!val ||
+                                    `${'กรุณาเลือกวันที่สิ้นสุดการสอบสวน'}`,
+                                ]"
+                                :label="`${'วันที่สิ้นสุดการสอบสวน'}`"
+                              >
+                                <template v-slot:prepend>
+                                  <q-icon
+                                    name="event"
+                                    class="cursor-pointer"
+                                    color="primary"
+                                  >
+                                  </q-icon>
+                                </template>
+                              </q-input>
+                            </template>
+                          </datepicker>
+                        </div>
+                      </div>
+                    </div>
+                  </q-card>
+                </div>
 
-              <datepicker
-                menu-class-name="modalfix"
-                for="#dateAllegation"
-                v-model="formData.disciplinaryDateAllegation"
-                class="col-xs-12 col-sm-6"
-                :locale="'th'"
-                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
-                    ref="disciplinaryDateAllegationRef"
-                    outlined
-                    dense
-                    class="col-xs-12 col-sm-4"
-                    hide-bottom-space
-                    :model-value="
-                      formData.disciplinaryDateAllegation != null
-                        ? date2Thai(formData.disciplinaryDateAllegation)
-                        : 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>
-
-              <datepicker
-                menu-class-name="modalfix"
-                for="#dateEvident"
-                v-model="formData.disciplinaryDateEvident"
-                :locale="'th'"
-                autoApply
-                class="col-xs-12 col-sm-6"
-                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
-                    ref="disciplinaryDateEvidentRef"
-                    outlined
-                    dense
-                    class="full-width datepicker"
-                    hide-bottom-space
-                    :model-value="
-                      formData.disciplinaryDateEvident != null
-                        ? date2Thai(formData.disciplinaryDateEvident)
-                        : 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 class="row col-12">
-                <q-card
-                  bordered
-                  class="row col-12"
-                  style="border: 1px solid #d6dee1"
+                <datepicker
+                  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"
                 >
-                  <div
-                    class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
-                  >
-                    กรรมการ
-                    <q-btn
-                      size="12px"
-                      flat
-                      round
+                  <template #year="{ year }">
+                    {{ year + 543 }}
+                  </template>
+                  <template #year-overlay-value="{ value }">
+                    {{ parseInt(value + 543) }}
+                  </template>
+                  <template #trigger>
+                    <q-input
+                      ref="disciplinaryDateAllegationRef"
+                      outlined
                       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
+                      class="col-xs-12 col-sm-4"
+                      hide-bottom-space
+                      :model-value="
+                        formData.disciplinaryDateAllegation != null
+                          ? date2Thai(formData.disciplinaryDateAllegation)
+                          : null
                       "
-                      :pagination="initialPagination"
-                      :nornmalData="true"
-                      :paging="true"
-                      :titleText="''"
+                      :label="`${'วันที่รับทราบข้อกล่าวหา'}`"
+                      :rules="[
+                        (val) =>
+                          !!val || `${'กรุณาเลือกวันที่รับทราบข้อกล่าวหา'}`,
+                      ]"
+                      lazy-rules
                     >
-                      <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>
-                            <q-btn
-                              dense
-                              size="12px"
-                              flat
-                              round
-                              color="red"
-                              @click="deleteData(props.row.id)"
-                              icon="mdi-delete"
-                            >
-                              <q-tooltip>ลบข้อมูล</q-tooltip>
-                            </q-btn>
-                          </q-td>
-                        </q-tr>
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          style="color: var(--q-primary)"
+                        >
+                        </q-icon>
                       </template>
-                    </Table>
-                  </div>
-                </q-card>
+                    </q-input>
+                  </template>
+                </datepicker>
+
+                <datepicker
+                  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"
+                >
+                  <template #year="{ year }">
+                    {{ year + 543 }}
+                  </template>
+                  <template #year-overlay-value="{ value }">
+                    {{ parseInt(value + 543) }}
+                  </template>
+                  <template #trigger>
+                    <q-input
+                      outlined
+                      dense
+                      class="col-xs-12 col-sm-4"
+                      hide-bottom-space
+                      :model-value="
+                        formData.disciplinaryDateInvestigation != null
+                          ? date2Thai(formData.disciplinaryDateInvestigation)
+                          : 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>
+
+                <datepicker
+                  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"
+                >
+                  <template #year="{ year }">
+                    {{ year + 543 }}
+                  </template>
+                  <template #year-overlay-value="{ value }">
+                    {{ parseInt(value + 543) }}
+                  </template>
+                  <template #trigger>
+                    <q-input
+                      ref="disciplinaryDateEvidentRef"
+                      outlined
+                      dense
+                      class="full-width datepicker"
+                      hide-bottom-space
+                      :model-value="
+                        formData.disciplinaryDateEvident != null
+                          ? date2Thai(formData.disciplinaryDateEvident)
+                          : 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>
+
+                <datepicker
+                  menu-class-name="modalfix"
+                  for="#dateEvident"
+                  v-model="formData.disciplinaryDateResult"
+                  :locale="'th'"
+                  autoApply
+                  class="col-xs-12 col-sm-3"
+                  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
+                      ref="disciplinaryDateResultRef"
+                      outlined
+                      dense
+                      class="full-width datepicker"
+                      hide-bottom-space
+                      :model-value="
+                        formData.disciplinaryDateResult != null
+                          ? date2Thai(formData.disciplinaryDateResult)
+                          : 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 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
+                        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>
+                              <q-btn
+                                dense
+                                size="12px"
+                                flat
+                                round
+                                color="red"
+                                @click="deleteData(props.row.id)"
+                                icon="mdi-delete"
+                              >
+                                <q-tooltip>ลบข้อมูล</q-tooltip>
+                              </q-btn>
+                            </q-td>
+                          </q-tr>
+                        </template>
+                      </Table>
+                    </div>
+                  </q-card>
+                </div>
+                <q-input
+                  class="col-xs-12 col-sm-3"
+                  dense
+                  outlined
+                  ref="disciplinaryCaseFaultRef"
+                  v-model="formData.disciplinaryCaseFault"
+                  for="#casefault"
+                  label="กรณีมีความผิด"
+                  hide-bottom-space
+                  :rules="[(val) => !!val || `${'กรุณากรอกกรณีมีความผิด'}`]"
+                  lazy-rules
+                />
+
+                <q-input
+                  class="col-xs-12 col-sm-3"
+                  dense
+                  hide-bottom-space
+                  outlined
+                  for="#whereInvestigate"
+                  ref="disciplinaryInvestigateAtRef"
+                  v-model="formData.disciplinaryInvestigateAt"
+                  label="สอบสวนที่"
+                  :rules="[(val) => !!val || `${'กรุณากรอกสอบสวนที่'}`]"
+                  lazy-rules
+                />
+
+                <q-select
+                  dense
+                  class="col-xs-12 col-sm-3"
+                  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="ระดับโทษความผิด"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกระดับโทษความผิด'}`]"
+                  lazy-rules
+                  group-label="group"
+                  group-values="options"
+                >
+                </q-select>
+
+                <q-input
+                  class="col-xs-12 col-sm-3"
+                  dense
+                  for="#refLaw"
+                  hide-bottom-space
+                  outlined
+                  ref="disciplinaryRefLawRef"
+                  v-model="formData.disciplinaryRefLaw"
+                  label="อ้างอิงมาตราตามกฎหมาย"
+                  :rules="[
+                    (val) => !!val || `${'กรุณากรอกอ้างอิงมาตราตามกฎหมาย'}`,
+                  ]"
+                  lazy-rules
+                />
+
+                <q-input
+                  class="col-xs-12 col-sm-6"
+                  dense
+                  outlined
+                  for="#evidence"
+                  ref="disciplinarySummaryEvidenceRef"
+                  hide-bottom-space
+                  v-model="formData.disciplinarySummaryEvidence"
+                  label="สรุปพยานหลักฐานสนับสนุนข้อกล่าวหา"
+                  type="textarea"
+                  :rules="[(val:string) => !!val || `${'กรุณากรอกสรุปพยานหลักฐานสนับสนุนข้อกล่าวหา'}`]"
+                  lazy-rules
+                />
+
+                <q-input
+                  class="col-xs-12 col-sm-6"
+                  dense
+                  outlined
+                  ref="disciplinaryRecordAccuserRef"
+                  for="#recordAccuser"
+                  v-model="formData.disciplinaryRecordAccuser"
+                  label="บันทึกถ้อยคำของผู้กล่าวหา"
+                  hide-bottom-space
+                  type="textarea"
+                  :rules="[(val:string) => !!val || `${'กรุณากรอกบันทึกถ้อยคำของผู้กล่าวหา'}`]"
+                  lazy-rules
+                />
+
+                <q-input
+                  class="col-xs-12 col-sm-6"
+                  dense
+                  outlined
+                  for="#witnesses"
+                  ref="disciplinaryWitnessesRef"
+                  v-model="formData.disciplinaryWitnesses"
+                  label="พยานและบันทึกถ้อยคำพยาน"
+                  hide-bottom-space
+                  type="textarea"
+                  :rules="[(val:string) => !!val || `${'กรุณากรอกพยานและบันทึกถ้อยคำพยาน'}`]"
+                  lazy-rules
+                />
+
+                <q-input
+                  class="col-xs-12 col-sm-6"
+                  dense
+                  outlined
+                  for="#InvestResults"
+                  ref="resultRef"
+                  v-model="formData.result"
+                  label="ผลการสอบสวน"
+                  hide-bottom-space
+                  type="textarea"
+                  :rules="[(val:string) => !!val || `${'กรุณากรอกผลการสอบสวน'}`]"
+                  lazy-rules
+                />
+
+                <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"
+                    >
+                      ผลการพิจารณาความผิดทางวินัย
+                    </div>
+
+                    <div class="col-12"><q-separator /></div>
+
+                    <div class="col-xs-12 q-pa-sm row">
+                      <div class="row col-12 q-col-gutter-md">
+                        <div class="col-3">
+                          <q-select
+                            for="#fault"
+                            outlined
+                            dense
+                            :readonly="isUpdate"
+                            lazy-rules
+                            ref="disciplinaryStatusResultRef"
+                            v-model="formData.disciplinaryStatusResult"
+                            :rules="[
+                              (val) => !!val || `${'กรุณาเลือกผลการสอบสวน'}`,
+                            ]"
+                            :options="investigateDis.offenseDetailsOps"
+                            label="ผลการสอบสวน"
+                            emit-value
+                            map-options
+                            option-label="name"
+                            option-value="id"
+                            use-input
+                            @filter="(inputValue: any,
+                doneFn: Function) => investigateDis.filterFnOptionsType(inputValue, doneFn, 'offenseDetailsOps'
+                )"
+                            ><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
+                            for="#fault"
+                            outlined
+                            dense
+                            ref="disciplinaryCauseTextRef"
+                            v-model="formData.disciplinaryCauseText"
+                            :rules="[
+                              (val) =>
+                                !!val || `${'กรุณาเลือกร้ายแรง/ไม่ร้ายแรง'}`,
+                            ]"
+                            :options="investigateDis.causeTextOptions"
+                            label="ร้ายแรง/ไม่ร้ายแรง"
+                            emit-value
+                            map-options
+                            option-label="name"
+                            option-value="id"
+                            use-input
+                            ><template v-slot:no-option>
+                              <q-item>
+                                <q-item-section class="text-grey">
+                                  ไม่มีข้อมูล
+                                </q-item-section>
+                              </q-item>
+                            </template>
+                          </q-select>
+                        </div>
+                      </div>
+
+                      <div class="row col-12">
+                        <q-input
+                          class="full-width cursor-pointer"
+                          outlined
+                          ref="disciplinaryResultRef"
+                          dense
+                          lazy-rules
+                          borderless
+                          v-model="formData.disciplinaryResult"
+                          :rules="[(val) => !!val || `${'กรุณากรอกเหตุผล'}`]"
+                          hide-bottom-space
+                          :label="`${'เหตุผล'}`"
+                          type="textarea"
+                        />
+                      </div>
+                    </div>
+                  </q-card>
+                </div>
               </div>
-              <q-input
-                class="col-xs-12 col-sm-3"
-                dense
-                outlined
-                ref="disciplinaryCaseFaultRef"
-                v-model="formData.disciplinaryCaseFault"
-                for="#casefault"
-                label="กรณีมีความผิด"
-                hide-bottom-space
-                :rules="[(val) => !!val || `${'กรุณากรอกกรณีมีความผิด'}`]"
-                lazy-rules
-              />
-
-              <q-input
-                class="col-xs-12 col-sm-3"
-                dense
-                hide-bottom-space
-                outlined
-                for="#whereInvestigate"
-                ref="disciplinaryInvestigateAtRef"
-                v-model="formData.disciplinaryInvestigateAt"
-                label="สอบสวนที่"
-                :rules="[(val) => !!val || `${'กรุณากรอกสอบสวนที่'}`]"
-                lazy-rules
-              />
-
-              <q-select
-                dense
-                class="col-xs-12 col-sm-3"
-                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="ระดับโทษความผิด"
-                :rules="[(val) => !!val || `${'กรุณาเลือกระดับโทษความผิด'}`]"
-                lazy-rules
-                group-label="group"
-                group-values="options"
-              >
-              </q-select>
-
-              <q-input
-                class="col-xs-12 col-sm-3"
-                dense
-                for="#refLaw"
-                hide-bottom-space
-                outlined
-                ref="disciplinaryRefLawRef"
-                v-model="formData.disciplinaryRefLaw"
-                label="อ้างอิงมาตราตามกฎหมาย"
-                :rules="[
-                  (val) => !!val || `${'กรุณากรอกอ้างอิงมาตราตามกฎหมาย'}`,
-                ]"
-                lazy-rules
-              />
-
-              <q-input
-                class="col-xs-12 col-sm-6"
-                dense
-                outlined
-                for="#evidence"
-                ref="disciplinarySummaryEvidenceRef"
-                hide-bottom-space
-                v-model="formData.disciplinarySummaryEvidence"
-                label="สรุปพยานหลักฐานสนับสนุนข้อกล่าวหา"
-                type="textarea"
-                :rules="[(val:string) => !!val || `${'กรุณากรอกสรุปพยานหลักฐานสนับสนุนข้อกล่าวหา'}`]"
-                lazy-rules
-              />
-
-              <q-input
-                class="col-xs-12 col-sm-6"
-                dense
-                outlined
-                ref="disciplinaryRecordAccuserRef"
-                for="#recordAccuser"
-                v-model="formData.disciplinaryRecordAccuser"
-                label="บันทึกถ้อยคำของผู้กล่าวหา"
-                hide-bottom-space
-                type="textarea"
-                :rules="[(val:string) => !!val || `${'กรุณากรอกบันทึกถ้อยคำของผู้กล่าวหา'}`]"
-                lazy-rules
-              />
-
-              <q-input
-                class="col-xs-12 col-sm-6"
-                dense
-                outlined
-                for="#witnesses"
-                ref="disciplinaryWitnessesRef"
-                v-model="formData.disciplinaryWitnesses"
-                label="พยานและการบันทึกถ้อยคำ"
-                hide-bottom-space
-                type="textarea"
-                :rules="[(val:string) => !!val || `${'กรุณากรอกพยานและการบันทึกถ้อยคำ'}`]"
-                lazy-rules
-              />
-
-              <q-input
-                class="col-xs-12 col-sm-6"
-                dense
-                outlined
-                for="#InvestResults"
-                ref="resultRef"
-                v-model="formData.result"
-                label="ผลการสอบสวน"
-                hide-bottom-space
-                type="textarea"
-                :rules="[(val:string) => !!val || `${'กรุณากรอกผลการสอบสวน'}`]"
-                lazy-rules
-              />
             </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>
+            <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>
+        </div>
+      </form>
+    </div>
 
-        <UploadFile
-          title="อัปโหลดหลักฐานสนับสนุนข้อกล่าวหา"
-          label="ไฟล์เอกสารหลักฐานสรุปพยานหลักฐานสนับสนุนข้อกล่าวหา"
-          :files="disciplineDisciplinary_DocSummaryEvidences"
-          :id="id"
-          type="summaryEvidence"
-          :fetchData="props.fetchData"
-        />
-        <UploadFile
-          title="อัปโหลดบันทึกถ้อยคำของผู้กล่าวหา"
-          label="ไฟล์เอกสารบันทึกถ้อยคำของผู้กล่าวหา"
-          :files="disciplineDisciplinary_DocRecordAccusers"
-          :id="id"
-          type="recordAccuser"
-          :fetchData="props.fetchData"
-        />
-        <UploadFile
-          title="อัปโหลดพยานและการบันทึกถ้อยคำ"
-          label="ไฟล์เอกสารพยานและการบันทึกถ้อยคำ"
-          :files="disciplineDisciplinary_DocWitnessess"
-          :id="id"
-          type="witnesses"
-          :fetchData="props.fetchData"
-        />
-        <UploadFile
-          title="อัปโหลดไฟล์เอกสารหลักฐานอื่น ๆ"
-          label="ไฟล์เอกสารหลักฐานอื่น ๆ"
-          :files="disciplineDisciplinary_DocOthers"
-          :id="id"
-          type="other"
-          :fetchData="props.fetchData"
-        />
-      </div>
-    </form>
+    <!-- อัพโหลดไฟล์ -->
+    <div class="col-sm-12 col-md-3">
+      <!-- ยังไม่มี api  -->
+      <UploadFile
+        title="อัปโหลดไฟล์เอกสารที่เกี่ยวข้องกับการสอบสวน"
+        label="เลือกไฟล์"
+        :files="disciplineDisciplinary_DocRelevants"
+        :id="id"
+        type="relevants"
+        :fetchData="props.fetchData"
+      />
+
+      <UploadFile
+        title="อัปโหลดหลักฐานสนับสนุนข้อกล่าวหา"
+        label="เลือกไฟล์"
+        :files="disciplineDisciplinary_DocSummaryEvidences"
+        :id="id"
+        type="summaryEvidence"
+        :fetchData="props.fetchData"
+      />
+      <UploadFile
+        title="อัปโหลดบันทึกถ้อยคำของผู้กล่าวหา"
+        label="เลือกไฟล์"
+        :files="disciplineDisciplinary_DocRecordAccusers"
+        :id="id"
+        type="recordAccuser"
+        :fetchData="props.fetchData"
+      />
+      <UploadFile
+        title="อัปโหลดพยานและการบันทึกถ้อยคำ"
+        label="เลือกไฟล์"
+        :files="disciplineDisciplinary_DocWitnessess"
+        :id="id"
+        type="witnesses"
+        :fetchData="props.fetchData"
+      />
+      <UploadFile
+        title="อัปโหลดไฟล์เอกสารหลักฐานอื่น ๆ"
+        label="เลือกไฟล์"
+        :files="disciplineDisciplinary_DocOthers"
+        :id="id"
+        type="other"
+        :fetchData="props.fetchData"
+      />
+    </div>
   </div>
 
+  <!-- Popup ผู้ถูกร้องเรียน -->
   <DialogAddPersonal
     title="ผู้ถูกร้องเรียน"
     :checkId="formData.persons"
diff --git a/src/modules/11_discipline/components/4_Result/DialogSendToCommand.vue b/src/modules/11_discipline/components/4_Result/DialogSendToCommand.vue
index 90e19d8e3..257ab6d68 100644
--- a/src/modules/11_discipline/components/4_Result/DialogSendToCommand.vue
+++ b/src/modules/11_discipline/components/4_Result/DialogSendToCommand.vue
@@ -192,7 +192,7 @@ const fecthTypeOption = async () => {
     .then((res) => {
       optionsType.value = res.data.result.filter(
         (e: OpType) =>
-          e.commandCode === "C-PM-25" || e.commandCode === "C-PM-26"
+          e.commandCode === "C-PM-26" || e.commandCode === "C-PM-27" || e.commandCode === "C-PM-28"
       );
     })
     .catch((e) => {
diff --git a/src/modules/11_discipline/components/4_Result/EditPage.vue b/src/modules/11_discipline/components/4_Result/EditPage.vue
index 1d8518ef8..b8e66eab8 100644
--- a/src/modules/11_discipline/components/4_Result/EditPage.vue
+++ b/src/modules/11_discipline/components/4_Result/EditPage.vue
@@ -97,9 +97,9 @@ onMounted(async () => {
         active-bg-color="teal-1"
         active-class="text-primary"
       >
-        <q-tab name="complaints" label="เรื่องร้องเรียน" />
-        <q-tab name="investigatefacts" label="สืบสวนข้อเท็จจริง" />
-        <q-tab name="disciplinary" label="สอบสวนความผิดทางวินัย" />
+        <q-tab name="complaints" label="เรื่องร้องเรียน (สำเนา)" />
+        <q-tab name="investigatefacts" label="สืบสวนข้อเท็จจริง (สำเนา)" />
+        <q-tab name="disciplinary" label="สอบสวนความผิดทางวินัย (สำเนา)" />
         <q-tab name="result" label="ผลการพิจารณาทางวินัย" />
       </q-tabs>
       <q-separator />
diff --git a/src/modules/11_discipline/components/7_ListSuspend/DialogSendToCommand.vue b/src/modules/11_discipline/components/7_ListSuspend/DialogSendToCommand.vue
new file mode 100644
index 000000000..e341c4d56
--- /dev/null
+++ b/src/modules/11_discipline/components/7_ListSuspend/DialogSendToCommand.vue
@@ -0,0 +1,267 @@
+<script setup lang="ts">
+import { ref, computed, watchEffect } from "vue";
+import { useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import type { QTableProps } from "quasar";
+import type { ResponseItems } from "@/modules/06_retirement/interface/response/Main";
+import DialogHeader from "@/components/DialogHeader.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/** use */
+const $q = useQuasar();
+const selected = ref<ResponseItems[]>([]);
+const mixin = useCounterMixin();
+const { showLoader, success, messageError, dialogConfirm, hideLoader } = mixin;
+
+/** คอลัมน์ */
+const columns2 = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullname",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "fullname",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionLevel",
+    align: "left",
+    label: "ระดับ",
+    sortable: true,
+    field: "positionLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "organizationPositionOld",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "organizationPositionOld",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "statustext",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "statustext",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+/** คอลัมน์ที่แสดง */
+const visibleColumns2 = ref<string[]>([
+  "no",
+  "fullname",
+  "position",
+  "positionLevel",
+  "positionNumberOld",
+  "organizationPositionOld",
+  "statustext",
+]);
+
+/** props*/
+const props = defineProps({
+  modal: Boolean,
+  closeModal: Function,
+  getData: Function,
+  rows2: Array,
+  filterKeyword2: String,
+});
+
+/**
+ * ฟังก์ชั่นการ Selected Data
+ */
+const checkSelected = computed(() => {
+  if (selected.value.length === 0) {
+    return true;
+  }
+});
+
+//popup ยืนยันส่งัว
+const saveOrder = () => {
+  dialogConfirm(
+    $q,
+    () => Ordersave(),
+    "ยืนยันส่งไปออกคำสั่ง",
+    "ต้องการยืนยันส่งไปออกคำสั่งใช่หรือไม่?"
+  );
+};
+
+//ส่งไปออกคำสั่ง
+const Ordersave = async () => {
+  const id = selected.value.map((r) => r.id);
+  const body = {
+    id,
+  };
+  showLoader();
+  await http
+    .post(config.API.outReport, body)
+    .then((res: any) => {
+      success($q, "ส่งไปออกคำสั่งสำเร็จ");
+      props.closeModal?.();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      props.getData?.();
+      hideLoader();
+    });
+};
+
+const emit = defineEmits(["update:filterKeyword2", "update:selected"]);
+const updateInput = (value: any) => {
+  emit("update:filterKeyword2", value);
+};
+
+//รีเซ็ตค่าในช่องค้นหา
+const Reset = () => {
+  emit("update:filterKeyword2", "");
+};
+watchEffect(() => {
+  if (props.modal === true) {
+    selected.value = [];
+  }
+});
+</script>
+<template>
+  <q-dialog v-model="props.modal">
+    <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-end">
+          <div class="col-5">
+            <q-toolbar style="padding: 0">
+              <q-input
+                borderless
+                outlined
+                dense
+                debounce="300"
+                :model-value="filterKeyword2"
+                @update:model-value="updateInput"
+                placeholder="ค้นหา"
+                style="width: 850px; max-width: auto"
+              >
+                <template v-slot:append>
+                  <q-icon v-if="filterKeyword2 == ''" name="search" />
+                  <q-icon
+                    v-if="filterKeyword2 !== ''"
+                    name="clear"
+                    class="cursor-pointer"
+                    @click="Reset"
+                  />
+                </template>
+              </q-input>
+              <q-select
+                v-model="visibleColumns2"
+                multiple
+                outlined
+                dense
+                options-dense
+                :display-value="$q.lang.table.columns"
+                emit-value
+                map-options
+                :options="columns2"
+                option-value="name"
+                options-cover
+                style="min-width: 150px"
+                class="gt-xs q-ml-sm"
+              />
+            </q-toolbar>
+          </div>
+        </div>
+
+        <d-table
+          :columns="columns2"
+          :rows="rows2"
+          :filter="filterKeyword2"
+          row-key="id"
+          :visible-columns="visibleColumns2"
+          selection="multiple"
+          v-model:selected="selected"
+        >
+          <template v-slot:header-selection="scope">
+            <q-checkbox
+              keep-color
+              color="primary"
+              dense
+              v-model="scope.selected"
+            />
+          </template>
+
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td>
+                <q-checkbox
+                  keep-color
+                  color="primary"
+                  dense
+                  v-model="props.selected"
+                />
+              </q-td>
+              <q-td key="no" :props="props">
+                {{ props.rowIndex + 1 }}
+              </q-td>
+              <q-td key="fullname" :props="props">
+                {{ props.row.fullname }}
+              </q-td>
+              <q-td key="position" :props="props">
+                {{ props.row.position }}
+              </q-td>
+              <q-td key="positionLevel" :props="props">
+                {{ props.row.positionLevel }}
+              </q-td>
+              <q-td key="organizationPositionOld" :props="props">
+                <div class="table_ellipsis">
+                  {{ props.row.organizationPositionOld }}
+                </div>
+              </q-td>
+              <q-td key="organization" :props="props">
+                <div class="table_ellipsis">
+                  {{ props.row.organization }}
+                </div>
+              </q-td>
+              <q-td key="statustext" :props="props">
+                {{ props.row.statustext }}
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </q-card-section>
+
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn
+          label="ส่งไปออกคำสั่ง"
+          @click="saveOrder"
+          :disable="checkSelected"
+          color="public"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
diff --git a/src/modules/11_discipline/components/7_ListSuspend/DismissOrder.vue b/src/modules/11_discipline/components/7_ListSuspend/DismissOrder.vue
new file mode 100644
index 000000000..781416f10
--- /dev/null
+++ b/src/modules/11_discipline/components/7_ListSuspend/DismissOrder.vue
@@ -0,0 +1,382 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import type { QTableProps } from "quasar";
+import { useQuasar } from "quasar";
+import { useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { useTransferDataStore } from "@/modules/05_placement/store";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import DialogSendToCommand from "@/modules/11_discipline/components/7_ListSuspend/DialogSendToCommand.vue";
+import type { ResponseData } from "@/modules/06_retirement/interface/response/out";
+
+/** use */
+const $q = useQuasar();
+const router = useRouter();
+const mixin = useCounterMixin();
+const transferStore = useTransferDataStore();
+const {
+  date2Thai,
+  messageError,
+  showLoader,
+  hideLoader,
+  success,
+  dialogMessage,
+} = mixin;
+const { statusText } = transferStore;
+const modal = ref<boolean>(false);
+
+/** คอลัมน์ที่แสดง */
+const visibleColumns = ref<string[]>([
+  "no",
+  "fullname",
+  "position",
+  "positionLevel",
+  "organizationPositionOld",
+  "createdAt",
+  "statustext",
+]);
+
+//ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+const filterKeyword = ref<string>("");
+const filterKeyword2 = ref<string>("");
+const filterRef = ref<any>(null);
+
+//ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+const rows = ref<ResponseData[]>([]);
+const rows2 = ref<ResponseData[]>([]);
+const filters = ref<ResponseData[]>([]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullname",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "fullname",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionLevel",
+    align: "left",
+    label: "ระดับ",
+    sortable: true,
+    field: "positionLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "organizationPositionOld",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "organizationPositionOld",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่ดำเนินการ",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "statustext",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "statustext",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+onMounted(async () => {
+  await getData();
+});
+
+const openModalOrder = () => {
+  openModal();
+  const row = filters.value.filter(
+    (r: ResponseData) =>
+      (r.status == "WAITTING" ||
+        r.status == "PENDING" ||
+        r.status == "APPROVE") &&
+      r.organizationPositionOld &&
+      r.positionTypeOld &&
+      r.positionLevelOld &&
+      r.positionNumberOld &&
+      r.salary &&
+      r.organization &&
+      r.date
+  );
+  rows2.value = row;
+};
+
+//นำข้อมูลมาแสดง
+const getData = async () => {
+  showLoader();
+  await http
+    .get(config.API.retirementOut)
+    .then((res: any) => {
+      const data = res.data.result;
+      let list: ResponseData[] = [];
+      data.map((r: ResponseData) => {
+        list.push({
+          createdAt: date2Thai(r.createdAt),
+          date: r.date,
+          firstName: r.firstName ?? "",
+          id: r.id ?? "",
+          isActive: r.isActive ? r.isActive : false,
+          lastName: r.lastName ?? "",
+          organization: r.organization ?? "",
+          organizationPositionOld: r.organizationPositionOld ?? "",
+          posNo: r.posNo ?? "",
+          position: r.position ?? "",
+          positionLevel: r.positionLevel ?? "",
+          positionLevelOld: r.positionLevelOld ?? "",
+          positionNumberOld: r.positionNumberOld ?? "",
+          positionTypeOld: r.positionTypeOld ?? "",
+          prefix: r.prefix ?? "",
+          reason: r.reason ?? "",
+          salary: r.salary ? r.salary : 0,
+          status: r.status ?? "",
+          statustext: statusText(r.status ?? ""),
+          fullname: `${r.prefix ?? ""}${r.firstName ?? ""} ${r.lastName ?? ""}`,
+        });
+      });
+      rows.value = list;
+      filters.value = list;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const clickDelete = async (id: string) => {
+  dialogMessage(
+    $q,
+    `ลบข้อมูล`,
+    `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
+    "delete",
+    "ยืนยัน",
+    "red",
+    async () => await deleteData(id),
+    async () => await getData()
+  );
+};
+
+const deleteData = async (id: string) => {
+  await http
+    .delete(config.API.outByid(id))
+    .then((res) => {
+      success($q, "ลบข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await getData();
+    });
+};
+
+const openModal = () => (modal.value = true);
+const closeModal = () => (modal.value = false);
+
+const resetFilter = () => {
+  filterKeyword.value = "";
+  filterKeyword2.value = "";
+  filterRef.value.focus();
+};
+const pagination = ref({
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
+</script>
+<template>
+  <div class="toptitle text-dark col-12 row items-center">รายชื่อผู้ถูกพักราชการ</div>
+  <q-card flat bordered class="col-12 q-mt-sm">
+    <q-separator />
+    <div class="row q-pa-md">
+      <div class="col-12">
+        <div class="row col-12">
+          <q-btn
+            @click="openModalOrder"
+            size="14px"
+            flat
+            round
+            color="add"
+            icon="mdi-account-arrow-right"
+          >
+            <q-tooltip>ส่งไปออกคำสั่ง</q-tooltip>
+          </q-btn>
+
+          <q-space />
+          <q-input
+            class="col-xs-12 col-sm-3 col-md-2"
+            standout
+            dense
+            v-model="filterKeyword"
+            ref="filterRef"
+            outlined
+            debounce="300"
+            placeholder="ค้นหา"
+          >
+            <template v-slot:append>
+              <q-icon v-if="filterKeyword == ''" name="search" />
+              <q-icon
+                v-if="filterKeyword !== ''"
+                name="clear"
+                class="cursor-pointer"
+                @click="resetFilter"
+              />
+            </template>
+          </q-input>
+
+          <q-select
+            v-model="visibleColumns"
+            multiple
+            outlined
+            dense
+            options-dense
+            :display-value="$q.lang.table.columns"
+            emit-value
+            map-options
+            :options="columns"
+            option-value="name"
+            options-cover
+            style="min-width: 150px"
+            class="col-xs-12 col-sm-3 col-md-2 q-ml-sm"
+          />
+        </div>
+
+        <div class="col-12 q-pt-sm">
+          <d-table
+            :columns="columns"
+            :rows="rows"
+            :filter="filterKeyword"
+            row-key="id"
+            :visible-columns="visibleColumns"
+            v-model:pagination="pagination"
+          >
+            <template v-slot:header="props">
+              <q-tr :props="props">
+                <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                  <span class="text-weight-medium">{{ col.label }}</span>
+                </q-th>
+                <q-th auto-width />
+              </q-tr>
+            </template>
+            <template v-slot:body="props">
+              <q-tr :props="props" class="cursor-pointer">
+                <q-td
+                  key="no"
+                  :props="props"
+                  @click="router.push(`/retirement/out/${props.row.id}`)"
+                >
+                  {{ props.rowIndex + 1 }}
+                </q-td>
+                <q-td
+                  key="fullname"
+                  :props="props"
+                  @click="router.push(`/retirement/out/${props.row.id}`)"
+                >
+                  {{ props.row.fullname }}
+                </q-td>
+                <q-td
+                  key="position"
+                  :props="props"
+                  @click="router.push(`/retirement/out/${props.row.id}`)"
+                >
+                  {{ props.row.position }}
+                </q-td>
+                <q-td
+                  key="positionLevel"
+                  :props="props"
+                  @click="router.push(`/retirement/out/${props.row.id}`)"
+                >
+                  {{ props.row.positionLevel }}
+                </q-td>
+                <q-td
+                  key="organizationPositionOld"
+                  :props="props"
+                  @click="router.push(`/retirement/out/${props.row.id}`)"
+                >
+                  <div class="table_ellipsis">
+                    {{ props.row.organizationPositionOld }}
+                  </div>
+                </q-td>
+                <q-td
+                  key="organization"
+                  :props="props"
+                  @click="router.push(`/retirement/out/${props.row.id}`)"
+                >
+                  <div class="table_ellipsis">
+                    {{ props.row.organization }}
+                  </div>
+                </q-td>
+                <q-td key="createdAt" :props="props">
+                  {{ props.row.createdAt }}
+                </q-td>
+                <q-td key="statustext" :props="props">
+                  {{ props.row.statustext }}
+                </q-td>
+                <q-td auto-width>
+                  <q-btn
+                    v-if="
+                      props.row.status !== 'DONE' &&
+                      props.row.status !== 'REPORT'
+                    "
+                    dense
+                    size="12px"
+                    flat
+                    round
+                    color="red"
+                    @click="clickDelete(props.row.id)"
+                    icon="mdi-delete"
+                  >
+                    <q-tooltip>ลบข้อมูล</q-tooltip>
+                  </q-btn>
+                </q-td>
+              </q-tr>
+            </template>
+          </d-table>
+        </div>
+      </div>
+    </div>
+  </q-card>
+
+  <DialogSendToCommand
+    v-model:modal="modal"
+    :closeModal="closeModal"
+    :rows2="rows2"
+    v-model:filterKeyword2="filterKeyword2"
+    :fecthlistRecevice="getData"
+  />
+</template>
+<style scoped lang="scss"></style>
diff --git a/src/modules/11_discipline/components/7_ListSuspend/OutRegistry.vue b/src/modules/11_discipline/components/7_ListSuspend/OutRegistry.vue
new file mode 100644
index 000000000..0608a1301
--- /dev/null
+++ b/src/modules/11_discipline/components/7_ListSuspend/OutRegistry.vue
@@ -0,0 +1,474 @@
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { useQuasar } from "quasar";
+import { useRoute, useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import CurrencyInput from "@/components/CurruncyInput.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import keycloak from "@/plugins/keycloak";
+
+/**Import type */
+import type { QForm } from "quasar";
+import type { ResponseDataDetail } from "@/modules/06_retirement/interface/response/expulsion";
+
+/** use */
+const $q = useQuasar();
+const route = useRoute();
+const router = useRouter();
+const mixin = useCounterMixin();
+const dataId = route.params.id.toString();
+const {
+  date2Thai,
+  dialogMessage,
+  messageError,
+  showLoader,
+  hideLoader,
+  success,
+} = mixin;
+
+/**
+ * กำหนดค่าตัวแปร
+ */
+const myForm = ref<QForm | null>(null);
+const roleAdmin = ref<boolean>(false);
+const edit = ref<boolean>(false);
+const organizationPositionOld = ref<string>("");
+const positionTypeOld = ref<string>("");
+const positionLevelOld = ref<string>("");
+const posNo = ref<string>("");
+const salary = ref<number>(0);
+const organization = ref<string>("");
+const date = ref<Date | null>(null);
+const reason = ref<string>("");
+const responseData = ref<ResponseDataDetail>({
+  personId: "",
+  avataPath: "",
+  createdAt: new Date(),
+  date: new Date(),
+  id: "",
+  organization: "",
+  organizationPositionOld: "",
+  positionLevelOld: "",
+  positionNumberOld: "",
+  positionTypeOld: "",
+  reason: "",
+  salary: 0,
+  status: "",
+  fullname: "",
+});
+
+/** Hook */
+onMounted(async () => {
+  if (keycloak.tokenParsed != null) {
+    roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
+  }
+  await getData();
+});
+
+//นำข้อมูลจาก API มาแสดง
+const getData = async () => {
+  showLoader();
+  await http
+    .get(config.API.outByid(dataId))
+    .then((res) => {
+      const data = res.data.result;
+      responseData.value.personId = data.profileId;
+      responseData.value.createdAt = data.createdAt;
+      responseData.value.date =
+        data.date !== null ? new Date(data.date) : new Date();
+      responseData.value.id = data.id ?? "";
+      responseData.value.organization = data.organization ?? "";
+      responseData.value.organizationPositionOld =
+        data.organizationPositionOld ?? "";
+      responseData.value.positionLevelOld = data.positionLevelOld ?? "";
+      responseData.value.positionNumberOld = data.positionNumberOld ?? "";
+      responseData.value.positionTypeOld = data.positionTypeOld ?? "";
+      responseData.value.reason = data.reason ?? "";
+      responseData.value.salary = data.salary !== null ? data.salary : 0;
+      responseData.value.status = data.status ?? "";
+      responseData.value.avataPath = data.avatar ?? "";
+      responseData.value.fullname = `${data.firstName ?? "-"} ${
+        data.lastName ?? "-"
+      }`;
+
+      organizationPositionOld.value = data.organizationPositionOld ?? "";
+      positionTypeOld.value = data.positionTypeOld ?? "";
+      positionLevelOld.value = data.positionLevelOld ?? "";
+      posNo.value = data.positionNumberOld ?? "";
+      salary.value = data.salary ?? "";
+      organization.value = data.organization ?? "";
+      date.value = data.date !== null ? new Date(data.date) : null;
+      reason.value = data.reason ?? "";
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+/**
+ * ฟังก์ชั่น Cancle
+ */
+const clickCancel = async () => {
+  await getData();
+  edit.value = false;
+};
+
+/**
+ * ฟังก์ชั่น Save
+ */
+const conditionSave = async () => {
+  if (myForm.value !== null) {
+    myForm.value.validate().then((success) => {
+      if (success) {
+        dialogMessage(
+          $q,
+          "ต้องการแก้ไขข้อมูลหรือไม่?",
+          "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย",
+          "mdi-help-circle-outline",
+          "ตกลง",
+          "public",
+          async () => await saveData(),
+          undefined
+        );
+      }
+    });
+  }
+};
+
+/**
+ * ฟังก์ชั่น Saveจาก API
+ */
+const saveData = async () => {
+  const body = {
+    organization: organization.value,
+    reason: reason.value,
+    organizationPositionOld: organizationPositionOld.value,
+    date: date.value,
+    positionTypeOld: positionTypeOld.value,
+    positionLevelOld: positionLevelOld.value,
+    positionNumberOld: posNo.value,
+    amountOld: salary.value,
+  };
+  showLoader();
+  await http
+    .put(config.API.outByid(dataId), body)
+    .then((res: any) => {
+      success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
+      edit.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await getData();
+      hideLoader();
+    });
+};
+
+/**
+ * Function เพิ่ม Class เวลา Edit
+ * @param val เมื่อเป็นEdit จะเปลี่ยน Class
+ */
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+</script>
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    <q-btn
+      icon="mdi-arrow-left"
+      unelevated
+      round
+      dense
+      flat
+      color="primary"
+      class="q-mr-sm"
+      @click="router.go(-1)"
+    />
+    รายละเอียดการของ {{ responseData.fullname }}
+  </div>
+  <q-card bordered class="row col-12 text-dark">
+    <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+      <div class="q-pl-sm text-weight-bold text-subtitle2">
+        {{ responseData.fullname }}
+      </div>
+      <q-space />
+      <q-btn
+        outline
+        color="blue"
+        dense
+        icon-right="mdi-open-in-new"
+        class="q-px-sm"
+        label="ดูข้อมูลทะเบียนประวัติ"
+        @click="router.push(`/registry/${responseData.personId}`)"
+      />
+    </div>
+    <div class="col-12"><q-separator /></div>
+    <div class="row col-12 q-pa-md">
+      <div class="col-12 row bg-white q-col-gutter-md">
+        <div class="col-xs-3 col-sm-2 col-md-1 row">
+          <q-img
+            :src="responseData.avataPath"
+            v-if="responseData.avataPath !== ''"
+          />
+          <q-img src="@/assets/avatar_user.jpg" v-else />
+        </div>
+        <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-12 q-pl-md">
+            <div class="col-12 text-top">ตำแหน่งในสายงาน</div>
+            <div class="col-12 text-detail">
+              {{ responseData.positionTypeOld }}
+            </div>
+          </div>
+        </div>
+        <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-12">
+            <div class="col-12 text-top">ระดับ</div>
+            <div class="col-12 text-detail">
+              {{ responseData.positionLevelOld }}
+            </div>
+          </div>
+        </div>
+        <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-12">
+            <div class="col-12 text-top">สังกัด</div>
+            <div class="col-12 text-detail">
+              {{ responseData.organizationPositionOld }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </q-card>
+
+  <q-card bordered class="row col-12 text-dark q-mt-sm">
+    <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+      <div class="q-pl-sm text-weight-bold text-dark">
+        แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย
+      </div>
+      <q-space />
+      <div
+        v-if="
+          responseData.status !== 'DONE' && responseData.status !== 'REPORT'
+        "
+      >
+        <div class="q-gutter-sm" v-if="!edit">
+          <q-btn
+            outline
+            color="primary"
+            dense
+            icon-right="mdi-file-edit-outline"
+            class="q-px-sm"
+            label="แก้ไข"
+            style="width: 80px"
+            @click="edit = !edit"
+          />
+        </div>
+        <div class="q-gutter-sm" v-else>
+          <q-btn
+            outline
+            color="public"
+            dense
+            class="q-px-sm"
+            label="บันทึก"
+            style="width: 80px"
+            @click="conditionSave"
+          />
+          <q-btn
+            outline
+            color="red"
+            dense
+            class="q-px-sm"
+            label="ยกเลิก"
+            style="width: 80px"
+            @click="clickCancel"
+          />
+        </div>
+      </div>
+    </div>
+    <div class="col-12"><q-separator /></div>
+    <q-form ref="myForm">
+      <div class="row col-12 q-pa-md">
+        <div class="col-12 row bg-white q-col-gutter-md">
+          <div class="col-xs-12 row items-center">
+            <div class="col-12">
+              <div class="text-weight-bold">ตำแหน่งและหน่วยงานเดิม</div>
+            </div>
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="organizationPositionOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
+                hide-bottom-space
+                :label="`${'ตำแหน่ง/สังกัด'}`"
+                type="textarea"
+              />
+            </div>
+          </div>
+          <div class="col-xs-6 col-sm-3 row">
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="positionTypeOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]"
+                hide-bottom-space
+                :label="`${'ตำแหน่งประเภท'}`"
+              />
+            </div>
+          </div>
+          <div class="col-xs-6 col-sm-3 row">
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="positionLevelOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกระดับ'}`]"
+                hide-bottom-space
+                :label="`${'ระดับ'}`"
+              />
+            </div>
+          </div>
+          <div class="col-xs-6 col-sm-3 row">
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="posNo"
+                :rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]"
+                hide-bottom-space
+                :label="`${'เลขที่'}`"
+              />
+            </div>
+          </div>
+          <div class="col-xs-6 col-sm-3 row">
+            <div class="col-12">
+              <CurrencyInput
+                v-model="salary"
+                :edit="edit"
+                :options="{
+                  currency: 'THB',
+                }"
+                :label="`${'เงินเดือน'}`"
+              />
+            </div>
+          </div>
+          <div class="col-12"><q-separator /></div>
+          <div class="col-xs-6 col-sm-6 row">
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="organization"
+                :rules="[(val) => !!val || `${'กรุณากรอก'}`]"
+                hide-bottom-space
+                :label="`${'สังกัด'}`"
+              />
+            </div>
+          </div>
+          <div class="col-xs-6 col-sm-6 row">
+            <div class="col-12">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="date"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :readonly="!edit"
+                    :borderless="!edit"
+                    :model-value="date !== null ? date2Thai(date) : null"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
+                    hide-bottom-space
+                    :label="`${'ตั้งแต่วัน'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+          </div>
+          <div class="col-12">
+            <q-input
+              :class="getClass(edit)"
+              :outlined="edit"
+              dense
+              lazy-rules
+              :readonly="!edit"
+              :borderless="!edit"
+              v-model="reason"
+              hide-bottom-space
+              :label="`${'หมายเหตุ '}`"
+              type="textarea"
+            />
+          </div>
+        </div>
+      </div>
+    </q-form>
+  </q-card>
+</template>
+<style lang="scss" scope>
+.q-img {
+  border-radius: 5px;
+  height: 70px;
+}
+.text-top {
+  color: gray;
+  font-weight: 400;
+  padding-bottom: 3px;
+}
+.text-detail {
+  font-weight: 500;
+}
+</style>
diff --git a/src/modules/11_discipline/components/UploadFile.vue b/src/modules/11_discipline/components/UploadFile.vue
index c5635cff4..2423f2626 100644
--- a/src/modules/11_discipline/components/UploadFile.vue
+++ b/src/modules/11_discipline/components/UploadFile.vue
@@ -98,7 +98,7 @@ function downloadFile(link: string) {
 </script>
 
 <template>
-  <q-card flat class="q-pa-md q-mt-sm">
+  <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">
@@ -108,7 +108,7 @@ function downloadFile(link: string) {
           <div class="col-12"><q-separator /></div>
           <div class="col-xs-12 q-pa-sm row">
             <q-file
-              class="col-11 q-mt-sm"
+              class="col-11"
               outlined
               dense
               ref="fileRef"
@@ -130,7 +130,6 @@ function downloadFile(link: string) {
                 round
                 dense
                 color="add"
-                class="q-ml-sm q-mt-sm"
                 icon="mdi-upload"
                 @click="uploadFile()"
                 ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
@@ -138,19 +137,15 @@ function downloadFile(link: string) {
             </div>
           </div>
 
-          <div class="col-xs-12 q-pa-sm row" v-if="props.files">
+          <div v-if="props.files.length > 0" class="col-xs-12 q-pa-sm row">
             <q-list
-              v-if="props.files.length > 0"
+              v-for="(f, index) in props.files"
+              :key="index"
               bordered
               separator
               class="full-width"
             >
-              <q-item
-                v-for="(f, index) in props.files"
-                :key="index"
-                clickable
-                v-ripple
-              >
+              <q-item clickable v-ripple>
                 <q-item-section>{{ f.fileName }}</q-item-section>
                 <q-item-section avatar>
                   <div class="row">
@@ -184,6 +179,10 @@ function downloadFile(link: string) {
               </q-item>
             </q-list>
           </div>
+
+          <div class="col-12 q-mt-sm" v-if="props.files.length == 0">
+            <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
+          </div>
         </q-card>
       </div>
     </div>
diff --git a/src/modules/11_discipline/interface/request/disciplinary.ts b/src/modules/11_discipline/interface/request/disciplinary.ts
index 1bb6f8eb5..4f5d5d2e4 100644
--- a/src/modules/11_discipline/interface/request/disciplinary.ts
+++ b/src/modules/11_discipline/interface/request/disciplinary.ts
@@ -12,8 +12,8 @@ interface Persons {
   name: string;
 }
 interface Director {
-  directorId: string;
-  duty: string;
+  directorId?: string;
+  duty?: string;
   email: string;
   firstName: string;
   id: string;
@@ -21,7 +21,7 @@ interface Director {
   phone: string;
   position: string;
   prefix: string;
-  total: number;
+  total?: number;
 }
 // interface Persons {
 //   personId: string; //id อ้างอิง profile
@@ -52,6 +52,15 @@ interface FormData {
   result: string;
   directors: Director[];
   persons: Persons[];
+  clickTime: boolean;
+  disciplinaryDateStart: Date | null;
+  disciplinaryDateEnd: Date | null;
+  daysExtend: number;
+  disciplinaryDateInvestigation: Date | null;
+  disciplinaryDateResult: Date | null;
+  disciplinaryStatusResult: string;
+  disciplinaryCauseText: string;
+  disciplinaryResult: string;
 
   // filesWitnesses: File | null;
   // filesEtc: File | null;
@@ -74,16 +83,21 @@ interface FormData {
 interface DisciplinaryRef {
   respondentType: object | null;
   organizationId: object | null;
-  disciplinaryDateAllegation: object | null;
-  disciplinaryDateEvident: object | null;
-  disciplinaryCaseFault: object | null;
-  disciplinaryInvestigateAt: object | null;
+  // disciplinaryDateAllegation: object | null;
+  // disciplinaryDateEvident: object | null;
+  // disciplinaryCaseFault: object | null;
+  // disciplinaryInvestigateAt: object | null;
   disciplinaryFaultLevel: object | null;
-  disciplinaryRefLaw: object | null;
-  disciplinarySummaryEvidence: object | null;
-  disciplinaryRecordAccuser: object | null;
-  disciplinaryWitnesses: object | null;
-  result: object | null;
+  // disciplinaryRefLaw: object | null;
+  // disciplinarySummaryEvidence: object | null;
+  // disciplinaryRecordAccuser: object | null;
+  // disciplinaryWitnesses: object | null;
+  // result: object | null;
+  date: object | null;
+  dateEnd: object | null;
+  daysExtend: object | null;
+  disciplinaryDateResult: object | null;
+
   // filesRecordAccuser: object | null;
   // filesWitnesses: object | null;
   // filesEtc: object | null;
diff --git a/src/modules/11_discipline/router.ts b/src/modules/11_discipline/router.ts
index f69308f15..2e26a1b13 100644
--- a/src/modules/11_discipline/router.ts
+++ b/src/modules/11_discipline/router.ts
@@ -59,9 +59,15 @@ const InvestigateDisciplinaryAdd = () =>
 /** หน้ารายการผลการพิจารณาทางวินัย */
 const resultMainPage = () =>
   import("@/modules/11_discipline/components/4_Result/MainPage.vue");
-  const resultEditPage = () =>
+const resultEditPage = () =>
   import("@/modules/11_discipline/components/4_Result/EditPage.vue");
 
+// รายชื่อผู้ถูกพักราชการ
+const listSuspendMainPage = () =>
+  import("@/modules/11_discipline/components/7_ListSuspend/DismissOrder.vue");
+const suspendEditPage = () =>
+  import("@/modules/11_discipline/components/7_ListSuspend/OutRegistry.vue");
+
 export default [
   {
     path: "/discipline/complaints",
@@ -254,6 +260,27 @@ export default [
       Role: "discipline",
     },
   },
+  {
+    path: "/discipline-suspend",
+    name: "disciplineListSuspend",
+    component: listSuspendMainPage,
+    meta: {
+      Auth: true,
+      Key: [11.4],
+      Role: "discipline",
+    },
+  },
+  {
+    path: "/discipline-suspend/:id",
+    name: "disciplineEditSuspend",
+    component: suspendEditPage,
+    meta: {
+      Auth: true,
+      Key: [11.4],
+      Role: "discipline",
+    },
+  },
+
   // {
   //   path: "/discipline-order",
   //   name: "disciplineOrder",
diff --git a/src/modules/11_discipline/store/InvestigateDisStore.ts b/src/modules/11_discipline/store/InvestigateDisStore.ts
index 6c3587d35..6eec56c72 100644
--- a/src/modules/11_discipline/store/InvestigateDisStore.ts
+++ b/src/modules/11_discipline/store/InvestigateDisStore.ts
@@ -7,6 +7,7 @@ import type {
   directorType,
   responseType,
   DataOptioGroup,
+  DataNumberOption
 } from "@/modules/11_discipline/interface/index/Main";
 import { useCounterMixin } from "@/stores/mixin";
 const mixin = useCounterMixin();
@@ -19,11 +20,20 @@ export const useInvestigateDisStore = defineStore(
     const rows = ref<investigateDisDataRowType[]>([]);
     const rows2 = ref<directorType[]>([]);
     const selected = ref<directorType[]>([]);
-    const optionsTypefault = ref<DataOption[]>([
-      { id: "0", name: "ไม่ระบุ" },
-      { id: "1", name: "ร้ายแรง" },
-      { id: "2", name: "ไม่ร้ายแรง" },
+
+    const daysExtendOps = ref<DataNumberOption[]>([
+      { id: 15, name: "15 วัน" },
+      { id: 30, name: "30 วัน" },
+      { id: 45, name: "45 วัน" },
+      { id: 60, name: "60 วัน" },
     ]);
+
+    const offenseDetailsOps = ref<DataOption[]>([
+      { id: "NOT_SPECIFIED", name: "ยังไม่ระบุ" },
+      { id: "HAVE_CAUSE", name: "มีมูล" },
+      { id: "NO_CAUSE", name: "ไม่มีมูล" },
+  ]);
+
     const optionsfaultLevel = ref<DataOptioGroup[]>([
       { id: "0", name: "ไม่ร้ายแรง", disable: true },
       { id: "ภาคทัณฑ์", name: "ภาคทัณฑ์", disable: false },
@@ -41,6 +51,23 @@ export const useInvestigateDisStore = defineStore(
       { id: "ปลดออก", name: "ปลดออก", disable: false },
       { id: "ไล่ออก", name: "ไล่ออก", disable: false },
     ]);
+
+    const statusOps = ref<DataOption[]>([
+      { id: "NEW", name: "กำลังสอบสวน" },
+      { id: "STOP", name: "ยุติเรื่อง" },
+      { id: "COMPLETE", name: "ส่งไปสอบสวน" },
+    ]);
+
+    const causeTextOptions = ref<DataOption[]>([
+      { id: "ร้ายแรง", name: "ร้ายแรง" },
+      { id: "ไม่ร้ายแรง", name: "ไม่ร้ายแรง" },
+    ]);
+
+    function convertStatus(val: string) {
+      const result = statusOps.value.find((x: any) => x.id == val)?.name;
+      return result ? result : "-";
+    }
+
     async function fetchList(data: investigateDisDataRowType[]) {
       let datalist: any[] = data.map((e: any) => ({
         id: e.id,
@@ -49,7 +76,7 @@ export const useInvestigateDisStore = defineStore(
         offenseDetails: convertFault(e.offenseDetails),
         disciplinaryFaultLevel: e.disciplinaryFaultLevel ?? "-",
         disciplinaryCaseFault: e.disciplinaryCaseFault ?? "-",
-        status: e.status ?? "-",
+        status: convertStatus(e.status) ?? "-",
         createdAt: e.createdAt ? date2Thai(e.createdAt) : "-",
       }));
 
@@ -289,23 +316,37 @@ export const useInvestigateDisStore = defineStore(
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",
       },
-      {
-        name: "total",
-        align: "left",
-        label: "จำนวนเรื่องสืบสวน",
-        sortable: true,
-        field: "total",
-        headerStyle: "font-size: 14px",
-        style: "font-size: 14px",
-      },
+      // {
+      //   name: "total",
+      //   align: "left",
+      //   label: "จำนวนเรื่องสืบสวน",
+      //   sortable: true,
+      //   field: "total",
+      //   headerStyle: "font-size: 14px",
+      //   style: "font-size: 14px",
+      // },
     ]);
 
+    function filterFnOptionsType(
+      val: string | number,
+      update: any,
+      type: string
+    ) {
+      update(() => {
+        if (type === "offenseDetailsOps") {
+          offenseDetailsOps.value = offenseDetailsOps.value.filter(
+            (v: any) => v.name.toLowerCase().indexOf(val) > -1
+          );
+        }
+      });
+    }
+
     return {
       tabMenu,
       fetchList,
       rows,
       rows2,
-      optionsTypefault,
+      offenseDetailsOps,
       optionsfaultLevel,
       fecthDirector,
 
@@ -313,6 +354,10 @@ export const useInvestigateDisStore = defineStore(
       columns,
       visibleColumnsDirector,
       columnsDirector,
+      daysExtendOps,
+
+      filterFnOptionsType,
+      causeTextOptions
     };
   }
 );