update logika dan flow anjungan, master, store

components/features/queue/PatientCard.vue

@@ -1,106 +1,83 @@
 <template>
-  <v-card class="patient-card" elevation="0">
-    <v-card-text class="pa-4">
-      <!-- Header: Queue Number & Status -->
-      <div class="card-header">
-        <div class="queue-number">{{ patient.noAntrian.split(" |")[0] }}</div>
-        <v-chip
-          :color="getStatusColor(patient.status)"
-          size="small"
-          class="status-chip"
-        >
-          {{ getStatusLabel(patient.status) }}
-        </v-chip>
-      </div>
+  <v-tooltip 
+    :text="isClickable ? 'Klik untuk proses pasien' : ''" 
+    location="top"
+    :disabled="!isClickable"
+  >
+    <template #activator="{ props: tooltipProps }">
+      <v-card 
+        class="patient-card" 
+        elevation="2"
+        :class="{ 'clickable-card': isClickable }"
+        @click="handleCardClick"
+        v-bind="isClickable ? tooltipProps : {}"
+      >
+        <v-card-text class="pa-4">
+          <!-- Header: Queue Number, Status & Fast Track Badge -->
+          <div class="card-header">
+            <div class="header-left">
+              <div class="queue-number">{{ patient.noAntrian.split(" |")[0] }}</div>
+              <v-icon 
+                v-if="patient.fastTrack === 'YA'"
+                color="warning"
+                size="20"
+                class="fast-track-icon"
+              >
+                mdi-flash
+              </v-icon>
+            </div>
+            <v-chip
+              :color="getStatusColor(patient.status)"
+              size="small"
+              class="status-chip"
+            >
+              {{ getStatusLabel(patient.status) }}
+            </v-chip>
+          </div>
 
-      <!-- Patient Info Grid -->
-      <div class="patient-info mt-3">
-        <div class="info-row">
-          <span class="info-label">Barcode:</span>
-          <span class="info-value">{{ patient.barcode }}</span>
-        </div>
-        
-        <div class="info-row">
-          <span class="info-label">Jam Panggil:</span>
-          <span class="info-value">{{ patient.jamPanggil }}</span>
-        </div>
+          <!-- Patient Info Grid - Simplified -->
+          <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 class="info-row">
+              <span class="info-label">Klinik:</span>
+              <v-chip size="small" variant="outlined" class="klinik-chip">
+                {{ patient.klinik }}
+              </v-chip>
+            </div>
 
-        <div class="info-row">
-          <span class="info-label">Fast Track:</span>
-          <span class="info-value">{{ patient.fastTrack }}</span>
-        </div>
+            <div class="info-row">
+              <span class="info-label">Pembayaran:</span>
+              <span class="info-value">{{ patient.pembayaran }}</span>
+            </div>
+          </div>
 
-        <div class="info-row">
-          <span class="info-label">Pembayaran:</span>
-          <span class="info-value">{{ patient.pembayaran }}</span>
-        </div>
-      </div>
-
-      <!-- Action Button -->
-      <div class="card-actions mt-4">
-        <v-btn
-          v-if="patient.status === 'diloket'"
-          block
-          color="primary-600"
-          variant="flat"
-          @click="$emit('action', patient, 'proses')"
-        >
-          <v-icon start size="18">mdi-account-check</v-icon>
-          Proses
-        </v-btn>
-        <v-btn
-          v-else-if="patient.status === 'terlambat'"
-          block
-          color="success-600"
-          variant="flat"
-          class="text-white"
-          @click="$emit('action', patient, 'aktifkan')"
-        >
-          <v-icon start size="18">mdi-check-circle</v-icon>
-          Aktifkan
-        </v-btn>
-        <v-btn
-          v-else-if="patient.status === 'pending'"
-          block
-          color="success-600"
-          class="text-white"
-          variant="flat"
-          @click="$emit('action', patient, 'proses')"
-        >
-          <v-icon start size="18">mdi-play-circle</v-icon>
-          Proses
-        </v-btn>
-      </div>
-    </v-card-text>
-
-    <!-- Card Menu (Optional) -->
-    <v-menu location="bottom end">
-      <template #activator="{ props }">
-        <v-btn
-          icon="mdi-dots-vertical"
-          variant="text"
-          size="small"
-          class="card-menu-btn"
-          v-bind="props"
-        />
-      </template>
-      <v-list density="compact">
-        <v-list-item @click="$emit('view-details', patient)">
-          <v-list-item-title>Lihat Detail</v-list-item-title>
-        </v-list-item>
-      </v-list>
-    </v-menu>
-  </v-card>
+          <!-- Action Button for non-clickable states -->
+          <div v-if="!isClickable && patient.status === 'terlambat'" class="card-actions mt-3">
+            <v-btn
+              block
+              color="success-600"
+              variant="flat"
+              size="small"
+              class="text-white"
+              @click.stop="$emit('action', patient, 'aktifkan')"
+            >
+              <v-icon start size="18">mdi-check-circle</v-icon>
+              Aktifkan
+            </v-btn>
+          </div>
+        </v-card-text>
+      </v-card>
+    </template>
+  </v-tooltip>
 </template>
 
 <script setup>
+import { computed } from 'vue';
+
 const props = defineProps({
   patient: {
     type: Object,
@@ -108,7 +85,17 @@ const props = defineProps({
   }
 });
 
-defineEmits(['action', 'view-details']);
+const emit = defineEmits(['action']);
+
+const isClickable = computed(() => {
+  return props.patient.status === 'diloket' || props.patient.status === 'pending';
+});
+
+const handleCardClick = () => {
+  if (isClickable.value) {
+    emit('action', props.patient, 'proses');
+  }
+};
 
 const getStatusColor = (status) => {
   const colors = {
@@ -137,11 +124,25 @@ const getStatusLabel = (status) => {
   background: var(--color-neutral-100);
   transition: all 0.2s ease;
   height: 100%;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
 
   &:hover {
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
     transform: translateY(-2px);
   }
+
+  &.clickable-card {
+    cursor: pointer;
+
+    &:hover {
+      border-color: var(--color-primary-600);
+      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
+    }
+
+    &:active {
+      transform: translateY(0);
+    }
+  }
 }
 
 .card-header {
@@ -149,7 +150,13 @@ const getStatusLabel = (status) => {
   justify-content: space-between;
   align-items: center;
   padding-bottom: 12px;
-  border-bottom: 1px solid var(--color-neutral-400);
+  border-bottom: 2px solid var(--color-neutral-400);
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
 
 .queue-number {
@@ -158,9 +165,23 @@ const getStatusLabel = (status) => {
   color: var(--color-neutral-900);
 }
 
+.fast-track-icon {
+  animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.6;
+  }
+}
+
 .status-chip {
   font-weight: 600;
   font-size: 11px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
 }
 
 .patient-info {
@@ -174,12 +195,26 @@ const getStatusLabel = (status) => {
   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: 100px;
+  min-width: 90px;
 }
 
 .info-value {
@@ -191,24 +226,14 @@ const getStatusLabel = (status) => {
 .klinik-chip {
   font-size: 11px;
   font-weight: 600;
+  border: 1.5px solid currentColor;
 }
 
 .card-actions .v-btn {
   text-transform: none;
   font-weight: 600;
   font-size: 13px;
-  height: 40px;
-}
-
-.card-menu-btn {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  opacity: 0;
-  transition: opacity 0.2s ease;
-}
-
-.patient-card:hover .card-menu-btn {
-  opacity: 1;
+  height: 36px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 </style>

components/features/queue/TabelPatientData.vue

@@ -6,6 +6,7 @@
         <div class="section-label">DATA PASIEN</div>
         
         <div class="filters">
+          <!-- Status Filter -->
           <v-chip-group v-model="selectedStatusModel" mandatory class="status-filter">
             <v-chip 
               v-for="status in statusOptions" 
@@ -17,6 +18,7 @@
             </v-chip>
           </v-chip-group>
 
+          <!-- Search Field -->
           <v-text-field
             v-model="searchModel"
             placeholder="Cari barcode, nomor antrian..."
@@ -26,6 +28,123 @@
             prepend-inner-icon="mdi-magnify"
           />
         </div>
+
+        <!-- Advanced Filters -->
+        <div class="advanced-filters mt-3">
+          <v-select
+            v-model="selectedKlinik"
+            :items="klinikOptions"
+            label="Filter Klinik"
+            density="compact"
+            hide-details
+            clearable
+            class="filter-select"
+            variant="outlined"
+          >
+            <template #prepend-inner>
+              <v-icon size="20">mdi-hospital-building</v-icon>
+            </template>
+          </v-select>
+
+          <v-select
+            v-model="selectedPembayaran"
+            :items="pembayaranOptions"
+            label="Filter Pembayaran"
+            density="compact"
+            hide-details
+            clearable
+            class="filter-select"
+            variant="outlined"
+          >
+            <template #prepend-inner>
+              <v-icon size="20">mdi-cash</v-icon>
+            </template>
+          </v-select>
+
+          <v-select
+            v-model="selectedShift"
+            :items="shiftOptions"
+            label="Filter Shift"
+            density="compact"
+            hide-details
+            clearable
+            class="filter-select"
+            variant="outlined"
+          >
+            <template #prepend-inner>
+              <v-icon size="20">mdi-clock-outline</v-icon>
+            </template>
+          </v-select>
+
+          <v-select
+            v-model="selectedFastTrack"
+            :items="fastTrackOptions"
+            label="Filter Fast Track"
+            density="compact"
+            hide-details
+            clearable
+            class="filter-select"
+            variant="outlined"
+          >
+            <template #prepend-inner>
+              <v-icon size="20">mdi-flash</v-icon>
+            </template>
+          </v-select>
+
+          <v-btn
+            v-if="hasActiveFilters"
+            variant="text"
+            color="primary-600"
+            size="small"
+            @click="clearAllFilters"
+          >
+            <v-icon start size="18">mdi-filter-off</v-icon>
+            Reset Filter
+          </v-btn>
+        </div>
+
+        <!-- Active Filter Tags -->
+        <div v-if="hasActiveFilters" class="active-filters mt-2">
+          <v-chip
+            v-if="selectedKlinik"
+            size="small"
+            closable
+            @click:close="selectedKlinik = null"
+          >
+            Klinik: {{ selectedKlinik }}
+          </v-chip>
+          <v-chip
+            v-if="selectedPembayaran"
+            size="small"
+            closable
+            @click:close="selectedPembayaran = null"
+          >
+            Pembayaran: {{ selectedPembayaran }}
+          </v-chip>
+          <v-chip
+            v-if="selectedShift"
+            size="small"
+            closable
+            @click:close="selectedShift = null"
+          >
+            {{ selectedShift }}
+          </v-chip>
+          <v-chip
+            v-if="selectedFastTrack"
+            size="small"
+            closable
+            @click:close="selectedFastTrack = null"
+          >
+            Fast Track: {{ selectedFastTrack }}
+          </v-chip>
+        </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>
 
       <!-- Patient Cards Grid -->
@@ -41,8 +160,12 @@
       <!-- Empty State -->
       <div v-else class="empty-state">
         <v-icon size="64" color="neutral-500">mdi-account-search</v-icon>
-        <div class="empty-text mt-3">Tidak ada data pasien</div>
-        <div class="empty-subtext">Data akan muncul ketika ada pasien yang terdaftar</div>
+        <div class="empty-text mt-3">
+          {{ searchModel || hasActiveFilters ? 'Tidak ada pasien yang sesuai' : 'Tidak ada data pasien' }}
+        </div>
+        <div class="empty-subtext">
+          {{ searchModel || hasActiveFilters ? 'Coba ubah filter atau kata kunci pencarian' : 'Data akan muncul ketika ada pasien yang terdaftar' }}
+        </div>
       </div>
 
       <!-- Pagination -->
@@ -105,11 +228,15 @@ const props = defineProps({
 const emit = defineEmits(['update:selectedStatus', 'update:searchQuery', 'action']);
 
 const currentPage = ref(1);
+const selectedKlinik = ref(null);
+const selectedPembayaran = ref(null);
+const selectedShift = ref(null);
+const selectedFastTrack = ref(null);
 
 const selectedStatusModel = computed({
   get: () => props.selectedStatus,
   set: (value) => {
-    currentPage.value = 1; // Reset to first page on filter change
+    currentPage.value = 1;
     emit('update:selectedStatus', value);
   }
 });
@@ -117,7 +244,7 @@ const selectedStatusModel = computed({
 const searchModel = computed({
   get: () => props.searchQuery,
   set: (value) => {
-    currentPage.value = 1; // Reset to first page on search
+    currentPage.value = 1;
     emit('update:searchQuery', value);
   }
 });
@@ -129,20 +256,76 @@ const statusOptions = computed(() => [
   { value: 'pending', label: props.statusLabels.pending, count: props.pendingCount }
 ]);
 
+// Generate filter options from items
+const klinikOptions = computed(() => {
+  const kliniks = [...new Set(props.items.map(p => p.klinik))];
+  return kliniks.sort();
+});
+
+const pembayaranOptions = computed(() => {
+  const pembayaran = [...new Set(props.items.map(p => p.pembayaran))];
+  return pembayaran.sort();
+});
+
+const shiftOptions = computed(() => {
+  const shifts = [...new Set(props.items.map(p => p.shift))];
+  return shifts.sort();
+});
+
+const fastTrackOptions = computed(() => {
+  const normalizedValues = props.items
+    .map((p) => (p.fastTrack ?? "").toString().trim().toUpperCase())
+    .filter((v) => v.length > 0);
+
+  const uniqueTracks = [...new Set(normalizedValues)];
+  return uniqueTracks.sort();
+});
+
+const hasActiveFilters = computed(() => {
+  return !!(selectedKlinik.value || selectedPembayaran.value || selectedShift.value || selectedFastTrack.value);
+});
+
+const clearAllFilters = () => {
+  selectedKlinik.value = null;
+  selectedPembayaran.value = null;
+  selectedShift.value = null;
+  selectedFastTrack.value = null;
+  currentPage.value = 1;
+};
+
 const filteredItems = computed(() => {
   if (selectedStatusModel.value === 'all') return props.items;
   return props.items.filter(p => p.status === selectedStatusModel.value);
 });
 
 const filteredAndSearchedItems = computed(() => {
-  if (!searchModel.value) return filteredItems.value;
-  
-  const searchLower = searchModel.value.toLowerCase();
-  return filteredItems.value.filter(patient => 
-    patient.barcode?.toLowerCase().includes(searchLower) ||
-    patient.noAntrian?.toLowerCase().includes(searchLower) ||
-    patient.klinik?.toLowerCase().includes(searchLower)
-  );
+  let result = filteredItems.value;
+
+  // Apply attribute filters
+  if (selectedKlinik.value) {
+    result = result.filter(p => p.klinik === selectedKlinik.value);
+  }
+  if (selectedPembayaran.value) {
+    result = result.filter(p => p.pembayaran === selectedPembayaran.value);
+  }
+  if (selectedShift.value) {
+    result = result.filter(p => p.shift === selectedShift.value);
+  }
+  if (selectedFastTrack.value) {
+    result = result.filter(p => p.fastTrack === selectedFastTrack.value);
+  }
+
+  // Apply search
+  if (searchModel.value) {
+    const searchLower = searchModel.value.toLowerCase();
+    result = result.filter(patient => 
+      patient.barcode?.toLowerCase().includes(searchLower) ||
+      patient.noAntrian?.toLowerCase().includes(searchLower) ||
+      patient.klinik?.toLowerCase().includes(searchLower)
+    );
+  }
+
+  return result;
 });
 
 const totalPages = computed(() => 
@@ -190,6 +373,7 @@ const handleAction = (patient, action) => {
 
 .status-filter {
   flex: 1;
+  min-width: 300px;
 }
 
 .status-filter .v-chip {
@@ -214,11 +398,43 @@ const handleAction = (patient, action) => {
 
 .search-field {
   max-width: 300px;
+  min-width: 250px;
+}
+
+.advanced-filters {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.filter-select {
+  min-width: 180px;
+  max-width: 220px;
+}
+
+.active-filters {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.results-info {
+  padding: 8px 12px;
+  background: var(--color-neutral-200);
+  border-radius: 8px;
+  border-left: 3px solid var(--color-primary-600);
+}
+
+.results-text {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--color-neutral-700);
 }
 
 .patient-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   gap: 16px;
 }
 
@@ -260,8 +476,22 @@ const handleAction = (patient, action) => {
     align-items: stretch;
   }
 
+  .status-filter {
+    min-width: 100%;
+  }
+
   .search-field {
     max-width: 100%;
+    min-width: 100%;
+  }
+
+  .advanced-filters {
+    flex-direction: column;
+  }
+
+  .filter-select {
+    width: 100%;
+    max-width: 100%;
   }
 
   .patient-grid {
@@ -278,7 +508,7 @@ const handleAction = (patient, action) => {
 
 @media (min-width: 1265px) {
   .patient-grid {
-    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
   }
 }
 </style>