root = Card([header, periodSection, metricsSection, signupsSection, planSection, customersSection, atRiskSection, failedPaymentsSection, featureSection, inviteSection], "card", "column", "l")
header = CardHeader("Admin Overview", "Revenue, growth, and account health at a glance")
periodSection = Card([periodHeading, periodSelect], "sunk", "column", "s")
periodHeading = Heading("Reporting period", "h3")
periodSelect = Select("period", [period30, period90, periodQuarter, periodYTD], "Last 90 days", null, "90d")
period30 = SelectItem("30d", "Last 30 days")
period90 = SelectItem("90d", "Last 90 days")
periodQuarter = SelectItem("q", "This quarter")
periodYTD = SelectItem("ytd", "Year to date")
metricsSection = Card([metricsHeading, metrics], "sunk", "column", "s")
metricsHeading = Heading("Key metrics", "h3")
metrics = Card([mrrCard, arrCard, churnCard, npsCard, seatCard], "sunk", "row", "m")
mrrCard = Card([mrrLabel, mrrValue], "clear")
mrrLabel = TextContent("Monthly Recurring Revenue", "small")
mrrValue = TextContent("$128,400", "large")
arrCard = Card([arrLabel, arrValue], "clear")
arrLabel = TextContent("Annual Recurring Revenue", "small")
arrValue = TextContent("$1,540,800", "large")
churnCard = Card([churnLabel, churnValue], "clear")
churnLabel = TextContent("Churn this month", "small")
churnValue = TextContent("3.2%", "large")
npsCard = Card([npsLabel, npsValue], "clear")
npsLabel = TextContent("Current NPS", "small")
npsValue = TextContent("62", "large")
seatCard = Card([seatLabel, seatProgress], "clear")
seatLabel = TextContent("Seat utilization", "small")
seatProgress = Progress(78, "78%")
signupsSection = Card([signupsHeading, signupsChart], "sunk", "column", "s")
signupsHeading = Heading("New signups — last 90 days", "h3")
signupsChart = AreaChart(["Jun 1", "Jun 8", "Jun 15", "Jun 22", "Jun 29", "Jul 6", "Jul 13", "Jul 20", "Jul 27", "Aug 3"], [signupsSeries], "natural", "Date", "Signups")
signupsSeries = Series("New signups", [42, 58, 49, 71, 86, 94, 102, 118, 134, 152])
planSection = Card([planHeading, planChart], "sunk", "column", "s")
planHeading = Heading("Customers by plan", "h3")
planChart = PieChart(["Starter", "Pro", "Business", "Enterprise"], [320, 180, 95, 27], "donut")
customersSection = Card([customersHeading, customersTable], "sunk", "column", "s")
customersHeading = Heading("Ten largest customers", "h3")
customersTable = Table([custName, custSeats, custSpend])
custName = Col("Customer", ["Acme Corp", "Globex", "Initech", "Umbrella", "Stark Industries", "Wayne Enterprises", "Hooli", "Pied Piper", "Vandelay Industries", "Massive Dynamic"])
custSeats = Col("Seats", [240, 180, 150, 120, 110, 95, 88, 75, 60, 55], "number")
custSpend = Col("Monthly spend", ["$12,000", "$9,500", "$8,200", "$7,100", "$6,400", "$5,800", "$5,100", "$4,600", "$4,200", "$3,900"])
atRiskSection = Card([atRiskHeading, atRiskTable], "sunk", "column", "s")
atRiskHeading = Heading("Accounts at risk", "h3")
atRiskTable = Table([riskAccount, riskReason])
riskAccount = Col("Account", ["Acme Corp", "Initech", "Pied Piper"])
riskReason = Col("Reason", ["Usage dropped 40% in 30 days", "Contract expires in 14 days; no renewal", "Billing declined twice this month"])
failedPaymentsSection = Card([failedPaymentsHeading, failedPaymentsList], "sunk", "column", "s")
failedPaymentsHeading = Heading("Failed payments", "h3")
failedPaymentsList = ListBlock([failedPayment1, failedPayment2, failedPayment3], "number")
failedPayment1 = ListItem("Hooli", "$2,400 · Failed Jul 30 · Card expired", null, "Retry")
failedPayment2 = ListItem("Umbrella", "$1,100 · Failed Jul 29 · Insufficient funds", null, "Retry")
failedPayment3 = ListItem("Massive Dynamic", "$850 · Failed Jul 28 · Payment method removed", null, "Retry")
featureSection = Card([featureHeading, featureChart], "sunk", "column", "s")
featureHeading = Heading("Adoption of newest features", "h3")
featureChart = HorizontalBarChart(["AI reports", "SSO", "API keys"], [featureSeries], "grouped", "Adoption %", "Feature")
featureSeries = Series("Active accounts", [82, 64, 47])
inviteSection = Card([inviteHeading, inviteForm], "sunk", "column", "s")
inviteHeading = Heading("Invite another admin", "h3")
inviteForm = Form("invite-admin", inviteButtons, [inviteField])
inviteField = FormControl("Admin email", inviteInput, "They’ll receive an invitation link")
inviteInput = Input("email", "colleague@company.com", "email")
inviteButtons = Buttons([inviteBtn])
inviteBtn = Button("Send invite", null, "primary")