root = Card([header, cohortFilter, kpis, engagementSection, coursesSection, atRiskSection, messageSection])
header = CardHeader("Training Analytics", "Cohort performance overview")
cohortFilter = Form("cohort-filter", filterButtons, [cohortField])
cohortField = FormControl("Cohort", cohortSelect)
cohortSelect = Select("cohort", [cohortAll, cohortQ1, cohortQ2], "All cohorts")
cohortAll = SelectItem("all", "All cohorts")
cohortQ1 = SelectItem("q1", "Q1 2025")
cohortQ2 = SelectItem("q2", "Q5 2025")
filterButtons = Buttons([applyFilter])
applyFilter = Button("Apply")
kpis = Card([kpiHeading, kpiTable], "sunk")
kpiHeading = Heading("Key metrics", "h3")
kpiTable = Table([metricName, metricValue])
metricName = Col("Metric", ["Active learners (this week)", "Course completion rate", "Average quiz score"])
metricValue = Col("Value", ["1,284", "72%", "86%"])
engagementSection = Card([engagementHeading, engagementChart], "sunk")
engagementHeading = Heading("Engagement — last 8 weeks", "h3")
engagementChart = LineChart(["Week 1", "Week 2", "Week 3", "Week 4", "Week 5", "Week 6", "Week 7", "Week 8"], [engagementSeries], "natural", "Week", "Active learners")
engagementSeries = Series("Active learners", [820, 910, 980, 1040, 1100, 1180, 1230, 1284])
coursesSection = Card([coursesHeading, coursesTable], "sunk")
coursesHeading = Heading("Courses ranked by enrollment", "h3")
coursesTable = Table([courseName, courseEnroll, courseCompletion])
courseName = Col("Course", ["Python for Data Science", "SQL Essentials", "Machine Learning Basics", "Cloud Fundamentals", "Agile Practices"])
courseEnroll = Col("Enrollment", [542, 489, 376, 310, 268])
courseCompletion = Col("Completion rate", ["78%", "71%", "64%", "69%", "58%"])
atRiskSection = Card([atRiskHeading, atRiskCallout, atRiskList], "sunk")
atRiskHeading = Heading("Learners at risk of dropping out", "h3")
atRiskCallout = Callout("warning", "23 learners", "Identified by low activity and declining quiz scores over the past 14 days.")
atRiskList = ListBlock([riskItem1, riskItem2, riskItem3, riskItem4, riskItem5], "number")
riskItem1 = ListItem("A. Chen", "Python for Data Science — last active 12 days ago", null, "Message")
riskItem2 = ListItem("M. Okafor", "SQL Essentials — last active 10 days ago", null, "Message")
riskItem3 = ListItem("J. Patel", "Machine Learning Basics — quiz score dropped 18%", null, "Message")
riskItem4 = ListItem("S. Rodriguez", "Cloud Fundamentals — last active 15 days ago", null, "Message")
riskItem5 = ListItem("T. Nguyen", "Agile Practices — no activity this week", null, "Message")
messageSection = Card([messageHeading, messageForm], "sunk")
messageHeading = Heading("Message a cohort", "h3")
messageForm = Form("cohort-message", messageButtons, [messageCohortField, messageSubjectField, messageBodyField])
messageCohortField = FormControl("Cohort", messageCohortSelect)
messageCohortSelect = Select("message_cohort", [msgAll, msgQ1, msgQ2], "Select cohort")
msgAll = SelectItem("all", "All learners")
msgQ1 = SelectItem("q1", "Q1 2025")
msgQ2 = SelectItem("q2", "Q2 2025")
messageSubjectField = FormControl("Subject", messageSubjectInput)
messageSubjectInput = Input("subject", "Weekly check-in")
messageBodyField = FormControl("Message", messageBodyArea)
messageBodyArea = TextArea("message", "Write your message…", 4)
messageButtons = Buttons([sendBtn])
sendBtn = Button("Send message", null, "primary")