Customer Screens
Last updated on 2026-05-31
The Help Desk Kit includes 5 customer management screens providing a 360-degree view of your customer base -- from directory browsing and profile management to company accounts and interaction timelines. All screens live under the /customers/ route within the (app) route group.
Customer Directory
Route: /customers
Searchable customer list with filtering, view modes, and bulk operations.
- Search bar -- advanced search with filters for company, location, segment, satisfaction score range, and last contact date
- View toggle -- switch between table view and card view
- Table view -- columns for avatar, name, email, company, total tickets, open tickets, CSAT average (star rating via
SatisfactionStars), last interaction date, and segment badge - Card view -- larger cards with customer avatar, name, company, key metrics, and recent ticket subjects
- Alphabet sidebar -- quick navigation by first letter of customer name
- Bulk actions -- export, tag, and assign segment to selected customers
- Pagination -- page controls with total customer count
Key Components
import { CustomerTable } from "@/components/customers/customer-table"
import { SatisfactionStars } from "@/components/shared/satisfaction-stars"
import { StatusBadge } from "@/components/shared/status-badge"
Data Sources
| Data | Source | Location |
|---|---|---|
| Customers | customers |
data/seed.ts |
| Companies | companies |
data/seed.ts |
| Segments | customerSegments |
data/seed.ts |
Customer Profile
Route: /customers/[id]
360-degree customer view with profile header, tabbed content, and activity timeline.
- Profile banner -- large customer avatar, name, email, phone, company name and logo, location, timezone, customer since date, lifetime ticket count, and CSAT average
- Tab bar -- Overview, Tickets, Interactions, Notes, Files tabs
Overview Tab
- Key Metrics card -- total tickets, open tickets, average response satisfaction, preferred contact channel
- Custom Fields card -- editable inline custom fields
- Tags section -- customer tags with add/remove controls
- Recent Tickets list -- last 5 tickets with status badges
- Satisfaction Trend chart -- small line chart showing CSAT over the last 6 months
- Contact Preferences card -- preferred channel and communication settings
Tickets Tab
- Ticket history table -- all tickets for this customer with ID, subject, status, priority, assignee, and dates
Notes Tab
- Notes timeline -- internal notes added by agents with timestamps and author info
- Add note composer -- rich text input for new notes
Key Components
import { CustomerProfileHeader } from "@/components/customers/customer-profile-header"
import { CustomerOverviewTab } from "@/components/customers/customer-overview-tab"
import { CustomerTicketsTab } from "@/components/customers/customer-tickets-tab"
import { CustomerNotesTab } from "@/components/customers/customer-notes-tab"
Customer Segments
Route: /customers/segments
Segment management with rules-based customer grouping and analytics.
- Segment list panel -- left panel showing segments with name, customer count, color swatch, and created date
- Segment details -- main area showing:
- Segment definition with rules builder (AND/OR conditions, e.g., "Tickets > 5 AND Company size > 100 AND CSAT < 3")
- Customer preview list matching the segment rules
- Segment analytics (average tickets per customer, average CSAT, common categories)
- Segment actions -- edit rules, export customers, create email campaign
- Create Segment -- button opens rules builder with drag-and-drop condition blocks
Key Components
import { SegmentList } from "@/components/customers/segment-list"
Data Sources
| Data | Source | Location |
|---|---|---|
| Segments | customerSegments |
data/seed.ts |
| Segment rules | segmentRules |
data/seed.ts |
Company Directory
Route: /customers/companies
B2B company management with SLA tier tracking and account overview.
- Company table -- columns for company logo/icon, company name, industry badge, total contacts, total tickets, average CSAT, SLA tier badge (Enterprise/Pro/Standard), account manager avatar, contract status (active/expiring/expired with color), and MRR value
- Expandable rows -- expand to show contacts list for each company
- Company detail -- click company name to view company info card, contacts grid, ticket history, SLA performance, account notes, and contract timeline
- Filters -- filter by industry, SLA tier, contract status, and account manager
Key Components
import { CompanyTable } from "@/components/customers/company-table"
import { StatusBadge } from "@/components/shared/status-badge"
Customer Interactions
Route: /customers/[id]/interactions
Full interaction timeline for a specific customer with type filtering and statistics.
- Visual timeline -- chronological timeline with type-specific icons: ticket (document icon), email (envelope), chat (message bubble), phone (phone icon), note (pencil)
- Entry details -- each entry shows timestamp, type badge, subject/summary, assigned agent, and outcome (resolved/pending/escalated)
- Filters -- filter by interaction type, date range, and agent
- Interaction statistics -- right panel showing total interactions, breakdown by type, average resolution time for this customer, and satisfaction per interaction type as a bar chart
- Export -- export interaction history as PDF
Key Components
import { InteractionTimeline } from "@/components/customers/interaction-timeline"
import { ChannelBadge } from "@/components/shared/channel-badge"
Next Steps
- Knowledge Base Screens -- article browser, editor, and analytics
- Chat Screens -- live chat console and chatbot builder
- Ticket Screens -- ticket management and workflows