Home›ZX Parenting›App Ortu (Android)›App Ortu (Android)›Laporan
DRAFT

Laporan

JSON

💡 Ide & Konsep

Tujuan

Tab laporan = ortu pantau perkembangan anak secara menyeluruh dalam satu layar. Bukan sekadar log aktivitas, tapi ringkasan + insight yang actionable.

Data Sumber (yang sudah ada di backend)

  • GET /api/aktivitas — ActivityLog anak (app_open, browser, quiz_lock, geo_exit, dll)
  • GET /api/insights — AI insight Gemini (pola 7 hari, level: info/warning/positive)
  • GET /api/tugas — tugas anak (PENDING/DIKUMPULKAN/SELESAI/DITOLAK)
  • GET /api/token-ledger — riwayat token (KUIS/TUGAS/CHALLENGE/PEMAKAIAN/PENYESUAIAN)
  • GET /api/anak/streak — streak harian
  • KuisSession — skor kuis AI, retry count

Layout yang Dibayangkan

1. Header: Pilih Anak

Dropdown pilih anak (reuse dari LayarLaporan sekarang). Default anak pertama.

2. Kartu Ringkasan (4 kartu atas)

  • Tugas Selesai — count + completion rate (%)
  • Skor Kuis — rata-rata skor kuis AI 7 hari terakhir
  • Streak — streak harian saat ini + terbaik
  • Saldo Token — saldo saat ini + tren (↑/↓ vs minggu lalu)

3. AI Insight (Gemini)

Kartu insight dari /api/insights. Contoh:

  • ⚠ "Anak sering keluar zona aman (5x minggu ini)"
  • ✅ "Tugas matematika selesai tepat waktu 3 hari berturut"
  • ℹ "Aktivitas app turun 20% — mungkin perlu tantangan baru"

Level: warning (merah), positive (hijau), info (biru).

4. Grafik Aktivitas Mingguan

Bar chart sederhana: aktivitas per hari (7 hari terakhir). Tiap bar = total aktivitas hari itu. Tap bar → detail.

5. Ringkasan Tugas

  • Selesai / Pending / Ditolak (progress bar atau donut)
  • List tugas terbaru (5) dengan status badge

6. Laporan Kuis AI

  • Rata-rata skor per mata pelajaran
  • Jumlah percobaan (retry)
  • Tren skor (naik/turun/stabil)

7. Statistik Token

  • Saldo saat ini
  • Token masuk (kuis, tugas, challenge) vs keluar (pemakaian main) — 7 hari
  • Top aktivitas spender

8. Timeline Aktivitas (log detail)

Log aktivitas dengan filter:

  • Filter tipe (app_open, geo_exit, quiz_lock, dll)
  • Filter tanggal (hari ini / 7 hari / 30 hari)
  • Max 50 item, load more

Prioritas Implementasi

1. Phase 1 (cepat): Kartu ringkasan (4 kartu) + AI Insight + Timeline aktivitas — sebagian sudah ada di LayarLaporan, tinggal rapikan

2. Phase 2: Ringkasan tugas + Laporan kuis AI — butuh endpoint baru /api/laporan/tugas + /api/laporan/kuis

3. Phase 3: Grafik aktivitas mingguan + Statistik token — butuh agregasi query + bar chart Compose

Catatan Teknis

  • Backend: Next.js + Prisma, query agregasi di route baru
  • App ortu: Compose, ViewModel + StateFlow
  • AI Insight: reuse /api/insights (Gemini atau rule-based)
  • Grafik: Canvas Compose manual (no dependency) atau Vico library
  • Token: TokenLedger + TokenBalance query

MOCKUP

2 Varian Mockup

Varian 1: Compact Dashboard

Density tinggi, semua data dalam satu layar. 4 kartu stat di atas, insight langsung di bawah.

Lihat mockup: http://ckclqyo0mjy1nleecxs9chm5.103.93.129.94.sslip.io/sketches/laporan-compact.html

Varian 2: Airy Card

Spacious, hero card gradient di atas, kartu besar dengan shadow. Lebih visual.

Lihat mockup: http://ckclqyo0mjy1nleecxs9chm5.103.93.129.94.sslip.io/sketches/laporan-airy.html

Perbandingan

| Dimensi | Compact | Airy |

|---------|---------|------|

| Density | Tinggi | Rendah |

| Scroll | Lebih sedikit | Lebih banyak |

| Feel | Efisien, data-focused | Elegant, visual |

| Hero | Tidak ada | Gradient card |

| Best for | Power user, cepat scan | Daily check, santai |