Metrics dashboardPro

• Rolling-digit KPI tabs
• 7D / 30D / 90D with period compare
• Top pages and sources
• Export with saved state

• The landing screen of an analytics, SaaS or admin product.
• Any overview where people pick one metric and want its trend and top contributors.

• Revenue-specific views: use revenue analytics or revenue breakdown.
• Dense operational monitoring with many charts at once.

Import it from @/components/blocks/metrics-dashboard after installing. It ships with sample data, so it renders straight away; swap in your own data when you're ready.

import { MetricsDashboard } from "@/components/blocks/metrics-dashboard";

export default function AnalyticsPage() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <MetricsDashboard site="acme.com" />
    </main>
  );
}

• KPI tabs are a tablist with aria-selected, so the active metric is announced.
• Numbers are read as final values, not animated digits.
• The range control is a labelled radio group.

• KPI digits roll when the range changes.
• The active-tab marker slides between KPIs.
• The chart morphs between ranges instead of redrawing.

• KPI tabs are a 2×2 grid on phones and one row from 1024px.
• Top pages and sources stack below 768px.
• The chart fills the width at every size.

• Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.
• Only the chart and KPI numbers re-render when the range changes.

• Pass real series per metric in the same { label, value, previous } shape the AreaChart uses.
• Wire the export ActionButton to a server action that returns a CSV.