From 487a6b520ec8dc3ce60e5add2d2a5cec4a18586c Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Mon, 27 Apr 2026 19:21:23 +0700
Subject: [PATCH] refactor code & fixed location

---
 .claude/agents/hrms-checkin-expert.md | 234 ++++++++++++++++++++++++++
 CLAUDE.md                             |  32 +++-
 docker/entrypoint.sh                  |   2 +
 package.json                          |   1 +
 src/api/api.checkin.ts                |   3 +-
 src/components/AscGISMap.vue          |  45 +++--
 src/components/FormTime.vue           |   7 +-
 src/components/MapCheckin.vue         |  42 ++++-
 src/components/PopUp.vue              |   2 +-
 src/components/PopupPrivacy.vue       |  10 +-
 src/components/TableHistory.vue       |  20 +--
 src/components/ToolBar.vue            |  10 +-
 src/interface/keycloak-position.ts    |  29 ++++
 src/main.ts                           |   2 +
 src/plugins/http.ts                   |   3 +-
 src/plugins/keycloak.ts               |   2 +
 src/router/index.ts                   |  16 +-
 src/stores/{chekin.ts => checkin.ts}  |   2 +-
 src/stores/positionKeycloak.ts        | 119 ++++++-------
 src/views/HistoryView.vue             |   6 +-
 src/views/HomeView.vue                |  48 +++---
 src/views/MainView.vue                |  50 +++++-
 tests/utils.ts                        |  26 +++
 23 files changed, 566 insertions(+), 145 deletions(-)
 create mode 100644 .claude/agents/hrms-checkin-expert.md
 create mode 100644 src/interface/keycloak-position.ts
 rename src/stores/{chekin.ts => checkin.ts} (98%)
 create mode 100644 tests/utils.ts

diff --git a/.claude/agents/hrms-checkin-expert.md b/.claude/agents/hrms-checkin-expert.md
new file mode 100644
index 0000000..0e771b6
--- /dev/null
+++ b/.claude/agents/hrms-checkin-expert.md
@@ -0,0 +1,234 @@
+---
+name: "hrms-checkin-expert"
+description: "Use this agent when implementing or modifying check-in/check-out functionality in the HRMS application. This includes:\\n\\n<example>\\nContext: User is developing a new check-in validation feature.\\nuser: \"I need to add validation to prevent duplicate check-ins within the same hour\"\\nassistant: \"I'll use the hrms-checkin-expert agent to implement this validation following best practices.\"\\n<commentary>\\nSince this is core check-in functionality that requires careful consideration of edge cases and performance, the specialized agent should handle it.\\n</commentary>\\n</example>\\n\\n<example>\\nContext: User is refactoring the geolocation verification logic.\\nuser: \"The location verification is taking too long. Can you optimize it?\"\\nassistant: \"Let me use the hrms-checkin-expert agent to analyze and optimize the geolocation verification performance.\"\\n<commentary>\\nPerformance optimization of check-in features requires deep knowledge of the system architecture and best practices.\\n</commentary>\\n</example>\\n\\n<example>\\nContext: User has just written a new API function for check-in history.\\nuser: \"Here's the new function to fetch check-in history with pagination\"\\nassistant: \"Great! Now I'll use the hrms-checkin-expert agent to review this code for best practices and potential issues.\"\\n<commentary>\\nCode review of check-in-related code should be done by the specialized agent to ensure it meets performance and quality standards.\\n</commentary>\\n</example>\\n\\n<example>\\nContext: User is about to implement camera integration for photo verification.\\nuser: \"I need to add photo capture when users check in\"\\nassistant: \"I'll engage the hrms-checkin-expert agent to implement this feature with proper error handling and privacy considerations.\"\\n<commentary>\\nCamera integration for check-in requires expertise in both the technical implementation and the privacy/consent flow.\\n</commentary>\\n</example>"
+model: opus
+color: red
+memory: project
+---
+
+You are a Senior Vue 3 Developer specializing in the HRMS Check-in/Check-out system for Bangkok Metropolitan Administration (BMA). You have deep expertise in Vue 3 Composition API, TypeScript, Pinia state management, and geolocation-based attendance systems.
+
+**Your Core Responsibilities:**
+
+1. **Performance Optimization**:
+   - Minimize redundant API calls and state updates
+   - Use computed properties and watchers efficiently
+   - Implement lazy loading for map APIs and camera features
+   - Optimize re-renders by properly structuring reactive data
+   - Debounce user inputs and location updates (300-500ms)
+   - Cache API responses when appropriate (check-in history, user position)
+
+2. **Best Practice Implementation**:
+   - Follow Vue 3 Composition API patterns with `<script setup>`
+   - Use TypeScript interfaces for all API responses and data structures
+   - Implement proper error boundaries and error handling
+   - Write reusable composables for common logic (location, camera, permissions)
+   - Keep components focused and single-purpose
+   - Use Pinia stores for shared state, component `ref`/`reactive` for local state
+   - Implement proper cleanup in `onUnmounted` hooks (event listeners, timers)
+
+3. **Check-in System Specifics**:
+   - Validate time windows for check-in/check-out (consider late arrival thresholds)
+   - Handle geolocation verification with appropriate timeout and error states
+   - Implement camera capture with proper permission handling and fallbacks
+   - Respect privacy consent flow before accessing sensitive features
+   - Handle offline scenarios gracefully (PWA capabilities)
+   - Prevent duplicate check-ins within time windows
+   - Convert dates to Thai Buddhist Era (BE) for all user-facing displays
+   - Use `date-fns-tz` with Asia/Bangkok timezone for accurate time handling
+
+4. **Code Quality Standards**:
+   - Write self-documenting code with clear variable names in English
+   - Add TypeScript types for all function parameters and return values
+   - Include JSDoc comments for complex functions and composables
+   - Use async/await consistently for asynchronous operations
+   - Implement proper loading states during API calls and location requests
+   - Handle edge cases: network failures, permission denials, timeout scenarios
+   - Use environment variables for all configuration (API URLs, SSO endpoints)
+
+5. **Error Handling Patterns**:
+   - Use `messageError()` from the mixin store for consistent error dialogs
+   - Implement user-friendly Thai error messages
+   - Log technical errors for debugging while showing user-friendly messages
+   - Handle 401 responses with automatic logout via Keycloak
+   - Prevent dialog overlap using `activeErrorDialog` tracking
+
+6. **Project-Specific Conventions**:
+   - Import from src using `@` alias (e.g., `@/api/checkin`)
+   - Use Quasar components (`q-btn`, `q-dialog`, `q-spinner-cube`, etc.)
+   - Follow existing API structure: endpoints in `src/api/`, interfaces in `src/interface/response/`
+   - Thai language for all UI text and user-facing content
+   - Status labels: ABSENT→'ขาดราชการ', NORMAL→'ปกติ', LATE→'สาย'
+   - Date formatting: use `date2Thai()` and `monthYear2Thai()` from mixin store
+   - API date format: `yyyy-MM-dd` or `yyyy-MM-dd HH:mm:ss`
+
+7. **Testing Considerations**:
+   - Write testable code with pure functions where possible
+   - Consider unit tests for composables and utility functions
+   - Handle edge cases in tests: offline mode, permission denials, timeouts
+
+8. **Security & Privacy**:
+   - Never expose tokens or sensitive data in logs or error messages
+   - Always check privacy consent before accessing camera/location
+   - Validate all user inputs on both client and server side
+   - Use HTTPS for all API communications
+
+**Update your agent memory** as you discover:
+- Common performance bottlenecks in the check-in flow (e.g., slow location verification, API response times)
+- Recurring bugs or edge cases in geolocation/camera handling
+- Successful optimization patterns and their impact
+- Code patterns that violate best practices and should be refactored
+- Business logic rules for check-in validation (time windows, duplicate prevention, etc.)
+
+**When Implementing Features:**
+1. First, analyze the existing codebase patterns in `src/api/`, `src/stores/`, and `src/composables/`
+2. Consider the full user flow including error states and loading indicators
+3. Think about offline scenarios and how the app should behave
+4. Ensure proper cleanup of resources (timers, event listeners, subscriptions)
+5. Test with slow networks and permission denials
+6. Verify Thai date formatting is correct for all user-facing dates
+
+**When Reviewing Code:**
+1. Check for performance anti-patterns (unnecessary re-renders, missing debounce, redundant API calls)
+2. Verify proper TypeScript typing and null safety
+3. Ensure error handling covers all edge cases
+4. Confirm cleanup in lifecycle hooks
+5. Check for adherence to Quasar and Vue 3 best practices
+6. Validate that privacy consent is respected for sensitive features
+
+You prioritize code maintainability, performance, and user experience while following the established patterns in this HRMS codebase.
+
+# Persistent Agent Memory
+
+You have a persistent, file-based memory system at `/Users/waruneeta/Desktop/ChamomindWorking/HRMSProject/hrms-checkin/.claude/agent-memory/hrms-checkin-expert/`. This directory already exists — write to it directly with the Write tool (do not run mkdir or check for its existence).
+
+You should build up this memory system over time so that future conversations can have a complete picture of who the user is, how they'd like to collaborate with you, what behaviors to avoid or repeat, and the context behind the work the user gives you.
+
+If the user explicitly asks you to remember something, save it immediately as whichever type fits best. If they ask you to forget something, find and remove the relevant entry.
+
+## Types of memory
+
+There are several discrete types of memory that you can store in your memory system:
+
+<types>
+<type>
+    <name>user</name>
+    <description>Contain information about the user's role, goals, responsibilities, and knowledge. Great user memories help you tailor your future behavior to the user's preferences and perspective. Your goal in reading and writing these memories is to build up an understanding of who the user is and how you can be most helpful to them specifically. For example, you should collaborate with a senior software engineer differently than a student who is coding for the very first time. Keep in mind, that the aim here is to be helpful to the user. Avoid writing memories about the user that could be viewed as a negative judgement or that are not relevant to the work you're trying to accomplish together.</description>
+    <when_to_save>When you learn any details about the user's role, preferences, responsibilities, or knowledge</when_to_save>
+    <how_to_use>When your work should be informed by the user's profile or perspective. For example, if the user is asking you to explain a part of the code, you should answer that question in a way that is tailored to the specific details that they will find most valuable or that helps them build their mental model in relation to domain knowledge they already have.</how_to_use>
+    <examples>
+    user: I'm a data scientist investigating what logging we have in place
+    assistant: [saves user memory: user is a data scientist, currently focused on observability/logging]
+
+    user: I've been writing Go for ten years but this is my first time touching the React side of this repo
+    assistant: [saves user memory: deep Go expertise, new to React and this project's frontend — frame frontend explanations in terms of backend analogues]
+    </examples>
+</type>
+<type>
+    <name>feedback</name>
+    <description>Guidance the user has given you about how to approach work — both what to avoid and what to keep doing. These are a very important type of memory to read and write as they allow you to remain coherent and responsive to the way you should approach work in the project. Record from failure AND success: if you only save corrections, you will avoid past mistakes but drift away from approaches the user has already validated, and may grow overly cautious.</description>
+    <when_to_save>Any time the user corrects your approach ("no not that", "don't", "stop doing X") OR confirms a non-obvious approach worked ("yes exactly", "perfect, keep doing that", accepting an unusual choice without pushback). Corrections are easy to notice; confirmations are quieter — watch for them. In both cases, save what is applicable to future conversations, especially if surprising or not obvious from the code. Include *why* so you can judge edge cases later.</when_to_save>
+    <how_to_use>Let these memories guide your behavior so that the user does not need to offer the same guidance twice.</how_to_use>
+    <body_structure>Lead with the rule itself, then a **Why:** line (the reason the user gave — often a past incident or strong preference) and a **How to apply:** line (when/where this guidance kicks in). Knowing *why* lets you judge edge cases instead of blindly following the rule.</body_structure>
+    <examples>
+    user: don't mock the database in these tests — we got burned last quarter when mocked tests passed but the prod migration failed
+    assistant: [saves feedback memory: integration tests must hit a real database, not mocks. Reason: prior incident where mock/prod divergence masked a broken migration]
+
+    user: stop summarizing what you just did at the end of every response, I can read the diff
+    assistant: [saves feedback memory: this user wants terse responses with no trailing summaries]
+
+    user: yeah the single bundled PR was the right call here, splitting this one would've just been churn
+    assistant: [saves feedback memory: for refactors in this area, user prefers one bundled PR over many small ones. Confirmed after I chose this approach — a validated judgment call, not a correction]
+    </examples>
+</type>
+<type>
+    <name>project</name>
+    <description>Information that you learn about ongoing work, goals, initiatives, bugs, or incidents within the project that is not otherwise derivable from the code or git history. Project memories help you understand the broader context and motivation behind the work the user is doing within this working directory.</description>
+    <when_to_save>When you learn who is doing what, why, or by when. These states change relatively quickly so try to keep your understanding of this up to date. Always convert relative dates in user messages to absolute dates when saving (e.g., "Thursday" → "2026-03-05"), so the memory remains interpretable after time passes.</when_to_save>
+    <how_to_use>Use these memories to more fully understand the details and nuance behind the user's request and make better informed suggestions.</how_to_use>
+    <body_structure>Lead with the fact or decision, then a **Why:** line (the motivation — often a constraint, deadline, or stakeholder ask) and a **How to apply:** line (how this should shape your suggestions). Project memories decay fast, so the why helps future-you judge whether the memory is still load-bearing.</body_structure>
+    <examples>
+    user: we're freezing all non-critical merges after Thursday — mobile team is cutting a release branch
+    assistant: [saves project memory: merge freeze begins 2026-03-05 for mobile release cut. Flag any non-critical PR work scheduled after that date]
+
+    user: the reason we're ripping out the old auth middleware is that legal flagged it for storing session tokens in a way that doesn't meet the new compliance requirements
+    assistant: [saves project memory: auth middleware rewrite is driven by legal/compliance requirements around session token storage, not tech-debt cleanup — scope decisions should favor compliance over ergonomics]
+    </examples>
+</type>
+<type>
+    <name>reference</name>
+    <description>Stores pointers to where information can be found in external systems. These memories allow you to remember where to look to find up-to-date information outside of the project directory.</description>
+    <when_to_save>When you learn about resources in external systems and their purpose. For example, that bugs are tracked in a specific project in Linear or that feedback can be found in a specific Slack channel.</when_to_save>
+    <how_to_use>When the user references an external system or information that may be in an external system.</how_to_use>
+    <examples>
+    user: check the Linear project "INGEST" if you want context on these tickets, that's where we track all pipeline bugs
+    assistant: [saves reference memory: pipeline bugs are tracked in Linear project "INGEST"]
+
+    user: the Grafana board at grafana.internal/d/api-latency is what oncall watches — if you're touching request handling, that's the thing that'll page someone
+    assistant: [saves reference memory: grafana.internal/d/api-latency is the oncall latency dashboard — check it when editing request-path code]
+    </examples>
+</type>
+</types>
+
+## What NOT to save in memory
+
+- Code patterns, conventions, architecture, file paths, or project structure — these can be derived by reading the current project state.
+- Git history, recent changes, or who-changed-what — `git log` / `git blame` are authoritative.
+- Debugging solutions or fix recipes — the fix is in the code; the commit message has the context.
+- Anything already documented in CLAUDE.md files.
+- Ephemeral task details: in-progress work, temporary state, current conversation context.
+
+These exclusions apply even when the user explicitly asks you to save. If they ask you to save a PR list or activity summary, ask what was *surprising* or *non-obvious* about it — that is the part worth keeping.
+
+## How to save memories
+
+Saving a memory is a two-step process:
+
+**Step 1** — write the memory to its own file (e.g., `user_role.md`, `feedback_testing.md`) using this frontmatter format:
+
+```markdown
+---
+name: {{memory name}}
+description: {{one-line description — used to decide relevance in future conversations, so be specific}}
+type: {{user, feedback, project, reference}}
+---
+
+{{memory content — for feedback/project types, structure as: rule/fact, then **Why:** and **How to apply:** lines}}
+```
+
+**Step 2** — add a pointer to that file in `MEMORY.md`. `MEMORY.md` is an index, not a memory — each entry should be one line, under ~150 characters: `- [Title](file.md) — one-line hook`. It has no frontmatter. Never write memory content directly into `MEMORY.md`.
+
+- `MEMORY.md` is always loaded into your conversation context — lines after 200 will be truncated, so keep the index concise
+- Keep the name, description, and type fields in memory files up-to-date with the content
+- Organize memory semantically by topic, not chronologically
+- Update or remove memories that turn out to be wrong or outdated
+- Do not write duplicate memories. First check if there is an existing memory you can update before writing a new one.
+
+## When to access memories
+- When memories seem relevant, or the user references prior-conversation work.
+- You MUST access memory when the user explicitly asks you to check, recall, or remember.
+- If the user says to *ignore* or *not use* memory: Do not apply remembered facts, cite, compare against, or mention memory content.
+- Memory records can become stale over time. Use memory as context for what was true at a given point in time. Before answering the user or building assumptions based solely on information in memory records, verify that the memory is still correct and up-to-date by reading the current state of the files or resources. If a recalled memory conflicts with current information, trust what you observe now — and update or remove the stale memory rather than acting on it.
+
+## Before recommending from memory
+
+A memory that names a specific function, file, or flag is a claim that it existed *when the memory was written*. It may have been renamed, removed, or never merged. Before recommending it:
+
+- If the memory names a file path: check the file exists.
+- If the memory names a function or flag: grep for it.
+- If the user is about to act on your recommendation (not just asking about history), verify first.
+
+"The memory says X exists" is not the same as "X exists now."
+
+A memory that summarizes repo state (activity logs, architecture snapshots) is frozen in time. If the user asks about *recent* or *current* state, prefer `git log` or reading the code over recalling the snapshot.
+
+## Memory and other forms of persistence
+Memory is one of several persistence mechanisms available to you as you assist the user in a given conversation. The distinction is often that memory can be recalled in future conversations and should not be used for persisting information that is only useful within the scope of the current conversation.
+- When to use or update a plan instead of memory: If you are about to start a non-trivial implementation task and would like to reach alignment with the user on your approach you should use a Plan rather than saving this information to memory. Similarly, if you already have a plan within the conversation and you have changed your approach persist that change by updating the plan rather than saving a memory.
+- When to use or update tasks instead of memory: When you need to break your work in current conversation into discrete steps or keep track of your progress use tasks instead of saving to memory. Tasks are great for persisting information about the work that needs to be done in the current conversation, but memory should be reserved for information that will be useful in future conversations.
+
+- Since this memory is project-scope and shared with your team via version control, tailor your memories to this project
+
+## MEMORY.md
+
+Your MEMORY.md is currently empty. When you save new memories, they will appear here.
diff --git a/CLAUDE.md b/CLAUDE.md
index f974864..ab969b1 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -7,7 +7,7 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 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
+- Vue 3 with Composition API and TypeScript 4.7.4
 - Vite for build tooling
 - Quasar Framework for UI components
 - Pinia for state management
@@ -122,6 +122,12 @@ 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
+- `VITE_URL_LANDING` - Landing page URL
+
+**Note:** `.env.local` uses `:` instead of `=` for variable assignment (non-standard format that works with the current setup)
+- `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
 
@@ -130,6 +136,30 @@ Required in `.env.production`:
 - Icons: 192x192 and 512x512 PNG
 - Service worker registered in `src/registerServiceWorker.ts`
 
+### Import Aliases
+
+- `@` is configured as an alias for the `src/` directory
+- Use this for all imports from within the source directory
+
+### Environment Variable Substitution (Docker)
+
+The Docker build uses a multi-stage pattern:
+1. **Build stage**: Node.js Alpine builds the static assets with `npm run build`
+2. **Production stage**: nginx serves the static files
+- Environment variables (`VITE_API_URI_CONFIG`, `VITE_URL_SSO`, `VITE_URL_LANDING`, `VITE_URL_USER`) are substituted at container runtime via `entrypoint.sh` using `sed`
+- Built JS files contain placeholder values that get replaced with actual values at startup
+
+### Testing Patterns
+
+- Unit tests: `*.spec.{js,ts}` - Run with Vitest in jsdom environment
+- E2E tests: `*.cy.{js,ts}` - Run with Cypress
+- E2E test server runs on port 4173 (via `start-server-and-test`)
+
+### HTTP Interceptor Behavior
+
+- The axios interceptor in `http.ts` detects 401/403 responses but automatic logout is currently disabled (commented out)
+- 401 handling is done manually in `messageError()` from the mixin store
+
 ## Development Notes
 
 **When adding new features:**
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 4f831c6..c36ed30 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
     "keycloak-js": "^22.0.2",
     "moment": "^2.29.4",
     "pinia": "^2.1.4",
+    "pinia-plugin-persistedstate": "^3.2.3",
     "quasar": "^2.11.1",
     "register-service-worker": "^1.7.2",
     "simple-vue-camera": "^1.1.3",
diff --git a/src/api/api.checkin.ts b/src/api/api.checkin.ts
index 28caa30..fe69e5f 100644
--- a/src/api/api.checkin.ts
+++ b/src/api/api.checkin.ts
@@ -9,7 +9,8 @@ export default {
   checkStatus: () => `${leave}/check-status`,
 
   keycloakLogSSO: `${env.API_URI}/org/keycloak/log/sso`,
-  keycloakPosition: () => `${env.API_URI}/org/profile/keycloak/position`,
+  keycloakPosition: () =>
+    `${env.API_URI}/org/profile/keycloak/position-checkin`,
   fileByFile: (name: string, group: string, id: string, fileName: string) =>
     `${urlFile}/file/${name}/${group}/${id}/${fileName}`,
 
diff --git a/src/components/AscGISMap.vue b/src/components/AscGISMap.vue
index d1a7ce1..828f81a 100644
--- a/src/components/AscGISMap.vue
+++ b/src/components/AscGISMap.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, shallowRef, onBeforeUnmount } from 'vue'
 import { loadModules } from 'esri-loader'
 import axios from 'axios'
 import { useCounterMixin } from '@/stores/mixin'
@@ -13,21 +13,32 @@ const privacyStore = usePrivacyStore()
 const emit = defineEmits(['update:location'])
 const $q = useQuasar()
 
+// Throttle mechanism to prevent excessive location updates
+const LOCATION_UPDATE_THROTTLE_MS = 500
+let lastLocationUpdate = 0
+
 function updateLocation(latitude: number, longitude: number, namePOI: string) {
+  const now = Date.now()
+  // Skip update if called too frequently (within throttle period)
+  if (now - lastLocationUpdate < LOCATION_UPDATE_THROTTLE_MS) {
+    return
+  }
+  lastLocationUpdate = now
   // ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
   emit('update:location', latitude, longitude, namePOI)
 }
 
 const poiPlaceName = ref<string>('') // ชื่อพื้นที่ใกล้เคียง
+const mapView = shallowRef<any>(null) // Store mapView reference for cleanup (use shallowRef to avoid reactivity issues)
 
-// Replace ArcGIS api key
+// ArcGIS API key from environment variable
 const apiKey = ref<string>(
-  'YLATgWuywoeRLHn6KImj5rg7UaP8bJoR9jiTldoCVBHlqFIebwMSA5wIXEmcYhwXwMHkmNISEYtUz3x0oiGIIx0bIXXnUwi0OzupoOEtDrQIsRPVtor7gaPpXEmH8TrNaMT3snf6zO_yujHLGzborg-L9aeAjTJn4ndL6f8qFmRzYcX93E2vyA-7XCufLYTRsdTE5Aq-9hnx1q9PmYVMqhAZpL7dWqn3JgO33fRXetk.'
-  // 'AAPK4f700a4324d04e9f8a1a134e0771ac45FXWawdCl-OotFfr52gz9XKxTDJTpDzw_YYcwbmKDDyAJswf14FoPyw0qBkN64DvP'
+  import.meta.env.VITE_ARCGIS_API_KEY ||
+    'YLATgWuywoeRLHn6KImj5rg7UaP8bJoR9jiTldoCVBHlqFIebwMSA5wIXEmcYhwXwMHkmNISEYtUz3x0oiGIIx0bIXXnUwi0OzupoOEtDrQIsRPVtor7gaPpXEmH8TrNaMT3snf6zO_yujHLGzborg-L9aeAjTJn4ndL6f8qFmRzYcX93E2vyA-7XCufLYTRsdTE5Aq-9hnx1q9PmYVMqhAZpL7dWqn3JgO33fRXetk.'
 )
 const zoomMap = ref<number>(18)
 const textTooltip = ref<string>(
-  'พื้นที่ใกล้เคียง: สถานที่สำคัญรอบตัวคุณ (ไม่ใช่ตำแหน่งปัจจุบัน)'
+  'พื้นที่ใกล้เคียงคือ สถานที่สำคัญรอบตัวคุณ (ไม่ใช่ตำแหน่งปัจจุบัน)'
 )
 
 async function initializeMap() {
@@ -59,7 +70,7 @@ async function initializeMap() {
       navigator.geolocation.getCurrentPosition(async (position) => {
         const { latitude, longitude } = position.coords
 
-        const mapView = new MapView({
+        mapView.value = new MapView({
           container: 'mapViewDisplay',
           map: map,
           center: {
@@ -91,7 +102,7 @@ async function initializeMap() {
           geometry: userPoint,
           symbol: userSymbol,
         })
-        mapView.graphics.add(userGraphic)
+        mapView.value.graphics.add(userGraphic)
         // Get POI place ยิงไปขอที่ server ของกทม.ก่อน
         await axios
           .get(
@@ -131,9 +142,9 @@ async function initializeMap() {
               geometry: poiPoint,
               symbol: poiSymbol,
             })
-            mapView.graphics.add(poiGraphic)
+            mapView.value.graphics.add(poiGraphic)
             // อัปเดตการแสดงผลให้แสดงทั้งตำแหน่งของผู้ใช้และ POI
-            mapView.goTo({
+            mapView.value.goTo({
               target: [userPoint, poiPoint],
               zoom: zoomMap.value,
             })
@@ -180,9 +191,9 @@ async function initializeMap() {
                   geometry: poiPoint,
                   symbol: poiSymbol,
                 })
-                mapView.graphics.add(poiGraphic)
+                mapView.value.graphics.add(poiGraphic)
                 // อัปเดตการแสดงผลให้แสดงทั้งตำแหน่งของผู้ใช้และ POI
-                mapView.goTo({
+                mapView.value.goTo({
                   target: [userPoint, poiPoint],
                   zoom: zoomMap.value,
                 })
@@ -271,6 +282,14 @@ const requestLocationPermission = () => {
   )
 }
 
+// Cleanup map resources when component unmounts
+onBeforeUnmount(() => {
+  if (mapView.value) {
+    mapView.value.destroy()
+    mapView.value = null
+  }
+})
+
 defineExpose({
   requestLocationPermission,
 })
@@ -309,13 +328,13 @@ defineExpose({
         "
       >
         พื้นที่ใกล้เคียง
-        <span class="q-px-sm">:</span>
-        {{ poiPlaceName }}
         <q-icon name="mdi-information-outline" size="xs" class="q-mr-xs" />
 
         <q-tooltip anchor="top middle" self="bottom middle" :offset="[0, 5]">
           {{ textTooltip }}
         </q-tooltip>
+        <span class="q-px-sm">:</span>
+        {{ poiPlaceName }}
       </div>
     </div>
 
diff --git a/src/components/FormTime.vue b/src/components/FormTime.vue
index c299e4f..79a8f68 100644
--- a/src/components/FormTime.vue
+++ b/src/components/FormTime.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, watch, onMounted, reactive } from 'vue'
-import { PropType } from 'vue'
+import type { PropType } from 'vue'
 import { useQuasar } from 'quasar'
 import moment from 'moment'
 
@@ -38,10 +38,7 @@ const props = defineProps({
   },
   fetchData: {
     type: Function,
-    require: true,
-    default: () => {
-      console.log('fetchData func')
-    },
+    required: true,
   },
   action: {
     type: String,
diff --git a/src/components/MapCheckin.vue b/src/components/MapCheckin.vue
index 5429b4e..9e18ec0 100644
--- a/src/components/MapCheckin.vue
+++ b/src/components/MapCheckin.vue
@@ -1,6 +1,11 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, onBeforeUnmount } from 'vue'
 import { GoogleMap, Marker } from 'vue3-google-map'
+import { useQuasar } from 'quasar'
+
+const $q = useQuasar()
+
+const googleMapsApiKey = import.meta.env.VITE_GOOGLE_MAPS_API_KEY || ''
 
 declare var google: any
 const center = ref<any>()
@@ -29,11 +34,32 @@ function findNearestPlace() {
       },
       (error) => {
         console.error(error)
-        console.log('erroe')
+        // Show user-friendly error message
+        let errorMessage = 'ไม่สามารถระบุตำแหน่งได้'
+        switch (error.code) {
+          case error.PERMISSION_DENIED:
+            errorMessage = 'คุณปฏิเสธการอนุญาตให้เข้าถึงตำแหน่ง'
+            break
+          case error.POSITION_UNAVAILABLE:
+            errorMessage = 'ข้อมูลตำแหน่งไม่พร้อมใช้งาน'
+            break
+          case error.TIMEOUT:
+            errorMessage = 'หมดเวลาในการระบุตำแหน่ง'
+            break
+        }
+        $q.notify({
+          type: 'negative',
+          message: errorMessage,
+          position: 'top',
+        })
       }
     )
   } else {
-    console.error('เบราว์เซอร์ไม่รองรับการระบุตำแหน่ง')
+    $q.notify({
+      type: 'negative',
+      message: 'เบราว์เซอร์ไม่รองรับการระบุตำแหน่ง',
+      position: 'top',
+    })
   }
 }
 
@@ -69,6 +95,14 @@ function findNearestPlaceFromAPI(userLocation: any) {
 onMounted(() => {
   findNearestPlace()
 })
+
+// Cleanup resources
+onBeforeUnmount(() => {
+  // Clear location reference to prevent memory leaks
+  center.value = undefined
+  location.value = ''
+  test.value = undefined
+})
 </script>
 
 <template>
@@ -80,7 +114,7 @@ onMounted(() => {
   >
     <div style="width: 100%; height: 90%">
       <GoogleMap
-        api-key="AIzaSyBzPSF5NxUZ1G8DKBnJvJPTqCR0Ct2xf58"
+        :api-key="googleMapsApiKey"
         style="width: 100%; height: 100%"
         :center="center"
         :zoom="15"
diff --git a/src/components/PopUp.vue b/src/components/PopUp.vue
index 98c5850..f28f22e 100644
--- a/src/components/PopUp.vue
+++ b/src/components/PopUp.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
-import { PropType } from 'vue'
+import type { PropType } from 'vue'
 
 import type { DataCheckIn } from '@/interface/index/Main'
 
diff --git a/src/components/PopupPrivacy.vue b/src/components/PopupPrivacy.vue
index 4493fab..1bd816b 100644
--- a/src/components/PopupPrivacy.vue
+++ b/src/components/PopupPrivacy.vue
@@ -4,9 +4,11 @@ import { useQuasar } from 'quasar'
 import http from '@/plugins/http'
 import config from '@/app.config'
 import { usePrivacyStore } from '@/stores/privacy'
+import { usePositionKeycloakStore } from '@/stores/positionKeycloak'
 
 const $q = useQuasar()
 const privacyStore = usePrivacyStore()
+const positionKeycloakStore = usePositionKeycloakStore()
 
 const modal = defineModel<boolean>('modal', {
   required: true,
@@ -78,6 +80,12 @@ const handleAccept = async () => {
       accept: true,
     })
     privacyStore.setAccepted(true)
+
+    // อัปเดต privacyCheckin ใน positionKeycloak store ด้วย
+    if (positionKeycloakStore.dataPositionKeycloak) {
+      positionKeycloakStore.dataPositionKeycloak.privacyCheckin = true
+    }
+
     modal.value = false
   } catch (error) {}
 }
@@ -89,7 +97,7 @@ const toggleDetails = () => {
 
 const checkIfScrollable = () => {
   nextTick(() => {
-    const container = scrollContainer.value?.$el || scrollContainer.value
+    const container = (scrollContainer.value as any)?.$el || scrollContainer.value
     if (container) {
       const { scrollHeight, clientHeight } = container
 
diff --git a/src/components/TableHistory.vue b/src/components/TableHistory.vue
index 5d13e66..414a25d 100644
--- a/src/components/TableHistory.vue
+++ b/src/components/TableHistory.vue
@@ -2,42 +2,42 @@
 import { ref, watch } from 'vue'
 
 import { useCounterMixin } from '@/stores/mixin'
-import { useChekIn } from '@/stores/chekin'
+import { useCheckIn } from '@/stores/checkin'
 
-import { is, type QTableProps } from 'quasar'
+import type { QTableProps } from 'quasar'
 import type { Pagination, DataCheckIn } from '@/interface/index/Main'
 
 import Popup from '@/components/PopUp.vue' // dialog เพิ่ม/ขอแก้ไขลงเวลากรณีพิเศษ
 import SkeletonTable from '@/components/SkeletonTable.vue' // skeleton table
 
 const { date2Thai } = useCounterMixin()
-const stores = useChekIn()
+const stores = useCheckIn()
 
 /** props ข้อมูลจาก Components Page HistoryView */
 const props = defineProps({
   paging: {
     type: Boolean,
-    defualt: false,
+    default: false,
   },
   pageSize: {
     type: Number,
-    defualt: 10,
+    default: 10,
   },
   page: {
     type: Number,
-    defualt: 1,
+    default: 1,
   },
   maxPage: {
     type: Number,
-    defualt: 1,
+    default: 1,
   },
   total: {
     type: Number,
-    defualt: 0,
+    default: 0,
   },
   tab: {
     type: String,
-    defualt: '',
+    default: '',
     required: true,
   },
   fetchData: {
@@ -254,7 +254,7 @@ function classStatus(status: string) {
     case 'ปฏิบัติงานไม่ครบตามกำหนดเวลา':
       return 'text-orange-8'
     default:
-      break
+      return ''
   }
 }
 
diff --git a/src/components/ToolBar.vue b/src/components/ToolBar.vue
index ab54d66..c95111d 100644
--- a/src/components/ToolBar.vue
+++ b/src/components/ToolBar.vue
@@ -2,14 +2,14 @@
 import { onMounted, ref, watch } from 'vue'
 
 import { useCounterMixin } from '@/stores/mixin'
-import { useChekIn } from '@/stores/chekin'
+import { useCheckIn } from '@/stores/checkin'
 import { calculateFiscalYear } from '@/utils/function'
 
 import type { DataDateMonthObject } from '@/interface/index/Main'
 
 import Popup from '@/components/PopUp.vue'
 
-const stores = useChekIn()
+const stores = useCheckIn()
 const { monthYear2Thai } = useCounterMixin()
 
 /**
@@ -18,11 +18,11 @@ const { monthYear2Thai } = useCounterMixin()
 const props = defineProps({
   fetchData: {
     type: Function,
-    require: true,
+    required: true,
   },
   tab: {
     type: String,
-    require: true,
+    required: true,
   },
 })
 const emit = defineEmits(['update:year'])
@@ -43,8 +43,6 @@ function filterYearFn(type: string) {
   const year = type === 'year' ? filterYear.value : dateMonth.value.year
   const month = dateMonth.value.month
 
-  console.log(year, month)
-
   // ตรวจสอบค่าก่อนส่ง
   if (isNaN(Number(year)) || isNaN(Number(month))) {
     console.warn('Invalid year or month value:', { year, month })
diff --git a/src/interface/keycloak-position.ts b/src/interface/keycloak-position.ts
new file mode 100644
index 0000000..dfd2680
--- /dev/null
+++ b/src/interface/keycloak-position.ts
@@ -0,0 +1,29 @@
+/**
+ * Interface for Keycloak position data from /org/profile/keycloak/position API
+ */
+export interface KeycloakPosition {
+  /** Privacy consent status */
+  privacyCheckin: boolean
+  /** Profile image filename */
+  avatarName?: string
+  /** User profile ID */
+  profileId: string
+  /** Organization hierarchy data */
+  organization?: Organization
+}
+
+/**
+ * Organization hierarchy structure
+ */
+export interface Organization {
+  /** Top level organization */
+  root?: string
+  /** Child level 1 */
+  child1?: string
+  /** Child level 2 */
+  child2?: string
+  /** Child level 3 */
+  child3?: string
+  /** Child level 4 */
+  child4?: string
+}
diff --git a/src/main.ts b/src/main.ts
index fb28e50..b04278c 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -3,6 +3,7 @@ import App from '@/App.vue'
 import '@/registerServiceWorker'
 import router from '@/router'
 import { createPinia } from 'pinia'
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 import { Quasar, Dialog, Notify, Loading } from 'quasar'
 import '@vuepic/vue-datepicker/dist/main.css'
 import quasarUserOptions from '@/quasar-user-options'
@@ -14,6 +15,7 @@ import http from '@/plugins/http'
 
 const app = createApp(App)
 const pinia = createPinia()
+pinia.use(piniaPluginPersistedstate)
 
 app.use(router)
 app.use(pinia)
diff --git a/src/plugins/http.ts b/src/plugins/http.ts
index 9020cb6..378006f 100644
--- a/src/plugins/http.ts
+++ b/src/plugins/http.ts
@@ -2,7 +2,7 @@ import Axios, { type AxiosRequestConfig, type AxiosResponse } from 'axios'
 import { getToken } from './auth'
 
 const http = Axios.create({
-  timeout: 1000000000, // เพิ่มค่า timeout
+  timeout: 30000, // 30 seconds - reasonable timeout for API calls
   headers: {
     'X-Requested-With': 'XMLHttpRequest',
   },
@@ -30,6 +30,7 @@ http.interceptors.response.use(
       // eslint-disable-next-line no-prototype-builtins
       if (error.hasOwnProperty('response')) {
         if (error.response.status === 401 || error.response.status === 403) {
+          // TODO: Implement proper logout logic on 401/403
           // Store.commit("SET_ERROR_MESSAGE", error.response.data.message);
           // Store.commit("REMOVE_ACCESS_TOKEN")
         }
diff --git a/src/plugins/keycloak.ts b/src/plugins/keycloak.ts
index bb382dd..f1660ed 100644
--- a/src/plugins/keycloak.ts
+++ b/src/plugins/keycloak.ts
@@ -1,6 +1,8 @@
 // // authen with keycloak client
 // import Keycloak from 'keycloak-js'
 
+export {}
+
 // const ACCESS_TOKEN = 'BMAHRIS_KEYCLOAK_IDENTITY'
 // const REFRESH_TOKEN = 'BMAHRIS_KEYCLOAK_REFRESH'
 // const keycloakConfig = {
diff --git a/src/router/index.ts b/src/router/index.ts
index 23e3edb..8d85f3e 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -24,14 +24,14 @@ const router = createRouter({
             Auth: true,
           },
         },
-        {
-          path: '/map',
-          name: 'map',
-          component: MapView,
-          meta: {
-            Auth: true,
-          },
-        },
+        // {
+        //   path: '/map',
+        //   name: 'map',
+        //   component: MapView,
+        //   meta: {
+        //     Auth: true,
+        //   },
+        // },
         {
           path: '/about',
           name: 'about',
diff --git a/src/stores/chekin.ts b/src/stores/checkin.ts
similarity index 98%
rename from src/stores/chekin.ts
rename to src/stores/checkin.ts
index bf27004..068fd80 100644
--- a/src/stores/chekin.ts
+++ b/src/stores/checkin.ts
@@ -8,7 +8,7 @@ const mixin = useCounterMixin()
 const { date2Thai } = mixin
 
 /** store for checkin history*/
-export const useChekIn = defineStore('checkin', () => {
+export const useCheckIn = defineStore('checkin', () => {
   const year = ref<number>(calculateFiscalYear(new Date())) //ปีงบประมาณ
   const rows = ref<Datalist[]>([])
   const tab = ref<string>('history')
diff --git a/src/stores/positionKeycloak.ts b/src/stores/positionKeycloak.ts
index c3a1ec0..a856ede 100644
--- a/src/stores/positionKeycloak.ts
+++ b/src/stores/positionKeycloak.ts
@@ -1,65 +1,66 @@
 import { ref } from 'vue'
 import { defineStore } from 'pinia'
+import type { KeycloakPosition } from '@/interface/keycloak-position'
 
-export const usePositionKeycloakStore = defineStore('positionKeycloak', () => {
-  const menuData = ref<string[]>([
-    'ลงเวลาปฏิบัติงาน',
-    'ประวัติการลงเวลา',
-    'รายการลงเวลากรณีพิเศษ',
-  ])
-  const dataPositionKeycloak = ref<any>(null)
+export const usePositionKeycloakStore = defineStore(
+  'positionKeycloak',
+  () => {
+    const menuData = ref<string[]>([
+      'ลงเวลาปฏิบัติงาน',
+      'ประวัติการลงเวลา',
+      'รายการลงเวลากรณีพิเศษ',
+    ])
+    const dataPositionKeycloak = ref<KeycloakPosition | null>(null)
 
-  function setPositionKeycloak(data: any) {
-    dataPositionKeycloak.value = data
-  }
-
-  function findOrgName(obj: any) {
-    if (obj) {
-      let name =
-        obj.child4 != null &&
-        obj.child4 !== '' &&
-        obj.child3 != null &&
-        obj.child3 !== ''
-          ? obj.child4 + (obj.child3 ? '/' : '')
-          : obj.child4 != null && obj.child4 !== ''
-          ? obj.child4
-          : ''
-
-      name +=
-        obj.child3 != null &&
-        obj.child3 !== '' &&
-        obj.child2 != null &&
-        obj.child2 !== ''
-          ? obj.child3 + (obj.child2 ? '/' : '')
-          : obj.child3 != null && obj.child3 !== ''
-          ? obj.child3
-          : ''
-
-      name +=
-        obj.child2 != null &&
-        obj.child2 !== '' &&
-        obj.child1 != null &&
-        obj.child1 !== ''
-          ? obj.child2 + (obj.child1 ? '/' : '')
-          : obj.child2 != null && obj.child2 !== ''
-          ? obj.child2
-          : ''
-
-      name +=
-        obj.child1 != null &&
-        obj.child1 !== '' &&
-        obj.root != null &&
-        obj.root !== ''
-          ? obj.child1 + (obj.root ? '/' : '')
-          : obj.child1 != null && obj.child1 !== ''
-          ? obj.child1
-          : ''
-      name += obj.root != null && obj.root !== '' ? obj.root : ''
-      return name == '' ? '-' : name
-    } else {
-      return ''
+    function setPositionKeycloak(data: KeycloakPosition) {
+      dataPositionKeycloak.value = data
     }
-  }
 
-  return { setPositionKeycloak, dataPositionKeycloak, findOrgName, menuData }
-})
+    /**
+     * ล้างข้อมูล Keycloak position (ใช้เมื่อ logout)
+     */
+    function clearPositionKeycloak() {
+      dataPositionKeycloak.value = null
+      // ลบ localStorage ด้วยเพื่อให้แน่ใจว่าข้อมูลหายจริง
+      localStorage.removeItem('positionKeycloak')
+    }
+
+    /**
+     * สร้างชื่อหน่วยงานจากข้อมูลลำดับชั้นองค์กร
+     * @param obj ข้อมูลองค์กรที่มีโครงสร้าง child4 -> child3 -> child2 -> child1 -> root
+     * @returns ชื่อหน่วยงานในรูปแบบ string เชื่อมด้วย /
+     */
+    function findOrgName(obj: KeycloakPosition | null): string {
+      if (!obj?.organization) {
+        return ''
+      }
+
+      const org = obj.organization
+      const levels = ['child4', 'child3', 'child2', 'child1', 'root'] as const
+      const parts: string[] = []
+
+      for (const level of levels) {
+        const value = org[level]
+        if (value) {
+          parts.push(value)
+        }
+      }
+
+      return parts.length > 0 ? parts.join('/') : '-'
+    }
+
+    return {
+      setPositionKeycloak,
+      clearPositionKeycloak,
+      dataPositionKeycloak,
+      findOrgName,
+      menuData,
+    }
+  },
+  {
+    persist: {
+      key: 'positionKeycloak',
+      storage: localStorage, // ใช้ localStorage เพื่อให้ข้อมูลอยู่ถาวร
+    },
+  }
+)
diff --git a/src/views/HistoryView.vue b/src/views/HistoryView.vue
index a2f007f..089d697 100644
--- a/src/views/HistoryView.vue
+++ b/src/views/HistoryView.vue
@@ -5,7 +5,7 @@ import { useQuasar } from 'quasar'
 import { useRouter } from 'vue-router'
 import http from '@/plugins/http'
 import config from '@/app.config'
-import { useChekIn } from '@/stores/chekin'
+import { useCheckIn } from '@/stores/checkin'
 import { useCounterMixin } from '@/stores/mixin'
 import { calculateFiscalYear } from '@/utils/function'
 
@@ -14,7 +14,7 @@ import ToolBar from '@/components/ToolBar.vue' // เมนู Herder
 
 const $q = useQuasar() //ใช้ noti quasar
 const router = useRouter()
-const stores = useChekIn()
+const stores = useCheckIn()
 const { showLoader, hideLoader, messageError } = useCounterMixin()
 const { fetchHistoryList } = stores
 
@@ -195,7 +195,7 @@ watch(
                 :tab="stores.tab"
               />
               <TableHistory
-                :fetchData="functionFetch"
+                :fetch-data="functionFetch"
                 :page-size="pageSize"
                 :total="total"
                 :page="page"
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 5df3c0c..9de4f22 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted, watch, onBeforeUnmount } from 'vue'
 import { useQuasar } from 'quasar'
-import moment from 'moment'
+import { format } from 'date-fns'
 import Camera from 'simple-vue-camera'
 
 import config from '@/app.config'
@@ -69,15 +69,16 @@ const formattedM = ref()
 const formattedH = ref()
 const formattedHH = ref()
 const formattedA = ref()
+const clockInterval = ref<number | NodeJS.Timeout | undefined>()
 
 /** function อัพเดทเวลา*/
 function updateClock() {
-  const date = Date.now()
-  const hh = moment(date).format('HH')
-  const mm = moment(date).format('mm')
-  const ss = moment(date).format('ss')
-  const HH = moment(date).format('hh')
-  const A = moment(date).format('a')
+  const date = new Date()
+  const hh = format(date, 'HH')
+  const mm = format(date, 'mm')
+  const ss = format(date, 'ss')
+  const HH = format(date, 'hh')
+  const A = format(date, 'a')
 
   formattedS.value = ss
   formattedM.value = mm
@@ -85,7 +86,6 @@ function updateClock() {
   formattedHH.value = HH
   formattedA.value = A
 }
-setInterval(updateClock, 1000)
 
 /** form-data */
 const formLocation = reactive({
@@ -137,7 +137,10 @@ async function getDelayedFreshPosition() {
     maximumAge: 0,
   })
 
-  await wait(MOCK_CHECK_DELAY_MS)
+  // Only add delay in development mode for testing
+  if (import.meta.env.DEV) {
+    await wait(MOCK_CHECK_DELAY_MS)
+  }
 
   try {
     return await getCurrentPositionAsync({
@@ -191,7 +194,7 @@ const availableCameras = ref<any[]>([])
 const currentCameraIndex = ref<number>(0)
 const currentCameraType = ref<'front' | 'back' | 'unknown'>('unknown')
 
-const intervalId = ref<number | undefined>(undefined) // ต้องใช้ตัวแปรเก็บค่า interval
+const intervalId = ref<number | NodeJS.Timeout | undefined>(undefined) // ต้องใช้ตัวแปรเก็บค่า interval
 
 /**
  * เริ่มจาก onMounted #1 เช็ค status คิว
@@ -246,18 +249,6 @@ async function fetchCheckStatus() {
   }
 }
 
-/** ตัวเก่าก่อนเปลี่ยน */
-
-// async function stopChecking() {
-//   if (intervalId.value !== undefined) {
-//     clearInterval(intervalId.value) // หยุด interval
-//     setTimeout(() => {
-//       fetchCheckTime()
-//     }, 1000)
-//     intervalId.value = undefined // รีเซ็ตค่า
-//   }
-// }
-
 /** ตัวใหม่ที่เปลี่ยนก่อนเปลี่ยน
  * เริ่มจาก onMounted #3 เช็ค status คิว
  *
@@ -674,6 +665,7 @@ async function requestCamera() {
 onMounted(async () => {
   isLoadingCheckTime.value = true
   updateClock()
+  clockInterval.value = setInterval(updateClock, 1000)
   startChecking() //เช็ค status จาก คิว #1
 
   // เรียกแผนที่เฉพาะเมื่อยอมรับ privacy แล้ว
@@ -690,6 +682,12 @@ onMounted(async () => {
 onBeforeUnmount(() => {
   resetCameraAndImage()
 
+  // หยุด clock interval
+  if (clockInterval.value !== undefined) {
+    clearInterval(clockInterval.value)
+    clockInterval.value = undefined
+  }
+
   // หยุด interval ถ้ามี
   if (intervalId.value !== undefined) {
     clearInterval(intervalId.value)
@@ -1279,7 +1277,7 @@ watch(
         </div>
         <div class="col-12 text-center row q-pt-md">
           <div class="col-12 text-subtitle1 text-weight-medium text-secondary">
-            พื้นที่ใกล้เคียง {{ formLocation.POI ?? formLocation.POI }}
+            พื้นที่ใกล้เคียง {{ formLocation.POI }}
           </div>
           <div class="col-12 text-subtitle1 text-weight-medium text-secondary">
             {{ location }}
@@ -1318,7 +1316,7 @@ watch(
 .card-container {
   position: relative;
   overflow: hidden;
-  height: autu; /* Adjust as needed */
+  height: auto; /* Adjust as needed */
   background: #f5f5f5;
   height: 35vh !important;
   box-shadow: none !important;
@@ -1327,7 +1325,7 @@ watch(
 .card-container-xs {
   position: relative;
   overflow: hidden;
-  height: autu; /* Adjust as needed */
+  height: auto; /* Adjust as needed */
   background: #ffffff;
   height: 35vh !important;
   border-radius: 10px;
diff --git a/src/views/MainView.vue b/src/views/MainView.vue
index c8bc1d8..edebfbc 100644
--- a/src/views/MainView.vue
+++ b/src/views/MainView.vue
@@ -10,6 +10,7 @@ import { logout, tokenParsed, getCookie, gotoLeavePage } from '@/plugins/auth'
 import { useCounterMixin } from '@/stores/mixin'
 import { usePrivacyStore } from '@/stores/privacy'
 import { usePositionKeycloakStore } from '@/stores/positionKeycloak'
+import type { KeycloakPosition } from '@/interface/keycloak-position'
 
 // import type { notiType } from '@/interface/index/Main'
 // import type { Noti } from '@/interface/response/Main'
@@ -144,6 +145,8 @@ function onClickLogout() {
     ok: 'ยืนยัน',
     persistent: true,
   }).onOk(async () => {
+    // ล้างข้อมูล positionKeycloak ก่อน logout
+    positionKeycloakStore.clearPositionKeycloak()
     await http.post(config.API.keycloakLogSSO, { text: 'ออกจากระบบ' })
     await logout()
   })
@@ -174,16 +177,50 @@ const landingPageUrl = ref<string>(configParam.landingPageUrl)
 
 /** ฟังก์ชันเรียกข้อมูลผู้ใช่งาน*/
 async function fetchKeycloakPosition() {
+  // เช็คว่ามีข้อมูลใน store อยู่แล้วหรือไม่ (จาก localStorage)
+  const existingData = positionKeycloakStore.dataPositionKeycloak
+
+  if (existingData) {
+    // มีข้อมูลอยู่แล้ว ใช้ข้อมูลเดิม
+    privacyStore.modalPrivacy = !existingData.privacyCheckin
+    privacyStore.setAccepted(existingData.privacyCheckin)
+
+    //เช็คว่ามีรูปไหม ถ้ามีรูปเรียกข้อมูลรูป
+    if (existingData.avatarName) {
+      getImg(existingData.profileId, existingData.avatarName)
+    } else {
+      profileImg.value = avatar
+    }
+    return
+  }
+
+  // ไม่มีข้อมูล ให้ fetch จาก API
   await http
     .get(config.API.keycloakPosition())
     .then(async (res) => {
-      const data = await res.data.result
-      positionKeycloakStore.setPositionKeycloak(data)
-      privacyStore.modalPrivacy = !data.privacyCheckin ? true : false
-      privacyStore.setAccepted(data.privacyCheckin)
+      const apiData = await res.data.result
+
+      // Map API response to KeycloakPosition interface
+      const keycloakData: KeycloakPosition = {
+        privacyCheckin: apiData.privacyCheckin ?? false,
+        avatarName: apiData.avatarName,
+        profileId: apiData.profileId,
+        organization: {
+          root: apiData.root,
+          child1: apiData.child1,
+          child2: apiData.child2,
+          child3: apiData.child3,
+          child4: apiData.child4,
+        },
+      }
+
+      positionKeycloakStore.setPositionKeycloak(keycloakData)
+      privacyStore.modalPrivacy = !keycloakData.privacyCheckin
+      privacyStore.setAccepted(keycloakData.privacyCheckin)
+
       //เช็คว่ามีรูปไหม ถ้ามีรูปเรียกข้อมูลรูป
-      if (data.avatarName) {
-        getImg(data.profileId, data.avatarName)
+      if (keycloakData.avatarName) {
+        getImg(keycloakData.profileId, keycloakData.avatarName)
       } else {
         profileImg.value = avatar
       }
@@ -297,6 +334,7 @@ onMounted(async () => {
   const checkTokenParsed = await tokenParsed()
   const SSO_TOKEN = await getCookie('SSO')
   isSsoToken.value = SSO_TOKEN === 'y' ? true : false
+
   if (checkTokenParsed != null) {
     fullName.value = checkTokenParsed.name
   }
diff --git a/tests/utils.ts b/tests/utils.ts
new file mode 100644
index 0000000..92b5e37
--- /dev/null
+++ b/tests/utils.ts
@@ -0,0 +1,26 @@
+import { enableAutoUnmount, flushPromises, VueWrapper } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+
+/**
+ * Helper function to setup test environment with Pinia
+ */
+export function setupTest() {
+  const pinia = createPinia()
+  setActivePinia(pinia)
+  return pinia
+}
+
+/**
+ * Helper to flush all pending promises
+ */
+export async function flushAllPromises() {
+  await flushPromises()
+  await new Promise((resolve) => setTimeout(resolve, 0))
+}
+
+/**
+ * Helper to cleanup after each test
+ */
+export function teardownTest() {
+  vi.clearAllMocks()
+}