update admin loket dan tampilan status fast track

components/features/queue/PatientCard.vue

@@ -20,14 +20,18 @@
           <div class="card-header">
             <div class="header-left">
               <div class="queue-number">{{ patient.noAntrian.split(" |")[0] }}</div>
-              <v-icon 
+              <div 
                 v-if="isFastTrack"
-                color="warning"
-                size="20"
-                class="fast-track-icon"
+                class="fast-track-icon-wrapper"
               >
-                mdi-flash
-              </v-icon>
+                <v-icon 
+                  color="#E53935"
+                  size="14"
+                  class="fast-track-icon"
+                >
+                  mdi-flash
+                </v-icon>
+              </div>
             </div>
             <v-chip
               :color="getStatusColor(patient.status)"
@@ -38,39 +42,31 @@
             </v-chip>
           </div>
 
-          <!-- Patient Info Grid - Simplified -->
+          <!-- Patient Info - Compact Single Row -->
           <div class="patient-info mt-3">
-            <div class="info-row">
-              <span class="info-label">Jam Panggil:</span>
-              <span class="info-value">{{ patient.jamPanggil }}</span>
-            </div>
-
-            <div class="info-row">
-              <span class="info-label">Klinik:</span>
-              <v-chip size="small" variant="outlined" class="klinik-chip">
-                {{ patient.klinik }}
-              </v-chip>
-            </div>
-
-            <div v-if="patient.tipeLayanan" class="info-row">
-              <span class="info-label">Tipe Layanan:</span>
+            <div class="info-chips-row">
               <v-chip 
                 size="small" 
-                :color="patient.tipeLayanan === 'Pemeriksaan Awal' ? 'primary' : 'secondary'"
-                class="text-white"
+                variant="outlined" 
+                class="klinik-chip"
               >
-                {{ patient.tipeLayanan }}
+                {{ patient.klinik }}
+              </v-chip>
+              <!-- Tipe Layanan atau Jenis Pasien -->
+              <v-chip 
+                v-if="displayJenisPasien"
+                size="small" 
+                :color="getJenisPasienColor(displayJenisPasien)"
+                :variant="getJenisPasienVariant(displayJenisPasien)"
+                :class="getJenisPasienClass(displayJenisPasien)"
+              >
+                {{ displayJenisPasien }}
               </v-chip>
             </div>
-
-            <div v-if="patient.ruang" class="info-row">
-              <span class="info-label">Ruang:</span>
-              <span class="info-value">{{ patient.ruang }}</span>
-            </div>
-
-            <div class="info-row">
-              <span class="info-label">Pembayaran:</span>
-              <span class="info-value">{{ patient.pembayaran }}</span>
+            <!-- Nama Dokter untuk Pasien Eksekutif -->
+            <div v-if="isEksekutif && patient.namaDokter" class="doctor-info mt-2">
+              <v-icon size="16" color="primary" class="doctor-icon">mdi-doctor</v-icon>
+              <span class="doctor-name">{{ patient.namaDokter }}</span>
             </div>
           </div>
 
@@ -115,6 +111,53 @@ const isFastTrack = computed(() => {
   return fastTrack === 'YA';
 });
 
+const isEksekutif = computed(() => {
+  const pembayaran = (props.patient.pembayaran ?? "").toString().trim().toUpperCase();
+  return pembayaran === 'EKSEKUTIF';
+});
+
+// Computed untuk menentukan jenis pasien yang ditampilkan
+const displayJenisPasien = computed(() => {
+  // Prioritas 1: Tipe Layanan jika ada
+  if (props.patient.tipeLayanan) {
+    return props.patient.tipeLayanan;
+  }
+  // Prioritas 2: Eksekutif jika pasien eksekutif
+  if (isEksekutif.value) {
+    return 'Eksekutif';
+  }
+  // Prioritas 3: Tampilkan pembayaran sebagai fallback
+  if (props.patient.pembayaran) {
+    return props.patient.pembayaran;
+  }
+  return null;
+});
+
+// Fungsi untuk menentukan color chip berdasarkan jenis pasien
+const getJenisPasienColor = (jenis) => {
+  if (jenis === 'Pemeriksaan Awal') return 'primary';
+  if (jenis === 'Tindakan') return 'secondary';
+  if (jenis === 'Eksekutif') return 'warning';
+  if (jenis === 'Fast Track') return 'warning';
+  // Untuk pembayaran biasa (BPJS, UMUM), gunakan neutral-600 untuk kontras
+  return 'success-500';
+};
+
+// Fungsi untuk menentukan variant chip berdasarkan jenis pasien
+const getJenisPasienVariant = (jenis) => {
+  // Semua jenis pasien menggunakan flat (filled) untuk kontras dengan klinik (outlined)
+  return 'flat';
+};
+
+// Fungsi untuk menentukan class chip berdasarkan jenis pasien
+const getJenisPasienClass = (jenis) => {
+  if (jenis === 'Pemeriksaan Awal' || jenis === 'Tindakan' || jenis === 'Eksekutif' || jenis === 'Fast Track') {
+    return 'text-white layanan-chip';
+  }
+  // Untuk pembayaran biasa (BPJS, UMUM), gunakan text putih untuk kontras dengan background
+  return 'text-white layanan-chip';
+};
+
 const handleCardClick = () => {
   if (isClickable.value) {
     emit('action', props.patient, 'proses');
@@ -171,12 +214,12 @@ const getStatusLabel = (status) => {
   }
 
   &.fast-track-card {
-    background: rgba(255, 230, 198, 0.35) !important;
-    border-color: rgba(255, 185, 95, 0.4);
+    background: #FBE9E8 !important;
+    border-color: rgba(255, 132, 65, 0.5);
 
     &:hover {
-      background: rgba(255, 230, 198, 0.45) !important;
-      border-color: rgba(255, 185, 95, 0.5);
+      background: #F1B3AE !important;
+      border-color: rgba(255, 132, 65, 0.6);
     }
   }
 }
@@ -201,17 +244,24 @@ const getStatusLabel = (status) => {
   color: var(--color-neutral-900);
 }
 
-.fast-track-icon {
-  animation: pulse 2s ease-in-out infinite;
+.fast-track-icon-wrapper {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(239, 83, 80, 0.15);
+  border: 2px solid rgba(229, 57, 53, 0.4);
+  transition: all 0.2s ease;
+  flex-shrink: 0;
+  box-shadow: 0 2px 8px rgba(229, 57, 53, 0.2);
 }
 
-@keyframes pulse {
-  0%, 100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.6;
-  }
+
+.fast-track-icon-wrapper .fast-track-icon {
+  color: #E53935 !important;
+  transition: all 0.2s ease;
 }
 
 .status-chip {
@@ -223,46 +273,45 @@ const getStatusLabel = (status) => {
 .patient-info {
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  /* Tinggi dinamis berdasarkan konten - card tanpa dokter akan lebih compact */
 }
 
-.info-row {
+.info-chips-row {
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  font-size: 13px;
   gap: 8px;
-}
-
-.payment-info {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.fast-track-badge {
-  font-size: 10px;
-  font-weight: 700;
-  height: 20px;
-  padding: 0 6px;
-}
-
-.info-label {
-  color: var(--color-neutral-600);
-  font-weight: 500;
-  min-width: 90px;
-}
-
-.info-value {
-  color: var(--color-neutral-900);
-  font-weight: 600;
-  text-align: right;
+  flex-wrap: wrap;
 }
 
 .klinik-chip {
   font-size: 11px;
   font-weight: 600;
-  border: 1.5px solid currentColor;
+  height: 24px;
+  border-color: var(--color-neutral-600) !important;
+  color: var(--color-neutral-900) !important;
+  background-color: transparent !important;
+}
+
+.layanan-chip {
+  font-size: 11px;
+  font-weight: 600;
+  height: 24px;
+}
+
+.doctor-info {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.doctor-icon {
+  flex-shrink: 0;
+}
+
+.doctor-name {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--color-primary-600);
 }
 
 .card-actions .v-btn {