arie.bagus.2905/web-antrean
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update admin loket dan tampilan status fast track

Browse Source
This commit is contained in:
bagus-arie05
2026-01-15 10:29:32 +07:00
parent a75be83d04
commit 12efe0be17
7 changed files with 564 additions and 259 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/features/queue/CurrentPatientCard.vue
+285 -50
View File
@@ -5,8 +5,8 @@
<div class="section-label">SEDANG DIPROSES</div>
<v-btn
v-if="patient"
class="call-button"
color="primary-600"
class="call-button text-white"
color="primary-500"
variant="flat"
size="small"
@click="$emit('call')"
@@ -17,29 +17,107 @@
</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 class="patient-header">
<div class="patient-number-wrapper">
<div class="patient-number">{{ patient.noAntrian.split(" |")[0] }}</div>
<div
v-if="isFastTrack"
class="fast-track-icon-wrapper"
>
<v-icon
color="#E53935"
size="18"
class="fast-track-icon"
>
mdi-flash
</v-icon>
</div>
</div>
<div class="action-icons">
<v-tooltip :text="changeButtonText" location="bottom">
<template v-slot:activator="{ props }">
<v-btn
v-bind="props"
class="action-icon-btn text-white"
color="secondary-600"
variant="flat"
size="small"
@click="$emit('change-klinik')"
>
<v-icon size="18">mdi-swap-horizontal</v-icon>
</v-btn>
</template>
</v-tooltip>
<v-tooltip text="Terlambat" location="bottom">
<template v-slot:activator="{ props }">
<v-btn
v-bind="props"
class="action-icon-btn text-white"
color="primary-600"
variant="flat"
size="small"
@click="$emit('action', 'terlambat')"
>
<v-icon size="18">mdi-clock-alert</v-icon>
</v-btn>
</template>
</v-tooltip>
<v-tooltip text="Pending" location="bottom">
<template v-slot:activator="{ props }">
<v-btn
v-bind="props"
class="action-icon-btn text-white"
color="danger-600"
variant="flat"
size="small"
@click="$emit('action', 'pending')"
>
<v-icon size="18">mdi-pause</v-icon>
</v-btn>
</template>
</v-tooltip>
<v-tooltip text="Selesai" location="bottom">
<template v-slot:activator="{ props }">
<v-btn
v-bind="props"
class="action-icon-btn text-white"
color="success-600"
variant="flat"
size="small"
@click="$emit('action', 'check-in')"
>
<v-icon size="18">mdi-check</v-icon>
</v-btn>
</template>
</v-tooltip>
</div>
</div>
<div class="patient-info-text">
<div class="patient-barcode">{{ patient.barcode }}</div>
<div class="patient-klinik-pembayaran">{{ 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 class="create-queue-buttons mt-4">
<div class="create-buttons-container">
<v-btn
class="create-btn-ruang py-6 text-white"
color="primary-600"
:disabled="!patient"
@click="$emit('open-klinik-ruang')"
>
<v-icon size="20" class="mr-2">mdi-door</v-icon>
Buat Antrean Ruang
</v-btn>
<v-btn
class="create-btn-penunjang py-6 text-white"
color="secondary-600"
:disabled="!patient"
@click="$emit('open-penunjang')"
>
<v-icon size="20" class="mr-2">mdi-clipboard-pulse</v-icon>
Buat Antrean Penunjang
</v-btn>
</div>
</div>
</div>
@@ -69,7 +147,9 @@
</template>
<script setup>
defineProps({
import { computed } from 'vue';
const props = defineProps({
patient: {
type: Object,
default: null
@@ -93,7 +173,13 @@ defineProps({
}
});
defineEmits(['action', 'change-klinik', 'process-next', 'call']);
const isFastTrack = computed(() => {
if (!props.patient) return false;
const fastTrack = (props.patient.fastTrack ?? "").toString().trim().toUpperCase();
return fastTrack === 'YA';
});
defineEmits(['action', 'change-klinik', 'process-next', 'call', 'open-klinik-ruang', 'open-penunjang']);
</script>
<style scoped lang="scss">
@@ -138,11 +224,11 @@ defineEmits(['action', 'change-klinik', 'process-next', 'call']);
.patient-details {
border-radius: 8px;
padding: 16px;
padding: 20px;
}
.patient-details-primary {
background: linear-gradient(135deg, var(--color-primary-200) 0%, var(--color-primary-300) 100%);
background: linear-gradient(135deg, var(--color-primary-100) 0%, var(--color-primary-100) 100%);
}
.patient-details-secondary {
@@ -153,6 +239,20 @@ defineEmits(['action', 'change-klinik', 'process-next', 'call']);
background: linear-gradient(135deg, var(--color-accent-200) 0%, var(--color-accent-300) 100%);
}
.patient-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
gap: 12px;
}
.patient-number-wrapper {
display: flex;
align-items: center;
gap: 8px;
}
.patient-number {
font-size: 28px;
line-height: 36px;
@@ -161,40 +261,154 @@ defineEmits(['action', 'change-klinik', 'process-next', 'call']);
color: var(--color-neutral-900);
}
.patient-info-text {
font-size: 14px;
line-height: 20px;
color: var(--color-neutral-700);
.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);
}
.action-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-top: 12px;
.fast-track-icon-wrapper:hover {
background: #E53935;
border-color: #E53935;
transform: scale(1.1);
box-shadow: 0 4px 12px rgba(229, 57, 53, 0.4);
}
.action-grid .v-btn {
text-transform: none;
font-weight: 600;
font-size: 16px;
line-height: 24px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
.fast-track-icon-wrapper .fast-track-icon {
color: #E53935 !important;
transition: all 0.2s ease;
}
.action-grid .v-btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
.fast-track-icon-wrapper:hover .fast-track-icon {
color: white !important;
}
.action-grid .v-btn:active {
.action-icons {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
}
.action-icon-btn {
min-width: 48px !important;
width: 48px !important;
height: 36px !important;
padding: 0 !important;
border-radius: 18px !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
transition: all 0.2s ease;
}
.action-icon-btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.18);
}
.action-icon-btn:active {
transform: translateY(0);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.action-grid .v-btn:disabled {
opacity: 0.6;
.patient-info-text {
font-size: 14px;
line-height: 24px;
color: var(--color-neutral-700);
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 20px;
}
.patient-barcode {
font-size: 14px;
line-height: 20px;
color: var(--color-neutral-700);
font-weight: 400;
}
.patient-klinik-pembayaran {
font-size: 15px;
line-height: 22px;
color: var(--color-neutral-800);
font-weight: 600;
}
.create-queue-buttons {
margin-top: 0;
}
.create-buttons-container {
display: flex;
gap: 16px;
width: 100%;
}
.create-queue-buttons .v-btn {
flex: 1;
text-transform: none;
font-weight: 600;
font-size: 15px;
line-height: 22px;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
transition: all 0.2s ease;
border-radius: 8px;
justify-content: center !important;
text-align: center;
display: flex !important;
align-items: center !important;
}
.create-queue-buttons .v-btn :deep(.v-btn__content) {
justify-content: center !important;
width: 100%;
display: flex !important;
align-items: center !important;
flex: 1;
}
.create-queue-buttons .v-btn :deep(.v-icon) {
flex-shrink: 0;
}
.create-btn-ruang {
background-color: var(--color-primary-600) !important;
color: var(--color-neutral-100) !important;
}
.create-btn-ruang:hover:not(:disabled) {
background-color: var(--color-primary-700) !important;
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(58, 97, 201, 0.25);
}
.create-btn-penunjang {
background-color: var(--color-secondary-600) !important;
color: var(--color-neutral-100) !important;
}
.create-btn-penunjang:hover:not(:disabled) {
background-color: var(--color-secondary-700) !important;
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(241, 111, 41, 0.25);
}
.create-queue-buttons .v-btn:active:not(:disabled) {
transform: translateY(0);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.create-queue-buttons .v-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}
@@ -247,8 +461,29 @@ defineEmits(['action', 'change-klinik', 'process-next', 'call']);
}
@media (max-width: 960px) {
.action-grid {
grid-template-columns: 1fr;
.patient-header {
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.action-icons {
width: 100%;
justify-content: flex-start;
gap: 6px;
}
.action-icon-btn {
flex: 1 1 calc(50% - 3px);
min-width: 0 !important;
max-width: calc(50% - 3px);
}
}
@media (max-width: 600px) {
.create-buttons-container {
flex-direction: column;
gap: 12px;
}
}
</style>
components/features/queue/PatientCard.vue
+125 -76
View File
@@ -20,14 +20,18 @@
<div class="card-header">
<div class="header-left">
<div class="queue-number">{{ patient.noAntrian.split(" |")[0] }}</div>
<v-icon
<div
v-if="isFastTrack"
color="warning"
size="20"
class="fast-track-icon"
class="fast-track-icon-wrapper"
>
mdi-flash
</v-icon>
<v-icon
color="#E53935"
size="14"
class="fast-track-icon"
>
mdi-flash
</v-icon>
</div>
</div>
<v-chip
:color="getStatusColor(patient.status)"
@@ -38,39 +42,31 @@
</v-chip>
</div>
<!-- Patient Info Grid - Simplified -->
<!-- Patient Info - Compact Single Row -->
<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 v-if="patient.tipeLayanan" class="info-row">
<span class="info-label">Tipe Layanan:</span>
<div class="info-chips-row">
<v-chip
size="small"
:color="patient.tipeLayanan === 'Pemeriksaan Awal' ? 'primary' : 'secondary'"
class="text-white"
variant="outlined"
class="klinik-chip"
>
{{ patient.tipeLayanan }}
{{ 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>
<div v-if="patient.ruang" class="info-row">
<span class="info-label">Ruang:</span>
<span class="info-value">{{ patient.ruang }}</span>
</div>
<div class="info-row">
<span class="info-label">Pembayaran:</span>
<span class="info-value">{{ patient.pembayaran }}</span>
<!-- 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>
@@ -115,6 +111,53 @@ const isFastTrack = computed(() => {
return fastTrack === 'YA';
});
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');
@@ -171,12 +214,12 @@ const getStatusLabel = (status) => {
}
&.fast-track-card {
background: rgba(255, 230, 198, 0.35) !important;
border-color: rgba(255, 185, 95, 0.4);
background: #FBE9E8 !important;
border-color: rgba(255, 132, 65, 0.5);
&:hover {
background: rgba(255, 230, 198, 0.45) !important;
border-color: rgba(255, 185, 95, 0.5);
background: #F1B3AE !important;
border-color: rgba(255, 132, 65, 0.6);
}
}
}
@@ -201,17 +244,24 @@ const getStatusLabel = (status) => {
color: var(--color-neutral-900);
}
.fast-track-icon {
animation: pulse 2s ease-in-out infinite;
.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);
}
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.6;
}
.fast-track-icon-wrapper .fast-track-icon {
color: #E53935 !important;
transition: all 0.2s ease;
}
.status-chip {
@@ -223,46 +273,45 @@ const getStatusLabel = (status) => {
.patient-info {
display: flex;
flex-direction: column;
gap: 10px;
/* Tinggi dinamis berdasarkan konten - card tanpa dokter akan lebih compact */
}
.info-row {
.info-chips-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;
flex-wrap: wrap;
}
.klinik-chip {
font-size: 11px;
font-weight: 600;
border: 1.5px solid currentColor;
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 {
components/features/queue/TabelPatientData.vue
+1 -1
View File
@@ -200,7 +200,7 @@ const props = defineProps({
},
itemsPerPage: {
type: Number,
default: 9
default: 12
},
statusLabels: {
type: Object,