> ## Documentation Index > Fetch the complete documentation index at: https://docs.quinnsambal.com/llms.txt > Use this file to discover all available pages before exploring further. # Habits *** title: "Habits" description: "Habit tracker dengan streak system, XP gamification, GitHub-style heatmap, 7 kategori, dan ProductivityOnboarding di SNISHOP ERP." ------------------------------------------------------------------------------------------------------------------------------------------------ # Habits Habits Halaman Habits membantu kamu membangun dan memantau kebiasaan harian atau mingguan. Dibangun di atas `HabitsPage.jsx` (708 baris) dengan sistem gamifikasi terintegrasi — setiap completion memberikan XP yang berkontribusi ke level user. Fitur unggulan adalah **GitHub-style activity heatmap** untuk visualisasi konsistensi 49 hari terakhir, **streak tracking** dengan animasi api, dan **7-day dot indicators** yang menampilkan pola completion per habit. ## Arsitektur Komponen ```mermaid theme={null} graph TD A[HabitsPage.jsx
708 lines] --> B[base44Raw.entities.Habit] A --> C[base44Raw.entities.HabitLog] A --> D[HabitForm
323 lines] A --> E[HabitQuickAdd
143 lines] A --> F[Activity Heatmap
49 days] A --> G[7-Day Dot Indicators] A --> H[Streak Counter
with fire animation] A --> I[gamificationHelper] A --> J[ProductivityOnboarding
447 lines] D --> K[6 Color Themes] D --> L[7 Categories] D --> M[3 Frequency Types] E --> N[15 Emoji Icons] E --> O[6 Quick Templates] ``` ### Gambaran Umum Sistem Modul Habits merupakan bagian dari ekosistem **Productivity** di SNISHOP ERP yang terintegrasi penuh dengan sistem gamifikasi, goal tracking, dan achievement. Setiap habit yang diselesaikan memberikan XP yang mempengaruhi level pengguna, membuka achievement baru, dan berkontribusi pada produktivitas keseluruhan perusahaan. Sistem ini dirancang untuk mendukung baik penggunaan **personal** maupun **tim/perusahaan** melalui field `company_id` yang bersifat opsional. Habit dengan `company_id` null bersifat personal, sementara habit yang terikat company dapat dikelola secara terpusat oleh admin perusahaan. ### Mengapa base44Raw? HabitsPage menggunakan `base44Raw.entities.Habit` dan `base44Raw.entities.HabitLog` langsung (bypass throttle proxy) untuk memastikan operasi CRUD berjalan reliable tanpa delay dari throttling. Pendekatan ini dipilih karena operasi habit memerlukan responsivitas tinggi — terutama saat toggle completion yang harus langsung tercermin di UI tanpa jeda. *** ## Entity Relationship Diagram ```mermaid theme={null} erDiagram User ||--o{ Habit : "memiliki" User ||--o{ HabitLog : "mencatat" User ||--o{ PersonalGoal : "merencanakan" User ||--o{ Achievement : "meraih" User ||--o{ Goal : "menetapkan" Company ||--o{ Habit : "menampung" Company ||--o{ Goal : "menetapkan" Habit ||--o{ HabitLog : "dicatat dalam" Habit }o--|| User : "dimiliki oleh" Habit }o--o| Company : "terikat pada" Goal ||--o{ Milestone : "memiliki" PersonalGoal ||--o{ PersonalMilestone : "memiliki" PersonalGoal }o--o{ Task : "terkait dengan" Task }o--o| RecurringTask : "dihasilkan oleh" Achievement }o--|| User : "diraih oleh" User { string email PK string full_name string role "admin | user" number productivity_score number current_streak number longest_streak number user_level number achievement_points string subscription_plan "free | pro | business | advanced | enterprise" } Habit { string user_id FK string company_id FK string title string description string icon string color "blue | orange | purple | cyan | green | red" string category "Kesehatan | Pekerjaan | Belajar | Olahraga | Keuangan | Personal | Lainnya" object frequency date start_date date end_date string reminder_time number target_value string target_unit number reward_xp boolean negative_habit boolean is_active number streak number best_streak number total_completions date last_completed_date number xp } HabitLog { string habit_id FK string user_id FK date date boolean is_completed number logged_value string notes number xp_change boolean completed "legacy" number value "legacy" } Goal { string company_id FK string goal_type "personal | team | company" string title string description string category "revenue | productivity | quality | growth | efficiency | custom" string target_type "number | percentage | boolean" number target_value number current_value string unit date start_date date end_date string status "not_started | in_progress | completed | failed | cancelled" number progress_percentage string owner_id FK array assigned_to boolean is_recurring string recurrence_pattern } PersonalGoal { string user_id FK string title string description string goal_type "okr | smart_goal | general" string category "career | health | learning | personal | financial | relationship" string target_metric string current_metric number target_value number current_value date deadline string priority "low | medium | high" string status "active | paused | completed | abandoned" number progress_percentage array milestones array related_tasks string notes } Achievement { string user_id FK string achievement_type string title string description string icon datetime earned_at number points } ``` *** ## Entity Schema Tables ### Habit Entity | Field | Tipe | Required | Default | Deskripsi | | - | - | - | - | - | | `user_id` | string | Ya | — | Email pengguna pemilik habit | | `company_id` | string | Tidak | null | ID perusahaan (null untuk personal) | | `title` | string | Ya | — | Nama habit yang akan dilacak | | `description` | string | Tidak | — | Deskripsi detail habit | | `icon` | string | Ya | — | Emoji icon untuk habit (15 pilihan tersedia) | | `color` | string | Tidak | `blue` | Warna tema habit: `blue`, `orange`, `purple`, `cyan`, `green`, `red` | | `category` | string | Tidak | `Personal` | Kategori habit: `Kesehatan`, `Pekerjaan`, `Belajar`, `Olahraga`, `Keuangan`, `Personal`, `Lainnya` | | `frequency` | object | Tidak | — | Konfigurasi frekuensi dengan sub-field `type`, `days_of_week`, `times_per_week` | | `frequency.type` | string | Tidak | `daily` | Tipe frekuensi: `daily`, `weekly`, `custom` | | `frequency.days_of_week` | string\[] | Tidak | — | Hari-hari tertentu untuk frekuensi custom: `Mon`, `Tue`, `Wed`, `Thu`, `Fri`, `Sat`, `Sun` | | `frequency.times_per_week` | number | Tidak | 1 | Jumlah kali per minggu untuk frekuensi weekly | | `start_date` | date | Tidak | — | Tanggal mulai tracking habit | | `end_date` | date | Tidak | — | Tanggal berakhirnya tracking habit (opsional) | | `reminder_time` | string | Tidak | — | Waktu pengingat harian (format HH:MM) | | `target_value` | number | Tidak | — | Target kuantitatif per sesi (misal: 8 gelas air) | | `target_unit` | string | Tidak | — | Satuan target (misal: gelas, menit, halaman) | | `reward_xp` | number | Tidak | 5 | XP yang didapat setiap kali habit selesai | | `negative_habit` | boolean | Tidak | false | Flag untuk habit buruk yang ingin dihentikan (misal: merokok) | | `is_active` | boolean | Tidak | true | Status aktif habit — habit nonaktif tidak dihitung dalam streak | | `streak` | number | Tidak | 0 | Jumlah hari berturut-turut habit selesai saat ini | | `best_streak` | number | Tidak | 0 | Rekor streak terbaik sepanjang waktu | | `total_completions` | number | Tidak | 0 | Total jumlah habit selesai sejak dibuat | | `last_completed_date` | date | Tidak | — | Tanggal terakhir habit diselesaikan | | `xp` | number | Tidak | 0 | Total XP yang terkumpul dari habit ini | ### HabitLog Entity | Field | Tipe | Required | Default | Deskripsi | | - | - | - | - | - | | `habit_id` | string | Ya | — | Referensi ke entitas Habit yang dilog | | `user_id` | string | Ya | — | Email pengguna pemilik log | | `date` | date | Ya | — | Tanggal pencatatan habit (format YYYY-MM-DD) | | `is_completed` | boolean | Tidak | false | True jika habit selesai, false jika terlewat | | `logged_value` | number | Tidak | — | Nilai yang dicatat untuk habit kuantitatif (misal: 6 gelas dari target 8) | | `notes` | string | Tidak | — | Catatan singkat untuk log ini (misal: "Terasa berat hari ini") | | `xp_change` | number | Tidak | 0 | XP yang didapat atau hilang dari log ini | | `completed` | boolean | Tidak | false | Status completion (legacy field untuk compatibility) | | `value` | number | Tidak | 1 | Nilai completion (legacy field) | ### Goal Entity | Field | Tipe | Required | Default | Deskripsi | | - | - | - | - | - | | `company_id` | string | Tidak | null | ID perusahaan (null untuk personal goal) | | `goal_type` | string | Tidak | `personal` | Tipe goal: `personal`, `team`, `company` | | `title` | string | Ya | — | Judul goal | | `description` | string | Tidak | — | Deskripsi detail goal | | `category` | string | Tidak | `custom` | Kategori: `revenue`, `productivity`, `quality`, `growth`, `efficiency`, `custom` | | `target_type` | string | Tidak | `number` | Tipe target: `number`, `percentage`, `boolean` | | `target_value` | number | Ya | — | Nilai target yang ingin dicapai | | `current_value` | number | Tidak | 0 | Progress saat ini terhadap target | | `unit` | string | Tidak | — | Satuan (Rp, unit, %, jam, dll) | | `start_date` | date | Ya | — | Tanggal mulai goal | | `end_date` | date | Ya | — | Tanggal deadline goal | | `status` | string | Tidak | `not_started` | Status: `not_started`, `in_progress`, `completed`, `failed`, `cancelled` | | `progress_percentage` | number | Tidak | 0 | Progress dalam persen (0-100) | | `owner_id` | string | Tidak | — | Email pemilik goal | | `assigned_to` | string\[] | Tidak | — | Array email yang di-assign ke goal ini | | `milestones` | object\[] | Tidak | — | Array milestone dengan `title`, `target_value`, `due_date`, `completed`, `completed_at` | | `is_recurring` | boolean | Tidak | false | Apakah goal berulang secara otomatis | | `recurrence_pattern` | string | Tidak | — | Pola pengulangan: `daily`, `weekly`, `monthly`, `quarterly`, `yearly` | | `notification_enabled` | boolean | Tidak | true | Apakah notifikasi progress diaktifkan | | `notification_frequency` | string | Tidak | `weekly` | Frekuensi notifikasi: `daily`, `weekly`, `milestone` | ### PersonalGoal Entity | Field | Tipe | Required | Default | Deskripsi | | - | - | - | - | - | | `user_id` | string | Ya | — | ID pengguna pemilik tujuan | | `title` | string | Ya | — | Judul tujuan personal | | `description` | string | Tidak | — | Deskripsi detail tujuan | | `goal_type` | string | Tidak | `smart_goal` | Metodologi: `okr`, `smart_goal`, `general` | | `category` | string | Tidak | — | Kategori: `career`, `health`, `learning`, `personal`, `financial`, `relationship` | | `target_metric` | string | Ya | — | Metrik target (misal: "menyelesaikan buku") | | `current_metric` | string | Tidak | — | Metrik pencapaian saat ini | | `target_value` | number | Tidak | — | Nilai target numerik (opsional) | | `current_value` | number | Tidak | 0 | Nilai pencapaian numerik saat ini | | `deadline` | date | Ya | — | Tanggal batas waktu penyelesaian | | `priority` | string | Tidak | `medium` | Prioritas: `low`, `medium`, `high` | | `status` | string | Tidak | `active` | Status: `active`, `paused`, `completed`, `abandoned` | | `progress_percentage` | number | Tidak | 0 | Persentase progress (0-100) | | `milestones` | object\[] | Tidak | — | Array milestone dengan `milestone_title`, `target_date`, `completed`, `completed_date` | | `related_tasks` | string\[] | Tidak | — | Task IDs yang terkait dengan goal ini | | `notes` | string | Tidak | — | Catatan tambahan untuk goal | ### Achievement Entity | Field | Tipe | Required | Default | Deskripsi | | - | - | - | - | - | | `user_id` | string | Ya | — | ID pengguna yang meraih achievement | | `achievement_type` | string | Ya | — | Jenis pencapaian (lihat tabel enum di bawah) | | `title` | string | Ya | — | Judul achievement | | `description` | string | Tidak | — | Deskripsi achievement | | `icon` | string | Tidak | — | Emoji atau icon achievement | | `earned_at` | datetime | Tidak | — | Timestamp kapan achievement diraih | | `points` | number | Tidak | 0 | Poin yang didapat dari achievement ini | *** ## Habit Lifecycle State Diagram ```mermaid theme={null} stateDiagram-v2 [*] --> Draft: User membuat habit baru Draft --> Active: Habit diaktifkan
(is_active = true) Active --> Tracking: User mulai melacak
(start_date tercapai) Tracking --> Completed: Semua target
tercapai Tracking --> Active: Habit berlanjut
hari berikutnya Active --> Paused: User menonaktifkan
sementara (is_active = false) Paused --> Active: User mengaktifkan
kembali Active --> Archived: end_date tercapai
atau manual archive Completed --> Archived: Habit selesai
sepenuhnya Archived --> [*] state Tracking { [*] --> DailyCheck DailyCheck --> Logged: User log completion DailyCheck --> Missed: Hari berlalu
tanpa log Logged --> StreakUp: Streak bertambah Missed --> StreakReset: Streak direset ke 0 StreakUp --> DailyCheck StreakReset --> DailyCheck Logged --> [*] Missed --> [*] } ``` *** ## Enum Reference Tables ### Habit Color | Nilai | Hex | Kegunaan | | - | - | - | | `blue` | Biru | Produktivitas, kerja, fokus | | `orange` | Oranye | Olahraga, fisik, energi | | `purple` | Ungu | Belajar, pengembangan diri | | `cyan` | Cyan | Kesehatan mental, mindfulness | | `green` | Hijau | Keuangan, investasi, pertumbuhan | | `red` | Merah | Urgent, prioritas tinggi, penting | ### Habit Category | Kategori | Deskripsi | Contoh Habit | | - | - | - | | `Kesehatan` | Kebiasaan terkait kesehatan fisik dan nutrisi | Minum 8 gelas air, tidur 8 jam, makan sayur | | `Pekerjaan` | Produktivitas dan efisiensi kerja | Review email, planning harian, deep work 2 jam | | `Belajar` | Pengembangan ilmu dan skill baru | Baca 30 menit, online course, praktik coding | | `Olahraga` | Aktivitas fisik dan kebugaran | Jogging 30 menit, gym, yoga, stretching | | `Keuangan` | Manajemen dan perencanaan keuangan | Catat pengeluaran, review budget, investasi | | `Personal` | Kebiasaan personal dan self-care | Meditasi, journaling, self-reflection | | `Lainnya` | Custom kategori untuk kebutuhan khusus | Habit lainnya yang tidak masuk kategori di atas | ### Frequency Type | Tipe | Konfigurasi | Deskripsi | Contoh Penggunaan | | - | - | - | - | | `daily` | — | Setiap hari tanpa pengecualian | Minum air, meditasi, baca buku | | `weekly` | `times_per_week` (number) | X kali per minggu, hari bebas | Olahraga 3x seminggu | | `custom` | `days_of_week[]` (string\[]) | Hari tertentu saja | `Mon`, `Wed`, `Fri` untuk gym | ### Days of Week (Custom Frequency) | Nilai | Hari | | - | - | | `Mon` | Senin | | `Tue` | Selasa | | `Wed` | Rabu | | `Thu` | Kamis | | `Fri` | Jumat | | `Sat` | Sabtu | | `Sun` | Minggu | ### Goal Status | Status | Deskripsi | Warna Indikator | | - | - | - | | `not_started` | Goal belum dimulai, masih dalam tahap perencanaan | Abu-abu | | `in_progress` | Goal sedang dikerjakan, progress berjalan | Biru | | `completed` | Goal berhasil dicapai sesuai target | Hijau | | `failed` | Goal gagal dicapai sebelum deadline | Merah | | `cancelled` | Goal dibatalkan oleh pemilik atau admin | Abu-abu gelap | ### Goal Type | Tipe | Deskripsi | Scope | | - | - | - | | `personal` | Goal individu untuk pengembangan diri | User | | `team` | Goal bersama untuk satu tim | Tim | | `company` | Goal strategis perusahaan | Perusahaan | ### Goal Category | Kategori | Deskripsi | Contoh | | - | - | - | | `revenue` | Target pendapatan dan penghasilan | Revenue Q4 Rp 500 juta | | `productivity` | Target efisiensi dan output | Selesaikan 50 task/bulan | | `quality` | Target kualitas dan standar | Zero bug production | | `growth` | Target pertumbuhan dan ekspansi | Tambah 1000 user baru | | `efficiency` | Target pengurangan waste dan optimasi | Kurangi waktu deploy 50% | | `custom` | Kategori custom sesuai kebutuhan | Target khusus perusahaan | ### Personal Goal Type (Metodologi) | Tipe | Deskripsi | Kapan Digunakan | | - | - | - | | `okr` | Objectives and Key Results — metodologi Google | Goal strategis dengan key results terukur | | `smart_goal` | Specific, Measurable, Achievable, Relevant, Time-bound | Goal personal yang terstruktur | | `general` | Goal umum tanpa framework khusus | Goal sederhana dan fleksibel | ### Personal Goal Category | Kategori | Deskripsi | Contoh | | - | - | - | | `career` | Pengembangan karir dan profesional | Promosi jabatan, sertifikasi baru | | `health` | Kesehatan dan kebugaran personal | Turun 5 kg, lari 10 km | | `learning` | Pembelajaran dan peningkatan skill | Selesaikan 10 buku teknis | | `personal` | Pengembangan diri secara umum | Bangun rutinitas pagi | | `financial` | Tujuan keuangan personal | Dana darurat 6 bulan pengeluaran | | `relationship` | Hubungan interpersonal | Quality time keluarga setiap minggu | ### Personal Goal Priority | Prioritas | Deskripsi | Tingkat Urgensi | | - | - | - | | `low` | Bisa ditunda, tidak mendesak | Rendah | | `medium` | Penting tetapi tidak kritis | Sedang | | `high` | Sangat penting dan mendesak | Tinggi | ### Personal Goal Status | Status | Deskripsi | Tindakan yang Tersedia | | - | - | - | | `active` | Goal sedang dikerjakan | Log progress, update milestone | | `paused` | Goal dijeda sementara | Resume, batalkan | | `completed` | Goal berhasil diselesaikan | Lihat ringkasan, buat goal baru | | `abandoned` | Goal ditinggalkan tanpa diselesaikan | Arsipkan, buat ulang | ### Achievement Type | Tipe | Deskripsi | Cara Meraih | | - | - | - | | `task_streak` | Streak penyelesaian task | Selesaikan task beberapa hari berturut-turut | | `first_task` | Menyelesaikan task pertama | Selesaikan 1 task pertama kali | | `task_master` | Menyelesaikan banyak task | Selesaikan 100+ task | | `note_taker` | Rajin membuat catatan | Buat 50+ catatan | | `financial_tracker` | Rutin melacak keuangan | Catat 30+ transaksi | | `collaborator` | Aktif berkolaborasi | Assign dan selesaikan task tim | | `early_bird` | Produktif di pagi hari | Selesaikan task sebelum jam 8 | | `night_owl` | Produktif di malam hari | Selesaikan task setelah jam 10 malam | | `team_player` | Pemain tim yang solid | Kontribusi ke 5+ proyek tim | | `productivity_champion` | Juara produktivitas | Capai level tinggi di semua metrik | ### User Role | Role | Deskripsi | Akses Habits | | - | - | - | | `admin` | Administrator dengan akses penuh | Kelola semua habit dalam perusahaan | | `user` | Pengguna reguler | Kelola habit pribadi sendiri | ### Subscription Plan | Plan | Deskripsi | Batas Habit | | - | - | - | | `free` | Plan gratis | Habit dasar | | `pro` | Plan profesional | Habit unlimited | | `business` | Plan bisnis | Habit unlimited + fitur tim | | `advanced` | Plan lanjutan | Habit unlimited + fitur advanced | | `enterprise` | Plan perusahaan | Semua fitur tanpa batas | ### Goal Recurrence Pattern | Pola | Deskripsi | Contoh | | - | - | - | | `daily` | Berulang setiap hari | Review harian | | `weekly` | Berulang setiap minggu | Review mingguan | | `monthly` | Berulang setiap bulan | Target bulanan | | `quarterly` | Berulang setiap kuartal | OKR kuartalan | | `yearly` | Berulang setiap tahun | Resolusi tahunan | ### Notification Frequency (Goal) | Frekuensi | Deskripsi | Kapan Notifikasi Dikirim | | - | - | - | | `daily` | Setiap hari | Ringkasan progress harian | | `weekly` | Setiap minggu | Ringkasan progress mingguan | | `milestone` | Saat milestone tercapai | Hanya saat milestone selesai | *** ## 15 Icon Emoji 💪 🏃 📚 💰 🧘 🍎 💧 😴 🎯 ✍️ 🎨 🎵 💻 🌱 ❤️ *** ## Streak Calculation Algorithm Fungsi `calculateStreak()` menghitung streak dengan menelusuri 60 hari ke belakang: ```mermaid theme={null} flowchart TD A[Start: hari ini] --> B{Semua habit completed
hari ini?} B -->|Tidak| C[Streak = 0] B -->|Ya| D[Streak = 1] D --> E[Mundur 1 hari] E --> F{Semua habit completed?} F -->|Ya| G[Streak++] G --> E F -->|Tidak| H[Return streak] H --> I[Max lookback: 60 days] ``` Streak dihitung berdasarkan **semua habit aktif** — jika ada satu saja yang tidak selesai, streak berhenti. ### Detail Algoritma Algoritma streak bekerja dengan prinsip **all-or-nothing**: streak global user hanya terus berjalan jika SEMUA habit aktif diselesaikan pada hari tersebut. Ini mendorong konsistensi menyeluruh, bukan hanya pada habit tertentu. Beberapa aturan penting: * **Max lookback 60 hari**: Algoritma tidak menelusuri lebih dari 60 hari ke belakang untuk performa * **Habit nonaktif diabaikan**: Habit dengan `is_active = false` tidak mempengaruhi perhitungan streak * **Negative habit**: Untuk habit buruk (`negative_habit = true`), logikanya dibalik — streak terus berjalan jika user BERHASIL menghindari habit tersebut * **Best streak tracking**: Setiap kali streak saat ini melebihi `best_streak`, nilai `best_streak` diperbarui secara otomatis *** ## Sequence Diagrams ### Flow 1: Logging Habit Completion ```mermaid theme={null} sequenceDiagram actor User participant UI as HabitsPage.jsx participant Raw as base44Raw participant Log as HabitLog Entity participant Habit as Habit Entity participant Gamif as gamificationHelper participant UserEntity as User Entity User->>UI: Klik checkbox habit UI->>Raw: base44Raw.entities.HabitLog.create() Raw->>Log: Insert new log
{habit_id, user_id, date, is_completed: true} Log-->>Raw: Log created Raw-->>UI: Return log data UI->>Raw: base44Raw.entities.Habit.update() Raw->>Habit: Increment total_completions
Update last_completed_date
Add reward_xp to xp Habit-->>Raw: Habit updated Raw-->>UI: Return updated habit UI->>Gamif: calculateLevelFromXP(totalXP) Gamif-->>UI: Return new level alt Level Up UI->>UserEntity: Update user_level UI->>UI: Tampilkan animasi Level Up! end UI->>UI: Recalculate streak UI->>UI: Update heatmap visualization UI->>UI: Update 7-day dot indicators UI->>UI: Tampilkan XP change animation (+5) ``` ### Flow 2: Streak Calculation ```mermaid theme={null} sequenceDiagram actor User participant UI as HabitsPage.jsx participant Calc as calculateStreak() participant Log as HabitLog Entity participant Habit as Habit Entity User->>UI: Toggle habit completion UI->>Calc: calculateStreak(allHabits, allLogs) loop Untuk setiap hari (mundur dari hari ini, max 60 hari) Calc->>Habit: Get active habits for date Habit-->>Calc: Return active habits list loop Untuk setiap active habit Calc->>Log: Check HabitLog where
habit_id = X AND date = Y Log-->>Calc: Return log entry alt Log exists AND is_completed = true Calc->>Calc: Continue ke habit berikutnya else Log missing OR is_completed = false Calc->>Calc: BREAK — streak berhenti end end alt Semua habit completed Calc->>Calc: streak++ else Ada yang tidak completed Calc->>Calc: Return current streak end end Calc-->>UI: Return final streak count alt streak > best_streak UI->>Habit: Update best_streak = streak end UI->>UI: Render streak counter
with fire animation ``` ### Flow 3: Quick Add Habit from Template ```mermaid theme={null} sequenceDiagram actor User participant UI as HabitQuickAdd participant Form as HabitForm participant Raw as base44Raw participant Habit as Habit Entity User->>UI: Klik template (misal: "Minum Air") UI->>UI: Pre-fill form data
icon: 💧, color: cyan
category: Kesehatan
frequency: daily User->>UI: Konfirmasi / Edit detail UI->>Form: Open HabitForm dengan pre-filled data User->>Form: Submit form Form->>Raw: base44Raw.entities.Habit.create() Raw->>Habit: Insert new habit
{title, icon, color, category,
frequency, start_date, reward_xp: 5} Habit-->>Raw: Habit created Raw-->>Form: Return new habit data Form-->>UI: Close form UI->>UI: Refresh habit list UI->>UI: Tampilkan habit baru di daftar ``` ### Flow 4: Goal Progress Update from Habit ```mermaid theme={null} sequenceDiagram actor User participant UI as HabitsPage participant Habit as Habit Entity participant Log as HabitLog participant GoalUI as GoalsPage participant Goal as Goal/PersonalGoal Entity User->>UI: Selesaikan habit harian UI->>Habit: Update total_completions++ UI->>Log: Create HabitLog entry Note over UI,Goal: Jika habit terkait dengan goal UI->>Goal: Check related goals Goal-->>UI: Return matching goals loop Untuk setiap related goal UI->>Goal: Update current_value++ Goal->>Goal: Recalculate progress_percentage alt progress_percentage >= 100 Goal->>Goal: Set status = completed UI->>UI: Tampilkan goal completion animation end end ``` *** ## XP & Gamifikasi ```mermaid theme={null} flowchart LR A[Habit Completed] --> B[+5 XP
default reward_xp] C[Habit Not Completed] --> D[-5 XP] B --> E[gamificationHelper] D --> E E --> F[calculateLevelFromXP] F --> G[Level Up!] ``` | Aksi | XP | | - | - | | Habit selesai | +5 (atau `reward_xp` custom) | | Habit tidak selesai | -5 | | Level up | Determined by `gamificationHelper` | ### Mekanisme Gamifikasi Sistem gamifikasi di modul Habits dirancang untuk memberikan motivasi berkelanjutan melalui beberapa lapisan reward: 1. **XP per Habit**: Setiap habit yang diselesaikan memberikan XP sesuai `reward_xp` (default 5 XP). Habit dengan `negative_habit = true` yang berhasil dihindari juga memberikan XP. 2. **Level Progression**: Total XP dari semua habit dan aktivitas produktivitas lainnya diakumulasi dan dikonversi ke level user melalui fungsi `calculateLevelFromXP()` di `gamificationHelper`. 3. **Achievement Unlocks**: Pencapaian tertentu (streak 7 hari, 30 hari, 100 completions, dll) membuka achievement yang tercatat di entity `Achievement` dan memberikan bonus `achievement_points`. 4. **Streak Bonus**: Streak yang panjang memberikan multiplier XP — semakin panjang streak, semakin besar bonus XP per completion. 5. **Leaderboard**: User dengan `productivity_score` tertinggi dapat dilihat di leaderboard tim/perusahaan. *** ## Activity Heatmap (GitHub-Style) Visualisasi 49 hari terakhir dalam grid 7x7: ```mermaid theme={null} graph LR subgraph "49-Day Heatmap" A[Level 0
Tidak ada] --- B[Level 1
Rendah] --- C[Level 2] --- D[Level 3] --- E[Level 4] --- F[Level 5] --- G[Level 6
Semua selesai] end ``` Setiap kotak mewakili satu hari. Warna semakin gelap menunjukkan semakin banyak habit yang selesai hari itu. ### Cara Membaca Heatmap * **Kolom**: Setiap kolom mewakili satu minggu (7 hari, Senin sampai Minggu) * **Baris**: Setiap baris mewakili hari dalam seminggu * **Intensitas warna**: Semakin gelap/hijau, semakin tinggi completion rate hari tersebut * **Kotak kosong**: Hari tanpa aktivitas habit atau hari di masa depan Heatmap ini berguna untuk mengidentifikasi pola produktivitas — misalnya, user mungkin menyadari bahwa mereka kurang produktif di hari Jumat atau sangat konsisten di awal minggu. *** ## 7-Day Dot Indicators Setiap habit row menampilkan 7 titik yang mewakili 7 hari terakhir: | Dot | Arti | | - | - | | 🟢 Hijau | Habit selesai hari itu | | ⚪ Abu-abu | Habit tidak selesai | Indikator ini memberikan pandangan cepat (glanceable) tentang konsistensi recent per habit individual, melengkapi heatmap yang menampilkan pandangan agregat semua habit. *** ## HabitQuickAdd Templates 6 template siap pakai untuk quick creation: | Template | Icon | Kategori | Color | Frequency | Default XP | | - | - | - | - | - | - | | Minum Air | 💧 | Kesehatan | cyan | daily | 5 | | Olahraga | 🏃 | Olahraga | orange | weekly (3x) | 5 | | Baca Buku | 📚 | Belajar | purple | daily | 5 | | Meditasi | 🧘 | Personal | cyan | daily | 5 | | Catat Pengeluaran | 💰 | Keuangan | green | daily | 5 | | Planning Harian | 🎯 | Pekerjaan | blue | daily (Mon-Fri) | 5 | Template ini dirancang berdasarkan riset kebiasaan populer dan dapat dikustomisasi lebih lanjut setelah dibuat. Setiap template sudah dikonfigurasi dengan icon, warna, dan kategori yang sesuai untuk mengurangi friction saat membuat habit baru. *** ## ProductivityOnboarding Komponen onboarding gamified (447 baris) yang menyambut user baru: ```mermaid theme={null} flowchart LR A[Welcome Screen] --> B[Pilih Avatar] B --> C[Koneksi GitHub] C --> D[Audio Toggle] D --> E[Pengenalan Fitur
Productivity] E --> F[Mulai Menggunakan
Habits & Tasks] ``` Fitur onboarding: * **Pemilihan karakter avatar**: User memilih avatar yang merepresentasikan mereka di sistem gamifikasi * **Koneksi ke GitHub**: Integrasi untuk developer yang ingin sinkronisasi aktivitas * **Audio toggle**: Pengaturan suara untuk notifikasi dan feedback audio * **Pengenalan fitur produktivitas**: Tutorial interaktif tentang habits, tasks, goals, dan gamifikasi *** ## Filter & Pencarian | Filter | Opsi | Deskripsi | | - | - | - | | Category | All, Kesehatan, Pekerjaan, Belajar, Olahraga, Keuangan, Personal, Lainnya | Filter habit berdasarkan kategori | | Status | Active, Paused, Archived | Filter berdasarkan status habit | | Frequency | Daily, Weekly, Custom | Filter berdasarkan tipe frekuensi | | Search | Text input | Cari habit berdasarkan judul atau deskripsi | *** ## RBAC Permission Table | Operasi | Admin | User (Owner) | User (Member) | | - | - | - | - | | **Habit** | | | | | Create habit (personal) | Ya | Ya | Ya | | Create habit (company) | Ya | Ya | Tidak | | Read own habits | Ya | Ya | Ya | | Read all company habits | Ya | Ya | Ya | | Update own habits | Ya | Ya | Ya | | Update company habits | Ya | Ya | Tidak | | Delete own habits | Ya | Ya | Ya | | Delete company habits | Ya | Ya | Tidak | | **HabitLog** | | | | | Create log entry | Ya | Ya | Ya | | Read own logs | Ya | Ya | Ya | | Read all company logs | Ya | Ya | Ya | | Update own logs | Ya | Ya | Ya | | Delete own logs | Ya | Ya | Ya | | **Goal** | | | | | Create company goal | Ya | Ya | Tidak | | Create personal goal | Ya | Ya | Ya | | Read all company goals | Ya | Ya | Ya | | Update company goals | Ya | Ya | Tidak | | Delete company goals | Ya | Ya | Tidak | | **Achievement** | | | | | Read own achievements | Ya | Ya | Ya | | Read all achievements | Ya | Ya | Ya | | Create achievement (system) | Ya (auto) | Tidak | Tidak | Catatan: RLS (Row Level Security) dikonfigurasi di level entity untuk memastikan data isolation antar user dan company. Field `company_id` dan `user_id` digunakan sebagai basis filtering. *** ## Integrasi dengan Entity Lain ```mermaid theme={null} graph LR subgraph "Productivity Module" H[Habit] --> HL[HabitLog] H --> PG[PersonalGoal] PG --> T[Task] T --> RT[RecurringTask] end subgraph "Gamification" H --> A[Achievement] HL --> A PG --> A T --> A end subgraph "User Profile" A --> U[User] H --> U PG --> U end subgraph "Company" H --> C[Company] G[Goal] --> C end PG --> G ``` ### Hubungan Antar Entity * **Habit → HabitLog**: Satu habit memiliki banyak log entries (one-to-many). Setiap kali user menyelesaikan atau melewatkan habit, satu HabitLog dibuat. * **Habit → User**: Setiap habit dimiliki oleh satu user (many-to-one). Field `user_id` menyimpan email pemilik. * **Habit → Company**: Habit opsional terikat ke company (many-to-one). Jika `company_id` null, habit bersifat personal. * **PersonalGoal → Task**: Goal dapat memiliki beberapa task terkait (`related_tasks`) yang membantu mencapai goal tersebut. * **Task → RecurringTask**: Task dapat dibuat otomatis oleh RecurringTask berdasarkan jadwal yang dikonfigurasi. * **Achievement → User**: Achievement diraih oleh user berdasarkan trigger dari aktivitas habit, task, dan goal. * **User → Gamifikasi**: Field `productivity_score`, `current_streak`, `longest_streak`, `user_level`, dan `achievement_points` di entity User terintegrasi dengan aktivitas habit. *** ## Cara Akses Dari sidebar, klik menu **Productivity** > **Habits**. *** ## Flow Penggunaan 1. Buka halaman Habits dari sidebar — lihat heatmap dan streak di bagian atas 2. Klik **"Tambah Habit"** atau gunakan **Quick Add** untuk habit dari template 3. Pilih icon, warna, kategori, dan frekuensi (daily/weekly/custom) 4. Set target dan reminder time jika diinginkan 5. Setiap hari, centang habit yang sudah selesai — XP otomatis bertambah 6. Pantau streak dan usahakan jangan putus rantai 7. Review heatmap mingguan untuk melihat pola konsistensi 8. Evaluasi habit mana yang sudah menjadi rutinitas dan mana yang perlu diperbaiki *** ## Tips & Best Practices ### Untuk Pemula * Mulai dari 2-3 habit dulu — terlalu banyak sekaligus bisa overwhelming dan streak cepat putus * Pilih habit yang spesifik dan terukur: "minum 8 gelas air" lebih baik daripada "hidup sehat" * Gunakan Quick Add templates untuk memulai lebih cepat tanpa perlu konfigurasi manual * Jangan putus semangat jika streak terputus — reset dan mulai lagi dari hari berikutnya ### Untuk Pengguna Lanjutan * Manfaatkan `negative_habit` flag untuk habit buruk yang ingin dihentikan (misalnya: merokok, scroll media sosial) * Set `target_value` dan `target_unit` untuk habit kuantitatif agar bisa track progress numerik di HabitLog * Gunakan frekuensi `custom` dengan `days_of_week` untuk habit yang tidak perlu dilakukan setiap hari * Hubungkan habit dengan PersonalGoal melalui `related_tasks` untuk melihat korelasi antara kebiasaan dan pencapaian goal * Review `best_streak` secara berkala untuk memotivasi diri memecahkan rekor pribadi ### Untuk Admin Perusahaan * Buat company-level habits untuk membangun budaya kerja positif di tim * Gunakan Goal entity dengan `goal_type: company` untuk target strategis perusahaan * Monitor progress tim melalui heatmap dan streak kolektif * Set `notification_frequency` ke `milestone` agar tim hanya terganggu saat ada pencapaian penting * Manfaatkan RBAC untuk mengontrol siapa yang bisa membuat dan mengelola company habits *** ## Troubleshooting | Masalah | Kemungkinan Penyebab | Solusi | | - | - | - | | Streak tidak bertambah | Ada habit aktif yang belum di-log hari ini | Pastikan SEMUA habit aktif sudah dicentang | | Streak reset ke 0 | Melewatkan satu hari | Mulai streak baru — `best_streak` tetap tersimpan | | Habit tidak muncul di heatmap | Habit belum memiliki `start_date` | Set `start_date` saat membuat habit | | XP tidak bertambah | `reward_xp` diset ke 0 | Cek dan set `reward_xp` ke nilai yang diinginkan | | Quick Add template tidak cocok | Template default tidak sesuai | Edit detail setelah create dari template | | Data habit hilang | Koneksi network issue | Data tersimpan di `base44Raw` — cek koneksi dan refresh | This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.