From 101dc38910d6ec648183b63bf4871d612460a032 Mon Sep 17 00:00:00 2001
From: Fanrouver <akbararya34@gmail.com>
Date: Mon, 9 Feb 2026 12:26:59 +0700
Subject: [PATCH] update web socket

---
 pages/AdminLoket/[id].vue        |  583 +--
 pages/Anjungan/Anjungan/[id].vue | 1491 ++++----
 pages/CheckInPasien/checkIn.vue  | 5829 ++++++++++++++++++------------
 3 files changed, 4688 insertions(+), 3215 deletions(-)

diff --git a/pages/AdminLoket/[id].vue b/pages/AdminLoket/[id].vue
index 73d8dbf..8844ad2 100644
--- a/pages/AdminLoket/[id].vue
+++ b/pages/AdminLoket/[id].vue
@@ -56,11 +56,14 @@
             <v-card-text class="pa-4">
               <div class="data-header mb-4">
                 <div class="section-label mb-3">PANGGIL ANTREAN</div>
-              <div v-if="filteredMenungguCount > 0" class="waiting-badge mb-2">
-                <v-icon start size="14">mdi-clock-outline</v-icon>
-                {{ filteredMenungguCount }} Antrean Menunggu
-              </div>
-                
+                <div
+                  v-if="filteredMenungguCount > 0"
+                  class="waiting-badge mb-2"
+                >
+                  <v-icon start size="14">mdi-clock-outline</v-icon>
+                  {{ filteredMenungguCount }} Antrean Menunggu
+                </div>
+
                 <div class="filters">
                   <!-- Search Field -->
                   <v-text-field
@@ -128,12 +131,18 @@
         <v-card class="dialog-card">
           <v-card-title class="dialog-header dialog-header-warning">
             <span class="headline-4">Pilih Klinik Ruang</span>
-            <v-btn icon variant="text" size="small" class="btn-close" @click="closeKlinikRuangDialog">
+            <v-btn
+              icon
+              variant="text"
+              size="small"
+              class="btn-close"
+              @click="closeKlinikRuangDialog"
+            >
               <v-icon>mdi-close</v-icon>
             </v-btn>
           </v-card-title>
 
-          <v-divider/>
+          <v-divider />
 
           <v-card-text class="dialog-content">
             <div v-if="currentProcessingPatient" class="patient-card mb-4">
@@ -142,13 +151,17 @@
                 <v-col cols="6">
                   <div class="detail-item">
                     <span class="caption-2 text-muted">Barcode</span>
-                    <span class="body-2 text-semibold">{{ currentProcessingPatient.barcode }}</span>
+                    <span class="body-2 text-semibold">{{
+                      currentProcessingPatient.barcode
+                    }}</span>
                   </div>
                 </v-col>
                 <v-col cols="6">
                   <div class="detail-item">
                     <span class="caption-2 text-muted">No. Antrian</span>
-                    <span class="body-2 text-semibold">{{ currentProcessingPatient.noAntrian }}</span>
+                    <span class="body-2 text-semibold">{{
+                      currentProcessingPatient.noAntrian
+                    }}</span>
                   </div>
                 </v-col>
               </v-row>
@@ -175,7 +188,9 @@
                     <v-chip size="small" color="warning" class="mr-2">
                       {{ klinikRuang.kodeKlinik }}
                     </v-chip>
-                    <span class="body-2 text-semibold">{{ klinikRuang.namaKlinik }}</span>
+                    <span class="body-2 text-semibold">{{
+                      klinikRuang.namaKlinik
+                    }}</span>
                   </div>
                   <template #actions>
                     <v-chip size="x-small" variant="outlined">
@@ -192,7 +207,9 @@
                       class="ruang-card-item"
                       @click="buatAntreanKlinikRuang(klinikRuang, ruang)"
                     >
-                      <v-icon color="warning" size="24" class="mb-2">mdi-door</v-icon>
+                      <v-icon color="warning" size="24" class="mb-2"
+                        >mdi-door</v-icon
+                      >
                       <div class="ruang-card-name">{{ ruang.namaRuang }}</div>
                     </div>
                   </div>
@@ -222,6 +239,7 @@ import { useMasterStore } from "@/stores/masterStore";
 import { useLoketStore } from "@/stores/loketStore";
 import { useClinicStore } from "@/stores/clinicStore";
 import { useRuangStore } from "@/stores/ruangStore";
+import { useWebSocket } from "@/composables/useWebSocket";
 import PageHeader from "@/components/common/PageHeader.vue";
 import CurrentPatientCard from "@/components/features/queue/CurrentPatientCard.vue";
 import QueueActionsCard from "@/components/features/queue/QueueActionsCard.vue";
@@ -246,7 +264,7 @@ let resetCheckInterval = null;
 const loketId = computed(() => route.params.id);
 const loketName = computed(() => {
   const loket = loketStore.getLoketById(parseInt(loketId.value));
-  return loket ? loket.namaLoket : 'Loket';
+  return loket ? loket.namaLoket : "Loket";
 });
 
 const {
@@ -281,6 +299,51 @@ const {
   processNextQueue,
 } = useQueue("loket", loketId);
 
+// WebSocket Configuration
+const config = useRuntimeConfig();
+const wsBaseUrl =
+  config.public?.wsBaseUrl || "ws://10.10.150.100:8084/api/v1/ws";
+const uniqueSessionSuffix = ref(Math.random().toString(36).substring(7));
+let wsInstance = null;
+const isConnected = ref(false);
+
+const initWebSocket = () => {
+  if (!loketId.value) return null;
+
+  console.log("🔌 WebSocket (Admin): Connecting to", wsBaseUrl);
+
+  wsInstance = useWebSocket({
+    url: wsBaseUrl,
+    clientId: `admin-loket-${loketId.value}-${uniqueSessionSuffix.value}`,
+    onMessage: (data) => {
+      console.log("📨 WebSocket message received (Admin):", data);
+
+      const messageData = data?.data || data;
+
+      // If it's a message that should trigger a refresh for this loket
+      // For Admin, any message usually means we should refresh our list
+      fetchPatientsForCurrentLoket();
+
+      // Also potentially refresh quota
+      fetchQuotaFromAPI();
+    },
+    onOpen: () => {
+      console.log("✅ WebSocket connected (Admin)");
+      isConnected.value = true;
+    },
+    onClose: () => {
+      isConnected.value = false;
+    },
+    onError: () => {
+      isConnected.value = false;
+    },
+    reconnectInterval: 5000,
+    maxReconnectAttempts: 10,
+  });
+
+  return wsInstance;
+};
+
 // PERSISTENCE FIX: Ensure data exists on mount
 onMounted(async () => {
   await nextTick();
@@ -288,23 +351,27 @@ onMounted(async () => {
 
   // 1. Ensure CLINIC data is loaded first (critical for mapping codes like "25" -> "MT")
   // Check if we need to fetch reguler clinics (e.g. if we only have local exec clinics)
-  const hasRegulerClinics = clinicStore.clinics.some(c => c.jenisLayanan === 'Reguler');
+  const hasRegulerClinics = clinicStore.clinics.some(
+    (c) => c.jenisLayanan === "Reguler",
+  );
   if (!hasRegulerClinics) {
-      console.log('AdminLoket: Fetching reguler clinics...');
-      await clinicStore.fetchRegulerClinics();
+    console.log("AdminLoket: Fetching reguler clinics...");
+    await clinicStore.fetchRegulerClinics();
   }
-  
+
   // 2. Ensure LOKET data is loaded next (needs clinic data for mapping)
   // Fix: Don't just check length (which might include local exec data). Check for API data (id < 1000)
-  const hasRegularLokets = loketStore.lokets.some(l => l.id < 1000);
+  const hasRegularLokets = loketStore.lokets.some((l) => l.id < 1000);
   const targetId = parseInt(loketId.value);
   const currentLoketExists = loketStore.getLoketById(targetId);
 
   if (!hasRegularLokets || !currentLoketExists) {
-     console.log('AdminLoket: Fetching lokets (missing regular data or specific loket)...');
-     await loketStore.fetchLoketFromAPI();
+    console.log(
+      "AdminLoket: Fetching lokets (missing regular data or specific loket)...",
+    );
+    await loketStore.fetchLoketFromAPI();
   }
-  
+
   // 3. Fetch fresh room data from API (and de-duplicate)
   await ruangStore.fetchRuangFromAPI();
 
@@ -319,14 +386,23 @@ onMounted(async () => {
   resetCheckInterval = setInterval(() => {
     const didReset = queueStore.checkAndResetDaily();
     if (didReset) {
-      console.log('🕒 [AdminLoket] 2 AM threshold reached. Data reset performed.');
+      console.log(
+        "🕒 [AdminLoket] 2 AM threshold reached. Data reset performed.",
+      );
       fetchPatientsForCurrentLoket(); // Refresh after reset
     }
   }, 60000); // Check every minute
+
+  // 7. Initialize and connect WebSocket
+  wsInstance = initWebSocket();
+  if (wsInstance) {
+    wsInstance.connect();
+  }
 });
 
 onUnmounted(() => {
   if (resetCheckInterval) clearInterval(resetCheckInterval);
+  if (wsInstance) wsInstance.disconnect();
 });
 
 const apiQuota = ref(null);
@@ -334,22 +410,27 @@ const apiQuota = ref(null);
 // Fetch latest quota data specifically for this loket
 const fetchQuotaFromAPI = async () => {
   try {
-    const response = await fetch('http://10.10.150.131:8089/api/v1/klinik/loket');
+    const response = await fetch(
+      "http://10.10.150.131:8089/api/v1/klinik/loket",
+    );
     const data = await response.json();
-    
+
     if (data && data.metadata && data.metadata.code === 200) {
       // Find our specific loket
       const targetId = parseInt(loketId.value);
-      const loketData = data.response.find(l => l.loketid === targetId);
-      
+      const loketData = data.response.find((l) => l.loketid === targetId);
+
       if (loketData) {
         // Update local quota state
         apiQuota.value = loketData.kuota;
-        console.log(`✅ [AdminLoket] API Quota Refreshed for Loket ${targetId}:`, apiQuota.value);
+        console.log(
+          `✅ [AdminLoket] API Quota Refreshed for Loket ${targetId}:`,
+          apiQuota.value,
+        );
       }
     }
   } catch (error) {
-    console.error('Error fetching fresh quota:', error);
+    console.error("Error fetching fresh quota:", error);
   }
 };
 
@@ -357,18 +438,23 @@ const fetchQuotaFromAPI = async () => {
 const fetchPatientsForCurrentLoket = async () => {
   const targetId = parseInt(loketId.value);
   const currentLoket = loketStore.getLoketById(targetId);
-  
+
   // Check if loket is REGULER (not EKSEKUTIF)
-  const isEksekutif = currentLoket?.tipeloket === 'EKSEKUTIF' || 
-                      currentLoket?.tipeLoket === 'EKSEKUTIF' ||
-                      (currentLoket?.namaLoket || '').toUpperCase().includes('EKSEKUTIF');
-  
+  const isEksekutif =
+    currentLoket?.tipeloket === "EKSEKUTIF" ||
+    currentLoket?.tipeLoket === "EKSEKUTIF" ||
+    (currentLoket?.namaLoket || "").toUpperCase().includes("EKSEKUTIF");
+
   if (!isEksekutif) {
     // For REGULER loket, fetch from API
-    console.log(`🔄 [AdminLoket] Fetching patients for REGULER loket ${targetId}...`);
+    console.log(
+      `🔄 [AdminLoket] Fetching patients for REGULER loket ${targetId}...`,
+    );
     await queueStore.fetchPatientsForLoket(targetId);
   } else {
-    console.log(`📋 [AdminLoket] Using seed data for EKSEKUTIF loket ${targetId}`);
+    console.log(
+      `📋 [AdminLoket] Using seed data for EKSEKUTIF loket ${targetId}`,
+    );
   }
 };
 
@@ -378,7 +464,7 @@ const currentDate = ref(
     day: "numeric",
     month: "long",
     year: "numeric",
-  })
+  }),
 );
 
 const selectedStatus = ref("all");
@@ -399,22 +485,29 @@ watch(showKlinikRuangDialog, (newValue) => {
 // Get klinik ruang data from ruangStore
 const klinikRuangList = computed(() => {
   const currentLoket = loketStore.getLoketById(parseInt(loketId.value));
-  const isLoketEksekutif = currentLoket?.tipeloket === 'EKSEKUTIF' || 
-                           currentLoket?.tipeLoket === 'EKSEKUTIF' ||
-                           (currentLoket?.namaLoket || '').toUpperCase().includes('EKSEKUTIF');
-  
-  const targetLayanan = isLoketEksekutif ? 'Eksekutif' : 'Reguler';
-  
+  const isLoketEksekutif =
+    currentLoket?.tipeloket === "EKSEKUTIF" ||
+    currentLoket?.tipeLoket === "EKSEKUTIF" ||
+    (currentLoket?.namaLoket || "").toUpperCase().includes("EKSEKUTIF");
+
+  const targetLayanan = isLoketEksekutif ? "Eksekutif" : "Reguler";
+
   // Filter rooms by service type to match Loket's service level
-  return (ruangStore.ruangData || []).filter(k => k.jenisLayanan === targetLayanan);
+  return (ruangStore.ruangData || []).filter(
+    (k) => k.jenisLayanan === targetLayanan,
+  );
 });
 
 const filteredKlinikRuang = computed(() => {
   if (!klinikRuangSearch.value) return klinikRuangList.value;
   return klinikRuangList.value.filter(
     (k) =>
-      k.namaKlinik.toLowerCase().includes(klinikRuangSearch.value.toLowerCase()) ||
-      k.kodeKlinik.toLowerCase().includes(klinikRuangSearch.value.toLowerCase())
+      k.namaKlinik
+        .toLowerCase()
+        .includes(klinikRuangSearch.value.toLowerCase()) ||
+      k.kodeKlinik
+        .toLowerCase()
+        .includes(klinikRuangSearch.value.toLowerCase()),
   );
 });
 
@@ -438,39 +531,46 @@ const allPatientsForStage = computed(() => {
   const currentPatientNo = currentProcessingPatient.value?.no;
   const targetLoketId = loketId.value;
   const currentLoket = loketStore.getLoketById(parseInt(targetLoketId));
-  
+
   // Check if loket is EKSEKUTIF or REGULER
-  const isLoketEksekutif = currentLoket?.tipeloket === 'EKSEKUTIF' || 
-                           currentLoket?.tipeLoket === 'EKSEKUTIF' ||
-                           (currentLoket?.namaLoket || '').toUpperCase().includes('EKSEKUTIF');
-  
+  const isLoketEksekutif =
+    currentLoket?.tipeloket === "EKSEKUTIF" ||
+    currentLoket?.tipeLoket === "EKSEKUTIF" ||
+    (currentLoket?.namaLoket || "").toUpperCase().includes("EKSEKUTIF");
+
   let basePatients = [];
-  
+
   if (isLoketEksekutif) {
     // For EKSEKUTIF loket, use seed data (filter from allPatients)
     // IMPORTANT: Do NOT include menungguPatients - they are only called via QueueActionsCard
-    basePatients = diLoketPatients.value.concat(anjunganPatients.value, terlambatPatients.value, pendingPatients.value);
+    basePatients = diLoketPatients.value.concat(
+      anjunganPatients.value,
+      terlambatPatients.value,
+      pendingPatients.value,
+    );
   } else {
     // For REGULER loket, use API data from allPatients (which is reactive)
     // Filter patients that belong to this loket and are from API or Onsite
-    const targetPatients = queueStore.allPatients.filter(p => 
-      (p.registrationType === 'api' || p.registrationType === 'onsite') && 
-      p.processStage === 'loket' &&
-      String(p.loketId) === String(targetLoketId)
+    const targetPatients = queueStore.allPatients.filter(
+      (p) =>
+        (p.registrationType === "api" || p.registrationType === "onsite") &&
+        p.processStage === "loket" &&
+        String(p.loketId) === String(targetLoketId),
     );
     basePatients = targetPatients;
   }
-  
+
   // Helper to check if patient belongs to this loket (for seed data only)
   const isPatientForThisLoket = (p) => {
     // Only check for EKSEKUTIF patients (seed data)
-    const isPatientEksekutif = (p.pembayaran || '').toUpperCase().includes('EKSEKUTIF') || 
-                                (p.pembayaran || '').toUpperCase().includes('VIP');
+    const isPatientEksekutif =
+      (p.pembayaran || "").toUpperCase().includes("EKSEKUTIF") ||
+      (p.pembayaran || "").toUpperCase().includes("VIP");
 
     if (isLoketEksekutif) {
       // Loket Eksekutif HANYA melayani pasien Eksekutif
       if (!isPatientEksekutif) return false;
-      
+
       // For EKSEKUTIF loket: accept all EKSEKUTIF patients
       // EKSEKUTIF lokets typically serve ALL clinics for executive patients
       // So we don't need to check kodeKlinik matching
@@ -478,7 +578,7 @@ const allPatientsForStage = computed(() => {
       if (p.loketId) {
         return String(p.loketId) === String(targetLoketId);
       }
-      
+
       // If no loketId assigned, accept all EKSEKUTIF patients
       return true;
     } else {
@@ -491,30 +591,32 @@ const allPatientsForStage = computed(() => {
     if (p.loketId) {
       return String(p.loketId) === String(targetLoketId);
     }
-    
+
     // Priority 2: Service (kodeKlinik) match
     const allowedServices = currentLoket?.pelayanan || [];
     if (p.kodeKlinik) {
       return allowedServices.includes(p.kodeKlinik);
     }
-    
+
     // Priority 3: Fallback for seed/legacy data (Match by clinic name)
     if (p.klinik && currentLoket) {
       const normalizedKlinik = p.klinik.trim().toUpperCase();
       // Check if any allowed service matches this clinic name in _spesialisDetail
-      const matchByDetail = (currentLoket._spesialisDetail || []).some(s => 
-        s.namaklinik && s.namaklinik.trim().toUpperCase() === normalizedKlinik
+      const matchByDetail = (currentLoket._spesialisDetail || []).some(
+        (s) =>
+          s.namaklinik &&
+          s.namaklinik.trim().toUpperCase() === normalizedKlinik,
       );
       if (matchByDetail) return true;
     }
-    
+
     return false;
   };
-  
+
   // If using seed data (EKSEKUTIF), filter by loket
   // If using API data (REGULER), basePatients already contains only relevant patients
   let combined = [];
-  
+
   if (isLoketEksekutif) {
     // Filter seed data by loket assignment
     const diLoket = (diLoketPatients.value || [])
@@ -523,21 +625,21 @@ const allPatientsForStage = computed(() => {
         ...p,
         status: p.no === currentPatientNo ? "diproses" : "di-loket",
       }));
-    
+
     const terlambat = (terlambatPatients.value || [])
       .filter(isPatientForThisLoket)
       .map((p) => ({
         ...p,
         status: "terlambat",
       }));
-    
+
     const pending = (pendingPatients.value || [])
       .filter(isPatientForThisLoket)
       .map((p) => ({
         ...p,
         status: "pending",
       }));
-    
+
     const anjungan = (anjunganPatients.value || [])
       .filter(isPatientForThisLoket)
       .map((p) => ({
@@ -550,50 +652,55 @@ const allPatientsForStage = computed(() => {
     // Use API data, but EXCLUDE patients with status "menunggu"
     // They should only be called via QueueActionsCard, not displayed in table
     combined = basePatients
-      .filter(p => p.status !== 'menunggu')  // IMPORTANT: Filter out menunggu
+      .filter((p) => p.status !== "menunggu") // IMPORTANT: Filter out menunggu
       .map((p) => ({
         ...p,
-        status: p.no === currentPatientNo ? "diproses" : (p.status || "menunggu"),
+        status: p.no === currentPatientNo ? "diproses" : p.status || "menunggu",
       }));
   }
-  
+
   return combined;
 });
 
 // Computed status counts based on filtered allPatientsForStage
 // These counts are ONLY for patients that belong to this specific loket
 const filteredAnjunganCount = computed(() => {
-  return allPatientsForStage.value.filter(p => p.status === 'anjungan').length;
+  return allPatientsForStage.value.filter((p) => p.status === "anjungan")
+    .length;
 });
 
 const filteredDiLoketCount = computed(() => {
-  return allPatientsForStage.value.filter(p => p.status === 'di-loket').length;
+  return allPatientsForStage.value.filter((p) => p.status === "di-loket")
+    .length;
 });
 
 const filteredTerlambatCount = computed(() => {
-  return allPatientsForStage.value.filter(p => p.status === 'terlambat').length;
+  return allPatientsForStage.value.filter((p) => p.status === "terlambat")
+    .length;
 });
 
 const filteredPendingCount = computed(() => {
-  return allPatientsForStage.value.filter(p => p.status === 'pending').length;
+  return allPatientsForStage.value.filter((p) => p.status === "pending").length;
 });
 
 // Menunggu count from API or seed data based on loket type
 const filteredMenungguCount = computed(() => {
   const targetLoketId = loketId.value;
   const currentLoket = loketStore.getLoketById(parseInt(targetLoketId));
-  
-  const isLoketEksekutif = currentLoket?.tipeloket === 'EKSEKUTIF' || 
-                           currentLoket?.tipeLoket === 'EKSEKUTIF' ||
-                           (currentLoket?.namaLoket || '').toUpperCase().includes('EKSEKUTIF');
-  
+
+  const isLoketEksekutif =
+    currentLoket?.tipeloket === "EKSEKUTIF" ||
+    currentLoket?.tipeLoket === "EKSEKUTIF" ||
+    (currentLoket?.namaLoket || "").toUpperCase().includes("EKSEKUTIF");
+
   if (isLoketEksekutif) {
     // For EKSEKUTIF, use seed data menunggu count (filtered by loket)
-    return menungguPatients.value.filter(p => {
-      const isPatientEksekutif = (p.pembayaran || '').toUpperCase().includes('EKSEKUTIF') || 
-                                  (p.pembayaran || '').toUpperCase().includes('VIP');
+    return menungguPatients.value.filter((p) => {
+      const isPatientEksekutif =
+        (p.pembayaran || "").toUpperCase().includes("EKSEKUTIF") ||
+        (p.pembayaran || "").toUpperCase().includes("VIP");
       if (!isPatientEksekutif) return false;
-      
+
       // Accept all EKSEKUTIF patients if no explicit loketId
       if (p.loketId) {
         return String(p.loketId) === String(targetLoketId);
@@ -602,12 +709,13 @@ const filteredMenungguCount = computed(() => {
     }).length;
   } else {
     // For REGULER, count from allPatients (reactive)
-    const targetPatients = queueStore.allPatients.filter(p =>
-      (p.registrationType === 'api' || p.registrationType === 'onsite') &&
-      p.processStage === 'loket' &&
-      String(p.loketId) === String(targetLoketId)
+    const targetPatients = queueStore.allPatients.filter(
+      (p) =>
+        (p.registrationType === "api" || p.registrationType === "onsite") &&
+        p.processStage === "loket" &&
+        String(p.loketId) === String(targetLoketId),
     );
-    return targetPatients.filter(p => p.status === 'menunggu').length;
+    return targetPatients.filter((p) => p.status === "menunggu").length;
   }
 });
 
@@ -618,16 +726,18 @@ const anjunganCount = computed(() => {
 const nextQueueInfo = computed(() => {
   const currentPatientNo = currentProcessingPatient.value?.no;
   const targetLoketId = parseInt(loketId.value);
-  
+
   // Filter diLoketPatients to only show patients for THIS loket
-  const loketFilteredPatients = (diLoketPatients.value || []).filter(p => {
+  const loketFilteredPatients = (diLoketPatients.value || []).filter((p) => {
     // Only show patients assigned to this specific loket
     return p.loketId && String(p.loketId) === String(targetLoketId);
   });
-  
+
   // Find next patient (excluding current processing patient)
-  const nextPatient = loketFilteredPatients.find(p => p.no !== currentPatientNo) || loketFilteredPatients[0];
-  
+  const nextPatient =
+    loketFilteredPatients.find((p) => p.no !== currentPatientNo) ||
+    loketFilteredPatients[0];
+
   if (nextPatient) {
     return `Antrian berikutnya: ${nextPatient.noAntrian.split(" |")[0]}`;
   }
@@ -660,19 +770,19 @@ const handleProcessNext = () => {
 
 const handleCallPatient = () => {
   if (currentProcessingPatient.value) {
-    const result = queueStore.callProcessingPatient('loket', loketId.value);
+    const result = queueStore.callProcessingPatient("loket", loketId.value);
     if (result.success) {
       snackbarText.value = result.message;
       snackbarColor.value = "success";
       snackbar.value = true;
-      
+
       // BROADCAST CALL EVENT
       if (broadcastChannel) {
         broadcastChannel.postMessage({
-          type: 'CALL_PATIENT',
+          type: "CALL_PATIENT",
           patient: JSON.parse(JSON.stringify(currentProcessingPatient.value)),
           loketId: loketId.value,
-          loketName: loketName.value
+          loketName: loketName.value,
         });
       }
     } else {
@@ -691,7 +801,7 @@ const openKlinikRuangDialog = () => {
 const stickyTopOffset = ref(100);
 
 const updateStickyOffset = () => {
-  const header = document.querySelector('.page-header');
+  const header = document.querySelector(".page-header");
   if (header) {
     const headerHeight = header.offsetHeight;
     const containerPadding = 16;
@@ -701,11 +811,11 @@ const updateStickyOffset = () => {
 
 onMounted(() => {
   updateStickyOffset();
-  window.addEventListener('resize', updateStickyOffset);
+  window.addEventListener("resize", updateStickyOffset);
   setTimeout(updateStickyOffset, 100);
-  
+
   // Initialize Broadcast Channel
-  broadcastChannel = new BroadcastChannel('antrian-loket-channel');
+  broadcastChannel = new BroadcastChannel("antrian-loket-channel");
 
   // Ensure initial data is loaded if store is empty (after hydration)
   setTimeout(() => {
@@ -714,7 +824,7 @@ onMounted(() => {
 });
 
 onUnmounted(() => {
-  window.removeEventListener('resize', updateStickyOffset);
+  window.removeEventListener("resize", updateStickyOffset);
   if (broadcastChannel) {
     broadcastChannel.close();
   }
@@ -729,29 +839,30 @@ const buatAntreanKlinikRuang = async (klinikRuang, ruang) => {
   let patient = currentProcessingPatient.value;
   // ... (keeping existing logic to find patient)
   if (!patient) {
-     // ... fallback logic as in original file
-     // simplified for brevity in this manual copy, but we should keep original robustness
-      try {
-        const processingPatient = queueStore.currentProcessingPatient?.loket;
-        if (processingPatient) {
-          let allPatients = [];
-          if (queueStore.allPatients) {
-            allPatients = Array.isArray(queueStore.allPatients) 
-              ? queueStore.allPatients 
-              : (queueStore.allPatients.value || []);
-          }
-          const latestPatient = allPatients.find(
-            p => (p && p.no === processingPatient.no) || 
-                 (p && p.barcode && p.barcode === processingPatient.barcode) ||
-                 (p && p.noAntrian && p.noAntrian === processingPatient.noAntrian)
-          );
-          patient = latestPatient || processingPatient;
+    // ... fallback logic as in original file
+    // simplified for brevity in this manual copy, but we should keep original robustness
+    try {
+      const processingPatient = queueStore.currentProcessingPatient?.loket;
+      if (processingPatient) {
+        let allPatients = [];
+        if (queueStore.allPatients) {
+          allPatients = Array.isArray(queueStore.allPatients)
+            ? queueStore.allPatients
+            : queueStore.allPatients.value || [];
         }
-      } catch (error) {
-        console.error('Error getting patient from store:', error);
+        const latestPatient = allPatients.find(
+          (p) =>
+            (p && p.no === processingPatient.no) ||
+            (p && p.barcode && p.barcode === processingPatient.barcode) ||
+            (p && p.noAntrian && p.noAntrian === processingPatient.noAntrian),
+        );
+        patient = latestPatient || processingPatient;
       }
+    } catch (error) {
+      console.error("Error getting patient from store:", error);
+    }
   }
-  
+
   if (!patient) {
     snackbarText.value = "Tidak ada pasien yang sedang diproses";
     snackbarColor.value = "error";
@@ -759,74 +870,98 @@ const buatAntreanKlinikRuang = async (klinikRuang, ruang) => {
     closeKlinikRuangDialog();
     return;
   }
-  
+
   // POST to external visit ticket API FIRST to get ticket number
   let apiTicketNumber = null;
   let apiCallSuccess = false;
-  
+
   try {
     // Map payment type: BPJS/JKN -> 2, UMUM/others -> 1
-    const paymentTypeId = (patient.pembayaran || '').toUpperCase().includes('BPJS') || 
-                          (patient.pembayaran || '').toUpperCase().includes('JKN') 
-                          ? 2 : 1;
-    
+    const paymentTypeId =
+      (patient.pembayaran || "").toUpperCase().includes("BPJS") ||
+      (patient.pembayaran || "").toUpperCase().includes("JKN")
+        ? 2
+        : 1;
+
     // Map service type: Reguler -> 1, Eksekutif/Grand Pav -> 2
-    const serviceTypeId = (patient.pembayaran || '').toUpperCase().includes('EKSEKUTIF') ||
-                          (patient.pembayaran || '').toUpperCase().includes('VIP') ||
-                          (patient.pembayaran || '').toUpperCase().includes('GRAND')
-                          ? 2 : 1;
-    
+    const serviceTypeId =
+      (patient.pembayaran || "").toUpperCase().includes("EKSEKUTIF") ||
+      (patient.pembayaran || "").toUpperCase().includes("VIP") ||
+      (patient.pembayaran || "").toUpperCase().includes("GRAND")
+        ? 2
+        : 1;
+
     // Ensure healthcare_service_id is a number - MUST use actual clinic ID from clinicStore
-    const actualClinic = clinicStore.clinics.find(c => c.kode === klinikRuang.kodeKlinik);
+    const actualClinic = clinicStore.clinics.find(
+      (c) => c.kode === klinikRuang.kodeKlinik,
+    );
     const healthcareServiceId = actualClinic ? Number(actualClinic.id) : null;
-    
+
     // Get idruangan from ruang object, ensure it's a number or null
-    console.log('🔍 Debug ruang object:', ruang);
-    console.log('🔍 ruang.kodeRuang:', ruang.kodeRuang);
-    console.log('🔍 ruang.idruangan:', ruang.idruangan);
-    
+    console.log("🔍 Debug ruang object:", ruang);
+    console.log("🔍 ruang.kodeRuang:", ruang.kodeRuang);
+    console.log("🔍 ruang.idruangan:", ruang.idruangan);
+
     let subHealthcareServiceId = null;
     if (ruang.kodeRuang) {
       const parsed = Number(ruang.kodeRuang);
-      
+
       // CRITICAL FIX: Check if kodeRuang is actually the clinic ID (fallback value)
       // This happens when clinic doesn't have actual sub_healthcare rooms
       if (!isNaN(parsed) && parsed === healthcareServiceId) {
         // kodeRuang equals clinic ID = no sub_healthcare, set to null
         subHealthcareServiceId = null;
-        console.log('🔍 kodeRuang equals clinic ID (fallback) -> subHealthcareServiceId: null');
+        console.log(
+          "🔍 kodeRuang equals clinic ID (fallback) -> subHealthcareServiceId: null",
+        );
       } else {
         subHealthcareServiceId = isNaN(parsed) ? null : parsed;
-        console.log('🔍 Parsed kodeRuang:', ruang.kodeRuang, '-> subHealthcareServiceId:', subHealthcareServiceId);
+        console.log(
+          "🔍 Parsed kodeRuang:",
+          ruang.kodeRuang,
+          "-> subHealthcareServiceId:",
+          subHealthcareServiceId,
+        );
       }
     } else if (ruang.idruangan) {
       const parsed = Number(ruang.idruangan);
-      
+
       // Same check for idruangan
       if (!isNaN(parsed) && parsed === healthcareServiceId) {
         subHealthcareServiceId = null;
-        console.log('🔍 idruangan equals clinic ID (fallback) -> subHealthcareServiceId: null');
+        console.log(
+          "🔍 idruangan equals clinic ID (fallback) -> subHealthcareServiceId: null",
+        );
       } else {
         subHealthcareServiceId = isNaN(parsed) ? null : parsed;
-        console.log('🔍 Parsed idruangan:', ruang.idruangan, '-> subHealthcareServiceId:', subHealthcareServiceId);
+        console.log(
+          "🔍 Parsed idruangan:",
+          ruang.idruangan,
+          "-> subHealthcareServiceId:",
+          subHealthcareServiceId,
+        );
       }
     }
-    
-    console.log('🔍 Clinic Info:');
-    console.log('  - klinikRuang.kodeKlinik:', klinikRuang.kodeKlinik);
-    console.log('  - actualClinic:', actualClinic);
-    console.log('  - healthcareServiceId:', healthcareServiceId);
-    console.log('  - subHealthcareServiceId:', subHealthcareServiceId);
-    
+
+    console.log("🔍 Clinic Info:");
+    console.log("  - klinikRuang.kodeKlinik:", klinikRuang.kodeKlinik);
+    console.log("  - actualClinic:", actualClinic);
+    console.log("  - healthcareServiceId:", healthcareServiceId);
+    console.log("  - subHealthcareServiceId:", subHealthcareServiceId);
+
     if (!healthcareServiceId) {
-      console.error('❌ Could not find clinic ID for kode:', klinikRuang.kodeKlinik);
-      snackbarText.value = "Gagal membuat antrean ruang: ID klinik tidak ditemukan";
+      console.error(
+        "❌ Could not find clinic ID for kode:",
+        klinikRuang.kodeKlinik,
+      );
+      snackbarText.value =
+        "Gagal membuat antrean ruang: ID klinik tidak ditemukan";
       snackbarColor.value = "error";
       snackbar.value = true;
       closeKlinikRuangDialog();
       return;
     }
-    
+
     const visitTicketBody = {
       visit_code: Number(patient.barcode),
       healthcare_service_id: healthcareServiceId,
@@ -835,31 +970,38 @@ const buatAntreanKlinikRuang = async (klinikRuang, ruang) => {
       visit_status_id: [14, 15],
       visit_type_id: 1,
       service_type_id: serviceTypeId,
-      healthcare_type_id: 2
-    }
-    
-    console.log('📤 Sending visit ticket to API:', visitTicketBody);
-    
-    const visitResponse = await fetch('http://10.10.150.100:8084/api/v1/visit/ticket/klinik', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json'
+      healthcare_type_id: 2,
+    };
+
+    console.log("📤 Sending visit ticket to API:", visitTicketBody);
+
+    const visitResponse = await fetch(
+      "http://10.10.150.100:8084/api/v1/visit/ticket/klinik",
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(visitTicketBody),
       },
-      body: JSON.stringify(visitTicketBody)
-    });
-    
+    );
+
     if (visitResponse.ok) {
       const visitResult = await visitResponse.json();
-      console.log('✅ Visit ticket created successfully:', visitResult);
-      
+      console.log("✅ Visit ticket created successfully:", visitResult);
+
       // Extract ticket number from API response
-      if (visitResult.healthcare_service && visitResult.healthcare_service.ticket) {
+      if (
+        visitResult.healthcare_service &&
+        visitResult.healthcare_service.ticket
+      ) {
         apiTicketNumber = visitResult.healthcare_service.ticket;
         apiCallSuccess = true;
-        console.log('🎫 Using API ticket number:', apiTicketNumber);
+        console.log("🎫 Using API ticket number:", apiTicketNumber);
       } else {
-        console.error('❌ API response missing ticket number');
-        snackbarText.value = "Gagal membuat antrean ruang: Nomor tiket tidak ditemukan di response API";
+        console.error("❌ API response missing ticket number");
+        snackbarText.value =
+          "Gagal membuat antrean ruang: Nomor tiket tidak ditemukan di response API";
         snackbarColor.value = "error";
         snackbar.value = true;
         closeKlinikRuangDialog();
@@ -870,10 +1012,13 @@ const buatAntreanKlinikRuang = async (klinikRuang, ruang) => {
       let errorMessage = "Gagal membuat antrean ruang";
       try {
         const errorData = await visitResponse.json();
-        console.error('⚠️ Visit ticket API error:', errorData);
-        
+        console.error("⚠️ Visit ticket API error:", errorData);
+
         // Check if it's a duplicate ticket error
-        if (errorData.message && errorData.message.toLowerCase().includes('already exists')) {
+        if (
+          errorData.message &&
+          errorData.message.toLowerCase().includes("already exists")
+        ) {
           errorMessage = `Tiket klinik ruang sudah ada untuk pasien ini. ${errorData.message}`;
         } else if (errorData.message) {
           errorMessage = `Gagal membuat antrean ruang: ${errorData.message}`;
@@ -882,10 +1027,14 @@ const buatAntreanKlinikRuang = async (klinikRuang, ruang) => {
         }
       } catch (parseError) {
         const errorText = await visitResponse.text();
-        console.error('⚠️ Visit ticket API returned error:', visitResponse.status, errorText);
+        console.error(
+          "⚠️ Visit ticket API returned error:",
+          visitResponse.status,
+          errorText,
+        );
         errorMessage = `Gagal membuat antrean ruang (Status: ${visitResponse.status})`;
       }
-      
+
       snackbarText.value = errorMessage;
       snackbarColor.value = "error";
       snackbar.value = true;
@@ -893,45 +1042,50 @@ const buatAntreanKlinikRuang = async (klinikRuang, ruang) => {
       return;
     }
   } catch (apiError) {
-    console.error('❌ Error sending visit ticket to API:', apiError);
-    snackbarText.value = "Gagal membuat antrean ruang: Kesalahan koneksi ke API";
+    console.error("❌ Error sending visit ticket to API:", apiError);
+    snackbarText.value =
+      "Gagal membuat antrean ruang: Kesalahan koneksi ke API";
     snackbarColor.value = "error";
     snackbar.value = true;
     closeKlinikRuangDialog();
     return;
   }
-  
+
   // Only create room queue if API call was successful
   if (!apiCallSuccess || !apiTicketNumber) {
-    console.error('❌ Cannot create room queue without API ticket number');
+    console.error("❌ Cannot create room queue without API ticket number");
     return;
   }
-  
+
   // Create room queue with API ticket number
   const result = queueStore.createAntreanKlinikRuang(
     klinikRuang,
     ruang,
     patient,
     "loket",
-    apiTicketNumber // Pass API ticket number
+    apiTicketNumber, // Pass API ticket number
   );
-  
+
   if (result.success && result.patient) {
     // CRITICAL: Update source patient status to "processed" after klinik ruang creation
     // This prevents duplicate patients with different statuses in Admin Klinik Ruang
-    const sourcePatientIndex = queueStore.allPatients.findIndex(p => p.no === patient.no);
+    const sourcePatientIndex = queueStore.allPatients.findIndex(
+      (p) => p.no === patient.no,
+    );
     if (sourcePatientIndex !== -1) {
       queueStore.allPatients[sourcePatientIndex] = {
         ...queueStore.allPatients[sourcePatientIndex],
-        status: "processed"
+        status: "processed",
       };
-      console.log(`✅ Updated source patient ${patient.noAntrian} status to "processed"`);
+      console.log(
+        `✅ Updated source patient ${patient.noAntrian} status to "processed"`,
+      );
     }
-    
+
     try {
       await printTicketFromPatient(result.patient);
     } catch (error) {
-      console.error('Error printing ticket:', error);
+      console.error("Error printing ticket:", error);
       snackbarText.value = `${result.message}. Gagal print tiket.`;
       snackbarColor.value = "warning";
       snackbar.value = true;
@@ -940,11 +1094,10 @@ const buatAntreanKlinikRuang = async (klinikRuang, ruang) => {
     }
   }
 
-  
   snackbarText.value = result.message;
   snackbarColor.value = result.success ? "success" : "error";
   snackbar.value = true;
-  
+
   closeKlinikRuangDialog();
 };
 </script>
@@ -1060,11 +1213,20 @@ const buatAntreanKlinikRuang = async (klinikRuang, ruang) => {
 
 /* Dialog Klinik Ruang Styles */
 .dialog-card {
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-family:
+    "Inter",
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    sans-serif;
 }
 
 .dialog-header {
-  background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-700) 100%);
+  background: linear-gradient(
+    135deg,
+    var(--color-primary-600) 0%,
+    var(--color-primary-700) 100%
+  );
   color: var(--color-neutral-100);
   padding: 20px 24px;
   display: flex;
@@ -1073,7 +1235,11 @@ const buatAntreanKlinikRuang = async (klinikRuang, ruang) => {
 }
 
 .dialog-header-warning {
-  background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-700) 100%);
+  background: linear-gradient(
+    135deg,
+    var(--color-primary-600) 0%,
+    var(--color-primary-700) 100%
+  );
 }
 
 .headline-4 {
@@ -1081,7 +1247,12 @@ const buatAntreanKlinikRuang = async (klinikRuang, ruang) => {
   line-height: 28px;
   font-weight: 600;
   margin: 0;
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-family:
+    "Inter",
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    sans-serif;
 }
 
 .headline-5 {
@@ -1090,7 +1261,12 @@ const buatAntreanKlinikRuang = async (klinikRuang, ruang) => {
   font-weight: 600;
   margin: 0;
   color: var(--color-neutral-900);
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-family:
+    "Inter",
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    sans-serif;
 }
 
 .btn-close {
@@ -1118,7 +1294,12 @@ const buatAntreanKlinikRuang = async (klinikRuang, ruang) => {
   font-weight: 600;
   font-size: 16px;
   line-height: 24px;
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-family:
+    "Inter",
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    sans-serif;
   min-width: 100px;
 }
 
diff --git a/pages/Anjungan/Anjungan/[id].vue b/pages/Anjungan/Anjungan/[id].vue
index e42f382..5cba8f3 100644
--- a/pages/Anjungan/Anjungan/[id].vue
+++ b/pages/Anjungan/Anjungan/[id].vue
@@ -8,7 +8,7 @@
           class="header-logo"
           width="40"
           height="40"
-          style="width: 40px; height: 40px; object-fit: contain;"
+          style="width: 40px; height: 40px; object-fit: contain"
         />
       </div>
       <div class="header-content">
@@ -91,565 +91,606 @@
         </p>
       </div>
 
-    <v-dialog
-      v-model="showVisitTypeDialog"
-      max-width="900"
-      @click:outside="showVisitTypeDialog = false"
-    >
-      <v-card class="dialog-card">
-        <v-card-title class="dialog-header">
-          <v-icon size="20" class="mr-2">mdi-check-circle</v-icon>
-          Konfirmasi Pilihan
-          <v-btn
-            icon
-            class="dialog-close-btn"
-            size="small"
-            @click="showVisitTypeDialog = false"
-          >
-            <v-icon size="20" color="white">mdi-close</v-icon>
-          </v-btn>
-        </v-card-title>
+      <v-dialog
+        v-model="showVisitTypeDialog"
+        max-width="900"
+        @click:outside="showVisitTypeDialog = false"
+      >
+        <v-card class="dialog-card">
+          <v-card-title class="dialog-header">
+            <v-icon size="20" class="mr-2">mdi-check-circle</v-icon>
+            Konfirmasi Pilihan
+            <v-btn
+              icon
+              class="dialog-close-btn"
+              size="small"
+              @click="showVisitTypeDialog = false"
+            >
+              <v-icon size="20" color="white">mdi-close</v-icon>
+            </v-btn>
+          </v-card-title>
 
-        <v-card-text class="pa-6" v-if="selectedClinic">
-          <div class="dialog-content">
-            <div class="dialog-icon mb-3">
-              <v-icon
-                :icon="selectedClinic.icon"
-                size="32"
-                color="primary-600"
-              ></v-icon>
-            </div>
-            <h3 class="dialog-clinic-name">{{ selectedClinic.name }}</h3>
-            <p v-if="selectedClinic.subtitle" class="dialog-subtitle">
-              {{ selectedClinic.subtitle }}
-            </p>
-
-            <v-divider class="my-4"></v-divider>
-
-            <div class="dialog-info">
-              <!-- Section Kuota -->
-              <div class="quota-section mb-6">
-                <p>
-                  <strong
-                    >Kuota Hari Ini (Shift
-                    {{ getCurrentShiftNumber() }}):</strong
-                  >
-                </p>
-                <div
-                  class="current-quota-display"
-                  :class="{ 'quota-empty': getCurrentShiftQuota() === 0 }"
-                >
-                  <span class="quota-large-number">{{
-                    getCurrentShiftQuota()
-                  }}</span>
-                  <span class="quota-label">pasien tersedia</span>
-                </div>
+          <v-card-text class="pa-6" v-if="selectedClinic">
+            <div class="dialog-content">
+              <div class="dialog-icon mb-3">
+                <v-icon
+                  :icon="selectedClinic.icon"
+                  size="32"
+                  color="primary-600"
+                ></v-icon>
               </div>
+              <h3 class="dialog-clinic-name">{{ selectedClinic.name }}</h3>
+              <p v-if="selectedClinic.subtitle" class="dialog-subtitle">
+                {{ selectedClinic.subtitle }}
+              </p>
 
-              <v-divider class="mb-6"></v-divider>
+              <v-divider class="my-4"></v-divider>
 
-              <!-- 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"
+              <div class="dialog-info">
+                <!-- Section Kuota -->
+                <div class="quota-section mb-6">
+                  <p>
+                    <strong
+                      >Kuota Hari Ini (Shift
+                      {{ getCurrentShiftNumber() }}):</strong
                     >
-                      <v-icon
-                        v-if="selectedDoctor === doctor"
-                        size="16"
-                        color="success-600"
-                        class="doctor-icon"
-                      >
-                        mdi-check-circle
-                      </v-icon>
-                      <v-icon
-                        v-else
-                        size="16"
-                        color="neutral-600"
-                        class="doctor-icon"
-                      >
-                        mdi-circle-outline
-                      </v-icon>
-                      <span class="doctor-name">{{ doctor }}</span>
-                    </v-btn>
+                  </p>
+                  <div
+                    class="current-quota-display"
+                    :class="{ 'quota-empty': getCurrentShiftQuota() === 0 }"
+                  >
+                    <span class="quota-large-number">{{
+                      getCurrentShiftQuota()
+                    }}</span>
+                    <span class="quota-label">pasien tersedia</span>
                   </div>
-                  <p v-if="dialogDoctors.length === 0" class="text-error text-caption mt-2">
+                </div>
+
+                <v-divider class="mb-6"></v-divider>
+
+                <!-- 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="16"
+                          color="success-600"
+                          class="doctor-icon"
+                        >
+                          mdi-check-circle
+                        </v-icon>
+                        <v-icon
+                          v-else
+                          size="16"
+                          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-2"><strong>Dokter yang Tersedia:</strong></p>
+                  <div
+                    v-if="dialogDoctors.length > 0"
+                    class="doctor-info-unified"
+                  >
+                    <div
+                      v-for="(doctor, index) in dialogDoctors"
+                      :key="index"
+                      class="doctor-info-unit"
+                    >
+                      <v-icon size="16" color="primary-600" class="mr-2 mt-1">
+                        mdi-doctor
+                      </v-icon>
+                      <span class="doctor-info-name-unified">{{ doctor }}</span>
+                    </div>
+                  </div>
+                  <p v-else class="text-error text-caption italic">
                     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-2"><strong>Dokter yang Tersedia:</strong></p>
-                <div v-if="dialogDoctors.length > 0" class="doctor-info-unified">
-                  <div 
-                    v-for="(doctor, index) in dialogDoctors" 
-                    :key="index"
-                    class="doctor-info-unit"
-                  >
-                    <v-icon size="16" color="primary-600" class="mr-2 mt-1">
-                      mdi-doctor
-                    </v-icon>
-                    <span class="doctor-info-name-unified">{{ doctor }}</span>
-                  </div>
-                </div>
-                <p v-else class="text-error text-caption italic">
-                  Tidak ada dokter tersedia untuk klinik ini
-                </p>
+                <p><strong>Jadwal:</strong> {{ selectedClinic.schedule }}</p>
               </div>
-
-              <p><strong>Jadwal:</strong> {{ selectedClinic.schedule }}</p>
             </div>
-          </div>
-        </v-card-text>
+          </v-card-text>
 
-        <v-divider />
+          <v-divider />
 
-        <v-card-text class="pa-4">
-          <!-- For Eksekutif: Show DAFTAR SEKARANG button -->
-          <div v-if="isEksekutif">
-            <v-row dense>
+          <v-card-text class="pa-4">
+            <!-- For Eksekutif: Show DAFTAR SEKARANG button -->
+            <div v-if="isEksekutif">
+              <v-row dense>
+                <v-col cols="12">
+                  <v-btn
+                    color="success-600"
+                    class="text-white"
+                    size="large"
+                    block
+                    @click="registerPatientDirectly('Eksekutif')"
+                    :disabled="isShift1Full(selectedClinic) || !selectedDoctor"
+                    :class="{
+                      'btn-disabled':
+                        isShift1Full(selectedClinic) || !selectedDoctor,
+                    }"
+                  >
+                    DAFTAR SEKARANG
+                  </v-btn>
+                  <p v-if="isShift1Full(selectedClinic)" class="disabled-hint">
+                    Kuota hari ini habis
+                  </p>
+                  <p v-else-if="!selectedDoctor" class="disabled-hint">
+                    Pilih dokter terlebih dahulu
+                  </p>
+                </v-col>
+              </v-row>
+            </div>
+
+            <!-- For Non-Eksekutif: Show payment type buttons and action buttons -->
+            <div v-else>
+              <!-- Row 1: BPJS and UMUM -->
+              <v-row dense>
+                <v-col cols="6">
+                  <v-btn
+                    color="success-600"
+                    class="text-white payment-type-btn"
+                    size="large"
+                    block
+                    @click="registerPatientDirectly('BPJS')"
+                    :disabled="isShift1Full(selectedClinic)"
+                    :class="{ 'btn-disabled': isShift1Full(selectedClinic) }"
+                  >
+                    BPJS
+                  </v-btn>
+                </v-col>
+                <v-col cols="6">
+                  <v-btn
+                    color="secondary-600"
+                    class="text-white payment-type-btn"
+                    size="large"
+                    block
+                    @click="registerPatientDirectly('UMUM')"
+                    :disabled="isShift1Full(selectedClinic)"
+                    :class="{ 'btn-disabled': isShift1Full(selectedClinic) }"
+                  >
+                    UMUM / JKMM / SPM / DLL
+                  </v-btn>
+                </v-col>
+              </v-row>
+
+              <p v-if="isShift1Full(selectedClinic)" class="disabled-hint mt-2">
+                Kuota hari ini habis
+              </p>
+
+              <!-- Row 2: JADWAL LAIN and Fast Track -->
+              <v-row dense class="mt-3">
+                <v-col cols="6">
+                  <v-btn
+                    color="primary-600"
+                    class="text-white payment-type-btn"
+                    size="large"
+                    block
+                    @click="selectVisitType('JADWAL_LAIN')"
+                  >
+                    JADWAL LAIN
+                  </v-btn>
+                </v-col>
+                <v-col cols="6">
+                  <v-btn
+                    color="danger-600"
+                    class="text-neutral-900 text-white"
+                    size="large"
+                    block
+                    @click="registerPatientDirectly('FAST_TRACK')"
+                    :disabled="isShift1Full(selectedClinic)"
+                    :class="{ 'btn-disabled': isShift1Full(selectedClinic) }"
+                  >
+                    FAST TRACK
+                  </v-btn>
+                </v-col>
+              </v-row>
+            </div>
+
+            <!-- JADWAL LAIN button for eksekutif -->
+            <v-row v-if="isEksekutif" dense class="mt-3">
               <v-col cols="12">
                 <v-btn
-                  color="success-600"
+                  color="primary-600"
                   class="text-white"
                   size="large"
                   block
-                  @click="registerPatientDirectly('Eksekutif')"
-                  :disabled="isShift1Full(selectedClinic) || !selectedDoctor"
-                  :class="{ 'btn-disabled': isShift1Full(selectedClinic) || !selectedDoctor }"
+                  @click="selectVisitType('JADWAL_LAIN')"
+                  :disabled="!selectedDoctor"
+                  :class="{ 'btn-disabled': !selectedDoctor }"
                 >
-                  DAFTAR SEKARANG
+                  JADWAL LAIN
                 </v-btn>
-                <p v-if="isShift1Full(selectedClinic)" class="disabled-hint">
-                  Kuota hari ini habis
-                </p>
-                <p v-else-if="!selectedDoctor" class="disabled-hint">
+                <p v-if="!selectedDoctor" class="disabled-hint">
                   Pilih dokter terlebih dahulu
                 </p>
               </v-col>
             </v-row>
-          </div>
-          
-          <!-- For Non-Eksekutif: Show payment type buttons and action buttons -->
-          <div v-else>
-            <!-- Row 1: BPJS and UMUM -->
-            <v-row dense>
-              <v-col cols="6">
-                <v-btn
-                  color="success-600"
-                  class="text-white payment-type-btn"
-                  size="large"
-                  block
-                  @click="registerPatientDirectly('BPJS')"
-                  :disabled="isShift1Full(selectedClinic)"
-                  :class="{ 'btn-disabled': isShift1Full(selectedClinic) }"
-                >
-                  BPJS
-                </v-btn>
-              </v-col>
-              <v-col cols="6">
-                <v-btn
-                  color="secondary-600"
-                  class="text-white payment-type-btn"
-                  size="large"
-                  block
-                  @click="registerPatientDirectly('UMUM')"
-                  :disabled="isShift1Full(selectedClinic)"
-                  :class="{ 'btn-disabled': isShift1Full(selectedClinic) }"
-                >
-                  UMUM / JKMM / SPM / DLL
-                </v-btn>
-              </v-col>
-            </v-row>
-            
-            <p v-if="isShift1Full(selectedClinic)" class="disabled-hint mt-2">
-              Kuota hari ini habis
-            </p>
-            
-            <!-- Row 2: JADWAL LAIN and Fast Track -->
-            <v-row dense class="mt-3">
-              <v-col cols="6">
-                <v-btn
-                  color="primary-600"
-                  class="text-white payment-type-btn"
-                  size="large"
-                  block
-                  @click="selectVisitType('JADWAL_LAIN')"
-                >
-                  JADWAL LAIN
-                </v-btn>
-              </v-col>
-              <v-col cols="6">
-                <v-btn
-                  color="danger-600"
-                  class="text-neutral-900 text-white"
-                  size="large"
-                  block
-                  @click="registerPatientDirectly('FAST_TRACK')"
-                  :disabled="isShift1Full(selectedClinic)"
-                  :class="{ 'btn-disabled': isShift1Full(selectedClinic) }"
-                >
-                  FAST TRACK
-                </v-btn>
-              </v-col>
-            </v-row>
-          </div>
-          
-          <!-- JADWAL LAIN button for eksekutif -->
-          <v-row v-if="isEksekutif" dense class="mt-3">
-            <v-col cols="12">
-              <v-btn
-                color="primary-600"
-                class="text-white"
-                size="large"
-                block
-                @click="selectVisitType('JADWAL_LAIN')"
-                :disabled="!selectedDoctor"
-                :class="{ 'btn-disabled': !selectedDoctor }"
+          </v-card-text>
+        </v-card>
+      </v-dialog>
+
+      <!-- Dialog Pemilihan Dokter untuk Pasien Eksekutif -->
+      <v-dialog
+        v-model="showDoctorSelectionDialog"
+        max-width="600"
+        @click:outside="showDoctorSelectionDialog = false"
+      >
+        <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"
               >
-                JADWAL LAIN
-              </v-btn>
-              <p v-if="!selectedDoctor" class="disabled-hint">
-                Pilih dokter terlebih dahulu
-              </p>
-            </v-col>
-          </v-row>
-        </v-card-text>
-
-
-      </v-card>
-    </v-dialog>
-
-
-    <!-- Dialog Pemilihan Dokter untuk Pasien Eksekutif -->
-    <v-dialog
-      v-model="showDoctorSelectionDialog"
-      max-width="600"
-      @click:outside="showDoctorSelectionDialog = false"
-    >
-      <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="600"
-      @click:outside="showBookingFormDialog = false"
-    >
-      <v-card class="dialog-card">
-        <v-card-title class="dialog-header">
-          Pilih Jadwal Kunjungan
-        </v-card-title>
-        <v-card-text class="pa-6">
-          <v-form @submit.prevent="submitBooking">
-            <v-text-field
-              v-model="bookingForm.date"
-              label="Tanggal"
-              type="date"
-              variant="outlined"
-              density="compact"
-              required
-              class="mb-3"
-              :min="getMinDate()"
-              :max="getMaxDate()"
-            ></v-text-field>
-
-            <v-select
-              v-model="bookingForm.shift"
-              :items="getAvailableShiftsForBooking()"
-              item-title="label"
-              item-value="value"
-              label="Pilih Shift"
-              variant="outlined"
-              density="compact"
-              required
-              class="mb-3"
-            ></v-select>
-
-            <v-select
-              v-model="bookingForm.payment"
-              :items="['BPJS', 'UMUM/JKMM/SPM/DLL']"
-              label="Pembayaran"
-              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="16" color="success-600">mdi-check-circle</v-icon>
-              </template>
-            </v-text-field>
-          </v-form>
-        </v-card-text>
-        <v-card-actions class="pa-4">
-          <v-spacer />
-          <v-btn
-            @click="showBookingFormDialog = false"
-            variant="outlined"
-            color="neutral-600"
-          >
-            Tutup
-          </v-btn>
-          <v-btn
-            color="success-600"
-            class="text-white"
-            variant="flat"
-            @click="submitBooking"
-          >
-            Simpan
-          </v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
-
-    <!-- Fast Track Dialog -->
-    <v-dialog
-      v-model="showFastTrackDialog"
-      max-width="600"
-      @click:outside="showFastTrackDialog = false"
-    >
-      <v-card class="dialog-card">
-        <v-card-title class="dialog-header">
-          <v-icon class="mr-2">mdi-fast-forward</v-icon>
-          Formulir Fast Track
-        </v-card-title>
-        <v-divider />
-        <v-card-text class="pa-6">
-          <v-form>
-            <v-text-field
-              v-model="fastTrackForm.penanggungJawab"
-              label="Penanggung Jawab"
-              variant="outlined"
-              density="compact"
-              required
-              class="mb-3"
-              :rules="[v => !!v || 'Mohon isi Penanggung Jawab']"
-            />
-            
-            <v-textarea
-              v-model="fastTrackForm.alasanFastTrack"
-              label="Alasan Fast Track"
-              variant="outlined"
-              density="compact"
-              required
-              rows="3"
-              class="mb-3"
-              :rules="[v => !!v || 'Mohon isi Alasan Fast Track']"
-            />
-            
-            <!-- Jenis Pembayaran hanya untuk non-Eksekutif -->
-            <v-select
-              v-if="!isEksekutif"
-              v-model="fastTrackForm.jenisPembayaran"
-              :items="['BPJS', 'UMUM']"
-              label="Jenis Pembayaran"
-              variant="outlined"
-              density="compact"
-              required
-              class="mb-3"
-              :rules="[v => !!v || 'Mohon pilih Jenis Pembayaran']"
-            />
-          </v-form>
-        </v-card-text>
-        <v-divider />
-        <v-card-actions class="pa-4">
-          <v-spacer />
-          <v-btn
-            variant="outlined"
-            color="neutral-600"
-            @click="showFastTrackDialog = false"
-          >
-            Batal
-          </v-btn>
-          <v-btn
-            color="success-600"
-            class="text-white"
-            variant="flat"
-            @click="submitFastTrackForm"
-          >
-            Lanjutkan
-          </v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
-
-    <!-- Print Dialog -->
-    <v-dialog
-      v-model="showPrintDialog"
-      max-width="500"
-      @click:outside="skipPrint"
-    >
-      <v-card class="dialog-card">
-        <v-card-title class="dialog-header">
-          <v-icon class="mr-2">mdi-printer</v-icon>
-          Cetak Nomor Antrian
-        </v-card-title>
-        <v-divider />
-        <v-card-text class="pa-6">
-          <div v-if="lastRegisteredPatient" class="dialog-content">
-            <div class="text-center mb-4">
-              <v-icon size="48" color="primary-600" class="mb-3">mdi-ticket-confirmation</v-icon>
-              <h3 class="dialog-clinic-name mb-2">Tiket Berhasil Dibuat</h3>
-              <p class="text-body-2 text-grey mb-4">
-                Nomor antrean Anda: <strong>{{ lastRegisteredPatient.noAntrian?.split(" |")[0] || lastRegisteredPatient.noAntrian || 'N/A' }}</strong>
+                <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-divider class="my-4" />
-            
-            <div class="dialog-info">
-              <div class="info-row mb-3">
-                <span class="info-label">Klinik:</span>
-                <span class="info-value">{{ lastRegisteredPatient.klinik || 'N/A' }}</span>
-              </div>
-              <div class="info-row mb-3">
-                <span class="info-label">Shift:</span>
-                <span class="info-value">{{ lastRegisteredPatient.shift || 'N/A' }}</span>
-              </div>
-              <div class="info-row mb-3">
-                <span class="info-label">Pembayaran:</span>
-                <span class="info-value">{{ lastRegisteredPatient.pembayaran || 'N/A' }}</span>
-              </div>
-              <div class="info-row">
-                <span class="info-label">Barcode:</span>
-                <span class="info-value">{{ lastRegisteredPatient.barcode || 'N/A' }}</span>
-              </div>
-            </div>
-            
-            <v-alert
-              type="info"
-              variant="tonal"
-              class="mt-4"
-              density="compact"
+          </v-card-text>
+          <v-divider />
+          <v-card-actions class="pa-4">
+            <v-spacer />
+            <v-btn
+              variant="outlined"
+              color="neutral-600"
+              @click="showDoctorSelectionDialog = false"
             >
-              <template v-slot:prepend>
-                <v-icon size="20">mdi-information</v-icon>
-              </template>
-              <div class="text-body-2">
-                Cetak tiket ini untuk digunakan saat check-in. QR Code pada tiket dapat di-scan untuk proses check-in.
-              </div>
-            </v-alert>
-          </div>
-          <div v-else class="text-center py-6">
-            <v-progress-circular indeterminate color="primary-600" class="mb-3"></v-progress-circular>
-            <p class="text-body-2 text-grey">Memuat data tiket...</p>
-          </div>
-        </v-card-text>
-        <v-card-actions class="pa-4">
-          <v-spacer />
-          <v-btn
-            variant="outlined"
-            color="neutral-600"
-            @click="skipPrint"
-            :disabled="isPrinting"
-          >
-            Lewati
-          </v-btn>
-          <v-btn
-            color="primary-600"
-            class="text-white"
-            variant="flat"
-            @click="handlePrintTicket"
-            :loading="isPrinting"
-            :disabled="isPrinting"
-            prepend-icon="mdi-printer"
-          >
-            {{ isPrinting ? 'Mencetak...' : 'Cetak Tiket' }}
-          </v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
+              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-snackbar
-      v-model="snackbar"
-      :color="snackbarColor"
-      :timeout="3000"
-      location="top right"
-    >
-      {{ snackbarText }}
-      <template v-slot:actions>
-        <v-btn icon @click="snackbar = false">
-          <v-icon size="20">mdi-close</v-icon>
-        </v-btn>
-      </template>
-    </v-snackbar>
+      <v-dialog
+        v-model="showBookingFormDialog"
+        max-width="600"
+        @click:outside="showBookingFormDialog = false"
+      >
+        <v-card class="dialog-card">
+          <v-card-title class="dialog-header">
+            Pilih Jadwal Kunjungan
+          </v-card-title>
+          <v-card-text class="pa-6">
+            <v-form @submit.prevent="submitBooking">
+              <v-text-field
+                v-model="bookingForm.date"
+                label="Tanggal"
+                type="date"
+                variant="outlined"
+                density="compact"
+                required
+                class="mb-3"
+                :min="getMinDate()"
+                :max="getMaxDate()"
+              ></v-text-field>
+
+              <v-select
+                v-model="bookingForm.shift"
+                :items="getAvailableShiftsForBooking()"
+                item-title="label"
+                item-value="value"
+                label="Pilih Shift"
+                variant="outlined"
+                density="compact"
+                required
+                class="mb-3"
+              ></v-select>
+
+              <v-select
+                v-model="bookingForm.payment"
+                :items="['BPJS', 'UMUM/JKMM/SPM/DLL']"
+                label="Pembayaran"
+                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="16" color="success-600"
+                    >mdi-check-circle</v-icon
+                  >
+                </template>
+              </v-text-field>
+            </v-form>
+          </v-card-text>
+          <v-card-actions class="pa-4">
+            <v-spacer />
+            <v-btn
+              @click="showBookingFormDialog = false"
+              variant="outlined"
+              color="neutral-600"
+            >
+              Tutup
+            </v-btn>
+            <v-btn
+              color="success-600"
+              class="text-white"
+              variant="flat"
+              @click="submitBooking"
+            >
+              Simpan
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+
+      <!-- Fast Track Dialog -->
+      <v-dialog
+        v-model="showFastTrackDialog"
+        max-width="600"
+        @click:outside="showFastTrackDialog = false"
+      >
+        <v-card class="dialog-card">
+          <v-card-title class="dialog-header">
+            <v-icon class="mr-2">mdi-fast-forward</v-icon>
+            Formulir Fast Track
+          </v-card-title>
+          <v-divider />
+          <v-card-text class="pa-6">
+            <v-form>
+              <v-text-field
+                v-model="fastTrackForm.penanggungJawab"
+                label="Penanggung Jawab"
+                variant="outlined"
+                density="compact"
+                required
+                class="mb-3"
+                :rules="[(v) => !!v || 'Mohon isi Penanggung Jawab']"
+              />
+
+              <v-textarea
+                v-model="fastTrackForm.alasanFastTrack"
+                label="Alasan Fast Track"
+                variant="outlined"
+                density="compact"
+                required
+                rows="3"
+                class="mb-3"
+                :rules="[(v) => !!v || 'Mohon isi Alasan Fast Track']"
+              />
+
+              <!-- Jenis Pembayaran hanya untuk non-Eksekutif -->
+              <v-select
+                v-if="!isEksekutif"
+                v-model="fastTrackForm.jenisPembayaran"
+                :items="['BPJS', 'UMUM']"
+                label="Jenis Pembayaran"
+                variant="outlined"
+                density="compact"
+                required
+                class="mb-3"
+                :rules="[(v) => !!v || 'Mohon pilih Jenis Pembayaran']"
+              />
+            </v-form>
+          </v-card-text>
+          <v-divider />
+          <v-card-actions class="pa-4">
+            <v-spacer />
+            <v-btn
+              variant="outlined"
+              color="neutral-600"
+              @click="showFastTrackDialog = false"
+            >
+              Batal
+            </v-btn>
+            <v-btn
+              color="success-600"
+              class="text-white"
+              variant="flat"
+              @click="submitFastTrackForm"
+            >
+              Lanjutkan
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+
+      <!-- Print Dialog -->
+      <v-dialog
+        v-model="showPrintDialog"
+        max-width="500"
+        @click:outside="skipPrint"
+      >
+        <v-card class="dialog-card">
+          <v-card-title class="dialog-header">
+            <v-icon class="mr-2">mdi-printer</v-icon>
+            Cetak Nomor Antrian
+          </v-card-title>
+          <v-divider />
+          <v-card-text class="pa-6">
+            <div v-if="lastRegisteredPatient" class="dialog-content">
+              <div class="text-center mb-4">
+                <v-icon size="48" color="primary-600" class="mb-3"
+                  >mdi-ticket-confirmation</v-icon
+                >
+                <h3 class="dialog-clinic-name mb-2">Tiket Berhasil Dibuat</h3>
+                <p class="text-body-2 text-grey mb-4">
+                  Nomor antrean Anda:
+                  <strong>{{
+                    lastRegisteredPatient.noAntrian?.split(" |")[0] ||
+                    lastRegisteredPatient.noAntrian ||
+                    "N/A"
+                  }}</strong>
+                </p>
+              </div>
+
+              <v-divider class="my-4" />
+
+              <div class="dialog-info">
+                <div class="info-row mb-3">
+                  <span class="info-label">Klinik:</span>
+                  <span class="info-value">{{
+                    lastRegisteredPatient.klinik || "N/A"
+                  }}</span>
+                </div>
+                <div class="info-row mb-3">
+                  <span class="info-label">Shift:</span>
+                  <span class="info-value">{{
+                    lastRegisteredPatient.shift || "N/A"
+                  }}</span>
+                </div>
+                <div class="info-row mb-3">
+                  <span class="info-label">Pembayaran:</span>
+                  <span class="info-value">{{
+                    lastRegisteredPatient.pembayaran || "N/A"
+                  }}</span>
+                </div>
+                <div class="info-row">
+                  <span class="info-label">Barcode:</span>
+                  <span class="info-value">{{
+                    lastRegisteredPatient.barcode || "N/A"
+                  }}</span>
+                </div>
+              </div>
+
+              <v-alert
+                type="info"
+                variant="tonal"
+                class="mt-4"
+                density="compact"
+              >
+                <template v-slot:prepend>
+                  <v-icon size="20">mdi-information</v-icon>
+                </template>
+                <div class="text-body-2">
+                  Cetak tiket ini untuk digunakan saat check-in. QR Code pada
+                  tiket dapat di-scan untuk proses check-in.
+                </div>
+              </v-alert>
+            </div>
+            <div v-else class="text-center py-6">
+              <v-progress-circular
+                indeterminate
+                color="primary-600"
+                class="mb-3"
+              ></v-progress-circular>
+              <p class="text-body-2 text-grey">Memuat data tiket...</p>
+            </div>
+          </v-card-text>
+          <v-card-actions class="pa-4 pt-0 justify-center">
+            <v-btn
+              color="primary-600"
+              class="text-white print-ticket-btn"
+              size="x-large"
+              variant="flat"
+              @click="handlePrintTicket"
+              :loading="isPrinting"
+              :disabled="isPrinting"
+              prepend-icon="mdi-printer"
+              min-width="240"
+              min-height="64"
+              rounded="lg"
+              elevation="4"
+            >
+              Cetak Tiket
+            </v-btn>
+          </v-card-actions>
+          <v-card-actions class="pa-4 pt-0 justify-center">
+            <v-btn
+              variant="outlined"
+              color="neutral-600"
+              @click="skipPrint"
+              :disabled="isPrinting"
+              class="finish-btn"
+              min-width="240"
+              min-height="56"
+              rounded="lg"
+            >
+              Selesai
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+
+      <v-snackbar
+        v-model="snackbar"
+        :color="snackbarColor"
+        :timeout="3000"
+        location="top right"
+      >
+        {{ snackbarText }}
+        <template v-slot:actions>
+          <v-btn icon @click="snackbar = false">
+            <v-icon size="20">mdi-close</v-icon>
+          </v-btn>
+        </template>
+      </v-snackbar>
     </div>
   </div>
   <div v-if="!anjunganData" class="not-found">
@@ -667,6 +708,7 @@ import { useAnjunganStore } from "@/stores/anjunganStore";
 import { useClinicStore } from "@/stores/clinicStore";
 import { useQueueStore } from "@/stores/queueStore";
 import { useDoctorStore } from "@/stores/doctorStore";
+import { useWebSocket } from "@/composables/useWebSocket";
 import { useThermalPrint } from "@/composables/useThermalPrint";
 
 definePageMeta({
@@ -680,6 +722,48 @@ const queueStore = useQueueStore();
 const doctorStore = useDoctorStore();
 const { printTicketFromPatient, isPrinting } = useThermalPrint();
 
+// WebSocket state
+const config = useRuntimeConfig();
+const wsBaseUrl =
+  config.public?.wsBaseUrl || "ws://10.10.150.100:8084/api/v1/ws";
+const uniqueSessionSuffix = ref(Math.random().toString(36).substring(7));
+let wsInstance = null;
+const isConnected = ref(false);
+
+const initWebSocket = () => {
+  if (!anjunganId.value) return null;
+
+  console.log("🔌 WebSocket (Anjungan): Connecting to", wsBaseUrl);
+
+  wsInstance = useWebSocket({
+    url: wsBaseUrl,
+    clientId: `anjungan-${anjunganId.value}-${uniqueSessionSuffix.value}`,
+    onMessage: (data) => {
+      console.log("📨 WebSocket message received (Anjungan):", data);
+      // In Anjungan, we might need to refresh clinics or stats
+      // but usually Anjungan is more focused on registration.
+      // We can refresh clinics just in case.
+      if (anjunganData.value?.jenisPasien === "Reguler") {
+        clinicStore.fetchRegulerClinics();
+      }
+    },
+    onOpen: () => {
+      console.log("✅ WebSocket connected (Anjungan)");
+      isConnected.value = true;
+    },
+    onClose: () => {
+      isConnected.value = false;
+    },
+    onError: () => {
+      isConnected.value = false;
+    },
+    reconnectInterval: 5000,
+    maxReconnectAttempts: 10,
+  });
+
+  return wsInstance;
+};
+
 // Gunakan storeToRefs untuk memastikan reaktivitas yang stabil terutama saat cold start/refresh
 const { anjunganItems } = storeToRefs(anjunganStore);
 const { getAllClinics } = storeToRefs(clinicStore);
@@ -687,11 +771,14 @@ const { doctorsByKlinikId, loadingDoctors } = storeToRefs(doctorStore);
 
 // Validasi bahwa queueStore ter-load dengan benar
 onMounted(() => {
-  console.log('🔍 QueueStore initialized:', queueStore);
-  console.log('🔍 registerPatientFromAnjungan available:', typeof queueStore.registerPatientFromAnjungan);
-  if (typeof queueStore.registerPatientFromAnjungan !== 'function') {
-    console.error('❌ registerPatientFromAnjungan is not a function!');
-    console.error('Available methods:', Object.keys(queueStore));
+  console.log("🔍 QueueStore initialized:", queueStore);
+  console.log(
+    "🔍 registerPatientFromAnjungan available:",
+    typeof queueStore.registerPatientFromAnjungan,
+  );
+  if (typeof queueStore.registerPatientFromAnjungan !== "function") {
+    console.error("❌ registerPatientFromAnjungan is not a function!");
+    console.error("Available methods:", Object.keys(queueStore));
   }
 });
 
@@ -728,17 +815,20 @@ const prefetchDoctorsForCurrentAnjungan = async () => {
   const clinicsForAnjungan = filteredClinics.value;
 
   console.log(
-    `🔄 Prefetching doctors for ${clinicsForAnjungan.length} klinik (${anjunganData.value.jenisPasien})`
+    `🔄 Prefetching doctors for ${clinicsForAnjungan.length} klinik (${anjunganData.value.jenisPasien})`,
   );
 
   // Fetch doctors sequentially to avoid overwhelming the server
   for (const clinic of clinicsForAnjungan) {
     await loadDoctorsForClinic(clinic);
     // Tiny delay between requests
-    await new Promise(resolve => setTimeout(resolve, 30));
+    await new Promise((resolve) => setTimeout(resolve, 30));
   }
 
-  console.log("✅ Prefetch complete. Doctors by klinik ID:", doctorsByKlinikId.value);
+  console.log(
+    "✅ Prefetch complete. Doctors by klinik ID:",
+    doctorsByKlinikId.value,
+  );
 };
 
 const dialogDoctors = computed(() => {
@@ -757,7 +847,9 @@ const dialogDoctors = computed(() => {
   const staticDoctors = clinic.doctors || [];
 
   if (staticDoctors.length > 0) {
-    console.log(`ℹ️ Using static doctors for ${clinic.name} (API data not available)`);
+    console.log(
+      `ℹ️ Using static doctors for ${clinic.name} (API data not available)`,
+    );
   }
 
   return staticDoctors;
@@ -767,6 +859,19 @@ onMounted(async () => {
   console.log("🚀 Component mounted");
   await nextTick();
   console.log("✅ Initial mount complete");
+
+  // Initialize and connect WebSocket
+  wsInstance = initWebSocket();
+  if (wsInstance) {
+    wsInstance.connect();
+  }
+});
+
+import { onUnmounted } from "vue";
+onUnmounted(() => {
+  if (wsInstance) {
+    wsInstance.disconnect();
+  }
 });
 
 const filteredClinics = computed(() => {
@@ -776,20 +881,29 @@ const filteredClinics = computed(() => {
   const targetKodes = anjunganData.value.klinik;
 
   return targetKodes
-    .map((kode) => getAllClinics.value.find((c) => c.kode === kode && c.jenisLayanan === targetJenis) || null)
+    .map(
+      (kode) =>
+        getAllClinics.value.find(
+          (c) => c.kode === kode && c.jenisLayanan === targetJenis,
+        ) || null,
+    )
     .filter(Boolean);
 });
 
 // Watcher untuk anjunganData: Jika baru terisi setelah mount, pastikan prefetch berjalan
-watch(anjunganData, async (newVal) => {
-  if (newVal) {
-    console.log("🎯 anjunganData changed/ready, performing pre-checks...");
-    if (newVal.jenisPasien === 'Reguler') {
-      await clinicStore.fetchRegulerClinics();
+watch(
+  anjunganData,
+  async (newVal) => {
+    if (newVal) {
+      console.log("🎯 anjunganData changed/ready, performing pre-checks...");
+      if (newVal.jenisPasien === "Reguler") {
+        await clinicStore.fetchRegulerClinics();
+      }
+      await prefetchDoctorsForCurrentAnjungan();
     }
-    await prefetchDoctorsForCurrentAnjungan();
-  }
-}, { immediate: true });
+  },
+  { immediate: true },
+);
 
 const showVisitTypeDialog = ref(false);
 const showBookingFormDialog = ref(false);
@@ -819,7 +933,7 @@ const bookingForm = ref({
 
 // Cek apakah jenis pasien adalah Eksekutif
 const isEksekutif = computed(() => {
-  return anjunganData.value?.jenisPasien === 'Eksekutif';
+  return anjunganData.value?.jenisPasien === "Eksekutif";
 });
 
 // tampilkan doctor info dengan prioritas API
@@ -846,7 +960,15 @@ const getDisplayDoctorInfo = (clinic) => {
 
 // Helper to get current day name in Indonesian
 const getTodayName = () => {
-  const days = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jum\'at', 'Sabtu'];
+  const days = [
+    "Minggu",
+    "Senin",
+    "Selasa",
+    "Rabu",
+    "Kamis",
+    "Jum'at",
+    "Sabtu",
+  ];
   return days[new Date().getDay()];
 };
 
@@ -861,7 +983,7 @@ const getCurrentShift = (clinic) => {
 
   const today = getTodayName();
   const shiftsToday = clinic.jamShiftPerHari[today];
-  
+
   if (!shiftsToday || shiftsToday.length === 0) return null;
 
   const currentHour = getCurrentHour();
@@ -870,8 +992,8 @@ const getCurrentShift = (clinic) => {
 
   // Find active shift
   for (const shift of shiftsToday) {
-    const [startH, startM] = shift.dari.split(':').map(Number);
-    const [endH, endM] = shift.sampai.split(':').map(Number);
+    const [startH, startM] = shift.dari.split(":").map(Number);
+    const [endH, endM] = shift.sampai.split(":").map(Number);
     const startTime = startH * 60 + startM;
     const endTime = endH * 60 + endM;
 
@@ -886,12 +1008,12 @@ const getCurrentShift = (clinic) => {
 
 const isShift1Full = (clinic) => {
   if (!clinic || !clinic.jamShiftPerHari) return true;
-  
+
   const today = getTodayName();
   const shiftsToday = clinic.jamShiftPerHari[today];
-  
+
   if (!shiftsToday || shiftsToday.length === 0) return true;
-  
+
   // Check first shift
   const firstShift = shiftsToday[0];
   return firstShift ? firstShift.kuota === 0 : true;
@@ -899,10 +1021,10 @@ const isShift1Full = (clinic) => {
 
 const getCurrentShiftNumber = () => {
   if (!selectedClinic.value) return 1;
-  
+
   const today = getTodayName();
   const shiftsToday = selectedClinic.value.jamShiftPerHari?.[today];
-  
+
   if (!shiftsToday || shiftsToday.length === 0) return 1;
 
   const currentShift = getCurrentShift(selectedClinic.value);
@@ -913,10 +1035,10 @@ const getCurrentShiftNumber = () => {
 
 const getCurrentShiftQuota = () => {
   if (!selectedClinic.value || !selectedClinic.value.jamShiftPerHari) return 0;
-  
+
   const today = getTodayName();
   const shiftsToday = selectedClinic.value.jamShiftPerHari[today];
-  
+
   if (!shiftsToday || shiftsToday.length === 0) return 0;
 
   const currentShift = getCurrentShift(selectedClinic.value);
@@ -932,11 +1054,19 @@ const getAvailableShiftsForBooking = () => {
 
   // Get day name from selected date
   const date = new Date(selectedDate);
-  const days = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jum\'at', 'Sabtu'];
+  const days = [
+    "Minggu",
+    "Senin",
+    "Selasa",
+    "Rabu",
+    "Kamis",
+    "Jum'at",
+    "Sabtu",
+  ];
   const dayName = days[date.getDay()];
 
   const shiftsForDay = selectedClinic.value.jamShiftPerHari[dayName];
-  
+
   if (!shiftsForDay || shiftsForDay.length === 0) {
     return [];
   }
@@ -945,7 +1075,7 @@ const getAvailableShiftsForBooking = () => {
     .map((shift, index) => {
       const shiftName = `Shift ${index + 1}`;
       const shiftTime = `${shift.dari} - ${shift.sampai}`;
-      
+
       // If today, skip shift 1
       if (isToday && index === 0) {
         return null;
@@ -1027,10 +1157,10 @@ const registerPatientDirectly = async (paymentType) => {
   }
 
   showVisitTypeDialog.value = false;
-  
+
   // Handle Fast Track - tampilkan dialog Fast Track sebelum registrasi
-  const isFastTrack = paymentType === 'FAST_TRACK';
-  
+  const isFastTrack = paymentType === "FAST_TRACK";
+
   if (isFastTrack) {
     // Reset form Fast Track
     fastTrackForm.value = {
@@ -1044,7 +1174,7 @@ const registerPatientDirectly = async (paymentType) => {
     // Untuk pasien Eksekutif, dokter sudah dipilih di dialog sebelumnya
     // Untuk Reguler/BPJS, tidak perlu dokter
     const namaDokter = isEksekutif.value ? selectedDoctor.value : null;
-    await registerPatient('SEKARANG', paymentType, namaDokter, false);
+    await registerPatient("SEKARANG", paymentType, namaDokter, false);
   }
 };
 
@@ -1055,31 +1185,45 @@ const confirmDoctorSelection = () => {
     showSnackbar("Mohon pilih dokter terlebih dahulu", "error");
     return;
   }
-  
+
   showDoctorSelectionDialog.value = false;
-  
+
   // Register dengan dokter yang dipilih untuk kunjungan hari ini
   // Untuk eksekutif, paymentType adalah "Eksekutif"
-  registerPatient('SEKARANG', 'Eksekutif', selectedDoctor.value);
+  registerPatient("SEKARANG", "Eksekutif", selectedDoctor.value);
 };
 
-const registerPatient = async (visitType, paymentType, namaDokter, isFastTrack = false, fastTrackData = null) => {
+const registerPatient = async (
+  visitType,
+  paymentType,
+  namaDokter,
+  isFastTrack = false,
+  fastTrackData = null,
+) => {
   try {
     // Validasi bahwa fungsi registerPatientFromAnjungan ada
     if (!queueStore) {
-      console.error('❌ queueStore is not initialized');
-      showSnackbar('Store tidak ter-initialize. Silakan refresh halaman.', 'error');
+      console.error("❌ queueStore is not initialized");
+      showSnackbar(
+        "Store tidak ter-initialize. Silakan refresh halaman.",
+        "error",
+      );
       return;
     }
-    
-    if (typeof queueStore.registerPatientFromAnjungan !== 'function') {
-      console.error('❌ queueStore.registerPatientFromAnjungan is not a function');
-      console.error('queueStore:', queueStore);
-      console.error('Available methods:', Object.keys(queueStore || {}));
-      showSnackbar('Fungsi registrasi tidak tersedia. Silakan refresh halaman.', 'error');
+
+    if (typeof queueStore.registerPatientFromAnjungan !== "function") {
+      console.error(
+        "❌ queueStore.registerPatientFromAnjungan is not a function",
+      );
+      console.error("queueStore:", queueStore);
+      console.error("Available methods:", Object.keys(queueStore || {}));
+      showSnackbar(
+        "Fungsi registrasi tidak tersedia. Silakan refresh halaman.",
+        "error",
+      );
       return;
     }
-    
+
     // Register patient to queueStore
     let result;
     if (!isEksekutif.value) {
@@ -1089,7 +1233,7 @@ const registerPatient = async (visitType, paymentType, namaDokter, isFastTrack =
         paymentType,
         visitType,
         isFastTrack,
-        fastTrackData
+        fastTrackData,
       );
     } else {
       // Existing logic for Eksekutif
@@ -1098,37 +1242,47 @@ const registerPatient = async (visitType, paymentType, namaDokter, isFastTrack =
         paymentType,
         visitType,
         null,
-        'Shift 1',
+        "Shift 1",
         namaDokter,
         isFastTrack,
         fastTrackData, // Pass fastTrackData (penanggungJawab, alasanFastTrack)
         null, // Stop passing anjunganId as targetLoketId (fix routing bug)
-        null  // Stop passing anjunganName as targetLoket name
+        null, // Stop passing anjunganName as targetLoket name
       );
     }
 
-    
     if (result && result.success && result.patient) {
-      const doctorInfo = namaDokter ? ` dengan dokter ${namaDokter}` : '';
-      const fastTrackInfo = isFastTrack ? ' (Fast Track)' : '';
-      const message = `Pendaftaran ${selectedClinic.value.name} untuk kunjungan HARI INI dengan pembayaran ${paymentType}${fastTrackInfo}${doctorInfo} berhasil diproses. Nomor antrean: ${result.patient.noAntrian?.split(" |")[0] || result.patient.noAntrian || 'N/A'}`;
+      const doctorInfo = namaDokter ? ` dengan dokter ${namaDokter}` : "";
+      const fastTrackInfo = isFastTrack ? " (Fast Track)" : "";
+      const message = `Pendaftaran ${selectedClinic.value.name} untuk kunjungan HARI INI dengan pembayaran ${paymentType}${fastTrackInfo}${doctorInfo} berhasil diproses. Nomor antrean: ${result.patient.noAntrian?.split(" |")[0] || result.patient.noAntrian || "N/A"}`;
       showSnackbar(message, "success");
-      
+
       // Simpan data pasien untuk print
       lastRegisteredPatient.value = result.patient;
-      console.log('📋 Patient data saved for print:', lastRegisteredPatient.value);
-      
+      console.log(
+        "📋 Patient data saved for print:",
+        lastRegisteredPatient.value,
+      );
+
       // Tampilkan dialog print - gunakan nextTick untuk memastikan reactive update
       await nextTick();
       showPrintDialog.value = true;
-      console.log('✅ Print dialog opened, showPrintDialog:', showPrintDialog.value, 'patient:', lastRegisteredPatient.value);
+      console.log(
+        "✅ Print dialog opened, showPrintDialog:",
+        showPrintDialog.value,
+        "patient:",
+        lastRegisteredPatient.value,
+      );
     } else {
-      console.error('❌ Registration failed or patient data missing:', result);
+      console.error("❌ Registration failed or patient data missing:", result);
       showSnackbar(result?.message || "Gagal melakukan pendaftaran", "error");
     }
   } catch (error) {
-    console.error('❌ Error in registerPatient:', error);
-    showSnackbar('Terjadi kesalahan saat melakukan pendaftaran. Silakan coba lagi.', 'error');
+    console.error("❌ Error in registerPatient:", error);
+    showSnackbar(
+      "Terjadi kesalahan saat melakukan pendaftaran. Silakan coba lagi.",
+      "error",
+    );
   } finally {
     selectedClinic.value = null;
     selectedDoctor.value = null;
@@ -1152,27 +1306,35 @@ const submitBooking = async () => {
   }
 
   showBookingFormDialog.value = false;
-  
+
   try {
     // Register patient to queueStore for future visit
-    const paymentType = bookingForm.value.payment === 'BPJS' ? 'BPJS' : 'UMUM';
+    const paymentType = bookingForm.value.payment === "BPJS" ? "BPJS" : "UMUM";
     const namaDokter = isEksekutif.value ? bookingForm.value.doctor : null;
-    
+
     // Validasi bahwa fungsi registerPatientFromAnjungan ada
     if (!queueStore) {
-      console.error('❌ queueStore is not initialized');
-      showSnackbar('Store tidak ter-initialize. Silakan refresh halaman.', 'error');
+      console.error("❌ queueStore is not initialized");
+      showSnackbar(
+        "Store tidak ter-initialize. Silakan refresh halaman.",
+        "error",
+      );
       return;
     }
-    
-    if (typeof queueStore.registerPatientFromAnjungan !== 'function') {
-      console.error('❌ queueStore.registerPatientFromAnjungan is not a function');
-      console.error('queueStore:', queueStore);
-      console.error('Available methods:', Object.keys(queueStore || {}));
-      showSnackbar('Fungsi registrasi tidak tersedia. Silakan refresh halaman.', 'error');
+
+    if (typeof queueStore.registerPatientFromAnjungan !== "function") {
+      console.error(
+        "❌ queueStore.registerPatientFromAnjungan is not a function",
+      );
+      console.error("queueStore:", queueStore);
+      console.error("Available methods:", Object.keys(queueStore || {}));
+      showSnackbar(
+        "Fungsi registrasi tidak tersedia. Silakan refresh halaman.",
+        "error",
+      );
       return;
     }
-    
+
     let result;
     if (!isEksekutif.value) {
       // Create patient via API for REGULER
@@ -1180,46 +1342,56 @@ const submitBooking = async () => {
       result = await queueStore.registerRegulerPatientViaApi(
         selectedClinic.value,
         paymentType,
-        'JADWAL_LAIN',
+        "JADWAL_LAIN",
         false, // isFastTrack
-        null   // fastTrackData
+        null, // fastTrackData
       );
     } else {
       result = queueStore.registerPatientFromAnjungan(
         selectedClinic.value,
         paymentType,
-        'JADWAL_LAIN',
+        "JADWAL_LAIN",
         bookingForm.value.date,
         bookingForm.value.shift,
         namaDokter,
         false, // isFastTrack
-        null,  // fastTrackData
-        null,  // Stop passing anjunganId as targetLoketId (fix routing bug)
-        null   // Stop passing anjunganName as targetLoket name
+        null, // fastTrackData
+        null, // Stop passing anjunganId as targetLoketId (fix routing bug)
+        null, // Stop passing anjunganName as targetLoket name
       );
     }
 
-    
     if (result && result.success && result.patient) {
-      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] || result.patient.noAntrian || 'N/A'}`;
+      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] || result.patient.noAntrian || "N/A"}`;
       showSnackbar(message, "success");
-      
+
       // Simpan data pasien untuk print
       lastRegisteredPatient.value = result.patient;
-      console.log('📋 Patient data saved for print (booking):', lastRegisteredPatient.value);
-      
+      console.log(
+        "📋 Patient data saved for print (booking):",
+        lastRegisteredPatient.value,
+      );
+
       // Tampilkan dialog print - gunakan nextTick untuk memastikan reactive update
       await nextTick();
       showPrintDialog.value = true;
-      console.log('✅ Print dialog opened (booking), showPrintDialog:', showPrintDialog.value, 'patient:', lastRegisteredPatient.value);
+      console.log(
+        "✅ Print dialog opened (booking), showPrintDialog:",
+        showPrintDialog.value,
+        "patient:",
+        lastRegisteredPatient.value,
+      );
     } else {
-      console.error('❌ Booking failed or patient data missing:', result);
+      console.error("❌ Booking failed or patient data missing:", result);
       showSnackbar(result?.message || "Gagal menyimpan jadwal", "error");
     }
   } catch (error) {
-    console.error('❌ Error in submitBooking:', error);
-    showSnackbar('Terjadi kesalahan saat menyimpan jadwal. Silakan coba lagi.', 'error');
+    console.error("❌ Error in submitBooking:", error);
+    showSnackbar(
+      "Terjadi kesalahan saat menyimpan jadwal. Silakan coba lagi.",
+      "error",
+    );
   } finally {
     selectedClinic.value = null;
     selectedDoctor.value = null;
@@ -1229,7 +1401,7 @@ const submitBooking = async () => {
 
 const handlePrintTicket = async () => {
   if (!lastRegisteredPatient.value) return;
-  
+
   try {
     await printTicketFromPatient(lastRegisteredPatient.value);
     showSnackbar("Tiket berhasil dicetak", "success");
@@ -1253,36 +1425,44 @@ const submitFastTrackForm = async () => {
     showSnackbar("Mohon isi Penanggung Jawab", "error");
     return;
   }
-  
+
   if (!fastTrackForm.value.alasanFastTrack.trim()) {
     showSnackbar("Mohon isi Alasan Fast Track", "error");
     return;
   }
-  
+
   // Untuk non-Eksekutif, validasi jenis pembayaran
   if (!isEksekutif.value && !fastTrackForm.value.jenisPembayaran) {
     showSnackbar("Mohon pilih Jenis Pembayaran", "error");
     return;
   }
-  
+
   // Tutup dialog Fast Track
   showFastTrackDialog.value = false;
-  
+
   // Untuk pasien Eksekutif, dokter sudah dipilih di dialog sebelumnya
   // Untuk Reguler/BPJS, tidak perlu dokter
   const namaDokter = isEksekutif.value ? selectedDoctor.value : null;
-  
+
   // Tentukan paymentType berdasarkan jenis pasien
-  const paymentType = isEksekutif.value ? 'Eksekutif' : fastTrackForm.value.jenisPembayaran;
-  
+  const paymentType = isEksekutif.value
+    ? "Eksekutif"
+    : fastTrackForm.value.jenisPembayaran;
+
   // Siapkan data Fast Track
   const fastTrackData = {
     penanggungJawab: fastTrackForm.value.penanggungJawab.trim(),
     alasanFastTrack: fastTrackForm.value.alasanFastTrack.trim(),
   };
-  
+
   // Register dengan Fast Track
-  await registerPatient('SEKARANG', paymentType, namaDokter, true, fastTrackData);
+  await registerPatient(
+    "SEKARANG",
+    paymentType,
+    namaDokter,
+    true,
+    fastTrackData,
+  );
 };
 
 const backToList = () => {
@@ -1291,21 +1471,29 @@ const backToList = () => {
 
 // Watch showPrintDialog untuk debugging
 watch(showPrintDialog, (newVal) => {
-  console.log('🔔 showPrintDialog changed:', newVal);
+  console.log("🔔 showPrintDialog changed:", newVal);
   if (newVal) {
-    console.log('📋 lastRegisteredPatient:', lastRegisteredPatient.value);
+    console.log("📋 lastRegisteredPatient:", lastRegisteredPatient.value);
   }
 });
 
 // Watch lastRegisteredPatient untuk debugging
-watch(lastRegisteredPatient, (newVal) => {
-  console.log('🔔 lastRegisteredPatient changed:', newVal);
-}, { deep: true });
+watch(
+  lastRegisteredPatient,
+  (newVal) => {
+    console.log("🔔 lastRegisteredPatient changed:", newVal);
+  },
+  { deep: true },
+);
 </script>
 
 <style scoped lang="scss">
 .page-header {
-  background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-700) 100%);
+  background: linear-gradient(
+    135deg,
+    var(--color-primary-600) 0%,
+    var(--color-primary-700) 100%
+  );
   border-radius: 0 !important;
   padding: 16px 28px;
   margin-bottom: 0;
@@ -1323,7 +1511,6 @@ watch(lastRegisteredPatient, (newVal) => {
   overflow-y: auto;
 }
 
-
 .header-content {
   flex: 1;
   color: var(--color-neutral-100);
@@ -1519,13 +1706,12 @@ watch(lastRegisteredPatient, (newVal) => {
   right: 12px;
   background-color: rgba(255, 255, 255, 0.2) !important;
   z-index: 10;
-  
+
   &:hover {
     background-color: rgba(255, 255, 255, 0.3) !important;
   }
 }
 
-
 .dialog-header-simple {
   padding: 20px 24px;
   font-size: 18px;
@@ -1970,4 +2156,27 @@ watch(lastRegisteredPatient, (newVal) => {
   text-transform: none;
   font-weight: 600;
 }
+
+.print-ticket-btn {
+  font-size: 20px !important;
+  font-weight: 700 !important;
+  letter-spacing: 0.5px !important;
+  text-transform: uppercase !important;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+}
+
+.finish-btn {
+  font-size: 18px !important;
+  font-weight: 600 !important;
+  text-transform: none !important;
+}
+
+.print-ticket-btn:hover {
+  transform: scale(1.05) translateY(-2px);
+  box-shadow: 0 12px 24px rgba(25, 118, 210, 0.4) !important;
+}
+
+.print-ticket-btn:active {
+  transform: scale(0.98);
+}
 </style>
diff --git a/pages/CheckInPasien/checkIn.vue b/pages/CheckInPasien/checkIn.vue
index 566db15..752fabf 100644
--- a/pages/CheckInPasien/checkIn.vue
+++ b/pages/CheckInPasien/checkIn.vue
@@ -14,1246 +14,1657 @@
     <div class="checkin-page-container">
       <!-- Main Content Grid - Same pattern as AdminLoket.vue -->
       <v-row class="content-grid" dense>
-      <!-- Left Column: QR Scan Card -->
-      <v-col cols="12" md="6" lg="7" class="sticky-column d-flex">
-        <div class="sticky-wrapper" style="width: 100%;">
-          <v-card class="qr-scan-card" elevation="0" style="height: 100%;">
-            <v-card-text class="pa-4 d-flex flex-column" style="height: 100%;">
-              <!-- Status Header -->
-              <div class="status-header mb-3">
-                <div class="status-icon-wrapper">
-                  <v-icon :color="primaryColor" size="20">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-3 compact-alert"
-                            density="compact"
-                          >
-                            <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" role="region" aria-label="Area pemindaian QR code">
-                              <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" role="status" aria-live="polite" aria-atomic="true">
-                                <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" role="region" aria-label="Area pemindaian QR code" aria-live="polite" :aria-busy="cameraChecking">
-                                <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="16">mdi-information</v-icon>
-                                <span class="text-caption">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="x-large"
-                              elevation="2"
-                              @click="startScanning"
-                              @keydown.enter="startScanning"
-                              @keydown.space.prevent="startScanning"
-                              :disabled="!hasCamera && !cameraChecking"
-                              block
-                              tabindex="0"
-                              aria-label="Mulai scan QR code"
-                              style="font-weight: 600; letter-spacing: 0.5px; min-height: 56px;"
-                            >
-                              <v-icon start size="24">mdi-camera</v-icon>
-                              {{ hasCamera ? 'Mulai Scan QR' : 'Kamera Tidak Tersedia' }}
-                            </v-btn>
-                            <v-btn
-                              v-else
-                              class="btn-stop-modern btn-centered"
-                              size="x-large"
-                              elevation="2"
-                              @click="stopScanning"
-                              @keydown.enter="stopScanning"
-                              @keydown.space.prevent="stopScanning"
-                              block
-                              tabindex="0"
-                              aria-label="Stop scan QR code"
-                              style="font-weight: 600; letter-spacing: 0.5px; min-height: 56px;"
-                            >
-                              <v-icon start size="24">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) - Hidden in production -->
-                          <div v-if="false" 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>
-            </v-card-text>
-          </v-card>
-        </div>
-      </v-col>
-
-      <!-- Right Column: Manual Input Card -->
-      <v-col cols="12" md="6" lg="5" class="manual-input-column d-flex">
-        <v-card class="manual-input-card" elevation="0" style="height: 100%; width: 100%;">
-          <v-card-text class="pa-4 d-flex flex-column" style="height: 100%;">
-            <!-- Status Header -->
-            <div class="status-header mb-3">
-              <div class="status-icon-wrapper">
-                <v-icon :color="secondaryColor" size="20">mdi-keyboard</v-icon>
-              </div>
-              <div class="status-text">
-                <h3 class="status-title">Input Manual</h3>
-                <p class="status-subtitle">Masukkan nomor Antrean atau Barcode Pasien</p>
-              </div>
-            </div>
-    
-                          <v-form @submit.prevent="checkInManual" ref="manualForm">
-                            <v-text-field
-                              v-model="manualInput"
-                              label="Nomor Antrean / Barcode Pasien" 
-                              placeholder="Contoh: RA020 atau 26011500001"
-                              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="x-large"
-                              type="submit"
-                              elevation="2"
-                              block
-                              tabindex="0"
-                              aria-label="Check-in sekarang dengan nomor antrean atau barcode pasien"
-                              style="font-weight: 600; letter-spacing: 0.5px; min-height: 56px;"
-                              @keydown.enter.prevent="checkInManual"
-                            >
-                              <v-icon start size="24">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>
-
-                          <!-- Riwayat Check-in -->
-                          <div class="history-section mt-6">
-                            <div class="d-flex align-center justify-space-between mb-4">
-                              <div class="d-flex align-center">
-                                <div class="history-header-icon">
-                                  <v-icon size="24" :color="primaryColor">mdi-history</v-icon>
-                                </div>
-                                <h4 class="text-h6 font-weight-bold ml-3" style="color: #1a1a1a;">
-                                  Riwayat Check-in
-                                </h4>
-                              </div>
-                              <v-chip 
-                                size="small" 
-                                :color="recentHistory.length > 0 ? 'primary' : 'grey-lighten-2'"
-                                variant="flat"
-                                class="font-weight-semibold"
-                              >
-                                {{ recentHistory.length }} item
-                              </v-chip>
-                            </div>
-                            
-                            <div v-if="recentHistory.length > 0" class="recent-history-list">
-                              <!-- Info jumlah data -->
-                              <div v-if="recentHistory.length > recentHistoryItemsPerPage" class="mb-2 text-caption text-grey-darken-1">
-                                Menampilkan {{ (recentHistoryPage - 1) * recentHistoryItemsPerPage + 1 }} - {{ Math.min(recentHistoryPage * recentHistoryItemsPerPage, recentHistory.length) }} dari {{ recentHistory.length }} riwayat
-                              </div>
-                              
-                              <v-card
-                                v-for="(item, index) in paginatedRecentHistory"
-                                :key="index"
-                                variant="flat"
-                                elevation="0"
-                                class="mb-1 history-item-compact"
-                                :class="getStatusClass(item.status)"
-                              >
-                                <v-card-text class="pa-1">
-                                  <div class="history-item-content">
-                                    <!-- Header Row: Status Badge & Time -->
-                                    <div class="d-flex align-center justify-space-between mb-1">
-                                      <div class="d-flex align-center gap-1">
-                                        <div class="history-status-badge" :class="`status-${getStatusColor(item.status)}`">
-                                          <v-icon size="12">{{ getStatusIcon(item.status) }}</v-icon>
-                                        </div>
-                                        <div>
-                                          <div class="history-status-text" :class="`text-${getStatusColor(item.status)}`">
-                                            {{ getStatusText(item.status) }}
-                                          </div>
-                                          <div class="history-method-text">
-                                            {{ item.method }}
-                                          </div>
-                                        </div>
-                                      </div>
-                                      <div class="history-time-badge">
-                                        <v-icon size="10" class="mr-1">mdi-clock-outline</v-icon>
-                                        <span>{{ formatTime(item.checkInTime) }}</span>
-                                      </div>
-                                    </div>
-                                    
-                                    <!-- Content Row: Klinik & Queue Number -->
-                                    <div class="d-flex align-center justify-space-between mb-1 flex-wrap gap-1">
-                                      <div v-if="item.klinik && item.klinik !== 'N/A'" class="history-klinik-badge">
-                                        <v-icon size="10" class="mr-1">mdi-hospital-building</v-icon>
-                                        <span>{{ item.klinik }}</span>
-                                      </div>
-                                      <div v-if="item.klinikQueueNumber || item.queueNumber" class="history-queue-badge">
-                                        <v-icon size="10" class="mr-1">mdi-ticket</v-icon>
-                                        <span class="font-weight-semibold">{{ item.klinikQueueNumber || item.queueNumber }}</span>
-                                      </div>
-                                    </div>
-                                    
-                                    <!-- Footer Row: Patient ID & Payment -->
-                                    <div v-if="item.patientId || (item.pembayaran && item.pembayaran !== 'N/A')" class="d-flex align-center flex-wrap gap-1 pt-1 border-top-history">
-                                      <div v-if="item.patientId" class="history-info-badge">
-                                        <v-icon size="10" class="mr-1">mdi-account-circle</v-icon>
-                                        <span>{{ item.patientId }}</span>
-                                      </div>
-                                      <div v-if="item.pembayaran && item.pembayaran !== 'N/A'" class="history-info-badge">
-                                        <v-icon size="10" class="mr-1">mdi-credit-card</v-icon>
-                                        <span>{{ item.pembayaran }}</span>
-                                      </div>
-                                    </div>
-                                  </div>
-                                </v-card-text>
-                              </v-card>
-                              
-                              <!-- Pagination untuk recent history -->
-                              <div v-if="totalRecentHistoryPages > 1" class="mt-3 d-flex justify-center">
-                                <v-pagination
-                                  v-model="recentHistoryPage"
-                                  :length="totalRecentHistoryPages"
-                                  :total-visible="5"
-                                  color="primary"
-                                  size="small"
-                                  density="compact"
-                                  rounded="circle"
-                                ></v-pagination>
-                              </div>
-                            </div>
-                            
-                            <div v-else class="empty-history-state text-center py-8">
-                              <div class="empty-history-icon mb-4">
-                                <v-icon size="64" color="grey-lighten-1">mdi-history</v-icon>
-                              </div>
-                              <h5 class="text-subtitle-1 font-weight-semibold mb-2" style="color: #4a5568;">
-                                Belum ada riwayat check-in
-                              </h5>
-                              <p class="text-body-2 text-grey mb-4">
-                                Riwayat check-in Anda akan muncul di sini setelah melakukan check-in
-                              </p>
-                            </div>
-                          </div>
-          </v-card-text>
-        </v-card>
-      </v-col>
-    </v-row>
-    <!-- Stats Footer (Horizontal) - Permanent Footer for All Screens -->
-    <v-row class="stats-footer-row" dense>
-      <v-col cols="12">
-        <div class="stats-footer-horizontal">
-          <div class="stat-item-footer-enhanced stat-item-footer-primary" :title="`Total Check-in Hari Ini: ${todayStats.total}`">
-            <div class="stat-icon-footer-enhanced">
-              <v-icon :color="primaryColor" size="18">mdi-calendar-today</v-icon>
-            </div>
-            <div class="stat-content-footer-enhanced">
-              <div class="stat-value-footer-enhanced">{{ todayStats.total }}</div>
-              <div class="stat-label-footer-enhanced">Hari Ini</div>
-            </div>
-          </div>
-          <div class="stat-item-footer-enhanced stat-item-footer-success" :title="`Check-in Berhasil: ${todayStats.success}`">
-            <div class="stat-icon-footer-enhanced">
-              <v-icon color="success" size="18">mdi-check-circle</v-icon>
-            </div>
-            <div class="stat-content-footer-enhanced">
-              <div class="stat-value-footer-enhanced">{{ todayStats.success }}</div>
-              <div class="stat-label-footer-enhanced">Berhasil</div>
-            </div>
-          </div>
-          <div class="stat-item-footer-enhanced stat-item-footer-error" :title="`Check-in Gagal: ${todayStats.failed}`">
-            <div class="stat-icon-footer-enhanced">
-              <v-icon color="error" size="18">mdi-close-circle</v-icon>
-            </div>
-            <div class="stat-content-footer-enhanced">
-              <div class="stat-value-footer-enhanced">{{ todayStats.failed }}</div>
-              <div class="stat-label-footer-enhanced">Gagal</div>
-            </div>
-          </div>
-          <div class="stat-item-footer-enhanced stat-item-footer-info" :title="`Check-in via QR: ${todayStats.qr}`">
-            <div class="stat-icon-footer-enhanced">
-              <v-icon color="info" size="18">mdi-qrcode-scan</v-icon>
-            </div>
-            <div class="stat-content-footer-enhanced">
-              <div class="stat-value-footer-enhanced">{{ todayStats.qr }}</div>
-              <div class="stat-label-footer-enhanced">QR Scan</div>
-            </div>
-          </div>
-          <div class="stat-item-footer-enhanced stat-item-footer-warning" :title="`Check-in Manual: ${todayStats.manual}`">
-            <div class="stat-icon-footer-enhanced">
-              <v-icon color="warning" size="18">mdi-keyboard</v-icon>
-            </div>
-            <div class="stat-content-footer-enhanced">
-              <div class="stat-value-footer-enhanced">{{ todayStats.manual }}</div>
-              <div class="stat-label-footer-enhanced">Manual</div>
-            </div>
-          </div>
-        </div>
-      </v-col>
-    </v-row>
-
-
-    <!-- Generate QR Dialog -->
-            <v-dialog v-model="showGenerateQRDialog" max-width="600px" scrollable>
-              <v-card>
-                <v-card-title class="text-h5 pa-4 bg-primary text-white">
-                  <v-icon class="mr-2" color="white">mdi-qrcode</v-icon>
-                  Generate QR Code untuk Testing
-                </v-card-title>
-                <v-card-text class="pa-6">
-                  <!-- Status Header -->
-                  <div class="mb-4">
-                    <p class="text-body-2 text-grey">Buat QR code yang bisa Anda scan untuk testing check-in</p>
-                  </div>
-
-                  <!-- Quick Preset Buttons -->
-                  <div class="mb-4">
-                    <p class="text-caption text-grey text-center mb-2">Quick Generate:</p>
-                    <v-row dense>
-                      <v-col cols="12">
-                        <v-btn
-                          variant="outlined"
-                          color="primary"
-                          size="small"
-                          @click="generateQRCode"
-                          class="text-none"
-                          block
-                          :disabled="!selectedKlinik"
-                        >
-                          <v-icon start size="16">mdi-qrcode-plus</v-icon>
-                          Generate QR Code dengan Barcode Count
-                        </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="mb-3"
-                      density="comfortable"
-                      :rules="[v => !!v || 'Klinik/Poli harus dipilih']"
-                      hide-details="auto"
-                      required
-                    ></v-select>
-                    
-                    <v-select
-                      v-model="selectedPembayaran"
-                      label="Jenis Pembayaran"
-                      :items="[
-                        { title: 'UMUM', value: 'UMUM' },
-                        { title: 'BPJS', value: 'BPJS' },
-                        { title: 'ASURANSI', value: 'ASURANSI' }
-                      ]"
-                      prepend-inner-icon="mdi-credit-card"
-                      variant="outlined"
-                      :color="primaryColor"
-                      class="mb-3"
-                      density="comfortable"
-                      hide-details="auto"
-                    ></v-select>
-                    
-                    <v-text-field
-                      v-model="generateBarcode"
-                      label="Barcode"
-                      placeholder="Auto-generate berdasarkan tanggal"
-                      prepend-inner-icon="mdi-barcode"
-                      variant="outlined"
-                      :color="primaryColor"
-                      class="mb-3"
-                      density="comfortable"
-                      readonly
-                      hint="Barcode akan di-generate otomatis menggunakan format YYMMDD + 5 digit sequential"
-                      persistent-hint
-                      hide-details="auto"
-                    ></v-text-field>
-                    
-                    <v-text-field
-                      v-model="generateQueueNumber"
-                      label="Nomor Antrean"
-                      placeholder="Auto-generate berdasarkan Klinik dan Pembayaran"
-                      prepend-inner-icon="mdi-ticket"
-                      variant="outlined"
-                      :color="primaryColor"
-                      class="mb-4"
-                      density="comfortable"
-                      readonly
-                      hint="Nomor Antrean akan di-generate otomatis dengan format R/E + Loket + 3 digit"
-                      persistent-hint
-                      hide-details="auto"
-                    ></v-text-field>
-
-                    <div class="d-flex justify-center">
-                      <v-btn
-                        color="primary"
-                        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="mt-6">
-                    <v-card variant="outlined" class="pa-4">
-                      <div class="text-center">
-                        <p class="text-subtitle-2 text-grey mb-3">QR Code Tiket:</p>
-                        <div id="qrcode" class="qr-code-container mb-4"></div>
-                        
-                        <div v-if="generatedPatient" class="mb-3">
-                          <v-chip color="primary" class="mb-2">
-                            <v-icon start size="16">mdi-ticket</v-icon>
-                            Nomor Antrean: {{ generateQueueNumber }}
-                          </v-chip>
-                          <v-chip color="info" class="mb-2 ml-2">
-                            <v-icon start size="16">mdi-barcode</v-icon>
-                            Barcode: {{ generateBarcode }}
-                          </v-chip>
-                        </div>
-
-                        <p class="text-body-2 text-grey mb-4">
-                          QR Code berisi: <strong>{{ generatedQRData }}</strong>
-                        </p>
-
-                        <!-- Action Buttons -->
-                        <v-row dense>
-                          <v-col cols="6">
-                            <v-btn
-                              color="primary"
-                              variant="flat"
-                              block
-                              size="default"
-                              @click="handlePrintTicket"
-                              :loading="isPrinting"
-                              :disabled="isPrinting || !generatedPatient"
-                              class="text-none"
-                            >
-                              <v-icon start size="20">mdi-printer</v-icon>
-                              {{ isPrinting ? 'Mencetak...' : 'Cetak Tiket' }}
-                            </v-btn>
-                          </v-col>
-                          <v-col cols="3">
-                            <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="3">
-                            <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-row>
-                      </div>
-                    </v-card>
-
-                    <!-- Instructions -->
-                    <v-alert
-                      type="success"
-                      variant="tonal"
-                      class="mt-4 text-body-2"
+        <!-- Left Column: QR Scan Card -->
+        <v-col cols="12" md="6" lg="7" class="sticky-column d-flex">
+          <div class="sticky-wrapper" style="width: 100%">
+            <v-card class="qr-scan-card" elevation="0" style="height: 100%">
+              <v-card-text class="pa-4 d-flex flex-column" style="height: 100%">
+                <!-- Status Header -->
+                <div class="status-header mb-3">
+                  <div class="status-icon-wrapper">
+                    <v-icon :color="primaryColor" size="20"
+                      >mdi-qrcode-scan</v-icon
                     >
-                      <template v-slot:prepend>
-                        <v-icon>mdi-information</v-icon>
-                      </template>
-                      <strong>Cara menggunakan:</strong>
-                      <ol class="ml-4 mt-2">
-                        <li>Pilih <strong>Klinik/Poli</strong> dan <strong>Jenis Pembayaran</strong></li>
-                        <li>Klik <strong>"Generate QR Code"</strong> untuk membuat QR code dengan barcode count</li>
-                        <li>Klik <strong>"Cetak Tiket"</strong> untuk mencetak tiket menggunakan thermal printer</li>
-                        <li>Atau gunakan <strong>"Download"</strong> untuk menyimpan QR code sebagai gambar</li>
-                        <li>Scan QR code pada tiket untuk proses check-in</li>
-                      </ol>
-                    </v-alert>
                   </div>
-                </v-card-text>
-                <v-card-actions class="pa-4">
-                  <v-spacer></v-spacer>
-                  <v-btn
-                    color="grey"
-                    variant="text"
-                    @click="showGenerateQRDialog = false"
-                  >
-                    Tutup
-                  </v-btn>
-                </v-card-actions>
-              </v-card>
-            </v-dialog>
-
-
-
-    <!-- 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-6" :class="lastCheckInResult?.success && infoAction === 'checkin' ? 'success-header' : lastCheckInResult?.status === 'NOT_ALLOWED' ? 'warning-header' : lastCheckInResult?.status === 'ALREADY_CHECKED_IN' ? 'warning-header' : 'error-header'">
-          <div class="icon-wrapper mb-3">
-            <div class="icon-bg" :class="lastCheckInResult?.success && infoAction === 'checkin' ? 'icon-bg-success' : lastCheckInResult?.status === 'NOT_ALLOWED' ? 'icon-bg-warning' : lastCheckInResult?.status === 'ALREADY_CHECKED_IN' ? 'icon-bg-warning' : 'icon-bg-error'">
-              <v-icon size="56" color="white" class="dialog-icon">
-                {{ lastCheckInResult?.success && infoAction === 'checkin' ? 'mdi-check-circle' : lastCheckInResult?.status === 'NOT_ALLOWED' ? 'mdi-clock-alert' : lastCheckInResult?.status === 'ALREADY_CHECKED_IN' ? 'mdi-check-circle' : 'mdi-close-circle' }}
-              </v-icon>
-            </div>
-          </div>
-          
-          <h2 class="text-h5 font-weight-bold text-white mb-2">
-            {{ lastCheckInResult?.success && infoAction === 'checkin' 
-              ? 'Check-in Berhasil!' 
-              : lastCheckInResult?.status === 'NOT_ALLOWED'
-              ? 'Belum Diizinkan'
-              : lastCheckInResult?.status === 'ALREADY_CHECKED_IN'
-              ? 'Sudah Check-in'
-              : 'Check-in Gagal' }}
-          </h2>
-          
-          <div class="status-badge mt-2">
-            <v-chip 
-              :color="lastCheckInResult?.success && infoAction === 'checkin' ? 'white' : 'white'" 
-              :text-color="lastCheckInResult?.success && infoAction === 'checkin' ? 'success' : lastCheckInResult?.status === 'NOT_ALLOWED' ? 'orange' : lastCheckInResult?.status === 'ALREADY_CHECKED_IN' ? 'orange' : 'error'"
-              size="small"
-              class="font-weight-bold"
-            >
-              <v-icon start size="14">
-                {{ lastCheckInResult?.success && infoAction === 'checkin' ? 'mdi-check' : lastCheckInResult?.status === 'NOT_ALLOWED' ? 'mdi-clock-alert' : lastCheckInResult?.status === 'ALREADY_CHECKED_IN' ? 'mdi-check-circle' : 'mdi-close-circle' }}
-              </v-icon>
-              {{ lastCheckInResult?.success && infoAction === 'checkin' 
-                ? 'Berhasil' 
-                : lastCheckInResult?.status === 'NOT_ALLOWED'
-                ? 'Menunggu'
-                : lastCheckInResult?.status === 'ALREADY_CHECKED_IN'
-                ? 'Sudah Check-in'
-                : 'Gagal' }}
-            </v-chip>
-          </div>
-        </div>
-        
-        <v-card-text class="pa-5">
-          <div class="message-container">
-            <div class="text-body-1 font-weight-medium mb-4 text-center" style="white-space: pre-line; color: #2d3748;">{{ infoMessage }}</div>
-            
-            <v-divider class="my-4"></v-divider>
-            
-            <div v-if="lastCheckInResult" class="instruction-box pa-3 rounded-lg mb-4" :class="lastCheckInResult.success && infoAction === 'checkin' ? 'instruction-success' : lastCheckInResult?.status === 'ALREADY_CHECKED_IN' ? 'instruction-warning' : 'instruction-warning'">
-              <div class="d-flex align-start">
-                <v-icon :color="lastCheckInResult.success && infoAction === 'checkin' ? 'success' : lastCheckInResult?.status === 'ALREADY_CHECKED_IN' ? 'orange' : 'orange'" class="mr-2 mt-1" size="20">
-                  {{ lastCheckInResult.success && infoAction === 'checkin' ? 'mdi-check-circle' : lastCheckInResult?.status === 'ALREADY_CHECKED_IN' ? 'mdi-check-circle' : 'mdi-timer-sand' }}
-                </v-icon>
-                <div>
-                  <p class="text-body-2 font-weight-medium mb-1">
-                    {{ lastCheckInResult.success && infoAction === 'checkin' ? 'Status Check-in:' : 'Status:' }}
-                  </p>
-                  <p class="text-body-2 text-grey-darken-1 mb-0">
-                    {{ 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'
-                      : lastCheckInResult.status === 'ALREADY_CHECKED_IN'
-                      ? 'Tiket ini sudah melakukan check-in sebelumnya. Tidak perlu check-in ulang.'
-                      : 'Proses check-in gagal. Silakan coba lagi atau hubungi petugas.' }}
-                  </p>
+                  <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>
-            </div>
-            
-            <!-- Patient Info Card -->
-            <v-card variant="outlined" class="patient-info-card" elevation="0">
-              <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" size="20">mdi-barcode</v-icon>
-                    <div>
-                      <p class="text-caption patient-info-label mb-0">Barcode Pasien</p>
-                      <p class="text-body-2 patient-info-value mb-0 font-weight-medium">{{ lastCheckInResult?.patientId || scannedData?.split('|')[0] || 'N/A' }}</p>
+
+                <!-- 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-3 compact-alert"
+                  density="compact"
+                >
+                  <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"
+                    role="region"
+                    aria-label="Area pemindaian QR code"
+                  >
+                    <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"
+                      role="status"
+                      aria-live="polite"
+                      aria-atomic="true"
+                    >
+                      <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"
+                      role="region"
+                      aria-label="Area pemindaian QR code"
+                      aria-live="polite"
+                      :aria-busy="cameraChecking"
+                    >
+                      <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="16"
+                        >mdi-information</v-icon
+                      >
+                      <span class="text-caption"
+                        >Arahkan kamera ke QR code. Pastikan QR code berada
+                        dalam kotak pemindaian.</span
+                      >
                     </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 font-weight-medium">{{ getCurrentTime() }}</p>
-                  </div>
+                </div>
+
+                <!-- Action Button Minimalis -->
+                <div class="action-buttons">
+                  <v-btn
+                    v-if="!isScanning"
+                    class="btn-primary-modern btn-centered"
+                    size="x-large"
+                    elevation="2"
+                    @click="startScanning"
+                    @keydown.enter="startScanning"
+                    @keydown.space.prevent="startScanning"
+                    :disabled="!hasCamera && !cameraChecking"
+                    block
+                    tabindex="0"
+                    aria-label="Mulai scan QR code"
+                    style="
+                      font-weight: 600;
+                      letter-spacing: 0.5px;
+                      min-height: 56px;
+                    "
+                  >
+                    <v-icon start size="24">mdi-camera</v-icon>
+                    {{ hasCamera ? "Mulai Scan QR" : "Kamera Tidak Tersedia" }}
+                  </v-btn>
+                  <v-btn
+                    v-else
+                    class="btn-stop-modern btn-centered"
+                    size="x-large"
+                    elevation="2"
+                    @click="stopScanning"
+                    @keydown.enter="stopScanning"
+                    @keydown.space.prevent="stopScanning"
+                    block
+                    tabindex="0"
+                    aria-label="Stop scan QR code"
+                    style="
+                      font-weight: 600;
+                      letter-spacing: 0.5px;
+                      min-height: 56px;
+                    "
+                  >
+                    <v-icon start size="24">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) - Hidden in production -->
+                <div v-if="false" 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>
               </v-card-text>
             </v-card>
           </div>
-        </v-card-text>
-        
-        <v-card-actions class="pa-3 pt-0">
-          <v-row dense>
-            <v-col v-if="infoAction === 'kembali'" cols="12">
-              <v-btn
-                color="grey-darken-1"
-                class="text-white font-weight-semibold text-none dialog-button"
-                size="large"
-                block
-                variant="flat"
-                @click="handleInfoAction"
-                elevation="0"
-                prepend-icon="mdi-arrow-left"
-                rounded="lg"
-              >
-                Kembali
-              </v-btn>
-            </v-col>
-            <template v-else>
-              <v-col cols="12">
+        </v-col>
+
+        <!-- Right Column: Manual Input Card -->
+        <v-col cols="12" md="6" lg="5" class="manual-input-column d-flex">
+          <v-card
+            class="manual-input-card"
+            elevation="0"
+            style="height: 100%; width: 100%"
+          >
+            <v-card-text class="pa-4 d-flex flex-column" style="height: 100%">
+              <!-- Status Header -->
+              <div class="status-header mb-3">
+                <div class="status-icon-wrapper">
+                  <v-icon :color="secondaryColor" size="20"
+                    >mdi-keyboard</v-icon
+                  >
+                </div>
+                <div class="status-text">
+                  <h3 class="status-title">Input Manual</h3>
+                  <p class="status-subtitle">
+                    Masukkan nomor Antrean atau Barcode Pasien
+                  </p>
+                </div>
+              </div>
+
+              <v-form @submit.prevent="checkInManual" ref="manualForm">
+                <v-text-field
+                  v-model="manualInput"
+                  label="Nomor Antrean / Barcode Pasien"
+                  placeholder="Contoh: RA020 atau 26011500001"
+                  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
-                  :color="lastCheckInResult?.success && infoAction === 'checkin' ? 'success' : 'primary'"
+                  class="btn-primary-modern btn-centered"
+                  size="x-large"
+                  type="submit"
+                  elevation="2"
+                  block
+                  tabindex="0"
+                  aria-label="Check-in sekarang dengan nomor antrean atau barcode pasien"
+                  style="
+                    font-weight: 600;
+                    letter-spacing: 0.5px;
+                    min-height: 56px;
+                  "
+                  @keydown.enter.prevent="checkInManual"
+                >
+                  <v-icon start size="24">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>
+
+              <!-- Riwayat Check-in -->
+              <div class="history-section mt-6">
+                <div class="d-flex align-center justify-space-between mb-4">
+                  <div class="d-flex align-center">
+                    <div class="history-header-icon">
+                      <v-icon size="24" :color="primaryColor"
+                        >mdi-history</v-icon
+                      >
+                    </div>
+                    <h4
+                      class="text-h6 font-weight-bold ml-3"
+                      style="color: #1a1a1a"
+                    >
+                      Riwayat Check-in
+                    </h4>
+                  </div>
+                  <v-chip
+                    size="small"
+                    :color="
+                      recentHistory.length > 0 ? 'primary' : 'grey-lighten-2'
+                    "
+                    variant="flat"
+                    class="font-weight-semibold"
+                  >
+                    {{ recentHistory.length }} item
+                  </v-chip>
+                </div>
+
+                <div
+                  v-if="recentHistory.length > 0"
+                  class="recent-history-list"
+                >
+                  <!-- Info jumlah data -->
+                  <div
+                    v-if="recentHistory.length > recentHistoryItemsPerPage"
+                    class="mb-2 text-caption text-grey-darken-1"
+                  >
+                    Menampilkan
+                    {{
+                      (recentHistoryPage - 1) * recentHistoryItemsPerPage + 1
+                    }}
+                    -
+                    {{
+                      Math.min(
+                        recentHistoryPage * recentHistoryItemsPerPage,
+                        recentHistory.length,
+                      )
+                    }}
+                    dari {{ recentHistory.length }} riwayat
+                  </div>
+
+                  <v-card
+                    v-for="(item, index) in paginatedRecentHistory"
+                    :key="index"
+                    variant="flat"
+                    elevation="0"
+                    class="mb-1 history-item-compact"
+                    :class="getStatusClass(item.status)"
+                  >
+                    <v-card-text class="pa-1">
+                      <div class="history-item-content">
+                        <!-- Header Row: Status Badge & Time -->
+                        <div
+                          class="d-flex align-center justify-space-between mb-1"
+                        >
+                          <div class="d-flex align-center gap-1">
+                            <div
+                              class="history-status-badge"
+                              :class="`status-${getStatusColor(item.status)}`"
+                            >
+                              <v-icon size="12">{{
+                                getStatusIcon(item.status)
+                              }}</v-icon>
+                            </div>
+                            <div>
+                              <div
+                                class="history-status-text"
+                                :class="`text-${getStatusColor(item.status)}`"
+                              >
+                                {{ getStatusText(item.status) }}
+                              </div>
+                              <div class="history-method-text">
+                                {{ item.method }}
+                              </div>
+                            </div>
+                          </div>
+                          <div class="history-time-badge">
+                            <v-icon size="10" class="mr-1"
+                              >mdi-clock-outline</v-icon
+                            >
+                            <span>{{ formatTime(item.checkInTime) }}</span>
+                          </div>
+                        </div>
+
+                        <!-- Content Row: Klinik & Queue Number -->
+                        <div
+                          class="d-flex align-center justify-space-between mb-1 flex-wrap gap-1"
+                        >
+                          <div
+                            v-if="item.klinik && item.klinik !== 'N/A'"
+                            class="history-klinik-badge"
+                          >
+                            <v-icon size="10" class="mr-1"
+                              >mdi-hospital-building</v-icon
+                            >
+                            <span>{{ item.klinik }}</span>
+                          </div>
+                          <div
+                            v-if="item.klinikQueueNumber || item.queueNumber"
+                            class="history-queue-badge"
+                          >
+                            <v-icon size="10" class="mr-1">mdi-ticket</v-icon>
+                            <span class="font-weight-semibold">{{
+                              item.klinikQueueNumber || item.queueNumber
+                            }}</span>
+                          </div>
+                        </div>
+
+                        <!-- Footer Row: Patient ID & Payment -->
+                        <div
+                          v-if="
+                            item.patientId ||
+                            (item.pembayaran && item.pembayaran !== 'N/A')
+                          "
+                          class="d-flex align-center flex-wrap gap-1 pt-1 border-top-history"
+                        >
+                          <div v-if="item.patientId" class="history-info-badge">
+                            <v-icon size="10" class="mr-1"
+                              >mdi-account-circle</v-icon
+                            >
+                            <span>{{ item.patientId }}</span>
+                          </div>
+                          <div
+                            v-if="item.pembayaran && item.pembayaran !== 'N/A'"
+                            class="history-info-badge"
+                          >
+                            <v-icon size="10" class="mr-1"
+                              >mdi-credit-card</v-icon
+                            >
+                            <span>{{ item.pembayaran }}</span>
+                          </div>
+                        </div>
+                      </div>
+                    </v-card-text>
+                  </v-card>
+
+                  <!-- Pagination untuk recent history -->
+                  <div
+                    v-if="totalRecentHistoryPages > 1"
+                    class="mt-3 d-flex justify-center"
+                  >
+                    <v-pagination
+                      v-model="recentHistoryPage"
+                      :length="totalRecentHistoryPages"
+                      :total-visible="5"
+                      color="primary"
+                      size="small"
+                      density="compact"
+                      rounded="circle"
+                    ></v-pagination>
+                  </div>
+                </div>
+
+                <div v-else class="empty-history-state text-center py-8">
+                  <div class="empty-history-icon mb-4">
+                    <v-icon size="64" color="grey-lighten-1"
+                      >mdi-history</v-icon
+                    >
+                  </div>
+                  <h5
+                    class="text-subtitle-1 font-weight-semibold mb-2"
+                    style="color: #4a5568"
+                  >
+                    Belum ada riwayat check-in
+                  </h5>
+                  <p class="text-body-2 text-grey mb-4">
+                    Riwayat check-in Anda akan muncul di sini setelah melakukan
+                    check-in
+                  </p>
+                </div>
+              </div>
+            </v-card-text>
+          </v-card>
+        </v-col>
+      </v-row>
+      <!-- Stats Footer (Horizontal) - Permanent Footer for All Screens -->
+      <v-row class="stats-footer-row" dense>
+        <v-col cols="12">
+          <div class="stats-footer-horizontal">
+            <div
+              class="stat-item-footer-enhanced stat-item-footer-primary"
+              :title="`Total Check-in Hari Ini: ${todayStats.total}`"
+            >
+              <div class="stat-icon-footer-enhanced">
+                <v-icon :color="primaryColor" size="18"
+                  >mdi-calendar-today</v-icon
+                >
+              </div>
+              <div class="stat-content-footer-enhanced">
+                <div class="stat-value-footer-enhanced">
+                  {{ todayStats.total }}
+                </div>
+                <div class="stat-label-footer-enhanced">Hari Ini</div>
+              </div>
+            </div>
+            <div
+              class="stat-item-footer-enhanced stat-item-footer-success"
+              :title="`Check-in Berhasil: ${todayStats.success}`"
+            >
+              <div class="stat-icon-footer-enhanced">
+                <v-icon color="success" size="18">mdi-check-circle</v-icon>
+              </div>
+              <div class="stat-content-footer-enhanced">
+                <div class="stat-value-footer-enhanced">
+                  {{ todayStats.success }}
+                </div>
+                <div class="stat-label-footer-enhanced">Berhasil</div>
+              </div>
+            </div>
+            <div
+              class="stat-item-footer-enhanced stat-item-footer-error"
+              :title="`Check-in Gagal: ${todayStats.failed}`"
+            >
+              <div class="stat-icon-footer-enhanced">
+                <v-icon color="error" size="18">mdi-close-circle</v-icon>
+              </div>
+              <div class="stat-content-footer-enhanced">
+                <div class="stat-value-footer-enhanced">
+                  {{ todayStats.failed }}
+                </div>
+                <div class="stat-label-footer-enhanced">Gagal</div>
+              </div>
+            </div>
+            <div
+              class="stat-item-footer-enhanced stat-item-footer-info"
+              :title="`Check-in via QR: ${todayStats.qr}`"
+            >
+              <div class="stat-icon-footer-enhanced">
+                <v-icon color="info" size="18">mdi-qrcode-scan</v-icon>
+              </div>
+              <div class="stat-content-footer-enhanced">
+                <div class="stat-value-footer-enhanced">
+                  {{ todayStats.qr }}
+                </div>
+                <div class="stat-label-footer-enhanced">QR Scan</div>
+              </div>
+            </div>
+            <div
+              class="stat-item-footer-enhanced stat-item-footer-warning"
+              :title="`Check-in Manual: ${todayStats.manual}`"
+            >
+              <div class="stat-icon-footer-enhanced">
+                <v-icon color="warning" size="18">mdi-keyboard</v-icon>
+              </div>
+              <div class="stat-content-footer-enhanced">
+                <div class="stat-value-footer-enhanced">
+                  {{ todayStats.manual }}
+                </div>
+                <div class="stat-label-footer-enhanced">Manual</div>
+              </div>
+            </div>
+          </div>
+        </v-col>
+      </v-row>
+
+      <!-- Generate QR Dialog -->
+      <v-dialog v-model="showGenerateQRDialog" max-width="600px" scrollable>
+        <v-card>
+          <v-card-title class="text-h5 pa-4 bg-primary text-white">
+            <v-icon class="mr-2" color="white">mdi-qrcode</v-icon>
+            Generate QR Code untuk Testing
+          </v-card-title>
+          <v-card-text class="pa-6">
+            <!-- Status Header -->
+            <div class="mb-4">
+              <p class="text-body-2 text-grey">
+                Buat QR code yang bisa Anda scan untuk testing check-in
+              </p>
+            </div>
+
+            <!-- Quick Preset Buttons -->
+            <div class="mb-4">
+              <p class="text-caption text-grey text-center mb-2">
+                Quick Generate:
+              </p>
+              <v-row dense>
+                <v-col cols="12">
+                  <v-btn
+                    variant="outlined"
+                    color="primary"
+                    size="small"
+                    @click="generateQRCode"
+                    class="text-none"
+                    block
+                    :disabled="!selectedKlinik"
+                  >
+                    <v-icon start size="16">mdi-qrcode-plus</v-icon>
+                    Generate QR Code dengan Barcode Count
+                  </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="mb-3"
+                density="comfortable"
+                :rules="[(v) => !!v || 'Klinik/Poli harus dipilih']"
+                hide-details="auto"
+                required
+              ></v-select>
+
+              <v-select
+                v-model="selectedPembayaran"
+                label="Jenis Pembayaran"
+                :items="[
+                  { title: 'UMUM', value: 'UMUM' },
+                  { title: 'BPJS', value: 'BPJS' },
+                  { title: 'ASURANSI', value: 'ASURANSI' },
+                ]"
+                prepend-inner-icon="mdi-credit-card"
+                variant="outlined"
+                :color="primaryColor"
+                class="mb-3"
+                density="comfortable"
+                hide-details="auto"
+              ></v-select>
+
+              <v-text-field
+                v-model="generateBarcode"
+                label="Barcode"
+                placeholder="Auto-generate berdasarkan tanggal"
+                prepend-inner-icon="mdi-barcode"
+                variant="outlined"
+                :color="primaryColor"
+                class="mb-3"
+                density="comfortable"
+                readonly
+                hint="Barcode akan di-generate otomatis menggunakan format YYMMDD + 5 digit sequential"
+                persistent-hint
+                hide-details="auto"
+              ></v-text-field>
+
+              <v-text-field
+                v-model="generateQueueNumber"
+                label="Nomor Antrean"
+                placeholder="Auto-generate berdasarkan Klinik dan Pembayaran"
+                prepend-inner-icon="mdi-ticket"
+                variant="outlined"
+                :color="primaryColor"
+                class="mb-4"
+                density="comfortable"
+                readonly
+                hint="Nomor Antrean akan di-generate otomatis dengan format R/E + Loket + 3 digit"
+                persistent-hint
+                hide-details="auto"
+              ></v-text-field>
+
+              <div class="d-flex justify-center">
+                <v-btn
+                  color="primary"
+                  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="mt-6">
+              <v-card variant="outlined" class="pa-4">
+                <div class="text-center">
+                  <p class="text-subtitle-2 text-grey mb-3">QR Code Tiket:</p>
+                  <div id="qrcode" class="qr-code-container mb-4"></div>
+
+                  <div v-if="generatedPatient" class="mb-3">
+                    <v-chip color="primary" class="mb-2">
+                      <v-icon start size="16">mdi-ticket</v-icon>
+                      Nomor Antrean: {{ generateQueueNumber }}
+                    </v-chip>
+                    <v-chip color="info" class="mb-2 ml-2">
+                      <v-icon start size="16">mdi-barcode</v-icon>
+                      Barcode: {{ generateBarcode }}
+                    </v-chip>
+                  </div>
+
+                  <p class="text-body-2 text-grey mb-4">
+                    QR Code berisi: <strong>{{ generatedQRData }}</strong>
+                  </p>
+
+                  <!-- Action Buttons -->
+                  <v-row dense>
+                    <v-col cols="6">
+                      <v-btn
+                        color="primary"
+                        variant="flat"
+                        block
+                        size="default"
+                        @click="handlePrintTicket"
+                        :loading="isPrinting"
+                        :disabled="isPrinting || !generatedPatient"
+                        class="text-none"
+                      >
+                        <v-icon start size="20">mdi-printer</v-icon>
+                        {{ isPrinting ? "Mencetak..." : "Cetak Tiket" }}
+                      </v-btn>
+                    </v-col>
+                    <v-col cols="3">
+                      <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="3">
+                      <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-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:</strong>
+                <ol class="ml-4 mt-2">
+                  <li>
+                    Pilih <strong>Klinik/Poli</strong> dan
+                    <strong>Jenis Pembayaran</strong>
+                  </li>
+                  <li>
+                    Klik <strong>"Generate QR Code"</strong> untuk membuat QR
+                    code dengan barcode count
+                  </li>
+                  <li>
+                    Klik <strong>"Cetak Tiket"</strong> untuk mencetak tiket
+                    menggunakan thermal printer
+                  </li>
+                  <li>
+                    Atau gunakan <strong>"Download"</strong> untuk menyimpan QR
+                    code sebagai gambar
+                  </li>
+                  <li>Scan QR code pada tiket untuk proses check-in</li>
+                </ol>
+              </v-alert>
+            </div>
+          </v-card-text>
+          <v-card-actions class="pa-4">
+            <v-spacer></v-spacer>
+            <v-btn
+              color="grey"
+              variant="text"
+              @click="showGenerateQRDialog = false"
+            >
+              Tutup
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+
+      <!-- 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-6"
+            :class="
+              lastCheckInResult?.success && infoAction === 'checkin'
+                ? 'success-header'
+                : lastCheckInResult?.status === 'NOT_ALLOWED'
+                  ? 'warning-header'
+                  : lastCheckInResult?.status === 'ALREADY_CHECKED_IN'
+                    ? 'warning-header'
+                    : 'error-header'
+            "
+          >
+            <div class="icon-wrapper mb-3">
+              <div
+                class="icon-bg"
+                :class="
+                  lastCheckInResult?.success && infoAction === 'checkin'
+                    ? 'icon-bg-success'
+                    : lastCheckInResult?.status === 'NOT_ALLOWED'
+                      ? 'icon-bg-warning'
+                      : lastCheckInResult?.status === 'ALREADY_CHECKED_IN'
+                        ? 'icon-bg-warning'
+                        : 'icon-bg-error'
+                "
+              >
+                <v-icon size="56" color="white" class="dialog-icon">
+                  {{
+                    lastCheckInResult?.success && infoAction === "checkin"
+                      ? "mdi-check-circle"
+                      : lastCheckInResult?.status === "NOT_ALLOWED"
+                        ? "mdi-clock-alert"
+                        : lastCheckInResult?.status === "ALREADY_CHECKED_IN"
+                          ? "mdi-check-circle"
+                          : "mdi-close-circle"
+                  }}
+                </v-icon>
+              </div>
+            </div>
+
+            <h2 class="text-h5 font-weight-bold text-white mb-2">
+              {{
+                lastCheckInResult?.success && infoAction === "checkin"
+                  ? "Check-in Berhasil!"
+                  : lastCheckInResult?.status === "NOT_ALLOWED"
+                    ? "Belum Diizinkan"
+                    : lastCheckInResult?.status === "ALREADY_CHECKED_IN"
+                      ? "Sudah Check-in"
+                      : "Check-in Gagal"
+              }}
+            </h2>
+
+            <div class="status-badge mt-2">
+              <v-chip
+                :color="
+                  lastCheckInResult?.success && infoAction === 'checkin'
+                    ? 'white'
+                    : 'white'
+                "
+                :text-color="
+                  lastCheckInResult?.success && infoAction === 'checkin'
+                    ? 'success'
+                    : lastCheckInResult?.status === 'NOT_ALLOWED'
+                      ? 'orange'
+                      : lastCheckInResult?.status === 'ALREADY_CHECKED_IN'
+                        ? 'orange'
+                        : 'error'
+                "
+                size="small"
+                class="font-weight-bold"
+              >
+                <v-icon start size="14">
+                  {{
+                    lastCheckInResult?.success && infoAction === "checkin"
+                      ? "mdi-check"
+                      : lastCheckInResult?.status === "NOT_ALLOWED"
+                        ? "mdi-clock-alert"
+                        : lastCheckInResult?.status === "ALREADY_CHECKED_IN"
+                          ? "mdi-check-circle"
+                          : "mdi-close-circle"
+                  }}
+                </v-icon>
+                {{
+                  lastCheckInResult?.success && infoAction === "checkin"
+                    ? "Berhasil"
+                    : lastCheckInResult?.status === "NOT_ALLOWED"
+                      ? "Menunggu"
+                      : lastCheckInResult?.status === "ALREADY_CHECKED_IN"
+                        ? "Sudah Check-in"
+                        : "Gagal"
+                }}
+              </v-chip>
+            </div>
+          </div>
+
+          <v-card-text class="pa-5">
+            <div class="message-container">
+              <div
+                class="text-body-1 font-weight-medium mb-4 text-center"
+                style="white-space: pre-line; color: #2d3748"
+              >
+                {{ infoMessage }}
+              </div>
+
+              <v-divider class="my-4"></v-divider>
+
+              <div
+                v-if="lastCheckInResult"
+                class="instruction-box pa-3 rounded-lg mb-4"
+                :class="
+                  lastCheckInResult.success && infoAction === 'checkin'
+                    ? 'instruction-success'
+                    : lastCheckInResult?.status === 'ALREADY_CHECKED_IN'
+                      ? 'instruction-warning'
+                      : 'instruction-warning'
+                "
+              >
+                <div class="d-flex align-start">
+                  <v-icon
+                    :color="
+                      lastCheckInResult.success && infoAction === 'checkin'
+                        ? 'success'
+                        : lastCheckInResult?.status === 'ALREADY_CHECKED_IN'
+                          ? 'orange'
+                          : 'orange'
+                    "
+                    class="mr-2 mt-1"
+                    size="20"
+                  >
+                    {{
+                      lastCheckInResult.success && infoAction === "checkin"
+                        ? "mdi-check-circle"
+                        : lastCheckInResult?.status === "ALREADY_CHECKED_IN"
+                          ? "mdi-check-circle"
+                          : "mdi-timer-sand"
+                    }}
+                  </v-icon>
+                  <div>
+                    <p class="text-body-2 font-weight-medium mb-1">
+                      {{
+                        lastCheckInResult.success && infoAction === "checkin"
+                          ? "Status Check-in:"
+                          : "Status:"
+                      }}
+                    </p>
+                    <p class="text-body-2 text-grey-darken-1 mb-0">
+                      {{
+                        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"
+                            : lastCheckInResult.status === "ALREADY_CHECKED_IN"
+                              ? "Tiket ini sudah melakukan check-in sebelumnya. Tidak perlu check-in ulang."
+                              : "Proses check-in gagal. Silakan coba lagi atau hubungi petugas."
+                      }}
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Patient Info Card -->
+              <v-card
+                variant="outlined"
+                class="patient-info-card"
+                elevation="0"
+              >
+                <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"
+                        size="20"
+                        >mdi-barcode</v-icon
+                      >
+                      <div>
+                        <p class="text-caption patient-info-label mb-0">
+                          Barcode Pasien
+                        </p>
+                        <p
+                          class="text-body-2 patient-info-value mb-0 font-weight-medium"
+                        >
+                          {{
+                            lastCheckInResult?.patientId ||
+                            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 font-weight-medium"
+                      >
+                        {{ getCurrentTime() }}
+                      </p>
+                    </div>
+                  </div>
+                </v-card-text>
+              </v-card>
+            </div>
+          </v-card-text>
+
+          <v-card-actions class="pa-3 pt-0">
+            <v-row dense>
+              <v-col v-if="infoAction === 'kembali'" cols="12">
+                <v-btn
+                  color="grey-darken-1"
                   class="text-white font-weight-semibold text-none dialog-button"
                   size="large"
                   block
                   variant="flat"
                   @click="handleInfoAction"
-                  elevation="2"
-                  :prepend-icon="lastCheckInResult?.success && infoAction === 'checkin' ? 'mdi-check' : 'mdi-close'"
+                  elevation="0"
+                  prepend-icon="mdi-arrow-left"
                   rounded="lg"
                 >
-                  Tutup
+                  Kembali
                 </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-5" style="background: linear-gradient(135deg, #1565C0 0%, #0D47A1 100%);">
-          <h2 class="text-h5 font-weight-bold text-white mb-1">
-            <v-icon color="white" class="mr-2" size="24">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-3">
-          <!-- Header Stats -->
-          <div class="history-header-stats mb-3">
-            <div class="history-header-title mb-2">
-              <h3 class="text-subtitle-1 font-weight-bold d-flex align-center">
-                <v-icon size="20" class="mr-2" color="primary">mdi-history</v-icon>
-                Riwayat Check-in
-              </h3>
-            </div>
-            <v-row dense>
-              <v-col cols="6" md="3">
-                <div class="stat-card-header">
-                  <div class="stat-icon-header stat-icon-total">
-                    <v-icon size="20">mdi-history</v-icon>
-                  </div>
-                  <div class="stat-content-header">
-                    <div class="stat-value-header">{{ checkInHistory.length }}</div>
-                    <div class="stat-label-header">Total</div>
-                  </div>
-                </div>
-              </v-col>
-              <v-col cols="6" md="3">
-                <div class="stat-card-header">
-                  <div class="stat-icon-header stat-icon-success">
-                    <v-icon size="20">mdi-check-circle</v-icon>
-                  </div>
-                  <div class="stat-content-header">
-                    <div class="stat-value-header">{{ checkInHistory.filter(item => item.status === 'success' || item.status === 'ALLOWED').length }}</div>
-                    <div class="stat-label-header">Berhasil</div>
-                  </div>
-                </div>
-              </v-col>
-              <v-col cols="6" md="3">
-                <div class="stat-card-header">
-                  <div class="stat-icon-header stat-icon-failed">
-                    <v-icon size="20">mdi-close-circle</v-icon>
-                  </div>
-                  <div class="stat-content-header">
-                    <div class="stat-value-header">{{ checkInHistory.filter(item => item.status === 'failed' || item.status === 'NOT_ALLOWED').length }}</div>
-                    <div class="stat-label-header">Gagal</div>
-                  </div>
-                </div>
-              </v-col>
-              <v-col cols="6" md="3">
-                <div class="stat-card-header">
-                  <div class="stat-icon-header stat-icon-filtered">
-                    <v-icon size="20">mdi-filter</v-icon>
-                  </div>
-                  <div class="stat-content-header">
-                    <div class="stat-value-header">{{ filteredHistory.length }}</div>
-                    <div class="stat-label-header">Tersaring</div>
-                  </div>
-                </div>
-              </v-col>
+              <template v-else>
+                <v-col cols="12">
+                  <v-btn
+                    :color="
+                      lastCheckInResult?.success && infoAction === 'checkin'
+                        ? 'success'
+                        : 'primary'
+                    "
+                    class="text-white font-weight-semibold text-none dialog-button"
+                    size="large"
+                    block
+                    variant="flat"
+                    @click="handleInfoAction"
+                    elevation="2"
+                    :prepend-icon="
+                      lastCheckInResult?.success && infoAction === 'checkin'
+                        ? 'mdi-check'
+                        : 'mdi-close'
+                    "
+                    rounded="lg"
+                  >
+                    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-5"
+            style="
+              background: linear-gradient(135deg, #1565c0 0%, #0d47a1 100%);
+            "
+          >
+            <h2 class="text-h5 font-weight-bold text-white mb-1">
+              <v-icon color="white" class="mr-2" size="24">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>
 
-          <!-- Filter dan Search -->
-          <div class="mb-3">
-            <v-row dense>
-              <v-col cols="12" md="6">
-                <v-text-field
-                  v-model="historySearch"
-                  label="Cari ID Pasien, Nomor Antrean, atau Klinik"
-                  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-card-text class="pa-3">
+            <!-- Header Stats -->
+            <div class="history-header-stats mb-3">
+              <div class="history-header-title mb-2">
+                <h3
+                  class="text-subtitle-1 font-weight-bold d-flex align-center"
                 >
-                  <v-icon start>mdi-delete</v-icon>
-                  Hapus Semua
-                </v-btn>
-              </v-col>
-            </v-row>
+                  <v-icon size="20" class="mr-2" color="primary"
+                    >mdi-history</v-icon
+                  >
+                  Riwayat Check-in
+                </h3>
+              </div>
+              <v-row dense>
+                <v-col cols="6" md="3">
+                  <div class="stat-card-header">
+                    <div class="stat-icon-header stat-icon-total">
+                      <v-icon size="20">mdi-history</v-icon>
+                    </div>
+                    <div class="stat-content-header">
+                      <div class="stat-value-header">
+                        {{ checkInHistory.length }}
+                      </div>
+                      <div class="stat-label-header">Total</div>
+                    </div>
+                  </div>
+                </v-col>
+                <v-col cols="6" md="3">
+                  <div class="stat-card-header">
+                    <div class="stat-icon-header stat-icon-success">
+                      <v-icon size="20">mdi-check-circle</v-icon>
+                    </div>
+                    <div class="stat-content-header">
+                      <div class="stat-value-header">
+                        {{
+                          checkInHistory.filter(
+                            (item) =>
+                              item.status === "success" ||
+                              item.status === "ALLOWED",
+                          ).length
+                        }}
+                      </div>
+                      <div class="stat-label-header">Berhasil</div>
+                    </div>
+                  </div>
+                </v-col>
+                <v-col cols="6" md="3">
+                  <div class="stat-card-header">
+                    <div class="stat-icon-header stat-icon-failed">
+                      <v-icon size="20">mdi-close-circle</v-icon>
+                    </div>
+                    <div class="stat-content-header">
+                      <div class="stat-value-header">
+                        {{
+                          checkInHistory.filter(
+                            (item) =>
+                              item.status === "failed" ||
+                              item.status === "NOT_ALLOWED",
+                          ).length
+                        }}
+                      </div>
+                      <div class="stat-label-header">Gagal</div>
+                    </div>
+                  </div>
+                </v-col>
+                <v-col cols="6" md="3">
+                  <div class="stat-card-header">
+                    <div class="stat-icon-header stat-icon-filtered">
+                      <v-icon size="20">mdi-filter</v-icon>
+                    </div>
+                    <div class="stat-content-header">
+                      <div class="stat-value-header">
+                        {{ filteredHistory.length }}
+                      </div>
+                      <div class="stat-label-header">Tersaring</div>
+                    </div>
+                  </div>
+                </v-col>
+              </v-row>
+            </div>
+
+            <!-- Filter dan Search -->
+            <div class="mb-3">
+              <v-row dense>
+                <v-col cols="12" md="6">
+                  <v-text-field
+                    v-model="historySearch"
+                    label="Cari ID Pasien, Nomor Antrean, atau Klinik"
+                    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">
+              <!-- Info jumlah data -->
+              <div class="mb-2 text-body-2 text-grey-darken-1">
+                Menampilkan {{ (historyPage - 1) * historyItemsPerPage + 1 }} -
+                {{
+                  Math.min(
+                    historyPage * historyItemsPerPage,
+                    filteredHistory.length,
+                  )
+                }}
+                dari {{ filteredHistory.length }} riwayat
+              </div>
+
+              <div class="history-list">
+                <v-card
+                  v-for="(item, index) in paginatedHistory"
+                  :key="index"
+                  variant="flat"
+                  elevation="0"
+                  class="mb-1 history-item-dialog"
+                  :class="getStatusClass(item.status)"
+                >
+                  <v-card-text class="pa-2">
+                    <div class="d-flex justify-space-between align-start">
+                      <div class="flex-grow-1">
+                        <!-- Header: Status & Method -->
+                        <div class="d-flex align-center mb-1 gap-1">
+                          <div
+                            class="history-status-badge-dialog"
+                            :class="`status-${getStatusColor(item.status)}`"
+                          >
+                            <v-icon size="14">{{
+                              getStatusIcon(item.status)
+                            }}</v-icon>
+                          </div>
+                          <div>
+                            <div
+                              class="history-status-text-dialog"
+                              :class="`text-${getStatusColor(item.status)}`"
+                            >
+                              {{ getStatusText(item.status) }}
+                            </div>
+                            <div class="history-method-text-dialog">
+                              {{ item.method }}
+                            </div>
+                          </div>
+                        </div>
+
+                        <!-- Queue Number -->
+                        <div
+                          v-if="item.klinikQueueNumber || item.queueNumber"
+                          class="mb-1"
+                        >
+                          <div class="history-queue-badge-dialog">
+                            <v-icon size="12" class="mr-1">mdi-ticket</v-icon>
+                            <span class="font-weight-semibold">{{
+                              item.klinikQueueNumber || item.queueNumber
+                            }}</span>
+                          </div>
+                        </div>
+
+                        <!-- Info Badges: Patient ID, Klinik & Pembayaran -->
+                        <div class="d-flex flex-wrap gap-1 mb-1">
+                          <div
+                            v-if="item.patientId"
+                            class="history-info-badge-dialog"
+                          >
+                            <v-icon size="12" class="mr-1"
+                              >mdi-account-circle</v-icon
+                            >
+                            <span>{{ item.patientId }}</span>
+                          </div>
+                          <div
+                            v-if="item.klinik && item.klinik !== 'N/A'"
+                            class="history-klinik-badge-dialog"
+                          >
+                            <v-icon size="12" class="mr-1"
+                              >mdi-hospital-building</v-icon
+                            >
+                            <span>{{ item.klinik }}</span>
+                          </div>
+                          <div
+                            v-if="item.pembayaran"
+                            class="history-payment-badge-dialog"
+                          >
+                            <v-icon size="12" class="mr-1"
+                              >mdi-credit-card</v-icon
+                            >
+                            <span>{{ item.pembayaran }}</span>
+                          </div>
+                        </div>
+
+                        <!-- Time Info -->
+                        <div class="d-flex flex-wrap gap-1">
+                          <div class="history-time-badge-dialog">
+                            <v-icon size="10" class="mr-1"
+                              >mdi-clock-outline</v-icon
+                            >
+                            <span>{{ formatDateTime(item.checkInTime) }}</span>
+                          </div>
+                          <div
+                            v-if="item.checkInDate"
+                            class="history-time-badge-dialog"
+                          >
+                            <v-icon size="10" class="mr-1">mdi-calendar</v-icon>
+                            <span>{{ formatDate(item.checkInDate) }}</span>
+                          </div>
+                        </div>
+                      </div>
+
+                      <div class="ml-2">
+                        <v-btn
+                          icon
+                          size="small"
+                          variant="text"
+                          color="error"
+                          @click="deleteHistoryItem(index)"
+                          class="history-delete-btn"
+                        >
+                          <v-icon size="18">mdi-delete-outline</v-icon>
+                        </v-btn>
+                      </div>
+                    </div>
+                  </v-card-text>
+                </v-card>
+              </div>
+
+              <!-- Pagination -->
+              <div
+                v-if="totalHistoryPages > 1"
+                class="mt-3 d-flex justify-center"
+              >
+                <v-pagination
+                  v-model="historyPage"
+                  :length="totalHistoryPages"
+                  :total-visible="7"
+                  color="primary"
+                  rounded="circle"
+                ></v-pagination>
+              </div>
+            </div>
+
+            <!-- Empty State -->
+            <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-h6 text-grey mb-1">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-3 pt-0">
+            <v-spacer></v-spacer>
+            <v-btn
+              color="primary"
+              class="text-white font-weight-semibold text-none"
+              size="large"
+              variant="flat"
+              @click="historyDialog = false"
+              prepend-icon="mdi-close"
+              rounded="lg"
+              elevation="2"
+            >
+              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-5"
+            style="
+              background: linear-gradient(135deg, #fb8c00 0%, #e65100 100%);
+            "
+          >
+            <h2 class="text-h5 font-weight-bold text-white mb-1">
+              <v-icon color="white" class="mr-2" size="24"
+                >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>
 
-          <!-- History List -->
-          <div v-if="filteredHistory.length > 0">
-            <!-- Info jumlah data -->
-            <div class="mb-2 text-body-2 text-grey-darken-1">
-              Menampilkan {{ (historyPage - 1) * historyItemsPerPage + 1 }} - {{ Math.min(historyPage * historyItemsPerPage, filteredHistory.length) }} dari {{ filteredHistory.length }} riwayat
+          <v-card-text class="pa-3">
+            <!-- Header Stats -->
+            <div class="history-header-stats mb-3">
+              <div class="history-header-title mb-2">
+                <h3
+                  class="text-subtitle-1 font-weight-bold d-flex align-center"
+                >
+                  <v-icon size="20" class="mr-2" color="secondary"
+                    >mdi-qrcode-scan</v-icon
+                  >
+                  Riwayat QR Scan
+                </h3>
+              </div>
+              <v-row dense>
+                <v-col cols="6" md="4">
+                  <div class="stat-card-header">
+                    <div class="stat-icon-header stat-icon-total">
+                      <v-icon size="20">mdi-qrcode-scan</v-icon>
+                    </div>
+                    <div class="stat-content-header">
+                      <div class="stat-value-header">
+                        {{ scannedQRHistory.length }}
+                      </div>
+                      <div class="stat-label-header">Total Scan</div>
+                    </div>
+                  </div>
+                </v-col>
+                <v-col cols="6" md="4">
+                  <div class="stat-card-header">
+                    <div class="stat-icon-header stat-icon-filtered">
+                      <v-icon size="20">mdi-filter</v-icon>
+                    </div>
+                    <div class="stat-content-header">
+                      <div class="stat-value-header">
+                        {{ filteredQRHistory.length }}
+                      </div>
+                      <div class="stat-label-header">Tersaring</div>
+                    </div>
+                  </div>
+                </v-col>
+                <v-col cols="12" md="4">
+                  <v-btn
+                    color="error"
+                    variant="outlined"
+                    block
+                    @click="clearQRHistory"
+                    :disabled="scannedQRHistory.length === 0"
+                    class="mt-2 mt-md-0"
+                  >
+                    <v-icon start>mdi-delete</v-icon>
+                    Hapus Semua
+                  </v-btn>
+                </v-col>
+              </v-row>
             </div>
-            
-            <div class="history-list">
+
+            <!-- Filter dan Search -->
+            <div class="mb-3">
+              <v-row dense>
+                <v-col cols="12">
+                  <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-row>
+            </div>
+
+            <!-- QR History List -->
+            <div v-if="filteredQRHistory.length > 0" class="history-list">
               <v-card
-                v-for="(item, index) in paginatedHistory"
+                v-for="(item, index) in filteredQRHistory"
                 :key="index"
                 variant="flat"
                 elevation="0"
-                class="mb-1 history-item-dialog"
-                :class="getStatusClass(item.status)"
+                class="mb-2 history-item-dialog history-item-qr"
               >
-              <v-card-text class="pa-2">
-                <div class="d-flex justify-space-between align-start">
-                  <div class="flex-grow-1">
-                    <!-- Header: Status & Method -->
-                    <div class="d-flex align-center mb-1 gap-1">
-                      <div class="history-status-badge-dialog" :class="`status-${getStatusColor(item.status)}`">
-                        <v-icon size="14">{{ getStatusIcon(item.status) }}</v-icon>
-                      </div>
-                      <div>
-                        <div class="history-status-text-dialog" :class="`text-${getStatusColor(item.status)}`">
-                          {{ getStatusText(item.status) }}
+                <v-card-text class="pa-2">
+                  <div class="d-flex justify-space-between align-start">
+                    <div class="flex-grow-1">
+                      <!-- QR Data -->
+                      <div class="mb-1">
+                        <div class="history-qr-badge-dialog">
+                          <v-icon size="14" class="mr-1">mdi-qrcode</v-icon>
+                          <span class="font-weight-semibold">{{
+                            item.data
+                          }}</span>
                         </div>
-                        <div class="history-method-text-dialog">
-                          {{ item.method }}
+                      </div>
+
+                      <!-- Time Info -->
+                      <div class="d-flex flex-wrap gap-1">
+                        <div class="history-time-badge-dialog">
+                          <v-icon size="10" class="mr-1"
+                            >mdi-clock-outline</v-icon
+                          >
+                          <span>{{ item.time }}</span>
+                        </div>
+                        <div class="history-time-badge-dialog">
+                          <v-icon size="10" class="mr-1">mdi-calendar</v-icon>
+                          <span>{{ item.date }}</span>
                         </div>
                       </div>
                     </div>
-                    
-                    <!-- Queue Number -->
-                    <div v-if="item.klinikQueueNumber || item.queueNumber" class="mb-1">
-                      <div class="history-queue-badge-dialog">
-                        <v-icon size="12" class="mr-1">mdi-ticket</v-icon>
-                        <span class="font-weight-semibold">{{ item.klinikQueueNumber || item.queueNumber }}</span>
-                      </div>
-                    </div>
-                    
-                    <!-- Info Badges: Patient ID, Klinik & Pembayaran -->
-                    <div class="d-flex flex-wrap gap-1 mb-1">
-                      <div v-if="item.patientId" class="history-info-badge-dialog">
-                        <v-icon size="12" class="mr-1">mdi-account-circle</v-icon>
-                        <span>{{ item.patientId }}</span>
-                      </div>
-                      <div v-if="item.klinik && item.klinik !== 'N/A'" class="history-klinik-badge-dialog">
-                        <v-icon size="12" class="mr-1">mdi-hospital-building</v-icon>
-                        <span>{{ item.klinik }}</span>
-                      </div>
-                      <div v-if="item.pembayaran" class="history-payment-badge-dialog">
-                        <v-icon size="12" class="mr-1">mdi-credit-card</v-icon>
-                        <span>{{ item.pembayaran }}</span>
-                      </div>
-                    </div>
-                    
-                    <!-- Time Info -->
-                    <div class="d-flex flex-wrap gap-1">
-                      <div class="history-time-badge-dialog">
-                        <v-icon size="10" class="mr-1">mdi-clock-outline</v-icon>
-                        <span>{{ formatDateTime(item.checkInTime) }}</span>
-                      </div>
-                      <div v-if="item.checkInDate" class="history-time-badge-dialog">
-                        <v-icon size="10" class="mr-1">mdi-calendar</v-icon>
-                        <span>{{ formatDate(item.checkInDate) }}</span>
-                      </div>
+
+                    <div class="ml-2 d-flex gap-1">
+                      <v-btn
+                        icon
+                        size="small"
+                        variant="text"
+                        color="primary"
+                        @click="useQRData(item.data)"
+                        class="history-action-btn"
+                      >
+                        <v-icon size="18">mdi-refresh</v-icon>
+                      </v-btn>
+                      <v-btn
+                        icon
+                        size="small"
+                        variant="text"
+                        color="error"
+                        @click="deleteQRHistoryItem(index)"
+                        class="history-delete-btn"
+                      >
+                        <v-icon size="18">mdi-delete-outline</v-icon>
+                      </v-btn>
                     </div>
                   </div>
-                  
-                  <div class="ml-2">
-                    <v-btn
-                      icon
-                      size="small"
-                      variant="text"
-                      color="error"
-                      @click="deleteHistoryItem(index)"
-                      class="history-delete-btn"
-                    >
-                      <v-icon size="18">mdi-delete-outline</v-icon>
-                    </v-btn>
-                  </div>
-                </div>
-              </v-card-text>
-            </v-card>
+                </v-card-text>
+              </v-card>
             </div>
-            
-            <!-- Pagination -->
-            <div v-if="totalHistoryPages > 1" class="mt-3 d-flex justify-center">
-              <v-pagination
-                v-model="historyPage"
-                :length="totalHistoryPages"
-                :total-visible="7"
-                color="primary"
-                rounded="circle"
-              ></v-pagination>
+
+            <!-- Empty State -->
+            <div v-else class="text-center py-6">
+              <v-icon size="48" color="grey-lighten-1" class="mb-2"
+                >mdi-qrcode-scan</v-icon
+              >
+              <p class="text-h6 text-grey mb-1">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>
-          </div>
+          </v-card-text>
 
-          <!-- Empty State -->
-          <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-h6 text-grey mb-1">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-3 pt-0">
-          <v-spacer></v-spacer>
-          <v-btn
-            color="primary"
-            class="text-white font-weight-semibold text-none"
-            size="large"
-            variant="flat"
-            @click="historyDialog = false"
-            prepend-icon="mdi-close"
-            rounded="lg"
-            elevation="2"
-          >
-            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-5" style="background: linear-gradient(135deg, #FB8C00 0%, #E65100 100%);">
-          <h2 class="text-h5 font-weight-bold text-white mb-1">
-            <v-icon color="white" class="mr-2" size="24">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-3">
-          <!-- Header Stats -->
-          <div class="history-header-stats mb-3">
-            <div class="history-header-title mb-2">
-              <h3 class="text-subtitle-1 font-weight-bold d-flex align-center">
-                <v-icon size="20" class="mr-2" color="secondary">mdi-qrcode-scan</v-icon>
-                Riwayat QR Scan
-              </h3>
-            </div>
-            <v-row dense>
-              <v-col cols="6" md="4">
-                <div class="stat-card-header">
-                  <div class="stat-icon-header stat-icon-total">
-                    <v-icon size="20">mdi-qrcode-scan</v-icon>
-                  </div>
-                  <div class="stat-content-header">
-                    <div class="stat-value-header">{{ scannedQRHistory.length }}</div>
-                    <div class="stat-label-header">Total Scan</div>
-                  </div>
-                </div>
-              </v-col>
-              <v-col cols="6" md="4">
-                <div class="stat-card-header">
-                  <div class="stat-icon-header stat-icon-filtered">
-                    <v-icon size="20">mdi-filter</v-icon>
-                  </div>
-                  <div class="stat-content-header">
-                    <div class="stat-value-header">{{ filteredQRHistory.length }}</div>
-                    <div class="stat-label-header">Tersaring</div>
-                  </div>
-                </div>
-              </v-col>
-              <v-col cols="12" md="4">
-                <v-btn
-                  color="error"
-                  variant="outlined"
-                  block
-                  @click="clearQRHistory"
-                  :disabled="scannedQRHistory.length === 0"
-                  class="mt-2 mt-md-0"
-                >
-                  <v-icon start>mdi-delete</v-icon>
-                  Hapus Semua
-                </v-btn>
-              </v-col>
-            </v-row>
-          </div>
-
-          <!-- Filter dan Search -->
-          <div class="mb-3">
-            <v-row dense>
-              <v-col cols="12">
-                <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-row>
-          </div>
-
-          <!-- QR History List -->
-          <div v-if="filteredQRHistory.length > 0" class="history-list">
-            <v-card
-              v-for="(item, index) in filteredQRHistory"
-              :key="index"
+          <v-card-actions class="pa-3 pt-0">
+            <v-spacer></v-spacer>
+            <v-btn
+              color="primary"
+              class="text-white font-weight-semibold text-none"
+              size="large"
               variant="flat"
-              elevation="0"
-              class="mb-2 history-item-dialog history-item-qr"
+              @click="qrHistoryDialog = false"
+              prepend-icon="mdi-close"
+              rounded="lg"
+              elevation="2"
             >
-              <v-card-text class="pa-2">
-                <div class="d-flex justify-space-between align-start">
-                  <div class="flex-grow-1">
-                    <!-- QR Data -->
-                    <div class="mb-1">
-                      <div class="history-qr-badge-dialog">
-                        <v-icon size="14" class="mr-1">mdi-qrcode</v-icon>
-                        <span class="font-weight-semibold">{{ item.data }}</span>
-                      </div>
-                    </div>
-                    
-                    <!-- Time Info -->
-                    <div class="d-flex flex-wrap gap-1">
-                      <div class="history-time-badge-dialog">
-                        <v-icon size="10" class="mr-1">mdi-clock-outline</v-icon>
-                        <span>{{ item.time }}</span>
-                      </div>
-                      <div class="history-time-badge-dialog">
-                        <v-icon size="10" class="mr-1">mdi-calendar</v-icon>
-                        <span>{{ item.date }}</span>
-                      </div>
-                    </div>
-                  </div>
-                  
-                  <div class="ml-2 d-flex gap-1">
-                    <v-btn
-                      icon
-                      size="small"
-                      variant="text"
-                      color="primary"
-                      @click="useQRData(item.data)"
-                      class="history-action-btn"
-                    >
-                      <v-icon size="18">mdi-refresh</v-icon>
-                    </v-btn>
-                    <v-btn
-                      icon
-                      size="small"
-                      variant="text"
-                      color="error"
-                      @click="deleteQRHistoryItem(index)"
-                      class="history-delete-btn"
-                    >
-                      <v-icon size="18">mdi-delete-outline</v-icon>
-                    </v-btn>
-                  </div>
-                </div>
-              </v-card-text>
-            </v-card>
-          </div>
-
-          <!-- Empty State -->
-          <div v-else class="text-center py-6">
-            <v-icon size="48" color="grey-lighten-1" class="mb-2">mdi-qrcode-scan</v-icon>
-            <p class="text-h6 text-grey mb-1">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-3 pt-0">
-          <v-spacer></v-spacer>
-          <v-btn
-            color="primary"
-            class="text-white font-weight-semibold text-none"
-            size="large"
-            variant="flat"
-            @click="qrHistoryDialog = false"
-            prepend-icon="mdi-close"
-            rounded="lg"
-            elevation="2"
-          >
-            Tutup
-          </v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
-
+              Tutup
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, nextTick, onMounted, onUnmounted, watch } from 'vue';
-import { useQueueStore } from '@/stores/queueStore';
-import { useMasterStore } from '@/stores/masterStore';
-import { useThermalPrint } from '@/composables/useThermalPrint';
-import PageHeader from '@/components/common/PageHeader.vue';
+import { ref, computed, nextTick, onMounted, onUnmounted, watch } from "vue";
+import { useQueueStore } from "@/stores/queueStore";
+import { useMasterStore } from "@/stores/masterStore";
+import { useWebSocket } from "@/composables/useWebSocket";
+import { useThermalPrint } from "@/composables/useThermalPrint";
+import PageHeader from "@/components/common/PageHeader.vue";
 
 definePageMeta({
   // middleware:['auth'],
   layout: false,
-})
+});
 
 const queueStore = useQueueStore();
 const masterStore = useMasterStore();
 const { printTicketFromPatient, isPrinting } = useThermalPrint();
-
+const config = useRuntimeConfig();
+const wsBaseUrl =
+  config.public?.wsBaseUrl || "ws://10.10.150.100:8084/api/v1/ws";
 
 // TypeScript declaration for QRCode
 declare global {
@@ -1263,20 +1674,24 @@ declare global {
 }
 
 // --- DESAIN & TEMA ---
-const primaryColor = ref('#1565C0');
-const secondaryColor = ref('#FB8C00');
+const primaryColor = ref("#1565C0");
+const secondaryColor = ref("#FB8C00");
 
 // --- LOGIKA ---
-const tab = ref('checkin');
+const tab = ref("checkin");
 const showGenerateQRDialog = ref(false);
 const infoDialog = ref(false);
-const infoMessage = ref('');
-const infoAction = ref<'checkin' | 'kembali'>('kembali');
-let autoCloseTimer: ReturnType<typeof setTimeout> | null = null; 
+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 manualInput = ref("");
 const manualForm = ref(null);
-const lastCheckInResult = ref<{ success: boolean; patientId: string; status: string } | null>(null);
+const lastCheckInResult = ref<{
+  success: boolean;
+  patientId: string;
+  status: string;
+} | null>(null);
 
 // QR Scanner state
 const isScanning = ref(false);
@@ -1284,166 +1699,214 @@ const hasCamera = ref(false);
 const cameraChecking = ref(true);
 const cameraReady = ref(false);
 let html5QrCode: any = null;
-const qrCodeId = 'qr-reader';
+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 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);
+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 historySearch = ref("");
+const historyStatusFilter = ref("");
 const historyPage = ref(1);
 const historyItemsPerPage = ref(10);
-const checkInHistory = ref<Array<{
-  patientId: string;
-  queueNumber?: string;
-  klinikQueueNumber?: string;
-  pembayaran?: string;
-  status: string;
-  checkInTime: string;
-  checkInDate: string;
-  method: string;
-  klinik?: string;
-  kodeKlinik?: string;
-}>>([]);
+const checkInHistory = ref<
+  Array<{
+    patientId: string;
+    queueNumber?: string;
+    klinikQueueNumber?: string;
+    pembayaran?: string;
+    status: string;
+    checkInTime: string;
+    checkInDate: string;
+    method: string;
+    klinik?: string;
+    kodeKlinik?: string;
+  }>
+>([]);
 
 // QR History Dialog
 const qrHistoryDialog = ref(false);
-const scannedQRHistory = ref<Array<{
-  data: string;
-  timestamp: string;
-  date: string;
-  time: string;
-}>>([]);
+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' }
+  { title: "Berhasil", value: "success" },
+  { title: "Gagal", value: "failed" },
+  { title: "Pending", value: "pending" },
 ];
 
 // Generate QR variables
-const generateBarcode = ref('');
-const generateQueueNumber = ref('');
-const generateStatus = ref('ALLOWED');
-const generatedQRData = ref('');
-const selectedKlinik = ref('');
-const selectedPembayaran = ref('UMUM');
+const generateBarcode = ref("");
+const generateQueueNumber = ref("");
+const generateStatus = ref("ALLOWED");
+const generatedQRData = ref("");
+const selectedKlinik = ref("");
+const selectedPembayaran = ref("UMUM");
 const generatedPatient = ref<any>(null);
 const statusOptions = [
-  { title: 'Diizinkan Check-in', value: 'ALLOWED' },
-  { title: 'Belum Diizinkan', value: 'NOT_ALLOWED' }
+  { title: "Diizinkan Check-in", value: "ALLOWED" },
+  { title: "Belum Diizinkan", value: "NOT_ALLOWED" },
 ];
 
+// WebSocket state
+let wsInstance: any = null;
+const isConnected = ref(false);
+const uniqueSessionSuffix = ref(Math.random().toString(36).substring(7));
+
+const initWebSocket = () => {
+  console.log("🔌 WebSocket (CheckIn): Connecting to", wsBaseUrl);
+
+  wsInstance = useWebSocket({
+    url: wsBaseUrl,
+    clientId: `checkin-${uniqueSessionSuffix.value}`,
+    onMessage: (data) => {
+      console.log("📨 WebSocket message received (CheckIn):", data);
+      // General update: ensure store data is synchronized
+      // This will ensure new registrations from Anjungan are picked up
+      queueStore.ensureInitialData();
+    },
+    onOpen: () => {
+      console.log("✅ WebSocket connected (CheckIn)");
+      isConnected.value = true;
+    },
+    onClose: () => {
+      isConnected.value = false;
+    },
+    onError: () => {
+      isConnected.value = false;
+    },
+    reconnectInterval: 5000,
+    maxReconnectAttempts: 10,
+  });
+
+  return wsInstance;
+};
+
 // 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
-  }));
-  
+  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
-  ];
+  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 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 = 2; // Jam 2 pagi
-const HISTORY_STORAGE_KEY = 'checkin_history';
+const HISTORY_STORAGE_KEY = "checkin_history";
 
 // Check and reset daily at 2 AM (02:00)
 const checkAndResetDaily = () => {
-  if (typeof window === 'undefined') return;
-  
+  if (typeof window === "undefined") return;
+
   const now = new Date();
   const currentHour = now.getHours();
-  const currentDate = now.toISOString().split('T')[0]; // YYYY-MM-DD
-  
+  const currentDate = now.toISOString().split("T")[0]; // YYYY-MM-DD
+
   // 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];
+    lastResetDate = lastReset.toISOString().split("T")[0];
   }
-  
+
   // 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;
-  
+  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, '{}');
-    
+    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') {
+    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');
+
+    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';
-  
+  if (typeof window === "undefined") return "P-00001";
+
   // Check and reset if needed (before generating)
   checkAndResetDaily();
-  
-  let counter = parseInt(localStorage.getItem(PATIENT_ID_STORAGE_KEY) || '0', 10);
+
+  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')}`;
+
+  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`;
-  
+  if (typeof window === "undefined") return `${kodeKlinik}-0001`;
+
   // Check and reset if needed (before generating)
   checkAndResetDaily();
-  
-  const counters = JSON.parse(localStorage.getItem(QUEUE_NUMBER_STORAGE_KEY) || '{}');
-  let counter = parseInt(counters[kodeKlinik] || '0', 10);
+
+  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')}`;
-};
 
+  return `${kodeKlinik}-${String(counter).padStart(4, "0")}`;
+};
 
 const snackbar = ref({
   show: false,
-  title: '',
-  message: '',
-  color: '',
-  icon: '',
+  title: "",
+  message: "",
+  color: "",
+  icon: "",
   timeout: 4000,
 });
 
@@ -1451,11 +1914,16 @@ const snackbar = ref({
 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');
+  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;
   }
@@ -1464,40 +1932,63 @@ const checkCameraAvailability = async () => {
     // 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());
-    
+    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');
-    
+    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));
+      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');
+      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);
+    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.';
+
+    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');
+
+    showSnackbar("Error", errorMessage, "error", "mdi-camera-off");
   } finally {
     cameraChecking.value = false;
   }
@@ -1506,43 +1997,62 @@ const checkCameraAvailability = async () => {
 // 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');
+    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');
+      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');
+      showSnackbar(
+        "Error",
+        "getUserMedia is not supported",
+        "error",
+        "mdi-alert",
+      );
       return;
     }
-    
-    const stream = await navigator.mediaDevices.getUserMedia({ 
+
+    const stream = await navigator.mediaDevices.getUserMedia({
       video: {
-        facingMode: 'user',
+        facingMode: "user",
         width: { ideal: 1920, min: 1280 },
-        height: { ideal: 1080, min: 720 }
-      } 
+        height: { ideal: 1080, min: 720 },
+      },
     });
-    
-    showSnackbar('Success', 'Kamera berhasil diakses!', 'success', 'mdi-check-circle');
-    
+
+    showSnackbar(
+      "Success",
+      "Kamera berhasil diakses!",
+      "success",
+      "mdi-check-circle",
+    );
+
     // Stop stream after 2 seconds
     setTimeout(() => {
-      stream.getTracks().forEach(track => track.stop());
+      stream.getTracks().forEach((track) => track.stop());
     }, 2000);
-    
   } catch (err: any) {
-    console.error('Test camera error:', err);
-    let errorMsg = `Error: ${err.name || 'Unknown'}`;
+    console.error("Test camera error:", err);
+    let errorMsg = `Error: ${err.name || "Unknown"}`;
     if (err.message) errorMsg += ` - ${err.message}`;
-    showSnackbar('Error', errorMsg, 'error', 'mdi-alert');
+    showSnackbar("Error", errorMsg, "error", "mdi-alert");
   }
 };
 
@@ -1552,7 +2062,12 @@ const startScanning = async () => {
   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');
+      showSnackbar(
+        "Error",
+        "Kamera tidak tersedia. Silakan gunakan input manual atau pastikan kamera terhubung.",
+        "error",
+        "mdi-camera-off",
+      );
       return;
     }
   }
@@ -1560,28 +2075,34 @@ const startScanning = async () => {
   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));
-    
+    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');
+      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
+          if (html5QrCode.getState && html5QrCode.getState() === 2) {
+            // Scanning state
             await html5QrCode.stop();
             await html5QrCode.clear();
           }
@@ -1592,60 +2113,63 @@ const startScanning = async () => {
         }
         html5QrCode = null;
       } catch (err) {
-        console.warn('Error cleaning up existing QR scanner:', 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');
+      const { Html5Qrcode: Html5QrcodeClass } = await import("html5-qrcode");
       html5QrCode = new Html5QrcodeClass(qrCodeId);
-      console.log('Html5Qrcode initialized');
+      console.log("Html5Qrcode initialized");
     }
 
     if (html5QrCode) {
       cameraReady.value = false;
-      
+
       // Konfigurasi kamera untuk mobile dan desktop
-      const cameraConfig = isMobile.value 
+      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 }
+            height: { ideal: 720, min: 480, max: 1080 },
           }
         : {
             facingMode: "user",
             width: { ideal: 1920, min: 1280, max: 1920 },
-            height: { ideal: 1080, min: 720, max: 1080 }
+            height: { ideal: 1080, min: 720, max: 1080 },
           };
-      
+
       // Tambahkan advanced constraints hanya jika didukung
       const videoConstraints: any = { ...baseVideoConstraints };
-      
-      console.log('Starting QR scanner with config:', {
+
+      console.log("Starting QR scanner with config:", {
         isMobile: isMobile.value,
         cameraConfig,
-        videoConstraints
+        videoConstraints,
       });
-      
+
       try {
         await html5QrCode.start(
           cameraConfig,
           {
             fps: 15, // Reduced FPS improved stability on mobile
-            qrbox: function(viewfinderWidth: number, viewfinderHeight: number) {
+            qrbox: function (
+              viewfinderWidth: number,
+              viewfinderHeight: number,
+            ) {
               const minEdgeSize = Math.min(viewfinderWidth, viewfinderHeight);
               // Use 70% of the viewfinder for the qrbox to ensure it's comfortably inside
               const qrboxSize = Math.floor(minEdgeSize * 0.7);
               return {
-                width: Math.max(qrboxSize, 200), 
-                height: Math.max(qrboxSize, 200)
+                width: Math.max(qrboxSize, 200),
+                height: Math.max(qrboxSize, 200),
               };
             },
             aspectRatio: 1.0,
@@ -1654,18 +2178,18 @@ const startScanning = async () => {
             rememberLastUsedCamera: true,
             showTorchButtonIfSupported: true,
             // Tambahkan opsi untuk meningkatkan deteksi
-            verbose: false // Set true untuk debugging
+            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);
-            
+            console.log("✅ QR Code detected:", decodedText);
+            console.log("📊 Decoded result:", decodedResult);
+
             // Validasi dan proses QR code
-            if (decodedText && decodedText.trim() !== '') {
+            if (decodedText && decodedText.trim() !== "") {
               handleQRScanSuccess(decodedText);
             } else {
-              console.warn('Empty QR code detected');
+              console.warn("Empty QR code detected");
             }
           },
           (errorMessage: string) => {
@@ -1674,47 +2198,59 @@ const startScanning = async () => {
             // 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');
-              
+              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);
+                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');
+          console.log("Camera ready, scanner is active");
         }, 500);
-        
-        showSnackbar('Info', 'Scanner aktif. Arahkan kamera ke QR code dan pastikan pencahayaan cukup', 'info', 'mdi-camera');
+
+        showSnackbar(
+          "Info",
+          "Scanner aktif. Arahkan kamera ke QR code dan pastikan pencahayaan cukup",
+          "info",
+          "mdi-camera",
+        );
       } catch (cameraError: any) {
-        console.error('Camera error:', cameraError);
-        
+        console.error("Camera error:", cameraError);
+
         // Jika kamera belakang tidak tersedia di mobile, coba kamera depan
-        if (isMobile.value && cameraError.name === 'NotFoundError') {
+        if (isMobile.value && cameraError.name === "NotFoundError") {
           try {
-            console.log('Trying front camera as fallback...');
+            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);
+                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)
+                    height: Math.max(finalSize, 250),
                   };
                 },
                 aspectRatio: 1.0,
@@ -1722,136 +2258,170 @@ const startScanning = async () => {
                 videoConstraints: {
                   facingMode: "user",
                   width: { ideal: 1280, min: 640, max: 1920 },
-                  height: { ideal: 720, min: 480, max: 1080 }
+                  height: { ideal: 720, min: 480, max: 1080 },
                 },
                 rememberLastUsedCamera: true,
-                verbose: false
+                verbose: false,
               },
               (decodedText: string, decodedResult: any) => {
-                console.log('✅ QR Code detected (front camera):', decodedText);
-                if (decodedText && decodedText.trim() !== '') {
+                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');
-                  
+                  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);
+                    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');
+
+            showSnackbar(
+              "Info",
+              "Menggunakan kamera depan. Arahkan QR code ke kamera",
+              "info",
+              "mdi-camera",
+            );
           } catch (fallbackError: any) {
-            console.error('Fallback camera also failed:', fallbackError);
+            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...');
+            console.log("Trying to get camera devices...");
             const devices = await navigator.mediaDevices.enumerateDevices();
-            const videoDevices = devices.filter(device => device.kind === 'videoinput');
-            
+            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);
-              
+              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);
+                  qrbox: function (
+                    viewfinderWidth: number,
+                    viewfinderHeight: number,
+                  ) {
+                    const minEdgeSize = Math.min(
+                      viewfinderWidth,
+                      viewfinderHeight,
+                    );
+                    const percentageSize = Math.floor(minEdgeSize * 0.8);
                     const fixedSize = isMobile.value ? 300 : 400;
                     const qrboxSize = Math.max(percentageSize, fixedSize);
-                    const finalSize = Math.min(qrboxSize, minEdgeSize * 0.80);
-                    
+                    const finalSize = Math.min(qrboxSize, minEdgeSize * 0.8);
+
                     return {
                       width: Math.max(finalSize, 250),
-                      height: 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 }
+                    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
+                  verbose: false,
                 },
                 (decodedText: string, decodedResult: any) => {
-                  console.log('✅ QR Code detected (deviceId):', decodedText);
-                  if (decodedText && decodedText.trim() !== '') {
+                  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');
-                    
+                    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);
+                      console.warn(
+                        "QR Scanner (deviceId) warning:",
+                        errorMessage,
+                      );
                     }
                   }
-                }
+                },
               );
-              
+
               setTimeout(() => {
                 cameraReady.value = true;
               }, 500);
-              
-              showSnackbar('Info', 'Scanner aktif menggunakan kamera yang tersedia', 'info', 'mdi-camera');
+
+              showSnackbar(
+                "Info",
+                "Scanner aktif menggunakan kamera yang tersedia",
+                "info",
+                "mdi-camera",
+              );
             } else {
               throw cameraError;
             }
           } catch (deviceError: any) {
-            console.error('DeviceId approach also failed:', deviceError);
+            console.error("DeviceId approach also failed:", deviceError);
             throw cameraError;
           }
         }
       }
     }
   } catch (err: any) {
-    console.error('Error starting scanner:', err);
+    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.';
+    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 if (err.name === "NotReadableError") {
+      errorMessage =
+        "Kamera sedang digunakan aplikasi lain. Tutup aplikasi lain yang menggunakan kamera.";
     } else {
-      errorMessage += err.message || err.name || 'Unknown error';
+      errorMessage += err.message || err.name || "Unknown error";
     }
-    
-    showSnackbar('Error', errorMessage, 'error', 'mdi-alert');
+
+    showSnackbar("Error", errorMessage, "error", "mdi-alert");
   }
 };
 
@@ -1863,15 +2433,15 @@ const stopScanning = async () => {
         await html5QrCode.stop();
         await html5QrCode.clear();
       }
-      
+
       // 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');
+      showSnackbar("Info", "Scanner dihentikan", "info", "mdi-camera-off");
     }
   } catch (err: any) {
-    console.error('Error stopping scanner:', err);
+    console.error("Error stopping scanner:", err);
     isScanning.value = false;
     cameraReady.value = false;
     // Force cleanup
@@ -1880,135 +2450,169 @@ const stopScanning = async () => {
 };
 
 const handleQRScanSuccess = (decodedText: string) => {
-  console.log('🎯 QR Scan Success! Data:', decodedText);
-  
+  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');
+  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)
   // Hanya abaikan jika benar-benar sudah berhasil check-in sebelumnya (status di-loket)
   if (isQRCodeAlreadyScanned(decodedText)) {
     // Verifikasi ulang: cek apakah pasien benar-benar sudah check-in di queueStore
     const cleanInput = String(decodedText).trim();
-    const patientInStore = queueStore.allPatients.find(p => {
-      const patientBarcode = String(p.barcode || '').trim();
-      return patientBarcode === cleanInput || patientBarcode.toUpperCase() === cleanInput.toUpperCase();
+    const patientInStore = queueStore.allPatients.find((p) => {
+      const patientBarcode = String(p.barcode || "").trim();
+      return (
+        patientBarcode === cleanInput ||
+        patientBarcode.toUpperCase() === cleanInput.toUpperCase()
+      );
     });
-    
-    if (patientInStore && patientInStore.status === 'di-loket') {
+
+    if (patientInStore && patientInStore.status === "di-loket") {
       // Pasien benar-benar sudah check-in, abaikan scan
-      console.log('⏭️ Scan diabaikan: QR code sudah pernah berhasil di-scan dan pasien sudah di-loket');
-      showSnackbar('Peringatan', 'QR Code ini sudah pernah berhasil di-scan. Tidak dapat digunakan lagi untuk mencegah double antrian.', 'warning', 'mdi-alert-circle');
+      console.log(
+        "⏭️ Scan diabaikan: QR code sudah pernah berhasil di-scan dan pasien sudah di-loket",
+      );
+      showSnackbar(
+        "Peringatan",
+        "QR Code ini sudah pernah berhasil di-scan. Tidak dapat digunakan lagi untuk mencegah double antrian.",
+        "warning",
+        "mdi-alert-circle",
+      );
       return;
     } else {
       // Pasien belum benar-benar check-in, mungkin ada masalah di data sebelumnya
       // Biarkan scan berlanjut untuk verifikasi ulang
-      console.warn('⚠️ QR code marked as scanned but patient not in di-loket status, allowing re-scan for verification');
+      console.warn(
+        "⚠️ QR code marked as scanned but patient not in di-loket status, allowing re-scan for verification",
+      );
       // Hapus dari successful scans untuk memungkinkan scan ulang
-      if (typeof window !== 'undefined' && successfulScans.value.has(decodedText)) {
+      if (
+        typeof window !== "undefined" &&
+        successfulScans.value.has(decodedText)
+      ) {
         successfulScans.value.delete(decodedText);
         const scansArray = Array.from(successfulScans.value);
         localStorage.setItem(SUCCESSFUL_SCANS_KEY, JSON.stringify(scansArray));
       }
     }
   }
-  
+
   // 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');
+  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 is async, so we need to handle it properly
     onDetect(decodedText).catch((error) => {
-      console.error('Error processing QR data in onDetect:', error);
+      console.error("Error processing QR data in onDetect:", error);
       // Jangan simpan sebagai successful scan jika ada error
       // Hanya tampilkan error message
-      showSnackbar('Error', `Gagal memproses data QR Code: ${error.message || 'Error tidak diketahui'}`, 'error', 'mdi-alert');
-      
+      showSnackbar(
+        "Error",
+        `Gagal memproses data QR Code: ${error.message || "Error tidak diketahui"}`,
+        "error",
+        "mdi-alert",
+      );
+
       // Simpan ke history sebagai failed
       saveToHistory({
         patientId: decodedText,
         queueNumber: null,
         klinikQueueNumber: null,
-        pembayaran: 'N/A',
-        status: 'failed',
+        pembayaran: "N/A",
+        status: "failed",
         checkInTime: new Date().toISOString(),
         checkInDate: new Date().toISOString(),
-        method: 'QR Scan',
-        klinik: 'N/A',
-        kodeKlinik: null
+        method: "QR Scan",
+        klinik: "N/A",
+        kodeKlinik: null,
       });
     });
   } catch (error) {
-    console.error('Error processing QR data:', error);
-    showSnackbar('Error', `Gagal memproses data QR Code: ${error instanceof Error ? error.message : 'Error tidak diketahui'}`, 'error', 'mdi-alert');
-    
+    console.error("Error processing QR data:", error);
+    showSnackbar(
+      "Error",
+      `Gagal memproses data QR Code: ${error instanceof Error ? error.message : "Error tidak diketahui"}`,
+      "error",
+      "mdi-alert",
+    );
+
     // Simpan ke history sebagai failed
     saveToHistory({
       patientId: decodedText,
       queueNumber: null,
       klinikQueueNumber: null,
-      pembayaran: 'N/A',
-      status: 'failed',
+      pembayaran: "N/A",
+      status: "failed",
       checkInTime: new Date().toISOString(),
       checkInDate: new Date().toISOString(),
-      method: 'QR Scan',
-      klinik: 'N/A',
-      kodeKlinik: null
+      method: "QR Scan",
+      klinik: "N/A",
+      kodeKlinik: null,
     });
   }
-  
+
   // Simpan ke localStorage untuk riwayat (selalu simpan, baik berhasil atau gagal)
   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') || '[]');
+  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').replace(/\./g, ':')
+      date: new Date().toLocaleDateString("id-ID"),
+      time: new Date().toLocaleTimeString("id-ID").replace(/\./g, ":"),
     });
-    
+
     // Simpan maksimal 50 item
     if (scannedQRs.length > 50) {
       scannedQRs.pop();
     }
-    
-    localStorage.setItem('scanned_qr_data', JSON.stringify(scannedQRs));
+
+    localStorage.setItem("scanned_qr_data", JSON.stringify(scannedQRs));
   }
 };
 
 // Load successful scans dari localStorage
 const loadSuccessfulScans = () => {
-  if (typeof window !== 'undefined') {
+  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);
+        console.error("Error loading successful scans:", e);
         successfulScans.value = new Set();
       }
     }
@@ -2017,7 +2621,7 @@ const loadSuccessfulScans = () => {
 
 // Simpan successful scan ke localStorage
 const saveSuccessfulScan = (qrData: string) => {
-  if (typeof window !== 'undefined') {
+  if (typeof window !== "undefined") {
     successfulScans.value.add(qrData);
     const scansArray = Array.from(successfulScans.value);
     localStorage.setItem(SUCCESSFUL_SCANS_KEY, JSON.stringify(scansArray));
@@ -2031,44 +2635,43 @@ const isQRCodeAlreadyScanned = (qrData: string): boolean => {
 
 // Watch tab changes untuk stop scanner saat pindah tab
 watch(tab, (newTab) => {
-  if (newTab !== 'checkin' && isScanning.value) {
+  if (newTab !== "checkin" && isScanning.value) {
     stopScanning();
   }
   // Check camera when switching to checkin tab
-  if (newTab === 'checkin' && !hasCamera.value && !cameraChecking.value) {
+  if (newTab === "checkin" && !hasCamera.value && !cameraChecking.value) {
     checkCameraAvailability();
   }
   // Reset generate data when switching to generate tab
-  if (newTab === 'generate') {
+  if (newTab === "generate") {
     // Check and reset daily first
     checkAndResetDaily();
     // Clear generated data
-    generateBarcode.value = '';
-    generateQueueNumber.value = '';
-    generatedQRData.value = '';
+    generateBarcode.value = "";
+    generateQueueNumber.value = "";
+    generatedQRData.value = "";
     generatedPatient.value = null;
   }
 });
 
-
 // Check camera on mount and initialize patient ID
 onMounted(async () => {
-  if (typeof window !== 'undefined') {
+  if (typeof window !== "undefined") {
     // Wait for DOM to be ready
     await nextTick();
-    
+
     // Reset tab to checkin (untuk handle refresh)
-    tab.value = 'checkin';
-    
+    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 = '';
-    
+    manualInput.value = "";
+
     // Cleanup QR scanner instance jika masih ada dari refresh sebelumnya
     if (html5QrCode) {
       try {
@@ -2078,40 +2681,56 @@ onMounted(async () => {
         }
         html5QrCode = null;
       } catch (err) {
-        console.warn('Error cleaning up QR scanner on mount:', err);
+        console.warn("Error cleaning up QR scanner on mount:", err);
         html5QrCode = null;
       }
     }
-    
+
     // Clear any existing video streams (cleanup dari refresh sebelumnya)
     // Note: We rely on html5QrCode cleanup to stop media tracks
-    
+
     // 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') {
+    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.');
+        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');
+        showSnackbar(
+          "Warning",
+          "MediaDevices API tidak tersedia. Pastikan menggunakan HTTPS atau localhost.",
+          "warning",
+          "mdi-alert",
+        );
       }
     } else {
       hasCamera.value = false;
       cameraChecking.value = false;
     }
-    
+
     // Load history untuk ditampilkan di sidebar
     loadHistory();
-    
+
     // Check and reset daily at 10 PM
     checkAndResetDaily();
-    
+
+    // Initialize WebSocket
+    wsInstance = initWebSocket();
+    if (wsInstance) {
+      wsInstance.connect();
+    }
+
     // Set interval to check every minute for reset time
     setInterval(() => {
       checkAndResetDaily();
@@ -2134,20 +2753,25 @@ onUnmounted(async () => {
       // Destroy instance
       html5QrCode = null;
     } catch (err) {
-      console.warn('Error stopping scanner on unmount:', err);
+      console.warn("Error stopping scanner on unmount:", err);
       html5QrCode = null;
     }
   }
-  
+
   // 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;
   }
-  
+
+  // Disconnect WebSocket
+  if (wsInstance) {
+    wsInstance.disconnect();
+  }
+
   // Reset state
   isScanning.value = false;
   cameraReady.value = false;
@@ -2156,30 +2780,34 @@ onUnmounted(async () => {
 // Helper function untuk extract barcode/patientId dari format QR code
 // Handle format: "barcode" atau "patientId|status" (contoh: "P-00001|ALLOWED")
 // Returns: { barcode: string, status?: string }
-const extractQRData = (qrData: string): { barcode: string; status?: string } => {
-  const cleanData = String(qrData || '').trim();
-  
+const extractQRData = (
+  qrData: string,
+): { barcode: string; status?: string } => {
+  const cleanData = String(qrData || "").trim();
+
   // Check jika format "patientId|status" (untuk testing QR code)
-  if (cleanData.includes('|')) {
-    const parts = cleanData.split('|');
-    const patientId = parts[0]?.trim() || '';
+  if (cleanData.includes("|")) {
+    const parts = cleanData.split("|");
+    const patientId = parts[0]?.trim() || "";
     const status = parts[1]?.trim();
     return {
       barcode: patientId,
-      status: status
+      status: status,
     };
   }
-  
+
   // Format thermal print: hanya barcode saja
   return {
-    barcode: cleanData
+    barcode: cleanData,
   };
 };
 
 // Helper function untuk extract kode dan angka dari noAntrian
 // Contoh: "UM0014 | Onsite - ..." -> { kode: "UM", angka: "0014" }
 // Contoh: "F-RA001 | Onsite - ..." -> { kode: "RA", angka: "001" } (handle "F-" prefix)
-const extractKodeAndAngka = (noAntrian: string): { kode: string; angka: string } | null => {
+const extractKodeAndAngka = (
+  noAntrian: string,
+): { kode: string; angka: string } | null => {
   if (!noAntrian) return null;
   // Handle format "F-RA001" by matching after "F-" prefix if exists
   const match = noAntrian.toUpperCase().match(/^(?:F-)?([A-Z]+)(\d+)/);
@@ -2194,25 +2822,28 @@ const extractKodeAndAngka = (noAntrian: string): { kode: string; angka: string }
 // Handle format "F-RA001" dengan menghapus prefix "F-" untuk comparison
 const matchNoAntrian = (input: string, noAntrian: string): boolean => {
   if (!input || !noAntrian) return false;
-  
+
   const cleanInput = String(input).trim().toUpperCase();
   const noAntrianUpper = String(noAntrian).toUpperCase();
-  
+
   // Remove "F-" prefix from both input and noAntrian for comparison
-  const cleanInputWithoutPrefix = cleanInput.replace(/^F-/, '');
-  const noAntrianWithoutPrefix = noAntrianUpper.replace(/^F-/, '');
-  
+  const cleanInputWithoutPrefix = cleanInput.replace(/^F-/, "");
+  const noAntrianWithoutPrefix = noAntrianUpper.replace(/^F-/, "");
+
   // 1. Extract kode + angka dari noAntrian (misalnya "F-RA001 | ..." -> kode: "RA", angka: "001")
   const noAntrianParts = extractKodeAndAngka(noAntrian);
   if (!noAntrianParts) {
     // Jika noAntrian tidak punya format kode+angka, gunakan exact match saja
     // Check both with and without prefix
-    return noAntrianUpper === cleanInput || noAntrianWithoutPrefix === cleanInputWithoutPrefix;
+    return (
+      noAntrianUpper === cleanInput ||
+      noAntrianWithoutPrefix === cleanInputWithoutPrefix
+    );
   }
-  
+
   // 2. Extract kode + angka dari input (misalnya "F-RA001" atau "RA001" -> kode: "RA", angka: "001")
   const inputParts = extractKodeAndAngka(cleanInput);
-  
+
   // 3. Jika input punya kode + angka, HARUS match kode dan angka
   if (inputParts) {
     // Kode HARUS sama (case-insensitive sudah di-handle oleh extractKodeAndAngka)
@@ -2220,25 +2851,32 @@ const matchNoAntrian = (input: string, noAntrian: string): boolean => {
       return false; // Kode berbeda, tidak match
     }
     // Jika kode sama, bandingkan angka
-    return inputParts.angka === noAntrianParts.angka || 
-           inputParts.angka === noAntrianParts.angka.padStart(inputParts.angka.length, '0') ||
-           noAntrianParts.angka === inputParts.angka.padStart(noAntrianParts.angka.length, '0');
+    return (
+      inputParts.angka === noAntrianParts.angka ||
+      inputParts.angka ===
+        noAntrianParts.angka.padStart(inputParts.angka.length, "0") ||
+      noAntrianParts.angka ===
+        inputParts.angka.padStart(noAntrianParts.angka.length, "0")
+    );
   }
-  
+
   // 4. Jika input hanya angka (tidak punya kode), JANGAN match
   // Ini mencegah match "002" dengan "UM1002" atau "AN002" dengan "UM1002"
-  const inputAngka = cleanInputWithoutPrefix.replace(/[^0-9]/g, '');
+  const inputAngka = cleanInputWithoutPrefix.replace(/[^0-9]/g, "");
   if (inputAngka && inputAngka === cleanInputWithoutPrefix) {
     // Input hanya angka, tidak match karena tidak ada kode
     return false;
   }
-  
+
   // 5. Exact match untuk kasus lain (jika input mengandung kode tapi tidak ter-extract)
   // Check both with and without prefix
-  if (noAntrianUpper === cleanInput || noAntrianWithoutPrefix === cleanInputWithoutPrefix) {
+  if (
+    noAntrianUpper === cleanInput ||
+    noAntrianWithoutPrefix === cleanInputWithoutPrefix
+  ) {
     return true;
   }
-  
+
   // 6. Check jika noAntrian dimulai dengan input + spasi atau pipe (untuk partial match yang aman)
   // Contoh: "F-RA001" match dengan "F-RA001 | ..." atau "RA001" match dengan "F-RA001 | ..."
   // Tapi TIDAK match dengan "UM1002" karena kode berbeda
@@ -2248,290 +2886,348 @@ const matchNoAntrian = (input: string, noAntrian: string): boolean => {
       // Check jika noAntrian dimulai dengan format "F-KODEANGKA |" atau "KODEANGKA | ..."
       const noAntrianPrefix = `${noAntrianParts.kode}${noAntrianParts.angka}`;
       const inputPrefix = `${inputParts.kode}${inputParts.angka}`;
-      
+
       // Pastikan input prefix sama dengan noAntrian prefix
       if (inputPrefix === noAntrianPrefix) {
         // Check jika noAntrian dimulai dengan prefix ini (with or without "F-") diikuti spasi, pipe, atau end of string
         if (noAntrianWithoutPrefix.startsWith(noAntrianPrefix)) {
           const nextChar = noAntrianWithoutPrefix[noAntrianPrefix.length];
-          if (!nextChar || nextChar === ' ' || nextChar === '|') {
+          if (!nextChar || nextChar === " " || nextChar === "|") {
             return true;
           }
         }
         // Also check with "F-" prefix
         if (noAntrianUpper.startsWith(`F-${noAntrianPrefix}`)) {
           const nextChar = noAntrianUpper[`F-${noAntrianPrefix}`.length];
-          if (!nextChar || nextChar === ' ' || nextChar === '|') {
+          if (!nextChar || nextChar === " " || nextChar === "|") {
             return true;
           }
         }
       }
     }
   }
-  
+
   return false;
 };
 
 const onDetect = async (decodedText: string) => {
-    // Format QR Code yang didukung:
-    // 1. Format thermal print: hanya BARCODE saja (contoh: 250811100163)
-    // 2. Format testing: "patientId|status" (contoh: P-00001|ALLOWED)
-    // Status akan dicek real-time dari queueStore saat scan QR
-    
-    console.log('🔍 onDetect called with QR data:', decodedText);
-    
-    // Extract barcode/patientId dari QR data (handle format testing dengan pipe)
-    const qrData = extractQRData(decodedText);
-    const searchBarcode = qrData.barcode; // Barcode/patientId untuk dicari di queueStore
-    
-    // Clean input - remove whitespace and normalize
-    const cleanInput = String(searchBarcode).trim();
-    const cleanInputUpper = cleanInput.toUpperCase();
-    
-    console.log('🔍 Extracted barcode/patientId:', searchBarcode);
-    console.log('🔍 Cleaned input:', cleanInput);
-    console.log('📊 Total patients in store:', queueStore.allPatients.length);
-    
-    // IMPORTANT: Hanya cari dengan EXACT barcode match untuk menghindari false positive
-    // Format barcode: YYMMDD + 5 digit (contoh: 26011500001)
-    // Jangan gunakan fallback ke noAntrian atau no karena bisa menyebabkan false positive
-    // Contoh masalah: RA020 dengan barcode 26011500001 terdeteksi sebagai RA002 dengan barcode 26011500198
-    const foundPatient = queueStore.allPatients.find(p => {
-      if (!p) return false;
-      
-      // Normalize barcode untuk comparison (remove whitespace, case-insensitive)
-      const patientBarcode = String(p.barcode || '').trim();
-      
-      // EXACT barcode match (case-insensitive, whitespace-insensitive)
-      // Ini adalah satu-satunya cara yang aman untuk match pasien
-      if (patientBarcode === cleanInput || 
-          patientBarcode.toLowerCase() === cleanInput.toLowerCase()) {
-        console.log('✅ Found by exact barcode match:', patientBarcode, '===', cleanInput);
-        return true;
-      }
-      
-      return false;
-    });
-    
-    if (!foundPatient) {
-      // Tiket belum di-generate (tidak ada di queueStore)
-      console.error('❌ Patient not found. QR data:', decodedText);
-      console.error('🔍 Extracted barcode/patientId:', searchBarcode);
-      console.error('📋 Available barcodes (first 10):', queueStore.allPatients.slice(0, 10).map(p => ({
+  // Format QR Code yang didukung:
+  // 1. Format thermal print: hanya BARCODE saja (contoh: 250811100163)
+  // 2. Format testing: "patientId|status" (contoh: P-00001|ALLOWED)
+  // Status akan dicek real-time dari queueStore saat scan QR
+
+  console.log("🔍 onDetect called with QR data:", decodedText);
+
+  // Extract barcode/patientId dari QR data (handle format testing dengan pipe)
+  const qrData = extractQRData(decodedText);
+  const searchBarcode = qrData.barcode; // Barcode/patientId untuk dicari di queueStore
+
+  // Clean input - remove whitespace and normalize
+  const cleanInput = String(searchBarcode).trim();
+  const cleanInputUpper = cleanInput.toUpperCase();
+
+  console.log("🔍 Extracted barcode/patientId:", searchBarcode);
+  console.log("🔍 Cleaned input:", cleanInput);
+  console.log("📊 Total patients in store:", queueStore.allPatients.length);
+
+  // IMPORTANT: Hanya cari dengan EXACT barcode match untuk menghindari false positive
+  // Format barcode: YYMMDD + 5 digit (contoh: 26011500001)
+  // Jangan gunakan fallback ke noAntrian atau no karena bisa menyebabkan false positive
+  // Contoh masalah: RA020 dengan barcode 26011500001 terdeteksi sebagai RA002 dengan barcode 26011500198
+  const foundPatient = queueStore.allPatients.find((p) => {
+    if (!p) return false;
+
+    // Normalize barcode untuk comparison (remove whitespace, case-insensitive)
+    const patientBarcode = String(p.barcode || "").trim();
+
+    // EXACT barcode match (case-insensitive, whitespace-insensitive)
+    // Ini adalah satu-satunya cara yang aman untuk match pasien
+    if (
+      patientBarcode === cleanInput ||
+      patientBarcode.toLowerCase() === cleanInput.toLowerCase()
+    ) {
+      console.log(
+        "✅ Found by exact barcode match:",
+        patientBarcode,
+        "===",
+        cleanInput,
+      );
+      return true;
+    }
+
+    return false;
+  });
+
+  if (!foundPatient) {
+    // Tiket belum di-generate (tidak ada di queueStore)
+    console.error("❌ Patient not found. QR data:", decodedText);
+    console.error("🔍 Extracted barcode/patientId:", searchBarcode);
+    console.error(
+      "📋 Available barcodes (first 10):",
+      queueStore.allPatients.slice(0, 10).map((p) => ({
         no: p.no,
         barcode: p.barcode,
-        noAntrian: p.noAntrian?.split(' |')[0]
-      })));
-      
-      saveToHistory({
-        patientId: searchBarcode || decodedText,
-        queueNumber: null,
-        klinikQueueNumber: null,
-        pembayaran: 'N/A',
-        status: 'failed',
-        checkInTime: new Date().toISOString(),
-        checkInDate: new Date().toISOString(),
-        method: 'QR Scan'
-      });
-      
-      const errorMsg = `❌ Tiket Belum Di-generate!\n\nQR Code: ${decodedText}\nBarcode/Patient ID: ${searchBarcode}\n\nTiket belum terdaftar di sistem. Pastikan tiket sudah di-generate terlebih dahulu.`;
-      infoMessage.value = errorMsg;
-      infoAction.value = 'checkin';
-      infoDialog.value = true;
-      showSnackbar('Error', 'Tiket belum terdaftar di sistem. Pastikan tiket sudah di-generate.', 'error', 'mdi-alert-circle');
-      return;
-    }
-    
-    // CATATAN: Validasi processStage dihapus karena terlalu ketat
-    // Yang penting adalah status pasien (waiting/pending), bukan processStage
-    // Pasien yang sudah dipanggil (status: waiting) harus bisa check-in
-    // meskipun processStage-nya bukan 'loket' (bisa 'klinik' atau 'penunjang')
-    // Validasi processStage akan dilakukan di checkInPatient() di queueStore
-    // yang akan mengecek status pasien secara real-time
-    
-    // IMPORTANT: Refresh data pasien dari queueStore untuk mendapatkan status REAL-TIME
-    // Jangan gunakan foundPatient.status karena mungkin sudah stale
-    // Cari ulang pasien dari queueStore dengan EXACT barcode match
-    const freshPatient = queueStore.allPatients.find(p => {
-      const patientBarcode = String(p.barcode || '').trim();
-      // Hanya exact barcode match untuk menghindari false positive
-      return patientBarcode === foundPatient.barcode || 
-             patientBarcode === searchBarcode ||
-             patientBarcode === cleanInput;
+        noAntrian: p.noAntrian?.split(" |")[0],
+      })),
+    );
+
+    saveToHistory({
+      patientId: searchBarcode || decodedText,
+      queueNumber: null,
+      klinikQueueNumber: null,
+      pembayaran: "N/A",
+      status: "failed",
+      checkInTime: new Date().toISOString(),
+      checkInDate: new Date().toISOString(),
+      method: "QR Scan",
     });
-    
-    if (!freshPatient) {
-      console.error('❌ Patient not found in queueStore after refresh');
-      saveToHistory({
-        patientId: foundPatient.barcode,
-        queueNumber: foundPatient.noAntrian,
-        klinikQueueNumber: foundPatient.noAntrian?.split(" |")[0] || foundPatient.noAntrian,
-        pembayaran: foundPatient.pembayaran || 'N/A',
-        status: 'failed',
-        checkInTime: new Date().toISOString(),
-        checkInDate: new Date().toISOString(),
-        method: 'QR Scan',
-        klinik: foundPatient.klinik || 'N/A',
-        kodeKlinik: foundPatient.kodeKlinik || null
-      });
-      
-      const errorMsg = `❌ Pasien tidak ditemukan di sistem setelah refresh data.`;
-      infoMessage.value = errorMsg;
-      infoAction.value = 'checkin';
-      infoDialog.value = true;
-      showSnackbar('Error', 'Pasien tidak ditemukan di sistem', 'error', 'mdi-alert-circle');
-      return;
-    }
-    
-    // Gunakan data pasien yang fresh untuk validasi
-    const patientStatus = freshPatient.status;
-    const klinikQueueNumber = freshPatient.noAntrian?.split(" |")[0] || freshPatient.noAntrian || 'N/A';
-    
-    console.log('🔍 Fresh patient status:', {
-      barcode: freshPatient.barcode,
-      noAntrian: freshPatient.noAntrian,
-      status: patientStatus,
-      processStage: freshPatient.processStage
+
+    const errorMsg = `❌ Tiket Belum Di-generate!\n\nQR Code: ${decodedText}\nBarcode/Patient ID: ${searchBarcode}\n\nTiket belum terdaftar di sistem. Pastikan tiket sudah di-generate terlebih dahulu.`;
+    infoMessage.value = errorMsg;
+    infoAction.value = "checkin";
+    infoDialog.value = true;
+    showSnackbar(
+      "Error",
+      "Tiket belum terdaftar di sistem. Pastikan tiket sudah di-generate.",
+      "error",
+      "mdi-alert-circle",
+    );
+    return;
+  }
+
+  // CATATAN: Validasi processStage dihapus karena terlalu ketat
+  // Yang penting adalah status pasien (waiting/pending), bukan processStage
+  // Pasien yang sudah dipanggil (status: waiting) harus bisa check-in
+  // meskipun processStage-nya bukan 'loket' (bisa 'klinik' atau 'penunjang')
+  // Validasi processStage akan dilakukan di checkInPatient() di queueStore
+  // yang akan mengecek status pasien secara real-time
+
+  // IMPORTANT: Refresh data pasien dari queueStore untuk mendapatkan status REAL-TIME
+  // Jangan gunakan foundPatient.status karena mungkin sudah stale
+  // Cari ulang pasien dari queueStore dengan EXACT barcode match
+  const freshPatient = queueStore.allPatients.find((p) => {
+    const patientBarcode = String(p.barcode || "").trim();
+    // Hanya exact barcode match untuk menghindari false positive
+    return (
+      patientBarcode === foundPatient.barcode ||
+      patientBarcode === searchBarcode ||
+      patientBarcode === cleanInput
+    );
+  });
+
+  if (!freshPatient) {
+    console.error("❌ Patient not found in queueStore after refresh");
+    saveToHistory({
+      patientId: foundPatient.barcode,
+      queueNumber: foundPatient.noAntrian,
+      klinikQueueNumber:
+        foundPatient.noAntrian?.split(" |")[0] || foundPatient.noAntrian,
+      pembayaran: foundPatient.pembayaran || "N/A",
+      status: "failed",
+      checkInTime: new Date().toISOString(),
+      checkInDate: new Date().toISOString(),
+      method: "QR Scan",
+      klinik: foundPatient.klinik || "N/A",
+      kodeKlinik: foundPatient.kodeKlinik || null,
     });
-    
-    // Cek apakah sudah check-in (status === 'di-loket') - gunakan data fresh
-    if (patientStatus === 'di-loket') {
-      // Sudah check-in sebelumnya
-      saveToHistory({
-        patientId: freshPatient.barcode,
-        queueNumber: freshPatient.noAntrian,
-        klinikQueueNumber: klinikQueueNumber,
-        pembayaran: freshPatient.pembayaran || 'N/A',
-        status: 'failed',
-        checkInTime: new Date().toISOString(),
-        checkInDate: new Date().toISOString(),
-        method: 'QR Scan',
-        klinik: freshPatient.klinik || 'N/A',
-        kodeKlinik: freshPatient.kodeKlinik || null
-      });
-      
-      lastCheckInResult.value = {
-        success: false,
-        patientId: freshPatient.barcode,
-        status: 'ALREADY_CHECKED_IN'
-      };
-      
-      const errorMsg = `⚠️ Sudah Check-in!\n\nNomor Antrean ${klinikQueueNumber} sudah melakukan check-in sebelumnya.`;
-      infoMessage.value = errorMsg;
-      infoAction.value = 'checkin';
-      infoDialog.value = true;
-      showSnackbar('Warning', `Tiket ${klinikQueueNumber} sudah check-in sebelumnya`, 'warning', 'mdi-check-circle');
-      return;
-    }
-    
-    if (patientStatus === 'menunggu') {
-      // Status "menunggu" = belum dipanggil oleh admin loket, belum muncul di AntrianLoket
-      // TIDAK BOLEH check-in
-      saveToHistory({
-        patientId: freshPatient.barcode,
-        queueNumber: freshPatient.noAntrian,
-        klinikQueueNumber: klinikQueueNumber,
-        pembayaran: freshPatient.pembayaran || 'N/A',
-        status: 'NOT_ALLOWED',
-        checkInTime: new Date().toISOString(),
-        checkInDate: new Date().toISOString(),
-        method: 'QR Scan',
-        klinik: freshPatient.klinik || 'N/A',
-        kodeKlinik: freshPatient.kodeKlinik || null
-      });
-      
-      lastCheckInResult.value = {
-        success: false,
-        patientId: freshPatient.barcode,
-        status: 'NOT_ALLOWED'
-      };
-      
-      const errorMsg = `⏳ Belum Diizinkan Check-in\n\nNomor Antrean ${klinikQueueNumber} belum dipanggil oleh admin loket. Mohon menunggu hingga nomor antrean Anda dipanggil dan muncul di layar Antrian Loket.`;
-      infoMessage.value = errorMsg;
-      infoAction.value = 'kembali';
-      infoDialog.value = true;
-      showSnackbar('Info', `Tiket ${klinikQueueNumber} belum dipanggil. Mohon menunggu.`, 'info', 'mdi-clock-alert');
-      return;
-    }
-    
-    // Status "waiting" atau "pending" → BOLEH check-in
-    // Panggil checkInPatient untuk validasi dan update status ke "di-loket"
-    // Gunakan barcode pasien yang fresh, bukan decodedText (untuk memastikan format benar)
-    const patientBarcodeForCheckIn = freshPatient.barcode || searchBarcode || decodedText;
-    console.log('🔍 Calling checkInPatient with barcode (fresh):', patientBarcodeForCheckIn);
-    console.log('🔍 Original QR data:', decodedText, '| Extracted barcode:', searchBarcode);
-    const checkInResult = await queueStore.checkInPatient(patientBarcodeForCheckIn);
-    
-    if (checkInResult.success && checkInResult.patient) {
-      // Check-in berhasil
-      const successKlinikQueueNumber = checkInResult.patient.noAntrian?.split(" |")[0] || checkInResult.patient.noAntrian || 'N/A';
-      
-      lastCheckInResult.value = {
-        success: true,
-        patientId: checkInResult.patient.barcode,
-        status: 'ALLOWED'
-      };
-      
-      saveToHistory({
-        patientId: checkInResult.patient.barcode,
-        queueNumber: checkInResult.patient.noAntrian,
-        klinikQueueNumber: successKlinikQueueNumber,
-        pembayaran: checkInResult.patient.pembayaran || 'N/A',
-        status: 'success',
-        checkInTime: new Date().toISOString(),
-        checkInDate: new Date().toISOString(),
-        method: 'QR Scan',
-        klinik: checkInResult.patient.klinik || 'N/A',
-        kodeKlinik: checkInResult.patient.kodeKlinik || null
-      });
-      
-      saveSuccessfulScan(decodedText);
-      const successMsg = `✅ Check-in Berhasil!\n\nPasien ${successKlinikQueueNumber} berhasil melakukan check-in dan status berubah menjadi di loket.`;
-      infoMessage.value = successMsg;
-      infoAction.value = 'checkin';
-      infoDialog.value = true;
-      showSnackbar('Berhasil', `Check-in berhasil. Tiket ${successKlinikQueueNumber} siap diproses.`, 'success', 'mdi-check-circle');
-    } else {
-      // Check-in gagal (misalnya validasi di checkInPatient gagal)
-      saveToHistory({
-        patientId: foundPatient.barcode,
-        queueNumber: foundPatient.noAntrian,
-        klinikQueueNumber: klinikQueueNumber,
-        pembayaran: foundPatient.pembayaran || 'N/A',
-        status: 'failed',
-        checkInTime: new Date().toISOString(),
-        checkInDate: new Date().toISOString(),
-        method: 'QR Scan',
-        klinik: foundPatient.klinik || 'N/A',
-        kodeKlinik: foundPatient.kodeKlinik || null
-      });
-      
-      lastCheckInResult.value = {
-        success: false,
-        patientId: foundPatient.barcode,
-        status: 'FAILED'
-      };
-      
-      const errorMsg = `❌ Check-in Gagal!\n\n${checkInResult.message || 'Status pasien tidak memungkinkan untuk check-in.'}`;
-      infoMessage.value = errorMsg;
-      infoAction.value = 'checkin';
-      infoDialog.value = true;
-      showSnackbar('Gagal', checkInResult.message || 'Check-in gagal dilakukan', 'error', 'mdi-close-circle');
-    }
+
+    const errorMsg = `❌ Pasien tidak ditemukan di sistem setelah refresh data.`;
+    infoMessage.value = errorMsg;
+    infoAction.value = "checkin";
+    infoDialog.value = true;
+    showSnackbar(
+      "Error",
+      "Pasien tidak ditemukan di sistem",
+      "error",
+      "mdi-alert-circle",
+    );
+    return;
+  }
+
+  // Gunakan data pasien yang fresh untuk validasi
+  const patientStatus = freshPatient.status;
+  const klinikQueueNumber =
+    freshPatient.noAntrian?.split(" |")[0] || freshPatient.noAntrian || "N/A";
+
+  console.log("🔍 Fresh patient status:", {
+    barcode: freshPatient.barcode,
+    noAntrian: freshPatient.noAntrian,
+    status: patientStatus,
+    processStage: freshPatient.processStage,
+  });
+
+  // Cek apakah sudah check-in (status === 'di-loket') - gunakan data fresh
+  if (patientStatus === "di-loket") {
+    // Sudah check-in sebelumnya
+    saveToHistory({
+      patientId: freshPatient.barcode,
+      queueNumber: freshPatient.noAntrian,
+      klinikQueueNumber: klinikQueueNumber,
+      pembayaran: freshPatient.pembayaran || "N/A",
+      status: "failed",
+      checkInTime: new Date().toISOString(),
+      checkInDate: new Date().toISOString(),
+      method: "QR Scan",
+      klinik: freshPatient.klinik || "N/A",
+      kodeKlinik: freshPatient.kodeKlinik || null,
+    });
+
+    lastCheckInResult.value = {
+      success: false,
+      patientId: freshPatient.barcode,
+      status: "ALREADY_CHECKED_IN",
+    };
+
+    const errorMsg = `⚠️ Sudah Check-in!\n\nNomor Antrean ${klinikQueueNumber} sudah melakukan check-in sebelumnya.`;
+    infoMessage.value = errorMsg;
+    infoAction.value = "checkin";
+    infoDialog.value = true;
+    showSnackbar(
+      "Warning",
+      `Tiket ${klinikQueueNumber} sudah check-in sebelumnya`,
+      "warning",
+      "mdi-check-circle",
+    );
+    return;
+  }
+
+  if (patientStatus === "menunggu") {
+    // Status "menunggu" = belum dipanggil oleh admin loket, belum muncul di AntrianLoket
+    // TIDAK BOLEH check-in
+    saveToHistory({
+      patientId: freshPatient.barcode,
+      queueNumber: freshPatient.noAntrian,
+      klinikQueueNumber: klinikQueueNumber,
+      pembayaran: freshPatient.pembayaran || "N/A",
+      status: "NOT_ALLOWED",
+      checkInTime: new Date().toISOString(),
+      checkInDate: new Date().toISOString(),
+      method: "QR Scan",
+      klinik: freshPatient.klinik || "N/A",
+      kodeKlinik: freshPatient.kodeKlinik || null,
+    });
+
+    lastCheckInResult.value = {
+      success: false,
+      patientId: freshPatient.barcode,
+      status: "NOT_ALLOWED",
+    };
+
+    const errorMsg = `⏳ Belum Diizinkan Check-in\n\nNomor Antrean ${klinikQueueNumber} belum dipanggil oleh admin loket. Mohon menunggu hingga nomor antrean Anda dipanggil dan muncul di layar Antrian Loket.`;
+    infoMessage.value = errorMsg;
+    infoAction.value = "kembali";
+    infoDialog.value = true;
+    showSnackbar(
+      "Info",
+      `Tiket ${klinikQueueNumber} belum dipanggil. Mohon menunggu.`,
+      "info",
+      "mdi-clock-alert",
+    );
+    return;
+  }
+
+  // Status "waiting" atau "pending" → BOLEH check-in
+  // Panggil checkInPatient untuk validasi dan update status ke "di-loket"
+  // Gunakan barcode pasien yang fresh, bukan decodedText (untuk memastikan format benar)
+  const patientBarcodeForCheckIn =
+    freshPatient.barcode || searchBarcode || decodedText;
+  console.log(
+    "🔍 Calling checkInPatient with barcode (fresh):",
+    patientBarcodeForCheckIn,
+  );
+  console.log(
+    "🔍 Original QR data:",
+    decodedText,
+    "| Extracted barcode:",
+    searchBarcode,
+  );
+  const checkInResult = await queueStore.checkInPatient(
+    patientBarcodeForCheckIn,
+  );
+
+  if (checkInResult.success && checkInResult.patient) {
+    // Check-in berhasil
+    const successKlinikQueueNumber =
+      checkInResult.patient.noAntrian?.split(" |")[0] ||
+      checkInResult.patient.noAntrian ||
+      "N/A";
+
+    lastCheckInResult.value = {
+      success: true,
+      patientId: checkInResult.patient.barcode,
+      status: "ALLOWED",
+    };
+
+    saveToHistory({
+      patientId: checkInResult.patient.barcode,
+      queueNumber: checkInResult.patient.noAntrian,
+      klinikQueueNumber: successKlinikQueueNumber,
+      pembayaran: checkInResult.patient.pembayaran || "N/A",
+      status: "success",
+      checkInTime: new Date().toISOString(),
+      checkInDate: new Date().toISOString(),
+      method: "QR Scan",
+      klinik: checkInResult.patient.klinik || "N/A",
+      kodeKlinik: checkInResult.patient.kodeKlinik || null,
+    });
+
+    saveSuccessfulScan(decodedText);
+    const successMsg = `✅ Check-in Berhasil!\n\nPasien ${successKlinikQueueNumber} berhasil melakukan check-in dan status berubah menjadi di loket.`;
+    infoMessage.value = successMsg;
+    infoAction.value = "checkin";
+    infoDialog.value = true;
+    showSnackbar(
+      "Berhasil",
+      `Check-in berhasil. Tiket ${successKlinikQueueNumber} siap diproses.`,
+      "success",
+      "mdi-check-circle",
+    );
+  } else {
+    // Check-in gagal (misalnya validasi di checkInPatient gagal)
+    saveToHistory({
+      patientId: foundPatient.barcode,
+      queueNumber: foundPatient.noAntrian,
+      klinikQueueNumber: klinikQueueNumber,
+      pembayaran: foundPatient.pembayaran || "N/A",
+      status: "failed",
+      checkInTime: new Date().toISOString(),
+      checkInDate: new Date().toISOString(),
+      method: "QR Scan",
+      klinik: foundPatient.klinik || "N/A",
+      kodeKlinik: foundPatient.kodeKlinik || null,
+    });
+
+    lastCheckInResult.value = {
+      success: false,
+      patientId: foundPatient.barcode,
+      status: "FAILED",
+    };
+
+    const errorMsg = `❌ Check-in Gagal!\n\n${checkInResult.message || "Status pasien tidak memungkinkan untuk check-in."}`;
+    infoMessage.value = errorMsg;
+    infoAction.value = "checkin";
+    infoDialog.value = true;
+    showSnackbar(
+      "Gagal",
+      checkInResult.message || "Check-in gagal dilakukan",
+      "error",
+      "mdi-close-circle",
+    );
+  }
 };
 
 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
+  // 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
@@ -2541,7 +3237,7 @@ watch(infoDialog, (isOpen: boolean) => {
     clearTimeout(autoCloseTimer);
     autoCloseTimer = null;
   }
-  
+
   // Jika dialog dibuka, set timer untuk auto-close setelah 3 detik
   if (isOpen) {
     autoCloseTimer = setTimeout(() => {
@@ -2551,256 +3247,324 @@ watch(infoDialog, (isOpen: boolean) => {
   }
 });
 
-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 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');
+    showSnackbar(
+      "Error",
+      "Mohon isi nomor antrean, barcode, atau ID pasien",
+      "error",
+      "mdi-alert",
+    );
     return;
   }
 
   const inputValue = manualInput.value.trim();
-  
+
   // Extract barcode/patientId dari input (handle format testing dengan pipe)
   const qrData = extractQRData(inputValue);
   const searchBarcode = qrData.barcode; // Barcode/patientId untuk dicari di queueStore
-  
+
   const cleanInput = String(searchBarcode).trim();
   const cleanInputUpper = cleanInput.toUpperCase();
   const originalInput = inputValue.toUpperCase().trim();
-  
-  console.log('🔍 checkInManual called with:', inputValue);
-  console.log('🔍 Extracted barcode/patientId:', searchBarcode);
-  console.log('🔍 Cleaned input:', cleanInput);
-  console.log('🔍 Original input:', originalInput);
-  console.log('📊 Total patients in store:', queueStore.allPatients.length);
-  
+
+  console.log("🔍 checkInManual called with:", inputValue);
+  console.log("🔍 Extracted barcode/patientId:", searchBarcode);
+  console.log("🔍 Cleaned input:", cleanInput);
+  console.log("🔍 Original input:", originalInput);
+  console.log("📊 Total patients in store:", queueStore.allPatients.length);
+
   // Cari pasien dengan dua metode:
   // 1. EXACT barcode match (prioritas tertinggi) - format: YYMMDD + 5 digit (contoh: 26011500001)
   // 2. EXACT nomor antrean match - format: RA020, F-RA001, EA013, dll
   //    Menggunakan matchNoAntrian helper untuk memastikan kode + angka match dengan benar
-  const foundPatient = queueStore.allPatients.find(p => {
+  const foundPatient = queueStore.allPatients.find((p) => {
     if (!p) return false;
-    
+
     // Normalize barcode untuk comparison (remove whitespace, case-insensitive)
-    const patientBarcode = String(p.barcode || '').trim();
-    
+    const patientBarcode = String(p.barcode || "").trim();
+
     // 1. EXACT barcode match (case-insensitive, whitespace-insensitive) - PRIORITAS TERTINGGI
-    if (patientBarcode === cleanInput || 
-        patientBarcode.toLowerCase() === cleanInput.toLowerCase()) {
-      console.log('✅ Found by exact barcode match:', patientBarcode, '===', cleanInput);
+    if (
+      patientBarcode === cleanInput ||
+      patientBarcode.toLowerCase() === cleanInput.toLowerCase()
+    ) {
+      console.log(
+        "✅ Found by exact barcode match:",
+        patientBarcode,
+        "===",
+        cleanInput,
+      );
       return true;
     }
-    
+
     // 2. EXACT nomor antrean match (untuk manual input)
     // Menggunakan matchNoAntrian helper untuk memastikan kode + angka match dengan benar
     // Ini mencegah false positive seperti RA020 terdeteksi sebagai RA002
     if (p.noAntrian && matchNoAntrian(originalInput, p.noAntrian)) {
-      console.log('✅ Found by exact nomor antrean match:', p.noAntrian, '===', originalInput);
+      console.log(
+        "✅ Found by exact nomor antrean match:",
+        p.noAntrian,
+        "===",
+        originalInput,
+      );
       return true;
     }
-    
+
     return false;
   });
-  
+
   if (!foundPatient) {
     // Tiket belum di-generate (tidak ada di queueStore)
-    console.error('❌ Patient not found. Input:', inputValue);
-    console.error('🔍 Extracted barcode/patientId:', searchBarcode);
-    console.error('📋 Available patients (first 10):', queueStore.allPatients.slice(0, 10).map(p => ({
-      no: p.no,
-      barcode: p.barcode,
-      noAntrian: p.noAntrian?.split(' |')[0]
-    })));
-    
+    console.error("❌ Patient not found. Input:", inputValue);
+    console.error("🔍 Extracted barcode/patientId:", searchBarcode);
+    console.error(
+      "📋 Available patients (first 10):",
+      queueStore.allPatients.slice(0, 10).map((p) => ({
+        no: p.no,
+        barcode: p.barcode,
+        noAntrian: p.noAntrian?.split(" |")[0],
+      })),
+    );
+
     saveToHistory({
       patientId: searchBarcode || inputValue,
       queueNumber: null,
       klinikQueueNumber: null,
-      pembayaran: 'N/A',
-      status: 'failed',
+      pembayaran: "N/A",
+      status: "failed",
       checkInTime: new Date().toISOString(),
       checkInDate: new Date().toISOString(),
-      method: 'Manual',
-      klinik: 'N/A',
-      kodeKlinik: null
+      method: "Manual",
+      klinik: "N/A",
+      kodeKlinik: null,
     });
-    
+
     const errorMsg = `❌ Tiket Tidak Ditemukan!\n\nInput: ${inputValue}\n\nTiket dengan nomor antrean atau barcode tersebut tidak ditemukan di sistem.\n\nPastikan:\n- Nomor antrean atau barcode sudah benar\n- Tiket sudah di-generate terlebih dahulu\n- Format input: RA020, F-RA001, atau 26011500001`;
     infoMessage.value = errorMsg;
-    infoAction.value = 'checkin';
+    infoAction.value = "checkin";
     infoDialog.value = true;
-    showSnackbar('Error', 'Tiket tidak ditemukan. Pastikan nomor antrean atau barcode sudah benar.', 'error', 'mdi-alert-circle');
+    showSnackbar(
+      "Error",
+      "Tiket tidak ditemukan. Pastikan nomor antrean atau barcode sudah benar.",
+      "error",
+      "mdi-alert-circle",
+    );
     return;
   }
-  
+
   // CATATAN: Validasi processStage dihapus karena terlalu ketat
   // Yang penting adalah status pasien (waiting/pending), bukan processStage
   // Pasien yang sudah dipanggil (status: waiting) harus bisa check-in
   // meskipun processStage-nya bukan 'loket' (bisa 'klinik' atau 'penunjang')
   // Validasi processStage akan dilakukan di checkInPatient() di queueStore
   // yang akan mengecek status pasien secara real-time
-  
+
   // IMPORTANT: Refresh data pasien dari queueStore untuk mendapatkan status REAL-TIME
   // Jangan gunakan foundPatient.status karena mungkin sudah stale
   // Cari ulang pasien dari queueStore dengan EXACT match (barcode atau nomor antrean)
-  const freshPatient = queueStore.allPatients.find(p => {
+  const freshPatient = queueStore.allPatients.find((p) => {
     if (!p) return false;
-    
+
     // Match by barcode
-    const patientBarcode = String(p.barcode || '').trim();
-    if (patientBarcode === foundPatient.barcode || 
-        patientBarcode === searchBarcode ||
-        patientBarcode === cleanInput) {
+    const patientBarcode = String(p.barcode || "").trim();
+    if (
+      patientBarcode === foundPatient.barcode ||
+      patientBarcode === searchBarcode ||
+      patientBarcode === cleanInput
+    ) {
       return true;
     }
-    
+
     // Match by nomor antrean (jika input adalah nomor antrean)
     if (p.noAntrian && p.no === foundPatient.no) {
       return true;
     }
-    
+
     return false;
   });
-  
+
   if (!freshPatient) {
-    console.error('❌ Patient not found in queueStore after refresh');
+    console.error("❌ Patient not found in queueStore after refresh");
     saveToHistory({
       patientId: foundPatient.barcode,
       queueNumber: foundPatient.noAntrian,
-      klinikQueueNumber: foundPatient.noAntrian?.split(" |")[0] || foundPatient.noAntrian,
-      pembayaran: foundPatient.pembayaran || 'N/A',
-      status: 'failed',
+      klinikQueueNumber:
+        foundPatient.noAntrian?.split(" |")[0] || foundPatient.noAntrian,
+      pembayaran: foundPatient.pembayaran || "N/A",
+      status: "failed",
       checkInTime: new Date().toISOString(),
       checkInDate: new Date().toISOString(),
-      method: 'Manual',
-      klinik: foundPatient.klinik || 'N/A',
-      kodeKlinik: foundPatient.kodeKlinik || null
+      method: "Manual",
+      klinik: foundPatient.klinik || "N/A",
+      kodeKlinik: foundPatient.kodeKlinik || null,
     });
-    
+
     const errorMsg = `❌ Pasien tidak ditemukan di sistem setelah refresh data.`;
     infoMessage.value = errorMsg;
-    infoAction.value = 'checkin';
+    infoAction.value = "checkin";
     infoDialog.value = true;
-    showSnackbar('Error', 'Pasien tidak ditemukan di sistem', 'error', 'mdi-alert-circle');
+    showSnackbar(
+      "Error",
+      "Pasien tidak ditemukan di sistem",
+      "error",
+      "mdi-alert-circle",
+    );
     return;
   }
-  
+
   // Gunakan data pasien yang fresh untuk validasi
   const patientStatus = freshPatient.status;
-  const klinikQueueNumber = freshPatient.noAntrian?.split(" |")[0] || freshPatient.noAntrian || 'N/A';
-  
-  console.log('🔍 Fresh patient status:', {
+  const klinikQueueNumber =
+    freshPatient.noAntrian?.split(" |")[0] || freshPatient.noAntrian || "N/A";
+
+  console.log("🔍 Fresh patient status:", {
     barcode: freshPatient.barcode,
     noAntrian: freshPatient.noAntrian,
     status: patientStatus,
-    processStage: freshPatient.processStage
+    processStage: freshPatient.processStage,
   });
-  
+
   // Cek apakah sudah check-in (status === 'di-loket') - gunakan data fresh
-  if (patientStatus === 'di-loket') {
+  if (patientStatus === "di-loket") {
     // Sudah check-in sebelumnya
     saveToHistory({
       patientId: freshPatient.barcode,
       queueNumber: freshPatient.noAntrian,
       klinikQueueNumber: klinikQueueNumber,
-      pembayaran: freshPatient.pembayaran || 'N/A',
-      status: 'failed',
+      pembayaran: freshPatient.pembayaran || "N/A",
+      status: "failed",
       checkInTime: new Date().toISOString(),
       checkInDate: new Date().toISOString(),
-      method: 'Manual',
-      klinik: freshPatient.klinik || 'N/A',
-      kodeKlinik: freshPatient.kodeKlinik || null
+      method: "Manual",
+      klinik: freshPatient.klinik || "N/A",
+      kodeKlinik: freshPatient.kodeKlinik || null,
     });
-    
+
     lastCheckInResult.value = {
       success: false,
       patientId: freshPatient.barcode,
-      status: 'ALREADY_CHECKED_IN'
+      status: "ALREADY_CHECKED_IN",
     };
-    
+
     const errorMsg = `⚠️ Sudah Check-in!\n\nNomor Antrean ${klinikQueueNumber} sudah melakukan check-in sebelumnya.`;
     infoMessage.value = errorMsg;
-    infoAction.value = 'checkin';
+    infoAction.value = "checkin";
     infoDialog.value = true;
-    showSnackbar('Warning', `Tiket ${klinikQueueNumber} sudah check-in sebelumnya`, 'warning', 'mdi-check-circle');
+    showSnackbar(
+      "Warning",
+      `Tiket ${klinikQueueNumber} sudah check-in sebelumnya`,
+      "warning",
+      "mdi-check-circle",
+    );
     return;
   }
-  
-  if (patientStatus === 'menunggu') {
+
+  if (patientStatus === "menunggu") {
     // Status "menunggu" = belum dipanggil oleh admin loket, belum muncul di AntrianLoket
     // TIDAK BOLEH check-in
     saveToHistory({
       patientId: freshPatient.barcode,
       queueNumber: freshPatient.noAntrian,
       klinikQueueNumber: klinikQueueNumber,
-      pembayaran: freshPatient.pembayaran || 'N/A',
-      status: 'NOT_ALLOWED',
+      pembayaran: freshPatient.pembayaran || "N/A",
+      status: "NOT_ALLOWED",
       checkInTime: new Date().toISOString(),
       checkInDate: new Date().toISOString(),
-      method: 'Manual',
-      klinik: freshPatient.klinik || 'N/A',
-      kodeKlinik: freshPatient.kodeKlinik || null
+      method: "Manual",
+      klinik: freshPatient.klinik || "N/A",
+      kodeKlinik: freshPatient.kodeKlinik || null,
     });
-    
+
     lastCheckInResult.value = {
       success: false,
       patientId: freshPatient.barcode,
-      status: 'NOT_ALLOWED'
+      status: "NOT_ALLOWED",
     };
-    
+
     const errorMsg = `⏳ Belum Diizinkan Check-in\n\nNomor Antrean ${klinikQueueNumber} belum dipanggil oleh admin loket. Mohon menunggu hingga nomor antrean Anda dipanggil dan muncul di layar Antrian Loket.`;
     infoMessage.value = errorMsg;
-    infoAction.value = 'kembali';
+    infoAction.value = "kembali";
     infoDialog.value = true;
-    showSnackbar('Info', `Tiket ${klinikQueueNumber} belum dipanggil. Mohon menunggu.`, 'info', 'mdi-clock-alert');
+    showSnackbar(
+      "Info",
+      `Tiket ${klinikQueueNumber} belum dipanggil. Mohon menunggu.`,
+      "info",
+      "mdi-clock-alert",
+    );
     return;
   }
-  
+
   // Status "waiting" atau "pending" → BOLEH check-in
   // Panggil checkInPatient untuk validasi dan update status ke "di-loket"
   // Gunakan barcode pasien yang fresh, bukan inputValue (untuk memastikan format benar)
-  const patientBarcodeForCheckIn = freshPatient.barcode || searchBarcode || inputValue;
-  console.log('🔍 Calling checkInPatient with barcode (fresh):', patientBarcodeForCheckIn);
-  console.log('🔍 Original input:', inputValue, '| Extracted barcode:', searchBarcode);
-  const checkInResult = await queueStore.checkInPatient(patientBarcodeForCheckIn);
-  
+  const patientBarcodeForCheckIn =
+    freshPatient.barcode || searchBarcode || inputValue;
+  console.log(
+    "🔍 Calling checkInPatient with barcode (fresh):",
+    patientBarcodeForCheckIn,
+  );
+  console.log(
+    "🔍 Original input:",
+    inputValue,
+    "| Extracted barcode:",
+    searchBarcode,
+  );
+  const checkInResult = await queueStore.checkInPatient(
+    patientBarcodeForCheckIn,
+  );
+
   if (checkInResult.success && checkInResult.patient) {
     // Check-in berhasil
-    const successKlinikQueueNumber = checkInResult.patient.noAntrian?.split(" |")[0] || checkInResult.patient.noAntrian || 'N/A';
-    
+    const successKlinikQueueNumber =
+      checkInResult.patient.noAntrian?.split(" |")[0] ||
+      checkInResult.patient.noAntrian ||
+      "N/A";
+
     lastCheckInResult.value = {
       success: true,
       patientId: checkInResult.patient.barcode,
-      status: 'ALLOWED'
+      status: "ALLOWED",
     };
-    
+
     saveToHistory({
       patientId: checkInResult.patient.barcode,
       queueNumber: checkInResult.patient.noAntrian,
       klinikQueueNumber: successKlinikQueueNumber,
-      pembayaran: checkInResult.patient.pembayaran || 'N/A',
-      status: 'success',
+      pembayaran: checkInResult.patient.pembayaran || "N/A",
+      status: "success",
       checkInTime: new Date().toISOString(),
       checkInDate: new Date().toISOString(),
-      method: 'Manual',
-      klinik: checkInResult.patient.klinik || 'N/A',
-      kodeKlinik: checkInResult.patient.kodeKlinik || null
+      method: "Manual",
+      klinik: checkInResult.patient.klinik || "N/A",
+      kodeKlinik: checkInResult.patient.kodeKlinik || null,
     });
-    
+
     const successMsg = `✅ Check-in Berhasil!\n\nPasien ${successKlinikQueueNumber} berhasil melakukan check-in dan status berubah menjadi di loket.`;
     infoMessage.value = successMsg;
-    infoAction.value = 'checkin';
+    infoAction.value = "checkin";
     infoDialog.value = true;
-    showSnackbar('Berhasil', `Check-in manual berhasil. Tiket ${successKlinikQueueNumber} siap diproses.`, 'success', 'mdi-check-circle');
-    
-    manualInput.value = '';
+    showSnackbar(
+      "Berhasil",
+      `Check-in manual berhasil. Tiket ${successKlinikQueueNumber} siap diproses.`,
+      "success",
+      "mdi-check-circle",
+    );
+
+    manualInput.value = "";
     if (manualForm.value) {
       (manualForm.value as any).reset();
     }
@@ -2810,26 +3574,31 @@ const checkInManual = async () => {
       patientId: foundPatient.barcode,
       queueNumber: foundPatient.noAntrian,
       klinikQueueNumber: klinikQueueNumber,
-      pembayaran: foundPatient.pembayaran || 'N/A',
-      status: 'failed',
+      pembayaran: foundPatient.pembayaran || "N/A",
+      status: "failed",
       checkInTime: new Date().toISOString(),
       checkInDate: new Date().toISOString(),
-      method: 'Manual',
-      klinik: foundPatient.klinik || 'N/A',
-      kodeKlinik: foundPatient.kodeKlinik || null
+      method: "Manual",
+      klinik: foundPatient.klinik || "N/A",
+      kodeKlinik: foundPatient.kodeKlinik || null,
     });
-    
+
     lastCheckInResult.value = {
       success: false,
       patientId: foundPatient.barcode,
-      status: 'FAILED'
+      status: "FAILED",
     };
-    
-    const errorMsg = `❌ Check-in Gagal!\n\n${checkInResult.message || 'Status pasien tidak memungkinkan untuk check-in.'}`;
+
+    const errorMsg = `❌ Check-in Gagal!\n\n${checkInResult.message || "Status pasien tidak memungkinkan untuk check-in."}`;
     infoMessage.value = errorMsg;
-    infoAction.value = 'checkin';
+    infoAction.value = "checkin";
     infoDialog.value = true;
-    showSnackbar('Gagal', checkInResult.message || 'Check-in manual gagal dilakukan', 'error', 'mdi-close-circle');
+    showSnackbar(
+      "Gagal",
+      checkInResult.message || "Check-in manual gagal dilakukan",
+      "error",
+      "mdi-close-circle",
+    );
   }
 };
 
@@ -2837,12 +3606,12 @@ const checkInManual = async () => {
 const generateQuickQR = (status: string) => {
   // Check and reset daily first (before generating)
   checkAndResetDaily();
-  
+
   // Use first klinik if none selected
   if (!selectedKlinik.value && klinikOptions.value.length > 0) {
     selectedKlinik.value = klinikOptions.value[0].value;
   }
-  
+
   generateStatus.value = status;
   generateQRCode();
 };
@@ -2850,232 +3619,324 @@ const generateQuickQR = (status: string) => {
 // Generate QR Code function - Similar to Anjungan/[id].vue
 const generateQRCode = async () => {
   if (!selectedKlinik.value) {
-    showSnackbar('Error', 'Mohon pilih Klinik/Poli', 'error', 'mdi-alert');
+    showSnackbar("Error", "Mohon pilih Klinik/Poli", "error", "mdi-alert");
     return;
   }
-  
+
   try {
     // Debug: Check if functions are available
-    console.log('🔍 Checking queueStore functions:', {
+    console.log("🔍 Checking queueStore functions:", {
       generateBarcode: typeof queueStore.generateBarcode,
       generateQueueNumber: typeof queueStore.generateQueueNumber,
       incrementBarcodeCounter: typeof queueStore.incrementBarcodeCounter,
-      allPatients: typeof queueStore.allPatients
+      allPatients: typeof queueStore.allPatients,
     });
-    
+
     // Get clinic data
-    const clinicData = masterStore.klinikList.find((k: any) => k.kode === selectedKlinik.value);
+    const clinicData = masterStore.klinikList.find(
+      (k: any) => k.kode === selectedKlinik.value,
+    );
     if (!clinicData) {
-      showSnackbar('Error', 'Klinik tidak ditemukan', 'error', 'mdi-alert');
+      showSnackbar("Error", "Klinik tidak ditemukan", "error", "mdi-alert");
       return;
     }
-    
+
     // Format clinic object untuk generateQueueNumber (same as Anjungan)
     const clinic = {
       name: clinicData.nama || clinicData.name || clinicData.kode,
-      kode: clinicData.kode
+      kode: clinicData.kode,
     };
-    
+
     // Generate barcode using queueStore (same as Anjungan)
     // Note: allPatients is a ref, so we pass it directly
-    if (!queueStore.generateBarcode || typeof queueStore.generateBarcode !== 'function') {
-      console.error('❌ generateBarcode is not available in queueStore');
-      console.error('Available methods:', Object.keys(queueStore));
-      showSnackbar('Error', 'Fungsi generateBarcode tidak tersedia. Silakan refresh halaman atau restart dev server', 'error', 'mdi-alert');
+    if (
+      !queueStore.generateBarcode ||
+      typeof queueStore.generateBarcode !== "function"
+    ) {
+      console.error("❌ generateBarcode is not available in queueStore");
+      console.error("Available methods:", Object.keys(queueStore));
+      showSnackbar(
+        "Error",
+        "Fungsi generateBarcode tidak tersedia. Silakan refresh halaman atau restart dev server",
+        "error",
+        "mdi-alert",
+      );
       return;
     }
-    
+
     const barcode = queueStore.generateBarcode([], queueStore.allPatients);
-    console.log('✅ Generated barcode:', barcode);
-    
+    console.log("✅ Generated barcode:", barcode);
+
     // Generate queue number using queueStore (same as Anjungan)
     // Format: R/E + Loket (A-N) + 3 digit
     const isEksekutif = false; // Default to reguler
-    
-    if (!queueStore.generateQueueNumber || typeof queueStore.generateQueueNumber !== 'function') {
-      console.error('❌ generateQueueNumber is not available in queueStore');
-      showSnackbar('Error', 'Fungsi generateQueueNumber tidak tersedia. Silakan refresh halaman atau restart dev server', 'error', 'mdi-alert');
+
+    if (
+      !queueStore.generateQueueNumber ||
+      typeof queueStore.generateQueueNumber !== "function"
+    ) {
+      console.error("❌ generateQueueNumber is not available in queueStore");
+      showSnackbar(
+        "Error",
+        "Fungsi generateQueueNumber tidak tersedia. Silakan refresh halaman atau restart dev server",
+        "error",
+        "mdi-alert",
+      );
       return;
     }
-    
-    const queueNumber = queueStore.generateQueueNumber(clinic, selectedPembayaran.value, isEksekutif);
-    console.log('✅ Generated queue number:', queueNumber);
+
+    const queueNumber = queueStore.generateQueueNumber(
+      clinic,
+      selectedPembayaran.value,
+      isEksekutif,
+    );
+    console.log("✅ Generated queue number:", queueNumber);
     const noAntrian = `${queueNumber} | Onsite - ${barcode}`;
-    
+
     // Save generated data
     generateBarcode.value = barcode;
     generateQueueNumber.value = queueNumber;
-    
+
     // QR code hanya berisi barcode saja (sama seperti di thermal print)
     generatedQRData.value = barcode;
-    
+
     // Create patient object for printing (similar to Anjungan)
     const timestamp = new Date();
     generatedPatient.value = {
       barcode: barcode,
       noAntrian: noAntrian,
-      klinik: clinic.name || clinicData.nama || clinicData.name || clinicData.kode,
+      klinik:
+        clinic.name || clinicData.nama || clinicData.name || clinicData.kode,
       kodeKlinik: clinic.kode || clinicData.kode,
       pembayaran: selectedPembayaran.value,
-      status: 'menunggu', // Status awal seperti di Anjungan
-      processStage: 'loket',
-      visitType: 'SEKARANG',
+      status: "menunggu", // Status awal seperti di Anjungan
+      processStage: "loket",
+      visitType: "SEKARANG",
       visitDate: timestamp.toISOString().substring(0, 10),
-      shift: 'Shift 1',
+      shift: "Shift 1",
       createdAt: timestamp.toISOString(),
-      registrationType: 'onsite',
-      fastTrack: 'TIDAK',
-      jamPanggil: `${String(timestamp.getHours()).padStart(2, "0")}:${String(timestamp.getMinutes()).padStart(2, "0")}`
+      registrationType: "onsite",
+      fastTrack: "TIDAK",
+      jamPanggil: `${String(timestamp.getHours()).padStart(2, "0")}:${String(timestamp.getMinutes()).padStart(2, "0")}`,
     };
-    
+
     // Increment barcode counter (same as Anjungan)
     queueStore.incrementBarcodeCounter();
-    
+
     await nextTick();
-    
+
     // Clear previous QR code
-    const qrContainer = document.getElementById('qrcode');
+    const qrContainer = document.getElementById("qrcode");
     if (qrContainer) {
-      qrContainer.innerHTML = '';
-      
+      qrContainer.innerHTML = "";
+
       // Use qrcode package
-      const QRCode = (await import('qrcode')).default;
-      
+      const QRCode = (await import("qrcode")).default;
+
       // Create QR code as data URL (same settings as useThermalPrint)
       const qrDataUrl = await QRCode.toDataURL(generatedQRData.value, {
-        errorCorrectionLevel: 'M',
-        type: 'image/png',
+        errorCorrectionLevel: "M",
+        type: "image/png",
         quality: 1,
         margin: 2,
         width: 400, // Larger preview size
         color: {
-          dark: '#000000',
-          light: '#FFFFFF'
-        }
+          dark: "#000000",
+          light: "#FFFFFF",
+        },
       });
-      
+
       // Create img element and append to container
-      const img = document.createElement('img');
+      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';
+      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);
-      console.log('Generated patient:', generatedPatient.value);
-      showSnackbar('Berhasil!', 'QR Code berhasil di-generate. Silakan scan untuk testing atau cetak tiket', 'success', 'mdi-check-circle');
+
+      console.log("QR Code created successfully:", generatedQRData.value);
+      console.log("Generated patient:", generatedPatient.value);
+      showSnackbar(
+        "Berhasil!",
+        "QR Code berhasil di-generate. Silakan scan untuk testing atau cetak tiket",
+        "success",
+        "mdi-check-circle",
+      );
     } else {
-      showSnackbar('Error', 'Container QR Code tidak ditemukan', 'error', 'mdi-alert');
+      showSnackbar(
+        "Error",
+        "Container QR Code tidak ditemukan",
+        "error",
+        "mdi-alert",
+      );
     }
   } catch (error) {
-    console.error('Error creating QR code:', error);
-    showSnackbar('Error', 'Gagal membuat QR Code. Silakan coba lagi', 'error', 'mdi-alert');
+    console.error("Error creating QR code:", error);
+    showSnackbar(
+      "Error",
+      "Gagal membuat QR Code. Silakan coba lagi",
+      "error",
+      "mdi-alert",
+    );
   }
 };
 
 // Handle print ticket (similar to Anjungan/[id].vue)
 const handlePrintTicket = async () => {
   if (!generatedPatient.value) {
-    showSnackbar('Error', 'Data pasien tidak ditemukan. Silakan generate QR code terlebih dahulu', 'error', 'mdi-alert');
+    showSnackbar(
+      "Error",
+      "Data pasien tidak ditemukan. Silakan generate QR code terlebih dahulu",
+      "error",
+      "mdi-alert",
+    );
     return;
   }
-  
+
   try {
     await printTicketFromPatient(generatedPatient.value);
-    showSnackbar('Berhasil!', 'Tiket berhasil dicetak', 'success', 'mdi-printer');
+    showSnackbar(
+      "Berhasil!",
+      "Tiket berhasil dicetak",
+      "success",
+      "mdi-printer",
+    );
   } catch (error) {
-    console.error('Error printing ticket:', error);
-    showSnackbar('Error', 'Gagal mencetak tiket. Silakan coba lagi', 'error', 'mdi-alert');
+    console.error("Error printing ticket:", error);
+    showSnackbar(
+      "Error",
+      "Gagal mencetak tiket. Silakan coba lagi",
+      "error",
+      "mdi-alert",
+    );
   }
 };
 
 const downloadQR = async () => {
-  const img = document.querySelector('#qrcode img') as HTMLImageElement;
+  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 link = document.createElement("a");
+      const klinikCode = selectedKlinik.value || "UNKNOWN";
       const fileName = `QR-Test-${klinikCode}-${generateQueueNumber.value}-${generateStatus.value}-${Date.now()}.png`;
       link.download = fileName;
       link.href = url;
-      link.style.display = 'none';
+      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');
+      showSnackbar(
+        "Berhasil!",
+        `QR Code berhasil didownload: ${fileName}`,
+        "success",
+        "mdi-download",
+      );
     } catch (error) {
-      console.error('Download error:', error);
+      console.error("Download error:", error);
       // Fallback: use img src directly
-      const link = document.createElement('a');
-      const klinikCode = selectedKlinik.value || 'UNKNOWN';
+      const link = document.createElement("a");
+      const klinikCode = selectedKlinik.value || "UNKNOWN";
       link.download = `QR-Test-${klinikCode}-${generateQueueNumber.value}-${generateStatus.value}.png`;
       link.href = img.src;
       link.click();
-      showSnackbar('Berhasil!', 'QR Code berhasil didownload', 'success', 'mdi-download');
+      showSnackbar(
+        "Berhasil!",
+        "QR Code berhasil didownload",
+        "success",
+        "mdi-download",
+      );
     }
   } else {
-    showSnackbar('Error', 'QR Code belum di-generate. Silakan generate terlebih dahulu', 'error', 'mdi-alert');
+    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;
+  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
-          })
+            "image/png": blob,
+          }),
         ]);
-        showSnackbar('Berhasil!', 'QR Code berhasil disalin ke clipboard', 'success', 'mdi-content-copy');
+        showSnackbar(
+          "Berhasil!",
+          "QR Code berhasil disalin ke clipboard",
+          "success",
+          "mdi-content-copy",
+        );
       } catch (err: any) {
-        console.error('Clipboard error:', err);
+        console.error("Clipboard error:", err);
         // Fallback: download instead
-        showSnackbar('Info', 'Copy ke clipboard tidak didukung. Gunakan tombol Download.', 'info', 'mdi-information');
+        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');
+      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');
+    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;
+  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}-${generateQueueNumber.value}-${generateStatus.value}.png`, { type: 'image/png' });
-      
+      const klinikCode = selectedKlinik.value || "UNKNOWN";
+      const file = new File(
+        [blob],
+        `QR-Test-${klinikCode}-${generateQueueNumber.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}`
+            title: "QR Code Check-in Test",
+            text: `QR Code untuk testing: ${generatedQRData.value}`,
           });
-          showSnackbar('Berhasil!', 'QR Code berhasil dibagikan', 'success', 'mdi-share');
+          showSnackbar(
+            "Berhasil!",
+            "QR Code berhasil dibagikan",
+            "success",
+            "mdi-share",
+          );
         } catch (err: any) {
-          if (err.name !== 'AbortError') {
+          if (err.name !== "AbortError") {
             // Fallback to copy or download
             copyQRToClipboard();
           }
@@ -3085,23 +3946,28 @@ const shareQR = async () => {
         copyQRToClipboard();
       }
     } catch (error) {
-      console.error('Share error:', error);
-      showSnackbar('Error', 'Gagal membagikan QR Code', 'error', 'mdi-alert');
+      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');
+    showSnackbar(
+      "Error",
+      "QR Code belum di-generate. Silakan generate terlebih dahulu",
+      "error",
+      "mdi-alert",
+    );
   }
 };
 
 // History Functions
 const loadHistory = () => {
-  if (typeof window !== 'undefined') {
+  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);
+        console.error("Error loading history:", e);
         checkInHistory.value = [];
       }
     }
@@ -3133,18 +3999,19 @@ const saveToHistory = (item: {
   }
   // Jangan generate nomor baru - biarkan null/undefined jika memang tidak ada
   // Ini memastikan nomor antrean yang ditampilkan sesuai dengan yang ada di tiket
-  
+
   const historyItem = {
     ...item,
-    queueNumber: queueNumber || item.klinikQueueNumber || item.patientId || null,
+    queueNumber:
+      queueNumber || item.klinikQueueNumber || item.patientId || null,
   };
-  
+
   // 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') {
+  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 waitingStatuses = ["NOT_ALLOWED", "pending", "failed"];
     const indexToRemove = checkInHistory.value.findIndex(
       (history: {
         patientId: string;
@@ -3156,27 +4023,32 @@ const saveToHistory = (item: {
         checkInDate: string;
         method: string;
         kodeKlinik?: string;
-      }) => 
-        history.patientId === item.patientId && 
-        waitingStatuses.includes(history.status)
+      }) =>
+        history.patientId === item.patientId &&
+        waitingStatuses.includes(history.status),
     );
-    
+
     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`);
+      console.log(
+        `✅ Menghapus entry lama untuk pasien ${item.patientId} yang masih menunggu`,
+      );
     }
   }
-  
+
   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));
+
+  if (typeof window !== "undefined") {
+    localStorage.setItem(
+      HISTORY_STORAGE_KEY,
+      JSON.stringify(checkInHistory.value),
+    );
   }
 };
 
@@ -3184,21 +4056,30 @@ const deleteHistoryItem = (index: number) => {
   // Index dari paginatedHistory, perlu dikonversi ke index di checkInHistory
   const paginatedItem = paginatedHistory.value[index];
   if (!paginatedItem) return;
-  
+
   // Cari index sebenarnya di checkInHistory
-  const actualIndex = checkInHistory.value.findIndex(h => 
-    h.patientId === paginatedItem.patientId && 
-    h.checkInTime === paginatedItem.checkInTime &&
-    h.method === paginatedItem.method
+  const actualIndex = checkInHistory.value.findIndex(
+    (h) =>
+      h.patientId === paginatedItem.patientId &&
+      h.checkInTime === paginatedItem.checkInTime &&
+      h.method === paginatedItem.method,
   );
-  
+
   if (actualIndex !== -1) {
     checkInHistory.value.splice(actualIndex, 1);
-    if (typeof window !== 'undefined') {
-      localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(checkInHistory.value));
+    if (typeof window !== "undefined") {
+      localStorage.setItem(
+        HISTORY_STORAGE_KEY,
+        JSON.stringify(checkInHistory.value),
+      );
     }
-    showSnackbar('Berhasil', 'Riwayat berhasil dihapus', 'success', 'mdi-check');
-    
+    showSnackbar(
+      "Berhasil",
+      "Riwayat berhasil dihapus",
+      "success",
+      "mdi-check",
+    );
+
     // Reset ke halaman sebelumnya jika halaman saat ini kosong
     if (paginatedHistory.value.length === 0 && historyPage.value > 1) {
       historyPage.value = Math.max(1, historyPage.value - 1);
@@ -3208,18 +4089,23 @@ const deleteHistoryItem = (index: number) => {
 
 const clearHistory = () => {
   checkInHistory.value = [];
-  if (typeof window !== 'undefined') {
+  if (typeof window !== "undefined") {
     localStorage.removeItem(HISTORY_STORAGE_KEY);
   }
-  showSnackbar('Berhasil', 'Semua riwayat berhasil dihapus', 'success', 'mdi-check');
+  showSnackbar(
+    "Berhasil",
+    "Semua riwayat berhasil dihapus",
+    "success",
+    "mdi-check",
+  );
 };
 
 const openHistoryDialog = () => {
   // Pastikan history dimuat ulang saat dialog dibuka
   loadHistory();
   // Reset filter dan pagination saat membuka dialog
-  historySearch.value = '';
-  historyStatusFilter.value = '';
+  historySearch.value = "";
+  historyStatusFilter.value = "";
   historyPage.value = 1;
   historyDialog.value = true;
 };
@@ -3230,13 +4116,13 @@ const openQRHistoryDialog = () => {
 };
 
 const loadScannedQRHistory = () => {
-  if (typeof window !== 'undefined') {
-    const stored = localStorage.getItem('scanned_qr_data');
+  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);
+        console.error("Error loading QR history:", e);
         scannedQRHistory.value = [];
       }
     } else {
@@ -3247,18 +4133,31 @@ const loadScannedQRHistory = () => {
 
 const clearQRHistory = () => {
   scannedQRHistory.value = [];
-  if (typeof window !== 'undefined') {
-    localStorage.removeItem('scanned_qr_data');
+  if (typeof window !== "undefined") {
+    localStorage.removeItem("scanned_qr_data");
   }
-  showSnackbar('Berhasil', 'Semua riwayat QR scan berhasil dihapus', 'success', 'mdi-check');
+  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));
+  if (typeof window !== "undefined") {
+    localStorage.setItem(
+      "scanned_qr_data",
+      JSON.stringify(scannedQRHistory.value),
+    );
   }
-  showSnackbar('Berhasil', 'Riwayat QR scan berhasil dihapus', 'success', 'mdi-check');
+  showSnackbar(
+    "Berhasil",
+    "Riwayat QR scan berhasil dihapus",
+    "success",
+    "mdi-check",
+  );
 };
 
 const useQRData = (qrData: string) => {
@@ -3269,57 +4168,59 @@ const useQRData = (qrData: string) => {
 
 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)
+    filtered = filtered.filter((item) =>
+      item.data.toLowerCase().includes(search),
     );
   }
-  
+
   return filtered;
 });
 
 const filteredHistory = computed(() => {
   // Pastikan history sudah dimuat
-  if (checkInHistory.value.length === 0 && typeof window !== 'undefined') {
+  if (checkInHistory.value.length === 0 && typeof window !== "undefined") {
     loadHistory();
   }
-  
+
   let filtered = [...checkInHistory.value];
-  
+
   // Sort by checkInTime (terbaru di atas)
   filtered.sort((a, b) => {
     const timeA = new Date(a.checkInTime || a.checkInDate || 0).getTime();
     const timeB = new Date(b.checkInTime || b.checkInDate || 0).getTime();
     return timeB - timeA; // Descending order (newest first)
   });
-  
+
   // 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)) ||
-      (item.klinikQueueNumber && item.klinikQueueNumber.toLowerCase().includes(search)) ||
-      (item.method && item.method.toLowerCase().includes(search)) ||
-      (item.klinik && item.klinik.toLowerCase().includes(search))
+    filtered = filtered.filter(
+      (item) =>
+        item.patientId.toLowerCase().includes(search) ||
+        (item.queueNumber && item.queueNumber.toLowerCase().includes(search)) ||
+        (item.klinikQueueNumber &&
+          item.klinikQueueNumber.toLowerCase().includes(search)) ||
+        (item.method && item.method.toLowerCase().includes(search)) ||
+        (item.klinik && item.klinik.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';
+    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;
 });
 
@@ -3344,14 +4245,14 @@ watch([historySearch, historyStatusFilter], () => {
 // 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 todayHistory = checkInHistory.value.filter((item) => {
     const itemDate = new Date(item.checkInDate || item.checkInTime);
-    const itemDateStr = itemDate.toISOString().split('T')[0];
+    const itemDateStr = itemDate.toISOString().split("T")[0];
     return itemDateStr === todayAfterReset;
   });
-  
+
   // Sort by checkInTime (terbaru di atas)
   return todayHistory.sort((a, b) => {
     const timeA = new Date(a.checkInTime || a.checkInDate || 0).getTime();
@@ -3373,91 +4274,93 @@ const paginatedRecentHistory = computed(() => {
 
 // Total pages untuk recent history pagination
 const totalRecentHistoryPages = computed(() => {
-  return Math.ceil(recentHistory.value.length / recentHistoryItemsPerPage.value);
+  return Math.ceil(
+    recentHistory.value.length / recentHistoryItemsPerPage.value,
+  );
 });
 
 const getStatusColor = (status: string) => {
-  if (status === 'ALLOWED' || status === 'success') return 'success';
-  if (status === 'NOT_ALLOWED') return 'warning';
-  if (status === 'failed') return 'error';
-  return 'warning';
+  if (status === "ALLOWED" || status === "success") return "success";
+  if (status === "NOT_ALLOWED") return "warning";
+  if (status === "failed") return "error";
+  return "warning";
 };
 
 const getStatusIcon = (status: string) => {
-  if (status === 'ALLOWED' || status === 'success') return 'mdi-check-circle';
-  if (status === 'NOT_ALLOWED') return 'mdi-clock-alert';
-  if (status === 'failed') return 'mdi-close-circle';
-  return 'mdi-clock-alert';
+  if (status === "ALLOWED" || status === "success") return "mdi-check-circle";
+  if (status === "NOT_ALLOWED") return "mdi-clock-alert";
+  if (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') return 'Menunggu';
-  if (status === 'failed') return 'Gagal';
-  return 'Pending';
+  if (status === "ALLOWED" || status === "success") return "Berhasil";
+  if (status === "NOT_ALLOWED") return "Menunggu";
+  if (status === "failed") return "Gagal";
+  return "Pending";
 };
 
 const getStatusClass = (status: string) => {
-  if (status === 'ALLOWED' || status === 'success') return 'history-success';
-  if (status === 'NOT_ALLOWED') return 'history-pending';
-  if (status === 'failed') return 'history-failed';
-  return 'history-pending';
+  if (status === "ALLOWED" || status === "success") return "history-success";
+  if (status === "NOT_ALLOWED") return "history-pending";
+  if (status === "failed") return "history-failed";
+  return "history-pending";
 };
 
 const formatDateTime = (dateString: string) => {
   const date = new Date(dateString);
   // Format jam dengan titik dua (HH:MM:SS)
-  const timeString = date.toLocaleTimeString('id-ID', { 
-    hour: '2-digit', 
-    minute: '2-digit',
-    second: '2-digit'
+  const timeString = date.toLocaleTimeString("id-ID", {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
   });
-  return timeString.replace(/\./g, ':');
+  return timeString.replace(/\./g, ":");
 };
 
 const formatTime = (dateString: string) => {
   const date = new Date(dateString);
   // Format: HH:MM:SS (menggunakan titik dua)
-  const timeString = date.toLocaleTimeString('id-ID', { 
-    hour: '2-digit', 
-    minute: '2-digit',
-    second: '2-digit'
+  const timeString = date.toLocaleTimeString("id-ID", {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
   });
-  return timeString.replace(/\./g, ':');
+  return timeString.replace(/\./g, ":");
 };
 
 const getCurrentTime = () => {
   // Format jam dengan titik dua (HH:MM:SS)
-  const timeString = new Date().toLocaleTimeString('id-ID', { 
-    hour: '2-digit', 
-    minute: '2-digit',
-    second: '2-digit'
+  const timeString = new Date().toLocaleTimeString("id-ID", {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
   });
-  return timeString.replace(/\./g, ':');
+  return timeString.replace(/\./g, ":");
 };
 
 const formatDate = (dateString: string) => {
   const date = new Date(dateString);
-  return date.toLocaleDateString('id-ID', {
-    day: '2-digit',
-    month: 'short',
-    year: 'numeric'
+  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 => {
+
+  return checkInHistory.value.filter((item) => {
     const itemDate = new Date(item.checkInDate || item.checkInTime);
-    const itemDateStr = itemDate.toISOString().split('T')[0];
-    
+    const itemDateStr = itemDate.toISOString().split("T")[0];
+
     // Only count items from today (after reset time consideration)
     if (itemDateStr !== todayAfterReset) return false;
-    
+
     // Only count successful check-ins
-    return item.status === 'success' || item.status === 'ALLOWED';
+    return item.status === "success" || item.status === "ALLOWED";
   }).length;
 });
 
@@ -3465,58 +4368,61 @@ const statsToday = computed(() => {
 const getTodayAfterReset = (): string => {
   const now = new Date();
   const currentHour = now.getHours();
-  
+
   // If it's before 2 AM, it's still technically "yesterday" operationally
   if (currentHour < RESET_HOUR) {
     const yesterday = new Date(now);
     yesterday.setDate(yesterday.getDate() - 1);
-    return yesterday.toISOString().split('T')[0];
+    return yesterday.toISOString().split("T")[0];
   }
-  
+
   // If it's 2 AM or later, it's "today"
-  return now.toISOString().split('T')[0];
+  return now.toISOString().split("T")[0];
 };
 
 const statsCompleted = computed(() => {
   const todayAfterReset = getTodayAfterReset();
-  
-  return checkInHistory.value.filter(item => {
+
+  return checkInHistory.value.filter((item) => {
     const itemDate = new Date(item.checkInDate || item.checkInTime);
-    const itemDateStr = itemDate.toISOString().split('T')[0];
-    
+    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';
+
+    return item.status === "success" || item.status === "ALLOWED";
   }).length;
 });
 
 // Today stats object for sidebar
 const todayStats = computed(() => {
   const todayAfterReset = getTodayAfterReset();
-  const todayItems = checkInHistory.value.filter(item => {
+  const todayItems = checkInHistory.value.filter((item) => {
     const itemDate = new Date(item.checkInDate || item.checkInTime);
-    const itemDateStr = itemDate.toISOString().split('T')[0];
+    const itemDateStr = itemDate.toISOString().split("T")[0];
     return itemDateStr === todayAfterReset;
   });
-  
-  const successItems = todayItems.filter(item => 
-    item.status === 'success' || item.status === 'ALLOWED'
+
+  const successItems = todayItems.filter(
+    (item) => item.status === "success" || item.status === "ALLOWED",
   );
-  
-  const failedItems = todayItems.filter(item => 
-    item.status === 'failed' || item.status === 'NOT_ALLOWED' || item.status === 'error'
+
+  const failedItems = todayItems.filter(
+    (item) =>
+      item.status === "failed" ||
+      item.status === "NOT_ALLOWED" ||
+      item.status === "error",
   );
-  
-  const qrItems = todayItems.filter(item => item.method === 'QR');
-  const manualItems = todayItems.filter(item => item.method === 'Manual');
-  
+
+  const qrItems = todayItems.filter((item) => item.method === "QR");
+  const manualItems = todayItems.filter((item) => item.method === "Manual");
+
   return {
     total: todayItems.length,
     success: successItems.length,
     failed: failedItems.length,
     qr: qrItems.length,
-    manual: manualItems.length
+    manual: manualItems.length,
   };
 });
 
@@ -3525,20 +4431,20 @@ const statsWaiting = computed(() => {
   // Menghitung pasien dengan status 'menunggu' (belum dipanggil) atau 'anjungan' (sudah dipanggil tapi belum check-in)
   // Di halaman CheckInPasien, kita menghitung total yang masih menunggu check-in (belum + sudah dipanggil)
   try {
-    const loketPatients = queueStore.getPatientsByStage('loket');
+    const loketPatients = queueStore.getPatientsByStage("loket");
     const menungguPatients = loketPatients.value.menunggu || [];
     const anjunganPatients = loketPatients.value.anjungan || [];
-    
+
     // Total pasien yang masih menunggu check-in (belum dipanggil + sudah dipanggil tapi belum check-in)
     return menungguPatients.length + anjunganPatients.length;
   } catch (error) {
-    console.error('Error calculating statsWaiting:', error);
+    console.error("Error calculating statsWaiting:", error);
     return 0;
   }
 });
 
 // Load history on mount
-if (typeof window !== 'undefined') {
+if (typeof window !== "undefined") {
   loadHistory();
   loadScannedQRHistory();
   loadSuccessfulScans();
@@ -3548,7 +4454,7 @@ if (typeof window !== 'undefined') {
 const stickyTopOffset = ref(100);
 
 const updateStickyOffset = () => {
-  const header = document.querySelector('.page-header') as HTMLElement;
+  const header = document.querySelector(".page-header") as HTMLElement;
   if (header) {
     const headerHeight = header.offsetHeight;
     const containerPadding = 16;
@@ -3558,18 +4464,18 @@ const updateStickyOffset = () => {
 
 onMounted(() => {
   updateStickyOffset();
-  window.addEventListener('resize', updateStickyOffset);
+  window.addEventListener("resize", updateStickyOffset);
   // Use nextTick to ensure DOM is fully rendered
   setTimeout(updateStickyOffset, 100);
 });
 
 onUnmounted(() => {
-  window.removeEventListener('resize', updateStickyOffset);
+  window.removeEventListener("resize", updateStickyOffset);
 });
 </script>
 
 <style scoped lang="scss">
-@use '@/assets/scss/colors' as *;
+@use "@/assets/scss/colors" as *;
 
 /* Page Container - Same pattern as AdminLoket.vue */
 .checkin-page-container {
@@ -3593,15 +4499,23 @@ onUnmounted(() => {
 }
 
 .checkin-page-container::before {
-  content: '';
+  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%);
+  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;
 }
@@ -3646,13 +4560,17 @@ onUnmounted(() => {
 }
 
 .header-modern::after {
-  content: '';
+  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%);
+  background: radial-gradient(
+    circle at 50% 0%,
+    rgba(255, 255, 255, 0.1) 0%,
+    transparent 70%
+  );
   pointer-events: none;
 }
 
@@ -3832,7 +4750,7 @@ onUnmounted(() => {
 }
 
 .history-item-compact::before {
-  content: '';
+  content: "";
   position: absolute;
   left: 0;
   top: 0;
@@ -4001,8 +4919,6 @@ onUnmounted(() => {
   margin-top: 2px;
 }
 
-
-
 /* Gap utility untuk flex-wrap */
 .gap-1 {
   gap: 4px;
@@ -4015,13 +4931,13 @@ onUnmounted(() => {
 /* Removed old responsive layout - now handled by content-grid */
 
 @keyframes fadeIn {
-  from { 
-    opacity: 0; 
-    transform: translateY(10px); 
+  from {
+    opacity: 0;
+    transform: translateY(10px);
   }
-  to { 
-    opacity: 1; 
-    transform: translateY(0); 
+  to {
+    opacity: 1;
+    transform: translateY(0);
   }
 }
 
@@ -4033,10 +4949,16 @@ onUnmounted(() => {
   justify-content: flex-start;
   gap: 12px;
   padding: 14px 16px;
-  background: linear-gradient(135deg, rgba($primary-50, 0.8) 0%, rgba($primary-100, 0.6) 100%);
+  background: linear-gradient(
+    135deg,
+    rgba($primary-50, 0.8) 0%,
+    rgba($primary-100, 0.6) 100%
+  );
   border-radius: 12px;
   border: 1px solid rgba($primary-600, 0.12);
-  box-shadow: 0 4px 12px rgba($primary-600, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
+  box-shadow:
+    0 4px 12px rgba($primary-600, 0.08),
+    inset 0 1px 0 rgba(255, 255, 255, 0.8);
   text-align: left;
   position: relative;
   overflow: hidden;
@@ -4047,7 +4969,7 @@ onUnmounted(() => {
 }
 
 .status-header::before {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: 0;
@@ -4058,7 +4980,9 @@ onUnmounted(() => {
 }
 
 .status-header:hover {
-  box-shadow: 0 6px 16px rgba($primary-600, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.8);
+  box-shadow:
+    0 6px 16px rgba($primary-600, 0.12),
+    inset 0 1px 0 rgba(255, 255, 255, 0.8);
   transform: translateY(-1px);
 }
 
@@ -4080,13 +5004,15 @@ onUnmounted(() => {
 }
 
 .status-icon-wrapper::after {
-  content: '';
+  content: "";
   position: absolute;
   inset: 0;
   border-radius: 12px;
   padding: 1px;
   background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), transparent);
-  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
   -webkit-mask-composite: xor;
   mask-composite: exclude;
 }
@@ -4132,7 +5058,11 @@ onUnmounted(() => {
   max-width: 320px;
   min-height: 200px;
   aspect-ratio: 1 / 1;
-  background: linear-gradient(135deg, rgba($primary-50, 0.8) 0%, rgba($primary-100, 0.6) 100%);
+  background: linear-gradient(
+    135deg,
+    rgba($primary-50, 0.8) 0%,
+    rgba($primary-100, 0.6) 100%
+  );
   border-radius: 20px;
   position: relative;
   display: flex;
@@ -4140,14 +5070,18 @@ onUnmounted(() => {
   justify-content: center;
   overflow: hidden;
   border: 3px dashed rgba($primary-600, 0.3);
-  box-shadow: 0 8px 24px rgba($primary-600, 0.15), inset 0 2px 8px rgba(255, 255, 255, 0.5);
+  box-shadow:
+    0 8px 24px rgba($primary-600, 0.15),
+    inset 0 2px 8px rgba(255, 255, 255, 0.5);
   margin: 0 auto;
   transition: all 0.3s ease;
 }
 
 .qr-placeholder:hover {
   border-color: rgba($primary-600, 0.5);
-  box-shadow: 0 12px 32px rgba($primary-600, 0.2), inset 0 2px 8px rgba(255, 255, 255, 0.5);
+  box-shadow:
+    0 12px 32px rgba($primary-600, 0.2),
+    inset 0 2px 8px rgba(255, 255, 255, 0.5);
   transform: translateY(-2px);
 }
 
@@ -4165,7 +5099,9 @@ onUnmounted(() => {
   aspect-ratio: 1 / 1;
   border-radius: 20px;
   overflow: hidden;
-  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2), 0 4px 16px rgba($primary-600, 0.15);
+  box-shadow:
+    0 12px 40px rgba(0, 0, 0, 0.2),
+    0 4px 16px rgba($primary-600, 0.15);
   background: #000;
   position: relative;
   display: flex;
@@ -4177,7 +5113,9 @@ onUnmounted(() => {
 }
 
 .qr-reader-wrapper:hover {
-  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25), 0 6px 20px rgba($primary-600, 0.2);
+  box-shadow:
+    0 16px 48px rgba(0, 0, 0, 0.25),
+    0 6px 20px rgba($primary-600, 0.2);
   border-color: rgba(21, 101, 192, 0.5);
 }
 
@@ -4212,7 +5150,7 @@ onUnmounted(() => {
 }
 
 .qr-reader-wrapper :deep(#qr-reader__scan_region::before) {
-  content: '';
+  content: "";
   position: absolute;
   top: -3px;
   left: -3px;
@@ -4224,7 +5162,8 @@ onUnmounted(() => {
 }
 
 @keyframes pulse-border {
-  0%, 100% {
+  0%,
+  100% {
     opacity: 1;
     transform: scale(1);
   }
@@ -4261,7 +5200,11 @@ onUnmounted(() => {
   justify-content: flex-start;
   margin-top: 8px;
   padding: 6px 10px;
-  background: linear-gradient(135deg, rgba($primary-600, 0.1) 0%, rgba($primary-700, 0.1) 100%);
+  background: linear-gradient(
+    135deg,
+    rgba($primary-600, 0.1) 0%,
+    rgba($primary-700, 0.1) 100%
+  );
   border-radius: 8px;
   color: $primary-600;
   font-weight: 500;
@@ -4350,8 +5293,12 @@ onUnmounted(() => {
 }
 
 @keyframes scan {
-  0% { top: 0; }
-  100% { top: 100%; }
+  0% {
+    top: 0;
+  }
+  100% {
+    top: 100%;
+  }
 }
 
 .qr-icon {
@@ -4361,13 +5308,18 @@ onUnmounted(() => {
 }
 
 @keyframes breathe {
-  0%, 100% { opacity: 0.6; }
-  50% { opacity: 1; }
+  0%,
+  100% {
+    opacity: 0.6;
+  }
+  50% {
+    opacity: 1;
+  }
 }
 
 /* Modern Buttons */
 .btn-primary-modern {
-  background: linear-gradient(135deg, #1565C0 0%, #0D47A1 100%) !important;
+  background: linear-gradient(135deg, #1565c0 0%, #0d47a1 100%) !important;
   color: $neutral-100 !important;
   font-weight: 600;
   text-transform: none;
@@ -4377,19 +5329,26 @@ onUnmounted(() => {
   min-height: 50px !important;
   min-width: 44px !important;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  box-shadow: 0 6px 20px rgba($primary-600, 0.35), 0 2px 8px rgba($primary-600, 0.2) !important;
+  box-shadow:
+    0 6px 20px rgba($primary-600, 0.35),
+    0 2px 8px rgba($primary-600, 0.2) !important;
   position: relative;
   overflow: hidden;
 }
 
 .btn-primary-modern::before {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
-  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(255, 255, 255, 0.2),
+    transparent
+  );
   transition: left 0.5s;
 }
 
@@ -4399,7 +5358,9 @@ onUnmounted(() => {
 
 .btn-primary-modern:hover {
   transform: translateY(-3px);
-  box-shadow: 0 10px 28px rgba($primary-600, 0.45), 0 4px 12px rgba($primary-600, 0.25) !important;
+  box-shadow:
+    0 10px 28px rgba($primary-600, 0.45),
+    0 4px 12px rgba($primary-600, 0.25) !important;
 }
 
 .btn-primary-modern:active {
@@ -4431,19 +5392,26 @@ onUnmounted(() => {
   min-height: 50px !important;
   min-width: 44px !important;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  box-shadow: 0 6px 20px rgba($danger-500, 0.35), 0 2px 8px rgba($danger-500, 0.2) !important;
+  box-shadow:
+    0 6px 20px rgba($danger-500, 0.35),
+    0 2px 8px rgba($danger-500, 0.2) !important;
   position: relative;
   overflow: hidden;
 }
 
 .btn-stop-modern::before {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
-  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(255, 255, 255, 0.2),
+    transparent
+  );
   transition: left 0.5s;
 }
 
@@ -4453,7 +5421,9 @@ onUnmounted(() => {
 
 .btn-stop-modern:hover {
   transform: translateY(-3px);
-  box-shadow: 0 10px 28px rgba($danger-500, 0.45), 0 4px 12px rgba($danger-500, 0.25) !important;
+  box-shadow:
+    0 10px 28px rgba($danger-500, 0.45),
+    0 4px 12px rgba($danger-500, 0.25) !important;
 }
 
 .btn-stop-modern:active {
@@ -4484,16 +5454,16 @@ onUnmounted(() => {
 }
 
 .btn-test-camera {
-  border-color: #1565C0 !important;
-  color: #1565C0 !important;
+  border-color: #1565c0 !important;
+  color: #1565c0 !important;
 }
 
 .btn-test-camera :deep(.v-btn__content) {
-  color: #1565C0 !important;
+  color: #1565c0 !important;
 }
 
 .btn-test-camera :deep(.v-icon) {
-  color: #1565C0 !important;
+  color: #1565c0 !important;
   opacity: 1 !important;
 }
 
@@ -4524,7 +5494,9 @@ onUnmounted(() => {
 .input-modern :deep(.v-field--focused) {
   background: $neutral-100;
   border-color: $primary-600;
-  box-shadow: 0 0 0 4px rgba(21, 101, 192, 0.12), 0 4px 16px rgba($primary-600, 0.15);
+  box-shadow:
+    0 0 0 4px rgba(21, 101, 192, 0.12),
+    0 4px 16px rgba($primary-600, 0.15);
   transform: translateY(-1px);
 }
 
@@ -4558,14 +5530,22 @@ onUnmounted(() => {
 .info-alert-centered {
   border-radius: 12px !important;
   border: 1px solid rgba($primary-600, 0.15) !important;
-  background: linear-gradient(135deg, rgba($primary-50, 0.6), rgba($primary-100, 0.4)) !important;
+  background: linear-gradient(
+    135deg,
+    rgba($primary-50, 0.6),
+    rgba($primary-100, 0.4)
+  ) !important;
 }
 
 .history-header-icon {
   width: 40px;
   height: 40px;
   border-radius: 10px;
-  background: linear-gradient(135deg, rgba($primary-600, 0.1), rgba($primary-400, 0.1));
+  background: linear-gradient(
+    135deg,
+    rgba($primary-600, 0.1),
+    rgba($primary-400, 0.1)
+  );
   display: flex;
   align-items: center;
   justify-content: center;
@@ -4602,7 +5582,11 @@ onUnmounted(() => {
 .quick-actions .v-btn:hover {
   transform: translateY(-2px);
   border-color: $primary-600 !important;
-  background: linear-gradient(135deg, rgba($primary-50, 0.8), rgba($primary-100, 0.6)) !important;
+  background: linear-gradient(
+    135deg,
+    rgba($primary-50, 0.8),
+    rgba($primary-100, 0.6)
+  ) !important;
   box-shadow: 0 6px 16px rgba($primary-600, 0.2) !important;
   color: $primary-700 !important;
 }
@@ -4613,12 +5597,12 @@ onUnmounted(() => {
 }
 
 .quick-actions .v-btn[color="primary"] {
-  color: #1565C0 !important;
-  border-color: #1565C0 !important;
+  color: #1565c0 !important;
+  border-color: #1565c0 !important;
 }
 
 .quick-actions .v-btn[color="primary"] :deep(.v-icon) {
-  color: #1565C0 !important;
+  color: #1565c0 !important;
 }
 
 .qr-code-container {
@@ -4628,7 +5612,7 @@ onUnmounted(() => {
   padding: 16px;
   background: $neutral-100;
   border-radius: 12px;
-  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
 .qr-code-container :deep(canvas) {
@@ -4676,7 +5660,7 @@ onUnmounted(() => {
 }
 
 .dialog-icon {
-  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));
+  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
 }
 
 .success-header {
@@ -4796,7 +5780,6 @@ onUnmounted(() => {
 
 /* Ensure proper column order */
 
-
 .sticky-column {
   position: relative;
 }
@@ -4876,7 +5859,7 @@ onUnmounted(() => {
     z-index: 10;
     margin-left: auto;
   }
-  
+
   .stats-sidebar-enhanced {
     display: flex !important;
     visibility: visible !important;
@@ -4889,7 +5872,7 @@ onUnmounted(() => {
   .content-grid {
     flex-wrap: nowrap !important;
   }
-  
+
   .stats-sidebar-right {
     display: flex !important;
   }
@@ -4917,30 +5900,30 @@ onUnmounted(() => {
   min-height: 48px !important;
   max-height: 48px !important;
   border-radius: 8px !important;
-  
+
   :deep(.v-alert__prepend) {
     margin-right: 4px !important;
   }
-  
+
   :deep(.v-icon) {
     font-size: 16px !important;
   }
-  
+
   :deep(p) {
     font-size: 9px !important;
     line-height: 1.2 !important;
     margin-bottom: 0 !important;
   }
-  
+
   :deep(.font-weight-bold) {
     font-size: 11px !important;
     margin-bottom: 2px !important;
   }
-  
+
   :deep(.text-body-2) {
     font-size: 9px !important;
   }
-  
+
   :deep(.v-alert__content) {
     padding: 0 !important;
   }
@@ -4952,76 +5935,76 @@ onUnmounted(() => {
     max-height: none !important;
     overflow-y: auto !important;
   }
-  
+
   .checkin-page-container :deep(.page-header) {
     margin-left: -8px;
     margin-right: -8px;
     width: calc(100% + 16px);
   }
-  
+
   .content-grid {
     flex-direction: column !important;
     margin: 0 4px !important;
   }
-  
+
   .sticky-column,
   .manual-input-column {
     width: 100% !important;
     max-width: 100% !important;
     margin-bottom: 8px;
   }
-  
+
   .qr-scan-card,
   .manual-input-card {
     max-height: 40vh !important;
     overflow-y: auto !important;
     padding: 12px;
   }
-  
+
   /* Alert box mobile styles */
   :deep(.v-alert) {
     font-size: 12px !important;
     padding: 10px 12px !important;
   }
-  
+
   :deep(.v-alert .v-alert__prepend) {
     margin-right: 8px !important;
   }
-  
+
   :deep(.v-alert .v-icon) {
     font-size: 20px !important;
   }
-  
+
   :deep(.v-alert p) {
     font-size: 11px !important;
     line-height: 1.4 !important;
   }
-  
+
   :deep(.v-alert .font-weight-bold) {
     font-size: 13px !important;
   }
-  
+
   /* QR Scanner mobile */
   .qr-scanner-container {
     margin: 12px 0;
   }
-  
+
   .qr-placeholder {
     max-width: 280px !important;
     min-height: 180px !important;
   }
-  
+
   /* Buttons mobile */
   :deep(.v-btn) {
     font-size: 13px !important;
     min-height: 44px !important;
   }
-  
+
   /* Input fields mobile */
   :deep(.v-text-field) {
     font-size: 14px !important;
   }
-  
+
   :deep(.v-text-field .v-field__input) {
     min-height: 44px !important;
     padding: 8px 12px !important;
@@ -5032,27 +6015,27 @@ onUnmounted(() => {
     top: 0;
     max-height: none;
   }
-  
+
   .stats-footer-horizontal {
     flex-wrap: wrap !important;
     gap: 6px;
     padding: 8px;
   }
-  
+
   .stat-item-footer-enhanced {
     min-width: calc(50% - 6px);
     flex: 1 1 calc(50% - 6px);
     padding: 8px 6px;
   }
-  
+
   .stat-value-footer-enhanced {
     font-size: 13px;
   }
-  
+
   .stat-label-footer-enhanced {
     font-size: 9px;
   }
-  
+
   .stat-icon-footer-enhanced .v-icon {
     font-size: 18px !important;
   }
@@ -5066,12 +6049,16 @@ onUnmounted(() => {
   max-width: 170px;
   min-width: 160px;
   height: fit-content;
-  background: linear-gradient(180deg, rgba($primary-50, 0.98) 0%, rgba($primary-100, 0.92) 100%);
+  background: linear-gradient(
+    180deg,
+    rgba($primary-50, 0.98) 0%,
+    rgba($primary-100, 0.92) 100%
+  );
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   border-radius: 16px;
-  box-shadow: 
-    0 4px 20px rgba($primary-600, 0.15), 
+  box-shadow:
+    0 4px 20px rgba($primary-600, 0.15),
     0 2px 8px rgba($primary-400, 0.1),
     inset 0 1px 0 rgba(255, 255, 255, 0.95);
   border: 1px solid rgba($primary-300, 0.4);
@@ -5079,26 +6066,35 @@ onUnmounted(() => {
   position: relative;
   visibility: visible !important;
   opacity: 1 !important;
-  
+
   &::before {
-    content: '';
+    content: "";
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 4px;
-    background: linear-gradient(90deg, $primary-600 0%, $primary-500 50%, $primary-400 100%);
+    background: linear-gradient(
+      90deg,
+      $primary-600 0%,
+      $primary-500 50%,
+      $primary-400 100%
+    );
     opacity: 0.9;
   }
-  
+
   &::after {
-    content: '';
+    content: "";
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
-    background: radial-gradient(circle at 50% 10%, rgba($primary-200, 0.4) 0%, transparent 60%);
+    background: radial-gradient(
+      circle at 50% 10%,
+      rgba($primary-200, 0.4) 0%,
+      transparent 60%
+    );
     pointer-events: none;
   }
 }
@@ -5112,7 +6108,7 @@ onUnmounted(() => {
   border-bottom: 1px solid rgba($primary-300, 0.3);
   position: relative;
   z-index: 2;
-  
+
   .sidebar-title {
     font-size: 8px;
     font-weight: 700;
@@ -5140,15 +6136,21 @@ onUnmounted(() => {
   width: 100%;
   max-width: 100px;
   height: fit-content;
-  background: linear-gradient(180deg, rgba($primary-50, 0.95) 0%, rgba($primary-100, 0.85) 100%);
+  background: linear-gradient(
+    180deg,
+    rgba($primary-50, 0.95) 0%,
+    rgba($primary-100, 0.85) 100%
+  );
   border-radius: 12px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
+  box-shadow:
+    0 2px 8px rgba(0, 0, 0, 0.08),
+    inset 0 1px 0 rgba(255, 255, 255, 0.9);
   border: 1px solid rgba($primary-600, 0.1);
   position: relative;
   overflow: hidden;
-  
+
   &::before {
-    content: '';
+    content: "";
     position: absolute;
     top: 0;
     left: 0;
@@ -5165,24 +6167,24 @@ onUnmounted(() => {
     top: 20px;
     align-self: flex-start;
   }
-  
+
   .stats-sidebar-enhanced {
     max-height: calc(100vh - 40px);
     overflow-y: auto;
     overflow-x: visible;
-    
+
     &::-webkit-scrollbar {
       width: 3px;
     }
-    
+
     &::-webkit-scrollbar-track {
       background: transparent;
     }
-    
+
     &::-webkit-scrollbar-thumb {
       background: rgba($primary-400, 0.3);
       border-radius: 10px;
-      
+
       &:hover {
         background: rgba($primary-500, 0.5);
       }
@@ -5205,9 +6207,9 @@ onUnmounted(() => {
   background: rgba(255, 255, 255, 0.7);
   border: 1px solid rgba($primary-300, 0.25);
   overflow: hidden;
-  
+
   &::before {
-    content: '';
+    content: "";
     position: absolute;
     left: 0;
     top: 50%;
@@ -5219,11 +6221,11 @@ onUnmounted(() => {
     transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     opacity: 0;
   }
-  
+
   &:hover {
     transform: translateY(-2px);
     box-shadow: 0 4px 12px rgba($primary-600, 0.2);
-    
+
     &::before {
       height: 40px;
       opacity: 1;
@@ -5232,57 +6234,89 @@ onUnmounted(() => {
 }
 
 .stat-item-enhanced.stat-item-primary {
-  background: linear-gradient(135deg, rgba($primary-100, 0.8) 0%, rgba($primary-50, 0.6) 100%);
+  background: linear-gradient(
+    135deg,
+    rgba($primary-100, 0.8) 0%,
+    rgba($primary-50, 0.6) 100%
+  );
   border-color: rgba($primary-400, 0.3);
-  
+
   &::before {
     background: linear-gradient(180deg, $primary-600 0%, $primary-500 100%);
   }
-  
+
   &:hover {
-    background: linear-gradient(135deg, rgba($primary-200, 0.9) 0%, rgba($primary-100, 0.7) 100%);
+    background: linear-gradient(
+      135deg,
+      rgba($primary-200, 0.9) 0%,
+      rgba($primary-100, 0.7) 100%
+    );
     border-color: rgba($primary-500, 0.5);
   }
 }
 
 .stat-item-enhanced.stat-item-success {
-  background: linear-gradient(135deg, rgba($success-100, 0.8) 0%, rgba($success-200, 0.6) 100%);
+  background: linear-gradient(
+    135deg,
+    rgba($success-100, 0.8) 0%,
+    rgba($success-200, 0.6) 100%
+  );
   border-color: rgba($success-400, 0.3);
-  
+
   &::before {
     background: linear-gradient(180deg, $success-600 0%, $success-500 100%);
   }
-  
+
   &:hover {
-    background: linear-gradient(135deg, rgba($success-200, 0.9) 0%, rgba($success-100, 0.7) 100%);
+    background: linear-gradient(
+      135deg,
+      rgba($success-200, 0.9) 0%,
+      rgba($success-100, 0.7) 100%
+    );
     border-color: rgba($success-500, 0.5);
   }
 }
 
 .stat-item-enhanced.stat-item-warning {
-  background: linear-gradient(135deg, rgba($secondary-100, 0.8) 0%, rgba($secondary-50, 0.6) 100%);
+  background: linear-gradient(
+    135deg,
+    rgba($secondary-100, 0.8) 0%,
+    rgba($secondary-50, 0.6) 100%
+  );
   border-color: rgba($secondary-400, 0.3);
-  
+
   &::before {
     background: linear-gradient(180deg, $secondary-600 0%, $secondary-500 100%);
   }
-  
+
   &:hover {
-    background: linear-gradient(135deg, rgba($secondary-200, 0.9) 0%, rgba($secondary-100, 0.7) 100%);
+    background: linear-gradient(
+      135deg,
+      rgba($secondary-200, 0.9) 0%,
+      rgba($secondary-100, 0.7) 100%
+    );
     border-color: rgba($secondary-500, 0.5);
   }
 }
 
 .stat-item-enhanced.stat-item-error {
-  background: linear-gradient(135deg, rgba($danger-100, 0.8) 0%, rgba($danger-200, 0.5) 100%);
+  background: linear-gradient(
+    135deg,
+    rgba($danger-100, 0.8) 0%,
+    rgba($danger-200, 0.5) 100%
+  );
   border-color: rgba($danger-400, 0.3);
-  
+
   &::before {
     background: linear-gradient(180deg, $danger-600 0%, $danger-500 100%);
   }
-  
+
   &:hover {
-    background: linear-gradient(135deg, rgba($danger-200, 0.9) 0%, rgba($danger-100, 0.7) 100%);
+    background: linear-gradient(
+      135deg,
+      rgba($danger-200, 0.9) 0%,
+      rgba($danger-100, 0.7) 100%
+    );
     border-color: rgba($danger-500, 0.5);
   }
 }
@@ -5362,13 +6396,13 @@ onUnmounted(() => {
   background: rgba(255, 255, 255, 0.6);
   border: 1px solid rgba($primary-300, 0.2);
   transition: all 0.2s ease;
-  
+
   &:hover {
     background: rgba(255, 255, 255, 0.9);
     border-color: rgba($primary-400, 0.4);
     transform: translateX(2px);
   }
-  
+
   .text-caption {
     font-size: 9px;
     color: $neutral-700;
@@ -5390,7 +6424,7 @@ onUnmounted(() => {
   padding: 8px 4px;
   border-radius: 10px;
   border: 1px solid transparent;
-  
+
   &:hover {
     transform: translateY(-1px);
     box-shadow: 0 2px 8px rgba($primary-600, 0.15);
@@ -5398,7 +6432,7 @@ onUnmounted(() => {
 }
 
 .stat-item-discord::before {
-  content: '';
+  content: "";
   position: absolute;
   left: 0;
   top: 50%;
@@ -5451,13 +6485,15 @@ onUnmounted(() => {
 }
 
 .stat-icon-discord::after {
-  content: '';
+  content: "";
   position: absolute;
   inset: 0;
   border-radius: 50%;
   padding: 2px;
   background: linear-gradient(135deg, currentColor, transparent);
-  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
   -webkit-mask-composite: xor;
   mask-composite: exclude;
   opacity: 0;
@@ -5483,7 +6519,9 @@ onUnmounted(() => {
   background: #5865f2;
   border-color: #5865f2;
   border-radius: 18px;
-  box-shadow: 0 4px 16px rgba(88, 101, 242, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
+  box-shadow:
+    0 4px 16px rgba(88, 101, 242, 0.4),
+    inset 0 1px 0 rgba(255, 255, 255, 0.2);
 }
 
 .stat-item-primary:hover .stat-icon-discord .v-icon {
@@ -5501,7 +6539,9 @@ onUnmounted(() => {
   background: #57f287;
   border-color: #57f287;
   border-radius: 18px;
-  box-shadow: 0 4px 16px rgba(87, 242, 135, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
+  box-shadow:
+    0 4px 16px rgba(87, 242, 135, 0.4),
+    inset 0 1px 0 rgba(255, 255, 255, 0.2);
 }
 
 .stat-item-success:hover .stat-icon-discord .v-icon {
@@ -5519,7 +6559,9 @@ onUnmounted(() => {
   background: #faa61a;
   border-color: #faa61a;
   border-radius: 18px;
-  box-shadow: 0 4px 16px rgba(250, 166, 26, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
+  box-shadow:
+    0 4px 16px rgba(250, 166, 26, 0.4),
+    inset 0 1px 0 rgba(255, 255, 255, 0.2);
 }
 
 .stat-item-secondary:hover .stat-icon-discord .v-icon {
@@ -5565,13 +6607,13 @@ onUnmounted(() => {
 }
 
 @keyframes slideUp {
-  from { 
-    opacity: 0; 
-    transform: translateY(10px); 
+  from {
+    opacity: 0;
+    transform: translateY(10px);
   }
-  to { 
-    opacity: 1; 
-    transform: translateY(0); 
+  to {
+    opacity: 1;
+    transform: translateY(0);
   }
 }
 
@@ -5587,7 +6629,7 @@ onUnmounted(() => {
 }
 
 .stat-card-modern::before {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: 0;
@@ -5675,7 +6717,7 @@ onUnmounted(() => {
 
 .history-item:hover {
   transform: translateX(4px);
-  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
 .history-success {
@@ -5705,7 +6747,7 @@ onUnmounted(() => {
 }
 
 .history-item-dialog::before {
-  content: '';
+  content: "";
   position: absolute;
   left: 0;
   top: 0;
@@ -5982,52 +7024,52 @@ onUnmounted(() => {
   .checkin-page-container {
     padding: 0 12px 12px 12px !important;
   }
-  
+
   .checkin-page-container :deep(.page-header) {
     margin-left: -8px !important;
     margin-right: -8px !important;
     width: calc(100% + 16px) !important;
   }
-  
+
   /* Removed main-card styles */
-  
+
   .header-modern {
     padding: 6px 16px 4px !important;
   }
-  
+
   .content-modern {
     padding: 16px !important;
     flex: 1;
     min-height: 0;
   }
-  
+
   .header-content {
     flex-direction: column;
     text-align: center;
     gap: 12px;
   }
-  
+
   .header-text {
     text-align: center;
   }
-  
+
   .icon-circle {
     width: 40px;
     height: 40px;
   }
-  
+
   .title-modern {
     font-size: 16px;
   }
-  
+
   .subtitle-modern {
     font-size: 11px;
   }
-  
+
   .content-modern {
     padding: 20px 16px !important;
   }
-  
+
   .status-header {
     padding: 12px 16px;
     flex-direction: column;
@@ -6036,97 +7078,97 @@ onUnmounted(() => {
     text-align: center;
     gap: 8px;
   }
-  
+
   .status-icon-wrapper {
     margin: 0 auto;
     width: 32px;
     height: 32px;
   }
-  
+
   .status-text {
     text-align: center;
     width: 100%;
   }
-  
+
   .status-title {
     font-size: 14px;
   }
-  
+
   .status-subtitle {
     font-size: 11px;
   }
-  
+
   // Sembunyikan elemen sekunder di mobile
   .quick-actions {
     display: none;
   }
-  
+
   .test-camera-section {
     display: none;
   }
-  
+
   // Pastikan touch target size
   .v-btn {
     min-height: 44px !important;
     min-width: 44px !important;
   }
-  
+
   .v-btn--icon {
     width: 44px !important;
     height: 44px !important;
   }
-  
+
   .qr-placeholder {
     max-width: 100%;
     min-height: 200px;
     aspect-ratio: 1 / 1;
   }
-  
+
   .qr-reader-container {
     max-width: 100%;
     overflow: visible;
   }
-  
+
   .qr-reader-wrapper {
     max-width: 100%;
     aspect-ratio: 1 / 1;
     border-radius: 16px;
   }
-  
+
   .qr-reader-wrapper :deep(video) {
     max-width: 100%;
     max-height: 100%;
     object-fit: contain;
   }
-  
+
   .scanner-instruction {
     font-size: 10px;
     padding: 6px 8px;
     margin-top: 6px;
     max-width: 100%;
   }
-  
+
   .scanner-instruction .v-icon {
     font-size: 14px !important;
     margin-right: 6px !important;
   }
-  
+
   .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;
@@ -6136,34 +7178,34 @@ onUnmounted(() => {
     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%;
     min-height: 180px;
     aspect-ratio: 1 / 1;
   }
-  
+
   .qr-reader-wrapper {
     max-width: 100%;
     aspect-ratio: 1 / 1;
   }
-  
+
   /* Hide stats sidebar on mobile */
   .stats-sidebar-right {
     display: none !important;
@@ -6186,13 +7228,13 @@ onUnmounted(() => {
     justify-content: center;
     flex-wrap: nowrap !important;
   }
-  
+
   .qr-scan-card,
   .manual-input-card {
     max-height: calc(100vh - 200px) !important;
     overflow-y: auto;
   }
-  
+
   .stats-sidebar-right {
     margin-top: 0;
     padding-top: 0;
@@ -6204,17 +7246,17 @@ onUnmounted(() => {
     visibility: visible !important;
     opacity: 1 !important;
   }
-  
+
   .sticky-column {
     flex-shrink: 0;
     flex-basis: auto;
   }
-  
+
   .content-grid > .v-col:nth-child(2) {
     flex-shrink: 0;
     flex-basis: auto;
   }
-  
+
   .stats-sidebar-enhanced,
   .stats-sidebar-discord {
     margin: 0;
@@ -6229,20 +7271,20 @@ onUnmounted(() => {
     height: auto !important;
     padding-bottom: 20px !important;
   }
-  
+
   .qr-scan-card,
   .manual-input-card {
     max-height: none !important;
     overflow-y: visible !important;
     height: auto !important;
   }
-  
+
   .content-grid {
     align-items: stretch;
   }
 }
 
-/* Small tablets and large phones (721px to 960px) */  
+/* Small tablets and large phones (721px to 960px) */
 @media (min-width: 721px) and (max-width: 960px) {
   .checkin-page-container {
     max-height: none !important;
@@ -6274,7 +7316,7 @@ onUnmounted(() => {
     overflow-y: visible !important;
     height: auto !important;
   }
-  
+
   .stats-footer-horizontal {
     padding: 6px 8px;
     gap: 4px;
@@ -6287,62 +7329,62 @@ onUnmounted(() => {
   .checkin-page-container {
     padding: 0 8px 8px 8px !important;
   }
-  
+
   .content-grid {
     margin: 0 2px !important;
   }
-  
+
   .qr-scan-card,
   .manual-input-card {
     max-height: 38vh !important;
     border-radius: 8px;
     padding: 8px;
   }
-  
+
   /* Alert box extra small */
   :deep(.v-alert) {
     font-size: 11px !important;
     padding: 8px 10px !important;
     border-radius: 8px !important;
   }
-  
+
   :deep(.v-alert .v-alert__prepend) {
     margin-right: 6px !important;
   }
-  
+
   :deep(.v-alert .v-icon) {
     font-size: 18px !important;
   }
-  
+
   :deep(.v-alert p) {
     font-size: 10px !important;
   }
-  
+
   :deep(.v-alert .font-weight-bold) {
     font-size: 12px !important;
   }
-  
+
   .stats-footer-horizontal {
     padding: 4px 6px;
     gap: 3px;
     border-radius: 8px;
     max-width: calc(100vw - 12px) !important;
   }
-  
+
   .stat-item-footer-enhanced {
     min-width: calc(50% - 3px);
     flex: 1 1 calc(50% - 3px);
     padding: 6px 4px;
   }
-  
+
   .stat-value-footer-enhanced {
     font-size: 11px;
   }
-  
+
   .stat-label-footer-enhanced {
     font-size: 8px;
   }
-  
+
   .stat-icon-footer-enhanced .v-icon {
     font-size: 14px !important;
   }
@@ -6381,7 +7423,11 @@ onUnmounted(() => {
   max-width: calc(100vw - 32px);
   gap: 5px;
   padding: 6px 8px;
-  background: linear-gradient(180deg, rgba($primary-50, 0.98) 0%, rgba($primary-100, 0.92) 100%);
+  background: linear-gradient(
+    180deg,
+    rgba($primary-50, 0.98) 0%,
+    rgba($primary-100, 0.92) 100%
+  );
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   border-radius: 10px;
@@ -6461,65 +7507,102 @@ onUnmounted(() => {
 
 /* Footer enhanced item colors - match sidebar */
 .stat-item-footer-enhanced.stat-item-footer-primary {
-  background: linear-gradient(135deg, rgba($primary-100, 0.8) 0%, rgba($primary-50, 0.6) 100%);
+  background: linear-gradient(
+    135deg,
+    rgba($primary-100, 0.8) 0%,
+    rgba($primary-50, 0.6) 100%
+  );
   border-color: rgba($primary-400, 0.3);
 }
 
 .stat-item-footer-enhanced.stat-item-footer-primary:hover {
-  background: linear-gradient(135deg, rgba($primary-200, 0.9) 0%, rgba($primary-100, 0.7) 100%);
+  background: linear-gradient(
+    135deg,
+    rgba($primary-200, 0.9) 0%,
+    rgba($primary-100, 0.7) 100%
+  );
   border-color: rgba($primary-500, 0.5);
 }
 
 .stat-item-footer-enhanced.stat-item-footer-success {
-  background: linear-gradient(135deg, rgba($success-100, 0.8) 0%, rgba($success-200, 0.6) 100%);
+  background: linear-gradient(
+    135deg,
+    rgba($success-100, 0.8) 0%,
+    rgba($success-200, 0.6) 100%
+  );
   border-color: rgba($success-400, 0.3);
 }
 
 .stat-item-footer-enhanced.stat-item-footer-success:hover {
-  background: linear-gradient(135deg, rgba($success-200, 0.9) 0%, rgba($success-100, 0.7) 100%);
+  background: linear-gradient(
+    135deg,
+    rgba($success-200, 0.9) 0%,
+    rgba($success-100, 0.7) 100%
+  );
   border-color: rgba($success-500, 0.5);
 }
 
 .stat-item-footer-enhanced.stat-item-footer-error {
-  background: linear-gradient(135deg, rgba($danger-100, 0.8) 0%, rgba($danger-200, 0.5) 100%);
+  background: linear-gradient(
+    135deg,
+    rgba($danger-100, 0.8) 0%,
+    rgba($danger-200, 0.5) 100%
+  );
   border-color: rgba($danger-400, 0.3);
 }
 
 .stat-item-footer-enhanced.stat-item-footer-error:hover {
-  background: linear-gradient(135deg, rgba($danger-200, 0.9) 0%, rgba($danger-100, 0.7) 100%);
+  background: linear-gradient(
+    135deg,
+    rgba($danger-200, 0.9) 0%,
+    rgba($danger-100, 0.7) 100%
+  );
   border-color: rgba($danger-500, 0.5);
 }
 
 .stat-item-footer-enhanced.stat-item-footer-info {
-  background: linear-gradient(135deg, rgba($primary-100, 0.8) 0%, rgba($primary-50, 0.6) 100%);
+  background: linear-gradient(
+    135deg,
+    rgba($primary-100, 0.8) 0%,
+    rgba($primary-50, 0.6) 100%
+  );
   border-color: rgba($primary-400, 0.3);
 }
 
 .stat-item-footer-enhanced.stat-item-footer-info:hover {
-  background: linear-gradient(135deg, rgba($primary-200, 0.9) 0%, rgba($primary-100, 0.7) 100%);
+  background: linear-gradient(
+    135deg,
+    rgba($primary-200, 0.9) 0%,
+    rgba($primary-100, 0.7) 100%
+  );
   border-color: rgba($primary-500, 0.5);
 }
 
 .stat-item-footer-enhanced.stat-item-footer-warning {
-  background: linear-gradient(135deg, rgba($secondary-100, 0.8) 0%, rgba($secondary-50, 0.6) 100%);
+  background: linear-gradient(
+    135deg,
+    rgba($secondary-100, 0.8) 0%,
+    rgba($secondary-50, 0.6) 100%
+  );
   border-color: rgba($secondary-400, 0.3);
 }
 
 .stat-item-footer-enhanced.stat-item-footer-warning:hover {
-  background: linear-gradient(135deg, rgba($secondary-200, 0.9) 0%, rgba($secondary-100, 0.7) 100%);
+  background: linear-gradient(
+    135deg,
+    rgba($secondary-200, 0.9) 0%,
+    rgba($secondary-100, 0.7) 100%
+  );
   border-color: rgba($secondary-500, 0.5);
 }
 
-
-
-
 /* Mobile Landscape */
 @media (max-width: 900px) and (orientation: landscape) {
   .qr-reader-wrapper {
     max-width: 100%;
     aspect-ratio: 1 / 1;
   }
-  
+
   .qr-reader-wrapper :deep(video) {
     max-width: 100%;
     max-height: 100%;
@@ -6547,4 +7630,4 @@ onUnmounted(() => {
     padding: 0 16px !important;
   }
 }
-</style>
\ No newline at end of file
+</style>