Dashboard Screens

Last updated on 2026-05-31

The Help Desk Kit includes 5 dashboard screens that serve as the nerve center for support operations. All screens share the (app) route group layout with AppSidebar and AppHeader, and use seed data from data/seed.ts.

Agent Dashboard

Route: /dashboard

The main landing page provides agents with a real-time snapshot of their support queue, activity stream, and key performance indicators.

KPI stat cards -- six cards showing open tickets, average response time, CSAT score, SLA compliance percentage, unassigned tickets, and active chats, each with sparkline mini-charts and trend indicators
My Queue panel -- left column showing assigned tickets sorted by priority with color-coded urgency dots and SLA countdown timers via the SlaTimer component
Activity Feed -- center column with a real-time stream of ticket updates, customer messages, and team mentions with relative timestamps and avatars
Quick Stats -- right column with donut chart for ticket categories, bar chart for hourly volume, and team availability indicators with green/yellow/red status dots
Recent Customers strip -- bottom horizontal scrolling section with customer avatar bubbles showing last interaction time

Dashboard Layout

┌────────┬────────┬────────┬────────┬────────┬────────┐
│ Open   │ Avg    │ CSAT   │ SLA    │ Unas-  │ Active │
│ Tkts   │ Resp   │ Score  │ Comp%  │ signed │ Chats  │
├────────┴──┬─────┴────────┼────────┴──┬─────┴────────┤
│ My Queue  │ Activity     │ Quick Stats               │
│ (tickets) │ Feed         │ (charts)                  │
│           │ (timeline)   │                           │
├───────────┴──────────────┴───────────────────────────┤
│ Recent Customers (horizontal scroll)                  │
└───────────────────────────────────────────────────────┘

Key Components

import { PageHeader } from "@/components/shared/page-header"
import { StatCard } from "@/components/shared/stat-card"
import { MyQueue } from "@/components/dashboard/my-queue"
import { ActivityFeedCard } from "@/components/dashboard/activity-feed-card"
import { QuickStatsCard } from "@/components/dashboard/quick-stats-card"
import { RecentCustomers } from "@/components/dashboard/recent-customers"

Data Sources

Data	Source	Location
KPI metrics	`dashboardStats`	`data/seed.ts`
My queue tickets	`tickets` (filtered by assignee)	`data/seed.ts`
Activity feed	`activityItems`	`data/seed.ts`
Quick stats charts	`ticketsByCategory`, `hourlyVolume`	`data/seed.ts`
Recent customers	`customers`	`data/seed.ts`

Team Overview

Route: /dashboard/team

Bird's-eye view of the entire support operation with agent status cards, performance leaderboards, and shift scheduling.

Team-wide metrics bar -- top row showing total agents online, tickets in progress, average handle time, and queue depth
Agent card grid -- card for each team member showing avatar, name, role badge, current status (available/busy/away/offline with AgentStatusIndicator), active ticket count, CSAT rating as a small radial progress, and a mini activity heatmap for the week
Team announcements panel -- right sidebar with pinned team announcements and messages
Shift schedule -- today's shift schedule with timeline bars showing morning, afternoon, night, and on-call coverage
Top Performers leaderboard -- ranked list with gold, silver, and bronze badges showing tickets resolved, CSAT rating, and response time for top agents

Key Components

import { AgentCard } from "@/components/dashboard/agent-card"
import { TopPerformers } from "@/components/dashboard/top-performers"
import { AgentStatusIndicator } from "@/components/shared/agent-status-indicator"

Activity Feed

Route: /dashboard/activity

Full-page real-time activity stream with filtering, time grouping, and activity analytics.

Filter tabs -- filterable by: all activity, my mentions, ticket updates, customer messages, system events
Activity stream -- chronological entries showing timestamp, actor avatar and name, action description with linked ticket/customer references, and contextual preview (message snippet, status change badge)
Time grouping -- entries grouped by Today, Yesterday, This Week with section headers
Activity sidebar -- right panel with activity volume chart (last 24 hours), most active tickets list, and trending tags
Infinite scroll -- "Jump to top" floating button for quick navigation

Key Components

import { ActivityStream } from "@/components/dashboard/activity-stream"
import { ActivitySidebar } from "@/components/dashboard/activity-sidebar"

Command Palette

Route: /dashboard/commands

Power-user quick actions page with categorized command cards and keyboard shortcut references.

Search bar -- top search input that filters all available actions in real time
Categorized action cards -- organized into groups:
- "Ticket Actions" (create, assign, merge, close)
- "Customer Actions" (lookup, create, view history)
- "Team Actions" (message, assign shift, set status)
- "Knowledge Base" (create article, search)
- "Reports" (generate, schedule, export)
Keyboard shortcut badges -- each card shows its keyboard shortcut, description, and recent usage count
Recent Actions -- history of recently used commands at the bottom
Pinned Actions -- customizable grid of frequently used actions

Key Components

import { CommandGrid } from "@/components/dashboard/command-grid"

Notifications Center

Route: /dashboard/notifications

Centralized notification management with categorization, bulk actions, and preference controls.

Tab navigation -- tabs for All, Mentions, Assignments, SLA Alerts, and System notifications with badge counts on each tab
Notification cards -- each card shows type-specific colored icon, title, description, timestamp, read/unread dot indicator, and action buttons (view, dismiss, snooze)
Bulk actions toolbar -- mark all read, clear all, filter by date range
Notification preferences panel -- right sidebar showing preference summary with toggles for each channel (in-app, email, push, Slack)

Key Components

import { NotificationList } from "@/components/dashboard/notification-list"

Data Sources

Data	Source	Location
Notifications	`notifications`	`data/seed.ts`
Notification preferences	`notificationPreferences`	`data/seed.ts`

Next Steps

Ticket Screens -- ticket management, kanban board, and SLA tracking
Customer Screens -- customer profiles and segmentation
Chat Screens -- live chat console and chatbot builder

Project Structure

Ticket Screens