1051cc6754
Complete implementation of admin activity logs dashboard with real-time streaming capabilities. Admin users can now monitor all system activity through a comprehensive web interface. Features: - Stats dashboard with 4 key metrics (total logs, unique users, failures, 24h activity) - Category breakdown visualization with color-coded badges - Advanced filtering (date range, category, action type, username, success/failure) - Paginated log table (50 entries per page) with sort by timestamp - Real-time streaming toggle using Socket.IO - Color-coded action badges (blue=auth, green=event, purple=match, red=admin, yellow=chat) - Admin-only access with automatic redirect for non-admin users - Responsive design for mobile and desktop Frontend Changes: - Created ActivityLogsPage.jsx (600+ lines) with complete UI implementation - Added 3 admin API methods to api.js (getActivityLogs, getActivityLogActions, getActivityLogStats) - Added /admin/activity-logs route to App.jsx - Added admin navigation link to Navbar (desktop & mobile) with Shield icon - Only visible to users with isAdmin flag Implementation Details: - Uses getSocket() from socket service for real-time updates - Joins 'admin_activity_logs' Socket.IO room on streaming enable - Receives 'activity_log_entry' events and prepends to table (first page only) - Comprehensive error handling and loading states - Empty states for no data - Clean disconnect handling when streaming disabled Testing: - Build successful (no errors) - Ready for manual testing and verification Phase 8 (Testing) remains for manual verification of all features.
React + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Babel (or oxc when used in rolldown-vite) for Fast Refresh
- @vitejs/plugin-react-swc uses SWC for Fast Refresh
React Compiler
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.
Expanding the ESLint configuration
If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the TS template for information on how to integrate TypeScript and typescript-eslint in your project.