Dashboard & Layout Components
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The NEXUS Dashboard and Layout system provides a cyberpunk-themed, glassmorphic user interface for managing digital accounts, emails, and trial tracking. The layout is structured around a persistent sidebar navigation and a dynamic main content area that adapts based on the user's active context. It utilizes a "Command Center" philosophy, aggregating real-time statistics and administrative actions into a centralized visual hub.
The system relies on a responsive architectural framework that transitions from a side-by-side desktop view to a stacked or hidden-sidebar mobile view. Key visual elements include particle background animations, glassmorphism (via backdrop filters), and high-contrast electric blue accents, all managed through a comprehensive CSS variable system.
Sources: frontend/src/App.js:141-150, frontend/src/App.css:1-50
Core Layout Architecture
The layout is divided into three primary functional zones: the Background Layer, the Navigation Layer (Sidebar), and the Content Layer.
Application Container
The MainApp component serves as the root layout wrapper for authenticated users. It manages the global state for the activeTab and orchestrates the rendering of secondary views.
The application uses a flexbox-based layout where the sidebar is fixed to the left (280px width) and the main content area occupies the remaining horizontal space.
Sources: frontend/src/App.js:844-874, frontend/src/App.css:359-363
Sidebar Navigation
The Sidebar component provides the primary navigation interface. It includes user identity information and a list of navigation items mapped to specific application modules.
| Item | Icon | Description |
|---|---|---|
| Dashboard | ⚡ | Summary of system stats and quick actions |
| Accounts | 🔐 | Management of credentials and platform data |
| Emails | 📧 | Database of used email addresses and security status |
| Trials | 🎯 | Tracking of active and cancelled trial periods |
| Security | 🛡️ | System-wide security posture and recommendations |
Sources: frontend/src/App.js:246-285, frontend/src/App.css:366-435
Dashboard System
The Dashboard (Command Center) is the default landing page. It is composed of a statistics grid and a welcome/quick-action section.
Statistics Grid
The dashboard utilizes a responsive grid (stats-grid) to display four key performance indicators (KPIs) retrieved from the /api/dashboard/stats endpoint.
Each stat-card features a breathing animation and a gradient-filled icon container. Numbers are rendered using the JetBrains Mono font for a technical aesthetic.
Sources: frontend/src/App.js:288-348, frontend/src/App.css:452-498
Visual Components & UI Framework
NEXUS uses a specialized UI library built on Radix UI primitives, modified with cyberpunk styling.
Glassmorphic Cards
The glass-card class is the fundamental building block for the UI. It implements a semi-transparent background with a heavy backdrop blur.
- Background:
rgba(255, 255, 255, 0.05) - Blur:
20px - Border:
1px solid rgba(255, 255, 255, 0.1) - Accent: Top border using
linear-gradient(135deg, #00D4FF, #9D4EDD)
Sources: frontend/src/App.css:101-121
Navigation and Menus
For complex interactions, the system employs advanced layout components from the ui directory:
- Sheet: Used for mobile menus or side-drawers, providing overlays and sliding animations. Sources: frontend/src/components/ui/sheet.jsx:1-120
- Navigation Menu: Supports high-level navigation lists with viewports and indicators. Sources: frontend/src/components/ui/navigation-menu.jsx:1-105
- Scroll Area: Provides custom-styled cyberpunk scrollbars for long lists (e.g., the email management view). Sources: frontend/src/components/ui/scroll-area.jsx:1-43
- Tabs: Used for internal section switching within specific management modules. Sources: frontend/src/components/ui/tabs.jsx:1-48
Data Flow & Integration
The layout components interact with the backend via Axios, typically fetching data upon component mount using useEffect.
Conclusion
The Dashboard and Layout components of NEXUS establish a highly thematic and functional environment for digital asset management. By combining modern React state management with sophisticated CSS animations and Radix UI primitives, the project achieves a distinctive "cyberpunk-meets-luxury" aesthetic without sacrificing technical performance or responsive accessibility.