3.7 KiB
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)
-
CCTV Aktif
- Value:
20 - Subtext:
Kamera Online - Ikon: Kamera CCTV
- Value:
-
Laporan Keamanan
- Value:
15 - Subtext:
Minggu ini - Ikon: Chat / laporan
- Value:
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
{
"cctvActive": 20,
"securityReportsWeekly": 15
}
7.2 CCTV Locations
[
{
"id": "CCTV-01",
"lat": -8.5,
"lng": 115.2,
"status": "active",
"lastSeen": "2025-10-06T14:30:00Z"
}
]
7.3 Security Reports
[
{
"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.