DemoBuy

Dashboard & Pipeline

Last updated on 2026-04-05

The dashboard and pipeline are the two primary screens of the Sales Dashboard Kit. The dashboard provides a high-level snapshot of sales performance, while the pipeline offers a visual interface for managing deals across stages. Both screens share the (dashboard) route group layout with AppSidebar and AppHeader.

Sales Dashboard

Route: /

The main sales dashboard is the default landing page. It provides a comprehensive snapshot of sales performance with real-time KPI cards, trend charts, quota tracking, and an activity feed.

  • Revenue metric cards -- Total Revenue, Deals Won, Average Deal Size, and Win Rate displayed as StatCard components with trend indicators (up/down percentage vs. previous period)
  • Conversion funnel -- visual funnel chart showing lead-to-close conversion rates across pipeline stages via Recharts, from Prospecting through Closed Won
  • Quota attainment gauge -- circular or bar-based progress indicator showing the current user's (or team's) progress toward their quota target with color-coded thresholds
  • Activity feed -- chronological list of recent sales activities (calls, emails, meetings, deal updates) with type-specific icons, descriptions, and timestamps
  • Revenue trend chart -- area chart showing monthly revenue over time via Recharts AreaChart
  • Top deals table -- data table showing the highest-value open deals with company name, deal value, stage badge, owner, and expected close date
import { StatCard } from "@/components/sales/stat-card"
import { RevenueChart } from "@/components/charts/revenue-chart"
import { ConversionFunnel } from "@/components/charts/conversion-funnel"
import { QuotaAttainmentChart } from "@/components/charts/quota-attainment-chart"
import { ActivityItem } from "@/components/sales/activity-item"

Dashboard Layout

┌──────────┬──────────┬──────────┬──────────┐
│ Total    │ Deals    │ Avg Deal │ Win      │
│ Revenue  │ Won      │ Size     │ Rate     │
├──────────┴──────────┼──────────┴──────────┤
│ Revenue Trend       │ Conversion Funnel   │
│ (area chart)        │ (funnel chart)      │
├─────────────────────┼─────────────────────┤
│ Quota Attainment    │ Activity Feed       │
│ (progress gauge)    │ (timeline)          │
├─────────────────────┴─────────────────────┤
│ Top Deals (table)                         │
└───────────────────────────────────────────┘

Data Sources

Data Source Location
KPI metrics dashboardStats data/seed.ts
Revenue trend revenueData data/seed.ts
Conversion rates conversionData data/seed.ts
Quota progress quotaData data/seed.ts
Activity feed activities data/seed.ts
Top deals deals (sorted by value) data/seed.ts

Pipeline

Route: /pipeline

The pipeline page provides a visual, drag-and-drop interface for managing deals across sales stages. Deal cards are organized into columns representing each stage in the sales process.

  • Stage columns -- vertical columns for each pipeline stage (e.g., Prospecting, Qualification, Proposal, Negotiation, Closed Won, Closed Lost), each with a distinct color indicator and header showing deal count and total value
  • Deal cards -- each card displays company name, deal value, owner avatar, expected close date, and priority badge (hot/warm/cold)
  • Drag-and-drop -- deal cards can be dragged between columns to update their stage, with smooth transition animations
  • Column totals -- each column header displays the deal count and aggregate value, updating live as cards are moved
  • Add deal -- "+" button on each column to create a new deal pre-set to that stage
  • Card quick actions -- hover to reveal an actions menu with options like Edit, View Details, and Delete
  • Filters -- filter deals by owner, priority, close date range, or value range
import { PipelineBoard } from "@/components/pipeline/pipeline-board"
import { PipelineColumn } from "@/components/pipeline/pipeline-column"
import { PipelineCard } from "@/components/pipeline/pipeline-card"

Pipeline Board Layout

┌──────────┬──────────┬──────────┬──────────┬──────────┬──────────┐
│Prospecting│Qualifica-│ Proposal │Negotia-  │ Won      │ Lost     │
│ 5 $80K   │tion 3 $65│ 4 $180K  │tion 2 $95│ 6 $310K  │ 1 $25K   │
├──────────┼──────────┼──────────┼──────────┼──────────┼──────────┤
│ ┌──────┐ │ ┌──────┐ │ ┌──────┐ │ ┌──────┐ │ ┌──────┐ │ ┌──────┐ │
│ │ Deal │ │ │ Deal │ │ │ Deal │ │ │ Deal │ │ │ Deal │ │ │ Deal │ │
│ └──────┘ │ └──────┘ │ └──────┘ │ └──────┘ │ └──────┘ │ └──────┘ │
│ ┌──────┐ │ ┌──────┐ │ ┌──────┐ │ ┌──────┐ │ ┌──────┐ │          │
│ │ Deal │ │ │ Deal │ │ │ Deal │ │ │ Deal │ │ │ Deal │ │          │
│ └──────┘ │ └──────┘ │ └──────┘ │ └──────┘ │ └──────┘ │          │
└──────────┴──────────┴──────────┴──────────┴──────────┴──────────┘

Pipeline Architecture

The pipeline uses a three-tier component hierarchy:

PipelineBoard (container + drag-and-drop context)
├── PipelineColumn × N stages
│   ├── Column header (stage name, deal count, total value, add button)
│   ├── PipelineCard × N deals
│   │   ├── Company name
│   │   ├── Deal value
│   │   ├── Owner avatar
│   │   ├── Expected close date
│   │   └── Priority badge
│   └── Column footer
└── onDragEnd handler (updates deal stage in state)

When a card is dropped into a new column, the onDragEnd handler reads the source and destination, removes the deal from the source column, inserts it into the destination at the correct index, and updates the deal's stage field. Column totals recalculate automatically.

Data Sources

Data Source Location
Deals deals data/seed.ts
Pipeline stages pipelineStages data/seed.ts
Team members teamMembers data/seed.ts

Next Steps

Previous

Project Structure

Next

Deals & Targets