2025-12-18 11:21:40 +07:00
|
|
|
# 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
|
|
|
|
|
|
2025-12-18 11:24:47 +07:00
|
|
|
### Update di Server Production
|
|
|
|
|
|
|
|
|
|
**Cara 1: Menggunakan Script (Recommended)**
|
|
|
|
|
```bash
|
|
|
|
|
# Linux/Unix
|
|
|
|
|
cd /path/to/retribusi-frontend
|
|
|
|
|
bash pull.sh
|
|
|
|
|
|
|
|
|
|
# Windows
|
|
|
|
|
cd C:\path\to\retribusi-frontend
|
|
|
|
|
pull.bat
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
**Cara 2: Command Langsung (Sekali Jalan)**
|
|
|
|
|
```bash
|
|
|
|
|
cd /path/to/retribusi-frontend && git stash && git pull origin main && git stash pop
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
**Cara 3: Manual**
|
|
|
|
|
```bash
|
|
|
|
|
cd /path/to/retribusi-frontend
|
|
|
|
|
git pull origin main
|
|
|
|
|
```
|
|
|
|
|
|
