Skip to content

Manoj - Enhance Material Usage Dashboard with Interactive and Informational Features(Frontend)#5162

Open
ManojPuttaswamy wants to merge 9 commits intodevelopmentfrom
Manoj-utilisation_chart
Open

Manoj - Enhance Material Usage Dashboard with Interactive and Informational Features(Frontend)#5162
ManojPuttaswamy wants to merge 9 commits intodevelopmentfrom
Manoj-utilisation_chart

Conversation

@ManojPuttaswamy
Copy link
Copy Markdown

@ManojPuttaswamy ManojPuttaswamy commented Apr 16, 2026

Description

Screenshot 2026-04-16 at 6 46 27 PM

Related PRS (if any):

This frontend PR is related to the PR#2172 backend PR.

Main changes explained:

Frontend (UtilizationChart.jsx)

  1. Enhanced tooltips — full name, utilization, downtime, count
  2. Summary banner — total tools, avg utilization, top tool, total downtime
  3. Comparison toggle — consistent with Apply button flow
  4. Increased Only filter — visible only when comparison is ON
  5. Download CSV/PDF — reflects current filters
  6. 4-week trend line chart with linear regression trend line
  7. Mock data commented out, real API calls active

Frontend (UtilizationChart.module.css)

  1. Summary banner styles
  2. Comparison toggle styles
  3. Download dropdown styles
  4. Trend section styles
  5. Full dark mode support

Backend (toolUtilizationController.js)

  1. count field added to per-tool response
  2. groupBy=week support — single API call for trend data
  3. computeUtilizationForRange extracted as shared helper
  4. No breaking changes to existing behavior

How to test:

  1. check into current branch
  2. do npm install and npm run start:local to run this PR locally
  3. Clear site data/cache
  4. log as admin user
  5. go to /UtilizationChart
  6. verify above listed functionalities and also with dark mode.

Screenshots or videos of changes:

REC-20260416013413.mp4

@netlify
Copy link
Copy Markdown

netlify bot commented Apr 16, 2026

Deploy Preview for highestgoodnetwork-dev ready!

Name Link
🔨 Latest commit 6e31ef5
🔍 Latest deploy log https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/69e17733cd19ee0008b30ad1
😎 Deploy Preview https://deploy-preview-5162--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
Copy Markdown

@ManojPuttaswamy ManojPuttaswamy changed the title Manoj utilisation chart Manoj - Enhance Material Usage Dashboard with Interactive and Informational Features(Frontend) Apr 17, 2026
@ManojPuttaswamy ManojPuttaswamy added the High Priority - Please Review First This is an important PR we'd like to get merged as soon as possible label Apr 17, 2026
Copy link
Copy Markdown

@rajanidi1999 rajanidi1999 left a comment

Choose a reason for hiding this comment

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

Hi,
I have tested your PR locally and its running as per instructions.

Image

Copy link
Copy Markdown

@HemanthNidamanuru HemanthNidamanuru left a comment

Choose a reason for hiding this comment

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

Hi Manoj,

I tested this PR locally, everything is working as expected.

Image Image Image Image Image Image Image Image Image

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.

3 participants