root = Card([pageHeader, monthSelector, kpiBlock, sections, downloadBtn])
pageHeader = CardHeader("Month-End Finance View", "Startup Financial Dashboard · April 2026")
monthSelector = Form("month-picker", monthButtons, [fcMonth])
monthButtons = Buttons([btnViewMonth, btnDownload], "row")
btnViewMonth = Button("View Month", { type: "continue_conversation", context: "Show finance view for selected month" }, "primary")
btnDownload = Button("Download Statement", { type: "continue_conversation", context: "Download the month-end financial statement as PDF" }, "secondary")
fcMonth = FormControl("Select Month", monthSelect, "Choose a month to view its financials")
monthSelect = Select("month", monthOptions, "Select month", { required: true })
monthOptions = [optApr, optMar, optFeb, optJan, optDec, optNov]
optApr = SelectItem("2026-04", "April 2026")
optMar = SelectItem("2026-03", "March 2026")
optFeb = SelectItem("2026-02", "February 2026")
optJan = SelectItem("2026-01", "January 2026")
optDec = SelectItem("2025-12", "December 2025")
optNov = SelectItem("2025-11", "November 2025")
kpiBlock = SnippetCardBlock([kpiCash, kpiBurn, kpiRunway], "grid", true)
kpiCash = SnippetCardItem("cash-on-hand", kpiCashLhs, kpiCashRhs)
kpiCashLhs = IconText(kpiCashIcon, "success", "m", "Cash on Hand", "Bank + liquid assets", false, "horizontal")
kpiCashIcon = Icon("dollar-sign", "finance")
kpiCashRhs = BoldText("number", "$487,500", "-$142,300 vs Mar", "metric")
kpiBurn = SnippetCardItem("monthly-burn", kpiBurnLhs, kpiBurnRhs)
kpiBurnLhs = IconText(kpiBurnIcon, "danger", "m", "Monthly Burn", "Net cash outflow", false, "horizontal")
kpiBurnIcon = Icon("flame", "alerts")
kpiBurnRhs = BoldText("number", "$142,300", "+$8,200 vs Mar", "metric")
kpiRunway = SnippetCardItem("runway", kpiRunwayLhs, kpiRunwayRhs)
kpiRunwayLhs = IconText(kpiRunwayIcon, "warning", "m", "Runway", "At current burn rate", false, "horizontal")
kpiRunwayIcon = Icon("timer", "time")
kpiRunwayRhs = BoldText("number", "3.4 months", "-0.3 vs Mar", "metric")
sections = SectionBlock([secExpenses, secTransactions], false)
secExpenses = SectionItem("expenses", "Expenses by Category", [expensesHeader, expensesChart])
expensesHeader = InlineHeader("April 2026 Expense Breakdown", "Total: $142,300 across 7 categories")
expensesChart = HorizontalBarChart(expenseCategories, [expenseSeries], "grouped", "Amount ($)", "Category")
expenseCategories = ["Payroll & Benefits", "Cloud & Infrastructure", "Marketing & Ads", "Office & Rent", "Professional Services", "Travel & Events", "Other Ops"]
expenseSeries = Series("Expenses ($)", [89500, 24800, 12600, 8200, 4500, 1800, 900])
secTransactions = SectionItem("transactions", "Transactions > $10,000", [txnHeader, txnTable])
txnHeader = InlineHeader("Large Transactions (April 2026)", "7 transactions exceeding $10,000 this month")
txnTable = Table([colDate, colDesc, colCategory, colAmount])
colDate = Col("Date", txnDates, "string")
colDesc = Col("Description", txnDescs, "string")
colCategory = Col("Category", txnCats, "string")
colAmount = Col("Amount ($)", txnAmounts, "number")
txnDates = ["2026-04-02", "2026-04-05", "2026-04-10", "2026-04-12", "2026-04-15", "2026-04-22", "2026-04-28"]
txnDescs = ["April Payroll", "AWS Q1 Commit Payment", "Google Ads - Q2 Campaign", "Office Lease - April", "Legal Retainer - Series A", "Team Offsite - Austin", "Stripe Processing Fees"]
txnCats = ["Payroll & Benefits", "Cloud & Infrastructure", "Marketing & Ads", "Office & Rent", "Professional Services", "Travel & Events", "Other Ops"]
txnAmounts = [89500, 24800, 12600, 8200, 15000, 11800, 10400]
downloadBtn = Buttons([btnDownloadOnly], "row")
btnDownloadOnly = Button("Download April 2026 Statement (PDF)", { type: "continue_conversation", context: "Download the April 2026 month-end financial statement as PDF" }, "secondary", "normal", "large")