diff --git a/src/api/13_salary/api.salary.ts b/src/api/13_salary/api.salary.ts
index 160213440..742d940ae 100644
--- a/src/api/13_salary/api.salary.ts
+++ b/src/api/13_salary/api.salary.ts
@@ -22,7 +22,7 @@ export default {
   salaryReportByid: (id: string) => `${salary}/report/${id}`,
   salaryReportemployeeByid: (id: string) => `${salary}/report/employee/${id}`,
   salaryPeriod: () => `${salary}/period`,
-  salaryPeriodActive: () => `${salary}/period/active`,
+  salaryPeriodActive: (year: string) => `${salary}/period/active/${year}`,
 
   /** รายการเงินเดือน*/
   keycloakPositionByid: (id: string) =>
diff --git a/src/modules/13_salary/components/SalaryEmployeeLists/Dashboard.vue b/src/modules/13_salary/components/SalaryEmployeeLists/Dashboard.vue
index e7c8e6496..d8f7e1519 100644
--- a/src/modules/13_salary/components/SalaryEmployeeLists/Dashboard.vue
+++ b/src/modules/13_salary/components/SalaryEmployeeLists/Dashboard.vue
@@ -1,4 +1,357 @@
-<template>
-<q-card class="q-pa-sm"> แสดง dashboard สำหรับ สกจ. </q-card>
+<script setup lang="ts">
+import { ref, onMounted, reactive, computed } from "vue";
+import type { QTableProps } from "quasar";
 
+import { useSalaryEmployeeListSDataStore } from "@/modules/13_salary/store/SalaryEmployeeListsStore";
+
+const store = useSalaryEmployeeListSDataStore();
+
+/** itemsCard*/
+const itemsCardAPR = ref([
+  {
+    lable: "จำนวนคนทั้งหมด",
+    name: "group1",
+    color: "secondary",
+    total: 0,
+  },
+  {
+    lable: "15% ของจำนวนคน",
+    name: "group2",
+    color: "light-blue-4",
+    total: 0,
+  },
+  {
+    lable: "เลือกไปแล้ว",
+    name: "group2",
+    color: "primary",
+    total: 0,
+  },
+  {
+    lable: "คงเหลือโควตา",
+    name: "group2",
+    color: "indigo-6",
+    total: 0,
+  },
+  {
+    lable: "สำรอง",
+    name: "group2",
+    color: "red-6",
+    total: 0,
+  },
+]);
+const itemsCardOCT = ref([
+  {
+    lable: "จำนวนเงินคนครองปัจจุบัน",
+    name: "group1",
+    color: "secondary",
+    total: 0,
+  },
+
+  {
+    lable: "วงเงิน 6%",
+    name: "group2",
+    color: "light-blue-4",
+    total: 0,
+  },
+  {
+    lable: "ยอดเงินที่ใช้ไป",
+    name: "group2",
+    color: "primary",
+    total: 0,
+  },
+  {
+    lable: "วงเงิน 6%-ยอดเงินที่ใช้ไป",
+    name: "group2",
+    color: "indigo-6",
+    total: 0,
+  },
+  {
+    lable: "ใช้ไปเท่าไหร่",
+    name: "group2",
+    color: "blue-6",
+    total: 0,
+  },
+  {
+    lable: "เหลือเท่าไหร่",
+    name: "group2",
+    color: "green-6",
+    total: 0,
+  },
+  {
+    lable: "สำรอง",
+    name: "group2",
+    color: "red-6",
+    total: 0,
+  },
+]);
+
+const itemsCard = computed(() => {
+  const items =
+    store.roundMainCode === "APR"
+      ? itemsCardAPR.value
+      : store.roundMainCode === "OCT"
+      ? itemsCardOCT.value
+      : [];
+  return items;
+});
+
+const rows = ref<any>([]);
+const columnsAPR = ref<QTableProps["columns"]>([
+  {
+    name: "org",
+    align: "left",
+    label: "หน่วยงาน",
+    sortable: true,
+    field: "org",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "total",
+    align: "left",
+    label: "จำนวนคนทั้งหมด",
+    sortable: true,
+    field: "total",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+
+  {
+    name: "fifteenPercent",
+    align: "left",
+    label: "15% ของจำนวนคน",
+    sortable: true,
+    field: "fifteenPercent",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "chosen",
+    align: "left",
+    label: "เลือกไปแล้ว",
+    sortable: true,
+    field: "chosen",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "remaining",
+    align: "left",
+    label: "คงเหลือโควตา",
+    sortable: true,
+    field: "remaining",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "totalBackup",
+    align: "left",
+    label: "สำรอง",
+    sortable: true,
+    field: "totalBackup",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const columnsOCT = ref<QTableProps["columns"]>([
+  {
+    name: "org",
+    align: "left",
+    label: "หน่วยงาน",
+    sortable: true,
+    field: "org",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "currentAmount",
+    align: "left",
+    label: "จำนวนเงินคนครองปัจจุบัน",
+    sortable: true,
+    field: "currentAmount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+
+  {
+    name: "sixPercentAmount",
+    align: "left",
+    label: "วงเงิน 6%",
+    sortable: true,
+    field: "sixPercentAmount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "spentAmount",
+    align: "left",
+    label: "ยอดเงินที่ใช้ไป",
+    sortable: true,
+    field: "spentAmount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "sixPercentSpentAmount",
+    align: "left",
+    label: "วงเงิน 6%-ยอดเงินที่ใช้ไป",
+    sortable: true,
+    field: "sixPercentSpentAmount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+
+  {
+    name: "useAmount",
+    align: "left",
+    label: "ใช้ไปเท่าไหร่",
+    sortable: true,
+    field: "useAmount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "remainingAmount",
+    align: "left",
+    label: "เหลือเท่าไหร่",
+    sortable: true,
+    field: "remainingAmount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "totalBackup",
+    align: "left",
+    label: "สำรอง",
+    sortable: true,
+    field: "totalBackup",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const columns = computed(() => {
+  const columnsss =
+    store.roundMainCode === "APR"
+      ? columnsAPR.value
+      : store.roundMainCode === "OCT"
+      ? columnsOCT.value
+      : [];
+  return columnsss;
+});
+
+const visibleColumns = ref<string[]>(
+  store.roundMainCode === "APR"
+    ? ["org", "total", "fifteenPercent", "chosen", "remaining", "totalBackup"]
+    : store.roundMainCode === "OCT"
+    ? [
+        "org",
+        "currentAmount",
+        "sixPercentAmount",
+        "spentAmount",
+        "sixPercentSpentAmount",
+        "useAmount",
+        "remainingAmount",
+        "totalBackup",
+      ]
+    : []
+);
+
+const gruup = ref<string>("กลุ่ม 1");
+const options = ref(["ทั้งหมด", "กลุ่ม 1", "กลุ่ม 2"]);
+</script>
+
+<template>
+  <!-- Card โควต้า -->
+  <q-toolbar class="q-pa-md">
+    <q-select
+      dense
+      outlined
+      v-model="gruup"
+      :options="options"
+      label="กลุ่ม"
+      style="width: 150px"
+    />
+  </q-toolbar>
+  <div class="row col-12 q-pa-md bg-grey-2">
+    <div class="row col-12 q-col-gutter-sm">
+      <div
+        v-for="(item, index) in itemsCard"
+        :key="index"
+        :class="
+          store.roundMainCode === 'APR'
+            ? 'col-6 col-sm-4 col-md-3 col-lg-2'
+            : 'col-3'
+        "
+      >
+        <q-card>
+          <q-card-section>
+            <div class="row items-center no-wrap">
+              <div class="col">
+                <div class="">{{ item.lable }}</div>
+              </div>
+
+              <div :class="`text-${item.color} text-bold`">
+                {{ item.total ? item.total.toLocaleString() : 0 }}
+              </div>
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+      <!-- <div class="row col justify-end self-center">
+        <q-btn-dropdown color="blue-5" label="ดาวน์โหลด">
+          <q-list>
+            <q-item
+              v-for="(item, index) in store.roundMainCode === 'APR'
+                ? store.itemDownloadApr
+                : store.roundMainCode === 'OCT'
+                ? store.itemDownloadOct
+                : []"
+              :key="index"
+              clickable
+              v-close-popup
+              @click="onClickDownload(item)"
+            >
+              <q-item-section>
+                <q-item-label>{{ item.name }}</q-item-label>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-btn-dropdown>
+      </div> -->
+    </div>
+  </div>
+  <q-separator />
+  <div class="col-12 q-pa-md">
+    <d-table
+      for="table"
+      ref="table"
+      :columns="columns"
+      :rows="rows"
+      row-key="subject"
+      flat
+      bordered
+      dense
+      class="custom-header-table"
+      :visible-columns="visibleColumns"
+    >
+      <template v-slot:header="props">
+        <q-tr :props="props">
+          <q-th v-for="col in props.cols" :key="col.name" :props="props">
+            <span class="text-weight-medium">{{ col.label }}</span>
+          </q-th>
+        </q-tr>
+      </template>
+      <template v-slot:body="props">
+        <q-tr :props="props" class="cursor-pointer">
+          <q-td v-for="col in props.cols" :key="col.name" :props="props">
+            <div class="table_ellipsis">
+              {{ col.value ? col.value : "-" }}
+            </div>
+          </q-td>
+        </q-tr>
+      </template>
+    </d-table>
+  </div>
 </template>
+
+<style scoped></style>
diff --git a/src/modules/13_salary/components/SalaryEmployeeLists/TabMain.vue b/src/modules/13_salary/components/SalaryEmployeeLists/TabMain.vue
index d9579cbc0..99bb2d72f 100644
--- a/src/modules/13_salary/components/SalaryEmployeeLists/TabMain.vue
+++ b/src/modules/13_salary/components/SalaryEmployeeLists/TabMain.vue
@@ -400,7 +400,7 @@ const updateIsShowRetire = async () => {
       :name="item.name"
     >
       <!-- Card โควต้า -->
-      <div class="row col-12 q-pa-md">
+      <div class="row col-12 q-pa-md" v-if="store.roundMainCode !== 'SPECIAL'">
         <div
           :class="`row col-12 ${
             store.roundMainCode === 'APR' ? `q-col-gutter-md` : `q-gutter-md`
@@ -433,7 +433,10 @@ const updateIsShowRetire = async () => {
               </q-card-section>
             </q-card>
           </div>
-          <div class="row col justify-end self-center">
+          <div
+            class="row col justify-end self-center"
+            v-if="store.roundMainCode !== 'SPECIAL'"
+          >
             <q-btn-dropdown color="blue-5" label="ดาวน์โหลด">
               <q-list>
                 <q-item
@@ -469,7 +472,7 @@ const updateIsShowRetire = async () => {
             @update:model-value="updateIsShowRetire"
             class="q-pr-md"
           >
-            เฉพาะผู้เกษียณอายุราชการ
+            แสดงเฉพาะผู้เกษียณอายุราชการ
           </q-toggle>
         </div>
 
diff --git a/src/modules/13_salary/components/SalaryLists/Dashboard.vue b/src/modules/13_salary/components/SalaryLists/Dashboard.vue
index ec1fe7073..487160d2a 100644
--- a/src/modules/13_salary/components/SalaryLists/Dashboard.vue
+++ b/src/modules/13_salary/components/SalaryLists/Dashboard.vue
@@ -1,4 +1,357 @@
-<template>
-<q-card class="q-pa-sm"> แสดง dashboard สำหรับ สกจ. </q-card>
+<script setup lang="ts">
+import { ref, onMounted, reactive, computed } from "vue";
+import type { QTableProps } from "quasar";
 
+import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
+
+const store = useSalaryListSDataStore();
+
+/** itemsCard*/
+const itemsCardAPR = ref([
+  {
+    lable: "จำนวนคนทั้งหมด",
+    name: "group1",
+    color: "secondary",
+    total: 0,
+  },
+  {
+    lable: "15% ของจำนวนคน",
+    name: "group2",
+    color: "light-blue-4",
+    total: 0,
+  },
+  {
+    lable: "เลือกไปแล้ว",
+    name: "group2",
+    color: "primary",
+    total: 0,
+  },
+  {
+    lable: "คงเหลือโควตา",
+    name: "group2",
+    color: "indigo-6",
+    total: 0,
+  },
+  {
+    lable: "สำรอง",
+    name: "group2",
+    color: "red-6",
+    total: 0,
+  },
+]);
+const itemsCardOCT = ref([
+  {
+    lable: "จำนวนเงินคนครองปัจจุบัน",
+    name: "group1",
+    color: "secondary",
+    total: 0,
+  },
+
+  {
+    lable: "วงเงิน 6%",
+    name: "group2",
+    color: "light-blue-4",
+    total: 0,
+  },
+  {
+    lable: "ยอดเงินที่ใช้ไป",
+    name: "group2",
+    color: "primary",
+    total: 0,
+  },
+  {
+    lable: "วงเงิน 6%-ยอดเงินที่ใช้ไป",
+    name: "group2",
+    color: "indigo-6",
+    total: 0,
+  },
+  {
+    lable: "ใช้ไปเท่าไหร่",
+    name: "group2",
+    color: "blue-6",
+    total: 0,
+  },
+  {
+    lable: "เหลือเท่าไหร่",
+    name: "group2",
+    color: "green-6",
+    total: 0,
+  },
+  {
+    lable: "สำรอง",
+    name: "group2",
+    color: "red-6",
+    total: 0,
+  },
+]);
+
+const itemsCard = computed(() => {
+  const items =
+    store.roundMainCode === "APR"
+      ? itemsCardAPR.value
+      : store.roundMainCode === "OCT"
+      ? itemsCardOCT.value
+      : [];
+  return items;
+});
+
+const rows = ref<any>([]);
+const columnsAPR = ref<QTableProps["columns"]>([
+  {
+    name: "org",
+    align: "left",
+    label: "หน่วยงาน",
+    sortable: true,
+    field: "org",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "total",
+    align: "left",
+    label: "จำนวนคนทั้งหมด",
+    sortable: true,
+    field: "total",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+
+  {
+    name: "fifteenPercent",
+    align: "left",
+    label: "15% ของจำนวนคน",
+    sortable: true,
+    field: "fifteenPercent",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "chosen",
+    align: "left",
+    label: "เลือกไปแล้ว",
+    sortable: true,
+    field: "chosen",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "remaining",
+    align: "left",
+    label: "คงเหลือโควตา",
+    sortable: true,
+    field: "remaining",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "totalBackup",
+    align: "left",
+    label: "สำรอง",
+    sortable: true,
+    field: "totalBackup",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const columnsOCT = ref<QTableProps["columns"]>([
+  {
+    name: "org",
+    align: "left",
+    label: "หน่วยงาน",
+    sortable: true,
+    field: "org",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "currentAmount",
+    align: "left",
+    label: "จำนวนเงินคนครองปัจจุบัน",
+    sortable: true,
+    field: "currentAmount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+
+  {
+    name: "sixPercentAmount",
+    align: "left",
+    label: "วงเงิน 6%",
+    sortable: true,
+    field: "sixPercentAmount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "spentAmount",
+    align: "left",
+    label: "ยอดเงินที่ใช้ไป",
+    sortable: true,
+    field: "spentAmount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "sixPercentSpentAmount",
+    align: "left",
+    label: "วงเงิน 6%-ยอดเงินที่ใช้ไป",
+    sortable: true,
+    field: "sixPercentSpentAmount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+
+  {
+    name: "useAmount",
+    align: "left",
+    label: "ใช้ไปเท่าไหร่",
+    sortable: true,
+    field: "useAmount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "remainingAmount",
+    align: "left",
+    label: "เหลือเท่าไหร่",
+    sortable: true,
+    field: "remainingAmount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "totalBackup",
+    align: "left",
+    label: "สำรอง",
+    sortable: true,
+    field: "totalBackup",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const columns = computed(() => {
+  const columnsss =
+    store.roundMainCode === "APR"
+      ? columnsAPR.value
+      : store.roundMainCode === "OCT"
+      ? columnsOCT.value
+      : [];
+  return columnsss;
+});
+
+const visibleColumns = ref<string[]>(
+  store.roundMainCode === "APR"
+    ? ["org", "total", "fifteenPercent", "chosen", "remaining", "totalBackup"]
+    : store.roundMainCode === "OCT"
+    ? [
+        "org",
+        "currentAmount",
+        "sixPercentAmount",
+        "spentAmount",
+        "sixPercentSpentAmount",
+        "useAmount",
+        "remainingAmount",
+        "totalBackup",
+      ]
+    : []
+);
+
+const gruup = ref<string>("กลุ่ม 1");
+const options = ref(["ทั้งหมด", "กลุ่ม 1", "กลุ่ม 2"]);
+</script>
+
+<template>
+  <!-- Card โควต้า -->
+  <q-toolbar class="q-pa-md">
+    <q-select
+      dense
+      outlined
+      v-model="gruup"
+      :options="options"
+      label="กลุ่ม"
+      style="width: 150px"
+    />
+  </q-toolbar>
+  <div class="row col-12 q-pa-md bg-grey-2">
+    <div class="row col-12 q-col-gutter-sm">
+      <div
+        v-for="(item, index) in itemsCard"
+        :key="index"
+        :class="
+          store.roundMainCode === 'APR'
+            ? 'col-6 col-sm-4 col-md-3 col-lg-2'
+            : 'col-3'
+        "
+      >
+        <q-card>
+          <q-card-section>
+            <div class="row items-center no-wrap">
+              <div class="col">
+                <div class="">{{ item.lable }}</div>
+              </div>
+
+              <div :class="`text-${item.color} text-bold`">
+                {{ item.total ? item.total.toLocaleString() : 0 }}
+              </div>
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+      <!-- <div class="row col justify-end self-center">
+        <q-btn-dropdown color="blue-5" label="ดาวน์โหลด">
+          <q-list>
+            <q-item
+              v-for="(item, index) in store.roundMainCode === 'APR'
+                ? store.itemDownloadApr
+                : store.roundMainCode === 'OCT'
+                ? store.itemDownloadOct
+                : []"
+              :key="index"
+              clickable
+              v-close-popup
+              @click="onClickDownload(item)"
+            >
+              <q-item-section>
+                <q-item-label>{{ item.name }}</q-item-label>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-btn-dropdown>
+      </div> -->
+    </div>
+  </div>
+  <q-separator />
+  <div class="col-12 q-pa-md">
+    <d-table
+      for="table"
+      ref="table"
+      :columns="columns"
+      :rows="rows"
+      row-key="subject"
+      flat
+      bordered
+      dense
+      class="custom-header-table"
+      :visible-columns="visibleColumns"
+    >
+      <template v-slot:header="props">
+        <q-tr :props="props">
+          <q-th v-for="col in props.cols" :key="col.name" :props="props">
+            <span class="text-weight-medium">{{ col.label }}</span>
+          </q-th>
+        </q-tr>
+      </template>
+      <template v-slot:body="props">
+        <q-tr :props="props" class="cursor-pointer">
+          <q-td v-for="col in props.cols" :key="col.name" :props="props">
+            <div class="table_ellipsis">
+              {{ col.value ? col.value : "-" }}
+            </div>
+          </q-td>
+        </q-tr>
+      </template>
+    </d-table>
+  </div>
 </template>
+
+<style scoped></style>
diff --git a/src/modules/13_salary/components/SalaryLists/TabMain.vue b/src/modules/13_salary/components/SalaryLists/TabMain.vue
index 0f9288ac4..b63e42000 100644
--- a/src/modules/13_salary/components/SalaryLists/TabMain.vue
+++ b/src/modules/13_salary/components/SalaryLists/TabMain.vue
@@ -21,7 +21,6 @@ import TableTabType2 from "@/modules/13_salary/components/SalaryLists/TableTypeO
 /** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
 import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
-import { log } from "console";
 
 /** use*/
 const $q = useQuasar();
@@ -390,7 +389,8 @@ const updateIsShowRetire = async () => {
       :key="index"
       @click="changeTabGroup"
     >
-      <q-tab :name="item.name" :label="item.lable">
+      <q-tab :name="item.name">
+        <div>{{ item.lable }} <q-icon name="info" size="18px" /></div>
         <q-tooltip>
           <q-list dense v-if="item.name === 'group1'" class="tootip-txt-normal">
             <q-item>
@@ -479,7 +479,7 @@ const updateIsShowRetire = async () => {
       :name="item.name"
     >
       <!-- Card โควต้า -->
-      <div class="row col-12 q-pa-md">
+      <div class="row col-12 q-pa-md" v-if="store.roundMainCode !== 'SPECIAL'">
         <div
           :class="`row col-12 ${
             store.roundMainCode === 'APR' ? `q-col-gutter-md` : `q-gutter-md`
@@ -512,7 +512,11 @@ const updateIsShowRetire = async () => {
               </q-card-section>
             </q-card>
           </div>
-          <div class="row col justify-end self-center">
+
+          <div
+            class="row col justify-end self-center"
+            v-if="store.roundMainCode !== 'SPECIAL'"
+          >
             <q-btn-dropdown color="blue-5" label="ดาวน์โหลด">
               <q-list>
                 <q-item
@@ -548,7 +552,7 @@ const updateIsShowRetire = async () => {
             @update:model-value="updateIsShowRetire"
             class="q-pr-md"
           >
-            เฉพาะผู้เกษียณอายุราชการ
+            แสดงเฉพาะผู้เกษียณอายุราชการ
           </q-toggle>
         </div>
 
diff --git a/src/modules/13_salary/views/salaryEmployeeLists.vue b/src/modules/13_salary/views/salaryEmployeeLists.vue
index 58ea40a5c..151fd1e74 100644
--- a/src/modules/13_salary/views/salaryEmployeeLists.vue
+++ b/src/modules/13_salary/views/salaryEmployeeLists.vue
@@ -30,6 +30,7 @@ const $q = useQuasar();
 const { messageError, showLoader, hideLoader } = useCounterMixin();
 
 /** ตัวแปร*/
+const year = ref<number>(new Date().getFullYear());
 const roundFilter = ref<any>();
 const roundOptions = ref<DataOptionShort[]>([]);
 const agencyFilter = ref<string>("");
@@ -49,42 +50,48 @@ const nextPage = ref<number>(1);
 
 /**function เรียกข้อมูลรอบการขึ้นเงินเดือน*/
 function getRound() {
+  roundOptions.value = [];
   showLoader();
   http
     .get(
-      config.API.salaryPeriodActive() +
+      config.API.salaryPeriodActive(year.value.toString()) +
         `?page=${page.value}&pageSize=${pageSize.value}&keyword=&year=0`
     )
     .then(async (res) => {
       const data = res.data.result.data;
-      lastPage.value = Math.ceil(res.data.result.total / pageSize.value);
+      if (data.length !== 0) {
+        lastPage.value = Math.ceil(res.data.result.total / pageSize.value);
+        const optionMain = await data.map((x: DataRound) => ({
+          id: x.id,
+          revisionId: x.revisionId,
+          shortCode: x.period,
+          isClose: x.isClose,
+          year: x.year,
+          name:
+            x.period === "OCT"
+              ? "รอบตุลาคม "
+              : x.period === "SPECIAL"
+              ? "รอบพิเศษ "
+              : "รอบเมษายน ",
+        }));
+        roundOptions.value.push(...optionMain);
 
-      const optionMain = await data.map((x: DataRound) => ({
-        id: x.id,
-        revisionId: x.revisionId,
-        shortCode: x.period,
-        isClose: x.isClose,
-        year: x.year,
-        name:
-          (x.period === "OCT"
-            ? "รอบตุลาคม "
-            : x.period === "SPECIAL"
-            ? "รอบพิเศษ "
-            : "รอบเมษายน ") +
-          (Number(x.year) + 543),
-      }));
-      roundOptions.value.push(...optionMain);
+        roundFilter.value = await (roundOptions.value
+          ? roundOptions.value[0]
+          : "");
 
-      roundFilter.value = await (roundOptions.value
-        ? roundOptions.value[0]
-        : "");
+        store.roundMainCode = roundFilter.value.shortCode;
+        store.isClosedRound = roundFilter.value.isClose;
 
-      store.roundMainCode = roundFilter.value.shortCode;
-      store.isClosedRound = roundFilter.value.isClose;
-
-      await getSnap(roundFilter.value.shortCode);
-      await getAgency(roundFilter.value.revisionId);
-      await getAgencyPosition(roundFilter.value.revisionId);
+        await getSnap(roundFilter.value.shortCode);
+        await getAgency(roundFilter.value.revisionId);
+        await getAgencyPosition(roundFilter.value.revisionId);
+      } else {
+        isLoad.value = false;
+        roundFilter.value = "ไม่มีข้อมูล";
+        snapFilter.value = "ไม่มีข้อมูล";
+        agencyFilter.value = "ไม่มีข้อมูล";
+      }
     })
     .catch((e) => {
       messageError($q, e);
@@ -307,8 +314,43 @@ onMounted(() => {
       รายการเลื่อนค่าจ้างลูกจ้างประจำ
     </div>
     <q-space />
+    <datepicker
+      menu-class-name="modalfix"
+      v-model="year"
+      :locale="'th'"
+      autoApply
+      year-picker
+      :enableTimePicker="false"
+      style="width: 150px"
+      @update:model-value="getRound"
+    >
+      <template #year="{ year }">{{ year + 543 }}</template>
+      <template #year-overlay-value="{ value }">{{
+        parseInt(value + 543)
+      }}</template>
+      <template #trigger>
+        <q-input
+          dense
+          lazy-rules
+          outlined
+          :model-value="Number(year) + 543"
+          :label="`${'ปีงบประมาณ'}`"
+          bg-color="white"
+        >
+          <template v-slot:prepend>
+            <q-icon
+              name="event"
+              class="cursor-pointer"
+              style="color: var(--q-primary)"
+            >
+            </q-icon>
+          </template>
+        </q-input>
+      </template>
+    </datepicker>
 
     <q-select
+      class="q-ml-xs"
       v-model="roundFilter"
       label="รอบการขึ้นเงินเดือน"
       dense
@@ -323,6 +365,7 @@ onMounted(() => {
       @update:model-value="onChangeRound"
       :loading="loading"
       @virtual-scroll="onScroll"
+      :disable="!isLoad"
     >
       <template v-slot:option="scope">
         <q-item v-bind="scope.itemProps">
@@ -348,6 +391,7 @@ onMounted(() => {
       hide-bottom-space
       bg-color="white"
       @update:model-value="onChangeSnap"
+      :disable="!isLoad"
     />
     <q-select
       class="q-ml-xs"
@@ -364,6 +408,7 @@ onMounted(() => {
       hide-bottom-space
       bg-color="white"
       @update:model-value="onChangeAgency"
+      :disable="!isLoad"
     />
   </div>
 
diff --git a/src/modules/13_salary/views/salaryLists.vue b/src/modules/13_salary/views/salaryLists.vue
index 432b69b7a..bcd0f03ae 100644
--- a/src/modules/13_salary/views/salaryLists.vue
+++ b/src/modules/13_salary/views/salaryLists.vue
@@ -29,6 +29,7 @@ const $q = useQuasar();
 const { messageError, showLoader, hideLoader } = useCounterMixin();
 
 /** ตัวแปร*/
+const year = ref<number>(new Date().getFullYear());
 const roundFilter = ref<any>();
 const roundOptions = ref<DataOptionShort[]>([]);
 const agencyFilter = ref<string>("");
@@ -48,51 +49,49 @@ const nextPage = ref<number>(1);
 
 /**function เรียกข้อมูลรอบการขึ้นเงินเดือน*/
 function getRound() {
+  roundOptions.value = [];
   showLoader();
   http
     .get(
-      config.API.salaryPeriodActive() +
+      config.API.salaryPeriodActive(year.value.toString()) +
         `?page=${page.value}&pageSize=${pageSize.value}&keyword=&year=0`
     )
     .then(async (res) => {
       const data = res.data.result.data;
-      lastPage.value = Math.ceil(res.data.result.total / pageSize.value);
+      if (data.length !== 0) {
+        lastPage.value = Math.ceil(res.data.result.total / pageSize.value);
+        const optionMain = await data.map((x: DataRound) => ({
+          id: x.id,
+          revisionId: x.revisionId,
+          shortCode: x.period,
+          isClose: x.isClose,
+          year: x.year,
+          name:
+            x.period === "OCT"
+              ? "รอบตุลาคม "
+              : x.period === "SPECIAL"
+              ? "รอบพิเศษ "
+              : "รอบเมษายน ",
+        }));
+        roundOptions.value.push(...optionMain);
 
-      const optionMain = await data.map((x: DataRound) => ({
-        id: x.id,
-        revisionId: x.revisionId,
-        shortCode: x.period,
-        isClose: x.isClose,
-        year: x.year,
-        name:
-          (x.period === "OCT"
-            ? "รอบตุลาคม "
-            : x.period === "SPECIAL"
-            ? "รอบพิเศษ "
-            : "รอบเมษายน ") +
-          (Number(x.year) + 543),
-      }));
-      roundOptions.value.push(...optionMain);
+        roundFilter.value = await (roundOptions.value
+          ? roundOptions.value[0]
+          : "");
 
-      roundFilter.value = await (roundOptions.value
-        ? roundOptions.value[0]
-        : "");
+        store.roundMainCode = roundFilter.value.shortCode;
+        store.roundYear = roundFilter.value.year;
+        store.isClosedRound = roundFilter.value.isClose;
 
-      store.roundMainCode = roundFilter.value.shortCode;
-      store.roundYear = roundFilter.value.year;
-      store.isClosedRound = roundFilter.value.isClose;
-
-      await getSnap(roundFilter.value.shortCode);
-      await getAgency(roundFilter.value.revisionId);
-      await getAgencyPosition(roundFilter.value.revisionId);
-
-      //   if (agencyFilter.value && roundFilter.value.id && snapFilter.value) {
-      //     await fetchSalalyPeriod(
-      //       agencyFilter.value,
-      //       roundFilter.value.id,
-      //       snapFilter.value
-      //     );
-      //   }
+        await getSnap(roundFilter.value.shortCode);
+        await getAgency(roundFilter.value.revisionId);
+        await getAgencyPosition(roundFilter.value.revisionId);
+      } else {
+        isLoad.value = false;
+        roundFilter.value = "ไม่มีข้อมูล";
+        snapFilter.value = "ไม่มีข้อมูล";
+        agencyFilter.value = "ไม่มีข้อมูล";
+      }
     })
     .catch((e) => {
       messageError($q, e);
@@ -320,17 +319,16 @@ function onScroll({ to, ref }: { to: number; ref: any }) {
 
 function getQuota() {
   http
-  .get(config.API.salaryListPeriodQuota(store.groupId))
-  .then((res)=>{
-    console.log("q",res)
-    const data = res.data.result
-    store.statusQuota = data.status
-    
-  }).catch((e)=>{
-    messageError($q,e)
-  }).finally(()=>{
-
-  })
+    .get(config.API.salaryListPeriodQuota(store.groupId))
+    .then((res) => {
+      console.log("q", res);
+      const data = res.data.result;
+      store.statusQuota = data.status;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {});
 }
 onMounted(async () => {
   await getRound();
@@ -343,7 +341,42 @@ onMounted(async () => {
       รายการเลื่อนเงินเดือนข้าราชการฯ
     </div>
     <q-space />
+    <datepicker
+      menu-class-name="modalfix"
+      v-model="year"
+      :locale="'th'"
+      autoApply
+      year-picker
+      :enableTimePicker="false"
+      style="width: 150px"
+      @update:model-value="getRound"
+    >
+      <template #year="{ year }">{{ year + 543 }}</template>
+      <template #year-overlay-value="{ value }">{{
+        parseInt(value + 543)
+      }}</template>
+      <template #trigger>
+        <q-input
+          dense
+          lazy-rules
+          outlined
+          :model-value="Number(year) + 543"
+          :label="`${'ปีงบประมาณ'}`"
+          bg-color="white"
+        >
+          <template v-slot:prepend>
+            <q-icon
+              name="event"
+              class="cursor-pointer"
+              style="color: var(--q-primary)"
+            >
+            </q-icon>
+          </template>
+        </q-input>
+      </template>
+    </datepicker>
     <q-select
+      class="q-ml-xs"
       v-model="roundFilter"
       label="รอบการขึ้นเงินเดือน"
       dense
@@ -358,6 +391,7 @@ onMounted(async () => {
       @update:model-value="onChangeRound"
       :loading="loading"
       @virtual-scroll="onScroll"
+      :disable="!isLoad"
     >
       <template v-slot:option="scope">
         <q-item v-bind="scope.itemProps">
@@ -383,6 +417,7 @@ onMounted(async () => {
       hide-bottom-space
       bg-color="white"
       @update:model-value="onChangeSnap"
+      :disable="!isLoad"
     />
     <q-select
       class="q-ml-xs"
@@ -399,6 +434,7 @@ onMounted(async () => {
       hide-bottom-space
       bg-color="white"
       @update:model-value="onChangeAgency"
+      :disable="!isLoad"
     />
   </div>