title: “Habits” description: “Habit tracker dengan streak system, XP gamification, GitHub-style heatmap, 7 kategori, dan ProductivityOnboarding di SNISHOP ERP.”
Habits

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
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 fieldcompany_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 menggunakanbase44Raw.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
Entity Schema Tables
Habit Entity
HabitLog Entity
Goal Entity
PersonalGoal Entity
Achievement Entity
Habit Lifecycle State Diagram
Enum Reference Tables
Habit Color
Habit Category
Frequency Type
Days of Week (Custom Frequency)
Goal Status
Goal Type
Goal Category
Personal Goal Type (Metodologi)
Personal Goal Category
Personal Goal Priority
Personal Goal Status
Achievement Type
User Role
Subscription Plan
Goal Recurrence Pattern
Notification Frequency (Goal)
15 Icon Emoji
💪 🏃 📚 💰 🧘 🍎 💧 😴 🎯 ✍️ 🎨 🎵 💻 🌱 ❤️Streak Calculation Algorithm
FungsicalculateStreak() menghitung streak dengan menelusuri 60 hari ke belakang:
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 = falsetidak 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, nilaibest_streakdiperbarui secara otomatis
Sequence Diagrams
Flow 1: Logging Habit Completion
Flow 2: Streak Calculation
Flow 3: Quick Add Habit from Template
Flow 4: Goal Progress Update from Habit
XP & Gamifikasi
Mekanisme Gamifikasi
Sistem gamifikasi di modul Habits dirancang untuk memberikan motivasi berkelanjutan melalui beberapa lapisan reward:-
XP per Habit: Setiap habit yang diselesaikan memberikan XP sesuai
reward_xp(default 5 XP). Habit dengannegative_habit = trueyang berhasil dihindari juga memberikan XP. -
Level Progression: Total XP dari semua habit dan aktivitas produktivitas lainnya diakumulasi dan dikonversi ke level user melalui fungsi
calculateLevelFromXP()digamificationHelper. -
Achievement Unlocks: Pencapaian tertentu (streak 7 hari, 30 hari, 100 completions, dll) membuka achievement yang tercatat di entity
Achievementdan memberikan bonusachievement_points. - Streak Bonus: Streak yang panjang memberikan multiplier XP — semakin panjang streak, semakin besar bonus XP per completion.
-
Leaderboard: User dengan
productivity_scoretertinggi dapat dilihat di leaderboard tim/perusahaan.
Activity Heatmap (GitHub-Style)
Visualisasi 49 hari terakhir dalam grid 7x7: 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
7-Day Dot Indicators
Setiap habit row menampilkan 7 titik yang mewakili 7 hari terakhir:
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 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: 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
RBAC Permission Table
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
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_idmenyimpan email pemilik. - Habit → Company: Habit opsional terikat ke company (many-to-one). Jika
company_idnull, 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, danachievement_pointsdi entity User terintegrasi dengan aktivitas habit.
Cara Akses
Dari sidebar, klik menu Productivity > Habits.Flow Penggunaan
- Buka halaman Habits dari sidebar — lihat heatmap dan streak di bagian atas
- Klik “Tambah Habit” atau gunakan Quick Add untuk habit dari template
- Pilih icon, warna, kategori, dan frekuensi (daily/weekly/custom)
- Set target dan reminder time jika diinginkan
- Setiap hari, centang habit yang sudah selesai — XP otomatis bertambah
- Pantau streak dan usahakan jangan putus rantai
- Review heatmap mingguan untuk melihat pola konsistensi
- 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_habitflag untuk habit buruk yang ingin dihentikan (misalnya: merokok, scroll media sosial) - Set
target_valuedantarget_unituntuk habit kuantitatif agar bisa track progress numerik di HabitLog - Gunakan frekuensi
customdengandays_of_weekuntuk habit yang tidak perlu dilakukan setiap hari - Hubungkan habit dengan PersonalGoal melalui
related_tasksuntuk melihat korelasi antara kebiasaan dan pencapaian goal - Review
best_streaksecara 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: companyuntuk target strategis perusahaan - Monitor progress tim melalui heatmap dan streak kolektif
- Set
notification_frequencykemilestoneagar tim hanya terganggu saat ada pencapaian penting - Manfaatkan RBAC untuk mengontrol siapa yang bisa membuat dan mengelola company habits
