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>