Amaan taking over for Juhitha-Reddy Add PM dashboard for resource and certification management

[Juhitha-Reddy]

Description

This PR implements the Phase 4 – Resource Management Dashboard (Project Manager View), providing a unified interface for project managers to review, filter, and manage teacher resource requests and educator certifications. This includes new UI components, improved routing, filters, data export functionality, and accessibility updates.
Implements: Phase 4 – Resource Management Dashboard (Project Manager View)

Related PRs (if any):

This is a frontend-only PR.
Backend integration will follow in a separate PR once the API endpoints for resource requests and certifications are implemented.

Main changes explained:

•	Create PMResourceDashboard.jsx – main dashboard component with tab navigation.
•	Create ResourceRequestsTab.jsx – table view with filters, search, and approve/deny actions.
•	Create CertificationsTab.jsx – table with certification status, expiry tracking, and CSV export.
•	Create PMResourceDashboard.module.css – styling with dark mode and responsive layout support.
•	Create index.js under PMDashboard for barrel exports.
•	Update routing (routes.jsx) to add protected route /pm/dashboard/resources for Manager/Owner/Admin roles.
•	Fix duplicate state declaration in Header.jsx causing build issue.
•	Fix accessibility warnings by adding htmlFor and id pairs to all filter inputs.

How to test:

1.	Check into the current branch: feature/pm-resource-dashboard.
2.	Run npm install and npm start to load the PR locally.
3.	Clear browser site data/cache.
4.	Log in as an Administrator, Owner, or Manager.
5.	Navigate to: /pm/dashboard/resources.
6.	Verify Resource Requests tab:
•	Table loads mock data.
•	Filters work: Status, Teacher ID, Search.
•	Approve/Deny buttons update the status badge.
•	Priority and status badges display correct colors.
7.	Verify Certifications tab:
•	Certifications grid loads mock data.
•	Filters work for Active, Expiring Soon, Expired.
•	CSV export generates a file with visible certification data.
8.	Verify dark mode styling: all tables, text, and badges render correctly in dark mode.
9.	Verify responsive layout across desktop, tablet, and mobile.
10.	Log in as a non-privileged role (Volunteer) and confirm access is blocked.

Screenshots or videos of changes:

Uploading Screen Recording 2025-11-29 at 1.07.43 PM.mov…

Note:
• Current implementation uses mock data. Backend API endpoints will be implemented in a future PR.
• The dashboard is keyboard-navigable and passes required accessibility checks.
• Compatible with Chrome, Firefox, and Safari.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	8e11c7b
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6a6a23745186c20008f6e0d1
😎 Deploy Preview	https://deploy-preview-4517--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

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

[sonarqubecloud]

Quality Gate passed

Issues
7 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

[rohanrastogi311]

All functionality has been tested, including CSV export. All buttons also worked. Nicely done. Approved.

[Anusha-Gali]

Hi Juhitha,

I have reviewed your PR locally and have two issues to point out:

• In dark mode, we are not able to see the title of the tabs we have selected.
• I am able to see the webpage even from a volunteer account when it is mentioned that the access is blocked.

**Issue 1** **Issue 2**

[Anusha-Gali]

Hi Juhitha,

Thanks for fixing the issue - the dark mode issue if fixed and even the access too.

[rohanrastogi311]

Hi Juhitha,

Well done with this implementation.

[Anusha-Gali]

Hi Juhitha,

Reviewed your PR again upon jae's request. All functionalities do work as per requirement. However the CSS appears to be broken again for the selection of Resource Requests and Certifications tab in dark mode, as you can see the text is not visible again.

[rajanidi1999]

Hi,
I have reviewed the PR locally and verified that it is working as expected. The Resource Management Dashboard loads correctly, and the filtering, search functionality, and action buttons (Approve/Deny) are functioning properly. The UI looks consistent and user-friendly, and overall the implementation is solid. Good job!

[rajanidi1999]

Hi,
I have tested your PR locally its successfully executed

[rithika-paii]

Hi Juhitha,
I reviewed PR #4517 and tested the Resource Management Dashboard locally. The overall functionality works as expected, including tab navigation and rendering of the dashboard content. However, I found one UI issue in dark mode:

In dark mode, the text/icon for the active tab becomes difficult to see. For example, the active tab label is not clearly visible, whereas in light mode, both Certifications and Resource Requests are clearly readable. (See attached video)

PR.4517-.Changes.mov

[sonarqubecloud]

Quality Gate passed

Issues
10 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

[shree-vaths]

I tested this PR #4517 on local.
Testing account - DevAdminManShree [Manager]

Passing Scenarios -

1.The uri pm/dashboard/resources is redirecting to correct page.
2.The page has both resource request and certification tabs.
3.The mock data are showing up in both tabs.
4.Resource requests are getting correctly filtered by status and teacher id.
5.Approve/Deny buttons update the status badge.
6.Priority and status badges display correct colors.
7.Certifications are getting correctly filtered by status and teacher id.
8.The functionality is working fine for both light and dark mode.
9.CSV is downloaded with correct data.

Issues -

1.The search is not working properly in both resource request and certification. Even though search word is REQ and CERT, valid rows such as REQ001 and CERT001 are missing from search results.

[HemanthNidamanuru]

Hi Juhitha,

I tested this PR locally on the feature/pm-resource-dashboard branch.

The Resource Requests tab, status filters, Approve/Deny buttons, priority/status badges, Certifications tab, certification filters, CSV export, dark mode, responsive layout, and access restriction for non-privileged users are working fine.

One issue I noticed is that the Search functionality is not working as expected

[AmaanSyed09]

Resolved the merge conflict with the latest development branch and re-tested the Resource Management Dashboard to verify the feature is working correctly. The branch has been updated with the latest changes.

[AmaanSyed09]

Addressed the reviewer feedback regarding the search functionality by updating the general search in both the Resource Requests and Certifications tabs to include the displayed Request ID and Certification ID, while keeping the dedicated Teacher ID search unchanged.
Verified the following after the fix:

• Searching by Request ID (e.g., REQ001) returns the correct request.
• Searching by partial Request ID (e.g., REQ) returns all matching requests.
• Searching by Certification ID (e.g., CERT001) returns the correct certification.
• Searching by partial Certification ID (e.g., CERT) returns all matching certifications.
• Searching by teacher name, resource type, certification type, and certifying body continues to work as expected.
• Teacher ID filtering continues to work through the dedicated Teacher ID search field.
• Status filters, Clear Filters, Approve/Deny actions, CSV export, dark mode, and responsive layout continue to function correctly after the changes.
  The branch has been updated with the latest development changes, the reviewer feedback has been addressed, and the PR is ready for re-review.

[kzou55]

Hi Amaan,

I ran and tested the PR locally.

Verified

• Resource Requests

  • Table Loads Mock Data

    

  • Filters work

    • Status
    
    • Teacher ID
    - Search

  • Approving/Denying works
    

  • Priority and Status shows the correct color

• Certification Tab

  • Mock Data present
  - Filters for Active, Expiring Soon, Expired - CSV

• Going to pm/dashboard/resources on roles that aren't allowed causes the user to redirect to the dashboard page.

Issues

1. Dark Mode needs improvement for "Showing X of N requests/certificates"

   

2. Dark Mode needs improvment when hovering over requests/certificates

   

[DeepighaJ]

• Tested the PR locally. Filters works fine
• Volunteer login: when tried to access /pm/dashboard/resources it navigates to dashboard page and no access to Resource management as expected.
• The search issue is still not fixed in both the tabs. Tried search REQ001. but no results were loaded.

[AmaanSyed09]

HI @DeepighaJ, test using admin/Owner permissions.

[AmaanSyed09]

Addressed the requested review comments:

1. Improved the dark mode readability of the "Showing X of N requests/certifications" summary text.
2. Fixed the table hover behavior so only data rows receive the hover effect, the header no longer highlights, and the hover state is consistent across all rows in both the Resource Requests and Certifications tables.
3. Re-verified the search functionality in both tabs. Searches such as REQ001, REQ003, CERT004, and partial searches are working correctly.

Tested the changes in Safari. Ready for re-review.

[AmaanSyed09]

PR.4517.demo.mov

[akv-iu]

Hi, tested this locally on feature/pm-resource-dashboard and everything works as expected, with one small exception noted below.

Environment

• Checked out feature/pm-resource-dashboard, ran npm install and npm start
• Cleared browser site data before testing
• Tested across Administrator, Owner, Manager, and Volunteer roles

Verified:

• The dashboard loads correctly at /pm/dashboard/resources.
• On the Resource Requests tab:
  • The table loads mock data.
  • The Status and Teacher ID filters both work.
  • Approve/Deny correctly updates the status badge with the right colors for priority and status.
• On the Certifications tab:
  • The grid loads mock data.
  • The Active, Expiring Soon, and Expired filters all work.
  • CSV export generates a file with the visible certification data.
• Dark mode renders correctly across all tables, text, and badges.
• The layout holds up well across desktop, tablet, and mobile devices.
• Logging in as a Volunteer correctly blocks access to the dashboard.

One thing worth a look:

• The search box only matches on teacher name, Teacher ID, resource type, description. searching by request ID doesn't return any results. I do have admin access on my account.

[iAbhi001]

Tested this locally on feature/pm-resource-dashboard after clearing browser data, running npm install and npm start, and validating across Administrator, Owner, Manager, and Volunteer roles. Overall, everything works as expected: the dashboard loads properly at /pm/dashboard/resources, dark mode renders cleanly across all elements, and the layout holds up well on desktop, tablet, and mobile. The Resource Requests tab populates mock data, filters correctly by Status and Teacher ID, and updates status badges with appropriate priority and status colors upon approval or denial. On the Certifications tab, mock data populates the grid, the Active, Expiring Soon, and Expired filters function properly, and the CSV export correctly downloads visible certification data. Role-based access control is also working, as logging in as a Volunteer successfully blocks access to the page. The only thing worth taking a look at is the search bar—while logged in as an Admin, it matches on teacher name, Teacher ID, resource type, and description, but searching by Request ID returns no results.

[AmaanSyed09]

Hi @iAbhi001 @akv-iu
I re-tested this on the current branch and wasn't able to reproduce the issue. Searching by Request ID works as expected, including partial Request ID searches (e.g. REQ) as well as specific IDs such as REQ001, REQ002, and REQ003. While reviewing this, I also improved the search by normalizing whitespace during ID comparisons, so searches such as REQ001 , REQ001, and REQ 001 now also return the expected results. If you're still seeing different behavior, could you let me know?

PR.4517.demo.mov

[sonarqubecloud]

Quality Gate passed

Issues
1 New issue
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

[AmaanSyed09]

Addressed the remaining issues.

Resolved the remaining SonarCloud warnings by replacing the deprecated DOM removal method with link.remove(), making the tab label spacing explicit in JSX, improving the tab text colors to meet accessibility contrast requirements, and removing a redundant stylesheet import from the Reports page.

Tested the Resource Management Dashboard and Reports page to verify the CSV download still works, the tab labels and styling display correctly in both light and dark modes, and the Reports page continues to render as expected after removing the duplicate import.

Ready for re-review.

[iAbhi001]

Hi @AmaanSyed09,

I re-tested PR #4517 locally on the feature/pm-resource-dashboard branch across Administrator, Manager, and Volunteer roles.

Testing & Verification Highlights:

• Search Functionality: Tested searching by Request ID (REQ001, REQ) and Certification ID (CERT001, CERT). Exact matching, partial matching, and whitespace normalization (e.g. REQ001) all return expected records. Standard text searches also function correctly.
• CSV Export: Clicked "Export Summary" on the Certifications tab and confirmed the downloaded CSV contains complete data rows along with the header columns.
• Dark Mode UI: Verified that active/inactive tab titles, table summary text ("Showing X of N..."), and hover states render clearly with proper contrast. Table headers no longer highlight on hover.
• Role-Based Access Control: Verified that privileged roles can access /pm/dashboard/resources while non-privileged accounts (Volunteer) are properly blocked and redirected.

Everything is working smoothly and all previous review feedback has been addressed. Approved!

[DeepighaJ]

• Tested the PR locally. The search issues were resolved now.
• The Resource Requests tab loads the mock data successfully, and the Status, Teacher ID, and Search filters work as expected.
• Approve/Deny actions correctly update the corresponding status badges, and the priority/status badges display the appropriate colors.
• The Certifications tab loads the mock data correctly, the Active, Expiring Soon, and Expired filters function as expected, and the CSV export generates a file containing the certification data.
• Dark mode styling is maintained across tables, text, and badges, and the layout is responsive on desktop, tablet, and mobile viewports.
• Verified that logging in as a non-privileged (Volunteer) user correctly blocks access. All tested functionality works as expected and previous behavior is preserved.