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

This commit is contained in:
mwpn
2025-12-18 11:21:40 +07:00
commit b3573ed390
35 changed files with 7368 additions and 0 deletions

60
README.md Normal file
View File

@@ -0,0 +1,60 @@
# 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