Admin Dashboard

Admin Dashboard

The Admin Dashboard is a centralized administrative interface within the lexwebapp frontend, providing system administrators with real-time monitoring, financial oversight, and infrastructure management capabilities.

System Architecture

The Admin Dashboard operates as a collection of React components that interact with the backend admin API. It utilizes polling and manual refresh to fetch data from administrative endpoints.

Core Data Integration

The dashboard consumes data from multiple backend modules:

• Billing & Revenue: Daily and monthly revenue, profit margins
• User Analytics: Total users, active sessions, tier distributions
• Infrastructure Metrics: CPU, memory, PostgreSQL pool, Redis performance
• Service Health: Status of core services (backend, rada, openreyestr)

Dashboard Modules

1. System Overview

High-level KPIs regarding platform financial and operational status:

• Financial tracking (revenue and profit)
• User metrics (total vs active)
• Tool usage visualization (which MCP tools are most utilized)

2. Infrastructure Monitoring

Technical health of the stack with resource consumption monitoring:

Metric Category	Data Points
Backend Performance	HTTP Status Codes, Route RPS
Database (PG)	Connections, Commit/Rollback, Cache Hit Ratio
Cache (Redis)	Memory, Client Count, Command Rate
System Resources	CPU, Memory
Upload Pipeline	BullMQ Jobs status

3. API Cost Analytics

Tracks costs of calling external AI models and legal APIs:

• Cost extrapolation (per hour/day/month)
• Model breakdown across LLM providers
• Tool-specific cost identification

Technical Implementation

Key UI Components

• ChartCard: Container for recharts responsive containers
• StatCard / KPICard: Single numeric values with icons and trends
• GaugeBar: Percentage-based metrics visualization
• ServiceHealthBar: Service status indicators

The dashboard is built using React with recharts for data visualization, useCallback and useEffect for data consistency.