🚀 Member Event-Based Task System (Permission-Controlled)

[abhishek-nexgen-dev]

This project is a production-grade Member Task System where members operate with organizer-level capabilities, controlled via a permission-based system.

✨ Features

• Event-based task management
• Permission-driven UI & actions
• Full task lifecycle:

Create → Assign → Submit → Review → Update

• Shared UI across roles (Organizer & Member)

---

🧠 Core Philosophy

Same UI for everyone → Different capabilities via permissions

• ❌ No restricted/limited UI for members
• ✅ One powerful system controlled via permissions

---

🧠 Architecture

Sidebar → Event → Tasks → Submissions → Review → Progress

---

🔐 Permission System

Default Permissions (All Members)

• View assigned tasks
• View task details
• Submit work
• Comment

---

Advanced Permissions (Organizer-Controlled)

Permission	Description
CREATE_TASK	Create new tasks
ASSIGN_TASK	Assign tasks to others
UPDATE_STATUS	Update task status
EDIT_TASK	Edit tasks
DELETE_TASK	Delete tasks
MULTIPLE_SUBMISSION	Allow multiple submissions
LATE_SUBMISSION	Allow late submissions
VIEW_ALL_TASKS	View all event tasks

---

🧭 Feature Flow

1. Select Event
2. View tasks (assigned OR all based on permission)
3. Create task (if allowed)
4. Assign task (if allowed)
5. Submit work
6. Review tasks (if allowed)
7. Edit / delete tasks (if allowed)

---

🧱 Layout Structure

<MainLayout>
  <SideBar />
  <Content />
</MainLayout>

📂 Sidebar

Default Routes

SideBar.tsx

/member/dashboard

/member/tasks

Permission-Based Rendering

if (permissions.includes("CREATE_TASK")) {
  show("Create Task");
}

if (permissions.includes("VIEW_ALL_TASKS")) {
  show("All Tasks");
}

Requirements

• Active route highlighting

• Responsive (mobile drawer)

• Collapsible

• Permission-aware UI

---

📄 Pages & Features

📋 Task List Page

Route: /member/tasks

Behavior

if (permissions.includes("VIEW_ALL_TASKS")) {

fetchAllTasks();

} else {

fetchAssignedTasks();

}

Filters

• Status (Todo / In Progress / Completed)

• Time (Upcoming / Past)

• Priority

• Member (if allowed)

• Search (debounced)

Actions

Action	Permission
View	Default
Edit	EDIT_TASK
Delete	DELETE_TASK

---

🔍 Task Detail Page

Route: /member/tasks/:taskId

Submission Rules

if (!permissions.includes("MULTIPLE_SUBMISSION")) {
  restrictSingleSubmission();
}
if (deadlinePassed && !permissions.includes("LATE_SUBMISSION")) {

disableSubmission();

}

Sections

• Task Info

• Submission Panel

• Submission History

• Status Update (if allowed)

• Comments

• Review Panel (if allowed)

---

➕ Create Task

Route: /member/tasks/create

if (!permissions.includes("CREATE_TASK")) {

redirect("/member/tasks");

}

---

✏️ Edit Task

if (!permissions.includes("EDIT_TASK")) {

blockAccess();

}

---

🗑️ Delete Task

if (!permissions.includes("DELETE_TASK")) {

blockAction();

}

---

🧱 Component Structure

components/

layout/

SideBar.tsx

MainLayout.tsx

event/

EventDropdown.jsx
task/

TaskTable.jsx

TaskDetail.jsx

TaskForm.jsx

SubmissionForm.jsx

CommentSection.jsx
common/

StatusBadge.jsx

PriorityBadge.jsx

ConfirmModal.jsx

SkeletonLoader.jsx

---

🔄 State Management

Library: React Query (TanStack Query)

State

• selectedEventId

• tasks

• taskDetails

• submissions

• permissions

---

🌐 API

GET /api/tasks?eventId=&assignedTo=me

POST /api/tasks

PATCH /api/tasks/:id

DELETE /api/tasks/:id

POST /api/tasks/:id/submissions

POST /api/tasks/:id/comments

---

🎨 UI/UX Guidelines

• Same UI as organizer

• Only actions differ

• Hide restricted features

• Highlight urgent tasks

---

⚠️ Edge Cases

• No event selected

• No tasks available

• Deadline passed

• Permission changes dynamically

• Direct URL access without permission

---

⚡ Performance

• Cache tasks per event

• Debounced search

• Lazy loading

---

🔐 Security

• Validate permissions on frontend

• Backend must enforce RBAC

---

🧪 Testing Checklist

Permissions

• Actions visible only if allowed

• Create/Edit/Delete protected

Functional

• Task CRUD works

• Submission flow works

• Filters work

UI

• Responsive design

• Loading states

• Error handling

---

🚀 Implementation Plan

• Phase 1: Layout + Sidebar

• Phase 2: Task List + Filters

• Phase 3: Task Detail + Submission

• Phase 4: Permission System

• Phase 5: Create/Edit/Delete

• Phase 6: Final Polish

---

✅ Acceptance Criteria

• Shared UI across roles

• Permissions fully enforced

• No unauthorized access

• Clean, responsive UX

---

🏁 Final Note

This is a role-flexible system design:

• Organizer → Full control

• Member → Controlled power

Both operate on the same UI, enabling scalability and consistency.

If this still breaks when you paste somewhere, tell me where (VS Code, GitHub, Notion, etc.)—the fix depends on the tool.