dashboard-desaplus-noc/Dashboard-MD/KINERJA-DIVISI-2.md

KINERJA-DIVISI-2

1. Tujuan Halaman

Halaman Kinerja Divisi berfungsi sebagai dashboard operasional untuk memantau progres pekerjaan lintas divisi perangkat desa secara real-time, mencakup status tugas, arsip digital, kegiatan, diskusi internal, dan statistik pendukung.

Halaman ini dipakai oleh:

• Kepala Desa
• Sekretaris Desa
• Kepala Divisi
• Admin Operasional

---

2. Struktur Tata Letak (Overall Layout)

Pola Layout

• Dashboard berbasis Card + Grid
• Scroll vertikal satu halaman
• Tidak ada sidebar khusus (diasumsikan sudah ada global sidebar)

Urutan Section (Top → Bottom)

1. Grafik Progres Tugas per Divisi
2. Ringkasan Tugas per Divisi (Sekretariat, Keuangan, Sosial, Humas)
3. Arsip Digital Perangkat Desa
4. Kartu Progres Kegiatan (Event / Program)
5. Statistik Dokumen & Progres Kegiatan
6. Diskusi Internal
7. Agenda / Acara Hari Ini

---

3. Komponen UI

3.1 Grafik Progres Tugas per Divisi

Tipe: Grouped Bar Chart

Data:

• Divisi: Sekretariat, Keuangan, Sosial, Humas

• Status:

  • Selesai
  • Berjalan
  • Tertunda

Interaksi:

• Hover tooltip menampilkan jumlah tugas
• Legend clickable (toggle series)

---

3.2 Card Ringkasan Divisi

Setiap divisi memiliki satu card berisi daftar tugas.

Struktur Card:

• Judul divisi

• List tugas:

  • Nama tugas
  • Badge status: selesai | proses | tertunda

Status Badge:

• Hijau: Selesai
• Kuning: Proses
• Merah: Tertunda

---

3.3 Arsip Digital Perangkat Desa

Tipe: Action Card / Button Card

Item:

• Surat Keputusan
• Laporan Keuangan
• Dokumentasi
• Notulensi Rapat

Interaksi:

• Klik membuka modul arsip
• Role-based access (view / upload)

---

3.4 Progres Kegiatan / Program

Tipe: Progress Card

Isi:

• Nama kegiatan
• Progress bar horizontal
• Tanggal
• Badge status (selesai)

---

3.5 Statistik Dokumen

a. Jumlah Dokumen

Tipe: Bar Chart

• Kategori: Gambar, Dokumen

b. Progres Kegiatan

Tipe: Pie Chart

Status:

• Selesai
• Dikerjakan
• Segera Dikerjakan
• Dibatalkan

---

3.6 Diskusi Internal

Tipe: List Card

Isi:

• Judul diskusi
• Pengirim
• Timestamp

Interaksi:

• Klik membuka thread diskusi

---

3.7 Agenda / Acara Hari Ini

Tipe: Informational Card

State:

• Empty state: "Tidak ada acara hari ini"

---

4. Gaya & Tema Visual

4.1 Warna

• Background utama: #0F172A / #111827
• Card: #1E293B
• Primary accent: Biru tua
• Success: Hijau
• Warning: Kuning
• Danger: Merah

4.2 Tipografi

• Font utama: Inter / Poppins
• Heading: Semi-bold
• Body: Regular
• Angka & statistik: Medium

4.3 Spasi & Radius

• Padding card: 16–24px
• Gap grid: 16–20px
• Border radius: 12–16px

---

5. Responsivitas

Desktop

• Multi-column grid (2–4 kolom)

Tablet

• Grid 2 kolom
• Grafik full-width

Mobile

• Semua card 1 kolom
• Chart di-scroll horizontal bila perlu

---

6. Ekspektasi Interaksi & Data

6.1 State Management

• Filter status tugas
• Sinkronisasi real-time (polling / websocket)

6.2 Contoh Struktur Data

{
  "division": "Keuangan",
  "tasks": [
    { "title": "Laporan APBDes", "status": "selesai" },
    { "title": "Verifikasi Dana", "status": "tertunda" }
  ]
}

---

7. Acceptance Criteria

• Semua status warna konsisten
• Chart sesuai data backend
• Empty state ditampilkan bila data kosong
• Mobile friendly tanpa overflow

---

8. Catatan Implementasi

• Chart library: Chart.js / Recharts / ECharts
• Dark mode default
• Akses berbasis role (viewer, editor, admin)

---

Status Dokumen: Final Draft Digunakan untuk: Implementasi Frontend & Kontrak API