{/* Header */}
Goals
{prettyDate(today)}
{/* HERO — Today summary */}
Today
{completedToday}/{scheduledToday.length}
habits done{todayProg.missed > 0 ? ` · ${todayProg.missed} missed` : ''}
{/* ── Recent 7 Days ── */}
{goals.length > 0 && (
Recent days
{recentDays.map(d => {
const isToday = d.isToday;
const hasData = d.total > 0;
const progressColor = d.pct >= 100 ? 'var(--c-protein)' : d.pct > 0 ? 'var(--c-carbs)' : '#C25A4E';
return (
);
})}
)}
{/* Today's schedule */}
Today's schedule
{scheduledToday.map(g => (
onOpenGoal(g)} onInc={onInc} onDec={onDec}/>
))}
{!scheduledToday.length && (
)}
{/* Other active goals */}
{otherActive.length > 0 && (<>
Other goals
{otherActive.map(g => (
onOpenGoal(g)} onInc={onInc} onDec={onDec} dim/>
))}
)}
{/* Header */}
Review
Edit any past or today's goals
{!isToday && (
)}
{/* Date nav */}
{dateLabel}
{scheduledGoals.length > 0 && (
{prog.done}/{prog.total} done · {prog.pct}%
{prog.missed > 0 ? ` · ${prog.missed} missed` : ''}
)}
{/* Date picker */}
{/* Goals list */}
{scheduledGoals.length === 0 ? (
) : (
{scheduledGoals.map(g => {
const doneCount = _goalDoneForDate(g, logs, date);
const status = _goalStatusForDate(g, logs, date);
const meta = _STATUS_META[status] || _STATUS_META.pending;
const target = g.timesPerDay || g.target || 1;
const isSkipped = status === 'skipped';
return (
{/* Main info row */}
{/* Controls row */}
{doneCount}
/{target}
);
})}
)}
{/* Unscheduled goals (collapsed hint) */}
{goals.length > scheduledGoals.length && (
{goals.length - scheduledGoals.length} goal{goals.length - scheduledGoals.length > 1 ? 's' : ''} not scheduled for this day
)}
{/* Header */}
Calendar
Goal schedule overview
{/* Month nav */}
{/* Legend */}
{goals.length > 0 && (
{goals.slice(0, 6).map(g => (
))}
{goals.length > 6 &&
+{goals.length-6} more
}
)}
{/* Calendar grid */}
{/* Weekday headers */}
{WD_LABELS.map(l => (
{l}
))}
{/* Day cells */}
{cells.map((day, idx) => {
if (!day) return
;
const iso = isoForDay(day);
const isToday = iso === today;
const isFuture = iso > today;
const isExpanded = expanded === iso;
const scheduledHere = goals.filter(g => _goalIsScheduledOn(g, iso));
const prog = _dayProgress(goals, logs, iso);
const dotGoals = scheduledHere.slice(0, 4);
return (
);
})}
{/* Expanded day panel */}
{expanded && (() => {
const dayGoals = goals.filter(g => _goalIsScheduledOn(g, expanded));
const d = new Date(expanded + 'T00:00:00');
const expandedLabel = expanded === today ? 'Today' : d.toLocaleDateString(undefined, { weekday: 'long', month: 'short', day: 'numeric' });
const isFuture = expanded > today;
return (
{expandedLabel}
{onPickDate && (
)}
{dayGoals.length === 0 ? (
No goals scheduled
) : (
dayGoals.map((g, gi) => {
const s = isFuture ? 'pending' : _goalStatusForDate(g, logs, expanded);
const meta = _STATUS_META[s] || _STATUS_META.pending;
const done = _goalDoneForDate(g, logs, expanded);
return (
{g.title}
{!isFuture &&
}
{isFuture ? (
—
) : onAdjust ? (
{done} / {g.target}
) : (
{meta.char} {meta.label}
)}
);
})
)}
);
})()}
);
}
/* ── GOAL STAT TILE ─────────────────────────────────────────────── */
function GoalStatTile({ label, value, unit, color, icon }) {
return (
);
}
/* ── GOALS PROGRESS — with date range filter + charts ──────────── */
function GoalsProgress({ goals, logs }) {
const today = todayISO();
const [rangeId, setRangeId] = React.useState('last30');
const range = _goalsRangeCompute(rangeId);
// Build list of dates in range
function datesInRange(start, end) {
const out = [];
let cur = new Date(start + 'T00:00:00');
const endD = new Date(end + 'T00:00:00');
while (cur <= endD) { out.push(isoOf(cur)); cur.setDate(cur.getDate()+1); }
return out;
}
const rangeDates = datesInRange(range.start, range.end);
// Per-goal stats
const goalStats = goals.map(g => {
let sch = 0, done = 0;
rangeDates.forEach(iso => {
const s = _goalStatusForDate(g, logs, iso);
if (s === 'unscheduled') return;
sch++;
if (s === 'done') done++;
});
return { goal: g, rate: sch ? done / sch : 0, done, sch, streak: ngStreak(g, logs, today) };
});
// Global stats
let totalSch = 0, totalDone = 0, totalMissed = 0;
rangeDates.forEach(iso => {
goals.forEach(g => {
const s = _goalStatusForDate(g, logs, iso);
if (s === 'unscheduled') return;
totalSch++;
if (s === 'done') totalDone++;
else if (s === 'missed') totalMissed++;
});
});
const overallRate = totalSch ? Math.round(totalDone / totalSch * 100) : 0;
const sortedByStreak = goalStats.slice().sort((a, b) => b.streak - a.streak);
const bestStreak = sortedByStreak.length ? sortedByStreak[0].streak : 0;
const bestStreakTitle = sortedByStreak.length ? sortedByStreak[0].goal.title : '—';
const activeGoals = goals.filter(g => !g.endDate || g.endDate >= today);
// Weekly bar chart — last 8 weeks completion rates
const weeks = [];
for (let w = 7; w >= 0; w--) {
const wStart = daysAgo(w * 7 + 6);
const wEnd = daysAgo(w * 7);
const wDates = datesInRange(wStart, wEnd);
let wSch = 0, wDone = 0;
wDates.forEach(iso => {
goals.forEach(g => {
const s = _goalStatusForDate(g, logs, iso);
if (s === 'unscheduled') return;
wSch++;
if (s === 'done') wDone++;
});
});
const pct = wSch ? Math.round(wDone / wSch * 100) : 0;
const labelD = new Date(wEnd + 'T00:00:00');
weeks.push({ label: labelD.toLocaleDateString(undefined, { month: 'short', day: 'numeric' }), pct, wSch });
}
return (
Progress
Goal & habit statistics
{/* Range filter */}
{_GOALS_RANGE_PRESETS.map(p => (
))}
{/* Stats grid */}
{bestStreak > 0 && (
Best streak: {bestStreakTitle}
)}
{/* Weekly completion bar chart */}
{weeks.some(w => w.wSch > 0) && (
Weekly completion
{weeks.map((w, i) => (
{w.wSch > 0 && (
{w.pct}%
)}
0
? (w.pct >= 80 ? 'var(--c-protein)' : w.pct >= 50 ? 'var(--c-carbs)' : '#C25A4E')
: 'var(--ring-track)',
height: w.wSch > 0 ? `${Math.max(8, w.pct * 0.6)}%` : '4%',
minHeight: 4, transition: 'height .3s',
}}/>
))}
{/* X-axis labels — show 1st, middle, last */}
{weeks[0]?.label}
This week
)}
{/* Per-goal breakdown */}
{!goalStats.length ? (
) : (
Per goal
{goalStats.map(s => (
{s.goal.title}
{s.done}/{s.sch} sessions · streak {s.streak}🔥
= 0.8 ? 'var(--c-protein)' : s.rate >= 0.5 ? 'var(--c-carbs)' : '#C25A4E' }}>
{Math.round(s.rate * 100)}%
))}
)}
);
}
/* ── GOAL DETAIL SHEET ──────────────────────────────────────────── */
function GoalDetailSheet({ goal, logs, onClose, onInc, onDec, onDelete, logDate, onAdjust }) {
if (!goal) return null;
const today = todayISO();
const date = logDate || today;
const streak = ngStreak(goal, logs, today);
const endDate = goal.endDate || null;
const isEnded = endDate && endDate < today;
const daysLeft = endDate && !isEnded
? Math.ceil((new Date(endDate + 'T00:00:00') - new Date()) / 86400000)
: null;
let sch = 0, done = 0;
for (let i = 0; i < 30; i++) {
const iso = daysAgo(i);
const s = _goalStatusForDate(goal, logs, iso);
if (s === 'unscheduled') continue;
sch++;
if (s === 'done') done++;
}
const rate = sch ? done / sch : 0;
const days14 = [];
for (let i = 13; i >= 0; i--) {
const iso = daysAgo(i);
const s = _goalStatusForDate(goal, logs, iso);
days14.push({ iso, s });
}
const loggedCount = _goalDoneForDate(goal, logs, date);
return (
{goal.emoji}
{goal.title}
{goal.target} {goal.unit} / day · {goal.timesPerDay > 1 ? `${goal.timesPerDay}× per day` : 'Daily'}
{(goal.startDate || endDate) && (
{goal.startDate && Started {prettyDateShort(goal.startDate)}}
{endDate && (
{isEnded ? `✓ Finished ${prettyDateShort(endDate)}` : `Ends ${prettyDateShort(endDate)} · ${daysLeft}d left`}
)}
)}
{/* Stats */}
{/* 14-day strip */}
Last 14 days
{days14.map(d => {
const isDone = d.s === 'done';
const isMissed = d.s === 'missed';
const isSkipped = d.s === 'skipped';
const isPartial = d.s === 'partial';
return (
{new Date(d.iso + 'T00:00:00').getDate()}
);
})}
{/* Log section */}
{!isEnded && (
Log {date === today ? 'today' : prettyDateShort(date)}
{loggedCount}
/ {goal.target}
{goal.unit}
)}
);
}
Object.assign(window, {
GoalCard, GoalsHome, GoalsDayReview, GoalsCalendar,
GoalDetailSheet, GoalStatTile, GoalsProgress,
_goalIsScheduledOn, _goalStatusForDate, _dayProgress,
});