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/components/TableHistory.vue b/src/components/TableHistory.vue
index a2e36d1..219b381 100644
--- a/src/components/TableHistory.vue
+++ b/src/components/TableHistory.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { QTableProps } from 'quasar'
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 
 // importStores
 import { useChekIn } from '@/stores/chekin'
@@ -9,7 +9,87 @@ import { useChekIn } from '@/stores/chekin'
 import Popup from '@/components/PopUp.vue'
 
 const stores = useChekIn()
+const props = defineProps({
+  paging: {
+    type: Boolean,
+    defualt: false,
+  },
+  pageSize: {
+    type: Number,
+    defualt: 25,
+  },
+  page: {
+    type: Number,
+    defualt: 1,
+  },
+  maxPage: {
+    type: Number,
+    defualt: 1,
+  },
+  total: {
+    type: Number,
+    defualt: 0,
+  },
+  nornmalData: {
+    type: Boolean,
+    defualt: false,
+  },
+  nextPageVisible: {
+    type: Boolean,
+    defualt: false,
+  },
+  publicData: {
+    type: Boolean,
+    defualt: true,
+    required: false,
+  },
+  updateData: {
+    type: Boolean,
+    defualt: true,
+    required: false,
+  },
+  statusPayment: {
+    type: Boolean,
+    required: false,
+  },
+  setSeat: {
+    type: Boolean,
+    required: false,
+  },
+  publicNoBtn: {
+    type: Boolean,
+    defualt: false,
+  },
+  fetchData: {
+    type: Function,
+    default: () => console.log('not function'),
+  },
+  changePage: {
+    type: Function,
+    default: () => console.log('not function'),
+  },
+})
 
+// Pagination - page & change page & get new data
+const currentPage = ref<number>(1)
+watch(currentPage, () => {
+  console.log(currentPage.value)
+  props.changePage(currentPage.value, props.pageSize, true)
+})
+
+// Pagination - initial pagination
+const initialPagination = ref<any>({
+  sortBy: null,
+  descending: false,
+  page: 1,
+  rowsPerPage: props.pageSize,
+})
+
+// Pagination - update rowsPerPage
+async function updatePagination(newPagination: any) {
+  props.changePage(1, newPagination.rowsPerPage, true)
+  initialPagination.value = newPagination
+}
 const columns = ref<QTableProps['columns']>([
   {
     name: 'date',
@@ -127,6 +207,7 @@ const pagination = ref({
     :style="$q.screen.gt.xs ? 'max-height: 64vh' : ''"
     :grid="$q.screen.gt.xs ? false : true"
     v-model:pagination="pagination"
+    @update:pagination="updatePagination"
   >
     <template v-slot:header="props">
       <q-tr :props="props">
diff --git a/src/stores/chekin.ts b/src/stores/chekin.ts
index 8506ab1..9cc2d40 100644
--- a/src/stores/chekin.ts
+++ b/src/stores/chekin.ts
@@ -1,23 +1,33 @@
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
+import http from '@/plugins/http'
+import config from '@/app.config'
 
 export const useChekIn = defineStore('checkin', () => {
   const rows = ref<any>()
 
-  function fetchHistoryList(data: any) {
-    console.log(data)
-    const datalist = data.map((e: any) => ({
-      no: e.no,
+  async function fetchHistoryList(data: any) {
+    // console.log(data)
+    rows.value = []
+    const datalist = await data.map((e: any) => ({
+      id: e.id,
       date: e.date,
-      in: e.in,
-      loIn: e.loIn,
-      out: e.out,
-      loOut: e.loOut,
-      status: e.status,
-      Morningstatus: convertStatus(e.Morningstatus),
-      AfternoonStatus: convertStatus(e.AfternoonStatus),
-      statusEdit: e.statusEdit,
-      statusEditName: convertStatusEdit(e.statusEdit),
+      // no: e.no,
+      // in: e.in,
+      // loIn: e.loIn,
+      // out: e.out,
+      // loOut: e.loOut,
+      // status: e.status,
+      // Morningstatus: convertStatus(e.Morningstatus),
+      // AfternoonStatus: convertStatus(e.AfternoonStatus),
+      // statusEdit: e.statusEdit,
+      // statusEditName: convertStatusEdit(e.statusEdit),
+      checkInTime: e.checkInTime,
+      checkInLocation: e.checkInLocation,
+      checkOutTime: e.checkOutTime,
+      checkOutLocation: e.checkOutLocation,
+      checkInStatus: convertStatus(e.checkInStatus),
+      checkOutStatus: convertStatus(e.checkOutStatus),
     }))
     rows.value = datalist
   }
@@ -57,5 +67,6 @@ export const useChekIn = defineStore('checkin', () => {
     rows,
     fetchHistoryList,
     classColorStatus,
+    // fetchlistHistory,
   }
 })
diff --git a/src/stores/mixin.ts b/src/stores/mixin.ts
index b411793..412e20f 100644
--- a/src/stores/mixin.ts
+++ b/src/stores/mixin.ts
@@ -127,6 +127,98 @@ 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,
+        },
+      })
+    }
+  }
 
   function messageError(q: any, e: any = '') {
     // q.dialog.hide();
@@ -214,6 +306,9 @@ export const useCounterMixin = defineStore('mixin', () => {
     hideLoader,
     covertDateObject,
     dialogConfirm,
+    showLoader,
+    hideLoader,
+    messageError,
     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">