From 18d994793692766097f84c755ca5efd7620e5f7e Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 17 Jul 2023 14:56:08 +0700
Subject: [PATCH] =?UTF-8?q?Ui=20=E0=B9=80=E0=B8=84=E0=B8=A3=E0=B8=B7?=
 =?UTF-8?q?=E0=B9=88=E0=B8=AD=E0=B8=87=E0=B8=A3=E0=B8=B2=E0=B8=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ListRetirement/AddList.vue     | 266 ++++++++++++++
 .../components/ListRetirement/TableList.vue   | 329 ++++++++++++++++++
 src/modules/06_retirement/router.ts           |  12 +
 .../components/report/ReportView.vue          |  41 +++
 .../components/report/Report_01.vue           | 280 +++++++++++++++
 src/modules/07_insignia/router.ts             |  23 ++
 6 files changed, 951 insertions(+)
 create mode 100644 src/modules/06_retirement/components/ListRetirement/AddList.vue
 create mode 100644 src/modules/06_retirement/components/ListRetirement/TableList.vue
 create mode 100644 src/modules/07_insignia/components/report/ReportView.vue
 create mode 100644 src/modules/07_insignia/components/report/Report_01.vue

diff --git a/src/modules/06_retirement/components/ListRetirement/AddList.vue b/src/modules/06_retirement/components/ListRetirement/AddList.vue
new file mode 100644
index 000000000..ab3350085
--- /dev/null
+++ b/src/modules/06_retirement/components/ListRetirement/AddList.vue
@@ -0,0 +1,266 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+
+const $q = useQuasar(); //ใช้ noti quasar
+const mixin = useCounterMixin();
+const {} = mixin;
+
+const modal = ref<boolean>(false);
+
+const columns = ref<any["columns"]>([
+  {
+    name: "index",
+    required: true,
+    label: "ลำดับ",
+    field: "index",
+    align: "left",
+  },
+  {
+    name: "fullname",
+    required: true,
+    label: "ชื่อ-สกุล",
+    field: "fullname",
+    align: "left",
+  },
+  {
+    name: "position",
+    required: true,
+    label: "ตำแหน่งในสายงาน",
+    field: "position",
+    align: "left",
+  },
+  {
+    name: "level",
+    required: true,
+    label: "ระดับ",
+    field: "level",
+    align: "left",
+  },
+  {
+    name: "affiliation",
+    required: true,
+    label: "สังกัด",
+    field: "affiliation",
+    align: "left",
+  },
+  {
+    name: "funtion",
+    required: true,
+    label: "",
+    field: "funtion",
+    align: "left",
+  },
+]);
+const rows = ref<any>([
+  {
+    fullname: "นายใจดี  ยอดใจ",
+    position: "นักวิชาการพัสดุ",
+    level: "ปฎิบัติการ",
+    affiliation: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
+  },
+  {
+    fullname: "นายจักกริน  บัณฑิต",
+    position: "นักวิชาการพัสดุ",
+    level: "ปฎิบัติการ",
+    affiliation: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
+  },
+  {
+    fullname: "นายจักกริน  บัณฑิต",
+    position: "นักวิชาการพัสดุ",
+    level: "ปฎิบัติการ",
+    affiliation: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
+  },
+  {
+    fullname: "นายจักกริน  บัณฑิต",
+    position: "นักวิชาการพัสดุ",
+    level: "ปฎิบัติการ",
+    affiliation: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
+  },
+  {
+    fullname: "นายจักกริน  บัณฑิต",
+    position: "นักวิชาการพัสดุ",
+    level: "ปฎิบัติการ",
+    affiliation: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
+  },
+  {
+    fullname: "นายจักกริน  บัณฑิต",
+    position: "นักวิชาการพัสดุ",
+    level: "ปฎิบัติการ",
+    affiliation: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
+  },
+  {
+    fullname: "นายจักกริน  บัณฑิต",
+    position: "นักวิชาการพัสดุ",
+    level: "ปฎิบัติการ",
+    affiliation: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
+  },
+]);
+const filter = ref<string>("");
+const clickAdd = () => {
+  $q.dialog({
+    title: "ยืนยันการเพิ่มข้อมูล",
+    message: "ต้องการเพิ่มข้อมูลนี้ใช่หรือไม่?",
+    cancel: {
+      flat: true,
+      color: "negative",
+    },
+    persistent: true,
+  })
+    .onOk(async () => {
+      console.log("เพิ่มข้อมูล");
+    })
+    .onCancel(() => {})
+    .onDismiss(() => {});
+};
+const paging = ref<boolean>(true);
+const pagination = ref({
+  sortBy: "fullname",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
+const paginationLabel = (start: number, end: number, total: number) => {
+  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
+  else return start + "-" + end + " ใน " + total;
+};
+</script>
+
+<template>
+  <q-btn
+    flat
+    round
+    class="text-teal-5"
+    icon="mdi-plus"
+    size="md"
+    @click="modal = true"
+  ></q-btn>
+
+  <q-dialog v-model="modal">
+    <q-card style="width: 850px; max-width: 80vw" class="q-px-sm q-pb-md">
+      <q-toolbar class="q-py-md">
+        <q-toolbar-title class="header-text text-weight-bolder"
+          >เพิ่มรายชื่อ
+        </q-toolbar-title>
+        <q-btn
+          icon="close"
+          unelevated
+          round
+          dense
+          @click="modal = false"
+          style="color: #ff8080; background-color: #ffdede"
+        />
+      </q-toolbar>
+      <q-separator />
+
+      <div class="q-pa-md">
+        <q-toolbar style="padding: 0">
+          <q-input
+            borderless
+            outlined
+            dense
+            debounce="300"
+            v-model="filter"
+            placeholder="ค้นหา"
+            style="width: 850px; max-width: auto"
+          >
+            <template v-slot:append>
+              <q-icon name="search" />
+            </template>
+          </q-input>
+        </q-toolbar>
+        <q-table
+          flat
+          bordered
+          dense
+          :rows="rows"
+          :columns="columns"
+          row-key="name"
+          class="custom-header-table"
+          :filter="filter"
+          :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"
+                ><div>
+                  <span class="row text-black">{{ col.label }}</span>
+                </div>
+              </q-th>
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td>{{ 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="level" :props="props">{{ props.row.level }}</q-td>
+              <q-td key="affiliation" :props="props">
+                {{ props.row.affiliation }}
+              </q-td>
+
+              <q-td>
+                <q-btn
+                  outline
+                  label="เพิ่ม"
+                  class="text-teal-5"
+                  @click="clickAdd"
+                />
+              </q-td>
+            </q-tr>
+          </template>
+          <template v-slot:pagination="scope">
+            <q-pagination
+              v-model="pagination.page"
+              color="primary"
+              :max="scope.pagesNumber"
+              :max-pages="5"
+              size="sm"
+              boundary-links
+              direction-links
+            ></q-pagination>
+          </template>
+        </q-table>
+      </div>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style lang="scss">
+.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/06_retirement/components/ListRetirement/TableList.vue b/src/modules/06_retirement/components/ListRetirement/TableList.vue
new file mode 100644
index 000000000..a72984356
--- /dev/null
+++ b/src/modules/06_retirement/components/ListRetirement/TableList.vue
@@ -0,0 +1,329 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import AddList from "../ListRetirement/AddList.vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+
+const $q = useQuasar(); //ใช้ noti quasar
+const mixin = useCounterMixin();
+const {} = mixin;
+
+const columns = ref<any["columns"]>([
+  {
+    name: "index",
+    required: true,
+    label: "ลำดับ",
+    field: "index",
+    align: "left",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fixname",
+    align: "left",
+    label: "คำนำหน้านาม",
+    field: "fixname",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อ - นามสกุล",
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "brand",
+    align: "left",
+    label: "สังกัด",
+    field: "brand",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionType",
+    align: "left",
+    label: "ตำแหน่ง",
+    sublabel: "ประเภท",
+    field: "positionType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionManager",
+    align: "left",
+    label: "ตำแหน่ง ",
+    sublabel: "ทางการบริหาร",
+    field: "positionManager",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionLavel",
+    align: "left",
+    label: "ตำแหน่ง ",
+    sublabel: "ในสายงาน/ระดับ",
+    field: "positionLavel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionNumber",
+    align: "left",
+    label: "ตำแหน่ง ",
+    sublabel: "เลขที่",
+    field: "positionNumber",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "govGroup",
+    align: "left",
+    label: "ส่วนราชการ ",
+    sublabel: "ระดับฝ่าย/กลุ่มงาน/ส่วน",
+    field: "govGroup",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "govOffice",
+    align: "left",
+    label: "ส่วนราชการ ",
+    sublabel: "ระดับสถาบัน/สำนักงาน/กอง",
+    field: "govOffice",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "bureau",
+    align: "left",
+    label: "หน่วยงาน",
+    field: "bureau",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "button",
+    align: "left",
+    label: "",
+    field: "",
+  },
+]);
+const rows = ref<any>([
+  {
+    fixname: "นางสาว",
+    name: "รัชภรณ์ ภัคดี",
+    brand: "ฝ่ายบริหารทั่วไป",
+    positionType: "บริหาร",
+    positionManager: "จัดการทั่วไป",
+    positionLavel: "ชำนาญการ",
+    positionNumber: "กบห.2",
+    govGroup: "ฝ่ายบริหารทั่วไป",
+    govOffice: "ฝ่ายบริหารทั่วไป",
+    bureau: "บริหาร",
+  },
+  {
+    fixname: "นางสาว",
+    name: "รัชภรณ์ ภัคดี",
+    brand: "ฝ่ายบริหารทั่วไป",
+    positionType: "บริหาร",
+    positionManager: "จัดการทั่วไป",
+    positionLavel: "ชำนาญการ",
+    positionNumber: "กบห.2",
+    govGroup: "ฝ่ายบริหารทั่วไป",
+    govOffice: "ฝ่ายบริหารทั่วไป",
+    bureau: "บริหาร",
+  },
+  {
+    fixname: "นางสาว",
+    name: "รัชภรณ์ ภัคดี",
+    brand: "ฝ่ายบริหารทั่วไป",
+    positionType: "บริหาร",
+    positionManager: "จัดการทั่วไป",
+    positionLavel: "ชำนาญการ",
+    positionNumber: "กบห.2",
+    govGroup: "ฝ่ายบริหารทั่วไป",
+    govOffice: "ฝ่ายบริหารทั่วไป",
+    bureau: "บริหาร",
+  },
+]);
+const visibleColumns = ref<any>([
+  "fixname",
+  "name",
+  "brand",
+  "positionType",
+  "positionManager",
+  "positionLavel",
+  "positionNumber",
+  "govGroup",
+  "govOffice",
+  "bureau",
+  "button",
+]);
+const filter = ref<string>("");
+
+const clickDelete = () => {
+  $q.dialog({
+    title: "ยืนยันการลบข้อมูล",
+    message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
+    cancel: {
+      flat: true,
+      color: "negative",
+    },
+    persistent: true,
+  })
+    .onOk(async () => {
+      console.log("ลบข้อมูล");
+    })
+    .onCancel(() => {})
+    .onDismiss(() => {});
+};
+</script>
+
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    รายชื่อผู้เกษียณอายุ
+  </div>
+  <div>
+    <q-card class="col-12 q-pa-md">
+      <q-toolbar>
+        <AddList />
+        <q-space />
+        <q-tabs shrink>
+          <q-input
+            borderless
+            outlined
+            dense
+            debounce="300"
+            v-model="filter"
+            placeholder="ค้นหา"
+            style="max-width: 200px"
+            class="q-ml-sm"
+          >
+            <template v-slot:append>
+              <q-icon name="search" />
+            </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="gt-xs q-ml-sm"
+          />
+        </q-tabs>
+      </q-toolbar>
+
+      <div class="q-pa-md">
+        <q-table
+          flat
+          bordered
+          :rows="rows"
+          :columns="columns"
+          row-key="name"
+          class="custom-header-table"
+          hide-bottom
+          :filter="filter"
+          :visible-columns="visibleColumns"
+          no-data-label="ไม่มีข้อมูล"
+        >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                <div class="text-grey-7 text-weight-medium">
+                  <span class="row">{{ col.label }}</span>
+                  <span class="row" style="font-size: 12px">{{
+                    col.sublabel
+                  }}</span>
+                </div>
+              </q-th>
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td>{{ props.rowIndex + 1 }}</q-td>
+              <q-td key="fixname" :props="props">{{ props.row.fixname }}</q-td>
+              <q-td key="name" :props="props">{{ props.row.name }}</q-td>
+              <q-td key="brand" :props="props">{{ props.row.brand }}</q-td>
+              <q-td key="positionType" :props="props">{{
+                props.row.positionType
+              }}</q-td>
+              <q-td key="positionManager" :props="props">{{
+                props.row.positionManager
+              }}</q-td>
+              <q-td key="positionLavel" :props="props">{{
+                props.row.positionLavel
+              }}</q-td>
+              <q-td key="positionNumber" :props="props">{{
+                props.row.positionNumber
+              }}</q-td>
+              <q-td key="govGroup" :props="props">{{
+                props.row.govGroup
+              }}</q-td>
+              <q-td key="govOffice" :props="props">{{
+                props.row.govOffice
+              }}</q-td>
+              <q-td key="bureau" :props="props">{{ props.row.bureau }}</q-td>
+              <q-td>
+                <q-btn
+                  flat
+                  round
+                  class="text-red-14"
+                  icon="mdi-delete"
+                  size="md"
+                  @click="clickDelete"
+                />
+                <q-btn
+                  flat
+                  round
+                  class="text-teal-5"
+                  icon="mdi-eye"
+                  size="md"
+                />
+              </q-td>
+            </q-tr>
+          </template>
+        </q-table>
+      </div>
+    </q-card>
+  </div>
+</template>
+
+<style lang="scss" scope>
+.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;
+  }
+  .q-table thead tr:last-child th {
+    top: 48px;
+  }
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>
diff --git a/src/modules/06_retirement/router.ts b/src/modules/06_retirement/router.ts
index fea3f32d4..150811ec8 100644
--- a/src/modules/06_retirement/router.ts
+++ b/src/modules/06_retirement/router.ts
@@ -3,6 +3,8 @@
  */
 
 const Main = () => import("@/modules/06_retirement/views/Main.vue");
+const Listretirement = () => import("@/modules/06_retirement/components/ListRetirement/TableList.vue")
+
 
 export default [
   {
@@ -15,4 +17,14 @@ export default [
       Role: "retirement",
     },
   },
+  {
+    path: "/retirement/list",
+    name: "retirement/list",
+    component: Listretirement,
+    meta: {
+      Auth: true,
+      Key: [7.1],
+      Role: "retirement",
+    },
+  },
 ];
diff --git a/src/modules/07_insignia/components/report/ReportView.vue b/src/modules/07_insignia/components/report/ReportView.vue
new file mode 100644
index 000000000..9813b7580
--- /dev/null
+++ b/src/modules/07_insignia/components/report/ReportView.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    รางงานเครื่องราชอิสริยาภรณ์
+  </div>
+  <div>
+    <q-card flat bordered class="col-12 q-mt-sm">
+      <div class="q-pa-md">
+        <q-item to="/insignia/report/report-01" dense>
+          <q-item-section avatar>
+            <q-icon color="primary" name="mdi-file" size="xs" />
+          </q-item-section>
+          <q-item-section class="text-dark">
+            รายงาน ขร.1 - ขร.4
+          </q-item-section>
+        </q-item>
+
+        <q-item to="/" dense>
+          <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 to="/" dense>
+          <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>
+    </q-card>
+  </div>
+</template>
+
+<style lang="scss" scope></style>
diff --git a/src/modules/07_insignia/components/report/Report_01.vue b/src/modules/07_insignia/components/report/Report_01.vue
new file mode 100644
index 000000000..7f5505edf
--- /dev/null
+++ b/src/modules/07_insignia/components/report/Report_01.vue
@@ -0,0 +1,280 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { VuePDF, usePDF } from "@tato30/vue-pdf";
+
+const pdfSrc = ref<any>();
+const numOfPages = ref<number>(0);
+const page = ref<number>(1);
+const dialog = ref<boolean>(false);
+onMounted(async () => {
+  const pdfData = usePDF(
+    "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
+  );
+
+  setTimeout(() => {
+    pdfSrc.value = pdfData.pdf.value;
+    numOfPages.value = pdfData.pages.value;
+  }, 1000);
+  console.log(pdfData);
+});
+
+const splitterModel = ref(14);
+const selectReport = ref<any>({ id: 1, name: "รายงานขร.1" });
+const optionsReport = ref<any>([
+  { id: 1, name: "รายงานขร.1" },
+  { id: 2, name: "รายงานขร.2" },
+  { id: 3, name: "รายงานขร.3" },
+  { id: 4, name: "รายงานขร.4" },
+]);
+const selectList = ref<any>({ id: 0, name: "เลือกกรอบการยื่นขอ" });
+const optionsList = ref<any>([
+  { id: 1, name: "list 1" },
+  { id: 2, name: "list 2" },
+]);
+const nextPage = () => {
+  if (page.value < numOfPages.value) {
+    page.value++;
+  }
+};
+const backPage = () => {
+  if (page.value !== 1) {
+    page.value--;
+  }
+};
+
+const backHistory = () => {
+  window.history.back();
+};
+</script>
+
+<template>
+  <div class="toptitle">
+    <q-btn
+      icon="mdi-arrow-left"
+      unelevated
+      round
+      dense
+      flat
+      color="primary"
+      class="q-mr-sm"
+      @click="backHistory"
+    />
+    รายงาน ขร.1 - ขร.4
+  </div>
+  <div>
+    <q-card flat bordered class="col-12 q-mt-sm">
+      <div class="q-pa-md q-gutter-y-md">
+        <q-toolbar style="padding: 0" >
+          <q-select
+            class="q-mr-sm"
+            dense
+            outlined
+            v-model="selectReport"
+            :options="optionsReport"
+            :label="optionsReport.name"
+            option-value="id"
+            option-label="name"
+          />
+          <q-select
+            dense
+            outlined
+            v-model="selectList"
+            :options="optionsList"
+            :label="optionsList.name"
+            option-value="id"
+            option-label="name"
+          />
+          <q-space />
+          <div class="q-pa-ms q-gutter-sm" style="padding: 0">
+            <q-btn outline color="primary" icon="download" label="ดาวน์โหลด" />
+            <q-btn icon="mdi-eye" color="primary" label="แสดงรางงาน" />
+            <q-btn
+              color="primary"
+              icon="mdi-fullscreen"
+              @click="dialog = true"
+            />
+          </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-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>
+          <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>
+
+  <!-- Dialog Full Screen -->
+  <q-dialog
+    v-model="dialog"
+    persistent
+    :maximized="true"
+    transition-show="slide-up"
+    transition-hide="slide-down"
+  >
+    <q-card class="bg-white">
+      <div class="flex justify-end items-center align-center q-mr-md q-mt-sm">
+        <q-btn
+          icon="close"
+          unelevated
+          round
+          dense
+          style="color: #ff8080; background-color: #ffdede"
+          size="12px"
+          v-close-popup
+        />
+      </div>
+      <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 class="row items- items-center">
+          <VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
+        </div>
+        <div class="row items- items-end">
+          <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>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style lang="scss" scope>
+.disabled {
+  pointer-events: none;
+}
+</style>
diff --git a/src/modules/07_insignia/router.ts b/src/modules/07_insignia/router.ts
index 20a41a5c3..efa168707 100644
--- a/src/modules/07_insignia/router.ts
+++ b/src/modules/07_insignia/router.ts
@@ -3,6 +3,8 @@
  */
 
 const Main = () => import("@/modules/07_insignia/views/Main.vue");
+const ReportView = () => import("../07_insignia/components/report/ReportView.vue")
+const report_01 = () => import("../07_insignia/components/report/Report_01.vue")
 
 export default [
   {
@@ -15,4 +17,25 @@ export default [
       Role: "insignia",
     },
   },
+  {
+    path: "/insignia/report",
+    name: "insignia-report",
+    component: ReportView,
+    meta: {
+      Auth: true,
+      Key: [7.1],
+      Role: "insignia",
+    },
+  },
+  {
+    path: "/insignia/report/report-01",
+    name: "insignia-report-report-01",
+    component: report_01,
+    meta: {
+      Auth: true,
+      Key: [7.1],
+      Role: "insignia",
+    },
+  },
+
 ];