# Retribusi Frontend

Frontend aplikasi Retribusi BAPENDA Kabupaten Garut.

## Struktur Project

```
retribusi (frontend)/
├── index.php              # Login page
├── public/
│   ├── dashboard/
│   │   ├── dashboard.html # Dashboard utama
│   │   ├── event.html     # Halaman event logs
│   │   ├── settings.html  # Halaman pengaturan lokasi & gate
│   │   ├── css/
│   │   │   └── app.css    # Main stylesheet
│   │   └── js/
│   │       ├── config.js  # API configuration
│   │       ├── api.js     # API client
│   │       ├── auth.js    # Authentication
│   │       ├── dashboard.js # Dashboard logic
│   │       ├── charts.js # Chart.js helpers
│   │       └── realtime.js # Realtime SSE client
│   └── index.php
└── api/                   # Legacy API endpoints (deprecated)
```

## Fitur

- **Dashboard**: Menampilkan KPI cards, chart harian per jam, dan chart per kategori
- **Event Logs**: Daftar event dengan filter lokasi, gate, kategori, dan tanggal
- **Settings**: CRUD untuk lokasi dan gate, termasuk pengaturan URL kamera
- **Realtime**: Update data real-time menggunakan Server-Sent Events (SSE)
- **Video Preview**: Preview kamera HLS untuk gate yang memiliki URL kamera

## Teknologi

- Vanilla JavaScript (ES6 modules)
- Tailwind CSS
- Chart.js untuk visualisasi data
- HLS.js untuk video streaming

## Konfigurasi

File `public/dashboard/js/config.js` mengatur:
- API Base URL (auto-detect local/production)
- API Key untuk autentikasi

## Development

1. Pastikan backend API sudah running
2. Buka `index.php` untuk login
3. Akses dashboard di `public/dashboard/dashboard.html`

## Production

Deploy ke web server (Apache/Nginx) dengan konfigurasi:
- Base URL: sesuai dengan domain production
- API Base URL: otomatis terdeteksi dari hostname