feat: update components with Mantine UI and improve dark mode support
Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
This commit is contained in:
230
Dashboard-MD/SOSIAL.md
Normal file
230
Dashboard-MD/SOSIAL.md
Normal file
@@ -0,0 +1,230 @@
|
||||
# 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).
|
||||
Reference in New Issue
Block a user