update logika dan flow anjungan, master, store
This commit is contained in:
bagus-arie05
No files matched your search
@@ -1,106 +1,83 @@
|
||||
<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>
|
||||
<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 -->
|
||||
<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>
|
||||
<!-- 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">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>
|
||||
|
||||
<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>
|
||||
<!-- 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,
|
||||
@@ -108,7 +85,17 @@ const props = defineProps({
|
||||
}
|
||||
});
|
||||
|
||||
defineEmits(['action', 'view-details']);
|
||||
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 = {
|
||||
@@ -137,11 +124,25 @@ const getStatusLabel = (status) => {
|
||||
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.08);
|
||||
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 {
|
||||
@@ -149,7 +150,13 @@ const getStatusLabel = (status) => {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid var(--color-neutral-400);
|
||||
border-bottom: 2px solid var(--color-neutral-400);
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.queue-number {
|
||||
@@ -158,9 +165,23 @@ const getStatusLabel = (status) => {
|
||||
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 {
|
||||
@@ -174,12 +195,26 @@ const getStatusLabel = (status) => {
|
||||
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: 100px;
|
||||
min-width: 90px;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
@@ -191,24 +226,14 @@ const getStatusLabel = (status) => {
|
||||
.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: 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;
|
||||
height: 36px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user