Ticket Screens

Last updated on 2026-05-31

The Help Desk Kit includes 9 ticket management screens covering the full lifecycle of customer support tickets -- from creation and triage through resolution and analytics. All screens live under the /tickets/ route within the (app) route group.

Ticket List

Route: /tickets

Dense data table with powerful filtering, search, and bulk operations for managing the ticket backlog.

Toolbar -- search bar, filter chips (status, priority, assignee, category, date range, SLA status), view toggle (list/compact/comfortable), sort dropdown
Table columns -- checkbox, ticket ID (monospace), subject (truncated with hover preview), requester (avatar + name), assignee (avatar or "Unassigned" badge), priority (color-coded pill via PriorityBadge: urgent=red, high=orange, medium=yellow, low=blue), status (badge via StatusBadge: new/in-progress/pending/on-hold/resolved/closed), SLA timer (countdown with progress bar via SlaTimer, turns red when breaching), category tag, created date, last updated
Quick actions -- row hover reveals assign, change priority, and close action buttons
Bulk actions -- bulk action bar slides up when checkboxes are selected, with options for assign, change status, change priority, merge, and close
Pagination -- page navigation with page size selector and result count

Ticket List Layout

┌───────────────────────────────────────────────────────┐
│ Search    [Filters...]    [View Toggle]  [Sort ▼]     │
├───┬───────┬──────────┬──────┬──────┬────┬─────┬──────┤
│ ☐ │ ID    │ Subject  │ From │ Assi │ Pri│ Sta │ SLA  │
├───┼───────┼──────────┼──────┼──────┼────┼─────┼──────┤
│ ☐ │ HD-101│ Cannot...│ J.D. │ S.M. │ 🔴 │ Open│ 2h3m │
│ ☐ │ HD-102│ Need h...│ A.S. │  --  │ 🟡 │ New │ 5h1m │
│   │ ...   │ ...      │ ...  │ ...  │ ...│ ... │ ...  │
├───┴───────┴──────────┴──────┴──────┴────┴─────┴──────┤
│ ◀ Page 1 of 12 ▶          Showing 1-10 of 115        │
└───────────────────────────────────────────────────────┘

Key Components

import { TicketTableRow } from "@/components/tickets/ticket-table-row"
import { TicketTableToolbar } from "@/components/tickets/ticket-table-toolbar"
import { TicketBulkActions } from "@/components/tickets/ticket-bulk-actions"
import { PriorityBadge } from "@/components/shared/priority-badge"
import { StatusBadge } from "@/components/shared/status-badge"
import { SlaTimer } from "@/components/shared/sla-timer"

Ticket Detail

Route: /tickets/[id]

Rich ticket view with conversation thread, ticket properties, customer context, and SLA tracking.

Ticket header -- ticket ID, subject, priority badge, status badge, SLA countdown bar
Conversation thread -- alternating message bubbles (customer messages left-aligned with their avatar, agent replies right-aligned with agent avatar), internal notes highlighted with yellow background and "Internal" badge, system events as centered gray text; supports rich text formatting and inline file attachment thumbnails
Message composer -- rich text toolbar, attachment button, canned response selector dropdown, internal note toggle, and "Send" button
Properties panel -- right sidebar (35% width) with assignee selector, status dropdown, priority selector, category, and tags
Customer info card -- right sidebar showing customer name, email, company, location, previous tickets count, and satisfaction history
Related tickets -- list of related or similar tickets
SLA details card -- response time, resolution time, breach status with visual indicators
Ticket timeline -- vertical timeline showing all ticket events chronologically

Key Components

import { TicketConversation } from "@/components/tickets/ticket-conversation"
import { TicketMessageComposer } from "@/components/tickets/ticket-message-composer"
import { TicketPropertiesPanel } from "@/components/tickets/ticket-properties-panel"

Create Ticket

Route: /tickets/new

Multi-section ticket creation form with customer lookup, rich text editing, and property assignment.

Customer section -- search existing customer with typeahead (avatar results) or create new customer via expandable inline form
Ticket Details section -- subject input, rich text description editor with file drag-and-drop zone, category dropdown, sub-category dropdown (dependent on selected category)
Properties section -- priority selector (visual cards with color and icon), assignee search with availability indicator, tags input (combobox with existing tags + create new), custom fields section rendered dynamically based on category
Options section -- toggle for "Send customer notification", CC/BCC email fields, SLA policy override dropdown
Preview panel -- right-side panel showing how the ticket will appear
Submit actions -- split button with "Create" and "Create & Assign to Me" options

Key Components

import { CreateTicketForm } from "@/components/tickets/create-ticket-form"

Kanban Board

Route: /tickets/board

Visual drag-and-drop board for managing tickets through workflow stages.

Columns -- New, In Progress, Pending, On Hold, Resolved -- each with ticket count badge and WIP limit indicator (e.g., "In Progress 8/10")
Ticket cards -- priority color stripe on left edge, ticket ID, subject (2 lines max), requester avatar + name, assignee avatar, SLA timer, category tag
Drag-and-drop -- cards are draggable between columns to update ticket status
Quick filters -- filter by assignee, priority, and category above the board
Column controls -- "Add ticket" button at bottom of each column, column collapse/expand toggle

Key Components

import { KanbanColumn } from "@/components/tickets/kanban-column"
import { KanbanCard } from "@/components/tickets/kanban-card"

Data Sources

Data	Source	Location
Kanban columns	`kanbanColumns`	`data/seed.ts`
Ticket data	`tickets`	`data/seed.ts`

Ticket Merge

Route: /tickets/merge

Workflow for merging duplicate or related tickets into a single ticket.

Split view -- left side shows "Primary Ticket" selector with full preview, right side shows "Tickets to Merge" with multi-select list
Ticket preview -- each ticket shows ID, subject, requester, conversation preview, and attachment count
Merge options -- choose which requester to keep, how to handle conversations (interleave by date or append sequentially), which properties to retain
Merged preview -- preview panel showing the result of the merge before confirming
Warning banners -- alerts displayed when merging tickets from different requesters
Merge history -- section at bottom showing previously merged tickets

Key Components

import { MergeTicketPreview } from "@/components/tickets/merge-ticket-preview"

Ticket Templates

Route: /tickets/templates

Manage reusable ticket templates for common support scenarios.

Template grid -- cards showing template name, description, category badge, usage count, last used date, created by avatar
Template preview -- click to preview in modal showing all pre-filled fields
Template actions -- use template (opens create ticket pre-filled), edit, duplicate, delete
Toolbar -- search, filter by category, sort by usage/name/date
Create Template -- button opens a form identical to create ticket but saves as a template; supports template variables highlighted in orange (e.g., {{customer_name}}, {{ticket_id}})

Key Components

import { TemplateCard } from "@/components/tickets/template-card"

Canned Responses

Route: /tickets/canned-responses

Library of pre-written response snippets organized by folder with variable support.

Folder sidebar -- left panel with folder tree (General, Billing, Technical, Onboarding, Escalation -- each expandable with sub-folders)
Response list -- main area showing canned responses with title, preview text (first 100 characters), tags, usage count, last used date; click to expand and see full response with formatting
Search -- full-text search across all responses
Response editor -- rich text editor with variable insertion toolbar ({{customer_name}}, {{ticket_id}}, {{agent_name}}, etc.), folder assignment, tags, and shortcut code (e.g., /billing-refund)
Drag reorder -- drag responses to reorder within folders

Key Components

import { CannedResponseList } from "@/components/tickets/canned-response-list"

SLA Dashboard

Route: /tickets/sla

SLA compliance overview with metric gauges, trend charts, and at-risk ticket monitoring.

Metric cards -- four large cards showing SLA compliance rate (radial gauge), average first response time, average resolution time, and breached tickets count (last 30 days)
Performance chart -- SLA performance over time (area chart, last 90 days) with compliance threshold line
At Risk table -- tickets approaching SLA breach, sorted by time remaining, showing ticket ID, subject, SLA policy name, target time, actual time, and assignee
Breached table -- tickets that have breached SLA, sorted by breach duration, showing breach amount in red text
Filter bar -- SLA policy, priority, team, and date range filters

Key Components

import { SlaMetricCard } from "@/components/tickets/sla-metric-card"
import { SlaTimer } from "@/components/shared/sla-timer"

Ticket Analytics

Route: /tickets/analytics

Deep ticket insights with trend analysis, category breakdowns, and auto-generated observations.

Trend cards -- tickets created vs last period, tickets resolved, average resolution time, first contact resolution rate, reopened tickets percentage -- each with change indicator
Chart grid -- 2x2 layout:
- Line chart: ticket volume over time by status
- Stacked bar chart: tickets by category over time
- Pie chart: ticket distribution by priority
- Heatmap: ticket creation by day of week and hour
Insights section -- auto-generated observations (e.g., "Ticket volume increased 23% on Mondays", "Billing category has longest resolution time")
Export -- CSV and PDF export buttons

Key Components

import { AnalyticsTrendCard } from "@/components/tickets/analytics-trend-card"
import { AnalyticsHeatmap } from "@/components/tickets/analytics-heatmap"

Next Steps

Customer Screens -- customer profiles, segments, and companies
Knowledge Base Screens -- article management and analytics
Automation Screens -- SLA policies and escalation paths

Dashboard Screens

Customer Screens