Pulse Analytics — SaaS Telemetry & Revenue Command Center

Pulse Analytics is a high-density, real-time SaaS intelligence dashboard designed for executives, product leaders, and engineering teams. It combines continuous telemetry ingestion, financial velocity modeling, cohort retention heatmaps, conversion funnel diagnostics, and interactive "What-If" growth simulations into a unified command center.

---

🚀 Key Features & Modules

1. Executive KPI Command Center

• Total Revenue / MRR: Dynamic monthly recurring revenue tracking with real-time percentage deltas, ARR run-rate projections, and historic sparklines.
• Active Users & Engagement: Real-time Daily Active Users (DAU) and Monthly Active Users (MAU) ratios, average session duration, and active user velocity.
• Unit Economics & Health:
  • NRR (Net Revenue Retention): 114.2% benchmark gauge.
  • LTV:CAC Ratio: 13.1x capital efficiency multiplier.
  • Quick Ratio & Rule of 40: Real-time SaaS growth vs. burn health indicators.

2. Live Telemetry & Revenue Trajectory (P1–P15)

• Visual Trajectory Spectrum: Interactive bar chart plotting real-time telemetry segments with active streaming pulses and volume indicators.
• Multi-Mode Analytics Switcher:
  • Trajectory View: Segmented time slice bars highlighting throughput spikes.
  • Revenue & Users Curve: Composed dual-axis gradient area chart correlating financial ARR growth with active user load.
  • Latency & Cluster Throughput: Microsecond API response times and request rate telemetry.

3. MRR Dynamics & Waterfall Explorer

• Revenue Waterfall: Detailed breakdown of New MRR, Expansion MRR, Churned MRR, Contraction, and resulting Net New MRR.
• Subscription Tier Distribution: Revenue distribution across Starter, Pro, Team, and Enterprise accounts.
• Interactive Views: Switch between stacked waterfall bars and continuous trajectory flow curves.

4. Product-Led Conversion Funnel

• 5-Stage Progression:
  1. Website Visitors (100k)
  2. Free Trial Signups (24.5k — 24.5%)
  3. Onboarding Completed (14.2k — 58.0%)
  4. Paid Subscription (3.84k — 27.0%)
  5. Enterprise Upgrade (768 — 20.0%)
• Stage Diagnostics & AI Recommendations: Actionable UX and pricing insights mapped to critical drop-off points.

5. Longitudinal Cohort Retention Matrix

• 8-Month Retention Heatmap: Interactive retention matrix tracking user cohort decay from Month 0 through Month 7.
• Metric Toggles: Switch between retention percentages (%) and raw user counts (#).
• Dynamic Heatmap Palette: Micro-contrast color mapping highlighting retention health above industry benchmarks (>80%).

6. Simulated Real-Time Event Stream

• Continuous Ingestion Engine: Live simulated WebSocket stream capturing billing charges, API spikes, authentication events, downgrades, and enterprise upgrades.
• Stream Controls:
  • Variable speed toggles (1x, 2x, 5x).
  • Pause / Resume streaming.
  • Category filters (Revenue, Auth, API, System, Churn).
  • Manual event emission simulator.
• Event Inspector Drawer: Slide-over panel displaying raw JSON payloads, request headers, IP geolocations, and stack trace metadata.

7. Geographic & Client Analytics

• Global Market Share: Revenue and active users grouped by country with localized conversion efficiency.
• Client Topology: Interactive donut visualizations for Operating Systems (macOS, Windows, Linux, iOS, Android) and Browser engines.

8. Infrastructure & Microservice Health

• Service Mesh Status: Real-time status indicators for Authentication Service, Payment Gateway, Telemetry Ingest Pipeline, Analytics Cache Engine, and PostgreSQL Replica Pool.
• Latency Percentiles: Gauges for p50 (24ms), p95 (84ms), and p99 (142ms) latency metrics.
• Incident Audit Log: Operational log of resolved incidents and failover events.

9. Customer Ledger & Profile Drawer

• Searchable Ledger: Multi-column sorting, filtering by tier/status, and pagination.
• Customer Drawer: Detailed customer view showing lifetime value (LTV), health score, organization info, and ingestion quota utilization.

10. "What-If" Executive Growth Simulator

• Interactive Financial Modeling:
  • Price increase sensitivity slider (0% to +50%).
  • Churn reduction lever (0% to -4.0%).
  • Inbound lead & trial velocity multiplier (0% to +100%).
• Dynamic 12-Month Projection: Real-time recalculated ARR trajectory curve comparing baseline run-rate with modeled upside.

11. Command Palette & Multi-Format Exporter

• Global Search (Cmd+K / Ctrl+K): Rapid search across customers, invoices, real-time events, and dashboard sections.
• Data Exporter: Download formatted CSV transaction ledgers, raw telemetry JSON payloads, or trigger printable PDF reports.

---

🛠️ Tech Stack & Architecture

• Framework: React 19 + TypeScript + Vite
• Styling: Tailwind CSS v4 (Clean dark-mode command center theme)
• Data Visualization: Recharts (Custom area curves, bar charts, composed waterfalls, donut gauges)
• Icons: Lucide React
• Animations & Transitions: Motion
• Architecture: Modular React components, normalized state management, client-side live streaming simulator, and responsive layouts.

---

📁 Directory Structure

├── metadata.json                    # Application metadata & permissions
├── package.json                     # Dependencies & build scripts
├── vite.config.ts                   # Vite configuration with Tailwind plugin
├── src/
│   ├── main.tsx                     # React application entry point
│   ├── App.tsx                      # Main dashboard layout & state hub
│   ├── index.css                    # Tailwind CSS v4 styling & fonts
│   ├── types.ts                     # TypeScript definitions for metrics, events, and ledgers
│   ├── data/
│   │   └── mockData.ts              # Mathematical generators & initial mock datasets
│   └── components/
│       ├── Navbar.tsx               # Top command bar, time slicing, status ping
│       ├── ExecutiveKpiGrid.tsx     # Top KPI metric cards with sparklines
│       ├── LiveTelemetryChart.tsx   # P1-P15 trajectory & multi-view charts
│       ├── RevenueBreakdownChart.tsx# MRR waterfall & tier distribution
│       ├── ConversionFunnel.tsx     # 5-stage funnel & drop-off diagnostics
│       ├── RetentionCohortHeatmap.tsx# Cohort retention matrix
│       ├── LiveEventStream.tsx      # Real-time event log with filters
│       ├── GeoAndDeviceAnalytics.tsx# Geographic & client breakdown
│       ├── InfrastructureMonitor.tsx# Microservice latency & cluster health
│       ├── CustomerTransactionsTable.tsx# Audit ledger with pagination
│       ├── EventDrawer.tsx          # Raw JSON event inspector
│       ├── CustomerDetailDrawer.tsx # Customer profile & LTV drawer
│       ├── WhatIfScenarioModal.tsx  # Interactive growth & pricing simulator
│       ├── ExportModal.tsx          # CSV / JSON / PDF exporter
│       └── GlobalSearchModal.tsx    # Cmd+K command palette

---

⌨️ Keyboard Shortcuts

Shortcut	Action
Cmd + K / Ctrl + K	Open Global Command Palette
ESC	Close any active modal or slide-over drawer

---

🚦 Available Scripts

• npm run dev — Starts the development server on http://localhost:3000
• npm run build — Compiles and bundles static production assets to dist/
• npm run lint — Validates TypeScript types across the codebase

pulse-analytics