Shravan view recipe details

[Shravan-neelamsetty]

Description

Implements the "View Recipe" detail panel functionality for the Kitchen Inventory Management module (Phase 6, DELIVERABLE-5). Clicking the "View Recipe" button on any recipe card opens a slide-in panel from the right displaying the full recipe details including name, type, description, prep time, servings, difficulty, tags, ingredients list with availability status, and step-by-step instructions.

Implements # Phase 6 - Kitchen Inventory Management - Add functionality to view recipe button to view recipe details and instructions

Related PRs (if any):

This PR builds on top of PR #4879 (Recipes Landing Page). The landing page PR must be merged first before this one.

Main changes explained:

• Created ViewRecipe.jsx — new component for the recipe detail slide-in panel with sections for metadata, tags, ingredients (with onsite/available/unavailable badges and substitute/reorder buttons for unavailable items), and numbered instructions
• Created ViewRecipe.module.css — full styling with dark mode support, responsive design, slide-in animation, and One Community earth tone color palette
• Updated RecipesLandingPage.jsx — import ViewRecipe component, add selectedRecipe state, wire up handleViewRecipe to open detail panel and handleCloseRecipe to close it
• Updated mockRecipes.js — add ingredients array (with id, name, quantity, isOnsite, isAvailable fields) and instructions array to all mock recipes for testing

How to test:

1. Check out this branch: shravan-view-recipe-details
2. Run npm install and npm run start:local
3. Clear site data/cache
4. Log in as admin user
5. Navigate to Kitchen & Inventory → Recipes (/kitchenandinventory/recipes)
6. Verify the recipes landing page loads with 3 recipe cards
7. Click "View Recipe" on "Garden Vegetable Soup" — verify the detail panel slides in from the right showing:
   • Recipe name, type badge, description
   • Prep time (45 min), servings (6), difficulty (Easy)
   • Tags: Vegan, Gluten-Free, Seasonal, Priority Ingredients, 85% Onsite
   • Ingredients list with onsite/available badges
   • "Black Pepper" should show as "Not Available" with Substitute and Reorder buttons
   • Numbered instructions (8 steps)
8. Click the ✕ button to close the panel — verify it closes
9. Click "View Recipe" on "Herb Roasted Chicken" — verify ingredients show "Breadcrumbs" and "Parmesan Cheese" as Not Available with Substitute/Reorder buttons
10. Click the dark overlay background to close — verify it closes
11. Press Escape key while panel is open — verify it closes
12. Verify this feature works in dark mode.
13. Test responsive design — resize browser to tablet and mobile widths, verify panel adjusts properly

Screenshots or videos of changes:

Dark Mode

Light Mode

Note:

• The Substitute and Reorder buttons currently log to console — they will be wired to backend endpoints once the recipe API (Akshith's deliverable) is ready.
• Mock data is used for testing. Once the backend API endpoints are available, the component will be updated to fetch real data.
• All styling uses CSS Modules as required by the project guidelines.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	4b2c907
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/69cdd32ba624e50008a1c295
😎 Deploy Preview	https://deploy-preview-4996--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.

[saisandeepkoritala]

Hi Shravan,

I ran your PR locally as an admin and navigated to the "kitchenandinventory/recipes" route. I didn’t encounter any issues with the three recipes you mentioned in both light and dark modes. I also checked the styling across different devices and didn’t find any problems with the reported areas.

[sonarqubecloud]

Quality Gate passed

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

[Anusha-Gali]

Hi Shravan,

I have reviewed your PR locally and it works as per requirement.

[one-community]

Thank you all, merging!