Saurabh taking over for Saicharan - Implement Project Status Donut Chart (Frontend) by Saicharan1505 · Pull Request #4040 · OneCommunityGlobal/HighestGoodNetworkApp

Saicharan1505 · 2025-09-07T22:34:52Z

Description

Implements Phase 2 Summary Dashboard: Project Status Donut Chart (Frontend).
This feature adds a donut chart visualization with Active, Completed, and Delayed projects, supporting date filters and tooltips.
Implements # (Phase 2 Action Item)

Related PRS (if any):

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

Main changes explained:

Created ProjectStatus.jsx component for donut chart visualization.
Added From Date and To Date filters using react-datepicker.
Integrated with backend API via projectStatusService.js.
Implemented hover tooltips showing project counts and percentages.
Displayed total projects count at the center of the donut chart.
Styled components with CSS modules for consistent UI.
Added right-side panel displaying numeric values for Active, Completed, and Delayed projects.

How to test:

Check out the current branch(or)
Check into this branch:
git fetch origin feature/project-status-donut-frontend
git checkout feature/project-status-donut-frontend
Run npm install and npm run start:local.
Clear site data/cache.
Log in as admin user.
Go to: http://localhost:5173/projectstatus.
Verify:
- Donut chart renders with Active, Completed, and Delayed segments.
- From/To date filters work correctly.
- Hover tooltips display counts and percentages.
- Total projects count is shown at chart center.
- Right-side panel shows correct numbers for each category.

Screenshots or videos of changes:

netlify · 2025-09-07T22:34:57Z

❌ Deploy Preview for highestgoodnetwork-dev failed.

Name	Link
🔨 Latest commit	`821a383`
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6a331fc65860b90008050b14

akshith312

Tested the PR locally. Applied the date range, chart renders based on the dates. Hover works for different categories and the respective data is displayed in the right section of the page.

Prem203

I have tested the PR with an admin account.

The chart is displayed correctly with the data visible on hover and it matched with the data shown on the side. Although there are several factors which needs to be handled.

On changing to dark mode there is no visible change to the component.
The date filter allows end date before start date and it does not throw any error messages. The chart vanishes on this instant and the values on the right also reflect the previous value instead of responsible error message.

Swetha-1306

Tested the PR according to the instructions given, the chart and it's data are not being fetched even when the date filter is applied.

SnelPatare · 2025-09-30T00:57:21Z

Tested this PR. The chart is not displayed with or without dates.

- Removed package-lock.json to avoid conflicts - Updated yarn.lock to resolve Windows-specific package issues - Fixed platform compatibility for Linux/macOS CI environments

- Add --ignore-platform flag to yarn install commands in all workflows - Fixes Windows-specific package installation errors on Linux CI environment - Resolves @rollup/rollup-win32-x64-msvc platform incompatibility issues

- Add secure token retrieval with error handling - Improve error messages and user feedback - Add loading and error states with retry functionality - Enhance service error handling with proper token validation - Fix SonarCloud security hotspot and reliability issues - Reduce code duplication by improving error handling patterns

Aswin20010

Reviewed PR #4040+1709 (Project Status Donut Chart Visualization). Verified proper integration with backend and correct rendering of the donut chart with Active, Completed, and Delayed project segments. Confirmed hover tooltips display accurate counts and percentages, and total project count appears at the chart center. Tested From/To date filters for functional accuracy and verified numeric data alignment in the right-side panel. Checked CSS module styling consistency and responsiveness. No functional or UI regressions found — approved the PR.

Anusha-Gali

Hi Juhitha,

As per your request to review i had ran your PR locally and the issue still exists.

roshini1212

Tested this PR, all core functionality works perfectly at http://localhost:5173/projectstatus: the donut chart renders Active/Completed/Delayed segments correctly, From/To date filters function properly, hover tooltips display accurate counts and percentages, total projects count appears at the chart center, and the right-side panel shows correct category numbers.

However, there's one minor issue in dark mode where the date picker text becomes invisible (white-on-white contrast problem).

maithili20 · 2026-02-10T21:15:47Z

Hi @vamsidharpanithi
I am trying to review your PR and I am geting below error. I have checked out of your branches both FE and BE. But still the 404 error is there.

sonarqubecloud · 2026-03-01T19:45:25Z

Quality Gate passed

Issues
7 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

Juhitha-Reddy · 2026-03-03T03:34:27Z

Resolved merge conflicts and tested locally. Please verify

Screen.Recording.2026-03-02.at.10.32.27.PM.mov

naznin07 · 2026-03-07T14:57:32Z

+    setPending(true);
+    setError('');
+    try {
+      const token = getToken();


In token retrieval add authorization header.

Anusha-Gali

Hi Juhitha,

I re-reviewed your PR locally, thanks for fixing the calendar issue however the hover and tooltip appears to be broken. There is no tooltip being displayed and when i hover on two of the three status the chart freezes.

4040.mp4

ManojPuttaswamy · 2026-03-18T03:08:18Z

+  // Secure token retrieval with error handling
+  const getToken = () => {
+    try {
+      return localStorage.getItem('token') || null;


Token retrieval should be handled by the API service layer or read from Redux state, not accessed directly in a component. The token is re-read on every load call rather than being reactive to auth state changes.

ManojPuttaswamy · 2026-03-18T03:10:29Z

+      <div className={styles.leftSection}>
+        {/* Header + Filters */}
+        <div className={styles.header}>
+          <div className={styles.title}>PROJECT STATUS</div>


The same title is shown both above the component and inside the chart itself, which is redundant.

SharadhaKasiviswanathan · 2026-03-29T05:29:26Z

I tested this locally with the frontend PR against the linked backend PR (#1709). The page renders and the date filter updates the right-side counts correctly. For 2025-01-01 to 2025-12-31, the UI showed '345 / 113 / 17', which matched the API response.

One issue still needs to be fixed before merge:

The donut chart tooltip throws 'TypeError: pct?.toFixed is not a function'. The frontend calls 'toFixed(1)' on 'data.percentages.*', but the backend currently returns those percentage values as strings (for example "72.6"), so the tooltip logic breaks during chart interaction. Please either return numeric percentages from the backend or coerce them to numbers in the frontend before calling 'toFixed'.

Also, the backend is currently calculating 'delayedProjects' from inactive non-archived projects (isActive === false && !isArchived). If the intended metric is truly 'Delayed' rather than 'Inactive', that aggregation/label should be aligned.

sonarqubecloud · 2026-04-06T02:50:07Z

Quality Gate passed

Issues
15 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

rajanidi1999

Hi,
Your UI looks clean and structured, but there are a few issues worth addressing. The main problem is the failed data fetch state—right now it only shows a generic error message, so it would be better to include more context (e.g., network error vs. no data) and possibly auto-retry or logging for debugging. The date filters are clear, but they should have validation (like preventing invalid ranges) and maybe default values to improve UX. The stats panel on the right is neat, though showing all zeros without explanation can feel confusing—consider a placeholder or tooltip. Also, ensure loading states (spinners/skeletons) are visible before the error appears. Overall, solid layout, but improving error handling, feedback, and edge-case UX will make it much more robust.

kunchalasireesha

Hi Shreya, it looks like this PR currently has merge conflicts with the base branch. Could you please rebase or merge the latest changes from development into your branch and resolve the conflicts? Once the build passes, I’ll finish the review.

DeepighaJ

Checked into current branch.
The error "Failed to fetch project status data" is displayed. Also resolve the merge conflicts as well.

amaresh2001

Tested locally on branch: feature/project-status-donut-frontend with backend on feature/project-status-donut-backend

Testing:

Donut chart renders correctly with Active (Purple), Completed (Teal), and Delayed (Orange) segments
Total Projects count displays correctly in the chart center
Right-side panel shows correct Active/Completed/Delayed counts
From/To date filters update the chart correctly
Hover tooltips show segment counts and percentages
Today's date displays below the chart

Issue:
In dark mode, the From Date and To Date input fields have a white background, but the selected date text is not visible; the text color blends into the white background, making entered dates unreadable.
This PR has active merge conflicts that must be resolved before merging.

the selected dates are not visible in the fields in dark mode:

sonarqubecloud · 2026-06-17T22:30:39Z

Quality Gate passed

Issues
2 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

handikaharianto

Hi @Saicharan1505 , when I tried to review this PR, I received the following error message on the frontend side.

Furthermore, I also received more error messages in the command line.

Please resolve this issue.

feat: add project status donut chart with date filters (frontend)

c0252b3

Saicharan1505 mentioned this pull request Sep 7, 2025

Saurabh taking over for Saicharan - Project status summary API for donut chart (backend) OneCommunityGlobal/HGNRest#1709

Open

akshith312 previously approved these changes Sep 9, 2025

View reviewed changes

Prem203 suggested changes Sep 25, 2025

View reviewed changes

Swetha-1306 reviewed Sep 26, 2025

View reviewed changes

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 Sep 28, 2025

Saicharan1505 changed the title ~~Implement Project Status Donut Chart (Frontend)~~ Saicharan - Implement Project Status Donut Chart (Frontend) Oct 4, 2025

Saicharan1505 added 2 commits October 4, 2025 20:22

fix(routes): removed duplicate imports for LogTools and EquipmentUpdate

9b812e8

chore: rebuilt dependencies and finalized merge with development

265d805

Saicharan1505 force-pushed the feature/project-status-donut-frontend branch from b68d843 to 265d805 Compare October 5, 2025 01:18

Saicharan1505 and others added 6 commits October 4, 2025 22:02

chore: added regenerated yarn.lock for CI build

6ff47c5

fix: use cross-platform rollup build for CI compatibility

834d65e

chore: resolved merge conflicts and converted CSS to modules - FINAL FIX

546446d

chore: update yarn.lock to fix CI/CD platform compatibility issues

f3d98f5

- Removed package-lock.json to avoid conflicts - Updated yarn.lock to resolve Windows-specific package issues - Fixed platform compatibility for Linux/macOS CI environments

Saicharan1505 dismissed akshith312’s stale review via 8fdc776 October 21, 2025 19:00

Aswin20010 previously approved these changes Oct 22, 2025

View reviewed changes

Juhitha-Reddy added 2 commits November 3, 2025 16:16

merged development into feature/project-status-donut-frontend

f734534

Fix: regenerate lockfile for cross-platform compatibility

cda815d

Saicharan1505 dismissed Aswin20010’s stale review via cda815d November 6, 2025 01:12

Juhitha-Reddy added 4 commits November 12, 2025 20:50

Updated merge with developement branch

ae81e34

resolved package dependancy issue

b324dfc

Update yarn.lock

55ed766

Merge branch 'development' into feature/project-status-donut-frontend

c32da7e

Anusha-Gali suggested changes Jan 13, 2026

View reviewed changes

roshini1212 reviewed Jan 28, 2026

View reviewed changes

Juhitha-Reddy added 2 commits March 1, 2026 14:35

Merge branch 'development' into feature/project-status-donut-frontend

0dc0773

fix: Removed duplicate code

6bd80c7

Juhitha-Reddy requested a review from Anusha-Gali March 1, 2026 19:47

one-community changed the title ~~Vamsidhar taking over for Juhitha taking over for Saicharan - Implement Project Status Donut Chart (Frontend)~~ Juhitha taking over for Saicharan - Implement Project Status Donut Chart (Frontend) Mar 2, 2026

naznin07 approved these changes Mar 7, 2026 •

edited

Loading

View reviewed changes

naznin07 suggested changes Mar 7, 2026

View reviewed changes

Anusha-Gali suggested changes Mar 17, 2026

View reviewed changes

ManojPuttaswamy requested changes Mar 18, 2026

View reviewed changes

Juhitha-Reddy added 3 commits April 5, 2026 22:35

Merged development into local

20bbd29

Fixed tooltip issues and updated authentication handler

a8e30e0

Fixed lint issues

ac068c0

rajanidi1999 suggested changes Apr 14, 2026

View reviewed changes

one-community changed the title ~~Juhitha taking over for Saicharan - Implement Project Status Donut Chart (Frontend)~~ Vamsidhar taking over for Saicharan - Implement Project Status Donut Chart (Frontend) Apr 26, 2026

ShreyaMP1999 changed the title ~~Vamsidhar taking over for Saicharan - Implement Project Status Donut Chart (Frontend)~~ Shreya P taking over for Vamsidhar taking over for Saicharan - Implement Project Status Donut Chart (Frontend) Apr 27, 2026

kunchalasireesha requested changes May 2, 2026

View reviewed changes

DeepighaJ requested changes May 19, 2026

View reviewed changes

amaresh2001 requested changes May 30, 2026

View reviewed changes

one-community changed the title ~~Shreya P taking over for Vamsidhar taking over for Saicharan - Implement Project Status Donut Chart (Frontend)~~ Saurabh taking over for Saicharan - Implement Project Status Donut Chart (Frontend) May 31, 2026

unknown added 3 commits June 13, 2026 13:48

Resolve merge conflicts with origin/development

4f9be02

Resolve merge conflicts with origin/development

7227500

Resolve merge conflicts with origin/development

821a383

handikaharianto requested changes Jun 18, 2026

View reviewed changes

Uh oh!

Conversation

Saicharan1505 commented Sep 7, 2025 • edited by one-community Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related PRS (if any):

Main changes explained:

How to test:

Screenshots or videos of changes:

Uh oh!

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

Uh oh!

❌ Deploy Preview for highestgoodnetwork-dev failed.

Uh oh!

akshith312 left a comment

Choose a reason for hiding this comment

Uh oh!

Prem203 left a comment

Choose a reason for hiding this comment

Uh oh!

Swetha-1306 left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

SnelPatare commented Sep 30, 2025

Uh oh!

Aswin20010 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!

roshini1212 left a comment

Choose a reason for hiding this comment

Uh oh!

maithili20 commented Feb 10, 2026

Uh oh!

sonarqubecloud Bot commented Mar 1, 2026

Quality Gate passed

Uh oh!

Juhitha-Reddy commented Mar 3, 2026

Uh oh!

Uh oh!

naznin07 Mar 7, 2026

Choose a reason for hiding this comment

Uh oh!

naznin07 Mar 8, 2026

Choose a reason for hiding this comment

Uh oh!

Anusha-Gali left a comment

Choose a reason for hiding this comment

Uh oh!

ManojPuttaswamy Mar 18, 2026

Choose a reason for hiding this comment

Uh oh!

ManojPuttaswamy Mar 18, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

SharadhaKasiviswanathan commented Mar 29, 2026

Uh oh!

sonarqubecloud Bot commented Apr 6, 2026

Quality Gate passed

Uh oh!

rajanidi1999 left a comment

Choose a reason for hiding this comment

Uh oh!

kunchalasireesha left a comment

Choose a reason for hiding this comment

Uh oh!

DeepighaJ left a comment

Choose a reason for hiding this comment

Uh oh!

amaresh2001 left a comment

Choose a reason for hiding this comment

Uh oh!

sonarqubecloud Bot commented Jun 17, 2026

Quality Gate passed

Uh oh!

handikaharianto left a comment

Saicharan1505 commented Sep 7, 2025 •

edited by one-community

Loading

netlify Bot commented Sep 7, 2025 •

edited

Loading

Swetha-1306 left a comment •

edited

Loading