3.7 KiB
SOSIAL.md
Dokumen ini mendeskripsikan spesifikasi UI/UX, tata letak, gaya visual, serta ekspektasi data & interaksi untuk Halaman Sosial Desa. Digunakan sebagai acuan bersama antara UI/UX Designer, Frontend Developer, dan Backend/API.
1. Tujuan Halaman
Halaman Sosial berfungsi sebagai dashboard monitoring:
- Kesehatan masyarakat (ibu hamil, balita, stunting)
- Aktivitas Posyandu
- Pendidikan desa
- Beasiswa
- Event sosial & budaya
Fokus utama: ringkas, informatif, real-time friendly, dan mudah dipahami perangkat desa.
2. Tata Letak Keseluruhan
Struktur Global
-
Sidebar kiri (persisten)
- Navigasi utama aplikasi desa
- Menu aktif:
Sosial
-
Topbar
- Nama desa
- Profil user (Kepala Desa)
- Notifikasi
- Toggle tema (opsional)
-
Main Content Area (scrollable)
- Grid berbasis card
- Layout desktop: 2–3 kolom
- Mobile: 1 kolom (stack)
3. Komponen UI
3.1 Statistik Kesehatan (Summary Cards)
Tipe: KPI Cards
| Komponen | Deskripsi |
|---|---|
| Ibu Hamil Aktif | Total ibu hamil aktif saat ini |
| Balita Terdaftar | Total balita tercatat |
| Alert Stunting | Jumlah kasus/peringatan stunting |
| Posyandu Aktif | Jumlah posyandu yang aktif |
Elemen UI:
- Angka besar (headline)
- Label kecil
- Ikon kontekstual
3.2 Statistik Kesehatan (Progress Bar)
Menampilkan capaian dalam bentuk horizontal progress bar:
- Imunisasi Lengkap
- Pemeriksaan Rutin
- Gizi Baik
- Target Stunting
Behavior:
- Persentase dinamis
- Warna bar menyesuaikan status (normal / warning)
3.3 Jadwal Posyandu
Tipe: List Card
Setiap item menampilkan:
- Nama Posyandu
- Tanggal
- Jam kegiatan
Interaksi (opsional):
- Klik item → detail jadwal
- Filter berdasarkan wilayah / tanggal
3.4 Pendidikan
Tipe: Informational List
Data Siswa
- TK / PAUD
- SD
- SMP
- SMA
Info Sekolah
- Jumlah lembaga pendidikan
- Jumlah tenaga pengajar
Layout sederhana, fokus ke angka.
3.5 Beasiswa Desa
Tipe: Highlight Card
- Jumlah penerima beasiswa
- Total dana tersalurkan
- Tahun ajaran
Digunakan sebagai headline informasi bantuan pendidikan.
3.6 Kalender Event Budaya
Tipe: Event List
Setiap event:
- Nama kegiatan
- Tanggal
- Lokasi
Interaksi:
- Klik → detail event
- Potensi integrasi kalender
4. Gaya & Tema Visual
Warna
- Primary: Biru navy (#1F3A5F – estimasi)
- Secondary: Biru muda / abu terang
- Success: Hijau
- Warning: Oranye / Merah (stunting alert)
Font
-
Sans-serif modern (Inter / Poppins)
-
Hierarki jelas:
- Judul card
- Angka utama
- Label kecil
Spasi & Bentuk
- Padding card: 16–24px
- Border radius: 12–16px
- Shadow ringan (soft elevation)
5. Responsivitas
Desktop
- Grid 2–3 kolom
- Semua card terlihat tanpa overflow horizontal
Tablet
- Grid 2 kolom
Mobile
- 1 kolom (stack)
- KPI cards jadi swipe / vertical list
6. Ekspektasi Interaksi & Data
Interaksi Umum
- Hover state pada card
- Click-through ke halaman detail
- Data auto-refresh (optional)
Ekspektasi API (contoh)
{
"ibu_hamil": 87,
"balita": 342,
"alert_stunting": 12,
"posyandu_aktif": 8,
"kesehatan": {
"imunisasi": 92,
"pemeriksaan": 88,
"gizi": 86,
"stunting": 14
}
}
7. Acceptance Checklist
- Semua data tampil konsisten
- Tidak ada overflow di mobile
- Progress bar sesuai persentase
- Event & jadwal dapat diklik
- Alert stunting terlihat jelas
Catatan: Dokumen ini bersifat living document dan dapat diperluas ke modul detail (kesehatan, pendidikan, bantuan sosial).