A help desk overview with segmented KPI meters, ticket volume by hour against last week and a forecast, an SLA gauge with a target marker, a queue with priority pills, assignees and SLA countdowns, a CSAT trend and a live activity feed.
308 new so far today, 159 forecast by midnight
Tickets answered within policy, 7 days
Oldest first, sorted by SLA
1,206 ratings
Live agent and customer activity
Ines Duarte is replying to #4821
Ines Duarte merged #4805 into #4821
Amina Yusuf is replying to #4812
Theo Laurent took #4819
Ravi Menon escalated #4798
Clara Moss is viewing #4816
npx shadcn@latest add https://hyperblur.dev/r/dashboard-support.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/dashboard-support.tsx.
import { DashboardSupport } from "@/components/hyperblur/dashboard-support"
<DashboardSupport defaultView="all" onTicketOpen={(ticket) => console.log(ticket.id)} />| Prop | Type | Default | Description |
|---|---|---|---|
| accent | string | "#8b7cff" | Accent color for the hourly bars, the active view, ticket links in the feed and focus rings. |
| brand | string | "Helpdeck" | Product name shown at the top of the sidebar. |
| user | string | "Lucía Fernández" | Signed-in agent. Drives the Mine view and the availability card. |
| tickets | SupportTicket[] | 8 sample tickets | Queue items with id, subject, customer, priority, assignees, waiting time, channel and minutes left on the SLA (negative when breached). |
| view | "all" | "mine" | "urgent" | "unassigned" | Controlled queue view. Pair with onViewChange. | |
| defaultView | "all" | "mine" | "urgent" | "unassigned" | "all" | Initial queue view when uncontrolled. |
| onViewChange | (view: SupportView) => void | Called when a view is picked in the sidebar or the queue tabs. | |
| onTicketOpen | (ticket: SupportTicket) => void | Called when a queue row is clicked or activated with the keyboard. |