{"id":"cmv1j7jy80001tb2nfqmze9vt","slug":"laporan","judul":"Laporan","deskripsi":null,"parentId":"cmv06akyz001hpj2o93e4r5gu","urut":10,"kategori":"web","tag":"[]","status":"draft","versi":null,"konsep":"## Tujuan\nTab laporan = ortu pantau perkembangan anak secara menyeluruh dalam satu layar. Bukan sekadar log aktivitas, tapi ringkasan + insight yang actionable.\n\n## Data Sumber (yang sudah ada di backend)\n- `GET /api/aktivitas` — ActivityLog anak (app_open, browser, quiz_lock, geo_exit, dll)\n- `GET /api/insights` — AI insight Gemini (pola 7 hari, level: info/warning/positive)\n- `GET /api/tugas` — tugas anak (PENDING/DIKUMPULKAN/SELESAI/DITOLAK)\n- `GET /api/token-ledger` — riwayat token (KUIS/TUGAS/CHALLENGE/PEMAKAIAN/PENYESUAIAN)\n- `GET /api/anak/streak` — streak harian\n- KuisSession — skor kuis AI, retry count\n\n## Layout yang Dibayangkan\n\n### 1. Header: Pilih Anak\nDropdown pilih anak (reuse dari LayarLaporan sekarang). Default anak pertama.\n\n### 2. Kartu Ringkasan (4 kartu atas)\n- **Tugas Selesai** — count + completion rate (%)\n- **Skor Kuis** — rata-rata skor kuis AI 7 hari terakhir\n- **Streak** — streak harian saat ini + terbaik\n- **Saldo Token** — saldo saat ini + tren (↑/↓ vs minggu lalu)\n\n### 3. AI Insight (Gemini)\nKartu insight dari `/api/insights`. Contoh:\n- ⚠ \"Anak sering keluar zona aman (5x minggu ini)\"\n- ✅ \"Tugas matematika selesai tepat waktu 3 hari berturut\"\n- ℹ \"Aktivitas app turun 20% — mungkin perlu tantangan baru\"\n\nLevel: warning (merah), positive (hijau), info (biru).\n\n### 4. Grafik Aktivitas Mingguan\nBar chart sederhana: aktivitas per hari (7 hari terakhir). Tiap bar = total aktivitas hari itu. Tap bar → detail.\n\n### 5. Ringkasan Tugas\n- Selesai / Pending / Ditolak (progress bar atau donut)\n- List tugas terbaru (5) dengan status badge\n\n### 6. Laporan Kuis AI\n- Rata-rata skor per mata pelajaran\n- Jumlah percobaan (retry)\n- Tren skor (naik/turun/stabil)\n\n### 7. Statistik Token\n- Saldo saat ini\n- Token masuk (kuis, tugas, challenge) vs keluar (pemakaian main) — 7 hari\n- Top aktivitas spender\n\n### 8. Timeline Aktivitas (log detail)\nLog aktivitas dengan filter:\n- Filter tipe (app_open, geo_exit, quiz_lock, dll)\n- Filter tanggal (hari ini / 7 hari / 30 hari)\n- Max 50 item, load more\n\n## Prioritas Implementasi\n1. **Phase 1 (cepat)**: Kartu ringkasan (4 kartu) + AI Insight + Timeline aktivitas — sebagian sudah ada di LayarLaporan, tinggal rapikan\n2. **Phase 2**: Ringkasan tugas + Laporan kuis AI — butuh endpoint baru `/api/laporan/tugas` + `/api/laporan/kuis`\n3. **Phase 3**: Grafik aktivitas mingguan + Statistik token — butuh agregasi query + bar chart Compose\n\n## Catatan Teknis\n- Backend: Next.js + Prisma, query agregasi di route baru\n- App ortu: Compose, ViewModel + StateFlow\n- AI Insight: reuse `/api/insights` (Gemini atau rule-based)\n- Grafik: Canvas Compose manual (no dependency) atau Vico library\n- Token: TokenLedger + TokenBalance query","createdAt":"2026-10-09T22:23:13.856Z","updatedAt":"2026-10-10T00:46:59.702Z","bagian":[{"id":"cmv1jjsbx0001ot2oz1hpryis","blueprintId":"cmv1j7jy80001tb2nfqmze9vt","judul":"MOCKUP","konten":"## 2 Varian Mockup\n\n### Varian 1: Compact Dashboard\nDensity tinggi, semua data dalam satu layar. 4 kartu stat di atas, insight langsung di bawah.\n\nLihat mockup: http://ckclqyo0mjy1nleecxs9chm5.103.93.129.94.sslip.io/sketches/laporan-compact.html\n\n### Varian 2: Airy Card\nSpacious, hero card gradient di atas, kartu besar dengan shadow. Lebih visual.\n\nLihat mockup: http://ckclqyo0mjy1nleecxs9chm5.103.93.129.94.sslip.io/sketches/laporan-airy.html\n\n## Perbandingan\n\n| Dimensi | Compact | Airy |\n|---------|---------|------|\n| Density | Tinggi | Rendah |\n| Scroll | Lebih sedikit | Lebih banyak |\n| Feel | Efisien, data-focused | Elegant, visual |\n| Hero | Tidak ada | Gradient card |\n| Best for | Power user, cepat scan | Daily check, santai |","media":"[]","urut":0,"createdAt":"2026-10-09T22:32:44.590Z","updatedAt":"2026-10-09T22:32:44.590Z"}],"children":[],"parent":{"slug":"app-ortu","judul":"App Ortu (Android)"}}