Ken Fix Project Report Page Follow Up Issues

[kzou55]

Description

Fixes follow-up issues on the Project Report page, primarily related to CSS Module usage and inconsistent styling across the WBS, Members, and Tasks components.

Updated the affected components to correctly use their CSS Modules so that the tables render with the intended styling and layout. Adjusted the Tasks table styling to be more consistent with the WBS and Members tables, and addressed light- and dark-mode styling issues in the Tasks component and its Edit/Suggestion form.

The reported pagination issue where not all members could be seen in the Members table could not be reproduced during testing.

Related PRS (if any):

None
…

Main changes explained:

1. Updated the affected Report components to correctly import and use their respective .module.css files. These stylesheets had previously been converted from .css to .module.css, but the corresponding component files were still referencing the styles as regular CSS classes instead of using CSS Module syntax.
   • src/components/Reports/WbsTable/WbsTable.jsx
   • src/components/Reports/TasksTable/TasksTable.jsx
   • src/components/Reports/TasksDetail/TasksDetail.jsx
   • src/components/Reports/ProjectReport/ProjectReport.jsx
   • src/components/Reports/ProjectMemberTable/ProjectMemberTable.jsx
2. Removed the unused/incorrectly referenced project-header classname from src/components/Reports/sharedComponents/ReportPage/ReportPage.module.css and moved the styling to src/components/Reports/ProjectReport/ProjectReport.module.css, where it is used by the Project Report page.
3. Updated src/components/Projects/WBS/WBSDetail/wbs.module.css to fix light- and dark-mode styling issues in the Edit/Suggest Task form, including the textarea, date input, date picker close button, and hover states.
4. Updated src/components/Reports/ProjectReport/__tests__/ProjectReport.test.jsx to reflect the removal of the redundant Project name from the Project Report page.
5. Updated src/components/Reports/TasksTable/TasksTable.jsx and src/components/Reports/TasksTable/TasksTable.module.css to properly use CSS Module classes and improve dark-mode styling for the task filters and controls, including React Select dropdowns, checkboxes, and Edit/Clear Filter buttons.

How to test:

1. check into current branch
2. do npm install and npm run start:local to run this PR locally
3. Clear site data/cache
4. log as admin user
5. Click on Reports in the Nav Bar -> Click Reports in the dropdown to get to the Reports page
6. On the reports page, lick on the Projects section and a table of projects will appear, and click on any of the projects
7. Verify the following the Project Report page:
   a. Only 1 Project heading name present
   b. All three components WBS, Members, and Tasks Components should be presented as tables
   b. More spacing between the Active and All Time checkbox in the Members Component
   c. No pagination issues in the Members table. Should be able to go through the pages and see all members
   d. Dark Mode is applied to the page, especially the Tasks Table filters, and its edit/suggest popup form

Screenshots or videos of changes:

Recording.2026-09-04.173032.mp4

Note:

• The reported pagination issue where not all members could be seen in the Members table could not be reproduced during testing.
• The pie chart/toggle-switch changes were not included because they are addressed by separate work/PRs. This PR is limited to the Project Report page focusing on the WBS, Members and Tasks components

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	13c8653
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6a9b67449d8fc20008a89e7d
😎 Deploy Preview	https://deploy-preview-5508--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
0 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud

[DeMoliT1on]

Tested locally for frontend PR changes branch Ken_fix_project_report_page_followup_issues observed the following things.

---

Overall Assessment

Verified Working

• Verified that only 1 Project heading name is present on the Project Report page.
• Confirmed WBS, Members, and Tasks components render correctly as formatted tables with CSS Modules applied.
• Verified that adequate spacing exists between the ACTIVE and ALL-TIME radio buttons/checkboxes in the Members component.
• Tested pagination in the Members table across multiple pages and verified smooth navigation through all listed members.
• Verified Dark Mode and Light Mode styling across the page, including Tasks table filters, dropdown controls, edit/suggest modals, text inputs, and hover states.

Screenshots

All main changes, styling consistency updates, and dark/light mode improvements function as expected without regressions.
Approved!

[sundarmachani]

Reviewed this PR, and I find it quite satisfactory. It addresses the issues as follows:

1. The WBS, Members, and Tasks components are displayed as tables, which enhances readability.
2. The tables are well-spaced, ensuring easy navigation and comprehension.
3. There are no pagination issues in the Members table, which improves the overall user experience.
4. The dark mode is applied effectively, providing a visually appealing and comfortable user interface.

[MahalakshmiPFW]

Hey Ken! I tested the PR locally and everything works as expected functionality-wise!
The only minor visual issue I noticed is with the Members table pagination component in dark mode:

• Active Page Highlight missing in Dark Mode: In light mode, the currently active page number is highlighted with a solid purple background square so users can easily tell which page they are on. In dark mode, the active page number (e.g., page 2) is not highlighted at all and looks identical to the inactive page numbers.