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.

- 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

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

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	`352d7bb`
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/69967101f98ad2000883f9a6
😎 Deploy Preview	https://deploy-preview-4396--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.

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.

…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

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

…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

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

- 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

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

ResponsiveContainer with height="100%" needs an ancestor with explicit pixel height. On mobile single-column layout this caused 0px height. Use getChartHeight() for explicit px height so chart renders on all sizes. Co-authored-by: Cursor <cursoragent@cursor.com>

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

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

Resolved conflicts across 7 files, preserving our responsive chart fixes while integrating dev branch's CSS modules migration, new features, and dependency updates.

Resolves yarn install --frozen-lockfile failure in GitHub Actions. 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>

…-fix

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

vamsikrishna1704 and others added 19 commits June 13, 2025 17:12

Created the Tools Stoppage Horizontal Bar Chart page.

3790e50

Fixed issues rose on connecting frontend to backend api

d8a90dd

Fixed the BG of recharts tooltip cursor of darkmode

6326100

Updated the styles for tooltip content

c2139e0

Node version upgrade issues fixed.

11e88e2

Node version upgrade issues fixed.

8229b17

Resolved the merge conflicts with latest yarn.lock

1e92b6d

Aditya-gam mentioned this pull request Nov 15, 2025

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 requested changes Dec 6, 2025

View reviewed changes

Aditya-gam added 3 commits December 6, 2025 12:23

Aditya-gam added 3 commits December 6, 2025 13:12

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

Anusha-Gali requested changes Dec 27, 2025

View reviewed changes

Aditya-gam and others added 2 commits February 18, 2026 16:59

Aditya-gam and others added 4 commits February 18, 2026 17:32

Merge origin/development into Aditya-fix/reason-tool-stoppage-chart-fix

13fb49a

Resolved conflicts across 7 files, preserving our responsive chart fixes while integrating dev branch's CSS modules migration, new features, and dependency updates.

chore: sync yarn.lock with package.json for CI frozen-lockfile

c9d7e8f

Resolves yarn install --frozen-lockfile failure in GitHub Actions. Co-authored-by: Cursor <cursoragent@cursor.com>

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

Merge branch 'development' into Aditya-fix/reason-tool-stoppage-chart…

352d7bb

…-fix

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Aditya-fix: BM dashboard stoppage data loading and responsiveness#4396

Aditya-fix: BM dashboard stoppage data loading and responsiveness#4396
Aditya-gam wants to merge 34 commits intodevelopmentfrom
Aditya-fix/reason-tool-stoppage-chart-fix

Aditya-gam commented Nov 15, 2025 •

edited

Loading

Uh oh!

netlify bot commented Nov 15, 2025 •

edited

Loading

Uh oh!

RitzzzZ2021 commented Nov 22, 2025

Uh oh!

Aditya-gam commented Dec 5, 2025

Uh oh!

Anusha-Gali left a comment

Uh oh!

Aditya-gam commented Dec 6, 2025

Uh oh!

sonarqubecloud bot commented Dec 6, 2025

Uh oh!

Anusha-Gali left a comment

Uh oh!

Aditya-gam commented Feb 19, 2026

Uh oh!

sonarqubecloud bot commented Feb 19, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Comments

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

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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Comments

Aditya-gam commented Nov 15, 2025 •

edited

Loading

netlify bot commented Nov 15, 2025 •

edited

Loading