diff --git a/src/modules/13_salary/components/SalaryLists/Dashboard.vue b/src/modules/13_salary/components/SalaryLists/Dashboard.vue
index 25d8c3541..b2051636f 100644
--- a/src/modules/13_salary/components/SalaryLists/Dashboard.vue
+++ b/src/modules/13_salary/components/SalaryLists/Dashboard.vue
@@ -1,10 +1,30 @@
 <script setup lang="ts">
-import { ref, onMounted, reactive, computed } from "vue";
+import { ref, onMounted, computed, watch } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
 import type { QTableProps } from "quasar";
 
 import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
+import { useCounterMixin } from "@/stores/mixin";
 
+const $q = useQuasar();
 const store = useSalaryListSDataStore();
+const { messageError, showLoader, hideLoader } = useCounterMixin();
+
+const props = defineProps({
+  year: Number,
+  snapShot: String,
+  roundFilter: Object,
+});
+
+const gruup = ref<string>("ALL");
+const options = ref([
+  { id: "ALL", name: "ทั้งหมด" },
+  { id: "group1", name: "กลุ่ม 1" },
+  { id: "group2", name: "กลุ่ม 2" },
+]);
 
 /** itemsCard*/
 const itemsCardAPR = ref([
@@ -256,8 +276,45 @@ const visibleColumns = ref<string[]>(
     : []
 );
 
-const gruup = ref<string>("ทั้งหมด");
-const options = ref(["ทั้งหมด", "กลุ่ม 1", "กลุ่ม 2"]);
+function fetchDataDashboard() {
+  const formData = {
+    year: props?.year,
+    group: gruup.value,
+    period: props?.roundFilter?.id,
+    snapshot: props?.snapShot,
+  };
+  http
+    .post(config.API.salaryDashboardEmp, formData)
+    .then((res) => {
+      const quota = res.data.result.dashboard;
+      itemsCardAPR.value[0].total = quota.total;
+      itemsCardAPR.value[1].total = quota.fifteenPercent;
+      itemsCardAPR.value[2].total = quota.chosen;
+      itemsCardAPR.value[3].total = quota.remaining;
+      itemsCardAPR.value[4].total = quota.totalBackup;
+
+      itemsCardOCT.value[0].total = quota.currentAmount;
+      itemsCardOCT.value[1].total = quota.sixPercentAmount;
+      itemsCardOCT.value[2].total = quota.spentAmount;
+      itemsCardOCT.value[3].total = quota.sixPercentSpentAmount;
+      itemsCardOCT.value[4].total = quota.useAmount;
+      itemsCardOCT.value[5].total = quota.remainingAmount;
+      itemsCardOCT.value[6].total = quota.totalBackup;
+
+      rows.value = res.data.result.salaryOrg;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+onMounted(() => {
+  fetchDataDashboard();
+});
+
+watch([() => props?.snapShot, () => props.roundFilter], () => {
+  fetchDataDashboard();
+});
 </script>
 
 <template>
@@ -269,7 +326,12 @@ const options = ref(["ทั้งหมด", "กลุ่ม 1", "กลุ่
       v-model="gruup"
       :options="options"
       label="กลุ่ม"
+      emit-value
+      map-options
+      option-label="name"
+      option-value="id"
       style="width: 150px"
+      @update:model-value="fetchDataDashboard"
     />
   </q-toolbar>
   <div class="row col-12 q-pa-md bg-grey-2">
diff --git a/src/modules/13_salary/views/salaryEmployeeLists.vue b/src/modules/13_salary/views/salaryEmployeeLists.vue
index cc202d66f..a975ce0ad 100644
--- a/src/modules/13_salary/views/salaryEmployeeLists.vue
+++ b/src/modules/13_salary/views/salaryEmployeeLists.vue
@@ -40,6 +40,7 @@ const snapOptions = ref<DataOption[]>();
 const periodLatest = ref<DataPeriodLatest>();
 
 const isLoad = ref<boolean>(false);
+const isDisable = ref<boolean>(false);
 
 /** ตัวแปร select*/
 const page = ref<number>(1);
@@ -51,6 +52,7 @@ const nextPage = ref<number>(1);
 /**function เรียกข้อมูลรอบการขึ้นเงินเดือน*/
 function getRound() {
   roundOptions.value = [];
+  isDisable.value = false;
   showLoader();
   http
     .get(
@@ -60,6 +62,7 @@ function getRound() {
     .then(async (res) => {
       const data = res.data.result.data;
       if (data.length !== 0) {
+        isDisable.value = true;
         lastPage.value = Math.ceil(res.data.result.total / pageSize.value);
         const optionMain = await data.map((x: DataRound) => ({
           id: x.id,
@@ -372,7 +375,7 @@ onMounted(() => {
       @update:model-value="onChangeRound"
       :loading="loading"
       @virtual-scroll="onScroll"
-      :disable="!isLoad"
+      :disable="!isDisable"
     >
       <template v-slot:option="scope">
         <q-item v-bind="scope.itemProps">
@@ -398,7 +401,7 @@ onMounted(() => {
       hide-bottom-space
       bg-color="white"
       @update:model-value="onChangeSnap"
-      :disable="!isLoad"
+      :disable="!isDisable"
     />
     <q-select
       class="q-ml-xs"
@@ -415,7 +418,7 @@ onMounted(() => {
       hide-bottom-space
       bg-color="white"
       @update:model-value="onChangeAgency"
-      :disable="!isLoad"
+      :disable="!isDisable"
     />
   </div>
 
diff --git a/src/modules/13_salary/views/salaryLists.vue b/src/modules/13_salary/views/salaryLists.vue
index 80bf65ffd..622797995 100644
--- a/src/modules/13_salary/views/salaryLists.vue
+++ b/src/modules/13_salary/views/salaryLists.vue
@@ -39,6 +39,7 @@ const snapOptions = ref<DataOption[]>();
 const periodLatest = ref<DataPeriodLatest>();
 
 const isLoad = ref<boolean>(false);
+const isDisable = ref<boolean>(false);
 
 /** ตัวแปร select*/
 const page = ref<number>(1);
@@ -51,6 +52,7 @@ const nextPage = ref<number>(1);
 function getRound() {
   roundOptions.value = [];
   showLoader();
+  isDisable.value = false;
   http
     .get(
       config.API.salaryPeriodActive(year.value.toString()) +
@@ -59,6 +61,7 @@ function getRound() {
     .then(async (res) => {
       const data = res.data.result.data;
       if (data.length !== 0) {
+        isDisable.value = true;
         lastPage.value = Math.ceil(res.data.result.total / pageSize.value);
         const optionMain = await data.map((x: DataRound) => ({
           id: x.id,
@@ -220,8 +223,6 @@ function fetchSalalyPeriod(rootId: string, periodId: string, snap: string) {
       .then(async (res) => {
         const data = res.data.result;
 
-        console.log(roundFilter.value.shortCode);
-
         if (roundFilter.value.shortCode !== "SPECIAL") {
           if (Object.values(data).includes(null)) {
             isLoad.value = false;
@@ -238,6 +239,7 @@ function fetchSalalyPeriod(rootId: string, periodId: string, snap: string) {
       })
       .catch((err) => {
         messageError($q, err);
+        // isLoad.value = true;
       })
       .finally(() => {
         setTimeout(() => {
@@ -396,7 +398,7 @@ onMounted(async () => {
       @update:model-value="onChangeRound"
       :loading="loading"
       @virtual-scroll="onScroll"
-      :disable="!isLoad"
+      :disable="!isDisable"
     >
       <template v-slot:option="scope">
         <q-item v-bind="scope.itemProps">
@@ -422,7 +424,7 @@ onMounted(async () => {
       hide-bottom-space
       bg-color="white"
       @update:model-value="onChangeSnap"
-      :disable="!isLoad"
+      :disable="!isDisable"
     />
     <q-select
       class="q-ml-xs"
@@ -439,7 +441,7 @@ onMounted(async () => {
       hide-bottom-space
       bg-color="white"
       @update:model-value="onChangeAgency"
-      :disable="!isLoad"
+      :disable="!isDisable"
     />
   </div>
 
@@ -480,7 +482,11 @@ onMounted(async () => {
       </q-card>
     </div>
     <div v-else>
-      <PageDashBoard />
+      <PageDashBoard
+        :year="year"
+        :snapShot="snapFilter"
+        :roundFilter="roundFilter"
+      />
     </div>
   </q-card>