From 23d6801f80ac13990dbd967bd8ceb98a96e6d7a8 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 2 Sep 2024 17:37:08 +0700
Subject: [PATCH] refector code

---
 src/components/AscGISMap.vue    |   9 +--
 src/components/FormTime.vue     | 122 +++++++++++++++++---------------
 src/components/PopUp.vue        |  33 ++++++---
 src/components/TableHistory.vue | 102 ++++++++++++++++----------
 src/components/ToolBar.vue      |  53 +++++++++-----
 src/interface/index/Main.ts     |  19 ++++-
 src/stores/chekin.ts            |   3 +-
 src/views/HistoryView.vue       | 121 +++++++++++++++----------------
 src/views/HomeView.vue          |  93 ++++++++++++++++--------
 9 files changed, 338 insertions(+), 217 deletions(-)

diff --git a/src/components/AscGISMap.vue b/src/components/AscGISMap.vue
index 4678ab2..0433376 100644
--- a/src/components/AscGISMap.vue
+++ b/src/components/AscGISMap.vue
@@ -2,17 +2,18 @@
 import { onMounted, ref } from 'vue'
 import { loadModules } from 'esri-loader'
 import axios from 'axios'
+
 import type { LocationObject } from '@/interface/index/Main'
 
 const emit = defineEmits(['update:location'])
 
-function updateLocation(latitude: any, longitude: any, namePOI: string) {
+function updateLocation(latitude: number, longitude: number, namePOI: string) {
   // ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
   emit('update:location', latitude, longitude, namePOI)
 }
 
-const currentPosition = ref<LocationObject>()
-const poiPlaceName = ref<string>('')
+const currentPosition = ref<LocationObject>() //ตำแหน่งปัจจุบัน
+const poiPlaceName = ref<string>('') // ชื่อพื้นที่ใกล้เคียง
 
 // Replace ArcGIS api key
 const apiKey = ref<string>(
@@ -123,7 +124,7 @@ async function initializeMap() {
 }
 
 onMounted(async () => {
-  initializeMap()
+  await initializeMap()
 })
 </script>
 
diff --git a/src/components/FormTime.vue b/src/components/FormTime.vue
index 4c10ec1..e433642 100644
--- a/src/components/FormTime.vue
+++ b/src/components/FormTime.vue
@@ -1,24 +1,32 @@
 <script setup lang="ts">
 import { ref, watch, onMounted } from 'vue'
+import { PropType } from 'vue'
 import { useQuasar } from 'quasar'
 import moment from 'moment'
+
 import http from '@/plugins/http'
 import config from '@/app.config'
+import { useCounterMixin } from '@/stores/mixin'
 
-import type { FormRef } from '@/interface/index/Main'
+import type { FormRef, DataCheckIn } from '@/interface/index/Main'
 import type { FormTimeStemp } from '@/interface/response/checkin'
 
-// importStores
-import { useCounterMixin } from '@/stores/mixin'
-// importType
-
 const $q = useQuasar()
-const mixin = useCounterMixin()
-const { date2Thai, success, dialogConfirm, showLoader, hideLoader } = mixin
+const {
+  date2Thai,
+  success,
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  messageError,
+} = useCounterMixin()
 
+/**
+ * props  จาก components Popup
+ */
 const props = defineProps({
   dataById: {
-    type: Object,
+    type: Object as PropType<DataCheckIn>,
     default: null,
   },
   closePopup: {
@@ -34,16 +42,25 @@ const props = defineProps({
   },
 })
 
-const dataByIdVal = ref<any>([])
-const date = ref<Date | string>(new Date())
-const checkboxIn = ref<boolean>(false)
-const checkboxOut = ref<boolean>(false)
-const reason = ref<string>('')
-const statusAction = ref<boolean>(false)
-
-const dateNow = ref<Date>(new Date())
-const timeNoew = ref<string>('')
+const dataByIdVal = ref<DataCheckIn>() //ข้อมูลประวัติการลงเวลา
+const date = ref<Date | string>(new Date()) //วันที่ข้อแก้ไข
+const checkboxIn = ref<boolean>(false) //ขอแก้ไขเวลาเข้างาน
+const checkboxOut = ref<boolean>(false) //ขอแก้ไขเวลาออกงาน
+const reason = ref<string>('') // เหตุผล
+const statusAction = ref<boolean>(false) //สถานะ เพิ่ม,แก้ไข
+const dateNow = ref<Date>(new Date()) // วันปัจจุบัน
+const timeNoew = ref<string>('') //เวลาปัจจุบัน
+const dateRef = ref<object | null>(null) //ref วันที่ข้อแก้ไข
+const reasonRef = ref<object | null>(null) //ref เหตุผล
+const objectRef: FormRef = {
+  date: dateRef,
+  reason: reasonRef,
+}
+const checkstatusBox = ref<boolean>(false) //สถานะการเลือกเวลาเข้า,ออก
 
+/**
+ * ฟังก์ชันอัปเดตเวลา
+ */
 function updateClock() {
   const date = Date.now()
   const hh = moment(date).format('HH')
@@ -51,16 +68,9 @@ function updateClock() {
   timeNoew.value = `${hh}:${mm} น.`
 }
 
-const dateRef = ref<object | null>(null)
-const reasonRef = ref<object | null>(null)
-
-const objectRef: FormRef = {
-  date: dateRef,
-  reason: reasonRef,
-}
-const checkstatusBox = ref<boolean>(false)
-
-/** function checkValidate*/
+/**
+ * function checkValidate
+ */
 function onCkickSave() {
   const hasError = []
   for (const key in objectRef) {
@@ -81,12 +91,13 @@ function onCkickSave() {
     )
   ) {
     dialogConfirm($q, async () => {
-      const data: FormTimeStemp = await {
+      const data: FormTimeStemp = {
         checkDate: date.value,
         checkInEdit: checkboxIn.value,
         checkOutEdit: checkboxOut.value,
         description: reason.value,
       }
+
       createListTime(data)
     })
   }
@@ -100,20 +111,37 @@ async function createListTime(data: FormTimeStemp) {
   showLoader()
   await http
     .post(config.API.createTimeStamp(), data)
-    .then(() => {
-      success($q, 'บันทึกข้อมูลสำเร็จ')
+    .then(async () => {
+      // เรียก function fetch รายการประวัติการลงเวลา
+      await props.fetchData()
+      await success($q, 'บันทึกข้อมูลสำเร็จ')
+      props.closePopup?.()
     })
     .catch((err) => {
-      console.log(err)
+      messageError($q, err)
     })
     .finally(() => {
-      props.closePopup?.()
       hideLoader()
-      props.fetchData()
     })
 }
 
-/** Hook */
+/**
+ *  watch การเปลี่ยนแปลงของ checkboxIn และ checkboxOut
+ */
+watch(
+  [() => checkboxIn.value, () => checkboxOut.value],
+  ([newCheckboxIn, newCheckboxOut]) => {
+    if (checkstatusBox.value) {
+      if (newCheckboxIn || newCheckboxOut) {
+        checkstatusBox.value = false
+      }
+    }
+  }
+)
+
+/**
+ *  Hook
+ */
 onMounted(() => {
   updateClock()
   dataByIdVal.value = props.dataById
@@ -126,17 +154,6 @@ onMounted(() => {
     )
   }
 })
-
-watch(
-  [() => checkboxIn.value, () => checkboxOut.value],
-  ([newCheckboxIn, newCheckboxOut]) => {
-    if (checkstatusBox.value) {
-      if (newCheckboxIn || newCheckboxOut) {
-        checkstatusBox.value = false
-      }
-    }
-  }
-)
 </script>
 <template>
   <div class="col-12 row">
@@ -149,7 +166,7 @@ watch(
         <q-card-section class="bg-primary text-white q-pa-sm">
           <div class="text-center text-bold">เวลาปัจจุบัน</div>
         </q-card-section>
-        <!-- <div class="q-pa-sm text-primary">เวลาปัจจุบัน</div> -->
+
         <q-card-section class="text-center q-pa-sm">
           <div class="row q-gutter-md">
             <div class="col">{{ date2Thai(dateNow) }}</div>
@@ -187,7 +204,7 @@ watch(
                 :label="`${'วันที่ขอแก้ไข'}`"
                 format-header="YYYY-MM-DD"
                 lazy-rules
-                :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
+                :rules="[(val:string) => !!val || 'กรุณาเลือกวันที่']"
                 hide-bottom-space
               >
                 <template v-slot:prepend>
@@ -203,15 +220,6 @@ watch(
         </div>
       </q-card>
 
-      <!-- <q-card flat bordered class="q-pa-sm col-12 bg-grey-1 q-mt-sm" v-else>
-      <div class="row q-gutter-md text-grey-5">
-        <div class="col-1">
-          <q-icon color="grey-5" name="calendar_today" />
-        </div>
-        <div class="col">{{ dataByIdVal.checkInDate }}</div>
-      </div>
-    </q-card> -->
-
       <q-card
         flat
         bordered
@@ -259,7 +267,7 @@ watch(
           type="textarea"
           :rows="4"
           label-color="grey-5"
-          :rules="[(val) => !!val || 'กรุณากรอกเหตุผล']"
+          :rules="[(val:string) => !!val || 'กรุณากรอกเหตุผล']"
           lazy-rules
           hide-bottom-space
           class="custom-aqua-border"
diff --git a/src/components/PopUp.vue b/src/components/PopUp.vue
index feba530..0683093 100644
--- a/src/components/PopUp.vue
+++ b/src/components/PopUp.vue
@@ -1,9 +1,15 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
+import { PropType } from 'vue'
 
-import HeaderPopup from '@/components/HeaderPopup.vue'
-import FormTime from '@/components/FormTime.vue'
+import type { DataCheckIn } from '@/interface/index/Main'
 
+import HeaderPopup from '@/components/HeaderPopup.vue' // หัว popup
+import FormTime from '@/components/FormTime.vue' //
+
+/**
+ * props จาก components TableHistory
+ */
 const props = defineProps({
   modal: {
     type: Boolean,
@@ -18,7 +24,7 @@ const props = defineProps({
     default: null,
   },
   dataById: {
-    type: Object,
+    type: Object as PropType<DataCheckIn>,
     default: null,
   },
   fetchData: {
@@ -27,15 +33,25 @@ const props = defineProps({
   },
 })
 
-const data = ref<any>()
+const data = ref<DataCheckIn>() // ข้อมูลลงเวลา
+
+/**
+ * ปิด popup
+ * เรียกใช้ฟังก์ชัน props.clickClose()
+ */
 function clickClosePopup() {
   props.clickClose()
 }
 
+/**
+ * watch การเปลี่ยนแปลงของ props.modal
+ */
 watch(
   () => props.modal,
   () => {
-    data.value = props.modal ? props.dataById : null
+    if (props.modal) {
+      data.value = props?.dataById
+    }
   }
 )
 </script>
@@ -43,10 +59,11 @@ watch(
   <q-dialog v-model="props.modal" persistent>
     <q-card :style="$q.screen.lt.sm ? 'width: 100%;' : 'width: 320px;'">
       <HeaderPopup :title="props.title" :clickClose="clickClosePopup" />
+
       <FormTime
-        :dataById="data"
-        :closePopup="clickClosePopup"
-        :fetchData="props.fetchData"
+        :data-byId="data"
+        :close-popup="clickClosePopup"
+        :fetch-data="props.fetchData"
       />
     </q-card>
   </q-dialog>
diff --git a/src/components/TableHistory.vue b/src/components/TableHistory.vue
index 2b0c0f9..ce9c309 100644
--- a/src/components/TableHistory.vue
+++ b/src/components/TableHistory.vue
@@ -1,18 +1,20 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
-import type { QTableProps } from 'quasar'
+
 import { useCounterMixin } from '@/stores/mixin'
-
 import { useChekIn } from '@/stores/chekin'
-import Popup from '@/components/PopUp.vue' // dialog เพิ่ม/ขอแก้ไขลงเวลากรณีพิเศษ
 
-const mixin = useCounterMixin()
-const { date2Thai } = mixin
+import type { QTableProps } from 'quasar'
+import type { Pagination, DataCheckIn } from '@/interface/index/Main'
+
+import Popup from '@/components/PopUp.vue' // dialog เพิ่ม/ขอแก้ไขลงเวลากรณีพิเศษ
+const { date2Thai } = useCounterMixin()
 
 const stores = useChekIn()
-const selected = ref<string[]>([])
 
-/** props from page */
+/**
+ * props ข้อมูลจาก Components Page HistoryView
+ */
 const props = defineProps({
   paging: {
     type: Boolean,
@@ -48,13 +50,13 @@ const props = defineProps({
     default: () => console.log('not function'),
   },
 })
+const emit = defineEmits(['update:change-page'])
 
 const keyword = ref<string>('')
 const tab = ref<string>(props.tab?.toString())
+const selected = ref<string[]>([])
 
-const emit = defineEmits(['update:change-page'])
-
-/** column history table */
+// column history table
 const columns = ref<QTableProps['columns']>(
   props.tab == 'history'
     ? [
@@ -181,35 +183,23 @@ const visibleColumns = ref<string[]>([
   'checkOutStatus',
 ])
 
+const currentPage = ref<number>(1) //หน้าปัจจุบัน
 // Pagination - initial pagination
-const initialPagination = ref({
+const initialPagination = ref<Pagination>({
   sortBy: null,
   descending: false,
   page: 1,
   rowsPerPage: props.pageSize, // set ตาม page หลักส่งมา
 })
 
-// Pagination - page & change page & get new data
-const currentPage = ref<number>(1)
-watch(
-  [() => currentPage.value, () => initialPagination.value.rowsPerPage],
-  () => {
-    emit(
-      'update:change-page',
-      currentPage.value,
-      initialPagination.value.rowsPerPage,
-      keyword.value
-    )
-  }
-)
-
 // Pagination - update rowsPerPage
-async function updatePagination(newPagination: any) {
+async function updatePagination(newPagination: Pagination) {
   initialPagination.value = newPagination
   currentPage.value = 1 // set current page เป็น 1 เสมอเมื่อเปลี่ยน per row
 }
 
 async function filterFn() {
+  // ส่งอีเวนต์ 'update:change-page' เมื่อหน้าเปลี่ยนแปลง
   emit(
     'update:change-page',
     1,
@@ -217,24 +207,34 @@ async function filterFn() {
     keyword.value
   )
 }
+const modalPopup = ref<boolean>(false) //  popup แก้ไขลงเวลา
+const titlePopup = ref<string>('') //  หัวขข้อ popup แก้ไขลงเวลา
+const dataRow = ref<DataCheckIn>() // ข้อมูลการลงเวลา
 
-// popup
-const modalPopup = ref<boolean>(false)
-const titlePopup = ref<string>('')
-const dataRow = ref<any>()
-function openPopup(data: any) {
-  console.log(data)
-
+/**
+ * เปิด popup แก้ไขลงเวลา
+ * กำหนดค่า titlePopup เป็น แก้ไขลงเวลา
+ * @param data ข้อมูลการลงเวลา
+ */
+function openPopup(data: DataCheckIn) {
   const title = 'แก้ไขลงเวลา'
   modalPopup.value = true
   titlePopup.value = title
   dataRow.value = data
 }
 
+/**
+ * ปิด popup แก้ไขลงเวลา
+ */
 function closePopup() {
   modalPopup.value = false
 }
 
+/**
+ * ฟังก์ชั่นสำหรับ convert ข้อความสถานะของการลงเวลา ปกติ, ขาดราชการ หรือสาย
+ * @param status ฟิลด์สถานะ
+ * @returns ข้อความสถานะ ปกติ, ขาดราชการ ,สาย หรือปฏิบัติงานไม่ครบตามกำหนดเวลา
+ */
 function classStatus(status: string) {
   switch (status) {
     case 'ขาดราชการ':
@@ -250,14 +250,35 @@ function classStatus(status: string) {
   }
 }
 
-const modalReject = ref<boolean>(false)
-const reasonRejrct = ref<string>('')
-function onClickOpenPopupRejrct(data: any) {
+const modalReject = ref<boolean>(false) // modal popup หมายเหตุการไม่อนุมัติ
+const reasonRejrct = ref<string>('') // หมายเหตุการไม่อนุมัติ
+
+/**
+ * เปิด popup หมายเหตุการไม่อนุมัติ
+ * @param data  ข้อมูลการลงเวลา
+ */
+function onClickOpenPopupRejrct(data: DataCheckIn) {
   if (data.editStatus === 'ไม่อนุมัติ') {
     reasonRejrct.value = data.editReason
     modalReject.value = true
   }
 }
+
+/**
+ * watch currentPage และ rowsPerPage
+ */
+watch(
+  [() => currentPage.value, () => initialPagination.value.rowsPerPage],
+  () => {
+    // ส่งอีเวนต์ 'update:change-page' เมื่อหน้าเปลี่ยนแปลง
+    emit(
+      'update:change-page',
+      currentPage.value,
+      initialPagination.value.rowsPerPage,
+      keyword.value
+    )
+  }
+)
 </script>
 
 <template>
@@ -295,6 +316,7 @@ function onClickOpenPopupRejrct(data: any) {
       />
     </div>
   </div>
+
   <q-table
     flat
     bordered
@@ -442,6 +464,7 @@ function onClickOpenPopupRejrct(data: any) {
     </template>
   </q-table>
 
+  <!-- หมายเหตุการไม่อนุมัติ -->
   <q-dialog v-model="modalReject">
     <q-card style="width: 35vw; max-width: 35vw">
       <q-toolbar>
@@ -466,12 +489,13 @@ function onClickOpenPopupRejrct(data: any) {
     </q-card>
   </q-dialog>
 
+  <!-- แก้ไขลงเวลา -->
   <Popup
-    :fetchData="props.fetchData"
+    :fetch-data="props.fetchData"
     :modal="modalPopup"
-    :clickClose="closePopup"
+    :click-close="closePopup"
     :title="titlePopup"
-    :dataById="dataRow"
+    :data-ById="dataRow"
   />
 </template>
 
diff --git a/src/components/ToolBar.vue b/src/components/ToolBar.vue
index 445b6ca..b18f76b 100644
--- a/src/components/ToolBar.vue
+++ b/src/components/ToolBar.vue
@@ -1,18 +1,19 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
 
+import { useCounterMixin } from '@/stores/mixin'
+import { useChekIn } from '@/stores/chekin'
+
 import type { DataDateMonthObject } from '@/interface/index/Main'
 
 import Popup from '@/components/PopUp.vue'
-// import HeaderPopup from "@/components/HeaderPopup.vue";
-// import FormTime from "@/components/FormTime.vue";
-import { useCounterMixin } from '@/stores/mixin'
-import { useChekIn } from '@/stores/chekin'
 
-const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง
 const stores = useChekIn()
-const { monthYear2Thai } = mixin
+const { monthYear2Thai } = useCounterMixin()
 
+/**
+ * props จาก components HistoryView
+ */
 const props = defineProps({
   fetchData: {
     type: Function,
@@ -25,37 +26,57 @@ const props = defineProps({
 })
 const emit = defineEmits(['update:year'])
 
-const filterYear = ref<number>(stores.year)
-const titleName = ref<string>('เพิ่มรายการลงเวลากรณีพิเศษ')
+const filterYear = ref<number>(stores.year) //ปีงบประมาณ
+const titleName = ref<string>('เพิ่มรายการลงเวลากรณีพิเศษ') //หัว popup
 const dateMonth = ref<DataDateMonthObject>({
   month: new Date().getMonth(),
   year: stores.year,
 })
+const modalPopup = ref<boolean>(false) // modal เพิ่มรายการลงเวลากรณีพิเศษ
 
-watch(
-  () => stores.year,
-  () => {
-    dateMonth.value.year = stores.year
-  }
-)
-
+/**
+ * ฟังก์ชันอัปเดทปีงบประมาณ
+ * @param type ประเภท year,mount
+ */
 function filterYearFn(type: string) {
   const year = type === 'year' ? filterYear.value : dateMonth.value.year
+  //ส่งค่า ปีงบประมาณ กลับ
   emit('update:year', year, dateMonth.value.month)
 }
 
-const modalPopup = ref<boolean>(false)
+/**
+ * เปิด popup เพิ่มรายการลงเวลากรณีพิเศษ
+ */
 function onClickopen() {
   modalPopup.value = true
 }
+
+/**
+ * ปิด popup เพิ่มรายการลงเวลากรณีพิเศษ
+ */
 function onClickClose() {
   modalPopup.value = false
 }
 
+/**
+ * แปลงวันเดือนปีเป็นเดือนและปีในภาษาไทย
+ * @param val วันเดือนปี
+ * @returns  เดือนและปีในภาษาไทย
+ */
 const monthYearThai = (val: DataDateMonthObject) => {
   if (val == null) return ''
   else return monthYear2Thai(val.month, val.year)
 }
+
+/**
+ * watch การเปลี่ยนแปลงของ stores.year
+ */
+watch(
+  () => stores.year,
+  (newYear) => {
+    dateMonth.value.year = newYear
+  }
+)
 </script>
 <template>
   <div class="items-center col-12 row q-pb-sm">
diff --git a/src/interface/index/Main.ts b/src/interface/index/Main.ts
index 846c59c..14def36 100644
--- a/src/interface/index/Main.ts
+++ b/src/interface/index/Main.ts
@@ -26,10 +26,24 @@ interface LocationObject {
 }
 
 interface Pagination {
-  sortBy: string
+  sortBy: string | null
   descending: boolean
   page: number
-  rowsPerPage: number
+  rowsPerPage: number | undefined
+}
+interface DataCheckIn {
+  checkInDate: string
+  checkInDateTime: string
+  checkInId: string
+  checkInLocation: string
+  checkInStatus: string
+  checkInTime: string
+  checkOutLocation: string
+  checkOutStatus: string
+  checkOutTime: string
+  editReason: string
+  editStatus: string
+  isEdit: boolean
 }
 
 export type {
@@ -39,4 +53,5 @@ export type {
   DataDateMonthObject,
   LocationObject,
   Pagination,
+  DataCheckIn,
 }
diff --git a/src/stores/chekin.ts b/src/stores/chekin.ts
index a29e21d..1182ff7 100644
--- a/src/stores/chekin.ts
+++ b/src/stores/chekin.ts
@@ -18,8 +18,7 @@ export const useChekIn = defineStore('checkin', () => {
    */
   async function fetchHistoryList(data: FormData[]) {
     rows.value = []
-
-    const dataList: Datalist[] = await data.map((e: FormData) => ({
+    const dataList: Datalist[] = data.map((e: FormData) => ({
       checkInId: e.checkInId,
       checkInDate: e.checkInDate ? date2Thai(e.checkInDate) : null,
       checkInDateTime: e.checkInDate ? e.checkInDate : e.checkOutDate,
diff --git a/src/views/HistoryView.vue b/src/views/HistoryView.vue
index d6bb798..6cd2e98 100644
--- a/src/views/HistoryView.vue
+++ b/src/views/HistoryView.vue
@@ -1,39 +1,28 @@
 <script setup lang="ts">
 import { ref, onMounted, watch } from 'vue'
 import { useQuasar } from 'quasar'
+
 import { useRouter } from 'vue-router'
 import http from '@/plugins/http'
 import config from '@/app.config'
-
-/**
- * import Components
- */
-import TableHistory from '@/components/TableHistory.vue'
-import ToolBar from '@/components/ToolBar.vue'
-
-/**
- * importStores
- */
 import { useChekIn } from '@/stores/chekin'
 import { useCounterMixin } from '@/stores/mixin'
 
-/**
- * use
- */
-const mixin = useCounterMixin()
+import TableHistory from '@/components/TableHistory.vue' //ตารางประวัติการลงเวลา
+import ToolBar from '@/components/ToolBar.vue' // เมนู Herder
+
+const $q = useQuasar() //ใช้ noti quasar
 const router = useRouter()
 const stores = useChekIn()
-const { showLoader, hideLoader, messageError } = mixin
+const { showLoader, hideLoader, messageError } = useCounterMixin()
 const { fetchHistoryList } = stores
-const $q = useQuasar() //ใช้ noti quasar
 
-// paging
-const page = ref<number>(1)
-const year = ref<number>(new Date().getFullYear())
-const month = ref<number>(new Date().getMonth())
-const pageSize = ref<number>(10)
-const total = ref<number>(0)
-const maxPage = ref<number>(1)
+const year = ref<number>(new Date().getFullYear()) // ปีงบปรมาณ
+const month = ref<number>(new Date().getMonth()) // เดือน
+const page = ref<number>(1) // หน้าปัจจุบัน
+const pageSize = ref<number>(10) // จำนวนแถวต่อหน้า
+const total = ref<number>(0) // จำนวนทั้งหมด
+const maxPage = ref<number>(1) // จำนวนวหน้าทั้งหมด
 const filter = ref<string>('') //search data table
 
 /**
@@ -43,17 +32,22 @@ const filter = ref<string>('') //search data table
  *
  */
 async function changePage(pageVal: number, pageSizeVal: number, key: string) {
-  page.value = await pageVal
-  pageSize.value = await pageSizeVal
-  filter.value = await key
-  functionFetch()
+  page.value = pageVal
+  pageSize.value = pageSizeVal
+  filter.value = key
+  await functionFetch()
 }
 
-function functionFetch() {
-  stores.tab === 'history' ? fetchlistHistory() : fetchlistTime()
+/**
+ * ฟังก์ชันสำหรับดึงข้อมูลตามประเภทแท็บที่เลือก
+ */
+async function functionFetch() {
+  stores.tab === 'history' ? await fetchlistHistory() : await fetchlistTime()
 }
 
-/*** ฟังก์ชั่นดึงข้อมูลรายการประวัติการลงเวลาจาก api มาแสดง */
+/***
+ * ฟังก์ชั่นดึงข้อมูลรายการประวัติการลงเวลา
+ */
 async function fetchlistHistory() {
   showLoader()
   await http
@@ -64,10 +58,14 @@ async function fetchlistHistory() {
         }&keyword=${filter.value ? filter.value : ''}`
     )
     .then(async (res) => {
-      const data = res.data.result.data
-      total.value = res.data.result.total
-      maxPage.value = await Math.ceil(total.value / pageSize.value)
-      fetchHistoryList(data) // ปิดกรณีมี total
+      // ดึงข้อมูลและจำนวนทั้งหมด
+      const data = await res.data.result.data
+      total.value = await res.data.result.total
+
+      // คำนวณจำนวนหน้า
+      maxPage.value = Math.ceil(total.value / pageSize.value)
+
+      await fetchHistoryList(data)
     })
     .catch((err) => {
       messageError($q, err)
@@ -77,7 +75,9 @@ async function fetchlistHistory() {
     })
 }
 
-/** ฟังก์ชั่นดึงรายการลงเวลากรณีพิเศษ */
+/**
+ * ฟังก์ชั่นดึงรายการลงเวลากรณีพิเศษ
+ */
 async function fetchlistTime() {
   showLoader()
   await http
@@ -90,10 +90,14 @@ async function fetchlistTime() {
         }`
     )
     .then(async (res) => {
-      const data = res.data.result.data
-      total.value = res.data.result.total
-      maxPage.value = await Math.ceil(total.value / pageSize.value)
-      fetchHistoryList(data) // ปิดกรณีมี total
+      // ดึงข้อมูลและจำนวนทั้งหมด
+      const data = await res.data.result.data
+      total.value = await res.data.result.total
+
+      // คำนวณจำนวนหน้า
+      maxPage.value = Math.ceil(total.value / pageSize.value)
+
+      await fetchHistoryList(data)
     })
     .catch((err) => {
       messageError($q, err)
@@ -104,21 +108,22 @@ async function fetchlistTime() {
 }
 
 /**
- * function updateYear
- * @param y ปีที่อัปเดท
+ * ฟังก์ชันสำหรับอัปเดตปีและเดือน
+ * @param y ปีที่ต้องการอัปเดต
+ * @param m เดือนที่ต้องการอัปเดต
  */
 async function updateYear(y: number, m: number) {
   year.value = y
   month.value = m
   stores.year = y
-  functionFetch()
+  await functionFetch() // เรียกใช้งานฟังก์ชัน functionFetch เพื่อดึงข้อมูลใหม่
 }
 
-/** Hook*/
-onMounted(async () => {
-  await functionFetch()
-})
-
+/**
+ * ดูการเปลี่ยนแปลงใน stores.tab เมื่อ stores.tab เปลี่ยนไป
+ * จะรีเซ็ตค่า page , filter เป็นสถานะเริ่มต้น
+ * แล้วเรียก functionFetch เพื่อดึงประวัติการลงเวลาใหม่
+ */
 watch(
   () => stores.tab,
   () => {
@@ -127,6 +132,12 @@ watch(
     functionFetch()
   }
 )
+/**
+ * Hook
+ */
+onMounted(() => {
+  functionFetch()
+})
 </script>
 
 <template>
@@ -168,12 +179,12 @@ watch(
           <q-tab-panels v-model="stores.tab" animated>
             <q-tab-panel name="history">
               <ToolBar
-                :fetchData="functionFetch"
+                :fetch-data="functionFetch"
                 @update:year="updateYear"
                 :tab="stores.tab"
               />
               <TableHistory
-                :fetchData="functionFetch"
+                :fetch-data="functionFetch"
                 :page-size="pageSize"
                 :total="total"
                 :page="page"
@@ -186,7 +197,7 @@ watch(
 
             <q-tab-panel name="time">
               <ToolBar
-                :fetchData="functionFetch"
+                :fetch-data="functionFetch"
                 @update:year="updateYear"
                 :tab="stores.tab"
               />
@@ -202,16 +213,6 @@ watch(
               />
             </q-tab-panel>
           </q-tab-panels>
-          <!-- </q-card> -->
-          <!-- <Table
-            :fetchData="fetchlistHistory"
-            :page-size="pageSize"
-            :total="total"
-            :page="page"
-            :paging="true"
-            @update:change-page="changePage"
-            :max-page="maxPage"
-          /> -->
         </div>
       </q-card>
     </div>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 67a4714..0859629 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -3,26 +3,31 @@ import { ref, reactive, onMounted } from 'vue'
 import { useQuasar } from 'quasar'
 import moment from 'moment'
 import Camera from 'simple-vue-camera'
-import http from '@/plugins/http'
+
 import config from '@/app.config'
-import type { FormRef } from '@/interface/response/checkin'
-import MapCheck from '@/components/AscGISMap.vue'
+import http from '@/plugins/http'
 import { useCounterMixin } from '@/stores/mixin'
 
+import type { FormRef } from '@/interface/response/checkin'
+
+import MapCheck from '@/components/AscGISMap.vue'
+
 const mixin = useCounterMixin()
 const { date2Thai, showLoader, hideLoader, messageError } = mixin
 const $q = useQuasar()
 
-const dialogTime = ref<boolean>(false)
-const stetusCheckin = ref<boolean>(true)
+const modalTime = ref<boolean>(false) // Dailog ลงเวลาเข้างานของคุณ
+const stetusCheckin = ref<boolean>(true) // สถานะเวลา เข้า,ออก
 
-/** function เช็คเวลาต้องลงเวลาเข้าหรือออกงาน */
+/**
+ * fetch เช็คเวลาต้องลงเวลาเข้าหรือออกงาน
+ */
 async function fetchCheckTime() {
   showLoader()
   await http
     .get(config.API.checkTime())
-    .then((res) => {
-      const data = res.data.result
+    .then(async (res) => {
+      const data = await res.data.result
       stetusCheckin.value = data.checkInId ? false : true
       checkInId.value = data.checkInId ? data.checkInId : ''
     })
@@ -40,7 +45,10 @@ const Thai = ref<Date>(dateNow.value)
 const formattedS = ref()
 const formattedM = ref()
 const formattedH = ref()
-/** function อัพเดทเวลา*/
+
+/**
+ * function อัพเดทเวลา
+ */
 function updateClock() {
   const date = Date.now()
   const hh = moment(date).format('HH')
@@ -69,16 +77,19 @@ const checkInId = ref<string>('') //Id ลงเวลา check-in ล่าส
  * @param location  พิกัดละติจูด พิกัดลองติจูด
  * @param namePOI ชื่อสถานที่ ได้มาจากระบบ ArcGis ของกองสารสนเทศภูมิศาสตร์
  */
-async function updateLocation(latitude: any, longitude: any, namePOI: string) {
+async function updateLocation(
+  latitude: number,
+  longitude: number,
+  namePOI: string
+) {
   formLocation.lat = latitude
   formLocation.lng = longitude
   formLocation.POI = namePOI
 }
 
-//location
-const location = ref<string>('')
-// const coordinates = ref<string>('')
-const model = ref<string>('')
+const location = ref<string>('') // พื้นที่ใกล้เคียง
+const model = ref<string>('') //  สถานที่ทำงาน
+// ตัวเลือกสถานที่ทำงาน
 const options = ref<string[]>([
   'ปฏิบัติงานที่บ้าน',
   'ลืมลงเวลาปฏิบัติงาน',
@@ -87,7 +98,9 @@ const options = ref<string[]>([
   'อื่นๆ',
 ])
 
-/** function เลือกสถานที่*/
+/**
+ * function เลือกสถานที่
+ */
 function selectLocation() {
   if (model.value === 'อื่นๆ') {
     useLocation.value = ''
@@ -103,7 +116,9 @@ const img = ref<any>(undefined)
 const photoWidth = ref<number>(350)
 const photoHeight = ref<number>(350)
 
-/** function เปิดกล้อง */
+/**
+ * function เปิดกล้อง
+ */
 async function openCamera() {
   // change camera device
   if (cameraIsOn.value) {
@@ -115,14 +130,18 @@ async function openCamera() {
   cameraIsOn.value = !cameraIsOn.value
 }
 
-/** change camera device */
+/**
+ * change camera device
+ */
 async function changeCamera() {
   const devices: any = await camera.value?.devices(['videoinput'])
   const device = await devices[0]
   camera.value?.changeCamera(device.deviceId)
 }
 
-/** function ถ่ายรูป*/
+/**
+ * function ถ่ายรูป
+ */
 async function capturePhoto() {
   const imageBlob: any = await camera.value?.snapshot(
     { width: photoWidth.value, height: photoHeight.value },
@@ -139,7 +158,9 @@ async function capturePhoto() {
   img.value = url
 }
 
-/** function เปลี่ยนรูปภาพ*/
+/**
+ * function เปลี่ยนรูปภาพ
+ */
 function refreshPhoto() {
   img.value = undefined
   camera.value?.start()
@@ -153,7 +174,9 @@ const objectRef: FormRef = {
   useLocation: useLocationRef,
 }
 
-/** function ตรวจสอบค่าว่างของ input*/
+/**
+ * function ตรวจสอบค่าว่างของ input
+ */
 function validateForm() {
   const hasError = []
   for (const key in objectRef) {
@@ -170,8 +193,11 @@ function validateForm() {
   }
 }
 
-const timeChickin = ref<string>()
-/** function ยืนยันการลงเวลาเข้า - ออก*/
+const timeChickin = ref<string>('') //เวลาเข้างาน,เวลาออกงาน
+
+/**
+ * function ยืนยันการลงเวลาเข้า - ออก
+ */
 async function confirm() {
   showLoader()
   const isLocation = workplace.value === 'in-place' //*true คือ ณ สถานที่ตั้ง, false คือ นอกสถานที่ตั้ง
@@ -188,7 +214,7 @@ async function confirm() {
   await http
     .post(config.API.checkin(), formdata)
     .then(async (res) => {
-      const data = res.data.result
+      const data = await res.data.result
       const dateObject = new Date(data.date)
       const options: Intl.DateTimeFormatOptions = {
         hour12: false,
@@ -199,8 +225,7 @@ async function confirm() {
         dateObject
       )
       timeChickin.value = timeString
-      dialogTime.value = true
-      // await fetchCheckTime()
+      modalTime.value = true
     })
     .catch((err) => {
       messageError($q, err)
@@ -210,19 +235,28 @@ async function confirm() {
     })
 }
 
+/**
+ * ปิด popup แสดงการลงเวลา
+ */
 async function onClickConfirm() {
   await fetchCheckTime()
   cameraIsOn.value = false
   img.value = undefined
-  dialogTime.value = false
+  modalTime.value = false
 }
 
+/**
+ * เลือกสถานที่ทำงาน
+ */
 function updateWorkplace() {
   useLocation.value = ''
   model.value = ''
 }
 
-// class
+/**
+ *  รี้เทินร์ class สีพื้นหลัง
+ * @param val ค่า stetusCheckin
+ */
 const getClass = (val: boolean) => {
   return {
     'bg-primary text-white col-12 row items-center q-px-md q-py-sm': val,
@@ -230,7 +264,6 @@ const getClass = (val: boolean) => {
   }
 }
 
-const fullName = ref<string>('')
 /** Hook*/
 onMounted(async () => {
   await fetchCheckTime()
@@ -426,6 +459,7 @@ onMounted(async () => {
               </div>
             </div>
           </div>
+
           <div class="col-12 text-right">
             <q-separator />
             <div class="col-12 q-pa-md">
@@ -456,7 +490,8 @@ onMounted(async () => {
     </div>
   </div>
 
-  <q-dialog v-model="dialogTime" persistent>
+  <!-- แสดงการลงเวลา -->
+  <q-dialog v-model="modalTime" persistent>
     <q-card class="full-width cardNone">
       <div :class="getClass(stetusCheckin)">
         <div class="text-body1 text-center col-12 text-weight-bold">