Abhinav kitchen inventory management create the canning dehydration freeze drying and cellar storage sections of processing page

[abhinav-TB]

Description

Related PRS (if any):

This frontend PR is related to the backend PR on branch Abhinav-Kitchen-Inventory-Management-Create-Backend-API-endpoints-to-add-and-retrieve-Processing-projects.
To test this frontend PR you need to checkout the Abhinav-Kitchen-Inventory-Management-Create-Backend-API-endpoints-to-add-and-retrieve-Processing-projects backend branch.
…

Main changes explained:

• Create ProcessingQueue.jsx — Reusable queue component that displays a list of projects for a given processing type (Canning, Dehydration, Freeze Drying, Cellar Storage) with section-specific icons and colors, plus an "Add Project" button
• Create ProcessingProjectCard.jsx — Card component that renders individual project details (item name, quantity with unit, batches, scheduled date, priority badge)
• Create AddProcessingProjectModal.jsx — Modal form for scheduling new processing projects with fields for name, processing method, priority, quantity, unit, batches, scheduled date, trays, and storage bins (fields shown conditionally based on processing type)
• Update ProcessingLandingPage.jsx — Integrated the queue components for each processing tab, added state management for projects (fetched via GET API), modal open/close logic, and POST API integration for creating new projects with error handling
• Update ProcessingLandingPage.module.css — Added styles for project cards, queue containers, modal overlay/form, priority badges, empty states, and dark mode support for all new components
• Update src/utils/URL.js — Added KITCHEN_PROCESSING_PROJECTS endpoint constant

How to test:

1. Check out this frontend branch: Abhinav-Kitchen-Inventory-Management---Create-the-Canning-Dehydration-freeze-drying-and-cellar-storage-sections-of-Processing-page
2. Check out the backend branch: Abhinav-Kitchen-Inventory-Management-Create-Backend-API-endpoints-to-add-and-retrieve-Processing-projects
3. Run npm install in both frontend and backend directories
4. Start the backend with npm run dev in HGNRest
5. Start the frontend with npm start in HighestGoodNetworkApp
6. Log in as an admin user
7. Navigate to Transition Kitchen → Processing
8. Verify the Processing Overview tab displays processing methods and supplies
9. Click each tab (Canning, Dehydration, Freeze Drying, Cellar Storage) and verify the queue section loads with the correct icon, color, and "No scheduled projects" empty state
10. Click "+ Add Project" on any tab, fill in the form, and click "Schedule Project" — verify the project appears in the correct queue
11. Verify the form shows Trays Needed fields for Dehydration and Freeze Drying types
12. Verify the form shows Storage Bins Needed for Cellar Storage type
13. Verify the feature works in dark mode — all text, cards, tabs, and modal should be readable
14. Verify error handling: stop the backend, refresh the page, and confirm the error message "Cannot connect to backend: Processing module api not found." appears

Screenshots or videos of changes:

create.the.canning.dehydration.freeze.drying.and.cellar.storage.sections.of.processing.page.mov

Note:

Include the information the reviewers need to know.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

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

[sonarqubecloud]

Quality Gate passed

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

[Vishnu10-hub]

• Processing page loads correctly • All tabs render (Canning, Dehydration, Freeze Drying, Cellar Storage) • “Add Project” modal opens successfully • Projects can be scheduled and appear in the correct queue • Conditional fields (Trays Needed / Storage Bins Needed) display properly • Dark mode UI looks correct