refactor: comment fetchKeycloakPosition existingData

# Please enter a commit message to explain why this merge is necessary,
# especially if it merges an updated upstream into a topic branch.
#
# Lines starting with '#' will be ignored, and an empty message aborts
# the commit.

.claude/agent-memory/hrms-checkin-expert/MEMORY.md

@@ -7,3 +7,8 @@
 ## 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

.claude/agent-memory/hrms-checkin-expert/issue_front_camera_preview_alignment.md

@@ -0,0 +1,11 @@
+---
+name: front_camera_preview_alignment
+description: HomeView inline camera flow should show a non-mirrored preview and keep the saved/uploaded image in the same orientation the user saw while shooting
+type: project
+---
+
+When fixing front-camera capture issues in `HomeView.vue`, keep the in-page preview and the final saved/uploaded image in the same non-mirrored orientation.
+
+**Why:** Users rejected flows where the live in-page preview looked mirrored or differed from the final image. The expected behavior is “what I see while shooting is what gets used.”
+
+**How to apply:** In the inline `simple-vue-camera` flow, avoid extra front-camera mirroring in either preview styling or snapshot normalization. Treat the in-page preview as the canonical orientation for `img`/`fileImg`.

.claude/agent-memory/hrms-checkin-expert/issue_ios16_inline_camera_white_preview.md

@@ -0,0 +1,11 @@
+---
+name: ios16-inline-camera-white-preview
+description: Safari iOS 16 inline preview can stay white when multiple simple-vue-camera instances mount and playback readiness is assumed too early
+type: project
+---
+
+In `HomeView.vue`, Safari on iOS 16.x can show a white in-page camera preview when more than one `simple-vue-camera` instance is mounted for responsive layouts and the app treats `camera.start()` as sufficient proof that the preview is rendering.
+
+**Why:** `simple-vue-camera` uses a hard-coded `id="video"` internally and does not explicitly call `video.play()` during `start()`. On mobile/xs, mounting both desktop and mobile camera components at once creates a fragile setup for Safari, where the active preview can remain white even though permission and stream startup succeeded.
+
+**How to apply:** Keep only the active responsive camera instance mounted in `HomeView.vue`, and after `camera.start()` explicitly prepare/check the underlying video element (`playsinline`, `muted`, `play()`, non-zero dimensions, ready state). If the preview still does not become render-ready, remount once and then fall back to native capture.

.claude/agent-memory/hrms-checkin-expert/issue_ios_native_camera_popup_control.md

@@ -0,0 +1,11 @@
+---
+name: ios_native_camera_popup_control
+description: iOS uses inline camera first (same as Android); native fallback triggers only after inline fails. The prior "native-first on iOS" approach was reverted per product requirement.
+type: project
+---
+
+In `HomeView.vue`, the inline camera is **always attempted first** on iOS (and every other platform).  The hidden `<input type="file" capture="user">` is only activated by `switchToNativePhotoCapture()` / `enableNativePhotoCaptureFallback()` after inline capture is proven to fail.
+
+**Why:** The product requirement is "use inline camera whenever the device supports inline capture; use native device capture only when inline is not supported or fails."  iOS Safari supports `getUserMedia` since iOS 14.3, so inline-first is viable.  A prior session hard-coded `useNativePhotoCapture = computed(() => isIOSDevice || preferNativePhotoCapture.value)`, bypassing inline on iOS entirely — that line was reverted.
+
+**How to apply:** `preferNativePhotoCapture` must start `false` on all devices.  Never seed it with `isIOSDevice`.  All failure paths (`openCamera` permission denied, `camera.start()` throw, invalid snapshot blob, invalid image on submit) already call `switchToNativePhotoCapture()` which sets `preferNativePhotoCapture = true` so subsequent taps go directly to native — covering the first-tap fallback automatically.

.claude/agent-memory/hrms-checkin-expert/issue_ios_native_photo_mirroring.md

@@ -0,0 +1,11 @@
+---
+name: ios_native_photo_mirroring
+description: Native photo capture on iOS in HomeView should not be horizontally mirrored during normalization
+type: project
+---
+
+For `HomeView.vue`, native photo capture on iOS should not apply horizontal mirroring during image normalization.
+
+**Why:** The iOS fallback uses the native still-photo picker, and the returned photo can already be in the correct orientation. Applying the same mirror correction used for other front-camera paths flips the image incorrectly on iOS.
+
+**How to apply:** Keep platform-specific normalization for native capture. Do not assume the iOS file-input photo path behaves the same as `simple-vue-camera` snapshots or Android fallback capture.

.claude/agent-memory/hrms-checkin-expert/project_active_camera_scope.md

@@ -0,0 +1,11 @@
+---
+name: Active camera investigation scope
+description: Current camera issue investigations should focus on HomeView.vue; the legacy Google Map MapView.vue flow is not in active use
+type: project
+---
+
+Current camera issue work should focus on `HomeView.vue`; do not investigate or modify the legacy Google Map `MapView.vue` flow for this issue.
+
+**Why:** The user clarified that `MapView.vue` is an older Google Map implementation from earlier work and is not the path currently used in production for this check-in flow.
+
+**How to apply:** For follow-up debugging or fixes related to the current camera/upload issue, scope analysis and implementation to `HomeView.vue` unless the user explicitly re-opens `MapView.vue`.

package.json

@@ -34,6 +34,7 @@
     "quasar": "^2.11.1",
     "register-service-worker": "^1.7.2",
     "simple-vue-camera": "^1.1.3",
+    "socket.io-client": "^4.8.3",
     "vite-plugin-pwa": "^0.16.7",
     "vue": "^3.4.15",
     "vue-router": "^4.1.6",

src/App.vue

@@ -1,5 +1,64 @@
+<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>
@@ -23,4 +82,69 @@ nav a {
 nav a.router-link-exact-active {
   color: #42b983;
 }
+
+.external-browser-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  background: rgba(0, 0, 0, 0.45);
+}
+
+.external-browser-card {
+  width: min(520px, 100%);
+  border-radius: 16px;
+  padding: 20px;
+  background: #ffffff;
+  text-align: left;
+  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.18);
+}
+
+.external-browser-card h2 {
+  margin: 0 0 10px;
+  font-size: 24px;
+  color: #0d3b66;
+}
+
+.external-browser-card p {
+  margin: 0 0 12px;
+  line-height: 1.5;
+}
+
+.external-browser-card ol {
+  margin: 0 0 16px;
+  padding-left: 20px;
+}
+
+.external-browser-actions {
+  display: flex;
+  gap: 10px;
+}
+
+.external-browser-actions button {
+  border: 0;
+  border-radius: 10px;
+  padding: 10px 14px;
+  font-size: 16px;
+  cursor: pointer;
+}
+
+.external-browser-actions .primary {
+  background: #1976d2;
+  color: #ffffff;
+}
+
+.external-browser-actions .secondary {
+  background: #edf2f7;
+  color: #1f2937;
+}
+
+.copy-success {
+  margin-top: 12px;
+  color: #0b7a3f;
+  font-weight: 600;
+}
 </style>

src/api/socket.ts

@@ -0,0 +1,7 @@
+import env from "./index";
+
+const socket = `${env.API_URI}/org-socket`;
+
+export default {
+  socket,
+};

src/app.config.ts

@@ -4,6 +4,7 @@
 import leave from '@/api/api.checkin'
 import history from '@/api/api.history'
 import message from '@/api/api.message'
+import socket from '@/api/socket'
 
 const API = {
   /**leave */
@@ -12,6 +13,7 @@ const API = {
   ...history,
   /**message */
   ...message,
+  ...socket,
 }
 
 export default {

src/components/AscGISMap.vue

@@ -163,8 +163,19 @@ function reattachAndResizeMap(retry = 0) {
       mapView.value.container = activeContainer
     }
 
-    mapView.value.resize()
+    // เรียก resize() อย่างปลอดภัยด้วยการตรวจสอบว่ามี method นี้หรือไม่
-    mapView.value.requestRender?.()
+    try {
+      if (typeof mapView.value.resize === 'function') {
+        mapView.value.resize()
+      }
+    } catch (error) {
+      console.warn('Map resize failed:', error)
+    }
+
+    if (typeof mapView.value.requestRender === 'function') {
+      mapView.value.requestRender?.()
+    }
+
     mapView.value
       .goTo(
         {
@@ -285,7 +296,11 @@ async function initializeMap() {
       geometry: userPoint,
       symbol: userSymbol,
     })
-    mapView.value.graphics.add(userGraphic)
+
+    // เพิ่มการตรวจสอบความปลอดภัยก่อนเข้าถึง graphics
+    if (mapView.value && mapView.value.graphics && !mapView.value.destroyed) {
+      mapView.value.graphics.add(userGraphic)
+    }
     // Get POI place ยิงไปขอที่ server ของกทม.ก่อน
     // await axios
     //   .get(
@@ -381,12 +396,22 @@ async function initializeMap() {
           geometry: poiPoint,
           symbol: poiSymbol,
         })
-        mapView.value.graphics.add(poiGraphic)
+
-        // อัปเดตการแสดงผลให้แสดงทั้งตำแหน่งของผู้ใช้และ POI
+        // เพิ่มการตรวจสอบความปลอดภัยก่อนเข้าถึง graphics และ goTo
-        mapView.value.goTo({
+        if (mapView.value && !mapView.value.destroyed) {
-          target: [userPoint, poiPoint],
+          if (mapView.value.graphics) {
-          zoom: zoomMap.value,
+            mapView.value.graphics.add(poiGraphic)
-        })
+          }
+          // อัปเดตการแสดงผลให้แสดงทั้งตำแหน่งของผู้ใช้และ POI
+          if (typeof mapView.value.goTo === 'function') {
+            mapView.value.goTo({
+              target: [userPoint, poiPoint],
+              zoom: zoomMap.value,
+            }).catch(() => {
+              // Ignore goTo errors
+            })
+          }
+        }
 
         updateLocation(latitude, longitude, poiPlaceName.value)
       })

src/components/PopupPrivacy.vue

@@ -16,41 +16,26 @@ const modal = defineModel<boolean>('modal', {
 
 // Privacy content data
 const privacyContent = {
-  title: 'การคุ้มครองข้อมูลส่วนบุคคล',
+  title: 'ประกาศความเป็นส่วนตัว',
   mainText:
-    'ระบบนี้มีการเก็บ และใช้ภาพถ่ายของท่าน เพื่อยืนยันตัวตนในการลงเวลาปฏิบัติราชการ ข้อมูลจะถูกใช้เฉพาะตามวัตถุประสงค์ของระบบ และจัดเก็บอย่างปลอดภัยตามกฎหมายคุ้มครองข้อมูลส่วนบุคคล (PDPA)',
+    'ประกาศความเป็นส่วนตัวสำหรับการลงเวลาปฏิบัติราชการผ่านระบบอิเล็กทรอนิกส์ในระบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร (BMA – HRMS)',
   warningText: '* หากท่านไม่กดยอมรับ อาจทำให้ไม่สามารถใช้งานระบบได้',
   detailIntro:
-    'ข้าพเจ้าตกลงให้กรุงเทพมหานครเก็บ ใช้ และประมวลผลข้อมูลส่วนบุคคลประเภทภาพถ่ายของข้าพเจ้า ซึ่งได้มาจากการใช้งานระบบลงเวลาปฏิบัติราชการอิเล็กทรอนิกส์ ของระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร (BMA - HRMS) ทั้งนี้ เพื่อวัตถุประสงค์ดังต่อไปนี้',
+    'กรุงเทพมหานครเก็บรวบรวมและใช้ข้อมูลส่วนบุคคลของท่าน ได้แก่ ข้อมูลวันและเวลาลงเวลาปฏิบัติราชการ พิกัดสถานที่ ณ ขณะลงเวลา ภาพถ่าย ณ ขณะลงเวลา ข้อมูลหน่วยงานหรือสถานที่ปฏิบัติงาน และข้อมูลทางเทคนิคที่จำเป็นต่อการใช้งานระบบ เพื่อวัตถุประสงค์ในการยืนยันการมาปฏิบัติราชการ ป้องกันการลงเวลาแทนกัน ตรวจสอบความถูกต้องของข้อมูล บริหารวันและเวลาปฏิบัติราชการ การลา การประเมินผลการปฏิบัติราชการ การพิจารณาเลื่อนเงินเดือน ตลอดจนการบริหารทรัพยากรบุคคลตามกฎหมาย กฎ ระเบียบ และหลักเกณฑ์ที่เกี่ยวข้อง',
-  purposes: {
+
-    title: 'วัตถุประสงค์การใช้ข้อมูล',
+  paragraphs: [
-    items: [
+    'การเก็บรวบรวมและใช้ข้อมูลดังกล่าวเป็นการดำเนินการโดยอาศัยฐานการปฏิบัติหน้าที่ในการดำเนินภารกิจเพื่อประโยชน์สาธารณะหรือการใช้อำนาจรัฐตามมาตรา 24 (4) และฐานการปฏิบัติตามกฎหมายของ ผู้ควบคุมข้อมูลส่วนบุคคลตามมาตรา 24 (6) แห่งพระราชบัญญัติคุ้มครองข้อมูลส่วนบุคคล พ.ศ. 2562 โดยมิได้อาศัยความยินยอมของเจ้าของข้อมูลส่วนบุคคล',
-      'เพื่อยืนยันตัวตนของผู้ปฏิบัติงานในการบันทึกเวลาเข้า-ออกการปฏิบัติราชการ',
+    'ระบบจะเข้าถึงข้อมูลพิกัดและกล้องถ่ายภาพเฉพาะในขณะที่ท่านดำเนินการลงเวลาเข้าและออกจากการปฏิบัติราชการเท่านั้น โดยไม่มีการติดตามหรือบันทึกพิกัดของท่านอย่างต่อเนื่องภายหลังจากการลงเวลาเสร็จสิ้น',
-      'เพื่อใช้เป็นหลักฐานประกอบการบริหารงานด้านทรัพยากรบุคคล การจ่ายค่าตอบแทน และการกำกับ ดูแลการปฏิบัติราชการ',
+    'กรุงเทพมหานครจะเก็บรักษาข้อมูลภาพถ่าย พิกัด ณ ขณะลงเวลา และข้อมูลรายละเอียดการลงเวลาไว้ตามรอบการประเมินผลการปฏิบัติราชการเป็นระยะเวลาไม่เกิน 6 เดือนนับแต่วันที่เก็บรวบรวม หรือจนกว่าการตรวจสอบข้อมูลในรอบการประเมินนั้นจะแล้วเสร็จ แล้วแต่ระยะเวลาใดจะยาวกว่า เมื่อครบกำหนด กรุงเทพมหานครจะลบ ทำลาย หรือทำให้ข้อมูลดังกล่าวไม่สามารถระบุตัวบุคคลได้ตามวิธีการและมาตรการรักษาความมั่นคงปลอดภัยที่กำหนด',
-      'เพื่อรักษาความถูกต้อง โปร่งใส และป้องกันการทุจริตในการบันทึกเวลาการปฏิบัติงาน',
+    'กรณีข้อมูลดังกล่าวเกี่ยวข้องกับการร้องเรียน การโต้แย้ง การตรวจสอบ การดำเนินการทางวินัยการอุทธรณ์ การดำเนินคดี หรือการใช้สิทธิเรียกร้องตามกฎหมาย กรุงเทพมหานครอาจเก็บรักษาข้อมูลไว้เกินกว่า 6 เดือนได้เท่าที่จำเป็น จนกว่ากระบวนการดังกล่าวจะถึงที่สุดหรือพ้นระยะเวลาที่กฎหมายกำหนด',
-    ],
+    'ทั้งนี้ ข้อมูลสรุปเกี่ยวกับวันเวลาปฏิบัติราชการ การลา การมาสาย การขาดราชการ ผลการประเมินผลการปฏิบัติราชการ และผลการพิจารณาเลื่อนเงินเดือน ซึ่งเป็นส่วนหนึ่งของทะเบียนประวัติหรือเอกสารด้านการบริหารทรัพยากรบุคคล อาจได้รับการเก็บรักษาตามระยะเวลาที่กฎหมาย ระเบียบ หลักเกณฑ์งานบุคคล และระเบียบงานสารบรรณกำหนด ซึ่งอาจมีระยะเวลาแตกต่างจากข้อมูลภาพถ่ายและพิกัดที่ใช้ประกอบการลงเวลา',
-  },
+    'กรุงเทพมหานครจะจำกัดการเข้าถึงข้อมูลเฉพาะเจ้าหน้าที่หรือผู้ปฏิบัติงานที่มีหน้าที่เกี่ยวข้อง และจะไม่นำข้อมูลไปใช้หรือเปิดเผยเพื่อวัตถุประสงค์อื่นที่ไม่สอดคล้องกับวัตถุประสงค์ที่ได้แจ้งไว้ เว้นแต่เป็นกรณีที่กฎหมายกำหนดหรืออนุญาตให้ดำเนินการได้',
-  understanding: {
+    'ท่านมีสิทธิขอเข้าถึง ขอรับสำเนา ขอแก้ไข ขอคัดค้าน ขอระงับการใช้ หรือขอให้ลบข้อมูลส่วนบุคคลของท่านได้ตามหลักเกณฑ์และเงื่อนไขที่พระราชบัญญัติคุ้มครองข้อมูลส่วนบุคคล พ.ศ. 2562 กำหนด โดยการใช้สิทธิดังกล่าวไม่กระทบต่อหน้าที่ในการลงเวลาปฏิบัติราชการและการปฏิบัติตามกฎหมาย กฎ ระเบียบ และหลักเกณฑ์ของกรุงเทพมหานคร',
-    items: [
+  ],
-      'การเก็บ ใช้ และประมวลผลข้อมูลส่วนบุคคลดังกล่าว จะดำเนินการ เท่าที่จำเป็นตามวัตถุประสงค์ที่ระบุไว้เท่านั้น',
-      'หน่วยงานจะจัดให้มีมาตรการรักษาความมั่นคงปลอดภัยของข้อมูลส่วนบุคคล ตามที่กฎหมายกำหนด',
-      'ข้อมูลส่วนบุคคลของข้าพเจ้าจะถูกเก็บรักษา ตามระยะเวลาที่จำเป็น ต่อการปฏิบัติงานหรือเป็นไปตามที่กฎหมายกำหนด',
-    ],
-  },
-  rights: {
-    title:
-      'ข้าพเจ้าทราบถึง สิทธิของเจ้าของข้อมูลส่วนบุคคล ตามพระราชบัญญัติคุ้มครองข้อมูลส่วนบุคคล พ.ศ. ๒๕๖๒ ได้แก่',
-    items: [
-      'สิทธิขอเข้าถึงและขอรับสำเนาข้อมูล',
-      'สิทธิขอแก้ไขข้อมูลให้ถูกต้อง',
-      'สิทธิขอถอนความยินยอม (ทั้งนี้ การถอนความยินยอมอาจส่งผลต่อการใช้งานระบบลงเวลาการปฏิบัติราชการ)',
-      'สิทธิร้องเรียนต่อคณะกรรมการคุ้มครองข้อมูลส่วนบุคคล',
-    ],
-  },
   consentText:
-    'ข้าพเจ้าได้อ่านและเข้าใจรายละเอียดทั้งหมดแล้ว และยินยอมให้เก็บ ใช้ และประมวลผลข้อมูลส่วนบุคคล ประเภทภาพถ่ายของข้าพเจ้า ตามที่ระบุไว้ข้างต้นโดยสมัครใจ',
+    'ข้าพเจ้าได้รับทราบประกาศความเป็นส่วนตัวเกี่ยวกับการลงเวลาปฏิบัติราชการผ่านระบบอิเล็กทรอนิกส์แล้ว',
   buttons: {
-    accept: 'ยอมรับ',
+    accept: 'รับทราบและดำเนินการต่อ',
     decline: 'ไม่ยอมรับ',
   },
 }
@@ -97,7 +82,8 @@ const toggleDetails = () => {
 
 const checkIfScrollable = () => {
   nextTick(() => {
-    const container = (scrollContainer.value as any)?.$el || scrollContainer.value
+    const container =
+      (scrollContainer.value as any)?.$el || scrollContainer.value
     if (container) {
       const { scrollHeight, clientHeight } = container
 
@@ -167,50 +153,18 @@ const checkIfScrollable = () => {
             {{ privacyContent.detailIntro }}
           </p>
 
-          <!-- วัตถุประสงค์ -->
+          <!-- เนื้อหาประกาศความเป็นส่วนตัว -->
           <div class="q-mb-md">
-            <ol class="q-pl-lg list-style">
+            <p
-              <li
+              v-for="(paragraph, index) in privacyContent.paragraphs"
-                v-for="(item, index) in privacyContent.purposes.items"
+              :key="`p-${index}`"
-                :key="`p-${index}`"
+              class="q-mb-sm"
-                class="q-mb-xs"
+            >
-              >
+              {{ paragraph }}
-                {{ item }}
-              </li>
-            </ol>
-          </div>
-
-          <!-- ข้าพเจ้าทราบและเข้าใจว่า -->
-          <div class="q-mx-sm">
-            ข้าพเจ้าทราบและเข้าใจว่า
-            <ul class="q-mt-sm">
-              <li
-                v-for="(item, index) in privacyContent.understanding.items"
-                :key="`u-${index}`"
-                class="q-mb-xs"
-              >
-                {{ item }}
-              </li>
-            </ul>
-          </div>
-
-          <!-- สิทธิ์ของเจ้าของข้อมูล -->
-          <div>
-            <p>
-              {{ privacyContent.rights.title }}
             </p>
-            <ul>
-              <li
-                v-for="(item, index) in privacyContent.rights.items"
-                :key="`r-${index}`"
-                class="q-mb-xs"
-              >
-                {{ item }}
-              </li>
-            </ul>
-
-            <p class="consent-text q-mt-lg">{{ privacyContent.consentText }}</p>
           </div>
+
+          <p class="consent-text q-mt-lg">{{ privacyContent.consentText }}</p>
         </div>
       </q-card-section>
 

src/components/TableHistory.vue

@@ -13,20 +13,15 @@ import SkeletonTable from '@/components/SkeletonTable.vue' // skeleton table
 const { date2Thai } = useCounterMixin()
 const stores = useCheckIn()
 
+const page = defineModel<number>('page', { required: true })
+const pageSize = defineModel<number>('pageSize', { required: true })
+
 /** props ข้อมูลจาก Components Page HistoryView */
 const props = defineProps({
   paging: {
     type: Boolean,
     default: false,
   },
-  pageSize: {
-    type: Number,
-    default: 10,
-  },
-  page: {
-    type: Number,
-    default: 1,
-  },
   maxPage: {
     type: Number,
     default: 1,
@@ -194,31 +189,20 @@ const visibleColumns = ref<string[]>([
   'checkOutLocation',
   'checkOutStatus',
 ])
-
+const pagination = ref({
-const currentPage = ref<number>(1) //หน้าปัจจุบัน
+  page: page.value,
-// Pagination - initial pagination
+  rowsPerPage: pageSize.value,
-const initialPagination = ref<Pagination>({
-  sortBy: null,
-  descending: false,
-  page: 1,
-  rowsPerPage: props.pageSize, // set ตาม page หลักส่งมา
 })
 
 // Pagination - update rowsPerPage
 async function updatePagination(newPagination: Pagination) {
-  initialPagination.value = newPagination
+  pageSize.value = newPagination.rowsPerPage
-  currentPage.value = 1 // set current page เป็น 1 เสมอเมื่อเปลี่ยน per row
 }
 
 async function filterFn() {
-  // ส่งอีเวนต์ 'update:change-page' เมื่อหน้าเปลี่ยนแปลง
+  emit('update:change-page', 1, pageSize.value, keyword.value)
-  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>() // ข้อมูลการลงเวลา
@@ -276,17 +260,15 @@ function onClickOpenPopupRejrct(data: DataCheckIn) {
   }
 }
 
-/** watch currentPage และ rowsPerPage*/
+function onUpdatePage(val: number) {
+  emit('update:change-page', val, pageSize.value, keyword.value)
+}
+
+/** watch pageSize*/
 watch(
-  [() => currentPage.value, () => initialPagination.value.rowsPerPage],
+  () => pageSize.value,
   () => {
-    // ส่งอีเวนต์ 'update:change-page' เมื่อหน้าเปลี่ยนแปลง
+    emit('update:change-page', 1, pageSize.value, keyword.value)
-    emit(
-      'update:change-page',
-      currentPage.value,
-      initialPagination.value.rowsPerPage,
-      keyword.value
-    )
   }
 )
 </script>
@@ -340,10 +322,10 @@ watch(
     v-model:selected="selected"
     :virtual-scroll-sticky-size-start="48"
     :style="$q.screen.gt.xs ? 'max-height: 64vh' : ''"
-    :rows-per-page-options="[10, 25, 50, 100]"
+    :rows-per-page-options="[1, 10, 25, 50, 100]"
     :grid="$q.screen.gt.xs ? false : true"
-    :pagination="initialPagination"
     @update:pagination="updatePagination"
+    v-model:pagination="pagination"
   >
     <template v-slot:header="props">
       <q-tr :props="props">
@@ -476,10 +458,11 @@ watch(
         </q-card>
       </div>
     </template>
+
     <template v-slot:pagination>
       ทั้งหมด {{ props.total }} รายการ
       <q-pagination
-        v-model="currentPage"
+        v-model="page"
         active-color="primary"
         color="dark"
         :max-pages="5"
@@ -487,6 +470,7 @@ watch(
         boundary-links
         direction-links
         :max="Number(props.maxPage)"
+        @update:model-value="onUpdatePage"
       ></q-pagination>
     </template>
   </q-table>

src/composables/usePermissions.ts

@@ -1,52 +1,171 @@
-import { useQuasar } from 'quasar'
+import { onBeforeUnmount, ref } from 'vue'
 import { usePrivacyStore } from '@/stores/privacy'
 
+type BrowserPermissionState = PermissionState | 'unsupported'
+
+type PermissionQueryName = 'camera' | 'geolocation'
+
 export function usePermissions() {
-  const $q = useQuasar()
   const privacyStore = usePrivacyStore()
+  const cameraPermissionState = ref<BrowserPermissionState>('prompt')
+  const locationPermissionState = ref<BrowserPermissionState>('prompt')
 
-  // const checkCameraPermission = (): boolean => {
+  let cameraPermissionStatus: PermissionStatus | null = null
-  //   if (!privacyStore.isAccepted) {
+  let locationPermissionStatus: PermissionStatus | null = null
-  //     privacyStore.modalPrivacy = true
-  //     $q.notify({
-  //       type: 'warning',
-  //       message: 'กรุณายอมรับนโยบายคุ้มครองข้อมูลส่วนบุคคลก่อนใช้งานกล้อง',
-  //       position: 'top',
-  //     })
-  //     return false
-  //   }
-  //   return true
-  // }
 
-  // const checkLocationPermission = (): boolean => {
+  const isPermissionsApiSupported = () =>
-  //   if (!privacyStore.isAccepted) {
+    typeof navigator !== 'undefined' && 'permissions' in navigator
-  //     privacyStore.modalPrivacy = true
+
-  //     $q.notify({
+  const setPermissionState = (
-  //       type: 'warning',
+    target: typeof cameraPermissionState | typeof locationPermissionState,
-  //       message: 'กรุณายอมรับนโยบายคุ้มครองข้อมูลส่วนบุคคลก่อนใช้งานแผนที่',
+    state: BrowserPermissionState
-  //       position: 'top',
+  ) => {
-  //     })
+    target.value = state
-  //     return false
+  }
-  //   }
+
-  //   return true
+  const setPermissionChangeListener = (
-  // }
+    name: PermissionQueryName,
+    status: PermissionStatus
+  ) => {
+    status.onchange = () => {
+      const target =
+        name === 'camera' ? cameraPermissionState : locationPermissionState
+      setPermissionState(target, status.state)
+    }
+  }
+
+  async function queryPermissionState(name: PermissionQueryName) {
+    if (!isPermissionsApiSupported()) {
+      return null
+    }
+
+    try {
+      return await navigator.permissions.query({ name } as PermissionDescriptor)
+    } catch (error) {
+      return null
+    }
+  }
+
+  async function syncPermissionState(name: PermissionQueryName) {
+    const target =
+      name === 'camera' ? cameraPermissionState : locationPermissionState
+    const previousStatus =
+      name === 'camera' ? cameraPermissionStatus : locationPermissionStatus
+
+    if (previousStatus) {
+      previousStatus.onchange = null
+    }
+
+    const status = await queryPermissionState(name)
+    if (!status) {
+      if (target.value === 'prompt') {
+        setPermissionState(target, 'unsupported')
+      }
+      return
+    }
+
+    if (name === 'camera') {
+      cameraPermissionStatus = status
+    } else {
+      locationPermissionStatus = status
+    }
+
+    setPermissionState(target, status.state)
+    setPermissionChangeListener(name, status)
+  }
+
+  async function syncPermissionStates() {
+    await Promise.all([
+      syncPermissionState('camera'),
+      syncPermissionState('geolocation'),
+    ])
+  }
 
   const checkPrivacyAccepted = (): boolean => {
     if (!privacyStore.isAccepted) {
       privacyStore.modalPrivacy = true
-      // $q.notify({
-      //   type: 'warning',
-      //   message: 'กรุณายอมรับนโยบายคุ้มครองข้อมูลส่วนบุคคลก่อนใช้งาน',
-      //   position: 'center',
-      // })
       return false
     }
     return true
   }
 
+  async function requestCameraPermission() {
+    if (!checkPrivacyAccepted()) {
+      return false
+    }
+
+    if (cameraPermissionState.value === 'granted') {
+      return true
+    }
+
+    if (!navigator.mediaDevices?.getUserMedia) {
+      setPermissionState(cameraPermissionState, 'unsupported')
+      return false
+    }
+
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({
+        video: { facingMode: 'user' },
+        audio: false,
+      })
+
+      stream.getTracks().forEach((track) => track.stop())
+      setPermissionState(cameraPermissionState, 'granted')
+      return true
+    } catch (error) {
+      setPermissionState(cameraPermissionState, 'denied')
+      return false
+    } finally {
+      await syncPermissionState('camera')
+    }
+  }
+
+  async function requestLocationPermission() {
+    if (!checkPrivacyAccepted()) {
+      return false
+    }
+
+    if (locationPermissionState.value === 'granted') {
+      return true
+    }
+
+    if (!navigator.geolocation) {
+      setPermissionState(locationPermissionState, 'unsupported')
+      return false
+    }
+
+    return new Promise<boolean>((resolve) => {
+      navigator.geolocation.getCurrentPosition(
+        async () => {
+          setPermissionState(locationPermissionState, 'granted')
+          await syncPermissionState('geolocation')
+          resolve(true)
+        },
+        async () => {
+          setPermissionState(locationPermissionState, 'denied')
+          await syncPermissionState('geolocation')
+          resolve(false)
+        }
+      )
+    })
+  }
+
+  onBeforeUnmount(() => {
+    if (cameraPermissionStatus) {
+      cameraPermissionStatus.onchange = null
+    }
+
+    if (locationPermissionStatus) {
+      locationPermissionStatus.onchange = null
+    }
+  })
+
   return {
-    // checkCameraPermission,
+    cameraPermissionState,
-    // checkLocationPermission,
+    locationPermissionState,
     checkPrivacyAccepted,
+    syncPermissionStates,
+    requestCameraPermission,
+    requestLocationPermission,
   }
 }

src/interface/index/Main.ts

@@ -29,7 +29,7 @@ interface Pagination {
   sortBy: string | null
   descending: boolean
   page: number
-  rowsPerPage: number | undefined
+  rowsPerPage: number
 }
 interface DataCheckIn {
   checkInDate: string

src/main.ts

@@ -12,6 +12,9 @@ import 'quasar/src/css/index.sass'
 import th from 'quasar/lang/th'
 
 import http from '@/plugins/http'
+import { forceOpenInExternalBrowser } from '@/utils/forceExternalBrowser'
+
+forceOpenInExternalBrowser()
 
 const app = createApp(App)
 const pinia = createPinia()

src/stores/socket.ts

@@ -0,0 +1,101 @@
+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 }
+})

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
+    max-width: 200px
-  white-space: nowrap
+    white-space: nowrap
-  overflow: hidden
+    overflow: hidden
-  text-overflow: ellipsis
+    text-overflow: ellipsis
 
 .table_ellipsis:hover
-  word-wrap: break-word
+    word-wrap: break-word
-  overflow: visible
+    overflow: visible
-  white-space: normal
+    white-space: normal
 
 .table_ellipsis2
-  max-width: 25vw
+    max-width: 25vw
-  white-space: nowrap
+    white-space: nowrap
-  overflow: hidden
+    overflow: hidden
-  text-overflow: ellipsis
+    text-overflow: ellipsis
 
 .table_ellipsis2:hover
-  word-wrap: break-word
+    word-wrap: break-word
-  overflow: visible
+    overflow: visible
-  white-space: normal
+    white-space: normal
-  transition: width 2s
+    transition: width 2s
 
 $muti-tab: #87d4cc
 .text-muti-tab
@@ -100,7 +100,6 @@ $muti-tab: #87d4cc
 .bg-muti-tab
     background: $muti-tab !important
 
-    
 /* editor */
 
 .q-editor
@@ -109,26 +108,25 @@ $muti-tab: #87d4cc
     font-weight: 400
 
 .q-editor h1, .q-menu h1
-  font-size: 1.5rem
+    font-size: 1.5rem
-  line-height: 2rem
+    line-height: 2rem
-  font-weight: 400
+    font-weight: 400
-  margin-block-start: 0em
+    margin-block-start: 0em
-  margin-block-end: 0em
+    margin-block-end: 0em
 
 .q-editor h2,  .q-menu h2
-  font-size: 1.25rem
+    font-size: 1.25rem
-  line-height: 1.5rem
+    line-height: 1.5rem
-  font-weight: 400
+    font-weight: 400
-  margin-block-start: 0em
+    margin-block-start: 0em
-  margin-block-end: 0em
+    margin-block-end: 0em
-
 
 .q-editor h3, .q-menu h3
-  font-size: 1.1rem
+    font-size: 1.1rem
-  line-height: 1.5rem
+    line-height: 1.5rem
-  font-weight: 400
+    font-weight: 400
-  margin-block-start: 0em
+    margin-block-start: 0em
-  margin-block-end: 0em
+    margin-block-end: 0em
 
 .q-editor p, .q-menu p
     margin: 0
@@ -136,4 +134,7 @@ $muti-tab: #87d4cc
 /* q-tree */
 
 .q-tree
-  color: #c8d3db
+    color: #c8d3db
+
+.custom-notification-top
+    margin-top: 180px !important

src/utils/forceExternalBrowser.ts

@@ -0,0 +1,57 @@
+const EXTERNAL_BROWSER_QUERY_KEY = 'openExternalBrowser'
+
+const isLineBrowser = (userAgent: string) => /Line/i.test(userAgent)
+
+const isAndroid = (userAgent: string) => /Android/i.test(userAgent)
+
+const isIOS = (userAgent: string) => /iPhone|iPad|iPod/i.test(userAgent)
+
+const hasExternalRedirectFlag = () => {
+  const params = new URLSearchParams(window.location.search)
+  return params.get(EXTERNAL_BROWSER_QUERY_KEY) === '1'
+}
+
+const buildIOSUrlWithFlag = () => {
+  const url = new URL(window.location.href)
+  url.searchParams.set(EXTERNAL_BROWSER_QUERY_KEY, '1')
+  return url.toString()
+}
+
+const buildUrlWithoutFlag = () => {
+  const url = new URL(window.location.href)
+  url.searchParams.delete(EXTERNAL_BROWSER_QUERY_KEY)
+  return url.toString()
+}
+
+const buildAndroidIntentUrl = () => {
+  const currentUrl = window.location.href
+  const strippedUrl = currentUrl.replace(/^https?:\/\//i, '')
+  return `intent://${strippedUrl}#Intent;scheme=https;package=com.android.chrome;end`
+}
+
+export const forceOpenInExternalBrowser = () => {
+  const userAgent = navigator.userAgent || ''
+
+  // Prevent redirect loops and only run in LINE browser.
+  if (!isLineBrowser(userAgent) || hasExternalRedirectFlag()) {
+    return
+  }
+
+  if (isAndroid(userAgent)) {
+    window.location.replace(buildAndroidIntentUrl())
+    return
+  }
+
+  if (isIOS(userAgent)) {
+    window.location.replace(buildIOSUrlWithFlag())
+  }
+}
+
+export const shouldShowIOSLineFallback = () => {
+  const userAgent = navigator.userAgent || ''
+  return (
+    isLineBrowser(userAgent) && isIOS(userAgent) && hasExternalRedirectFlag()
+  )
+}
+
+export const getExternalBrowserUrl = () => buildUrlWithoutFlag()

src/views/HistoryView.vue

@@ -115,6 +115,7 @@ async function fetchlistTime() {
 async function updateYear(y: number, m: number) {
   stores.tab === 'history' ? (year.value = y) : (year2.value = y)
   month.value = m
+  page.value = 1 // รีเซ็ตหน้าเป็นหน้าแรกเมื่อปีหรือเดือนเปลี่ยนแปลง
   await functionFetch() // เรียกใช้งานฟังก์ชัน functionFetch เพื่อดึงข้อมูลใหม่
 }
 
@@ -177,9 +178,9 @@ watch(
               />
               <TableHistory
                 :fetch-data="functionFetch"
-                :page-size="pageSize"
+                v-model:page-size="pageSize"
                 :total="total"
-                :page="page"
+                v-model:page="page"
                 :paging="true"
                 @update:change-page="changePage"
                 :max-page="maxPage"
@@ -196,9 +197,9 @@ watch(
               />
               <TableHistory
                 :fetch-data="functionFetch"
-                :page-size="pageSize"
+                v-model:page-size="pageSize"
                 :total="total"
-                :page="page"
+                v-model:page="page"
                 :paging="true"
                 @update:change-page="changePage"
                 :max-page="maxPage"

src/views/MainView.vue

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

src/views/MapView.vue

@@ -133,14 +133,19 @@ const photoHeight = ref<number>(350)
 
 /** function เปิดกล้อง */
 async function openCamera() {
-  // change camera device
+  try {
-  if (cameraIsOn.value) {
+    // change camera device
-    camera.value?.stop()
+    if (cameraIsOn.value) {
-  } else {
+      camera.value?.stop()
-    await camera.value?.start()
+    } else {
-    changeCamera()
+      await camera.value?.start()
+      changeCamera()
+    }
+    cameraIsOn.value = !cameraIsOn.value
+  } catch (error) {
+    console.error('Error opening camera:', error)
+    messageError($q, error, 'ไม่สามารถเปิดกล้องได้ กรุณาลองใหม่อีกครั้ง')
   }
-  cameraIsOn.value = !cameraIsOn.value
 }
 
 /** change camera device */
@@ -152,25 +157,49 @@ async function changeCamera() {
 
 /** function ถ่ายรูป*/
 async function capturePhoto() {
-  const imageBlob: any = await camera.value?.snapshot(
+  try {
-    { width: photoWidth.value, height: photoHeight.value },
+    const imageBlob: any = await camera.value?.snapshot(
-    'image/png',
+      { width: photoWidth.value, height: photoHeight.value },
-    0.5
+      'image/jpeg',
-  )
+      0.8
-  const fileName = 'photo.png'
+    )
-  //ไฟล์รูป
+    if (!imageBlob) {
-  const file = new File([imageBlob], fileName, { type: 'image/png' })
+      messageError($q, '', 'ไม่สามารถถ่ายรูปได้ กรุณาลองใหม่อีกครั้ง')
-  fileImg.value = file
+      return
-  //แสดงรูป
+    }
-  camera.value?.stop()
+    const fileName = `photo_${Date.now()}.jpg`
-  const url = URL.createObjectURL(imageBlob)
+    //ไฟล์รูป
-  img.value = url
+    const file = new File([imageBlob], fileName, { type: 'image/jpeg' })
+    fileImg.value = file
+
+    // ยกเลิก URL เก่าก่อนสร้างใหม่ (ป้องกัน memory leak)
+    if (img.value) {
+      URL.revokeObjectURL(img.value)
+    }
+
+    //แสดงรูป
+    camera.value?.stop()
+    const url = URL.createObjectURL(imageBlob)
+    img.value = url
+  } catch (error) {
+    console.error('Error capturing photo:', error)
+    messageError($q, error, 'ไม่สามารถถ่ายรูปได้ กรุณาลองใหม่อีกครั้ง')
+  }
 }
 
 /** function เปลี่ยนรูปภาพ*/
-function refreshPhoto() {
+async function refreshPhoto() {
-  img.value = undefined
+  try {
-  camera.value?.start()
+    // ยกเลิก URL เก่า (ป้องกัน memory leak)
+    if (img.value) {
+      URL.revokeObjectURL(img.value)
+      img.value = undefined
+    }
+    await camera.value?.start()
+  } catch (error) {
+    console.error('Error refreshing photo:', error)
+    messageError($q, error, 'ไม่สามารถเปิดกล้องได้ กรุณาลองใหม่อีกครั้ง')
+  }
 }
 
 /** ref validate*/
@@ -335,7 +364,8 @@ onMounted(async () => {
                       :resolution="{ width: photoWidth, height: photoHeight }"
                       ref="camera"
                       :autoplay="false"
-                      :style="!img ? 'display: block' : 'display: none'"
+                      :playsinline="true"
+                      :facingMode="'user'"
                     />
 
                     <!-- แสดงรูปเมื่อกด capture -->
@@ -569,4 +599,12 @@ onMounted(async () => {
   width: 100%;
   height: 100%;
 }
+
+/* iOS-specific video fixes */
+.card-container video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  -webkit-object-fit: cover;
+}
 </style>

src/views/login.vue

@@ -20,7 +20,7 @@ const password = ref<string>('')
 async function onSubmit() {
   showLoader()
   const formdata = new URLSearchParams()
-  formdata.append('username', username.value)
+  formdata.append('username', username.value.trim())
   formdata.append('password', password.value)
 
   await axios