Skip to content

Jaden taking over for Carlos/Shravan fix conflicts 4351 (DONE Jaden) - #4954

Closed
Shravan-neelamsetty wants to merge 0 commit into
developmentfrom
shravan-fix-conflicts-4351
Closed

Jaden taking over for Carlos/Shravan fix conflicts 4351 (DONE Jaden)#4954
Shravan-neelamsetty wants to merge 0 commit into
developmentfrom
shravan-fix-conflicts-4351

Conversation

@Shravan-neelamsetty

@Shravan-neelamsetty Shravan-neelamsetty commented Mar 7, 2026

Copy link
Copy Markdown
Contributor

Jaden taking over for Carlos/Shravan fix conflicts 4351 (DONE Jaden)

This PR has been superseded. All changes have been moved to PR #5437 due to merge conflicts that could not be resolved here. Please review and track progress there instead.

PR #5437 (shravan-fix-conflicts-4351) picks up this work - it resets to a clean base off development, cherry-picks only the 22 files from Carlos's original dark mode work, and resolves all blocking issues including a broken API endpoint, field name mismatches, dead imports, stylelint and WCAG contrast violations, and SonarCloud code quality issues. All 29 tests pass.

Description

Took over from Carlos/Shravan to bring PR #4351 (dark mode implementation for the Total Construction Summary page) to a mergeable state.

The previous branch had accumulated ~212 files due to repeated git merge development calls pulling in unrelated work from other PRs. This PR resets to a clean base off development and cherry-picks only the 22 files belonging to Carlos's original dark mode work, then resolves all blocking issues.

Related PRs

Changes made

Branch cleanup

  • Reset to a clean branch off development - removed ~190 passenger files from other PRs that had accumulated via merge commits
  • Cherry-picked only Carlos's 22 original dark mode files

Bug fixes

  • Fixed broken API endpoint (ENDPOINTS.BM_PROJECTS_LIST_FOR_MATERIALS_COST - did not exist - changed to ENDPOINTS.BM_PROJECTS)
  • Fixed field name mismatch in project data mapping (projectId/projectName - changed to _id/name to match actual API response)
  • Removed dead imports (issueCharts.css, DarkMode.css, autoComplete.css) that pointed to deleted or non-existent files

Styling

  • Fixed all stylelint violations: descending specificity, single-line declarations, deprecated word-break: break-word, deprecated @document, invalid prefers-contrast: high
  • Replaced all inline styles in DistributionLaborHours with CSS module classes
  • Fixed all WCAG 4.5:1 contrast violations on disabled option text, button colors, and link colors

Code quality

  • Resolved all SonarCloud issues: unused variables, missing button type attributes, array index keys, mutating .sort() replaced with .toSorted(), optional chaining, unused imports, nested ternaries, .removeChild replaced with .remove()
  • Reduced ToolStatusDonutChart cognitive complexity from 25 to under 15 by extracting getChartDimensions, NoDataView, and DonutChartView

Tests

  • All 6 unit tests in TotalMaterialCostPerProject.test.jsx now pass
  • All 12 unit tests in Leaderboard.test.jsx pass
  • All 29 tests in the pre-push suite pass

How to test

  1. Check out branch shravan-fix-conflicts-4351
  2. Run npm install and npm run start:local
  3. Log in as an admin user
  4. Navigate to bmdashboard/totalconstructionsummary
  5. Toggle dark mode ON - verify all sections render correctly (Risk Profile, Issue Tracking, Tools and Equipment, Labor Hours, Financials, Material Costs)
  6. Toggle dark mode OFF - verify light mode works correctly
  7. Check dropdowns, date pickers, chart tooltips in both modes
  8. Navigate to the Leaderboard page - verify dark mode toggle works and table renders correctly
  9. Navigate to the Experience Donut Chart - verify dark mode renders correctly
vid.mov

@netlify

netlify Bot commented Mar 7, 2026

Copy link
Copy Markdown

Deploy Preview for highestgoodnetwork-dev ready!

Name Link
🔨 Latest commit 03f2563
🔍 Latest deploy log https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6a774e6d1797a9000895557c
😎 Deploy Preview https://deploy-preview-4954--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.

@sonarqubecloud

sonarqubecloud Bot commented Mar 7, 2026

Copy link
Copy Markdown

@Shravan-neelamsetty
Shravan-neelamsetty force-pushed the shravan-fix-conflicts-4351 branch from 901060b to 6fa3e3b Compare April 8, 2026 03:44
@sonarqubecloud

sonarqubecloud Bot commented Apr 8, 2026

Copy link
Copy Markdown

@one-community one-community added the High Priority - Please Review First This is an important PR we'd like to get merged as soon as possible label Apr 9, 2026

@HemanthNidamanuru HemanthNidamanuru 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 Shravan,

I tested this PR locally and everything looks good! One small thing to fix: the selected projects field background does not adapt properly in dark mode.

Image Image Image Image Image

@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 Shravan,

I have reviewed your PR locally and in "Total Construction Summary" i found the below issues:

  • In Longest Open issues, the chart background when compare to the other charts on the page
  • The Supplier Performance dropdown's in Tools and Equipment tracking are not adapted to the same color as other dropdown's.
  • The options in the Injury Severity chart in Lessons Learned are not clearly visible when selected
  • The options in the Planned vs Actual Cost in Financials are not clearly visible when selected
  • The hover text in Global Distribution map is not visible, and a lot of dropdown's and other features are missing when compared to Dev
  • The calendar in the Planned vs Actual Cost in Financials is in light mode

The rest of the charts are well adapted to dark mode. The Leaderboard page is also as per requirement.

Issues
Image
Image
Image
Image
Image
Image

No issues
Image
Image

@Shravan-neelamsetty
Shravan-neelamsetty force-pushed the shravan-fix-conflicts-4351 branch 2 times, most recently from 2a4489a to 9b15db0 Compare May 29, 2026 20:17

@Mahitha-pasupuleti Mahitha-pasupuleti 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 this PR locally and thoroughly reviewed the implemented changes. While the overall dark mode implementation and merge conflict resolution are heading in the right direction, I identified several issues that should be addressed before this PR can be approved:

  1. Dropdown Readability: The readability of the values within the dropdown menu is poor in dark mode due to low contrast, making it difficult for users to clearly distinguish the available options.
Image
  1. Map Visibility in Dark Mode: The content displayed within the map component is not clearly visible in dark mode. The current styling significantly impacts readability and usability.
Image
  1. Non-Functional Dropdowns: In both light and dark modes, the "Select Tools" and "Select a Project" dropdowns are not clickable, preventing users from interacting with these fields.
Image
  1. Paid Labor Cost Section: The Start Date and End Date fields are not visible in dark mode. Additionally, these fields overlap with nearby content, causing layout and usability issues.

  2. Distribution of Labor Hours Form: The Submit button in the Distribution of Labor Hours section is not functioning, preventing form submission and breaking the workflow.

Image
  1. Dark Mode State Inconsistency: Upon reloading the page and toggling between light and dark modes multiple times, several internal components do not consistently adopt dark mode styling. While the light mode sections render correctly, some nested elements remain in their default theme, resulting in an inconsistent UI experience.
Image

Please review the issues above and the attached screenshots. Due to the functional and visual regressions identified during testing, I am requesting changes before approval.

@sonarqubecloud

sonarqubecloud Bot commented Jun 7, 2026

Copy link
Copy Markdown

@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.

  1. Risk Profile for projects:
    The rows of Trend Summary Table is not visible in dark mode.
  2. Tools and Equipment tracking:
    The Tools and Availability filters are not working and Supplier Performance by On-Time -- Delivery % filters shows No Data on filtering but shows chart for ALL value. The Project id is displayed instead of project name.
  3. Labor and Time Tracking:
    The calendar pop is not visible needs contrast improvement.
  4. Loss Tracking Line Chart
    Start Date and End date filter is not clickable.
  5. Financials:
    The filter values show are not visible.
  6. Leaderboard on hovering makes the text invisible in dark mode.
  7. Failed to generate Pdf pop and clicking on generate pdf
Image Image Image Image Image Image Image Image Image

@Abhi-R0211 Abhi-R0211 left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Hi Shravan, I tested this PR locally by checking out shravan-fix-conflicts-4351, running yarn install and yarn start:local, logging in as admin, and navigating to bmdashboard/totalconstructionsummary. I tested both light and dark mode across all sections. Here is my finding:


What's Working Well

  • Risk Profile chart renders correctly in dark mode with good contrast
  • Risk Movement Tracking cards are fully readable in dark mode
  • The Trend Summary Table rows are now visible in dark mode - this addresses the previous concerns
  • Project Status, Issues Breakdown, Loss Tracking, and Lessons Learned sections all
    look good in dark mode
  • The Global Distribution map renders with visible country labels and project status dots
  • The Leaderboard two-row layout and trophy icons look correct

Issues That Need To Be Addressed

1. Issue Tracking - Chart Background Not Adapting to Dark Mode

The "Longest Open Issues" chart container remains white when dark mode is active. The chart title, axis labels, and filter text are barely readable against the white background. This is inconsistent with every other chart section on the page which correctly adapts to dark mode.

Image

2. Issue Tracking - Projects Dropdown Not Dark Mode Adapted

When the Projects dropdown is opened, the option list has a white/light background that does not adapt to dark mode.

Image

3. Financials - Project and Category Dropdowns Not Dark Mode Adapted

Both the Project and Category dropdown input fields in the "Planned vs Actual Cost" section remain white in dark mode. When opened, the dropdown lists also have a white background with no dark mode styling applied.

Image Image

4. Financials Tracking - Empty Cards and Unhandled Error

Two "Card" placeholder panels render empty with no content or loading state. A third panel displays a raw error message:

Error: Failed to load project cost data

This error is surfaced directly to the user without any friendly fallback UI or retry option.

Image

5. PDF Generation - Functional Failure

Clicking "Share PDF" triggers a "Generating PDF..." notification followed immediately by a browser-level alert:

Failed to generate PDF. Please try again.

The feature does not work. This was also flagged by @DeepighaJ and does not appear to be fixed in this branch.

Image

6. Leaderboard - Notification Banner Contrast in Dark Mode

The "Note: You are currently invisible to the team(s) you are on" banner has very poor contrast in dark mode - the text is difficult to read against the banner background.

Image

7. Lessons Learned - Data Source and Date Inputs Not Dark Mode Adapted

The Data Source input box and the From/To date fields in the Most Frequent Keywords section remain white/light colored in dark mode, inconsistent with the surrounding dark UI.

Image

8. Tools and Equipment - Input Fields Not Dark Mode Adapted

The "Tool(s)" and "Select a project" input fields in the Tools by Availability section remain white/light in dark mode.

Image

UI Improvements Suggested

9. Inconsistent Section Widths

The "Financials", "Loss Tracking", and "Labor and Time Tracking" sections are noticeably narrower than all other sections on the page. This is visible in both light and dark mode and appears to be a layout bug. All sections should have consistent full-width containers.

Image

10. Raw Error Messages Surfaced to Users

In Financials Tracking, errors are displayed as raw technical strings directly in the UI. A user-friendly error state with a clear message and a retry option would improve the experience significantly.

@Dnagabahiru Dnagabahiru 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.

Review Summary

Environment Setup:

  • Checked out branch shravan-fix-conflicts-4351 locally.
  • Ran npm install successfully.
  • Ran the full test suite successfully.
    • 312 test files passed
    • 2094 tests passed
    • 9 tests skipped
  • Application started successfully using Vite on localhost.

Code Review:

  • Reviewed the PR description and confirmed this is a merge-conflict resolution PR for #4351.
  • Reviewed changed files related to CSS modules, dark mode styling, and conflict resolution.
  • Did not find obvious unresolved merge conflict markers in the reviewed files.

Testing Performed:

  • Verified the application builds and runs locally.
  • Verified the automated test suite passes successfully.
  • Reviewed the conflict-resolution changes in the modified files.

Testing Blocker:

  • Unable to complete the required UI testing steps because login is blocked in my local environment.
  • Login returns: "Invalid Credentials - User Not Found."
  • Therefore I could not access:
    • /bmdashboard/totalconstructionsummary
    • Leaderboard page
  • Unable to verify dark mode behavior, dropdowns, calendars, tooltips, and related UI functionality specified in the PR testing instructions.

Request:
Please provide the required admin/test credentials or access instructions so the functional testing steps can be completed before approval.

@handikaharianto
handikaharianto self-requested a review June 11, 2026 17:08

@handikaharianto handikaharianto left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Hi @Shravan-neelamsetty , the following are what you need to update.

Dark Mode

Trend Summary Table

Update the highlighting style when hovering the row.
Image

Project Status

In mobile view, centering these cards or make it full width would look better.
Image

Issue Tracking

Disable the dates before the start date when choosing end date & disable the dates after the end date when choosing start date to improve UX.
Image

Tools and Equipment Tracking

Date pickers in both start and end date do not have dark mode.
Image

Financials

  • Update the dark mode styling for the dropdowns (project, category) and date pickers (start date, end date).
  • The labels on X-axis and Y-axis are not visible, including the small numbers above the bar chart.
Image

For the Cost Breakdown by Category section, update the dark mode styling for from and to.
Image

Labor and Time Tracking

  • The start and end date overlapped with the chart
  • The opacity on these tasks, project, and date range lead to bad contrasts.
Image

Financials Tracking

The Actual vs Planned Costs has bad contrast when hovering around the chart.
Image

Light Mode

Material Consumption

Update the light mode styles for these dropdowns and multi-select.
Image

Issue Tracking

This section does not have light mode styling.
Image

Tools and Equipment Tracking

  • The middle section (Tools by Availability) has bad contrast on the labels
  • The dropdown and date picker triggers have no light mode styles.
Image

Lessons Learned

The Most Frequent Keywords section has no light mode styles.
Image

Leaderboard

Update styles when highlighting rows on dark mode.

Image

@pixelpix13

Copy link
Copy Markdown
Contributor

Hi @Shravan-neelamsetty, I reviewed the pr and following are the things i found need to be fixed:

1. Layout Consistency

The spacing between collapsed dropdown sections is not consistent across the page. Some sections leave noticeably larger gaps than others, resulting in an uneven layout in both light and dark modes.

Expected behavior:
All collapsed dropdown rows should maintain consistent height, margin, and spacing to provide a uniform and visually balanced user experience.

image

2. Risk Profile

  • Row hover background color in the Trend Summary table does not match dark mode styling.
  • Tooltip for the Comparison + Indicators column displays a "?" and needs verification.
image

3. Project Status

Some cards have insufficient color contrast in dark mode, affecting readability.

image

4. Material Consumption

Input fields do not consistently apply dark/light mode styling.

image image

5. Issue Breakdown

Long X-axis labels overlap adjacent labels and reduce readability.

image

6. Issue Tracking

Dark mode styling is not properly applied when toggling themes. It only renders correctly after refreshing the page while already in dark mode.

image

7. Tools and Equipment Tracking

  • Tools by Availability section does not properly support dark mode.
  • Dropdown/input fields do not function correctly.
  • Theme toggle behavior is inconsistent.
image image

8. Lessons Learned

  • Dark/light mode styling is inconsistent after toggling.
  • Calendar popup opens offset from the associated input field instead of directly underneath it.
image image image

9. Financials

Input fields do not properly follow dark mode styling.

image

10. Loss Tracking

Clicking directly on the calendar icon does not open the date picker. The date picker only opens when clicking slightly to the left of the icon.

image

11. Labor and Time Tracking

  • Paid Labor Cost dropdowns appear transparent in dark mode.
  • Adding multiple task values breaks alignment.
  • Date range layout/alignment issues observed.
image image image

12. Financial Tracking

The Actual vs Planned Costs chart tooltip/hover state has poor contrast in dark mode.

image

13. PDF Generation

PDF generation failed during testing.

image

14. General Review

  • Dashboard responsiveness is poor on smaller screens/mobile layouts.
  • Date range UX could be improved by disabling invalid dates before the selected start date and after the selected end date.
  • Dashboard interactions feel slow and unresponsive.
  • Some table row hover states do not properly support dark mode styling.
image

Summary

Tested locally on branch shravan-fix-conflicts-4351 in both light and dark modes.

AmaanSyed09
AmaanSyed09 previously approved these changes Jun 16, 2026

@AmaanSyed09 AmaanSyed09 left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Tested PR #4954 locally on the shravan-fix-conflicts-4351 branch.

  1. Weekly Project Summary:
    Tested PR #4954 locally on the shravan-fix-conflicts-4351 branch.
    Verified light mode and dark mode functionality.
    Dark mode toggle worked correctly.

  2. Material Consumption:
    First card appeared blank during testing.
    Did not appear related to the dark mode changes in this PR.

  3. Financials Tracking:
    Observed "Failed to load project cost data".
    Browser console showed /api/project/1/predictions returning 404.
    Issue does not appear to be introduced by this PR.

  4. Code Review:
    Reviewed representative CSS module and dark mode changes.
    No issues identified.

Screenshots attached.

Image Image Image Image

@Dnagabahiru Dnagabahiru 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.

Verified Total Construction Summary in both Light and Dark modes.
Risk Profile, Tools & Equipment, Financials, filters, date pickers, tooltips, and calendar popups are functioning as expected.

Image Image Image Image

Issue Found:
In Dark Mode, the Issue Tracking → Longest Open Issues chart has poor contrast and reduced visibility. Chart labels, legends, and tooltip content appear faded, impacting readability.

Image

@pixelpix13 pixelpix13 left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Hi @Shravan-neelamsetty, I reviewed the pr and following are the things i found need to be fixed:

1. Layout Consistency

The spacing between collapsed dropdown sections is not consistent across the page. Some sections leave noticeably larger gaps than others, resulting in an uneven layout in both light and dark modes.

Expected behavior:
All collapsed dropdown rows should maintain consistent height, margin, and spacing to provide a uniform and visually balanced user experience.

image

2. Risk Profile

  • Row hover background color in the Trend Summary table does not match dark mode styling.
  • Tooltip for the Comparison + Indicators column displays a "?" and needs verification.
image

3. Project Status

Some cards have insufficient color contrast in dark mode, affecting readability.

image

4. Material Consumption

Input fields do not consistently apply dark/light mode styling.

image image

5. Issue Breakdown

Long X-axis labels overlap adjacent labels and reduce readability.

image

6. Issue Tracking

Dark mode styling is not properly applied when toggling themes. It only renders correctly after refreshing the page while already in dark mode.

image

7. Tools and Equipment Tracking

  • Tools by Availability section does not properly support dark mode.
  • Dropdown/input fields do not function correctly.
  • Theme toggle behavior is inconsistent.
image image

8. Lessons Learned

  • Dark/light mode styling is inconsistent after toggling.
  • Calendar popup opens offset from the associated input field instead of directly underneath it.
image image image

9. Financials

Input fields do not properly follow dark mode styling.

image

10. Loss Tracking

Clicking directly on the calendar icon does not open the date picker. The date picker only opens when clicking slightly to the left of the icon.

image

11. Labor and Time Tracking

  • Paid Labor Cost dropdowns appear transparent in dark mode.
  • Adding multiple task values breaks alignment.
  • Date range layout/alignment issues observed.
image image image

12. Financial Tracking

The Actual vs Planned Costs chart tooltip/hover state has poor contrast in dark mode.

image

13. PDF Generation

PDF generation failed during testing.

image

14. General Review

  • Dashboard responsiveness is poor on smaller screens/mobile layouts.
  • Date range UX could be improved by disabling invalid dates before the selected start date and after the selected end date.
  • Dashboard interactions feel slow and unresponsive.
  • Some table row hover states do not properly support dark mode styling.
image

Summary

Tested locally on branch shravan-fix-conflicts-4351 in both light and dark modes.

@mahathiganimi mahathiganimi 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 Shravan,
when I tested this page in my local - I found the following issues
Project Risk Profile Overview - Start date can be set as later than the end date. When 0 projects selected, I am still able to view all 5 projects charted, Is this the intended behaviour? Trend summary contents are difficult to read if they are highlighted using cursor.
Project Status - The numbers in the bubbles are hard to read with some colour backgrounds.
Material Consumption - Chart is not rendered. And the contents from select dropdown are totally difficult in terms of readability.
Issue Tracking - ToolTip hover does not give any details. Projects select dropdown is unreadable
Tools and equipment tracking - Tools by availability - No event triggers when I select dropdown.
Lessons Learned - Could improvise the colour palette for dropdown for most frequent keywords display
Financials - One chart is not rendered, Dropdown is difficult to read
Loss Tracking Line Chart - Not able to select dates
Labour and Time Tracking - Start date can be set as later than the end date.
Financials Tracking - Three charts are not rendered.

Image Image Image Image Image Image Image Image Image Image Image Image Image

shree-vaths
shree-vaths previously approved these changes Jul 9, 2026

@shree-vaths shree-vaths 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, I was able to test #4954 on my local.

Passing test cases
-The graphs of risk profiles, material consumption, tools & equipment, issues breakdown, financials, global distribution, labour & time tracking and financial tracking have adapted to dark mode.
-Forms on issues tracking, lessons learned are working in dark mode.
-Legend and tooltip information are adapted for dark mode.
-Date picker,project filters and category filters looks good in dark mode.

UI seems to be distorted but i believe its out of scope for this ticket.

Image Image Image Image

@akv-iu akv-iu 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.

Hey @Shravan-neelamsetty, Tested PR locally. These are some things I found that needs to be fixed.

1. Layout Consistency

Spacing inconsistencies: The vertical spacing between collapsed dropdown sections is uneven. Margins and heights needs to be standardized, so the UI looks uniform across both light and dark themes.

Heading logic: Headings inside the dropdowns are inconsistent, some have, others don't.

Image

2. Risk Profile

Hover states: In the Trend Summary table, the background color when hovering over a row, doesn't match the rest of the dark mode theme.

Image

3. Project Status

Few cards are difficult to read in dark mode due to poor color contrast.

Image

4. Material Consumption

Input fields do not consistently apply dark/light mode styling. Dark theme doesn’t work on drop down in 2 sections

Image

5. Issue Tracking

Toggling dark mode doesn't apply the styles immediately; it requires a full page reload. Chart hover states are also failing to inherit the dark theme.

Image

6. Tools and Equipment, Tracking

  • This section do not properly support dark mode.
  • Dropdown/input fields do not function correctly.
Image

7. Lessons Learned

  • Dark/light mode styling is inconsistent after toggling.
  • Calendar Allows to select future date, first section doesn’t have dark theme in drop down
Image

8. Loss Tracking

Clicking directly on the calendar icon does not open the date picker. The date picker only opens when clicking slightly to the left of the icon. No multi select option present for the graph (Year and Material)

Image Image

Data inside the map is not visible, date can select future date

9. Labor and Time Tracking

Image
  • From date > to date accepted

@HemanthNidamanuru HemanthNidamanuru 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 Shravan,

I tested this PR locally on the shravan-fix-conflicts-4351 branch.

Most sections are working fine in both light and dark mode, and the Leaderboard page also looks good.

A few dark mode UI areas still need improvement:

The row hover effect in the Trend Summary table is not clearly visible.
The calendar in Tools by Availability needs better dark mode styling/alignment.
The Financials section also needs dark mode styling improvements.

Image Image Image Image Image Image Image Image Image Image

@BosuBose132 BosuBose132 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 PR #4954 locally on the pr-4954 branch.

What I verified:

  • The app started locally with the backend running on development.
  • The Total Construction Summary page loaded at /bmdashboard/totalconstructionsummary.
  • I tested the page in dark mode and light mode.
  • I checked multiple sections, including Material Consumption, Issue Tracking, Tools and Equipment Tracking, Financials, and Labor and Time Tracking.
  • Several charts and dashboard sections are rendering, and the page is generally accessible for testing.

Issues found:

  1. Dark mode styling is still inconsistent in several dropdowns and input fields. In sections such as Material Consumption, Tools and Equipment Tracking, Financials, and Labor and Time Tracking, the dropdowns/placeholders appear too light or have low contrast against the dark background. Some placeholder text is difficult to read.

  2. Some dropdowns and input fields overlap the chart area. In the Labor and Time Tracking section, the Date Range fields overlap the Paid Labor Cost chart. In the Financials section, the Category dropdown overlaps the Planned vs Actual Cost chart. This makes the chart harder to read and affects the layout.

  3. In the Issue Tracking section, the chart/card area does not fully match dark mode styling. The chart container appears too light, and some labels/text are hard to read in dark mode. It's happening the same in every section.

  4. I also noticed a “Failed to load project cost data” message in the Financials Tracking section while testing. If this is expected due to backend/data availability, please confirm; otherwise, this may need to be checked.

Expected behavior:
The Total Construction Summary page should render consistently in both dark mode and light mode. Dropdowns, placeholders, date fields, chart labels, tooltips, and chart containers should have readable contrast, and input/dropdown elements should not overlap the charts.

Actual behavior:
Several dropdowns and placeholders have low contrast in dark mode, some chart areas are inconsistent with dark mode styling, and some fields overlap chart content.

Note: GitHub currently shows merge conflicts for this PR, so the branch will also need to be updated with development before final merge.

Screenshots attached for reference.

Image Image Image Image Image

@CarolineYXW CarolineYXW left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Hi! I tested this PR in both Dark Mode and Light Mode and found several issues that should be addressed before merging.

Please see the comments below for details. Screenshots are attached for each issue.

1. Page becomes unresponsive

The page becomes unresponsive whenever I select the "Custom" time range and manually enter the year in the date input.

This issue occurs in both Dark Mode and Light Mode.

Image Image

2. Chart labels

Suggestion:
The values displayed on the charts are difficult to read. Consider rounding the numbers and/or increasing the font size to improve readability.

This applies to both Dark Mode and Light Mode.

Image Image
  1. Dropdown and date input visibility

The text inside the dropdowns and date input fields is not visible, making it difficult to read the selected values.

Image
  1. Date picker not working

The date picker cannot be interacted with in this section. Clicking the date field does not allow selecting a date.

Image
  1. Labor and Time Tracking issues

In the Labor and Time Tracking section:

  • Clicking "Submit" after changing the filters does not update the chart.
  • The date range input overlaps with the chart, causing a layout issue.

Both issues occur in Dark Mode and Light Mode.

Image Image

Overall, I found several functional issues that should be resolved before this PR is merged. I also included one UI improvement suggestion (P2). Thank you for your work!

@AnshShah-18 AnshShah-18 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.

I tested PR #4954 locally in both light and dark modes and found the following issues:

Issues in Dark mode:

  1. The Trend Summary Table row text becomes unreadable when hovering in dark mode.
Image
  1. The first Material Consumption card is blank and only displays the title “Card.”
Image
  1. In Financials, dropdown options become are unreadable and have poor contrast in dark mode
Image
  1. In tools and Equipment tracking, the “Select tools” and “Select a project” dropdowns are not functional.
Image
  1. The Loss Tracking Start Date and End Date fields cannot be selected.
Image
  1. The Paid Labor Cost date fields overlap the chart.
Image
  1. Two Financials Tracking charts are missing and Financials Tracking displays the raw error “Failed to load project cost data.”
Image
  1. The Leaderboard table and hover states have poor contrast in dark mode.
Image

Issues in Light mode:

  1. The first panel is blank and only displays the generic title “Card.” There is no chart, loading indicator, empty-state explanation, or error message.
Image
  1. When hovering over a dropdown option, the background becomes very light while the text also remains light, making the selected option difficult to read.
Image
  1. The entire Longest Open Issues chart remains dark blue while the rest of the page is in light mode. This creates inconsistent theme styling, and some chart labels also have weak contrast.
Image

12.The middle card uses dark-colored dropdowns in light mode. The Select tools and Select a project dropdowns do not open or allow any selection, so the chart cannot be filtered and remains on “No tools data available.”
Image

  1. The Most Frequent Keywords card retains a dark background even though light mode is active, resulting in inconsistent page styling.
Image
  1. The first Financials panel displays only “Card” with no chart or meaningful empty/error state.
Image
  1. The Start Date and End Date controls cannot be opened or selected, including when clicking the calendar icons.
Image
  1. The Date Range fields are positioned directly over the Paid Labor Cost chart, hiding the legend and part of the chart. The section also leaves a very large unused area on the right.
Image 17. Two cards are blank, another displays the technical message “Error: Failed to load project cost data,” and only one chart renders. The page should provide charts or clear, user-friendly empty/error states. Image

@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.

The issues previously reported are not yet fixed here.
Risk profile for Project issue still not fixed.
Image
Tools and Equipment Tracking: Tools by availablility filters are not clickable.
Image
Financials: The filters need dark mode improvement and the Planned vs Actual chart can be improved as they appear big and have no x-axis and y-axis labels.
I'm still getting the issue "Failed to generate PDF" on clicking on the Share PDF button.
Image
Image
Labor and time Tracking: The filters are overlapped on the chart and need improvement on the contrast.
Image

@iAbhi001
iAbhi001 self-requested a review July 24, 2026 19:00
iAbhi001
iAbhi001 previously approved these changes Jul 24, 2026

@iAbhi001 iAbhi001 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.

Thanks! A few blocking items remain before we can merge:

Merge Conflicts: Needs resolution to enable deployment.

Unresolved Bugs: Risk Profile, non-clickable Tools filters, and the "Failed to generate PDF" error on Financials.

UI Issues: Dark mode contrast, missing chart axes, and overlapping filters on Labor & Time Tracking.

Image Image Image Image 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 Shravan,

I ran and tested the PR locally

Issues

  1. Risk Profile: Trend Summary Table has contrast issues when hovering

    Image
  2. Issue Tracking: Light Mode isn't really light mode
    Image

    Image
  3. Material Consumption section Light Mode has issues

    Image
  4. Lessons Learned section has some components in Dark Mode while in Light Mode

    Image Image
  5. Financials section has contrast issues for the filters and drop down menus in Dark Mode

    Image
  6. Labor and Time Tracking section - In the Paid Labor Cost component, the filters are transparent in Dark Mode

    Image Image Image
  7. Leaderboard Component has contrast issues when hovering in Dark Mode

    Image Image

@one-community one-community changed the title Shravan fix conflicts 4351 Jaden taking over for Carlos/Shravan fix conflicts 4351 Jul 26, 2026
@Jaden300 Jaden300 changed the title Jaden taking over for Carlos/Shravan fix conflicts 4351 Jaden taking over for Carlos/Shravan fix conflicts 4351 (DONE Jaden) Aug 1, 2026
@Jaden300 Jaden300 changed the title Jaden taking over for Carlos/Shravan fix conflicts 4351 (DONE Jaden) Jaden taking over for Carlos/Shravan fix conflicts 4351 (WIP Jaden) Aug 2, 2026
@Jaden300
Jaden300 dismissed stale reviews from iAbhi001, shree-vaths, and AmaanSyed09 via 2910480 August 2, 2026 20:41
@Jaden300
Jaden300 force-pushed the shravan-fix-conflicts-4351 branch from 9e38dd0 to 2910480 Compare August 2, 2026 20:41
@Jaden300 Jaden300 changed the title Jaden taking over for Carlos/Shravan fix conflicts 4351 (WIP Jaden) Jaden taking over for Carlos/Shravan fix conflicts 4351 (DONE Jaden) Aug 3, 2026
@Jaden300 Jaden300 closed this Aug 8, 2026
@Jaden300
Jaden300 force-pushed the shravan-fix-conflicts-4351 branch from abf908c to 03f2563 Compare August 8, 2026 15:42
@sonarqubecloud

sonarqubecloud Bot commented Aug 8, 2026

Copy link
Copy Markdown

@one-community

Copy link
Copy Markdown
Member

New PR is here: #5437

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.