AS
Atif Shahzad

Styled Table Cell - Copy this React, Mui Component to your project

**Prompt for User Management Component** "Design a comprehensive User Management component for a web application. The component should include the following features: 1. **User List View**: Display a paginated table of users showing details such as user ID, name, email, role, account status (active/inactive), and the date the account was created. Include options to sort and filter users by name, role, and account status. 2. **User Detail View**: When a user is selected from the list, display their complete profile details in a separate section or modal. This should include personal information, roles/permissions, and account activity logs. 3. **Add New User**: Provide a form to add a new user with fields for name, email, password, role assignment, and optional profile picture upload. Validate form inputs before submission. 4. **Edit User**: Allow administrators to edit existing user details, such as changing roles, updating personal information, or resetting passwords. 5. **Role Management**: Include a feature to manage roles and permissions. Display a list of available roles with descriptions and allow administrators to add, edit, or delete roles. 6. **Account Status Toggle**: Allow administrators to activate or deactivate user accounts directly from the list view or detail view. 7. **Search and Filter**: Add a search bar to quickly locate users by name or email. Include advanced filters for role, account status, and registration date. 8. **Bulk Actions**: Enable bulk actions such as deleting multiple users, assigning roles, or toggling account status for selected users. 9. **Activity Logs**: Display a log of recent activities (e.g., login attempts, role changes, or account updates) for each user, visible in the user detail view. 10. **Responsive Design**: Ensure the component is fully responsive and works seamlessly on devices of all sizes. 11. **Access Control**: Restrict certain features (e.g., role editing, account deactivation) to users with appropriate admin privileges. Implement role based access control (RBAC). 12. **Error Handling and Notifications**: Display user friendly error messages for failed actions (e.g., "Email already exists") and show success notifications for actions like "User added successfully." 13. **Dark Mode Support**: Ensure compatibility with both light and dark themes. Use Material UI for the UI components and ensure the design is clean and intuitive. Optimize the component for maintainability and scalability, and include test cases for all major functionalities."

Prompt
Component Preview

About

StyledTableCell - Display user data with sorting, filtering, and pagination. Built with React and MUI for responsive design. Copy now for free!

Share

Last updated 1 month ago