DemoBuy

Leaderboard & Reports

Last updated on 2026-04-05

The leaderboard and reports pages provide performance visibility and analytical depth for the sales team. Both screens are in the (dashboard) route group.

Leaderboard

Route: /leaderboard

The leaderboard ranks sales reps by performance metrics, creating transparency and friendly competition across the team. It combines quantitative rankings with gamification elements to drive engagement.

  • Rep ranking list -- ordered list of sales reps ranked by primary metric (revenue closed), showing rank position, avatar, name, title, and key performance numbers
  • Performance metrics per rep -- each entry displays revenue closed, deals won, win rate percentage, average deal size, and quota attainment
  • Gamification elements -- top 3 reps receive medal badges (gold, silver, bronze); streak indicators show consecutive months of quota attainment; trend arrows show rank changes from the previous period
  • Metric toggle -- switch the ranking basis between Revenue Closed, Deals Won, Win Rate, and Average Deal Size
  • Period selector -- toggle between weekly, monthly, quarterly, and annual leaderboard views
  • Performance sparklines -- mini line charts next to each rep showing their revenue trend over the selected period
  • Team averages -- footer row showing team average for each metric to provide benchmark context
import { RepRankCard } from "@/components/sales/rep-rank-card"
import { MetricCard } from "@/components/sales/metric-card"

Leaderboard Layout

┌───────────────────────────────────────────────────┐
│ Leaderboard         [Revenue ▼] [This Quarter ▼]  │
├───┬──────────┬─────────┬────────┬───────┬────────┤
│ # │ Rep      │ Revenue │ Deals  │ Win % │ Quota  │
├───┼──────────┼─────────┼────────┼───────┼────────┤
│🥇│ Mike L.   │ $165K   │ 12     │ 68%   │ 110%   │
│🥈│ Jane D.   │ $120K   │ 9      │ 62%   │ 80%    │
│🥉│ Lisa T.   │ $110K   │ 8      │ 58%   │ 79%    │
│ 4 │ Sam K.   │ $95K    │ 7      │ 54%   │ 73%    │
│ 5 │ Pat R.   │ $88K    │ 6      │ 51%   │ 67%    │
├───┴──────────┼─────────┼────────┼───────┼────────┤
│ Team Average │ $116K   │ 8.4    │ 59%   │ 82%    │
└──────────────┴─────────┴────────┴───────┴────────┘

Gamification Elements

Element Trigger Visual
Gold medal Rank #1 Gold badge with trophy icon
Silver medal Rank #2 Silver badge with medal icon
Bronze medal Rank #3 Bronze badge with medal icon
Quota streak 3+ consecutive months at 100%+ Fire icon with streak count
Rank change Position change vs. previous period Green up arrow or red down arrow

Data Sources

Data Source Location
Rep performance repPerformance data/seed.ts
Team members teamMembers data/seed.ts
Deals (for calculations) deals data/seed.ts
Quota targets repTargets data/seed.ts

Reports

Route: /reports

The reports page provides analytical dashboards with charts and tables for tracking revenue trends, win rates, forecasts, and period-over-period comparisons. It is designed for sales managers and team leads who need deeper performance insights.

  • Revenue trend chart -- area or line chart showing revenue closed over time (weekly, monthly, or quarterly granularity) via Recharts, with the ability to overlay previous period for comparison
  • Win rate analysis -- bar chart or donut chart showing win/loss/no-decision breakdown by count and by value; trend line showing win rate over time
  • Forecast chart -- stacked bar chart showing projected revenue in three tiers: Committed (high-probability deals in late stages), Best Case (committed plus mid-stage deals), and Pipeline (all open deals)
  • Period comparison -- side-by-side metrics comparing current period to previous period with delta values and percentage change indicators (green for improvement, red for decline)
  • Pipeline velocity -- metrics showing average time in each stage, average sales cycle length, and pipeline-to-close conversion rate
  • Revenue by source -- horizontal bar chart or pie chart breaking down closed revenue by lead source (inbound, outbound, referral, partner)
  • Export controls -- buttons to export report data as CSV or PDF
import { RevenueChart } from "@/components/charts/revenue-chart"
import { WinRateChart } from "@/components/charts/win-rate-chart"
import { ForecastChart } from "@/components/charts/forecast-chart"
import { MetricCard } from "@/components/sales/metric-card"

Reports Layout

┌──────────┬──────────┬──────────┬──────────┐
│ Revenue  │ Win Rate │ Pipeline │ Avg Cycle│
│ This Qtr │          │ Value    │ Length   │
├──────────┴──────────┴──────────┴──────────┤
│ Revenue Trend (area chart)                │
│ ── Current Period  ·· Previous Period     │
├───────────────────┬───────────────────────┤
│ Win Rate Analysis │ Forecast              │
│ (bar/donut)       │ (stacked bar)         │
├───────────────────┼───────────────────────┤
│ Period Comparison  │ Revenue by Source     │
│ (delta cards)      │ (horizontal bar)     │
├───────────────────┴───────────────────────┤
│ Pipeline Velocity Metrics                 │
└───────────────────────────────────────────┘

Forecast Categories

Category Criteria Color
Committed Deals in Negotiation or later with 75%+ probability green
Best Case Committed plus Proposal stage (50%+) blue
Pipeline All open deals including early-stage gray

Period Comparison Metrics

Metric Current Previous Delta
Revenue $480K $420K +14%
Deals Won 18 15 +20%
Win Rate 62% 58% +4pp
Avg Deal Size $26.7K $28K -5%
Pipeline Value $755K $680K +11%

Data Sources

Data Source Location
Revenue history revenueHistory data/seed.ts
Win/loss data Computed from deals data/seed.ts
Forecast data Computed from deals by stage/probability data/seed.ts
Pipeline velocity pipelineVelocity data/seed.ts
Lead sources leadSources data/seed.ts

Next Steps

Previous

Deals & Targets

Next

Design Tokens