347 lines
9.0 KiB
Vue
347 lines
9.0 KiB
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,
|
|
'fast-track-card': isFastTrack && !isCurrentlyProcessing,
|
|
'processing-card': isCurrentlyProcessing || patient.status === 'diproses'
|
|
}"
|
|
@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>
|
|
<div
|
|
v-if="isFastTrack"
|
|
class="fast-track-icon-wrapper"
|
|
>
|
|
<v-icon
|
|
color="#E53935"
|
|
size="14"
|
|
class="fast-track-icon"
|
|
>
|
|
mdi-flash
|
|
</v-icon>
|
|
</div>
|
|
</div>
|
|
<v-chip
|
|
:color="getStatusColor(patient.status)"
|
|
size="small"
|
|
class="status-chip"
|
|
>
|
|
{{ getStatusLabel(patient.status) }}
|
|
</v-chip>
|
|
</div>
|
|
|
|
<!-- Patient Info - Compact Single Row -->
|
|
<div class="patient-info mt-3">
|
|
<div class="info-chips-row">
|
|
<v-chip
|
|
size="small"
|
|
variant="outlined"
|
|
class="klinik-chip"
|
|
>
|
|
{{ patient.klinik }}
|
|
</v-chip>
|
|
<!-- Tipe Layanan atau Jenis Pasien -->
|
|
<v-chip
|
|
v-if="displayJenisPasien"
|
|
size="small"
|
|
:color="getJenisPasienColor(displayJenisPasien)"
|
|
:variant="getJenisPasienVariant(displayJenisPasien)"
|
|
:class="getJenisPasienClass(displayJenisPasien)"
|
|
>
|
|
{{ displayJenisPasien }}
|
|
</v-chip>
|
|
</div>
|
|
<!-- Nama Dokter untuk Pasien Eksekutif -->
|
|
<div v-if="isEksekutif && patient.namaDokter" class="doctor-info mt-2">
|
|
<v-icon size="16" color="primary" class="doctor-icon">mdi-doctor</v-icon>
|
|
<span class="doctor-name">{{ patient.namaDokter }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<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';
|
|
import { useQueueStore } from '~/stores/queueStore';
|
|
|
|
const queueStore = useQueueStore();
|
|
|
|
const props = defineProps({
|
|
patient: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
});
|
|
|
|
const emit = defineEmits(['action']);
|
|
|
|
const isClickable = computed(() => {
|
|
return props.patient.status === 'di-loket' || props.patient.status === 'pending';
|
|
});
|
|
|
|
const isFastTrack = computed(() => {
|
|
const fastTrack = (props.patient.fastTrack ?? "").toString().trim().toUpperCase();
|
|
return fastTrack === 'YA';
|
|
});
|
|
|
|
const isCurrentlyProcessing = computed(() => {
|
|
const currentPatient = queueStore.currentProcessingPatient?.loket;
|
|
if (!currentPatient || !props.patient) return false;
|
|
return currentPatient.no === props.patient.no ||
|
|
currentPatient.barcode === props.patient.barcode;
|
|
});
|
|
|
|
const isEksekutif = computed(() => {
|
|
const pembayaran = (props.patient.pembayaran ?? "").toString().trim().toUpperCase();
|
|
return pembayaran === 'EKSEKUTIF';
|
|
});
|
|
|
|
// Computed untuk menentukan jenis pasien yang ditampilkan
|
|
const displayJenisPasien = computed(() => {
|
|
// Prioritas 1: Tipe Layanan jika ada
|
|
if (props.patient.tipeLayanan) {
|
|
return props.patient.tipeLayanan;
|
|
}
|
|
// Prioritas 2: Eksekutif jika pasien eksekutif
|
|
if (isEksekutif.value) {
|
|
return 'Eksekutif';
|
|
}
|
|
// Prioritas 3: Tampilkan pembayaran sebagai fallback
|
|
if (props.patient.pembayaran) {
|
|
return props.patient.pembayaran;
|
|
}
|
|
return null;
|
|
});
|
|
|
|
// Fungsi untuk menentukan color chip berdasarkan jenis pasien
|
|
const getJenisPasienColor = (jenis) => {
|
|
if (jenis === 'Pemeriksaan Awal') return 'primary';
|
|
if (jenis === 'Tindakan') return 'secondary';
|
|
if (jenis === 'Eksekutif') return 'warning';
|
|
if (jenis === 'Fast Track') return 'warning';
|
|
// Untuk pembayaran biasa (BPJS, UMUM), gunakan neutral-600 untuk kontras
|
|
return 'success-500';
|
|
};
|
|
|
|
// Fungsi untuk menentukan variant chip berdasarkan jenis pasien
|
|
const getJenisPasienVariant = (jenis) => {
|
|
// Semua jenis pasien menggunakan flat (filled) untuk kontras dengan klinik (outlined)
|
|
return 'flat';
|
|
};
|
|
|
|
// Fungsi untuk menentukan class chip berdasarkan jenis pasien
|
|
const getJenisPasienClass = (jenis) => {
|
|
if (jenis === 'Pemeriksaan Awal' || jenis === 'Tindakan' || jenis === 'Eksekutif' || jenis === 'Fast Track') {
|
|
return 'text-white layanan-chip';
|
|
}
|
|
// Untuk pembayaran biasa (BPJS, UMUM), gunakan text putih untuk kontras dengan background
|
|
return 'text-white layanan-chip';
|
|
};
|
|
|
|
const handleCardClick = () => {
|
|
if (isClickable.value) {
|
|
emit('action', props.patient, 'proses');
|
|
}
|
|
};
|
|
|
|
const getStatusColor = (status) => {
|
|
const colors = {
|
|
'di-loket': "var(--color-primary-600)", // Blue
|
|
diproses: "var(--color-primary-600)", // Keep as Blue
|
|
terlambat: "var(--color-danger-700)", // Darker Red
|
|
pending: "var(--color-secondary-600)" // Orange
|
|
};
|
|
return colors[status] || "var(--color-neutral-600)";
|
|
};
|
|
|
|
const getStatusLabel = (status) => {
|
|
const labels = {
|
|
'di-loket': "Di Loket",
|
|
diproses: "Diproses",
|
|
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);
|
|
}
|
|
}
|
|
|
|
&.fast-track-card {
|
|
background: #FBE9E8 !important;
|
|
border-color: rgba(255, 132, 65, 0.5);
|
|
|
|
&:hover {
|
|
background: #F1B3AE !important;
|
|
border-color: rgba(255, 132, 65, 0.6);
|
|
}
|
|
}
|
|
|
|
&.processing-card {
|
|
background: var(--color-primary-100) !important;
|
|
border-color: var(--color-primary-400);
|
|
box-shadow: 0 4px 12px rgba(25, 118, 210, 0.2) !important;
|
|
|
|
&:hover {
|
|
background: var(--color-primary-200) !important;
|
|
border-color: var(--color-primary-500);
|
|
box-shadow: 0 6px 16px rgba(25, 118, 210, 0.25) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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-wrapper {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: rgba(239, 83, 80, 0.15);
|
|
border: 2px solid rgba(229, 57, 53, 0.4);
|
|
transition: all 0.2s ease;
|
|
flex-shrink: 0;
|
|
box-shadow: 0 2px 8px rgba(229, 57, 53, 0.2);
|
|
}
|
|
|
|
|
|
.fast-track-icon-wrapper .fast-track-icon {
|
|
color: #E53935 !important;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.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;
|
|
/* Tinggi dinamis berdasarkan konten - card tanpa dokter akan lebih compact */
|
|
}
|
|
|
|
.info-chips-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.klinik-chip {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
height: 24px;
|
|
border-color: var(--color-neutral-600) !important;
|
|
color: var(--color-neutral-900) !important;
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
.layanan-chip {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
height: 24px;
|
|
}
|
|
|
|
.doctor-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.doctor-icon {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.doctor-name {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: var(--color-primary-600);
|
|
}
|
|
|
|
.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> |