root = Card([header, statsRow, slaCallout, ticketsHeader, ticketsTabs], "card", "column", "l")
header = CardHeader("Support lead", "Morning overview")
statsRow = Card([openStat, responseStat], "sunk", "row", "l", "stretch")
openStat = Card([openCount, openCaption, openDelta], "clear", "column", "xs")
openCount = TextContent("23", "large-heavy")
openCaption = TextContent("Open tickets", "small")
openDelta = Tag("+4 since yesterday", null, "sm", "warning")
responseStat = Card([responseCount, responseCaption, responseDelta], "clear", "column", "xs")
responseCount = TextContent("1h 24m", "large-heavy")
responseCaption = TextContent("Avg first response", "small")
responseDelta = Tag("12 min faster than last week", null, "sm", "success")
slaCallout = Callout("warning", "2 tickets near SLA breach", "High-priority tickets are approaching the 4-hour first-response window.")
ticketsHeader = Card([recentHeading, newTicket], "clear", "row", null, "center", "between")
recentHeading = Heading("Recent tickets", "h3")
newTicket = DialogBlock("New ticket", "Open a new ticket", "Escalate a customer issue to the queue.", [newTicketForm], "default")
newTicketForm = Form("new-ticket", formButtons, [subjectField, priorityField, descriptionField])
subjectField = FormControl("Subject", subjectInput)
subjectInput = Input("subject", "Brief summary of the issue", "text")
priorityField = FormControl("Priority", prioritySelect)
prioritySelect = Select("priority", [prioHigh, prioMedium, prioLow], "Select priority")
prioHigh = SelectItem("high", "High")
prioMedium = SelectItem("medium", "Medium")
prioLow = SelectItem("low", "Low")
descriptionField = FormControl("Description", descriptionArea)
descriptionArea = TextArea("description", "Share any relevant context or steps to reproduce.", 4)
formButtons = Buttons([createBtn, cancelBtn])
createBtn = Button("Create ticket", null, "primary")
cancelBtn = Button("Cancel", null, "tertiary")
ticketsTabs = Tabs([allTab, highTab])
allTab = TabItem("all", "All tickets", [recentTable])
recentTable = Table([recentIdCol, recentSubjectCol, recentPriorityCol, recentStatusCol])
recentIdCol = Col("Ticket", ["#2841", "#2840", "#2839", "#2838", "#2837"])
recentSubjectCol = Col("Subject", ["Checkout fails on Safari", "Invoice PDF not generating", "Login loop after password reset", "API rate limit too aggressive", "Dashboard chart not loading"])
recentPriorityCol = Col("Priority", ["High", "Medium", "High", "Low", "Medium"])
recentStatusCol = Col("Status", ["Open", "Open", "Open", "Open", "In progress"])
highTab = TabItem("high", "High priority", [highTable])
highTable = Table([highIdCol, highSubjectCol, highPriorityCol, highStatusCol])
highIdCol = Col("Ticket", ["#2841", "#2839", "#2834"])
highSubjectCol = Col("Subject", ["Checkout fails on Safari", "Login loop after password reset", "SSO token expiry on mobile"])
highPriorityCol = Col("Priority", ["High", "High", "High"])
highStatusCol = Col("Status", ["Open", "Open", "In progress"])