Shravan: implement substitute ingredient modal with backend API integration

[Shravan-neelamsetty]

Description

Implements Phase 6 - Kitchen Inventory Management - Add functionality to substitute ingredient button. Also implement a backend endpoint to update the ingredient.

Implements the substitute ingredient modal that allows users to replace unavailable ingredients with available alternatives from the inventory. Clicking the "Substitute" button on any unavailable ingredient opens a popup with a searchable dropdown of available inventory items, a quantity input field, and confirm/cancel actions. On confirming, the ingredient is updated both in the UI and in the database via the backend API.

Related PRs (if any):

This frontend PR is related to the backend PR in the HGNRest repository on branch shravan-substitute-ingredient-backend.
This PR builds on top of PR #4996 (View Recipe Details) and PR #4879 (Recipes Landing Page).

Main changes explained:

• Create file SubstituteIngredientModal.jsx for introducing the substitute ingredient popup component with searchable dropdown of inventory items (name, category, quantity available), quantity input, error handling, and API integration
• Create file SubstituteIngredientModal.module.css for all modal styling using CSS modules with earth-tone palette, dark mode support, responsive breakpoints, and error message display
• Update file ViewRecipe.jsx for tracking ingredients in local state, wiring the Substitute button to open the modal, handling confirmed substitutions via API response, and notifying the parent component of updates
• Update file RecipesLandingPage.jsx for fetching recipes from the backend API instead of mock data, with fallback to mock data if API is unavailable, and handling recipe updates after substitution
• Update file RecipeCard.jsx for supporting both MongoDB _id and mock data id fields
• Update file routes.jsx for adding the Recipes route with KIProtectedRoute

How to test:

1. Check into branch shravan-substitute-ingredient
2. Do npm install and npm run start:local to run this PR locally
3. Start the backend (HGNRest) on branch shravan-substitute-ingredient-backend with npm start
4. Clear site data/cache
5. Log in as admin user
6. Navigate to Kitchen & Inventory portal > go to /kitchenandinventory/recipes
7. Verify the recipes landing page loads with 3 recipe cards fetched from the API
8. Click "View Recipe" on "Garden Vegetable Soup"
9. Scroll to the Ingredients section and find "Black Pepper" marked as "Not Available"
10. Click the "Substitute" button on Black Pepper
11. Verify the modal opens showing "Replacing: Black Pepper - To taste"
12. Click the dropdown and verify the searchable list of inventory items appears (try searching "pepper" or "dairy")
13. Select "White Pepper" from the dropdown and enter "2g" as the quantity
14. Click "Confirm Substitute"
15. Verify Black Pepper is replaced with "White Pepper" showing "2g" and the badge changes to "Available"
16. Close the recipe panel and reopen it to verify the substitution persists
17. Test the same flow on "Herb Roasted Chicken" with "Breadcrumbs" or "Parmesan Cheese"
18. Verify this new feature works in dark mode
19. Test responsive design by resizing browser to tablet and mobile widths

Screenshots or videos of changes:

Light mode

Dark Mode

Before Substitution

After Substituition

Substituiton

Note:

The inventory dropdown currently uses mock inventory data. It will be updated to fetch from a real inventory endpoint once that collection is available. The backend endpoint PUT /api/kitchenandinventory/recipes/:recipeId/substitute is fully functional and persists changes to MongoDB Atlas. If the backend is not running, the landing page falls back to mock data and substitutions update locally only. The Substitute and Reorder buttons only appear on ingredients where isAvailable is false and isOnsite is false. All styling uses CSS Modules as required by the project guidelines.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	f0db4c0
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/69e30555c4cf2a0008466600
😎 Deploy Preview	https://deploy-preview-5167--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
8 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud

[Rajasrivatsansrinivasan]

Reviewed PR #5167 by Shravan. Checked out both the frontend and corresponding backend branch locally and tested the substitute ingredient flow on the recipes page. Verified that the recipes load correctly, substitution updates the ingredient in the UI, and changes persist after reopening the recipe. Confirmed the modal-based substitution flow works for other ingredients as expected. Functionality behaves as intended. Approving.