root = Card([header, kpiRow, openRolesSection, pipelineSection, chartsRow, interviewsSection])
header = CardHeader("Hiring Overview", "Acme Inc. · Q3 2025 · Updated 5 min ago")
kpiRow = Card([headcountCard, timeToHireCard, openRolesKpiCard, interviewsKpiCard], "clear", "row", "m", "stretch")
headcountCard = Card([headcountValue, headcountLabel], "sunk", "column", "xs")
headcountValue = Heading("248", "h2")
headcountLabel = TextContent("Current headcount", "small")
timeToHireCard = Card([timeToHireValue, timeToHireLabel], "sunk", "column", "xs")
timeToHireValue = Heading("32 days", "h2")
timeToHireLabel = TextContent("Average time to hire", "small")
openRolesKpiCard = Card([openRolesKpiValue, openRolesKpiLabel], "sunk", "column", "xs")
openRolesKpiValue = Heading("5", "h2")
openRolesKpiLabel = TextContent("Open roles", "small")
interviewsKpiCard = Card([interviewsKpiValue, interviewsKpiLabel], "sunk", "column", "xs")
interviewsKpiValue = Heading("12", "h2")
interviewsKpiLabel = TextContent("Interviews this week", "small")
openRolesSection = Card([openRolesHeader, openRolesTable], "sunk", "column", "m")
openRolesHeader = Card([openRolesHeading, openRoleBtn], "clear", "row", "m", "center", "between")
openRolesHeading = Heading("Open roles", "h2")
openRoleBtn = DialogBlock("Open new role", "Create a new role", "The role will be posted and appear in open roles.", [roleForm], "default")
openRolesTable = Table([roleCol, deptCol, reqCol])
roleCol = Col("Role", ["Frontend Engineer", "Product Designer", "Data Analyst", "DevOps Engineer", "QA Engineer"])
deptCol = Col("Department", ["Engineering", "Design", "Data", "Infrastructure", "Engineering"])
reqCol = Col("Req. ID", ["REQ-1024", "REQ-1031", "REQ-1042", "REQ-1050", "REQ-1055"])
pipelineSection = Card([pipelineHeading, pipelineTable], "sunk", "column", "m")
pipelineHeading = Heading("Candidate pipeline", "h2")
pipelineTable = Table([stageCol, candidatesCol])
stageCol = Col("Stage", ["Applied", "Screening", "Interview", "Offer", "Hired"])
candidatesCol = Col("Candidates", [142, 68, 27, 9, 5])
chartsRow = Card([deptCard, attritionCard], "clear", "row", "l", "stretch")
deptCard = Card([deptSplitHeading, deptPie], "sunk", "column", "m")
deptSplitHeading = Heading("Headcount by department", "h2")
deptPie = PieChart(["Engineering", "Design", "Data", "Marketing", "Sales", "Operations"], [86, 32, 24, 28, 41, 37], "donut", "circular")
attritionCard = Card([attritionHeading, attritionChart], "sunk", "column", "m")
attritionHeading = Heading("Attrition — last 6 months", "h2")
attritionChart = AreaChart(["Feb", "Mar", "Apr", "May", "Jun", "Jul"], [leaversSeries], "natural", "Month", "Leavers")
leaversSeries = Series("Leavers", [4, 3, 5, 6, 4, 7])
interviewsSection = Card([interviewsHeading, interviewsList], "sunk", "column", "m")
interviewsHeading = Heading("Interviews this week", "h2")
interviewsList = ListBlock([interview1, interview2, interview3, interview4, interview5], "image")
interview1 = ListItem("Frontend Engineer — Round 3", "Mon 9:00 · Alice Nguyen · Zoom", ["https://i.pravatar.cc/48?img=47"])
interview2 = ListItem("Product Designer — Round 2", "Mon 14:30 · Marco Costa · Onsite", ["https://i.pravatar.cc/48?img=12"])
interview3 = ListItem("Data Analyst — Round 1", "Tue 10:00 · Riya Patel · Zoom", ["https://i.pravatar.cc/48?img=32"])
interview4 = ListItem("DevOps Engineer — Round 3", "Wed 11:00 · Sam Okafor · Google Meet", ["https://i.pravatar.cc/48?img=15"])
interview5 = ListItem("QA Engineer — Round 1", "Thu 15:00 · Takumi Yamada · Zoom", ["https://i.pravatar.cc/48?img=68"])
roleForm = Form("new-role", roleFormButtons, [roleTitleField, deptField, managerField, locField])
roleFormButtons = Buttons([submitRoleBtn, cancelRoleBtn])
submitRoleBtn = Button("Create role", null, "primary")
cancelRoleBtn = Button("Cancel", null, "tertiary")
roleTitleField = FormControl("Role title", roleTitleInput)
roleTitleInput = Input("title", "e.g. Backend Engineer")
deptField = FormControl("Department", deptSelect)
deptSelect = Select("department", [deptEng, deptDesign, deptData, deptSales], "Select a department")
deptEng = SelectItem("Engineering", "Engineering")
deptDesign = SelectItem("Design", "Design")
deptData = SelectItem("Data", "Data")
deptSales = SelectItem("Sales", "Sales")
managerField = FormControl("Hiring manager", managerInput)
managerInput = Input("manager", "e.g. Dana Kim")
locField = FormControl("Location", locRadio)
locRadio = RadioGroup("location", [locRemote, locHybrid, locOnsite], "Remote")
locRemote = RadioItem("Remote", "Fully remote", "remote")
locHybrid = RadioItem("Hybrid", "Office + remote mix", "hybrid")
locOnsite = RadioItem("Onsite", "In the office", "onsite")