feat: Introduce staff tasks page with a Kanban board and a dialog for creating and editing tasks

[codeunia-dev]

🚀 Summary

This PR adds a Staff Tasks page featuring a Kanban board to visually manage tasks, along with a reusable Task Dialog for creating and editing staff tasks.

✨ What’s Included

• 🧩 New Staff Tasks page with a Kanban-style board for task tracking
• 🗂️ Columns to represent task states (e.g. Todo, In Progress, Done)
• 🪟 Task Dialog component for:
  • Creating new tasks
  • Editing existing tasks
• 🔁 Smooth state handling for task updates across the board
• 🧹 Clean, modular components for easier future enhancements

🧪 How to Test

1. Navigate to the Staff → Tasks page
2. Create a new task using the Add Task dialog
3. Edit an existing task and verify updates reflect on the Kanban board
4. Move tasks across columns and confirm state changes persist
5. Ensure no regressions in other staff pages

📌 Notes

• No breaking changes
• UI-only changes with a focus on usability and extensibility
• Designed to support future task features (assignees, priorities, deadlines, etc.)

Authored by: @akshay0611

Summary by CodeRabbit

Release Notes

• New Features
  • Introduced "My Tasks" page with a Kanban-style board featuring To Do, In Progress, and Done columns.
  • Added task creation and editing capabilities with title, description, priority levels, and due dates.
  • Tasks can be moved between status columns with real-time updates and optimistic UI feedback.
  • Priority badges and due date display for better task organization.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
codeunia	Ready	Preview, Comment	Dec 19, 2025 0:26am

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

The PR introduces a client-side task management interface for staff, featuring a Kanban-style "My Tasks" page displaying three status columns (To Do, In Progress, Done) and a reusable TaskDialog component for creating and editing tasks. Both integrate with Supabase for data persistence, with optimistic UI updates and error recovery on failed operations.

Changes

Cohort / File(s)	Summary
Task Management Page app/staff/tasks/page.tsx	New Kanban-style page rendering tasks in three status columns; fetches authenticated user's tasks from Supabase with chronological sorting; supports task status updates via optimistic UI with error recovery and re-fetch fallback.
Task Dialog Component components/staff/TaskDialog.tsx	New modal dialog for creating and editing tasks; supports form fields for title, description, priority, and due date with validation; integrates with Supabase for insert and update operations; shows loading states and success/error feedback.

Sequence Diagram

sequenceDiagram
    actor User
    participant Page as MyTasksPage
    participant Auth as useAuth Hook
    participant DB as Supabase
    participant Dialog as TaskDialog
    
    User->>Page: Visit /staff/tasks
    Page->>Auth: Check authentication
    Auth-->>Page: User loaded
    Page->>DB: Fetch user's tasks
    DB-->>Page: Tasks returned
    Page->>Page: Render 3 columns (To Do, In Progress, Done)
    
    User->>Page: Click edit pencil icon
    Page->>Dialog: Open dialog in edit mode
    Dialog->>Dialog: Pre-fill form with task data
    
    User->>Dialog: Submit form changes
    Dialog->>Dialog: Validate & format
    Dialog->>Page: Optimistic update (local state)
    Page->>Page: Re-render updated task
    
    Dialog->>DB: Update task in Supabase
    alt Success
        DB-->>Dialog: Success response
        Dialog->>User: Show success toast
        Dialog->>Dialog: Close dialog
    else Failure
        DB-->>Dialog: Error
        Dialog->>User: Show error toast
        Page->>DB: Re-fetch tasks
        DB-->>Page: Tasks reloaded
        Page->>Page: Revert optimistic update
    end

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Optimistic UI update logic: Verify that the error recovery path correctly re-fetches and reverts state on failed Supabase updates
• Form validation & due date handling: Check normalization of due_date to YYYY-MM-DD and ISO conversion logic
• Supabase client initialization: Ensure stable client instance usage and proper error handling for missing table scenarios
• Task status column logic: Validate the three-column rendering and task filtering by status

Poem

🐰✨ Tasks in columns three, a burrow so neat!
With edits and updates, the workflow's complete,
Optimistic hops forward, or back if they fail—
Our Kanban board hops along the staff trail!

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch staff-admin-tasks

---

📜 Recent review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between bdcd3d5 and 5dbdfc5.

📒 Files selected for processing (2)

• app/staff/tasks/page.tsx (1 hunks)
• components/staff/TaskDialog.tsx (1 hunks)

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}