root = Card([header, topActions, kpisRow, signupsCard, planCard, customersCard, riskCard, paymentsCard, adoptionCard, utilizationCard])
header = CardHeader("Admin Overview", "Company health at a glance")
topActions = Card([periodButtons, inviteDialog], "clear", "row", "l", null, "between")
periodButtons = Buttons([period30, period90, periodYear])
period30 = Button("Last 30 days")
period90 = Button("Last 90 days")
periodYear = Button("This year")
inviteDialog = DialogBlock("Invite admin", "Invite an administrator", "Add a new admin to your workspace", [inviteForm], "outline")
inviteForm = Form("invite", inviteButtons, [emailField, roleField])
emailField = FormControl("Email", emailInput)
emailInput = Input("email", "admin@company.com", "email")
roleField = FormControl("Role", roleSelect)
roleSelect = Select("role", [roleAdmin, roleAnalyst], "Select role")
roleAdmin = SelectItem("admin", "Admin")
roleAnalyst = SelectItem("analyst", "Analyst")
inviteButtons = Buttons([inviteSubmit])
inviteSubmit = Button("Send invite", null, "primary")
kpisRow = Card([mrrCard, arrCard, churnCard, npsCard], "sunk", "row", "l")
mrrCard = Card([mrrTitle, mrrValue, mrrDelta], "clear")
mrrTitle = TextContent("Monthly recurring revenue", "small")
mrrValue = TextContent("$128,400", "large-heavy")
mrrDelta = TextContent("+6.2% MoM", "small")
arrCard = Card([arrTitle, arrValue, arrDelta], "clear")
arrTitle = TextContent("Annual recurring revenue", "small")
arrValue = TextContent("$1,540,800", "large-heavy")
arrDelta = TextContent("+18% YoY", "small")
churnCard = Card([churnTitle, churnValue, churnDelta], "clear")
churnTitle = TextContent("Churn this month", "small")
churnValue = TextContent("2.1%", "large-heavy")
churnDelta = TextContent("▼ 0.3 pts", "small")
npsCard = Card([npsTitle, npsValue, npsDelta], "clear")
npsTitle = TextContent("Net Promoter Score", "small")
npsValue = TextContent("61", "large-heavy")
npsDelta = TextContent("+8 this quarter", "small")
signupsCard = Card([signupsHeader, signupsChart], "sunk")
signupsHeader = CardHeader("New signups", "Past 90 days")
signupsChart = AreaChart(["Jan", "Feb", "Mar"], [signupsSeries], "natural", null, "Signups")
signupsSeries = Series("New signups", [112, 148, 203])
planCard = Card([planHeader, planChart], "sunk")
planHeader = CardHeader("Customers by plan", "Current distribution")
planChart = PieChart(["Starter", "Growth", "Enterprise"], [142, 286, 71], "donut")
customersCard = Card([customersHeader, customersTable], "sunk")
customersHeader = CardHeader("Largest customers", "By monthly spend")
customersTable = Table([customerName, customerSeats, customerSpend])
customerName = Col("Company", ["Acme Corp", "Globex", "Initech", "Umbrella", "Stark Ind", "Wayne Ent", "Hooli", "Vandelay", "Soylent", "Cyberdyne"])
customerSeats = Col("Seats", [120, 95, 88, 74, 63, 55, 49, 42, 38, 31])
customerSpend = Col("Spend", ["$8,400", "$6,850", "$5,920", "$5,100", "$4,375", "$3,940", "$3,480", "$3,020", "$2,740", "$2,310"])
riskCard = Card([riskHeader, riskList], "sunk")
riskHeader = CardHeader("Accounts at risk", "Needs attention")
riskList = ListBlock([riskItem1, riskItem2, riskItem3])
riskItem1 = ListItem("Globex", "No login in 30 days")
riskItem2 = ListItem("Initech", "Seat usage dropped 40%")
riskItem3 = ListItem("Vandelay", "Payment failed twice")
paymentsCard = Card([paymentsHeader, paymentsList], "sunk")
paymentsHeader = CardHeader("Failed payments", "Retry to collect")
paymentsList = ListBlock([payment1, payment2, payment3])
payment1 = ListItem("Umbrella Corp", "$1,240 · Mar 3", null, "Retry")
payment2 = ListItem("Hooli", "$980 · Mar 5", null, "Retry")
payment3 = ListItem("Soylent", "$740 · Mar 7", null, "Retry")
adoptionCard = Card([adoptionHeader, adoptionChart], "sunk")
adoptionHeader = CardHeader("Feature adoption", "Newest features")
adoptionChart = HorizontalBarChart(["AI Copilot", "SSO sync", "API v2"], [adoptionSeries], "grouped", "Adoption %")
adoptionSeries = Series("Adoption", [64, 52, 41])
utilizationCard = Card([utilizationHeader, seatProgress, utilizationNote], "sunk")
utilizationHeader = CardHeader("Seat utilization", "Across all plans")
seatProgress = Progress(78, "78% of purchased seats active")
utilizationNote = TextContent("2,410 of 3,090 seats used", "small")