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:
@@ -18,6 +18,7 @@ import RatePartnerPage from './pages/RatePartnerPage';
|
||||
import HistoryPage from './pages/HistoryPage';
|
||||
import ProfilePage from './pages/ProfilePage';
|
||||
import PublicProfilePage from './pages/PublicProfilePage';
|
||||
import ActivityLogsPage from './pages/admin/ActivityLogsPage';
|
||||
import VerificationBanner from './components/common/VerificationBanner';
|
||||
import InstallPWA from './components/pwa/InstallPWA';
|
||||
|
||||
@@ -199,6 +200,16 @@ function App() {
|
||||
}
|
||||
/>
|
||||
|
||||
{/* Admin Routes */}
|
||||
<Route
|
||||
path="/admin/activity-logs"
|
||||
element={
|
||||
<ProtectedRoute>
|
||||
<ActivityLogsPage />
|
||||
</ProtectedRoute>
|
||||
}
|
||||
/>
|
||||
|
||||
{/* Public Profile - must be before home route */}
|
||||
<Route
|
||||
path="/:username"
|
||||
|
||||
Reference in New Issue
Block a user