Shravya_bugfix/css_module.css/mostWastedMaterials _3675

[ShravyaKudlu]

Description

Fixes #3675

Related PRS (if any):

This frontend PR is related to the #XXX backend PR.
To test this backend PR you need to checkout the #XXX frontend PR.
…

Main changes explained:

• Update MostWastedMaterials.jsx component
• Create module.css and broke the componets into pieces and added module.jsx to those pieces.
  …

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 localhost:5173/materials/mostwastedmaterials
6. verify function similar to pallavi implemented job analytics graph #3675

Screenshots or videos of changes:

Note:

This only works on light Mode

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	530d762
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/699f6ad62539160008a4b549
😎 Deploy Preview	https://deploy-preview-4049--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.

[khan-zoha]

Reviewed PR #4049. Got this error. I could not checkout to this branch.

[sohamsharma08]

Tested the PR using an Admin account and some changes are needed. The project filter is working well, however, the date filter does not seem to do anything. There is no error even when the date range is invalid. The recording of the working is mentioned below:

PR.4049.1.mov

[SreePujitha01]

The bar graph on /mostwastedmaterials remains the same even when the date range changes. It may need adjustments to reflect the selected dates.

[jaydeep138]

Tested this PR — the graph displays data correctly based on the selected project. However, I noticed two issues:
1. The date range filters are not working as expected.
2. The navbar is not visible when navigating to this graph page, which makes it unclear how users will move between sections.

Everything else looks good, but these two issues should be addressed.

[RitzzzZ2021]

The chart functions correctly, and the project filter successfully narrows the data to the selected project.

Suggestions:

1. Since the labels are already displayed on top of each bar, the hover effect feels redundant.

2. Consider adding a title for the horizontal axis.

3. The data filter is not functioning as expected.

[Aditya-gam]

• Ran local server on the PR branch. Navigated to localhost:5173/mostwastedmaterials. Switched projects and adjusted the date range filters.

1. Graph & project filter The chart renders and updates correctly when switching projects.
2. Date range filters (bug) Changing From/To dates does not update the dataset shown on the graph; results appear unchanged regardless of the selected range.
3. Navbar missing (UX/navigation issue) The page renders without the global navbar, so there’s no obvious way to move to other sections.

TestVideo.mov

[ChiragBellara]

Reviewed PR #4049

1. The page and graphs load as expected. The projects filter works as expected.

2. Unable to see a navbar and the date filter does not work.

[Swetha-1306]

Tested the PR, the layout is good and all the filters are working fine except for the date filter

[aryanrachala54]

The existing comments note that while the project filter works, the date filter on the page does not affect the bar graph, which remains unchanged regardless of the selected date range. Additionally, the navbar is missing on this page, making navigation unclear. Building on these points, I observed that the date range filter allows selection of future dates without any validation or warning, which could be misleading. I also noticed a "Back to Top ↑" button, which seems unnecessary given the short length of the page and the presence of only a single chart.

[Prem203]

Tested the PR locally with an admin account.

1. The date filter does not seem to filter out any data.
2. There is no validation in date filter for start date after end date.
3. A nav bar on the top would be ideal if the user wants to switch between pages.

[abhirambj]

Tested the Most Wasted Materials dashboard and the new styles look good, but the chart does not refresh when I change the date filter. Please fix the date filtering before merging. Once that’s working, everything else looks good!

[laynet]

I followed the testing instructions and logged in as admin user. The graph initially loads as expected, and will re-load with new data when a new project is selected from the project filter. However, selecting dates in the date filter does not change the data visualization. The graph stayed the same as it was when there were no dates selected. This was true for every project that I tested. I also tried selecting an end date first then a start date but the result was the same. Checking invalid dates (one or both dates in the future) also did not change the graph. There also isn’t a navbar.

[ShravyaKudlu]

The dates were not present in mockData from previous PR, but I have added, , I have limited the dates so its easier to check., please change months not date to see the changes.

you can check now, I have completed the darkMode as well,
Please check the new updated path
http://localhost:5173/materials/mostwastedmaterials

[Anusha-Gali]

Hi Shravya,

I have reviewed your PR locally and it does work as per requirement. However the calendar is in light mode while the application is in dark mode. Please look into that.

[HemanthNidamanuru]

Hi Shravya,

I tested this locally and it works as expected. Just a small suggestion, the calendar appears in light mode while the app is in dark mode. Please check that once.

[rohanrastogi311]

HI Shravya,

Well done with this implementation.

[Anusha-Gali]

Hi Shravya,

I had previously approved your PR stating - I have reviewed your PR locally and it does work as per requirement. However the calendar is in light mode while the application is in dark mode. Please look into that., after discussing with Jae, he requested i modify and ask for the change to be made. Can you look into it @ShravyaKudlu

[ShravyaKudlu]

@Anusha-Gali , I made a small change here, for darkMode, let me know if it works now?

[ShravyaKudlu]

I Have fixed it, Seams to be exactly like development, with proper styling changes, you can check this

[sonarqubecloud]

Quality Gate passed

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