From afa42c013367a83a90503f55b663b001b930afc2 Mon Sep 17 00:00:00 2001
From: Thanit Konmek <thanit@frappet.com>
Date: Mon, 17 Jul 2023 17:00:50 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=88=E0=B8=B1=E0=B8=94=E0=B8=AB=E0=B8=99?=
 =?UTF-8?q?=E0=B9=89=E0=B8=B2=20router?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/interface/request/main/main.ts            |  62 ++-
 .../1_Proposals/addProposals.vue              |   0
 .../1_Proposals/listProposals.vue             |   0
 ...{ResultInsignia.vue => RecordInsignia.vue} |   0
 src/modules/07_insignia/router.ts             |  40 +-
 src/modules/09_coin/components/Coin.vue       | 516 ++++++++++++++++++
 src/modules/09_coin/interface/index/Main.ts   |   1 +
 src/modules/09_coin/interface/request/Main.ts |   1 +
 .../09_coin/interface/response/Main.ts        |   1 +
 src/modules/09_coin/router.ts                 |  18 +
 src/modules/09_coin/store.ts                  |   5 +
 src/modules/09_coin/views/Main.vue            |  12 +
 src/router/index.ts                           |   2 +
 13 files changed, 633 insertions(+), 25 deletions(-)
 rename src/modules/07_insignia/{views => components}/1_Proposals/addProposals.vue (100%)
 rename src/modules/07_insignia/{views => components}/1_Proposals/listProposals.vue (100%)
 rename src/modules/07_insignia/components/{ResultInsignia.vue => RecordInsignia.vue} (100%)
 create mode 100644 src/modules/09_coin/components/Coin.vue
 create mode 100644 src/modules/09_coin/interface/index/Main.ts
 create mode 100644 src/modules/09_coin/interface/request/Main.ts
 create mode 100644 src/modules/09_coin/interface/response/Main.ts
 create mode 100644 src/modules/09_coin/router.ts
 create mode 100644 src/modules/09_coin/store.ts
 create mode 100644 src/modules/09_coin/views/Main.vue

diff --git a/src/interface/request/main/main.ts b/src/interface/request/main/main.ts
index e8f8f5d66..293401c14 100644
--- a/src/interface/request/main/main.ts
+++ b/src/interface/request/main/main.ts
@@ -242,7 +242,8 @@ const menuList = readonly<any[]>([
       },
       {
         key: 8.4,
-        label: "บันทึกผลการได้รับพระราช..." /* รายชื่อผู้สอบผ่าน */,
+        label:
+          "บันทึกผลการได้รับพระราชทานเครื่องราชย์อิสริยสภรณ์" /* รายชื่อผู้สอบผ่าน */,
         path: "insigniaRecord",
         role: "insignia",
       },
@@ -256,6 +257,65 @@ const menuList = readonly<any[]>([
   },
   {
     key: 9,
+    icon: "mdi-medal-outline",
+    activeIcon: "mdi-medal",
+    label: "เหรียญจักรพรรดิมาลา",
+    path: "coin",
+    role: "coin",
+    children: [
+      {
+        key: 9.1,
+        label: "รายการเสนอขอ",
+        path: "coinProposals",
+        role: "coin",
+      },
+      {
+        key: 9.2,
+        label: "จัดการคำขอ",
+        path: "coinManage",
+        role: "coin",
+      },
+      {
+        key: 9.3,
+        label: "บันทึกผลการได้รับพระราชทานเหรียญจักรพรรดิมาลา",
+        path: "coinReceive",
+        role: "coin",
+      },
+      {
+        key: 9.4,
+        label: "บันทึกผลการจ่ายใบกำกับ",
+        path: "coinPayment",
+        role: "coin",
+      },
+      {
+        key: 9.5,
+        label:
+          "รายชื่อที่ยื่นคำร้องขอแก้ไขข้อมูลการขอพระราชทานเหรียญจักรพรรดิมาลา",
+        path: "coinRequest",
+        role: "coin",
+      },
+      {
+        key: 9.6,
+        label: "ประวัติการยื่นขอ",
+        path: "coinHistory",
+        role: "coin",
+      },
+      {
+        key: 9.7,
+        label: "จัดสรรเหรียญตรา",
+        path: "coinAllocate",
+        role: "coin",
+      },
+      {
+        key: 9.8,
+        label: "รายงาน",
+        path: "coinReport",
+        role: "coin",
+      },
+    ],
+  },
+  {
+    key: 10,
     icon: "o_contact_page",
     activeIcon: "contact_page",
     label: "ทะเบียนประวัติลูกจ้าง",
diff --git a/src/modules/07_insignia/views/1_Proposals/addProposals.vue b/src/modules/07_insignia/components/1_Proposals/addProposals.vue
similarity index 100%
rename from src/modules/07_insignia/views/1_Proposals/addProposals.vue
rename to src/modules/07_insignia/components/1_Proposals/addProposals.vue
diff --git a/src/modules/07_insignia/views/1_Proposals/listProposals.vue b/src/modules/07_insignia/components/1_Proposals/listProposals.vue
similarity index 100%
rename from src/modules/07_insignia/views/1_Proposals/listProposals.vue
rename to src/modules/07_insignia/components/1_Proposals/listProposals.vue
diff --git a/src/modules/07_insignia/components/ResultInsignia.vue b/src/modules/07_insignia/components/RecordInsignia.vue
similarity index 100%
rename from src/modules/07_insignia/components/ResultInsignia.vue
rename to src/modules/07_insignia/components/RecordInsignia.vue
diff --git a/src/modules/07_insignia/router.ts b/src/modules/07_insignia/router.ts
index 5c1d003e5..81ae5c6da 100644
--- a/src/modules/07_insignia/router.ts
+++ b/src/modules/07_insignia/router.ts
@@ -7,13 +7,13 @@ const ReportView = () =>
   import("../07_insignia/components/report/ReportView.vue");
 const report_01 = () =>
   import("../07_insignia/components/report/Report_01.vue");
-const ResultInsignia = () =>
-  import("@/modules/07_insignia/components/ResultInsignia.vue");
+const RecordInsignia = () =>
+  import("@/modules/07_insignia/components/RecordInsignia.vue");
 const Coin = () => import("@/modules/07_insignia/components/Coin.vue");
 const insigniaProposals = () =>
-  import("@/modules/07_insignia/views/1_Proposals/listProposals.vue");
+  import("@/modules/07_insignia/components/1_Proposals/listProposals.vue");
 const roundAdd = () =>
-  import("@/modules/07_insignia/views/1_Proposals/addProposals.vue");
+  import("@/modules/07_insignia/components/1_Proposals/addProposals.vue");
 
 export default [
   {
@@ -22,7 +22,7 @@ export default [
     component: Main,
     meta: {
       Auth: true,
-      Key: [7],
+      Key: [8],
       Role: "insignia",
     },
   },
@@ -32,7 +32,7 @@ export default [
     component: insigniaProposals,
     meta: {
       Auth: true,
-      Key: [7.1],
+      Key: [8.1],
       Role: "insignia",
     },
   },
@@ -42,26 +42,18 @@ export default [
     component: roundAdd,
     meta: {
       Auth: true,
-      Key: [7.1],
+      Key: [8.1],
       Role: "insignia",
     },
   },
+
   {
-    path: "/insignia/report",
-    name: "insignia-report",
-    component: ReportView,
+    path: "/insignia/record",
+    name: "insigniaRecord",
+    component: RecordInsignia,
     meta: {
       Auth: true,
-      Key: [7.1],
-    },
-  },
-  {
-    path: "/insignia/result-insignia",
-    name: "result-insignia",
-    component: ResultInsignia,
-    meta: {
-      Auth: true,
-      Key: [7],
+      Key: [8.4],
       Role: "insignia",
     },
   },
@@ -71,17 +63,17 @@ export default [
     component: Coin,
     meta: {
       Auth: true,
-      Key: [7],
+      Key: [8],
       Role: "insignia",
     },
   },
   {
     path: "/insignia/report",
-    name: "insignia-report",
+    name: "insigniaReport",
     component: ReportView,
     meta: {
       Auth: true,
-      Key: [7],
+      Key: [8.5],
       Role: "insignia",
     },
   },
@@ -91,7 +83,7 @@ export default [
     component: report_01,
     meta: {
       Auth: true,
-      Key: [7],
+      Key: [8.5],
       Role: "insignia",
     },
   },
diff --git a/src/modules/09_coin/components/Coin.vue b/src/modules/09_coin/components/Coin.vue
new file mode 100644
index 000000000..ca851d7bd
--- /dev/null
+++ b/src/modules/09_coin/components/Coin.vue
@@ -0,0 +1,516 @@
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    <!-- <q-btn
+        icon="mdi-arrow-left"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="router.go(-1)"
+      /> -->
+    ประวัติการยื่นขอพระราชทานเหรียญจักรพรรดิมาลา
+  </div>
+  <q-card flat bordered class="col-12 q-my-md q-mt-sm rounded-borders">
+    <q-tabs
+      v-model="tab"
+      align="left"
+      class="bg-white text-grey"
+      active-color="primary"
+      indicator-color="primary"
+    >
+      <q-tab name="yes" label="คนที่ยื่นขอ" />
+      <q-tab name="no" label="คนที่ไม่ยื่นขอ" />
+    </q-tabs>
+    <q-separator />
+    <div class="q-py-md q-px-lg">
+      <!-- <div>
+        <label class="q-mr-sm">รอบ</label>
+        <q-btn
+          flat
+          round
+          de
+          color="grey"
+          icon="mdi-menu-left"
+          :class="getArrow(arrow)"
+          @click="clickRound"
+        />
+      </div>
+      <Transition>
+        <div v-if="arrow" class="bg-base rounded-borders q-pa-md">
+          <div class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md">
+            <div class="col-xs-6 col-md-2">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="dateGoverment"
+                :locale="'th'"
+                autoApply
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    class="full-width datepicker bg-white"
+                    :model-value="
+                      dateGoverment != null ? date2Thai(dateGoverment) : null
+                    "
+                    :label="`${'วันที่ประกาศราชกิจจานุเบกษา'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-xs-6 col-md-2">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="dateReceiver"
+                :locale="'th'"
+                autoApply
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    class="full-width datepicker bg-white"
+                    :model-value="
+                      dateReceiver != null ? date2Thai(dateReceiver) : null
+                    "
+                    :label="`${'วันที่ได้รับ'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-xs-6 col-md-2">
+              <q-input
+                class="bg-white"
+                outlined
+                dense
+                lazy-rules
+                v-model="issue"
+                :label="`${'ฉบับ'}`"
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-xs-6 col-md-2">
+              <q-input
+                class="bg-white"
+                outlined
+                dense
+                lazy-rules
+                v-model="book"
+                :label="`${'เล่มที่'}`"
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-xs-6 col-md-2">
+              <q-input
+                class="bg-white"
+                outlined
+                dense
+                lazy-rules
+                v-model="volume"
+                :label="`${'เล่ม'}`"
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-xs-6 col-md-2">
+              <q-input
+                class="bg-white"
+                outlined
+                dense
+                lazy-rules
+                v-model="section"
+                :label="`${'ตอนที่'}`"
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-xs-12 col-md-6">
+              <q-file
+                class="bg-white"
+                outlined
+                dense
+                v-model="government"
+                label="ราชกิจจานุเบกษา"
+                hide-bottom-space
+                lazy-rules
+              >
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" color="primary" />
+                </template>
+              </q-file>
+            </div>
+            <div class="col-xs-12 col-md-6">
+              <q-file
+                class="bg-white"
+                outlined
+                dense
+                v-model="document"
+                label="เอกสารประกอบ"
+                hide-bottom-space
+                lazy-rules
+              >
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" color="primary" />
+                </template>
+              </q-file>
+            </div>
+          </div>
+        </div>
+      </Transition> -->
+      <div :class="marginTop(arrow)">
+        <div class="col-12 row q-pb-sm items-center">
+          <selector
+            outlined
+            dense
+            lazy-rules
+            v-model="capYears"
+            hide-bottom-space
+            :label="`${'ปีงบประมาณ'}`"
+            emit-value
+            map-options
+            option-label="name"
+            :options="capYearsOption"
+            option-value="id"
+            use-input
+            input-debounce="0"
+            style="min-width: 150px"
+            class="gt-xs q-ml-sm"
+            @filter="(inputValue:string,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'capYearsOption'
+                        ) "
+          />
+          <q-space />
+          <div class="items-center" style="display: flex">
+            <!-- ค้นหาข้อความใน table -->
+            <q-input
+              standout
+              dense
+              v-model="filter"
+              ref="filterRef"
+              outlined
+              debounce="300"
+              placeholder="ค้นหา"
+              style="max-width: 200px"
+              class="q-ml-sm"
+            >
+              <template v-slot:append>
+                <q-icon v-if="filter == ''" name="search" />
+                <q-icon
+                  v-if="filter !== ''"
+                  name="clear"
+                  class="cursor-pointer"
+                  @click="resetFilter"
+                />
+              </template>
+            </q-input>
+            <!-- แสดงคอลัมน์ใน table -->
+            <q-select
+              v-model="visibleColumns"
+              :display-value="$q.lang.table.columns"
+              multiple
+              outlined
+              dense
+              :options="columns"
+              options-dense
+              option-value="name"
+              map-options
+              emit-value
+              style="min-width: 150px"
+              class="gt-xs q-ml-sm"
+            />
+          </div>
+        </div>
+        <d-table
+          :rows="rows"
+          :columns="columns"
+          :visible-columns="visibleColumns"
+          :filter="filter"
+          row-key="name"
+        >
+          <template v-slot:body-cell="props">
+            <q-td :props="props">
+              <div v-if="props.col.name == 'no'">
+                {{ props.rowIndex + 1 }}
+              </div>
+
+              <div v-else>
+                {{ props.value }}
+              </div>
+            </q-td>
+          </template>
+        </d-table>
+      </div>
+    </div>
+  </q-card>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+// import { useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+
+import type { DataOption } from "@/modules/05_placement/interface/index/Main";
+import type { QTableProps, QInput } from "quasar";
+
+// const router = useRouter();
+const mixin = useCounterMixin();
+const { date2Thai } = mixin;
+
+const tab = ref<string>("yes");
+const arrow = ref<boolean>(false);
+
+// const dateGoverment = ref<Date>(new Date());
+// const dateReceiver = ref<Date>(new Date());
+// const issue = ref<string>("");
+// const book = ref<string>("");
+// const volume = ref<string>("");
+// const section = ref<string>("");
+// const government = ref<any>(null);
+// const document = ref<any>(null);
+
+const capYears = ref<string>("");
+const capYearsOption = ref<DataOption[]>([]);
+const capYearsOptionFilter = ref<DataOption[]>([]);
+
+const visibleColumns = ref<String[]>([
+  "no",
+  "cardid",
+  "name",
+  "position",
+  "range",
+  "salary",
+  "zone",
+  "school",
+  "date",
+]);
+const filterRef = ref<QInput>();
+const filter = ref<string>("");
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    field: "no",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "cardid",
+    align: "left",
+    label: "เลขประจำตัวประชาชน",
+    field: "cardid",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อ - นามสกุล",
+    field: "name",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่ง",
+    field: "position",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "range",
+    align: "left",
+    label: "อันดับ",
+    field: "range",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "salary",
+    align: "left",
+    label: "เงินเดือน",
+    field: "salary",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "zone",
+    align: "left",
+    label: "เขต",
+    field: "zone",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "school",
+    align: "left",
+    label: "โรงเรียน",
+    field: "school",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "date",
+    align: "left",
+    label: "วันที่ยื่นขอ",
+    field: "date",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const rows = ref<any>([
+  {
+    no: "1",
+    cardid: "1XXXXXXXXXXXX",
+    name: "นางสาวรัชภรณ์ ภักดี",
+    position: "กกก",
+    range: "1",
+    salary: "XXXXXX",
+    zone: "1",
+    school: "โรงเรียน",
+    date: date2Thai(new Date()),
+  },
+  {
+    no: "2",
+    cardid: "1XXXXXXXXXXXX",
+    name: "นางสาวรัชภรณ์ ภักดี",
+    position: "กกก",
+    range: "1",
+    salary: "XXXXXX",
+    zone: "1",
+    school: "โรงเรียน",
+    date: date2Thai(new Date()),
+  },
+  {
+    no: "3",
+    cardid: "1XXXXXXXXXXXX",
+    name: "นางสาวรัชภรณ์ ภักดี",
+    position: "กกก",
+    range: "1",
+    salary: "XXXXXX",
+    zone: "1",
+    school: "โรงเรียน",
+    date: date2Thai(new Date()),
+  },
+]);
+
+onMounted(() => {
+  const op2: DataOption[] = [
+    { id: "1", name: "2566" },
+    { id: "2", name: "2565" },
+    { id: "3", name: "2564" },
+  ];
+
+  capYearsOption.value = op2;
+  capYearsOptionFilter.value = op2;
+});
+
+const clickRound = () => {
+  arrow.value = !arrow.value;
+};
+
+const resetFilter = () => {
+  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
+  filter.value = "";
+  filterRef.value!.focus();
+};
+
+const filterSelector = (val: any, update: Function, filtername: string) => {
+  switch (filtername) {
+    case "capYearsOption":
+      update(() => {
+        capYearsOption.value = capYearsOptionFilter.value.filter(
+          (v: DataOption) => v.name!.indexOf(val) > -1
+        );
+      });
+      break;
+
+    default:
+      break;
+  }
+};
+
+// const getArrow = (val: boolean) => {
+//   return {
+//     "arrow cursor-pointer": !val,
+//     "arrow-active cursor-pointer": val,
+//   };
+// };
+
+const marginTop = (val: boolean) => {
+  return {
+    "": !val,
+    "q-mt-md": val,
+  };
+};
+</script>
+<style lang="scss" scoped>
+.arrow {
+  transition: transform 0.5s;
+}
+
+.arrow-active {
+  transition: transform 0.5s;
+  transform: rotate(-90deg);
+}
+
+.bg-base {
+  background-color: #efefef;
+}
+
+.v-enter-active,
+.v-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/src/modules/09_coin/interface/index/Main.ts b/src/modules/09_coin/interface/index/Main.ts
new file mode 100644
index 000000000..e4ea7770c
--- /dev/null
+++ b/src/modules/09_coin/interface/index/Main.ts
@@ -0,0 +1 @@
+export type {};
diff --git a/src/modules/09_coin/interface/request/Main.ts b/src/modules/09_coin/interface/request/Main.ts
new file mode 100644
index 000000000..e4ea7770c
--- /dev/null
+++ b/src/modules/09_coin/interface/request/Main.ts
@@ -0,0 +1 @@
+export type {};
diff --git a/src/modules/09_coin/interface/response/Main.ts b/src/modules/09_coin/interface/response/Main.ts
new file mode 100644
index 000000000..e4ea7770c
--- /dev/null
+++ b/src/modules/09_coin/interface/response/Main.ts
@@ -0,0 +1 @@
+export type {};
diff --git a/src/modules/09_coin/router.ts b/src/modules/09_coin/router.ts
new file mode 100644
index 000000000..3626006be
--- /dev/null
+++ b/src/modules/09_coin/router.ts
@@ -0,0 +1,18 @@
+/**
+ * Router เครื่องราชอิสริยาภรณ์ (insignia)
+ */
+
+const Main = () => import("@/modules/09_coin/views/Main.vue");
+
+export default [
+  {
+    path: "/coin",
+    name: "coin",
+    component: Main,
+    meta: {
+      Auth: true,
+      Key: [9],
+      Role: "coin",
+    },
+  },
+];
diff --git a/src/modules/09_coin/store.ts b/src/modules/09_coin/store.ts
new file mode 100644
index 000000000..a1e6a7fe0
--- /dev/null
+++ b/src/modules/09_coin/store.ts
@@ -0,0 +1,5 @@
+import { defineStore } from "pinia";
+
+export const useCoinDataStore = defineStore("coin", () => {
+  return {};
+});
diff --git a/src/modules/09_coin/views/Main.vue b/src/modules/09_coin/views/Main.vue
new file mode 100644
index 000000000..b127c8a26
--- /dev/null
+++ b/src/modules/09_coin/views/Main.vue
@@ -0,0 +1,12 @@
+<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"> </q-card>
+  </div>
+</template>
+
+<style lang="scss" scope></style>
diff --git a/src/router/index.ts b/src/router/index.ts
index 496100f83..28211f6e6 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -12,6 +12,7 @@ import ModulePlacement from "@/modules/05_placement/router";
 import ModuleRetirement from "@/modules/06_retirement/router";
 import ModuleInsignia from "@/modules/07_insignia/router";
 import ModuleRegistryEmployee from "@/modules/08_registryEmployee/router";
+import ModuleCoin from "@/modules/09_coin/router";
 
 // TODO: ใช้หรือไม่?
 import keycloak from "@/plugins/keycloak";
@@ -42,6 +43,7 @@ const router = createRouter({
         ...ModuleRetirement,
         ...ModuleInsignia,
         ...ModuleRegistryEmployee,
+        ...ModuleCoin,
       ],
     },
     /**