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:
@@ -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 };
|
||||
|
||||
Reference in New Issue
Block a user