From 6b38359a905dd70ee7fcb810179fa14fa87a1d42 Mon Sep 17 00:00:00 2001
From: bagus-arie05 <bagus.arie05@gmail.com>
Date: Tue, 6 Jan 2026 14:51:28 +0700
Subject: [PATCH] update anjungan, store management

---
 .../features/queue/CurrentPatientCard.vue     |   29 +-
 composables/useAPI.ts                         |  105 +
 composables/useClinicAPI.ts                   |  160 +
 composables/useQueueAPI.ts                    |  193 +
 docs/API_ENDPOINTS_CLINIC_DOCTOR.md           | 1538 ++++
 nuxt.config.ts                                |    4 +-
 package-lock.json                             |   40 +
 package.json                                  |    3 +-
 pages/AdminKlinik.vue                         |   80 +-
 pages/AdminLoket.vue                          |   10 +
 pages/Anjungan/Anjungan/[id].vue              |  481 +-
 pages/CheckInPasien/checkIn.vue               | 6240 +++++++++--------
 .../checkIn.vue.backup.combined-layout        | 3386 ---------
 .../checkIn.vue.before-combined.backup        | 3351 ---------
 .../checkIn.vue.refactore.backup              |  717 --
 pages/Setting/MasterAnjungan.vue              |    2 +-
 plugins/pinia-persistedstate.client.ts        |    8 +
 server/api/queue/patients.ts.txt              |  212 +
 stores/anjunganStore.js                       |    6 +
 stores/clinicStore.js                         |  198 +-
 stores/klinikruangstore.js                    |    6 +
 stores/loketStore.js                          |  125 +
 stores/masterStore.js                         |  705 +-
 stores/penunjangStore.js                      |  289 +
 stores/queueStore.js                          |  174 +-
 stores/ruangStore.js                          |  313 +
 stores/screenStore.js                         |    6 +
 27 files changed, 7395 insertions(+), 10986 deletions(-)
 create mode 100644 composables/useAPI.ts
 create mode 100644 composables/useClinicAPI.ts
 create mode 100644 composables/useQueueAPI.ts
 create mode 100644 docs/API_ENDPOINTS_CLINIC_DOCTOR.md
 delete mode 100644 pages/CheckInPasien/checkIn.vue.backup.combined-layout
 delete mode 100644 pages/CheckInPasien/checkIn.vue.before-combined.backup
 delete mode 100644 pages/CheckInPasien/checkIn.vue.refactore.backup
 create mode 100644 plugins/pinia-persistedstate.client.ts
 create mode 100644 server/api/queue/patients.ts.txt
 create mode 100644 stores/loketStore.js
 create mode 100644 stores/penunjangStore.js
 create mode 100644 stores/ruangStore.js

diff --git a/components/features/queue/CurrentPatientCard.vue b/components/features/queue/CurrentPatientCard.vue
index 9bd50a4..7cd364f 100644
--- a/components/features/queue/CurrentPatientCard.vue
+++ b/components/features/queue/CurrentPatientCard.vue
@@ -1,7 +1,20 @@
 <template>
   <v-card class="current-patient-card" elevation="0">
     <v-card-text class="pa-4">
-      <div class="section-label mb-3">SEDANG DIPROSES</div>
+      <div class="section-header mb-3">
+        <div class="section-label">SEDANG DIPROSES</div>
+        <v-btn
+          v-if="patient"
+          class="call-button"
+          color="primary-600"
+          variant="flat"
+          size="small"
+          @click="$emit('call')"
+        >
+          <v-icon start size="18">mdi-bullhorn</v-icon>
+          Panggil
+        </v-btn>
+      </div>
       
       <div v-if="patient" class="patient-details" :class="`patient-details-${theme}`">
         <div class="patient-number mb-2">{{ patient.noAntrian.split(" |")[0] }}</div>
@@ -80,7 +93,7 @@ defineProps({
   }
 });
 
-defineEmits(['action', 'change-klinik', 'process-next']);
+defineEmits(['action', 'change-klinik', 'process-next', 'call']);
 </script>
 
 <style scoped lang="scss">
@@ -90,6 +103,12 @@ defineEmits(['action', 'change-klinik', 'process-next']);
   background: var(--color-neutral-100);
 }
 
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
 .section-label {
   font-size: 11px;
   font-weight: 700;
@@ -98,6 +117,12 @@ defineEmits(['action', 'change-klinik', 'process-next']);
   text-transform: uppercase;
 }
 
+.call-button {
+  text-transform: none;
+  font-weight: 600;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
 .patient-details {
   border-radius: 8px;
   padding: 16px;
diff --git a/composables/useAPI.ts b/composables/useAPI.ts
new file mode 100644
index 0000000..2aab179
--- /dev/null
+++ b/composables/useAPI.ts
@@ -0,0 +1,105 @@
+// composables/useAPI.ts
+// Generic API composable untuk semua API calls
+// Base composable yang bisa di-extend untuk specific resources
+
+export interface APIResponse<T = any> {
+  success: boolean;
+  data?: T;
+  message?: string;
+  error?: string;
+}
+
+export const useAPI = () => {
+  const config = useRuntimeConfig();
+  const baseURL = config.public.apiBaseUrl || '/api';
+
+  /**
+   * Generic GET request
+   */
+  const get = async <T = any>(endpoint: string, options: any = {}): Promise<T> => {
+    try {
+      const response = await $fetch<APIResponse<T>>(`${baseURL}${endpoint}`, {
+        method: 'GET',
+        ...options,
+      });
+
+      if (response.success && response.data !== undefined) {
+        return response.data;
+      }
+      throw new Error(response.message || 'Failed to fetch data');
+    } catch (error: any) {
+      console.error(`❌ Error GET ${endpoint}:`, error);
+      throw error;
+    }
+  };
+
+  /**
+   * Generic POST request
+   */
+  const post = async <T = any>(endpoint: string, body: any, options: any = {}): Promise<T> => {
+    try {
+      const response = await $fetch<APIResponse<T>>(`${baseURL}${endpoint}`, {
+        method: 'POST',
+        body,
+        ...options,
+      });
+
+      if (response.success && response.data !== undefined) {
+        return response.data;
+      }
+      throw new Error(response.message || 'Failed to create data');
+    } catch (error: any) {
+      console.error(`❌ Error POST ${endpoint}:`, error);
+      throw error;
+    }
+  };
+
+  /**
+   * Generic PATCH request
+   */
+  const patch = async <T = any>(endpoint: string, body: any, options: any = {}): Promise<T> => {
+    try {
+      const response = await $fetch<APIResponse<T>>(`${baseURL}${endpoint}`, {
+        method: 'PATCH',
+        body,
+        ...options,
+      });
+
+      if (response.success && response.data !== undefined) {
+        return response.data;
+      }
+      throw new Error(response.message || 'Failed to update data');
+    } catch (error: any) {
+      console.error(`❌ Error PATCH ${endpoint}:`, error);
+      throw error;
+    }
+  };
+
+  /**
+   * Generic DELETE request
+   */
+  const del = async <T = any>(endpoint: string, options: any = {}): Promise<T> => {
+    try {
+      const response = await $fetch<APIResponse<T>>(`${baseURL}${endpoint}`, {
+        method: 'DELETE',
+        ...options,
+      });
+
+      if (response.success) {
+        return response.data as T;
+      }
+      throw new Error(response.message || 'Failed to delete data');
+    } catch (error: any) {
+      console.error(`❌ Error DELETE ${endpoint}:`, error);
+      throw error;
+    }
+  };
+
+  return {
+    get,
+    post,
+    patch,
+    delete: del,
+  };
+};
+
diff --git a/composables/useClinicAPI.ts b/composables/useClinicAPI.ts
new file mode 100644
index 0000000..699926b
--- /dev/null
+++ b/composables/useClinicAPI.ts
@@ -0,0 +1,160 @@
+// composables/useClinicAPI.ts
+// Composable untuk API calls terkait klinik/poli
+
+import { useAPI } from './useAPI';
+
+export interface Clinic {
+  id: number;
+  kode: string;
+  name: string;
+  subtitle?: string;
+  icon?: string;
+  shift?: string;
+  schedule?: string;
+  available?: boolean;
+  doctors?: string[];
+  shifts?: Array<{ name: string; quota: number }>;
+  totalQuota?: number;
+  jamShiftList?: Array<{ dari: string; sampai: string; kuota: number }>;
+  autoShift?: boolean;
+  jadwalKlinik?: string[];
+}
+
+export const useClinicAPI = () => {
+  const api = useAPI();
+
+  /**
+   * Fetch all clinics from database
+   */
+  const fetchAllClinics = async (): Promise<Clinic[]> => {
+    try {
+      return await api.get<Clinic[]>('/clinics');
+    } catch (error: any) {
+      console.error('❌ Error fetching clinics:', error);
+      throw error;
+    }
+  };
+
+  /**
+   * Fetch single clinic by ID
+   */
+  const fetchClinic = async (id: number): Promise<Clinic | null> => {
+    try {
+      return await api.get<Clinic>(`/clinics/${id}`);
+    } catch (error: any) {
+      console.error('❌ Error fetching clinic:', error);
+      return null;
+    }
+  };
+
+  /**
+   * Fetch clinics by kode
+   */
+  const fetchClinicByKode = async (kode: string): Promise<Clinic | null> => {
+    try {
+      return await api.get<Clinic>(`/clinics/kode/${kode}`);
+    } catch (error: any) {
+      console.error('❌ Error fetching clinic by kode:', error);
+      return null;
+    }
+  };
+
+  /**
+   * Create new clinic
+   */
+  const createClinic = async (clinicData: Partial<Clinic>): Promise<Clinic> => {
+    try {
+      return await api.post<Clinic>('/clinics', clinicData);
+    } catch (error: any) {
+      console.error('❌ Error creating clinic:', error);
+      throw error;
+    }
+  };
+
+  /**
+   * Update clinic
+   */
+  const updateClinic = async (id: number, updates: Partial<Clinic>): Promise<Clinic> => {
+    try {
+      return await api.patch<Clinic>(`/clinics/${id}`, updates);
+    } catch (error: any) {
+      console.error('❌ Error updating clinic:', error);
+      throw error;
+    }
+  };
+
+  /**
+   * Delete clinic
+   */
+  const deleteClinic = async (id: number): Promise<boolean> => {
+    try {
+      await api.delete(`/clinics/${id}`);
+      return true;
+    } catch (error: any) {
+      console.error('❌ Error deleting clinic:', error);
+      return false;
+    }
+  };
+
+  /**
+   * Get clinics for dropdown (formatted for dropdown use)
+   */
+  const fetchClinicsForDropdown = async (): Promise<Clinic[]> => {
+    try {
+      const clinics = await fetchAllClinics();
+      // Format sesuai kebutuhan dropdown
+      return clinics.map(clinic => ({
+        id: clinic.id,
+        name: clinic.name,
+        kode: clinic.kode,
+        icon: clinic.icon,
+        available: clinic.available ?? true,
+      }));
+    } catch (error: any) {
+      console.error('❌ Error fetching clinics for dropdown:', error);
+      return [];
+    }
+  };
+
+  /**
+   * Sync local clinics with database
+   */
+  const syncWithDatabase = async (localClinics: Clinic[]): Promise<Clinic[]> => {
+    try {
+      const dbClinics = await fetchAllClinics();
+      
+      // Merge strategy: prefer database data
+      const merged = new Map<number, Clinic>();
+      
+      // Add database clinics
+      dbClinics.forEach(clinic => {
+        merged.set(clinic.id, clinic);
+      });
+      
+      // Add local clinics that don't exist in DB
+      localClinics.forEach(localClinic => {
+        if (!merged.has(localClinic.id)) {
+          merged.set(localClinic.id, localClinic);
+        }
+      });
+      
+      return Array.from(merged.values());
+    } catch (error: any) {
+      console.error('❌ Error syncing clinics with database:', error);
+      // Return local clinics as fallback
+      return localClinics;
+    }
+  };
+
+  return {
+    fetchAllClinics,
+    fetchClinic,
+    fetchClinicByKode,
+    createClinic,
+    updateClinic,
+    deleteClinic,
+    fetchClinicsForDropdown,
+    syncWithDatabase,
+  };
+};
+
diff --git a/composables/useQueueAPI.ts b/composables/useQueueAPI.ts
new file mode 100644
index 0000000..ce36825
--- /dev/null
+++ b/composables/useQueueAPI.ts
@@ -0,0 +1,193 @@
+// composables/useQueueAPI.ts
+// Composable untuk API calls terkait antrian pasien
+
+export interface Patient {
+  no: number;
+  jamPanggil: string;
+  barcode: string;
+  noAntrian: string;
+  shift: string;
+  klinik: string;
+  fastTrack: string;
+  pembayaran: string;
+  status: 'waiting' | 'pending' | 'di-loket' | 'di-klinik' | 'selesai' | 'terlambat';
+  processStage: 'loket' | 'klinik' | 'penunjang';
+  createdAt: string;
+  registrationType?: 'online' | 'onsite';
+  visitType?: string;
+  visitDate?: string;
+}
+
+export interface QueueAPIResponse<T = any> {
+  success: boolean;
+  data?: T;
+  message?: string;
+  error?: string;
+}
+
+export const useQueueAPI = () => {
+  const config = useRuntimeConfig();
+  const baseURL = config.public.apiBaseUrl || '/api/queue';
+
+  /**
+   * Fetch all patients from database
+   */
+  const fetchAllPatients = async (): Promise<Patient[]> => {
+    try {
+      const response = await $fetch<QueueAPIResponse<Patient[]>>(`${baseURL}/patients`, {
+        method: 'GET',
+      });
+
+      if (response.success && response.data) {
+        return response.data;
+      }
+      throw new Error(response.message || 'Failed to fetch patients');
+    } catch (error: any) {
+      console.error('❌ Error fetching patients:', error);
+      throw error;
+    }
+  };
+
+  /**
+   * Fetch single patient by ID or barcode
+   */
+  const fetchPatient = async (idOrBarcode: string): Promise<Patient | null> => {
+    try {
+      const response = await $fetch<QueueAPIResponse<Patient>>(`${baseURL}/patients/${idOrBarcode}`, {
+        method: 'GET',
+      });
+
+      if (response.success && response.data) {
+        return response.data;
+      }
+      return null;
+    } catch (error: any) {
+      console.error('❌ Error fetching patient:', error);
+      return null;
+    }
+  };
+
+  /**
+   * Create new patient (register from Anjungan)
+   */
+  const createPatient = async (patientData: Partial<Patient>): Promise<Patient> => {
+    try {
+      const response = await $fetch<QueueAPIResponse<Patient>>(`${baseURL}/patients`, {
+        method: 'POST',
+        body: patientData,
+      });
+
+      if (response.success && response.data) {
+        return response.data;
+      }
+      throw new Error(response.message || 'Failed to create patient');
+    } catch (error: any) {
+      console.error('❌ Error creating patient:', error);
+      throw error;
+    }
+  };
+
+  /**
+   * Update patient status (check-in, process, etc)
+   */
+  const updatePatient = async (
+    idOrBarcode: string,
+    updates: Partial<Patient>
+  ): Promise<Patient> => {
+    try {
+      const response = await $fetch<QueueAPIResponse<Patient>>(
+        `${baseURL}/patients/${idOrBarcode}`,
+        {
+          method: 'PATCH',
+          body: updates,
+        }
+      );
+
+      if (response.success && response.data) {
+        return response.data;
+      }
+      throw new Error(response.message || 'Failed to update patient');
+    } catch (error: any) {
+      console.error('❌ Error updating patient:', error);
+      throw error;
+    }
+  };
+
+  /**
+   * Check-in patient (update status to di-loket)
+   */
+  const checkInPatient = async (idOrBarcode: string): Promise<Patient> => {
+    return updatePatient(idOrBarcode, { status: 'di-loket' });
+  };
+
+  /**
+   * Process patient at loket (update status and processStage)
+   */
+  const processPatientAtLoket = async (
+    idOrBarcode: string,
+    updates: { status?: string; processStage?: string }
+  ): Promise<Patient> => {
+    return updatePatient(idOrBarcode, updates);
+  };
+
+  /**
+   * Sync local state with database
+   */
+  const syncWithDatabase = async (localPatients: Patient[]): Promise<Patient[]> => {
+    try {
+      // Fetch latest from database
+      const dbPatients = await fetchAllPatients();
+      
+      // Merge strategy: prefer database data, but keep local if newer
+      const merged = new Map<string, Patient>();
+      
+      // Add database patients
+      dbPatients.forEach(patient => {
+        merged.set(patient.barcode, patient);
+      });
+      
+      // Add local patients that don't exist in DB or are newer
+      localPatients.forEach(localPatient => {
+        const existing = merged.get(localPatient.barcode);
+        if (!existing || new Date(localPatient.createdAt) > new Date(existing.createdAt)) {
+          merged.set(localPatient.barcode, localPatient);
+        }
+      });
+      
+      return Array.from(merged.values());
+    } catch (error: any) {
+      console.error('❌ Error syncing with database:', error);
+      // Return local patients as fallback
+      return localPatients;
+    }
+  };
+
+  /**
+   * Batch sync: save multiple patients to database
+   */
+  const batchSyncPatients = async (patients: Patient[]): Promise<boolean> => {
+    try {
+      const response = await $fetch<QueueAPIResponse>(`${baseURL}/patients/batch`, {
+        method: 'POST',
+        body: { patients },
+      });
+
+      return response.success || false;
+    } catch (error: any) {
+      console.error('❌ Error batch syncing patients:', error);
+      return false;
+    }
+  };
+
+  return {
+    fetchAllPatients,
+    fetchPatient,
+    createPatient,
+    updatePatient,
+    checkInPatient,
+    processPatientAtLoket,
+    syncWithDatabase,
+    batchSyncPatients,
+  };
+};
+
diff --git a/docs/API_ENDPOINTS_CLINIC_DOCTOR.md b/docs/API_ENDPOINTS_CLINIC_DOCTOR.md
new file mode 100644
index 0000000..5e1ff0a
--- /dev/null
+++ b/docs/API_ENDPOINTS_CLINIC_DOCTOR.md
@@ -0,0 +1,1538 @@
+# 📋 API Endpoints - Clinic (Poli) & Doctor
+
+Dokumen ini berisi list lengkap endpoints API yang diperlukan untuk data **Clinic (Poli)** dan **Doctor** 
+---
+
+## 📊 Base URL
+
+```
+Base URL: /api
+```
+
+---
+
+## 🏥 CLINIC (POLI) ENDPOINTS
+
+### **1. Get All Clinics**
+
+**Endpoint:** `GET /api/clinics`
+
+**Description:** Mengambil semua data klinik/poli
+
+**Query Parameters:**
+- `available` (optional, boolean): Filter berdasarkan status available
+- `search` (optional, string): Search by name atau kode
+- `page` (optional, number): Page number untuk pagination
+- `limit` (optional, number): Items per page
+
+**Response:**
+```json
+{
+  "success": true,
+  "data": [
+    {
+      "id": 1,
+      "kode": "AN",
+      "name": "ANAK",
+      "subtitle": "",
+      "icon": "mdi-baby-face",
+      "shift": "SHIFT 1",
+      "schedule": "Mulai Pukul 07:00",
+      "available": true,
+      "doctors": ["dr. Sarah Putri, Sp.A", "dr. Andi Wijaya, Sp.A"],
+      "shifts": [
+        { "name": "Shift 1", "quota": 15 },
+        { "name": "Shift 2", "quota": 20 }
+      ],
+      "totalQuota": 1000,
+      "jamShiftList": [
+        { "dari": "07:00", "sampai": "11:00", "kuota": 1000 }
+      ],
+      "autoShift": false,
+      "jadwalKlinik": ["Senin", "Rabu", "Jumat"],
+      "createdAt": "2024-01-01T00:00:00.000Z",
+      "updatedAt": "2024-01-01T00:00:00.000Z"
+    }
+  ],
+  "pagination": {
+    "page": 1,
+    "limit": 10,
+    "total": 23,
+    "totalPages": 3
+  }
+}
+```
+
+---
+
+### **2. Get Clinic by ID**
+
+**Endpoint:** `GET /api/clinics/:id`
+
+**Description:** Mengambil data klinik berdasarkan ID
+
+**Path Parameters:**
+- `id` (number): Clinic ID
+
+**Response:**
+```json
+{
+  "success": true,
+  "data": {
+    "id": 1,
+    "kode": "AN",
+    "name": "ANAK",
+    "subtitle": "",
+    "icon": "mdi-baby-face",
+    "shift": "SHIFT 1",
+    "schedule": "Mulai Pukul 07:00",
+    "available": true,
+    "doctors": ["dr. Sarah Putri, Sp.A", "dr. Andi Wijaya, Sp.A"],
+    "shifts": [
+      { "name": "Shift 1", "quota": 15 },
+      { "name": "Shift 2", "quota": 20 }
+    ],
+    "totalQuota": 1000,
+    "jamShiftList": [
+      { "dari": "07:00", "sampai": "11:00", "kuota": 1000 }
+    ],
+    "autoShift": false,
+    "jadwalKlinik": ["Senin", "Rabu", "Jumat"],
+    "createdAt": "2024-01-01T00:00:00.000Z",
+    "updatedAt": "2024-01-01T00:00:00.000Z"
+  }
+}
+```
+
+---
+
+### **3. Get Clinic by Kode**
+
+**Endpoint:** `GET /api/clinics/kode/:kode`
+
+**Description:** Mengambil data klinik berdasarkan kode
+
+**Path Parameters:**
+- `kode` (string): Clinic kode (e.g., "AN", "AS", "BD")
+
+**Response:**
+```json
+{
+  "success": true,
+  "data": {
+    "id": 1,
+    "kode": "AN",
+    "name": "ANAK",
+    // ... same structure as Get by ID
+  }
+}
+```
+
+---
+
+### **4. Get Clinics for Dropdown**
+
+**Endpoint:** `GET /api/clinics/dropdown`
+
+**Description:** Mengambil data klinik dalam format yang dioptimalkan untuk dropdown
+
+**Query Parameters:**
+- `available` (optional, boolean): Hanya ambil yang available
+
+**Response:**
+```json
+{
+  "success": true,
+  "data": [
+    {
+      "id": 1,
+      "kode": "AN",
+      "name": "ANAK",
+      "icon": "mdi-baby-face",
+      "available": true
+    }
+  ]
+}
+```
+
+---
+
+### **5. Create Clinic**
+
+**Endpoint:** `POST /api/clinics`
+
+**Description:** Membuat klinik baru
+
+**Request Body:**
+```json
+{
+  "kode": "AN",
+  "name": "ANAK",
+  "subtitle": "",
+  "icon": "mdi-baby-face",
+  "shift": "SHIFT 1",
+  "schedule": "Mulai Pukul 07:00",
+  "available": true,
+  "doctors": ["dr. Sarah Putri, Sp.A"],
+  "shifts": [
+    { "name": "Shift 1", "quota": 15 },
+    { "name": "Shift 2", "quota": 20 }
+  ],
+  "totalQuota": 1000,
+  "jamShiftList": [
+    { "dari": "07:00", "sampai": "11:00", "kuota": 1000 }
+  ],
+  "autoShift": false,
+  "jadwalKlinik": ["Senin", "Rabu", "Jumat"]
+}
+```
+
+**Response:**
+```json
+{
+  "success": true,
+  "data": {
+    "id": 24,
+    "kode": "AN",
+    "name": "ANAK",
+    // ... full clinic object
+    "createdAt": "2024-01-01T00:00:00.000Z"
+  },
+  "message": "Clinic berhasil dibuat"
+}
+```
+
+---
+
+### **6. Update Clinic**
+
+**Endpoint:** `PATCH /api/clinics/:id`
+
+**Description:** Update data klinik
+
+**Path Parameters:**
+- `id` (number): Clinic ID
+
+**Request Body:**
+```json
+{
+  "name": "ANAK (Updated)",
+  "available": false,
+  "totalQuota": 1200,
+  "jamShiftList": [
+    { "dari": "07:00", "sampai": "11:00", "kuota": 1200 }
+  ]
+}
+```
+
+**Response:**
+```json
+{
+  "success": true,
+  "data": {
+    "id": 1,
+    // ... updated clinic object
+    "updatedAt": "2024-01-01T00:00:00.000Z"
+  },
+  "message": "Clinic berhasil diupdate"
+}
+```
+
+---
+
+### **7. Update Clinic Master Config**
+
+**Endpoint:** `PATCH /api/clinics/:id/master-config`
+
+**Description:** Update hanya master config (totalQuota, jamShiftList, autoShift, jadwalKlinik)
+
+**Path Parameters:**
+- `id` (number): Clinic ID
+
+**Request Body:**
+```json
+{
+  "totalQuota": 1200,
+  "jamShiftList": [
+    { "dari": "07:00", "sampai": "11:00", "kuota": 800 },
+    { "dari": "13:00", "sampai": "16:00", "kuota": 400 }
+  ],
+  "autoShift": true,
+  "jadwalKlinik": ["Senin", "Selasa", "Rabu", "Kamis", "Jum'at"]
+}
+```
+
+**Response:**
+```json
+{
+  "success": true,
+  "data": {
+    "id": 1,
+    // ... clinic object with updated master config
+    "updatedAt": "2024-01-01T00:00:00.000Z"
+  },
+  "message": "Master config berhasil diupdate"
+}
+```
+
+---
+
+### **8. Delete Clinic**
+
+**Endpoint:** `DELETE /api/clinics/:id`
+
+**Description:** Menghapus klinik
+
+**Path Parameters:**
+- `id` (number): Clinic ID
+
+**Response:**
+```json
+{
+  "success": true,
+  "message": "Clinic berhasil dihapus"
+}
+```
+
+---
+
+### **9. Batch Sync Clinics**
+
+**Endpoint:** `POST /api/clinics/batch`
+
+**Description:** Sync multiple clinics dengan database (untuk offline-first scenarios)
+
+**Request Body:**
+```json
+{
+  "clinics": [
+    {
+      "id": 1,
+      "kode": "AN",
+      "name": "ANAK",
+      // ... full clinic object
+    }
+  ]
+}
+```
+
+**Response:**
+```json
+{
+  "success": true,
+  "data": [
+    // ... array of synced clinics
+  ],
+  "message": "Batch sync berhasil. 23 clinics synced."
+}
+```
+
+---
+
+## 👨‍⚕️ DOCTOR ENDPOINTS
+
+### **10. Get All Doctors**
+
+**Endpoint:** `GET /api/doctors`
+
+**Description:** Mengambil semua data dokter
+
+**Query Parameters:**
+- `clinicId` (optional, number): Filter by clinic ID
+- `clinicKode` (optional, string): Filter by clinic kode
+- `available` (optional, boolean): Filter by availability
+- `search` (optional, string): Search by name
+- `page` (optional, number): Page number
+- `limit` (optional, number): Items per page
+
+**Response:**
+```json
+{
+  "success": true,
+  "data": [
+    {
+      "id": 1,
+      "name": "dr. Sarah Putri, Sp.A",
+      "specialization": "Sp.A",
+      "nip": "123456789012345678",
+      "clinicIds": [1],
+      "clinics": [
+        {
+          "id": 1,
+          "kode": "AN",
+          "name": "ANAK"
+        }
+      ],
+      "available": true,
+      "schedules": [
+        {
+          "clinicId": 1,
+          "day": "Senin",
+          "shift": "Shift 1",
+          "startTime": "07:00",
+          "endTime": "11:00",
+          "quota": 15
+        }
+      ],
+      "createdAt": "2024-01-01T00:00:00.000Z",
+      "updatedAt": "2024-01-01T00:00:00.000Z"
+    }
+  ],
+  "pagination": {
+    "page": 1,
+    "limit": 10,
+    "total": 50,
+    "totalPages": 5
+  }
+}
+```
+
+---
+
+### **11. Get Doctor by ID**
+
+**Endpoint:** `GET /api/doctors/:id`
+
+**Description:** Mengambil data dokter berdasarkan ID
+
+**Path Parameters:**
+- `id` (number): Doctor ID
+
+**Response:**
+```json
+{
+  "success": true,
+  "data": {
+    "id": 1,
+    "name": "dr. Sarah Putri, Sp.A",
+    "specialization": "Sp.A",
+    "nip": "123456789012345678",
+    "clinicIds": [1],
+    "clinics": [
+      {
+        "id": 1,
+        "kode": "AN",
+        "name": "ANAK"
+      }
+    ],
+    "available": true,
+    "schedules": [
+      {
+        "clinicId": 1,
+        "day": "Senin",
+        "shift": "Shift 1",
+        "startTime": "07:00",
+        "endTime": "11:00",
+        "quota": 15
+      }
+    ],
+    "createdAt": "2024-01-01T00:00:00.000Z",
+    "updatedAt": "2024-01-01T00:00:00.000Z"
+  }
+}
+```
+
+---
+
+### **12. Get Doctors by Clinic**
+
+**Endpoint:** `GET /api/clinics/:clinicId/doctors`
+
+**Description:** Mengambil semua dokter yang terdaftar di klinik tertentu
+
+**Path Parameters:**
+- `clinicId` (number): Clinic ID
+
+**Response:**
+```json
+{
+  "success": true,
+  "data": [
+    {
+      "id": 1,
+      "name": "dr. Sarah Putri, Sp.A",
+      "specialization": "Sp.A",
+      "nip": "123456789012345678",
+      "available": true,
+      "schedules": [
+        {
+          "day": "Senin",
+          "shift": "Shift 1",
+          "startTime": "07:00",
+          "endTime": "11:00",
+          "quota": 15
+        }
+      ]
+    }
+  ]
+}
+```
+
+---
+
+### **13. Get Doctors by Clinic Kode**
+
+**Endpoint:** `GET /api/clinics/kode/:kode/doctors`
+
+**Description:** Mengambil semua dokter yang terdaftar di klinik berdasarkan kode
+
+**Path Parameters:**
+- `kode` (string): Clinic kode (e.g., "AN", "AS")
+
+**Response:**
+```json
+{
+  "success": true,
+  "data": [
+    {
+      "id": 1,
+      "name": "dr. Sarah Putri, Sp.A",
+      // ... same structure as Get Doctors by Clinic
+    }
+  ]
+}
+```
+
+---
+
+### **14. Create Doctor**
+
+**Endpoint:** `POST /api/doctors`
+
+**Description:** Membuat dokter baru
+
+**Request Body:**
+```json
+{
+  "name": "dr. Sarah Putri, Sp.A",
+  "specialization": "Sp.A",
+  "nip": "123456789012345678",
+  "clinicIds": [1],
+  "available": true,
+  "schedules": [
+    {
+      "clinicId": 1,
+      "day": "Senin",
+      "shift": "Shift 1",
+      "startTime": "07:00",
+      "endTime": "11:00",
+      "quota": 15
+    }
+  ]
+}
+```
+
+**Response:**
+```json
+{
+  "success": true,
+  "data": {
+    "id": 51,
+    "name": "dr. Sarah Putri, Sp.A",
+    // ... full doctor object
+    "createdAt": "2024-01-01T00:00:00.000Z"
+  },
+  "message": "Doctor berhasil dibuat"
+}
+```
+
+---
+
+### **15. Update Doctor**
+
+**Endpoint:** `PATCH /api/doctors/:id`
+
+**Description:** Update data dokter
+
+**Path Parameters:**
+- `id` (number): Doctor ID
+
+**Request Body:**
+```json
+{
+  "name": "dr. Sarah Putri, Sp.A (Updated)",
+  "available": false,
+  "schedules": [
+    {
+      "clinicId": 1,
+      "day": "Senin",
+      "shift": "Shift 1",
+      "startTime": "08:00",
+      "endTime": "12:00",
+      "quota": 20
+    }
+  ]
+}
+```
+
+**Response:**
+```json
+{
+  "success": true,
+  "data": {
+    "id": 1,
+    // ... updated doctor object
+    "updatedAt": "2024-01-01T00:00:00.000Z"
+  },
+  "message": "Doctor berhasil diupdate"
+}
+```
+
+---
+
+### **16. Delete Doctor**
+
+**Endpoint:** `DELETE /api/doctors/:id`
+
+**Description:** Menghapus dokter
+
+**Path Parameters:**
+- `id` (number): Doctor ID
+
+**Response:**
+```json
+{
+  "success": true,
+  "message": "Doctor berhasil dihapus"
+}
+```
+
+---
+
+### **17. Assign Doctor to Clinic**
+
+**Endpoint:** `POST /api/clinics/:clinicId/doctors/:doctorId`
+
+**Description:** Assign dokter ke klinik
+
+**Path Parameters:**
+- `clinicId` (number): Clinic ID
+- `doctorId` (number): Doctor ID
+
+**Request Body (optional):**
+```json
+{
+  "schedules": [
+    {
+      "day": "Senin",
+      "shift": "Shift 1",
+      "startTime": "07:00",
+      "endTime": "11:00",
+      "quota": 15
+    }
+  ]
+}
+```
+
+**Response:**
+```json
+{
+  "success": true,
+  "data": {
+    "clinicId": 1,
+    "doctorId": 1,
+    "schedules": [
+      {
+        "day": "Senin",
+        "shift": "Shift 1",
+        "startTime": "07:00",
+        "endTime": "11:00",
+        "quota": 15
+      }
+    ]
+  },
+  "message": "Doctor berhasil di-assign ke clinic"
+}
+```
+
+---
+
+### **18. Unassign Doctor from Clinic**
+
+**Endpoint:** `DELETE /api/clinics/:clinicId/doctors/:doctorId`
+
+**Description:** Unassign dokter dari klinik
+
+**Path Parameters:**
+- `clinicId` (number): Clinic ID
+- `doctorId` (number): Doctor ID
+
+**Response:**
+```json
+{
+  "success": true,
+  "message": "Doctor berhasil di-unassign dari clinic"
+}
+```
+
+---
+
+### **19. Get Doctor Schedules**
+
+**Endpoint:** `GET /api/doctors/:id/schedules`
+
+**Description:** Mengambil jadwal dokter
+
+**Path Parameters:**
+- `id` (number): Doctor ID
+
+**Query Parameters:**
+- `clinicId` (optional, number): Filter by clinic
+- `day` (optional, string): Filter by day (e.g., "Senin")
+- `date` (optional, string): Filter by specific date (YYYY-MM-DD)
+
+**Response:**
+```json
+{
+  "success": true,
+  "data": [
+    {
+      "id": 1,
+      "doctorId": 1,
+      "clinicId": 1,
+      "clinic": {
+        "id": 1,
+        "kode": "AN",
+        "name": "ANAK"
+      },
+      "day": "Senin",
+      "shift": "Shift 1",
+      "startTime": "07:00",
+      "endTime": "11:00",
+      "quota": 15,
+      "available": true,
+      "createdAt": "2024-01-01T00:00:00.000Z"
+    }
+  ]
+}
+```
+
+---
+
+### **20. Update Doctor Schedule**
+
+**Endpoint:** `PATCH /api/doctors/:doctorId/schedules/:scheduleId`
+
+**Description:** Update jadwal dokter
+
+**Path Parameters:**
+- `doctorId` (number): Doctor ID
+- `scheduleId` (number): Schedule ID
+
+**Request Body:**
+```json
+{
+  "day": "Selasa",
+  "shift": "Shift 2",
+  "startTime": "13:00",
+  "endTime": "17:00",
+  "quota": 20,
+  "available": true
+}
+```
+
+**Response:**
+```json
+{
+  "success": true,
+  "data": {
+    "id": 1,
+    // ... updated schedule object
+    "updatedAt": "2024-01-01T00:00:00.000Z"
+  },
+  "message": "Schedule berhasil diupdate"
+}
+```
+
+---
+
+### **21. Batch Sync Doctors**
+
+**Endpoint:** `POST /api/doctors/batch`
+
+**Description:** Sync multiple doctors dengan database
+
+**Request Body:**
+```json
+{
+  "doctors": [
+    {
+      "id": 1,
+      "name": "dr. Sarah Putri, Sp.A",
+      // ... full doctor object
+    }
+  ]
+}
+```
+
+**Response:**
+```json
+{
+  "success": true,
+  "data": [
+    // ... array of synced doctors
+  ],
+  "message": "Batch sync berhasil. 50 doctors synced."
+}
+```
+
+---
+
+## 📋 DATA STRUCTURES
+
+### **Clinic Object**
+```typescript
+interface Clinic {
+  id: number;
+  kode: string;                    // Unique code (e.g., "AN", "AS")
+  name: string;                    // Clinic name
+  subtitle?: string;               // Optional subtitle
+  icon?: string;                   // Material Design icon name
+  shift?: string;                  // Default shift (e.g., "SHIFT 1")
+  schedule?: string;               // Schedule text (e.g., "Mulai Pukul 07:00")
+  available: boolean;              // Is clinic available
+  doctors?: string[];              // Array of doctor names (legacy format)
+  shifts?: Array<{                 // Shift quotas
+    name: string;
+    quota: number;
+  }>;
+  // Master config
+  totalQuota?: number;             // Total quota
+  jamShiftList?: Array<{           // Time slots with quotas
+    dari: string;                  // Start time (HH:mm)
+    sampai: string;                // End time (HH:mm)
+    kuota: number;                 // Quota for this time slot
+  }>;
+  autoShift?: boolean;             // Auto shift enabled
+  jadwalKlinik?: string[];        // Operating days (e.g., ["Senin", "Rabu"])
+  createdAt: string;               // ISO 8601 timestamp
+  updatedAt: string;               // ISO 8601 timestamp
+}
+```
+
+### **Doctor Object**
+```typescript
+interface Doctor {
+  id: number;
+  name: string;                    // Full name (e.g., "dr. Sarah Putri, Sp.A")
+  specialization?: string;        // Specialization (e.g., "Sp.A")
+  nip?: string;                    // NIP (Nomor Induk Pegawai)
+  clinicIds?: number[];            // Array of clinic IDs
+  clinics?: Array<{                // Clinic details
+    id: number;
+    kode: string;
+    name: string;
+  }>;
+  available: boolean;               // Is doctor available
+  schedules?: Array<{               // Doctor schedules
+    id?: number;
+    clinicId: number;
+    day: string;                   // Day name (e.g., "Senin")
+    shift: string;                 // Shift name (e.g., "Shift 1")
+    startTime: string;             // Start time (HH:mm)
+    endTime: string;               // End time (HH:mm)
+    quota: number;                 // Quota for this schedule
+    available?: boolean;            // Is this schedule available
+  }>;
+  createdAt: string;               // ISO 8601 timestamp
+  updatedAt: string;               // ISO 8601 timestamp
+}
+```
+
+---
+
+## 🔐 AUTHENTICATION & AUTHORIZATION
+
+Semua endpoints memerlukan authentication token (jika diperlukan):
+
+**Headers:**
+```
+Authorization: Bearer <token>
+Content-Type: application/json
+```
+
+---
+
+## ⚠️ ERROR RESPONSES
+
+Semua endpoints mengembalikan error dalam format yang konsisten:
+
+```json
+{
+  "success": false,
+  "error": "Error message",
+  "code": "ERROR_CODE",
+  "details": {
+    // Additional error details
+  }
+}
+```
+
+**Common HTTP Status Codes:**
+- `200 OK` - Success
+- `201 Created` - Resource created
+- `400 Bad Request` - Invalid request
+- `401 Unauthorized` - Authentication required
+- `403 Forbidden` - Insufficient permissions
+- `404 Not Found` - Resource not found
+- `409 Conflict` - Resource conflict (e.g., duplicate kode)
+- `500 Internal Server Error` - Server error
+
+---
+
+## 📝 NOTES
+
+1. **Pagination:** Endpoints yang support pagination akan mengembalikan `pagination` object
+2. **Filtering:** Query parameters untuk filtering bersifat optional
+3. **Search:** Search biasanya case-insensitive dan search di multiple fields
+4. **Dates:** Semua tanggal menggunakan format ISO 8601 (YYYY-MM-DDTHH:mm:ss.sssZ)
+5. **Times:** Semua waktu menggunakan format 24-hour (HH:mm)
+
+---
+
+## 🚀 PRIORITY ENDPOINTS (Untuk Prototype)
+
+### **High Priority (Must Have):**
+1. ✅ `GET /api/clinics` - Get all clinics
+2. ✅ `GET /api/clinics/:id` - Get clinic by ID
+3. ✅ `GET /api/clinics/kode/:kode` - Get clinic by kode
+4. ✅ `GET /api/clinics/dropdown` - Get clinics for dropdown
+5. ✅ `GET /api/clinics/:clinicId/doctors` - Get doctors by clinic
+6. ✅ `GET /api/doctors` - Get all doctors
+
+### **Medium Priority (Should Have):**
+7. ✅ `POST /api/clinics` - Create clinic
+8. ✅ `PATCH /api/clinics/:id` - Update clinic
+9. ✅ `PATCH /api/clinics/:id/master-config` - Update master config
+10. ✅ `POST /api/doctors` - Create doctor
+11. ✅ `PATCH /api/doctors/:id` - Update doctor
+
+### **Low Priority (Nice to Have):**
+12. ✅ `DELETE /api/clinics/:id` - Delete clinic
+13. ✅ `DELETE /api/doctors/:id` - Delete doctor
+14. ✅ `POST /api/clinics/:clinicId/doctors/:doctorId` - Assign doctor
+15. ✅ `DELETE /api/clinics/:clinicId/doctors/:doctorId` - Unassign doctor
+16. ✅ `GET /api/doctors/:id/schedules` - Get doctor schedules
+17. ✅ `POST /api/clinics/batch` - Batch sync clinics
+18. ✅ `POST /api/doctors/batch` - Batch sync doctors
+
+---
+
+---
+
+## 🗄️ DATABASE SCHEMA DESIGN
+
+Bagian ini berisi referensi lengkap untuk **Database Specialist** untuk mengatur struktur database.
+
+---
+
+### **Database Tables**
+
+#### **1. Table: `clinics`**
+
+**Description:** Tabel untuk menyimpan data klinik/poli
+
+**Schema:**
+```sql
+CREATE TABLE clinics (
+  id BIGSERIAL PRIMARY KEY,
+  kode VARCHAR(10) UNIQUE NOT NULL,
+  name VARCHAR(255) NOT NULL,
+  subtitle VARCHAR(255) DEFAULT '',
+  icon VARCHAR(100) DEFAULT NULL,
+  shift VARCHAR(50) DEFAULT NULL,
+  schedule VARCHAR(255) DEFAULT NULL,
+  available BOOLEAN DEFAULT true,
+  total_quota INTEGER DEFAULT 0,
+  auto_shift BOOLEAN DEFAULT false,
+  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+  updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
+
+-- Indexes
+CREATE INDEX idx_clinics_kode ON clinics(kode);
+CREATE INDEX idx_clinics_available ON clinics(available);
+CREATE INDEX idx_clinics_name ON clinics(name);
+```
+
+**Columns:**
+- `id` (BIGSERIAL) - Primary key, auto increment
+- `kode` (VARCHAR(10)) - Unique clinic code (e.g., "AN", "AS")
+- `name` (VARCHAR(255)) - Clinic name
+- `subtitle` (VARCHAR(255)) - Optional subtitle
+- `icon` (VARCHAR(100)) - Material Design icon name
+- `shift` (VARCHAR(50)) - Default shift (e.g., "SHIFT 1")
+- `schedule` (VARCHAR(255)) - Schedule text
+- `available` (BOOLEAN) - Is clinic available
+- `total_quota` (INTEGER) - Total quota
+- `auto_shift` (BOOLEAN) - Auto shift enabled
+- `created_at` (TIMESTAMP) - Creation timestamp
+- `updated_at` (TIMESTAMP) - Last update timestamp
+
+---
+
+#### **2. Table: `clinic_schedules`**
+
+**Description:** Tabel untuk menyimpan jadwal operasional klinik
+
+**Schema:**
+```sql
+CREATE TABLE clinic_schedules (
+  id BIGSERIAL PRIMARY KEY,
+  clinic_id BIGINT NOT NULL REFERENCES clinics(id) ON DELETE CASCADE,
+  day_name VARCHAR(20) NOT NULL, -- e.g., "Senin", "Selasa"
+  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+  updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+  UNIQUE(clinic_id, day_name)
+);
+
+-- Indexes
+CREATE INDEX idx_clinic_schedules_clinic_id ON clinic_schedules(clinic_id);
+CREATE INDEX idx_clinic_schedules_day ON clinic_schedules(day_name);
+```
+
+**Columns:**
+- `id` (BIGSERIAL) - Primary key
+- `clinic_id` (BIGINT) - Foreign key to clinics
+- `day_name` (VARCHAR(20)) - Day name (e.g., "Senin", "Selasa")
+- `created_at` (TIMESTAMP) - Creation timestamp
+- `updated_at` (TIMESTAMP) - Last update timestamp
+
+---
+
+#### **3. Table: `clinic_shift_schedules`**
+
+**Description:** Tabel untuk menyimpan jam shift dan kuota per shift
+
+**Schema:**
+```sql
+CREATE TABLE clinic_shift_schedules (
+  id BIGSERIAL PRIMARY KEY,
+  clinic_id BIGINT NOT NULL REFERENCES clinics(id) ON DELETE CASCADE,
+  dari TIME NOT NULL, -- Start time (e.g., "07:00")
+  sampai TIME NOT NULL, -- End time (e.g., "11:00")
+  kuota INTEGER NOT NULL DEFAULT 0,
+  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+  updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
+
+-- Indexes
+CREATE INDEX idx_clinic_shift_schedules_clinic_id ON clinic_shift_schedules(clinic_id);
+```
+
+**Columns:**
+- `id` (BIGSERIAL) - Primary key
+- `clinic_id` (BIGINT) - Foreign key to clinics
+- `dari` (TIME) - Start time
+- `sampai` (TIME) - End time
+- `kuota` (INTEGER) - Quota for this time slot
+- `created_at` (TIMESTAMP) - Creation timestamp
+- `updated_at` (TIMESTAMP) - Last update timestamp
+
+---
+
+#### **4. Table: `doctors`**
+
+**Description:** Tabel untuk menyimpan data dokter
+
+**Schema:**
+```sql
+CREATE TABLE doctors (
+  id BIGSERIAL PRIMARY KEY,
+  name VARCHAR(255) NOT NULL,
+  specialization VARCHAR(100) DEFAULT NULL, -- e.g., "Sp.A", "Sp.B"
+  nip VARCHAR(50) UNIQUE DEFAULT NULL, -- Nomor Induk Pegawai
+  available BOOLEAN DEFAULT true,
+  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+  updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
+
+-- Indexes
+CREATE INDEX idx_doctors_name ON doctors(name);
+CREATE INDEX idx_doctors_specialization ON doctors(specialization);
+CREATE INDEX idx_doctors_available ON doctors(available);
+CREATE INDEX idx_doctors_nip ON doctors(nip);
+```
+
+**Columns:**
+- `id` (BIGSERIAL) - Primary key
+- `name` (VARCHAR(255)) - Full doctor name
+- `specialization` (VARCHAR(100)) - Specialization
+- `nip` (VARCHAR(50)) - NIP (unique)
+- `available` (BOOLEAN) - Is doctor available
+- `created_at` (TIMESTAMP) - Creation timestamp
+- `updated_at` (TIMESTAMP) - Last update timestamp
+
+---
+
+#### **5. Table: `clinic_doctors`**
+
+**Description:** Tabel junction untuk relasi many-to-many antara clinics dan doctors
+
+**Schema:**
+```sql
+CREATE TABLE clinic_doctors (
+  id BIGSERIAL PRIMARY KEY,
+  clinic_id BIGINT NOT NULL REFERENCES clinics(id) ON DELETE CASCADE,
+  doctor_id BIGINT NOT NULL REFERENCES doctors(id) ON DELETE CASCADE,
+  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+  updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+  UNIQUE(clinic_id, doctor_id)
+);
+
+-- Indexes
+CREATE INDEX idx_clinic_doctors_clinic_id ON clinic_doctors(clinic_id);
+CREATE INDEX idx_clinic_doctors_doctor_id ON clinic_doctors(doctor_id);
+CREATE INDEX idx_clinic_doctors_composite ON clinic_doctors(clinic_id, doctor_id);
+```
+
+**Columns:**
+- `id` (BIGSERIAL) - Primary key
+- `clinic_id` (BIGINT) - Foreign key to clinics
+- `doctor_id` (BIGINT) - Foreign key to doctors
+- `created_at` (TIMESTAMP) - Creation timestamp
+- `updated_at` (TIMESTAMP) - Last update timestamp
+
+---
+
+#### **6. Table: `doctor_schedules`**
+
+**Description:** Tabel untuk menyimpan jadwal dokter per klinik
+
+**Schema:**
+```sql
+CREATE TABLE doctor_schedules (
+  id BIGSERIAL PRIMARY KEY,
+  doctor_id BIGINT NOT NULL REFERENCES doctors(id) ON DELETE CASCADE,
+  clinic_id BIGINT NOT NULL REFERENCES clinics(id) ON DELETE CASCADE,
+  day_name VARCHAR(20) NOT NULL, -- e.g., "Senin", "Selasa"
+  shift VARCHAR(50) NOT NULL, -- e.g., "Shift 1", "Shift 2"
+  start_time TIME NOT NULL, -- e.g., "07:00"
+  end_time TIME NOT NULL, -- e.g., "11:00"
+  quota INTEGER NOT NULL DEFAULT 0,
+  available BOOLEAN DEFAULT true,
+  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+  updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
+
+-- Indexes
+CREATE INDEX idx_doctor_schedules_doctor_id ON doctor_schedules(doctor_id);
+CREATE INDEX idx_doctor_schedules_clinic_id ON doctor_schedules(clinic_id);
+CREATE INDEX idx_doctor_schedules_day ON doctor_schedules(day_name);
+CREATE INDEX idx_doctor_schedules_composite ON doctor_schedules(doctor_id, clinic_id, day_name);
+```
+
+**Columns:**
+- `id` (BIGSERIAL) - Primary key
+- `doctor_id` (BIGINT) - Foreign key to doctors
+- `clinic_id` (BIGINT) - Foreign key to clinics
+- `day_name` (VARCHAR(20)) - Day name
+- `shift` (VARCHAR(50)) - Shift name
+- `start_time` (TIME) - Start time
+- `end_time` (TIME) - End time
+- `quota` (INTEGER) - Quota for this schedule
+- `available` (BOOLEAN) - Is schedule available
+- `created_at` (TIMESTAMP) - Creation timestamp
+- `updated_at` (TIMESTAMP) - Last update timestamp
+
+---
+
+### **Database Relationships (ERD)**
+
+```
+┌─────────────┐
+│   clinics   │
+├─────────────┤
+│ id (PK)     │
+│ kode (UK)   │
+│ name        │
+│ ...         │
+└──────┬──────┘
+       │
+       │ 1:N
+       │
+       ├─────────────────┐
+       │                 │
+       ▼                 ▼
+┌──────────────────┐  ┌──────────────────────┐
+│clinic_schedules  │  │clinic_shift_schedules │
+├──────────────────┤  ├──────────────────────┤
+│ id (PK)          │  │ id (PK)              │
+│ clinic_id (FK)   │  │ clinic_id (FK)       │
+│ day_name         │  │ dari                 │
+└──────────────────┘  │ sampai               │
+                      │ kuota                │
+                      └──────────────────────┘
+       │
+       │ N:M
+       │
+       ▼
+┌──────────────────┐
+│ clinic_doctors   │
+├──────────────────┤
+│ id (PK)          │
+│ clinic_id (FK)   │──┐
+│ doctor_id (FK)   │──┤
+└──────────────────┘  │
+                      │
+       ┌──────────────┘
+       │
+       │ N:1
+       │
+       ▼
+┌─────────────┐
+│   doctors   │
+├─────────────┤
+│ id (PK)     │
+│ name        │
+│ nip (UK)    │
+│ ...         │
+└──────┬──────┘
+       │
+       │ 1:N
+       │
+       ▼
+┌──────────────────┐
+│doctor_schedules  │
+├──────────────────┤
+│ id (PK)          │
+│ doctor_id (FK)   │
+│ clinic_id (FK)   │
+│ day_name         │
+│ shift            │
+│ start_time       │
+│ end_time         │
+│ quota            │
+└──────────────────┘
+```
+
+---
+
+### **Complete SQL Schema (PostgreSQL)**
+
+```sql
+-- ============================================
+-- CLINICS TABLE
+-- ============================================
+CREATE TABLE clinics (
+  id BIGSERIAL PRIMARY KEY,
+  kode VARCHAR(10) UNIQUE NOT NULL,
+  name VARCHAR(255) NOT NULL,
+  subtitle VARCHAR(255) DEFAULT '',
+  icon VARCHAR(100) DEFAULT NULL,
+  shift VARCHAR(50) DEFAULT NULL,
+  schedule VARCHAR(255) DEFAULT NULL,
+  available BOOLEAN DEFAULT true,
+  total_quota INTEGER DEFAULT 0,
+  auto_shift BOOLEAN DEFAULT false,
+  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+  updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
+
+CREATE INDEX idx_clinics_kode ON clinics(kode);
+CREATE INDEX idx_clinics_available ON clinics(available);
+CREATE INDEX idx_clinics_name ON clinics(name);
+
+-- ============================================
+-- CLINIC SCHEDULES TABLE (Operating Days)
+-- ============================================
+CREATE TABLE clinic_schedules (
+  id BIGSERIAL PRIMARY KEY,
+  clinic_id BIGINT NOT NULL REFERENCES clinics(id) ON DELETE CASCADE,
+  day_name VARCHAR(20) NOT NULL,
+  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+  updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+  UNIQUE(clinic_id, day_name)
+);
+
+CREATE INDEX idx_clinic_schedules_clinic_id ON clinic_schedules(clinic_id);
+CREATE INDEX idx_clinic_schedules_day ON clinic_schedules(day_name);
+
+-- ============================================
+-- CLINIC SHIFT SCHEDULES TABLE (Time Slots)
+-- ============================================
+CREATE TABLE clinic_shift_schedules (
+  id BIGSERIAL PRIMARY KEY,
+  clinic_id BIGINT NOT NULL REFERENCES clinics(id) ON DELETE CASCADE,
+  dari TIME NOT NULL,
+  sampai TIME NOT NULL,
+  kuota INTEGER NOT NULL DEFAULT 0,
+  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+  updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
+
+CREATE INDEX idx_clinic_shift_schedules_clinic_id ON clinic_shift_schedules(clinic_id);
+
+-- ============================================
+-- DOCTORS TABLE
+-- ============================================
+CREATE TABLE doctors (
+  id BIGSERIAL PRIMARY KEY,
+  name VARCHAR(255) NOT NULL,
+  specialization VARCHAR(100) DEFAULT NULL,
+  nip VARCHAR(50) UNIQUE DEFAULT NULL,
+  available BOOLEAN DEFAULT true,
+  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+  updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
+
+CREATE INDEX idx_doctors_name ON doctors(name);
+CREATE INDEX idx_doctors_specialization ON doctors(specialization);
+CREATE INDEX idx_doctors_available ON doctors(available);
+CREATE INDEX idx_doctors_nip ON doctors(nip);
+
+-- ============================================
+-- CLINIC DOCTORS TABLE (Junction Table)
+-- ============================================
+CREATE TABLE clinic_doctors (
+  id BIGSERIAL PRIMARY KEY,
+  clinic_id BIGINT NOT NULL REFERENCES clinics(id) ON DELETE CASCADE,
+  doctor_id BIGINT NOT NULL REFERENCES doctors(id) ON DELETE CASCADE,
+  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+  updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+  UNIQUE(clinic_id, doctor_id)
+);
+
+CREATE INDEX idx_clinic_doctors_clinic_id ON clinic_doctors(clinic_id);
+CREATE INDEX idx_clinic_doctors_doctor_id ON clinic_doctors(doctor_id);
+CREATE INDEX idx_clinic_doctors_composite ON clinic_doctors(clinic_id, doctor_id);
+
+-- ============================================
+-- DOCTOR SCHEDULES TABLE
+-- ============================================
+CREATE TABLE doctor_schedules (
+  id BIGSERIAL PRIMARY KEY,
+  doctor_id BIGINT NOT NULL REFERENCES doctors(id) ON DELETE CASCADE,
+  clinic_id BIGINT NOT NULL REFERENCES clinics(id) ON DELETE CASCADE,
+  day_name VARCHAR(20) NOT NULL,
+  shift VARCHAR(50) NOT NULL,
+  start_time TIME NOT NULL,
+  end_time TIME NOT NULL,
+  quota INTEGER NOT NULL DEFAULT 0,
+  available BOOLEAN DEFAULT true,
+  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+  updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
+
+CREATE INDEX idx_doctor_schedules_doctor_id ON doctor_schedules(doctor_id);
+CREATE INDEX idx_doctor_schedules_clinic_id ON doctor_schedules(clinic_id);
+CREATE INDEX idx_doctor_schedules_day ON doctor_schedules(day_name);
+CREATE INDEX idx_doctor_schedules_composite ON doctor_schedules(doctor_id, clinic_id, day_name);
+
+-- ============================================
+-- TRIGGERS FOR UPDATED_AT
+-- ============================================
+CREATE OR REPLACE FUNCTION update_updated_at_column()
+RETURNS TRIGGER AS $$
+BEGIN
+  NEW.updated_at = CURRENT_TIMESTAMP;
+  RETURN NEW;
+END;
+$$ language 'plpgsql';
+
+CREATE TRIGGER update_clinics_updated_at BEFORE UPDATE ON clinics
+  FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();
+
+CREATE TRIGGER update_clinic_schedules_updated_at BEFORE UPDATE ON clinic_schedules
+  FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();
+
+CREATE TRIGGER update_clinic_shift_schedules_updated_at BEFORE UPDATE ON clinic_shift_schedules
+  FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();
+
+CREATE TRIGGER update_doctors_updated_at BEFORE UPDATE ON doctors
+  FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();
+
+CREATE TRIGGER update_clinic_doctors_updated_at BEFORE UPDATE ON clinic_doctors
+  FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();
+
+CREATE TRIGGER update_doctor_schedules_updated_at BEFORE UPDATE ON doctor_schedules
+  FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();
+```
+
+---
+
+### **Sample Data (Seed Data)**
+
+```sql
+-- ============================================
+-- SAMPLE CLINICS
+-- ============================================
+INSERT INTO clinics (kode, name, icon, shift, schedule, available, total_quota, auto_shift) VALUES
+('AN', 'ANAK', 'mdi-baby-face', 'SHIFT 1', 'Mulai Pukul 07:00', true, 1000, false),
+('AS', 'ANESTESI', 'mdi-face-mask', 'SHIFT 1', 'Mulai Pukul 07:00', true, 1500, false),
+('BD', 'BEDAH', 'mdi-medical-bag', 'SHIFT 1', 'Mulai Pukul 07:00', true, 800, false),
+('IP', 'IPD (PENYAKIT DALAM)', 'mdi-hospital', 'SHIFT 1', 'Mulai Pukul 07:00', true, 900, false),
+('OB', 'KANDUNGAN', 'mdi-human-pregnant', 'SHIFT 1', 'Mulai Pukul 07:00', true, 1000, false);
+
+-- ============================================
+-- SAMPLE CLINIC SCHEDULES
+-- ============================================
+INSERT INTO clinic_schedules (clinic_id, day_name) VALUES
+(1, 'Senin'),
+(1, 'Rabu'),
+(1, 'Jumat'),
+(2, 'Senin'),
+(2, 'Selasa'),
+(2, 'Rabu'),
+(2, 'Kamis'),
+(2, 'Jum''at');
+
+-- ============================================
+-- SAMPLE CLINIC SHIFT SCHEDULES
+-- ============================================
+INSERT INTO clinic_shift_schedules (clinic_id, dari, sampai, kuota) VALUES
+(1, '07:00', '11:00', 1000),
+(2, '07:00', '11:00', 1000),
+(2, '13:00', '16:00', 500),
+(3, '07:00', '11:00', 800);
+
+-- ============================================
+-- SAMPLE DOCTORS
+-- ============================================
+INSERT INTO doctors (name, specialization, nip, available) VALUES
+('dr. Sarah Putri, Sp.A', 'Sp.A', '123456789012345678', true),
+('dr. Andi Wijaya, Sp.A', 'Sp.A', '123456789012345679', true),
+('dr. Ahmad Fauzi, Sp.An', 'Sp.An', '123456789012345680', true),
+('dr. Budi Santoso, Sp.B', 'Sp.B', '123456789012345681', true);
+
+-- ============================================
+-- SAMPLE CLINIC DOCTORS (Assignments)
+-- ============================================
+INSERT INTO clinic_doctors (clinic_id, doctor_id) VALUES
+(1, 1), -- dr. Sarah Putri assigned to ANAK
+(1, 2), -- dr. Andi Wijaya assigned to ANAK
+(2, 3), -- dr. Ahmad Fauzi assigned to ANESTESI
+(3, 4); -- dr. Budi Santoso assigned to BEDAH
+
+-- ============================================
+-- SAMPLE DOCTOR SCHEDULES
+-- ============================================
+INSERT INTO doctor_schedules (doctor_id, clinic_id, day_name, shift, start_time, end_time, quota, available) VALUES
+(1, 1, 'Senin', 'Shift 1', '07:00', '11:00', 15, true),
+(1, 1, 'Rabu', 'Shift 1', '07:00', '11:00', 15, true),
+(2, 1, 'Senin', 'Shift 2', '13:00', '17:00', 20, true),
+(3, 2, 'Senin', 'Shift 1', '07:00', '11:00', 0, true);
+```
+
+---
+
+### **Database Constraints & Rules**
+
+#### **1. Unique Constraints**
+- `clinics.kode` - Must be unique
+- `doctors.nip` - Must be unique (if provided)
+- `clinic_schedules(clinic_id, day_name)` - Unique combination
+- `clinic_doctors(clinic_id, doctor_id)` - Unique combination
+
+#### **2. Foreign Key Constraints**
+- All foreign keys use `ON DELETE CASCADE` to maintain referential integrity
+- When a clinic is deleted, all related records are automatically deleted
+
+#### **3. Data Validation Rules**
+- `kode` must be uppercase (enforce in application or use CHECK constraint)
+- `day_name` should be one of: Senin, Selasa, Rabu, Kamis, Jum'at, Sabtu, Minggu
+- `dari` time must be before `sampai` time
+- `quota` must be >= 0
+
+#### **4. Optional CHECK Constraints**
+
+```sql
+-- Ensure dari < sampai for clinic_shift_schedules
+ALTER TABLE clinic_shift_schedules
+ADD CONSTRAINT check_time_range CHECK (dari < sampai);
+
+-- Ensure quota >= 0
+ALTER TABLE clinic_shift_schedules
+ADD CONSTRAINT check_quota_positive CHECK (kuota >= 0);
+
+ALTER TABLE doctor_schedules
+ADD CONSTRAINT check_doctor_quota_positive CHECK (quota >= 0);
+
+-- Ensure valid day names (optional)
+ALTER TABLE clinic_schedules
+ADD CONSTRAINT check_valid_day CHECK (day_name IN ('Senin', 'Selasa', 'Rabu', 'Kamis', 'Jum''at', 'Sabtu', 'Minggu'));
+
+ALTER TABLE doctor_schedules
+ADD CONSTRAINT check_valid_doctor_day CHECK (day_name IN ('Senin', 'Selasa', 'Rabu', 'Kamis', 'Jum''at', 'Sabtu', 'Minggu'));
+```
+
+---
+
+### **Query Examples for Common Operations**
+
+#### **1. Get Clinic with All Related Data**
+```sql
+SELECT 
+  c.*,
+  ARRAY_AGG(DISTINCT cs.day_name) as jadwal_klinik,
+  ARRAY_AGG(DISTINCT jsonb_build_object(
+    'dari', css.dari,
+    'sampai', css.sampai,
+    'kuota', css.kuota
+  )) as jam_shift_list,
+  ARRAY_AGG(DISTINCT d.name) as doctors
+FROM clinics c
+LEFT JOIN clinic_schedules cs ON c.id = cs.clinic_id
+LEFT JOIN clinic_shift_schedules css ON c.id = css.clinic_id
+LEFT JOIN clinic_doctors cd ON c.id = cd.clinic_id
+LEFT JOIN doctors d ON cd.doctor_id = d.id
+WHERE c.id = 1
+GROUP BY c.id;
+```
+
+#### **2. Get Doctors by Clinic**
+```sql
+SELECT 
+  d.*,
+  ARRAY_AGG(DISTINCT jsonb_build_object(
+    'day', ds.day_name,
+    'shift', ds.shift,
+    'startTime', ds.start_time,
+    'endTime', ds.end_time,
+    'quota', ds.quota
+  )) as schedules
+FROM doctors d
+INNER JOIN clinic_doctors cd ON d.id = cd.doctor_id
+LEFT JOIN doctor_schedules ds ON d.id = ds.doctor_id AND cd.clinic_id = ds.clinic_id
+WHERE cd.clinic_id = 1
+GROUP BY d.id;
+```
+
+#### **3. Get Available Clinics**
+```sql
+SELECT * FROM clinics WHERE available = true ORDER BY name;
+```
+
+#### **4. Get Clinics with Doctor Count**
+```sql
+SELECT 
+  c.*,
+  COUNT(DISTINCT cd.doctor_id) as doctor_count
+FROM clinics c
+LEFT JOIN clinic_doctors cd ON c.id = cd.clinic_id
+GROUP BY c.id;
+```
+
+---
+
+### **Migration Notes**
+
+1. **Database Type:** PostgreSQL recommended (BIGSERIAL, TIMESTAMP support)
+2. **Alternative:** MySQL/MariaDB (use BIGINT AUTO_INCREMENT, DATETIME)
+3. **Alternative:** SQLite (use INTEGER PRIMARY KEY AUTOINCREMENT, TEXT for timestamps)
+
+**For MySQL/MariaDB:**
+- Replace `BIGSERIAL` with `BIGINT AUTO_INCREMENT`
+- Replace `TIMESTAMP` with `DATETIME`
+- Replace `TIME` with `TIME` (same)
+- Replace `CURRENT_TIMESTAMP` with `NOW()`
+
+**For SQLite:**
+- Replace `BIGSERIAL` with `INTEGER PRIMARY KEY AUTOINCREMENT`
+- Replace `TIMESTAMP` with `TEXT`
+- Replace `TIME` with `TEXT`
+- Use triggers for `updated_at` (SQLite doesn't support function-based triggers)
+
+---
+
+---
diff --git a/nuxt.config.ts b/nuxt.config.ts
index d4c73c0..968309f 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -48,7 +48,7 @@ export default defineNuxtConfig({
           // @ts-expect-error
           config.server.https = true;
           // @ts-expect-error
-          config.server.host = '10.10.150.175';
+          config.server.host = '10.10.150.114';
           // @ts-expect-error
           config.server.port = 3001;
         } catch (e) {
@@ -96,7 +96,7 @@ export default defineNuxtConfig({
 
   devServer: {
     port: 3001,
-    host: '10.10.150.175'
+    host: '10.10.150.114'
   },
 
   vite: {
diff --git a/package-lock.json b/package-lock.json
index ccecb48..eb03499 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,6 +28,7 @@
         "nuxt": "^3.17.7",
         "nuxt-qrcode": "^0.4.8",
         "pinia": "^3.0.3",
+        "pinia-plugin-persistedstate": "^4.7.1",
         "qrcode": "^1.5.4",
         "qrcode.vue": "^3.6.0",
         "typescript": "^5.8.3",
@@ -39,6 +40,7 @@
       "devDependencies": {
         "@nuxtjs/google-fonts": "^3.2.0",
         "@types/node": "^24.7.2",
+        "@vitejs/plugin-basic-ssl": "^2.1.0",
         "sass": "^1.93.3",
         "sass-embedded": "^1.89.2",
         "vite-plugin-vuetify": "^2.1.2",
@@ -6085,6 +6087,19 @@
         "@fortawesome/fontawesome-svg-core": "^7.0.0"
       }
     },
+    "node_modules/@vitejs/plugin-basic-ssl": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-basic-ssl/-/plugin-basic-ssl-2.1.0.tgz",
+      "integrity": "sha512-dOxxrhgyDIEUADhb/8OlV9JIqYLgos03YorAueTIeOUskLJSEsfwCByjbu98ctXitUN3znXKp0bYD/WHSudCeA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.0.0 || ^20.0.0 || >=22.0.0"
+      },
+      "peerDependencies": {
+        "vite": "^6.0.0 || ^7.0.0"
+      }
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-6.0.1.tgz",
@@ -13843,6 +13858,31 @@
         }
       }
     },
+    "node_modules/pinia-plugin-persistedstate": {
+      "version": "4.7.1",
+      "resolved": "https://registry.npmjs.org/pinia-plugin-persistedstate/-/pinia-plugin-persistedstate-4.7.1.tgz",
+      "integrity": "sha512-WHOqh2esDlR3eAaknPbqXrkkj0D24h8shrDPqysgCFR6ghqP/fpFfJmMPJp0gETHsvrh9YNNg6dQfo2OEtDnIQ==",
+      "license": "MIT",
+      "dependencies": {
+        "defu": "^6.1.4"
+      },
+      "peerDependencies": {
+        "@nuxt/kit": ">=3.0.0",
+        "@pinia/nuxt": ">=0.10.0",
+        "pinia": ">=3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@nuxt/kit": {
+          "optional": true
+        },
+        "@pinia/nuxt": {
+          "optional": true
+        },
+        "pinia": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/pkg-types": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-2.3.0.tgz",
diff --git a/package.json b/package.json
index caffa43..e131462 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
     "build": "nuxt build",
     "_command_dev": "nuxt dev -o --host --port 3001",
     "_command_dev2": "nuxt dev -o --port 3001",
-    "_command_dev3": "nuxt dev -o --host 10.10.150.175 --port 3001",
+    "_command_dev3": "nuxt dev -o --host 10.10.150.114 --port 3001",
     "dev": "nuxt dev -o",
     "dev:https": "nuxt dev -o --host localhost --port 3001",
     "generate": "nuxt generate",
@@ -35,6 +35,7 @@
     "nuxt": "^3.17.7",
     "nuxt-qrcode": "^0.4.8",
     "pinia": "^3.0.3",
+    "pinia-plugin-persistedstate": "^4.7.1",
     "qrcode": "^1.5.4",
     "qrcode.vue": "^3.6.0",
     "typescript": "^5.8.3",
diff --git a/pages/AdminKlinik.vue b/pages/AdminKlinik.vue
index 480f950..3096e03 100644
--- a/pages/AdminKlinik.vue
+++ b/pages/AdminKlinik.vue
@@ -23,6 +23,7 @@
             @action="handlePatientAction"
             @change-klinik="showChangeKlinikDialog = true"
             @process-next="handleProcessNext"
+            @call="handleCallPatient"
           />
 
           <!-- Queue Actions Card -->
@@ -76,38 +77,6 @@
               <div class="section-label">DATA PASIEN</div>
               
               <div class="filters">
-                <!-- Status Filter -->
-                <v-chip-group v-model="selectedStatus" mandatory class="status-filter">
-                  <v-chip value="all" :class="{ 'active-chip': selectedStatus === 'all' }">
-                    Semua ({{ allPatients.length }})
-                  </v-chip>
-                  <v-chip value="diloket" :class="{ 'active-chip': selectedStatus === 'diloket' }">
-                    Di Klinik ({{ (diLoketPatients || []).length }})
-                  </v-chip>
-                  <v-chip value="terlambat" :class="{ 'active-chip': selectedStatus === 'terlambat' }">
-                    Terlambat ({{ (terlambatPatients || []).length }})
-                  </v-chip>
-                  <v-chip value="pending" :class="{ 'active-chip': selectedStatus === 'pending' }">
-                    Pending ({{ (pendingPatients || []).length }})
-                  </v-chip>
-                </v-chip-group>
-
-                <!-- Fast Track Filter -->
-                <v-select
-                  v-model="selectedFastTrack"
-                  :items="fastTrackOptions"
-                  label="Filter Fast Track"
-                  density="compact"
-                  hide-details
-                  clearable
-                  class="fast-track-filter"
-                  variant="outlined"
-                >
-                  <template #prepend-inner>
-                    <v-icon size="20">mdi-flash</v-icon>
-                  </template>
-                </v-select>
-
                 <!-- Search Field -->
                 <v-text-field
                   v-model="searchQuery"
@@ -130,6 +99,7 @@
               :pending-count="(pendingPatients || []).length"
               :status-labels="statusLabels"
               :show-diproses="false"
+              :fast-track-options="fastTrackOptions"
               @action="handleTableAction"
             />
           </v-card-text>
@@ -297,6 +267,15 @@ const handleTableAction = (item, action) => {
 const handleProcessNext = () => {
   processNextQueue();
 };
+
+const handleCallPatient = () => {
+  // TODO: Integrate text-to-speech library here
+  // Example: speak(`Nomor antrian ${currentProcessingPatient.value?.noAntrian.split(" |")[0]}, silakan menuju ke loket`)
+  if (currentProcessingPatient.value) {
+    console.log('Calling patient:', currentProcessingPatient.value);
+    // Placeholder for text-to-speech integration
+  }
+};
 </script>
 
 <style scoped lang="scss">
@@ -335,36 +314,6 @@ const handleProcessNext = () => {
   flex-wrap: wrap;
 }
 
-.status-filter {
-  flex: 1;
-  min-width: 300px;
-}
-
-.status-filter .v-chip {
-  font-size: 12px;
-  font-weight: 600;
-  height: 32px;
-  border: 1px solid var(--color-neutral-500);
-  background: var(--color-neutral-100);
-  color: var(--color-neutral-600);
-  transition: all 0.2s ease;
-}
-
-.status-filter .v-chip:hover {
-  background: var(--color-neutral-300);
-}
-
-.status-filter .v-chip.active-chip {
-  background: var(--color-secondary-600);
-  color: var(--color-neutral-100);
-  border-color: var(--color-secondary-600);
-}
-
-.fast-track-filter {
-  min-width: 180px;
-  max-width: 220px;
-}
-
 .search-field {
   max-width: 300px;
   min-width: 250px;
@@ -406,12 +355,7 @@ const handleProcessNext = () => {
     align-items: stretch;
   }
 
-  .status-filter {
-    min-width: 100%;
-  }
-
-  .search-field,
-  .fast-track-filter {
+  .search-field {
     max-width: 100%;
     min-width: 100%;
   }
diff --git a/pages/AdminLoket.vue b/pages/AdminLoket.vue
index 99195f3..4cb2d67 100644
--- a/pages/AdminLoket.vue
+++ b/pages/AdminLoket.vue
@@ -22,6 +22,7 @@
             @action="handlePatientAction"
             @change-klinik="showChangeKlinikDialog = true"
             @process-next="handleProcessNext"
+            @call="handleCallPatient"
           />
 
           <!-- Queue Actions Card -->
@@ -278,6 +279,15 @@ const handleTableAction = (item, action) => {
 const handleProcessNext = () => {
   processNextQueue();
 };
+
+const handleCallPatient = () => {
+  // TODO: Integrate text-to-speech library here
+  // Example: speak(`Nomor antrian ${currentProcessingPatient.value?.noAntrian.split(" |")[0]}, silakan menuju ke loket`)
+  if (currentProcessingPatient.value) {
+    console.log('Calling patient:', currentProcessingPatient.value);
+    // Placeholder for text-to-speech integration
+  }
+};
 </script>
 
 <style scoped lang="scss">
diff --git a/pages/Anjungan/Anjungan/[id].vue b/pages/Anjungan/Anjungan/[id].vue
index 7798db6..79e6d38 100644
--- a/pages/Anjungan/Anjungan/[id].vue
+++ b/pages/Anjungan/Anjungan/[id].vue
@@ -121,8 +121,9 @@
 
     <v-dialog
       v-model="showVisitTypeDialog"
-      max-width="400"
+      max-width="900"
       @click:outside="showVisitTypeDialog = false"
+      persistent
     >
       <v-card class="dialog-card">
         <v-card-title class="dialog-header">
@@ -147,13 +148,67 @@
             <v-divider class="my-4"></v-divider>
 
             <div class="dialog-info">
-              <div class="doctor-list-section">
-                <p><strong>Dokter yang Tersedia:</strong></p>
-                <ul class="doctor-list">
-                  <li v-for="(doctor, index) in dialogDoctors" :key="index">
-                    {{ doctor }}
-                  </li>
-                </ul>
+              <!-- Section Pemilihan Dokter untuk Pasien Eksekutif -->
+              <div v-if="isEksekutif" class="doctor-selection-section mb-4">
+                <p class="mb-3"><strong>Pilih Dokter:</strong></p>
+                <div class="doctor-buttons-container">
+                  <div 
+                    v-for="(doctor, index) in dialogDoctors" 
+                    :key="index"
+                    class="doctor-button-wrapper"
+                  >
+                    <v-btn
+                      :class="{
+                        'doctor-button': true,
+                        'doctor-button-selected': selectedDoctor === doctor
+                      }"
+                      variant="outlined"
+                      size="large"
+                      block
+                      @click="selectedDoctor = doctor"
+                    >
+                      <v-icon 
+                        v-if="selectedDoctor === doctor" 
+                        size="18"
+                        color="success-600"
+                        class="doctor-icon"
+                      >
+                        mdi-check-circle
+                      </v-icon>
+                      <v-icon 
+                        v-else 
+                        size="18"
+                        color="neutral-600"
+                        class="doctor-icon"
+                      >
+                        mdi-circle-outline
+                      </v-icon>
+                      <span class="doctor-name">{{ doctor }}</span>
+                    </v-btn>
+                  </div>
+                  <p v-if="dialogDoctors.length === 0" class="text-error text-caption mt-2">
+                    Tidak ada dokter tersedia untuk klinik ini
+                  </p>
+                </div>
+              </div>
+
+              <!-- Section Info Dokter untuk Non-Eksekutif (hanya tampil) -->
+              <div v-else class="doctor-list-section">
+                <p class="mb-3"><strong>Dokter yang Tersedia:</strong></p>
+                <div class="doctor-info-grid">
+                  <div 
+                    v-for="(doctor, index) in dialogDoctors" 
+                    :key="index"
+                    class="doctor-info-item"
+                  >
+                    <div class="doctor-info-card">
+                      <v-icon size="18" color="primary-600" class="doctor-info-icon">
+                        mdi-doctor
+                      </v-icon>
+                      <span class="doctor-info-name">{{ doctor }}</span>
+                    </div>
+                  </div>
+                </div>
               </div>
 
               <div class="quota-section">
@@ -190,14 +245,17 @@
                 size="large"
                 block
                 @click="selectVisitType('SEKARANG')"
-                :disabled="isShift1Full(selectedClinic)"
-                :class="{ 'btn-disabled': isShift1Full(selectedClinic) }"
+                :disabled="isShift1Full(selectedClinic) || (isEksekutif && !selectedDoctor)"
+                :class="{ 'btn-disabled': isShift1Full(selectedClinic) || (isEksekutif && !selectedDoctor) }"
               >
                 DAFTAR SEKARANG
               </v-btn>
               <p v-if="isShift1Full(selectedClinic)" class="disabled-hint">
                 Kuota hari ini habis
               </p>
+              <p v-else-if="isEksekutif && !selectedDoctor" class="disabled-hint">
+                Pilih dokter terlebih dahulu
+              </p>
             </v-col>
             <v-col cols="6">
               <v-btn
@@ -206,9 +264,14 @@
                 size="large"
                 block
                 @click="selectVisitType('JADWAL_LAIN')"
+                :disabled="isEksekutif && !selectedDoctor"
+                :class="{ 'btn-disabled': isEksekutif && !selectedDoctor }"
               >
                 JADWAL LAIN
               </v-btn>
+              <p v-if="isEksekutif && !selectedDoctor" class="disabled-hint">
+                Pilih dokter terlebih dahulu
+              </p>
             </v-col>
           </v-row>
         </v-card-text>
@@ -267,9 +330,71 @@
       </v-card>
     </v-dialog>
 
+    <!-- Dialog Pemilihan Dokter untuk Pasien Eksekutif -->
+    <v-dialog
+      v-model="showDoctorSelectionDialog"
+      max-width="600"
+      @click:outside="showDoctorSelectionDialog = false"
+      persistent
+    >
+      <v-card class="dialog-card">
+        <v-card-title class="dialog-header">
+          <v-icon class="mr-2">mdi-doctor</v-icon>
+          Pilih Dokter
+        </v-card-title>
+        <v-divider />
+        <v-card-text class="pa-6" v-if="selectedClinic">
+          <div class="dialog-content">
+            <p class="mb-4">
+              <strong>Klinik:</strong> {{ selectedClinic.name }}
+            </p>
+            <v-select
+              v-model="selectedDoctor"
+              :items="dialogDoctors"
+              label="Pilih Dokter"
+              variant="outlined"
+              density="compact"
+              required
+              :rules="[v => !!v || 'Pilih dokter terlebih dahulu']"
+              class="mb-3"
+            >
+              <template v-slot:item="{ props, item }">
+                <v-list-item v-bind="props">
+                  <v-list-item-title>{{ item.raw }}</v-list-item-title>
+                </v-list-item>
+              </template>
+            </v-select>
+            <p v-if="dialogDoctors.length === 0" class="text-error text-caption">
+              Tidak ada dokter tersedia untuk klinik ini
+            </p>
+          </div>
+        </v-card-text>
+        <v-divider />
+        <v-card-actions class="pa-4">
+          <v-spacer />
+          <v-btn
+            variant="outlined"
+            color="neutral-600"
+            @click="showDoctorSelectionDialog = false"
+          >
+            Batal
+          </v-btn>
+          <v-btn
+            color="success-600"
+            class="text-white"
+            variant="flat"
+            @click="confirmDoctorSelection"
+            :disabled="!selectedDoctor || dialogDoctors.length === 0"
+          >
+            Konfirmasi
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
     <v-dialog
       v-model="showBookingFormDialog"
-      max-width="500"
+      max-width="600"
       @click:outside="showBookingFormDialog = false"
     >
       <v-card class="dialog-card">
@@ -309,7 +434,23 @@
               variant="outlined"
               density="compact"
               required
+              class="mb-3"
             ></v-select>
+
+            <!-- Field dokter untuk pasien Eksekutif (sudah dipilih di dialog sebelumnya) -->
+            <v-text-field
+              v-if="isEksekutif && bookingForm.doctor"
+              :model-value="bookingForm.doctor"
+              label="Dokter yang Dipilih"
+              variant="outlined"
+              density="compact"
+              readonly
+              class="mb-3"
+            >
+              <template v-slot:prepend-inner>
+                <v-icon size="20" color="success-600">mdi-check-circle</v-icon>
+              </template>
+            </v-text-field>
           </v-form>
         </v-card-text>
         <v-card-actions class="pa-4">
@@ -359,6 +500,7 @@ import { ref, computed, onMounted, nextTick } from "vue";
 import { useRoute } from "#app";
 import { useAnjunganStore } from "@/stores/anjunganStore";
 import { useClinicStore } from "@/stores/clinicStore";
+import { useQueueStore } from "@/stores/queueStore";
 
 definePageMeta({
   layout: false,
@@ -367,6 +509,7 @@ definePageMeta({
 const route = useRoute();
 const anjunganStore = useAnjunganStore();
 const clinicStore = useClinicStore();
+const queueStore = useQueueStore();
 
 const anjunganId = computed(() => {
   const raw = route.params.id;
@@ -642,7 +785,10 @@ const filteredClinics = computed(() => {
 const showVisitTypeDialog = ref(false);
 const showPaymentTypeDialog = ref(false);
 const showBookingFormDialog = ref(false);
+const showDoctorSelectionDialog = ref(false);
 const selectedClinic = ref(null);
+const selectedDoctor = ref(null);
+const pendingPaymentType = ref(null);
 const snackbar = ref(false);
 const snackbarText = ref("");
 const snackbarColor = ref("success");
@@ -651,6 +797,12 @@ const bookingForm = ref({
   date: new Date().toISOString().substring(0, 10),
   shift: "Shift 1",
   payment: null,
+  doctor: null,
+});
+
+// Cek apakah jenis pasien adalah Eksekutif
+const isEksekutif = computed(() => {
+  return anjunganData.value?.jenisPasien === 'Eksekutif';
 });
 
 // tampilkan doctor info dengan prioritas API
@@ -735,10 +887,18 @@ const selectClinic = (clinic) => {
   if (!clinic || !clinic.available) return;
 
   selectedClinic.value = clinic;
+  // Reset selected doctor ketika memilih klinik baru
+  selectedDoctor.value = null;
   showVisitTypeDialog.value = true;
 };
 
 const selectVisitType = (type) => {
+  // Validasi: untuk pasien Eksekutif, dokter harus dipilih
+  if (isEksekutif.value && !selectedDoctor.value) {
+    showSnackbar("Mohon pilih dokter terlebih dahulu", "error");
+    return;
+  }
+
   showVisitTypeDialog.value = false;
 
   if (type === "SEKARANG") {
@@ -752,6 +912,7 @@ const selectVisitType = (type) => {
       date: tomorrowStr,
       shift: "",
       payment: null,
+      doctor: isEksekutif.value ? selectedDoctor.value : null,
     };
     showBookingFormDialog.value = true;
   }
@@ -759,9 +920,50 @@ const selectVisitType = (type) => {
 
 const selectPaymentType = (paymentType) => {
   showPaymentTypeDialog.value = false;
-  const message = `Pendaftaran **${selectedClinic.value.name}** untuk kunjungan **HARI INI** dengan pembayaran **${paymentType}** berhasil diproses.`;
-  showSnackbar(message, "success");
+  
+  // Untuk pasien Eksekutif, dokter sudah dipilih di dialog sebelumnya
+  // Untuk Reguler/BPJS, tidak perlu dokter
+  const namaDokter = isEksekutif.value ? selectedDoctor.value : null;
+  
+  registerPatient('SEKARANG', paymentType, namaDokter);
+};
+
+// Fungsi ini tidak lagi digunakan karena dokter dipilih di dialog konfirmasi
+// Tapi tetap dipertahankan untuk kompatibilitas jika ada referensi lain
+const confirmDoctorSelection = () => {
+  if (!selectedDoctor.value) {
+    showSnackbar("Mohon pilih dokter terlebih dahulu", "error");
+    return;
+  }
+  
+  showDoctorSelectionDialog.value = false;
+  
+  // Register dengan dokter yang dipilih untuk kunjungan hari ini
+  registerPatient('SEKARANG', pendingPaymentType.value, selectedDoctor.value);
+};
+
+const registerPatient = (visitType, paymentType, namaDokter) => {
+  // Register patient to queueStore
+  const result = queueStore.registerPatientFromAnjungan(
+    selectedClinic.value,
+    paymentType,
+    visitType,
+    null,
+    'Shift 1',
+    namaDokter
+  );
+  
+  if (result.success) {
+    const doctorInfo = namaDokter ? ` dengan dokter ${namaDokter}` : '';
+    const message = `Pendaftaran ${selectedClinic.value.name} untuk kunjungan HARI INI dengan pembayaran ${paymentType}${doctorInfo} berhasil diproses. Nomor antrean: ${result.patient.noAntrian.split(" |")[0]}`;
+    showSnackbar(message, "success");
+  } else {
+    showSnackbar(result.message || "Gagal melakukan pendaftaran", "error");
+  }
+  
   selectedClinic.value = null;
+  selectedDoctor.value = null;
+  pendingPaymentType.value = null;
 };
 
 const submitBooking = () => {
@@ -774,15 +976,47 @@ const submitBooking = () => {
     return;
   }
 
+  // Validasi dokter untuk pasien Eksekutif
+  if (isEksekutif.value && !bookingForm.value.doctor) {
+    showSnackbar("Mohon pilih dokter terlebih dahulu.", "error");
+    return;
+  }
+
   showBookingFormDialog.value = false;
-  const message = `Jadwal kunjungan **${selectedClinic.value.name}** pada ${bookingForm.value.date} - ${bookingForm.value.shift} (**${bookingForm.value.payment}**) berhasil disimpan.`;
-  showSnackbar(message, "success");
+  
+  // Register patient to queueStore for future visit
+  const paymentType = bookingForm.value.payment === 'BPJS' ? 'BPJS' : 'UMUM';
+  const namaDokter = isEksekutif.value ? bookingForm.value.doctor : null;
+  
+  const result = queueStore.registerPatientFromAnjungan(
+    selectedClinic.value,
+    paymentType,
+    'JADWAL_LAIN',
+    bookingForm.value.date,
+    bookingForm.value.shift,
+    namaDokter
+  );
+  
+  if (result.success) {
+    const doctorInfo = namaDokter ? ` dengan dokter ${namaDokter}` : '';
+    const message = `Jadwal kunjungan ${selectedClinic.value.name} pada ${bookingForm.value.date} - ${bookingForm.value.shift} (${paymentType})${doctorInfo} berhasil disimpan. Nomor antrean: ${result.patient.noAntrian.split(" |")[0]}`;
+    showSnackbar(message, "success");
+  } else {
+    showSnackbar(result.message || "Gagal menyimpan jadwal", "error");
+  }
+  
   selectedClinic.value = null;
+  selectedDoctor.value = null;
+  bookingForm.value.doctor = null;
 };
 
 const backToList = () => {
   navigateTo("/anjungan/anjungan");
 };
+
+const navigateToCheckIn = () => {
+  navigateTo("/check-in-pasien/check-in");
+};
 </script>
 
 <style scoped lang="scss">
@@ -1077,25 +1311,207 @@ const backToList = () => {
 }
 
 .doctor-list-section {
-  margin-bottom: 12px;
+  margin-bottom: 16px;
 
   p {
-    margin-bottom: 8px;
+    margin-bottom: 12px;
+    font-size: 15px;
+    color: var(--color-neutral-800);
   }
 }
 
-.doctor-list {
-  list-style: none;
-  padding: 0;
-  margin: 0;
+.doctor-info-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 8px;
+  margin-bottom: 8px;
+}
 
-  li {
-    padding: 6px 12px;
-    margin: 4px 0;
-    background: var(--color-primary-100);
-    border-radius: 6px;
+.doctor-info-item {
+  width: 100%;
+}
+
+.doctor-info-card {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 10px;
+  background: var(--color-primary-100);
+  border-radius: 8px;
+  border: 1px solid var(--color-primary-300);
+  min-height: 50px;
+}
+
+.doctor-info-icon {
+  flex-shrink: 0;
+}
+
+.doctor-info-name {
+  flex: 1;
+  text-align: left;
+  font-size: 13px;
+  line-height: 1.3;
+  color: var(--color-neutral-800);
+  white-space: normal;
+  word-wrap: break-word;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Responsive untuk layar lebih kecil - doctor info grid */
+@media (max-width: 768px) {
+  .doctor-info-grid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 6px;
+  }
+
+  .doctor-info-card {
+    padding: 10px 8px;
+    min-height: 45px;
+  }
+
+  .doctor-info-name {
+    font-size: 12px;
+  }
+}
+
+@media (max-width: 480px) {
+  .doctor-info-grid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 6px;
+  }
+
+  .doctor-info-card {
+    padding: 10px 6px;
+    min-height: 45px;
+  }
+
+  .doctor-info-name {
+    font-size: 11px;
+  }
+}
+
+.doctor-selection-section {
+  margin-bottom: 16px;
+
+  p {
+    margin-bottom: 12px;
+    font-size: 15px;
     color: var(--color-neutral-800);
-    font-size: 13px;
+  }
+}
+
+.doctor-buttons-container {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.doctor-button-wrapper {
+  width: 100%;
+}
+
+.doctor-button {
+  justify-content: center !important;
+  text-transform: none !important;
+  text-align: center !important;
+  padding: 16px 10px !important;
+  border: 2px solid var(--color-neutral-500) !important;
+  background-color: var(--color-neutral-100) !important;
+  color: var(--color-neutral-800) !important;
+  font-weight: 500 !important;
+  font-size: 13px !important;
+  line-height: 1.3 !important;
+  border-radius: 8px !important;
+  transition: all 0.2s ease !important;
+  min-height: 90px !important;
+  height: auto !important;
+  flex-direction: column !important;
+  touch-action: manipulation !important;
+  -webkit-tap-highlight-color: transparent !important;
+
+  .v-btn__content {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 0 !important;
+  }
+
+  &:hover {
+    background-color: var(--color-primary-100) !important;
+    border-color: var(--color-primary-600) !important;
+    transform: translateY(-1px);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+
+  &:active {
+    transform: translateY(0);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  }
+}
+
+.doctor-button-selected {
+  background-color: var(--color-success-200) !important;
+  border-color: var(--color-success-600) !important;
+  color: var(--color-success-800) !important;
+  font-weight: 600 !important;
+  box-shadow: 0 2px 8px rgba(0, 146, 98, 0.2) !important;
+
+  &:hover {
+    background-color: var(--color-success-300) !important;
+    border-color: var(--color-success-700) !important;
+    box-shadow: 0 3px 10px rgba(0, 146, 98, 0.3) !important;
+  }
+}
+
+.doctor-icon {
+  flex-shrink: 0;
+}
+
+.doctor-name {
+  width: 100%;
+  text-align: center;
+  white-space: normal;
+  word-wrap: break-word;
+  line-height: 1.3;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Responsive untuk layar lebih kecil */
+@media (max-width: 768px) {
+  .doctor-buttons-container {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 8px;
+  }
+
+  .doctor-button {
+    padding: 14px 8px !important;
+    font-size: 12px !important;
+    min-height: 85px !important;
+  }
+}
+
+@media (max-width: 480px) {
+  .doctor-buttons-container {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 6px;
+  }
+
+  .doctor-button {
+    padding: 12px 6px !important;
+    font-size: 11px !important;
+    min-height: 80px !important;
   }
 }
 
@@ -1263,4 +1679,15 @@ const backToList = () => {
     padding-right: 60px;
   }
 }
+
+.navigation-footer {
+  border-radius: 12px;
+  border: 1px solid var(--color-neutral-500);
+  background: var(--color-neutral-100);
+}
+
+.navigation-footer .v-btn {
+  text-transform: none;
+  font-weight: 600;
+}
 </style>
diff --git a/pages/CheckInPasien/checkIn.vue b/pages/CheckInPasien/checkIn.vue
index 4566a05..0bc5945 100644
--- a/pages/CheckInPasien/checkIn.vue
+++ b/pages/CheckInPasien/checkIn.vue
@@ -1,1321 +1,1610 @@
 <template>
-    <v-app class="bg-modern">
-      <v-main class="no-overflow">
-        <v-container fluid class="no-scroll-container pa-2 pa-md-4">
-          <v-row align="start" justify="center" class="fill-height">
-            <v-col cols="12" sm="11" md="10" lg="8" xl="7" class="d-flex flex-column">
-              <!-- Main Card dengan Glassmorphism -->
-              <v-card class="main-card" elevation="0">
-                
-                <!-- Header Minimalis -->
-                <div class="header-modern">
-                  <div class="header-content">
-                    <div class="icon-circle">
-                      <v-icon size="36" color="white">mdi-hospital-building</v-icon>
-                    </div>
-                    <div class="header-text">
-                      <h1 class="title-modern">Check-in Pasien</h1>
-                      <p class="subtitle-modern">Sistem Antrean Rumah Sakit</p>
-                    </div>
+  <v-app class="bg-modern">
+    <v-main class="no-overflow">
+      <v-container fluid class="no-scroll-container pa-2 pa-md-4">
+        <v-row align="start" justify="center" class="fill-height">
+          <v-col cols="12" sm="11" md="10" lg="8" xl="7" class="d-flex flex-column">
+            <!-- Main Card dengan Glassmorphism -->
+            <v-card class="main-card" elevation="0">
+              
+              <!-- Header Minimalis -->
+              <div class="header-modern">
+                <div class="header-content">
+                  <div class="icon-circle">
+                    <v-icon size="28" color="white">mdi-hospital-building</v-icon>
+                  </div>
+                  <div class="header-text">
+                    <h1 class="title-modern">Check-in Pasien</h1>
                   </div>
-                  
-                  <!-- Tabs Minimalis -->
-                  <v-tabs 
-                    v-model="tab" 
-                    align-tabs="center" 
-                    class="tabs-modern mt-3"
-                    bg-color="transparent"
-                    slider-color="#FB8C00"
-                    height="40"
-                  >
-                    <v-tab value="scan" class="tab-modern">
-                      <v-icon size="20" class="mr-2">mdi-qrcode-scan</v-icon>
-                      <span>Scan QR</span>
-                    </v-tab>
-                    <v-tab value="manual" class="tab-modern">
-                      <v-icon size="20" class="mr-2">mdi-keyboard</v-icon>
-                      <span>Manual</span>
-                    </v-tab>
-                    <v-tab value="generate" class="tab-modern">
-                      <v-icon size="20" class="mr-2">mdi-qrcode</v-icon>
-                      <span>Generate QR</span>
-                    </v-tab>
-                  </v-tabs>
                 </div>
-  
+                
+                <!-- Tabs Minimalis -->
+                <v-tabs 
+                  v-model="tab" 
+                  align-tabs="center" 
+                  class="tabs-modern mt-1"
+                  bg-color="transparent"
+                  slider-color="#FB8C00"
+                  height="32"
+                >
+                  <v-tab value="checkin" class="tab-modern">
+                    <v-icon size="18" class="mr-2">mdi-login</v-icon>
+                    <span>Check-in</span>
+                  </v-tab>
+                  <v-tab value="generate" class="tab-modern">
+                    <v-icon size="18" class="mr-2">mdi-qrcode</v-icon>
+                    <span>Generate QR</span>
+                  </v-tab>
+                </v-tabs>
+              </div>
+
                 <v-card-text class="content-modern pa-4 pa-md-6">
-                  <v-window v-model="tab">
-                    <!-- Tab Scan QR -->
-                    <v-window-item value="scan">
-                      <div class="tab-content">
-                        <!-- Status Header -->
-                        <div class="status-header mb-3">
-                          <div class="status-icon-wrapper">
-                            <v-icon :color="primaryColor" size="24">mdi-qrcode-scan</v-icon>
-                          </div>
-                          <div class="status-text">
-                            <h3 class="status-title">
-                              {{ isScanning ? 'Arahkan Kamera ke QR Code' : 'Siap untuk Scan QR Code' }}
-                            </h3>
-                            <p class="status-subtitle">
-                              {{ isScanning ? 'Pastikan QR code terlihat jelas dan tidak terpotong' : 'Klik tombol di bawah untuk memulai scan' }}
-                            </p>
-                          </div>
-                        </div>
-                        
-                        <!-- Camera Status Check -->
-                        <div v-if="cameraChecking" class="text-center mb-4">
-                          <v-progress-circular
-                            indeterminate
-                            :color="primaryColor"
-                            size="24"
-                            class="mr-2"
-                          ></v-progress-circular>
-                          <span class="text-body-2 text-grey">Memeriksa ketersediaan kamera...</span>
-                        </div>
-  
-                        <!-- Camera Not Available Warning -->
-                        <v-alert
-                          v-else-if="!hasCamera && !isScanning"
-                          type="warning"
-                          variant="tonal"
-                          class="mb-4"
-                        >
-                          <template v-slot:prepend>
-                            <v-icon>mdi-camera-off</v-icon>
-                          </template>
-                          <div>
-                            <p class="font-weight-bold mb-1">Kamera tidak terdeteksi</p>
-                            <p class="text-body-2 mb-0">
-                              Perangkat Anda tidak memiliki kamera atau kamera tidak dapat diakses. 
-                              Silakan gunakan tab <strong>Manual</strong> untuk input data secara manual.
-                            </p>
-                          </div>
-                        </v-alert>
-  
-                        <!-- QR Scanner Area dengan webcam -->
-                        <div class="qr-scanner-container mb-4">
-                          <div v-if="!isScanning" class="qr-placeholder">
-                            <div class="scanner-overlay">
-                              <div class="corner corner-tl"></div>
-                              <div class="corner corner-tr"></div>
-                              <div class="corner corner-bl"></div>
-                              <div class="corner corner-br"></div>
-                              <div class="scan-line"></div>
+                  <v-window v-model="tab" :key="`window-${tab}`">
+                    <!-- Tab Check-in (Combined Scan QR + Manual) -->
+                    <v-window-item value="checkin" :key="'checkin-tab'">
+                      <div class="checkin-wrapper">
+                        <v-row class="checkin-layout" no-gutters>
+                        <!-- Left: Scan QR -->
+                        <v-col cols="12" md="6" class="checkin-left-col">
+                        <div class="tab-content">
+                          <!-- Status Header -->
+                          <div class="status-header mb-3">
+                            <div class="status-icon-wrapper">
+                              <v-icon :color="primaryColor" size="24">mdi-qrcode-scan</v-icon>
                             </div>
-                            <v-icon size="64" :color="primaryColor" class="qr-icon">mdi-qrcode-scan</v-icon>
-                          </div>
-                          <div v-else class="qr-reader-container">
-                            <div class="scanner-status mb-2">
-                              <v-chip color="success" size="small" class="mr-2">
-                                <v-icon start size="16">mdi-camera</v-icon>
-                                Kamera Aktif
-                              </v-chip>
-                              <span class="text-caption text-grey">Preview kamera sedang berjalan</span>
-                            </div>
-                            <div id="qr-reader" class="qr-reader-wrapper">
-                              <div class="scanner-loading-overlay" v-if="!cameraReady">
-                                <v-progress-circular
-                                  indeterminate
-                                  color="white"
-                                  size="48"
-                                ></v-progress-circular>
-                                <p class="text-white mt-4">Memuat kamera...</p>
-                              </div>
-                            </div>
-                            <div class="scanner-instruction">
-                              <v-icon :color="primaryColor" size="20" class="mr-2">mdi-information</v-icon>
-                              <span class="text-body-2">Arahkan kamera ke QR code. Pastikan QR code berada dalam kotak pemindaian.</span>
+                            <div class="status-text">
+                              <h3 class="status-title">
+                                {{ isScanning ? 'Arahkan Kamera ke QR Code' : 'Siap untuk Scan QR Code' }}
+                              </h3>
+                              <p class="status-subtitle">
+                                {{ isScanning ? 'Pastikan QR code terlihat jelas dan tidak terpotong' : 'Klik tombol di bawah untuk memulai scan' }}
+                              </p>
                             </div>
                           </div>
-                        </div>
-                        
-                        <!-- Action Button Minimalis -->
-                        <div class="action-buttons">
-                          <v-btn
-                            v-if="!isScanning"
-                            class="btn-primary-modern btn-centered"
-                            size="large"
-                            elevation="0"
-                            @click="startScanning"
-                            :disabled="!hasCamera && !cameraChecking"
-                          >
-                            <v-icon start size="20">mdi-camera</v-icon>
-                            {{ hasCamera ? 'Mulai Scan QR' : 'Kamera Tidak Tersedia' }}
-                          </v-btn>
-                          <v-btn
-                            v-else
-                            class="btn-stop-modern btn-centered"
-                            size="large"
-                            elevation="0"
-                            @click="stopScanning"
-                          >
-                            <v-icon start size="20">mdi-camera-off</v-icon>
-                            Stop Scan
-                          </v-btn>
-                        </div>
-  
-                        <!-- Info tambahan -->
-                        <div class="info-card mt-3">
+                          
+                          <!-- Camera Status Check -->
+                          <div v-if="cameraChecking" class="text-center mb-4">
+                            <v-progress-circular
+                              indeterminate
+                              :color="primaryColor"
+                              size="24"
+                              class="mr-2"
+                            ></v-progress-circular>
+                            <span class="text-body-2 text-grey">Memeriksa ketersediaan kamera...</span>
+                          </div>
+    
+                          <!-- Camera Not Available Warning -->
                           <v-alert
-                            type="info"
+                            v-else-if="!hasCamera && !isScanning"
+                            type="warning"
                             variant="tonal"
-                            :color="primaryColor"
-                            class="text-body-2 info-alert-centered"
-                            density="compact"
+                            class="mb-4"
                           >
-                            <div class="d-flex align-center justify-center">
-                              <v-icon size="16" class="mr-2">mdi-lightbulb-outline</v-icon>
-                              <span style="font-size: 12px;">Tips: Pastikan pencahayaan cukup untuk hasil scan optimal</span>
+                            <template v-slot:prepend>
+                              <v-icon>mdi-camera-off</v-icon>
+                            </template>
+                            <div>
+                              <p class="font-weight-bold mb-1">Kamera tidak terdeteksi</p>
+                              <p class="text-body-2 mb-0">
+                                Perangkat Anda tidak memiliki kamera atau kamera tidak dapat diakses. 
+                                Silakan gunakan input <strong>Manual</strong> di sebelah kanan.
+                              </p>
                             </div>
                           </v-alert>
-                        </div>
-  
-                        <!-- Test Camera Button (Debug) -->
-                        <div class="test-camera-section mt-2 mb-2">
-                          <v-btn
-                            variant="outlined"
-                            color="primary"
-                            size="small"
-                            class="text-none btn-centered-small btn-test-camera"
-                            @click="testCamera"
-                          >
-                            <v-icon start size="18" color="#1565C0">mdi-camera</v-icon>
-                            Test Kamera
-                          </v-btn>
-                          <p class="text-caption text-grey text-center mt-1" style="font-size: 11px;">
-                            Klik untuk menguji apakah browser dapat mengakses kamera
-                          </p>
-                        </div>
-  
-                        <!-- Quick Access Buttons -->
-                        <div class="quick-actions mt-4">
-                          <p class="text-caption text-grey text-center mb-3">Akses Cepat</p>
-                          <v-row dense>
-                            <v-col cols="12">
-                              <v-btn
-                                variant="outlined"
-                                :color="primaryColor"
-                                block
-                                size="small"
-                                class="text-none"
-                                @click="openHistoryDialog"
-                              >
-                                <v-icon start size="18">mdi-history</v-icon>
-                                Riwayat Check-in
-                              </v-btn>
-                            </v-col>
-                            <v-col cols="12">
-                              <v-btn
-                                variant="outlined"
-                                color="primary"
-                                block
-                                size="small"
-                                class="text-none"
-                                @click="openQRHistoryDialog"
-                              >
-                                <v-icon start size="18" color="#1565C0">mdi-qrcode-scan</v-icon>
-                                Riwayat QR Scan
-                              </v-btn>
-                            </v-col>
-                          </v-row>
-                        </div>
-                      </div>
-                    </v-window-item>
-  
-                    <!-- Tab Manual -->
-                    <v-window-item value="manual">
-                      <div class="tab-content">
-                        <!-- Status Header -->
-                        <div class="status-header mb-3">
-                          <div class="status-icon-wrapper">
-                            <v-icon :color="secondaryColor" size="24">mdi-keyboard</v-icon>
+    
+                          <!-- QR Scanner Area dengan webcam -->
+                          <div class="qr-scanner-container mb-4">
+                            <div v-if="!isScanning" class="qr-placeholder">
+                              <div class="scanner-overlay">
+                                <div class="corner corner-tl"></div>
+                                <div class="corner corner-tr"></div>
+                                <div class="corner corner-bl"></div>
+                                <div class="corner corner-br"></div>
+                                <div class="scan-line"></div>
+                              </div>
+                              <v-icon size="64" :color="primaryColor" class="qr-icon">mdi-qrcode-scan</v-icon>
+                            </div>
+                            <div v-else class="qr-reader-container">
+                              <div class="scanner-status mb-2">
+                                <v-chip color="success" size="small" class="mr-2">
+                                  <v-icon start size="16">mdi-camera</v-icon>
+                                  Kamera Aktif
+                                </v-chip>
+                                <span class="text-caption text-grey">Preview kamera sedang berjalan</span>
+                              </div>
+                              <div id="qr-reader" class="qr-reader-wrapper">
+                                <div class="scanner-loading-overlay" v-if="!cameraReady">
+                                  <v-progress-circular
+                                    indeterminate
+                                    color="white"
+                                    size="48"
+                                  ></v-progress-circular>
+                                  <p class="text-white mt-4">Memuat kamera...</p>
+                                </div>
+                              </div>
+                              <div class="scanner-instruction">
+                                <v-icon :color="primaryColor" size="20" class="mr-2">mdi-information</v-icon>
+                                <span class="text-body-2">Arahkan kamera ke QR code. Pastikan QR code berada dalam kotak pemindaian.</span>
+                              </div>
+                            </div>
                           </div>
-                          <div class="status-text">
-                            <h3 class="status-title">Input Manual</h3>
-                            <p class="status-subtitle">Masukkan nomor antrean atau ID pasien</p>
+                          
+                          <!-- Action Button Minimalis -->
+                          <div class="action-buttons">
+                            <v-btn
+                              v-if="!isScanning"
+                              class="btn-primary-modern btn-centered"
+                              size="large"
+                              elevation="0"
+                              @click="startScanning"
+                              :disabled="!hasCamera && !cameraChecking"
+                              block
+                            >
+                              <v-icon start size="20">mdi-camera</v-icon>
+                              {{ hasCamera ? 'Mulai Scan QR' : 'Kamera Tidak Tersedia' }}
+                            </v-btn>
+                            <v-btn
+                              v-else
+                              class="btn-stop-modern btn-centered"
+                              size="large"
+                              elevation="0"
+                              @click="stopScanning"
+                              block
+                            >
+                              <v-icon start size="20">mdi-camera-off</v-icon>
+                              Stop Scan
+                            </v-btn>
+                          </div>
+    
+                          <!-- Info tambahan -->
+                          <div class="info-card mt-3">
+                            <v-alert
+                              type="info"
+                              variant="tonal"
+                              :color="primaryColor"
+                              class="text-body-2 info-alert-centered"
+                              density="compact"
+                            >
+                              <div class="d-flex align-center justify-center">
+                                <v-icon size="16" class="mr-2">mdi-lightbulb-outline</v-icon>
+                                <span style="font-size: 12px;">Tips: Pastikan pencahayaan cukup untuk hasil scan optimal</span>
+                              </div>
+                            </v-alert>
+                          </div>
+    
+                          <!-- Test Camera Button (Debug) -->
+                          <div class="test-camera-section mt-2 mb-2">
+                            <v-btn
+                              variant="outlined"
+                              color="primary"
+                              size="small"
+                              class="text-none btn-centered-small btn-test-camera"
+                              @click="testCamera"
+                              block
+                            >
+                              <v-icon start size="18" color="#1565C0">mdi-camera</v-icon>
+                              Test Kamera
+                            </v-btn>
+                            <p class="text-caption text-grey text-center mt-1" style="font-size: 11px;">
+                              Klik untuk menguji apakah browser dapat mengakses kamera
+                            </p>
+                          </div>
+    
+                          <!-- Quick Access Buttons -->
+                          <div class="quick-actions mt-4">
+                            <p class="text-caption text-grey text-center mb-3">Akses Cepat</p>
+                            <v-row dense>
+                              <v-col cols="12">
+                                <v-btn
+                                  variant="outlined"
+                                  :color="primaryColor"
+                                  block
+                                  size="small"
+                                  class="text-none"
+                                  @click="openHistoryDialog"
+                                >
+                                  <v-icon start size="18">mdi-history</v-icon>
+                                  Riwayat Check-in
+                                </v-btn>
+                              </v-col>
+                              <v-col cols="12">
+                                <v-btn
+                                  variant="outlined"
+                                  color="primary"
+                                  block
+                                  size="small"
+                                  class="text-none"
+                                  @click="openQRHistoryDialog"
+                                >
+                                  <v-icon start size="18" color="#1565C0">mdi-qrcode-scan</v-icon>
+                                  Riwayat QR Scan
+                                </v-btn>
+                              </v-col>
+                            </v-row>
                           </div>
                         </div>
-  
-                        <v-form @submit.prevent="checkInManual" ref="manualForm">
-                          <v-text-field
-                            v-model="manualInput"
-                            label="Nomor Antrean / ID Pasien"
-                            placeholder="Contoh: P12345"
-                            prepend-inner-icon="mdi-account-card-details"
-                            variant="outlined"
-                            :color="primaryColor"
-                            class="input-modern mb-4"
-                            required
-                            :rules="[v => !!v || 'Field ini wajib diisi']"
-                            density="comfortable"
-                            hide-details="auto"
-                          >
-                            <template v-slot:append-inner>
-                              <v-icon :color="manualInput ? 'success' : 'grey'" size="20">
-                                {{ manualInput ? 'mdi-check-circle' : 'mdi-circle-outline' }}
-                              </v-icon>
-                            </template>
-                          </v-text-field>
-  
-                          <v-btn
-                            class="btn-primary-modern btn-centered"
-                            size="large"
-                            type="submit"
-                            elevation="0"
-                          >
-                            <v-icon start size="20">mdi-login</v-icon>
-                            Check-in Sekarang
-                          </v-btn>
-                        </v-form>
-  
-                        <!-- Quick Access Buttons -->
-                        <div class="quick-actions mt-4">
-                          <p class="text-caption text-grey text-center mb-3">Akses Cepat</p>
-                          <v-row dense>
-                            <v-col cols="12">
-                              <v-btn
-                                variant="outlined"
-                                :color="primaryColor"
-                                block
-                                size="small"
-                                class="text-none"
-                                @click="openHistoryDialog"
-                              >
-                                <v-icon start size="18">mdi-history</v-icon>
-                                Riwayat
-                              </v-btn>
-                            </v-col>
-                          </v-row>
-                        </div>
-                      </div>
-                    </v-window-item>
-  
-                    <!-- Tab Generate QR -->
-                    <v-window-item value="generate">
-                      <div class="tab-content">
-                        <!-- Status Header -->
-                        <div class="status-header mb-3">
-                          <div class="status-icon-wrapper">
-                            <v-icon :color="primaryColor" size="24">mdi-qrcode</v-icon>
+                      </v-col>
+
+                        <!-- Right: Manual Input -->
+                        <v-col cols="12" md="6" class="checkin-right-col">
+                        <div class="tab-content">
+                          <!-- Status Header -->
+                          <div class="status-header mb-3">
+                            <div class="status-icon-wrapper">
+                              <v-icon :color="secondaryColor" size="24">mdi-keyboard</v-icon>
+                            </div>
+                            <div class="status-text">
+                              <h3 class="status-title">Input Manual</h3>
+                              <p class="status-subtitle">Masukkan nomor antrean atau ID pasien</p>
+                            </div>
                           </div>
-                          <div class="status-text">
-                            <h3 class="status-title">Generate QR Code untuk Testing</h3>
-                            <p class="status-subtitle">Buat QR code yang bisa Anda scan di tab "Scan QR"</p>
-                          </div>
-                        </div>
-  
-                        <!-- Quick Preset Buttons -->
-                        <div class="mb-3">
-                          <p class="text-caption text-grey text-center mb-2">Quick Test QR Codes:</p>
-                          <v-row dense>
-                            <v-col cols="6">
-                              <v-btn
-                                variant="outlined"
-                                color="success"
-                                size="small"
-                                @click="generateQuickQR('P12345', 'ALLOWED')"
-                                class="text-none"
-                                block
-                              >
-                                <v-icon start size="16">mdi-check-circle</v-icon>
-                                Test ALLOWED
-                              </v-btn>
-                            </v-col>
-                            <v-col cols="6">
-                              <v-btn
-                                variant="outlined"
-                                color="warning"
-                                size="small"
-                                @click="generateQuickQR('P12345', 'NOT_ALLOWED')"
-                                class="text-none"
-                                block
-                              >
-                                <v-icon start size="16">mdi-clock-alert</v-icon>
-                                Test NOT_ALLOWED
-                              </v-btn>
-                            </v-col>
-                          </v-row>
-                        </div>
-  
-                        <!-- Form Generate -->
-                        <v-form @submit.prevent="generateQRCode">
-                          <v-text-field
-                            v-model="generatePatientId"
-                            label="ID Pasien"
-                            placeholder="Contoh: P12345"
-                            prepend-inner-icon="mdi-identifier"
-                            variant="outlined"
-                            :color="primaryColor"
-                            class="input-modern mb-3"
-                            density="comfortable"
-                            clearable
-                            hide-details="auto"
-                          ></v-text-field>
-  
-                          <v-select
-                            v-model="generateStatus"
-                            label="Status Check-in"
-                            :items="statusOptions"
-                            prepend-inner-icon="mdi-shield-check"
-                            variant="outlined"
-                            :color="primaryColor"
-                            class="input-modern mb-4"
-                            density="comfortable"
-                            hide-details="auto"
-                          ></v-select>
-  
-                          <div class="d-flex justify-center">
+    
+                          <v-form @submit.prevent="checkInManual" ref="manualForm">
+                            <v-text-field
+                              v-model="manualInput"
+                              label="Nomor Antrean / ID Pasien"
+                              placeholder="Contoh: P12345"
+                              prepend-inner-icon="mdi-account-card-details"
+                              variant="outlined"
+                              :color="primaryColor"
+                              class="input-modern mb-4"
+                              required
+                              :rules="[v => !!v || 'Field ini wajib diisi']"
+                              density="comfortable"
+                              hide-details="auto"
+                            >
+                              <template v-slot:append-inner>
+                                <v-icon :color="manualInput ? 'success' : 'grey'" size="20">
+                                  {{ manualInput ? 'mdi-check-circle' : 'mdi-circle-outline' }}
+                                </v-icon>
+                              </template>
+                            </v-text-field>
+    
                             <v-btn
                               class="btn-primary-modern btn-centered"
                               size="large"
                               type="submit"
                               elevation="0"
-                              :disabled="!generatePatientId"
+                              block
                             >
-                              <v-icon start size="20">mdi-qrcode-plus</v-icon>
-                              Generate QR Code
+                              <v-icon start size="20">mdi-login</v-icon>
+                              Check-in Sekarang
                             </v-btn>
+                          </v-form>
+    
+                          <!-- Quick Access Buttons -->
+                          <div class="quick-actions mt-4">
+                            <p class="text-caption text-grey text-center mb-3">Akses Cepat</p>
+                            <v-row dense>
+                              <v-col cols="12">
+                                <v-btn
+                                  variant="outlined"
+                                  :color="primaryColor"
+                                  block
+                                  size="small"
+                                  class="text-none"
+                                  @click="openHistoryDialog"
+                                >
+                                  <v-icon start size="18">mdi-history</v-icon>
+                                  Lihat Semua Riwayat
+                                </v-btn>
+                              </v-col>
+                            </v-row>
                           </div>
-                        </v-form>
-  
-                        <!-- QR Code Display -->
-                        <div v-if="generatedQRData" class="qr-display mt-6">
-                          <v-card variant="outlined" class="pa-4">
-                            <div class="text-center">
-                              <p class="text-subtitle-2 text-grey mb-3">QR Code Anda:</p>
-                              <div id="qrcode" class="qr-code-container mb-4"></div>
-                              
-                              <v-chip :color="generateStatus === 'ALLOWED' ? 'success' : 'warning'" class="mb-3">
-                                <v-icon start>{{ generateStatus === 'ALLOWED' ? 'mdi-check' : 'mdi-clock-alert' }}</v-icon>
-                                {{ generateStatus === 'ALLOWED' ? 'Diizinkan Check-in' : 'Belum Diizinkan' }}
+
+                          <!-- Riwayat Check-in -->
+                          <div class="history-section mt-6">
+                            <div class="d-flex align-center justify-space-between mb-3">
+                              <h4 class="text-subtitle-1 font-weight-bold">
+                                <v-icon size="20" class="mr-2" :color="primaryColor">mdi-history</v-icon>
+                                Riwayat Check-in
+                              </h4>
+                              <v-chip size="x-small" color="grey-lighten-2">
+                                {{ recentHistory.length }} item
                               </v-chip>
-  
-                              <p class="text-body-2 text-grey mb-4">
-                                Data: {{ generatedQRData }}
-                              </p>
-  
-                              <!-- Action Buttons -->
-                              <v-row dense>
-                                <v-col cols="4">
-                                  <v-btn
-                                    variant="outlined"
-                                    :color="primaryColor"
-                                    block
-                                    size="small"
-                                    @click="downloadQR"
-                                    class="text-none"
-                                  >
-                                    <v-icon start size="18">mdi-download</v-icon>
-                                    Download
-                                  </v-btn>
-                                </v-col>
-                                <v-col cols="4">
-                                  <v-btn
-                                    variant="outlined"
-                                    :color="primaryColor"
-                                    block
-                                    size="small"
-                                    @click="copyQRToClipboard"
-                                    class="text-none"
-                                  >
-                                    <v-icon start size="18">mdi-content-copy</v-icon>
-                                    Copy
-                                  </v-btn>
-                                </v-col>
-                                <v-col cols="4">
-                                  <v-btn
-                                    variant="outlined"
-                                    :color="primaryColor"
-                                    block
-                                    size="small"
-                                    @click="shareQR"
-                                    class="text-none"
-                                  >
-                                    <v-icon start size="18">mdi-share-variant</v-icon>
-                                    Share
-                                  </v-btn>
-                                </v-col>
-                              </v-row>
                             </div>
-                          </v-card>
-  
-                          <!-- Instructions -->
-                          <v-alert
-                            type="success"
-                            variant="tonal"
-                            class="mt-4 text-body-2"
-                          >
-                            <template v-slot:prepend>
-                              <v-icon>mdi-information</v-icon>
-                            </template>
-                            <strong>Cara menggunakan untuk Testing:</strong>
-                            <ol class="ml-4 mt-2">
-                              <li>Gunakan tombol <strong>"Test ALLOWED"</strong> atau <strong>"Test NOT_ALLOWED"</strong> untuk generate QR cepat, atau isi form manual</li>
-                              <li>Klik <strong>"Download"</strong> untuk menyimpan QR code ke komputer</li>
-                              <li>Buka file QR code yang didownload (bisa di HP atau layar lain)</li>
-                              <li>Pindah ke tab <strong>"Scan QR"</strong> dan scan QR code tersebut</li>
-                              <li>Atau gunakan <strong>"Copy"</strong> untuk menyalin QR ke clipboard dan paste di aplikasi lain</li>
-                            </ol>
-                          </v-alert>
+                            
+                            <div v-if="recentHistory.length > 0" class="recent-history-list">
+                              <v-card
+                                v-for="(item, index) in recentHistory"
+                                :key="index"
+                                variant="outlined"
+                                class="mb-2 history-item-compact"
+                                :class="getStatusClass(item.status)"
+                              >
+                                <v-card-text class="pa-3">
+                                  <div class="d-flex justify-space-between align-start">
+                                    <div class="flex-grow-1">
+                                      <div class="d-flex align-center mb-1">
+                                        <v-chip
+                                          :color="getStatusColor(item.status)"
+                                          size="x-small"
+                                          class="mr-2"
+                                        >
+                                          <v-icon start size="12">{{ getStatusIcon(item.status) }}</v-icon>
+                                          {{ getStatusText(item.status) }}
+                                        </v-chip>
+                                        <v-chip
+                                          color="grey-lighten-1"
+                                          size="x-small"
+                                          variant="text"
+                                        >
+                                          {{ item.method }}
+                                        </v-chip>
+                                      </div>
+                                      
+                                      <p class="text-body-2 font-weight-medium mb-1">
+                                        <v-icon size="14" class="mr-1" :color="primaryColor">mdi-account-circle</v-icon>
+                                        {{ item.patientId }}
+                                      </p>
+                                      
+                                      <div class="d-flex align-center">
+                                        <v-chip
+                                          size="x-small"
+                                          variant="text"
+                                          color="grey-darken-1"
+                                          class="text-caption"
+                                        >
+                                          <v-icon start size="12">mdi-clock-outline</v-icon>
+                                          {{ formatTime(item.checkInTime) }}
+                                        </v-chip>
+                                      </div>
+                                    </div>
+                                  </div>
+                                </v-card-text>
+                              </v-card>
+                            </div>
+                            
+                            <div v-else class="text-center py-6">
+                              <v-icon size="48" color="grey-lighten-1" class="mb-2">mdi-history</v-icon>
+                              <p class="text-body-2 text-grey">Belum ada riwayat check-in</p>
+                            </div>
+                          </div>
                         </div>
+                      </v-col>
+                      </v-row>
                       </div>
                     </v-window-item>
-                  </v-window>
-                </v-card-text>
-              </v-card>
-  
-              <!-- Stats Footer Minimalis -->
-              <div class="stats-footer-modern mt-3">
-                <v-row dense>
-                  <v-col cols="4">
-                    <div class="stat-card-modern">
-                      <div class="stat-icon-modern">
-                        <v-icon :color="primaryColor" size="20">mdi-clock-outline</v-icon>
+
+                  <!-- Tab Generate QR -->
+                  <v-window-item value="generate">
+                    <div class="tab-content">
+                      <!-- Status Header -->
+                      <div class="status-header mb-3">
+                        <div class="status-icon-wrapper">
+                          <v-icon :color="primaryColor" size="24">mdi-qrcode</v-icon>
+                        </div>
+                        <div class="status-text">
+                          <h3 class="status-title">Generate QR Code untuk Testing</h3>
+                          <p class="status-subtitle">Buat QR code yang bisa Anda scan di tab "Scan QR"</p>
+                        </div>
                       </div>
-                      <div class="stat-value">24</div>
-                      <div class="stat-label">Hari Ini</div>
-                    </div>
-                  </v-col>
-                  <v-col cols="4">
-                    <div class="stat-card-modern">
-                      <div class="stat-icon-modern">
-                        <v-icon color="success" size="20">mdi-check-circle</v-icon>
+
+                      <!-- Quick Preset Buttons -->
+                      <div class="mb-3">
+                        <p class="text-caption text-grey text-center mb-2">Quick Test QR Codes:</p>
+                        <v-row dense>
+                          <v-col cols="6">
+                            <v-btn
+                              variant="outlined"
+                              color="success"
+                              size="small"
+                              @click="generateQuickQR('ALLOWED')"
+                              class="text-none"
+                              block
+                            >
+                              <v-icon start size="16">mdi-check-circle</v-icon>
+                              Test ALLOWED
+                            </v-btn>
+                          </v-col>
+                          <v-col cols="6">
+                            <v-btn
+                              variant="outlined"
+                              color="warning"
+                              size="small"
+                              @click="generateQuickQR('NOT_ALLOWED')"
+                              class="text-none"
+                              block
+                            >
+                              <v-icon start size="16">mdi-clock-alert</v-icon>
+                              Test NOT_ALLOWED
+                            </v-btn>
+                          </v-col>
+                        </v-row>
                       </div>
-                      <div class="stat-value">18</div>
-                      <div class="stat-label">Selesai</div>
-                    </div>
-                  </v-col>
-                  <v-col cols="4">
-                    <div class="stat-card-modern">
-                      <div class="stat-icon-modern">
-                        <v-icon :color="secondaryColor" size="20">mdi-account-group</v-icon>
+
+                      <!-- Form Generate -->
+                      <v-form @submit.prevent="generateQRCode">
+                        <v-select
+                          v-model="selectedKlinik"
+                          label="Pilih Klinik/Poli"
+                          :items="klinikOptions"
+                          prepend-inner-icon="mdi-hospital-building"
+                          variant="outlined"
+                          :color="primaryColor"
+                          class="input-modern mb-3"
+                          density="comfortable"
+                          :rules="[v => !!v || 'Klinik/Poli harus dipilih']"
+                          hide-details="auto"
+                          required
+                        ></v-select>
+                        
+                        <v-text-field
+                          v-model="generatePatientId"
+                          label="ID Pasien"
+                          placeholder="Auto-generate: P-00001"
+                          prepend-inner-icon="mdi-identifier"
+                          variant="outlined"
+                          :color="primaryColor"
+                          class="input-modern mb-3"
+                          density="comfortable"
+                          readonly
+                          hint="ID Pasien akan di-generate secara otomatis secara sequential"
+                          persistent-hint
+                          hide-details="auto"
+                        >
+                          <template v-slot:append-inner>
+                            <v-btn
+                              icon
+                              size="small"
+                              variant="text"
+                              @click="generatePatientId = generateSequentialPatientId()"
+                              title="Generate ID Baru"
+                            >
+                              <v-icon size="18">mdi-refresh</v-icon>
+                            </v-btn>
+                          </template>
+                        </v-text-field>
+
+                        <v-select
+                          v-model="generateStatus"
+                          label="Status Check-in"
+                          :items="statusOptions"
+                          prepend-inner-icon="mdi-shield-check"
+                          variant="outlined"
+                          :color="primaryColor"
+                          class="input-modern mb-4"
+                          density="comfortable"
+                          hide-details="auto"
+                        ></v-select>
+
+                        <div class="d-flex justify-center">
+                          <v-btn
+                            class="btn-primary-modern btn-centered"
+                            size="large"
+                            type="submit"
+                            elevation="0"
+                            :disabled="!selectedKlinik"
+                          >
+                            <v-icon start size="20">mdi-qrcode-plus</v-icon>
+                            Generate QR Code
+                          </v-btn>
+                        </div>
+                      </v-form>
+
+                      <!-- QR Code Display -->
+                      <div v-if="generatedQRData" class="qr-display mt-6">
+                        <v-card variant="outlined" class="pa-4">
+                          <div class="text-center">
+                            <p class="text-subtitle-2 text-grey mb-3">QR Code Anda:</p>
+                            <div id="qrcode" class="qr-code-container mb-4"></div>
+                            
+                            <v-chip :color="generateStatus === 'ALLOWED' ? 'success' : 'warning'" class="mb-3">
+                              <v-icon start>{{ generateStatus === 'ALLOWED' ? 'mdi-check' : 'mdi-clock-alert' }}</v-icon>
+                              {{ generateStatus === 'ALLOWED' ? 'Diizinkan Check-in' : 'Belum Diizinkan' }}
+                            </v-chip>
+
+                            <p class="text-body-2 text-grey mb-4">
+                              Data: {{ generatedQRData }}
+                            </p>
+
+                            <!-- Action Buttons -->
+                            <v-row dense>
+                              <v-col cols="4">
+                                <v-btn
+                                  variant="outlined"
+                                  :color="primaryColor"
+                                  block
+                                  size="small"
+                                  @click="downloadQR"
+                                  class="text-none"
+                                >
+                                  <v-icon start size="18">mdi-download</v-icon>
+                                  Download
+                                </v-btn>
+                              </v-col>
+                              <v-col cols="4">
+                                <v-btn
+                                  variant="outlined"
+                                  :color="primaryColor"
+                                  block
+                                  size="small"
+                                  @click="copyQRToClipboard"
+                                  class="text-none"
+                                >
+                                  <v-icon start size="18">mdi-content-copy</v-icon>
+                                  Copy
+                                </v-btn>
+                              </v-col>
+                              <v-col cols="4">
+                                <v-btn
+                                  variant="outlined"
+                                  :color="primaryColor"
+                                  block
+                                  size="small"
+                                  @click="shareQR"
+                                  class="text-none"
+                                >
+                                  <v-icon start size="18">mdi-share-variant</v-icon>
+                                  Share
+                                </v-btn>
+                              </v-col>
+                            </v-row>
+                          </div>
+                        </v-card>
+
+                        <!-- Instructions -->
+                        <v-alert
+                          type="success"
+                          variant="tonal"
+                          class="mt-4 text-body-2"
+                        >
+                          <template v-slot:prepend>
+                            <v-icon>mdi-information</v-icon>
+                          </template>
+                          <strong>Cara menggunakan untuk Testing:</strong>
+                          <ol class="ml-4 mt-2">
+                            <li>Gunakan tombol <strong>"Test ALLOWED"</strong> atau <strong>"Test NOT_ALLOWED"</strong> untuk generate QR cepat, atau isi form manual</li>
+                            <li>Klik <strong>"Download"</strong> untuk menyimpan QR code ke komputer</li>
+                            <li>Buka file QR code yang didownload (bisa di HP atau layar lain)</li>
+                            <li>Pindah ke tab <strong>"Scan QR"</strong> dan scan QR code tersebut</li>
+                            <li>Atau gunakan <strong>"Copy"</strong> untuk menyalin QR ke clipboard dan paste di aplikasi lain</li>
+                          </ol>
+                        </v-alert>
                       </div>
-                      <div class="stat-value">6</div>
-                      <div class="stat-label">Menunggu</div>
                     </div>
-                  </v-col>
-                </v-row>
-              </div>
-            </v-col>
-          </v-row>
-        </v-container>
-      </v-main>
-      
-      <!-- Enhanced Dialog with Blur -->
-      <v-dialog 
-        v-model="infoDialog" 
-        max-width="500" 
-        persistent
-        transition="dialog-transition"
-        scrim="rgba(0, 0, 0, 0.5)"
-        class="blur-dialog"
-      >
-        <v-card class="rounded-xl dialog-card" elevation="24">
-          <div class="dialog-header text-center pa-8" :class="lastCheckInResult?.success && infoAction === 'checkin' ? 'success-header' : lastCheckInResult?.status === 'NOT_ALLOWED' ? 'warning-header' : 'error-header'">
-            <div class="decorative-circles">
-              <div class="circle circle-1"></div>
-              <div class="circle circle-2"></div>
-              <div class="circle circle-3"></div>
+                  </v-window-item>
+                </v-window>
+              </v-card-text>
+            </v-card>
+
+            <!-- Stats Footer Minimalis -->
+            <div class="stats-footer-modern mt-3">
+              <v-row dense>
+                <v-col cols="4">
+                  <div class="stat-card-modern">
+                    <div class="stat-icon-modern">
+                      <v-icon :color="primaryColor" size="20">mdi-clock-outline</v-icon>
+                    </div>
+                    <div class="stat-value">{{ statsToday }}</div>
+                    <div class="stat-label">Hari Ini</div>
+                  </div>
+                </v-col>
+                <v-col cols="4">
+                  <div class="stat-card-modern">
+                    <div class="stat-icon-modern">
+                      <v-icon color="success" size="20">mdi-check-circle</v-icon>
+                    </div>
+                    <div class="stat-value">{{ statsCompleted }}</div>
+                    <div class="stat-label">Selesai</div>
+                  </div>
+                </v-col>
+                <v-col cols="4">
+                  <div class="stat-card-modern">
+                    <div class="stat-icon-modern">
+                      <v-icon :color="secondaryColor" size="20">mdi-account-group</v-icon>
+                    </div>
+                    <div class="stat-value">{{ statsWaiting }}</div>
+                    <div class="stat-label">Menunggu</div>
+                  </div>
+                </v-col>
+              </v-row>
             </div>
-            
-            <div class="icon-wrapper mb-4">
-              <div class="icon-bg" :class="lastCheckInResult?.success && infoAction === 'checkin' ? 'icon-bg-success' : lastCheckInResult?.status === 'NOT_ALLOWED' ? 'icon-bg-warning' : 'icon-bg-error'">
-                <v-icon size="64" color="white" class="dialog-icon">
-                  {{ lastCheckInResult?.success && infoAction === 'checkin' ? 'mdi-check-circle' : lastCheckInResult?.status === 'NOT_ALLOWED' ? 'mdi-alert-circle' : 'mdi-close-circle' }}
-                </v-icon>
-              </div>
-            </div>
-            
-            <h2 class="text-h4 font-weight-bold text-white mb-2">
-              {{ lastCheckInResult?.success && infoAction === 'checkin' 
-                ? 'Check-in Berhasil!' 
-                : lastCheckInResult?.status === 'NOT_ALLOWED'
-                ? 'Belum Diizinkan'
-                : 'Check-in Gagal' }}
-            </h2>
-            
-            <div class="status-badge mt-3">
-              <v-chip 
-                :color="lastCheckInResult?.success && infoAction === 'checkin' ? 'white' : 'white'" 
-                :text-color="lastCheckInResult?.success && infoAction === 'checkin' ? 'success' : lastCheckInResult?.status === 'NOT_ALLOWED' ? 'orange' : 'error'"
-                size="small"
-                class="font-weight-bold"
-              >
-                <v-icon start size="16">
-                  {{ lastCheckInResult?.success && infoAction === 'checkin' ? 'mdi-check' : lastCheckInResult?.status === 'NOT_ALLOWED' ? 'mdi-clock-alert' : 'mdi-close-circle' }}
-                </v-icon>
-                {{ lastCheckInResult?.success && infoAction === 'checkin' 
-                  ? 'Berhasil' 
-                  : lastCheckInResult?.status === 'NOT_ALLOWED'
-                  ? 'Menunggu'
-                  : 'Gagal' }}
-              </v-chip>
+          </v-col>
+        </v-row>
+      </v-container>
+    </v-main>
+    
+    <!-- Enhanced Dialog with Blur -->
+    <v-dialog 
+      v-model="infoDialog" 
+      max-width="500" 
+      persistent
+      transition="dialog-transition"
+      scrim="rgba(0, 0, 0, 0.5)"
+      class="blur-dialog"
+    >
+      <v-card class="rounded-xl dialog-card" elevation="24">
+        <div class="dialog-header text-center pa-8" :class="lastCheckInResult?.success && infoAction === 'checkin' ? 'success-header' : lastCheckInResult?.status === 'NOT_ALLOWED' ? 'warning-header' : 'error-header'">
+          <div class="decorative-circles">
+            <div class="circle circle-1"></div>
+            <div class="circle circle-2"></div>
+            <div class="circle circle-3"></div>
+          </div>
+          
+          <div class="icon-wrapper mb-4">
+            <div class="icon-bg" :class="lastCheckInResult?.success && infoAction === 'checkin' ? 'icon-bg-success' : lastCheckInResult?.status === 'NOT_ALLOWED' ? 'icon-bg-warning' : 'icon-bg-error'">
+              <v-icon size="64" color="white" class="dialog-icon">
+                {{ lastCheckInResult?.success && infoAction === 'checkin' ? 'mdi-check-circle' : lastCheckInResult?.status === 'NOT_ALLOWED' ? 'mdi-alert-circle' : 'mdi-close-circle' }}
+              </v-icon>
             </div>
           </div>
           
-          <v-card-text class="pa-8">
-            <div class="message-container">
-              <div class="message-icon mb-4">
-                <v-icon :color="lastCheckInResult?.success && infoAction === 'checkin' ? 'success' : lastCheckInResult?.status === 'NOT_ALLOWED' ? 'orange' : 'error'" size="32">
-                  {{ lastCheckInResult?.success && infoAction === 'checkin' ? 'mdi-check-circle' : lastCheckInResult?.status === 'NOT_ALLOWED' ? 'mdi-clock-alert' : 'mdi-close-circle' }}
+          <h2 class="text-h4 font-weight-bold text-white mb-2">
+            {{ lastCheckInResult?.success && infoAction === 'checkin' 
+              ? 'Check-in Berhasil!' 
+              : lastCheckInResult?.status === 'NOT_ALLOWED'
+              ? 'Belum Diizinkan'
+              : 'Check-in Gagal' }}
+          </h2>
+          
+          <div class="status-badge mt-3">
+            <v-chip 
+              :color="lastCheckInResult?.success && infoAction === 'checkin' ? 'white' : 'white'" 
+              :text-color="lastCheckInResult?.success && infoAction === 'checkin' ? 'success' : lastCheckInResult?.status === 'NOT_ALLOWED' ? 'orange' : 'error'"
+              size="small"
+              class="font-weight-bold"
+            >
+              <v-icon start size="16">
+                {{ lastCheckInResult?.success && infoAction === 'checkin' ? 'mdi-check' : lastCheckInResult?.status === 'NOT_ALLOWED' ? 'mdi-clock-alert' : 'mdi-close-circle' }}
+              </v-icon>
+              {{ lastCheckInResult?.success && infoAction === 'checkin' 
+                ? 'Berhasil' 
+                : lastCheckInResult?.status === 'NOT_ALLOWED'
+                ? 'Menunggu'
+                : 'Gagal' }}
+            </v-chip>
+          </div>
+        </div>
+        
+        <v-card-text class="pa-8">
+          <div class="message-container">
+            <div class="message-icon mb-4">
+              <v-icon :color="lastCheckInResult?.success && infoAction === 'checkin' ? 'success' : lastCheckInResult?.status === 'NOT_ALLOWED' ? 'orange' : 'error'" size="32">
+                {{ lastCheckInResult?.success && infoAction === 'checkin' ? 'mdi-check-circle' : lastCheckInResult?.status === 'NOT_ALLOWED' ? 'mdi-clock-alert' : 'mdi-close-circle' }}
+              </v-icon>
+            </div>
+            
+            <div class="text-h6 font-weight-bold mb-3 text-center" style="white-space: pre-line;">{{ infoMessage }}</div>
+            
+            <v-divider class="my-4"></v-divider>
+            
+            <div v-if="lastCheckInResult" class="instruction-box pa-4 rounded-lg" :class="lastCheckInResult.success && infoAction === 'checkin' ? 'instruction-success' : 'instruction-warning'">
+              <div class="d-flex align-start">
+                <v-icon :color="lastCheckInResult.success && infoAction === 'checkin' ? 'success' : 'orange'" class="mr-3 mt-1">
+                  {{ lastCheckInResult.success && infoAction === 'checkin' ? 'mdi-check-circle' : 'mdi-timer-sand' }}
                 </v-icon>
-              </div>
-              
-              <div class="text-h6 font-weight-bold mb-3 text-center" style="white-space: pre-line;">{{ infoMessage }}</div>
-              
-              <v-divider class="my-4"></v-divider>
-              
-              <div v-if="lastCheckInResult" class="instruction-box pa-4 rounded-lg" :class="lastCheckInResult.success && infoAction === 'checkin' ? 'instruction-success' : 'instruction-warning'">
-                <div class="d-flex align-start">
-                  <v-icon :color="lastCheckInResult.success && infoAction === 'checkin' ? 'success' : 'orange'" class="mr-3 mt-1">
-                    {{ lastCheckInResult.success && infoAction === 'checkin' ? 'mdi-check-circle' : 'mdi-timer-sand' }}
-                  </v-icon>
-                  <div>
-                    <p class="text-body-1 font-weight-medium mb-1">
-                      {{ lastCheckInResult.success && infoAction === 'checkin' ? 'Status Check-in:' : 'Status:' }}
-                    </p>
-                    <p class="text-body-2 text-grey-darken-1">
-                      {{ lastCheckInResult.success && infoAction === 'checkin' 
-                        ? 'Check-in telah berhasil dilakukan. Pasien dapat melanjutkan ke tahap selanjutnya.' 
-                        : lastCheckInResult.status === 'NOT_ALLOWED'
-                        ? 'Mohon menunggu hingga antrean Anda dipanggil oleh petugas'
-                        : 'Proses check-in gagal. Silakan coba lagi atau hubungi petugas.' }}
-                    </p>
-                  </div>
+                <div>
+                  <p class="text-body-1 font-weight-medium mb-1">
+                    {{ lastCheckInResult.success && infoAction === 'checkin' ? 'Status Check-in:' : 'Status:' }}
+                  </p>
+                  <p class="text-body-2 text-grey-darken-1">
+                    {{ lastCheckInResult.success && infoAction === 'checkin' 
+                      ? 'Check-in telah berhasil dilakukan. Pasien dapat melanjutkan ke tahap selanjutnya.' 
+                      : lastCheckInResult.status === 'NOT_ALLOWED'
+                      ? 'Mohon menunggu hingga antrean Anda dipanggil oleh petugas'
+                      : 'Proses check-in gagal. Silakan coba lagi atau hubungi petugas.' }}
+                  </p>
                 </div>
               </div>
-              
-              <!-- Patient Info Card -->
-              <v-card variant="outlined" class="mt-4 patient-info-card" color="grey-lighten-4">
-                <v-card-text class="py-3">
-                  <div class="d-flex justify-space-between align-center">
-                    <div class="d-flex align-center">
-                      <v-icon color="primary" class="mr-2 patient-info-icon">mdi-account-circle</v-icon>
-                      <div>
-                        <p class="text-caption patient-info-label mb-0">ID Pasien</p>
-                        <p class="text-body-1 patient-info-value mb-0">{{ scannedData?.split('|')[0] || 'N/A' }}</p>
-                      </div>
-                    </div>
-                    <div class="text-right">
-                      <p class="text-caption patient-info-label mb-0">Waktu Scan</p>
-                      <p class="text-body-2 patient-info-value mb-0">{{ new Date().toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' }) }}</p>
+            </div>
+            
+            <!-- Patient Info Card -->
+            <v-card variant="outlined" class="mt-4 patient-info-card" color="grey-lighten-4">
+              <v-card-text class="py-3">
+                <div class="d-flex justify-space-between align-center">
+                  <div class="d-flex align-center">
+                    <v-icon color="primary" class="mr-2 patient-info-icon">mdi-account-circle</v-icon>
+                    <div>
+                      <p class="text-caption patient-info-label mb-0">ID Pasien</p>
+                      <p class="text-body-1 patient-info-value mb-0">{{ scannedData?.split('|')[0] || 'N/A' }}</p>
                     </div>
                   </div>
-                </v-card-text>
-              </v-card>
-            </div>
-          </v-card-text>
-          
-          <v-card-actions class="pa-6 pt-0">
-            <v-row dense>
-              <v-col v-if="infoAction === 'kembali'" cols="12">
+                  <div class="text-right">
+                    <p class="text-caption patient-info-label mb-0">Waktu Scan</p>
+                    <p class="text-body-2 patient-info-value mb-0">{{ new Date().toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' }) }}</p>
+                  </div>
+                </div>
+              </v-card-text>
+            </v-card>
+          </div>
+        </v-card-text>
+        
+        <v-card-actions class="pa-6 pt-0">
+          <v-row dense>
+            <v-col v-if="infoAction === 'kembali'" cols="12">
+              <v-btn
+                color="grey-darken-1"
+                class="text-white font-weight-bold text-none dialog-button"
+                size="x-large"
+                block
+                variant="flat"
+                @click="handleInfoAction"
+                elevation="0"
+                prepend-icon="mdi-arrow-left"
+              >
+                Kembali
+              </v-btn>
+            </v-col>
+            <template v-else>
+              <v-col cols="12">
                 <v-btn
-                  color="grey-darken-1"
+                  :color="lastCheckInResult?.success && infoAction === 'checkin' ? 'success' : 'primary'"
                   class="text-white font-weight-bold text-none dialog-button"
                   size="x-large"
                   block
                   variant="flat"
                   @click="handleInfoAction"
-                  elevation="0"
-                  prepend-icon="mdi-arrow-left"
+                  elevation="4"
+                  :prepend-icon="lastCheckInResult?.success && infoAction === 'checkin' ? 'mdi-check' : 'mdi-close'"
                 >
-                  Kembali
+                  {{ lastCheckInResult?.success && infoAction === 'checkin' ? 'Tutup' : 'Tutup' }}
                 </v-btn>
               </v-col>
-              <template v-else>
-                <v-col cols="12">
-                  <v-btn
-                    :color="lastCheckInResult?.success && infoAction === 'checkin' ? 'success' : 'primary'"
-                    class="text-white font-weight-bold text-none dialog-button"
-                    size="x-large"
-                    block
-                    variant="flat"
-                    @click="handleInfoAction"
-                    elevation="4"
-                    :prepend-icon="lastCheckInResult?.success && infoAction === 'checkin' ? 'mdi-check' : 'mdi-close'"
-                  >
-                    {{ lastCheckInResult?.success && infoAction === 'checkin' ? 'Tutup' : 'Tutup' }}
-                  </v-btn>
-                </v-col>
-              </template>
-            </v-row>
-          </v-card-actions>
-        </v-card>
-      </v-dialog>
-      
-      <!-- Enhanced Snackbar -->
-      <v-snackbar
-        v-model="snackbar.show"
-        :color="snackbar.color"
-        :timeout="snackbar.timeout"
-        location="bottom right"
-        rounded="pill"
-        elevation="24"
-        class="custom-snackbar"
-      >
-        <div class="d-flex align-center">
-          <v-avatar :color="snackbar.color" size="32" class="mr-3">
-            <v-icon size="20" color="white">{{ snackbar.icon }}</v-icon>
-          </v-avatar>
-          <div>
-            <div class="font-weight-bold">{{ snackbar.title }}</div>
-            <div class="text-body-2">{{ snackbar.message }}</div>
-          </div>
+            </template>
+          </v-row>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+    
+    <!-- Enhanced Snackbar -->
+    <v-snackbar
+      v-model="snackbar.show"
+      :color="snackbar.color"
+      :timeout="snackbar.timeout"
+      location="bottom right"
+      rounded="pill"
+      elevation="24"
+      class="custom-snackbar"
+    >
+      <div class="d-flex align-center">
+        <v-avatar :color="snackbar.color" size="32" class="mr-3">
+          <v-icon size="20" color="white">{{ snackbar.icon }}</v-icon>
+        </v-avatar>
+        <div>
+          <div class="font-weight-bold">{{ snackbar.title }}</div>
+          <div class="text-body-2">{{ snackbar.message }}</div>
         </div>
-      </v-snackbar>
-  
-      <!-- History Dialog -->
-      <v-dialog 
-        v-model="historyDialog" 
-        max-width="800" 
-        persistent
-        transition="dialog-transition"
-        scrim="rgba(0, 0, 0, 0.5)"
-        class="blur-dialog"
-      >
-        <v-card class="rounded-xl dialog-card" elevation="24">
-          <div class="dialog-header text-center pa-6" style="background: linear-gradient(135deg, #1565C0 0%, #0D47A1 100%);">
-            <h2 class="text-h5 font-weight-bold text-white mb-2">
-              <v-icon color="white" class="mr-2">mdi-history</v-icon>
-              Riwayat Check-in
-            </h2>
-            <p class="text-body-2 text-white opacity-90">Daftar check-in yang telah dilakukan</p>
+      </div>
+    </v-snackbar>
+
+    <!-- History Dialog -->
+    <v-dialog 
+      v-model="historyDialog" 
+      max-width="800" 
+      persistent
+      transition="dialog-transition"
+      scrim="rgba(0, 0, 0, 0.5)"
+      class="blur-dialog"
+    >
+      <v-card class="rounded-xl dialog-card" elevation="24">
+        <div class="dialog-header text-center pa-6" style="background: linear-gradient(135deg, #1565C0 0%, #0D47A1 100%);">
+          <h2 class="text-h5 font-weight-bold text-white mb-2">
+            <v-icon color="white" class="mr-2">mdi-history</v-icon>
+            Riwayat Check-in
+          </h2>
+          <p class="text-body-2 text-white opacity-90">Daftar check-in yang telah dilakukan</p>
+        </div>
+        
+        <v-card-text class="pa-6">
+          <!-- Filter dan Search -->
+          <div class="mb-4">
+            <v-row dense>
+              <v-col cols="12" md="6">
+                <v-text-field
+                  v-model="historySearch"
+                  label="Cari ID Pasien atau Nomor Antrean"
+                  prepend-inner-icon="mdi-magnify"
+                  variant="outlined"
+                  density="comfortable"
+                  clearable
+                  hide-details
+                ></v-text-field>
+              </v-col>
+              <v-col cols="12" md="3">
+                <v-select
+                  v-model="historyStatusFilter"
+                  label="Filter Status"
+                  :items="historyStatusOptions"
+                  variant="outlined"
+                  density="comfortable"
+                  hide-details
+                  clearable
+                ></v-select>
+              </v-col>
+              <v-col cols="12" md="3">
+                <v-btn
+                  color="error"
+                  variant="outlined"
+                  block
+                  @click="clearHistory"
+                  :disabled="checkInHistory.length === 0"
+                >
+                  <v-icon start>mdi-delete</v-icon>
+                  Hapus Semua
+                </v-btn>
+              </v-col>
+            </v-row>
           </div>
-          
-          <v-card-text class="pa-6">
-            <!-- Filter dan Search -->
-            <div class="mb-4">
-              <v-row dense>
-                <v-col cols="12" md="6">
-                  <v-text-field
-                    v-model="historySearch"
-                    label="Cari ID Pasien atau Nomor Antrean"
-                    prepend-inner-icon="mdi-magnify"
-                    variant="outlined"
-                    density="comfortable"
-                    clearable
-                    hide-details
-                  ></v-text-field>
-                </v-col>
-                <v-col cols="12" md="3">
-                  <v-select
-                    v-model="historyStatusFilter"
-                    label="Filter Status"
-                    :items="historyStatusOptions"
-                    variant="outlined"
-                    density="comfortable"
-                    hide-details
-                    clearable
-                  ></v-select>
-                </v-col>
-                <v-col cols="12" md="3">
-                  <v-btn
-                    color="error"
-                    variant="outlined"
-                    block
-                    @click="clearHistory"
-                    :disabled="checkInHistory.length === 0"
-                  >
-                    <v-icon start>mdi-delete</v-icon>
-                    Hapus Semua
-                  </v-btn>
-                </v-col>
-              </v-row>
-            </div>
-  
-            <!-- History List -->
-            <div v-if="filteredHistory.length > 0" class="history-list">
-              <v-card
-                v-for="(item, index) in filteredHistory"
-                :key="index"
-                variant="outlined"
-                class="mb-3 history-item"
-                :class="getStatusClass(item.status)"
-              >
-                <v-card-text class="pa-4">
-                  <div class="d-flex justify-space-between align-start">
-                    <div class="flex-grow-1">
-                      <div class="d-flex align-center mb-2">
-                        <v-chip
-                          :color="getStatusColor(item.status)"
-                          size="small"
-                          class="mr-2"
-                        >
-                          <v-icon start size="16">{{ getStatusIcon(item.status) }}</v-icon>
-                          {{ getStatusText(item.status) }}
-                        </v-chip>
-                        <v-chip
-                          color="grey-lighten-1"
-                          size="x-small"
-                          variant="text"
-                        >
-                          {{ item.method }}
-                        </v-chip>
-                      </div>
-                      
-                      <div class="mb-2">
-                        <p class="text-body-1 font-weight-bold mb-1">
-                          <v-icon size="18" class="mr-1" :color="primaryColor">mdi-account-circle</v-icon>
-                          ID Pasien: {{ item.patientId }}
-                        </p>
-                        <p v-if="item.queueNumber" class="text-body-2 text-grey mb-1">
-                          <v-icon size="16" class="mr-1">mdi-ticket</v-icon>
-                          Nomor Antrean: {{ item.queueNumber }}
-                        </p>
-                      </div>
-                      
-                      <div class="d-flex flex-wrap gap-2">
-                        <v-chip
-                          size="x-small"
-                          variant="outlined"
-                          color="grey-darken-1"
-                        >
-                          <v-icon start size="14">mdi-clock-outline</v-icon>
-                          {{ formatDateTime(item.checkInTime) }}
-                        </v-chip>
-                        <v-chip
-                          v-if="item.checkInDate"
-                          size="x-small"
-                          variant="outlined"
-                          color="grey-darken-1"
-                        >
-                          <v-icon start size="14">mdi-calendar</v-icon>
-                          {{ formatDate(item.checkInDate) }}
-                        </v-chip>
-                      </div>
+
+          <!-- History List -->
+          <div v-if="filteredHistory.length > 0" class="history-list">
+            <v-card
+              v-for="(item, index) in filteredHistory"
+              :key="index"
+              variant="outlined"
+              class="mb-3 history-item"
+              :class="getStatusClass(item.status)"
+            >
+              <v-card-text class="pa-4">
+                <div class="d-flex justify-space-between align-start">
+                  <div class="flex-grow-1">
+                    <div class="d-flex align-center mb-2">
+                      <v-chip
+                        :color="getStatusColor(item.status)"
+                        size="small"
+                        class="mr-2"
+                      >
+                        <v-icon start size="16">{{ getStatusIcon(item.status) }}</v-icon>
+                        {{ getStatusText(item.status) }}
+                      </v-chip>
+                      <v-chip
+                        color="grey-lighten-1"
+                        size="x-small"
+                        variant="text"
+                      >
+                        {{ item.method }}
+                      </v-chip>
                     </div>
                     
-                    <div class="ml-4">
-                      <v-btn
-                        icon
-                        size="small"
-                        variant="text"
-                        color="error"
-                        @click="deleteHistoryItem(index)"
-                      >
-                        <v-icon>mdi-delete-outline</v-icon>
-                      </v-btn>
-                    </div>
-                  </div>
-                </v-card-text>
-              </v-card>
-            </div>
-  
-            <!-- Empty State -->
-            <div v-else class="text-center py-12">
-              <v-icon size="64" color="grey-lighten-1" class="mb-4">mdi-history</v-icon>
-              <p class="text-h6 text-grey mb-2">Belum ada riwayat check-in</p>
-              <p class="text-body-2 text-grey">Riwayat check-in akan muncul di sini setelah Anda melakukan check-in</p>
-            </div>
-          </v-card-text>
-          
-          <v-card-actions class="pa-6 pt-0">
-            <v-spacer></v-spacer>
-            <v-btn
-              color="primary"
-              class="text-white font-weight-bold text-none"
-              size="large"
-              variant="flat"
-              @click="historyDialog = false"
-              prepend-icon="mdi-close"
-            >
-              Tutup
-            </v-btn>
-          </v-card-actions>
-        </v-card>
-      </v-dialog>
-  
-      <!-- QR History Dialog -->
-      <v-dialog 
-        v-model="qrHistoryDialog" 
-        max-width="800" 
-        persistent
-        transition="dialog-transition"
-        scrim="rgba(0, 0, 0, 0.5)"
-        class="blur-dialog"
-      >
-        <v-card class="rounded-xl dialog-card" elevation="24">
-          <div class="dialog-header text-center pa-6" style="background: linear-gradient(135deg, #FB8C00 0%, #F57C00 100%);">
-            <h2 class="text-h5 font-weight-bold text-white mb-2">
-              <v-icon color="white" class="mr-2">mdi-qrcode-scan</v-icon>
-              Riwayat QR Scan
-            </h2>
-            <p class="text-body-2 text-white opacity-90">Daftar QR code yang telah di-scan</p>
-          </div>
-          
-          <v-card-text class="pa-6">
-            <!-- Filter dan Search -->
-            <div class="mb-4">
-              <v-row dense>
-                <v-col cols="12" md="9">
-                  <v-text-field
-                    v-model="historySearch"
-                    label="Cari Data QR Code"
-                    prepend-inner-icon="mdi-magnify"
-                    variant="outlined"
-                    density="comfortable"
-                    clearable
-                    hide-details
-                  ></v-text-field>
-                </v-col>
-                <v-col cols="12" md="3">
-                  <v-btn
-                    color="error"
-                    variant="outlined"
-                    block
-                    @click="clearQRHistory"
-                    :disabled="scannedQRHistory.length === 0"
-                  >
-                    <v-icon start>mdi-delete</v-icon>
-                    Hapus Semua
-                  </v-btn>
-                </v-col>
-              </v-row>
-            </div>
-  
-            <!-- QR History List -->
-            <div v-if="filteredQRHistory.length > 0" class="history-list">
-              <v-card
-                v-for="(item, index) in filteredQRHistory"
-                :key="index"
-                variant="outlined"
-                class="mb-3 history-item"
-              >
-                <v-card-text class="pa-4">
-                  <div class="d-flex justify-space-between align-start">
-                    <div class="flex-grow-1">
-                      <div class="mb-2">
-                        <p class="text-body-1 font-weight-bold mb-1">
-                          <v-icon size="18" class="mr-1" :color="primaryColor">mdi-qrcode</v-icon>
-                          Data QR: {{ item.data }}
-                        </p>
-                      </div>
-                      
-                      <div class="d-flex flex-wrap gap-2">
-                        <v-chip
-                          size="x-small"
-                          variant="outlined"
-                          color="grey-darken-1"
-                        >
-                          <v-icon start size="14">mdi-clock-outline</v-icon>
-                          {{ item.time }}
-                        </v-chip>
-                        <v-chip
-                          size="x-small"
-                          variant="outlined"
-                          color="grey-darken-1"
-                        >
-                          <v-icon start size="14">mdi-calendar</v-icon>
-                          {{ item.date }}
-                        </v-chip>
-                      </div>
+                    <div class="mb-2">
+                      <p class="text-body-1 font-weight-bold mb-1">
+                        <v-icon size="18" class="mr-1" :color="primaryColor">mdi-account-circle</v-icon>
+                        ID Pasien: {{ item.patientId }}
+                      </p>
+                      <p v-if="item.queueNumber" class="text-body-2 text-grey mb-1">
+                        <v-icon size="16" class="mr-1">mdi-ticket</v-icon>
+                        Nomor Antrean: {{ item.queueNumber }}
+                      </p>
                     </div>
                     
-                    <div class="ml-4">
-                      <v-btn
-                        icon
-                        size="small"
-                        variant="text"
-                        color="primary"
-                        @click="useQRData(item.data)"
+                    <div class="d-flex flex-wrap gap-2">
+                      <v-chip
+                        size="x-small"
+                        variant="outlined"
+                        color="grey-darken-1"
                       >
-                        <v-icon>mdi-refresh</v-icon>
-                      </v-btn>
-                      <v-btn
-                        icon
-                        size="small"
-                        variant="text"
-                        color="error"
-                        @click="deleteQRHistoryItem(index)"
+                        <v-icon start size="14">mdi-clock-outline</v-icon>
+                        {{ formatDateTime(item.checkInTime) }}
+                      </v-chip>
+                      <v-chip
+                        v-if="item.checkInDate"
+                        size="x-small"
+                        variant="outlined"
+                        color="grey-darken-1"
                       >
-                        <v-icon>mdi-delete-outline</v-icon>
-                      </v-btn>
+                        <v-icon start size="14">mdi-calendar</v-icon>
+                        {{ formatDate(item.checkInDate) }}
+                      </v-chip>
                     </div>
                   </div>
-                </v-card-text>
-              </v-card>
-            </div>
-  
-            <!-- Empty State -->
-            <div v-else class="text-center py-12">
-              <v-icon size="64" color="grey-lighten-1" class="mb-4">mdi-qrcode-scan</v-icon>
-              <p class="text-h6 text-grey mb-2">Belum ada riwayat QR scan</p>
-              <p class="text-body-2 text-grey">Riwayat QR scan akan muncul di sini setelah Anda melakukan scan</p>
-            </div>
-          </v-card-text>
-          
-          <v-card-actions class="pa-6 pt-0">
-            <v-spacer></v-spacer>
-            <v-btn
-              color="primary"
-              class="text-white font-weight-bold text-none"
-              size="large"
-              variant="flat"
-              @click="qrHistoryDialog = false"
-              prepend-icon="mdi-close"
+                  
+                  <div class="ml-4">
+                    <v-btn
+                      icon
+                      size="small"
+                      variant="text"
+                      color="error"
+                      @click="deleteHistoryItem(index)"
+                    >
+                      <v-icon>mdi-delete-outline</v-icon>
+                    </v-btn>
+                  </div>
+                </div>
+              </v-card-text>
+            </v-card>
+          </div>
+
+          <!-- Empty State -->
+          <div v-else class="text-center py-12">
+            <v-icon size="64" color="grey-lighten-1" class="mb-4">mdi-history</v-icon>
+            <p class="text-h6 text-grey mb-2">Belum ada riwayat check-in</p>
+            <p class="text-body-2 text-grey">Riwayat check-in akan muncul di sini setelah Anda melakukan check-in</p>
+          </div>
+        </v-card-text>
+        
+        <v-card-actions class="pa-6 pt-0">
+          <v-spacer></v-spacer>
+          <v-btn
+            color="primary"
+            class="text-white font-weight-bold text-none"
+            size="large"
+            variant="flat"
+            @click="historyDialog = false"
+            prepend-icon="mdi-close"
+          >
+            Tutup
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <!-- QR History Dialog -->
+    <v-dialog 
+      v-model="qrHistoryDialog" 
+      max-width="800" 
+      persistent
+      transition="dialog-transition"
+      scrim="rgba(0, 0, 0, 0.5)"
+      class="blur-dialog"
+    >
+      <v-card class="rounded-xl dialog-card" elevation="24">
+        <div class="dialog-header text-center pa-6" style="background: linear-gradient(135deg, #FB8C00 0%, #F57C00 100%);">
+          <h2 class="text-h5 font-weight-bold text-white mb-2">
+            <v-icon color="white" class="mr-2">mdi-qrcode-scan</v-icon>
+            Riwayat QR Scan
+          </h2>
+          <p class="text-body-2 text-white opacity-90">Daftar QR code yang telah di-scan</p>
+        </div>
+        
+        <v-card-text class="pa-6">
+          <!-- Filter dan Search -->
+          <div class="mb-4">
+            <v-row dense>
+              <v-col cols="12" md="9">
+                <v-text-field
+                  v-model="historySearch"
+                  label="Cari Data QR Code"
+                  prepend-inner-icon="mdi-magnify"
+                  variant="outlined"
+                  density="comfortable"
+                  clearable
+                  hide-details
+                ></v-text-field>
+              </v-col>
+              <v-col cols="12" md="3">
+                <v-btn
+                  color="error"
+                  variant="outlined"
+                  block
+                  @click="clearQRHistory"
+                  :disabled="scannedQRHistory.length === 0"
+                >
+                  <v-icon start>mdi-delete</v-icon>
+                  Hapus Semua
+                </v-btn>
+              </v-col>
+            </v-row>
+          </div>
+
+          <!-- QR History List -->
+          <div v-if="filteredQRHistory.length > 0" class="history-list">
+            <v-card
+              v-for="(item, index) in filteredQRHistory"
+              :key="index"
+              variant="outlined"
+              class="mb-3 history-item"
             >
-              Tutup
-            </v-btn>
-          </v-card-actions>
-        </v-card>
-      </v-dialog>
+              <v-card-text class="pa-4">
+                <div class="d-flex justify-space-between align-start">
+                  <div class="flex-grow-1">
+                    <div class="mb-2">
+                      <p class="text-body-1 font-weight-bold mb-1">
+                        <v-icon size="18" class="mr-1" :color="primaryColor">mdi-qrcode</v-icon>
+                        Data QR: {{ item.data }}
+                      </p>
+                    </div>
+                    
+                    <div class="d-flex flex-wrap gap-2">
+                      <v-chip
+                        size="x-small"
+                        variant="outlined"
+                        color="grey-darken-1"
+                      >
+                        <v-icon start size="14">mdi-clock-outline</v-icon>
+                        {{ item.time }}
+                      </v-chip>
+                      <v-chip
+                        size="x-small"
+                        variant="outlined"
+                        color="grey-darken-1"
+                      >
+                        <v-icon start size="14">mdi-calendar</v-icon>
+                        {{ item.date }}
+                      </v-chip>
+                    </div>
+                  </div>
+                  
+                  <div class="ml-4">
+                    <v-btn
+                      icon
+                      size="small"
+                      variant="text"
+                      color="primary"
+                      @click="useQRData(item.data)"
+                    >
+                      <v-icon>mdi-refresh</v-icon>
+                    </v-btn>
+                    <v-btn
+                      icon
+                      size="small"
+                      variant="text"
+                      color="error"
+                      @click="deleteQRHistoryItem(index)"
+                    >
+                      <v-icon>mdi-delete-outline</v-icon>
+                    </v-btn>
+                  </div>
+                </div>
+              </v-card-text>
+            </v-card>
+          </div>
+
+          <!-- Empty State -->
+          <div v-else class="text-center py-12">
+            <v-icon size="64" color="grey-lighten-1" class="mb-4">mdi-qrcode-scan</v-icon>
+            <p class="text-h6 text-grey mb-2">Belum ada riwayat QR scan</p>
+            <p class="text-body-2 text-grey">Riwayat QR scan akan muncul di sini setelah Anda melakukan scan</p>
+          </div>
+        </v-card-text>
+        
+        <v-card-actions class="pa-6 pt-0">
+          <v-spacer></v-spacer>
+          <v-btn
+            color="primary"
+            class="text-white font-weight-bold text-none"
+            size="large"
+            variant="flat"
+            @click="qrHistoryDialog = false"
+            prepend-icon="mdi-close"
+          >
+            Tutup
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+  </v-app>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, nextTick, onMounted, onUnmounted, watch } from 'vue';
+import { useQueueStore } from '@/stores/queueStore';
+import { useMasterStore } from '@/stores/masterStore';
+
+definePageMeta({
+  // middleware:['auth'],
+  layout: false,
+})
+
+const queueStore = useQueueStore();
+const masterStore = useMasterStore();
+
+
+// TypeScript declaration for QRCode
+declare global {
+  interface Window {
+    QRCode: any;
+  }
+}
+
+// --- DESAIN & TEMA ---
+const primaryColor = ref('#1565C0');
+const secondaryColor = ref('#FB8C00');
+
+// --- LOGIKA ---
+const tab = ref('checkin');
+const infoDialog = ref(false);
+const infoMessage = ref('');
+const infoAction = ref<'checkin' | 'kembali'>('kembali');
+let autoCloseTimer: ReturnType<typeof setTimeout> | null = null; 
+const scannedData = ref<string | null>(null);
+const manualInput = ref('');
+const manualForm = ref(null);
+const lastCheckInResult = ref<{ success: boolean; patientId: string; status: string } | null>(null);
+
+// QR Scanner state
+const isScanning = ref(false);
+const hasCamera = ref(false);
+const cameraChecking = ref(true);
+const cameraReady = ref(false);
+let html5QrCode: any = null;
+const qrCodeId = 'qr-reader';
+let lastScannedQR: string | null = null;
+let lastScanTime: number = 0;
+const SCAN_DEBOUNCE_MS = 2000; // 2 detik debounce untuk mencegah scan berulang
+
+// Daftar QR code yang sudah berhasil di-scan (untuk mencegah double antrian)
+const SUCCESSFUL_SCANS_KEY = 'successful_qr_scans';
+const successfulScans = ref<Set<string>>(new Set());
+
+// Detect mobile device
+const isMobile = ref(false);
+if (typeof window !== 'undefined') {
+  isMobile.value = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || 
+                   (window.innerWidth <= 768);
+}
+
+// History Dialog
+const historyDialog = ref(false);
+const historySearch = ref('');
+const historyStatusFilter = ref('');
+const checkInHistory = ref<Array<{
+  patientId: string;
+  queueNumber?: string;
+  status: string;
+  checkInTime: string;
+  checkInDate: string;
+  method: string;
+}>>([]);
+
+// QR History Dialog
+const qrHistoryDialog = ref(false);
+const scannedQRHistory = ref<Array<{
+  data: string;
+  timestamp: string;
+  date: string;
+  time: string;
+}>>([]);
+
+const historyStatusOptions = [
+  { title: 'Berhasil', value: 'success' },
+  { title: 'Gagal', value: 'failed' },
+  { title: 'Pending', value: 'pending' }
+];
+
+// Generate QR variables
+const generatePatientId = ref('');
+const generateStatus = ref('ALLOWED');
+const generatedQRData = ref('');
+const selectedKlinik = ref('');
+const statusOptions = [
+  { title: 'Diizinkan Check-in', value: 'ALLOWED' },
+  { title: 'Belum Diizinkan', value: 'NOT_ALLOWED' }
+];
+
+// Get klinik list for dropdown
+const klinikOptions = computed(() => {
+  const klinikList = masterStore.klinikList.map((k: { kode: string; nama: string }) => ({
+    title: `${k.kode} - ${k.nama}`,
+    value: k.kode
+  }));
   
-    </v-app>
-  </template>
+  // Tambahkan opsi "UM" (Umum) di awal list
+  return [
+    { title: 'UM - Umum', value: 'UM' },
+    ...klinikList
+  ];
+});
+
+// Sequential Patient ID Management
+const PATIENT_ID_STORAGE_KEY = 'checkin_patient_id_counter';
+const QUEUE_NUMBER_STORAGE_KEY = 'checkin_queue_number_counters';
+const LAST_RESET_TIME_KEY = 'checkin_last_reset_time';
+const RESET_HOUR = 22; // Jam 10 malam (22:00)
+const HISTORY_STORAGE_KEY = 'checkin_history';
+
+// Check and reset daily at 10 PM (22:00)
+const checkAndResetDaily = () => {
+  if (typeof window === 'undefined') return;
   
-  <script setup lang="ts">
-  import { ref, computed, nextTick, onMounted, onUnmounted, watch } from 'vue';
+  const now = new Date();
+  const currentHour = now.getHours();
+  const currentDate = now.toISOString().split('T')[0]; // YYYY-MM-DD
   
-  definePageMeta({
-    middleware:['auth'],
-    layout: false,
-  })
+  // Get last reset time
+  const lastResetTime = localStorage.getItem(LAST_RESET_TIME_KEY);
+  let lastResetDate = null;
   
+  if (lastResetTime) {
+    const lastReset = new Date(lastResetTime);
+    lastResetDate = lastReset.toISOString().split('T')[0];
+  }
   
-  // TypeScript declaration for QRCode
-  declare global {
-    interface Window {
-      QRCode: any;
+  // Check if it's 10 PM or later and hasn't been reset today
+  // Reset happens at 22:00 (10 PM) or later, but only once per day
+  const shouldReset = currentHour >= RESET_HOUR && lastResetDate !== currentDate;
+  
+  if (shouldReset) {
+    // Reset counters to 0 (so next will be 0001)
+    localStorage.setItem(PATIENT_ID_STORAGE_KEY, '0');
+    localStorage.setItem(QUEUE_NUMBER_STORAGE_KEY, '{}');
+    
+    // Clear check-in history (reset riwayat check-in)
+    checkInHistory.value = [];
+    if (typeof window !== 'undefined') {
+      localStorage.removeItem(HISTORY_STORAGE_KEY);
     }
+    
+    // Save reset time
+    localStorage.setItem(LAST_RESET_TIME_KEY, now.toISOString());
+    
+    console.log('✅ Daily reset executed at', now.toLocaleString('id-ID'), '- Counters and history reset');
   }
+};
+
+// Generate sequential patient ID (P-00001, P-00002, etc.)
+const generateSequentialPatientId = (): string => {
+  if (typeof window === 'undefined') return 'P-00001';
   
-  // --- DESAIN & TEMA ---
-  const primaryColor = ref('#1565C0');
-  const secondaryColor = ref('#FB8C00');
+  // Check and reset if needed (before generating)
+  checkAndResetDaily();
   
-  // --- LOGIKA ---
-  const tab = ref('scan');
-  const infoDialog = ref(false);
-  const infoMessage = ref('');
-  const infoAction = ref<'checkin' | 'kembali'>('kembali'); 
-  const scannedData = ref<string | null>(null);
-  const manualInput = ref('');
-  const manualForm = ref(null);
-  const lastCheckInResult = ref<{ success: boolean; patientId: string; status: string } | null>(null);
+  let counter = parseInt(localStorage.getItem(PATIENT_ID_STORAGE_KEY) || '0', 10);
+  counter += 1;
+  localStorage.setItem(PATIENT_ID_STORAGE_KEY, counter.toString());
   
-  // QR Scanner state
-  const isScanning = ref(false);
-  const hasCamera = ref(false);
-  const cameraChecking = ref(true);
-  const cameraReady = ref(false);
-  let html5QrCode: any = null;
-  const qrCodeId = 'qr-reader';
-  let lastScannedQR: string | null = null;
-  let lastScanTime: number = 0;
-  const SCAN_DEBOUNCE_MS = 2000; // 2 detik debounce untuk mencegah scan berulang
+  return `P-${String(counter).padStart(5, '0')}`;
+};
+
+// Generate sequential queue number based on klinik code (AN-0001, AS-0001, etc.)
+const generateSequentialQueueNumber = (kodeKlinik: string): string => {
+  if (typeof window === 'undefined') return `${kodeKlinik}-0001`;
   
-  // Daftar QR code yang sudah berhasil di-scan (untuk mencegah double antrian)
-  const SUCCESSFUL_SCANS_KEY = 'successful_qr_scans';
-  const successfulScans = ref<Set<string>>(new Set());
+  // Check and reset if needed (before generating)
+  checkAndResetDaily();
   
-  // Detect mobile device
-  const isMobile = ref(false);
-  if (typeof window !== 'undefined') {
-    isMobile.value = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || 
-                     (window.innerWidth <= 768);
+  const counters = JSON.parse(localStorage.getItem(QUEUE_NUMBER_STORAGE_KEY) || '{}');
+  let counter = parseInt(counters[kodeKlinik] || '0', 10);
+  counter += 1;
+  counters[kodeKlinik] = counter;
+  localStorage.setItem(QUEUE_NUMBER_STORAGE_KEY, JSON.stringify(counters));
+  
+  return `${kodeKlinik}-${String(counter).padStart(4, '0')}`;
+};
+
+
+const snackbar = ref({
+  show: false,
+  title: '',
+  message: '',
+  color: '',
+  icon: '',
+  timeout: 4000,
+});
+
+// Check camera availability
+const checkCameraAvailability = async () => {
+  cameraChecking.value = true;
+  hasCamera.value = false;
+  
+  // Check if browser supports mediaDevices
+  if (typeof navigator === 'undefined' || !navigator.mediaDevices) {
+    console.error('navigator.mediaDevices is not supported');
+    showSnackbar('Error', 'Browser tidak mendukung akses kamera. Pastikan menggunakan HTTPS atau localhost.', 'error', 'mdi-camera-off');
+    cameraChecking.value = false;
+    return;
   }
-  
-  // History Dialog
-  const historyDialog = ref(false);
-  const historySearch = ref('');
-  const historyStatusFilter = ref('');
-  const checkInHistory = ref<Array<{
-    patientId: string;
-    queueNumber?: string;
-    status: string;
-    checkInTime: string;
-    checkInDate: string;
-    method: string;
-  }>>([]);
-  
-  // QR History Dialog
-  const qrHistoryDialog = ref(false);
-  const scannedQRHistory = ref<Array<{
-    data: string;
-    timestamp: string;
-    date: string;
-    time: string;
-  }>>([]);
-  
-  const historyStatusOptions = [
-    { title: 'Berhasil', value: 'success' },
-    { title: 'Gagal', value: 'failed' },
-    { title: 'Pending', value: 'pending' }
-  ];
-  
-  // Generate QR variables
-  const generatePatientId = ref('P12345');
-  const generateStatus = ref('ALLOWED');
-  const generatedQRData = ref('');
-  const statusOptions = [
-    { title: 'Diizinkan Check-in', value: 'ALLOWED' },
-    { title: 'Belum Diizinkan', value: 'NOT_ALLOWED' }
-  ];
-  
-  const snackbar = ref({
-    show: false,
-    title: '',
-    message: '',
-    color: '',
-    icon: '',
-    timeout: 4000,
-  });
-  
-  // Check camera availability
-  const checkCameraAvailability = async () => {
-    cameraChecking.value = true;
+
+  try {
+    // First, request permission by trying to get user media
+    // This is required for enumerateDevices to return device labels
+    const stream = await navigator.mediaDevices.getUserMedia({ video: true });
+    
+    // Stop the stream immediately after getting permission
+    stream.getTracks().forEach(track => track.stop());
+    
+    // Now enumerate devices (will have labels after permission granted)
+    const devices = await navigator.mediaDevices.enumerateDevices();
+    const videoDevices = devices.filter(device => device.kind === 'videoinput');
+    
+    hasCamera.value = videoDevices.length > 0;
+    
+    if (hasCamera.value) {
+      console.log(`Found ${videoDevices.length} camera(s):`, videoDevices.map(d => d.label || d.deviceId));
+    } else {
+      console.warn('No video input devices found');
+      showSnackbar('Warning', 'Tidak ada kamera yang terdeteksi', 'warning', 'mdi-camera-off');
+    }
+  } catch (err: any) {
+    console.error('Error checking camera:', err);
     hasCamera.value = false;
     
-    // Check if browser supports mediaDevices
-    if (typeof navigator === 'undefined' || !navigator.mediaDevices) {
-      console.error('navigator.mediaDevices is not supported');
-      showSnackbar('Error', 'Browser tidak mendukung akses kamera. Pastikan menggunakan HTTPS atau localhost.', 'error', 'mdi-camera-off');
-      cameraChecking.value = false;
+    let errorMessage = 'Gagal mengakses kamera. ';
+    if (err.name === 'NotAllowedError' || err.name === 'PermissionDeniedError') {
+      errorMessage += 'Izin kamera ditolak. Mohon izinkan akses kamera di pengaturan browser.';
+    } else if (err.name === 'NotFoundError' || err.name === 'DevicesNotFoundError') {
+      errorMessage += 'Tidak ada kamera yang ditemukan.';
+    } else if (err.name === 'NotReadableError' || err.name === 'TrackStartError') {
+      errorMessage += 'Kamera sedang digunakan aplikasi lain.';
+    } else if (err.name === 'OverconstrainedError' || err.name === 'ConstraintNotSatisfiedError') {
+      errorMessage += 'Kamera tidak memenuhi persyaratan.';
+    } else {
+      errorMessage += `Error: ${err.message || err.name}`;
+    }
+    
+    showSnackbar('Error', errorMessage, 'error', 'mdi-camera-off');
+  } finally {
+    cameraChecking.value = false;
+  }
+};
+
+// Test camera function for debugging
+const testCamera = async () => {
+  try {
+    showSnackbar('Info', 'Menguji akses kamera...', 'info', 'mdi-camera');
+    
+    if (typeof navigator === 'undefined') {
+      showSnackbar('Error', 'navigator is undefined - pastikan di browser, bukan SSR', 'error', 'mdi-alert');
       return;
     }
-  
-    try {
-      // First, request permission by trying to get user media
-      // This is required for enumerateDevices to return device labels
-      const stream = await navigator.mediaDevices.getUserMedia({ video: true });
-      
-      // Stop the stream immediately after getting permission
-      stream.getTracks().forEach(track => track.stop());
-      
-      // Now enumerate devices (will have labels after permission granted)
-      const devices = await navigator.mediaDevices.enumerateDevices();
-      const videoDevices = devices.filter(device => device.kind === 'videoinput');
-      
-      hasCamera.value = videoDevices.length > 0;
-      
-      if (hasCamera.value) {
-        console.log(`Found ${videoDevices.length} camera(s):`, videoDevices.map(d => d.label || d.deviceId));
-      } else {
-        console.warn('No video input devices found');
-        showSnackbar('Warning', 'Tidak ada kamera yang terdeteksi', 'warning', 'mdi-camera-off');
-      }
-    } catch (err: any) {
-      console.error('Error checking camera:', err);
-      hasCamera.value = false;
-      
-      let errorMessage = 'Gagal mengakses kamera. ';
-      if (err.name === 'NotAllowedError' || err.name === 'PermissionDeniedError') {
-        errorMessage += 'Izin kamera ditolak. Mohon izinkan akses kamera di pengaturan browser.';
-      } else if (err.name === 'NotFoundError' || err.name === 'DevicesNotFoundError') {
-        errorMessage += 'Tidak ada kamera yang ditemukan.';
-      } else if (err.name === 'NotReadableError' || err.name === 'TrackStartError') {
-        errorMessage += 'Kamera sedang digunakan aplikasi lain.';
-      } else if (err.name === 'OverconstrainedError' || err.name === 'ConstraintNotSatisfiedError') {
-        errorMessage += 'Kamera tidak memenuhi persyaratan.';
-      } else {
-        errorMessage += `Error: ${err.message || err.name}`;
-      }
-      
-      showSnackbar('Error', errorMessage, 'error', 'mdi-camera-off');
-    } finally {
-      cameraChecking.value = false;
+    
+    if (!navigator.mediaDevices) {
+      showSnackbar('Error', 'navigator.mediaDevices is undefined - pastikan menggunakan HTTPS atau localhost', 'error', 'mdi-alert');
+      return;
     }
-  };
-  
-  // Test camera function for debugging
-  const testCamera = async () => {
-    try {
-      showSnackbar('Info', 'Menguji akses kamera...', 'info', 'mdi-camera');
-      
-      if (typeof navigator === 'undefined') {
-        showSnackbar('Error', 'navigator is undefined - pastikan di browser, bukan SSR', 'error', 'mdi-alert');
-        return;
+    
+    if (!navigator.mediaDevices.getUserMedia) {
+      showSnackbar('Error', 'getUserMedia is not supported', 'error', 'mdi-alert');
+      return;
+    }
+    
+    const stream = await navigator.mediaDevices.getUserMedia({ 
+      video: {
+        facingMode: 'user',
+        width: { ideal: 1920, min: 1280 },
+        height: { ideal: 1080, min: 720 }
+      } 
+    });
+    
+    showSnackbar('Success', 'Kamera berhasil diakses!', 'success', 'mdi-check-circle');
+    
+    // Stop stream after 2 seconds
+    setTimeout(() => {
+      stream.getTracks().forEach(track => track.stop());
+    }, 2000);
+    
+  } catch (err: any) {
+    console.error('Test camera error:', err);
+    let errorMsg = `Error: ${err.name || 'Unknown'}`;
+    if (err.message) errorMsg += ` - ${err.message}`;
+    showSnackbar('Error', errorMsg, 'error', 'mdi-alert');
+  }
+};
+
+// QR Scanner Functions
+const startScanning = async () => {
+  // Check camera first
+  if (!hasCamera.value) {
+    await checkCameraAvailability();
+    if (!hasCamera.value) {
+      showSnackbar('Error', 'Kamera tidak tersedia. Silakan gunakan input manual atau pastikan kamera terhubung.', 'error', 'mdi-camera-off');
+      return;
+    }
+  }
+
+  try {
+    // Set scanning state first to render the element
+    isScanning.value = true;
+    
+    // Wait for DOM to update and element to be rendered
+    await nextTick();
+    
+    // Wait a bit more to ensure element is fully rendered
+    await new Promise(resolve => setTimeout(resolve, 200));
+    
+    // Check if element exists
+    const qrElement = document.getElementById(qrCodeId);
+    if (!qrElement) {
+      console.error(`Element with id "${qrCodeId}" not found in DOM`);
+      isScanning.value = false;
+      showSnackbar('Error', 'Element scanner tidak ditemukan. Silakan refresh halaman.', 'error', 'mdi-alert');
+      return;
+    }
+    
+    // Cleanup existing instance if any (untuk handle refresh)
+    if (html5QrCode) {
+      try {
+        // Try to check if scanner is active and stop it
+        try {
+          if (html5QrCode.getState && html5QrCode.getState() === 2) { // Scanning state
+            await html5QrCode.stop();
+            await html5QrCode.clear();
+          }
+        } catch {
+          // If getState doesn't exist or fails, just try to stop
+          await html5QrCode.stop().catch(() => {});
+          await html5QrCode.clear().catch(() => {});
+        }
+        html5QrCode = null;
+      } catch (err) {
+        console.warn('Error cleaning up existing QR scanner:', err);
+        html5QrCode = null;
       }
+    }
+    
+    // Dynamic import html5-qrcode
+    if (!html5QrCode) {
+      const { Html5Qrcode: Html5QrcodeClass } = await import('html5-qrcode');
+      html5QrCode = new Html5QrcodeClass(qrCodeId);
+      console.log('Html5Qrcode initialized');
+    }
+
+    if (html5QrCode) {
+      cameraReady.value = false;
       
-      if (!navigator.mediaDevices) {
-        showSnackbar('Error', 'navigator.mediaDevices is undefined - pastikan menggunakan HTTPS atau localhost', 'error', 'mdi-alert');
-        return;
-      }
+      // Konfigurasi kamera untuk mobile dan desktop
+      const cameraConfig = isMobile.value 
+        ? { facingMode: "environment" } // Mobile: gunakan kamera belakang
+        : { facingMode: "user" }; // Desktop: gunakan kamera depan (webcam)
       
-      if (!navigator.mediaDevices.getUserMedia) {
-        showSnackbar('Error', 'getUserMedia is not supported', 'error', 'mdi-alert');
-        return;
-      }
+      // Video constraints yang dioptimalkan untuk kualitas tinggi
+      const baseVideoConstraints = isMobile.value
+        ? {
+            facingMode: "environment",
+            width: { ideal: 1280, min: 640, max: 1920 },
+            height: { ideal: 720, min: 480, max: 1080 }
+          }
+        : {
+            facingMode: "user",
+            width: { ideal: 1920, min: 1280, max: 1920 },
+            height: { ideal: 1080, min: 720, max: 1080 }
+          };
       
-      const stream = await navigator.mediaDevices.getUserMedia({ 
-        video: {
-          facingMode: 'user',
-          width: { ideal: 640 },
-          height: { ideal: 480 }
-        } 
+      // Tambahkan advanced constraints hanya jika didukung
+      const videoConstraints: any = { ...baseVideoConstraints };
+      
+      console.log('Starting QR scanner with config:', {
+        isMobile: isMobile.value,
+        cameraConfig,
+        videoConstraints
       });
       
-      showSnackbar('Success', 'Kamera berhasil diakses!', 'success', 'mdi-check-circle');
-      
-      // Stop stream after 2 seconds
-      setTimeout(() => {
-        stream.getTracks().forEach(track => track.stop());
-      }, 2000);
-      
-    } catch (err: any) {
-      console.error('Test camera error:', err);
-      let errorMsg = `Error: ${err.name || 'Unknown'}`;
-      if (err.message) errorMsg += ` - ${err.message}`;
-      showSnackbar('Error', errorMsg, 'error', 'mdi-alert');
-    }
-  };
-  
-  // QR Scanner Functions
-  const startScanning = async () => {
-    // Check camera first
-    if (!hasCamera.value) {
-      await checkCameraAvailability();
-      if (!hasCamera.value) {
-        showSnackbar('Error', 'Kamera tidak tersedia. Silakan gunakan input manual atau pastikan kamera terhubung.', 'error', 'mdi-camera-off');
-        return;
-      }
-    }
-  
-    try {
-      // Set scanning state first to render the element
-      isScanning.value = true;
-      
-      // Wait for DOM to update and element to be rendered
-      await nextTick();
-      
-      // Wait a bit more to ensure element is fully rendered
-      await new Promise(resolve => setTimeout(resolve, 100));
-      
-      // Check if element exists
-      const qrElement = document.getElementById(qrCodeId);
-      if (!qrElement) {
-        console.error(`Element with id "${qrCodeId}" not found in DOM`);
-        isScanning.value = false;
-        showSnackbar('Error', 'Element scanner tidak ditemukan. Silakan refresh halaman.', 'error', 'mdi-alert');
-        return;
-      }
-      
-      // Dynamic import html5-qrcode
-      if (!html5QrCode) {
-        const { Html5Qrcode: Html5QrcodeClass } = await import('html5-qrcode');
-        html5QrCode = new Html5QrcodeClass(qrCodeId);
-        console.log('Html5Qrcode initialized');
-      }
-  
-      if (html5QrCode) {
-        cameraReady.value = false;
-        
-        // Konfigurasi kamera untuk mobile dan desktop
-        const cameraConfig = isMobile.value 
-          ? { facingMode: "environment" } // Mobile: gunakan kamera belakang
-          : { facingMode: "user" }; // Desktop: gunakan kamera depan (webcam)
-        
-        // Video constraints yang lebih fleksibel
-        const baseVideoConstraints = isMobile.value
-          ? {
-              facingMode: "environment",
-              width: { ideal: 640, min: 320 },
-              height: { ideal: 480, min: 240 }
-            }
-          : {
-              facingMode: "user",
-              width: { ideal: 1280, min: 640 },
-              height: { ideal: 720, min: 480 }
-            };
-        
-        // Tambahkan advanced constraints hanya jika didukung
-        const videoConstraints: any = { ...baseVideoConstraints };
-        
-        console.log('Starting QR scanner with config:', {
-          isMobile: isMobile.value,
+      try {
+        await html5QrCode.start(
           cameraConfig,
-          videoConstraints
-        });
-        
-        try {
-          await html5QrCode.start(
-            cameraConfig,
-            {
-              fps: isMobile.value ? 15 : 20, // FPS optimal untuk deteksi
-              qrbox: function(viewfinderWidth: number, viewfinderHeight: number) {
-                // QR box dengan ukuran lebih besar untuk deteksi lebih mudah
-                const minEdgeSize = Math.min(viewfinderWidth, viewfinderHeight);
-                // Gunakan 80-90% dari viewfinder untuk area scanning yang lebih besar
-                const percentageSize = Math.floor(minEdgeSize * 0.80);
-                // Atau ukuran tetap yang lebih besar
-                const fixedSize = isMobile.value ? 250 : 250;
-                // Gunakan yang lebih besar antara percentage atau fixed
-                const qrboxSize = Math.max(percentageSize, fixedSize);
-                
-                // Pastikan tidak melebihi viewfinder
-                const finalSize = Math.min(qrboxSize, minEdgeSize * 0.80);
-                
-                console.log('QR Box size:', finalSize, 'Viewfinder:', viewfinderWidth, 'x', viewfinderHeight);
-                
-                return {
-                  width: Math.max(finalSize, 250), // Minimum 250px untuk deteksi lebih baik
-                  height: Math.max(finalSize, 250)
-                };
-              },
-              aspectRatio: 1.0,
-              disableFlip: false,
-              videoConstraints: videoConstraints,
-              rememberLastUsedCamera: true,
-              showTorchButtonIfSupported: true,
-              // Tambahkan opsi untuk meningkatkan deteksi
-              verbose: false // Set true untuk debugging
-            },
-            (decodedText: string, decodedResult: any) => {
-              // QR Code berhasil di-scan
-              console.log('✅ QR Code detected:', decodedText);
-              console.log('📊 Decoded result:', decodedResult);
+          {
+            fps: isMobile.value ? 30 : 30, // FPS tinggi untuk deteksi lebih baik dan smooth
+            qrbox: function(viewfinderWidth: number, viewfinderHeight: number) {
+              // QR box dengan ukuran lebih besar untuk deteksi lebih mudah
+              const minEdgeSize = Math.min(viewfinderWidth, viewfinderHeight);
+              // Gunakan 80-90% dari viewfinder untuk area scanning yang lebih besar
+              const percentageSize = Math.floor(minEdgeSize * 0.80);
+              // Atau ukuran tetap yang lebih besar
+              const fixedSize = isMobile.value ? 250 : 250;
+              // Gunakan yang lebih besar antara percentage atau fixed
+              const qrboxSize = Math.max(percentageSize, fixedSize);
               
-              // Validasi dan proses QR code
-              if (decodedText && decodedText.trim() !== '') {
-                handleQRScanSuccess(decodedText);
-              } else {
-                console.warn('Empty QR code detected');
-              }
+              // Pastikan tidak melebihi viewfinder
+              const finalSize = Math.min(qrboxSize, minEdgeSize * 0.80);
+              
+              console.log('QR Box size:', finalSize, 'Viewfinder:', viewfinderWidth, 'x', viewfinderHeight);
+              
+              return {
+                width: Math.max(finalSize, 250), // Minimum 250px untuk deteksi lebih baik
+                height: Math.max(finalSize, 250)
+              };
             },
-            (errorMessage: string) => {
-              // Log error untuk debugging - hanya log error penting
-              // Error ini biasanya muncul terus menerus saat tidak ada QR code yang terdeteksi
-              // Jadi kita filter untuk menghindari spam console
-              if (errorMessage) {
-                // Filter out common non-critical errors
-                const isCriticalError = !errorMessage.includes('NotFoundException') && 
-                                       !errorMessage.includes('No QR') &&
-                                       !errorMessage.includes('QR code parse error') &&
-                                       !errorMessage.includes('QR code parse error, error') &&
-                                       !errorMessage.includes('QR code decode error');
-                
-                if (isCriticalError) {
-                  console.warn('QR Scanner warning:', errorMessage);
+            aspectRatio: 1.0,
+            disableFlip: false,
+            videoConstraints: videoConstraints,
+            rememberLastUsedCamera: true,
+            showTorchButtonIfSupported: true,
+            // Tambahkan opsi untuk meningkatkan deteksi
+            verbose: false // Set true untuk debugging
+          },
+          (decodedText: string, decodedResult: any) => {
+            // QR Code berhasil di-scan
+            console.log('✅ QR Code detected:', decodedText);
+            console.log('📊 Decoded result:', decodedResult);
+            
+            // Validasi dan proses QR code
+            if (decodedText && decodedText.trim() !== '') {
+              handleQRScanSuccess(decodedText);
+            } else {
+              console.warn('Empty QR code detected');
+            }
+          },
+          (errorMessage: string) => {
+            // Log error untuk debugging - hanya log error penting
+            // Error ini biasanya muncul terus menerus saat tidak ada QR code yang terdeteksi
+            // Jadi kita filter untuk menghindari spam console
+            if (errorMessage) {
+              // Filter out common non-critical errors
+              const isCriticalError = !errorMessage.includes('NotFoundException') && 
+                                     !errorMessage.includes('No QR') &&
+                                     !errorMessage.includes('QR code parse error') &&
+                                     !errorMessage.includes('QR code parse error, error') &&
+                                     !errorMessage.includes('QR code decode error');
+              
+              if (isCriticalError) {
+                console.warn('QR Scanner warning:', errorMessage);
+              }
+            }
+          }
+        );
+        
+        // Set camera ready setelah sedikit delay untuk memastikan video sudah dimuat
+        setTimeout(() => {
+          cameraReady.value = true;
+          console.log('Camera ready, scanner is active');
+        }, 500);
+        
+        showSnackbar('Info', 'Scanner aktif. Arahkan kamera ke QR code dan pastikan pencahayaan cukup', 'info', 'mdi-camera');
+      } catch (cameraError: any) {
+        console.error('Camera error:', cameraError);
+        
+        // Jika kamera belakang tidak tersedia di mobile, coba kamera depan
+        if (isMobile.value && cameraError.name === 'NotFoundError') {
+          try {
+            console.log('Trying front camera as fallback...');
+            await html5QrCode.start(
+              { facingMode: "user" },
+              {
+                fps: 30,
+                qrbox: function(viewfinderWidth: number, viewfinderHeight: number) {
+                  const minEdgeSize = Math.min(viewfinderWidth, viewfinderHeight);
+                  const percentageSize = Math.floor(minEdgeSize * 0.85);
+                  const fixedSize = 300;
+                  const qrboxSize = Math.max(percentageSize, fixedSize);
+                  const finalSize = Math.min(qrboxSize, minEdgeSize * 0.95);
+                  
+                  return {
+                    width: Math.max(finalSize, 250),
+                    height: Math.max(finalSize, 250)
+                  };
+                },
+                aspectRatio: 1.0,
+                disableFlip: false,
+                videoConstraints: {
+                  facingMode: "user",
+                  width: { ideal: 1280, min: 640, max: 1920 },
+                  height: { ideal: 720, min: 480, max: 1080 }
+                },
+                rememberLastUsedCamera: true,
+                verbose: false
+              },
+              (decodedText: string, decodedResult: any) => {
+                console.log('✅ QR Code detected (front camera):', decodedText);
+                if (decodedText && decodedText.trim() !== '') {
+                  handleQRScanSuccess(decodedText);
+                }
+              },
+              (errorMessage: string) => {
+                if (errorMessage) {
+                  const isCriticalError = !errorMessage.includes('NotFoundException') && 
+                                         !errorMessage.includes('No QR') &&
+                                         !errorMessage.includes('QR code parse error') &&
+                                         !errorMessage.includes('QR code decode error');
+                  
+                  if (isCriticalError) {
+                    console.warn('QR Scanner (front) warning:', errorMessage);
+                  }
                 }
               }
-            }
-          );
-          
-          // Set camera ready setelah sedikit delay untuk memastikan video sudah dimuat
-          setTimeout(() => {
-            cameraReady.value = true;
-            console.log('Camera ready, scanner is active');
-          }, 500);
-          
-          showSnackbar('Info', 'Scanner aktif. Arahkan kamera ke QR code dan pastikan pencahayaan cukup', 'info', 'mdi-camera');
-        } catch (cameraError: any) {
-          console.error('Camera error:', cameraError);
-          
-          // Jika kamera belakang tidak tersedia di mobile, coba kamera depan
-          if (isMobile.value && cameraError.name === 'NotFoundError') {
-            try {
-              console.log('Trying front camera as fallback...');
+            );
+            
+            setTimeout(() => {
+              cameraReady.value = true;
+            }, 500);
+            
+            showSnackbar('Info', 'Menggunakan kamera depan. Arahkan QR code ke kamera', 'info', 'mdi-camera');
+          } catch (fallbackError: any) {
+            console.error('Fallback camera also failed:', fallbackError);
+            throw cameraError; // Throw original error
+          }
+        } else {
+          // Coba menggunakan deviceId langsung jika facingMode gagal
+          try {
+            console.log('Trying to get camera devices...');
+            const devices = await navigator.mediaDevices.enumerateDevices();
+            const videoDevices = devices.filter(device => device.kind === 'videoinput');
+            
+            if (videoDevices.length > 0) {
+              // Gunakan kamera pertama yang tersedia
+              const deviceId = videoDevices[0].deviceId;
+              console.log('Using device:', deviceId, videoDevices[0].label);
+              
               await html5QrCode.start(
-                { facingMode: "user" },
+                { deviceId: { exact: deviceId } },
                 {
-                  fps: 15,
+                  fps: 30,
                   qrbox: function(viewfinderWidth: number, viewfinderHeight: number) {
                     const minEdgeSize = Math.min(viewfinderWidth, viewfinderHeight);
-                    const percentageSize = Math.floor(minEdgeSize * 0.85);
-                    const fixedSize = 300;
+                    const percentageSize = Math.floor(minEdgeSize * 0.80);
+                    const fixedSize = isMobile.value ? 300 : 400;
                     const qrboxSize = Math.max(percentageSize, fixedSize);
-                    const finalSize = Math.min(qrboxSize, minEdgeSize * 0.95);
+                    const finalSize = Math.min(qrboxSize, minEdgeSize * 0.80);
                     
                     return {
                       width: Math.max(finalSize, 250),
@@ -1325,15 +1614,15 @@
                   aspectRatio: 1.0,
                   disableFlip: false,
                   videoConstraints: {
-                    facingMode: "user",
-                    width: { ideal: 640, min: 320 },
-                    height: { ideal: 480, min: 240 }
+                    deviceId: { exact: deviceId },
+                    width: { ideal: isMobile.value ? 1280 : 1920, min: isMobile.value ? 640 : 1280, max: isMobile.value ? 1920 : 1920 },
+                    height: { ideal: isMobile.value ? 720 : 1080, min: isMobile.value ? 480 : 720, max: isMobile.value ? 1080 : 1080 }
                   },
                   rememberLastUsedCamera: true,
                   verbose: false
                 },
                 (decodedText: string, decodedResult: any) => {
-                  console.log('✅ QR Code detected (front camera):', decodedText);
+                  console.log('✅ QR Code detected (deviceId):', decodedText);
                   if (decodedText && decodedText.trim() !== '') {
                     handleQRScanSuccess(decodedText);
                   }
@@ -1346,7 +1635,7 @@
                                            !errorMessage.includes('QR code decode error');
                     
                     if (isCriticalError) {
-                      console.warn('QR Scanner (front) warning:', errorMessage);
+                      console.warn('QR Scanner (deviceId) warning:', errorMessage);
                     }
                   }
                 }
@@ -1356,235 +1645,227 @@
                 cameraReady.value = true;
               }, 500);
               
-              showSnackbar('Info', 'Menggunakan kamera depan. Arahkan QR code ke kamera', 'info', 'mdi-camera');
-            } catch (fallbackError: any) {
-              console.error('Fallback camera also failed:', fallbackError);
-              throw cameraError; // Throw original error
-            }
-          } else {
-            // Coba menggunakan deviceId langsung jika facingMode gagal
-            try {
-              console.log('Trying to get camera devices...');
-              const devices = await navigator.mediaDevices.enumerateDevices();
-              const videoDevices = devices.filter(device => device.kind === 'videoinput');
-              
-              if (videoDevices.length > 0) {
-                // Gunakan kamera pertama yang tersedia
-                const deviceId = videoDevices[0].deviceId;
-                console.log('Using device:', deviceId, videoDevices[0].label);
-                
-                await html5QrCode.start(
-                  { deviceId: { exact: deviceId } },
-                  {
-                    fps: isMobile.value ? 15 : 20,
-                    qrbox: function(viewfinderWidth: number, viewfinderHeight: number) {
-                      const minEdgeSize = Math.min(viewfinderWidth, viewfinderHeight);
-                      const percentageSize = Math.floor(minEdgeSize * 0.80);
-                      const fixedSize = isMobile.value ? 300 : 400;
-                      const qrboxSize = Math.max(percentageSize, fixedSize);
-                      const finalSize = Math.min(qrboxSize, minEdgeSize * 0.80);
-                      
-                      return {
-                        width: Math.max(finalSize, 250),
-                        height: Math.max(finalSize, 250)
-                      };
-                    },
-                    aspectRatio: 1.0,
-                    disableFlip: false,
-                    videoConstraints: {
-                      deviceId: { exact: deviceId },
-                      width: { ideal: isMobile.value ? 640 : 1280, min: isMobile.value ? 320 : 640 },
-                      height: { ideal: isMobile.value ? 480 : 720, min: isMobile.value ? 240 : 480 }
-                    },
-                    rememberLastUsedCamera: true,
-                    verbose: false
-                  },
-                  (decodedText: string, decodedResult: any) => {
-                    console.log('✅ QR Code detected (deviceId):', decodedText);
-                    if (decodedText && decodedText.trim() !== '') {
-                      handleQRScanSuccess(decodedText);
-                    }
-                  },
-                  (errorMessage: string) => {
-                    if (errorMessage) {
-                      const isCriticalError = !errorMessage.includes('NotFoundException') && 
-                                             !errorMessage.includes('No QR') &&
-                                             !errorMessage.includes('QR code parse error') &&
-                                             !errorMessage.includes('QR code decode error');
-                      
-                      if (isCriticalError) {
-                        console.warn('QR Scanner (deviceId) warning:', errorMessage);
-                      }
-                    }
-                  }
-                );
-                
-                setTimeout(() => {
-                  cameraReady.value = true;
-                }, 500);
-                
-                showSnackbar('Info', 'Scanner aktif menggunakan kamera yang tersedia', 'info', 'mdi-camera');
-              } else {
-                throw cameraError;
-              }
-            } catch (deviceError: any) {
-              console.error('DeviceId approach also failed:', deviceError);
+              showSnackbar('Info', 'Scanner aktif menggunakan kamera yang tersedia', 'info', 'mdi-camera');
+            } else {
               throw cameraError;
             }
+          } catch (deviceError: any) {
+            console.error('DeviceId approach also failed:', deviceError);
+            throw cameraError;
           }
         }
       }
-    } catch (err: any) {
-      console.error('Error starting scanner:', err);
-      isScanning.value = false;
-      cameraReady.value = false;
-      
-      // Don't set hasCamera to false if it was detected, just log the error
-      let errorMessage = 'Gagal memulai scanner. ';
-      
-      if (err.message && err.message.includes('not found')) {
-        errorMessage = 'Element scanner tidak ditemukan. Silakan refresh halaman dan coba lagi.';
-        console.error('Element not found error. Element ID:', qrCodeId);
-      } else if (err.name === 'NotAllowedError') {
-        errorMessage = 'Akses kamera ditolak. Mohon izinkan akses kamera di pengaturan browser.';
-      } else if (err.name === 'NotFoundError') {
-        errorMessage = 'Kamera tidak ditemukan. Silakan gunakan input manual.';
-        hasCamera.value = false;
-      } else if (err.name === 'NotReadableError') {
-        errorMessage = 'Kamera sedang digunakan aplikasi lain. Tutup aplikasi lain yang menggunakan kamera.';
-      } else {
-        errorMessage += err.message || err.name || 'Unknown error';
-      }
-      
-      showSnackbar('Error', errorMessage, 'error', 'mdi-alert');
     }
-  };
-  
-  const stopScanning = async () => {
-    try {
-      if (html5QrCode && isScanning.value) {
+  } catch (err: any) {
+    console.error('Error starting scanner:', err);
+    isScanning.value = false;
+    cameraReady.value = false;
+    
+    // Don't set hasCamera to false if it was detected, just log the error
+    let errorMessage = 'Gagal memulai scanner. ';
+    
+    if (err.message && err.message.includes('not found')) {
+      errorMessage = 'Element scanner tidak ditemukan. Silakan refresh halaman dan coba lagi.';
+      console.error('Element not found error. Element ID:', qrCodeId);
+    } else if (err.name === 'NotAllowedError') {
+      errorMessage = 'Akses kamera ditolak. Mohon izinkan akses kamera di pengaturan browser.';
+    } else if (err.name === 'NotFoundError') {
+      errorMessage = 'Kamera tidak ditemukan. Silakan gunakan input manual.';
+      hasCamera.value = false;
+    } else if (err.name === 'NotReadableError') {
+      errorMessage = 'Kamera sedang digunakan aplikasi lain. Tutup aplikasi lain yang menggunakan kamera.';
+    } else {
+      errorMessage += err.message || err.name || 'Unknown error';
+    }
+    
+    showSnackbar('Error', errorMessage, 'error', 'mdi-alert');
+  }
+};
+
+const stopScanning = async () => {
+  try {
+    if (html5QrCode) {
+      // Stop scanner
+      if (isScanning.value) {
         await html5QrCode.stop();
         await html5QrCode.clear();
-        isScanning.value = false;
-        cameraReady.value = false;
-        showSnackbar('Info', 'Scanner dihentikan', 'info', 'mdi-camera-off');
       }
-    } catch (err: any) {
-      console.error('Error stopping scanner:', err);
+      
+      // Note: Media tracks are automatically stopped when html5QrCode.stop() is called
+      
       isScanning.value = false;
       cameraReady.value = false;
+      showSnackbar('Info', 'Scanner dihentikan', 'info', 'mdi-camera-off');
     }
-  };
+  } catch (err: any) {
+    console.error('Error stopping scanner:', err);
+    isScanning.value = false;
+    cameraReady.value = false;
+    // Force cleanup
+    html5QrCode = null;
+  }
+};
+
+const handleQRScanSuccess = (decodedText: string) => {
+  console.log('🎯 QR Scan Success! Data:', decodedText);
   
-  const handleQRScanSuccess = (decodedText: string) => {
-    console.log('🎯 QR Scan Success! Data:', decodedText);
-    
-    // Validasi data QR
-    if (!decodedText || decodedText.trim() === '') {
-      console.warn('QR Code data is empty');
-      showSnackbar('Error', 'QR Code tidak valid atau kosong', 'error', 'mdi-alert');
-      return;
-    }
-    
-    // Cek apakah QR code sudah pernah berhasil di-scan (mencegah double antrian)
-    if (isQRCodeAlreadyScanned(decodedText)) {
-      console.log('⏭️ Scan diabaikan: QR code sudah pernah berhasil di-scan');
-      showSnackbar('Peringatan', 'QR Code ini sudah pernah berhasil di-scan. Tidak dapat digunakan lagi untuk mencegah double antrian.', 'warning', 'mdi-alert-circle');
-      return;
-    }
-    
-    // Debounce: cegah scan berulang dalam waktu singkat
-    const now = Date.now();
-    if (lastScannedQR === decodedText && (now - lastScanTime) < SCAN_DEBOUNCE_MS) {
-      console.log('⏭️ Scan diabaikan (debounce): QR code sama dalam waktu singkat');
-      return;
-    }
-    
-    // Update last scan info
-    lastScannedQR = decodedText;
-    lastScanTime = now;
-    
-    // Simpan data QR yang di-scan
-    scannedData.value = decodedText;
-    
-    // Scanner tetap berjalan untuk memungkinkan scan QR code berikutnya
-    
-    // Proses data QR
-    try {
-      onDetect(decodedText);
-    } catch (error) {
-      console.error('Error processing QR data:', error);
-      showSnackbar('Error', 'Gagal memproses data QR Code', 'error', 'mdi-alert');
-    }
-    
-    // Simpan ke localStorage untuk riwayat
-    saveScannedQRData(decodedText);
-  };
+  // Validasi data QR
+  if (!decodedText || decodedText.trim() === '') {
+    console.warn('QR Code data is empty');
+    showSnackbar('Error', 'QR Code tidak valid atau kosong', 'error', 'mdi-alert');
+    return;
+  }
   
-  // Simpan data QR yang di-scan ke localStorage
-  const saveScannedQRData = (qrData: string) => {
-    if (typeof window !== 'undefined') {
-      const scannedQRs = JSON.parse(localStorage.getItem('scanned_qr_data') || '[]');
-      scannedQRs.unshift({
-        data: qrData,
-        timestamp: new Date().toISOString(),
-        date: new Date().toLocaleDateString('id-ID'),
-        time: new Date().toLocaleTimeString('id-ID')
-      });
-      
-      // Simpan maksimal 50 item
-      if (scannedQRs.length > 50) {
-        scannedQRs.pop();
+  // Cek apakah QR code sudah pernah berhasil di-scan (mencegah double antrian)
+  if (isQRCodeAlreadyScanned(decodedText)) {
+    console.log('⏭️ Scan diabaikan: QR code sudah pernah berhasil di-scan');
+    showSnackbar('Peringatan', 'QR Code ini sudah pernah berhasil di-scan. Tidak dapat digunakan lagi untuk mencegah double antrian.', 'warning', 'mdi-alert-circle');
+    return;
+  }
+  
+  // Debounce: cegah scan berulang dalam waktu singkat
+  const now = Date.now();
+  if (lastScannedQR === decodedText && (now - lastScanTime) < SCAN_DEBOUNCE_MS) {
+    console.log('⏭️ Scan diabaikan (debounce): QR code sama dalam waktu singkat');
+    return;
+  }
+  
+  // Update last scan info
+  lastScannedQR = decodedText;
+  lastScanTime = now;
+  
+  // Simpan data QR yang di-scan
+  scannedData.value = decodedText;
+  
+  // Scanner tetap berjalan untuk memungkinkan scan QR code berikutnya
+  
+  // Proses data QR
+  try {
+    onDetect(decodedText);
+  } catch (error) {
+    console.error('Error processing QR data:', error);
+    showSnackbar('Error', 'Gagal memproses data QR Code', 'error', 'mdi-alert');
+  }
+  
+  // Simpan ke localStorage untuk riwayat
+  saveScannedQRData(decodedText);
+};
+
+// Simpan data QR yang di-scan ke localStorage
+const saveScannedQRData = (qrData: string) => {
+  if (typeof window !== 'undefined') {
+    const scannedQRs = JSON.parse(localStorage.getItem('scanned_qr_data') || '[]');
+    scannedQRs.unshift({
+      data: qrData,
+      timestamp: new Date().toISOString(),
+      date: new Date().toLocaleDateString('id-ID'),
+      time: new Date().toLocaleTimeString('id-ID')
+    });
+    
+    // Simpan maksimal 50 item
+    if (scannedQRs.length > 50) {
+      scannedQRs.pop();
+    }
+    
+    localStorage.setItem('scanned_qr_data', JSON.stringify(scannedQRs));
+  }
+};
+
+// Load successful scans dari localStorage
+const loadSuccessfulScans = () => {
+  if (typeof window !== 'undefined') {
+    const stored = localStorage.getItem(SUCCESSFUL_SCANS_KEY);
+    if (stored) {
+      try {
+        const scansArray = JSON.parse(stored);
+        successfulScans.value = new Set(scansArray);
+      } catch (e) {
+        console.error('Error loading successful scans:', e);
+        successfulScans.value = new Set();
       }
-      
-      localStorage.setItem('scanned_qr_data', JSON.stringify(scannedQRs));
     }
-  };
-  
-  // Load successful scans dari localStorage
-  const loadSuccessfulScans = () => {
-    if (typeof window !== 'undefined') {
-      const stored = localStorage.getItem(SUCCESSFUL_SCANS_KEY);
-      if (stored) {
-        try {
-          const scansArray = JSON.parse(stored);
-          successfulScans.value = new Set(scansArray);
-        } catch (e) {
-          console.error('Error loading successful scans:', e);
-          successfulScans.value = new Set();
+  }
+};
+
+// Simpan successful scan ke localStorage
+const saveSuccessfulScan = (qrData: string) => {
+  if (typeof window !== 'undefined') {
+    successfulScans.value.add(qrData);
+    const scansArray = Array.from(successfulScans.value);
+    localStorage.setItem(SUCCESSFUL_SCANS_KEY, JSON.stringify(scansArray));
+  }
+};
+
+// Cek apakah QR code sudah pernah berhasil di-scan
+const isQRCodeAlreadyScanned = (qrData: string): boolean => {
+  return successfulScans.value.has(qrData);
+};
+
+// Watch tab changes untuk stop scanner saat pindah tab
+watch(tab, (newTab) => {
+  if (newTab !== 'checkin' && isScanning.value) {
+    stopScanning();
+  }
+  // Check camera when switching to checkin tab
+  if (newTab === 'checkin' && !hasCamera.value && !cameraChecking.value) {
+    checkCameraAvailability();
+  }
+  // Reset generate patient ID when switching to generate tab (to ensure fresh ID after reset)
+  if (newTab === 'generate') {
+    // Check and reset daily first
+    checkAndResetDaily();
+    // Generate new patient ID (will start from 00001 if reset happened)
+    generatePatientId.value = generateSequentialPatientId();
+  }
+});
+
+// Check camera on mount and initialize patient ID
+onMounted(async () => {
+  if (typeof window !== 'undefined') {
+    // Wait for DOM to be ready
+    await nextTick();
+    
+    // Reset tab to checkin (untuk handle refresh)
+    tab.value = 'checkin';
+    
+    // Wait again to ensure tab is rendered
+    await nextTick();
+    
+    // Reset state saat mount (untuk handle refresh)
+    isScanning.value = false;
+    cameraReady.value = false;
+    scannedData.value = null;
+    manualInput.value = '';
+    
+    // Cleanup QR scanner instance jika masih ada dari refresh sebelumnya
+    if (html5QrCode) {
+      try {
+        if (isScanning.value) {
+          await html5QrCode.stop();
+          await html5QrCode.clear();
         }
+        html5QrCode = null;
+      } catch (err) {
+        console.warn('Error cleaning up QR scanner on mount:', err);
+        html5QrCode = null;
       }
     }
-  };
-  
-  // Simpan successful scan ke localStorage
-  const saveSuccessfulScan = (qrData: string) => {
-    if (typeof window !== 'undefined') {
-      successfulScans.value.add(qrData);
-      const scansArray = Array.from(successfulScans.value);
-      localStorage.setItem(SUCCESSFUL_SCANS_KEY, JSON.stringify(scansArray));
+    
+    // Clear any existing video streams (cleanup dari refresh sebelumnya)
+    // Note: We rely on html5QrCode cleanup to stop media tracks
+    
+    // Initialize patient ID if empty
+    if (!generatePatientId.value) {
+      generatePatientId.value = generateSequentialPatientId();
     }
-  };
-  
-  // Cek apakah QR code sudah pernah berhasil di-scan
-  const isQRCodeAlreadyScanned = (qrData: string): boolean => {
-    return successfulScans.value.has(qrData);
-  };
-  
-  // Watch tab changes untuk stop scanner saat pindah tab
-  watch(tab, (newTab) => {
-    if (newTab !== 'scan' && isScanning.value) {
-      stopScanning();
+    
+    // Set default klinik if available
+    if (!selectedKlinik.value && klinikOptions.value.length > 0) {
+      selectedKlinik.value = klinikOptions.value[0].value;
     }
-    // Check camera when switching to scan tab
-    if (newTab === 'scan' && !hasCamera.value && !cameraChecking.value) {
-      checkCameraAvailability();
-    }
-  });
-  
-  // Check camera on mount
-  onMounted(() => {
-    if (typeof window !== 'undefined' && typeof navigator !== 'undefined') {
+    
+    // Check camera availability
+    if (typeof navigator !== 'undefined') {
       if (navigator.mediaDevices && typeof navigator.mediaDevices.getUserMedia === 'function') {
         checkCameraAvailability();
       } else {
@@ -1597,17 +1878,61 @@
       hasCamera.value = false;
       cameraChecking.value = false;
     }
-  });
-  
-  // Cleanup saat component unmount
-  onUnmounted(() => {
-    if (html5QrCode && isScanning.value) {
-      stopScanning();
+    
+    // Load history untuk ditampilkan di sidebar
+    loadHistory();
+    
+    // Check and reset daily at 10 PM
+    checkAndResetDaily();
+    
+    // Set interval to check every minute for reset time
+    setInterval(() => {
+      checkAndResetDaily();
+    }, 60000); // Check every minute
+  } else {
+    hasCamera.value = false;
+    cameraChecking.value = false;
+  }
+});
+
+// Cleanup saat component unmount
+onUnmounted(async () => {
+  // Stop scanning jika aktif
+  if (html5QrCode) {
+    try {
+      if (isScanning.value) {
+        await html5QrCode.stop();
+        await html5QrCode.clear();
+      }
+      // Destroy instance
+      html5QrCode = null;
+    } catch (err) {
+      console.warn('Error stopping scanner on unmount:', err);
+      html5QrCode = null;
     }
-  });
+  }
   
-  const onDetect = async (decodedText: string) => {
-      const [patientId, status] = decodedText.split('|');
+  // Note: Media tracks are automatically stopped when html5QrCode.stop() is called
+  // No need to manually stop tracks here
+  
+  // Clear auto-close timer jika ada
+  if (autoCloseTimer) {
+    clearTimeout(autoCloseTimer);
+    autoCloseTimer = null;
+  }
+  
+  // Reset state
+  isScanning.value = false;
+  cameraReady.value = false;
+});
+
+const onDetect = async (decodedText: string) => {
+    // Try to parse as QR code format: ID|STATUS
+    const parts = decodedText.split('|');
+    
+    if (parts.length === 2) {
+      // QR Code format
+      const [patientId, status] = parts;
       
       // Validasi format QR code
       if (!patientId || !status) {
@@ -1619,38 +1944,37 @@
       const isAllowed = status === 'ALLOWED';
       
       if (isAllowed) {
-          // Jika diperbolehkan, langsung proses check-in
-          // Proses check-in langsung
-          const checkinSuccess = await performCheckIn(decodedText, 'QR Scan');
+          // Cari pasien berdasarkan barcode atau ID
+          const checkInResult = queueStore.checkInPatient(patientId);
           
-          // Simpan hasil check-in
-          lastCheckInResult.value = {
-              success: checkinSuccess,
-              patientId: patientId,
-              status: status
-          };
-          
-          // Simpan ke history check-in dengan status hasil check-in
-          saveToHistory({
-              patientId: patientId || 'Unknown',
-              status: checkinSuccess ? 'success' : 'failed',
-              checkInTime: new Date().toISOString(),
-              checkInDate: new Date().toISOString(),
-              method: 'QR Scan'
-          });
-          
-          // Tampilkan dialog dengan hasil check-in
-          if (checkinSuccess) {
-              // Simpan QR code yang berhasil di-scan untuk mencegah scan ulang
-              saveSuccessfulScan(decodedText);
-              infoMessage.value = `✅ Check-in Berhasil!\n\nPasien ${patientId} berhasil melakukan check-in.`;
-              infoAction.value = 'checkin';
+          if (checkInResult.success && checkInResult.patient) {
+            // Simpan hasil check-in
+            lastCheckInResult.value = {
+                success: true,
+                patientId: checkInResult.patient.barcode,
+                status: 'ALLOWED'
+            };
+            
+            // Simpan ke history check-in
+            saveToHistory({
+                patientId: checkInResult.patient.barcode,
+                queueNumber: checkInResult.patient.noAntrian,
+                status: 'success',
+                checkInTime: new Date().toISOString(),
+                checkInDate: new Date().toISOString(),
+                method: 'QR Scan'
+            });
+            
+            // Simpan QR code yang berhasil di-scan
+            saveSuccessfulScan(decodedText);
+            infoMessage.value = `✅ Check-in Berhasil!\n\nPasien ${checkInResult.patient.noAntrian.split(" |")[0]} berhasil melakukan check-in.`;
+            infoAction.value = 'checkin';
+            infoDialog.value = true;
           } else {
-              infoMessage.value = `❌ Check-in Gagal!\n\nPasien ${patientId} diperbolehkan check-in, namun proses check-in gagal. Silakan coba lagi.`;
-              infoAction.value = 'checkin';
+            infoMessage.value = `❌ Check-in Gagal!\n\n${checkInResult.message}`;
+            infoAction.value = 'checkin';
+            infoDialog.value = true;
           }
-          
-          infoDialog.value = true;
       } else {
           // Jika belum diperbolehkan, tampilkan pesan
           lastCheckInResult.value = {
@@ -1659,1465 +1983,1757 @@
               status: status
           };
           
-          // Simpan ke history check-in untuk NOT_ALLOWED
-          saveToHistory({
-              patientId: patientId || 'Unknown',
-              status: 'NOT_ALLOWED',
-              checkInTime: new Date().toISOString(),
-              checkInDate: new Date().toISOString(),
-              method: 'QR Scan'
-          });
-          
           infoMessage.value = `⏳ Belum Diizinkan Check-in\n\nAntrean Pasien ${patientId} belum diperbolehkan check-in. Mohon menunggu hingga antrean Anda dipanggil.`;
           infoAction.value = 'kembali';
           infoDialog.value = true;
       }
-  };
-  
-  const handleInfoAction = async () => {
-      infoDialog.value = false;
-      
-      // Scanner tetap berjalan setelah dialog ditutup
-      // Ini memungkinkan user untuk segera memproses QR code berikutnya
-      // tanpa perlu memulai scanner lagi
-  };
-  
-  const performCheckIn = async (data: string, method: string = 'QR Scan'): Promise<boolean> => {
-      await new Promise(resolve => setTimeout(resolve, 1000));
-      const success = Math.random() < 0.8;
-      
-      // History akan disimpan di onDetect setelah performCheckIn selesai
-      // Jadi kita hanya perlu return hasil check-in
-      return success;
-  };
-  
-  const showSnackbar = (title: string, message: string, color: string, icon: string) => {
-      snackbar.value.title = title;
-      snackbar.value.message = message;
-      snackbar.value.color = color;
-      snackbar.value.icon = icon;
-      snackbar.value.show = true;
-  };
-  
-  const checkInManual = async () => {
-    if (!manualInput.value) {
-      showSnackbar('Error', 'Mohon isi nomor antrean atau ID pasien', 'error', 'mdi-alert');
-      return;
-    }
-  
-    // Simulasi check-in manual
-    const success = await performCheckIn(`${manualInput.value}|ALLOWED`);
-    
-    if (success) {
-      showSnackbar('Berhasil!', 'Check-in manual berhasil dilakukan.', 'success', 'mdi-check-circle');
-      manualInput.value = '';
-      if (manualForm.value) {
-        (manualForm.value as any).reset();
-      }
     } else {
-      showSnackbar('Gagal!', 'Check-in manual gagal dilakukan. Silakan coba lagi!', 'error', 'mdi-close-circle');
-    }
-  };
-  
-  // Quick generate QR for testing
-  const generateQuickQR = (patientId: string, status: string) => {
-    generatePatientId.value = patientId;
-    generateStatus.value = status;
-    generateQRCode();
-  };
-  
-  // Generate QR Code function
-  const generateQRCode = async () => {
-    if (!generatePatientId.value) {
-      showSnackbar('Error', 'Mohon isi ID Pasien', 'error', 'mdi-alert');
-      return;
-    }
-  
-    generatedQRData.value = `${generatePatientId.value}|${generateStatus.value}`;
-    
-    await nextTick();
-    
-    // Clear previous QR code
-    const qrContainer = document.getElementById('qrcode');
-    if (qrContainer) {
-      qrContainer.innerHTML = '';
+      // Try as barcode directly
+      const checkInResult = queueStore.checkInPatient(decodedText);
       
-      try {
-        // Use qrcode package that's already installed
-        const QRCode = (await import('qrcode')).default;
+      if (checkInResult.success && checkInResult.patient) {
+        lastCheckInResult.value = {
+            success: true,
+            patientId: checkInResult.patient.barcode,
+            status: 'ALLOWED'
+        };
         
-        // Create QR code as data URL
-        const qrDataUrl = await QRCode.toDataURL(generatedQRData.value, {
-          errorCorrectionLevel: 'H', // High error correction for better scanning
-          type: 'image/png',
-          quality: 1,
-          margin: 2,
-          width: 300,
-          color: {
-            dark: '#000000', // Black
-            light: '#FFFFFF' // White
-          }
+        saveToHistory({
+            patientId: checkInResult.patient.barcode,
+            queueNumber: checkInResult.patient.noAntrian,
+            status: 'success',
+            checkInTime: new Date().toISOString(),
+            checkInDate: new Date().toISOString(),
+            method: 'QR Scan'
         });
         
-        // Create img element and append to container
-        const img = document.createElement('img');
-        img.src = qrDataUrl;
-        img.alt = 'QR Code';
-        img.style.width = '100%';
-        img.style.maxWidth = '300px';
-        img.style.height = 'auto';
-        img.style.display = 'block';
-        img.style.margin = '0 auto';
-        qrContainer.appendChild(img);
-        
-        console.log('QR Code created successfully:', generatedQRData.value);
-        showSnackbar('Berhasil!', 'QR Code berhasil di-generate. Silakan scan untuk testing', 'success', 'mdi-check-circle');
-      } catch (error) {
-        console.error('Error creating QR code:', error);
-        showSnackbar('Error', 'Gagal membuat QR Code. Silakan coba lagi', 'error', 'mdi-alert');
+        infoMessage.value = `✅ Check-in Berhasil!\n\nPasien ${checkInResult.patient.noAntrian.split(" |")[0]} berhasil melakukan check-in.`;
+        infoAction.value = 'checkin';
+        infoDialog.value = true;
+      } else {
+        infoMessage.value = `❌ Check-in Gagal!\n\n${checkInResult.message}`;
+        infoAction.value = 'checkin';
+        infoDialog.value = true;
       }
-    } else {
-      showSnackbar('Error', 'Container QR Code tidak ditemukan', 'error', 'mdi-alert');
     }
-  };
+};
+
+const handleInfoAction = async () => {
+    // Clear auto-close timer jika ada
+    if (autoCloseTimer) {
+      clearTimeout(autoCloseTimer);
+      autoCloseTimer = null;
+    }
+    
+    infoDialog.value = false;
+    
+    // Scanner tetap berjalan setelah dialog ditutup
+    // Ini memungkinkan user untuk segera memproses QR code berikutnya
+    // tanpa perlu memulai scanner lagi
+};
+
+// Watch infoDialog untuk auto-close setelah 3 detik
+watch(infoDialog, (isOpen: boolean) => {
+  // Clear timer yang ada jika dialog ditutup
+  if (autoCloseTimer) {
+    clearTimeout(autoCloseTimer);
+    autoCloseTimer = null;
+  }
   
-  const downloadQR = async () => {
-    const img = document.querySelector('#qrcode img') as HTMLImageElement;
-    if (img && img.src) {
+  // Jika dialog dibuka, set timer untuk auto-close setelah 3 detik
+  if (isOpen) {
+    autoCloseTimer = setTimeout(() => {
+      infoDialog.value = false;
+      autoCloseTimer = null;
+    }, 5000); // 5   detik
+  }
+});
+
+const showSnackbar = (title: string, message: string, color: string, icon: string) => {
+    snackbar.value.title = title;
+    snackbar.value.message = message;
+    snackbar.value.color = color;
+    snackbar.value.icon = icon;
+    snackbar.value.show = true;
+};
+
+const checkInManual = async () => {
+  if (!manualInput.value) {
+    showSnackbar('Error', 'Mohon isi nomor antrean, barcode, atau ID pasien', 'error', 'mdi-alert');
+    return;
+  }
+
+  // Check-in menggunakan queueStore
+  const checkInResult = queueStore.checkInPatient(manualInput.value.trim());
+  
+  if (checkInResult.success && checkInResult.patient) {
+    // Simpan ke history
+    saveToHistory({
+      patientId: checkInResult.patient.barcode,
+      queueNumber: checkInResult.patient.noAntrian,
+      status: 'success',
+      checkInTime: new Date().toISOString(),
+      checkInDate: new Date().toISOString(),
+      method: 'Manual'
+    });
+    
+    showSnackbar('Berhasil!', `Check-in manual berhasil. Pasien ${checkInResult.patient.noAntrian.split(" |")[0]} siap diproses.`, 'success', 'mdi-check-circle');
+    manualInput.value = '';
+    if (manualForm.value) {
+      (manualForm.value as any).reset();
+    }
+  } else {
+    showSnackbar('Gagal!', checkInResult.message || 'Check-in manual gagal dilakukan. Silakan coba lagi!', 'error', 'mdi-close-circle');
+  }
+};
+
+// Quick generate QR for testing
+const generateQuickQR = (status: string) => {
+  // Check and reset daily first (before generating)
+  checkAndResetDaily();
+  
+  // Auto-generate sequential patient ID
+  generatePatientId.value = generateSequentialPatientId();
+  generateStatus.value = status;
+  // Use first klinik if none selected
+  if (!selectedKlinik.value && klinikOptions.value.length > 0) {
+    selectedKlinik.value = klinikOptions.value[0].value;
+  }
+  generateQRCode();
+};
+
+// Generate QR Code function
+const generateQRCode = async () => {
+  // Check and reset daily first (before generating)
+  checkAndResetDaily();
+  
+  // Auto-generate patient ID if empty
+  if (!generatePatientId.value) {
+    generatePatientId.value = generateSequentialPatientId();
+  }
+  
+  if (!selectedKlinik.value) {
+    showSnackbar('Error', 'Mohon pilih Klinik/Poli', 'error', 'mdi-alert');
+    return;
+  }
+
+  generatedQRData.value = `${generatePatientId.value}|${generateStatus.value}`;
+  
+  await nextTick();
+  
+  // Clear previous QR code
+  const qrContainer = document.getElementById('qrcode');
+  if (qrContainer) {
+    qrContainer.innerHTML = '';
+    
+    try {
+      // Use qrcode package that's already installed
+      const QRCode = (await import('qrcode')).default;
+      
+      // Create QR code as data URL
+      const qrDataUrl = await QRCode.toDataURL(generatedQRData.value, {
+        errorCorrectionLevel: 'H', // High error correction for better scanning
+        type: 'image/png',
+        quality: 1,
+        margin: 2,
+        width: 300,
+        color: {
+          dark: '#000000', // Black
+          light: '#FFFFFF' // White
+        }
+      });
+      
+      // Create img element and append to container
+      const img = document.createElement('img');
+      img.src = qrDataUrl;
+      img.alt = 'QR Code';
+      img.style.width = '100%';
+      img.style.maxWidth = '300px';
+      img.style.height = 'auto';
+      img.style.display = 'block';
+      img.style.margin = '0 auto';
+      qrContainer.appendChild(img);
+      
+      console.log('QR Code created successfully:', generatedQRData.value);
+      showSnackbar('Berhasil!', 'QR Code berhasil di-generate. Silakan scan untuk testing', 'success', 'mdi-check-circle');
+    } catch (error) {
+      console.error('Error creating QR code:', error);
+      showSnackbar('Error', 'Gagal membuat QR Code. Silakan coba lagi', 'error', 'mdi-alert');
+    }
+  } else {
+    showSnackbar('Error', 'Container QR Code tidak ditemukan', 'error', 'mdi-alert');
+  }
+};
+
+const downloadQR = async () => {
+  const img = document.querySelector('#qrcode img') as HTMLImageElement;
+  if (img && img.src) {
+    try {
+      // Convert img src (data URL) to blob
+      const response = await fetch(img.src);
+      const blob = await response.blob();
+      const url = URL.createObjectURL(blob);
+      const link = document.createElement('a');
+      const klinikCode = selectedKlinik.value || 'UNKNOWN';
+      const fileName = `QR-Test-${klinikCode}-${generatePatientId.value}-${generateStatus.value}-${Date.now()}.png`;
+      link.download = fileName;
+      link.href = url;
+      link.style.display = 'none';
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(url);
+      showSnackbar('Berhasil!', `QR Code berhasil didownload: ${fileName}`, 'success', 'mdi-download');
+    } catch (error) {
+      console.error('Download error:', error);
+      // Fallback: use img src directly
+      const link = document.createElement('a');
+      const klinikCode = selectedKlinik.value || 'UNKNOWN';
+      link.download = `QR-Test-${klinikCode}-${generatePatientId.value}-${generateStatus.value}.png`;
+      link.href = img.src;
+      link.click();
+      showSnackbar('Berhasil!', 'QR Code berhasil didownload', 'success', 'mdi-download');
+    }
+  } else {
+    showSnackbar('Error', 'QR Code belum di-generate. Silakan generate terlebih dahulu', 'error', 'mdi-alert');
+  }
+};
+
+const copyQRToClipboard = async () => {
+  const img = document.querySelector('#qrcode img') as HTMLImageElement;
+  if (img && img.src) {
+    try {
+      // Convert img src to blob
+      const response = await fetch(img.src);
+      const blob = await response.blob();
+      
       try {
-        // Convert img src (data URL) to blob
-        const response = await fetch(img.src);
-        const blob = await response.blob();
-        const url = URL.createObjectURL(blob);
-        const link = document.createElement('a');
-        const fileName = `QR-Test-${generatePatientId.value}-${generateStatus.value}-${Date.now()}.png`;
-        link.download = fileName;
-        link.href = url;
-        link.style.display = 'none';
-        document.body.appendChild(link);
-        link.click();
-        document.body.removeChild(link);
-        URL.revokeObjectURL(url);
-        showSnackbar('Berhasil!', `QR Code berhasil didownload: ${fileName}`, 'success', 'mdi-download');
-      } catch (error) {
-        console.error('Download error:', error);
-        // Fallback: use img src directly
-        const link = document.createElement('a');
-        link.download = `QR-Test-${generatePatientId.value}-${generateStatus.value}.png`;
-        link.href = img.src;
-        link.click();
-        showSnackbar('Berhasil!', 'QR Code berhasil didownload', 'success', 'mdi-download');
+        await navigator.clipboard.write([
+          new ClipboardItem({
+            'image/png': blob
+          })
+        ]);
+        showSnackbar('Berhasil!', 'QR Code berhasil disalin ke clipboard', 'success', 'mdi-content-copy');
+      } catch (err: any) {
+        console.error('Clipboard error:', err);
+        // Fallback: download instead
+        showSnackbar('Info', 'Copy ke clipboard tidak didukung. Gunakan tombol Download.', 'info', 'mdi-information');
       }
-    } else {
-      showSnackbar('Error', 'QR Code belum di-generate. Silakan generate terlebih dahulu', 'error', 'mdi-alert');
+    } catch (error) {
+      console.error('Copy error:', error);
+      showSnackbar('Error', 'Gagal menyalin QR Code', 'error', 'mdi-alert');
     }
-  };
-  
-  const copyQRToClipboard = async () => {
-    const img = document.querySelector('#qrcode img') as HTMLImageElement;
-    if (img && img.src) {
-      try {
-        // Convert img src to blob
-        const response = await fetch(img.src);
-        const blob = await response.blob();
-        
+  } else {
+    showSnackbar('Error', 'QR Code belum di-generate. Silakan generate terlebih dahulu', 'error', 'mdi-alert');
+  }
+};
+
+const shareQR = async () => {
+  const img = document.querySelector('#qrcode img') as HTMLImageElement;
+  if (img && img.src) {
+    try {
+      // Convert img src to blob
+      const response = await fetch(img.src);
+      const blob = await response.blob();
+      const klinikCode = selectedKlinik.value || 'UNKNOWN';
+      const file = new File([blob], `QR-Test-${klinikCode}-${generatePatientId.value}-${generateStatus.value}.png`, { type: 'image/png' });
+      
+      if (navigator.share && navigator.canShare({ files: [file] })) {
         try {
-          await navigator.clipboard.write([
-            new ClipboardItem({
-              'image/png': blob
-            })
-          ]);
-          showSnackbar('Berhasil!', 'QR Code berhasil disalin ke clipboard', 'success', 'mdi-content-copy');
+          await navigator.share({
+            files: [file],
+            title: 'QR Code Check-in Test',
+            text: `QR Code untuk testing: ${generatedQRData.value}`
+          });
+          showSnackbar('Berhasil!', 'QR Code berhasil dibagikan', 'success', 'mdi-share');
         } catch (err: any) {
-          console.error('Clipboard error:', err);
-          // Fallback: download instead
-          showSnackbar('Info', 'Copy ke clipboard tidak didukung. Gunakan tombol Download.', 'info', 'mdi-information');
-        }
-      } catch (error) {
-        console.error('Copy error:', error);
-        showSnackbar('Error', 'Gagal menyalin QR Code', 'error', 'mdi-alert');
-      }
-    } else {
-      showSnackbar('Error', 'QR Code belum di-generate. Silakan generate terlebih dahulu', 'error', 'mdi-alert');
-    }
-  };
-  
-  const shareQR = async () => {
-    const img = document.querySelector('#qrcode img') as HTMLImageElement;
-    if (img && img.src) {
-      try {
-        // Convert img src to blob
-        const response = await fetch(img.src);
-        const blob = await response.blob();
-        const file = new File([blob], `QR-Test-${generatePatientId.value}-${generateStatus.value}.png`, { type: 'image/png' });
-        
-        if (navigator.share && navigator.canShare({ files: [file] })) {
-          try {
-            await navigator.share({
-              files: [file],
-              title: 'QR Code Check-in Test',
-              text: `QR Code untuk testing: ${generatedQRData.value}`
-            });
-            showSnackbar('Berhasil!', 'QR Code berhasil dibagikan', 'success', 'mdi-share');
-          } catch (err: any) {
-            if (err.name !== 'AbortError') {
-              // Fallback to copy or download
-              copyQRToClipboard();
-            }
+          if (err.name !== 'AbortError') {
+            // Fallback to copy or download
+            copyQRToClipboard();
           }
-        } else {
-          // Fallback: try copy to clipboard
-          copyQRToClipboard();
-        }
-      } catch (error) {
-        console.error('Share error:', error);
-        showSnackbar('Error', 'Gagal membagikan QR Code', 'error', 'mdi-alert');
-      }
-    } else {
-      showSnackbar('Error', 'QR Code belum di-generate. Silakan generate terlebih dahulu', 'error', 'mdi-alert');
-    }
-  };
-  
-  // History Functions
-  const HISTORY_STORAGE_KEY = 'checkin_history';
-  
-  const loadHistory = () => {
-    if (typeof window !== 'undefined') {
-      const stored = localStorage.getItem(HISTORY_STORAGE_KEY);
-      if (stored) {
-        try {
-          checkInHistory.value = JSON.parse(stored);
-        } catch (e) {
-          console.error('Error loading history:', e);
-          checkInHistory.value = [];
-        }
-      }
-    }
-  };
-  
-  const saveToHistory = (item: {
-    patientId: string;
-    queueNumber?: string;
-    status: string;
-    checkInTime: string;
-    checkInDate: string;
-    method: string;
-  }) => {
-    const historyItem = {
-      ...item,
-      queueNumber: item.queueNumber || `ANT-${Date.now()}`,
-    };
-    
-    checkInHistory.value.unshift(historyItem);
-    
-    // Simpan maksimal 100 item
-    if (checkInHistory.value.length > 100) {
-      checkInHistory.value = checkInHistory.value.slice(0, 100);
-    }
-    
-    if (typeof window !== 'undefined') {
-      localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(checkInHistory.value));
-    }
-  };
-  
-  const deleteHistoryItem = (index: number) => {
-    checkInHistory.value.splice(index, 1);
-    if (typeof window !== 'undefined') {
-      localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(checkInHistory.value));
-    }
-    showSnackbar('Berhasil', 'Riwayat berhasil dihapus', 'success', 'mdi-check');
-  };
-  
-  const clearHistory = () => {
-    checkInHistory.value = [];
-    if (typeof window !== 'undefined') {
-      localStorage.removeItem(HISTORY_STORAGE_KEY);
-    }
-    showSnackbar('Berhasil', 'Semua riwayat berhasil dihapus', 'success', 'mdi-check');
-  };
-  
-  const openHistoryDialog = () => {
-    loadHistory();
-    historyDialog.value = true;
-  };
-  
-  const openQRHistoryDialog = () => {
-    loadScannedQRHistory();
-    qrHistoryDialog.value = true;
-  };
-  
-  const loadScannedQRHistory = () => {
-    if (typeof window !== 'undefined') {
-      const stored = localStorage.getItem('scanned_qr_data');
-      if (stored) {
-        try {
-          scannedQRHistory.value = JSON.parse(stored);
-        } catch (e) {
-          console.error('Error loading QR history:', e);
-          scannedQRHistory.value = [];
         }
       } else {
-        scannedQRHistory.value = [];
+        // Fallback: try copy to clipboard
+        copyQRToClipboard();
+      }
+    } catch (error) {
+      console.error('Share error:', error);
+      showSnackbar('Error', 'Gagal membagikan QR Code', 'error', 'mdi-alert');
+    }
+  } else {
+    showSnackbar('Error', 'QR Code belum di-generate. Silakan generate terlebih dahulu', 'error', 'mdi-alert');
+  }
+};
+
+// History Functions
+const loadHistory = () => {
+  if (typeof window !== 'undefined') {
+    const stored = localStorage.getItem(HISTORY_STORAGE_KEY);
+    if (stored) {
+      try {
+        checkInHistory.value = JSON.parse(stored);
+      } catch (e) {
+        console.error('Error loading history:', e);
+        checkInHistory.value = [];
       }
     }
+  }
+};
+
+const saveToHistory = (item: {
+  patientId: string;
+  queueNumber?: string;
+  status: string;
+  checkInTime: string;
+  checkInDate: string;
+  method: string;
+  kodeKlinik?: string;
+}) => {
+  // Generate queue number based on klinik code if not provided
+  let queueNumber = item.queueNumber;
+  if (!queueNumber && item.kodeKlinik) {
+    queueNumber = generateSequentialQueueNumber(item.kodeKlinik);
+  } else if (!queueNumber) {
+    // Fallback to default if no klinik code
+    queueNumber = `ANT-${Date.now()}`;
+  }
+  
+  const historyItem = {
+    ...item,
+    queueNumber: queueNumber,
   };
   
-  const clearQRHistory = () => {
-    scannedQRHistory.value = [];
-    if (typeof window !== 'undefined') {
-      localStorage.removeItem('scanned_qr_data');
-    }
-    showSnackbar('Berhasil', 'Semua riwayat QR scan berhasil dihapus', 'success', 'mdi-check');
-  };
-  
-  const deleteQRHistoryItem = (index: number) => {
-    scannedQRHistory.value.splice(index, 1);
-    if (typeof window !== 'undefined') {
-      localStorage.setItem('scanned_qr_data', JSON.stringify(scannedQRHistory.value));
-    }
-    showSnackbar('Berhasil', 'Riwayat QR scan berhasil dihapus', 'success', 'mdi-check');
-  };
-  
-  const useQRData = (qrData: string) => {
-    qrHistoryDialog.value = false;
-    scannedData.value = qrData;
-    onDetect(qrData);
-  };
-  
-  const filteredQRHistory = computed(() => {
-    let filtered = [...scannedQRHistory.value];
+  // Jika status baru adalah "success" atau "ALLOWED", cek apakah ada history lama dengan patientId yang sama
+  // yang masih berstatus "NOT_ALLOWED", "pending", atau "failed"
+  // Jika ada, hapus entry lama tersebut agar tidak terhitung sebagai "menunggu"
+  if (item.status === 'success' || item.status === 'ALLOWED') {
+    // Cari dan hapus entry lama dengan patientId yang sama yang masih menunggu
+    const waitingStatuses = ['NOT_ALLOWED', 'pending', 'failed'];
+    const indexToRemove = checkInHistory.value.findIndex(
+      (history: {
+        patientId: string;
+        queueNumber?: string;
+        status: string;
+        checkInTime: string;
+        checkInDate: string;
+        method: string;
+        kodeKlinik?: string;
+      }) => 
+        history.patientId === item.patientId && 
+        waitingStatuses.includes(history.status)
+    );
     
-    // Filter by search
-    if (historySearch.value) {
-      const search = historySearch.value.toLowerCase();
-      filtered = filtered.filter(item => 
-        item.data.toLowerCase().includes(search)
-      );
+    if (indexToRemove !== -1) {
+      // Hapus entry lama yang masih menunggu
+      checkInHistory.value.splice(indexToRemove, 1);
+      console.log(`✅ Menghapus entry lama untuk pasien ${item.patientId} yang masih menunggu`);
     }
-    
-    return filtered;
-  });
+  }
   
-  const filteredHistory = computed(() => {
-    let filtered = [...checkInHistory.value];
-    
-    // Filter by search
-    if (historySearch.value) {
-      const search = historySearch.value.toLowerCase();
-      filtered = filtered.filter(item => 
-        item.patientId.toLowerCase().includes(search) ||
-        (item.queueNumber && item.queueNumber.toLowerCase().includes(search))
-      );
-    }
-    
-    // Filter by status
-    if (historyStatusFilter.value) {
-      filtered = filtered.filter(item => {
-        if (historyStatusFilter.value === 'success') {
-          return item.status === 'ALLOWED' || item.status === 'success';
-        } else if (historyStatusFilter.value === 'failed') {
-          return item.status === 'NOT_ALLOWED' || item.status === 'failed';
-        }
-        return true;
-      });
-    }
-    
-    return filtered;
-  });
+  checkInHistory.value.unshift(historyItem);
   
-  const getStatusColor = (status: string) => {
-    if (status === 'ALLOWED' || status === 'success') return 'success';
-    if (status === 'NOT_ALLOWED' || status === 'failed') return 'error';
-    return 'warning';
-  };
+  // Simpan maksimal 100 item
+  if (checkInHistory.value.length > 100) {
+    checkInHistory.value = checkInHistory.value.slice(0, 100);
+  }
   
-  const getStatusIcon = (status: string) => {
-    if (status === 'ALLOWED' || status === 'success') return 'mdi-check-circle';
-    if (status === 'NOT_ALLOWED' || status === 'failed') return 'mdi-close-circle';
-    return 'mdi-clock-alert';
-  };
-  
-  const getStatusText = (status: string) => {
-    if (status === 'ALLOWED' || status === 'success') return 'Berhasil';
-    if (status === 'NOT_ALLOWED' || status === 'failed') return 'Gagal';
-    return 'Pending';
-  };
-  
-  const getStatusClass = (status: string) => {
-    if (status === 'ALLOWED' || status === 'success') return 'history-success';
-    if (status === 'NOT_ALLOWED' || status === 'failed') return 'history-failed';
-    return 'history-pending';
-  };
-  
-  const formatDateTime = (dateString: string) => {
-    const date = new Date(dateString);
-    return date.toLocaleTimeString('id-ID', { 
-      hour: '2-digit', 
-      minute: '2-digit',
-      second: '2-digit'
-    });
-  };
-  
-  const formatDate = (dateString: string) => {
-    const date = new Date(dateString);
-    return date.toLocaleDateString('id-ID', {
-      day: '2-digit',
-      month: 'short',
-      year: 'numeric'
-    });
-  };
-  
-  // Load history on mount
   if (typeof window !== 'undefined') {
-    loadHistory();
-    loadScannedQRHistory();
-    loadSuccessfulScans();
+    localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(checkInHistory.value));
   }
-  </script>
+};
+
+const deleteHistoryItem = (index: number) => {
+  checkInHistory.value.splice(index, 1);
+  if (typeof window !== 'undefined') {
+    localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(checkInHistory.value));
+  }
+  showSnackbar('Berhasil', 'Riwayat berhasil dihapus', 'success', 'mdi-check');
+};
+
+const clearHistory = () => {
+  checkInHistory.value = [];
+  if (typeof window !== 'undefined') {
+    localStorage.removeItem(HISTORY_STORAGE_KEY);
+  }
+  showSnackbar('Berhasil', 'Semua riwayat berhasil dihapus', 'success', 'mdi-check');
+};
+
+const openHistoryDialog = () => {
+  loadHistory();
+  historyDialog.value = true;
+};
+
+const openQRHistoryDialog = () => {
+  loadScannedQRHistory();
+  qrHistoryDialog.value = true;
+};
+
+const loadScannedQRHistory = () => {
+  if (typeof window !== 'undefined') {
+    const stored = localStorage.getItem('scanned_qr_data');
+    if (stored) {
+      try {
+        scannedQRHistory.value = JSON.parse(stored);
+      } catch (e) {
+        console.error('Error loading QR history:', e);
+        scannedQRHistory.value = [];
+      }
+    } else {
+      scannedQRHistory.value = [];
+    }
+  }
+};
+
+const clearQRHistory = () => {
+  scannedQRHistory.value = [];
+  if (typeof window !== 'undefined') {
+    localStorage.removeItem('scanned_qr_data');
+  }
+  showSnackbar('Berhasil', 'Semua riwayat QR scan berhasil dihapus', 'success', 'mdi-check');
+};
+
+const deleteQRHistoryItem = (index: number) => {
+  scannedQRHistory.value.splice(index, 1);
+  if (typeof window !== 'undefined') {
+    localStorage.setItem('scanned_qr_data', JSON.stringify(scannedQRHistory.value));
+  }
+  showSnackbar('Berhasil', 'Riwayat QR scan berhasil dihapus', 'success', 'mdi-check');
+};
+
+const useQRData = (qrData: string) => {
+  qrHistoryDialog.value = false;
+  scannedData.value = qrData;
+  onDetect(qrData);
+};
+
+const filteredQRHistory = computed(() => {
+  let filtered = [...scannedQRHistory.value];
   
-  <style scoped>
-  /* Modern Minimalist Background */
-  .bg-modern {
-    background: #ffffff;
-    min-height: 100vh;
-    max-height: 100vh;
-    position: relative;
-    overflow: hidden;
+  // Filter by search
+  if (historySearch.value) {
+    const search = historySearch.value.toLowerCase();
+    filtered = filtered.filter(item => 
+      item.data.toLowerCase().includes(search)
+    );
   }
   
-  .no-scroll-container {
-    height: 100vh;
-    max-height: 100vh;
-    overflow-y: auto;
-    overflow-x: hidden;
+  return filtered;
+});
+
+const filteredHistory = computed(() => {
+  let filtered = [...checkInHistory.value];
+  
+  // Filter by search
+  if (historySearch.value) {
+    const search = historySearch.value.toLowerCase();
+    filtered = filtered.filter(item => 
+      item.patientId.toLowerCase().includes(search) ||
+      (item.queueNumber && item.queueNumber.toLowerCase().includes(search))
+    );
   }
   
-  .no-scroll-container::-webkit-scrollbar {
-    width: 4px;
+  // Filter by status
+  if (historyStatusFilter.value) {
+    filtered = filtered.filter(item => {
+      if (historyStatusFilter.value === 'success') {
+        return item.status === 'ALLOWED' || item.status === 'success';
+      } else if (historyStatusFilter.value === 'failed') {
+        return item.status === 'NOT_ALLOWED' || item.status === 'failed';
+      }
+      return true;
+    });
   }
   
-  .no-scroll-container::-webkit-scrollbar-track {
-    background: transparent;
+  return filtered;
+});
+
+// Recent history untuk ditampilkan di sidebar (5 item terbaru)
+// Hanya menampilkan riwayat dari hari ini setelah reset (setelah jam 10 malam)
+const recentHistory = computed(() => {
+  const todayAfterReset = getTodayAfterReset();
+  
+  // Filter hanya riwayat dari hari ini setelah reset
+  const todayHistory = checkInHistory.value.filter(item => {
+    const itemDate = new Date(item.checkInDate || item.checkInTime);
+    const itemDateStr = itemDate.toISOString().split('T')[0];
+    return itemDateStr === todayAfterReset;
+  });
+  
+  return todayHistory.slice(0, 5);
+});
+
+const getStatusColor = (status: string) => {
+  if (status === 'ALLOWED' || status === 'success') return 'success';
+  if (status === 'NOT_ALLOWED' || status === 'failed') return 'error';
+  return 'warning';
+};
+
+const getStatusIcon = (status: string) => {
+  if (status === 'ALLOWED' || status === 'success') return 'mdi-check-circle';
+  if (status === 'NOT_ALLOWED' || status === 'failed') return 'mdi-close-circle';
+  return 'mdi-clock-alert';
+};
+
+const getStatusText = (status: string) => {
+  if (status === 'ALLOWED' || status === 'success') return 'Berhasil';
+  if (status === 'NOT_ALLOWED' || status === 'failed') return 'Gagal';
+  return 'Pending';
+};
+
+const getStatusClass = (status: string) => {
+  if (status === 'ALLOWED' || status === 'success') return 'history-success';
+  if (status === 'NOT_ALLOWED' || status === 'failed') return 'history-failed';
+  return 'history-pending';
+};
+
+const formatDateTime = (dateString: string) => {
+  const date = new Date(dateString);
+  return date.toLocaleTimeString('id-ID', { 
+    hour: '2-digit', 
+    minute: '2-digit',
+    second: '2-digit'
+  });
+};
+
+const formatTime = (dateString: string) => {
+  const date = new Date(dateString);
+  return date.toLocaleTimeString('id-ID', { 
+    hour: '2-digit', 
+    minute: '2-digit'
+  });
+};
+
+const formatDate = (dateString: string) => {
+  const date = new Date(dateString);
+  return date.toLocaleDateString('id-ID', {
+    day: '2-digit',
+    month: 'short',
+    year: 'numeric'
+  });
+};
+
+// Statistics computed properties
+const statsToday = computed(() => {
+  const todayAfterReset = getTodayAfterReset();
+  
+  return checkInHistory.value.filter(item => {
+    const itemDate = new Date(item.checkInDate || item.checkInTime);
+    const itemDateStr = itemDate.toISOString().split('T')[0];
+    return itemDateStr === todayAfterReset;
+  }).length;
+});
+
+// Get today's date after reset (after 10 PM, consider next day)
+const getTodayAfterReset = (): string => {
+  const now = new Date();
+  const currentHour = now.getHours();
+  
+  // If it's 10 PM or later, consider it as next day for stats
+  if (currentHour >= RESET_HOUR) {
+    const tomorrow = new Date(now);
+    tomorrow.setDate(tomorrow.getDate() + 1);
+    return tomorrow.toISOString().split('T')[0];
   }
   
-  .no-scroll-container::-webkit-scrollbar-thumb {
-    background: rgba(0, 0, 0, 0.2);
-    border-radius: 2px;
+  return now.toISOString().split('T')[0];
+};
+
+const statsCompleted = computed(() => {
+  const todayAfterReset = getTodayAfterReset();
+  
+  return checkInHistory.value.filter(item => {
+    const itemDate = new Date(item.checkInDate || item.checkInTime);
+    const itemDateStr = itemDate.toISOString().split('T')[0];
+    
+    // Only count items from today (after reset time consideration)
+    if (itemDateStr !== todayAfterReset) return false;
+    
+    return item.status === 'success' || item.status === 'ALLOWED';
+  }).length;
+});
+
+const statsWaiting = computed(() => {
+  const todayAfterReset = getTodayAfterReset();
+  
+  return checkInHistory.value.filter(item => {
+    const itemDate = new Date(item.checkInDate || item.checkInTime);
+    const itemDateStr = itemDate.toISOString().split('T')[0];
+    
+    // Only count items from today (after reset time consideration)
+    if (itemDateStr !== todayAfterReset) return false;
+    
+    return item.status === 'NOT_ALLOWED' || item.status === 'pending' || item.status === 'failed';
+  }).length;
+});
+
+// Load history on mount
+if (typeof window !== 'undefined') {
+  loadHistory();
+  loadScannedQRHistory();
+  loadSuccessfulScans();
+}
+</script>
+
+<style scoped>
+/* Modern Minimalist Background */
+.bg-modern {
+  background: #ffffff;
+  min-height: 100vh;
+  max-height: 100vh;
+  position: relative;
+  overflow: hidden;
+}
+
+.no-scroll-container {
+  height: 100vh;
+  max-height: 100vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.no-scroll-container::-webkit-scrollbar {
+  width: 4px;
+}
+
+.no-scroll-container::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.no-scroll-container::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 2px;
+}
+
+.no-overflow {
+  overflow: hidden !important;
+  height: 100vh;
+  max-height: 100vh;
+}
+
+.bg-modern::before {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: 
+    radial-gradient(circle at 20% 50%, rgba(21, 101, 192, 0.05) 0%, transparent 50%),
+    radial-gradient(circle at 80% 80%, rgba(21, 101, 192, 0.05) 0%, transparent 50%);
+  pointer-events: none;
+  z-index: 0;
+}
+
+/* Main Card dengan Glassmorphism */
+.main-card {
+  background: rgba(255, 255, 255, 0.95) !important;
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 24px !important;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
+  overflow: hidden;
+  position: relative;
+  z-index: 1;
+}
+
+/* Header Modern Minimalis */
+.header-modern {
+  background: linear-gradient(135deg, #1565C0 0%, #0D47A1 100%);
+  padding: 8px 20px 6px;
+  position: relative;
+  overflow: hidden;
+}
+
+.header-modern::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
+  pointer-events: none;
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  margin-bottom: 0;
+}
+
+.icon-circle {
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(10px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+}
+
+.header-text {
+  text-align: left;
+}
+
+.title-modern {
+  font-size: 18px;
+  font-weight: 700;
+  color: white;
+  margin: 0;
+  letter-spacing: -0.5px;
+}
+
+.subtitle-modern {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.85);
+  margin: 1px 0 0;
+  font-weight: 400;
+}
+
+/* Tabs Modern */
+.tabs-modern {
+  position: relative;
+  z-index: 1;
+}
+
+.tabs-modern :deep(.v-tab) {
+  text-transform: none;
+  font-weight: 500;
+  font-size: 12px;
+  letter-spacing: 0.2px;
+  color: rgba(255, 255, 255, 0.8);
+  min-width: auto;
+  padding: 0 16px;
+  transition: all 0.3s ease;
+}
+
+.tabs-modern :deep(.v-tab--selected) {
+  color: #FB8C00 !important;
+  background: rgba(251, 140, 0, 0.2);
+  border-radius: 12px;
+  backdrop-filter: blur(10px);
+}
+
+.tabs-modern :deep(.v-tab--selected .v-icon) {
+  color: #FB8C00 !important;
+}
+
+.tabs-modern :deep(.v-tab--selected span) {
+  color: #FB8C00 !important;
+}
+
+.tabs-modern :deep(.v-slider) {
+  display: none;
+}
+
+.tab-modern {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.tab-modern .v-icon {
+  font-size: 18px !important;
+}
+
+/* Content Area */
+.content-modern {
+  background: white;
+  max-height: calc(100vh - 200px);
+  overflow-y: auto;
+}
+
+.content-modern::-webkit-scrollbar {
+  width: 4px;
+}
+
+.content-modern::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.content-modern::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 2px;
+}
+
+.tab-content {
+  animation: fadeIn 0.4s ease-out;
+  height: 100%;
+}
+
+/* Two-column layout styling */
+.checkin-wrapper {
+  width: 100%;
+  min-height: 100%;
+}
+
+.checkin-layout {
+  gap: 0 !important;
+  display: flex !important;
+  flex-wrap: wrap !important;
+  margin: 0 !important;
+  width: 100% !important;
+}
+
+.checkin-left-col {
+  padding-right: 16px !important;
+  border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
+  display: flex !important;
+  flex-direction: column !important;
+  flex: 0 0 50% !important;
+  max-width: 50% !important;
+}
+
+.checkin-right-col {
+  padding-left: 16px !important;
+  display: flex !important;
+  flex-direction: column !important;
+  flex: 0 0 50% !important;
+  max-width: 50% !important;
+}
+
+@media (max-width: 959px) {
+  .checkin-layout {
+    flex-direction: column !important;
   }
   
-  .no-overflow {
-    overflow: hidden !important;
-    height: 100vh;
-    max-height: 100vh;
+  .checkin-left-col {
+    border-right: none !important;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
+    padding-right: 0 !important;
+    padding-bottom: 24px !important;
+    margin-bottom: 24px !important;
+    flex: 0 0 100% !important;
+    width: 100% !important;
+    max-width: 100% !important;
   }
   
-  .bg-modern::before {
-    content: '';
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: 
-      radial-gradient(circle at 20% 50%, rgba(21, 101, 192, 0.05) 0%, transparent 50%),
-      radial-gradient(circle at 80% 80%, rgba(21, 101, 192, 0.05) 0%, transparent 50%);
-    pointer-events: none;
-    z-index: 0;
+  .checkin-right-col {
+    padding-left: 0 !important;
+    padding-top: 24px !important;
+    flex: 0 0 100% !important;
+    width: 100% !important;
+    max-width: 100% !important;
+  }
+}
+
+/* History Section Styling */
+.history-section {
+  border-top: 1px solid rgba(0, 0, 0, 0.08);
+  padding-top: 16px;
+}
+
+.recent-history-list {
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.history-item-compact {
+  transition: all 0.2s ease;
+}
+
+.history-item-compact:hover {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  transform: translateY(-1px);
+}
+
+.history-item-compact.history-success {
+  border-left: 3px solid #4caf50;
+}
+
+.history-item-compact.history-failed {
+  border-left: 3px solid #f44336;
+}
+
+.history-item-compact.history-pending {
+  border-left: 3px solid #ff9800;
+}
+
+@media (min-width: 960px) {
+  .checkin-left-col,
+  .checkin-right-col {
+    flex: 0 0 50% !important;
+    max-width: 50% !important;
+  }
+}
+
+@keyframes fadeIn {
+  from { 
+    opacity: 0; 
+    transform: translateY(10px); 
+  }
+  to { 
+    opacity: 1; 
+    transform: translateY(0); 
+  }
+}
+
+/* Status Header */
+.status-header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 16px;
+  background: linear-gradient(135deg, #f5f7fa 0%, #e3f2fd 100%);
+  border-radius: 12px;
+  border: 1px solid rgba(21, 101, 192, 0.1);
+  text-align: center;
+}
+
+.status-icon-wrapper {
+  width: 40px;
+  height: 40px;
+  border-radius: 10px;
+  background: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  flex-shrink: 0;
+  margin: 0 auto;
+}
+
+.status-text {
+  width: 100%;
+  text-align: center;
+}
+
+.status-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #1a1a1a;
+  margin: 0 0 4px;
+  letter-spacing: -0.3px;
+  text-align: center;
+}
+
+.status-subtitle {
+  font-size: 13px;
+  color: #6b7280;
+  margin: 0;
+  line-height: 1.4;
+  text-align: center;
+}
+
+/* QR Scanner Modern */
+.qr-scanner-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 24px 0;
+}
+
+.qr-placeholder {
+  width: 100%;
+  max-width: 300px;
+  height: 300px;
+  background: linear-gradient(135deg, #f5f7fa 0%, #e3f2fd 100%);
+  border-radius: 16px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border: 2px dashed #1565C0;
+  box-shadow: 0 4px 20px rgba(21, 101, 192, 0.1);
+  margin: 0 auto;
+}
+
+.qr-reader-container {
+  width: 100%;
+  max-width: 500px;
+  margin: 0 auto;
+  position: relative;
+}
+
+.qr-reader-wrapper {
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  border-radius: 16px;
+  overflow: hidden;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
+  background: #000;
+  position: relative;
+  max-width: 500px;
+  max-height: 500px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid rgba(21, 101, 192, 0.2);
+  margin: 0 auto;
+}
+
+.qr-reader-wrapper :deep(video) {
+  width: 100% !important;
+  height: 100% !important;
+  border-radius: 16px;
+  display: block !important;
+  object-fit: cover;
+  background: #000;
+  aspect-ratio: 1 / 1;
+  transform: scaleX(-1); /* Mirror effect */
+  -webkit-transform: scaleX(-1); /* Safari support */
+  /* Reduce brightness to prevent overexposure/bloom */
+  filter: brightness(0.75) contrast(1.1);
+  -webkit-filter: brightness(0.75) contrast(1.1);
+}
+
+.qr-reader-wrapper :deep(canvas) {
+  display: none !important;
+}
+
+.qr-reader-wrapper :deep(#qr-reader__dashboard) {
+  display: none !important;
+}
+
+.qr-reader-wrapper :deep(#qr-reader__scan_region) {
+  border-radius: 16px;
+  border: 3px solid rgba(21, 101, 192, 0.8) !important;
+  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.4) !important;
+  position: relative;
+}
+
+.qr-reader-wrapper :deep(#qr-reader__scan_region::before) {
+  content: '';
+  position: absolute;
+  top: -3px;
+  left: -3px;
+  right: -3px;
+  bottom: -3px;
+  border: 3px solid rgba(21, 101, 192, 0.8);
+  border-radius: 16px;
+  animation: pulse-border 2s ease-in-out infinite;
+}
+
+@keyframes pulse-border {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.7;
+    transform: scale(1.02);
+  }
+}
+
+.qr-reader-wrapper :deep(#qr-reader__scan_region video) {
+  border-radius: 16px;
+  width: 100% !important;
+  height: 100% !important;
+  aspect-ratio: 1 / 1;
+  object-fit: cover;
+  transform: scaleX(-1); /* Mirror effect */
+  -webkit-transform: scaleX(-1); /* Safari support */
+  /* Reduce brightness to prevent overexposure/bloom */
+  filter: brightness(0.75) contrast(1.1);
+  -webkit-filter: brightness(0.75) contrast(1.1);
+}
+
+.scanner-status {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 6px;
+  font-size: 12px;
+}
+
+.scanner-instruction {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 12px;
+  padding: 10px 12px;
+  background: linear-gradient(135deg, rgba(21, 101, 192, 0.1) 0%, rgba(13, 71, 161, 0.1) 100%);
+  border-radius: 10px;
+  color: #1565C0;
+  font-weight: 500;
+  font-size: 12px;
+  text-align: center;
+  border: 1px solid rgba(21, 101, 192, 0.2);
+}
+
+.scanner-loading-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.7);
+  border-radius: 16px;
+  z-index: 10;
+}
+
+.scanner-overlay {
+  position: absolute;
+  width: 80%;
+  height: 80%;
+}
+
+.corner {
+  position: absolute;
+  width: 40px;
+  height: 40px;
+  border: 3px solid #1565C0;
+}
+
+.corner-tl {
+  top: 0;
+  left: 0;
+  border-right: none;
+  border-bottom: none;
+  border-radius: 8px 0 0 0;
+}
+
+.corner-tr {
+  top: 0;
+  right: 0;
+  border-left: none;
+  border-bottom: none;
+  border-radius: 0 8px 0 0;
+}
+
+.corner-bl {
+  bottom: 0;
+  left: 0;
+  border-right: none;
+  border-top: none;
+  border-radius: 0 0 0 8px;
+}
+
+.corner-br {
+  bottom: 0;
+  right: 0;
+  border-left: none;
+  border-top: none;
+  border-radius: 0 0 8px 0;
+}
+
+.scan-line {
+  position: absolute;
+  width: 100%;
+  height: 2px;
+  background: linear-gradient(90deg, transparent, #1565C0, transparent);
+  top: 0;
+  animation: scan 2s linear infinite;
+  box-shadow: 0 0 10px #1565C0;
+}
+
+@keyframes scan {
+  0% { top: 0; }
+  100% { top: 100%; }
+}
+
+.qr-icon {
+  position: relative;
+  z-index: 1;
+  animation: breathe 2s ease-in-out infinite;
+}
+
+@keyframes breathe {
+  0%, 100% { opacity: 0.6; }
+  50% { opacity: 1; }
+}
+
+/* Modern Buttons */
+.btn-primary-modern {
+  background: linear-gradient(135deg, #1565C0 0%, #0D47A1 100%) !important;
+  color: white !important;
+  font-weight: 600;
+  text-transform: none;
+  letter-spacing: 0.3px;
+  border-radius: 12px !important;
+  padding: 14px 28px !important;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 4px 16px rgba(21, 101, 192, 0.3) !important;
+}
+
+.btn-primary-modern:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(21, 101, 192, 0.4) !important;
+}
+
+.btn-primary-modern:active {
+  transform: translateY(0);
+}
+
+.btn-primary-modern:disabled {
+  opacity: 0.5;
+  transform: none !important;
+}
+
+.btn-stop-modern {
+  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
+  color: white !important;
+  font-weight: 600;
+  text-transform: none;
+  letter-spacing: 0.3px;
+  border-radius: 12px !important;
+  padding: 14px 28px !important;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3) !important;
+}
+
+.btn-stop-modern:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(239, 68, 68, 0.4) !important;
+}
+
+.action-buttons {
+  margin-top: 20px;
+  display: flex;
+  justify-content: center;
+}
+
+.btn-centered {
+  width: auto !important;
+  min-width: 240px !important;
+  max-width: 320px !important;
+  margin: 0 auto !important;
+  display: block !important;
+}
+
+.btn-centered-small {
+  width: auto !important;
+  min-width: 180px !important;
+  margin: 0 auto;
+  display: block;
+}
+
+.btn-test-camera {
+  border-color: #1565C0 !important;
+  color: #1565C0 !important;
+}
+
+.btn-test-camera :deep(.v-btn__content) {
+  color: #1565C0 !important;
+}
+
+.btn-test-camera :deep(.v-icon) {
+  color: #1565C0 !important;
+  opacity: 1 !important;
+}
+
+/* Modern Inputs */
+.input-modern :deep(.v-field) {
+  border-radius: 12px;
+  font-size: 15px;
+  background: #fafafa;
+  border: 1.5px solid #e5e7eb;
+  transition: all 0.3s ease;
+}
+
+.input-modern :deep(.v-field--focused) {
+  background: white;
+  border-color: #1565C0;
+  box-shadow: 0 0 0 4px rgba(21, 101, 192, 0.1);
+}
+
+.input-modern :deep(.v-field__input) {
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+
+.input-modern :deep(.v-label) {
+  font-weight: 500;
+  color: #6b7280;
+}
+
+.quick-actions {
+  margin-top: 16px;
+  padding-top: 16px;
+  border-top: 1px solid #e5e7eb;
+}
+
+.info-card {
+  display: flex;
+  justify-content: center;
+}
+
+.info-alert-centered {
+  width: 100%;
+}
+
+.info-alert-centered :deep(.v-alert__content) {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  width: 100% !important;
+}
+
+.quick-actions .v-btn {
+  transition: all 0.3s ease;
+  border-radius: 12px !important;
+  border: 1.5px solid #e5e7eb !important;
+}
+
+.quick-actions .v-btn:hover {
+  transform: translateY(-2px);
+  border-color: #1565C0 !important;
+  box-shadow: 0 4px 12px rgba(21, 101, 192, 0.15);
+}
+
+.quick-actions .v-btn :deep(.v-icon) {
+  opacity: 1 !important;
+  color: inherit !important;
+}
+
+.quick-actions .v-btn[color="primary"] {
+  color: #1565C0 !important;
+  border-color: #1565C0 !important;
+}
+
+.quick-actions .v-btn[color="primary"] :deep(.v-icon) {
+  color: #1565C0 !important;
+}
+
+.qr-code-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 16px;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+}
+
+.qr-code-container :deep(canvas) {
+  border-radius: 8px;
+}
+
+.qr-display {
+  animation: slideUp 0.5s ease-out;
+}
+
+.blur-dialog :deep(.v-overlay__scrim) {
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+}
+
+.dialog-card {
+  overflow: hidden;
+  animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+@keyframes popIn {
+  0% {
+    opacity: 0;
+    transform: scale(0.8) translateY(20px);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+.dialog-header {
+  position: relative;
+  overflow: hidden;
+}
+
+.dialog-header::before {
+  content: '';
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
+  animation: rotate 10s linear infinite;
+}
+
+@keyframes rotate {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.icon-wrapper {
+  display: inline-block;
+  animation: bounceIn 0.6s ease-out 0.2s both;
+}
+
+@keyframes bounceIn {
+  0% {
+    opacity: 0;
+    transform: scale(0.3);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+  70% {
+    transform: scale(0.9);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.dialog-icon {
+  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));
+}
+
+.success-header {
+  background: linear-gradient(135deg, #66BB6A 0%, #43A047 100%);
+}
+
+.warning-header {
+  background: linear-gradient(135deg, #FFA726 0%, #FB8C00 100%);
+}
+
+.error-header {
+  background: linear-gradient(135deg, #EF5350 0%, #E53935 100%);
+}
+
+.icon-bg-error {
+  background: linear-gradient(135deg, #EF5350 0%, #E53935 100%);
+}
+
+.dialog-button {
+  text-transform: none;
+  letter-spacing: 0.5px;
+  font-weight: 600;
+  transition: all 0.3s ease;
+}
+
+.dialog-button:hover {
+  transform: translateY(-2px);
+}
+
+/* Patient Info Card Styling */
+.patient-info-card {
+  background: rgba(250, 250, 250, 0.8) !important;
+  border-color: rgba(0, 0, 0, 0.08) !important;
+}
+
+.patient-info-label {
+  color: #9e9e9e !important;
+  font-weight: 500;
+  opacity: 0.9;
+}
+
+.patient-info-value {
+  color: #757575 !important;
+  font-weight: 500 !important;
+  opacity: 0.85;
+}
+
+.patient-info-icon {
+  opacity: 0.7;
+}
+
+/* Stats Footer Modern */
+.stats-footer-modern {
+  animation: slideUp 0.5s ease-out 0.3s both;
+}
+
+@keyframes slideUp {
+  from { 
+    opacity: 0; 
+    transform: translateY(10px); 
+  }
+  to { 
+    opacity: 1; 
+    transform: translateY(0); 
+  }
+}
+
+.stat-card-modern {
+  background: white;
+  border-radius: 12px;
+  padding: 16px 12px;
+  text-align: center;
+  border: 1px solid #e5e7eb;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+}
+
+.stat-card-modern::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: linear-gradient(90deg, #1565C0 0%, #0D47A1 100%);
+  transform: scaleX(0);
+  transition: transform 0.3s ease;
+}
+
+.stat-card-modern:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
+  border-color: #1565C0;
+}
+
+.stat-card-modern:hover::before {
+  transform: scaleX(1);
+}
+
+.stat-icon-modern {
+  margin-bottom: 12px;
+  display: inline-flex;
+  padding: 8px;
+  background: #e3f2fd;
+  border-radius: 10px;
+}
+
+.stat-value {
+  font-size: 20px;
+  font-weight: 700;
+  color: #1a1a1a;
+  margin-bottom: 4px;
+  letter-spacing: -0.5px;
+}
+
+.stat-label {
+  font-size: 11px;
+  color: #6b7280;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.custom-snackbar {
+  margin-bottom: 16px;
+  margin-right: 16px;
+}
+
+.custom-snackbar :deep(.v-snackbar__wrapper) {
+  min-width: 300px;
+}
+
+/* History Dialog Styles */
+.history-list {
+  max-height: 500px;
+  overflow-y: auto;
+  padding-right: 8px;
+}
+
+.history-list::-webkit-scrollbar {
+  width: 6px;
+}
+
+.history-list::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 10px;
+}
+
+.history-list::-webkit-scrollbar-thumb {
+  background: #888;
+  border-radius: 10px;
+}
+
+.history-list::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+
+.history-item {
+  transition: all 0.3s ease;
+  border-left: 4px solid transparent;
+}
+
+.history-item:hover {
+  transform: translateX(4px);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+}
+
+.history-success {
+  border-left-color: #4caf50;
+  background: rgba(76, 175, 80, 0.05);
+}
+
+.history-failed {
+  border-left-color: #f44336;
+  background: rgba(244, 67, 54, 0.05);
+}
+
+.history-pending {
+  border-left-color: #ff9800;
+  background: rgba(255, 152, 0, 0.05);
+}
+
+/* Mobile Optimization */
+@media (max-width: 600px) {
+  .v-container.no-scroll-container {
+    padding: 8px !important;
   }
   
-  /* Main Card dengan Glassmorphism */
   .main-card {
-    background: rgba(255, 255, 255, 0.95) !important;
-    backdrop-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    border: 1px solid rgba(255, 255, 255, 0.3);
-    border-radius: 24px !important;
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
-    overflow: hidden;
-    position: relative;
-    z-index: 1;
+    border-radius: 16px !important;
   }
   
-  /* Header Modern Minimalis */
   .header-modern {
-    background: linear-gradient(135deg, #1565C0 0%, #0D47A1 100%);
-    padding: 20px 24px 16px;
-    position: relative;
-    overflow: hidden;
+    padding: 6px 16px 4px !important;
   }
   
-  .header-modern::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
-    pointer-events: none;
+  .content-modern {
+    padding: 16px !important;
+    max-height: calc(100vh - 180px);
   }
   
   .header-content {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    flex-direction: column;
+    text-align: center;
     gap: 12px;
-    margin-bottom: 4px;
-  }
-  
-  .icon-circle {
-    width: 56px;
-    height: 56px;
-    border-radius: 50%;
-    background: rgba(255, 255, 255, 0.2);
-    backdrop-filter: blur(10px);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: 2px solid rgba(255, 255, 255, 0.3);
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
   }
   
   .header-text {
-    text-align: left;
-  }
-  
-  .title-modern {
-    font-size: 20px;
-    font-weight: 700;
-    color: white;
-    margin: 0;
-    letter-spacing: -0.5px;
-  }
-  
-  .subtitle-modern {
-    font-size: 13px;
-    color: rgba(255, 255, 255, 0.85);
-    margin: 2px 0 0;
-    font-weight: 400;
-  }
-  
-  /* Tabs Modern */
-  .tabs-modern {
-    position: relative;
-    z-index: 1;
-  }
-  
-  .tabs-modern :deep(.v-tab) {
-    text-transform: none;
-    font-weight: 500;
-    font-size: 13px;
-    letter-spacing: 0.2px;
-    color: rgba(255, 255, 255, 0.8);
-    min-width: auto;
-    padding: 0 16px;
-    transition: all 0.3s ease;
-  }
-  
-  .tabs-modern :deep(.v-tab--selected) {
-    color: #FB8C00 !important;
-    background: rgba(251, 140, 0, 0.2);
-    border-radius: 12px;
-    backdrop-filter: blur(10px);
-  }
-  
-  .tabs-modern :deep(.v-tab--selected .v-icon) {
-    color: #FB8C00 !important;
-  }
-  
-  .tabs-modern :deep(.v-tab--selected span) {
-    color: #FB8C00 !important;
-  }
-  
-  .tabs-modern :deep(.v-slider) {
-    display: none;
-  }
-  
-  .tab-modern {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-  }
-  
-  .tab-modern .v-icon {
-    font-size: 18px !important;
-  }
-  
-  /* Content Area */
-  .content-modern {
-    background: white;
-    max-height: calc(100vh - 200px);
-    overflow-y: auto;
-  }
-  
-  .content-modern::-webkit-scrollbar {
-    width: 4px;
-  }
-  
-  .content-modern::-webkit-scrollbar-track {
-    background: transparent;
-  }
-  
-  .content-modern::-webkit-scrollbar-thumb {
-    background: rgba(0, 0, 0, 0.2);
-    border-radius: 2px;
-  }
-  
-  .tab-content {
-    animation: fadeIn 0.4s ease-out;
-  }
-  
-  @keyframes fadeIn {
-    from { 
-      opacity: 0; 
-      transform: translateY(10px); 
-    }
-    to { 
-      opacity: 1; 
-      transform: translateY(0); 
-    }
-  }
-  
-  /* Status Header */
-  .status-header {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 12px;
-    padding: 16px;
-    background: linear-gradient(135deg, #f5f7fa 0%, #e3f2fd 100%);
-    border-radius: 12px;
-    border: 1px solid rgba(21, 101, 192, 0.1);
     text-align: center;
   }
   
-  .status-icon-wrapper {
+  .icon-circle {
     width: 40px;
     height: 40px;
-    border-radius: 10px;
-    background: white;
-    display: flex;
+  }
+  
+  .title-modern {
+    font-size: 16px;
+  }
+  
+  .subtitle-modern {
+    font-size: 11px;
+  }
+  
+  .content-modern {
+    padding: 20px 16px !important;
+  }
+  
+  .status-header {
+    padding: 16px;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-    flex-shrink: 0;
+    text-align: center;
+    gap: 12px;
+  }
+  
+  .status-icon-wrapper {
     margin: 0 auto;
   }
   
   .status-text {
-    width: 100%;
     text-align: center;
+    width: 100%;
   }
   
   .status-title {
     font-size: 16px;
-    font-weight: 600;
-    color: #1a1a1a;
-    margin: 0 0 4px;
-    letter-spacing: -0.3px;
-    text-align: center;
   }
   
   .status-subtitle {
     font-size: 13px;
-    color: #6b7280;
-    margin: 0;
-    line-height: 1.4;
-    text-align: center;
-  }
-  
-  /* QR Scanner Modern */
-  .qr-scanner-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin: 24px 0;
   }
   
   .qr-placeholder {
-    width: 100%;
-    max-width: 300px;
-    height: 300px;
-    background: linear-gradient(135deg, #f5f7fa 0%, #e3f2fd 100%);
-    border-radius: 16px;
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-    border: 2px dashed #1565C0;
-    box-shadow: 0 4px 20px rgba(21, 101, 192, 0.1);
-    margin: 0 auto;
+    max-width: 100%;
+    height: 280px;
   }
   
   .qr-reader-container {
-    width: 100%;
-    max-width: 500px;
-    margin: 0 auto;
-    position: relative;
+    max-width: 100%;
   }
   
   .qr-reader-wrapper {
-    width: 100%;
-    aspect-ratio: 1 / 1;
+    min-height: 300px;
+    max-height: 70vh;
     border-radius: 16px;
-    overflow: hidden;
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
-    background: #000;
-    position: relative;
-    max-width: 500px;
-    max-height: 500px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: 2px solid rgba(21, 101, 192, 0.2);
-    margin: 0 auto;
   }
   
   .qr-reader-wrapper :deep(video) {
-    width: 100% !important;
-    height: 100% !important;
-    border-radius: 16px;
-    display: block !important;
-    object-fit: cover;
-    background: #000;
-    aspect-ratio: 1 / 1;
-  }
-  
-  .qr-reader-wrapper :deep(canvas) {
-    display: none !important;
-  }
-  
-  .qr-reader-wrapper :deep(#qr-reader__dashboard) {
-    display: none !important;
-  }
-  
-  .qr-reader-wrapper :deep(#qr-reader__scan_region) {
-    border-radius: 16px;
-    border: 3px solid rgba(21, 101, 192, 0.8) !important;
-    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.4) !important;
-    position: relative;
-  }
-  
-  .qr-reader-wrapper :deep(#qr-reader__scan_region::before) {
-    content: '';
-    position: absolute;
-    top: -3px;
-    left: -3px;
-    right: -3px;
-    bottom: -3px;
-    border: 3px solid rgba(21, 101, 192, 0.8);
-    border-radius: 16px;
-    animation: pulse-border 2s ease-in-out infinite;
-  }
-  
-  @keyframes pulse-border {
-    0%, 100% {
-      opacity: 1;
-      transform: scale(1);
-    }
-    50% {
-      opacity: 0.7;
-      transform: scale(1.02);
-    }
-  }
-  
-  .qr-reader-wrapper :deep(#qr-reader__scan_region video) {
-    border-radius: 16px;
-    width: 100% !important;
-    height: 100% !important;
-    aspect-ratio: 1 / 1;
-    object-fit: cover;
-  }
-  
-  .scanner-status {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-bottom: 6px;
-    font-size: 12px;
+    max-height: 70vh;
+    object-fit: contain;
+    transform: scaleX(-1); /* Mirror effect */
+    -webkit-transform: scaleX(-1); /* Safari support */
+    /* Reduce brightness to prevent overexposure/bloom */
+    filter: brightness(0.75) contrast(1.1);
+    -webkit-filter: brightness(0.75) contrast(1.1);
   }
   
   .scanner-instruction {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-top: 12px;
-    padding: 10px 12px;
-    background: linear-gradient(135deg, rgba(21, 101, 192, 0.1) 0%, rgba(13, 71, 161, 0.1) 100%);
-    border-radius: 10px;
-    color: #1565C0;
-    font-weight: 500;
     font-size: 12px;
-    text-align: center;
-    border: 1px solid rgba(21, 101, 192, 0.2);
+    padding: 12px;
   }
   
-  .scanner-loading-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    background: rgba(0, 0, 0, 0.7);
-    border-radius: 16px;
-    z-index: 10;
-  }
-  
-  .scanner-overlay {
-    position: absolute;
-    width: 80%;
-    height: 80%;
-  }
-  
-  .corner {
-    position: absolute;
-    width: 40px;
-    height: 40px;
-    border: 3px solid #1565C0;
-  }
-  
-  .corner-tl {
-    top: 0;
-    left: 0;
-    border-right: none;
-    border-bottom: none;
-    border-radius: 8px 0 0 0;
-  }
-  
-  .corner-tr {
-    top: 0;
-    right: 0;
-    border-left: none;
-    border-bottom: none;
-    border-radius: 0 8px 0 0;
-  }
-  
-  .corner-bl {
-    bottom: 0;
-    left: 0;
-    border-right: none;
-    border-top: none;
-    border-radius: 0 0 0 8px;
-  }
-  
-  .corner-br {
-    bottom: 0;
-    right: 0;
-    border-left: none;
-    border-top: none;
-    border-radius: 0 0 8px 0;
-  }
-  
-  .scan-line {
-    position: absolute;
-    width: 100%;
-    height: 2px;
-    background: linear-gradient(90deg, transparent, #1565C0, transparent);
-    top: 0;
-    animation: scan 2s linear infinite;
-    box-shadow: 0 0 10px #1565C0;
-  }
-  
-  @keyframes scan {
-    0% { top: 0; }
-    100% { top: 100%; }
-  }
-  
-  .qr-icon {
-    position: relative;
-    z-index: 1;
-    animation: breathe 2s ease-in-out infinite;
-  }
-  
-  @keyframes breathe {
-    0%, 100% { opacity: 0.6; }
-    50% { opacity: 1; }
-  }
-  
-  /* Modern Buttons */
-  .btn-primary-modern {
-    background: linear-gradient(135deg, #1565C0 0%, #0D47A1 100%) !important;
-    color: white !important;
-    font-weight: 600;
-    text-transform: none;
-    letter-spacing: 0.3px;
-    border-radius: 12px !important;
-    padding: 14px 28px !important;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    box-shadow: 0 4px 16px rgba(21, 101, 192, 0.3) !important;
-  }
-  
-  .btn-primary-modern:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 8px 24px rgba(21, 101, 192, 0.4) !important;
-  }
-  
-  .btn-primary-modern:active {
-    transform: translateY(0);
-  }
-  
-  .btn-primary-modern:disabled {
-    opacity: 0.5;
-    transform: none !important;
-  }
-  
-  .btn-stop-modern {
-    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
-    color: white !important;
-    font-weight: 600;
-    text-transform: none;
-    letter-spacing: 0.3px;
-    border-radius: 12px !important;
-    padding: 14px 28px !important;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3) !important;
-  }
-  
-  .btn-stop-modern:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 8px 24px rgba(239, 68, 68, 0.4) !important;
-  }
-  
-  .action-buttons {
-    margin-top: 20px;
-    display: flex;
-    justify-content: center;
-  }
-  
-  .btn-centered {
-    width: auto !important;
-    min-width: 240px !important;
-    max-width: 320px !important;
-    margin: 0 auto !important;
-    display: block !important;
-  }
-  
-  .btn-centered-small {
-    width: auto !important;
-    min-width: 180px !important;
-    margin: 0 auto;
-    display: block;
-  }
-  
-  .btn-test-camera {
-    border-color: #1565C0 !important;
-    color: #1565C0 !important;
-  }
-  
-  .btn-test-camera :deep(.v-btn__content) {
-    color: #1565C0 !important;
-  }
-  
-  .btn-test-camera :deep(.v-icon) {
-    color: #1565C0 !important;
-    opacity: 1 !important;
-  }
-  
-  /* Modern Inputs */
-  .input-modern :deep(.v-field) {
-    border-radius: 12px;
-    font-size: 15px;
-    background: #fafafa;
-    border: 1.5px solid #e5e7eb;
-    transition: all 0.3s ease;
-  }
-  
-  .input-modern :deep(.v-field--focused) {
-    background: white;
-    border-color: #1565C0;
-    box-shadow: 0 0 0 4px rgba(21, 101, 192, 0.1);
-  }
-  
-  .input-modern :deep(.v-field__input) {
-    padding-top: 12px;
-    padding-bottom: 12px;
-  }
-  
-  .input-modern :deep(.v-label) {
-    font-weight: 500;
-    color: #6b7280;
-  }
-  
-  .quick-actions {
-    margin-top: 16px;
-    padding-top: 16px;
-    border-top: 1px solid #e5e7eb;
-  }
-  
-  .info-card {
-    display: flex;
-    justify-content: center;
-  }
-  
-  .info-alert-centered {
-    width: 100%;
-  }
-  
-  .info-alert-centered :deep(.v-alert__content) {
-    display: flex !important;
-    align-items: center !important;
-    justify-content: center !important;
-    width: 100% !important;
-  }
-  
-  .quick-actions .v-btn {
-    transition: all 0.3s ease;
-    border-radius: 12px !important;
-    border: 1.5px solid #e5e7eb !important;
-  }
-  
-  .quick-actions .v-btn:hover {
-    transform: translateY(-2px);
-    border-color: #1565C0 !important;
-    box-shadow: 0 4px 12px rgba(21, 101, 192, 0.15);
-  }
-  
-  .quick-actions .v-btn :deep(.v-icon) {
-    opacity: 1 !important;
-    color: inherit !important;
-  }
-  
-  .quick-actions .v-btn[color="primary"] {
-    color: #1565C0 !important;
-    border-color: #1565C0 !important;
-  }
-  
-  .quick-actions .v-btn[color="primary"] :deep(.v-icon) {
-    color: #1565C0 !important;
-  }
-  
-  .qr-code-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 16px;
-    background: white;
-    border-radius: 12px;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
-  }
-  
-  .qr-code-container :deep(canvas) {
-    border-radius: 8px;
-  }
-  
-  .qr-display {
-    animation: slideUp 0.5s ease-out;
-  }
-  
-  .blur-dialog :deep(.v-overlay__scrim) {
-    backdrop-filter: blur(8px);
-    -webkit-backdrop-filter: blur(8px);
-  }
-  
-  .dialog-card {
-    overflow: hidden;
-    animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-  }
-  
-  @keyframes popIn {
-    0% {
-      opacity: 0;
-      transform: scale(0.8) translateY(20px);
-    }
-    100% {
-      opacity: 1;
-      transform: scale(1) translateY(0);
-    }
-  }
-  
-  .dialog-header {
-    position: relative;
-    overflow: hidden;
-  }
-  
-  .dialog-header::before {
-    content: '';
-    position: absolute;
-    top: -50%;
-    left: -50%;
-    width: 200%;
-    height: 200%;
-    background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
-    animation: rotate 10s linear infinite;
-  }
-  
-  @keyframes rotate {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-  }
-  
-  .icon-wrapper {
-    display: inline-block;
-    animation: bounceIn 0.6s ease-out 0.2s both;
-  }
-  
-  @keyframes bounceIn {
-    0% {
-      opacity: 0;
-      transform: scale(0.3);
-    }
-    50% {
-      transform: scale(1.05);
-    }
-    70% {
-      transform: scale(0.9);
-    }
-    100% {
-      opacity: 1;
-      transform: scale(1);
-    }
-  }
-  
-  .dialog-icon {
-    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));
-  }
-  
-  .success-header {
-    background: linear-gradient(135deg, #66BB6A 0%, #43A047 100%);
-  }
-  
-  .warning-header {
-    background: linear-gradient(135deg, #FFA726 0%, #FB8C00 100%);
-  }
-  
-  .error-header {
-    background: linear-gradient(135deg, #EF5350 0%, #E53935 100%);
-  }
-  
-  .icon-bg-error {
-    background: linear-gradient(135deg, #EF5350 0%, #E53935 100%);
-  }
-  
-  .dialog-button {
-    text-transform: none;
-    letter-spacing: 0.5px;
-    font-weight: 600;
-    transition: all 0.3s ease;
-  }
-  
-  .dialog-button:hover {
-    transform: translateY(-2px);
-  }
-  
-  /* Patient Info Card Styling */
-  .patient-info-card {
-    background: rgba(250, 250, 250, 0.8) !important;
-    border-color: rgba(0, 0, 0, 0.08) !important;
-  }
-  
-  .patient-info-label {
-    color: #9e9e9e !important;
-    font-weight: 500;
-    opacity: 0.9;
-  }
-  
-  .patient-info-value {
-    color: #757575 !important;
-    font-weight: 500 !important;
-    opacity: 0.85;
-  }
-  
-  .patient-info-icon {
-    opacity: 0.7;
-  }
-  
-  /* Stats Footer Modern */
   .stats-footer-modern {
-    animation: slideUp 0.5s ease-out 0.3s both;
-  }
-  
-  @keyframes slideUp {
-    from { 
-      opacity: 0; 
-      transform: translateY(10px); 
-    }
-    to { 
-      opacity: 1; 
-      transform: translateY(0); 
-    }
+    margin-top: 8px;
   }
   
   .stat-card-modern {
-    background: white;
-    border-radius: 12px;
-    padding: 16px 12px;
-    text-align: center;
-    border: 1px solid #e5e7eb;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    position: relative;
-    overflow: hidden;
-  }
-  
-  .stat-card-modern::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 3px;
-    background: linear-gradient(90deg, #1565C0 0%, #0D47A1 100%);
-    transform: scaleX(0);
-    transition: transform 0.3s ease;
-  }
-  
-  .stat-card-modern:hover {
-    transform: translateY(-4px);
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
-    border-color: #1565C0;
-  }
-  
-  .stat-card-modern:hover::before {
-    transform: scaleX(1);
-  }
-  
-  .stat-icon-modern {
-    margin-bottom: 12px;
-    display: inline-flex;
-    padding: 8px;
-    background: #e3f2fd;
-    border-radius: 10px;
+    padding: 12px 8px;
   }
   
   .stat-value {
-    font-size: 20px;
-    font-weight: 700;
-    color: #1a1a1a;
-    margin-bottom: 4px;
-    letter-spacing: -0.5px;
+    font-size: 18px;
   }
   
   .stat-label {
-    font-size: 11px;
-    color: #6b7280;
-    font-weight: 500;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
+    font-size: 10px;
   }
   
-  .custom-snackbar {
-    margin-bottom: 16px;
-    margin-right: 16px;
+  .stat-icon-modern {
+    margin-bottom: 8px;
+    padding: 6px;
+  }
+
+  .tabs-modern :deep(.v-tab) {
+    font-size: 12px;
+    padding: 0 12px;
   }
   
-  .custom-snackbar :deep(.v-snackbar__wrapper) {
-    min-width: 300px;
+  .tabs-modern :deep(.v-tab .v-icon) {
+    font-size: 18px;
   }
   
-  /* History Dialog Styles */
-  .history-list {
-    max-height: 500px;
-    overflow-y: auto;
-    padding-right: 8px;
+  .btn-primary-modern,
+  .btn-stop-modern {
+    padding: 12px 24px !important;
+    font-size: 14px;
+    min-width: 200px !important;
   }
   
-  .history-list::-webkit-scrollbar {
-    width: 6px;
+  .btn-centered {
+    min-width: 200px !important;
+    max-width: 280px !important;
   }
   
-  .history-list::-webkit-scrollbar-track {
-    background: #f1f1f1;
-    border-radius: 10px;
+  .qr-placeholder {
+    max-width: 100%;
+    height: 240px;
   }
   
-  .history-list::-webkit-scrollbar-thumb {
-    background: #888;
-    border-radius: 10px;
+  .qr-reader-wrapper {
+    min-height: 240px;
+    max-height: 280px;
+  }
+}
+
+/* Mobile Landscape */
+@media (max-width: 900px) and (orientation: landscape) {
+  .qr-reader-wrapper {
+    min-height: 50vh;
+    max-height: 60vh;
   }
   
-  .history-list::-webkit-scrollbar-thumb:hover {
-    background: #555;
+  .qr-reader-wrapper :deep(video) {
+    max-height: 60vh;
+    transform: scaleX(-1); /* Mirror effect */
+    -webkit-transform: scaleX(-1); /* Safari support */
+    /* Reduce brightness to prevent overexposure/bloom */
+    filter: brightness(0.75) contrast(1.1);
+    -webkit-filter: brightness(0.75) contrast(1.1);
   }
-  
-  .history-item {
-    transition: all 0.3s ease;
-    border-left: 4px solid transparent;
-  }
-  
-  .history-item:hover {
-    transform: translateX(4px);
-    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
-  }
-  
-  .history-success {
-    border-left-color: #4caf50;
-    background: rgba(76, 175, 80, 0.05);
-  }
-  
-  .history-failed {
-    border-left-color: #f44336;
-    background: rgba(244, 67, 54, 0.05);
-  }
-  
-  .history-pending {
-    border-left-color: #ff9800;
-    background: rgba(255, 152, 0, 0.05);
-  }
-  
-  /* Mobile Optimization */
-  @media (max-width: 600px) {
-    .v-container.no-scroll-container {
-      padding: 8px !important;
-    }
-    
-    .main-card {
-      border-radius: 16px !important;
-    }
-    
-    .header-modern {
-      padding: 16px 16px 12px !important;
-    }
-    
-    .content-modern {
-      padding: 16px !important;
-      max-height: calc(100vh - 180px);
-    }
-    
-    .header-content {
-      flex-direction: column;
-      text-align: center;
-      gap: 12px;
-    }
-    
-    .header-text {
-      text-align: center;
-    }
-    
-    .icon-circle {
-      width: 56px;
-      height: 56px;
-    }
-    
-    .title-modern {
-      font-size: 20px;
-    }
-    
-    .subtitle-modern {
-      font-size: 13px;
-    }
-    
-    .content-modern {
-      padding: 20px 16px !important;
-    }
-    
-    .status-header {
-      padding: 16px;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      text-align: center;
-      gap: 12px;
-    }
-    
-    .status-icon-wrapper {
-      margin: 0 auto;
-    }
-    
-    .status-text {
-      text-align: center;
-      width: 100%;
-    }
-    
-    .status-title {
-      font-size: 16px;
-    }
-    
-    .status-subtitle {
-      font-size: 13px;
-    }
-    
-    .qr-placeholder {
-      max-width: 100%;
-      height: 280px;
-    }
-    
-    .qr-reader-container {
-      max-width: 100%;
-    }
-    
-    .qr-reader-wrapper {
-      min-height: 300px;
-      max-height: 70vh;
-      border-radius: 16px;
-    }
-    
-    .qr-reader-wrapper :deep(video) {
-      max-height: 70vh;
-      object-fit: contain;
-    }
-    
-    .scanner-instruction {
-      font-size: 12px;
-      padding: 12px;
-    }
-    
-    .stats-footer-modern {
-      margin-top: 8px;
-    }
-    
-    .stat-card-modern {
-      padding: 12px 8px;
-    }
-    
-    .stat-value {
-      font-size: 18px;
-    }
-    
-    .stat-label {
-      font-size: 10px;
-    }
-    
-    .stat-icon-modern {
-      margin-bottom: 8px;
-      padding: 6px;
-    }
-  
-    .tabs-modern :deep(.v-tab) {
-      font-size: 12px;
-      padding: 0 12px;
-    }
-    
-    .tabs-modern :deep(.v-tab .v-icon) {
-      font-size: 18px;
-    }
-    
-    .btn-primary-modern,
-    .btn-stop-modern {
-      padding: 12px 24px !important;
-      font-size: 14px;
-      min-width: 200px !important;
-    }
-    
-    .btn-centered {
-      min-width: 200px !important;
-      max-width: 280px !important;
-    }
-    
-    .qr-placeholder {
-      max-width: 100%;
-      height: 240px;
-    }
-    
-    .qr-reader-wrapper {
-      min-height: 240px;
-      max-height: 280px;
-    }
-  }
-  
-  /* Mobile Landscape */
-  @media (max-width: 900px) and (orientation: landscape) {
-    .qr-reader-wrapper {
-      min-height: 50vh;
-      max-height: 60vh;
-    }
-    
-    .qr-reader-wrapper :deep(video) {
-      max-height: 60vh;
-    }
-  }
-  </style>
\ No newline at end of file
+}
+</style>
\ No newline at end of file
diff --git a/pages/CheckInPasien/checkIn.vue.backup.combined-layout b/pages/CheckInPasien/checkIn.vue.backup.combined-layout
deleted file mode 100644
index 2f72c74..0000000
--- a/pages/CheckInPasien/checkIn.vue.backup.combined-layout
+++ /dev/null
@@ -1,3386 +0,0 @@
-<template>
-    <v-app class="bg-modern">
-      <v-main class="no-overflow">
-        <v-container fluid class="no-scroll-container pa-2 pa-md-4">
-          <v-row align="start" justify="center" class="fill-height">
-            <v-col cols="12" sm="11" md="10" lg="8" xl="7" class="d-flex flex-column">
-              <!-- Main Card dengan Glassmorphism -->
-              <v-card class="main-card" elevation="0">
-                
-                <!-- Header Minimalis -->
-                <div class="header-modern">
-                  <div class="header-content">
-                    <div class="icon-circle">
-                      <v-icon size="36" color="white">mdi-hospital-building</v-icon>
-                    </div>
-                    <div class="header-text">
-                      <h1 class="title-modern">Check-in Pasien</h1>
-                      <p class="subtitle-modern">Sistem Antrean Rumah Sakit</p>
-                    </div>
-                  </div>
-                  
-                  <!-- Tabs Minimalis -->
-                  <v-tabs 
-                    v-model="tab" 
-                    align-tabs="center" 
-                    class="tabs-modern mt-3"
-                    bg-color="transparent"
-                    slider-color="#FB8C00"
-                    height="40"
-                  >
-                    <v-tab value="checkin" class="tab-modern">
-                      <v-icon size="20" class="mr-2">mdi-login</v-icon>
-                      <span>Check-in</span>
-                    </v-tab>
-                    <v-tab value="generate" class="tab-modern">
-                      <v-icon size="20" class="mr-2">mdi-qrcode</v-icon>
-                      <span>Generate QR</span>
-                    </v-tab>
-                  </v-tabs>
-                </div>
-  
-                <v-card-text class="content-modern pa-4 pa-md-6">
-                  <v-window v-model="tab">
-                    <!-- Tab Check-in (Combined Scan QR + Manual) -->
-                    <v-window-item value="checkin">
-                      <v-row class="checkin-layout">
-                        <!-- Left: Scan QR -->
-                        <v-col cols="12" md="6" class="checkin-left-col">
-                          <div class="tab-content">
-                            <!-- Status Header -->
-                            <div class="status-header mb-3">
-                              <div class="status-icon-wrapper">
-                                <v-icon :color="primaryColor" size="24">mdi-qrcode-scan</v-icon>
-                              </div>
-                              <div class="status-text">
-                                <h3 class="status-title">
-                                  {{ isScanning ? 'Arahkan Kamera ke QR Code' : 'Siap untuk Scan QR Code' }}
-                                </h3>
-                                <p class="status-subtitle">
-                                  {{ isScanning ? 'Pastikan QR code terlihat jelas dan tidak terpotong' : 'Klik tombol di bawah untuk memulai scan' }}
-                                </p>
-                              </div>
-                            </div>
-                            
-                            <!-- Camera Status Check -->
-                            <div v-if="cameraChecking" class="text-center mb-4">
-                              <v-progress-circular
-                                indeterminate
-                                :color="primaryColor"
-                                size="24"
-                                class="mr-2"
-                              ></v-progress-circular>
-                              <span class="text-body-2 text-grey">Memeriksa ketersediaan kamera...</span>
-                            </div>
-      
-                            <!-- Camera Not Available Warning -->
-                            <v-alert
-                              v-else-if="!hasCamera && !isScanning"
-                              type="warning"
-                              variant="tonal"
-                              class="mb-4"
-                            >
-                              <template v-slot:prepend>
-                                <v-icon>mdi-camera-off</v-icon>
-                              </template>
-                              <div>
-                                <p class="font-weight-bold mb-1">Kamera tidak terdeteksi</p>
-                                <p class="text-body-2 mb-0">
-                                  Perangkat Anda tidak memiliki kamera atau kamera tidak dapat diakses. 
-                                  Silakan gunakan input <strong>Manual</strong> di sebelah kanan.
-                                </p>
-                              </div>
-                            </v-alert>
-      
-                            <!-- QR Scanner Area dengan webcam -->
-                            <div class="qr-scanner-container mb-4">
-                              <div v-if="!isScanning" class="qr-placeholder">
-                                <div class="scanner-overlay">
-                                  <div class="corner corner-tl"></div>
-                                  <div class="corner corner-tr"></div>
-                                  <div class="corner corner-bl"></div>
-                                  <div class="corner corner-br"></div>
-                                  <div class="scan-line"></div>
-                                </div>
-                                <v-icon size="64" :color="primaryColor" class="qr-icon">mdi-qrcode-scan</v-icon>
-                              </div>
-                              <div v-else class="qr-reader-container">
-                                <div class="scanner-status mb-2">
-                                  <v-chip color="success" size="small" class="mr-2">
-                                    <v-icon start size="16">mdi-camera</v-icon>
-                                    Kamera Aktif
-                                  </v-chip>
-                                  <span class="text-caption text-grey">Preview kamera sedang berjalan</span>
-                                </div>
-                                <div id="qr-reader" class="qr-reader-wrapper">
-                                  <div class="scanner-loading-overlay" v-if="!cameraReady">
-                                    <v-progress-circular
-                                      indeterminate
-                                      color="white"
-                                      size="48"
-                                    ></v-progress-circular>
-                                    <p class="text-white mt-4">Memuat kamera...</p>
-                                  </div>
-                                </div>
-                                <div class="scanner-instruction">
-                                  <v-icon :color="primaryColor" size="20" class="mr-2">mdi-information</v-icon>
-                                  <span class="text-body-2">Arahkan kamera ke QR code. Pastikan QR code berada dalam kotak pemindaian.</span>
-                                </div>
-                              </div>
-                            </div>
-                            
-                            <!-- Action Button Minimalis -->
-                            <div class="action-buttons">
-                              <v-btn
-                                v-if="!isScanning"
-                                class="btn-primary-modern btn-centered"
-                                size="large"
-                                elevation="0"
-                                @click="startScanning"
-                                :disabled="!hasCamera && !cameraChecking"
-                                block
-                              >
-                                <v-icon start size="20">mdi-camera</v-icon>
-                                {{ hasCamera ? 'Mulai Scan QR' : 'Kamera Tidak Tersedia' }}
-                              </v-btn>
-                              <v-btn
-                                v-else
-                                class="btn-stop-modern btn-centered"
-                                size="large"
-                                elevation="0"
-                                @click="stopScanning"
-                                block
-                              >
-                                <v-icon start size="20">mdi-camera-off</v-icon>
-                                Stop Scan
-                              </v-btn>
-                            </div>
-      
-                            <!-- Info tambahan -->
-                            <div class="info-card mt-3">
-                              <v-alert
-                                type="info"
-                                variant="tonal"
-                                :color="primaryColor"
-                                class="text-body-2 info-alert-centered"
-                                density="compact"
-                              >
-                                <div class="d-flex align-center justify-center">
-                                  <v-icon size="16" class="mr-2">mdi-lightbulb-outline</v-icon>
-                                  <span style="font-size: 12px;">Tips: Pastikan pencahayaan cukup untuk hasil scan optimal</span>
-                                </div>
-                              </v-alert>
-                            </div>
-      
-                            <!-- Test Camera Button (Debug) -->
-                            <div class="test-camera-section mt-2 mb-2">
-                              <v-btn
-                                variant="outlined"
-                                color="primary"
-                                size="small"
-                                class="text-none btn-centered-small btn-test-camera"
-                                @click="testCamera"
-                                block
-                              >
-                                <v-icon start size="18" color="#1565C0">mdi-camera</v-icon>
-                                Test Kamera
-                              </v-btn>
-                              <p class="text-caption text-grey text-center mt-1" style="font-size: 11px;">
-                                Klik untuk menguji apakah browser dapat mengakses kamera
-                              </p>
-                            </div>
-      
-                            <!-- Quick Access Buttons -->
-                            <div class="quick-actions mt-4">
-                              <p class="text-caption text-grey text-center mb-3">Akses Cepat</p>
-                              <v-row dense>
-                                <v-col cols="12">
-                                  <v-btn
-                                    variant="outlined"
-                                    :color="primaryColor"
-                                    block
-                                    size="small"
-                                    class="text-none"
-                                    @click="openHistoryDialog"
-                                  >
-                                    <v-icon start size="18">mdi-history</v-icon>
-                                    Riwayat Check-in
-                                  </v-btn>
-                                </v-col>
-                                <v-col cols="12">
-                                  <v-btn
-                                    variant="outlined"
-                                    color="primary"
-                                    block
-                                    size="small"
-                                    class="text-none"
-                                    @click="openQRHistoryDialog"
-                                  >
-                                    <v-icon start size="18" color="#1565C0">mdi-qrcode-scan</v-icon>
-                                    Riwayat QR Scan
-                                  </v-btn>
-                                </v-col>
-                              </v-row>
-                            </div>
-                          </div>
-                        </v-col>
-  
-                        <!-- Right: Manual Input -->
-                        <v-col cols="12" md="6" class="checkin-right-col">
-                          <div class="tab-content">
-                            <!-- Status Header -->
-                            <div class="status-header mb-3">
-                              <div class="status-icon-wrapper">
-                                <v-icon :color="secondaryColor" size="24">mdi-keyboard</v-icon>
-                              </div>
-                              <div class="status-text">
-                                <h3 class="status-title">Input Manual</h3>
-                                <p class="status-subtitle">Masukkan nomor antrean atau ID pasien</p>
-                              </div>
-                            </div>
-      
-                            <v-form @submit.prevent="checkInManual" ref="manualForm">
-                              <v-text-field
-                                v-model="manualInput"
-                                label="Nomor Antrean / ID Pasien"
-                                placeholder="Contoh: P12345"
-                                prepend-inner-icon="mdi-account-card-details"
-                                variant="outlined"
-                                :color="primaryColor"
-                                class="input-modern mb-4"
-                                required
-                                :rules="[v => !!v || 'Field ini wajib diisi']"
-                                density="comfortable"
-                                hide-details="auto"
-                              >
-                                <template v-slot:append-inner>
-                                  <v-icon :color="manualInput ? 'success' : 'grey'" size="20">
-                                    {{ manualInput ? 'mdi-check-circle' : 'mdi-circle-outline' }}
-                                  </v-icon>
-                                </template>
-                              </v-text-field>
-      
-                              <v-btn
-                                class="btn-primary-modern btn-centered"
-                                size="large"
-                                type="submit"
-                                elevation="0"
-                                block
-                              >
-                                <v-icon start size="20">mdi-login</v-icon>
-                                Check-in Sekarang
-                              </v-btn>
-                            </v-form>
-      
-                            <!-- Quick Access Buttons -->
-                            <div class="quick-actions mt-4">
-                              <p class="text-caption text-grey text-center mb-3">Akses Cepat</p>
-                              <v-row dense>
-                                <v-col cols="12">
-                                  <v-btn
-                                    variant="outlined"
-                                    :color="primaryColor"
-                                    block
-                                    size="small"
-                                    class="text-none"
-                                    @click="openHistoryDialog"
-                                  >
-                                    <v-icon start size="18">mdi-history</v-icon>
-                                    Riwayat
-                                  </v-btn>
-                                </v-col>
-                              </v-row>
-                            </div>
-                          </div>
-                        </v-col>
-                      </v-row>
-                    </v-window-item>
-  
-                    <!-- Tab Generate QR -->
-                    <v-window-item value="generate">
-                      <div class="tab-content">
-                        <!-- Status Header -->
-                        <div class="status-header mb-3">
-                          <div class="status-icon-wrapper">
-                            <v-icon :color="primaryColor" size="24">mdi-qrcode</v-icon>
-                          </div>
-                          <div class="status-text">
-                            <h3 class="status-title">Generate QR Code untuk Testing</h3>
-                            <p class="status-subtitle">Buat QR code yang bisa Anda scan di tab "Scan QR"</p>
-                          </div>
-                        </div>
-  
-                        <!-- Quick Preset Buttons -->
-                        <div class="mb-3">
-                          <p class="text-caption text-grey text-center mb-2">Quick Test QR Codes:</p>
-                          <v-row dense>
-                            <v-col cols="6">
-                              <v-btn
-                                variant="outlined"
-                                color="success"
-                                size="small"
-                                @click="generateQuickQR('ALLOWED')"
-                                class="text-none"
-                                block
-                              >
-                                <v-icon start size="16">mdi-check-circle</v-icon>
-                                Test ALLOWED
-                              </v-btn>
-                            </v-col>
-                            <v-col cols="6">
-                              <v-btn
-                                variant="outlined"
-                                color="warning"
-                                size="small"
-                                @click="generateQuickQR('NOT_ALLOWED')"
-                                class="text-none"
-                                block
-                              >
-                                <v-icon start size="16">mdi-clock-alert</v-icon>
-                                Test NOT_ALLOWED
-                              </v-btn>
-                            </v-col>
-                          </v-row>
-                        </div>
-  
-                        <!-- Form Generate -->
-                        <v-form @submit.prevent="generateQRCode">
-                          <v-select
-                            v-model="selectedKlinik"
-                            label="Pilih Klinik/Poli"
-                            :items="klinikOptions"
-                            prepend-inner-icon="mdi-hospital-building"
-                            variant="outlined"
-                            :color="primaryColor"
-                            class="input-modern mb-3"
-                            density="comfortable"
-                            :rules="[v => !!v || 'Klinik/Poli harus dipilih']"
-                            hide-details="auto"
-                            required
-                          ></v-select>
-                          
-                          <v-text-field
-                            v-model="generatePatientId"
-                            label="ID Pasien"
-                            placeholder="Auto-generate: P-00001"
-                            prepend-inner-icon="mdi-identifier"
-                            variant="outlined"
-                            :color="primaryColor"
-                            class="input-modern mb-3"
-                            density="comfortable"
-                            readonly
-                            hint="ID Pasien akan di-generate secara otomatis secara sequential"
-                            persistent-hint
-                            hide-details="auto"
-                          >
-                            <template v-slot:append-inner>
-                              <v-btn
-                                icon
-                                size="small"
-                                variant="text"
-                                @click="generatePatientId = generateSequentialPatientId()"
-                                title="Generate ID Baru"
-                              >
-                                <v-icon size="18">mdi-refresh</v-icon>
-                              </v-btn>
-                            </template>
-                          </v-text-field>
-  
-                          <v-select
-                            v-model="generateStatus"
-                            label="Status Check-in"
-                            :items="statusOptions"
-                            prepend-inner-icon="mdi-shield-check"
-                            variant="outlined"
-                            :color="primaryColor"
-                            class="input-modern mb-4"
-                            density="comfortable"
-                            hide-details="auto"
-                          ></v-select>
-  
-                          <div class="d-flex justify-center">
-                            <v-btn
-                              class="btn-primary-modern btn-centered"
-                              size="large"
-                              type="submit"
-                              elevation="0"
-                              :disabled="!selectedKlinik"
-                            >
-                              <v-icon start size="20">mdi-qrcode-plus</v-icon>
-                              Generate QR Code
-                            </v-btn>
-                          </div>
-                        </v-form>
-  
-                        <!-- QR Code Display -->
-                        <div v-if="generatedQRData" class="qr-display mt-6">
-                          <v-card variant="outlined" class="pa-4">
-                            <div class="text-center">
-                              <p class="text-subtitle-2 text-grey mb-3">QR Code Anda:</p>
-                              <div id="qrcode" class="qr-code-container mb-4"></div>
-                              
-                              <v-chip :color="generateStatus === 'ALLOWED' ? 'success' : 'warning'" class="mb-3">
-                                <v-icon start>{{ generateStatus === 'ALLOWED' ? 'mdi-check' : 'mdi-clock-alert' }}</v-icon>
-                                {{ generateStatus === 'ALLOWED' ? 'Diizinkan Check-in' : 'Belum Diizinkan' }}
-                              </v-chip>
-  
-                              <p class="text-body-2 text-grey mb-4">
-                                Data: {{ generatedQRData }}
-                              </p>
-  
-                              <!-- Action Buttons -->
-                              <v-row dense>
-                                <v-col cols="4">
-                                  <v-btn
-                                    variant="outlined"
-                                    :color="primaryColor"
-                                    block
-                                    size="small"
-                                    @click="downloadQR"
-                                    class="text-none"
-                                  >
-                                    <v-icon start size="18">mdi-download</v-icon>
-                                    Download
-                                  </v-btn>
-                                </v-col>
-                                <v-col cols="4">
-                                  <v-btn
-                                    variant="outlined"
-                                    :color="primaryColor"
-                                    block
-                                    size="small"
-                                    @click="copyQRToClipboard"
-                                    class="text-none"
-                                  >
-                                    <v-icon start size="18">mdi-content-copy</v-icon>
-                                    Copy
-                                  </v-btn>
-                                </v-col>
-                                <v-col cols="4">
-                                  <v-btn
-                                    variant="outlined"
-                                    :color="primaryColor"
-                                    block
-                                    size="small"
-                                    @click="shareQR"
-                                    class="text-none"
-                                  >
-                                    <v-icon start size="18">mdi-share-variant</v-icon>
-                                    Share
-                                  </v-btn>
-                                </v-col>
-                              </v-row>
-                            </div>
-                          </v-card>
-  
-                          <!-- Instructions -->
-                          <v-alert
-                            type="success"
-                            variant="tonal"
-                            class="mt-4 text-body-2"
-                          >
-                            <template v-slot:prepend>
-                              <v-icon>mdi-information</v-icon>
-                            </template>
-                            <strong>Cara menggunakan untuk Testing:</strong>
-                            <ol class="ml-4 mt-2">
-                              <li>Gunakan tombol <strong>"Test ALLOWED"</strong> atau <strong>"Test NOT_ALLOWED"</strong> untuk generate QR cepat, atau isi form manual</li>
-                              <li>Klik <strong>"Download"</strong> untuk menyimpan QR code ke komputer</li>
-                              <li>Buka file QR code yang didownload (bisa di HP atau layar lain)</li>
-                              <li>Pindah ke tab <strong>"Scan QR"</strong> dan scan QR code tersebut</li>
-                              <li>Atau gunakan <strong>"Copy"</strong> untuk menyalin QR ke clipboard dan paste di aplikasi lain</li>
-                            </ol>
-                          </v-alert>
-                        </div>
-                      </div>
-                    </v-window-item>
-                  </v-window>
-                </v-card-text>
-              </v-card>
-  
-              <!-- Stats Footer Minimalis -->
-              <div class="stats-footer-modern mt-3">
-                <v-row dense>
-                  <v-col cols="4">
-                    <div class="stat-card-modern">
-                      <div class="stat-icon-modern">
-                        <v-icon :color="primaryColor" size="20">mdi-clock-outline</v-icon>
-                      </div>
-                      <div class="stat-value">{{ statsToday }}</div>
-                      <div class="stat-label">Hari Ini</div>
-                    </div>
-                  </v-col>
-                  <v-col cols="4">
-                    <div class="stat-card-modern">
-                      <div class="stat-icon-modern">
-                        <v-icon color="success" size="20">mdi-check-circle</v-icon>
-                      </div>
-                      <div class="stat-value">{{ statsCompleted }}</div>
-                      <div class="stat-label">Selesai</div>
-                    </div>
-                  </v-col>
-                  <v-col cols="4">
-                    <div class="stat-card-modern">
-                      <div class="stat-icon-modern">
-                        <v-icon :color="secondaryColor" size="20">mdi-account-group</v-icon>
-                      </div>
-                      <div class="stat-value">{{ statsWaiting }}</div>
-                      <div class="stat-label">Menunggu</div>
-                    </div>
-                  </v-col>
-                </v-row>
-              </div>
-            </v-col>
-          </v-row>
-        </v-container>
-      </v-main>
-      
-      <!-- Enhanced Dialog with Blur -->
-      <v-dialog 
-        v-model="infoDialog" 
-        max-width="500" 
-        persistent
-        transition="dialog-transition"
-        scrim="rgba(0, 0, 0, 0.5)"
-        class="blur-dialog"
-      >
-        <v-card class="rounded-xl dialog-card" elevation="24">
-          <div class="dialog-header text-center pa-8" :class="lastCheckInResult?.success && infoAction === 'checkin' ? 'success-header' : lastCheckInResult?.status === 'NOT_ALLOWED' ? 'warning-header' : 'error-header'">
-            <div class="decorative-circles">
-              <div class="circle circle-1"></div>
-              <div class="circle circle-2"></div>
-              <div class="circle circle-3"></div>
-            </div>
-            
-            <div class="icon-wrapper mb-4">
-              <div class="icon-bg" :class="lastCheckInResult?.success && infoAction === 'checkin' ? 'icon-bg-success' : lastCheckInResult?.status === 'NOT_ALLOWED' ? 'icon-bg-warning' : 'icon-bg-error'">
-                <v-icon size="64" color="white" class="dialog-icon">
-                  {{ lastCheckInResult?.success && infoAction === 'checkin' ? 'mdi-check-circle' : lastCheckInResult?.status === 'NOT_ALLOWED' ? 'mdi-alert-circle' : 'mdi-close-circle' }}
-                </v-icon>
-              </div>
-            </div>
-            
-            <h2 class="text-h4 font-weight-bold text-white mb-2">
-              {{ lastCheckInResult?.success && infoAction === 'checkin' 
-                ? 'Check-in Berhasil!' 
-                : lastCheckInResult?.status === 'NOT_ALLOWED'
-                ? 'Belum Diizinkan'
-                : 'Check-in Gagal' }}
-            </h2>
-            
-            <div class="status-badge mt-3">
-              <v-chip 
-                :color="lastCheckInResult?.success && infoAction === 'checkin' ? 'white' : 'white'" 
-                :text-color="lastCheckInResult?.success && infoAction === 'checkin' ? 'success' : lastCheckInResult?.status === 'NOT_ALLOWED' ? 'orange' : 'error'"
-                size="small"
-                class="font-weight-bold"
-              >
-                <v-icon start size="16">
-                  {{ lastCheckInResult?.success && infoAction === 'checkin' ? 'mdi-check' : lastCheckInResult?.status === 'NOT_ALLOWED' ? 'mdi-clock-alert' : 'mdi-close-circle' }}
-                </v-icon>
-                {{ lastCheckInResult?.success && infoAction === 'checkin' 
-                  ? 'Berhasil' 
-                  : lastCheckInResult?.status === 'NOT_ALLOWED'
-                  ? 'Menunggu'
-                  : 'Gagal' }}
-              </v-chip>
-            </div>
-          </div>
-          
-          <v-card-text class="pa-8">
-            <div class="message-container">
-              <div class="message-icon mb-4">
-                <v-icon :color="lastCheckInResult?.success && infoAction === 'checkin' ? 'success' : lastCheckInResult?.status === 'NOT_ALLOWED' ? 'orange' : 'error'" size="32">
-                  {{ lastCheckInResult?.success && infoAction === 'checkin' ? 'mdi-check-circle' : lastCheckInResult?.status === 'NOT_ALLOWED' ? 'mdi-clock-alert' : 'mdi-close-circle' }}
-                </v-icon>
-              </div>
-              
-              <div class="text-h6 font-weight-bold mb-3 text-center" style="white-space: pre-line;">{{ infoMessage }}</div>
-              
-              <v-divider class="my-4"></v-divider>
-              
-              <div v-if="lastCheckInResult" class="instruction-box pa-4 rounded-lg" :class="lastCheckInResult.success && infoAction === 'checkin' ? 'instruction-success' : 'instruction-warning'">
-                <div class="d-flex align-start">
-                  <v-icon :color="lastCheckInResult.success && infoAction === 'checkin' ? 'success' : 'orange'" class="mr-3 mt-1">
-                    {{ lastCheckInResult.success && infoAction === 'checkin' ? 'mdi-check-circle' : 'mdi-timer-sand' }}
-                  </v-icon>
-                  <div>
-                    <p class="text-body-1 font-weight-medium mb-1">
-                      {{ lastCheckInResult.success && infoAction === 'checkin' ? 'Status Check-in:' : 'Status:' }}
-                    </p>
-                    <p class="text-body-2 text-grey-darken-1">
-                      {{ lastCheckInResult.success && infoAction === 'checkin' 
-                        ? 'Check-in telah berhasil dilakukan. Pasien dapat melanjutkan ke tahap selanjutnya.' 
-                        : lastCheckInResult.status === 'NOT_ALLOWED'
-                        ? 'Mohon menunggu hingga antrean Anda dipanggil oleh petugas'
-                        : 'Proses check-in gagal. Silakan coba lagi atau hubungi petugas.' }}
-                    </p>
-                  </div>
-                </div>
-              </div>
-              
-              <!-- Patient Info Card -->
-              <v-card variant="outlined" class="mt-4 patient-info-card" color="grey-lighten-4">
-                <v-card-text class="py-3">
-                  <div class="d-flex justify-space-between align-center">
-                    <div class="d-flex align-center">
-                      <v-icon color="primary" class="mr-2 patient-info-icon">mdi-account-circle</v-icon>
-                      <div>
-                        <p class="text-caption patient-info-label mb-0">ID Pasien</p>
-                        <p class="text-body-1 patient-info-value mb-0">{{ scannedData?.split('|')[0] || 'N/A' }}</p>
-                      </div>
-                    </div>
-                    <div class="text-right">
-                      <p class="text-caption patient-info-label mb-0">Waktu Scan</p>
-                      <p class="text-body-2 patient-info-value mb-0">{{ new Date().toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' }) }}</p>
-                    </div>
-                  </div>
-                </v-card-text>
-              </v-card>
-            </div>
-          </v-card-text>
-          
-          <v-card-actions class="pa-6 pt-0">
-            <v-row dense>
-              <v-col v-if="infoAction === 'kembali'" cols="12">
-                <v-btn
-                  color="grey-darken-1"
-                  class="text-white font-weight-bold text-none dialog-button"
-                  size="x-large"
-                  block
-                  variant="flat"
-                  @click="handleInfoAction"
-                  elevation="0"
-                  prepend-icon="mdi-arrow-left"
-                >
-                  Kembali
-                </v-btn>
-              </v-col>
-              <template v-else>
-                <v-col cols="12">
-                  <v-btn
-                    :color="lastCheckInResult?.success && infoAction === 'checkin' ? 'success' : 'primary'"
-                    class="text-white font-weight-bold text-none dialog-button"
-                    size="x-large"
-                    block
-                    variant="flat"
-                    @click="handleInfoAction"
-                    elevation="4"
-                    :prepend-icon="lastCheckInResult?.success && infoAction === 'checkin' ? 'mdi-check' : 'mdi-close'"
-                  >
-                    {{ lastCheckInResult?.success && infoAction === 'checkin' ? 'Tutup' : 'Tutup' }}
-                  </v-btn>
-                </v-col>
-              </template>
-            </v-row>
-          </v-card-actions>
-        </v-card>
-      </v-dialog>
-      
-      <!-- Enhanced Snackbar -->
-      <v-snackbar
-        v-model="snackbar.show"
-        :color="snackbar.color"
-        :timeout="snackbar.timeout"
-        location="bottom right"
-        rounded="pill"
-        elevation="24"
-        class="custom-snackbar"
-      >
-        <div class="d-flex align-center">
-          <v-avatar :color="snackbar.color" size="32" class="mr-3">
-            <v-icon size="20" color="white">{{ snackbar.icon }}</v-icon>
-          </v-avatar>
-          <div>
-            <div class="font-weight-bold">{{ snackbar.title }}</div>
-            <div class="text-body-2">{{ snackbar.message }}</div>
-          </div>
-        </div>
-      </v-snackbar>
-  
-      <!-- History Dialog -->
-      <v-dialog 
-        v-model="historyDialog" 
-        max-width="800" 
-        persistent
-        transition="dialog-transition"
-        scrim="rgba(0, 0, 0, 0.5)"
-        class="blur-dialog"
-      >
-        <v-card class="rounded-xl dialog-card" elevation="24">
-          <div class="dialog-header text-center pa-6" style="background: linear-gradient(135deg, #1565C0 0%, #0D47A1 100%);">
-            <h2 class="text-h5 font-weight-bold text-white mb-2">
-              <v-icon color="white" class="mr-2">mdi-history</v-icon>
-              Riwayat Check-in
-            </h2>
-            <p class="text-body-2 text-white opacity-90">Daftar check-in yang telah dilakukan</p>
-          </div>
-          
-          <v-card-text class="pa-6">
-            <!-- Filter dan Search -->
-            <div class="mb-4">
-              <v-row dense>
-                <v-col cols="12" md="6">
-                  <v-text-field
-                    v-model="historySearch"
-                    label="Cari ID Pasien atau Nomor Antrean"
-                    prepend-inner-icon="mdi-magnify"
-                    variant="outlined"
-                    density="comfortable"
-                    clearable
-                    hide-details
-                  ></v-text-field>
-                </v-col>
-                <v-col cols="12" md="3">
-                  <v-select
-                    v-model="historyStatusFilter"
-                    label="Filter Status"
-                    :items="historyStatusOptions"
-                    variant="outlined"
-                    density="comfortable"
-                    hide-details
-                    clearable
-                  ></v-select>
-                </v-col>
-                <v-col cols="12" md="3">
-                  <v-btn
-                    color="error"
-                    variant="outlined"
-                    block
-                    @click="clearHistory"
-                    :disabled="checkInHistory.length === 0"
-                  >
-                    <v-icon start>mdi-delete</v-icon>
-                    Hapus Semua
-                  </v-btn>
-                </v-col>
-              </v-row>
-            </div>
-  
-            <!-- History List -->
-            <div v-if="filteredHistory.length > 0" class="history-list">
-              <v-card
-                v-for="(item, index) in filteredHistory"
-                :key="index"
-                variant="outlined"
-                class="mb-3 history-item"
-                :class="getStatusClass(item.status)"
-              >
-                <v-card-text class="pa-4">
-                  <div class="d-flex justify-space-between align-start">
-                    <div class="flex-grow-1">
-                      <div class="d-flex align-center mb-2">
-                        <v-chip
-                          :color="getStatusColor(item.status)"
-                          size="small"
-                          class="mr-2"
-                        >
-                          <v-icon start size="16">{{ getStatusIcon(item.status) }}</v-icon>
-                          {{ getStatusText(item.status) }}
-                        </v-chip>
-                        <v-chip
-                          color="grey-lighten-1"
-                          size="x-small"
-                          variant="text"
-                        >
-                          {{ item.method }}
-                        </v-chip>
-                      </div>
-                      
-                      <div class="mb-2">
-                        <p class="text-body-1 font-weight-bold mb-1">
-                          <v-icon size="18" class="mr-1" :color="primaryColor">mdi-account-circle</v-icon>
-                          ID Pasien: {{ item.patientId }}
-                        </p>
-                        <p v-if="item.queueNumber" class="text-body-2 text-grey mb-1">
-                          <v-icon size="16" class="mr-1">mdi-ticket</v-icon>
-                          Nomor Antrean: {{ item.queueNumber }}
-                        </p>
-                      </div>
-                      
-                      <div class="d-flex flex-wrap gap-2">
-                        <v-chip
-                          size="x-small"
-                          variant="outlined"
-                          color="grey-darken-1"
-                        >
-                          <v-icon start size="14">mdi-clock-outline</v-icon>
-                          {{ formatDateTime(item.checkInTime) }}
-                        </v-chip>
-                        <v-chip
-                          v-if="item.checkInDate"
-                          size="x-small"
-                          variant="outlined"
-                          color="grey-darken-1"
-                        >
-                          <v-icon start size="14">mdi-calendar</v-icon>
-                          {{ formatDate(item.checkInDate) }}
-                        </v-chip>
-                      </div>
-                    </div>
-                    
-                    <div class="ml-4">
-                      <v-btn
-                        icon
-                        size="small"
-                        variant="text"
-                        color="error"
-                        @click="deleteHistoryItem(index)"
-                      >
-                        <v-icon>mdi-delete-outline</v-icon>
-                      </v-btn>
-                    </div>
-                  </div>
-                </v-card-text>
-              </v-card>
-            </div>
-  
-            <!-- Empty State -->
-            <div v-else class="text-center py-12">
-              <v-icon size="64" color="grey-lighten-1" class="mb-4">mdi-history</v-icon>
-              <p class="text-h6 text-grey mb-2">Belum ada riwayat check-in</p>
-              <p class="text-body-2 text-grey">Riwayat check-in akan muncul di sini setelah Anda melakukan check-in</p>
-            </div>
-          </v-card-text>
-          
-          <v-card-actions class="pa-6 pt-0">
-            <v-spacer></v-spacer>
-            <v-btn
-              color="primary"
-              class="text-white font-weight-bold text-none"
-              size="large"
-              variant="flat"
-              @click="historyDialog = false"
-              prepend-icon="mdi-close"
-            >
-              Tutup
-            </v-btn>
-          </v-card-actions>
-        </v-card>
-      </v-dialog>
-  
-      <!-- QR History Dialog -->
-      <v-dialog 
-        v-model="qrHistoryDialog" 
-        max-width="800" 
-        persistent
-        transition="dialog-transition"
-        scrim="rgba(0, 0, 0, 0.5)"
-        class="blur-dialog"
-      >
-        <v-card class="rounded-xl dialog-card" elevation="24">
-          <div class="dialog-header text-center pa-6" style="background: linear-gradient(135deg, #FB8C00 0%, #F57C00 100%);">
-            <h2 class="text-h5 font-weight-bold text-white mb-2">
-              <v-icon color="white" class="mr-2">mdi-qrcode-scan</v-icon>
-              Riwayat QR Scan
-            </h2>
-            <p class="text-body-2 text-white opacity-90">Daftar QR code yang telah di-scan</p>
-          </div>
-          
-          <v-card-text class="pa-6">
-            <!-- Filter dan Search -->
-            <div class="mb-4">
-              <v-row dense>
-                <v-col cols="12" md="9">
-                  <v-text-field
-                    v-model="historySearch"
-                    label="Cari Data QR Code"
-                    prepend-inner-icon="mdi-magnify"
-                    variant="outlined"
-                    density="comfortable"
-                    clearable
-                    hide-details
-                  ></v-text-field>
-                </v-col>
-                <v-col cols="12" md="3">
-                  <v-btn
-                    color="error"
-                    variant="outlined"
-                    block
-                    @click="clearQRHistory"
-                    :disabled="scannedQRHistory.length === 0"
-                  >
-                    <v-icon start>mdi-delete</v-icon>
-                    Hapus Semua
-                  </v-btn>
-                </v-col>
-              </v-row>
-            </div>
-  
-            <!-- QR History List -->
-            <div v-if="filteredQRHistory.length > 0" class="history-list">
-              <v-card
-                v-for="(item, index) in filteredQRHistory"
-                :key="index"
-                variant="outlined"
-                class="mb-3 history-item"
-              >
-                <v-card-text class="pa-4">
-                  <div class="d-flex justify-space-between align-start">
-                    <div class="flex-grow-1">
-                      <div class="mb-2">
-                        <p class="text-body-1 font-weight-bold mb-1">
-                          <v-icon size="18" class="mr-1" :color="primaryColor">mdi-qrcode</v-icon>
-                          Data QR: {{ item.data }}
-                        </p>
-                      </div>
-                      
-                      <div class="d-flex flex-wrap gap-2">
-                        <v-chip
-                          size="x-small"
-                          variant="outlined"
-                          color="grey-darken-1"
-                        >
-                          <v-icon start size="14">mdi-clock-outline</v-icon>
-                          {{ item.time }}
-                        </v-chip>
-                        <v-chip
-                          size="x-small"
-                          variant="outlined"
-                          color="grey-darken-1"
-                        >
-                          <v-icon start size="14">mdi-calendar</v-icon>
-                          {{ item.date }}
-                        </v-chip>
-                      </div>
-                    </div>
-                    
-                    <div class="ml-4">
-                      <v-btn
-                        icon
-                        size="small"
-                        variant="text"
-                        color="primary"
-                        @click="useQRData(item.data)"
-                      >
-                        <v-icon>mdi-refresh</v-icon>
-                      </v-btn>
-                      <v-btn
-                        icon
-                        size="small"
-                        variant="text"
-                        color="error"
-                        @click="deleteQRHistoryItem(index)"
-                      >
-                        <v-icon>mdi-delete-outline</v-icon>
-                      </v-btn>
-                    </div>
-                  </div>
-                </v-card-text>
-              </v-card>
-            </div>
-  
-            <!-- Empty State -->
-            <div v-else class="text-center py-12">
-              <v-icon size="64" color="grey-lighten-1" class="mb-4">mdi-qrcode-scan</v-icon>
-              <p class="text-h6 text-grey mb-2">Belum ada riwayat QR scan</p>
-              <p class="text-body-2 text-grey">Riwayat QR scan akan muncul di sini setelah Anda melakukan scan</p>
-            </div>
-          </v-card-text>
-          
-          <v-card-actions class="pa-6 pt-0">
-            <v-spacer></v-spacer>
-            <v-btn
-              color="primary"
-              class="text-white font-weight-bold text-none"
-              size="large"
-              variant="flat"
-              @click="qrHistoryDialog = false"
-              prepend-icon="mdi-close"
-            >
-              Tutup
-            </v-btn>
-          </v-card-actions>
-        </v-card>
-      </v-dialog>
-  
-    </v-app>
-  </template>
-  
-<script setup lang="ts">
-import { ref, computed, nextTick, onMounted, onUnmounted, watch } from 'vue';
-import { useMasterStore } from '@/stores/masterStore';
-
-definePageMeta({
-  middleware:['auth'],
-  layout: false,
-})
-
-const masterStore = useMasterStore();
-  
-  
-  // TypeScript declaration for QRCode
-  declare global {
-    interface Window {
-      QRCode: any;
-    }
-  }
-  
-  // --- DESAIN & TEMA ---
-  const primaryColor = ref('#1565C0');
-  const secondaryColor = ref('#FB8C00');
-  
-  // --- LOGIKA ---
-  const tab = ref('checkin');
-  const infoDialog = ref(false);
-  const infoMessage = ref('');
-  const infoAction = ref<'checkin' | 'kembali'>('kembali');
-  let autoCloseTimer: ReturnType<typeof setTimeout> | null = null; 
-  const scannedData = ref<string | null>(null);
-  const manualInput = ref('');
-  const manualForm = ref(null);
-  const lastCheckInResult = ref<{ success: boolean; patientId: string; status: string } | null>(null);
-  
-  // QR Scanner state
-  const isScanning = ref(false);
-  const hasCamera = ref(false);
-  const cameraChecking = ref(true);
-  const cameraReady = ref(false);
-  let html5QrCode: any = null;
-  const qrCodeId = 'qr-reader';
-  let lastScannedQR: string | null = null;
-  let lastScanTime: number = 0;
-  const SCAN_DEBOUNCE_MS = 2000; // 2 detik debounce untuk mencegah scan berulang
-  
-  // Daftar QR code yang sudah berhasil di-scan (untuk mencegah double antrian)
-  const SUCCESSFUL_SCANS_KEY = 'successful_qr_scans';
-  const successfulScans = ref<Set<string>>(new Set());
-  
-  // Detect mobile device
-  const isMobile = ref(false);
-  if (typeof window !== 'undefined') {
-    isMobile.value = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || 
-                     (window.innerWidth <= 768);
-  }
-  
-  // History Dialog
-  const historyDialog = ref(false);
-  const historySearch = ref('');
-  const historyStatusFilter = ref('');
-  const checkInHistory = ref<Array<{
-    patientId: string;
-    queueNumber?: string;
-    status: string;
-    checkInTime: string;
-    checkInDate: string;
-    method: string;
-  }>>([]);
-  
-  // QR History Dialog
-  const qrHistoryDialog = ref(false);
-  const scannedQRHistory = ref<Array<{
-    data: string;
-    timestamp: string;
-    date: string;
-    time: string;
-  }>>([]);
-  
-  const historyStatusOptions = [
-    { title: 'Berhasil', value: 'success' },
-    { title: 'Gagal', value: 'failed' },
-    { title: 'Pending', value: 'pending' }
-  ];
-  
-  // Generate QR variables
-  const generatePatientId = ref('');
-  const generateStatus = ref('ALLOWED');
-  const generatedQRData = ref('');
-  const selectedKlinik = ref('');
-  const statusOptions = [
-    { title: 'Diizinkan Check-in', value: 'ALLOWED' },
-    { title: 'Belum Diizinkan', value: 'NOT_ALLOWED' }
-  ];
-  
-  // Get klinik list for dropdown
-  const klinikOptions = computed(() => {
-    const klinikList = masterStore.klinikList.map((k: { kode: string; nama: string }) => ({
-      title: `${k.kode} - ${k.nama}`,
-      value: k.kode
-    }));
-    
-    // Tambahkan opsi "UM" (Umum) di awal list
-    return [
-      { title: 'UM - Umum', value: 'UM' },
-      ...klinikList
-    ];
-  });
-  
-  // Sequential Patient ID Management
-  const PATIENT_ID_STORAGE_KEY = 'checkin_patient_id_counter';
-  const QUEUE_NUMBER_STORAGE_KEY = 'checkin_queue_number_counters';
-  
-  // Generate sequential patient ID (P-00001, P-00002, etc.)
-  const generateSequentialPatientId = (): string => {
-    if (typeof window === 'undefined') return 'P-00001';
-    
-    let counter = parseInt(localStorage.getItem(PATIENT_ID_STORAGE_KEY) || '0', 10);
-    counter += 1;
-    localStorage.setItem(PATIENT_ID_STORAGE_KEY, counter.toString());
-    
-    return `P-${String(counter).padStart(5, '0')}`;
-  };
-  
-  // Generate sequential queue number based on klinik code (AN-0001, AS-0001, etc.)
-  const generateSequentialQueueNumber = (kodeKlinik: string): string => {
-    if (typeof window === 'undefined') return `${kodeKlinik}-0001`;
-    
-    const counters = JSON.parse(localStorage.getItem(QUEUE_NUMBER_STORAGE_KEY) || '{}');
-    let counter = parseInt(counters[kodeKlinik] || '0', 10);
-    counter += 1;
-    counters[kodeKlinik] = counter;
-    localStorage.setItem(QUEUE_NUMBER_STORAGE_KEY, JSON.stringify(counters));
-    
-    return `${kodeKlinik}-${String(counter).padStart(4, '0')}`;
-  };
-  
-  
-  const snackbar = ref({
-    show: false,
-    title: '',
-    message: '',
-    color: '',
-    icon: '',
-    timeout: 4000,
-  });
-  
-  // Check camera availability
-  const checkCameraAvailability = async () => {
-    cameraChecking.value = true;
-    hasCamera.value = false;
-    
-    // Check if browser supports mediaDevices
-    if (typeof navigator === 'undefined' || !navigator.mediaDevices) {
-      console.error('navigator.mediaDevices is not supported');
-      showSnackbar('Error', 'Browser tidak mendukung akses kamera. Pastikan menggunakan HTTPS atau localhost.', 'error', 'mdi-camera-off');
-      cameraChecking.value = false;
-      return;
-    }
-  
-    try {
-      // First, request permission by trying to get user media
-      // This is required for enumerateDevices to return device labels
-      const stream = await navigator.mediaDevices.getUserMedia({ video: true });
-      
-      // Stop the stream immediately after getting permission
-      stream.getTracks().forEach(track => track.stop());
-      
-      // Now enumerate devices (will have labels after permission granted)
-      const devices = await navigator.mediaDevices.enumerateDevices();
-      const videoDevices = devices.filter(device => device.kind === 'videoinput');
-      
-      hasCamera.value = videoDevices.length > 0;
-      
-      if (hasCamera.value) {
-        console.log(`Found ${videoDevices.length} camera(s):`, videoDevices.map(d => d.label || d.deviceId));
-      } else {
-        console.warn('No video input devices found');
-        showSnackbar('Warning', 'Tidak ada kamera yang terdeteksi', 'warning', 'mdi-camera-off');
-      }
-    } catch (err: any) {
-      console.error('Error checking camera:', err);
-      hasCamera.value = false;
-      
-      let errorMessage = 'Gagal mengakses kamera. ';
-      if (err.name === 'NotAllowedError' || err.name === 'PermissionDeniedError') {
-        errorMessage += 'Izin kamera ditolak. Mohon izinkan akses kamera di pengaturan browser.';
-      } else if (err.name === 'NotFoundError' || err.name === 'DevicesNotFoundError') {
-        errorMessage += 'Tidak ada kamera yang ditemukan.';
-      } else if (err.name === 'NotReadableError' || err.name === 'TrackStartError') {
-        errorMessage += 'Kamera sedang digunakan aplikasi lain.';
-      } else if (err.name === 'OverconstrainedError' || err.name === 'ConstraintNotSatisfiedError') {
-        errorMessage += 'Kamera tidak memenuhi persyaratan.';
-      } else {
-        errorMessage += `Error: ${err.message || err.name}`;
-      }
-      
-      showSnackbar('Error', errorMessage, 'error', 'mdi-camera-off');
-    } finally {
-      cameraChecking.value = false;
-    }
-  };
-  
-  // Test camera function for debugging
-  const testCamera = async () => {
-    try {
-      showSnackbar('Info', 'Menguji akses kamera...', 'info', 'mdi-camera');
-      
-      if (typeof navigator === 'undefined') {
-        showSnackbar('Error', 'navigator is undefined - pastikan di browser, bukan SSR', 'error', 'mdi-alert');
-        return;
-      }
-      
-      if (!navigator.mediaDevices) {
-        showSnackbar('Error', 'navigator.mediaDevices is undefined - pastikan menggunakan HTTPS atau localhost', 'error', 'mdi-alert');
-        return;
-      }
-      
-      if (!navigator.mediaDevices.getUserMedia) {
-        showSnackbar('Error', 'getUserMedia is not supported', 'error', 'mdi-alert');
-        return;
-      }
-      
-      const stream = await navigator.mediaDevices.getUserMedia({ 
-        video: {
-          facingMode: 'user',
-          width: { ideal: 1920, min: 1280 },
-          height: { ideal: 1080, min: 720 }
-        } 
-      });
-      
-      showSnackbar('Success', 'Kamera berhasil diakses!', 'success', 'mdi-check-circle');
-      
-      // Stop stream after 2 seconds
-      setTimeout(() => {
-        stream.getTracks().forEach(track => track.stop());
-      }, 2000);
-      
-    } catch (err: any) {
-      console.error('Test camera error:', err);
-      let errorMsg = `Error: ${err.name || 'Unknown'}`;
-      if (err.message) errorMsg += ` - ${err.message}`;
-      showSnackbar('Error', errorMsg, 'error', 'mdi-alert');
-    }
-  };
-  
-  // QR Scanner Functions
-  const startScanning = async () => {
-    // Check camera first
-    if (!hasCamera.value) {
-      await checkCameraAvailability();
-      if (!hasCamera.value) {
-        showSnackbar('Error', 'Kamera tidak tersedia. Silakan gunakan input manual atau pastikan kamera terhubung.', 'error', 'mdi-camera-off');
-        return;
-      }
-    }
-  
-    try {
-      // Set scanning state first to render the element
-      isScanning.value = true;
-      
-      // Wait for DOM to update and element to be rendered
-      await nextTick();
-      
-      // Wait a bit more to ensure element is fully rendered
-      await new Promise(resolve => setTimeout(resolve, 100));
-      
-      // Check if element exists
-      const qrElement = document.getElementById(qrCodeId);
-      if (!qrElement) {
-        console.error(`Element with id "${qrCodeId}" not found in DOM`);
-        isScanning.value = false;
-        showSnackbar('Error', 'Element scanner tidak ditemukan. Silakan refresh halaman.', 'error', 'mdi-alert');
-        return;
-      }
-      
-      // Dynamic import html5-qrcode
-      if (!html5QrCode) {
-        const { Html5Qrcode: Html5QrcodeClass } = await import('html5-qrcode');
-        html5QrCode = new Html5QrcodeClass(qrCodeId);
-        console.log('Html5Qrcode initialized');
-      }
-  
-      if (html5QrCode) {
-        cameraReady.value = false;
-        
-        // Konfigurasi kamera untuk mobile dan desktop
-        const cameraConfig = isMobile.value 
-          ? { facingMode: "environment" } // Mobile: gunakan kamera belakang
-          : { facingMode: "user" }; // Desktop: gunakan kamera depan (webcam)
-        
-        // Video constraints yang dioptimalkan untuk kualitas tinggi
-        const baseVideoConstraints = isMobile.value
-          ? {
-              facingMode: "environment",
-              width: { ideal: 1280, min: 640, max: 1920 },
-              height: { ideal: 720, min: 480, max: 1080 }
-            }
-          : {
-              facingMode: "user",
-              width: { ideal: 1920, min: 1280, max: 1920 },
-              height: { ideal: 1080, min: 720, max: 1080 }
-            };
-        
-        // Tambahkan advanced constraints hanya jika didukung
-        const videoConstraints: any = { ...baseVideoConstraints };
-        
-        console.log('Starting QR scanner with config:', {
-          isMobile: isMobile.value,
-          cameraConfig,
-          videoConstraints
-        });
-        
-        try {
-          await html5QrCode.start(
-            cameraConfig,
-            {
-              fps: isMobile.value ? 30 : 30, // FPS tinggi untuk deteksi lebih baik dan smooth
-              qrbox: function(viewfinderWidth: number, viewfinderHeight: number) {
-                // QR box dengan ukuran lebih besar untuk deteksi lebih mudah
-                const minEdgeSize = Math.min(viewfinderWidth, viewfinderHeight);
-                // Gunakan 80-90% dari viewfinder untuk area scanning yang lebih besar
-                const percentageSize = Math.floor(minEdgeSize * 0.80);
-                // Atau ukuran tetap yang lebih besar
-                const fixedSize = isMobile.value ? 250 : 250;
-                // Gunakan yang lebih besar antara percentage atau fixed
-                const qrboxSize = Math.max(percentageSize, fixedSize);
-                
-                // Pastikan tidak melebihi viewfinder
-                const finalSize = Math.min(qrboxSize, minEdgeSize * 0.80);
-                
-                console.log('QR Box size:', finalSize, 'Viewfinder:', viewfinderWidth, 'x', viewfinderHeight);
-                
-                return {
-                  width: Math.max(finalSize, 250), // Minimum 250px untuk deteksi lebih baik
-                  height: Math.max(finalSize, 250)
-                };
-              },
-              aspectRatio: 1.0,
-              disableFlip: false,
-              videoConstraints: videoConstraints,
-              rememberLastUsedCamera: true,
-              showTorchButtonIfSupported: true,
-              // Tambahkan opsi untuk meningkatkan deteksi
-              verbose: false // Set true untuk debugging
-            },
-            (decodedText: string, decodedResult: any) => {
-              // QR Code berhasil di-scan
-              console.log('✅ QR Code detected:', decodedText);
-              console.log('📊 Decoded result:', decodedResult);
-              
-              // Validasi dan proses QR code
-              if (decodedText && decodedText.trim() !== '') {
-                handleQRScanSuccess(decodedText);
-              } else {
-                console.warn('Empty QR code detected');
-              }
-            },
-            (errorMessage: string) => {
-              // Log error untuk debugging - hanya log error penting
-              // Error ini biasanya muncul terus menerus saat tidak ada QR code yang terdeteksi
-              // Jadi kita filter untuk menghindari spam console
-              if (errorMessage) {
-                // Filter out common non-critical errors
-                const isCriticalError = !errorMessage.includes('NotFoundException') && 
-                                       !errorMessage.includes('No QR') &&
-                                       !errorMessage.includes('QR code parse error') &&
-                                       !errorMessage.includes('QR code parse error, error') &&
-                                       !errorMessage.includes('QR code decode error');
-                
-                if (isCriticalError) {
-                  console.warn('QR Scanner warning:', errorMessage);
-                }
-              }
-            }
-          );
-          
-          // Set camera ready setelah sedikit delay untuk memastikan video sudah dimuat
-          setTimeout(() => {
-            cameraReady.value = true;
-            console.log('Camera ready, scanner is active');
-          }, 500);
-          
-          showSnackbar('Info', 'Scanner aktif. Arahkan kamera ke QR code dan pastikan pencahayaan cukup', 'info', 'mdi-camera');
-        } catch (cameraError: any) {
-          console.error('Camera error:', cameraError);
-          
-          // Jika kamera belakang tidak tersedia di mobile, coba kamera depan
-          if (isMobile.value && cameraError.name === 'NotFoundError') {
-            try {
-              console.log('Trying front camera as fallback...');
-              await html5QrCode.start(
-                { facingMode: "user" },
-                {
-                  fps: 30,
-                  qrbox: function(viewfinderWidth: number, viewfinderHeight: number) {
-                    const minEdgeSize = Math.min(viewfinderWidth, viewfinderHeight);
-                    const percentageSize = Math.floor(minEdgeSize * 0.85);
-                    const fixedSize = 300;
-                    const qrboxSize = Math.max(percentageSize, fixedSize);
-                    const finalSize = Math.min(qrboxSize, minEdgeSize * 0.95);
-                    
-                    return {
-                      width: Math.max(finalSize, 250),
-                      height: Math.max(finalSize, 250)
-                    };
-                  },
-                  aspectRatio: 1.0,
-                  disableFlip: false,
-                  videoConstraints: {
-                    facingMode: "user",
-                    width: { ideal: 1280, min: 640, max: 1920 },
-                    height: { ideal: 720, min: 480, max: 1080 }
-                  },
-                  rememberLastUsedCamera: true,
-                  verbose: false
-                },
-                (decodedText: string, decodedResult: any) => {
-                  console.log('✅ QR Code detected (front camera):', decodedText);
-                  if (decodedText && decodedText.trim() !== '') {
-                    handleQRScanSuccess(decodedText);
-                  }
-                },
-                (errorMessage: string) => {
-                  if (errorMessage) {
-                    const isCriticalError = !errorMessage.includes('NotFoundException') && 
-                                           !errorMessage.includes('No QR') &&
-                                           !errorMessage.includes('QR code parse error') &&
-                                           !errorMessage.includes('QR code decode error');
-                    
-                    if (isCriticalError) {
-                      console.warn('QR Scanner (front) warning:', errorMessage);
-                    }
-                  }
-                }
-              );
-              
-              setTimeout(() => {
-                cameraReady.value = true;
-              }, 500);
-              
-              showSnackbar('Info', 'Menggunakan kamera depan. Arahkan QR code ke kamera', 'info', 'mdi-camera');
-            } catch (fallbackError: any) {
-              console.error('Fallback camera also failed:', fallbackError);
-              throw cameraError; // Throw original error
-            }
-          } else {
-            // Coba menggunakan deviceId langsung jika facingMode gagal
-            try {
-              console.log('Trying to get camera devices...');
-              const devices = await navigator.mediaDevices.enumerateDevices();
-              const videoDevices = devices.filter(device => device.kind === 'videoinput');
-              
-              if (videoDevices.length > 0) {
-                // Gunakan kamera pertama yang tersedia
-                const deviceId = videoDevices[0].deviceId;
-                console.log('Using device:', deviceId, videoDevices[0].label);
-                
-                await html5QrCode.start(
-                  { deviceId: { exact: deviceId } },
-                  {
-                    fps: 30,
-                    qrbox: function(viewfinderWidth: number, viewfinderHeight: number) {
-                      const minEdgeSize = Math.min(viewfinderWidth, viewfinderHeight);
-                      const percentageSize = Math.floor(minEdgeSize * 0.80);
-                      const fixedSize = isMobile.value ? 300 : 400;
-                      const qrboxSize = Math.max(percentageSize, fixedSize);
-                      const finalSize = Math.min(qrboxSize, minEdgeSize * 0.80);
-                      
-                      return {
-                        width: Math.max(finalSize, 250),
-                        height: Math.max(finalSize, 250)
-                      };
-                    },
-                    aspectRatio: 1.0,
-                    disableFlip: false,
-                    videoConstraints: {
-                      deviceId: { exact: deviceId },
-                      width: { ideal: isMobile.value ? 1280 : 1920, min: isMobile.value ? 640 : 1280, max: isMobile.value ? 1920 : 1920 },
-                      height: { ideal: isMobile.value ? 720 : 1080, min: isMobile.value ? 480 : 720, max: isMobile.value ? 1080 : 1080 }
-                    },
-                    rememberLastUsedCamera: true,
-                    verbose: false
-                  },
-                  (decodedText: string, decodedResult: any) => {
-                    console.log('✅ QR Code detected (deviceId):', decodedText);
-                    if (decodedText && decodedText.trim() !== '') {
-                      handleQRScanSuccess(decodedText);
-                    }
-                  },
-                  (errorMessage: string) => {
-                    if (errorMessage) {
-                      const isCriticalError = !errorMessage.includes('NotFoundException') && 
-                                             !errorMessage.includes('No QR') &&
-                                             !errorMessage.includes('QR code parse error') &&
-                                             !errorMessage.includes('QR code decode error');
-                      
-                      if (isCriticalError) {
-                        console.warn('QR Scanner (deviceId) warning:', errorMessage);
-                      }
-                    }
-                  }
-                );
-                
-                setTimeout(() => {
-                  cameraReady.value = true;
-                }, 500);
-                
-                showSnackbar('Info', 'Scanner aktif menggunakan kamera yang tersedia', 'info', 'mdi-camera');
-              } else {
-                throw cameraError;
-              }
-            } catch (deviceError: any) {
-              console.error('DeviceId approach also failed:', deviceError);
-              throw cameraError;
-            }
-          }
-        }
-      }
-    } catch (err: any) {
-      console.error('Error starting scanner:', err);
-      isScanning.value = false;
-      cameraReady.value = false;
-      
-      // Don't set hasCamera to false if it was detected, just log the error
-      let errorMessage = 'Gagal memulai scanner. ';
-      
-      if (err.message && err.message.includes('not found')) {
-        errorMessage = 'Element scanner tidak ditemukan. Silakan refresh halaman dan coba lagi.';
-        console.error('Element not found error. Element ID:', qrCodeId);
-      } else if (err.name === 'NotAllowedError') {
-        errorMessage = 'Akses kamera ditolak. Mohon izinkan akses kamera di pengaturan browser.';
-      } else if (err.name === 'NotFoundError') {
-        errorMessage = 'Kamera tidak ditemukan. Silakan gunakan input manual.';
-        hasCamera.value = false;
-      } else if (err.name === 'NotReadableError') {
-        errorMessage = 'Kamera sedang digunakan aplikasi lain. Tutup aplikasi lain yang menggunakan kamera.';
-      } else {
-        errorMessage += err.message || err.name || 'Unknown error';
-      }
-      
-      showSnackbar('Error', errorMessage, 'error', 'mdi-alert');
-    }
-  };
-  
-  const stopScanning = async () => {
-    try {
-      if (html5QrCode && isScanning.value) {
-        await html5QrCode.stop();
-        await html5QrCode.clear();
-        isScanning.value = false;
-        cameraReady.value = false;
-        showSnackbar('Info', 'Scanner dihentikan', 'info', 'mdi-camera-off');
-      }
-    } catch (err: any) {
-      console.error('Error stopping scanner:', err);
-      isScanning.value = false;
-      cameraReady.value = false;
-    }
-  };
-  
-  const handleQRScanSuccess = (decodedText: string) => {
-    console.log('🎯 QR Scan Success! Data:', decodedText);
-    
-    // Validasi data QR
-    if (!decodedText || decodedText.trim() === '') {
-      console.warn('QR Code data is empty');
-      showSnackbar('Error', 'QR Code tidak valid atau kosong', 'error', 'mdi-alert');
-      return;
-    }
-    
-    // Cek apakah QR code sudah pernah berhasil di-scan (mencegah double antrian)
-    if (isQRCodeAlreadyScanned(decodedText)) {
-      console.log('⏭️ Scan diabaikan: QR code sudah pernah berhasil di-scan');
-      showSnackbar('Peringatan', 'QR Code ini sudah pernah berhasil di-scan. Tidak dapat digunakan lagi untuk mencegah double antrian.', 'warning', 'mdi-alert-circle');
-      return;
-    }
-    
-    // Debounce: cegah scan berulang dalam waktu singkat
-    const now = Date.now();
-    if (lastScannedQR === decodedText && (now - lastScanTime) < SCAN_DEBOUNCE_MS) {
-      console.log('⏭️ Scan diabaikan (debounce): QR code sama dalam waktu singkat');
-      return;
-    }
-    
-    // Update last scan info
-    lastScannedQR = decodedText;
-    lastScanTime = now;
-    
-    // Simpan data QR yang di-scan
-    scannedData.value = decodedText;
-    
-    // Scanner tetap berjalan untuk memungkinkan scan QR code berikutnya
-    
-    // Proses data QR
-    try {
-      onDetect(decodedText);
-    } catch (error) {
-      console.error('Error processing QR data:', error);
-      showSnackbar('Error', 'Gagal memproses data QR Code', 'error', 'mdi-alert');
-    }
-    
-    // Simpan ke localStorage untuk riwayat
-    saveScannedQRData(decodedText);
-  };
-  
-  // Simpan data QR yang di-scan ke localStorage
-  const saveScannedQRData = (qrData: string) => {
-    if (typeof window !== 'undefined') {
-      const scannedQRs = JSON.parse(localStorage.getItem('scanned_qr_data') || '[]');
-      scannedQRs.unshift({
-        data: qrData,
-        timestamp: new Date().toISOString(),
-        date: new Date().toLocaleDateString('id-ID'),
-        time: new Date().toLocaleTimeString('id-ID')
-      });
-      
-      // Simpan maksimal 50 item
-      if (scannedQRs.length > 50) {
-        scannedQRs.pop();
-      }
-      
-      localStorage.setItem('scanned_qr_data', JSON.stringify(scannedQRs));
-    }
-  };
-  
-  // Load successful scans dari localStorage
-  const loadSuccessfulScans = () => {
-    if (typeof window !== 'undefined') {
-      const stored = localStorage.getItem(SUCCESSFUL_SCANS_KEY);
-      if (stored) {
-        try {
-          const scansArray = JSON.parse(stored);
-          successfulScans.value = new Set(scansArray);
-        } catch (e) {
-          console.error('Error loading successful scans:', e);
-          successfulScans.value = new Set();
-        }
-      }
-    }
-  };
-  
-  // Simpan successful scan ke localStorage
-  const saveSuccessfulScan = (qrData: string) => {
-    if (typeof window !== 'undefined') {
-      successfulScans.value.add(qrData);
-      const scansArray = Array.from(successfulScans.value);
-      localStorage.setItem(SUCCESSFUL_SCANS_KEY, JSON.stringify(scansArray));
-    }
-  };
-  
-  // Cek apakah QR code sudah pernah berhasil di-scan
-  const isQRCodeAlreadyScanned = (qrData: string): boolean => {
-    return successfulScans.value.has(qrData);
-  };
-  
-  // Watch tab changes untuk stop scanner saat pindah tab
-  watch(tab, (newTab) => {
-    if (newTab !== 'scan' && isScanning.value) {
-      stopScanning();
-    }
-    // Check camera when switching to scan tab
-    if (newTab === 'scan' && !hasCamera.value && !cameraChecking.value) {
-      checkCameraAvailability();
-    }
-  });
-  
-  // Check camera on mount and initialize patient ID
-  onMounted(() => {
-    if (typeof window !== 'undefined') {
-      // Initialize patient ID if empty
-      if (!generatePatientId.value) {
-        generatePatientId.value = generateSequentialPatientId();
-      }
-      
-      // Set default klinik if available
-      if (!selectedKlinik.value && klinikOptions.value.length > 0) {
-        selectedKlinik.value = klinikOptions.value[0].value;
-      }
-      
-      // Check camera availability
-      if (typeof navigator !== 'undefined') {
-        if (navigator.mediaDevices && typeof navigator.mediaDevices.getUserMedia === 'function') {
-          checkCameraAvailability();
-        } else {
-          console.warn('MediaDevices API not available. Make sure you are using HTTPS or localhost.');
-          hasCamera.value = false;
-          cameraChecking.value = false;
-          showSnackbar('Warning', 'MediaDevices API tidak tersedia. Pastikan menggunakan HTTPS atau localhost.', 'warning', 'mdi-alert');
-        }
-      } else {
-        hasCamera.value = false;
-        cameraChecking.value = false;
-      }
-    } else {
-      hasCamera.value = false;
-      cameraChecking.value = false;
-    }
-  });
-  
-  // Cleanup saat component unmount
-  onUnmounted(() => {
-    if (html5QrCode && isScanning.value) {
-      stopScanning();
-    }
-    // Clear auto-close timer jika ada
-    if (autoCloseTimer) {
-      clearTimeout(autoCloseTimer);
-      autoCloseTimer = null;
-    }
-  });
-  
-  const onDetect = async (decodedText: string) => {
-      const [patientId, status] = decodedText.split('|');
-      
-      // Validasi format QR code
-      if (!patientId || !status) {
-          showSnackbar('Error', 'QR Code tidak valid. Format harus: ID_PASIEN|STATUS', 'error', 'mdi-close-circle');
-          return;
-      }
-      
-      // Extract kode klinik from patient ID if available (format: P-00001 or from context)
-      // For now, we'll try to get it from the selected klinik or use a default
-      let kodeKlinik = selectedKlinik.value || '';
-      
-      // If no klinik selected, try to infer from context or use first available
-      if (!kodeKlinik && klinikOptions.value.length > 0) {
-        kodeKlinik = klinikOptions.value[0].value;
-      }
-      
-      // Cek apakah pasien diperbolehkan check-in
-      const isAllowed = status === 'ALLOWED';
-      
-      if (isAllowed) {
-          // Jika diperbolehkan, langsung proses check-in
-          // Proses check-in langsung
-          const checkinSuccess = await performCheckIn(decodedText, 'QR Scan');
-          
-          // Simpan hasil check-in
-          lastCheckInResult.value = {
-              success: checkinSuccess,
-              patientId: patientId,
-              status: status
-          };
-          
-          // Generate queue number based on klinik
-          const queueNumber = kodeKlinik ? generateSequentialQueueNumber(kodeKlinik) : undefined;
-          
-          // Simpan ke history check-in dengan status hasil check-in
-          saveToHistory({
-              patientId: patientId || 'Unknown',
-              queueNumber: queueNumber,
-              status: checkinSuccess ? 'success' : 'failed',
-              checkInTime: new Date().toISOString(),
-              checkInDate: new Date().toISOString(),
-              method: 'QR Scan',
-              kodeKlinik: kodeKlinik
-          });
-          
-          // Tampilkan dialog dengan hasil check-in
-          if (checkinSuccess) {
-              // Simpan QR code yang berhasil di-scan untuk mencegah scan ulang
-              saveSuccessfulScan(decodedText);
-              infoMessage.value = `✅ Check-in Berhasil!\n\nPasien ${patientId} berhasil melakukan check-in.`;
-              infoAction.value = 'checkin';
-          } else {
-              infoMessage.value = `❌ Check-in Gagal!\n\nPasien ${patientId} diperbolehkan check-in, namun proses check-in gagal. Silakan coba lagi.`;
-              infoAction.value = 'checkin';
-          }
-          
-          infoDialog.value = true;
-      } else {
-          // Jika belum diperbolehkan, tampilkan pesan
-          lastCheckInResult.value = {
-              success: false,
-              patientId: patientId,
-              status: status
-          };
-          
-          // Extract kode klinik (same as above)
-          let kodeKlinik = selectedKlinik.value || '';
-          if (!kodeKlinik && klinikOptions.value.length > 0) {
-            kodeKlinik = klinikOptions.value[0].value;
-          }
-          
-          // Simpan ke history check-in untuk NOT_ALLOWED
-          saveToHistory({
-              patientId: patientId || 'Unknown',
-              status: 'NOT_ALLOWED',
-              checkInTime: new Date().toISOString(),
-              checkInDate: new Date().toISOString(),
-              method: 'QR Scan',
-              kodeKlinik: kodeKlinik
-          });
-          
-          infoMessage.value = `⏳ Belum Diizinkan Check-in\n\nAntrean Pasien ${patientId} belum diperbolehkan check-in. Mohon menunggu hingga antrean Anda dipanggil.`;
-          infoAction.value = 'kembali';
-          infoDialog.value = true;
-      }
-  };
-  
-  const handleInfoAction = async () => {
-      // Clear auto-close timer jika ada
-      if (autoCloseTimer) {
-        clearTimeout(autoCloseTimer);
-        autoCloseTimer = null;
-      }
-      
-      infoDialog.value = false;
-      
-      // Scanner tetap berjalan setelah dialog ditutup
-      // Ini memungkinkan user untuk segera memproses QR code berikutnya
-      // tanpa perlu memulai scanner lagi
-  };
-  
-  // Watch infoDialog untuk auto-close setelah 3 detik
-  watch(infoDialog, (isOpen: boolean) => {
-    // Clear timer yang ada jika dialog ditutup
-    if (autoCloseTimer) {
-      clearTimeout(autoCloseTimer);
-      autoCloseTimer = null;
-    }
-    
-    // Jika dialog dibuka, set timer untuk auto-close setelah 3 detik
-    if (isOpen) {
-      autoCloseTimer = setTimeout(() => {
-        infoDialog.value = false;
-        autoCloseTimer = null;
-      }, 5000); // 5   detik
-    }
-  });
-  
-  const performCheckIn = async (data: string, method: string = 'QR Scan'): Promise<boolean> => {
-      await new Promise(resolve => setTimeout(resolve, 1000));
-      const success = Math.random() < 0.8;
-      
-      // History akan disimpan di onDetect setelah performCheckIn selesai
-      // Jadi kita hanya perlu return hasil check-in
-      return success;
-  };
-  
-  const showSnackbar = (title: string, message: string, color: string, icon: string) => {
-      snackbar.value.title = title;
-      snackbar.value.message = message;
-      snackbar.value.color = color;
-      snackbar.value.icon = icon;
-      snackbar.value.show = true;
-  };
-  
-  const checkInManual = async () => {
-    if (!manualInput.value) {
-      showSnackbar('Error', 'Mohon isi nomor antrean atau ID pasien', 'error', 'mdi-alert');
-      return;
-    }
-  
-    // Get kode klinik (use first available if none selected)
-    let kodeKlinik = selectedKlinik.value || '';
-    if (!kodeKlinik && klinikOptions.value.length > 0) {
-      kodeKlinik = klinikOptions.value[0].value;
-    }
-    
-    // Simulasi check-in manual
-    const success = await performCheckIn(`${manualInput.value}|ALLOWED`);
-    
-    if (success) {
-      // Generate queue number
-      const queueNumber = kodeKlinik ? generateSequentialQueueNumber(kodeKlinik) : undefined;
-      
-      // Save to history
-      saveToHistory({
-        patientId: manualInput.value,
-        queueNumber: queueNumber,
-        status: 'success',
-        checkInTime: new Date().toISOString(),
-        checkInDate: new Date().toISOString(),
-        method: 'Manual Input',
-        kodeKlinik: kodeKlinik
-      });
-      
-      showSnackbar('Berhasil!', 'Check-in manual berhasil dilakukan.', 'success', 'mdi-check-circle');
-      manualInput.value = '';
-      if (manualForm.value) {
-        (manualForm.value as any).reset();
-      }
-    } else {
-      showSnackbar('Gagal!', 'Check-in manual gagal dilakukan. Silakan coba lagi!', 'error', 'mdi-close-circle');
-    }
-  };
-  
-  // Quick generate QR for testing
-  const generateQuickQR = (status: string) => {
-    // Auto-generate sequential patient ID
-    generatePatientId.value = generateSequentialPatientId();
-    generateStatus.value = status;
-    // Use first klinik if none selected
-    if (!selectedKlinik.value && klinikOptions.value.length > 0) {
-      selectedKlinik.value = klinikOptions.value[0].value;
-    }
-    generateQRCode();
-  };
-  
-  // Generate QR Code function
-  const generateQRCode = async () => {
-    // Auto-generate patient ID if empty
-    if (!generatePatientId.value) {
-      generatePatientId.value = generateSequentialPatientId();
-    }
-    
-    if (!selectedKlinik.value) {
-      showSnackbar('Error', 'Mohon pilih Klinik/Poli', 'error', 'mdi-alert');
-      return;
-    }
-  
-    generatedQRData.value = `${generatePatientId.value}|${generateStatus.value}`;
-    
-    await nextTick();
-    
-    // Clear previous QR code
-    const qrContainer = document.getElementById('qrcode');
-    if (qrContainer) {
-      qrContainer.innerHTML = '';
-      
-      try {
-        // Use qrcode package that's already installed
-        const QRCode = (await import('qrcode')).default;
-        
-        // Create QR code as data URL
-        const qrDataUrl = await QRCode.toDataURL(generatedQRData.value, {
-          errorCorrectionLevel: 'H', // High error correction for better scanning
-          type: 'image/png',
-          quality: 1,
-          margin: 2,
-          width: 300,
-          color: {
-            dark: '#000000', // Black
-            light: '#FFFFFF' // White
-          }
-        });
-        
-        // Create img element and append to container
-        const img = document.createElement('img');
-        img.src = qrDataUrl;
-        img.alt = 'QR Code';
-        img.style.width = '100%';
-        img.style.maxWidth = '300px';
-        img.style.height = 'auto';
-        img.style.display = 'block';
-        img.style.margin = '0 auto';
-        qrContainer.appendChild(img);
-        
-        console.log('QR Code created successfully:', generatedQRData.value);
-        showSnackbar('Berhasil!', 'QR Code berhasil di-generate. Silakan scan untuk testing', 'success', 'mdi-check-circle');
-      } catch (error) {
-        console.error('Error creating QR code:', error);
-        showSnackbar('Error', 'Gagal membuat QR Code. Silakan coba lagi', 'error', 'mdi-alert');
-      }
-    } else {
-      showSnackbar('Error', 'Container QR Code tidak ditemukan', 'error', 'mdi-alert');
-    }
-  };
-  
-  const downloadQR = async () => {
-    const img = document.querySelector('#qrcode img') as HTMLImageElement;
-    if (img && img.src) {
-      try {
-        // Convert img src (data URL) to blob
-        const response = await fetch(img.src);
-        const blob = await response.blob();
-        const url = URL.createObjectURL(blob);
-        const link = document.createElement('a');
-        const klinikCode = selectedKlinik.value || 'UNKNOWN';
-        const fileName = `QR-Test-${klinikCode}-${generatePatientId.value}-${generateStatus.value}-${Date.now()}.png`;
-        link.download = fileName;
-        link.href = url;
-        link.style.display = 'none';
-        document.body.appendChild(link);
-        link.click();
-        document.body.removeChild(link);
-        URL.revokeObjectURL(url);
-        showSnackbar('Berhasil!', `QR Code berhasil didownload: ${fileName}`, 'success', 'mdi-download');
-      } catch (error) {
-        console.error('Download error:', error);
-        // Fallback: use img src directly
-        const link = document.createElement('a');
-        const klinikCode = selectedKlinik.value || 'UNKNOWN';
-        link.download = `QR-Test-${klinikCode}-${generatePatientId.value}-${generateStatus.value}.png`;
-        link.href = img.src;
-        link.click();
-        showSnackbar('Berhasil!', 'QR Code berhasil didownload', 'success', 'mdi-download');
-      }
-    } else {
-      showSnackbar('Error', 'QR Code belum di-generate. Silakan generate terlebih dahulu', 'error', 'mdi-alert');
-    }
-  };
-  
-  const copyQRToClipboard = async () => {
-    const img = document.querySelector('#qrcode img') as HTMLImageElement;
-    if (img && img.src) {
-      try {
-        // Convert img src to blob
-        const response = await fetch(img.src);
-        const blob = await response.blob();
-        
-        try {
-          await navigator.clipboard.write([
-            new ClipboardItem({
-              'image/png': blob
-            })
-          ]);
-          showSnackbar('Berhasil!', 'QR Code berhasil disalin ke clipboard', 'success', 'mdi-content-copy');
-        } catch (err: any) {
-          console.error('Clipboard error:', err);
-          // Fallback: download instead
-          showSnackbar('Info', 'Copy ke clipboard tidak didukung. Gunakan tombol Download.', 'info', 'mdi-information');
-        }
-      } catch (error) {
-        console.error('Copy error:', error);
-        showSnackbar('Error', 'Gagal menyalin QR Code', 'error', 'mdi-alert');
-      }
-    } else {
-      showSnackbar('Error', 'QR Code belum di-generate. Silakan generate terlebih dahulu', 'error', 'mdi-alert');
-    }
-  };
-  
-  const shareQR = async () => {
-    const img = document.querySelector('#qrcode img') as HTMLImageElement;
-    if (img && img.src) {
-      try {
-        // Convert img src to blob
-        const response = await fetch(img.src);
-        const blob = await response.blob();
-        const klinikCode = selectedKlinik.value || 'UNKNOWN';
-        const file = new File([blob], `QR-Test-${klinikCode}-${generatePatientId.value}-${generateStatus.value}.png`, { type: 'image/png' });
-        
-        if (navigator.share && navigator.canShare({ files: [file] })) {
-          try {
-            await navigator.share({
-              files: [file],
-              title: 'QR Code Check-in Test',
-              text: `QR Code untuk testing: ${generatedQRData.value}`
-            });
-            showSnackbar('Berhasil!', 'QR Code berhasil dibagikan', 'success', 'mdi-share');
-          } catch (err: any) {
-            if (err.name !== 'AbortError') {
-              // Fallback to copy or download
-              copyQRToClipboard();
-            }
-          }
-        } else {
-          // Fallback: try copy to clipboard
-          copyQRToClipboard();
-        }
-      } catch (error) {
-        console.error('Share error:', error);
-        showSnackbar('Error', 'Gagal membagikan QR Code', 'error', 'mdi-alert');
-      }
-    } else {
-      showSnackbar('Error', 'QR Code belum di-generate. Silakan generate terlebih dahulu', 'error', 'mdi-alert');
-    }
-  };
-  
-  // History Functions
-  const HISTORY_STORAGE_KEY = 'checkin_history';
-  
-  const loadHistory = () => {
-    if (typeof window !== 'undefined') {
-      const stored = localStorage.getItem(HISTORY_STORAGE_KEY);
-      if (stored) {
-        try {
-          checkInHistory.value = JSON.parse(stored);
-        } catch (e) {
-          console.error('Error loading history:', e);
-          checkInHistory.value = [];
-        }
-      }
-    }
-  };
-  
-  const saveToHistory = (item: {
-    patientId: string;
-    queueNumber?: string;
-    status: string;
-    checkInTime: string;
-    checkInDate: string;
-    method: string;
-    kodeKlinik?: string;
-  }) => {
-    // Generate queue number based on klinik code if not provided
-    let queueNumber = item.queueNumber;
-    if (!queueNumber && item.kodeKlinik) {
-      queueNumber = generateSequentialQueueNumber(item.kodeKlinik);
-    } else if (!queueNumber) {
-      // Fallback to default if no klinik code
-      queueNumber = `ANT-${Date.now()}`;
-    }
-    
-    const historyItem = {
-      ...item,
-      queueNumber: queueNumber,
-    };
-    
-    checkInHistory.value.unshift(historyItem);
-    
-    // Simpan maksimal 100 item
-    if (checkInHistory.value.length > 100) {
-      checkInHistory.value = checkInHistory.value.slice(0, 100);
-    }
-    
-    if (typeof window !== 'undefined') {
-      localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(checkInHistory.value));
-    }
-  };
-  
-  const deleteHistoryItem = (index: number) => {
-    checkInHistory.value.splice(index, 1);
-    if (typeof window !== 'undefined') {
-      localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(checkInHistory.value));
-    }
-    showSnackbar('Berhasil', 'Riwayat berhasil dihapus', 'success', 'mdi-check');
-  };
-  
-  const clearHistory = () => {
-    checkInHistory.value = [];
-    if (typeof window !== 'undefined') {
-      localStorage.removeItem(HISTORY_STORAGE_KEY);
-    }
-    showSnackbar('Berhasil', 'Semua riwayat berhasil dihapus', 'success', 'mdi-check');
-  };
-  
-  const openHistoryDialog = () => {
-    loadHistory();
-    historyDialog.value = true;
-  };
-  
-  const openQRHistoryDialog = () => {
-    loadScannedQRHistory();
-    qrHistoryDialog.value = true;
-  };
-  
-  const loadScannedQRHistory = () => {
-    if (typeof window !== 'undefined') {
-      const stored = localStorage.getItem('scanned_qr_data');
-      if (stored) {
-        try {
-          scannedQRHistory.value = JSON.parse(stored);
-        } catch (e) {
-          console.error('Error loading QR history:', e);
-          scannedQRHistory.value = [];
-        }
-      } else {
-        scannedQRHistory.value = [];
-      }
-    }
-  };
-  
-  const clearQRHistory = () => {
-    scannedQRHistory.value = [];
-    if (typeof window !== 'undefined') {
-      localStorage.removeItem('scanned_qr_data');
-    }
-    showSnackbar('Berhasil', 'Semua riwayat QR scan berhasil dihapus', 'success', 'mdi-check');
-  };
-  
-  const deleteQRHistoryItem = (index: number) => {
-    scannedQRHistory.value.splice(index, 1);
-    if (typeof window !== 'undefined') {
-      localStorage.setItem('scanned_qr_data', JSON.stringify(scannedQRHistory.value));
-    }
-    showSnackbar('Berhasil', 'Riwayat QR scan berhasil dihapus', 'success', 'mdi-check');
-  };
-  
-  const useQRData = (qrData: string) => {
-    qrHistoryDialog.value = false;
-    scannedData.value = qrData;
-    onDetect(qrData);
-  };
-  
-  const filteredQRHistory = computed(() => {
-    let filtered = [...scannedQRHistory.value];
-    
-    // Filter by search
-    if (historySearch.value) {
-      const search = historySearch.value.toLowerCase();
-      filtered = filtered.filter(item => 
-        item.data.toLowerCase().includes(search)
-      );
-    }
-    
-    return filtered;
-  });
-  
-  const filteredHistory = computed(() => {
-    let filtered = [...checkInHistory.value];
-    
-    // Filter by search
-    if (historySearch.value) {
-      const search = historySearch.value.toLowerCase();
-      filtered = filtered.filter(item => 
-        item.patientId.toLowerCase().includes(search) ||
-        (item.queueNumber && item.queueNumber.toLowerCase().includes(search))
-      );
-    }
-    
-    // Filter by status
-    if (historyStatusFilter.value) {
-      filtered = filtered.filter(item => {
-        if (historyStatusFilter.value === 'success') {
-          return item.status === 'ALLOWED' || item.status === 'success';
-        } else if (historyStatusFilter.value === 'failed') {
-          return item.status === 'NOT_ALLOWED' || item.status === 'failed';
-        }
-        return true;
-      });
-    }
-    
-    return filtered;
-  });
-  
-  const getStatusColor = (status: string) => {
-    if (status === 'ALLOWED' || status === 'success') return 'success';
-    if (status === 'NOT_ALLOWED' || status === 'failed') return 'error';
-    return 'warning';
-  };
-  
-  const getStatusIcon = (status: string) => {
-    if (status === 'ALLOWED' || status === 'success') return 'mdi-check-circle';
-    if (status === 'NOT_ALLOWED' || status === 'failed') return 'mdi-close-circle';
-    return 'mdi-clock-alert';
-  };
-  
-  const getStatusText = (status: string) => {
-    if (status === 'ALLOWED' || status === 'success') return 'Berhasil';
-    if (status === 'NOT_ALLOWED' || status === 'failed') return 'Gagal';
-    return 'Pending';
-  };
-  
-  const getStatusClass = (status: string) => {
-    if (status === 'ALLOWED' || status === 'success') return 'history-success';
-    if (status === 'NOT_ALLOWED' || status === 'failed') return 'history-failed';
-    return 'history-pending';
-  };
-  
-  const formatDateTime = (dateString: string) => {
-    const date = new Date(dateString);
-    return date.toLocaleTimeString('id-ID', { 
-      hour: '2-digit', 
-      minute: '2-digit',
-      second: '2-digit'
-    });
-  };
-  
-  const formatDate = (dateString: string) => {
-    const date = new Date(dateString);
-    return date.toLocaleDateString('id-ID', {
-      day: '2-digit',
-      month: 'short',
-      year: 'numeric'
-    });
-  };
-  
-  // Statistics computed properties
-  const statsToday = computed(() => {
-    const today = new Date();
-    const todayStr = today.toISOString().split('T')[0]; // YYYY-MM-DD
-    
-    return checkInHistory.value.filter(item => {
-      const itemDate = new Date(item.checkInDate || item.checkInTime);
-      const itemDateStr = itemDate.toISOString().split('T')[0];
-      return itemDateStr === todayStr;
-    }).length;
-  });
-  
-  const statsCompleted = computed(() => {
-    return checkInHistory.value.filter(item => {
-      return item.status === 'success' || item.status === 'ALLOWED';
-    }).length;
-  });
-  
-  const statsWaiting = computed(() => {
-    return checkInHistory.value.filter(item => {
-      return item.status === 'NOT_ALLOWED' || item.status === 'pending' || item.status === 'failed';
-    }).length;
-  });
-  
-  // Load history on mount
-  if (typeof window !== 'undefined') {
-    loadHistory();
-    loadScannedQRHistory();
-    loadSuccessfulScans();
-  }
-  </script>
-  
-  <style scoped>
-  /* Modern Minimalist Background */
-  .bg-modern {
-    background: #ffffff;
-    min-height: 100vh;
-    max-height: 100vh;
-    position: relative;
-    overflow: hidden;
-  }
-  
-  .no-scroll-container {
-    height: 100vh;
-    max-height: 100vh;
-    overflow-y: auto;
-    overflow-x: hidden;
-  }
-  
-  .no-scroll-container::-webkit-scrollbar {
-    width: 4px;
-  }
-  
-  .no-scroll-container::-webkit-scrollbar-track {
-    background: transparent;
-  }
-  
-  .no-scroll-container::-webkit-scrollbar-thumb {
-    background: rgba(0, 0, 0, 0.2);
-    border-radius: 2px;
-  }
-  
-  .no-overflow {
-    overflow: hidden !important;
-    height: 100vh;
-    max-height: 100vh;
-  }
-  
-  .bg-modern::before {
-    content: '';
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: 
-      radial-gradient(circle at 20% 50%, rgba(21, 101, 192, 0.05) 0%, transparent 50%),
-      radial-gradient(circle at 80% 80%, rgba(21, 101, 192, 0.05) 0%, transparent 50%);
-    pointer-events: none;
-    z-index: 0;
-  }
-  
-  /* Main Card dengan Glassmorphism */
-  .main-card {
-    background: rgba(255, 255, 255, 0.95) !important;
-    backdrop-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    border: 1px solid rgba(255, 255, 255, 0.3);
-    border-radius: 24px !important;
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
-    overflow: hidden;
-    position: relative;
-    z-index: 1;
-  }
-  
-  /* Header Modern Minimalis */
-  .header-modern {
-    background: linear-gradient(135deg, #1565C0 0%, #0D47A1 100%);
-    padding: 20px 24px 16px;
-    position: relative;
-    overflow: hidden;
-  }
-  
-  .header-modern::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
-    pointer-events: none;
-  }
-  
-  .header-content {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 12px;
-    margin-bottom: 4px;
-  }
-  
-  .icon-circle {
-    width: 56px;
-    height: 56px;
-    border-radius: 50%;
-    background: rgba(255, 255, 255, 0.2);
-    backdrop-filter: blur(10px);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: 2px solid rgba(255, 255, 255, 0.3);
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
-  }
-  
-  .header-text {
-    text-align: left;
-  }
-  
-  .title-modern {
-    font-size: 20px;
-    font-weight: 700;
-    color: white;
-    margin: 0;
-    letter-spacing: -0.5px;
-  }
-  
-  .subtitle-modern {
-    font-size: 13px;
-    color: rgba(255, 255, 255, 0.85);
-    margin: 2px 0 0;
-    font-weight: 400;
-  }
-  
-  /* Tabs Modern */
-  .tabs-modern {
-    position: relative;
-    z-index: 1;
-  }
-  
-  .tabs-modern :deep(.v-tab) {
-    text-transform: none;
-    font-weight: 500;
-    font-size: 13px;
-    letter-spacing: 0.2px;
-    color: rgba(255, 255, 255, 0.8);
-    min-width: auto;
-    padding: 0 16px;
-    transition: all 0.3s ease;
-  }
-  
-  .tabs-modern :deep(.v-tab--selected) {
-    color: #FB8C00 !important;
-    background: rgba(251, 140, 0, 0.2);
-    border-radius: 12px;
-    backdrop-filter: blur(10px);
-  }
-  
-  .tabs-modern :deep(.v-tab--selected .v-icon) {
-    color: #FB8C00 !important;
-  }
-  
-  .tabs-modern :deep(.v-tab--selected span) {
-    color: #FB8C00 !important;
-  }
-  
-  .tabs-modern :deep(.v-slider) {
-    display: none;
-  }
-  
-  .tab-modern {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-  }
-  
-  .tab-modern .v-icon {
-    font-size: 18px !important;
-  }
-  
-  /* Content Area */
-  .content-modern {
-    background: white;
-    max-height: calc(100vh - 200px);
-    overflow-y: auto;
-  }
-  
-  .content-modern::-webkit-scrollbar {
-    width: 4px;
-  }
-  
-  .content-modern::-webkit-scrollbar-track {
-    background: transparent;
-  }
-  
-  .content-modern::-webkit-scrollbar-thumb {
-    background: rgba(0, 0, 0, 0.2);
-    border-radius: 2px;
-  }
-  
-  .tab-content {
-    animation: fadeIn 0.4s ease-out;
-    height: 100%;
-  }
-  
-  /* Two-column layout styling */
-  .checkin-layout {
-    gap: 0;
-  }
-  
-  .checkin-left-col {
-    padding-right: 16px;
-    border-right: 1px solid rgba(0, 0, 0, 0.08);
-  }
-  
-  .checkin-right-col {
-    padding-left: 16px;
-  }
-  
-  @media (max-width: 959px) {
-    .checkin-left-col {
-      border-right: none;
-      border-bottom: 1px solid rgba(0, 0, 0, 0.08);
-      padding-right: 0;
-      padding-bottom: 24px;
-      margin-bottom: 24px;
-    }
-    
-    .checkin-right-col {
-      padding-left: 0;
-      padding-top: 24px;
-    }
-  }
-  
-  @keyframes fadeIn {
-    from { 
-      opacity: 0; 
-      transform: translateY(10px); 
-    }
-    to { 
-      opacity: 1; 
-      transform: translateY(0); 
-    }
-  }
-  
-  /* Status Header */
-  .status-header {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 12px;
-    padding: 16px;
-    background: linear-gradient(135deg, #f5f7fa 0%, #e3f2fd 100%);
-    border-radius: 12px;
-    border: 1px solid rgba(21, 101, 192, 0.1);
-    text-align: center;
-  }
-  
-  .status-icon-wrapper {
-    width: 40px;
-    height: 40px;
-    border-radius: 10px;
-    background: white;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-    flex-shrink: 0;
-    margin: 0 auto;
-  }
-  
-  .status-text {
-    width: 100%;
-    text-align: center;
-  }
-  
-  .status-title {
-    font-size: 16px;
-    font-weight: 600;
-    color: #1a1a1a;
-    margin: 0 0 4px;
-    letter-spacing: -0.3px;
-    text-align: center;
-  }
-  
-  .status-subtitle {
-    font-size: 13px;
-    color: #6b7280;
-    margin: 0;
-    line-height: 1.4;
-    text-align: center;
-  }
-  
-  /* QR Scanner Modern */
-  .qr-scanner-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin: 24px 0;
-  }
-  
-  .qr-placeholder {
-    width: 100%;
-    max-width: 300px;
-    height: 300px;
-    background: linear-gradient(135deg, #f5f7fa 0%, #e3f2fd 100%);
-    border-radius: 16px;
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-    border: 2px dashed #1565C0;
-    box-shadow: 0 4px 20px rgba(21, 101, 192, 0.1);
-    margin: 0 auto;
-  }
-  
-  .qr-reader-container {
-    width: 100%;
-    max-width: 500px;
-    margin: 0 auto;
-    position: relative;
-  }
-  
-  .qr-reader-wrapper {
-    width: 100%;
-    aspect-ratio: 1 / 1;
-    border-radius: 16px;
-    overflow: hidden;
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
-    background: #000;
-    position: relative;
-    max-width: 500px;
-    max-height: 500px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: 2px solid rgba(21, 101, 192, 0.2);
-    margin: 0 auto;
-  }
-  
-  .qr-reader-wrapper :deep(video) {
-    width: 100% !important;
-    height: 100% !important;
-    border-radius: 16px;
-    display: block !important;
-    object-fit: cover;
-    background: #000;
-    aspect-ratio: 1 / 1;
-    transform: scaleX(-1); /* Mirror effect */
-    -webkit-transform: scaleX(-1); /* Safari support */
-    /* Reduce brightness to prevent overexposure/bloom */
-    filter: brightness(0.75) contrast(1.1);
-    -webkit-filter: brightness(0.75) contrast(1.1);
-  }
-  
-  .qr-reader-wrapper :deep(canvas) {
-    display: none !important;
-  }
-  
-  .qr-reader-wrapper :deep(#qr-reader__dashboard) {
-    display: none !important;
-  }
-  
-  .qr-reader-wrapper :deep(#qr-reader__scan_region) {
-    border-radius: 16px;
-    border: 3px solid rgba(21, 101, 192, 0.8) !important;
-    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.4) !important;
-    position: relative;
-  }
-  
-  .qr-reader-wrapper :deep(#qr-reader__scan_region::before) {
-    content: '';
-    position: absolute;
-    top: -3px;
-    left: -3px;
-    right: -3px;
-    bottom: -3px;
-    border: 3px solid rgba(21, 101, 192, 0.8);
-    border-radius: 16px;
-    animation: pulse-border 2s ease-in-out infinite;
-  }
-  
-  @keyframes pulse-border {
-    0%, 100% {
-      opacity: 1;
-      transform: scale(1);
-    }
-    50% {
-      opacity: 0.7;
-      transform: scale(1.02);
-    }
-  }
-  
-  .qr-reader-wrapper :deep(#qr-reader__scan_region video) {
-    border-radius: 16px;
-    width: 100% !important;
-    height: 100% !important;
-    aspect-ratio: 1 / 1;
-    object-fit: cover;
-    transform: scaleX(-1); /* Mirror effect */
-    -webkit-transform: scaleX(-1); /* Safari support */
-    /* Reduce brightness to prevent overexposure/bloom */
-    filter: brightness(0.75) contrast(1.1);
-    -webkit-filter: brightness(0.75) contrast(1.1);
-  }
-  
-  .scanner-status {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-bottom: 6px;
-    font-size: 12px;
-  }
-  
-  .scanner-instruction {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-top: 12px;
-    padding: 10px 12px;
-    background: linear-gradient(135deg, rgba(21, 101, 192, 0.1) 0%, rgba(13, 71, 161, 0.1) 100%);
-    border-radius: 10px;
-    color: #1565C0;
-    font-weight: 500;
-    font-size: 12px;
-    text-align: center;
-    border: 1px solid rgba(21, 101, 192, 0.2);
-  }
-  
-  .scanner-loading-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    background: rgba(0, 0, 0, 0.7);
-    border-radius: 16px;
-    z-index: 10;
-  }
-  
-  .scanner-overlay {
-    position: absolute;
-    width: 80%;
-    height: 80%;
-  }
-  
-  .corner {
-    position: absolute;
-    width: 40px;
-    height: 40px;
-    border: 3px solid #1565C0;
-  }
-  
-  .corner-tl {
-    top: 0;
-    left: 0;
-    border-right: none;
-    border-bottom: none;
-    border-radius: 8px 0 0 0;
-  }
-  
-  .corner-tr {
-    top: 0;
-    right: 0;
-    border-left: none;
-    border-bottom: none;
-    border-radius: 0 8px 0 0;
-  }
-  
-  .corner-bl {
-    bottom: 0;
-    left: 0;
-    border-right: none;
-    border-top: none;
-    border-radius: 0 0 0 8px;
-  }
-  
-  .corner-br {
-    bottom: 0;
-    right: 0;
-    border-left: none;
-    border-top: none;
-    border-radius: 0 0 8px 0;
-  }
-  
-  .scan-line {
-    position: absolute;
-    width: 100%;
-    height: 2px;
-    background: linear-gradient(90deg, transparent, #1565C0, transparent);
-    top: 0;
-    animation: scan 2s linear infinite;
-    box-shadow: 0 0 10px #1565C0;
-  }
-  
-  @keyframes scan {
-    0% { top: 0; }
-    100% { top: 100%; }
-  }
-  
-  .qr-icon {
-    position: relative;
-    z-index: 1;
-    animation: breathe 2s ease-in-out infinite;
-  }
-  
-  @keyframes breathe {
-    0%, 100% { opacity: 0.6; }
-    50% { opacity: 1; }
-  }
-  
-  /* Modern Buttons */
-  .btn-primary-modern {
-    background: linear-gradient(135deg, #1565C0 0%, #0D47A1 100%) !important;
-    color: white !important;
-    font-weight: 600;
-    text-transform: none;
-    letter-spacing: 0.3px;
-    border-radius: 12px !important;
-    padding: 14px 28px !important;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    box-shadow: 0 4px 16px rgba(21, 101, 192, 0.3) !important;
-  }
-  
-  .btn-primary-modern:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 8px 24px rgba(21, 101, 192, 0.4) !important;
-  }
-  
-  .btn-primary-modern:active {
-    transform: translateY(0);
-  }
-  
-  .btn-primary-modern:disabled {
-    opacity: 0.5;
-    transform: none !important;
-  }
-  
-  .btn-stop-modern {
-    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
-    color: white !important;
-    font-weight: 600;
-    text-transform: none;
-    letter-spacing: 0.3px;
-    border-radius: 12px !important;
-    padding: 14px 28px !important;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3) !important;
-  }
-  
-  .btn-stop-modern:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 8px 24px rgba(239, 68, 68, 0.4) !important;
-  }
-  
-  .action-buttons {
-    margin-top: 20px;
-    display: flex;
-    justify-content: center;
-  }
-  
-  .btn-centered {
-    width: auto !important;
-    min-width: 240px !important;
-    max-width: 320px !important;
-    margin: 0 auto !important;
-    display: block !important;
-  }
-  
-  .btn-centered-small {
-    width: auto !important;
-    min-width: 180px !important;
-    margin: 0 auto;
-    display: block;
-  }
-  
-  .btn-test-camera {
-    border-color: #1565C0 !important;
-    color: #1565C0 !important;
-  }
-  
-  .btn-test-camera :deep(.v-btn__content) {
-    color: #1565C0 !important;
-  }
-  
-  .btn-test-camera :deep(.v-icon) {
-    color: #1565C0 !important;
-    opacity: 1 !important;
-  }
-  
-  /* Modern Inputs */
-  .input-modern :deep(.v-field) {
-    border-radius: 12px;
-    font-size: 15px;
-    background: #fafafa;
-    border: 1.5px solid #e5e7eb;
-    transition: all 0.3s ease;
-  }
-  
-  .input-modern :deep(.v-field--focused) {
-    background: white;
-    border-color: #1565C0;
-    box-shadow: 0 0 0 4px rgba(21, 101, 192, 0.1);
-  }
-  
-  .input-modern :deep(.v-field__input) {
-    padding-top: 12px;
-    padding-bottom: 12px;
-  }
-  
-  .input-modern :deep(.v-label) {
-    font-weight: 500;
-    color: #6b7280;
-  }
-  
-  .quick-actions {
-    margin-top: 16px;
-    padding-top: 16px;
-    border-top: 1px solid #e5e7eb;
-  }
-  
-  .info-card {
-    display: flex;
-    justify-content: center;
-  }
-  
-  .info-alert-centered {
-    width: 100%;
-  }
-  
-  .info-alert-centered :deep(.v-alert__content) {
-    display: flex !important;
-    align-items: center !important;
-    justify-content: center !important;
-    width: 100% !important;
-  }
-  
-  .quick-actions .v-btn {
-    transition: all 0.3s ease;
-    border-radius: 12px !important;
-    border: 1.5px solid #e5e7eb !important;
-  }
-  
-  .quick-actions .v-btn:hover {
-    transform: translateY(-2px);
-    border-color: #1565C0 !important;
-    box-shadow: 0 4px 12px rgba(21, 101, 192, 0.15);
-  }
-  
-  .quick-actions .v-btn :deep(.v-icon) {
-    opacity: 1 !important;
-    color: inherit !important;
-  }
-  
-  .quick-actions .v-btn[color="primary"] {
-    color: #1565C0 !important;
-    border-color: #1565C0 !important;
-  }
-  
-  .quick-actions .v-btn[color="primary"] :deep(.v-icon) {
-    color: #1565C0 !important;
-  }
-  
-  .qr-code-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 16px;
-    background: white;
-    border-radius: 12px;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
-  }
-  
-  .qr-code-container :deep(canvas) {
-    border-radius: 8px;
-  }
-  
-  .qr-display {
-    animation: slideUp 0.5s ease-out;
-  }
-  
-  .blur-dialog :deep(.v-overlay__scrim) {
-    backdrop-filter: blur(8px);
-    -webkit-backdrop-filter: blur(8px);
-  }
-  
-  .dialog-card {
-    overflow: hidden;
-    animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-  }
-  
-  @keyframes popIn {
-    0% {
-      opacity: 0;
-      transform: scale(0.8) translateY(20px);
-    }
-    100% {
-      opacity: 1;
-      transform: scale(1) translateY(0);
-    }
-  }
-  
-  .dialog-header {
-    position: relative;
-    overflow: hidden;
-  }
-  
-  .dialog-header::before {
-    content: '';
-    position: absolute;
-    top: -50%;
-    left: -50%;
-    width: 200%;
-    height: 200%;
-    background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
-    animation: rotate 10s linear infinite;
-  }
-  
-  @keyframes rotate {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-  }
-  
-  .icon-wrapper {
-    display: inline-block;
-    animation: bounceIn 0.6s ease-out 0.2s both;
-  }
-  
-  @keyframes bounceIn {
-    0% {
-      opacity: 0;
-      transform: scale(0.3);
-    }
-    50% {
-      transform: scale(1.05);
-    }
-    70% {
-      transform: scale(0.9);
-    }
-    100% {
-      opacity: 1;
-      transform: scale(1);
-    }
-  }
-  
-  .dialog-icon {
-    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));
-  }
-  
-  .success-header {
-    background: linear-gradient(135deg, #66BB6A 0%, #43A047 100%);
-  }
-  
-  .warning-header {
-    background: linear-gradient(135deg, #FFA726 0%, #FB8C00 100%);
-  }
-  
-  .error-header {
-    background: linear-gradient(135deg, #EF5350 0%, #E53935 100%);
-  }
-  
-  .icon-bg-error {
-    background: linear-gradient(135deg, #EF5350 0%, #E53935 100%);
-  }
-  
-  .dialog-button {
-    text-transform: none;
-    letter-spacing: 0.5px;
-    font-weight: 600;
-    transition: all 0.3s ease;
-  }
-  
-  .dialog-button:hover {
-    transform: translateY(-2px);
-  }
-  
-  /* Patient Info Card Styling */
-  .patient-info-card {
-    background: rgba(250, 250, 250, 0.8) !important;
-    border-color: rgba(0, 0, 0, 0.08) !important;
-  }
-  
-  .patient-info-label {
-    color: #9e9e9e !important;
-    font-weight: 500;
-    opacity: 0.9;
-  }
-  
-  .patient-info-value {
-    color: #757575 !important;
-    font-weight: 500 !important;
-    opacity: 0.85;
-  }
-  
-  .patient-info-icon {
-    opacity: 0.7;
-  }
-  
-  /* Stats Footer Modern */
-  .stats-footer-modern {
-    animation: slideUp 0.5s ease-out 0.3s both;
-  }
-  
-  @keyframes slideUp {
-    from { 
-      opacity: 0; 
-      transform: translateY(10px); 
-    }
-    to { 
-      opacity: 1; 
-      transform: translateY(0); 
-    }
-  }
-  
-  .stat-card-modern {
-    background: white;
-    border-radius: 12px;
-    padding: 16px 12px;
-    text-align: center;
-    border: 1px solid #e5e7eb;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    position: relative;
-    overflow: hidden;
-  }
-  
-  .stat-card-modern::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 3px;
-    background: linear-gradient(90deg, #1565C0 0%, #0D47A1 100%);
-    transform: scaleX(0);
-    transition: transform 0.3s ease;
-  }
-  
-  .stat-card-modern:hover {
-    transform: translateY(-4px);
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
-    border-color: #1565C0;
-  }
-  
-  .stat-card-modern:hover::before {
-    transform: scaleX(1);
-  }
-  
-  .stat-icon-modern {
-    margin-bottom: 12px;
-    display: inline-flex;
-    padding: 8px;
-    background: #e3f2fd;
-    border-radius: 10px;
-  }
-  
-  .stat-value {
-    font-size: 20px;
-    font-weight: 700;
-    color: #1a1a1a;
-    margin-bottom: 4px;
-    letter-spacing: -0.5px;
-  }
-  
-  .stat-label {
-    font-size: 11px;
-    color: #6b7280;
-    font-weight: 500;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-  }
-  
-  .custom-snackbar {
-    margin-bottom: 16px;
-    margin-right: 16px;
-  }
-  
-  .custom-snackbar :deep(.v-snackbar__wrapper) {
-    min-width: 300px;
-  }
-  
-  /* History Dialog Styles */
-  .history-list {
-    max-height: 500px;
-    overflow-y: auto;
-    padding-right: 8px;
-  }
-  
-  .history-list::-webkit-scrollbar {
-    width: 6px;
-  }
-  
-  .history-list::-webkit-scrollbar-track {
-    background: #f1f1f1;
-    border-radius: 10px;
-  }
-  
-  .history-list::-webkit-scrollbar-thumb {
-    background: #888;
-    border-radius: 10px;
-  }
-  
-  .history-list::-webkit-scrollbar-thumb:hover {
-    background: #555;
-  }
-  
-  .history-item {
-    transition: all 0.3s ease;
-    border-left: 4px solid transparent;
-  }
-  
-  .history-item:hover {
-    transform: translateX(4px);
-    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
-  }
-  
-  .history-success {
-    border-left-color: #4caf50;
-    background: rgba(76, 175, 80, 0.05);
-  }
-  
-  .history-failed {
-    border-left-color: #f44336;
-    background: rgba(244, 67, 54, 0.05);
-  }
-  
-  .history-pending {
-    border-left-color: #ff9800;
-    background: rgba(255, 152, 0, 0.05);
-  }
-  
-  /* Mobile Optimization */
-  @media (max-width: 600px) {
-    .v-container.no-scroll-container {
-      padding: 8px !important;
-    }
-    
-    .main-card {
-      border-radius: 16px !important;
-    }
-    
-    .header-modern {
-      padding: 16px 16px 12px !important;
-    }
-    
-    .content-modern {
-      padding: 16px !important;
-      max-height: calc(100vh - 180px);
-    }
-    
-    .header-content {
-      flex-direction: column;
-      text-align: center;
-      gap: 12px;
-    }
-    
-    .header-text {
-      text-align: center;
-    }
-    
-    .icon-circle {
-      width: 56px;
-      height: 56px;
-    }
-    
-    .title-modern {
-      font-size: 20px;
-    }
-    
-    .subtitle-modern {
-      font-size: 13px;
-    }
-    
-    .content-modern {
-      padding: 20px 16px !important;
-    }
-    
-    .status-header {
-      padding: 16px;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      text-align: center;
-      gap: 12px;
-    }
-    
-    .status-icon-wrapper {
-      margin: 0 auto;
-    }
-    
-    .status-text {
-      text-align: center;
-      width: 100%;
-    }
-    
-    .status-title {
-      font-size: 16px;
-    }
-    
-    .status-subtitle {
-      font-size: 13px;
-    }
-    
-    .qr-placeholder {
-      max-width: 100%;
-      height: 280px;
-    }
-    
-    .qr-reader-container {
-      max-width: 100%;
-    }
-    
-    .qr-reader-wrapper {
-      min-height: 300px;
-      max-height: 70vh;
-      border-radius: 16px;
-    }
-    
-    .qr-reader-wrapper :deep(video) {
-      max-height: 70vh;
-      object-fit: contain;
-      transform: scaleX(-1); /* Mirror effect */
-      -webkit-transform: scaleX(-1); /* Safari support */
-      /* Reduce brightness to prevent overexposure/bloom */
-      filter: brightness(0.75) contrast(1.1);
-      -webkit-filter: brightness(0.75) contrast(1.1);
-    }
-    
-    .scanner-instruction {
-      font-size: 12px;
-      padding: 12px;
-    }
-    
-    .stats-footer-modern {
-      margin-top: 8px;
-    }
-    
-    .stat-card-modern {
-      padding: 12px 8px;
-    }
-    
-    .stat-value {
-      font-size: 18px;
-    }
-    
-    .stat-label {
-      font-size: 10px;
-    }
-    
-    .stat-icon-modern {
-      margin-bottom: 8px;
-      padding: 6px;
-    }
-  
-    .tabs-modern :deep(.v-tab) {
-      font-size: 12px;
-      padding: 0 12px;
-    }
-    
-    .tabs-modern :deep(.v-tab .v-icon) {
-      font-size: 18px;
-    }
-    
-    .btn-primary-modern,
-    .btn-stop-modern {
-      padding: 12px 24px !important;
-      font-size: 14px;
-      min-width: 200px !important;
-    }
-    
-    .btn-centered {
-      min-width: 200px !important;
-      max-width: 280px !important;
-    }
-    
-    .qr-placeholder {
-      max-width: 100%;
-      height: 240px;
-    }
-    
-    .qr-reader-wrapper {
-      min-height: 240px;
-      max-height: 280px;
-    }
-  }
-  
-  /* Mobile Landscape */
-  @media (max-width: 900px) and (orientation: landscape) {
-    .qr-reader-wrapper {
-      min-height: 50vh;
-      max-height: 60vh;
-    }
-    
-    .qr-reader-wrapper :deep(video) {
-      max-height: 60vh;
-      transform: scaleX(-1); /* Mirror effect */
-      -webkit-transform: scaleX(-1); /* Safari support */
-      /* Reduce brightness to prevent overexposure/bloom */
-      filter: brightness(0.75) contrast(1.1);
-      -webkit-filter: brightness(0.75) contrast(1.1);
-    }
-  }
-  </style>
\ No newline at end of file
diff --git a/pages/CheckInPasien/checkIn.vue.before-combined.backup b/pages/CheckInPasien/checkIn.vue.before-combined.backup
deleted file mode 100644
index 964886f..0000000
--- a/pages/CheckInPasien/checkIn.vue.before-combined.backup
+++ /dev/null
@@ -1,3351 +0,0 @@
-<template>
-    <v-app class="bg-modern">
-      <v-main class="no-overflow">
-        <v-container fluid class="no-scroll-container pa-2 pa-md-4">
-          <v-row align="start" justify="center" class="fill-height">
-            <v-col cols="12" sm="11" md="10" lg="8" xl="7" class="d-flex flex-column">
-              <!-- Main Card dengan Glassmorphism -->
-              <v-card class="main-card" elevation="0">
-                
-                <!-- Header Minimalis -->
-                <div class="header-modern">
-                  <div class="header-content">
-                    <div class="icon-circle">
-                      <v-icon size="36" color="white">mdi-hospital-building</v-icon>
-                    </div>
-                    <div class="header-text">
-                      <h1 class="title-modern">Check-in Pasien</h1>
-                      <p class="subtitle-modern">Sistem Antrean Rumah Sakit</p>
-                    </div>
-                  </div>
-                  
-                  <!-- Tabs Minimalis -->
-                  <v-tabs 
-                    v-model="tab" 
-                    align-tabs="center" 
-                    class="tabs-modern mt-3"
-                    bg-color="transparent"
-                    slider-color="#FB8C00"
-                    height="40"
-                  >
-                    <v-tab value="scan" class="tab-modern">
-                      <v-icon size="20" class="mr-2">mdi-qrcode-scan</v-icon>
-                      <span>Scan QR</span>
-                    </v-tab>
-                    <v-tab value="manual" class="tab-modern">
-                      <v-icon size="20" class="mr-2">mdi-keyboard</v-icon>
-                      <span>Manual</span>
-                    </v-tab>
-                    <v-tab value="generate" class="tab-modern">
-                      <v-icon size="20" class="mr-2">mdi-qrcode</v-icon>
-                      <span>Generate QR</span>
-                    </v-tab>
-                  </v-tabs>
-                </div>
-  
-                <v-card-text class="content-modern pa-4 pa-md-6">
-                  <v-window v-model="tab">
-                    <!-- Tab Scan QR -->
-                    <v-window-item value="scan">
-                      <div class="tab-content">
-                        <!-- Status Header -->
-                        <div class="status-header mb-3">
-                          <div class="status-icon-wrapper">
-                            <v-icon :color="primaryColor" size="24">mdi-qrcode-scan</v-icon>
-                          </div>
-                          <div class="status-text">
-                            <h3 class="status-title">
-                              {{ isScanning ? 'Arahkan Kamera ke QR Code' : 'Siap untuk Scan QR Code' }}
-                            </h3>
-                            <p class="status-subtitle">
-                              {{ isScanning ? 'Pastikan QR code terlihat jelas dan tidak terpotong' : 'Klik tombol di bawah untuk memulai scan' }}
-                            </p>
-                          </div>
-                        </div>
-                        
-                        <!-- Camera Status Check -->
-                        <div v-if="cameraChecking" class="text-center mb-4">
-                          <v-progress-circular
-                            indeterminate
-                            :color="primaryColor"
-                            size="24"
-                            class="mr-2"
-                          ></v-progress-circular>
-                          <span class="text-body-2 text-grey">Memeriksa ketersediaan kamera...</span>
-                        </div>
-  
-                        <!-- Camera Not Available Warning -->
-                        <v-alert
-                          v-else-if="!hasCamera && !isScanning"
-                          type="warning"
-                          variant="tonal"
-                          class="mb-4"
-                        >
-                          <template v-slot:prepend>
-                            <v-icon>mdi-camera-off</v-icon>
-                          </template>
-                          <div>
-                            <p class="font-weight-bold mb-1">Kamera tidak terdeteksi</p>
-                            <p class="text-body-2 mb-0">
-                              Perangkat Anda tidak memiliki kamera atau kamera tidak dapat diakses. 
-                              Silakan gunakan tab <strong>Manual</strong> untuk input data secara manual.
-                            </p>
-                          </div>
-                        </v-alert>
-  
-                        <!-- QR Scanner Area dengan webcam -->
-                        <div class="qr-scanner-container mb-4">
-                          <div v-if="!isScanning" class="qr-placeholder">
-                            <div class="scanner-overlay">
-                              <div class="corner corner-tl"></div>
-                              <div class="corner corner-tr"></div>
-                              <div class="corner corner-bl"></div>
-                              <div class="corner corner-br"></div>
-                              <div class="scan-line"></div>
-                            </div>
-                            <v-icon size="64" :color="primaryColor" class="qr-icon">mdi-qrcode-scan</v-icon>
-                          </div>
-                          <div v-else class="qr-reader-container">
-                            <div class="scanner-status mb-2">
-                              <v-chip color="success" size="small" class="mr-2">
-                                <v-icon start size="16">mdi-camera</v-icon>
-                                Kamera Aktif
-                              </v-chip>
-                              <span class="text-caption text-grey">Preview kamera sedang berjalan</span>
-                            </div>
-                            <div id="qr-reader" class="qr-reader-wrapper">
-                              <div class="scanner-loading-overlay" v-if="!cameraReady">
-                                <v-progress-circular
-                                  indeterminate
-                                  color="white"
-                                  size="48"
-                                ></v-progress-circular>
-                                <p class="text-white mt-4">Memuat kamera...</p>
-                              </div>
-                            </div>
-                            <div class="scanner-instruction">
-                              <v-icon :color="primaryColor" size="20" class="mr-2">mdi-information</v-icon>
-                              <span class="text-body-2">Arahkan kamera ke QR code. Pastikan QR code berada dalam kotak pemindaian.</span>
-                            </div>
-                          </div>
-                        </div>
-                        
-                        <!-- Action Button Minimalis -->
-                        <div class="action-buttons">
-                          <v-btn
-                            v-if="!isScanning"
-                            class="btn-primary-modern btn-centered"
-                            size="large"
-                            elevation="0"
-                            @click="startScanning"
-                            :disabled="!hasCamera && !cameraChecking"
-                          >
-                            <v-icon start size="20">mdi-camera</v-icon>
-                            {{ hasCamera ? 'Mulai Scan QR' : 'Kamera Tidak Tersedia' }}
-                          </v-btn>
-                          <v-btn
-                            v-else
-                            class="btn-stop-modern btn-centered"
-                            size="large"
-                            elevation="0"
-                            @click="stopScanning"
-                          >
-                            <v-icon start size="20">mdi-camera-off</v-icon>
-                            Stop Scan
-                          </v-btn>
-                        </div>
-  
-                        <!-- Info tambahan -->
-                        <div class="info-card mt-3">
-                          <v-alert
-                            type="info"
-                            variant="tonal"
-                            :color="primaryColor"
-                            class="text-body-2 info-alert-centered"
-                            density="compact"
-                          >
-                            <div class="d-flex align-center justify-center">
-                              <v-icon size="16" class="mr-2">mdi-lightbulb-outline</v-icon>
-                              <span style="font-size: 12px;">Tips: Pastikan pencahayaan cukup untuk hasil scan optimal</span>
-                            </div>
-                          </v-alert>
-                        </div>
-  
-                        <!-- Test Camera Button (Debug) -->
-                        <div class="test-camera-section mt-2 mb-2">
-                          <v-btn
-                            variant="outlined"
-                            color="primary"
-                            size="small"
-                            class="text-none btn-centered-small btn-test-camera"
-                            @click="testCamera"
-                          >
-                            <v-icon start size="18" color="#1565C0">mdi-camera</v-icon>
-                            Test Kamera
-                          </v-btn>
-                          <p class="text-caption text-grey text-center mt-1" style="font-size: 11px;">
-                            Klik untuk menguji apakah browser dapat mengakses kamera
-                          </p>
-                        </div>
-  
-                        <!-- Quick Access Buttons -->
-                        <div class="quick-actions mt-4">
-                          <p class="text-caption text-grey text-center mb-3">Akses Cepat</p>
-                          <v-row dense>
-                            <v-col cols="12">
-                              <v-btn
-                                variant="outlined"
-                                :color="primaryColor"
-                                block
-                                size="small"
-                                class="text-none"
-                                @click="openHistoryDialog"
-                              >
-                                <v-icon start size="18">mdi-history</v-icon>
-                                Riwayat Check-in
-                              </v-btn>
-                            </v-col>
-                            <v-col cols="12">
-                              <v-btn
-                                variant="outlined"
-                                color="primary"
-                                block
-                                size="small"
-                                class="text-none"
-                                @click="openQRHistoryDialog"
-                              >
-                                <v-icon start size="18" color="#1565C0">mdi-qrcode-scan</v-icon>
-                                Riwayat QR Scan
-                              </v-btn>
-                            </v-col>
-                          </v-row>
-                        </div>
-                      </div>
-                    </v-window-item>
-  
-                    <!-- Tab Manual -->
-                    <v-window-item value="manual">
-                      <div class="tab-content">
-                        <!-- Status Header -->
-                        <div class="status-header mb-3">
-                          <div class="status-icon-wrapper">
-                            <v-icon :color="secondaryColor" size="24">mdi-keyboard</v-icon>
-                          </div>
-                          <div class="status-text">
-                            <h3 class="status-title">Input Manual</h3>
-                            <p class="status-subtitle">Masukkan nomor antrean atau ID pasien</p>
-                          </div>
-                        </div>
-  
-                        <v-form @submit.prevent="checkInManual" ref="manualForm">
-                          <v-text-field
-                            v-model="manualInput"
-                            label="Nomor Antrean / ID Pasien"
-                            placeholder="Contoh: P12345"
-                            prepend-inner-icon="mdi-account-card-details"
-                            variant="outlined"
-                            :color="primaryColor"
-                            class="input-modern mb-4"
-                            required
-                            :rules="[v => !!v || 'Field ini wajib diisi']"
-                            density="comfortable"
-                            hide-details="auto"
-                          >
-                            <template v-slot:append-inner>
-                              <v-icon :color="manualInput ? 'success' : 'grey'" size="20">
-                                {{ manualInput ? 'mdi-check-circle' : 'mdi-circle-outline' }}
-                              </v-icon>
-                            </template>
-                          </v-text-field>
-  
-                          <v-btn
-                            class="btn-primary-modern btn-centered"
-                            size="large"
-                            type="submit"
-                            elevation="0"
-                          >
-                            <v-icon start size="20">mdi-login</v-icon>
-                            Check-in Sekarang
-                          </v-btn>
-                        </v-form>
-  
-                        <!-- Quick Access Buttons -->
-                        <div class="quick-actions mt-4">
-                          <p class="text-caption text-grey text-center mb-3">Akses Cepat</p>
-                          <v-row dense>
-                            <v-col cols="12">
-                              <v-btn
-                                variant="outlined"
-                                :color="primaryColor"
-                                block
-                                size="small"
-                                class="text-none"
-                                @click="openHistoryDialog"
-                              >
-                                <v-icon start size="18">mdi-history</v-icon>
-                                Riwayat
-                              </v-btn>
-                            </v-col>
-                          </v-row>
-                        </div>
-                      </div>
-                    </v-window-item>
-  
-                    <!-- Tab Generate QR -->
-                    <v-window-item value="generate">
-                      <div class="tab-content">
-                        <!-- Status Header -->
-                        <div class="status-header mb-3">
-                          <div class="status-icon-wrapper">
-                            <v-icon :color="primaryColor" size="24">mdi-qrcode</v-icon>
-                          </div>
-                          <div class="status-text">
-                            <h3 class="status-title">Generate QR Code untuk Testing</h3>
-                            <p class="status-subtitle">Buat QR code yang bisa Anda scan di tab "Scan QR"</p>
-                          </div>
-                        </div>
-  
-                        <!-- Quick Preset Buttons -->
-                        <div class="mb-3">
-                          <p class="text-caption text-grey text-center mb-2">Quick Test QR Codes:</p>
-                          <v-row dense>
-                            <v-col cols="6">
-                              <v-btn
-                                variant="outlined"
-                                color="success"
-                                size="small"
-                                @click="generateQuickQR('ALLOWED')"
-                                class="text-none"
-                                block
-                              >
-                                <v-icon start size="16">mdi-check-circle</v-icon>
-                                Test ALLOWED
-                              </v-btn>
-                            </v-col>
-                            <v-col cols="6">
-                              <v-btn
-                                variant="outlined"
-                                color="warning"
-                                size="small"
-                                @click="generateQuickQR('NOT_ALLOWED')"
-                                class="text-none"
-                                block
-                              >
-                                <v-icon start size="16">mdi-clock-alert</v-icon>
-                                Test NOT_ALLOWED
-                              </v-btn>
-                            </v-col>
-                          </v-row>
-                        </div>
-  
-                        <!-- Form Generate -->
-                        <v-form @submit.prevent="generateQRCode">
-                          <v-select
-                            v-model="selectedKlinik"
-                            label="Pilih Klinik/Poli"
-                            :items="klinikOptions"
-                            prepend-inner-icon="mdi-hospital-building"
-                            variant="outlined"
-                            :color="primaryColor"
-                            class="input-modern mb-3"
-                            density="comfortable"
-                            :rules="[v => !!v || 'Klinik/Poli harus dipilih']"
-                            hide-details="auto"
-                            required
-                          ></v-select>
-                          
-                          <v-text-field
-                            v-model="generatePatientId"
-                            label="ID Pasien"
-                            placeholder="Auto-generate: P-00001"
-                            prepend-inner-icon="mdi-identifier"
-                            variant="outlined"
-                            :color="primaryColor"
-                            class="input-modern mb-3"
-                            density="comfortable"
-                            readonly
-                            hint="ID Pasien akan di-generate secara otomatis secara sequential"
-                            persistent-hint
-                            hide-details="auto"
-                          >
-                            <template v-slot:append-inner>
-                              <v-btn
-                                icon
-                                size="small"
-                                variant="text"
-                                @click="generatePatientId = generateSequentialPatientId()"
-                                title="Generate ID Baru"
-                              >
-                                <v-icon size="18">mdi-refresh</v-icon>
-                              </v-btn>
-                            </template>
-                          </v-text-field>
-  
-                          <v-select
-                            v-model="generateStatus"
-                            label="Status Check-in"
-                            :items="statusOptions"
-                            prepend-inner-icon="mdi-shield-check"
-                            variant="outlined"
-                            :color="primaryColor"
-                            class="input-modern mb-4"
-                            density="comfortable"
-                            hide-details="auto"
-                          ></v-select>
-  
-                          <div class="d-flex justify-center">
-                            <v-btn
-                              class="btn-primary-modern btn-centered"
-                              size="large"
-                              type="submit"
-                              elevation="0"
-                              :disabled="!selectedKlinik"
-                            >
-                              <v-icon start size="20">mdi-qrcode-plus</v-icon>
-                              Generate QR Code
-                            </v-btn>
-                          </div>
-                        </v-form>
-  
-                        <!-- QR Code Display -->
-                        <div v-if="generatedQRData" class="qr-display mt-6">
-                          <v-card variant="outlined" class="pa-4">
-                            <div class="text-center">
-                              <p class="text-subtitle-2 text-grey mb-3">QR Code Anda:</p>
-                              <div id="qrcode" class="qr-code-container mb-4"></div>
-                              
-                              <v-chip :color="generateStatus === 'ALLOWED' ? 'success' : 'warning'" class="mb-3">
-                                <v-icon start>{{ generateStatus === 'ALLOWED' ? 'mdi-check' : 'mdi-clock-alert' }}</v-icon>
-                                {{ generateStatus === 'ALLOWED' ? 'Diizinkan Check-in' : 'Belum Diizinkan' }}
-                              </v-chip>
-  
-                              <p class="text-body-2 text-grey mb-4">
-                                Data: {{ generatedQRData }}
-                              </p>
-  
-                              <!-- Action Buttons -->
-                              <v-row dense>
-                                <v-col cols="4">
-                                  <v-btn
-                                    variant="outlined"
-                                    :color="primaryColor"
-                                    block
-                                    size="small"
-                                    @click="downloadQR"
-                                    class="text-none"
-                                  >
-                                    <v-icon start size="18">mdi-download</v-icon>
-                                    Download
-                                  </v-btn>
-                                </v-col>
-                                <v-col cols="4">
-                                  <v-btn
-                                    variant="outlined"
-                                    :color="primaryColor"
-                                    block
-                                    size="small"
-                                    @click="copyQRToClipboard"
-                                    class="text-none"
-                                  >
-                                    <v-icon start size="18">mdi-content-copy</v-icon>
-                                    Copy
-                                  </v-btn>
-                                </v-col>
-                                <v-col cols="4">
-                                  <v-btn
-                                    variant="outlined"
-                                    :color="primaryColor"
-                                    block
-                                    size="small"
-                                    @click="shareQR"
-                                    class="text-none"
-                                  >
-                                    <v-icon start size="18">mdi-share-variant</v-icon>
-                                    Share
-                                  </v-btn>
-                                </v-col>
-                              </v-row>
-                            </div>
-                          </v-card>
-  
-                          <!-- Instructions -->
-                          <v-alert
-                            type="success"
-                            variant="tonal"
-                            class="mt-4 text-body-2"
-                          >
-                            <template v-slot:prepend>
-                              <v-icon>mdi-information</v-icon>
-                            </template>
-                            <strong>Cara menggunakan untuk Testing:</strong>
-                            <ol class="ml-4 mt-2">
-                              <li>Gunakan tombol <strong>"Test ALLOWED"</strong> atau <strong>"Test NOT_ALLOWED"</strong> untuk generate QR cepat, atau isi form manual</li>
-                              <li>Klik <strong>"Download"</strong> untuk menyimpan QR code ke komputer</li>
-                              <li>Buka file QR code yang didownload (bisa di HP atau layar lain)</li>
-                              <li>Pindah ke tab <strong>"Scan QR"</strong> dan scan QR code tersebut</li>
-                              <li>Atau gunakan <strong>"Copy"</strong> untuk menyalin QR ke clipboard dan paste di aplikasi lain</li>
-                            </ol>
-                          </v-alert>
-                        </div>
-                      </div>
-                    </v-window-item>
-                  </v-window>
-                </v-card-text>
-              </v-card>
-  
-              <!-- Stats Footer Minimalis -->
-              <div class="stats-footer-modern mt-3">
-                <v-row dense>
-                  <v-col cols="4">
-                    <div class="stat-card-modern">
-                      <div class="stat-icon-modern">
-                        <v-icon :color="primaryColor" size="20">mdi-clock-outline</v-icon>
-                      </div>
-                      <div class="stat-value">{{ statsToday }}</div>
-                      <div class="stat-label">Hari Ini</div>
-                    </div>
-                  </v-col>
-                  <v-col cols="4">
-                    <div class="stat-card-modern">
-                      <div class="stat-icon-modern">
-                        <v-icon color="success" size="20">mdi-check-circle</v-icon>
-                      </div>
-                      <div class="stat-value">{{ statsCompleted }}</div>
-                      <div class="stat-label">Selesai</div>
-                    </div>
-                  </v-col>
-                  <v-col cols="4">
-                    <div class="stat-card-modern">
-                      <div class="stat-icon-modern">
-                        <v-icon :color="secondaryColor" size="20">mdi-account-group</v-icon>
-                      </div>
-                      <div class="stat-value">{{ statsWaiting }}</div>
-                      <div class="stat-label">Menunggu</div>
-                    </div>
-                  </v-col>
-                </v-row>
-              </div>
-            </v-col>
-          </v-row>
-        </v-container>
-      </v-main>
-      
-      <!-- Enhanced Dialog with Blur -->
-      <v-dialog 
-        v-model="infoDialog" 
-        max-width="500" 
-        persistent
-        transition="dialog-transition"
-        scrim="rgba(0, 0, 0, 0.5)"
-        class="blur-dialog"
-      >
-        <v-card class="rounded-xl dialog-card" elevation="24">
-          <div class="dialog-header text-center pa-8" :class="lastCheckInResult?.success && infoAction === 'checkin' ? 'success-header' : lastCheckInResult?.status === 'NOT_ALLOWED' ? 'warning-header' : 'error-header'">
-            <div class="decorative-circles">
-              <div class="circle circle-1"></div>
-              <div class="circle circle-2"></div>
-              <div class="circle circle-3"></div>
-            </div>
-            
-            <div class="icon-wrapper mb-4">
-              <div class="icon-bg" :class="lastCheckInResult?.success && infoAction === 'checkin' ? 'icon-bg-success' : lastCheckInResult?.status === 'NOT_ALLOWED' ? 'icon-bg-warning' : 'icon-bg-error'">
-                <v-icon size="64" color="white" class="dialog-icon">
-                  {{ lastCheckInResult?.success && infoAction === 'checkin' ? 'mdi-check-circle' : lastCheckInResult?.status === 'NOT_ALLOWED' ? 'mdi-alert-circle' : 'mdi-close-circle' }}
-                </v-icon>
-              </div>
-            </div>
-            
-            <h2 class="text-h4 font-weight-bold text-white mb-2">
-              {{ lastCheckInResult?.success && infoAction === 'checkin' 
-                ? 'Check-in Berhasil!' 
-                : lastCheckInResult?.status === 'NOT_ALLOWED'
-                ? 'Belum Diizinkan'
-                : 'Check-in Gagal' }}
-            </h2>
-            
-            <div class="status-badge mt-3">
-              <v-chip 
-                :color="lastCheckInResult?.success && infoAction === 'checkin' ? 'white' : 'white'" 
-                :text-color="lastCheckInResult?.success && infoAction === 'checkin' ? 'success' : lastCheckInResult?.status === 'NOT_ALLOWED' ? 'orange' : 'error'"
-                size="small"
-                class="font-weight-bold"
-              >
-                <v-icon start size="16">
-                  {{ lastCheckInResult?.success && infoAction === 'checkin' ? 'mdi-check' : lastCheckInResult?.status === 'NOT_ALLOWED' ? 'mdi-clock-alert' : 'mdi-close-circle' }}
-                </v-icon>
-                {{ lastCheckInResult?.success && infoAction === 'checkin' 
-                  ? 'Berhasil' 
-                  : lastCheckInResult?.status === 'NOT_ALLOWED'
-                  ? 'Menunggu'
-                  : 'Gagal' }}
-              </v-chip>
-            </div>
-          </div>
-          
-          <v-card-text class="pa-8">
-            <div class="message-container">
-              <div class="message-icon mb-4">
-                <v-icon :color="lastCheckInResult?.success && infoAction === 'checkin' ? 'success' : lastCheckInResult?.status === 'NOT_ALLOWED' ? 'orange' : 'error'" size="32">
-                  {{ lastCheckInResult?.success && infoAction === 'checkin' ? 'mdi-check-circle' : lastCheckInResult?.status === 'NOT_ALLOWED' ? 'mdi-clock-alert' : 'mdi-close-circle' }}
-                </v-icon>
-              </div>
-              
-              <div class="text-h6 font-weight-bold mb-3 text-center" style="white-space: pre-line;">{{ infoMessage }}</div>
-              
-              <v-divider class="my-4"></v-divider>
-              
-              <div v-if="lastCheckInResult" class="instruction-box pa-4 rounded-lg" :class="lastCheckInResult.success && infoAction === 'checkin' ? 'instruction-success' : 'instruction-warning'">
-                <div class="d-flex align-start">
-                  <v-icon :color="lastCheckInResult.success && infoAction === 'checkin' ? 'success' : 'orange'" class="mr-3 mt-1">
-                    {{ lastCheckInResult.success && infoAction === 'checkin' ? 'mdi-check-circle' : 'mdi-timer-sand' }}
-                  </v-icon>
-                  <div>
-                    <p class="text-body-1 font-weight-medium mb-1">
-                      {{ lastCheckInResult.success && infoAction === 'checkin' ? 'Status Check-in:' : 'Status:' }}
-                    </p>
-                    <p class="text-body-2 text-grey-darken-1">
-                      {{ lastCheckInResult.success && infoAction === 'checkin' 
-                        ? 'Check-in telah berhasil dilakukan. Pasien dapat melanjutkan ke tahap selanjutnya.' 
-                        : lastCheckInResult.status === 'NOT_ALLOWED'
-                        ? 'Mohon menunggu hingga antrean Anda dipanggil oleh petugas'
-                        : 'Proses check-in gagal. Silakan coba lagi atau hubungi petugas.' }}
-                    </p>
-                  </div>
-                </div>
-              </div>
-              
-              <!-- Patient Info Card -->
-              <v-card variant="outlined" class="mt-4 patient-info-card" color="grey-lighten-4">
-                <v-card-text class="py-3">
-                  <div class="d-flex justify-space-between align-center">
-                    <div class="d-flex align-center">
-                      <v-icon color="primary" class="mr-2 patient-info-icon">mdi-account-circle</v-icon>
-                      <div>
-                        <p class="text-caption patient-info-label mb-0">ID Pasien</p>
-                        <p class="text-body-1 patient-info-value mb-0">{{ scannedData?.split('|')[0] || 'N/A' }}</p>
-                      </div>
-                    </div>
-                    <div class="text-right">
-                      <p class="text-caption patient-info-label mb-0">Waktu Scan</p>
-                      <p class="text-body-2 patient-info-value mb-0">{{ new Date().toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' }) }}</p>
-                    </div>
-                  </div>
-                </v-card-text>
-              </v-card>
-            </div>
-          </v-card-text>
-          
-          <v-card-actions class="pa-6 pt-0">
-            <v-row dense>
-              <v-col v-if="infoAction === 'kembali'" cols="12">
-                <v-btn
-                  color="grey-darken-1"
-                  class="text-white font-weight-bold text-none dialog-button"
-                  size="x-large"
-                  block
-                  variant="flat"
-                  @click="handleInfoAction"
-                  elevation="0"
-                  prepend-icon="mdi-arrow-left"
-                >
-                  Kembali
-                </v-btn>
-              </v-col>
-              <template v-else>
-                <v-col cols="12">
-                  <v-btn
-                    :color="lastCheckInResult?.success && infoAction === 'checkin' ? 'success' : 'primary'"
-                    class="text-white font-weight-bold text-none dialog-button"
-                    size="x-large"
-                    block
-                    variant="flat"
-                    @click="handleInfoAction"
-                    elevation="4"
-                    :prepend-icon="lastCheckInResult?.success && infoAction === 'checkin' ? 'mdi-check' : 'mdi-close'"
-                  >
-                    {{ lastCheckInResult?.success && infoAction === 'checkin' ? 'Tutup' : 'Tutup' }}
-                  </v-btn>
-                </v-col>
-              </template>
-            </v-row>
-          </v-card-actions>
-        </v-card>
-      </v-dialog>
-      
-      <!-- Enhanced Snackbar -->
-      <v-snackbar
-        v-model="snackbar.show"
-        :color="snackbar.color"
-        :timeout="snackbar.timeout"
-        location="bottom right"
-        rounded="pill"
-        elevation="24"
-        class="custom-snackbar"
-      >
-        <div class="d-flex align-center">
-          <v-avatar :color="snackbar.color" size="32" class="mr-3">
-            <v-icon size="20" color="white">{{ snackbar.icon }}</v-icon>
-          </v-avatar>
-          <div>
-            <div class="font-weight-bold">{{ snackbar.title }}</div>
-            <div class="text-body-2">{{ snackbar.message }}</div>
-          </div>
-        </div>
-      </v-snackbar>
-  
-      <!-- History Dialog -->
-      <v-dialog 
-        v-model="historyDialog" 
-        max-width="800" 
-        persistent
-        transition="dialog-transition"
-        scrim="rgba(0, 0, 0, 0.5)"
-        class="blur-dialog"
-      >
-        <v-card class="rounded-xl dialog-card" elevation="24">
-          <div class="dialog-header text-center pa-6" style="background: linear-gradient(135deg, #1565C0 0%, #0D47A1 100%);">
-            <h2 class="text-h5 font-weight-bold text-white mb-2">
-              <v-icon color="white" class="mr-2">mdi-history</v-icon>
-              Riwayat Check-in
-            </h2>
-            <p class="text-body-2 text-white opacity-90">Daftar check-in yang telah dilakukan</p>
-          </div>
-          
-          <v-card-text class="pa-6">
-            <!-- Filter dan Search -->
-            <div class="mb-4">
-              <v-row dense>
-                <v-col cols="12" md="6">
-                  <v-text-field
-                    v-model="historySearch"
-                    label="Cari ID Pasien atau Nomor Antrean"
-                    prepend-inner-icon="mdi-magnify"
-                    variant="outlined"
-                    density="comfortable"
-                    clearable
-                    hide-details
-                  ></v-text-field>
-                </v-col>
-                <v-col cols="12" md="3">
-                  <v-select
-                    v-model="historyStatusFilter"
-                    label="Filter Status"
-                    :items="historyStatusOptions"
-                    variant="outlined"
-                    density="comfortable"
-                    hide-details
-                    clearable
-                  ></v-select>
-                </v-col>
-                <v-col cols="12" md="3">
-                  <v-btn
-                    color="error"
-                    variant="outlined"
-                    block
-                    @click="clearHistory"
-                    :disabled="checkInHistory.length === 0"
-                  >
-                    <v-icon start>mdi-delete</v-icon>
-                    Hapus Semua
-                  </v-btn>
-                </v-col>
-              </v-row>
-            </div>
-  
-            <!-- History List -->
-            <div v-if="filteredHistory.length > 0" class="history-list">
-              <v-card
-                v-for="(item, index) in filteredHistory"
-                :key="index"
-                variant="outlined"
-                class="mb-3 history-item"
-                :class="getStatusClass(item.status)"
-              >
-                <v-card-text class="pa-4">
-                  <div class="d-flex justify-space-between align-start">
-                    <div class="flex-grow-1">
-                      <div class="d-flex align-center mb-2">
-                        <v-chip
-                          :color="getStatusColor(item.status)"
-                          size="small"
-                          class="mr-2"
-                        >
-                          <v-icon start size="16">{{ getStatusIcon(item.status) }}</v-icon>
-                          {{ getStatusText(item.status) }}
-                        </v-chip>
-                        <v-chip
-                          color="grey-lighten-1"
-                          size="x-small"
-                          variant="text"
-                        >
-                          {{ item.method }}
-                        </v-chip>
-                      </div>
-                      
-                      <div class="mb-2">
-                        <p class="text-body-1 font-weight-bold mb-1">
-                          <v-icon size="18" class="mr-1" :color="primaryColor">mdi-account-circle</v-icon>
-                          ID Pasien: {{ item.patientId }}
-                        </p>
-                        <p v-if="item.queueNumber" class="text-body-2 text-grey mb-1">
-                          <v-icon size="16" class="mr-1">mdi-ticket</v-icon>
-                          Nomor Antrean: {{ item.queueNumber }}
-                        </p>
-                      </div>
-                      
-                      <div class="d-flex flex-wrap gap-2">
-                        <v-chip
-                          size="x-small"
-                          variant="outlined"
-                          color="grey-darken-1"
-                        >
-                          <v-icon start size="14">mdi-clock-outline</v-icon>
-                          {{ formatDateTime(item.checkInTime) }}
-                        </v-chip>
-                        <v-chip
-                          v-if="item.checkInDate"
-                          size="x-small"
-                          variant="outlined"
-                          color="grey-darken-1"
-                        >
-                          <v-icon start size="14">mdi-calendar</v-icon>
-                          {{ formatDate(item.checkInDate) }}
-                        </v-chip>
-                      </div>
-                    </div>
-                    
-                    <div class="ml-4">
-                      <v-btn
-                        icon
-                        size="small"
-                        variant="text"
-                        color="error"
-                        @click="deleteHistoryItem(index)"
-                      >
-                        <v-icon>mdi-delete-outline</v-icon>
-                      </v-btn>
-                    </div>
-                  </div>
-                </v-card-text>
-              </v-card>
-            </div>
-  
-            <!-- Empty State -->
-            <div v-else class="text-center py-12">
-              <v-icon size="64" color="grey-lighten-1" class="mb-4">mdi-history</v-icon>
-              <p class="text-h6 text-grey mb-2">Belum ada riwayat check-in</p>
-              <p class="text-body-2 text-grey">Riwayat check-in akan muncul di sini setelah Anda melakukan check-in</p>
-            </div>
-          </v-card-text>
-          
-          <v-card-actions class="pa-6 pt-0">
-            <v-spacer></v-spacer>
-            <v-btn
-              color="primary"
-              class="text-white font-weight-bold text-none"
-              size="large"
-              variant="flat"
-              @click="historyDialog = false"
-              prepend-icon="mdi-close"
-            >
-              Tutup
-            </v-btn>
-          </v-card-actions>
-        </v-card>
-      </v-dialog>
-  
-      <!-- QR History Dialog -->
-      <v-dialog 
-        v-model="qrHistoryDialog" 
-        max-width="800" 
-        persistent
-        transition="dialog-transition"
-        scrim="rgba(0, 0, 0, 0.5)"
-        class="blur-dialog"
-      >
-        <v-card class="rounded-xl dialog-card" elevation="24">
-          <div class="dialog-header text-center pa-6" style="background: linear-gradient(135deg, #FB8C00 0%, #F57C00 100%);">
-            <h2 class="text-h5 font-weight-bold text-white mb-2">
-              <v-icon color="white" class="mr-2">mdi-qrcode-scan</v-icon>
-              Riwayat QR Scan
-            </h2>
-            <p class="text-body-2 text-white opacity-90">Daftar QR code yang telah di-scan</p>
-          </div>
-          
-          <v-card-text class="pa-6">
-            <!-- Filter dan Search -->
-            <div class="mb-4">
-              <v-row dense>
-                <v-col cols="12" md="9">
-                  <v-text-field
-                    v-model="historySearch"
-                    label="Cari Data QR Code"
-                    prepend-inner-icon="mdi-magnify"
-                    variant="outlined"
-                    density="comfortable"
-                    clearable
-                    hide-details
-                  ></v-text-field>
-                </v-col>
-                <v-col cols="12" md="3">
-                  <v-btn
-                    color="error"
-                    variant="outlined"
-                    block
-                    @click="clearQRHistory"
-                    :disabled="scannedQRHistory.length === 0"
-                  >
-                    <v-icon start>mdi-delete</v-icon>
-                    Hapus Semua
-                  </v-btn>
-                </v-col>
-              </v-row>
-            </div>
-  
-            <!-- QR History List -->
-            <div v-if="filteredQRHistory.length > 0" class="history-list">
-              <v-card
-                v-for="(item, index) in filteredQRHistory"
-                :key="index"
-                variant="outlined"
-                class="mb-3 history-item"
-              >
-                <v-card-text class="pa-4">
-                  <div class="d-flex justify-space-between align-start">
-                    <div class="flex-grow-1">
-                      <div class="mb-2">
-                        <p class="text-body-1 font-weight-bold mb-1">
-                          <v-icon size="18" class="mr-1" :color="primaryColor">mdi-qrcode</v-icon>
-                          Data QR: {{ item.data }}
-                        </p>
-                      </div>
-                      
-                      <div class="d-flex flex-wrap gap-2">
-                        <v-chip
-                          size="x-small"
-                          variant="outlined"
-                          color="grey-darken-1"
-                        >
-                          <v-icon start size="14">mdi-clock-outline</v-icon>
-                          {{ item.time }}
-                        </v-chip>
-                        <v-chip
-                          size="x-small"
-                          variant="outlined"
-                          color="grey-darken-1"
-                        >
-                          <v-icon start size="14">mdi-calendar</v-icon>
-                          {{ item.date }}
-                        </v-chip>
-                      </div>
-                    </div>
-                    
-                    <div class="ml-4">
-                      <v-btn
-                        icon
-                        size="small"
-                        variant="text"
-                        color="primary"
-                        @click="useQRData(item.data)"
-                      >
-                        <v-icon>mdi-refresh</v-icon>
-                      </v-btn>
-                      <v-btn
-                        icon
-                        size="small"
-                        variant="text"
-                        color="error"
-                        @click="deleteQRHistoryItem(index)"
-                      >
-                        <v-icon>mdi-delete-outline</v-icon>
-                      </v-btn>
-                    </div>
-                  </div>
-                </v-card-text>
-              </v-card>
-            </div>
-  
-            <!-- Empty State -->
-            <div v-else class="text-center py-12">
-              <v-icon size="64" color="grey-lighten-1" class="mb-4">mdi-qrcode-scan</v-icon>
-              <p class="text-h6 text-grey mb-2">Belum ada riwayat QR scan</p>
-              <p class="text-body-2 text-grey">Riwayat QR scan akan muncul di sini setelah Anda melakukan scan</p>
-            </div>
-          </v-card-text>
-          
-          <v-card-actions class="pa-6 pt-0">
-            <v-spacer></v-spacer>
-            <v-btn
-              color="primary"
-              class="text-white font-weight-bold text-none"
-              size="large"
-              variant="flat"
-              @click="qrHistoryDialog = false"
-              prepend-icon="mdi-close"
-            >
-              Tutup
-            </v-btn>
-          </v-card-actions>
-        </v-card>
-      </v-dialog>
-  
-    </v-app>
-  </template>
-  
-<script setup lang="ts">
-import { ref, computed, nextTick, onMounted, onUnmounted, watch } from 'vue';
-import { useMasterStore } from '@/stores/masterStore';
-
-definePageMeta({
-  middleware:['auth'],
-  layout: false,
-})
-
-const masterStore = useMasterStore();
-  
-  
-  // TypeScript declaration for QRCode
-  declare global {
-    interface Window {
-      QRCode: any;
-    }
-  }
-  
-  // --- DESAIN & TEMA ---
-  const primaryColor = ref('#1565C0');
-  const secondaryColor = ref('#FB8C00');
-  
-  // --- LOGIKA ---
-  const tab = ref('scan');
-  const infoDialog = ref(false);
-  const infoMessage = ref('');
-  const infoAction = ref<'checkin' | 'kembali'>('kembali');
-  let autoCloseTimer: ReturnType<typeof setTimeout> | null = null; 
-  const scannedData = ref<string | null>(null);
-  const manualInput = ref('');
-  const manualForm = ref(null);
-  const lastCheckInResult = ref<{ success: boolean; patientId: string; status: string } | null>(null);
-  
-  // QR Scanner state
-  const isScanning = ref(false);
-  const hasCamera = ref(false);
-  const cameraChecking = ref(true);
-  const cameraReady = ref(false);
-  let html5QrCode: any = null;
-  const qrCodeId = 'qr-reader';
-  let lastScannedQR: string | null = null;
-  let lastScanTime: number = 0;
-  const SCAN_DEBOUNCE_MS = 2000; // 2 detik debounce untuk mencegah scan berulang
-  
-  // Daftar QR code yang sudah berhasil di-scan (untuk mencegah double antrian)
-  const SUCCESSFUL_SCANS_KEY = 'successful_qr_scans';
-  const successfulScans = ref<Set<string>>(new Set());
-  
-  // Detect mobile device
-  const isMobile = ref(false);
-  if (typeof window !== 'undefined') {
-    isMobile.value = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || 
-                     (window.innerWidth <= 768);
-  }
-  
-  // History Dialog
-  const historyDialog = ref(false);
-  const historySearch = ref('');
-  const historyStatusFilter = ref('');
-  const checkInHistory = ref<Array<{
-    patientId: string;
-    queueNumber?: string;
-    status: string;
-    checkInTime: string;
-    checkInDate: string;
-    method: string;
-  }>>([]);
-  
-  // QR History Dialog
-  const qrHistoryDialog = ref(false);
-  const scannedQRHistory = ref<Array<{
-    data: string;
-    timestamp: string;
-    date: string;
-    time: string;
-  }>>([]);
-  
-  const historyStatusOptions = [
-    { title: 'Berhasil', value: 'success' },
-    { title: 'Gagal', value: 'failed' },
-    { title: 'Pending', value: 'pending' }
-  ];
-  
-  // Generate QR variables
-  const generatePatientId = ref('');
-  const generateStatus = ref('ALLOWED');
-  const generatedQRData = ref('');
-  const selectedKlinik = ref('');
-  const statusOptions = [
-    { title: 'Diizinkan Check-in', value: 'ALLOWED' },
-    { title: 'Belum Diizinkan', value: 'NOT_ALLOWED' }
-  ];
-  
-  // Get klinik list for dropdown
-  const klinikOptions = computed(() => {
-    const klinikList = masterStore.klinikList.map((k: { kode: string; nama: string }) => ({
-      title: `${k.kode} - ${k.nama}`,
-      value: k.kode
-    }));
-    
-    // Tambahkan opsi "UM" (Umum) di awal list
-    return [
-      { title: 'UM - Umum', value: 'UM' },
-      ...klinikList
-    ];
-  });
-  
-  // Sequential Patient ID Management
-  const PATIENT_ID_STORAGE_KEY = 'checkin_patient_id_counter';
-  const QUEUE_NUMBER_STORAGE_KEY = 'checkin_queue_number_counters';
-  
-  // Generate sequential patient ID (P-00001, P-00002, etc.)
-  const generateSequentialPatientId = (): string => {
-    if (typeof window === 'undefined') return 'P-00001';
-    
-    let counter = parseInt(localStorage.getItem(PATIENT_ID_STORAGE_KEY) || '0', 10);
-    counter += 1;
-    localStorage.setItem(PATIENT_ID_STORAGE_KEY, counter.toString());
-    
-    return `P-${String(counter).padStart(5, '0')}`;
-  };
-  
-  // Generate sequential queue number based on klinik code (AN-0001, AS-0001, etc.)
-  const generateSequentialQueueNumber = (kodeKlinik: string): string => {
-    if (typeof window === 'undefined') return `${kodeKlinik}-0001`;
-    
-    const counters = JSON.parse(localStorage.getItem(QUEUE_NUMBER_STORAGE_KEY) || '{}');
-    let counter = parseInt(counters[kodeKlinik] || '0', 10);
-    counter += 1;
-    counters[kodeKlinik] = counter;
-    localStorage.setItem(QUEUE_NUMBER_STORAGE_KEY, JSON.stringify(counters));
-    
-    return `${kodeKlinik}-${String(counter).padStart(4, '0')}`;
-  };
-  
-  
-  const snackbar = ref({
-    show: false,
-    title: '',
-    message: '',
-    color: '',
-    icon: '',
-    timeout: 4000,
-  });
-  
-  // Check camera availability
-  const checkCameraAvailability = async () => {
-    cameraChecking.value = true;
-    hasCamera.value = false;
-    
-    // Check if browser supports mediaDevices
-    if (typeof navigator === 'undefined' || !navigator.mediaDevices) {
-      console.error('navigator.mediaDevices is not supported');
-      showSnackbar('Error', 'Browser tidak mendukung akses kamera. Pastikan menggunakan HTTPS atau localhost.', 'error', 'mdi-camera-off');
-      cameraChecking.value = false;
-      return;
-    }
-  
-    try {
-      // First, request permission by trying to get user media
-      // This is required for enumerateDevices to return device labels
-      const stream = await navigator.mediaDevices.getUserMedia({ video: true });
-      
-      // Stop the stream immediately after getting permission
-      stream.getTracks().forEach(track => track.stop());
-      
-      // Now enumerate devices (will have labels after permission granted)
-      const devices = await navigator.mediaDevices.enumerateDevices();
-      const videoDevices = devices.filter(device => device.kind === 'videoinput');
-      
-      hasCamera.value = videoDevices.length > 0;
-      
-      if (hasCamera.value) {
-        console.log(`Found ${videoDevices.length} camera(s):`, videoDevices.map(d => d.label || d.deviceId));
-      } else {
-        console.warn('No video input devices found');
-        showSnackbar('Warning', 'Tidak ada kamera yang terdeteksi', 'warning', 'mdi-camera-off');
-      }
-    } catch (err: any) {
-      console.error('Error checking camera:', err);
-      hasCamera.value = false;
-      
-      let errorMessage = 'Gagal mengakses kamera. ';
-      if (err.name === 'NotAllowedError' || err.name === 'PermissionDeniedError') {
-        errorMessage += 'Izin kamera ditolak. Mohon izinkan akses kamera di pengaturan browser.';
-      } else if (err.name === 'NotFoundError' || err.name === 'DevicesNotFoundError') {
-        errorMessage += 'Tidak ada kamera yang ditemukan.';
-      } else if (err.name === 'NotReadableError' || err.name === 'TrackStartError') {
-        errorMessage += 'Kamera sedang digunakan aplikasi lain.';
-      } else if (err.name === 'OverconstrainedError' || err.name === 'ConstraintNotSatisfiedError') {
-        errorMessage += 'Kamera tidak memenuhi persyaratan.';
-      } else {
-        errorMessage += `Error: ${err.message || err.name}`;
-      }
-      
-      showSnackbar('Error', errorMessage, 'error', 'mdi-camera-off');
-    } finally {
-      cameraChecking.value = false;
-    }
-  };
-  
-  // Test camera function for debugging
-  const testCamera = async () => {
-    try {
-      showSnackbar('Info', 'Menguji akses kamera...', 'info', 'mdi-camera');
-      
-      if (typeof navigator === 'undefined') {
-        showSnackbar('Error', 'navigator is undefined - pastikan di browser, bukan SSR', 'error', 'mdi-alert');
-        return;
-      }
-      
-      if (!navigator.mediaDevices) {
-        showSnackbar('Error', 'navigator.mediaDevices is undefined - pastikan menggunakan HTTPS atau localhost', 'error', 'mdi-alert');
-        return;
-      }
-      
-      if (!navigator.mediaDevices.getUserMedia) {
-        showSnackbar('Error', 'getUserMedia is not supported', 'error', 'mdi-alert');
-        return;
-      }
-      
-      const stream = await navigator.mediaDevices.getUserMedia({ 
-        video: {
-          facingMode: 'user',
-          width: { ideal: 1920, min: 1280 },
-          height: { ideal: 1080, min: 720 }
-        } 
-      });
-      
-      showSnackbar('Success', 'Kamera berhasil diakses!', 'success', 'mdi-check-circle');
-      
-      // Stop stream after 2 seconds
-      setTimeout(() => {
-        stream.getTracks().forEach(track => track.stop());
-      }, 2000);
-      
-    } catch (err: any) {
-      console.error('Test camera error:', err);
-      let errorMsg = `Error: ${err.name || 'Unknown'}`;
-      if (err.message) errorMsg += ` - ${err.message}`;
-      showSnackbar('Error', errorMsg, 'error', 'mdi-alert');
-    }
-  };
-  
-  // QR Scanner Functions
-  const startScanning = async () => {
-    // Check camera first
-    if (!hasCamera.value) {
-      await checkCameraAvailability();
-      if (!hasCamera.value) {
-        showSnackbar('Error', 'Kamera tidak tersedia. Silakan gunakan input manual atau pastikan kamera terhubung.', 'error', 'mdi-camera-off');
-        return;
-      }
-    }
-  
-    try {
-      // Set scanning state first to render the element
-      isScanning.value = true;
-      
-      // Wait for DOM to update and element to be rendered
-      await nextTick();
-      
-      // Wait a bit more to ensure element is fully rendered
-      await new Promise(resolve => setTimeout(resolve, 100));
-      
-      // Check if element exists
-      const qrElement = document.getElementById(qrCodeId);
-      if (!qrElement) {
-        console.error(`Element with id "${qrCodeId}" not found in DOM`);
-        isScanning.value = false;
-        showSnackbar('Error', 'Element scanner tidak ditemukan. Silakan refresh halaman.', 'error', 'mdi-alert');
-        return;
-      }
-      
-      // Dynamic import html5-qrcode
-      if (!html5QrCode) {
-        const { Html5Qrcode: Html5QrcodeClass } = await import('html5-qrcode');
-        html5QrCode = new Html5QrcodeClass(qrCodeId);
-        console.log('Html5Qrcode initialized');
-      }
-  
-      if (html5QrCode) {
-        cameraReady.value = false;
-        
-        // Konfigurasi kamera untuk mobile dan desktop
-        const cameraConfig = isMobile.value 
-          ? { facingMode: "environment" } // Mobile: gunakan kamera belakang
-          : { facingMode: "user" }; // Desktop: gunakan kamera depan (webcam)
-        
-        // Video constraints yang dioptimalkan untuk kualitas tinggi
-        const baseVideoConstraints = isMobile.value
-          ? {
-              facingMode: "environment",
-              width: { ideal: 1280, min: 640, max: 1920 },
-              height: { ideal: 720, min: 480, max: 1080 }
-            }
-          : {
-              facingMode: "user",
-              width: { ideal: 1920, min: 1280, max: 1920 },
-              height: { ideal: 1080, min: 720, max: 1080 }
-            };
-        
-        // Tambahkan advanced constraints hanya jika didukung
-        const videoConstraints: any = { ...baseVideoConstraints };
-        
-        console.log('Starting QR scanner with config:', {
-          isMobile: isMobile.value,
-          cameraConfig,
-          videoConstraints
-        });
-        
-        try {
-          await html5QrCode.start(
-            cameraConfig,
-            {
-              fps: isMobile.value ? 30 : 30, // FPS tinggi untuk deteksi lebih baik dan smooth
-              qrbox: function(viewfinderWidth: number, viewfinderHeight: number) {
-                // QR box dengan ukuran lebih besar untuk deteksi lebih mudah
-                const minEdgeSize = Math.min(viewfinderWidth, viewfinderHeight);
-                // Gunakan 80-90% dari viewfinder untuk area scanning yang lebih besar
-                const percentageSize = Math.floor(minEdgeSize * 0.80);
-                // Atau ukuran tetap yang lebih besar
-                const fixedSize = isMobile.value ? 250 : 250;
-                // Gunakan yang lebih besar antara percentage atau fixed
-                const qrboxSize = Math.max(percentageSize, fixedSize);
-                
-                // Pastikan tidak melebihi viewfinder
-                const finalSize = Math.min(qrboxSize, minEdgeSize * 0.80);
-                
-                console.log('QR Box size:', finalSize, 'Viewfinder:', viewfinderWidth, 'x', viewfinderHeight);
-                
-                return {
-                  width: Math.max(finalSize, 250), // Minimum 250px untuk deteksi lebih baik
-                  height: Math.max(finalSize, 250)
-                };
-              },
-              aspectRatio: 1.0,
-              disableFlip: false,
-              videoConstraints: videoConstraints,
-              rememberLastUsedCamera: true,
-              showTorchButtonIfSupported: true,
-              // Tambahkan opsi untuk meningkatkan deteksi
-              verbose: false // Set true untuk debugging
-            },
-            (decodedText: string, decodedResult: any) => {
-              // QR Code berhasil di-scan
-              console.log('✅ QR Code detected:', decodedText);
-              console.log('📊 Decoded result:', decodedResult);
-              
-              // Validasi dan proses QR code
-              if (decodedText && decodedText.trim() !== '') {
-                handleQRScanSuccess(decodedText);
-              } else {
-                console.warn('Empty QR code detected');
-              }
-            },
-            (errorMessage: string) => {
-              // Log error untuk debugging - hanya log error penting
-              // Error ini biasanya muncul terus menerus saat tidak ada QR code yang terdeteksi
-              // Jadi kita filter untuk menghindari spam console
-              if (errorMessage) {
-                // Filter out common non-critical errors
-                const isCriticalError = !errorMessage.includes('NotFoundException') && 
-                                       !errorMessage.includes('No QR') &&
-                                       !errorMessage.includes('QR code parse error') &&
-                                       !errorMessage.includes('QR code parse error, error') &&
-                                       !errorMessage.includes('QR code decode error');
-                
-                if (isCriticalError) {
-                  console.warn('QR Scanner warning:', errorMessage);
-                }
-              }
-            }
-          );
-          
-          // Set camera ready setelah sedikit delay untuk memastikan video sudah dimuat
-          setTimeout(() => {
-            cameraReady.value = true;
-            console.log('Camera ready, scanner is active');
-          }, 500);
-          
-          showSnackbar('Info', 'Scanner aktif. Arahkan kamera ke QR code dan pastikan pencahayaan cukup', 'info', 'mdi-camera');
-        } catch (cameraError: any) {
-          console.error('Camera error:', cameraError);
-          
-          // Jika kamera belakang tidak tersedia di mobile, coba kamera depan
-          if (isMobile.value && cameraError.name === 'NotFoundError') {
-            try {
-              console.log('Trying front camera as fallback...');
-              await html5QrCode.start(
-                { facingMode: "user" },
-                {
-                  fps: 30,
-                  qrbox: function(viewfinderWidth: number, viewfinderHeight: number) {
-                    const minEdgeSize = Math.min(viewfinderWidth, viewfinderHeight);
-                    const percentageSize = Math.floor(minEdgeSize * 0.85);
-                    const fixedSize = 300;
-                    const qrboxSize = Math.max(percentageSize, fixedSize);
-                    const finalSize = Math.min(qrboxSize, minEdgeSize * 0.95);
-                    
-                    return {
-                      width: Math.max(finalSize, 250),
-                      height: Math.max(finalSize, 250)
-                    };
-                  },
-                  aspectRatio: 1.0,
-                  disableFlip: false,
-                  videoConstraints: {
-                    facingMode: "user",
-                    width: { ideal: 1280, min: 640, max: 1920 },
-                    height: { ideal: 720, min: 480, max: 1080 }
-                  },
-                  rememberLastUsedCamera: true,
-                  verbose: false
-                },
-                (decodedText: string, decodedResult: any) => {
-                  console.log('✅ QR Code detected (front camera):', decodedText);
-                  if (decodedText && decodedText.trim() !== '') {
-                    handleQRScanSuccess(decodedText);
-                  }
-                },
-                (errorMessage: string) => {
-                  if (errorMessage) {
-                    const isCriticalError = !errorMessage.includes('NotFoundException') && 
-                                           !errorMessage.includes('No QR') &&
-                                           !errorMessage.includes('QR code parse error') &&
-                                           !errorMessage.includes('QR code decode error');
-                    
-                    if (isCriticalError) {
-                      console.warn('QR Scanner (front) warning:', errorMessage);
-                    }
-                  }
-                }
-              );
-              
-              setTimeout(() => {
-                cameraReady.value = true;
-              }, 500);
-              
-              showSnackbar('Info', 'Menggunakan kamera depan. Arahkan QR code ke kamera', 'info', 'mdi-camera');
-            } catch (fallbackError: any) {
-              console.error('Fallback camera also failed:', fallbackError);
-              throw cameraError; // Throw original error
-            }
-          } else {
-            // Coba menggunakan deviceId langsung jika facingMode gagal
-            try {
-              console.log('Trying to get camera devices...');
-              const devices = await navigator.mediaDevices.enumerateDevices();
-              const videoDevices = devices.filter(device => device.kind === 'videoinput');
-              
-              if (videoDevices.length > 0) {
-                // Gunakan kamera pertama yang tersedia
-                const deviceId = videoDevices[0].deviceId;
-                console.log('Using device:', deviceId, videoDevices[0].label);
-                
-                await html5QrCode.start(
-                  { deviceId: { exact: deviceId } },
-                  {
-                    fps: 30,
-                    qrbox: function(viewfinderWidth: number, viewfinderHeight: number) {
-                      const minEdgeSize = Math.min(viewfinderWidth, viewfinderHeight);
-                      const percentageSize = Math.floor(minEdgeSize * 0.80);
-                      const fixedSize = isMobile.value ? 300 : 400;
-                      const qrboxSize = Math.max(percentageSize, fixedSize);
-                      const finalSize = Math.min(qrboxSize, minEdgeSize * 0.80);
-                      
-                      return {
-                        width: Math.max(finalSize, 250),
-                        height: Math.max(finalSize, 250)
-                      };
-                    },
-                    aspectRatio: 1.0,
-                    disableFlip: false,
-                    videoConstraints: {
-                      deviceId: { exact: deviceId },
-                      width: { ideal: isMobile.value ? 1280 : 1920, min: isMobile.value ? 640 : 1280, max: isMobile.value ? 1920 : 1920 },
-                      height: { ideal: isMobile.value ? 720 : 1080, min: isMobile.value ? 480 : 720, max: isMobile.value ? 1080 : 1080 }
-                    },
-                    rememberLastUsedCamera: true,
-                    verbose: false
-                  },
-                  (decodedText: string, decodedResult: any) => {
-                    console.log('✅ QR Code detected (deviceId):', decodedText);
-                    if (decodedText && decodedText.trim() !== '') {
-                      handleQRScanSuccess(decodedText);
-                    }
-                  },
-                  (errorMessage: string) => {
-                    if (errorMessage) {
-                      const isCriticalError = !errorMessage.includes('NotFoundException') && 
-                                             !errorMessage.includes('No QR') &&
-                                             !errorMessage.includes('QR code parse error') &&
-                                             !errorMessage.includes('QR code decode error');
-                      
-                      if (isCriticalError) {
-                        console.warn('QR Scanner (deviceId) warning:', errorMessage);
-                      }
-                    }
-                  }
-                );
-                
-                setTimeout(() => {
-                  cameraReady.value = true;
-                }, 500);
-                
-                showSnackbar('Info', 'Scanner aktif menggunakan kamera yang tersedia', 'info', 'mdi-camera');
-              } else {
-                throw cameraError;
-              }
-            } catch (deviceError: any) {
-              console.error('DeviceId approach also failed:', deviceError);
-              throw cameraError;
-            }
-          }
-        }
-      }
-    } catch (err: any) {
-      console.error('Error starting scanner:', err);
-      isScanning.value = false;
-      cameraReady.value = false;
-      
-      // Don't set hasCamera to false if it was detected, just log the error
-      let errorMessage = 'Gagal memulai scanner. ';
-      
-      if (err.message && err.message.includes('not found')) {
-        errorMessage = 'Element scanner tidak ditemukan. Silakan refresh halaman dan coba lagi.';
-        console.error('Element not found error. Element ID:', qrCodeId);
-      } else if (err.name === 'NotAllowedError') {
-        errorMessage = 'Akses kamera ditolak. Mohon izinkan akses kamera di pengaturan browser.';
-      } else if (err.name === 'NotFoundError') {
-        errorMessage = 'Kamera tidak ditemukan. Silakan gunakan input manual.';
-        hasCamera.value = false;
-      } else if (err.name === 'NotReadableError') {
-        errorMessage = 'Kamera sedang digunakan aplikasi lain. Tutup aplikasi lain yang menggunakan kamera.';
-      } else {
-        errorMessage += err.message || err.name || 'Unknown error';
-      }
-      
-      showSnackbar('Error', errorMessage, 'error', 'mdi-alert');
-    }
-  };
-  
-  const stopScanning = async () => {
-    try {
-      if (html5QrCode && isScanning.value) {
-        await html5QrCode.stop();
-        await html5QrCode.clear();
-        isScanning.value = false;
-        cameraReady.value = false;
-        showSnackbar('Info', 'Scanner dihentikan', 'info', 'mdi-camera-off');
-      }
-    } catch (err: any) {
-      console.error('Error stopping scanner:', err);
-      isScanning.value = false;
-      cameraReady.value = false;
-    }
-  };
-  
-  const handleQRScanSuccess = (decodedText: string) => {
-    console.log('🎯 QR Scan Success! Data:', decodedText);
-    
-    // Validasi data QR
-    if (!decodedText || decodedText.trim() === '') {
-      console.warn('QR Code data is empty');
-      showSnackbar('Error', 'QR Code tidak valid atau kosong', 'error', 'mdi-alert');
-      return;
-    }
-    
-    // Cek apakah QR code sudah pernah berhasil di-scan (mencegah double antrian)
-    if (isQRCodeAlreadyScanned(decodedText)) {
-      console.log('⏭️ Scan diabaikan: QR code sudah pernah berhasil di-scan');
-      showSnackbar('Peringatan', 'QR Code ini sudah pernah berhasil di-scan. Tidak dapat digunakan lagi untuk mencegah double antrian.', 'warning', 'mdi-alert-circle');
-      return;
-    }
-    
-    // Debounce: cegah scan berulang dalam waktu singkat
-    const now = Date.now();
-    if (lastScannedQR === decodedText && (now - lastScanTime) < SCAN_DEBOUNCE_MS) {
-      console.log('⏭️ Scan diabaikan (debounce): QR code sama dalam waktu singkat');
-      return;
-    }
-    
-    // Update last scan info
-    lastScannedQR = decodedText;
-    lastScanTime = now;
-    
-    // Simpan data QR yang di-scan
-    scannedData.value = decodedText;
-    
-    // Scanner tetap berjalan untuk memungkinkan scan QR code berikutnya
-    
-    // Proses data QR
-    try {
-      onDetect(decodedText);
-    } catch (error) {
-      console.error('Error processing QR data:', error);
-      showSnackbar('Error', 'Gagal memproses data QR Code', 'error', 'mdi-alert');
-    }
-    
-    // Simpan ke localStorage untuk riwayat
-    saveScannedQRData(decodedText);
-  };
-  
-  // Simpan data QR yang di-scan ke localStorage
-  const saveScannedQRData = (qrData: string) => {
-    if (typeof window !== 'undefined') {
-      const scannedQRs = JSON.parse(localStorage.getItem('scanned_qr_data') || '[]');
-      scannedQRs.unshift({
-        data: qrData,
-        timestamp: new Date().toISOString(),
-        date: new Date().toLocaleDateString('id-ID'),
-        time: new Date().toLocaleTimeString('id-ID')
-      });
-      
-      // Simpan maksimal 50 item
-      if (scannedQRs.length > 50) {
-        scannedQRs.pop();
-      }
-      
-      localStorage.setItem('scanned_qr_data', JSON.stringify(scannedQRs));
-    }
-  };
-  
-  // Load successful scans dari localStorage
-  const loadSuccessfulScans = () => {
-    if (typeof window !== 'undefined') {
-      const stored = localStorage.getItem(SUCCESSFUL_SCANS_KEY);
-      if (stored) {
-        try {
-          const scansArray = JSON.parse(stored);
-          successfulScans.value = new Set(scansArray);
-        } catch (e) {
-          console.error('Error loading successful scans:', e);
-          successfulScans.value = new Set();
-        }
-      }
-    }
-  };
-  
-  // Simpan successful scan ke localStorage
-  const saveSuccessfulScan = (qrData: string) => {
-    if (typeof window !== 'undefined') {
-      successfulScans.value.add(qrData);
-      const scansArray = Array.from(successfulScans.value);
-      localStorage.setItem(SUCCESSFUL_SCANS_KEY, JSON.stringify(scansArray));
-    }
-  };
-  
-  // Cek apakah QR code sudah pernah berhasil di-scan
-  const isQRCodeAlreadyScanned = (qrData: string): boolean => {
-    return successfulScans.value.has(qrData);
-  };
-  
-  // Watch tab changes untuk stop scanner saat pindah tab
-  watch(tab, (newTab) => {
-    if (newTab !== 'scan' && isScanning.value) {
-      stopScanning();
-    }
-    // Check camera when switching to scan tab
-    if (newTab === 'scan' && !hasCamera.value && !cameraChecking.value) {
-      checkCameraAvailability();
-    }
-  });
-  
-  // Check camera on mount and initialize patient ID
-  onMounted(() => {
-    if (typeof window !== 'undefined') {
-      // Initialize patient ID if empty
-      if (!generatePatientId.value) {
-        generatePatientId.value = generateSequentialPatientId();
-      }
-      
-      // Set default klinik if available
-      if (!selectedKlinik.value && klinikOptions.value.length > 0) {
-        selectedKlinik.value = klinikOptions.value[0].value;
-      }
-      
-      // Check camera availability
-      if (typeof navigator !== 'undefined') {
-        if (navigator.mediaDevices && typeof navigator.mediaDevices.getUserMedia === 'function') {
-          checkCameraAvailability();
-        } else {
-          console.warn('MediaDevices API not available. Make sure you are using HTTPS or localhost.');
-          hasCamera.value = false;
-          cameraChecking.value = false;
-          showSnackbar('Warning', 'MediaDevices API tidak tersedia. Pastikan menggunakan HTTPS atau localhost.', 'warning', 'mdi-alert');
-        }
-      } else {
-        hasCamera.value = false;
-        cameraChecking.value = false;
-      }
-    } else {
-      hasCamera.value = false;
-      cameraChecking.value = false;
-    }
-  });
-  
-  // Cleanup saat component unmount
-  onUnmounted(() => {
-    if (html5QrCode && isScanning.value) {
-      stopScanning();
-    }
-    // Clear auto-close timer jika ada
-    if (autoCloseTimer) {
-      clearTimeout(autoCloseTimer);
-      autoCloseTimer = null;
-    }
-  });
-  
-  const onDetect = async (decodedText: string) => {
-      const [patientId, status] = decodedText.split('|');
-      
-      // Validasi format QR code
-      if (!patientId || !status) {
-          showSnackbar('Error', 'QR Code tidak valid. Format harus: ID_PASIEN|STATUS', 'error', 'mdi-close-circle');
-          return;
-      }
-      
-      // Extract kode klinik from patient ID if available (format: P-00001 or from context)
-      // For now, we'll try to get it from the selected klinik or use a default
-      let kodeKlinik = selectedKlinik.value || '';
-      
-      // If no klinik selected, try to infer from context or use first available
-      if (!kodeKlinik && klinikOptions.value.length > 0) {
-        kodeKlinik = klinikOptions.value[0].value;
-      }
-      
-      // Cek apakah pasien diperbolehkan check-in
-      const isAllowed = status === 'ALLOWED';
-      
-      if (isAllowed) {
-          // Jika diperbolehkan, langsung proses check-in
-          // Proses check-in langsung
-          const checkinSuccess = await performCheckIn(decodedText, 'QR Scan');
-          
-          // Simpan hasil check-in
-          lastCheckInResult.value = {
-              success: checkinSuccess,
-              patientId: patientId,
-              status: status
-          };
-          
-          // Generate queue number based on klinik
-          const queueNumber = kodeKlinik ? generateSequentialQueueNumber(kodeKlinik) : undefined;
-          
-          // Simpan ke history check-in dengan status hasil check-in
-          saveToHistory({
-              patientId: patientId || 'Unknown',
-              queueNumber: queueNumber,
-              status: checkinSuccess ? 'success' : 'failed',
-              checkInTime: new Date().toISOString(),
-              checkInDate: new Date().toISOString(),
-              method: 'QR Scan',
-              kodeKlinik: kodeKlinik
-          });
-          
-          // Tampilkan dialog dengan hasil check-in
-          if (checkinSuccess) {
-              // Simpan QR code yang berhasil di-scan untuk mencegah scan ulang
-              saveSuccessfulScan(decodedText);
-              infoMessage.value = `✅ Check-in Berhasil!\n\nPasien ${patientId} berhasil melakukan check-in.`;
-              infoAction.value = 'checkin';
-          } else {
-              infoMessage.value = `❌ Check-in Gagal!\n\nPasien ${patientId} diperbolehkan check-in, namun proses check-in gagal. Silakan coba lagi.`;
-              infoAction.value = 'checkin';
-          }
-          
-          infoDialog.value = true;
-      } else {
-          // Jika belum diperbolehkan, tampilkan pesan
-          lastCheckInResult.value = {
-              success: false,
-              patientId: patientId,
-              status: status
-          };
-          
-          // Extract kode klinik (same as above)
-          let kodeKlinik = selectedKlinik.value || '';
-          if (!kodeKlinik && klinikOptions.value.length > 0) {
-            kodeKlinik = klinikOptions.value[0].value;
-          }
-          
-          // Simpan ke history check-in untuk NOT_ALLOWED
-          saveToHistory({
-              patientId: patientId || 'Unknown',
-              status: 'NOT_ALLOWED',
-              checkInTime: new Date().toISOString(),
-              checkInDate: new Date().toISOString(),
-              method: 'QR Scan',
-              kodeKlinik: kodeKlinik
-          });
-          
-          infoMessage.value = `⏳ Belum Diizinkan Check-in\n\nAntrean Pasien ${patientId} belum diperbolehkan check-in. Mohon menunggu hingga antrean Anda dipanggil.`;
-          infoAction.value = 'kembali';
-          infoDialog.value = true;
-      }
-  };
-  
-  const handleInfoAction = async () => {
-      // Clear auto-close timer jika ada
-      if (autoCloseTimer) {
-        clearTimeout(autoCloseTimer);
-        autoCloseTimer = null;
-      }
-      
-      infoDialog.value = false;
-      
-      // Scanner tetap berjalan setelah dialog ditutup
-      // Ini memungkinkan user untuk segera memproses QR code berikutnya
-      // tanpa perlu memulai scanner lagi
-  };
-  
-  // Watch infoDialog untuk auto-close setelah 3 detik
-  watch(infoDialog, (isOpen: boolean) => {
-    // Clear timer yang ada jika dialog ditutup
-    if (autoCloseTimer) {
-      clearTimeout(autoCloseTimer);
-      autoCloseTimer = null;
-    }
-    
-    // Jika dialog dibuka, set timer untuk auto-close setelah 3 detik
-    if (isOpen) {
-      autoCloseTimer = setTimeout(() => {
-        infoDialog.value = false;
-        autoCloseTimer = null;
-      }, 5000); // 5   detik
-    }
-  });
-  
-  const performCheckIn = async (data: string, method: string = 'QR Scan'): Promise<boolean> => {
-      await new Promise(resolve => setTimeout(resolve, 1000));
-      const success = Math.random() < 0.8;
-      
-      // History akan disimpan di onDetect setelah performCheckIn selesai
-      // Jadi kita hanya perlu return hasil check-in
-      return success;
-  };
-  
-  const showSnackbar = (title: string, message: string, color: string, icon: string) => {
-      snackbar.value.title = title;
-      snackbar.value.message = message;
-      snackbar.value.color = color;
-      snackbar.value.icon = icon;
-      snackbar.value.show = true;
-  };
-  
-  const checkInManual = async () => {
-    if (!manualInput.value) {
-      showSnackbar('Error', 'Mohon isi nomor antrean atau ID pasien', 'error', 'mdi-alert');
-      return;
-    }
-  
-    // Get kode klinik (use first available if none selected)
-    let kodeKlinik = selectedKlinik.value || '';
-    if (!kodeKlinik && klinikOptions.value.length > 0) {
-      kodeKlinik = klinikOptions.value[0].value;
-    }
-    
-    // Simulasi check-in manual
-    const success = await performCheckIn(`${manualInput.value}|ALLOWED`);
-    
-    if (success) {
-      // Generate queue number
-      const queueNumber = kodeKlinik ? generateSequentialQueueNumber(kodeKlinik) : undefined;
-      
-      // Save to history
-      saveToHistory({
-        patientId: manualInput.value,
-        queueNumber: queueNumber,
-        status: 'success',
-        checkInTime: new Date().toISOString(),
-        checkInDate: new Date().toISOString(),
-        method: 'Manual Input',
-        kodeKlinik: kodeKlinik
-      });
-      
-      showSnackbar('Berhasil!', 'Check-in manual berhasil dilakukan.', 'success', 'mdi-check-circle');
-      manualInput.value = '';
-      if (manualForm.value) {
-        (manualForm.value as any).reset();
-      }
-    } else {
-      showSnackbar('Gagal!', 'Check-in manual gagal dilakukan. Silakan coba lagi!', 'error', 'mdi-close-circle');
-    }
-  };
-  
-  // Quick generate QR for testing
-  const generateQuickQR = (status: string) => {
-    // Auto-generate sequential patient ID
-    generatePatientId.value = generateSequentialPatientId();
-    generateStatus.value = status;
-    // Use first klinik if none selected
-    if (!selectedKlinik.value && klinikOptions.value.length > 0) {
-      selectedKlinik.value = klinikOptions.value[0].value;
-    }
-    generateQRCode();
-  };
-  
-  // Generate QR Code function
-  const generateQRCode = async () => {
-    // Auto-generate patient ID if empty
-    if (!generatePatientId.value) {
-      generatePatientId.value = generateSequentialPatientId();
-    }
-    
-    if (!selectedKlinik.value) {
-      showSnackbar('Error', 'Mohon pilih Klinik/Poli', 'error', 'mdi-alert');
-      return;
-    }
-  
-    generatedQRData.value = `${generatePatientId.value}|${generateStatus.value}`;
-    
-    await nextTick();
-    
-    // Clear previous QR code
-    const qrContainer = document.getElementById('qrcode');
-    if (qrContainer) {
-      qrContainer.innerHTML = '';
-      
-      try {
-        // Use qrcode package that's already installed
-        const QRCode = (await import('qrcode')).default;
-        
-        // Create QR code as data URL
-        const qrDataUrl = await QRCode.toDataURL(generatedQRData.value, {
-          errorCorrectionLevel: 'H', // High error correction for better scanning
-          type: 'image/png',
-          quality: 1,
-          margin: 2,
-          width: 300,
-          color: {
-            dark: '#000000', // Black
-            light: '#FFFFFF' // White
-          }
-        });
-        
-        // Create img element and append to container
-        const img = document.createElement('img');
-        img.src = qrDataUrl;
-        img.alt = 'QR Code';
-        img.style.width = '100%';
-        img.style.maxWidth = '300px';
-        img.style.height = 'auto';
-        img.style.display = 'block';
-        img.style.margin = '0 auto';
-        qrContainer.appendChild(img);
-        
-        console.log('QR Code created successfully:', generatedQRData.value);
-        showSnackbar('Berhasil!', 'QR Code berhasil di-generate. Silakan scan untuk testing', 'success', 'mdi-check-circle');
-      } catch (error) {
-        console.error('Error creating QR code:', error);
-        showSnackbar('Error', 'Gagal membuat QR Code. Silakan coba lagi', 'error', 'mdi-alert');
-      }
-    } else {
-      showSnackbar('Error', 'Container QR Code tidak ditemukan', 'error', 'mdi-alert');
-    }
-  };
-  
-  const downloadQR = async () => {
-    const img = document.querySelector('#qrcode img') as HTMLImageElement;
-    if (img && img.src) {
-      try {
-        // Convert img src (data URL) to blob
-        const response = await fetch(img.src);
-        const blob = await response.blob();
-        const url = URL.createObjectURL(blob);
-        const link = document.createElement('a');
-        const klinikCode = selectedKlinik.value || 'UNKNOWN';
-        const fileName = `QR-Test-${klinikCode}-${generatePatientId.value}-${generateStatus.value}-${Date.now()}.png`;
-        link.download = fileName;
-        link.href = url;
-        link.style.display = 'none';
-        document.body.appendChild(link);
-        link.click();
-        document.body.removeChild(link);
-        URL.revokeObjectURL(url);
-        showSnackbar('Berhasil!', `QR Code berhasil didownload: ${fileName}`, 'success', 'mdi-download');
-      } catch (error) {
-        console.error('Download error:', error);
-        // Fallback: use img src directly
-        const link = document.createElement('a');
-        const klinikCode = selectedKlinik.value || 'UNKNOWN';
-        link.download = `QR-Test-${klinikCode}-${generatePatientId.value}-${generateStatus.value}.png`;
-        link.href = img.src;
-        link.click();
-        showSnackbar('Berhasil!', 'QR Code berhasil didownload', 'success', 'mdi-download');
-      }
-    } else {
-      showSnackbar('Error', 'QR Code belum di-generate. Silakan generate terlebih dahulu', 'error', 'mdi-alert');
-    }
-  };
-  
-  const copyQRToClipboard = async () => {
-    const img = document.querySelector('#qrcode img') as HTMLImageElement;
-    if (img && img.src) {
-      try {
-        // Convert img src to blob
-        const response = await fetch(img.src);
-        const blob = await response.blob();
-        
-        try {
-          await navigator.clipboard.write([
-            new ClipboardItem({
-              'image/png': blob
-            })
-          ]);
-          showSnackbar('Berhasil!', 'QR Code berhasil disalin ke clipboard', 'success', 'mdi-content-copy');
-        } catch (err: any) {
-          console.error('Clipboard error:', err);
-          // Fallback: download instead
-          showSnackbar('Info', 'Copy ke clipboard tidak didukung. Gunakan tombol Download.', 'info', 'mdi-information');
-        }
-      } catch (error) {
-        console.error('Copy error:', error);
-        showSnackbar('Error', 'Gagal menyalin QR Code', 'error', 'mdi-alert');
-      }
-    } else {
-      showSnackbar('Error', 'QR Code belum di-generate. Silakan generate terlebih dahulu', 'error', 'mdi-alert');
-    }
-  };
-  
-  const shareQR = async () => {
-    const img = document.querySelector('#qrcode img') as HTMLImageElement;
-    if (img && img.src) {
-      try {
-        // Convert img src to blob
-        const response = await fetch(img.src);
-        const blob = await response.blob();
-        const klinikCode = selectedKlinik.value || 'UNKNOWN';
-        const file = new File([blob], `QR-Test-${klinikCode}-${generatePatientId.value}-${generateStatus.value}.png`, { type: 'image/png' });
-        
-        if (navigator.share && navigator.canShare({ files: [file] })) {
-          try {
-            await navigator.share({
-              files: [file],
-              title: 'QR Code Check-in Test',
-              text: `QR Code untuk testing: ${generatedQRData.value}`
-            });
-            showSnackbar('Berhasil!', 'QR Code berhasil dibagikan', 'success', 'mdi-share');
-          } catch (err: any) {
-            if (err.name !== 'AbortError') {
-              // Fallback to copy or download
-              copyQRToClipboard();
-            }
-          }
-        } else {
-          // Fallback: try copy to clipboard
-          copyQRToClipboard();
-        }
-      } catch (error) {
-        console.error('Share error:', error);
-        showSnackbar('Error', 'Gagal membagikan QR Code', 'error', 'mdi-alert');
-      }
-    } else {
-      showSnackbar('Error', 'QR Code belum di-generate. Silakan generate terlebih dahulu', 'error', 'mdi-alert');
-    }
-  };
-  
-  // History Functions
-  const HISTORY_STORAGE_KEY = 'checkin_history';
-  
-  const loadHistory = () => {
-    if (typeof window !== 'undefined') {
-      const stored = localStorage.getItem(HISTORY_STORAGE_KEY);
-      if (stored) {
-        try {
-          checkInHistory.value = JSON.parse(stored);
-        } catch (e) {
-          console.error('Error loading history:', e);
-          checkInHistory.value = [];
-        }
-      }
-    }
-  };
-  
-  const saveToHistory = (item: {
-    patientId: string;
-    queueNumber?: string;
-    status: string;
-    checkInTime: string;
-    checkInDate: string;
-    method: string;
-    kodeKlinik?: string;
-  }) => {
-    // Generate queue number based on klinik code if not provided
-    let queueNumber = item.queueNumber;
-    if (!queueNumber && item.kodeKlinik) {
-      queueNumber = generateSequentialQueueNumber(item.kodeKlinik);
-    } else if (!queueNumber) {
-      // Fallback to default if no klinik code
-      queueNumber = `ANT-${Date.now()}`;
-    }
-    
-    const historyItem = {
-      ...item,
-      queueNumber: queueNumber,
-    };
-    
-    checkInHistory.value.unshift(historyItem);
-    
-    // Simpan maksimal 100 item
-    if (checkInHistory.value.length > 100) {
-      checkInHistory.value = checkInHistory.value.slice(0, 100);
-    }
-    
-    if (typeof window !== 'undefined') {
-      localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(checkInHistory.value));
-    }
-  };
-  
-  const deleteHistoryItem = (index: number) => {
-    checkInHistory.value.splice(index, 1);
-    if (typeof window !== 'undefined') {
-      localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(checkInHistory.value));
-    }
-    showSnackbar('Berhasil', 'Riwayat berhasil dihapus', 'success', 'mdi-check');
-  };
-  
-  const clearHistory = () => {
-    checkInHistory.value = [];
-    if (typeof window !== 'undefined') {
-      localStorage.removeItem(HISTORY_STORAGE_KEY);
-    }
-    showSnackbar('Berhasil', 'Semua riwayat berhasil dihapus', 'success', 'mdi-check');
-  };
-  
-  const openHistoryDialog = () => {
-    loadHistory();
-    historyDialog.value = true;
-  };
-  
-  const openQRHistoryDialog = () => {
-    loadScannedQRHistory();
-    qrHistoryDialog.value = true;
-  };
-  
-  const loadScannedQRHistory = () => {
-    if (typeof window !== 'undefined') {
-      const stored = localStorage.getItem('scanned_qr_data');
-      if (stored) {
-        try {
-          scannedQRHistory.value = JSON.parse(stored);
-        } catch (e) {
-          console.error('Error loading QR history:', e);
-          scannedQRHistory.value = [];
-        }
-      } else {
-        scannedQRHistory.value = [];
-      }
-    }
-  };
-  
-  const clearQRHistory = () => {
-    scannedQRHistory.value = [];
-    if (typeof window !== 'undefined') {
-      localStorage.removeItem('scanned_qr_data');
-    }
-    showSnackbar('Berhasil', 'Semua riwayat QR scan berhasil dihapus', 'success', 'mdi-check');
-  };
-  
-  const deleteQRHistoryItem = (index: number) => {
-    scannedQRHistory.value.splice(index, 1);
-    if (typeof window !== 'undefined') {
-      localStorage.setItem('scanned_qr_data', JSON.stringify(scannedQRHistory.value));
-    }
-    showSnackbar('Berhasil', 'Riwayat QR scan berhasil dihapus', 'success', 'mdi-check');
-  };
-  
-  const useQRData = (qrData: string) => {
-    qrHistoryDialog.value = false;
-    scannedData.value = qrData;
-    onDetect(qrData);
-  };
-  
-  const filteredQRHistory = computed(() => {
-    let filtered = [...scannedQRHistory.value];
-    
-    // Filter by search
-    if (historySearch.value) {
-      const search = historySearch.value.toLowerCase();
-      filtered = filtered.filter(item => 
-        item.data.toLowerCase().includes(search)
-      );
-    }
-    
-    return filtered;
-  });
-  
-  const filteredHistory = computed(() => {
-    let filtered = [...checkInHistory.value];
-    
-    // Filter by search
-    if (historySearch.value) {
-      const search = historySearch.value.toLowerCase();
-      filtered = filtered.filter(item => 
-        item.patientId.toLowerCase().includes(search) ||
-        (item.queueNumber && item.queueNumber.toLowerCase().includes(search))
-      );
-    }
-    
-    // Filter by status
-    if (historyStatusFilter.value) {
-      filtered = filtered.filter(item => {
-        if (historyStatusFilter.value === 'success') {
-          return item.status === 'ALLOWED' || item.status === 'success';
-        } else if (historyStatusFilter.value === 'failed') {
-          return item.status === 'NOT_ALLOWED' || item.status === 'failed';
-        }
-        return true;
-      });
-    }
-    
-    return filtered;
-  });
-  
-  const getStatusColor = (status: string) => {
-    if (status === 'ALLOWED' || status === 'success') return 'success';
-    if (status === 'NOT_ALLOWED' || status === 'failed') return 'error';
-    return 'warning';
-  };
-  
-  const getStatusIcon = (status: string) => {
-    if (status === 'ALLOWED' || status === 'success') return 'mdi-check-circle';
-    if (status === 'NOT_ALLOWED' || status === 'failed') return 'mdi-close-circle';
-    return 'mdi-clock-alert';
-  };
-  
-  const getStatusText = (status: string) => {
-    if (status === 'ALLOWED' || status === 'success') return 'Berhasil';
-    if (status === 'NOT_ALLOWED' || status === 'failed') return 'Gagal';
-    return 'Pending';
-  };
-  
-  const getStatusClass = (status: string) => {
-    if (status === 'ALLOWED' || status === 'success') return 'history-success';
-    if (status === 'NOT_ALLOWED' || status === 'failed') return 'history-failed';
-    return 'history-pending';
-  };
-  
-  const formatDateTime = (dateString: string) => {
-    const date = new Date(dateString);
-    return date.toLocaleTimeString('id-ID', { 
-      hour: '2-digit', 
-      minute: '2-digit',
-      second: '2-digit'
-    });
-  };
-  
-  const formatDate = (dateString: string) => {
-    const date = new Date(dateString);
-    return date.toLocaleDateString('id-ID', {
-      day: '2-digit',
-      month: 'short',
-      year: 'numeric'
-    });
-  };
-  
-  // Statistics computed properties
-  const statsToday = computed(() => {
-    const today = new Date();
-    const todayStr = today.toISOString().split('T')[0]; // YYYY-MM-DD
-    
-    return checkInHistory.value.filter(item => {
-      const itemDate = new Date(item.checkInDate || item.checkInTime);
-      const itemDateStr = itemDate.toISOString().split('T')[0];
-      return itemDateStr === todayStr;
-    }).length;
-  });
-  
-  const statsCompleted = computed(() => {
-    return checkInHistory.value.filter(item => {
-      return item.status === 'success' || item.status === 'ALLOWED';
-    }).length;
-  });
-  
-  const statsWaiting = computed(() => {
-    return checkInHistory.value.filter(item => {
-      return item.status === 'NOT_ALLOWED' || item.status === 'pending' || item.status === 'failed';
-    }).length;
-  });
-  
-  // Load history on mount
-  if (typeof window !== 'undefined') {
-    loadHistory();
-    loadScannedQRHistory();
-    loadSuccessfulScans();
-  }
-  </script>
-  
-  <style scoped>
-  /* Modern Minimalist Background */
-  .bg-modern {
-    background: #ffffff;
-    min-height: 100vh;
-    max-height: 100vh;
-    position: relative;
-    overflow: hidden;
-  }
-  
-  .no-scroll-container {
-    height: 100vh;
-    max-height: 100vh;
-    overflow-y: auto;
-    overflow-x: hidden;
-  }
-  
-  .no-scroll-container::-webkit-scrollbar {
-    width: 4px;
-  }
-  
-  .no-scroll-container::-webkit-scrollbar-track {
-    background: transparent;
-  }
-  
-  .no-scroll-container::-webkit-scrollbar-thumb {
-    background: rgba(0, 0, 0, 0.2);
-    border-radius: 2px;
-  }
-  
-  .no-overflow {
-    overflow: hidden !important;
-    height: 100vh;
-    max-height: 100vh;
-  }
-  
-  .bg-modern::before {
-    content: '';
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: 
-      radial-gradient(circle at 20% 50%, rgba(21, 101, 192, 0.05) 0%, transparent 50%),
-      radial-gradient(circle at 80% 80%, rgba(21, 101, 192, 0.05) 0%, transparent 50%);
-    pointer-events: none;
-    z-index: 0;
-  }
-  
-  /* Main Card dengan Glassmorphism */
-  .main-card {
-    background: rgba(255, 255, 255, 0.95) !important;
-    backdrop-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    border: 1px solid rgba(255, 255, 255, 0.3);
-    border-radius: 24px !important;
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
-    overflow: hidden;
-    position: relative;
-    z-index: 1;
-  }
-  
-  /* Header Modern Minimalis */
-  .header-modern {
-    background: linear-gradient(135deg, #1565C0 0%, #0D47A1 100%);
-    padding: 20px 24px 16px;
-    position: relative;
-    overflow: hidden;
-  }
-  
-  .header-modern::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
-    pointer-events: none;
-  }
-  
-  .header-content {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 12px;
-    margin-bottom: 4px;
-  }
-  
-  .icon-circle {
-    width: 56px;
-    height: 56px;
-    border-radius: 50%;
-    background: rgba(255, 255, 255, 0.2);
-    backdrop-filter: blur(10px);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: 2px solid rgba(255, 255, 255, 0.3);
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
-  }
-  
-  .header-text {
-    text-align: left;
-  }
-  
-  .title-modern {
-    font-size: 20px;
-    font-weight: 700;
-    color: white;
-    margin: 0;
-    letter-spacing: -0.5px;
-  }
-  
-  .subtitle-modern {
-    font-size: 13px;
-    color: rgba(255, 255, 255, 0.85);
-    margin: 2px 0 0;
-    font-weight: 400;
-  }
-  
-  /* Tabs Modern */
-  .tabs-modern {
-    position: relative;
-    z-index: 1;
-  }
-  
-  .tabs-modern :deep(.v-tab) {
-    text-transform: none;
-    font-weight: 500;
-    font-size: 13px;
-    letter-spacing: 0.2px;
-    color: rgba(255, 255, 255, 0.8);
-    min-width: auto;
-    padding: 0 16px;
-    transition: all 0.3s ease;
-  }
-  
-  .tabs-modern :deep(.v-tab--selected) {
-    color: #FB8C00 !important;
-    background: rgba(251, 140, 0, 0.2);
-    border-radius: 12px;
-    backdrop-filter: blur(10px);
-  }
-  
-  .tabs-modern :deep(.v-tab--selected .v-icon) {
-    color: #FB8C00 !important;
-  }
-  
-  .tabs-modern :deep(.v-tab--selected span) {
-    color: #FB8C00 !important;
-  }
-  
-  .tabs-modern :deep(.v-slider) {
-    display: none;
-  }
-  
-  .tab-modern {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-  }
-  
-  .tab-modern .v-icon {
-    font-size: 18px !important;
-  }
-  
-  /* Content Area */
-  .content-modern {
-    background: white;
-    max-height: calc(100vh - 200px);
-    overflow-y: auto;
-  }
-  
-  .content-modern::-webkit-scrollbar {
-    width: 4px;
-  }
-  
-  .content-modern::-webkit-scrollbar-track {
-    background: transparent;
-  }
-  
-  .content-modern::-webkit-scrollbar-thumb {
-    background: rgba(0, 0, 0, 0.2);
-    border-radius: 2px;
-  }
-  
-  .tab-content {
-    animation: fadeIn 0.4s ease-out;
-  }
-  
-  @keyframes fadeIn {
-    from { 
-      opacity: 0; 
-      transform: translateY(10px); 
-    }
-    to { 
-      opacity: 1; 
-      transform: translateY(0); 
-    }
-  }
-  
-  /* Status Header */
-  .status-header {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 12px;
-    padding: 16px;
-    background: linear-gradient(135deg, #f5f7fa 0%, #e3f2fd 100%);
-    border-radius: 12px;
-    border: 1px solid rgba(21, 101, 192, 0.1);
-    text-align: center;
-  }
-  
-  .status-icon-wrapper {
-    width: 40px;
-    height: 40px;
-    border-radius: 10px;
-    background: white;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-    flex-shrink: 0;
-    margin: 0 auto;
-  }
-  
-  .status-text {
-    width: 100%;
-    text-align: center;
-  }
-  
-  .status-title {
-    font-size: 16px;
-    font-weight: 600;
-    color: #1a1a1a;
-    margin: 0 0 4px;
-    letter-spacing: -0.3px;
-    text-align: center;
-  }
-  
-  .status-subtitle {
-    font-size: 13px;
-    color: #6b7280;
-    margin: 0;
-    line-height: 1.4;
-    text-align: center;
-  }
-  
-  /* QR Scanner Modern */
-  .qr-scanner-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin: 24px 0;
-  }
-  
-  .qr-placeholder {
-    width: 100%;
-    max-width: 300px;
-    height: 300px;
-    background: linear-gradient(135deg, #f5f7fa 0%, #e3f2fd 100%);
-    border-radius: 16px;
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-    border: 2px dashed #1565C0;
-    box-shadow: 0 4px 20px rgba(21, 101, 192, 0.1);
-    margin: 0 auto;
-  }
-  
-  .qr-reader-container {
-    width: 100%;
-    max-width: 500px;
-    margin: 0 auto;
-    position: relative;
-  }
-  
-  .qr-reader-wrapper {
-    width: 100%;
-    aspect-ratio: 1 / 1;
-    border-radius: 16px;
-    overflow: hidden;
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
-    background: #000;
-    position: relative;
-    max-width: 500px;
-    max-height: 500px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: 2px solid rgba(21, 101, 192, 0.2);
-    margin: 0 auto;
-  }
-  
-  .qr-reader-wrapper :deep(video) {
-    width: 100% !important;
-    height: 100% !important;
-    border-radius: 16px;
-    display: block !important;
-    object-fit: cover;
-    background: #000;
-    aspect-ratio: 1 / 1;
-    transform: scaleX(-1); /* Mirror effect */
-    -webkit-transform: scaleX(-1); /* Safari support */
-    /* Reduce brightness to prevent overexposure/bloom */
-    filter: brightness(0.75) contrast(1.1);
-    -webkit-filter: brightness(0.75) contrast(1.1);
-  }
-  
-  .qr-reader-wrapper :deep(canvas) {
-    display: none !important;
-  }
-  
-  .qr-reader-wrapper :deep(#qr-reader__dashboard) {
-    display: none !important;
-  }
-  
-  .qr-reader-wrapper :deep(#qr-reader__scan_region) {
-    border-radius: 16px;
-    border: 3px solid rgba(21, 101, 192, 0.8) !important;
-    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.4) !important;
-    position: relative;
-  }
-  
-  .qr-reader-wrapper :deep(#qr-reader__scan_region::before) {
-    content: '';
-    position: absolute;
-    top: -3px;
-    left: -3px;
-    right: -3px;
-    bottom: -3px;
-    border: 3px solid rgba(21, 101, 192, 0.8);
-    border-radius: 16px;
-    animation: pulse-border 2s ease-in-out infinite;
-  }
-  
-  @keyframes pulse-border {
-    0%, 100% {
-      opacity: 1;
-      transform: scale(1);
-    }
-    50% {
-      opacity: 0.7;
-      transform: scale(1.02);
-    }
-  }
-  
-  .qr-reader-wrapper :deep(#qr-reader__scan_region video) {
-    border-radius: 16px;
-    width: 100% !important;
-    height: 100% !important;
-    aspect-ratio: 1 / 1;
-    object-fit: cover;
-    transform: scaleX(-1); /* Mirror effect */
-    -webkit-transform: scaleX(-1); /* Safari support */
-    /* Reduce brightness to prevent overexposure/bloom */
-    filter: brightness(0.75) contrast(1.1);
-    -webkit-filter: brightness(0.75) contrast(1.1);
-  }
-  
-  .scanner-status {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-bottom: 6px;
-    font-size: 12px;
-  }
-  
-  .scanner-instruction {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-top: 12px;
-    padding: 10px 12px;
-    background: linear-gradient(135deg, rgba(21, 101, 192, 0.1) 0%, rgba(13, 71, 161, 0.1) 100%);
-    border-radius: 10px;
-    color: #1565C0;
-    font-weight: 500;
-    font-size: 12px;
-    text-align: center;
-    border: 1px solid rgba(21, 101, 192, 0.2);
-  }
-  
-  .scanner-loading-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    background: rgba(0, 0, 0, 0.7);
-    border-radius: 16px;
-    z-index: 10;
-  }
-  
-  .scanner-overlay {
-    position: absolute;
-    width: 80%;
-    height: 80%;
-  }
-  
-  .corner {
-    position: absolute;
-    width: 40px;
-    height: 40px;
-    border: 3px solid #1565C0;
-  }
-  
-  .corner-tl {
-    top: 0;
-    left: 0;
-    border-right: none;
-    border-bottom: none;
-    border-radius: 8px 0 0 0;
-  }
-  
-  .corner-tr {
-    top: 0;
-    right: 0;
-    border-left: none;
-    border-bottom: none;
-    border-radius: 0 8px 0 0;
-  }
-  
-  .corner-bl {
-    bottom: 0;
-    left: 0;
-    border-right: none;
-    border-top: none;
-    border-radius: 0 0 0 8px;
-  }
-  
-  .corner-br {
-    bottom: 0;
-    right: 0;
-    border-left: none;
-    border-top: none;
-    border-radius: 0 0 8px 0;
-  }
-  
-  .scan-line {
-    position: absolute;
-    width: 100%;
-    height: 2px;
-    background: linear-gradient(90deg, transparent, #1565C0, transparent);
-    top: 0;
-    animation: scan 2s linear infinite;
-    box-shadow: 0 0 10px #1565C0;
-  }
-  
-  @keyframes scan {
-    0% { top: 0; }
-    100% { top: 100%; }
-  }
-  
-  .qr-icon {
-    position: relative;
-    z-index: 1;
-    animation: breathe 2s ease-in-out infinite;
-  }
-  
-  @keyframes breathe {
-    0%, 100% { opacity: 0.6; }
-    50% { opacity: 1; }
-  }
-  
-  /* Modern Buttons */
-  .btn-primary-modern {
-    background: linear-gradient(135deg, #1565C0 0%, #0D47A1 100%) !important;
-    color: white !important;
-    font-weight: 600;
-    text-transform: none;
-    letter-spacing: 0.3px;
-    border-radius: 12px !important;
-    padding: 14px 28px !important;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    box-shadow: 0 4px 16px rgba(21, 101, 192, 0.3) !important;
-  }
-  
-  .btn-primary-modern:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 8px 24px rgba(21, 101, 192, 0.4) !important;
-  }
-  
-  .btn-primary-modern:active {
-    transform: translateY(0);
-  }
-  
-  .btn-primary-modern:disabled {
-    opacity: 0.5;
-    transform: none !important;
-  }
-  
-  .btn-stop-modern {
-    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
-    color: white !important;
-    font-weight: 600;
-    text-transform: none;
-    letter-spacing: 0.3px;
-    border-radius: 12px !important;
-    padding: 14px 28px !important;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3) !important;
-  }
-  
-  .btn-stop-modern:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 8px 24px rgba(239, 68, 68, 0.4) !important;
-  }
-  
-  .action-buttons {
-    margin-top: 20px;
-    display: flex;
-    justify-content: center;
-  }
-  
-  .btn-centered {
-    width: auto !important;
-    min-width: 240px !important;
-    max-width: 320px !important;
-    margin: 0 auto !important;
-    display: block !important;
-  }
-  
-  .btn-centered-small {
-    width: auto !important;
-    min-width: 180px !important;
-    margin: 0 auto;
-    display: block;
-  }
-  
-  .btn-test-camera {
-    border-color: #1565C0 !important;
-    color: #1565C0 !important;
-  }
-  
-  .btn-test-camera :deep(.v-btn__content) {
-    color: #1565C0 !important;
-  }
-  
-  .btn-test-camera :deep(.v-icon) {
-    color: #1565C0 !important;
-    opacity: 1 !important;
-  }
-  
-  /* Modern Inputs */
-  .input-modern :deep(.v-field) {
-    border-radius: 12px;
-    font-size: 15px;
-    background: #fafafa;
-    border: 1.5px solid #e5e7eb;
-    transition: all 0.3s ease;
-  }
-  
-  .input-modern :deep(.v-field--focused) {
-    background: white;
-    border-color: #1565C0;
-    box-shadow: 0 0 0 4px rgba(21, 101, 192, 0.1);
-  }
-  
-  .input-modern :deep(.v-field__input) {
-    padding-top: 12px;
-    padding-bottom: 12px;
-  }
-  
-  .input-modern :deep(.v-label) {
-    font-weight: 500;
-    color: #6b7280;
-  }
-  
-  .quick-actions {
-    margin-top: 16px;
-    padding-top: 16px;
-    border-top: 1px solid #e5e7eb;
-  }
-  
-  .info-card {
-    display: flex;
-    justify-content: center;
-  }
-  
-  .info-alert-centered {
-    width: 100%;
-  }
-  
-  .info-alert-centered :deep(.v-alert__content) {
-    display: flex !important;
-    align-items: center !important;
-    justify-content: center !important;
-    width: 100% !important;
-  }
-  
-  .quick-actions .v-btn {
-    transition: all 0.3s ease;
-    border-radius: 12px !important;
-    border: 1.5px solid #e5e7eb !important;
-  }
-  
-  .quick-actions .v-btn:hover {
-    transform: translateY(-2px);
-    border-color: #1565C0 !important;
-    box-shadow: 0 4px 12px rgba(21, 101, 192, 0.15);
-  }
-  
-  .quick-actions .v-btn :deep(.v-icon) {
-    opacity: 1 !important;
-    color: inherit !important;
-  }
-  
-  .quick-actions .v-btn[color="primary"] {
-    color: #1565C0 !important;
-    border-color: #1565C0 !important;
-  }
-  
-  .quick-actions .v-btn[color="primary"] :deep(.v-icon) {
-    color: #1565C0 !important;
-  }
-  
-  .qr-code-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 16px;
-    background: white;
-    border-radius: 12px;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
-  }
-  
-  .qr-code-container :deep(canvas) {
-    border-radius: 8px;
-  }
-  
-  .qr-display {
-    animation: slideUp 0.5s ease-out;
-  }
-  
-  .blur-dialog :deep(.v-overlay__scrim) {
-    backdrop-filter: blur(8px);
-    -webkit-backdrop-filter: blur(8px);
-  }
-  
-  .dialog-card {
-    overflow: hidden;
-    animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-  }
-  
-  @keyframes popIn {
-    0% {
-      opacity: 0;
-      transform: scale(0.8) translateY(20px);
-    }
-    100% {
-      opacity: 1;
-      transform: scale(1) translateY(0);
-    }
-  }
-  
-  .dialog-header {
-    position: relative;
-    overflow: hidden;
-  }
-  
-  .dialog-header::before {
-    content: '';
-    position: absolute;
-    top: -50%;
-    left: -50%;
-    width: 200%;
-    height: 200%;
-    background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
-    animation: rotate 10s linear infinite;
-  }
-  
-  @keyframes rotate {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-  }
-  
-  .icon-wrapper {
-    display: inline-block;
-    animation: bounceIn 0.6s ease-out 0.2s both;
-  }
-  
-  @keyframes bounceIn {
-    0% {
-      opacity: 0;
-      transform: scale(0.3);
-    }
-    50% {
-      transform: scale(1.05);
-    }
-    70% {
-      transform: scale(0.9);
-    }
-    100% {
-      opacity: 1;
-      transform: scale(1);
-    }
-  }
-  
-  .dialog-icon {
-    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));
-  }
-  
-  .success-header {
-    background: linear-gradient(135deg, #66BB6A 0%, #43A047 100%);
-  }
-  
-  .warning-header {
-    background: linear-gradient(135deg, #FFA726 0%, #FB8C00 100%);
-  }
-  
-  .error-header {
-    background: linear-gradient(135deg, #EF5350 0%, #E53935 100%);
-  }
-  
-  .icon-bg-error {
-    background: linear-gradient(135deg, #EF5350 0%, #E53935 100%);
-  }
-  
-  .dialog-button {
-    text-transform: none;
-    letter-spacing: 0.5px;
-    font-weight: 600;
-    transition: all 0.3s ease;
-  }
-  
-  .dialog-button:hover {
-    transform: translateY(-2px);
-  }
-  
-  /* Patient Info Card Styling */
-  .patient-info-card {
-    background: rgba(250, 250, 250, 0.8) !important;
-    border-color: rgba(0, 0, 0, 0.08) !important;
-  }
-  
-  .patient-info-label {
-    color: #9e9e9e !important;
-    font-weight: 500;
-    opacity: 0.9;
-  }
-  
-  .patient-info-value {
-    color: #757575 !important;
-    font-weight: 500 !important;
-    opacity: 0.85;
-  }
-  
-  .patient-info-icon {
-    opacity: 0.7;
-  }
-  
-  /* Stats Footer Modern */
-  .stats-footer-modern {
-    animation: slideUp 0.5s ease-out 0.3s both;
-  }
-  
-  @keyframes slideUp {
-    from { 
-      opacity: 0; 
-      transform: translateY(10px); 
-    }
-    to { 
-      opacity: 1; 
-      transform: translateY(0); 
-    }
-  }
-  
-  .stat-card-modern {
-    background: white;
-    border-radius: 12px;
-    padding: 16px 12px;
-    text-align: center;
-    border: 1px solid #e5e7eb;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    position: relative;
-    overflow: hidden;
-  }
-  
-  .stat-card-modern::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 3px;
-    background: linear-gradient(90deg, #1565C0 0%, #0D47A1 100%);
-    transform: scaleX(0);
-    transition: transform 0.3s ease;
-  }
-  
-  .stat-card-modern:hover {
-    transform: translateY(-4px);
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
-    border-color: #1565C0;
-  }
-  
-  .stat-card-modern:hover::before {
-    transform: scaleX(1);
-  }
-  
-  .stat-icon-modern {
-    margin-bottom: 12px;
-    display: inline-flex;
-    padding: 8px;
-    background: #e3f2fd;
-    border-radius: 10px;
-  }
-  
-  .stat-value {
-    font-size: 20px;
-    font-weight: 700;
-    color: #1a1a1a;
-    margin-bottom: 4px;
-    letter-spacing: -0.5px;
-  }
-  
-  .stat-label {
-    font-size: 11px;
-    color: #6b7280;
-    font-weight: 500;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-  }
-  
-  .custom-snackbar {
-    margin-bottom: 16px;
-    margin-right: 16px;
-  }
-  
-  .custom-snackbar :deep(.v-snackbar__wrapper) {
-    min-width: 300px;
-  }
-  
-  /* History Dialog Styles */
-  .history-list {
-    max-height: 500px;
-    overflow-y: auto;
-    padding-right: 8px;
-  }
-  
-  .history-list::-webkit-scrollbar {
-    width: 6px;
-  }
-  
-  .history-list::-webkit-scrollbar-track {
-    background: #f1f1f1;
-    border-radius: 10px;
-  }
-  
-  .history-list::-webkit-scrollbar-thumb {
-    background: #888;
-    border-radius: 10px;
-  }
-  
-  .history-list::-webkit-scrollbar-thumb:hover {
-    background: #555;
-  }
-  
-  .history-item {
-    transition: all 0.3s ease;
-    border-left: 4px solid transparent;
-  }
-  
-  .history-item:hover {
-    transform: translateX(4px);
-    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
-  }
-  
-  .history-success {
-    border-left-color: #4caf50;
-    background: rgba(76, 175, 80, 0.05);
-  }
-  
-  .history-failed {
-    border-left-color: #f44336;
-    background: rgba(244, 67, 54, 0.05);
-  }
-  
-  .history-pending {
-    border-left-color: #ff9800;
-    background: rgba(255, 152, 0, 0.05);
-  }
-  
-  /* Mobile Optimization */
-  @media (max-width: 600px) {
-    .v-container.no-scroll-container {
-      padding: 8px !important;
-    }
-    
-    .main-card {
-      border-radius: 16px !important;
-    }
-    
-    .header-modern {
-      padding: 16px 16px 12px !important;
-    }
-    
-    .content-modern {
-      padding: 16px !important;
-      max-height: calc(100vh - 180px);
-    }
-    
-    .header-content {
-      flex-direction: column;
-      text-align: center;
-      gap: 12px;
-    }
-    
-    .header-text {
-      text-align: center;
-    }
-    
-    .icon-circle {
-      width: 56px;
-      height: 56px;
-    }
-    
-    .title-modern {
-      font-size: 20px;
-    }
-    
-    .subtitle-modern {
-      font-size: 13px;
-    }
-    
-    .content-modern {
-      padding: 20px 16px !important;
-    }
-    
-    .status-header {
-      padding: 16px;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      text-align: center;
-      gap: 12px;
-    }
-    
-    .status-icon-wrapper {
-      margin: 0 auto;
-    }
-    
-    .status-text {
-      text-align: center;
-      width: 100%;
-    }
-    
-    .status-title {
-      font-size: 16px;
-    }
-    
-    .status-subtitle {
-      font-size: 13px;
-    }
-    
-    .qr-placeholder {
-      max-width: 100%;
-      height: 280px;
-    }
-    
-    .qr-reader-container {
-      max-width: 100%;
-    }
-    
-    .qr-reader-wrapper {
-      min-height: 300px;
-      max-height: 70vh;
-      border-radius: 16px;
-    }
-    
-    .qr-reader-wrapper :deep(video) {
-      max-height: 70vh;
-      object-fit: contain;
-      transform: scaleX(-1); /* Mirror effect */
-      -webkit-transform: scaleX(-1); /* Safari support */
-      /* Reduce brightness to prevent overexposure/bloom */
-      filter: brightness(0.75) contrast(1.1);
-      -webkit-filter: brightness(0.75) contrast(1.1);
-    }
-    
-    .scanner-instruction {
-      font-size: 12px;
-      padding: 12px;
-    }
-    
-    .stats-footer-modern {
-      margin-top: 8px;
-    }
-    
-    .stat-card-modern {
-      padding: 12px 8px;
-    }
-    
-    .stat-value {
-      font-size: 18px;
-    }
-    
-    .stat-label {
-      font-size: 10px;
-    }
-    
-    .stat-icon-modern {
-      margin-bottom: 8px;
-      padding: 6px;
-    }
-  
-    .tabs-modern :deep(.v-tab) {
-      font-size: 12px;
-      padding: 0 12px;
-    }
-    
-    .tabs-modern :deep(.v-tab .v-icon) {
-      font-size: 18px;
-    }
-    
-    .btn-primary-modern,
-    .btn-stop-modern {
-      padding: 12px 24px !important;
-      font-size: 14px;
-      min-width: 200px !important;
-    }
-    
-    .btn-centered {
-      min-width: 200px !important;
-      max-width: 280px !important;
-    }
-    
-    .qr-placeholder {
-      max-width: 100%;
-      height: 240px;
-    }
-    
-    .qr-reader-wrapper {
-      min-height: 240px;
-      max-height: 280px;
-    }
-  }
-  
-  /* Mobile Landscape */
-  @media (max-width: 900px) and (orientation: landscape) {
-    .qr-reader-wrapper {
-      min-height: 50vh;
-      max-height: 60vh;
-    }
-    
-    .qr-reader-wrapper :deep(video) {
-      max-height: 60vh;
-      transform: scaleX(-1); /* Mirror effect */
-      -webkit-transform: scaleX(-1); /* Safari support */
-      /* Reduce brightness to prevent overexposure/bloom */
-      filter: brightness(0.75) contrast(1.1);
-      -webkit-filter: brightness(0.75) contrast(1.1);
-    }
-  }
-  </style>
\ No newline at end of file
diff --git a/pages/CheckInPasien/checkIn.vue.refactore.backup b/pages/CheckInPasien/checkIn.vue.refactore.backup
deleted file mode 100644
index 17fb045..0000000
--- a/pages/CheckInPasien/checkIn.vue.refactore.backup
+++ /dev/null
@@ -1,717 +0,0 @@
-<template>
-  <v-app class="bg-modern">
-    <v-main class="no-overflow">
-      <v-container fluid class="no-scroll-container pa-2 pa-md-4">
-        <v-row align="start" justify="center" class="fill-height">
-          <v-col cols="12" sm="11" md="10" lg="8" xl="7" class="d-flex flex-column">
-            <!-- Main Card dengan Glassmorphism -->
-            <v-card class="main-card" elevation="0">
-              
-              <!-- Header Minimalis -->
-              <div class="header-modern">
-                <div class="header-content">
-                  <div class="icon-circle">
-                    <v-icon size="36" color="white">mdi-hospital-building</v-icon>
-                  </div>
-                  <div class="header-text">
-                    <h1 class="title-modern">Check-in Pasien</h1>
-                    <p class="subtitle-modern">Sistem Antrean Rumah Sakit</p>
-                  </div>
-                </div>
-                
-                <!-- Tabs Minimalis -->
-                <v-tabs 
-                  v-model="tab" 
-                  align-tabs="center" 
-                  class="tabs-modern mt-3"
-                  bg-color="transparent"
-                  slider-color="#FB8C00"
-                  height="40"
-                >
-                  <v-tab value="scan" class="tab-modern">
-                    <v-icon size="20" class="mr-2">mdi-qrcode-scan</v-icon>
-                    <span>Scan QR</span>
-                  </v-tab>
-                  <v-tab value="manual" class="tab-modern">
-                    <v-icon size="20" class="mr-2">mdi-keyboard</v-icon>
-                    <span>Manual</span>
-                  </v-tab>
-                  <v-tab value="generate" class="tab-modern">
-                    <v-icon size="20" class="mr-2">mdi-qrcode</v-icon>
-                    <span>Generate QR</span>
-                  </v-tab>
-                </v-tabs>
-              </div>
-
-              <v-card-text class="content-modern pa-4 pa-md-6">
-                <v-window v-model="tab">
-                  <!-- Tab Scan QR -->
-                  <v-window-item value="scan">
-                    <QRScanTab
-                      :is-scanning="isScanning"
-                      :has-camera="hasCamera"
-                      :camera-checking="cameraChecking"
-                      :camera-ready="cameraReady"
-                      :primary-color="primaryColor"
-                      @start-scanning="startScanning"
-                      @stop-scanning="stopScanning"
-                      @test-camera="testCamera"
-                      @open-history="openHistoryDialog"
-                      @open-qr-history="openQRHistoryDialog"
-                    />
-                  </v-window-item>
-
-                  <!-- Tab Manual -->
-                  <v-window-item value="manual">
-                    <ManualInputTab
-                      v-model="manualInput"
-                      :primary-color="primaryColor"
-                      :secondary-color="secondaryColor"
-                      @submit="checkInManual"
-                      @open-history="openHistoryDialog"
-                      ref="manualInputTabRef"
-                    />
-                  </v-window-item>
-
-                  <!-- Tab Generate QR -->
-                  <v-window-item value="generate">
-                    <div class="tab-content">
-                      <!-- Status Header -->
-                      <div class="status-header mb-3">
-                        <div class="status-icon-wrapper">
-                          <v-icon :color="primaryColor" size="24">mdi-qrcode</v-icon>
-                        </div>
-                        <div class="status-text">
-                          <h3 class="status-title">Generate QR Code untuk Testing</h3>
-                          <p class="status-subtitle">Buat QR code yang bisa Anda scan di tab "Scan QR"</p>
-                        </div>
-                      </div>
-
-                      <!-- Quick Preset Buttons -->
-                      <div class="mb-3">
-                        <p class="text-caption text-grey text-center mb-2">Quick Test QR Codes:</p>
-                        <v-row dense>
-                          <v-col cols="6">
-                            <v-btn
-                              variant="outlined"
-                              color="success"
-                              size="small"
-                              @click="generateQuickQR(generateRandomPatientId(), 'ALLOWED')"
-                              class="text-none"
-                              block
-                            >
-                              <v-icon start size="16">mdi-check-circle</v-icon>
-                              Test ALLOWED
-                            </v-btn>
-                          </v-col>
-                          <v-col cols="6">
-                            <v-btn
-                              variant="outlined"
-                              color="warning"
-                              size="small"
-                              @click="generateQuickQR(generateRandomPatientId(), 'NOT_ALLOWED')"
-                              class="text-none"
-                              block
-                            >
-                              <v-icon start size="16">mdi-clock-alert</v-icon>
-                              Test NOT_ALLOWED
-                            </v-btn>
-                          </v-col>
-                        </v-row>
-                      </div>
-
-                      <!-- Form Generate -->
-                      <v-form @submit.prevent="generateQRCode">
-                        <v-text-field
-                          v-model="generatePatientId"
-                          label="ID Pasien"
-                          placeholder="Contoh: P-123456"
-                          prepend-inner-icon="mdi-identifier"
-                          variant="outlined"
-                          :color="primaryColor"
-                          class="input-modern mb-3"
-                          density="comfortable"
-                          clearable
-                          hide-details="auto"
-                        >
-                          <template v-slot:append-inner>
-                            <v-btn
-                              icon
-                              size="small"
-                              variant="text"
-                              @click="generateRandomId()"
-                              title="Generate Random ID"
-                            >
-                              <v-icon size="20">mdi-refresh</v-icon>
-                            </v-btn>
-                          </template>
-                        </v-text-field>
-
-                        <v-select
-                          v-model="generateStatus"
-                          label="Status Check-in"
-                          :items="statusOptions"
-                          prepend-inner-icon="mdi-shield-check"
-                          variant="outlined"
-                          :color="primaryColor"
-                          class="input-modern mb-4"
-                          density="comfortable"
-                          hide-details="auto"
-                        ></v-select>
-
-                        <div class="d-flex justify-center">
-                          <v-btn
-                            class="btn-primary-modern btn-centered"
-                            size="large"
-                            type="submit"
-                            elevation="0"
-                            :disabled="!generatePatientId"
-                          >
-                            <v-icon start size="20">mdi-qrcode-plus</v-icon>
-                            Generate QR Code
-                          </v-btn>
-                        </div>
-                      </v-form>
-
-                      <!-- QR Code Display -->
-                      <div v-if="generatedQRData" class="qr-display mt-6">
-                        <v-card variant="outlined" class="pa-4">
-                          <div class="text-center">
-                            <p class="text-subtitle-2 text-grey mb-3">QR Code Anda:</p>
-                            <div id="qrcode" class="qr-code-container mb-4"></div>
-                            
-                            <v-chip :color="generateStatus === 'ALLOWED' ? 'success' : 'warning'" class="mb-3">
-                              <v-icon start>{{ generateStatus === 'ALLOWED' ? 'mdi-check' : 'mdi-clock-alert' }}</v-icon>
-                              {{ generateStatus === 'ALLOWED' ? 'Diizinkan Check-in' : 'Belum Diizinkan' }}
-                            </v-chip>
-
-                            <p class="text-body-2 text-grey mb-4">
-                              Data: {{ generatedQRData }}
-                            </p>
-
-                            <!-- Action Buttons -->
-                            <v-row dense>
-                              <v-col cols="4">
-                                <v-btn
-                                  variant="outlined"
-                                  :color="primaryColor"
-                                  block
-                                  size="small"
-                                  @click="downloadQR"
-                                  class="text-none"
-                                >
-                                  <v-icon start size="18">mdi-download</v-icon>
-                                  Download
-                                </v-btn>
-                              </v-col>
-                              <v-col cols="4">
-                                <v-btn
-                                  variant="outlined"
-                                  :color="primaryColor"
-                                  block
-                                  size="small"
-                                  @click="copyQRToClipboard"
-                                  class="text-none"
-                                >
-                                  <v-icon start size="18">mdi-content-copy</v-icon>
-                                  Copy
-                                </v-btn>
-                              </v-col>
-                              <v-col cols="4">
-                                <v-btn
-                                  variant="outlined"
-                                  :color="primaryColor"
-                                  block
-                                  size="small"
-                                  @click="shareQR"
-                                  class="text-none"
-                                >
-                                  <v-icon start size="18">mdi-share-variant</v-icon>
-                                  Share
-                                </v-btn>
-                              </v-col>
-                            </v-row>
-                          </div>
-                        </v-card>
-
-                        <!-- Instructions -->
-                        <v-alert
-                          type="success"
-                          variant="tonal"
-                          class="mt-4 text-body-2"
-                        >
-                          <template v-slot:prepend>
-                            <v-icon>mdi-information</v-icon>
-                          </template>
-                          <strong>Cara menggunakan untuk Testing:</strong>
-                          <ol class="ml-4 mt-2">
-                            <li>Gunakan tombol <strong>"Test ALLOWED"</strong> atau <strong>"Test NOT_ALLOWED"</strong> untuk generate QR cepat, atau isi form manual</li>
-                            <li>Klik <strong>"Download"</strong> untuk menyimpan QR code ke komputer</li>
-                            <li>Buka file QR code yang didownload (bisa di HP atau layar lain)</li>
-                            <li>Pindah ke tab <strong>"Scan QR"</strong> dan scan QR code tersebut</li>
-                            <li>Atau gunakan <strong>"Copy"</strong> untuk menyalin QR ke clipboard dan paste di aplikasi lain</li>
-                          </ol>
-                        </v-alert>
-                      </div>
-                    </div>
-                  </v-window-item>
-                </v-window>
-              </v-card-text>
-            </v-card>
-
-            <!-- Stats Footer Minimalis -->
-            <div class="stats-footer-modern mt-3">
-              <v-row dense>
-                <v-col cols="4">
-                  <div class="stat-card-modern">
-                    <div class="stat-icon-modern">
-                      <v-icon :color="primaryColor" size="20">mdi-clock-outline</v-icon>
-                    </div>
-                    <div class="stat-value">{{ todayCount }}</div>
-                    <div class="stat-label">Hari Ini</div>
-                  </div>
-                </v-col>
-                <v-col cols="4">
-                  <div class="stat-card-modern">
-                    <div class="stat-icon-modern">
-                      <v-icon color="success" size="20">mdi-check-circle</v-icon>
-                    </div>
-                    <div class="stat-value">{{ completedCount }}</div>
-                    <div class="stat-label">Selesai</div>
-                  </div>
-                </v-col>
-                <v-col cols="4">
-                  <div class="stat-card-modern">
-                    <div class="stat-icon-modern">
-                      <v-icon :color="secondaryColor" size="20">mdi-account-group</v-icon>
-                    </div>
-                    <div class="stat-value">{{ pendingCount }}</div>
-                    <div class="stat-label">Menunggu</div>
-                  </div>
-                </v-col>
-              </v-row>
-            </div>
-          </v-col>
-        </v-row>
-      </v-container>
-    </v-main>
-    
-    <!-- Check-in Result Dialog -->
-    <CheckInDialog
-      v-model="infoDialog"
-      :last-check-in-result="lastCheckInResult"
-      :info-message="infoMessage"
-      :info-action="infoAction"
-      :scanned-data="scannedData"
-      @close="handleInfoAction"
-    />
-    
-    <!-- Enhanced Snackbar -->
-    <v-snackbar
-      v-model="snackbarShow"
-      :color="snackbar.color"
-      :timeout="snackbar.timeout"
-      location="bottom right"
-      rounded="pill"
-      elevation="24"
-      class="custom-snackbar"
-    >
-      <div class="d-flex align-center">
-        <v-avatar :color="snackbar.color" size="32" class="mr-3">
-          <v-icon size="20" color="white">{{ snackbar.icon }}</v-icon>
-        </v-avatar>
-        <div>
-          <div class="font-weight-bold">{{ snackbar.title }}</div>
-          <div class="text-body-2">{{ snackbar.message }}</div>
-        </div>
-      </div>
-    </v-snackbar>
-
-    <!-- History Dialog -->
-    <HistoryDialog
-      v-model="historyDialog"
-      :search="historySearch"
-      :date-filter="historyDateFilter"
-      :status-filter="historyStatusFilter"
-      :filtered-history="filteredHistory"
-      :history="checkInHistory"
-      :status-options="historyStatusOptions"
-      :primary-color="primaryColor"
-      :get-status-color="getStatusColor"
-      :get-status-icon="getStatusIcon"
-      :get-status-text="getStatusText"
-      :get-status-class="getStatusClass"
-      :format-date-time="formatDateTime"
-      :format-date="formatDate"
-      @update:search="historySearch = $event"
-      @update:date-filter="historyDateFilter = $event"
-      @update:status-filter="historyStatusFilter = $event"
-      @delete-item="handleDeleteHistoryItem"
-      @clear="handleClearHistory"
-    />
-
-    <!-- QR History Dialog -->
-    <QRHistoryDialog
-      v-model="qrHistoryDialog"
-      :search="historySearch"
-      :date-filter="historyDateFilter"
-      :filtered-history="filteredQRHistory"
-      :history="scannedQRHistory"
-      :primary-color="primaryColor"
-      @update:search="historySearch = $event"
-      @update:date-filter="historyDateFilter = $event"
-      @use-data="useQRData"
-      @delete-item="handleDeleteQRHistoryItem"
-      @clear="handleClearQRHistory"
-    />
-
-  </v-app>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
-import type { TabValue, InfoAction, CheckInHistoryItem } from '~/types/checkin';
-import { PRIMARY_COLOR, SECONDARY_COLOR, QR_STATUS_OPTIONS } from '~/constants/checkin';
-import { useSnackbar } from '~/composables/useSnackbar';
-import { useCheckInHistory } from '~/composables/useCheckInHistory';
-import { useQRScanner } from '~/composables/useQRScanner';
-import { useCheckIn } from '~/composables/useCheckIn';
-import { useQRGenerator } from '~/composables/useQRGenerator';
-import CheckInDialog from '~/components/checkin/CheckInDialog.vue';
-import HistoryDialog from '~/components/checkin/HistoryDialog.vue';
-import QRHistoryDialog from '~/components/checkin/QRHistoryDialog.vue';
-import ManualInputTab from '~/components/checkin/ManualInputTab.vue';
-import QRScanTab from '~/components/checkin/QRScanTab.vue';
-
-definePageMeta({
-  middleware:['auth'],
-  layout: false,
-})
-
-// TypeScript declaration for QRCode
-declare global {
-  interface Window {
-    QRCode: typeof import('qrcode').default;
-  }
-}
-
-// --- DESAIN & TEMA ---
-const primaryColor = ref(PRIMARY_COLOR);
-const secondaryColor = ref(SECONDARY_COLOR);
-
-// --- LOGIKA ---
-const tab = ref<TabValue>('scan');
-const infoDialog = ref(false);
-const infoMessage = ref('');
-const infoAction = ref<InfoAction>('kembali'); 
-const scannedData = ref<string | null>(null);
-const manualInput = ref('');
-const manualInputTabRef = ref<InstanceType<typeof ManualInputTab> | null>(null);
-// lastCheckInResult sudah dipindahkan ke useCheckIn composable
-
-// Timer untuk auto-close dialog
-let dialogAutoCloseTimer: ReturnType<typeof setTimeout> | null = null;
-
-// Fungsi untuk auto-close dialog setelah 15 detik
-const autoCloseDialog = () => {
-  // Clear timer sebelumnya jika ada
-  if (dialogAutoCloseTimer) {
-    clearTimeout(dialogAutoCloseTimer);
-  }
-  
-  // Set timer untuk menutup dialog setelah 15 detik
-  dialogAutoCloseTimer = setTimeout(() => {
-    if (infoDialog.value) {
-      infoDialog.value = false;
-      dialogAutoCloseTimer = null;
-    }
-  }, 15000); // 15 detik
-};
-
-// Snackbar composable (harus didefinisikan sebelum useQRScanner)
-const { snackbar, snackbarShow, showSnackbar } = useSnackbar();
-
-// History composable
-const {
-  checkInHistory,
-  scannedQRHistory,
-  historySearch,
-  historyDateFilter,
-  historyStatusFilter,
-  filteredHistory,
-  filteredQRHistory,
-  loadHistory,
-  saveToHistory,
-  deleteHistoryItem,
-  clearHistory,
-  loadScannedQRHistory,
-  saveScannedQRData,
-  clearQRHistory,
-  deleteQRHistoryItem,
-  getStatusColor,
-  getStatusIcon,
-  getStatusText,
-  getStatusClass,
-  formatDateTime,
-  formatDate,
-  historyStatusOptions,
-} = useCheckInHistory();
-
-// Computed untuk stats footer
-const todayCount = computed(() => {
-  const today = new Date().toDateString()
-  return checkInHistory.value.filter((item: CheckInHistoryItem) => {
-    const itemDate = new Date(item.checkInDate).toDateString()
-    return itemDate === today
-  }).length
-})
-
-const completedCount = computed(() => {
-  return checkInHistory.value.filter((item: CheckInHistoryItem) => 
-    item.status === 'success' || item.status === 'ALLOWED'
-  ).length
-})
-
-const pendingCount = computed(() => {
-  return checkInHistory.value.filter((item: CheckInHistoryItem) => 
-    item.status === 'pending' || item.status === 'NOT_ALLOWED'
-  ).length
-})
-
-// Check-in composable (didefinisikan dulu, saveSuccessfulScan akan di-set nanti)
-let saveSuccessfulScanRef: ((qrData: string) => void) | null = null
-
-const {
-  lastCheckInResult,
-  processQRCode,
-  checkInManual: checkInManualComposable,
-} = useCheckIn({
-  showSnackbar,
-  saveToHistory,
-  saveSuccessfulScan: (qrData: string) => {
-    // Delegate ke saveSuccessfulScan dari useQRScanner
-    if (saveSuccessfulScanRef) {
-      saveSuccessfulScanRef(qrData)
-    }
-  },
-  onCheckInSuccess: (result) => {
-    infoMessage.value = result.message
-    infoAction.value = result.action
-    infoDialog.value = true
-  },
-  autoCloseDialog,
-})
-
-// QR Scanner composable (setelah useCheckIn agar bisa akses processQRCode)
-const {
-  isScanning,
-  hasCamera,
-  cameraChecking,
-  cameraReady,
-  checkCameraAvailability,
-  testCamera,
-  startScanning,
-  stopScanning,
-  saveSuccessfulScan,
-} = useQRScanner(
-  (decodedText: string) => {
-    // Callback ketika QR berhasil di-scan
-    scannedData.value = decodedText
-    processQRCode(decodedText)
-    // Simpan ke history scanned QR
-    saveScannedQRData(decodedText)
-  },
-  showSnackbar
-)
-
-// Set saveSuccessfulScanRef setelah useQRScanner didefinisikan
-saveSuccessfulScanRef = saveSuccessfulScan
-
-// History Dialog
-const historyDialog = ref(false);
-const qrHistoryDialog = ref(false);
-
-// Generate random patient ID function (untuk digunakan di composable dan quick test buttons)
-const generateRandomPatientId = () => {
-  // Generate random 6-digit number
-  const randomNum = Math.floor(100000 + Math.random() * 900000);
-  return `P-${randomNum}`;
-};
-
-// QR Generator composable
-const {
-  generatePatientId,
-  generateStatus,
-  generatedQRData,
-  generateRandomId,
-  generateQuickQR,
-  generateQRCode,
-  downloadQR,
-  copyQRToClipboard,
-  shareQR,
-} = useQRGenerator({
-  showSnackbar,
-  generateRandomPatientId,
-});
-
-const statusOptions = [...QR_STATUS_OPTIONS] as Array<{ title: string; value: string }>;
-
-
-// Watch tab changes untuk stop scanner saat pindah tab
-watch(tab, (newTab: TabValue) => {
-  if (newTab !== 'scan' && isScanning.value) {
-    stopScanning();
-  }
-  // Check camera when switching to scan tab
-  if (newTab === 'scan' && !hasCamera.value && !cameraChecking.value) {
-    checkCameraAvailability();
-  }
-});
-
-// Check camera on mount
-onMounted(() => {
-  if (typeof window !== 'undefined' && typeof navigator !== 'undefined') {
-    if (navigator.mediaDevices && typeof navigator.mediaDevices.getUserMedia === 'function') {
-      checkCameraAvailability();
-    } else {
-      console.warn('MediaDevices API not available. Make sure you are using HTTPS or localhost.');
-      hasCamera.value = false;
-      cameraChecking.value = false;
-      showSnackbar('Warning', 'MediaDevices API tidak tersedia. Pastikan menggunakan HTTPS atau localhost.', 'warning', 'mdi-alert');
-    }
-  } else {
-    hasCamera.value = false;
-    cameraChecking.value = false;
-  }
-});
-
-// Cleanup saat component unmount
-onUnmounted(() => {
-  if (isScanning.value) {
-    stopScanning();
-  }
-  // Clear dialog auto-close timer
-  if (dialogAutoCloseTimer) {
-    clearTimeout(dialogAutoCloseTimer);
-    dialogAutoCloseTimer = null;
-  }
-});
-
-// onDetect sudah dipindahkan ke useCheckIn composable sebagai processQRCode
-
-const handleInfoAction = async () => {
-    // Clear timer jika dialog ditutup secara manual
-    if (dialogAutoCloseTimer) {
-        clearTimeout(dialogAutoCloseTimer);
-        dialogAutoCloseTimer = null;
-    }
-    
-    infoDialog.value = false;
-    
-    // Scanner tetap berjalan setelah dialog ditutup
-    // Ini memungkinkan user untuk segera memproses QR code berikutnya
-    // tanpa perlu memulai scanner lagi
-};
-
-// performCheckIn sudah dipindahkan ke useCheckIn composable
-
-const checkInManual = async () => {
-  try {
-    if (!manualInput.value || !manualInput.value.trim()) {
-      showSnackbar('Error', 'Mohon isi nomor antrean atau ID pasien', 'error', 'mdi-alert');
-      return;
-    }
-
-    const patientId = manualInput.value.trim();
-
-    // Validate form if available
-    if (manualInputTabRef.value?.form) {
-      try {
-        const isValid = manualInputTabRef.value.form.validate();
-        if (!isValid) {
-          return;
-        }
-      } catch (e) {
-        // If validate fails, continue anyway
-        console.warn('Form validation error:', e);
-      }
-    }
-
-    await checkInManualComposable(
-      patientId,
-      () => {
-        // onSuccess callback
-        try {
-          manualInput.value = '';
-          if (manualInputTabRef.value?.form) {
-            try {
-              manualInputTabRef.value.form.reset();
-            } catch (e) {
-              // Ignore reset errors
-              console.warn('Form reset error:', e);
-            }
-          }
-        } catch (e) {
-          console.warn('Error in success callback:', e);
-        }
-      },
-      () => {
-        // onError callback - tidak perlu melakukan apa-apa karena error sudah ditangani di composable
-      }
-    );
-  } catch (error) {
-    console.error('Error in checkInManual:', error);
-    showSnackbar('Error', 'Terjadi kesalahan saat melakukan check-in. Silakan coba lagi.', 'error', 'mdi-alert');
-  }
-};
-
-// generateQRCode, generateQuickQR, downloadQR, copyQRToClipboard, shareQR sudah dipindahkan ke useQRGenerator composable
-
-// History Functions - semua sudah dipindahkan ke useCheckInHistory composable
-
-const openHistoryDialog = () => {
-  loadHistory();
-  historyDialog.value = true;
-};
-
-const openQRHistoryDialog = () => {
-  loadScannedQRHistory();
-  qrHistoryDialog.value = true;
-};
-
-const handleDeleteHistoryItem = (index: number) => {
-  deleteHistoryItem(index);
-  showSnackbar('Berhasil', 'Riwayat berhasil dihapus', 'success', 'mdi-check');
-};
-
-const handleClearHistory = () => {
-  clearHistory();
-  showSnackbar('Berhasil', 'Semua riwayat berhasil dihapus', 'success', 'mdi-check');
-};
-
-const handleDeleteQRHistoryItem = (index: number) => {
-  deleteQRHistoryItem(index);
-  showSnackbar('Berhasil', 'Riwayat QR scan berhasil dihapus', 'success', 'mdi-check');
-};
-
-const handleClearQRHistory = () => {
-  clearQRHistory();
-  showSnackbar('Berhasil', 'Semua riwayat QR scan berhasil dihapus', 'success', 'mdi-check');
-};
-
-const useQRData = (qrData: string) => {
-  qrHistoryDialog.value = false;
-  scannedData.value = qrData;
-  processQRCode(qrData);
-};
-
-// filteredHistory, filteredQRHistory, dan helper functions sudah dipindahkan ke useCheckInHistory composable
-
-// loadSuccessfulScans sudah dipanggil di dalam useQRScanner composable saat initialization
-</script>
-
-<style scoped lang="scss">
-@import '~/assets/scss/checkin/variables';
-@import '~/assets/scss/checkin/components';
-@import '~/assets/scss/checkin/dialogs';
-</style>
\ No newline at end of file
diff --git a/pages/Setting/MasterAnjungan.vue b/pages/Setting/MasterAnjungan.vue
index 27a9f42..7e1c665 100644
--- a/pages/Setting/MasterAnjungan.vue
+++ b/pages/Setting/MasterAnjungan.vue
@@ -264,7 +264,7 @@ const headers = ref([
   { title: 'Actions', value: 'actions', sortable: false, width: 'auto' },
 ]);
 
-const jenisPasienOptions = ['Reguler', 'BPJS'];
+const jenisPasienOptions = ['Reguler', 'BPJS', 'Eksekutif'];
 
 const anjunganItems = computed(() => anjunganStore.getAllAnjungan);
 
diff --git a/plugins/pinia-persistedstate.client.ts b/plugins/pinia-persistedstate.client.ts
new file mode 100644
index 0000000..5a07c55
--- /dev/null
+++ b/plugins/pinia-persistedstate.client.ts
@@ -0,0 +1,8 @@
+import { createPersistedState } from 'pinia-plugin-persistedstate'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.$pinia.use(createPersistedState({
+    storage: typeof window !== 'undefined' ? localStorage : undefined,
+  }))
+})
+
diff --git a/server/api/queue/patients.ts.txt b/server/api/queue/patients.ts.txt
new file mode 100644
index 0000000..721419e
--- /dev/null
+++ b/server/api/queue/patients.ts.txt
@@ -0,0 +1,212 @@
+// server/api/queue/patients.ts
+// Contoh implementasi API endpoints untuk antrian pasien
+// NOTE: Ini adalah contoh - sesuaikan dengan database dan framework yang digunakan
+
+import type { H3Event } from 'h3'
+
+// Mock database (ganti dengan database real)
+const mockDB: any[] = []
+
+interface Patient {
+  no: number
+  jamPanggil: string
+  barcode: string
+  noAntrian: string
+  shift: string
+  klinik: string
+  fastTrack: string
+  pembayaran: string
+  status: string
+  processStage: string
+  createdAt: string
+  registrationType?: string
+  visitType?: string
+  visitDate?: string
+}
+
+// GET /api/queue/patients - Get all patients
+export default defineEventHandler(async (event: H3Event) => {
+  try {
+    // TODO: Replace with actual database query
+    // const patients = await db.query('SELECT * FROM patients ORDER BY created_at DESC')
+    
+    // Mock response
+    const patients = mockDB
+    
+    return {
+      success: true,
+      data: patients,
+      message: 'Patients fetched successfully',
+    }
+  } catch (error: any) {
+    throw createError({
+      statusCode: 500,
+      message: error.message || 'Failed to fetch patients',
+    })
+  }
+})
+
+// GET /api/queue/patients/:id - Get single patient
+export default defineEventHandler(async (event: H3Event) => {
+  const idOrBarcode = getRouterParam(event, 'id')
+  
+  try {
+    // TODO: Replace with actual database query
+    // const patient = await db.query('SELECT * FROM patients WHERE barcode = ? OR id = ?', [idOrBarcode, idOrBarcode])
+    
+    const patient = mockDB.find(
+      (p: Patient) => p.barcode === idOrBarcode || p.no.toString() === idOrBarcode
+    )
+    
+    if (!patient) {
+      throw createError({
+        statusCode: 404,
+        message: 'Patient not found',
+      })
+    }
+    
+    return {
+      success: true,
+      data: patient,
+    }
+  } catch (error: any) {
+    if (error.statusCode) throw error
+    throw createError({
+      statusCode: 500,
+      message: error.message || 'Failed to fetch patient',
+    })
+  }
+})
+
+// POST /api/queue/patients - Create new patient
+export default defineEventHandler(async (event: H3Event) => {
+  const body = await readBody(event)
+  
+  try {
+    // Validate required fields
+    if (!body.clinic || !body.paymentType) {
+      throw createError({
+        statusCode: 400,
+        message: 'Missing required fields: clinic, paymentType',
+      })
+    }
+    
+    // Generate patient data
+    const newPatient: Patient = {
+      no: mockDB.length + 1,
+      jamPanggil: new Date().toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' }),
+      barcode: `250811${String(Date.now()).slice(-6)}${String(mockDB.length + 1).padStart(3, '0')}`,
+      noAntrian: `UM${String(mockDB.length + 1).padStart(4, '0')} | Onsite - ${barcode}`,
+      shift: body.shift || 'Shift 1',
+      klinik: body.clinic,
+      fastTrack: 'TIDAK',
+      pembayaran: body.paymentType,
+      status: body.visitType === 'SEKARANG' ? 'waiting' : 'pending',
+      processStage: 'loket',
+      createdAt: new Date().toISOString(),
+      registrationType: 'onsite',
+      visitType: body.visitType || 'SEKARANG',
+      visitDate: body.visitDate || new Date().toISOString().substring(0, 10),
+    }
+    
+    // TODO: Insert to database
+    // await db.query('INSERT INTO patients SET ?', newPatient)
+    mockDB.push(newPatient)
+    
+    return {
+      success: true,
+      data: newPatient,
+      message: 'Patient created successfully',
+    }
+  } catch (error: any) {
+    if (error.statusCode) throw error
+    throw createError({
+      statusCode: 500,
+      message: error.message || 'Failed to create patient',
+    })
+  }
+})
+
+// PATCH /api/queue/patients/:id - Update patient
+export default defineEventHandler(async (event: H3Event) => {
+  const idOrBarcode = getRouterParam(event, 'id')
+  const body = await readBody(event)
+  
+  try {
+    // TODO: Replace with actual database query
+    // const patient = await db.query('SELECT * FROM patients WHERE barcode = ? OR id = ?', [idOrBarcode, idOrBarcode])
+    
+    const patientIndex = mockDB.findIndex(
+      (p: Patient) => p.barcode === idOrBarcode || p.no.toString() === idOrBarcode
+    )
+    
+    if (patientIndex === -1) {
+      throw createError({
+        statusCode: 404,
+        message: 'Patient not found',
+      })
+    }
+    
+    // Update patient
+    const updatedPatient = {
+      ...mockDB[patientIndex],
+      ...body,
+      updatedAt: new Date().toISOString(),
+    }
+    
+    // TODO: Update in database
+    // await db.query('UPDATE patients SET ? WHERE barcode = ?', [body, idOrBarcode])
+    mockDB[patientIndex] = updatedPatient
+    
+    return {
+      success: true,
+      data: updatedPatient,
+      message: 'Patient updated successfully',
+    }
+  } catch (error: any) {
+    if (error.statusCode) throw error
+    throw createError({
+      statusCode: 500,
+      message: error.message || 'Failed to update patient',
+    })
+  }
+})
+
+// POST /api/queue/patients/batch - Batch sync
+export default defineEventHandler(async (event: H3Event) => {
+  const body = await readBody(event)
+  const { patients } = body
+  
+  try {
+    if (!Array.isArray(patients)) {
+      throw createError({
+        statusCode: 400,
+        message: 'patients must be an array',
+      })
+    }
+    
+    // TODO: Batch insert/update to database
+    // await db.query('INSERT INTO patients VALUES ? ON DUPLICATE KEY UPDATE ...', [patients])
+    
+    patients.forEach((patient: Patient) => {
+      const index = mockDB.findIndex((p: Patient) => p.barcode === patient.barcode)
+      if (index === -1) {
+        mockDB.push(patient)
+      } else {
+        mockDB[index] = patient
+      }
+    })
+    
+    return {
+      success: true,
+      message: `Synced ${patients.length} patients`,
+    }
+  } catch (error: any) {
+    if (error.statusCode) throw error
+    throw createError({
+      statusCode: 500,
+      message: error.message || 'Failed to batch sync',
+    })
+  }
+})
+
diff --git a/stores/anjunganStore.js b/stores/anjunganStore.js
index 670e44c..fe7793c 100644
--- a/stores/anjunganStore.js
+++ b/stores/anjunganStore.js
@@ -83,5 +83,11 @@ export const useAnjunganStore = defineStore('anjungan', () => {
     updateAnjungan,
     deleteAnjungan,
   };
+}, {
+  persist: {
+    key: 'anjungan-store-state',
+    storage: typeof window !== 'undefined' ? localStorage : undefined,
+    paths: ['anjunganItems'],
+  },
 });
 
diff --git a/stores/clinicStore.js b/stores/clinicStore.js
index 1dcb90d..ef6b576 100644
--- a/stores/clinicStore.js
+++ b/stores/clinicStore.js
@@ -3,7 +3,8 @@ import { defineStore } from 'pinia';
 import { ref, computed } from 'vue';
 
 export const useClinicStore = defineStore('clinic', () => {
-  // Data clinics dari Anjungan.vue
+  // Data clinics - Single source of truth untuk semua data klinik
+  // Includes basic info (name, kode, icon, doctors, shifts) + master config (totalQuota, jamShiftList, jadwalKlinik, autoShift)
   const clinics = ref([
     {
       id: 1,
@@ -18,7 +19,12 @@ export const useClinicStore = defineStore('clinic', () => {
       shifts: [
         { name: "Shift 1", quota: 15 },
         { name: "Shift 2", quota: 20 }
-      ]
+      ],
+      
+      totalQuota: 1000,
+      jamShiftList: [{ dari: '07:00', sampai: '11:00', kuota: 1000 }],
+      autoShift: false,
+      jadwalKlinik: ['Senin', 'Rabu', 'Jumat'],
     },
     {
       id: 2,
@@ -33,7 +39,15 @@ export const useClinicStore = defineStore('clinic', () => {
       shifts: [
         { name: "Shift 1", quota: 0 },
         { name: "Shift 2", quota: 12 }
-      ]
+      ],
+      // Master config
+      totalQuota: 1500,
+      jamShiftList: [
+        { dari: '07:00', sampai: '11:00', kuota: 1000 },
+        { dari: '13:00', sampai: '16:00', kuota: 500 }
+      ],
+      autoShift: false,
+      jadwalKlinik: ['Senin', 'Selasa', 'Rabu', 'Kamis', 'Jum\'at'],
     },
     {
       id: 3,
@@ -48,7 +62,12 @@ export const useClinicStore = defineStore('clinic', () => {
       shifts: [
         { name: "Shift 1", quota: 8 },
         { name: "Shift 2", quota: 10 }
-      ]
+      ],
+      // Master config
+      totalQuota: 800,
+      jamShiftList: [{ dari: '07:00', sampai: '11:00', kuota: 800 }],
+      autoShift: false,
+      jadwalKlinik: ['Senin', 'Rabu', 'Jumat'],
     },
     {
       id: 4,
@@ -63,7 +82,12 @@ export const useClinicStore = defineStore('clinic', () => {
       shifts: [
         { name: "Shift 1", quota: 10 },
         { name: "Shift 2", quota: 8 }
-      ]
+      ],
+      // Master config
+      totalQuota: 600,
+      jamShiftList: [{ dari: '07:00', sampai: '11:00', kuota: 600 }],
+      autoShift: false,
+      jadwalKlinik: ['Senin', 'Rabu'],
     },
     {
       id: 5,
@@ -78,7 +102,16 @@ export const useClinicStore = defineStore('clinic', () => {
       shifts: [
         { name: "Shift 1", quota: 18 },
         { name: "Shift 2", quota: 15 }
-      ]
+      ],
+      // Master config
+      totalQuota: 2100,
+      jamShiftList: [
+        { dari: '07:00', sampai: '11:00', kuota: 1000 },
+        { dari: '13:00', sampai: '16:00', kuota: 700 },
+        { dari: '18:00', sampai: '20:00', kuota: 400 }
+      ],
+      autoShift: true,
+      jadwalKlinik: ['Senin', 'Selasa', 'Rabu', 'Kamis', 'Jum\'at'],
     },
     {
       id: 6,
@@ -93,7 +126,12 @@ export const useClinicStore = defineStore('clinic', () => {
       shifts: [
         { name: "Shift 1", quota: 12 },
         { name: "Shift 2", quota: 10 }
-      ]
+      ],
+      // Master config
+      totalQuota: 500,
+      jamShiftList: [{ dari: '07:00', sampai: '11:00', kuota: 500 }],
+      autoShift: false,
+      jadwalKlinik: ['Senin', 'Rabu', 'Jumat'],
     },
     {
       id: 7,
@@ -105,7 +143,12 @@ export const useClinicStore = defineStore('clinic', () => {
       schedule: "",
       available: false,
       doctors: [],
-      shifts: []
+      shifts: [],
+      // Master config
+      totalQuota: 750,
+      jamShiftList: [{ dari: '07:00', sampai: '11:00', kuota: 750 }],
+      autoShift: false,
+      jadwalKlinik: ['Senin', 'Selasa', 'Rabu'],
     },
     {
       id: 8,
@@ -120,7 +163,12 @@ export const useClinicStore = defineStore('clinic', () => {
       shifts: [
         { name: "Shift 1", quota: 25 },
         { name: "Shift 2", quota: 20 }
-      ]
+      ],
+      // Master config
+      totalQuota: 900,
+      jamShiftList: [{ dari: '07:00', sampai: '11:00', kuota: 900 }],
+      autoShift: false,
+      jadwalKlinik: ['Senin', 'Rabu', 'Jumat'],
     },
     {
       id: 9,
@@ -135,7 +183,15 @@ export const useClinicStore = defineStore('clinic', () => {
       shifts: [
         { name: "Shift 1", quota: 14 },
         { name: "Shift 2", quota: 12 }
-      ]
+      ],
+      // Master config
+      totalQuota: 1200,
+      jamShiftList: [
+        { dari: '07:00', sampai: '11:00', kuota: 800 },
+        { dari: '13:00', sampai: '16:00', kuota: 400 }
+      ],
+      autoShift: false,
+      jadwalKlinik: ['Senin', 'Selasa', 'Rabu', 'Kamis', 'Jum\'at'],
     },
     {
       id: 10,
@@ -150,7 +206,12 @@ export const useClinicStore = defineStore('clinic', () => {
       shifts: [
         { name: "Shift 1", quota: 10 },
         { name: "Shift 2", quota: 8 }
-      ]
+      ],
+      // Master config
+      totalQuota: 700,
+      jamShiftList: [{ dari: '07:00', sampai: '11:00', kuota: 700 }],
+      autoShift: false,
+      jadwalKlinik: ['Senin', 'Rabu'],
     },
     {
       id: 11,
@@ -165,7 +226,15 @@ export const useClinicStore = defineStore('clinic', () => {
       shifts: [
         { name: "Shift 1", quota: 16 },
         { name: "Shift 2", quota: 14 }
-      ]
+      ],
+      // Master config
+      totalQuota: 1000,
+      jamShiftList: [
+        { dari: '07:00', sampai: '11:00', kuota: 600 },
+        { dari: '13:00', sampai: '16:00', kuota: 400 }
+      ],
+      autoShift: false,
+      jadwalKlinik: ['Senin', 'Selasa', 'Rabu', 'Kamis', 'Jum\'at'],
     },
     {
       id: 12,
@@ -180,7 +249,12 @@ export const useClinicStore = defineStore('clinic', () => {
       shifts: [
         { name: "Shift 1", quota: 8 },
         { name: "Shift 2", quota: 6 }
-      ]
+      ],
+      // Master config (default values, not in masterStore)
+      totalQuota: 0,
+      jamShiftList: [],
+      autoShift: false,
+      jadwalKlinik: [],
     },
     {
       id: 13,
@@ -195,7 +269,12 @@ export const useClinicStore = defineStore('clinic', () => {
       shifts: [
         { name: "Shift 1", quota: 10 },
         { name: "Shift 2", quota: 8 }
-      ]
+      ],
+      // Master config (default values, not in masterStore)
+      totalQuota: 0,
+      jamShiftList: [],
+      autoShift: false,
+      jadwalKlinik: [],
     },
     {
       id: 14,
@@ -210,7 +289,12 @@ export const useClinicStore = defineStore('clinic', () => {
       shifts: [
         { name: "Shift 1", quota: 12 },
         { name: "Shift 2", quota: 10 }
-      ]
+      ],
+      // Master config
+      totalQuota: 600,
+      jamShiftList: [{ dari: '07:00', sampai: '11:00', kuota: 600 }],
+      autoShift: false,
+      jadwalKlinik: ['Selasa', 'Kamis'],
     },
     {
       id: 15,
@@ -225,7 +309,12 @@ export const useClinicStore = defineStore('clinic', () => {
       shifts: [
         { name: "Shift 1", quota: 15 },
         { name: "Shift 2", quota: 12 }
-      ]
+      ],
+      // Master config
+      totalQuota: 800,
+      jamShiftList: [{ dari: '07:00', sampai: '11:00', kuota: 800 }],
+      autoShift: false,
+      jadwalKlinik: ['Senin', 'Rabu', 'Jumat'],
     },
     {
       id: 16,
@@ -240,7 +329,12 @@ export const useClinicStore = defineStore('clinic', () => {
       shifts: [
         { name: "Shift 1", quota: 20 },
         { name: "Shift 2", quota: 15 }
-      ]
+      ],
+      // Master config (default values, not in masterStore)
+      totalQuota: 0,
+      jamShiftList: [],
+      autoShift: false,
+      jadwalKlinik: [],
     },
     {
       id: 17,
@@ -255,7 +349,12 @@ export const useClinicStore = defineStore('clinic', () => {
       shifts: [
         { name: "Shift 1", quota: 10 },
         { name: "Shift 2", quota: 8 }
-      ]
+      ],
+      // Master config (default values, not in masterStore)
+      totalQuota: 0,
+      jamShiftList: [],
+      autoShift: false,
+      jadwalKlinik: [],
     },
     {
       id: 18,
@@ -270,7 +369,12 @@ export const useClinicStore = defineStore('clinic', () => {
       shifts: [
         { name: "Shift 1", quota: 14 },
         { name: "Shift 2", quota: 12 }
-      ]
+      ],
+      // Master config
+      totalQuota: 700,
+      jamShiftList: [{ dari: '07:00', sampai: '11:00', kuota: 700 }],
+      autoShift: false,
+      jadwalKlinik: ['Senin', 'Rabu'],
     },
     {
       id: 19,
@@ -285,7 +389,12 @@ export const useClinicStore = defineStore('clinic', () => {
       shifts: [
         { name: "Shift 1", quota: 12 },
         { name: "Shift 2", quota: 10 }
-      ]
+      ],
+      // Master config (default values, not in masterStore)
+      totalQuota: 0,
+      jamShiftList: [],
+      autoShift: false,
+      jadwalKlinik: [],
     },
     {
       id: 20,
@@ -300,7 +409,12 @@ export const useClinicStore = defineStore('clinic', () => {
       shifts: [
         { name: "Shift 1", quota: 8 },
         { name: "Shift 2", quota: 6 }
-      ]
+      ],
+      // Master config
+      totalQuota: 500,
+      jamShiftList: [{ dari: '07:00', sampai: '11:00', kuota: 500 }],
+      autoShift: false,
+      jadwalKlinik: ['Senin', 'Selasa', 'Rabu', 'Kamis', 'Jum\'at'],
     },
     {
       id: 21,
@@ -315,7 +429,12 @@ export const useClinicStore = defineStore('clinic', () => {
       shifts: [
         { name: "Shift 1", quota: 16 },
         { name: "Shift 2", quota: 14 }
-      ]
+      ],
+      // Master config
+      totalQuota: 600,
+      jamShiftList: [{ dari: '07:00', sampai: '11:00', kuota: 600 }],
+      autoShift: false,
+      jadwalKlinik: ['Senin', 'Rabu', 'Jumat'],
     },
     {
       id: 22,
@@ -327,7 +446,12 @@ export const useClinicStore = defineStore('clinic', () => {
       schedule: "Mulai Pukul 07:00",
       available: false,
       doctors: [],
-      shifts: []
+      shifts: [],
+      // Master config
+      totalQuota: 700,
+      jamShiftList: [{ dari: '07:00', sampai: '11:00', kuota: 700 }],
+      autoShift: false,
+      jadwalKlinik: ['Senin', 'Rabu'],
     },
     {
       id: 23,
@@ -342,7 +466,12 @@ export const useClinicStore = defineStore('clinic', () => {
       shifts: [
         { name: "Shift 1", quota: 12 },
         { name: "Shift 2", quota: 10 }
-      ]
+      ],
+      // Master config (default values, not in masterStore)
+      totalQuota: 0,
+      jamShiftList: [],
+      autoShift: false,
+      jadwalKlinik: [],
     },
   ]);
 
@@ -371,12 +500,31 @@ export const useClinicStore = defineStore('clinic', () => {
     }));
   };
 
+  // Actions untuk update master config (sync dengan masterStore operations)
+  const updateClinicMasterConfig = (kode, masterConfig) => {
+    const clinic = clinics.value.find(c => c.kode === kode);
+    if (clinic) {
+      clinic.totalQuota = masterConfig.totalQuota || clinic.totalQuota;
+      clinic.jamShiftList = masterConfig.jamShiftList || clinic.jamShiftList;
+      clinic.autoShift = masterConfig.autoShift !== undefined ? masterConfig.autoShift : clinic.autoShift;
+      clinic.jadwalKlinik = masterConfig.jadwalKlinik || clinic.jadwalKlinik;
+      return { success: true, clinic };
+    }
+    return { success: false, message: 'Clinic not found' };
+  };
+
   return {
     clinics,
     getAllClinics,
     getClinicByName,
     getClinicByKode,
     getClinicsForDropdown,
+    updateClinicMasterConfig,
   };
+}, {
+  persist: {
+    key: 'clinic-store-state',
+    storage: typeof window !== 'undefined' ? localStorage : undefined,
+    paths: ['clinics'],
+  },
 });
-
diff --git a/stores/klinikruangstore.js b/stores/klinikruangstore.js
index b10ee7a..08075a3 100644
--- a/stores/klinikruangstore.js
+++ b/stores/klinikruangstore.js
@@ -276,4 +276,10 @@ export const useKlinikRuangStore = defineStore('klinikRuang', () => {
     removeRuangFromKlinik,
     searchKlinikRuang,
   };
+}, {
+  persist: {
+    key: 'klinikruang-store-state',
+    storage: typeof window !== 'undefined' ? localStorage : undefined,
+    paths: ['klinikRuangList'],
+  },
 });
\ No newline at end of file
diff --git a/stores/loketStore.js b/stores/loketStore.js
new file mode 100644
index 0000000..754b5bb
--- /dev/null
+++ b/stores/loketStore.js
@@ -0,0 +1,125 @@
+// stores/loketStore.js
+import { defineStore } from 'pinia';
+import { ref, computed } from 'vue';
+import { useClinicStore } from './clinicStore';
+
+export const useLoketStore = defineStore('loket', () => {
+  const clinicStore = useClinicStore();
+
+  // State - Loket Data
+  const loketData = ref([
+    {
+      id: 1,
+      no: 1,
+      namaLoket: "Loket 1",
+      kuota: 500,
+      pelayanan: ["RT", "RM", "TD"],
+      pembayaran: "JKN",
+      keterangan: "ONLINE",
+      statusPelayanan: "RAWAT JALAN",
+    },
+    {
+      id: 2,
+      no: 2,
+      namaLoket: "Loket 2",
+      kuota: 666,
+      pelayanan: ["JW", "SR"],
+      pembayaran: "JKN",
+      keterangan: "ONLINE",
+      statusPelayanan: "RAWAT JALAN",
+    },
+    {
+      id: 3,
+      no: 3,
+      namaLoket: "Loket 3",
+      kuota: 666,
+      pelayanan: ["AS", "JT"],
+      pembayaran: "JKN",
+      keterangan: "ONLINE",
+      statusPelayanan: "RAWAT JALAN",
+    },
+    {
+      id: 4,
+      no: 4,
+      namaLoket: "Loket 4",
+      kuota: 3676,
+      pelayanan: ["KK", "PR"],
+      pembayaran: "JKN",
+      keterangan: "ONLINE",
+      statusPelayanan: "RAWAT JALAN",
+    },
+  ]);
+
+  // Computed - Available services (reference dari clinicStore)
+  const availableServices = computed(() => {
+    const clinics = clinicStore.getAllClinics.value || [];
+    return clinics.map(c => ({
+      id: c.kode,
+      nama: c.name,
+      kode: c.kode,
+    }));
+  });
+
+  // Actions - CRUD Operations
+  const addLoket = (loketPayload) => {
+    const newId = Math.max(...loketData.value.map(l => l.id), 0) + 1;
+    const newNo = loketData.value.length + 1;
+
+    const newLoket = {
+      id: newId,
+      no: newNo,
+      ...loketPayload,
+    };
+
+    loketData.value.push(newLoket);
+    return { success: true, message: `Loket ${newLoket.namaLoket} berhasil ditambahkan`, data: newLoket };
+  };
+
+  const updateLoket = (loketPayload) => {
+    const index = loketData.value.findIndex(l => l.id === loketPayload.id);
+    if (index !== -1) {
+      loketData.value[index] = {
+        ...loketData.value[index],
+        ...loketPayload,
+      };
+      return { success: true, message: `Loket ${loketPayload.namaLoket} berhasil diupdate` };
+    }
+    return { success: false, message: 'Loket tidak ditemukan' };
+  };
+
+  const deleteLoket = (loketId) => {
+    const index = loketData.value.findIndex(l => l.id === loketId);
+    if (index !== -1) {
+      const loketName = loketData.value[index].namaLoket;
+      loketData.value.splice(index, 1);
+      loketData.value.forEach((l, idx) => {
+        l.no = idx + 1;
+      });
+      return { success: true, message: `Loket ${loketName} berhasil dihapus` };
+    }
+    return { success: false, message: 'Loket tidak ditemukan' };
+  };
+
+  const getLoketById = (id) => {
+    return loketData.value.find(l => l.id === id);
+  };
+
+  return {
+    // State
+    loketData,
+    availableServices,
+
+    // Actions
+    addLoket,
+    updateLoket,
+    deleteLoket,
+    getLoketById,
+  };
+}, {
+  persist: {
+    key: 'loket-store-state',
+    storage: typeof window !== 'undefined' ? localStorage : undefined,
+    paths: ['loketData'],
+  },
+});
+
diff --git a/stores/masterStore.js b/stores/masterStore.js
index fd7fed9..22100cc 100644
--- a/stores/masterStore.js
+++ b/stores/masterStore.js
@@ -1,85 +1,44 @@
-// stores/masterStore.js - Integrated dengan Penunjang
+// stores/masterStore.js - Backward Compatibility Layer
+// NOTE: Phase 3 - masterStore sekarang hanya sebagai compatibility layer
+// Data sebenarnya ada di: loketStore, ruangStore, penunjangStore, clinicStore
 import { defineStore } from 'pinia';
-import { ref, computed } from 'vue';
+import { computed } from 'vue';
 import { useClinicStore } from './clinicStore';
+import { useLoketStore } from './loketStore';
+import { useRuangStore } from './ruangStore';
+import { usePenunjangStore } from './penunjangStore';
 
 export const useMasterStore = defineStore('master', () => {
-  // Store referensi utama daftar klinik (single source of truth)
+  // Store references
   const clinicStore = useClinicStore();
+  const loketStore = useLoketStore();
+  const ruangStore = useRuangStore();
+  const penunjangStore = usePenunjangStore();
 
   // ============================================
-  // MASTER KLINIK
+  // MASTER KLINIK (Backward Compatibility)
   // ============================================
-  const klinikData = ref([
-    { 
-      id: 1, 
-      no: 1, 
-      kode: 'AN', 
-      nama: 'ANAK', 
-      shift: 1, 
-      totalQuota: 1000,
-      jamShiftList: [{ dari: '07:00', sampai: '11:00', kuota: 1000 }],
-      autoShift: false,
-      jadwalKlinik: ['Senin', 'Rabu', 'Jumat'],
-    },
-    { 
-      id: 2, 
-      no: 2, 
-      kode: 'AS', 
-      nama: 'ANESTESI', 
-      shift: 2, 
-      totalQuota: 1500,
-      jamShiftList: [
-        { dari: '07:00', sampai: '11:00', kuota: 1000 }, 
-        { dari: '13:00', sampai: '16:00', kuota: 500 }
-      ],
-      autoShift: false,
-      jadwalKlinik: ['Senin', 'Selasa', 'Rabu', 'Kamis', 'Jum\'at'],
-    },
-    { 
-      id: 3, 
-      no: 3, 
-      kode: 'BD', 
-      nama: 'BEDAH', 
-      shift: 1, 
-      totalQuota: 800,
-      jamShiftList: [{ dari: '07:00', sampai: '11:00', kuota: 800 }],
-      autoShift: false,
-      jadwalKlinik: ['Senin', 'Rabu', 'Jumat'],
-    },
-    { 
-      id: 4, 
-      no: 4, 
-      kode: 'GI', 
-      nama: 'GIGI DAN MULUT', 
-      shift: 3, 
-      totalQuota: 2100,
-      jamShiftList: [
-        { dari: '07:00', sampai: '11:00', kuota: 1000 }, 
-        { dari: '13:00', sampai: '16:00', kuota: 700 }, 
-        { dari: '18:00', sampai: '20:00', kuota: 400 }
-      ],
-      autoShift: true,
-      jadwalKlinik: ['Senin', 'Selasa', 'Rabu', 'Kamis', 'Jum\'at'],
-    },
-    { id: 5, no: 5, kode: 'GR', nama: 'GERIATRI', shift: 1, totalQuota: 600, jamShiftList: [{ dari: '07:00', sampai: '11:00', kuota: 600 }], autoShift: false, jadwalKlinik: ['Senin', 'Rabu'] },
-    { id: 6, no: 6, kode: 'GZ', nama: 'GIZI', shift: 1, totalQuota: 500, jamShiftList: [{ dari: '07:00', sampai: '11:00', kuota: 500 }], autoShift: false, jadwalKlinik: ['Senin', 'Rabu', 'Jumat'] },
-    { id: 7, no: 7, kode: 'HO', nama: 'HOM', shift: 1, totalQuota: 750, jamShiftList: [{ dari: '07:00', sampai: '11:00', kuota: 750 }], autoShift: false, jadwalKlinik: ['Senin', 'Selasa', 'Rabu'] },
-    { id: 8, no: 8, kode: 'IP', nama: 'IPD', shift: 1, totalQuota: 900, jamShiftList: [{ dari: '07:00', sampai: '11:00', kuota: 900 }], autoShift: false, jadwalKlinik: ['Senin', 'Rabu', 'Jumat'] },
-    { id: 9, no: 9, kode: 'JT', nama: 'JANTUNG', shift: 2, totalQuota: 1200, jamShiftList: [{ dari: '07:00', sampai: '11:00', kuota: 800 }, { dari: '13:00', sampai: '16:00', kuota: 400 }], autoShift: false, jadwalKlinik: ['Senin', 'Selasa', 'Rabu', 'Kamis', 'Jum\'at'] },
-    { id: 10, no: 10, kode: 'JW', nama: 'JIWA', shift: 1, totalQuota: 700, jamShiftList: [{ dari: '07:00', sampai: '11:00', kuota: 700 }], autoShift: false, jadwalKlinik: ['Senin', 'Rabu'] },
-    { id: 11, no: 11, kode: 'KK', nama: 'KULIT KELAMIN', shift: 1, totalQuota: 600, jamShiftList: [{ dari: '07:00', sampai: '11:00', kuota: 600 }], autoShift: false, jadwalKlinik: ['Selasa', 'Kamis'] },
-    { id: 12, no: 12, kode: 'MT', nama: 'MATA', shift: 1, totalQuota: 800, jamShiftList: [{ dari: '07:00', sampai: '11:00', kuota: 800 }], autoShift: false, jadwalKlinik: ['Senin', 'Rabu', 'Jumat'] },
-    { id: 13, no: 13, kode: 'OB', nama: 'KANDUNGAN', shift: 2, totalQuota: 1000, jamShiftList: [{ dari: '07:00', sampai: '11:00', kuota: 600 }, { dari: '13:00', sampai: '16:00', kuota: 400 }], autoShift: false, jadwalKlinik: ['Senin', 'Selasa', 'Rabu', 'Kamis', 'Jum\'at'] },
-    { id: 14, no: 14, kode: 'PR', nama: 'PARU', shift: 1, totalQuota: 700, jamShiftList: [{ dari: '07:00', sampai: '11:00', kuota: 700 }], autoShift: false, jadwalKlinik: ['Senin', 'Rabu'] },
-    { id: 15, no: 15, kode: 'RT', nama: 'RADIOTERAPI', shift: 1, totalQuota: 500, jamShiftList: [{ dari: '07:00', sampai: '11:00', kuota: 500 }], autoShift: false, jadwalKlinik: ['Senin', 'Selasa', 'Rabu', 'Kamis', 'Jum\'at'] },
-    { id: 16, no: 16, kode: 'RM', nama: 'REHAB MEDIK', shift: 1, totalQuota: 600, jamShiftList: [{ dari: '07:00', sampai: '11:00', kuota: 600 }], autoShift: false, jadwalKlinik: ['Senin', 'Rabu', 'Jumat'] },
-    { id: 17, no: 17, kode: 'SR', nama: 'SARAF', shift: 1, totalQuota: 700, jamShiftList: [{ dari: '07:00', sampai: '11:00', kuota: 700 }], autoShift: false, jadwalKlinik: ['Senin', 'Rabu'] },
-  ]);
+  // NOTE: klinikData sekarang adalah computed yang reference clinicStore (single source of truth)
+  // Ini untuk backward compatibility dengan pages yang masih menggunakan masterStore.klinikData
+  // Format: { id, no, kode, nama, shift, totalQuota, jamShiftList, autoShift, jadwalKlinik }
+  const klinikData = computed(() => {
+    return clinicStore.clinics.map((clinic, index) => {
+      // Convert clinic data ke format masterStore (untuk backward compatibility)
+      return {
+        id: clinic.id,
+        no: index + 1,
+        kode: clinic.kode,
+        nama: clinic.name, // Convert 'name' to 'nama' for compatibility
+        shift: typeof clinic.shift === 'string' ? parseInt(clinic.shift.replace(/[^0-9]/g, '')) || 1 : clinic.shift || 1,
+        totalQuota: clinic.totalQuota || 0,
+        jamShiftList: clinic.jamShiftList || [],
+        autoShift: clinic.autoShift || false,
+        jadwalKlinik: clinic.jadwalKlinik || [],
+      };
+    });
+  });
 
   // Computed - Get klinik list for dropdowns
-  // Sumber data kode & nama klinik diambil dari clinicStore (1 pintu),
-  // lalu difilter hanya untuk kode yang terdaftar di master klinik ini.
   const klinikList = computed(() => {
     const availableCodes = new Set(klinikData.value.map((k) => k.kode));
 
@@ -97,551 +56,132 @@ export const useMasterStore = defineStore('master', () => {
       }));
   });
 
-  // Actions - Klinik
+  // Actions - Klinik (delegate to clinicStore)
   const addKlinik = (klinikPayload) => {
-    const newId = Math.max(...klinikData.value.map(k => k.id), 0) + 1;
-    const newNo = klinikData.value.length + 1;
-    
-    const totalQuota = klinikPayload.jamShiftList.reduce((total, shift) => {
-      return total + (parseInt(shift.kuota) || 0);
-    }, 0);
-
-    const newKlinik = {
-      id: newId,
-      no: newNo,
+    // Map masterStore format ke clinicStore format
+    const clinicPayload = {
       ...klinikPayload,
-      totalQuota: totalQuota,
+      name: klinikPayload.nama, // Convert 'nama' to 'name'
+      shift: `Shift ${klinikPayload.shift}`, // Convert number to string format
     };
-
-    klinikData.value.push(newKlinik);
-    return { success: true, message: `Klinik ${newKlinik.nama} berhasil ditambahkan`, data: newKlinik };
+    return clinicStore.addClinic(clinicPayload);
   };
 
   const updateKlinik = (klinikPayload) => {
-    const index = klinikData.value.findIndex(k => k.id === klinikPayload.id);
-    if (index !== -1) {
-      const totalQuota = klinikPayload.jamShiftList.reduce((total, shift) => {
-        return total + (parseInt(shift.kuota) || 0);
-      }, 0);
-
-      klinikData.value[index] = {
-        ...klinikData.value[index],
-        ...klinikPayload,
-        totalQuota: totalQuota,
-      };
-      return { success: true, message: `Klinik ${klinikPayload.nama} berhasil diupdate` };
-    }
-    return { success: false, message: 'Klinik tidak ditemukan' };
+    // Map masterStore format ke clinicStore format
+    const clinicUpdates = {
+      ...klinikPayload,
+      name: klinikPayload.nama, // Convert 'nama' to 'name'
+      shift: `Shift ${klinikPayload.shift}`, // Convert number to string format
+    };
+    return clinicStore.updateClinic(klinikPayload.id, clinicUpdates);
   };
 
   const deleteKlinik = (klinikId) => {
-    const index = klinikData.value.findIndex(k => k.id === klinikId);
-    if (index !== -1) {
-      const klinikName = klinikData.value[index].nama;
-      klinikData.value.splice(index, 1);
-      klinikData.value.forEach((k, idx) => {
-        k.no = idx + 1;
-      });
-      return { success: true, message: `Klinik ${klinikName} berhasil dihapus` };
-    }
-    return { success: false, message: 'Klinik tidak ditemukan' };
+    // Deletion should ideally happen directly in clinicStore
+    return { success: false, message: 'Penghapusan klinik harus dilakukan melalui Clinic Store.' };
   };
 
   const getKlinikById = (id) => {
-    return klinikData.value.find(k => k.id === id);
+    // Menggunakan getter dari clinicStore
+    const clinic = clinicStore.clinics.find(c => c.id === id);
+    if (clinic) {
+      return {
+        id: clinic.id,
+        no: klinikData.value.findIndex(k => k.id === clinic.id) + 1, // Recalculate 'no'
+        kode: clinic.kode,
+        nama: clinic.name,
+        shift: typeof clinic.shift === 'string' ? parseInt(clinic.shift.replace(/[^0-9]/g, '')) || 1 : clinic.shift || 1,
+        totalQuota: clinic.totalQuota,
+        jamShiftList: clinic.jamShiftList,
+        autoShift: clinic.autoShift,
+        jadwalKlinik: clinic.jadwalKlinik,
+      };
+    }
+    return undefined;
   };
 
   const getKlinikByKode = (kode) => {
-    return klinikData.value.find(k => k.kode === kode);
-  };
-
-  // ============================================
-  // MASTER LOKET
-  // ============================================
-  const loketData = ref([
-    {
-      id: 1,
-      no: 1,
-      namaLoket: "Loket 1",
-      kuota: 500,
-      pelayanan: ["RT", "RM", "TD"],
-      pembayaran: "JKN",
-      keterangan: "ONLINE",
-      statusPelayanan: "RAWAT JALAN",
-    },
-    {
-      id: 2,
-      no: 2,
-      namaLoket: "Loket 2",
-      kuota: 666,
-      pelayanan: ["JW", "SR"],
-      pembayaran: "JKN",
-      keterangan: "ONLINE",
-      statusPelayanan: "RAWAT JALAN",
-    },
-    {
-      id: 3,
-      no: 3,
-      namaLoket: "Loket 3",
-      kuota: 666,
-      pelayanan: ["AS", "JT"],
-      pembayaran: "JKN",
-      keterangan: "ONLINE",
-      statusPelayanan: "RAWAT JALAN",
-    },
-    {
-      id: 4,
-      no: 4,
-      namaLoket: "Loket 4",
-      kuota: 3676,
-      pelayanan: ["KK", "PR"],
-      pembayaran: "JKN",
-      keterangan: "ONLINE",
-      statusPelayanan: "RAWAT JALAN",
-    },
-  ]);
-
-  const availableServices = computed(() => 
-    klinikData.value.map(k => ({
-      id: k.kode,
-      nama: k.nama,
-    }))
-  );
-
-  // Actions - Loket
-  const addLoket = (loketPayload) => {
-    const newId = Math.max(...loketData.value.map(l => l.id), 0) + 1;
-    const newNo = loketData.value.length + 1;
-
-    const newLoket = {
-      id: newId,
-      no: newNo,
-      ...loketPayload,
-    };
-
-    loketData.value.push(newLoket);
-    return { success: true, message: `Loket ${newLoket.namaLoket} berhasil ditambahkan`, data: newLoket };
-  };
-
-  const updateLoket = (loketPayload) => {
-    const index = loketData.value.findIndex(l => l.id === loketPayload.id);
-    if (index !== -1) {
-      loketData.value[index] = {
-        ...loketData.value[index],
-        ...loketPayload,
+    // Menggunakan getter dari clinicStore
+    const clinic = clinicStore.getClinicConfigByKode(kode);
+    if (clinic) {
+      return {
+        id: clinic.id,
+        no: klinikData.value.findIndex(k => k.kode === clinic.kode) + 1, // Recalculate 'no'
+        kode: clinic.kode,
+        nama: clinic.name,
+        shift: typeof clinic.shift === 'string' ? parseInt(clinic.shift.replace(/[^0-9]/g, '')) || 1 : clinic.shift || 1,
+        totalQuota: clinic.totalQuota,
+        jamShiftList: clinic.jamShiftList,
+        autoShift: clinic.autoShift,
+        jadwalKlinik: clinic.jadwalKlinik,
       };
-      return { success: true, message: `Loket ${loketPayload.namaLoket} berhasil diupdate` };
     }
-    return { success: false, message: 'Loket tidak ditemukan' };
-  };
-
-  const deleteLoket = (loketId) => {
-    const index = loketData.value.findIndex(l => l.id === loketId);
-    if (index !== -1) {
-      const loketName = loketData.value[index].namaLoket;
-      loketData.value.splice(index, 1);
-      loketData.value.forEach((l, idx) => {
-        l.no = idx + 1;
-      });
-      return { success: true, message: `Loket ${loketName} berhasil dihapus` };
-    }
-    return { success: false, message: 'Loket tidak ditemukan' };
-  };
-
-  const getLoketById = (id) => {
-    return loketData.value.find(l => l.id === id);
+    return undefined;
   };
 
   // ============================================
-  // MASTER KLINIK RUANG
+  // MASTER LOKET (Backward Compatibility)
   // ============================================
-  const ruangData = ref([
-    { 
-      id: 1, 
-      no: 1, 
-      kodeKlinik: 'AN', 
-      namaKlinik: 'ANAK', 
-      namaRuang: 'R. TINDAKAN',
-      ruangList: [
-        { nomorRuang: '1', namaRuang: 'R. TINDAKAN', nomorScreen: '101' }
-      ]
-    },
-    { 
-      id: 2, 
-      no: 2, 
-      kodeKlinik: 'AS', 
-      namaKlinik: 'ANESTESI', 
-      namaRuang: 'Ruang 1, Ruang 2',
-      ruangList: [
-        { nomorRuang: '1', namaRuang: 'Ruang 1', nomorScreen: '201' },
-        { nomorRuang: '2', namaRuang: 'Ruang 2', nomorScreen: '202' }
-      ]
-    },
-    { 
-      id: 3, 
-      no: 3, 
-      kodeKlinik: 'GI', 
-      namaKlinik: 'GIGI DAN MULUT', 
-      namaRuang: 'Ruang 1, Ruang 2, Ruang 3',
-      ruangList: [
-        { nomorRuang: '1', namaRuang: 'Ruang 1', nomorScreen: '501' },
-        { nomorRuang: '2', namaRuang: 'Ruang 2', nomorScreen: '502' },
-        { nomorRuang: '3', namaRuang: 'Ruang 3', nomorScreen: '503' }
-      ]
-    },
-  ]);
+  // Reference dari loketStore
+  const loketData = computed(() => loketStore.loketData);
+  const availableServices = computed(() => loketStore.availableServices);
 
-  // Computed
-  const totalKlinikRuang = computed(() => ruangData.value.length);
-  const totalRuangan = computed(() => {
-    return ruangData.value.reduce((total, klinik) => {
-      return total + klinik.ruangList.length;
-    }, 0);
-  });
-
-  // Actions - Ruang
-  const addRuang = (ruangPayload) => {
-    const newId = Math.max(...ruangData.value.map(r => r.id), 0) + 1;
-    const newNo = ruangData.value.length + 1;
-
-    const namaRuangDisplay = ruangPayload.ruangList
-      .map(r => r.namaRuang)
-      .filter(n => n)
-      .join(', ');
-
-    const newRuang = {
-      id: newId,
-      no: newNo,
-      ...ruangPayload,
-      namaRuang: namaRuangDisplay,
-    };
-
-    ruangData.value.push(newRuang);
-    return { success: true, message: `Ruang klinik ${newRuang.namaKlinik} berhasil ditambahkan`, data: newRuang };
-  };
-
-  const updateRuang = (ruangPayload) => {
-    const index = ruangData.value.findIndex(r => r.id === ruangPayload.id);
-    if (index !== -1) {
-      const namaRuangDisplay = ruangPayload.ruangList
-        .map(r => r.namaRuang)
-        .filter(n => n)
-        .join(', ');
-
-      ruangData.value[index] = {
-        ...ruangData.value[index],
-        ...ruangPayload,
-        namaRuang: namaRuangDisplay,
-      };
-      return { success: true, message: `Ruang klinik ${ruangPayload.namaKlinik} berhasil diupdate` };
-    }
-    return { success: false, message: 'Ruang tidak ditemukan' };
-  };
-
-  const deleteRuang = (ruangId) => {
-    const index = ruangData.value.findIndex(r => r.id === ruangId);
-    if (index !== -1) {
-      const ruangName = `${ruangData.value[index].namaKlinik} - ${ruangData.value[index].namaRuang}`;
-      ruangData.value.splice(index, 1);
-      ruangData.value.forEach((r, idx) => {
-        r.no = idx + 1;
-      });
-      return { success: true, message: `Ruang ${ruangName} berhasil dihapus` };
-    }
-    return { success: false, message: 'Ruang tidak ditemukan' };
-  };
-
-  const getRuangByKlinik = (kodeKlinik) => {
-    return ruangData.value.filter(r => r.kodeKlinik === kodeKlinik);
-  };
-
-  // Get all ruang list (for antrian display)
-  const getAllRuangList = computed(() => {
-    const allRuang = [];
-    ruangData.value.forEach(klinik => {
-      klinik.ruangList.forEach(ruang => {
-        allRuang.push({
-          kodeKlinik: klinik.kodeKlinik,
-          namaKlinik: klinik.namaKlinik,
-          ...ruang
-        });
-      });
-    });
-    return allRuang;
-  });
+  // Actions - Loket (delegate to loketStore)
+  const addLoket = (loketPayload) => loketStore.addLoket(loketPayload);
+  const updateLoket = (loketPayload) => loketStore.updateLoket(loketPayload);
+  const deleteLoket = (loketId) => loketStore.deleteLoket(loketId);
+  const getLoketById = (id) => loketStore.getLoketById(id);
 
   // ============================================
-  // MASTER PENUNJANG
+  // MASTER KLINIK RUANG (Backward Compatibility)
   // ============================================
-  const penunjangData = ref([
-    {
-      id: 1,
-      no: 1,
-      kode: 'LAB',
-      nama: 'LABORATORIUM',
-      jenis: 'Medis',
-      shift: 3,
-      totalQuota: 150,
-      jamShiftList: [
-        { dari: '07:00', sampai: '15:00', kuota: 60 },
-        { dari: '13:00', sampai: '21:00', kuota: 50 },
-        { dari: '21:00', sampai: '07:00', kuota: 40 }
-      ],
-      autoShift: true,
-      jadwalOperasional: ['Senin', 'Selasa', 'Rabu', 'Kamis', 'Jum\'at', 'Sabtu', 'Minggu'],
-      status: 'Aktif',
-      estimasiLayanan: 30,
-      keterangan: 'Pemeriksaan darah lengkap, urine, dan pemeriksaan laboratorium lainnya'
-    },
-    {
-      id: 2,
-      no: 2,
-      kode: 'RAD',
-      nama: 'RADIOLOGI',
-      jenis: 'Medis',
-      shift: 2,
-      totalQuota: 100,
-      jamShiftList: [
-        { dari: '07:00', sampai: '15:00', kuota: 60 },
-        { dari: '13:00', sampai: '21:00', kuota: 40 }
-      ],
-      autoShift: true,
-      jadwalOperasional: ['Senin', 'Selasa', 'Rabu', 'Kamis', 'Jum\'at', 'Sabtu'],
-      status: 'Aktif',
-      estimasiLayanan: 45,
-      keterangan: 'Rontgen, CT Scan, MRI, USG, dan pemeriksaan radiologi lainnya'
-    },
-    {
-      id: 3,
-      no: 3,
-      kode: 'PAT',
-      nama: 'PATOLOGI ANATOMI',
-      jenis: 'Medis',
-      shift: 1,
-      totalQuota: 50,
-      jamShiftList: [
-        { dari: '07:00', sampai: '15:00', kuota: 50 }
-      ],
-      autoShift: false,
-      jadwalOperasional: ['Senin', 'Selasa', 'Rabu', 'Kamis', 'Jum\'at'],
-      status: 'Aktif',
-      estimasiLayanan: 60,
-      keterangan: 'Pemeriksaan jaringan dan sitologi'
-    },
-    {
-      id: 4,
-      no: 4,
-      kode: 'RHB',
-      nama: 'REHABILITASI MEDIK',
-      jenis: 'Medis',
-      shift: 2,
-      totalQuota: 80,
-      jamShiftList: [
-        { dari: '07:00', sampai: '13:00', kuota: 40 },
-        { dari: '13:00', sampai: '19:00', kuota: 40 }
-      ],
-      autoShift: true,
-      jadwalOperasional: ['Senin', 'Selasa', 'Rabu', 'Kamis', 'Jum\'at'],
-      status: 'Aktif',
-      estimasiLayanan: 30,
-      keterangan: 'Fisioterapi, terapi okupasi, dan terapi wicara'
-    },
-    {
-      id: 5,
-      no: 5,
-      kode: 'RME',
-      nama: 'REKAM MEDIS',
-      jenis: 'Non-Medis',
-      shift: 2,
-      totalQuota: 120,
-      jamShiftList: [
-        { dari: '07:00', sampai: '15:00', kuota: 70 },
-        { dari: '13:00', sampai: '21:00', kuota: 50 }
-      ],
-      autoShift: true,
-      jadwalOperasional: ['Senin', 'Selasa', 'Rabu', 'Kamis', 'Jum\'at', 'Sabtu'],
-      status: 'Aktif',
-      estimasiLayanan: 15,
-      keterangan: 'Pengurusan dokumen rekam medis dan surat keterangan'
-    },
-    {
-      id: 6,
-      no: 6,
-      kode: 'GIZ',
-      nama: 'GIZI',
-      jenis: 'Non-Medis',
-      shift: 2,
-      totalQuota: 60,
-      jamShiftList: [
-        { dari: '07:00', sampai: '13:00', kuota: 30 },
-        { dari: '13:00', sampai: '19:00', kuota: 30 }
-      ],
-      autoShift: true,
-      jadwalOperasional: ['Senin', 'Selasa', 'Rabu', 'Kamis', 'Jum\'at'],
-      status: 'Aktif',
-      estimasiLayanan: 20,
-      keterangan: 'Konsultasi gizi dan diet'
-    },
-    {
-      id: 7,
-      no: 7,
-      kode: 'LND',
-      nama: 'LAUNDRY',
-      jenis: 'Non-Medis',
-      shift: 3,
-      totalQuota: 200,
-      jamShiftList: [
-        { dari: '06:00', sampai: '14:00', kuota: 80 },
-        { dari: '14:00', sampai: '22:00', kuota: 70 },
-        { dari: '22:00', sampai: '06:00', kuota: 50 }
-      ],
-      autoShift: true,
-      jadwalOperasional: ['Senin', 'Selasa', 'Rabu', 'Kamis', 'Jum\'at', 'Sabtu', 'Minggu'],
-      status: 'Aktif',
-      estimasiLayanan: 10,
-      keterangan: 'Layanan laundry linen rumah sakit'
-    },
-    {
-      id: 8,
-      no: 8,
-      kode: 'INF',
-      nama: 'PELAYANAN INFORMASI',
-      jenis: 'Non-Medis',
-      shift: 2,
-      totalQuota: 150,
-      jamShiftList: [
-        { dari: '07:00', sampai: '15:00', kuota: 80 },
-        { dari: '13:00', sampai: '21:00', kuota: 70 }
-      ],
-      autoShift: true,
-      jadwalOperasional: ['Senin', 'Selasa', 'Rabu', 'Kamis', 'Jum\'at', 'Sabtu', 'Minggu'],
-      status: 'Aktif',
-      estimasiLayanan: 10,
-      keterangan: 'Informasi umum rumah sakit dan bantuan navigasi'
-    },
-    {
-      id: 9,
-      no: 9,
-      kode: 'FRM',
-      nama: 'FARMASI',
-      jenis: 'Medis',
-      shift: 3,
-      totalQuota: 200,
-      jamShiftList: [
-        { dari: '07:00', sampai: '15:00', kuota: 80 },
-        { dari: '13:00', sampai: '21:00', kuota: 70 },
-        { dari: '21:00', sampai: '07:00', kuota: 50 }
-      ],
-      autoShift: true,
-      jadwalOperasional: ['Senin', 'Selasa', 'Rabu', 'Kamis', 'Jum\'at', 'Sabtu', 'Minggu'],
-      status: 'Aktif',
-      estimasiLayanan: 20,
-      keterangan: 'Pelayanan obat dan konsultasi farmasi'
-    }
-  ]);
+  // Reference dari ruangStore
+  const ruangData = computed(() => ruangStore.ruangData);
+  const totalKlinikRuang = computed(() => ruangStore.totalKlinikRuang);
+  const totalRuangan = computed(() => ruangStore.totalRuangan);
+  const getAllRuangList = computed(() => ruangStore.getAllRuangList);
 
-  // Computed - Penunjang
-  const totalPenunjang = computed(() => penunjangData.value.length);
-  const activePenunjang = computed(() => penunjangData.value.filter(p => p.status === 'Aktif'));
-  const penunjangMedis = computed(() => penunjangData.value.filter(p => p.jenis === 'Medis'));
-  const penunjangNonMedis = computed(() => penunjangData.value.filter(p => p.jenis === 'Non-Medis'));
+  // Actions - Ruang (delegate to ruangStore)
+  const addRuang = (ruangPayload) => ruangStore.addRuang(ruangPayload);
+  const updateRuang = (ruangPayload) => ruangStore.updateRuang(ruangPayload);
+  const deleteRuang = (ruangId) => ruangStore.deleteRuang(ruangId);
+  const getRuangByKlinik = (kodeKlinik) => ruangStore.getRuangByKlinik(kodeKlinik);
 
-  // Get penunjang list for dropdowns
-  const penunjangList = computed(() => 
-    penunjangData.value
-      .filter(p => p.status === 'Aktif')
-      .map(p => ({ 
-        id: p.id,
-        kode: p.kode, 
-        nama: p.nama 
-      }))
-  );
+  // ============================================
+  // MASTER PENUNJANG (Backward Compatibility)
+  // ============================================
+  // Reference dari penunjangStore
+  const penunjangData = computed(() => penunjangStore.penunjangData);
+  const totalPenunjang = computed(() => penunjangStore.totalPenunjang);
+  const activePenunjang = computed(() => penunjangStore.activePenunjang);
+  const penunjangMedis = computed(() => penunjangStore.penunjangMedis);
+  const penunjangNonMedis = computed(() => penunjangStore.penunjangNonMedis);
+  const penunjangList = computed(() => penunjangStore.penunjangList);
 
-  // Actions - Penunjang
-  const addPenunjang = (penunjangPayload) => {
-    const newId = Math.max(...penunjangData.value.map(p => p.id), 0) + 1;
-    const newNo = penunjangData.value.length + 1;
-    
-    const totalQuota = penunjangPayload.jamShiftList.reduce((total, shift) => {
-      return total + (parseInt(shift.kuota) || 0);
-    }, 0);
-
-    const newPenunjang = {
-      id: newId,
-      no: newNo,
-      ...penunjangPayload,
-      totalQuota: totalQuota,
-    };
-
-    penunjangData.value.push(newPenunjang);
-    return { success: true, message: `Penunjang ${newPenunjang.nama} berhasil ditambahkan`, data: newPenunjang };
-  };
-
-  const updatePenunjang = (penunjangPayload) => {
-    const index = penunjangData.value.findIndex(p => p.id === penunjangPayload.id);
-    if (index !== -1) {
-      const totalQuota = penunjangPayload.jamShiftList.reduce((total, shift) => {
-        return total + (parseInt(shift.kuota) || 0);
-      }, 0);
-
-      penunjangData.value[index] = {
-        ...penunjangData.value[index],
-        ...penunjangPayload,
-        totalQuota: totalQuota,
-      };
-      return { success: true, message: `Penunjang ${penunjangPayload.nama} berhasil diupdate` };
-    }
-    return { success: false, message: 'Penunjang tidak ditemukan' };
-  };
-
-  const deletePenunjang = (penunjangId) => {
-    const index = penunjangData.value.findIndex(p => p.id === penunjangId);
-    if (index !== -1) {
-      const penunjangName = penunjangData.value[index].nama;
-      penunjangData.value.splice(index, 1);
-      penunjangData.value.forEach((p, idx) => {
-        p.no = idx + 1;
-      });
-      return { success: true, message: `Penunjang ${penunjangName} berhasil dihapus` };
-    }
-    return { success: false, message: 'Penunjang tidak ditemukan' };
-  };
-
-  const getPenunjangById = (id) => {
-    return penunjangData.value.find(p => p.id === id);
-  };
-
-  const getPenunjangByKode = (kode) => {
-    return penunjangData.value.find(p => p.kode === kode);
-  };
-
-  // Get active penunjang list (untuk Admin Penunjang)
-  const getActivePenunjangList = () => {
-    return penunjangData.value
-      .filter(p => p.status === 'Aktif')
-      .map(p => ({ id: p.id, name: p.nama, kode: p.kode }));
-  };
+  // Actions - Penunjang (delegate to penunjangStore)
+  const addPenunjang = (penunjangPayload) => penunjangStore.addPenunjang(penunjangPayload);
+  const updatePenunjang = (penunjangPayload) => penunjangStore.updatePenunjang(penunjangPayload);
+  const deletePenunjang = (penunjangId) => penunjangStore.deletePenunjang(penunjangId);
+  const getPenunjangById = (id) => penunjangStore.getPenunjangById(id);
+  const getPenunjangByKode = (kode) => penunjangStore.getPenunjangByKode(kode);
+  const getActivePenunjangList = () => penunjangStore.getActivePenunjangList();
 
   // ============================================
   // UTILITY FUNCTIONS
   // ============================================
   const getKlinikNameByKode = (kode) => {
-    // Utamakan nama dari clinicStore agar konsisten di seluruh aplikasi
-    if (typeof clinicStore.getClinicByKode === 'function') {
-      const clinic = clinicStore.getClinicByKode(kode);
-      if (clinic) {
-        return clinic.name;
-      }
+    // Single source of truth: selalu ambil dari clinicStore
+    const clinic = clinicStore.getClinicByKode(kode);
+    if (clinic) {
+      return clinic.name;
     }
-
-    // Fallback ke data lokal master jika belum terdaftar di clinicStore
-    const klinik = klinikData.value.find((k) => k.kode === kode);
-    return klinik ? klinik.nama : kode;
+    // Fallback jika tidak ditemukan
+    return kode;
   };
 
   const getPenunjangNameByKode = (kode) => {
-    const penunjang = penunjangData.value.find(p => p.kode === kode);
-    return penunjang ? penunjang.nama : kode;
+    return penunjangStore.getPenunjangNameByKode(kode);
   };
 
   return {
@@ -712,4 +252,7 @@ export const useMasterStore = defineStore('master', () => {
     getKlinikNameByKode,
     getPenunjangNameByKode,
   };
-});
\ No newline at end of file
+}, {
+  // NOTE: masterStore tidak perlu persist karena semua data sudah di-persist di stores masing-masing
+  persist: false,
+});
diff --git a/stores/penunjangStore.js b/stores/penunjangStore.js
new file mode 100644
index 0000000..d6c82f4
--- /dev/null
+++ b/stores/penunjangStore.js
@@ -0,0 +1,289 @@
+// stores/penunjangStore.js
+import { defineStore } from 'pinia';
+import { ref, computed } from 'vue';
+
+export const usePenunjangStore = defineStore('penunjang', () => {
+  // State - Penunjang Data
+  const penunjangData = ref([
+    {
+      id: 1,
+      no: 1,
+      kode: 'LAB',
+      nama: 'LABORATORIUM',
+      jenis: 'Medis',
+      shift: 3,
+      totalQuota: 150,
+      jamShiftList: [
+        { dari: '07:00', sampai: '15:00', kuota: 60 },
+        { dari: '13:00', sampai: '21:00', kuota: 50 },
+        { dari: '21:00', sampai: '07:00', kuota: 40 }
+      ],
+      autoShift: true,
+      jadwalOperasional: ['Senin', 'Selasa', 'Rabu', 'Kamis', 'Jum\'at', 'Sabtu', 'Minggu'],
+      status: 'Aktif',
+      estimasiLayanan: 30,
+      keterangan: 'Pemeriksaan darah lengkap, urine, dan pemeriksaan laboratorium lainnya'
+    },
+    {
+      id: 2,
+      no: 2,
+      kode: 'RAD',
+      nama: 'RADIOLOGI',
+      jenis: 'Medis',
+      shift: 2,
+      totalQuota: 100,
+      jamShiftList: [
+        { dari: '07:00', sampai: '15:00', kuota: 60 },
+        { dari: '13:00', sampai: '21:00', kuota: 40 }
+      ],
+      autoShift: true,
+      jadwalOperasional: ['Senin', 'Selasa', 'Rabu', 'Kamis', 'Jum\'at', 'Sabtu'],
+      status: 'Aktif',
+      estimasiLayanan: 45,
+      keterangan: 'Rontgen, CT Scan, MRI, USG, dan pemeriksaan radiologi lainnya'
+    },
+    {
+      id: 3,
+      no: 3,
+      kode: 'PAT',
+      nama: 'PATOLOGI ANATOMI',
+      jenis: 'Medis',
+      shift: 1,
+      totalQuota: 50,
+      jamShiftList: [
+        { dari: '07:00', sampai: '15:00', kuota: 50 }
+      ],
+      autoShift: false,
+      jadwalOperasional: ['Senin', 'Selasa', 'Rabu', 'Kamis', 'Jum\'at'],
+      status: 'Aktif',
+      estimasiLayanan: 60,
+      keterangan: 'Pemeriksaan jaringan dan sitologi'
+    },
+    {
+      id: 4,
+      no: 4,
+      kode: 'RHB',
+      nama: 'REHABILITASI MEDIK',
+      jenis: 'Medis',
+      shift: 2,
+      totalQuota: 80,
+      jamShiftList: [
+        { dari: '07:00', sampai: '13:00', kuota: 40 },
+        { dari: '13:00', sampai: '19:00', kuota: 40 }
+      ],
+      autoShift: true,
+      jadwalOperasional: ['Senin', 'Selasa', 'Rabu', 'Kamis', 'Jum\'at'],
+      status: 'Aktif',
+      estimasiLayanan: 30,
+      keterangan: 'Fisioterapi, terapi okupasi, dan terapi wicara'
+    },
+    {
+      id: 5,
+      no: 5,
+      kode: 'RME',
+      nama: 'REKAM MEDIS',
+      jenis: 'Non-Medis',
+      shift: 2,
+      totalQuota: 120,
+      jamShiftList: [
+        { dari: '07:00', sampai: '15:00', kuota: 70 },
+        { dari: '13:00', sampai: '21:00', kuota: 50 }
+      ],
+      autoShift: true,
+      jadwalOperasional: ['Senin', 'Selasa', 'Rabu', 'Kamis', 'Jum\'at', 'Sabtu'],
+      status: 'Aktif',
+      estimasiLayanan: 15,
+      keterangan: 'Pengurusan dokumen rekam medis dan surat keterangan'
+    },
+    {
+      id: 6,
+      no: 6,
+      kode: 'GIZ',
+      nama: 'GIZI',
+      jenis: 'Non-Medis',
+      shift: 2,
+      totalQuota: 60,
+      jamShiftList: [
+        { dari: '07:00', sampai: '13:00', kuota: 30 },
+        { dari: '13:00', sampai: '19:00', kuota: 30 }
+      ],
+      autoShift: true,
+      jadwalOperasional: ['Senin', 'Selasa', 'Rabu', 'Kamis', 'Jum\'at'],
+      status: 'Aktif',
+      estimasiLayanan: 20,
+      keterangan: 'Konsultasi gizi dan diet'
+    },
+    {
+      id: 7,
+      no: 7,
+      kode: 'LND',
+      nama: 'LAUNDRY',
+      jenis: 'Non-Medis',
+      shift: 3,
+      totalQuota: 200,
+      jamShiftList: [
+        { dari: '06:00', sampai: '14:00', kuota: 80 },
+        { dari: '14:00', sampai: '22:00', kuota: 70 },
+        { dari: '22:00', sampai: '06:00', kuota: 50 }
+      ],
+      autoShift: true,
+      jadwalOperasional: ['Senin', 'Selasa', 'Rabu', 'Kamis', 'Jum\'at', 'Sabtu', 'Minggu'],
+      status: 'Aktif',
+      estimasiLayanan: 10,
+      keterangan: 'Layanan laundry linen rumah sakit'
+    },
+    {
+      id: 8,
+      no: 8,
+      kode: 'INF',
+      nama: 'PELAYANAN INFORMASI',
+      jenis: 'Non-Medis',
+      shift: 2,
+      totalQuota: 150,
+      jamShiftList: [
+        { dari: '07:00', sampai: '15:00', kuota: 80 },
+        { dari: '13:00', sampai: '21:00', kuota: 70 }
+      ],
+      autoShift: true,
+      jadwalOperasional: ['Senin', 'Selasa', 'Rabu', 'Kamis', 'Jum\'at', 'Sabtu', 'Minggu'],
+      status: 'Aktif',
+      estimasiLayanan: 10,
+      keterangan: 'Informasi umum rumah sakit dan bantuan navigasi'
+    },
+    {
+      id: 9,
+      no: 9,
+      kode: 'FRM',
+      nama: 'FARMASI',
+      jenis: 'Medis',
+      shift: 3,
+      totalQuota: 200,
+      jamShiftList: [
+        { dari: '07:00', sampai: '15:00', kuota: 80 },
+        { dari: '13:00', sampai: '21:00', kuota: 70 },
+        { dari: '21:00', sampai: '07:00', kuota: 50 }
+      ],
+      autoShift: true,
+      jadwalOperasional: ['Senin', 'Selasa', 'Rabu', 'Kamis', 'Jum\'at', 'Sabtu', 'Minggu'],
+      status: 'Aktif',
+      estimasiLayanan: 20,
+      keterangan: 'Pelayanan obat dan konsultasi farmasi'
+    }
+  ]);
+
+  // Computed
+  const totalPenunjang = computed(() => penunjangData.value.length);
+  const activePenunjang = computed(() => penunjangData.value.filter(p => p.status === 'Aktif'));
+  const penunjangMedis = computed(() => penunjangData.value.filter(p => p.jenis === 'Medis'));
+  const penunjangNonMedis = computed(() => penunjangData.value.filter(p => p.jenis === 'Non-Medis'));
+
+  // Get penunjang list for dropdowns
+  // Standardized to use 'name' for consistency (keeping 'nama' for backward compatibility)
+  const penunjangList = computed(() => 
+    penunjangData.value
+      .filter(p => p.status === 'Aktif')
+      .map(p => ({ 
+        id: p.id,
+        kode: p.kode, 
+        nama: p.nama, // Keep 'nama' for internal consistency
+        name: p.nama  // Add 'name' alias for external compatibility
+      }))
+  );
+
+  // Actions - CRUD Operations
+  const addPenunjang = (penunjangPayload) => {
+    const newId = Math.max(...penunjangData.value.map(p => p.id), 0) + 1;
+    const newNo = penunjangData.value.length + 1;
+    
+    const totalQuota = penunjangPayload.jamShiftList.reduce((total, shift) => {
+      return total + (parseInt(shift.kuota) || 0);
+    }, 0);
+
+    const newPenunjang = {
+      id: newId,
+      no: newNo,
+      ...penunjangPayload,
+      totalQuota: totalQuota,
+    };
+
+    penunjangData.value.push(newPenunjang);
+    return { success: true, message: `Penunjang ${newPenunjang.nama} berhasil ditambahkan`, data: newPenunjang };
+  };
+
+  const updatePenunjang = (penunjangPayload) => {
+    const index = penunjangData.value.findIndex(p => p.id === penunjangPayload.id);
+    if (index !== -1) {
+      const totalQuota = penunjangPayload.jamShiftList.reduce((total, shift) => {
+        return total + (parseInt(shift.kuota) || 0);
+      }, 0);
+
+      penunjangData.value[index] = {
+        ...penunjangData.value[index],
+        ...penunjangPayload,
+        totalQuota: totalQuota,
+      };
+      return { success: true, message: `Penunjang ${penunjangPayload.nama} berhasil diupdate` };
+    }
+    return { success: false, message: 'Penunjang tidak ditemukan' };
+  };
+
+  const deletePenunjang = (penunjangId) => {
+    const index = penunjangData.value.findIndex(p => p.id === penunjangId);
+    if (index !== -1) {
+      const penunjangName = penunjangData.value[index].nama;
+      penunjangData.value.splice(index, 1);
+      penunjangData.value.forEach((p, idx) => {
+        p.no = idx + 1;
+      });
+      return { success: true, message: `Penunjang ${penunjangName} berhasil dihapus` };
+    }
+    return { success: false, message: 'Penunjang tidak ditemukan' };
+  };
+
+  const getPenunjangById = (id) => {
+    return penunjangData.value.find(p => p.id === id);
+  };
+
+  const getPenunjangByKode = (kode) => {
+    return penunjangData.value.find(p => p.kode === kode);
+  };
+
+  // Get active penunjang list (untuk Admin Penunjang)
+  const getActivePenunjangList = () => {
+    return penunjangData.value
+      .filter(p => p.status === 'Aktif')
+      .map(p => ({ id: p.id, name: p.nama, kode: p.kode }));
+  };
+
+  // Utility function
+  const getPenunjangNameByKode = (kode) => {
+    const penunjang = penunjangData.value.find(p => p.kode === kode);
+    return penunjang ? penunjang.nama : kode;
+  };
+
+  return {
+    // State
+    penunjangData,
+    totalPenunjang,
+    activePenunjang,
+    penunjangMedis,
+    penunjangNonMedis,
+    penunjangList,
+
+    // Actions
+    addPenunjang,
+    updatePenunjang,
+    deletePenunjang,
+    getPenunjangById,
+    getPenunjangByKode,
+    getActivePenunjangList,
+    getPenunjangNameByKode,
+  };
+}, {
+  persist: {
+    key: 'penunjang-store-state',
+    storage: typeof window !== 'undefined' ? localStorage : undefined,
+    paths: ['penunjangData'],
+  },
+});
+
diff --git a/stores/queueStore.js b/stores/queueStore.js
index 748c1e5..ad1d1f6 100644
--- a/stores/queueStore.js
+++ b/stores/queueStore.js
@@ -2,9 +2,11 @@
 import { defineStore } from 'pinia';
 import { ref, computed } from 'vue';
 import { useClinicStore } from './clinicStore';
+import { usePenunjangStore } from './penunjangStore';
 
 export const useQueueStore = defineStore('queue', () => {
   const clinicStore = useClinicStore();
+  const penunjangStore = usePenunjangStore();
   // Seed data for easy reset during dev
   const seedPatients = [
     {
@@ -167,9 +169,9 @@ export const useQueueStore = defineStore('queue', () => {
 
   const cloneSeed = () => seedPatients.map(p => ({ ...p }));
 
-  // State
+  // Initialize state - will be automatically hydrated from localStorage by pinia-plugin-persistedstate
+  // If localStorage has data, it will override these defaults
   const allPatients = ref(cloneSeed());
-
   const quotaUsed = ref(5);
   const currentProcessingPatient = ref({
     loket: null,
@@ -193,17 +195,17 @@ export const useQueueStore = defineStore('queue', () => {
     }));
   });
 
-  const penunjangs = ref([
-    { id: 1, name: "LABORATORIUM" },
-    { id: 2, name: "RADIOLOGI" },
-    { id: 3, name: "USG" },
-    { id: 4, name: "CT SCAN" },
-    { id: 5, name: "MRI" },
-    { id: 6, name: "EKG" },
-    { id: 7, name: "ENDOSKOPI" },
-    { id: 8, name: "FISIOTERAPI" },
-    { id: 9, name: "FARMASI" },
-  ]);
+  // Penunjang data - reference dari penunjangStore (single source of truth)
+  // Menggunakan computed untuk reactive reference
+  const penunjangs = computed(() => {
+    // Get penunjang list from penunjangStore dan map ke format yang diharapkan
+    const penunjangList = penunjangStore.penunjangList || [];
+    return penunjangList.map(p => ({
+      id: p.id,
+      name: p.nama || p.name, // Support both nama and name for backward compatibility
+      kode: p.kode
+    }));
+  });
 
   // Computed - Filter berdasarkan process stage dan status
   const getPatientsByStage = (stage) => {
@@ -528,6 +530,144 @@ export const useQueueStore = defineStore('queue', () => {
     currentProcessingPatient.value[adminType] = patient;
   };
 
+  // Register patient from Anjungan (onsite registration)
+  const registerPatientFromAnjungan = (clinic, paymentType, visitType = 'SEKARANG', visitDate = null, shift = 'Shift 1', namaDokter = null) => {
+    const newNo = allPatients.value.length > 0 
+      ? Math.max(...allPatients.value.map(p => p.no)) + 1 
+      : 1;
+    
+    const timestamp = new Date();
+    const visitDateTime = visitDate ? new Date(visitDate) : timestamp;
+    const jamPanggil = visitDate 
+      ? `${String(visitDateTime.getHours()).padStart(2, "0")}:${String(visitDateTime.getMinutes()).padStart(2, "0")}`
+      : `${String(timestamp.getHours()).padStart(2, "0")}:${String(timestamp.getMinutes()).padStart(2, "0")}`;
+    
+    // Generate barcode (simulasi - bisa diganti dengan API call)
+    const barcode = `250811${String(Date.now()).slice(-6)}${String(newNo).padStart(3, "0")}`;
+    
+    // Format nomor antrean: UMXXXX | Onsite - barcode
+    const noAntrian = `UM${String(newNo).padStart(4, "0")} | Onsite - ${barcode}`;
+    
+    // Determine status based on visit type
+    const status = visitType === 'SEKARANG' ? 'waiting' : 'pending';
+    
+    const newPatient = {
+      no: newNo,
+      jamPanggil: jamPanggil,
+      barcode: barcode,
+      noAntrian: noAntrian,
+      shift: shift,
+      klinik: clinic.name || clinic,
+      fastTrack: "TIDAK", // Default, bisa diubah nanti
+      pembayaran: paymentType,
+      status: status,
+      processStage: "loket",
+      createdAt: timestamp.toISOString(),
+      registrationType: 'onsite',
+      visitType: visitType,
+      visitDate: visitDate || timestamp.toISOString().substring(0, 10),
+      namaDokter: namaDokter || null, // Nama dokter hanya untuk pasien Eksekutif
+    };
+
+    allPatients.value.push(newPatient);
+
+    return {
+      success: true,
+      message: `Pendaftaran ${clinic.name || clinic} untuk kunjungan ${visitType === 'SEKARANG' ? 'HARI INI' : visitDate} dengan pembayaran ${paymentType} berhasil diproses.`,
+      patient: newPatient,
+    };
+  };
+
+  // Check-in patient (update status from waiting to di-loket)
+  const checkInPatient = (patientIdOrBarcode) => {
+    console.log('🔍 checkInPatient called with:', patientIdOrBarcode);
+    console.log('📊 Total patients in store:', allPatients.value.length);
+    console.log('📋 First few patients:', allPatients.value.slice(0, 3).map(p => ({
+      no: p.no,
+      noAntrian: p.noAntrian,
+      barcode: p.barcode,
+      status: p.status
+    })));
+    
+    // Clean input - remove whitespace and convert to uppercase for comparison
+    const cleanInput = String(patientIdOrBarcode).trim().toUpperCase();
+    
+    // Try to find by multiple criteria:
+    // 1. Exact barcode match
+    // 2. Parse as number and match with no
+    // 3. Extract number from input (e.g., "UM0014" -> "0014" or "14") and match with noAntrian
+    // 4. Check if noAntrian includes the input
+    const patientIndex = allPatients.value.findIndex(p => {
+      // Exact barcode match
+      if (p.barcode === cleanInput || p.barcode === patientIdOrBarcode) {
+        console.log('✅ Found by barcode:', p.barcode);
+        return true;
+      }
+      
+      // Try parsing as number
+      const parsedNo = parseInt(cleanInput.replace(/[^0-9]/g, '')) || parseInt(patientIdOrBarcode);
+      if (!isNaN(parsedNo) && p.no === parsedNo) {
+        console.log('✅ Found by no:', p.no);
+        return true;
+      }
+      
+      // Check if noAntrian includes the input (case insensitive)
+      const noAntrianUpper = (p.noAntrian || '').toUpperCase();
+      if (noAntrianUpper.includes(cleanInput) || noAntrianUpper.includes(patientIdOrBarcode)) {
+        console.log('✅ Found by noAntrian:', p.noAntrian);
+        return true;
+      }
+      
+      // Try to extract number from noAntrian (e.g., "UM0014 | Onsite - ..." -> "0014")
+      const noAntrianNumber = noAntrianUpper.match(/([A-Z]+)(\d+)/);
+      if (noAntrianNumber) {
+        const extractedNumber = noAntrianNumber[2];
+        const inputNumber = cleanInput.replace(/[^0-9]/g, '');
+        if (inputNumber && extractedNumber.includes(inputNumber) || inputNumber.includes(extractedNumber)) {
+          console.log('✅ Found by extracted number from noAntrian');
+          return true;
+        }
+      }
+      
+      return false;
+    });
+    
+    if (patientIndex === -1) {
+      console.log('❌ Patient not found. Searched for:', cleanInput);
+      console.log('📋 Available noAntrian values:', allPatients.value.map(p => p.noAntrian));
+      return { success: false, message: "Pasien tidak ditemukan" };
+    }
+
+    const patient = allPatients.value[patientIndex];
+    console.log('✅ Patient found:', patient);
+    
+    // Only allow check-in if status is waiting or pending
+    if (patient.status !== 'waiting' && patient.status !== 'pending') {
+      console.log('⚠️ Patient status is not waiting/pending:', patient.status);
+      return { 
+        success: false, 
+        message: `Pasien tidak dapat check-in. Status saat ini: ${patient.status}` 
+      };
+    }
+
+    // Update status to di-loket
+    allPatients.value[patientIndex] = {
+      ...allPatients.value[patientIndex],
+      status: "di-loket",
+    };
+    
+    console.log('✅ Check-in successful, patient status updated to di-loket');
+
+    return {
+      success: true,
+      message: `Check-in berhasil. Pasien ${patient.noAntrian.split(" |")[0]} siap diproses di loket.`,
+      patient: allPatients.value[patientIndex],
+    };
+  };
+
+  // State persistence is handled automatically by pinia-plugin-persistedstate
+  // No need for manual watch or save logic
+
   return {
     // State
     allPatients,
@@ -551,5 +691,13 @@ export const useQueueStore = defineStore('queue', () => {
     getTotalPasienByStage,
     getCurrentProcessing,
     setCurrentProcessing,
+    registerPatientFromAnjungan,
+    checkInPatient,
   };
+}, {
+  persist: {
+    key: 'queue-store-state',
+    storage: typeof window !== 'undefined' ? localStorage : undefined,
+    paths: ['allPatients', 'quotaUsed', 'currentProcessingPatient'],
+  },
 });
\ No newline at end of file
diff --git a/stores/ruangStore.js b/stores/ruangStore.js
new file mode 100644
index 0000000..aad7a2e
--- /dev/null
+++ b/stores/ruangStore.js
@@ -0,0 +1,313 @@
+// stores/ruangStore.js
+// Merged dari masterStore.ruangData + klinikruangstore.klinikRuangList
+import { defineStore } from 'pinia';
+import { ref, computed } from 'vue';
+import { useClinicStore } from './clinicStore';
+
+export const useRuangStore = defineStore('ruang', () => {
+  const clinicStore = useClinicStore();
+
+  // State/Computed - List Master Klinik (disinkronkan dengan clinicStore)
+  const masterKlinikList = computed(() => {
+    const baseList = typeof clinicStore.getClinicsForDropdown === 'function'
+      ? clinicStore.getClinicsForDropdown()
+      : [];
+
+    return baseList.map((c) => ({
+      kode: c.kode,
+      nama: c.name,
+      id: c.id,
+    }));
+  });
+
+  // State - Ruang Data (merged dari masterStore.ruangData + klinikruangstore.klinikRuangList)
+  const ruangData = ref([
+    { 
+      id: 1, 
+      no: 1, 
+      kodeKlinik: 'AN', 
+      namaKlinik: 'ANAK', 
+      namaRuang: 'R. TINDAKAN',
+      ruangList: [
+        { nomorRuang: '1', namaRuang: 'R. TINDAKAN', nomorScreen: '101' }
+      ]
+    },
+    { 
+      id: 2, 
+      no: 2, 
+      kodeKlinik: 'AS', 
+      namaKlinik: 'ANESTESI', 
+      namaRuang: 'Ruang 1, Ruang 2',
+      ruangList: [
+        { nomorRuang: '1', namaRuang: 'Ruang 1', nomorScreen: '201' },
+        { nomorRuang: '2', namaRuang: 'Ruang 2', nomorScreen: '202' }
+      ]
+    },
+    { 
+      id: 3, 
+      no: 3, 
+      kodeKlinik: 'BD', 
+      namaKlinik: 'BEDAH', 
+      namaRuang: 'Ruang Konsultasi',
+      ruangList: [
+        { nomorRuang: '1', namaRuang: 'Ruang Konsultasi', nomorScreen: '301' }
+      ]
+    },
+    { 
+      id: 4, 
+      no: 4, 
+      kodeKlinik: 'GR', 
+      namaKlinik: 'GERIATRI', 
+      namaRuang: 'Ruang Pemeriksaan',
+      ruangList: [
+        { nomorRuang: '1', namaRuang: 'Ruang Pemeriksaan', nomorScreen: '401' }
+      ]
+    },
+    { 
+      id: 5, 
+      no: 5, 
+      kodeKlinik: 'GI', 
+      namaKlinik: 'GIGI DAN MULUT', 
+      namaRuang: 'Ruang 1, Ruang 2, Ruang 3',
+      ruangList: [
+        { nomorRuang: '1', namaRuang: 'Ruang 1', nomorScreen: '501' },
+        { nomorRuang: '2', namaRuang: 'Ruang 2', nomorScreen: '502' },
+        { nomorRuang: '3', namaRuang: 'Ruang 3', nomorScreen: '503' }
+      ]
+    },
+  ]);
+
+  // Computed
+  const totalKlinikRuang = computed(() => ruangData.value.length);
+
+  const totalRuangan = computed(() => {
+    return ruangData.value.reduce((total, klinik) => {
+      return total + klinik.ruangList.length;
+    }, 0);
+  });
+
+  // Get all ruang list (for antrian display)
+  const getAllRuangList = computed(() => {
+    const allRuang = [];
+    ruangData.value.forEach(klinik => {
+      klinik.ruangList.forEach(ruang => {
+        allRuang.push({
+          kodeKlinik: klinik.kodeKlinik,
+          namaKlinik: klinik.namaKlinik,
+          ...ruang
+        });
+      });
+    });
+    return allRuang;
+  });
+
+  // Getters
+  const getKlinikByCode = (kode) => {
+    return ruangData.value.find(k => k.kodeKlinik === kode);
+  };
+
+  const getRuangByKlinik = (kodeKlinik) => {
+    return ruangData.value.filter(r => r.kodeKlinik === kodeKlinik);
+  };
+
+  // Actions - CRUD Operations
+  const createKlinikRuang = (data) => {
+    const newId = Math.max(...ruangData.value.map(r => r.id), 0) + 1;
+    const newNo = ruangData.value.length + 1;
+    
+    // Generate nama ruang untuk display
+    const namaRuangDisplay = data.ruangList
+      .map(r => r.namaRuang)
+      .filter(n => n)
+      .join(', ');
+
+    const newKlinikRuang = {
+      id: newId,
+      no: newNo,
+      kodeKlinik: data.kodeKlinik,
+      namaKlinik: data.namaKlinik,
+      namaRuang: namaRuangDisplay,
+      ruangList: data.ruangList
+    };
+
+    ruangData.value.push(newKlinikRuang);
+
+    return {
+      success: true,
+      message: `Klinik Ruang ${data.namaKlinik} berhasil ditambahkan`,
+      data: newKlinikRuang
+    };
+  };
+
+  const updateKlinikRuang = (id, data) => {
+    const index = ruangData.value.findIndex(r => r.id === id);
+    
+    if (index === -1) {
+      return {
+        success: false,
+        message: 'Klinik Ruang tidak ditemukan'
+      };
+    }
+
+    // Generate nama ruang untuk display
+    const namaRuangDisplay = data.ruangList
+      .map(r => r.namaRuang)
+      .filter(n => n)
+      .join(', ');
+
+    ruangData.value[index] = {
+      ...ruangData.value[index],
+      kodeKlinik: data.kodeKlinik,
+      namaKlinik: data.namaKlinik,
+      namaRuang: namaRuangDisplay,
+      ruangList: data.ruangList
+    };
+
+    return {
+      success: true,
+      message: `Klinik Ruang ${data.namaKlinik} berhasil diupdate`,
+      data: ruangData.value[index]
+    };
+  };
+
+  const deleteKlinikRuang = (id) => {
+    const index = ruangData.value.findIndex(r => r.id === id);
+    
+    if (index === -1) {
+      return {
+        success: false,
+        message: 'Klinik Ruang tidak ditemukan'
+      };
+    }
+
+    const deletedKlinik = ruangData.value[index];
+    ruangData.value.splice(index, 1);
+
+    // Reorder numbers
+    ruangData.value.forEach((r, idx) => {
+      r.no = idx + 1;
+    });
+
+    return {
+      success: true,
+      message: `Klinik Ruang ${deletedKlinik.namaKlinik} berhasil dihapus`
+    };
+  };
+
+  const addRuangToKlinik = (klinikId, ruangDataItem) => {
+    const klinik = ruangData.value.find(k => k.id === klinikId);
+    
+    if (!klinik) {
+      return {
+        success: false,
+        message: 'Klinik tidak ditemukan'
+      };
+    }
+
+    klinik.ruangList.push(ruangDataItem);
+
+    // Update display name
+    klinik.namaRuang = klinik.ruangList
+      .map(r => r.namaRuang)
+      .filter(n => n)
+      .join(', ');
+
+    return {
+      success: true,
+      message: `Ruang ${ruangDataItem.namaRuang} berhasil ditambahkan`,
+      data: klinik
+    };
+  };
+
+  const removeRuangFromKlinik = (klinikId, ruangIndex) => {
+    const klinik = ruangData.value.find(k => k.id === klinikId);
+    
+    if (!klinik) {
+      return {
+        success: false,
+        message: 'Klinik tidak ditemukan'
+      };
+    }
+
+    if (klinik.ruangList.length <= 1) {
+      return {
+        success: false,
+        message: 'Minimal harus ada 1 ruangan'
+      };
+    }
+
+    const removedRuang = klinik.ruangList[ruangIndex];
+    klinik.ruangList.splice(ruangIndex, 1);
+
+    // Update display name
+    klinik.namaRuang = klinik.ruangList
+      .map(r => r.namaRuang)
+      .filter(n => n)
+      .join(', ');
+
+    return {
+      success: true,
+      message: `Ruang ${removedRuang.namaRuang} berhasil dihapus`,
+      data: klinik
+    };
+  };
+
+  const searchKlinikRuang = (searchTerm) => {
+    if (!searchTerm) return ruangData.value;
+
+    const term = searchTerm.toLowerCase();
+    return ruangData.value.filter(k => 
+      k.kodeKlinik.toLowerCase().includes(term) ||
+      k.namaKlinik.toLowerCase().includes(term) ||
+      k.namaRuang.toLowerCase().includes(term)
+    );
+  };
+
+  // Alias methods untuk backward compatibility dengan masterStore
+  const addRuang = (ruangPayload) => {
+    return createKlinikRuang(ruangPayload);
+  };
+
+  const updateRuang = (ruangPayload) => {
+    return updateKlinikRuang(ruangPayload.id, ruangPayload);
+  };
+
+  const deleteRuang = (ruangId) => {
+    return deleteKlinikRuang(ruangId);
+  };
+
+  return {
+    // State
+    masterKlinikList,
+    ruangData,
+
+    // Computed
+    totalKlinikRuang,
+    totalRuangan,
+    getAllRuangList,
+
+    // Getters
+    getKlinikByCode,
+    getRuangByKlinik,
+
+    // Actions (new names)
+    createKlinikRuang,
+    updateKlinikRuang,
+    deleteKlinikRuang,
+    addRuangToKlinik,
+    removeRuangFromKlinik,
+    searchKlinikRuang,
+
+    // Alias for backward compatibility
+    addRuang,
+    updateRuang,
+    deleteRuang,
+  };
+}, {
+  persist: {
+    key: 'ruang-store-state',
+    storage: typeof window !== 'undefined' ? localStorage : undefined,
+    paths: ['ruangData'],
+  },
+});
+
diff --git a/stores/screenStore.js b/stores/screenStore.js
index 967305d..0db7c27 100644
--- a/stores/screenStore.js
+++ b/stores/screenStore.js
@@ -86,5 +86,11 @@ export const useScreenStore = defineStore('screen', () => {
     updateScreen,
     deleteScreen,
   };
+}, {
+  persist: {
+    key: 'screen-store-state',
+    storage: typeof window !== 'undefined' ? localStorage : undefined,
+    paths: ['screenItems'],
+  },
 });