From 005cdbd95b84ec427bc4e8291359d7ef2a633c23 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Mon, 27 Apr 2026 20:18:09 +0700
Subject: [PATCH 01/33] fixed map api key

---
 docker/entrypoint.sh          | 2 --
 src/components/AscGISMap.vue  | 3 +--
 src/components/MapCheckin.vue | 2 +-
 3 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/docker/entrypoint.sh b/docker/entrypoint.sh
index 17560f4..aacd544 100644
--- a/docker/entrypoint.sh
+++ b/docker/entrypoint.sh
@@ -12,8 +12,6 @@ do
   sed -i 's|VITE_URL_SSO|'${VITE_URL_SSO}'|g' $file
   sed -i 's|VITE_URL_LANDING|'${VITE_URL_LANDING}'|g' $file
   sed -i 's|VITE_URL_USER|'${VITE_URL_USER}'|g' $file
-  sed -i 's|VITE_GOOGLE_MAPS_API_KEY|'${VITE_GOOGLE_MAPS_API_KEY}'|g' $file
-  sed -i 's|VITE_ARCGIS_API_KEY|'${VITE_ARCGIS_API_KEY}'|g' $file
 
 done
 
diff --git a/src/components/AscGISMap.vue b/src/components/AscGISMap.vue
index 828f81a..e39f58d 100644
--- a/src/components/AscGISMap.vue
+++ b/src/components/AscGISMap.vue
@@ -33,8 +33,7 @@ const mapView = shallowRef<any>(null) // Store mapView reference for cleanup (us
 
 // ArcGIS API key from environment variable
 const apiKey = ref<string>(
-  import.meta.env.VITE_ARCGIS_API_KEY ||
-    'YLATgWuywoeRLHn6KImj5rg7UaP8bJoR9jiTldoCVBHlqFIebwMSA5wIXEmcYhwXwMHkmNISEYtUz3x0oiGIIx0bIXXnUwi0OzupoOEtDrQIsRPVtor7gaPpXEmH8TrNaMT3snf6zO_yujHLGzborg-L9aeAjTJn4ndL6f8qFmRzYcX93E2vyA-7XCufLYTRsdTE5Aq-9hnx1q9PmYVMqhAZpL7dWqn3JgO33fRXetk.'
+  'YLATgWuywoeRLHn6KImj5rg7UaP8bJoR9jiTldoCVBHlqFIebwMSA5wIXEmcYhwXwMHkmNISEYtUz3x0oiGIIx0bIXXnUwi0OzupoOEtDrQIsRPVtor7gaPpXEmH8TrNaMT3snf6zO_yujHLGzborg-L9aeAjTJn4ndL6f8qFmRzYcX93E2vyA-7XCufLYTRsdTE5Aq-9hnx1q9PmYVMqhAZpL7dWqn3JgO33fRXetk.'
 )
 const zoomMap = ref<number>(18)
 const textTooltip = ref<string>(
diff --git a/src/components/MapCheckin.vue b/src/components/MapCheckin.vue
index 9e18ec0..6925eaa 100644
--- a/src/components/MapCheckin.vue
+++ b/src/components/MapCheckin.vue
@@ -5,7 +5,7 @@ import { useQuasar } from 'quasar'
 
 const $q = useQuasar()
 
-const googleMapsApiKey = import.meta.env.VITE_GOOGLE_MAPS_API_KEY || ''
+const googleMapsApiKey = 'AIzaSyBzPSF5NxUZ1G8DKBnJvJPTqCR0Ct2xf58'
 
 declare var google: any
 const center = ref<any>()

From 001e7d35801e3726d0777b1a606ed77c8aa6b0cc Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Tue, 28 Apr 2026 09:47:12 +0700
Subject: [PATCH 02/33] fixed image profile to store

---
 src/stores/positionKeycloak.ts | 12 ++++++++++++
 src/views/MainView.vue         | 17 +++++++----------
 2 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/src/stores/positionKeycloak.ts b/src/stores/positionKeycloak.ts
index a856ede..22ffb52 100644
--- a/src/stores/positionKeycloak.ts
+++ b/src/stores/positionKeycloak.ts
@@ -11,16 +11,26 @@ export const usePositionKeycloakStore = defineStore(
       'รายการลงเวลากรณีพิเศษ',
     ])
     const dataPositionKeycloak = ref<KeycloakPosition | null>(null)
+    const profileImg = ref<string>('')
 
     function setPositionKeycloak(data: KeycloakPosition) {
       dataPositionKeycloak.value = data
     }
 
+    /**
+     * ตั้งค่ารูปโปรไฟล์ผู้ใช้งาน
+     * @param url URL ของรูปโปรไฟล์
+     */
+    function setProfileImg(url: string) {
+      profileImg.value = url
+    }
+
     /**
      * ล้างข้อมูล Keycloak position (ใช้เมื่อ logout)
      */
     function clearPositionKeycloak() {
       dataPositionKeycloak.value = null
+      profileImg.value = ''
       // ลบ localStorage ด้วยเพื่อให้แน่ใจว่าข้อมูลหายจริง
       localStorage.removeItem('positionKeycloak')
     }
@@ -52,7 +62,9 @@ export const usePositionKeycloakStore = defineStore(
     return {
       setPositionKeycloak,
       clearPositionKeycloak,
+      setProfileImg,
       dataPositionKeycloak,
+      profileImg,
       findOrgName,
       menuData,
     }
diff --git a/src/views/MainView.vue b/src/views/MainView.vue
index edebfbc..7e7d42b 100644
--- a/src/views/MainView.vue
+++ b/src/views/MainView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import { useQuasar } from 'quasar'
 import { useRouter } from 'vue-router'
 
@@ -185,12 +185,6 @@ async function fetchKeycloakPosition() {
     privacyStore.modalPrivacy = !existingData.privacyCheckin
     privacyStore.setAccepted(existingData.privacyCheckin)
 
-    //เช็คว่ามีรูปไหม ถ้ามีรูปเรียกข้อมูลรูป
-    if (existingData.avatarName) {
-      getImg(existingData.profileId, existingData.avatarName)
-    } else {
-      profileImg.value = avatar
-    }
     return
   }
 
@@ -222,7 +216,7 @@ async function fetchKeycloakPosition() {
       if (keycloakData.avatarName) {
         getImg(keycloakData.profileId, keycloakData.avatarName)
       } else {
-        profileImg.value = avatar
+        positionKeycloakStore.setProfileImg(avatar)
       }
     })
     .catch((err) => {
@@ -230,12 +224,15 @@ async function fetchKeycloakPosition() {
     })
 }
 
-const profileImg = ref<string>('')
+const profileImg = computed({
+  get: () => positionKeycloakStore.profileImg,
+  set: (value) => positionKeycloakStore.setProfileImg(value),
+})
 function getImg(id: string, pathName: string) {
   http
     .get(config.API.fileByFile('ทะเบียนประวัติ', 'โปรไฟล์', id, pathName))
     .then((res) => {
-      profileImg.value = res.data.downloadUrl
+      positionKeycloakStore.setProfileImg(res.data.downloadUrl)
     })
 }
 

From ec22714f01a4190321375d1ea5ef54ea8a536388 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Thu, 30 Apr 2026 11:50:20 +0700
Subject: [PATCH 03/33] fix code error

---
 src/views/HomeView.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 9de4f22..8017b7c 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -69,7 +69,7 @@ const formattedM = ref()
 const formattedH = ref()
 const formattedHH = ref()
 const formattedA = ref()
-const clockInterval = ref<number | NodeJS.Timeout | undefined>()
+const clockInterval = ref<number | undefined>()
 
 /** function อัพเดทเวลา*/
 function updateClock() {
@@ -194,7 +194,7 @@ const availableCameras = ref<any[]>([])
 const currentCameraIndex = ref<number>(0)
 const currentCameraType = ref<'front' | 'back' | 'unknown'>('unknown')
 
-const intervalId = ref<number | NodeJS.Timeout | undefined>(undefined) // ต้องใช้ตัวแปรเก็บค่า interval
+const intervalId = ref<number | undefined>(undefined) // ต้องใช้ตัวแปรเก็บค่า interval
 
 /**
  * เริ่มจาก onMounted #1 เช็ค status คิว
@@ -316,7 +316,7 @@ async function openCamera() {
   if (!isPermissionCameraDenied.value) {
     // change camera device
     if (cameraIsOn.value) {
-      await camera.value?.stop()
+      camera.value?.stop()
     } else {
       await camera.value?.start()
       const devices: any = await camera.value?.devices(['videoinput'])
@@ -405,7 +405,7 @@ async function capturePhoto() {
   const file = new File([imageBlob], fileName, { type: 'image/png' })
   fileImg.value = file
   //แสดงรูป
-  await camera.value?.stop()
+  camera.value?.stop()
   const url = URL.createObjectURL(imageBlob)
   img.value = url
 }

From e9d28197df551ef9d0716663073c8c051bfbb26a Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Thu, 30 Apr 2026 15:55:31 +0700
Subject: [PATCH 04/33] fix switch Landscape -> Portrait

---
 .../hrms-checkin-expert/MEMORY.md             |   5 +
 .../issue_position_orientation_change.md      |  48 ++
 src/components/AscGISMap.vue                  | 756 ++++++++++++++----
 src/components/AscGISMapTime.vue              | 335 +++++---
 src/views/HomeView.vue                        |  99 ++-
 5 files changed, 964 insertions(+), 279 deletions(-)
 create mode 100644 .claude/agent-memory/hrms-checkin-expert/MEMORY.md
 create mode 100644 .claude/agent-memory/hrms-checkin-expert/issue_position_orientation_change.md

diff --git a/.claude/agent-memory/hrms-checkin-expert/MEMORY.md b/.claude/agent-memory/hrms-checkin-expert/MEMORY.md
new file mode 100644
index 0000000..f5b3ed9
--- /dev/null
+++ b/.claude/agent-memory/hrms-checkin-expert/MEMORY.md
@@ -0,0 +1,5 @@
+# HRMS Check-in Expert Memory
+
+## Project Issues & Fixes
+
+- [Position Orientation Change Fix](issue_position_orientation_change_fix.md) - Fix for position map not displaying on screen orientation changes
diff --git a/.claude/agent-memory/hrms-checkin-expert/issue_position_orientation_change.md b/.claude/agent-memory/hrms-checkin-expert/issue_position_orientation_change.md
new file mode 100644
index 0000000..7abffd3
--- /dev/null
+++ b/.claude/agent-memory/hrms-checkin-expert/issue_position_orientation_change.md
@@ -0,0 +1,48 @@
+---
+name: position_orientation_change_fix
+description: Fix for position map not displaying on screen orientation changes
+type: project
+---
+
+## Issue: Position/Geolocation Not Displaying on Screen Orientation Changes
+
+**Problem:**
+The ArcGIS map component (`AscGISMap.vue`) failed to display or update position when the screen orientation changed between portrait and landscape modes.
+
+**Root Cause:**
+1. The component uses `v-if="$q.screen.gt.xs"` for conditional rendering of different layouts
+2. When orientation changes, the ArcGIS MapView doesn't automatically resize to fit the new container dimensions
+3. ArcGIS MapView requires manual `resize()` call when its container's size changes
+
+**Solution Implemented:**
+Added screen resize handling to `src/components/AscGISMap.vue`:
+
+1. **Added state tracking:**
+   - `isMapInitialized` ref to track when map is ready
+   - `isInitializing` ref to prevent concurrent initializations
+
+2. **Added `handleMapResize()` function:**
+   - Checks if mapView exists and isn't destroyed
+   - Uses `nextTick()` to ensure DOM updates complete before resizing
+   - Calls `mapView.value.resize()` to update map dimensions
+
+3. **Added watcher on `$q.screen.gt.xs`:**
+   - Triggers when screen size crosses the xs breakpoint
+   - Waits for DOM update via `nextTick()`
+   - Calls `handleMapResize()` to adjust map
+
+4. **Added window resize event listener:**
+   - Falls back for orientation changes that might not trigger Quasar's screen watcher
+   - Debounced with 300ms timeout to avoid excessive calls
+   - Properly cleaned up on component unmount
+
+**Files Modified:**
+- `src/components/AscGISMap.vue` - Added resize handling logic
+
+**Best Practices Applied:**
+- Proper cleanup of event listeners in `onBeforeUnmount`
+- Debouncing resize events for performance
+- Using `nextTick()` to ensure DOM synchronization
+- Checking for destroyed state before calling map methods
+
+**Note:** The Google Maps component (`MapCheckin.vue`) was not affected as `vue3-google-map` handles resize automatically.
diff --git a/src/components/AscGISMap.vue b/src/components/AscGISMap.vue
index e39f58d..e2dd9b0 100644
--- a/src/components/AscGISMap.vue
+++ b/src/components/AscGISMap.vue
@@ -1,5 +1,12 @@
 <script setup lang="ts">
-import { ref, shallowRef, onBeforeUnmount } from 'vue'
+import {
+  ref,
+  shallowRef,
+  onBeforeUnmount,
+  onMounted,
+  watch,
+  nextTick,
+} from 'vue'
 import { loadModules } from 'esri-loader'
 import axios from 'axios'
 import { useCounterMixin } from '@/stores/mixin'
@@ -11,12 +18,24 @@ const { messageError } = mixin
 const privacyStore = usePrivacyStore()
 
 const emit = defineEmits(['update:location'])
+
+// Accept initial POI from parent to prevent skeleton on re-mount
+const props = defineProps<{
+  initialPOI?: string
+}>()
+
 const $q = useQuasar()
 
 // Throttle mechanism to prevent excessive location updates
 const LOCATION_UPDATE_THROTTLE_MS = 500
 let lastLocationUpdate = 0
 
+// Track if map is initialized to prevent re-initialization
+const isMapInitialized = ref<boolean>(false)
+const isInitializing = ref<boolean>(false)
+const currentScreenSize = ref<boolean>($q.screen.gt.xs) // Track screen size to detect changes
+const mobileMapExpanded = ref<boolean>(true)
+
 function updateLocation(latitude: number, longitude: number, namePOI: string) {
   const now = Date.now()
   // Skip update if called too frequently (within throttle period)
@@ -28,8 +47,15 @@ function updateLocation(latitude: number, longitude: number, namePOI: string) {
   emit('update:location', latitude, longitude, namePOI)
 }
 
-const poiPlaceName = ref<string>('') // ชื่อพื้นที่ใกล้เคียง
+const poiPlaceName = ref<string>(props.initialPOI || '') // ชื่อพื้นที่ใกล้เคียง - use initialPOI if provided
 const mapView = shallowRef<any>(null) // Store mapView reference for cleanup (use shallowRef to avoid reactivity issues)
+const desktopMapContainerRef = ref<HTMLElement | null>(null)
+const mobileMapContainerRef = ref<HTMLElement | null>(null)
+
+// Unique container ID for each component instance to avoid conflicts
+const mapContainerId = `mapViewDisplay_${Math.random()
+  .toString(36)
+  .substring(2, 9)}`
 
 // ArcGIS API key from environment variable
 const apiKey = ref<string>(
@@ -39,174 +65,457 @@ const zoomMap = ref<number>(18)
 const textTooltip = ref<string>(
   'พื้นที่ใกล้เคียงคือ สถานที่สำคัญรอบตัวคุณ (ไม่ใช่ตำแหน่งปัจจุบัน)'
 )
+const MAP_DEBUG = true
+let attachRetryTimer: number | undefined
+let mapInitVersion = 0
+let isRecoveryReinitializing = false
+
+function logMapDebug(event: string, payload?: Record<string, unknown>) {
+  if (!MAP_DEBUG) {
+    return
+  }
+
+  const mode = $q.screen.gt.xs ? 'desktop' : 'mobile'
+  console.log('[AscGISMap]', event, {
+    mode,
+    isMapInitialized: isMapInitialized.value,
+    isInitializing: isInitializing.value,
+    hasMapView: !!mapView.value,
+    mapDestroyed: !!mapView.value?.destroyed,
+    ...payload,
+  })
+}
+
+function getActiveMapContainer() {
+  return $q.screen.gt.xs
+    ? desktopMapContainerRef.value
+    : mobileMapContainerRef.value
+}
+
+async function waitForActiveMapContainer(maxAttempts = 25, delayMs = 120) {
+  for (let i = 0; i < maxAttempts; i += 1) {
+    await nextTick()
+    const container = getActiveMapContainer()
+    if (i === 0 || i === maxAttempts - 1) {
+      logMapDebug('waitForContainer:attempt', {
+        attempt: i + 1,
+        maxAttempts,
+        width: container?.clientWidth || 0,
+        height: container?.clientHeight || 0,
+      })
+    }
+
+    if (container && container.clientWidth > 0 && container.clientHeight > 0) {
+      logMapDebug('waitForContainer:ready', {
+        attempt: i + 1,
+        width: container.clientWidth,
+        height: container.clientHeight,
+      })
+      return container
+    }
+
+    await new Promise((resolve) => setTimeout(resolve, delayMs))
+  }
+
+  logMapDebug('waitForContainer:failed')
+
+  return null
+}
+
+function clearAttachRetryTimer() {
+  if (attachRetryTimer) {
+    clearTimeout(attachRetryTimer)
+    attachRetryTimer = undefined
+  }
+}
+
+async function recoverMapByReinitialize() {
+  if (isRecoveryReinitializing) {
+    logMapDebug('recover:skipAlreadyRunning')
+    return
+  }
+
+  isRecoveryReinitializing = true
+  logMapDebug('recover:start', { mapInitVersion })
+
+  try {
+    mapInitVersion += 1
+    isInitializing.value = false
+    clearAttachRetryTimer()
+
+    if (mapView.value && !mapView.value.destroyed) {
+      mapView.value.destroy()
+      mapView.value = null
+    }
+
+    isMapInitialized.value = false
+    await nextTick()
+    await initializeMap()
+    logMapDebug('recover:initializeMapCompleted', { mapInitVersion })
+  } finally {
+    isRecoveryReinitializing = false
+    logMapDebug('recover:end', { mapInitVersion })
+  }
+}
+
+function reattachAndResizeMap(retry = 0) {
+  if (!mapView.value || mapView.value.destroyed) {
+    logMapDebug('reattach:skipNoMapView', { retry })
+    return
+  }
+
+  const activeContainer = getActiveMapContainer()
+
+  if (
+    !activeContainer ||
+    activeContainer.clientWidth === 0 ||
+    activeContainer.clientHeight === 0
+  ) {
+    logMapDebug('reattach:containerNotReady', {
+      retry,
+      width: activeContainer?.clientWidth || 0,
+      height: activeContainer?.clientHeight || 0,
+    })
+    if (retry < 15) {
+      clearAttachRetryTimer()
+      attachRetryTimer = window.setTimeout(() => {
+        reattachAndResizeMap(retry + 1)
+      }, 140)
+    } else if (!isRecoveryReinitializing) {
+      logMapDebug('reattach:triggerRecovery')
+      void recoverMapByReinitialize()
+    }
+    return
+  }
+
+  clearAttachRetryTimer()
+
+  nextTick(() => {
+    if (!mapView.value || mapView.value.destroyed) {
+      logMapDebug('reattach:skipDestroyedAfterTick', { retry })
+      return
+    }
+
+    if (mapView.value.container !== activeContainer) {
+      logMapDebug('reattach:rebindContainer', {
+        width: activeContainer.clientWidth,
+        height: activeContainer.clientHeight,
+      })
+      mapView.value.container = null
+      mapView.value.container = activeContainer
+    }
+
+    logMapDebug('reattach:resize', {
+      retry,
+      width: activeContainer.clientWidth,
+      height: activeContainer.clientHeight,
+      center: mapView.value.center,
+      zoom: mapView.value.zoom,
+    })
+    mapView.value.resize()
+    mapView.value.requestRender?.()
+    mapView.value
+      .goTo(
+        {
+          center: mapView.value.center,
+          zoom: mapView.value.zoom,
+        },
+        { animate: false }
+      )
+      .catch(() => {
+        // Ignore interrupted goTo during rapid orientation changes.
+      })
+  })
+}
 
 async function initializeMap() {
+  if (isInitializing.value || (mapView.value && !mapView.value.destroyed)) {
+    logMapDebug('initialize:skipAlreadyRunningOrReady')
+    return
+  }
+
+  const initVersion = ++mapInitVersion
+  logMapDebug('initialize:start', { initVersion })
+
+  isInitializing.value = true
+
   try {
     // Load modules of ArcGIS
-    loadModules([
-      'esri/config',
-      'esri/Map',
-      'esri/views/MapView',
-      'esri/geometry/Point',
-      'esri/Graphic',
-      'esri/layers/TileLayer',
-    ]).then(async ([esriConfig, Map, MapView, Point, Graphic, TileLayer]) => {
-      // Set apiKey
-      // esriConfig.apiKey =
-      //   'AAPK4f700a4324d04e9f8a1a134e0771ac45FXWawdCl-OotFfr52gz9XKxTDJTpDzw_YYcwbmKDDyAJswf14FoPyw0qBkN64DvP'
+    const [esriConfig, Map, MapView, Point, Graphic, TileLayer] =
+      await loadModules([
+        'esri/config',
+        'esri/Map',
+        'esri/views/MapView',
+        'esri/geometry/Point',
+        'esri/Graphic',
+        'esri/layers/TileLayer',
+      ])
+    logMapDebug('initialize:modulesLoaded', { initVersion })
+    // Set apiKey
+    // esriConfig.apiKey =
+    //   'AAPK4f700a4324d04e9f8a1a134e0771ac45FXWawdCl-OotFfr52gz9XKxTDJTpDzw_YYcwbmKDDyAJswf14FoPyw0qBkN64DvP'
 
-      // Create a FeatureLayer using a custom server URL
-      // const hillshadeLayer = new TileLayer({
-      //   url: `https://bmagis.bangkok.go.th/arcgis/rest/services/cache/BMA_3D_2D_Cache/MapServer`,
-      // })
+    // Create a FeatureLayer using a custom server URL
+    // const hillshadeLayer = new TileLayer({
+    //   url: `https://bmagis.bangkok.go.th/arcgis/rest/services/cache/BMA_3D_2D_Cache/MapServer`,
+    // })
 
-      const map = new Map({
-        basemap: 'streets',
-        // basemap: 'arcgis-topographic',
-        // layers: [hillshadeLayer],
+    const map = new Map({
+      basemap: 'streets',
+      // basemap: 'arcgis-topographic',
+      // layers: [hillshadeLayer],
+    })
+
+    if (initVersion !== mapInitVersion) {
+      logMapDebug('initialize:cancelledAfterMapCreated', {
+        initVersion,
+        mapInitVersion,
       })
+      return
+    }
 
-      navigator.geolocation.getCurrentPosition(async (position) => {
-        const { latitude, longitude } = position.coords
-
-        mapView.value = new MapView({
-          container: 'mapViewDisplay',
-          map: map,
-          center: {
-            latitude: latitude,
-            longitude: longitude,
-          }, // Set the initial map center current position
-
-          zoom: zoomMap.value,
-          constraints: {
-            snapToZoom: false, // Disables snapping to the zoom level
-            minZoom: zoomMap.value, // Set minimum zoom level
-            maxZoom: zoomMap.value, // Set maximum zoom level (same as minZoom for fixed zoom)
-          },
-
-          ui: {
-            components: [], // Empty array to remove all default UI components
-          },
+    const position = await new Promise<GeolocationPosition>(
+      (resolve, reject) => {
+        navigator.geolocation.getCurrentPosition(resolve, reject, {
+          enableHighAccuracy: true,
+          timeout: 10000,
         })
+      }
+    )
 
-        // ตำแหน่งของผู้ใช้
-        const userPoint = new Point({ longitude, latitude })
-        const userSymbol = {
+    if (initVersion !== mapInitVersion) {
+      logMapDebug('initialize:cancelledAfterGeolocation', {
+        initVersion,
+        mapInitVersion,
+      })
+      return
+    }
+
+    const { latitude, longitude } = position.coords
+    logMapDebug('initialize:geolocationSuccess', {
+      initVersion,
+      latitude,
+      longitude,
+    })
+
+    const mapContainer = await waitForActiveMapContainer()
+
+    if (!mapContainer || initVersion !== mapInitVersion) {
+      logMapDebug('initialize:containerUnavailableOrCancelled', {
+        initVersion,
+        mapInitVersion,
+      })
+      isMapInitialized.value = false
+      return
+    }
+
+    logMapDebug('initialize:containerReady', {
+      initVersion,
+      width: mapContainer.clientWidth,
+      height: mapContainer.clientHeight,
+    })
+
+    mapView.value = new MapView({
+      container: mapContainer,
+      map: map,
+      center: {
+        latitude: latitude,
+        longitude: longitude,
+      }, // Set the initial map center current position
+
+      zoom: zoomMap.value,
+      constraints: {
+        snapToZoom: false, // Disables snapping to the zoom level
+        minZoom: zoomMap.value, // Set minimum zoom level
+        maxZoom: zoomMap.value, // Set maximum zoom level (same as minZoom for fixed zoom)
+      },
+
+      ui: {
+        components: [], // Empty array to remove all default UI components
+      },
+    })
+
+    await mapView.value.when()
+    logMapDebug('initialize:mapViewReady', { initVersion })
+
+    if (initVersion !== mapInitVersion) {
+      logMapDebug('initialize:cancelledAfterMapViewReady', {
+        initVersion,
+        mapInitVersion,
+      })
+      if (mapView.value && !mapView.value.destroyed) {
+        mapView.value.destroy()
+      }
+      mapView.value = null
+      return
+    }
+
+    isMapInitialized.value = true
+    reattachAndResizeMap()
+
+    // ตำแหน่งของผู้ใช้
+    const userPoint = new Point({ longitude, latitude })
+    const userSymbol = {
+      type: 'picture-marker',
+      url: 'http://maps.google.com/mapfiles/ms/icons/red.png',
+      width: '32px',
+      height: '32px',
+    }
+    const userGraphic = new Graphic({
+      geometry: userPoint,
+      symbol: userSymbol,
+    })
+    mapView.value.graphics.add(userGraphic)
+    // Get POI place ยิงไปขอที่ server ของกทม.ก่อน
+    // await axios
+    //   .get(
+    //     'https://bmagis.bangkok.go.th/portal/sharing/servers/e4732c3a9fe549ab8bc697573b468f68/rest/services/World/GeocodeServer/reverseGeocode/',
+    //     {
+    //       params: {
+    //         f: 'json', // Format JSON response
+    //         distance: 2000,
+    //         category: 'POI',
+    //         location: {
+    //           spatialReference: { wkid: 4326 },
+    //           x: longitude,
+    //           y: latitude,
+    //         },
+    //         token: apiKey.value,
+    //       },
+    //     }
+    //   )
+    //   .then((response) => {
+    //     // console.log('poi', response.data.location)
+    //     poiPlaceName.value = response.data.address
+    //       ? response.data.address.PlaceName === ''
+    //         ? response.data.address.ShortLabel
+    //         : response.data.address.PlaceName
+    //       : 'ไม่พบข้อมูล'
+    //     const poiPoint = new Point({
+    //       longitude: response.data.location.x,
+    //       latitude: response.data.location.y,
+    //     })
+    //     const poiSymbol = {
+    //       type: 'picture-marker',
+    //       url: 'http://maps.google.com/mapfiles/ms/icons/blue.png',
+    //       width: '32px',
+    //       height: '32px',
+    //     }
+    //     const poiGraphic = new Graphic({
+    //       geometry: poiPoint,
+    //       symbol: poiSymbol,
+    //     })
+    //     mapView.value.graphics.add(poiGraphic)
+    //     // อัปเดตการแสดงผลให้แสดงทั้งตำแหน่งของผู้ใช้และ POI
+    //     mapView.value.goTo({
+    //       target: [userPoint, poiPoint],
+    //       zoom: zoomMap.value,
+    //     })
+
+    //     // Mark map as initialized
+    //     isMapInitialized.value = true
+
+    //     updateLocation(latitude, longitude, poiPlaceName.value)
+    //   })
+    //   .catch(async (error) => {
+    // console.error('Error fetching points of interest:', error)
+    // Get POI place ยิงไปขอที่ server arcgis ไม่ต้องใช้ token
+    await axios
+      .get(
+        'https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/reverseGeocode/',
+        {
+          params: {
+            f: 'json', // Format JSON response
+            distance: 2000,
+            category: 'POI',
+            location: {
+              spatialReference: { wkid: 4326 },
+              x: longitude,
+              y: latitude,
+            },
+          },
+        }
+      )
+      .then((response) => {
+        if (initVersion !== mapInitVersion || !mapView.value) {
+          logMapDebug('initialize:poiIgnoredByVersionOrMap', {
+            initVersion,
+            mapInitVersion,
+          })
+          return
+        }
+
+        // console.log('poi', response.data.location)
+        poiPlaceName.value = response.data.address
+          ? response.data.address.PlaceName === ''
+            ? response.data.address.ShortLabel
+            : response.data.address.PlaceName
+          : 'ไม่พบข้อมูล'
+        const poiPoint = new Point({
+          longitude: response.data.location.x,
+          latitude: response.data.location.y,
+        })
+        const poiSymbol = {
           type: 'picture-marker',
-          url: 'http://maps.google.com/mapfiles/ms/icons/red.png',
+          url: 'http://maps.google.com/mapfiles/ms/icons/blue.png',
           width: '32px',
           height: '32px',
         }
-        const userGraphic = new Graphic({
-          geometry: userPoint,
-          symbol: userSymbol,
+        const poiGraphic = new Graphic({
+          geometry: poiPoint,
+          symbol: poiSymbol,
+        })
+        mapView.value.graphics.add(poiGraphic)
+        // อัปเดตการแสดงผลให้แสดงทั้งตำแหน่งของผู้ใช้และ POI
+        mapView.value.goTo({
+          target: [userPoint, poiPoint],
+          zoom: zoomMap.value,
         })
-        mapView.value.graphics.add(userGraphic)
-        // Get POI place ยิงไปขอที่ server ของกทม.ก่อน
-        await axios
-          .get(
-            'https://bmagis.bangkok.go.th/portal/sharing/servers/e4732c3a9fe549ab8bc697573b468f68/rest/services/World/GeocodeServer/reverseGeocode/',
-            {
-              params: {
-                f: 'json', // Format JSON response
-                distance: 2000,
-                category: 'POI',
-                location: {
-                  spatialReference: { wkid: 4326 },
-                  x: longitude,
-                  y: latitude,
-                },
-                token: apiKey.value,
-              },
-            }
-          )
-          .then((response) => {
-            // console.log('poi', response.data.location)
-            poiPlaceName.value = response.data.address
-              ? response.data.address.PlaceName === ''
-                ? response.data.address.ShortLabel
-                : response.data.address.PlaceName
-              : 'ไม่พบข้อมูล'
-            const poiPoint = new Point({
-              longitude: response.data.location.x,
-              latitude: response.data.location.y,
-            })
-            const poiSymbol = {
-              type: 'picture-marker',
-              url: 'http://maps.google.com/mapfiles/ms/icons/blue.png',
-              width: '32px',
-              height: '32px',
-            }
-            const poiGraphic = new Graphic({
-              geometry: poiPoint,
-              symbol: poiSymbol,
-            })
-            mapView.value.graphics.add(poiGraphic)
-            // อัปเดตการแสดงผลให้แสดงทั้งตำแหน่งของผู้ใช้และ POI
-            mapView.value.goTo({
-              target: [userPoint, poiPoint],
-              zoom: zoomMap.value,
-            })
 
-            updateLocation(latitude, longitude, poiPlaceName.value)
-          })
-          .catch(async (error) => {
-            // console.error('Error fetching points of interest:', error)
-            // Get POI place ยิงไปขอที่ server arcgis ไม่ต้องใช้ token
-            await axios
-              .get(
-                'https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/reverseGeocode/',
-                {
-                  params: {
-                    f: 'json', // Format JSON response
-                    distance: 2000,
-                    category: 'POI',
-                    location: {
-                      spatialReference: { wkid: 4326 },
-                      x: longitude,
-                      y: latitude,
-                    },
-                  },
-                }
-              )
-              .then((response) => {
-                // console.log('poi', response.data.location)
-                poiPlaceName.value = response.data.address
-                  ? response.data.address.PlaceName === ''
-                    ? response.data.address.ShortLabel
-                    : response.data.address.PlaceName
-                  : 'ไม่พบข้อมูล'
-                const poiPoint = new Point({
-                  longitude: response.data.location.x,
-                  latitude: response.data.location.y,
-                })
-                const poiSymbol = {
-                  type: 'picture-marker',
-                  url: 'http://maps.google.com/mapfiles/ms/icons/blue.png',
-                  width: '32px',
-                  height: '32px',
-                }
-                const poiGraphic = new Graphic({
-                  geometry: poiPoint,
-                  symbol: poiSymbol,
-                })
-                mapView.value.graphics.add(poiGraphic)
-                // อัปเดตการแสดงผลให้แสดงทั้งตำแหน่งของผู้ใช้และ POI
-                mapView.value.goTo({
-                  target: [userPoint, poiPoint],
-                  zoom: zoomMap.value,
-                })
-
-                updateLocation(latitude, longitude, poiPlaceName.value)
-              })
-              .catch((error) => {
-                // console.error('Error fetching points of interest:', error)
-              })
-          })
+        updateLocation(latitude, longitude, poiPlaceName.value)
+        logMapDebug('initialize:poiSuccess', {
+          initVersion,
+          poiPlaceName: poiPlaceName.value,
+        })
       })
-    })
+      .catch(() => {
+        if (initVersion !== mapInitVersion) {
+          logMapDebug('initialize:poiErrorIgnoredByVersion', {
+            initVersion,
+            mapInitVersion,
+          })
+          return
+        }
+        poiPlaceName.value = poiPlaceName.value || 'ไม่พบข้อมูล'
+        updateLocation(latitude, longitude, poiPlaceName.value)
+        logMapDebug('initialize:poiErrorFallback', {
+          initVersion,
+          poiPlaceName: poiPlaceName.value,
+        })
+      })
+
+    if (initVersion === mapInitVersion) {
+      reattachAndResizeMap()
+    }
   } catch (error) {
+    if (initVersion === mapInitVersion) {
+      isMapInitialized.value = false
+    }
+    logMapDebug('initialize:error', {
+      initVersion,
+      mapInitVersion,
+      error: error instanceof Error ? error.message : String(error),
+    })
     console.error('Error loading the map', error)
+  } finally {
+    if (initVersion === mapInitVersion) {
+      isInitializing.value = false
+    }
+    logMapDebug('initialize:end', {
+      initVersion,
+      mapInitVersion,
+      isMapInitialized: isMapInitialized.value,
+    })
   }
 }
 
@@ -281,12 +590,137 @@ const requestLocationPermission = () => {
   )
 }
 
+// Also add a resize event listener as a fallback for orientation changes
+// that might not trigger the Quasar screen watcher
+let resizeTimeout: number | undefined
+const handleWindowResize = () => {
+  // Debounce resize events to avoid excessive calls
+  if (resizeTimeout) {
+    clearTimeout(resizeTimeout)
+  }
+  resizeTimeout = window.setTimeout(() => {
+    handleMapResize()
+  }, 300)
+}
+
+/**
+ * Handle map resize when screen orientation changes
+ * ArcGIS MapView needs to be manually resized when its container changes dimensions
+ * Only call resize() if the map is fully initialized
+ */
+function handleMapResize() {
+  logMapDebug('handleMapResize:called')
+  if (mapView.value && !mapView.value.destroyed && isMapInitialized.value) {
+    // Use nextTick to ensure the DOM has finished updating before resizing
+    reattachAndResizeMap()
+  }
+}
+
+/**
+ * Watch for screen size/orientation changes
+ * When the screen size changes (e.g., portrait to landscape), we need to re-initialize the map
+ * because the container div changes between desktop and mobile versions
+ */
+watch(
+  () => $q.screen.gt.xs,
+  async (newValue) => {
+    // Skip if no actual change (same layout)
+    if (newValue === currentScreenSize.value) {
+      logMapDebug('screenWatch:skipNoChange', { newValue })
+      return
+    }
+
+    logMapDebug('screenWatch:changed', {
+      oldValue: currentScreenSize.value,
+      newValue,
+    })
+    currentScreenSize.value = newValue
+    if (!newValue) {
+      mobileMapExpanded.value = true
+    }
+    mapInitVersion += 1
+    isInitializing.value = false
+    clearAttachRetryTimer()
+
+    // Always destroy and re-initialize when screen size changes
+    // This ensures the map is attached to the correct container
+    if (mapView.value && !mapView.value.destroyed) {
+      logMapDebug('screenWatch:destroyMapView')
+      mapView.value.destroy()
+      mapView.value = null
+    }
+
+    // Reset initialization state
+    isMapInitialized.value = false
+
+    // Wait for DOM to update with new layout
+    await nextTick()
+    await waitForActiveMapContainer(30, 100)
+
+    // Re-initialize the map
+    if (privacyStore.isAccepted) {
+      await initializeMap()
+
+      if (!mapView.value || mapView.value.destroyed) {
+        logMapDebug('screenWatch:missingMapAfterInitialize, triggerRecovery')
+        await recoverMapByReinitialize()
+      }
+
+      reattachAndResizeMap()
+      logMapDebug('screenWatch:reinitialized', {
+        hasMapViewAfterReinit: !!mapView.value,
+        mapDestroyedAfterReinit: !!mapView.value?.destroyed,
+      })
+    }
+  }
+)
+
+// Watch for initialPOI prop changes to update poiPlaceName
+watch(
+  () => props.initialPOI,
+  (newValue) => {
+    if (newValue && newValue !== poiPlaceName.value) {
+      poiPlaceName.value = newValue
+    }
+  }
+)
+
+// Set up resize event listener on mount
+onMounted(async () => {
+  logMapDebug('lifecycle:mounted')
+  window.addEventListener('resize', handleWindowResize)
+
+  // Component can be remounted after orientation/layout switches.
+  // Recreate map automatically when consent is already granted.
+  if (privacyStore.isAccepted && (!mapView.value || mapView.value.destroyed)) {
+    logMapDebug('lifecycle:mounted:triggerInitialize')
+    await waitForActiveMapContainer(30, 100)
+    await initializeMap()
+    reattachAndResizeMap()
+  } else {
+    logMapDebug('lifecycle:mounted:skipInitialize', {
+      privacyAccepted: privacyStore.isAccepted,
+      hasMapView: !!mapView.value,
+      mapDestroyed: !!mapView.value?.destroyed,
+    })
+  }
+})
+
 // Cleanup map resources when component unmounts
 onBeforeUnmount(() => {
+  logMapDebug('lifecycle:beforeUnmount')
+  clearAttachRetryTimer()
+
   if (mapView.value) {
     mapView.value.destroy()
     mapView.value = null
   }
+  // Clean up resize event listener
+  window.removeEventListener('resize', handleWindowResize)
+  // Clear timeout if it exists
+  if (resizeTimeout) {
+    clearTimeout(resizeTimeout)
+  }
 })
 
 defineExpose({
@@ -295,8 +729,8 @@ defineExpose({
 </script>
 
 <template>
-  <!-- Loading skeleton -->
-  <div v-if="!poiPlaceName" class="col-12">
+  <!-- Loading skeleton - show while map is initializing -->
+  <div v-if="isInitializing && !isMapInitialized" class="col-12">
     <q-skeleton
       :height="$q.screen.gt.xs ? '35vh' : '45px'"
       width="100%"
@@ -306,7 +740,6 @@ defineExpose({
   </div>
 
   <q-card
-    v-show="poiPlaceName"
     bordered
     flat
     class="col-12 bg-grey-2 shadow-0"
@@ -314,8 +747,8 @@ defineExpose({
   >
     <div v-if="$q.screen.gt.xs">
       <div
-        id="mapViewDisplay"
-        ref="mapElement"
+        :id="mapContainerId"
+        ref="desktopMapContainerRef"
         style="height: 35vh; pointer-events: none"
       ></div>
 
@@ -339,6 +772,7 @@ defineExpose({
 
     <q-card v-else style="border-radius: 20px">
       <q-expansion-item
+        v-model="mobileMapExpanded"
         class="shadow-1 overflow-hidden bg-grey-4 text-left q-pa-xs"
         style="border-radius: 20px"
         dense
@@ -355,16 +789,20 @@ defineExpose({
                 name="mdi-information-outline"
                 size="xs"
                 class="q-mr-xs cursor-pointer"
-                @click.stop="$q.dialog({ message: textTooltip, ok: 'ปิด' })"
+                @click.stop="$q.dialog({ message: textTooltip, ok: 'ตกลง' })"
               />
             </q-item-label>
             <q-item-label class="text-weight-medium text-grey-9">
-              {{ poiPlaceName }}
+              {{ poiPlaceName || '-' }}
             </q-item-label>
           </q-item-section>
         </template>
 
-        <div id="mapViewDisplay" style="height: 20vh"></div>
+        <div
+          :id="mapContainerId"
+          ref="mobileMapContainerRef"
+          style="height: 20vh"
+        ></div>
       </q-expansion-item>
     </q-card>
   </q-card>
diff --git a/src/components/AscGISMapTime.vue b/src/components/AscGISMapTime.vue
index 7360980..2bd31d7 100644
--- a/src/components/AscGISMapTime.vue
+++ b/src/components/AscGISMapTime.vue
@@ -1,10 +1,8 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { nextTick, onBeforeUnmount, onMounted, shallowRef, 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: number, longitude: number, namePOI: string) {
@@ -20,8 +18,67 @@ const apiKey = ref<string>(
   // 'AAPK4f700a4324d04e9f8a1a134e0771ac45FXWawdCl-OotFfr52gz9XKxTDJTpDzw_YYcwbmKDDyAJswf14FoPyw0qBkN64DvP'
 )
 const zoomMap = ref<number>(18)
+const mapViewRef = shallowRef<any>(null)
+const mapContainerRef = ref<HTMLElement | null>(null)
+const mapRenderKey = ref<number>(0)
+let resizeTimer: ReturnType<typeof setTimeout> | null = null
+let resizeRetryCount = 0
+const MAX_RESIZE_RETRY = 8
+const isRecreatingMap = ref<boolean>(false)
+
+function scheduleMapResize() {
+  if (resizeTimer) {
+    clearTimeout(resizeTimer)
+  }
+
+  // Delay a little to wait for viewport + CSS layout to settle after rotation.
+  resizeTimer = setTimeout(async () => {
+    await nextTick()
+
+    if (!mapViewRef.value || !mapContainerRef.value) {
+      return
+    }
+
+    const container = mapContainerRef.value
+    const mapView = mapViewRef.value
+
+    if (container.clientWidth === 0 || container.clientHeight === 0) {
+      if (resizeRetryCount < MAX_RESIZE_RETRY) {
+        resizeRetryCount += 1
+        scheduleMapResize()
+      }
+      return
+    }
+
+    resizeRetryCount = 0
+
+    // Force canvas to bind to the current element after repeated rotations.
+    if (mapView.container !== container) {
+      mapView.container = null
+      await nextTick()
+      mapView.container = container
+    }
+
+    mapView.resize()
+    mapView
+      .goTo(
+        {
+          center: mapView.center,
+          zoom: mapView.zoom,
+        },
+        { animate: false }
+      )
+      .catch(() => {
+        // Ignore interruption errors from rapid orientation changes.
+      })
+  }, 300)
+}
 
 async function initializeMap() {
+  if (mapViewRef.value || !mapContainerRef.value) {
+    return
+  }
+
   try {
     // Load modules of ArcGIS
     loadModules([
@@ -67,7 +124,7 @@ async function initializeMap() {
 
           // สร้าง MapView
           const mapView = new MapView({
-            container: 'mapViewDisplay', // div ที่จะแสดงแผนที่
+            container: mapContainerRef.value, // div ที่จะแสดงแผนที่
             map: map,
             center: {
               latitude: latitude,
@@ -79,6 +136,7 @@ async function initializeMap() {
               components: [], // Empty array to remove all default UI components
             },
           })
+          mapViewRef.value = mapView
 
           // สร้างสัญลักษณ์ของหมุด
           const markerSymbol = new PictureMarkerSymbol({
@@ -98,9 +156,42 @@ async function initializeMap() {
             position: 'top-right', // ตำแหน่งของ Search widget
           })
 
+          // ถ้าได้ token จาก กทม. มา
+          // await axios
+          //   .get(
+          //     'https://bmagis.bangkok.go.th/portal/sharing/servers/e4732c3a9fe549ab8bc697573b468f68/rest/services/World/GeocodeServer/reverseGeocode/',
+          //     {
+          //       params: {
+          //         f: 'json', // Format JSON response
+          //         distance: 2000,
+          //         category: 'POI',
+          //         location: {
+          //           spatialReference: { wkid: 4326 },
+          //           x: longitude,
+          //           y: latitude,
+          //         },
+          //         token: apiKey.value,
+          //       },
+          //     }
+          //   )
+          //   .then((response) => {
+          //     console.log('poi', response.data.location)
+          //     poiPlaceName.value = response.data.address
+          //       ? response.data.address.PlaceName === ''
+          //         ? response.data.address.ShortLabel
+          //         : response.data.address.PlaceName
+          //       : 'ไม่พบข้อมูล'
+          //     const poiPoint = new Point({
+          //       longitude: response.data.location.x,
+          //       latitude: response.data.location.y,
+          //     })
+
+          //     updateLocation(latitude, longitude, poiPlaceName.value)
+          //   })
+          //   .catch(async () => {
           await axios
             .get(
-              'https://bmagis.bangkok.go.th/portal/sharing/servers/e4732c3a9fe549ab8bc697573b468f68/rest/services/World/GeocodeServer/reverseGeocode/',
+              'https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/reverseGeocode/',
               {
                 params: {
                   f: 'json', // Format JSON response
@@ -111,52 +202,20 @@ async function initializeMap() {
                     x: longitude,
                     y: latitude,
                   },
-                  token: apiKey.value,
                 },
               }
             )
             .then((response) => {
-              console.log('poi', response.data.location)
+              // console.log('poi', response.data.location)
               poiPlaceName.value = response.data.address
                 ? response.data.address.PlaceName === ''
                   ? response.data.address.ShortLabel
                   : response.data.address.PlaceName
                 : 'ไม่พบข้อมูล'
-              const poiPoint = new Point({
-                longitude: response.data.location.x,
-                latitude: response.data.location.y,
-              })
 
-              updateLocation(latitude, longitude, poiPlaceName.value)
-            })
-            .catch(async () => {
-              await axios
-                .get(
-                  'https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/reverseGeocode/',
-                  {
-                    params: {
-                      f: 'json', // Format JSON response
-                      distance: 2000,
-                      category: 'POI',
-                      location: {
-                        spatialReference: { wkid: 4326 },
-                        x: longitude,
-                        y: latitude,
-                      },
-                    },
-                  }
-                )
-                .then((response) => {
-                  // console.log('poi', response.data.location)
-                  poiPlaceName.value = response.data.address
-                    ? response.data.address.PlaceName === ''
-                      ? response.data.address.ShortLabel
-                      : response.data.address.PlaceName
-                    : 'ไม่พบข้อมูล'
-
-                  updateLocation(longitude, latitude, poiPlaceName.value)
-                })
+              updateLocation(longitude, latitude, poiPlaceName.value)
             })
+          // })
 
           let searchMarker: any = null
 
@@ -186,9 +245,41 @@ async function initializeMap() {
               symbol: markerSymbol,
             })
             if (searchMarker) {
+              // await axios
+              //   .get(
+              //     'https://bmagis.bangkok.go.th/portal/sharing/servers/e4732c3a9fe549ab8bc697573b468f68/rest/services/World/GeocodeServer/reverseGeocode/',
+              //     {
+              //       params: {
+              //         f: 'json', // Format JSON response
+              //         distance: 2000,
+              //         category: 'POI',
+              //         location: {
+              //           spatialReference: { wkid: 4326 },
+              //           x: longitude,
+              //           y: latitude,
+              //         },
+              //         token: apiKey.value,
+              //       },
+              //     }
+              //   )
+              //   .then((response) => {
+              //     console.log('poi', response.data.location)
+              //     poiPlaceName.value = response.data.address
+              //       ? response.data.address.PlaceName === ''
+              //         ? response.data.address.ShortLabel
+              //         : response.data.address.PlaceName
+              //       : 'ไม่พบข้อมูล'
+              //     const poiPoint = new Point({
+              //       longitude: response.data.location.x,
+              //       latitude: response.data.location.y,
+              //     })
+
+              //     updateLocation(latitude, longitude, poiPlaceName.value)
+              //   })
+              //   .catch(async () => {
               await axios
                 .get(
-                  'https://bmagis.bangkok.go.th/portal/sharing/servers/e4732c3a9fe549ab8bc697573b468f68/rest/services/World/GeocodeServer/reverseGeocode/',
+                  'https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/reverseGeocode/',
                   {
                     params: {
                       f: 'json', // Format JSON response
@@ -199,52 +290,20 @@ async function initializeMap() {
                         x: longitude,
                         y: latitude,
                       },
-                      token: apiKey.value,
                     },
                   }
                 )
                 .then((response) => {
-                  console.log('poi', response.data.location)
+                  // console.log('poi', response.data.location)
                   poiPlaceName.value = response.data.address
                     ? response.data.address.PlaceName === ''
                       ? response.data.address.ShortLabel
                       : response.data.address.PlaceName
                     : 'ไม่พบข้อมูล'
-                  const poiPoint = new Point({
-                    longitude: response.data.location.x,
-                    latitude: response.data.location.y,
-                  })
 
-                  updateLocation(latitude, longitude, poiPlaceName.value)
-                })
-                .catch(async () => {
-                  await axios
-                    .get(
-                      'https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/reverseGeocode/',
-                      {
-                        params: {
-                          f: 'json', // Format JSON response
-                          distance: 2000,
-                          category: 'POI',
-                          location: {
-                            spatialReference: { wkid: 4326 },
-                            x: longitude,
-                            y: latitude,
-                          },
-                        },
-                      }
-                    )
-                    .then((response) => {
-                      // console.log('poi', response.data.location)
-                      poiPlaceName.value = response.data.address
-                        ? response.data.address.PlaceName === ''
-                          ? response.data.address.ShortLabel
-                          : response.data.address.PlaceName
-                        : 'ไม่พบข้อมูล'
-
-                      updateLocation(longitude, latitude, poiPlaceName.value)
-                    })
+                  updateLocation(longitude, latitude, poiPlaceName.value)
                 })
+              // })
             }
 
             mapView.graphics.add(searchMarker)
@@ -275,9 +334,41 @@ async function initializeMap() {
             } else {
               searchMarker.geometry = point // ย้ายหมุดไปยังตำแหน่งใหม่
               if (searchMarker) {
+                // await axios
+                //   .get(
+                //     'https://bmagis.bangkok.go.th/portal/sharing/servers/e4732c3a9fe549ab8bc697573b468f68/rest/services/World/GeocodeServer/reverseGeocode/',
+                //     {
+                //       params: {
+                //         f: 'json', // Format JSON response
+                //         distance: 2000,
+                //         category: 'POI',
+                //         location: {
+                //           spatialReference: { wkid: 4326 },
+                //           x: lon,
+                //           y: lat,
+                //         },
+                //         token: apiKey.value,
+                //       },
+                //     }
+                //   )
+                //   .then((response) => {
+                //     console.log('poi', response.data.location)
+                //     poiPlaceName.value = response.data.address
+                //       ? response.data.address.PlaceName === ''
+                //         ? response.data.address.ShortLabel
+                //         : response.data.address.PlaceName
+                //       : 'ไม่พบข้อมูล'
+                //     const poiPoint = new Point({
+                //       longitude: response.data.location.x,
+                //       latitude: response.data.location.y,
+                //     })
+
+                //     updateLocation(latitude, longitude, poiPlaceName.value)
+                //   })
+                //   .catch(async () => {
                 await axios
                   .get(
-                    'https://bmagis.bangkok.go.th/portal/sharing/servers/e4732c3a9fe549ab8bc697573b468f68/rest/services/World/GeocodeServer/reverseGeocode/',
+                    'https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/reverseGeocode/',
                     {
                       params: {
                         f: 'json', // Format JSON response
@@ -288,52 +379,20 @@ async function initializeMap() {
                           x: lon,
                           y: lat,
                         },
-                        token: apiKey.value,
                       },
                     }
                   )
                   .then((response) => {
-                    console.log('poi', response.data.location)
+                    // console.log('poi', response.data.location)
                     poiPlaceName.value = response.data.address
                       ? response.data.address.PlaceName === ''
                         ? response.data.address.ShortLabel
                         : response.data.address.PlaceName
                       : 'ไม่พบข้อมูล'
-                    const poiPoint = new Point({
-                      longitude: response.data.location.x,
-                      latitude: response.data.location.y,
-                    })
 
-                    updateLocation(latitude, longitude, poiPlaceName.value)
-                  })
-                  .catch(async () => {
-                    await axios
-                      .get(
-                        'https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/reverseGeocode/',
-                        {
-                          params: {
-                            f: 'json', // Format JSON response
-                            distance: 2000,
-                            category: 'POI',
-                            location: {
-                              spatialReference: { wkid: 4326 },
-                              x: lon,
-                              y: lat,
-                            },
-                          },
-                        }
-                      )
-                      .then((response) => {
-                        // console.log('poi', response.data.location)
-                        poiPlaceName.value = response.data.address
-                          ? response.data.address.PlaceName === ''
-                            ? response.data.address.ShortLabel
-                            : response.data.address.PlaceName
-                          : 'ไม่พบข้อมูล'
-
-                        updateLocation(lat, lon, poiPlaceName.value)
-                      })
+                    updateLocation(lat, lon, poiPlaceName.value)
                   })
+                // })
               }
             }
 
@@ -350,14 +409,64 @@ async function initializeMap() {
   }
 }
 
+async function recreateMapOnOrientationChange() {
+  if (isRecreatingMap.value) {
+    return
+  }
+
+  isRecreatingMap.value = true
+
+  try {
+    if (resizeTimer) {
+      clearTimeout(resizeTimer)
+      resizeTimer = null
+    }
+
+    if (mapViewRef.value) {
+      mapViewRef.value.destroy()
+      mapViewRef.value = null
+    }
+
+    mapRenderKey.value += 1
+    await nextTick()
+    await initializeMap()
+    scheduleMapResize()
+  } finally {
+    isRecreatingMap.value = false
+  }
+}
+
 onMounted(async () => {
   await initializeMap()
+
+  window.addEventListener('resize', scheduleMapResize)
+  window.addEventListener('orientationchange', recreateMapOnOrientationChange)
+  window.addEventListener('pageshow', scheduleMapResize)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', scheduleMapResize)
+  window.removeEventListener(
+    'orientationchange',
+    recreateMapOnOrientationChange
+  )
+  window.removeEventListener('pageshow', scheduleMapResize)
+
+  if (resizeTimer) {
+    clearTimeout(resizeTimer)
+    resizeTimer = null
+  }
+
+  if (mapViewRef.value) {
+    mapViewRef.value.destroy()
+    mapViewRef.value = null
+  }
 })
 </script>
 
 <template>
   <q-card bordered flat class="col-12 bg-grey-2 shadow-0">
-    <div id="mapViewDisplay" style="height: 35vh"></div>
+    <div :key="mapRenderKey" ref="mapContainerRef" style="height: 35vh"></div>
 
     <div
       :class="
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 8017b7c..b6f3ce1 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted, watch, onBeforeUnmount } from 'vue'
+import { ref, reactive, onMounted, watch, onBeforeUnmount, computed } from 'vue'
 import { useQuasar } from 'quasar'
 import { format } from 'date-fns'
 import Camera from 'simple-vue-camera'
@@ -466,7 +466,12 @@ async function validateForm() {
   }
 }
 
-const mapRef = ref<InstanceType<typeof MapCheck> | null>(null)
+const mapRefDesktop = ref<InstanceType<typeof MapCheck> | null>(null)
+const mapRefMobile = ref<InstanceType<typeof MapCheck> | null>(null)
+
+// Computed ref that returns the correct map ref based on screen size
+const mapRef = computed(() => ($q.screen.gt.xs ? mapRefDesktop.value : mapRefMobile.value))
+
 const timeChickin = ref<string>('') //เวลาเข้างาน,เวลาออกงาน
 
 /** function ยืนยันการลงเวลาเข้า - ออก*/
@@ -777,13 +782,13 @@ watch(
                 <div class="col-xs-12 col-sm-8 gt-xs">
                   <div class="col-12">
                     <MapCheck
-                      v-if="$q.screen.gt.xs"
-                      ref="mapRef"
+                      ref="mapRefDesktop"
+                      :initialPOI="formLocation.POI"
                       @update:location="updateLocation"
                     />
                   </div>
                 </div>
-                <div class="col-xs-12 col-sm-4">
+                <div class="col-xs-12 col-sm-4 gt-xs">
                   <q-card
                     :class="
                       $q.screen.xs ? 'card-container-xs' : 'card-container'
@@ -893,6 +898,81 @@ watch(
 
                 <!-- กรอกข้อมูล หน้ามือถือ -->
                 <div class="col-12 row q-col-gutter-y-md" v-if="$q.screen.xs">
+                  <!-- กล้อง หน้ามือถือ -->
+                  <div class="col-12">
+                    <q-card
+                      :class="
+                        $q.screen.xs ? 'card-container-xs' : 'card-container'
+                      "
+                    >
+                      <div
+                        v-if="!cameraIsOn && img == null"
+                        class="preview-placeholder"
+                        @click="() => !isDisabledCheckTime && openCamera()"
+                      >
+                        <div class="text-center">
+                          <q-icon
+                            name="mdi-camera"
+                            color="blue-grey-3"
+                            size="100px"
+                            class="center-icon"
+                          />
+                        </div>
+                      </div>
+                      <div class="col-12 row items-center">
+                        <!-- แสดงกล้องตอนกดถ่ายภาพ -->
+
+                        <Camera
+                          :resolution="{ width: photoWidth, height: photoHeight }"
+                          ref="camera"
+                          :autoplay="false"
+                          :style="!img ? 'display: block' : 'display: none'"
+                        />
+
+                        <!-- แสดงรูปเมื่อกด capture -->
+                        <div v-if="img" class="image-container">
+                          <q-img :src="img" class="image-element"></q-img>
+                        </div>
+
+                        <div v-if="cameraIsOn">
+                          <div
+                            class="absolute-bottom text-subtitle2 text-center q-py-sm"
+                            style="background: #00000021"
+                          >
+                            <q-btn
+                              v-if="availableCameras.length > 1 && img == null"
+                              round
+                              icon="flip_camera_ios"
+                              size="16px"
+                              style="background: #424242; color: white"
+                              @click="switchCamera"
+                              unelevated
+                              class="q-mr-xs"
+                            />
+                            <q-btn
+                              round
+                              v-if="img == null"
+                              icon="photo_camera"
+                              size="18px"
+                              style="background: #263238; color: white"
+                              @click="capturePhoto"
+                              unelevated
+                            />
+                            <q-btn
+                              v-else
+                              round
+                              icon="refresh"
+                              size="18px"
+                              style="background: #263238; color: white"
+                              @click="refreshPhoto"
+                              unelevated
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    </q-card>
+                  </div>
+
                   <div class="col-12" v-if="!isDisabledCheckTime">
                     <q-card
                       flat
@@ -965,8 +1045,13 @@ watch(
                     </q-card>
                   </div>
 
-                  <div class="col-12" v-if="$q.screen.xs">
-                    <MapCheck ref="mapRef" @update:location="updateLocation" />
+                  <!-- Map หน้ามือถือ -->
+                  <div class="col-12">
+                    <MapCheck
+                      ref="mapRefMobile"
+                      :initialPOI="formLocation.POI"
+                      @update:location="updateLocation"
+                    />
                   </div>
                 </div>
                 <!-- กรอกข้อมูล หน้ามือถือ -->

From 365d55d3108a04e474f55d2e57d0674cd908db81 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Thu, 30 Apr 2026 15:58:07 +0700
Subject: [PATCH 05/33] clean log

---
 src/components/AscGISMap.vue                  | 133 ------------------
 .../{MapCheckin.vue => MapCheckin_Backup.vue} |   0
 2 files changed, 133 deletions(-)
 rename src/components/{MapCheckin.vue => MapCheckin_Backup.vue} (100%)

diff --git a/src/components/AscGISMap.vue b/src/components/AscGISMap.vue
index e2dd9b0..812dd24 100644
--- a/src/components/AscGISMap.vue
+++ b/src/components/AscGISMap.vue
@@ -65,27 +65,10 @@ const zoomMap = ref<number>(18)
 const textTooltip = ref<string>(
   'พื้นที่ใกล้เคียงคือ สถานที่สำคัญรอบตัวคุณ (ไม่ใช่ตำแหน่งปัจจุบัน)'
 )
-const MAP_DEBUG = true
 let attachRetryTimer: number | undefined
 let mapInitVersion = 0
 let isRecoveryReinitializing = false
 
-function logMapDebug(event: string, payload?: Record<string, unknown>) {
-  if (!MAP_DEBUG) {
-    return
-  }
-
-  const mode = $q.screen.gt.xs ? 'desktop' : 'mobile'
-  console.log('[AscGISMap]', event, {
-    mode,
-    isMapInitialized: isMapInitialized.value,
-    isInitializing: isInitializing.value,
-    hasMapView: !!mapView.value,
-    mapDestroyed: !!mapView.value?.destroyed,
-    ...payload,
-  })
-}
-
 function getActiveMapContainer() {
   return $q.screen.gt.xs
     ? desktopMapContainerRef.value
@@ -96,29 +79,14 @@ async function waitForActiveMapContainer(maxAttempts = 25, delayMs = 120) {
   for (let i = 0; i < maxAttempts; i += 1) {
     await nextTick()
     const container = getActiveMapContainer()
-    if (i === 0 || i === maxAttempts - 1) {
-      logMapDebug('waitForContainer:attempt', {
-        attempt: i + 1,
-        maxAttempts,
-        width: container?.clientWidth || 0,
-        height: container?.clientHeight || 0,
-      })
-    }
 
     if (container && container.clientWidth > 0 && container.clientHeight > 0) {
-      logMapDebug('waitForContainer:ready', {
-        attempt: i + 1,
-        width: container.clientWidth,
-        height: container.clientHeight,
-      })
       return container
     }
 
     await new Promise((resolve) => setTimeout(resolve, delayMs))
   }
 
-  logMapDebug('waitForContainer:failed')
-
   return null
 }
 
@@ -131,12 +99,10 @@ function clearAttachRetryTimer() {
 
 async function recoverMapByReinitialize() {
   if (isRecoveryReinitializing) {
-    logMapDebug('recover:skipAlreadyRunning')
     return
   }
 
   isRecoveryReinitializing = true
-  logMapDebug('recover:start', { mapInitVersion })
 
   try {
     mapInitVersion += 1
@@ -151,16 +117,13 @@ async function recoverMapByReinitialize() {
     isMapInitialized.value = false
     await nextTick()
     await initializeMap()
-    logMapDebug('recover:initializeMapCompleted', { mapInitVersion })
   } finally {
     isRecoveryReinitializing = false
-    logMapDebug('recover:end', { mapInitVersion })
   }
 }
 
 function reattachAndResizeMap(retry = 0) {
   if (!mapView.value || mapView.value.destroyed) {
-    logMapDebug('reattach:skipNoMapView', { retry })
     return
   }
 
@@ -171,18 +134,12 @@ function reattachAndResizeMap(retry = 0) {
     activeContainer.clientWidth === 0 ||
     activeContainer.clientHeight === 0
   ) {
-    logMapDebug('reattach:containerNotReady', {
-      retry,
-      width: activeContainer?.clientWidth || 0,
-      height: activeContainer?.clientHeight || 0,
-    })
     if (retry < 15) {
       clearAttachRetryTimer()
       attachRetryTimer = window.setTimeout(() => {
         reattachAndResizeMap(retry + 1)
       }, 140)
     } else if (!isRecoveryReinitializing) {
-      logMapDebug('reattach:triggerRecovery')
       void recoverMapByReinitialize()
     }
     return
@@ -192,26 +149,14 @@ function reattachAndResizeMap(retry = 0) {
 
   nextTick(() => {
     if (!mapView.value || mapView.value.destroyed) {
-      logMapDebug('reattach:skipDestroyedAfterTick', { retry })
       return
     }
 
     if (mapView.value.container !== activeContainer) {
-      logMapDebug('reattach:rebindContainer', {
-        width: activeContainer.clientWidth,
-        height: activeContainer.clientHeight,
-      })
       mapView.value.container = null
       mapView.value.container = activeContainer
     }
 
-    logMapDebug('reattach:resize', {
-      retry,
-      width: activeContainer.clientWidth,
-      height: activeContainer.clientHeight,
-      center: mapView.value.center,
-      zoom: mapView.value.zoom,
-    })
     mapView.value.resize()
     mapView.value.requestRender?.()
     mapView.value
@@ -230,12 +175,10 @@ function reattachAndResizeMap(retry = 0) {
 
 async function initializeMap() {
   if (isInitializing.value || (mapView.value && !mapView.value.destroyed)) {
-    logMapDebug('initialize:skipAlreadyRunningOrReady')
     return
   }
 
   const initVersion = ++mapInitVersion
-  logMapDebug('initialize:start', { initVersion })
 
   isInitializing.value = true
 
@@ -250,7 +193,6 @@ async function initializeMap() {
         'esri/Graphic',
         'esri/layers/TileLayer',
       ])
-    logMapDebug('initialize:modulesLoaded', { initVersion })
     // Set apiKey
     // esriConfig.apiKey =
     //   'AAPK4f700a4324d04e9f8a1a134e0771ac45FXWawdCl-OotFfr52gz9XKxTDJTpDzw_YYcwbmKDDyAJswf14FoPyw0qBkN64DvP'
@@ -267,10 +209,6 @@ async function initializeMap() {
     })
 
     if (initVersion !== mapInitVersion) {
-      logMapDebug('initialize:cancelledAfterMapCreated', {
-        initVersion,
-        mapInitVersion,
-      })
       return
     }
 
@@ -284,37 +222,18 @@ async function initializeMap() {
     )
 
     if (initVersion !== mapInitVersion) {
-      logMapDebug('initialize:cancelledAfterGeolocation', {
-        initVersion,
-        mapInitVersion,
-      })
       return
     }
 
     const { latitude, longitude } = position.coords
-    logMapDebug('initialize:geolocationSuccess', {
-      initVersion,
-      latitude,
-      longitude,
-    })
 
     const mapContainer = await waitForActiveMapContainer()
 
     if (!mapContainer || initVersion !== mapInitVersion) {
-      logMapDebug('initialize:containerUnavailableOrCancelled', {
-        initVersion,
-        mapInitVersion,
-      })
       isMapInitialized.value = false
       return
     }
 
-    logMapDebug('initialize:containerReady', {
-      initVersion,
-      width: mapContainer.clientWidth,
-      height: mapContainer.clientHeight,
-    })
-
     mapView.value = new MapView({
       container: mapContainer,
       map: map,
@@ -336,13 +255,8 @@ async function initializeMap() {
     })
 
     await mapView.value.when()
-    logMapDebug('initialize:mapViewReady', { initVersion })
 
     if (initVersion !== mapInitVersion) {
-      logMapDebug('initialize:cancelledAfterMapViewReady', {
-        initVersion,
-        mapInitVersion,
-      })
       if (mapView.value && !mapView.value.destroyed) {
         mapView.value.destroy()
       }
@@ -438,10 +352,6 @@ async function initializeMap() {
       )
       .then((response) => {
         if (initVersion !== mapInitVersion || !mapView.value) {
-          logMapDebug('initialize:poiIgnoredByVersionOrMap', {
-            initVersion,
-            mapInitVersion,
-          })
           return
         }
 
@@ -473,25 +383,13 @@ async function initializeMap() {
         })
 
         updateLocation(latitude, longitude, poiPlaceName.value)
-        logMapDebug('initialize:poiSuccess', {
-          initVersion,
-          poiPlaceName: poiPlaceName.value,
-        })
       })
       .catch(() => {
         if (initVersion !== mapInitVersion) {
-          logMapDebug('initialize:poiErrorIgnoredByVersion', {
-            initVersion,
-            mapInitVersion,
-          })
           return
         }
         poiPlaceName.value = poiPlaceName.value || 'ไม่พบข้อมูล'
         updateLocation(latitude, longitude, poiPlaceName.value)
-        logMapDebug('initialize:poiErrorFallback', {
-          initVersion,
-          poiPlaceName: poiPlaceName.value,
-        })
       })
 
     if (initVersion === mapInitVersion) {
@@ -501,21 +399,11 @@ async function initializeMap() {
     if (initVersion === mapInitVersion) {
       isMapInitialized.value = false
     }
-    logMapDebug('initialize:error', {
-      initVersion,
-      mapInitVersion,
-      error: error instanceof Error ? error.message : String(error),
-    })
     console.error('Error loading the map', error)
   } finally {
     if (initVersion === mapInitVersion) {
       isInitializing.value = false
     }
-    logMapDebug('initialize:end', {
-      initVersion,
-      mapInitVersion,
-      isMapInitialized: isMapInitialized.value,
-    })
   }
 }
 
@@ -609,7 +497,6 @@ const handleWindowResize = () => {
  * Only call resize() if the map is fully initialized
  */
 function handleMapResize() {
-  logMapDebug('handleMapResize:called')
   if (mapView.value && !mapView.value.destroyed && isMapInitialized.value) {
     // Use nextTick to ensure the DOM has finished updating before resizing
     reattachAndResizeMap()
@@ -626,14 +513,9 @@ watch(
   async (newValue) => {
     // Skip if no actual change (same layout)
     if (newValue === currentScreenSize.value) {
-      logMapDebug('screenWatch:skipNoChange', { newValue })
       return
     }
 
-    logMapDebug('screenWatch:changed', {
-      oldValue: currentScreenSize.value,
-      newValue,
-    })
     currentScreenSize.value = newValue
     if (!newValue) {
       mobileMapExpanded.value = true
@@ -645,7 +527,6 @@ watch(
     // Always destroy and re-initialize when screen size changes
     // This ensures the map is attached to the correct container
     if (mapView.value && !mapView.value.destroyed) {
-      logMapDebug('screenWatch:destroyMapView')
       mapView.value.destroy()
       mapView.value = null
     }
@@ -662,15 +543,10 @@ watch(
       await initializeMap()
 
       if (!mapView.value || mapView.value.destroyed) {
-        logMapDebug('screenWatch:missingMapAfterInitialize, triggerRecovery')
         await recoverMapByReinitialize()
       }
 
       reattachAndResizeMap()
-      logMapDebug('screenWatch:reinitialized', {
-        hasMapViewAfterReinit: !!mapView.value,
-        mapDestroyedAfterReinit: !!mapView.value?.destroyed,
-      })
     }
   }
 )
@@ -687,28 +563,19 @@ watch(
 
 // Set up resize event listener on mount
 onMounted(async () => {
-  logMapDebug('lifecycle:mounted')
   window.addEventListener('resize', handleWindowResize)
 
   // Component can be remounted after orientation/layout switches.
   // Recreate map automatically when consent is already granted.
   if (privacyStore.isAccepted && (!mapView.value || mapView.value.destroyed)) {
-    logMapDebug('lifecycle:mounted:triggerInitialize')
     await waitForActiveMapContainer(30, 100)
     await initializeMap()
     reattachAndResizeMap()
-  } else {
-    logMapDebug('lifecycle:mounted:skipInitialize', {
-      privacyAccepted: privacyStore.isAccepted,
-      hasMapView: !!mapView.value,
-      mapDestroyed: !!mapView.value?.destroyed,
-    })
   }
 })
 
 // Cleanup map resources when component unmounts
 onBeforeUnmount(() => {
-  logMapDebug('lifecycle:beforeUnmount')
   clearAttachRetryTimer()
 
   if (mapView.value) {
diff --git a/src/components/MapCheckin.vue b/src/components/MapCheckin_Backup.vue
similarity index 100%
rename from src/components/MapCheckin.vue
rename to src/components/MapCheckin_Backup.vue

From 0a6fc4a974ef7bdf75165cbad224ded399a5b22e Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Thu, 30 Apr 2026 16:07:21 +0700
Subject: [PATCH 06/33] fix code

---
 src/components/{MapCheckin_Backup.vue => MapCheckin.vue} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/components/{MapCheckin_Backup.vue => MapCheckin.vue} (100%)

diff --git a/src/components/MapCheckin_Backup.vue b/src/components/MapCheckin.vue
similarity index 100%
rename from src/components/MapCheckin_Backup.vue
rename to src/components/MapCheckin.vue

From 4d821b0ab6beda9e8aa50ee783b96b65223ffe83 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Thu, 30 Apr 2026 16:15:46 +0700
Subject: [PATCH 07/33] fixed code

---
 src/components/AscGISMap.vue | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/components/AscGISMap.vue b/src/components/AscGISMap.vue
index 812dd24..c0c721e 100644
--- a/src/components/AscGISMap.vue
+++ b/src/components/AscGISMap.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import {
+  computed,
   ref,
   shallowRef,
   onBeforeUnmount,
@@ -51,6 +52,9 @@ const poiPlaceName = ref<string>(props.initialPOI || '') // ชื่อพื
 const mapView = shallowRef<any>(null) // Store mapView reference for cleanup (use shallowRef to avoid reactivity issues)
 const desktopMapContainerRef = ref<HTMLElement | null>(null)
 const mobileMapContainerRef = ref<HTMLElement | null>(null)
+const isMapVisible = computed(
+  () => !!mapView.value && !mapView.value.destroyed && isMapInitialized.value
+)
 
 // Unique container ID for each component instance to avoid conflicts
 const mapContainerId = `mapViewDisplay_${Math.random()
@@ -596,8 +600,8 @@ defineExpose({
 </script>
 
 <template>
-  <!-- Loading skeleton - show while map is initializing -->
-  <div v-if="isInitializing && !isMapInitialized" class="col-12">
+  <!-- Loading skeleton - show until map is visible -->
+  <div v-if="!isMapVisible" class="col-12">
     <q-skeleton
       :height="$q.screen.gt.xs ? '35vh' : '45px'"
       width="100%"
@@ -610,6 +614,7 @@ defineExpose({
     bordered
     flat
     class="col-12 bg-grey-2 shadow-0"
+    :class="{ 'map-hidden': !isMapVisible }"
     :style="$q.screen.gt.xs ? ';' : 'border-radius: 20px'"
   >
     <div v-if="$q.screen.gt.xs">
@@ -679,4 +684,8 @@ defineExpose({
 .expanAS.q-item__section--avatar {
   min-width: 40px !important;
 }
+
+.map-hidden {
+  visibility: hidden;
+}
 </style>

From ac18c0f932f841a5a5232616c1cb919510dedb59 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Fri, 1 May 2026 10:50:13 +0700
Subject: [PATCH 08/33] fixed use icon pin in assets

---
 src/assets/markers/marker-blue.svg | 4 ++++
 src/assets/markers/marker-red.svg  | 4 ++++
 src/components/AscGISMap.vue       | 8 +++++---
 src/components/AscGISMapTime.vue   | 3 ++-
 vite.config.js                     | 2 +-
 5 files changed, 16 insertions(+), 5 deletions(-)
 create mode 100644 src/assets/markers/marker-blue.svg
 create mode 100644 src/assets/markers/marker-red.svg

diff --git a/src/assets/markers/marker-blue.svg b/src/assets/markers/marker-blue.svg
new file mode 100644
index 0000000..e617e4c
--- /dev/null
+++ b/src/assets/markers/marker-blue.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none">
+  <path d="M12 2c-3.866 0-7 3.134-7 7 0 5.25 7 13 7 13s7-7.75 7-13c0-3.866-3.134-7-7-7Z" fill="#1E88E5"/>
+  <circle cx="12" cy="9" r="3" fill="#fff"/>
+</svg>
diff --git a/src/assets/markers/marker-red.svg b/src/assets/markers/marker-red.svg
new file mode 100644
index 0000000..39353ad
--- /dev/null
+++ b/src/assets/markers/marker-red.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none">
+  <path d="M12 2c-3.866 0-7 3.134-7 7 0 5.25 7 13 7 13s7-7.75 7-13c0-3.866-3.134-7-7-7Z" fill="#E53935"/>
+  <circle cx="12" cy="9" r="3" fill="#fff"/>
+</svg>
diff --git a/src/components/AscGISMap.vue b/src/components/AscGISMap.vue
index c0c721e..244641e 100644
--- a/src/components/AscGISMap.vue
+++ b/src/components/AscGISMap.vue
@@ -13,6 +13,8 @@ import axios from 'axios'
 import { useCounterMixin } from '@/stores/mixin'
 import { useQuasar } from 'quasar'
 import { usePrivacyStore } from '@/stores/privacy'
+import markerRedUrl from '@/assets/markers/marker-red.svg?url'
+import markerBlueUrl from '@/assets/markers/marker-blue.svg?url'
 
 const mixin = useCounterMixin()
 const { messageError } = mixin
@@ -275,7 +277,7 @@ async function initializeMap() {
     const userPoint = new Point({ longitude, latitude })
     const userSymbol = {
       type: 'picture-marker',
-      url: 'http://maps.google.com/mapfiles/ms/icons/red.png',
+      url: markerRedUrl,
       width: '32px',
       height: '32px',
     }
@@ -315,7 +317,7 @@ async function initializeMap() {
     //     })
     //     const poiSymbol = {
     //       type: 'picture-marker',
-    //       url: 'http://maps.google.com/mapfiles/ms/icons/blue.png',
+    //       url: markerBlueUrl,
     //       width: '32px',
     //       height: '32px',
     //     }
@@ -371,7 +373,7 @@ async function initializeMap() {
         })
         const poiSymbol = {
           type: 'picture-marker',
-          url: 'http://maps.google.com/mapfiles/ms/icons/blue.png',
+          url: markerBlueUrl,
           width: '32px',
           height: '32px',
         }
diff --git a/src/components/AscGISMapTime.vue b/src/components/AscGISMapTime.vue
index 2bd31d7..1264791 100644
--- a/src/components/AscGISMapTime.vue
+++ b/src/components/AscGISMapTime.vue
@@ -2,6 +2,7 @@
 import { nextTick, onBeforeUnmount, onMounted, shallowRef, ref } from 'vue'
 import { loadModules } from 'esri-loader'
 import axios from 'axios'
+import markerRedUrl from '@/assets/markers/marker-red.svg?url'
 
 const emit = defineEmits(['update:location'])
 
@@ -140,7 +141,7 @@ async function initializeMap() {
 
           // สร้างสัญลักษณ์ของหมุด
           const markerSymbol = new PictureMarkerSymbol({
-            url: 'https://maps.google.com/mapfiles/ms/icons/red-dot.png', // รูปหมุด
+            url: markerRedUrl,
             width: '32px',
             height: '32px',
           })
diff --git a/vite.config.js b/vite.config.js
index 6d575e0..8ed3c30 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -23,7 +23,7 @@ export default defineConfig({
         cleanupOutdatedCaches: true,
         globPatterns: ['**/*.*'],
       },
-      includeAssets: ['icons/safari-pinned-tab.svg'],
+      includeAssets: ['icons/safari-pinned-tab.svg', 'src/assets/markers/*.svg'],
       manifest: {
         name: 'HRMS-Checkin',
         short_name: 'HRMS Checkin',

From c4e246ed745faff39be25c476316c02aa267a390 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Fri, 1 May 2026 11:01:29 +0700
Subject: [PATCH 09/33] fixed remove text and service

---
 src/components/AscGISMap.vue |  2 +-
 src/views/HomeView.vue       | 36 +++++++++++++++++++++++++-----------
 src/views/MapView.vue        |  4 ++--
 3 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/src/components/AscGISMap.vue b/src/components/AscGISMap.vue
index 244641e..ec1eb0b 100644
--- a/src/components/AscGISMap.vue
+++ b/src/components/AscGISMap.vue
@@ -197,7 +197,7 @@ async function initializeMap() {
         'esri/views/MapView',
         'esri/geometry/Point',
         'esri/Graphic',
-        'esri/layers/TileLayer',
+        // 'esri/layers/TileLayer',
       ])
     // Set apiKey
     // esriConfig.apiKey =
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index b6f3ce1..fde8b97 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -298,9 +298,17 @@ async function stopChecking() {
 
 function identifyCameraType(label: string): 'front' | 'back' | 'unknown' {
   const lowerLabel = label.toLowerCase()
-  if (lowerLabel.includes('front') || lowerLabel.includes('user') || lowerLabel.includes('face')) {
+  if (
+    lowerLabel.includes('front') ||
+    lowerLabel.includes('user') ||
+    lowerLabel.includes('face')
+  ) {
     return 'front'
-  } else if (lowerLabel.includes('back') || lowerLabel.includes('environment') || lowerLabel.includes('rear')) {
+  } else if (
+    lowerLabel.includes('back') ||
+    lowerLabel.includes('environment') ||
+    lowerLabel.includes('rear')
+  ) {
     return 'back'
   }
   return 'unknown'
@@ -356,8 +364,9 @@ async function changeCamera(targetCameraType?: 'front' | 'back') {
       return
     }
 
-    const matchingCameras = devices.filter((device: any) =>
-      identifyCameraType(device.label || '') === targetCameraType
+    const matchingCameras = devices.filter(
+      (device: any) =>
+        identifyCameraType(device.label || '') === targetCameraType
     )
 
     if (matchingCameras.length > 0) {
@@ -470,7 +479,9 @@ const mapRefDesktop = ref<InstanceType<typeof MapCheck> | null>(null)
 const mapRefMobile = ref<InstanceType<typeof MapCheck> | null>(null)
 
 // Computed ref that returns the correct map ref based on screen size
-const mapRef = computed(() => ($q.screen.gt.xs ? mapRefDesktop.value : mapRefMobile.value))
+const mapRef = computed(() =>
+  $q.screen.gt.xs ? mapRefDesktop.value : mapRefMobile.value
+)
 
 const timeChickin = ref<string>('') //เวลาเข้างาน,เวลาออกงาน
 
@@ -923,7 +934,10 @@ watch(
                         <!-- แสดงกล้องตอนกดถ่ายภาพ -->
 
                         <Camera
-                          :resolution="{ width: photoWidth, height: photoHeight }"
+                          :resolution="{
+                            width: photoWidth,
+                            height: photoHeight,
+                          }"
                           ref="camera"
                           :autoplay="false"
                           :style="!img ? 'display: block' : 'display: none'"
@@ -1167,7 +1181,7 @@ watch(
             >
               <q-separator />
               <div class="col-12 q-pa-md">
-                <p
+                <!-- <p
                   :class="
                     $q.screen.gt.xs
                       ? 'text-red text-caption '
@@ -1175,7 +1189,7 @@ watch(
                   "
                 >
                   *หมายเหตุ คลิกลงเวลาเข้างานแล้วระบบจะลงเวลาทันที
-                </p>
+                </p> -->
                 <q-btn
                   :label="
                     !statusCheckin && inQueue
@@ -1282,7 +1296,7 @@ watch(
   <q-footer reveal v-if="$q.screen.xs" class="bg-grey-2">
     <q-separator />
     <div v-if="!isDisabledCheckTime" class="col-12 q-pa-md">
-      <p
+      <!-- <p
         :class="
           $q.screen.gt.xs
             ? 'text-red text-caption '
@@ -1290,7 +1304,7 @@ watch(
         "
       >
         *หมายเหตุ คลิกลงเวลาเข้างานแล้วระบบจะลงเวลาทันที
-      </p>
+      </p> -->
       <q-btn
         :label="
           !statusCheckin && inQueue
@@ -1452,4 +1466,4 @@ watch(
     rgba(2, 169, 152, 1) 100%
   );
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/MapView.vue b/src/views/MapView.vue
index 33ebc58..340308b 100644
--- a/src/views/MapView.vue
+++ b/src/views/MapView.vue
@@ -460,7 +460,7 @@ onMounted(async () => {
                 <div class="col-12 text-right">
                   <q-separator />
                   <div class="col-12 q-pa-md">
-                    <p
+                    <!-- <p
                       :class="
                         $q.screen.gt.xs
                           ? 'text-red text-caption '
@@ -468,7 +468,7 @@ onMounted(async () => {
                       "
                     >
                       *หมายเหตุ คลิกลงเวลาเข้างานแล้วระบบจะลงเวลาทันที
-                    </p>
+                    </p> -->
                     <q-btn
                       :label="
                         stetusCheckin == true ? 'ลงเวลาเข้างาน' : 'ลงเวลาออกงาน'

From 6c819a609718aaad729a5be4019980817d0859ab Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Fri, 1 May 2026 12:50:50 +0700
Subject: [PATCH 10/33] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A1=E0=B9=80=E0=B8=8A=E0=B9=87=E0=B8=84=E0=B8=AA=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=87=E0=B8=81=E0=B8=B1=E0=B8=94=20=E0=B8=96=E0=B9=89?=
 =?UTF-8?q?=E0=B8=B2=E0=B9=84=E0=B8=A1=E0=B9=88=E0=B8=A1=E0=B8=B5=E0=B8=AA?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=87=E0=B8=81=E0=B8=B1=E0=B8=94=E0=B8=88=E0=B8=B0?=
 =?UTF-8?q?=E0=B9=81=E0=B8=AA=E0=B8=94=E0=B8=87=E0=B8=AB=E0=B8=99=E0=B9=89?=
 =?UTF-8?q?=E0=B8=B2=20no-position?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../hrms-checkin-expert/MEMORY.md             |   4 +
 .../feature_no_position_page.md               |  68 +++++++++++
 src/router/index.ts                           |  49 +++++++-
 src/views/MainView.vue                        |  34 ++++++
 src/views/NoPositionView.vue                  | 106 ++++++++++++++++++
 5 files changed, 259 insertions(+), 2 deletions(-)
 create mode 100644 .claude/agent-memory/hrms-checkin-expert/feature_no_position_page.md
 create mode 100644 src/views/NoPositionView.vue

diff --git a/.claude/agent-memory/hrms-checkin-expert/MEMORY.md b/.claude/agent-memory/hrms-checkin-expert/MEMORY.md
index f5b3ed9..7897460 100644
--- a/.claude/agent-memory/hrms-checkin-expert/MEMORY.md
+++ b/.claude/agent-memory/hrms-checkin-expert/MEMORY.md
@@ -1,5 +1,9 @@
 # HRMS Check-in Expert Memory
 
+## Features
+
+- [No Position Assignment Page](feature_no_position_page.md) - Implementation for users without organization position assignment
+
 ## Project Issues & Fixes
 
 - [Position Orientation Change Fix](issue_position_orientation_change_fix.md) - Fix for position map not displaying on screen orientation changes
diff --git a/.claude/agent-memory/hrms-checkin-expert/feature_no_position_page.md b/.claude/agent-memory/hrms-checkin-expert/feature_no_position_page.md
new file mode 100644
index 0000000..c72acc5
--- /dev/null
+++ b/.claude/agent-memory/hrms-checkin-expert/feature_no_position_page.md
@@ -0,0 +1,68 @@
+---
+name: No Position Assignment Page
+description: Feature implementation for users without organization position assignment
+type: reference
+---
+
+## No Position Assignment Page Feature
+
+When a user doesn't have a position assignment (สังกัด), they are redirected to a dedicated page explaining they are not part of the organization structure.
+
+### Files Created/Modified
+
+1. **Created:** `/Users/waruneeta/Desktop/ChamomindWorking/HRMSProject/hrms-checkin/src/views/NoPositionView.vue`
+   - Displays message in Thai: "ไม่พบข้อมูลสังกัด"
+   - Shows icon and explanation text
+   - "ตกลง" (OK) button that shows confirmation dialog
+   - After confirmation, performs logout and clears positionKeycloak store
+
+2. **Modified:** `/Users/waruneeta/Desktop/ChamomindWorking/HRMSProject/hrms-checkin/src/router/index.ts`
+   - Added new route `/no-position` with `Auth: false`
+   - Enhanced router guard to check for position data
+   - Redirects to `/no-position` if user has no organization assignment
+
+3. **Modified:** `/Users/waruneeta/Desktop/ChamomindWorking/HRMSProject/hrms-checkin/src/views/MainView.vue`
+   - Updated `fetchKeycloakPosition()` function
+   - Checks if `organization` object exists and has any data
+   - Redirects to `/no-position` if no organization data found
+
+### Logic Flow
+
+1. User logs in successfully
+2. `MainView.vue` calls `fetchKeycloakPosition()` in `onMounted()`
+3. API returns position data from `/org/profile/keycloak/position`
+4. System checks if `organization` object has any non-null values (root, child1-4)
+5. If no organization data exists:
+   - User is redirected to `/no-position`
+   - User sees message explaining they need to contact staff
+   - User clicks "ตกลง" to logout
+   - Staff adds them to organization structure
+   - User can login again
+
+### Position Data Structure
+
+```typescript
+interface KeycloakPosition {
+  privacyCheckin: boolean
+  avatarName?: string
+  profileId: string
+  organization?: Organization
+}
+
+interface Organization {
+  root?: string
+  child1?: string
+  child2?: string
+  child3?: string
+  child4?: string
+}
+```
+
+A user is considered to have "no position" when all organization fields (root, child1, child2, child3, child4) are null or undefined.
+
+### Thai UI Messages
+
+- Page title: "ไม่พบข้อมูลสังกัด"
+- Description: "ท่านยังไม่มีสังกัดในโครงสร้างองค์กร กรุณาติดต่อเจ้าหน้าที่เพื่อดำเนินการเพิ่มข้อมูล"
+- Confirmation dialog: "ยืนยันการออกจากระบบ" - "ท่านจะถูกนำออกจากระบบเพื่อให้เจ้าหน้าที่ดำเนินการเพิ่มข้อมูลสังกัดในโครงสร้างองค์กร"
+- Button: "ตกลง"
diff --git a/src/router/index.ts b/src/router/index.ts
index 8d85f3e..8346697 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -5,6 +5,7 @@ import MainView from '@/views/MainView.vue'
 
 const loginView = () => import('@/views/login.vue')
 const resetPasswordView = () => import('@/views/ResetPassword.vue')
+const noPositionView = () => import('@/views/NoPositionView.vue')
 
 import { authenticated, logout } from '@/plugins/auth'
 
@@ -87,19 +88,63 @@ const router = createRouter({
         Auth: false,
       },
     },
+    {
+      path: '/no-position',
+      name: 'no-position',
+      component: noPositionView,
+      meta: {
+        Auth: false,
+      },
+    },
   ],
 })
 
 // authen with keycloak client
 router.beforeEach(async (to, from, next) => {
+  // ตรวจสอบเส้นทางพิเศษที่ไม่ต้องตรวจสอบสิทธิ์
+  const publicPaths = ['/login', '/auth', '/reset-password', '/no-position']
+  if (publicPaths.includes(to.path)) {
+    next()
+    return
+  }
+
+  // ตรวจสอบการ authenticate
   if (to.meta.Auth) {
     const checkAuthen = await authenticated()
     if (!checkAuthen && to.meta.Auth) {
       logout()
+      return
     }
-  } else {
-    next()
   }
+
+  // ตรวจสอบว่าผู้ใช้มีข้อมูลสังกัดหรือไม่
+  // ต้องทำการ dynamic import เนื่องจากเป็นการใช้งาน Pinia store ใน router
+  if (to.path !== '/no-position') {
+    try {
+      const { usePositionKeycloakStore } = await import('@/stores/positionKeycloak')
+      const positionKeycloakStore = usePositionKeycloakStore()
+      const dataPositionKeycloak = positionKeycloakStore.dataPositionKeycloak
+
+      // ถ้ามีข้อมูล positionKeycloak แล้ว ให้ตรวจสอบว่ามี organization หรือไม่
+      if (dataPositionKeycloak) {
+        const hasOrganization =
+          dataPositionKeycloak.organization &&
+          (dataPositionKeycloak.organization.root ||
+            dataPositionKeycloak.organization.child1 ||
+            dataPositionKeycloak.organization.child2 ||
+            dataPositionKeycloak.organization.child3 ||
+            dataPositionKeycloak.organization.child4)
+
+        if (!hasOrganization) {
+          next('/no-position')
+          return
+        }
+      }
+    } catch (error) {
+      console.error('Error checking position:', error)
+    }
+  }
+
   next()
 })
 
diff --git a/src/views/MainView.vue b/src/views/MainView.vue
index 7e7d42b..d83192e 100644
--- a/src/views/MainView.vue
+++ b/src/views/MainView.vue
@@ -182,6 +182,22 @@ async function fetchKeycloakPosition() {
 
   if (existingData) {
     // มีข้อมูลอยู่แล้ว ใช้ข้อมูลเดิม
+
+    // เช็คว่ามีข้อมูลสังกัด (organization) หรือไม่
+    const hasOrganization =
+      existingData.organization &&
+      (existingData.organization.root ||
+        existingData.organization.child1 ||
+        existingData.organization.child2 ||
+        existingData.organization.child3 ||
+        existingData.organization.child4)
+
+    if (!hasOrganization) {
+      // ไม่มีข้อมูลสังกัด redirect ไปหน้า NoPosition
+      router.replace('/no-position')
+      return
+    }
+
     privacyStore.modalPrivacy = !existingData.privacyCheckin
     privacyStore.setAccepted(existingData.privacyCheckin)
 
@@ -208,6 +224,24 @@ async function fetchKeycloakPosition() {
         },
       }
 
+      // เช็คว่ามีข้อมูลสังกัด (organization) หรือไม่
+      // ถ้าไม่มีข้อมูลสังกัด ให้ redirect ไปหน้า NoPosition
+      const hasOrganization =
+        keycloakData.organization &&
+        (keycloakData.organization.root ||
+          keycloakData.organization.child1 ||
+          keycloakData.organization.child2 ||
+          keycloakData.organization.child3 ||
+          keycloakData.organization.child4)
+
+      if (!hasOrganization) {
+        // บันทึกข้อมูลที่ได้รับไว้ก่อน (เผื่อใช้ในอนาคต)
+        positionKeycloakStore.setPositionKeycloak(keycloakData)
+        // Redirect ไปหน้า NoPosition
+        router.replace('/no-position')
+        return
+      }
+
       positionKeycloakStore.setPositionKeycloak(keycloakData)
       privacyStore.modalPrivacy = !keycloakData.privacyCheckin
       privacyStore.setAccepted(keycloakData.privacyCheckin)
diff --git a/src/views/NoPositionView.vue b/src/views/NoPositionView.vue
new file mode 100644
index 0000000..691d10a
--- /dev/null
+++ b/src/views/NoPositionView.vue
@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import { useQuasar } from 'quasar'
+import { useRouter } from 'vue-router'
+import { useCounterMixin } from '@/stores/mixin'
+import { usePositionKeycloakStore } from '@/stores/positionKeycloak'
+import { logout } from '@/plugins/auth'
+import CustomComponent from '@/components/CustomDialog.vue'
+
+const $q = useQuasar()
+const router = useRouter()
+const mixin = useCounterMixin()
+const positionKeycloakStore = usePositionKeycloakStore()
+const { showLoader, hideLoader } = mixin
+
+/**
+ * ฟังก์ชันจัดการเมื่อผู้ใช้กดปุ่มตกลง
+ * ดำเนินการ logout โดยตรง
+ */
+function handleOkClick() {
+  performLogout()
+}
+
+/**
+ * ฟังก์ชันดำเนินการออกจากระบบ
+ */
+async function performLogout() {
+  showLoader()
+  try {
+    // ล้างข้อมูล positionKeycloak ก่อน logout
+    positionKeycloakStore.clearPositionKeycloak()
+    await logout()
+  } catch (error) {
+    console.error('Logout error:', error)
+  } finally {
+    setTimeout(() => {
+      hideLoader()
+    }, 1000)
+  }
+}
+</script>
+
+<template>
+  <div
+    class="fullscreen bg-secondary text-white text-center q-pa-sm flex flex-center"
+  >
+    <div class="no-position-container">
+      <!-- Icon แสดงความผิดปกติ -->
+      <div class="icon-container">
+        <q-icon name="mdi-account-off-outline" size="100px" color="white" />
+      </div>
+
+      <!-- หัวข้อหลัก -->
+      <div class="text-h4 q-mt-lg q-mb-md">ไม่พบข้อมูลสังกัด</div>
+
+      <!-- รายละเอียด -->
+      <div class="text-h6 q-mb-lg text-weight-regular">
+        ท่านยังไม่มีสังกัดในโครงสร้างองค์กร<br />
+        กรุณาติดต่อเจ้าหน้าที่ที่เบอร์ 1171
+        <br />เพื่อดำเนินการเพิ่มข้อมูล
+      </div>
+
+      <div class="text-weight-regular">
+        เมื่อเจ้าหน้าที่ได้เพิ่มท่านในโครงสร้างองค์กรเรียบร้อยแล้ว
+        กรุณาเข้าสู่ระบบใหม่อีกครั้ง
+      </div>
+      <!-- ปุ่มตกลง -->
+      <q-btn
+        class="q-mt-xl"
+        color="white"
+        text-color="secondary"
+        unelevated
+        label="ตกลง"
+        no-caps
+        size="lg"
+        padding="md xl"
+        @click="handleOkClick"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.no-position-container {
+  max-width: 600px;
+  padding: 2rem;
+}
+
+.icon-container {
+  opacity: 0.9;
+}
+
+.text-h4 {
+  font-weight: 700;
+}
+
+.text-h6 {
+  line-height: 1.8;
+  opacity: 0.95;
+}
+
+.q-btn {
+  border-radius: 8px;
+  font-weight: 600;
+  min-width: 150px;
+}
+</style>

From 7ce5eab6f467ed7124a34e9da6a0625c2f3d4eb1 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 1 May 2026 14:31:09 +0700
Subject: [PATCH 11/33] fix(HomeView): fetch Data

---
 src/views/HomeView.vue | 51 +++++++++++++++++++++++++++++++++++++-----
 1 file changed, 45 insertions(+), 6 deletions(-)

diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index fde8b97..fef5d5e 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -9,6 +9,7 @@ import http from '@/plugins/http'
 import { useCounterMixin } from '@/stores/mixin'
 import { usePermissions } from '@/composables/usePermissions'
 import { usePrivacyStore } from '@/stores/privacy'
+import { usePositionKeycloakStore } from '@/stores/positionKeycloak'
 
 import type { FormRef, OptionReason } from '@/interface/response/checkin'
 
@@ -19,8 +20,28 @@ const { date2Thai, showLoader, hideLoader, messageError, dialogConfirm } = mixin
 const $q = useQuasar()
 const { checkPrivacyAccepted } = usePermissions()
 const privacyStore = usePrivacyStore()
+const positionKeycloakStore = usePositionKeycloakStore()
 const MOCK_CHECK_DELAY_MS = 800
 
+// เช็คว่าผู้ใช้มีข้อมูลสังกัดหรือไม่
+const hasOrganization = computed(() => {
+  const data = positionKeycloakStore.dataPositionKeycloak
+  if (!data || !data.organization) return false
+
+  const org = data.organization
+  // ตรวจสอบว่ามีค่าที่ไม่ใช่ null, undefined หรือ string ว่าง
+  const hasValue = (val: string | null | undefined) =>
+    val && val.trim() !== ''
+
+  return !!(
+    hasValue(org.root) ||
+    hasValue(org.child1) ||
+    hasValue(org.child2) ||
+    hasValue(org.child3) ||
+    hasValue(org.child4)
+  )
+})
+
 const modalTime = ref<boolean>(false) // Dailog ลงเวลาเข้างานของคุณ
 const checkStatus = ref<string>('')
 const statusCheckin = ref<boolean>(true) // สถานะเวลา เข้า,ออก
@@ -679,22 +700,40 @@ async function requestCamera() {
 
 /** Hook*/
 onMounted(async () => {
-  isLoadingCheckTime.value = true
+  // เริ่มต้น clock เสมอ
   updateClock()
   clockInterval.value = setInterval(updateClock, 1000)
-  startChecking() //เช็ค status จาก คิว #1
+
+  // เพิ่ม event listeners สำหรับมือถือ
+  document.addEventListener('visibilitychange', handleVisibilityChange)
+  window.addEventListener('pagehide', handleAppClose)
+
+  // ถ้ามีข้อมูลสังกัดแล้ว เริ่ม checking ได้เลย
+  if (hasOrganization.value) {
+    isLoadingCheckTime.value = true
+    startChecking()
+  }
 
   // เรียกแผนที่เฉพาะเมื่อยอมรับ privacy แล้ว
   if (privacyStore.isAccepted) {
     mapRef.value?.requestLocationPermission()
     requestCamera()
   }
-
-  // เพิ่ม event listeners สำหรับมือถือ
-  document.addEventListener('visibilitychange', handleVisibilityChange)
-  window.addEventListener('pagehide', handleAppClose)
 })
 
+// เฝ้าดูการเปลี่ยนแปลงของ hasOrganization
+// เพื่อเริ่ม startChecking เมื่อมีข้อมูลสังกัด
+watch(
+  hasOrganization,
+  (newValue) => {
+    if (newValue && !isLoadingCheckTime.value) {
+      isLoadingCheckTime.value = true
+      startChecking()
+    }
+  },
+  { immediate: false }
+)
+
 onBeforeUnmount(() => {
   resetCameraAndImage()
 

From 6666dcd914dca8c3e3d19af46fcf35c3601fe190 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 1 May 2026 15:15:56 +0700
Subject: [PATCH 12/33] fix: msgCheckTime

---
 src/views/HomeView.vue | 41 +++++++++++++++++++++++++++++++++++------
 1 file changed, 35 insertions(+), 6 deletions(-)

diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index fef5d5e..9282d84 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -30,8 +30,7 @@ const hasOrganization = computed(() => {
 
   const org = data.organization
   // ตรวจสอบว่ามีค่าที่ไม่ใช่ null, undefined หรือ string ว่าง
-  const hasValue = (val: string | null | undefined) =>
-    val && val.trim() !== ''
+  const hasValue = (val: string | null | undefined) => val && val.trim() !== ''
 
   return !!(
     hasValue(org.root) ||
@@ -782,6 +781,7 @@ watch(
           >
             <q-skeleton width="100%" height="50px" />
           </div>
+
           <div v-else :class="getClass(statusCheckin)" class="gt-xs">
             <div class="col">
               <div class="row col-12 justify-center q-py-sm text-subtitle1">
@@ -826,8 +826,23 @@ watch(
                   </div>
                 </div>
               </div>
+
+              <div v-if="isDisabledCheckTime && msgCheckTime">
+                <div class="col-12 column items-center justify-center q-pa-xl">
+                  <q-icon
+                    name="mdi-map-marker-radius"
+                    size="8em"
+                    class="text-primary q-mb-md"
+                  />
+                  <div class="text-h6 text-center text-red q-mt-sm">
+                    *{{ msgCheckTime }}
+                  </div>
+                </div>
+              </div>
+
               <div
                 class="col-xs-12 col-md-11 q-pa-md q-col-gutter-md row q-pt-lg"
+                v-if="!isDisabledCheckTime"
               >
                 <div class="col-xs-12 col-sm-8 gt-xs">
                   <div class="col-12">
@@ -1260,10 +1275,10 @@ watch(
               </div>
             </div>
 
-            <div v-if="isDisabledCheckTime && $q.screen.gt.xs" class="col-12">
+            <!-- <div v-if="isDisabledCheckTime && $q.screen.gt.xs" class="col-12">
               <q-separator />
               <div class="text-red q-pa-md">*{{ msgCheckTime }}</div>
-            </div>
+            </div> -->
           </div>
         </q-card>
       </div>
@@ -1373,10 +1388,10 @@ watch(
         :loading="inQueue"
       />
     </div>
-    <div v-if="isDisabledCheckTime" class="col-12">
+    <!-- <div v-if="isDisabledCheckTime" class="col-12">
       <q-separator />
       <div class="text-red q-pa-md text-left">*{{ msgCheckTime }}</div>
-    </div>
+    </div> -->
   </q-footer>
 
   <!-- แสดงการลงเวลา -->
@@ -1505,4 +1520,18 @@ watch(
     rgba(2, 169, 152, 1) 100%
   );
 }
+
+.icon-bounce {
+  animation: bounce 2s infinite;
+}
+
+@keyframes bounce {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
 </style>

From e90fbc3f430036b1167dccff6552571db9f48ba6 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 5 May 2026 09:24:44 +0700
Subject: [PATCH 13/33] feat(checkin): add option off site

---
 src/views/HomeView.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 9282d84..c8ffb27 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -192,6 +192,8 @@ const options = ref<OptionReason[]>([
   //   value: 'ประสบภัย เช่น น้ำท่วม มีพายุ ประสบอุบัติเหตุ',
   //   text: 'ประสบภัย เช่น น้ำท่วม มีพายุ ประสบอุบัติเหตุ',
   // },
+  { value: 'ปฏิบัติงานในจุดบริการด่วนมหานคร', text: 'ปฏิบัติงานในจุดบริการด่วนมหานคร' },
+
   { value: 'อื่นๆ', text: 'อื่นๆ' },
 ])
 

From 4e757e92762e4953a266bba9d1ab9e2f720748bc Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 5 May 2026 09:36:13 +0700
Subject: [PATCH 14/33] fix: checkout

---
 src/views/HomeView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index c8ffb27..67bf8db 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -569,7 +569,7 @@ async function getCheck() {
   }
 
   showLoader()
-  const isSeminar = model.value === 'ไปประชุม / อบรม / สัมมนา' ? 'Y' : 'N'
+  const isSeminar = model.value === 'ไปประชุม / อบรม / สัมมนา' || model.value === 'ปฏิบัติงานในจุดบริการด่วนมหานคร' ? 'Y' : 'N'
 
   await http
     .get(config.API.checkoutCheck + `/${isSeminar}`)

From 5ed1b27789121963909f3379a33a99b60d11c0c7 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 5 May 2026 10:11:48 +0700
Subject: [PATCH 15/33] reafactor(login): trim() username

---
 src/views/login.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/login.vue b/src/views/login.vue
index df02614..df0725d 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -20,7 +20,7 @@ const password = ref<string>('')
 async function onSubmit() {
   showLoader()
   const formdata = new URLSearchParams()
-  formdata.append('username', username.value)
+  formdata.append('username', username.value.trim())
   formdata.append('password', password.value)
 
   await axios

From 7ae3f0a55781c17dfa8aa65780c7cc76b7de7064 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 5 May 2026 10:18:23 +0700
Subject: [PATCH 16/33] fix(checkin): API checkoutCheck

---
 src/views/HomeView.vue | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 67bf8db..ab7257f 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -192,7 +192,10 @@ const options = ref<OptionReason[]>([
   //   value: 'ประสบภัย เช่น น้ำท่วม มีพายุ ประสบอุบัติเหตุ',
   //   text: 'ประสบภัย เช่น น้ำท่วม มีพายุ ประสบอุบัติเหตุ',
   // },
-  { value: 'ปฏิบัติงานในจุดบริการด่วนมหานคร', text: 'ปฏิบัติงานในจุดบริการด่วนมหานคร' },
+  {
+    value: 'ปฏิบัติงานในจุดบริการด่วนมหานคร',
+    text: 'ปฏิบัติงานในจุดบริการด่วนมหานคร',
+  },
 
   { value: 'อื่นๆ', text: 'อื่นๆ' },
 ])
@@ -569,7 +572,12 @@ async function getCheck() {
   }
 
   showLoader()
-  const isSeminar = model.value === 'ไปประชุม / อบรม / สัมมนา' || model.value === 'ปฏิบัติงานในจุดบริการด่วนมหานคร' ? 'Y' : 'N'
+  const isSeminar =
+    model.value === 'ไปประชุม / อบรม / สัมมนา'
+      ? 'S'
+      : model.value === 'ปฏิบัติงานในจุดบริการด่วนมหานคร'
+      ? 'O'
+      : 'N'
 
   await http
     .get(config.API.checkoutCheck + `/${isSeminar}`)

From 9efac056e93aa7e3ba358814e30570148cfbb6f9 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Thu, 7 May 2026 16:22:58 +0700
Subject: [PATCH 17/33] fix ios live mode

---
 src/views/HomeView.vue | 13 +++++++++++++
 src/views/MapView.vue  | 10 ++++++++++
 2 files changed, 23 insertions(+)

diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index ab7257f..8067899 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -890,6 +890,8 @@ watch(
                         :resolution="{ width: photoWidth, height: photoHeight }"
                         ref="camera"
                         :autoplay="false"
+                        :playsinline="true"
+                        :facingMode="'user'"
                         :style="!img ? 'display: block' : 'display: none'"
                       />
 
@@ -1004,6 +1006,8 @@ watch(
                           }"
                           ref="camera"
                           :autoplay="false"
+                          :playsinline="true"
+                          :facingMode="'user'"
                           :style="!img ? 'display: block' : 'display: none'"
                         />
 
@@ -1513,6 +1517,15 @@ watch(
   height: 100%;
 }
 
+/* iOS-specific video fixes */
+.card-container video,
+.card-container-xs video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  -webkit-object-fit: cover;
+}
+
 .bg-topOut {
   background: rgb(39, 50, 56);
   background: linear-gradient(
diff --git a/src/views/MapView.vue b/src/views/MapView.vue
index 340308b..1b4c40f 100644
--- a/src/views/MapView.vue
+++ b/src/views/MapView.vue
@@ -335,6 +335,8 @@ onMounted(async () => {
                       :resolution="{ width: photoWidth, height: photoHeight }"
                       ref="camera"
                       :autoplay="false"
+                      :playsinline="true"
+                      :facingMode="'user'"
                       :style="!img ? 'display: block' : 'display: none'"
                     />
 
@@ -569,4 +571,12 @@ onMounted(async () => {
   width: 100%;
   height: 100%;
 }
+
+/* iOS-specific video fixes */
+.card-container video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  -webkit-object-fit: cover;
+}
 </style>

From b11e660bcf0435bde9414c7dd5b5ef3acb167474 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Thu, 7 May 2026 16:47:35 +0700
Subject: [PATCH 18/33] fix(checkin): improve camera functionality and fix iOS
 Live Mode issue

- Add playsinline prop to fix iOS Live Mode photo capture issue
- Change default camera to front camera (facingMode: 'user')
- Improve photo quality: change from PNG to JPEG with quality 0.8
- Fix memory leak: add URL.revokeObjectURL() cleanup
- Add error handling for camera operations (openCamera, capturePhoto, refreshPhoto)
- Add timestamp to photo filename for uniqueness

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 src/views/HomeView.vue | 94 ++++++++++++++++++++++++++++--------------
 src/views/MapView.vue  | 76 +++++++++++++++++++++++-----------
 2 files changed, 114 insertions(+), 56 deletions(-)

diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 8067899..dc4e8da 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -347,18 +347,23 @@ async function openCamera() {
   }
 
   if (!isPermissionCameraDenied.value) {
-    // change camera device
-    if (cameraIsOn.value) {
-      camera.value?.stop()
-    } else {
-      await camera.value?.start()
-      const devices: any = await camera.value?.devices(['videoinput'])
-      if (devices) {
-        availableCameras.value = devices
-        await changeCamera()
+    try {
+      // change camera device
+      if (cameraIsOn.value) {
+        camera.value?.stop()
+      } else {
+        await camera.value?.start()
+        const devices: any = await camera.value?.devices(['videoinput'])
+        if (devices) {
+          availableCameras.value = devices
+          await changeCamera()
+        }
       }
+      cameraIsOn.value = !cameraIsOn.value
+    } catch (error) {
+      console.error('Error opening camera:', error)
+      messageError($q, error, 'ไม่สามารถเปิดกล้องได้ กรุณาลองใหม่อีกครั้ง')
     }
-    cameraIsOn.value = !cameraIsOn.value
   } else {
     messageError(
       $q,
@@ -428,26 +433,49 @@ async function switchCamera() {
 
 /** function ถ่ายรูป*/
 async function capturePhoto() {
-  const imageBlob: any = await camera.value?.snapshot(
-    { width: photoWidth.value, height: photoHeight.value },
-    'image/png',
-    0.5
-  )
-  if (!imageBlob) return
-  const fileName = 'photo.jpg'
-  //ไฟล์รูป
-  const file = new File([imageBlob], fileName, { type: 'image/png' })
-  fileImg.value = file
-  //แสดงรูป
-  camera.value?.stop()
-  const url = URL.createObjectURL(imageBlob)
-  img.value = url
+  try {
+    const imageBlob: any = await camera.value?.snapshot(
+      { width: photoWidth.value, height: photoHeight.value },
+      'image/jpeg',
+      0.8
+    )
+    if (!imageBlob) {
+      messageError($q, '', 'ไม่สามารถถ่ายรูปได้ กรุณาลองใหม่อีกครั้ง')
+      return
+    }
+    const fileName = `photo_${Date.now()}.jpg`
+    //ไฟล์รูป
+    const file = new File([imageBlob], fileName, { type: 'image/jpeg' })
+    fileImg.value = file
+
+    // ยกเลิก URL เก่าก่อนสร้างใหม่ (ป้องกัน memory leak)
+    if (img.value) {
+      URL.revokeObjectURL(img.value)
+    }
+
+    //แสดงรูป
+    camera.value?.stop()
+    const url = URL.createObjectURL(imageBlob)
+    img.value = url
+  } catch (error) {
+    console.error('Error capturing photo:', error)
+    messageError($q, error, 'ไม่สามารถถ่ายรูปได้ กรุณาลองใหม่อีกครั้ง')
+  }
 }
 
 /** function เปลี่ยนรูปภาพ*/
-function refreshPhoto() {
-  img.value = undefined
-  camera.value?.start()
+async function refreshPhoto() {
+  try {
+    // ยกเลิก URL เก่า (ป้องกัน memory leak)
+    if (img.value) {
+      URL.revokeObjectURL(img.value)
+      img.value = undefined
+    }
+    await camera.value?.start()
+  } catch (error) {
+    console.error('Error refreshing photo:', error)
+    messageError($q, error, 'ไม่สามารถเปิดกล้องได้ กรุณาลองใหม่อีกครั้ง')
+  }
 }
 
 /** ref validate*/
@@ -627,7 +655,11 @@ async function onClickConfirm() {
   try {
     showLoader()
     cameraIsOn.value = false
-    img.value = undefined
+    // ยกเลิก URL เก่า (ป้องกัน memory leak)
+    if (img.value) {
+      URL.revokeObjectURL(img.value)
+      img.value = undefined
+    }
     modalTime.value = false
     if (!statusCheckin.value) {
       statusCheckin.value = true
@@ -665,7 +697,9 @@ const inQueue = ref<boolean>(false)
 
 // ฟังก์ชันสำหรับรีเซ็ตรูปและหยุดกล้อง
 function resetCameraAndImage() {
+  // ยกเลิก URL เก่า (ป้องกัน memory leak)
   if (img.value) {
+    URL.revokeObjectURL(img.value)
     img.value = undefined
   }
   if (cameraIsOn.value && camera.value) {
@@ -885,14 +919,12 @@ watch(
                     </div>
                     <div class="col-12 row items-center">
                       <!-- แสดงกล้องตอนกดถ่ายภาพ -->
-
                       <Camera
                         :resolution="{ width: photoWidth, height: photoHeight }"
                         ref="camera"
                         :autoplay="false"
                         :playsinline="true"
                         :facingMode="'user'"
-                        :style="!img ? 'display: block' : 'display: none'"
                       />
 
                       <!-- แสดงรูปเมื่อกด capture -->
@@ -998,7 +1030,6 @@ watch(
                       </div>
                       <div class="col-12 row items-center">
                         <!-- แสดงกล้องตอนกดถ่ายภาพ -->
-
                         <Camera
                           :resolution="{
                             width: photoWidth,
@@ -1008,7 +1039,6 @@ watch(
                           :autoplay="false"
                           :playsinline="true"
                           :facingMode="'user'"
-                          :style="!img ? 'display: block' : 'display: none'"
                         />
 
                         <!-- แสดงรูปเมื่อกด capture -->
diff --git a/src/views/MapView.vue b/src/views/MapView.vue
index 1b4c40f..5f7edc9 100644
--- a/src/views/MapView.vue
+++ b/src/views/MapView.vue
@@ -133,14 +133,19 @@ const photoHeight = ref<number>(350)
 
 /** function เปิดกล้อง */
 async function openCamera() {
-  // change camera device
-  if (cameraIsOn.value) {
-    camera.value?.stop()
-  } else {
-    await camera.value?.start()
-    changeCamera()
+  try {
+    // change camera device
+    if (cameraIsOn.value) {
+      camera.value?.stop()
+    } else {
+      await camera.value?.start()
+      changeCamera()
+    }
+    cameraIsOn.value = !cameraIsOn.value
+  } catch (error) {
+    console.error('Error opening camera:', error)
+    messageError($q, error, 'ไม่สามารถเปิดกล้องได้ กรุณาลองใหม่อีกครั้ง')
   }
-  cameraIsOn.value = !cameraIsOn.value
 }
 
 /** change camera device */
@@ -152,25 +157,49 @@ async function changeCamera() {
 
 /** function ถ่ายรูป*/
 async function capturePhoto() {
-  const imageBlob: any = await camera.value?.snapshot(
-    { width: photoWidth.value, height: photoHeight.value },
-    'image/png',
-    0.5
-  )
-  const fileName = 'photo.png'
-  //ไฟล์รูป
-  const file = new File([imageBlob], fileName, { type: 'image/png' })
-  fileImg.value = file
-  //แสดงรูป
-  camera.value?.stop()
-  const url = URL.createObjectURL(imageBlob)
-  img.value = url
+  try {
+    const imageBlob: any = await camera.value?.snapshot(
+      { width: photoWidth.value, height: photoHeight.value },
+      'image/jpeg',
+      0.8
+    )
+    if (!imageBlob) {
+      messageError($q, '', 'ไม่สามารถถ่ายรูปได้ กรุณาลองใหม่อีกครั้ง')
+      return
+    }
+    const fileName = `photo_${Date.now()}.jpg`
+    //ไฟล์รูป
+    const file = new File([imageBlob], fileName, { type: 'image/jpeg' })
+    fileImg.value = file
+
+    // ยกเลิก URL เก่าก่อนสร้างใหม่ (ป้องกัน memory leak)
+    if (img.value) {
+      URL.revokeObjectURL(img.value)
+    }
+
+    //แสดงรูป
+    camera.value?.stop()
+    const url = URL.createObjectURL(imageBlob)
+    img.value = url
+  } catch (error) {
+    console.error('Error capturing photo:', error)
+    messageError($q, error, 'ไม่สามารถถ่ายรูปได้ กรุณาลองใหม่อีกครั้ง')
+  }
 }
 
 /** function เปลี่ยนรูปภาพ*/
-function refreshPhoto() {
-  img.value = undefined
-  camera.value?.start()
+async function refreshPhoto() {
+  try {
+    // ยกเลิก URL เก่า (ป้องกัน memory leak)
+    if (img.value) {
+      URL.revokeObjectURL(img.value)
+      img.value = undefined
+    }
+    await camera.value?.start()
+  } catch (error) {
+    console.error('Error refreshing photo:', error)
+    messageError($q, error, 'ไม่สามารถเปิดกล้องได้ กรุณาลองใหม่อีกครั้ง')
+  }
 }
 
 /** ref validate*/
@@ -337,7 +366,6 @@ onMounted(async () => {
                       :autoplay="false"
                       :playsinline="true"
                       :facingMode="'user'"
-                      :style="!img ? 'display: block' : 'display: none'"
                     />
 
                     <!-- แสดงรูปเมื่อกด capture -->

From 9fde2b3984d84e8f58f491d6619a1ec2ea9ecdd2 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Fri, 8 May 2026 11:13:39 +0700
Subject: [PATCH 19/33] Fix mobile photo capture fallbacks

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 src/views/HomeView.vue | 276 ++++++++++++++++++++++++++++++++++++-----
 1 file changed, 244 insertions(+), 32 deletions(-)

diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index dc4e8da..f5f3b52 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -89,7 +89,7 @@ const formattedM = ref()
 const formattedH = ref()
 const formattedHH = ref()
 const formattedA = ref()
-const clockInterval = ref<number | undefined>()
+const clockInterval = ref<ReturnType<typeof setInterval> | undefined>()
 
 /** function อัพเดทเวลา*/
 function updateClock() {
@@ -118,6 +118,7 @@ const useLocation = ref<string>('') //กรณีเลือกนอกสถ
 const fileImg = ref<any>() //รูปถ่ายสถานที่
 const remark = ref<string>('') //ข้อความหมายเหตุที่ต้องการระบุเพิ่ม
 const checkInId = ref<string>('') //Id ลงเวลา check-in ล่าสุดที่ยังไม่ลงเวลาออก
+const MIN_CAPTURE_FILE_SIZE_BYTES = 5 * 1024
 
 /**
  *  funciton เรียกพิกัดละติจูด พิกัดลองติจูด
@@ -219,7 +220,123 @@ const availableCameras = ref<any[]>([])
 const currentCameraIndex = ref<number>(0)
 const currentCameraType = ref<'front' | 'back' | 'unknown'>('unknown')
 
-const intervalId = ref<number | undefined>(undefined) // ต้องใช้ตัวแปรเก็บค่า interval
+/**
+ * Use the native still-photo picker only on real iOS/iPadOS devices.
+ * Desktop mobile emulation can spoof the iPhone user-agent, so rely on
+ * platform + touch capability instead of user-agent alone.
+ */
+const isIOSDevice: boolean = (() => {
+  const platform = navigator.platform || ''
+  const hasTouchPoints = navigator.maxTouchPoints > 1
+
+  return (
+    /iPhone|iPad|iPod/.test(platform) ||
+    (platform === 'MacIntel' && hasTouchPoints)
+  )
+})()
+
+const isAndroidDevice: boolean = /Android/i.test(navigator.userAgent)
+const preferNativePhotoCapture = ref<boolean>(false)
+const useNativePhotoCapture = computed(
+  () => isIOSDevice || preferNativePhotoCapture.value
+)
+const centeredPreviewImageStyle = Object.freeze({
+  objectFit: 'cover',
+  objectPosition: 'center center',
+})
+
+/** Ref for the hidden file input used as native camera fallback */
+const nativePhotoInput = ref<HTMLInputElement | null>(null)
+
+function clearSelectedPhoto() {
+  if (img.value) {
+    URL.revokeObjectURL(img.value)
+    img.value = undefined
+  }
+  fileImg.value = undefined
+}
+
+async function canDecodeImageBlob(blob: Blob) {
+  if (!blob.type.startsWith('image/')) {
+    return false
+  }
+
+  const imageUrl = URL.createObjectURL(blob)
+
+  try {
+    const image = await new Promise<HTMLImageElement>((resolve, reject) => {
+      const element = new Image()
+      element.onload = () => {
+        if (element.naturalWidth > 0 && element.naturalHeight > 0) {
+          resolve(element)
+        } else {
+          reject(new Error('Image has invalid dimensions'))
+        }
+      }
+      element.onerror = () => reject(new Error('Image decode failed'))
+      element.src = imageUrl
+    })
+
+    return image.naturalWidth > 0 && image.naturalHeight > 0
+  } catch (error) {
+    console.error('Error decoding captured image:', error)
+    return false
+  } finally {
+    URL.revokeObjectURL(imageUrl)
+  }
+}
+
+async function isValidCapturedImage(blob: Blob) {
+  if (blob.size < MIN_CAPTURE_FILE_SIZE_BYTES) {
+    return false
+  }
+
+  return canDecodeImageBlob(blob)
+}
+
+async function assignSelectedPhoto(file: File) {
+  clearSelectedPhoto()
+  fileImg.value = file
+  img.value = URL.createObjectURL(file)
+}
+
+function openNativePhotoCapture() {
+  if (cameraIsOn.value) {
+    camera.value?.stop()
+    cameraIsOn.value = false
+  }
+
+  if (nativePhotoInput.value) {
+    nativePhotoInput.value.value = ''
+    nativePhotoInput.value.click()
+  }
+}
+
+/**
+ * Called when the user selects / captures a photo via the native file-input
+ * fallback. Mirrors the same `img` + `fileImg` state that capturePhoto()
+ * sets so the upload flow is identical.
+ */
+async function onNativePhotoSelected(event: Event) {
+  const input = event.target as HTMLInputElement
+  const file = input.files?.[0]
+  input.value = ''
+  if (!file) return
+
+  if (!(await isValidCapturedImage(file))) {
+    clearSelectedPhoto()
+    messageError(
+      $q,
+      '',
+      'ไม่สามารถอ่านไฟล์รูปภาพได้ กรุณาถ่ายรูปใหม่อีกครั้ง'
+    )
+    return
+  }
+
+  await assignSelectedPhoto(file)
+}
+
+const intervalId = ref<ReturnType<typeof setInterval> | undefined>(undefined)
 
 /**
  * เริ่มจาก onMounted #1 เช็ค status คิว
@@ -346,17 +463,34 @@ async function openCamera() {
     return
   }
 
+  // iOS Safari fallback: getUserMedia can open native video-recording UI and
+  // canvas.drawImage may produce a blank blob.  Use the hidden file input
+  // with capture="user" instead — this opens the native camera in photo mode.
+  if (useNativePhotoCapture.value) {
+    openNativePhotoCapture()
+    return
+  }
+
   if (!isPermissionCameraDenied.value) {
     try {
-      // change camera device
       if (cameraIsOn.value) {
         camera.value?.stop()
       } else {
+        // Keep the initial stream aligned with the Camera component's front-camera constraint.
         await camera.value?.start()
         const devices: any = await camera.value?.devices(['videoinput'])
         if (devices) {
           availableCameras.value = devices
-          await changeCamera()
+
+          // Avoid an extra stop/start cycle here; on iOS it can override the initial camera selection.
+          const activeId = camera.value?.currentDeviceID()
+          const activeIdx = activeId
+            ? devices.findIndex((d: any) => d.deviceId === activeId)
+            : -1
+          currentCameraIndex.value = activeIdx >= 0 ? activeIdx : 0
+          currentCameraType.value = identifyCameraType(
+            devices[currentCameraIndex.value]?.label || ''
+          )
         }
       }
       cameraIsOn.value = !cameraIsOn.value
@@ -439,24 +573,30 @@ async function capturePhoto() {
       'image/jpeg',
       0.8
     )
-    if (!imageBlob) {
+    if (!imageBlob || !(await isValidCapturedImage(imageBlob))) {
+      if (isAndroidDevice) {
+        preferNativePhotoCapture.value = true
+        camera.value?.stop()
+        cameraIsOn.value = false
+        clearSelectedPhoto()
+        messageError(
+          $q,
+          '',
+          'ไม่สามารถอ่านรูปจากกล้องของอุปกรณ์ได้ กรุณาถ่ายใหม่อีกครั้ง ระบบจะเปลี่ยนไปใช้โหมดถ่ายภาพของอุปกรณ์'
+        )
+        return
+      }
+
       messageError($q, '', 'ไม่สามารถถ่ายรูปได้ กรุณาลองใหม่อีกครั้ง')
       return
     }
     const fileName = `photo_${Date.now()}.jpg`
     //ไฟล์รูป
     const file = new File([imageBlob], fileName, { type: 'image/jpeg' })
-    fileImg.value = file
-
-    // ยกเลิก URL เก่าก่อนสร้างใหม่ (ป้องกัน memory leak)
-    if (img.value) {
-      URL.revokeObjectURL(img.value)
-    }
+    await assignSelectedPhoto(file)
 
     //แสดงรูป
     camera.value?.stop()
-    const url = URL.createObjectURL(imageBlob)
-    img.value = url
   } catch (error) {
     console.error('Error capturing photo:', error)
     messageError($q, error, 'ไม่สามารถถ่ายรูปได้ กรุณาลองใหม่อีกครั้ง')
@@ -466,10 +606,11 @@ async function capturePhoto() {
 /** function เปลี่ยนรูปภาพ*/
 async function refreshPhoto() {
   try {
-    // ยกเลิก URL เก่า (ป้องกัน memory leak)
-    if (img.value) {
-      URL.revokeObjectURL(img.value)
-      img.value = undefined
+    clearSelectedPhoto()
+
+    if (useNativePhotoCapture.value) {
+      openNativePhotoCapture()
+      return
     }
     await camera.value?.start()
   } catch (error) {
@@ -552,6 +693,22 @@ async function confirm() {
     return
   }
 
+  if (!fileImg.value || !(await isValidCapturedImage(fileImg.value))) {
+    if (isAndroidDevice) {
+      preferNativePhotoCapture.value = true
+      camera.value?.stop()
+      cameraIsOn.value = false
+    }
+    clearSelectedPhoto()
+    disabledBtn.value = false
+    messageError(
+      $q,
+      '',
+      'รูปภาพไม่สมบูรณ์ กรุณาถ่ายรูปใหม่อีกครั้งก่อนลงเวลา'
+    )
+    return
+  }
+
   showLoader()
   const isLocation = workplace.value === 'in-place' //*true คือ ณ สถานที่ตั้ง, false คือ นอกสถานที่ตั้ง
   const locationName = workplace.value === 'in-place' ? '' : useLocation.value
@@ -655,11 +812,7 @@ async function onClickConfirm() {
   try {
     showLoader()
     cameraIsOn.value = false
-    // ยกเลิก URL เก่า (ป้องกัน memory leak)
-    if (img.value) {
-      URL.revokeObjectURL(img.value)
-      img.value = undefined
-    }
+    clearSelectedPhoto()
     modalTime.value = false
     if (!statusCheckin.value) {
       statusCheckin.value = true
@@ -697,11 +850,7 @@ const inQueue = ref<boolean>(false)
 
 // ฟังก์ชันสำหรับรีเซ็ตรูปและหยุดกล้อง
 function resetCameraAndImage() {
-  // ยกเลิก URL เก่า (ป้องกัน memory leak)
-  if (img.value) {
-    URL.revokeObjectURL(img.value)
-    img.value = undefined
-  }
+  clearSelectedPhoto()
   if (cameraIsOn.value && camera.value) {
     camera.value.stop()
     cameraIsOn.value = false
@@ -735,7 +884,12 @@ const isPermissionCameraDenied = ref<boolean>(false) // ตัวแปรสำ
 
 async function requestCamera() {
   try {
-    await navigator.mediaDevices.getUserMedia({ video: true })
+    // Probe camera permission with the same front-camera constraint, then release the stream immediately.
+    const stream = await navigator.mediaDevices.getUserMedia({
+      video: { facingMode: 'user' },
+      audio: false,
+    })
+    stream.getTracks().forEach((track) => track.stop())
   } catch (err) {
     isPermissionCameraDenied.value = true
   }
@@ -760,7 +914,8 @@ onMounted(async () => {
   // เรียกแผนที่เฉพาะเมื่อยอมรับ privacy แล้ว
   if (privacyStore.isAccepted) {
     mapRef.value?.requestLocationPermission()
-    requestCamera()
+    // iOS uses the file-input fallback and does not need a getUserMedia probe
+    if (!useNativePhotoCapture.value) requestCamera()
   }
 })
 
@@ -802,7 +957,8 @@ watch(
   (newVal) => {
     if (newVal) {
       mapRef.value?.requestLocationPermission()
-      requestCamera()
+      // iOS uses the file-input fallback and does not need a getUserMedia probe
+      if (!useNativePhotoCapture.value) requestCamera()
     }
   }
 )
@@ -929,7 +1085,26 @@ watch(
 
                       <!-- แสดงรูปเมื่อกด capture -->
                       <div v-if="img" class="image-container">
-                        <q-img :src="img" class="image-element"></q-img>
+                        <q-img
+                          :src="img"
+                          class="image-element"
+                          :img-style="centeredPreviewImageStyle"
+                        ></q-img>
+                        <!-- Native capture: cameraIsOn stays false so show retake here
+                             the refresh button here instead of inside v-if="cameraIsOn" -->
+                        <div
+                          v-if="useNativePhotoCapture"
+                          class="absolute-bottom-right q-ma-md"
+                        >
+                          <q-btn
+                            round
+                            push
+                            icon="refresh"
+                            size="md"
+                            color="negative"
+                            @click="refreshPhoto"
+                          />
+                        </div>
                       </div>
 
                       <div v-if="cameraIsOn">
@@ -1043,7 +1218,27 @@ watch(
 
                         <!-- แสดงรูปเมื่อกด capture -->
                         <div v-if="img" class="image-container">
-                          <q-img :src="img" class="image-element"></q-img>
+                          <q-img
+                            :src="img"
+                            class="image-element"
+                            :img-style="centeredPreviewImageStyle"
+                          ></q-img>
+                          <!-- Native capture: cameraIsOn stays false so show retake here
+                               the refresh button here instead of inside v-if="cameraIsOn" -->
+                          <div
+                            v-if="useNativePhotoCapture"
+                            class="absolute-bottom text-subtitle2 text-center q-py-sm"
+                            style="background: #00000021"
+                          >
+                            <q-btn
+                              round
+                              icon="refresh"
+                              size="18px"
+                              style="background: #263238; color: white"
+                              @click="refreshPhoto"
+                              unelevated
+                            />
+                          </div>
                         </div>
 
                         <div v-if="cameraIsOn">
@@ -1497,6 +1692,21 @@ watch(
       </q-card-actions>
     </q-card>
   </q-dialog>
+
+  <!--
+    Native still-image fallback: hidden file input.
+    Used for iOS by default and for Android only after the live snapshot path
+    produces an unreadable image, so the user can retake with the device camera.
+  -->
+  <input
+    v-if="useNativePhotoCapture"
+    ref="nativePhotoInput"
+    type="file"
+    accept="image/*"
+    capture="user"
+    style="display: none"
+    @change="onNativePhotoSelected"
+  />
 </template>
 
 <style scoped>
@@ -1533,6 +1743,8 @@ watch(
   left: 0;
   width: 100%;
   height: 100%;
+  overflow: hidden;
+  border-radius: 8px;
 }
 
 .image-element {

From 92f9137cbb3075ef1294884b9fa766f0eee8942e Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Fri, 8 May 2026 11:27:03 +0700
Subject: [PATCH 20/33] memory agent

---
 .claude/agent-memory/hrms-checkin-expert/MEMORY.md    |  1 +
 .../project_active_camera_scope.md                    | 11 +++++++++++
 2 files changed, 12 insertions(+)
 create mode 100644 .claude/agent-memory/hrms-checkin-expert/project_active_camera_scope.md

diff --git a/.claude/agent-memory/hrms-checkin-expert/MEMORY.md b/.claude/agent-memory/hrms-checkin-expert/MEMORY.md
index 7897460..29df51c 100644
--- a/.claude/agent-memory/hrms-checkin-expert/MEMORY.md
+++ b/.claude/agent-memory/hrms-checkin-expert/MEMORY.md
@@ -7,3 +7,4 @@
 ## Project Issues & Fixes
 
 - [Position Orientation Change Fix](issue_position_orientation_change_fix.md) - Fix for position map not displaying on screen orientation changes
+- [Active Camera Scope](project_active_camera_scope.md) - Current camera issue work should stay in HomeView.vue, not legacy MapView.vue
diff --git a/.claude/agent-memory/hrms-checkin-expert/project_active_camera_scope.md b/.claude/agent-memory/hrms-checkin-expert/project_active_camera_scope.md
new file mode 100644
index 0000000..a10c142
--- /dev/null
+++ b/.claude/agent-memory/hrms-checkin-expert/project_active_camera_scope.md
@@ -0,0 +1,11 @@
+---
+name: Active camera investigation scope
+description: Current camera issue investigations should focus on HomeView.vue; the legacy Google Map MapView.vue flow is not in active use
+type: project
+---
+
+Current camera issue work should focus on `HomeView.vue`; do not investigate or modify the legacy Google Map `MapView.vue` flow for this issue.
+
+**Why:** The user clarified that `MapView.vue` is an older Google Map implementation from earlier work and is not the path currently used in production for this check-in flow.
+
+**How to apply:** For follow-up debugging or fixes related to the current camera/upload issue, scope analysis and implementation to `HomeView.vue` unless the user explicitly re-opens `MapView.vue`.

From 30a8f0144135702a27e6da6313a85e447c42ec2f Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Fri, 8 May 2026 11:30:41 +0700
Subject: [PATCH 21/33] fix permission request & display photo center

---
 src/composables/usePermissions.ts | 185 ++++++++++++++++++++++++------
 src/views/HomeView.vue            |  87 +++++++-------
 2 files changed, 191 insertions(+), 81 deletions(-)

diff --git a/src/composables/usePermissions.ts b/src/composables/usePermissions.ts
index ecf1ef3..b92ed29 100644
--- a/src/composables/usePermissions.ts
+++ b/src/composables/usePermissions.ts
@@ -1,52 +1,171 @@
-import { useQuasar } from 'quasar'
+import { onBeforeUnmount, ref } from 'vue'
 import { usePrivacyStore } from '@/stores/privacy'
 
+type BrowserPermissionState = PermissionState | 'unsupported'
+
+type PermissionQueryName = 'camera' | 'geolocation'
+
 export function usePermissions() {
-  const $q = useQuasar()
   const privacyStore = usePrivacyStore()
+  const cameraPermissionState = ref<BrowserPermissionState>('prompt')
+  const locationPermissionState = ref<BrowserPermissionState>('prompt')
 
-  // const checkCameraPermission = (): boolean => {
-  //   if (!privacyStore.isAccepted) {
-  //     privacyStore.modalPrivacy = true
-  //     $q.notify({
-  //       type: 'warning',
-  //       message: 'กรุณายอมรับนโยบายคุ้มครองข้อมูลส่วนบุคคลก่อนใช้งานกล้อง',
-  //       position: 'top',
-  //     })
-  //     return false
-  //   }
-  //   return true
-  // }
+  let cameraPermissionStatus: PermissionStatus | null = null
+  let locationPermissionStatus: PermissionStatus | null = null
 
-  // const checkLocationPermission = (): boolean => {
-  //   if (!privacyStore.isAccepted) {
-  //     privacyStore.modalPrivacy = true
-  //     $q.notify({
-  //       type: 'warning',
-  //       message: 'กรุณายอมรับนโยบายคุ้มครองข้อมูลส่วนบุคคลก่อนใช้งานแผนที่',
-  //       position: 'top',
-  //     })
-  //     return false
-  //   }
-  //   return true
-  // }
+  const isPermissionsApiSupported = () =>
+    typeof navigator !== 'undefined' && 'permissions' in navigator
+
+  const setPermissionState = (
+    target: typeof cameraPermissionState | typeof locationPermissionState,
+    state: BrowserPermissionState
+  ) => {
+    target.value = state
+  }
+
+  const setPermissionChangeListener = (
+    name: PermissionQueryName,
+    status: PermissionStatus
+  ) => {
+    status.onchange = () => {
+      const target =
+        name === 'camera' ? cameraPermissionState : locationPermissionState
+      setPermissionState(target, status.state)
+    }
+  }
+
+  async function queryPermissionState(name: PermissionQueryName) {
+    if (!isPermissionsApiSupported()) {
+      return null
+    }
+
+    try {
+      return await navigator.permissions.query({ name } as PermissionDescriptor)
+    } catch (error) {
+      return null
+    }
+  }
+
+  async function syncPermissionState(name: PermissionQueryName) {
+    const target =
+      name === 'camera' ? cameraPermissionState : locationPermissionState
+    const previousStatus =
+      name === 'camera' ? cameraPermissionStatus : locationPermissionStatus
+
+    if (previousStatus) {
+      previousStatus.onchange = null
+    }
+
+    const status = await queryPermissionState(name)
+    if (!status) {
+      if (target.value === 'prompt') {
+        setPermissionState(target, 'unsupported')
+      }
+      return
+    }
+
+    if (name === 'camera') {
+      cameraPermissionStatus = status
+    } else {
+      locationPermissionStatus = status
+    }
+
+    setPermissionState(target, status.state)
+    setPermissionChangeListener(name, status)
+  }
+
+  async function syncPermissionStates() {
+    await Promise.all([
+      syncPermissionState('camera'),
+      syncPermissionState('geolocation'),
+    ])
+  }
 
   const checkPrivacyAccepted = (): boolean => {
     if (!privacyStore.isAccepted) {
       privacyStore.modalPrivacy = true
-      // $q.notify({
-      //   type: 'warning',
-      //   message: 'กรุณายอมรับนโยบายคุ้มครองข้อมูลส่วนบุคคลก่อนใช้งาน',
-      //   position: 'center',
-      // })
       return false
     }
     return true
   }
 
+  async function requestCameraPermission() {
+    if (!checkPrivacyAccepted()) {
+      return false
+    }
+
+    if (cameraPermissionState.value === 'granted') {
+      return true
+    }
+
+    if (!navigator.mediaDevices?.getUserMedia) {
+      setPermissionState(cameraPermissionState, 'unsupported')
+      return false
+    }
+
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({
+        video: { facingMode: 'user' },
+        audio: false,
+      })
+
+      stream.getTracks().forEach((track) => track.stop())
+      setPermissionState(cameraPermissionState, 'granted')
+      return true
+    } catch (error) {
+      setPermissionState(cameraPermissionState, 'denied')
+      return false
+    } finally {
+      await syncPermissionState('camera')
+    }
+  }
+
+  async function requestLocationPermission() {
+    if (!checkPrivacyAccepted()) {
+      return false
+    }
+
+    if (locationPermissionState.value === 'granted') {
+      return true
+    }
+
+    if (!navigator.geolocation) {
+      setPermissionState(locationPermissionState, 'unsupported')
+      return false
+    }
+
+    return new Promise<boolean>((resolve) => {
+      navigator.geolocation.getCurrentPosition(
+        async () => {
+          setPermissionState(locationPermissionState, 'granted')
+          await syncPermissionState('geolocation')
+          resolve(true)
+        },
+        async () => {
+          setPermissionState(locationPermissionState, 'denied')
+          await syncPermissionState('geolocation')
+          resolve(false)
+        }
+      )
+    })
+  }
+
+  onBeforeUnmount(() => {
+    if (cameraPermissionStatus) {
+      cameraPermissionStatus.onchange = null
+    }
+
+    if (locationPermissionStatus) {
+      locationPermissionStatus.onchange = null
+    }
+  })
+
   return {
-    // checkCameraPermission,
-    // checkLocationPermission,
+    cameraPermissionState,
+    locationPermissionState,
     checkPrivacyAccepted,
+    syncPermissionStates,
+    requestCameraPermission,
+    requestLocationPermission,
   }
 }
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index f5f3b52..023778e 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -18,7 +18,11 @@ import MapCheck from '@/components/AscGISMap.vue'
 const mixin = useCounterMixin()
 const { date2Thai, showLoader, hideLoader, messageError, dialogConfirm } = mixin
 const $q = useQuasar()
-const { checkPrivacyAccepted } = usePermissions()
+const {
+  checkPrivacyAccepted,
+  syncPermissionStates,
+  requestCameraPermission,
+} = usePermissions()
 const privacyStore = usePrivacyStore()
 const positionKeycloakStore = usePositionKeycloakStore()
 const MOCK_CHECK_DELAY_MS = 800
@@ -471,34 +475,14 @@ async function openCamera() {
     return
   }
 
-  if (!isPermissionCameraDenied.value) {
-    try {
-      if (cameraIsOn.value) {
-        camera.value?.stop()
-      } else {
-        // Keep the initial stream aligned with the Camera component's front-camera constraint.
-        await camera.value?.start()
-        const devices: any = await camera.value?.devices(['videoinput'])
-        if (devices) {
-          availableCameras.value = devices
+  if (cameraIsOn.value) {
+    camera.value?.stop()
+    cameraIsOn.value = false
+    return
+  }
 
-          // Avoid an extra stop/start cycle here; on iOS it can override the initial camera selection.
-          const activeId = camera.value?.currentDeviceID()
-          const activeIdx = activeId
-            ? devices.findIndex((d: any) => d.deviceId === activeId)
-            : -1
-          currentCameraIndex.value = activeIdx >= 0 ? activeIdx : 0
-          currentCameraType.value = identifyCameraType(
-            devices[currentCameraIndex.value]?.label || ''
-          )
-        }
-      }
-      cameraIsOn.value = !cameraIsOn.value
-    } catch (error) {
-      console.error('Error opening camera:', error)
-      messageError($q, error, 'ไม่สามารถเปิดกล้องได้ กรุณาลองใหม่อีกครั้ง')
-    }
-  } else {
+  const hasCameraPermission = await requestCameraPermission()
+  if (!hasCameraPermission) {
     messageError(
       $q,
       '',
@@ -506,6 +490,29 @@ async function openCamera() {
     )
     return
   }
+
+  try {
+    // Keep the initial stream aligned with the Camera component's front-camera constraint.
+    await camera.value?.start()
+    const devices: any = await camera.value?.devices(['videoinput'])
+    if (devices) {
+      availableCameras.value = devices
+
+      // Avoid an extra stop/start cycle here; on iOS it can override the initial camera selection.
+      const activeId = camera.value?.currentDeviceID()
+      const activeIdx = activeId
+        ? devices.findIndex((d: any) => d.deviceId === activeId)
+        : -1
+      currentCameraIndex.value = activeIdx >= 0 ? activeIdx : 0
+      currentCameraType.value = identifyCameraType(
+        devices[currentCameraIndex.value]?.label || ''
+      )
+    }
+    cameraIsOn.value = true
+  } catch (error) {
+    console.error('Error opening camera:', error)
+    messageError($q, error, 'ไม่สามารถเปิดกล้องได้ กรุณาลองใหม่อีกครั้ง')
+  }
 }
 
 /** change camera device*/
@@ -880,21 +887,6 @@ function handleVisibilityChange() {
   }
 }
 
-const isPermissionCameraDenied = ref<boolean>(false) // ตัวแปรสำหรับตรวจสอบการปฏิเสธสิทธิ์กล้อง
-
-async function requestCamera() {
-  try {
-    // Probe camera permission with the same front-camera constraint, then release the stream immediately.
-    const stream = await navigator.mediaDevices.getUserMedia({
-      video: { facingMode: 'user' },
-      audio: false,
-    })
-    stream.getTracks().forEach((track) => track.stop())
-  } catch (err) {
-    isPermissionCameraDenied.value = true
-  }
-}
-
 /** Hook*/
 onMounted(async () => {
   // เริ่มต้น clock เสมอ
@@ -911,11 +903,11 @@ onMounted(async () => {
     startChecking()
   }
 
+  await syncPermissionStates()
+
   // เรียกแผนที่เฉพาะเมื่อยอมรับ privacy แล้ว
   if (privacyStore.isAccepted) {
     mapRef.value?.requestLocationPermission()
-    // iOS uses the file-input fallback and does not need a getUserMedia probe
-    if (!useNativePhotoCapture.value) requestCamera()
   }
 })
 
@@ -954,11 +946,10 @@ onBeforeUnmount(() => {
 
 watch(
   () => privacyStore.isAccepted,
-  (newVal) => {
+  async (newVal) => {
     if (newVal) {
+      await syncPermissionStates()
       mapRef.value?.requestLocationPermission()
-      // iOS uses the file-input fallback and does not need a getUserMedia probe
-      if (!useNativePhotoCapture.value) requestCamera()
     }
   }
 )

From 9e69d3396345411a4f49d83f9b651b0bd1ecb973 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Fri, 8 May 2026 17:24:36 +0700
Subject: [PATCH 22/33] fix camera ios 18.x check inline page camera

---
 .../hrms-checkin-expert/MEMORY.md             |   3 +
 .../issue_front_camera_preview_alignment.md   |  11 +
 .../issue_ios_native_camera_popup_control.md  |  11 +
 .../issue_ios_native_photo_mirroring.md       |  11 +
 src/views/HomeView.vue                        | 248 +++++++++++++++---
 5 files changed, 243 insertions(+), 41 deletions(-)
 create mode 100644 .claude/agent-memory/hrms-checkin-expert/issue_front_camera_preview_alignment.md
 create mode 100644 .claude/agent-memory/hrms-checkin-expert/issue_ios_native_camera_popup_control.md
 create mode 100644 .claude/agent-memory/hrms-checkin-expert/issue_ios_native_photo_mirroring.md

diff --git a/.claude/agent-memory/hrms-checkin-expert/MEMORY.md b/.claude/agent-memory/hrms-checkin-expert/MEMORY.md
index 29df51c..cc99e8f 100644
--- a/.claude/agent-memory/hrms-checkin-expert/MEMORY.md
+++ b/.claude/agent-memory/hrms-checkin-expert/MEMORY.md
@@ -8,3 +8,6 @@
 
 - [Position Orientation Change Fix](issue_position_orientation_change_fix.md) - Fix for position map not displaying on screen orientation changes
 - [Active Camera Scope](project_active_camera_scope.md) - Current camera issue work should stay in HomeView.vue, not legacy MapView.vue
+- [Front Camera Preview Alignment](issue_front_camera_preview_alignment.md) - Keep popup preview orientation aligned with normalized saved photos
+- [iOS Native Photo Mirroring](issue_ios_native_photo_mirroring.md) - Do not flip iOS native-capture photos during normalization
+- [iOS Native Camera Popup](issue_ios_native_camera_popup_control.md) - Inline-first on iOS; native activates only after inline fails (prior native-first seed was reverted)
diff --git a/.claude/agent-memory/hrms-checkin-expert/issue_front_camera_preview_alignment.md b/.claude/agent-memory/hrms-checkin-expert/issue_front_camera_preview_alignment.md
new file mode 100644
index 0000000..f78b23d
--- /dev/null
+++ b/.claude/agent-memory/hrms-checkin-expert/issue_front_camera_preview_alignment.md
@@ -0,0 +1,11 @@
+---
+name: front_camera_preview_alignment
+description: HomeView inline camera flow should show a non-mirrored preview and keep the saved/uploaded image in the same orientation the user saw while shooting
+type: project
+---
+
+When fixing front-camera capture issues in `HomeView.vue`, keep the in-page preview and the final saved/uploaded image in the same non-mirrored orientation.
+
+**Why:** Users rejected flows where the live in-page preview looked mirrored or differed from the final image. The expected behavior is “what I see while shooting is what gets used.”
+
+**How to apply:** In the inline `simple-vue-camera` flow, avoid extra front-camera mirroring in either preview styling or snapshot normalization. Treat the in-page preview as the canonical orientation for `img`/`fileImg`.
diff --git a/.claude/agent-memory/hrms-checkin-expert/issue_ios_native_camera_popup_control.md b/.claude/agent-memory/hrms-checkin-expert/issue_ios_native_camera_popup_control.md
new file mode 100644
index 0000000..22792d0
--- /dev/null
+++ b/.claude/agent-memory/hrms-checkin-expert/issue_ios_native_camera_popup_control.md
@@ -0,0 +1,11 @@
+---
+name: ios_native_camera_popup_control
+description: iOS uses inline camera first (same as Android); native fallback triggers only after inline fails. The prior "native-first on iOS" approach was reverted per product requirement.
+type: project
+---
+
+In `HomeView.vue`, the inline camera is **always attempted first** on iOS (and every other platform).  The hidden `<input type="file" capture="user">` is only activated by `switchToNativePhotoCapture()` / `enableNativePhotoCaptureFallback()` after inline capture is proven to fail.
+
+**Why:** The product requirement is "use inline camera whenever the device supports inline capture; use native device capture only when inline is not supported or fails."  iOS Safari supports `getUserMedia` since iOS 14.3, so inline-first is viable.  A prior session hard-coded `useNativePhotoCapture = computed(() => isIOSDevice || preferNativePhotoCapture.value)`, bypassing inline on iOS entirely — that line was reverted.
+
+**How to apply:** `preferNativePhotoCapture` must start `false` on all devices.  Never seed it with `isIOSDevice`.  All failure paths (`openCamera` permission denied, `camera.start()` throw, invalid snapshot blob, invalid image on submit) already call `switchToNativePhotoCapture()` which sets `preferNativePhotoCapture = true` so subsequent taps go directly to native — covering the first-tap fallback automatically.
diff --git a/.claude/agent-memory/hrms-checkin-expert/issue_ios_native_photo_mirroring.md b/.claude/agent-memory/hrms-checkin-expert/issue_ios_native_photo_mirroring.md
new file mode 100644
index 0000000..77f33ef
--- /dev/null
+++ b/.claude/agent-memory/hrms-checkin-expert/issue_ios_native_photo_mirroring.md
@@ -0,0 +1,11 @@
+---
+name: ios_native_photo_mirroring
+description: Native photo capture on iOS in HomeView should not be horizontally mirrored during normalization
+type: project
+---
+
+For `HomeView.vue`, native photo capture on iOS should not apply horizontal mirroring during image normalization.
+
+**Why:** The iOS fallback uses the native still-photo picker, and the returned photo can already be in the correct orientation. Applying the same mirror correction used for other front-camera paths flips the image incorrectly on iOS.
+
+**How to apply:** Keep platform-specific normalization for native capture. Do not assume the iOS file-input photo path behaves the same as `simple-vue-camera` snapshots or Android fallback capture.
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 023778e..23f9483 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,5 +1,12 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted, watch, onBeforeUnmount, computed } from 'vue'
+import {
+  ref,
+  reactive,
+  onMounted,
+  watch,
+  onBeforeUnmount,
+  computed,
+} from 'vue'
 import { useQuasar } from 'quasar'
 import { format } from 'date-fns'
 import Camera from 'simple-vue-camera'
@@ -19,6 +26,7 @@ const mixin = useCounterMixin()
 const { date2Thai, showLoader, hideLoader, messageError, dialogConfirm } = mixin
 const $q = useQuasar()
 const {
+  cameraPermissionState,
   checkPrivacyAccepted,
   syncPermissionStates,
   requestCameraPermission,
@@ -225,9 +233,8 @@ const currentCameraIndex = ref<number>(0)
 const currentCameraType = ref<'front' | 'back' | 'unknown'>('unknown')
 
 /**
- * Use the native still-photo picker only on real iOS/iPadOS devices.
- * Desktop mobile emulation can spoof the iPhone user-agent, so rely on
- * platform + touch capability instead of user-agent alone.
+ * Detect real iOS/iPadOS devices. Desktop mobile emulation can spoof the
+ * iPhone user-agent, so rely on platform + touch capability instead.
  */
 const isIOSDevice: boolean = (() => {
   const platform = navigator.platform || ''
@@ -240,10 +247,16 @@ const isIOSDevice: boolean = (() => {
 })()
 
 const isAndroidDevice: boolean = /Android/i.test(navigator.userAgent)
+/**
+ * `preferNativePhotoCapture` starts false on every device — inline camera is
+ * always attempted first.  It is set to true only by
+ * `switchToNativePhotoCapture()` / `enableNativePhotoCaptureFallback()` when
+ * inline capture is proven to be unsupported or has failed.  This covers iOS
+ * Safari too: getUserMedia is supported there since iOS 14.3, so we try
+ * inline first and fall back gracefully on first failure.
+ */
 const preferNativePhotoCapture = ref<boolean>(false)
-const useNativePhotoCapture = computed(
-  () => isIOSDevice || preferNativePhotoCapture.value
-)
+const useNativePhotoCapture = computed(() => preferNativePhotoCapture.value)
 const centeredPreviewImageStyle = Object.freeze({
   objectFit: 'cover',
   objectPosition: 'center center',
@@ -251,6 +264,13 @@ const centeredPreviewImageStyle = Object.freeze({
 
 /** Ref for the hidden file input used as native camera fallback */
 const nativePhotoInput = ref<HTMLInputElement | null>(null)
+const DEFAULT_NORMALIZED_IMAGE_QUALITY = 0.92
+
+interface NormalizePhotoOptions {
+  fileName?: string
+  mirrorHorizontally?: boolean
+  quality?: number
+}
 
 function clearSelectedPhoto() {
   if (img.value) {
@@ -298,6 +318,70 @@ async function isValidCapturedImage(blob: Blob) {
   return canDecodeImageBlob(blob)
 }
 
+async function loadImageFromBlob(blob: Blob) {
+  const imageUrl = URL.createObjectURL(blob)
+
+  try {
+    return await new Promise<HTMLImageElement>((resolve, reject) => {
+      const image = new Image()
+      image.onload = () => resolve(image)
+      image.onerror = () => reject(new Error('Image load failed'))
+      image.src = imageUrl
+    })
+  } finally {
+    URL.revokeObjectURL(imageUrl)
+  }
+}
+
+async function normalizePhotoFile(
+  source: Blob,
+  options: NormalizePhotoOptions = {}
+) {
+  const fileName =
+    options.fileName ??
+    (source instanceof File && source.name
+      ? source.name
+      : `photo_${Date.now()}.jpg`)
+  const imageType =
+    source.type && source.type.startsWith('image/') ? source.type : 'image/jpeg'
+
+  if (!options.mirrorHorizontally) {
+    if (source instanceof File && source.name === fileName) {
+      return source
+    }
+
+    return new File([source], fileName, { type: imageType })
+  }
+
+  const image = await loadImageFromBlob(source)
+  const canvas = document.createElement('canvas')
+  canvas.width = image.naturalWidth
+  canvas.height = image.naturalHeight
+
+  const context = canvas.getContext('2d')
+  if (!context) {
+    throw new Error('Canvas context unavailable')
+  }
+
+  context.translate(canvas.width, 0)
+  context.scale(-1, 1)
+  context.drawImage(image, 0, 0, canvas.width, canvas.height)
+
+  const normalizedBlob = await new Promise<Blob | null>((resolve) => {
+    canvas.toBlob(
+      resolve,
+      imageType,
+      options.quality ?? DEFAULT_NORMALIZED_IMAGE_QUALITY
+    )
+  })
+
+  if (!normalizedBlob) {
+    throw new Error('Failed to normalize image')
+  }
+
+  return new File([normalizedBlob], fileName, { type: imageType })
+}
+
 async function assignSelectedPhoto(file: File) {
   clearSelectedPhoto()
   fileImg.value = file
@@ -316,9 +400,21 @@ function openNativePhotoCapture() {
   }
 }
 
+function enableNativePhotoCaptureFallback() {
+  preferNativePhotoCapture.value = true
+  camera.value?.stop()
+  cameraIsOn.value = false
+  clearSelectedPhoto()
+}
+
+function switchToNativePhotoCapture() {
+  enableNativePhotoCaptureFallback()
+  openNativePhotoCapture()
+}
+
 /**
  * Called when the user selects / captures a photo via the native file-input
- * fallback. Mirrors the same `img` + `fileImg` state that capturePhoto()
+ * fallback. Keeps the same `img` + `fileImg` state that capturePhoto()
  * sets so the upload flow is identical.
  */
 async function onNativePhotoSelected(event: Event) {
@@ -337,7 +433,22 @@ async function onNativePhotoSelected(event: Event) {
     return
   }
 
-  await assignSelectedPhoto(file)
+  try {
+    const normalizedFile = await normalizePhotoFile(file, {
+      fileName: file.name,
+      mirrorHorizontally: !isIOSDevice,
+    })
+
+    if (!(await isValidCapturedImage(normalizedFile))) {
+      throw new Error('Normalized image is invalid')
+    }
+
+    await assignSelectedPhoto(normalizedFile)
+  } catch (error) {
+    console.error('Error normalizing native photo:', error)
+    clearSelectedPhoto()
+    messageError($q, error, 'ไม่สามารถเตรียมรูปภาพได้ กรุณาถ่ายรูปใหม่อีกครั้ง')
+  }
 }
 
 const intervalId = ref<ReturnType<typeof setInterval> | undefined>(undefined)
@@ -460,6 +571,14 @@ function identifyCameraType(label: string): 'front' | 'back' | 'unknown' {
   return 'unknown'
 }
 
+function resolveCameraType(
+  label: string,
+  fallbackType: 'front' | 'back'
+): 'front' | 'back' {
+  const detectedType = identifyCameraType(label)
+  return detectedType === 'unknown' ? fallbackType : detectedType
+}
+
 /** function เปิดกล้อง*/
 async function openCamera() {
   // เช็คสิทธิ์ privacy ก่อนเปิดกล้อง
@@ -467,9 +586,8 @@ async function openCamera() {
     return
   }
 
-  // iOS Safari fallback: getUserMedia can open native video-recording UI and
-  // canvas.drawImage may produce a blank blob.  Use the hidden file input
-  // with capture="user" instead — this opens the native camera in photo mode.
+  // If inline capture previously failed on this device, fall back to the
+  // native still-photo picker instead of reopening the live camera.
   if (useNativePhotoCapture.value) {
     openNativePhotoCapture()
     return
@@ -481,8 +599,23 @@ async function openCamera() {
     return
   }
 
+  if (
+    (isIOSDevice || isAndroidDevice) &&
+    !useNativePhotoCapture.value &&
+    (cameraPermissionState.value === 'denied' ||
+      cameraPermissionState.value === 'unsupported')
+  ) {
+    switchToNativePhotoCapture()
+    return
+  }
+
   const hasCameraPermission = await requestCameraPermission()
   if (!hasCameraPermission) {
+    if ((isIOSDevice || isAndroidDevice) && !useNativePhotoCapture.value) {
+      switchToNativePhotoCapture()
+      return
+    }
+
     messageError(
       $q,
       '',
@@ -492,6 +625,8 @@ async function openCamera() {
   }
 
   try {
+    currentCameraType.value = 'front'
+
     // Keep the initial stream aligned with the Camera component's front-camera constraint.
     await camera.value?.start()
     const devices: any = await camera.value?.devices(['videoinput'])
@@ -504,13 +639,20 @@ async function openCamera() {
         ? devices.findIndex((d: any) => d.deviceId === activeId)
         : -1
       currentCameraIndex.value = activeIdx >= 0 ? activeIdx : 0
-      currentCameraType.value = identifyCameraType(
-        devices[currentCameraIndex.value]?.label || ''
+      currentCameraType.value = resolveCameraType(
+        devices[currentCameraIndex.value]?.label || '',
+        'front'
       )
     }
     cameraIsOn.value = true
   } catch (error) {
     console.error('Error opening camera:', error)
+
+    if ((isIOSDevice || isAndroidDevice) && !useNativePhotoCapture.value) {
+      switchToNativePhotoCapture()
+      return
+    }
+
     messageError($q, error, 'ไม่สามารถเปิดกล้องได้ กรุณาลองใหม่อีกครั้ง')
   }
 }
@@ -529,9 +671,15 @@ async function changeCamera(targetCameraType?: 'front' | 'back') {
 
     if (devices.length === 1 || !targetCameraType) {
       const device = devices[0]
+      const fallbackType =
+        targetCameraType ??
+        (currentCameraType.value === 'back' ? 'back' : 'front')
       await camera.value?.changeCamera(device.deviceId)
       currentCameraIndex.value = 0
-      currentCameraType.value = identifyCameraType(device.label || '')
+      currentCameraType.value = resolveCameraType(
+        device.label || '',
+        fallbackType
+      )
       return
     }
 
@@ -544,13 +692,19 @@ async function changeCamera(targetCameraType?: 'front' | 'back') {
       const targetDevice = matchingCameras[0]
       await camera.value?.changeCamera(targetDevice.deviceId)
       currentCameraIndex.value = devices.indexOf(targetDevice)
-      currentCameraType.value = targetCameraType
+      currentCameraType.value = resolveCameraType(
+        targetDevice.label || '',
+        targetCameraType
+      )
     } else {
       const nextIndex = (currentCameraIndex.value + 1) % devices.length
       const nextDevice = devices[nextIndex]
       await camera.value?.changeCamera(nextDevice.deviceId)
       currentCameraIndex.value = nextIndex
-      currentCameraType.value = identifyCameraType(nextDevice.label || '')
+      currentCameraType.value = resolveCameraType(
+        nextDevice.label || '',
+        targetCameraType
+      )
     }
   } catch (error) {
     console.error('Error switching camera:', error)
@@ -566,10 +720,14 @@ async function switchCamera() {
   // สลับแค่ระหว่างกล้อง 2 ตัวแรก (กล้องหน้าและหลังหลัก)
   const targetIndex = currentCameraIndex.value === 0 ? 1 : 0
   const targetDevice = availableCameras.value[targetIndex]
+  const fallbackType = currentCameraType.value === 'back' ? 'front' : 'back'
 
   await camera.value?.changeCamera(targetDevice.deviceId)
   currentCameraIndex.value = targetIndex
-  currentCameraType.value = identifyCameraType(targetDevice.label || '')
+  currentCameraType.value = resolveCameraType(
+    targetDevice.label || '',
+    fallbackType
+  )
 }
 
 /** function ถ่ายรูป*/
@@ -581,16 +739,8 @@ async function capturePhoto() {
       0.8
     )
     if (!imageBlob || !(await isValidCapturedImage(imageBlob))) {
-      if (isAndroidDevice) {
-        preferNativePhotoCapture.value = true
-        camera.value?.stop()
-        cameraIsOn.value = false
-        clearSelectedPhoto()
-        messageError(
-          $q,
-          '',
-          'ไม่สามารถอ่านรูปจากกล้องของอุปกรณ์ได้ กรุณาถ่ายใหม่อีกครั้ง ระบบจะเปลี่ยนไปใช้โหมดถ่ายภาพของอุปกรณ์'
-        )
+      if (isIOSDevice || isAndroidDevice) {
+        switchToNativePhotoCapture()
         return
       }
 
@@ -598,14 +748,28 @@ async function capturePhoto() {
       return
     }
     const fileName = `photo_${Date.now()}.jpg`
-    //ไฟล์รูป
-    const file = new File([imageBlob], fileName, { type: 'image/jpeg' })
-    await assignSelectedPhoto(file)
+    const normalizedFile = await normalizePhotoFile(imageBlob, {
+      fileName,
+      mirrorHorizontally: false,
+      quality: 0.8,
+    })
+
+    if (!(await isValidCapturedImage(normalizedFile))) {
+      throw new Error('Normalized image is invalid')
+    }
+
+    await assignSelectedPhoto(normalizedFile)
 
     //แสดงรูป
     camera.value?.stop()
   } catch (error) {
     console.error('Error capturing photo:', error)
+
+    if ((isIOSDevice || isAndroidDevice) && !useNativePhotoCapture.value) {
+      switchToNativePhotoCapture()
+      return
+    }
+
     messageError($q, error, 'ไม่สามารถถ่ายรูปได้ กรุณาลองใหม่อีกครั้ง')
   }
 }
@@ -701,10 +865,8 @@ async function confirm() {
   }
 
   if (!fileImg.value || !(await isValidCapturedImage(fileImg.value))) {
-    if (isAndroidDevice) {
-      preferNativePhotoCapture.value = true
-      camera.value?.stop()
-      cameraIsOn.value = false
+    if ((isIOSDevice || isAndroidDevice) && !useNativePhotoCapture.value) {
+      enableNativePhotoCaptureFallback()
     }
     clearSelectedPhoto()
     disabledBtn.value = false
@@ -1069,6 +1231,9 @@ watch(
                       <Camera
                         :resolution="{ width: photoWidth, height: photoHeight }"
                         ref="camera"
+                        :class="[
+                          'camera-preview',
+                        ]"
                         :autoplay="false"
                         :playsinline="true"
                         :facingMode="'user'"
@@ -1202,6 +1367,9 @@ watch(
                             height: photoHeight,
                           }"
                           ref="camera"
+                          :class="[
+                            'camera-preview',
+                          ]"
                           :autoplay="false"
                           :playsinline="true"
                           :facingMode="'user'"
@@ -1686,11 +1854,10 @@ watch(
 
   <!--
     Native still-image fallback: hidden file input.
-    Used for iOS by default and for Android only after the live snapshot path
-    produces an unreadable image, so the user can retake with the device camera.
+    Activated only after inline camera is proven unsupported or fails — on any
+    platform including iOS.  Never used as the first-choice path.
   -->
   <input
-    v-if="useNativePhotoCapture"
     ref="nativePhotoInput"
     type="file"
     accept="image/*"
@@ -1750,9 +1917,8 @@ watch(
   height: 100%;
 }
 
-/* iOS-specific video fixes */
-.card-container video,
-.card-container-xs video {
+/* Keep the live camera preview visually aligned with the normalized saved photo. */
+.camera-preview :deep(video) {
   width: 100%;
   height: 100%;
   object-fit: cover;

From 58c1dfb5cc140abde51b662454cc19eca4cfdd5c Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Fri, 8 May 2026 18:15:54 +0700
Subject: [PATCH 23/33] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=84=E0=B8=A7=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A1=E0=B9=81=E0=B8=88=E0=B9=89=E0=B8=87=E0=B9=80=E0=B8=95?=
 =?UTF-8?q?=E0=B8=B7=E0=B8=AD=E0=B8=81=E0=B8=A3=E0=B8=93=E0=B8=B5=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B7=E0=B8=A1=E0=B8=A5=E0=B8=87=E0=B9=80=E0=B8=A7=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=AD=E0=B8=AD=E0=B8=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/HomeView.vue | 79 +++++++++++++++++++++++++++++-------------
 1 file changed, 54 insertions(+), 25 deletions(-)

diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 23f9483..1d296c2 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,12 +1,5 @@
 <script setup lang="ts">
-import {
-  ref,
-  reactive,
-  onMounted,
-  watch,
-  onBeforeUnmount,
-  computed,
-} from 'vue'
+import { 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(
-      $q,
-      '',
-      'ไม่สามารถอ่านไฟล์รูปภาพได้ กรุณาถ่ายรูปใหม่อีกครั้ง'
-    )
+    messageError($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(
-      $q,
-      '',
-      'รูปภาพไม่สมบูรณ์ กรุณาถ่ายรูปใหม่อีกครั้งก่อนลงเวลา'
-    )
+    messageError($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="[
-                          'camera-preview',
-                        ]"
+                        :class="['camera-preview']"
                         :autoplay="false"
                         :playsinline="true"
                         :facingMode="'user'"
@@ -1367,9 +1393,7 @@ watch(
                             height: photoHeight,
                           }"
                           ref="camera"
-                          :class="[
-                            'camera-preview',
-                          ]"
+                          :class="['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% {

From 526567c599fda5dcca31eaa017b6af3b25ed0bd1 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Mon, 11 May 2026 14:22:18 +0700
Subject: [PATCH 24/33] fixed camera error in ios 16.x

---
 .../hrms-checkin-expert/MEMORY.md             |   1 +
 ...issue_ios16_inline_camera_white_preview.md |  11 +
 src/views/HomeView.vue                        | 189 ++++++++++++++----
 3 files changed, 165 insertions(+), 36 deletions(-)
 create mode 100644 .claude/agent-memory/hrms-checkin-expert/issue_ios16_inline_camera_white_preview.md

diff --git a/.claude/agent-memory/hrms-checkin-expert/MEMORY.md b/.claude/agent-memory/hrms-checkin-expert/MEMORY.md
index cc99e8f..bb4f782 100644
--- a/.claude/agent-memory/hrms-checkin-expert/MEMORY.md
+++ b/.claude/agent-memory/hrms-checkin-expert/MEMORY.md
@@ -11,3 +11,4 @@
 - [Front Camera Preview Alignment](issue_front_camera_preview_alignment.md) - Keep popup preview orientation aligned with normalized saved photos
 - [iOS Native Photo Mirroring](issue_ios_native_photo_mirroring.md) - Do not flip iOS native-capture photos during normalization
 - [iOS Native Camera Popup](issue_ios_native_camera_popup_control.md) - Inline-first on iOS; native activates only after inline fails (prior native-first seed was reverted)
+- [iOS 16 Inline White Preview](issue_ios16_inline_camera_white_preview.md) - Safari iOS 16 white preview needs single mount plus explicit video readiness
diff --git a/.claude/agent-memory/hrms-checkin-expert/issue_ios16_inline_camera_white_preview.md b/.claude/agent-memory/hrms-checkin-expert/issue_ios16_inline_camera_white_preview.md
new file mode 100644
index 0000000..791f98e
--- /dev/null
+++ b/.claude/agent-memory/hrms-checkin-expert/issue_ios16_inline_camera_white_preview.md
@@ -0,0 +1,11 @@
+---
+name: ios16-inline-camera-white-preview
+description: Safari iOS 16 inline preview can stay white when multiple simple-vue-camera instances mount and playback readiness is assumed too early
+type: project
+---
+
+In `HomeView.vue`, Safari on iOS 16.x can show a white in-page camera preview when more than one `simple-vue-camera` instance is mounted for responsive layouts and the app treats `camera.start()` as sufficient proof that the preview is rendering.
+
+**Why:** `simple-vue-camera` uses a hard-coded `id="video"` internally and does not explicitly call `video.play()` during `start()`. On mobile/xs, mounting both desktop and mobile camera components at once creates a fragile setup for Safari, where the active preview can remain white even though permission and stream startup succeeded.
+
+**How to apply:** Keep only the active responsive camera instance mounted in `HomeView.vue`, and after `camera.start()` explicitly prepare/check the underlying video element (`playsinline`, `muted`, `play()`, non-zero dimensions, ready state). If the preview still does not become render-ready, remount once and then fall back to native capture.
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 1d296c2..9b76ae3 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,5 +1,13 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted, watch, onBeforeUnmount, computed } from 'vue'
+import {
+  ref,
+  reactive,
+  onMounted,
+  watch,
+  onBeforeUnmount,
+  computed,
+  nextTick,
+} from 'vue'
 import { useQuasar } from 'quasar'
 import { format } from 'date-fns'
 import Camera from 'simple-vue-camera'
@@ -187,6 +195,131 @@ function wait(ms: number) {
   return new Promise((resolve) => setTimeout(resolve, ms))
 }
 
+function getCameraVideoElement() {
+  return camera.value?.video
+}
+
+function prepareInlineCameraVideo(videoElement: HTMLVideoElement) {
+  videoElement.autoplay = true
+  videoElement.muted = true
+  videoElement.setAttribute('autoplay', '')
+  videoElement.setAttribute('muted', '')
+  videoElement.setAttribute('playsinline', '')
+  videoElement.setAttribute('webkit-playsinline', 'true')
+}
+
+function isInlineCameraPreviewReady(videoElement: HTMLVideoElement) {
+  return (
+    Boolean(videoElement.srcObject) &&
+    videoElement.videoWidth > 0 &&
+    videoElement.videoHeight > 0 &&
+    videoElement.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA
+  )
+}
+
+async function waitForCameraInstance() {
+  for (let attempt = 0; attempt < 10; attempt += 1) {
+    await nextTick()
+
+    if (camera.value) {
+      return camera.value
+    }
+
+    await wait(50)
+  }
+
+  return null
+}
+
+async function stopInlineCamera() {
+  camera.value?.stop()
+  cameraIsOn.value = false
+}
+
+async function remountInlineCameraComponent() {
+  await stopInlineCamera()
+  cameraMountKey.value += 1
+  await nextTick()
+  await wait(INLINE_CAMERA_REMOUNT_DELAY_MS)
+}
+
+async function ensureInlineCameraPreviewReady() {
+  const deadline = Date.now() + INLINE_CAMERA_PREVIEW_TIMEOUT_MS
+  let lastPlaybackError: unknown = null
+
+  while (Date.now() < deadline) {
+    const videoElement = getCameraVideoElement()
+
+    if (videoElement) {
+      prepareInlineCameraVideo(videoElement)
+
+      if (isInlineCameraPreviewReady(videoElement)) {
+        return
+      }
+
+      if (videoElement.srcObject) {
+        try {
+          await videoElement.play()
+        } catch (error) {
+          lastPlaybackError = error
+        }
+      }
+    }
+
+    await wait(INLINE_CAMERA_PREVIEW_POLL_MS)
+  }
+
+  if (lastPlaybackError instanceof Error) {
+    throw lastPlaybackError
+  }
+
+  throw new Error('Inline camera preview did not become ready in time')
+}
+
+async function syncActiveCameraDevices() {
+  const devices: any = await camera.value?.devices(['videoinput'])
+  if (!devices) {
+    return
+  }
+
+  availableCameras.value = devices
+
+  const activeId = camera.value?.currentDeviceID()
+  const activeIdx = activeId
+    ? devices.findIndex((device: any) => device.deviceId === activeId)
+    : -1
+  currentCameraIndex.value = activeIdx >= 0 ? activeIdx : 0
+  currentCameraType.value = resolveCameraType(
+    devices[currentCameraIndex.value]?.label || '',
+    'front'
+  )
+}
+
+async function startInlineCamera(recoveryAttempt = 0): Promise<void> {
+  const cameraInstance = await waitForCameraInstance()
+
+  if (!cameraInstance) {
+    throw new Error('Camera component is unavailable')
+  }
+
+  try {
+    currentCameraType.value = 'front'
+    await cameraInstance.start()
+    await ensureInlineCameraPreviewReady()
+    await syncActiveCameraDevices()
+    cameraIsOn.value = true
+  } catch (error) {
+    await stopInlineCamera()
+
+    if (recoveryAttempt < MAX_INLINE_CAMERA_RECOVERY_ATTEMPTS) {
+      await remountInlineCameraComponent()
+      return startInlineCamera(recoveryAttempt + 1)
+    }
+
+    throw error
+  }
+}
+
 async function getDelayedFreshPosition() {
   const firstPosition = await getCurrentPositionAsync({
     enableHighAccuracy: true,
@@ -252,6 +385,7 @@ const cameraIsOn = ref<boolean>(false)
 const img = ref<any>(undefined)
 const photoWidth = ref<number>(350)
 const photoHeight = ref<number>(350)
+const cameraMountKey = ref<number>(0)
 const availableCameras = ref<any[]>([])
 const currentCameraIndex = ref<number>(0)
 const currentCameraType = ref<'front' | 'back' | 'unknown'>('unknown')
@@ -285,6 +419,10 @@ const centeredPreviewImageStyle = Object.freeze({
   objectFit: 'cover',
   objectPosition: 'center center',
 })
+const INLINE_CAMERA_PREVIEW_TIMEOUT_MS = isIOSDevice ? 2500 : 1800
+const INLINE_CAMERA_PREVIEW_POLL_MS = 120
+const INLINE_CAMERA_REMOUNT_DELAY_MS = 120
+const MAX_INLINE_CAMERA_RECOVERY_ATTEMPTS = 1
 
 /** Ref for the hidden file input used as native camera fallback */
 const nativePhotoInput = ref<HTMLInputElement | null>(null)
@@ -413,10 +551,7 @@ async function assignSelectedPhoto(file: File) {
 }
 
 function openNativePhotoCapture() {
-  if (cameraIsOn.value) {
-    camera.value?.stop()
-    cameraIsOn.value = false
-  }
+  void stopInlineCamera()
 
   if (nativePhotoInput.value) {
     nativePhotoInput.value.value = ''
@@ -426,8 +561,7 @@ function openNativePhotoCapture() {
 
 function enableNativePhotoCaptureFallback() {
   preferNativePhotoCapture.value = true
-  camera.value?.stop()
-  cameraIsOn.value = false
+  void stopInlineCamera()
   clearSelectedPhoto()
 }
 
@@ -614,8 +748,7 @@ async function openCamera() {
   }
 
   if (cameraIsOn.value) {
-    camera.value?.stop()
-    cameraIsOn.value = false
+    await stopInlineCamera()
     return
   }
 
@@ -645,26 +778,7 @@ async function openCamera() {
   }
 
   try {
-    currentCameraType.value = 'front'
-
-    // Keep the initial stream aligned with the Camera component's front-camera constraint.
-    await camera.value?.start()
-    const devices: any = await camera.value?.devices(['videoinput'])
-    if (devices) {
-      availableCameras.value = devices
-
-      // Avoid an extra stop/start cycle here; on iOS it can override the initial camera selection.
-      const activeId = camera.value?.currentDeviceID()
-      const activeIdx = activeId
-        ? devices.findIndex((d: any) => d.deviceId === activeId)
-        : -1
-      currentCameraIndex.value = activeIdx >= 0 ? activeIdx : 0
-      currentCameraType.value = resolveCameraType(
-        devices[currentCameraIndex.value]?.label || '',
-        'front'
-      )
-    }
-    cameraIsOn.value = true
+    await startInlineCamera()
   } catch (error) {
     console.error('Error opening camera:', error)
 
@@ -695,6 +809,7 @@ async function changeCamera(targetCameraType?: 'front' | 'back') {
         targetCameraType ??
         (currentCameraType.value === 'back' ? 'back' : 'front')
       await camera.value?.changeCamera(device.deviceId)
+      await ensureInlineCameraPreviewReady()
       currentCameraIndex.value = 0
       currentCameraType.value = resolveCameraType(
         device.label || '',
@@ -711,6 +826,7 @@ async function changeCamera(targetCameraType?: 'front' | 'back') {
     if (matchingCameras.length > 0) {
       const targetDevice = matchingCameras[0]
       await camera.value?.changeCamera(targetDevice.deviceId)
+      await ensureInlineCameraPreviewReady()
       currentCameraIndex.value = devices.indexOf(targetDevice)
       currentCameraType.value = resolveCameraType(
         targetDevice.label || '',
@@ -720,6 +836,7 @@ async function changeCamera(targetCameraType?: 'front' | 'back') {
       const nextIndex = (currentCameraIndex.value + 1) % devices.length
       const nextDevice = devices[nextIndex]
       await camera.value?.changeCamera(nextDevice.deviceId)
+      await ensureInlineCameraPreviewReady()
       currentCameraIndex.value = nextIndex
       currentCameraType.value = resolveCameraType(
         nextDevice.label || '',
@@ -743,6 +860,7 @@ async function switchCamera() {
   const fallbackType = currentCameraType.value === 'back' ? 'front' : 'back'
 
   await camera.value?.changeCamera(targetDevice.deviceId)
+  await ensureInlineCameraPreviewReady()
   currentCameraIndex.value = targetIndex
   currentCameraType.value = resolveCameraType(
     targetDevice.label || '',
@@ -781,7 +899,7 @@ async function capturePhoto() {
     await assignSelectedPhoto(normalizedFile)
 
     //แสดงรูป
-    camera.value?.stop()
+    await stopInlineCamera()
   } catch (error) {
     console.error('Error capturing photo:', error)
 
@@ -803,7 +921,7 @@ async function refreshPhoto() {
       openNativePhotoCapture()
       return
     }
-    await camera.value?.start()
+    await startInlineCamera()
   } catch (error) {
     console.error('Error refreshing photo:', error)
     messageError($q, error, 'ไม่สามารถเปิดกล้องได้ กรุณาลองใหม่อีกครั้ง')
@@ -1038,10 +1156,7 @@ const inQueue = ref<boolean>(false)
 // ฟังก์ชันสำหรับรีเซ็ตรูปและหยุดกล้อง
 function resetCameraAndImage() {
   clearSelectedPhoto()
-  if (cameraIsOn.value && camera.value) {
-    camera.value.stop()
-    cameraIsOn.value = false
-  }
+  void stopInlineCamera()
 }
 
 // เพิ่มฟังก์ชันสำหรับจัดการการปิดแอพในมือถือ
@@ -1234,7 +1349,7 @@ watch(
                     />
                   </div>
                 </div>
-                <div class="col-xs-12 col-sm-4 gt-xs">
+                <div v-if="$q.screen.gt.xs" class="col-xs-12 col-sm-4">
                   <q-card
                     :class="
                       $q.screen.xs ? 'card-container-xs' : 'card-container'
@@ -1257,6 +1372,7 @@ watch(
                     <div class="col-12 row items-center">
                       <!-- แสดงกล้องตอนกดถ่ายภาพ -->
                       <Camera
+                        :key="`desktop-${cameraMountKey}`"
                         :resolution="{ width: photoWidth, height: photoHeight }"
                         ref="camera"
                         :class="['camera-preview']"
@@ -1388,6 +1504,7 @@ watch(
                       <div class="col-12 row items-center">
                         <!-- แสดงกล้องตอนกดถ่ายภาพ -->
                         <Camera
+                          :key="`mobile-${cameraMountKey}`"
                           :resolution="{
                             width: photoWidth,
                             height: photoHeight,

From 7afdc64e8f819d02991eec0c7b07e97fbeb175e7 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 15 May 2026 14:01:31 +0700
Subject: [PATCH 25/33] feat: noti checkin

---
 package.json                    |  1 +
 src/App.vue                     |  9 +++
 src/api/socket.ts               |  7 +++
 src/app.config.ts               |  2 +
 src/stores/socket.ts            | 98 +++++++++++++++++++++++++++++++++
 src/style/quasar-variables.sass | 73 ++++++++++++------------
 6 files changed, 154 insertions(+), 36 deletions(-)
 create mode 100644 src/api/socket.ts
 create mode 100644 src/stores/socket.ts

diff --git a/package.json b/package.json
index c36ed30..503f2f9 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "quasar": "^2.11.1",
     "register-service-worker": "^1.7.2",
     "simple-vue-camera": "^1.1.3",
+    "socket.io-client": "^4.8.3",
     "vite-plugin-pwa": "^0.16.7",
     "vue": "^3.4.15",
     "vue-router": "^4.1.6",
diff --git a/src/App.vue b/src/App.vue
index ea76d33..867210e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,3 +1,12 @@
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import { useSocketStore } from '@/stores/socket'
+
+onMounted(() => {
+  useSocketStore()
+})
+</script>
+
 <template>
   <router-view />
 </template>
diff --git a/src/api/socket.ts b/src/api/socket.ts
new file mode 100644
index 0000000..b018666
--- /dev/null
+++ b/src/api/socket.ts
@@ -0,0 +1,7 @@
+import env from "./index";
+
+const socket = `${env.API_URI}/org-socket`;
+
+export default {
+  socket,
+};
diff --git a/src/app.config.ts b/src/app.config.ts
index c6dbe0c..085d287 100644
--- a/src/app.config.ts
+++ b/src/app.config.ts
@@ -4,6 +4,7 @@
 import leave from '@/api/api.checkin'
 import history from '@/api/api.history'
 import message from '@/api/api.message'
+import socket from '@/api/socket'
 
 const API = {
   /**leave */
@@ -12,6 +13,7 @@ const API = {
   ...history,
   /**message */
   ...message,
+  ...socket,
 }
 
 export default {
diff --git a/src/stores/socket.ts b/src/stores/socket.ts
new file mode 100644
index 0000000..be2ceee
--- /dev/null
+++ b/src/stores/socket.ts
@@ -0,0 +1,98 @@
+import config from '@/app.config'
+import { getToken } from '@/plugins/auth'
+import { defineStore } from 'pinia'
+import { Notify } from 'quasar'
+import { io, Socket } from 'socket.io-client'
+interface sockeBackup {
+  message: string
+  success?: boolean
+}
+
+export const useSocketStore = defineStore('socket', () => {
+  let socket: Socket
+
+  async function init() {
+    socket = io(new URL(config.API.socket).origin, {
+      auth: { token: await getToken() },
+      path: '/api/v1/org-socket',
+    })
+
+    socket.on('socket-notification', (payload) => {
+      let body: sockeBackup = JSON.parse(payload)
+      notifyStatus(body.message, body.success)
+    })
+  }
+
+  function notifyStatus(message: string, success?: boolean) {
+    Notify.create({
+      group: false,
+      type: success === undefined || success ? 'positive' : 'negative',
+      message: `${message}`,
+      position: 'top',
+      classes: 'custom-notification-top', // ใส่ class ที่เราสร้างไว้
+      timeout: success === undefined || success ? 3000 : 0,
+      actions:
+        success === undefined || success
+          ? []
+          : [
+              {
+                icon: 'close',
+                color: 'white',
+                round: true,
+              },
+            ],
+      progress: true,
+    })
+  }
+
+  function fnStyleNotiOrg() {
+    if (document.getElementById('notify-link-style')) return
+    const style = document.createElement('style')
+    style.id = 'notify-link-style'
+    style.textContent = `
+    .notify-link {
+      padding: 4px 8px;
+      border-radius: 4px;
+      text-decoration: none;
+      color: #fff;
+      border: 1px solid #fff;
+      transition: all 0.3s;
+      cursor: pointer;
+      margin:0 0 0 5px;
+    }
+    .notify-link:hover {
+      background-color: #ffffff;
+      color: #21BA45;
+    }
+  `
+    document.head.appendChild(style)
+  }
+  ;(window as any).resetOrgPage = (type: string) => {
+    localStorage.setItem('org_type', type)
+    window.location.reload()
+  }
+  function notifyStatusOrg(type: string, message: string, success?: boolean) {
+    fnStyleNotiOrg()
+    Notify.create({
+      message: `${message} <a href="#" onclick="window.resetOrgPage('${type}')" class="notify-link">${
+        type == 'draft' ? 'ไปยังโครงสร้างแบบร่าง' : 'ไปยังโครงสร้างปัจจุบัน'
+      }</a>`,
+      html: true,
+      group: false,
+      type: success === undefined || success ? 'positive' : 'negative',
+      position: 'top',
+      timeout: 0,
+      actions: [
+        {
+          icon: 'close',
+          color: 'white',
+          round: true,
+        },
+      ],
+    })
+  }
+
+  init()
+
+  return {}
+})
diff --git a/src/style/quasar-variables.sass b/src/style/quasar-variables.sass
index f2c3dc4..e590103 100644
--- a/src/style/quasar-variables.sass
+++ b/src/style/quasar-variables.sass
@@ -69,30 +69,30 @@ div
 $separator-color: #EDEDED !default
 
 .bg-teal-1
-  background: #e0f2f1a6 !important
-  
+    background: #e0f2f1a6 !important
+
 .table_ellipsis
-  max-width: 200px
-  white-space: nowrap
-  overflow: hidden
-  text-overflow: ellipsis
+    max-width: 200px
+    white-space: nowrap
+    overflow: hidden
+    text-overflow: ellipsis
 
 .table_ellipsis:hover
-  word-wrap: break-word
-  overflow: visible
-  white-space: normal
+    word-wrap: break-word
+    overflow: visible
+    white-space: normal
 
 .table_ellipsis2
-  max-width: 25vw
-  white-space: nowrap
-  overflow: hidden
-  text-overflow: ellipsis
+    max-width: 25vw
+    white-space: nowrap
+    overflow: hidden
+    text-overflow: ellipsis
 
 .table_ellipsis2:hover
-  word-wrap: break-word
-  overflow: visible
-  white-space: normal
-  transition: width 2s
+    word-wrap: break-word
+    overflow: visible
+    white-space: normal
+    transition: width 2s
 
 $muti-tab: #87d4cc
 .text-muti-tab
@@ -100,35 +100,33 @@ $muti-tab: #87d4cc
 .bg-muti-tab
     background: $muti-tab !important
 
-    
 /* editor */
 
 .q-editor
     font-size: 1rem
     line-height: 1.5rem
     font-weight: 400
-    
+
 .q-editor h1, .q-menu h1
-  font-size: 1.5rem
-  line-height: 2rem
-  font-weight: 400
-  margin-block-start: 0em
-  margin-block-end: 0em
+    font-size: 1.5rem
+    line-height: 2rem
+    font-weight: 400
+    margin-block-start: 0em
+    margin-block-end: 0em
 
 .q-editor h2,  .q-menu h2
-  font-size: 1.25rem
-  line-height: 1.5rem
-  font-weight: 400
-  margin-block-start: 0em
-  margin-block-end: 0em
-
+    font-size: 1.25rem
+    line-height: 1.5rem
+    font-weight: 400
+    margin-block-start: 0em
+    margin-block-end: 0em
 
 .q-editor h3, .q-menu h3
-  font-size: 1.1rem
-  line-height: 1.5rem
-  font-weight: 400
-  margin-block-start: 0em
-  margin-block-end: 0em
+    font-size: 1.1rem
+    line-height: 1.5rem
+    font-weight: 400
+    margin-block-start: 0em
+    margin-block-end: 0em
 
 .q-editor p, .q-menu p
     margin: 0
@@ -136,4 +134,7 @@ $muti-tab: #87d4cc
 /* q-tree */
 
 .q-tree
-  color: #c8d3db
+    color: #c8d3db
+
+.custom-notification-top
+    margin-top: 180px !important

From ce97f7984a409c70c0c0528ac0176bd664714629 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 20 May 2026 11:28:59 +0700
Subject: [PATCH 26/33] fix:  Watch notification counter on socket

---
 src/stores/socket.ts   | 5 ++++-
 src/views/HomeView.vue | 9 +++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/stores/socket.ts b/src/stores/socket.ts
index be2ceee..28c1e3b 100644
--- a/src/stores/socket.ts
+++ b/src/stores/socket.ts
@@ -1,3 +1,4 @@
+import { ref } from 'vue'
 import config from '@/app.config'
 import { getToken } from '@/plugins/auth'
 import { defineStore } from 'pinia'
@@ -10,6 +11,7 @@ interface sockeBackup {
 
 export const useSocketStore = defineStore('socket', () => {
   let socket: Socket
+  const notificationCounter = ref(0);
 
   async function init() {
     socket = io(new URL(config.API.socket).origin, {
@@ -19,6 +21,7 @@ export const useSocketStore = defineStore('socket', () => {
 
     socket.on('socket-notification', (payload) => {
       let body: sockeBackup = JSON.parse(payload)
+      notificationCounter.value++ 
       notifyStatus(body.message, body.success)
     })
   }
@@ -94,5 +97,5 @@ export const useSocketStore = defineStore('socket', () => {
 
   init()
 
-  return {}
+  return { notificationCounter }
 })
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 9b76ae3..b5ffaa2 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -11,6 +11,7 @@ import {
 import { useQuasar } from 'quasar'
 import { format } from 'date-fns'
 import Camera from 'simple-vue-camera'
+import { storeToRefs } from 'pinia'
 
 import config from '@/app.config'
 import http from '@/plugins/http'
@@ -18,6 +19,7 @@ import { useCounterMixin } from '@/stores/mixin'
 import { usePermissions } from '@/composables/usePermissions'
 import { usePrivacyStore } from '@/stores/privacy'
 import { usePositionKeycloakStore } from '@/stores/positionKeycloak'
+import { useSocketStore } from '@/stores/socket'
 
 import type { FormRef, OptionReason } from '@/interface/response/checkin'
 
@@ -32,6 +34,8 @@ const {
   syncPermissionStates,
   requestCameraPermission,
 } = usePermissions()
+const socketStore = useSocketStore()
+const { notificationCounter } = storeToRefs(socketStore)
 const privacyStore = usePrivacyStore()
 const positionKeycloakStore = usePositionKeycloakStore()
 const MOCK_CHECK_DELAY_MS = 800
@@ -1248,6 +1252,11 @@ watch(
     }
   }
 )
+
+/** Watch notification counter on socket */
+watch(notificationCounter, () => {
+  startChecking()
+})
 </script>
 
 <template>

From 049143a385168f3ff03c00146e2d7131a6c9da8d Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 20 May 2026 17:25:06 +0700
Subject: [PATCH 27/33] fix:  fetchCheckTime fetchCheckStatus

---
 src/components/AscGISMap.vue | 43 ++++++++++++++++++++++++++++--------
 src/views/HomeView.vue       | 26 ++++++++++------------
 2 files changed, 46 insertions(+), 23 deletions(-)

diff --git a/src/components/AscGISMap.vue b/src/components/AscGISMap.vue
index ec1eb0b..bfe0e9c 100644
--- a/src/components/AscGISMap.vue
+++ b/src/components/AscGISMap.vue
@@ -163,8 +163,19 @@ function reattachAndResizeMap(retry = 0) {
       mapView.value.container = activeContainer
     }
 
-    mapView.value.resize()
-    mapView.value.requestRender?.()
+    // เรียก resize() อย่างปลอดภัยด้วยการตรวจสอบว่ามี method นี้หรือไม่
+    try {
+      if (typeof mapView.value.resize === 'function') {
+        mapView.value.resize()
+      }
+    } catch (error) {
+      console.warn('Map resize failed:', error)
+    }
+
+    if (typeof mapView.value.requestRender === 'function') {
+      mapView.value.requestRender?.()
+    }
+
     mapView.value
       .goTo(
         {
@@ -285,7 +296,11 @@ async function initializeMap() {
       geometry: userPoint,
       symbol: userSymbol,
     })
-    mapView.value.graphics.add(userGraphic)
+
+    // เพิ่มการตรวจสอบความปลอดภัยก่อนเข้าถึง graphics
+    if (mapView.value && mapView.value.graphics && !mapView.value.destroyed) {
+      mapView.value.graphics.add(userGraphic)
+    }
     // Get POI place ยิงไปขอที่ server ของกทม.ก่อน
     // await axios
     //   .get(
@@ -381,12 +396,22 @@ async function initializeMap() {
           geometry: poiPoint,
           symbol: poiSymbol,
         })
-        mapView.value.graphics.add(poiGraphic)
-        // อัปเดตการแสดงผลให้แสดงทั้งตำแหน่งของผู้ใช้และ POI
-        mapView.value.goTo({
-          target: [userPoint, poiPoint],
-          zoom: zoomMap.value,
-        })
+
+        // เพิ่มการตรวจสอบความปลอดภัยก่อนเข้าถึง graphics และ goTo
+        if (mapView.value && !mapView.value.destroyed) {
+          if (mapView.value.graphics) {
+            mapView.value.graphics.add(poiGraphic)
+          }
+          // อัปเดตการแสดงผลให้แสดงทั้งตำแหน่งของผู้ใช้และ POI
+          if (typeof mapView.value.goTo === 'function') {
+            mapView.value.goTo({
+              target: [userPoint, poiPoint],
+              zoom: zoomMap.value,
+            }).catch(() => {
+              // Ignore goTo errors
+            })
+          }
+        }
 
         updateLocation(latitude, longitude, poiPlaceName.value)
       })
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index b5ffaa2..3d1a5bb 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -638,19 +638,18 @@ async function fetchCheckStatus() {
       /** inQueue เป็น true  */
       isDisabledCheckTime.value = true
       msgCheckTime.value = 'ระบบกำลังประมวลผล'
-      if (intervalId.value === undefined) {
-        intervalId.value = setInterval(async () => {
-          try {
-            await fetchCheckStatus()
-          } catch (error) {
-            console.error('Error in interval fetchCheckStatus:', error)
-            // หยุด interval ถ้าเกิด error
-            stopChecking()
-          }
-        }, 3000)
-        console.log('startChecking called, intervalId:', intervalId.value)
-      }
-      // hideLoader()
+      // if (intervalId.value === undefined) {
+      //   intervalId.value = setInterval(async () => {
+      //     try {
+      //       await fetchCheckStatus()
+      //     } catch (error) {
+      //       console.error('Error in interval fetchCheckStatus:', error)
+      //       // หยุด interval ถ้าเกิด error
+      //       stopChecking()
+      //     }
+      //   }, 3000)
+      //   console.log('startChecking called, intervalId:', intervalId.value)
+      // }
     } else {
       /** inQueue เป็น false  */
       isDisabledCheckTime.value = false
@@ -1126,7 +1125,6 @@ async function onClickConfirm() {
     if (!statusCheckin.value) {
       statusCheckin.value = true
     }
-    await startChecking()
   } finally {
     hideLoader()
   }

From ef5e6d901725d040985c987e38dc6d21b7b1e04b Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 21 May 2026 09:00:40 +0700
Subject: [PATCH 28/33] fix:  startChecking onClickConfirm Dialog

---
 src/views/HomeView.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 3d1a5bb..8485b25 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1125,6 +1125,7 @@ async function onClickConfirm() {
     if (!statusCheckin.value) {
       statusCheckin.value = true
     }
+    await startChecking()
   } finally {
     hideLoader()
   }

From 5c05df26cf4b93dd0ee32ffbf3cf193738a5f990 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 25 May 2026 15:49:56 +0700
Subject: [PATCH 29/33] fix(camera): btn refreshPhoto

---
 src/views/HomeView.vue | 76 ++++++++++++++++++++++++++----------------
 1 file changed, 48 insertions(+), 28 deletions(-)

diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 8485b25..84a3e77 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1413,13 +1413,13 @@ watch(notificationCounter, () => {
                         </div>
                       </div>
 
-                      <div v-if="cameraIsOn">
+                      <div v-if="cameraIsOn && img == null">
                         <div
                           v-if="$q.screen.gt.xs"
                           class="absolute-bottom-right q-ma-md"
                         >
                           <q-btn
-                            v-if="availableCameras.length > 1 && img == null"
+                            v-if="availableCameras.length > 1"
                             round
                             push
                             icon="flip_camera_ios"
@@ -1429,7 +1429,6 @@ watch(notificationCounter, () => {
                             @click="switchCamera"
                           />
                           <q-btn
-                            v-if="img == null"
                             round
                             push
                             icon="photo_camera"
@@ -1437,8 +1436,41 @@ watch(notificationCounter, () => {
                             color="positive"
                             @click="capturePhoto"
                           />
+                        </div>
+                        <div v-else>
+                          <div
+                            class="absolute-bottom text-subtitle2 text-center q-py-sm"
+                            style="background: #00000021"
+                          >
+                            <q-btn
+                              v-if="availableCameras.length > 1"
+                              round
+                              icon="flip_camera_ios"
+                              size="16px"
+                              style="background: #424242; color: white"
+                              @click="switchCamera"
+                              unelevated
+                              class="q-mr-xs"
+                            />
+                            <q-btn
+                              round
+                              icon="photo_camera"
+                              size="18px"
+                              style="background: #263238; color: white"
+                              @click="capturePhoto"
+                              unelevated
+                            />
+                          </div>
+                        </div>
+                      </div>
+
+                      <!-- Refresh button - shows when photo is captured regardless of camera state -->
+                      <div v-if="img != null && !useNativePhotoCapture">
+                        <div
+                          v-if="$q.screen.gt.xs"
+                          class="absolute-bottom-right q-ma-md"
+                        >
                           <q-btn
-                            v-else
                             round
                             push
                             icon="refresh"
@@ -1453,31 +1485,12 @@ watch(notificationCounter, () => {
                             style="background: #00000021"
                           >
                             <q-btn
-                              v-if="availableCameras.length > 1 && img == null"
-                              round
-                              icon="flip_camera_ios"
-                              size="16px"
-                              style="background: #424242; color: white"
-                              @click="switchCamera"
-                              unelevated
-                              class="q-mr-xs"
-                            />
-                            <q-btn
-                              round
-                              v-if="img == null"
-                              icon="photo_camera"
-                              size="18px"
-                              style="background: #263238; color: white"
-                              @click="capturePhoto"
-                              unelevated
-                            />
-                            <q-btn
-                              v-else
                               round
                               icon="refresh"
                               size="18px"
                               style="background: #263238; color: white"
                               @click="refreshPhoto"
+                              unelevated
                             />
                           </div>
                         </div>
@@ -1549,13 +1562,13 @@ watch(notificationCounter, () => {
                           </div>
                         </div>
 
-                        <div v-if="cameraIsOn">
+                        <div v-if="cameraIsOn && img == null">
                           <div
                             class="absolute-bottom text-subtitle2 text-center q-py-sm"
                             style="background: #00000021"
                           >
                             <q-btn
-                              v-if="availableCameras.length > 1 && img == null"
+                              v-if="availableCameras.length > 1"
                               round
                               icon="flip_camera_ios"
                               size="16px"
@@ -1566,15 +1579,22 @@ watch(notificationCounter, () => {
                             />
                             <q-btn
                               round
-                              v-if="img == null"
                               icon="photo_camera"
                               size="18px"
                               style="background: #263238; color: white"
                               @click="capturePhoto"
                               unelevated
                             />
+                          </div>
+                        </div>
+
+                        <!-- Refresh button - shows when photo is captured regardless of camera state -->
+                        <div v-if="img != null && !useNativePhotoCapture">
+                          <div
+                            class="absolute-bottom text-subtitle2 text-center q-py-sm"
+                            style="background: #00000021"
+                          >
                             <q-btn
-                              v-else
                               round
                               icon="refresh"
                               size="18px"

From 354f528651f65d9b7649f9da160a195bb77094a9 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Fri, 5 Jun 2026 16:45:35 +0700
Subject: [PATCH 30/33] fixed: force redirect open browser chrome / safari

---
 src/App.vue                       | 117 +++++++++++++++++++++++++++++-
 src/main.ts                       |   3 +
 src/utils/forceExternalBrowser.ts |  57 +++++++++++++++
 3 files changed, 176 insertions(+), 1 deletion(-)
 create mode 100644 src/utils/forceExternalBrowser.ts

diff --git a/src/App.vue b/src/App.vue
index 867210e..ed177ca 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,29 @@
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { useSocketStore } from '@/stores/socket'
+import {
+  getExternalBrowserUrl,
+  shouldShowIOSLineFallback,
+} from '@/utils/forceExternalBrowser'
+
+const showExternalBrowserFallback = computed(() => shouldShowIOSLineFallback())
+const fallbackUrl = computed(() => getExternalBrowserUrl())
+const copied = ref(false)
+
+const tryOpenAgain = () => {
+  window.location.href = fallbackUrl.value
+}
+
+const copyLink = async () => {
+  copied.value = false
+
+  if (!navigator.clipboard?.writeText) {
+    return
+  }
+
+  await navigator.clipboard.writeText(fallbackUrl.value)
+  copied.value = true
+}
 
 onMounted(() => {
   useSocketStore()
@@ -9,6 +32,33 @@ onMounted(() => {
 
 <template>
   <router-view />
+
+  <div v-if="showExternalBrowserFallback" class="external-browser-overlay">
+    <div class="external-browser-card">
+      <h2>แนะนำให้เปิดด้วย Safari</h2>
+      <p>
+        LINE Browser อาจทำให้กล้องหรือตำแหน่งทำงานไม่ครบ กรุณาเปิดหน้านี้ใน
+        Safari เพื่อใช้งานระบบลงเวลาได้เสถียรกว่าเดิม
+      </p>
+      <ol>
+        <li>แตะปุ่ม เมนู ใน LINE Browser</li>
+        <li>เลือก เปิดใน Safari</li>
+      </ol>
+
+      <div class="external-browser-actions">
+        <button type="button" class="primary" @click="tryOpenAgain">
+          ลองเปิดอีกครั้ง
+        </button>
+        <button type="button" class="secondary" @click="copyLink">
+          คัดลอกลิงก์
+        </button>
+      </div>
+
+      <p v-if="copied" class="copy-success">
+        คัดลอกลิงก์แล้ว สามารถวางใน Safari ได้ทันที
+      </p>
+    </div>
+  </div>
 </template>
 
 <style>
@@ -32,4 +82,69 @@ nav a {
 nav a.router-link-exact-active {
   color: #42b983;
 }
+
+.external-browser-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  background: rgba(0, 0, 0, 0.45);
+}
+
+.external-browser-card {
+  width: min(520px, 100%);
+  border-radius: 16px;
+  padding: 20px;
+  background: #ffffff;
+  text-align: left;
+  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.18);
+}
+
+.external-browser-card h2 {
+  margin: 0 0 10px;
+  font-size: 24px;
+  color: #0d3b66;
+}
+
+.external-browser-card p {
+  margin: 0 0 12px;
+  line-height: 1.5;
+}
+
+.external-browser-card ol {
+  margin: 0 0 16px;
+  padding-left: 20px;
+}
+
+.external-browser-actions {
+  display: flex;
+  gap: 10px;
+}
+
+.external-browser-actions button {
+  border: 0;
+  border-radius: 10px;
+  padding: 10px 14px;
+  font-size: 16px;
+  cursor: pointer;
+}
+
+.external-browser-actions .primary {
+  background: #1976d2;
+  color: #ffffff;
+}
+
+.external-browser-actions .secondary {
+  background: #edf2f7;
+  color: #1f2937;
+}
+
+.copy-success {
+  margin-top: 12px;
+  color: #0b7a3f;
+  font-weight: 600;
+}
 </style>
diff --git a/src/main.ts b/src/main.ts
index b04278c..04b0dfd 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -12,6 +12,9 @@ import 'quasar/src/css/index.sass'
 import th from 'quasar/lang/th'
 
 import http from '@/plugins/http'
+import { forceOpenInExternalBrowser } from '@/utils/forceExternalBrowser'
+
+forceOpenInExternalBrowser()
 
 const app = createApp(App)
 const pinia = createPinia()
diff --git a/src/utils/forceExternalBrowser.ts b/src/utils/forceExternalBrowser.ts
new file mode 100644
index 0000000..bf65fa3
--- /dev/null
+++ b/src/utils/forceExternalBrowser.ts
@@ -0,0 +1,57 @@
+const EXTERNAL_BROWSER_QUERY_KEY = 'openExternalBrowser'
+
+const isLineBrowser = (userAgent: string) => /Line/i.test(userAgent)
+
+const isAndroid = (userAgent: string) => /Android/i.test(userAgent)
+
+const isIOS = (userAgent: string) => /iPhone|iPad|iPod/i.test(userAgent)
+
+const hasExternalRedirectFlag = () => {
+  const params = new URLSearchParams(window.location.search)
+  return params.get(EXTERNAL_BROWSER_QUERY_KEY) === '1'
+}
+
+const buildIOSUrlWithFlag = () => {
+  const url = new URL(window.location.href)
+  url.searchParams.set(EXTERNAL_BROWSER_QUERY_KEY, '1')
+  return url.toString()
+}
+
+const buildUrlWithoutFlag = () => {
+  const url = new URL(window.location.href)
+  url.searchParams.delete(EXTERNAL_BROWSER_QUERY_KEY)
+  return url.toString()
+}
+
+const buildAndroidIntentUrl = () => {
+  const currentUrl = window.location.href
+  const strippedUrl = currentUrl.replace(/^https?:\/\//i, '')
+  return `intent://${strippedUrl}#Intent;scheme=https;package=com.android.chrome;end`
+}
+
+export const forceOpenInExternalBrowser = () => {
+  const userAgent = navigator.userAgent || ''
+
+  // Prevent redirect loops and only run in LINE browser.
+  if (!isLineBrowser(userAgent) || hasExternalRedirectFlag()) {
+    return
+  }
+
+  if (isAndroid(userAgent)) {
+    window.location.replace(buildAndroidIntentUrl())
+    return
+  }
+
+  if (isIOS(userAgent)) {
+    window.location.replace(buildIOSUrlWithFlag())
+  }
+}
+
+export const shouldShowIOSLineFallback = () => {
+  const userAgent = navigator.userAgent || ''
+  return (
+    isLineBrowser(userAgent) && isIOS(userAgent) && hasExternalRedirectFlag()
+  )
+}
+
+export const getExternalBrowserUrl = () => buildUrlWithoutFlag()

From 5ba2a6dce5c49dec2b51c9cfde85549dcc9782e0 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 8 Jun 2026 17:11:09 +0700
Subject: [PATCH 31/33] fix: pagination

---
 src/components/TableHistory.vue | 58 ++++++++++++---------------------
 src/interface/index/Main.ts     |  2 +-
 src/views/HistoryView.vue       |  9 ++---
 3 files changed, 27 insertions(+), 42 deletions(-)

diff --git a/src/components/TableHistory.vue b/src/components/TableHistory.vue
index c364c30..e081a3c 100644
--- a/src/components/TableHistory.vue
+++ b/src/components/TableHistory.vue
@@ -13,20 +13,15 @@ import SkeletonTable from '@/components/SkeletonTable.vue' // skeleton table
 const { date2Thai } = useCounterMixin()
 const stores = useCheckIn()
 
+const page = defineModel<number>('page', { required: true })
+const pageSize = defineModel<number>('pageSize', { required: true })
+
 /** props ข้อมูลจาก Components Page HistoryView */
 const props = defineProps({
   paging: {
     type: Boolean,
     default: false,
   },
-  pageSize: {
-    type: Number,
-    default: 10,
-  },
-  page: {
-    type: Number,
-    default: 1,
-  },
   maxPage: {
     type: Number,
     default: 1,
@@ -194,31 +189,20 @@ const visibleColumns = ref<string[]>([
   'checkOutLocation',
   'checkOutStatus',
 ])
-
-const currentPage = ref<number>(1) //หน้าปัจจุบัน
-// Pagination - initial pagination
-const initialPagination = ref<Pagination>({
-  sortBy: null,
-  descending: false,
-  page: 1,
-  rowsPerPage: props.pageSize, // set ตาม page หลักส่งมา
+const pagination = ref({
+  page: page.value,
+  rowsPerPage: pageSize.value,
 })
 
 // Pagination - update rowsPerPage
 async function updatePagination(newPagination: Pagination) {
-  initialPagination.value = newPagination
-  currentPage.value = 1 // set current page เป็น 1 เสมอเมื่อเปลี่ยน per row
+  pageSize.value = newPagination.rowsPerPage
 }
 
 async function filterFn() {
-  // ส่งอีเวนต์ 'update:change-page' เมื่อหน้าเปลี่ยนแปลง
-  emit(
-    'update:change-page',
-    1,
-    initialPagination.value.rowsPerPage,
-    keyword.value
-  )
+  emit('update:change-page', 1, pageSize.value, keyword.value)
 }
+
 const modalPopup = ref<boolean>(false) //  popup แก้ไขลงเวลา
 const titlePopup = ref<string>('') //  หัวขข้อ popup แก้ไขลงเวลา
 const dataRow = ref<DataCheckIn>() // ข้อมูลการลงเวลา
@@ -276,17 +260,15 @@ function onClickOpenPopupRejrct(data: DataCheckIn) {
   }
 }
 
-/** watch currentPage และ rowsPerPage*/
+function onUpdatePage(val: number) {
+  emit('update:change-page', val, pageSize.value, keyword.value)
+}
+
+/** watch pageSize*/
 watch(
-  [() => currentPage.value, () => initialPagination.value.rowsPerPage],
+  () => pageSize.value,
   () => {
-    // ส่งอีเวนต์ 'update:change-page' เมื่อหน้าเปลี่ยนแปลง
-    emit(
-      'update:change-page',
-      currentPage.value,
-      initialPagination.value.rowsPerPage,
-      keyword.value
-    )
+    emit('update:change-page', 1, pageSize.value, keyword.value)
   }
 )
 </script>
@@ -340,10 +322,10 @@ watch(
     v-model:selected="selected"
     :virtual-scroll-sticky-size-start="48"
     :style="$q.screen.gt.xs ? 'max-height: 64vh' : ''"
-    :rows-per-page-options="[10, 25, 50, 100]"
+    :rows-per-page-options="[1, 10, 25, 50, 100]"
     :grid="$q.screen.gt.xs ? false : true"
-    :pagination="initialPagination"
     @update:pagination="updatePagination"
+    v-model:pagination="pagination"
   >
     <template v-slot:header="props">
       <q-tr :props="props">
@@ -476,10 +458,11 @@ watch(
         </q-card>
       </div>
     </template>
+
     <template v-slot:pagination>
       ทั้งหมด {{ props.total }} รายการ
       <q-pagination
-        v-model="currentPage"
+        v-model="page"
         active-color="primary"
         color="dark"
         :max-pages="5"
@@ -487,6 +470,7 @@ watch(
         boundary-links
         direction-links
         :max="Number(props.maxPage)"
+        @update:model-value="onUpdatePage"
       ></q-pagination>
     </template>
   </q-table>
diff --git a/src/interface/index/Main.ts b/src/interface/index/Main.ts
index 5d82bd2..72b2ba1 100644
--- a/src/interface/index/Main.ts
+++ b/src/interface/index/Main.ts
@@ -29,7 +29,7 @@ interface Pagination {
   sortBy: string | null
   descending: boolean
   page: number
-  rowsPerPage: number | undefined
+  rowsPerPage: number
 }
 interface DataCheckIn {
   checkInDate: string
diff --git a/src/views/HistoryView.vue b/src/views/HistoryView.vue
index 089d697..8f5a2bd 100644
--- a/src/views/HistoryView.vue
+++ b/src/views/HistoryView.vue
@@ -115,6 +115,7 @@ async function fetchlistTime() {
 async function updateYear(y: number, m: number) {
   stores.tab === 'history' ? (year.value = y) : (year2.value = y)
   month.value = m
+  page.value = 1 // รีเซ็ตหน้าเป็นหน้าแรกเมื่อปีหรือเดือนเปลี่ยนแปลง
   await functionFetch() // เรียกใช้งานฟังก์ชัน functionFetch เพื่อดึงข้อมูลใหม่
 }
 
@@ -177,9 +178,9 @@ watch(
               />
               <TableHistory
                 :fetch-data="functionFetch"
-                :page-size="pageSize"
+                v-model:page-size="pageSize"
                 :total="total"
-                :page="page"
+                v-model:page="page"
                 :paging="true"
                 @update:change-page="changePage"
                 :max-page="maxPage"
@@ -196,9 +197,9 @@ watch(
               />
               <TableHistory
                 :fetch-data="functionFetch"
-                :page-size="pageSize"
+                v-model:page-size="pageSize"
                 :total="total"
-                :page="page"
+                v-model:page="page"
                 :paging="true"
                 @update:change-page="changePage"
                 :max-page="maxPage"

From 659e36966378cb77128ce6200627b920787d6814 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 16 Jul 2026 11:30:46 +0700
Subject: [PATCH 32/33] refactor: privacyContent

---
 src/components/PopupPrivacy.vue | 98 +++++++++------------------------
 src/views/HomeView.vue          |  9 ++-
 2 files changed, 32 insertions(+), 75 deletions(-)

diff --git a/src/components/PopupPrivacy.vue b/src/components/PopupPrivacy.vue
index 1bd816b..739d65f 100644
--- a/src/components/PopupPrivacy.vue
+++ b/src/components/PopupPrivacy.vue
@@ -16,41 +16,26 @@ const modal = defineModel<boolean>('modal', {
 
 // Privacy content data
 const privacyContent = {
-  title: 'การคุ้มครองข้อมูลส่วนบุคคล',
+  title: 'ประกาศความเป็นส่วนตัว',
   mainText:
-    'ระบบนี้มีการเก็บ และใช้ภาพถ่ายของท่าน เพื่อยืนยันตัวตนในการลงเวลาปฏิบัติราชการ ข้อมูลจะถูกใช้เฉพาะตามวัตถุประสงค์ของระบบ และจัดเก็บอย่างปลอดภัยตามกฎหมายคุ้มครองข้อมูลส่วนบุคคล (PDPA)',
+    'ประกาศความเป็นส่วนตัวสำหรับการลงเวลาปฏิบัติราชการผ่านระบบอิเล็กทรอนิกส์ในระบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร (BMA – HRMS)',
   warningText: '* หากท่านไม่กดยอมรับ อาจทำให้ไม่สามารถใช้งานระบบได้',
   detailIntro:
-    'ข้าพเจ้าตกลงให้กรุงเทพมหานครเก็บ ใช้ และประมวลผลข้อมูลส่วนบุคคลประเภทภาพถ่ายของข้าพเจ้า ซึ่งได้มาจากการใช้งานระบบลงเวลาปฏิบัติราชการอิเล็กทรอนิกส์ ของระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร (BMA - HRMS) ทั้งนี้ เพื่อวัตถุประสงค์ดังต่อไปนี้',
-  purposes: {
-    title: 'วัตถุประสงค์การใช้ข้อมูล',
-    items: [
-      'เพื่อยืนยันตัวตนของผู้ปฏิบัติงานในการบันทึกเวลาเข้า-ออกการปฏิบัติราชการ',
-      'เพื่อใช้เป็นหลักฐานประกอบการบริหารงานด้านทรัพยากรบุคคล การจ่ายค่าตอบแทน และการกำกับ ดูแลการปฏิบัติราชการ',
-      'เพื่อรักษาความถูกต้อง โปร่งใส และป้องกันการทุจริตในการบันทึกเวลาการปฏิบัติงาน',
-    ],
-  },
-  understanding: {
-    items: [
-      'การเก็บ ใช้ และประมวลผลข้อมูลส่วนบุคคลดังกล่าว จะดำเนินการ เท่าที่จำเป็นตามวัตถุประสงค์ที่ระบุไว้เท่านั้น',
-      'หน่วยงานจะจัดให้มีมาตรการรักษาความมั่นคงปลอดภัยของข้อมูลส่วนบุคคล ตามที่กฎหมายกำหนด',
-      'ข้อมูลส่วนบุคคลของข้าพเจ้าจะถูกเก็บรักษา ตามระยะเวลาที่จำเป็น ต่อการปฏิบัติงานหรือเป็นไปตามที่กฎหมายกำหนด',
-    ],
-  },
-  rights: {
-    title:
-      'ข้าพเจ้าทราบถึง สิทธิของเจ้าของข้อมูลส่วนบุคคล ตามพระราชบัญญัติคุ้มครองข้อมูลส่วนบุคคล พ.ศ. ๒๕๖๒ ได้แก่',
-    items: [
-      'สิทธิขอเข้าถึงและขอรับสำเนาข้อมูล',
-      'สิทธิขอแก้ไขข้อมูลให้ถูกต้อง',
-      'สิทธิขอถอนความยินยอม (ทั้งนี้ การถอนความยินยอมอาจส่งผลต่อการใช้งานระบบลงเวลาการปฏิบัติราชการ)',
-      'สิทธิร้องเรียนต่อคณะกรรมการคุ้มครองข้อมูลส่วนบุคคล',
-    ],
-  },
+    'กรุงเทพมหานครเก็บรวบรวมและใช้ข้อมูลส่วนบุคคลของท่าน ได้แก่ ข้อมูลวันและเวลาลงเวลาปฏิบัติราชการ พิกัดสถานที่ ณ ขณะลงเวลา ภาพถ่าย ณ ขณะลงเวลา ข้อมูลหน่วยงานหรือสถานที่ปฏิบัติงาน และข้อมูลทางเทคนิคที่จำเป็นต่อการใช้งานระบบ เพื่อวัตถุประสงค์ในการยืนยันการมาปฏิบัติราชการ ป้องกันการลงเวลาแทนกัน ตรวจสอบความถูกต้องของข้อมูล บริหารวันและเวลาปฏิบัติราชการ การลา การประเมินผลการปฏิบัติราชการ การพิจารณาเลื่อนเงินเดือน ตลอดจนการบริหารทรัพยากรบุคคลตามกฎหมาย กฎ ระเบียบ และหลักเกณฑ์ที่เกี่ยวข้อง',
+
+  paragraphs: [
+    'การเก็บรวบรวมและใช้ข้อมูลดังกล่าวเป็นการดำเนินการโดยอาศัยฐานการปฏิบัติหน้าที่ในการดำเนินภารกิจเพื่อประโยชน์สาธารณะหรือการใช้อำนาจรัฐตามมาตรา 24 (4) และฐานการปฏิบัติตามกฎหมายของ ผู้ควบคุมข้อมูลส่วนบุคคลตามมาตรา 24 (6) แห่งพระราชบัญญัติคุ้มครองข้อมูลส่วนบุคคล พ.ศ. 2562 โดยมิได้อาศัยความยินยอมของเจ้าของข้อมูลส่วนบุคคล',
+    'ระบบจะเข้าถึงข้อมูลพิกัดและกล้องถ่ายภาพเฉพาะในขณะที่ท่านดำเนินการลงเวลาเข้าและออกจากการปฏิบัติราชการเท่านั้น โดยไม่มีการติดตามหรือบันทึกพิกัดของท่านอย่างต่อเนื่องภายหลังจากการลงเวลาเสร็จสิ้น',
+    'กรุงเทพมหานครจะเก็บรักษาข้อมูลภาพถ่าย พิกัด ณ ขณะลงเวลา และข้อมูลรายละเอียดการลงเวลาไว้ตามรอบการประเมินผลการปฏิบัติราชการเป็นระยะเวลาไม่เกิน 6 เดือนนับแต่วันที่เก็บรวบรวม หรือจนกว่าการตรวจสอบข้อมูลในรอบการประเมินนั้นจะแล้วเสร็จ แล้วแต่ระยะเวลาใดจะยาวกว่า เมื่อครบกำหนด กรุงเทพมหานครจะลบ ทำลาย หรือทำให้ข้อมูลดังกล่าวไม่สามารถระบุตัวบุคคลได้ตามวิธีการและมาตรการรักษาความมั่นคงปลอดภัยที่กำหนด',
+    'กรณีข้อมูลดังกล่าวเกี่ยวข้องกับการร้องเรียน การโต้แย้ง การตรวจสอบ การดำเนินการทางวินัยการอุทธรณ์ การดำเนินคดี หรือการใช้สิทธิเรียกร้องตามกฎหมาย กรุงเทพมหานครอาจเก็บรักษาข้อมูลไว้เกินกว่า 6 เดือนได้เท่าที่จำเป็น จนกว่ากระบวนการดังกล่าวจะถึงที่สุดหรือพ้นระยะเวลาที่กฎหมายกำหนด',
+    'ทั้งนี้ ข้อมูลสรุปเกี่ยวกับวันเวลาปฏิบัติราชการ การลา การมาสาย การขาดราชการ ผลการประเมินผลการปฏิบัติราชการ และผลการพิจารณาเลื่อนเงินเดือน ซึ่งเป็นส่วนหนึ่งของทะเบียนประวัติหรือเอกสารด้านการบริหารทรัพยากรบุคคล อาจได้รับการเก็บรักษาตามระยะเวลาที่กฎหมาย ระเบียบ หลักเกณฑ์งานบุคคล และระเบียบงานสารบรรณกำหนด ซึ่งอาจมีระยะเวลาแตกต่างจากข้อมูลภาพถ่ายและพิกัดที่ใช้ประกอบการลงเวลา',
+    'กรุงเทพมหานครจะจำกัดการเข้าถึงข้อมูลเฉพาะเจ้าหน้าที่หรือผู้ปฏิบัติงานที่มีหน้าที่เกี่ยวข้อง และจะไม่นำข้อมูลไปใช้หรือเปิดเผยเพื่อวัตถุประสงค์อื่นที่ไม่สอดคล้องกับวัตถุประสงค์ที่ได้แจ้งไว้ เว้นแต่เป็นกรณีที่กฎหมายกำหนดหรืออนุญาตให้ดำเนินการได้',
+    'ท่านมีสิทธิขอเข้าถึง ขอรับสำเนา ขอแก้ไข ขอคัดค้าน ขอระงับการใช้ หรือขอให้ลบข้อมูลส่วนบุคคลของท่านได้ตามหลักเกณฑ์และเงื่อนไขที่พระราชบัญญัติคุ้มครองข้อมูลส่วนบุคคล พ.ศ. 2562 กำหนด โดยการใช้สิทธิดังกล่าวไม่กระทบต่อหน้าที่ในการลงเวลาปฏิบัติราชการและการปฏิบัติตามกฎหมาย กฎ ระเบียบ และหลักเกณฑ์ของกรุงเทพมหานคร',
+  ],
   consentText:
-    'ข้าพเจ้าได้อ่านและเข้าใจรายละเอียดทั้งหมดแล้ว และยินยอมให้เก็บ ใช้ และประมวลผลข้อมูลส่วนบุคคล ประเภทภาพถ่ายของข้าพเจ้า ตามที่ระบุไว้ข้างต้นโดยสมัครใจ',
+    'ข้าพเจ้าได้รับทราบประกาศความเป็นส่วนตัวเกี่ยวกับการลงเวลาปฏิบัติราชการผ่านระบบอิเล็กทรอนิกส์แล้ว',
   buttons: {
-    accept: 'ยอมรับ',
+    accept: 'รับทราบและดำเนินการต่อ',
     decline: 'ไม่ยอมรับ',
   },
 }
@@ -97,7 +82,8 @@ const toggleDetails = () => {
 
 const checkIfScrollable = () => {
   nextTick(() => {
-    const container = (scrollContainer.value as any)?.$el || scrollContainer.value
+    const container =
+      (scrollContainer.value as any)?.$el || scrollContainer.value
     if (container) {
       const { scrollHeight, clientHeight } = container
 
@@ -167,50 +153,18 @@ const checkIfScrollable = () => {
             {{ privacyContent.detailIntro }}
           </p>
 
-          <!-- วัตถุประสงค์ -->
+          <!-- เนื้อหาประกาศความเป็นส่วนตัว -->
           <div class="q-mb-md">
-            <ol class="q-pl-lg list-style">
-              <li
-                v-for="(item, index) in privacyContent.purposes.items"
-                :key="`p-${index}`"
-                class="q-mb-xs"
-              >
-                {{ item }}
-              </li>
-            </ol>
-          </div>
-
-          <!-- ข้าพเจ้าทราบและเข้าใจว่า -->
-          <div class="q-mx-sm">
-            ข้าพเจ้าทราบและเข้าใจว่า
-            <ul class="q-mt-sm">
-              <li
-                v-for="(item, index) in privacyContent.understanding.items"
-                :key="`u-${index}`"
-                class="q-mb-xs"
-              >
-                {{ item }}
-              </li>
-            </ul>
-          </div>
-
-          <!-- สิทธิ์ของเจ้าของข้อมูล -->
-          <div>
-            <p>
-              {{ privacyContent.rights.title }}
+            <p
+              v-for="(paragraph, index) in privacyContent.paragraphs"
+              :key="`p-${index}`"
+              class="q-mb-sm"
+            >
+              {{ paragraph }}
             </p>
-            <ul>
-              <li
-                v-for="(item, index) in privacyContent.rights.items"
-                :key="`r-${index}`"
-                class="q-mb-xs"
-              >
-                {{ item }}
-              </li>
-            </ul>
-
-            <p class="consent-text q-mt-lg">{{ privacyContent.consentText }}</p>
           </div>
+
+          <p class="consent-text q-mt-lg">{{ privacyContent.consentText }}</p>
         </div>
       </q-card-section>
 
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 84a3e77..e114761 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1298,7 +1298,10 @@ watch(notificationCounter, () => {
 
           <div class="col-12 text-grey-9">
             <div class="col-12 row justify-center">
-              <div class="col-12 row q-pt-md justify-center gt-xs">
+              <div
+                v-if="$q.screen.gt.xs"
+                class="col-12 row q-pt-md justify-center"
+              >
                 <div
                   class="col-xs-12 col-sm-10 text-h6 text-center text-weight-bold"
                 >
@@ -1348,7 +1351,7 @@ watch(notificationCounter, () => {
                     {{ crossDayCheckoutWarning }}
                   </q-banner>
                 </div>
-                <div class="col-xs-12 col-sm-8 gt-xs">
+                <div v-if="$q.screen.gt.xs" class="col-xs-12 col-sm-8">
                   <div class="col-12">
                     <MapCheck
                       ref="mapRefDesktop"
@@ -1853,7 +1856,7 @@ watch(notificationCounter, () => {
   </q-page>
 
   <!--  top page sticky  หน้ามือถือ-->
-  <q-page-sticky expand position="top" v-if="$q.screen.xs">
+  <q-page-sticky expand position="top" v-show="$q.screen.xs">
     <div
       class="row q-col-gutter-sm col bg-white col-12 q-pa-md"
       style="height: 100px"

From ae846c9bb8b7b179a0f8945432adb51727e343ac Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 16 Jul 2026 14:07:07 +0700
Subject: [PATCH 33/33] refactor: comment fetchKeycloakPosition existingData

---
 src/views/MainView.vue | 41 +++++++++++++++++++++--------------------
 1 file changed, 21 insertions(+), 20 deletions(-)

diff --git a/src/views/MainView.vue b/src/views/MainView.vue
index d83192e..f278e96 100644
--- a/src/views/MainView.vue
+++ b/src/views/MainView.vue
@@ -178,31 +178,32 @@ const landingPageUrl = ref<string>(configParam.landingPageUrl)
 /** ฟังก์ชันเรียกข้อมูลผู้ใช่งาน*/
 async function fetchKeycloakPosition() {
   // เช็คว่ามีข้อมูลใน store อยู่แล้วหรือไม่ (จาก localStorage)
-  const existingData = positionKeycloakStore.dataPositionKeycloak
+  // จะช่วยลดจำนวนครั้งในการเรียก API และปรับปรุงประสิทธิภาพของแอปพลิเคชัน
+  // const existingData = positionKeycloakStore.dataPositionKeycloak
 
-  if (existingData) {
-    // มีข้อมูลอยู่แล้ว ใช้ข้อมูลเดิม
+  // if (existingData) {
+  //   // มีข้อมูลอยู่แล้ว ใช้ข้อมูลเดิม
 
-    // เช็คว่ามีข้อมูลสังกัด (organization) หรือไม่
-    const hasOrganization =
-      existingData.organization &&
-      (existingData.organization.root ||
-        existingData.organization.child1 ||
-        existingData.organization.child2 ||
-        existingData.organization.child3 ||
-        existingData.organization.child4)
+  //   // เช็คว่ามีข้อมูลสังกัด (organization) หรือไม่
+  //   const hasOrganization =
+  //     existingData.organization &&
+  //     (existingData.organization.root ||
+  //       existingData.organization.child1 ||
+  //       existingData.organization.child2 ||
+  //       existingData.organization.child3 ||
+  //       existingData.organization.child4)
 
-    if (!hasOrganization) {
-      // ไม่มีข้อมูลสังกัด redirect ไปหน้า NoPosition
-      router.replace('/no-position')
-      return
-    }
+  //   if (!hasOrganization) {
+  //     // ไม่มีข้อมูลสังกัด redirect ไปหน้า NoPosition
+  //     router.replace('/no-position')
+  //     return
+  //   }
 
-    privacyStore.modalPrivacy = !existingData.privacyCheckin
-    privacyStore.setAccepted(existingData.privacyCheckin)
+  //   privacyStore.modalPrivacy = !existingData.privacyCheckin
+  //   privacyStore.setAccepted(existingData.privacyCheckin)
 
-    return
-  }
+  //   return
+  // }
 
   // ไม่มีข้อมูล ให้ fetch จาก API
   await http