Rithika taking over for Aditya-feat: refactor chart with multi-select filters, dark mode, and improved API integration by Aditya-gam · Pull Request #4496 · OneCommunityGlobal/HighestGoodNetworkApp

Aditya-gam · 2025-12-05T00:20:12Z

Description

Refactors the Paid Labor Cost chart component in the Building Management Dashboard with improved API integration, multi-select filtering, dark mode support, and responsive design.

Related PRs (if any):

Related to old PRs: #3420 + #1451
Backend Pair for this PR: PR #1937

Main Changes Explained:

Files Modified:

PaidLaborCost.jsx (+678 -178 lines)
- API & State Management:
  - Changed HTTP method from POST to GET with query parameters (projects, tasks, date_range)
  - Added isFetchingRef to prevent race conditions from simultaneous API calls
  - Implemented cache-busting for 304 responses
  - Comprehensive response validation and error handling
  - Replaced console.log with logger service
- Features:
  - Multi-select task filter using react-select (replaces single-select)
  - Separate start/end date pickers using react-datepicker
  - Date objects in state, ISO 8601 strings for API calls
  - Removed "Total Cost" from chart bars, added summary section below chart
  - Separate API calls for dropdown options to avoid circular dependencies
- Dark Mode:
  - Global dark mode class on document.body for react-datepicker portal
  - Custom dark mode styles for react-select (colors: #253342, #2d4059, #3a506b, #e8a71c)
  - Proper cleanup on unmount
PaidLaborCost.module.css (+318 -107 lines)
- Responsive layout: vertical filters by default, horizontal on large screens (1920px+)
- Dark mode styles for date pickers and calendars
- Improved chart container sizing and responsive behavior
- New summary section styling
- Accessibility improvements (color contrast, font sizes, focus states)
WeeklyProjectSummary.module.css (+17 lines)
- Responsive grid media queries (1024px, 768px, 576px breakpoints)
- Fixes overflow on tablets and mobile
Header.jsx (-1 line)
- Removed duplicate isAckLoading declaration

How to Test:

Checkout branch: Aditya-fix/paid-labor-cost-chart
Reinstall dependencies and clear cache: rm -rf node_modules && yarn cache clean
Run yarn install and start the app: yarn start:local
Login as owner/admin.
Navigate to /bmdashboard/totalconstructionsummary → "Labor and Time Tracking" section

API Endpoint Requirements:

Endpoint: GET /api/labor-cost
Query Parameters:

projects: JSON array, e.g., ["Project A"] (omitted for "All Projects")
tasks: JSON array, e.g., ["Task 1","Task 2"] (omitted when empty)
date_range: JSON object with start_date and end_date in ISO 8601 format (omitted when none selected)
Response Format:

{
	"data": [
		{ "project": "Project A", "task": "Task 1", "date": "2025-04-01T00:00:00.000Z", "cost": 5000 }
	],
	"totalCost": 5000
}

Test Scenarios:

Multi-Select Task Filter: Select multiple tasks, verify chart updates and API includes ?tasks=["Task 1","Task 2"]
Project Filter: Switch between "All Projects" and specific projects, verify API includes/omits projects parameter
Date Range: Select start/end dates, verify API includes date_range parameter with ISO 8601 dates
Combined Filters: Use all filters together, check Network tab for proper query string
Dark Mode: Toggle theme, verify all filters and calendar have dark mode styling
Responsive: Test at 768px and 576px widths, verify vertical filter layout
Error Handling: Simulate offline, verify error toast and logging

Screenshots or Videos:

Light/dark mode views with filters

Test Video:

TestVideo.mov

Notes:

Dependencies Added: react-datepicker, react-select
Performance: Race condition prevention, cache-busting for 304 responses, memoized options
Validation: Client-side validation filters invalid items, logs errors

…arameters - Change HTTP method from POST to GET - Move request parameters from body to query string - Extract data array and totalCost from response structure - Add totalCost state variable to store API response value - Update date format to ISO 8601 using toISOString() - Improve date parsing to handle ISO 8601 format from backend - Add response structure validation with proper error handling - Handle edge cases for empty filters and partial date ranges

…ickers - Replace custom date range picker with standard react-datepicker components - Remove date mode selector (ALL/CUSTOM) - no dates means all data - Implement immediate date selection callbacks for start and end dates - Remove client-side date filtering logic (backend handles all filtering) - Add data validation to ensure backend data is correctly formatted - Update API call to send date_range when either date is selected - Add CSS styles for date pickers with dark mode support - Ensure date pickers trigger API calls immediately on selection

- Replace console.error with logger.logError for proper error tracking - Replace console.warn with logger.logInfo for informational messages - Import logger service from services/logService - Ensure all logging uses Sentry for error tracking and monitoring

…ection - Remove totalCostDataset from chart to eliminate visual confusion - Chart now displays only task/category costs in grouped bars - Add dedicated total cost summary section below chart - Display total cost with proper currency formatting and thousand separators - Center-align summary section with prominent styling - Add dark mode support for summary section using CSS variables - Summary automatically updates when filters change using API totalCost value

…tions - Add useRef to track API call status and prevent multiple simultaneous requests - Ensure date range state updates use functional updates correctly - Verify useEffect dependencies are correctly specified for all filters - Prevent race conditions from rapid date selections - Loading state properly managed to prevent concurrent API calls

…nent - Add date handling strategy documentation - Create helper functions for date conversion (dateToISOString, isValidISODate) - Use Date objects in React state for maximum flexibility - Convert to ISO 8601 strings only when sending to API - Use moment.js consistently for all date formatting and validation - Replace inline date conversions with helper functions for maintainability - Ensure all date operations follow consistent pattern

- Replace single select task filter with react-select multi-select component - Change taskFilter state from string to array to support multiple selections - Update API call to send array of selected tasks (empty array = all tasks) - Update aggregateData function to handle array of tasks with backward compatibility - Add comprehensive CSS styles for react-select with dark mode support - Update taskOptions format to use {label, value} for react-select compatibility - Allow users to select multiple tasks or leave empty for all tasks

- Set fixed chart height (400px) for consistent sizing across all views - Use responsive width (100%) with proper container structure - Add maxBarThickness to ensure bars maintain consistent unit measurement - Configure categoryPercentage and barPercentage for equidistant bar spacing - Update container CSS to properly expand and prevent empty white spaces - Add proper padding and layout configuration for symmetry - Ensure parent component expands to accommodate chart size - Match sizing patterns used in other dashboard charts

…ate pickers - Add dark mode styles to react-select inline styles prop for Tasks filter - Ensure multi-value labels, input text, and placeholder are visible in dark mode - Add styles for react-select menu list and options with proper hover states - Add clear indicator styling for react-select - Fix Project filter select option text color in dark mode - Add comprehensive dark mode styles for react-datepicker month/year dropdowns - Ensure all dropdown menus, options, and selected states are readable - Use global styles for datepicker dropdowns since they render in portals

- Add inline styles for react-select with hardcoded dark mode colors - Fix task filter dark mode: dark blue backgrounds (#253342), white text - Convert project filter from native select to react-select for consistency - Add allAvailableProjects state to fix circular dependency in project filter - Project dropdown now shows all options even after selection - Both filters use same selectStyles object with proper dark mode colors: - Control: #253342 background, #2d4059 border - Menu: #253342 background with proper z-index - Options: #3a506b hover, #e8a71c selected state - Multi-value chips: #2d4059 background, white text - Make filters fully responsive with vertical stacking - Labels positioned above inputs for narrow cards - Selects and menus use 100% width for proper containment - Remove unused uuid import - Add comprehensive responsive breakpoints for filter layout

- Add width and box-sizing constraints to all card containers - Prevent horizontal overflow with overflow-x: hidden on cards - Update .half section grid to stack cards below 1024px screen width - Cards display side-by-side on desktop/laptop (>1024px) - Cards stack vertically on tablet and mobile (<1024px) - Add max-width: 100% and box-sizing to normalCard class - Ensure proper containment hierarchy from section to cards - Chart containers now properly respect parent dimensions - Fixes overflow issues on iPad and smaller screens

- Removed darkMode from useMemo dependencies in sections array - Dark mode changes no longer cause component remounting - Preserves filter state in PaidLaborCost and other child components - Child components still react to theme changes via useSelector

netlify · 2025-12-05T00:21:37Z

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	`8ca2bd9`
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/69f65b1d1b21af00083bb5a7
😎 Deploy Preview	https://deploy-preview-4496--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.

…helper functions - Extract buildQueryParams, isValidDataItem, processApiResponse functions - Extract fetchWithRetry and validateResponse for better separation of concerns - Wrap helper functions in useCallback to prevent unnecessary re-renders - Reduce fetchData cognitive complexity from 20 to below 15 - Fixes SonarQube cognitive complexity issue

…lexity - Extract common fetchLaborCostData helper to eliminate duplicate fetch logic - Reduce code duplication from 9.5% to under 3% - Extract getOptionBackgroundColor and getOptionColor helpers - Simplify option function to reduce cognitive complexity from 17 to under 15 - Update fetchAllTasks and fetchAllProjects to use shared fetch helper - Fixes SonarQube duplication and cognitive complexity issues

sonarqubecloud · 2025-12-05T00:43:12Z

Quality Gate passed

Issues
11 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,

I have reviewed your PR locally and the functionality does work as expected. However there is just one issue - the calendar is in dark mode when the functionality is in light mode.

…element - Replace body-scoped .paid-labor-cost-dark-mode with calendar-scoped .paid-labor-cost-dark-calendar - Add light mode reset for .paid-labor-cost-calendar to override global dark styles Co-authored-by: Cursor <cursoragent@cursor.com>

- Remove useEffect that toggled body class for dark mode - Pass calendarClassName to DatePicker with base and dark classes Co-authored-by: Cursor <cursoragent@cursor.com>

Aditya-gam · 2026-02-19T02:33:10Z

Hi Aditya,

I have reviewed your PR locally and the functionality does work as expected. However there is just one issue - the calendar is in dark mode when the functionality is in light mode.

Hi Anusha,
Thank you for pointing that out. I have fixed the UI issue. The calendar dropdowns now have the correct colors.

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

…ror in CI

Resolve package-lock.json conflict by keeping it removed (yarn-only)

sonarqubecloud · 2026-02-19T02:43:36Z

Quality Gate passed

Issues
11 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 issue. All functionalities are working as per requirement.

sonarqubecloud · 2026-05-02T20:15:04Z

Quality Gate passed

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

one-community · 2026-05-05T05:46:39Z

Thank you all, merging!

Aditya-gam added 13 commits November 29, 2025 16:01

fix(header): remove duplicate isAckLoading declaration

999e39d

Aditya-gam changed the title ~~feat(paid-labor-cost): refactor chart with multi-select filters, dark mode, and improved API integration~~ Aditya-feat: refactor chart with multi-select filters, dark mode, and improved API integration Dec 5, 2025

Aditya-gam mentioned this pull request Dec 5, 2025

Rithika taking over for Aditya-feat: Implement Paid Labor Cost API endpoint with comprehensive filtering and validation OneCommunityGlobal/HGNRest#1937

Merged

Aditya-gam mentioned this pull request Dec 24, 2025

Aditya-Fix dark mode text visibility in Weekly Project Summary dashboard charts #4620

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 Feb 8, 2026

Anusha-Gali suggested changes Feb 10, 2026

View reviewed changes

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

refactor(PaidLaborCost): apply datepicker theme via calendarClassName

cc1ef22

- Remove useEffect that toggled body class for dark mode - Pass calendarClassName to DatePicker with base and dark classes Co-authored-by: Cursor <cursoragent@cursor.com>

Aditya-gam requested a review from Anusha-Gali February 19, 2026 02:34

Aditya-gam added 2 commits February 18, 2026 18:37

delete: removed package-lock.json to avoid multple package manager er…

d900c29

…ror in CI

Merge origin/development into Aditya-fix/paid-labor-cost-chart

4df7ee2

Resolve package-lock.json conflict by keeping it removed (yarn-only)

Anusha-Gali approved these changes Feb 24, 2026

View reviewed changes

rithika-paii changed the title ~~Aditya-feat: refactor chart with multi-select filters, dark mode, and improved API integration~~ Rithika taking over for Aditya-feat: refactor chart with multi-select filters, dark mode, and improved API integration May 1, 2026

rithika-paii added 2 commits May 2, 2026 14:32

fix: resolve merge conflicts with development branch

a521869

fix: remove remaining conflict markers from CSS file

8ca2bd9

one-community merged commit 68b4df7 into development May 5, 2026
10 checks passed

one-community mentioned this pull request May 8, 2026

Frontend Release to Main [4.88] #5240

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Rithika taking over for Aditya-feat: refactor chart with multi-select filters, dark mode, and improved API integration#4496

Rithika taking over for Aditya-feat: refactor chart with multi-select filters, dark mode, and improved API integration#4496
one-community merged 21 commits into
developmentfrom
Aditya-fix/paid-labor-cost-chart

Aditya-gam commented Dec 5, 2025 •

edited

Loading

Uh oh!

netlify Bot commented Dec 5, 2025 •

edited

Loading

Uh oh!

sonarqubecloud Bot commented Dec 5, 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!

Anusha-Gali left a comment

Uh oh!

sonarqubecloud Bot commented May 2, 2026

Uh oh!

one-community commented May 5, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

Aditya-gam commented Dec 5, 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:

Files Modified:

How to Test:

API Endpoint Requirements:

Test Scenarios:

Screenshots or Videos:

Notes:

Uh oh!

netlify Bot commented Dec 5, 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!

sonarqubecloud Bot commented Dec 5, 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!

sonarqubecloud Bot commented May 2, 2026

Quality Gate passed

Uh oh!

one-community commented May 5, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Aditya-gam commented Dec 5, 2025 •

edited

Loading

netlify Bot commented Dec 5, 2025 •

edited

Loading