root = Card([header, statusRow, kpis, expenseSection, txnSection, monthNav, actions])
header = CardHeader("Month-End Finance", "January 2025 statement")
statusRow = Card([statusTag, runwayTag], "sunk", "row", "m")
statusTag = Tag("Healthy runway", null, null, "success")
runwayTag = Tag("14 months", null, null, "info")
kpis = Card([kpiHeading, kpiTable], "sunk")
kpiHeading = Heading("Key metrics", "h3")
kpiTable = Table([metricCol, valueCol])
metricCol = Col("Metric", ["Cash on hand", "Monthly burn", "Months of runway"])
valueCol = Col("Value", ["$1,240,000", "$88,500", "14.0"])
expenseSection = Card([expenseHeading, expenseChart], "sunk")
expenseHeading = Heading("Expenses by category", "h3")
expenseChart = HorizontalBarChart(["Payroll", "Infrastructure", "Marketing", "Office", "Software", "Travel"], [expenseSeries], "stacked", "USD", "Category")
expenseSeries = Series("January spend", [42000, 12300, 15800, 7400, 6800, 4200])
txnSection = Card([txnHeading, txnTable], "sunk")
txnHeading = Heading("Transactions over $10,000", "h3")
txnTable = Table([dateCol, vendorCol, amountCol])
dateCol = Col("Date", ["Jan 3", "Jan 7", "Jan 12", "Jan 18", "Jan 24", "Jan 29"])
vendorCol = Col("Vendor", ["CloudCore Infra", "Acme Payroll", "BrightAds Media", "WeWork Office", "DataStack Inc", "FlyHigh Travel"])
amountCol = Col("Amount", ["$12,300", "$42,000", "$15,800", "$7,400", "$6,800", "$4,200"])
monthNav = Card([navHeading, navForm], "clear")
navHeading = Heading("View a different month", "h3")
navForm = Form("month-selector", navButtons, [monthField])
monthField = FormControl("Month", monthSelect)
monthSelect = Select("month", [mJan, mDec, mNov], "Choose a month")
mJan = SelectItem("2025-01", "January 2025")
mDec = SelectItem("2024-12", "December 2024")
mNov = SelectItem("2024-11", "November 2024")
navButtons = Buttons([viewBtn])
viewBtn = Button("View month", null, "primary")
actions = Buttons([downloadBtn, exportBtn])
downloadBtn = Button("Download statement", null, "primary")
exportBtn = Button("Export CSV", null, "secondary")