root = Card([header, kpiRow, queueSection], "card", "column", "l")
header = CardHeader("Support lead — morning view", "Ticket queue overview")
kpiRow = Card([openTickets, firstResponse], "sunk", "row", "l")
openTickets = Callout("warning", "23 open tickets", "9 are high priority — up 4 since yesterday")
firstResponse = Callout("success", "1h 42m average first response", "Holding steady below the 2-hour target")
queueSection = Card([queueTitleRow, filterTabs], "clear", "column", "m")
queueTitleRow = Card([queueTitle, newTicketBtn], "clear", "row", "m", "center", "between")
queueTitle = Heading("Recent tickets", "h2")
filterTabs = Tabs([allTab, highTab])
allTab = TabItem("all", "All tickets", [allTable])
allTable = Table([allId, allSubject, allCustomer, allPriority, allAge])
allId = Col("Ticket", ["#4821", "#4820", "#4819", "#4818", "#4817"])
allSubject = Col("Subject", ["Login loop after SSO update", "Invoice export fails for large orgs", "Rate limit errors on /v2/orders", "Duplicate charge on monthly billing", "Dark mode for dashboard"])
allCustomer = Col("Customer", ["Acme Corp", "Globex", "Umbrella Inc", "Initech", "Stark Industries"])
allPriority = Col("Priority", ["High", "High", "Medium", "High", "Low"])
allAge = Col("Age", ["10m", "25m", "1h", "2h", "3h"])
highTab = TabItem("high", "High priority (9)", [highTable])
highTable = Table([highId, highSubject, highCustomer, highPriority, highAge])
highId = Col("Ticket", ["#4821", "#4820", "#4818", "#4816", "#4814", "#4813", "#4811", "#4810", "#4808"])
highSubject = Col("Subject", ["Login loop after SSO update", "Invoice export fails for large orgs", "Duplicate charge on monthly billing", "Production API outage on us-east-1", "Password reset token not expiring", "Data loss after sync update", "SSO login blocked for all admins", "Payment webhook failing after deploy", "Customers see wrong invoice totals"])
highCustomer = Col("Customer", ["Acme Corp", "Globex", "Initech", "CloudNine", "Northwind", "Hooli", "Pied Piper", "Vandelay Industries", "Massive Dynamic"])
highPriority = Col("Priority", ["High", "High", "High", "High", "High", "High", "High", "High", "High"])
highAge = Col("Age", ["10m", "25m", "2h", "4h", "6h", "8h", "1d", "1d", "2d"])
newTicketBtn = DialogBlock("New ticket", "Create a support ticket", "The ticket will be assigned to you and appear in the queue immediately.", [ticketForm], "default")
ticketForm = Form("new-ticket", ticketButtons, [subjectField, priorityField, customerField, descField])
subjectField = FormControl("Subject", subjectInput, "Short summary of the issue")
subjectInput = Input("subject", "e.g. Cannot reset password")
priorityField = FormControl("Priority", prioritySelect)
prioritySelect = Select("priority", [pHigh, pMed, pLow], "Select a priority")
pHigh = SelectItem("high", "High")
pMed = SelectItem("medium", "Medium")
pLow = SelectItem("low", "Low")
customerField = FormControl("Customer", customerInput)
customerInput = Input("customer", "Customer or account name")
descField = FormControl("Description", descArea, "Include error messages and affected users")
descArea = TextArea("description", "Describe the issue", 4)
ticketButtons = Buttons([createBtn, cancelBtn])
createBtn = Button("Create ticket", null, "primary")
cancelBtn = Button("Cancel", null, "tertiary")