Skip to content

Conversation

@csk731
Copy link
Contributor

@csk731 csk731 commented Jan 18, 2026

Description

Implements the "Material Stock-Out Risk Indicator" to visualize inventory depletion risks.
Screenshot 2026-01-17 at 11 34 43 PM
Screenshot 2026-01-17 at 11 35 03 PM

New Feature: Added MaterialStockOutRiskIndicator.jsx, a horizontal bar chart visualizing predicted days until stock-out.
Colors: Uses a Red (Critical) to Green (Safe) gradient based on severity.
Calculation: Predicts depletion based on actual usage over the last 30 days.
Filters: Includes a multi-select dropdown to filter by Project.

Related PRS (if any):

Backend PR: #2007

Main changes explained:

  • src/controllers/bmdashboard/bmMaterialsController.js: Added bmGetMaterialStockOutRisk to calculate average daily usage and days remaining.
  • src/routes/bmdashboard/bmMaterialsRouter.js: Registered new route.
  • src/components/BMDashboard/WeeklyProjectSummary/MaterialStockOutRiskIndicator/MaterialStockOutRiskIndicator.jsx: Created main chart component using recharts.
  • src/components/BMDashboard/WeeklyProjectSummary/MaterialStockOutRiskIndicator/MaterialStockOutRiskIndicator.module.css: Added styles for chart, tooltips, and legend.
  • src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.jsx: Integrated the new component into the dashboard.

How to test:

  1. Check into current branch.
  2. Do npm install and run the app.
  3. Log in as an Admin or Manager (user with getWeeklySummaries permission).
  4. Navigate to Reports -> Total Construction Summary (/bmdashboard/totalconstructionsummary).
  5. Scroll to the Material Stock-Out Risk Indicator section.
  6. Verify Functionality:
    • Check that the chart loads with bars for materials.
    • Hover over bars to see "Days until stock-out" and "Avg. daily usage".
    • Verify that materials with low stock (0-5 days) are Red, and safe materials are Green.
    • Use the Projects dropdown to filter by specific projects and verify the chart updates.

Screenshots or videos of changes:

Screenshot 2026-01-17 at 11 37 58 PM image

- Introduced a new component, MaterialStockOutRiskIndicator, to visualize material stock-out risks for projects.
- Integrated the component into the WeeklyProjectSummary, allowing users to filter by project.
- Implemented mock data generation for initial testing, with plans to replace it with real API calls.
- Added corresponding CSS styles for the new component, ensuring responsiveness and dark mode support.
@netlify
Copy link

netlify bot commented Jan 18, 2026

Deploy Preview for highestgoodnetwork-dev ready!

Name Link
🔨 Latest commit 6101654
🔍 Latest deploy log https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/696c646e470bfe000897254c
😎 Deploy Preview https://deploy-preview-4733--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@sonarqubecloud
Copy link

@csk731 csk731 added the High Priority - Please Review First This is an important PR we'd like to get merged as soon as possible label Jan 18, 2026
@abhinav-TB
Copy link
Member

Hi Chaitanya, I have tested this PR locally and verified that everything works as expected.
image

Copy link

@Anusha-Gali Anusha-Gali left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi Chaitanya,

I have reviewed your PR locally and it works as expected.
Screenshot 2026-01-19 at 3 46 32 PM
Screenshot 2026-01-19 at 3 46 42 PM
Screenshot 2026-01-19 at 3 46 49 PM
Screenshot 2026-01-19 at 3 46 56 PM
Screenshot 2026-01-19 at 3 47 04 PM

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

High Priority - Please Review First This is an important PR we'd like to get merged as soon as possible

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants