Admin Dashboard
Relevant source files
The following files were used as context for generating this wiki page:
The Admin Dashboard is a centralized administrative interface within the lexwebapp frontend, designed to provide system administrators with real-time monitoring, financial oversight, and infrastructure management capabilities. It aggregates data from various backend services, including user management, billing systems, and infrastructure metrics, to ensure the health and performance of the Ukrainian legal tech platform.
The dashboard is structured into several specialized views—Overview, Infrastructure, and Billing—each utilizing specialized components and data visualization libraries like recharts to display Key Performance Indicators (KPIs) and system health status.
Sources: lexwebapp/src/pages/AdminOverviewPage.tsx:1-15, lexwebapp/src/pages/AdminInfrastructurePage.tsx:1-10
System Architecture and Data Flow
The Admin Dashboard operates as a collection of React components that interact with a centralized api-client. It utilizes a polling and manual refresh mechanism to fetch data from specialized administrative endpoints.
Core Data Integration
The dashboard consumes data from multiple backend modules, including:
- Billing & Revenue: Tracks daily and monthly revenue, profit margins, and cost per hour.
- User Analytics: Monitors total users, active sessions (30-day window), and tier distributions (Free, Basic, Professional).
- Infrastructure Metrics: Collects Prometheus-style data regarding CPU usage, memory utilization, PostgreSQL pool status, and Redis performance.
- Service Health: Monitors the status of core services such as
backend,rada(parliament data), andopenreyestr(business registry).
Sources: lexwebapp/src/pages/AdminOverviewPage.tsx:55-100, lexwebapp/src/pages/AdminInfrastructurePage.tsx:110-150
Admin Page Data Flow
The following diagram illustrates the flow of data from the administrative API endpoints to the dashboard UI components.
The dashboard employs an fetchAll pattern using useCallback and useEffect to ensure data consistency across multiple chart components.
Sources: lexwebapp/src/pages/AdminOverviewPage.tsx:156-180, lexwebapp/src/pages/AdminInfrastructurePage.tsx:151-180
Dashboard Modules
1. System Overview
The Overview module provides high-level KPIs regarding the platform's financial and operational status. It includes KPI cards for revenue, profit, and request volume.
- Financial Tracking: Displays revenue and profit for "Today" and "This Month".
- User Metrics: Tracks total vs. active users and highlights "Low Balance" alerts for users who may need to top up their accounts.
- Tool Usage: Visualizes which MCP (Model Context Protocol) tools are most utilized via pie charts.
Sources: lexwebapp/src/pages/AdminOverviewPage.tsx:210-250, lexwebapp/src/pages/tests/AdminOverviewPage.test.tsx:30-50
2. Infrastructure Monitoring
The Infrastructure page focuses on the technical health of the stack, utilizing stacked area charts and line graphs to monitor resource consumption.
| Metric Category | Data Points Tracked | Visualization Method |
|---|---|---|
| Backend Performance | HTTP Status Codes (2xx, 3xx, 4xx, 5xx), Route RPS | Stacked Area / Line Chart |
| Database (PG) | Active/Idle Connections, Commit/Rollback Rates, Cache Hit Ratio | Area Chart / Gauge Bar |
| Cache (Redis) | Memory Usage, Client Count, Command Rate, Evicted Keys | Area / Line Chart |
| System Resources | CPU (User, System, IO Wait), Memory (Used, Available) | Gauge Bar / Area Chart |
| Upload Pipeline | BullMQ Jobs (Completed, Active, Waiting, Failed), Queue Depth | Area Chart |
Sources: lexwebapp/src/pages/AdminInfrastructurePage.tsx:185-350, lexwebapp/src/pages/AdminInfrastructurePage.tsx:395-500
3. API Cost Analytics
A specialized section tracks the real-time costs of calling external AI models (OpenAI, Anthropic) and other legal APIs.
- Cost Realtime: Extrapolates "Cost per Hour", "Cost per Day", and "Cost per Month" based on current traffic.
- Model Breakdown: Visualizes cost distribution across different LLM models (e.g., GPT-4o, GPT-4o-mini).
- Tool-specific Costs: Identifies which specific tools (e.g.,
get_legal_advice) are driving the highest API expenses over a 7-day period.
Sources: lexwebapp/src/pages/AdminInfrastructurePage.tsx:360-390, lexwebapp/src/pages/AdminOverviewPage.tsx:390-420
Technical Implementation Details
Key UI Components
The dashboard is built using a modular component pattern:
- ChartCard: A container for
rechartsresponsive containers. - StatCard / KPICard: Specialized components for displaying single numeric values with icons and trend labels.
- GaugeBar: A visual indicator for percentage-based metrics like CPU or memory utilization.
- ServiceHealthBar: A status indicator mapping service jobs (Backend, Rada, OpenReyestr) to their current "Up" or "Down" state based on Prometheus metrics.
Sources: lexwebapp/src/pages/AdminOverviewPage.tsx:105-145, lexwebapp/src/pages/AdminInfrastructurePage.tsx:35-95
API Endpoint Mapping
The dashboard relies on several administrative API endpoints defined in the api.admin namespace:
| Endpoint | Method | Purpose |
|---|---|---|
/admin/overview | GET | Basic KPIs (Revenue, User counts) |
/admin/infrastructure | GET | System resource metrics |
/admin/backend-detail | GET | Detailed HTTP and external API telemetry |
/admin/upload-pipeline | GET | BullMQ job processing statistics |
/admin/cost-realtime | GET | Extrapolated API spending data |
/admin/traffic | GET | Time-series request and error rates |
Sources: lexwebapp/src/pages/AdminOverviewPage.tsx:156-175, lexwebapp/src/pages/AdminInfrastructurePage.tsx:135-150, mcp_backend/src/routes/TEMPLATE_ROUTES_INTEGRATION.md:100-110
Component Interaction Diagram
This sequence diagram shows how the dashboard handles a user-initiated data refresh.
Summary
The Admin Dashboard serves as the operational nerve center for the platform. By integrating technical infrastructure monitoring with financial and user analytics, it allows administrators to maintain system stability and track the ROI of AI-driven legal tools. Its modular design allows for rapid addition of new metrics, such as the planned integration for tracking the "Dynamic Template System" and "Time Tracking & Billing" features.
Sources: lexwebapp/REFACTORING_SUMMARY.md:1-20, IMPLEMENTATION_PHASES.md:10-25