root = Card([header, periodSection, kpiSection, signupChart, planSection, topCustomers, atRisk, failedPayments, features, npsSection, utilizationSection, inviteSection])
header = CardHeader("Admin Overview", "Key metrics for your SaaS business")
periodSection = Card([periodLabel, periodSelect], "sunk", "column", "s")
periodLabel = TextContent("Reporting period")
periodSelect = Select("reporting_period", [period30, period90, periodYear], "Last 90 days", null, "90d")
period30 = SelectItem("30d", "Last 30 days")
period90 = SelectItem("90d", "Last 90 days")
periodYear = SelectItem("1y", "Last 12 months")
kpiSection = Card([kpiHeading, kpiTable], "sunk")
kpiHeading = Heading("Revenue & churn", "h3")
kpiTable = Table([kpiMetric, kpiValue])
kpiMetric = Col("Metric", ["Monthly recurring revenue", "Annual recurring revenue", "Churn this month", "Current NPS"])
kpiValue = Col("Value", ["$84,500", "$1,014,000", "2.4%", "58"])
signupChart = Card([signupHeading, signupLine], "sunk")
signupHeading = Heading("New signups (last 90 days)", "h3")
signupLine = LineChart(dayLabels, [signupSeries], "natural", "Day", "Signups")
dayLabels = ["Jan 1", "Jan 15", "Feb 1", "Feb 15", "Mar 1", "Mar 15", "Mar 30"]
signupSeries = Series("Signups", [12, 18, 15, 22, 19, 28, 25])
planSection = Card([planHeading, planPie], "sunk")
planHeading = Heading("Customers by plan", "h3")
planPie = PieChart(["Starter", "Pro", "Enterprise"], [320, 410, 85], "donut")
topCustomers = Card([topHeading, topTable], "sunk")
topHeading = Heading("Ten largest customers", "h3")
topTable = Table([custName, custSeats, custSpend])
custName = Col("Customer", ["Acme Corp", "Globex", "Initech", "Umbrella", "Hooli", "Stark Ind.", "Wayne Ent.", "Soylent", "Vandelay", "Cyberdyne"])
custSeats = Col("Seats", [250, 180, 150, 120, 100, 90, 80, 75, 60, 55])
custSpend = Col("Monthly spend", ["$12,500", "$9,000", "$7,500", "$6,000", "$5,000", "$4,500", "$4,000", "$3,750", "$3,000", "$2,750"])
atRisk = Card([atRiskHeading, atRiskTable], "sunk")
atRiskHeading = Heading("Accounts at risk", "h3")
atRiskTable = Table([riskCust, riskReason])
riskCust = Col("Customer", ["Acme Corp", "Initech", "Vandelay", "Cyberdyne"])
riskReason = Col("Reason", ["Low login activity", "Support tickets up 40%", "Contract ends in 30 days", "Churn risk score 82"])
failedPayments = Card([failedHeading, failedTable, retryButtons], "sunk")
failedHeading = Heading("Failed payments", "h3")
failedTable = Table([failCust, failAmount, failDate])
failCust = Col("Customer", ["Globex", "Umbrella", "Hooli"])
failAmount = Col("Amount", ["$9,000", "$6,000", "$5,000"])
failDate = Col("Due", ["Mar 28", "Mar 29", "Mar 30"])
retryButtons = Buttons([retry1, retry2, retry3])
retry1 = Button("Retry Globex", null, "secondary")
retry2 = Button("Retry Umbrella", null, "secondary")
retry3 = Button("Retry Hooli", null, "secondary")
features = Card([featureHeading, featureChart], "sunk")
featureHeading = Heading("Adoption of newest features", "h3")
featureChart = BarChart(["AI Insights", "API v2", "SSO"], [featureSeries], "grouped", "Feature", "Active users")
featureSeries = Series("Active users", [320, 410, 275])
npsSection = Card([npsHeading, npsProgress], "sunk")
npsHeading = Heading("Current NPS", "h3")
npsProgress = Progress(58, "58 — good standing")
utilizationSection = Card([utilHeading, utilChart], "sunk")
utilHeading = Heading("Seat utilization", "h3")
utilChart = HorizontalBarChart(["Acme", "Globex", "Initech", "Umbrella", "Hooli"], [utilSeries], "grouped", "Utilization %", "Customer")
utilSeries = Series("Seats used", [78, 92, 65, 88, 74])
inviteSection = Card([inviteHeading, inviteForm], "sunk")
inviteHeading = Heading("Invite another admin", "h3")
inviteForm = Form("invite_admin", inviteButtons, [inviteEmail])
inviteEmail = FormControl("Admin email", inviteInput)
inviteInput = Input("email", "admin@yourcompany.com", "email")
inviteButtons = Buttons([inviteBtn])
inviteBtn = Button("Send invite", null, "primary")