SaiKrishna_adding donut chart for planned cost breakdown_frontend

[saikrishnaraoyadagiri]

Description

Summary Dashboard: Create a Donut Chart showing Planned Cost Breakdown by Type of Expenditure (WIP Sai Krishna)

The chart should display four categories: Plumbing, Electrical, Structural, and Mechanical, each represented by a different color.
The percentage of the total cost for each category should be displayed next to it in hover text.
Include two filters:
A Project filter to view the cost breakdown for a specific project.
Frontend Requirements
Donut Chart Component:
Use chart library like Recharts, Chart.js, or Nivo.
Four fixed segments:
Plumbing
Electrical
Structural
Mechanical
Distinct color for each.
Tooltip / Hover Text:
Show:
Category Name
Planned Cost
Percentage of Total Planned Cost
Filters:
Dropdown for:
Project Filter (list of available projects)
Legend:
Color-coded legend mapping category to color.
Title:
"Planned Cost Breakdown by Type of Expenditure"
API Integration:
Fetch planned cost data based on selected project.

Related PRS (if any):

This frontend PR is related to the #1699 backend PR.
…

Main changes explained:

• Added Plannedcostdonutchart.jsx, Plannedcostdonutchart.css, plannedcostservice.js, index.js
• updated routes.js
  …

How to test:

1. check out current branch for the front end and backend PR for the backend
2. do npm install and ... to run this PR locally
3. Clear site data/cache
4. log as admin user
5. go to http://localhost:5173/planned-costs
6. select the project from the dropdown with the data
7. You should be able to see the donut chart
8. On hovering the chart you should be able to see the legend and data related to the type in that legend

Screenshots or videos of changes:

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

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

[ShradhaMBhadrannavar]

Followed the test steps - selected a project from the dropdown (with available data) multiple times, but the donut chart didn’t render. Attached screenshots for your reference. Please review.

[sonarqubecloud]

Quality Gate passed

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

[saikrishnaraoyadagiri]

@ShradhaMBhadrannavar , Did you checkout the backend branch mentioned in the description to test this frontend PR ?

[ShradhaMBhadrannavar]

@ShradhaMBhadrannavar , Did you checkout the backend branch mentioned in the description to test this frontend PR ?

yes, I followed every step mentioned in the 'How to test' section.

[saikrishnaraoyadagiri]

@ShradhaMBhadrannavar , I didn't add it in the How to test because the backend PR number is already mentioned in the Related PR's section. So you might have not checked out the backend PR. So Please test this frontend with checking out the mentioned backend PR

[sonarqubecloud]

Quality Gate passed

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

[saikrishnaraoyadagiri]

@ShradhaMBhadrannavar , Did you checkout the backend branch mentioned in the description to test this frontend PR ?

yes, I followed every step mentioned in the 'How to test' section.

@ShradhaMBhadrannavar It is due to the change in db.js file, I fixed it, it will work now, please review

[Anusha-Gali]

Hi Sai Krishna,

I have tried to review your PR locally and have identified the below issues:

• The frontend does not load as it appears to be in your images.
• It is very difficult to find the project due to the huge number of list, it would be helpful if you could enable typing and the dropdown then reducing the projects based on characters typed
• The page does not appear to have dark mode enabled
• The total of the percentages crosses 100 in the donut chart

[sonarqubecloud]

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

[saikrishnaraoyadagiri]

@Anusha-Gali , Fixed the mentioned issues, please review it.

[Anusha-Gali]

Hi Sai Krishna,

Thanks for fixing all the issues, i have reviewed your PR again and it works as per all the requirements mentioned in both the modes.

[one-community]

Thank you all, merging!