// Core screens: Login, Home, Goal, Accounts.
// ═══ LOGIN ═══════════════════════════════════════
function LoginScreen({ dark, onLogin }) {
const t = T(dark);
const [step, setStep] = React.useState('email');
const [email, setEmail] = React.useState(() => {
try { return localStorage.getItem('money:email') || 'alex@mail.ru'; } catch { return 'alex@mail.ru'; }
});
const [code, setCode] = React.useState('');
const codeInputRef = React.useRef(null);
const next = () => {
if (step === 'email') {
if (!email || !email.includes('@')) return;
try { localStorage.setItem('money:email', email); } catch {}
setStep('code');
setTimeout(() => codeInputRef.current && codeInputRef.current.focus(), 200);
} else {
if (code.length < 6) return;
try {
localStorage.setItem('money:loggedIn', 'true');
const cur = JSON.parse(localStorage.getItem('money:settings') || '{}');
if (!cur.displayName) {
cur.displayName = (email.split('@')[0] || 'Саша').replace(/[._-]/g, ' ').replace(/\b\w/g, m => m.toUpperCase());
localStorage.setItem('money:settings', JSON.stringify(cur));
}
} catch {}
onLogin && onLogin();
}
};
return (
{step === 'email' ? <>С возвращением.
Money. : <>Проверьте
почту.}
{step === 'email'
? 'Войдите по email — пришлём одноразовый код. Никаких паролей.'
: <>Код отправлен на {email}. Введите 6 цифр.}
{step === 'email' ? (
<>
Email
setEmail(e.target.value)} type="email" autoComplete="email"
onKeyDown={e => { if (e.key === 'Enter') next(); }}
style={{
flex: 1, border: 'none', outline: 'none', fontFamily: 'inherit', fontSize: 16, fontWeight: 600,
color: t.ink, background: 'transparent', width: '100%',
}} />
) : (
<>
Код из письма
{[0,1,2,3,4,5].map(i => (
{code[i] || ''}
))}
setCode(e.target.value.replace(/\D/g,'').slice(0, 6))}
onKeyDown={e => { if (e.key === 'Enter') next(); }}
style={{ position: 'absolute', inset: 0, opacity: 0, fontSize: 24, padding: 0, border: 'none' }} />
Не пришло? setCode('')}>Отправить снова
(демо: введите любые 6 цифр)
)}
Нажимая «Войти», вы соглашаетесь с условиями.
);
}
// 3D-ish rotating sphere of category bubbles.
function CategorySphere({ dark, onNav, cats }) {
const t = T(dark);
const all = (cats || DATA.categories).filter(c => !c.archived && c.spent > 0);
const rotRef = React.useRef({ rx: -0.25, ry: 0.4 });
const dragRef = React.useRef(null);
const lastTick = React.useRef(Date.now());
const [, force] = React.useReducer(x => x + 1, 0);
React.useEffect(() => {
let raf;
const loop = () => {
const now = Date.now();
const dt = Math.min(50, now - lastTick.current);
lastTick.current = now;
if (!dragRef.current) rotRef.current.ry += dt * 0.0003;
force();
raf = requestAnimationFrame(loop);
};
raf = requestAnimationFrame(loop);
return () => cancelAnimationFrame(raf);
}, []);
const W = 372, H = 240, R = 96;
const cx = W / 2, cy = H / 2;
if (!all.length) {
return (
🪐
Пока нет трат в этом месяце
Добавьте первую — она появится здесь.
);
}
const maxSpent = Math.max(...all.map(c => c.spent));
const positions = all.map((c, i) => {
const phi = Math.acos(1 - 2 * (i + 0.5) / all.length);
const theta = Math.PI * (1 + Math.sqrt(5)) * (i + 0.5);
const x0 = Math.sin(phi) * Math.cos(theta);
const y0 = Math.sin(phi) * Math.sin(theta);
const z0 = Math.cos(phi);
const { rx, ry } = rotRef.current;
let x1 = x0 * Math.cos(ry) - z0 * Math.sin(ry);
let z1 = x0 * Math.sin(ry) + z0 * Math.cos(ry);
let y1 = y0;
let y2 = y1 * Math.cos(rx) - z1 * Math.sin(rx);
let z2 = y1 * Math.sin(rx) + z1 * Math.cos(rx);
return { cat: c, x: x1, y: y2, z: z2 };
});
positions.sort((a, b) => a.z - b.z);
const onPointerDown = (e) => {
dragRef.current = { sx: e.clientX, sy: e.clientY, ry: rotRef.current.ry, rx: rotRef.current.rx };
e.currentTarget.setPointerCapture(e.pointerId);
};
const onPointerMove = (e) => {
if (!dragRef.current) return;
const dx = e.clientX - dragRef.current.sx;
const dy = e.clientY - dragRef.current.sy;
rotRef.current = {
ry: dragRef.current.ry + dx * 0.01,
rx: Math.max(-1.2, Math.min(1.2, dragRef.current.rx - dy * 0.01)),
};
};
const onPointerUp = (e) => {
dragRef.current = null;
try { e.currentTarget.releasePointerCapture(e.pointerId); } catch {}
};
const sizeOf = (spent) => 38 + (spent / maxSpent) * 42;
return (
{positions.map(({ cat, x, y, z }) => {
const depth = (z + 1) / 2;
const scale = 0.55 + depth * 0.55;
const size = sizeOf(cat.spent) * scale;
const px = cx + x * R - size / 2;
const py = cy + y * R - size / 2;
const opacity = 0.32 + depth * 0.68;
return (
);
})}
{all.length} КАТЕГОРИЙ · КРУТИ
{fmtR(DATA.expense.actual)} ₽
);
}
// ═══ HOME ════════════════════════════════════════
function HomeScreen({ dark, onNav, settings, txs }) {
const t = T(dark);
const inc = DATA.income.actual, exp = DATA.expense.actual;
const DOW = ['Воскресенье','Понедельник','Вторник','Среда','Четверг','Пятница','Суббота'];
const MONTHS_GEN = ['января','февраля','марта','апреля','мая','июня','июля','августа','сентября','октября','ноября','декабря'];
const now = new Date();
const todayLabel = `${DOW[now.getDay()]}, ${now.getDate()} ${MONTHS_GEN[now.getMonth()]} ${now.getFullYear()}`;
const displayName = (settings && settings.displayName) || 'Саша';
const homeAcctId = (settings && settings.homeAccountId) || (DATA.accounts.find(a => a.main) || DATA.accounts[0]).id;
const homeAcct = DATA.accounts.find(a => a.id === homeAcctId) || DATA.accounts[0];
// Recent txs from store, first 4.
const recentTxs = (txs || []).slice(0, 4);
const upcoming = DATA.upcoming.filter(u => u.day - now.getDate() >= 0 && u.day - now.getDate() <= 7).slice(0, 4);
const unreadNotifs = ((settings && settings.notifFeed) || []).filter(n => !n.read).length;
return (
{todayLabel}
Привет, {displayName}
{/* hero balance */}
{homeAcct.bank.toUpperCase()} · {homeAcct.title.toUpperCase()}
{fmtR(homeAcct.balance)}
₽
≈ {fmtUSD(homeAcct.balance / DATA.rates.usd)} · курс {DATA.rates.usd} · доступно к тратам
{/* flow stats */}
+{fmtCompact(inc)}
из {fmtCompact(DATA.income.planned)} план
−{fmtCompact(exp)}
{Math.round((exp/(DATA.expense.planned||1))*100)}% от плана
onNav('analytics')}>Куда уходят
{/* upcoming */}
onNav('calendar')}>Скоро
{upcoming.length === 0 && (
На ближайшую неделю нет запланированных платежей.
)}
{upcoming.map(u => (
{u.date.split(' ')[0]}
{u.date.split(' ')[1]}
{u.income ? '+' : '−'}{fmtR(u.amount)}
))}
{recentTxs.map((tx, i) => {
const c = DATA.categories.find(c => c.id === tx.categoryId) || { title: 'Прочее', color: '#9A938A', icon: 'plus' };
const acct = DATA.accounts.find(a => a.id === tx.accountId);
return (
onNav('txs', { editId: tx.id })}
last={i === recentTxs.length - 1} />
);
})}
)}
);
}
// ═══ ACCOUNTS ════════════════════════════════════
function AccountsScreen({ dark, onBack, onNav }) {
const t = T(dark);
const [editing, setEditing] = React.useState(null);
const [, force] = React.useReducer(x => x + 1, 0);
const onSave = (a) => {
if (a.__delete) { deleteAccount(a.id); }
else if (a.id === '__new') { addAccount({ ...a, id: undefined }); }
else { updateAccount(a.id, a); }
setEditing(null); force();
};
return (
}
trailing={
} />
{DATA.accounts.map(a => (
setEditing(a.id)}
style={{ background: dark ? t.surface : '#1A1814', color: '#F5F1EA', position: 'relative', overflow: 'hidden', cursor: 'pointer' }}>
{a.bank.toUpperCase()} · •• {a.last4}
{a.title}
{a.main &&
ОСНОВНОЙ
}
≈ {fmtUSD(a.balance / DATA.rates.usd)}
))}
{DATA.incomeSources.filter(s => s.distributionRules && s.distributionRules.length).map((src, i, arr) => (
{src.title} {fmtR(src.amount)} ₽ →
{src.distributionRules.map((r, j) => {
const acct = DATA.accounts.find(a => a.id === r.accountId);
if (!acct) return null;
return ;
})}
))}
{DATA.incomeSources.filter(s => s.distributionRules && s.distributionRules.length).length === 0 && (
Правил пока нет. Настроить — в источниках дохода.
)}
}
onClick={() => onNav('me')} />
a.id === editing) : null}
onClose={() => setEditing(null)} onSave={onSave} />
);
}
function EditAccountSheet({ dark, editingId, initial, onClose, onSave }) {
const t = T(dark);
const isNew = editingId === '__new';
const [form, setForm] = React.useState(initial || { id: '__new', bank: '', title: '', balance: 0, color: '#5B8BAA', last4: '0000', main: false });
React.useEffect(() => {
if (initial) setForm(initial);
else if (isNew) setForm({ id: '__new', bank: '', title: '', balance: 0, color: '#5B8BAA', last4: '0000', main: false });
}, [editingId]);
if (!editingId) return null;
const set = (k, v) => setForm(f => ({ ...f, [k]: v }));
const PALETTE = ['#FFDD2D','#1AB55D','#EF3124','#5B8BAA','#7A6BB8','#D4A23A','#3DDBDB','#FF6DB1','#9B6DFF','#1F8F87'];
const Field = ({ label, value, onChange, suffix, isNum, placeholder }) => (
{label}
onChange(isNum ? (parseFloat(e.target.value) || 0) : e.target.value)}
inputMode={isNum ? 'decimal' : 'text'}
style={{ flex: 1, border: 'none', outline: 'none', background: 'transparent', fontFamily: 'inherit',
fontSize: 15, fontWeight: 600, color: t.ink, fontVariantNumeric: 'tabular-nums', width: '100%' }} />
{suffix &&
{suffix}
}
);
return (
set('bank', v)} placeholder="Тинькофф" />
set('title', v)} placeholder="Основная" />
set('balance', v)} suffix="₽" isNum />
set('last4', String(v).slice(0, 4))} placeholder="4520" />
Цвет
{PALETTE.map(p => (
))}
{!isNew && DATA.accounts.length > 1 && (
)}
onSave(form)} icon="check" style={{ flex: 1 }}>
{isNew ? 'Создать' : 'Сохранить'}
);
}
function Distribution({ dark, percent, title, sub, color }) {
const t = T(dark);
return (
{percent}%
{title}
{sub &&
{sub}
}
);
}
function BackBtn({ dark, onClick }) {
const t = T(dark);
return (
);
}
// ═══ GOAL ════════════════════════════════════════
function GoalScreen({ dark, onNav }) {
const t = T(dark);
const [editing, setEditing] = React.useState(null);
const [topUp, setTopUp] = React.useState(null);
const [activeId, setActiveId] = React.useState(DATA.goals[0] ? DATA.goals[0].id : null);
const [, force] = React.useReducer(x => x + 1, 0);
if (DATA.goals.length === 0) {
return (
🎯
Поставьте первую цель
Накопления на поездку, новый ноутбук или подушку безопасности.
setEditing('__new')} icon="plus" style={{ marginTop: 18 }}>Создать цель
setEditing(null)}
onSave={(g) => { if (g.id === '__new') { const x = addGoal({ ...g, id: undefined }); setActiveId(x.id); } setEditing(null); force(); }} />
);
}
const g = DATA.goals.find(x => x.id === activeId) || DATA.goals[0];
const pct = Math.round((g.saved / g.target) * 100);
const remaining = g.target - g.saved;
const monthsLeft = Math.ceil(remaining / (g.monthly || 1));
const linkedAcct = DATA.accounts.find(a => a.id === g.accountId) || DATA.accounts[0];
const onSaveGoal = (next) => {
if (next.__delete) { deleteGoal(next.id); setActiveId(DATA.goals[0] ? DATA.goals[0].id : null); }
else if (next.id === '__new') { const x = addGoal({ ...next, id: undefined }); setActiveId(x.id); }
else { updateGoal(next.id, next); }
setEditing(null); force();
};
const onTopUp = (amount) => {
const next = Math.min(g.target, (g.saved || 0) + amount);
updateGoal(g.id, { saved: next });
// mark milestones reached
const ms = (g.milestones || []).map(m => ({ ...m, done: m.done || next >= m.at }));
updateGoal(g.id, { milestones: ms });
setTopUp(null); force();
};
return (
1 ? 'Мои цели' : 'Моя цель'}
subtitle={DATA.goals.length > 1 ? `${DATA.goals.length} активных` : 'Большое путешествие'} large
trailing={
}
/>
{DATA.goals.length > 1 && (
{DATA.goals.map(x => (
setActiveId(x.id)}>
{x.emoji} {x.title}
))}
{g.emoji}
ЦЕЛЬ · {g.deadline ? g.deadline.toUpperCase() : ''}
{g.title}
{fmtR(g.saved)} ₽
/ {fmtR(g.target)}
Накоплено {pct}% — ещё {fmtR(remaining)} ₽
Прогресс по этапам
{(g.milestones || []).map((m, i) => {
const x = (m.at / g.target) * 100;
return (
{m.done && }
{fmtCompact(m.at)}
{m.label}
);
})}
setTopUp(g.monthly || 5000)}>Пополнить
setEditing(g.id)}>Изменить
x.id === editing) : null}
onClose={() => setEditing(null)} onSave={onSaveGoal} />
setTopUp(null)} dark={dark} title="Пополнить цель">
На какую сумму пополнить?
{[1000, 5000, 10000, 25000, g.monthly || 5000].map((v, i) => (
setTopUp(v)}>+{fmtR(v)} ₽
))}
{label}
onChange(isNum ? (parseFloat(e.target.value) || 0) : e.target.value)}
inputMode={isNum ? 'decimal' : 'text'}
style={{ flex: 1, border: 'none', outline: 'none', background: 'transparent', fontFamily: 'inherit',
fontSize: 15, fontWeight: 600, color: t.ink, fontVariantNumeric: 'tabular-nums', width: '100%' }} />
{suffix &&
{suffix}
}
);
return (
Эмодзи
set('emoji', e.target.value.slice(0, 2))} style={{
width: '100%', textAlign: 'center', padding: '12px 0', borderRadius: 12, border: `1px solid ${t.line}`,
background: t.surface, fontFamily: 'inherit', fontSize: 24,
}} />
set('title', v)} placeholder="Накопить на ноутбук" />
set('target', v)} suffix="₽" isNum />
set('saved', v)} suffix="₽" isNum />
set('monthly', v)} suffix="₽" isNum />
set('deadline', v)} placeholder="Авг 2027" />
Счёт
{DATA.accounts.map(a => (
))}
{!isNew && (
)}
onSave(form)} icon="check" style={{ flex: 1 }}>
{isNew ? 'Создать' : 'Сохранить'}
);
}
Object.assign(window, { LoginScreen, HomeScreen, AccountsScreen, GoalScreen, BackBtn, CategorySphere, EditAccountSheet, EditGoalSheet });