root = Card([header, kpis, openRolesSection, pipelineSection, timeToHireSection, deptSplitSection, interviewsSection, attritionSection, newRoleAction])
header = CardHeader("Hiring Overview", "Live recruiting metrics and pipeline")
kpis = Card([headcountKpi, timeToHireKpi], "sunk", "row", "m")
headcountKpi = Card([headcountLabel, headcountValue], "clear", "column", "xs")
headcountLabel = TextContent("Current headcount", "small")
headcountValue = TextContent("**342**", "large-heavy")
timeToHireKpi = Card([timeLabel, timeValue], "clear", "column", "xs")
timeLabel = TextContent("Avg time to hire", "small")
timeValue = TextContent("**23 days**", "large-heavy")
openRolesSection = Card([openRolesHeading, openRolesTable], "card", "column", "m")
openRolesHeading = Heading("Open roles", "h3")
openRolesTable = Table([roleCol, deptCol, reqCol])
roleCol = Col("Role", ["Senior Frontend Engineer", "Product Designer", "Data Analyst", "DevOps Engineer"])
deptCol = Col("Department", ["Engineering", "Design", "Data", "Platform"])
reqCol = Col("Req ID", ["REQ-1042", "REQ-1045", "REQ-1047", "REQ-1050"])
pipelineSection = Card([pipelineHeading, pipelineChart], "card", "column", "m")
pipelineHeading = Heading("Candidates by pipeline stage", "h3")
pipelineChart = BarChart(["Sourced", "Screened", "Interview", "Offer", "Hired"], [candidateSeries], "grouped", "Stage", "Candidates")
candidateSeries = Series("Candidates", [120, 78, 34, 12, 8])
timeToHireSection = Card([timeHeading, timeChart], "card", "column", "m")
timeHeading = Heading("Average time to hire by month", "h3")
timeChart = LineChart(["Jan", "Feb", "Mar", "Apr", "May", "Jun"], [timeSeries], "linear", "Month", "Days")
timeSeries = Series("Avg days", [28, 26, 25, 24, 23, 23])
deptSplitSection = Card([deptHeading, deptChart], "card", "column", "m")
deptHeading = Heading("Headcount by department", "h3")
deptChart = PieChart(["Engineering", "Design", "Data", "Platform", "Sales"], [128, 42, 36, 30, 106], "donut")
interviewsSection = Card([interviewsHeading, interviewsList], "card", "column", "m")
interviewsHeading = Heading("Interviews scheduled this week", "h3")
interviewsList = ListBlock([interview1, interview2, interview3, interview4], "number")
interview1 = ListItem("Mon 10:00 — Frontend onsite", "Sarah Kim vs. Senior Frontend Engineer")
interview2 = ListItem("Tue 14:00 — Design portfolio review", "Marcus Lee vs. Product Designer")
interview3 = ListItem("Wed 11:30 — Data technical", "Priya Nair vs. Data Analyst")
interview4 = ListItem("Thu 16:00 — DevOps panel", "Tomás Rivera vs. DevOps Engineer")
attritionSection = Card([attritionHeading, attritionChart], "card", "column", "m")
attritionHeading = Heading("Attrition over the past six months", "h3")
attritionChart = AreaChart(["Jan", "Feb", "Mar", "Apr", "May", "Jun"], [attritionSeries], "linear", "Month", "Employees")
attritionSeries = Series("Attrition", [4, 3, 5, 2, 3, 6])
newRoleAction = Card([newRoleHeading, newRoleForm], "sunk", "column", "m")
newRoleHeading = Heading("Open a new role", "h3")
newRoleForm = Form("new-role", formButtons, [roleNameField, deptField, reqCountField])
roleNameField = FormControl("Role title", roleNameInput)
roleNameInput = Input("role_title", "e.g. Backend Engineer")
deptField = FormControl("Department", deptSelect)
deptSelect = Select("department", [deptEng, deptDesign, deptData, deptPlatform], "Choose department")
deptEng = SelectItem("Engineering", "Engineering")
deptDesign = SelectItem("Design", "Design")
deptData = SelectItem("Data", "Data")
deptPlatform = SelectItem("Platform", "Platform")
reqCountField = FormControl("Openings", reqCountInput)
reqCountInput = Input("openings", "1", "number")
formButtons = Buttons([submitRoleBtn])
submitRoleBtn = Button("Create role", null, "primary")