Skip to content

Amaan taking over for Vamsidhar - Fix Dark Mode for Supplier Performance Graph - #4442

Open
vamsidharpanithi wants to merge 12 commits into
developmentfrom
fix/supplier-performance-dark-mode
Open

Amaan taking over for Vamsidhar - Fix Dark Mode for Supplier Performance Graph#4442
vamsidharpanithi wants to merge 12 commits into
developmentfrom
fix/supplier-performance-dark-mode

Conversation

@vamsidharpanithi

@vamsidharpanithi vamsidharpanithi commented Nov 23, 2025

Copy link
Copy Markdown
Contributor
image

Description

This PR fixes the dark mode compatibility issue for the Supplier Performance Graph component in the BM Dashboard. The component was not properly switching to dark mode, causing poor visibility and contrast issues when dark mode was enabled. Additionally, this PR includes fixes for test failures and linting errors that were blocking the codebase.

Fixes # (bug list priority high/medium/low x.y.z)
Or Implements # (WBS)

Related PRS (if any):

Old Frontend PR - 3469
Backend PR - 1379

Main changes explained:

How to test:

  1. check into current branch
  2. do npm install and ... to run this PR locally
  3. Clear site data/cache
  4. log as admin user
  5. go to /bmdashboard/totalconstructionsummary
  6. Open the tools and equipment tracking section
  7. verify that you can see the graph as below

Screenshots or videos of changes:

image image

Note:

Include the information the reviewers need to know.

@sonarqubecloud

Copy link
Copy Markdown

Quality Gate Failed Quality Gate failed

Failed conditions
4.0% Duplication on New Code (required ≤ 3%)

See analysis details on SonarQube Cloud

@netlify

netlify Bot commented Nov 23, 2025

Copy link
Copy Markdown

Deploy Preview for highestgoodnetwork-dev ready!

Name Link
🔨 Latest commit 0270038
🔍 Latest deploy log https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6a6b85b503dafd0008f4032c
😎 Deploy Preview https://deploy-preview-4442--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile
Toggle QR Code...

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.

@vamsidharpanithi vamsidharpanithi added the High Priority - Please Review First This is an important PR we'd like to get merged as soon as possible label Jan 8, 2026

@Anusha-Gali Anusha-Gali left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Hi Vamsidhar,

I reviewed your PR locally and as you can see below the project dropdown, dates dropdown and the tooltip are not handled in dark mode.
Screenshot 2026-01-15 at 10 56 28 PM

@ShreyaMP1999 ShreyaMP1999 changed the title Vamsidhar-Fix prettier linting errors Shreya P taking over for Vamsidhar-Fix prettier linting errors Apr 27, 2026
@saurabhdipte saurabhdipte changed the title Shreya P taking over for Vamsidhar-Fix prettier linting errors Saurabh D taking over for Vamsidhar-Fix prettier linting errors May 13, 2026
@sonarqubecloud

Copy link
Copy Markdown

Quality Gate Failed Quality Gate failed

Failed conditions
4.0% Duplication on New Code (required ≤ 3%)

See analysis details on SonarQube Cloud

@DeepighaJ DeepighaJ left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Tested the PR locally and the Supplier Performance by On-Time Delivery chart loads as expected and Dates , Project filters are good in dark and light mode. Please confirm if Proportion of tools/Equipment are in scope or not .Please check the last screenshot.

Image Image Image

Proportion of Tools/Equipment:
The tool/project selection and date range backround are dark in light mode. Tool/Eqipment and Project are light background in dark mode. Is this scoped for this PR?
Image

@kzou55 kzou55 left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Hi Saurabh,

I ran and tested the PR locally.

Verified that the Light and Dark Mode for the Supplier Performance by On-Time Delivery % section is fine.

  • Light Mode
    Image

    Image Image
  • Dark Mode

    Image Image Image

Concerns

  • Not sure if this is in scope of the PR, but the Portion of Tools/Equipment section alongside the Tools by Availability have some Dark Mode issues
    Image

@sonarqubecloud

Copy link
Copy Markdown

@one-community

Copy link
Copy Markdown
Member

Tested the PR locally and the Supplier Performance by On-Time Delivery chart loads as expected and Dates , Project filters are good in dark and light mode. Please confirm if Proportion of tools/Equipment are in scope or not .Please check the last screenshot.

Image Image Image
Proportion of Tools/Equipment: The tool/project selection and date range backround are dark in light mode. Tool/Eqipment and Project are light background in dark mode. Is this scoped for this PR? Image

Yes, please fix this

@one-community one-community changed the title Saurabh D taking over for Vamsidhar-Fix prettier linting errors XXXX taking over for Vamsidhar-Fix prettier linting errors Jul 26, 2026
@AmaanSyed09 AmaanSyed09 changed the title XXXX taking over for Vamsidhar-Fix prettier linting errors Amaan taking over for Vamsidhar - Fix Dark Mode for Supplier Performance Graph Jul 30, 2026
@AmaanSyed09

Copy link
Copy Markdown
Contributor

Addressed the remaining issues.

Merged the latest development branch into this PR and resolved the merge conflicts while preserving the original PR implementation for the Supplier Performance feature. Reconciled the affected dashboard files to retain the PR layout, chart sizing, dark mode styling, dropdown behavior, readable tool and project names, and existing functionality instead of adopting the updated development UI. Also resolved the merge conflict in the unrelated DropDownSearchBox.test.jsx test file.

Verified the application after resolving the conflicts and confirmed that the Supplier Performance page matches the original PR implementation. Tested the dashboard to verify the layout, chart behavior, dropdown selections, totals, percentages, dark mode styling, and overall functionality. Committed the merge resolution, pushed the updated branch, and confirmed the PR is ready for review.

Ready for re-review.

@sonarqubecloud

Copy link
Copy Markdown

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.

7 participants