// ============================================================ // IN TIME v1.4 // A calm savings goal app for two. // See CLAUDE.md for full architecture context before editing. // Next major feature: consider splitting into multiple .jsx files. // ============================================================ const { useState, useEffect, useCallback, useMemo, useRef } = React; const VERSION = '1.5'; const CHANGELOG = [ { ver: '1.5', date: '2026-05-17', notes: 'Critical fix: fbWrite was using set() on the household root, wiping wheel/spins data on every goal sync — spin-once enforcement broke because alreadySpun always reset to false after a write. Changed to update() so wheel path is never touched. Also fixed: initFirebase race condition (shared promise), setSyncStatus before skipNext guard, removed double skipNext increment, React hooks violation in SpinWheelView, nav bar opaque.' }, { ver: '1.4', date: '2026-05-16', notes: 'Firebase Auth (passwordless email sign-in). Per-user identity locked to device via UID. Daily Spin Wheel with per-user enforcement, Play Again mechanic, streak tracking, partner result visibility, and spin history. Wheel config editable in settings. Bug fixes: Firebase listener race condition, skipNext counter, widget balance, streak year boundary, EditContributionSheet createdAt, sort null-date guards.' }, { ver: '1.3', date: '2026-05-15', notes: 'Frequency-aware math engine (Monthly/Weekly/Biweekly/Bi-monthly/Daily/None+deadline). Two-date system (projected finish + target). Current balance pre-load on goal creation. Backdated contributions. Adjustment contribution type for interest/market changes. Goals ticker at top. Monthly contribution meter (planned + bonus). Tappable Remaining stat for quick add. Partner activity feed on dashboard. Switch / delete household. PWA splash screen. Mug centering fix. Pause visibility. Drag-to-reorder goals. Streak badge upgrade. What-If math corrected (Option A: extra on top of current).' }, { ver: '1.2', date: '2026-05-15', notes: 'Delete goals, monthly goal strip, milestone badge clipping fix, PWA safe-area, all-time total, last contribution card, monthly bar chart, on-track indicator, shared goal note, enhanced 100% celebration.' }, { ver: '1.1', date: '2026-05-15', notes: 'Firebase sync, milestone badges on mug, What If on dashboard, activity filters, live clock, countdown timer, math rewrite.' }, { ver: '1.0', date: '2026-05-14', notes: 'Initial build.' }, ]; const LS_KEY = 'intime_v1'; const LS_HOUSEHOLD = 'intime_household'; const LS_AUTH_EMAIL = 'intime_auth_email'; const DEFAULT_SETTINGS = { partner1: 'Ben', partner2: 'Elizabeth', currency: '$', hideBalances: false }; const uid = () => Date.now().toString(36) + Math.random().toString(36).slice(2, 6); // ── Frequency definitions ──────────────────────────────────── const FREQ = { monthly: { label: 'Monthly', daysPerPeriod: 30.44, periodsPerMonth: 1 }, weekly: { label: 'Weekly', daysPerPeriod: 7, periodsPerMonth: 4.345 }, biweekly: { label: 'Biweekly', daysPerPeriod: 14, periodsPerMonth: 2.173 }, bimonthly: { label: 'Bi-monthly', daysPerPeriod: 15.22, periodsPerMonth: 2 }, daily: { label: 'Daily', daysPerPeriod: 1, periodsPerMonth: 30.44 }, none: { label: 'Random', daysPerPeriod: null, periodsPerMonth: null }, }; const makeGoal = (o = {}) => ({ id: uid(), name: 'Emergency Fund', target: 3500, currentBalance: 0, color: '#C8956D', icon: '☕', startDate: new Date().toISOString().slice(0, 10), targetDate: (() => { const d = new Date(); d.setMonth(d.getMonth() + 7); return d.toISOString().slice(0, 10); })(), frequency: 'monthly', contributionAmount: 400, paused: false, note: '', order: 0, milestones: [ { id: uid(), pct: 25, label: 'Foundation set', reward: '' }, { id: uid(), pct: 50, label: 'Halfway home', reward: '' }, { id: uid(), pct: 75, label: 'Within reach', reward: '' }, { id: uid(), pct: 100, label: 'Full reserve', reward: '' }, ], contributions: [], ...o, }); const GOAL_COLORS = ['#C8956D','#8B5E3C','#7A8B5E','#5E7A8B','#8B5E7A','#B85850','#5E8B7A','#6B5E8B']; const GOAL_ICONS = ['☕','🏔️','⛽','🛡️','✈️','🎓','🏠','🚗','💊','🎯']; // ── Firebase ──────────────────────────────────────────────── let fbApp = null, fbDb = null, fbCache = {}, fbInitPromise = null; const getFB = async n => { if (fbCache[n]) return fbCache[n]; fbCache[n] = await import(`https://www.gstatic.com/firebasejs/10.12.0/firebase-${n}.js`); return fbCache[n]; }; async function initFirebase() { if (fbInitPromise) return fbInitPromise; const cfg = window.__FIREBASE_CONFIG__; if (!cfg || cfg.apiKey === 'PASTE_YOUR_API_KEY') return false; fbInitPromise = (async () => { try { const { initializeApp } = await getFB('app'); const { getDatabase } = await getFB('database'); fbApp = initializeApp(cfg); fbDb = getDatabase(fbApp); return true; } catch (e) { console.warn('Firebase init failed', e); fbInitPromise = null; return false; } })(); return fbInitPromise; } async function fbWrite(hid, data) { if (!fbDb) return; try { const { ref, update } = await getFB('database'); await update(ref(fbDb, `households/${hid}`), data); } catch (e) { console.warn(e); } } async function fbListen(hid, cb) { if (!fbDb) return () => {}; try { const { ref, onValue, off } = await getFB('database'); const r = ref(fbDb, `households/${hid}`); onValue(r, s => { const v = s.val(); if (v) cb(v); }); return () => off(r); } catch { return () => {}; } } async function fbDelete(hid) { if (!fbDb) return; try { const { ref, remove } = await getFB('database'); await remove(ref(fbDb, `households/${hid}`)); } catch (e) { console.warn(e); } } // ── Firebase Auth ──────────────────────────────────────────── let fbAuthInstance = null; async function initAuth() { if (fbAuthInstance) return fbAuthInstance; const ok = await initFirebase(); if (!ok) return null; try { const { getAuth } = await getFB('auth'); fbAuthInstance = getAuth(fbApp); return fbAuthInstance; } catch(e) { console.warn('Auth init failed', e); return null; } } async function sendMagicLink(email) { const auth = await initAuth(); if (!auth) throw new Error('Firebase Auth not available. Check your Firebase config.'); const { sendSignInLinkToEmail } = await getFB('auth'); await sendSignInLinkToEmail(auth, email, { url: window.location.origin + window.location.pathname, handleCodeInApp: true, }); try { localStorage.setItem(LS_AUTH_EMAIL, email); } catch {} } async function completeMagicLink() { const auth = await initAuth(); if (!auth) return null; const { isSignInWithEmailLink, signInWithEmailLink } = await getFB('auth'); if (!isSignInWithEmailLink(auth, window.location.href)) return null; let email; try { email = localStorage.getItem(LS_AUTH_EMAIL); } catch {} if (!email) email = window.prompt('Please confirm your email to finish signing in:'); if (!email) return null; try { const result = await signInWithEmailLink(auth, email, window.location.href); try { localStorage.removeItem(LS_AUTH_EMAIL); } catch {} window.history.replaceState({}, document.title, window.location.pathname); return result.user; } catch(e) { console.warn('Magic link completion failed', e); return null; } } async function signOutUser() { const auth = await initAuth(); if (!auth) return; const { signOut } = await getFB('auth'); await signOut(auth); } async function fbWriteMember(hid, uid, data) { if (!fbDb) return; try { const { ref, set } = await getFB('database'); await set(ref(fbDb, `households/${hid}/members/${uid}`), data); } catch(e) { console.warn(e); } } async function fbWriteWheel(hid, data) { if (!fbDb) return; try { const { ref, set } = await getFB('database'); await set(ref(fbDb, `households/${hid}/wheel`), data); } catch(e) { console.warn(e); } } async function fbListenWheel(hid, cb) { if (!fbDb) return () => {}; try { const { ref, onValue, off } = await getFB('database'); const r = ref(fbDb, `households/${hid}/wheel`); onValue(r, s => cb(s.val())); return () => off(r); } catch { return () => {}; } } // ── Local storage ─────────────────────────────────────────── const loadLocal = () => { try { const r = localStorage.getItem(LS_KEY); return r ? JSON.parse(r) : null; } catch { return null; } }; const saveLocal = s => { try { localStorage.setItem(LS_KEY, JSON.stringify(s)); } catch {} }; const getHHId = () => { try { return localStorage.getItem(LS_HOUSEHOLD) || ''; } catch { return ''; } }; const setHHId = id => { try { localStorage.setItem(LS_HOUSEHOLD, id); } catch {} }; const clearHHId = () => { try { localStorage.removeItem(LS_HOUSEHOLD); } catch {} }; // ── Spin Wheel ─────────────────────────────────────────────── const DEFAULT_SEGMENTS = [ { id:'s1', label:'Starbucks', sub:'Drink up to $6', emoji:'☕', type:'win', color:'#00704A', weight:1, enabled:true }, { id:'s2', label:"McDonald's", sub:'Item up to $5', emoji:'🍔', type:'win', color:'#DA291C', weight:1, enabled:true }, { id:'s3', label:'10-Min Back Rub', sub:'Partner owes you', emoji:'💆', type:'win', color:'#7A8B5E', weight:1, enabled:true }, { id:'s4', label:'Contribute $5', sub:'Pick a goal', emoji:'💸', type:'bad', color:'#B85850', weight:1, enabled:true }, { id:'s5', label:'Contribute $10', sub:'Pick a goal', emoji:'💸', type:'bad', color:'#8B5E3C', weight:1, enabled:true }, { id:'s6', label:'Contribute $5', sub:'Pick a goal', emoji:'💸', type:'bad', color:'#B85850', weight:1, enabled:true }, { id:'s7', label:'Re-Spin', sub:'Spin again now!', emoji:'🔄', type:'neutral', color:'#8A7E72', weight:1, enabled:true }, { id:'s8', label:'5-Min Back Rub', sub:'A little treat', emoji:'🤲', type:'win', color:'#C8956D', weight:1, enabled:true }, { id:'s9', label:'Re-Spin', sub:'Spin again now!', emoji:'🔄', type:'neutral', color:'#8A7E72', weight:1, enabled:true }, { id:'s10', label:'5-Min Back Rub', sub:'A little treat', emoji:'🤲', type:'win', color:'#C8956D', weight:1, enabled:true }, { id:'s11', label:'Re-Spin', sub:'Spin again now!', emoji:'🔄', type:'neutral', color:'#8A7E72', weight:1, enabled:true }, { id:'s12', label:'5-Min Back Rub', sub:'A little treat', emoji:'🤲', type:'win', color:'#C8956D', weight:1, enabled:true }, { id:'s13', label:'Re-Spin', sub:'Spin again now!', emoji:'🔄', type:'neutral', color:'#8A7E72', weight:1, enabled:true }, { id:'s14', label:'5-Min Back Rub', sub:'A little treat', emoji:'🤲', type:'win', color:'#C8956D', weight:1, enabled:true }, { id:'s15', label:'Play Tomorrow', sub:'Free pass today', emoji:'📅', type:'neutral', color:'#5E7A8B', weight:1, enabled:true }, { id:'s16', label:'5-Min Back Rub', sub:'A little treat', emoji:'🤲', type:'win', color:'#C8956D', weight:1, enabled:true }, { id:'s17', label:'Play Tomorrow', sub:'Free pass today', emoji:'📅', type:'neutral', color:'#5E7A8B', weight:1, enabled:true }, { id:'s18', label:'5-Min Back Rub', sub:'A little treat', emoji:'🤲', type:'win', color:'#C8956D', weight:1, enabled:true }, { id:'s19', label:'Play Tomorrow', sub:'Free pass today', emoji:'📅', type:'neutral', color:'#5E7A8B', weight:1, enabled:true }, { id:'s20', label:'Play Tomorrow', sub:'Free pass today', emoji:'📅', type:'neutral', color:'#5E7A8B', weight:1, enabled:true }, ]; const spinTodayKey = () => new Date().toLocaleDateString('en-CA'); function pickWeightedSegment(segments) { const pool = segments.filter(s => s.enabled !== false).flatMap(s => Array(s.weight || 1).fill(s)); if (!pool.length) return segments[0]; return pool[Math.floor(Math.random() * pool.length)]; } function calcSpinStreak(spins, name) { let streak = 0; const today = new Date(); for (let i = 0; i < 365; i++) { const d = new Date(today); d.setDate(d.getDate() - i); if (spins?.[d.toLocaleDateString('en-CA')]?.[name]) streak++; else if (i > 0) break; } return streak; } const firebaseConfigured = () => { const c = window.__FIREBASE_CONFIG__; return !!(c && c.apiKey && c.apiKey !== 'PASTE_YOUR_API_KEY'); }; // ============================================================ // MATH ENGINE // All dates are JS Date objects. All sums are floats. // Frequency-aware. Two-date system. Backdate-safe. // ============================================================ function getDailyRate(goal) { if (goal.paused) return 0; const f = FREQ[goal.frequency]; if (!f || f.daysPerPeriod === null) return 0; // none/random return goal.contributionAmount / f.daysPerPeriod; } function getMonthlyEquivalent(goal) { if (goal.paused) return 0; const f = FREQ[goal.frequency]; if (!f || f.periodsPerMonth === null) return 0; return goal.contributionAmount * f.periodsPerMonth; } // Sum of all contributions; adjustments may be negative function sumContributions(contributions) { return (contributions || []).reduce((s, c) => s + (c.amount || 0), 0); } // Sum of contributions dated within a given YYYY-MM calendar month function sumMonth(contributions, ymKey) { return (contributions || []) .filter(c => (c.date || '').slice(0, 7) === ymKey) .reduce((s, c) => s + (c.amount || 0), 0); } function ymKeyToday() { return new Date().toISOString().slice(0, 7); } // Core goal calculation — returns everything the UI needs function calcGoal(goal) { const balance = (goal.currentBalance || 0) + sumContributions(goal.contributions); const target = goal.target || 0; const remaining = Math.max(0, target - balance); const pct = target > 0 ? Math.min(100, (balance / target) * 100) : 0; const complete = balance >= target && target > 0; const dailyRate = getDailyRate(goal); const monthlyEq = getMonthlyEquivalent(goal); // Days until target date (can be negative if overdue) const today = new Date(); today.setHours(0, 0, 0, 0); const targetDateD = goal.targetDate ? new Date(goal.targetDate) : null; if (targetDateD) targetDateD.setHours(0, 0, 0, 0); const daysToTarget = targetDateD ? Math.ceil((targetDateD - today) / 864e5) : null; // Projected finish (based on current rate) let daysToFinish, projectedDate; if (complete) { daysToFinish = 0; projectedDate = today; } else if (dailyRate > 0) { daysToFinish = Math.ceil(remaining / dailyRate); projectedDate = new Date(today.getTime() + daysToFinish * 864e5); } else { // None/random or paused — no projected date daysToFinish = null; projectedDate = null; } // Behind / ahead comparison vs target date let status = 'unknown'; // 'ahead' | 'ontrack' | 'late' | 'complete' | 'paused' | 'unknown' let daysDiff = null; // negative = late, positive = ahead if (complete) { status = 'complete'; } else if (goal.paused) { status = 'paused'; } else if (daysToFinish !== null && daysToTarget !== null) { daysDiff = daysToTarget - daysToFinish; if (daysDiff > 0) status = 'ahead'; else if (daysDiff === 0) status = 'ontrack'; else status = 'late'; } // Suggested monthly to hit target date (for None/random with deadline) let suggestedMonthly = null; if (daysToTarget !== null && daysToTarget > 0 && remaining > 0) { suggestedMonthly = (remaining / daysToTarget) * 30.44; } // Monthly meter — actual contributions this calendar month const thisMonthKey = ymKeyToday(); const thisMonthTotal = sumMonth(goal.contributions, thisMonthKey); // The "planned" portion for the meter is the monthly equivalent of the recurring contribution. // If frequency is none/random with a deadline, use suggested monthly. Otherwise 0. let monthlyPlanned = monthlyEq; if (monthlyPlanned === 0 && suggestedMonthly !== null) monthlyPlanned = suggestedMonthly; const monthlyFilled = Math.min(thisMonthTotal, monthlyPlanned); const monthlyBonus = Math.max(0, thisMonthTotal - monthlyPlanned); const monthlyPct = monthlyPlanned > 0 ? Math.min(100, (thisMonthTotal / monthlyPlanned) * 100) : 0; return { balance, target, remaining, pct, complete, dailyRate, monthlyEq, daysToTarget, targetDate: targetDateD, daysToFinish, projectedDate, status, daysDiff, suggestedMonthly, thisMonthTotal, monthlyPlanned, monthlyFilled, monthlyBonus, monthlyPct, }; } // What If math — Option A: extraMonthly is ADDED on top of current rate function calcWhatIf(goal, baseCalc, extraMonthly, oneTime) { const adjRemaining = Math.max(0, baseCalc.remaining - oneTime); const today = new Date(); today.setHours(0, 0, 0, 0); // Current daily rate + extra (extra is always converted from monthly) const adjDailyRate = baseCalc.dailyRate + (extraMonthly / 30.44); let adjDaysToFinish, adjProjectedDate; if (adjRemaining === 0) { adjDaysToFinish = 0; adjProjectedDate = today; } else if (adjDailyRate > 0) { adjDaysToFinish = Math.ceil(adjRemaining / adjDailyRate); adjProjectedDate = new Date(today.getTime() + adjDaysToFinish * 864e5); } else { adjDaysToFinish = null; adjProjectedDate = null; } const daysSaved = (baseCalc.daysToFinish !== null && adjDaysToFinish !== null) ? baseCalc.daysToFinish - adjDaysToFinish : null; // Status vs target let adjStatus = 'unknown', adjDaysDiff = null; if (adjRemaining === 0) { adjStatus = 'complete'; } else if (adjDaysToFinish !== null && baseCalc.daysToTarget !== null) { adjDaysDiff = baseCalc.daysToTarget - adjDaysToFinish; if (adjDaysDiff > 0) adjStatus = 'ahead'; else if (adjDaysDiff === 0) adjStatus = 'ontrack'; else adjStatus = 'late'; } return { adjRemaining, adjDailyRate, adjDaysToFinish, adjProjectedDate, daysSaved, adjStatus, adjDaysDiff }; } function weeksInYear(yr) { const dec28 = new Date(yr, 11, 28); return Math.floor((dec28 - new Date(yr, 0, 1)) / (7 * 864e5)) + 1; } // Streak: count of distinct ISO weeks with a contribution, plus current streak function calcStreak(contributions) { if (!contributions || !contributions.length) return { total: 0, current: 0, longest: 0 }; const weekKeys = new Set(); contributions.forEach(c => { const d = new Date(c.date); const yr = d.getFullYear(); const wk = Math.floor((d - new Date(yr, 0, 1)) / (7 * 864e5)); weekKeys.add(`${yr}-${wk}`); }); const sorted = Array.from(weekKeys).sort(); // Current streak — count consecutive weeks ending at this week (or last week) const now = new Date(); const curYr = now.getFullYear(); const curWk = Math.floor((now - new Date(curYr, 0, 1)) / (7 * 864e5)); let current = 0; for (let i = 0; i < 200; i++) { let yr = curYr, wk = curWk - i; while (wk < 0) { yr -= 1; wk += weeksInYear(yr); } if (weekKeys.has(`${yr}-${wk}`)) current++; else if (i > 1) break; // allow 1 grace week (this week not yet) } // Longest streak let longest = 0, run = 0, prev = null; for (const k of sorted) { const [y, w] = k.split('-').map(Number); const idx = y * 53 + w; if (prev !== null && idx === prev + 1) run++; else run = 1; if (run > longest) longest = run; prev = idx; } return { total: weekKeys.size, current, longest }; } // Monthly chart — last 6 calendar months from this month function getMonthlyData(contributions) { const map = {}; (contributions || []).forEach(c => { const k = (c.date || '').slice(0, 7); if (k) map[k] = (map[k] || 0) + (c.amount || 0); }); return Array.from({ length: 6 }, (_, i) => { const d = new Date(); d.setDate(1); d.setMonth(d.getMonth() - (5 - i)); const k = d.toISOString().slice(0, 7); return { key: k, label: d.toLocaleDateString('en-US', { month: 'short' }), amount: map[k] || 0 }; }); } // Relative time, e.g. "2h ago", "yesterday", "3 days ago" function relTime(dateStr) { if (!dateStr) return ''; const then = new Date(dateStr); const now = new Date(); const diffMs = now - then; if (diffMs < 0) return then.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }); const m = Math.floor(diffMs / 60000); if (m < 1) return 'just now'; if (m < 60) return `${m}m ago`; const h = Math.floor(m / 60); if (h < 24) return `${h}h ago`; const d = Math.floor(h / 24); if (d === 1) return 'yesterday'; if (d < 7) return `${d}d ago`; return then.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }); } // ── Icons ─────────────────────────────────────────────────── const I = { Home: p => , Target: p => , Activity: p => , Gear: p => , Plus: p => , Moon: p => , Sun: p => , Check: p => , Flame: p => , X: p => , Edit: p => , Trash: p => , ChevDown: p => , ChevUp: p => , Link: p => , Cloud: p => , TrendUp: p => , TrendDown: p => , Pause: p => , Drag: p => , Spark: p => , Spin: p => , }; // ── Hooks ─────────────────────────────────────────────────── function useClock() { const [now, setNow] = useState(new Date()); useEffect(() => { const t = setInterval(() => setNow(new Date()), 30000); return () => clearInterval(t); }, []); return now; } function useCountdown(targetDate) { const [left, setLeft] = useState({ d: 0, h: 0, m: 0, overdue: false }); useEffect(() => { if (!targetDate) return; const calc = () => { const diffRaw = new Date(targetDate) - new Date(); const overdue = diffRaw < 0; const diff = Math.abs(diffRaw); setLeft({ d: Math.floor(diff / 864e5), h: Math.floor((diff % 864e5) / 36e5), m: Math.floor((diff % 36e5) / 6e4), overdue, }); }; calc(); const t = setInterval(calc, 60000); return () => clearInterval(t); }, [targetDate]); return left; } // ============================================================ // Splash Screen — shown on cold launch until app ready // ============================================================ function Splash({ T }) { return (
IN TIME
a quiet place to save together
); } // ============================================================ // APP // ============================================================ function App() { const saved = useRef(loadLocal()); const [dark, setDark] = useState(saved.current?.dark ?? false); const [settings, setSettings] = useState(saved.current?.settings ?? { ...DEFAULT_SETTINGS }); const [goals, setGoals] = useState(saved.current?.goals ?? []); const [tab, setTab] = useState('home'); const [activeGoalId, setActiveGoalId] = useState(saved.current?.goals?.[0]?.id || null); const [sheet, setSheet] = useState(null); const [celebrate, setCelebrate] = useState(null); const [touchStart, setTouchStart] = useState(null); const [householdId, setHouseholdIdState] = useState(getHHId()); const [syncStatus, setSyncStatus] = useState('offline'); const [showSplash, setShowSplash] = useState(true); const [authUser, setAuthUser] = useState(null); const [authLoading, setAuthLoading] = useState(firebaseConfigured()); const [members, setMembers] = useState({}); const [wheel, setWheel] = useState(null); const writeTimer = useRef(null); const skipNext = useRef(0); // counter: skip this many incoming Firebase events const now = useClock(); // Hide splash after 1s useEffect(() => { const t = setTimeout(() => setShowSplash(false), 1000); return () => clearTimeout(t); }, []); // Firebase Auth — complete magic link if present, then listen for auth state useEffect(() => { if (!firebaseConfigured()) return; let cancelled = false; let unsubAuth = () => {}; (async () => { try { await completeMagicLink(); } catch(e) { console.warn('magic link:', e); } const auth = await initAuth(); if (cancelled || !auth) { setAuthLoading(false); return; } const { onAuthStateChanged } = await getFB('auth'); const fn = onAuthStateChanged(auth, user => { if (!cancelled) { setAuthUser(user); setAuthLoading(false); } }); if (cancelled) { fn(); return; } unsubAuth = fn; })(); return () => { cancelled = true; unsubAuth(); }; }, []); // Firebase listener useEffect(() => { if (!householdId) { setSyncStatus('offline'); return; } let unsub = () => {}; let cancelled = false; setSyncStatus('connecting'); (async () => { const ok = await initFirebase(); if (cancelled || !ok) { if (!cancelled) setSyncStatus('offline'); return; } const unsubFn = await fbListen(householdId, data => { setSyncStatus('live'); if (skipNext.current > 0) { skipNext.current -= 1; return; } if (data.goals) setGoals(data.goals); if (data.settings) setSettings(prev => ({ ...prev, ...data.settings })); if (data.members) setMembers(data.members); }); if (cancelled) { unsubFn(); return; } unsub = unsubFn; })(); return () => { cancelled = true; unsub(); }; }, [householdId]); // Persist (debounced) useEffect(() => { saveLocal({ dark, settings, goals }); if (householdId && fbDb) { clearTimeout(writeTimer.current); writeTimer.current = setTimeout(() => { writeTimer.current = null; skipNext.current += 1; fbWrite(householdId, { goals, settings, updatedAt: new Date().toISOString() }); }, 800); } }, [dark, settings, goals, householdId]); // Wheel listener — separate Firebase path so it never conflicts with goal sync useEffect(() => { if (!householdId) { setWheel(null); return; } let cancelled = false, unsub = () => {}; (async () => { const ok = await initFirebase(); if (cancelled || !ok) return; const fn = await fbListenWheel(householdId, data => { if (cancelled) return; const w = data || { segments: DEFAULT_SEGMENTS, spins: {} }; // Migrate: back rub segments were incorrectly typed as 'neutral' if (w.segments) w.segments = w.segments.map(s => s.label === '5-Min Back Rub' && s.type === 'neutral' ? { ...s, type: 'win' } : s ); setWheel(w); }); if (cancelled) { fn(); return; } unsub = fn; })(); return () => { cancelled = true; unsub(); }; }, [householdId]); const recordSpin = useCallback((seg, who) => { const todayKey = spinTodayKey(); const spinData = { segId: seg.id, label: seg.label, emoji: seg.emoji, type: seg.type, sub: seg.sub, ts: new Date().toISOString(), who }; setWheel(prev => { const next = { segments: prev?.segments || DEFAULT_SEGMENTS, spins: { ...(prev?.spins || {}), [todayKey]: { ...((prev?.spins || {})[todayKey] || {}), [who]: spinData } }, }; if (householdId) fbWriteWheel(householdId, next); return next; }); }, [householdId]); const claimMemberName = useCallback(async name => { if (!authUser || !householdId) return; const data = { name, joinedAt: new Date().toISOString() }; setMembers(prev => ({ ...prev, [authUser.uid]: data })); await fbWriteMember(householdId, authUser.uid, data); }, [authUser, householdId]); // Sorted goals — by `order`, then created order const sortedGoals = useMemo(() => { return [...goals].sort((a, b) => (a.order ?? 0) - (b.order ?? 0)); }, [goals]); const activeGoal = sortedGoals.find(g => g.id === activeGoalId) || sortedGoals[0] || null; const goalIdx = sortedGoals.findIndex(g => g.id === activeGoal?.id); const updateGoal = useCallback((id, upd) => { setGoals(prev => prev.map(g => g.id === id ? (typeof upd === 'function' ? upd(g) : { ...g, ...upd }) : g)); }, []); const addContribution = useCallback((goalId, entry) => { updateGoal(goalId, g => { const oldBal = (g.currentBalance || 0) + sumContributions(g.contributions); const newBal = oldBal + entry.amount; const oldPct = g.target > 0 ? (oldBal / g.target) * 100 : 0; const newPct = g.target > 0 ? (newBal / g.target) * 100 : 0; const crossed = (g.milestones || []).filter(m => oldPct < m.pct && newPct >= m.pct); const newEntry = { id: uid(), date: entry.date || new Date().toISOString().slice(0, 10), ...entry, }; const contributions = [newEntry, ...(g.contributions || [])] .sort((a, b) => new Date(b.date || 0) - new Date(a.date || 0)); const updated = { ...g, contributions }; if (crossed.length) setTimeout(() => setCelebrate({ milestone: crossed[crossed.length - 1], goal: updated, full: newPct >= 100, }), 300); return updated; }); }, [updateGoal]); const updateContribution = useCallback((goalId, contId, patch) => { updateGoal(goalId, g => ({ ...g, contributions: (g.contributions || []) .map(c => c.id === contId ? { ...c, ...patch } : c) .sort((a, b) => new Date(b.date || 0) - new Date(a.date || 0)), })); }, [updateGoal]); const deleteContribution = useCallback((goalId, contId) => { updateGoal(goalId, g => ({ ...g, contributions: (g.contributions || []).filter(c => c.id !== contId) })); }, [updateGoal]); const deleteGoal = useCallback(id => { setGoals(prev => { const next = prev.filter(g => g.id !== id); if (activeGoalId === id) setActiveGoalId(next[0]?.id || null); return next; }); }, [activeGoalId]); const reorderGoal = useCallback((id, dir) => { setGoals(prev => { const sorted = [...prev].sort((a, b) => (a.order ?? 0) - (b.order ?? 0)); const idx = sorted.findIndex(g => g.id === id); if (idx === -1) return prev; const targetIdx = idx + dir; if (targetIdx < 0 || targetIdx >= sorted.length) return prev; [sorted[idx], sorted[targetIdx]] = [sorted[targetIdx], sorted[idx]]; // re-assign order return sorted.map((g, i) => ({ ...g, order: i })); }); }, []); // Swipe between goals on dashboard const handleTouchStart = e => { if (tab === 'home' && sortedGoals.length > 1) setTouchStart(e.touches[0].clientX); }; const handleTouchEnd = e => { if (touchStart === null || tab !== 'home' || sortedGoals.length <= 1) return; const diff = touchStart - e.changedTouches[0].clientX; if (Math.abs(diff) > 60) { const next = Math.max(0, Math.min(sortedGoals.length - 1, goalIdx + (diff > 0 ? 1 : -1))); setActiveGoalId(sortedGoals[next].id); } setTouchStart(null); }; const connectHousehold = id => { setHHId(id); setHouseholdIdState(id); fbInited = false; fbDb = null; }; const generateHouseholdId = () => { const id = `${(settings.partner1||'a').toLowerCase()}-${(settings.partner2||'b').toLowerCase()}-${uid().slice(0,4)}`; connectHousehold(id); setTimeout(() => { if (fbDb) fbWrite(id, { goals, settings, updatedAt: new Date().toISOString() }); }, 2000); return id; }; const leaveHousehold = () => { clearHHId(); setHouseholdIdState(''); setSyncStatus('offline'); }; const deleteHousehold = async () => { if (householdId) await fbDelete(householdId); leaveHousehold(); }; const T = dark ? darkT : lightT; const C = settings.currency; const fmt = n => `${C}${Math.abs(n).toLocaleString('en-US', { maximumFractionDigits: 0 })}`; const hide = v => settings.hideBalances ? '•••' : v; // Auth gates — only when Firebase is configured const myName = authUser ? (members[authUser.uid]?.name || null) : null; if (authLoading) return ; if (firebaseConfigured() && !authUser) return ; if (authUser && householdId && !myName) { return ; } return (
{showSplash && }
IN TIME
{settings.partner1} & {settings.partner2}
{now.toLocaleTimeString('en-US',{hour:'numeric',minute:'2-digit'})}
{/* Goals ticker — only on dashboard, when 2+ goals */} {tab === 'home' && sortedGoals.length >= 2 && ( setActiveGoalId(id)} fmt={fmt} T={T}/> )}
{tab === 'home' && activeGoal && ( )} {tab === 'home' && !sortedGoals.length && ( setSheet({ type:'newGoal' })}/> )} {tab === 'goals' && ( { setActiveGoalId(id); setTab('home'); }} setSheet={setSheet} onDelete={deleteGoal} onReorder={reorderGoal}/> )} {tab === 'activity' && ( setSheet({ type:'editContribution', goalId:gid, cont:c })}/> )} {tab === 'spin' && ( { setTab('home'); setSheet({ type:'addContribution', goalId:activeGoal?.id }); }} /> )}
{tab === 'home' && activeGoal && ( )}
{sheet?.type === 'addContribution' && ( setSheet(null)} onAdd={e => { addContribution(sheet.goalId, e); setSheet(null); }}/> )} {sheet?.type === 'editContribution' && ( setSheet(null)} onSave={u => { updateContribution(sheet.goalId, sheet.cont.id, u); setSheet(null); }} onDelete={() => { deleteContribution(sheet.goalId, sheet.cont.id); setSheet(null); }}/> )} {sheet?.type === 'newGoal' && ( setSheet(null)} onSave={g => { const ng = makeGoal({ ...g, order: sortedGoals.length }); setGoals(prev => [...prev, ng]); setActiveGoalId(ng.id); setTab('home'); setSheet(null); }}/> )} {sheet?.type === 'editGoal' && ( g.id === sheet.goalId)} onClose={() => setSheet(null)} onSave={u => { updateGoal(sheet.goalId, g => ({ ...g, ...u })); setSheet(null); }}/> )} {sheet?.type === 'settings' && ( setSheet(null)} onSave={s => { setSettings(s); setSheet(null); }} wheel={wheel} onSaveWheel={nw => { setWheel(nw); if (householdId) fbWriteWheel(householdId, nw); }} authUser={authUser} myName={myName} onSignOut={async () => { await signOutUser(); setSheet(null); }}/> )} {celebrate && setCelebrate(null)}/>}
); } window.__InTimeApp = App; // ============================================================ // COFFEE MUG — centered properly. ViewBox is 310×310, ring at (155,155). // The mug glyph is centered at (105, 90) of the viewBox. // We translate the mug group so the mug center sits on the ring center. // ============================================================ function CoffeeMug({ pct, color, size = 220, T, milestones = [] }) { const fillH = (Math.min(100, pct) / 100) * 120; const steamOp = pct > 5 ? Math.min(0.6, pct / 100) : 0; const CX = 155, CY = 155, R = 108, circ = 2 * Math.PI * R; // Mug local coords: body from (21,33) to (121, 145), handle out to ~150. // Mug glyph bounding box: x [21..150], y [33..160]. Center = ~(85, 96). // We translate the mug so its center sits on (CX, CY). const MUG_CENTER_X = 85; const MUG_CENTER_Y = 96; const tx = CX - MUG_CENTER_X; const ty = CY - MUG_CENTER_Y; const badges = milestones.slice().sort((a, b) => a.pct - b.pct).map(m => { const angle = ((m.pct / 100) * 360 - 90) * (Math.PI / 180); return { ...m, x: CX + Math.cos(angle) * R, y: CY + Math.sin(angle) * R, reached: pct >= m.pct }; }); return (
{/* Progress ring */} {/* Steam — above the mug */} {[55, 78, 101].map((x, i) => ( ))} {/* Mug body */} {/* Liquid (clipped to mug body) */} {fillH > 20 && <> } {/* Mug rim highlight */} {/* Saucer */} {/* Milestone badges */} {badges.map((m, i) => ( {m.reached ? : {m.pct}% } ))}
); } function MugIcon({ size = 24, color }) { return ( ); } // ============================================================ // GOALS TICKER — stock-style horizontal scroll // ============================================================ function GoalsTicker({ goals, activeId, setActive, fmt, T }) { return (
{goals.map(g => { const c = calcGoal(g); const isActive = g.id === activeId; let statusLabel, statusClass; if (c.status === 'complete') { statusLabel = '✓ Done'; statusClass = 'good'; } else if (c.status === 'paused') { statusLabel = 'Paused'; statusClass = 'muted'; } else if (c.status === 'ahead') { statusLabel = `${c.daysDiff}d ahead`; statusClass = 'good'; } else if (c.status === 'ontrack') { statusLabel = 'On track'; statusClass = 'good'; } else if (c.status === 'late') { statusLabel = `${Math.abs(c.daysDiff)}d late`; statusClass = 'late'; } else { statusLabel = '—'; statusClass = 'muted'; } return ( ); })}
); } // ============================================================ // DASHBOARD // ============================================================ function Dashboard({ goal, goals, goalIdx, fmt, hide, T, settings, setSheet, updateGoal, addContribution, C }) { const calc = useMemo(() => calcGoal(goal), [goal]); const countdown = useCountdown(goal.targetDate); const [showWhatIf, setShowWhatIf] = useState(false); const [showChart, setShowChart] = useState(false); const [editingNote, setEditingNote] = useState(false); const [noteVal, setNoteVal] = useState(goal.note || ''); useEffect(() => { setNoteVal(goal.note || ''); }, [goal.id]); const streak = useMemo(() => calcStreak(goal.contributions), [goal.contributions]); const monthlyData = useMemo(() => getMonthlyData(goal.contributions), [goal.contributions]); const maxMonth = Math.max(...monthlyData.map(m => m.amount), 1); // Last 3 contributions for partner activity feed (with createdAt fallback) const recentActivity = useMemo(() => { return (goal.contributions || []).slice(0, 3); }, [goal.contributions]); const lastContrib = recentActivity[0]; const saveNote = () => { updateGoal(goal.id, g => ({ ...g, note: noteVal })); setEditingNote(false); }; // Status display let statusBadge, statusClass; if (calc.status === 'complete') { statusBadge = '🎉 Goal reached!'; statusClass = 'good'; } else if (calc.status === 'paused') { statusBadge = 'Paused'; statusClass = 'muted'; } else if (calc.status === 'ahead') { statusBadge = `${calc.daysDiff}d ahead`; statusClass = 'good'; } else if (calc.status === 'ontrack') { statusBadge = 'On track'; statusClass = 'good'; } else if (calc.status === 'late') { statusBadge = `${Math.abs(calc.daysDiff)}d late`; statusClass = 'late'; } else if (calc.dailyRate === 0 && goal.frequency === 'none' && calc.suggestedMonthly === null) { statusBadge = 'Set a deadline to plan'; statusClass = 'muted'; } else { statusBadge = 'Add a contribution to track'; statusClass = 'muted'; } const projectedDateStr = calc.projectedDate ? calc.projectedDate.toLocaleDateString('en-US', { month:'short', day:'numeric', year:'numeric' }) : '—'; const targetDateStr = calc.targetDate ? calc.targetDate.toLocaleDateString('en-US', { month:'short', day:'numeric', year:'numeric' }) : '—'; const showTargetDate = calc.status === 'late'; // only show og target when late return (
{/* Hero */}
{goal.paused &&
Paused
}
{goal.name}
{hide(fmt(calc.balance))} of {fmt(goal.target)}
{calc.status === 'ahead' && } {calc.status === 'late' && } {calc.status === 'ontrack' && } {calc.status === 'complete' && } {calc.status === 'paused' && } {statusBadge}
{/* Two-date strip — projected always, target only when late */} {!calc.complete && (
Done by
{projectedDateStr}
{showTargetDate && ( <>
·
Wanted by
{targetDateStr}
)} {calc.dailyRate === 0 && goal.frequency === 'none' && calc.suggestedMonthly !== null && ( <>
·
Save
{fmt(calc.suggestedMonthly)}/mo
)}
)} {/* Monthly contribution meter */} {calc.monthlyPlanned > 0 && !goal.paused && ( setSheet({ type:'editGoal', goalId:goal.id })}/> )} {/* Countdown */} {goal.targetDate && (
{countdown.d}days
:
{String(countdown.h).padStart(2,'0')}hrs
:
{String(countdown.m).padStart(2,'0')}min
{countdown.overdue ? 'past ' : 'to '}{goal.targetDate && !isNaN(new Date(goal.targetDate)) ? new Date(goal.targetDate).toLocaleDateString('en-US',{month:'short',day:'numeric'}) : ''}
)} {/* Stats */}
}/> setSheet({ type:'addContribution', goalId:goal.id })}/> 0 ? fmt(calc.monthlyEq) : '—'} sub={calc.dailyRate > 0 ? FREQ[goal.frequency].label.toLowerCase() : goal.frequency === 'none' ? 'random' : 'paused'}/>
{/* Partner activity */} {recentActivity.length > 0 && (

Recent activity

{lastContrib && {relTime(lastContrib.createdAt || lastContrib.date)}}
{recentActivity.map(c => (
setSheet({ type:'editContribution', goalId:goal.id, cont:c })}>
{c.type === 'adjustment' ? : (c.who || '?')[0]}
{c.type === 'adjustment' ? 'Adjustment' : c.who} added {fmt(c.amount)} {c.type === 'unexpected' && · bonus}
{c.note &&
"{c.note}"
}
{relTime(c.createdAt || c.date)} · {new Date(c.date).toLocaleDateString('en-US',{month:'short',day:'numeric'})}
))}
)} {/* Milestones */}

Milestones

{(goal.milestones || []).slice().sort((a, b) => a.pct - b.pct).map(m => (
= m.pct ? 'reached' : ''}`} style={calc.pct >= m.pct ? { background: goal.color + '18', borderColor: goal.color + '50' } : {}}>
= m.pct ? { background: goal.color, borderColor: goal.color } : {}}> {calc.pct >= m.pct ? : {m.pct}%}
{m.label || `${m.pct}%`}
{m.reward &&
{m.reward}
}
))}
{/* Shared note */}

Note

{!editingNote && }
{editingNote ? (