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

update display

Browse Source
This commit is contained in:
Fanrouver
2026-02-06 10:05:26 +07:00
parent 5d139c8f4a
commit 93874d16bb
6 changed files with 154 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

pages/Anjungan/AntreanMasuk/[id].vue
+3
View File
@@ -756,6 +756,7 @@ onUnmounted(() => {
letter-spacing: 1px;
line-height: 1;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
font-variant-numeric: tabular-nums; /* Prevent digit shifting */
}
.date-small {
@@ -941,6 +942,7 @@ onUnmounted(() => {
white-space: nowrap;
width: 100%;
overflow: visible; /* Don't hide/ellipsis, let it fit via clamp font-size */
font-variant-numeric: tabular-nums; /* Stable digits */
}
.ticket-klinik {
@@ -1099,6 +1101,7 @@ onUnmounted(() => {
height: auto;
display: flex;
align-items: center;
font-variant-numeric: tabular-nums; /* Stable digits */
}
.stat-label {
pages/Anjungan/AntrianKlinik/[id].vue
+6
View File
@@ -450,6 +450,7 @@ onUnmounted(() => {
color: var(--color-neutral-100);
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
letter-spacing: 2px;
font-variant-numeric: tabular-nums; /* Prevent digit shifting */
}
.current-date {
@@ -508,6 +509,7 @@ onUnmounted(() => {
margin: 16px 0;
text-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
letter-spacing: 8px;
font-variant-numeric: tabular-nums; /* Stable digits */
}
.hero-clinic {
@@ -620,6 +622,7 @@ onUnmounted(() => {
line-height: 1;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
letter-spacing: 4px;
font-variant-numeric: tabular-nums; /* Stable digits */
}
.queue-number-large.queue-pending {
@@ -658,6 +661,7 @@ onUnmounted(() => {
box-shadow: 0 2px 8px rgba(6, 99, 199, 0.25);
min-width: 60px;
text-align: center;
font-variant-numeric: tabular-nums; /* Stable digits */
}
.next-number-badge.badge-pending {
@@ -714,6 +718,7 @@ onUnmounted(() => {
min-width: 60px;
text-align: center;
animation: pending-badge-pulse 2s ease-in-out infinite;
font-variant-numeric: tabular-nums; /* Stable digits */
}
@keyframes pending-badge-pulse {
@@ -762,6 +767,7 @@ onUnmounted(() => {
line-height: 1;
color: var(--color-neutral-100);
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
font-variant-numeric: tabular-nums; /* Stable digits */
}
.stat-label {
pages/Anjungan/AntrianKlinikRuang/[kodeKlinik].vue
+71 -22
View File
@@ -27,14 +27,18 @@
</div>
<!-- Hero Call Section -->
<div v-if="currentCalledQueue" class="hero-call-section" :class="{ 'is-compact': isCompact }">
<div class="call-label">
<v-icon :size="isCompact ? 24 : 32" color="white" class="mr-2">mdi-bullhorn</v-icon>
NOMOR ANTRIAN YANG DIPANGGIL
<Transition name="hero-fade">
<div v-if="currentCalledQueue" class="hero-call-section" :class="{ 'is-compact': isCompact }">
<div class="call-label">
<v-icon :size="isCompact ? 24 : 32" color="white" class="mr-2">mdi-bullhorn</v-icon>
NOMOR ANTRIAN YANG DIPANGGIL
</div>
<div class="call-number">{{ currentCalledQueue.noAntrian.split(' |')[0] }}</div>
<div class="call-clinic">
{{ currentCalledQueue.klinik === currentCalledQueue.ruang ? currentCalledQueue.ruang : `${currentCalledQueue.klinik} - ${currentCalledQueue.ruang}` }}
</div>
</div>
<div class="call-number">{{ currentCalledQueue.noAntrian.split(' |')[0] }}</div>
<div class="call-clinic">{{ currentCalledQueue.klinik }} - {{ currentCalledQueue.ruang }}</div>
</div>
</Transition>
<!-- Main Grid - Display Ruang -->
<div class="clinics-grid" :style="gridStyle" :class="{ 'is-compact': isCompact }">
@@ -46,7 +50,9 @@
>
<!-- Clinic Header -->
<div class="clinic-header-bar">
<span class="clinic-title">{{ ruang.namaKlinik }} - {{ ruang.namaRuang }}</span>
<span class="clinic-title">
{{ ruang.namaKlinik === ruang.namaRuang ? ruang.namaRuang : `${ruang.namaKlinik} - ${ruang.namaRuang}` }}
</span>
<v-chip :size="isCompact ? 'x-small' : 'small'" class="clinic-count">
<v-icon :size="isCompact ? 14 : 16" color="white" class="mr-1">mdi-account-multiple</v-icon>
<span class="count-text">{{ ruang.totalQueues }}</span>
@@ -110,7 +116,7 @@
<v-icon size="32" color="primary-600">mdi-clock-alert-outline</v-icon>
</div>
<div class="stat-info">
<div class="stat-value">{{ statistics.waiting }}</div>
<div class="stat-value">{{ statistics.anjungan }}</div>
<div class="stat-label">Menunggu</div>
</div>
</div>
@@ -640,7 +646,7 @@ watch(anjunganClientId, (newClientId, oldClientId) => {
background: var(--color-neutral-300);
width: 100vw;
height: 100dvh;
padding: 12px;
padding: 16px; /* Match AntrianLoket */
font-family: 'Inter', 'Roboto', sans-serif;
overflow: hidden;
display: flex;
@@ -654,8 +660,8 @@ watch(anjunganClientId, (newClientId, oldClientId) => {
justify-content: space-between;
align-items: center;
background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-700) 100%);
border-radius: 16px;
padding: 12px 32px;
border-radius: 12px;
padding: clamp(12px, 1.2vw, 18px) clamp(16px, 2vw, 24px); /* Match AntrianLoket */
margin-bottom: 12px;
box-shadow: 0 8px 24px rgba(33, 150, 243, 0.3);
flex-shrink: 0;
@@ -715,6 +721,7 @@ watch(anjunganClientId, (newClientId, oldClientId) => {
letter-spacing: 2px;
line-height: 1;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
font-variant-numeric: tabular-nums; /* Prevent digit shifting */
}
.date-small {
@@ -729,12 +736,15 @@ watch(anjunganClientId, (newClientId, oldClientId) => {
.hero-call-section {
background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-700) 100%);
border-radius: 20px;
padding: 24px 32px;
margin-bottom: 12px;
padding: clamp(16px, 2vh, 32px);
margin-bottom: clamp(8px, 1.2vh, 16px);
text-align: center;
box-shadow: 0 12px 32px rgba(33, 150, 243, 0.35);
animation: pulse-highlight 2s ease-in-out infinite;
flex-shrink: 0;
max-height: 40vh;
overflow: hidden;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.hero-call-section.is-compact {
@@ -769,32 +779,68 @@ watch(anjunganClientId, (newClientId, oldClientId) => {
}
.call-number {
font-size: 140px;
font-size: clamp(60px, 14vh, 140px);
font-weight: 900;
color: var(--color-neutral-100);
margin: 16px 0;
letter-spacing: 8px;
margin: clamp(8px, 1vh, 16px) 0;
letter-spacing: clamp(4px, 1vw, 8px);
line-height: 1;
text-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
animation: number-pulse 1.5s ease-in-out infinite;
font-variant-numeric: tabular-nums; /* Stable digits */
}
.call-clinic {
font-size: 36px;
font-size: clamp(20px, 2.5vh, 36px);
font-weight: 700;
color: var(--color-neutral-100);
letter-spacing: 1px;
}
/* Transition for Hero Section */
.hero-fade-enter-active,
.hero-fade-leave-active {
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
max-height: 40vh;
opacity: 1;
margin-bottom: clamp(8px, 1.2vh, 16px);
}
.hero-fade-enter-from,
.hero-fade-leave-to {
max-height: 0;
opacity: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
transform: translateY(-20px);
}
/* ========== CLINICS GRID ========== */
.clinics-grid {
display: grid;
/* grid-template-columns set via inline style */
gap: 16px;
margin-bottom: 16px;
gap: clamp(8px, 1.2vw, 16px);
margin-bottom: clamp(12px, 1.5vh, 20px);
flex: 1;
min-height: 0;
overflow: hidden;
overflow-y: auto;
padding: 0; /* Remove asymmetric padding to match AntrianLoket */
/* Custom scrollbar for premium look */
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-track {
background: transparent;
}
&::-webkit-scrollbar-thumb {
background: rgba(33, 150, 243, 0.3);
border-radius: 10px;
}
&::-webkit-scrollbar-thumb:hover {
background: rgba(33, 150, 243, 0.5);
}
}
.clinics-grid.is-compact {
@@ -809,6 +855,7 @@ watch(anjunganClientId, (newClientId, oldClientId) => {
box-shadow: 0 4px 12px rgba(33, 150, 243, 0.12);
display: flex;
flex-direction: column;
min-height: 200px; /* Prevent shrinking too much */
}
.clinic-box.is-compact {
@@ -948,6 +995,7 @@ watch(anjunganClientId, (newClientId, oldClientId) => {
letter-spacing: 4px;
line-height: 1;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
font-variant-numeric: tabular-nums; /* Stable digits */
}
.clinic-box.is-compact .current-number {
@@ -960,7 +1008,7 @@ watch(anjunganClientId, (newClientId, oldClientId) => {
background: var(--color-neutral-100);
border: 2px solid var(--color-primary-200);
border-radius: 16px;
padding: 12px 40px;
padding: clamp(10px, 1.2vw, 16px) clamp(16px, 2.5vw, 40px); /* Responsive padding */
display: flex;
align-items: center;
gap: 32px;
@@ -999,6 +1047,7 @@ watch(anjunganClientId, (newClientId, oldClientId) => {
color: var(--color-neutral-900);
line-height: 1;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
font-variant-numeric: tabular-nums; /* Stable digits */
}
.stat-label {
pages/Anjungan/AntrianKlinikRuang/index.vue
+17 -12
View File
@@ -226,40 +226,44 @@ onMounted(async () => {
.kliniks-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 20px;
grid-template-columns: repeat(auto-fill, minmax(clamp(300px, 20vw, 400px), 1fr));
gap: clamp(16px, 2vw, 24px);
width: 100%;
margin: 0;
align-items: stretch;
}
@media (max-width: 1280px) {
@media (max-width: 1440px) {
.kliniks-grid {
grid-template-columns: repeat(3, 1fr);
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
}
@media (max-width: 960px) {
@media (max-width: 1024px) {
.kliniks-grid {
grid-template-columns: repeat(2, 1fr);
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
}
.klinik-card {
background: var(--color-neutral-100);
border-radius: 16px;
padding: 24px;
border-radius: 20px;
padding: clamp(16px, 2vw, 24px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
border: 2px solid var(--color-neutral-400);
cursor: pointer;
transition: all 0.3s ease;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
flex-direction: column;
gap: 16px;
min-height: 280px; /* Ensure enough height for content */
height: 100%;
&:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(33, 150, 243, 0.2);
transform: translateY(-8px);
box-shadow: 0 12px 24px rgba(33, 150, 243, 0.2);
border-color: var(--color-primary-600);
z-index: 2;
}
}
@@ -267,8 +271,9 @@ onMounted(async () => {
display: flex;
align-items: center;
gap: 16px;
padding-bottom: 16px;
padding-bottom: clamp(12px, 1.5vw, 16px);
border-bottom: 2px solid var(--color-neutral-400);
flex-shrink: 0;
}
.klinik-info {
pages/Anjungan/AntrianLoket/[id].vue
+52 -22
View File
@@ -29,21 +29,22 @@
</div>
<!-- Hero Call Section - Large with multiple calls on the side -->
<div class="hero-main-section">
<div v-if="currentCalledQueue" class="hero-call-section">
<div class="call-label">
<v-icon size="32" color="white" class="mr-2">mdi-bullhorn</v-icon>
SEDANG DIPANGGIL
</div>
<div class="call-number">{{ currentCalledQueue.noAntrian.split(' |')[0] }}</div>
<div class="call-klinik">{{ currentCalledQueue.klinik || 'Klinik' }}</div>
<div v-if="currentMultipleCallsTimer" class="call-timer-main">
<v-icon size="20" color="white">mdi-timer</v-icon>
<span>{{ currentMultipleCallsTimer }}</span>
<Transition name="hero-fade">
<div v-if="currentCalledQueue" class="hero-main-section">
<div class="hero-call-section">
<div class="call-label">
<v-icon size="32" color="white" class="mr-2">mdi-bullhorn</v-icon>
SEDANG DIPANGGIL
</div>
<div class="call-number">{{ currentCalledQueue.noAntrian.split(' |')[0] }}</div>
<div class="call-klinik">{{ currentCalledQueue.klinik || 'Klinik' }}</div>
<div v-if="currentMultipleCallsTimer" class="call-timer-main">
<v-icon size="20" color="white">mdi-timer</v-icon>
<span>{{ currentMultipleCallsTimer }}</span>
</div>
</div>
</div>
</div>
</Transition>
<!-- Next 5 Tickets to be Called -->
<div v-if="nextTicketsToCall && nextTicketsToCall.length > 0" class="next-tickets-section">
@@ -1100,6 +1101,7 @@ onUnmounted(() => {
letter-spacing: 1.5px;
line-height: 1;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
font-variant-numeric: tabular-nums; /* Prevent digit shifting */
}
.date-small {
@@ -1114,9 +1116,12 @@ onUnmounted(() => {
.hero-main-section {
display: flex;
gap: 16px;
margin: clamp(10px, 1.5vh, 20px) 0;
margin: clamp(8px, 1.2vh, 16px) 0;
align-items: flex-start;
flex-shrink: 0;
overflow: hidden;
max-height: 40vh; /* Limit hero size to prevent pushing grid too far */
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ========== HERO CALL SECTION (LARGE) ========== */
@@ -1143,18 +1148,18 @@ onUnmounted(() => {
}
.call-number {
font-size: 140px;
font-size: clamp(60px, 14vh, 140px);
font-weight: 900;
color: var(--color-neutral-100);
margin: 16px 0;
letter-spacing: 8px;
margin: clamp(8px, 1vh, 16px) 0;
letter-spacing: clamp(4px, 1vw, 8px);
line-height: 1;
text-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
animation: number-pulse 1.5s ease-in-out infinite;
}
.call-klinik {
font-size: 36px;
font-size: clamp(24px, 2.5vh, 36px);
font-weight: 700;
color: var(--color-neutral-100);
letter-spacing: 1px;
@@ -1173,6 +1178,7 @@ onUnmounted(() => {
background: rgba(255, 255, 255, 0.15);
border-radius: 12px;
backdrop-filter: blur(10px);
font-variant-numeric: tabular-nums; /* Stable timer digits */
}
/* ========== NEXT TICKETS SECTION ========== */
@@ -1263,6 +1269,7 @@ onUnmounted(() => {
letter-spacing: 2px;
margin-bottom: 8px;
line-height: 1;
font-variant-numeric: tabular-nums; /* Stable ticket numbers */
}
.next-ticket-klinik {
@@ -1288,6 +1295,7 @@ onUnmounted(() => {
font-weight: 700;
color: var(--color-warning-700);
margin-top: 6px;
font-variant-numeric: tabular-nums; /* Stable timer digits */
}
@@ -1313,11 +1321,11 @@ onUnmounted(() => {
}
.call-number {
font-size: 140px;
font-size: clamp(60px, 14vh, 140px);
font-weight: 900;
color: var(--color-neutral-100);
margin: 16px 0;
letter-spacing: 8px;
margin: clamp(8px, 1vh, 16px) 0;
letter-spacing: clamp(4px, 1vw, 8px);
line-height: 1;
text-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
animation: number-pulse 1.5s ease-in-out infinite;
@@ -1333,12 +1341,30 @@ onUnmounted(() => {
}
.call-loket {
font-size: 36px;
font-size: clamp(24px, 2.5vh, 36px);
font-weight: 700;
color: var(--color-neutral-100);
letter-spacing: 1px;
}
/* Transition for Hero Section */
.hero-fade-enter-active,
.hero-fade-leave-active {
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
max-height: 40vh;
opacity: 1;
margin: clamp(8px, 1.2vh, 16px) 0;
}
.hero-fade-enter-from,
.hero-fade-leave-to {
max-height: 0;
opacity: 0;
margin-top: 0;
margin-bottom: 0;
transform: translateY(-20px);
}
/* ========== KLINIKS GRID ========== */
.kliniks-grid {
display: grid;
@@ -1436,6 +1462,7 @@ onUnmounted(() => {
line-height: 1;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
font-variant-numeric: tabular-nums; /* Stable digits */
&.highlight-called {
color: var(--color-danger-600);
@@ -1475,6 +1502,7 @@ onUnmounted(() => {
color: var(--color-warning-800);
transition: all 0.3s ease;
white-space: nowrap;
font-variant-numeric: tabular-nums; /* Stable digits */
&.highlight-called {
border-color: var(--color-danger-500);
@@ -1592,6 +1620,7 @@ onUnmounted(() => {
line-height: 1;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
font-variant-numeric: tabular-nums; /* Stable digits */
&.highlight-called {
color: var(--color-danger-600);
@@ -1674,6 +1703,7 @@ onUnmounted(() => {
color: var(--color-neutral-900);
line-height: 1;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
font-variant-numeric: tabular-nums; /* Stable digits */
}
.stat-label {
pages/Anjungan/AntrianPenunjang.vue
+5
View File
@@ -304,6 +304,7 @@ onUnmounted(() => {
color: #FFFFFF;
line-height: 1;
letter-spacing: 2px;
font-variant-numeric: tabular-nums; /* Prevent digit shifting */
}
.date-small {
@@ -343,6 +344,7 @@ onUnmounted(() => {
margin: 16px 0;
letter-spacing: 4px;
text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
font-variant-numeric: tabular-nums; /* Stable digits */
}
.call-clinic {
@@ -436,6 +438,7 @@ onUnmounted(() => {
color: #212121;
line-height: 1;
letter-spacing: 2px;
font-variant-numeric: tabular-nums; /* Stable digits */
}
.next-section {
@@ -466,6 +469,7 @@ onUnmounted(() => {
font-weight: 700;
box-shadow: 0 4px 12px rgba(156, 39, 176, 0.2);
letter-spacing: 1px;
font-variant-numeric: tabular-nums; /* Stable digits */
}
.empty-state {
@@ -511,6 +515,7 @@ onUnmounted(() => {
font-weight: 900;
color: #212121;
line-height: 1;
font-variant-numeric: tabular-nums; /* Stable digits */
}
.stat-label {