Task Management - Copy this React, Tailwind Component to your project

Develop a User Activity Log page using Next.js, Tailwind CSS, and MySQL to track and display user activities within the application. This page should allow administrators to view detailed logs of actions performed by users and should include filtering and pagination features for easier navigation. The log should help monitor security, identify unusual behavior, and maintain an audit trail of user actions. Functional Requirements: Activity Log Overview: Display a list of recent activities performed by users, including: User Name (First Name, Last Name) Action (e.g., login, profile update, password change, etc.) Timestamp (Date and Time of the activity) IP Address (where the action was performed) User Agent (browser and operating system details) Description (additional details or context about the action) Activity Filters: Allow administrators to filter the activity log based on: User: Dropdown to select a user and view their activities. Action: Dropdown to select the type of action (e.g., login, update, delete). Date Range: Select a start and end date to filter activities performed within a specific period. Search by Keywords: Search for logs by keywords (e.g., specific action or user). Pagination: Implement pagination for the activity log to display a limited number of entries per page (e.g., 20 entries per page). Allow navigation between pages with "Previous" and "Next" buttons. Display the total number of logs available and the current page number. Real-Time Updates: Automatically update the activity log in real-time or at regular intervals without needing to refresh the page, to ensure administrators can view the latest activities. Log Actions: Capture the following actions in the log: User Login and Logout: Record login attempts, successful logins, and logouts. Profile Updates: Track changes made to user profiles (e.g., updating name, email, password). Password Changes: Log all changes to user passwords. User Permissions/Role Changes: Track when user roles or permissions are modified. System Errors/Warnings: Log critical system errors or warnings that require attention. Backend Integration: Store activity log data in a MySQL database, ensuring that each entry contains relevant details such as user ID, action, timestamp, IP address, and additional context. Implement a RESTful API to fetch activity log entries with filtering, searching, and pagination capabilities. Ensure secure access to the activity logs so that only authorized users (e.g., admins) can view the log. Log Entry Detail: Allow administrators to view detailed information about each log entry, including the full description and any additional metadata (e.g., user role or affected data). Security: Ensure that the activity log page is accessible only to authorized users (e.g., admin role). Use proper authentication (e.g., JWT) to ensure secure access control. Log any unauthorized access attempts and monitor the activity of admin users. Export Functionality: Provide an option to export the activity log to a CSV or PDF format for further analysis or reporting. Error Handling: Display user-friendly error messages for failed attempts to fetch logs or apply filters. Include a loading spinner or indicator when the activity log is being fetched or updated. Responsive Design: The activity log page should be responsive, with a layout that adapts well on both desktop and mobile devices. Use Tailwind CSS to create a clean, modern design with intuitive navigation and controls. Non-Functional Requirements: Performance: Ensure that the page can handle large activity logs efficiently, with quick load times and smooth pagination even when there are thousands of records. Optimize queries on the server side to minimize delays when fetching log entries, especially with filtering and searching enabled. Usability: The page should be easy to navigate, with clear options for filtering, searching, and pagination. The design should allow administrators to quickly find specific log entries and analyze the actions performed by users. Scalability: The log system should be designed to scale with increasing numbers of users and activities, ensuring that it continues to perform well as the system grows. Security: Ensure that activity log data is protected against unauthorized access, ensuring the integrity of the logs. Logs should also be stored securely in the database. Use HTTPS for secure communication between the frontend and backend. Data Integrity: Ensure the logs are tamper-proof and that once a log entry is created, it cannot be modified or deleted without appropriate authorization (e.g., admin audit). Consistency: Ensure that the activity log page follows the same visual design and styling as other pages within the admin dashboard, ensuring a consistent user experience throughout the application.