From 016970dc9e4b08156d6f727c2418fbb94c4540a1 Mon Sep 17 00:00:00 2001
From: Thanit Konmek <thanit@frappet.com>
Date: Mon, 28 Aug 2023 11:27:08 +0700
Subject: [PATCH] =?UTF-8?q?mock=20api=20=E0=B8=A3=E0=B8=B2=E0=B8=A2?=
 =?UTF-8?q?=E0=B8=87=E0=B8=B2=E0=B8=99=20=E0=B9=80=E0=B8=84=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B7=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

---
 src/api/07_insignia/api.insignia.ts           |  83 +++--
 .../07_insignia/components/2_Manage/Tab1.vue  | 337 +++++++++++++++---
 .../components/2_Manage/listManage.vue        | 290 ++++++++++-----
 .../components/report/ReportView.vue          |  67 +++-
 .../components/report/Report_01.vue           |  78 +++-
 .../components/report/Report_02.vue           | 304 ++++++++++++++++
 src/modules/07_insignia/router.ts             |  14 +-
 src/modules/07_insignia/store.ts              |  59 +--
 .../coinReport/coinReportDetail.vue           |  12 +-
 .../components/coinReport/coinReportMain.vue  |   7 +-
 10 files changed, 1046 insertions(+), 205 deletions(-)
 create mode 100644 src/modules/07_insignia/components/report/Report_02.vue

diff --git a/src/api/07_insignia/api.insignia.ts b/src/api/07_insignia/api.insignia.ts
index f125dfe64..75a81e324 100644
--- a/src/api/07_insignia/api.insignia.ts
+++ b/src/api/07_insignia/api.insignia.ts
@@ -3,27 +3,37 @@
  */
 import env from "../index";
 const insignia = `${env.API_URI}/insignia`;
-const Organization = `${env.API_URI}/Organization`
+const report = `${env.API_URI}/report`;
+const Organization = `${env.API_URI}/Organization`;
 export default {
   getRoundInsignia: (id: string) => `${insignia}/period/${id}`,
   listRoundInsignia: () => `${insignia}/period/`,
   editRoundInsignia: (id: string) => `${insignia}/period/${id}`,
   RoundInsignia: (id: string) => `${insignia}/period/${id}`,
-  requestInsignia: (insigniaPeriodId: string) => `${insignia}/request/${insigniaPeriodId}`,
+  requestInsignia: (insigniaPeriodId: string) =>
+    `${insignia}/request/${insigniaPeriodId}`,
   // Type
   typeOc: () => `${Organization}/history/type/หน่วยงาน`,
 
-
   // manage
   insigniaManage: (type: string) => `${insignia}/manage/${type}`,
   insigniaCreate: () => `${insignia}/request`,
-  insigniaList: (insigniaPeriodId: any, ocId: string, role: string, status: any) => `${insignia}/request/${insigniaPeriodId}/${ocId}/${role}/${status}`,
-  insigniaReject: (profileId: string) => `${insignia}/request/status/reject/${profileId}`,
-  insigniaDelete: (profileId: string) => `${insignia}/request/status/delete/${profileId}`,
+  insigniaList: (
+    insigniaPeriodId: any,
+    ocId: string,
+    role: string,
+    status: any
+  ) => `${insignia}/request/${insigniaPeriodId}/${ocId}/${role}/${status}`,
+  insigniaReject: (profileId: string) =>
+    `${insignia}/request/status/reject/${profileId}`,
+  insigniaDelete: (profileId: string) =>
+    `${insignia}/request/status/delete/${profileId}`,
   insigniaEdit: (profileId: string) => `${insignia}/request/${profileId}`,
-  insigniaNosend: (insigniaPeriodId: any) => `${insignia}/request/org/no-send/${insigniaPeriodId}`,
+  insigniaNosend: (insigniaPeriodId: any) =>
+    `${insignia}/request/org/no-send/${insigniaPeriodId}`,
   insigniaAgency: () => `${insignia}/request/agency`,
-  insigniaDashboard: (insigniaPeriodId: string) => `${insignia}/request/dashboard/${insigniaPeriodId}`,
+  insigniaDashboard: (insigniaPeriodId: string) =>
+    `${insignia}/request/dashboard/${insigniaPeriodId}`,
   // record
   noteround: () => `${insignia}/request/note`,
   requestDocNote: (id: string) => `${insignia}/request/note/doc/${id}`,
@@ -31,31 +41,58 @@ export default {
   noteAdd: (insigniaId: string) => `${insignia}/request/note/${insigniaId}`,
   noteByid: (id: string) => `${insignia}/request/note/${id}`,
 
+  insigniaSendToDirector: (roundId: string, ocId: string) =>
+    `${insignia}/request/officer/approve/${roundId}/${ocId}`,
+  insigniaDirectorBackToEdit: (roundId: string, ocId: string) =>
+    `${insignia}/request/director/reject/${roundId}/${ocId}`,
+  insigniaDirectorApproved: (roundId: string, ocId: string) =>
+    `${insignia}/request/director/approve/${roundId}/${ocId}`,
+  insigniaRequestSendNote: (insigniaPeriodId: string) =>
+    `${insignia}/request/send/note/${insigniaPeriodId}`,
 
-  insigniaSendToDirector: (roundId: string, ocId: string) => `${insignia}/request/officer/approve/${roundId}/${ocId}`,
-  insigniaDirectorBackToEdit: (roundId: string, ocId: string) => `${insignia}/request/director/reject/${roundId}/${ocId}`,
-  insigniaDirectorApproved: (roundId: string, ocId: string) => `${insignia}/request/director/approve/${roundId}/${ocId}`,
-  insigniaRequestSendNote: (insigniaPeriodId: string) => `${insignia}/request/send/note/${insigniaPeriodId}`,
-  
   // insigniaRequestSendNote: (insigniaPeriodId: string) => `${insignia}/insignia/request/send/note/${insigniaPeriodId}`,
 
   // uploadfile
-  uploadfileInsignia: (type: string, noteId: string) => `${insignia}/request/import/${type}/${noteId}`,
-  previewfileInsignia: (type: string,noteId: string) => `${insignia}/request/preview/${type}/${noteId}`,
+  uploadfileInsignia: (type: string, noteId: string) =>
+    `${insignia}/request/import/${type}/${noteId}`,
+  previewfileInsignia: (type: string, noteId: string) =>
+    `${insignia}/request/preview/${type}/${noteId}`,
   // uploadfileinvoice: (noteId: string) => `${insignia}/request/import/invoice/${noteId}`,
 
   // จัดสรรเครื่องราช
-  insigniaManageType: (insigniaTypeId: string, year: number) => `${insignia}/manage/type/${year}/${insigniaTypeId}`,
+  insigniaManageType: (insigniaTypeId: string, year: number) =>
+    `${insignia}/manage/type/${year}/${insigniaTypeId}`,
   insigniaManageAdd: () => `${insignia}/manage`,
-  insigniaManageById: (insigniaManageId: string) => `${insignia}/manage/${insigniaManageId}`,
+  insigniaManageById: (insigniaManageId: string) =>
+    `${insignia}/manage/${insigniaManageId}`,
 
-  insigniaManageOrg: (insigniaManageId: string) => `${insignia}/manage/org/${insigniaManageId}`,
+  insigniaManageOrg: (insigniaManageId: string) =>
+    `${insignia}/manage/org/${insigniaManageId}`,
   insigniaManageOrgAdd: () => `${insignia}/manage/org`,
-  insigniaManageOrgDashboard: (insigniaManageId: string) => `${insignia}/manage/org/dashboard/${insigniaManageId}`,
+  insigniaManageOrgDashboard: (insigniaManageId: string) =>
+    `${insignia}/manage/org/dashboard/${insigniaManageId}`,
 
   // ยืม-คืนเครื่องราชฯ
   insigniaManageBorrow: () => `${insignia}/manage/borrow`,
-  insigniaManageBorrowReturn: (insigniaManageProfileId: string) => `${insignia}/manage/return/${insigniaManageProfileId}`,
-  insigniaManageBorrowList: (year: number, insigniaTypeId: string) => `${insignia}/manage/borrow/${year}/${insigniaTypeId}`,
-  insigniaManageBorrowById: (insigniaManageProfileId: string) => `${insignia}/manage/borrow/${insigniaManageProfileId}`,
-};
\ No newline at end of file
+  insigniaManageBorrowReturn: (insigniaManageProfileId: string) =>
+    `${insignia}/manage/return/${insigniaManageProfileId}`,
+  insigniaManageBorrowList: (year: number, insigniaTypeId: string) =>
+    `${insignia}/manage/borrow/${year}/${insigniaTypeId}`,
+  insigniaManageBorrowById: (insigniaManageProfileId: string) =>
+    `${insignia}/manage/borrow/${insigniaManageProfileId}`,
+
+  // InsigniaReport API รายงานระบบเครื่องราชอิสริยาภรณ์
+  // ******
+  // type = 39 : 39-แบบ ขร1 บัญชีแสดงจำนวนชั้นตราเครื่องราชฯ ข้าราชการ ชั้นสายสะพาย
+  // type = 40 : 40-แบบ ขร2 บัญชีแสดงจำนวนชั้นตราเครื่องราชฯ ข้าราชการ ชั้นต่ำกว่าสายสะพาย
+  // type = 41 : 41-แบบ ขร3 บัญชีรายชื่อข้าราชการผู้ขอพระราชทานเครื่องราชฯ
+  // type = 42 : 42-แบบ ขร4 บัญชีแสดงคุณสมบัติของข้าราชการซึ่งเสนอขอเครื่องราชฯ
+  // type = 43 : 43-บัญชีระดับผลการประเมินผลการปฏิบัติราชการในรอบ 5 ปี
+  // type = 44 : 44-บัญชีแสดงจำนวนชั้นตราเครื่องราชฯ
+  // type = 45 : 45-บัญชีแสดงรายชื่อผู้ขอพระราชทานเหรียญจักรพรรดิมาลา
+  // type = 46 : 46-ประวัติสำหรับการเสนอขอพระราชทานเหรียญจักรพรรดิมาลา
+  // ******
+  //   fileType = pdf, docx หรือ xlsx
+  reportInsignia: (type: string, fileType: string, fileId: string) =>
+    `${report}/insignia/${type}/${fileType}/${fileId}`,
+};
diff --git a/src/modules/07_insignia/components/2_Manage/Tab1.vue b/src/modules/07_insignia/components/2_Manage/Tab1.vue
index f8e181788..1d0a8fc92 100644
--- a/src/modules/07_insignia/components/2_Manage/Tab1.vue
+++ b/src/modules/07_insignia/components/2_Manage/Tab1.vue
@@ -30,6 +30,8 @@ const modalAdd = ref<boolean>(false);
 const modalEdit = ref<boolean>(false);
 const rowid = ref<string>("");
 const organization = ref<string>("");
+const fileId = ref<string>("");
+
 const organizationOptions = ref<any>([{ id: "1", name: "ทั้งหมด" }]);
 const visibleColumns = ref<string[]>([
   "no",
@@ -196,7 +198,7 @@ const props = defineProps({
   },
   requestStatus: {
     type: String,
-  }
+  },
 });
 
 onMounted(async () => {
@@ -344,6 +346,36 @@ const clickmodalEdit = (props: any) => {
   // fecthInsigniaType();
 };
 
+const downloadFile = (response: any, filename: string) => {
+  const link = document.createElement("a");
+  var fileName = filename;
+  link.href = window.URL.createObjectURL(new Blob([response.data]));
+  link.setAttribute("download", fileName);
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+};
+
+const downloadReport = async (type: string = "pdf") => {
+  showLoader();
+  await http
+    .get(config.API.reportInsignia("45", type, fileId.value), {
+      responseType: "blob",
+    })
+    .then(async (res) => {
+      downloadFile(
+        res,
+        `บัญชีแสดงรายชื่อผู้ขอพระราชทานเหรียญจักรพรรดิมาลา.${type}`
+      );
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
 const clickSave = () => {
   dialogConfirm(
     $q,
@@ -525,40 +557,120 @@ const paginationLabel2 = (start: number, end: number, total: number) => {
     <div class="row col-12">
       <div class="row col-12 q-col-gutter-sm">
         <!-- {{ DataStore.typeinsigniaOptions }} -->
-        <q-select v-if="props.roleUser == 'admin'" v-model="organization" label="หน่วยงาน" dense emit-value map-options
-          :options="organizationOptions" option-value="id" option-label="name" lazy-rules hide-bottom-space
-          :readonly="false" :borderless="false" :outlined="true" :hide-dropdown-icon="false" style="min-width: 150px"
-          @update:model-value="changtypeOc" />
-        <q-select v-model="DataStore.typeinsignia" label="ปรเภทเครื่องราชฯ" dense emit-value map-options
-          :options="DataStore.typeinsigniaOptions" option-value="id" option-label="name" lazy-rules hide-bottom-space
-          :readonly="false" :borderless="false" :outlined="true" :hide-dropdown-icon="false" style="min-width: 150px"
-          @update:model-value="DataStore.searchFilterTable" />
+        <q-select
+          v-if="props.roleUser == 'admin'"
+          v-model="organization"
+          label="หน่วยงาน"
+          dense
+          emit-value
+          map-options
+          :options="organizationOptions"
+          option-value="id"
+          option-label="name"
+          lazy-rules
+          hide-bottom-space
+          :readonly="false"
+          :borderless="false"
+          :outlined="true"
+          :hide-dropdown-icon="false"
+          style="min-width: 150px"
+          @update:model-value="changtypeOc"
+        />
+        <q-select
+          v-model="DataStore.typeinsignia"
+          label="ปรเภทเครื่องราชฯ"
+          dense
+          emit-value
+          map-options
+          :options="DataStore.typeinsigniaOptions"
+          option-value="id"
+          option-label="name"
+          lazy-rules
+          hide-bottom-space
+          :readonly="false"
+          :borderless="false"
+          :outlined="true"
+          :hide-dropdown-icon="false"
+          style="min-width: 150px"
+          @update:model-value="DataStore.searchFilterTable"
+        />
         <div>
-          <q-btn size="md" icon="mdi-download" flat round color="primary">
+          <q-btn
+            size="md"
+            icon="mdi-download"
+            flat
+            round
+            color="primary"
+            @click="downloadReport('pdf')"
+          >
             <q-tooltip>ดาวน์โหลด</q-tooltip>
           </q-btn>
-          <q-btn size="12px" flat round color="add" icon="mdi-plus" @click="clickmodalAdd">
+          <q-btn
+            size="12px"
+            flat
+            round
+            color="add"
+            icon="mdi-plus"
+            @click="clickmodalAdd"
+          >
             <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="ค้นหา">
+        <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" />
+            <q-icon
+              v-if="filterKeyword !== ''"
+              name="clear"
+              class="cursor-pointer"
+              @click="resetFilter"
+            />
           </template>
         </q-input>
 
-        <q-select v-model="visibleColumns" multiple outlined dense options-dense :display-value="$q.lang.table.columns"
-          emit-value map-options :options="columns" option-value="name" options-cover style="min-width: 150px"
-          class="col-xs-12 col-sm-3 col-md-2" />
+        <q-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-pt-sm">
-        <q-table ref="table" :columns="columns" :rows="DataStore.rows" :filter="filterKeyword" row-key="name" flat
-          bordered :paging="true" dense class="custom-header-table" :visible-columns="visibleColumns"
-          :pagination-label="paginationLabel" v-model:pagination="pagination">
+        <q-table
+          ref="table"
+          :columns="columns"
+          :rows="DataStore.rows"
+          :filter="filterKeyword"
+          row-key="name"
+          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">
@@ -568,7 +680,11 @@ const paginationLabel2 = (start: number, end: number, total: number) => {
             </q-tr>
           </template>
           <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer" @click.stop="nextPage(props.row.profileId)">
+            <q-tr
+              :props="props"
+              class="cursor-pointer"
+              @click.stop="nextPage(props.row.profileId)"
+            >
               <q-td key="no" :props="props">
                 {{ props.rowIndex + 1 }}
               </q-td>
@@ -600,26 +716,68 @@ const paginationLabel2 = (start: number, end: number, total: number) => {
                 {{ props.row.dateSend }}
               </q-td>
               <q-td auto-width>
-                <q-btn v-if="(roleUser == 'admin') || (roleUser == 'insignia1' && (requestStatus == 'st1' || requestStatus == 'st4'))" icon="mdi-dots-vertical" size="12px"
-                  color="grey-7" flat round dense @click.stop>
+                <q-btn
+                  v-if="
+                    roleUser == 'admin' ||
+                    (roleUser == 'insignia1' &&
+                      (requestStatus == 'st1' || requestStatus == 'st4'))
+                  "
+                  icon="mdi-dots-vertical"
+                  size="12px"
+                  color="grey-7"
+                  flat
+                  round
+                  dense
+                  @click.stop
+                >
                   <q-menu transition-show="jump-down" transition-hide="jump-up">
                     <q-list dense style="min-width: 250px">
-                      <q-item clickable v-close-popup @click.stop="clickmodalEdit(props.row)">
-                        <q-item-section style="min-width: 0px" avatar class="q-py-sm">
+                      <q-item
+                        clickable
+                        v-close-popup
+                        @click.stop="clickmodalEdit(props.row)"
+                      >
+                        <q-item-section
+                          style="min-width: 0px"
+                          avatar
+                          class="q-py-sm"
+                        >
                           <q-tooltip>แก้ไขเครื่องราชฯ ที่ยื่นขอ</q-tooltip>
                           <q-icon color="primary" size="xs" name="mdi-pencil" />
                         </q-item-section>
-                        <q-item-section>แก้ไขเครื่องราชฯ ที่ยื่นขอ</q-item-section>
+                        <q-item-section
+                          >แก้ไขเครื่องราชฯ ที่ยื่นขอ</q-item-section
+                        >
                       </q-item>
-                      <q-item clickable v-close-popup @click.stop="clickReject(props.row.id)">
-                        <q-item-section style="min-width: 0px" avatar class="q-py-sm">
+                      <q-item
+                        clickable
+                        v-close-popup
+                        @click.stop="clickReject(props.row.id)"
+                      >
+                        <q-item-section
+                          style="min-width: 0px"
+                          avatar
+                          class="q-py-sm"
+                        >
                           <q-tooltip>ไม่ยื่นขอ</q-tooltip>
-                          <q-icon color="blue" size="xs" name="mdi-alert-circle-outline" />
+                          <q-icon
+                            color="blue"
+                            size="xs"
+                            name="mdi-alert-circle-outline"
+                          />
                         </q-item-section>
                         <q-item-section>ไม่ยื่นขอ</q-item-section>
                       </q-item>
-                      <q-item clickable v-close-popup @click.stop="clickDelete(props.row.id)">
-                        <q-item-section style="min-width: 0px" avatar class="q-py-sm">
+                      <q-item
+                        clickable
+                        v-close-popup
+                        @click.stop="clickDelete(props.row.id)"
+                      >
+                        <q-item-section
+                          style="min-width: 0px"
+                          avatar
+                          class="q-py-sm"
+                        >
                           <q-tooltip>ลบออก</q-tooltip>
                           <q-icon color="red" size="xs" name="mdi-delete" />
                         </q-item-section>
@@ -632,8 +790,16 @@ const paginationLabel2 = (start: number, end: number, total: number) => {
             </q-tr>
           </template>
           <template v-slot:pagination="scope">
-            <q-pagination v-model="pagination.page" active-color="primary" color="primary" :max="scope.pagesNumber"
-              :max-pages="5" size="sm" boundary-links direction-links></q-pagination>
+            <q-pagination
+              v-model="pagination.page"
+              active-color="primary"
+              color="primary"
+              :max="scope.pagesNumber"
+              :max-pages="5"
+              size="sm"
+              boundary-links
+              direction-links
+            ></q-pagination>
           </template>
         </q-table>
       </div>
@@ -645,21 +811,44 @@ const paginationLabel2 = (start: number, end: number, total: number) => {
     <q-card style="width: 850px; max-width: 80vw" class="q-pb-md">
       <q-toolbar class="q-py-md">
         <q-toolbar-title class="text-h6">เพิ่มรายชื่อ </q-toolbar-title>
-        <q-btn icon="close" unelevated round dense @click="modalAdd = false"
-          style="color: #ff8080; background-color: #ffdede" />
+        <q-btn
+          icon="close"
+          unelevated
+          round
+          dense
+          @click="modalAdd = 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" placeholder="ค้นหา" style="width: 850px; max-width: auto"
-            v-model="filterKeyword2">
+          <q-input
+            borderless
+            outlined
+            dense
+            debounce="300"
+            placeholder="ค้นหา"
+            style="width: 850px; max-width: auto"
+            v-model="filterKeyword2"
+          >
             <template v-slot:append>
               <q-icon name="search" />
             </template>
           </q-input>
         </q-toolbar>
-        <q-table flat bordered dense :rows="rows2" :columns="columns2" :filter="filterKeyword2" row-key="name"
-          class="custom-header-table" :pagination-label="paginationLabel2" v-model:pagination="pagination2">
+        <q-table
+          flat
+          bordered
+          dense
+          :rows="rows2"
+          :columns="columns2"
+          :filter="filterKeyword2"
+          row-key="name"
+          class="custom-header-table"
+          :pagination-label="paginationLabel2"
+          v-model:pagination="pagination2"
+        >
           <template v-slot:header="props">
             <q-tr :props="props">
               <q-th v-for="col in props.cols" :key="col.name" :props="props">
@@ -685,14 +874,27 @@ const paginationLabel2 = (start: number, end: number, total: number) => {
                 {{ props.row.organizationOrganization }}
               </q-td>
               <q-td>
-                <q-btn outline :props="props" label="เพิ่ม" class="text-teal-5" @click="clickAdd(props.row.id)" />
+                <q-btn
+                  outline
+                  :props="props"
+                  label="เพิ่ม"
+                  class="text-teal-5"
+                  @click="clickAdd(props.row.id)"
+                />
                 <q-tooltip>เพิ่ม</q-tooltip>
               </q-td>
             </q-tr>
           </template>
           <template v-slot:pagination="scope">
-            <q-pagination v-model="pagination2.page" color="primary" :max="scope.pagesNumber" :max-pages="5" size="sm"
-              boundary-links direction-links></q-pagination>
+            <q-pagination
+              v-model="pagination2.page"
+              color="primary"
+              :max="scope.pagesNumber"
+              :max-pages="5"
+              size="sm"
+              boundary-links
+              direction-links
+            ></q-pagination>
           </template>
         </q-table>
       </div>
@@ -703,18 +905,39 @@ const paginationLabel2 = (start: number, end: number, total: number) => {
   <q-dialog v-model="modalEdit" persistent>
     <q-card style="width: 450px; max-width: 80vw" class="q-pb-md">
       <q-toolbar class="q-py-md">
-        <q-toolbar-title class="text-h6">แก้ไขเครื่องราชฯ ที่ยื่นขอ
+        <q-toolbar-title class="text-h6"
+          >แก้ไขเครื่องราชฯ ที่ยื่นขอ
         </q-toolbar-title>
-        <q-btn icon="close" unelevated round dense @click="modalEdit = false"
-          style="color: #ff8080; background-color: #ffdede" />
+        <q-btn
+          icon="close"
+          unelevated
+          round
+          dense
+          @click="modalEdit = false"
+          style="color: #ff8080; background-color: #ffdede"
+        />
       </q-toolbar>
       <q-separator />
       <div class="q-pa-md">
         <div class="row q-col-gutter-sm">
           <div class="col">
-            <q-select v-model="insignia" label="ชื่อเครื่องราชฯ" dense emit-value map-options :options="insigniaOptions"
-              option-value="id" option-label="name" lazy-rules hide-bottom-space :readonly="false" :borderless="false"
-              :outlined="true" :hide-dropdown-icon="false" style="min-width: 150px" />
+            <q-select
+              v-model="insignia"
+              label="ชื่อเครื่องราชฯ"
+              dense
+              emit-value
+              map-options
+              :options="insigniaOptions"
+              option-value="id"
+              option-label="name"
+              lazy-rules
+              hide-bottom-space
+              :readonly="false"
+              :borderless="false"
+              :outlined="true"
+              :hide-dropdown-icon="false"
+              style="min-width: 150px"
+            />
           </div>
           <!-- <div class="col">
             <q-select
@@ -746,10 +969,20 @@ const paginationLabel2 = (start: number, end: number, total: number) => {
     </q-card>
   </q-dialog>
 
-  <DialogPopupReason :modal="modelPopupReject" title="เหตุผลไม่ยื่นของ" label="หมายเหตุ"
-    :click-close="closemodelPopupReject" :savaForm="savaReasonReject" />
-  <DialogPopupReason :modal="modelPopupDelete" title="เหตุผลที่ลบออก" label="หมายเหตุ"
-    :click-close="closemodelPopupDelete" :savaForm="savaReasonDelete" />
+  <DialogPopupReason
+    :modal="modelPopupReject"
+    title="เหตุผลไม่ยื่นของ"
+    label="หมายเหตุ"
+    :click-close="closemodelPopupReject"
+    :savaForm="savaReasonReject"
+  />
+  <DialogPopupReason
+    :modal="modelPopupDelete"
+    title="เหตุผลที่ลบออก"
+    label="หมายเหตุ"
+    :click-close="closemodelPopupDelete"
+    :savaForm="savaReasonDelete"
+  />
 
   <!-- note -->
   <!-- <q-dialog v-model="modalNote" persistent>
diff --git a/src/modules/07_insignia/components/2_Manage/listManage.vue b/src/modules/07_insignia/components/2_Manage/listManage.vue
index e64ca6e70..6c27b1bc3 100644
--- a/src/modules/07_insignia/components/2_Manage/listManage.vue
+++ b/src/modules/07_insignia/components/2_Manage/listManage.vue
@@ -20,14 +20,14 @@ const roleUser = ref<string>("admin");
 
 const DataStore = useInsigniaDataStore();
 const mixin = useCounterMixin();
-const { messageError, dialogConfirm, showLoader, hideLoader, success } =
-  mixin;
+const { messageError, dialogConfirm, showLoader, hideLoader, success } = mixin;
 const router = useRouter();
 const $q = useQuasar(); //ใช้ noti quasar
 
 const loading = ref<boolean>(false);
 const round = ref<string>("");
 const roundName = ref<string>("");
+
 const optionRound = ref<any>([]);
 // const typeOc = ref<string>("kljkljk");
 const optiontypeOc = ref<any>([]);
@@ -143,8 +143,12 @@ const changround = async () => {
     : DataStore.typeOc);
   fecthInsigniaByOc(round.value, organization, "officer", tab.value);
   // get round name
-  const roundFilter = await optionRound.value.find((x: any) => round.value === x.id)
-  roundName.value = `รอบการเสนอขอพระราชทานเครื่องราชปี ${roundFilter.year + 543}`
+  const roundFilter = await optionRound.value.find(
+    (x: any) => round.value === x.id
+  );
+  roundName.value = `รอบการเสนอขอพระราชทานเครื่องราชปี ${
+    roundFilter.year + 543
+  }`;
 };
 // const fecthInsigniaAll = async (periodId: string, tab: string) => {
 //   // let data: any = [];
@@ -161,8 +165,8 @@ const changround = async () => {
 //   // }
 //   // console.log(data);
 // };
-const requestNote = ref<string>("")
-const requestStatus = ref<string>("")
+const requestNote = ref<string>("");
+const requestStatus = ref<string>("");
 const fecthInsigniaByOc = async (
   roundId: string,
   ocId: string,
@@ -191,33 +195,36 @@ const fecthInsigniaByOc = async (
 };
 
 const sendToDirector = async () => {
-  dialogConfirm(
-    $q,
-    async () => {
-      showLoader();
-      await http
-        .get(config.API.insigniaSendToDirector(round.value, DataStore.agency))
-        .then(async () => {
-          success($q, "บันทึกสำเร็จ");
-          await fecthInsigniaByOc(round.value, DataStore.agency, "officer", tab.value);
-        })
-        .catch((err) => {
-          // console.log(err);
-          messageError($q, err);
-        })
-        .finally(() => {
-          hideLoader();
-        });
-    });
+  dialogConfirm($q, async () => {
+    showLoader();
+    await http
+      .get(config.API.insigniaSendToDirector(round.value, DataStore.agency))
+      .then(async () => {
+        success($q, "บันทึกสำเร็จ");
+        await fecthInsigniaByOc(
+          round.value,
+          DataStore.agency,
+          "officer",
+          tab.value
+        );
+      })
+      .catch((err) => {
+        // console.log(err);
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
 };
 
 const modalPopupBackToEdit = ref<boolean>(false);
 const popupBackToEdit = async () => {
   modalPopupBackToEdit.value = true;
-}
+};
 const closeModalPopupBackToEdit = async () => {
   modalPopupBackToEdit.value = false;
-}
+};
 
 const backToEdit = async (reason: string) => {
   dialogConfirm(
@@ -225,24 +232,33 @@ const backToEdit = async (reason: string) => {
     async () => {
       showLoader();
       await http
-        .put(config.API.insigniaDirectorBackToEdit(round.value, DataStore.agency), {
-          reason: reason
-        })
+        .put(
+          config.API.insigniaDirectorBackToEdit(round.value, DataStore.agency),
+          {
+            reason: reason,
+          }
+        )
         .then(async () => {
           success($q, "บันทึกสำเร็จ");
-          await fecthInsigniaByOc(round.value, DataStore.agency, "officer", tab.value);
+          await fecthInsigniaByOc(
+            round.value,
+            DataStore.agency,
+            "officer",
+            tab.value
+          );
         })
         .catch((err) => {
           // console.log(err);
           messageError($q, err);
         })
         .finally(() => {
-          closeModalPopupBackToEdit()
+          closeModalPopupBackToEdit();
           hideLoader();
         });
     },
-    'ยืนยันการตีกลับ',
-    'ต้องการยืนยันการตีกลับใช่หรือไม่?');
+    "ยืนยันการตีกลับ",
+    "ต้องการยืนยันการตีกลับใช่หรือไม่?"
+  );
 };
 
 const directorApproved = async () => {
@@ -254,7 +270,12 @@ const directorApproved = async () => {
         .get(config.API.insigniaDirectorApproved(round.value, DataStore.agency))
         .then(async () => {
           success($q, "บันทึกสำเร็จ");
-          await fecthInsigniaByOc(round.value, DataStore.agency, "officer", tab.value);
+          await fecthInsigniaByOc(
+            round.value,
+            DataStore.agency,
+            "officer",
+            tab.value
+          );
         })
         .catch((err) => {
           // console.log(err);
@@ -264,29 +285,35 @@ const directorApproved = async () => {
           hideLoader();
         });
     },
-    'ยืนยันการอนุมัติ',
-    'ต้องการยืนยันการอนุมัติใช่หรือไม่?');
+    "ยืนยันการอนุมัติ",
+    "ต้องการยืนยันการอนุมัติใช่หรือไม่?"
+  );
 };
 
 const requestSendNote = async () => {
-  dialogConfirm(
-    $q,
-    async () => {
-      showLoader();
-      await http
-        .post(config.API.insigniaRequestSendNote(round.value), { name: roundName.value })
-        .then(async () => {
-          success($q, "บันทึกสำเร็จ");
-          await fecthInsigniaByOc(round.value, DataStore.agency, "officer", tab.value);
-        })
-        .catch((err) => {
-          // console.log(err);
-          messageError($q, err);
-        })
-        .finally(() => {
-          hideLoader();
-        });
-    });
+  dialogConfirm($q, async () => {
+    showLoader();
+    await http
+      .post(config.API.insigniaRequestSendNote(round.value), {
+        name: roundName.value,
+      })
+      .then(async () => {
+        success($q, "บันทึกสำเร็จ");
+        await fecthInsigniaByOc(
+          round.value,
+          DataStore.agency,
+          "officer",
+          tab.value
+        );
+      })
+      .catch((err) => {
+        // console.log(err);
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
 };
 </script>
 
@@ -297,76 +324,175 @@ const requestSendNote = async () => {
   <q-card bordered class="row col-12 q-mt-sm">
     <div class="bg-grey-1 col-12 row items-center">
       <div class="q-pl-md q-pr-sm text-weight-medium text-grey-7">รอบ</div>
-      <q-select borderless dense v-model="round" :options="optionRound" map-options emit-value option-value="id"
-        option-label="name" @update:model-value="changround" />
+      <q-select
+        borderless
+        dense
+        v-model="round"
+        :options="optionRound"
+        map-options
+        emit-value
+        option-value="id"
+        option-label="name"
+        @update:model-value="changround"
+      />
     </div>
     <div class="col-12"><q-separator /></div>
     <div v-if="roleUser == 'admin'" class="col-12 row bg-white">
       <div class="fit q-px-md q-py-sm">
         <div class="row col-12 q-col-gutter-sm fit">
-          <cardTop :amount="stat.orgAllCount" label="หน่วยงานทั้งหมด" color="#016987" />
-          <cardTop :amount="stat.orgSendCount" label="หน่วยงานที่ส่งรายชื่อเเล้ว" color="#02A998" />
-          <cardTop :amount="stat.orgNoSendCount" label="หน่วยงานที่ยังไม่ได้ส่งรายชื่อ" color="#2EA0FF" />
-          <cardTop :amount="stat.allUserUser" label="จำนวนคนที่ยื่นขอ" color="#4154B3" />
+          <cardTop
+            :amount="stat.orgAllCount"
+            label="หน่วยงานทั้งหมด"
+            color="#016987"
+          />
+          <cardTop
+            :amount="stat.orgSendCount"
+            label="หน่วยงานที่ส่งรายชื่อเเล้ว"
+            color="#02A998"
+          />
+          <cardTop
+            :amount="stat.orgNoSendCount"
+            label="หน่วยงานที่ยังไม่ได้ส่งรายชื่อ"
+            color="#2EA0FF"
+          />
+          <cardTop
+            :amount="stat.allUserUser"
+            label="จำนวนคนที่ยื่นขอ"
+            color="#4154B3"
+          />
         </div>
       </div>
     </div>
   </q-card>
 
   <q-card flat bordered class="col-12 q-mt-sm" v-if="loading">
-    <div v-if="roleUser == 'insignia1' && requestStatus == 'st4'" class="q-pa-md q-gutter-sm">
-      <q-banner inline-actions bordered class="bg-orange-1 text-orange border-orange">
-        <q-icon name="mdi-information-outline" size="20px" /> หมายเหตุ ตีกลับ {{ requestNote }}
+    <div
+      v-if="roleUser == 'insignia1' && requestStatus == 'st4'"
+      class="q-pa-md q-gutter-sm"
+    >
+      <q-banner
+        inline-actions
+        bordered
+        class="bg-orange-1 text-orange border-orange"
+      >
+        <q-icon name="mdi-information-outline" size="20px" /> หมายเหตุ ตีกลับ
+        {{ requestNote }}
       </q-banner>
     </div>
     <div class="row col-12">
-      <q-tabs v-model="tab" dense class="text-grey" active-color="primary" active-class="bg-teal-1"
-        indicator-color="primary" align="left">
+      <q-tabs
+        v-model="tab"
+        dense
+        class="text-grey"
+        active-color="primary"
+        active-class="bg-teal-1"
+        indicator-color="primary"
+        align="left"
+      >
         <q-tab name="pending" label="ผู้ที่ยื่นขอ" />
         <q-tab name="reject" label="คนที่ไม่ยื่นขอ" />
         <q-tab name="delete" label="คนที่ถูกลบออก" />
-        <q-tab v-if="roleUser == 'admin'" name="organization" label="หน่วยงานที่ยังไม่ได้ส่งรายชื่อ" />
+        <q-tab
+          v-if="roleUser == 'admin'"
+          name="organization"
+          label="หน่วยงานที่ยังไม่ได้ส่งรายชื่อ"
+        />
       </q-tabs>
     </div>
     <q-separator />
     <q-tab-panels v-model="tab" animated>
       <q-tab-panel name="pending" class="q-pa-none">
-        <tab1 :tab="tab" :roundId="round" :fecthInsigniaByOc="fecthInsigniaByOc" :role-user="roleUser"
-          :request-status="requestStatus" />
+        <tab1
+          :tab="tab"
+          :roundId="round"
+          :fecthInsigniaByOc="fecthInsigniaByOc"
+          :role-user="roleUser"
+          :request-status="requestStatus"
+        />
       </q-tab-panel>
       <q-tab-panel name="reject" class="q-pa-none">
-        <tab2 :tab="tab" :roundId="round" :fecthInsigniaByOc="fecthInsigniaByOc" :role-user="roleUser" />
+        <tab2
+          :tab="tab"
+          :roundId="round"
+          :fecthInsigniaByOc="fecthInsigniaByOc"
+          :role-user="roleUser"
+        />
       </q-tab-panel>
       <q-tab-panel name="delete" class="q-pa-none">
-        <tab3 :tab="tab" :roundId="round" :fecthInsigniaByOc="fecthInsigniaByOc" :role-user="roleUser" />
+        <tab3
+          :tab="tab"
+          :roundId="round"
+          :fecthInsigniaByOc="fecthInsigniaByOc"
+          :role-user="roleUser"
+        />
       </q-tab-panel>
-      <q-tab-panel v-if="roleUser == 'admin'" name="organization" class="q-pa-none">
+      <q-tab-panel
+        v-if="roleUser == 'admin'"
+        name="organization"
+        class="q-pa-none"
+      >
         <tab4 :tab="tab" :roundId="round" :role-user="roleUser" />
       </q-tab-panel>
     </q-tab-panels>
 
     <q-toolbar class="q-py-md text-right">
       <q-space />
-      <q-btn v-if="roleUser == 'insignia1' && (requestStatus == 'st1' || requestStatus == 'st4')" dense unelevated
-        label="บันทึกข้อมูล" color="public" class="q-px-md" @click="sendToDirector" />
-      <q-btn v-if="roleUser == 'insignia2' && requestStatus == 'st3'" dense unelevated label="ตีกลับ" color="orange"
-        class="q-px-md" @click="popupBackToEdit" />
-      <q-btn v-if="roleUser == 'insignia2' && requestStatus == 'st3'" dense unelevated label="อนุมัติ" color="positive"
-        class="q-px-md q-ml-md" @click="directorApproved" />
+      <q-btn
+        v-if="
+          roleUser == 'insignia1' &&
+          (requestStatus == 'st1' || requestStatus == 'st4')
+        "
+        dense
+        unelevated
+        label="บันทึกข้อมูล"
+        color="public"
+        class="q-px-md"
+        @click="sendToDirector"
+      />
+      <q-btn
+        v-if="roleUser == 'insignia2' && requestStatus == 'st3'"
+        dense
+        unelevated
+        label="ตีกลับ"
+        color="orange"
+        class="q-px-md"
+        @click="popupBackToEdit"
+      />
+      <q-btn
+        v-if="roleUser == 'insignia2' && requestStatus == 'st3'"
+        dense
+        unelevated
+        label="อนุมัติ"
+        color="positive"
+        class="q-px-md q-ml-md"
+        @click="directorApproved"
+      />
 
       <!-- สกจ. Freez ข้อมูล -->
-      <q-btn v-if="roleUser == 'admin'" dense unelevated label="บันทึกข้อมูล" color="public" class="q-px-md q-ml-md"
-        @click="requestSendNote" />
+      <q-btn
+        v-if="roleUser == 'admin'"
+        dense
+        unelevated
+        label="บันทึกข้อมูล"
+        color="public"
+        class="q-px-md q-ml-md"
+        @click="requestSendNote"
+      />
     </q-toolbar>
 
-    <DialogPopupReason :modal="modalPopupBackToEdit" title="หมายเหตุการตีกลับ" label="หมายเหตุ"
-      :click-close="closeModalPopupBackToEdit" :savaForm="backToEdit" />
+    <DialogPopupReason
+      :modal="modalPopupBackToEdit"
+      title="หมายเหตุการตีกลับ"
+      label="หมายเหตุ"
+      :click-close="closeModalPopupBackToEdit"
+      :savaForm="backToEdit"
+    />
   </q-card>
 </template>
 
 <style lang="scss" scope>
 .border-orange {
-  border: 1px solid #FFA800;
+  border: 1px solid #ffa800;
   border-radius: 5px;
 }
 
diff --git a/src/modules/07_insignia/components/report/ReportView.vue b/src/modules/07_insignia/components/report/ReportView.vue
index 950f88bf8..d0eb2c86c 100644
--- a/src/modules/07_insignia/components/report/ReportView.vue
+++ b/src/modules/07_insignia/components/report/ReportView.vue
@@ -1,8 +1,19 @@
-<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 { setTypeandTitle } = store;
+
+const nextPage = (type: string, title: string) => {
+  setTypeandTitle(type, title);
+  router.push("/insignia/report/report-02");
+};
+</script>
 
 <template>
   <div class="toptitle text-dark col-12 row items-center">
-    รางงานเครื่องราชอิสริยาภรณ์
+    รายงานเครื่องราชอิสริยาภรณ์
   </div>
   <div>
     <q-card flat bordered class="col-12 q-mt-sm">
@@ -16,7 +27,7 @@
           </q-item-section>
         </q-item>
 
-        <q-item to="/insignia/report/report-01" dense class="hover-green">
+        <!-- <q-item to="/insignia/report/report-01" dense class="hover-green">
           <q-item-section avatar>
             <q-icon color="primary" name="mdi-file" size="xs" />
           </q-item-section>
@@ -32,6 +43,52 @@
           <q-item-section class="text-dark"
             >รายชื่อข้าราชการสามัญฯ ที่ได้รับ/ไม่ได้รับใบกำกับ
           </q-item-section>
+        </q-item> -->
+
+        <q-item
+          clickable
+          @click="
+            nextPage('43', 'บัญชีระดับผลการประเมินผลการปฏิบัติราชการในรอบ 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">
+            บัญชีระดับผลการประเมินผลการปฏิบัติราชการในรอบ 5 ปี
+          </q-item-section>
+        </q-item>
+
+        <q-item
+          clickable
+          @click="nextPage('44', 'บัญชีแสดงจำนวนชั้นตราเครื่องราชฯ')"
+          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('46', 'ประวัติสำหรับการเสนอขอพระราชทานเหรียญจักรพรรดิมาลา')
+          "
+          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>
     </q-card>
@@ -41,9 +98,9 @@
 <style lang="scss" scope>
 .q-item.hover-green:hover {
   background-color: #d5f1ee57;
-  border-radius: 2px ;
+  border-radius: 2px;
 }
-.q-item.hover-green{
+.q-item.hover-green {
   padding: 10px;
 }
 </style>
diff --git a/src/modules/07_insignia/components/report/Report_01.vue b/src/modules/07_insignia/components/report/Report_01.vue
index 77a935cca..a5d1f2130 100644
--- a/src/modules/07_insignia/components/report/Report_01.vue
+++ b/src/modules/07_insignia/components/report/Report_01.vue
@@ -1,6 +1,22 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import { VuePDF, usePDF } from "@tato30/vue-pdf";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  messageError,
+  showLoader,
+  hideLoader,
+  dialogConfirm,
+  success,
+} = mixin;
+const $q = useQuasar();
 
 const pdfSrc = ref<any>();
 const numOfPages = ref<number>(0);
@@ -19,12 +35,13 @@ onMounted(async () => {
 });
 
 const splitterModel = ref(14);
-const selectReport = ref<any>({ id: 1, name: "รายงานขร.1" });
+const fileId = ref<string>("");
+const selectReport = ref<any>({ id: 39, name: "รายงานขร.1" });
 const optionsReport = ref<any>([
-  { id: 1, name: "รายงานขร.1" },
-  { id: 2, name: "รายงานขร.2" },
-  { id: 3, name: "รายงานขร.3" },
-  { id: 4, name: "รายงานขร.4" },
+  { id: 39, name: "รายงานขร.1" },
+  { id: 40, name: "รายงานขร.2" },
+  { id: 41, name: "รายงานขร.3" },
+  { id: 42, name: "รายงานขร.4" },
 ]);
 const selectList = ref<any>({ id: 0, name: "เลือกกรอบการยื่นขอ" });
 const optionsList = ref<any>([
@@ -45,6 +62,40 @@ const backPage = () => {
 const backHistory = () => {
   window.history.back();
 };
+
+const downloadFile = (response: any, filename: string) => {
+  const link = document.createElement("a");
+  var fileName = filename;
+  link.href = window.URL.createObjectURL(new Blob([response.data]));
+  link.setAttribute("download", fileName);
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+};
+
+const downloadReport = async (type: string = "pdf") => {
+  showLoader();
+  await http
+    .get(
+      config.API.reportInsignia(
+        selectReport.value.id.toString(),
+        type,
+        fileId.value
+      ),
+      {
+        responseType: "blob",
+      }
+    )
+    .then(async (res) => {
+      downloadFile(res, `${selectReport.value.name}.${type}`);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
 </script>
 
 <template>
@@ -64,7 +115,7 @@ const backHistory = () => {
   <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" >
+        <q-toolbar style="padding: 0">
           <q-select
             class="q-mr-sm"
             dense
@@ -86,8 +137,19 @@ const backHistory = () => {
           />
           <q-space />
           <div class="q-pa-ms q-gutter-sm" style="padding: 0">
-            <q-btn outline color="primary" icon="download" label="ดาวน์โหลด" />
-            <q-btn unelevated icon="mdi-eye" color="primary" label="แสดงรางงาน" />
+            <q-btn
+              outline
+              color="primary"
+              icon="download"
+              label="ดาวน์โหลด"
+              @click="downloadReport('pdf')"
+            />
+            <q-btn
+              unelevated
+              icon="mdi-eye"
+              color="primary"
+              label="แสดงรายงาน"
+            />
             <q-btn
               unelevated
               color="blue"
diff --git a/src/modules/07_insignia/components/report/Report_02.vue b/src/modules/07_insignia/components/report/Report_02.vue
new file mode 100644
index 000000000..d1de37b05
--- /dev/null
+++ b/src/modules/07_insignia/components/report/Report_02.vue
@@ -0,0 +1,304 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { VuePDF, usePDF } from "@tato30/vue-pdf";
+import { useCounterMixin } from "@/stores/mixin";
+import { useInsigniaDataStore } from "@/modules/07_insignia/store";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const store = useInsigniaDataStore();
+const mixin = useCounterMixin();
+const { messageError, showLoader, hideLoader } = mixin;
+const { typeReport, titleReport } = store;
+
+const $q = useQuasar();
+
+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 fileId = ref<string>("");
+
+const nextPage = () => {
+  if (page.value < numOfPages.value) {
+    page.value++;
+  }
+};
+const backPage = () => {
+  if (page.value !== 1) {
+    page.value--;
+  }
+};
+
+const backHistory = () => {
+  window.history.back();
+};
+
+const downloadFile = (response: any, filename: string) => {
+  const link = document.createElement("a");
+  var fileName = filename;
+  link.href = window.URL.createObjectURL(new Blob([response.data]));
+  link.setAttribute("download", fileName);
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+};
+
+const downloadReport = async (type: string = "pdf") => {
+  showLoader();
+  await http
+    .get(config.API.reportInsignia(typeReport, type, fileId.value), {
+      responseType: "blob",
+    })
+    .then(async (res) => {
+      downloadFile(res, ` ${titleReport}.${type}`);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+</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">
+          <q-space />
+          <div class="q-pa-ms q-gutter-sm" style="padding: 0">
+            <q-btn
+              outline
+              color="primary"
+              icon="download"
+              label="ดาวน์โหลด"
+              @click="downloadReport('pdf')"
+            />
+            <q-btn
+              unelevated
+              icon="mdi-eye"
+              color="primary"
+              label="แสดงรายงาน"
+            />
+            <q-btn
+              unelevated
+              color="blue"
+              icon="mdi-fullscreen"
+              @click="dialog = true"
+              dense
+            />
+          </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>
+
+  <!-- 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 356a44bea..8d3b0186f 100644
--- a/src/modules/07_insignia/router.ts
+++ b/src/modules/07_insignia/router.ts
@@ -7,6 +7,8 @@ const ReportView = () =>
   import("../07_insignia/components/report/ReportView.vue");
 const report_01 = () =>
   import("../07_insignia/components/report/Report_01.vue");
+const report_02 = () =>
+  import("../07_insignia/components/report/Report_02.vue");
 const RecordInsignia = () =>
   import("@/modules/07_insignia/views/ResultPage.vue");
 const Coin = () => import("@/modules/07_insignia/components/Coin.vue");
@@ -23,7 +25,7 @@ const allocateOrdList = () =>
 const VatInsignia = () =>
   import("@/modules/07_insignia/components/VatInsignia.vue");
 
-// ยืม - คืนเครื่องราช  
+// ยืม - คืนเครื่องราช
 const insigniaBorrow = () =>
   import("@/modules/07_insignia/components/5_Borrow/Main.vue");
 export default [
@@ -108,6 +110,16 @@ export default [
       Role: "insignia",
     },
   },
+  {
+    path: "/insignia/report/report-02",
+    name: "report-report-02",
+    component: report_02,
+    meta: {
+      Auth: true,
+      Key: [8.5],
+      Role: "insignia",
+    },
+  },
   {
     path: "/insignia/manage/list-manage",
     name: "insigniaManage",
diff --git a/src/modules/07_insignia/store.ts b/src/modules/07_insignia/store.ts
index 7d6e66843..83fdc9a20 100644
--- a/src/modules/07_insignia/store.ts
+++ b/src/modules/07_insignia/store.ts
@@ -1,27 +1,30 @@
 import { defineStore } from "pinia";
-import { ref, } from "vue";
+import { ref } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 
 const mixin = useCounterMixin();
-const {
-  date2Thai
-} = mixin;
-
+const { date2Thai } = mixin;
 
 export const useInsigniaDataStore = defineStore("insignia", () => {
   let optionsTypeOc = ref<any>([]);
-  let typeOc = ref<string>("")
-  const agency = ref<string>('')
-  let rows = ref<any>([])
-  const listinsignia = ref<any>([])
+  let typeOc = ref<string>("");
+  const agency = ref<string>("");
+  let rows = ref<any>([]);
+  const listinsignia = ref<any>([]);
   const typeinsignia = ref<number | string>("all");
   let typeinsigniaOptions = ref<any>([{ id: "all", name: "ทั้งหมด" }]);
 
+  const typeReport = ref<string>("");
+  const titleReport = ref<string>("");
+
+  const setTypeandTitle = (type: string, title: string) => {
+    typeReport.value = type;
+    titleReport.value = title;
+  };
 
   const fetchData = async (data: any) => {
     if (data !== null) {
-      rows.value = await data.map((e: any) =>
-      ({
+      rows.value = await data.map((e: any) => ({
         id: e.id,
         citizenId: e.citizenId,
         profileId: e.profileId,
@@ -34,26 +37,27 @@ export const useInsigniaDataStore = defineStore("insignia", () => {
         insigniaSend: e.requestInsignia,
         insigniaLevel: e.level,
         dateSend: date2Thai(e.requestDate),
-        requestNote: e.requestNote
-      }))
-      listinsignia.value = await rows.value
-      filtertypeInsignia()
-    } else rows.value = []
-  }
+        requestNote: e.requestNote,
+      }));
+      listinsignia.value = await rows.value;
+      filtertypeInsignia();
+    } else rows.value = [];
+  };
   const fetchOption = (op: any) => {
     if (agency.value !== null) {
-      typeOc.value = agency.value
-      optionsTypeOc.value = op.filter((e: any) => e.id == agency.value
-      )
-    } else { optionsTypeOc.value = op, typeOc.value = op[2].id }
-  }
+      typeOc.value = agency.value;
+      optionsTypeOc.value = op.filter((e: any) => e.id == agency.value);
+    } else {
+      (optionsTypeOc.value = op), (typeOc.value = op[2].id);
+    }
+  };
   const filtertypeInsignia = async () => {
-    typeinsignia.value = "all"
+    typeinsignia.value = "all";
     if (listinsignia.value.length !== 0) {
       const double_name = [
         ...new Set(listinsignia.value.map((item: any) => item.insigniaSend)),
       ];
-      typeinsigniaOptions.value = [{ id: "all", name: "ทั้งหมด" }]
+      typeinsigniaOptions.value = [{ id: "all", name: "ทั้งหมด" }];
       for (let i = 1; i <= double_name.length; i++) {
         const type = double_name[i - 1];
         const listtype = {
@@ -61,9 +65,9 @@ export const useInsigniaDataStore = defineStore("insignia", () => {
           name: type,
         };
         // typeinsigniaOptions.value = [{ id: "all", name: "ทั้งหมด" }]
-        typeinsigniaOptions.value.push(listtype)
+        typeinsigniaOptions.value.push(listtype);
       }
-    } else typeinsigniaOptions.value = [{ id: "all", name: "ทั้งหมด" }]
+    } else typeinsigniaOptions.value = [{ id: "all", name: "ทั้งหมด" }];
   };
 
   const searchFilterTable = async () => {
@@ -88,5 +92,8 @@ export const useInsigniaDataStore = defineStore("insignia", () => {
     fetchData,
     fetchOption,
     searchFilterTable,
+    setTypeandTitle,
+    typeReport,
+    titleReport,
   };
 });
diff --git a/src/modules/09_coin/components/coinReport/coinReportDetail.vue b/src/modules/09_coin/components/coinReport/coinReportDetail.vue
index 790750219..9993907e3 100644
--- a/src/modules/09_coin/components/coinReport/coinReportDetail.vue
+++ b/src/modules/09_coin/components/coinReport/coinReportDetail.vue
@@ -64,8 +64,7 @@ const backHistory = () => {
   <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-toolbar style="padding: 0">
           <q-select
             dense
             outlined
@@ -77,8 +76,13 @@ const backHistory = () => {
           />
           <q-space />
           <div class="q-pa-ms q-gutter-sm" style="padding: 0">
-            <q-btn outline color="primary" icon="mdi-arrow-down-bold-circle-outline" label="ดาวน์โหลด" />
-            <q-btn icon="mdi-eye-outline" color="primary" label="แสดงรางงาน" />
+            <q-btn
+              outline
+              color="primary"
+              icon="mdi-arrow-down-bold-circle-outline"
+              label="ดาวน์โหลด"
+            />
+            <q-btn icon="mdi-eye-outline" color="primary" label="แสดงรายงาน" />
             <!-- <q-btn
               color="primary"
               icon="mdi-fullscreen"
diff --git a/src/modules/09_coin/components/coinReport/coinReportMain.vue b/src/modules/09_coin/components/coinReport/coinReportMain.vue
index 7f460bec7..142eecfa4 100644
--- a/src/modules/09_coin/components/coinReport/coinReportMain.vue
+++ b/src/modules/09_coin/components/coinReport/coinReportMain.vue
@@ -2,7 +2,7 @@
 
 <template>
   <div class="toptitle text-dark col-12 row items-center">
-    รางงานเครื่องราชอิสริยาภรณ์
+    รายงานเครื่องราชอิสริยาภรณ์
   </div>
   <div>
     <q-card flat bordered class="col-12 q-mt-sm">
@@ -12,7 +12,8 @@
             <q-icon color="primary" name="mdi-file" size="xs" />
           </q-item-section>
           <q-item-section class="text-dark">
-            บัญชีแสดงจำนวนชั้นตราเหรียนจักรพรรดิมาลา ซึ่งขอพระราชทานให้เเก่ข้าราชการ
+            บัญชีแสดงจำนวนชั้นตราเหรียนจักรพรรดิมาลา
+            ซึ่งขอพระราชทานให้เเก่ข้าราชการ
           </q-item-section>
         </q-item>
 
@@ -24,7 +25,6 @@
             บันทึกรายชื่อข้าราชการผู้ขอพระราชทานเหรียญจักรพรรคดิมาลาและประวัติข้าราชการสามัญฯ
           </q-item-section>
         </q-item>
-
       </div>
     </q-card>
   </div>
@@ -34,5 +34,4 @@
 .hover-green:hover {
   background-color: $teal-1;
 }
-
 </style>