sai teja loss tracking line graph by saitejakaasoju · Pull Request #5016 · OneCommunityGlobal/HighestGoodNetworkApp

saitejakaasoju · 2026-03-18T23:26:52Z

Description

Implements #3876 (WBS - Loss Tracking Line Graph for BM Dashboard Weekly Project Summary)

Implements a fully functional Loss Tracking
Line Chart with filters, dark mode, date range validation, and reset functionality.

Related PRS (if any):

This frontend PR is related to the #XXX backend PR.
To test this backend PR you need to checkout the #XXX frontend PR.
…

Main changes explained:

Create LossTrackingLineChart.jsx — Recharts line chart with 9 lines (Metal/Plastic/Glass × 2022/2023/2024), Material filter, Year filter, Start/End date range filter, Reset Filters button, date range validation error message, and full dark mode support via CSS custom properties
Create LossTrackingLineChart.module.css — CSS token system with :root light theme and .darkMode overrides
Update WeeklyProjectSummary.jsx — add LossTrackingLineChart to "Loss Tracking" accordion section; add useEffect to fix page scroll blocked by stale Vite CSS
Update WeeklyProjectSummary.module.css — fix .financial-big card overflow: hidden → visible so chart is not clipped
Update App.module.css…

How to test:

check into current branch
do npm install and ... to run this PR locally
Clear site data/cache
log as admin user
Go to BM Dashboard → Total Construction Summary
Scroll down and click "Loss Tracking ∨" to expand the section
Verify the line chart renders with 9 colored lines (Metal/Plastic/Glass × 2022/2023/2024)
Verify all filter features:
- Change Material dropdown → only lines for that material appear
- Change Year dropdown → only lines for that year appear
- Set Start Date and End Date → chart updates to that month range
- Set Start Date after End Date → red validation error appears below filters
- Click Reset Filters → all filters return to "All" and button disables
verify this new feature works in dark mode

Screenshots or videos of changes:

Screen.Recording.2026-03-18.at.3.38.31.PM.mov

Note:

Include the information the reviewers need to know.

…ighestGoodNetworkApp into Ganesh_impl_loss_tracking_line_graph

Resolved merge conflicts in: - WeeklyProjectSummary.jsx: kept LossTrackingLineChart import + new imports from development (SupplierPerformanceGraph, DistributionLaborHours) - package.json: adopted development's husky v9 and jest-environment-jsdom - yarn.lock: accepted development version - Fixed ESLint warnings for console.error and alert in PDF catch block Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Fixes from PR #3876 review + code improvements: 1. Critical bug fix: mergedData key was `line.year` (number) but <Line dataKey> expected `${line.year}-${line.material}` — multiple materials of the same year were silently overwriting each other in the chart data. 2. Wrap mergedData/chartData computation in useMemo (deps: filteredLines, startDate, endDate) to avoid unnecessary recalculation on every render. 3. Expanded color palette to support 9 year-material combinations: Teal shades for 2022, Pink shades for 2023, Yellow/Orange for 2024. 4. Expanded mock rawData to include all 3 materials (Metal, Plastic, Glass) for each of the 3 years (2022-2024), giving 9 distinct lines. 5. Moved date-range validation error message out of the <label> element and added .dateRangeError CSS class (grid-column: 1 / -1 for full width). 6. Applied Prettier formatting (auto-fixed via eslint --fix). All dark mode axis/tick colors already handled via dynamic textColor; Reset Filters button visibility handled via CSS module variables. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

- App.module.css: force overflow-y: auto on html/body (overrides stale Vite-cached 'overflow: hidden' rule from NotFoundPage styles); change #root from height:100%/overflow-y:hidden to min-height:100%/auto - WeeklyProjectSummary.jsx: add useEffect that sets inline overflowY:'auto' on body/html on mount, restoring original on unmount; inline styles beat all stylesheets and guarantee scrollability - WeeklyProjectSummary.module.css: change .financial-big card overflow from hidden to visible so the LossTrackingLineChart is not clipped Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Resolved missing peer packages (antd, libphonenumber-js, react-calendar, react-tagcloud, @tanstack/react-query) that were in package.json but not installed, causing Vite to error on startup. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

netlify · 2026-03-18T23:26:57Z

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	`8de602c`
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/69e9b191441cfa0008994a7d
😎 Deploy Preview	https://deploy-preview-5016--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

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

HemanthNidamanuru

Hi Sai Teja,

I have reviewed your PR locally. The line chart renders correctly with all 9 lines and all filter features are working as expected.

However, I noticed one issue:

The calendar and calendar icon are not styled correctly in dark mode.

Nirali164 · 2026-04-08T01:19:01Z

Hello Sai Teja,

I have used the branch locally and tested it.
It seems to be working fine for me.

Just one thing highlights the calendar icon in Dark mode
Time(Months) is too close to the year and material.

Anusha-Gali

Hi Sai Teja,

I have reviewed your PR locally and all features work as per requirement. Please update the calendar icon as well as calendar to adapt to dark mode.
Issue

Working Screenshots

saitejakaasoju · 2026-04-09T04:15:11Z

Hi Sai Teja,

I have reviewed your PR locally. The line chart renders correctly with all 9 lines and all filter features are working as expected.

However, I noticed one issue:

The calendar and calendar icon are not styled correctly in dark mode.

saitejakaasoju · 2026-04-09T04:16:01Z

Addressed the dark mode styling issue in the Loss Tracking chart’s Start Date / End Date month picker, including the calendar icon.

Anusha-Gali

Hi Teja,

I reviewed your PR again after pulling all the changes, however the issue of calendar icon and the calendar itself being in light mode in dark mode does not appear to be fixed and also some other reviewer's point - Time(months) is too close to the years also does not appear to be fixed.

saitejakaasoju · 2026-04-21T19:35:22Z

Updated based on the review comments.

Fixed the dark mode styling for the month picker and adjusted the chart layout so “Time (months)” no longer overlaps the legend. I retested the Loss Tracking Line Chart in dark mode and verified both issues are resolved.

sonarqubecloud · 2026-04-23T05:44:51Z

Quality Gate passed

Issues
4 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

karnati007 and others added 13 commits August 7, 2025 06:27

Added the code files of Loss tracking line chart

74cf711

Merge branch 'development' of https://github.com/OneCommunityGlobal/H…

0d651b1

…ighestGoodNetworkApp into Ganesh_impl_loss_tracking_line_graph

Fixed the styles for the dark mode theme

0f22aa2

Fixed the styles for the dark mode theme

c88c4e3

Fixed the styles for the dark mode theme

ad2a39e

Fixed the styles for the dark mode theme

2bb7cbd

Fixed the reset filters btn and legend styles.

f1caaad

Fixed the reset filters btn and legend styles.

9941f8e

Updated the line graph to fix styling problems.

841c2df

saitejakaasoju changed the title ~~Sai teja loss tracking line graph~~ sai teja loss tracking line graph Mar 18, 2026

Merge origin/development into SaiTeja_loss_tracking_line_graph

2cb8cee

saitejakaasoju added the High Priority - Please Review First This is an important PR we'd like to get merged as soon as possible label Mar 31, 2026

Fix yarn.lock integrity after cache clean

8e46b4e

HemanthNidamanuru requested changes Apr 7, 2026

View reviewed changes

Anusha-Gali suggested changes Apr 9, 2026

View reviewed changes

saitejakaasoju added 2 commits April 8, 2026 22:30

Merge branch 'development' into SaiTeja_loss_tracking_line_graph

753db1c

Fix dark mode date input styling in material utilization chart

a3f21f2

saitejakaasoju closed this Apr 9, 2026

saitejakaasoju reopened this Apr 9, 2026

one-community mentioned this pull request Apr 12, 2026

Ganesh implements a loss tracking line graph #3876

Closed

saitejakaasoju added 2 commits April 14, 2026 14:28

fix: sync yarn lockfile for loss tracking line graph

92f02cb

Merge branch 'development' into SaiTeja_loss_tracking_line_graph

63dce4d

Anusha-Gali suggested changes Apr 16, 2026

View reviewed changes

saitejakaasoju added 2 commits April 21, 2026 14:26

Fix loss tracking chart dark mode and axis spacing

3743f84

Merge branch 'development' into SaiTeja_loss_tracking_line_graph

2ee0edb

saitejakaasoju added 2 commits April 23, 2026 00:34

Merge branch 'development' into SaiTeja_loss_tracking_line_graph

1b2d8e3

Update yarn lockfile after merge resolution

8de602c

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

sai teja loss tracking line graph#5016

sai teja loss tracking line graph#5016
saitejakaasoju wants to merge 23 commits intodevelopmentfrom
SaiTeja_loss_tracking_line_graph

saitejakaasoju commented Mar 18, 2026

Uh oh!

netlify Bot commented Mar 18, 2026 •

edited

Loading

Uh oh!

HemanthNidamanuru left a comment

Uh oh!

Nirali164 commented Apr 8, 2026

Uh oh!

Anusha-Gali left a comment

Uh oh!

saitejakaasoju commented Apr 9, 2026

Uh oh!

saitejakaasoju commented Apr 9, 2026

Uh oh!

Anusha-Gali left a comment

Uh oh!

saitejakaasoju commented Apr 21, 2026

Uh oh!

sonarqubecloud Bot commented Apr 23, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Uh oh!

Conversation

saitejakaasoju commented Mar 18, 2026

Description

Related PRS (if any):

Main changes explained:

How to test:

Screenshots or videos of changes:

Note:

Uh oh!

netlify Bot commented Mar 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for highestgoodnetwork-dev ready!

Uh oh!

HemanthNidamanuru left a comment

Choose a reason for hiding this comment

Uh oh!

Nirali164 commented Apr 8, 2026

Uh oh!

Anusha-Gali left a comment

Choose a reason for hiding this comment

Uh oh!

saitejakaasoju commented Apr 9, 2026

Uh oh!

saitejakaasoju commented Apr 9, 2026

Uh oh!

Anusha-Gali left a comment

Choose a reason for hiding this comment

Uh oh!

saitejakaasoju commented Apr 21, 2026

Uh oh!

sonarqubecloud Bot commented Apr 23, 2026

Quality Gate passed

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

netlify Bot commented Mar 18, 2026 •

edited

Loading