231 lines
3.7 KiB
Markdown
231 lines
3.7 KiB
Markdown
# 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)
|
||
|
||
```json
|
||
{
|
||
"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).
|