feat(admin): implement activity logs frontend page (Phase 6-7)

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.
This commit is contained in:
Radosław Gierwiało
2025-12-02 23:17:19 +01:00
parent 08845704cf
commit 1051cc6754
5 changed files with 608 additions and 14 deletions

View File

@@ -465,6 +465,33 @@ export const adminAPI = {
const data = await fetchAPI(`/admin/events/${slug}/matching-runs/${runId}/suggestions?${params.toString()}`);
return data;
},
// Activity Logs API
async getActivityLogs({ startDate, endDate, action, category, username, userId, success, limit = 100, offset = 0 } = {}) {
const params = new URLSearchParams();
if (startDate) params.append('startDate', startDate);
if (endDate) params.append('endDate', endDate);
if (action) params.append('action', action);
if (category) params.append('category', category);
if (username) params.append('username', username);
if (userId) params.append('userId', String(userId));
if (success !== undefined) params.append('success', String(success));
params.append('limit', String(limit));
params.append('offset', String(offset));
const data = await fetchAPI(`/admin/activity-logs?${params.toString()}`);
return data.data;
},
async getActivityLogActions() {
const data = await fetchAPI('/admin/activity-logs/actions');
return data.data;
},
async getActivityLogStats() {
const data = await fetchAPI('/admin/activity-logs/stats');
return data.data;
},
};
export { ApiError };