web-antrean/components/features/queue/QueueActionsCard.vue

<template>
  <v-card class="queue-actions-card" elevation="0">
    <v-card-text class="pa-4">
      <div class="section-label mb-3">PANGGIL ANTREAN</div>
      
      <div class="quota-info mb-3">
        <div class="quota-item">
          <span class="quota-label">Kuota</span>
          <span class="quota-value">{{ totalQuota }}</span>
        </div>
        <div class="quota-item">
          <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" 
            color="success-600" 
            height="6" 
            rounded 
            class="mt-1"
          />
          <span class="quota-used">Selesai: {{ usedQuota }}</span>
          <span class="quota-callable">Bisa dipanggil: {{ callableQuota }}</span>
        </div>
      </div>

      <div class="call-buttons">
        <v-btn 
          color="success-600" 
          variant="outlined" 
          @click="$emit('call', 1)" 
          
        >
          1
        </v-btn>
        <v-btn color="secondary-600" variant="outlined" @click="$emit('call', 5)">5</v-btn>
        <v-btn color="primary-600" variant="outlined" @click="$emit('call', 10)">10</v-btn>
        <v-btn color="danger-600" variant="outlined" @click="$emit('call', 20)">20</v-btn>
      </div>
    </v-card-text>
  </v-card>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  totalQuota: {
    type: Number,
    default: 150
  },
  usedQuota: {
    type: Number,
    default: 0
  },
  menungguCount: {
    type: Number,
    default: 0
  },
  hasNext: {
    type: Boolean,
    default: false
  }
});

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>

<style scoped lang="scss">
.queue-actions-card {
  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 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--color-neutral-600);
  text-transform: uppercase;
}

.quota-info {
  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) !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 / 4 !important;
  margin-top: 8px !important;
}

.quota-label {
  display: block;
  font-size: 11px;
  color: var(--color-neutral-600);
  margin-bottom: 4px;
  font-weight: 600;
}

.quota-value {
  display: block;
  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-neutral-900);
  margin-top: 4px;
  font-weight: 600;
}

.quota-used {
  display: block;
  font-size: 11px;
  color: var(--color-neutral-600);
  margin-top: 4px;
}

.call-buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.call-buttons .v-btn {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  height: 44px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

.call-buttons .v-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.call-buttons .v-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

@media (max-width: 960px) {
  .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>