Rithika taking over for Aditya-fix: BM dashboard stoppage data loading and responsiveness by Aditya-gam · Pull Request #4396 · OneCommunityGlobal/HighestGoodNetworkApp

Aditya-gam · 2025-11-15T04:14:51Z

Description

Fixes # (PRIORITY HIGH) - BM Dashboard fix 'Reason of Stoppage of Tools' data loading error

This PR implements a comprehensive fix for the BM Dashboard "Reason of Stoppage of Tools" section data loading error and introduces responsive design improvements for all tool-related charts in the Weekly Project Summary. The implementation includes a new horizontal bar chart component for visualizing tool stoppage reasons (Used its lifetime, Damaged, Lost), enhanced error handling with proper user-facing messages, and full mobile/tablet responsiveness across the Tools and Equipment Tracking section.

Related PRs (if any):

Old PRs: PR #3780 + PR #1550
Backend PR: PR #1903

Main changes explained:

Created/Updated Files (highlights):

Tools/ToolsStoppageHorizontalBarChart.jsx
- Introduces the new Chart.js horizontal stacked bar visualization for stoppage reasons, including project/date filters, auto-select logic, structured-response parsing, and logService-backed error handling.
Tools/ToolsStoppageHorizontalBarChart.module.css + related assets
- Adds the styling/dark-mode support for the new chart, matching dashboard spacing and control patterns.
WeeklyProjectSummary/Tools/ToolsHorizontalBarChart.jsx & .css
- Refactors the availability chart for responsive sizing (height, margins, axis font/width) and ensures data mapping/filter UX aligns with backend fields.
WeeklyProjectSummary/ToolStatusDonutChart/*
- Makes the donut chart responsive (windowWidth helpers, dynamic radii/font sizes) and tweaks layout styles for mobile/tablet/dark mode.
WeeklyProjectSummary/WeeklyProjectSummary.jsx & .module.css
- Wire the new stoppage chart into the Tools & Equipment section with updated grid layouts so the wide card plus two normal cards behave on mobile/tablet.
src/utils/URL.js
- Adds BM_TOOL_PROJECTS and BM_TOOLS_STOPPAGE_BY_PROJECT helpers so the frontend can request project lists and stoppage data with optional date filters.

Key Implementation Details:

Structured API Response Handling

All components now handle the new backend response format consistently:

{
success: boolean, // true if request succeeded, false otherwise
data: [], // actual data array
message: string // error/info message from backend
}

Components check response.success and extract data from response.data or fall back to treating the response itself as data for backward compatibility.

Enhanced Error Handling

Categorized error messages for better user experience:

401/403: "Session expired. Please log in again."
Network errors (no response): "Network error. Please check your connection."
Server errors (500+): "Server error. Please try again later."
API-provided messages: Uses response.data.message when available
Generic fallback: "Failed to load [resource]. Please try again. (Status: [code])"

Service Layer Migration

Replaced direct axios calls with httpService.get() wrapper in ToolsStoppageHorizontalBarChart
Replaced console.error with logService.logError() for centralized error tracking
Split useEffect hooks for better separation of concerns:
One effect for fetching project list (runs once on mount)
One effect for auto-selecting the first project (runs when projects load)
One effect for fetching stoppage data (runs when project or date filters change)

Responsive Design Strategy

All tool charts now use a consistent responsive approach:

Window resize listener: Tracks windowWidth state
Helper functions: Calculate dimensions based on breakpoints (768px mobile, 1024px tablet)
Dynamic rendering: Charts re-render with appropriate sizes when the window resizes
Breakpoints:
- Mobile: ≤768px
- Tablet: 769-1024px
- Desktop: >1024px

Dark Mode Consistency

All new and updated components fully support dark mode
Color schemes for controls, charts, and text adjust based on darkMode state from Redux
React-Select dropdowns styled with a custom dark theme
DatePicker components use dark theme classes

How to test:

Check out the branch: Aditya-fix/reason-tool-stoppage-chart-fix
Reinstall dependencies and clear cache: rm -rf node_modules && yarn cache clean
Run yarn install and start the app: yarn start:local
Clear browser cache/site data
Log in as an Owner/Admin user and open Reports → Total Construction Summary → Tools & Equipment Tracking**.

Reason of Stoppage chart

Confirm that the first project auto-selects, the chart renders all three categories, and loading/empty states appear correctly.
Change projects and date ranges (using the inline reset button or main Reset) and verify data updates accordingly.

Error/Resilience

Simulate offline or server errors via DevTools and confirm the categorized error banners (network/server/auth) surface.

Responsive & Dark Mode

Resize browser to desktop/tablet/mobile widths to ensure the new chart plus donut/availability cards resize/stack as expected.
Toggle dark mode and verify cards, dropdowns, date pickers, and charts all adopt the dark palette.

Integration sanity

Ensure the new wide chart sits above the other two cards, and the section’s collapse/expand control and filters all still work.

Screenshots or videos of changes:

Desktop view: Full "Tools and Equipment Tracking" section with all three charts

Tablet view: Responsive layout of the tool charts

Mobile view: Stacked vertical layout

Dark mode: All tool charts in dark theme

Test Video

TestVideo.mov

Note:

Charts and pages are responsive for most screen sizes.
If you are reducing the screen size while testing responsiveness, refresh the page at the target testing screen size. Sometimes, the responsive CSS isn't triggered unless you refresh.

netlify · 2025-11-15T04:14:56Z

❌ Deploy Preview for highestgoodnetwork-dev failed.

Name	Link
🔨 Latest commit	`50a2d35`
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6a237de6ec2dbb0008a1a886

RitzzzZ2021 · 2025-11-22T02:50:08Z

The "Reason of Stoppage of Tools" chart looks good to me overall. The first project auto-selects, the chart renders all three categories, and loading/empty states appear correctly. Filters work as expected, with data updating according to the selected items. The layout is responsive to the window size as well.

There are two small improvements can be made:

In light mode, this chart uses a grey background while the others in the same section use white. Switching it to white would make the visuals more consistent across the section.

In dark mode, the x- and y-axes are hard to see.

Aditya-gam · 2025-12-05T21:59:08Z

The "Reason of Stoppage of Tools" chart looks good to me overall. The first project auto-selects, the chart renders all three categories, and loading/empty states appear correctly. Filters work as expected, with data updating according to the selected items. The layout is responsive to the window size as well.

There are two small improvements can be made:

In light mode, this chart uses a grey background while the others in the same section use white. Switching it to white would make the visuals more consistent across the section.

2. In dark mode, the x- and y-axes are hard to see.

Hi, Xinyi,

I fixed the issues mentioned in your comment. Can you please review these again and let me know if it works correctly now?

Anusha-Gali

Hi Aditya,

I have reviewed your PR locally and though most of the functionalities work as per requirement. I have identified three issues.
1: When i choose the below mobile responsive format, the charts were not completely visible

2: The dropdown in Stoppage of Tools and Tool/Equipment are in white background where in Tools by Availability, it isn't consistent. I would appreciate if it is consistent

3: Also the dropdown in Tools/Equipment when an option is selected - it doesn't show any other options in dropdown, i.e we need to click on ALL and then selected another option

Aditya-gam · 2025-12-06T21:41:52Z

Hi Aditya,

I have reviewed your PR locally and though most of the functionalities work as per requirement. I have identified three issues. 1: When i choose the below mobile responsive format, the charts were not completely visible 2: The dropdown in Stoppage of Tools and Tool/Equipment are in white background where in Tools by Availability, it isn't consistent. I would appreciate if it is consistent 3: Also the dropdown in Tools/Equipment when an option is selected - it doesn't show any other options in dropdown, i.e we need to click on ALL and then selected another option

Hi Anusha,
Thanks for pointing out these issues. I have tried to fix these. Also, I would just mention that PR is just for the "Reason of Stoppage Tools" chart, but I have tried fixing dark mode and responsiveness issues with the entire section because they affect each other.

The "Tools and Equipment Tracking" section is now responsive for smaller screens. If it gets stuck and doesn't adjust the size, refresh the page.
The dropdown and filter colors are now properly adjusted to dark mode and light mode.
The filter dropdowns for the "Proportion of Tools/Equipment" chart now show multiple options and don't have to switch to the "ALL" option to switch between filters. The Project Filter has unknown names. I have not checked the backend for what response it sends for the chart. That should be a different PR.

Screen.Recording.2025-12-06.at.1.38.17.PM.mov

sonarqubecloud · 2025-12-06T22:03:50Z

Quality Gate passed

Issues
13 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
2.9% Duplication on New Code

See analysis details on SonarQube Cloud

Anusha-Gali

Hi Aditya,

I have reviewed your PR locally and thank you for the update on the issues. As for issue 2 - it is fixed, and for issue 1 - the third chart is not loading in mobile responsive format - i have refreshed and checked it as well for different dimensions

Aditya-gam · 2026-02-19T01:01:40Z

Hi Aditya,

I have reviewed your PR locally and thank you for the update on the issues. As for issue 2 - it is fixed, and for issue 1 - the third chart is not loading in mobile responsive format - i have refreshed and checked it as well for different dimensions

Hi Anusha,
The responsiveness should be fixed for most of the screens now.

Screen.Recording.2026-02-18.at.4.54.19.PM.mov

sonarqubecloud · 2026-02-19T02:11:11Z

Quality Gate passed

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

Anusha-Gali

Hi Aditya,

Thanks for fixing the issues. The charts works as per requirement.

DeepighaJ

Hi Rikitha,

Checkout to the current branch and ran PR locally. I find the UI allignment itself is different than previous ones. I dont see Reason for Stoppage of Tools chart and every items displays one after item so i need to scroll and view. Not able to select Tools.

sonarqubecloud · 2026-05-21T03:22:18Z

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

rithika-paii · 2026-05-21T03:25:07Z

Hi @DeepighaJ,

Thank you for the feedback! I have addressed all the frontend issues you mentioned:

UI alignment — Fixed the Tools and Equipment Tracking layout so all 3 charts now display side by side on desktop instead of stacking vertically.
Reason for Stoppage of Tools chart — Added the missing ToolsStoppageHorizontalBarChart component. It now renders correctly with data.
Not able to select Tools — The project dropdown is now working and auto-selects the first available project.

Please re-review when you get a chance. Thank you!

HemanthNidamanuru

Hi,

I reviewed and tested this PR locally. After clicking on “Tools & Equipment Tracking,” the page crashes and shows a “Something went wrong” error screen, so I’m unable to validate the remaining functionality and UI changes.

PR.4396.mp4

DeepighaJ

Checked out to current branch and getting error in npm install.

- Extract data from structured response {success, data, message, ...} - Add validation for success field in responses - Display API message for empty results and errors - Enhance error handling with specific messages for auth, network, and server errors - Add console logging for debugging API failures - Support backward compatibility with raw array responses Fixes issue with component crashing when backend returns structured response format instead of raw arrays.

- Replace axios import with httpService for consistent auth handling - Update all axios.get() calls to httpService.get() (3 locations) - Enable automatic JWT token attachment to requests - Enable automatic auth error interception (401/403 redirects) - Align with codebase standard pattern used in other BM components This ensures proper authentication handling and prevents intermittent failures when JWT tokens expire.

…ffects - Create dedicated useEffect for auto-selecting first project - Separate data-fetching useEffect with single responsibility - Remove 'projects' from data-fetch dependencies (eliminates race condition) - Add early return guard clause when no project selected - Simplify logic by removing complex conditional branching This follows React best practices (single responsibility principle) and eliminates the race condition that caused redundant API calls. The auto-select effect runs once when projects load, then the data-fetch effect runs when selectedProject changes.

- Add 500+ server error detection in projects fetch useEffect - Include HTTP status codes in generic error fallbacks for debugging - Maintain consistent error handling pattern across both useEffects - Distinguish between auth (401/403), network, server (500+), and unknown errors - Provide actionable error messages for each error category Users now receive specific guidance (login, check network, wait for server) instead of generic error messages. Status codes help developers diagnose production issues.

…error tracking - Import logService from services directory - Replace console.error calls with logService.logError in both catch blocks - Leverage Sentry integration for centralized error monitoring - Eliminates ESLint warnings about console statements - Aligns with codebase logging standards Errors are now properly captured in production monitoring instead of just browser console.

- Add align-items: start to grid container to prevent cards from stretching - Change card min-heights from fixed 250px to auto for content-based sizing - Cards now size to their content instead of matching tallest card height

- Change ToolsHorizontalBarChart card height from 100% to auto - Add height: auto and flex properties to donut chart wrapper - Override tools-availability-page min-height 100vh to auto for card context - Add styles for tools-horizontal-chart-container to prevent stretching - Remove excessive padding from tools-availability-page wrapper

- Reduce Reason of Stoppage chart height from 600px to 300px - Add categoryPercentage (0.6) and barPercentage (0.9) to reduce bar spacing - Replace barThickness with maxBarThickness (25px) for better scaling - Standardize donut chart height to 300px on desktop, 280px on tablet - Increase Tools by Availability chart height from 200px to 280px - All charts now fit on screen without scrolling and have consistent sizing

… and tablet - Add responsive grid layout: 1 column mobile, 2 columns tablet, 4 columns desktop - Ensure cards span full width on mobile/tablet to prevent squishing - Reduce spacing and padding on mobile to eliminate empty space - Add width constraints (100%, max-width: 100%, box-sizing: border-box) to cards - Ensure filter controls don't overflow on mobile screens

- Add responsive margin calculation (mobile: {5,5,15,5}, tablet: {8,15,25,8}, desktop: {10,30,40,10}) - Add responsive Y-axis width (mobile: 20px, tablet: 28px, desktop: 35px) - Add responsive font sizes for Y-axis ticks (mobile: 10px, tablet: 11px, desktop: 12px) - Add width constraints to chart content container (100%, max-width: 100%) - Add box-sizing: border-box to card container to prevent overflow - Reduce padding and margins on mobile for better fit

…bile/tablet - Add responsive Chart.js options: maxBarThickness, categoryPercentage, barPercentage - Add responsive font sizes for scales, legend, and datalabels based on screen width - Wrap Chart.js Bar component in constrained container div to prevent overflow - Add Bootstrap Row/Col responsive fixes for mobile (full width, proper padding) - Add width constraints (100%, max-width: 100%) to chart container - Reduce title font size on mobile for better fit - Ensure filter controls stack vertically and don't overflow on mobile

- Add responsive margin calculation (mobile: {20,20,20,20}, tablet: {25,25,30,30}, desktop: {30,30,40,40}) - Add responsive font size for center text (mobile: 10px, tablet: 12px, desktop: 14px) - Remove max-width: 400px constraint and add width: 100%, max-width: 100% - Add box-sizing: border-box to wrapper for proper sizing - Reduce spacing and font sizes on mobile for better readability - Ensure chart fits within viewport without overflow

…bility - Fix grey background in light mode: Add white background (#ffffff) to tools-availability-page and chart containers to match other charts in Tools and Equipment Tracking section - Fix axis visibility in dark mode: Change axis border and tick colors from #e0e0e0 to #ffffff for better contrast and visibility - Add !important flags to ensure background colors override parent card styles - Add background styling to chart container wrapper divs to cover entire chart area including legend

…ools section - Add responsive breakpoint at 1366px for better chart visibility on medium screens - Standardize chart heights across all three Tools charts (240px/280px/300px) - Fix height matching so donut chart determines section height, other charts adapt - Remove conflicting dark mode CSS overrides for react-select dropdowns - Standardize all dropdowns to use consistent react-select dark mode styles - Convert ToolStatusDonutChart native selects to react-select with proper theming - Fix ToolStatusDonutChart to use unfiltered toolslist for options to prevent disappearing selections - Ensure all charts stretch or shrink to match donut chart's natural height - Remove min-height constraints that prevented proper height matching

…vices - Add granular breakpoints (375px, 428px, 480px) for better mobile support - Implement progressive chart height scaling from 180px (small phones) to 300px (desktop) - Scale all chart elements proportionally (fonts, margins, bar thickness, radii) - Add overflow prevention to chart containers for small screens - Update CSS media queries with gradient scaling for titles, filters, and legends - Ensure charts scale smoothly across all device sizes preventing overflow on iPhones - Reduce padding and spacing on smaller screens for optimal space utilization

- Add filter labels for date range and project filters with proper dark mode styling - Fix label and chart title text colors to white in dark mode for better contrast - Restructure filter layout to be symmetric and modular with consistent sizing - Ensure all filter inputs have matching heights (38px) for proper alignment - Improve date picker input group layout with clear button integration - Add reset button wrapper for consistent spacing with other filters - Fix date picker dark mode background styling with inline styles and CSS fallbacks

…and dark modes - Standardize date picker input dimensions to match other form inputs (38px height) - Ensure dark mode only changes colors, not sizes or dimensions - Remove inline styles that could cause sizing inconsistencies - Set consistent font-size (13px), padding (8px 12px), and border-radius (6px) - Make date picker visually identical in both modes except for colors

- Fix tools dropdown to use correct data structure (tool.itemType._id and tool.itemType.name) - Fetch projects from TOOLS_AVAILABILITY_PROJECTS endpoint instead of extracting from toolslist - Fix projects dropdown to properly display available projects - Add projects state and useEffect to fetch projects data - Ensure dropdown options remain available after selection (use unfiltered data sources) - Match data structure access pattern used in EquipmentUpdateForm component

…e duplication - Extract react-select option styling logic into shared utility functions - Create reactSelectUtils.js with getOptionBackgroundColor and getOptionColor helpers - Replace nested ternary operators with if-else statements in helper functions - Remove duplicate helper functions from ToolStatusDonutChart and ToolsHorizontalBarChart - Reduce cognitive complexity from 17 to below 15 in both components - Eliminate code duplication by centralizing shared styling logic

- Extract nested ternary operations to shared utility functions - Reduce cognitive complexity from 17 to below 15 in ToolsStoppageHorizontalBarChart - Fix CSS contrast issues in datepicker calendar (lines 58 and 69) - Extract complete selectStyles object to shared getStandardSelectStyles utility - Eliminate code duplication by centralizing react-select styling logic - Update both ToolsStoppageHorizontalBarChart and ToolStatusDonutChart to use shared utilities - Improve maintainability with single source of truth for react-select styles

- ToolsStoppageHorizontalBarChart: replace nested flex wrappers with single div using explicit pixel height; remove overflow clipping - ToolsStoppageHorizontalBarChart.module.css: remove flex:1, min-height:0, overflow:hidden from .tools-horizontal-chart-container - ToolsHorizontalBarChart.css: remove flex/min-height from content area, set overflow:visible to avoid tooltip clipping Co-authored-by: Cursor <cursoragent@cursor.com>

Centralize responsive breakpoints (375, 428, 480, 768, 1024) and export getValueForBreakpoints plus getChartHeight, getChartMargins, getYAxisWidth, getChartFontSize, getMaxBarThickness, getCategoryPercentage, getBarPercentage, getChartTitleFontSize for use by tools charts. Co-authored-by: Cursor <cursoragent@cursor.com>

Remove duplicated responsive logic from ToolsHorizontalBarChart and ToolsStoppageHorizontalBarChart; both now import shared helpers from chartResponsiveUtils. Reduces SonarQube duplicated lines on new code while keeping behavior unchanged (same breakpoints and values). Co-authored-by: Cursor <cursoragent@cursor.com>

…ls issues

…section

sonarqubecloud · 2026-06-06T01:55:59Z

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

Aditya-gam mentioned this pull request Nov 15, 2025

Rithika taking over for Aditya-fix: resolve tool stoppage reason data loading error with comprehensive improvements OneCommunityGlobal/HGNRest#1903

Open

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 Nov 16, 2025

Aditya-gam requested a review from RitzzzZ2021 December 5, 2025 22:00

Anusha-Gali suggested changes Dec 6, 2025

View reviewed changes

Aditya-gam requested a review from Anusha-Gali December 6, 2025 21:42

Anusha-Gali suggested changes Dec 27, 2025

View reviewed changes

Aditya-gam requested a review from Anusha-Gali February 19, 2026 01:54

Anusha-Gali approved these changes Feb 24, 2026

View reviewed changes

one-community changed the title ~~Aditya-fix: BM dashboard stoppage data loading and responsiveness~~ Rithika taking over for Aditya-fix: BM dashboard stoppage data loading and responsiveness Apr 28, 2026

DeepighaJ requested changes May 15, 2026

View reviewed changes

one-community mentioned this pull request May 22, 2026

Vamsi krishna creates a stacked horizontal bar graph for tools stoppage reason #3780

Closed

HemanthNidamanuru requested changes May 22, 2026

View reviewed changes

DeepighaJ requested changes May 28, 2026

View reviewed changes

Aditya-gam added 8 commits June 5, 2026 09:54

Aditya-gam and others added 21 commits June 5, 2026 14:46

fix: update yarn.lock

054e8ff

fix: add PropTypes validation and fix contrast and chartResponsiveUti…

884c3b9

…ls issues

fix: use .at(-1) instead of array length index in chartResponsiveUtils

c1359a9

Fix duplicate import and JSX structure in WeeklyProjectSummary tools …

2af7fe2

…section

Remove unused imports SupplierPerformanceGraph and EmbedInteractiveMap

8a05674

fix: resolve duplicate PropTypes imports and JSX fragment mismatch

50a2d35

rithika-paii force-pushed the Aditya-fix/reason-tool-stoppage-chart-fix branch from 952d921 to 50a2d35 Compare June 6, 2026 01:54

Uh oh!

Conversation

Aditya-gam commented Nov 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related PRs (if any):

Main changes explained:

Created/Updated Files (highlights):

Key Implementation Details:

Structured API Response Handling

Enhanced Error Handling

Service Layer Migration

Responsive Design Strategy

Dark Mode Consistency

How to test:

Screenshots or videos of changes:

Note:

Uh oh!

netlify Bot commented Nov 15, 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!

RitzzzZ2021 commented Nov 22, 2025

Uh oh!

Aditya-gam commented Dec 5, 2025

Uh oh!

Anusha-Gali left a comment

Choose a reason for hiding this comment

Uh oh!

Aditya-gam commented Dec 6, 2025

Uh oh!

sonarqubecloud Bot commented Dec 6, 2025

Quality Gate passed

Uh oh!

Anusha-Gali left a comment

Choose a reason for hiding this comment

Uh oh!

Aditya-gam commented Feb 19, 2026

Uh oh!

sonarqubecloud Bot commented Feb 19, 2026

Quality Gate passed

Uh oh!

Anusha-Gali 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!

sonarqubecloud Bot commented May 21, 2026

Quality Gate passed

Uh oh!

rithika-paii commented May 21, 2026

Uh oh!

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

sonarqubecloud Bot commented Jun 6, 2026

Quality Gate passed

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

Aditya-gam commented Nov 15, 2025 •

edited

Loading

netlify Bot commented Nov 15, 2025 •

edited

Loading