Sriamsh - Implement “Project Status” Donut Chart

[Sriamshreddy000]

Description

Related PRS (if any):

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

Main changes explained:

• Added new component ProjectStatusDonutChart.jsx to render the donut chart, summary panel, and date filter controls.
• Added stylesheet ProjectStatusDonutChart.module.css for layout, chart positioning, and visual styling.
• Integrated the donut chart into the BM Dashboard by updating BMDashboard.jsx.
• Implemented API integration with JWT authorization to retrieve project status data from /api/projects/status.
• Added fallback UI for cases where all values are zero (expected dev environment behavior).
• Verified backend endpoint behavior using ThunderClient and browser Network tab.
• No backend modifications were made or required.

How to test:

1. check into current branch
2. do npm install and npm start to run this PR locally
3. Clear site data/cache
4. log as admin user
5. Navigate to /BMDashboard.
6. verify if
   • The Project Status Donut Chart renders without errors.
   • The Network tab shows a successful GET request to /api/projects/status.
   • If all returned values are zero (active, delayed, completed), the fallback message “No project status data available.” appears.

Screenshots or videos of changes:

Note:

• Temporary mock data used during testing is included but commented out. Please uncomment it to view the donut chart with sample values.
• The backend currently returns zero counts for all project status categories in Dev and this is expected.
• No backend changes were made in this PR. The donut chart relies on the existing /api/projects/status endpoint.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	1d01292
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/699d7d325dd9a70008c7a609
😎 Deploy Preview	https://deploy-preview-4495--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.

[sonarqubecloud]

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

[sayali-2308]

• Branch: sriamsh_project_status_donut_chart_frontend
• Backend: Development branch
• Tested on: Windows, Chrome
• Date: February 9, 2026

What Works:

1. Donut Chart Display: Chart renders correctly with three colored segments (Purple: Active Projects, Cyan: Completed Projects, Pink: Delayed Projects)
2. Mock Data: Successfully displays mock data (Total: 50, Active: 20, Completed: 20, Delayed: 10)
3. Summary Panel:** Right-side panel displays current date (Mon, Feb 9, 2026) and project counts with proper formatting
4. Date Filters: Start date and end date input fields render correctly with proper format
5. Apply Button: Blue "Apply" button displays and is clickable
6. Center Label: "Total Projects: 50" displays correctly in donut center
7. Legend: Chart legend shows all three categories with correct colors
8. Dark Mode: Feature works perfectly in dark mode - all text readable, good contrast, chart visible
9. Light Mode: Feature works perfectly in light mode
10. No Console Errors: Console clean with no errors or warnings

Code Modification Required:
During testing, discovered that the mock data placement in the original code caused the component to display "Unable to load project status." error message.

Issue: The mock data was positioned AFTER the axios API call (lines 35-41), which meant the API call would execute first and potentially throw an error before reaching the mock data.

Solution Applied: Moved mock data block to immediately after setError(null) (before the API call) and added setLoading(false) before the return statement. This ensures mock data loads without triggering the error state.

Note:
As documented in PR description, backend returns zero counts in Dev environment, which is expected. Mock data was uncommented for testing purposes to verify chart functionality, colors, and layout as specified.

Feature works as described. Chart displays correctly, dark mode compatible, and integrates cleanly into BM Dashboard. Mock data code placement should be adjusted as noted above before final merge to prevent error messages during development testing

[Anusha-Gali]

Hi Sriamsh,

I have reviewed your PR locally and was able to load the chart with the help of your mock data. However found the below issues:

• The Total Project is not in the center of the donut
• The chart is not adapted to dark mode
• The dates, i am able to select to date before the from data
• I edited the values to the one mentioned in the document and reloaded the page, however there is no difference in the % length of the different colored semi circle edges
• The label are very close to the chart with no spacing
• The chart is not mobile responsive

No data

With data

Dark mode

Document data

Responsiveness

[rohanrastogi311]

Hi Sriamsh,

Not sure why but no project status data is loading.

[Sriamshreddy000]

Hi Sriamsh,

I have reviewed your PR locally and was able to load the chart with the help of your mock data. However found the below issues:

• The Total Project is not in the center of the donut
• The chart is not adapted to dark mode
• The dates, i am able to select to date before the from data
• I edited the values to the one mentioned in the document and reloaded the page, however there is no difference in the % length of the different colored semi circle edges
• The label are very close to the chart with no spacing
• The chart is not mobile responsive

Hi Anusha,

I’ve pushed updates addressing the feedback (center alignment, responsiveness, legend spacing, date validation, and percentage rendering).
Regarding dark mode, I attempted to apply dark styling within this component, but the application’s theme appears to be managed at a global level. Even when setting dark background colors directly, they are overridden by the existing theme styles. I have left the implementation as-is for now to avoid conflicting with the current theme handling.

[Sriamshreddy000]

Hi Sriamsh,

Not sure why but no project status data is loading.

Hi Rohan,
Just to confirm, did you uncomment the mock data block in the code? If it’s still commented out, the API returns empty values by default. As a result, the chart will display “No project status data available.”

[Anusha-Gali]

Hi Sriamsh,

Thanks for fixing the issues. Do mention in your description that you have not implemented backend with the reason. One more suggestion that i forgot to mention was the no data warning message, it would be great if you could center it. However everything else works hence approving the PR.

[one-community]

Anusha's requests in her last comment need to be addressed

[sonarqubecloud]

Quality Gate passed

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

[Sriamshreddy000]

Hi Sriamsh,

Thanks for fixing the issues. Do mention in your description that you have not implemented backend with the reason. One more suggestion that i forgot to mention was the no data warning message, it would be great if you could center it. However everything else works hence approving the PR.

Anusha's requests in her last comment need to be addressed

I have added a note in the PR description clarifying the backend changes. I have also centered the “No project status data available.” message as suggested.