diff --git a/src/interface/request/main/main.ts b/src/interface/request/main/main.ts
index fa3a8e852..823f4a2e1 100644
--- a/src/interface/request/main/main.ts
+++ b/src/interface/request/main/main.ts
@@ -431,7 +431,7 @@ const menuList = readonly<any[]>([
       {
         key: 11.4,
         label: "ออกคำสั่ง",
-        path: "/discipline-order",
+        path: "/disciplineorder",
         role: "coin",
       },
       {
diff --git a/src/modules/07_insignia/components/3_result/fileUpload.vue b/src/modules/07_insignia/components/3_result/fileUpload.vue
index 14cfb4e48..eb7307d4f 100644
--- a/src/modules/07_insignia/components/3_result/fileUpload.vue
+++ b/src/modules/07_insignia/components/3_result/fileUpload.vue
@@ -152,7 +152,7 @@ const pagination = ref({
   <Transition>
     <div class="rounded-borders q-pa-md q-mb-md">
       <div class="row col-12">
-        <q-card bordered class="col-12 q-pa-md q-mb-sm">
+        <q-card bordered class="col-12 q-pa-sm q-mb-sm">
           <q-form ref="myForm">
             <div class="row col-12 q-col-gutter-x-sm">
               <div class="col-3">
@@ -167,20 +167,12 @@ const pagination = ref({
                 <q-input class="bg-white" outlined dense lazy-rules v-model="documentTitle" :label="`${'ชื่อเอกสาร'}`"
                   hide-bottom-space :rules="[(val) => !!val || `กรุณากรอกชื่อเอกสาร`]" />
               </div>
-              <div class="col-6">
-                <q-input class="bg-white" outlined dense lazy-rules v-model="reason" :label="`${'หมายเหตุ'}`"
+              <div class="col-6 row no-wrap">
+                <q-input class="bg-white full-width" outlined dense lazy-rules v-model="reason" :label="`${'หมายเหตุ'}`"
                   hide-bottom-space />
+                <q-btn unelevated dense class="q-ml-sm q-px-md items-center" color="public" label="บันทึก" @click="save" />
               </div>
             </div>
-
-            <div class="row col-12">
-              <q-separator/>
-            </div>
-            <div class="row col-12 q-mt-xs">
-              <q-space />
-              <q-btn unelevated dense class="q-px-md items-center" color="public" label="บันทึก" @click="save" />
-            </div>
-
           </q-form>
         </q-card>
         <div class="row col-12">
diff --git a/src/modules/07_insignia/components/5_Borrow/Main.vue b/src/modules/07_insignia/components/5_Borrow/Main.vue
index f0930fed2..e3ce435a5 100644
--- a/src/modules/07_insignia/components/5_Borrow/Main.vue
+++ b/src/modules/07_insignia/components/5_Borrow/Main.vue
@@ -537,7 +537,6 @@ const clearInsigniaFilters = (name: string) => {
                 </template>
               </q-select>
 
-              <q-space />
               <div>
                 <q-btn @click="addData()" size="12px" flat round color="add" icon="mdi-plus">
                   <q-tooltip>เพิ่ม</q-tooltip>
diff --git a/src/modules/07_insignia/views/ResultPage.vue b/src/modules/07_insignia/views/ResultPage.vue
index 79d622382..4f1f561f3 100644
--- a/src/modules/07_insignia/views/ResultPage.vue
+++ b/src/modules/07_insignia/views/ResultPage.vue
@@ -544,71 +544,72 @@ const clearInsigniaFilters = (name: string) => {
         class="q-pa-none"
       >
         <div class="q-pa-md">
-          <div class="row col-12 q-pb-sm q-col-gutter-x-xs no-wrap">
-            <div>
-              <q-file
-                dense
-                clearable
-                outlined
-                v-model="fileResult"
-                label="บันทึกผลการได้รับพระราชทานเครื่องราชอิสริยาภรณ์"
-                style="min-width: 350px"
-                accept=".xlsx"
-              >
-                <template v-slot:prepend>
-                  <q-icon name="attach_file" />
-                </template>
-                <q-tooltip
-                  >อัพโหลดไฟล์บันทึกผลการได้รับพระราชทานเครื่องราชอิสริยาภรณ์</q-tooltip
+          <q-card bordered class="col-12 q-mb-sm q-pa-sm">
+            <div class="row col-12 q-col-gutter-x-xs">
+              <div class="col-xs-12 col-sm-6 row no-wrap q-col-gutter-x-xs">
+                <q-file
+                  dense
+                  clearable
+                  outlined
+                  v-model="fileResult"
+                  label="บันทึกผลการได้รับพระราชทานเครื่องราชอิสริยาภรณ์"
+                  accept=".xlsx"
+                  class=" full-width"
                 >
-              </q-file>
-            </div>
-            <div v-if="fileResult !== null">
-              <q-btn
-                size="12px"
-                flat
-                round
-                color="add"
-                icon="mdi-upload"
-                @click="perviewfile(fileResult, 'receice')"
-              >
-                <q-tooltip
-                  >อัพโหลดไฟล์บันทึกผลการได้รับพระราชทานเครื่องราชอิสริยาภรณ์</q-tooltip
+                  <template v-slot:prepend>
+                    <q-icon name="attach_file" color="primary" />
+                  </template>
+                  <q-tooltip
+                    >อัพโหลดไฟล์บันทึกผลการได้รับพระราชทานเครื่องราชอิสริยาภรณ์</q-tooltip
+                  >
+                </q-file>
+                <div v-if="fileResult !== null">
+                  <q-btn
+                    size="12px"
+                    flat
+                    class="bg-teal-1 fit"
+                    color="add"
+                    icon="mdi-upload"
+                    @click="perviewfile(fileResult, 'receice')"
+                  >
+                    <q-tooltip
+                      >อัพโหลดไฟล์บันทึกผลการได้รับพระราชทานเครื่องราชอิสริยาภรณ์</q-tooltip
+                    >
+                  </q-btn>
+                </div>
+              </div>
+              <div class="col-xs-12 col-sm-6 row no-wrap q-col-gutter-x-xs">
+                <q-file
+                  dense
+                  clearable
+                  outlined
+                  v-model="fileinvoice"
+                  label="บันทึกผลการจ่ายใบกำกับ"
+                  accept=".xlsx"
+                  class=" full-width"
                 >
-              </q-btn>
+                  <template v-slot:prepend>
+                    <q-icon name="attach_file" color="primary"/>
+                  </template>
+                  <q-tooltip>อัพโหลดไฟล์บันทึกผลการจ่ายใบกำกับ</q-tooltip>
+                </q-file>
+                <div v-if="fileinvoice !== null">
+                  <q-btn
+                    size="12px"
+                    flat
+                    color="add"
+                    class="bg-teal-1 fit"
+                    icon="mdi-upload"
+                    @click="perviewfile(fileinvoice, 'invoice')"
+                  >
+                    <q-tooltip>อัพโหลดไฟล์บันทึกผลการจ่ายใบกำกับ</q-tooltip>
+                  </q-btn>
+                </div>
+              </div>
             </div>
-            <div>
-              <q-file
-                dense
-                clearable
-                outlined
-                v-model="fileinvoice"
-                label="บันทึกผลการจ่ายใบกำกับ"
-                style="min-width: 350px"
-                accept=".xlsx"
-              >
-                <template v-slot:prepend>
-                  <q-icon name="attach_file" />
-                </template>
-                <q-tooltip>อัพโหลดไฟล์บันทึกผลการจ่ายใบกำกับ</q-tooltip>
-              </q-file>
-            </div>
-            <div v-if="fileinvoice !== null">
-              <q-btn
-                size="12px"
-                flat
-                round
-                color="add"
-                icon="mdi-upload"
-                @click="perviewfile(fileinvoice, 'invoice')"
-              >
-                <q-tooltip>อัพโหลดไฟล์บันทึกผลการจ่ายใบกำกับ</q-tooltip>
-              </q-btn>
-            </div>
-          </div>
-          <div class="row col-12 q-pb-sm q-col-gutter-x-xs">
+          </q-card>
+          <div class="row col-12 q-pb-sm q-col-gutter-xs">
             <q-select
-              class="col-2"
               v-model="DataStore.insignia"
               dense
               outlined
@@ -623,7 +624,7 @@ const clearInsigniaFilters = (name: string) => {
               option-value="id"
               :readonly="false"
               :borderless="false"
-              style="min-width: 150px"
+              style="width: 280px"
               @update:model-value="selectorInsignia"
               @filter="(inputValue:any,
                       doneFn:Function) => filterSelector(inputValue, doneFn,'insigniaTypeFilter'
@@ -645,122 +646,8 @@ const clearInsigniaFilters = (name: string) => {
                   </q-item-section>
                 </q-item>
               </template>
-            </q-select>
-            <q-select
-              v-model="DataStore.invoiceType"
-              dense
-              outlined
-              lazy-rules
-              hide-bottom-space
-              :label="`${'ใบกำกับ'}`"
-              emit-value
-              map-options
-              use-input
-              option-label="name"
-              :options="filterInvoice"
-              option-value="id"
-              :readonly="false"
-              :borderless="false"
-              style="min-width: 150px"
-              @update:model-value="
-                DataStore.searchData(
-                  DataStore.invoiceType,
-                  DataStore.employeeClass
-                )
-              "
-              @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'filterInvoice'
-                      ) "
-            >
-              <template v-if="DataStore.invoiceType !== 'all'" v-slot:append>
-                <q-icon
-                  name="cancel"
-                  @click.stop.prevent="
-                    clearInsigniaFilters('filterInvoice'),
-                      DataStore.searchData(
-                        DataStore.invoiceType,
-                        DataStore.employeeClass
-                      )
-                  "
-                  class="cursor-pointer"
-                />
-              </template>
-              <template v-slot:no-option>
-                <q-item>
-                  <q-item-section class="text-grey">
-                    ไม่มีข้อมูล
-                  </q-item-section>
-                </q-item>
-              </template>
-            </q-select>
-            <div>
-              <q-select
-                v-model="DataStore.employeeClass"
-                dense
-                outlined
-                lazy-rules
-                hide-bottom-space
-                :label="`${'สถานภาพ'}`"
-                emit-value
-                map-options
-                use-input
-                option-label="name"
-                :options="filterEmployee"
-                option-value="id"
-                :readonly="false"
-                :borderless="false"
-                style="min-width: 150px"
-                @update:model-value="
-                  DataStore.searchData(
-                    DataStore.invoiceType,
-                    DataStore.employeeClass
-                  )
-                "
-                @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'filterEmployee'
-                      ) "
-              >
-                <template
-                  v-if="DataStore.employeeClass !== 'all'"
-                  v-slot:append
-                >
-                  <q-icon
-                    name="cancel"
-                    @click.stop.prevent="
-                      clearInsigniaFilters('filterEmployee'),
-                        DataStore.searchData(
-                          DataStore.invoiceType,
-                          DataStore.employeeClass
-                        )
-                    "
-                    class="cursor-pointer"
-                  />
-                </template>
-                <template v-slot:no-option>
-                <q-item>
-                  <q-item-section class="text-grey">
-                    ไม่มีข้อมูล
-                  </q-item-section>
-                </q-item>
-              </template>
-              </q-select>
-            </div>
-
-            <div>
-              <q-btn
-                @click="addData()"
-                size="12px"
-                flat
-                round
-                color="add"
-                icon="mdi-plus"
-              >
-                <q-tooltip>เพิ่ม</q-tooltip>
-              </q-btn>
-            </div>
-
+            </q-select> 
             <q-space />
-
             <div class="items-center" style="display: flex">
               <!-- ค้นหาข้อความใน table -->
               <q-input
@@ -800,6 +687,118 @@ const clearInsigniaFilters = (name: string) => {
                 class="gt-xs q-ml-sm"
               />
             </div>
+            
+          </div>
+          <div class="row col-12 q-mb-sm q-col-gutter-xs">
+            <q-select
+              v-model="DataStore.invoiceType"
+              dense
+              outlined
+              lazy-rules
+              hide-bottom-space
+              :label="`${'ใบกำกับ'}`"
+              emit-value
+              map-options
+              use-input
+              option-label="name"
+              :options="filterInvoice"
+              option-value="id"
+              :readonly="false"
+              :borderless="false"
+              style="width: 250px"
+              @update:model-value="
+                DataStore.searchData(
+                  DataStore.invoiceType,
+                  DataStore.employeeClass
+                )
+              "
+              @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'filterInvoice'
+                      ) "
+            >
+              <template v-if="DataStore.invoiceType !== 'all'" v-slot:append>
+                <q-icon
+                  name="cancel"
+                  @click.stop.prevent="
+                    clearInsigniaFilters('filterInvoice'),
+                      DataStore.searchData(
+                        DataStore.invoiceType,
+                        DataStore.employeeClass
+                      )
+                  "
+                  class="cursor-pointer"
+                />
+              </template>
+              <template v-slot:no-option>
+                <q-item>
+                  <q-item-section class="text-grey">
+                    ไม่มีข้อมูล
+                  </q-item-section>
+                </q-item>
+              </template>
+            </q-select>
+            <q-select
+              v-model="DataStore.employeeClass"
+              dense
+              outlined
+              lazy-rules
+              hide-bottom-space
+              :label="`${'สถานภาพ'}`"
+              emit-value
+              map-options
+              use-input
+              option-label="name"
+              :options="filterEmployee"
+              option-value="id"
+              :readonly="false"
+              :borderless="false"
+              style="width: 280px"
+              @update:model-value="
+                DataStore.searchData(
+                  DataStore.invoiceType,
+                  DataStore.employeeClass
+                )
+              "
+              @filter="(inputValue:any,
+                    doneFn:Function) => filterSelector(inputValue, doneFn,'filterEmployee'
+                    ) "
+            >
+              <template
+                v-if="DataStore.employeeClass !== 'all'"
+                v-slot:append
+              >
+                <q-icon
+                  name="cancel"
+                  @click.stop.prevent="
+                    clearInsigniaFilters('filterEmployee'),
+                      DataStore.searchData(
+                        DataStore.invoiceType,
+                        DataStore.employeeClass
+                      )
+                  "
+                  class="cursor-pointer"
+                />
+              </template>
+              <template v-slot:no-option>
+              <q-item>
+                <q-item-section class="text-grey">
+                  ไม่มีข้อมูล
+                </q-item-section>
+              </q-item>
+            </template>
+            </q-select>
+            <div>
+              <q-btn
+                @click="addData()"
+                size="12px"
+                flat
+                round
+                color="add"
+                icon="mdi-plus"
+              >
+                <q-tooltip>เพิ่ม</q-tooltip>
+              </q-btn>
+            </div>
           </div>
           <d-table
             :rows="DataStore.rows"
diff --git a/src/modules/11_discipline/components/1_Complaint/AddComplaintPage.vue b/src/modules/11_discipline/components/1_Complaint/AddComplaintPage.vue
index 35aa831be..bff1077ad 100644
--- a/src/modules/11_discipline/components/1_Complaint/AddComplaintPage.vue
+++ b/src/modules/11_discipline/components/1_Complaint/AddComplaintPage.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
 import { useRoute, useRouter } from "vue-router";
 
 import type { DataOption } from "../../interface/index/Main";
@@ -9,33 +10,64 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useComplainstDataStore } from "../../stroes/ComplaintsStore";
 
 const route = useRoute();
+const $q = useQuasar();
 const router = useRouter();
 const mixin = useCounterMixin();
-const { date2Thai } = mixin;
+const { date2Thai, dialogConfirm } = mixin;
 
 const complainstStore = useComplainstDataStore();
-const { selectComplainantTpye } = complainstStore;
+const { selectComplainantTpye, filterSelector, fectOptioin } = complainstStore;
 
-const complainantType = ref<string>("");
 const complainantoptions = ref<DataOption[]>([
   { id: "0", name: "บุคคล" },
   { id: "1", name: "หน่ายงาน" },
   { id: "2", name: "กรุงเทพหมานคร" },
 ]);
-const complainant = ref<string>("");
-const office = ref<string>("");
-const agency = ref<string>("");
 const agencytoptions = ref<DataOption[]>([
   { id: "0", name: "หน่ายงานเอ" },
   { id: "1", name: "หน่ายงานบี" },
   { id: "2", name: "หน่ายงานชี" },
 ]);
+const offenseDescriptiontoptions = ref<DataOption[]>([
+  { id: "0", name: "ยังไม่ระบุ" },
+  { id: "1", name: "ไม่ร้ายแรง" },
+  { id: "2", name: "ร้ายแรง" },
+]);
+const considerationLeveltoptions = ref<DataOption[]>([
+  { id: "0", name: "ปกติ" },
+  { id: "1", name: "ด่วน" },
+  { id: "2", name: "ด่วนมาก" },
+]);
+const receivecomplaintstoptions = ref<DataOption[]>([
+  { id: "0", name: "สตง" },
+  { id: "1", name: "ปปช" },
+  { id: "2", name: "ปปท" },
+  { id: "3", name: "จดหมาย" },
+  { id: "4", name: "อีเมล" },
+  { id: "5", name: "โทรศัพท์" },
+  { id: "6", name: "บอกกล่าว" },
+]);
+// ข้อมูล form
+const complainantType = ref<string>("");
+const complainant = ref<string>(""); //  รายชื่อจากทะเบียน
+const office = ref<string>(""); // สำนักงาน
+const agency = ref<string>("");
 const topicComplaint = ref<string>("");
 const detail = ref<string>("");
 const datereceive = ref<Date>();
+const dateconsideration = ref<Date>();
+const offenseDescription = ref<string>("");
+const considerationLevel = ref<string>("");
+const datewarn = ref<Date>();
+const receivecomplaints = ref<string>("");
+const petitioner = ref<string>("");
 const files = ref<any>();
 const fileDocDataUpload = ref<File[]>([]);
 
+onMounted(() => {
+  fectOptioin(complainantoptions.value, agencytoptions.value);
+});
+
 async function selectComplainant(val: string) {
   complainant.value = "";
   office.value = "";
@@ -85,6 +117,15 @@ const fileUploadDoc = async (files: any) => {
     fileDocDataUpload.value.push(file);
   });
 };
+
+function onSubmit() {
+  dialogConfirm(
+    $q,
+    async () => {},
+    "ยืนยันการบันทึกข้อมูล",
+    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
+  );
+}
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
@@ -102,282 +143,307 @@ const fileUploadDoc = async (files: any) => {
   </div>
   <div class="col-12 q-mt-sm">
     <q-card flat bordered>
-      <div class="col-12 row q-pa-md">
-        <div
-          class="col-xs-12 col-sm-12 row q-col-gutter-x-md q-col-gutter-y-xs"
-        >
-          <div class="col-xs-12 col-sm-2">
-            <q-select
-              dense
-              outlined
-              v-model="complainantType"
-              :options="complainantoptions"
-              label="ผู้ร้องเรียน"
-              option-value="id"
-              option-label="name"
-              emit-value
-              map-options
-              :rules="[(val) => !!val || `${'กรุณาเลือกผู้ร้องเรียน'}`]"
-              lazy-rules
-              @update:model-value="selectComplainant(complainantType)"
-            />
-          </div>
-          <div class="col-xs-12 col-sm-2" v-if="complainantType === '0'">
-            <q-select
-              dense
-              outlined
-              v-model="complainant"
-              :options="complainstStore.optionListName"
-              label="ราชชื่อจากทะเบียรประวัติ"
-              option-value="id"
-              option-label="name"
-              emit-value
-              map-options
-            />
-          </div>
-          <div class="col-xs-12 col-sm-2" v-if="complainantType === '1'">
-            <q-input dense outlined v-model="office" label="เลือกสำนักงาน" />
-          </div>
-          <div class="col-xs-12 col-sm-2">
-            <q-select
-              dense
-              outlined
-              v-model="agency"
-              :options="agencytoptions"
-              label="หน่วยงานที่พิจารณา"
-              option-value="id"
-              option-label="name"
-              emit-value
-              map-options
-              :rules="[(val) => !!val || `${'กรุณาเลือกหน่วยงาน'}`]"
-              lazy-rules
-            />
-          </div>
-          <div class="col-xs-12 col-sm-12">
-            <q-input
-              dense
-              outlined
-              v-model="topicComplaint"
-              :rules="[(val) => !!val || 'กรุณาการข้อมูล']"
-              lazy-rules
-              label="เรื่องร้องเรียน"
-              type="textarea"
-              rows="5"
-            />
-          </div>
-          <div class="col-xs-12 col-sm-12">
-            <q-input
-              dense
-              outlined
-              v-model="detail"
-              :rules="[(val) => !!val || 'กรุณาการข้อมูล']"
-              lazy-rules
-              label="รายละเอียดที่เกี่นวข้องกับเรื่องที่ต้องการจะข้อเรียน"
-              type="textarea"
-              rows="5"
-            />
-          </div>
-          <div class="col-xs-12 col-sm-2">
-            <datepicker
-              menu-class-name="modalfix"
-              v-model="datereceive"
-              :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="full-width datepicker"
-                  :model-value="
-                    datereceive != null ? date2Thai(datereceive) : 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-2">
-            <datepicker
-              menu-class-name="modalfix"
-              v-model="datereceive"
-              :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="full-width datepicker"
-                  :model-value="
-                    datereceive != null ? date2Thai(datereceive) : 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-2">
-            <q-select
-              dense
-              outlined
-              v-model="complainantType"
-              :options="complainantoptions"
-              label="ลักษณะความผิด"
-              option-value="id"
-              option-label="name"
-              emit-value
-              map-options
-            />
-          </div>
-          <div class="col-xs-12 col-sm-2">
-            <q-select
-              dense
-              outlined
-              v-model="complainantType"
-              :options="complainantoptions"
-              label="ระดับการพิจารณา"
-              option-value="id"
-              option-label="name"
-              emit-value
-              map-options
-            />
-          </div>
-          <div class="col-xs-12 col-sm-3"></div>
-          <div class="col-xs-12 col-sm-2">
-            <datepicker
-              menu-class-name="modalfix"
-              v-model="datereceive"
-              :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="full-width datepicker"
-                  :model-value="
-                    datereceive != null ? date2Thai(datereceive) : 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-2">
-            <q-select
-              dense
-              outlined
-              v-model="complainantType"
-              :options="complainantoptions"
-              label="รับเรื่องร้องเรียน"
-              option-value="id"
-              option-label="name"
-              emit-value
-              map-options
-            />
-          </div>
-          <div class="col-xs-12 col-sm-6"></div>
-          <div class="col-xs-12 col-sm-4">
-            <q-input
-              dense
-              outlined
-              v-model="office"
-              label="ผู้ร้องเรียน"
-              :rules="[(val) => !!val || `${'กรุณากรอกข้อมูล'}`]"
-              lazy-rules
-            />
-          </div>
-          <div class="col-xs-12 col-sm-4">
-            <q-file
-              class="col-xs-12 col-sm-10"
-              outlined
-              dense
-              v-model="files"
-              @added="fileUploadDoc"
-              label="ไฟล์เอกสารหลักฐาน"
-              hide-bottom-space
-              lazy-rules
-              accept=".pdf,.xlsx,.doc"
-            >
-              <template v-slot:prepend>
-                <q-icon name="attach_file" />
-              </template>
-            </q-file>
+      <q-form @submit.prevent="onSubmit">
+        <div class="col-12 row q-pa-md">
+          <div
+            class="col-xs-12 col-sm-12 row q-col-gutter-x-md q-col-gutter-y-xs"
+          >
+            <div class="col-xs-12 col-sm-2">
+              <q-select
+                dense
+                outlined
+                v-model="complainantType"
+                :options="complainstStore.complainantoptions"
+                label="ผู้ร้องเรียน"
+                option-value="id"
+                option-label="name"
+                emit-value
+                map-options
+                :rules="[(val) => !!val || `${'กรุณาเลือกผู้ร้องเรียน'}`]"
+                lazy-rules
+                @update:model-value="selectComplainant(complainantType)"
+                use-input
+                @filter="(inputValue: any,
+                doneFn: Function) => filterSelector(inputValue, doneFn, 'filtercomplainantType'
+                )"
+              />
+            </div>
+            <div class="col-xs-12 col-sm-2" v-if="complainantType === '0'">
+              <q-select
+                dense
+                outlined
+                v-model="complainant"
+                :options="complainstStore.optionListName"
+                label="ราชชื่อจากทะเบียรประวัติ"
+                option-value="id"
+                option-label="name"
+                emit-value
+                map-options
+              />
+            </div>
+            <div class="col-xs-12 col-sm-2" v-if="complainantType === '1'">
+              <q-input dense outlined v-model="office" label="เลือกสำนักงาน" />
+            </div>
+            <div class="col-xs-12 col-sm-2">
+              <q-select
+                dense
+                outlined
+                v-model="agency"
+                :options="complainstStore.agencytoptions"
+                label="หน่วยงานที่พิจารณา"
+                option-value="id"
+                option-label="name"
+                emit-value
+                map-options
+                :rules="[(val) => !!val || `${'กรุณาเลือกหน่วยงาน'}`]"
+                lazy-rules
+                use-input
+                @filter="(inputValue: any,
+                doneFn: Function) => filterSelector(inputValue, doneFn, 'filteragencytoptions'
+                )"
+              />
+            </div>
+            <div class="col-xs-12 col-sm-12">
+              <q-input
+                dense
+                outlined
+                v-model="topicComplaint"
+                :rules="[(val) => !!val || 'กรุณาการข้อมูล']"
+                lazy-rules
+                label="เรื่องร้องเรียน"
+                type="textarea"
+                rows="5"
+              />
+            </div>
+            <div class="col-xs-12 col-sm-12">
+              <q-input
+                dense
+                outlined
+                v-model="detail"
+                :rules="[(val) => !!val || 'กรุณาการข้อมูล']"
+                lazy-rules
+                label="รายละเอียดที่เกี่นวข้องกับเรื่องที่ต้องการจะข้อเรียน"
+                type="textarea"
+                rows="5"
+              />
+            </div>
+            <div class="col-xs-12 col-sm-2">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="datereceive"
+                :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="full-width datepicker"
+                    :model-value="
+                      datereceive != null ? date2Thai(datereceive) : 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-2">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="dateconsideration"
+                :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="full-width datepicker"
+                    :model-value="
+                      dateconsideration != null
+                        ? date2Thai(dateconsideration)
+                        : 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-2">
+              <q-select
+                dense
+                outlined
+                v-model="offenseDescription"
+                :options="offenseDescriptiontoptions"
+                label="ลักษณะความผิด"
+                option-value="id"
+                option-label="name"
+                emit-value
+                map-options
+                :rules="[(val) => !!val || `${'กรุณาเลือกลักษณะความผิด'}`]"
+                lazy-rules
+              />
+            </div>
+            <div class="col-xs-12 col-sm-2">
+              <q-select
+                dense
+                outlined
+                v-model="considerationLevel"
+                :options="considerationLeveltoptions"
+                label="ระดับการพิจารณา"
+                option-value="id"
+                option-label="name"
+                emit-value
+                map-options
+                :rules="[(val) => !!val || `${'กรุณาเลือกระดับการพิจารณา'}`]"
+                lazy-rules
+              />
+            </div>
+            <div class="col-xs-12 col-sm-3"></div>
+            <div class="col-xs-12 col-sm-2">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="datewarn"
+                :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="full-width datepicker"
+                    :model-value="datewarn != null ? date2Thai(datewarn) : 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-2">
+              <q-select
+                dense
+                outlined
+                v-model="receivecomplaints"
+                :options="receivecomplaintstoptions"
+                label="รับเรื่องร้องเรียน"
+                option-value="id"
+                option-label="name"
+                emit-value
+                map-options
+                :rules="[(val) => !!val || `${'กรุณาเลือกรับเรื่องร้องเรียน'}`]"
+                lazy-rules
+              />
+            </div>
+            <div class="col-xs-12 col-sm-6"></div>
+            <div class="col-xs-12 col-sm-4">
+              <q-input
+                dense
+                outlined
+                v-model="petitioner"
+                label="ผู้ร้องเรียน"
+                :rules="[(val) => !!val || `${'กรุณากรอกข้อมูล'}`]"
+                lazy-rules
+              />
+            </div>
+            <div class="col-xs-12 col-sm-4">
+              <q-file
+                class="col-xs-12 col-sm-10"
+                outlined
+                dense
+                v-model="files"
+                @added="fileUploadDoc"
+                label="ไฟล์เอกสารหลักฐาน"
+                hide-bottom-space
+                lazy-rules
+                accept=".pdf,.xlsx,.doc"
+                clearable
+              >
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" />
+                </template>
+              </q-file>
+            </div>
           </div>
         </div>
-      </div>
-      <q-separator />
-      <div class="row col-12 q-pa-sm">
-        <q-space />
-        <q-btn flat round color="secondary" icon="mdi-content-save-outline"
-          ><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn
-        >
-      </div>
+        <q-separator />
+        <div class="row col-12 q-pa-sm">
+          <q-space />
+          <q-btn
+            flat
+            round
+            color="secondary"
+            icon="mdi-content-save-outline"
+            type="submit"
+            ><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn
+          >
+        </div>
+      </q-form>
     </q-card>
   </div>
 </template>
diff --git a/src/modules/11_discipline/components/1_Complaint/MainPage.vue b/src/modules/11_discipline/components/1_Complaint/MainPage.vue
index 209bdcb7d..c1d165519 100644
--- a/src/modules/11_discipline/components/1_Complaint/MainPage.vue
+++ b/src/modules/11_discipline/components/1_Complaint/MainPage.vue
@@ -162,7 +162,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
             color="primary"
             icon="mdi-plus"
             @click="redirectToPageadd()"
-            ><q-tooltip>เพิ่ม</q-tooltip></q-btn
+            ><q-tooltip>เพิ่มเรื่องร้องเรียน </q-tooltip></q-btn
           >
           <q-space />
           <div class="col-2">
diff --git a/src/modules/11_discipline/components/2_InvestigateFacts/investigatefactsAdd.vue b/src/modules/11_discipline/components/2_InvestigateFacts/investigatefactsAdd.vue
index 87904f1b2..0fabed5b6 100644
--- a/src/modules/11_discipline/components/2_InvestigateFacts/investigatefactsAdd.vue
+++ b/src/modules/11_discipline/components/2_InvestigateFacts/investigatefactsAdd.vue
@@ -16,6 +16,7 @@ const complaintdetail = ref<string>("");
 const detail = ref<string>("");
 const fault = ref<string>("");
 const results = ref<string>("");
+const other = ref<string>("");
 const evidenceFiles = ref<any>(null);
 const fileComplaint = ref<any>(null);
 const clickTime = ref<boolean>(false);
@@ -23,19 +24,23 @@ const date = ref<Date | null>(null);
 const dateEnd = ref<Date | null>(null);
 const investigation = ref<string>("");
 const faultOps = ref<any>([
-  { id: "000-000", value: "test1" },
-  { id: "000-001", value: "test2" },
+  { id: "001", value: "ยังไม่ระบุ" },
+  { id: "002", value: "ไม่ร้ายเเรง" },
+  { id: "003", value: "ร้ายเเรง" },
 ]);
 const faultOp = ref<any>();
 const investigationOps = ref<any>([
-  { id: "000-000", value: "test1" },
-  { id: "000-001", value: "test2" },
+  { id: "001", value: "เเต่งตั้งการสืบสวน" },
+  { id: "002", value: "สืบสวนทางลับ" },
+  { id: "003", value: "อื่นๆ" },
 ]);
 const daysExtend = ref<string>("");
 const daysExtendOp = ref<any>();
 const daysExtendOps = ref<any>([
-  { id: "000-000", value: "test1" },
-  { id: "000-001", value: "test2" },
+  { id: "000", value: "15 วัน" },
+  { id: "001", value: "30 วัน" },
+  { id: "002", value: "45 วัน" },
+  { id: "003", value: "60 วัน" },
 ]);
 const investigationOp = ref<any>();
 
@@ -92,54 +97,69 @@ function filterFnOptionsType(val: string, update: any, type: string) {
                   type="textarea"
                 />
               </div>
-              <div class="col-4 q-my-md q-mr-xs">
-                <q-select
-                  outlined
-                  dense
-                  v-model="fault"
-                  :options="faultOp"
-                  label="ลักษณะความผิด"
-                  emit-value
-                  map-options
-                  option-label="value"
-                  option-value="id"
-                  use-input
-                  @filter="(inputValue: any,
+              <div class="row no-wrap col-12">
+                <div class="col-4 q-my-md q-mr-xs">
+                  <q-select
+                    outlined
+                    dense
+                    v-model="fault"
+                    :options="faultOp"
+                    label="ลักษณะความผิด"
+                    emit-value
+                    map-options
+                    option-label="value"
+                    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 class="col-4 q-my-md q-ml-xs">
-                <q-select
-                  outlined
-                  dense
-                  v-model="investigation"
-                  :options="investigationOp"
-                  label="ลักษณะการสืบสวน"
-                  emit-value
-                  map-options
-                  option-label="value"
-                  option-value="id"
-                  use-input
-                  @filter="(inputValue: any,
+                    ><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-4 q-my-md q-mr-xs">
+                  <q-select
+                    outlined
+                    dense
+                    v-model="investigation"
+                    :options="investigationOp"
+                    label="ลักษณะการสืบสวน"
+                    emit-value
+                    map-options
+                    option-label="value"
+                    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>
+                    ><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="investigation === '003'" class="col-12 q-mb-md">
+                <q-input
+                  class="full-width inputgreen cursor-pointer"
+                  outlined
+                  dense
+                  borderless
+                  v-model="other"
+                  hide-bottom-space
+                  :label="`${'รายการอื่นๆ(โปรดระบุ)'}`"
+                  type="textarea"
+                />
+              </div>
+
               <div class="row items-start col-12">
                 <p
                   class="text-weight-medium q-ma-none text-center align-top q-pt-sm"
@@ -347,11 +367,11 @@ function filterFnOptionsType(val: string, update: any, type: string) {
       </q-form>
     </div>
     <q-separator />
-      <div class="row col-12 q-pa-sm">
-        <q-space />
-        <q-btn flat round color="secondary" icon="mdi-content-save-outline"
-          ><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn
-        >
-      </div>
+    <div class="row col-12 q-pa-sm">
+      <q-space />
+      <q-btn flat round color="secondary" icon="mdi-content-save-outline"
+        ><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn
+      >
+    </div>
   </q-card>
 </template>
diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Dialogbody.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Dialogbody.vue
new file mode 100644
index 000000000..20b02789c
--- /dev/null
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Dialogbody.vue
@@ -0,0 +1,268 @@
+<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 { ResponseData } from "@/modules/05_placement/interface/response/Transfer";
+
+import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const $q = useQuasar();
+const selected = ref<ResponseData[]>([]);
+const mixin = useCounterMixin();
+const { showLoader, success, messageError, dialogConfirm, hideLoader } = mixin;
+
+//ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+const visibleColumns2 = ref<string[]>([
+  "no",
+  "fullname",
+  "position",
+  "duty",
+  "email",
+  "telephone",
+]);
+const columns2 = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "fullname",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "fullname",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "duty",
+    align: "left",
+    label: "หน้าที่",
+    sortable: true,
+    field: "duty",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "email",
+    align: "left",
+    label: "อีเมล",
+    sortable: true,
+    field: "email",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "telephone",
+    align: "left",
+    label: "เบอร์โทรศัพท์",
+    sortable: true,
+    field: "telephone",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+const props = defineProps({
+  Modal: Boolean,
+  clickClose: Function,
+  getData: Function,
+  rows2: Array,
+  filterKeyword2: String,
+});
+
+const checkSelected = computed(() => {
+  if (selected.value.length === 0) {
+    return true;
+  }
+});
+
+//popup ยืนยันส่งัว
+const saveDirector = () => {
+  dialogConfirm(
+    $q,
+    () => Ordersave(),
+    "ยืนยันเพิ่มรายชื่อกรรมการ",
+    "ต้องการยืนยันเพิ่มรายชื่อกรรมการ?"
+  );
+};
+//ส่งไปออกคำสั่ง
+const Ordersave = async () => {
+  //   const id = selected.value.map((r) => r.id);
+  //   const body = {
+  //     id,
+  //   };
+  //   showLoader();
+  //   await http
+  //     .post(config.API.transferReport, 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 title="เลือกรายชื่อกรรมการ" :close="clickClose" />
+      <q-separator />
+      <q-card-section class="q-pt-none">
+        <div class="row justify-end">
+          <div>
+            <q-toolbar style="padding: 0">
+              <q-input
+                borderless
+                outlined
+                dense
+                class="col-12"
+                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="duty" :props="props">
+                {{ props.row.duty }}
+              </q-td>
+              <q-td key="email" :props="props">
+                <div class="table_ellipsis">
+                  {{ props.row.email }}
+                </div>
+              </q-td>
+              <q-td key="telephone" :props="props">
+                <div class="table_ellipsis">
+                  {{ props.row.telephone }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </q-card-section>
+
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn
+          label="เพิ่มรายชื่อกรรมการ"
+          @click="saveDirector"
+          :disable="checkSelected"
+          color="public"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue
index 86b199249..dbf4d12c3 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue
@@ -1,9 +1,259 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import type { QTableProps } from "quasar";
+import { onMounted, ref } from "vue";
+import { useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
+import Table from "@/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useInvestigateDisStore } from "../../stroes/InvestigateDisStore";
+
+import { useRouter } from "vue-router";
+const dataInvestigateDis = useInvestigateDisStore();
+const { fecthList } = dataInvestigateDis;
+const $q = useQuasar(); // show dialog
+const mixin = useCounterMixin();
+const router = useRouter();
+const {
+  date2Thai,
+  success,
+  typeCategoryExam,
+  messageError,
+  showLoader,
+  hideLoader,
+} = mixin;
+const filter = ref<string>(""); //search data table
+const initialPagination = ref<Pagination>({
+  rowsPerPage: 0,
+});
+const visibleColumns = ref<String[]>([
+  "no",
+  "subject",
+  "interrogated",
+  "fault",
+  "penaltyLevel",
+  "caseFault",
+  "dateInvestigate",
+  "status",
+]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "center",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "subject",
+    align: "left",
+    label: "เรื่อง",
+    sortable: true,
+    field: "subject",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "interrogated",
+    align: "left",
+    label: "ผู้ถูกสืบสวน",
+    sortable: true,
+    field: "interrogated",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fault",
+    align: "left",
+    label: "ลักษณะความผิด",
+    sortable: true,
+    field: "fault",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "penaltyLevel",
+    align: "left",
+    label: "ระดับโทษความผิด",
+    sortable: true,
+    field: "penaltyLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "caseFault",
+    align: "left",
+    label: "กรณีความผิด",
+    sortable: true,
+    field: "caseFault",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "dateInvestigate",
+    align: "left",
+    label: "วันที่สอบสวน",
+    sortable: true,
+    field: "dateInvestigate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+onMounted(async () => {
+  await fecthInvestigateDis();
+  await hideLoader();
+});
+
+const clickDelete = (id: string) => {
+  $q.dialog({
+    title: "ยืนยันการลบข้อมูล",
+    message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
+    cancel: {
+      flat: true,
+      color: "negative",
+    },
+    persistent: true,
+  })
+    .onOk(async () => {
+      await deleteData(id);
+    })
+    .onCancel(() => {})
+    .onDismiss(() => {});
+};
+
+function fecthInvestigateDis() {
+  const data = [
+    {
+      subject: "ทุจริตในหน้าที่",
+      interrogated: "ศิรินภา คงน้อยี่",
+      fault: "0",
+      penaltyLevel: "0",
+      caseFault: "test",
+      dateInvestigate: "test",
+      status: "0",
+      active: "1",
+    },
+    {
+      subject: "ทุจริตในหน้าที่",
+      interrogated: "นายนครชัย วันดี",
+      fault: "1",
+      penaltyLevel: "0",
+      caseFault: "test",
+      dateInvestigate: "test",
+      status: "1",
+      active: "1",
+    },
+    {
+      subject: "กระทำทุจริตเงินกองทุน",
+      interrogated: "นายกัณฐิมา  กาฬสินธ์ุ",
+      fault: "1",
+      penaltyLevel: "0",
+      caseFault: "test",
+      dateInvestigate: "test",
+      status: "0",
+      active: "1",
+    },
+    {
+      subject: "พูดจาไม่สุภาพ",
+      interrogated: "นายปิยรมย์ ศิริธาราฟ",
+      fault: "2",
+      penaltyLevel: "0",
+      caseFault: "test",
+      dateInvestigate: "test",
+      status: "0",
+      active: "1",
+    },
+  ];
+  fecthList(data); // ส่งข้อมูลไป stores
+}
+
+const clickAdd = () => {
+  router.push(`/discipline/InvestigateDisciplinary/add`);
+};
+
+const deleteData = async (id: string) => {
+  showLoader();
+  await http
+    .delete(config.API.periodExamId(id))
+    .then((res) => {
+      success($q, "ลบข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+};
+</script>
 
 <template>
-  <div>
-    <h1>สอบสวนความผิดวินัย</h1>
+  <div class="toptitle text-dark col-12 row items-center">
+    รายการการสอบสวนความผิดทางวินัย
   </div>
+  <q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
+    <div>
+      <Table
+        style="max-height: 80vh"
+        :rows="dataInvestigateDis.rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :pagination="initialPagination"
+        :nornmalData="true"
+        :add="clickAdd"
+        :paging="true"
+        :titleText="''"
+      >
+        <template #columns="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td key="no" :props="props">
+              {{ props.rowIndex + 1 }}
+            </q-td>
+            <q-td key="subject" :props="props">
+              {{ props.row.subject }}
+            </q-td>
+            <q-td key="interrogated" :props="props">
+              {{ props.row.interrogated }}
+            </q-td>
+            <q-td key="fault" :props="props">
+              {{ props.row.fault }}
+            </q-td>
+            <q-td key="penaltyLevel" :props="props">
+              {{ props.row.penaltyLevel }}
+            </q-td>
+            <q-td key="caseFault" :props="props">
+              {{ props.row.caseFault }}
+            </q-td>
+            <q-td key="dateInvestigate" :props="props">
+              {{ props.row.dateInvestigate }}
+            </q-td>
+            <q-td key="status" :props="props">
+              {{ props.row.status }}
+            </q-td>
+            <q-td auto-width style="width: 10rem">
+              <q-btn color="primary" class="q-px-xl q-py-xs">ยื่นยันผล</q-btn>
+            </q-td>
+          </q-tr>
+        </template>
+      </Table>
+    </div>
+  </q-card>
 </template>
 
-<style scoped></style>
\ No newline at end of file
+<style></style>
diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue
new file mode 100644
index 000000000..ec5dfc0de
--- /dev/null
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue
@@ -0,0 +1,214 @@
+<template>
+  <div class="q-pb-sm row q-col-gutter-sm">
+    <!--  -->
+    <div class="q-gutter-sm" v-if="nornmalData == true">
+      <q-btn
+        size="12px"
+        flat
+        round
+        color="add"
+        @click="checkAdd"
+        icon="mdi-plus"
+      >
+        <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+      </q-btn>
+    </div>
+    <q-space />
+    <div class="items-center q-gutter-sm" style="display: flex">
+      <!-- ค้นหาข้อความใน table -->
+      <q-input
+        standout
+        dense
+        :model-value="inputfilter"
+        ref="filterRef"
+        @update:model-value="updateInput"
+        outlined
+        debounce="300"
+        placeholder="ค้นหา"
+        style="max-width: 200px"
+      >
+        <template v-slot:append>
+          <q-icon v-if="inputfilter == ''" name="search" />
+          <q-icon
+            v-if="inputfilter !== ''"
+            name="clear"
+            class="cursor-pointer"
+            @click="resetFilter"
+          />
+        </template>
+      </q-input>
+      <!-- แสดงคอลัมน์ใน table -->
+      <q-select
+        :model-value="inputvisible"
+        @update:model-value="updateVisible"
+        :display-value="$q.lang.table.columns"
+        multiple
+        outlined
+        dense
+        :options="attrs.columns"
+        options-dense
+        option-value="name"
+        map-options
+        emit-value
+        style="min-width: 150px"
+        class="gt-xs"
+      >
+        <template> </template>
+      </q-select>
+    </div>
+  </div>
+  <q-table
+    ref="table"
+    flat
+    bordered
+    class="custom-header-table"
+    v-bind="attrs"
+    virtual-scroll
+    :virtual-scroll-sticky-size-start="48"
+    dense
+    :pagination-label="paginationLabel"
+    v-model:pagination="pagination"
+  >
+    <template v-slot:header="props">
+      <q-tr :props="props">
+        <q-th v-for="col in props.cols" :key="col.name" :props="props">
+          <span class="text-weight-medium" v-html="col.label" />
+        </q-th>
+        <q-th auto-width v-if="nornmalData == true" />
+      </q-tr>
+    </template>
+    <template #body="props">
+      <slot v-bind="props" name="columns"></slot>
+    </template>
+    <template v-slot:pagination="scope">
+      <q-pagination
+        v-model="pagination.page"
+        active-color="primary"
+        color="dark"
+        :max="scope.pagesNumber"
+        :max-pages="5"
+        size="sm"
+        boundary-links
+        direction-links
+      ></q-pagination>
+    </template>
+  </q-table>
+</template>
+<script setup lang="ts">
+import { ref, useAttrs } from "vue";
+import type { Pagination } from "@/modules/04_registry/interface/index/Main";
+
+const attrs = ref<any>(useAttrs());
+const paging = ref<boolean>(true);
+const pagination = ref({
+  // sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+const paginationLabel = (start: string, end: string, total: string) => {
+  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
+  else return start + "-" + end + " ใน " + total;
+};
+const table = ref<any>(null);
+const filterRef = ref<any>(null);
+const initialPagination = ref<Pagination>({
+  rowsPerPage: 0,
+});
+
+const props = defineProps({
+  count: Number,
+  pass: Number,
+  notpass: Number,
+
+  inputfilter: String,
+  name: String,
+  icon: String,
+  inputvisible: Array,
+  editvisible: Boolean,
+  add: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  validate: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  nornmalData: {
+    type: Boolean,
+    defualt: true,
+  },
+  conclude: {
+    type: Boolean,
+    defualt: false,
+  },
+});
+
+const emit = defineEmits([
+  "update:inputfilter",
+  "update:inputvisible",
+  "update:editvisible",
+]);
+const updateInput = (value: string | number | null) => {
+  emit("update:inputfilter", value);
+};
+const updateVisible = (value: []) => {
+  emit("update:inputvisible", value);
+};
+
+const checkAdd = () => {
+  props.add();
+};
+
+const resetFilter = () => {
+  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
+  emit("update:inputfilter", "");
+  filterRef.value.focus();
+};
+</script>
+<style lang="scss">
+.icon-color {
+  color: #4154b3;
+}
+
+.custom-table2 {
+  max-height: 64vh;
+
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+  }
+
+  .q-table td:nth-of-type(2) {
+    z-index: 3 !important;
+  }
+
+  .q-table th:nth-of-type(2),
+  .q-table td:nth-of-type(2) {
+    position: sticky;
+    left: 0;
+    z-index: 1;
+  }
+
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>
diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/addInvestigate.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/addInvestigate.vue
new file mode 100644
index 000000000..8a3fa7802
--- /dev/null
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/addInvestigate.vue
@@ -0,0 +1,701 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useQuasar, QForm } from "quasar";
+import { useRouter, useRoute } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import type { QTableProps } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import Dialogbody from "@/modules/11_discipline/components/3_InvestigateDisciplinary/Dialogbody.vue";
+import Table from "@/modules/11_discipline/components/3_InvestigateDisciplinary/director.vue";
+
+const visibleColumns = ref<String[]>([
+  "no",
+  "subject",
+  "beingInvestigated",
+  "fault",
+  "penaltyLevel",
+  "caseFault",
+]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "subject",
+    align: "left",
+    label: "ชื่อ - นามสกุล",
+    sortable: true,
+    field: "subject",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "beingInvestigated",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "beingInvestigated",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fault",
+    align: "left",
+    label: "หน้าที่",
+    sortable: true,
+    field: "fault",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "penaltyLevel",
+    align: "left",
+    label: "อีเมล",
+    sortable: true,
+    field: "penaltyLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "caseFault",
+    align: "left",
+    label: "เบอร์โทรศัพท์",
+    sortable: true,
+    field: "caseFault",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+const clickAdd = () => {
+  console.log("clickadd");
+};
+
+const popup = () => {
+  modal.value = true;
+  filterKeyword2.value = "";
+};
+
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  dateToISO,
+  messageError,
+  showLoader,
+  hideLoader,
+  dialogConfirm,
+  success,
+  dialogMessageNotify,
+} = mixin;
+
+const initialPagination = ref<any>({
+  rowsPerPage: 0,
+});
+const router = useRouter();
+const route = useRoute();
+const rows = ref<any[]>([]);
+const modal = ref<boolean>(false);
+const $q = useQuasar();
+const id = ref<string>(route.params.id as string);
+const myForm = ref<QForm | null>(null); //form data input
+const edit = ref<boolean>(false);
+const dateInvestigate = ref<Date>(new Date());
+const dateAllegation = ref<Date>(new Date());
+const dateEvident = ref<Date>(new Date());
+const filterKeyword2 = ref<string>("");
+const typefault = ref<string>("");
+const faultLevel = ref<string>("");
+const type = ref<string>("");
+const rows2 = ref<any[]>([]);
+const Complaint = ref<string>("");
+const trueDetail = ref<string>("");
+const evidence = ref<string>("");
+const recordAccuser = ref<string>("");
+const witnesses = ref<string>("");
+const InvestResults = ref<string>("");
+const files = ref<any>();
+const filesEvidence = ref<any>();
+const filesRecordAccuser = ref<any>();
+const filesWitnesses = ref<any>();
+const filesEtc = ref<any>();
+const fileDocDataUpload = ref<File[]>([]);
+const refRaw = ref<string>("");
+const casefault = ref<string>("");
+const whereInvestigate = ref<string>("");
+const optionsTypefault = ref([
+  { label: "ไม่ระบุ", value: 1 },
+  { label: "ร้ายแรง ", value: 2 },
+  { label: "ไม่ร้ายแรง", value: 3 },
+]);
+const optionsfaultLevel = ref([
+  { label: "ไม่ร้ายแรง", value: 1 },
+  { label: "ภาคทัณฑ์ ", value: 2 },
+  { label: "ตัดเงินเดือน", value: 3 },
+  { label: "ลดขั้นเงินเดือน", value: 4 },
+  { label: "ร้ายแรง", value: 5 },
+  { label: "ปลดออก", value: 6 },
+  { label: "ไล่ออก", value: 7 },
+]);
+
+const routeName = router.currentRoute.value.name;
+
+const clickClose = () => {
+  modal.value = false;
+};
+
+onMounted(async () => {
+  //   if (route.params.id) {
+  //     // มี params id ให้ เรียกข้อมูลของรอบการเสนอขอ
+  //     await fetchData();
+  //   }
+});
+// เรียกข้อมูลของรอบการเสนอขอ
+const fetchData = async () => {
+  //   edit.value = true;
+  //   showLoader();
+  //   await http
+  //     .get(config.API.getRoundInsignia(id.value))
+  //     .then((res) => {
+  //       const data = res.data.result;
+  //       id.value = data.period_id;
+  //       roundInsig.value =
+  //         options.value.filter((r: any) => r.value == data.period_round).length >
+  //         0
+  //           ? options.value.filter((r: any) => r.value == data.period_round)[0]
+  //           : null;
+  //       yearly.value = data.period_year;
+  //       datelast.value = data.period_amount;
+  //       dateInvestigate.value = new Date(data.period_start);
+  //       dateAllegation.value = new Date(data.period_end);
+  //       files.value = data.period_doc;
+  //     })
+  //     .catch((e) => {
+  //       messageError($q, e);
+  //     })
+  //     .finally(() => {
+  //       hideLoader();
+  //     });
+};
+
+const deleteData = async (id: string) => {
+  //   showLoader();
+  //   await http
+  //     .delete(config.API.periodExamId(id))
+  //     .then((res) => {
+  //       success($q, "ลบข้อมูลสำเร็จ");
+  //     })
+  //     .catch((e) => {
+  //       messageError($q, e);
+  //     })
+  //     .finally(async () => {
+  //       hideLoader();
+  //     });
+};
+
+const filter = ref<string>(""); //search data table
+
+const fileUploadDoc = async (files: any) => {
+  files.forEach((file: any) => {
+    fileDocDataUpload.value.push(file);
+  });
+};
+
+// แก้ไขข้อมูล
+
+// คลิกบันทึก
+const checkSave = () => {
+  //   if (myForm.value !== null) {
+  //     myForm.value.validate().then(async (success) => {
+  //       if (success) {
+  //         dialogConfirm($q, () => SaveData());
+  //       } else if (Number(datelast.value) !== 0) {
+  //         dialogMessageNotify($q, "กรุณาเลือกรอบการเสนอขอพระราชทานเครื่องราชฯ");
+  //       }
+  //     });
+  //   }
+};
+// บันทึกข้อมูล
+const SaveData = async () => {
+  //   if (edit.value) {
+  //     await editData(id.value);
+  //   } else {
+  //     await addData();
+  //     clickBack();
+  //   }
+};
+// เพิ่มข้อมูลรอบการเสนอขอพระราชทานเครื่องราชฯ
+const addData = async () => {
+  //   const formData = new FormData();
+  //   const name = `รอบการเสนอขอพระราชทานเครื่องราชรอบที่ ${
+  //     roundInsig.value.value
+  //   }  ปี ${yearly.value + 543} `;
+  //   formData.append("name", name);
+  //   formData.append("year", yearly.value.toString());
+  //   formData.append("amount", datelast.value.toString());
+  //   formData.append("round", roundInsig.value.value);
+  //   if (dateInvestigate.value !== null) {
+  //     formData.append("startDate", dateToISO(dateInvestigate.value));
+  //   }
+  //   if (dateAllegation.value !== null) {
+  //     formData.append("endDate", dateToISO(dateAllegation.value));
+  //   }
+  //   formData.append("file", files.value);
+  //   showLoader();
+  //   await http
+  //     .post(config.API.listRoundInsignia(), formData)
+  //     .then(() => {
+  //       success($q, "บันทึกข้อมูลสำเร็จ");
+  //     })
+  //     .catch((e) => {
+  //       messageError($q, e);
+  //     })
+  //     .finally(async () => {
+  //       hideLoader();
+  //     });
+};
+// แก้ไขข้อมูล
+const editData = async (id: string) => {
+  //   const formData = new FormData();
+  //   const name = `รอบการเสนอขอพระราชทานเครื่องราชรอบที่ ${
+  //     roundInsig.value.value
+  //   } ปี ${yearly.value + 543}`;
+  //   formData.append("name", name);
+  //   formData.append("year", yearly.value.toString());
+  //   formData.append("amount", datelast.value.toString());
+  //   formData.append("round", roundInsig.value.value);
+  //   if (dateInvestigate.value !== null) {
+  //     formData.append("startDate", dateToISO(dateInvestigate.value));
+  //   }
+  //   if (dateAllegation.value !== null) {
+  //     formData.append("endDate", dateToISO(dateAllegation.value));
+  //   }
+  //   formData.append("file", files.value);
+  //   showLoader();
+  //   await http
+  //     .put(config.API.editRoundInsignia(id), formData)
+  //     .then(() => {
+  //       success($q, "แก้ไขข้อมูลสำเร็จ");
+  //     })
+  //     .catch((e) => {
+  //       messageError($q, e);
+  //     })
+  //     .finally(async () => {
+  //       hideLoader();
+  //       clickBack();
+  //     });
+};
+
+const clickBack = () => {
+  router.push(`/discipline/disciplinary`);
+};
+</script>
+<template>
+  <div class="col-xs-12 col-sm-12 col-md-11">
+    <div class="toptitle col-12 row items-center">
+      <q-btn
+        icon="mdi-arrow-left"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="clickBack"
+      />
+      {{ edit ? "การสอบสวนความผิดทางวินัย" : "เพิ่มการสอบสวนความผิดทางวินัย" }}
+    </div>
+    <q-form ref="myForm">
+      <div class="col-12">
+        <q-card bordered>
+          <div class="col-12 row q-col-gutter-md q-pa-md">
+            <div class="col-xs-12 col-sm-12 row">
+              <q-separator />
+              <div class="col-12 row q-pa-sm q-col-gutter-sm">
+                <q-input
+                  class="col-12"
+                  dense
+                  outlined
+                  v-model="Complaint"
+                  label="เรื่องร้องเรียน"
+                  type="textarea"
+                  :rules="[(val:string) => !!val || `${'กรุณากรอกเรื่องร้องเรียน'}`]"
+                />
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="dateInvestigate"
+                  :locale="'th'"
+                  autoApply
+                  class="col-xs-12 col-sm-4"
+                  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="full-width datepicker"
+                      :model-value="
+                        dateInvestigate != null
+                          ? date2Thai(dateInvestigate)
+                          : null
+                      "
+                      :label="`${'วันที่สอบสวน'}`"
+                      :rules="[(val) => !!val || `${'กรุณาเลือกวันที่สอบสวน'}`]"
+                    >
+                      <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"
+                  v-model="dateAllegation"
+                  class="col-xs-12 col-sm-4"
+                  :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"
+                      :model-value="
+                        dateAllegation != null
+                          ? date2Thai(dateAllegation)
+                          : null
+                      "
+                      :label="`${'วันที่รับทราบข้อกล่าวหา'}`"
+                      :rules="[
+                        (val) =>
+                          !!val || `${'กรุณาเลือกวันที่รับทราบข้อกล่าวหา'}`,
+                      ]"
+                    >
+                      <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"
+                  v-model="dateEvident"
+                  :locale="'th'"
+                  autoApply
+                  class="col-xs-12 col-sm-4"
+                  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="full-width datepicker"
+                      :model-value="
+                        dateEvident != null ? date2Thai(dateEvident) : null
+                      "
+                      :label="`${'วันที่สรุปพยานหลักฐาน'}`"
+                      :rules="[
+                        (val) =>
+                          !!val || `${'กรุณาเลือกวันที่สรุปพยานหลักฐาน'}`,
+                      ]"
+                    >
+                      <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="col-xs-12 col-sm-12 text-bold">
+                  กรรมการ
+                  <q-btn
+                    size="12px"
+                    flat
+                    round
+                    color="add"
+                    @click="popup()"
+                    icon="mdi-plus"
+                  >
+                    <q-tooltip>เพิ่มกรรมการ</q-tooltip>
+                  </q-btn>
+                </div>
+                <div class="col-xs-12 col-sm-12 q-pb-md">
+                  <Table
+                    style="max-height: 80vh"
+                    :rows="rows"
+                    :columns="columns"
+                    :filter="filter"
+                    :visible-columns="visibleColumns"
+                    v-model:inputfilter="filter"
+                    v-model:inputvisible="visibleColumns"
+                    :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-input
+                  class="col-xs-12 col-sm-6"
+                  dense
+                  outlined
+                  v-model="casefault"
+                  label="กรณีมีความผิด"
+                  :rules="[(val) => !!val || `${'กรุณากรอกกรณีมีความผิด'}`]"
+                  lazy-rules
+                />
+                <q-input
+                  class="col-xs-12 col-sm-6"
+                  dense
+                  outlined
+                  v-model="whereInvestigate"
+                  label="สอบสวนที่"
+                  :rules="[(val) => !!val || `${'กรุณากรอกสอบสวนที่'}`]"
+                  lazy-rules
+                />
+                <q-select
+                  dense
+                  class="col-xs-12 col-sm-3"
+                  outlined
+                  v-model="typefault"
+                  :options="optionsTypefault"
+                  label="ลักษณะความผิด"
+                />
+                <q-select
+                  dense
+                  class="col-xs-12 col-sm-3"
+                  outlined
+                  v-model="faultLevel"
+                  :options="optionsfaultLevel"
+                  label="ระดับโทษความผิด"
+                />
+                <q-input
+                  class="col-xs-12 col-sm-6 q-pb-md"
+                  dense
+                  outlined
+                  v-model="refRaw"
+                  label="อ้างอิงมาตราตามกฎหมาย"
+                  :rules="[
+                    (val) => !!val || `${'กรุณากรอกอ้างอิงมาตราตามกฎหมาย'}`,
+                  ]"
+                  lazy-rules
+                />
+                <q-input
+                  class="col-12"
+                  dense
+                  outlined
+                  v-model="Complaint"
+                  label="รายละเอียดเรื่องร้องเรียน"
+                  type="textarea"
+                  :rules="[(val:string) => !!val || `${'กรุณากรอกรายละเอียดเรื่องร้องเรียน'}`]"
+                />
+                <q-input
+                  class="col-12"
+                  dense
+                  outlined
+                  v-model="trueDetail"
+                  label="รายละเอียดสืบสวนข้อเท็จจริง"
+                  type="textarea"
+                  :rules="[(val:string) => !!val || `${'กรุณากรอกรายละเอียดสืบสวนข้อเท็จจริง'}`]"
+                />
+                <q-input
+                  class="col-12"
+                  dense
+                  outlined
+                  v-model="evidence"
+                  label="สรุปพยานหลักฐานสนับสนุนข้อกล่าวหา"
+                  type="textarea"
+                  :rules="[(val:string) => !!val || `${'กรุณากรอกสรุปพยานหลักฐานสนับสนุนข้อกล่าวหา'}`]"
+                />
+                <q-file
+                  class="col-12 q-pb-md"
+                  outlined
+                  dense
+                  v-model="filesEvidence"
+                  @added="fileUploadDoc"
+                  label="ไฟล์เอกสารหลักฐานสรุปพยานหลักฐานสนับสนุนข้อกล่าวหา"
+                  hide-bottom-space
+                  lazy-rules
+                  accept=".pdf,.xlsx,.doc"
+                >
+                  <template v-slot:prepend>
+                    <q-icon name="attach_file" />
+                  </template>
+                </q-file>
+                <q-input
+                  class="col-12"
+                  dense
+                  outlined
+                  v-model="recordAccuser"
+                  label="บันทึกถ้อยคำของผู้กล่าวหา"
+                  type="textarea"
+                  :rules="[(val:string) => !!val || `${'กรุณากรอกบันทึกถ้อยคำของผู้กล่าวหา'}`]"
+                />
+                <q-file
+                  class="col-12 q-pb-md"
+                  outlined
+                  dense
+                  v-model="filesRecordAccuser"
+                  @added="fileUploadDoc"
+                  label="ไฟล์เอกสารบันทึกถ้อยคำของผู้กล่าวหา"
+                  hide-bottom-space
+                  lazy-rules
+                  accept=".pdf,.xlsx,.doc"
+                >
+                  <template v-slot:prepend>
+                    <q-icon name="attach_file" />
+                  </template>
+                </q-file>
+                <q-input
+                  class="col-12"
+                  dense
+                  outlined
+                  v-model="witnesses"
+                  label="พยานและการบันทึกถ้อยคำ"
+                  type="textarea"
+                  :rules="[(val:string) => !!val || `${'กรุณากรอกพยานและการบันทึกถ้อยคำ'}`]"
+                />
+                <q-file
+                  class="col-12 q-pb-md"
+                  outlined
+                  dense
+                  v-model="filesWitnesses"
+                  @added="fileUploadDoc"
+                  label="ไฟล์เอกสารพยานและการบันทึกถ้อยคำ"
+                  hide-bottom-space
+                  lazy-rules
+                  accept=".pdf,.xlsx,.doc"
+                >
+                  <template v-slot:prepend>
+                    <q-icon name="attach_file" />
+                  </template>
+                </q-file>
+                <q-input
+                  class="col-12"
+                  dense
+                  outlined
+                  v-model="InvestResults"
+                  label="ผลการสอบสวน"
+                  type="textarea"
+                  :rules="[(val:string) => !!val || `${'กรุณากรอกผลการสอบสวน'}`]"
+                />
+                <q-file
+                  class="col-12"
+                  outlined
+                  dense
+                  v-model="filesEtc"
+                  @added="fileUploadDoc"
+                  label="ไฟล์เอกสารหลักฐานอื่น ๆ"
+                  hide-bottom-space
+                  lazy-rules
+                  accept=".pdf,.xlsx,.doc"
+                >
+                  <template v-slot:prepend>
+                    <q-icon name="attach_file" />
+                  </template>
+                </q-file>
+              </div>
+            </div>
+          </div>
+          <q-separator />
+          <q-separator />
+          <div class="row col-12 q-pa-sm">
+            <q-space />
+            <q-btn
+              flat
+              round
+              color="public"
+              @click="checkSave"
+              icon="mdi-content-save-outline"
+            >
+              <q-tooltip>{{ edit ? "แก้ไขข้อมูล" : "บันทึกข้อมูล" }}</q-tooltip>
+            </q-btn>
+          </div>
+        </q-card>
+      </div>
+    </q-form>
+  </div>
+  <Dialogbody
+    v-model:Modal="modal"
+    :clickClose="clickClose"
+    :rows2="rows2"
+    v-model:filterKeyword2="filterKeyword2"
+    v-model:type="type"
+  />
+  <!-- :fecthlistappointment="fecthlistappointment" -->
+</template>
diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/director.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/director.vue
new file mode 100644
index 000000000..f12a5d8fb
--- /dev/null
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/director.vue
@@ -0,0 +1,166 @@
+<template>
+  <div class="q-pb-sm row q-col-gutter-sm">
+    <!--  -->
+    <q-space />
+  </div>
+  <q-table
+    ref="table"
+    flat
+    bordered
+    class="custom-header-table"
+    v-bind="attrs"
+    virtual-scroll
+    :virtual-scroll-sticky-size-start="48"
+    dense
+    :pagination-label="paginationLabel"
+    v-model:pagination="pagination"
+  >
+    <template v-slot:header="props">
+      <q-tr :props="props">
+        <q-th v-for="col in props.cols" :key="col.name" :props="props">
+          <span class="text-weight-medium" v-html="col.label" />
+        </q-th>
+        <q-th auto-width v-if="nornmalData == true" />
+      </q-tr>
+    </template>
+    <template #body="props">
+      <slot v-bind="props" name="columns"></slot>
+    </template>
+    <template v-slot:pagination="scope">
+      <q-pagination
+        v-model="pagination.page"
+        active-color="primary"
+        color="dark"
+        :max="scope.pagesNumber"
+        :max-pages="5"
+        size="sm"
+        boundary-links
+        direction-links
+      ></q-pagination>
+    </template>
+  </q-table>
+</template>
+<script setup lang="ts">
+import { ref, useAttrs } from "vue";
+import type { Pagination } from "@/modules/04_registry/interface/index/Main";
+
+const attrs = ref<any>(useAttrs());
+const table = ref<any>(null);
+const filterRef = ref<any>(null);
+const initialPagination = ref<Pagination>({
+  rowsPerPage: 0,
+});
+
+const props = defineProps({
+  count: Number,
+  pass: Number,
+  notpass: Number,
+
+  inputfilter: String,
+  name: String,
+  icon: String,
+  inputvisible: Array,
+  editvisible: Boolean,
+  add: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  validate: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  nornmalData: {
+    type: Boolean,
+    defualt: true,
+  },
+  conclude: {
+    type: Boolean,
+    defualt: false,
+  },
+  paging: {
+    type: Boolean,
+    defualt: false,
+  },
+});
+
+const emit = defineEmits([
+  "update:inputfilter",
+  "update:inputvisible",
+  "update:editvisible",
+]);
+const updateInput = (value: string | number | null) => {
+  emit("update:inputfilter", value);
+};
+const updateVisible = (value: []) => {
+  emit("update:inputvisible", value);
+};
+
+const pagination = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+
+const paginationLabel = (start: string, end: string, total: string) => {
+  if (props.paging == true)
+    return " " + start + " ใน " + end + " จากจำนวน " + total + " รายการ";
+  else return start + "-" + end + " ใน " + total;
+};
+
+const checkAdd = () => {
+  props.add();
+};
+
+const resetFilter = () => {
+  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
+  emit("update:inputfilter", "");
+  filterRef.value.focus();
+};
+</script>
+<style lang="scss">
+.icon-color {
+  color: #4154b3;
+}
+
+.custom-table2 {
+  max-height: 64vh;
+
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+  }
+
+  .q-table td:nth-of-type(2) {
+    z-index: 3 !important;
+  }
+
+  .q-table th:nth-of-type(2),
+  .q-table td:nth-of-type(2) {
+    position: sticky;
+    left: 0;
+    z-index: 1;
+  }
+
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>
diff --git a/src/modules/11_discipline/components/4_Order/MainPage.vue b/src/modules/11_discipline/components/4_Order/MainPage.vue
index 12505b8fb..1285c2868 100644
--- a/src/modules/11_discipline/components/4_Order/MainPage.vue
+++ b/src/modules/11_discipline/components/4_Order/MainPage.vue
@@ -1,9 +1,232 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useRouter } from "vue-router";
+import type { QTableProps } from "quasar";
+
+// importStroe
+import { useOrderStore } from "../../stroes/OrderStore";
+
+const router = useRouter();
+const OrderStore = useOrderStore();
+const { fecthOrder } = OrderStore;
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "subject",
+    align: "left",
+    label: "เรื่อง",
+    sortable: true,
+    field: "subject",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "ordernumber",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "ordernumber",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "dateOrder",
+    align: "left",
+    label: "สั่ง ณ วันที่/วันที่คำสั่งมีผล",
+    sortable: true,
+    field: "dateOrder",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "orderby",
+    align: "left",
+    label: "คำสั่งโดย",
+    sortable: true,
+    field: "orderby",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "signer",
+    align: "left",
+    label: "ผู้ลงนาม",
+    sortable: true,
+    field: "signer",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "statusorder",
+    align: "left",
+    label: "สถานะของคำสั่ง",
+    sortable: true,
+    field: "statusorder",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const visibleColumns = ref<string[]>([
+  "subject",
+  "ordernumber",
+  "dateOrder",
+  "orderby",
+  "signer",
+  "statusorder",
+]);
+
+const filterTable = ref<string>("");
+
+onMounted(async () => {
+  await fecthListOrder();
+});
+
+async function fecthListOrder() {
+  const listData = [
+    {
+      subject: "ทุจริตในหน้าที่",
+      ordernumber: "1/2556",
+      dateOrder: "1 ธ.ค. 2565",
+      orderby: "สำนักงานคณพกรรมการข้าราชการกรุงเทพฯ",
+      signer: "นางศิรินภา คงน้อย",
+      statusorder: "เสร็จสิ้นแล้ว",
+    },
+    {
+      subject: "ทุจริตในหน้าที่",
+      ordernumber: "4/2556",
+      dateOrder: "1 ธ.ค. 2565",
+      orderby: "สำนักงานคณพกรรมการข้าราชการกรุงเทพฯ",
+      signer: "นางศิรินภา คงน้อย",
+      statusorder: "เสร็จสิ้นแล้ว",
+    },
+    {
+      subject: "ทุจริตในหน้าที่",
+      ordernumber: "2/2556",
+      dateOrder: "1 ธ.ค. 2565",
+      orderby: "สำนักงานคณพกรรมการข้าราชการกรุงเทพฯ",
+      signer: "นางศิรินภา คงน้อย",
+      statusorder: "เสร็จสิ้นแล้ว",
+    },
+  ];
+  await fecthOrder(listData);
+}
+
+function redirectToPageadd() {
+  router.push(`/discipline-order/add`);
+}
+
+//pagination
+const pagination = ref({
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
+const paging = ref<boolean>(true);
+const paginationLabel = (start: string, end: string, total: string) => {
+  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
+  else return start + "-" + end + " ใน " + total;
+};
+</script>
 
 <template>
-  <div>
-    <h1>ออกคำสั่ง</h1>
+  <div class="toptitle text-dark col-12 row items-center">
+    รายการออกคำสั่งลงโทษทางวินัย
+  </div>
+  <div class="col-12 q-mt-sm">
+    <q-card flat bordered>
+      <div class="q-pa-md">
+        <q-toolbar style="padding: 0" class="q-gutter-sm q-mb-md">
+          <q-btn
+            flat
+            dense
+            round
+            color="primary"
+            icon="mdi-plus"
+            @click="redirectToPageadd()"
+            ><q-tooltip>เพิ่มรายการออกคำสั่งลงโทษทางวินัย </q-tooltip></q-btn
+          >
+          <q-space />
+          <div class="col-2">
+            <q-input dense outlined v-model="filterTable" label="ค้นหา" />
+          </div>
+          <div class="col-2">
+            <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
+            />
+          </div>
+        </q-toolbar>
+        <d-table
+          ref="table"
+          :columns="columns"
+          :rows="OrderStore.rows"
+          :filter="filterTable"
+          row-key="subject"
+          flat
+          bordered
+          :paging="true"
+          dense
+          class="custom-header-table"
+          :visible-columns="visibleColumns"
+          :pagination-label="paginationLabel"
+          v-model:pagination="pagination"
+        >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                <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" style="height: 40px">
+              <q-td key="subject" :props="props">
+                {{ props.row.subject }}
+              </q-td>
+              <q-td key="ordernumber" :props="props">
+                {{ props.row.ordernumber }}
+              </q-td>
+              <q-td key="dateOrder" :props="props">
+                {{ props.row.dateOrder }}
+              </q-td>
+              <q-td key="orderby" :props="props">
+                <div class="table_ellipsis">
+                  {{ props.row.orderby }}
+                </div>
+              </q-td>
+              <q-td key="signer" :props="props">
+                {{ props.row.signer }}
+              </q-td>
+              <q-td key="statusorder" :props="props">
+                {{ props.row.statusorder }}
+              </q-td>
+            </q-tr>
+          </template>
+          <template v-slot:pagination="scope">
+            <q-pagination
+              v-model="pagination.page"
+              active-color="primary"
+              color="dark"
+              :max="scope.pagesNumber"
+              :max-pages="5"
+              size="sm"
+              boundary-links
+              direction-links
+            ></q-pagination>
+          </template>
+        </d-table>
+      </div>
+    </q-card>
   </div>
 </template>
 
-<style scoped></style>
\ No newline at end of file
+<style scoped></style>
diff --git a/src/modules/11_discipline/components/4_Order/OrderPage.vue b/src/modules/11_discipline/components/4_Order/OrderPage.vue
new file mode 100644
index 000000000..3c8cbc24d
--- /dev/null
+++ b/src/modules/11_discipline/components/4_Order/OrderPage.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+
+import step01 from "./Step01.vue";
+import step02 from "./Step02.vue";
+import step03 from "./Step03.vue";
+
+const router = useRouter();
+
+const step = ref<number>(1);
+
+const nextStep = async () => {
+  localStorage.setItem("currentStep", step.value.toString());
+  step.value++;
+};
+const previousStep = async () => {
+  localStorage.setItem("currentStep", step.value.toString());
+  step.value--;
+};
+</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.push(`/discipline-order`)"
+    />
+    ออกคำสั่งลงโทษทางวินัย
+  </div>
+  <div class="col-12 q-mt-sm">
+    <q-card flat bordered>
+      <q-stepper
+        v-model="step"
+        ref="stepper"
+        animated
+        active-color="pirmary"
+        active-icon="none"
+        header-class="bg-grey-1 "
+      >
+        <q-step
+          :name="1"
+          prefix="1"
+          title="รายละเอียดการออกคำสั่ง"
+          :done="step > 1"
+        >
+          <step01 v-if="step === 1" :next="nextStep" :previous="previousStep" />
+        </q-step>
+
+        <q-step :name="2" prefix="2" title="เลือกรายชื่อ" :done="step > 2">
+          <step02 v-if="step === 2" :next="nextStep" :previous="previousStep" />
+        </q-step>
+
+        <q-step
+          :name="3"
+          prefix="3"
+          title="รายละเอียดคำสั่งและแนบท้าย"
+          :done="step > 3"
+        >
+          <step03 v-if="step === 3" :next="nextStep" :previous="previousStep" />
+        </q-step>
+      </q-stepper>
+    </q-card>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/11_discipline/components/4_Order/Step01.vue b/src/modules/11_discipline/components/4_Order/Step01.vue
new file mode 100644
index 000000000..e9be1de39
--- /dev/null
+++ b/src/modules/11_discipline/components/4_Order/Step01.vue
@@ -0,0 +1,221 @@
+<script setup lang="ts">
+import { ref } from "vue";
+// importStroe
+import { useCounterMixin } from "@/stores/mixin";
+
+const mixin = useCounterMixin();
+const { date2Thai, dialogConfirm } = mixin;
+
+const props = defineProps({
+  next: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  previous: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+const next = () => props.next();
+
+const typeOrder = ref<string>("");
+const dateYear = ref<number>(2023);
+const date = ref<Date | null>(null);
+
+function onSubmit() {
+  next();
+}
+</script>
+
+<template>
+  <q-form @submit.prevent="onSubmit">
+    <div class="col-12 row q-pa-lg">
+      <div class="col-xs-12 col-sm-12 q-col-gutter-x-lg row q-col-gutter-y-xs">
+        <div class="col-xs-12 col-sm-6">
+          ประเภทคำสั่ง
+          <q-select
+            dense
+            outlined
+            v-model="typeOrder"
+            option-value="id"
+            option-label="name"
+            emit-value
+            map-options
+            :rules="[(val) => !!val || `${'กรุณาเลือกประเภทคำสั่ง'}`]"
+            lazy-rules
+            use-input
+          />
+        </div>
+        <div class="col-xs-12 col-sm-6">
+          คำสั่งโดย
+          <q-select
+            dense
+            outlined
+            v-model="typeOrder"
+            option-value="id"
+            option-label="name"
+            emit-value
+            map-options
+            :rules="[(val) => !!val || `${'กรุณาเลือกคำสั่งโดย'}`]"
+            lazy-rules
+            use-input
+          />
+        </div>
+        <div class="col-xs-12 col-sm-6">
+          เลือกรายการสอบสวนความผิดทางวินัย
+          <q-select
+            dense
+            outlined
+            v-model="typeOrder"
+            option-value="id"
+            option-label="name"
+            emit-value
+            map-options
+            :rules="[
+              (val) => !!val || `${'กรุณาเลือกรายการสอบสวนความผิดทางวินัย'}`,
+            ]"
+            lazy-rules
+            use-input
+          />
+        </div>
+        <div class="col-xs-12 col-sm-6">
+          ผู้มีอำนาจลงนาม
+          <q-input
+            dense
+            outlined
+            v-model="typeOrder"
+            placeholder="กรอกผู้มีอำนาจลงนาม"
+            :rules="[(val) => !!val || `${'กรุณากรอกผู้มีอำนาจลงนาม'}`]"
+            lazy-rules
+          />
+        </div>
+        <div class="row col-xs-7 col-sm-3">
+          <div class="col-6">
+            คำสั่งที่
+            <q-input
+              outlined
+              dense
+              v-model="typeOrder"
+              hide-bottom-space
+              :rules="[(val) => !!val || `${'กรุณากรอรคำสั่งที่'}`]"
+              lazy-rules
+            >
+            </q-input>
+          </div>
+          <label class="col-1 flex justify-center items-center text-bold"
+            >/</label
+          >
+          <div class="col-5">
+            พศ
+            <datepicker
+              v-model="dateYear"
+              :locale="'th'"
+              autoApply
+              year-picker
+              :enableTimePicker="false"
+            >
+              <template #year="{ year }">{{ year + 543 }}</template>
+              <template #year-overlay-value="{ value }">{{
+                parseInt(value + 543)
+              }}</template>
+              <template #trigger>
+                <q-input
+                  :model-value="dateYear + 543"
+                  :rules="[(val) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
+                  :label="`${'พ.ศ.'}`"
+                  dense
+                  outlined
+                >
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+        </div>
+        <div class="col-xs-5 col-sm-3">
+          วันที่มีผลคำสั่ง
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="date"
+            :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="full-width datepicker"
+                :model-value="date != null ? date2Thai(date) : null"
+                :rules="[(val) => !!val || `${'กรุณาเลือกวันที่มีผลคำสั่ง'}`]"
+              >
+                <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-6">
+          ตำแหน่งผู้มีอำนาจลงนาม
+          <q-input
+            dense
+            outlined
+            v-model="typeOrder"
+            placeholder="กรอกตำแหน่งผู้มีอำนาจลงนาม"
+            :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งผู้มีอำนาจลงนาม'}`]"
+            lazy-rules
+          />
+        </div>
+        <div class="col-xs-12 col-sm-6">
+          คำสั่งเรื่อง
+          <q-input
+            dense
+            outlined
+            v-model="typeOrder"
+            placeholder="กรอกคำสั่งเรื่อง"
+            :rules="[(val) => !!val || `${'กรุณากรอกคำสั่งเรื่อง'}`]"
+            lazy-rules
+          />
+        </div>
+        <div class="col-xs-12 col-sm-12">
+          รายละเอียดการกระทำความผิด
+          <q-input
+            dense
+            outlined
+            v-model="typeOrder"
+            placeholder="กรอกรายละเอียดการกระทำความผิด"
+            :rules="[(val) => !!val || `${'กรุณากรอกคำสั่งเรื่อง'}`]"
+            lazy-rules
+            type="textarea"
+            rows="5"
+          />
+        </div>
+      </div>
+    </div>
+    <q-card-actions align="right">
+      <q-btn
+        dense
+        unelevated
+        label="next"
+        color="public"
+        type="submit"
+        class="q-px-md"
+      />
+    </q-card-actions>
+  </q-form>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/11_discipline/components/4_Order/Step02.vue b/src/modules/11_discipline/components/4_Order/Step02.vue
new file mode 100644
index 000000000..8424b5991
--- /dev/null
+++ b/src/modules/11_discipline/components/4_Order/Step02.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+const props = defineProps({
+  next: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  previous: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+const next = () => props.next();
+const previous = () => props.previous();
+</script>
+
+<template>
+  <div><h1>step02</h1></div>
+  <q-card-actions align="right">
+    <q-btn
+      dense
+      unelevated
+      label="back"
+      color="public"
+      @click="previous()"
+      class="q-px-md"
+    />
+    <q-btn
+      dense
+      unelevated
+      label="next"
+      color="public"
+      @click="next()"
+      class="q-px-md"
+    />
+  </q-card-actions>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/11_discipline/components/4_Order/Step03.vue b/src/modules/11_discipline/components/4_Order/Step03.vue
new file mode 100644
index 000000000..f3daddd87
--- /dev/null
+++ b/src/modules/11_discipline/components/4_Order/Step03.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+const props = defineProps({
+  next: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  previous: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+const next = () => props.next();
+const previous = () => props.previous();
+</script>
+
+<template>
+  <div><h1>step03</h1></div>
+  <q-card-actions align="right">
+    <q-btn
+      dense
+      unelevated
+      label="back"
+      color="public"
+      @click="previous()"
+      class="q-px-md"
+    />
+  </q-card-actions>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/11_discipline/components/5_Report/MainPage.vue b/src/modules/11_discipline/components/5_Report/MainPage.vue
index 29f73a485..142233bc7 100644
--- a/src/modules/11_discipline/components/5_Report/MainPage.vue
+++ b/src/modules/11_discipline/components/5_Report/MainPage.vue
@@ -1,9 +1,148 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { useRouter } from "vue-router";
+// import { useInsigniaDataStore } from "@/modules/07_insignia/store";
+const router = useRouter();
+// const store = useInsigniaDataStore();
+
+const nextPage = (type: string, title: string) => {
+  router.push(`/discipline/report/${type}`);
+};
+</script>
 
 <template>
+  <div class="toptitle text-dark col-12 row items-center">
+    รายการรายงานของระบบงานวินัย
+  </div>
   <div>
-    <h1>รายงาน</h1>
+    <q-card flat bordered class="col-12 q-mt-sm">
+      <div class="q-pa-md " >
+        <div class="q-px-lg q-py-sm" style="border: 1px solid #e6e6e6; border-radius: 5px;">
+          <q-item
+          clickable
+          @click="
+            nextPage(
+              '1',
+              'รายงานเรื่องร้องเรียนแยกรายวัน รายเดือน รายปี'
+            )
+          "
+          dense
+          class="hover-green"
+        >
+          <q-item-section avatar>
+            <q-icon color="primary" name="mdi-file" size="xs" />
+          </q-item-section>
+          <q-item-section class="text-dark">
+            รายงานเรื่องร้องเรียนแยกรายวัน รายเดือน รายปี
+          </q-item-section>
+        </q-item>
+
+        <q-item
+          clickable
+          @click="
+            nextPage('2', 'รายงานเรื่องร้องเรียนข้าราชการสามัญฯ ในสังกัดกรุงเทพมหานคร แยกตามหน่วยงาน')
+          "
+          dense
+          class="hover-green"
+        >
+          <q-item-section avatar>
+            <q-icon color="primary" name="mdi-file" size="xs" />
+          </q-item-section>
+          <q-item-section class="text-dark">
+            รายงานเรื่องร้องเรียนข้าราชการสามัญฯ ในสังกัดกรุงเทพมหานคร แยกตามหน่วยงาน
+          </q-item-section>
+        </q-item>
+
+        <q-item
+          clickable
+          @click="nextPage('3', 'รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัย แยกตามลักษณะความผิด')"
+          dense
+          class="hover-green"
+        >
+          <q-item-section avatar>
+            <q-icon color="primary" name="mdi-file" size="xs" />
+          </q-item-section>
+          <q-item-section class="text-dark">
+            รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัย แยกตามลักษณะความผิด
+          </q-item-section>
+        </q-item>
+        <q-item
+          clickable
+          @click="nextPage('4', 'รายงานรายชื่อข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแยกตามลักษณะความผิด')"
+          dense
+          class="hover-green"
+        >
+          <q-item-section avatar>
+            <q-icon color="primary" name="mdi-file" size="xs" />
+          </q-item-section>
+          <q-item-section class="text-dark">
+            รายงานรายชื่อข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแยกตามลักษณะความผิด
+          </q-item-section>
+        </q-item>
+        <q-item
+          clickable
+          @click="nextPage('5', 'รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดแยกตามระดับความผิด')"
+          dense
+          class="hover-green"
+        >
+          <q-item-section avatar>
+            <q-icon color="primary" name="mdi-file" size="xs" />
+          </q-item-section>
+          <q-item-section class="text-dark">
+            รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดแยกตามระดับความผิด
+          </q-item-section>
+        </q-item>
+        <q-item
+          clickable
+          @click="nextPage('6', 'รายงานรายชื่อข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแยกตามลักษณะความผิด')"
+          dense
+          class="hover-green"
+        >
+          <q-item-section avatar>
+            <q-icon color="primary" name="mdi-file" size="xs" />
+          </q-item-section>
+          <q-item-section class="text-dark">
+            รายงานรายชื่อข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแยกตามลักษณะความผิด
+          </q-item-section>
+        </q-item>
+        <q-item
+          clickable
+          @click="nextPage('7', 'รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแต่ยุติเรื่อง แยกลักษณะความผิด')"
+          dense
+          class="hover-green"
+        >
+          <q-item-section avatar>
+            <q-icon color="primary" name="mdi-file" size="xs" />
+          </q-item-section>
+          <q-item-section class="text-dark">
+            รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแต่ยุติเรื่อง แยกลักษณะความผิด
+          </q-item-section>
+        </q-item>
+        <q-item
+          clickable
+          @click="nextPage('8', 'รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแต่ยุติเรื่อง แยกตามตำแหน่ง')"
+          dense
+          class="hover-green"
+        >
+          <q-item-section avatar>
+            <q-icon color="primary" name="mdi-file" size="xs" />
+          </q-item-section>
+          <q-item-section class="text-dark">
+            รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแต่ยุติเรื่อง แยกตามตำแหน่ง
+          </q-item-section>
+        </q-item>
+        </div>
+       
+      </div>
+    </q-card>
   </div>
 </template>
 
-<style scoped></style>
+<style lang="scss" scope>
+.q-item.hover-green:hover {
+  background-color: #d5f1ee57;
+  border-radius: 2px;
+}
+.q-item.hover-green {
+  padding: 10px;
+}
+</style>
diff --git a/src/modules/11_discipline/components/5_Report/reportDetail.vue b/src/modules/11_discipline/components/5_Report/reportDetail.vue
new file mode 100644
index 000000000..4f36355c0
--- /dev/null
+++ b/src/modules/11_discipline/components/5_Report/reportDetail.vue
@@ -0,0 +1,355 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { VuePDF, usePDF } from "@tato30/vue-pdf";
+import { useCounterMixin } from "@/stores/mixin";
+import { useRoute } from "vue-router";
+import { useQuasar } from "quasar";
+
+import { useReportDataStore } from "@/modules/11_discipline/stroes/ReportStore";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+const date = ref<Date | null>(null);
+const dateEnd = ref<Date | null>(null);
+const route = useRoute();
+const typeReport = route.params.type.toString();
+const store = useReportDataStore();
+const mixin = useCounterMixin();
+const { messageError, showLoader, hideLoader, date2Thai } = mixin;
+const { optionReport } = store;
+const $q = useQuasar();
+const ocSelect = ref<string>("");
+const ocSelectOp = ref<any>();
+const ocSelectOps = ref<any>([
+  { id: "001", value: "กทม" },
+  { id: "002", value: "กรุงเทพ" },
+]);
+const government = ref<string>("");
+const governmentOp = ref<any>();
+const governmentOps = ref<any>([
+  { id: "001", value: "กทม" },
+  { id: "002", value: "กรุงเทพ" },
+  { id: "003", value: "bankok" },
+]);
+const fault = ref<any>();
+const faultOp = ref<any>();
+const faultOps = ref<any>([
+  { id: "001", value: "ยังไม่ระบุ" },
+  { id: "002", value: "ไม่ร้ายเเรง" },
+  { id: "003", value: "ร้ายเเรง" },
+]);
+const pdfSrc = ref<any>();
+const numOfPages = ref<number>(0);
+const page = ref<number>(1);
+const titleReport = ref<string>("");
+interface OptionReport {
+  id: string;
+  title: string;
+}
+
+onMounted(async () => {
+  let report = optionReport.find((e: OptionReport) => e.id == typeReport);
+  report && (titleReport.value = report.title);
+});
+
+const splitterModel = ref(14);
+const backHistory = () => {
+  window.history.back();
+};
+
+const showDocument = (url: any) => {
+  const pdfData = usePDF(url);
+
+  setTimeout(() => {
+    pdfSrc.value = pdfData.pdf.value;
+    numOfPages.value = pdfData.pages.value;
+  }, 1000);
+};
+const nextPage = () => {
+  if (page.value < numOfPages.value) {
+    page.value++;
+  }
+};
+const backPage = () => {
+  if (page.value !== 1) {
+    page.value--;
+  }
+};
+
+function filterFnOptionsType(val: string, update: any, type: string) {
+  update(() => {
+    const needle = val.toLowerCase();
+    if (type === "ocSelectOp") {
+      ocSelectOp.value = ocSelectOps.value.filter(
+        (v: any) => v.value.toLowerCase().indexOf(needle) > -1
+      );
+    } else if (type === "governmentOp") {
+      governmentOp.value = governmentOps.value.filter(
+        (v: any) => v.value.toLowerCase().indexOf(needle) > -1
+      );
+    } else if (type === "faultOp") {
+      faultOp.value = faultOps.value.filter(
+        (v: any) => v.value.toLowerCase().indexOf(needle) > -1
+      );
+    }
+  });
+}
+</script>
+<template>
+  <div class="toptitle">
+    <q-btn
+      icon="mdi-arrow-left"
+      unelevated
+      round
+      dense
+      flat
+      color="primary"
+      class="q-mr-sm"
+      @click="backHistory"
+    />
+    {{ titleReport }}
+  </div>
+  <div>
+    <q-card flat bordered class="col-12 q-mt-sm">
+      <div class="q-pa-md q-gutter-y-sm">
+        <q-toolbar style="padding: 0">
+          <div class="q-pr-xs">
+            <datepicker
+              menu-class-name="modalfix"
+              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="full-width inputgreen cursor-pointer"
+                  outlined
+                  dense
+                  lazy-rules
+                  borderless
+                  :model-value="date !== null ? date2Thai(date) : null"
+                  :label="`${'ตั้งเเต่วันที่'}`"
+                >
+                  <template v-slot:prepend>
+                    <q-icon name="event" class="cursor-pointer" color="primary">
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+          <div class="q-pl-xs">
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="dateEnd"
+              :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="full-width inputgreen cursor-pointer"
+                  outlined
+                  dense
+                  lazy-rules
+                  borderless
+                  :model-value="dateEnd !== null ? date2Thai(dateEnd) : null"
+                  :label="`${'ถึงวันที่'}`"
+                >
+                  <template v-slot:prepend>
+                    <q-icon name="event" class="cursor-pointer" color="primary">
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+          <q-space />
+          <div class="q-py-xs">
+            <q-btn unelevated color="primary">
+              <q-icon left size="2em" name="mdi-eye-outline" />
+              <div>แสดงรายงาน</div>
+            </q-btn>
+          </div>
+        </q-toolbar>
+        <q-toolbar
+          v-if="typeReport > '1'"
+          class="q-pa-sm bg-grey-2"
+          style="border-radius: 5px"
+        >
+          <div class="q-pr-xs">
+            <q-select
+              class="bg-white"
+              outlined
+              dense
+              v-model="ocSelect"
+              :options="ocSelectOp"
+              label="เลือกหน่วยงาน/สำนักงานเขต"
+              emit-value
+              map-options
+              option-label="value"
+              option-value="id"
+              use-input
+              @filter="(inputValue: any,
+            doneFn: Function) => filterFnOptionsType(inputValue, doneFn, 'ocSelectOp'
+            )"
+              ><template v-slot:no-option>
+                <q-item>
+                  <q-item-section class="text-grey">
+                    ไม่มีข้อมูล
+                  </q-item-section>
+                </q-item>
+              </template>
+            </q-select>
+          </div>
+          <div class="q-pl-xs">
+            <q-select
+              class="bg-white"
+              outlined
+              dense
+              v-model="government"
+              :options="governmentOp"
+              label="เลือกหน่วยงาน/สำนักงานเขต"
+              emit-value
+              map-options
+              option-label="value"
+              option-value="id"
+              use-input
+              @filter="(inputValue: any,
+            doneFn: Function) => filterFnOptionsType(inputValue, doneFn, 'governmentOp'
+            )"
+              ><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="typeReport > '2'" class="q-pl-xs">
+            <q-select
+            class="bg-white"
+              outlined
+              dense
+              v-model="fault"
+              :options="faultOp"
+              label="เลือกลักษณะความผิด"
+              emit-value
+              map-options
+              option-label="value"
+              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>
+        </q-toolbar>
+        <q-splitter
+          v-model="splitterModel"
+          horizontal
+          style="
+            height: 70vh;
+            border: 1px solid rgb(210, 210, 210);
+            border-radius: 5px;
+          "
+          before-class="overflow-hidden disable"
+          separator-class="bg-white disabled"
+        >
+          <template v-slot:before>
+            <div class="q-px-sm">
+              <div class="row items-start items-center">
+                <div class="col">
+                  <q-btn
+                    padding="xs"
+                    icon="mdi-chevron-left"
+                    color="grey-2"
+                    text-color="grey-5"
+                    size="md"
+                    class="my-auto"
+                    @click="backPage"
+                    :disable="page == 1"
+                  />
+                </div>
+                <div class="col-12 col-md-auto">
+                  <div class="q-pa-md flex">
+                    หน้าที่ {{ page }} จาก {{ numOfPages }}
+                  </div>
+                </div>
+                <div class="col text-right">
+                  <q-btn
+                    padding="xs"
+                    icon="mdi-chevron-right"
+                    color="grey-2"
+                    text-color="grey-5"
+                    size="md"
+                    @click="nextPage"
+                    :disable="page === numOfPages"
+                  />
+                </div>
+              </div>
+            </div>
+          </template>
+          <template v-slot:after>
+            <div class="q-pa-md">
+              <VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
+            </div>
+          </template>
+          <template v-slot:default>
+            <div class="q-pa-md">
+              <div class="row items-start items-center">
+                <div class="col">
+                  <q-btn
+                    padding="xs"
+                    icon="mdi-chevron-left"
+                    color="grey-2"
+                    text-color="grey-5"
+                    size="md"
+                    class="my-auto"
+                    @click="backPage"
+                    :disable="page == 1"
+                  />
+                </div>
+                <div class="col-12 col-md-auto">
+                  <div class="q-pa-md flex">
+                    หน้าที่ {{ page }} จาก {{ numOfPages }}
+                  </div>
+                </div>
+                <div class="col text-right">
+                  <q-btn
+                    padding="xs"
+                    icon="mdi-chevron-right"
+                    color="grey-2"
+                    text-color="grey-5"
+                    size="md"
+                    @click="nextPage"
+                    :disable="page === numOfPages"
+                  />
+                </div>
+              </div>
+            </div>
+          </template>
+        </q-splitter>
+      </div>
+    </q-card>
+  </div>
+</template>
diff --git a/src/modules/11_discipline/components/ุ6_Information/Channel/MainPage.vue b/src/modules/11_discipline/components/ุ6_Information/Channel/MainPage.vue
index 87ddd73fb..22e83bc1f 100644
--- a/src/modules/11_discipline/components/ุ6_Information/Channel/MainPage.vue
+++ b/src/modules/11_discipline/components/ุ6_Information/Channel/MainPage.vue
@@ -1,9 +1,285 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref, useAttrs, onMounted } from "vue";
+import type { QTableProps } from "quasar";
+import router from "@/router";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
 
+import config from "@/app.config";
+import http from "@/plugins/http";
+
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  success,
+  messageError,
+  showLoader,
+  hideLoader,
+  dialogConfirm,
+  dialogRemove,
+} = mixin;
+const $q = useQuasar(); //ใช้ noti quasar
+
+const visibleColumns = ref<string[]>([
+  "no",
+  "subject",
+  "interrogated",
+  "fault",
+  "status",
+]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+
+// หัวตาราง
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "subject",
+    align: "left",
+    label: "ชื่อประเภท",
+    sortable: true,
+    field: "subject",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+const rows = ref<any>([
+  {
+    subject: " จดหมาย",
+  },
+  {
+    subject: " อีเมล์",
+  },
+  {
+    subject: " โทรศัพท์",
+  },
+  {
+    subject: " บอกเล่า",
+  },
+]);
+
+// ค้นหาในตาราง
+const filterKeyword = ref<string>("");
+const filterRef = ref<HTMLInputElement | null>(null);
+const resetFilter = () => {
+  filterKeyword.value = "";
+  if (filterRef.value) {
+    filterRef.value.focus();
+  }
+};
+
+const attrs = ref<any>(useAttrs());
+const paging = ref<boolean>(true);
+const pagination = ref({
+  // sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+const paginationLabel = (start: string, end: string, total: string) => {
+  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
+  else return start + "-" + end + " ใน " + total;
+};
+
+const clickAdd = () => {
+  router.push(`/discipline/channel/add`);
+};
+
+const clickDelete = (id: string) => {
+  $q.dialog({
+    title: "ยืนยันการลบช่องทาง",
+    message: "ต้องการลบช่องทางนี้ใช่หรือไม่?",
+    cancel: {
+      flat: true,
+      color: "negative",
+    },
+    persistent: true,
+  })
+    .onOk(async () => {
+      console.log("delete");
+    })
+    .onCancel(() => {})
+    .onDismiss(() => {});
+};
+
+onMounted(() => {});
+</script>
 <template>
-  <div>
-    <h1>ช่องทางการร้องเรียน</h1>
+  <div class="toptitle text-dark col-12 row items-center">
+    รายการช่องทางการร้องเรียน
   </div>
+  <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
+    <div class="row q-col-gutter-sm">
+      <div class="row col-12 q-col-gutter-sm">
+        <div>
+          <q-btn
+            @click="clickAdd()"
+            size="12px"
+            flat
+            round
+            color="add"
+            icon="mdi-plus"
+          >
+            <q-tooltip>เพิ่มช่องทางการร้องเรียน</q-tooltip>
+          </q-btn>
+        </div>
+        <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"
+        />
+      </div>
+      <div class="col-12">
+        <q-table
+          ref="table"
+          :columns="columns"
+          :rows="rows"
+          :filter="filterKeyword"
+          row-key="interrogated"
+          flat
+          bordered
+          :paging="true"
+          dense
+          class="custom-header-table"
+          v-bind="attrs"
+          :visible-columns="visibleColumns"
+          :pagination-label="paginationLabel"
+          v-model:pagination="pagination"
+        >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                <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">
+                {{ props.rowIndex + 1 }}
+              </q-td>
+              <q-td key="subject" :props="props">
+                {{ props.row.subject }}
+              </q-td>
+              <q-td>
+                <q-btn
+                  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>
+          <template v-slot:pagination="scope">
+            <q-pagination
+              v-model="pagination.page"
+              active-color="primary"
+              color="dark"
+              :max="scope.pagesNumber"
+              :max-pages="5"
+              size="sm"
+              boundary-links
+              direction-links
+            ></q-pagination>
+          </template>
+        </q-table>
+      </div>
+    </div>
+  </q-card>
 </template>
 
-<style scoped></style>
+<style lang="scss" scope>
+.filter-card {
+  background-color: #f1f1f1b0;
+}
+
+.toggle-expired-account {
+  font-size: 12px;
+  font-weight: 400;
+  font-size: 15px;
+  line-height: 150%;
+  color: #35373c;
+}
+
+.icon-color {
+  color: #4154b3;
+}
+
+.custom-header-table {
+  max-height: 64vh;
+
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+    z-index: 1;
+  }
+
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>
diff --git a/src/modules/11_discipline/components/ุ6_Information/Channel/addChannel.vue b/src/modules/11_discipline/components/ุ6_Information/Channel/addChannel.vue
new file mode 100644
index 000000000..0a6c0eccb
--- /dev/null
+++ b/src/modules/11_discipline/components/ุ6_Information/Channel/addChannel.vue
@@ -0,0 +1,214 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useQuasar, QForm } from "quasar";
+import { useRouter, useRoute } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import type { QTableProps } from "quasar";
+
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  dateToISO,
+  messageError,
+  showLoader,
+  hideLoader,
+  dialogConfirm,
+  success,
+  dialogMessageNotify,
+} = mixin;
+const router = useRouter();
+const route = useRoute();
+const myForm = ref<QForm | null>(null); //form data input
+const edit = ref<boolean>(false);
+const channel = ref<string>("");
+
+onMounted(async () => {
+  //   if (route.params.id) {
+  //     // มี params id ให้ เรียกข้อมูลของรอบการเสนอขอ
+  //     await fetchData();
+  //   }
+});
+// เรียกข้อมูลของรอบการเสนอขอ
+const fetchData = async () => {
+  //   edit.value = true;
+  //   showLoader();
+  //   await http
+  //     .get(config.API.getRoundInsignia(id.value))
+  //     .then((res) => {
+  //       const data = res.data.result;
+  //       id.value = data.period_id;
+  //       roundInsig.value =
+  //         options.value.filter((r: any) => r.value == data.period_round).length >
+  //         0
+  //           ? options.value.filter((r: any) => r.value == data.period_round)[0]
+  //           : null;
+  //       yearly.value = data.period_year;
+  //       datelast.value = data.period_amount;
+  //       dateStart.value = new Date(data.period_start);
+  //       dateEnd.value = new Date(data.period_end);
+  //       files.value = data.period_doc;
+  //     })
+  //     .catch((e) => {
+  //       messageError($q, e);
+  //     })
+  //     .finally(() => {
+  //       hideLoader();
+  //     });
+};
+
+const deleteData = async (id: string) => {
+  //   showLoader();
+  //   await http
+  //     .delete(config.API.periodExamId(id))
+  //     .then((res) => {
+  //       success($q, "ลบข้อมูลสำเร็จ");
+  //     })
+  //     .catch((e) => {
+  //       messageError($q, e);
+  //     })
+  //     .finally(async () => {
+  //       hideLoader();
+  //     });
+};
+
+// แก้ไขข้อมูล
+
+// คลิกบันทึก
+const checkSave = () => {
+  //   if (myForm.value !== null) {
+  //     myForm.value.validate().then(async (success) => {
+  //       if (success) {
+  //         dialogConfirm($q, () => SaveData());
+  //       } else if (Number(datelast.value) !== 0) {
+  //         dialogMessageNotify($q, "กรุณาเลือกรอบการเสนอขอพระราชทานเครื่องราชฯ");
+  //       }
+  //     });
+  //   }
+};
+// บันทึกข้อมูล
+const SaveData = async () => {
+  //   if (edit.value) {
+  //     await editData(id.value);
+  //   } else {
+  //     await addData();
+  //     clickBack();
+  //   }
+};
+// เพิ่มข้อมูลรอบการเสนอขอพระราชทานเครื่องราชฯ
+const addData = async () => {
+  //   const formData = new FormData();
+  //   const name = `รอบการเสนอขอพระราชทานเครื่องราชรอบที่ ${
+  //     roundInsig.value.value
+  //   }  ปี ${yearly.value + 543} `;
+  //   formData.append("name", name);
+  //   formData.append("year", yearly.value.toString());
+  //   formData.append("amount", datelast.value.toString());
+  //   formData.append("round", roundInsig.value.value);
+  //   if (dateStart.value !== null) {
+  //     formData.append("startDate", dateToISO(dateStart.value));
+  //   }
+  //   if (dateEnd.value !== null) {
+  //     formData.append("endDate", dateToISO(dateEnd.value));
+  //   }
+  //   formData.append("file", files.value);
+  //   showLoader();
+  //   await http
+  //     .post(config.API.listRoundInsignia(), formData)
+  //     .then(() => {
+  //       success($q, "บันทึกข้อมูลสำเร็จ");
+  //     })
+  //     .catch((e) => {
+  //       messageError($q, e);
+  //     })
+  //     .finally(async () => {
+  //       hideLoader();
+  //     });
+};
+// แก้ไขข้อมูล
+const editData = async (id: string) => {
+  //   const formData = new FormData();
+  //   const name = `รอบการเสนอขอพระราชทานเครื่องราชรอบที่ ${
+  //     roundInsig.value.value
+  //   } ปี ${yearly.value + 543}`;
+  //   formData.append("name", name);
+  //   formData.append("year", yearly.value.toString());
+  //   formData.append("amount", datelast.value.toString());
+  //   formData.append("round", roundInsig.value.value);
+  //   if (dateStart.value !== null) {
+  //     formData.append("startDate", dateToISO(dateStart.value));
+  //   }
+  //   if (dateEnd.value !== null) {
+  //     formData.append("endDate", dateToISO(dateEnd.value));
+  //   }
+  //   formData.append("file", files.value);
+  //   showLoader();
+  //   await http
+  //     .put(config.API.editRoundInsignia(id), formData)
+  //     .then(() => {
+  //       success($q, "แก้ไขข้อมูลสำเร็จ");
+  //     })
+  //     .catch((e) => {
+  //       messageError($q, e);
+  //     })
+  //     .finally(async () => {
+  //       hideLoader();
+  //       clickBack();
+  //     });
+};
+
+const clickBack = () => {
+  router.push(`/discipline/channel`);
+};
+</script>
+<template>
+  <div class="col-xs-12 col-sm-12 col-md-11">
+    <div class="toptitle col-12 row items-center">
+      <q-btn
+        icon="mdi-arrow-left"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="clickBack"
+      />
+      {{ edit ? "ช่องทางการร้องเรียน" : "เพิ่มช่องทางการร้องเรียน" }}
+    </div>
+    <q-form ref="myForm">
+      <div class="col-12">
+        <q-card bordered>
+          <div class="col-12 row q-col-gutter-md q-pa-md">
+            <div class="col-xs-12 col-sm-12 row">
+              <q-separator />
+              <div class="col-12 row q-pa-sm q-col-gutter-sm">
+                <q-input
+                  class="col-12"
+                  dense
+                  outlined
+                  v-model="channel"
+                  label="กรอกชื่อช่องทาง"
+                  :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อช่องทาง'}`]"
+                />
+              </div>
+            </div>
+          </div>
+          <q-separator />
+          <q-separator />
+          <div class="row col-12 q-pa-sm">
+            <q-space />
+            <q-btn
+              flat
+              round
+              color="public"
+              @click="checkSave"
+              icon="mdi-content-save-outline"
+            >
+              <q-tooltip>{{ edit ? "แก้ไขข้อมูล" : "บันทึกข้อมูล" }}</q-tooltip>
+            </q-btn>
+          </div>
+        </q-card>
+      </div>
+    </q-form>
+  </div>
+</template>
diff --git a/src/modules/11_discipline/router.ts b/src/modules/11_discipline/router.ts
index 6ccb4437a..55124354e 100644
--- a/src/modules/11_discipline/router.ts
+++ b/src/modules/11_discipline/router.ts
@@ -1,115 +1,180 @@
+const complaintMain = () =>
+  import("@/modules/11_discipline/components/1_Complaint/MainPage.vue");
+const factsMain = () =>
+  import("@/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue");
+const investigatefactsAdd = () =>
+  import(
+    "@/modules/11_discipline/components/2_InvestigateFacts/investigatefactsAdd.vue"
+  );
+const disciplinaryMain = () =>
+  import(
+    "@/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue"
+  );
+const oredrMain = () =>
+  import("@/modules/11_discipline/components/4_Order/MainPage.vue");
+const report = () =>
+  import("@/modules/11_discipline/components/5_Report/MainPage.vue");
+const directorMain = () =>
+  import(
+    "@/modules/11_discipline/components/ุ6_Information/Director/MainPage.vue"
+  );
+const channelMain = () =>
+  import(
+    "@/modules/11_discipline/components/ุ6_Information/Channel/MainPage.vue"
+  );
+const complaintAdd = () =>
+  import("@/modules/11_discipline/components/1_Complaint/AddComplaintPage.vue");
+const reportType = () =>
+  import("@/modules/11_discipline/components/5_Report/reportDetail.vue");
 
-const complaintMain = () => import("@/modules/11_discipline/components/1_Complaint/MainPage.vue")
-const factsMain = () => import("@/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue")
-const investigatefactsAdd = () => import("@/modules/11_discipline/components/2_InvestigateFacts/investigatefactsAdd.vue")
-const disciplinaryMain = () => import("@/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue")
-const oredrMain = () => import("@/modules/11_discipline/components/4_Order/MainPage.vue")
-const report = () => import("@/modules/11_discipline/components/5_Report/MainPage.vue")
-const directorMain = () => import("@/modules/11_discipline/components/ุ6_Information/Director/MainPage.vue")
-const channelMain = () => import("@/modules/11_discipline/components/ุ6_Information/Channel/MainPage.vue")
-const complaintAdd = () => import("@/modules/11_discipline/components/1_Complaint/AddComplaintPage.vue")
-const orderAdd = () => import("@/modules/11_discipline/components/4_Order/OrderPage.vue")
-
-
+const InvestigateDisciplinaryAdd = () =>
+  import(
+    "@/modules/11_discipline/components/3_InvestigateDisciplinary/addInvestigate.vue"
+  );
+const channelAdd = () =>
+  import(
+    "@/modules/11_discipline/components/ุ6_Information/Channel/addChannel.vue"
+  );
+const orderPage = () => import("@/modules/11_discipline/components/4_Order/OrderPage.vue")
 export default [
-    {
-        path: "/discipline/complaints",
-        name: "/discipline-complaints",
-        component: complaintMain,
-        meta: {
-            Auth: true,
-            Key: [11.1],
-            Role: "coin",
-        },
+  {
+    path: "/discipline/complaints",
+    name: "/discipline-complaints",
+    component: complaintMain,
+    meta: {
+      Auth: true,
+      Key: [11.1],
+      Role: "coin",
     },
-    {
-        path: "/discipline/complaints/add",
-        name: "/discipline-complaints-add",
-        component: complaintAdd,
-        meta: {
-            Auth: true,
-            Key: [11.1],
-            Role: "coin",
-        },
+  },
+  {
+    path: "/discipline/complaints/add",
+    name: "/discipline-complaints-add",
+    component: complaintAdd,
+    meta: {
+      Auth: true,
+      Key: [11.1],
+      Role: "coin",
     },
-    {
-        path: "/discipline/investigatefacts",
-        name: "/discipline-investigatefacts",
-        component: factsMain,
-        meta: {
-            Auth: true,
-            Key: [11.2],
-            Role: "coin",
-        },
+  },
+  {
+    path: "/discipline/investigatefacts",
+    name: "/discipline-investigatefacts",
+    component: factsMain,
+    meta: {
+      Auth: true,
+      Key: [11.2],
+      Role: "coin",
     },
-    {
-        path: "/discipline/disciplinary",
-        name: "/discipline-disciplinary",
-        component: disciplinaryMain,
-        meta: {
-            Auth: true,
-            Key: [11.3],
-            Role: "coin",
-        },
+  },
+  {
+    path: "/discipline/disciplinary",
+    name: "/discipline-disciplinary",
+    component: disciplinaryMain,
+    meta: {
+      Auth: true,
+      Key: [11.3],
+      Role: "coin",
     },
-    {
-        path: "/discipline-order",
-        name: "/disciplineorder",
-        component: oredrMain,
-        meta: {
-            Auth: true,
-            Key: [11.4],
-            Role: "coin",
-        },
+  },
+  {
+    path: "/discipline-order",
+    name: "/disciplineorder",
+    component: oredrMain,
+    meta: {
+      Auth: true,
+      Key: [11.4],
+      Role: "coin",
     },
-    {
-        path: "/discipline/report",
-        name: "/discipline-report",
-        component: report,
-        meta: {
-            Auth: true,
-            Key: [11.5],
-            Role: "coin",
-        },
+  },
+  {
+    path: "/discipline/report",
+    name: "/discipline-report",
+    component: report,
+    meta: {
+      Auth: true,
+      Key: [11.5],
+      Role: "coin",
     },
-    {
-        path: "/discipline/director",
-        name: "/discipline-director",
-        component: directorMain,
-        meta: {
-            Auth: true,
-            Key: [11.6],
-            Role: "coin",
-        },
+  },
+  {
+    path: "/discipline/report/:type",
+    name: "/discipline-reportType",
+    component: reportType,
+    meta: {
+      Auth: true,
+      Key: [11.5],
+      Role: "coin",
     },
-    {
-        path: "/discipline/channel",
-        name: "/discipline-channel",
-        component: channelMain,
-        meta: {
-            Auth: true,
-            Key: [11.6],
-            Role: "coin",
-        },
+  },
+  {
+    path: "/discipline/director",
+    name: "/discipline-director",
+    component: directorMain,
+    meta: {
+      Auth: true,
+      Key: [11.6],
+      Role: "coin",
     },
-    {
-        path: "/discipline/investigatefacts/add",
-        name: "/discipline-investigatefactsAdd",
-        component: investigatefactsAdd,
-        meta: {
-            Auth: true,
-            Key: [11.2],
-            Role: "coin",
-        },
+  },
+  {
+    path: "/discipline/director",
+    name: "/discipline-director",
+    component: directorMain,
+    meta: {
+      Auth: true,
+      Key: [11.6],
+      Role: "coin",
     },
-    {
-        path: "/discipline-order/add",
-        name: "/discipline-order-add",
-        component: orderAdd,
-        meta: {
-            Auth: true,
-            Key: [11.4],
-            Role: "coin",
-        },
+  },
+  {
+    path: "/discipline/channel",
+    name: "/discipline-channel",
+    component: channelMain,
+    meta: {
+      Auth: true,
+      Key: [11.6],
+      Role: "coin",
     },
-]
\ No newline at end of file
+  },
+  {
+    path: "/discipline/investigatefacts/add",
+    name: "/discipline-investigatefactsAdd",
+    component: investigatefactsAdd,
+    meta: {
+      Auth: true,
+      Key: [11.2],
+      Role: "coin",
+    },
+  },
+  {
+    path: "/discipline/InvestigateDisciplinary/add",
+    name: "/discipline-InvestigateDisciplinaryAdd",
+    component: InvestigateDisciplinaryAdd,
+    meta: {
+      Auth: true,
+      Key: [11.3],
+      Role: "coin",
+    },
+  },
+  {
+    path: "/discipline/channel/add",
+    name: "/discipline-channelAdd",
+    component: channelAdd,
+    meta: {
+      Auth: true,
+      Key: [11.2],
+      Role: "coin",
+    },
+  },
+  {
+    path: "/discipline-order/add",
+    name: "/disciplineorder-add",
+    component: orderPage,
+    meta: {
+      Auth: true,
+      Key: [11.4],
+      Role: "coin",
+    },
+  },
+];
diff --git a/src/modules/11_discipline/stroes/ComplaintsStore.ts b/src/modules/11_discipline/stroes/ComplaintsStore.ts
index d57c54d00..5f772a96d 100644
--- a/src/modules/11_discipline/stroes/ComplaintsStore.ts
+++ b/src/modules/11_discipline/stroes/ComplaintsStore.ts
@@ -1,9 +1,12 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
 
+import type { DataOption } from "../interface/index/Main";
+
 export const useComplainstDataStore = defineStore("complainst", () => {
     const rows = ref<any>([])
-    const optionListName = ref<any>([])
+    const optionListName = ref<any>([{}])
+
 
     function fectComplainst(data: any) {
         let datalist = data.map((e: any) => ({
@@ -19,13 +22,57 @@ export const useComplainstDataStore = defineStore("complainst", () => {
     }
 
     function selectComplainantTpye(list: any) {
-        console.log(list);
         optionListName.value = list
     }
+
+    const complainantoptionsMain = ref<DataOption[]>()
+    const complainantoptions = ref<DataOption[]>()
+    const agencytoptionsMain = ref<DataOption[]>()
+    const agencytoptions = ref<DataOption[]>()
+    function fectOptioin(complainantoptions: any, agencytoptions: any) {
+        complainantoptionsMain.value = complainantoptions
+        agencytoptionsMain.value = agencytoptions
+
+    }
+    function filterSelector(val: any, update: Function, type: string) {
+        console.log(val, type);
+        let data: DataOption[] | undefined = undefined;
+        let filter: DataOption[] | undefined = undefined;
+        if (type == "filtercomplainantType") {
+            data = complainantoptionsMain.value
+        } else if (type == "filteragencytoptions") {
+            data = agencytoptionsMain.value
+        }
+        if (val == "") {
+            update(() => {
+                filter = data;
+            });
+        } else {
+            update(() => {
+                if (data) {
+                    filter = data.filter(
+                        (e) => e.name.search(val) !== -1
+                    );
+                }
+            });
+        }
+        if (filter) {
+            if (type == "filtercomplainantType") {
+                complainantoptions.value = filter
+            } else if (type = "filteragencytoptions") {
+                agencytoptions.value = filter
+            }
+        }
+
+    }
     return {
         rows,
         optionListName,
         fectComplainst,
-        selectComplainantTpye
+        selectComplainantTpye,
+        filterSelector,
+        fectOptioin,
+        complainantoptions,
+        agencytoptions,
     }
 })
\ No newline at end of file
diff --git a/src/modules/11_discipline/stroes/InvestigateDisStore.ts b/src/modules/11_discipline/stroes/InvestigateDisStore.ts
new file mode 100644
index 000000000..f9396f80c
--- /dev/null
+++ b/src/modules/11_discipline/stroes/InvestigateDisStore.ts
@@ -0,0 +1,69 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+export const useInvestigateDisStore = defineStore("InvestigateDis", () => {
+  const rows = ref<any>([]);
+
+  async function fecthList(data: any) {
+    let datalist = data.map((e: any) => ({
+      subject: e.subject,
+      interrogated: e.interrogated,
+      fault: convertFault(e.fault),
+      penaltyLevel: convertPenaltyLevel(e.penaltyLevel),
+      caseFault: e.caseFault,
+      dateInvestigate: e.dateInvestigate,
+      status: convertSatatus(e.status),
+      active: activeStatus(e.active),
+    }));
+    rows.value = datalist;
+    console.log(rows.value);
+  }
+  function convertFault(val: string) {
+    switch (val) {
+      case "0":
+        return "ความผิดวินัยยังไม่ระบุ";
+      case "1":
+        return "ความผิดวินัยไม่ร้ายแรง";
+      case "2":
+        return "ความผิดวินัยร้ายแรง";
+    }
+  }
+  function convertSatatus(val: string) {
+    switch (val) {
+      case "0":
+        return "เสร็จสิ้นแล้ว";
+      case "1":
+        return "ยุติเรื่อง";
+    }
+  }
+  function activeStatus(val: string) {
+    switch (val) {
+      case "0":
+        return "ยังไม่ได้ยืนยันผล";
+      case "1":
+        return "ยืนยันผลเเล้ว";
+    }
+  }
+  function convertPenaltyLevel(val: string) {
+    switch (val) {
+      case "0":
+        return "ไม่ร้ายแรง";
+      case "1":
+        return "ภาคทัณฑ์";
+      case "3":
+        return "ตัดเงินเดือน";
+      case "4":
+        return "ลดขั้นเงินเดือน";
+      case "5":
+        return "ร้ายแรง";
+      case "6":
+        return "ปลดออก";
+      case "7":
+        return "ไล่ออก";
+    }
+  }
+  return {
+    fecthList,
+    rows,
+  };
+});
diff --git a/src/modules/11_discipline/stroes/OrderStore.ts b/src/modules/11_discipline/stroes/OrderStore.ts
new file mode 100644
index 000000000..e08314fd9
--- /dev/null
+++ b/src/modules/11_discipline/stroes/OrderStore.ts
@@ -0,0 +1,24 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+export const useOrderStore = defineStore("order", () => {
+    const rows = ref<any>([])
+    async function fecthOrder(data: any) {
+        let datalist = data.map((e: any) => ({
+            subject: e.subject,
+            ordernumber: e.ordernumber,
+            dateOrder: e.dateOrder,
+            orderby: e.orderby,
+            signer: e.signer,
+            statusorder: e.statusorder
+
+
+        }))
+        rows.value = datalist
+    }
+
+    return {
+        rows,
+        fecthOrder
+    }
+})
\ No newline at end of file
diff --git a/src/modules/11_discipline/stroes/ReportStore.ts b/src/modules/11_discipline/stroes/ReportStore.ts
new file mode 100644
index 000000000..0ec6fcd20
--- /dev/null
+++ b/src/modules/11_discipline/stroes/ReportStore.ts
@@ -0,0 +1,24 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+export const useReportDataStore = defineStore("report11", () => {
+  interface OptionReport {
+    id: string;
+    title: string;
+  }
+  const optionReport = ref<OptionReport[]>([
+    { id: "1", title: "รายงานเรื่องร้องเรียนแยกรายวัน รายเดือน รายปี"},
+    { id: "2", title: "รายงานเรื่องร้องเรียนข้าราชการสามัญฯ ในสังกัดกรุงเทพมหานคร แยกตามหน่วยงาน" },
+    { id: "3", title: "รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัย แยกตามลักษณะความผิด" },
+    { id: "4", title: "รายงานรายชื่อข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแยกตามลักษณะความผิด" },
+    { id: "5", title: "รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดแยกตามระดับความผิด" },
+    { id: "6", title: "รายงานรายชื่อข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแยกตามลักษณะความผิด" },
+    { id: "7", title: "รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแต่ยุติเรื่อง แยกลักษณะความผิด" },
+    { id: "8", title: "รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแต่ยุติเรื่อง แยกตามตำแหน่ง" },
+  ]);
+
+
+  return {
+    optionReport,
+  };
+});