root = Card([headerSection, kpiSection, expensesSection, transactionsSection], "card", "column", "l")
headerSection = Card([title, monthSelector], "clear", "row", "l", "center", "between")
title = CardHeader("Month-End Finance", "January 2025 · All figures in USD")
monthSelector = Form("month-selector", monthActions, [monthField])
monthField = FormControl("Month", monthSelect)
monthSelect = Select("month", [janOption, febOption, marOption], "Select month", null, "2025-01")
janOption = SelectItem("2025-01", "January 2025")
febOption = SelectItem("2025-02", "February 2025")
marOption = SelectItem("2025-03", "March 2025")
monthActions = Buttons([goBtn, downloadBtn])
goBtn = Button("Go")
downloadBtn = Button("Download Statement", null, "secondary")
kpiSection = Card([cashCard, burnCard, runwayCard], "clear", "row", "m")
cashCard = Card([cashValue, cashLabel], "sunk", "column", "xs", "center")
cashValue = TextContent("$248,500", "large-heavy")
cashLabel = TextContent("Cash on hand", "small")
burnCard = Card([burnValue, burnLabel], "sunk", "column", "xs", "center")
burnValue = TextContent("$42,300", "large-heavy")
burnLabel = TextContent("Monthly burn", "small")
runwayCard = Card([runwayValue, runwayLabel], "sunk", "column", "xs", "center")
runwayValue = TextContent("5.9 months", "large-heavy")
runwayLabel = TextContent("Runway", "small")
expensesSection = Card([expensesHeader, expensesChart], "clear", "column", "m")
expensesHeader = Heading("Expenses by Category", "h3")
expensesChart = PieChart(["Payroll", "Infrastructure", "Marketing", "Software", "Office"], [18200, 8200, 6100, 4700, 5100], "donut")
transactionsSection = Card([transactionsHeader, transactionsTable], "clear", "column", "m")
transactionsHeader = Heading("Transactions over $10,000", "h3")
transactionsTable = Table([dateCol, merchantCol, categoryCol, amountCol])
dateCol = Col("Date", ["Jan 28", "Jan 24", "Jan 18", "Jan 12", "Jan 05"])
merchantCol = Col("Merchant", ["Atlassian", "AWS", "Google Ads", "Salesforce", "WeWork"])
categoryCol = Col("Category", ["Software", "Infrastructure", "Marketing", "Software", "Office"])
amountCol = Col("Amount", [14200, 18300, 12400, 15600, 11500], "number")