root = Card([header, kpiSection, expenseSection, txnSection, monthNav, actions])
header = CardHeader("Month-End Finance", "October 2024")
kpiSection = Card([kpiHeading, kpis], "sunk")
kpiHeading = Heading("Key metrics", "h3")
kpis = Table([kpiName, kpiValue])
kpiName = Col("Metric", ["Cash on hand", "Monthly burn", "Months of runway"])
kpiValue = Col("Value", ["$412,300", "$86,500", "4.8"])
expenseSection = Card([expenseHeading, expenseChart], "sunk")
expenseHeading = Heading("Expenses by category", "h3")
expenseChart = PieChart(["Payroll", "Infrastructure", "Marketing", "Office", "Legal"], [42500, 18400, 12900, 8200, 4500], "donut")
txnHeading = Heading("Transactions over $10,000", "h3")
txns = Table([txnDate, txnDesc, txnCat, txnAmt])
txnDate = Col("Date", ["Oct 31", "Oct 28", "Oct 21", "Oct 15", "Oct 09", "Oct 03"])
txnDesc = Col("Description", ["AWS invoice", "Payroll run", "Ad campaign", "Office lease", "Legal retainer", "Contractor payment"])
txnCat = Col("Category", ["Infrastructure", "Payroll", "Marketing", "Office", "Legal", "Payroll"])
txnAmt = Col("Amount", ["$18,400", "$42,500", "$12,900", "$8,200", "$4,500", "$10,300"])
monthNav = Form("month-selector", navButtons, [monthField])
monthField = FormControl("View month", monthSelect)
monthSelect = Select("month", [oct, nov, dec], "Select a month")
oct = SelectItem("2024-10", "October 2024")
nov = SelectItem("2024-11", "November 2024")
dec = SelectItem("2024-12", "December 2024")
navButtons = Buttons([applyBtn])
applyBtn = Button("Apply month", null, "primary")
actions = Buttons([downloadBtn, shareBtn])
downloadBtn = Button("Download statement")
shareBtn = Button("Share report", null, "secondary")