Bhanu Anish - kitchenandinventory-inventorypage

[bhanuanishakkineni]

Description

Related PRS (if any):

No related PRs
To test this checkout to the development branch of the backend.
…

Main changes explained:

• Created KIInventory folder to add all the components required for the inventory page.
• Implemented KIInventory component to render inventory page.
• Implemented MetricCard which can be reused for development of other pages.
• Added styles KIInventory.module.css and MetricCard.module.css
• Implemented dark mode and responsiveness across all 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. log as admin/owner user
5. go to "localhost:5173/kitchenandinventory/inventory"
6. Login to kitchen and inventory portal using the above admin/owner account.
7. Verify if the cards are displayed, Navbar is working - shifting tabs below and placeholder in search bar. (Tabs and data will be implemented in another PR).
8. Verify UI is working in dark mode and check that there are no patches.
9. Check the responsiveness of the page across various screen sizes.

Screenshots or videos of changes:

Inventory-page-testing.mp4

Note:

Include the information the reviewers need to know.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	eceb716
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/698c1839d86d700008a20f7d
😎 Deploy Preview	https://deploy-preview-4716--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, all looks great except for in dark mode the search bar under the nav bar doesn't have the correct text contrast.

[Anusha-Gali]

Hi Anish,

I have reviewed your PR locally and though it works as expected i would like to point out two UI issues which caused be raised in review.

• When selected any of the options i.e Ingredients to Animal Supplies, though that particular option is selected and displaced at the bottom of the screen, the highlighted option on mouse hover disappears.
• The color of the icons which is visible in light mode is not visible in dark mode and it is white color.

[rohanrastogi311]

Hi Bhanu,

Well done with this implementation. Good job.

[Ganesh112001]

Tested PR #4716 - Kitchen Inventory page works perfectly. All metric cards, navbar tabs, search bar, and buttons display correctly. Dark mode fully supported with proper styling. Ready for merge!

[saitejakaasoju]

Hi Bhanu,
I have reviewed PR#4716 and the Kitchen Inventory page renders correctly with all cards, navbar tabs, search bar, and buttons functioning as expected.

[bhanuanishakkineni]

Hi Anish,

I have reviewed your PR locally and though it works as expected i would like to point out two UI issues which caused be raised in review.

• When selected any of the options i.e Ingredients to Animal Supplies, though that particular option is selected and displaced at the bottom of the screen, the highlighted option on mouse hover disappears.
• The color of the icons which is visible in light mode is not visible in dark mode and it is white color.

Hi Anusha,
Thank you for reviewing this PR and feedback. I have made changes as per your feedback. Please review it as soon as possible.

[sonarqubecloud]

Quality Gate passed

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