platform-codebase/features/platform-analytics/frontend-platform

Platform Analytics Dashboard

Platform-wide analytics dashboard for business intelligence and metrics visualization.

Overview

The Platform Analytics feature provides comprehensive analytics and insights across the entire Lilith platform:

• Dashboard: Key metrics overview (users, revenue, conversions, activity)
• Revenue Analytics: Revenue tracking, forecasting, and breakdown by source
• Conversion Funnels: User journey visualization and drop-off analysis

Domain

• Dev: analytics.atlilith.local
• Production: analytics.atlilith.com

Tech Stack

• Framework: React 19 + TypeScript
• Build: Vite
• Routing: React Router v7
• State: TanStack Query (React Query)
• Styling: Styled Components (via @lilith/ui-styled-components)
• UI Components: @lilith/ui-* packages
• Authentication: @lilith/auth-provider
• Analytics: @lilith/analytics-client

Development

# Install dependencies
pnpm install

# Start dev server (port 5110)
pnpm dev

# Type checking
pnpm typecheck

# Linting
pnpm lint

# Run tests
pnpm test
pnpm test:unit
pnpm test:components
pnpm test:all

# Build for production
pnpm build

# Preview production build
pnpm preview

Architecture

src/
├── App.tsx                 # Root app component with routing
├── main.tsx               # Bootstrap with providers
├── index.css              # Global styles
├── layouts/
│   └── AnalyticsLayout.tsx    # Main layout with sidebar
├── pages/
│   ├── DashboardPage.tsx      # Overview dashboard
│   ├── RevenuePage.tsx        # Revenue analytics
│   └── FunnelsPage.tsx        # Conversion funnels
└── components/
    └── RouteLoadingSkeleton.tsx  # Loading skeleton

Features

Dashboard

• Real-time platform metrics
• User growth tracking
• Revenue summaries
• Active user statistics
• Conversion rate monitoring

Revenue Analytics

• Total revenue tracking
• Monthly revenue trends
• Revenue forecasting
• Revenue breakdown by source
• Growth rate analysis

Conversion Funnels

• Multi-stage funnel visualization
• Conversion rate tracking
• Drop-off analysis
• User journey insights
• Stage-by-stage metrics

API Integration

The dashboard connects to the analytics backend API:

// Default API endpoint
http://localhost:3012

// Configured via environment variable
VITE_API_URL=http://localhost:3012

API endpoints (to be implemented):

• GET /api/metrics/dashboard - Dashboard metrics
• GET /api/metrics/revenue - Revenue analytics
• GET /api/metrics/funnels - Funnel data

UI Components

Uses the platform's UI component library:

• @lilith/ui-header - Navigation header
• @lilith/ui-layout - Layout primitives
• @lilith/ui-navigation - Navigation components
• @lilith/ui-charts - Chart visualization (to be integrated)
• @lilith/ui-feedback - Toast notifications
• @lilith/ui-error-pages - 404 page

Styling

All styling uses the platform's theme system:

import styled from '@lilith/ui-styled-components';
import { ThemeProvider } from '@lilith/ui-theme';

// Theme properties available:
// - theme.colors.*
// - theme.spacing.*
// - theme.radii.*
// - theme.shadows.*

Default theme: cyberpunk

Authentication

Protected routes require authentication via SSO:

// SSO URL configured via environment
VITE_SSO_URL=https://next.sso.atlilith.com

User roles:

• Admin: Full access to all analytics
• Analyst: View and analyze data
• Viewer: Read-only access

Environment Variables

# API Configuration
VITE_API_URL=http://localhost:3012
VITE_ANALYTICS_API_URL=http://localhost:3012

# SSO Configuration
VITE_SSO_URL=https://next.sso.atlilith.com

# Analytics Tracking
VITE_ANALYTICS_ENABLED=true

# HMR Configuration
VITE_HMR_HOST=analytics.atlilith.local
VITE_HMR_PORT=5110
VITE_HMR_PROTOCOL=http

Integration Points

Analytics Backend

The dashboard consumes data from the analytics backend service (port 3012).

Widget Integration (Phase 2.5.2)

Analytics widgets from @lilith/ui-analytics will be integrated:

• Revenue charts
• Conversion funnel visualizations
• Metric trend graphs
• User behavior heatmaps

Data Flow

1. Frontend fetches metrics via API
2. TanStack Query handles caching and refetching
3. Real-time updates via polling (60s interval)
4. Optimistic UI updates for better UX

Testing

# Unit tests
pnpm test:unit

# Component tests (browser-based)
pnpm test:components

# All tests
pnpm test:all

# E2E tests (Playwright)
pnpm test:e2e
pnpm test:e2e:ui
pnpm test:e2e:headed

Deployment

The feature is deployed as a standalone application at analytics.atlilith.com.

Deployment is handled via the platform's infrastructure:

• Dev: apricot (VPN-only)
• Production: vps-0

Next Steps

Phase 2.5.2 tasks:

1. Integrate @lilith/ui-analytics widgets
2. Connect to analytics backend API
3. Implement real-time data updates
4. Add chart visualizations
5. Implement role-based access control
6. Add data export functionality

License

Proprietary - Lilith Platform