Bhanu Anish - ingredients tab of Kitchen Inventory page

[bhanuanishakkineni]

Description

Related PRS (if any):

No related PRs
To test this PR you need to use the development branch of Backend
…

Main changes explained:

• Created the item cards, which can be reused for all items in the inventory.
• Each card component takes item details as props. Each card will display the stock status and supply bars, and other details like name, type, onsite or not, location, etc,.
• Implemented a notification alert in ingredients tab which displays preserved stock available in the inventory.
• For this task sample data was used from KIInventorySampleItems.js
• Changed the metric values to change dynamically based on the items in the inventory
• All the styles and icons were implemented for both light and dark modes, and are responsive across the screens.
  …

How to test:

1. check into current branch
2. do npm install and npm run start:local to run this PR locally
3. Clear site data/cache
4. Visit 'http://localhost:5173/' and login as admin/owner user
5. go to 'http://localhost:5173/kitchenandinventory/inventory' and use the above credentials to log into kitchenandinventory portal
6. Check if ingredients tab is being displayed as a grid of items.
7. Verify the icons and status bars were displayed as per the requirements. Check if the preserved stock alert is being display if there are available preserved stock. (Data is static for this PR)
8. Check responsiveness of the UI across all screens and verify in both light and dark modes.
   ...

Screenshots or videos of changes:

ingredients-tab.testing.mp4

Note:

Include the information the reviewers need to know.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

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

[rohanrastogi311]

Hi Bhanu,

Well done with this implementation.

[maithili20]

Hi @bhanuanishakkineni
The UI works in both light and dark modes and is fully responsive. Ingredients are displayed in a grid layout, and the preserved stock alert is shown correctly. Overall, all the mentioned features are functioning as expected.

[abdel-lall]

LGTM!

[bhanuanishakkineni]

Hi Bhanu,

Well done with this implementation.

Hi Rohan,
Thank you for taking time and reviewing this PR. I have resolved merge conflicts of this PR. can you please review and approve this PR one more time.

[bhanuanishakkineni]

LGTM!

Hi Abdel,
Thank you for taking time and reviewing this PR. I have resolved merge conflicts of this PR. can you please review and approve this PR one more time.

[sonarqubecloud]

Quality Gate passed

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