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
-
Prerequisites
- Ensure React development server is running (
npm start
) - Verify AuthContext and ThemeContext are properly configured
- Confirm user authentication is working
- Ensure React development server is running (
-
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
- Access dashboard at
-
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
-
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
-
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