root = Card([header, kpiRow, expensesSection, transactionsSection, downloadBtn])
header = Card([title, monthSelector], "clear", "row", "m", "center", "between")
title = CardHeader("Month-End Finance", "May 2024")
monthSelector = Select("month", monthOptions, "Select month", null, "small")
monthOptions = [optJan, optFeb, optMar, optApr, optMay, optJun]
optJan = SelectItem("2024-01", "January 2024")
optFeb = SelectItem("2024-02", "February 2024")
optMar = SelectItem("2024-03", "March 2024")
optApr = SelectItem("2024-04", "April 2024")
optMay = SelectItem("2024-05", "May 2024")
optJun = SelectItem("2024-06", "June 2024")
kpiRow = Card([cashCard, burnCard, runwayCard], "clear", "row", "l", "stretch", "between")
cashCard = Callout("success", "Cash on Hand", "$487,200")
burnCard = Callout("warning", "Monthly Burn", "$142,500")
runwayCard = Callout("info", "Runway", "3.4 months")
expensesSection = Card([expensesHeader, expensesChart], "sunk")
expensesHeader = Heading("Expenses by Category", "h3")
expensesChart = HorizontalBarChart(expenseLabels, [expenseSeries], "grouped", "USD", "Category")
expenseLabels = ["Payroll", "Cloud & Infra", "Marketing", "Office & Ops", "Professional Services", "Travel"]
expenseSeries = Series("May 2024", [89000, 24500, 18200, 6800, 4000, 0])
transactionsSection = Card([txHeader, txTable], "sunk")
txHeader = Heading("Transactions > $10,000", "h3")
txTable = Table([txDate, txVendor, txCategory, txAmount])
txDate = Col("Date", ["2024-05-03", "2024-05-07", "2024-05-12", "2024-05-15", "2024-05-22", "2024-05-28"])
txVendor = Col("Vendor", ["Stripe Payroll", "AWS", "Google Ads", "WeWork", "Gunderson Dettmer", "Delta Airlines"])
txCategory = Col("Category", ["Payroll", "Cloud & Infra", "Marketing", "Office & Ops", "Professional Services", "Travel"])
txAmount = Col("Amount", [89000, 24500, 18200, 15600, 12000, 11200], "number")
downloadBtn = Button("Download Statement (CSV)", null, "primary")