Analytics Screens

Last updated on 2026-05-31

The SaaS Metrics Kit includes 10 analytics screens covering every core SaaS metric. All screens share the (dashboard) route group layout with AppSidebar and AppHeader, and use seed data from data/seed.ts.

Dashboard Overview

Route: /dashboard

The main landing page provides a high-level snapshot of your SaaS business with KPI cards, trend charts, and quick navigation links.

KPI stat cards -- six cards showing MRR, ARR, total customers, new MRR, net revenue retention, and average revenue per user, each with trend indicator and period-over-period change
MRR trend area chart -- 12-month area chart showing monthly recurring revenue over time via Recharts AreaChart
Customer growth bar chart -- grouped bar chart comparing new customers vs churned customers per month
MRR movement stacked bar chart -- full-width chart breaking down new MRR, expansion MRR, contraction MRR, and churned MRR by month
Recent activity feed -- chronological timeline of recent events (subscriptions, payments, churn, alerts) using the ActivityFeed composite component
Quick actions -- four link cards for jumping to Revenue, Customers, Growth, and Benchmarks

Dashboard Layout

┌────────┬────────┬────────┬────────┬────────┬────────┐
│ MRR    │ ARR    │ Total  │ New    │ NRR    │ ARPU   │
│        │        │ Cust.  │ MRR    │        │        │
├────────┴────────┴────────┼────────┴────────┴────────┤
│ MRR Trend                │ Customer Growth           │
│ (area chart)             │ (bar chart)               │
├──────────────────────────┴──────────────────────────┤
│ MRR Movement (stacked bar)                          │
├─────────────────────────┬───────────────────────────┤
│ Recent Activity         │ Quick Actions             │
│ (feed)                  │ (link cards)              │
└─────────────────────────┴───────────────────────────┘

Key Components

import { PageHeader } from "@/components/shared/page-header"
import { StatCard } from "@/components/shared/stat-card"
import { ActivityFeed } from "@/components/analytics/activity-feed"

Data Sources

Data	Source	Location
KPI metrics	`overviewKpis`	`data/seed.ts`
MRR trend	`mrrTrendData`	`data/seed.ts`
Customer growth	`customerGrowthChart`	`data/seed.ts`
MRR movement	`mrrMovementData`	`data/seed.ts`
Recent activity	`recentActivity`	`data/seed.ts`

Revenue

Route: /revenue

Detailed breakdown of recurring revenue with MRR/ARR toggle, waterfall charts, plan-level analysis, and a monthly data table.

Revenue history line chart -- tabbed view to toggle between MRR and ARR trends over 12 months using Recharts LineChart
Net new MRR sparkline cards -- four summary cards showing net new MRR for the most recent four months
Revenue waterfall bar chart -- stacked bar chart visualizing new MRR, expansion, contraction, and churned MRR components
Revenue by plan stacked bar chart -- stacked breakdown showing MRR contribution from Starter, Growth, Enterprise, and Custom tiers
Revenue by plan summary cards -- four cards showing MRR, customer count, and percentage of total for each plan
Monthly revenue data table -- table with month-by-month MRR, growth percentage, new, expansion, contraction, and churned MRR columns

Key Components

Tabs, LineChart, BarChart (stacked), Table. Uses revenueHistory, revenueByPlan, monthlyRevenueTable from seed data.

Churn Analysis

Route: /churn

Comprehensive churn analysis with trend tracking, reason breakdown, plan comparison, and a churned customers table with filtering.

Churn rate trend dual-line chart -- overlays logo churn rate and revenue churn rate over 12 months
Churn reasons pie chart -- donut chart showing why customers leave (pricing, competitor, no longer needed, missing features, poor support, other)
Churn by plan bar chart -- grouped bar chart comparing logo churn and revenue churn rates across plan tiers
Churned customers table -- filterable data table showing recently churned customers with name, company, plan, MRR lost, reason, duration, and churn date; filter by plan via Select dropdown
Status badges -- StatusBadge component used for plan tier display

Key Components

import { StatusBadge } from "@/components/shared/status-badge"

LineChart (dual-line), PieChart, BarChart (grouped), Table, Select. Uses churnHistory, churnReasons, churnedCustomers, churnByPlan from seed data.

Retention

Route: /retention

Cohort retention analysis with a heatmap table, multi-line retention curves, and net dollar retention comparison by plan.

Cohort retention heatmap -- table where each row is a monthly cohort showing retention percentages across 12 months with color-coded cells (green >= 90%, yellow >= 65%, orange >= 50%, red < 50%)
Retention curves line chart -- multi-line chart comparing retention decay curves across different cohorts over time
Retention by plan cards -- four cards (one per plan tier) showing Net Revenue Retention (NRR) and Gross Revenue Retention (GRR) with progress bars; NRR >= 100% displayed in green, below in red
Net dollar retention comparison table -- summary table comparing NRR, GRR, and expansion impact across all plan tiers

Key Components

Table (heatmap), LineChart (multi-line), Card with Progress bars. Uses cohortRetention, retentionCurves, retentionByPlan from seed data.

Growth

Route: /growth

Grid of growth metric cards with progress bars showing performance against benchmarks.

Growth metric cards -- responsive grid (1-3 columns) of cards, each showing a key growth metric (e.g., MRR growth rate, customer growth rate, expansion revenue %, quick ratio)
Each card displays the metric label, current value (formatted), trend direction icon (TrendingUp/TrendingDown), description, progress bar showing progress toward the benchmark target, and the benchmark value
Progress bars fill based on the ratio of current value to target value

Key Components

Card, Progress (with ProgressLabel and ProgressValue), TrendingUp/TrendingDown icons. Uses growthMetrics from seed data.

Unit Economics

Route: /unit-economics

Customer lifetime value, acquisition cost, and efficiency metrics with a CAC-by-channel breakdown.

Metric cards grid -- responsive grid (1-3 columns) of MetricCard composites showing LTV, CAC, LTV:CAC ratio, payback period, ARPU, and gross margin; each card shows value, benchmark, trend, and description
CAC by channel horizontal bar chart -- horizontal bar chart showing customer acquisition cost by marketing channel (organic search, paid search, content marketing, referrals, social media)
Channel detail cards -- five summary cards showing per-channel CAC, customers acquired, and total spend

Key Components

import { MetricCard } from "@/components/analytics/metric-card"

MetricCard, BarChart (horizontal/vertical layout), Card. Uses unitEconomics, cacByChannel from seed data.

Forecasting

Route: /forecasting

Revenue projections with scenario analysis and adjustable forecast assumptions.

Revenue forecast composed chart -- ComposedChart combining actual MRR (solid line with dots), base projection (dashed line), and optimistic/pessimistic scenario bands (shaded areas) over 18 months
Forecast summary cards -- three cards showing projected MRR at 12 months for optimistic, base case, and pessimistic scenarios with color-coded values (green for optimistic, default for base, red for pessimistic)
Key assumptions sliders -- grid of adjustable assumption parameters (monthly growth rate, churn rate, expansion rate, etc.) with Slider components; each slider shows the current value, unit, min/max range, and description

Key Components

ComposedChart (Area + Line), Card, Slider. Uses forecastData, forecastAssumptions from seed data.

Conversion Funnel

Route: /funnel

Visual funnel from visitor to paid customer with source breakdown and time-to-convert analysis.

Funnel overview -- horizontal bar visualization showing progressive narrowing across stages (Visitors, Signups, Activated, Trial Started, Trial Active, Paid). Each bar shows the stage name, count, conversion rate from previous stage, and drop-off percentage; bar width proportional to stage count
Funnel stat cards -- four summary cards showing key conversion ratios: visitor-to-signup, signup-to-trial, trial-to-paid, and overall conversion rate
Conversion by source grouped bar chart -- bar chart showing visitors, signups, and paid customers by traffic source (organic, paid search, referral, social, direct)
Time to convert bar chart -- bar chart showing distribution of days from signup to first payment
Source conversion details table -- data table with per-source visitors, signups, trials, paid count, and conversion rate

Key Components

Custom funnel bars (CSS width + overlay text), BarChart (grouped and standard), Table, Card. Uses funnelSteps, conversionBySource, timeToConvert from seed data.

Industry Benchmarks

Route: /benchmarks

Compare your metrics against industry standards with percentile rankings and status badges.

Benchmark cards grid -- responsive grid (1-4 columns) showing each metric with your value, status badge (Above Avg / Average / Below Avg), percentile rank via progress bar, industry median, and top quartile reference values
Comparison summary table -- full-width table listing all benchmark metrics with your value (color-coded by status), median, top quartile, percentile rank, and status badge

Key Components

Card, Badge, Progress (with ProgressLabel and ProgressValue), Table. Uses benchmarkMetrics from seed data.

Customer Analytics

Route: /customers

Understand your customer base with growth trends, segmentation, health score analysis, and a top customers leaderboard.

Customer count trend line chart -- line chart showing cumulative active customer count over 12 months
New vs churned bar chart -- grouped bar chart showing monthly customer acquisitions and losses side by side
Customer segments donut chart -- donut pie chart showing distribution by plan tier (Starter, Growth, Enterprise, Custom)
Health score distribution bar chart -- bar chart bucketing customers into health score ranges (0-20, 21-40, 41-60, 61-80, 81-100)
Top 10 customers by MRR table -- leaderboard table showing rank, company, contact name, plan badge, and monthly revenue for the highest-value accounts

Key Components

LineChart, BarChart (grouped and standard), PieChart (donut), Table, Badge. Uses customerGrowthData, customerSegments, topCustomersByMrr, customers from seed data.

Next Steps

Management Screens -- subscription, customer, and billing management
Settings Screens -- workspace, team, and profile settings
Design Tokens -- oklch color system and theming

Project Structure

Management Screens