} /> {/* ── Spojená přehledová karta: příjem + Lesní koláč ─────── */} {/* Lesní koláč peněz — hlavní priorita karty */}

{faLabel(L('Lesní koláč peněz'), L('Kouzelný měšec'))}

{(() => { const anyOver = a.categories.some(c => c.ofTarget > 100); const nothing = !a.allocated; const tone = nothing ? 'calm' : anyOver ? 'over' : 'ok'; const icon = nothing ? 'leaf' : anyOver ? 'alert' : 'check'; const label = nothing ? L('zatím bez plánu') : anyOver ? L('nad plán') : L('v limitu'); return {label}; })()}

{a.categories.map(c => (

{L(c.name)}

{kc(c.actual)} · {Lf('cíl {p} %', { p: c.targetPct })}

{c.ofTarget} %

))}

{L('Rozděleno')} {kc(a.allocated)} · {L('Zbývá rozdělit')} {kc(a.remaining)}

{/* ── Poslední výdaje (uživatelské one-off) ─────────────── */} {/* ── Mini strom cílů (odkaz na Cíle) ─────────────────────── */} go('cile')} style={{ marginBottom: 22, paddingTop: 14, paddingBottom: 14 }}>

{faLabel(L('Strom cílů'), L('Strom přání'))}

go('cile')} />

{L('Naspořeno')}

{kc(a.reserves.total)}

{a.reserves.goalTotal > 0 ? (

{Lf('z cíle {v}', { v: kc(a.reserves.goalTotal) })} {Math.round(a.reserves.total / a.reserves.goalTotal * 100)} %

) : (

{L('Zasaď první cíl a strom začne růst.')}

)}

{/* ── Zdroje příjmu (roční, sloupcový graf) ────────────────── */} {L('Zdroje příjmu')}

{L('Celkem')} · {L('ročně')} {kc(a.income * 12)}

{(() => { const maxA = Math.max(...a.incomeSources.map(s => s.amount)); return ; })()} {/* ── Roční cíle (Year goals) — naplňující se „hadi" ──────── */} go('cile')}>{L('Roční cíle')}

); } // ── Category row (inside the merged "Měsíční rozhodnutí" card) ────────── function CategoryRow({ c, index }) { const overflow = c.ofTarget > 100; return (

{L(c.name)}

{L(c.status)}

{Lf('Cíl {p} % · {v}', { p: c.targetPct, v: kc(c.target) })}

{fmt(c.actual)}

{Lf('{p} % z příjmu', { p: c.incomePct })}

{faCatNote(c)}

); } // ── Small bits ────────────────────────────────────────────────────────── function Stat({ label, value, accent }) { return (

{label}

{value}

); } function ScreenHeader({ eyebrow, title, right }) { return (

{eyebrow}

{title}

{right}

); } function MonthPill({ month, setMonth, ratios, go }) { const [open, setOpen] = React.useState(false); const MONTHS = ['Leden','Únor','Březen','Duben','Květen','Červen','Červenec','Srpen','Září','Říjen','Listopad','Prosinec']; const year = (month && month.match(/\d{4}/)) ? month.match(/\d{4}/)[0] : '2026'; const r = ratios || { nutne: 50, budouci: 20, radost: 30 }; return (

{open && (

setOpen(false)} style={{ position: 'fixed', inset: 0, zIndex: 40 }} />

{MONTHS.map(mn => { const label = mn + ' ' + year; const on = L(month).startsWith(L(mn)); return ( ); })}

)}

); } // ── Year goals: snake-fill progress bars, auto from Cíle + add your own ── // fill renders at value immediately (robust); transition covers live changes function SnakeBar({ pct, color, h = 13, delay = 140 }) { const w = Math.min(pct, 100); return (

4 ? 1 : 0, }} />

); } // Year goals — functional: base goals auto-pulled from Cíle (APP.reserves.goals), // plus user-added custom goals persisted to localStorage. Real add form. const YG_STORE = 'fa.yearGoals.custom'; function ygLoad() { try { return JSON.parse(localStorage.getItem(YG_STORE)) || []; } catch (e) { return []; } } function ygSave(list) { try { localStorage.setItem(YG_STORE, JSON.stringify(list)); } catch (e) {} } function YearGoals({ go }) { const [custom, setCustom] = React.useState(ygLoad); const [adding, setAdding] = React.useState(false); const [name, setName] = React.useState(''); const [target, setTarget] = React.useState(''); const accents = ['blush', 'sage', 'honey', 'moss']; const goals = [...APP.reserves.goals, ...custom]; const commit = () => { const t = parseInt(String(target).replace(/\s/g, ''), 10); if (!name.trim() || !t || t <= 0) return; const next = [...custom, { name: name.trim(), icon: 'shield', accent: accents[custom.length % accents.length], saved: 0, target: t, custom: true }]; setCustom(next); ygSave(next); setName(''); setTarget(''); setAdding(false); }; const remove = (idx) => { const next = custom.filter((_, i) => i !== idx); setCustom(next); ygSave(next); }; return ( {goals.map((g, i) => { const pct = Math.min(Math.round(g.saved / g.target * 100), 999); const done = pct >= 100; const customIdx = g.custom ? custom.indexOf(g) : -1; return (

!g.custom && go('cile')} style={{ borderTop: i ? '1px solid var(--card-line)' : 'none', cursor: g.custom ? 'default' : 'pointer' }}>

{L(g.name)}

{Lf('{a} z {b}', { a: kc(g.saved), b: kc(g.target) })}

{g.custom && ( )}

{pct} %

); })} {adding ? (

setName(e.target.value)} onKeyDown={e => e.key === 'Enter' && commit()} />

setTarget(e.target.value)} onKeyDown={e => e.key === 'Enter' && commit()} style={{ flex: 1 }} />

) : ( )} ); } // growth ring with sprout — used for reserves function GrowthMark({ pct }) { const size = 52, r = 22, c = 2 * Math.PI * r; const grow = true; // resting state = drawn return (

); } // ── income-source columns — tap a column to focus it (others dim) and see // the monthly amount; tap again to go back to yearly view ─────────────── function SourceBars({ sources, maxA }) { const [sel, setSel] = React.useState(null); const tot = sources.reduce((s, x) => s + x.amount, 0) || 1; return (

{sources.map((s, i) => { const h = Math.round(26 + (s.amount / maxA) * 74); const on = sel === i; return (

setSel(on ? null : i)} style={{ flex: 1, minWidth: 0, cursor: 'pointer' }}> {Math.round(s.amount / tot * 100)} %

{L(s.name)} {on ? `${fmt(s.amount)}\u00A0${L('Kč/měs')}` : `${fmt(s.amount * 12)}\u00A0Kč`}

); })}

); } Object.assign(window, { Prehled, ScreenHeader, GrowthMark, YearGoals, SnakeBar, SourceBars });