// /report โ€” financial grade + charts + insights const { Icons: RpI } = window; const { today: rpToday } = window.OdemesData; function filterByPeriod(txns, period) { const base = rpToday; if (period === 'year') { const y = base.getFullYear(); return txns.filter(t => t.date.startsWith(String(y))); } if (period === 'month') { const prefix = base.toISOString().slice(0, 7); return txns.filter(t => t.date.startsWith(prefix)); } if (period === 'week') { const end = base.toISOString().slice(0, 10); const start = new Date(base); start.setDate(start.getDate() - 6); const from = start.toISOString().slice(0, 10); return txns.filter(t => t.date >= from && t.date <= end); } return txns; } function PageReport({ userId, currency = 'USD' }) { const lang = window.useLang(); const [period, setPeriod] = React.useState('month'); const [allTxns, setAllTxns] = React.useState([]); const [loading, setLoading] = React.useState(true); React.useEffect(() => { if (!userId) return; const sixMonthsAgo = new Date(rpToday); sixMonthsAgo.setMonth(sixMonthsAgo.getMonth() - 6); const from = sixMonthsAgo.toISOString().slice(0, 10); window.SupabaseClient .from('transactions') .select('id, type, category, amount, date') .eq('user_id', userId) .gte('date', from) .order('date', { ascending: false }) .then(({ data }) => { if (data) setAllTxns(data.map(t => ({ ...t, amount: parseFloat(t.amount) }))); setLoading(false); }); }, [userId]); const locale = window._i18nLocale || 'en-US'; const SERIES = React.useMemo(() => { const months = []; for (let i = 5; i >= 0; i--) { const d = new Date(rpToday.getFullYear(), rpToday.getMonth() - i, 1); const prefix = d.toISOString().slice(0, 7); const label = d.toLocaleDateString(locale, { month: 'short' }); const mt = allTxns.filter(t => t.date.startsWith(prefix)); const income = mt.filter(t => t.type === 'income').reduce((s, t) => s + t.amount, 0); const expenses = mt.filter(t => t.type === 'expense').reduce((s, t) => s + t.amount, 0); months.push({ month: label, income, expenses }); } return months; }, [allTxns, lang]); const RT = filterByPeriod(allTxns, period); const incomeSum = RT.filter(t => t.type === 'income').reduce((s, t) => s + t.amount, 0); const expSum = RT.filter(t => t.type === 'expense').reduce((s, t) => s + t.amount, 0); const savings = incomeSum > 0 ? (incomeSum - expSum) / incomeSum : 0; const grade = savings >= 0.5 ? 'A' : savings >= 0.35 ? 'B' : savings >= 0.2 ? 'C' : savings >= 0.05 ? 'D' : 'F'; const gradeColor = { A: 'var(--income)', B: 'var(--teal)', C: '#c8a015', D: 'var(--warn)', F: 'var(--expense)' }[grade]; const catBreakdown = {}; RT.filter(t => t.type === 'expense').forEach(t => { catBreakdown[t.category] = (catBreakdown[t.category] || 0) + t.amount; }); const sortedCats = Object.entries(catBreakdown).sort((a, b) => b[1] - a[1]); const totalExp = sortedCats.reduce((s, [, v]) => s + v, 0); const COLORS = ['var(--accent)', 'var(--teal)', '#5b8def', '#c8a015', '#9e62d8', 'var(--warn)', 'var(--income)', '#666']; const radius = 64, inner = 40; let cum = 0; const top7 = sortedCats.slice(0, 7); const otherVal = sortedCats.slice(7).reduce((s, [, v]) => s + v, 0); const pieData = otherVal > 0 ? [...top7, ['Other', otherVal]] : top7; const segs = pieData.map(([cat, val], i) => { const start = cum / totalExp * 360; cum += val; const end = cum / totalExp * 360; return { cat, val, start, end, color: COLORS[i] || '#999' }; }); const maxVal = Math.max(...SERIES.map(s => Math.max(s.income, s.expenses)), 1); const periodLabel = { week: window.t('last_7_days'), month: rpToday.toLocaleDateString(locale, { month: 'long', year: 'numeric' }), year: String(rpToday.getFullYear()), }[period]; const periodButtons = [ { id: 'week', label: window.t('week') }, { id: 'month', label: window.t('month') }, { id: 'year', label: window.t('year') }, ]; return (

{window.t('financial_report')}

{window.t('where_money')} ยท {periodLabel}
{periodButtons.map(p => ( ))}
{loading &&
{window.t('loading')}
} {!loading && ( <>
{window.t('financial_grade')}
{grade}
{Math.round(savings * 100)}% {window.t('savings_rate').toLowerCase()}
{incomeSum > 0 ? window.t('saving_pct', { pct: Math.round(savings * 100) }) : {window.t('no_income_recorded')}}
{window.t('income')}
+{window.fmtCurrency(incomeSum, currency, 0)}
{window.t('expense')}
โˆ’{window.fmtCurrency(expSum, currency, 0)}
{window.t('net')}
{window.fmtCurrency(incomeSum - expSum, currency, 0)}
{window.t('mo6_trend')}
{window.t('income_vs_exp')}
{window.t('income')} {window.t('expense')}
{SERIES.map((s, i) => (
0 ? 2 : 0, opacity: i === SERIES.length - 1 ? 1 : 0.85 }} />
0 ? 2 : 0, opacity: i === SERIES.length - 1 ? 1 : 0.85 }} />
{s.month}
))}
{window.t('by_category')}
{window.fmtCurrency(totalExp, currency)} total
{totalExp === 0 ? (
{window.t('no_expenses')}
) : (
{segs.map((s, i) => { const a1 = s.start * Math.PI / 180 - Math.PI / 2; const a2 = s.end * Math.PI / 180 - Math.PI / 2; const x1 = Math.cos(a1) * radius, y1 = Math.sin(a1) * radius; const x2 = Math.cos(a2) * radius, y2 = Math.sin(a2) * radius; const x3 = Math.cos(a2) * inner, y3 = Math.sin(a2) * inner; const x4 = Math.cos(a1) * inner, y4 = Math.sin(a1) * inner; const large = (s.end - s.start) > 180 ? 1 : 0; return ; })} {window.t('spent')} {window.fmtCurrency(totalExp, currency, 0)}
{segs.map((s, i) => (
{s.cat} {window.fmtCurrency(s.val, currency, 0)} {Math.round(s.val / totalExp * 100)}%
))}
)}
{window.t('insights')}
{window.t('auto_generated')}
{incomeSum === 0 && expSum === 0 ? (
{window.t('add_for_insights')}
) : [ incomeSum > 0 && { ico: savings >= 0.5 ? '๐ŸŽ‰' : savings >= 0.2 ? '๐Ÿ“Š' : 'โš ๏ธ', txt: <>{window.t('insight_sr_label')}: {Math.round(savings * 100)}% โ€” {window.t('grade')} {grade}. }, expSum > 0 && sortedCats[0] && { ico: '๐Ÿ’ธ', txt: <>{window.t('insight_top_exp')}: {sortedCats[0][0]} โ€” {window.fmtCurrency(sortedCats[0][1], currency, 0)}. }, incomeSum > 0 && expSum > 0 && { ico: '๐Ÿ’ก', txt: <>{window.t('insight_net')}: = 0 ? 'var(--income)' : 'var(--expense)' }}>{(incomeSum - expSum) >= 0 ? '+' : 'โˆ’'}{window.fmtCurrency(Math.abs(incomeSum - expSum), currency, 0)}. }, ].filter(Boolean).map((ins, i) => (
{ins.ico}
{ins.txt}
))}
)}
); } window.PageReport = PageReport;