From 81b877bb7f05c2557e3c9d1b5a3040a93bfb0fa9 Mon Sep 17 00:00:00 2001 From: Fanrouver Date: Mon, 19 Jan 2026 15:27:50 +0700 Subject: [PATCH] update loket dan monitoring --- components/MonitorPasien/ticketCard.vue | 131 +++++++-- nuxt.config.ts | 4 +- pages/Anjungan/AntreanMasuk/[id].vue | 366 ++++++++++++++++-------- pages/MonitoringPasien/pasien/[id].vue | 32 +-- server/api/auth/logout.post.ts | 25 +- 5 files changed, 383 insertions(+), 175 deletions(-) diff --git a/components/MonitorPasien/ticketCard.vue b/components/MonitorPasien/ticketCard.vue index d98d857..8e49de5 100644 --- a/components/MonitorPasien/ticketCard.vue +++ b/components/MonitorPasien/ticketCard.vue @@ -1,19 +1,30 @@ @@ -59,13 +71,30 @@ const props = defineProps({ title: String, steps: Array, color: String, - currentStepLabel: String, + currentStepLabel: String, + queueNumber: String, // Nomor antrean untuk ditampilkan di chip }); const currentStepIndex = computed(() => { return props.steps.findIndex(step => step.label === props.currentStepLabel); }); +// Extract nomor antrean dari title jika queueNumber tidak disediakan +const extractedQueueNumber = computed(() => { + if (props.queueNumber) { + return props.queueNumber; + } + // Extract dari title format: "JIWA (Antrean: 1)" atau "RADIOLOGI (Antrean: 5)" + const match = props.title.match(/\(Antrean:\s*(\d+)\)/); + return match ? match[1] : null; +}); + +// Clean title tanpa nomor antrean untuk ditampilkan di header +const cleanTitle = computed(() => { + // Hapus bagian "(Antrean: X)" dari title + return props.title.replace(/\s*\(Antrean:\s*\d+\)/g, '').trim(); +}); + const getStepIcon = (index) => { if (index < currentStepIndex.value) { return 'mdi-check'; @@ -77,16 +106,39 @@ const getStepIcon = (index) => { }; const getStepColor = (index) => { + // Warna berbeda berdasarkan status step (dari _colors.scss) if (index < currentStepIndex.value) { - return 'success'; + return '#33A484'; // success-600 - hijau untuk completed } else if (index === currentStepIndex.value) { - return 'orange-lighten-1'; + return '#FF8441'; // secondary-500 - orange untuk current } - return 'grey-lighten-1'; + return '#CDD4DC'; // neutral-500 - abu-abu untuk pending +}; + +const getStepTextClass = (index) => { + // Warna text label sesuai dengan warna dot + if (index < currentStepIndex.value) { + return 'text-success-600'; // hijau untuk completed + } else if (index === currentStepIndex.value) { + return 'text-secondary-500'; // orange untuk current + } + return 'text-neutral-600'; // abu-abu untuk pending +}; + +const getStepDateClass = (index) => { + // Warna text date/time lebih terang + if (index < currentStepIndex.value) { + return 'text-success-400'; // hijau terang untuk completed + } else if (index === currentStepIndex.value) { + return 'text-secondary-400'; // orange terang untuk current + } + return 'text-neutral-500'; // abu-abu untuk pending }; -