root = Card([header, periodSelector, metricsRow, chartsRow, tablesSection, seatUtilization, inviteAdmin], "card", "column", "l")
header = CardHeader("Admin Overview", "SaaS platform metrics and management")
periodSelector = Card([periodLabel, periodButtons], "clear", "row", "m", "center", "between")
periodLabel = TextContent("Reporting period:", "small-heavy")
periodButtons = Buttons([btn7d, btn30d, btn90d, btn12m], "row")
btn7d = Button("7 days")
btn30d = Button("30 days")
btn90d = Button("90 days")
btn12m = Button("12 months")
metricsRow = Card([mrrCard, arrCard, churnCard, npsCard], "clear", "row", "m", "stretch", "between")
mrrCard = Card([mrrLabel, mrrValue, mrrTrend], "card", "column", "s")
mrrLabel = TextContent("Monthly Recurring Revenue", "small-heavy")
mrrValue = TextContent("$127,450", "large-heavy")
mrrTrend = TextContent("↑ 12.3% vs last month", "small")
arrCard = Card([arrLabel, arrValue, arrTrend], "card", "column", "s")
arrLabel = TextContent("Annual Recurring Revenue", "small-heavy")
arrValue = TextContent("$1,529,400", "large-heavy")
arrTrend = TextContent("↑ 8.7% vs last year", "small")
churnCard = Card([churnLabel, churnValue, churnTrend], "card", "column", "s")
churnLabel = TextContent("Churn this month", "small-heavy")
churnValue = TextContent("2.1%", "large-heavy")
churnTrend = TextContent("↓ 0.4pp vs last month", "small")
npsCard = Card([npsLabel, npsValue, npsTrend], "card", "column", "s")
npsLabel = TextContent("Current NPS", "small-heavy")
npsValue = TextContent("62", "large-heavy")
npsTrend = TextContent("↑ 5 pts vs last quarter", "small")
chartsRow = Card([signupsChart, planSplitChart, featureAdoptionChart], "clear", "row", "l", "stretch", "between")
signupsChart = Card([signupsHeader, signupsArea], "card", "column", "m")
signupsHeader = CardHeader("New signups (90 days)", "Daily registrations")
signupsArea = AreaChart(signupsLabels, [signupsSeries], "natural", "Date", "Signups")
signupsLabels = ["Day 1", "Day 4", "Day 7", "Day 10", "Day 13", "Day 16", "Day 19", "Day 22", "Day 25", "Day 28", "Day 31", "Day 34", "Day 37", "Day 40", "Day 43", "Day 46", "Day 49", "Day 52", "Day 55", "Day 58", "Day 61", "Day 64", "Day 67", "Day 70", "Day 73", "Day 76", "Day 79", "Day 82", "Day 85", "Day 88", "Day 90"]
signupsSeries = Series("Signups", [12, 18, 15, 22, 19, 25, 28, 24, 31, 27, 33, 30, 35, 32, 38, 36, 41, 39, 44, 42, 47, 45, 50, 48, 52, 55, 53, 58, 56, 61, 59])
planSplitChart = Card([planHeader, planPie], "card", "column", "m")
planHeader = CardHeader("Customers by plan", "Distribution across tiers")
planPie = PieChart(planLabels, planValues, "donut")
planLabels = ["Starter", "Professional", "Enterprise", "Custom"]
planValues = [142, 89, 34, 12]
featureAdoptionChart = Card([featureHeader, featureBars], "card", "column", "m")
featureHeader = CardHeader("New feature adoption", "Last 3 features released")
featureBars = HorizontalBarChart(featureLabels, [featureSeries], "grouped", "Adoption %", "Feature")
featureLabels = ["AI Insights", "Workflow Builder", "Advanced Analytics"]
featureSeries = Series("Adoption rate", [34, 28, 19])
tablesSection = Card([largestCustomersTable, atRiskTable, failedPaymentsTable], "clear", "column", "xl")
largestCustomersTable = Card([lcHeader, lcTable], "card", "column", "m")
lcHeader = CardHeader("10 largest customers", "By annual spend")
lcTable = Table([lcName, lcPlan, lcSeats, lcSpend, lcAction])
lcName = Col("Customer", ["Acme Corp", "Globex Inc", "Wayne Enterprises", "Stark Industries", "Umbrella Corp", "Cyberdyne Systems", "Weyland-Yutani", "Tyrell Corp", "Oscorp", "Massive Dynamic"])
lcPlan = Col("Plan", ["Enterprise", "Enterprise", "Custom", "Enterprise", "Professional", "Enterprise", "Custom", "Enterprise", "Professional", "Enterprise"])
lcSeats = Col("Seats", [245, 189, 156, 134, 98, 87, 76, 72, 65, 58], "number")
lcSpend = Col("Annual spend", ["$89,400", "$68,200", "$56,700", "$48,900", "$35,600", "$31,400", "$27,800", "$26,100", "$23,500", "$20,900"])
lcAction = Col("Action", ["View", "View", "View", "View", "View", "View", "View", "View", "View", "View"], "action")
atRiskTable = Card([arHeader, arTable], "card", "column", "m")
arHeader = CardHeader("Accounts at risk", "Churn probability > 70%")
arTable = Table([arName, arPlan, arRisk, arReason, arAction])
arName = Col("Customer", ["Nexus Ltd", "Apex Solutions", "Vertex Group", "Zenith Partners"])
arPlan = Col("Plan", ["Professional", "Starter", "Professional", "Enterprise"])
arRisk = Col("Risk score", ["87%", "82%", "78%", "74%"])
arReason = Col("Primary reason", ["Low feature adoption", "Failed onboarding", "Price sensitivity", "Competitor evaluation"])
arAction = Col("Action", ["Contact", "Contact", "Contact", "Contact"], "action")
failedPaymentsTable = Card([fpHeader, fpTable], "card", "column", "m")
fpHeader = CardHeader("Failed payments", "Requires manual retry")
fpTable = Table([fpCustomer, fpAmount, fpDate, fpMethod, fpRetry])
fpCustomer = Col("Customer", ["Meridian Co", "Horizon Labs", "Pinnacle Inc", "Summit Group", "Apex Solutions"])
fpAmount = Col("Amount", ["$299", "$89", "$1,200", "$449", "$199"])
fpDate = Col("Failed on", ["2024-01-15", "2024-01-14", "2024-01-13", "2024-01-12", "2024-01-11"])
fpMethod = Col("Method", ["Visa •••• 4242", "Amex •••• 1005", "Mastercard •••• 8888", "Visa •••• 7777", "Bank transfer"])
fpRetry = Col("Retry", ["Retry", "Retry", "Retry", "Retry", "Retry"], "action")
seatUtilization = Card([suHeader, suProgress], "card", "column", "m")
suHeader = CardHeader("Seat utilization", "Company-wide license usage")
suProgress = Card([suOverall, suByPlan], "clear", "column", "m")
suOverall = Card([suOverallLabel, suOverallBar], "clear", "row", "m", "center")
suOverallLabel = TextContent("Overall:", "small-heavy")
suOverallBar = Progress(78, "78% of 1,250 seats used")
suByPlan = Card([suStarter, suProf, suEnt, suCustom], "clear", "column", "s")
suStarter = Card([suStarterLabel, suStarterBar], "clear", "row", "s", "center")
suStarterLabel = TextContent("Starter (350 seats):", "small")
suStarterBar = Progress(62, "62%")
suProf = Card([suProfLabel, suProfBar], "clear", "row", "s", "center")
suProfLabel = TextContent("Professional (420 seats):", "small")
suProfBar = Progress(84, "84%")
suEnt = Card([suEntLabel, suEntBar], "clear", "row", "s", "center")
suEntLabel = TextContent("Enterprise (380 seats):", "small")
suEntBar = Progress(91, "91%")
suCustom = Card([suCustomLabel, suCustomBar], "clear", "row", "s", "center")
suCustomLabel = TextContent("Custom (100 seats):", "small")
suCustomBar = Progress(55, "55%")
inviteAdmin = Card([inviteHeader, inviteForm], "card", "column", "m")
inviteHeader = CardHeader("Invite another admin", "Grant admin access to a team member")
inviteForm = Form("invite-admin", inviteButtons, [inviteEmail, inviteRole])
inviteEmail = FormControl("Email address", inviteEmailInput, "We'll send an invitation link")
inviteEmailInput = Input("email", "colleague@company.com", "email")
inviteRole = FormControl("Admin role", inviteRoleSelect)
inviteRoleSelect = Select("role", [roleOwner, roleAdmin, roleViewer], "Select role")
roleOwner = SelectItem("owner", "Owner (full access)")
roleAdmin = SelectItem("admin", "Admin (manage users, billing, settings)")
roleViewer = SelectItem("viewer", "Viewer (read-only access)")
inviteButtons = Buttons([inviteSubmit, inviteCancel], "row")
inviteSubmit = Button("Send invitation", null, "primary")
inviteCancel = Button("Cancel", null, "tertiary")