Repository navigation
Shreevaths: add preservation component - #5668
shree-vaths wants to merge 4 commits into
Conversation
✅ Deploy Preview for highestgoodnetwork-dev ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
AlekyaJogini
left a comment
AlekyaJogini
left a comment
There was a problem hiding this comment.
Reviewed by Alekya.
How I tested
Checked out the PR branch (commit [3930808]) on Node 20.19.4 with the backend on development. Ran the tests ([3 passed]). Logged in as my Admin test account and opened /kitchenandinventory/reports/preservation-efficiency in light and dark mode, at full width and 375px.
Verified working
- Light mode: the 4 cards (Total Preserved 245, Waste Saved 180 lbs, Jars Used 156, Efficiency Rate 92%), the popular preserved items and both panels show. The numbers in the cards and in Monthly Achievement match.
- Export CSV downloads a file with the same 4 values as the cards.
- Export PDF opens a 1-page print preview with all the report content.
Issues found
- Dark mode: almost all the text is invisible. The page background stays light but the text turns white so the title, tab names, card numbers, Export PDF / Export CSV buttons and panels can't be read.
2.The tabs only move the highlight. Clicking Overview, Sustainability Dashboard or Forecast Accuracy keeps showing the same Preservation Efficiency content and the URL doesn't change so the selected tab name doesn't match what's shown.
- 375px: the tab labels overlap each other ("Overview", "Sustainability Dashboard" and "Preservation Efficiency" run together) and "Forecast Accuracy" is cut off.
Not tested
- The "This Month" dropdown
- Volunteer account
iAbhi001
left a comment
iAbhi001
left a comment
There was a problem hiding this comment.
Tested locally on branch Shreevaths-Preservation-Efficiency-component at commit 3930808 with backend on development as Admin on /kitchenandinventory/reports/preservation-efficiency across desktop and 375px viewports in both light and dark mode. All 3 unit tests pass, and in light mode the summary cards, achievement/impact panels, CSV export, and PDF print preview function as intended. However, I am requesting changes due to three blocking issues: in dark mode, the text colors invert to white while the page background remains light, making titles, tabs, card metrics, and export buttons completely unreadable; clicking the report tabs only changes the visual highlight without routing or updating the content from the Preservation Efficiency view; and at 375px mobile widths, the tab labels overlap each other and clip off-screen rather than wrapping or scrolling cleanly.
shree-vaths
changed the title
|
Hello Fixed below things
This only mock page, the clicking of other component are not in the scope of this page. The forecast accuracy is part of the PR5697 Thank You |
…ighestGoodNetworkApp into Shreevaths-Preservation-Efficiency-component
|
Description
Related PRS (if any):
This frontend PR is related to the NO backend PR.
…
Main changes explained:
-Added the Preservation Efficiency report page with static mock JSON data
-Added four summary cards, preserved item tags, and achievement and environmental impact panels
-Made all four report tabs clickable with active styling
-Added responsive styles for desktop and mobile views
-Added CSV download and PDF printing
-Added and passed three test cases
…
How to test:
npm installand...to run this PR locallyScreenshots or videos of changes:
Screen.Recording.2026-10-17.at.9.27.35.AM.mov