diff --git a/src/modules/05_leave/componenst/Calendar.vue b/src/modules/05_leave/componenst/Calendar.vue
index 25969f5..ceb3b72 100644
--- a/src/modules/05_leave/componenst/Calendar.vue
+++ b/src/modules/05_leave/componenst/Calendar.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref,  onMounted } from "vue";
+import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -190,9 +190,7 @@ const filterLists = ref<any[]>([
 const filterVal = ref(["x1"]);
 
 onMounted(async () => {
-  console.log("calandar");
-
-  await fetchDataCalendar();
+  // await fetchDataCalendar();
 });
 </script>
 
diff --git a/src/modules/05_leave/views/Main.vue b/src/modules/05_leave/views/Main.vue
index 9df75ee..eb3563b 100644
--- a/src/modules/05_leave/views/Main.vue
+++ b/src/modules/05_leave/views/Main.vue
@@ -1,14 +1,24 @@
 <script setup lang="ts">
-import type { QTableProps } from "quasar";
-// import { defineComponent, onMounted } from "@vue/runtime-core";
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type { QTableProps } from "quasar";
+
 import CalendarView from "@/modules/05_leave/componenst/Calendar.vue";
 import ListView from "@/modules/05_leave/componenst/ListCalendar.vue";
+
+import { useCounterMixin } from "@/stores/mixin";
 import { useLeaveStore } from "@/modules/05_leave/store";
 
+const mixin = useCounterMixin();
 const leaveStore = useLeaveStore();
+const { showLoader, hideLoader, messageError } = mixin;
+
 const router = useRouter();
+const $q = useQuasar();
 
 const itemPie = ref([
   {
@@ -36,9 +46,6 @@ const itemPie = ref([
     remain: "3",
   },
 ]);
-
-const data = ref(false);
-
 const columns = ref<QTableProps["columns"]>([
   {
     name: "id",
@@ -122,12 +129,33 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px; width:15%;",
   },
 ]);
-
 const pagination = ref({ rowsPerPage: 10 });
 
-const addAbsence = async () => {
+const modalStatsTable = ref<boolean>(false);
+
+/** function เรียกข้อมูลตารางสถิติการลา*/
+async function fetchStatsTable() {
+  modalStatsTable.value = true;
+  // showLoader();
+  // await http
+  //   .get(config.API.leaveStats())
+  //   .then((res) => {
+  //     console.log(res);
+  //   })
+  //   .catch((err) => {
+  //     messageError($q, err);
+  //   })
+  //   .finally(() => {
+  //     hideLoader();
+  //   });
+}
+
+/** function redirectTo  ยื่นใบลา*/
+async function addAbsence() {
   router.push(`/leave/add`);
-};
+}
+
+onMounted(async () => {});
 </script>
 
 <template>
@@ -160,7 +188,7 @@ const addAbsence = async () => {
               flat
               class="text-blue"
               icon="mdi-chart-line-variant"
-              @click="data = true"
+              @click="fetchStatsTable"
               label="ตารางสถิติการลา"
             />
           </q-card>
@@ -292,7 +320,7 @@ const addAbsence = async () => {
   </div>
 
   <!-- modal ตารางสถิติการลา -->
-  <q-dialog v-model="data" persistent>
+  <q-dialog v-model="modalStatsTable" persistent>
     <q-card style="min-width: 85%">
       <q-card-section class="row items-center q-pa-sm">
         <div class="text-bold q-pl-sm">ตารางสถิติการลา</div>