Admin Panel - Copy this React, Tailwind Component to your project

Design a front end interface for the admin panel of a system that facilitates communication between users, admins, and AI agents. The admin panel should have the following features: 1. Login Page: • Allow admins to securely log in to the system. • Use modern UI components with validations for username/password fields. 2. Main Dashboard: • Display a user list in a sidebar or main table, showing: • Usernames • Status (online/offline) • Last activity timestamp • Number of unread/pending messages directed to the admin. • Include a filter or search bar for quick access to specific users. 3. Message Queue Section: • Highlight any pending messages directed to the admin (from users or AI agents). • Allow admins to respond directly to pending messages without leaving the queue. 4. User Chat History Modal: • When an admin clicks on a user from the list, a modal window should pop up displaying the user’s complete chat history, with: • Conversations separated by threads (user admin, user AI agent). • A distinct visual indicator (e.g., color coding or icons) to differentiate messages sent by the user, admin, or AI agent. • A clear timestamp for each message. • Enable the admin to send a message to the user directly from the modal. 5. Notifications: • Add real time notifications for new messages, with the ability to click on the notification to view the related user or conversation. 6. Design Guidelines: • Follow a clean and modern UI/UX design. • Prioritize accessibility and responsiveness for use on various devices. • Use components that support real time updates (e.g., WebSockets integration). 7. Scalability: • Ensure the interface supports a large number of users efficiently. • Include pagination or infinite scrolling for the user list. Please provide a mockup or detailed component hierarchy for this admin panel, considering usability and ease of navigation for admins managing a high volume of interactions.