root = Card([header, headcountSection, openRolesSection, pipelineSection, timeToHireSection, deptSplitSection, interviewsSection, attritionSection, newRoleSection])
header = CardHeader("Hiring Overview", "HR Lead Dashboard")
headcountSection = Card([headcountTitle, headcountKpis], "sunk")
headcountTitle = Heading("Current Headcount", "h3")
headcountKpis = Table([headcountMetric, headcountValue])
headcountMetric = Col("Metric", ["Total Employees", "Open Roles", "Active Candidates"])
headcountValue = Col("Value", ["312", "14", "86"])
openRolesSection = Card([openRolesTitle, openRolesTable], "sunk")
openRolesTitle = Heading("Open Roles", "h3")
openRolesTable = Table([roleCol, deptCol])
roleCol = Col("Role", ["Senior Frontend Engineer", "Product Manager", "Data Analyst", "DevOps Engineer", "UX Designer"])
deptCol = Col("Department", ["Engineering", "Product", "Analytics", "Infrastructure", "Design"])
pipelineSection = Card([pipelineTitle, pipelineChart], "sunk")
pipelineTitle = Heading("Candidates by Pipeline Stage", "h3")
pipelineChart = PieChart(["Applied", "Screened", "Interviewed", "Offer", "Hired"], [32, 21, 18, 9, 6], "donut")
timeToHireSection = Card([timeToHireTitle, timeToHireValue], "sunk")
timeToHireTitle = Heading("Average Time to Hire", "h3")
timeToHireValue = TextContent("**28 days**", "large")
deptSplitSection = Card([deptSplitTitle, deptSplitChart], "sunk")
deptSplitTitle = Heading("Headcount by Department", "h3")
deptSplitChart = HorizontalBarChart(["Engineering", "Sales", "Product", "Marketing", "Support", "Finance"], [deptSeries], "grouped", "Employees", "Department")
deptSeries = Series("Employees", [98, 64, 52, 41, 37, 20])
interviewsSection = Card([interviewsTitle, interviewsTable], "sunk")
interviewsTitle = Heading("Interviews Scheduled This Week", "h3")
interviewsTable = Table([candidateCol, roleColInterviews, timeCol])
candidateCol = Col("Candidate", ["Alice Chen", "Marcus Lee", "Priya Patel", "Tom Alvarez", "Sara Kim"])
roleColInterviews = Col("Role", ["Senior Frontend Engineer", "Product Manager", "Data Analyst", "DevOps Engineer", "UX Designer"])
timeCol = Col("Time", ["Mon 10:00", "Tue 14:00", "Wed 09:30", "Thu 15:00", "Fri 11:00"])
attritionSection = Card([attritionTitle, attritionChart], "sunk")
attritionTitle = Heading("Attrition Over Past 6 Months", "h3")
attritionChart = LineChart(["Jan", "Feb", "Mar", "Apr", "May", "Jun"], [attritionSeries], "linear", "Month", "Employees Left")
attritionSeries = Series("Attrition", [4, 6, 3, 8, 5, 7])
newRoleSection = Card([newRoleTitle, newRoleForm], "sunk")
newRoleTitle = Heading("Open a New Role", "h3")
newRoleForm = Form("new-role", newRoleButtons, [roleNameField, roleDeptField])
roleNameField = FormControl("Role Title", roleNameInput)
roleNameInput = Input("role_title", "e.g. Senior Backend Engineer")
roleDeptField = FormControl("Department", roleDeptSelect)
roleDeptSelect = Select("role_department", [deptEng, deptSales, deptProd, deptMkt, deptSupport, deptFin], "Choose department")
deptEng = SelectItem("Engineering", "Engineering")
deptSales = SelectItem("Sales", "Sales")
deptProd = SelectItem("Product", "Product")
deptMkt = SelectItem("Marketing", "Marketing")
deptSupport = SelectItem("Support", "Support")
deptFin = SelectItem("Finance", "Finance")
newRoleButtons = Buttons([submitRoleBtn])
submitRoleBtn = Button("Create Role", null, "primary")