The Admin Dashboard is the control center for support agents managing the incoming ticket queue. It provides a live overview of all support tickets in the system — broken down by status — along with per-ticket actions to close resolved issues or escalate AI-handled tickets back to human review. The dashboard fetches tickets from the backend on load and whenever the filter or Refresh button is used, ensuring agents always see the current state of the queue. The page is built inDocumentation Index
Fetch the complete documentation index at: https://mintlify.com/yocxy2/2a/llms.txt
Use this file to discover all available pages before exploring further.
src/pages/AdminDashboard.tsx and uses the TicketCard component to render each individual ticket along with its action buttons.
Accessing the dashboard
Open the application
Navigate to
http://localhost in your browser (or http://localhost:3000 in development mode).Stats overview
At the top of the dashboard, four stat cards provide an at-a-glance summary of the current ticket queue. These counts are computed client-side from the full ticket list returned by the API.Total Tickets
Blue — The total number of tickets currently loaded, across all statuses. Updates whenever the ticket list is refreshed.
AI Resolved
Green — Tickets where the AI handled the response with high confidence. These are either awaiting agent confirmation or can be closed directly.
Pending Agent
Yellow — Tickets where the AI confidence score was too low to auto-resolve. These require human review before a reply is sent.
Closed
Gray — Tickets that have been fully resolved and closed by an agent. No further action is needed.
Filtering tickets
The filter bar sits below the stat cards. A dropdown lets agents narrow the ticket list to a specific status, and a Refresh button re-fetches from the API on demand.GET /api/v1/tickets?status=<value>:
| Dropdown option | Query parameter sent |
|---|---|
| All | (no status param) |
| AI Resolved | ?status=ai_resolved |
| Pending Agent | ?status=pending_agent |
| Closed | ?status=closed |
useEffect that watches the filter state. Clicking Refresh manually calls fetchTickets() without changing the current filter.
Ticket actions
Each ticket rendered byTicketCard exposes up to two action buttons, depending on its current status:
Close ticket
Available on any ticket that is not alreadyclosed. Calls ticketService.updateTicket with { status: 'closed' }, which issues a PATCH request to the backend, then re-fetches the ticket list.
Reassign to human
Available only on tickets with statusai_resolved. Moves the ticket back to pending_agent, putting it back into the human review queue. Useful when an agent inspects an AI-resolved ticket and disagrees with the AI’s handling.
Ticket data structure
Every ticket in the dashboard conforms to theTicket interface defined in src/types/ticket.ts:
confidence_score is rendered as a percentage inside TicketCard with color coding: green for scores ≥ 0.7, yellow for ≥ 0.5, and red for anything below. The AI suggested response is truncated to the first 200 characters in the card view to keep the list readable.