Task Dashboard - Copy this React, Tailwind Component to your project

Design a highly responsive and user-friendly Dashboard Home Page for a Task Management SaaS App. Use React.js and Tailwind CSS, and include drag-and-drop functionality across all task-related sections using a library like @dnd-kit/core, React DnD, or React Beautiful DnD. 📋 Layout Requirements: 🧱 General Layout: Full-width, full-height dashboard Two primary columns: Left Column: My Work & Personal List Right Column: Agenda, Assigned to Me, Assigned Comments Sticky header for each section All content scrollable and mobile-responsive 🧩 Core Components (with Drag-and-Drop Support): ✅ My Work Panel Tabs: To Do, Done, Delegated Each tab contains grouped task categories: Today Overdue Next Unscheduled Enable drag-and-drop within and between groups (e.g., move a task from “Today” to “Overdue”) 📝 Personal List Task Table view Columns: Name, Assignee, Due Date, Priority, Date Created Support dragging to reorder tasks Drag a task into another group (if grouping is enabled) “+ Add Task” row stays fixed at the bottom 📆 Agenda Panel Tasks shown by selected date (calendar picker) Enable dragging tasks from agenda to other sections (e.g., Personal List or Assigned to Me) 👤 Assigned to Me Grouped by Status: OPEN, COMPLETE, etc. Each group supports drag-and-drop: Drag tasks between statuses Drag to rearrange within a status 💬 Assigned Comments Placeholder for draggable comment cards (optional) 🎨 UI & UX Requirements: Tailwind CSS for styling Rounded cards, light shadows, padding Hover effects and focus rings Notification badges for task count Search, filter, and group options for every section Responsive stacking on mobile Animated transitions during drag 🧑‍💻 Dev Requirements: React functional components State managed via Context API or Redux Drag-and-drop library: Preferably React Beautiful DnD or @dnd-kit Components: TaskCard, TaskGroup, DragDropContainer, Sidebar, Header, SearchBar Easy backend integration with RESTful endpoints and JWT auth