root = Card([mainHeader, periodForm, kpiRow, signupsSection, planSection, customersSection, riskSection, paymentsSection, featuresSection, npsSection, seatSection, inviteSection])
mainHeader = CardHeader("Admin Overview", "Live metrics for your SaaS workspace")
periodForm = Form("period", periodButtons, [periodField])
periodField = FormControl("Reporting period", periodSelect)
periodSelect = Select("period", [period30, period90, periodQuarter], "Select period", null, "30d")
period30 = SelectItem("30d", "Last 30 days")
period90 = SelectItem("90d", "Last 90 days")
periodQuarter = SelectItem("quarter", "This quarter")
periodButtons = Buttons([applyButton])
applyButton = Button("Apply", null, "primary")
kpiRow = Card([mrrCard, arrCard, churnCard], "sunk", "row", "l")
mrrCard = Card([mrrLabel, mrrValue], "clear", "column", "none")
mrrLabel = TextContent("Monthly Recurring Revenue", "small")
mrrValue = TextContent("$128,400", "large-heavy")
arrCard = Card([arrLabel, arrValue], "clear", "column", "none")
arrLabel = TextContent("Annual Recurring Revenue", "small")
arrValue = TextContent("$1,540,800", "large-heavy")
churnCard = Card([churnLabel, churnValue], "clear", "column", "none")
churnLabel = TextContent("Churn This Month", "small")
churnValue = TextContent("3.2%", "large-heavy")
signupsSection = Card([signupsHeader, signupsChart], "card", "column")
signupsHeader = CardHeader("New signups", "Past 90 days")
signupsChart = AreaChart(["W1", "W2", "W3", "W4", "W5", "W6", "W7", "W8", "W9", "W10", "W11", "W12", "W13"], [signupsSeries], "natural", "Week", "Signups")
signupsSeries = Series("Signups", [120, 135, 142, 158, 149, 166, 178, 185, 201, 220, 238, 247, 260])
planSection = Card([planHeader, planPie], "card", "column")
planHeader = CardHeader("Customers by plan")
planPie = PieChart(["Free", "Starter", "Pro", "Enterprise"], [320, 210, 145, 38], "donut")
customersSection = Card([customersHeader, customersTable], "card", "column")
customersHeader = CardHeader("Largest customers", "Top 10 by annual spend")
customersTable = Table([custName, custSeats, custSpend])
custName = Col("Company", ["Acme Corp", "Globex", "Initech", "Umbrella", "Stark Industries", "Wayne Enterprises", "Hooli", "Vandelay", "Pied Piper", "Wonka"])
custSeats = Col("Seats", [240, 180, 150, 120, 98, 85, 76, 64, 52, 45])
custSpend = Col("Annual spend", ["$96,000", "$82,500", "$74,000", "$68,000", "$52,000", "$48,500", "$41,200", "$38,900", "$34,500", "$30,800"])
riskSection = Card([riskHeader, riskList], "card", "column")
riskHeader = CardHeader("Accounts at risk", "Reason and recommended action")
riskList = ListBlock([risk1, risk2, risk3, risk4], "number")
risk1 = ListItem("Acme Corp", "No login in 30 days; onboarding incomplete")
risk2 = ListItem("Globex", "Contract renewal in 15 days; unused seats")
risk3 = ListItem("Initech", "Support tickets doubled; sentiment flagged")
risk4 = ListItem("Umbrella", "Payment method expired; usage dropping")
paymentsSection = Card([paymentsHeader, paymentsList], "card", "column")
paymentsHeader = CardHeader("Failed payments", "Click Retry to re-attempt the charge")
paymentsList = ListBlock([payment1, payment2, payment3], "number")
payment1 = ListItem("Hooli", "$2,400 invoice failed on Jul 2", null, "Retry")
payment2 = ListItem("Vandelay Industries", "$1,980 invoice failed on Jul 3", null, "Retry")
payment3 = ListItem("Pied Piper", "$1,450 invoice failed on Jul 5", null, "Retry")
featuresSection = Card([featuresHeader, adoptionChart], "card", "column")
featuresHeader = CardHeader("Feature adoption", "Three newest releases")
adoptionChart = HorizontalBarChart(["Usage Analytics", "SSO/SAML", "API Webhooks"], [adoptionSeries], "grouped", "Users (%)")
adoptionSeries = Series("Adoption", [62, 45, 31])
npsSection = Card([npsHeader, npsValue, npsTag], "card", "column")
npsHeader = CardHeader("Net Promoter Score")
npsValue = TextContent("52", "large-heavy")
npsTag = Tag("Great", null, null, "success")
seatSection = Card([seatHeader, seatProgress], "card", "column")
seatHeader = CardHeader("Seat utilization")
seatProgress = Progress(78, "1,640 / 2,100 seats used")
inviteSection = Card([inviteHeader, inviteForm], "card", "column")
inviteHeader = CardHeader("Invite an admin")
inviteForm = Form("invite", inviteButtons, [inviteField])
inviteField = FormControl("Admin email", inviteInput, "They'll receive an invite link")
inviteInput = Input("email", "colleague@company.com", "email")
inviteButtons = Buttons([sendInvite])
sendInvite = Button("Send invite", null, "primary")