# 📋 Hayfala Quran — Rancangan Halaman Tracker (Daily Habits)

> Sub-menu dari menu **Ibadah** · Versi: v1.0 · Tanggal: 2026-03-05

---

## 🗂️ Struktur Menu Tracker

```
Ibadah
└── Tracker
    ├── 1. Daily Check (Ibadah Harian)
    ├── 2. Tracker Baca Quran
    ├── 3. Target Khatam
    ├── 4. Tracker Hafalan
    └── 5. Statistik & Streak
```

---

## 🔥 1. Daily Check — Ibadah Harian

Inti dari halaman Tracker. Checklist harian yang harus diisi setiap hari.

### Komponen Tampilan
| Elemen | Detail |
|--------|--------|
| **Header Tanggal** | Hari ini + tombol navigasi ←→ (lihat hari lalu) |
| **Streak Badge** | 🔥 N hari berturut-turut |
| **Ring Progress** | Circular progress (misal: 5/8 selesai = 62%) |
| **Checklist Cards** | Setiap item = 1 card dengan ikon, nama, status |

### Daftar Item Checklist Default

#### 🕌 Sholat (5 item)
- [ ] Sholat Subuh
- [ ] Sholat Dzuhur
- [ ] Sholat Ashar
- [ ] Sholat Maghrib
- [ ] Sholat Isya

#### 📖 Quran (3 item)
- [ ] Baca Al-Quran (min. 1 halaman)
- [ ] Dzikir Pagi
- [ ] Dzikir Petang

#### 🤲 Ibadah Sunnah (5 item)
- [ ] Sholat Sunnah (Rawatib/Dhuha/Tahajud)
- [ ] Baca Hadits Harian
- [ ] Sedekah Hari Ini
- [ ] Puasa Sunnah (Senin/Kamis/Ayyamul Bidh)
- [ ] Doa Harian

#### ✨ Custom Habit (user-defined)
- Tambah habit pribadi dengan ikon & label bebas
- Max 10 custom habit

### Interaksi
- Tap item → centang ✅ dengan animasi confetti kecil
- Tap lagi → uncheck
- Long press → lihat detail / edit / hapus (custom habit)
- Selesaikan semua → animasi celebration + notifikasi "Masyaa Allah! Semua ibadah hari ini selesai 🎉"

---

## 📖 2. Tracker Baca Quran

### Komponen
| Elemen | Detail |
|--------|--------|
| **Progress Bar Juz** | 30 kotak Juz, warna berbeda: belum/sedang/selesai |
| **Halaman Terakhir** | "Terakhir dibaca: Hal. 234 · Al-Baqarah 2:255" |
| **Log Harian** | Riwayat tanggal + berapa halaman dibaca per hari |
| **Grafik Mingguan** | Bar chart: halaman/hari selama 7 hari terakhir |

### Status Juz
- 🔲 Belum dibaca (abu)
- 🟡 Sedang dibaca (kuning)
- ✅ Selesai (hijau)

---

## 🎯 3. Target Khatam

### Input User
| Field | Keterangan |
|-------|------------|
| **Mulai dari** | Pilih Juz / Halaman awal |
| **Target selesai** | Pilih tanggal khatam |
| **Hitung otomatis** | Sistem hitung: N halaman/hari yang harus dibaca |

### Tampilan
- Countdown: "X hari lagi menuju khatam"
- Progress: "Hal. 234 / 604 · 38.7% selesai"
- Status hari ini: "Hari ini: 2/3 halaman target ✅"
- Estimasi: "Jika konsisten, khatam pada [tanggal]"
- Alert jika tertinggal: "⚠️ Kamu tertinggal 4 halaman"

---

## 📝 4. Tracker Hafalan

### Tampilan
- Grid 114 surah dengan status
- Filter: Juz 1–30 · Panjang Surah · Status
- Tap surah → ubah status

### Status Hafalan per Surah
| Status | Ikon | Warna |
|--------|------|-------|
| Belum | 🔲 | Abu |
| Sedang Dihafal | 📝 | Biru |
| Hafal (perlu murojaah) | 🔄 | Kuning |
| Hafal Lancar | ✅ | Hijau |

### Statistik Hafalan
- Total surah hafal: X / 114
- Total ayat hafal: X / 6.236
- Juz penuh yang sudah hafal: Juz 30 ✅, Juz 29 🔄

---

## 📊 5. Statistik & Streak

### Streak Section
| Elemen | Detail |
|--------|--------|
| **Streak Sekarang** | 🔥 12 hari berturut-turut |
| **Streak Terpanjang** | 🏆 45 hari (rekor pribadi) |
| **Hari Ini** | Persentase penyelesaian |

### Grafik Kalender Heatmap
- Tampilan seperti GitHub contribution graph
- Warna intensitas berdasarkan % ibadah completed per hari
- Bisa scroll ke bulan-bulan sebelumnya

### Grafik Mingguan
- Bar chart: % penyelesaian per hari (7 hari terakhir)
- Rata-rata: "72% ibadah selesai per hari"

### Pencapaian (Badge Tracker)
| Badge | Syarat |
|-------|--------|
| 🔥 Streak 7 | 7 hari berturut |
| 🔥 Streak 30 | 30 hari berturut |
| 📖 Rajin Baca | Baca Quran 30 hari berturut |
| 🎯 Khatam Pertama | Selesaikan 1 khatam |
| ✅ Sempurna | 100% checklist selama 7 hari |
| 🤲 Sholat 5 Waktu | Lengkap 30 hari berturut |

---

## 🔔 Sistem Notifikasi Tracker

| Waktu | Notifikasi |
|-------|-----------|
| Setelah adzan Subuh | "Subuh sudah? Catat ibadah pagi kamu 🌅" |
| Setelah adzan Isya | "Jangan lupa checklist malam ini ✨" |
| Jam 22:00 | "Streak kamu 🔥 X hari! Jangan putus malam ini" |
| Custom | User bisa atur reminder sendiri |

---

## 🎨 Design Spec

### Warna
| Elemen | Warna |
|--------|-------|
| Primary (brand) | `#543CFF` |
| Selesai / sukses | `#00C853` |
| Sedang / progress | `#FF8B3D` |
| Belum / default | `#9CA3AF` |
| Streak fire | `#FF6B35` |
| Background | `#F7F8FC` |

### Komponen UI Kunci
- **Circular Progress Ring** — animasi smooth saat item di-check
- **Checklist Card** — rounded 16px, shadow ringan, swipe-to-check
- **Heatmap Calendar** — 7 kolom (Sen–Min), warna hijau intensity
- **Progress Bar Juz** — 30 blok kecil dalam grid
- **Streak Badge** — api beranimasi saat streak aktif

### Animasi
- Check item → scale bounce + warna berubah hijau
- Semua selesai → confetti shower (emoji: 🎊✨)
- Streak naik → fire animation
- Ring progress → smooth arc animation

---

## 📱 Layout Tab Navigation (dalam halaman Tracker)

```
┌──────────┬──────────┬──────────┬──────────┬──────────┐
│  Daily   │  Baca    │  Target  │  Hafalan │   Stats  │
│  Check   │  Quran   │  Khatam  │          │          │
└──────────┴──────────┴──────────┴──────────┴──────────┘
```

---

## 🗄️ Data & Penyimpanan

| Data | Disimpan di | Sinkronisasi |
|------|-------------|--------------|
| Checklist harian | Supabase (per user per tanggal) | Real-time |
| Streak count | Supabase | Real-time |
| Progress baca | Supabase | Real-time |
| Status hafalan | Supabase | Real-time |
| Custom habits | Supabase | Real-time |
| Backup offline | Local storage / Hive | Sync saat online |

---

## 🚀 Prioritas Pengembangan

| Fase | Fitur | Estimasi |
|------|-------|----------|
| **MVP (V2)** | Daily Check (sholat + quran + dzikir) + Streak | 1 sprint |
| **V2.1** | Tracker Baca Quran + kalender heatmap | 1 sprint |
| **V2.2** | Target Khatam + notifikasi | 1 sprint |
| **V3** | Tracker Hafalan + custom habit + statistik lengkap | 2 sprint |