Dashboard - COS301-SE-2025/API-Threat-Assessment-Tool GitHub Wiki

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