update logika pemanggilan, sticky konten, tampilan card

components/features/queue/CurrentPatientCard.vue

@@ -254,7 +254,7 @@ defineEmits(['action', 'change-klinik', 'process-next', 'call', 'open-klinik-rua
 }
 
 .patient-number {
-  font-size: 28px;
+  font-size: 32px;
   line-height: 36px;
   font-weight: 700;
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

components/features/queue/PatientCard.vue

@@ -10,7 +10,8 @@
         elevation="2"
         :class="{ 
           'clickable-card': isClickable,
-          'fast-track-card': isFastTrack
+          'fast-track-card': isFastTrack && !isCurrentlyProcessing,
+          'processing-card': isCurrentlyProcessing
         }"
         @click="handleCardClick"
         v-bind="isClickable ? tooltipProps : {}"
@@ -92,6 +93,9 @@
 
 <script setup>
 import { computed } from 'vue';
+import { useQueueStore } from '~/stores/queueStore';
+
+const queueStore = useQueueStore();
 
 const props = defineProps({
   patient: {
@@ -111,6 +115,13 @@ const isFastTrack = computed(() => {
   return fastTrack === 'YA';
 });
 
+const isCurrentlyProcessing = computed(() => {
+  const currentPatient = queueStore.currentProcessingPatient?.loket;
+  if (!currentPatient || !props.patient) return false;
+  return currentPatient.no === props.patient.no || 
+         currentPatient.barcode === props.patient.barcode;
+});
+
 const isEksekutif = computed(() => {
   const pembayaran = (props.patient.pembayaran ?? "").toString().trim().toUpperCase();
   return pembayaran === 'EKSEKUTIF';
@@ -222,6 +233,18 @@ const getStatusLabel = (status) => {
       border-color: rgba(255, 132, 65, 0.6);
     }
   }
+
+  &.processing-card {
+    background: var(--color-primary-100) !important;
+    border-color: var(--color-primary-400);
+    box-shadow: 0 4px 12px rgba(25, 118, 210, 0.2) !important;
+
+    &:hover {
+      background: var(--color-primary-200) !important;
+      border-color: var(--color-primary-500);
+      box-shadow: 0 6px 16px rgba(25, 118, 210, 0.25) !important;
+    }
+  }
 }
 
 .card-header {