[Jaden300]

Jaden: Add Kitchen Reports and Analytics export buttons (DONE Jaden)- #5669

Description

Implements the frontend for the Kitchen Reports and Analytics page (Phase 6) per the task spec: a tabbed Overview / Sustainability Dashboard / Preservation Efficiency / Forecast Accuracy interface with Export PDF and Export CSV buttons wired to placeholder API endpoints and mock file downloads.

Changes made

New page

• Added KitchenReports component at /kitchenandinventory/reports with four tabs (Overview, Sustainability Dashboard, Preservation Efficiency, Forecast Accuracy) and a date range filter
• Added protected route registration in routes.jsx consistent with sibling Kitchen module routes

Export logic

• Added useReportExport hook encapsulating export state, API calls, and Blob download handling, separate from presentation code
• Registered two new placeholder endpoints (KITCHEN_REPORTS_EXPORT_PDF, KITCHEN_REPORTS_EXPORT_CSV) in URL.js following existing endpoint conventions
• Export buttons show loading and disabled states during the request and surface failures via toast rather than failing silently
• Downloads use a consistent naming pattern: report-overview.pdf, report-overview.csv

Styling

• All styling scoped through CSS Modules, no inline styles or plain class strings
• Dark mode wired through the existing Redux theme selector (state.theme.darkMode), not hardcoded
• Verified text and background color pairs meet WCAG 4.5:1 contrast in both light and dark mode

Code review fixes

• Replaced parentNode.removeChild(link) with link.remove() per maintainability finding
• Replaced a silent catch block with one that surfaces the actual error message to the user via toast

How to test

1. Check out branch jw_kitchen_reports_export_buttons
2. Run npm install and start the app locally
3. Navigate to /kitchenandinventory/reports
4. Confirm all four tabs render and switch correctly, and the date range selector updates
5. Click Export PDF and Export CSV, verify the button enters a loading/disabled state and a mock file downloads with the expected filename
6. Toggle dark mode and verify the page, tabs, and buttons render correctly in both themes

vod.mov

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	7c8e29d
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6adc1db96a324cc609d689cb
😎 Deploy Preview	https://deploy-preview-5669--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.

[AaditTrivedi]

Reviewed by Aadit Trivedi.

Reviewed the diff (6 files, no conflicts with development). The new Kitchen Reports page and useReportExport hook download the report as a blob, guard against empty files, and show success and error toasts, which is a solid approach.

Issue found

• The export buttons call ENDPOINTS.KITCHEN_REPORTS_EXPORT_PDF and KITCHEN_REPORTS_EXPORT_CSV (/reports/export/pdf and /reports/export/csv), but HGNRest development has no such routes; the only export route is the education portal's /api/educator/reports/export. As is, both buttons will always fail. Please link the backend PR that adds these endpoints (and list it under Related PRs), or keep the buttons disabled until it exists.

Pointers, not blocking

1. The paths are generic (/reports/export/...); something kitchen-specific, such as /kitchen/reports/export/..., would avoid colliding with other report exports.
2. window.URL.revokeObjectURL(downloadUrl) runs immediately after link.click(); some browsers can cancel the download, so deferring it with setTimeout, as #5613 does, is safer.

Required action
Please add or link the backend endpoints for the exports. Happy to re-review once they exist.

[MahalakshmiPFW]

Hey Jaden! After testing, I can confirm that everything ran smoothly with no issues observed on the frontend. The changes were tested in both light and dark modes and work as expected. Excellent work!

[muthapriyanka]

I checked the Reports & Analytics page visually, and all four tabs switch as expected. I could not verify the exports because the PDF and CSV buttons call endpoints that are not present in the current development backend, as noted in the earlier review.

[RohSrik]

I tested all four sections of the Reports and Analytics page, both in dark and light modes and found no issues. However, both the Export PDF and Export CSV buttons return a 404 error, and the files are not downloaded. I also couldn't find the corresponding API routes, such as reports/export/pdf and reports/export/csv in the local backend, and the frontend does not generate mock downloads independently.

[sonarqubecloud]

Quality Gate passed

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

[rahulrubugunday]

I have reviewed your PR locally (7c8e29d, backend on development) and it works as per requirement.

1. /kitchenandinventory/reports loads with the Overview, Sustainability Dashboard, Preservation Efficiency and Forecast Accuracy tabs, and each tab switches correctly.
2. The date range selector updates (This Month to Last 3 Months).
3. Export PDF and Export CSV are disabled with the tooltip "Export is unavailable until the backend export endpoints are deployed", matching commit 908c0d7.
4. Readable in dark and light mode. No conflicts with development.

Note: step 5 of the test steps (mock file download) no longer applies since exports are now disabled, so the description could be updated.

[RevathiSrini]

I reviewed and tested this PR locally using commit 7c8e29db8.The Reports & Analytics page loads successfully, all four tabs display their corresponding content, and the date-range dropdown works correctly. I also verified that the interface displays properly in dark mode. I noticed that the PDF and CSV export buttons are intentionally disabled until the backend endpoints are available, so the actual download functionality could not be tested. Everything else I tested worked as expected.

[RohSrik]

I reviewed PR #5669 locally using the latest commit 7c8e29d and verified the Kitchen Reports functionality.

1. The Kitchen Reports page loads successfully with all four tabs: Overview, Sustainability Dashboard, Preservation Efficiency, and Forecast Accuracy. Navigation between the tabs works correctly.
2. The date range filter responds properly when switching between different periods, including This Month and This Year.
3. The Export PDF and Export CSV buttons are disabled and display the appropriate tooltip indicating that the backend export endpoints are not yet available.
4. I also checked the page in both light and dark modes. The layout, text, and controls are displayed clearly without noticeable UI issues.

Overall, the functionality I tested behaves as expected and aligns with the PR requirements.

[one-community]

Thank you all, merging!