Product Grid - Copy this React, Tailwind Component to your project

Design an admin panel in Next.js for user management with the following features: Dashboard Overview: Include a navigation sidebar for easy access to the different CRUD operations. A top navigation bar with the admin profile picture and a logout button. User Management Table: A table that lists users with the following columns: ID, Name, Email, Role, Status, and Actions (Edit, Delete). Include pagination if there are many users. Add a search bar at the top of the table to filter users by name or email. Create User Form: A form with fields to create a new user: Name, Email, Password, Role (dropdown with roles like Admin, User, Editor), and Status (Active/Inactive toggle). Add validation and error messages for required fields. Edit User Form: Similar to the create user form, but pre-populated with the user’s current data and an option to update the user's information. Delete Confirmation Modal: When clicking on delete, show a confirmation modal asking the admin to confirm before deleting the user. Responsive Design: Ensure the layout is responsive, adapting to desktop, tablet, and mobile views. Use Material UI or Tailwind CSS for Styling: Style the admin panel using Material UI components or Tailwind CSS to create a clean and modern design.