update flow anjungan,checkin,admin,dan klinik ruang

components/features/queue/QueueActionsCard.vue

@@ -12,6 +12,10 @@
           <span class="quota-label">Tersedia</span>
           <span class="quota-value quota-available">{{ availableQuota }}</span>
         </div>
+        <div class="quota-item">
+          <span class="quota-label">Menunggu</span>
+          <span class="quota-value quota-waiting">{{ menungguCount }}</span>
+        </div>
         <div class="quota-item full-width">
           <v-progress-linear 
             :model-value="quotaPercentage" 
@@ -21,6 +25,7 @@
             class="mt-1"
           />
           <span class="quota-used">Terpakai: {{ usedQuota }}</span>
+          <span class="quota-callable">Bisa dipanggil: {{ callableQuota }}</span>
         </div>
       </div>
 
@@ -53,6 +58,10 @@ const props = defineProps({
     type: Number,
     default: 0
   },
+  menungguCount: {
+    type: Number,
+    default: 0
+  },
   hasNext: {
     type: Boolean,
     default: false
@@ -61,6 +70,11 @@ const props = defineProps({
 
 const availableQuota = computed(() => props.totalQuota - props.usedQuota);
 const quotaPercentage = computed(() => (props.usedQuota / props.totalQuota) * 100);
+// Kuota yang bisa dipanggil = Tersedia - Menunggu
+const callableQuota = computed(() => {
+  const callable = availableQuota.value - props.menungguCount;
+  return Math.max(0, callable);
+});
 
 defineEmits(['call']);
 </script>
@@ -70,6 +84,18 @@ defineEmits(['call']);
   border-radius: 12px;
   border: 1px solid var(--color-neutral-500);
   background: var(--color-neutral-100);
+  width: 100% !important;
+  max-width: 100% !important;
+  overflow: hidden !important;
+  box-sizing: border-box !important;
+  display: block !important;
+}
+
+.queue-actions-card :deep(.v-card-text) {
+  padding: 16px !important;
+  box-sizing: border-box !important;
+  width: 100% !important;
+  max-width: 100% !important;
 }
 
 .section-label {
@@ -81,20 +107,37 @@ defineEmits(['call']);
 }
 
 .quota-info {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 12px;
+  display: grid !important;
+  grid-template-columns: 1fr 1fr 1fr !important;
+  gap: 6px !important;
+  margin-bottom: 12px !important;
+  width: 100% !important;
+  box-sizing: border-box !important;
+  grid-auto-flow: row !important;
+  grid-auto-rows: auto !important;
 }
 
 .quota-item {
-  background: var(--color-neutral-300);
-  border-radius: 8px;
-  padding: 12px;
-  text-align: center;
+  background: var(--color-neutral-300) !important;
+  border-radius: 8px !important;
+  padding: 10px 6px !important;
+  text-align: center !important;
+  min-width: 0 !important;
+  max-width: 100% !important;
+  width: 100% !important;
+  box-sizing: border-box !important;
+  overflow: hidden !important;
+  word-wrap: break-word !important;
+  display: flex !important;
+  flex-direction: column !important;
+  justify-content: center !important;
+  align-items: center !important;
+  flex: 1 1 0% !important;
 }
 
 .quota-item.full-width {
-  grid-column: 1 / -1;
+  grid-column: 1 / 4 !important;
+  margin-top: 8px !important;
 }
 
 .quota-label {
@@ -107,15 +150,29 @@ defineEmits(['call']);
 
 .quota-value {
   display: block;
-  font-size: 24px;
+  font-size: 22px;
   font-weight: 800;
   color: var(--color-neutral-900);
+  line-height: 1.2;
+  white-space: nowrap;
 }
 
 .quota-available {
   color: var(--color-success-600);
 }
 
+.quota-waiting {
+  color: var(--color-warning-600);
+}
+
+.quota-callable {
+  display: block;
+  font-size: 11px;
+  color: var(--color-primary-600);
+  margin-top: 4px;
+  font-weight: 600;
+}
+
 .quota-used {
   display: block;
   font-size: 11px;
@@ -139,5 +196,18 @@ defineEmits(['call']);
   .call-buttons {
     grid-template-columns: repeat(2, 1fr);
   }
+  
+  .quota-info {
+    grid-template-columns: repeat(3, 1fr);
+    gap: 8px;
+  }
+  
+  .quota-item {
+    padding: 8px;
+  }
+  
+  .quota-value {
+    font-size: 20px;
+  }
 }
 </style>

components/features/queue/TabelPatientData.vue

@@ -18,16 +18,6 @@
               {{ status.label }} ({{ status.count }})
             </v-chip>
           </v-chip-group>
-
-          <!-- Search Field -->
-          <v-text-field
-            v-model="searchModel"
-            placeholder="Cari barcode, nomor antrian..."
-            density="compact"
-            hide-details
-            class="search-field"
-            prepend-inner-icon="mdi-magnify"
-          />
         </div>
 
         <!-- Advanced Filters -->
@@ -200,6 +190,10 @@ const props = defineProps({
     type: Number,
     default: 0
   },
+  waitingCount: {
+    type: Number,
+    default: 0
+  },
   showDiproses: {
     type: Boolean,
     default: true
@@ -295,6 +289,16 @@ const statusOptions = computed(() => {
     });
   }
 
+  // Tambahkan kategori "Menunggu" (pasien yang sudah dipanggil tapi belum check-in)
+  if (props.waitingCount > 0) {
+    baseOptions.push({
+      value: 'waiting',
+      label: 'Menunggu',
+      count: props.waitingCount,
+      icon: 'mdi-clock-outline'
+    });
+  }
+
   baseOptions.push(
     { value: 'terlambat', label: props.statusLabels.terlambat, count: props.terlambatCount },
     { value: 'pending', label: props.statusLabels.pending, count: props.pendingCount }
@@ -459,11 +463,6 @@ const handleAction = (patient, action) => {
   border-color: var(--color-secondary-600);
 }
 
-.search-field {
-  max-width: 300px;
-  min-width: 250px;
-}
-
 .advanced-filters {
   display: flex;
   gap: 12px;
@@ -543,11 +542,6 @@ const handleAction = (patient, action) => {
     min-width: 100%;
   }
 
-  .search-field {
-    max-width: 100%;
-    min-width: 100%;
-  }
-
   .advanced-filters {
     flex-direction: column;
   }