Refine KPI card highlights and demo checkout flow

cpone-dashboard/templates/dashboard/index.html

@@ -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;