The Sales Dashboard Kit uses Next.js App Router with route groups to separate the main sales dashboard from the authentication flow.
Directory Overview
sales-dashboard-kit/
├── app/
│ ├── (dashboard)/ # Main sales pages
│ │ ├── layout.tsx # AppSidebar + AppHeader
│ │ ├── page.tsx # Sales dashboard (root)
│ │ ├── pipeline/page.tsx # Pipeline view
│ │ ├── deals/page.tsx # Deal list
│ │ ├── targets/page.tsx # Quota targets
│ │ ├── leaderboard/page.tsx # Rep rankings
│ │ ├── reports/page.tsx # Reports & analytics
│ │ └── settings/page.tsx # Settings
│ ├── (auth)/ # Authentication
│ │ ├── layout.tsx # Centered card layout
│ │ ├── login/page.tsx
│ │ └── register/page.tsx
│ ├── globals.css # Design tokens
│ └── layout.tsx # Root layout
├── components/
│ ├── ui/ # shadcn/ui primitives
│ ├── sales/ # Sales composites
│ ├── pipeline/ # Pipeline components
│ ├── charts/ # Chart components
│ ├── layout/ # Layout components
│ └── a11y/ # Accessibility components
├── data/
│ └── seed.ts # Mock data for all pages
├── 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 |
(dashboard) |
AppSidebar + AppHeader |
Main sales pages (dashboard, pipeline, deals, targets, leaderboard, reports, settings) |
(auth) |
Centered card |
Login, register |
Component Organization
Primitives (components/ui/)
shadcn/ui components: Avatar, Badge, Button, Card, Chart, Checkbox, Command, Dialog, DropdownMenu, Input, Label, Popover, Progress, ScrollArea, Select, Separator, Sheet, Sidebar, Skeleton, Sonner, Switch, Table, Tabs, Textarea, Toggle, and Tooltip.
Sales Composites (components/sales/)
| Component |
Used In |
stat-card |
Dashboard, reports, targets |
deal-card |
Pipeline, deals, dashboard |
deal-row |
Deals list page |
target-card |
Targets page |
quota-progress |
Targets, leaderboard, dashboard |
rep-rank-card |
Leaderboard page |
activity-item |
Dashboard activity feed |
stage-badge |
Pipeline, deals, dashboard |
priority-badge |
Deals, pipeline |
metric-card |
Reports, leaderboard |
Pipeline Components (components/pipeline/)
| Component |
Used In |
pipeline-board |
Pipeline page (drag-and-drop container) |
pipeline-column |
Pipeline stages (Prospecting, Qualification, Proposal, Negotiation, etc.) |
pipeline-card |
Individual deal cards within pipeline columns |
Chart Components (components/charts/)
| Component |
Used In |
revenue-chart |
Dashboard, reports |
conversion-funnel |
Dashboard, reports |
quota-attainment-chart |
Dashboard, targets |
win-rate-chart |
Reports, leaderboard |
forecast-chart |
Reports |
Layout Components (components/layout/)
| Component |
Purpose |
app-header |
Top bar with search, notifications, user menu |
app-sidebar |
Collapsible sidebar navigation with sales sections |
theme-toggle |
Light/dark mode switch |
Key Files
| File |
Purpose |
data/seed.ts |
All mock data (deals, targets, reps, activities, pipeline stages, reports) |
types/index.ts |
TypeScript interfaces for all domain objects (Deal, Target, Rep, Activity, PipelineStage, Report, etc.) |
lib/utils.ts |
cn() class name utility |
hooks/use-mobile.ts |
Mobile viewport detection |
app/globals.css |
Design tokens (oklch colors, spacing, typography) |