root = Card([header, metricsRow, expensesChart, largeTransactions, downloadBtn])
header = Card([titleRow, monthSelector], "clear", "row", "m", "center", "between")
titleRow = Card([pageTitle, pageSubtitle], "clear", "column", "xs")
pageTitle = Heading("Month-End Finance View", "h2")
pageSubtitle = TextContent("Acme Inc. • January 2025", "small")
monthSelector = Select("month", monthOptions, "Select month", null, null, "small")
monthOptions = [optJan, optFeb, optMar, optApr, optMay, optJun, optJul, optAug, optSep, optOct, optNov, optDec]
optJan = SelectItem("2025-01", "January 2025")
optFeb = SelectItem("2025-02", "February 2025")
optMar = SelectItem("2025-03", "March 2025")
optApr = SelectItem("2025-04", "April 2025")
optMay = SelectItem("2025-05", "May 2025")
optJun = SelectItem("2025-06", "June 2025")
optJul = SelectItem("2025-07", "July 2025")
optAug = SelectItem("2025-08", "August 2025")
optSep = SelectItem("2025-09", "September 2025")
optOct = SelectItem("2025-10", "October 2025")
optNov = SelectItem("2025-11", "November 2025")
optDec = SelectItem("2025-12", "December 2025")
metricsRow = Card([cashCard, burnCard, runwayCard], "clear", "row", "l", "stretch", "between", true)
cashCard = Card([cashLabel, cashValue], "card", "column", "s", "start")
cashLabel = TextContent("Cash on Hand", "small")
cashValue = TextContent("$487,250", "large-heavy")
burnCard = Card([burnLabel, burnValue], "card", "column", "s", "start")
burnLabel = TextContent("Monthly Burn", "small")
burnValue = TextContent("$142,800", "large-heavy")
runwayCard = Card([runwayLabel, runwayValue], "card", "column", "s", "start")
runwayLabel = TextContent("Runway", "small")
runwayValue = TextContent("3.4 months", "large-heavy")
expensesChart = Card([expensesTitle, expensesChartComp], "card", "column", "m")
expensesTitle = Heading("Expenses by Category", "h3")
expensesChartComp = HorizontalBarChart(expenseCategories, [expenseSeries], "grouped", "Amount (USD)", "Category")
expenseCategories = ["Payroll", "Cloud & Infra", "Marketing", "Rent", "Legal & Compliance", "Travel", "Other"]
expenseSeries = Series("January 2025", [89500, 24300, 18700, 12000, 8900, 5400, 4000])
largeTransactions = Card([txnTitle, txnTable], "card", "column", "m")
txnTitle = Heading("Transactions > $10,000", "h3")
txnTable = Table([txnDate, txnDescription, txnCategory, txnAmount])
txnDate = Col("Date", ["2025-01-03", "2025-01-07", "2025-01-12", "2025-01-15", "2025-01-22", "2025-01-28"])
txnDescription = Col("Description", ["AWS Annual Reserved Instances", "Q1 Payroll - Engineering", "Series A Legal Fees", "Office Lease - Q1", "Facebook Ads Campaign", "Stripe Atlas Incorporation"])
txnCategory = Col("Category", ["Cloud & Infra", "Payroll", "Legal & Compliance", "Rent", "Marketing", "Legal & Compliance"])
txnAmount = Col("Amount", [28500, 89500, 15200, 12000, 18700, 11400])
downloadBtn = Button("Download Statement (PDF)", null, "primary", "normal", "medium")