root = Card([header, periodSelector, kpiRow, chartsSection, tablesSection, inviteForm])
header = CardHeader("SaaS Admin Overview", "Real-time metrics · Reporting period: Last 30 Days")
periodSelector = Form("period-form", periodButtons, [periodField])
periodButtons = Buttons([periodApply], "row")
periodApply = Button("Apply", { type: "continue_conversation", context: "Update dashboard to selected period" }, "primary")
periodField = FormControl("Reporting Period", periodSelect, "Select a preset or choose Custom for a specific range")
periodSelect = Select("reporting-period", [p1, p2, p3, p4, p5], "Last 30 Days", { required: true })
p1 = SelectItem("7d", "Last 7 Days")
p2 = SelectItem("30d", "Last 30 Days")
p3 = SelectItem("90d", "Last 90 Days")
p4 = SelectItem("180d", "Last 180 Days")
p5 = SelectItem("custom", "Custom Range…")
kpiRow = SnippetCardBlock([kpiMrr, kpiArr, kpiChurn, kpiNps], "grid", true)
kpiMrr = SnippetCardItem("mrr", mrrLhs, mrrRhs)
mrrLhs = IconText(mrrIcon, "success", "m", "Monthly Recurring Revenue", "MRR", false, "vertical")
mrrIcon = Icon("circle-dollar-sign", "finance")
mrrRhs = BoldText("number", "$284,500", "+12.4% vs prev", "metric")
kpiArr = SnippetCardItem("arr", arrLhs, arrRhs)
arrLhs = IconText(arrIcon, "info", "m", "Annual Recurring Revenue", "ARR", false, "vertical")
arrIcon = Icon("calendar", "time")
arrRhs = BoldText("number", "$3.41M", "+11.8% vs prev", "metric")
kpiChurn = SnippetCardItem("churn", churnLhs, churnRhs)
churnLhs = IconText(churnIcon, "danger", "m", "Churn This Month", "Revenue churn", false, "vertical")
churnIcon = Icon("user-minus", "people")
churnRhs = BoldText("number", "2.1%", "-0.4% vs prev", "metric")
kpiNps = SnippetCardItem("nps", npsLhs, npsRhs)
npsLhs = IconText(npsIcon, "warning", "m", "Current NPS", "Net Promoter Score", false, "vertical")
npsIcon = Icon("smile", "communication")
npsRhs = BoldText("number", "62", "+3 vs last qtr", "metric")
chartsSection = SectionBlock([secSignups, secPlans, secFeatures, secSeats], false)
secSignups = SectionItem("signups", "New Signups (Past 90 Days)", [signupsChart])
signupsChart = AreaChart(signupMonths, [signupsSeries], "natural", "Month", "New Signups")
signupMonths = ["Jul", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan", "Feb", "Mar"]
signupsSeries = Series("Signups", [142, 158, 176, 165, 189, 203, 221, 234, 248])
secPlans = SectionItem("plans", "Customers by Plan", [plansChart, plansTable])
plansChart = PieChart(planLabels, planValues, "donut", "circular")
planLabels = ["Starter", "Professional", "Enterprise", "Custom"]
planValues = [1240, 890, 310, 45]
plansTable = Table([colPlan, colCustomers, colMrrShare, colAvgSeat])
colPlan = Col("Plan", ["Starter", "Professional", "Enterprise", "Custom"], "string")
colCustomers = Col("Customers", [1240, 890, 310, 45], "number")
colMrrShare = Col("MRR Share", ["18%", "35%", "38%", "9%"], "string")
colAvgSeat = Col("Avg Seats", [3.2, 12.8, 84.5, 210.0], "number")
secFeatures = SectionItem("features", "New Feature Adoption (Last 3 Features)", [featuresChart])
featuresChart = BarChart(featureLabels, [adoptionSeries], "grouped", "Feature", "Adoption Rate (%)")
featureLabels = ["AI Insights", "Workflow Builder", "Advanced Analytics"]
adoptionSeries = Series("Adoption %", [34.2, 28.7, 41.5])
secSeats = SectionItem("seats", "Seat Utilization Across Company", [seatsChart, seatsSummary])
seatsChart = HorizontalBarChart(seatLabels, [seatUsedSeries, seatTotalSeries], "grouped", "Seats", "Plan")
seatLabels = ["Starter", "Professional", "Enterprise", "Custom"]
seatUsedSeries = Series("Used", [2980, 8420, 21200, 9450])
seatTotalSeries = Series("Allocated", [3968, 11392, 26145, 9450])
seatsSummary = EntityList([seat1, seat2, seat3, seat4], "default", { left: "Overall", right: "72.4%", rightVariant: "number" })
seat1 = { left: "Starter Utilization", right: "75.1%", rightVariant: "number" }
seat2 = { left: "Professional Utilization", right: "73.9%", rightVariant: "number" }
seat3 = { left: "Enterprise Utilization", right: "81.1%", rightVariant: "number" }
seat4 = { left: "Custom Utilization", right: "100%", rightVariant: "number" }
tablesSection = SectionBlock([secTopCustomers, secAtRisk, secFailedPayments], false)
secTopCustomers = SectionItem("top-customers", "Top 10 Customers by Spend", [topCustomersTable])
topCustomersTable = Table([colRank, colCustomer, colPlan, colSeats, colMonthlySpend, colAnnualSpend, colHealth])
colRank = Col("#", [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], "number")
colCustomer = Col("Customer", ["Acme Corp", "Globex Inc", "Initech", "Wayne Enterprises", "Stark Industries", "Umbrella Corp", "Cyberdyne Systems", "Massive Dynamic", "Oscorp", "Tyrell Corp"], "string")
colPlan = Col("Plan", ["Enterprise", "Enterprise", "Custom", "Enterprise", "Custom", "Enterprise", "Professional", "Enterprise", "Custom", "Enterprise"], "string")
colSeats = Col("Seats", [245, 198, 420, 167, 380, 134, 89, 210, 310, 156], "number")
colMonthlySpend = Col("Monthly Spend", ["$24,500", "$19,800", "$42,000", "$16,700", "$38,000", "$13,400", "$8,900", "$21,000", "$31,000", "$15,600"], "string")
colAnnualSpend = Col("Annual Spend", ["$294,000", "$237,600", "$504,000", "$200,400", "$456,000", "$160,800", "$106,800", "$252,000", "$372,000", "$187,200"], "string")
colHealth = Col("Health", ["Healthy", "Healthy", "At Risk", "Healthy", "Healthy", "Warning", "Healthy", "Healthy", "At Risk", "Healthy"], "string")
secAtRisk = SectionItem("at-risk", "Accounts at Risk", [atRiskTable])
atRiskTable = Table([colRiskCustomer, colRiskPlan, colRiskScore, colRiskReason, colRiskAction])
colRiskCustomer = Col("Customer", ["Initech", "Oscorp", "Globex Inc", "Wayne Enterprises"], "string")
colRiskPlan = Col("Plan", ["Custom", "Custom", "Enterprise", "Enterprise"], "string")
colRiskScore = Col("Health Score", [42, 38, 55, 51], "number")
colRiskReason = Col("Primary Reason", ["Low feature adoption (12%)", "No login in 21 days", "Support tickets ↑ 300%", "Champion left company"], "string")
colRiskAction = Col("Action", ["Assign CSM", "Schedule QBR", "Escalate to VP", "Executive outreach"], "string")
secFailedPayments = SectionItem("failed-payments", "Failed Payments (Last 7 Days)", [failedPaymentsTable])
failedPaymentsTable = Table([colFpCustomer, colFpPlan, colFpAmount, colFpAttempts, colFpLastAttempt, colFpRetry])
colFpCustomer = Col("Customer", ["Apex Digital", "Nexus Labs", "Vertex Solutions", "Quantum Systems", "Helix Dynamics", "Polaris Tech", "Axiom Creative"], "string")
colFpPlan = Col("Plan", ["Professional", "Starter", "Enterprise", "Professional", "Starter", "Enterprise", "Professional"], "string")
colFpAmount = Col("Amount", ["$299", "$79", "$2,450", "$449", "$79", "$3,200", "$449"], "string")
colFpAttempts = Col("Attempts", [3, 2, 4, 2, 1, 3, 2], "number")
colFpLastAttempt = Col("Last Attempt", ["2h ago", "5h ago", "1h ago", "3h ago", "30m ago", "4h ago", "1h ago"], "string")
colFpRetry = Col("Retry", [fpBtn1, fpBtn2, fpBtn3, fpBtn4, fpBtn5, fpBtn6, fpBtn7], "action")
fpBtn1 = Button("Retry", Action([@ToAssistant("Retry payment for Apex Digital ($299)")]), "secondary", "normal", "small")
fpBtn2 = Button("Retry", Action([@ToAssistant("Retry payment for Nexus Labs ($79)")]), "secondary", "normal", "small")
fpBtn3 = Button("Retry", Action([@ToAssistant("Retry payment for Vertex Solutions ($2,450)")]), "secondary", "normal", "small")
fpBtn4 = Button("Retry", Action([@ToAssistant("Retry payment for Quantum Systems ($449)")]), "secondary", "normal", "small")
fpBtn5 = Button("Retry", Action([@ToAssistant("Retry payment for Helix Dynamics ($79)")]), "secondary", "normal", "small")
fpBtn6 = Button("Retry", Action([@ToAssistant("Retry payment for Polaris Tech ($3,200)")]), "secondary", "normal", "small")
fpBtn7 = Button("Retry", Action([@ToAssistant("Retry payment for Axiom Creative ($449)")]), "secondary", "normal", "small")
inviteForm = Form("invite-admin", inviteButtons, [inviteEmail, inviteRole])
inviteButtons = Buttons([inviteSend, inviteCancel], "row")
inviteSend = Button("Send Invitation", { type: "continue_conversation", context: "Send admin invitation to the provided email with selected role" }, "primary")
inviteCancel = Button("Cancel", { type: "continue_conversation", context: "Cancel admin invitation" }, "tertiary")
inviteEmail = FormControl("Email Address", inviteInput, "The invitee will receive an email to set up their admin account")
inviteInput = Input("invite-email", "admin@company.com", "email", { required: true, email: true })
inviteRole = FormControl("Admin Role", inviteRoleSelect, "Choose the permission level for the new admin")
inviteRoleSelect = Select("invite-role", [role1, role2, role3], "Full Admin", { required: true })
role1 = SelectItem("full", "Full Admin — All permissions including billing & user management")
role2 = SelectItem("analytics", "Analytics Admin — View metrics, export reports, manage dashboards")
role3 = SelectItem("support", "Support Admin — Access customer data, tickets, and account health")