fajri/cpone_dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refine KPI card highlights and demo checkout flow

Browse Source
This commit is contained in:
sas.fajri
2026-04-30 15:48:16 +07:00
parent ea5571e1cb
commit af7e0d3560
3 changed files with 88 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
cpone-dashboard/templates/dashboard/index.html
View File

@@ -154,6 +154,11 @@
#sse-arrivals .arrival-row-updated {
animation: arrivalRowPulse 2.6s ease-out;
}
#sse-kpi .kpi-card-updated {
animation: sseFlash 2.6s ease-out, ssePop 0.9s cubic-bezier(.22,.61,.36,1);
box-shadow: 0 0 0 2px rgba(59, 80, 160, 0.35), 0 10px 22px -14px rgba(59, 80, 160, 0.55);
}
</style>
<!-- SSE wrapper — satu koneksi, semua section dapat update otomatis -->
@@ -383,6 +388,7 @@ function openPatientsModal() {
stations: 'sse-stations',
arrivals: 'sse-arrivals'
};
const kpiSnapshot = new Map();
const stationSnapshot = new Map();
const arrivalSnapshot = new Set();
let audioCtx = null;
@@ -504,6 +510,30 @@ function openPatientsModal() {
return highlighted > 0;
}
function triggerKpiCards(target) {
const cards = target.querySelectorAll('.kpi-card');
if (!cards || !cards.length) return false;
let highlighted = 0;
cards.forEach(function (card) {
const kind = card.dataset.kpiKind || '';
if (kind !== 'inprogress' && kind !== 'checkedout') return;
const value = parseInt(card.dataset.kpiValue || '0', 10);
const prev = kpiSnapshot.has(kind) ? kpiSnapshot.get(kind) : null;
kpiSnapshot.set(kind, value);
if (prev === null || value === prev) return;
highlighted++;
card.classList.remove('kpi-card-updated');
void card.offsetWidth;
card.classList.add('kpi-card-updated');
setTimeout(function () {
card.classList.remove('kpi-card-updated');
}, 2600);
});
return highlighted > 0;
}
function triggerHighlight(target) {
if (!target) return;
const isStations = target.id === 'sse-stations';
@@ -511,6 +541,8 @@ function openPatientsModal() {
if (!isStations) {
if (target.id === 'sse-arrivals') {
didHighlightRows = !!triggerArrivalRows(target);
} else if (target.id === 'sse-kpi') {
didHighlightRows = !!triggerKpiCards(target);
} else {
target.classList.remove('sse-updated');
void target.offsetWidth;

4
cpone-dashboard/templates/dashboard/partials/kpi.html
View File

@@ -16,7 +16,7 @@
</article>
<!-- Checked In -->
<article class="card border-l-4 border-l-brand-500 p-4">
<article class="kpi-card kpi-card-inprogress card border-l-4 border-l-brand-500 p-4" data-kpi-kind="inprogress" data-kpi-value="{{.CheckedIn}}">
<div class="flex items-start justify-between">
<p class="text-xs font-semibold uppercase tracking-widest text-slate-400">In Progress</p>
<svg class="h-4 w-4 text-brand-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
@@ -28,7 +28,7 @@
</article>
<!-- Checked Out -->
<article class="card border-l-4 border-l-emerald-500 p-4">
<article class="kpi-card kpi-card-checkedout card border-l-4 border-l-emerald-500 p-4" data-kpi-kind="checkedout" data-kpi-value="{{.CheckedOut}}">
<div class="flex items-start justify-between">
<p class="text-xs font-semibold uppercase tracking-widest text-slate-400">Checked Out</p>
<svg class="h-4 w-4 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">