🚀 [Frontend] Organizer Event-Based Task Management System

[abhishek-nexgen-dev]

Build a complete, scalable, production-ready Event-Based Task Management System for organizers in CommDesk.

This module powers:

• Hackathons
• Workshops
• Events
• Internal community work

Organizers must be able to:

• Select an event
• Create & assign tasks
• Manage and filter tasks
• Review submissions
• Track progress and performance

---

🧠 Core Architecture (Must Follow)

Event → Tasks → Submissions → Review → Progress

👉 Every task MUST belong to an event
👉 No global tasks allowed

---

🎯 Product Goals

• Zero confusion UI (clear hierarchy)
• Fast task management workflow
• Real-time feel (smooth UX)
• Scalable for large events (1000+ users)
• Clean developer-friendly architecture

---

🧭 Complete Organizer Flow

1. Open Task Management Page
2. Select Event from dropdown
3. View all tasks for that event
4. Apply filters (Upcoming / Past / Completed / Status / Member)
5. Create new task
6. Assign to members/teams
7. Open task → review submissions
8. Approve / Reject / Score
9. Edit / update / delete task

---

🧩 Pages & Routes

---

1. 📋 Task Management Page (Main)

Route: /organizer/tasks

---

🔹 Top Section

Event Selector (Critical Component)

• Dropdown: List of all events

• Supports:

  • Searchable dropdown
  • Async loading
  • Default selection (last used event)

Behavior:

• On change → refetch tasks
• Persist selected event (localStorage)

---

🔹 Filters Bar

Filters:

• Status:

  • All / Todo / In Progress / Completed

• Time-Based:

  • Upcoming (deadline > today)
  • Past (deadline < today)
  • Completed

• Member Filter (multi-select)

• Priority Filter

• Search (debounced)

---

🔹 Task Table

Columns:

• Task Title

• Assigned To (avatar + name)

• Status (badge)

• Priority

• Deadline (relative + exact)

• Submission Status:

  • Not Submitted
  • Submitted
  • Reviewed

• Last Updated

• Actions

---

🔹 Actions:

• View
• Edit
• Delete (with confirmation modal)

---

🔹 States:

• Loading → Skeleton UI
• No Event → “Select an event to view tasks”
• Empty → “No tasks found”
• Error → Retry UI

---

➕ 2. Create / Assign Task Page

Route: /organizer/tasks/create

---

🔹 Form Design

Fields:

• Event (dropdown) ✅ REQUIRED

• Task Title

• Description (rich editor optional)

• Assign To:

  • Member OR Team (multi-select)

• Deadline (date-time picker)

• Priority:

  • Low / Medium / High

• Submission Type:

  • File / GitHub / Both

• Max Submissions (optional)

• Attachments

---

🔹 Advanced Options (Collapsible Section)

• Is Mandatory (checkbox)
• Points (for hackathons)
• Allow Late Submission (toggle)

---

🔹 UX Behavior:

• Disable submit while loading
• Inline validation errors
• Success → toast + redirect with eventId preserved

---

🔍 3. Task Detail Page

Route: /organizer/tasks/:taskId

---

🔹 Layout Sections

A. Task Info Card

• Title
• Description
• Event Name (with link)
• Assigned users
• Deadline
• Priority + Status badges

---

B. Submission Panel

Show:

• List of all submissions

• Each submission:

  • User
  • File / GitHub link
  • Notes
  • Timestamp

Controls:

• Filter submissions
• Sort latest/oldest

---

C. Review Panel (Organizer Actions)

• Approve / Reject
• Give Score (if enabled)
• Add Feedback
• Change Task Status

---

D. Activity Timeline

• Task created
• Updated
• Submission events
• Review events

---

E. Comments Section

• Threaded comments
• @mentions support (optional)

---

✏️ 4. Edit Task Page

Route: /organizer/tasks/:taskId/edit

• Pre-filled form
• Same UI as Create
• Update API integration

---

🧱 Component Architecture

components/
  event/
    EventDropdown.jsx

  task/
    TaskTable.jsx
    TaskRow.jsx
    TaskFilters.jsx
    TaskForm.jsx
    TaskDetail.jsx
    TaskHeader.jsx

  submission/
    SubmissionList.jsx
    SubmissionCard.jsx
    ReviewPanel.jsx

  common/
    StatusBadge.jsx
    PriorityBadge.jsx
    EmptyState.jsx
    SkeletonLoader.jsx
    ConfirmModal.jsx

---

🔄 State Management

Use: React Query (TanStack Query)

Required State:

• selectedEventId (persisted)
• tasks (event-scoped)
• filters
• taskDetails
• submissions

---

🌐 API Contracts

// Events
GET /api/activities

// Tasks (event-based)
GET /api/tasks?eventId=&status=&time=&priority=&member=&search=
POST /api/tasks
GET /api/tasks/:id
PATCH /api/tasks/:id
DELETE /api/tasks/:id

// Submissions
GET /api/tasks/:id/submissions
PATCH /api/submissions/:id (review/score)

---

🎨 UI/UX Guidelines

🔹 Visual Hierarchy

• Always show:
  👉 “Tasks for: [Event Name]”

🔹 Color System

• Completed → Green
• In Progress → Yellow
• Todo → Gray
• High Priority → Red

🔹 Interaction Rules

• Row click → open detail
• Delete → confirmation modal
• Filters → instant update

---

⚠️ Edge Cases

• No events → show onboarding state
• Event deleted → fallback UI
• Large data → pagination / infinite scroll
• Multiple submissions → show latest + history
• Deadline passed → highlight red

---

⚡ Performance Strategy

• Debounce search (300ms)
• Cache tasks per event
• Optimistic UI updates
• Lazy load heavy components (editor, leaderboard)

---

🔐 Access Control

• Only organizer/admin allowed
• Unauthorized → redirect

---

🧪 Testing Checklist

• Event dropdown works
• Task list updates on event change
• Filters work correctly
• Create task works with validation
• Edit/update/delete works
• Submissions visible & review works
• Responsive design (mobile + desktop)
• Error states handled

---

📱 Responsiveness

• Mobile:

  • Convert table → card layout

• Tablet:

  • Compact table

• Desktop:

  • Full table view

---

🚀 Future Enhancements (Not in Scope but Design for It)

• Kanban board (drag & drop)
• Real-time updates (WebSockets)
• AI task suggestions
• Auto reminders
• Leaderboard integration

✅ Acceptance Criteria

• Organizer can select event
• Tasks are always tied to selected event
• Full CRUD operations working
• Filters (Upcoming / Past / Completed / Status / Member) working
• Submissions visible and reviewable
• UI is clean, responsive, production-ready