Neeraj Display List of Current Tasks

[Neeraj-Kondaveeti]

Description

Phase 4: Display List of Current Tasks to Students (WIP NEERAJ)
Implements the student Tasks experience per Figma: a filterable, grouped list of tasks with key metadata and a detail page. Adds CSS Modules and dark-mode styling to all new pages in scope.

Result:
Students can view their assigned tasks in an organized layout and filter/group by:
-Subject
-Topic difficulty color (learning level)
-Activity grouping
-Teaching/Life strategies
Note on data scope: This PR is frontend only with mock data.

Related PRS (if any):

N/A - Only frontend for now
…

Main changes explained:

-Created StudentTasks.jsx and StudentTasks.module.css for the tasks list with filtering, grouping, sorting, rubric modal, and accessibility.
-Added TaskCard.jsx to render each task card and handle navigation to details and rubric opening.
-Added RubricModal.jsx as an accessible grading rubric modal with overlay/Escape close.
-Created TaskDetails.jsx and TaskDetails.module.css with header, pie chart (Recharts), dual progress bars, dropdowns, and notes area.
-Implemented CSS Modules dark mode
…

How to test:

1. check into current branch
2. do npm install and ... to run this PR locally
3. Clear site data/cache
4. log as admin user
5. go to the URL: http://localhost:5173/educationportal/dashboard
6. Dashboard → Tasks (Open: http://localhost:5173/educationportal/dashboard)
7. Click View all tasks → navigates to the tasks page.
8. Tasks page (spec URL & app URL)
   -Spec URL (redirects to app path): http://localhost:5173/student/tasks
   -App path: http://localhost:5173/educationportal/student/tasks
9. Verify:
   -Filters (All/Incomplete/Submitted/Graded) change the list.
   -Group by (Subject/Color/Activity Group/Strategy) re-groups; first group opens; expand/collapse works.
   -Each card shows name, due date, subject, color level, progress.
10. Rubric & navigation
    -Click View Grading Rubric on a card → modal opens; overlay/Escape closes.
    -Click a card header/body → details page.

Screenshots or videos of changes:

Note:

The mockData is being used to verify the UI as the backend is not yet implemented.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	54a848c
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6941f56292339300085732de
😎 Deploy Preview	https://deploy-preview-4246--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[sonarqubecloud]

Quality Gate passed

Issues
4 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[Aswin20010]

Student Tasks page and supporting components (StudentTasks, TaskCard, RubricModal, TaskDetails) function as intended. Filters, grouping, modal behavior, and navigation all work smoothly. Dark mode styling and layout match design specs. Frontend implementation is stable and aligns with Figma requirements.

[beblicarl]

Student Tasks page and supporting components (StudentTasks, TaskCard, RubricModal, TaskDetails) function as intended on both light and dark mode

[sonarqubecloud]

Quality Gate passed

Issues
4 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[one-community]

Thank you all, merging!

[Rajasrivatsansrinivasan]

Reviewed PR #4246 by Neeraj. Checked out the branch locally and tested the student tasks flow from the education dashboard. Verified that the Tasks page loads correctly, filters and grouping options are available, task cards display the expected metadata, the grading rubric modal opens correctly, and clicking a task opens the details page with the expected chart and progress sections. No issues were observed during testing. Approving.