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

<template>
  <v-tooltip 
    :text="isClickable ? 'Klik untuk proses pasien' : ''" 
    location="top"
    :disabled="!isClickable"
  >
    <template #activator="{ props: tooltipProps }">
      <v-card 
        class="patient-card" 
        elevation="2"
        :class="{ 'clickable-card': isClickable }"
        @click="handleCardClick"
        v-bind="isClickable ? tooltipProps : {}"
      >
        <v-card-text class="pa-4">
          <!-- Header: Queue Number, Status & Fast Track Badge -->
          <div class="card-header">
            <div class="header-left">
              <div class="queue-number">{{ patient.noAntrian.split(" |")[0] }}</div>
              <v-icon 
                v-if="patient.fastTrack === 'YA'"
                color="warning"
                size="20"
                class="fast-track-icon"
              >
                mdi-flash
              </v-icon>
            </div>
            <v-chip
              :color="getStatusColor(patient.status)"
              size="small"
              class="status-chip"
            >
              {{ getStatusLabel(patient.status) }}
            </v-chip>
          </div>

          <!-- Patient Info Grid - Simplified -->
          <div class="patient-info mt-3">
            <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">Pembayaran:</span>
              <span class="info-value">{{ patient.pembayaran }}</span>
            </div>
          </div>

          <!-- Action Button for non-clickable states -->
          <div v-if="!isClickable && patient.status === 'terlambat'" class="card-actions mt-3">
            <v-btn
              block
              color="success-600"
              variant="flat"
              size="small"
              class="text-white"
              @click.stop="$emit('action', patient, 'aktifkan')"
            >
              <v-icon start size="18">mdi-check-circle</v-icon>
              Aktifkan
            </v-btn>
          </div>
        </v-card-text>
      </v-card>
    </template>
  </v-tooltip>
</template>

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

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

const emit = defineEmits(['action']);

const isClickable = computed(() => {
  return props.patient.status === 'diloket' || props.patient.status === 'pending';
});

const handleCardClick = () => {
  if (isClickable.value) {
    emit('action', props.patient, 'proses');
  }
};

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%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);

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

  &.clickable-card {
    cursor: pointer;

    &:hover {
      border-color: var(--color-primary-600);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    }

    &:active {
      transform: translateY(0);
    }
  }
}

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

.header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

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

.fast-track-icon {
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

.status-chip {
  font-weight: 600;
  font-size: 11px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

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

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

.payment-info {
  display: flex;
  align-items: center;
  gap: 4px;
}

.fast-track-badge {
  font-size: 10px;
  font-weight: 700;
  height: 20px;
  padding: 0 6px;
}

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

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

.klinik-chip {
  font-size: 11px;
  font-weight: 600;
  border: 1.5px solid currentColor;
}

.card-actions .v-btn {
  text-transform: none;
  font-weight: 600;
  font-size: 13px;
  height: 36px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style>