Admin Activity Log - Copy this React, Tailwind Component to your project
In-the-context-of-your-business-database-management-system,-develop-a-User-Activity-Log-page-to-allow-administrators-to-track-and-monitor-user-actions-within-the-platform.-This-page-should-help-the-admin-to-maintain-an-audit-trail-of-all-important-user-interactions,-including-tasks,-business-data,-and-user-management-activities.-Functional-Requirements:-Activity-Log-Overview:-Display-a-list-of-recent-activities-performed-by-users-within-the-system,-including:-User-Name-(First-Name,-Last-Name)-Action-(e.g.,-login,-task-creation,-user-update,-business-data-update)-Timestamp-(Date-and-Time-of-the-activity)-IP-Address-(where-the-action-was-performed)-User-Agent-(browser-and-OS-details)-Description-(additional-context-or-data-about-the-action,-such-as-"Updated-business-details"-or-"Assigned-task-to-data-clerk")-Activity-Filters:-Allow-administrators-to-filter-the-activity-log-based-on:-User:-Dropdown-to-select-a-user-and-view-their-specific-activities.-Action:-Dropdown-to-select-the-type-of-action-(e.g.,-task-creation,-user-role-change,-business-record-update).-Date-Range:-Select-a-start-and-end-date-to-filter-activities.-Search-by-Keywords:-Search-logs-by-keywords-related-to-the-action,-user,-or-business.-Pagination:-Display-a-maximum-of-20-log-entries-per-page-for-efficient-browsing.-Allow-navigation-between-pages-with-"Previous"-and-"Next"-buttons.-Display-the-total-number-of-logs-and-the-current-page-number.-Real-Time-Updates:-Automatically-update-the-activity-log-in-real-time-to-reflect-the-latest-user-actions,-ensuring-admins-always-have-access-to-the-most-recent-logs.-Log-Actions:-User-Management:-Capture-user-actions-such-as-registration,-profile-updates,-password-changes,-and-role-changes.-Task-Management:-Log-task-assignments,-task-completions,-updates,-and-deletions-(e.g.,-"Assigned-task-to-department-user"-or-"Completed-task-for-data-entry").-Business-Data-Updates:-Log-all-actions-related-to-updating-business-information,-including-additions-and-deletions.-System-Events:-Track-system-level-actions,-including-login-attempts,-errors,-and-warning-notifications-related-to-data-access-or-security.-Backend-Integration:-Store-all-activity-log-entries-in-a-MySQL-database,-with-relevant-details-(user-ID,-action-type,-timestamp,-IP-address,-and-additional-context).-Implement-a-RESTful-API-endpoint-to-fetch-activity-log-entries,-with-filtering,-searching,-and-pagination-features.-Log-Entry-Detail:-Allow-administrators-to-click-on-a-log-entry-to-view-full-details,-including-additional-metadata-(e.g.,-the-specific-business-record-modified,-task-assigned,-etc.).-Security:-Ensure-that-the-User-Activity-Log-page-is-accessible-only-to-admin-users.-Protect-access-to-activity-logs-with-proper-authentication-and-authorization-(e.g.,-JWT-tokens-for-admins).-Log-unauthorized-access-attempts-and-monitor-admin-user-activity.-Export-Functionality:-Provide-an-export-option-(CSV/PDF)-for-administrators-to-download-and-review-the-activity-logs-offline.-Error-Handling:-Display-friendly-error-messages-if-fetching-the-logs-fails-or-if-there-are-issues-with-filtering-or-searching.-Include-a-loading-indicator-when-activity-logs-are-being-fetched-from-the-server.-Responsive-Design:-Ensure-the-activity-log-page-is-mobile-friendly-and-responsive,-using-Tailwind-CSS-for-a-modern-and-consistent-design-across-devices.
