Reports Screens

Last updated on 2026-05-31

The Help Desk Kit includes 4 reporting screens providing executive-level analytics, agent performance tracking, customer satisfaction deep dives, and a custom report builder. All screens live under the /reports/ route within the (app) route group.

Performance Dashboard

Route: /reports

Executive-level reporting overview with key metrics, trend charts, and auto-generated insights.

Metric tiles -- six large metric tiles with trend arrows and period comparison:
- Total tickets handled
- Average first response time
- Average resolution time
- CSAT score
- SLA compliance percentage
- Customer effort score
Ticket Volume chart -- area chart (last 30 days) stacked by ticket status
Response Time Distribution -- histogram showing distribution of response times
Agent Performance chart -- ranked bar chart showing tickets resolved per agent
Channel Distribution -- donut chart breaking down tickets by channel (email/chat/phone/social/portal)
Key Trends section -- auto-generated insight cards highlighting positive trends in green and negative trends in amber

Performance Dashboard Layout

┌────────┬────────┬────────┬────────┬────────┬────────┐
│ Tickets│ Avg    │ Avg    │ CSAT   │ SLA    │ CES    │
│ Handled│ FRT    │ Resol  │ Score  │ Comp%  │        │
├────────┴────────┴────────┼────────┴────────┴────────┤
│ Ticket Volume            │ Response Time             │
│ (stacked area)           │ (histogram)               │
├──────────────────────────┼──────────────────────────┤
│ Agent Performance        │ Channel Distribution      │
│ (ranked bar)             │ (donut chart)             │
├──────────────────────────┴──────────────────────────┤
│ Key Trends (insight cards)                           │
└──────────────────────────────────────────────────────┘

Key Components

import { StatCard } from "@/components/shared/stat-card"
import { TicketVolumeChart } from "@/components/reports/ticket-volume-chart"
import { ResponseTimeChart } from "@/components/reports/response-time-chart"
import { ChannelDistributionChart } from "@/components/reports/channel-distribution-chart"
import { TrendInsightCard } from "@/components/reports/trend-insight-card"

Agent Performance

Route: /reports/agents

Individual and comparative agent analytics with detailed metrics and activity patterns.

Agent selector -- dropdown to select a specific agent or view all agents
Agent detail card -- avatar, name, role, current status with key metrics: tickets handled, average response time, average resolution time, CSAT rating, SLA compliance
Performance charts -- tickets over time (line chart), resolution time trend (line chart), satisfaction distribution (bar chart)
Comparison mode -- select 2-3 agents for side-by-side comparison with overlapping charts
All agents table -- sortable columns for each metric across the entire team
Activity heatmap -- agent activity by hour of day and day of week
Export -- export individual or team reports as PDF

Key Components

import { AgentDetailCard } from "@/components/reports/agent-detail-card"
import { AgentMetricsRow } from "@/components/reports/agent-metrics-row"
import { AgentPerformanceChart } from "@/components/reports/agent-performance-chart"
import { AgentsTable } from "@/components/reports/agents-table"

Customer Satisfaction

Route: /reports/satisfaction

CSAT and NPS deep dive with sentiment analysis and feedback management.

CSAT gauge -- large radial gauge (0-100) with trend line showing satisfaction over time
NPS score card -- Net Promoter Score with promoters/passives/detractors breakdown as a stacked bar
Survey response rate -- percentage card showing how many customers respond to satisfaction surveys
CSAT over time -- line chart showing satisfaction trends
CSAT by channel -- grouped bar chart comparing satisfaction across email, chat, phone, and social channels
CSAT by category -- horizontal bar chart showing satisfaction by ticket category
Satisfaction word cloud -- word cloud generated from open-text feedback
Feedback table -- date, customer, ticket ID, rating (stars via SatisfactionStars), comment, agent, and sentiment badge (positive/neutral/negative)
Filters -- filter by date, agent, channel, category, and rating
Period comparison -- toggle to compare current period against previous period

Key Components

import { CsatGauge } from "@/components/reports/csat-gauge"
import { NpsCard } from "@/components/reports/nps-card"
import { FeedbackTable } from "@/components/reports/feedback-table"
import { SatisfactionStars } from "@/components/shared/satisfaction-stars"

Custom Report Builder

Route: /reports/builder

Build custom reports with drag-and-drop widgets, scheduling, and export capabilities.

Metrics library -- left sidebar with available metrics grouped by category (Tickets, Agents, Customers, SLA, Satisfaction)
Widget canvas -- main drop zone for widgets including:
- Metric card
- Line chart
- Bar chart
- Pie chart
- Table
- Number display
Widget configuration -- each widget is configurable with metric selection, time range, filters, grouping, and visualization type
Report toolbar -- report name input, save, schedule (frequency + recipients), export (PDF/CSV/PNG), and share link
Saved reports panel -- right panel listing saved reports
Template gallery -- pre-built report templates (Weekly Summary, Monthly Board Report, Agent Review, SLA Compliance)

Key Components

import { MetricsLibrary } from "@/components/reports/metrics-library"
import { WidgetCanvas } from "@/components/reports/widget-canvas"
import { SavedReportsPanel } from "@/components/reports/saved-reports-panel"

Next Steps

Team Screens -- team management, scheduling, and workload
Automation Screens -- rules engine and SLA policies
Dashboard Screens -- agent dashboard and command center

Chat Screens

Team Screens