root = Card([header, controls, kpiRow, expenseSection, txSection], "card", "column", "l")
header = CardHeader("Monthly Finance View", "Startup month-end report · August 2025")
controls = Card([monthForm], "sunk")
monthForm = Form("month-selector", formButtons, [monthField])
monthField = FormControl("Reporting period", monthSelect, "Switch to another month")
monthSelect = Select("month", [augItem, sepItem, julItem, junItem], "Choose a month", null, "2025-08")
augItem = SelectItem("2025-08", "August 2025")
sepItem = SelectItem("2025-09", "September 2025")
julItem = SelectItem("2025-07", "July 2025")
junItem = SelectItem("2025-06", "June 2025")
formButtons = Buttons([applyBtn, downloadBtn])
applyBtn = Button("View month", null, "primary")
downloadBtn = Button("Download statement", null, "secondary")
kpiRow = Card([cashCard, burnCard, runwayCard], "sunk", "row")
cashCard = Card([cashLabel, cashValue, cashNote], "clear", "column", "xs")
cashLabel = Tag("Cash on hand", null, "sm", "info")
cashValue = TextContent("$842,300", "large-heavy")
cashNote = TextContent("Ending balance · Aug 31", "small")
burnCard = Card([burnLabel, burnValue, burnNote], "clear", "column", "xs")
burnLabel = Tag("Monthly burn", null, "sm", "warning")
burnValue = TextContent("$128,400", "large-heavy")
burnNote = TextContent("Net operating spend", "small")
runwayCard = Card([runwayLabel, runwayValue, runwayNote], "clear", "column", "xs")
runwayLabel = Tag("Runway", null, "sm", "success")
runwayValue = TextContent("6.6 months", "large-heavy")
runwayNote = TextContent("At current burn rate", "small")
expenseSection = Card([expenseHeader, expenseChart], "sunk", "column", "m")
expenseHeader = CardHeader("Expenses by category", "Where August spend went")
expenseChart = PieChart(["Salaries", "Infrastructure", "Marketing", "Tools & software", "Office", "Other"], [51200, 18400, 24100, 12800, 9300, 12600], "donut")
txSection = Card([txHeader, txTable], "sunk", "column", "m")
txHeader = CardHeader("Transactions over $10,000", "August 2025")
txTable = Table([txDate, txMerchant, txCategory, txAmount])
txDate = Col("Date", ["Aug 03", "Aug 09", "Aug 17", "Aug 21", "Aug 28"])
txMerchant = Col("Merchant", ["AWS", "Snowflake", "Upwork", "Stripe", "Cloudflare"])
txCategory = Col("Category", ["Infrastructure", "Infrastructure", "Contractors", "Tools & software", "Infrastructure"])
txAmount = Col("Amount", [13200, 15900, 11800, 12400, 14200], "number")