Aditya-feat: refactor chart with multi-select filters, dark mode, and improved API integration #4496
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…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
Aditya-gam
changed the title
✅ Deploy Preview for highestgoodnetwork-dev ready!
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
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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):
Main Changes Explained:
Files Modified:
PaidLaborCost.jsx (+678 -178 lines)
API & State Management:
projects,tasks,date_range)isFetchingRefto prevent race conditions from simultaneous API callsconsole.logwith logger serviceFeatures:
react-select(replaces single-select)react-datepickerDark Mode:
document.bodyfor react-datepicker portalPaidLaborCost.module.css (+318 -107 lines)
WeeklyProjectSummary.module.css (+17 lines)
Header.jsx (-1 line)
isAckLoadingdeclarationHow to Test:
Aditya-fix/paid-labor-cost-chartrm -rf node_modules && yarn cache cleanyarn installand start the app:yarn start:local/bmdashboard/totalconstructionsummary→ "Labor and Time Tracking" sectionAPI Endpoint Requirements:
Endpoint:
GET /api/labor-costQuery 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 withstart_dateandend_datein 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:
?tasks=["Task 1","Task 2"]projectsparameterdate_rangeparameter with ISO 8601 datesScreenshots or Videos:
TestVideo.mov
Notes:
react-datepicker,react-select