[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":12,"_34":12,"_35":12,"_36":37},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","689b1125a72481919889415b58e972bd","versionInt","title","Personalised Budget Visualiser","type","code/react","content","import React, { useEffect, useMemo, useRef, useState, createContext, useContext } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { Plus, Trash2, Save, RefreshCw, FlaskConical, ChevronUp, ChevronDown } from \"lucide-react\";\n\nconst safeStorage = {\n get(key, fallback) {\n if (typeof window === \"undefined\") return fallback;\n try {\n const v = window.localStorage.getItem(key);\n return v ? JSON.parse(v) : fallback;\n } catch {\n return fallback;\n }\n },\n set(key, value) {\n if (typeof window === \"undefined\") return;\n try {\n window.localStorage.setItem(key, JSON.stringify(value));\n } catch {}\n },\n clear(keys) {\n if (typeof window === \"undefined\") return;\n try {\n keys.forEach(k => window.localStorage.removeItem(k));\n } catch {}\n }\n};\n\nconst ToastCtx = createContext({ toast: (msg) => {} });\n\nfunction Toaster({ children }) {\n const [items, setItems] = useState([]);\n const idRef = useRef(0);\n const toast = (message) => {\n const id = idRef.current++;\n setItems(prev => [...prev, { id, message }]);\n setTimeout(() => setItems(prev => prev.filter(t => t.id !== id)), 2400);\n };\n return (\n \n {children}\n

\n \n {items.map(t => (\n \n {t.message}\n \n ))}\n \n

\n \n );\n}\n\nfunction useToast() {\n return useContext(ToastCtx);\n}\n\nconst LS_KEYS = {\n INCOME: \"bv_income\",\n CATS: \"bv_categories\",\n GOAL: \"bv_savings_goal\",\n};\n\nfunction cryptoRandom() {\n if (typeof crypto !== \"undefined\" && crypto.getRandomValues) {\n const arr = new Uint32Array(1);\n crypto.getRandomValues(arr);\n return `id_${arr[0].toString(16)}`;\n }\n return `id_${Math.random().toString(36).slice(2)}`;\n}\n\nconst DEFAULT_CATS = [\n { id: cryptoRandom(), name: \"Rent/Mortgage\", amount: 900, type: \"need\", color: \"#6366F1\" },\n { id: cryptoRandom(), name: \"Groceries\", amount: 300, type: \"need\", color: \"#22C55E\" },\n { id: cryptoRandom(), name: \"Utilities\", amount: 160, type: \"need\", color: \"#06B6D4\" },\n { id: cryptoRandom(), name: \"Subscriptions\", amount: 50, type: \"want\", color: \"#F59E0B\" },\n { id: cryptoRandom(), name: \"Fun\", amount: 120, type: \"want\", color: \"#8B5CF6\" },\n { id: cryptoRandom(), name: \"Savings\", amount: 200, type: \"savings\", color: \"#EF4444\" },\n];\n\nfunction clamp(n, min, max) { return Math.min(Math.max(n, min), max); }\nfunction fmt(n) { if (!isFinite(n)) return \"-\"; return n.toLocaleString(undefined, { style: \"currency\", currency: \"GBP\", maximumFractionDigits: 0 }); }\nfunction pct(part, whole) { if (whole <= 0) return 0; return (part / whole) * 100; }\nfunction colorForShare(sharePct) { if (sharePct <= 10) return \"#22c55e\"; if (sharePct <= 25) return \"#f59e0b\"; return \"#ef4444\"; }\n\nconst COLOR_PALETTE = [\n \"#6366F1\", \"#22C55E\", \"#06B6D4\", \"#F59E0B\", \"#8B5CF6\", \"#EF4444\", \"#84CC16\", \"#14B8A6\",\n \"#A855F7\", \"#F97316\", \"#3B82F6\", \"#E11D48\", \"#10B981\", \"#0EA5E9\", \"#F43F5E\"\n];\nfunction ensureColors(cats) { const list = Array.isArray(cats) ? cats : []; return list.map((c, i) => ({ ...c, color: c.color || COLOR_PALETTE[i % COLOR_PALETTE.length] })); }\n\nfunction arcPath(cx, cy, r, startDeg, endDeg) {\n const start = polarToCartesian(cx, cy, r, endDeg);\n const end = polarToCartesian(cx, cy, r, startDeg);\n const largeArc = endDeg - startDeg <= 180 ? 0 : 1;\n return `M ${start.x} ${start.y} A ${r} ${r} 0 ${largeArc} 0 ${end.x} ${end.y} L ${cx} ${cy} Z`;\n}\nfunction polarToCartesian(cx, cy, r, angleDeg) {\n const a = (angleDeg - 90) * (Math.PI / 180);\n return { x: cx + r * Math.cos(a), y: cy + r * Math.sin(a) };\n}\n\nexport default function BudgetVisualizerDashboard() {\n const [mounted, setMounted] = useState(false);\n const [income, setIncome] = useState(() => safeStorage.get(LS_KEYS.INCOME, 3000));\n const [categories, setCategories] = useState(() => ensureColors(safeStorage.get(LS_KEYS.CATS, DEFAULT_CATS)));\n const [savingsGoal, setSavingsGoal] = useState(() => safeStorage.get(LS_KEYS.GOAL, 300));\n const [scenarioOn, setScenarioOn] = useState(false);\n const [scenarioCats, setScenarioCats] = useState(() => ensureColors(safeStorage.get(LS_KEYS.CATS, DEFAULT_CATS)));\n const { toast } = useToast();\n\n useEffect(() => setMounted(true), []);\n useEffect(() => { if (mounted) safeStorage.set(LS_KEYS.INCOME, income); }, [income, mounted]);\n useEffect(() => { if (mounted) safeStorage.set(LS_KEYS.CATS, ensureColors(categories)); }, [categories, mounted]);\n useEffect(() => { if (mounted) safeStorage.set(LS_KEYS.GOAL, savingsGoal); }, [savingsGoal, mounted]);\n useEffect(() => { if (!scenarioOn) setScenarioCats(categories); }, [scenarioOn, categories]);\n\n const activeCats = scenarioOn ? scenarioCats : categories;\n\n const totals = useMemo(() => {\n const totalExpenses = activeCats.reduce((s, c) => s + (+c.amount || 0), 0);\n const byType = activeCats.reduce((acc, c) => { const t = c.type || \"want\"; acc[t] = (acc[t] || 0) + (+c.amount || 0); return acc; }, { need: 0, want: 0, savings: 0 });\n const remaining = income - totalExpenses;\n const savingsSum = byType.savings || 0;\n const savingsProgress = savingsGoal > 0 ? clamp((savingsSum / savingsGoal) * 100, 0, 100) : 0;\n const base = Math.max(totalExpenses, 1);\n const stackPct = { need: pct(byType.need, base), want: pct(byType.want, base), savings: pct(byType.savings, base) };\n return { totalExpenses, byType, remaining, savingsSum, savingsProgress, stackPct };\n }, [activeCats, income, savingsGoal]);\n\n const pie = useMemo(() => {\n const cx = 110, cy = 110, r = 100;\n const total = activeCats.reduce((s, c) => s + Math.max(0, +c.amount || 0), 0) || 1;\n let start = 0;\n const slices = activeCats.map((c, i) => {\n const share = (Math.max(0, +c.amount || 0) / total) * 360;\n const end = start + share;\n const path = arcPath(cx, cy, r, start, end);\n const slice = { id: c.id, name: c.name, amount: +c.amount || 0, start, end, path, fill: c.color || COLOR_PALETTE[i % COLOR_PALETTE.length] };\n start = end;\n return slice;\n });\n return { cx, cy, r, slices };\n }, [activeCats]);\n\n const updateCat = (id, patch) => {\n const upd = (list) => list.map(c => (c.id === id ? { ...c, ...patch } : c));\n if (scenarioOn) setScenarioCats(prev => ensureColors(upd(prev)));\n else setCategories(prev => ensureColors(upd(prev)));\n };\n\n const addCategory = () => {\n const nextIndex = activeCats.length;\n const newCat = { id: cryptoRandom(), name: `New Category ${nextIndex + 1}`, amount: 0, type: \"want\", color: COLOR_PALETTE[nextIndex % COLOR_PALETTE.length] };\n if (scenarioOn) setScenarioCats(prev => ensureColors([...prev, newCat]));\n else setCategories(prev => ensureColors([...prev, newCat]));\n };\n\n const removeCategory = (id) => {\n if (scenarioOn) setScenarioCats(prev => prev.filter(c => c.id !== id));\n else setCategories(prev => prev.filter(c => c.id !== id));\n };\n\n const confirmScenario = () => {\n setCategories(scenarioCats);\n setScenarioOn(false);\n toast(\"Scenario applied & saved\");\n };\n\n const resetAll = () => {\n setIncome(3000);\n setCategories(DEFAULT_CATS);\n setSavingsGoal(300);\n setScenarioCats(DEFAULT_CATS);\n setScenarioOn(false);\n safeStorage.clear([LS_KEYS.CATS, LS_KEYS.INCOME, LS_KEYS.GOAL]);\n toast(\"All data reset\");\n };\n\n const baselineMap = useMemo(() => Object.fromEntries(categories.map(c => [c.id, c])), [categories]);\n\n return (\n \n

Personalised Budget Visualiser

\n \n {scenarioOn && (\n <>\n \n \n \n )}\n \n

\n\n

\n \n

Monthly Income

\n setIncome(clamp(+e.target.value || 0, 0, 1_000_000))}\n className=\"w-full rounded-lg border border-slate-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500\"\n />\n

\n \n \n

Total Expenses

{fmt(totals.totalExpenses)}

{pct(totals.totalExpenses, income).toFixed(0)}% of income

\n \n \n

Remaining

{fmt(totals.remaining)}

{totals.remaining < 0 ? \"Over budget\" : \"Within budget\"}

\n \n \n

Savings Goal

\n setSavingsGoal(clamp(+e.target.value || 0, 0, 1_000_000))}\n className=\"w-full rounded-lg border border-slate-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500\"\n />\n

{totals.savingsProgress.toFixed(0)}% of goal reached

\n \n

\n\n

\n \n

\n \n \n \n {pie.slices.map(s => (\n \n ))}\n \n \n

\n {activeCats.map(c => {\n const share = pct(c.amount || 0, income);\n return (\n

\n x.id===c.id)?.color) }} />\n {c.name}\n

\n );\n })}\n

\n \n\n \n

Needs vs Wants vs Savings

\n {([\"need\",\"want\",\"savings\"]).map((t) => {\n const w = clamp(totals.stackPct[t] || 0, 0, 100);\n const bg = t === \"need\" ? \"#0ea5e9\" : t === \"want\" ? \"#8b5cf6\" : \"#22c55e\";\n return

0 ? \"2px\" : 0), background: bg }} />\n })}\n

Needs: {fmt(totals.byType.need||0)} ({pct(totals.byType.need||0, Math.max(totals.totalExpenses,1)).toFixed(0)}%)

Wants: {fmt(totals.byType.want||0)} ({pct(totals.byType.want||0, Math.max(totals.totalExpenses,1)).toFixed(0)}%)

Savings: {fmt(totals.byType.savings||0)} ({pct(totals.byType.savings||0, Math.max(totals.totalExpenses,1)).toFixed(0)}%)

\n \n

\n\n

Expense Categories

\n \n

\n\n

Name

Type

Amount

Adjust

% of Income

\n {activeCats.map((c) => {\n const share = pct(c.amount || 0, income);\n const base = baselineMap[c.id]?.amount ?? c.amount;\n const diff = (c.amount || 0) - (base || 0);\n const hasDiff = scenarioOn && Math.abs(diff) > 0.009;\n return (\n

\n updateCat(c.id, { name: e.target.value })}\n />\n updateCat(c.id, { type: e.target.value })}\n >\n \n \n \n \n

\n updateCat(c.id, { amount: clamp(+e.target.value || 0, 0, 1_000_000) })}\n className=\"w-full rounded-lg border border-slate-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500\"\n />\n \n

\n updateCat(c.id, { amount: clamp(+e.target.value || 0, 0, 1_000_000) })}\n className=\"w-full\"\n />\n {hasDiff && (\n

0?\"bg-red-50 text-red-600\":\"bg-emerald-50 text-emerald-700\"} text-xs inline-flex items-center gap-1 px-2 py-1 rounded-full`}>\n {diff>0 ? : }\n {diff>0?\"+\":\"\"}{fmt(Math.abs(diff))}\n

\n )}\n

\n {share.toFixed(0)}%\n

\n );\n })}\n

\n\n \n

\n \n );\n}\n\nfunction Card({ children, className = \"\" }) {\n return (\n

\n {children}\n

\n );\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_38":39,"_40":41},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",37],"traceId","6702877099860226907","traceTime",1778413074113]