Perumhub

Design Plan Reference

HTML reference for dashboard behavior and reusable screen components (table, form, detail, schedule).

Dashboard + Drawer Navigation

Tap each bottom-nav icon to open child-menu drawer state.

Dashboard Graha Asri Residence

Selamat pagi, Bpk. Budi

Semua aman hari ini

RT 04 / RW 08 Blok C No. 12

Tagihan aktif

Rp 150.000

Iuran Keamanan & Kebersihan

receipt_long
Jatuh tempo 2 hari lagi
Jadwal ronda berikutnya
Lihat jadwal
SAB 22
Siskamling Malam Minggu 22:00 - 03:00 WIB
+4

Table Screen

Search, filters, row statuses, actions, and pagination patterns.

Table ScreenComponent Reference
search Cari invoice, blok, atau warga...
Semua Belum Bayar Lunas
WargaTagihanStatusAksi
Budi C-12150KPending+
Sari A-030✓
Rudi B-07300KTerlambat!
Bulk select enabled 1-3 dari 73

Form Screen

Field states: normal, error, select, textarea, upload, toggles, submit.

Form ScreenComponent Reference
Form Dasar
Select & Picker
Kirim notifikasi WA
Lampiran KTP / Dokumen
upload Upload atau tarik file ke sini

Detail Screen

Hero detail, metadata block, timeline, attachment, and action area.

Detail ScreenComponent Reference
Laporan Lampu Jalan
Diproses

ID: LP-2026-00421

PJU Blok B Urgensi Sedang
Informasi Detail
PelaporBudi Santoso
Tanggal09 Mar 2026
LokasiJalan Bougenville
Kontak08xx xxxx 2231

Lampu di tikungan utama mati sejak semalam dan area jadi gelap.

Riwayat Proses
  • Laporan diterima09 Mar 2026, 08:11
  • Diteruskan ke petugas09 Mar 2026, 09:03
  • Perbaikan dijadwalkanMenunggu konfirmasi
Lampiran & Komentar
foto_lampu.jpg2.1MB

Akan dikerjakan tim maintenance malam ini.

Schedule Screen

Month strip, schedule cards, legend, and reminder controls.

Schedule ScreenComponent Reference
Maret 2026
Hari ini
22:00 - 03:00
Ronda
Jadwal Ronda Blok B
PIC: Pak Joko 6 peserta
07:00 - 09:00
Kegiatan
Kerja Bakti Lingkungan
Titik kumpul: Pos RT +12 warga
Reminder & Legend

Ronda / Keamanan

Kegiatan Warga

Tagihan Jatuh Tempo