Feature: Member Event-Based Task System (Permission-Controlled)

[vivek0369]

📌 Overview

This PR introduces a production-grade, permission-driven task management system for community events.
Both organizers and members share the same UI, while all actions and visibility are controlled dynamically through a centralized permission layer.

The system supports event-scoped task workflows, controlled submissions, review moderation, runtime permission management, and responsive navigation updates.

---

✨ Key Features

🔐 Permission System

Implemented a centralized permission architecture using:

• PermissionContext
• usePermissions() hook

Supported Permissions

Permission	Description
CREATE_TASK	Create new tasks
ASSIGN_TASK	Assign tasks to members
UPDATE_STATUS	Approve/reject submissions & update status
EDIT_TASK	Edit existing tasks
DELETE_TASK	Delete tasks
MULTIPLE_SUBMISSION	Allow multiple submissions
LATE_SUBMISSION	Allow submissions after deadline
VIEW_ALL_TASKS	View all event tasks

✅ Permissions can be dynamically granted/revoked at runtime.

---

🧩 Pages Added

📋 Task List Page — /org/tasks

Features

• Permission-based task visibility
• Members only see assigned tasks
• Organizers/admins with VIEW_ALL_TASKS can view all tasks
• Debounced search
• Status filtering
• Priority filtering
• Urgent task row highlighting
• Responsive layout

---

📄 Task Detail Page — /org/tasks/:taskId

Includes

• Full task details
• Submission panel
• Submission history
• Review/approval system
• Comment thread
• Status updater

Permission-Gated Controls

• Review panel → UPDATE_STATUS
• Submission rules → MULTIPLE_SUBMISSION & LATE_SUBMISSION

---

➕ Create Task Page — /org/tasks/create

Features

• Protected route
• Accessible only with CREATE_TASK
• Redirects unauthorized users to task list

---

✏️ Edit Task Page — /org/tasks/:taskId/edit

Features

• Protected route
• Requires EDIT_TASK
• Auto pre-filled form with existing task data

---

🛡️ Submission Enforcement

Implemented strict submission validation logic:

MULTIPLE_SUBMISSION

• Blocks additional submissions if permission is missing

LATE_SUBMISSION

• Prevents submissions after deadline unless permission exists

---

🧱 Common Reusable Components

Added reusable UI utilities:

• StatusBadge
• PriorityBadge
• ConfirmModal
• SkeletonLoader
• EventDropdown

---

📱 Navigation Updates

Sidebar

Added:

• Tasks
• Create Task

✅ Create Task link hidden automatically if user lacks CREATE_TASK

---

Mobile Bottom Navbar

Added:

• Tasks navigation item

---

🛠️ App Integration

Updated App.tsx:

• Added 4 new /org routes
• Wrapped app with PermissionProvider

---

🗂️ Routes Added

Route	Page	Permission Guard
/org/tasks	Task List	—
/org/tasks/create	Create Task	CREATE_TASK
/org/tasks/:taskId	Task Detail	—
/org/tasks/:taskId/edit	Edit Task	EDIT_TASK

---

🏗️ Architecture

src/features/MemberTask/
├── context/
│   └── PermissionContext.tsx
│
├── types/
│   └── task.types.ts
│
├── mock/
│   └── taskMock.ts
│
├── components/
│   ├── common/
│   │   ├── StatusBadge
│   │   ├── PriorityBadge
│   │   ├── ConfirmModal
│   │   └── SkeletonLoader
│   │
│   ├── event/
│   │   └── EventDropdown.tsx
│   │
│   └── task/
│       ├── TaskTable
│       ├── TaskDetail
│       ├── TaskForm
│       ├── SubmissionForm
│       └── CommentSection
│
└── pages/
    ├── TaskListPage
    ├── TaskDetailPage
    ├── CreateTaskPage
    └── EditTaskPage

---

✅ Testing Checklist

• Tasks visible based on VIEW_ALL_TASKS permission
• Create/Edit/Delete actions hidden without permissions
• Submission blocked after deadline without LATE_SUBMISSION
• Second submission blocked without MULTIPLE_SUBMISSION
• Review panel only visible with UPDATE_STATUS
• Unauthorized direct URL access redirects correctly
• Mobile bottom navigation shows Tasks
• Sidebar hides Create Task for unauthorized members

---

🎯 Outcome

This implementation delivers a scalable and reusable permission-controlled task workflow system that supports:

• role-based collaboration
• secure action gating
• flexible submission policies
• responsive event management
• production-ready extensibility

---

🏷️ Labels

nsoc-26 enhancement frontend react permission-system

---

🔗 Related Issue

Closes #24

[gemini-code-assist]

Code Review

This pull request introduces a comprehensive Task Management system, featuring task creation, editing, status tracking, submissions, and a commenting system. It includes a new permission-based access control layer and integrates the feature into the existing application routing and sidebar. Additionally, the PR configures Dependabot and applies security overrides in package.json. Feedback highlights opportunities to improve form validation, ensure robust unique identifier generation, optimize array filtering in the UI, and replace hardcoded user data and locales with dynamic configurations.

[abhishek-nexgen-dev]

@vivek0369

Tasks Page UI Update

Please update the Tasks page UI (http://localhost:1420/org/tasks) to make it more attractive and visually appealing. The current UI does not look good, and the code should be production-ready with a clean and polished design.

Required Updates for the Create Task Page

1. Assign Dropdown with Search

• Implement a functional Assign dropdown with a search feature.
• The admin should be able to search members by their name.
• Each dropdown item should display:
  • Member image
  • Member name
  • Member role

2. Tags Input as Chips

• Do not use comma-separated tags.
• When the admin presses Space or Enter, the tag should be created as a chip.
• Each tag chip should have a different background color.

3. Priority Selection as Chips

• Do not use a dropdown component for priority.
• Display priority options as selectable chips.
• Each priority level should have its own distinct color:

Priority	Color	Hex
Urgent	Red	#FF4C4C
High	Dark Orange	#FF8C00
Medium	Gold / Yellow	#FFD700
Low	Lime Green	#32CD32

Use Built-in Components

• Make sure to use built-in components such as:
  • Input
  • Dropdown
  • Button
  • Other existing reusable UI components

This is important to maintain consistency, reusability, and code quality across the application.

[vivek0369]

@abhishek-nexgen-dev This is Tasks Page UI Update new issue I will create

[abhishek-nexgen-dev]

🚀 Task Management System: UI & UX Enhancements

This document outlines the required UI/UX improvements for the Tasks Page and Create Task Page within the CommDesk application.

1. Tasks Page (/org/tasks)

The current UI is outdated. The following updates are required to make it visually attractive and production-ready:

🎨 Visual Overhaul

• Modern Styling: Improve the overall layout. Use the Team Page as a reference for aesthetic consistency.
• Table Design: Implement proper padding, defined borders, and distinct background colors for table headers to improve readability and visual appeal.
• Consistency: Ensure all inputs and dropdowns use the project's built-in components (Input, Dropdown, Button, etc.).

📅 Advanced Filtering

• Date Range Calendar: Add a calendar icon to the filter bar.
  • Clicking the icon should open a date-picker.
  • Selecting a date range must filter the task list to show only tasks within that period.
• Searchable Event Dropdown: Update the "Select Event" dropdown to include a search input. Use the SearchableDropdown.tsx component to maintain app-wide consistency.

🛠️ Technical Guidelines

• Component Reusability: Strictly use existing project-level built-in components to ensure code maintainability.
• Production-Ready: Ensure all new code is clean, documented, and responsive.

[vivek0369]

@abhishek-nexgen-dev Ok i will create all issue Tomorrow

[abhishek-nexgen-dev]

@vivek0369 Sure i have some moe change's after giving all the Change's You Start working from Tomorror

[vivek0369]

@abhishek-nexgen-dev Please create all the issues and assign them to me afterward.

[abhishek-nexgen-dev]

Sure

[abhishek-nexgen-dev]

🚀 Task View Page: Comprehensive Production-Grade Update

This document outlines the detailed requirements and enhancements needed for the Task View Page to make it fully functional, visually appealing, and production-ready.

---

1. Essential Task Details Display

The Task View Page must include the following fields clearly and prominently:

• Title
• Description
• Event selected by the user
• Priority
• Assigned To (all users assigned to the task, not just one)
• Deadline
• Tags

---

2. Status Dropdown

• Replace the current status dropdown with the built-in component to maintain UI consistency and reusability.

---

3. Assigned To Section

• Show all users assigned to the task, not just one.
• Each assigned user should be displayed as a card containing:
  • User's name
  • User's role
  • User's profile image

---

4. Comments Section

• Comments should be styled like a WhatsApp chat interface, where:
  • The sender’s messages appear on the right side.
  • The receiver’s messages appear on the left side.
• Each comment must include:
  • User’s profile image
  • User’s name
  • Support for React Emoji to allow emoji usage in comments.
• The comment input should allow users to add new comments with emoji support.

---

5. Task Breakdown & Subtasks

• Support breaking down a task into multiple parts or subtasks.
• Each subtask should have:
  • Title
  • Status
  • Description
• Example structure for a hackathon project task:

Subtask Title	Status	Priority	Actions
Build Landing Page	In Progress	High	Edit / Delete

• Subtask details should include:
  • Description text
  • Tags (e.g., frontend, design)
  • Submission status (e.g., approved, pending)
  • Submission dates
  • Review comments and reviewers

---

6. Submission & Review Section

• Allow users to describe their submission or paste a link.
• Provide a Submit Work button.
• Show a list of submissions with:
  • Submission status
  • Submission date
  • Reviewer comments

---

7. Additional Details Section

• Display metadata such as:
  • Assigned To (list of users)
  • Deadline
  • Created Date
  • Update Status dropdown (built-in component)

---

8. UI/UX and Code Quality Guidelines

• Use built-in components for all inputs, dropdowns, buttons, and cards.
• Ensure the UI is responsive, clean, and visually consistent with the rest of the application.
• Follow production-grade coding standards:
  • Clean, maintainable, and well-documented code.
  • Proper state management and performance optimization.
  • Accessibility considerations.

---

[abhishek-nexgen-dev]

Code Quality and Component Naming Guidelines

To ensure the codebase remains maintainable, scalable, and production-grade over the long term, please adhere to the following best practices:

1. Clear and Descriptive Component Names

• Avoid confusing or ambiguous component names.
• Use self-explanatory and intuitive names that clearly describe the component’s purpose and functionality.
• Example: Instead of generic names like Card1 or CompA, use names like UserAssignmentCard, PriorityChip, or SearchableMemberDropdown.
• This improves readability and helps new developers quickly understand the codebase.

2. Focus on Long-Term Code Quality

• Write clean, modular, and reusable components.
• Follow consistent coding standards and naming conventions across the project.
• Ensure components are well-documented with clear comments and prop descriptions.
• Prioritize performance optimization and accessibility.
• Use TypeScript or prop-types for type safety where applicable.

3. Production-Grade Code Practices

• Implement proper error handling and edge case management.
• Write unit and integration tests to cover critical components and logic.
• Keep components small and focused on a single responsibility.
• Avoid deep nesting and complex logic inside components; delegate to helper functions or hooks.
• Use built-in components and shared UI elements to maintain consistency and reduce duplication.