root = Card([header, periodForm, kpiSection, signupsSection, planSplitSection, topCustomersSection, atRiskSection, failedPaymentsSection, featureAdoptionSection, npsSection, seatUtilizationSection, inviteSection])

header = CardHeader("Admin Overview", "Company performance at a glance")

periodForm = Form("reporting-period", periodButtons, [periodField])
periodField = FormControl("Reporting period", periodSelect)
periodSelect = Select("period", [periodLast30, periodLast90, periodLast365], "Last 30 days", null, "last30")
periodLast30 = SelectItem("last30", "Last 30 days")
periodLast90 = SelectItem("last90", "Last 90 days")
periodLast365 = SelectItem("last365", "Last 365 days")
periodButtons = Buttons([applyPeriodBtn])
applyPeriodBtn = Button("Apply")

kpiSection = Card([kpiHeading, kpiGrid], "sunk")
kpiHeading = Heading("Key metrics", "h3")
kpiGrid = Card([mrrCard, arrCard, churnCard, npsCard], "clear", "row", "m")
mrrCard = Card([mrrLabel, mrrValue], "sunk")
mrrLabel = TextContent("Monthly recurring revenue", "small")
mrrValue = TextContent("$128,400", "large-heavy")
arrCard = Card([arrLabel, arrValue], "sunk")
arrLabel = TextContent("Annual recurring revenue", "small")
arrValue = TextContent("$1,540,800", "large-heavy")
churnCard = Card([churnLabel, churnValue], "sunk")
churnLabel = TextContent("Churn this month", "small")
churnValue = TextContent("2.4%", "large-heavy")
npsCard = Card([npsLabel, npsValue], "sunk")
npsLabel = TextContent("Current NPS", "small")
npsValue = TextContent("62", "large-heavy")

signupsSection = Card([signupsHeading, signupsChart], "sunk")
signupsHeading = Heading("New signups (past 90 days)", "h3")
signupsChart = LineChart(["Oct 1", "Oct 15", "Nov 1", "Nov 15", "Dec 1", "Dec 15", "Dec 29"], [signupsSeries], "natural", "Date", "Signups")
signupsSeries = Series("New signups", [12, 18, 24, 30, 22, 35, 28])

planSplitSection = Card([planSplitHeading, planSplitChart], "sunk")
planSplitHeading = Heading("Customers by plan", "h3")
planSplitChart = PieChart(["Starter", "Professional", "Enterprise"], [340, 210, 75], "donut")

topCustomersSection = Card([topCustomersHeading, topCustomersTable], "sunk")
topCustomersHeading = Heading("Ten largest customers", "h3")
topCustomersTable = Table([custNameCol, custSeatsCol, custSpendCol])
custNameCol = Col("Customer", ["Acme Corp", "Globex", "Initech", "Umbrella", "Stark Industries", "Wayne Enterprises", "Hooli", "Pied Piper", "Vandelay", "Massive Dynamic"])
custSeatsCol = Col("Seats", [120, 95, 80, 64, 55, 48, 40, 32, 25, 18])
custSpendCol = Col("Monthly spend", ["$12,000", "$9,500", "$8,000", "$6,400", "$5,500", "$4,800", "$4,000", "$3,200", "$2,500", "$1,800"])

atRiskSection = Card([atRiskHeading, atRiskList], "sunk")
atRiskHeading = Heading("Accounts at risk", "h3")
atRiskList = ListBlock([atRisk1, atRisk2, atRisk3])
atRisk1 = ListItem("Acme Corp", "Low usage — 3 logins in 30 days")
atRisk2 = ListItem("Globex", "Contract renewal in 14 days, no contact")
atRisk3 = ListItem("Umbrella", "Support ticket backlog — 5 open issues")

failedPaymentsSection = Card([failedPaymentsHeading, failedPaymentsTable, retryButtons], "sunk")
failedPaymentsHeading = Heading("Failed payments", "h3")
failedPaymentsTable = Table([failCustCol, failAmountCol, failDateCol])
failCustCol = Col("Customer", ["Initech", "Hooli", "Vandelay"])
failAmountCol = Col("Amount", ["$8,000", "$4,000", "$2,500"])
failDateCol = Col("Failed on", ["Dec 28", "Dec 27", "Dec 26"])
retryButtons = Buttons([retryBtn1, retryBtn2, retryBtn3])
retryBtn1 = Button("Retry Initech", null, "secondary")
retryBtn2 = Button("Retry Hooli", null, "secondary")
retryBtn3 = Button("Retry Vandelay", null, "secondary")

featureAdoptionSection = Card([featureAdoptionHeading, featureAdoptionChart], "sunk")
featureAdoptionHeading = Heading("Adoption of newest features", "h3")
featureAdoptionChart = HorizontalBarChart(["AI Insights", "API Keys", "Audit Logs"], [featureSeries])
featureSeries = Series("Adoption %", [68, 54, 41])

seatUtilizationSection = Card([seatUtilizationHeading, seatUtilizationChart], "sunk")
seatUtilizationHeading = Heading("Seat utilization across the company", "h3")
seatUtilizationChart = SingleStackedBarChart(["Used", "Available"], [620, 180])

inviteSection = Card([inviteHeading, inviteForm], "sunk")
inviteHeading = Heading("Invite another admin", "h3")
inviteForm = Form("invite-admin", inviteButtons, [inviteEmailField, inviteRoleField])
inviteEmailField = FormControl("Email address", inviteEmailInput)
inviteEmailInput = Input("invite_email", "admin@company.com", "email")
inviteRoleField = FormControl("Role", inviteRoleSelect)
inviteRoleSelect = Select("invite_role", [roleAdmin, roleViewer], "Admin")
roleAdmin = SelectItem("admin", "Admin")
roleViewer = SelectItem("viewer", "Viewer")
inviteButtons = Buttons([inviteBtn])
inviteBtn = Button("Send invite", null, "primary")