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

<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>

      <!-- 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>

        <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>

      <!-- 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>
</template>

<script setup>
const props = defineProps({
  patient: {
    type: Object,
    required: true
  }
});

defineEmits(['action', 'view-details']);

const getStatusColor = (status) => {
  const colors = {
    diloket: "var(--color-secondary-600)",
    terlambat: "var(--color-primary-600)",
    pending: "var(--color-danger-600)"
  };
  return colors[status] || "var(--color-neutral-600)";
};

const getStatusLabel = (status) => {
  const labels = {
    diloket: "Di Loket",
    terlambat: "Terlambat",
    pending: "Pending"
  };
  return labels[status] || status;
};
</script>

<style scoped lang="scss">
.patient-card {
  position: relative;
  border-radius: 12px;
  border: 1px solid var(--color-neutral-500);
  background: var(--color-neutral-100);
  transition: all 0.2s ease;
  height: 100%;

  &:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
  }
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-neutral-400);
}

.queue-number {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-neutral-900);
}

.status-chip {
  font-weight: 600;
  font-size: 11px;
}

.patient-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}

.info-label {
  color: var(--color-neutral-600);
  font-weight: 500;
  min-width: 100px;
}

.info-value {
  color: var(--color-neutral-900);
  font-weight: 600;
  text-align: right;
}

.klinik-chip {
  font-size: 11px;
  font-weight: 600;
}

.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;
}
</style>