Design Mockup — Platform Terintegrasi Pemetaan Desa 3T

Mockup UI DPDT
Kementerian Desa PDT

Direktori semua halaman mockup web dan mobile untuk platform pemetaan desa 3T. 18 halaman mockup — dark/light mode — single-persona POLA A.

11
Halaman Web
6
Halaman Mobile
22
UX Design W-pages
8
Modul Sidebar
Landing Page
Halaman publik — perkenalan platform untuk stakeholder
1 halaman
Landing Page DPDT
landing.html
Halaman publik marketing — hero 4 stats nasional, fitur platform, alur kerja, pengguna, testimonial, FAQ. Refined/Editorial direction DM Serif Display.
Autentikasi
Halaman login — akses portal web
1 halaman
Login
web/login.html
Halaman login Keycloak SSO — form email + password + MFA, redirect ke dashboard setelah autentikasi.
Dashboard
Ringkasan KPI, alert, dan statistik desa nasional
1 halaman
Dashboard
web/dashboard/index.html
KPI 4 stat card (total desa, IDM rata-rata, realisasi DD, program aktif), chart tren IDM, peta mini, alert real-time.
Peta IDM
GIS interaktif — choropleth IDM dan sebaran fasilitas
1 halaman
Peta IDM & Fasilitas
web/peta-idm/index.html
Tab "Peta IDM" — choropleth 5 status desa (W02). Tab "Peta Fasilitas" — marker sekolah, puskesmas, jalan, air (W03). Filter + legenda interaktif.
IDM — Indeks Desa Membangun
Manajemen data IDM — daftar, rekap, verifikasi, periode
2 halaman
IDM — Index & Manajemen
web/idm/index.html
6 tab: Daftar IDM (W05), Rekap IDM/KPI 5-status (W04), Trend 2019-2024 (W06), Pending Verifikasi (W07-W08), Skor Published (W09), Kelola Periode (W10).
IDM — Detail Desa
web/idm/detail.html
Halaman detail desa: profil lengkap, skor IDM historis, 3 indeks (IKS/IKE/IKL), chart tren, 67 indikator tersegmentasi (W06).
Dana Desa
Alokasi, realisasi, dan rekap penyerapan dana desa
1 halaman
Dana Desa
web/dana-desa/index.html
Tab "Alokasi" — breakdown dasar/afirmasi/kinerja Rp 71T (W11). Tab "Realisasi" — chart penyerapan per wilayah (W12). Tab "Rekap Provinsi" (W13).
Program
Manajemen program pembangunan desa
2 halaman
Program — Daftar
web/program/index.html
Daftar program pembangunan desa — filter status/kategori, progress realisasi anggaran, badge status, tombol detail per program (W14).
Program — Detail
web/program/detail.html
Detail program: hero KPI card, info panel, chart progress anggaran, peta sebaran desa penerima Leaflet, tabel implementasi per desa (W15).
AI Analitik
Prediksi IDM, deteksi anomali, klasterisasi, rekomendasi
1 halaman
AI Analitik
web/ai-analitik/index.html
4 tab: Prediksi IDM Prophet/SARIMA (W16), Anomali Detection (W18), Klasterisasi Desa K-Means (W17), Rekomendasi kebijakan AI.
Pengguna
Manajemen pengguna dan role-based access control
1 halaman
Manajemen Pengguna
web/pengguna/index.html
Tabel pengguna dengan filter role (Pendamping/Sekdes/Kades/Dinas/Analis/Admin), badge role, aksi edit/nonaktif, form tambah pengguna (W19).
Pengaturan
Konfigurasi sistem, ETL jobs, audit log, keamanan
1 halaman
Pengaturan
web/pengaturan/index.html
7 tab: Profil (W20), Sistem, Notifikasi, Integrasi, Keamanan, ETL Jobs (W21), Audit Log (W22). ETL scheduler + log history per job.
Mobile App (PWA)
React PWA offline-first — Pendamping Desa, Sekdes, Kades
6 halaman
Mobile — Login
mobile/login.html
Splash screen + form login mobile. Offline-first — simpan token lokal untuk sync saat online.
Mobile — Home
mobile/home.html
Dashboard mobile: KPI grid, alert desa kritis, ringkasan IDM wilayah kerja pendamping. Bottom nav root screen.
Mobile — IDM
mobile/idm.html
List desa IDM binaan pendamping + detail screen inline (ScreenManager). Input indikator IDM offline-first dengan Dexie.js.
Mobile — Peta
mobile/peta.html
Peta Leaflet mobile — choropleth IDM desa, marker fasilitas. Touch-friendly zoom + layer control. Cached tiles offline via Workbox.
Mobile — Program
mobile/program.html
Daftar program desa + detail screen laporan realisasi. Form laporan progres dengan foto upload (offline queue sync).
Mobile — Profil
mobile/profil.html
Profil pengguna mobile — info akun, pengaturan tampilan dark/light mode toggle, status sync offline, tombol logout.