root = Card([header, metricsRow, expensesChart, largeTransactions, downloadBtn])
header = CardHeader("Month-End Finance View", monthSelector)
monthSelector = Select("month", [janItem, febItem, marItem, aprItem, mayItem, junItem, julItem, augItem, sepItem, octItem, novItem, decItem], "Select month", null, "medium")
janItem = SelectItem("2024-01", "January 2024")
febItem = SelectItem("2024-02", "February 2024")
marItem = SelectItem("2024-03", "March 2024")
aprItem = SelectItem("2024-04", "April 2024")
mayItem = SelectItem("2024-05", "May 2024")
junItem = SelectItem("2024-06", "June 2024")
julItem = SelectItem("2024-07", "July 2024")
augItem = SelectItem("2024-08", "August 2024")
sepItem = SelectItem("2024-09", "September 2024")
octItem = SelectItem("2024-10", "October 2024")
novItem = SelectItem("2024-11", "November 2024")
decItem = SelectItem("2024-12", "December 2024")
metricsRow = Card([cashCard, burnCard, runwayCard], "clear", "row", "m", "stretch", "between")
cashCard = Card([cashLabel, cashValue], "sunk", "column", "s", "center", "center")
cashLabel = TextContent("Cash on Hand", "small-heavy")
cashValue = TextContent("$487,250", "large-heavy")
burnCard = Card([burnLabel, burnValue], "sunk", "column", "s", "center", "center")
burnLabel = TextContent("Monthly Burn", "small-heavy")
burnValue = TextContent("$142,800", "large-heavy")
runwayCard = Card([runwayLabel, runwayValue], "sunk", "column", "s", "center", "center")
runwayLabel = TextContent("Months of Runway", "small-heavy")
runwayValue = TextContent("3.4", "large-heavy")
expensesChart = Card([expensesHeading, expensesPie], "sunk")
expensesHeading = Heading("Expenses by Category", "h3")
expensesPie = PieChart(expenseLabels, expenseValues, "donut", "circular")
expenseLabels = ["Payroll", "Cloud & Infra", "Marketing", "Rent", "Professional Services", "Travel", "Other"]
expenseValues = [89400, 18200, 15600, 12000, 4800, 2800, 0]
largeTransactions = Card([txHeading, txTable], "sunk")
txHeading = Heading("Transactions > $10,000 This Month", "h3")
txTable = Table([txDateCol, txDescCol, txCategoryCol, txAmountCol])
txDateCol = Col("Date", ["2024-11-03", "2024-11-07", "2024-11-12", "2024-11-15", "2024-11-22", "2024-11-28"])
txDescCol = Col("Description", ["AWS Q4 Reserved Instances", "November Payroll", "Office Lease - Q4", "Salesforce Annual Renewal", "Facebook Ads - November", "Legal - Series A Prep"])
txCategoryCol = Col("Category", ["Cloud & Infra", "Payroll", "Rent", "Professional Services", "Marketing", "Professional Services"])
txAmountCol = Col("Amount", [28500, 89400, 12000, 15600, 14200, 11800])
downloadBtn = Buttons([downloadButton])
downloadButton = Button("Download Statement", null, "primary")