Dashboard Page

Edit New page System Administrator edited this page today · 1 revision

Dashboard Functionality

The frontend includes a comprehensive dashboard interface featuring:

Core Components

• Dynamic Header Navigation - Logo, navigation links (Home, Dashboard, Public Templates, Settings)
• User Profile Section - Avatar, welcome message with time-based greetings, logout functionality
• Theme Toggle - Dark/light mode switcher with persistent state
• Quick Scan Configuration - Dropdown selectors for API selection and testing profiles
• Statistics Cards - Real-time metrics display (Total APIs, Scans, Security Score, Critical Alerts)
• Recent Activity Table - Sortable table showing scan history with status indicators
• Quick Actions Grid - Shortcut cards for common administrative tasks
• Responsive Footer - Copyright info and essential links

Authentication Integration

• AuthContext Integration - Seamless user authentication state management
• Role based authentication - Added role based user management
• Route Protection - Automatic redirect to login if user not authenticated
• User Session Management - Real-time user data display and logout confirmation
• Loading States - Elegant loading spinner with AT-AT branding

Data Visualization

• Status Indicators - Color-coded badges for scan statuses (Completed, In Progress, Failed)
• Score Visualization - Letter grades with color coding (A-F scale)
• Trend Indicators - Positive/negative change indicators with contextual colors
• Interactive Elements - Clickable cards, buttons, and navigation links

How to Test Dashboard

1. Prerequisites

   • Ensure React development server is running (npm start)
   • Verify AuthContext and ThemeContext are properly configured
   • Confirm user authentication is working

2. Navigation Testing

   • Access dashboard at /dashboard route
   • Verify automatic redirect from / if authenticated
   • Test all navigation links (Home, Dashboard, Public Templates, Settings)
   • Confirm active state highlighting works correctly

3. User Interface Testing

   • Test theme toggle functionality (dark/light mode)
   • Verify user profile displays correct information
   • Test logout confirmation dialog
   • Check responsive behavior on mobile/tablet/desktop

4. Functionality Testing

   • Test API and profile selection dropdowns
   • Verify "Start New Scan" and "Run Scan" buttons
   • Test all quick action links navigation
   • Confirm "Load More Scans" button functionality

5. Data Display Testing

   • Verify statistics cards show correct numbers
   • Check activity table displays scan history
   • Test all "View Report/Details/Progress" links
   • Confirm proper error handling for missing data

Component Architecture

State Management

// AuthContext provides user authentication state
const { currentUser, logout, getUserFullName } = useAuth();

// ThemeContext manages application theming
const { darkMode, toggleDarkMode } = useContext(ThemeContext);

// Router integration for navigation
const navigate = useNavigate();
const location = useLocation();

Key Features

• Conditional Rendering - Loading states and authenticated user checks
• Dynamic Content - Time-based greetings and personalized messages
• Event Handling - Logout confirmation and navigation management
• Accessibility - Proper ARIA labels and semantic HTML structure

Backend Integration Requirements

API Endpoints Needed

• User Data: /api/user/profile - Get current user information
• Dashboard Stats: /api/dashboard/stats - Retrieve key metrics
• Scan History: /api/dashboard/scans - Get recent scan activity
• API Management: /api/apis - CRUD operations for user APIs
• Scan Operations: /api/scans - Start, monitor, and retrieve scan results

MySQLi Database Schema

-- Users table for authentication
CREATE TABLE users (
    id INT PRIMARY KEY AUTO_INCREMENT,
    email VARCHAR(255) UNIQUE NOT NULL,
    firstName VARCHAR(100),
    lastName VARCHAR(100),
    password_hash VARCHAR(255),
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- APIs table for user API management
CREATE TABLE user_apis (
    id INT PRIMARY KEY AUTO_INCREMENT,
    user_id INT,
    name VARCHAR(255) NOT NULL,
    endpoint_url VARCHAR(500),
    description TEXT,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (user_id) REFERENCES users(id)
);

-- Scans table for tracking security assessments
CREATE TABLE scans (
    id INT PRIMARY KEY AUTO_INCREMENT,
    user_id INT,
    api_id INT,
    profile_type VARCHAR(100),
    status ENUM('in-progress', 'completed', 'failed'),
    score VARCHAR(10),
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    completed_at TIMESTAMP NULL,
    FOREIGN KEY (user_id) REFERENCES users(id),
    FOREIGN KEY (api_id) REFERENCES user_apis(id)
);

Security Considerations

• Session Management - Server-side session validation
• CSRF Protection - Token validation for state-changing operations
• SQL Injection Prevention - Parameterized queries with MySQLi
• XSS Protection - Input sanitization and output encoding
• Rate Limiting - API endpoint throttling for scan operations

File Structure

src/
├── components/
│   ├── Dashboard.js           # Main dashboard component
│   ├── App.js                # Theme context provider
│   └── AuthContext.js        # Authentication context
├── styles/
│   ├── Dashboard.css         # Dashboard-specific styles
│   └── globals.css           # Global theme variables
├── utils/
│   ├── api-client.js         # HTTP client for backend calls
│   └── auth-helpers.js       # Authentication utilities
└── hooks/
    ├── useAuth.js            # Authentication hook
    └── useTheme.js           # Theme management hook

backend/
├── api/
│   ├── dashboard/
│   │   ├── stats.php         # Dashboard statistics endpoint
│   │   └── scans.php         # Scan history endpoint
│   ├── user/
│   │   └── profile.php       # User profile endpoint
│   └── auth/
│       ├── login.php         # User authentication
│       └── logout.php        # Session termination
├── config/
│   ├── database.php          # MySQLi connection configuration
│   └── auth.php              # Authentication middleware
└── utils/
    ├── security.php          # Security helper functions
    └── validation.php        # Input validation utilities

Future Work

• Real-time Updates - WebSocket integration for live scan progress
• Advanced Filtering - Search and filter capabilities for scan history
• Data Export - PDF/CSV export functionality for reports
• Dashboard Customization - User-configurable widget layout
• Notification System - Push notifications for scan completion
• Analytics Integration - Advanced metrics and trend analysis
• Mobile App Support - Progressive Web App (PWA) capabilities
• API Documentation - Interactive API explorer integration
• Audit Logging - Comprehensive user action tracking
• Multi-language Support - Internationalization (i18n) implementation

Performance Optimizations

• Code Splitting - Lazy loading for dashboard components
• Memoization - React.memo for expensive re-renders
• Virtual Scrolling - For large scan history tables
• Image Optimization - Lazy loading and WebP format support
• Caching Strategy - Browser and server-side caching implementation
• Bundle Analysis - Regular bundle size monitoring and optimization