The Help Desk Kit uses Next.js App Router with route groups to separate the support dashboard from the authentication flow.
Directory Overview
help-desk-kit/
├── app/
│ ├── (app)/ # Main app pages
│ │ ├── layout.tsx # AppSidebar + AppHeader
│ │ ├── dashboard/page.tsx # Agent dashboard
│ │ ├── dashboard/team/page.tsx # Team overview
│ │ ├── dashboard/activity/page.tsx # Activity feed
│ │ ├── dashboard/commands/page.tsx # Command palette
│ │ ├── dashboard/notifications/page.tsx # Notifications center
│ │ ├── tickets/page.tsx # Ticket list
│ │ ├── tickets/[id]/page.tsx # Ticket detail
│ │ ├── tickets/new/page.tsx # Create ticket
│ │ ├── tickets/board/page.tsx # Kanban board
│ │ ├── tickets/merge/page.tsx # Ticket merge
│ │ ├── tickets/templates/page.tsx # Ticket templates
│ │ ├── tickets/canned-responses/page.tsx # Canned responses
│ │ ├── tickets/sla/page.tsx # SLA dashboard
│ │ ├── tickets/analytics/page.tsx # Ticket analytics
│ │ ├── customers/page.tsx # Customer directory
│ │ ├── customers/[id]/page.tsx # Customer profile
│ │ ├── customers/[id]/interactions/page.tsx # Customer interactions
│ │ ├── customers/segments/page.tsx # Customer segments
│ │ ├── customers/companies/page.tsx # Company directory
│ │ ├── knowledge-base/page.tsx # Article browser
│ │ ├── knowledge-base/[slug]/page.tsx # Article detail
│ │ ├── knowledge-base/editor/page.tsx # Article editor
│ │ ├── knowledge-base/categories/page.tsx # Category manager
│ │ ├── knowledge-base/analytics/page.tsx # KB analytics
│ │ ├── chat/page.tsx # Chat console
│ │ ├── chat/queue/page.tsx # Chat queue
│ │ ├── chat/history/page.tsx # Chat history
│ │ ├── chat/chatbot/page.tsx # Chatbot builder
│ │ ├── reports/page.tsx # Performance dashboard
│ │ ├── reports/agents/page.tsx # Agent performance
│ │ ├── reports/satisfaction/page.tsx # Customer satisfaction
│ │ ├── reports/builder/page.tsx # Custom report builder
│ │ ├── team/page.tsx # Team directory
│ │ ├── team/roles/page.tsx # Roles & permissions
│ │ ├── team/schedule/page.tsx # Agent schedule
│ │ ├── team/workload/page.tsx # Workload distribution
│ │ ├── automations/page.tsx # Automation rules
│ │ ├── automations/sla/page.tsx # SLA policies
│ │ ├── automations/escalations/page.tsx # Escalation paths
│ │ └── settings/
│ │ ├── page.tsx # General settings
│ │ ├── channels/page.tsx # Channel settings
│ │ ├── notifications/page.tsx # Notification preferences
│ │ ├── integrations/page.tsx # Integration hub
│ │ └── audit/page.tsx # Audit log
│ ├── (auth)/ # Authentication
│ │ ├── layout.tsx # Split layout
│ │ └── login/page.tsx # Login page
│ ├── page.tsx # Landing page
│ ├── globals.css # Design tokens
│ └── layout.tsx # Root layout
├── components/
│ ├── ui/ # shadcn/ui primitives (~35 components)
│ ├── tickets/ # Ticket composites (15 components)
│ ├── dashboard/ # Dashboard composites (10 components)
│ ├── customers/ # Customer composites (8 components)
│ ├── chat/ # Chat composites (10 components)
│ ├── knowledge-base/ # KB composites (7 components)
│ ├── reports/ # Reports composites (14 components)
│ ├── settings/ # Settings composites (5 components)
│ ├── automations/ # Automation composites (3 components)
│ ├── team/ # Team composites (4 components)
│ ├── auth/ # Auth composites (1 component)
│ ├── shared/ # Shared composites (11 components)
│ ├── layout/ # Layout components (4 components)
│ └── a11y/ # Accessibility components (2 components)
├── data/
│ └── seed.ts # Mock data (tickets, customers, agents, etc.)
├── types/
│ └── index.ts # TypeScript interfaces
├── hooks/
│ ├── use-mobile.ts # Mobile viewport detection
│ ├── use-announce.ts # Screen reader announcements
│ ├── use-focus-trap.ts # Focus trap for modals
│ ├── use-keyboard-navigation.ts # Keyboard nav support
│ └── use-reduced-motion.ts # Reduced motion preference
├── lib/
│ └── utils.ts # cn() utility
└── public/
└── images/ # Static images
Route Groups
| Group |
Layout |
Purpose |
(app) |
AppSidebar + AppHeader |
Dashboard, tickets, customers, chat, KB, reports, team, automations, settings |
(auth) |
Split layout (branded panel + form) |
Login |
The landing page (app/page.tsx) uses a standalone layout outside of both route groups.
The sidebar organizes pages into 9 sections, matching the navSections array in data/seed.ts:
| Section |
Routes |
Icon Examples |
| Dashboard |
/dashboard, /dashboard/team, /dashboard/activity, /dashboard/commands, /dashboard/notifications |
LayoutDashboard, Users, Activity, Command, Bell |
| Tickets |
/tickets, /tickets/board, /tickets/new, /tickets/templates, /tickets/canned-responses, /tickets/sla, /tickets/analytics |
Ticket, Kanban, PlusCircle, FileText, MessageSquare, Shield, BarChart3 |
| Customers |
/customers, /customers/segments, /customers/companies |
Users, Tag, Building |
| Knowledge Base |
/knowledge-base, /knowledge-base/editor, /knowledge-base/categories, /knowledge-base/analytics |
BookOpen, Edit, FolderTree, TrendingUp |
| Chat |
/chat, /chat/queue, /chat/history, /chat/chatbot |
MessageCircle, ListOrdered, Clock, Bot |
| Reports |
/reports, /reports/agents, /reports/satisfaction, /reports/builder |
BarChart, UserCheck, Star, Wrench |
| Team |
/team, /team/roles, /team/schedule, /team/workload |
Users, Shield, Calendar, Scale |
| Automation |
/automations, /automations/sla, /automations/escalations |
Zap, Timer, ArrowUpRight |
| Settings |
/settings, /settings/channels, /settings/notifications, /settings/integrations, /settings/audit |
Settings, Radio, Bell, Plug, FileSearch |
Component Organization
Primitives (components/ui/)
Approximately 35 shadcn/ui components: Accordion, AlertDialog, Avatar, Badge, Breadcrumb, Button, Calendar, Card, Chart, Checkbox, Collapsible, Command, Dialog, DropdownMenu, Input, InputGroup, Label, Popover, Progress, RadioGroup, Resizable, ScrollArea, Select, Separator, Sheet, Sidebar, Skeleton, Sonner, Switch, Table, Tabs, Textarea, Toggle, ToggleGroup, and Tooltip.
Ticket Composites (components/tickets/)
| Component |
Used In |
ticket-table-row |
Ticket list page |
ticket-table-toolbar |
Ticket list page (search, filters, view toggle) |
ticket-bulk-actions |
Ticket list page (bulk operations) |
ticket-conversation |
Ticket detail page (message thread) |
ticket-message-composer |
Ticket detail page (reply composer) |
ticket-properties-panel |
Ticket detail page (right sidebar) |
create-ticket-form |
Create ticket page |
kanban-card |
Kanban board page (draggable ticket cards) |
kanban-column |
Kanban board page (status columns) |
merge-ticket-preview |
Ticket merge page |
template-card |
Ticket templates page |
canned-response-list |
Canned responses page |
sla-metric-card |
SLA dashboard page |
analytics-trend-card |
Ticket analytics page |
analytics-heatmap |
Ticket analytics page |
Dashboard Composites (components/dashboard/)
| Component |
Used In |
my-queue |
Agent dashboard (assigned tickets) |
activity-feed-card |
Agent dashboard (real-time activity) |
quick-stats-card |
Agent dashboard (charts and stats) |
recent-customers |
Agent dashboard (recent customer bubbles) |
agent-card |
Team overview page |
top-performers |
Team overview page |
activity-stream |
Activity feed page |
activity-sidebar |
Activity feed page (stats sidebar) |
command-grid |
Command palette page |
notification-list |
Notifications center page |
Customer Composites (components/customers/)
| Component |
Used In |
customer-table |
Customer directory page |
customer-profile-header |
Customer profile page |
customer-overview-tab |
Customer profile page |
customer-tickets-tab |
Customer profile page |
customer-notes-tab |
Customer profile page |
interaction-timeline |
Customer interactions page |
segment-list |
Customer segments page |
company-table |
Company directory page |
Chat Composites (components/chat/)
| Component |
Used In |
conversation-list |
Chat console (left panel) |
chat-window |
Chat console (center panel) |
customer-context |
Chat console (right panel) |
agent-availability |
Chat queue page |
queue-entry |
Chat queue page |
history-filters |
Chat history page |
history-table |
Chat history page |
flow-canvas |
Chatbot builder page |
flow-list |
Chatbot builder page |
node-editor |
Chatbot builder page |
Knowledge Base Composites (components/knowledge-base/)
| Component |
Used In |
article-browser-hero |
Article browser page (search hero) |
category-grid |
Article browser page |
article-card |
Article browser page |
article-detail-view |
Article detail page |
article-editor |
Article editor page |
category-manager |
Category manager page |
kb-analytics-dashboard |
KB analytics page |
Reports Composites (components/reports/)
| Component |
Used In |
ticket-volume-chart |
Performance dashboard |
response-time-chart |
Performance dashboard |
channel-distribution-chart |
Performance dashboard |
trend-insight-card |
Performance dashboard |
agent-detail-card |
Agent performance page |
agent-metrics-row |
Agent performance page |
agent-performance-chart |
Agent performance page |
agents-table |
Agent performance page |
csat-gauge |
Satisfaction page |
nps-card |
Satisfaction page |
feedback-table |
Satisfaction page |
metrics-library |
Custom report builder |
widget-canvas |
Custom report builder |
saved-reports-panel |
Custom report builder |
Settings Composites (components/settings/)
| Component |
Used In |
general-settings-form |
General settings page |
channel-settings |
Channel settings page |
notification-preferences |
Notification settings page |
integration-hub |
Integration hub page |
audit-log-viewer |
Audit log page |
Automation Composites (components/automations/)
| Component |
Used In |
automation-rules-list |
Automation rules page |
sla-policies-grid |
SLA policies page |
escalation-paths |
Escalation paths page |
Team Composites (components/team/)
| Component |
Used In |
team-member-grid |
Team directory page |
roles-permissions-matrix |
Roles & permissions page |
agent-schedule |
Agent schedule page |
workload-distribution |
Workload distribution page |
Shared Composites (components/shared/)
| Component |
Used In |
page-header |
Every page (title, breadcrumbs, action buttons) |
stat-card |
Dashboard, reports, SLA pages |
status-badge |
Tickets, customers, SLA, integrations |
priority-badge |
Ticket list, detail, board, queue |
sla-timer |
Ticket list, detail, queue |
channel-badge |
Tickets, chat, customer interactions |
satisfaction-stars |
Customer profiles, feedback tables |
agent-status-indicator |
Team overview, chat queue, agent cards |
data-table-toolbar |
Tables across multiple pages |
empty-state |
Empty filter results, empty lists |
loading-skeleton |
Loading states across the app |
Layout Components (components/layout/)
| Component |
Purpose |
app-header |
Top bar with search, notifications, and user menu |
app-sidebar |
Collapsible sidebar with 9 navigation sections |
skip-link |
Accessibility skip-to-content link |
theme-toggle |
Light/dark mode switch |
Accessibility Components (components/a11y/)
| Component |
Purpose |
live-region |
Screen reader announcements for dynamic content |
visually-hidden |
Visually hidden text for assistive technology |
Key Files
| File |
Purpose |
data/seed.ts |
All mock data -- tickets, customers, agents, companies, conversations, articles, automations, SLA policies, notifications, reports, schedules, audit logs |
types/index.ts |
TypeScript interfaces for all domain objects (Ticket, Customer, Agent, Company, ChatConversation, Article, AutomationRule, SLAPolicy, etc.) |
lib/utils.ts |
cn() class name utility |
hooks/use-mobile.ts |
Mobile viewport detection |
app/globals.css |
Design tokens (oklch colors, spacing, typography, animations, accessibility utilities) |