bagus-arie05
129 lines
3.4 KiB
Vue
129 lines
3.4 KiB
Vue
<template>
|
|
<v-card class="current-patient-card" elevation="0">
|
|
<v-card-text class="pa-4">
|
|
<div class="section-label mb-3">SEDANG DIPROSES</div>
|
|
|
|
<div v-if="patient" class="patient-details" :class="`patient-details-${theme}`">
|
|
<div class="patient-number mb-2">{{ patient.noAntrian.split(" |")[0] }}</div>
|
|
<div class="patient-info-text mb-3">
|
|
<div>{{ patient.barcode }}</div>
|
|
<div>{{ patient.klinik }} | {{ patient.pembayaran }}</div>
|
|
</div>
|
|
|
|
<div class="action-grid">
|
|
<v-btn class="text-white" color="success-600" variant="flat" block size="large" @click="$emit('action', 'check-in')">
|
|
<v-icon start size="20">mdi-check</v-icon>
|
|
Selesai
|
|
</v-btn>
|
|
<v-btn class="text-white" color="primary-600" variant="flat" block size="large" @click="$emit('action', 'terlambat')">
|
|
<v-icon start size="20">mdi-clock-alert</v-icon>
|
|
Terlambat
|
|
</v-btn>
|
|
<v-btn class="text-white" color="danger-600" variant="flat" block size="large" @click="$emit('action', 'pending')">
|
|
<v-icon start size="20">mdi-pause</v-icon>
|
|
Pending
|
|
</v-btn>
|
|
<v-btn class="text-white" color="secondary-600" variant="flat" block size="large" @click="$emit('change-klinik')">
|
|
<v-icon start size="20">mdi-swap-horizontal</v-icon>
|
|
{{ changeButtonText }}
|
|
</v-btn>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else class="empty-state">
|
|
<v-icon size="48" color="grey-lighten-2">mdi-account-off-outline</v-icon>
|
|
<div class="empty-text">Tidak ada pasien yang diproses</div>
|
|
</div>
|
|
</v-card-text>
|
|
</v-card>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
patient: {
|
|
type: Object,
|
|
default: null
|
|
},
|
|
theme: {
|
|
type: String,
|
|
default: 'primary', // 'primary', 'secondary', or 'accent'
|
|
validator: (value) => ['primary', 'secondary', 'accent'].includes(value)
|
|
},
|
|
changeButtonText: {
|
|
type: String,
|
|
default: 'Ubah Klinik'
|
|
}
|
|
});
|
|
|
|
defineEmits(['action', 'change-klinik']);
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.current-patient-card {
|
|
border-radius: 12px;
|
|
border: 1px solid var(--color-neutral-500);
|
|
background: var(--color-neutral-100);
|
|
}
|
|
|
|
.section-label {
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.5px;
|
|
color: var(--color-neutral-600);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.patient-details {
|
|
border-radius: 8px;
|
|
padding: 16px;
|
|
}
|
|
|
|
.patient-details-primary {
|
|
background: linear-gradient(135deg, var(--color-primary-200) 0%, var(--color-primary-300) 100%);
|
|
}
|
|
|
|
.patient-details-secondary {
|
|
background: linear-gradient(135deg, var(--color-secondary-200) 0%, var(--color-secondary-300) 100%);
|
|
}
|
|
|
|
.patient-details-accent {
|
|
background: linear-gradient(135deg, var(--color-accent-200) 0%, var(--color-accent-300) 100%);
|
|
}
|
|
|
|
.patient-number {
|
|
font-size: 28px;
|
|
font-weight: 800;
|
|
color: var(--color-neutral-900);
|
|
line-height: 1;
|
|
}
|
|
|
|
.patient-info-text {
|
|
font-size: 13px;
|
|
color: var(--color-neutral-700);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.action-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 8px;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: 32px 16px;
|
|
}
|
|
|
|
.empty-text {
|
|
font-size: 13px;
|
|
color: var(--color-neutral-600);
|
|
margin-top: 8px;
|
|
}
|
|
|
|
@media (max-width: 960px) {
|
|
.action-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style> |