Frontend Release to Main [4.84]#5117
Merged
one-community merged 229 commits intomainfrom Apr 8, 2026
Merged
Conversation
…njuries_donut_chart
Add comprehensive state management for filtering functionality in the Issues Breakdown Chart component. This establishes the foundation for implementing multi-dimensional filtering capabilities. Changes: - Add filter state variables for projects, date range, and issue types * selectedProjects: array to store selected project IDs * startDate: string for start date filter (YYYY-MM-DD format) * endDate: string for end date filter (YYYY-MM-DD format) * selectedIssueTypes: array to store selected issue type filters - Add state for available filter options * availableIssueTypes: stores fetched issue type options * availableProjects: stores available project list for selection - Preserve all existing functionality and states * Maintains data, loading, error, and darkMode states * No changes to existing data fetching or rendering logic
Add API integration to fetch available issue types for filter dropdown. This populates the availableIssueTypes state that will be used for the Issue Type filter UI in subsequent steps. Changes: - Add new useEffect hook that runs on component mount - Fetch issue types from /api/issues/types endpoint - Extract and store issueTypes from response.data.issueTypes - Implement graceful error handling * Falls back to empty array if fetch fails * Non-blocking: chart continues to work without filters * Errors don't affect primary chart functionality Implementation details: - Follows existing async/await pattern used in fetchData - Validates response data structure before setting state - Uses consistent endpoint format with REACT_APP_APIENDPOINT - Matches project code style and conventions
Implement flexible project data fetching that prioritizes Redux store and falls back to API when needed. This populates the availableProjects state for the Project filter dropdown in subsequent steps. Changes: - Add Redux selector for project data * Checks state.bmProjects first * Falls back to state.allProjects?.projects * Defaults to empty array if neither exists - Add useEffect hook with hybrid data strategy * Primary: Use Redux store if projects available * Fallback: Fetch from /projects API endpoint * Dependencies: Re-runs when reduxProjects changes - Implement graceful error handling * Falls back to empty array if API fetch fails * Non-blocking: chart continues to work without filters * Errors don't affect primary chart functionality Implementation details: - Follows existing async/await pattern used in other fetches - Validates data structure before setting state (Array.isArray check) - Uses consistent endpoint format with REACT_APP_APIENDPOINT - Reactive to Redux state changes via dependency array - Matches project code style and conventions Benefits: - Efficient: Reuses existing Redux data when available - Resilient: API fallback ensures data availability - Performance: Avoids unnecessary API calls when data exists in store
…cing Implement complete filter integration with the API endpoint, including query parameter construction, debounced requests, and enhanced error handling. This enables dynamic chart updates based on filter selections. Changes: - Add useRef hook for debouncing timeout management * Stores timeout reference to prevent memory leaks * Allows cleanup of pending timeouts - Refactor fetchData function to accept filters parameter * Build query string using URLSearchParams * Add projects filter as comma-separated project IDs * Add startDate and endDate in YYYY-MM-DD format * Add issueTypes filter as comma-separated strings * Construct clean URL with conditional query string - Enhance error handling for validation errors * Specifically handle 400 status errors * Extract user-friendly messages from API response * Check err.response.data?.error and err.response.data?.message * Fallback to generic message for unexpected error formats * Preserve existing error handling for other status codes - Update useEffect hook with filter integration * Add all filter states to dependency array * Implement 300ms debouncing to prevent excessive API calls * Clear existing timeout before setting new one * Include cleanup function to prevent memory leaks * Auto-fetch data when any filter changes Implementation details: - Uses URLSearchParams for query string building (standard pattern) - Debouncing improves performance and reduces server load - Proper cleanup prevents memory leaks on unmount - Validation error handling provides better UX - Follows React best practices and project conventions Benefits: - Performance: Debouncing reduces unnecessary API calls - UX: User-friendly error messages for validation issues - Reliability: Proper cleanup prevents memory leaks - Maintainability: Clean, readable query string construction
Implement robust data processing function to normalize API responses into the chart's fixed three-category structure. This ensures consistent data format regardless of API response variations and handles diverse property naming conventions. Changes: - Add processChartData function for data normalization * Validates input data (null/array checks) * Extracts projectId and projectName with fallbacks * Initializes all three issue types to 0 by default * Returns empty array for invalid input - Implement two-phase property matching strategy Phase 1 - Exact matches: * Checks for equipmentIssues, laborIssues, materialIssues * Handles materialsIssues variant (plural) * Tracks matched keys to prevent double-counting Phase 2 - Pattern matching for unmapped properties: * Equipment patterns: equipment, tool, machine * Labor patterns: labor, labour * Material patterns: material, supply, resource * Skips project metadata (_id, name, projectId, projectName) * Only processes properties not matched in Phase 1 - Integrate processChartData into fetchData * Processes API response before setting state (line 173) * Ensures chart always receives normalized data structure * Maintains backward compatibility with existing API format Edge case handling: - Empty/null API data returns empty array - Missing properties default to 0 - Non-numeric values coerced to number or default to 0 - Zero values skipped in pattern matching (optimization) - Prevents accumulation if exact match already found Implementation details: - Uses Set for efficient matched key tracking - Case-insensitive pattern matching (toLowerCase) - Additive accumulation for pattern matches - Comprehensive JSDoc documentation - Follows project code style and conventions Benefits: - Flexibility: Handles various API response formats - Reliability: Consistent output structure guaranteed - Maintainability: Clear separation of data transformation logic - Performance: Efficient tracking prevents double-counting - Extensibility: Easy to add new pattern matching rules
Implement project filter dropdown using react-select with multi-selection
capability, dark mode support, and comprehensive styling. This provides
users with an intuitive interface to filter issue data by projects.
Changes - Component (IssuesBreakdownChart.jsx):
- Add react-select import for multi-select dropdown
- Create filters section between legend and chart
* Positioned using filtersRow container
* Wrapped in filterGroup for consistent layout
- Implement react-select multi-select dropdown
* isMulti prop enables multiple project selection
* classNamePrefix="customSelect" for custom styling
* Maps availableProjects to option objects:
{ value: project._id || project.projectId,
label: project.name || project.projectName }
* Handles different property name conventions
- Add onChange handler for filter updates
* Updates selectedProjects state with array of IDs
* Extracts values from selected options
* Handles null/undefined (sets empty array)
* Triggers debounced API call via state change
- Implement comprehensive dark mode styling
* Control: #2c3344 background, #364156 border
* Menu: #2c3344 background matching control
* Options: #0d55b3 selected, #364156 focused
* Multi-value tags: #375071 background
* Hover states: #0d55b3 with white text
* Text colors: #e0e0e0 normal, #fff selected
- Add light mode styling
* Multi-value tags: #e2e7ee background
* Consistent font sizing (14px menu, 12px tags)
* Hover states match project patterns
- User experience features
* Placeholder: "Select Projects"
* isClearable for quick deselection
* isDisabled when no projects available
* Proper label association (htmlFor/id)
* Minimum height 38px for consistency
Changes - Styles (IssueBreakdownChart.module.css):
- Add .filtersRow class
* Flex container with 24px gap
* flex-wrap for responsive layout
* 24px top margin, 20px bottom margin
* Full width
- Add .filterGroup class
* Flex column layout for label + control
* min-width: 250px for usability
* flex: 1 for equal distribution
- Add .filterLabel class
* 14px font size, 600 weight
* 8px bottom margin for spacing
* Uses var(--text-color) for theme support
Implementation details:
- Follows patterns from ToolsHorizontalBarChart and ProjectRiskProfileOverview
- Handles property name variations (_id vs projectId, name vs projectName)
- Dark mode colors match project design system
- Value extraction uses controlled component pattern
- Filter state changes trigger existing debounced fetch logic
Benefits:
- UX: Intuitive multi-select with clear visual feedback
- Accessibility: Proper label associations and disabled states
- Consistency: Matches existing project filter patterns
- Theme support: Seamless dark/light mode switching
- Responsive: Flexible layout adapts to container width
Implement comprehensive filter UI with project multi-select and date range
inputs. Includes validation logic, dark mode support, and accessibility
features for an enhanced user experience.
Changes - JavaScript (IssuesBreakdownChart.jsx):
- Import react-select for multi-select dropdown functionality
- Add date change handlers with cross-validation
* handleStartDateChange: Updates startDate, adjusts endDate if invalid
* handleEndDateChange: Updates endDate, adjusts startDate if invalid
* Ensures endDate >= startDate bidirectionally
- Implement Project Filter UI
* Uses react-select with isMulti for multiple project selection
* Maps availableProjects to {value, label} option format
* Handles different property names (_id/projectId, name/projectName)
* Controlled component synced with selectedProjects state
* onChange updates selectedProjects with array of IDs
* Features: isClearable, disabled when no projects available
* Placeholder: "Select Projects"
- Implement Date Range Filter UI
* Two native HTML <input type="date"> elements
* Start Date and End Date with "to" separator
* Format: YYYY-MM-DD (native date input standard)
* HTML validation: min attribute on endDate tied to startDate
* JavaScript validation in handlers for cross-field logic
- Dark mode styling for react-select
* Control, menu, option backgrounds (#2c3344, #364156)
* Selected state (#0d55b3), focused state (#364156)
* Multi-value tags with appropriate colors (#375071)
* Hover states for remove buttons
* Light mode styling for standard appearance
- Add filters section layout
* Positioned between legend and chart container
* Uses filtersRow container with flex layout
* Two filterGroup sections (Project, Date Range)
Changes - CSS (IssueBreakdownChart.module.css):
- .filtersRow: Flex container with 24px gap, flex-wrap support
- .filterGroup: Column layout, min-width 250px, flex: 1
- .filterLabel: 14px font, 600 weight, 8px bottom margin
- .datePickerGroup: Flex container with 8px gap for inputs
- .datePicker: Native date input styling
* Flex: 1 for equal width distribution
* Border, padding, border-radius consistent with design
* CSS variables for theme support
* Min-height: 38px matches react-select height
- .datePicker:focus: Focus states
* Primary color border
* Box shadow for visual feedback
- .dateSeparator: "to" text styling, nowrap
Accessibility features:
- Proper label association with htmlFor and id attributes
- aria-label on both date inputs ("Start date", "End date")
- Semantic HTML structure
- Keyboard navigation support (native inputs and react-select)
Validation approach:
- HTML min attribute prevents invalid selection in date picker
- JavaScript handlers ensure data consistency in state
- Bidirectional validation (start adjusts end, end adjusts start)
Implementation details:
- Follows patterns from ToolsHorizontalBarChart.jsx
- Follows patterns from ProjectRiskProfileOverview.jsx
- Consistent with project's react-select usage patterns
- Dark mode colors match project theme standards
- CSS variables enable automatic theme switching
Benefits:
- UX: Intuitive multi-select and date range controls
- Accessibility: ARIA labels and semantic HTML
- Consistency: Matches existing project UI patterns
- Validation: Prevents invalid date ranges
- Theming: Full dark/light mode support
Implement issue type filter UI with a fixed set of three issue categories,
including display name to API property name mapping. This completes the
full filtering suite for the Issues Breakdown Chart.
Changes:
- Add FIXED_ISSUE_TYPES constant
* Array with three fixed display names:
- 'Equipment Issues'
- 'Labor Issues'
- 'Materials Issues'
* Does not use availableIssueTypes from API
* Ensures filter options match chart categories exactly
- Add ISSUE_TYPE_MAPPING constant
* Maps user-friendly display names to API property names
* 'Equipment Issues' → 'equipmentIssues'
* 'Labor Issues' → 'laborIssues'
* 'Materials Issues' → 'materialIssues'
* Enables seamless translation between UI and API
- Update fetchData function with display name mapping
* Maps selected display names to API property names before sending
* Uses ISSUE_TYPE_MAPPING for translation
* Filters out undefined values with .filter(Boolean)
* Only appends issueTypes param if valid mapped values exist
* Prevents sending invalid or empty issue type filters
- Add Issue Type Filter UI
* Positioned in filtersRow after Date Range Filter
* Uses react-select with isMulti for multiple selection
* Options derived from FIXED_ISSUE_TYPES (not from API)
* Controlled component synced with selectedIssueTypes state
* onChange updates state with array of display names
* Handles null/undefined gracefully (defaults to empty array)
- Dark mode styling for Issue Type Filter
* Control, menu, option backgrounds (#2c3344, #364156)
* Selected state (#0d55b3), focused state (#364156)
* Multi-value tags (#375071 dark, #e2e7ee light)
* Hover states for remove buttons
* Placeholder color (#aaaaaa)
* Consistent with Project Filter styling
- Filter integration
* Placeholder: "Select Issue Types"
* isClearable for easy deselection
* No isDisabled prop (always available)
* Triggers debounced API call via useEffect hook
* Works seamlessly with other filters
Accessibility features:
- Proper label association (htmlFor="issue-type-filter")
- Semantic HTML structure
- Keyboard navigation support via react-select
- Clear visual feedback for selection
Design decisions:
- Fixed types ensure consistency with chart structure
- Display names provide better UX than camelCase property names
- Mapping layer separates UI concerns from API concerns
- No dependency on API /issues/types endpoint for filter options
- Filter always shows three options regardless of data availability
Implementation details:
- Follows established react-select patterns in codebase
- Matches styling of Project Filter for visual consistency
- Integrates with existing debounced filter system
- No new CSS classes required (reuses existing layout)
Benefits:
- UX: User-friendly display names instead of technical property names
- Consistency: Filter options always match chart categories
- Maintainability: Clear separation between display and API layers
- Reliability: No dependency on external API for filter options
- Integration: Works seamlessly with existing filter architecture
…lity
Implement Issue Type multi-select filter with fixed categories and a
Reset Filters button to clear all active filters. Includes display name
to API property mapping and complete dark mode support.
Changes - JavaScript (IssuesBreakdownChart.jsx):
- Add fixed issue type constants
* FIXED_ISSUE_TYPES: ['Equipment Issues', 'Labor Issues', 'Materials Issues']
* Uses fixed array instead of API-fetched types
* Ensures consistency with chart's three-category structure
- Add display name to API property name mapping
* ISSUE_TYPE_MAPPING: Maps display names to API properties
* 'Equipment Issues' → 'equipmentIssues'
* 'Labor Issues' → 'laborIssues'
* 'Materials Issues' → 'materialIssues'
- Implement handleResetFilters function
* Clears selectedProjects (sets to [])
* Clears startDate (sets to null)
* Clears endDate (sets to null)
* Clears selectedIssueTypes (sets to [])
* Triggers automatic data refetch via useEffect hook
- Update fetchData with issue type mapping
* Maps display names to API property names before sending request
* Uses ISSUE_TYPE_MAPPING for transformation
* Filters out undefined values with filter(Boolean)
* Only appends issueTypes if valid mapped values exist
- Implement Issue Type Filter UI
* Uses react-select with isMulti for multiple selection
* Options from FIXED_ISSUE_TYPES (not API-fetched)
* Controlled component synced with selectedIssueTypes state
* onChange updates selectedIssueTypes with display names
* Features: isClearable for clearing selections
* Placeholder: "Select Issue Types"
* Positioned in filtersRow after Date Range Filter
- Add Reset Filters button UI
* Positioned after filtersRow in resetButtonContainer
* onClick triggers handleResetFilters
* Button text: "Reset Filters"
* Type: "button" (prevents form submission)
- Dark mode styling for Issue Type select and Reset button
* react-select styling matches Project filter pattern
* Control, menu, option backgrounds (#2c3344, #364156)
* Selected state (#0d55b3), focused state (#364156)
* Multi-value tags (#375071) with hover states
* Reset button colors: #DE6A6A (dark) / #f44336 (light)
* Reset button text: #0d1b2a (dark) / white (light)
Changes - CSS (IssueBreakdownChart.module.css):
- .resetButtonContainer: Right-aligned flex container
* display: flex, justify-content: flex-end
* margin-top: 16px, margin-bottom: 8px
* width: 100% for full container width
- .resetButton: Button styling with transitions
* padding: 8px 16px, border-radius: 6px
* font-weight: 500, font-size: 14px
* cursor: pointer, no border
* transition: all 0.3s ease for smooth animations
- .resetButton:hover: Hover state effects
* opacity: 0.9 for subtle darkening
* transform: translateY(-1px) for lift effect
- .resetButton:active: Active state
* transform: translateY(0) returns to normal position
Accessibility features:
- Proper label association with htmlFor and id ("issue-type-filter")
- Keyboard navigation support via react-select
- Button type="button" prevents unintended form submission
- Semantic HTML structure maintained
Data flow:
1. User selects issue types (display names stored in state)
2. Display names mapped to API properties in fetchData
3. API receives property names (equipmentIssues, laborIssues, etc.)
4. Response processed by processChartData
5. Chart displays filtered data
Reset flow:
1. User clicks Reset Filters button
2. handleResetFilters clears all filter states
3. useEffect detects state changes (dependency array)
4. fetchData called with empty filters (300ms debounce)
5. Chart updates to show all unfiltered data
Implementation details:
- Follows patterns from InteractiveMap.jsx (red reset button)
- Consistent with project's react-select usage patterns
- Display name mapping ensures API compatibility
- Fixed types ensure chart consistency
- Dark mode colors match project theme standards
Benefits:
- UX: Easy filter reset with single click
- Consistency: Fixed types align with chart structure
- Maintainability: Centralized display-to-API mapping
- Flexibility: Can filter by specific issue categories
- Theming: Complete dark/light mode support
- Automatic: Reset triggers refetch without manual action
…from-teamlist Amalesh - Fix inability to delete a team from the Team list
…hree-improvements-user-permissions-management-modal Peterson implemented three improvements on the user permissions management modal.
…ment-log-feedback Sudheesh Enhance Validation, Feedback & Action Controls on Daily Equipment
…lay-functionality
…-page-clear-button-visibility-fix Chirag - Fixed the visual of the Clear All button
…calender-view-events-display Chirag - Added icons to the Calendar View
…lay-functionality
Added tests to filter activities by type and date.
…list-default-display-functionality Chirag - Added toggle to Show Past Events on Activities page in the Community Portal
…tory-types-page Juhitha - Cleanup the inventory types page
…dit_suggest_delete_alignment Venkataramanan fix: edit, suggest, delete button alignments in single task
…unction-fe Akshith - Application/Job Posting Page/Function and Design - Search Function - Frontend
…ntDB Akshith - Added event database design navigation to activity dropdown
…te-selector Akshith: fix event date selector
…dal-form Akshith - Fix: Create Event Form Displays Previously Entered Event Name
…-figma-mismatch Som - fix(DatePicker): add "Ending After" date picker to search filters in CPDashboard.jsx
…graph-changes Veda horizontal bar graph changes
Diya 🔥 feat: Enhanced existing User State Feature
|
✅ Deploy Preview for highestgoodnetwork-dev ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
20 participants
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.
Includes: Venkataramanan 🔥 fix: Select extra member spacing #5086, Venkataramanan 🔥 fix: Weekly Summaries Report styling issues #5085, Vinay K Application/Job Posting Page – Application Form Template: Add ‘Clear Template’ Action #4590, Sourabh implementation slashdot autoposter #4627, Kristin Make Non-Month Dates Transparent in Calendar Page #4625, Aryan Tag-Based Filtering & Discoverability in Lesson List #5083, Venkataramanan 🔥 fix: edit, suggest, delete button alignments in single task #5105, Akshith - Added event database design navigation to activity dropdown #4795, Akshith: fix event date selector #4892, Akshith - Fix: Create Event Form Displays Previously Entered Event Name #4900, Akshith - Fix: “No events available” Message Overlap #4720, Akshith - Add Fuzzy Search/Typo Tolerance in Search Events #4759, Akshith - Application/Job Posting Page/Function and Design - Search Function - Frontend #5096+2147, Akshith - Add Missing Year Information in Event Date Display #4727, Diya 🔥 feat: Enhanced existing User State Feature #5098+2148, Aayush lessons learned hover ghost bar graph #4461, Sayali: optimize TotalOrgSummary date range loading with parallel API calls, debounce, and caching #5019+2011, Sayali: auto-fill start date with current local date when adding new task #4910, Sayali: prevent duplicate PR numbers for same reviewer in grading screen #5020, Aditya-Feat: Add filters to Issues Breakdown Chart in BM Dashboard #4324+1879, Adithya impl injuries donut chart #4204+1805, Veda horizontal bar graph changes #4345, Veda Review Volume Over Time chart #5012, Maithili - fix: resolve the issue that interactive map is not seen #5028+2064, Neeraj Add Get List Feature, No-Show List Modal And Tests For Drop-Off Tracking #4564, Vamsidhar - fix: use bumissuechart store key for Issue Dashboard list. #5084+1404, Sai Sandeep taking over for Kristin Replace Blank Cards in the Financials Section #3970, Sudheesh Enhance Validation, Feedback & Action Controls on Daily Equipment #5070, Chirag - Added toggle to Show Past Events on Activities page in the Community Portal #4772, Chirag - Added icons to the Calendar View #4790, Chirag - Fixed the visual of the Clear All button #4737, Chirag - Add Capacity-Based Event Filters in the event Database Design Page #4687, Juhitha - Cleanup the inventory types page #3833+765, Som - fix(DatePicker): add "Ending After" date picker to search filters in CPDashboard.jsx #4428, Mani shashank UI responsiveness and dark mode implementation #4500,