Skip to content

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

Open
Juhitha-Reddy wants to merge 22 commits into
developmentfrom
feature/pm-resource-dashboard
Open

Amaan taking over for Juhitha-Reddy Add PM dashboard for resource and certification management#4517
Juhitha-Reddy wants to merge 22 commits into
developmentfrom
feature/pm-resource-dashboard

Conversation

@Juhitha-Reddy

@Juhitha-Reddy Juhitha-Reddy commented Dec 6, 2025

Copy link
Copy Markdown
Contributor

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)

image

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

netlify Bot commented Dec 6, 2025

Copy link
Copy Markdown

Deploy Preview for highestgoodnetwork-dev ready!

Name Link
🔨 Latest commit 6991a7c
🔍 Latest deploy log https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6a87300d8d0cee0008eb62ab
😎 Deploy Preview https://deploy-preview-4517--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile
Toggle QR Code...

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.

@Juhitha-Reddy Juhitha-Reddy changed the title Add PM dashboard for resource and certification management Juhitha Add PM dashboard for resource and certification management Dec 6, 2025
@sonarqubecloud

sonarqubecloud Bot commented Dec 6, 2025

Copy link
Copy Markdown

@one-community one-community added the High Priority - Please Review First This is an important PR we'd like to get merged as soon as possible label Dec 19, 2025

@rohanrastogi311 rohanrastogi311 left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All functionality has been tested, including CSV export. All buttons also worked. Nicely done. Approved.
PR 4517 Screenshot 2
PR 4517 Screenshot 3
PR4517 Screenshot

@Anusha-Gali Anusha-Gali left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.
Screenshot 2025-12-27 at 12 39 18 AM **Issue 1** Screenshot 2025-12-27 at 12 39 29 AM Screenshot 2025-12-27 at 12 40 01 AM Screenshot 2025-12-27 at 12 40 07 AM Screenshot 2025-12-27 at 12 40 37 AM Screenshot 2025-12-27 at 12 40 47 AM Screenshot 2025-12-27 at 12 41 05 AM Screenshot 2025-12-27 at 12 41 22 AM Screenshot 2025-12-27 at 12 41 44 AM **Issue 2** Screenshot 2025-12-27 at 12 43 52 AM Screenshot 2025-12-27 at 12 44 05 AM

Anusha-Gali
Anusha-Gali previously approved these changes Mar 11, 2026

@Anusha-Gali Anusha-Gali left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi Juhitha,

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

Image

@rohanrastogi311 rohanrastogi311 left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi Juhitha,

Well done with this implementation.

Image

@Anusha-Gali Anusha-Gali left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Image Image

rajanidi1999
rajanidi1999 previously approved these changes Apr 13, 2026

@rajanidi1999 rajanidi1999 left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Copy Markdown

Hi,
I have tested your PR locally its successfully executed
Screenshot 2026-04-13 152126
Screenshot 2026-04-13 152351

@rithika-paii rithika-paii left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Copy Markdown

@AmaanSyed09

Copy link
Copy Markdown
Contributor

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

@AmaanSyed09

Copy link
Copy Markdown
Contributor

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 iAbhi001 self-assigned this Jul 30, 2026
@iAbhi001
iAbhi001 self-requested a review July 30, 2026 19:03
iAbhi001
iAbhi001 previously approved these changes Jul 30, 2026

@iAbhi001 iAbhi001 left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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!

Image Image Image Image

DeepighaJ
DeepighaJ previously approved these changes Jul 31, 2026

@DeepighaJ DeepighaJ left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • 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.
Image Image Image Image Image Image

@AdiDubbs AdiDubbs left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The dashboard itself looks good, and I can see from the thread it's been tested thoroughly.

I am requesting changes for something outside it though: the :global change to reportsPage.module.css breaks the existing Reports page, since those class names are no longer exported and the styles[...] lookups return undefined. I have attached screenshots in a comment.

I have also flagged the Skills permission reuse and an unrelated mock data file.

@media screen and (width <= 1200px) {
.category-data-container {
grid-template-columns: 1fr;
:global {

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wrapping this file in :global stops the class names being exported by the module, but Reports.jsx and ReportTableSearchPanel.jsx read them as styles['category-container'], styles['card-category-item'] etc - so those come back undefined and the Reports page loses its styling. I have attached comparison screenshots of /reports on development vs this branch.

This file also seems to be unrelated to the PM dashboard - maybe it should be in a separate PR.

Development Branch

Image

PR Specific Branch

Image

Comment thread src/routes.jsx Outdated
component={PMResourceDashboard}
fallback
allowedRoles={[UserRole.Administrator, UserRole.Owner, UserRole.Manager]}
routePermissions={RoutePermissions.accessHgnSkillsDashboard}

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

accessHgnSkillsDashboard is also used by the HGN Skills routes. Since
ProtectedRoute treats allowedRoles and routePermissions as alternative ways to grant access, a non-PM user holding that permission can reach this dashboard too.

Is that intended? If this should be limited to the stated PM roles, it needs its own permission key and a test for that case.

@@ -0,0 +1,53 @@
// Helper function to generate dates relative to now

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is new mock data for ApplicationTimeChart, but that chart doesn't import it and it's unrelated to the resource/certification dashboard. Is it meant to be in this PR?

@AmaanSyed09
AmaanSyed09 dismissed stale reviews from DeepighaJ and iAbhi001 via 43fbc42 August 5, 2026 16:55
@AmaanSyed09

Copy link
Copy Markdown
Contributor

Hi @AdiDubbs
I addressed the remaining issues.

Investigated the Reports page styling issue and confirmed it originated from changes introduced by the previous PR owner. The Reports stylesheet had been wrapped in a broad :global block, which prevented the CSS Module class names from being exported and caused the existing Reports page styling to no longer be applied correctly. Updated the stylesheet to restore the expected CSS Module behavior by keeping only the selectors that genuinely require global scope while preserving the Reports page classes as module-scoped. Also fixed the Dark Mode "Select a Category" text color so it remains clearly visible in both Light Mode and Dark Mode. Additionally, investigated the unused src/components/ApplicationTimeChart/data.js file, confirmed it had been added by the previous PR owner, verified that it was not referenced anywhere in the codebase, and removed it from the PR.

Verified the Reports page locally in both Light Mode and Dark Mode and confirmed the layout now matches the current development branch. Confirmed the PM Resource Dashboard remains unaffected by these changes, verified the stylesheet passes the project's linting requirements, and confirmed removing the unused mock data file does not affect any functionality.

I also investigated the remaining route permission comment and confirmed the reported behavior is part of the previous implementation and predates my takeover. I verified that there is currently no dedicated permission available for the PM Resource Dashboard. I'm not sure whether this should be addressed as part of this PR since it appears to require a separate permission-model decision, so no changes were made for this.

Ready for re-review.

@AdiDubbs AdiDubbs left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the turnaround. I verified the Reports fixes: the broad :global wrapper is gone, the module class names export again, and the unused data.js file was removed.

I am still requesting changes for three dashboard issues: certification status can contradict the expiry text and make the Expired filter miss expired records; date-only values render a day early in timezones west of UTC; and the tab controls are mouse-only because they render as anchors without href.

On the route-permission point, I understand a dedicated permission needs a broader decision. Still, removing routePermissions is not a safe workaround: ProtectedRoute redirects only when that prop is present, while allowedRoles can grant access but cannot deny it. Without routePermissions, every authenticated user can reach the route. Please establish the intended permission model before merging, or update the PR description and test plan to state the current access behavior.

certificationType: 'First Aid Training',
issueDate: '2024-06-15',
expiryDate: '2025-06-15',
status: 'active',

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

status is stored separately from expiryDate, while the expiry text is calculated from the date, so the two contradict each other. This record shows an ACTIVE badge while the same row says it expired, and the one expiring 2026-08-15 is also still marked active rather than expiring soon. Since the filter reads status, expired records get missed by the Expired filter. Please derive the status from the expiry date, or make the fixture data consistent.

<td>{cert.certificationType}</td>
<td>{cert.certifyingBody}</td>
<td>{cert.trainingHours}h</td>
<td>{new Date(cert.issueDate).toLocaleDateString()}</td>

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Date-only strings are parsed as UTC by new Date() and then formatted in local time, so in timezones west of UTC 2024-06-15 renders as 6/14/2024. The same applies to the expiry date below and the request date in ResourceRequestsTab.jsx. Please parse these as local calendar dates, or format the original string without a UTC conversion.

<Col lg={12}>
<Nav tabs className={styles.tabNav}>
<NavItem>
<NavLink

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These NavLinks have onClick but no href, and Reactstrap renders them as anchors. Anchors without an href are not keyboard-focusable, so the tabs cannot be reached or switched with the keyboard. Using tag="button" plus tab semantics would address this.

@AmaanSyed09

Copy link
Copy Markdown
Contributor

Addressed the remaining issues.

Updated the Certifications tab to derive certification status from the expiry date so the status badge, filters, and expiry warning stay in sync. Fixed the date handling in the Certifications and Resource Requests tabs so date-only values display the correct calendar day across time zones. Also updated the Resource Requests and Certifications tabs to support keyboard navigation by rendering them as accessible button-based tab controls with proper tab semantics while preserving the existing behavior.

Verified the certification status logic, date rendering, and keyboard accessibility in both Light Mode and Dark Mode. The remaining route permission concern has been raised with the team, and I am currently waiting for clarification on the intended permission model before making any related changes.

Ready for re-review.

@AmaanSyed09

Copy link
Copy Markdown
Contributor

Addressed the remaining route permission issue.

Resolved the latest merge conflict first and verified the existing PM Resource Dashboard changes remained intact. Added a dedicated accessPMResourceDashboard permission and updated the dashboard route to use it instead of the unrelated accessHgnSkillsDashboard permission.

Verified the dashboard continues to load correctly with Owner access after the merge and permission update. Administrator, Owner, and Manager roles retain access, while other authenticated users now require the dedicated PM Resource Dashboard permission, and users without either are denied access.

Ready for re-review.

@RuthwikHM
RuthwikHM self-requested a review August 12, 2026 00:29

@ShreyasB02 ShreyasB02 left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Testing Summary

I've thoroughly tested PR #4517 locally on the feature/pm-resource-dashboard branch across multiple devices and scenarios. Here's what has been verified and working:

Core Dashboard Functionality

  • Dashboard loads correctly at /pm/dashboard/resources for Administrator, Owner, and Manager roles
  • Access control properly blocks Volunteer users from accessing the route

Resource Requests Tab

  • Mock data loads and displays correctly
  • Status filter works as expected across all filter values
  • Teacher ID filter functions properly
  • Search functionality works across all fields:
    • Request ID searches (exact and partial): REQ001, REQ002, REQ
    • Whitespace-normalized searches: REQ001, REQ 001 return expected results
    • Teacher name, resource type, and description searches all function correctly
  • Approve/Deny buttons update status badges with correct priority and status colors

Certifications Tab

  • Mock data loads correctly
  • All filters (Active, Expiring Soon, Expired) work as expected
  • CSV export generates a file with complete certification data
  • Certification status correctly derived from expiry date (no contradictions)

Date & Time Handling

  • Issue dates and expiry dates display the correct calendar day in local timezone
  • Date-only values render correctly (verified 2024-06-15 displays as 6/15/2024, not 6/14)

Dark Mode Styling

  • Tab titles are clearly visible in both active and inactive states
  • "Showing X of N requests/certifications" summary text is readable
  • All table text and badges render with proper contrast
  • Table headers do not highlight on hover (only data rows highlight)

Keyboard Accessibility

  • Tab navigation works fully with keyboard
  • Resource Requests and Certifications tabs are accessible via Tab, Enter, and Space keys

Permissions

  • Dashboard uses the dedicated accessPMResourceDashboard permission correctly
  • Administrator, Owner, and Manager roles retain access
  • Users with only the accessPMResourceDashboard permission can access the dashboard
  • Users without the permission are denied access

Responsive Design

  • Tested on iPad Pro, iPhone 14 Pro Max, and Samsung Galaxy S20 Ultra
  • Layout is fully responsive and usable across all tested devices

Requested Changes

1. Improve Permission Denied UX

Currently, when a Volunteer-role-based user attempts to access /pm/dashboard/resources, they are silently redirected to the home page. This lacks clear user feedback.

Recommendation:

  • Option A: Display a toast notification that clearly states "Permission Denied: You do not have access to the Resource Dashboard"
  • Option B: Render a dedicated permission denied page with an explanation and a link to navigate back

The current silent redirect is confusing and doesn't communicate why the user cannot access the resource.


Screenshot 2026-08-15 at 10 40 26 AM Screenshot 2026-08-15 at 10 40 58 AM Screenshot 2026-08-15 at 10 41 05 AM Screenshot 2026-08-15 at 10 44 51 AM Screenshot 2026-08-15 at 10 49 11 AM Screenshot 2026-08-15 at 10 52 06 AM Screenshot 2026-08-15 at 11 16 32 AM

@Adit0717 Adit0717 left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested this on feature/pm-resource-dashboard branch. I followed all the steps mentioned in the description - everything seems to be working fine.

One issue that I noticed.,

  1. When testing the responsive layout on mobile devices, the table on the Resource Requests tab gets cut off horizontally.
Image

@linlin-husky linlin-husky left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi, I have reviewed the pr and have found the below area for improvement.

  • Issue: As shown in the screenshot, the right edge of the table is cut off cleanly at the border, making it look like a static, truncated table rather than a scrollable container. Users might miss critical columns without an explicit hint.
  • Suggestions:
    1. Visible Scrollbar / Scroll Shadow: Add a persistent scrollbar styling or an edge shadow/gradient indicator to signal horizontal overflow.
    2. Scroll Hint: Display a subtle swipe/scroll hint text or icon (e.g., "⇄ Scroll table horizontally to view more") on mobile screens so users know they can drag to access the action buttons.
Image

@AmaanSyed09

Copy link
Copy Markdown
Contributor

Addressed the remaining issues.

Improved the Resource Requests and Certifications table overflow experience with a synchronized top horizontal scrollbar, a right-edge fade indicator to make additional off-screen content clear, improved Dark Mode scrollbar visibility, and responsive right-edge spacing while preserving existing table functionality across screen sizes.

Added clear permission-denied feedback for the PM Resource Dashboard. Unauthorized users are still redirected to the dashboard using the existing access model, but now receive a "Permission Denied: You do not have access to the Resource Dashboard." error notification. Added targeted tests covering allowed roles, dedicated permission access, denied access, route-specific redirect state, and toast behavior.

Verified the responsive table updates in Light and Dark Mode. ProtectedRoute tests passed with 12 tests, Dashboard tests passed with 3 tests, ESLint passed, and git diff --check passed.

Ready for re-review.

@AmaanSyed09

Copy link
Copy Markdown
Contributor

Addressed the SonarCloud issues.

Refactored the duplicated table overflow and scroll synchronization logic into a shared PM Dashboard hook to reduce new-code duplication. Updated the Resource Requests and Certifications tables with a persistent top horizontal scrollbar that stays synchronized with direct touchpad/swipe scrolling, supports drag and keyboard interaction, and preserves the existing right-edge fade and responsive behavior.

Updated the Dark Mode tab hover background to meet the required contrast level. Verified both tables in Light and Dark Mode, including persistent scrollbar visibility, two-way scroll synchronization after page refresh, responsive behavior, and existing table functionality. ESLint, Stylelint, and git diff --check passed.

@sonarqubecloud

Copy link
Copy Markdown

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

High Priority - Please Review First This is an important PR we'd like to get merged as soon as possible

Projects

None yet

Development

Successfully merging this pull request may close these issues.