Linh – Add Material Usage Insights & Visual Indicators to Materials Table [WIP] #4736
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Implement usage percentage calculation (Used / Bought) - Implement stock ratio calculation (Available / Bought) - Add stock health status determination (Critical/Low/Healthy/No-Data) - Add formatting utilities for floating point precision handling - Create tooltip generation functions for visual indicators - Include summary metrics calculation from material lists - All calculations include safe guards for zero/null values
- MaterialSummaryPanel: displays 4 key metrics (total, low stock %, usage %, on hold) - ItemsTable: adds Stock Health Indicator and Usage % Bar columns - ItemListView: integrates summary panel above table - Components support dark mode, responsive design, and accessibility
✅ Deploy Preview for highestgoodnetwork-dev ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
linh2020
changed the title
linh2020
changed the title
…tor and UsagePercentageBar)
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
This PR improves the usability and clarity of the Materials table in the BM Dashboard by adding visual indicators and usage insights.
Previously, the table displayed only raw numeric values (Bought, Used, Available, Wasted, Hold), requiring admins to manually interpret stock health and material consumption. This made it easy to miss low-stock or high-usage items, especially when managing large datasets.
This update enhances the table with intuitive visual cues and summary insights, allowing admins to quickly identify materials that may require attention.
Implements:
(WBS: Add Material Usage Insights & Visual Indicators)
Related PRs (if any)
N/A – frontend-only changes.
Main changes explained
Stock Health Indicator
Added a new Stock Health column to the Materials table.
Displays color-coded icons to represent inventory status:
Status is calculated using Available / Bought with default thresholds:
Added hover tooltips explaining:
Usage Percentage Bar
Added a Usage % column showing material consumption as Used / Bought.
Displays a progress bar with contextual text (e.g., 7.1 / 40 (18%)).
Safely handles edge cases:
Tooltips provide clear explanations of usage calculations.
Summary Panel
Added a summary panel above the Materials table displaying:
Metrics are calculated based on the currently displayed dataset (frontend-only).
How to test
(Attach screenshots for light mode and dark mode here)
Note
This PR focuses on frontend-only enhancements using existing material data.
Custom low-stock thresholds per project or global configuration are intentionally left as a future enhancement and will require backend support.