perbaikan bug tampilan loket

components/features/queue/PatientCard.vue

@@ -1,22 +1,21 @@
 <template>
-  <v-tooltip 
-    :text="isClickable ? 'Klik untuk proses pasien' : ''" 
-    location="top"
-    :disabled="!isClickable"
+  <v-card 
+    class="patient-card" 
+    elevation="2"
+    :class="{ 
+      'clickable-card': isClickable,
+      'fast-track-card': isFastTrack && !isCurrentlyProcessing,
+      'processing-card': isCurrentlyProcessing || patient.status === 'diproses'
+    }"
+    @click="handleCardClick"
   >
-    <template #activator="{ props: tooltipProps }">
-      <v-card 
-        class="patient-card" 
-        elevation="2"
-        :class="{ 
-          'clickable-card': isClickable,
-          'fast-track-card': isFastTrack && !isCurrentlyProcessing,
-          'processing-card': isCurrentlyProcessing || patient.status === 'diproses'
-        }"
-        @click="handleCardClick"
-        v-bind="isClickable ? tooltipProps : {}"
-      >
-        <v-card-text class="pa-4">
+    <v-tooltip 
+      activator="parent"
+      :text="isClickable ? 'Klik untuk proses pasien' : ''" 
+      location="top"
+      :disabled="!isClickable"
+    />
+    <v-card-text class="pa-4">
           <!-- Header: Queue Number, Status & Fast Track Badge -->
           <div class="card-header">
             <div class="header-left">
@@ -86,9 +85,7 @@
             </v-btn>
           </div>
         </v-card-text>
-      </v-card>
-    </template>
-  </v-tooltip>
+  </v-card>
 </template>
 
 <script setup>

components/features/queue/TabelPatientData.vue

@@ -116,25 +116,27 @@
         </div>
       </div>
 
-      <!-- Results Info -->
-      <div v-if="filteredAndSearchedItems.length > 0" class="results-info mb-3">
-        <span class="results-text">
-          Menampilkan {{ paginatedItems.length }} dari {{ filteredAndSearchedItems.length }} pasien
-        </span>
-      </div>
+      <div v-if="filteredAndSearchedItems.length > 0" key="patient-list-wrapper" class="patient-list-wrapper">
+        <!-- Results Info -->
+        <div class="results-info mb-3">
+          <span class="results-text">
+            Menampilkan {{ paginatedItems.length }} dari {{ filteredAndSearchedItems.length }} pasien
+          </span>
+        </div>
 
-      <!-- Patient Cards Grid -->
-      <div v-if="filteredAndSearchedItems.length > 0" class="patient-grid">
-        <PatientCard
-          v-for="(patient, index) in paginatedItems"
-          :key="`${patient.barcode}-${index}`"
-          :patient="patient"
-          @action="handleAction"
-        />
+        <!-- Patient Cards Grid -->
+        <div class="patient-grid">
+          <PatientCard
+            v-for="(patient, index) in paginatedItems"
+            :key="`${patient.barcode}-${index}`"
+            :patient="patient"
+            @action="handleAction"
+          />
+        </div>
       </div>
 
       <!-- Empty State -->
-      <div v-else class="empty-state">
+      <div v-else class="empty-state" key="patient-empty-state">
         <v-icon size="64" color="neutral-500">mdi-account-search</v-icon>
         <div class="empty-text mt-3">
           {{ searchModel || hasActiveFilters ? 'Tidak ada pasien yang sesuai' : 'Tidak ada data pasien' }}