tampilan antrean masuk

pages/Anjungan/AntreanMasuk/[id].vue

@@ -9,7 +9,7 @@
             src="/Rumah_Sakit_Umum_Daerah_Dr._Saiful_Anwar.webp" 
             alt="RSUD Logo" 
             class="header-logo"
-          />
+          >
         </div>
         <div class="header-text">
           <h1 class="hospital-name">RSUD dr. Saiful Anwar Provinsi Jawa Timur</h1>
@@ -48,10 +48,11 @@
             class="queue-display" 
             :class="{ 'has-scroll': loketData.queues.length > 20 }"
           >
-            <div class="ticket-cards-list" :style="ticketGridStyle">
+            <!-- Ticket Cards List -->
+            <div v-if="loketData.queues.length > 0" class="ticket-cards-list" :style="ticketGridStyle">
               <div
-                v-for="queue in loketData.queues"
-                :key="queue.no"
+                v-for="(queue, index) in loketData.queues"
+                :key="`${loketData.id}-${queue.no}-${queue.barcode || index}`"
                 class="ticket-card"
                 :class="{ 'ticket-card-fast-track': queue.fastTrack === 'YA' }"
               >
@@ -59,14 +60,14 @@
                 <div v-if="queue.fastTrack === 'YA'" class="ticket-fast-track">
                   <v-icon color="white" size="14">mdi-flash</v-icon>
                 </div>
-                <div class="ticket-number">{{ queue.noAntrian.split(" |")[0] }}</div>
+                <div class="ticket-number">{{ queue.noAntrian?.split(" |")[0] || queue.no || '' }}</div>
                 <!-- <div v-if="queue.klinik" class="ticket-klinik">{{ queue.klinik }}</div> -->
               </div>
             </div>
 
             <!-- Empty State -->
             <div
-              v-if="loketData.queues.length === 0"
+              v-else
               class="empty-queue"
             >
               <v-icon size="40" color="grey-lighten-3">mdi-minus-circle-outline</v-icon>
@@ -89,7 +90,7 @@
         </div>
       </div>
 
-      <div class="stat-divider"></div>
+      <div class="stat-divider" />
 
       <div class="stat-item">
         <div class="stat-icon stat-icon-waiting">
@@ -101,7 +102,7 @@
         </div>
       </div>
 
-      <div class="stat-divider"></div>
+      <div class="stat-divider" />
 
       <div class="stat-item">
         <div class="stat-icon stat-icon-active">
@@ -175,14 +176,22 @@ const setQueueDisplayRef = (loketId, el) => {
 }
 
 // Get all patients with processStage 'loket'
+// Force reactivity by accessing the computed result directly
 const loketPatients = computed(() => {
   try {
-    const result = queueStore.getPatientsByStage('loket')
-    if (result && result.value && Array.isArray(result.value.all)) {
-      return result.value.all
+    // Get the computed result from store
+    const stageResult = queueStore.getPatientsByStage('loket')
+    
+    // Access .value to get the actual computed value
+    // This ensures reactivity after store hydration
+    if (stageResult && stageResult.value) {
+      const patients = stageResult.value.all || []
+      // Ensure it's an array and filter out any null/undefined
+      return Array.isArray(patients) ? patients.filter(p => p != null) : []
     }
     return []
-  } catch {
+  } catch (error) {
+    console.error('Error getting loket patients:', error)
     return []
   }
 })
@@ -428,6 +437,30 @@ const startAutoScroll = () => {
   })
 }
 
+// Watch loketPatients to ensure reactivity after refresh
+watch(loketPatients, (newPatients) => {
+  // Force update by accessing the computed
+  // This ensures reactivity after store hydration
+  if (newPatients && newPatients.length > 0) {
+    console.log('Loket patients updated:', newPatients.length)
+  }
+}, { immediate: true, deep: true })
+
+// Watch store's getPatientsByStage to ensure reactivity after refresh
+watch(() => {
+  try {
+    const result = queueStore.getPatientsByStage('loket')
+    return result?.value?.all || []
+  } catch {
+    return []
+  }
+}, (newPatients) => {
+  // Force reactivity update
+  if (newPatients && newPatients.length > 0) {
+    console.log('Store loket patients updated:', newPatients.length)
+  }
+}, { immediate: true, deep: true })
+
 // Watch displayedLokets untuk restart auto-scroll
 watch(displayedLokets, () => {
   startAutoScroll()
@@ -443,6 +476,25 @@ onMounted(() => {
       return
     }
     
+    // Force reactivity by accessing store data after delays
+    // This ensures store is fully hydrated after refresh
+    setTimeout(() => {
+      // Access loketPatients to trigger computed
+      const _ = loketPatients.value
+      // Access calledForCheckIn to trigger computed
+      const __ = calledForCheckIn.value
+      // Access displayedLokets to trigger computed
+      const ___ = displayedLokets.value
+    }, 100)
+    
+    // Additional delay to ensure store hydration is complete
+    setTimeout(() => {
+      // Force re-computation by accessing again
+      const _ = loketPatients.value
+      const __ = calledForCheckIn.value
+      const ___ = displayedLokets.value
+    }, 300)
+    
     updateTime()
     timeInterval = setInterval(updateTime, 1000)
     
@@ -736,7 +788,7 @@ onUnmounted(() => {
 .ticket-number {
   font-size: 28px;
   font-weight: 800;
-  color: #FF8441;
+  color: #3556AE;
   letter-spacing: 1px;
   line-height: 1.2;
 }
@@ -1057,7 +1109,7 @@ onUnmounted(() => {
   
   .ticket-number {
     font-size: 20px;
-    color: #E65A0D;
+    color: #3556AE;
   }
   
   .ticket-card {
@@ -1103,7 +1155,7 @@ onUnmounted(() => {
 
   .ticket-number {
     font-size: 20px;
-    color: #E65A0D;
+    color: #3556AE;
   }
 }