From b858d2e9a9b886521267dd34fff8d49a91cf5e24 Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Tue, 17 Oct 2023 14:23:23 +0700
Subject: [PATCH] =?UTF-8?q?UI=20=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=87=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=99=E0=B8=82=E0=B8=AD=E0=B8=87=E0=B8=A3=E0=B8=B0=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=9A=E0=B8=87=E0=B8=B2=E0=B8=99=E0=B8=A7=E0=B8=B4=E0=B8=99?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../investigatefactsAdd.vue                   | 130 ++++---
 .../components/5_Report/MainPage.vue          | 145 ++++++-
 .../components/5_Report/reportDetail.vue      | 355 ++++++++++++++++++
 src/modules/11_discipline/router.ts           |  12 +-
 .../11_discipline/stroes/ReportStore.ts       |  24 ++
 5 files changed, 607 insertions(+), 59 deletions(-)
 create mode 100644 src/modules/11_discipline/components/5_Report/reportDetail.vue
 create mode 100644 src/modules/11_discipline/stroes/ReportStore.ts

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/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/router.ts b/src/modules/11_discipline/router.ts
index 419f59ccb..080766527 100644
--- a/src/modules/11_discipline/router.ts
+++ b/src/modules/11_discipline/router.ts
@@ -8,7 +8,7 @@ const report = () => import("@/modules/11_discipline/components/5_Report/MainPag
 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')
 
 export default [
     {
@@ -71,6 +71,16 @@ export default [
             Role: "coin",
         },
     },
+    {
+        path: "/discipline/report/:type",
+        name: "/discipline-reportType",
+        component: reportType,
+        meta: {
+            Auth: true,
+            Key: [11.5],
+            Role: "coin",
+        },
+    },
     {
         path: "/discipline/director",
         name: "/discipline-director",
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,
+  };
+});