From f622052c671b7b5bb1338e000409f13c2c4b1990 Mon Sep 17 00:00:00 2001
From: Fanrouver <akbararya34@gmail.com>
Date: Wed, 20 May 2026 13:55:15 +0700
Subject: [PATCH] perbaikan bug tampilan loket

---
 components/features/queue/PatientCard.vue     | 37 +++++++++----------
 .../features/queue/TabelPatientData.vue       | 32 ++++++++--------
 pages/AdminKlinik.vue                         | 28 +++++++-------
 pages/AdminLoket/[id].vue                     | 30 ++++++++-------
 stores/navItems1.ts                           |  4 +-
 5 files changed, 67 insertions(+), 64 deletions(-)

diff --git a/components/features/queue/PatientCard.vue b/components/features/queue/PatientCard.vue
index 5ff70ad..d473e2a 100644
--- a/components/features/queue/PatientCard.vue
+++ b/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>
diff --git a/components/features/queue/TabelPatientData.vue b/components/features/queue/TabelPatientData.vue
index 045e2e5..e7162c9 100644
--- a/components/features/queue/TabelPatientData.vue
+++ b/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' }}
diff --git a/pages/AdminKlinik.vue b/pages/AdminKlinik.vue
index f9ecfda..9cc65a8 100644
--- a/pages/AdminKlinik.vue
+++ b/pages/AdminKlinik.vue
@@ -91,19 +91,21 @@
               </div>
             </div>
 
-            <PatientDataTable
-              :items="allPatients"
-              v-model:selected-status="selectedStatus"
-              v-model:search-query="searchQuery"
-              v-model:selected-fast-track="selectedFastTrack"
-              :di-loket-count="(diLoketPatients || []).length"
-              :terlambat-count="(terlambatPatients || []).length"
-              :pending-count="(pendingPatients || []).length"
-              :status-labels="statusLabels"
-              :show-diproses="false"
-              :fast-track-options="fastTrackOptions"
-              @action="handleTableAction"
-            />
+            <ClientOnly>
+              <PatientDataTable
+                :items="allPatients"
+                v-model:selected-status="selectedStatus"
+                v-model:search-query="searchQuery"
+                v-model:selected-fast-track="selectedFastTrack"
+                :di-loket-count="(diLoketPatients || []).length"
+                :terlambat-count="(terlambatPatients || []).length"
+                :pending-count="(pendingPatients || []).length"
+                :status-labels="statusLabels"
+                :show-diproses="false"
+                :fast-track-options="fastTrackOptions"
+                @action="handleTableAction"
+              />
+            </ClientOnly>
           </v-card-text>
         </v-card>
       </v-col>
diff --git a/pages/AdminLoket/[id].vue b/pages/AdminLoket/[id].vue
index 600d01b..08edc6d 100644
--- a/pages/AdminLoket/[id].vue
+++ b/pages/AdminLoket/[id].vue
@@ -77,20 +77,22 @@
                 </div>
               </div>
 
-              <PatientDataTable
-                :items="allPatientsForStage"
-                v-model:selected-status="selectedStatus"
-                v-model:search-query="searchQuery"
-                v-model:selected-fast-track="selectedFastTrack"
-                :di-loket-count="filteredDiLoketCount"
-                :diproses-count="currentProcessingPatient ? 1 : 0"
-                :anjungan-count="filteredAnjunganCount"
-                :terlambat-count="filteredTerlambatCount"
-                :pending-count="filteredPendingCount"
-                :show-diproses="false"
-                :fast-track-options="fastTrackOptions"
-                @action="handleTableAction"
-              />
+              <ClientOnly>
+                <PatientDataTable
+                  :items="allPatientsForStage"
+                  v-model:selected-status="selectedStatus"
+                  v-model:search-query="searchQuery"
+                  v-model:selected-fast-track="selectedFastTrack"
+                  :di-loket-count="filteredDiLoketCount"
+                  :diproses-count="currentProcessingPatient ? 1 : 0"
+                  :anjungan-count="filteredAnjunganCount"
+                  :terlambat-count="filteredTerlambatCount"
+                  :pending-count="filteredPendingCount"
+                  :show-diproses="false"
+                  :fast-track-options="fastTrackOptions"
+                  @action="handleTableAction"
+                />
+              </ClientOnly>
             </v-card-text>
           </v-card>
         </v-col>
diff --git a/stores/navItems1.ts b/stores/navItems1.ts
index 40aa629..148e2c6 100644
--- a/stores/navItems1.ts
+++ b/stores/navItems1.ts
@@ -35,8 +35,8 @@ const defaultNavItems: NavItem[] = [
     icon: "mdi-monitor-multiple",
     path: "",
     children: [
-      { id: 10, name: "Anjungan", path: "/Anjungan/Anjungan", icon: "mdi-circle-small" },
-      { id: 11, name: "Anjungan Eksekutif", path: "/anjungan/anjungancopy", icon: "mdi-circle-small" },
+      // { id: 10, name: "Anjungan", path: "/Anjungan/Anjungan", icon: "mdi-circle-small" },
+      { id: 11, name: "Anjungan", path: "/anjungan/anjungancopy", icon: "mdi-circle-small" },
       // { id: 11, name: "Klinik", path: "/Anjungan/AntrianKlinik", icon: "mdi-circle-small" },
       { id: 12, name: "Klinik Ruang", path: "/Anjungan/AntrianKlinikRuang", icon: "mdi-circle-small"},
       // { id: 13, name: "Penunjang", path: "/Anjungan/AntrianPenunjang", icon: "mdi-circle-small"},