225 lines
3.7 KiB
Markdown
225 lines
3.7 KiB
Markdown
# KEAMANAN
|
||
|
||
Dokumen ini mendeskripsikan spesifikasi UI/UX dan ekspektasi teknis untuk modul **Keamanan Lingkungan Desa** pada sistem dashboard DESA. Dokumen ini menjadi acuan bersama bagi tim desain, frontend, dan backend.
|
||
|
||
---
|
||
|
||
## 1. Tujuan Halaman
|
||
|
||
Memberikan visibilitas real-time dan historis terhadap kondisi keamanan desa, meliputi:
|
||
|
||
* Status CCTV aktif
|
||
* Laporan kejadian keamanan
|
||
* Peta lokasi CCTV
|
||
* Monitoring tren dan respons kejadian
|
||
|
||
Target pengguna utama:
|
||
|
||
* Kepala Desa
|
||
* Perangkat Desa / Petugas Keamanan
|
||
|
||
---
|
||
|
||
## 2. Struktur Tata Letak (Layout)
|
||
|
||
### 2.1 Pola Umum
|
||
|
||
* **Layout dashboard dua kolom**
|
||
|
||
* Kolom kiri: monitoring visual (peta)
|
||
* Kolom kanan: daftar laporan keamanan
|
||
* Header KPI ringkas di bagian atas
|
||
* Semua konten dibungkus dalam **card container** dengan radius konsisten
|
||
|
||
Grid:
|
||
|
||
* Desktop: 12-column grid
|
||
* Tablet: 8-column grid
|
||
* Mobile: 1-column (stack vertikal)
|
||
|
||
---
|
||
|
||
## 3. Komponen UI
|
||
|
||
### 3.1 KPI Cards (Header)
|
||
|
||
1. **CCTV Aktif**
|
||
|
||
* Value: `20`
|
||
* Subtext: `Kamera Online`
|
||
* Ikon: Kamera CCTV
|
||
|
||
2. **Laporan Keamanan**
|
||
|
||
* Value: `15`
|
||
* Subtext: `Minggu ini`
|
||
* Ikon: Chat / laporan
|
||
|
||
Perilaku:
|
||
|
||
* Tooltip saat hover (penjelasan metrik)
|
||
* Klik opsional → navigasi ke halaman detail
|
||
|
||
---
|
||
|
||
### 3.2 Peta Keamanan CCTV
|
||
|
||
**Judul Card:** Peta Keamanan CCTV
|
||
**Subjudul:** Titik Lokasi CCTV
|
||
|
||
Isi:
|
||
|
||
* Embedded map (Google Maps / Mapbox)
|
||
* Marker lokasi CCTV
|
||
|
||
* Hijau: aktif
|
||
* Abu-abu: offline (future)
|
||
|
||
Kontrol:
|
||
|
||
* Toggle tampilan (grid / fullscreen)
|
||
* Zoom in / out
|
||
|
||
Interaksi:
|
||
|
||
* Klik marker → popup info CCTV
|
||
|
||
* ID CCTV
|
||
* Lokasi
|
||
* Status
|
||
* Waktu terakhir aktif
|
||
|
||
---
|
||
|
||
### 3.3 Daftar Laporan Keamanan
|
||
|
||
**Judul:** Laporan Keamanan Lingkungan
|
||
|
||
Item laporan (card list):
|
||
|
||
* Judul kejadian (contoh: *Pencurian Motor*)
|
||
* Timestamp relatif ("2 jam yang lalu")
|
||
* Tanggal & jam
|
||
* Lokasi kejadian
|
||
* Badge status: `Baru`
|
||
|
||
Perilaku:
|
||
|
||
* Scrollable container
|
||
* Klik item → detail laporan (modal / halaman baru)
|
||
|
||
---
|
||
|
||
## 4. Gaya & Tema Visual
|
||
|
||
### 4.1 Warna
|
||
|
||
* Primary: Navy Blue (`#1F3A5F` – perkiraan)
|
||
* Background: Light Blue / Off-white (`#F5F9FC`)
|
||
* Card: Putih
|
||
* Success: Hijau (status aktif)
|
||
* Alert: Merah muda / merah untuk laporan baru
|
||
|
||
### 4.2 Tipografi
|
||
|
||
* Font utama: Sans-serif modern (Inter / Poppins)
|
||
* Heading: Semi-bold
|
||
* Body text: Regular
|
||
* Angka KPI: Bold
|
||
|
||
Ukuran relatif:
|
||
|
||
* Heading: 16–18px
|
||
* Body: 13–14px
|
||
* KPI Value: 22–28px
|
||
|
||
### 4.3 Spasi & Elevasi
|
||
|
||
* Padding card: 16–20px
|
||
* Gap antar card: 16px
|
||
* Border radius: 12–16px
|
||
* Shadow ringan untuk card
|
||
|
||
---
|
||
|
||
## 5. Responsivitas
|
||
|
||
### Desktop
|
||
|
||
* Peta dan laporan tampil berdampingan
|
||
|
||
### Tablet
|
||
|
||
* KPI tetap horizontal
|
||
* Peta dan laporan bisa stack 2 baris
|
||
|
||
### Mobile
|
||
|
||
* Semua komponen stack vertikal
|
||
* Peta dalam mode scroll / fullscreen
|
||
* List laporan menjadi full-width
|
||
|
||
---
|
||
|
||
## 6. Ekspektasi Interaksi & UX
|
||
|
||
* Hover state pada card & list item
|
||
* Tooltip pada ikon KPI
|
||
* Loading skeleton saat data fetch
|
||
* Empty state bila tidak ada laporan
|
||
* Badge status real-time (baru / diproses / selesai – future)
|
||
|
||
---
|
||
|
||
## 7. Ekspektasi Data (Backend Contract)
|
||
|
||
### 7.1 KPI Summary
|
||
|
||
```json
|
||
{
|
||
"cctvActive": 20,
|
||
"securityReportsWeekly": 15
|
||
}
|
||
```
|
||
|
||
### 7.2 CCTV Locations
|
||
|
||
```json
|
||
[
|
||
{
|
||
"id": "CCTV-01",
|
||
"lat": -8.5,
|
||
"lng": 115.2,
|
||
"status": "active",
|
||
"lastSeen": "2025-10-06T14:30:00Z"
|
||
}
|
||
]
|
||
```
|
||
|
||
### 7.3 Security Reports
|
||
|
||
```json
|
||
[
|
||
{
|
||
"id": "REP-001",
|
||
"title": "Pencurian Motor",
|
||
"reportedAt": "2025-10-06T15:30:00Z",
|
||
"location": "Jl. Kecubung 20",
|
||
"status": "new"
|
||
}
|
||
]
|
||
```
|
||
|
||
---
|
||
|
||
## 8. Catatan Pengembangan Lanjutan
|
||
|
||
* Filter laporan berdasarkan jenis & waktu
|
||
* Integrasi snapshot CCTV
|
||
* Heatmap area rawan
|
||
* Role-based access (admin / petugas)
|
||
|
||
---
|
||
|
||
Dokumen ini wajib diperbarui bila terdapat perubahan UI atau kebutuhan data pada modul **Keamanan**.
|