The SaaS Metrics Kit uses Next.js App Router with route groups to separate the analytics dashboard from the authentication flow.
Directory Overview
saas-metrics-kit/
├── app/
│ ├── (dashboard)/ # Main dashboard pages
│ │ ├── layout.tsx # AppSidebar + AppHeader
│ │ ├── dashboard/page.tsx # Overview dashboard
│ │ ├── revenue/page.tsx # Revenue analytics
│ │ ├── customers/page.tsx # Customer analytics
│ │ ├── churn/page.tsx # Churn analysis
│ │ ├── retention/page.tsx # Cohort retention
│ │ ├── growth/page.tsx # Growth metrics
│ │ ├── unit-economics/page.tsx # LTV, CAC, payback
│ │ ├── forecasting/page.tsx # Revenue projections
│ │ ├── funnel/page.tsx # Conversion funnel
│ │ ├── benchmarks/page.tsx # Industry benchmarks
│ │ ├── manage/
│ │ │ ├── subscriptions/page.tsx # Subscription management
│ │ │ ├── plans/page.tsx # Pricing plans
│ │ │ ├── customers/page.tsx # Customer list
│ │ │ ├── customers/[id]/page.tsx # Customer detail
│ │ │ ├── invoices/page.tsx # Invoice management
│ │ │ ├── integrations/page.tsx # Third-party integrations
│ │ │ ├── reports/page.tsx # Report generation
│ │ │ └── alerts/page.tsx # Alert monitoring
│ │ └── settings/
│ │ ├── page.tsx # General settings
│ │ ├── team/page.tsx # Team management
│ │ └── profile/page.tsx # User profile
│ ├── (auth)/ # Authentication
│ │ ├── layout.tsx # Centered card layout
│ │ ├── login/page.tsx
│ │ ├── register/page.tsx
│ │ └── forgot-password/page.tsx
│ ├── page.tsx # Landing page
│ ├── not-found.tsx # 404 page
│ ├── globals.css # Design tokens
│ └── layout.tsx # Root layout
├── components/
│ ├── ui/ # shadcn/ui primitives (~30 components)
│ ├── analytics/ # Analytics composites (2 components)
│ ├── shared/ # Shared composites (4 components)
│ ├── layout/ # Layout components (4 components)
│ └── a11y/ # Accessibility components (2 components)
├── data/
│ └── seed.ts # Mock data (~$127K MRR, 1,284 customers)
├── types/
│ └── index.ts # TypeScript interfaces
├── hooks/
│ ├── use-mobile.ts # Mobile viewport detection
│ ├── use-announce.ts # Screen reader announcements
│ ├── use-focus-trap.ts # Focus trap for modals
│ ├── use-keyboard-navigation.ts # Keyboard nav support
│ └── use-reduced-motion.ts # Reduced motion preference
├── lib/
│ └── utils.ts # cn() utility
└── public/
└── images/ # Static images
Route Groups
| Group |
Layout |
Purpose |
(dashboard) |
AppSidebar + AppHeader |
Analytics, management, and settings pages |
(auth) |
Centered card |
Login, register, forgot password |
The landing page (app/page.tsx) and 404 page (app/not-found.tsx) use standalone layouts outside of both route groups.
The sidebar organizes pages into three sections, matching the navSections array in data/seed.ts:
| Section |
Routes |
Icon Examples |
| Analytics |
/dashboard, /revenue, /customers, /churn, /retention, /growth, /unit-economics, /forecasting, /funnel, /benchmarks |
LayoutDashboard, DollarSign, Users, UserMinus, Repeat, TrendingUp, Calculator, LineChart, Filter, BarChart3 |
| Management |
/manage/customers, /manage/subscriptions, /manage/invoices, /manage/plans, /manage/alerts, /manage/reports, /manage/integrations |
UserCircle, CreditCard, FileText, Package, Bell, FileBarChart, Plug |
| Settings |
/settings, /settings/team, /settings/profile |
Settings, Users, User |
Component Organization
Primitives (components/ui/)
Approximately 30 shadcn/ui components: Accordion, AlertDialog, Avatar, Badge, Breadcrumb, Button, Calendar, Card, Checkbox, Collapsible, Command, Dialog, DropdownMenu, Input, InputGroup, Label, Popover, Progress, RadioGroup, ScrollArea, Select, Separator, Sheet, Slider, Sonner, Switch, Table, Tabs, Textarea, and Tooltip.
Analytics Composites (components/analytics/)
| Component |
Used In |
metric-card |
Unit economics page |
activity-feed |
Dashboard overview |
Shared Composites (components/shared/)
| Component |
Used In |
page-header |
Every dashboard page (title, breadcrumbs, action buttons) |
stat-card |
Dashboard, subscriptions management |
status-badge |
Subscriptions, invoices, customers, alerts, integrations |
empty-state |
Empty filter results, empty tables |
Layout Components (components/layout/)
| Component |
Purpose |
app-header |
Top bar with user menu and theme toggle |
app-sidebar |
Collapsible sidebar with Analytics, Management, and Settings sections |
skip-link |
Accessibility skip-to-content link |
theme-toggle |
Light/dark mode switch |
Accessibility Components (components/a11y/)
| Component |
Purpose |
live-region |
Screen reader announcements for dynamic content |
visually-hidden |
Visually hidden text for assistive technology |
Key Files
| File |
Purpose |
data/seed.ts |
All mock data -- KPIs, revenue history, customers, subscriptions, invoices, plans, alerts, integrations, cohort retention, churn reasons, growth metrics, forecasts, funnel steps, benchmarks, team members, settings |
types/index.ts |
TypeScript interfaces for all domain objects (KpiCard, Customer, Subscription, Invoice, PricingPlan, Alert, Integration, CohortRow, ChurnDataPoint, ForecastDataPoint, BenchmarkMetric, etc.) |
lib/utils.ts |
cn() class name utility |
hooks/use-mobile.ts |
Mobile viewport detection |
app/globals.css |
Design tokens (oklch colors, spacing, typography, animations, accessibility utilities) |