The CRM Dashboard Kit uses Next.js App Router with route groups to separate the main CRM dashboard from the authentication flow.
Directory Overview
crm-dashboard-kit/
├── app/
│ ├── (dashboard)/ # Main CRM pages
│ │ ├── layout.tsx # AppSidebar + AppHeader
│ │ ├── page.tsx # Sales dashboard
│ │ ├── activity/page.tsx # Activity feed
│ │ ├── notifications/page.tsx # Notifications center
│ │ ├── contacts/
│ │ │ ├── page.tsx # Contact list
│ │ │ ├── [id]/page.tsx # Contact detail
│ │ │ ├── new/page.tsx # Create contact
│ │ │ └── import/page.tsx # CSV import wizard
│ │ ├── companies/
│ │ │ ├── page.tsx # Company list
│ │ │ ├── [id]/page.tsx # Company detail
│ │ │ └── new/page.tsx # Create company
│ │ ├── deals/
│ │ │ ├── page.tsx # Kanban pipeline
│ │ │ ├── [id]/page.tsx # Deal detail
│ │ │ ├── new/page.tsx # Create deal
│ │ │ ├── pipeline/page.tsx # Pipeline settings
│ │ │ └── forecasting/page.tsx # Revenue forecasting
│ │ ├── tasks/
│ │ │ ├── page.tsx # Task list
│ │ │ ├── calendar/page.tsx # Calendar view
│ │ │ ├── activity-log/page.tsx # Activity log
│ │ │ └── email-templates/page.tsx # Email templates
│ │ ├── reports/
│ │ │ ├── page.tsx # Sales overview
│ │ │ ├── pipeline/page.tsx # Pipeline analytics
│ │ │ ├── team/page.tsx # Team performance
│ │ │ └── revenue/page.tsx # Revenue breakdown
│ │ ├── email/
│ │ │ ├── page.tsx # Inbox
│ │ │ ├── compose/page.tsx # Compose email
│ │ │ └── sequences/page.tsx # Email sequences
│ │ └── settings/
│ │ ├── page.tsx # General settings
│ │ ├── team/page.tsx # Team management
│ │ ├── integrations/page.tsx # Third-party integrations
│ │ └── billing/page.tsx # Billing and plans
│ ├── (auth)/ # Authentication
│ │ ├── layout.tsx # Centered card layout
│ │ ├── login/page.tsx
│ │ ├── register/page.tsx
│ │ └── forgot-password/page.tsx
│ ├── onboarding/page.tsx # Onboarding wizard
│ ├── not-found.tsx # 404 page
│ ├── globals.css # Design tokens
│ └── layout.tsx # Root layout
├── components/
│ ├── ui/ # shadcn/ui primitives (~30 components)
│ ├── crm/ # CRM composites (15 components)
│ ├── pipeline/ # Pipeline components (3 components)
│ ├── charts/ # Chart components (5 components)
│ ├── layout/ # Layout components (4 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 CRM pages (dashboard, contacts, companies, deals, tasks, reports, email, settings) |
(auth) |
Centered card |
Login, register, forgot password |
Note: The onboarding wizard (app/onboarding/page.tsx) uses a standalone layout with its own progress stepper, outside of both route groups.
Component Organization
Primitives (components/ui/)
Approximately 30 shadcn/ui components: Accordion, AlertDialog, Avatar, Badge, Breadcrumb, Button, Calendar, Card, Chart, Checkbox, Collapsible, Command, Dialog, DropdownMenu, Input, InputGroup, Label, Popover, Progress, ScrollArea, Select, Separator, Sheet, Sidebar, Skeleton, Sonner, Switch, Table, Tabs, Textarea, Toggle, and Tooltip.
CRM Composites (components/crm/)
| Component |
Used In |
stats-card |
Dashboard, reports, forecasting |
deal-card |
Deals list, deal detail, dashboard |
contact-card |
Contacts list, contact detail, companies |
company-card |
Companies list, company detail |
activity-item |
Activity feed, contact detail, deal detail |
notification-item |
Notifications page |
stage-badge |
Deals pipeline, deal detail |
priority-badge |
Tasks, deals |
contact-avatar |
Contacts, companies, dashboard |
lead-source-badge |
Contacts, reports |
task-item |
Task list, calendar, dashboard |
email-item |
Email inbox, email sequences |
merge-field-inserter |
Email compose, email templates |
onboarding-step |
Onboarding wizard |
Pipeline Components (components/pipeline/)
| Component |
Used In |
kanban-board |
Deals pipeline page (drag-and-drop container) |
kanban-column |
Pipeline stages (Qualification, Proposal, Negotiation, etc.) |
kanban-card |
Individual deal cards within pipeline columns |
Chart Components (components/charts/)
| Component |
Used In |
revenue-chart |
Dashboard, reports sales overview, revenue breakdown |
deals-chart |
Dashboard, pipeline analytics |
conversion-funnel |
Pipeline analytics, sales overview |
team-radar |
Team performance report |
activity-donut |
Activity feed, team performance |
Layout Components (components/layout/)
| Component |
Purpose |
app-header |
Top bar with search, notifications, user menu |
app-sidebar |
Collapsible sidebar navigation with CRM sections |
command-palette |
Global search command palette (Cmd+K) |
theme-toggle |
Light/dark mode switch |
Key Files
| File |
Purpose |
data/seed.ts |
All mock data (contacts, companies, deals, tasks, emails, activities, reports, notifications, pipeline stages) |
types/index.ts |
TypeScript interfaces for all domain objects (Contact, Company, Deal, Task, Email, Activity, Report, PipelineStage, etc.) |
lib/utils.ts |
cn() class name utility |
hooks/use-mobile.ts |
Mobile viewport detection |
app/globals.css |
Design tokens (oklch colors with indigo/violet hue 270, spacing, typography) |