Adithya fix consumables usability

[adithya-6101]

Description

Enhances the usability and visual clarity of the Consumables Dashboard. As the list of consumables grows, it becomes difficult for users to scan and quickly identify critical information like low stock or distinguish action buttons. This PR introduces visual hierarchies, sticky headers, and data formatting to solve these issues. Additionally, it fixes a bug where the Consumables filter dropdown was displaying "No data" and rendering empty "ghost" rows in the table.

This PR implements:

1. Low Inventory Indicators: Added a red "Low" badge that dynamically appears next to the quantity when Available stock drops below a threshold (< 10).
2. Sticky Headers: Wrapped the table in a scrollable container with a sticky <thead> so column titles remain visible during vertical scrolling.
3. Data & Dropdown Fixes: Flattened the nested project and itemType objects before passing them to the generic table, eliminating ghost rows and allowing the top-right Consumables dropdown to populate correctly.
4. Readability Improvements: Right-aligned all numeric columns (Bought, Used, Available, Waste) for easier comparison.
5. Action Column Grouping: Added a visual vertical divider to separate the data from the action buttons, along with descriptive tooltips (e.g., "View usage history") for better context.

---

Related PRS (if any):

This frontend PR utilizes existing backend endpoints. No new backend PR is required as the styling, sorting, and badging logic are handled client-side.

---

Main changes explained:

• Modified ConsumableListView.jsx:
  • Implemented a data transformation function to flatten nested objects and preserve the itemType label.
  • Added a .filter() to strip out incomplete "ghost" rows where the item name is 'N/A'.
• Modified ItemListView.jsx & SelectItem.jsx:
  • Passed the itemType label down to the <SelectItem /> component.
  • Added specific else if (label === 'Consumables') logic inside SelectItem.jsx to correctly populate the dropdown filter with unique consumable names instead of showing "No data".
• Modified ItemsTable.jsx:
  • Sticky Header: Applied custom inline styles (position: 'sticky') to header cells and wrapped the table in a container with maxHeight: '75vh' and overflowY: 'auto'.
  • Badges: Injected logic into the dynamic column map to render a Reactstrap <Badge color="danger">Low</Badge> when the stockAvailable key is less than 10.
  • Alignment & Dividers: Applied textAlign: 'right' to numeric columns and a borderLeft style to the "Usage Record" column to group the actions visually. Added title attributes for tooltips.

---

How to test:

1. Checkout the current branch adithya_fix_consumables_usability.
2. Do npm install and npm start to run this PR locally.
3. Clear site data/cache.
4. Log in as an Admin or Owner.
5. Navigate to BM Dashboard → Consumables. http://localhost:5173/bmdashboard/consumables
6. Verify Data & Filters:
   • Check the top-right filter dropdown. It should display available items (e.g., "Batteries") instead of "No data".
   • Verify that no empty/blank rows appear in the table.
7. Verify Visual Enhancements:
   • Scroll down the table (if enough data exists) and verify the gray header row stays pinned to the top.
   • Check the numeric columns (Bought, Used, Available, Waste) and verify they are right-aligned.
   • Notice the gray vertical divider line separating the "Waste" column from the "Usage Record" column.
8. Verify Low Stock Badges:
   • Look for any row where the "Available" count is less than 10. You should see a red Low badge next to the number.
9. Verify this new feature works in dark mode.

---

Screenshots or videos of changes:

---

Note:

The low stock threshold is currently hardcoded to < 10 for testing and immediate visual feedback.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	560fe5e
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/69c02dcea0ce0d000853c1d5
😎 Deploy Preview	https://deploy-preview-4828--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 Adithya,

Well done with this impementaiton.

[sonarqubecloud]

Quality Gate passed

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

[one-community]

Thank you all, merging!