เพิ่มข้อความแจ้งเตือกรณีลืมลงเวลาออก

src/views/HomeView.vue

@@ -1,12 +1,5 @@
 <script setup lang="ts">
-import {
+import { ref, reactive, onMounted, watch, onBeforeUnmount, computed } from 'vue'
-  ref,
-  reactive,
-  onMounted,
-  watch,
-  onBeforeUnmount,
-  computed,
-} from 'vue'
 import { useQuasar } from 'quasar'
 import { format } from 'date-fns'
 import Camera from 'simple-vue-camera'
@@ -62,10 +55,40 @@ const msgCheckTime = ref<string>('') // ข้อความแจ้งเต
 const isDisabledCheckTime = ref<boolean>(true) // ข้อความแจ้งเตือน
 const isErr = ref<boolean | null>(null) // ข้อความแจ้งเตือน
 const endTimeAfternoon = ref<string>('12:00:00') //เวลาเช็คเอาท์ตามรอบ
+const crossDayCheckoutWarning = ref<string>('')
 
 const isLoadingCheckTime = ref<boolean>(false) // ตัวแปรสำหรับการโหลด
 const disabledBtn = ref<boolean>(false)
 
+function parseApiDateTime(value?: string | null) {
+  if (!value) return null
+
+  const normalizedValue = value.includes('T') ? value : value.replace(' ', 'T')
+  const parsedDate = new Date(normalizedValue)
+  return Number.isNaN(parsedDate.getTime()) ? null : parsedDate
+}
+
+function isSameCalendarDay(firstDate: Date, secondDate: Date) {
+  return (
+    firstDate.getFullYear() === secondDate.getFullYear() &&
+    firstDate.getMonth() === secondDate.getMonth() &&
+    firstDate.getDate() === secondDate.getDate()
+  )
+}
+
+function updateCrossDayCheckoutWarning(checkInTime?: string | null) {
+  crossDayCheckoutWarning.value = ''
+
+  const checkInDate = parseApiDateTime(checkInTime)
+  if (!checkInDate) return
+
+  if (!isSameCalendarDay(checkInDate, new Date())) {
+    crossDayCheckoutWarning.value = `คุณยังไม่ได้ลงเวลาออกของวันที่ ${date2Thai(
+      checkInDate
+    )} กรุณาลงเวลาออกก่อน จึงจะลงเวลาเข้าของวันนี้ได้`
+  }
+}
+
 /**
  * fetch เช็คเวลาต้องลงเวลาเข้าหรือออกงาน
  */
@@ -78,6 +101,7 @@ async function fetchCheckTime(load: any = true) {
 
       statusCheckin.value = data.checkInId ? false : true
       checkInId.value = data.checkInId ? data.checkInId : ''
+      updateCrossDayCheckoutWarning(data.checkInTime)
       endTimeAfternoon.value = data.endTimeAfternoon
       isDisabledCheckTime.value = isDisabledCheckTime.value ? true : false
     })
@@ -425,11 +449,7 @@ async function onNativePhotoSelected(event: Event) {
 
   if (!(await isValidCapturedImage(file))) {
     clearSelectedPhoto()
-    messageError(
+    messageError($q, '', 'ไม่สามารถอ่านไฟล์รูปภาพได้ กรุณาถ่ายรูปใหม่อีกครั้ง')
-      $q,
-      '',
-      'ไม่สามารถอ่านไฟล์รูปภาพได้ กรุณาถ่ายรูปใหม่อีกครั้ง'
-    )
     return
   }
 
@@ -849,6 +869,7 @@ const mapRef = computed(() =>
 )
 
 const timeChickin = ref<string>('') //เวลาเข้างาน,เวลาออกงาน
+const displayedCheckDate = ref<Date>(new Date())
 
 /** function ยืนยันการลงเวลาเข้า - ออก*/
 async function confirm() {
@@ -870,11 +891,7 @@ async function confirm() {
     }
     clearSelectedPhoto()
     disabledBtn.value = false
-    messageError(
+    messageError($q, '', 'รูปภาพไม่สมบูรณ์ กรุณาถ่ายรูปใหม่อีกครั้งก่อนลงเวลา')
-      $q,
-      '',
-      'รูปภาพไม่สมบูรณ์ กรุณาถ่ายรูปใหม่อีกครั้งก่อนลงเวลา'
-    )
     return
   }
 
@@ -895,6 +912,7 @@ async function confirm() {
     .then(async (res) => {
       const data = await res.data.result
       const dateObject = new Date(data.date)
+      displayedCheckDate.value = dateObject
       checkDate.value = data.date ? true : false
       const options: Intl.DateTimeFormatOptions = {
         hour12: false,
@@ -1197,6 +1215,16 @@ watch(
                 class="col-xs-12 col-md-11 q-pa-md q-col-gutter-md row q-pt-lg"
                 v-if="!isDisabledCheckTime"
               >
+                <div v-if="crossDayCheckoutWarning" class="col-12">
+                  <q-banner
+                    rounded
+                    class="bg-white text-orange-10 warning-banner"
+                  >
+                    <q-icon name="warning" color="warning" size="20px" />
+
+                    {{ crossDayCheckoutWarning }}
+                  </q-banner>
+                </div>
                 <div class="col-xs-12 col-sm-8 gt-xs">
                   <div class="col-12">
                     <MapCheck
@@ -1231,9 +1259,7 @@ watch(
                       <Camera
                         :resolution="{ width: photoWidth, height: photoHeight }"
                         ref="camera"
-                        :class="[
+                        :class="['camera-preview']"
-                          'camera-preview',
-                        ]"
                         :autoplay="false"
                         :playsinline="true"
                         :facingMode="'user'"
@@ -1367,9 +1393,7 @@ watch(
                             height: photoHeight,
                           }"
                           ref="camera"
-                          :class="[
+                          :class="['camera-preview']"
-                            'camera-preview',
-                          ]"
                           :autoplay="false"
                           :playsinline="true"
                           :facingMode="'user'"
@@ -1817,7 +1841,7 @@ watch(
           <div
             class="col-12 text-subtitle1 text-center text-white text-weight-medium"
           >
-            {{ date2Thai(Thai) }}
+            {{ date2Thai(displayedCheckDate) }}
           </div>
           <div class="row col-12 justify-center q-pt-sm">
             <!-- <div class="text-h3 text-white text-weight-bold"></div> -->
@@ -1947,6 +1971,11 @@ watch(
   animation: bounce 2s infinite;
 }
 
+.warning-banner {
+  border: 1px solid #ffcc80;
+  border-left: 4px solid #fb8c00;
+}
+
 @keyframes bounce {
   0%,
   100% {