root = Card([header, periodForm, inviteDialog, metricsHeader, kpiTable, separator1, signupsHeader, signupsChart, planHeader, planChart, separator2, adoptionHeader, adoptionChart, seatHeader, seatChart, separator3, customersHeader, customersTable, separator4, riskHeader, riskTable, separator5, paymentsHeader, paymentsList])
header = CardHeader("Acme Analytics", "Admin overview")
periodForm = Form("reporting-period", periodButtons, [periodField])
periodButtons = Buttons([applyBtn])
applyBtn = Button("Apply period", null, "primary")
periodField = FormControl("Reporting period", periodSelect)
periodSelect = Select("period", [period30, period90, periodQuarter, periodYtd], "Select period")
period30 = SelectItem("30", "Last 30 days")
period90 = SelectItem("90", "Last 90 days")
periodQuarter = SelectItem("quarter", "This quarter")
periodYtd = SelectItem("ytd", "Year to date")
inviteDialog = DialogBlock("Invite admin", "Invite an admin", "Send an email invitation to a new administrator.", [inviteForm])
inviteForm = Form("invite-admin", inviteButtons, [inviteField])
inviteButtons = Buttons([sendInviteBtn])
sendInviteBtn = Button("Send invite", null, "primary")
inviteField = FormControl("Admin email", inviteInput)
inviteInput = Input("admin_email", "colleague@company.com", "email")
metricsHeader = Heading("Key metrics", "h2")
kpiTable = Table([mrrCol, arrCol, churnCol, npsCol])
mrrCol = Col("MRR", ["$128,400"])
arrCol = Col("ARR", ["$1.54M"])
churnCol = Col("Churn this month", ["2.4%"])
npsCol = Col("NPS", ["42"])
separator1 = Separator()
signupsHeader = Heading("New signups over the past 90 days", "h3")
signupsChart = AreaChart(["Week 1", "Week 2", "Week 3", "Week 4", "Week 5", "Week 6", "Week 7", "Week 8", "Week 9", "Week 10", "Week 11", "Week 12", "Week 13"], [signupsSeries], "natural", "Week", "Signups")
signupsSeries = Series("New signups", [10, 14, 18, 22, 19, 27, 31, 35, 33, 41, 47, 52, 58])
planHeader = Heading("Customers by plan", "h3")
planChart = PieChart(["Starter", "Growth", "Scale", "Enterprise"], [220, 340, 120, 45], "donut")
separator2 = Separator()
adoptionHeader = Heading("Adoption of newest features", "h3")
adoptionChart = HorizontalBarChart(["AI Insights", "Dashboards 2.0", "SSO"], [adoptionSeries], "grouped", "Feature", "Adoption %")
adoptionSeries = Series("Adoption", [62, 45, 28])
seatHeader = Heading("Seat utilization across the company", "h3")
seatChart = BarChart(["Engineering", "Sales", "Support", "Finance"], [seatSeries], "grouped", "Team", "Utilization %")
seatSeries = Series("Seats used", [82, 64, 91, 48])
separator3 = Separator()
customersHeader = Heading("Ten largest customers", "h3")
customersTable = Table([customersColCompany, customersColSeats, customersColSpend])
customersColCompany = Col("Company", ["Acme Corp", "Globex", "Initech", "Umbrella", "Stark Industries", "Wayne Enterprises", "Hooli", "Soylent", "Vandelay", "Pied Piper"])
customersColSeats = Col("Seats", [120, 96, 84, 72, 65, 58, 49, 43, 38, 35])
customersColSpend = Col("Spend", ["$24,000", "$19,200", "$16,800", "$14,400", "$13,000", "$11,600", "$9,800", "$8,600", "$7,600", "$7,000"])
separator4 = Separator()
riskHeader = Heading("Accounts at risk", "h3")
riskTable = Table([riskColAccount, riskColReason])
riskColAccount = Col("Account", ["Northwind", "Contoso", "Fabrikam", "Litware", "Apex"])
riskColReason = Col("Reason", ["No login in 30 days", "Contract renewal in 7 days", "Support tickets doubled", "Usage down 45%", "Payment method expiring"])
separator5 = Separator()
paymentsHeader = Heading("Failed payments", "h3")
paymentsList = ListBlock([pay1, pay2, pay3, pay4])
pay1 = ListItem("Acme Corp", "$4,200 · card declined", null, "Retry")
pay2 = ListItem("Globex", "$1,800 · expired card", null, "Retry")
pay3 = ListItem("Initech", "$950 · insufficient funds", null, "Retry")
pay4 = ListItem("Umbrella", "$2,300 · failed after 3 attempts", null, "Retry")