Linh – Add Material Usage Insights & Visual Indicators to Materials Table#4736
Linh – Add Material Usage Insights & Visual Indicators to Materials Table#4736linh2020 wants to merge 11 commits into
Conversation
- 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)
|
linh2020
changed the title
one-community
added
the
High Priority - Please Review First
|
…odNetworkApp into linh_materials_usage_insights_visual_indicators
handikaharianto
left a comment
handikaharianto
left a comment
There was a problem hiding this comment.
Hi, after reviewing this PR, here's my findings:
Worked Well
Stock Health data is displayed properly✅
The stock health data correctly displays the icons based on the inventory level. The colors also make it easier to distinguish the data.
Usage % bars reflect correct consumption values✅
The Usage % bars correctly reflects the consumption values based on the Bought and Used data.
Tooltips explain calculations clearly✅
The tooltips in Usage % and Stock Health provides clear information about the data.
Summary panel metrics are updated correctly✅
After applying the available filters, the metrics in the Summary Panel are updated and displayed correctly.
Responsive layout in different screen sizes✅
The layout is responsive in all screen sizes (mobile, tablets, desktop)
Requires some updates
Time label color mismatched❌
This Time label color is shown as black in the dark mode, while others are displayed in white.
Alignments❌
These Select and Date picker are not aligned properly.
- The time label is on the left side of the date picker, while the labels for select are on top.
Also, whenever I opened the date picker, it will automatically push the Project and Material to the right side.
Material Usage Proportion dialog dark styles❌
As can be seen from the image below, this dialog doesn't have a proper styles when it's in a dark mode.
…odNetworkApp into linh_materials_usage_insights_visual_indicators
|
pixelpix13
left a comment
pixelpix13
left a comment
There was a problem hiding this comment.
hi @linh2020 below are are reviews for the frontend repo and some changes that are needed
Testing Summary
Tested frontend PR #4736 together with backend PR #2019.
Verified
- Stock Health indicators display correctly based on Available vs Bought values.
- Usage percentage bars calculate correctly.
- Summary panel metrics update correctly.
- Over Usage Threshold values update correctly.
- Items on Hold metrics update correctly.
- Tooltips display the correct stock and usage information.
- Layout generally works in both light and dark modes.
- Usage calculations handle normal datasets correctly.
Summary Panel Verification
Stock Health & Usage Indicators
Issue 1 – Dark Mode Usage Bar Contrast
The usage percentage bars become difficult to distinguish in dark mode because the border contrast is too low.
Expected Behavior
The usage bar border should maintain sufficient contrast in dark mode to clearly separate the progress bar from the background.
Screenshot
Issue 2 – Duplicate Project Fields
There appear to be duplicate project selection fields on the page.
Expected Behavior
Only the necessary project filter should be displayed to avoid confusion.
Screenshot
Issue 3 – Tooltip Displays Extra "?"
When hovering over Stock Health and Usage indicators:
- Tooltip data itself is displayed correctly.
- An additional "?" icon/text also appears.
This extra indicator appears unnecessary and may confuse users.
Issue 4 – Tooltip Missing When Only One Search Result Exists
When filtering the table down to a single result:
- Stock Health tooltip does not appear.
- This appears to be caused by tooltip positioning constraints inside the table.
Expected Behavior
Tooltips should display regardless of row count.
Screenshot
Issue 5 – Modal Dark Mode Contrast
The modal does not have sufficient color contrast in dark mode.
Some text and controls become difficult to distinguish from the background.
Expected Behavior
Modal elements should follow the same dark mode accessibility and contrast standards as the rest of the page.
Screenshot
Issue 6 – Duplicate Search Fields
Two search inputs appear to be available simultaneously.
Question
Please verify whether both search fields are required or if one is unintended.
Screenshot
Issue 7 – Critical Stock Threshold Validation
When setting the Critical Stock threshold to:
0
the functionality begins to behave unexpectedly.
Observed:
- Editing other rows afterwards produces errors.
- Healthy rows can no longer be edited correctly.
Expected Behavior
Threshold values should be validated and invalid values should not cause failures in unrelated rows.
Screenshot
Overall Assessment
Verified Working
- Stock Health indicators
- Usage percentage calculations
- Summary panel calculations
- Usage threshold metrics
- Tooltip data calculations
- General responsiveness
Requesting Changes
The feature works overall, but the following issues should be addressed:
- Dark mode contrast for usage bars
- Duplicate project fields
- Extra tooltip "?" indicator
- Missing tooltip when only one row exists
- Modal dark mode contrast
- Duplicate search fields
- Critical stock threshold validation when set to 0
These appear to be UI/UX and validation issues rather than calculation issues, but they should be resolved before approval.
5 participants
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 a summary panel, allowing admins to quickly identify materials that may require attention.
Implements:
(WBS: Add Material Usage Insights & Visual Indicators)
Related PRs (if any)
Related backend PR: #2019 (Material Usage Insights Backend APIs and Calculations)
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
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.