// /home — three layout variations
const { Icons: HI } = window;
const { relDate: hrd, today: htoday } = window.OdemesData;
const TODAY_KEY = htoday.toISOString().slice(0, 10);
function deriveAll(type, txns) {
const seen = new Set();
const result = [];
for (const t of txns) {
if (t.type === type && !seen.has(t.category)) {
seen.add(t.category);
result.push(t.category);
}
}
return result;
}
function loadRecent(type) {
try {
const stored = JSON.parse(localStorage.getItem(`odemes-recent-${type}`));
if (Array.isArray(stored) && stored.length) return stored;
} catch (e) {}
return [];
}
function saveRecent(type, list) {
try { localStorage.setItem(`odemes-recent-${type}`, JSON.stringify(list)); } catch (e) {}
}
function pushRecent(description, prev) {
return [description, ...prev.filter(c => c !== description)].slice(0, 16);
}
function DescriptionInput({ value, onChange, allItems, placeholder }) {
const [focused, setFocused] = React.useState(false);
const inputRef = React.useRef(null);
const trimmed = value.trim();
const suggestions = trimmed.length >= 2
? allItems.filter(s => s.toLowerCase().startsWith(trimmed.toLowerCase()) && s.toLowerCase() !== trimmed.toLowerCase())
: [];
const showDropdown = focused && suggestions.length > 0;
const chips = allItems.slice(0, 8).filter(s => s !== value);
const pick = s => { onChange(s); setFocused(false); };
return (
onChange(e.target.value)}
onFocus={() => setFocused(true)}
onBlur={() => setTimeout(() => setFocused(false), 150)}
autoComplete="off"
/>
{showDropdown && (
{suggestions.slice(0, 6).map(s => (
))}
)}
{chips.length > 0 && (
{chips.map(s => (
))}
)}
);
}
window.DescriptionInput = DescriptionInput;
function DateButton({ value, onChange }) {
window.useLang();
const ref = React.useRef(null);
const locale = window._i18nLocale || 'en-US';
const d = value ? new Date(value + 'T00:00:00') : null;
const label = d ? d.toLocaleDateString(locale, { month: 'short', day: 'numeric', year: 'numeric' }) : (window.t?.('pick_date') || 'Pick date');
return (
onChange(e.target.value)}
style={{ position: 'absolute', inset: 0, opacity: 0, pointerEvents: 'none', width: '100%' }} tabIndex={-1} />
);
}
window.DateButton = DateButton;
function EntryFormSplit({ shared }) {
window.useLang();
const { type, setType, amount, setAmount, category, setCategory, note, setNote, date, setDate, saving, saved, handleSave, allExpItems, allIncItems, currency = 'USD' } = shared;
const allItems = type === 'expense' ? allExpItems : allIncItems;
return (
{window.t('new_txn')}
{hrd(TODAY_KEY)}
{window.currencySymbol(currency)}
setAmount(e.target.value.replace(/[^0-9.]/g, ''))} placeholder="0.00" className="mono"
style={{ flex: 1, border: 0, outline: 'none', background: 'transparent', fontSize: 36, fontWeight: 600, letterSpacing: '-0.02em', color: 'var(--text)', padding: 0 }} />
{currency}
);
}
function HomeSplit({ shared }) {
return (
);
}
function HomeHero({ shared }) {
window.useLang();
const { type, setType, amount, setAmount, category, setCategory, note, setNote, saving, saved, handleSave, allExpItems, allIncItems, currency = 'USD' } = shared;
const allItems = type === 'expense' ? allExpItems : allIncItems;
const locale = window._i18nLocale || 'en-US';
return (
{window.currencySymbol(currency)}
setAmount(e.target.value.replace(/[^0-9.]/g, ''))} placeholder="0.00" className="mono"
style={{ border: 0, outline: 'none', background: 'transparent', fontSize: 96, fontWeight: 700, letterSpacing: '-0.04em', color: type === 'income' ? 'var(--income)' : 'var(--text)', width: `${Math.max(4, (amount || '0.00').length)}ch`, maxWidth: '60vw', textAlign: 'left', padding: 0, lineHeight: 1 }} />
{currency} · {htoday.toLocaleDateString(locale, { month: 'long', day: 'numeric', year: 'numeric' })}
setNote(e.target.value)} />
);
}
function HomeCalc({ shared }) {
window.useLang();
const { type, setType, amount, setAmount, category, setCategory, note, setNote, date, setDate, saving, saved, handleSave, allExpItems, allIncItems, currency = 'USD' } = shared;
const allItems = type === 'expense' ? allExpItems : allIncItems;
const press = k => {
if (k === '⌫') { setAmount(a => a.slice(0, -1)); return; }
if (k === '.' && amount.includes('.')) return;
setAmount(a => a + k);
};
const keys = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '.', '0', '⌫'];
return (
{window.t('amount')}
{window.currencySymbol(currency)}{amount || '0.00'}
{keys.map(k => (
))}
);
}
function SummaryStrip({ compact, stats = {}, currency = 'USD' }) {
window.useLang();
const { todayNet = 0, todayCount = 0, monthExp = 0, savingsRate = 0, grade = '—' } = stats;
return (
{window.t('todays_net')}
= 0 ? 'var(--income)' : 'var(--expense)' }}>
{todayNet >= 0 ? '+' : '−'}{window.fmtCurrency(todayNet, currency)}
{todayCount} {todayCount === 1 ? window.t('entry') : window.t('entries')}
{window.t('this_month')}
{window.fmtCurrency(monthExp, currency)}
{window.t('total_expenses')}
{window.t('savings_rate')}
{savingsRate}%
{window.t('grade')} {grade}
);
}
function RecentMini({ setPage, txns = [], currency = 'USD' }) {
window.useLang();
const list = txns.slice(0, 5);
return (
{window.t('recent_activity')}
{list.length === 0 && (
{window.t('no_txns_yet')}
)}
{list.map(t => (
{t.type === 'income' ? : }
{t.category}
{t.note || '—'} · {hrd(t.date)}
{t.type === 'income' ? '+' : '−'}{window.fmtCurrency(t.amount, currency)}
))}
);
}
function PageHome({ variation, setPage, userId, currency = 'USD' }) {
window.useLang();
const [type, setType] = React.useState('expense');
const [amount, setAmount] = React.useState('');
const [category, setCategory] = React.useState('');
const [note, setNote] = React.useState('');
const [date, setDate] = React.useState(TODAY_KEY);
const [saving, setSaving] = React.useState(false);
const [saved, setSaved] = React.useState(false);
const [liveTxns, setLiveTxns] = React.useState([]);
const [recentExp, setRecentExp] = React.useState(() => loadRecent('expense'));
const [recentInc, setRecentInc] = React.useState(() => loadRecent('income'));
React.useEffect(() => { saveRecent('expense', recentExp); }, [recentExp]);
React.useEffect(() => { saveRecent('income', recentInc); }, [recentInc]);
React.useEffect(() => {
if (!userId) return;
const monthStart = htoday.toISOString().slice(0, 7) + '-01';
window.SupabaseClient
.from('transactions')
.select('*')
.eq('user_id', userId)
.gte('date', monthStart)
.order('date', { ascending: false })
.order('timestamp', { ascending: false })
.then(({ data }) => {
if (data) setLiveTxns(data.map(t => ({ ...t, amount: parseFloat(t.amount) })));
});
}, [userId]);
const allExpItems = React.useMemo(() => [...new Set([...recentExp, ...deriveAll('expense', liveTxns)])], [recentExp, liveTxns]);
const allIncItems = React.useMemo(() => [...new Set([...recentInc, ...deriveAll('income', liveTxns)])], [recentInc, liveTxns]);
const stats = React.useMemo(() => {
const todayTxns = liveTxns.filter(t => t.date === TODAY_KEY);
const todayNet = todayTxns.reduce((s, t) => s + (t.type === 'income' ? t.amount : -t.amount), 0);
const monthIncome = liveTxns.filter(t => t.type === 'income').reduce((s, t) => s + t.amount, 0);
const monthExp = liveTxns.filter(t => t.type === 'expense').reduce((s, t) => s + t.amount, 0);
const savingsRate = monthIncome > 0 ? Math.round((monthIncome - monthExp) / monthIncome * 100) : 0;
const grade = savingsRate >= 50 ? 'A' : savingsRate >= 35 ? 'B' : savingsRate >= 20 ? 'C' : savingsRate >= 5 ? 'D' : 'F';
return { todayNet, todayCount: todayTxns.length, monthExp, savingsRate, grade };
}, [liveTxns]);
const handleSave = async () => {
if (!amount || parseFloat(amount) <= 0 || !category || !userId || saving) return;
setSaving(true);
const { data } = await window.SupabaseClient
.from('transactions')
.insert({ user_id: userId, amount: parseFloat(amount), type, category, note: note || null, date, currency })
.select()
.single();
setSaving(false);
if (data) {
const t = { ...data, amount: parseFloat(data.amount) };
setLiveTxns(prev => [t, ...prev]);
if (type === 'expense') setRecentExp(prev => pushRecent(category, prev));
else setRecentInc(prev => pushRecent(category, prev));
setSaved(true);
setTimeout(() => {
setSaved(false);
setAmount('');
setNote('');
setCategory('');
setDate(TODAY_KEY);
}, 1200);
}
};
const shared = {
type, setType, amount, setAmount, category, setCategory,
note, setNote, date, setDate, saving, saved, handleSave,
allExpItems, allIncItems, liveTxns, stats, setPage, currency,
};
const locale = window._i18nLocale || 'en-US';
return (
{window.t('welcome_back')}
{htoday.toLocaleDateString(locale, { weekday: 'long', month: 'long', day: 'numeric' })}
{stats.grade !== '—' && window.t('grade_this_month', { grade: stats.grade })}
{variation === 'split' &&
}
{variation === 'hero' &&
}
{variation === 'calc' &&
}
);
}
window.PageHome = PageHome;