Sales dashboard

A React block (a whole screen) in Beamline's Blocks category.

A sales leader's week in one screen: closed won against quota and pace, pipeline coverage and win rate, the quarter's run toward target with the forecast ahead of it, pipeline by stage, a rep leaderboard that scopes every figure to one rep, and the forecast call submitted to your API.

Use it for

A sales manager's or revenue leader's home: how the team is pacing to quota this period, what the forecast call is, who is ahead and where the pipeline sits.

Not for

Working the deals themselves, row by row (crm).
Product usage, funnels and retention (product-analytics).
A general SaaS revenue overview with MRR and uptime (analytics-dashboard).

Anatomy

app shell (your navigation, product mark, signed-in manager)
header: page title and period, the period switch, and the chosen rep as a removable chip
KPI row: closed won, quota attainment against pace, pipeline coverage, win rate
run to target: cumulative closed won per week against the target line, the forecast dashed ahead of today
forecast call: attainment gauge with the pace marker, Commit and Best case fields, Submit forecast (the page's one primary action) and when it was last submitted
leaderboard: reps ranked by attainment with their bar, closed, pipeline and movement; a rep without a quota is hatched and ranked last
pipeline by stage: open pipeline per stage as ranked bars

States

loading (every panel holds its shape)
failed to load (the error with Try again in the data's place)
a rep chosen (every figure is that rep's; the chip clears it)
refreshing: prior figures stay visible, but forecast fields and submission wait for the newly selected query's figures
no quota set (attainment and coverage hatched, never 0)
partial data (a week or a stage not reported is a gap or hatched)
forecast submitting, submitted, and failed (the figures stay as typed; the error sits under the button with Try again)
no reps (the leaderboard says so)

Keyboard

Tab reaches the period switch, the rep chip, every leaderboard row, the forecast fields and Submit
Enter or Space on a leaderboard row scopes the page to that rep; again clears it
arrows step the forecast fields; the period switch moves with the arrows

Motion

A new period or rep keeps the last figures on screen, dimmed, until its own arrive; then every value rolls from where it was and the leaderboard rows slide to their new ranks (useFlip). Choosing a rep sends a consequence trace from its row to the four KPIs. Submit morphs to working and to the time it went in. Reduced motion: values change in place, rows are placed at once.

Props

Prop	Type	Default	Description
`useData` (required)	`(query: SalesQuery) => { data: SalesData \| null; error?: Error \| null; retry?: () => void }`	—	A hook around your sales API, called with the period and the chosen rep; data null while loading.
`onSubmitForecast`	`(call: ForecastCall) => Promise<void> \| void`	—	Shows the forecast call's Submit; a rejected promise puts the last submitted call back and shows the error.
`periods`	`{ value: string; label: string }[]`	—	Default this quarter · last quarter · year to date.
`period / defaultPeriod / onPeriodChange`	`string`	—
`rep / defaultRep / onRepChange`	`string \| null`	—	The rep the page is scoped to (its id).
`workspace`	`string`	`"Northline"`
`me`	`{ name: string; photo?: string }`	—	The signed-in manager in the sidebar and on the submitted call.
`nav`	`AppShellNavGroup[]`	—
`actions`	`ReactNode`	—	Right side of the top bar.
`className / style / ref`	`string / CSSProperties / Ref<HTMLDivElement>`	—

Built from

Dependencies

lucide-react

Import

import { SalesDashboard } from "@/blocks/sales-dashboard/sales-dashboard";

Get it

Sales dashboard is part of Beamline: 200+ components and 50+ complete screens for React that your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 launch price, one payment, no subscription, lifetime updates, one licence for your whole team. Get Beamline · Connect your agent