Harshavarma - Added alignment changes in "Resources Usage" chart

[harshavarma29]

Description

Changed the alignment of the graph to match the graph in Figma design

Related PRS (if any):

This frontend PR is related to the development backend PR.

How to test:

1. Check into the current branch
2. Do npm install, and npm run start:local to run this PR locally
3. Clear site data/cache
4. Log in as admin user
5. Verify the "Resources Usage" chart (http://localhost:5173/communityportal/reports/resourceusage) matches the Figma design (https://www.figma.com/design/OQsWvhGlpWUvaPXwLEiawF/HGN-Phase3---Social-Architecture-Management-and-Tracking-System?node-id=3572-6843&t=JEsiownKuvnuo9QT-0).
6. Verify this new feature works in dark mode.

Screenshots or videos of changes:

test_video.mp4

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	f1f266c
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6a221842760f830008b1003b
😎 Deploy Preview	https://deploy-preview-5311--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

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

[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

[DeepighaJ]

• Tested the PR locally and the graph looks great.
• The Y-axis label "Amount" appears in multiple locations ie., one"Amount" appears on the left side and another near the legend/right side and differs from the design. Please verify whether duplicate axis labels are intended.
• Dark mode dropdown can be improved otherwise looks good.

[HemanthNidamanuru]

Hi,

I tested this locally following the steps provided and found 1 issue:

The dropdown needs styling improvement in dark mode.

Everything else is looking good!

[Jaden300]

Tested locally following the provided steps. The graph alignment looks good overall. Requesting changes for the following:

1. Dark mode dropdown styling
   The dropdown is difficult to read in dark mode - text and background colors have low contrast. This has also been flagged by previous reviewers. Please improve the dropdown styling for dark mode.

2. Unintentional "|" character near "Insights"
   There appears to be a stray "|" character next to "Insights" that looks unintentional. Please verify and remove if not needed.

Everything else looks good - the chart alignment matches the Figma design, the feature works as expected, and CSS Modules are used correctly with no generic class names.

[Mahitha-pasupuleti]

Tested locally and the feature works as expected. Requesting minor changes:

• Improve dropdown styling in dark mode for better readability.
• Verify the duplicate "Amount" label on the graph; it appears both on the Y-axis and near the legend.

Other than these minor issues, the graph alignment and overall implementation look good.

[Abhi-R0211]

Hi, I tested locally on branch harshavarma_icons_to_filters, logged in as admin, navigated to http://localhost:5173/communityportal/reports/resourceusage. Here is my analysis:

What's Working Well

• Chart bar alignment looks correct in both light and dark mode — bars are properly spaced and sized, matching the Figma layout

• Hover tooltip displays Returned/Loaned values correctly in both modes
• Mobile layout stacks chart and Insights panel correctly at 375px in light mode

---

Issues

1. Stray | character before "Insights" heading — still present
   The pipe character (|Insights) is still visible in dark mode at mobile width.

2. "Amount" label — alignment
   "Amount" appears both as the Y-axis label on the top-left and again near the legend on the top-right. Would recommend moving the legend to the bottom of the graph for better clarity.

3. Dark mode dropdown — low contrast text still unresolved
   The filter dropdown in dark mode shows grey text on a dark background with insufficient contrast.

[mahathiganimi]

"Pull Request Unit Test / test" is failing, please check the logs and fix before this can be merged. Merge conflict needs to be resolved too.
Mobile view tooltip overlap: on mobile (iPhone 14 Pro Max, ~430px), hovering over a bar in the chart shows a tooltip that overlaps and covers the bars beneath it, making the chart hard to read. Could suggest changes with filter palette in dark mode for readability.

Given the failing test, merge conflicts, and the minor tooltip issues, requesting changes before this can be approved.

[beblicarl]

The "Pull Request Unit Test / test" check is currently failing. Please review the logs and address the issue before the PR can be merged. There are also merge conflicts that need to be resolved.

In the mobile view, the chart tooltip appears to cover underlying bars when a bar is selected, which affects readability. It may also be worth considering adjustments to the filter color palette in dark mode to improve visibility and contrast.

Due to the failing test, unresolved merge conflicts, and the tooltip-related usability concerns, I am requesting changes before approving this pull request.