diff --git a/package.json b/package.json
index fe271a7..8405cf4 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,7 @@
     "register-service-worker": "^1.7.2",
     "simple-vue-camera": "^1.1.3",
     "vite-plugin-pwa": "^0.16.7",
-    "vue": "^3.2.45",
+    "vue": "^3.4.15",
     "vue-router": "^4.1.6",
     "vue3-google-map": "^0.18.0"
   },
diff --git a/src/components/PopUp.vue b/src/components/PopUp.vue
index 2955b22..2da62b5 100644
--- a/src/components/PopUp.vue
+++ b/src/components/PopUp.vue
@@ -41,7 +41,7 @@ watch(
 </script>
 <template>
   <q-dialog v-model="props.modal" persistent>
-    <q-card class="column" :style="$q.screen.lt.sm ? 'width: 100%;': 'width: 450px;'">
+    <q-card class="column" :style="$q.screen.lt.sm ? 'width: 100%;': 'width: 320px;'">
       <HeaderPopup :title="props.title" :clickClose="clickClosePopup" />
       <FormTime
         :dataById="data"
diff --git a/src/components/TableHistory.vue b/src/components/TableHistory.vue
index 668973e..8b03e9d 100644
--- a/src/components/TableHistory.vue
+++ b/src/components/TableHistory.vue
@@ -2,11 +2,8 @@
 import type { QTableProps } from 'quasar'
 import { ref, watch } from 'vue'
 
-// importStores
 import { useChekIn } from '@/stores/chekin'
-
-// importComponent
-import Popup from '@/components/PopUp.vue'
+import Popup from '@/components/PopUp.vue' // dialog เพิ่ม/ขอแก้ไขลงเวลากรณีพิเศษ
 
 const stores = useChekIn()
 const selected = ref<string[]>([])
@@ -38,36 +35,6 @@ const props = defineProps({
     defualt: '',
     required: true,
   },
-  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'),
@@ -121,71 +88,121 @@ async function filterFn() {
 }
 
 /** column history table */
-const columns = ref<QTableProps['columns']>([
-  {
-    name: 'checkInDate',
-    align: 'left',
-    label: 'วัน/เดือน/ปี',
-    sortable: true,
-    field: 'checkInDate',
-    headerStyle: 'font-size: 14px',
-    style: 'font-size: 14px; width:15%;',
-  },
-  {
-    name: 'checkInTime',
-    align: 'left',
-    label: 'เวลาเข้างาน',
-    sortable: true,
-    field: 'checkInTime',
-    headerStyle: 'font-size: 14px',
-    style: 'font-size: 14px; width:15%;',
-  },
-  {
-    name: 'checkInLocation',
-    align: 'left',
-    label: 'พิกัด',
-    sortable: true,
-    field: 'checkInLocation',
-    headerStyle: 'font-size: 14px',
-    style: 'font-size: 14px',
-  },
-  {
-    name: 'checkInStatus',
-    align: 'left',
-    label: 'สถานะช่วงเช้า',
-    sortable: true,
-    field: 'checkInStatus',
-    headerStyle: 'font-size: 14px',
-    style: 'font-size: 14px; width:15%;',
-  },
-  {
-    name: 'checkOutTime',
-    align: 'left',
-    label: 'เวลาออกงาน',
-    sortable: true,
-    field: 'checkOutTime',
-    headerStyle: 'font-size: 14px',
-    style: 'font-size: 14px; width:15%;',
-  },
-  {
-    name: 'checkOutLocation',
-    align: 'left',
-    label: 'พิกัด',
-    sortable: true,
-    field: 'checkOutLocation',
-    headerStyle: 'font-size: 14px',
-    style: 'font-size: 14px',
-  },
-  {
-    name: 'checkOutStatus',
-    align: 'left',
-    label: 'สถานะช่วงบ่าย',
-    sortable: true,
-    field: 'checkOutStatus',
-    headerStyle: 'font-size: 14px',
-    style: 'font-size: 14px; width:15%;',
-  },
-])
+const columns = ref<QTableProps['columns']>(
+  props.tab == 'history'
+    ? [
+        {
+          name: 'checkInDate',
+          align: 'left',
+          label: 'วัน/เดือน/ปี',
+          sortable: true,
+          field: 'checkInDate',
+          headerStyle: 'font-size: 14px',
+          style: 'font-size: 14px; width:15%;',
+        },
+        {
+          name: 'checkInTime',
+          align: 'left',
+          label: 'เวลาเข้างาน',
+          sortable: true,
+          field: 'checkInTime',
+          headerStyle: 'font-size: 14px',
+          style: 'font-size: 14px; width:15%;',
+        },
+        {
+          name: 'checkInLocation',
+          align: 'left',
+          label: 'พิกัด',
+          sortable: true,
+          field: 'checkInLocation',
+          headerStyle: 'font-size: 14px',
+          style: 'font-size: 14px',
+        },
+        {
+          name: 'checkInStatus',
+          align: 'left',
+          label: 'สถานะช่วงเช้า',
+          sortable: true,
+          field: 'checkInStatus',
+          headerStyle: 'font-size: 14px',
+          style: 'font-size: 14px; width:15%;',
+        },
+        {
+          name: 'checkOutTime',
+          align: 'left',
+          label: 'เวลาออกงาน',
+          sortable: true,
+          field: 'checkOutTime',
+          headerStyle: 'font-size: 14px',
+          style: 'font-size: 14px; width:15%;',
+        },
+        {
+          name: 'checkOutLocation',
+          align: 'left',
+          label: 'พิกัด',
+          sortable: true,
+          field: 'checkOutLocation',
+          headerStyle: 'font-size: 14px',
+          style: 'font-size: 14px',
+        },
+        {
+          name: 'checkOutStatus',
+          align: 'left',
+          label: 'สถานะช่วงบ่าย',
+          sortable: true,
+          field: 'checkOutStatus',
+          headerStyle: 'font-size: 14px',
+          style: 'font-size: 14px; width:15%;',
+        },
+      ]
+    : [
+        {
+          name: 'checkInDate',
+          align: 'left',
+          label: 'วัน/เดือน/ปี',
+          sortable: true,
+          field: 'checkInDate',
+          headerStyle: 'font-size: 14px',
+          style: 'font-size: 14px; width:15%;',
+        },
+        {
+          name: 'checkInTime',
+          align: 'left',
+          label: 'เวลาเข้างาน',
+          sortable: true,
+          field: 'checkInTime',
+          headerStyle: 'font-size: 14px',
+          style: 'font-size: 14px; width:15%;',
+        },
+        {
+          name: 'checkInLocation',
+          align: 'left',
+          label: 'พิกัด',
+          sortable: true,
+          field: 'checkInLocation',
+          headerStyle: 'font-size: 14px',
+          style: 'font-size: 14px',
+        },
+        {
+          name: 'checkOutTime',
+          align: 'left',
+          label: 'เวลาออกงาน',
+          sortable: true,
+          field: 'checkOutTime',
+          headerStyle: 'font-size: 14px',
+          style: 'font-size: 14px; width:15%;',
+        },
+        {
+          name: 'checkOutLocation',
+          align: 'left',
+          label: 'พิกัด',
+          sortable: true,
+          field: 'checkOutLocation',
+          headerStyle: 'font-size: 14px',
+          style: 'font-size: 14px',
+        },
+      ]
+)
 const visibleColumns = ref<string[]>([
   'checkInDate',
   'checkInTime',
diff --git a/src/interface/response/Main.ts b/src/interface/response/Main.ts
index b3a1426..574f78b 100644
--- a/src/interface/response/Main.ts
+++ b/src/interface/response/Main.ts
@@ -5,7 +5,7 @@ interface Noti {
   type: string
   payload: null
   isOpen: false
-  receiveDate: Date | null
+  receiveDate: Date
   openDate: null
   createdFullName: string
 }
diff --git a/src/views/HistoryView.vue b/src/views/HistoryView.vue
index 9116822..3cbf114 100644
--- a/src/views/HistoryView.vue
+++ b/src/views/HistoryView.vue
@@ -47,10 +47,7 @@ function functionFetch() {
   stores.tab === 'history' ? fetchlistHistory() : fetchlistTime()
 }
 
-/**
- * ฟังก์ชั่นดึงข้อมูลรายการประวัติการลงเวลาจาก api มาแสดง
- * @param loading แสดง loading ไหม true คือแสดง, false คือไม่แสดง
- */
+/*** ฟังก์ชั่นดึงข้อมูลรายการประวัติการลงเวลาจาก api มาแสดง */
 async function fetchlistHistory() {
   showLoader()
   await http
@@ -74,6 +71,7 @@ async function fetchlistHistory() {
     })
 }
 
+/** ฟังก์ชั่นดึงรายการลงเวลากรณีพิเศษ */
 async function fetchlistTime() {
   showLoader()
   await http
@@ -124,6 +122,7 @@ watch(
   }
 )
 </script>
+
 <template>
   <div class="col-12 row justify-center">
     <div class="col-xs-12 col-sm-12 col-md-12">
@@ -211,4 +210,4 @@ watch(
       </q-card>
     </div>
   </div>
-</template>
+</template>
\ No newline at end of file
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 900305a..ec75625 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,20 +1,12 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
 import { useQuasar } from 'quasar'
-import keycloak from '@/plugins/keycloak'
 import moment from 'moment'
 import Camera from 'simple-vue-camera'
 import http from '@/plugins/http'
 import config from '@/app.config'
-
-// import Type
 import type { FormRef } from '@/interface/response/checkin'
-
-// import components
 import MapCheck from '@/components/AscGISMap.vue'
-
-// import Stores
 import { useCounterMixin } from '@/stores/mixin'
 
 const mixin = useCounterMixin()
diff --git a/src/views/MianView.vue b/src/views/MianView.vue
index f9dc01f..be34ea3 100644
--- a/src/views/MianView.vue
+++ b/src/views/MianView.vue
@@ -6,16 +6,13 @@ import keycloak from '@/plugins/keycloak'
 import http from '@/plugins/http'
 import config from '@/app.config'
 
-// import Type
 import type { notiType } from '@/interface/index/Main'
-
-// import Stores
 import { useCounterMixin } from '@/stores/mixin'
+import type { Noti } from '@/interface/response/Main'
 
 const mixin = useCounterMixin()
 const {
   date2Thai,
-  showLoader,
   hideLoader,
   messageError,
   dialogRemove,
@@ -28,19 +25,24 @@ const notiTrigger = ref<boolean>(false)
 const notiList = ref<notiType[]>([])
 const totalNotiList = ref<number>(0)
 const totalNoti = ref<number>(0)
+/*** ฟังก์ชั่นดึงข้อมูลจำนวนการแจ้งเตือน */
 async function fetchTotolNotificate() {
   await http
     .get(config.API.msgNotificateTotal)
     .then((res) => {
       totalNoti.value = res.data.result
     })
-    .catch((err) => {
-      messageError($q, err)
-    })
+    // .catch((err) => {
+    //   messageError($q, err)
+    // })
 }
 
 const statusLoad = ref<boolean>(false)
-/** function เรียกข้อมุลแจ้งเตือน */
+/**
+ * ฟังก์ชั่นดึงข้อมูลรายการแจ้งเตือน
+ * @param index page ที่ต้องการโหลดข้อมูล
+ * @param type DEL คือโหลดหลังลบข้อความ, NOMAL คือกรณีโหลดข้อมูลปกติ
+ */
 async function fetchNotifications(index: number, type: string) {
   await http
     .get(config.API.msgNotificate + `?page=${index}&pageSize=${20}`)
@@ -51,7 +53,7 @@ async function fetchNotifications(index: number, type: string) {
       if (type === 'DEL') {
         notiList.value = []
       }
-      response.map((e: any) => {
+      response.map((e: Noti) => {
         list.push({
           id: e.id,
           sender:
@@ -66,12 +68,9 @@ async function fetchNotifications(index: number, type: string) {
       notiList.value.push(...list)
       statusLoad.value = totalNotiList.value === 0 ? true : false
     })
-    .catch((err) => {
-      messageError($q, err)
-    })
-    .finally(() => {
-      // hideLoader()
-    })
+    // .catch((err) => {
+    //   messageError($q, err)
+    // })
 }
 
 /**
@@ -114,7 +113,13 @@ const thaiOptions: Intl.DateTimeFormatOptions = {
   hour: '2-digit',
   minute: '2-digit',
 }
+
 const page = ref<number>(0)
+/**
+ * โหลดรายการแจ้งเตือนเพิ่มเมื่อ scroll
+ * @param index 
+ * @param done 
+ */
 function onLoad(index: any, done: any) {
   if (
     notiList.value.length < totalNotiList.value ||
@@ -150,6 +155,7 @@ onMounted(async () => {
   }
 })
 </script>
+
 <template>
   <q-layout view="hHh LpR fFr">
     <!-- header -->
@@ -351,6 +357,7 @@ onMounted(async () => {
     </q-page-container>
   </q-layout>
 </template>
+
 <style>
 .bg-drawer {
   background: #242a3d;
diff --git a/src/views/SampleCamera.vue b/src/views/SampleCamera.vue
index 04e3d49..213806d 100644
--- a/src/views/SampleCamera.vue
+++ b/src/views/SampleCamera.vue
@@ -1,3 +1,4 @@
+<!-- File test function -->
 <script setup lang="ts">
 import Camera from 'simple-vue-camera'
 import { ref } from 'vue'