Sales Pipeline

Dashboard9: Sales Pipeline

A CRM sales-pipeline dashboard built with the App Router: a collapsible sidebar, a ⌘K command search topbar, pipeline KPIs, a four-stage kanban board of deal cards with owners and hot-lead flags, a revenue-vs-forecast area chart, a team-quota radial gauge, and a sales-rep leaderboard with progress bars. It is a ready-made sales dashboard and CRM pipeline UI for any Next.js / React sales dashboard template, composed entirely from Beste UI blocks on top of shadcn/ui + Recharts.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/dashboard9?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/dashboard9?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/dashboard9.tsx, the Beste components it composes (sidebar-nav, user-menu, notifications-menu, area-chart, radial-chart) next to it, and the shadcn/ui dependencies they need (button, badge, avatar, sheet, command, dialog).

Quick start

The installed file exports dashboard9Demo alongside the block: the exact props behind the preview above. Spread it to get the full dashboard in one line. The block fills its container's height (h-screen), so render it as the whole page.

import { Dashboard9, dashboard9Demo } from "@/components/beste/block/dashboard9";

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

Props

Every prop is optional. Omit any and the block falls back to its built-in demo data, so <Dashboard9 /> renders a complete, populated sales dashboard out of the box. Pass just the props you want to override.

The block-local data types:

type Kpi = {
  label: string;
  value: string; // pre-formatted, e.g. "$1.24M"
};

type Deal = {
  company: string;
  value: string; // pre-formatted, e.g. "$42,000"
  owner: string;
  avatar: string; // image URL, rendered with a plain <img>
  hot?: boolean; // shows the flame icon on the card
};

type Stage = {
  id: string;
  name: string;
  total: string; // pre-formatted column total, e.g. "$320K"
  accent: string; // dot color class, e.g. "bg-emerald-500"
  deals: Deal[];
};

type Rep = {
  name: string;
  avatar: string; // image URL, rendered with a plain <img>
  closed: number; // in $K
  quota: number; // in $K; bar width is closed / quota
};

type RevenuePoint = { month: string; closed: number; forecast: number };

type DashboardUser = {
  name: string;
  email: string;
  avatar: string; // image URL, rendered with a plain <img>
};

The remaining props reuse the interfaces exported by the composed Beste components:

// from sidebar-nav
type SidebarNavGroup = {
  label?: string; // muted uppercase group heading (hidden when collapsed)
  items: {
    id: string;
    label: string;
    icon?: LucideIcon;
    badge?: string | number; // small trailing count/tag, e.g. 32
    href?: string;           // renders an <a> instead of a <button>
  }[];
};

// from user-menu
type UserMenuItem = {
  id: string;
  label: string;
  icon?: LucideIcon;
  destructive?: boolean; // red row with a separator above it
};

// from notifications-menu
type NotificationItem = {
  id: string;
  title: string;
  description?: string;
  time: string;
  icon?: LucideIcon;
  unread?: boolean;
};

// block-local
type CommandPaletteGroup = {
  heading: string;
  items: { id: string; label: string; icon?: LucideIcon }[];
};

Still internal

A few cosmetic bits stay as constants in the installed file — edit them in place:

• revenueConfig — series labels and colors for the Revenue vs. forecast area chart (colors reference the --chart-1…--chart-5 theme tokens).

Components

This block composes these Beste UI components (installed automatically):

• sidebar-nav — the collapsible left navigation with brand, grouped links, and badges.
• user-menu — the avatar dropdown in the topbar (compact on mobile, full on desktop).
• notifications-menu — the topbar bell with unread notifications.
• area-chart — the revenue-vs-forecast chart (Recharts).
• radial-chart — the team-quota gauge.

Behavior notes

• Pressing ⌘K (or Ctrl+K) anywhere toggles the command dialog; the topbar search button opens it too. Selecting any command closes it.
• The desktop sidebar toggle button collapses and expands sidebar-nav in place. On screens below md, the sidebar is hidden and the panel icon opens it in a slide-over Sheet; tapping any nav item closes that sheet.
• Deal cards and the per-column "Add deal" button are interactive buttons with hover states, but they are presentational (no wired handlers).
• The leaderboard bars are computed live from each rep's closed / quota ratio.
• The area chart shows a legend and the radial gauge renders quotaValue (default 82%) with the quotaCaption line under it.

Requirements

• Next.js App Router. Rendered as a client component ("use client"), so it composes into any App Router page.
• Full-height layout: the root uses h-screen and its own internal scroll area, so give it the whole viewport rather than nesting it inside padded page chrome.
• Avatar and deal images render with a plain <img>, so no next.config images.remotePatterns setup is needed for remote hosts.