root = Card([header, cohortCard, kpisCard, chartsCard, atRiskCard, messageCard], "card", "column", "l")
header = CardHeader("Training Platform Analytics", "Cohort overview · Updated just now")
cohortCard = Card([cohortHeading, cohortForm], "sunk", "column", "m")
cohortHeading = CardHeader("Narrow to one cohort", "Filter every metric below to a single cohort")
cohortForm = Form("cohort-filter", filterButtons, [cohortField])
cohortField = FormControl("Cohort", cohortSelect, "Select a cohort to filter the dashboard")
cohortSelect = Select("cohort", [cohortAll, cohortDS, cohortPD, cohortBE], "Select a cohort", null, "all")
cohortAll = SelectItem("all", "All cohorts")
cohortDS = SelectItem("data-science-spring-2025", "Data Science · Spring 2025")
cohortPD = SelectItem("product-design-may-2025", "Product Design · May 2025")
cohortBE = SelectItem("backend-q2-2025", "Backend Engineering · Q2 2025")
filterButtons = Buttons([applyBtn])
applyBtn = Button("Apply filter", null, "primary")
kpisCard = Card([kpiHeading, kpiTable], "sunk", "column", "m")
kpiHeading = Heading("Key metrics", "h2")
kpiTable = Table([kpiMetric, kpiValue])
kpiMetric = Col("Metric", ["Active learners (this week)", "Course completion rate", "Average quiz score"])
kpiValue = Col("Value", ["1,284", "76%", "88%"])
chartsCard = Card([chartsHeading, enrollmentChart, engagementChart], "sunk", "column", "l")
chartsHeading = Heading("Enrollment and engagement", "h2")
enrollmentChart = HorizontalBarChart(["Data Science", "Product Design", "Backend Engineering", "Frontend Fundamentals", "UX Research"], [enrollSeries], "grouped", "Enrollments", "Course")
enrollSeries = Series("Enrollments", [842, 715, 639, 521, 408])
engagementChart = AreaChart(["8 weeks ago", "7 weeks ago", "6 weeks ago", "5 weeks ago", "4 weeks ago", "3 weeks ago", "2 weeks ago", "This week"], [engagementSeries], "natural", "Week", "Active learners")
engagementSeries = Series("Engagement", [890, 940, 1020, 980, 1100, 1180, 1240, 1284])
atRiskCard = Card([atRiskHeading, atRiskList], "sunk", "column", "m")
atRiskHeading = Heading("Learners at risk of dropping out", "h2")
atRiskList = ListBlock([risk1, risk2, risk3, risk4], "number")
risk1 = ListItem("Maria Chen", "No activity for 14 days · Quiz score 52%")
risk2 = ListItem("James Okafor", "Fell behind in Module 4 · Last login 10 days ago")
risk3 = ListItem("Priya Patel", "Completion 31% · Missed 3 deadlines")
risk4 = ListItem("Lukas Meyer", "Engagement dropped 40% this month")
messageCard = Card([messageHeading, messageForm], "sunk", "column", "m")
messageHeading = CardHeader("Message a cohort", "Send an update or nudge to the learners in this cohort")
messageForm = Form("cohort-message", messageButtons, [recipientField, subjectField, bodyField])
recipientField = FormControl("Send to", recipientSelect, "Defaults to the cohort selected above")
recipientSelect = Select("recipient_cohort", [cohortAll, cohortDS, cohortPD, cohortBE], "Select a cohort", null, "all")
subjectField = FormControl("Subject", subjectInput)
subjectInput = Input("subject", "Reminder: Week 4 checkpoint is due Friday", "text")
bodyField = FormControl("Message", bodyArea, "Use {first_name} to personalize the message")
bodyArea = TextArea("message", "Hi {first_name}, you are doing great. Keep up the momentum!", 6)
messageButtons = Buttons([sendBtn, cancelBtn])
sendBtn = Button("Send message", null, "primary")
cancelBtn = Button("Discard", null, "tertiary")