platform-codebase/features/analytics/frontend-admin

Analytics Frontend Admin

Platform admin analytics pages for Lilith Platform.

Overview

This package provides comprehensive analytics pages for platform administrators:

• Revenue Analytics - Track total revenue, MRR, one-time revenue, crypto revenue
• Transactions - View and filter all platform transactions
• P&L Statement - Profit & loss reporting with reserve tracking
• Costs - Cost breakdown, budget tracking, optimization suggestions
• Real-Time - Live metrics, active users, revenue per minute
• Performance - API performance, response times, uptime monitoring
• Error Tracking - Error metrics, recent errors, resolution tracking
• Conversion Funnels - Conversion rates, funnel visualization
• Bounce Rate - Session analytics, page-level bounce rates
• A/B Testing - Active tests, results, significance tracking

Structure

frontend-admin/
├── src/
│   ├── api/           # API types and interfaces
│   ├── hooks/         # React Query hooks
│   └── pages/         # Analytics page components
├── package.json
└── tsconfig.json

Usage

import { RevenuePage, TransactionsPage, PnLPage } from '@lilith/analytics-frontend-admin';

// Use in routing configuration
<Route path="/admin/analytics/revenue" element={<RevenuePage />} />
<Route path="/admin/analytics/transactions" element={<TransactionsPage />} />
<Route path="/admin/analytics/pnl" element={<PnLPage />} />

Dependencies

• @tanstack/react-query - Server state management
• @transquinnftw/ui-analytics - Analytics UI components
• @transquinnftw/ui-charts - Chart components
• @transquinnftw/ui-primitives - Base UI primitives
• @transquinnftw/ui-typography - Typography components

Pages

RevenuePage

• Total revenue, MRR, one-time, crypto
• Revenue trends over time
• Breakdown by source and provider
• Export capabilities

TransactionsPage

• Transaction list with filtering
• Search by ID, creator, subscriber
• Status and type filters
• Transaction details modal

PnLPage

• Revenue and cost breakdown
• Gross profit, net profit, EBITDA
• Reserve fund progress tracking
• Historical comparisons

CostsPage

• Cost metrics and trends
• Budget vs actual comparison
• Category and type breakdown
• Optimization suggestions

RealTimePage

• Active users and creators
• Live transactions feed
• Revenue per minute
• System load and response time

PerformancePage

• Response time percentiles (p50, p95, p99)
• Requests per second
• Error rate and uptime
• Endpoint-level metrics

ErrorTrackingPage

• Error counts and rates
• Critical error alerts
• Error breakdown by type
• Recent errors table

ConversionFunnelsPage

• Overall conversion rate
• Funnel stage visualization
• Conversion by source
• Time to conversion metrics

BounceRatePage

• Overall bounce rate
• Session duration
• Pages per session
• Page-level bounce rates

ABTestingPage

• Active and completed tests
• Conversion rates A/B
• Statistical significance
• Winner declaration

API Integration

All pages use React Query hooks that fetch from /api/analytics/analytics/* endpoints.

Example:

const { data, isLoading, isError } = useRevenueMetrics();

Hooks automatically handle:

• Loading states
• Error handling
• Data caching
• Auto-refetch (real-time metrics)

Development

# Install dependencies
pnpm install

# Type check
pnpm typecheck

# Lint
pnpm lint

Migration Source

Migrated from @egirl/platform-admin/pages/analytics/ with the following changes:

• Updated imports from @egirl/* to @transquinnftw/* and @lilith/*
• Aligned API types with analytics backend
• Maintained all functionality and test data-testids
• Preserved component structure and behavior

Testing

All pages include data-testid attributes for E2E testing:

• loading-spinner - Loading state
• error-message - Error state
• Page-specific testids for KPIs, filters, charts, tables

Notes

• Pages currently use placeholder charts (to be replaced with actual chart components)
• Real-time pages auto-refresh every 5 seconds
• All currency formatting uses en-US locale
• Export functionality placeholders included