Initial commit: Retribusi frontend dengan dashboard, event logs, dan settings

2025-12-18 11:21:40 +07:00
commit b3573ed390
35 changed files with 7368 additions and 0 deletions
--- a/public/dashboard/js/README_CONFIG.md
+++ b/public/dashboard/js/README_CONFIG.md
@@ -0,0 +1,80 @@
+# Konfigurasi API Base URL
+
+## Lokasi File
+- **Config**: `public/dashboard/js/config.js`
+- **Digunakan oleh**: `api.js`, `realtime.js`
+
+## Cara Kerja
+
+File `config.js` akan auto-detect environment berdasarkan hostname:
+
+### Development Lokal
+- Jika hostname = `localhost`, `127.0.0.1`, atau IP lokal (`192.168.x.x`)
+- Base URL default: `http://localhost/api-btekno/public`
+- **Sesuaikan** dengan path API backend di Laragon/XAMPP Anda
+
+### Production
+- Jika hostname bukan localhost
+- Base URL: `https://api.btekno.cloud`
+
+## Cara Mengubah Base URL
+
+### Opsi 1: Edit `config.js` (Recommended)
+Edit file `public/dashboard/js/config.js`:
+
+```javascript
+function getApiBaseUrl() {
+  const hostname = window.location.hostname;
+  
+  // Development lokal
+  if (hostname === 'localhost' || hostname === '127.0.0.1') {
+    // GANTI INI sesuai path API backend Anda
+    return 'http://localhost/api-btekno/public';
+    // Atau jika pakai virtual host:
+    // return 'http://api.retribusi.test';
+  }
+  
+  // Production
+  return 'https://api.btekno.cloud';
+}
+```
+
+### Opsi 2: Hardcode (Tidak Recommended)
+Jika ingin hardcode, edit langsung di `config.js`:
+
+```javascript
+export const API_CONFIG = {
+  BASE_URL: 'http://localhost/api-btekno/public', // Ganti ini
+  API_KEY: 'POKOKEIKISEKOYOLO',
+  TIMEOUT: 30000
+};
+```
+
+## Contoh Path API Backend
+
+### Laragon
+- Jika API di: `C:\laragon\www\RETRIBUSI_BAPENDA\api-btekno\public`
+- Base URL: `http://localhost/api-btekno/public`
+- Atau buat virtual host: `http://api.retribusi.test`
+
+### XAMPP
+- Jika API di: `C:\xampp\htdocs\api-btekno\public`
+- Base URL: `http://localhost/api-btekno/public`
+
+### Production
+- Base URL: `https://api.btekno.cloud`
+
+## API Key
+
+API Key juga bisa diubah di `config.js`:
+```javascript
+API_KEY: 'POKOKEIKISEKOYOLO' // Sesuaikan dengan RETRIBUSI_API_KEY di backend .env
+```
+
+## Debugging
+
+Untuk melihat Base URL yang digunakan, buka browser console. Akan muncul log:
+```
+API Base URL: http://localhost/api-btekno/public
+```
+
--- a/public/dashboard/js/api.js
+++ b/public/dashboard/js/api.js
@@ -0,0 +1,176 @@
+// public/dashboard/js/api.js
+// Centralized REST API client for Btekno Retribusi Admin Dashboard
+
+import { API_CONFIG } from './config.js';
+
+// Export API_CONFIG untuk digunakan di file lain
+export { API_CONFIG };
+
+const API_BASE_URL = API_CONFIG.BASE_URL;
+
+function getToken() {
+  return localStorage.getItem('token') || '';
+}
+
+async function apiRequest(path, options = {}) {
+  const url = path.startsWith('http') ? path : `${API_BASE_URL}${path}`;
+
+  const headers = {
+    'Content-Type': 'application/json',
+    // X-API-KEY dari konfigurasi backend (RETRIBUSI_API_KEY)
+    'X-API-KEY': API_CONFIG.API_KEY,
+    ...(options.headers || {})
+  };
+
+  const token = getToken();
+  if (token) {
+    headers['Authorization'] = `Bearer ${token}`;
+  }
+
+  const config = {
+    method: options.method || 'GET',
+    headers,
+    body: options.body ? JSON.stringify(options.body) : null
+  };
+
+  try {
+    const res = await fetch(url, config);
+
+    if (res.status === 401) {
+      // Unauthorized → clear token & redirect to login
+      localStorage.removeItem('token');
+      localStorage.removeItem('user');
+      window.location.href = '../index.php';
+      throw new Error('Unauthorized');
+    }
+
+    const text = await res.text();
+    let json;
+    try {
+      json = text ? JSON.parse(text) : {};
+    } catch (e) {
+      json = { raw: text };
+    }
+
+    if (!res.ok) {
+      const msg = json.message || json.error || `HTTP ${res.status}`;
+      throw new Error(msg);
+    }
+
+    // Some endpoints might wrap data as { success, data, ... }
+    if (json && Object.prototype.hasOwnProperty.call(json, 'success') &&
+        Object.prototype.hasOwnProperty.call(json, 'data')) {
+      return json.data;
+    }
+
+    return json;
+  } catch (err) {
+    console.error('API error', { url, error: err });
+    throw err;
+  }
+}
+
+// Helper untuk build query string dari object params
+function buildQuery(params = {}) {
+  const search = new URLSearchParams();
+  Object.entries(params).forEach(([key, value]) => {
+    if (value !== undefined && value !== null && value !== '') {
+      search.append(key, value);
+    }
+  });
+  const qs = search.toString();
+  return qs ? `?${qs}` : '';
+}
+
+// Typed helpers
+
+export async function apiLogin(username, password) {
+  return apiRequest('/auth/v1/login', {
+    method: 'POST',
+    body: { username, password }
+  });
+}
+
+export async function apiGetLocations(params = {}) {
+  // Handle pagination: { page, limit }
+  const qs = buildQuery(params);
+  return apiRequest(`/retribusi/v1/frontend/locations${qs}`);
+}
+
+export async function apiGetGates(locationCode, params = {}) {
+  // Handle pagination: { page, limit, location_code }
+  const queryParams = { ...params };
+  if (locationCode) queryParams.location_code = locationCode;
+  const qs = buildQuery(queryParams);
+  return apiRequest(`/retribusi/v1/frontend/gates${qs}`);
+}
+
+export async function apiGetSummary({ date, locationCode, gateCode }) {
+  const qs = buildQuery({
+    date,
+    location_code: locationCode,
+    gate_code: gateCode
+  });
+  return apiRequest(`/retribusi/v1/dashboard/summary${qs}`);
+}
+
+export async function apiGetDaily({ startDate, endDate, locationCode }) {
+  const qs = buildQuery({
+    start_date: startDate,
+    end_date: endDate,
+    location_code: locationCode
+  });
+  return apiRequest(`/retribusi/v1/dashboard/daily${qs}`);
+}
+
+export async function apiGetByCategory({ date, locationCode, gateCode }) {
+  const qs = buildQuery({
+    date,
+    location_code: locationCode,
+    gate_code: gateCode
+  });
+  return apiRequest(`/retribusi/v1/dashboard/by-category${qs}`);
+}
+
+// Ringkasan global harian (daily_summary)
+export async function apiGetSummaryDaily(params = {}) {
+  const qs = buildQuery(params);
+  return apiRequest(`/retribusi/v1/summary/daily${qs}`);
+}
+
+// Ringkasan per jam (hourly_summary)
+export async function apiGetSummaryHourly(params = {}) {
+  const qs = buildQuery(params);
+  return apiRequest(`/retribusi/v1/summary/hourly${qs}`);
+}
+
+// Snapshot realtime (untuk panel live / TV wall)
+export async function apiGetRealtimeSnapshot(params = {}) {
+  const qs = buildQuery(params);
+  return apiRequest(`/retribusi/v1/realtime/snapshot${qs}`);
+}
+
+// Entry events list (raw events dari mesin YOLO)
+// GET /retribusi/v1/frontend/entry-events
+// Parameters: page, limit, location_code, gate_code, category, start_date, end_date
+export async function apiGetEntryEvents(params = {}) {
+  const qs = buildQuery(params);
+  return apiRequest(`/retribusi/v1/frontend/entry-events${qs}`);
+}
+
+// Realtime events list (history untuk SSE)
+// GET /retribusi/v1/realtime/events
+// Parameters: page, limit, location_code, gate_code, category, start_date, end_date
+export async function apiGetRealtimeEvents(params = {}) {
+  const qs = buildQuery(params);
+  return apiRequest(`/retribusi/v1/realtime/events${qs}`);
+}
+
+// Alias untuk backward compatibility
+export async function apiGetEvents(params = {}) {
+  return apiGetEntryEvents(params);
+}
+
+// Catatan: realtime SSE /retribusi/v1/realtime/stream akan diakses langsung via EventSource,
+// bukan lewat fetch/apiRequest karena menggunakan Server-Sent Events (SSE).
+
--- a/public/dashboard/js/auth.js
+++ b/public/dashboard/js/auth.js
@@ -0,0 +1,86 @@
+// public/dashboard/js/auth.js
+// Handles login flow and auth helpers (JWT in localStorage)
+
+import { apiLogin } from './api.js';
+
+const TOKEN_KEY = 'token';
+const USER_KEY = 'user';
+
+export const Auth = {
+  isAuthenticated() {
+    return !!localStorage.getItem(TOKEN_KEY);
+  },
+
+  saveToken(token) {
+    localStorage.setItem(TOKEN_KEY, token);
+  },
+
+  saveUser(user) {
+    localStorage.setItem(USER_KEY, JSON.stringify(user || {}));
+  },
+
+  logout() {
+    localStorage.removeItem(TOKEN_KEY);
+    localStorage.removeItem(USER_KEY);
+    window.location.href = '../index.php';
+  }
+};
+
+async function handleLoginSubmit(event) {
+  event.preventDefault();
+
+  const form = event.currentTarget;
+  const usernameInput = form.querySelector('#username');
+  const passwordInput = form.querySelector('#password');
+  const errorBox = document.getElementById('login-error');
+  const submitBtn = form.querySelector('button[type="submit"]');
+
+  if (errorBox) {
+    errorBox.classList.remove('visible');
+    errorBox.textContent = '';
+  }
+
+  submitBtn.disabled = true;
+  submitBtn.textContent = 'Masuk...';
+
+  try {
+    const username = usernameInput.value.trim();
+    const password = passwordInput.value;
+
+    const data = await apiLogin(username, password);
+    const token = data.token;
+    const user = data.user;
+
+    if (!token) {
+      throw new Error('Token tidak ditemukan dalam response login.');
+    }
+
+    Auth.saveToken(token);
+    Auth.saveUser(user);
+
+    window.location.href = 'dashboard.html';
+  } catch (err) {
+    console.error('Login failed', err);
+    if (errorBox) {
+      errorBox.textContent = err.message || 'Login gagal. Silakan coba lagi.';
+      errorBox.classList.add('visible');
+    }
+  } finally {
+    submitBtn.disabled = false;
+    submitBtn.textContent = 'Login';
+  }
+}
+
+// Attach events on login page only
+document.addEventListener('DOMContentLoaded', () => {
+  const form = document.getElementById('login-form');
+  if (form) {
+    if (Auth.isAuthenticated()) {
+      window.location.href = 'dashboard.html';
+      return;
+    }
+    form.addEventListener('submit', handleLoginSubmit);
+  }
+});
+
+
--- a/public/dashboard/js/charts.js
+++ b/public/dashboard/js/charts.js
@@ -0,0 +1,193 @@
+// public/dashboard/js/charts.js
+// Chart.js helpers: create & update charts without recreating canvases.
+
+let dailyLineChart = null;
+let categoryChart = null;
+
+// Export chart instances untuk akses dari dashboard.js
+export function getDailyChart() {
+  return dailyLineChart;
+}
+
+export function getCategoryChart() {
+  return categoryChart;
+}
+
+export function initDailyChart(ctx) {
+  if (dailyLineChart) return dailyLineChart;
+
+  dailyLineChart = new Chart(ctx, {
+    type: 'line',
+    data: {
+      labels: [],
+      datasets: [
+        {
+          label: 'Jumlah',
+          data: [],
+          borderColor: '#111827',
+          backgroundColor: 'rgba(17, 24, 39, 0.06)',
+          borderWidth: 2,
+          tension: 0.35,
+          fill: true,
+          pointRadius: 2.5,
+          pointBackgroundColor: '#111827'
+        },
+        {
+          label: 'Pendapatan',
+          data: [],
+          borderColor: '#6b7280',
+          backgroundColor: 'rgba(156, 163, 175, 0.08)',
+          borderWidth: 2,
+          tension: 0.35,
+          fill: true,
+          pointRadius: 2.5,
+          pointBackgroundColor: '#6b7280',
+          yAxisID: 'y1'
+        }
+      ]
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      interaction: {
+        mode: 'index',
+        intersect: false
+      },
+      scales: {
+        y: {
+          beginAtZero: true,
+          grid: { color: '#e5e7eb' },
+          ticks: { font: { size: 11 } }
+        },
+        y1: {
+          beginAtZero: true,
+          position: 'right',
+          grid: { drawOnChartArea: false },
+          ticks: {
+            font: { size: 11 },
+            callback: value => 'Rp ' + new Intl.NumberFormat('id-ID').format(value)
+          }
+        },
+        x: {
+          grid: { display: false },
+          ticks: { font: { size: 11 } }
+        }
+      },
+      plugins: {
+        legend: {
+          position: 'bottom',
+          labels: {
+            boxWidth: 14,
+            boxHeight: 4
+          }
+        }
+      }
+    }
+  });
+
+  return dailyLineChart;
+}
+
+export function updateDailyChart({ labels, counts, amounts }) {
+  if (!dailyLineChart) {
+    console.warn('[Charts] Daily chart belum di-init, skip update');
+    // Try to init if canvas exists
+    const canvas = document.getElementById('daily-chart');
+    if (canvas) {
+      console.log('[Charts] Attempting to init daily chart from update function...');
+      initDailyChart(canvas.getContext('2d'));
+    } else {
+      console.error('[Charts] Daily chart canvas not found!');
+      return;
+    }
+  }
+  
+  if (!dailyLineChart) {
+    console.error('[Charts] Failed to init daily chart');
+    return;
+  }
+  
+  dailyLineChart.data.labels = labels || [];
+  dailyLineChart.data.datasets[0].data = counts || [];
+  dailyLineChart.data.datasets[1].data = amounts || [];
+  dailyLineChart.update();
+  console.log('[Charts] Daily chart updated:', { labelsCount: labels?.length, countsCount: counts?.length, amountsCount: amounts?.length });
+}
+
+export function initCategoryChart(ctx) {
+  if (categoryChart) return categoryChart;
+
+  categoryChart = new Chart(ctx, {
+    type: 'doughnut',
+    data: {
+      labels: [],
+      datasets: [
+        {
+          label: 'Per Kategori',
+          data: [],
+          backgroundColor: ['#111827', '#4b5563', '#9ca3af'],
+          borderWidth: 0
+        }
+      ]
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      cutout: '60%',
+      plugins: {
+        legend: {
+          position: 'bottom',
+          labels: {
+            boxWidth: 14,
+            boxHeight: 6
+          }
+        }
+      }
+    }
+  });
+
+  return categoryChart;
+}
+
+export function updateCategoryChart({ labels, values }) {
+  if (!categoryChart) {
+    console.warn('[Charts] Category chart belum di-init, skip update');
+    // Try to init if canvas exists
+    const canvas = document.getElementById('category-chart');
+    if (canvas) {
+      console.log('[Charts] Attempting to init category chart from update function...');
+      initCategoryChart(canvas.getContext('2d'));
+    } else {
+      console.error('[Charts] Category chart canvas not found!');
+      return;
+    }
+  }
+  
+  if (!categoryChart) {
+    console.error('[Charts] Failed to init category chart');
+    return;
+  }
+  
+  // Pastikan labels dan values tidak kosong
+  const finalLabels = labels && labels.length > 0 ? labels : ['Orang', 'Motor', 'Mobil'];
+  const finalValues = values && values.length > 0 ? values : [0, 0, 0];
+  
+  // Pastikan length sama
+  const minLength = Math.min(finalLabels.length, finalValues.length);
+  const safeLabels = finalLabels.slice(0, minLength);
+  const safeValues = finalValues.slice(0, minLength);
+  
+  categoryChart.data.labels = safeLabels;
+  categoryChart.data.datasets[0].data = safeValues;
+  
+  // Update chart dengan mode 'none' untuk animasi halus
+  categoryChart.update('none');
+  
+  console.log('[Charts] Category chart updated:', { 
+    labels: safeLabels, 
+    values: safeValues,
+    total: safeValues.reduce((a, b) => a + b, 0)
+  });
+}
+
+
--- a/public/dashboard/js/config.js
+++ b/public/dashboard/js/config.js
@@ -0,0 +1,38 @@
+// public/dashboard/js/config.js
+// Konfigurasi API Base URL untuk frontend
+
+// Auto-detect environment berdasarkan hostname
+function getApiBaseUrl() {
+  const hostname = window.location.hostname;
+  
+  // Development lokal (Laragon/XAMPP)
+  if (hostname === 'localhost' || hostname === '127.0.0.1' || hostname.startsWith('192.168.')) {
+    // Untuk PHP built-in server (port 8000)
+    // return 'http://localhost:8000';
+    
+    // Untuk Laragon/Apache (path-based)
+    // return 'http://localhost/api-btekno/public';
+    
+    // Untuk Laragon virtual host
+    // return 'http://api.retribusi.test';
+    
+    // Default: PHP built-in server
+    return 'http://localhost:8000';
+  }
+  
+  // Production
+  return 'https://api.btekno.cloud';
+}
+
+// Export config
+export const API_CONFIG = {
+  BASE_URL: getApiBaseUrl(),
+  API_KEY: 'POKOKEIKISEKOYOLO', // Sesuaikan dengan RETRIBUSI_API_KEY di backend
+  TIMEOUT: 30000 // 30 detik
+};
+
+// Untuk debugging
+if (typeof window !== 'undefined') {
+  console.log('API Base URL:', API_CONFIG.BASE_URL);
+}
+
--- a/public/dashboard/js/dashboard.js
+++ b/public/dashboard/js/dashboard.js
@@ -0,0 +1,723 @@
+// public/dashboard/js/dashboard.js
+// Main dashboard logic: filters, KPI cards, charts.
+
+import { Auth } from './auth.js';
+import {
+  apiGetLocations,
+  apiGetGates,
+  apiGetSummary,
+  apiGetDaily,
+  apiGetByCategory,
+  apiGetSummaryHourly
+} from './api.js';
+import {
+  initDailyChart,
+  initCategoryChart,
+  updateDailyChart,
+  updateCategoryChart,
+  getDailyChart,
+  getCategoryChart
+} from './charts.js';
+
+// Default date: selalu hari ini (tidak auto-detect ke tanggal lama)
+const state = {
+  date: new Date().toISOString().split('T')[0], // Default: hari ini
+  locationCode: '',
+  gateCode: ''
+};
+
+// Function untuk auto-detect tanggal terakhir yang ada data
+async function getLastAvailableDate() {
+  try {
+    // Coba ambil data hari ini dulu
+    const today = new Date().toISOString().split('T')[0];
+    const todayData = await apiGetSummary({ date: today });
+    
+    console.log('[Dashboard] getLastAvailableDate - today data:', todayData);
+    
+    // Handle jika response masih wrapped (seharusnya sudah di-unwrap oleh api.js)
+    let todaySummary = todayData;
+    if (todayData && typeof todayData === 'object' && 'data' in todayData && !('total_count' in todayData)) {
+      todaySummary = todayData.data || {};
+    }
+    
+    // Jika hari ini ada data, return hari ini
+    if (todaySummary && (todaySummary.total_count > 0 || todaySummary.total_amount > 0)) {
+      console.log('[Dashboard] Using today:', today);
+      return today;
+    }
+    
+    // Jika tidak, coba kemarin
+    const yesterday = new Date();
+    yesterday.setDate(yesterday.getDate() - 1);
+    const yesterdayStr = yesterday.toISOString().split('T')[0];
+    const yesterdayData = await apiGetSummary({ date: yesterdayStr });
+    
+    console.log('[Dashboard] getLastAvailableDate - yesterday data:', yesterdayData);
+    
+    // Handle jika response masih wrapped
+    let yesterdaySummary = yesterdayData;
+    if (yesterdayData && typeof yesterdayData === 'object' && 'data' in yesterdayData && !('total_count' in yesterdayData)) {
+      yesterdaySummary = yesterdayData.data || {};
+    }
+    
+    if (yesterdaySummary && (yesterdaySummary.total_count > 0 || yesterdaySummary.total_amount > 0)) {
+      console.log('[Dashboard] Using yesterday:', yesterdayStr);
+      return yesterdayStr;
+    }
+    
+    // Jika tidak ada data kemarin, cek 7 hari terakhir
+    for (let i = 2; i <= 7; i++) {
+      const prevDate = new Date();
+      prevDate.setDate(prevDate.getDate() - i);
+      const prevDateStr = prevDate.toISOString().split('T')[0];
+      const prevData = await apiGetSummary({ date: prevDateStr });
+      
+      console.log(`[Dashboard] getLastAvailableDate - ${i} days ago (${prevDateStr}) data:`, prevData);
+      
+      // Handle jika response masih wrapped
+      let prevSummary = prevData;
+      if (prevData && typeof prevData === 'object' && 'data' in prevData && !('total_count' in prevData)) {
+        prevSummary = prevData.data || {};
+      }
+      
+      if (prevSummary && (prevSummary.total_count > 0 || prevSummary.total_amount > 0)) {
+        console.log(`[Dashboard] Using ${i} days ago:`, prevDateStr);
+        return prevDateStr;
+      }
+    }
+    
+    // Jika tidak ada data sama sekali, cari tanggal terakhir yang ada data dari API
+    // Coba query langsung ke API untuk dapat list tanggal yang ada data
+    // Untuk sementara, return tanggal terakhir yang diketahui ada data (2025-12-16)
+    // Atau bisa return null dan biarkan user pilih manual
+    console.log('[Dashboard] No data found in last 7 days');
+    
+    // Cek tanggal 15 dan 14 juga (karena kita tahu ada data di sana)
+    const knownDates = ['2025-12-16', '2025-12-15', '2025-12-14'];
+    for (const knownDate of knownDates) {
+      const knownData = await apiGetSummary({ date: knownDate });
+      let knownSummary = knownData;
+      if (knownData && typeof knownData === 'object' && 'data' in knownData && !('total_count' in knownData)) {
+        knownSummary = knownData.data || {};
+      }
+      if (knownSummary && (knownSummary.total_count > 0 || knownSummary.total_amount > 0)) {
+        console.log('[Dashboard] Found data in known dates, using:', knownDate);
+        return knownDate;
+      }
+    }
+    
+    // Default: tetap hari ini (meskipun tidak ada data)
+    console.log('[Dashboard] No data found anywhere, using today:', today);
+    return today;
+  } catch (error) {
+    console.error('[Dashboard] Error getting last available date:', error);
+    // Fallback ke tanggal yang pasti ada data
+    return '2025-12-16';
+  }
+}
+
+// Video HLS setup - mapping lokasi ke URL camera
+const LOCATION_CAMERAS = {
+  'kerkof_01': {
+    url: 'https://kerkof.btekno.cloud/cam1/index.m3u8',
+    name: 'Kerkof'
+  }
+};
+
+let hls = null;
+let isVideoPlaying = false;
+let currentVideoUrl = null;
+
+function formatNumber(value) {
+  return new Intl.NumberFormat('id-ID').format(value || 0);
+}
+
+function formatCurrency(value) {
+  return 'Rp ' + new Intl.NumberFormat('id-ID').format(value || 0);
+}
+
+function setTopbarDate() {
+  const el = document.getElementById('topbar-date');
+  if (!el) return;
+  const d = new Date();
+  el.textContent = d.toLocaleDateString('id-ID', {
+    weekday: 'short',
+    year: 'numeric',
+    month: 'short',
+    day: '2-digit'
+  });
+}
+
+async function loadLocations() {
+  const select = document.getElementById('filter-location');
+  if (!select) return;
+  select.innerHTML = '<option value="">Semua Lokasi</option>';
+
+  try {
+    const data = await apiGetLocations({ limit: 100 }); // Ambil semua lokasi
+    // Handle pagination response: { data: [...], total, page, limit }
+    // atau langsung array: [...]
+    let items = [];
+    if (Array.isArray(data)) {
+      items = data;
+    } else if (data && Array.isArray(data.data)) {
+      items = data.data;
+    }
+    
+    items.forEach(loc => {
+      const opt = document.createElement('option');
+      opt.value = loc.code || loc.location_code || '';
+      opt.textContent = loc.name || loc.label || opt.value;
+      select.appendChild(opt);
+    });
+  } catch (err) {
+    console.error('loadLocations error', err);
+  }
+}
+
+async function loadGates() {
+  const select = document.getElementById('filter-gate');
+  if (!select) return;
+  select.innerHTML = '<option value="">Semua Gate</option>';
+
+  if (!state.locationCode) return;
+
+  try {
+    const data = await apiGetGates(state.locationCode, { limit: 100 }); // Ambil semua gate
+    // Handle pagination response: { data: [...], total, page, limit }
+    // atau langsung array: [...]
+    let items = [];
+    if (Array.isArray(data)) {
+      items = data;
+    } else if (data && Array.isArray(data.data)) {
+      items = data.data;
+    }
+    
+    items.forEach(g => {
+      const opt = document.createElement('option');
+      opt.value = g.code || g.gate_code || '';
+      opt.textContent = g.name || g.label || opt.value;
+      select.appendChild(opt);
+    });
+  } catch (err) {
+    console.error('loadGates error', err);
+  }
+}
+
+function renderSummary({ totalAmount, personCount, motorCount, carCount }) {
+  const amountEl = document.getElementById('card-total-amount');
+  const personEl = document.getElementById('card-person-count');
+  const motorEl = document.getElementById('card-motor-count');
+  const carEl = document.getElementById('card-car-count');
+
+  if (amountEl) amountEl.textContent = formatCurrency(totalAmount || 0);
+  if (personEl) personEl.textContent = formatNumber(personCount || 0);
+  if (motorEl) motorEl.textContent = formatNumber(motorCount || 0);
+  if (carEl) carEl.textContent = formatNumber(carCount || 0);
+}
+
+function showError(message) {
+  const el = document.getElementById('summary-error');
+  if (!el) return;
+  el.textContent = message;
+  el.classList.remove('hidden');
+  setTimeout(() => {
+    el.classList.add('hidden');
+  }, 4000);
+}
+
+async function loadSummaryAndCharts() {
+  const loadingOverlay = document.getElementById('summary-loading');
+  if (loadingOverlay) loadingOverlay.classList.add('visible');
+
+  try {
+    const [summaryResp, hourlyResp, byCategoryResp] = await Promise.all([
+      apiGetSummary({
+        date: state.date,
+        locationCode: state.locationCode,
+        gateCode: state.gateCode
+      }),
+      // pakai summary hourly untuk chart: data hari ini per jam
+      apiGetSummaryHourly({
+        date: state.date,
+        location_code: state.locationCode,
+        gate_code: state.gateCode
+      }),
+      apiGetByCategory({
+        date: state.date,
+        locationCode: state.locationCode,
+        gateCode: state.gateCode
+      })
+    ]);
+
+    // Kartu KPI: pakai total_count & total_amount dari summary endpoint
+    // Struktur summaryResp setelah di-unwrap: { total_count, total_amount, active_gates, active_locations }
+    console.log('[Dashboard] Summary response raw:', summaryResp);
+    console.log('[Dashboard] By Category response raw:', byCategoryResp);
+    console.log('[Dashboard] State date:', state.date);
+    
+    // Handle jika response masih wrapped
+    let summary = summaryResp || {};
+    if (summaryResp && typeof summaryResp === 'object' && 'data' in summaryResp && !('total_count' in summaryResp)) {
+      summary = summaryResp.data || {};
+    }
+    
+    const totalAmount = summary.total_amount || 0;
+    console.log('[Dashboard] Parsed summary:', { totalAmount, summary });
+    
+    // Hitung per kategori dari byCategoryResp
+    let personCount = 0;
+    let motorCount = 0;
+    let carCount = 0;
+    
+    if (byCategoryResp) {
+      let categoryData = [];
+      
+      // Handle jika response masih wrapped
+      let byCategory = byCategoryResp;
+      if (byCategoryResp && typeof byCategoryResp === 'object' && 'data' in byCategoryResp && !('labels' in byCategoryResp)) {
+        byCategory = byCategoryResp.data || byCategoryResp;
+      }
+      
+      // Handle struktur response dengan data array (sesuai spec)
+      if (Array.isArray(byCategory)) {
+        categoryData = byCategory;
+      }
+      // Handle struktur response dengan labels & series (format chart)
+      else if (byCategory.labels && byCategory.series) {
+        const labels = byCategory.labels || [];
+        const counts = byCategory.series.total_count || [];
+        
+        labels.forEach((label, index) => {
+          categoryData.push({
+            category: label,
+            total_count: counts[index] || 0
+          });
+        });
+      }
+      
+      console.log('[Dashboard] Category data parsed:', categoryData);
+      
+      // Extract data per kategori
+      categoryData.forEach(item => {
+        const count = item.total_count || 0;
+        
+        if (item.category === 'person_walk') {
+          personCount = count;
+        } else if (item.category === 'motor') {
+          motorCount = count;
+        } else if (item.category === 'car') {
+          carCount = count;
+        }
+      });
+    }
+    
+    console.log('[Dashboard] Final counts:', { personCount, motorCount, carCount, totalAmount });
+    
+    console.log('[Dashboard] Summary processed:', { 
+      date: state.date,
+      locationCode: state.locationCode,
+      gateCode: state.gateCode,
+      totalAmount,
+      personCount,
+      motorCount,
+      carCount
+    });
+    
+    // Pastikan nilai tidak undefined
+    const finalTotalAmount = totalAmount || 0;
+    const finalPersonCount = personCount || 0;
+    const finalMotorCount = motorCount || 0;
+    const finalCarCount = carCount || 0;
+    
+    console.log('[Dashboard] Rendering summary with values:', {
+      totalAmount: finalTotalAmount,
+      personCount: finalPersonCount,
+      motorCount: finalMotorCount,
+      carCount: finalCarCount
+    });
+    
+    renderSummary({ 
+      totalAmount: finalTotalAmount, 
+      personCount: finalPersonCount, 
+      motorCount: finalMotorCount, 
+      carCount: finalCarCount
+    });
+
+    // Daily chart data → tampilkan data hari ini per jam
+    // Struktur response: { labels: ["00","01",...], series: { total_count: [...], total_amount: [...] } }
+    // ATAU: { data: [{ hour: 0, total_count: 0, total_amount: 0 }, ...] }
+    let labels = [];
+    let totalCounts = [];
+    let totalAmounts = [];
+    
+    console.log('[Dashboard] Hourly response raw:', hourlyResp);
+    
+    // Handle jika response masih wrapped
+    let hourly = hourlyResp;
+    if (hourlyResp && typeof hourlyResp === 'object' && 'data' in hourlyResp && !('labels' in hourlyResp)) {
+      hourly = hourlyResp.data || hourlyResp;
+    }
+    
+    // Handle struktur response dengan labels & series
+    if (hourly && hourly.labels && hourly.series) {
+      labels = hourly.labels.map(h => String(h).padStart(2, '0') + ':00'); // "00" -> "00:00", "1" -> "01:00"
+      totalCounts = hourly.series.total_count || [];
+      totalAmounts = hourly.series.total_amount || [];
+      console.log('[Dashboard] Hourly data from labels & series:', { labelsCount: labels.length, countsCount: totalCounts.length });
+    }
+    // Handle struktur response dengan data array (sesuai spec)
+    else if (hourly && Array.isArray(hourly.data)) {
+      // Generate 24 jam (0-23)
+      labels = Array.from({ length: 24 }, (_, i) => `${String(i).padStart(2, '0')}:00`);
+      totalCounts = Array(24).fill(0);
+      totalAmounts = Array(24).fill(0);
+      
+      // Map data dari response ke array per jam
+      hourly.data.forEach(item => {
+        const hour = item.hour || 0;
+        if (hour >= 0 && hour < 24) {
+          totalCounts[hour] = item.total_count || 0;
+          totalAmounts[hour] = item.total_amount || 0;
+        }
+      });
+    }
+    // Jika response kosong/null, tetap buat chart dengan data 0
+    else {
+      console.warn('[Dashboard] Hourly response tidak sesuai format, menggunakan data kosong');
+      labels = Array.from({ length: 24 }, (_, i) => `${String(i).padStart(2, '0')}:00`);
+      totalCounts = Array(24).fill(0);
+      totalAmounts = Array(24).fill(0);
+    }
+    
+    console.log('[Dashboard] Hourly data processed:', { 
+      date: state.date,
+      labels: labels.length, 
+      counts: totalCounts.length, 
+      amounts: totalAmounts.length,
+      totalCount: totalCounts.reduce((a, b) => a + b, 0),
+      totalAmount: totalAmounts.reduce((a, b) => a + b, 0)
+    });
+    
+    // Pastikan chart sudah di-init sebelum update
+    const dailyCanvas = document.getElementById('daily-chart');
+    const currentDailyChart = getDailyChart();
+    if (dailyCanvas && !currentDailyChart) {
+      console.log('[Dashboard] Daily chart belum di-init, initializing...');
+      initDailyChart(dailyCanvas.getContext('2d'));
+    }
+    
+    // Selalu update chart, meskipun data kosong (agar user tahu memang tidak ada data)
+    const dailyChartInstance = getDailyChart();
+    if (dailyChartInstance) {
+      updateDailyChart({
+        labels,
+        counts: totalCounts,
+        amounts: totalAmounts
+      });
+      console.log('[Dashboard] Daily chart updated successfully');
+    } else {
+      console.error('[Dashboard] Daily chart tidak bisa di-update, chart belum di-init! Canvas:', dailyCanvas);
+    }
+
+    // Category chart data → pakai total_count per kategori
+    // Struktur response: { labels: ["person_walk","motor","car"], series: { total_count: [33,12,2], total_amount: [...] } }
+    // ATAU: { data: [{ category: "person_walk", total_count: 33, total_amount: 66000 }, ...] }
+    let catLabels = [];
+    let catValues = [];
+    
+    console.log('[Dashboard] Category response raw:', byCategoryResp);
+    
+    // Handle jika response masih wrapped
+    let byCategory = byCategoryResp;
+    if (byCategoryResp && typeof byCategoryResp === 'object' && 'data' in byCategoryResp && !('labels' in byCategoryResp)) {
+      byCategory = byCategoryResp.data || byCategoryResp;
+    }
+    
+    // Handle struktur response dengan labels & series
+    if (byCategory && byCategory.labels && byCategory.series) {
+      const categoryLabels = {
+        'person_walk': 'Orang',
+        'motor': 'Motor',
+        'car': 'Mobil'
+      };
+      const rawLabels = byCategory.labels || [];
+      catLabels = rawLabels.map(label => categoryLabels[label] || label);
+      catValues = byCategory.series.total_count || [];
+      console.log('[Dashboard] Category data from labels & series:', { catLabels, catValues });
+    }
+    // Handle struktur response dengan data array (sesuai spec)
+    else if (byCategory && Array.isArray(byCategory.data)) {
+      // Default categories sesuai spec
+      const defaultCategories = ['person_walk', 'motor', 'car'];
+      const categoryLabels = {
+        'person_walk': 'Orang',
+        'motor': 'Motor',
+        'car': 'Mobil'
+      };
+      catLabels = defaultCategories.map(cat => categoryLabels[cat] || cat);
+      catValues = defaultCategories.map(cat => {
+        const item = byCategory.data.find(d => d.category === cat);
+        return item ? (item.total_count || 0) : 0;
+      });
+      console.log('[Dashboard] Category data from array:', { catLabels, catValues });
+    }
+    // Jika response kosong/null, tetap buat chart dengan data 0
+    else {
+      console.warn('[Dashboard] Category response tidak sesuai format, menggunakan data kosong');
+      catLabels = ['Orang', 'Motor', 'Mobil'];
+      catValues = [0, 0, 0];
+    }
+
+    console.log('[Dashboard] Category data processed:', { 
+      date: state.date,
+      labels: catLabels, 
+      values: catValues,
+      total: catValues.reduce((a, b) => a + b, 0)
+    });
+
+    // Pastikan chart sudah di-init sebelum update
+    const categoryCanvas = document.getElementById('category-chart');
+    const categoryChartInstance = getCategoryChart();
+    if (categoryCanvas && !categoryChartInstance) {
+      console.log('[Dashboard] Initializing category chart...');
+      initCategoryChart(categoryCanvas.getContext('2d'));
+    }
+    
+    // Selalu update chart, meskipun data kosong (agar user tahu memang tidak ada data)
+    const currentCategoryChart = getCategoryChart();
+    if (currentCategoryChart) {
+      updateCategoryChart({
+        labels: catLabels,
+        values: catValues
+      });
+      console.log('[Dashboard] Category chart updated successfully');
+    } else {
+      console.error('[Dashboard] Category chart tidak bisa di-update, chart belum di-init!');
+    }
+  } catch (err) {
+    console.error('loadSummaryAndCharts error', err);
+    showError(err.message || 'Gagal memuat data dashboard');
+  } finally {
+    if (loadingOverlay) loadingOverlay.classList.remove('visible');
+  }
+}
+
+function getCameraForLocation(locationCode) {
+  if (!locationCode) return null;
+  return LOCATION_CAMERAS[locationCode] || null;
+}
+
+function showVideoPanel(locationCode) {
+  const videoSection = document.getElementById('video-section');
+  const videoPanelTitle = document.getElementById('video-panel-title');
+  const camera = getCameraForLocation(locationCode);
+  
+  if (camera && videoSection && videoPanelTitle) {
+    videoSection.style.display = 'block';
+    videoPanelTitle.textContent = `Live Camera - ${camera.name}`;
+    currentVideoUrl = camera.url;
+    // Auto-stop video kalau lokasi berubah
+    if (isVideoPlaying) {
+      stopVideo();
+    }
+  } else {
+    if (videoSection) videoSection.style.display = 'none';
+    if (isVideoPlaying) {
+      stopVideo();
+    }
+    currentVideoUrl = null;
+  }
+}
+
+function initVideo() {
+  if (!currentVideoUrl || typeof Hls === 'undefined') {
+    console.warn('[Dashboard] Video URL atau HLS.js tidak tersedia');
+    return;
+  }
+
+  const videoEl = document.getElementById('video-player');
+  if (!videoEl) return;
+
+  if (Hls.isSupported()) {
+    hls = new Hls({
+      enableWorker: true,
+      lowLatencyMode: true,
+      backBufferLength: 90
+    });
+    hls.loadSource(currentVideoUrl);
+    hls.attachMedia(videoEl);
+    
+    hls.on(Hls.Events.MANIFEST_PARSED, () => {
+      console.log('[Dashboard] HLS manifest parsed');
+    });
+    
+    hls.on(Hls.Events.ERROR, (event, data) => {
+      console.error('[Dashboard] HLS error:', data);
+      if (data.fatal) {
+        if (data.type === Hls.ErrorTypes.NETWORK_ERROR) {
+          console.log('[Dashboard] Network error, retrying...');
+          hls.startLoad();
+        } else if (data.type === Hls.ErrorTypes.MEDIA_ERROR) {
+          console.log('[Dashboard] Media error, recovering...');
+          hls.recoverMediaError();
+        } else {
+          console.error('[Dashboard] Fatal error, destroying HLS');
+          hls.destroy();
+          hls = null;
+          stopVideo();
+        }
+      }
+    });
+  } else if (videoEl.canPlayType('application/vnd.apple.mpegurl')) {
+    // Native HLS support (Safari)
+    videoEl.src = currentVideoUrl;
+  } else {
+    console.error('[Dashboard] HLS tidak didukung di browser ini');
+  }
+}
+
+function startVideo() {
+  const videoEl = document.getElementById('video-player');
+  const placeholderEl = document.getElementById('video-placeholder');
+  const toggleBtn = document.getElementById('video-toggle');
+  
+  if (!videoEl || !currentVideoUrl) {
+    console.warn('[Dashboard] Video element atau URL tidak tersedia');
+    return;
+  }
+
+  if (!hls && typeof Hls !== 'undefined' && Hls.isSupported()) {
+    initVideo();
+  }
+  
+  if (videoEl) {
+    videoEl.style.display = 'block';
+    if (placeholderEl) placeholderEl.style.display = 'none';
+  }
+  if (toggleBtn) toggleBtn.textContent = 'Matikan';
+  isVideoPlaying = true;
+  
+  if (videoEl && (videoEl.src || (hls && hls.media))) {
+    videoEl.play().catch(e => console.error('[Dashboard] Play error:', e));
+  }
+}
+
+function stopVideo() {
+  const videoEl = document.getElementById('video-player');
+  const placeholderEl = document.getElementById('video-placeholder');
+  const toggleBtn = document.getElementById('video-toggle');
+  
+  if (hls) {
+    hls.destroy();
+    hls = null;
+  }
+  if (videoEl) {
+    videoEl.pause();
+    videoEl.src = '';
+    videoEl.style.display = 'none';
+  }
+  if (placeholderEl) placeholderEl.style.display = 'flex';
+  if (toggleBtn) toggleBtn.textContent = 'Hidupkan';
+  isVideoPlaying = false;
+}
+
+function setupFilters() {
+  const dateInput = document.getElementById('filter-date');
+  if (dateInput) {
+    dateInput.value = state.date;
+    dateInput.addEventListener('change', () => {
+      state.date = dateInput.value || state.date;
+      loadSummaryAndCharts();
+    });
+  }
+
+  const locationSelect = document.getElementById('filter-location');
+  if (locationSelect) {
+    locationSelect.addEventListener('change', async () => {
+      state.locationCode = locationSelect.value;
+      state.gateCode = '';
+      const gateSelect = document.getElementById('filter-gate');
+      if (gateSelect) gateSelect.value = '';
+      
+      // Show/hide video panel berdasarkan lokasi
+      showVideoPanel(state.locationCode);
+      
+      await loadGates();
+      loadSummaryAndCharts();
+    });
+  }
+
+  const gateSelect = document.getElementById('filter-gate');
+  if (gateSelect) {
+    gateSelect.addEventListener('change', () => {
+      state.gateCode = gateSelect.value;
+      loadSummaryAndCharts();
+    });
+  }
+  
+  // Setup video toggle button
+  const toggleBtn = document.getElementById('video-toggle');
+  if (toggleBtn) {
+    toggleBtn.addEventListener('click', () => {
+      if (isVideoPlaying) {
+        stopVideo();
+      } else {
+        startVideo();
+      }
+    });
+  }
+}
+
+function initCharts() {
+  console.log('[Dashboard] Initializing charts...');
+  const dailyCanvas = document.getElementById('daily-chart');
+  const categoryCanvas = document.getElementById('category-chart');
+  
+  if (dailyCanvas) {
+    console.log('[Dashboard] Found daily chart canvas, initializing...');
+    initDailyChart(dailyCanvas.getContext('2d'));
+    console.log('[Dashboard] Daily chart initialized:', getDailyChart() !== null);
+  } else {
+    console.error('[Dashboard] Daily chart canvas not found!');
+  }
+  
+  if (categoryCanvas) {
+    console.log('[Dashboard] Found category chart canvas, initializing...');
+    initCategoryChart(categoryCanvas.getContext('2d'));
+    console.log('[Dashboard] Category chart initialized:', getCategoryChart() !== null);
+  } else {
+    console.error('[Dashboard] Category chart canvas not found!');
+  }
+}
+
+document.addEventListener('DOMContentLoaded', async () => {
+  // Require auth
+  if (!Auth.isAuthenticated()) {
+    window.location.href = '../index.php';
+    return;
+  }
+
+  // Set default date ke hari ini (jangan auto-detect ke tanggal lama)
+  const today = new Date().toISOString().split('T')[0];
+  state.date = today;
+  const dateInput = document.getElementById('filter-date');
+  if (dateInput) {
+    dateInput.value = state.date;
+    console.log('[Dashboard] Default date set to today:', state.date);
+  }
+
+  setTopbarDate();
+  initCharts();
+  setupFilters();
+  await loadLocations();
+  await loadGates();
+  
+  // Cek lokasi awal untuk show/hide video
+  showVideoPanel(state.locationCode);
+  
+  await loadSummaryAndCharts();
+});
+
+
--- a/public/dashboard/js/realtime.js
+++ b/public/dashboard/js/realtime.js
@@ -0,0 +1,160 @@
+// public/dashboard/js/realtime.js
+// Realtime dashboard (SSE + fallback snapshot)
+
+import { apiGetRealtimeSnapshot } from './api.js';
+import { API_CONFIG } from './config.js';
+
+const REALTIME_STREAM_URL = `${API_CONFIG.BASE_URL}/retribusi/v1/realtime/stream`;
+
+class RealtimeManager {
+  constructor() {
+    this.eventSource = null;
+    this.snapshotTimer = null;
+    this.isConnected = false;
+  }
+
+  init() {
+    // Mulai SSE, kalau gagal pakai fallback polling snapshot
+    this.startSSE();
+    this.startSnapshotFallback();
+  }
+
+  startSSE() {
+    try {
+      const token = localStorage.getItem('token') || '';
+      // SSE tidak support custom headers, jadi token harus di query string
+      // TAPI sesuai spec, parameter yang benar adalah 'last_id', bukan 'token'
+      // Token tetap dikirim via Authorization header jika backend support
+      // Untuk SSE, kita pakai query string karena EventSource tidak support custom headers
+      const params = new URLSearchParams();
+      // Jika ada last_id dari state, tambahkan
+      // params.append('last_id', this.lastEventId || '');
+      // Token tetap di query string untuk SSE (limitation EventSource)
+      if (token) {
+        // Backend harus handle token dari query string atau implement custom SSE handler
+        // Untuk sekarang, kita tetap pakai query string karena EventSource limitation
+        params.append('token', token);
+      }
+      const url = `${REALTIME_STREAM_URL}?${params.toString()}`;
+
+      console.log('[Realtime] Connect SSE:', url);
+
+      // EventSource tidak support custom headers, jadi token harus di query string
+      // Backend harus handle ini atau implement custom SSE handler dengan fetch + stream
+      this.eventSource = new EventSource(url);
+
+      this.eventSource.onopen = () => {
+        console.log('[Realtime] SSE opened');
+        this.isConnected = true;
+      };
+
+      this.eventSource.onmessage = (event) => {
+        try {
+          const data = JSON.parse(event.data);
+          console.log('[Realtime] SSE event:', data);
+          
+          // Backend kirim realtime_events, bisa berupa:
+          // - event baru (entry baru)
+          // - snapshot agregat (total_count_today, by_category, dll)
+          // Sesuaikan dengan struktur yang backend kirim via SSE
+          
+          // Jika backend kirim snapshot via SSE, parse sama seperti fetchSnapshot()
+          if (data.total_count_today !== undefined || data.by_category) {
+            const personCat = (data.by_category || []).find(c => c.category === 'person_walk') || { total_count: 0 };
+            const motorCat = (data.by_category || []).find(c => c.category === 'motor') || { total_count: 0 };
+            const carCat = (data.by_category || []).find(c => c.category === 'car') || { total_count: 0 };
+            
+            const kpiData = {
+              totalPeople: personCat.total_count || 0,
+              totalVehicles: (motorCat.total_count || 0) + (carCat.total_count || 0),
+              totalCount: data.total_count_today || 0,
+              totalAmount: data.total_amount_today || 0
+            };
+            
+            window.dispatchEvent(new CustomEvent('realtime:snapshot', { detail: kpiData }));
+          }
+        } catch (e) {
+          console.warn('[Realtime] gagal parse event data', e, event.data);
+        }
+      };
+
+      this.eventSource.onerror = (err) => {
+        console.error('[Realtime] SSE error', err);
+        this.isConnected = false;
+        // Biarkan browser auto-reconnect, kalau tetap gagal nanti fallback snapshot yang jalan
+      };
+    } catch (e) {
+      console.error('[Realtime] tidak bisa inisialisasi SSE', e);
+      this.isConnected = false;
+    }
+  }
+
+  async fetchSnapshot() {
+    try {
+      // Struktur response setelah di-unwrap: { total_count_today, total_amount_today, by_gate, by_category }
+      const snapshot = await apiGetRealtimeSnapshot({
+        date: new Date().toISOString().split('T')[0],
+        location_code: '' // bisa diambil dari state dashboard jika perlu
+      });
+      
+      console.log('[Realtime] snapshot:', snapshot);
+      
+      // Parse data snapshot sesuai struktur resmi
+      const parsed = {
+        totalCount: snapshot.total_count_today || 0,
+        totalAmount: snapshot.total_amount_today || 0,
+        byGate: Array.isArray(snapshot.by_gate) ? snapshot.by_gate : [],
+        byCategory: Array.isArray(snapshot.by_category) ? snapshot.by_category : []
+      };
+      
+      // Hitung total orang & kendaraan dari by_category
+      const personCat = parsed.byCategory.find(c => c.category === 'person_walk') || { total_count: 0 };
+      const motorCat = parsed.byCategory.find(c => c.category === 'motor') || { total_count: 0 };
+      const carCat = parsed.byCategory.find(c => c.category === 'car') || { total_count: 0 };
+      
+      const kpiData = {
+        totalPeople: personCat.total_count || 0,
+        totalVehicles: (motorCat.total_count || 0) + (carCat.total_count || 0),
+        totalCount: parsed.totalCount,
+        totalAmount: parsed.totalAmount
+      };
+      
+      // Dispatch event untuk update dashboard real-time
+      window.dispatchEvent(new CustomEvent('realtime:snapshot', { detail: kpiData }));
+      
+    } catch (e) {
+      console.error('[Realtime] gagal ambil snapshot', e);
+    }
+  }
+
+  startSnapshotFallback() {
+    // Polling ringan tiap 5 detik, hanya kalau SSE belum stable
+    if (this.snapshotTimer) clearInterval(this.snapshotTimer);
+    this.snapshotTimer = setInterval(() => {
+      if (!this.isConnected) {
+        this.fetchSnapshot();
+      }
+    }, 5000);
+  }
+
+  stop() {
+    if (this.eventSource) {
+      this.eventSource.close();
+      this.eventSource = null;
+    }
+    if (this.snapshotTimer) {
+      clearInterval(this.snapshotTimer);
+      this.snapshotTimer = null;
+    }
+    this.isConnected = false;
+  }
+}
+
+export const Realtime = new RealtimeManager();
+
+// Auto-init saat dashboard dibuka
+document.addEventListener('DOMContentLoaded', () => {
+  Realtime.init();
+});
+
+