update tampilan dan flow di loket dan master

components/features/queue/PatientCard.vue

@@ -55,7 +55,7 @@
             </div>
           </div>
 
-          <!-- Action Button for non-clickable states -->
+          
           <div v-if="!isClickable && patient.status === 'terlambat'" class="card-actions mt-3">
             <v-btn
               block

components/features/queue/TabelPatientData.vue

@@ -14,6 +14,7 @@
               :value="status.value" 
               :class="{ 'active-chip': selectedStatusModel === status.value }"
             >
+              <v-icon v-if="status.icon" start size="16">{{ status.icon }}</v-icon>
               {{ status.label }} ({{ status.count }})
             </v-chip>
           </v-chip-group>
@@ -76,21 +77,6 @@
             </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"
@@ -130,12 +116,12 @@
             {{ selectedShift }}
           </v-chip>
           <v-chip
-            v-if="selectedFastTrack"
+            v-if="selectedFastTrackModel"
             size="small"
             closable
-            @click:close="selectedFastTrack = null"
+            @click:close="selectedFastTrackModel = null"
           >
-            Fast Track: {{ selectedFastTrack }}
+            Fast Track: {{ selectedFastTrackModel }}
           </v-chip>
         </div>
       </div>
@@ -231,21 +217,55 @@ const props = defineProps({
       terlambat: 'Terlambat',
       pending: 'Pending'
     })
+  },
+  selectedFastTrack: {
+    type: String,
+    default: null
+  },
+  fastTrackOptions: {
+    type: Array,
+    default: () => []
   }
 });
 
-const emit = defineEmits(['update:selectedStatus', 'update:searchQuery', 'action']);
+const emit = defineEmits(['update:selectedStatus', 'update:searchQuery', 'update:selectedFastTrack', '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,
+const selectedFastTrackModel = computed({
+  get: () => props.selectedFastTrack,
   set: (value) => {
     currentPage.value = 1;
+    emit('update:selectedFastTrack', value);
+  }
+});
+
+const selectedStatusModel = computed({
+  get: () => {
+    // If Fast Track is selected, return 'fasttrack' as status
+    if (selectedFastTrackModel.value === 'YA') {
+      return 'fasttrack';
+    }
+    return props.selectedStatus;
+  },
+  set: (value) => {
+    currentPage.value = 1;
+    
+    // Handle Fast Track selection
+    if (value === 'fasttrack') {
+      selectedFastTrackModel.value = 'YA';
+      // Emit 'all' as status since Fast Track is a separate filter
+      emit('update:selectedStatus', 'all');
+      return;
+    }
+    
+    // Reset Fast Track when other status is selected
+    if (selectedFastTrackModel.value) {
+      selectedFastTrackModel.value = null;
+    }
     emit('update:selectedStatus', value);
   }
 });
@@ -280,6 +300,16 @@ const statusOptions = computed(() => {
     { value: 'pending', label: props.statusLabels.pending, count: props.pendingCount }
   );
 
+  // Add Fast Track as a status option
+  if (fastTrackYaCount.value > 0) {
+    baseOptions.push({
+      value: 'fasttrack',
+      label: 'Fast Track',
+      count: fastTrackYaCount.value,
+      icon: 'mdi-flash'
+    });
+  }
+
   return baseOptions;
 });
 
@@ -299,28 +329,36 @@ const shiftOptions = computed(() => {
   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();
+// Count Fast Track "YA"
+const fastTrackYaCount = computed(() => {
+  return props.items.filter(p => {
+    const patientFastTrack = (p.fastTrack ?? "").toString().trim().toUpperCase();
+    return patientFastTrack === 'YA';
+  }).length;
 });
 
+
 const hasActiveFilters = computed(() => {
-  return !!(selectedKlinik.value || selectedPembayaran.value || selectedShift.value || selectedFastTrack.value);
+  return !!(selectedKlinik.value || selectedPembayaran.value || selectedShift.value || selectedFastTrackModel.value);
 });
 
 const clearAllFilters = () => {
   selectedKlinik.value = null;
   selectedPembayaran.value = null;
   selectedShift.value = null;
-  selectedFastTrack.value = null;
+  selectedFastTrackModel.value = null;
   currentPage.value = 1;
 };
 
 const filteredItems = computed(() => {
+  // Handle Fast Track as a status category
+  if (selectedStatusModel.value === 'fasttrack') {
+    return props.items.filter(p => {
+      const patientFastTrack = (p.fastTrack ?? "").toString().trim().toUpperCase();
+      return patientFastTrack === 'YA';
+    });
+  }
+  
   if (selectedStatusModel.value === 'all') return props.items;
   return props.items.filter(p => p.status === selectedStatusModel.value);
 });
@@ -338,9 +376,7 @@ const filteredAndSearchedItems = computed(() => {
   if (selectedShift.value) {
     result = result.filter(p => p.shift === selectedShift.value);
   }
-  if (selectedFastTrack.value) {
-    result = result.filter(p => p.fastTrack === selectedFastTrack.value);
-  }
+  // Fast Track filtering is now handled in filteredItems as a status category
 
   // Apply search
   if (searchModel.value) {