Adithya resolve ItemsTable crash and re-apply Consumables table usability features

[adithya-6101]

Description

This PR resolves a critical ReferenceError: itemType is not defined crash currently affecting the development branch's Consumables dashboard.

Additionally, it re-applies the visual hierarchy, data formatting, and usability enhancements originally introduced in PR #4828, which were overwritten during a recent pagination refactor. All visual enhancements have been carefully integrated to work seamlessly alongside the newly added search, sorting, and pagination logic.

This PR implements:

1. Dev Crash Resolution: Destructured the missing itemType prop in the table component to stop the React Error Boundary crash on the live dev site.
2. Low Inventory Indicators: Re-added a red "Low" badge that dynamically appears next to the quantity when Available stock drops below a threshold (< 10).
3. Sticky Headers: Restored the scrollable container with a sticky <thead> so column titles remain visible during vertical scrolling, including dark mode support.
4. Dropdown Fixes: Restored the logic inside SelectItem.jsx to use flattened names, allowing the top-right Consumables dropdown to populate correctly instead of showing "No data".
5. Readability Improvements: Right-aligned all numeric columns (Bought, Used, Available, Waste) for easier comparison.
6. 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.
7. Button Crash Prevention: Safely detached deprecated onClick handlers from the "Add Material", "Edit", and "View Update History" buttons in the list view to prevent local errors, replacing them with temporary console logs pending future modal integration.

---

Related PRs (if any):

• Redoes PR Adithya fix consumables usability #4828 (Overwritten by recent refactor)
• 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 ItemsTable.jsx:
  • Crash Fix: Destructured itemType from props to fix the ReferenceError inside the <RecordsModal> call.
  • Pagination Integration: Carefully injected the badge logic, textAlign: 'right' alignment for numeric columns, and action column tooltips/dividers into the new mapping logic created by the recent pagination refactor.
• Modified ItemListView.jsx:
  • Explicitly passed the itemType prop down to <ItemsTable> to ensure the modal functions correctly.
  • Removed broken/deprecated toggleUpdateHistoryModal references that were causing local crashes on click.
• Modified SelectItem.jsx:
  • Restored the else if (label === 'Consumables') branch to correctly map unique consumable names to the dropdown filter instead of defaulting to "No data".
• Modified ItemListView.module.css:
  • Added CSS rules (.darkTable .stickyThead th) to ensure the newly restored sticky header has the correct background color and borders in dark mode.

---

How to test:

1. Checkout the current branch.
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 Crash is Fixed:
   • The page should load successfully without throwing the "Something went wrong" React error boundary seen currently on development.
7. Verify Data & Filters:
   • Check the top-right filter dropdown. It should display available items (e.g., "Batteries") instead of "No data".
   • Test the pagination and search bar to ensure the newly integrated code hasn't broken them.
8. 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.
9. 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.
10. 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	a73fe8f
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6a1480380dc1e700089a9cf0
😎 Deploy Preview	https://deploy-preview-5288--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
0 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

[DeepighaJ]

Checked Into current branch and navigated to /bmdashboard/consumables ,logged in as Owner.
Getting the below error Unauthorized to access.