CRM Dashboard

Elite CRM

Quick Start

Requirements: Node.js 18+. The template uses npm (not pnpm). No environment variables are required - all data is a typed mock layer you swap for your own API.

Download and unzip

After purchase, download the zip file from your order confirmation email and unzip it into your projects folder.

Install dependencies

npm install

Start the dev server

npm run dev

Open http://localhost:3000 - it redirects automatically to /dashboard. All routes are available immediately:

localhost:3000/login
localhost:3000/dashboard - Overview with KPI cards and activity feed
localhost:3000/dashboard/contacts
localhost:3000/dashboard/pipeline - five-column Kanban
localhost:3000/dashboard/deals
localhost:3000/dashboard/tasks
localhost:3000/dashboard/analytics
localhost:3000/dashboard/team
localhost:3000/dashboard/settings

Build for production

npm run build
npm start

No environment variables are required for the build.

Folder Structure

Next.js App Router with a shared dashboard shell layout. All mock data lives in src/lib/data/ - replace those arrays with your own API calls without touching any component.

src/
├── app/
│   ├── layout.tsx                  # Geist Sans + Geist Mono, dark-first theme bootstrap
│   ├── globals.css                 # Design tokens + Tailwind import
│   ├── login/
│   │   └── page.tsx
│   └── dashboard/
│       ├── layout.tsx              # DetailPanelProvider + DashboardShell + CommandPalette
│       ├── page.tsx                # Overview  -  KPI cards, pipeline health bar, activity feed
│       ├── contacts/page.tsx       # Searchable, filterable contact list
│       ├── pipeline/page.tsx       # 5-column Kanban with stage totals
│       ├── deals/page.tsx          # Multi-select table with bulk-action bar
│       ├── tasks/page.tsx          # Overdue / Due Today / Upcoming buckets
│       ├── analytics/page.tsx      # Recharts area, donut, funnel, bar charts
│       ├── team/page.tsx
│       └── settings/page.tsx       # 4 tabs: Profile, Workspace, Notifications, Integrations
├── components/
│   ├── DashboardShell.tsx          # Sidebar + TopBar + mobile drawer nav
│   ├── Sidebar.tsx
│   ├── TopBar.tsx
│   ├── CommandPalette.tsx          # Cmd+K fuzzy search across contacts, deals, tasks
│   ├── ThemeToggle.tsx
│   ├── StatCard.tsx
│   ├── PipelineHealthBar.tsx
│   ├── DealCard.tsx
│   ├── ContactRow.tsx
│   ├── TaskItem.tsx
│   ├── ActivityItem.tsx
│   ├── Avatar.tsx
│   ├── Badge.tsx
│   └── detail-panel/
│       ├── DetailPanelContext.tsx  # Global slide-over context + useDetailPanel hook
│       └── DetailPanel.tsx         # Sheet component renders contact/deal/task detail
└── lib/
    └── data/                       # Typed mock arrays  -  swap for your API

The dashboard/layout.tsx wraps every dashboard page with DetailPanelProvider, so any page can open the global slide-over via useDetailPanel() without prop drilling.

Customization

Accent color

The Indigo Console design system is built around a single --primary token. Change it in src/app/globals.css to reskin every button, active nav item, chart line, and focus ring at once:

:root {
  /* dark mode (default) */
  --background: #0f1117;
  --surface:    #1a1d2e;
  --primary:    #6366f1;     /* indigo  -  change to your brand color */
  --primary-hover: #4f46e5;
}

.light {
  --background: #f8fafc;
  --surface:    #ffffff;
  --primary:    #6366f1;
  --primary-hover: #4f46e5;
}

The sidebar stays dark in both modes for a premium console feel - this is intentional.

Mock data

All data is typed and lives in src/lib/data/. Each module exports a typed array: contacts, deals, tasks, activities, team. Replace the mock arrays with fetch() calls to your own API - component interfaces stay the same.

Command palette actions

The Cmd+K palette fuzzy-searches the data layer automatically. Add custom quick-action items in src/components/CommandPalette.tsx in the quickActions array near the top of the file.

Sidebar navigation

Nav items are defined in the navItems array in src/components/Sidebar.tsx. Each entry has a label, href, and icon from Lucide React.

Deployment

Deploy to Vercel (recommended)

Push to GitHub, then import at vercel.com/new. No environment variables are required. The root / redirects to /dashboard automatically.

Connect your own API

When you replace mock data with a real backend, create a .env.localfile locally and add the same keys in your hosting provider's environment settings:

# .env.local
NEXT_PUBLIC_API_URL=https://api.yourapp.com

Deploy to Railway / Render

Build command:  npm run build
Start command:  npm start
Node version:   18+

Still stuck?

Email us at support@thekitbase.app with your order number and we'll help you get set up.