// history.jsx — Riwayat (90 hari + per bulan)
const HABIT_FORMED_THRESHOLD = 80; // ≥80 dari 90 = habit terbentuk
function NinetyDayGrid({ habits, checks, today }) {
// 90 cells, organized as 13 weeks × 7 days (91 - 1 empty)
// Oldest at top-left, newest at bottom-right
// Each column is a week, rows are days
const cells = [];
for (let i = 89; i >= 0; i--) {
const d = new Date(today);
d.setDate(d.getDate() - i);
cells.push(d);
}
// Group into weeks
const weeks = [];
const firstDow = (cells[0].getDay() + 6) % 7; // Mon=0
const grid = [];
for (let i = 0; i < firstDow; i++) grid.push(null);
grid.push(...cells);
for (let i = 0; i < grid.length; i += 7) weeks.push(grid.slice(i, i + 7));
return (
{weeks.map((week, wi) => (
{Array.from({ length: 7 }).map((_, di) => {
const d = week[di];
if (!d) return ;
const key = toDateKey(d);
const dc = checks[key];
const { total, max } = pointsForDay(habits, dc);
const pct = max > 0 ? total / max : 0;
const isToday = isSameDay(d, today);
if (pct === 0) {
return ;
}
const grade = gradeFor(pct);
return (
);
})}
))}
);
}
function NinetyDayHero({ habits, checks, today }) {
let totalPts = 0, maxPts = 0, doneDays = 0;
for (let i = 0; i < 90; i++) {
const d = new Date(today); d.setDate(d.getDate() - i);
const dc = checks[toDateKey(d)];
const { total, max } = pointsForDay(habits, dc);
totalPts += total; maxPts += max;
if (max > 0 && total / max >= 0.5) doneDays++;
}
const pct = maxPts > 0 ? totalPts / maxPts : 0;
const grade = gradeFor(pct);
const streak = computeStreak(habits, checks, today, 0.5);
return (
Hari Konsisten
{doneDays}/ 90
Grade
{grade}{Math.round(pct * 100)}%
Streak
{streak}hari
);
}
function HabitProgress90({ habit, checks, today }) {
// count main habit done in last 90 days
let doneDays = 0;
const cells = [];
for (let i = 89; i >= 0; i--) {
const d = new Date(today); d.setDate(d.getDate() - i);
const done = !!checks[toDateKey(d)]?.[habit.id];
if (done) doneDays++;
cells.push(done);
}
const pct = doneDays / 90;
const streak = habitStreak(habit, checks, today);
const formed = doneDays >= HABIT_FORMED_THRESHOLD;
const remaining = Math.max(0, HABIT_FORMED_THRESHOLD - doneDays);
let statusText, statusColor;
if (formed) {
statusText = '✓ Terbentuk';
statusColor = 'var(--accent)';
} else if (doneDays >= 60) {
statusText = `${remaining} hari lagi`;
statusColor = '#C99A3C';
} else if (doneDays >= 30) {
statusText = 'Terbangun';
statusColor = 'var(--muted)';
} else if (doneDays > 0) {
statusText = 'Memulai';
statusColor = 'var(--muted)';
} else {
statusText = 'Belum';
statusColor = 'var(--muted-2)';
}
return (
{habit.icon}
{habit.group}
{habit.name}
{doneDays}/90
{streak > 1 && (
🔥 {streak} hari
)}
{/* 80-day threshold marker */}
{statusText}
);
}
function MonthNav({ month, onChange }) {
const today = new Date();
const isFuture = month.getFullYear() > today.getFullYear() ||
(month.getFullYear() === today.getFullYear() && month.getMonth() >= today.getMonth());
const go = (delta) => {
const d = new Date(month.getFullYear(), month.getMonth() + delta, 1);
onChange(d);
};
return (
{formatMonth(month)}
);
}
function HeatmapCalendar({ month, habits, checks, selectedKey, onSelect }) {
const y = month.getFullYear();
const m = month.getMonth();
const daysCount = daysInMonth(y, m);
const firstDay = new Date(y, m, 1).getDay();
const offset = (firstDay + 6) % 7;
const cells = [];
for (let i = 0; i < offset; i++) cells.push(null);
for (let d = 1; d <= daysCount; d++) cells.push(d);
while (cells.length % 7 !== 0) cells.push(null);
const today = new Date();
return (