// fa-plan.jsx — interactive monthly plan. // Emphasis on the split graph (not the income number). Total income is a // collapsible row you expand to add individual incomes. Each of the 3 categories // (Potřebné / Budoucí já / Radost) carries a short description, a structure // graphic, and expands to manage individual items: add (incl. auto-suggested), // delete, and a recurring-monthly toggle. State persists to localStorage. const { useState: usePl, useEffect: usePlE } = React; // ── persisted state helpers ── function plLoad(key, fallback) { try { const v = JSON.parse(localStorage.getItem(key)); return v == null ? fallback : v; } catch (e) { return fallback; } } function plSave(key, val) { try { localStorage.setItem(key, JSON.stringify(val)); } catch (e) {} } // ── seed data (used until the user edits; mirrors APP totals) ── const PLAN_INCOME0 = [ { name: 'Hlavní práce', amount: 1900, recurring: true }, { name: 'Coaching', amount: 430, recurring: true }, { name: 'Podpora', amount: 180, recurring: true }, { name: 'Drobné brigády', amount: 90, recurring: false }, ]; const PLAN_ITEMS0 = { nutne: [ { name: 'Nájem', amount: 780, recurring: true }, { name: 'Energie', amount: 360, recurring: true }, { name: 'Jídlo', amount: 280, recurring: true }, { name: 'Doprava', amount: 90, recurring: true } ], budouci: [ { name: 'Spoření', amount: 230, recurring: true }, { name: 'Investice', amount: 150, recurring: true } ], radost: [ { name: 'Kavárna', amount: 210, recurring: true }, { name: 'Výlety', amount: 200, recurring: false }, { name: 'Předplatné', amount: 120, recurring: true } ], }; const PLAN_SUGGEST = { nutne: ['Telefon a internet', 'Doprava', 'Jídlo', 'Energie'], budouci: ['Rezerva', 'Investice', 'Spoření'], radost: ['Dárky', 'Výlety', 'Předplatné', 'Kavárna'], }; const PLAN_DESC = { nutne: 'Nájem, energie a jídlo — základ, bez kterého se neobejdeš.', budouci: 'Spoření a investice, které pěstuješ pro sebe.', radost: 'Kavárny, výlety a drobnosti, co tě těší.', }; function Plan({ go, month, setMonth, ratios }) { const cats = APP.categories; // {key,name,icon,accent,targetPct} const [income, setIncome] = usePl(() => plLoad('fa.plan.income', PLAN_INCOME0)); const [items, setItems] = usePl(() => plLoad('fa.plan.items', PLAN_ITEMS0)); const [open, setOpen] = usePl(null); // 'income' | cat.key | null usePlE(() => plSave('fa.plan.income', income), [income]); usePlE(() => plSave('fa.plan.items', items), [items]); const incomeTotal = income.reduce((s, x) => s + (+x.amount || 0), 0); const catTotal = (k) => (items[k] || []).reduce((s, x) => s + (+x.amount || 0), 0); const allocated = cats.reduce((s, c) => s + catTotal(c.key), 0); const remaining = incomeTotal - allocated; const segs = cats.map(c => ({ value: catTotal(c.key), color: accentVar(c.accent) })); if (remaining > 0) segs.push({ value: remaining, color: 'var(--unalloc)', light: true }); const setCatItems = (k, next) => setItems({ ...items, [k]: next }); return (
} /> {/* ── Hero: the split graph is the priority ── */}

{L('Co rozdělit')}

{Math.round(allocated / (incomeTotal || 1) * 100)} %
{cats.map(c => (
{L(c.name)} {Math.round(catTotal(c.key) / (incomeTotal || 1) * 100)} %
))} {remaining > 0 && (
{L('Volné')} {Math.round(remaining / (incomeTotal || 1) * 100)} %
)}
{/* status banner */}
{remaining < 0 ? Lf('Překročeno o {v}', { v: kc(-remaining) }) : remaining === 0 ? L('Vše rozděleno — krásně vyvážené.') : Lf('Ještě zbývá rozdělit {v}.', { v: kc(remaining) })}
{/* total income — collapsible (smaller, secondary) */} {open === 'income' && (
)} {/* ── Categories ── */} {L('Rozděl podle 50 / 30 / 20')}
{cats.map(c => { const total = catTotal(c.key); const pctIncome = Math.round(total / (incomeTotal || 1) * 100); const over = pctIncome > c.targetPct; const isOpen = open === c.key; return ( {/* structure graphic */}
{isOpen && (
setCatItems(c.key, n)} accent={c.accent} suggest={PLAN_SUGGEST[c.key]} addLabel={L('Přidat položku')} />
)} ); })}
{/* ── Měsíční rozhodnutí — jednoduchá grafická rekapitulace (bez klikání) ── */}
{L('Měsíční rozhodnutí')}
{cats.map(c => { const total = catTotal(c.key); const pctIncome = Math.round(total / (incomeTotal || 1) * 100); return (
{L(c.name)} c.targetPct ? 'var(--clay)' : 'var(--ink-soft)', whiteSpace: 'nowrap' }}>{pctIncome} % / {L('cíl')} {c.targetPct} %
); })}
); } // ── stacked allocation ribbon — shows % inside segments wide enough ── function PlanRibbon({ segments, h = 16 }) { const total = segments.reduce((s, x) => s + x.value, 0) || 1; return (
{segments.map((s, i) => { const pct = Math.round(s.value / total * 100); return (
{pct >= 14 && ( {pct} % )}
); })}
); } // ── mini structure bar: proportion of each item within a category. // Tap a segment to see its name · amount · share; tap again to hide. function StructureBar({ items, accent }) { const [sel, setSel] = usePl(null); const total = items.reduce((s, x) => s + (+x.amount || 0), 0) || 1; const base = accentVar(accent); if (!items.length) return
; const active = sel != null ? items[sel] : null; return (
{items.map((it, i) => (
{ e.stopPropagation(); setSel(sel === i ? null : i); }} style={{ flex: Math.max(+it.amount || 0, 0.0001), background: `color-mix(in oklab, ${base}, #fff ${(i % 4) * 13}%)`, borderRadius: 999, cursor: 'pointer', opacity: sel != null && sel !== i ? 0.38 : 1, transition: 'opacity .22s ease, flex .5s cubic-bezier(.2,.8,.2,1)', }} /> ))}
{active && (
{L(active.name)} · {kc(active.amount)} · {Math.round((+active.amount || 0) / total * 100)} %
)}
); } // ── item editor: rows (name, amount, recurring toggle, delete) + add + suggest ── function ItemEditor({ list, setList, accent, suggest, addLabel }) { const [name, setName] = usePl(''); const [amount, setAmount] = usePl(''); const update = (i, patch) => setList(list.map((it, k) => k === i ? { ...it, ...patch } : it)); const remove = (i) => setList(list.filter((_, k) => k !== i)); const add = (nm, amt, rec) => { const a = parseInt(String(amt).replace(/\s/g, ''), 10); if (!String(nm).trim() || !a || a <= 0) return false; setList([...list, { name: String(nm).trim(), amount: a, recurring: rec !== false }]); return true; }; const commit = () => { if (add(name, amount, true)) { setName(''); setAmount(''); } }; const used = new Set(list.map(it => it.name)); const chips = (suggest || []).filter(s => !used.has(s)); return (
{list.map((it, i) => (
{L(it.name)} {kc(it.amount)}
))} {chips.length > 0 && (
{L('Návrhy')}: {chips.map(s => ( ))}
)}
setName(e.target.value)} onKeyDown={e => e.key === 'Enter' && commit()} style={{ flex: 1.4 }} /> setAmount(e.target.value)} onKeyDown={e => e.key === 'Enter' && commit()} style={{ flex: 1, minWidth: 0 }} />
); } // sensible default amount for a suggested item function defaultFor(name) { const map = { 'Telefon a internet': 90, 'Doprava': 90, 'Jídlo': 280, 'Energie': 360, 'Rezerva': 200, 'Investice': 150, 'Spoření': 230, 'Dárky': 100, 'Výlety': 200, 'Předplatné': 120, 'Kavárna': 180 }; return map[name] || 100; } Object.assign(window, { Plan, PlanRibbon, StructureBar, ItemEditor });