diff --git a/src/api/api.history.ts b/src/api/api.history.ts
index c6f78c9..afca0e4 100644
--- a/src/api/api.history.ts
+++ b/src/api/api.history.ts
@@ -1,6 +1,6 @@
-import env from "./index";
-const history = `${env.API_URI}/leave/check-in/history`;
+import env from './index'
+const history = `${env.API_URI}/leave/check-in/history`
 
 export default {
-  history
-};
+  history: () => `${history}`,
+}
diff --git a/src/stores/mixin.ts b/src/stores/mixin.ts
index dda6fbd..ab0b426 100644
--- a/src/stores/mixin.ts
+++ b/src/stores/mixin.ts
@@ -1,5 +1,6 @@
 import { defineStore } from 'pinia'
 import CustomComponent from '@/components/CustomDialog.vue'
+import { Loading, QSpinnerCube } from 'quasar'
 
 export const useCounterMixin = defineStore('mixin', () => {
   function date2Thai(srcDate: Date, isFullMonth = false, isTime = false) {
@@ -113,10 +114,105 @@ export const useCounterMixin = defineStore('mixin', () => {
         if (cancel) cancel()
       })
   }
+  const showLoader = () => {
+    Loading.show({
+      spinner: QSpinnerCube,
+      spinnerSize: 140,
+      spinnerColor: 'primary',
+      backgroundColor: 'white',
+    })
+  }
+
+  const hideLoader = () => {
+    Loading.hide()
+  }
+
+  const messageError = (q: any, e: any = '') => {
+    // q.dialog.hide();
+    if (e.response !== undefined) {
+      if (e.response.data.status !== undefined) {
+        if (e.response.data.status == 401) {
+          //invalid_token
+          q.dialog({
+            component: CustomComponent,
+            componentProps: {
+              title: `พบข้อผิดพลาด`,
+              message: `ล็อกอินหมดอายุ กรุณาล็อกอินใหม่อีกครั้ง`,
+              icon: 'warning',
+              color: 'red',
+              onlycancel: true,
+            },
+          })
+        } else {
+          const message = e.response.data.result ?? e.response.data.message
+          q.dialog({
+            component: CustomComponent,
+            componentProps: {
+              title: `พบข้อผิดพลาด`,
+              message: `${message}`,
+              icon: 'warning',
+              color: 'red',
+              onlycancel: true,
+            },
+          })
+        }
+      } else {
+        if (e.response.status == 401) {
+          //invalid_token
+          q.dialog({
+            component: CustomComponent,
+            componentProps: {
+              title: `พบข้อผิดพลาด`,
+              message: `ล็อกอินหมดอายุ กรุณาล็อกอินใหม่อีกครั้ง`,
+              icon: 'warning',
+              color: 'red',
+              onlycancel: true,
+            },
+          })
+        } else if (e.response.data.successful === false) {
+          q.dialog({
+            component: CustomComponent,
+            componentProps: {
+              title: `พบข้อผิดพลาด`,
+              message: e.response.data.message,
+              icon: 'warning',
+              color: 'red',
+              onlycancel: true,
+            },
+          })
+        } else {
+          q.dialog({
+            component: CustomComponent,
+            componentProps: {
+              title: `พบข้อผิดพลาด`,
+              message: `ข้อมูลผิดพลาดทำให้เกิดการไม่ตอบสนองต่อการเรียกใช้งานดูเว็บไซต์`,
+              icon: 'warning',
+              color: 'red',
+              onlycancel: true,
+            },
+          })
+        }
+      }
+    } else {
+      q.dialog({
+        component: CustomComponent,
+        componentProps: {
+          title: `พบข้อผิดพลาด`,
+          message: `ข้อมูลผิดพลาดทำให้เกิดการไม่ตอบสนองต่อการเรียกใช้งานดูเว็บไซต์`,
+          icon: 'warning',
+          color: 'red',
+          onlycancel: true,
+        },
+      })
+    }
+  }
 
   return {
     date2Thai,
     covertDateObject,
     dialogConfirm,
+    showLoader,
+    hideLoader,
+    messageError,
   }
 })
diff --git a/src/views/HistoryView.vue b/src/views/HistoryView.vue
index 1e0a737..05ef41e 100644
--- a/src/views/HistoryView.vue
+++ b/src/views/HistoryView.vue
@@ -1,73 +1,98 @@
 <script setup lang="ts">
 import type { QTableProps } from 'quasar'
 import { ref, onMounted } from 'vue'
+import { useQuasar } from 'quasar'
 import { useRouter } from 'vue-router'
 import Table from '@/components/TableHistory.vue'
 import ToolBar from '@/components/ToolBar.vue'
-
+import http from '@/plugins/http'
+import config from '@/app.config'
+import { useCounterMixin } from '@/stores/mixin'
 // importStores
 import { useChekIn } from '@/stores/chekin'
 
+const mixin = useCounterMixin()
 const router = useRouter()
 const stores = useChekIn()
+const { showLoader, hideLoader, messageError } = mixin
+const { fetchHistoryList } = stores
+const $q = useQuasar() //ใช้ noti quasar
 
 onMounted(() => {
-  fetchlist()
+  // fetchlist()
+  fetchlistHistory()
 })
 
-function fetchlist() {
-  const listData = [
-    {
-      no: '1',
-      date: '13/08/66',
-      in: '11:20',
-      loIn: 'สำนักงาน ก.ก ',
-      out: '',
-      loOut: '',
-      status: '',
-      Morningstatus: '1',
-      AfternoonStatus: '1',
-      statusEdit: 'wait',
-    },
-    {
-      no: '2',
-      date: '12/08/66',
-      in: '08:04',
-      loIn: 'สำนักงาน ก.ก ',
-      out: '17:01',
-      loOut: 'สำนักงาน ก.ก ',
-      status: 'ลงเวลาเรียบร้อย',
-      Morningstatus: '2',
-      AfternoonStatus: '2',
-      statusEdit: 'edit',
-    },
-    {
-      no: '3',
-      date: '11/08/66',
-      in: '08:34',
-      loIn: 'สำนักงาน ก.ก ',
-      out: '17:36',
-      loOut: 'สำนักงาน ก.ก ',
-      status: 'สาย ทำงานครบ',
-      Morningstatus: '3',
-      AfternoonStatus: '2',
-      statusEdit: 'edit',
-    },
-    {
-      no: '4',
-      date: '10/08/66',
-      in: '08:48',
-      loIn: 'สำนักงาน ก.ก ',
-      out: '17:00',
-      loOut: 'สำนักงาน ก.ก ',
-      status: 'สาย ทำงานไม่ครบ',
-      Morningstatus: '3',
-      AfternoonStatus: '3',
-      statusEdit: 'approve',
-    },
-  ]
-  stores.fetchHistoryList(listData)
+//นำข้อมูลมาแสดง
+const fetchlistHistory = async () => {
+  showLoader()
+  await http
+    .get(config.API.history())
+    .then((res) => {
+      const data = res.data.result
+      fetchHistoryList(data)
+    })
+    .catch((err) => {
+      messageError($q, err)
+    })
+    .finally(() => {
+      hideLoader()
+    })
 }
+
+// function fetchlist() {
+//   const listData = [
+//     {
+//       no: '1',
+//       date: '13/08/66',
+//       in: '11:20',
+//       loIn: 'สำนักงาน ก.ก ',
+//       out: '',
+//       loOut: '',
+//       status: '',
+//       Morningstatus: '1',
+//       AfternoonStatus: '1',
+//       statusEdit: 'wait',
+//     },
+//     {
+//       no: '2',
+//       date: '12/08/66',
+//       in: '08:04',
+//       loIn: 'สำนักงาน ก.ก ',
+//       out: '17:01',
+//       loOut: 'สำนักงาน ก.ก ',
+//       status: 'ลงเวลาเรียบร้อย',
+//       Morningstatus: '2',
+//       AfternoonStatus: '2',
+//       statusEdit: 'edit',
+//     },
+//     {
+//       no: '3',
+//       date: '11/08/66',
+//       in: '08:34',
+//       loIn: 'สำนักงาน ก.ก ',
+//       out: '17:36',
+//       loOut: 'สำนักงาน ก.ก ',
+//       status: 'สาย ทำงานครบ',
+//       Morningstatus: '3',
+//       AfternoonStatus: '2',
+//       statusEdit: 'edit',
+//     },
+//     {
+//       no: '4',
+//       date: '10/08/66',
+//       in: '08:48',
+//       loIn: 'สำนักงาน ก.ก ',
+//       out: '17:00',
+//       loOut: 'สำนักงาน ก.ก ',
+//       status: 'สาย ทำงานไม่ครบ',
+//       Morningstatus: '3',
+//       AfternoonStatus: '3',
+//       statusEdit: 'approve',
+//     },
+//   ]
+//   stores.fetchHistoryList(listData)
+// }
 </script>
 <template>
   <div class="col-12 row justify-center">