CLAUDE.md

@@ -1,155 +0,0 @@
-# CLAUDE.md
-
-This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
-
-## Project Overview
-
-This is an HRMS (Human Resource Management System) check-in/check-out web application built for the Bangkok Metropolitan Administration (BMA). The application allows employees to record their work attendance using geolocation verification and camera features.
-
-**Tech Stack:**
-- Vue 3 with Composition API and TypeScript
-- Vite for build tooling
-- Quasar Framework for UI components
-- Pinia for state management
-- Vue Router for routing
-- Keycloak for authentication
-- ArcGIS API and Google Maps for location features
-- PWA capabilities with offline support
-- Docker deployment with nginx
-
-**Development Server:** Runs on port 3008
-
-## Common Commands
-
-```bash
-# Development
-npm run dev                    # Start dev server on port 3008
-
-# Building
-npm run build                  # Build for production
-npm run preview                # Preview production build on port 3008
-
-# Testing
-npm run test:unit              # Run unit tests with vitest
-npm run test:e2e               # Run e2e tests with cypress
-npm run test:e2e:dev           # Run cypress in dev mode
-
-# Code Quality
-npm run lint                   # Lint and auto-fix code
-npm run format                 # Format code with prettier
-npm run type-check             # TypeScript type checking
-
-# Docker
-docker buildx build --platform=linux/amd64 -f docker/Dockerfile . -t hrms-checkin:0.1
-```
-
-## Architecture
-
-### Directory Structure
-
-```
-src/
-├── api/               # API layer modules (checkin, history, message)
-├── components/        # Reusable Vue components
-├── composables/       # Vue composables (e.g., usePermissions)
-├── interface/         # TypeScript type definitions
-│   └── response/      # API response types
-├── plugins/           # Vue plugins (auth, http, keycloak)
-├── router/            # Vue Router configuration
-├── stores/            # Pinia stores for state management
-├── style/             # Global styles and Quasar variables
-├── utils/             # Utility functions
-└── views/             # Page-level Vue components
-```
-
-### Key Architecture Patterns
-
-**Authentication Flow:**
-- Uses Keycloak for SSO authentication
-- Tokens stored in cookies with `BMAHRISCKI_KEYCLOAK_IDENTITY` key
-- Auth state managed in `src/plugins/auth.ts`
-- Router guards enforce authentication on protected routes
-- 401 responses trigger automatic logout via axios interceptor
-
-**State Management:**
-- `stores/mixin.ts` - Global utilities (Thai date formatting, dialogs, loaders, error handling)
-- `stores/chekin.ts` - Check-in history and status management
-- `stores/privacy.ts` - Privacy consent management
-- `stores/positionKeycloak.ts` - User position/role data
-
-**API Layer:**
-- Base axios instance in `src/plugins/http.ts` with automatic token injection
-- API endpoints organized by feature in `src/api/`
-- Environment-specific API URLs configured in `src/api/index.ts`
-- Production API URL set via `VITE_API_URI_CONFIG` env variable
-
-**Routing:**
-- Main layout (`MainView`) wraps authenticated routes
-- Protected routes require `meta.Auth: true`
-- Auth check runs in router beforeEach guard
-- Public routes: `/login`, `/auth`, `/reset-password`, `/history`
-
-**Geolocation & Maps:**
-- ArcGIS JS API for advanced mapping features
-- Google Maps integration for location services
-- Camera integration for check-in photo verification
-- Privacy consent required before accessing camera/location
-
-**Date/Time Handling:**
-- Thai Buddhist calendar (BE) conversion (+543 years)
-- Thai month names (full and abbreviated)
-- `date-fns-tz` for timezone handling (Asia/Bangkok)
-- Fiscal year calculation (October start)
-
-### Component Conventions
-
-- Components use Quasar UI components (`q-btn`, `q-dialog`, etc.)
-- Thai language throughout the UI
-- Custom dialogs use `CustomDialog.vue` component
-- Loading states use Quasar's `QSpinnerCube`
-- Error dialogs prevent overlap with `activeErrorDialog` tracking
-
-### Localization
-
-- Quasar configured with Thai language (`quasar/lang/th`)
-- All UI text in Thai
-- Date formatting uses `date2Thai()` and `monthYear2Thai()` from mixin store
-- Status labels translated: ABSENT→'ขาดราชการ', NORMAL→'ปกติ', LATE→'สาย'
-
-### Environment Variables
-
-Required in `.env.production`:
-- `VITE_API_URI_CONFIG` - Production API base URL
-- `VITE_URL_SSO` - Keycloak SSO logout URL
-- `VITE_URL_USER` - User service URL for redirects
-
-### PWA Configuration
-
-- Auto-update registration with `vite-plugin-pwa`
-- Manifest: "HRMS-Checkin" / "HRMS Checkin"
-- Icons: 192x192 and 512x512 PNG
-- Service worker registered in `src/registerServiceWorker.ts`
-
-## Development Notes
-
-**When adding new features:**
-1. Create API functions in `src/api/`
-2. Define TypeScript interfaces in `src/interface/response/`
-3. Use Pinia stores for complex state, composables for reusable logic
-4. Follow Thai localization patterns for user-facing text
-5. Ensure privacy consent flow for camera/location features
-
-**When working with dates:**
-- Always use `date2Thai()` or `convertDateToAPI()` from mixin store
-- Dates stored in BE format (year + 543)
-- API expects `yyyy-MM-dd` or `yyyy-MM-dd HH:mm:ss` format
-
-**When handling errors:**
-- Use `messageError()` from mixin store for consistent error dialogs
-- 401 errors trigger automatic logout
-- Dialog overlap prevention built into error handling
-
-**When running tests:**
-- Unit tests use Vitest with jsdom environment
-- E2E tests use Cypress with baseUrl: `http://localhost:4173`
-- Test files follow pattern: `*.cy.{js,ts}` or `*.spec.{js,ts}`

src/components/DialogDebug.vue

@@ -305,9 +305,6 @@ function onClose() {
               </q-uploader>
             </div>
             <div class="col-12">
-              <div class="text-caption text-grey-8 q-mb-sm">
-                ผู้ดูแลระบบจะติดต่อกลับผ่านทางอีเมลที่ท่านระบุ กรุณาตรวจสอบอีเมลของท่านเป็นระยะ
-              </div>
               <div class="row col-12 q-col-gutter-sm">
                 <div class="col-xs-12 col-md-6 col-lg-6">
                   <q-input
@@ -318,11 +315,10 @@ function onClose() {
                     class="inputgreen"
                     hide-bottom-space
                     :rules="[
-                      (val: string) => !!val || 'กรุณากรอกที่อยู่อีเมล',
-                      (val: string) => {
-                        const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-                        return emailPattern.test(val) || 'กรุณากรอกที่อยู่อีเมลในรูปแบบที่ถูกต้อง';
-                      }
+                      () =>
+                        !!formData.email ||
+                        !!formData.phone ||
+                        'กรุณากรอกอีเมลหรือเบอร์โทรติดต่อกลับ',
                     ]"
                   />
                 </div>
@@ -334,6 +330,12 @@ function onClose() {
                     v-model="formData.phone"
                     class="inputgreen"
                     hide-bottom-space
+                    :rules="[
+                      () =>
+                        !!formData.email ||
+                        !!formData.phone ||
+                        'กรุณากรอกอีเมลหรือเบอร์โทรติดต่อกลับ',
+                    ]"
                   />
                 </div>
               </div>

src/views/HomeView.vue

@@ -187,9 +187,6 @@ const cameraIsOn = ref<boolean>(false)
 const img = ref<any>(undefined)
 const photoWidth = ref<number>(350)
 const photoHeight = ref<number>(350)
-const availableCameras = ref<any[]>([])
-const currentCameraIndex = ref<number>(0)
-const currentCameraType = ref<'front' | 'back' | 'unknown'>('unknown')
 
 const intervalId = ref<number | undefined>(undefined) // ต้องใช้ตัวแปรเก็บค่า interval
 
@@ -305,16 +302,6 @@ async function stopChecking() {
   }
 }
 
-function identifyCameraType(label: string): 'front' | 'back' | 'unknown' {
-  const lowerLabel = label.toLowerCase()
-  if (lowerLabel.includes('front') || lowerLabel.includes('user') || lowerLabel.includes('face')) {
-    return 'front'
-  } else if (lowerLabel.includes('back') || lowerLabel.includes('environment') || lowerLabel.includes('rear')) {
-    return 'back'
-  }
-  return 'unknown'
-}
-
 /** function เปิดกล้อง*/
 async function openCamera() {
   // เช็คสิทธิ์ privacy ก่อนเปิดกล้อง
@@ -328,11 +315,7 @@ async function openCamera() {
       await camera.value?.stop()
     } else {
       await camera.value?.start()
-      const devices: any = await camera.value?.devices(['videoinput'])
-      if (devices) {
-        availableCameras.value = devices
-        await changeCamera()
-      }
+      await changeCamera() // ต้องรอให้ start() เสร็จก่อน
     }
     cameraIsOn.value = !cameraIsOn.value
   } else {
@@ -346,59 +329,10 @@ async function openCamera() {
 }
 
 /** change camera device*/
-async function changeCamera(targetCameraType?: 'front' | 'back') {
-  try {
-    const devices: any = await camera.value?.devices(['videoinput'])
-
-    if (!devices || devices.length === 0) {
-      console.warn('No cameras found')
-      return
-    }
-
-    availableCameras.value = devices
-
-    if (devices.length === 1 || !targetCameraType) {
-      const device = devices[0]
-      await camera.value?.changeCamera(device.deviceId)
-      currentCameraIndex.value = 0
-      currentCameraType.value = identifyCameraType(device.label || '')
-      return
-    }
-
-    const matchingCameras = devices.filter((device: any) =>
-      identifyCameraType(device.label || '') === targetCameraType
-    )
-
-    if (matchingCameras.length > 0) {
-      const targetDevice = matchingCameras[0]
-      await camera.value?.changeCamera(targetDevice.deviceId)
-      currentCameraIndex.value = devices.indexOf(targetDevice)
-      currentCameraType.value = targetCameraType
-    } else {
-      const nextIndex = (currentCameraIndex.value + 1) % devices.length
-      const nextDevice = devices[nextIndex]
-      await camera.value?.changeCamera(nextDevice.deviceId)
-      currentCameraIndex.value = nextIndex
-      currentCameraType.value = identifyCameraType(nextDevice.label || '')
-    }
-  } catch (error) {
-    console.error('Error switching camera:', error)
-  }
-}
-
-/** switch camera device*/
-async function switchCamera() {
-  if (availableCameras.value.length <= 1) {
-    return
-  }
-
-  // สลับแค่ระหว่างกล้อง 2 ตัวแรก (กล้องหน้าและหลังหลัก)
-  const targetIndex = currentCameraIndex.value === 0 ? 1 : 0
-  const targetDevice = availableCameras.value[targetIndex]
-
-  await camera.value?.changeCamera(targetDevice.deviceId)
-  currentCameraIndex.value = targetIndex
-  currentCameraType.value = identifyCameraType(targetDevice.label || '')
+async function changeCamera() {
+  const devices: any = await camera.value?.devices(['videoinput'])
+  const device = await devices[0]
+  camera.value?.changeCamera(device.deviceId)
 }
 
 /** function ถ่ายรูป*/
@@ -825,16 +759,6 @@ watch(
                           v-if="$q.screen.gt.xs"
                           class="absolute-bottom-right q-ma-md"
                         >
-                          <q-btn
-                            v-if="availableCameras.length > 1 && img == null"
-                            round
-                            push
-                            icon="flip_camera_ios"
-                            size="sm"
-                            color="secondary"
-                            class="q-mr-sm"
-                            @click="switchCamera"
-                          />
                           <q-btn
                             v-if="img == null"
                             round
@@ -859,16 +783,6 @@ watch(
                             class="absolute-bottom text-subtitle2 text-center q-py-sm"
                             style="background: #00000021"
                           >
-                            <q-btn
-                              v-if="availableCameras.length > 1 && img == null"
-                              round
-                              icon="flip_camera_ios"
-                              size="16px"
-                              style="background: #424242; color: white"
-                              @click="switchCamera"
-                              unelevated
-                              class="q-mr-xs"
-                            />
                             <q-btn
                               round
                               v-if="img == null"
@@ -1369,4 +1283,4 @@ watch(
     rgba(2, 169, 152, 1) 100%
   );
 }
-</style>
+</style>