From 42fe62cb41b8163f62de1414d7df74c5c4084ed9 Mon Sep 17 00:00:00 2001
From: Fanrouver <akbararya34@gmail.com>
Date: Mon, 12 Jan 2026 14:45:29 +0700
Subject: [PATCH] push loket baru

---
 pages/AdminLoket.vue                  |   11 +-
 pages/Anjungan/AntrianLoket/[id].vue  | 1046 ++++++++++++++++++++-----
 pages/Anjungan/AntrianLoket/index.vue |    8 +-
 pages/CheckInPasien/checkIn.vue       |  127 ++-
 stores/loketStore.js                  |  175 +++--
 stores/masterStore.js                 |    2 +
 stores/queueStore.js                  |   16 +-
 7 files changed, 1138 insertions(+), 247 deletions(-)

diff --git a/pages/AdminLoket.vue b/pages/AdminLoket.vue
index 24026a3..092c0cd 100644
--- a/pages/AdminLoket.vue
+++ b/pages/AdminLoket.vue
@@ -139,7 +139,7 @@
     />
 
     <!-- Dialog Klinik Ruang -->
-    <v-dialog v-model="showKlinikRuangDialog" max-width="900px" persistent scrollable>
+    <v-dialog v-model="showKlinikRuangDialog" max-width="900px" scrollable>
       <v-card class="dialog-card">
         <v-card-title class="dialog-header dialog-header-warning">
           <span class="headline-4">Pilih Klinik Ruang</span>
@@ -232,7 +232,7 @@
 </template>
 
 <script setup>
-import { ref, computed } from "vue";
+import { ref, computed, watch } from "vue";
 import { useQueue } from "@/composables/useQueue";
 import { useQueueStore } from "@/stores/queueStore";
 import { useMasterStore } from "@/stores/masterStore";
@@ -296,6 +296,13 @@ const selectedFastTrack = ref(null);
 const showKlinikRuangDialog = ref(false);
 const klinikRuangSearch = ref("");
 
+// Watch dialog state to reset search when closed
+watch(showKlinikRuangDialog, (newValue) => {
+  if (!newValue) {
+    klinikRuangSearch.value = "";
+  }
+});
+
 // Get klinik ruang data from masterStore
 const klinikRuangList = computed(() => {
   return masterStore.ruangData || [];
diff --git a/pages/Anjungan/AntrianLoket/[id].vue b/pages/Anjungan/AntrianLoket/[id].vue
index d323f05..60a21fe 100644
--- a/pages/Anjungan/AntrianLoket/[id].vue
+++ b/pages/Anjungan/AntrianLoket/[id].vue
@@ -21,51 +21,114 @@
       </div>
     </div>
 
-    <!-- Hero Call Section - Highlight card untuk nomor antrian yang dipanggil -->
-    <div v-if="currentCalledQueue" class="hero-call-section">
-      <div class="call-label">
-        <v-icon size="32" color="white" class="mr-2">mdi-bullhorn</v-icon>
-        NOMOR ANTRIAN YANG DIPANGGIL
+    <!-- Hero Call Section - Large with multiple calls on the side -->
+    <div class="hero-main-section">
+      <div v-if="currentCalledQueue" class="hero-call-section">
+        <div class="call-label">
+          <v-icon size="32" color="white" class="mr-2">mdi-bullhorn</v-icon>
+          SEDANG DIPANGGIL
+        </div>
+        <div class="call-number">{{ currentCalledQueue.noAntrian.split(' |')[0] }}</div>
+        <div class="call-klinik">{{ currentCalledQueue.klinik || 'Klinik' }}</div>
+      </div>
+      
+      <!-- Multiple Calls Cards (Small) on the right -->
+      <div v-if="currentMultipleCalls && currentMultipleCalls.length > 1" class="hero-multiple-calls-side">
+        <div 
+          v-for="(queue, idx) in currentMultipleCalls.slice(1)" 
+          :key="`multi-call-${queue.no}`"
+          class="hero-call-card-side"
+        >
+          <div class="call-number-side">{{ queue.noAntrian.split(' |')[0] }}</div>
+          <div v-if="currentMultipleCallsTimer && idx === 0" class="call-timer-side">
+            <v-icon size="12" color="white">mdi-timer</v-icon>
+            <span>{{ currentMultipleCallsTimer }}</span>
+          </div>
+        </div>
       </div>
-      <div class="call-number">{{ currentCalledQueue.noAntrian.split(' |')[0] }}</div>
-      <div class="call-loket">{{ currentCalledQueue.loket || 'Loket' }}</div>
     </div>
 
-    <!-- Main Grid - Display Loket -->
-    <div class="lokets-grid">
+    <!-- Next 5 Tickets to be Called -->
+    <div v-if="nextTicketsToCall && nextTicketsToCall.length > 0" class="next-tickets-section">
+      <div class="next-tickets-header">
+        <v-icon size="24" color="primary-600">mdi-clock-fast</v-icon>
+        <span>5 Tiket Akan Dipanggil Tercepat</span>
+      </div>
+      <div class="next-tickets-grid">
+        <div 
+          v-for="(ticket, idx) in nextTicketsToCall" 
+          :key="`next-${ticket.no}`"
+          class="next-ticket-card"
+          :class="{ 
+            'is-multiple-call': ticket.isMultipleCall,
+            'highlight-called': isCalled(ticket)
+          }"
+        >
+          <div class="next-ticket-number">{{ ticket.noAntrian.split(' |')[0] }}</div>
+          <div class="next-ticket-klinik">{{ ticket.klinik || 'Klinik' }}</div>
+          <div v-if="ticket.isMultipleCall && getTimerText(ticket)" class="next-ticket-timer">
+            <v-icon size="14" color="warning">mdi-timer</v-icon>
+            <span>{{ getTimerText(ticket) }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Main Grid - Display Klinik -->
+    <div class="kliniks-grid">
       <div
-        v-for="loket in displayedLokets"
-        :key="loket.id"
-        class="loket-box"
+        v-for="klinik in displayedClinics"
+        :key="klinik.name"
+        class="klinik-box"
       >
-        <!-- Loket Header -->
-        <div class="loket-header-bar">
-          <span class="loket-title">{{ loket.namaLoket }}</span>
-          <v-chip size="small" class="loket-count">
+        <!-- Klinik Header -->
+        <div class="klinik-header-bar">
+          <span class="klinik-title">{{ klinik.name }}</span>
+          <v-chip size="small" class="klinik-count">
             <v-icon size="16" color="white" class="mr-1">mdi-account-multiple</v-icon>
-            <span class="count-text">{{ loket.totalQueues }}</span>
+            <span class="count-text">{{ klinik.totalQueues }}</span>
           </v-chip>
         </div>
 
-        <!-- Queue Content -->
-        <div class="loket-content">
-          <!-- Current Queue -->
-          <div v-if="loket.currentQueue" class="current-section">
-            <div class="current-label">SEKARANG</div>
+          <!-- Queue Content -->
+          <div class="klinik-content">
+            <!-- Current Serving Queue (Large) -->
+            <div v-if="klinik.currentQueue" class="current-serving-section">
+              <div class="current-label">SEDANG DILAYANI</div>
+              <div 
+                class="current-number-large"
+                :class="{ 'highlight-called': isCalled(klinik.currentQueue) }"
+              >
+                {{ klinik.currentQueue.noAntrian.split(' |')[0] }}
+              </div>
+            </div>
+
+            <!-- All Queues Grid (Small) - Shows all queues including current and multiple calls -->
             <div 
-              class="current-number"
-              :class="{ 'highlight-called': isCalled(loket.currentQueue) }"
+              v-if="klinik.allQueues && klinik.allQueues.length > 0" 
+              class="all-queues-grid"
+              :style="getGridStyle(klinik.allQueues.length)"
             >
-              {{ loket.currentQueue.noAntrian.split(' |')[0] }}
+              <div 
+                v-for="queue in klinik.allQueues" 
+                :key="`queue-${queue.no}`"
+                class="queue-grid-item"
+                :class="{ 
+                  'is-current': queue.no === klinik.currentQueue?.no,
+                  'is-multiple': klinik.multipleCalls?.some(mc => mc.no === queue.no),
+                  'highlight-called': isCalled(queue)
+                }"
+              >
+                {{ queue.noAntrian.split(' |')[0] }}
+              </div>
+            </div>
+
+            <!-- Empty State -->
+            <div v-if="!klinik.currentQueue && (!klinik.allQueues || klinik.allQueues.length === 0)" class="empty-state">
+              <v-icon size="48" color="grey-lighten-3">mdi-clock-outline</v-icon>
+              <p class="empty-text">Tidak Ada Antrian</p>
             </div>
           </div>
-
-          <!-- Empty State -->
-          <div v-if="!loket.currentQueue" class="empty-state">
-            <v-icon size="48" color="grey-lighten-3">mdi-clock-outline</v-icon>
-            <p class="empty-text">Tidak Ada Antrian</p>
-          </div>
-        </div>
       </div>
     </div>
 
@@ -105,6 +168,8 @@
 import { ref, computed, onMounted, onUnmounted } from 'vue'
 import { useQueueStore } from '@/stores/queueStore'
 import { useLoketStore } from '@/stores/loketStore'
+import { useMasterStore } from '@/stores/masterStore'
+import { useClinicStore } from '@/stores/clinicStore'
 import { useRoute } from '#app'
 
 definePageMeta({
@@ -114,6 +179,8 @@ definePageMeta({
 const route = useRoute()
 const queueStore = useQueueStore()
 const loketStore = useLoketStore()
+const masterStore = useMasterStore()
+const clinicStore = useClinicStore()
 
 const currentTime = ref('')
 const currentDate = ref('')
@@ -150,161 +217,204 @@ const loketPatients = computed(() => {
   return allPatients.filter(p => p.status === 'waiting' || p.status === 'di-loket' || p.status === 'pending')
 })
 
-// Get all lokets from loketStore
-const allLokets = computed(() => {
-  return loketStore.loketData?.value || loketStore.loketData || []
-})
-
-// Helper function untuk mendapatkan loket default
-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 A'
+// Helper untuk mendapatkan waktu check-in atau waktu dipanggil
+const getCheckInTime = (patient) => {
+  // Jika ada checkInAt, gunakan itu
+  if (patient.checkInAt) {
+    return new Date(patient.checkInAt)
+  }
+  // Jika status di-loket dan ada createdAt, gunakan createdAt sebagai waktu check-in
+  if (patient.status === 'di-loket' && patient.createdAt) {
+    return new Date(patient.createdAt)
+  }
+  // Jika ada lastCalledAt, gunakan itu
+  if (patient.lastCalledAt) {
+    return new Date(patient.lastCalledAt)
+  }
+  // Fallback ke createdAt
+  return new Date(patient.createdAt || 0)
 }
 
-// Display lokets with their queues
-const displayedLokets = computed(() => {
-  if (allLokets.value.length === 0) {
-    return []
+// Display clinics with their queues - Group by klinik, filtered by loket pelayanan
+const displayedClinics = computed(() => {
+  // Get pelayanan dari loket yang dipilih
+  const targetLoketId = loketId.value
+  let allowedPelayananCodes = []
+  
+  if (targetLoketId && loketData.value) {
+    // Ambil pelayanan dari loket (array of kode klinik seperti ['AN', 'IP', 'SR'])
+    allowedPelayananCodes = loketData.value.pelayanan || []
   }
-
-  // Include currentProcessingPatient dalam list jika ada dan status "waiting", "di-loket", atau "pending"
+  
+  // Jika tidak ada loketId atau pelayanan kosong, tampilkan semua
+  const shouldFilterByPelayanan = targetLoketId && allowedPelayananCodes.length > 0
+  
+  // Include currentProcessingPatient dalam list jika ada
   let allPatientsForDistribution = [...loketPatients.value]
   
-  // Jika ada antrian yang sedang diproses, tambahkan ke list distribusi
   if (currentProcessingPatient.value && (currentProcessingPatient.value.status === 'waiting' || currentProcessingPatient.value.status === 'di-loket' || currentProcessingPatient.value.status === 'pending')) {
-    // Pastikan currentProcessingPatient ada di list (jika belum ada)
     const existsInList = allPatientsForDistribution.find(p => p.no === currentProcessingPatient.value.no)
     if (!existsInList) {
       allPatientsForDistribution.push(currentProcessingPatient.value)
     }
   }
   
-  // Sort all di-loket patients by jamPanggil (terlama dulu untuk prioritas distribusi)
-  const sortedPatients = allPatientsForDistribution.sort((a, b) => {
-    const timeA = (a.jamPanggil || '00:00').split(':').map(Number)
-    const timeB = (b.jamPanggil || '00:00').split(':').map(Number)
-    return timeA[0] * 60 + timeA[1] - (timeB[0] * 60 + timeB[1])
-  })
-
-  // Inisialisasi loket dengan currentQueue null
-  const loketAssignments = allLokets.value
-    .sort((a, b) => a.no - b.no) // Urutkan berdasarkan nomor loket
-    .map(loket => ({
-      id: loket.id,
-      namaLoket: loket.namaLoket,
-      no: loket.no,
-      currentQueue: null
-    }))
-
-  // Prioritas 1: Assign antrian yang sedang diproses (currentProcessingPatient) ke loket yang sesuai
-  // Antrian yang sedang diproses HARUS muncul di loket yang dituju
-  if (currentProcessingPatient.value && (currentProcessingPatient.value.status === 'waiting' || currentProcessingPatient.value.status === 'di-loket' || currentProcessingPatient.value.status === 'pending')) {
-    const processingPatient = currentProcessingPatient.value
-    const targetLoketId = processingPatient.loketId || 1
-    const targetLoketName = processingPatient.loket || getDefaultLoket()
+  // Filter berdasarkan loket jika ada loketId di route
+  if (targetLoketId) {
+    allPatientsForDistribution = allPatientsForDistribution.filter(p => {
+      const patientLoketId = p.loketId || 1
+      return patientLoketId === targetLoketId || 
+             patientLoketId === targetLoketId.toString() ||
+             (p.loket && loketData.value && p.loket.toLowerCase().includes(loketData.value.namaLoket?.toLowerCase() || ''))
+    })
+  }
+  
+  // Group by klinik dan filter berdasarkan pelayanan loket
+  const clinicsMap = new Map()
+  
+  allPatientsForDistribution.forEach(patient => {
+    const klinikName = patient.klinik || 'UMUM'
     
-    // Cari loket target berdasarkan loketId atau loket name
-    const targetLoket = loketAssignments.find(l => 
-      l.id === targetLoketId || 
-      l.no === targetLoketId ||
-      l.namaLoket === targetLoketName ||
-      l.namaLoket.toLowerCase() === targetLoketName.toLowerCase()
+    // Jika ada filter pelayanan, cek apakah klinik ini ada di pelayanan loket
+    if (shouldFilterByPelayanan) {
+      // Cari kode klinik dari nama klinik menggunakan clinicStore
+      const clinic = clinicStore.getClinicByName ? clinicStore.getClinicByName(klinikName) : null
+      
+      if (clinic) {
+        // Jika ditemukan di clinicStore, cek apakah kode-nya ada di pelayanan
+        const isAllowed = allowedPelayananCodes.includes(clinic.kode)
+        if (!isAllowed) return // Skip jika tidak ada di pelayanan
+      } else {
+        // Jika tidak ditemukan di clinicStore, cek menggunakan masterStore
+        const matchedKode = allowedPelayananCodes.find(kode => {
+          const k = masterStore.getKlinikByKode ? masterStore.getKlinikByKode(kode) : null
+          return k && k.nama === klinikName
+        })
+        if (!matchedKode) return // Skip jika tidak match
+      }
+    }
+    
+    if (!clinicsMap.has(klinikName)) {
+      clinicsMap.set(klinikName, [])
+    }
+    clinicsMap.get(klinikName).push(patient)
+  })
+  
+  // Jika ada filter pelayanan, pastikan semua pelayanan loket ditampilkan (meskipun belum ada antrian)
+  if (shouldFilterByPelayanan) {
+    allowedPelayananCodes.forEach(kode => {
+      const klinikData = masterStore.getKlinikByKode ? masterStore.getKlinikByKode(kode) : null
+      if (klinikData && !clinicsMap.has(klinikData.nama)) {
+        // Tambahkan klinik kosong jika belum ada antrian
+        clinicsMap.set(klinikData.nama, [])
+      }
+    })
+  }
+  
+  // Process each clinic
+  const clinics = Array.from(clinicsMap.entries()).map(([klinikName, patients]) => {
+    // Sort berdasarkan prioritas untuk multiple klinik dalam satu loket:
+    // 1. Waktu generate tiket (createdAt) - yang lebih lama lebih dulu
+    // 2. Urutan tiket (no) - yang lebih kecil lebih dulu
+    // 3. Waktu check-in - yang lebih lama lebih dulu
+    const sortedQueues = patients.sort((a, b) => {
+      // Prioritas 1: Waktu generate tiket
+      const createdAtA = new Date(a.createdAt || 0)
+      const createdAtB = new Date(b.createdAt || 0)
+      if (createdAtA.getTime() !== createdAtB.getTime()) {
+        return createdAtA - createdAtB
+      }
+      
+      // Prioritas 2: Urutan tiket
+      if (a.no !== b.no) {
+        return a.no - b.no
+      }
+      
+      // Prioritas 3: Waktu check-in
+      const checkInA = getCheckInTime(a)
+      const checkInB = getCheckInTime(b)
+      return checkInA - checkInB
+    })
+    
+    // Deteksi multiple calls (antrian yang dipanggil bersamaan dalam 5 detik)
+    const multipleCallGroups = []
+    const processed = new Set()
+    
+    sortedQueues.forEach((queue, index) => {
+      if (processed.has(queue.no)) return
+      
+      if (queue.status === 'waiting' || queue.status === 'di-loket') {
+        const callTime = queue.lastCalledAt ? new Date(queue.lastCalledAt) : (queue.createdAt ? new Date(queue.createdAt) : null)
+        if (callTime) {
+          const group = [queue]
+          processed.add(queue.no)
+          
+          sortedQueues.forEach((otherQueue, otherIndex) => {
+            if (otherIndex !== index && !processed.has(otherQueue.no) && (otherQueue.status === 'waiting' || otherQueue.status === 'di-loket')) {
+              const otherCallTime = otherQueue.lastCalledAt ? new Date(otherQueue.lastCalledAt) : (otherQueue.createdAt ? new Date(otherQueue.createdAt) : null)
+              if (otherCallTime) {
+                const timeDiff = Math.abs(callTime - otherCallTime)
+                // Jika dipanggil dalam 5 detik, anggap sebagai multiple call
+                if (timeDiff <= 5000) {
+                  group.push(otherQueue)
+                  processed.add(otherQueue.no)
+                }
+              }
+            }
+          })
+          
+          if (group.length > 1) {
+            multipleCallGroups.push(group)
+          }
+        }
+      }
+    })
+    
+    // Flatten multiple call groups untuk mendapatkan semua multiple calls
+    const allMultipleCalls = multipleCallGroups.flat()
+    
+    // Current queue adalah yang sedang dilayani (prioritas: di-loket, lalu waiting yang paling lama)
+    const currentQueue = sortedQueues.find(q => q.status === 'di-loket') || 
+                        sortedQueues.find(q => q.status === 'waiting') ||
+                        null
+    
+    // Multiple calls untuk display - semua yang dipanggil bersamaan (termasuk yang sudah di-loket)
+    const multipleCalls = allMultipleCalls.filter(q => 
+      q.no !== currentQueue?.no || currentQueue?.status !== 'di-loket'
     )
     
-    if (targetLoket) {
-      // Assign antrian yang sedang diproses sebagai prioritas tertinggi
-      // Ini akan menggantikan antrian lain yang ada di loket ini
-      targetLoket.currentQueue = processingPatient
-    }
-  }
-
-  // Distribusi antrian ke loket: setiap antrian hanya di-assign ke satu loket
-  // Prioritas: loket yang kosong dulu, lalu round-robin jika semua sudah terisi
-  const usedPatients = new Set()
-  
-  // Jika ada antrian yang sedang diproses, mark sebagai used
-  if (currentProcessingPatient.value) {
-    usedPatients.add(currentProcessingPatient.value.no)
-  }
-  
-  sortedPatients.forEach(patient => {
-    // Skip jika patient sudah di-assign atau sedang diproses
-    if (usedPatients.has(patient.no)) {
-      return
-    }
-
-    // Jika patient sudah punya loket assignment, gunakan itu
-    if (patient.loket || patient.loketId) {
-      const loketName = patient.loket || patient.loketId
-      const targetLoketId = patient.loketId || 1
-      
-      const assignedLoket = loketAssignments.find(l => 
-        l.id === targetLoketId ||
-        l.no === targetLoketId ||
-        l.namaLoket === loketName || 
-        `Loket ${l.no}` === loketName ||
-        l.namaLoket.toLowerCase() === loketName.toLowerCase()
-      )
-      
-      // Jika loket sudah punya antrian lain (bukan yang sedang diproses), skip
-      // Jika loket kosong, assign antrian ke loket tersebut
-      if (assignedLoket && !assignedLoket.currentQueue) {
-        assignedLoket.currentQueue = patient
-        usedPatients.add(patient.no)
-      }
-    } else {
-      // Cari loket yang kosong (belum ada currentQueue)
-      let emptyLoket = loketAssignments.find(l => !l.currentQueue)
-      
-      if (emptyLoket) {
-        // Assign antrian ke loket yang kosong
-        emptyLoket.currentQueue = patient
-        usedPatients.add(patient.no)
-      }
-      // Jika semua loket sudah terisi, antrian ini tidak akan ditampilkan
+    return {
+      name: klinikName,
+      currentQueue: currentQueue,
+      multipleCalls: multipleCalls,
+      allQueues: sortedQueues,
+      totalQueues: sortedQueues.length
     }
   })
-
-  // Map ke format yang diharapkan
-  return loketAssignments.map(loket => ({
-    id: loket.id,
-    namaLoket: loket.namaLoket,
-    currentQueue: loket.currentQueue,
-    totalQueues: loket.currentQueue ? 1 : 0
-  }))
+  
+  return clinics.sort((a, b) => a.name.localeCompare(b.name))
 })
 
 // Current called queue - antrian yang sedang diproses atau paling baru dipanggil
 const currentCalledQueue = computed(() => {
   // Prioritas 1: Antrian yang sedang diproses di AdminLoket (currentProcessingPatient)
-  // Status "waiting", "di-loket", atau "pending" (semuanya sudah dipanggil dan muncul di AntrianLoket)
   if (currentProcessingPatient.value && (currentProcessingPatient.value.status === 'waiting' || currentProcessingPatient.value.status === 'di-loket' || currentProcessingPatient.value.status === 'pending')) {
-    // Cari loket yang dituju dari assignment antrian
-    const loketInfo = displayedLokets.value.find(l => 
-      l.currentQueue && l.currentQueue.no === currentProcessingPatient.value.no
-    ) || allLokets.value.find(l => 
-      (l.id === currentProcessingPatient.value.loketId) || 
-      (l.namaLoket === currentProcessingPatient.value.loket)
-    )
-    
     return {
       ...currentProcessingPatient.value,
-      loket: loketInfo ? loketInfo.namaLoket : (currentProcessingPatient.value.loket || 'Loket')
+      klinik: currentProcessingPatient.value.klinik || 'Klinik'
     }
   }
   
-  // Prioritas 2: Antrian yang paling baru dipanggil dari displayedLokets
-  const allCurrentQueues = displayedLokets.value
-    .filter(loket => loket.currentQueue)
-    .map(loket => ({
-      ...loket.currentQueue,
-      loketNama: loket.namaLoket
+  // Prioritas 2: Antrian yang paling baru dipanggil dari displayedClinics
+  const allCurrentQueues = displayedClinics.value
+    .filter(klinik => klinik.currentQueue)
+    .map(klinik => ({
+      ...klinik.currentQueue,
+      klinikName: klinik.name
     }))
     .sort((a, b) => {
-      // Sort berdasarkan createdAt atau jamPanggil terbaru
-      const dateA = new Date(a.createdAt || a.jamPanggil || 0)
-      const dateB = new Date(b.createdAt || b.jamPanggil || 0)
+      const dateA = new Date(a.lastCalledAt || a.createdAt || 0)
+      const dateB = new Date(b.lastCalledAt || b.createdAt || 0)
       return dateB - dateA
     })
   
@@ -312,14 +422,252 @@ const currentCalledQueue = computed(() => {
     const patient = allCurrentQueues[0]
     return {
       ...patient,
-      loket: patient.loketNama || patient.loket || 'Loket'
+      klinik: patient.klinikName || patient.klinik || 'Klinik'
     }
   }
   
-  // Jika tidak ada antrian dipanggil/diproses, return null (hero section dikosongkan)
   return null
 })
 
+// Current multiple calls - antrian yang dipanggil bersamaan
+const currentMultipleCalls = computed(() => {
+  const allMultipleCalls = displayedClinics.value
+    .flatMap(klinik => (klinik.multipleCalls || []).map(queue => ({
+      ...queue,
+      klinikName: klinik.name
+    })))
+    .sort((a, b) => {
+      const timeA = a.lastCalledAt ? new Date(a.lastCalledAt) : new Date(a.createdAt || 0)
+      const timeB = b.lastCalledAt ? new Date(b.lastCalledAt) : new Date(b.createdAt || 0)
+      return timeB - timeA
+    })
+  
+  if (allMultipleCalls.length > 0) {
+    // Group by call time (within 5 seconds)
+    const groups = []
+    const processed = new Set()
+    
+    allMultipleCalls.forEach(queue => {
+      if (processed.has(queue.no)) return
+      
+      const callTime = queue.lastCalledAt ? new Date(queue.lastCalledAt) : new Date(queue.createdAt || 0)
+      const group = [queue]
+      processed.add(queue.no)
+      
+      allMultipleCalls.forEach(otherQueue => {
+        if (!processed.has(otherQueue.no)) {
+          const otherCallTime = otherQueue.lastCalledAt ? new Date(otherQueue.lastCalledAt) : new Date(otherQueue.createdAt || 0)
+          const timeDiff = Math.abs(callTime - otherCallTime)
+          if (timeDiff <= 5000) {
+            group.push(otherQueue)
+            processed.add(otherQueue.no)
+          }
+        }
+      })
+      
+      if (group.length > 1) {
+        groups.push(group)
+      }
+    })
+    
+    if (groups.length > 0) {
+      // Return most recent group
+      return groups[0].map(q => ({
+        ...q,
+        klinik: q.klinikName || q.klinik || 'Klinik'
+      }))
+    }
+  }
+  
+  return null
+})
+
+// Timer untuk multiple calls
+const currentMultipleCallsTimer = computed(() => {
+  if (!currentMultipleCalls.value || currentMultipleCalls.value.length === 0) return null
+  
+  const _ = currentTime.value // Force reactivity
+  
+  const firstCall = currentMultipleCalls.value[0]
+  const callTime = firstCall.lastCalledAt ? new Date(firstCall.lastCalledAt) : (firstCall.createdAt ? new Date(firstCall.createdAt) : null)
+  if (!callTime) return null
+  
+  const ttsDuration = 15000 // 15 detik
+  const elapsed = Date.now() - callTime.getTime()
+  const remaining = Math.max(0, ttsDuration - elapsed)
+  
+  if (remaining <= 0) return null
+  
+  const seconds = Math.ceil(remaining / 1000)
+  return `${seconds}s`
+})
+
+// Get timer text for multiple calls
+const getTimerText = (queue) => {
+  if (!queue) return ''
+  
+  const _ = currentTime.value // Force reactivity
+  
+  const callTime = queue.lastCalledAt ? new Date(queue.lastCalledAt) : (queue.createdAt ? new Date(queue.createdAt) : null)
+  if (!callTime) return ''
+  
+  const ttsDuration = 15000 // 15 detik
+  const elapsed = Date.now() - callTime.getTime()
+  const remaining = Math.max(0, ttsDuration - elapsed)
+  
+  if (remaining <= 0) return ''
+  
+  const seconds = Math.ceil(remaining / 1000)
+  return `${seconds}s`
+}
+
+// Next 5 tickets to be called (tercepat)
+const nextTicketsToCall = computed(() => {
+  // Ambil semua antrian dengan status 'menunggu' (belum dipanggil) atau 'waiting' (sudah dipanggil tapi belum check-in)
+  // Prioritaskan yang belum dipanggil (menunggu) dulu
+  const menungguQueues = loketPatients.value.filter(p => p.status === 'menunggu')
+  const waitingQueues = loketPatients.value.filter(p => p.status === 'waiting')
+  
+  // Gabungkan: menunggu dulu, baru waiting
+  const allWaitingQueues = [...menungguQueues, ...waitingQueues]
+  
+  // Filter berdasarkan pelayanan loket jika ada
+  const targetLoketId = loketId.value
+  let filteredQueues = allWaitingQueues
+  
+  if (targetLoketId && loketData.value) {
+    const allowedPelayananCodes = loketData.value.pelayanan || []
+    if (allowedPelayananCodes.length > 0) {
+      filteredQueues = allWaitingQueues.filter(patient => {
+        const klinikName = patient.klinik || 'UMUM'
+        const clinic = clinicStore.getClinicByName ? clinicStore.getClinicByName(klinikName) : null
+        
+        if (clinic) {
+          return allowedPelayananCodes.includes(clinic.kode)
+        } else {
+          const matchedKode = allowedPelayananCodes.find(kode => {
+            const k = masterStore.getKlinikByKode ? masterStore.getKlinikByKode(kode) : null
+            return k && k.nama === klinikName
+          })
+          return !!matchedKode
+        }
+      })
+    }
+  }
+  
+  // Sort berdasarkan prioritas:
+  // 1. Status (menunggu lebih dulu dari waiting)
+  // 2. Waktu generate tiket (createdAt) - yang lebih lama lebih dulu
+  // 3. Urutan tiket (no) - yang lebih kecil lebih dulu
+  // 4. Waktu check-in - yang lebih lama lebih dulu
+  const sortedQueues = filteredQueues.sort((a, b) => {
+    // Prioritas 1: Status (menunggu > waiting)
+    const statusPriority = { 'menunggu': 1, 'waiting': 2 }
+    const statusDiff = (statusPriority[a.status] || 99) - (statusPriority[b.status] || 99)
+    if (statusDiff !== 0) return statusDiff
+    
+    // Prioritas 2: Waktu generate tiket
+    const createdAtA = new Date(a.createdAt || 0)
+    const createdAtB = new Date(b.createdAt || 0)
+    if (createdAtA.getTime() !== createdAtB.getTime()) {
+      return createdAtA - createdAtB
+    }
+    
+    // Prioritas 3: Urutan tiket
+    if (a.no !== b.no) {
+      return a.no - b.no
+    }
+    
+    // Prioritas 4: Waktu check-in
+    const checkInA = getCheckInTime(a)
+    const checkInB = getCheckInTime(b)
+    return checkInA - checkInB
+  })
+  
+  // Deteksi multiple calls (antrian yang dipanggil bersamaan dalam 5 detik)
+  const multipleCallGroups = []
+  const processed = new Set()
+  
+  sortedQueues.forEach((queue, index) => {
+    if (processed.has(queue.no)) return
+    
+    const callTime = queue.lastCalledAt ? new Date(queue.lastCalledAt) : null
+    if (callTime) {
+      const group = [queue]
+      processed.add(queue.no)
+      
+      sortedQueues.forEach((otherQueue, otherIndex) => {
+        if (otherIndex !== index && !processed.has(otherQueue.no)) {
+          const otherCallTime = otherQueue.lastCalledAt ? new Date(otherQueue.lastCalledAt) : null
+          if (otherCallTime) {
+            const timeDiff = Math.abs(callTime - otherCallTime)
+            if (timeDiff <= 5000) {
+              group.push(otherQueue)
+              processed.add(otherQueue.no)
+            }
+          }
+        }
+      })
+      
+      if (group.length > 1) {
+        multipleCallGroups.push(group)
+      }
+    }
+  })
+  
+  // Flatten multiple call groups
+  const allMultipleCalls = multipleCallGroups.flat()
+  
+  // Exclude current called queue dari next tickets
+  const currentCalledNo = currentCalledQueue.value?.no
+  const filteredForNext = sortedQueues.filter(q => q.no !== currentCalledNo)
+  
+  // Ambil 5 teratas dan mark yang multiple call
+  const next5 = filteredForNext.slice(0, 5).map(queue => ({
+    ...queue,
+    isMultipleCall: allMultipleCalls.some(mc => mc.no === queue.no),
+    klinik: queue.klinik || 'Klinik'
+  }))
+  
+  return next5
+})
+
+// Get grid style based on queue count - semakin sedikit antrian, semakin besar ukurannya
+const getGridStyle = (queueCount) => {
+  let minWidth = 85
+  let fontSize = 16
+  let padding = '10px 8px'
+  
+  if (queueCount <= 3) {
+    // Jika antrian sangat sedikit (1-3), perbesar maksimal
+    minWidth = 120
+    fontSize = 20
+    padding = '14px 12px'
+  } else if (queueCount <= 6) {
+    // Jika antrian sedikit (4-6), perbesar sedang
+    minWidth = 100
+    fontSize = 18
+    padding = '12px 10px'
+  } else if (queueCount <= 10) {
+    // Jika antrian sedang (7-10), ukuran normal
+    minWidth = 85
+    fontSize = 16
+    padding = '10px 8px'
+  } else {
+    // Jika antrian banyak (>10), ukuran lebih kecil
+    minWidth = 75
+    fontSize = 14
+    padding = '8px 6px'
+  }
+  
+  return {
+    gridTemplateColumns: `repeat(auto-fill, minmax(${minWidth}px, 1fr))`,
+    '--grid-item-font-size': `${fontSize}px`,
+    '--grid-item-padding': padding
+  }
+}
+
+
 // Check if a queue is currently called (highlighted)
 const isCalled = (queue) => {
   if (!currentCalledQueue.value || !queue) return false
@@ -329,9 +677,10 @@ const isCalled = (queue) => {
 // Statistics
 const statistics = computed(() => {
   const all = loketPatients.value
+  const active = all.filter(p => p.status === 'di-loket').length
   return {
     total: all.length,
-    active: all.length // Semua sudah di-loket berarti sedang dilayani
+    active: active
   }
 })
 
@@ -458,7 +807,191 @@ onUnmounted(() => {
   opacity: 0.95;
 }
 
-/* ========== HERO CALL SECTION ========== */
+/* ========== HERO MAIN SECTION ========== */
+.hero-main-section {
+  display: flex;
+  gap: 16px;
+  margin-bottom: 20px;
+  align-items: flex-start;
+}
+
+/* ========== HERO CALL SECTION (LARGE) ========== */
+.hero-call-section {
+  background: linear-gradient(135deg, var(--color-danger-600) 0%, var(--color-danger-700) 100%);
+  border-radius: 20px;
+  padding: 32px;
+  flex: 1;
+  text-align: center;
+  box-shadow: 0 12px 32px rgba(224, 21, 7, 0.35);
+  animation: pulse-highlight 2s ease-in-out infinite;
+}
+
+.call-label {
+  font-size: 28px;
+  font-weight: 700;
+  color: var(--color-neutral-100);
+  letter-spacing: 2px;
+  margin-bottom: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-transform: uppercase;
+}
+
+.call-number {
+  font-size: 140px;
+  font-weight: 900;
+  color: var(--color-neutral-100);
+  margin: 16px 0;
+  letter-spacing: 8px;
+  line-height: 1;
+  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+  animation: number-pulse 1.5s ease-in-out infinite;
+}
+
+.call-klinik {
+  font-size: 36px;
+  font-weight: 700;
+  color: var(--color-neutral-100);
+  letter-spacing: 1px;
+}
+
+/* ========== NEXT TICKETS SECTION ========== */
+.next-tickets-section {
+  background: var(--color-neutral-100);
+  border: 2px solid var(--color-primary-200);
+  border-radius: 16px;
+  padding: 20px;
+  margin-bottom: 20px;
+  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.12);
+}
+
+.next-tickets-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--color-primary-600);
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 2px solid var(--color-primary-200);
+}
+
+.next-tickets-grid {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 12px;
+  max-width: 100%;
+}
+
+@media (max-width: 1366px) {
+  .next-tickets-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media (max-width: 768px) {
+  .next-tickets-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  
+  .next-ticket-number {
+    font-size: 24px;
+  }
+  
+  .next-ticket-klinik {
+    font-size: 12px;
+  }
+}
+
+.next-ticket-card {
+  background: var(--color-neutral-100);
+  border: 2px solid var(--color-primary-300);
+  border-radius: 12px;
+  padding: 16px;
+  text-align: center;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+
+  &.is-multiple-call {
+    border-color: var(--color-warning-500);
+    background: var(--color-warning-50);
+    box-shadow: 0 2px 8px rgba(255, 152, 0, 0.3);
+  }
+
+  &.highlight-called {
+    border-color: var(--color-danger-500);
+    background: var(--color-danger-50);
+    animation: highlight-flash 1s ease-in-out infinite;
+    box-shadow: 0 2px 8px rgba(244, 67, 54, 0.4);
+  }
+}
+
+.next-ticket-number {
+  font-size: 32px;
+  font-weight: 900;
+  color: var(--color-neutral-900);
+  letter-spacing: 2px;
+  margin-bottom: 8px;
+  line-height: 1;
+}
+
+.next-ticket-klinik {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--color-neutral-600);
+  margin-bottom: 6px;
+}
+
+.next-ticket-timer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--color-warning-700);
+  margin-top: 6px;
+}
+
+/* Multiple Calls on the Side */
+.hero-multiple-calls-side {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  flex: 0 0 140px;
+}
+
+.hero-call-card-side {
+  background: linear-gradient(135deg, var(--color-warning-600) 0%, var(--color-warning-700) 100%);
+  border-radius: 12px;
+  padding: 12px 16px;
+  text-align: center;
+  box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3);
+}
+
+.call-number-side {
+  font-size: 24px;
+  font-weight: 800;
+  color: var(--color-neutral-100);
+  letter-spacing: 2px;
+  line-height: 1;
+  margin-bottom: 4px;
+}
+
+.call-timer-side {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--color-neutral-100);
+  margin-top: 4px;
+}
+
+/* ========== HERO CALL SECTION (OLD - KEEP FOR REFERENCE) ========== */
 .hero-call-section {
   background: linear-gradient(135deg, var(--color-danger-600) 0%, var(--color-danger-700) 100%);
   border-radius: 20px;
@@ -517,36 +1050,36 @@ onUnmounted(() => {
   letter-spacing: 1px;
 }
 
-/* ========== LOKETS GRID ========== */
-.lokets-grid {
+/* ========== KLINIKS GRID ========== */
+.kliniks-grid {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 16px;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  gap: 20px;
   margin-bottom: 20px;
   flex: 1;
 }
 
-.loket-box {
+.klinik-box {
   background: var(--color-neutral-100);
   border: 2px solid var(--color-primary-200);
   border-radius: 16px;
   overflow: hidden;
   box-shadow: 0 4px 12px rgba(33, 150, 243, 0.12);
-  min-height: 240px;
+  min-height: 320px;
   display: flex;
   flex-direction: column;
 }
 
-.loket-header-bar {
+.klinik-header-bar {
   background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-700) 100%);
-  padding: 16px 20px;
+  padding: 18px 22px;
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
 
-.loket-title {
-  font-size: 22px;
+.klinik-title {
+  font-size: 24px;
   font-weight: 800;
   color: var(--color-neutral-100);
   letter-spacing: 0.5px;
@@ -555,14 +1088,15 @@ onUnmounted(() => {
   flex: 1;
 }
 
-.loket-count {
+.klinik-count {
   background: rgba(255, 255, 255, 0.2) !important;
   color: var(--color-neutral-100) !important;
   font-weight: 700;
   backdrop-filter: blur(10px);
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: 6px;
+  padding: 6px 12px !important;
 }
 
 .count-text {
@@ -570,15 +1104,134 @@ onUnmounted(() => {
   font-weight: 800;
 }
 
-.loket-content {
+.klinik-content {
   flex: 1;
   display: flex;
   flex-direction: column;
-  justify-content: center;
-  padding: 20px;
-  background: var(--color-primary-100);
+  padding: 22px;
+  background: var(--color-primary-50);
+  gap: 12px;
 }
 
+/* Current Serving Section */
+.current-serving-section {
+  text-align: center;
+  background: var(--color-neutral-100);
+  border-radius: 12px;
+  padding: 18px;
+  margin-bottom: 12px;
+}
+
+.current-label {
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--color-primary-600);
+  margin-bottom: 10px;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+}
+
+.current-number-large {
+  font-size: 72px;
+  font-weight: 900;
+  color: var(--color-neutral-900);
+  letter-spacing: 3px;
+  line-height: 1;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+
+  &.highlight-called {
+    color: var(--color-danger-600);
+    animation: highlight-flash 1s ease-in-out infinite;
+    transform: scale(1.05);
+  }
+}
+
+/* Multiple Calls Row (Small chips) */
+.multiple-calls-row {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-bottom: 12px;
+}
+
+.multiple-call-chip {
+  background: var(--color-warning-100);
+  border: 1px solid var(--color-warning-400);
+  border-radius: 8px;
+  padding: 8px 12px;
+  text-align: center;
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--color-warning-800);
+  transition: all 0.3s ease;
+  white-space: nowrap;
+
+  &.highlight-called {
+    border-color: var(--color-danger-500);
+    background: var(--color-danger-100);
+    color: var(--color-danger-700);
+    animation: highlight-flash 1s ease-in-out infinite;
+  }
+}
+
+/* All Queues Grid */
+.all-queues-grid {
+  display: grid;
+  gap: 10px;
+  margin-top: 12px;
+}
+
+.queue-grid-item {
+  background: var(--color-neutral-100);
+  border: 2px solid var(--color-neutral-500);
+  border-radius: 8px;
+  padding: var(--grid-item-padding, 10px 8px);
+  text-align: center;
+  font-size: var(--grid-item-font-size, 16px);
+  font-weight: 700;
+  color: var(--color-neutral-700);
+  transition: all 0.3s ease;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+
+  /* Current queue - highlighted in orange */
+  &.is-current {
+    background: var(--color-warning-100);
+    border: 3px solid var(--color-warning-600);
+    color: var(--color-warning-800);
+    font-weight: 800;
+    box-shadow: 0 2px 6px rgba(255, 152, 0, 0.3);
+  }
+
+  /* Multiple calls - highlighted in red */
+  &.is-multiple {
+    background: var(--color-danger-100);
+    border: 3px solid var(--color-danger-600);
+    color: var(--color-danger-700);
+    font-weight: 800;
+    box-shadow: 0 2px 6px rgba(244, 67, 54, 0.3);
+  }
+
+  /* Currently called - red with animation */
+  &.highlight-called {
+    background: var(--color-danger-100);
+    border: 3px solid var(--color-danger-600);
+    color: var(--color-danger-700);
+    animation: highlight-flash 1s ease-in-out infinite;
+    font-weight: 800;
+    box-shadow: 0 2px 8px rgba(244, 67, 54, 0.4);
+  }
+
+  /* If both current and multiple, prioritize multiple (red) */
+  &.is-current.is-multiple {
+    background: var(--color-danger-100);
+    border: 3px solid var(--color-danger-600);
+    color: var(--color-danger-700);
+    box-shadow: 0 2px 8px rgba(244, 67, 54, 0.4);
+  }
+}
+
+
 .current-section {
   text-align: center;
   margin-bottom: 12px;
@@ -747,6 +1400,16 @@ onUnmounted(() => {
     padding: 24px;
   }
 
+  .hero-main-section {
+    flex-direction: column;
+  }
+
+  .hero-multiple-calls-side {
+    flex-direction: row;
+    flex-wrap: wrap;
+    flex: 1;
+  }
+
   .call-label {
     font-size: 24px;
   }
@@ -755,10 +1418,19 @@ onUnmounted(() => {
     font-size: 100px;
   }
 
+  .call-number {
+    font-size: 100px;
+  }
+
+
   .call-loket {
     font-size: 28px;
   }
 
+  .kliniks-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
   .lokets-grid {
     gap: 12px;
   }
@@ -866,9 +1538,29 @@ onUnmounted(() => {
     font-size: 80px;
   }
 
+  .call-number-small {
+    font-size: 28px;
+  }
+
   .current-number {
     font-size: 60px;
   }
+
+  .current-number-large {
+    font-size: 48px;
+  }
+
+  .kliniks-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .hero-call-card-small {
+    min-width: 100px;
+  }
+
+  .call-number-tiny {
+    font-size: 20px;
+  }
 }
 
 /* Prevent text selection */
diff --git a/pages/Anjungan/AntrianLoket/index.vue b/pages/Anjungan/AntrianLoket/index.vue
index aa86f0f..aad6760 100644
--- a/pages/Anjungan/AntrianLoket/index.vue
+++ b/pages/Anjungan/AntrianLoket/index.vue
@@ -107,9 +107,13 @@ const numberToLetter = (num) => {
   return String.fromCharCode(Math.min(charCode, 90));
 };
 
-// Get all lokets
+// Get all lokets from loketStore (master loket)
 const allLokets = computed(() => {
-  return loketStore.loketData?.value || loketStore.loketData || [];
+  // Akses langsung dari loketStore.loketData (ref)
+  const lokets = loketStore.loketData
+  if (!lokets) return []
+  // Jika lokets adalah ref, gunakan .value, jika tidak langsung return
+  return Array.isArray(lokets) ? lokets : (lokets.value || [])
 });
 
 // Pagination
diff --git a/pages/CheckInPasien/checkIn.vue b/pages/CheckInPasien/checkIn.vue
index 8d50c7b..68c6ee1 100644
--- a/pages/CheckInPasien/checkIn.vue
+++ b/pages/CheckInPasien/checkIn.vue
@@ -306,8 +306,13 @@
                             </div>
                             
                             <div v-if="recentHistory.length > 0" class="recent-history-list">
+                              <!-- Info jumlah data -->
+                              <div v-if="recentHistory.length > recentHistoryItemsPerPage" class="mb-2 text-caption text-grey-darken-1">
+                                Menampilkan {{ (recentHistoryPage - 1) * recentHistoryItemsPerPage + 1 }} - {{ Math.min(recentHistoryPage * recentHistoryItemsPerPage, recentHistory.length) }} dari {{ recentHistory.length }} riwayat
+                              </div>
+                              
                               <v-card
-                                v-for="(item, index) in recentHistory"
+                                v-for="(item, index) in paginatedRecentHistory"
                                 :key="index"
                                 variant="outlined"
                                 class="mb-2 history-item-compact"
@@ -380,6 +385,19 @@
                                   </div>
                                 </v-card-text>
                               </v-card>
+                              
+                              <!-- Pagination untuk recent history -->
+                              <div v-if="totalRecentHistoryPages > 1" class="mt-3 d-flex justify-center">
+                                <v-pagination
+                                  v-model="recentHistoryPage"
+                                  :length="totalRecentHistoryPages"
+                                  :total-visible="5"
+                                  color="primary"
+                                  size="small"
+                                  density="compact"
+                                  rounded="circle"
+                                ></v-pagination>
+                              </div>
                             </div>
                             
                             <div v-else class="text-center py-6">
@@ -892,14 +910,20 @@
           </div>
 
           <!-- History List -->
-          <div v-if="filteredHistory.length > 0" class="history-list">
-            <v-card
-              v-for="(item, index) in filteredHistory"
-              :key="index"
-              variant="outlined"
-              class="mb-3 history-item"
-              :class="getStatusClass(item.status)"
-            >
+          <div v-if="filteredHistory.length > 0">
+            <!-- Info jumlah data -->
+            <div class="mb-3 text-body-2 text-grey-darken-1">
+              Menampilkan {{ (historyPage - 1) * historyItemsPerPage + 1 }} - {{ Math.min(historyPage * historyItemsPerPage, filteredHistory.length) }} dari {{ filteredHistory.length }} riwayat
+            </div>
+            
+            <div class="history-list">
+              <v-card
+                v-for="(item, index) in paginatedHistory"
+                :key="index"
+                variant="outlined"
+                class="mb-3 history-item"
+                :class="getStatusClass(item.status)"
+              >
               <v-card-text class="pa-4">
                 <div class="d-flex justify-space-between align-start">
                   <div class="flex-grow-1">
@@ -988,6 +1012,18 @@
                 </div>
               </v-card-text>
             </v-card>
+            </div>
+            
+            <!-- Pagination -->
+            <div v-if="totalHistoryPages > 1" class="mt-4 d-flex justify-center">
+              <v-pagination
+                v-model="historyPage"
+                :length="totalHistoryPages"
+                :total-visible="7"
+                color="primary"
+                rounded="circle"
+              ></v-pagination>
+            </div>
           </div>
 
           <!-- Empty State -->
@@ -1214,6 +1250,8 @@ if (typeof window !== 'undefined') {
 const historyDialog = ref(false);
 const historySearch = ref('');
 const historyStatusFilter = ref('');
+const historyPage = ref(1);
+const historyItemsPerPage = ref(10);
 const checkInHistory = ref<Array<{
   patientId: string;
   queueNumber?: string;
@@ -2959,11 +2997,29 @@ const saveToHistory = (item: {
 };
 
 const deleteHistoryItem = (index: number) => {
-  checkInHistory.value.splice(index, 1);
-  if (typeof window !== 'undefined') {
-    localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(checkInHistory.value));
+  // Index dari paginatedHistory, perlu dikonversi ke index di checkInHistory
+  const paginatedItem = paginatedHistory.value[index];
+  if (!paginatedItem) return;
+  
+  // Cari index sebenarnya di checkInHistory
+  const actualIndex = checkInHistory.value.findIndex(h => 
+    h.patientId === paginatedItem.patientId && 
+    h.checkInTime === paginatedItem.checkInTime &&
+    h.method === paginatedItem.method
+  );
+  
+  if (actualIndex !== -1) {
+    checkInHistory.value.splice(actualIndex, 1);
+    if (typeof window !== 'undefined') {
+      localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(checkInHistory.value));
+    }
+    showSnackbar('Berhasil', 'Riwayat berhasil dihapus', 'success', 'mdi-check');
+    
+    // Reset ke halaman sebelumnya jika halaman saat ini kosong
+    if (paginatedHistory.value.length === 0 && historyPage.value > 1) {
+      historyPage.value = Math.max(1, historyPage.value - 1);
+    }
   }
-  showSnackbar('Berhasil', 'Riwayat berhasil dihapus', 'success', 'mdi-check');
 };
 
 const clearHistory = () => {
@@ -2977,9 +3033,10 @@ const clearHistory = () => {
 const openHistoryDialog = () => {
   // Pastikan history dimuat ulang saat dialog dibuka
   loadHistory();
-  // Reset filter saat membuka dialog
+  // Reset filter dan pagination saat membuka dialog
   historySearch.value = '';
   historyStatusFilter.value = '';
+  historyPage.value = 1;
   historyDialog.value = true;
 };
 
@@ -3081,7 +3138,24 @@ const filteredHistory = computed(() => {
   return filtered;
 });
 
-// Recent history untuk ditampilkan di sidebar (5 item terbaru)
+// Paginated history
+const paginatedHistory = computed(() => {
+  const start = (historyPage.value - 1) * historyItemsPerPage.value;
+  const end = start + historyItemsPerPage.value;
+  return filteredHistory.value.slice(start, end);
+});
+
+// Total pages untuk pagination
+const totalHistoryPages = computed(() => {
+  return Math.ceil(filteredHistory.value.length / historyItemsPerPage.value);
+});
+
+// Reset page saat filter berubah
+watch([historySearch, historyStatusFilter], () => {
+  historyPage.value = 1;
+});
+
+// Recent history untuk ditampilkan di sidebar
 // Hanya menampilkan riwayat dari hari ini setelah reset (setelah jam 10 malam)
 const recentHistory = computed(() => {
   const todayAfterReset = getTodayAfterReset();
@@ -3093,7 +3167,28 @@ const recentHistory = computed(() => {
     return itemDateStr === todayAfterReset;
   });
   
-  return todayHistory.slice(0, 5);
+  // Sort by checkInTime (terbaru di atas)
+  return todayHistory.sort((a, b) => {
+    const timeA = new Date(a.checkInTime || a.checkInDate || 0).getTime();
+    const timeB = new Date(b.checkInTime || b.checkInDate || 0).getTime();
+    return timeB - timeA; // Descending order (newest first)
+  });
+});
+
+// Pagination untuk recent history
+const recentHistoryPage = ref(1);
+const recentHistoryItemsPerPage = ref(5);
+
+// Paginated recent history
+const paginatedRecentHistory = computed(() => {
+  const start = (recentHistoryPage.value - 1) * recentHistoryItemsPerPage.value;
+  const end = start + recentHistoryItemsPerPage.value;
+  return recentHistory.value.slice(start, end);
+});
+
+// Total pages untuk recent history pagination
+const totalRecentHistoryPages = computed(() => {
+  return Math.ceil(recentHistory.value.length / recentHistoryItemsPerPage.value);
 });
 
 const getStatusColor = (status: string) => {
diff --git a/stores/loketStore.js b/stores/loketStore.js
index 641ccbf..896b11f 100644
--- a/stores/loketStore.js
+++ b/stores/loketStore.js
@@ -2,6 +2,7 @@
 import { defineStore } from 'pinia';
 import { ref, computed } from 'vue';
 import { useClinicStore } from './clinicStore';
+import { useAnjunganStore } from './anjunganStore';
 
 // Helper function: Convert nomor loket ke huruf (1 -> A, 2 -> B, dst)
 const numberToLetter = (num) => {
@@ -11,61 +12,139 @@ const numberToLetter = (num) => {
   return String.fromCharCode(Math.min(charCode, 90)); // Maksimal Z (90)
 };
 
+// Helper function: Get pelayanan contoh dari master anjungan
+// Mengambil data klinik dari anjungan pertama (Reguler) sebagai contoh
+const getPelayananContohDariAnjungan = (anjunganItems) => {
+  // Ambil data klinik dari anjungan pertama (Reguler) jika ada
+  let klinikAnjunganReguler = [];
+  if (anjunganItems && anjunganItems.length > 0) {
+    // Cari anjungan dengan jenisPasien 'Reguler' atau ambil yang pertama
+    const anjunganReguler = anjunganItems.find(a => a.jenisPasien === 'Reguler') || anjunganItems[0];
+    klinikAnjunganReguler = anjunganReguler.klinik || [];
+  }
+  
+  // Jika tidak ada data dari anjungan, gunakan data default dari master anjungan
+  if (klinikAnjunganReguler.length === 0) {
+    klinikAnjunganReguler = ['AN', 'AS', 'BD', 'GR', 'HO', 'GI', 'GZ', 'IP', 'JT', 'JW', 'KK', 'MT', 'OB', 'PR', 'RT', 'RM', 'SR'];
+  }
+  
+  // Distribusi pelayanan ke beberapa loket sebagai contoh
+  // Menggunakan data klinik yang tersedia dari master anjungan
+  return {
+    loket1: klinikAnjunganReguler.filter(k => ['RT', 'RM', 'TD'].includes(k)).length > 0 
+      ? klinikAnjunganReguler.filter(k => ['RT', 'RM', 'TD'].includes(k))
+      : klinikAnjunganReguler.slice(0, 3), // Ambil 3 pertama jika tidak ada match
+    loket2: klinikAnjunganReguler.filter(k => ['JW', 'SR'].includes(k)).length > 0
+      ? klinikAnjunganReguler.filter(k => ['JW', 'SR'].includes(k))
+      : klinikAnjunganReguler.slice(3, 5), // Ambil 2 berikutnya
+    loket3: klinikAnjunganReguler.filter(k => ['AS', 'JT'].includes(k)).length > 0
+      ? klinikAnjunganReguler.filter(k => ['AS', 'JT'].includes(k))
+      : klinikAnjunganReguler.slice(5, 7), // Ambil 2 berikutnya
+    loket4: klinikAnjunganReguler.filter(k => ['KK', 'PR'].includes(k)).length > 0
+      ? klinikAnjunganReguler.filter(k => ['KK', 'PR'].includes(k))
+      : klinikAnjunganReguler.slice(7, 9), // Ambil 2 berikutnya
+  };
+};
+
 export const useLoketStore = defineStore('loket', () => {
   const clinicStore = useClinicStore();
+  const anjunganStore = useAnjunganStore();
+
+  // Get pelayanan contoh dari master anjungan secara dinamis
+  // Menggunakan computed untuk mendapatkan data terbaru dari anjunganStore
+  const getPelayananContoh = () => {
+    // getAllAnjungan adalah computed yang mengembalikan anjunganItems.value
+    // Jadi langsung akses tanpa .value karena computed sudah handle itu
+    try {
+      const anjunganItems = anjunganStore.getAllAnjungan || [];
+      return getPelayananContohDariAnjungan(anjunganItems);
+    } catch (error) {
+      // Fallback jika store belum terinisialisasi
+      console.warn('AnjunganStore belum terinisialisasi, menggunakan data default');
+      return getPelayananContohDariAnjungan([]);
+    }
+  };
+
+  // Inisialisasi data loket dengan pelayanan dari master anjungan
+  // Data akan diupdate saat store diinisialisasi
+  const initLoketData = () => {
+    const pelayananContoh = getPelayananContoh();
+    return [
+      {
+        id: 1,
+        no: 1,
+        namaLoket: "Loket A",
+        kuota: 500,
+        pelayanan: pelayananContoh.loket1, // Dari master anjungan
+        pembayaran: "JKN",
+        keterangan: "ONLINE",
+        statusPelayanan: "RAWAT JALAN",
+      },
+      {
+        id: 2,
+        no: 2,
+        namaLoket: "Loket B",
+        kuota: 666,
+        pelayanan: pelayananContoh.loket2, // Dari master anjungan
+        pembayaran: "JKN",
+        keterangan: "ONLINE",
+        statusPelayanan: "RAWAT JALAN",
+      },
+      {
+        id: 3,
+        no: 3,
+        namaLoket: "Loket C",
+        kuota: 666,
+        pelayanan: pelayananContoh.loket3, // Dari master anjungan
+        pembayaran: "JKN",
+        keterangan: "ONLINE",
+        statusPelayanan: "RAWAT JALAN",
+      },
+      {
+        id: 4,
+        no: 4,
+        namaLoket: "Loket D",
+        kuota: 3676,
+        pelayanan: pelayananContoh.loket4, // Dari master anjungan
+        pembayaran: "JKN",
+        keterangan: "ONLINE",
+        statusPelayanan: "RAWAT JALAN",
+      },
+    ];
+  };
 
   // State - Loket Data
-  const loketData = ref([
-    {
-      id: 1,
-      no: 1,
-      namaLoket: "Loket A",
-      kuota: 500,
-      pelayanan: ["RT", "RM", "TD"],
-      pembayaran: "JKN",
-      keterangan: "ONLINE",
-      statusPelayanan: "RAWAT JALAN",
-    },
-    {
-      id: 2,
-      no: 2,
-      namaLoket: "Loket B",
-      kuota: 666,
-      pelayanan: ["JW", "SR"],
-      pembayaran: "JKN",
-      keterangan: "ONLINE",
-      statusPelayanan: "RAWAT JALAN",
-    },
-    {
-      id: 3,
-      no: 3,
-      namaLoket: "Loket C",
-      kuota: 666,
-      pelayanan: ["AS", "JT"],
-      pembayaran: "JKN",
-      keterangan: "ONLINE",
-      statusPelayanan: "RAWAT JALAN",
-    },
-    {
-      id: 4,
-      no: 4,
-      namaLoket: "Loket D",
-      kuota: 3676,
-      pelayanan: ["KK", "PR"],
-      pembayaran: "JKN",
-      keterangan: "ONLINE",
-      statusPelayanan: "RAWAT JALAN",
-    },
-  ]);
+  // Data pelayanan diambil dari contoh master anjungan
+  const loketData = ref(initLoketData());
 
   // Computed - Available services (reference dari clinicStore)
+  // Mengambil data dari clinicStore untuk dropdown pelayanan
   const availableServices = computed(() => {
-    const clinics = clinicStore.getAllClinics.value || [];
-    return clinics.map(c => ({
-      id: c.kode,
-      nama: c.name,
-      kode: c.kode,
-    }));
+    try {
+      // Akses getAllClinics computed dari clinicStore
+      // Karena kita di dalam computed, Vue akan handle reactivity
+      const clinicsComputed = clinicStore.getAllClinics;
+      
+      // getAllClinics adalah computed, jadi kita perlu .value untuk mendapatkan array
+      const clinicsArray = clinicsComputed?.value || [];
+      
+      // Pastikan clinicsArray adalah array
+      if (!Array.isArray(clinicsArray) || clinicsArray.length === 0) {
+        console.warn('No clinics available from clinicStore');
+        return [];
+      }
+      
+      // Map ke format yang dibutuhkan form: { id, nama, kode }
+      // id menggunakan kode untuk kompatibilitas dengan form yang menggunakan item-value="id"
+      return clinicsArray.map(c => ({
+        id: c.kode, // Menggunakan kode sebagai id (sesuai dengan item-value="id" di form)
+        nama: c.name,
+        kode: c.kode,
+      }));
+    } catch (error) {
+      console.error('Error getting available services from clinicStore:', error);
+      return [];
+    }
   });
 
   // Actions - CRUD Operations
diff --git a/stores/masterStore.js b/stores/masterStore.js
index e8dc2a3..ec38094 100644
--- a/stores/masterStore.js
+++ b/stores/masterStore.js
@@ -125,6 +125,8 @@ export const useMasterStore = defineStore('master', () => {
   // ============================================
   // Reference dari loketStore
   const loketData = computed(() => loketStore.loketData);
+  // availableServices adalah computed dari loketStore
+  // Pinia computed sudah handle reactivity dengan baik, jadi akses langsung
   const availableServices = computed(() => loketStore.availableServices);
 
   // Actions - Loket (delegate to loketStore)
diff --git a/stores/queueStore.js b/stores/queueStore.js
index 6f1e8db..2b14dd6 100644
--- a/stores/queueStore.js
+++ b/stores/queueStore.js
@@ -366,9 +366,15 @@ export const useQueueStore = defineStore('queue', () => {
     }
 
     // Update status dari 'menunggu' menjadi 'waiting' (sudah dipanggil, bisa check-in)
+    // Track waktu panggilan untuk multiple calls detection
+    const callTimestamp = new Date().toISOString();
     const index = allPatients.value.findIndex(p => p.no === nextPatient.no);
     if (index !== -1) {
-      allPatients.value[index] = { ...allPatients.value[index], status: "waiting" };
+      allPatients.value[index] = { 
+        ...allPatients.value[index], 
+        status: "waiting",
+        lastCalledAt: callTimestamp // Track waktu panggilan untuk multiple calls
+      };
     }
 
     return {
@@ -421,10 +427,16 @@ export const useQueueStore = defineStore('queue', () => {
     const patientsToCall = combinedList.slice(0, maxCallable);
 
     // Update status dari 'menunggu' menjadi 'waiting' (sudah dipanggil, bisa check-in)
+    // Track waktu panggilan untuk multiple calls detection - semua dipanggil dengan timestamp yang sama
+    const callTimestamp = new Date().toISOString();
     patientsToCall.forEach((patient) => {
       const index = allPatients.value.findIndex(p => p.no === patient.no);
       if (index !== -1) {
-        allPatients.value[index] = { ...allPatients.value[index], status: "waiting" };
+        allPatients.value[index] = { 
+          ...allPatients.value[index], 
+          status: "waiting",
+          lastCalledAt: callTimestamp // Track waktu panggilan untuk multiple calls
+        };
       }
     });