Mahitha - Add section order and online tools section to gardenmanagment page

[Mahitha-pasupuleti]

Description

Main changes explained:

• Added Seed Orders section to the Garden Management page.
• Added Online Tools section with gardening resources and external tool links.
• Created GardenManagementPage.module.css with scoped CSS module styling.
• Implemented responsive layouts for laptop, tablet, and smaller screens.
• Added light and dark mode support across the new sections.
• Seed Orders section displays:
  • Order ID
  • Supplier name
  • Ordered items
  • Order dates
  • Order status badges
  • View Details button
  • Mark as Received button for pending orders
• Online Tools section displays:
  • Tool name
  • Description
  • Key features
  • External links to gardening tools
• Ensured all styling follows CSS module conventions for component-level scoping.

How to test:

1. Check out the current branch.
2. Run npm install and npm start to launch the application.
3. Clear browser cache/site data if needed.
4. Log in as an admin user.
5. Navigate to /kitchenandinventory/gardenmanagement.
6. Open the Garden Management page.
7. Verify the Seed Orders section:
   • Confirm order cards display correctly.
   • Verify supplier details, items, dates, and status badges.
   • Test View Details and Mark as Received buttons.
8. Verify the Online Tools section:
   • Confirm tool cards display correctly.
   • Verify external links open properly.
9. Toggle between light and dark modes and verify readability.
10. Resize the browser window to confirm responsive behavior.

Result:

PR.Result.mov

Note:

This PR implements the frontend UI for Seed Orders and Online Tools sections using mock data. Backend integration and API connectivity can be added in a follow-up PR.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

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

[sonarqubecloud]

Quality Gate passed

Issues
10 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud

[iAbhi001]

Tested locally. The layout and styling look great! However, clicking on View Details and Mark as Received currently has no visual effect or action attached. Even though full API/backend integration is planned for a follow-up PR, could we add basic mock state/handlers (e.g., opening a details modal or toggling status locally) so reviewers can test the user interaction workflow?