Feat(UI): Kanban Boards like board view

[narainkarthikv]

We need to implement a Kanban board-style view for managing tasks with different columns (e.g., "To-Do", "In Progress", "Completed"). Each task should be draggable between columns and can have specific actions, such as checking, holding, editing, and deleting.

Tasks

• Kanban Columns: Create three columns for the board: "To-Do", "Held", and "Checked".
• Draggable Tasks: Enable drag-and-drop functionality to move tasks between columns.
• Task Cards: Each task should be represented as a card within the column with a title, content, and actions.
• Task Actions: Implement task actions within a "MoreVert" menu that includes:
  • Edit Task: Allow the user to edit the task title and content.
  • Check Task: Mark the task as checked and move it to the "Checked" column.
  • Hold Task: Mark the task as held and move it to the "Held" column.
  • Delete Task: Remove the task from the board.
• Popover Menu: Create a popover for each task with the action buttons mentioned above.
• Snackbar Notifications: Add a Snackbar to show notifications when actions are performed on a task.
• UI Styling: Ensure the Kanban board has an attractive and responsive layout. Use Material-UI for components and ensure usability on mobile screens.
• Filter Tasks: Implement a search or filter feature to filter tasks by title or content.

Acceptance Criteria

1. UI Layout: The Kanban board should have three distinct columns and each task should be represented with a card.
2. Draggable Tasks: Tasks should be draggable between columns with smooth animations.
3. Task Actions: The task card should display a popover menu with options for editing, checking, holding, and deleting tasks.
4. Notifications: A Snackbar should display a message when tasks are checked, held, or deleted.
5. Responsiveness: The UI should be responsive and look good on mobile and desktop.

Additional Notes

• Use Material-UI for components like cards, icons, buttons, and popovers.
• Ensure proper state management with React and Recoil for task and UI updates.

Related Issues

• None (this is a new feature)

[AvulaRamSwaroop]

Can you assign me this

[narainkarthikv]

Can you assign me this

Hi @AvulaRamSwaroop,

I've pushed the Kanban board-style view for the BoardList component. Could you work on adding functionalities such as placing the VertIcon at the top-right corner of each board, implementing the save functionality for boards, and ensuring that board creation is handled via the useItemUtils component?