\n \n

\n );\n}\n\nfunction BudgetItemRow({ item }: { item: BudgetSummaryItem }) {\n const over = item.actual > item.target;\n return (\n

\n {item.name}\n \n {dollars(item.actual)}\n / {dollars(item.target)}\n \n

\n \n

\n );\n}\n\nfunction GroupCard({ group }: { group: BudgetSummaryGroup }) {\n const [expanded, setExpanded] = useState(false);\n const over = group.totalActual > group.totalTarget;\n\n return (\n

setExpanded(!expanded)}>\n

{group.name}

\n {group.items.length} categories\n

\n {dollars(group.totalActual)}\n

/ {dollars(group.totalTarget)}

\n \n {expanded && (\n

\n {group.items.map((item) => (\n \n ))}\n

\n )}\n

\n );\n}\n\nexport function Dashboard() {\n const [month, setMonth] = useState(currentMonth);\n const [summary, setSummary] = useState(null);\n const [loading, setLoading] = useState(true);\n\n const fetchSummary = useCallback(async (m: string) => {\n setLoading(true);\n const res = await fetch(`/api/budget/summary?month=${m}`);\n const data: BudgetSummary = await res.json();\n setSummary(data);\n setLoading(false);\n }, []);\n\n useEffect(() => {\n fetchSummary(month);\n }, [month, fetchSummary]);\n\n const savingsPositive = (summary?.savings ?? 0) >= 0;\n\n return (\n

\n \n {formatMonth(month)}\n \n

\n\n {loading ? (\n

\n ) : summary ? (\n <>\n {/* Top-level summary cards */}\n

Income

{dollars(summary.totalIncome)}

Spent

{dollars(summary.totalExpenses)}

Saved

\n {savingsPositive ? \"\" : \"-\"}{dollars(summary.savings)}\n

\n {summary.savingsRate.toFixed(1)}%\n

\n\n {/* Budget vs target bar */}\n

\n Total Budget\n \n {dollars(summary.totalExpenses)} / {dollars(summary.expenseTarget)}\n \n

\n \n

\n\n {/* Category groups */}\n {summary.groups.map((group) => (\n \n ))}\n \n ) : null}\n

\n );\n}\n","deleted","label",[174,175,156],"frontend","components","permalink","https://www.val.town/x/shapedlines/runway/code/frontend/components/Dashboard.tsx","extension","actionData","errors"]