From 5c142273aabde23012da8942b8105e758abda0ab Mon Sep 17 00:00:00 2001
From: Fanrouver <akbararya34@gmail.com>
Date: Mon, 12 Jan 2026 11:52:45 +0700
Subject: [PATCH] perubahan tiket dan alur antrean

---
 .env example                                  |   6 +-
 .../features/master/loket/LoketFormDialog.vue |   2 +-
 composables/useThermalPrint.ts                | 102 ++-
 pages/Anjungan/Anjungan/[id].vue              | 195 +++--
 pages/Anjungan/AntreanMasuk/[id].vue          |   2 +-
 pages/Anjungan/AntreanMasuk/index.vue         |   9 +-
 pages/Anjungan/AntrianLoket/[id].vue          |   2 +-
 pages/Anjungan/AntrianLoket/index.vue         |   9 +-
 pages/CheckInPasien/checkIn.vue               | 793 +++++++++++++-----
 pages/Setting/MasterLoket.vue                 |   2 +-
 server/api/queue/patients.ts.txt              |  13 +-
 stores/loketStore.js                          |  28 +-
 stores/queueStore.js                          | 227 +++--
 13 files changed, 997 insertions(+), 393 deletions(-)

diff --git a/.env example b/.env example
index c39cd55..7f4462c 100644
--- a/.env example	
+++ b/.env example	
@@ -35,15 +35,15 @@ KEYCLOAK_ISSUER="https://auth.rssa.top/realms/sandbox"
 # AUTH_ORIGIN="http://localhost:3000"
 # AUTH_ORIGIN="http://10.10.150.175:3001"
 # AUTH_ORIGIN="http://0.0.0.0:3000"
-# AUTH_ORIGIN="https://antrean.dev.rssa.id/
-# AUTH_ORIGIN="https://antrean.rssa.id/
+# AUTH_ORIGIN="https://antrean.dev.rssa.id"
+# AUTH_ORIGIN="https://antrean.rssa.id"
 
 #nuxt config.ts dev server host and port
 # HOST="localhost"
 # PORT=3000
 # HOST="http://10.10.150.175:3000"
 # PORT=3000
-# HOST="http://0.0.0.0:3000"
+# HOST="0.0.0.0"
 # PORT=3000
 # HOST="https://antrean.dev.rssa.id/"
 # PORT=3000
diff --git a/components/features/master/loket/LoketFormDialog.vue b/components/features/master/loket/LoketFormDialog.vue
index 2c367d8..980fd54 100644
--- a/components/features/master/loket/LoketFormDialog.vue
+++ b/components/features/master/loket/LoketFormDialog.vue
@@ -22,7 +22,7 @@
               :rules="[v => !!v || 'Nama loket harus diisi']"
               hide-details="auto"
               class="mb-3 input-field"
-              placeholder="Loket 1"
+              placeholder="Loket A"
             />
 
             <v-text-field
diff --git a/composables/useThermalPrint.ts b/composables/useThermalPrint.ts
index 2c7c512..72ec848 100644
--- a/composables/useThermalPrint.ts
+++ b/composables/useThermalPrint.ts
@@ -43,31 +43,36 @@ export const useThermalPrint = () => {
 
   /**
    * Format date untuk tampilan
+   * Format: senin, 12 Jan 2026
    */
   const formatDate = (dateString: string): string => {
     try {
-      const date = dateString ? new Date(dateString) : new Date();
+      let date = dateString ? new Date(dateString) : new Date();
       if (isNaN(date.getTime())) {
-        return new Date().toLocaleDateString('id-ID', {
-          weekday: 'long',
-          year: 'numeric',
-          month: 'long',
-          day: 'numeric'
-        });
+        date = new Date();
       }
-      return date.toLocaleDateString('id-ID', {
-        weekday: 'long',
-        year: 'numeric',
-        month: 'long',
-        day: 'numeric'
-      });
+      
+      // Array nama hari dalam bahasa Indonesia (lowercase)
+      const days = ['minggu', 'senin', 'selasa', 'rabu', 'kamis', 'jumat', 'sabtu'];
+      // Array nama bulan singkat (title case)
+      const months = ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'];
+      
+      const dayName = days[date.getDay()];
+      const day = date.getDate();
+      const month = months[date.getMonth()];
+      const year = date.getFullYear(); // Tahun 4 digit
+      
+      return `${dayName}, ${day} ${month} ${year}`;
     } catch (error) {
-      return new Date().toLocaleDateString('id-ID', {
-        weekday: 'long',
-        year: 'numeric',
-        month: 'long',
-        day: 'numeric'
-      });
+      // Fallback jika error
+      const date = new Date();
+      const days = ['minggu', 'senin', 'selasa', 'rabu', 'kamis', 'jumat', 'sabtu'];
+      const months = ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'];
+      const dayName = days[date.getDay()];
+      const day = date.getDate();
+      const month = months[date.getMonth()];
+      const year = date.getFullYear();
+      return `${dayName}, ${day} ${month} ${year}`;
     }
   };
 
@@ -203,7 +208,8 @@ export const useThermalPrint = () => {
     }
     
     .qr-code-section {
-      margin: 3mm 0;
+      margin-top: -1.5mm;
+      margin-bottom: 1mm;
       text-align: center;
     }
     
@@ -211,8 +217,8 @@ export const useThermalPrint = () => {
       width: 50mm;
       height: 50mm;
       margin: 0 auto;
-      border: 1px solid #000;
-      padding: 2mm;
+      border: none;
+      padding: 0.5mm;
       background: white;
     }
     
@@ -225,7 +231,7 @@ export const useThermalPrint = () => {
     .barcode-number {
       font-size: 10px;
       font-weight: bold;
-      margin-top: 1mm;
+      margin-top: -1mm;
       word-break: break-all;
     }
     
@@ -243,30 +249,43 @@ export const useThermalPrint = () => {
       display: flex;
       justify-content: space-between;
       align-items: flex-start;
-      gap: 4mm;
       padding: 0;
     }
     
-    .info-label {
+    .info-label-text {
       font-weight: bold;
       font-size: 10px;
-      flex: 0 0 38%;
+      text-align: left;
       text-transform: uppercase;
       word-break: keep-all;
     }
     
+    .info-colon {
+      font-weight: bold;
+      font-size: 10px;
+      margin-left: auto;
+      padding-right: 2mm;
+    }
+    
+    .info-label-wrapper {
+      display: flex;
+      width: 22mm;
+      flex-shrink: 0;
+      align-items: flex-start;
+      gap: 1mm;
+    }
+    
     .info-value {
       font-size: 10px;
       font-weight: bold;
-      flex: 1;
       text-align: right;
       word-break: break-word;
     }
     
     .no-antrian {
-      font-size: 18px;
+      font-size: 28px;
       font-weight: bold;
-      margin: 2mm 0;
+      margin: 0.5mm 0;
       letter-spacing: 2px;
       text-transform: uppercase;
     }
@@ -274,8 +293,11 @@ export const useThermalPrint = () => {
     .klinik-name {
       font-size: 14px;
       font-weight: bold;
-      margin: 2mm 0;
+      margin-top: 0.5mm;
+      margin-bottom: 0;
+      padding-bottom: 0;
       text-transform: uppercase;
+      overflow: visible;
     }
     
     .footer {
@@ -373,28 +395,38 @@ export const useThermalPrint = () => {
     
     <div class="info-section">
       <div class="info-row">
-        <span class="info-label">Tanggal:</span>
+        <div class="info-label-wrapper">
+          <span class="info-label-text">Tanggal</span><span class="info-colon">:</span>
+        </div>
         <span class="info-value">${data.tanggal}</span>
       </div>
       
       <div class="info-row">
-        <span class="info-label">Waktu:</span>
+        <div class="info-label-wrapper">
+          <span class="info-label-text">Waktu</span><span class="info-colon">:</span>
+        </div>
         <span class="info-value">${data.waktu}</span>
       </div>
       
       <div class="info-row">
-        <span class="info-label">Shift:</span>
+        <div class="info-label-wrapper">
+          <span class="info-label-text">Shift</span><span class="info-colon">:</span>
+        </div>
         <span class="info-value">${data.shift}</span>
       </div>
       
       <div class="info-row">
-        <span class="info-label">Pembayaran:</span>
+        <div class="info-label-wrapper">
+          <span class="info-label-text">Pembayaran</span><span class="info-colon">:</span>
+        </div>
         <span class="info-value">${data.pembayaran}</span>
       </div>
       
       ${data.namaDokter ? `
       <div class="info-row">
-        <span class="info-label">Dokter:</span>
+        <div class="info-label-wrapper">
+          <span class="info-label-text">Dokter</span><span class="info-colon">:</span>
+        </div>
         <span class="info-value">${data.namaDokter}</span>
       </div>
       ` : ''}
diff --git a/pages/Anjungan/Anjungan/[id].vue b/pages/Anjungan/Anjungan/[id].vue
index 5853818..63a2379 100644
--- a/pages/Anjungan/Anjungan/[id].vue
+++ b/pages/Anjungan/Anjungan/[id].vue
@@ -487,13 +487,13 @@
           Cetak Nomor Antrian
         </v-card-title>
         <v-divider />
-        <v-card-text class="pa-6" v-if="lastRegisteredPatient">
-          <div class="dialog-content">
+        <v-card-text class="pa-6">
+          <div v-if="lastRegisteredPatient" class="dialog-content">
             <div class="text-center mb-4">
               <v-icon size="64" 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] }}</strong>
+                Nomor antrean Anda: <strong>{{ lastRegisteredPatient.noAntrian?.split(" |")[0] || lastRegisteredPatient.noAntrian || 'N/A' }}</strong>
               </p>
             </div>
             
@@ -502,19 +502,19 @@
             <div class="dialog-info">
               <div class="info-row mb-3">
                 <span class="info-label">Klinik:</span>
-                <span class="info-value">{{ lastRegisteredPatient.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 }}</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 }}</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 }}</span>
+                <span class="info-value">{{ lastRegisteredPatient.barcode || 'N/A' }}</span>
               </div>
             </div>
             
@@ -532,6 +532,10 @@
               </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 />
@@ -580,7 +584,7 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, nextTick } from "vue";
+import { ref, computed, onMounted, nextTick, watch } from "vue";
 import { useRoute } from "#app";
 import { useAnjunganStore } from "@/stores/anjunganStore";
 import { useClinicStore } from "@/stores/clinicStore";
@@ -597,6 +601,16 @@ const clinicStore = useClinicStore();
 const queueStore = useQueueStore();
 const { printTicketFromPatient, isPrinting } = useThermalPrint();
 
+// 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));
+  }
+});
+
 const anjunganId = computed(() => {
   const raw = route.params.id;
   const val = Array.isArray(raw) ? raw[0] : raw;
@@ -1031,33 +1045,57 @@ const confirmDoctorSelection = () => {
 };
 
 const registerPatient = async (visitType, paymentType, namaDokter) => {
-  // Register patient to queueStore
-  const result = queueStore.registerPatientFromAnjungan(
-    selectedClinic.value,
-    paymentType,
-    visitType,
-    null,
-    'Shift 1',
-    namaDokter
-  );
-  
-  if (result.success) {
-    const doctorInfo = namaDokter ? ` dengan dokter ${namaDokter}` : '';
-    const message = `Pendaftaran ${selectedClinic.value.name} untuk kunjungan HARI INI dengan pembayaran ${paymentType}${doctorInfo} berhasil diproses. Nomor antrean: ${result.patient.noAntrian.split(" |")[0]}`;
-    showSnackbar(message, "success");
+  try {
+    // Validasi bahwa fungsi registerPatientFromAnjungan ada
+    if (!queueStore) {
+      console.error('❌ queueStore is not initialized');
+      showSnackbar('Error', 'Store tidak ter-initialize. Silakan refresh halaman.', 'error');
+      return;
+    }
     
-    // Simpan data pasien untuk print
-    lastRegisteredPatient.value = result.patient;
+    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('Error', 'Fungsi registrasi tidak tersedia. Silakan refresh halaman.', 'error');
+      return;
+    }
     
-    // Tampilkan dialog print
-    showPrintDialog.value = true;
-  } else {
-    showSnackbar(result.message || "Gagal melakukan pendaftaran", "error");
+    // Register patient to queueStore
+    const result = queueStore.registerPatientFromAnjungan(
+      selectedClinic.value,
+      paymentType,
+      visitType,
+      null,
+      'Shift 1',
+      namaDokter
+    );
+    
+    if (result && result.success && result.patient) {
+      const doctorInfo = namaDokter ? ` dengan dokter ${namaDokter}` : '';
+      const message = `Pendaftaran ${selectedClinic.value.name} untuk kunjungan HARI INI dengan pembayaran ${paymentType}${doctorInfo} berhasil diproses. Nomor antrean: ${result.patient.noAntrian?.split(" |")[0] || 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);
+      
+      // 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);
+    } else {
+      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');
+  } finally {
+    selectedClinic.value = null;
+    selectedDoctor.value = null;
+    pendingPaymentType.value = null;
   }
-  
-  selectedClinic.value = null;
-  selectedDoctor.value = null;
-  pendingPaymentType.value = null;
 };
 
 const submitBooking = async () => {
@@ -1078,36 +1116,60 @@ const submitBooking = async () => {
 
   showBookingFormDialog.value = false;
   
-  // Register patient to queueStore for future visit
-  const paymentType = bookingForm.value.payment === 'BPJS' ? 'BPJS' : 'UMUM';
-  const namaDokter = isEksekutif.value ? bookingForm.value.doctor : null;
-  
-  const result = queueStore.registerPatientFromAnjungan(
-    selectedClinic.value,
-    paymentType,
-    'JADWAL_LAIN',
-    bookingForm.value.date,
-    bookingForm.value.shift,
-    namaDokter
-  );
-  
-  if (result.success) {
-    const doctorInfo = namaDokter ? ` dengan dokter ${namaDokter}` : '';
-    const message = `Jadwal kunjungan ${selectedClinic.value.name} pada ${bookingForm.value.date} - ${bookingForm.value.shift} (${paymentType})${doctorInfo} berhasil disimpan. Nomor antrean: ${result.patient.noAntrian.split(" |")[0]}`;
-    showSnackbar(message, "success");
+  try {
+    // Register patient to queueStore for future visit
+    const paymentType = bookingForm.value.payment === 'BPJS' ? 'BPJS' : 'UMUM';
+    const namaDokter = isEksekutif.value ? bookingForm.value.doctor : null;
     
-    // Simpan data pasien untuk print
-    lastRegisteredPatient.value = result.patient;
+    // Validasi bahwa fungsi registerPatientFromAnjungan ada
+    if (!queueStore) {
+      console.error('❌ queueStore is not initialized');
+      showSnackbar('Error', 'Store tidak ter-initialize. Silakan refresh halaman.', 'error');
+      return;
+    }
     
-    // Tampilkan dialog print
-    showPrintDialog.value = true;
-  } else {
-    showSnackbar(result.message || "Gagal menyimpan jadwal", "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('Error', 'Fungsi registrasi tidak tersedia. Silakan refresh halaman.', 'error');
+      return;
+    }
+    
+    const result = queueStore.registerPatientFromAnjungan(
+      selectedClinic.value,
+      paymentType,
+      'JADWAL_LAIN',
+      bookingForm.value.date,
+      bookingForm.value.shift,
+      namaDokter
+    );
+    
+    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'}`;
+      showSnackbar(message, "success");
+      
+      // Simpan data pasien untuk print
+      lastRegisteredPatient.value = result.patient;
+      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);
+    } else {
+      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');
+  } finally {
+    selectedClinic.value = null;
+    selectedDoctor.value = null;
+    bookingForm.value.doctor = null;
   }
-  
-  selectedClinic.value = null;
-  selectedDoctor.value = null;
-  bookingForm.value.doctor = null;
 };
 
 const handlePrintTicket = async () => {
@@ -1133,9 +1195,18 @@ const backToList = () => {
   navigateTo("/anjungan/anjungan");
 };
 
-const navigateToCheckIn = () => {
-  navigateTo("/check-in-pasien/check-in");
-};
+// Watch showPrintDialog untuk debugging
+watch(showPrintDialog, (newVal) => {
+  console.log('🔔 showPrintDialog changed:', newVal);
+  if (newVal) {
+    console.log('📋 lastRegisteredPatient:', lastRegisteredPatient.value);
+  }
+});
+
+// Watch lastRegisteredPatient untuk debugging
+watch(lastRegisteredPatient, (newVal) => {
+  console.log('🔔 lastRegisteredPatient changed:', newVal);
+}, { deep: true });
 </script>
 
 <style scoped lang="scss">
diff --git a/pages/Anjungan/AntreanMasuk/[id].vue b/pages/Anjungan/AntreanMasuk/[id].vue
index 7f7acbf..1dfecf8 100644
--- a/pages/Anjungan/AntreanMasuk/[id].vue
+++ b/pages/Anjungan/AntreanMasuk/[id].vue
@@ -25,7 +25,7 @@
     <div class="queue-grid-container">
       <!-- Loket Header -->
       <div class="loket-header">
-        <h2 class="loket-title">{{ loketData?.namaLoket || 'LOKET 1' }}</h2>
+        <h2 class="loket-title">{{ loketData?.namaLoket || 'LOKET A' }}</h2>
       </div>
 
       <!-- Patient Cards Grid (like AdminLoket) -->
diff --git a/pages/Anjungan/AntreanMasuk/index.vue b/pages/Anjungan/AntreanMasuk/index.vue
index e0523d4..451464a 100644
--- a/pages/Anjungan/AntreanMasuk/index.vue
+++ b/pages/Anjungan/AntreanMasuk/index.vue
@@ -22,7 +22,7 @@
           <v-icon size="32" color="primary">mdi-counter</v-icon>
           <div class="loket-info">
             <h3 class="loket-name">{{ loket.namaLoket }}</h3>
-            <p class="loket-details">No. {{ loket.no }}</p>
+            <p class="loket-details">No. {{ numberToLetter(loket.no) }}</p>
           </div>
         </div>
         
@@ -100,6 +100,13 @@ definePageMeta({
 const masterStore = useMasterStore();
 const route = useRoute();
 
+// Helper function: Convert nomor loket ke huruf (1 -> A, 2 -> B, dst)
+const numberToLetter = (num) => {
+  if (num < 1) return 'A';
+  const charCode = 64 + num;
+  return String.fromCharCode(Math.min(charCode, 90));
+};
+
 // Get all lokets
 // Untuk saat ini, hanya menampilkan loket 1
 // Nanti setiap loket akan menampilkan data yang berbeda
diff --git a/pages/Anjungan/AntrianLoket/[id].vue b/pages/Anjungan/AntrianLoket/[id].vue
index 3c8d245..d323f05 100644
--- a/pages/Anjungan/AntrianLoket/[id].vue
+++ b/pages/Anjungan/AntrianLoket/[id].vue
@@ -159,7 +159,7 @@ const allLokets = computed(() => {
 const getDefaultLoket = () => {
   const allLoketsData = loketStore.loketData?.value || loketStore.loketData || []
   const loket1 = allLoketsData.find(l => l.id === 1 || l.no === 1)
-  return loket1 ? loket1.namaLoket : 'Loket 1'
+  return loket1 ? loket1.namaLoket : 'Loket A'
 }
 
 // Display lokets with their queues
diff --git a/pages/Anjungan/AntrianLoket/index.vue b/pages/Anjungan/AntrianLoket/index.vue
index ee2965e..aa86f0f 100644
--- a/pages/Anjungan/AntrianLoket/index.vue
+++ b/pages/Anjungan/AntrianLoket/index.vue
@@ -22,7 +22,7 @@
           <v-icon size="32" color="primary-600">mdi-view-dashboard</v-icon>
           <div class="loket-info">
             <h3 class="loket-name">{{ loket.namaLoket }}</h3>
-            <p class="loket-details">No. {{ loket.no }}</p>
+            <p class="loket-details">No. {{ numberToLetter(loket.no) }}</p>
           </div>
         </div>
         
@@ -100,6 +100,13 @@ definePageMeta({
 const loketStore = useLoketStore();
 const route = useRoute();
 
+// Helper function: Convert nomor loket ke huruf (1 -> A, 2 -> B, dst)
+const numberToLetter = (num) => {
+  if (num < 1) return 'A';
+  const charCode = 64 + num;
+  return String.fromCharCode(Math.min(charCode, 90));
+};
+
 // Get all lokets
 const allLokets = computed(() => {
   return loketStore.loketData?.value || loketStore.loketData || [];
diff --git a/pages/CheckInPasien/checkIn.vue b/pages/CheckInPasien/checkIn.vue
index a259202..8d50c7b 100644
--- a/pages/CheckInPasien/checkIn.vue
+++ b/pages/CheckInPasien/checkIn.vue
@@ -315,74 +315,67 @@
                               >
                                 <v-card-text class="pa-3">
                                   <div class="history-item-content">
-                                    <!-- Status & Method Chips -->
-                                    <div class="d-flex align-center flex-wrap gap-1 mb-2">
-                                      <v-chip
-                                        :color="getStatusColor(item.status)"
-                                        size="x-small"
-                                        density="compact"
-                                        class="history-status-chip"
-                                      >
-                                        <v-icon start size="12">{{ getStatusIcon(item.status) }}</v-icon>
-                                        {{ getStatusText(item.status) }}
-                                      </v-chip>
-                                      <v-chip
-                                        color="grey-lighten-1"
-                                        size="x-small"
-                                        variant="text"
-                                        density="compact"
-                                        class="history-method-chip"
-                                      >
-                                        {{ item.method }}
-                                      </v-chip>
-                                    </div>
-                                    
-                                    <!-- Nomor Antrean -->
-                                    <div class="mb-2">
-                                      <p class="text-body-2 font-weight-medium mb-0 history-queue-number">
+                                    <!-- Top Row: Status & Method (Left) + Queue Number (Right) -->
+                                    <div class="d-flex align-center justify-space-between mb-2">
+                                      <div class="d-flex align-center flex-wrap gap-1">
+                                        <v-chip
+                                          :color="getStatusColor(item.status)"
+                                          size="x-small"
+                                          density="compact"
+                                          class="history-status-chip"
+                                        >
+                                          <v-icon start size="12">{{ getStatusIcon(item.status) }}</v-icon>
+                                          {{ getStatusText(item.status) }}
+                                        </v-chip>
+                                        <v-chip
+                                          color="grey-lighten-1"
+                                          size="x-small"
+                                          variant="text"
+                                          density="compact"
+                                          class="history-method-chip"
+                                        >
+                                          {{ item.method }}
+                                        </v-chip>
+                                      </div>
+                                      <!-- Queue Number (Right) -->
+                                      <div class="history-queue-number-right">
                                         <v-icon size="14" class="mr-1" :color="secondaryColor">mdi-ticket</v-icon>
-                                        {{ item.klinikQueueNumber || item.queueNumber || 'N/A' }}
-                                      </p>
+                                        <span class="text-body-2 font-weight-medium">{{ item.klinikQueueNumber || item.queueNumber || 'N/A' }}</span>
+                                      </div>
                                     </div>
                                     
-                                    <!-- Patient ID & Pembayaran Chips -->
-                                    <div class="d-flex align-center flex-wrap gap-1 mb-2">
-                                      <v-chip
-                                        v-if="item.patientId"
-                                        size="x-small"
-                                        :color="primaryColor"
-                                        variant="tonal"
-                                        density="compact"
-                                        class="history-patient-chip"
-                                      >
-                                        <v-icon start size="12">mdi-account-circle</v-icon>
-                                        {{ item.patientId }}
-                                      </v-chip>
-                                      <v-chip
-                                        v-if="item.pembayaran && item.pembayaran !== 'N/A'"
-                                        size="x-small"
-                                        :color="primaryColor"
-                                        variant="tonal"
-                                        density="compact"
-                                        class="history-payment-chip"
-                                      >
-                                        <v-icon start size="12">mdi-credit-card</v-icon>
-                                        {{ item.pembayaran }}
-                                      </v-chip>
-                                    </div>
-                                    
-                                    <!-- Time -->
-                                    <div class="d-flex align-center">
-                                      <v-chip
-                                        size="x-small"
-                                        variant="text"
-                                        color="grey-darken-1"
-                                        density="compact"
-                                        class="history-time-chip"
-                                      >
-                                        <v-icon start size="12">mdi-clock-outline</v-icon>
-                                        {{ formatTime(item.checkInTime) }}
-                                      </v-chip>
+                                    <!-- Bottom Row: Time (Left) + Patient ID & Payment (Right) -->
+                                    <div class="d-flex align-center justify-space-between">
+                                      <!-- Time (Left) -->
+                                      <div class="history-time-left">
+                                        <v-icon size="14" class="mr-1" color="grey-darken-1">mdi-clock-outline</v-icon>
+                                        <span class="text-body-2 text-grey-darken-1">{{ formatTime(item.checkInTime) }}</span>
+                                      </div>
+                                      <!-- Patient ID & Payment (Right) -->
+                                      <div class="d-flex align-center flex-wrap gap-1">
+                                        <v-chip
+                                          v-if="item.patientId"
+                                          size="x-small"
+                                          :color="primaryColor"
+                                          variant="tonal"
+                                          density="compact"
+                                          class="history-patient-chip"
+                                        >
+                                          <v-icon start size="12">mdi-account-circle</v-icon>
+                                          {{ item.patientId }}
+                                        </v-chip>
+                                        <v-chip
+                                          v-if="item.pembayaran && item.pembayaran !== 'N/A'"
+                                          size="x-small"
+                                          :color="primaryColor"
+                                          variant="tonal"
+                                          density="compact"
+                                          class="history-payment-chip"
+                                        >
+                                          <v-icon start size="12">mdi-credit-card</v-icon>
+                                          {{ item.pembayaran }}
+                                        </v-chip>
+                                      </div>
                                     </div>
                                   </div>
                                 </v-card-text>
@@ -680,7 +673,7 @@
       class="blur-dialog"
     >
       <v-card class="rounded-xl dialog-card" elevation="24">
-        <div class="dialog-header text-center pa-8" :class="lastCheckInResult?.success && infoAction === 'checkin' ? 'success-header' : lastCheckInResult?.status === 'NOT_ALLOWED' ? 'warning-header' : 'error-header'">
+        <div class="dialog-header text-center pa-8" :class="lastCheckInResult?.success && infoAction === 'checkin' ? 'success-header' : lastCheckInResult?.status === 'NOT_ALLOWED' ? 'warning-header' : lastCheckInResult?.status === 'ALREADY_CHECKED_IN' ? 'warning-header' : 'error-header'">
           <div class="decorative-circles">
             <div class="circle circle-1"></div>
             <div class="circle circle-2"></div>
@@ -688,9 +681,9 @@
           </div>
           
           <div class="icon-wrapper mb-4">
-            <div class="icon-bg" :class="lastCheckInResult?.success && infoAction === 'checkin' ? 'icon-bg-success' : lastCheckInResult?.status === 'NOT_ALLOWED' ? 'icon-bg-warning' : 'icon-bg-error'">
+            <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="64" color="white" class="dialog-icon">
-                {{ lastCheckInResult?.success && infoAction === 'checkin' ? 'mdi-check-circle' : lastCheckInResult?.status === 'NOT_ALLOWED' ? 'mdi-alert-circle' : 'mdi-close-circle' }}
+                {{ 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>
@@ -700,23 +693,27 @@
               ? '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-3">
             <v-chip 
               :color="lastCheckInResult?.success && infoAction === 'checkin' ? 'white' : 'white'" 
-              :text-color="lastCheckInResult?.success && infoAction === 'checkin' ? 'success' : lastCheckInResult?.status === 'NOT_ALLOWED' ? 'orange' : 'error'"
+              :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="16">
-                {{ lastCheckInResult?.success && infoAction === 'checkin' ? 'mdi-check' : lastCheckInResult?.status === 'NOT_ALLOWED' ? 'mdi-clock-alert' : 'mdi-close-circle' }}
+                {{ 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>
@@ -725,8 +722,8 @@
         <v-card-text class="pa-8">
           <div class="message-container">
             <div class="message-icon mb-4">
-              <v-icon :color="lastCheckInResult?.success && infoAction === 'checkin' ? 'success' : lastCheckInResult?.status === 'NOT_ALLOWED' ? 'orange' : 'error'" size="32">
-                {{ lastCheckInResult?.success && infoAction === 'checkin' ? 'mdi-check-circle' : lastCheckInResult?.status === 'NOT_ALLOWED' ? 'mdi-clock-alert' : 'mdi-close-circle' }}
+              <v-icon :color="lastCheckInResult?.success && infoAction === 'checkin' ? 'success' : lastCheckInResult?.status === 'NOT_ALLOWED' ? 'orange' : lastCheckInResult?.status === 'ALREADY_CHECKED_IN' ? 'orange' : 'error'" size="32">
+                {{ 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>
             
@@ -734,10 +731,10 @@
             
             <v-divider class="my-4"></v-divider>
             
-            <div v-if="lastCheckInResult" class="instruction-box pa-4 rounded-lg" :class="lastCheckInResult.success && infoAction === 'checkin' ? 'instruction-success' : 'instruction-warning'">
+            <div v-if="lastCheckInResult" class="instruction-box pa-4 rounded-lg" :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' : 'orange'" class="mr-3 mt-1">
-                  {{ lastCheckInResult.success && infoAction === 'checkin' ? 'mdi-check-circle' : 'mdi-timer-sand' }}
+                <v-icon :color="lastCheckInResult.success && infoAction === 'checkin' ? 'success' : lastCheckInResult?.status === 'ALREADY_CHECKED_IN' ? 'orange' : 'orange'" class="mr-3 mt-1">
+                  {{ 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-1 font-weight-medium mb-1">
@@ -748,6 +745,8 @@
                       ? '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>
@@ -2065,6 +2064,87 @@ onUnmounted(async () => {
   cameraReady.value = false;
 });
 
+// Helper function untuk extract kode dan angka dari noAntrian
+// Contoh: "UM0014 | Onsite - ..." -> { kode: "UM", angka: "0014" }
+const extractKodeAndAngka = (noAntrian: string): { kode: string; angka: string } | null => {
+  if (!noAntrian) return null;
+  const match = noAntrian.toUpperCase().match(/^([A-Z]+)(\d+)/);
+  if (match) {
+    return { kode: match[1], angka: match[2] };
+  }
+  return null;
+};
+
+// Helper function untuk membandingkan input dengan noAntrian (kode + angka harus match)
+// Ini mencegah false positive ketika angka sama tapi kode beda (misalnya UM0014 vs AN0014)
+const matchNoAntrian = (input: string, noAntrian: string): boolean => {
+  if (!input || !noAntrian) return false;
+  
+  const cleanInput = String(input).trim().toUpperCase();
+  const noAntrianUpper = String(noAntrian).toUpperCase();
+  
+  // 1. Extract kode + angka dari noAntrian (misalnya "UM0014 | ..." -> kode: "UM", angka: "0014")
+  const noAntrianParts = extractKodeAndAngka(noAntrian);
+  if (!noAntrianParts) {
+    // Jika noAntrian tidak punya format kode+angka, gunakan exact match saja
+    return noAntrianUpper === cleanInput;
+  }
+  
+  // 2. Extract kode + angka dari input (misalnya "AN002" -> kode: "AN", angka: "002")
+  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)
+    if (inputParts.kode !== noAntrianParts.kode) {
+      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');
+  }
+  
+  // 4. Jika input hanya angka (tidak punya kode), JANGAN match
+  // Ini mencegah match "002" dengan "UM1002" atau "AN002" dengan "UM1002"
+  const inputAngka = cleanInput.replace(/[^0-9]/g, '');
+  if (inputAngka && inputAngka === cleanInput) {
+    // 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)
+  // Hanya exact match, tidak menggunakan startsWith atau includes untuk menghindari false positive
+  if (noAntrianUpper === cleanInput) {
+    return true;
+  }
+  
+  // 6. Check jika noAntrian dimulai dengan input + spasi atau pipe (untuk partial match yang aman)
+  // Contoh: "AN002" match dengan "AN002 | ..." atau "AN002 | Onsite - ..."
+  // Tapi TIDAK match dengan "UM1002" karena kode berbeda
+  if (noAntrianParts && inputParts) {
+    // Jika kedua-duanya punya kode+angka, hanya match jika kode sama
+    if (inputParts.kode === noAntrianParts.kode) {
+      // Check jika noAntrian dimulai dengan format "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 diikuti spasi, pipe, atau end of string
+        if (noAntrianUpper.startsWith(noAntrianPrefix)) {
+          const nextChar = noAntrianUpper[noAntrianPrefix.length];
+          if (!nextChar || nextChar === ' ' || nextChar === '|') {
+            return true;
+          }
+        }
+      }
+    }
+  }
+  
+  return false;
+};
+
 const onDetect = async (decodedText: string) => {
     // Format QR Code: hanya BARCODE saja (contoh: 250811100163)
     // Status akan dicek real-time dari queueStore saat scan QR
@@ -2080,6 +2160,7 @@ const onDetect = async (decodedText: string) => {
     
     // Cari pasien di queueStore berdasarkan berbagai kriteria
     // Prioritas: exact barcode match (case-insensitive, whitespace-insensitive)
+    // Kemudian: noAntrian match dengan kode + angka (tidak hanya angka saja)
     const foundPatient = queueStore.allPatients.find(p => {
       if (!p) return false;
       
@@ -2089,7 +2170,7 @@ const onDetect = async (decodedText: string) => {
       const patientBarcodeNormalized = patientBarcodeUpper.replace(/\s+/g, '');
       const cleanInputNormalized = cleanInputUpper.replace(/\s+/g, '');
       
-      // 1. Exact barcode match (case-insensitive, whitespace-insensitive)
+      // 1. Exact barcode match (case-insensitive, whitespace-insensitive) - PRIORITAS TERTINGGI
       if (patientBarcode === cleanInput || 
           patientBarcodeNormalized === cleanInputNormalized ||
           patientBarcodeUpper === cleanInputUpper) {
@@ -2097,142 +2178,78 @@ const onDetect = async (decodedText: string) => {
         return true;
       }
       
-      // 2. Try parsing as number and match with no
-      const parsedNo = parseInt(cleanInput.replace(/[^0-9]/g, '')) || parseInt(decodedText);
-      if (!isNaN(parsedNo) && p.no === parsedNo) {
-        console.log('✅ Found by no:', p.no);
+      // 2. Match noAntrian dengan kode + angka (tidak hanya angka saja)
+      // Ini mencegah false positive ketika angka sama tapi kode beda (misalnya UM0014 vs AN0014)
+      if (p.noAntrian && matchNoAntrian(cleanInput, p.noAntrian)) {
+        console.log('✅ Found by noAntrian match (kode + angka):', p.noAntrian);
         return true;
       }
       
-      // 3. Check if noAntrian includes the input (case-insensitive)
-      const noAntrianUpper = (p.noAntrian || '').toUpperCase();
-      const cleanInputUpperForSearch = cleanInputUpper.replace(/[^A-Z0-9]/g, '');
-      if (noAntrianUpper.includes(cleanInputUpperForSearch) || 
-          noAntrianUpper.includes(cleanInput) ||
-          noAntrianUpper.includes(cleanInputNormalized)) {
-        console.log('✅ Found by noAntrian:', p.noAntrian);
-        return true;
-      }
-      
-      // 4. Try to extract number from noAntrian (e.g., "UM0014 | Onsite - ..." -> "0014")
-      const noAntrianNumber = noAntrianUpper.match(/([A-Z]+)(\d+)/);
-      if (noAntrianNumber) {
-        const extractedNumber = noAntrianNumber[2];
-        const inputNumber = cleanInput.replace(/[^0-9]/g, '');
-        if (inputNumber && (extractedNumber.includes(inputNumber) || inputNumber.includes(extractedNumber))) {
-          console.log('✅ Found by extracted number from noAntrian');
+      // 3. Try parsing as number and match with no (fallback)
+      // IMPORTANT: Hanya gunakan fallback jika input TIDAK punya kode (hanya angka)
+      // Ini mencegah false positive: "RA004" (kode: RA) tidak boleh match dengan pasien no: 4 yang punya kode berbeda
+      const inputHasCode = /^[A-Z]+/.test(cleanInput);
+      if (!inputHasCode) {
+        // Input hanya angka, boleh match dengan no (tapi tetap prioritas ke barcode dan noAntrian)
+        const parsedNo = parseInt(cleanInput.replace(/[^0-9]/g, '')) || parseInt(decodedText);
+        if (!isNaN(parsedNo) && p.no === parsedNo) {
+          console.log('✅ Found by no (input tanpa kode):', p.no);
           return true;
         }
       }
-      
-      // 5. Check if barcode is substring or contains input (untuk handle partial match)
-      if (patientBarcode && cleanInput && 
-          (patientBarcode.includes(cleanInput) || cleanInput.includes(patientBarcode) ||
-           patientBarcodeNormalized.includes(cleanInputNormalized) || cleanInputNormalized.includes(patientBarcodeNormalized))) {
-        console.log('✅ Found by barcode substring match');
-        return true;
-      }
+      // Jika input punya kode (seperti "RA004"), jangan gunakan fallback ke no
+      // karena bisa match dengan pasien yang punya kode berbeda
       
       return false;
     });
     
     if (!foundPatient) {
-      // Pasien tidak ditemukan dengan pencarian manual
-      // Coba langsung menggunakan checkInPatient sebagai fallback (memiliki logika pencarian lebih lengkap)
-      console.warn('⚠️ Patient not found with manual search, trying checkInPatient as fallback');
-      const checkInResult = queueStore.checkInPatient(decodedText);
+      // Tiket belum di-generate (tidak ada di queueStore)
+      console.error('❌ Patient not found. QR data:', decodedText);
+      console.error('📋 Available barcodes (first 10):', queueStore.allPatients.slice(0, 10).map(p => ({
+        no: p.no,
+        barcode: p.barcode,
+        noAntrian: p.noAntrian?.split(' |')[0]
+      })));
       
-      if (checkInResult.success && checkInResult.patient) {
-        // Berhasil ditemukan via checkInPatient
-        console.log('✅ Patient found via checkInPatient:', checkInResult.patient);
-        
-        // Proses check-in berhasil
-        lastCheckInResult.value = {
-          success: true,
-          patientId: checkInResult.patient.barcode,
-          status: 'ALLOWED'
-        };
-        
-        saveToHistory({
-          patientId: checkInResult.patient.barcode,
-          queueNumber: checkInResult.patient.noAntrian,
-          klinikQueueNumber: checkInResult.patient.noAntrian?.split(" |")[0] || checkInResult.patient.noAntrian,
-          pembayaran: checkInResult.patient.pembayaran || 'N/A',
-          status: 'success',
-          checkInTime: new Date().toISOString(),
-          checkInDate: new Date().toISOString(),
-          method: 'QR Scan'
-        });
-        
-        saveSuccessfulScan(decodedText);
-        infoMessage.value = `✅ Check-in Berhasil!\n\nPasien ${checkInResult.patient.noAntrian.split(" |")[0]} berhasil melakukan check-in dan status berubah menjadi di loket.`;
-        infoAction.value = 'checkin';
-        infoDialog.value = true;
-        return;
-      } else {
-        // Tetap tidak ditemukan
-        console.error('❌ Patient not found. QR data:', decodedText);
-        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: decodedText,
-          queueNumber: null,
-          klinikQueueNumber: null,
-          pembayaran: 'N/A',
-          status: 'failed',
-          checkInTime: new Date().toISOString(),
-          checkInDate: new Date().toISOString(),
-          method: 'QR Scan'
-        });
-        
-        infoMessage.value = `❌ Check-in Gagal!\n\nPasien tidak ditemukan di sistem.\n\nQR Code: ${decodedText}\n\nPesan: ${checkInResult.message || 'Pastikan QR code valid dan pasien sudah terdaftar di sistem.'}`;
-        infoAction.value = 'checkin';
-        infoDialog.value = true;
-        return;
-      }
-    }
-    
-    // Cek status pasien REAL-TIME dari queueStore
-    // Validasi check-in berdasarkan status:
-    // - "waiting" (sudah dipanggil dan muncul di AntrianLoket) → BOLEH check-in → ubah ke "di-loket"
-    // - "menunggu" (belum dipanggil, belum muncul di AntrianLoket) → TIDAK BOLEH check-in
-    // - "di-loket" (sudah check-in) → sudah check-in sebelumnya
-    // - "pending" → BOLEH check-in
-    
-    const patientStatus = foundPatient.status;
-    
-    if (patientStatus === 'menunggu') {
-      // Status "menunggu" = belum dipanggil oleh admin loket, belum muncul di AntrianLoket
-      // TIDAK BOLEH check-in
       saveToHistory({
-        patientId: foundPatient.barcode,
-        queueNumber: foundPatient.noAntrian,
-        klinikQueueNumber: foundPatient.noAntrian?.split(" |")[0] || foundPatient.noAntrian,
-        pembayaran: foundPatient.pembayaran || 'N/A',
-        status: 'NOT_ALLOWED',
+        patientId: decodedText,
+        queueNumber: null,
+        klinikQueueNumber: null,
+        pembayaran: 'N/A',
+        status: 'failed',
         checkInTime: new Date().toISOString(),
         checkInDate: new Date().toISOString(),
         method: 'QR Scan'
       });
       
-      lastCheckInResult.value = {
-        success: false,
-        patientId: foundPatient.barcode,
-        status: 'NOT_ALLOWED'
-      };
-      
-      infoMessage.value = `⏳ Belum Diizinkan Check-in\n\nNomor Antrean ${foundPatient.noAntrian.split(" |")[0]} belum dipanggil oleh admin loket. Mohon menunggu hingga nomor antrean Anda dipanggil dan muncul di layar Antrian Loket.`;
-      infoAction.value = 'kembali';
+      const errorMsg = `❌ Tiket Belum Di-generate!\n\nQR Code: ${decodedText}\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;
     }
     
-    if (patientStatus === 'di-loket') {
-      // Sudah check-in sebelumnya
+    // 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 untuk mendapatkan data terbaru
+    const freshPatient = queueStore.allPatients.find(p => {
+      const patientBarcode = String(p.barcode || '').trim();
+      return patientBarcode === foundPatient.barcode || 
+             patientBarcode === decodedText ||
+             p.no === foundPatient.no;
+    });
+    
+    if (!freshPatient) {
+      console.error('❌ Patient not found in queueStore after refresh');
       saveToHistory({
         patientId: foundPatient.barcode,
         queueNumber: foundPatient.noAntrian,
@@ -2244,21 +2261,92 @@ const onDetect = async (decodedText: string) => {
         method: 'QR Scan'
       });
       
-      infoMessage.value = `⚠️ Sudah Check-in\n\nNomor Antrean ${foundPatient.noAntrian.split(" |")[0]} sudah melakukan check-in sebelumnya.`;
+      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'
+      });
+      
+      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'
+      });
+      
+      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 ditemukan, bukan decodedText (untuk memastikan format benar)
-    const patientBarcodeForCheckIn = foundPatient.barcode || decodedText;
-    console.log('🔍 Calling checkInPatient with barcode:', patientBarcodeForCheckIn);
+    // Gunakan barcode pasien yang fresh, bukan decodedText (untuk memastikan format benar)
+    const patientBarcodeForCheckIn = freshPatient.barcode || decodedText;
+    console.log('🔍 Calling checkInPatient with barcode (fresh):', patientBarcodeForCheckIn);
     const checkInResult = 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,
@@ -2268,7 +2356,7 @@ const onDetect = async (decodedText: string) => {
       saveToHistory({
         patientId: checkInResult.patient.barcode,
         queueNumber: checkInResult.patient.noAntrian,
-        klinikQueueNumber: checkInResult.patient.noAntrian?.split(" |")[0] || checkInResult.patient.noAntrian,
+        klinikQueueNumber: successKlinikQueueNumber,
         pembayaran: checkInResult.patient.pembayaran || 'N/A',
         status: 'success',
         checkInTime: new Date().toISOString(),
@@ -2277,15 +2365,17 @@ const onDetect = async (decodedText: string) => {
       });
       
       saveSuccessfulScan(decodedText);
-      infoMessage.value = `✅ Check-in Berhasil!\n\nPasien ${checkInResult.patient.noAntrian.split(" |")[0]} berhasil melakukan check-in dan status berubah menjadi di loket.`;
+      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: foundPatient.noAntrian?.split(" |")[0] || foundPatient.noAntrian,
+        klinikQueueNumber: klinikQueueNumber,
         pembayaran: foundPatient.pembayaran || 'N/A',
         status: 'failed',
         checkInTime: new Date().toISOString(),
@@ -2293,9 +2383,17 @@ const onDetect = async (decodedText: string) => {
         method: 'QR Scan'
       });
       
-      infoMessage.value = `❌ Check-in Gagal!\n\n${checkInResult.message || 'Status pasien tidak memungkinkan untuk check-in.'}`;
+      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');
     }
 };
 
@@ -2344,15 +2442,214 @@ const checkInManual = async () => {
     return;
   }
 
-  // Check-in menggunakan queueStore
-  const checkInResult = queueStore.checkInPatient(manualInput.value.trim());
+  const inputValue = manualInput.value.trim();
+  const cleanInput = String(inputValue).trim();
+  const cleanInputUpper = cleanInput.toUpperCase();
+  
+  console.log('🔍 checkInManual called with:', inputValue);
+  console.log('🔍 Cleaned input:', cleanInput);
+  console.log('📊 Total patients in store:', queueStore.allPatients.length);
+  
+  // Cari pasien di queueStore menggunakan logika yang sama dengan onDetect
+  // Prioritas: exact barcode match (case-insensitive, whitespace-insensitive)
+  // Kemudian: noAntrian match dengan kode + angka (tidak hanya angka saja)
+  // Fallback: hanya jika input tidak punya kode (hanya angka)
+  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 patientBarcodeUpper = patientBarcode.toUpperCase();
+    const patientBarcodeNormalized = patientBarcodeUpper.replace(/\s+/g, '');
+    const cleanInputNormalized = cleanInputUpper.replace(/\s+/g, '');
+    
+    // 1. Exact barcode match (case-insensitive, whitespace-insensitive) - PRIORITAS TERTINGGI
+    if (patientBarcode === cleanInput || 
+        patientBarcodeNormalized === cleanInputNormalized ||
+        patientBarcodeUpper === cleanInputUpper) {
+      console.log('✅ Found by exact barcode match:', patientBarcode, '===', cleanInput);
+      return true;
+    }
+    
+    // 2. Match noAntrian dengan kode + angka (tidak hanya angka saja)
+    // Ini mencegah false positive ketika angka sama tapi kode beda (misalnya UM0014 vs AN0014)
+    if (p.noAntrian && matchNoAntrian(cleanInput, p.noAntrian)) {
+      console.log('✅ Found by noAntrian match (kode + angka):', p.noAntrian);
+      return true;
+    }
+    
+    // 3. Try parsing as number and match with no (fallback)
+    // IMPORTANT: Hanya gunakan fallback jika input TIDAK punya kode (hanya angka)
+    // Ini mencegah false positive: "RA004" (kode: RA) tidak boleh match dengan pasien no: 4 yang punya kode berbeda
+    const inputHasCode = /^[A-Z]+/.test(cleanInput);
+    if (!inputHasCode) {
+      // Input hanya angka, boleh match dengan no (tapi tetap prioritas ke barcode dan noAntrian)
+      const parsedNo = parseInt(cleanInput.replace(/[^0-9]/g, '')) || parseInt(inputValue);
+      if (!isNaN(parsedNo) && p.no === parsedNo) {
+        console.log('✅ Found by no (input tanpa kode):', p.no);
+        return true;
+      }
+    }
+    // Jika input punya kode (seperti "RA004"), jangan gunakan fallback ke no
+    // karena bisa match dengan pasien yang punya kode berbeda
+    
+    return false;
+  });
+  
+  if (!foundPatient) {
+    // Tiket belum di-generate (tidak ada di queueStore)
+    console.error('❌ Patient not found. Input:', inputValue);
+    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: inputValue,
+      queueNumber: null,
+      klinikQueueNumber: null,
+      pembayaran: 'N/A',
+      status: 'failed',
+      checkInTime: new Date().toISOString(),
+      checkInDate: new Date().toISOString(),
+      method: 'Manual'
+    });
+    
+    const errorMsg = `❌ Tiket Belum Di-generate!\n\nInput: ${inputValue}\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 untuk mendapatkan data terbaru
+  const freshPatient = queueStore.allPatients.find(p => {
+    const patientBarcode = String(p.barcode || '').trim();
+    return patientBarcode === foundPatient.barcode || 
+           patientBarcode === inputValue ||
+           p.no === foundPatient.no;
+  });
+  
+  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: 'Manual'
+    });
+    
+    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: 'Manual'
+    });
+    
+    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: 'Manual'
+    });
+    
+    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 inputValue (untuk memastikan format benar)
+  const patientBarcodeForCheckIn = freshPatient.barcode || inputValue;
+  console.log('🔍 Calling checkInPatient with barcode (fresh):', patientBarcodeForCheckIn);
+  const checkInResult = queueStore.checkInPatient(patientBarcodeForCheckIn);
   
   if (checkInResult.success && checkInResult.patient) {
-    // Simpan ke history
+    // 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: checkInResult.patient.noAntrian?.split(" |")[0] || checkInResult.patient.noAntrian,
+      klinikQueueNumber: successKlinikQueueNumber,
       pembayaran: checkInResult.patient.pembayaran || 'N/A',
       status: 'success',
       checkInTime: new Date().toISOString(),
@@ -2360,35 +2657,40 @@ const checkInManual = async () => {
       method: 'Manual'
     });
     
-    showSnackbar('Berhasil!', `Check-in manual berhasil. Pasien ${checkInResult.patient.noAntrian.split(" |")[0]} siap diproses.`, 'success', 'mdi-check-circle');
+    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 manual berhasil. Tiket ${successKlinikQueueNumber} siap diproses.`, 'success', 'mdi-check-circle');
+    
     manualInput.value = '';
     if (manualForm.value) {
       (manualForm.value as any).reset();
     }
   } else {
-    // Simpan ke history dengan status failed jika check-in gagal
-    const cleanInput = String(manualInput.value.trim()).toUpperCase();
-    const foundPatient = queueStore.allPatients.find(p => {
-      if (p.barcode === cleanInput || p.barcode === manualInput.value.trim()) return true;
-      const parsedNo = parseInt(cleanInput.replace(/[^0-9]/g, '')) || parseInt(manualInput.value.trim());
-      if (!isNaN(parsedNo) && p.no === parsedNo) return true;
-      const noAntrianUpper = (p.noAntrian || '').toUpperCase();
-      if (noAntrianUpper.includes(cleanInput) || noAntrianUpper.includes(manualInput.value.trim())) return true;
-      return false;
-    });
-    
+    // Check-in gagal (misalnya validasi di checkInPatient gagal)
     saveToHistory({
-      patientId: manualInput.value.trim(),
-      queueNumber: foundPatient?.noAntrian || null,
-      klinikQueueNumber: foundPatient?.noAntrian?.split(" |")[0] || null,
-      pembayaran: foundPatient?.pembayaran || 'N/A',
+      patientId: foundPatient.barcode,
+      queueNumber: foundPatient.noAntrian,
+      klinikQueueNumber: klinikQueueNumber,
+      pembayaran: foundPatient.pembayaran || 'N/A',
       status: 'failed',
       checkInTime: new Date().toISOString(),
       checkInDate: new Date().toISOString(),
       method: 'Manual'
     });
     
-    showSnackbar('Gagal!', checkInResult.message || 'Check-in manual gagal dilakukan. Silakan coba lagi!', 'error', 'mdi-close-circle');
+    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 manual gagal dilakukan', 'error', 'mdi-close-circle');
   }
 };
 
@@ -2596,18 +2898,23 @@ const saveToHistory = (item: {
   method: string;
   kodeKlinik?: string;
 }) => {
-  // Generate queue number based on klinik code if not provided
+  // JANGAN generate nomor antrean baru - selalu gunakan nomor dari pasien yang ditemukan
+  // Jika queueNumber tidak ada, gunakan klinikQueueNumber atau patientId sebagai fallback
+  // Tapi jangan generate nomor baru karena itu akan mengubah nomor antrean yang sebenarnya
   let queueNumber = item.queueNumber;
-  if (!queueNumber && item.kodeKlinik) {
-    queueNumber = generateSequentialQueueNumber(item.kodeKlinik);
-  } else if (!queueNumber) {
-    // Fallback to default if no klinik code
-    queueNumber = `ANT-${Date.now()}`;
+  if (!queueNumber && item.klinikQueueNumber) {
+    // Jika queueNumber tidak ada tapi ada klinikQueueNumber, gunakan itu
+    queueNumber = item.klinikQueueNumber;
+  } else if (!queueNumber && item.patientId) {
+    // Jika masih tidak ada, gunakan patientId (barcode) sebagai fallback
+    queueNumber = item.patientId;
   }
+  // 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,
+    queueNumber: queueNumber || item.klinikQueueNumber || item.patientId || null,
   };
   
   // Jika status baru adalah "success" atau "ALLOWED", cek apakah ada history lama dengan patientId yang sama
@@ -2828,10 +3135,12 @@ const formatDateTime = (dateString: string) => {
 
 const formatTime = (dateString: string) => {
   const date = new Date(dateString);
-  return date.toLocaleTimeString('id-ID', { 
+  // Format: HH.MM (menggunakan titik, bukan titik dua)
+  const timeString = date.toLocaleTimeString('id-ID', { 
     hour: '2-digit', 
     minute: '2-digit'
   });
+  return timeString.replace(':', '.');
 };
 
 const formatDate = (dateString: string) => {
@@ -3247,11 +3556,11 @@ if (typeof window !== 'undefined') {
 }
 
 .history-item-compact.history-failed {
-  background: rgba(244, 67, 54, 0.03) !important;
+  background: rgba(244, 67, 54, 0.08) !important;
 }
 
 .history-item-compact.history-failed :deep(.v-card-text) {
-  background: rgba(244, 67, 54, 0.03) !important;
+  background: rgba(244, 67, 54, 0.08) !important;
 }
 
 .history-item-compact.history-pending::before {
@@ -3259,11 +3568,11 @@ if (typeof window !== 'undefined') {
 }
 
 .history-item-compact.history-pending {
-  background: rgba(255, 152, 0, 0.03) !important;
+  background: rgba(255, 152, 0, 0.08) !important;
 }
 
 .history-item-compact.history-pending :deep(.v-card-text) {
-  background: rgba(255, 152, 0, 0.03) !important;
+  background: rgba(255, 152, 0, 0.08) !important;
 }
 
 .history-status-chip {
@@ -3286,6 +3595,20 @@ if (typeof window !== 'undefined') {
   margin-right: 4px;
 }
 
+.history-queue-number-right {
+  display: flex;
+  align-items: center;
+  font-weight: 500;
+  color: #1a1a1a;
+}
+
+.history-time-left {
+  display: flex;
+  align-items: center;
+  color: #424242;
+  font-size: 13px;
+}
+
 .history-patient-chip,
 .history-payment-chip {
   font-size: 10px !important;
@@ -3854,6 +4177,14 @@ if (typeof window !== 'undefined') {
   background: linear-gradient(135deg, #EF5350 0%, #E53935 100%);
 }
 
+.icon-bg-success {
+  background: linear-gradient(135deg, #66BB6A 0%, #43A047 100%);
+}
+
+.icon-bg-warning {
+  background: linear-gradient(135deg, #FFA726 0%, #FB8C00 100%);
+}
+
 .icon-bg-error {
   background: linear-gradient(135deg, #EF5350 0%, #E53935 100%);
 }
diff --git a/pages/Setting/MasterLoket.vue b/pages/Setting/MasterLoket.vue
index e65a331..9505be0 100644
--- a/pages/Setting/MasterLoket.vue
+++ b/pages/Setting/MasterLoket.vue
@@ -102,7 +102,7 @@
                 :rules="[v => !!v || 'Nama loket harus diisi']"
                 hide-details="auto"
                 class="mb-3 input-field"
-                placeholder="Loket 1"
+                placeholder="Loket A"
               />
 
               <v-text-field
diff --git a/server/api/queue/patients.ts.txt b/server/api/queue/patients.ts.txt
index 721419e..3f7d5b1 100644
--- a/server/api/queue/patients.ts.txt
+++ b/server/api/queue/patients.ts.txt
@@ -91,11 +91,22 @@ export default defineEventHandler(async (event: H3Event) => {
       })
     }
     
+    // Helper function untuk generate barcode dengan format: YYMMDD + 5 digit random
+    const generateBarcode = () => {
+      const now = new Date();
+      const year = String(now.getFullYear()).slice(-2); // 2 digit tahun terakhir
+      const month = String(now.getMonth() + 1).padStart(2, '0'); // 2 digit bulan
+      const day = String(now.getDate()).padStart(2, '0'); // 2 digit tanggal
+      const randomCode = String(Math.floor(Math.random() * 100000)).padStart(5, '0'); // 5 digit random
+      return `${year}${month}${day}${randomCode}`;
+    };
+
     // Generate patient data
+    const barcode = generateBarcode();
     const newPatient: Patient = {
       no: mockDB.length + 1,
       jamPanggil: new Date().toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' }),
-      barcode: `250811${String(Date.now()).slice(-6)}${String(mockDB.length + 1).padStart(3, '0')}`,
+      barcode: barcode,
       noAntrian: `UM${String(mockDB.length + 1).padStart(4, '0')} | Onsite - ${barcode}`,
       shift: body.shift || 'Shift 1',
       klinik: body.clinic,
diff --git a/stores/loketStore.js b/stores/loketStore.js
index 4ed22b9..641ccbf 100644
--- a/stores/loketStore.js
+++ b/stores/loketStore.js
@@ -3,6 +3,14 @@ import { defineStore } from 'pinia';
 import { ref, computed } from 'vue';
 import { useClinicStore } from './clinicStore';
 
+// Helper function: Convert nomor loket ke huruf (1 -> A, 2 -> B, dst)
+const numberToLetter = (num) => {
+  if (num < 1) return 'A';
+  // 1 -> A (65), 2 -> B (66), ..., 26 -> Z (90)
+  const charCode = 64 + num; // 64 = '@', 65 = 'A'
+  return String.fromCharCode(Math.min(charCode, 90)); // Maksimal Z (90)
+};
+
 export const useLoketStore = defineStore('loket', () => {
   const clinicStore = useClinicStore();
 
@@ -11,7 +19,7 @@ export const useLoketStore = defineStore('loket', () => {
     {
       id: 1,
       no: 1,
-      namaLoket: "Loket 1",
+      namaLoket: "Loket A",
       kuota: 500,
       pelayanan: ["RT", "RM", "TD"],
       pembayaran: "JKN",
@@ -21,7 +29,7 @@ export const useLoketStore = defineStore('loket', () => {
     {
       id: 2,
       no: 2,
-      namaLoket: "Loket 2",
+      namaLoket: "Loket B",
       kuota: 666,
       pelayanan: ["JW", "SR"],
       pembayaran: "JKN",
@@ -31,7 +39,7 @@ export const useLoketStore = defineStore('loket', () => {
     {
       id: 3,
       no: 3,
-      namaLoket: "Loket 3",
+      namaLoket: "Loket C",
       kuota: 666,
       pelayanan: ["AS", "JT"],
       pembayaran: "JKN",
@@ -41,7 +49,7 @@ export const useLoketStore = defineStore('loket', () => {
     {
       id: 4,
       no: 4,
-      namaLoket: "Loket 4",
+      namaLoket: "Loket D",
       kuota: 3676,
       pelayanan: ["KK", "PR"],
       pembayaran: "JKN",
@@ -65,10 +73,18 @@ export const useLoketStore = defineStore('loket', () => {
     const newId = Math.max(...loketData.value.map(l => l.id), 0) + 1;
     const newNo = loketData.value.length + 1;
 
+    // Jika namaLoket tidak disediakan atau masih menggunakan angka, ubah ke huruf
+    let namaLoket = loketPayload.namaLoket;
+    if (!namaLoket || namaLoket.match(/Loket \d+/)) {
+      const letter = numberToLetter(newNo);
+      namaLoket = `Loket ${letter}`;
+    }
+
     const newLoket = {
       id: newId,
       no: newNo,
       ...loketPayload,
+      namaLoket: namaLoket,
     };
 
     loketData.value.push(newLoket);
@@ -104,6 +120,9 @@ export const useLoketStore = defineStore('loket', () => {
     return loketData.value.find(l => l.id === id);
   };
 
+  // Helper function untuk convert nomor ke huruf (export untuk digunakan di komponen)
+  const getLoketLetter = (num) => numberToLetter(num);
+
   return {
     // State
     loketData,
@@ -114,6 +133,7 @@ export const useLoketStore = defineStore('loket', () => {
     updateLoket,
     deleteLoket,
     getLoketById,
+    getLoketLetter,
   };
 }, {
   persist: {
diff --git a/stores/queueStore.js b/stores/queueStore.js
index b0cba63..6f1e8db 100644
--- a/stores/queueStore.js
+++ b/stores/queueStore.js
@@ -10,19 +10,93 @@ export const useQueueStore = defineStore('queue', () => {
   const penunjangStore = usePenunjangStore();
   const loketStore = useLoketStore();
 
-  // Helper function untuk mendapatkan loket default (Loket 1)
+  // Helper function untuk mendapatkan loket default (Loket A)
   const getDefaultLoket = () => {
     const allLokets = loketStore.loketData?.value || loketStore.loketData || [];
     const loket1 = allLokets.find(l => l.id === 1 || l.no === 1);
-    return loket1 ? loket1.namaLoket : 'Loket 1';
+    return loket1 ? loket1.namaLoket : 'Loket A';
+  };
+
+  // Helper function untuk generate barcode dengan format: YYMMDD + 5 digit random
+  // Format: YY (tahun 2 digit) + MM (bulan 2 digit) + DD (tanggal 2 digit) + XXXXX (5 digit random)
+  // Contoh: 25011212345 (12 Januari 2025 dengan random 5 digit 12345)
+  // IMPORTANT: Memastikan barcode selalu UNIQUE meskipun reset harian
+  // Menggunakan timestamp milisecond + random untuk memastikan uniqueness
+  // NOTE: allPatientsRef adalah optional parameter untuk menghindari TDZ error saat seed initialization
+  const generateBarcode = (existingBarcodes = [], allPatientsRef = null) => {
+    const now = new Date();
+    const year = String(now.getFullYear()).slice(-2); // 2 digit tahun terakhir
+    const month = String(now.getMonth() + 1).padStart(2, '0'); // 2 digit bulan
+    const day = String(now.getDate()).padStart(2, '0'); // 2 digit tanggal
+    
+    // Generate 5 digit code dari timestamp milisecond untuk memastikan uniqueness
+    // Ambil 5 digit terakhir dari timestamp + random untuk menghindari duplikasi
+    const timestamp = Date.now();
+    const randomOffset = Math.floor(Math.random() * 1000); // 0-999
+    const uniqueCode = String((timestamp % 100000) + randomOffset).slice(-5).padStart(5, '0');
+    
+    // Pastikan barcode unique dengan mengecek di existingBarcodes atau allPatientsRef
+    let barcode = `${year}${month}${day}${uniqueCode}`;
+    let attempts = 0;
+    const maxAttempts = 100;
+    
+    // Cek apakah barcode sudah ada
+    // NOTE: allPatientsRef adalah optional untuk menghindari TDZ error saat seed initialization
+    const checkExists = (b) => {
+      if (existingBarcodes.includes(b)) return true;
+      // Hanya cek allPatientsRef jika diberikan (tidak null/undefined)
+      if (allPatientsRef && allPatientsRef.value && allPatientsRef.value.some(p => p.barcode === b)) return true;
+      return false;
+    };
+    
+    // Generate ulang jika duplikat
+    while (checkExists(barcode) && attempts < maxAttempts) {
+      const newTimestamp = Date.now();
+      const newRandomOffset = Math.floor(Math.random() * 1000);
+      const newUniqueCode = String((newTimestamp % 100000) + newRandomOffset).slice(-5).padStart(5, '0');
+      barcode = `${year}${month}${day}${newUniqueCode}`;
+      attempts++;
+    }
+    
+    // Jika masih duplikat setelah maxAttempts, tambahkan counter berdasarkan existing barcodes
+    if (attempts >= maxAttempts) {
+      const datePrefix = `${year}${month}${day}`;
+      const existingCount = existingBarcodes.filter(b => b && b.startsWith(datePrefix)).length;
+      // Hanya cek allPatientsRef jika diberikan (tidak null/undefined)
+      const allCount = allPatientsRef && allPatientsRef.value 
+        ? allPatientsRef.value.filter(p => p.barcode && p.barcode.startsWith(datePrefix)).length 
+        : 0;
+      const counter = Math.max(existingCount, allCount) + 1;
+      const counterCode = String(counter).padStart(5, '0');
+      barcode = `${datePrefix}${counterCode}`;
+    }
+    
+    return barcode;
   };
   // Seed data for easy reset during dev
+  // IMPORTANT: Setiap pasien HARUS memiliki barcode UNIK untuk menghindari konflik
+  // Format barcode menggunakan generateBarcode() untuk konsistensi dengan format baru
+  // Generate barcode dengan memastikan uniqueness menggunakan existingBarcodes array
+  const seedBarcodes = [];
+  const seedBarcode1 = generateBarcode(seedBarcodes); seedBarcodes.push(seedBarcode1);
+  const seedBarcode2 = generateBarcode(seedBarcodes); seedBarcodes.push(seedBarcode2);
+  const seedBarcode3 = generateBarcode(seedBarcodes); seedBarcodes.push(seedBarcode3);
+  const seedBarcode4 = generateBarcode(seedBarcodes); seedBarcodes.push(seedBarcode4);
+  const seedBarcode5 = generateBarcode(seedBarcodes); seedBarcodes.push(seedBarcode5);
+  const seedBarcode6 = generateBarcode(seedBarcodes); seedBarcodes.push(seedBarcode6);
+  const seedBarcode7 = generateBarcode(seedBarcodes); seedBarcodes.push(seedBarcode7);
+  const seedBarcode8 = generateBarcode(seedBarcodes); seedBarcodes.push(seedBarcode8);
+  const seedBarcode9 = generateBarcode(seedBarcodes); seedBarcodes.push(seedBarcode9);
+  const seedBarcode10 = generateBarcode(seedBarcodes); seedBarcodes.push(seedBarcode10);
+  const seedBarcode11 = generateBarcode(seedBarcodes); seedBarcodes.push(seedBarcode11);
+  const seedBarcode12 = generateBarcode(seedBarcodes); seedBarcodes.push(seedBarcode12);
+  
   const seedPatients = [
     {
       no: 1,
       jamPanggil: "12:49",
-      barcode: "250811100163",
-      noAntrian: "UM1001 | Online - 250811100163",
+      barcode: seedBarcode1, // Barcode unik untuk setiap pasien
+      noAntrian: `UM1001 | Online - ${seedBarcode1}`,
       shift: "Shift 1",
       klinik: "KANDUNGAN",
       fastTrack: "YA", // Fast Track Patient
@@ -34,8 +108,8 @@ export const useQueueStore = defineStore('queue', () => {
     {
       no: 2,
       jamPanggil: "10:52",
-      barcode: "250811100155",
-      noAntrian: "UM1002 | Online - 250811100155",
+      barcode: seedBarcode2,
+      noAntrian: `UM1002 | Online - ${seedBarcode2}`,
       shift: "Shift 1",
       klinik: "IPD",
       fastTrack: "TIDAK",
@@ -47,8 +121,8 @@ export const useQueueStore = defineStore('queue', () => {
     {
       no: 3,
       jamPanggil: "09:30",
-      barcode: "250811100200",
-      noAntrian: "UM1003 | Online - 250811100200",
+      barcode: seedBarcode3,
+      noAntrian: `UM1003 | Online - ${seedBarcode3}`,
       shift: "Shift 1",
       klinik: "SARAF",
       fastTrack: "YA", // Fast Track Patient
@@ -60,8 +134,8 @@ export const useQueueStore = defineStore('queue', () => {
     {
       no: 4,
       jamPanggil: "14:15",
-      barcode: "250811100210",
-      noAntrian: "UM1004 | Online - 250811100210",
+      barcode: seedBarcode4,
+      noAntrian: `UM1004 | Online - ${seedBarcode4}`,
       shift: "Shift 1",
       klinik: "THT",
       fastTrack: "TIDAK",
@@ -73,8 +147,8 @@ export const useQueueStore = defineStore('queue', () => {
     {
       no: 5,
       jamPanggil: "12:49",
-      barcode: "250811100163",
-      noAntrian: "UM1005 | Online - 250811100163",
+      barcode: seedBarcode5,
+      noAntrian: `UM1005 | Online - ${seedBarcode5}`,
       shift: "Shift 2",
       klinik: "KANDUNGAN",
       fastTrack: "TIDAK",
@@ -86,8 +160,8 @@ export const useQueueStore = defineStore('queue', () => {
     {
       no: 6,
       jamPanggil: "10:52",
-      barcode: "250811100155",
-      noAntrian: "UM1006 | Online - 250811100155",
+      barcode: seedBarcode6,
+      noAntrian: `UM1006 | Online - ${seedBarcode6}`,
       shift: "Shift 1",
       klinik: "IPD",
       fastTrack: "YA", // Fast Track Patient
@@ -99,8 +173,8 @@ export const useQueueStore = defineStore('queue', () => {
     {
       no: 7,
       jamPanggil: "09:30",
-      barcode: "250811100200",
-      noAntrian: "UM1007 | Online - 250811100200",
+      barcode: seedBarcode7,
+      noAntrian: `UM1007 | Online - ${seedBarcode7}`,
       shift: "Shift 1",
       klinik: "SARAF",
       fastTrack: "TIDAK",
@@ -112,8 +186,8 @@ export const useQueueStore = defineStore('queue', () => {
     {
       no: 8,
       jamPanggil: "14:15",
-      barcode: "250811100210",
-      noAntrian: "UM1008 | Online - 250811100210",
+      barcode: seedBarcode8,
+      noAntrian: `UM1008 | Online - ${seedBarcode8}`,
       shift: "Shift 1",
       klinik: "THT",
       fastTrack: "TIDAK",
@@ -125,8 +199,8 @@ export const useQueueStore = defineStore('queue', () => {
     {
       no: 9,
       jamPanggil: "12:49",
-      barcode: "250811100163",
-      noAntrian: "UM1009 | Online - 250811100163",
+      barcode: seedBarcode9,
+      noAntrian: `UM1009 | Online - ${seedBarcode9}`,
       shift: "Shift 2",
       klinik: "KANDUNGAN",
       fastTrack: "YA", // Fast Track Patient
@@ -138,8 +212,8 @@ export const useQueueStore = defineStore('queue', () => {
     {
       no: 10,
       jamPanggil: "10:52",
-      barcode: "250811100155",
-      noAntrian: "UM1010 | Online - 250811100155",
+      barcode: seedBarcode10,
+      noAntrian: `UM1010 | Online - ${seedBarcode10}`,
       shift: "Shift 1",
       klinik: "IPD",
       fastTrack: "TIDAK",
@@ -151,8 +225,8 @@ export const useQueueStore = defineStore('queue', () => {
     {
       no: 11,
       jamPanggil: "09:30",
-      barcode: "250811100200",
-      noAntrian: "UM1011 | Online - 250811100200",
+      barcode: seedBarcode11,
+      noAntrian: `UM1011 | Online - ${seedBarcode11}`,
       shift: "Shift 1",
       klinik: "SARAF",
       fastTrack: "TIDAK",
@@ -164,8 +238,8 @@ export const useQueueStore = defineStore('queue', () => {
     {
       no: 12,
       jamPanggil: "14:15",
-      barcode: "250811100210",
-      noAntrian: "UM1012 | Online - 250811100210",
+      barcode: seedBarcode12,
+      noAntrian: `UM1012 | Online - ${seedBarcode12}`,
       shift: "Shift 2",
       klinik: "THT",
       fastTrack: "YA", // Fast Track Patient
@@ -506,7 +580,7 @@ export const useQueueStore = defineStore('queue', () => {
   const createAntreanKlinik = (klinik, patient = null, adminType = 'loket') => {
     const newNo = allPatients.value.length + 1;
     const timestamp = new Date();
-    const barcode = patient ? patient.barcode : `250811${String(timestamp.getTime()).slice(-6)}`;
+    const barcode = patient ? patient.barcode : generateBarcode([], allPatients);
     
     const newPatient = {
       no: newNo,
@@ -537,7 +611,7 @@ export const useQueueStore = defineStore('queue', () => {
   const createAntreanPenunjang = (penunjang, patient = null, adminType = 'loket') => {
     const newNo = allPatients.value.length + 1;
     const timestamp = new Date();
-    const barcode = patient ? patient.barcode : `250811${String(timestamp.getTime()).slice(-6)}`;
+    const barcode = patient ? patient.barcode : generateBarcode([], allPatients);
 
     const newPatient = {
       no: newNo,
@@ -568,7 +642,7 @@ export const useQueueStore = defineStore('queue', () => {
   const createAntreanKlinikRuang = (klinikRuang, ruang, patient = null, adminType = 'klinik') => {
     const newNo = allPatients.value.length + 1;
     const timestamp = new Date();
-    const barcode = patient ? patient.barcode : `250811${String(timestamp.getTime()).slice(-6)}`;
+    const barcode = patient ? patient.barcode : generateBarcode([], allPatients);
 
     // Generate nomor antrian baru dengan format: [huruf pertama poli + urutan abjad ruang + nomor antrian ruang]
     // Contoh: "Anak" ruang 1 = "AA001" (A dari Anak, A dari ruang 1, 001 nomor antrian)
@@ -883,21 +957,23 @@ export const useQueueStore = defineStore('queue', () => {
 
   // Helper function untuk generate nomor antrean baru
   // Format: 2 huruf (kode klinik) + 3 digit (001-999)
-  // Jika pembayaran BPJS: gunakan kode klinik dari master
-  // Jika pembayaran UMUM/JKMM/SPM/DLL: gunakan "UM" sebagai prefix
-  const generateQueueNumber = (clinic, paymentType) => {
-    // Tentukan prefix berdasarkan jenis pembayaran
-    let prefix = 'UM'; // Default untuk UMUM/JKMM/SPM/DLL
+  // Generate nomor antrian dengan format baru untuk anjungan: R/E + Loket (A-N) + 3 digit
+  // Format: R/E (jenis pelayanan Reguler/Eksekutif) + A-N (nomor loket) + 3 digit angka
+  // Contoh: RA001, EA001, RB001, RB002
+  // - R = Reguler (untuk pasien Reguler/BPJS)
+  // - E = Eksekutif (untuk pasien Eksekutif/Grand Pavilion)
+  // Urutan terpisah untuk UMUM dan JKN/BPJS
+  // Setiap loket menampung maksimal 999 nomor (001-999)
+  const generateQueueNumber = (clinic, paymentType, isEksekutif = false) => {
+    // Tentukan prefix jenis pelayanan: R untuk Reguler, E untuk Eksekutif (Grand Pavilion)
+    const serviceType = isEksekutif ? 'E' : 'R';
     
-    if (paymentType === 'BPJS') {
-      // Gunakan kode klinik dari master (2 huruf)
-      const clinicCode = clinic?.kode || clinic?.code || 'UM';
-      prefix = clinicCode.length >= 2 ? clinicCode.substring(0, 2).toUpperCase() : 'UM';
-    }
+    // Tentukan payment group untuk counter terpisah (UMUM atau JKN/BPJS)
+    const paymentGroup = paymentType === 'BPJS' || paymentType === 'JKN' ? 'JKN' : 'UMUM';
     
-    // Get counter untuk klinik ini per hari
+    // Get counter untuk payment group ini per hari
     const today = new Date().toISOString().split('T')[0]; // YYYY-MM-DD
-    const counterKey = `queue_counter_${prefix}_${today}`;
+    const counterKey = `queue_counter_loket_${paymentGroup}_${today}`;
     
     // Get current counter dari localStorage
     let counter = 0;
@@ -906,16 +982,44 @@ export const useQueueStore = defineStore('queue', () => {
       counter = stored ? parseInt(stored, 10) : 0;
     }
     
-    // Increment counter (max 999)
-    counter = Math.min(counter + 1, 999);
+    // Increment counter
+    counter = counter + 1;
+    
+    // Tentukan loket berdasarkan counter
+    // Loket A untuk 1-999, B untuk 1000-1998, C untuk 2000-2997, dst sampai N (14 loket)
+    // Setiap loket menampung maksimal 999 nomor (001-999)
+    // Loket index: 0=A, 1=B, 2=C, ..., 13=N
+    const loketIndex = Math.floor((counter - 1) / 999); // 0 untuk A, 1 untuk B, dst
+    
+    // Jika loket melebihi N (14 loket, index 13), wrap kembali ke A
+    // Maksimal 14 loket (A-N), jadi maksimal counter per hari = 14 * 999 = 13986
+    // Jika melebihi, reset counter ke 1
+    if (loketIndex > 13) {
+      counter = 1;
+      if (typeof window !== 'undefined') {
+        localStorage.setItem(counterKey, '1');
+      }
+      // Format: R/E + Loket A + 001
+      return `${serviceType}A001`;
+    }
+    
+    // Loket letter (A-N)
+    const loketLetter = String.fromCharCode(65 + loketIndex); // 65 = 'A', 66 = 'B', dst
+    
+    // Nomor dalam loket (1-999, di-display sebagai 001-999)
+    // counter 1-999 → loket A, nomor 001-999
+    // counter 1000-1998 → loket B, nomor 001-999
+    const numberInLoket = ((counter - 1) % 999) + 1;
+    const numberPart = String(numberInLoket).padStart(3, '0');
     
     // Save counter back to localStorage
     if (typeof window !== 'undefined') {
       localStorage.setItem(counterKey, counter.toString());
     }
     
-    // Format: prefix (2 huruf) + 3 digit
-    return `${prefix}${String(counter).padStart(3, '0')}`;
+    // Format: R/E + Loket + 3 digit
+    // Contoh: RA001, RA002, ..., RA999, RB001, RB002, ...
+    return `${serviceType}${loketLetter}${numberPart}`;
   };
 
   // Register patient from Anjungan (onsite registration)
@@ -930,11 +1034,15 @@ export const useQueueStore = defineStore('queue', () => {
       ? `${String(visitDateTime.getHours()).padStart(2, "0")}:${String(visitDateTime.getMinutes()).padStart(2, "0")}`
       : `${String(timestamp.getHours()).padStart(2, "0")}:${String(timestamp.getMinutes()).padStart(2, "0")}`;
     
-    // Generate barcode (simulasi - bisa diganti dengan API call)
-    const barcode = `250811${String(Date.now()).slice(-6)}${String(newNo).padStart(3, "0")}`;
+    // Generate barcode dengan format: YYMMDD + 5 digit random
+    const barcode = generateBarcode([], allPatients);
     
-    // Generate nomor antrean dengan format baru: 2 huruf + 3 digit
-    const queueNumber = generateQueueNumber(clinic, paymentType);
+    // Tentukan apakah pasien Eksekutif/Grand Pavilion (jika ada namaDokter, berarti Eksekutif)
+    const isEksekutif = namaDokter !== null && namaDokter !== undefined && namaDokter !== '';
+    
+    // Generate nomor antrean dengan format baru: R/E + Loket (A-N) + 3 digit
+    // Format: RA001 (Reguler), EA001 (Eksekutif/Grand Pavilion), RB001, RB002, dll
+    const queueNumber = generateQueueNumber(clinic, paymentType, isEksekutif);
     const noAntrian = `${queueNumber} | Onsite - ${barcode}`;
     
     // Status awal untuk pasien dari anjungan adalah "menunggu" (belum dipanggil)
@@ -1035,8 +1143,16 @@ export const useQueueStore = defineStore('queue', () => {
       return { success: false, message: "Pasien tidak ditemukan" };
     }
 
+    // IMPORTANT: Get fresh patient data from array to avoid stale data
+    // Use the patientIndex we found earlier, but get fresh data from array
     const patient = allPatients.value[patientIndex];
-    console.log('✅ Patient found:', patient);
+    console.log('✅ Patient found (fresh):', {
+      no: patient.no,
+      barcode: patient.barcode,
+      noAntrian: patient.noAntrian,
+      status: patient.status,
+      processStage: patient.processStage
+    });
     
     // Only allow check-in if status is waiting (sudah dipanggil) or pending
     // Pasien dengan status "menunggu" belum bisa check-in (belum dipanggil)
@@ -1048,6 +1164,15 @@ export const useQueueStore = defineStore('queue', () => {
       };
     }
     
+    // Check if already checked in
+    if (patient.status === 'di-loket') {
+      console.log('⚠️ Patient already checked in:', patient.status);
+      return { 
+        success: false, 
+        message: `Pasien sudah melakukan check-in sebelumnya. Status saat ini: ${patient.status}` 
+      };
+    }
+    
     if (patient.status !== 'waiting' && patient.status !== 'pending') {
       console.log('⚠️ Patient status is not waiting/pending:', patient.status);
       return { 
@@ -1056,7 +1181,7 @@ export const useQueueStore = defineStore('queue', () => {
       };
     }
 
-    // Update status to di-loket
+    // Update status to di-loket using the patientIndex
     allPatients.value[patientIndex] = {
       ...allPatients.value[patientIndex],
       status: "di-loket",