Skip to main content

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

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


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

Fungsi calculateStreak() 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 = 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

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:
  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: 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: 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_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