Mahathi - fix: restore supplier performance and tools stoppage charts

[mahathiganimi]

Description

Related PRS (if any):

This frontend PR is related to the #2306 backend PR.
Previous Related PR https://github.com/OneCommunityGlobal/HighestGoodNetworkApp/pull/4442

Main changes explained:

1. Restored the Supplier Performance chart in the Tools and Equipment Tracking section.
2. Restored the Tools Stoppage chart that had also been removed from the current dashboard layout.
3. Reorganized the Tools and Equipment Tracking section into a cleaner responsive layout
4. Updated the Supplier Performance project dropdown to display project names instead of MongoDB project IDs.
5. Verified the Supplier Performance date filters work correctly with current development data.

How to test:

1. check into current branch
2. do npm install and ... to run this PR locally
3. Clear site data/cache
4. log as admin user
5. go to /bmdashboard/totalconstructionsummary
6. Open the tools and equipment tracking section
7. verify that the supplier's performance chart returns data for 30days, 6months and one year filter.
8. verify that the project selection dropdown now shows the project name instead of project ID

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	ba4e0e4
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6ac950d955f2640007739900
😎 Deploy Preview	https://deploy-preview-5448--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
0 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

[Adit0717]

Tested the frontend PR locally. Checked out the relevant branch.

Verified that supplier's performance chart renders properly based on date and project filters in both light and dark mode.

Although a minor issue exists in "Tools stoppage" bar chart. As soon as you pick a start date (before an end date is even selected), the chart already re-queries and shows "No data available for the selected filters." Because the "no data" message appears immediately, the section's content collapses, and the calendar dropdown ends up requiring you to scroll to reach it and pick the end date.

[DeepighaJ]

Verified project name is used in the dropdowns and filters are displaying values correctly.
Issue:
The Tools by Availability section filters(tools and project) are not clickable.

[linlin-husky]

Hi, mahathiganimi
Good Work!
I have checked the tools and equipment tracking section as an admin in light/dark modes, and verifed that the supplier's performance chart returns data for 30days, 6months and one year filter. And I also verified that the project selection dropdown now shows the project name instead of project ID, as shown below:

However, I also found out the below issues for further improvement:

Tools by Availability Section Issues:

Non-functional Dropdowns: The Tool(s) and Project dropdowns are not clickable and do not open or trigger any action when clicked.

Full-width Layout & Scaling: The section stretches across the entire screen width, making the dropdown bars excessively long with too much unused whitespace. Capping the container with a max-width or arranging the filters inline (e.g., in a multi-column/grid layout) would improve readability and visual hierarchy on desktop screens.

Tools Stoppage Chart:

• Functionality: Date filtering and chart rendering work as expected (data renders correctly even with a partial date selection if records exist).

• Minor UX Suggestion (Empty State Layout Shift):
  • When a selected date range has no matching data, the chart area collapses to a single line showing "No data available for the selected filters.".
  • While showing "No data" is logically correct, the sudden height collapse causes the open date picker popup to get cut off at the bottom of the screen.
  • Recommendation: Adding a min-height (matching the chart height) to the empty state container would prevent layout shifting and ensure the calendar dropdown remains fully visible.

[sonarqubecloud]

Quality Gate passed

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

[vidiyala99]

Tested ba4e0e4 with backend OneCommunityGlobal/HGNRest#2306 (b160af8) as Administrator, in dark and light mode, at 1400px, 768px and 375px. This branch is 279 commits behind development, so I tested it merged into current development (the merge is clean, no conflicts), which is what will actually ship. Page: /bmdashboard/totalconstructionsummary, Tools and Equipment Tracking.

What works:

• Supplier Performance shows project names. The project dropdown lists "Orientation and Initial Setup", "SiddharthTest", "XiaoFei test project 4", plus four "Unknown project (…9011)" to "(…9014)" entries for the seed IDs with no matching project (from the backend PR). Picking "Unknown project (…9011)" shows Supplier A at 95.8%, which matches the API (screenshot 1, light mode). On development the same dropdown shows raw IDs.
• Date filters return data: Last 30 Days (1 supplier), Last 3 Months (2), Last Year (3), ALL (4).
• Tools by Availability dropdowns work now (the earlier report that they weren't clickable): Project opens and lists "Building 1"; after picking it, Tool(s) lists Hammer, Power Drill and Circular Saw, and the chart loads (screenshot 2, dark mode). The filters are in two columns and the card is capped at 1100px, which addresses the earlier full-width comment.
• Tools Stoppage start date: picking only a start date no longer re-queries or collapses the chart; the calendar stays open for the end date (screenshot 3).
• Dark and light mode both look right on desktop.

1. On phones and tablets the whole Tools and Equipment section is squeezed into half the width (screenshot 4). At 375px each chart card is about 125px wide: the dropdown text wraps letter by letter, the "Chart Preview" heading is cut off, and the bars are pushed out of view. On development the same cards use the full width (screenshot 5). The cause: the section's content area is a CSS grid, and at narrow widths it has 2 columns (124.8px 124.8px at 375px, 311.5px 311.5px at 768px). The new wrapper <div style={{ display: 'flex', flexDirection: 'column', ... }}> in WeeklyProjectSummary.jsx is a single grid item, so all four charts go into one column. On desktop the grid collapses to a single column, so it looks fine there. Adding gridColumn: '1 / -1' to that wrapper's style fixed it when I applied it live at 375px (screenshot 6), and didn't change the desktop width (1232px either way).

Requesting changes for item 1.

Screenshot 1: Supplier Performance with 'Unknown project (…9011)' selected, light mode

Screenshot 2: Tools by Availability loaded after picking Building 1, dark mode

Screenshot 3: Tools Stoppage with only a start date picked

Screenshot 4: this PR at 375px, cards squeezed into one 125px grid column

Screenshot 5: development at 375px, full width

Screenshot 6: this PR at 375px with gridColumn: '1 / -1' added to the wrapper