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

[Mahitha-pasupuleti]

Description

Related PR

• Mahitha - Add section order and online tools section to gardenmanagment page #5422
• Mahitha - feat(garden-management): add garden management backend APIs HGNRest#2308

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:

https://youtu.be/KcSC8IQMKxg

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	d7e9563
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6a80eed998a037000800ad67
😎 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.

[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?

[Mahitha-pasupuleti]

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?

Thank you for the feedback! The current assignment was scoped to implementing the UI/layout, and the button functionality is planned for the follow-up PR with the backend integration. I intentionally left the actions unimplemented to avoid overlapping with that work. If you'd prefer mock frontend interactions in this PR for demonstration purposes, I'm happy to add them.

[one-community]

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?

Thank you for the feedback! The current assignment was scoped to implementing the UI/layout, and the button functionality is planned for the follow-up PR with the backend integration. I intentionally left the actions unimplemented to avoid overlapping with that work. If you'd prefer mock frontend interactions in this PR for demonstration purposes, I'm happy to add them.

Is there another task on the doc already for that? If not, everything should be completed in this one PR and whatever backend is needed to go with it

[sonarqubecloud]

Quality Gate passed

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