Sales Pipeline

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button, avatar, avatar-initials dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/dashboard/dashboard9.tsx instead.

Usage

The file also exports dashboard9Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Dashboard9, dashboard9Demo } from "@/components/blocks/dashboard/dashboard9";

export default function Page() {
  return <Dashboard9 {...dashboard9Demo} />;
}

Props

Types

type NavItem = { label: string; href: string; active?: boolean };

type KpiItem = { label: string; value: string; delta: string; trend: "up" | "down" };

type Deal = { company: string; value: string; owner: string; hot?: boolean };

type PipelineStage = { name: string; deals: Deal[] };

type RepProgress = { name: string; quotaPercent: number; dealCount: number };

Behavior notes

• The kanban board is a static, decorative layout: cards are not draggable between columns and there is no column-filter toggle. It's a server component with zero client-side interaction.
• The flame icon on a deal card is driven purely by that deal's own `hot` flag; there's no threshold logic tying it to deal value.
• Rep quota percentages above 100 (reps who beat quota) still render their progress bar clipped to the container width via a min(100) clamp in the width style, so the bar never overflows the row.
• The revenue-vs-forecast chart is two overlaid polylines sharing one min/max scale computed across both series, so actual and forecast are always comparable on the same axis rather than each normalized independently.
• The search control in the topbar is a static, non-functional affordance (matching the ⌘K trigger convention used elsewhere in this category), not a working search box.