root = Card([header, metricsRow, expensesChart, largeTransactions, followUps], "card", "column", "l")
header = Card([titleRow, monthSelectorRow], "clear", "row", "m", "center", "between")
titleRow = Card([title, subtitle], "clear", "column", "xs")
title = Heading("Month-End Finance View", "h2")
subtitle = TextContent("Startup financial snapshot", "small")
monthSelectorRow = Card([monthLabel, monthSelect, downloadBtn], "clear", "row", "m", "center", "end")
monthLabel = TextContent("Period:", "small-heavy")
monthSelect = Select("period", monthOptions, "Select month", null, "medium")
monthOptions = [optJan, optFeb, optMar, optApr, optMay, optJun, optJul, optAug, optSep, optOct, optNov, optDec]
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")
optJul = SelectItem("2024-07", "July 2024")
optAug = SelectItem("2024-08", "August 2024")
optSep = SelectItem("2024-09", "September 2024")
optOct = SelectItem("2024-10", "October 2024")
optNov = SelectItem("2024-11", "November 2024")
optDec = SelectItem("2024-12", "December 2024")
downloadBtn = Button("Download Statement", null, "primary", "normal", "medium")
metricsRow = Card([cashCard, burnCard, runwayCard], "clear", "row", "m", "stretch", "start")
cashCard = Card([cashLabel, cashValue, cashDelta], "card", "column", "s")
cashLabel = TextContent("Cash on Hand", "small-heavy")
cashValue = TextContent("$847,230", "large-heavy")
cashDelta = TextContent("+$23,450 vs last month", "small")
burnCard = Card([burnLabel, burnValue, burnDelta], "card", "column", "s")
burnLabel = TextContent("Monthly Burn", "small-heavy")
burnValue = TextContent("$187,600", "large-heavy")
burnDelta = TextContent("-$12,300 vs last month", "small")
runwayCard = Card([runwayLabel, runwayValue, runwayDelta], "card", "column", "s")
runwayLabel = TextContent("Runway", "small-heavy")
runwayValue = TextContent("4.5 months", "large-heavy")
runwayDelta = TextContent("+0.3 months vs last month", "small")
expensesChart = Card([expensesTitle, expensesPie], "card", "column", "m")
expensesTitle = Heading("Expenses by Category", "h3")
expensesPie = PieChart(expenseCategories, expenseValues, "donut", "circular")
expenseCategories = ["Payroll", "Cloud & Infra", "Marketing", "Rent", "Professional Services", "Travel", "Other"]
expenseValues = [112400, 28900, 22100, 15600, 8600, 4200, 3800]
largeTransactions = Card([txnTitle, txnTable], "card", "column", "m")
txnTitle = Heading("Transactions > $10,000 This Month", "h3")
txnTable = Table([txnDate, txnDescription, txnCategory, txnAmount])
txnDate = Col("Date", ["2024-11-03", "2024-11-07", "2024-11-12", "2024-11-15", "2024-11-18", "2024-11-22", "2024-11-28"])
txnDescription = Col("Description", ["AWS Annual Commit", "Q4 Payroll Run", "Office Lease Q4", "Legal Retainer", "Facebook Ads Nov", "Contractor Payouts", "Equipment Purchase"])
txnCategory = Col("Category", ["Cloud & Infra", "Payroll", "Rent", "Professional Services", "Marketing", "Payroll", "Other"])
txnAmount = Col("Amount", [45000, 112400, 15600, 25000, 18500, 12300, 11200], "number")
followUps = FollowUpBlock([followUp1, followUp2, followUp3])
followUp1 = FollowUpItem("Show me cash flow forecast for next quarter")
followUp2 = FollowUpItem("Compare burn rate vs same period last year")
followUp3 = FollowUpItem("Break down marketing spend by channel")