Styled Paper - Copy this React, Mui Component to your project
**PureCode.ai Prompt for a Jira like Kanban Board UI** "Design a full featured Jira like Kanban board UI component for project and task management. The component should replicate Jira's core functionalities and include the following features: ### 1. **Kanban Board View**: Display columns for different workflow stages (e.g., To Do, In Progress, Done). Allow drag and drop functionality to move tasks between columns. Support dynamic creation, editing, and deletion of columns with customizable names. Display task cards within each column showing key details (e.g., title, assignee, priority, and due date). Provide a count of tasks in each column. ### 2. **Task Details Panel**: When a task card is clicked, show a detailed view of the task in a modal or side panel. Include fields such as: **Title**: Editable task title. **Description**: Rich text editor for detailed task descriptions. **Assignee**: Dropdown to assign the task to a user. **Reporter**: Display who reported the task. **Priority**: Dropdown to select priority (e.g., Low, Medium, High, Critical). **Status**: Dropdown or workflow step selector to change the task's column. **Labels**: Tags for categorizing the task. **Attachments**: File upload functionality. **Comments**: Section for discussion with support for threaded replies. **Due Date**: Date picker for setting deadlines. **Time Tracking**: Log estimated and spent time. **Subtasks**: Ability to create, view, and manage subtasks within the parent task. ### 3. **Task Creation**: Provide a "Create Task" button. Open a modal with a form containing the following fields: Title (required) Description Assignee Priority Labels Attachments Due Date Workflow Stage (default to the first column) Validate form inputs and show success or error messages. ### 4. **Search and Filters**: Add a search bar to find tasks by title or ID. Include advanced filters for assignee, priority, due date, labels, and workflow stage. Allow saving and reusing filter configurations. ### 5. **Customization**: Allow users to customize the board layout, including adding/removing/reordering columns. Enable column width adjustments. Provide theme support (light and dark modes). ### 6. **User and Access Management**: Implement role based access control (RBAC) to restrict task and column editing to authorized users. Display avatars of team members and assign tasks to them. ### 7. **Notifications**: Show in app notifications for task updates, comments, or assignment changes. ### 8. **Responsive Design**: Ensure the UI works seamlessly across all device sizes, including mobile and tablets. ### 9. **Performance Optimization**: Optimize for large datasets with virtualized lists for tasks. Provide loading indicators and smooth transitions. ### 10. **Integration Points**: Support API integration for fetching and updating task data dynamically. Allow webhook configurations for real time updates. ### 11. **Dark Mode**: Provide a toggle for light and dark mode, ensuring full compatibility. ### 12. **Localization**: Support multiple languages, including RTL layouts for languages like Arabic and Hebrew. Use Material UI (MUI) components for the design and ensure the UI is visually appealing, intuitive, and scalable. Include well structured code with appropriate comments and test cases for all features."
