DemoBuy

Reports & Analytics

Last updated on 2026-03-22

The reports module provides four analytics screens covering sales performance, pipeline health, team metrics, and revenue segmentation. All charts use Recharts wrapped in shadcn/ui ChartContainer for consistent theming. All screens are in the (dashboard) route group.

Sales Overview

Route: /reports

The main reporting dashboard with a configurable date range and high-level sales metrics.

  • Date range selector -- pill-style buttons for 7d, 30d, 90d, and All time periods; selecting a range filters all charts and KPIs
  • KPI cards -- four StatCard components: Revenue (with trend percentage), Deals Won (with trend), Average Deal Size, and Win Rate percentage
  • Revenue trend area chart -- Recharts AreaChart showing daily/weekly revenue over the selected period with a gradient fill using the indigo oklch token
  • Deals won vs lost bar chart -- grouped BarChart comparing won (green) and lost (red) deal counts by month
  • Revenue by source pie chart -- PieChart with legend showing revenue breakdown by lead source (Website, Referral, LinkedIn, Cold Call, Event, Other)
  • Top performing reps table -- data table showing rank, rep name (with avatar), deals won, total revenue, and win rate; sorted by revenue descending
import { StatCard } from "@/components/dashboard/stat-card"
import { RevenueTrendChart } from "@/components/charts/revenue-trend-chart"
import { WonLostChart } from "@/components/charts/won-lost-chart"
import { RevenueBySourceChart } from "@/components/charts/revenue-by-source-chart"

Sales Overview Layout

┌──────────┬──────────┬──────────┬──────────┐
│ Revenue  │ Deals    │ Avg Deal │ Win      │
│          │ Won      │ Size     │ Rate     │
├──────────┴──────────┼──────────┴──────────┤
│ Revenue Trend       │ Won vs Lost         │
│ (area chart)        │ (bar chart)         │
├─────────────────────┼─────────────────────┤
│ Revenue by Source   │ Top Performing      │
│ (pie chart)         │ Reps (table)        │
└─────────────────────┴─────────────────────┘

Data Sources

Data Source Location
Revenue data revenueData data/seed.ts
Deals deals data/seed.ts
Team members teamMembers data/seed.ts
Lead sources leadSources data/seed.ts

Pipeline Analytics

Route: /reports/pipeline

Pipeline health metrics and conversion analysis.

  • Conversion funnel -- horizontal funnel visualization showing the number of deals and conversion rate at each stage transition (Lead to Qualified: 65%, Qualified to Proposal: 72%, Proposal to Negotiation: 58%, Negotiation to Won: 45%)
  • Deals by stage bar chart -- vertical BarChart showing deal count per stage with stage-specific colors matching the pipeline theme
  • Average time in stage -- horizontal bar chart displaying the mean number of days deals spend in each stage, helping identify bottlenecks
  • Pipeline velocity metrics -- four metric cards: Average Sales Cycle (days), Pipeline Value (total open), Weighted Pipeline (probability-adjusted), and Conversion Rate (lead to close)
  • Stalled deals alert -- warning card listing deals that have not changed stage in 14+ days, with deal name, current stage, days stalled, and owner; sorted by days stalled descending
import { ConversionFunnel } from "@/components/charts/conversion-funnel"
import { DealsByStageChart } from "@/components/charts/deals-by-stage-chart"
import { TimeInStageChart } from "@/components/charts/time-in-stage-chart"
import { PipelineVelocityCards } from "@/components/reports/pipeline-velocity-cards"
import { StalledDealsAlert } from "@/components/reports/stalled-deals-alert"

Pipeline Velocity Metrics

Metric Calculation Description
Average Sales Cycle Mean days from Lead to Closed Won How long deals take to close
Pipeline Value Sum of all open deal values Total potential revenue
Weighted Pipeline Sum of (value x probability) for open deals Probability-adjusted revenue
Conversion Rate Closed Won / Total Closed Percentage of deals won

Data Sources

Data Source Location
Deals deals data/seed.ts
Pipeline stages pipelineStages data/seed.ts
Deal history dealHistory data/seed.ts

Team Performance

Route: /reports/team

Individual and team performance analytics with leaderboard rankings.

  • Leaderboard table -- ranked table of sales reps with:
    • Rank badges -- gold (1st), silver (2nd), bronze (3rd) medal icons for top performers
    • Rep info -- avatar and full name
    • Deals won -- count of closed-won deals
    • Revenue -- total revenue from closed-won deals
    • Win rate -- percentage of won deals vs total closed deals
    • Quota attainment -- progress bar showing percentage of quota reached, color-coded: green (100%+), amber (75-99%), red (below 75%)
  • Expandable rep details -- click a row to expand and see a breakdown of deals by stage, monthly revenue trend, and recent activity
  • Team radar chart -- Recharts RadarChart comparing team aggregate performance across 6 dimensions: Revenue, Deals Won, Win Rate, Average Deal Size, Activities Logged, and Response Time
  • Activity donut chart -- PieChart (donut variant) showing the distribution of logged activities by type (Calls, Emails, Meetings, Notes) across the team
import { TeamLeaderboard } from "@/components/reports/team-leaderboard"
import { TeamRadarChart } from "@/components/charts/team-radar-chart"
import { ActivityDonutChart } from "@/components/charts/activity-donut-chart"
import { QuotaProgressBar } from "@/components/reports/quota-progress-bar"

Leaderboard Layout

┌────┬──────────────┬───────┬──────────┬────────┬──────────────────┐
│ #  │ Rep          │ Won   │ Revenue  │ Win %  │ Quota Attainment │
├────┼──────────────┼───────┼──────────┼────────┼──────────────────┤
│ 🥇 │ Sarah Chen   │ 12    │ $485,000 │ 68%    │ ████████████ 112%│
│ 🥈 │ Mike Johnson │ 10    │ $392,000 │ 62%    │ █████████░░░  89%│
│ 🥉 │ Lisa Park    │ 9     │ $367,000 │ 58%    │ ████████░░░░  82%│
│ 4  │ Tom Wilson   │ 7     │ $284,000 │ 54%    │ ██████░░░░░░  64%│
└────┴──────────────┴───────┴──────────┴────────┴──────────────────┘

Data Sources

Data Source Location
Team members teamMembers data/seed.ts
Deals deals data/seed.ts
Activities activities data/seed.ts
Quotas teamMembers (quota field) data/seed.ts

Revenue Breakdown

Route: /reports/revenue

Detailed revenue segmentation and analysis across multiple dimensions.

  • Revenue by product -- horizontal BarChart showing revenue generated per product/service line, sorted by revenue descending
  • Revenue by industry -- PieChart (donut variant) breaking down revenue by the industry of the associated company, with legend and percentage labels
  • Deal size distribution -- histogram BarChart showing the count of deals in value ranges ($0-10K, $10-25K, $25-50K, $50-100K, $100K+), revealing the typical deal size profile
  • Recurring vs one-time revenue -- stacked AreaChart showing recurring revenue and one-time revenue over time, highlighting the growth of predictable revenue streams
  • Customer lifetime value table -- data table showing top customers ranked by total lifetime value, with columns for company name, total revenue, deal count, first deal date, average deal size, and LTV
import { RevenueByProductChart } from "@/components/charts/revenue-by-product-chart"
import { RevenueByIndustryChart } from "@/components/charts/revenue-by-industry-chart"
import { DealSizeDistribution } from "@/components/charts/deal-size-distribution"
import { RecurringRevenueChart } from "@/components/charts/recurring-revenue-chart"
import { CustomerLTVTable } from "@/components/reports/customer-ltv-table"

Revenue Breakdown Layout

┌─────────────────────┬─────────────────────┐
│ Revenue by Product  │ Revenue by Industry │
│ (horizontal bar)    │ (donut chart)       │
├─────────────────────┼─────────────────────┤
│ Deal Size           │ Recurring vs        │
│ Distribution        │ One-Time Revenue    │
│ (histogram)         │ (stacked area)      │
├─────────────────────┴─────────────────────┤
│ Customer Lifetime Value (table)           │
└───────────────────────────────────────────┘

Data Sources

Data Source Location
Deals deals data/seed.ts
Companies companies data/seed.ts
Products products data/seed.ts
Revenue data revenueData data/seed.ts

Charts Architecture

All report charts in the CRM Dashboard Kit follow a consistent pattern using Recharts wrapped in the shadcn/ui ChartContainer component. This ensures unified theming, responsive sizing, and dark mode support across all visualizations.

How It Works

Each chart component receives its data as props and defines a ChartConfig object that maps data keys to oklch color tokens. The ChartContainer handles responsive width, applies theme-aware colors, and provides the Recharts ResponsiveContainer wrapper.

import { ChartContainer, ChartConfig, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"
import { AreaChart, Area, XAxis, YAxis } from "recharts"

const chartConfig: ChartConfig = {
  revenue: {
    label: "Revenue",
    color: "oklch(0.585 0.233 270)",  // indigo-500
  },
}

function RevenueTrendChart({ data }: { data: RevenueDataPoint[] }) {
  return (
    <ChartContainer config={chartConfig}>
      <AreaChart data={data}>
        <XAxis dataKey="month" />
        <YAxis />
        <ChartTooltip content={<ChartTooltipContent />} />
        <Area
          type="monotone"
          dataKey="revenue"
          fill="var(--color-revenue)"
          stroke="var(--color-revenue)"
          fillOpacity={0.2}
        />
      </AreaChart>
    </ChartContainer>
  )
}

Chart Components

The following chart components live in components/charts/:

Component Chart Type Used On
revenue-trend-chart.tsx AreaChart Sales Overview
won-lost-chart.tsx BarChart (grouped) Sales Overview
revenue-by-source-chart.tsx PieChart Sales Overview
conversion-funnel.tsx Custom funnel (div-based) Pipeline Analytics
deals-by-stage-chart.tsx BarChart Pipeline Analytics, Dashboard
time-in-stage-chart.tsx BarChart (horizontal) Pipeline Analytics
team-radar-chart.tsx RadarChart Team Performance
activity-donut-chart.tsx PieChart (donut) Team Performance
revenue-by-product-chart.tsx BarChart (horizontal) Revenue Breakdown
revenue-by-industry-chart.tsx PieChart (donut) Revenue Breakdown
deal-size-distribution.tsx BarChart (histogram) Revenue Breakdown
recurring-revenue-chart.tsx AreaChart (stacked) Revenue Breakdown
forecast-chart.tsx BarChart (grouped) Forecasting
revenue-chart.tsx AreaChart Dashboard

All chart components follow the same pattern: accept typed data props, define a ChartConfig, and render inside ChartContainer. This makes it straightforward to add new charts or customize existing ones by adjusting the config colors and Recharts composition.

Next Steps

Previous

Tasks & Email

Next

Design Tokens