Project View Page (Participant + Organizer + Judge + Admin — Permission-Based)

# 🧠 What are we building?

We are building a **Project View Page** where users can **see and manage projects**.

This page is used by:

* 🧑‍💻 Participants → see their own projects
* 🏢 Organizers → see all projects in their community/events
* ⚖️ Judges → see assigned projects
* 🛡️ Admins → see everything

👉 It is **ONE page**, but behavior changes based on role.

---

# 🎯 Goal

Create a **clean, responsive page** that:

* shows a list of projects
* supports actions (view, edit, delete, score)
* changes UI based on permissions
* works for events, hackathons, workshops

---

# 🧠 Key Idea (IMPORTANT)

```txt
Same Page → Different Role → Different Actions
```

---

# 🏗️ Where will this page be used?

```txt
/participant/projects
/organizer/projects
/community/:id/projects
/event/:id/projects
/judge/projects
/admin/projects
```

👉 Use **one reusable component**, not separate pages.

---

# 📦 Page Layout

```txt
Sidebar
Header (title + actions)
-------------------------
Search + Filters
-------------------------
Project Table
-------------------------
Pagination / Empty State
```

---

# 🔹 Sidebar

Use existing sidebar.

Highlight **Projects** tab.

---

# 🔹 Header

Show:

* Page title:

  * "My Projects" (participant)
  * "Community Projects" (organizer)
  * "Assigned Projects" (judge)

* Button:

  * ➕ Create Project (only for participant)

---

# 🔍 Filters & Search

---

## Search

* search by project name

---

## Filters

* Status:

  * Draft
  * Submitted
  * Approved

* Type:

  * Hackathon
  * Event
  * Workshop

---

## Sort

* Latest (default)
* Oldest
* A → Z

---

# 📊 Project Table

---

## Common Columns (for all)

* Project Name
* Event Name
* Type
* Status
* Last Updated

---

## Extra Columns (based on role)

---

### 🧑‍💻 Participant

* Actions:

  * View
  * Edit (only draft)
  * Delete

---

### 🏢 Organizer

* Extra:

  * Owner Name

* Actions:

  * View
  * Delete

---

### ⚖️ Judge

* Extra:

  * Score

* Actions:

  * View
  * Score

---

### 🛡️ Admin

* Actions:

  * View
  * Delete
  * Suspend

---

# ⚡ Actions (What user can do)

---

## 👁️ View

* open project details page

---

## ✏️ Edit

* only participant
* only draft projects

---

## 🗑️ Delete

* show confirmation modal
* call delete API

---

## ⭐ Score (Judge)

* open modal
* submit score

---

# ⚙️ API

---

## Get Projects

```http
GET /api/v1/projects
```

### Query Example

```txt
?communityId=123
&eventId=456
&status=submitted
&page=1
```

---

## Delete Project

```http
DELETE /api/v1/projects/:id
```

---

## Score Project

```http
POST /api/v1/projects/:id/score
```

---

# 🔐 Permissions (VERY IMPORTANT)

---

## Backend must enforce:

* Participant → only own projects
* Organizer → only their community
* Judge → only assigned
* Admin → all

👉 Do NOT trust frontend role

---

# 🧩 States to Handle

---

## Loading

* show skeleton table

---

## Empty

```
No projects yet
[ Create Project ]
```

---

## No Results

```
No matching projects
```

---

## Error

* show message + retry

---

# 🛡️ Edge Cases

---

* no projects
* only drafts
* delete last project
* API fails
* unauthorized delete

---

# 🎨 UI Requirements

---

* responsive (mobile + desktop)
* clean table layout
* status badges (color)
* action menu (3 dots)
* proper spacing

---

# 🧪 What to test

---

* [ ] participant sees only own projects
* [ ] organizer sees community projects
* [ ] judge sees assigned projects
* [ ] admin sees all projects
* [ ] edit only works for drafts
* [ ] delete works with confirmation
* [ ] filters work
* [ ] search works
* [ ] pagination works

---

# 📂 Suggested File Structure

```txt
/projects
  ├── index.tsx
  ├── components/
  │    ├── ProjectTable.tsx
  │    ├── Filters.tsx
  │    ├── ActionsMenu.tsx
  │    ├── DeleteModal.tsx
  │    └── ScoreModal.tsx
```

---

# 🚀 Future Improvements (Optional)

* bulk delete
* real-time updates
* analytics
* project tags

---

# ✅ Done When

* page works for all roles
* permissions correctly applied
* UI responsive
* API integrated
* no crashes / edge cases handled

---

# 🎯 Priority

🔥 High (Core feature)

---

# 🏁 Final Note

This page is used everywhere in CommDesk.

👉 Keep it:

* simple
* clean
* permission-driven

👉 Focus on:

```
Correct data + correct permissions > fancy UI
```


Project View Page (Participant + Organizer + Judge + Admin — Permission-Based) #19

Description

🧠 What are we building?

🎯 Goal

🧠 Key Idea (IMPORTANT)

🏗️ Where will this page be used?

📦 Page Layout

🔹 Sidebar

🔹 Header

🔍 Filters & Search

Search

Filters

Sort

📊 Project Table

Common Columns (for all)

Extra Columns (based on role)

🧑‍💻 Participant

🏢 Organizer

⚖️ Judge

🛡️ Admin

⚡ Actions (What user can do)

👁️ View

✏️ Edit

🗑️ Delete

⭐ Score (Judge)

⚙️ API

Get Projects

Query Example

Delete Project

Score Project

🔐 Permissions (VERY IMPORTANT)

Backend must enforce:

🧩 States to Handle

Loading

Empty

No Results

Error

🛡️ Edge Cases

🎨 UI Requirements

🧪 What to test

📂 Suggested File Structure

🚀 Future Improvements (Optional)

✅ Done When

🎯 Priority

🏁 Final Note

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions