Ganesh implements a loss tracking line graph by karnati007 · Pull Request #3876 · OneCommunityGlobal/HighestGoodNetworkApp

karnati007 · 2025-08-09T21:52:20Z

Description

Related PRS (if any):

…

Main changes explained:

Created LossTrackingLineChart.jsx file to implement line chart of loss tracking using recharts library.
Created LossTrackingLineChart.css file to define the styles for the filters and chart for both light and dark themes.
Updated WeeklyProjectSummary.jsx file to import line chart into financials sections.
…

How to test:

check into current branch
do npm install and npm run start:local to run this PR locally.
Clear site data/cache
log as admin user
go to dashboard→ Reports→ Total Construction Summary→ Financials (Loss Tracking Line Chart).
verify the filters and dark mode.

Screenshots or videos of change

Light Theme:
https://github.com/user-attachments/assets/20fc4c25-78b7-4f93-add5-b4274486596e

Dark Theme:

…ighestGoodNetworkApp into Ganesh_impl_loss_tracking_line_graph

netlify · 2025-08-09T21:52:25Z

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	`841c2df`
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/68e325a5b74e9b0008eb7d62
😎 Deploy Preview	https://deploy-preview-3876--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.

nikitha2n · 2025-08-09T22:13:48Z

I navigated to Dashboard → Reports → Total Construction Summary → Financials (Loss Tracking Line Chart). Verified that all filters work correctly and the dark mode displays properly without issues. Everything looks good!

PR_3876.mp4

ShravyaKudlu

Wow this looks great, and better then before, I have a few observations

in dark mode the graph x-axis and yaxis and datapoints is black, which isnt seen clearly, if there is any way to change that

2. in light mode the reset filter button is not seen

3. from and to? what kind of datapoints were expected from user?

sohailuddinsyed

The filter look great in light mode, however, in dark mode the color of values on x and y-axis can be changed to a lighter one for better visibility.

aseemdeshmukh · 2025-08-10T22:19:31Z

Navigated to to dashboard→ Reports→ Total Construction Summary→ Financials (Loss Tracking Line Chart); reviewed for both light and dark mode.

Observations:

For Light mode, "Reset Filters" button text is not clearly visible under Loss Tracking Line Chart
For Dark mode, "Planned vs Actual Cost" text is not clearly readable
There should be "Reset Filters" button for "Planned vs Actual Cost" like the existing button under "Loss Tracking Line Chart"

Naveen-Kumar-Reddy-27

Tested PR #3876 locally against development. Verified UI and identified the following issues:
Dark Mode Text Visibility
Low contrast makes text under "Planned vs Actual Cost" (e.g., date fields, project filters) hard to read.

Light Mode Button Contrast
The button under "Loss Tracking Line Chart" blends into the light background.
Missing "Reset Filters" Button
"Planned vs Actual Cost" lacks a "Reset Filters" button, unlike the Loss Tracking section.

Padding/Alignment Issues
Adding some space or padding between the X-axis label "Time (months)" and the year legends (2022, 2023, 2024) would improve readability and overall look.

Yi9569 · 2025-08-13T23:51:41Z

Approving

Light mode and dark mode both are working as expected.

JERRRRY · 2025-08-15T01:05:28Z

In dark mode, i suggested that the color of start date and end date could be lighter.

Guirong-Wu

PR reviewed. The input box sizes of the date and selection fliters are different and the reset button is not aligned with the date selection box, hope this could be fixed.
And if there could be a pop-out reminder saying the the start date should be earlier than the end date could be much better.

surajmaraboina · 2025-08-15T21:48:59Z

I navigated to Loss Tracking Line Chart. All filters work correctly and the dark mode displays properly without issues. Everything looks great.(3876)

SallaguntaRaahul

I reviewed PR-3876.

In light mode, the Reset Filters button is not clearly visible and should have higher contrast.

For each material, only one year of data is currently being returned. This means a material shows data tied to a single year, but ideally each material should support data and tracking across multiple years, not just one.

Also, I noticed stray “📊 Card” and “📊 Big Card” labels at the bottom of the dashboard that look like leftover demo components—these should be removed to avoid UI clutter.

On the line chart, the x-axis label (“Time (months) – 2022”) overlaps with the tick values, which makes it hard to read. This should be repositioned or styled differently

In dark mode, the same issues persist (year–material restriction, x-axis label overlap, stray demo labels), and in addition the text labels in the Planned vs Actual Cost chart are rendered in dark colors, which makes them nearly invisible against the dark background.

Swetha-1306 · 2025-08-16T17:51:49Z

Tested the PR, All the filter drop downs work well in retrieving the respective data for the selected filters and date range. There are minor issues like text visibility in "Reset All" button in light mode. Apart from that everything else looks fine.

sourabhbagde

Tested the feature and it works well overall. Few styling improvements recommended:

Improve typography hierarchy (clearer headers, smaller axis/legend text).
Reset filter button (not properly readable text color)

On hovering graph - Month text is not readable as same with background color black.

aseemdeshmukh

Navigated to to dashboard→ Reports→ Total Construction Summary→ Financials (Loss Tracking Line Chart); reviewed for both light and dark mode.

Observations:

For Light mode, "Reset Filters" button text is not clearly visible under Loss Tracking Line Chart
For Dark mode, "Planned vs Actual Cost" text is not clearly readable
There should be "Reset Filters" button for "Planned vs Actual Cost" like the existing button under "Loss Tracking Line Chart"

srushti2403

Tested the PR locally, and the filters and ligh/dark mode work properly. Though, I have a couple of observations.
In light mode, the Reset Filters button text is not very visible.

In dark mode, everything looks good, except the datapoints on x-axis and y-axis in bar graph. Not visible in dark mode.

vishnu-ing

The PR has been reviewed for code changes and the functionality is working good which has been tested in local. As per the suggestions in previous comments in PR, there can be some changes in text color in dark and light modes to make the UI better. No new review ccomments, Everything has been covered in previous comments. Attaching screenshots for current UI with graph data and filters applied in different modes.

akshith312

Tested locally. All the filters and buttons seem to work properly.
Just the improvements mentioned in other PR's regarding UI enhancements would make it visually better appealing.

SreePujitha01

Tested the Reports → Total Construction Summary → Financials (Loss Tracking Line Chart) section. The filters work correctly and dark mode is functional. However, the chart styling could be improved—using different colors would help make the data more visible and clear.

khan-zoha

Reviewed PR 3876. The light and dark mode works as expected. Great work!

RitzzzZ2021

I navigated to Dashboard → Reports → Total Construction Summary → Financials (Loss Tracking Line Chart) as required. When I applied filters for different materials, it instead filtered by year. There are also no tags available for materials. Additionally, the chart design could be improved to make it clearer for readers.

Nhujarski

I tested the PR using the above steps. Filters work as expected and looks good in dark mode. One suggestion I had for light mode was either the font color or background color of the "Reset Filters" button be changed for readability.

aryanrachala54

The core functionality looks good, and filters are mostly working as expected. Before merging, a few key issues still need to be addressed:

Improve text contrast for better readability in both light and dark modes (e.g., axis labels, "Reset Filters" button).
Fix material filter logic (currently filters by year).
Add "Reset Filters" button to the "Planned vs Actual Cost" section.
Remove stray “📊 Card” components.
Add validation to ensure start date is before end date.

rohanrastogi311

Hi Ganesh,

I'm having a launch error due to a missing module. Please review and let me know to re-review.

Anusha-Gali

Hi Ganesh,

I have reviewed your PR locally and it works as per requirement.

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>

one-community · 2026-04-12T21:11:00Z

Redone with this PR: #5016

one-community · 2026-04-12T21:11:04Z

Redone with this PR: #5016

karnati007 added 6 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

karnati007 closed this Aug 9, 2025

karnati007 reopened this Aug 9, 2025

karnati007 assigned nikitha2n Aug 9, 2025

karnati007 requested a review from vamsikrishna1704 August 9, 2025 22:26

karnati007 unassigned nikitha2n Aug 9, 2025

karnati007 added the High Priority - Please Review First This is an important PR we'd like to get merged as soon as possible label Aug 9, 2025

ShravyaKudlu requested changes Aug 9, 2025

View reviewed changes

sohailuddinsyed reviewed Aug 10, 2025

View reviewed changes

Naveen-Kumar-Reddy-27 reviewed Aug 13, 2025

View reviewed changes

Guirong-Wu suggested changes Aug 15, 2025

View reviewed changes

surajmaraboina approved these changes Aug 15, 2025

View reviewed changes

SallaguntaRaahul suggested changes Aug 16, 2025

View reviewed changes

Swetha-1306 approved these changes Aug 16, 2025

View reviewed changes

sourabhbagde reviewed Aug 23, 2025

View reviewed changes

aseemdeshmukh requested changes Aug 23, 2025

View reviewed changes

srushti2403 approved these changes Aug 24, 2025

View reviewed changes

vishnu-ing previously approved these changes Aug 26, 2025

View reviewed changes

karnati007 requested review from Guirong-Wu, SallaguntaRaahul, ShravyaKudlu and aseemdeshmukh August 30, 2025 20:17

karnati007 force-pushed the Ganesh_impl_loss_tracking_line_graph branch from a5a22d0 to 2bb7cbd Compare August 30, 2025 20:26

karnati007 added 2 commits August 31, 2025 02:59

Fixed the reset filters btn and legend styles.

f1caaad

Fixed the reset filters btn and legend styles.

9941f8e

akshith312 previously approved these changes Sep 5, 2025

View reviewed changes

SreePujitha01 suggested changes Sep 6, 2025

View reviewed changes

khan-zoha approved these changes Sep 13, 2025

View reviewed changes

RitzzzZ2021 suggested changes Sep 14, 2025

View reviewed changes

Nhujarski suggested changes Sep 26, 2025

View reviewed changes

aryanrachala54 suggested changes Sep 28, 2025

View reviewed changes

karnati007 requested review from Nhujarski, RitzzzZ2021, SreePujitha01, aryanrachala54, sohailuddinsyed and vishnu-ing September 30, 2025 00:26

Updated the line graph to fix styling problems.

841c2df

karnati007 dismissed vishnu-ing’s stale review via 841c2df October 6, 2025 02:12

karnati007 dismissed akshith312’s stale review via 841c2df October 21, 2025 20:10

rohanrastogi311 requested changes Jan 22, 2026

View reviewed changes

Anusha-Gali approved these changes Feb 3, 2026

View reviewed changes

saitejakaasoju mentioned this pull request Mar 18, 2026

sai teja loss tracking line graph #5016

Open

one-community closed this Apr 12, 2026

Uh oh!

Conversation

karnati007 commented Aug 9, 2025

Description

Related PRS (if any):

Main changes explained:

How to test:

Screenshots or videos of change

Uh oh!

netlify Bot commented Aug 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for highestgoodnetwork-dev ready!

Uh oh!

nikitha2n commented Aug 9, 2025

Uh oh!

ShravyaKudlu left a comment

Choose a reason for hiding this comment

Uh oh!

sohailuddinsyed left a comment

Choose a reason for hiding this comment

Uh oh!

aseemdeshmukh commented Aug 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Naveen-Kumar-Reddy-27 left a comment

Choose a reason for hiding this comment

Uh oh!

Yi9569 commented Aug 13, 2025

Approving

Uh oh!

JERRRRY commented Aug 15, 2025

Uh oh!

Guirong-Wu left a comment

Choose a reason for hiding this comment

Uh oh!

surajmaraboina commented Aug 15, 2025

Uh oh!

SallaguntaRaahul left a comment

Choose a reason for hiding this comment

Uh oh!

Swetha-1306 commented Aug 16, 2025

Uh oh!

sourabhbagde left a comment

Choose a reason for hiding this comment

Uh oh!

aseemdeshmukh left a comment

Choose a reason for hiding this comment

Uh oh!

srushti2403 left a comment

Choose a reason for hiding this comment

Uh oh!

vishnu-ing left a comment

Choose a reason for hiding this comment

Uh oh!

akshith312 left a comment

Choose a reason for hiding this comment

Uh oh!

SreePujitha01 left a comment

Choose a reason for hiding this comment

Uh oh!

khan-zoha left a comment

Choose a reason for hiding this comment

Uh oh!

RitzzzZ2021 left a comment

Choose a reason for hiding this comment

Uh oh!

Nhujarski left a comment

Choose a reason for hiding this comment

Uh oh!

aryanrachala54 left a comment

Choose a reason for hiding this comment

Uh oh!

rohanrastogi311 left a comment

Choose a reason for hiding this comment

Uh oh!

Anusha-Gali left a comment

Choose a reason for hiding this comment

Uh oh!

one-community commented Apr 12, 2026

Uh oh!

netlify Bot commented Aug 9, 2025 •

edited

Loading

aseemdeshmukh commented Aug 10, 2025 •

edited

Loading