root = Card([header, periodForm, metricsRow, signupsSection, planSplitSection, topCustomersSection, atRiskSection, failedPaymentsSection, featureAdoptionSection, npsSection, seatUtilizationSection, inviteAdminDialog], "card", "column", "l")
header = CardHeader("Admin Overview", "SaaS platform metrics and management")
periodForm = Form("period-selector", periodButtons, [periodField])
periodField = FormControl("Reporting period", periodSelect, "Changes the time window for all metrics below")
periodSelect = Select("period", periodOptions, "Last 30 days")
periodOptions = [opt30, opt90, opt180, opt365, optYtd, optCustom]
opt30 = SelectItem("30d", "Last 30 days")
opt90 = SelectItem("90d", "Last 90 days")
opt180 = SelectItem("180d", "Last 180 days")
opt365 = SelectItem("365d", "Last 365 days")
optYtd = SelectItem("ytd", "Year to date")
optCustom = SelectItem("custom", "Custom range...")
periodButtons = Buttons([periodApplyBtn])
periodApplyBtn = Button("Apply", null, "primary")
metricsRow = Card([mrrCallout, arrCallout, churnCallout, npsCallout], "clear", "row", "m", "stretch", "start", true)
mrrCallout = Callout("success", "Monthly Recurring Revenue", "$127,450")
arrCallout = Callout("info", "Annual Recurring Revenue", "$1,529,400")
churnCallout = Callout("warning", "Churn This Month", "2.3% (14 customers)")
npsCallout = Callout("neutral", "Current NPS", "62")
signupsSection = Card([signupsHeader, signupsChart], "sunk", "column", "m")
signupsHeader = Heading("New Signups (Past 90 Days)", "h3")
signupsChart = LineChart(signupsLabels, [signupsSeries], "natural", "Week", "Signups")
signupsLabels = ["W1", "W2", "W3", "W4", "W5", "W6", "W7", "W8", "W9", "W10", "W11", "W12", "W13"]
signupsSeries = Series("Signups", [42, 38, 51, 47, 55, 62, 58, 67, 71, 69, 74, 78, 82])
planSplitSection = Card([planSplitHeader, planSplitChart], "sunk", "column", "m")
planSplitHeader = Heading("Customers by Plan", "h3")
planSplitChart = PieChart(planLabels, planValues, "donut", "circular")
planLabels = ["Starter", "Professional", "Enterprise", "Custom"]
planValues = [342, 187, 64, 12]
topCustomersSection = Card([topCustomersHeader, topCustomersTable], "sunk", "column", "m")
topCustomersHeader = Heading("Top 10 Customers by Revenue", "h3")
topCustomersTable = Table([custNameCol, custPlanCol, custSeatsCol, custMrrCol, custArrCol])
custNameCol = Col("Customer", ["Acme Corp", "Globex Inc", "Wayne Enterprises", "Stark Industries", "Umbrella Corp", "Tyrell Corp", "Weyland-Yutani", "Cyberdyne Systems", "Oscorp", "Massive Dynamic"])
custPlanCol = Col("Plan", ["Enterprise", "Enterprise", "Custom", "Enterprise", "Professional", "Enterprise", "Custom", "Enterprise", "Professional", "Custom"])
custSeatsCol = Col("Seats", [240, 180, 320, 150, 95, 210, 400, 175, 85, 280])
custMrrCol = Col("Monthly Spend", ["$24,000", "$18,000", "$32,000", "$15,000", "$9,500", "$21,000", "$40,000", "$17,500", "$8,500", "$28,000"])
custArrCol = Col("Annual Spend", ["$288,000", "$216,000", "$384,000", "$180,000", "$114,000", "$252,000", "$480,000", "$210,000", "$102,000", "$336,000"])
atRiskSection = Card([atRiskHeader, atRiskTable], "sunk", "column", "m")
atRiskHeader = Heading("Accounts at Risk", "h3")
atRiskTable = Table([riskNameCol, riskLevelCol, riskReasonCol, riskSinceCol])
riskNameCol = Col("Account", ["DataFlow.io", "CloudNine", "NextGen Labs", "Pulse Analytics", "Vertex Solutions"])
riskLevelCol = Col("Risk Level", ["High", "Medium", "High", "Low", "Medium"])
riskReasonCol = Col("Reason", ["No login in 45 days, feature adoption < 10%", "Support tickets up 300% last month", "Champion left company, no replacement", "Low seat utilization (12%)", "Payment method expiring soon"])
riskSinceCol = Col("Since", ["2024-01-15", "2024-02-03", "2024-01-28", "2024-02-10", "2024-02-18"])
failedPaymentsSection = Card([failedHeader, failedTable], "sunk", "column", "m")
failedHeader = Heading("Failed Payments (Retry Available)", "h3")
failedTable = Table([failNameCol, failAmountCol, failDateCol, failStatusCol, failActionCol])
failNameCol = Col("Customer", ["BrightPath Co", "Meridian Tech", "Apex Digital", "Horizon Apps", "Summit Systems"])
failAmountCol = Col("Amount", ["$299", "$1,200", "$499", "$899", "$2,400"])
failDateCol = Col("Date", ["2024-02-15", "2024-02-18", "2024-02-19", "2024-02-20", "2024-02-21"])
failStatusCol = Col("Status", ["Retrying", "Failed", "Pending", "Failed", "Retrying"])
failActionCol = Col("Action", ["Retry", "Retry", "Retry", "Retry", "Retry"])
featureAdoptionSection = Card([featureHeader, featureChart], "sunk", "column", "m")
featureHeader = Heading("Adoption: Three Newest Features", "h3")
featureChart = BarChart(featureLabels, [featureSeries], "grouped", "Feature", "Adoption %")
featureLabels = ["AI Insights", "Workflow Builder", "Advanced Analytics"]
featureSeries = Series("Adoption Rate", [34, 28, 41])
npsSection = Card([npsHeader, npsDetail], "sunk", "column", "m")
npsHeader = Heading("NPS Breakdown", "h3")
npsDetail = Card([npsScore, npsBreakdown], "clear", "row", "l", "center", "between")
npsScore = RadialChart(npsLabels, npsValues)
npsLabels = ["Promoters", "Passives", "Detractors"]
npsValues = [58, 24, 18]
npsBreakdown = Card([promoterStat, passiveStat, detractorStat], "clear", "column", "s")
promoterStat = TextContent("**58%** Promoters (9-10)", "default")
passiveStat = TextContent("**24%** Passives (7-8)", "default")
detractorStat = TextContent("**18%** Detractors (0-6)", "default")
seatUtilizationSection = Card([seatHeader, seatChart], "sunk", "column", "m")
seatHeader = Heading("Seat Utilization by Team", "h3")
seatChart = HorizontalBarChart(seatLabels, [seatUsedSeries, seatTotalSeries], "grouped", "Seats", "Team")
seatLabels = ["Engineering", "Sales", "Marketing", "Support", "Product", "Design", "Operations"]
seatUsedSeries = Series("Used", [42, 28, 15, 22, 18, 12, 10])
seatTotalSeries = Series("Allocated", [50, 35, 20, 25, 20, 15, 12])
inviteAdminDialog = DialogBlock("Invite Admin", "Invite New Admin", "Add another administrator to your organization. They will receive an email with setup instructions.", inviteFormContent, "primary")
inviteFormContent = Form("invite-admin", inviteButtons, [inviteEmailField, inviteRoleField, inviteMessageField])
inviteEmailField = FormControl("Email address", inviteEmailInput, "Admin invitation will be sent here")
inviteEmailInput = Input("admin_email", "admin@company.com", "email")
inviteRoleField = FormControl("Role", inviteRoleSelect, "Determines permission level")
inviteRoleSelect = Select("admin_role", inviteRoleOptions, "Select role")
inviteRoleOptions = [roleOwner, roleAdmin, roleManager, roleViewer]
roleOwner = SelectItem("owner", "Owner (full access)")
roleAdmin = SelectItem("admin", "Admin (manage users, billing, settings)")
roleManager = SelectItem("manager", "Manager (team oversight, analytics)")
roleViewer = SelectItem("viewer", "Viewer (read-only access)")
inviteMessageField = FormControl("Personal message (optional)", inviteMessageArea, "Included in the invitation email")
inviteMessageArea = TextArea("invite_message", "Welcome to the team! Let me know if you need help getting started.", 3)
inviteButtons = Buttons([inviteSendBtn, inviteCancelBtn], "row")
inviteSendBtn = Button("Send Invitation", null, "primary")
inviteCancelBtn = Button("Cancel", null, "tertiary")