Analytics & Dashboard Insights
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The Analytics & Dashboard Insights system in NEXUS serves as the central "Command Center" for users to monitor their digital footprint. It aggregates data from various modules—Accounts, Emails, and Trials—to provide high-level metrics such as total expenditures, active subscriptions, and security posture.
The system is built on a full-stack architecture using FastAPI for data aggregation and React for glassmorphic visualization. It enables users to make informed decisions about their digital subscriptions by surfacing financial impacts and security risks in real-time.
Sources: backend/server.py:27-30, frontend/src/App.js:231-235
Dashboard Architecture & Data Flow
The dashboard operates by requesting a consolidated statistics object from the backend. The backend queries the MongoDB database, performs aggregations across different collections (users, accounts, trials), and returns a DashboardStats object.
Backend Aggregation Logic
The backend calculates statistics dynamically per request to ensure data accuracy. It specifically tracks:
- Total Accounts: A count of documents in the
accountscollection associated with the user ID. - Monthly Spend: A summation of the
monthly_costfield across all accounts owned by the user. - Active Trials: A count of trials where the
is_cancelledflag is false. - Security Score: A calculated percentage (currently a base placeholder of 75.0%) representing the user's security health.
Sources: backend/server.py:348-372, backend_test.py:339-354
Data Flow Diagram
The following diagram illustrates the flow of analytics data from the database to the user interface.
Data Models & API Specifications
The analytics system relies on specific Pydantic models and REST endpoints to ensure type safety and consistent data structures between the Python backend and JavaScript frontend.
Dashboard Statistics Model
| Field | Type | Description |
|---|---|---|
total_accounts | Integer | Total number of digital accounts registered by the user. |
monthly_spend | Float | The sum of monthly costs for all active paid subscriptions. |
active_trials | Integer | The number of free trials currently in progress and not cancelled. |
security_score | Float | Percentage score indicating security strength (0-100). |
Sources: backend/server.py:168-172, backend_test.py:345-350
API Endpoint Detail
Endpoint: GET /api/dashboard/stats
Authentication: Required (Bearer Token)
Response Structure:
{
"total_accounts": 12,
"monthly_spend": 45.99,
"active_trials": 2,
"security_score": 75.0
}
Sources: backend/server.py:348-372, backend_test.py:345-350
Visual Representation & UI Components
The frontend utilizes a "Cyberpunk-meets-luxury" aesthetic to display analytics. Key UI components include animated stats cards and glassmorphism effects.
UI Components for Insights
- Stats Grid: A responsive CSS grid that houses individual stat cards.
- Stat Cards: Functional components that display an icon, a label, and an animated number.
- Animated Numbers: CSS-driven transitions that provide a "counting" effect when data is loaded.
Sources: frontend/src/App.js:255-295, frontend/src/App.css:576-630
Sequence of Dashboard Loading
Security Metrics & Posture
The "Security Center" within the dashboard provides specialized analytics regarding user safety. While currently utilizing placeholder logic for the overall score, the system tracks specific metrics to be displayed in the overview.
Tracked Security Metrics
- 2FA Adoption: Percentage of accounts with Two-Factor Authentication enabled.
- Password Strength: Identification of weak or reused passwords across the account vault.
- Email Integrity: Monitoring for compromised status in the managed email list.
Sources: frontend/src/App.js:804-835, backend/server.py:369-370
Implementation Styles & Animations
The visual impact of the analytics dashboard is achieved through specific CSS variables and keyframe animations.
| Variable/Animation | Value/Definition | Purpose |
|---|---|---|
--shadow-glow | 0 0 20px rgba(0, 212, 255, 0.3) | Creates the electric blue neon effect on metric cards. |
breathe | scale(1) to scale(1.02) | Slow pulse animation applied to dashboard stats cards. |
glass-card | blur(20px) | Backdrop filter for the luxury "glass" aesthetic. |
Sources: frontend/src/App.css:32-35, frontend/src/App.css:883-886, frontend/src/App.css:585-590
Summary
The Analytics & Dashboard Insights system provides a unified interface for digital asset management. By aggregating data across disparate modules and presenting it through a high-performance, visually striking interface, it serves as the core utility for users to track their financial commitments and security health within the NEXUS ecosystem.
Sources: test_result.md:179-183, frontend/src/App.js:298-305