diff --git a/.claude/agent-memory/hrms-checkin-expert/MEMORY.md b/.claude/agent-memory/hrms-checkin-expert/MEMORY.md
deleted file mode 100644
index bb4f782..0000000
--- a/.claude/agent-memory/hrms-checkin-expert/MEMORY.md
+++ /dev/null
@@ -1,14 +0,0 @@
-# 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
-- [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)
-- [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/feature_no_position_page.md b/.claude/agent-memory/hrms-checkin-expert/feature_no_position_page.md
deleted file mode 100644
index c72acc5..0000000
--- a/.claude/agent-memory/hrms-checkin-expert/feature_no_position_page.md
+++ /dev/null
@@ -1,68 +0,0 @@
----
-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/.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
deleted file mode 100644
index f78b23d..0000000
--- a/.claude/agent-memory/hrms-checkin-expert/issue_front_camera_preview_alignment.md
+++ /dev/null
@@ -1,11 +0,0 @@
----
-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_ios16_inline_camera_white_preview.md b/.claude/agent-memory/hrms-checkin-expert/issue_ios16_inline_camera_white_preview.md
deleted file mode 100644
index 791f98e..0000000
--- a/.claude/agent-memory/hrms-checkin-expert/issue_ios16_inline_camera_white_preview.md
+++ /dev/null
@@ -1,11 +0,0 @@
----
-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/.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
deleted file mode 100644
index 22792d0..0000000
--- a/.claude/agent-memory/hrms-checkin-expert/issue_ios_native_camera_popup_control.md
+++ /dev/null
@@ -1,11 +0,0 @@
----
-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
deleted file mode 100644
index 77f33ef..0000000
--- a/.claude/agent-memory/hrms-checkin-expert/issue_ios_native_photo_mirroring.md
+++ /dev/null
@@ -1,11 +0,0 @@
----
-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/.claude/agent-memory/hrms-checkin-expert/issue_position_orientation_change.md b/.claude/agent-memory/hrms-checkin-expert/issue_position_orientation_change.md
deleted file mode 100644
index 7abffd3..0000000
--- a/.claude/agent-memory/hrms-checkin-expert/issue_position_orientation_change.md
+++ /dev/null
@@ -1,48 +0,0 @@
----
-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/.claude/agent-memory/hrms-checkin-expert/project_active_camera_scope.md b/.claude/agent-memory/hrms-checkin-expert/project_active_camera_scope.md
deleted file mode 100644
index a10c142..0000000
--- a/.claude/agent-memory/hrms-checkin-expert/project_active_camera_scope.md
+++ /dev/null
@@ -1,11 +0,0 @@
----
-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`.
diff --git a/docker/entrypoint.sh b/docker/entrypoint.sh
index aacd544..17560f4 100644
--- a/docker/entrypoint.sh
+++ b/docker/entrypoint.sh
@@ -12,6 +12,8 @@ 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/package.json b/package.json
index 503f2f9..c36ed30 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,6 @@
     "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 ed177ca..ea76d33 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,64 +1,5 @@
-<script setup lang="ts">
-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()
-})
-</script>
-
 <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>
@@ -82,69 +23,4 @@ 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/api/socket.ts b/src/api/socket.ts
deleted file mode 100644
index b018666..0000000
--- a/src/api/socket.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-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 085d287..c6dbe0c 100644
--- a/src/app.config.ts
+++ b/src/app.config.ts
@@ -4,7 +4,6 @@
 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 */
@@ -13,7 +12,6 @@ const API = {
   ...history,
   /**message */
   ...message,
-  ...socket,
 }
 
 export default {
diff --git a/src/assets/markers/marker-blue.svg b/src/assets/markers/marker-blue.svg
deleted file mode 100644
index e617e4c..0000000
--- a/src/assets/markers/marker-blue.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<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
deleted file mode 100644
index 39353ad..0000000
--- a/src/assets/markers/marker-red.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<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 bfe0e9c..828f81a 100644
--- a/src/components/AscGISMap.vue
+++ b/src/components/AscGISMap.vue
@@ -1,44 +1,22 @@
 <script setup lang="ts">
-import {
-  computed,
-  ref,
-  shallowRef,
-  onBeforeUnmount,
-  onMounted,
-  watch,
-  nextTick,
-} from 'vue'
+import { ref, shallowRef, onBeforeUnmount } from 'vue'
 import { loadModules } from 'esri-loader'
 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
 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)
@@ -50,391 +28,186 @@ function updateLocation(latitude: number, longitude: number, namePOI: string) {
   emit('update:location', latitude, longitude, namePOI)
 }
 
-const poiPlaceName = ref<string>(props.initialPOI || '') // ชื่อพื้นที่ใกล้เคียง - use initialPOI if provided
+const poiPlaceName = ref<string>('') // ชื่อพื้นที่ใกล้เคียง
 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()
-  .toString(36)
-  .substring(2, 9)}`
 
 // ArcGIS API key from environment variable
 const apiKey = ref<string>(
-  'YLATgWuywoeRLHn6KImj5rg7UaP8bJoR9jiTldoCVBHlqFIebwMSA5wIXEmcYhwXwMHkmNISEYtUz3x0oiGIIx0bIXXnUwi0OzupoOEtDrQIsRPVtor7gaPpXEmH8TrNaMT3snf6zO_yujHLGzborg-L9aeAjTJn4ndL6f8qFmRzYcX93E2vyA-7XCufLYTRsdTE5Aq-9hnx1q9PmYVMqhAZpL7dWqn3JgO33fRXetk.'
+  import.meta.env.VITE_ARCGIS_API_KEY ||
+    'YLATgWuywoeRLHn6KImj5rg7UaP8bJoR9jiTldoCVBHlqFIebwMSA5wIXEmcYhwXwMHkmNISEYtUz3x0oiGIIx0bIXXnUwi0OzupoOEtDrQIsRPVtor7gaPpXEmH8TrNaMT3snf6zO_yujHLGzborg-L9aeAjTJn4ndL6f8qFmRzYcX93E2vyA-7XCufLYTRsdTE5Aq-9hnx1q9PmYVMqhAZpL7dWqn3JgO33fRXetk.'
 )
 const zoomMap = ref<number>(18)
 const textTooltip = ref<string>(
   'พื้นที่ใกล้เคียงคือ สถานที่สำคัญรอบตัวคุณ (ไม่ใช่ตำแหน่งปัจจุบัน)'
 )
-let attachRetryTimer: number | undefined
-let mapInitVersion = 0
-let isRecoveryReinitializing = false
-
-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 (container && container.clientWidth > 0 && container.clientHeight > 0) {
-      return container
-    }
-
-    await new Promise((resolve) => setTimeout(resolve, delayMs))
-  }
-
-  return null
-}
-
-function clearAttachRetryTimer() {
-  if (attachRetryTimer) {
-    clearTimeout(attachRetryTimer)
-    attachRetryTimer = undefined
-  }
-}
-
-async function recoverMapByReinitialize() {
-  if (isRecoveryReinitializing) {
-    return
-  }
-
-  isRecoveryReinitializing = true
-
-  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()
-  } finally {
-    isRecoveryReinitializing = false
-  }
-}
-
-function reattachAndResizeMap(retry = 0) {
-  if (!mapView.value || mapView.value.destroyed) {
-    return
-  }
-
-  const activeContainer = getActiveMapContainer()
-
-  if (
-    !activeContainer ||
-    activeContainer.clientWidth === 0 ||
-    activeContainer.clientHeight === 0
-  ) {
-    if (retry < 15) {
-      clearAttachRetryTimer()
-      attachRetryTimer = window.setTimeout(() => {
-        reattachAndResizeMap(retry + 1)
-      }, 140)
-    } else if (!isRecoveryReinitializing) {
-      void recoverMapByReinitialize()
-    }
-    return
-  }
-
-  clearAttachRetryTimer()
-
-  nextTick(() => {
-    if (!mapView.value || mapView.value.destroyed) {
-      return
-    }
-
-    if (mapView.value.container !== activeContainer) {
-      mapView.value.container = null
-      mapView.value.container = activeContainer
-    }
-
-    // เรียก 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(
-        {
-          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)) {
-    return
-  }
-
-  const initVersion = ++mapInitVersion
-
-  isInitializing.value = true
-
   try {
     // Load modules of ArcGIS
-    const [esriConfig, Map, MapView, Point, Graphic, TileLayer] =
-      await loadModules([
-        'esri/config',
-        'esri/Map',
-        'esri/views/MapView',
-        'esri/geometry/Point',
-        'esri/Graphic',
-        // 'esri/layers/TileLayer',
-      ])
-    // Set apiKey
-    // esriConfig.apiKey =
-    //   'AAPK4f700a4324d04e9f8a1a134e0771ac45FXWawdCl-OotFfr52gz9XKxTDJTpDzw_YYcwbmKDDyAJswf14FoPyw0qBkN64DvP'
+    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'
 
-    // 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) {
-      return
-    }
+      navigator.geolocation.getCurrentPosition(async (position) => {
+        const { latitude, longitude } = position.coords
 
-    const position = await new Promise<GeolocationPosition>(
-      (resolve, reject) => {
-        navigator.geolocation.getCurrentPosition(resolve, reject, {
-          enableHighAccuracy: true,
-          timeout: 10000,
-        })
-      }
-    )
+        mapView.value = new MapView({
+          container: 'mapViewDisplay',
+          map: map,
+          center: {
+            latitude: latitude,
+            longitude: longitude,
+          }, // Set the initial map center current position
 
-    if (initVersion !== mapInitVersion) {
-      return
-    }
-
-    const { latitude, longitude } = position.coords
-
-    const mapContainer = await waitForActiveMapContainer()
-
-    if (!mapContainer || initVersion !== mapInitVersion) {
-      isMapInitialized.value = false
-      return
-    }
-
-    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()
-
-    if (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: markerRedUrl,
-      width: '32px',
-      height: '32px',
-    }
-    const userGraphic = new Graphic({
-      geometry: userPoint,
-      symbol: userSymbol,
-    })
-
-    // เพิ่มการตรวจสอบความปลอดภัยก่อนเข้าถึง graphics
-    if (mapView.value && mapView.value.graphics && !mapView.value.destroyed) {
-      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: markerBlueUrl,
-    //       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,
-            },
+          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)
           },
-        }
-      )
-      .then((response) => {
-        if (initVersion !== mapInitVersion || !mapView.value) {
-          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,
+          ui: {
+            components: [], // Empty array to remove all default UI components
+          },
         })
-        const poiSymbol = {
+
+        // ตำแหน่งของผู้ใช้
+        const userPoint = new Point({ longitude, latitude })
+        const userSymbol = {
           type: 'picture-marker',
-          url: markerBlueUrl,
+          url: 'http://maps.google.com/mapfiles/ms/icons/red.png',
           width: '32px',
           height: '32px',
         }
-        const poiGraphic = new Graphic({
-          geometry: poiPoint,
-          symbol: poiSymbol,
+        const userGraphic = new Graphic({
+          geometry: userPoint,
+          symbol: userSymbol,
         })
-
-        // เพิ่มการตรวจสอบความปลอดภัยก่อนเข้าถึง graphics และ goTo
-        if (mapView.value && !mapView.value.destroyed) {
-          if (mapView.value.graphics) {
+        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
-          if (typeof mapView.value.goTo === 'function') {
+            // อัปเดตการแสดงผลให้แสดงทั้งตำแหน่งของผู้ใช้และ POI
             mapView.value.goTo({
               target: [userPoint, poiPoint],
               zoom: zoomMap.value,
-            }).catch(() => {
-              // Ignore goTo errors
             })
-          }
-        }
 
-        updateLocation(latitude, longitude, poiPlaceName.value)
-      })
-      .catch(() => {
-        if (initVersion !== mapInitVersion) {
-          return
-        }
-        poiPlaceName.value = poiPlaceName.value || 'ไม่พบข้อมูล'
-        updateLocation(latitude, longitude, poiPlaceName.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,
+                })
 
-    if (initVersion === mapInitVersion) {
-      reattachAndResizeMap()
-    }
+                updateLocation(latitude, longitude, poiPlaceName.value)
+              })
+              .catch((error) => {
+                // console.error('Error fetching points of interest:', error)
+              })
+          })
+      })
+    })
   } catch (error) {
-    if (initVersion === mapInitVersion) {
-      isMapInitialized.value = false
-    }
     console.error('Error loading the map', error)
-  } finally {
-    if (initVersion === mapInitVersion) {
-      isInitializing.value = false
-    }
   }
 }
 
@@ -509,116 +282,12 @@ 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() {
-  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) {
-      return
-    }
-
-    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) {
-      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) {
-        await recoverMapByReinitialize()
-      }
-
-      reattachAndResizeMap()
-    }
-  }
-)
-
-// 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 () => {
-  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)) {
-    await waitForActiveMapContainer(30, 100)
-    await initializeMap()
-    reattachAndResizeMap()
-  }
-})
-
 // Cleanup map resources when component unmounts
 onBeforeUnmount(() => {
-  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({
@@ -627,8 +296,8 @@ defineExpose({
 </script>
 
 <template>
-  <!-- Loading skeleton - show until map is visible -->
-  <div v-if="!isMapVisible" class="col-12">
+  <!-- Loading skeleton -->
+  <div v-if="!poiPlaceName" class="col-12">
     <q-skeleton
       :height="$q.screen.gt.xs ? '35vh' : '45px'"
       width="100%"
@@ -638,16 +307,16 @@ defineExpose({
   </div>
 
   <q-card
+    v-show="poiPlaceName"
     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">
       <div
-        :id="mapContainerId"
-        ref="desktopMapContainerRef"
+        id="mapViewDisplay"
+        ref="mapElement"
         style="height: 35vh; pointer-events: none"
       ></div>
 
@@ -671,7 +340,6 @@ 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
@@ -688,20 +356,16 @@ 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="mapContainerId"
-          ref="mobileMapContainerRef"
-          style="height: 20vh"
-        ></div>
+        <div id="mapViewDisplay" style="height: 20vh"></div>
       </q-expansion-item>
     </q-card>
   </q-card>
@@ -711,8 +375,4 @@ defineExpose({
 .expanAS.q-item__section--avatar {
   min-width: 40px !important;
 }
-
-.map-hidden {
-  visibility: hidden;
-}
 </style>
diff --git a/src/components/AscGISMapTime.vue b/src/components/AscGISMapTime.vue
index 1264791..7360980 100644
--- a/src/components/AscGISMapTime.vue
+++ b/src/components/AscGISMapTime.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { nextTick, onBeforeUnmount, onMounted, shallowRef, ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { loadModules } from 'esri-loader'
 import axios from 'axios'
-import markerRedUrl from '@/assets/markers/marker-red.svg?url'
+
+import type { LocationObject } from '@/interface/index/Main'
 
 const emit = defineEmits(['update:location'])
 
@@ -19,67 +20,8 @@ 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([
@@ -125,7 +67,7 @@ async function initializeMap() {
 
           // สร้าง MapView
           const mapView = new MapView({
-            container: mapContainerRef.value, // div ที่จะแสดงแผนที่
+            container: 'mapViewDisplay', // div ที่จะแสดงแผนที่
             map: map,
             center: {
               latitude: latitude,
@@ -137,11 +79,10 @@ async function initializeMap() {
               components: [], // Empty array to remove all default UI components
             },
           })
-          mapViewRef.value = mapView
 
           // สร้างสัญลักษณ์ของหมุด
           const markerSymbol = new PictureMarkerSymbol({
-            url: markerRedUrl,
+            url: 'https://maps.google.com/mapfiles/ms/icons/red-dot.png', // รูปหมุด
             width: '32px',
             height: '32px',
           })
@@ -157,42 +98,9 @@ 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://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/reverseGeocode/',
+              'https://bmagis.bangkok.go.th/portal/sharing/servers/e4732c3a9fe549ab8bc697573b468f68/rest/services/World/GeocodeServer/reverseGeocode/',
               {
                 params: {
                   f: 'json', // Format JSON response
@@ -203,20 +111,52 @@ 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(longitude, latitude, poiPlaceName.value)
+              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)
+                })
             })
-          // })
 
           let searchMarker: any = null
 
@@ -246,41 +186,9 @@ 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://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/reverseGeocode/',
+                  'https://bmagis.bangkok.go.th/portal/sharing/servers/e4732c3a9fe549ab8bc697573b468f68/rest/services/World/GeocodeServer/reverseGeocode/',
                   {
                     params: {
                       f: 'json', // Format JSON response
@@ -291,20 +199,52 @@ 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(longitude, latitude, poiPlaceName.value)
+                  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)
+                    })
                 })
-              // })
             }
 
             mapView.graphics.add(searchMarker)
@@ -335,41 +275,9 @@ 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://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/reverseGeocode/',
+                    'https://bmagis.bangkok.go.th/portal/sharing/servers/e4732c3a9fe549ab8bc697573b468f68/rest/services/World/GeocodeServer/reverseGeocode/',
                     {
                       params: {
                         f: 'json', // Format JSON response
@@ -380,20 +288,52 @@ 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(lat, lon, poiPlaceName.value)
+                    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)
+                      })
                   })
-                // })
               }
             }
 
@@ -410,64 +350,14 @@ 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 :key="mapRenderKey" ref="mapContainerRef" style="height: 35vh"></div>
+    <div id="mapViewDisplay" style="height: 35vh"></div>
 
     <div
       :class="
diff --git a/src/components/MapCheckin.vue b/src/components/MapCheckin.vue
index 6925eaa..9e18ec0 100644
--- a/src/components/MapCheckin.vue
+++ b/src/components/MapCheckin.vue
@@ -5,7 +5,7 @@ import { useQuasar } from 'quasar'
 
 const $q = useQuasar()
 
-const googleMapsApiKey = 'AIzaSyBzPSF5NxUZ1G8DKBnJvJPTqCR0Ct2xf58'
+const googleMapsApiKey = import.meta.env.VITE_GOOGLE_MAPS_API_KEY || ''
 
 declare var google: any
 const center = ref<any>()
diff --git a/src/components/PopupPrivacy.vue b/src/components/PopupPrivacy.vue
index 739d65f..1bd816b 100644
--- a/src/components/PopupPrivacy.vue
+++ b/src/components/PopupPrivacy.vue
@@ -16,26 +16,41 @@ const modal = defineModel<boolean>('modal', {
 
 // Privacy content data
 const privacyContent = {
-  title: 'ประกาศความเป็นส่วนตัว',
+  title: 'การคุ้มครองข้อมูลส่วนบุคคล',
   mainText:
-    'ประกาศความเป็นส่วนตัวสำหรับการลงเวลาปฏิบัติราชการผ่านระบบอิเล็กทรอนิกส์ในระบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร (BMA – HRMS)',
+    'ระบบนี้มีการเก็บ และใช้ภาพถ่ายของท่าน เพื่อยืนยันตัวตนในการลงเวลาปฏิบัติราชการ ข้อมูลจะถูกใช้เฉพาะตามวัตถุประสงค์ของระบบ และจัดเก็บอย่างปลอดภัยตามกฎหมายคุ้มครองข้อมูลส่วนบุคคล (PDPA)',
   warningText: '* หากท่านไม่กดยอมรับ อาจทำให้ไม่สามารถใช้งานระบบได้',
   detailIntro:
-    'กรุงเทพมหานครเก็บรวบรวมและใช้ข้อมูลส่วนบุคคลของท่าน ได้แก่ ข้อมูลวันและเวลาลงเวลาปฏิบัติราชการ พิกัดสถานที่ ณ ขณะลงเวลา ภาพถ่าย ณ ขณะลงเวลา ข้อมูลหน่วยงานหรือสถานที่ปฏิบัติงาน และข้อมูลทางเทคนิคที่จำเป็นต่อการใช้งานระบบ เพื่อวัตถุประสงค์ในการยืนยันการมาปฏิบัติราชการ ป้องกันการลงเวลาแทนกัน ตรวจสอบความถูกต้องของข้อมูล บริหารวันและเวลาปฏิบัติราชการ การลา การประเมินผลการปฏิบัติราชการ การพิจารณาเลื่อนเงินเดือน ตลอดจนการบริหารทรัพยากรบุคคลตามกฎหมาย กฎ ระเบียบ และหลักเกณฑ์ที่เกี่ยวข้อง',
-
-  paragraphs: [
-    'การเก็บรวบรวมและใช้ข้อมูลดังกล่าวเป็นการดำเนินการโดยอาศัยฐานการปฏิบัติหน้าที่ในการดำเนินภารกิจเพื่อประโยชน์สาธารณะหรือการใช้อำนาจรัฐตามมาตรา 24 (4) และฐานการปฏิบัติตามกฎหมายของ ผู้ควบคุมข้อมูลส่วนบุคคลตามมาตรา 24 (6) แห่งพระราชบัญญัติคุ้มครองข้อมูลส่วนบุคคล พ.ศ. 2562 โดยมิได้อาศัยความยินยอมของเจ้าของข้อมูลส่วนบุคคล',
-    'ระบบจะเข้าถึงข้อมูลพิกัดและกล้องถ่ายภาพเฉพาะในขณะที่ท่านดำเนินการลงเวลาเข้าและออกจากการปฏิบัติราชการเท่านั้น โดยไม่มีการติดตามหรือบันทึกพิกัดของท่านอย่างต่อเนื่องภายหลังจากการลงเวลาเสร็จสิ้น',
-    'กรุงเทพมหานครจะเก็บรักษาข้อมูลภาพถ่าย พิกัด ณ ขณะลงเวลา และข้อมูลรายละเอียดการลงเวลาไว้ตามรอบการประเมินผลการปฏิบัติราชการเป็นระยะเวลาไม่เกิน 6 เดือนนับแต่วันที่เก็บรวบรวม หรือจนกว่าการตรวจสอบข้อมูลในรอบการประเมินนั้นจะแล้วเสร็จ แล้วแต่ระยะเวลาใดจะยาวกว่า เมื่อครบกำหนด กรุงเทพมหานครจะลบ ทำลาย หรือทำให้ข้อมูลดังกล่าวไม่สามารถระบุตัวบุคคลได้ตามวิธีการและมาตรการรักษาความมั่นคงปลอดภัยที่กำหนด',
-    'กรณีข้อมูลดังกล่าวเกี่ยวข้องกับการร้องเรียน การโต้แย้ง การตรวจสอบ การดำเนินการทางวินัยการอุทธรณ์ การดำเนินคดี หรือการใช้สิทธิเรียกร้องตามกฎหมาย กรุงเทพมหานครอาจเก็บรักษาข้อมูลไว้เกินกว่า 6 เดือนได้เท่าที่จำเป็น จนกว่ากระบวนการดังกล่าวจะถึงที่สุดหรือพ้นระยะเวลาที่กฎหมายกำหนด',
-    'ทั้งนี้ ข้อมูลสรุปเกี่ยวกับวันเวลาปฏิบัติราชการ การลา การมาสาย การขาดราชการ ผลการประเมินผลการปฏิบัติราชการ และผลการพิจารณาเลื่อนเงินเดือน ซึ่งเป็นส่วนหนึ่งของทะเบียนประวัติหรือเอกสารด้านการบริหารทรัพยากรบุคคล อาจได้รับการเก็บรักษาตามระยะเวลาที่กฎหมาย ระเบียบ หลักเกณฑ์งานบุคคล และระเบียบงานสารบรรณกำหนด ซึ่งอาจมีระยะเวลาแตกต่างจากข้อมูลภาพถ่ายและพิกัดที่ใช้ประกอบการลงเวลา',
-    'กรุงเทพมหานครจะจำกัดการเข้าถึงข้อมูลเฉพาะเจ้าหน้าที่หรือผู้ปฏิบัติงานที่มีหน้าที่เกี่ยวข้อง และจะไม่นำข้อมูลไปใช้หรือเปิดเผยเพื่อวัตถุประสงค์อื่นที่ไม่สอดคล้องกับวัตถุประสงค์ที่ได้แจ้งไว้ เว้นแต่เป็นกรณีที่กฎหมายกำหนดหรืออนุญาตให้ดำเนินการได้',
-    'ท่านมีสิทธิขอเข้าถึง ขอรับสำเนา ขอแก้ไข ขอคัดค้าน ขอระงับการใช้ หรือขอให้ลบข้อมูลส่วนบุคคลของท่านได้ตามหลักเกณฑ์และเงื่อนไขที่พระราชบัญญัติคุ้มครองข้อมูลส่วนบุคคล พ.ศ. 2562 กำหนด โดยการใช้สิทธิดังกล่าวไม่กระทบต่อหน้าที่ในการลงเวลาปฏิบัติราชการและการปฏิบัติตามกฎหมาย กฎ ระเบียบ และหลักเกณฑ์ของกรุงเทพมหานคร',
-  ],
+    'ข้าพเจ้าตกลงให้กรุงเทพมหานครเก็บ ใช้ และประมวลผลข้อมูลส่วนบุคคลประเภทภาพถ่ายของข้าพเจ้า ซึ่งได้มาจากการใช้งานระบบลงเวลาปฏิบัติราชการอิเล็กทรอนิกส์ ของระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร (BMA - HRMS) ทั้งนี้ เพื่อวัตถุประสงค์ดังต่อไปนี้',
+  purposes: {
+    title: 'วัตถุประสงค์การใช้ข้อมูล',
+    items: [
+      'เพื่อยืนยันตัวตนของผู้ปฏิบัติงานในการบันทึกเวลาเข้า-ออกการปฏิบัติราชการ',
+      'เพื่อใช้เป็นหลักฐานประกอบการบริหารงานด้านทรัพยากรบุคคล การจ่ายค่าตอบแทน และการกำกับ ดูแลการปฏิบัติราชการ',
+      'เพื่อรักษาความถูกต้อง โปร่งใส และป้องกันการทุจริตในการบันทึกเวลาการปฏิบัติงาน',
+    ],
+  },
+  understanding: {
+    items: [
+      'การเก็บ ใช้ และประมวลผลข้อมูลส่วนบุคคลดังกล่าว จะดำเนินการ เท่าที่จำเป็นตามวัตถุประสงค์ที่ระบุไว้เท่านั้น',
+      'หน่วยงานจะจัดให้มีมาตรการรักษาความมั่นคงปลอดภัยของข้อมูลส่วนบุคคล ตามที่กฎหมายกำหนด',
+      'ข้อมูลส่วนบุคคลของข้าพเจ้าจะถูกเก็บรักษา ตามระยะเวลาที่จำเป็น ต่อการปฏิบัติงานหรือเป็นไปตามที่กฎหมายกำหนด',
+    ],
+  },
+  rights: {
+    title:
+      'ข้าพเจ้าทราบถึง สิทธิของเจ้าของข้อมูลส่วนบุคคล ตามพระราชบัญญัติคุ้มครองข้อมูลส่วนบุคคล พ.ศ. ๒๕๖๒ ได้แก่',
+    items: [
+      'สิทธิขอเข้าถึงและขอรับสำเนาข้อมูล',
+      'สิทธิขอแก้ไขข้อมูลให้ถูกต้อง',
+      'สิทธิขอถอนความยินยอม (ทั้งนี้ การถอนความยินยอมอาจส่งผลต่อการใช้งานระบบลงเวลาการปฏิบัติราชการ)',
+      'สิทธิร้องเรียนต่อคณะกรรมการคุ้มครองข้อมูลส่วนบุคคล',
+    ],
+  },
   consentText:
-    'ข้าพเจ้าได้รับทราบประกาศความเป็นส่วนตัวเกี่ยวกับการลงเวลาปฏิบัติราชการผ่านระบบอิเล็กทรอนิกส์แล้ว',
+    'ข้าพเจ้าได้อ่านและเข้าใจรายละเอียดทั้งหมดแล้ว และยินยอมให้เก็บ ใช้ และประมวลผลข้อมูลส่วนบุคคล ประเภทภาพถ่ายของข้าพเจ้า ตามที่ระบุไว้ข้างต้นโดยสมัครใจ',
   buttons: {
-    accept: 'รับทราบและดำเนินการต่อ',
+    accept: 'ยอมรับ',
     decline: 'ไม่ยอมรับ',
   },
 }
@@ -82,8 +97,7 @@ 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
 
@@ -153,18 +167,50 @@ const checkIfScrollable = () => {
             {{ privacyContent.detailIntro }}
           </p>
 
-          <!-- เนื้อหาประกาศความเป็นส่วนตัว -->
+          <!-- วัตถุประสงค์ -->
           <div class="q-mb-md">
-            <p
-              v-for="(paragraph, index) in privacyContent.paragraphs"
-              :key="`p-${index}`"
-              class="q-mb-sm"
-            >
-              {{ paragraph }}
-            </p>
+            <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>
 
-          <p class="consent-text q-mt-lg">{{ privacyContent.consentText }}</p>
+          <!-- ข้าพเจ้าทราบและเข้าใจว่า -->
+          <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>
+            <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>
         </div>
       </q-card-section>
 
diff --git a/src/components/TableHistory.vue b/src/components/TableHistory.vue
index e081a3c..c364c30 100644
--- a/src/components/TableHistory.vue
+++ b/src/components/TableHistory.vue
@@ -13,15 +13,20 @@ 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,
@@ -189,20 +194,31 @@ const visibleColumns = ref<string[]>([
   'checkOutLocation',
   'checkOutStatus',
 ])
-const pagination = ref({
-  page: page.value,
-  rowsPerPage: pageSize.value,
+
+const currentPage = ref<number>(1) //หน้าปัจจุบัน
+// Pagination - initial pagination
+const initialPagination = ref<Pagination>({
+  sortBy: null,
+  descending: false,
+  page: 1,
+  rowsPerPage: props.pageSize, // set ตาม page หลักส่งมา
 })
 
 // Pagination - update rowsPerPage
 async function updatePagination(newPagination: Pagination) {
-  pageSize.value = newPagination.rowsPerPage
+  initialPagination.value = newPagination
+  currentPage.value = 1 // set current page เป็น 1 เสมอเมื่อเปลี่ยน per row
 }
 
 async function filterFn() {
-  emit('update:change-page', 1, pageSize.value, keyword.value)
+  // ส่งอีเวนต์ 'update:change-page' เมื่อหน้าเปลี่ยนแปลง
+  emit(
+    'update:change-page',
+    1,
+    initialPagination.value.rowsPerPage,
+    keyword.value
+  )
 }
-
 const modalPopup = ref<boolean>(false) //  popup แก้ไขลงเวลา
 const titlePopup = ref<string>('') //  หัวขข้อ popup แก้ไขลงเวลา
 const dataRow = ref<DataCheckIn>() // ข้อมูลการลงเวลา
@@ -260,15 +276,17 @@ function onClickOpenPopupRejrct(data: DataCheckIn) {
   }
 }
 
-function onUpdatePage(val: number) {
-  emit('update:change-page', val, pageSize.value, keyword.value)
-}
-
-/** watch pageSize*/
+/** watch currentPage และ rowsPerPage*/
 watch(
-  () => pageSize.value,
+  [() => currentPage.value, () => initialPagination.value.rowsPerPage],
   () => {
-    emit('update:change-page', 1, pageSize.value, keyword.value)
+    // ส่งอีเวนต์ 'update:change-page' เมื่อหน้าเปลี่ยนแปลง
+    emit(
+      'update:change-page',
+      currentPage.value,
+      initialPagination.value.rowsPerPage,
+      keyword.value
+    )
   }
 )
 </script>
@@ -322,10 +340,10 @@ watch(
     v-model:selected="selected"
     :virtual-scroll-sticky-size-start="48"
     :style="$q.screen.gt.xs ? 'max-height: 64vh' : ''"
-    :rows-per-page-options="[1, 10, 25, 50, 100]"
+    :rows-per-page-options="[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">
@@ -458,11 +476,10 @@ watch(
         </q-card>
       </div>
     </template>
-
     <template v-slot:pagination>
       ทั้งหมด {{ props.total }} รายการ
       <q-pagination
-        v-model="page"
+        v-model="currentPage"
         active-color="primary"
         color="dark"
         :max-pages="5"
@@ -470,7 +487,6 @@ watch(
         boundary-links
         direction-links
         :max="Number(props.maxPage)"
-        @update:model-value="onUpdatePage"
       ></q-pagination>
     </template>
   </q-table>
diff --git a/src/composables/usePermissions.ts b/src/composables/usePermissions.ts
index b92ed29..ecf1ef3 100644
--- a/src/composables/usePermissions.ts
+++ b/src/composables/usePermissions.ts
@@ -1,171 +1,52 @@
-import { onBeforeUnmount, ref } from 'vue'
+import { useQuasar } from 'quasar'
 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')
 
-  let cameraPermissionStatus: PermissionStatus | null = null
-  let locationPermissionStatus: PermissionStatus | null = null
+  // const checkCameraPermission = (): 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 checkLocationPermission = (): boolean => {
+  //   if (!privacyStore.isAccepted) {
+  //     privacyStore.modalPrivacy = true
+  //     $q.notify({
+  //       type: 'warning',
+  //       message: 'กรุณายอมรับนโยบายคุ้มครองข้อมูลส่วนบุคคลก่อนใช้งานแผนที่',
+  //       position: 'top',
+  //     })
+  //     return false
+  //   }
+  //   return true
+  // }
 
   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 {
-    cameraPermissionState,
-    locationPermissionState,
+    // checkCameraPermission,
+    // checkLocationPermission,
     checkPrivacyAccepted,
-    syncPermissionStates,
-    requestCameraPermission,
-    requestLocationPermission,
   }
 }
diff --git a/src/interface/index/Main.ts b/src/interface/index/Main.ts
index 72b2ba1..5d82bd2 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
+  rowsPerPage: number | undefined
 }
 interface DataCheckIn {
   checkInDate: string
diff --git a/src/main.ts b/src/main.ts
index 04b0dfd..b04278c 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -12,9 +12,6 @@ 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/router/index.ts b/src/router/index.ts
index 8346697..8d85f3e 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -5,7 +5,6 @@ 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'
 
@@ -88,63 +87,19 @@ 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/stores/positionKeycloak.ts b/src/stores/positionKeycloak.ts
index 22ffb52..a856ede 100644
--- a/src/stores/positionKeycloak.ts
+++ b/src/stores/positionKeycloak.ts
@@ -11,26 +11,16 @@ 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')
     }
@@ -62,9 +52,7 @@ export const usePositionKeycloakStore = defineStore(
     return {
       setPositionKeycloak,
       clearPositionKeycloak,
-      setProfileImg,
       dataPositionKeycloak,
-      profileImg,
       findOrgName,
       menuData,
     }
diff --git a/src/stores/socket.ts b/src/stores/socket.ts
deleted file mode 100644
index 28c1e3b..0000000
--- a/src/stores/socket.ts
+++ /dev/null
@@ -1,101 +0,0 @@
-import { ref } from 'vue'
-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
-  const notificationCounter = ref(0);
-
-  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)
-      notificationCounter.value++ 
-      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 { notificationCounter }
-})
diff --git a/src/style/quasar-variables.sass b/src/style/quasar-variables.sass
index e590103..f2c3dc4 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,33 +100,35 @@ $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
@@ -134,7 +136,4 @@ $muti-tab: #87d4cc
 /* q-tree */
 
 .q-tree
-    color: #c8d3db
-
-.custom-notification-top
-    margin-top: 180px !important
+  color: #c8d3db
diff --git a/src/utils/forceExternalBrowser.ts b/src/utils/forceExternalBrowser.ts
deleted file mode 100644
index bf65fa3..0000000
--- a/src/utils/forceExternalBrowser.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-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()
diff --git a/src/views/HistoryView.vue b/src/views/HistoryView.vue
index 8f5a2bd..089d697 100644
--- a/src/views/HistoryView.vue
+++ b/src/views/HistoryView.vue
@@ -115,7 +115,6 @@ 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 เพื่อดึงข้อมูลใหม่
 }
 
@@ -178,9 +177,9 @@ watch(
               />
               <TableHistory
                 :fetch-data="functionFetch"
-                v-model:page-size="pageSize"
+                :page-size="pageSize"
                 :total="total"
-                v-model:page="page"
+                :page="page"
                 :paging="true"
                 @update:change-page="changePage"
                 :max-page="maxPage"
@@ -197,9 +196,9 @@ watch(
               />
               <TableHistory
                 :fetch-data="functionFetch"
-                v-model:page-size="pageSize"
+                :page-size="pageSize"
                 :total="total"
-                v-model:page="page"
+                :page="page"
                 :paging="true"
                 @update:change-page="changePage"
                 :max-page="maxPage"
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index e114761..9de4f22 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,25 +1,14 @@
 <script setup lang="ts">
-import {
-  ref,
-  reactive,
-  onMounted,
-  watch,
-  onBeforeUnmount,
-  computed,
-  nextTick,
-} from 'vue'
+import { ref, reactive, onMounted, watch, onBeforeUnmount } from 'vue'
 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'
 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'
 
@@ -28,36 +17,10 @@ import MapCheck from '@/components/AscGISMap.vue'
 const mixin = useCounterMixin()
 const { date2Thai, showLoader, hideLoader, messageError, dialogConfirm } = mixin
 const $q = useQuasar()
-const {
-  cameraPermissionState,
-  checkPrivacyAccepted,
-  syncPermissionStates,
-  requestCameraPermission,
-} = usePermissions()
-const socketStore = useSocketStore()
-const { notificationCounter } = storeToRefs(socketStore)
+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) // สถานะเวลา เข้า,ออก
@@ -67,40 +30,10 @@ 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 เช็คเวลาต้องลงเวลาเข้าหรือออกงาน
  */
@@ -113,7 +46,6 @@ 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
     })
@@ -137,7 +69,7 @@ const formattedM = ref()
 const formattedH = ref()
 const formattedHH = ref()
 const formattedA = ref()
-const clockInterval = ref<ReturnType<typeof setInterval> | undefined>()
+const clockInterval = ref<number | NodeJS.Timeout | undefined>()
 
 /** function อัพเดทเวลา*/
 function updateClock() {
@@ -166,7 +98,6 @@ 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 เรียกพิกัดละติจูด พิกัดลองติจูด
@@ -199,131 +130,6 @@ 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,
@@ -366,11 +172,6 @@ const options = ref<OptionReason[]>([
   //   value: 'ประสบภัย เช่น น้ำท่วม มีพายุ ประสบอุบัติเหตุ',
   //   text: 'ประสบภัย เช่น น้ำท่วม มีพายุ ประสบอุบัติเหตุ',
   // },
-  {
-    value: 'ปฏิบัติงานในจุดบริการด่วนมหานคร',
-    text: 'ปฏิบัติงานในจุดบริการด่วนมหานคร',
-  },
-
   { value: 'อื่นๆ', text: 'อื่นๆ' },
 ])
 
@@ -389,227 +190,11 @@ 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')
 
-/**
- * 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 || ''
-  const hasTouchPoints = navigator.maxTouchPoints > 1
-
-  return (
-    /iPhone|iPad|iPod/.test(platform) ||
-    (platform === 'MacIntel' && hasTouchPoints)
-  )
-})()
-
-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(() => preferNativePhotoCapture.value)
-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)
-const DEFAULT_NORMALIZED_IMAGE_QUALITY = 0.92
-
-interface NormalizePhotoOptions {
-  fileName?: string
-  mirrorHorizontally?: boolean
-  quality?: number
-}
-
-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 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
-  img.value = URL.createObjectURL(file)
-}
-
-function openNativePhotoCapture() {
-  void stopInlineCamera()
-
-  if (nativePhotoInput.value) {
-    nativePhotoInput.value.value = ''
-    nativePhotoInput.value.click()
-  }
-}
-
-function enableNativePhotoCaptureFallback() {
-  preferNativePhotoCapture.value = true
-  void stopInlineCamera()
-  clearSelectedPhoto()
-}
-
-function switchToNativePhotoCapture() {
-  enableNativePhotoCaptureFallback()
-  openNativePhotoCapture()
-}
-
-/**
- * Called when the user selects / captures a photo via the native file-input
- * fallback. Keeps 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
-  }
-
-  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)
+const intervalId = ref<number | NodeJS.Timeout | undefined>(undefined) // ต้องใช้ตัวแปรเก็บค่า interval
 
 /**
  * เริ่มจาก onMounted #1 เช็ค status คิว
@@ -638,18 +223,19 @@ 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)
-      // }
+      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()
     } else {
       /** inQueue เป็น false  */
       isDisabledCheckTime.value = false
@@ -712,30 +298,14 @@ 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'
 }
 
-function resolveCameraType(
-  label: string,
-  fallbackType: 'front' | 'back'
-): 'front' | 'back' {
-  const detectedType = identifyCameraType(label)
-  return detectedType === 'unknown' ? fallbackType : detectedType
-}
-
 /** function เปิดกล้อง*/
 async function openCamera() {
   // เช็คสิทธิ์ privacy ก่อนเปิดกล้อง
@@ -743,35 +313,20 @@ async function openCamera() {
     return
   }
 
-  // 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
-  }
-
-  if (cameraIsOn.value) {
-    await stopInlineCamera()
-    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
+  if (!isPermissionCameraDenied.value) {
+    // change camera device
+    if (cameraIsOn.value) {
+      await 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
+  } else {
     messageError(
       $q,
       '',
@@ -779,19 +334,6 @@ async function openCamera() {
     )
     return
   }
-
-  try {
-    await startInlineCamera()
-  } catch (error) {
-    console.error('Error opening camera:', error)
-
-    if ((isIOSDevice || isAndroidDevice) && !useNativePhotoCapture.value) {
-      switchToNativePhotoCapture()
-      return
-    }
-
-    messageError($q, error, 'ไม่สามารถเปิดกล้องได้ กรุณาลองใหม่อีกครั้ง')
-  }
 }
 
 /** change camera device*/
@@ -808,43 +350,27 @@ 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)
-      await ensureInlineCameraPreviewReady()
       currentCameraIndex.value = 0
-      currentCameraType.value = resolveCameraType(
-        device.label || '',
-        fallbackType
-      )
+      currentCameraType.value = identifyCameraType(device.label || '')
       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) {
       const targetDevice = matchingCameras[0]
       await camera.value?.changeCamera(targetDevice.deviceId)
-      await ensureInlineCameraPreviewReady()
       currentCameraIndex.value = devices.indexOf(targetDevice)
-      currentCameraType.value = resolveCameraType(
-        targetDevice.label || '',
-        targetCameraType
-      )
+      currentCameraType.value = targetCameraType
     } else {
       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 || '',
-        targetCameraType
-      )
+      currentCameraType.value = identifyCameraType(nextDevice.label || '')
     }
   } catch (error) {
     console.error('Error switching camera:', error)
@@ -860,75 +386,34 @@ 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)
-  await ensureInlineCameraPreviewReady()
   currentCameraIndex.value = targetIndex
-  currentCameraType.value = resolveCameraType(
-    targetDevice.label || '',
-    fallbackType
-  )
+  currentCameraType.value = identifyCameraType(targetDevice.label || '')
 }
 
 /** function ถ่ายรูป*/
 async function capturePhoto() {
-  try {
-    const imageBlob: any = await camera.value?.snapshot(
-      { width: photoWidth.value, height: photoHeight.value },
-      'image/jpeg',
-      0.8
-    )
-    if (!imageBlob || !(await isValidCapturedImage(imageBlob))) {
-      if (isIOSDevice || isAndroidDevice) {
-        switchToNativePhotoCapture()
-        return
-      }
-
-      messageError($q, '', 'ไม่สามารถถ่ายรูปได้ กรุณาลองใหม่อีกครั้ง')
-      return
-    }
-    const fileName = `photo_${Date.now()}.jpg`
-    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)
-
-    //แสดงรูป
-    await stopInlineCamera()
-  } catch (error) {
-    console.error('Error capturing photo:', error)
-
-    if ((isIOSDevice || isAndroidDevice) && !useNativePhotoCapture.value) {
-      switchToNativePhotoCapture()
-      return
-    }
-
-    messageError($q, error, 'ไม่สามารถถ่ายรูปได้ กรุณาลองใหม่อีกครั้ง')
-  }
+  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
+  //แสดงรูป
+  await camera.value?.stop()
+  const url = URL.createObjectURL(imageBlob)
+  img.value = url
 }
 
 /** function เปลี่ยนรูปภาพ*/
-async function refreshPhoto() {
-  try {
-    clearSelectedPhoto()
-
-    if (useNativePhotoCapture.value) {
-      openNativePhotoCapture()
-      return
-    }
-    await startInlineCamera()
-  } catch (error) {
-    console.error('Error refreshing photo:', error)
-    messageError($q, error, 'ไม่สามารถเปิดกล้องได้ กรุณาลองใหม่อีกครั้ง')
-  }
+function refreshPhoto() {
+  img.value = undefined
+  camera.value?.start()
 }
 
 /** ref validate*/
@@ -981,16 +466,8 @@ async function validateForm() {
   }
 }
 
-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 = ref<InstanceType<typeof MapCheck> | null>(null)
 const timeChickin = ref<string>('') //เวลาเข้างาน,เวลาออกงาน
-const displayedCheckDate = ref<Date>(new Date())
 
 /** function ยืนยันการลงเวลาเข้า - ออก*/
 async function confirm() {
@@ -1006,16 +483,6 @@ async function confirm() {
     return
   }
 
-  if (!fileImg.value || !(await isValidCapturedImage(fileImg.value))) {
-    if ((isIOSDevice || isAndroidDevice) && !useNativePhotoCapture.value) {
-      enableNativePhotoCaptureFallback()
-    }
-    clearSelectedPhoto()
-    disabledBtn.value = false
-    messageError($q, '', 'รูปภาพไม่สมบูรณ์ กรุณาถ่ายรูปใหม่อีกครั้งก่อนลงเวลา')
-    return
-  }
-
   showLoader()
   const isLocation = workplace.value === 'in-place' //*true คือ ณ สถานที่ตั้ง, false คือ นอกสถานที่ตั้ง
   const locationName = workplace.value === 'in-place' ? '' : useLocation.value
@@ -1033,7 +500,6 @@ 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,
@@ -1065,12 +531,7 @@ async function getCheck() {
   }
 
   showLoader()
-  const isSeminar =
-    model.value === 'ไปประชุม / อบรม / สัมมนา'
-      ? 'S'
-      : model.value === 'ปฏิบัติงานในจุดบริการด่วนมหานคร'
-      ? 'O'
-      : 'N'
+  const isSeminar = model.value === 'ไปประชุม / อบรม / สัมมนา' ? 'Y' : 'N'
 
   await http
     .get(config.API.checkoutCheck + `/${isSeminar}`)
@@ -1120,7 +581,7 @@ async function onClickConfirm() {
   try {
     showLoader()
     cameraIsOn.value = false
-    clearSelectedPhoto()
+    img.value = undefined
     modalTime.value = false
     if (!statusCheckin.value) {
       statusCheckin.value = true
@@ -1158,8 +619,13 @@ const inQueue = ref<boolean>(false)
 
 // ฟังก์ชันสำหรับรีเซ็ตรูปและหยุดกล้อง
 function resetCameraAndImage() {
-  clearSelectedPhoto()
-  void stopInlineCamera()
+  if (img.value) {
+    img.value = undefined
+  }
+  if (cameraIsOn.value && camera.value) {
+    camera.value.stop()
+    cameraIsOn.value = false
+  }
 }
 
 // เพิ่มฟังก์ชันสำหรับจัดการการปิดแอพในมือถือ
@@ -1185,42 +651,33 @@ function handleVisibilityChange() {
   }
 }
 
+const isPermissionCameraDenied = ref<boolean>(false) // ตัวแปรสำหรับตรวจสอบการปฏิเสธสิทธิ์กล้อง
+
+async function requestCamera() {
+  try {
+    await navigator.mediaDevices.getUserMedia({ video: true })
+  } catch (err) {
+    isPermissionCameraDenied.value = true
+  }
+}
+
 /** Hook*/
 onMounted(async () => {
-  // เริ่มต้น clock เสมอ
+  isLoadingCheckTime.value = true
   updateClock()
   clockInterval.value = setInterval(updateClock, 1000)
-
-  // เพิ่ม event listeners สำหรับมือถือ
-  document.addEventListener('visibilitychange', handleVisibilityChange)
-  window.addEventListener('pagehide', handleAppClose)
-
-  // ถ้ามีข้อมูลสังกัดแล้ว เริ่ม checking ได้เลย
-  if (hasOrganization.value) {
-    isLoadingCheckTime.value = true
-    startChecking()
-  }
-
-  await syncPermissionStates()
+  startChecking() //เช็ค status จาก คิว #1
 
   // เรียกแผนที่เฉพาะเมื่อยอมรับ privacy แล้ว
   if (privacyStore.isAccepted) {
     mapRef.value?.requestLocationPermission()
+    requestCamera()
   }
-})
 
-// เฝ้าดูการเปลี่ยนแปลงของ hasOrganization
-// เพื่อเริ่ม startChecking เมื่อมีข้อมูลสังกัด
-watch(
-  hasOrganization,
-  (newValue) => {
-    if (newValue && !isLoadingCheckTime.value) {
-      isLoadingCheckTime.value = true
-      startChecking()
-    }
-  },
-  { immediate: false }
-)
+  // เพิ่ม event listeners สำหรับมือถือ
+  document.addEventListener('visibilitychange', handleVisibilityChange)
+  window.addEventListener('pagehide', handleAppClose)
+})
 
 onBeforeUnmount(() => {
   resetCameraAndImage()
@@ -1244,18 +701,13 @@ onBeforeUnmount(() => {
 
 watch(
   () => privacyStore.isAccepted,
-  async (newVal) => {
+  (newVal) => {
     if (newVal) {
-      await syncPermissionStates()
       mapRef.value?.requestLocationPermission()
+      requestCamera()
     }
   }
 )
-
-/** Watch notification counter on socket */
-watch(notificationCounter, () => {
-  startChecking()
-})
 </script>
 
 <template>
@@ -1275,7 +727,6 @@ watch(notificationCounter, () => {
           >
             <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">
@@ -1298,10 +749,7 @@ watch(notificationCounter, () => {
 
           <div class="col-12 text-grey-9">
             <div class="col-12 row justify-center">
-              <div
-                v-if="$q.screen.gt.xs"
-                class="col-12 row q-pt-md justify-center"
-              >
+              <div class="col-12 row q-pt-md justify-center gt-xs">
                 <div
                   class="col-xs-12 col-sm-10 text-h6 text-center text-weight-bold"
                 >
@@ -1323,44 +771,19 @@ watch(notificationCounter, () => {
                   </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 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 v-if="$q.screen.gt.xs" class="col-xs-12 col-sm-8">
+                <div class="col-xs-12 col-sm-8 gt-xs">
                   <div class="col-12">
                     <MapCheck
-                      ref="mapRefDesktop"
-                      :initialPOI="formLocation.POI"
+                      v-if="$q.screen.gt.xs"
+                      ref="mapRef"
                       @update:location="updateLocation"
                     />
                   </div>
                 </div>
-                <div v-if="$q.screen.gt.xs" class="col-xs-12 col-sm-4">
+                <div class="col-xs-12 col-sm-4">
                   <q-card
                     :class="
                       $q.screen.xs ? 'card-container-xs' : 'card-container'
@@ -1382,47 +805,26 @@ watch(notificationCounter, () => {
                     </div>
                     <div class="col-12 row items-center">
                       <!-- แสดงกล้องตอนกดถ่ายภาพ -->
+
                       <Camera
-                        :key="`desktop-${cameraMountKey}`"
                         :resolution="{ width: photoWidth, height: photoHeight }"
                         ref="camera"
-                        :class="['camera-preview']"
                         :autoplay="false"
-                        :playsinline="true"
-                        :facingMode="'user'"
+                        :style="!img ? 'display: block' : 'display: none'"
                       />
 
                       <!-- แสดงรูปเมื่อกด capture -->
                       <div v-if="img" class="image-container">
-                        <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>
+                        <q-img :src="img" class="image-element"></q-img>
                       </div>
 
-                      <div v-if="cameraIsOn && img == null">
+                      <div v-if="cameraIsOn">
                         <div
                           v-if="$q.screen.gt.xs"
                           class="absolute-bottom-right q-ma-md"
                         >
                           <q-btn
-                            v-if="availableCameras.length > 1"
+                            v-if="availableCameras.length > 1 && img == null"
                             round
                             push
                             icon="flip_camera_ios"
@@ -1432,6 +834,7 @@ watch(notificationCounter, () => {
                             @click="switchCamera"
                           />
                           <q-btn
+                            v-if="img == null"
                             round
                             push
                             icon="photo_camera"
@@ -1439,6 +842,15 @@ watch(notificationCounter, () => {
                             color="positive"
                             @click="capturePhoto"
                           />
+                          <q-btn
+                            v-else
+                            round
+                            push
+                            icon="refresh"
+                            size="md"
+                            color="negative"
+                            @click="refreshPhoto"
+                          />
                         </div>
                         <div v-else>
                           <div
@@ -1446,7 +858,7 @@ watch(notificationCounter, () => {
                             style="background: #00000021"
                           >
                             <q-btn
-                              v-if="availableCameras.length > 1"
+                              v-if="availableCameras.length > 1 && img == null"
                               round
                               icon="flip_camera_ios"
                               size="16px"
@@ -1457,43 +869,20 @@ watch(notificationCounter, () => {
                             />
                             <q-btn
                               round
+                              v-if="img == null"
                               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
-                            round
-                            push
-                            icon="refresh"
-                            size="md"
-                            color="negative"
-                            @click="refreshPhoto"
-                          />
-                        </div>
-                        <div v-else>
-                          <div
-                            class="absolute-bottom text-subtitle2 text-center q-py-sm"
-                            style="background: #00000021"
-                          >
                             <q-btn
+                              v-else
                               round
                               icon="refresh"
                               size="18px"
                               style="background: #263238; color: white"
                               @click="refreshPhoto"
-                              unelevated
                             />
                           </div>
                         </div>
@@ -1504,113 +893,6 @@ watch(notificationCounter, () => {
 
                 <!-- กรอกข้อมูล หน้ามือถือ -->
                 <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
-                          :key="`mobile-${cameraMountKey}`"
-                          :resolution="{
-                            width: photoWidth,
-                            height: photoHeight,
-                          }"
-                          ref="camera"
-                          :class="['camera-preview']"
-                          :autoplay="false"
-                          :playsinline="true"
-                          :facingMode="'user'"
-                        />
-
-                        <!-- แสดงรูปเมื่อกด capture -->
-                        <div v-if="img" class="image-container">
-                          <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 && img == null">
-                          <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>
-
-                        <!-- 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
-                              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
@@ -1683,13 +965,8 @@ watch(notificationCounter, () => {
                     </q-card>
                   </div>
 
-                  <!-- Map หน้ามือถือ -->
-                  <div class="col-12">
-                    <MapCheck
-                      ref="mapRefMobile"
-                      :initialPOI="formLocation.POI"
-                      @update:location="updateLocation"
-                    />
+                  <div class="col-12" v-if="$q.screen.xs">
+                    <MapCheck ref="mapRef" @update:location="updateLocation" />
                   </div>
                 </div>
                 <!-- กรอกข้อมูล หน้ามือถือ -->
@@ -1805,7 +1082,7 @@ watch(notificationCounter, () => {
             >
               <q-separator />
               <div class="col-12 q-pa-md">
-                <!-- <p
+                <p
                   :class="
                     $q.screen.gt.xs
                       ? 'text-red text-caption '
@@ -1813,7 +1090,7 @@ watch(notificationCounter, () => {
                   "
                 >
                   *หมายเหตุ คลิกลงเวลาเข้างานแล้วระบบจะลงเวลาทันที
-                </p> -->
+                </p>
                 <q-btn
                   :label="
                     !statusCheckin && inQueue
@@ -1845,10 +1122,10 @@ watch(notificationCounter, () => {
               </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>
@@ -1856,7 +1133,7 @@ watch(notificationCounter, () => {
   </q-page>
 
   <!--  top page sticky  หน้ามือถือ-->
-  <q-page-sticky expand position="top" v-show="$q.screen.xs">
+  <q-page-sticky expand position="top" v-if="$q.screen.xs">
     <div
       class="row q-col-gutter-sm col bg-white col-12 q-pa-md"
       style="height: 100px"
@@ -1920,7 +1197,7 @@ watch(notificationCounter, () => {
   <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 '
@@ -1928,7 +1205,7 @@ watch(notificationCounter, () => {
         "
       >
         *หมายเหตุ คลิกลงเวลาเข้างานแล้วระบบจะลงเวลาทันที
-      </p> -->
+      </p>
       <q-btn
         :label="
           !statusCheckin && inQueue
@@ -1958,10 +1235,10 @@ watch(notificationCounter, () => {
         :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>
 
   <!-- แสดงการลงเวลา -->
@@ -1989,7 +1266,7 @@ watch(notificationCounter, () => {
           <div
             class="col-12 text-subtitle1 text-center text-white text-weight-medium"
           >
-            {{ date2Thai(displayedCheckDate) }}
+            {{ date2Thai(Thai) }}
           </div>
           <div class="row col-12 justify-center q-pt-sm">
             <!-- <div class="text-h3 text-white text-weight-bold"></div> -->
@@ -2023,20 +1300,6 @@ watch(notificationCounter, () => {
       </q-card-actions>
     </q-card>
   </q-dialog>
-
-  <!--
-    Native still-image fallback: hidden file input.
-    Activated only after inline camera is proven unsupported or fails — on any
-    platform including iOS.  Never used as the first-choice path.
-  -->
-  <input
-    ref="nativePhotoInput"
-    type="file"
-    accept="image/*"
-    capture="user"
-    style="display: none"
-    @change="onNativePhotoSelected"
-  />
 </template>
 
 <style scoped>
@@ -2073,8 +1336,6 @@ watch(notificationCounter, () => {
   left: 0;
   width: 100%;
   height: 100%;
-  overflow: hidden;
-  border-radius: 8px;
 }
 
 .image-element {
@@ -2089,14 +1350,6 @@ watch(notificationCounter, () => {
   height: 100%;
 }
 
-/* Keep the live camera preview visually aligned with the normalized saved photo. */
-.camera-preview :deep(video) {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  -webkit-object-fit: cover;
-}
-
 .bg-topOut {
   background: rgb(39, 50, 56);
   background: linear-gradient(
@@ -2114,23 +1367,4 @@ watch(notificationCounter, () => {
     rgba(2, 169, 152, 1) 100%
   );
 }
-
-.icon-bounce {
-  animation: bounce 2s infinite;
-}
-
-.warning-banner {
-  border: 1px solid #ffcc80;
-  border-left: 4px solid #fb8c00;
-}
-
-@keyframes bounce {
-  0%,
-  100% {
-    transform: translateY(0);
-  }
-  50% {
-    transform: translateY(-10px);
-  }
-}
-</style>
+</style>
\ No newline at end of file
diff --git a/src/views/MainView.vue b/src/views/MainView.vue
index f278e96..edebfbc 100644
--- a/src/views/MainView.vue
+++ b/src/views/MainView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
+import { ref, onMounted } from 'vue'
 import { useQuasar } from 'quasar'
 import { useRouter } from 'vue-router'
 
@@ -178,32 +178,21 @@ const landingPageUrl = ref<string>(configParam.landingPageUrl)
 /** ฟังก์ชันเรียกข้อมูลผู้ใช่งาน*/
 async function fetchKeycloakPosition() {
   // เช็คว่ามีข้อมูลใน store อยู่แล้วหรือไม่ (จาก localStorage)
-  // จะช่วยลดจำนวนครั้งในการเรียก API และปรับปรุงประสิทธิภาพของแอปพลิเคชัน
-  // const existingData = positionKeycloakStore.dataPositionKeycloak
+  const existingData = positionKeycloakStore.dataPositionKeycloak
 
-  // if (existingData) {
-  //   // มีข้อมูลอยู่แล้ว ใช้ข้อมูลเดิม
+  if (existingData) {
+    // มีข้อมูลอยู่แล้ว ใช้ข้อมูลเดิม
+    privacyStore.modalPrivacy = !existingData.privacyCheckin
+    privacyStore.setAccepted(existingData.privacyCheckin)
 
-  //   // เช็คว่ามีข้อมูลสังกัด (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)
-
-  //   return
-  // }
+    //เช็คว่ามีรูปไหม ถ้ามีรูปเรียกข้อมูลรูป
+    if (existingData.avatarName) {
+      getImg(existingData.profileId, existingData.avatarName)
+    } else {
+      profileImg.value = avatar
+    }
+    return
+  }
 
   // ไม่มีข้อมูล ให้ fetch จาก API
   await http
@@ -225,24 +214,6 @@ 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)
@@ -251,7 +222,7 @@ async function fetchKeycloakPosition() {
       if (keycloakData.avatarName) {
         getImg(keycloakData.profileId, keycloakData.avatarName)
       } else {
-        positionKeycloakStore.setProfileImg(avatar)
+        profileImg.value = avatar
       }
     })
     .catch((err) => {
@@ -259,15 +230,12 @@ async function fetchKeycloakPosition() {
     })
 }
 
-const profileImg = computed({
-  get: () => positionKeycloakStore.profileImg,
-  set: (value) => positionKeycloakStore.setProfileImg(value),
-})
+const profileImg = ref<string>('')
 function getImg(id: string, pathName: string) {
   http
     .get(config.API.fileByFile('ทะเบียนประวัติ', 'โปรไฟล์', id, pathName))
     .then((res) => {
-      positionKeycloakStore.setProfileImg(res.data.downloadUrl)
+      profileImg.value = res.data.downloadUrl
     })
 }
 
diff --git a/src/views/MapView.vue b/src/views/MapView.vue
index 5f7edc9..33ebc58 100644
--- a/src/views/MapView.vue
+++ b/src/views/MapView.vue
@@ -133,19 +133,14 @@ const photoHeight = ref<number>(350)
 
 /** function เปิดกล้อง */
 async function openCamera() {
-  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, 'ไม่สามารถเปิดกล้องได้ กรุณาลองใหม่อีกครั้ง')
+  // change camera device
+  if (cameraIsOn.value) {
+    camera.value?.stop()
+  } else {
+    await camera.value?.start()
+    changeCamera()
   }
+  cameraIsOn.value = !cameraIsOn.value
 }
 
 /** change camera device */
@@ -157,49 +152,25 @@ async function changeCamera() {
 
 /** function ถ่ายรูป*/
 async function capturePhoto() {
-  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, 'ไม่สามารถถ่ายรูปได้ กรุณาลองใหม่อีกครั้ง')
-  }
+  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
 }
 
 /** function เปลี่ยนรูปภาพ*/
-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, 'ไม่สามารถเปิดกล้องได้ กรุณาลองใหม่อีกครั้ง')
-  }
+function refreshPhoto() {
+  img.value = undefined
+  camera.value?.start()
 }
 
 /** ref validate*/
@@ -364,8 +335,7 @@ onMounted(async () => {
                       :resolution="{ width: photoWidth, height: photoHeight }"
                       ref="camera"
                       :autoplay="false"
-                      :playsinline="true"
-                      :facingMode="'user'"
+                      :style="!img ? 'display: block' : 'display: none'"
                     />
 
                     <!-- แสดงรูปเมื่อกด capture -->
@@ -490,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 '
@@ -498,7 +468,7 @@ onMounted(async () => {
                       "
                     >
                       *หมายเหตุ คลิกลงเวลาเข้างานแล้วระบบจะลงเวลาทันที
-                    </p> -->
+                    </p>
                     <q-btn
                       :label="
                         stetusCheckin == true ? 'ลงเวลาเข้างาน' : 'ลงเวลาออกงาน'
@@ -599,12 +569,4 @@ 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>
diff --git a/src/views/NoPositionView.vue b/src/views/NoPositionView.vue
deleted file mode 100644
index 691d10a..0000000
--- a/src/views/NoPositionView.vue
+++ /dev/null
@@ -1,106 +0,0 @@
-<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>
diff --git a/src/views/login.vue b/src/views/login.vue
index df0725d..df02614 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.trim())
+  formdata.append('username', username.value)
   formdata.append('password', password.value)
 
   await axios
diff --git a/vite.config.js b/vite.config.js
index 8ed3c30..6d575e0 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', 'src/assets/markers/*.svg'],
+      includeAssets: ['icons/safari-pinned-tab.svg'],
       manifest: {
         name: 'HRMS-Checkin',
         short_name: 'HRMS Checkin',