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

update warna dan klinik ruang

Browse Source
This commit is contained in:
bagus-arie05
2026-01-14 08:25:47 +07:00
parent e80032f668
commit f3e90adea3
20 changed files with 1492 additions and 345 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/checkin/CheckInDialog.vue
+11 -1
View File
@@ -96,7 +96,7 @@
</div>
<div class="text-right">
<p class="text-caption patient-info-label mb-0">Waktu Scan</p>
<p class="text-body-2 patient-info-value mb-0">{{ new Date().toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' }) }}</p>
<p class="text-body-2 patient-info-value mb-0">{{ getCurrentTime() }}</p>
</div>
</div>
</v-card-text>
@@ -164,6 +164,16 @@ const handleClose = () => {
emit('close')
emit('update:modelValue', false)
}
const getCurrentTime = () => {
// Format jam dengan titik dua (HH:MM:SS)
const timeString = new Date().toLocaleTimeString('id-ID', {
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
})
return timeString.replace(/\./g, ':')
}
</script>
<style scoped lang="scss">
components/common/PageHeader.vue
+10 -10
View File
@@ -3,7 +3,7 @@
<div class="header-content">
<div class="header-left">
<div class="header-icon">
<v-icon size="32" color="white">{{ icon }}</v-icon>
<v-icon size="28" color="white">{{ icon }}</v-icon>
</div>
<div class="header-text">
<h2 class="page-title">{{ title }}</h2>
@@ -108,7 +108,7 @@ $font-weight-semibold: 600;
display: flex;
align-items: center;
justify-content: space-between;
padding: 32px;
padding: 20px 28px;
color: $neutral-100;
}
@@ -119,15 +119,15 @@ $font-weight-semibold: 600;
.header-icon {
background: rgba(255, 255, 255, 0.2);
border-radius: 16px;
padding: 16px;
margin-right: 20px;
border-radius: 12px;
padding: 12px;
margin-right: 16px;
backdrop-filter: blur(10px);
}
.page-title {
font-size: 36px;
line-height: 44px;
font-size: 32px;
line-height: 40px;
font-weight: $font-weight-semibold;
margin: 0;
color: $neutral-100;
@@ -135,10 +135,10 @@ $font-weight-semibold: 600;
}
.page-subtitle {
margin: 4px 0 0 0;
margin: 2px 0 0 0;
opacity: 0.9;
font-size: 16px;
line-height: 24px;
font-size: 15px;
line-height: 22px;
font-weight: $font-weight-regular;
color: $neutral-100;
}
components/common/SelectionDialog.vue
+48 -16
View File
@@ -1,14 +1,16 @@
<template>
<v-dialog v-model="dialogModel" max-width="800px">
<v-card>
<v-dialog v-model="dialogModel" max-width="800px" persistent>
<v-card class="dialog-card">
<v-card-title class="dialog-header">
<v-btn icon size="small" @click="dialogModel = false">
<span class="headline-4">{{ title }}</span>
<v-btn icon variant="text" size="small" class="btn-close" @click="dialogModel = false">
<v-icon>mdi-close</v-icon>
</v-btn>
<span>{{ title }}</span>
</v-card-title>
<v-card-text class="pa-4">
<v-divider />
<v-card-text class="dialog-content">
<v-text-field
v-model="searchModel"
:placeholder="searchPlaceholder"
@@ -94,32 +96,62 @@ const handleSelect = (item) => {
</script>
<style scoped lang="scss">
.dialog-card {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.dialog-header {
background: var(--color-neutral-300);
padding: 16px 20px;
background: linear-gradient(135deg, var(--color-secondary-600) 0%, var(--color-secondary-700) 100%);
color: var(--color-neutral-100);
padding: 20px 24px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
font-size: 18px;
font-weight: 700;
color: var(--color-neutral-900);
}
.headline-4 {
font-size: 20px;
line-height: 28px;
font-weight: 600;
margin: 0;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.btn-close {
color: var(--color-neutral-100) !important;
transition: all 0.2s ease;
}
.btn-close:hover {
background: rgba(255, 255, 255, 0.2) !important;
transform: rotate(90deg);
}
.dialog-content {
padding: 24px !important;
background: var(--color-neutral-300);
}
.selection-card {
cursor: pointer;
transition: all 0.2s;
border: 2px solid var(--color-neutral-500);
transition: all 0.2s ease;
border: 1px solid var(--color-neutral-400);
background: var(--color-neutral-100);
border-radius: 8px;
}
.selection-card:hover {
border-color: var(--color-secondary-600);
background: var(--color-secondary-200);
background: var(--color-secondary-300);
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(6, 113, 224, 0.15);
}
.selection-name {
font-size: 13px;
font-weight: 700;
font-size: 14px;
line-height: 20px;
font-weight: 600;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
color: var(--color-neutral-900);
}
</style>
components/features/queue/CurrentPatientCard.vue
+66 -5
View File
@@ -120,7 +120,20 @@ defineEmits(['action', 'change-klinik', 'process-next', 'call']);
.call-button {
text-transform: none;
font-weight: 600;
font-size: 14px;
line-height: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: all 0.2s ease;
}
.call-button:hover {
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.call-button:active {
transform: translateY(0);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.patient-details {
@@ -142,15 +155,16 @@ defineEmits(['action', 'change-klinik', 'process-next', 'call']);
.patient-number {
font-size: 28px;
font-weight: 800;
line-height: 36px;
font-weight: 700;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
color: var(--color-neutral-900);
line-height: 1;
}
.patient-info-text {
font-size: 13px;
font-size: 14px;
line-height: 20px;
color: var(--color-neutral-700);
line-height: 1.5;
}
.action-grid {
@@ -160,13 +174,58 @@ defineEmits(['action', 'change-klinik', 'process-next', 'call']);
margin-top: 12px;
}
.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);
transition: all 0.2s ease;
}
.action-grid .v-btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.action-grid .v-btn:active {
transform: translateY(0);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.action-grid .v-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
.empty-state {
text-align: center;
padding: 32px 16px;
}
.empty-state .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);
transition: all 0.2s ease;
}
.empty-state .v-btn:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.empty-state .v-btn:active:not(:disabled) {
transform: translateY(0);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.empty-text {
font-size: 13px;
font-size: 14px;
line-height: 20px;
color: var(--color-neutral-600);
margin-top: 8px;
}
@@ -181,8 +240,10 @@ defineEmits(['action', 'change-klinik', 'process-next', 'call']);
.info-text {
font-size: 12px;
line-height: 16px;
color: var(--color-neutral-700);
font-weight: 600;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
@media (max-width: 960px) {
components/features/queue/QueueActionsCard.vue
+14
View File
@@ -188,8 +188,22 @@ defineEmits(['call']);
.call-buttons .v-btn {
font-size: 16px;
line-height: 24px;
font-weight: 700;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
height: 44px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: all 0.2s ease;
}
.call-buttons .v-btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.call-buttons .v-btn:active {
transform: translateY(0);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
@media (max-width: 960px) {
composables/useCheckInHistory.ts
+4 -2
View File
@@ -78,7 +78,7 @@ export const useCheckInHistory = () => {
data: qrData,
timestamp: new Date().toISOString(),
date: new Date().toLocaleDateString('id-ID'),
time: new Date().toLocaleTimeString('id-ID')
time: new Date().toLocaleTimeString('id-ID').replace(/\./g, ':')
})
// Simpan maksimal item sesuai constant
@@ -227,11 +227,13 @@ export const useCheckInHistory = () => {
const formatDateTime = (dateString: string) => {
const date = new Date(dateString)
return date.toLocaleTimeString('id-ID', {
// Format jam dengan titik dua (HH:MM:SS)
const timeString = date.toLocaleTimeString('id-ID', {
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
})
return timeString.replace(/\./g, ':')
}
const formatDate = (dateString: string) => {
composables/useThermalPrint.ts
+37 -21
View File
@@ -85,17 +85,20 @@ export const useThermalPrint = () => {
if (isNaN(date.getTime())) {
return new Date().toLocaleTimeString('id-ID', {
hour: '2-digit',
minute: '2-digit'
minute: '2-digit',
second: '2-digit'
});
}
return date.toLocaleTimeString('id-ID', {
hour: '2-digit',
minute: '2-digit'
minute: '2-digit',
second: '2-digit'
});
} catch (error) {
return new Date().toLocaleTimeString('id-ID', {
hour: '2-digit',
minute: '2-digit'
minute: '2-digit',
second: '2-digit'
});
}
};
@@ -155,6 +158,7 @@ export const useThermalPrint = () => {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
body {
@@ -162,10 +166,10 @@ export const useThermalPrint = () => {
max-width: 80mm;
margin: 0;
padding: 2mm 4mm 6mm 4mm;
font-family: 'Courier New', monospace;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 12px;
font-weight: bold;
line-height: 1.2;
line-height: 1.0;
background: white;
color: black;
}
@@ -180,36 +184,39 @@ export const useThermalPrint = () => {
}
.header {
margin-bottom: 3mm;
margin-bottom: 2mm;
border-bottom: 2px solid #000;
padding-bottom: 2mm;
padding-bottom: 1mm;
margin-top: 0;
}
.hospital-name {
font-size: 14px;
font-weight: bold;
margin-bottom: 1mm;
margin-bottom: 0.5mm;
text-transform: uppercase;
letter-spacing: 1px;
line-height: 1.0;
}
.hospital-address {
font-size: 10px;
font-weight: bold;
margin-bottom: 1mm;
margin-bottom: 0.5mm;
line-height: 1.0;
}
.ticket-title {
font-size: 12px;
font-weight: bold;
margin-top: 2mm;
margin-top: 1mm;
text-transform: uppercase;
line-height: 1.0;
}
.qr-code-section {
margin-top: -1.5mm;
margin-bottom: 1mm;
margin-top: -1mm;
margin-bottom: 0.5mm;
text-align: center;
}
@@ -231,25 +238,27 @@ export const useThermalPrint = () => {
.barcode-number {
font-size: 10px;
font-weight: bold;
margin-top: -1mm;
margin-top: -0.5mm;
word-break: break-all;
line-height: 1.0;
}
.info-section {
margin-top: 3mm;
margin-top: 2mm;
text-align: left;
border-top: 1px dashed #000;
padding-top: 2mm;
padding-top: 1mm;
padding-left: 3mm;
padding-right: 3mm;
}
.info-row {
margin-bottom: 1.5mm;
margin-bottom: 0.8mm;
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 0;
line-height: 1.0;
}
.info-label-text {
@@ -258,6 +267,7 @@ export const useThermalPrint = () => {
text-align: left;
text-transform: uppercase;
word-break: keep-all;
line-height: 1.0;
}
.info-colon {
@@ -265,6 +275,7 @@ export const useThermalPrint = () => {
font-size: 10px;
margin-left: auto;
padding-right: 2mm;
line-height: 1.0;
}
.info-label-wrapper {
@@ -280,40 +291,45 @@ export const useThermalPrint = () => {
font-weight: bold;
text-align: right;
word-break: break-word;
line-height: 1.0;
}
.no-antrian {
font-size: 28px;
font-weight: bold;
margin: 0.5mm 0;
margin: 0.3mm 0;
letter-spacing: 2px;
text-transform: uppercase;
line-height: 1.0;
}
.klinik-name {
font-size: 14px;
font-weight: bold;
margin-top: 0.5mm;
margin-top: 0.3mm;
margin-bottom: 0;
padding-bottom: 0;
text-transform: uppercase;
overflow: visible;
line-height: 1.0;
}
.footer {
margin-top: 3mm;
padding-top: 2mm;
margin-top: 2mm;
padding-top: 1mm;
padding-bottom: 0;
margin-bottom: 6mm;
border-top: 2px solid #000;
font-size: 9px;
font-weight: bold;
text-align: center;
line-height: 1.0;
}
.footer-text {
margin-bottom: 1mm;
margin-bottom: 0.5mm;
font-weight: bold;
line-height: 1.0;
}
.footer-text:last-child {
pages/AdminKlinikRuang/[kodeKlinik].vue
+1077 -254
View File
File diff suppressed because it is too large Load Diff
pages/AdminLoket.vue
+57 -2
View File
@@ -563,10 +563,25 @@ const buatAntreanKlinikRuang = async (klinikRuang, ruang) => {
.create-buttons .v-btn {
text-transform: none;
font-weight: 600;
font-size: 16px;
line-height: 24px;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
width: 100%;
max-width: 100%;
box-sizing: border-box;
min-width: 0;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: all 0.2s ease;
}
.create-buttons .v-btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.create-buttons .v-btn:active {
transform: translateY(0);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.sticky-wrapper {
@@ -638,7 +653,7 @@ const buatAntreanKlinikRuang = async (klinikRuang, ruang) => {
}
.dialog-header {
background: linear-gradient(135deg, var(--color-warning-600) 0%, var(--color-primary-700) 100%);
background: linear-gradient(135deg, var(--color-secondary-600) 0%, var(--color-secondary-700) 100%);
color: var(--color-neutral-100);
padding: 20px 24px;
display: flex;
@@ -647,7 +662,7 @@ const buatAntreanKlinikRuang = async (klinikRuang, ruang) => {
}
.dialog-header-warning {
background: linear-gradient(135deg, var(--color-warning-600) 0%, var(--color-primary-700) 100%);
background: linear-gradient(135deg, var(--color-secondary-600) 0%, var(--color-secondary-700) 100%);
}
.headline-4 {
@@ -655,6 +670,7 @@ const buatAntreanKlinikRuang = async (klinikRuang, ruang) => {
line-height: 28px;
font-weight: 600;
margin: 0;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.headline-5 {
@@ -663,10 +679,17 @@ const buatAntreanKlinikRuang = async (klinikRuang, ruang) => {
font-weight: 600;
margin: 0;
color: var(--color-neutral-900);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.btn-close {
color: var(--color-neutral-100) !important;
transition: all 0.2s ease;
}
.btn-close:hover {
background: rgba(255, 255, 255, 0.2) !important;
transform: rotate(90deg);
}
.dialog-content {
@@ -674,6 +697,30 @@ const buatAntreanKlinikRuang = async (klinikRuang, ruang) => {
background: var(--color-neutral-300);
}
.dialog-actions {
padding: 16px 24px;
background: var(--color-neutral-300);
}
.dialog-actions .v-btn {
text-transform: none;
font-weight: 600;
font-size: 16px;
line-height: 24px;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
min-width: 100px;
}
.btn-cancel {
border-color: var(--color-neutral-600) !important;
color: var(--color-neutral-800) !important;
}
.btn-submit {
background-color: var(--color-secondary-600) !important;
color: var(--color-neutral-100) !important;
}
.patient-card {
background: var(--color-neutral-100);
border-radius: 12px;
@@ -756,11 +803,19 @@ const buatAntreanKlinikRuang = async (klinikRuang, ruang) => {
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.ruang-item:hover {
border-color: var(--color-warning-600);
background: rgba(255, 185, 95, 0.15);
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.ruang-item:active {
transform: translateY(0);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.ruang-info {
pages/Anjungan/AdminAnjungan.vue
+17 -2
View File
@@ -4,7 +4,11 @@
<div class="header-content">
<div class="header-left">
<div class="header-icon">
<v-icon size="32" color="white">mdi-view-dashboard</v-icon>
<img
src="/Rumah_Sakit_Umum_Daerah_Dr._Saiful_Anwar.webp"
alt="RSUD Logo"
class="header-logo"
/>
</div>
<div class="header-text">
<h1 class="page-title">Admin Anjungan</h1>
@@ -215,11 +219,22 @@ const items = ref([
}
.header-icon {
background: rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.95);
border-radius: 16px;
padding: 16px;
margin-right: 20px;
backdrop-filter: blur(10px);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.header-logo {
width: 48px;
height: 48px;
object-fit: contain;
padding: 4px;
}
.page-title {
pages/Anjungan/Anjungan/[id].vue
+17 -2
View File
@@ -4,7 +4,11 @@
<div class="header-content">
<div class="header-left">
<div class="header-icon">
<v-icon size="32" color="white">mdi-hospital-building</v-icon>
<img
src="/Rumah_Sakit_Umum_Daerah_Dr._Saiful_Anwar.webp"
alt="RSUD Logo"
class="header-logo"
/>
</div>
<div class="header-text">
<h1 class="page-title">{{ anjunganData.namaAnjungan }}</h1>
@@ -1286,10 +1290,21 @@ watch(lastRegisteredPatient, (newVal) => {
}
.header-icon {
background: rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.95);
border-radius: 12px;
padding: 12px;
backdrop-filter: blur(10px);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.header-logo {
width: 48px;
height: 48px;
object-fit: contain;
padding: 4px;
}
.header-text {
pages/Anjungan/Anjungan/index.vue
+14 -2
View File
@@ -3,7 +3,11 @@
<div class="anjungan-selection-container">
<div class="selection-header">
<div class="header-icon">
<v-icon size="64" color="white">mdi-monitor-dashboard</v-icon>
<img
src="/Rumah_Sakit_Umum_Daerah_Dr._Saiful_Anwar.webp"
alt="RSUD Logo"
class="header-logo"
/>
</div>
<div class="header-content">
<h1 class="main-title">Pilih Anjungan</h1>
@@ -165,13 +169,21 @@ const navigateToSettings = () => {
}
.header-icon {
background: rgba(255, 255, 255, 0.15);
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
padding: 24px;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(10px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.header-logo {
width: 80px;
height: 80px;
object-fit: contain;
padding: 4px;
}
.header-content {
pages/Anjungan/AntreanMasuk/[id].vue
+17 -3
View File
@@ -5,7 +5,11 @@
<div class="display-header">
<div class="header-left">
<div class="logo-circle">
<v-icon size="48" color="white">mdi-door-open</v-icon>
<img
src="/Rumah_Sakit_Umum_Daerah_Dr._Saiful_Anwar.webp"
alt="RSUD Logo"
class="header-logo"
/>
</div>
<div class="header-text">
<h1 class="hospital-name">ANTREAN MASUK</h1>
@@ -250,11 +254,13 @@ const statistics = computed(() => {
const updateTime = () => {
const now = new Date()
currentTime.value = now.toLocaleTimeString('id-ID', {
// Format jam dengan titik dua (HH:MM:SS)
const timeString = now.toLocaleTimeString('id-ID', {
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
})
currentTime.value = timeString.replace(/\./g, ':')
currentDate.value = now.toLocaleDateString('id-ID', {
weekday: 'long',
day: 'numeric',
@@ -344,7 +350,7 @@ onUnmounted(() => {
}
.logo-circle {
background: rgba(255, 255, 255, 0.15);
background: rgba(255, 255, 255, 0.95);
width: 80px;
height: 80px;
border-radius: 50%;
@@ -352,6 +358,14 @@ onUnmounted(() => {
align-items: center;
justify-content: center;
backdrop-filter: blur(10px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.header-logo {
width: 64px;
height: 64px;
object-fit: contain;
padding: 4px;
}
.header-text {
pages/Anjungan/AntrianKlinik/[id].vue
+17 -3
View File
@@ -5,7 +5,11 @@
<div class="tv-header">
<div class="tv-header-left">
<div class="hospital-logo">
<v-icon size="56" color="white">mdi-hospital-box</v-icon>
<img
src="/Rumah_Sakit_Umum_Daerah_Dr._Saiful_Anwar.webp"
alt="RSUD Logo"
class="header-logo"
/>
</div>
<div class="header-text">
<h1 class="display-title">ANTRIAN KLINIK</h1>
@@ -321,11 +325,13 @@ const statistics = computed(() => {
const updateTime = () => {
const now = new Date();
currentTime.value = now.toLocaleTimeString("id-ID", {
// Format jam dengan titik dua (HH:MM:SS)
const timeString = now.toLocaleTimeString("id-ID", {
hour: "2-digit",
minute: "2-digit",
second: "2-digit",
});
currentTime.value = timeString.replace(/\./g, ':');
currentDate.value = now.toLocaleDateString("id-ID", {
weekday: "long",
year: "numeric",
@@ -388,12 +394,20 @@ onUnmounted(() => {
}
.hospital-logo {
background: rgba(255, 255, 255, 0.15);
background: rgba(255, 255, 255, 0.95);
border-radius: 16px;
padding: 12px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.header-logo {
width: 64px;
height: 64px;
object-fit: contain;
padding: 4px;
}
.display-title {
pages/Anjungan/AntrianKlinikRuang/[kodeKlinik].vue
+19 -6
View File
@@ -5,13 +5,16 @@
<div class="display-header">
<div class="header-left">
<div class="logo-circle">
<v-icon size="48" color="white">mdi-door-open</v-icon>
<img
src="/Rumah_Sakit_Umum_Daerah_Dr._Saiful_Anwar.webp"
alt="RSUD Logo"
class="header-logo"
>
</div>
<div class="header-text">
<h1 class="hospital-name">ANTRIAN KLINIK RUANG</h1>
<p class="display-subtitle">RSUD dr. Saiful Anwar Provinsi Jawa Timur</p>
<p v-if="klinikData" class="klinik-info">{{ klinikData.namaKlinik }} ({{ klinikData.kodeKlinik }})</p>
</div>
</div>
</div>
<div class="header-right">
<div class="datetime-display">
@@ -354,11 +357,13 @@ const statistics = computed(() => {
const updateTime = () => {
const now = new Date()
currentTime.value = now.toLocaleTimeString('id-ID', {
// Format jam dengan titik dua (HH:MM:SS)
const timeString = now.toLocaleTimeString('id-ID', {
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
})
currentTime.value = timeString.replace(/\./g, ':')
currentDate.value = now.toLocaleDateString('id-ID', {
weekday: 'long',
day: 'numeric',
@@ -604,7 +609,7 @@ watch(anjunganClientId, (newClientId, oldClientId) => {
margin: 0 auto;
box-sizing: border-box;
// Responsive scaling menggunakan CSS variables dan JavaScript
/* Responsive scaling menggunakan CSS variables dan JavaScript */
transform-origin: top center;
--scale-factor: 1;
transform: scale(var(--scale-factor));
@@ -629,7 +634,7 @@ watch(anjunganClientId, (newClientId, oldClientId) => {
}
.logo-circle {
background: rgba(255, 255, 255, 0.15);
background: rgba(255, 255, 255, 0.95);
width: 80px;
height: 80px;
border-radius: 50%;
@@ -637,6 +642,14 @@ watch(anjunganClientId, (newClientId, oldClientId) => {
align-items: center;
justify-content: center;
backdrop-filter: blur(10px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.header-logo {
width: 64px;
height: 64px;
object-fit: contain;
padding: 4px;
}
.hospital-name {
pages/Anjungan/AntrianLoket/[id].vue
+17 -3
View File
@@ -5,7 +5,11 @@
<div class="display-header">
<div class="header-left">
<div class="logo-circle">
<v-icon size="48" color="white">mdi-view-dashboard</v-icon>
<img
src="/Rumah_Sakit_Umum_Daerah_Dr._Saiful_Anwar.webp"
alt="RSUD Logo"
class="header-logo"
/>
</div>
<div class="header-text">
<h1 class="hospital-name">ANTRIAN LOKET</h1>
@@ -838,11 +842,13 @@ const statistics = computed(() => {
const updateTime = () => {
const now = new Date()
currentTime.value = now.toLocaleTimeString('id-ID', {
// Format jam dengan titik dua (HH:MM:SS)
const timeString = now.toLocaleTimeString('id-ID', {
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
})
currentTime.value = timeString.replace(/\./g, ':')
currentDate.value = now.toLocaleDateString('id-ID', {
weekday: 'long',
day: 'numeric',
@@ -902,13 +908,21 @@ onUnmounted(() => {
}
.logo-circle {
background: rgba(255, 255, 255, 0.15);
background: rgba(255, 255, 255, 0.95);
width: 80px;
height: 80px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.header-logo {
width: 64px;
height: 64px;
object-fit: contain;
padding: 4px;
backdrop-filter: blur(10px);
}
pages/Anjungan/AntrianPenunjang.vue
+19 -3
View File
@@ -5,7 +5,11 @@
<div class="display-header">
<div class="header-left">
<div class="logo-circle">
<v-icon size="48" color="white">mdi-clipboard-pulse</v-icon>
<img
src="/Rumah_Sakit_Umum_Daerah_Dr._Saiful_Anwar.webp"
alt="RSUD Logo"
class="header-logo"
/>
</div>
<div class="header-text">
<h1 class="hospital-name">RUMAH SAKIT</h1>
@@ -203,11 +207,13 @@ const statistics = computed(() => {
const updateTime = () => {
const now = new Date()
currentTime.value = now.toLocaleTimeString('id-ID', {
// Format jam dengan titik dua (HH:MM:SS)
const timeString = now.toLocaleTimeString('id-ID', {
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
})
currentTime.value = timeString.replace(/\./g, ':')
currentDate.value = now.toLocaleDateString('id-ID', {
weekday: 'long',
day: 'numeric',
@@ -252,7 +258,7 @@ onUnmounted(() => {
}
.logo-circle {
background: rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.95);
width: 80px;
height: 80px;
border-radius: 50%;
@@ -260,6 +266,16 @@ onUnmounted(() => {
align-items: center;
justify-content: center;
backdrop-filter: blur(10px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.header-logo {
width: 64px;
height: 64px;
object-fit: contain;
padding: 4px;
justify-content: center;
backdrop-filter: blur(10px);
}
.hospital-name {
pages/CheckInPasien/checkIn.vue
+19 -6
View File
@@ -795,7 +795,7 @@
</div>
<div class="text-right">
<p class="text-caption patient-info-label mb-0">Waktu Scan</p>
<p class="text-body-2 patient-info-value mb-0">{{ new Date().toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' }) }}</p>
<p class="text-body-2 patient-info-value mb-0">{{ getCurrentTime() }}</p>
</div>
</div>
</v-card-text>
@@ -1962,7 +1962,7 @@ const saveScannedQRData = (qrData: string) => {
data: qrData,
timestamp: new Date().toISOString(),
date: new Date().toLocaleDateString('id-ID'),
time: new Date().toLocaleTimeString('id-ID')
time: new Date().toLocaleTimeString('id-ID').replace(/\./g, ':')
});
// Simpan maksimal 50 item
@@ -3272,21 +3272,34 @@ const getStatusClass = (status: string) => {
const formatDateTime = (dateString: string) => {
const date = new Date(dateString);
return date.toLocaleTimeString('id-ID', {
// Format jam dengan titik dua (HH:MM:SS)
const timeString = date.toLocaleTimeString('id-ID', {
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
});
return timeString.replace(/\./g, ':');
};
const formatTime = (dateString: string) => {
const date = new Date(dateString);
// Format: HH.MM (menggunakan titik, bukan titik dua)
// Format: HH:MM:SS (menggunakan titik dua)
const timeString = date.toLocaleTimeString('id-ID', {
hour: '2-digit',
minute: '2-digit'
minute: '2-digit',
second: '2-digit'
});
return timeString.replace(':', '.');
return timeString.replace(/\./g, ':');
};
const getCurrentTime = () => {
// Format jam dengan titik dua (HH:MM:SS)
const timeString = new Date().toLocaleTimeString('id-ID', {
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
});
return timeString.replace(/\./g, ':');
};
const formatDate = (dateString: string) => {
stores/klinikruangstore.js
+6 -2
View File
@@ -35,10 +35,14 @@ export const useKlinikRuangStore = defineStore('klinikRuang', () => {
no: 2,
kodeKlinik: 'AS',
namaKlinik: 'ANESTESI',
namaRuang: 'Ruang 1, Ruang 2',
namaRuang: 'Ruang 1, Ruang 2, Ruang 3, Ruang 4, Ruang 5, Ruang 6',
ruangList: [
{ nomorRuang: '1', namaRuang: 'Ruang 1', nomorScreen: '201' },
{ nomorRuang: '2', namaRuang: 'Ruang 2', nomorScreen: '202' }
{ nomorRuang: '2', namaRuang: 'Ruang 2', nomorScreen: '202' },
{ nomorRuang: '3', namaRuang: 'Ruang 3', nomorScreen: '203' },
{ nomorRuang: '4', namaRuang: 'Ruang 4', nomorScreen: '204' },
{ nomorRuang: '5', namaRuang: 'Ruang 5', nomorScreen: '205' },
{ nomorRuang: '6', namaRuang: 'Ruang 6', nomorScreen: '206' }
]
},
{
stores/ruangStore.js
+6 -2
View File
@@ -37,10 +37,14 @@ export const useRuangStore = defineStore('ruang', () => {
no: 2,
kodeKlinik: 'AS',
namaKlinik: 'ANESTESI',
namaRuang: 'Ruang 1, Ruang 2',
namaRuang: 'Ruang 1, Ruang 2, Ruang 3, Ruang 4, Ruang 5, Ruang 6',
ruangList: [
{ nomorRuang: '1', namaRuang: 'Ruang 1', nomorScreen: '201' },
{ nomorRuang: '2', namaRuang: 'Ruang 2', nomorScreen: '202' }
{ nomorRuang: '2', namaRuang: 'Ruang 2', nomorScreen: '202' },
{ nomorRuang: '3', namaRuang: 'Ruang 3', nomorScreen: '203' },
{ nomorRuang: '4', namaRuang: 'Ruang 4', nomorScreen: '204' },
{ nomorRuang: '5', namaRuang: 'Ruang 5', nomorScreen: '205' },
{ nomorRuang: '6', namaRuang: 'Ruang 6', nomorScreen: '206' }
]
},
{