From cb73de11795340e3d1ab6c7e1e3d5c36d22425df Mon Sep 17 00:00:00 2001
From: Aditya Gambhir <67105262+Aditya-gam@users.noreply.github.com>
Date: Thu, 30 Oct 2025 14:55:24 -0700
Subject: [PATCH 01/19] feat(IssuesBreakdownChart): add filter state management
 foundation

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
---
 .../WeeklyProjectSummary/IssuesBreakdownChart.jsx      | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/components/BMDashboard/WeeklyProjectSummary/IssuesBreakdownChart.jsx b/src/components/BMDashboard/WeeklyProjectSummary/IssuesBreakdownChart.jsx
index 3a3e5c9a0a..645aac6d1a 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/IssuesBreakdownChart.jsx
+++ b/src/components/BMDashboard/WeeklyProjectSummary/IssuesBreakdownChart.jsx
@@ -25,6 +25,16 @@ export default function IssuesBreakdownChart() {
   const [error, setError] = useState(null);
   const darkMode = useSelector(state => state.theme.darkMode);
 
+  // Filter states
+  const [selectedProjects, setSelectedProjects] = useState([]);
+  const [startDate, setStartDate] = useState(null);
+  const [endDate, setEndDate] = useState(null);
+  const [selectedIssueTypes, setSelectedIssueTypes] = useState([]);
+
+  // Available options states
+  const [availableIssueTypes, setAvailableIssueTypes] = useState([]);
+  const [availableProjects, setAvailableProjects] = useState([]);
+
   const rootStyles = getComputedStyle(document.body);
   const textColor = rootStyles.getPropertyValue('--text-color') || '#666';
   const gridColor = rootStyles.getPropertyValue('--grid-color') || (darkMode ? '#444' : '#ccc');

From ef60f24370bec69656199a0d8c3819b959ca532e Mon Sep 17 00:00:00 2001
From: Aditya Gambhir <67105262+Aditya-gam@users.noreply.github.com>
Date: Thu, 30 Oct 2025 15:01:19 -0700
Subject: [PATCH 02/19] feat(IssuesBreakdownChart): fetch available issue types
 on mount

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
---
 .../IssuesBreakdownChart.jsx                     | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/src/components/BMDashboard/WeeklyProjectSummary/IssuesBreakdownChart.jsx b/src/components/BMDashboard/WeeklyProjectSummary/IssuesBreakdownChart.jsx
index 645aac6d1a..2afcf323ce 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/IssuesBreakdownChart.jsx
+++ b/src/components/BMDashboard/WeeklyProjectSummary/IssuesBreakdownChart.jsx
@@ -58,6 +58,22 @@ export default function IssuesBreakdownChart() {
     fetchData();
   }, []);
 
+  useEffect(() => {
+    const fetchIssueTypes = async () => {
+      try {
+        const response = await httpService.get(`${process.env.REACT_APP_APIENDPOINT}/issues/types`);
+        if (response.data && response.data.issueTypes) {
+          setAvailableIssueTypes(response.data.issueTypes);
+        }
+      } catch (err) {
+        // Chart can work without issue types filter - set to empty array
+        setAvailableIssueTypes([]);
+      }
+    };
+
+    fetchIssueTypes();
+  }, []);
+
   if (loading) return <div>Loading...</div>;
   if (error) return <div>Error: {error}</div>;
   if (!data || data.length === 0) return <div>No data available</div>;

From a5b10c12d7f87e43c89dda3db06d48ad43984d5f Mon Sep 17 00:00:00 2001
From: Aditya Gambhir <67105262+Aditya-gam@users.noreply.github.com>
Date: Thu, 30 Oct 2025 15:04:53 -0700
Subject: [PATCH 03/19] feat(IssuesBreakdownChart): add hybrid project data
 sourcing

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
---
 .../IssuesBreakdownChart.jsx                  | 26 +++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/src/components/BMDashboard/WeeklyProjectSummary/IssuesBreakdownChart.jsx b/src/components/BMDashboard/WeeklyProjectSummary/IssuesBreakdownChart.jsx
index 2afcf323ce..fe131637b3 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/IssuesBreakdownChart.jsx
+++ b/src/components/BMDashboard/WeeklyProjectSummary/IssuesBreakdownChart.jsx
@@ -25,6 +25,9 @@ export default function IssuesBreakdownChart() {
   const [error, setError] = useState(null);
   const darkMode = useSelector(state => state.theme.darkMode);
 
+  // Get projects from Redux
+  const reduxProjects = useSelector(state => state.bmProjects || state.allProjects?.projects || []);
+
   // Filter states
   const [selectedProjects, setSelectedProjects] = useState([]);
   const [startDate, setStartDate] = useState(null);
@@ -74,6 +77,29 @@ export default function IssuesBreakdownChart() {
     fetchIssueTypes();
   }, []);
 
+  useEffect(() => {
+    const fetchProjects = async () => {
+      // Use Redux store if available
+      if (reduxProjects && reduxProjects.length > 0) {
+        setAvailableProjects(reduxProjects);
+        return;
+      }
+
+      // Fetch from API if not in Redux
+      try {
+        const response = await httpService.get(`${process.env.REACT_APP_APIENDPOINT}/projects`);
+        if (response.data && Array.isArray(response.data)) {
+          setAvailableProjects(response.data);
+        }
+      } catch (err) {
+        // Chart can work without projects filter - set to empty array
+        setAvailableProjects([]);
+      }
+    };
+
+    fetchProjects();
+  }, [reduxProjects]);
+
   if (loading) return <div>Loading...</div>;
   if (error) return <div>Error: {error}</div>;
   if (!data || data.length === 0) return <div>No data available</div>;

From 5b53c55cab27ece16b4d502f345d9cc52f21350d Mon Sep 17 00:00:00 2001
From: Aditya Gambhir <67105262+Aditya-gam@users.noreply.github.com>
Date: Thu, 30 Oct 2025 15:08:27 -0700
Subject: [PATCH 04/19] feat(IssuesBreakdownChart): integrate filters with API
 and add debouncing

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
---
 .../IssuesBreakdownChart.jsx                  | 86 +++++++++++++++----
 1 file changed, 71 insertions(+), 15 deletions(-)

diff --git a/src/components/BMDashboard/WeeklyProjectSummary/IssuesBreakdownChart.jsx b/src/components/BMDashboard/WeeklyProjectSummary/IssuesBreakdownChart.jsx
index fe131637b3..320fa0da2c 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/IssuesBreakdownChart.jsx
+++ b/src/components/BMDashboard/WeeklyProjectSummary/IssuesBreakdownChart.jsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useRef } from 'react';
 import { useSelector } from 'react-redux';
 import {
   BarChart,
@@ -38,28 +38,84 @@ export default function IssuesBreakdownChart() {
   const [availableIssueTypes, setAvailableIssueTypes] = useState([]);
   const [availableProjects, setAvailableProjects] = useState([]);
 
+  // Ref for debouncing timeout
+  const debounceTimeoutRef = useRef(null);
+
   const rootStyles = getComputedStyle(document.body);
   const textColor = rootStyles.getPropertyValue('--text-color') || '#666';
   const gridColor = rootStyles.getPropertyValue('--grid-color') || (darkMode ? '#444' : '#ccc');
   const tooltipBg = rootStyles.getPropertyValue('--section-bg') || '#fff';
 
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        const response = await httpService.get(
-          `${process.env.REACT_APP_APIENDPOINT}/issues/breakdown`,
-        );
-        setData(response.data);
-        setError(null);
-      } catch (err) {
+  const fetchData = async filters => {
+    try {
+      setLoading(true);
+      setError(null);
+
+      // Build query string with URLSearchParams
+      const params = new URLSearchParams();
+
+      if (filters.projects && filters.projects.length > 0) {
+        params.append('projects', filters.projects.join(','));
+      }
+
+      if (filters.startDate) {
+        params.append('startDate', filters.startDate);
+      }
+
+      if (filters.endDate) {
+        params.append('endDate', filters.endDate);
+      }
+
+      if (filters.issueTypes && filters.issueTypes.length > 0) {
+        params.append('issueTypes', filters.issueTypes.join(','));
+      }
+
+      const queryString = params.toString();
+      const url = `${process.env.REACT_APP_APIENDPOINT}/issues/breakdown${
+        queryString ? `?${queryString}` : ''
+      }`;
+
+      const response = await httpService.get(url);
+      setData(response.data);
+      setError(null);
+    } catch (err) {
+      // Handle 400 errors (validation errors) with user-friendly messages
+      if (err.response && err.response.status === 400) {
+        const errorMessage =
+          err.response.data?.error || err.response.data?.message || 'Invalid filter parameters';
+        setError(errorMessage);
+      } else {
         setError(err.message || 'Failed to fetch issue statistics');
-      } finally {
-        setLoading(false);
       }
-    };
+    } finally {
+      setLoading(false);
+    }
+  };
 
-    fetchData();
-  }, []);
+  useEffect(() => {
+    // Clear any existing timeout
+    if (debounceTimeoutRef.current) {
+      clearTimeout(debounceTimeoutRef.current);
+    }
+
+    // Debounce API calls to prevent excessive requests
+    debounceTimeoutRef.current = setTimeout(() => {
+      const filters = {
+        projects: selectedProjects,
+        startDate,
+        endDate,
+        issueTypes: selectedIssueTypes,
+      };
+      fetchData(filters);
+    }, 300);
+
+    // Cleanup function to clear timeout on unmount or when dependencies change
+    return () => {
+      if (debounceTimeoutRef.current) {
+        clearTimeout(debounceTimeoutRef.current);
+      }
+    };
+  }, [selectedProjects, startDate, endDate, selectedIssueTypes]);
 
   useEffect(() => {
     const fetchIssueTypes = async () => {

From 6c590da9b8aca3e218a12567b99f2c8a2f7535c0 Mon Sep 17 00:00:00 2001
From: Aditya Gambhir <67105262+Aditya-gam@users.noreply.github.com>
Date: Thu, 30 Oct 2025 15:36:54 -0700
Subject: [PATCH 05/19] feat(IssuesBreakdownChart): add data normalization with
 processChartData

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
---
 .../IssuesBreakdownChart.jsx                  | 97 ++++++++++++++++++-
 1 file changed, 96 insertions(+), 1 deletion(-)

diff --git a/src/components/BMDashboard/WeeklyProjectSummary/IssuesBreakdownChart.jsx b/src/components/BMDashboard/WeeklyProjectSummary/IssuesBreakdownChart.jsx
index 320fa0da2c..d2e02ac5bb 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/IssuesBreakdownChart.jsx
+++ b/src/components/BMDashboard/WeeklyProjectSummary/IssuesBreakdownChart.jsx
@@ -46,6 +46,99 @@ export default function IssuesBreakdownChart() {
   const gridColor = rootStyles.getPropertyValue('--grid-color') || (darkMode ? '#444' : '#ccc');
   const tooltipBg = rootStyles.getPropertyValue('--section-bg') || '#fff';
 
+  /**
+   * Process API response data to map to three fixed issue types
+   * Ensures each project has equipmentIssues, laborIssues, and materialIssues properties
+   */
+  const processChartData = apiData => {
+    if (!apiData || !Array.isArray(apiData)) {
+      return [];
+    }
+
+    return apiData.map(project => {
+      // Extract projectId and projectName
+      const processedProject = {
+        projectId: project.projectId || project._id || '',
+        projectName: project.projectName || project.name || '',
+        equipmentIssues: 0,
+        laborIssues: 0,
+        materialIssues: 0,
+      };
+
+      // Track which properties we've already matched exactly
+      const matchedKeys = new Set();
+
+      // Check if API returns properties matching the fixed types directly
+      if (project.equipmentIssues !== undefined) {
+        processedProject.equipmentIssues = Number(project.equipmentIssues) || 0;
+        matchedKeys.add('equipmentIssues');
+      }
+      if (project.laborIssues !== undefined) {
+        processedProject.laborIssues = Number(project.laborIssues) || 0;
+        matchedKeys.add('laborIssues');
+      }
+      if (project.materialIssues !== undefined) {
+        processedProject.materialIssues = Number(project.materialIssues) || 0;
+        matchedKeys.add('materialIssues');
+      }
+      if (project.materialsIssues !== undefined) {
+        processedProject.materialIssues = Number(project.materialsIssues) || 0;
+        matchedKeys.add('materialsIssues');
+      }
+
+      // Map remaining properties that don't match exactly
+      // This handles cases where API returns different property names
+      Object.keys(project).forEach(key => {
+        // Skip project metadata and already matched keys
+        if (
+          key === 'projectId' ||
+          key === 'projectName' ||
+          key === '_id' ||
+          key === 'name' ||
+          matchedKeys.has(key)
+        ) {
+          return;
+        }
+
+        const value = Number(project[key]) || 0;
+        if (value === 0) return; // Skip zero values
+
+        const lowerKey = key.toLowerCase();
+
+        // Map to equipmentIssues if not already set or if pattern matches
+        if (
+          !matchedKeys.has('equipmentIssues') &&
+          (lowerKey.includes('equipment') ||
+            lowerKey.includes('tool') ||
+            lowerKey.includes('machine'))
+        ) {
+          processedProject.equipmentIssues += value;
+        }
+        // Map to laborIssues if not already set or if pattern matches
+        else if (
+          !matchedKeys.has('laborIssues') &&
+          (lowerKey.includes('labor') || lowerKey.includes('labour') || lowerKey === 'labor')
+        ) {
+          processedProject.laborIssues += value;
+        }
+        // Map to materialIssues if not already set or if pattern matches
+        else if (
+          !matchedKeys.has('materialIssues') &&
+          (lowerKey.includes('material') ||
+            lowerKey.includes('supply') ||
+            lowerKey.includes('resource'))
+        ) {
+          processedProject.materialIssues += value;
+        }
+        // For other types (Safety, Weather, METs quality / functionality, etc.):
+        // If all three fixed types are already set from exact matches, ignore
+        // Otherwise, we could aggregate into "Other" but for now we maintain the three fixed structure
+      });
+
+      return processedProject;
+    });
+  };
+
   const fetchData = async filters => {
     try {
       setLoading(true);
@@ -76,7 +169,9 @@ export default function IssuesBreakdownChart() {
       }`;
 
       const response = await httpService.get(url);
-      setData(response.data);
+      // Process API response to map to three fixed issue types
+      const processedData = processChartData(response.data);
+      setData(processedData);
       setError(null);
     } catch (err) {
       // Handle 400 errors (validation errors) with user-friendly messages

From ea8ceb9bd6ea47afa702fdd3c556e5ef05929fe6 Mon Sep 17 00:00:00 2001
From: Aditya Gambhir <67105262+Aditya-gam@users.noreply.github.com>
Date: Thu, 30 Oct 2025 15:41:57 -0700
Subject: [PATCH 06/19] feat(IssuesBreakdownChart): add project multi-select
 filter UI

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
---
 .../IssueBreakdownChart.module.css            |  23 ++++
 .../IssuesBreakdownChart.jsx                  | 120 ++++++++++++++++++
 2 files changed, 143 insertions(+)

diff --git a/src/components/BMDashboard/WeeklyProjectSummary/IssueBreakdownChart.module.css b/src/components/BMDashboard/WeeklyProjectSummary/IssueBreakdownChart.module.css
index a9fbb4f12c..165601b636 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/IssueBreakdownChart.module.css
+++ b/src/components/BMDashboard/WeeklyProjectSummary/IssueBreakdownChart.module.css
@@ -60,6 +60,29 @@
   font-size: 22px;
 }
 
+.filtersRow {
+  display: flex;
+  gap: 24px;
+  flex-wrap: wrap;
+  margin-top: 24px;
+  margin-bottom: 20px;
+  width: 100%;
+}
+
+.filterGroup {
+  display: flex;
+  flex-direction: column;
+  min-width: 250px;
+  flex: 1;
+}
+
+.filterLabel {
+  font-size: 14px;
+  font-weight: 600;
+  margin-bottom: 8px;
+  color: var(--text-color, #333);
+}
+
 .chartContainer {
   width: 100%;
   height: 500px;
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/IssuesBreakdownChart.jsx b/src/components/BMDashboard/WeeklyProjectSummary/IssuesBreakdownChart.jsx
index d2e02ac5bb..c461f6838b 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/IssuesBreakdownChart.jsx
+++ b/src/components/BMDashboard/WeeklyProjectSummary/IssuesBreakdownChart.jsx
@@ -10,6 +10,7 @@ import {
   ResponsiveContainer,
   LabelList,
 } from 'recharts';
+import Select from 'react-select';
 import httpService from '../../../services/httpService';
 import styles from './IssueBreakdownChart.module.css';
 
@@ -279,6 +280,124 @@ export default function IssuesBreakdownChart() {
             <span className={styles.legendLabel}>Materials Issues</span>
           </span>
         </div>
+
+        {/* Filters Section */}
+        <div className={styles.filtersRow}>
+          <div className={styles.filterGroup}>
+            <label htmlFor="project-filter" className={styles.filterLabel}>
+              Project
+            </label>
+            <Select
+              id="project-filter"
+              isMulti
+              classNamePrefix="customSelect"
+              options={availableProjects.map(project => ({
+                value: project._id || project.projectId,
+                label: project.name || project.projectName || project._id || project.projectId,
+              }))}
+              value={availableProjects
+                .filter(project => selectedProjects.includes(project._id || project.projectId))
+                .map(project => ({
+                  value: project._id || project.projectId,
+                  label: project.name || project.projectName || project._id || project.projectId,
+                }))}
+              onChange={selectedOptions =>
+                setSelectedProjects(
+                  selectedOptions ? selectedOptions.map(option => option.value) : [],
+                )
+              }
+              placeholder="Select Projects"
+              isClearable
+              isDisabled={availableProjects.length === 0}
+              styles={
+                darkMode
+                  ? {
+                      control: baseStyles => ({
+                        ...baseStyles,
+                        backgroundColor: '#2c3344',
+                        borderColor: '#364156',
+                        minHeight: '38px',
+                        fontSize: '14px',
+                      }),
+                      menu: baseStyles => ({
+                        ...baseStyles,
+                        backgroundColor: '#2c3344',
+                        fontSize: '14px',
+                      }),
+                      option: (baseStyles, state) => ({
+                        ...baseStyles,
+                        backgroundColor: state.isSelected
+                          ? '#0d55b3'
+                          : state.isFocused
+                          ? '#364156'
+                          : '#2c3344',
+                        color: state.isSelected ? '#fff' : '#e0e0e0',
+                        fontSize: '14px',
+                      }),
+                      multiValue: baseStyles => ({
+                        ...baseStyles,
+                        backgroundColor: '#375071',
+                        borderRadius: '6px',
+                      }),
+                      multiValueLabel: baseStyles => ({
+                        ...baseStyles,
+                        color: '#fff',
+                        fontSize: '12px',
+                      }),
+                      multiValueRemove: baseStyles => ({
+                        ...baseStyles,
+                        color: '#fff',
+                        ':hover': {
+                          backgroundColor: '#0d55b3',
+                          color: '#fff',
+                        },
+                      }),
+                      singleValue: baseStyles => ({
+                        ...baseStyles,
+                        color: '#e0e0e0',
+                      }),
+                      placeholder: baseStyles => ({
+                        ...baseStyles,
+                        color: '#aaaaaa',
+                      }),
+                    }
+                  : {
+                      control: baseStyles => ({
+                        ...baseStyles,
+                        minHeight: '38px',
+                        fontSize: '14px',
+                      }),
+                      menu: baseStyles => ({
+                        ...baseStyles,
+                        fontSize: '14px',
+                      }),
+                      option: baseStyles => ({
+                        ...baseStyles,
+                        fontSize: '14px',
+                      }),
+                      multiValue: baseStyles => ({
+                        ...baseStyles,
+                        backgroundColor: '#e2e7ee',
+                        borderRadius: '6px',
+                      }),
+                      multiValueLabel: baseStyles => ({
+                        ...baseStyles,
+                        color: '#333',
+                        fontSize: '12px',
+                      }),
+                      multiValueRemove: baseStyles => ({
+                        ...baseStyles,
+                        color: '#333',
+                        ':hover': {
+                          backgroundColor: '#0d55b3',
+                          color: '#fff',
+                        },
+                      }),
+                    }
+              }
+            />
+          </div>
+        </div>
       </div>
 
       <div className={styles.chartContainer}>
@@ -295,6 +414,7 @@ export default function IssuesBreakdownChart() {
                 color: textColor,
               }}
             />
+            {/* Fixed three bars: Equipment Issues, Labor Issues, Materials Issues */}
             <Bar dataKey="equipmentIssues" name="Equipment Issues" fill={COLORS.equipmentIssues}>
               <LabelList dataKey="equipmentIssues" position="top" fill={textColor} />
             </Bar>

From 19d5d7fe0cd5a2ad4ae21c287f94dbd39d47c0f6 Mon Sep 17 00:00:00 2001
From: Aditya Gambhir <67105262+Aditya-gam@users.noreply.github.com>
Date: Thu, 30 Oct 2025 15:48:08 -0700
Subject: [PATCH 07/19] feat(IssuesBreakdownChart): add project and date range
 filter UI

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
---
 .../IssueBreakdownChart.module.css            | 29 +++++++++++
 .../IssuesBreakdownChart.jsx                  | 48 +++++++++++++++++++
 2 files changed, 77 insertions(+)

diff --git a/src/components/BMDashboard/WeeklyProjectSummary/IssueBreakdownChart.module.css b/src/components/BMDashboard/WeeklyProjectSummary/IssueBreakdownChart.module.css
index 165601b636..92e738ff9f 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/IssueBreakdownChart.module.css
+++ b/src/components/BMDashboard/WeeklyProjectSummary/IssueBreakdownChart.module.css
@@ -83,6 +83,35 @@
   color: var(--text-color, #333);
 }
 
+.datePickerGroup {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.datePicker {
+  flex: 1;
+  padding: 8px 12px;
+  border: 1px solid var(--border-color, #ddd);
+  border-radius: 6px;
+  font-size: 14px;
+  background: var(--section-bg, #fff);
+  color: var(--text-color, #333);
+  min-height: 38px;
+}
+
+.datePicker:focus {
+  outline: none;
+  border-color: var(--primary-color, #0d55b3);
+  box-shadow: 0 0 0 2px rgba(13, 85, 179, 0.1);
+}
+
+.dateSeparator {
+  color: var(--text-color, #666);
+  font-size: 14px;
+  white-space: nowrap;
+}
+
 .chartContainer {
   width: 100%;
   height: 500px;
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/IssuesBreakdownChart.jsx b/src/components/BMDashboard/WeeklyProjectSummary/IssuesBreakdownChart.jsx
index c461f6838b..96404bb243 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/IssuesBreakdownChart.jsx
+++ b/src/components/BMDashboard/WeeklyProjectSummary/IssuesBreakdownChart.jsx
@@ -140,6 +140,28 @@ export default function IssuesBreakdownChart() {
     });
   };
 
+  const handleStartDateChange = e => {
+    const newStartDate = e.target.value;
+    setStartDate(newStartDate);
+
+    // Validate: endDate must be >= startDate
+    if (endDate && newStartDate && endDate < newStartDate) {
+      // If endDate is before new startDate, adjust endDate to startDate
+      setEndDate(newStartDate);
+    }
+  };
+
+  const handleEndDateChange = e => {
+    const newEndDate = e.target.value;
+    setEndDate(newEndDate);
+
+    // Validate: endDate must be >= startDate
+    if (startDate && newEndDate && newEndDate < startDate) {
+      // If new endDate is before startDate, adjust startDate to endDate
+      setStartDate(newEndDate);
+    }
+  };
+
   const fetchData = async filters => {
     try {
       setLoading(true);
@@ -397,6 +419,32 @@ export default function IssuesBreakdownChart() {
               }
             />
           </div>
+
+          <div className={styles.filterGroup}>
+            <label htmlFor="start-date-picker" className={styles.filterLabel}>
+              Date Range
+            </label>
+            <div className={styles.datePickerGroup}>
+              <input
+                id="start-date-picker"
+                type="date"
+                className={styles.datePicker}
+                value={startDate || ''}
+                onChange={handleStartDateChange}
+                aria-label="Start date"
+              />
+              <span className={styles.dateSeparator}>to</span>
+              <input
+                id="end-date-picker"
+                type="date"
+                className={styles.datePicker}
+                value={endDate || ''}
+                onChange={handleEndDateChange}
+                min={startDate || ''}
+                aria-label="End date"
+              />
+            </div>
+          </div>
         </div>
       </div>
 

From 2f3522a15d3714cb0f43f76568aa2fb587713308 Mon Sep 17 00:00:00 2001
From: Aditya Gambhir <67105262+Aditya-gam@users.noreply.github.com>
Date: Thu, 30 Oct 2025 15:50:53 -0700
Subject: [PATCH 08/19] feat(IssuesBreakdownChart): add issue type filter with
 fixed categories
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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
---
 .../IssuesBreakdownChart.jsx                  | 130 +++++++++++++++++-
 1 file changed, 129 insertions(+), 1 deletion(-)

diff --git a/src/components/BMDashboard/WeeklyProjectSummary/IssuesBreakdownChart.jsx b/src/components/BMDashboard/WeeklyProjectSummary/IssuesBreakdownChart.jsx
index 96404bb243..7aadadef00 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/IssuesBreakdownChart.jsx
+++ b/src/components/BMDashboard/WeeklyProjectSummary/IssuesBreakdownChart.jsx
@@ -20,6 +20,16 @@ const COLORS = {
   materialIssues: '#F3C13A', // yellow
 };
 
+// Fixed issue types for filter (display names)
+const FIXED_ISSUE_TYPES = ['Equipment Issues', 'Labor Issues', 'Materials Issues'];
+
+// Map display names to API property names
+const ISSUE_TYPE_MAPPING = {
+  'Equipment Issues': 'equipmentIssues',
+  'Labor Issues': 'laborIssues',
+  'Materials Issues': 'materialIssues',
+};
+
 export default function IssuesBreakdownChart() {
   const [data, setData] = useState([]);
   const [loading, setLoading] = useState(true);
@@ -183,7 +193,13 @@ export default function IssuesBreakdownChart() {
       }
 
       if (filters.issueTypes && filters.issueTypes.length > 0) {
-        params.append('issueTypes', filters.issueTypes.join(','));
+        // Map display names to API property names
+        const apiIssueTypes = filters.issueTypes
+          .map(displayName => ISSUE_TYPE_MAPPING[displayName] || displayName)
+          .filter(Boolean); // Remove any undefined values
+        if (apiIssueTypes.length > 0) {
+          params.append('issueTypes', apiIssueTypes.join(','));
+        }
       }
 
       const queryString = params.toString();
@@ -445,6 +461,118 @@ export default function IssuesBreakdownChart() {
               />
             </div>
           </div>
+
+          <div className={styles.filterGroup}>
+            <label htmlFor="issue-type-filter" className={styles.filterLabel}>
+              Issue Type
+            </label>
+            <Select
+              id="issue-type-filter"
+              isMulti
+              classNamePrefix="customSelect"
+              options={FIXED_ISSUE_TYPES.map(type => ({
+                value: type,
+                label: type,
+              }))}
+              value={selectedIssueTypes.map(type => ({
+                value: type,
+                label: type,
+              }))}
+              onChange={selectedOptions =>
+                setSelectedIssueTypes(
+                  selectedOptions ? selectedOptions.map(option => option.value) : [],
+                )
+              }
+              placeholder="Select Issue Types"
+              isClearable
+              styles={
+                darkMode
+                  ? {
+                      control: baseStyles => ({
+                        ...baseStyles,
+                        backgroundColor: '#2c3344',
+                        borderColor: '#364156',
+                        minHeight: '38px',
+                        fontSize: '14px',
+                      }),
+                      menu: baseStyles => ({
+                        ...baseStyles,
+                        backgroundColor: '#2c3344',
+                        fontSize: '14px',
+                      }),
+                      option: (baseStyles, state) => ({
+                        ...baseStyles,
+                        backgroundColor: state.isSelected
+                          ? '#0d55b3'
+                          : state.isFocused
+                          ? '#364156'
+                          : '#2c3344',
+                        color: state.isSelected ? '#fff' : '#e0e0e0',
+                        fontSize: '14px',
+                      }),
+                      multiValue: baseStyles => ({
+                        ...baseStyles,
+                        backgroundColor: '#375071',
+                        borderRadius: '6px',
+                      }),
+                      multiValueLabel: baseStyles => ({
+                        ...baseStyles,
+                        color: '#fff',
+                        fontSize: '12px',
+                      }),
+                      multiValueRemove: baseStyles => ({
+                        ...baseStyles,
+                        color: '#fff',
+                        ':hover': {
+                          backgroundColor: '#0d55b3',
+                          color: '#fff',
+                        },
+                      }),
+                      singleValue: baseStyles => ({
+                        ...baseStyles,
+                        color: '#e0e0e0',
+                      }),
+                      placeholder: baseStyles => ({
+                        ...baseStyles,
+                        color: '#aaaaaa',
+                      }),
+                    }
+                  : {
+                      control: baseStyles => ({
+                        ...baseStyles,
+                        minHeight: '38px',
+                        fontSize: '14px',
+                      }),
+                      menu: baseStyles => ({
+                        ...baseStyles,
+                        fontSize: '14px',
+                      }),
+                      option: baseStyles => ({
+                        ...baseStyles,
+                        fontSize: '14px',
+                      }),
+                      multiValue: baseStyles => ({
+                        ...baseStyles,
+                        backgroundColor: '#e2e7ee',
+                        borderRadius: '6px',
+                      }),
+                      multiValueLabel: baseStyles => ({
+                        ...baseStyles,
+                        color: '#333',
+                        fontSize: '12px',
+                      }),
+                      multiValueRemove: baseStyles => ({
+                        ...baseStyles,
+                        color: '#333',
+                        ':hover': {
+                          backgroundColor: '#0d55b3',
+                          color: '#fff',
+                        },
+                      }),
+                    }
+              }
+            />
+          </div>
         </div>
       </div>
 

From 680a9b74e501558766a87ca14a37243ee035315a Mon Sep 17 00:00:00 2001
From: Aditya Gambhir <67105262+Aditya-gam@users.noreply.github.com>
Date: Thu, 30 Oct 2025 15:57:58 -0700
Subject: [PATCH 09/19] feat(IssuesBreakdownChart): add issue type filter and
 reset functionality
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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
---
 .../IssueBreakdownChart.module.css            | 27 +++++++++++++++++++
 .../IssuesBreakdownChart.jsx                  | 24 +++++++++++++++++
 2 files changed, 51 insertions(+)

diff --git a/src/components/BMDashboard/WeeklyProjectSummary/IssueBreakdownChart.module.css b/src/components/BMDashboard/WeeklyProjectSummary/IssueBreakdownChart.module.css
index 92e738ff9f..2547f5aebd 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/IssueBreakdownChart.module.css
+++ b/src/components/BMDashboard/WeeklyProjectSummary/IssueBreakdownChart.module.css
@@ -112,6 +112,33 @@
   white-space: nowrap;
 }
 
+.resetButtonContainer {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 16px;
+  margin-bottom: 8px;
+  width: 100%;
+}
+
+.resetButton {
+  padding: 8px 16px;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-weight: 500;
+  font-size: 14px;
+  transition: all 0.3s ease;
+}
+
+.resetButton:hover {
+  opacity: 0.9;
+  transform: translateY(-1px);
+}
+
+.resetButton:active {
+  transform: translateY(0);
+}
+
 .chartContainer {
   width: 100%;
   height: 500px;
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/IssuesBreakdownChart.jsx b/src/components/BMDashboard/WeeklyProjectSummary/IssuesBreakdownChart.jsx
index 7aadadef00..8e815990a6 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/IssuesBreakdownChart.jsx
+++ b/src/components/BMDashboard/WeeklyProjectSummary/IssuesBreakdownChart.jsx
@@ -172,6 +172,15 @@ export default function IssuesBreakdownChart() {
     }
   };
 
+  const handleResetFilters = () => {
+    // Clear all filters
+    setSelectedProjects([]);
+    setStartDate(null);
+    setEndDate(null);
+    setSelectedIssueTypes([]);
+    // Data refetch will be triggered automatically by useEffect when state changes
+  };
+
   const fetchData = async filters => {
     try {
       setLoading(true);
@@ -574,6 +583,21 @@ export default function IssuesBreakdownChart() {
             />
           </div>
         </div>
+
+        {/* Reset Filters Button */}
+        <div className={styles.resetButtonContainer}>
+          <button
+            type="button"
+            onClick={handleResetFilters}
+            className={styles.resetButton}
+            style={{
+              backgroundColor: darkMode ? '#DE6A6A' : '#f44336',
+              color: darkMode ? '#0d1b2a' : 'white',
+            }}
+          >
+            Reset Filters
+          </button>
+        </div>
       </div>
 
       <div className={styles.chartContainer}>

From 842b743e632a1168e5bf6592f4449e16bc346f4f Mon Sep 17 00:00:00 2001
From: Aditya Gambhir <67105262+Aditya-gam@users.noreply.github.com>
Date: Thu, 30 Oct 2025 16:02:00 -0700
Subject: [PATCH 10/19] style(IssuesBreakdownChart): add responsive design and
 enhanced UI states
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Implement comprehensive responsive design with multiple breakpoints and
enhance interactive states for filter controls. Ensures optimal viewing
experience across all device sizes while maintaining accessibility.

Changes:

Enhanced Interactive States:

- Date picker hover state
  * Border color transition on hover
  * Smooth 0.2s ease transition

- Date picker focus state
  * Primary color border (#0d55b3)
  * Accessible box shadow (2px rgba)
  * Removes default outline for custom styling

- Reset button states
  * Box shadow for depth (2px 4px default)
  * Hover: Lift effect with translateY(-1px) and enhanced shadow
  * Active: Pressed state with translateY(0) and reduced shadow
  * Focus: Accessibility outline with primary color shadow
  * Smooth 0.3s transition for all state changes

Layout Enhancements:

- filtersRow alignment
  * Added align-items: flex-start for consistent alignment
  * Maintains existing flex-wrap and gap

- Reset button container
  * Flex layout with justify-content: flex-end
  * Proper margin-top (16px) and margin-bottom (8px)
  * Full width for proper alignment

Responsive Design - Tablet (≤1024px):

- Reduced gap in filtersRow (24px → 16px)
- Reduced filterGroup min-width (250px → 200px)
- Maintains horizontal layout

Responsive Design - Mobile (≤768px):

- Container padding reduced (32px → 20px)
- Heading font size reduced (36px → 28px)
- filtersRow switches to vertical layout (flex-direction: column)
- Filter groups take full width (100%)
- Date pickers maintain horizontal layout
- Reset button centered with max-width (200px)
- Chart height reduced (500px → 400px)
- Adjusted margins and gaps for compact layout

Responsive Design - Small Mobile (≤480px):

- Container padding reduced further (20px → 16px)
- Heading font size reduced (28px → 24px)
- Legend adjustments:
  * Gap reduced (24px → 16px)
  * Left-aligned (justify-content: flex-start)
  * Label font size reduced (22px → 18px)
- Filter label font size reduced (14px → 13px)
- Date picker group wraps (flex-wrap: wrap)
- Date separator takes full width with centered text
- Chart height reduced (400px → 350px)

CSS Architecture:

- Uses CSS variables for theme support
- Transition properties for smooth state changes
- Mobile-first responsive approach with progressive enhancement
- Maintains existing styles, adds enhancements only

Benefits:

- Responsive: Optimal layout on all screen sizes
- Performance: CSS-only transitions, no JavaScript overhead
- Accessibility: Proper focus states and keyboard navigation
- UX: Smooth transitions and intuitive interactive states
- Maintainability: Clear breakpoint organization and comments
- Consistency: Follows project's CSS patterns and variable usage

Testing Considerations:

- Tablet: Horizontal filters with reduced spacing
- Mobile: Vertical filters, centered reset button
- Small mobile: Optimized spacing, wrapped date separator
- All sizes: Chart remains functional and readable
---
 .../IssueBreakdownChart.module.css            | 117 ++++++++++++++++++
 1 file changed, 117 insertions(+)

diff --git a/src/components/BMDashboard/WeeklyProjectSummary/IssueBreakdownChart.module.css b/src/components/BMDashboard/WeeklyProjectSummary/IssueBreakdownChart.module.css
index 2547f5aebd..74bade2905 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/IssueBreakdownChart.module.css
+++ b/src/components/BMDashboard/WeeklyProjectSummary/IssueBreakdownChart.module.css
@@ -67,6 +67,7 @@
   margin-top: 24px;
   margin-bottom: 20px;
   width: 100%;
+  align-items: flex-start;
 }
 
 .filterGroup {
@@ -98,6 +99,11 @@
   background: var(--section-bg, #fff);
   color: var(--text-color, #333);
   min-height: 38px;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.datePicker:hover {
+  border-color: var(--border-color-hover, #bbb);
 }
 
 .datePicker:focus {
@@ -128,15 +134,23 @@
   font-weight: 500;
   font-size: 14px;
   transition: all 0.3s ease;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
 .resetButton:hover {
   opacity: 0.9;
   transform: translateY(-1px);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
 }
 
 .resetButton:active {
   transform: translateY(0);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.resetButton:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px rgba(244, 67, 54, 0.3);
 }
 
 .chartContainer {
@@ -146,3 +160,106 @@
   background: var(--section-bg, transparent);
   border-radius: 12px;
 }
+
+/* ===================== RESPONSIVE DESIGN ===================== */
+
+/* Tablet and smaller screens */
+@media (max-width: 1024px) {
+  .filtersRow {
+    gap: 16px;
+  }
+
+  .filterGroup {
+    min-width: 200px;
+  }
+}
+
+/* Mobile devices */
+@media (max-width: 768px) {
+  .container {
+    padding: 20px;
+  }
+
+  .heading {
+    font-size: 28px;
+  }
+
+  .filtersRow {
+    flex-direction: column;
+    gap: 20px;
+    margin-top: 20px;
+    margin-bottom: 16px;
+  }
+
+  .filterGroup {
+    min-width: 100%;
+    width: 100%;
+  }
+
+  .datePickerGroup {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .datePicker {
+    min-width: 0;
+  }
+
+  .resetButtonContainer {
+    justify-content: center;
+    margin-top: 12px;
+  }
+
+  .resetButton {
+    width: 100%;
+    max-width: 200px;
+  }
+
+  .chartContainer {
+    height: 400px;
+    margin-top: 16px;
+  }
+}
+
+/* Small mobile devices */
+@media (max-width: 480px) {
+  .container {
+    padding: 16px;
+  }
+
+  .heading {
+    font-size: 24px;
+    margin-bottom: 12px;
+  }
+
+  .legend {
+    gap: 16px;
+    justify-content: flex-start;
+  }
+
+  .legendLabel {
+    font-size: 18px;
+  }
+
+  .filtersRow {
+    gap: 16px;
+    margin-top: 16px;
+  }
+
+  .filterLabel {
+    font-size: 13px;
+  }
+
+  .datePickerGroup {
+    flex-wrap: wrap;
+  }
+
+  .dateSeparator {
+    width: 100%;
+    text-align: center;
+  }
+
+  .chartContainer {
+    height: 350px;
+  }
+}

From c0caa5eeabb815fdb51e75bd75710f003d466fd2 Mon Sep 17 00:00:00 2001
From: Aditya Gambhir <67105262+Aditya-gam@users.noreply.github.com>
Date: Thu, 30 Oct 2025 17:22:35 -0700
Subject: [PATCH 11/19] feat(IssuesBreakdownChart): add comprehensive edge case
 handling

Implement robust error handling, loading states, and empty states with
user-friendly UI feedback. Removes early returns and adds conditional
rendering for all application states.

Changes - JavaScript (IssuesBreakdownChart.jsx):

1. Import Loading component
   * Uses common Loading component from components/common/Loading
   * Supports dark mode prop

2. Enhanced error handling in fetchData
   * Date validation: Prevents startDate > endDate
   * Early validation return with error message
   * 400 validation errors: User-friendly messages from API
   * HTTP errors: Status code and message display
   * Network errors: Connection error messaging
   * Generic errors: Fallback error messages
   * Clears data array on error (line 264)

3. Filter parameter handling
   * Empty project array: Omits projects param (fetches all)
   * Empty issue types array: Omits issueTypes param (fetches all)
   * Conditional parameter appending (lines 201, 214)

4. Issue type mapping in filters
   * Maps display names to API property names
   * Uses ISSUE_TYPE_MAPPING constant
   * Filters out undefined values (line 218)

5. Response validation
   * Checks for valid response and response.data
   * Sets error and clears data if invalid
   * Prevents rendering errors from invalid responses

6. Removed early returns
   * No early return for loading state
   * No early return for error state
   * No early return for empty data
   * All states handled in conditional render

7. Added conditional rendering in chartContainer
   * Loading state: Loading component + message
   * Error state: Error icon + error message
   * Empty state: Chart icon + helpful message
   * Data state: ResponsiveContainer with BarChart

8. Error message banner
   * Displays above filters when error exists
   * Uses role="alert" for accessibility
   * Font Awesome exclamation-circle icon
   * Positioned before chartContainer

9. Loading state UI
   * Centered Loading component
   * "Loading issue statistics..." message
   * Consistent with project patterns

10. Empty state UI
    * Chart icon (fa-chart-bar)
    * "No data available" primary message
    * "Try adjusting your filters..." subtext
    * Helpful user guidance

11. Error state UI in chart area
    * Warning icon (fa-exclamation-triangle)
    * Error message display
    * Consistent error styling

Changes - CSS (IssueBreakdownChart.module.css):

1. .errorMessage
   * Error banner above filters
   * Semi-transparent red background (rgba)
   * Red border and text (#f44336)
   * Padding: 12px 16px
   * Border-radius: 6px
   * Icon sizing: 16px

2. .chartContainer enhancements
   * Display: flex for centering
   * Align-items: center
   * Justify-content: center
   * Enables centered state displays

3. .loadingContainer
   * Flex column layout
   * Centered alignment and justification
   * Gap: 16px between Loading and text
   * Padding: 40px
   * Full width and height

4. .loadingText
   * Color: var(--text-color, #666)
   * Font-size: 16px
   * Font-weight: 500

5. .errorContainer
   * Flex column layout
   * Centered alignment
   * Gap: 12px
   * Padding: 40px
   * Text-align: center
   * Icon styling: 48px, red (#f44336), 70% opacity

6. .errorText
   * Color: var(--text-color, #333)
   * Font-size: 16px
   * Font-weight: 500

7. .emptyContainer
   * Flex column layout
   * Centered alignment
   * Gap: 12px
   * Padding: 40px
   * Text-align: center
   * Icon styling: 48px, muted color (#999), 50% opacity

8. .emptyText
   * Color: var(--text-color, #666)
   * Font-size: 18px
   * Font-weight: 500

9. .emptySubtext
   * Color: var(--text-color, #999)
   * Font-size: 14px
   * Margin-top: 4px

Edge Cases Handled:

- Invalid date ranges: Validated before API call
- Empty filter arrays: Omits parameters (fetches all data)
- Network errors: Clear messaging to user
- API validation errors: User-friendly error display
- Invalid API responses: Graceful fallback
- No data returned: Empty state with guidance
- Loading delays: Loading indicator with message

Accessibility Features:

- role="alert" on error messages
- aria-hidden="true" on decorative icons
- Semantic error messaging
- Clear visual feedback for all states

Benefits:

- UX: Clear feedback for all application states
- Reliability: Handles all error scenarios gracefully
- Accessibility: ARIA roles and semantic HTML
- Maintainability: Centralized state rendering logic
- Resilience: Never crashes on invalid data
- User Guidance: Helpful messages in empty/error states
---
 .../IssueBreakdownChart.module.css            |  92 ++++++++++++++
 .../IssuesBreakdownChart.jsx                  | 116 +++++++++++++-----
 2 files changed, 178 insertions(+), 30 deletions(-)

diff --git a/src/components/BMDashboard/WeeklyProjectSummary/IssueBreakdownChart.module.css b/src/components/BMDashboard/WeeklyProjectSummary/IssueBreakdownChart.module.css
index 74bade2905..dc459c1dcc 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/IssueBreakdownChart.module.css
+++ b/src/components/BMDashboard/WeeklyProjectSummary/IssueBreakdownChart.module.css
@@ -153,12 +153,104 @@
   box-shadow: 0 0 0 2px rgba(244, 67, 54, 0.3);
 }
 
+.errorMessage {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  margin-top: 16px;
+  background: rgba(244, 67, 54, 0.1);
+  border: 1px solid rgba(244, 67, 54, 0.3);
+  border-radius: 6px;
+  color: #f44336;
+  font-size: 14px;
+  width: 100%;
+}
+
+.errorMessage i {
+  font-size: 16px;
+}
+
 .chartContainer {
   width: 100%;
   height: 500px;
   margin-top: 20px;
   background: var(--section-bg, transparent);
   border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.loadingContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  width: 100%;
+  height: 100%;
+  padding: 40px;
+}
+
+.loadingText {
+  color: var(--text-color, #666);
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.errorContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  width: 100%;
+  height: 100%;
+  padding: 40px;
+  text-align: center;
+}
+
+.errorContainer i {
+  font-size: 48px;
+  color: #f44336;
+  opacity: 0.7;
+}
+
+.errorText {
+  color: var(--text-color, #333);
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.emptyContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  width: 100%;
+  height: 100%;
+  padding: 40px;
+  text-align: center;
+}
+
+.emptyContainer i {
+  font-size: 48px;
+  color: var(--text-color, #999);
+  opacity: 0.5;
+}
+
+.emptyText {
+  color: var(--text-color, #666);
+  font-size: 18px;
+  font-weight: 500;
+}
+
+.emptySubtext {
+  color: var(--text-color, #999);
+  font-size: 14px;
+  margin-top: 4px;
 }
 
 /* ===================== RESPONSIVE DESIGN ===================== */
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/IssuesBreakdownChart.jsx b/src/components/BMDashboard/WeeklyProjectSummary/IssuesBreakdownChart.jsx
index 8e815990a6..2fda3e5455 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/IssuesBreakdownChart.jsx
+++ b/src/components/BMDashboard/WeeklyProjectSummary/IssuesBreakdownChart.jsx
@@ -11,6 +11,7 @@ import {
   LabelList,
 } from 'recharts';
 import Select from 'react-select';
+import Loading from '../../common/Loading/Loading';
 import httpService from '../../../services/httpService';
 import styles from './IssueBreakdownChart.module.css';
 
@@ -186,9 +187,17 @@ export default function IssuesBreakdownChart() {
       setLoading(true);
       setError(null);
 
+      // Validate date range
+      if (filters.startDate && filters.endDate && filters.startDate > filters.endDate) {
+        setError('Start date must be before or equal to end date');
+        setLoading(false);
+        return;
+      }
+
       // Build query string with URLSearchParams
       const params = new URLSearchParams();
 
+      // Handle empty arrays: if no projects selected, fetch all (don't send projects param)
       if (filters.projects && filters.projects.length > 0) {
         params.append('projects', filters.projects.join(','));
       }
@@ -201,6 +210,7 @@ export default function IssuesBreakdownChart() {
         params.append('endDate', filters.endDate);
       }
 
+      // Handle empty arrays: if no issue types selected, fetch all (don't send issueTypes param)
       if (filters.issueTypes && filters.issueTypes.length > 0) {
         // Map display names to API property names
         const apiIssueTypes = filters.issueTypes
@@ -217,6 +227,15 @@ export default function IssuesBreakdownChart() {
       }`;
 
       const response = await httpService.get(url);
+
+      // Ensure response.data is valid
+      if (!response || !response.data) {
+        setError('Invalid response from server');
+        setData([]);
+        setLoading(false);
+        return;
+      }
+
       // Process API response to map to three fixed issue types
       const processedData = processChartData(response.data);
       setData(processedData);
@@ -227,9 +246,22 @@ export default function IssuesBreakdownChart() {
         const errorMessage =
           err.response.data?.error || err.response.data?.message || 'Invalid filter parameters';
         setError(errorMessage);
+      } else if (err.response) {
+        // Handle other HTTP errors
+        const status = err.response.status;
+        const errorMessage =
+          err.response.data?.error ||
+          err.response.data?.message ||
+          `Server error (${status}). Please try again.`;
+        setError(errorMessage);
+      } else if (err.request) {
+        // Handle network errors (no response received)
+        setError('Network error. Please check your connection and try again.');
       } else {
-        setError(err.message || 'Failed to fetch issue statistics');
+        // Handle other errors
+        setError(err.message || 'Failed to fetch issue statistics. Please try again.');
       }
+      setData([]); // Clear data on error
     } finally {
       setLoading(false);
     }
@@ -299,10 +331,6 @@ export default function IssuesBreakdownChart() {
     fetchProjects();
   }, [reduxProjects]);
 
-  if (loading) return <div>Loading...</div>;
-  if (error) return <div>Error: {error}</div>;
-  if (!data || data.length === 0) return <div>No data available</div>;
-
   return (
     <div className={styles.container}>
       <div className={styles.inner}>
@@ -600,32 +628,60 @@ export default function IssuesBreakdownChart() {
         </div>
       </div>
 
+      {/* Error Message */}
+      {error && (
+        <div className={styles.errorMessage} role="alert">
+          <i className="fa fa-exclamation-circle" aria-hidden="true" />
+          <span>{error}</span>
+        </div>
+      )}
+
       <div className={styles.chartContainer}>
-        <ResponsiveContainer>
-          <BarChart data={data} margin={{ top: 30, right: 30, left: 0, bottom: 30 }} barGap={8}>
-            <CartesianGrid strokeDasharray="3 3" stroke={gridColor} />
-            <XAxis dataKey="projectName" tick={{ fill: textColor }} />
-            <YAxis allowDecimals={false} tick={{ fill: textColor }} />
-            <Tooltip
-              contentStyle={{
-                backgroundColor: tooltipBg,
-                border: 'none',
-                borderRadius: '8px',
-                color: textColor,
-              }}
-            />
-            {/* Fixed three bars: Equipment Issues, Labor Issues, Materials Issues */}
-            <Bar dataKey="equipmentIssues" name="Equipment Issues" fill={COLORS.equipmentIssues}>
-              <LabelList dataKey="equipmentIssues" position="top" fill={textColor} />
-            </Bar>
-            <Bar dataKey="laborIssues" name="Labor Issues" fill={COLORS.laborIssues}>
-              <LabelList dataKey="laborIssues" position="top" fill={textColor} />
-            </Bar>
-            <Bar dataKey="materialIssues" name="Materials Issues" fill={COLORS.materialIssues}>
-              <LabelList dataKey="materialIssues" position="top" fill={textColor} />
-            </Bar>
-          </BarChart>
-        </ResponsiveContainer>
+        {loading ? (
+          <div className={styles.loadingContainer}>
+            <Loading align="center" darkMode={darkMode} />
+            <div className={styles.loadingText}>Loading issue statistics...</div>
+          </div>
+        ) : error ? (
+          <div className={styles.errorContainer}>
+            <i className="fa fa-exclamation-triangle" aria-hidden="true" />
+            <div className={styles.errorText}>{error}</div>
+          </div>
+        ) : !data || data.length === 0 ? (
+          <div className={styles.emptyContainer}>
+            <i className="fa fa-chart-bar" aria-hidden="true" />
+            <div className={styles.emptyText}>No data available</div>
+            <div className={styles.emptySubtext}>
+              Try adjusting your filters or check back later.
+            </div>
+          </div>
+        ) : (
+          <ResponsiveContainer>
+            <BarChart data={data} margin={{ top: 30, right: 30, left: 0, bottom: 30 }} barGap={8}>
+              <CartesianGrid strokeDasharray="3 3" stroke={gridColor} />
+              <XAxis dataKey="projectName" tick={{ fill: textColor }} />
+              <YAxis allowDecimals={false} tick={{ fill: textColor }} />
+              <Tooltip
+                contentStyle={{
+                  backgroundColor: tooltipBg,
+                  border: 'none',
+                  borderRadius: '8px',
+                  color: textColor,
+                }}
+              />
+              {/* Fixed three bars: Equipment Issues, Labor Issues, Materials Issues */}
+              <Bar dataKey="equipmentIssues" name="Equipment Issues" fill={COLORS.equipmentIssues}>
+                <LabelList dataKey="equipmentIssues" position="top" fill={textColor} />
+              </Bar>
+              <Bar dataKey="laborIssues" name="Labor Issues" fill={COLORS.laborIssues}>
+                <LabelList dataKey="laborIssues" position="top" fill={textColor} />
+              </Bar>
+              <Bar dataKey="materialIssues" name="Materials Issues" fill={COLORS.materialIssues}>
+                <LabelList dataKey="materialIssues" position="top" fill={textColor} />
+              </Bar>
+            </BarChart>
+          </ResponsiveContainer>
+        )}
       </div>
     </div>
   );

From 6b68be156978b7928b8067a717ccb6e105cd9140 Mon Sep 17 00:00:00 2001
From: Aditya Gambhir <67105262+Aditya-gam@users.noreply.github.com>
Date: Thu, 30 Oct 2025 17:49:17 -0700
Subject: [PATCH 12/19] perf(IssuesBreakdownChart): optimize with memoization
 and request cancellation

Implement comprehensive performance optimizations using React hooks to
prevent unnecessary re-renders, memoize expensive computations, and
properly clean up pending API requests on unmount.

Changes:

1. Import React optimization hooks
   * Added useCallback for memoizing functions
   * Added useMemo for memoizing computed values

2. Add AbortController for request cancellation
   * Added abortControllerRef to track pending requests
   * Cancels previous request before starting new one
   * Cleanup on component unmount
   * Prevents memory leaks from pending requests

3. Memoize processChartData with useCallback
   * Empty dependency array (pure function)
   * Prevents recreation on every render
   * Stable reference for fetchData dependency

4. Memoize date change handlers with useCallback
   * handleStartDateChange: Uses functional setState
   * handleEndDateChange: Uses functional setState
   * Empty dependency arrays (no external dependencies)
   * Prevents unnecessary child component re-renders

5. Memoize handleResetFilters with useCallback
   * Empty dependency array
   * Stable function reference
   * Prevents re-renders when passed as prop

6. Memoize fetchData with useCallback
   * Dependency: [processChartData]
   * Integrates AbortController for cancellation
   * Cancels pending request before new request
   * Creates new AbortController per request
   * Passes signal to httpService.get
   * Checks if aborted before state updates
   * Skips error setting if request aborted
   * Handles AbortError gracefully
   * Only updates loading state if not aborted

7. Add cleanup useEffect for unmount
   * Cancels pending API request (abortControllerRef)
   * Clears pending debounce timeout (debounceTimeoutRef)
   * Prevents memory leaks
   * Empty dependency array (runs once on unmount)

8. Update debounced fetch useEffect
   * Added fetchData to dependency array
   * Properly responds to memoized function changes

9. Memoize react-select options with useMemo
   * projectOptions: Depends on [availableProjects]
   * selectedProjectValues: Depends on [availableProjects, selectedProjects]
   * issueTypeOptions: Empty deps (FIXED_ISSUE_TYPES is constant)
   * selectedIssueTypeValues: Depends on [selectedIssueTypes]
   * Prevents expensive array mapping on every render

10. Create memoized onChange handlers
    * handleProjectChange: useCallback with empty deps
    * handleIssueTypeChange: useCallback with empty deps
    * Stable function references
    * Prevents react-select from detecting changes

11. Update Select components
    * Use memoized projectOptions instead of inline mapping
    * Use memoized selectedProjectValues instead of inline filtering
    * Use memoized handleProjectChange instead of inline function
    * Use memoized issueTypeOptions instead of inline mapping
    * Use memoized selectedIssueTypeValues instead of inline mapping
    * Use memoized handleIssueTypeChange instead of inline function

12. Enhanced COLORS constant documentation
    * Added JSDoc comment explaining fixed nature
    * Clarifies colors work in both light/dark modes
    * Prevents accidental modification

Implementation Details:

- AbortController pattern:
  * Store controller in ref
  * Abort previous before creating new
  * Pass signal to fetch request
  * Check aborted state before updates
  * Handle AbortError in catch block

- Functional setState pattern:
  * Used in date handlers to avoid dependency arrays
  * Prevents stale closure issues
  * Cleaner dependency management

- useMemo optimization:
  * Only recomputes when dependencies change
  * Prevents expensive .map() operations
  * Reduces garbage collection pressure

- useCallback optimization:
  * Prevents function recreation
  * Maintains referential equality
  * Reduces child component re-renders

Performance Benefits:

- Prevents unnecessary re-renders of react-select components
- Reduces expensive array mapping operations
- Eliminates stale API requests on rapid filter changes
- Prevents memory leaks from unmounted components
- Improves responsiveness during filter interactions
- Reduces garbage collection overhead
- Optimizes React reconciliation process

Memory Management:

- Properly cancels pending requests on unmount
- Clears debounce timers on cleanup
- No memory leaks from pending operations
- Efficient reference management with refs

Testing Considerations:

- Rapid filter changes should cancel previous requests
- Component unmount should cancel pending requests
- No console errors from aborted requests
- Smooth UI interaction without jank
- Stable behavior across multiple filter changes
---
 .../IssuesBreakdownChart.jsx                  | 320 +++++++++++-------
 1 file changed, 199 insertions(+), 121 deletions(-)

diff --git a/src/components/BMDashboard/WeeklyProjectSummary/IssuesBreakdownChart.jsx b/src/components/BMDashboard/WeeklyProjectSummary/IssuesBreakdownChart.jsx
index 2fda3e5455..c6e66efdff 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/IssuesBreakdownChart.jsx
+++ b/src/components/BMDashboard/WeeklyProjectSummary/IssuesBreakdownChart.jsx
@@ -1,4 +1,4 @@
-import { useEffect, useState, useRef } from 'react';
+import { useEffect, useState, useRef, useCallback, useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import {
   BarChart,
@@ -15,10 +15,15 @@ import Loading from '../../common/Loading/Loading';
 import httpService from '../../../services/httpService';
 import styles from './IssueBreakdownChart.module.css';
 
+/**
+ * Fixed color constants for the three issue types.
+ * These colors are fixed and must not be changed or generated dynamically.
+ * Colors work in both light and dark modes.
+ */
 const COLORS = {
-  equipmentIssues: '#4F81BD', // blue
-  laborIssues: '#C0504D', // red
-  materialIssues: '#F3C13A', // yellow
+  equipmentIssues: '#4F81BD', // blue - Equipment Issues (always)
+  laborIssues: '#C0504D', // red - Labor Issues (always)
+  materialIssues: '#F3C13A', // yellow - Materials Issues (always)
 };
 
 // Fixed issue types for filter (display names)
@@ -52,6 +57,8 @@ export default function IssuesBreakdownChart() {
 
   // Ref for debouncing timeout
   const debounceTimeoutRef = useRef(null);
+  // Ref for abort controller to cancel API calls on unmount
+  const abortControllerRef = useRef(null);
 
   const rootStyles = getComputedStyle(document.body);
   const textColor = rootStyles.getPropertyValue('--text-color') || '#666';
@@ -62,7 +69,7 @@ export default function IssuesBreakdownChart() {
    * Process API response data to map to three fixed issue types
    * Ensures each project has equipmentIssues, laborIssues, and materialIssues properties
    */
-  const processChartData = apiData => {
+  const processChartData = useCallback(apiData => {
     if (!apiData || !Array.isArray(apiData)) {
       return [];
     }
@@ -149,123 +156,154 @@ export default function IssuesBreakdownChart() {
 
       return processedProject;
     });
-  };
+  }, []);
 
-  const handleStartDateChange = e => {
+  const handleStartDateChange = useCallback(e => {
     const newStartDate = e.target.value;
     setStartDate(newStartDate);
 
     // Validate: endDate must be >= startDate
-    if (endDate && newStartDate && endDate < newStartDate) {
-      // If endDate is before new startDate, adjust endDate to startDate
-      setEndDate(newStartDate);
-    }
-  };
+    setEndDate(prevEndDate => {
+      if (prevEndDate && newStartDate && prevEndDate < newStartDate) {
+        // If endDate is before new startDate, adjust endDate to startDate
+        return newStartDate;
+      }
+      return prevEndDate;
+    });
+  }, []);
 
-  const handleEndDateChange = e => {
+  const handleEndDateChange = useCallback(e => {
     const newEndDate = e.target.value;
     setEndDate(newEndDate);
 
     // Validate: endDate must be >= startDate
-    if (startDate && newEndDate && newEndDate < startDate) {
-      // If new endDate is before startDate, adjust startDate to endDate
-      setStartDate(newEndDate);
-    }
-  };
+    setStartDate(prevStartDate => {
+      if (prevStartDate && newEndDate && newEndDate < prevStartDate) {
+        // If new endDate is before startDate, adjust startDate to endDate
+        return newEndDate;
+      }
+      return prevStartDate;
+    });
+  }, []);
 
-  const handleResetFilters = () => {
+  const handleResetFilters = useCallback(() => {
     // Clear all filters
     setSelectedProjects([]);
     setStartDate(null);
     setEndDate(null);
     setSelectedIssueTypes([]);
     // Data refetch will be triggered automatically by useEffect when state changes
-  };
-
-  const fetchData = async filters => {
-    try {
-      setLoading(true);
-      setError(null);
+  }, []);
 
-      // Validate date range
-      if (filters.startDate && filters.endDate && filters.startDate > filters.endDate) {
-        setError('Start date must be before or equal to end date');
-        setLoading(false);
-        return;
+  const fetchData = useCallback(
+    async filters => {
+      // Cancel any pending request
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
       }
 
-      // Build query string with URLSearchParams
-      const params = new URLSearchParams();
+      // Create new AbortController for this request
+      const abortController = new AbortController();
+      abortControllerRef.current = abortController;
 
-      // Handle empty arrays: if no projects selected, fetch all (don't send projects param)
-      if (filters.projects && filters.projects.length > 0) {
-        params.append('projects', filters.projects.join(','));
-      }
+      try {
+        setLoading(true);
+        setError(null);
 
-      if (filters.startDate) {
-        params.append('startDate', filters.startDate);
-      }
+        // Validate date range
+        if (filters.startDate && filters.endDate && filters.startDate > filters.endDate) {
+          setError('Start date must be before or equal to end date');
+          setLoading(false);
+          return;
+        }
 
-      if (filters.endDate) {
-        params.append('endDate', filters.endDate);
-      }
+        // Build query string with URLSearchParams
+        const params = new URLSearchParams();
 
-      // Handle empty arrays: if no issue types selected, fetch all (don't send issueTypes param)
-      if (filters.issueTypes && filters.issueTypes.length > 0) {
-        // Map display names to API property names
-        const apiIssueTypes = filters.issueTypes
-          .map(displayName => ISSUE_TYPE_MAPPING[displayName] || displayName)
-          .filter(Boolean); // Remove any undefined values
-        if (apiIssueTypes.length > 0) {
-          params.append('issueTypes', apiIssueTypes.join(','));
+        // Handle empty arrays: if no projects selected, fetch all (don't send projects param)
+        if (filters.projects && filters.projects.length > 0) {
+          params.append('projects', filters.projects.join(','));
         }
-      }
 
-      const queryString = params.toString();
-      const url = `${process.env.REACT_APP_APIENDPOINT}/issues/breakdown${
-        queryString ? `?${queryString}` : ''
-      }`;
+        if (filters.startDate) {
+          params.append('startDate', filters.startDate);
+        }
 
-      const response = await httpService.get(url);
+        if (filters.endDate) {
+          params.append('endDate', filters.endDate);
+        }
 
-      // Ensure response.data is valid
-      if (!response || !response.data) {
-        setError('Invalid response from server');
-        setData([]);
-        setLoading(false);
-        return;
-      }
+        // Handle empty arrays: if no issue types selected, fetch all (don't send issueTypes param)
+        if (filters.issueTypes && filters.issueTypes.length > 0) {
+          // Map display names to API property names
+          const apiIssueTypes = filters.issueTypes
+            .map(displayName => ISSUE_TYPE_MAPPING[displayName] || displayName)
+            .filter(Boolean); // Remove any undefined values
+          if (apiIssueTypes.length > 0) {
+            params.append('issueTypes', apiIssueTypes.join(','));
+          }
+        }
+
+        const queryString = params.toString();
+        const url = `${process.env.REACT_APP_APIENDPOINT}/issues/breakdown${
+          queryString ? `?${queryString}` : ''
+        }`;
+
+        const response = await httpService.get(url, { signal: abortController.signal });
+
+        // Check if request was aborted
+        if (abortController.signal.aborted) {
+          return;
+        }
+
+        // Ensure response.data is valid
+        if (!response || !response.data) {
+          setError('Invalid response from server');
+          setData([]);
+          setLoading(false);
+          return;
+        }
 
-      // Process API response to map to three fixed issue types
-      const processedData = processChartData(response.data);
-      setData(processedData);
-      setError(null);
-    } catch (err) {
-      // Handle 400 errors (validation errors) with user-friendly messages
-      if (err.response && err.response.status === 400) {
-        const errorMessage =
-          err.response.data?.error || err.response.data?.message || 'Invalid filter parameters';
-        setError(errorMessage);
-      } else if (err.response) {
-        // Handle other HTTP errors
-        const status = err.response.status;
-        const errorMessage =
-          err.response.data?.error ||
-          err.response.data?.message ||
-          `Server error (${status}). Please try again.`;
-        setError(errorMessage);
-      } else if (err.request) {
-        // Handle network errors (no response received)
-        setError('Network error. Please check your connection and try again.');
-      } else {
-        // Handle other errors
-        setError(err.message || 'Failed to fetch issue statistics. Please try again.');
+        // Process API response to map to three fixed issue types
+        const processedData = processChartData(response.data);
+        setData(processedData);
+        setError(null);
+      } catch (err) {
+        // Don't set error if request was aborted
+        if (abortController.signal.aborted || err.name === 'AbortError') {
+          return;
+        }
+
+        // Handle 400 errors (validation errors) with user-friendly messages
+        if (err.response && err.response.status === 400) {
+          const errorMessage =
+            err.response.data?.error || err.response.data?.message || 'Invalid filter parameters';
+          setError(errorMessage);
+        } else if (err.response) {
+          // Handle other HTTP errors
+          const status = err.response.status;
+          const errorMessage =
+            err.response.data?.error ||
+            err.response.data?.message ||
+            `Server error (${status}). Please try again.`;
+          setError(errorMessage);
+        } else if (err.request) {
+          // Handle network errors (no response received)
+          setError('Network error. Please check your connection and try again.');
+        } else {
+          // Handle other errors
+          setError(err.message || 'Failed to fetch issue statistics. Please try again.');
+        }
+        setData([]); // Clear data on error
+      } finally {
+        // Only update loading state if request wasn't aborted
+        if (!abortController.signal.aborted) {
+          setLoading(false);
+        }
       }
-      setData([]); // Clear data on error
-    } finally {
-      setLoading(false);
-    }
-  };
+    },
+    [processChartData],
+  );
 
   useEffect(() => {
     // Clear any existing timeout
@@ -290,7 +328,21 @@ export default function IssuesBreakdownChart() {
         clearTimeout(debounceTimeoutRef.current);
       }
     };
-  }, [selectedProjects, startDate, endDate, selectedIssueTypes]);
+  }, [selectedProjects, startDate, endDate, selectedIssueTypes, fetchData]);
+
+  // Cleanup API calls on unmount
+  useEffect(() => {
+    return () => {
+      // Cancel any pending API request
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+      }
+      // Clear any pending timeout
+      if (debounceTimeoutRef.current) {
+        clearTimeout(debounceTimeoutRef.current);
+      }
+    };
+  }, []);
 
   useEffect(() => {
     const fetchIssueTypes = async () => {
@@ -331,6 +383,54 @@ export default function IssuesBreakdownChart() {
     fetchProjects();
   }, [reduxProjects]);
 
+  // Memoize react-select options to prevent unnecessary re-renders
+  const projectOptions = useMemo(
+    () =>
+      availableProjects.map(project => ({
+        value: project._id || project.projectId,
+        label: project.name || project.projectName || project._id || project.projectId,
+      })),
+    [availableProjects],
+  );
+
+  const selectedProjectValues = useMemo(
+    () =>
+      availableProjects
+        .filter(project => selectedProjects.includes(project._id || project.projectId))
+        .map(project => ({
+          value: project._id || project.projectId,
+          label: project.name || project.projectName || project._id || project.projectId,
+        })),
+    [availableProjects, selectedProjects],
+  );
+
+  const issueTypeOptions = useMemo(
+    () =>
+      FIXED_ISSUE_TYPES.map(type => ({
+        value: type,
+        label: type,
+      })),
+    [],
+  );
+
+  const selectedIssueTypeValues = useMemo(
+    () =>
+      selectedIssueTypes.map(type => ({
+        value: type,
+        label: type,
+      })),
+    [selectedIssueTypes],
+  );
+
+  // Memoize handlers for react-select onChange
+  const handleProjectChange = useCallback(selectedOptions => {
+    setSelectedProjects(selectedOptions ? selectedOptions.map(option => option.value) : []);
+  }, []);
+
+  const handleIssueTypeChange = useCallback(selectedOptions => {
+    setSelectedIssueTypes(selectedOptions ? selectedOptions.map(option => option.value) : []);
+  }, []);
+
   return (
     <div className={styles.container}>
       <div className={styles.inner}>
@@ -366,21 +466,9 @@ export default function IssuesBreakdownChart() {
               id="project-filter"
               isMulti
               classNamePrefix="customSelect"
-              options={availableProjects.map(project => ({
-                value: project._id || project.projectId,
-                label: project.name || project.projectName || project._id || project.projectId,
-              }))}
-              value={availableProjects
-                .filter(project => selectedProjects.includes(project._id || project.projectId))
-                .map(project => ({
-                  value: project._id || project.projectId,
-                  label: project.name || project.projectName || project._id || project.projectId,
-                }))}
-              onChange={selectedOptions =>
-                setSelectedProjects(
-                  selectedOptions ? selectedOptions.map(option => option.value) : [],
-                )
-              }
+              options={projectOptions}
+              value={selectedProjectValues}
+              onChange={handleProjectChange}
               placeholder="Select Projects"
               isClearable
               isDisabled={availableProjects.length === 0}
@@ -507,19 +595,9 @@ export default function IssuesBreakdownChart() {
               id="issue-type-filter"
               isMulti
               classNamePrefix="customSelect"
-              options={FIXED_ISSUE_TYPES.map(type => ({
-                value: type,
-                label: type,
-              }))}
-              value={selectedIssueTypes.map(type => ({
-                value: type,
-                label: type,
-              }))}
-              onChange={selectedOptions =>
-                setSelectedIssueTypes(
-                  selectedOptions ? selectedOptions.map(option => option.value) : [],
-                )
-              }
+              options={issueTypeOptions}
+              value={selectedIssueTypeValues}
+              onChange={handleIssueTypeChange}
               placeholder="Select Issue Types"
               isClearable
               styles={

From fd10e8efad4da59efa12b5037af673ab86937304 Mon Sep 17 00:00:00 2001
From: Aditya Gambhir <67105262+Aditya-gam@users.noreply.github.com>
Date: Thu, 30 Oct 2025 20:24:20 -0700
Subject: [PATCH 13/19] fix(IssuesBreakdownChart): correct issue type filter
 behavior and API response mapping

- Fixed API response mapping to use correct property names with spaces
  ('Equipment Issues', 'Labor Issues', 'Materials Issues')
- Changed issue type filter to work client-side by conditionally rendering bars
  instead of sending filter parameters to API
- Removed unnecessary API call to fetch available issue types
- Simplified processChartData function to directly map API response properties
- Issue type filter now shows/hides specific bars while keeping all projects visible
- Removed unused availableIssueTypes state variable

The filter now correctly displays only selected issue type bars for all projects,
matching the intended behavior where the backend pre-aggregates all issue types
into three fixed categories.
---
 .../IssuesBreakdownChart.jsx                  | 151 ++++--------------
 1 file changed, 34 insertions(+), 117 deletions(-)

diff --git a/src/components/BMDashboard/WeeklyProjectSummary/IssuesBreakdownChart.jsx b/src/components/BMDashboard/WeeklyProjectSummary/IssuesBreakdownChart.jsx
index c6e66efdff..b6a30a7741 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/IssuesBreakdownChart.jsx
+++ b/src/components/BMDashboard/WeeklyProjectSummary/IssuesBreakdownChart.jsx
@@ -27,9 +27,10 @@ const COLORS = {
 };
 
 // Fixed issue types for filter (display names)
+// These match the API response property names exactly
 const FIXED_ISSUE_TYPES = ['Equipment Issues', 'Labor Issues', 'Materials Issues'];
 
-// Map display names to API property names
+// Map display names to chart data keys
 const ISSUE_TYPE_MAPPING = {
   'Equipment Issues': 'equipmentIssues',
   'Labor Issues': 'laborIssues',
@@ -52,7 +53,6 @@ export default function IssuesBreakdownChart() {
   const [selectedIssueTypes, setSelectedIssueTypes] = useState([]);
 
   // Available options states
-  const [availableIssueTypes, setAvailableIssueTypes] = useState([]);
   const [availableProjects, setAvailableProjects] = useState([]);
 
   // Ref for debouncing timeout
@@ -67,7 +67,8 @@ export default function IssuesBreakdownChart() {
 
   /**
    * Process API response data to map to three fixed issue types
-   * Ensures each project has equipmentIssues, laborIssues, and materialIssues properties
+   * API returns data with property names: "Equipment Issues", "Labor Issues", "Materials Issues"
+   * We map these to camelCase for use in the chart
    */
   const processChartData = useCallback(apiData => {
     if (!apiData || !Array.isArray(apiData)) {
@@ -75,86 +76,13 @@ export default function IssuesBreakdownChart() {
     }
 
     return apiData.map(project => {
-      // Extract projectId and projectName
-      const processedProject = {
+      return {
         projectId: project.projectId || project._id || '',
         projectName: project.projectName || project.name || '',
-        equipmentIssues: 0,
-        laborIssues: 0,
-        materialIssues: 0,
+        equipmentIssues: Number(project['Equipment Issues']) || 0,
+        laborIssues: Number(project['Labor Issues']) || 0,
+        materialIssues: Number(project['Materials Issues']) || 0,
       };
-
-      // Track which properties we've already matched exactly
-      const matchedKeys = new Set();
-
-      // Check if API returns properties matching the fixed types directly
-      if (project.equipmentIssues !== undefined) {
-        processedProject.equipmentIssues = Number(project.equipmentIssues) || 0;
-        matchedKeys.add('equipmentIssues');
-      }
-      if (project.laborIssues !== undefined) {
-        processedProject.laborIssues = Number(project.laborIssues) || 0;
-        matchedKeys.add('laborIssues');
-      }
-      if (project.materialIssues !== undefined) {
-        processedProject.materialIssues = Number(project.materialIssues) || 0;
-        matchedKeys.add('materialIssues');
-      }
-      if (project.materialsIssues !== undefined) {
-        processedProject.materialIssues = Number(project.materialsIssues) || 0;
-        matchedKeys.add('materialsIssues');
-      }
-
-      // Map remaining properties that don't match exactly
-      // This handles cases where API returns different property names
-      Object.keys(project).forEach(key => {
-        // Skip project metadata and already matched keys
-        if (
-          key === 'projectId' ||
-          key === 'projectName' ||
-          key === '_id' ||
-          key === 'name' ||
-          matchedKeys.has(key)
-        ) {
-          return;
-        }
-
-        const value = Number(project[key]) || 0;
-        if (value === 0) return; // Skip zero values
-
-        const lowerKey = key.toLowerCase();
-
-        // Map to equipmentIssues if not already set or if pattern matches
-        if (
-          !matchedKeys.has('equipmentIssues') &&
-          (lowerKey.includes('equipment') ||
-            lowerKey.includes('tool') ||
-            lowerKey.includes('machine'))
-        ) {
-          processedProject.equipmentIssues += value;
-        }
-        // Map to laborIssues if not already set or if pattern matches
-        else if (
-          !matchedKeys.has('laborIssues') &&
-          (lowerKey.includes('labor') || lowerKey.includes('labour') || lowerKey === 'labor')
-        ) {
-          processedProject.laborIssues += value;
-        }
-        // Map to materialIssues if not already set or if pattern matches
-        else if (
-          !matchedKeys.has('materialIssues') &&
-          (lowerKey.includes('material') ||
-            lowerKey.includes('supply') ||
-            lowerKey.includes('resource'))
-        ) {
-          processedProject.materialIssues += value;
-        }
-        // For other types (Safety, Weather, METs quality / functionality, etc.):
-        // If all three fixed types are already set from exact matches, ignore
-        // Otherwise, we could aggregate into "Other" but for now we maintain the three fixed structure
-      });
-
-      return processedProject;
     });
   }, []);
 
@@ -233,16 +161,8 @@ export default function IssuesBreakdownChart() {
           params.append('endDate', filters.endDate);
         }
 
-        // Handle empty arrays: if no issue types selected, fetch all (don't send issueTypes param)
-        if (filters.issueTypes && filters.issueTypes.length > 0) {
-          // Map display names to API property names
-          const apiIssueTypes = filters.issueTypes
-            .map(displayName => ISSUE_TYPE_MAPPING[displayName] || displayName)
-            .filter(Boolean); // Remove any undefined values
-          if (apiIssueTypes.length > 0) {
-            params.append('issueTypes', apiIssueTypes.join(','));
-          }
-        }
+        // Note: issueTypes filter is applied client-side by controlling which bars are displayed
+        // We don't send issueTypes to the API
 
         const queryString = params.toString();
         const url = `${process.env.REACT_APP_APIENDPOINT}/issues/breakdown${
@@ -312,12 +232,12 @@ export default function IssuesBreakdownChart() {
     }
 
     // Debounce API calls to prevent excessive requests
+    // Note: selectedIssueTypes is NOT included here because it's a client-side filter
     debounceTimeoutRef.current = setTimeout(() => {
       const filters = {
         projects: selectedProjects,
         startDate,
         endDate,
-        issueTypes: selectedIssueTypes,
       };
       fetchData(filters);
     }, 300);
@@ -328,7 +248,7 @@ export default function IssuesBreakdownChart() {
         clearTimeout(debounceTimeoutRef.current);
       }
     };
-  }, [selectedProjects, startDate, endDate, selectedIssueTypes, fetchData]);
+  }, [selectedProjects, startDate, endDate, fetchData]);
 
   // Cleanup API calls on unmount
   useEffect(() => {
@@ -344,22 +264,6 @@ export default function IssuesBreakdownChart() {
     };
   }, []);
 
-  useEffect(() => {
-    const fetchIssueTypes = async () => {
-      try {
-        const response = await httpService.get(`${process.env.REACT_APP_APIENDPOINT}/issues/types`);
-        if (response.data && response.data.issueTypes) {
-          setAvailableIssueTypes(response.data.issueTypes);
-        }
-      } catch (err) {
-        // Chart can work without issue types filter - set to empty array
-        setAvailableIssueTypes([]);
-      }
-    };
-
-    fetchIssueTypes();
-  }, []);
-
   useEffect(() => {
     const fetchProjects = async () => {
       // Use Redux store if available
@@ -748,15 +652,28 @@ export default function IssuesBreakdownChart() {
                 }}
               />
               {/* Fixed three bars: Equipment Issues, Labor Issues, Materials Issues */}
-              <Bar dataKey="equipmentIssues" name="Equipment Issues" fill={COLORS.equipmentIssues}>
-                <LabelList dataKey="equipmentIssues" position="top" fill={textColor} />
-              </Bar>
-              <Bar dataKey="laborIssues" name="Labor Issues" fill={COLORS.laborIssues}>
-                <LabelList dataKey="laborIssues" position="top" fill={textColor} />
-              </Bar>
-              <Bar dataKey="materialIssues" name="Materials Issues" fill={COLORS.materialIssues}>
-                <LabelList dataKey="materialIssues" position="top" fill={textColor} />
-              </Bar>
+              {/* Only show bars for selected issue types (or all if none selected) */}
+              {(selectedIssueTypes.length === 0 ||
+                selectedIssueTypes.includes('Equipment Issues')) && (
+                <Bar
+                  dataKey="equipmentIssues"
+                  name="Equipment Issues"
+                  fill={COLORS.equipmentIssues}
+                >
+                  <LabelList dataKey="equipmentIssues" position="top" fill={textColor} />
+                </Bar>
+              )}
+              {(selectedIssueTypes.length === 0 || selectedIssueTypes.includes('Labor Issues')) && (
+                <Bar dataKey="laborIssues" name="Labor Issues" fill={COLORS.laborIssues}>
+                  <LabelList dataKey="laborIssues" position="top" fill={textColor} />
+                </Bar>
+              )}
+              {(selectedIssueTypes.length === 0 ||
+                selectedIssueTypes.includes('Materials Issues')) && (
+                <Bar dataKey="materialIssues" name="Materials Issues" fill={COLORS.materialIssues}>
+                  <LabelList dataKey="materialIssues" position="top" fill={textColor} />
+                </Bar>
+              )}
             </BarChart>
           </ResponsiveContainer>
         )}

From 0d712959c775e9ed7caf8713c92ef37e3c20564d Mon Sep 17 00:00:00 2001
From: Aditya Gambhir <67105262+Aditya-gam@users.noreply.github.com>
Date: Thu, 30 Oct 2025 20:32:54 -0700
Subject: [PATCH 14/19] style(IssuesBreakdownChart): improve dark mode contrast
 for date range filters

- Fixed date picker inputs to use proper dark mode colors (#2c3344 background, #e0e0e0 text)
- Applied :global(.dark-mode) selectors in CSS Modules for proper scoping
- Enhanced calendar icon visibility with invert(1) brightness(1.5) filter
- Increased icon opacity to 1 and added brighter hover state (brightness 1.8)
- Improved date separator 'to' text contrast with #e0e0e0 color
- Added dark-mode class to component container for CSS selector matching
- Applied !important flags to ensure dark mode styles override defaults
- Set color-scheme: dark to help browser adapt native controls
---
 .../IssueBreakdownChart.module.css            | 63 +++++++++++++++++++
 .../IssuesBreakdownChart.jsx                  |  2 +-
 2 files changed, 64 insertions(+), 1 deletion(-)

diff --git a/src/components/BMDashboard/WeeklyProjectSummary/IssueBreakdownChart.module.css b/src/components/BMDashboard/WeeklyProjectSummary/IssueBreakdownChart.module.css
index dc459c1dcc..cd3a8bbad8 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/IssueBreakdownChart.module.css
+++ b/src/components/BMDashboard/WeeklyProjectSummary/IssueBreakdownChart.module.css
@@ -100,24 +100,87 @@
   color: var(--text-color, #333);
   min-height: 38px;
   transition: border-color 0.2s ease, box-shadow 0.2s ease;
+  /* Ensure browser adapts native controls to dark mode */
+  color-scheme: light dark;
+}
+
+/* Dark mode specific styling for better visibility */
+:global(.dark-mode) .datePicker {
+  background-color: #2c3344 !important;
+  border-color: #364156 !important;
+  color: #e0e0e0 !important;
+  color-scheme: dark;
+}
+
+/* Ensure placeholder text is visible in dark mode */
+.datePicker::-webkit-calendar-picker-indicator {
+  cursor: pointer;
+  opacity: 0.7;
+}
+
+:global(.dark-mode) .datePicker::-webkit-calendar-picker-indicator {
+  filter: invert(1) brightness(1.5);
+  opacity: 1;
+  cursor: pointer;
+}
+
+.datePicker::-webkit-calendar-picker-indicator:hover {
+  opacity: 1;
+}
+
+:global(.dark-mode) .datePicker::-webkit-calendar-picker-indicator:hover {
+  filter: invert(1) brightness(1.8);
+}
+
+/* Ensure the date text is visible */
+.datePicker::-webkit-datetime-edit {
+  color: inherit;
+}
+
+.datePicker::-webkit-datetime-edit-fields-wrapper {
+  color: inherit;
+}
+
+.datePicker::-webkit-datetime-edit-text {
+  color: inherit;
+  padding: 0 0.3em;
+}
+
+.datePicker::-webkit-datetime-edit-month-field,
+.datePicker::-webkit-datetime-edit-day-field,
+.datePicker::-webkit-datetime-edit-year-field {
+  color: inherit;
 }
 
 .datePicker:hover {
   border-color: var(--border-color-hover, #bbb);
 }
 
+:global(.dark-mode) .datePicker:hover {
+  border-color: #4a5568 !important;
+}
+
 .datePicker:focus {
   outline: none;
   border-color: var(--primary-color, #0d55b3);
   box-shadow: 0 0 0 2px rgba(13, 85, 179, 0.1);
 }
 
+:global(.dark-mode) .datePicker:focus {
+  border-color: #0d55b3 !important;
+  box-shadow: 0 0 0 2px rgba(13, 85, 179, 0.3) !important;
+}
+
 .dateSeparator {
   color: var(--text-color, #666);
   font-size: 14px;
   white-space: nowrap;
 }
 
+:global(.dark-mode) .dateSeparator {
+  color: #e0e0e0 !important;
+}
+
 .resetButtonContainer {
   display: flex;
   justify-content: flex-end;
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/IssuesBreakdownChart.jsx b/src/components/BMDashboard/WeeklyProjectSummary/IssuesBreakdownChart.jsx
index b6a30a7741..4781fef5ec 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/IssuesBreakdownChart.jsx
+++ b/src/components/BMDashboard/WeeklyProjectSummary/IssuesBreakdownChart.jsx
@@ -336,7 +336,7 @@ export default function IssuesBreakdownChart() {
   }, []);
 
   return (
-    <div className={styles.container}>
+    <div className={`${styles.container} ${darkMode ? 'dark-mode' : ''}`}>
       <div className={styles.inner}>
         <div className={styles.headerRow}>
           <h2 className={styles.heading}>Issues breakdown by Type</h2>

From 943559aa25e4eb72240f0dcfe074c9961a5b312c Mon Sep 17 00:00:00 2001
From: Aditya Gambhir <67105262+Aditya-gam@users.noreply.github.com>
Date: Mon, 3 Nov 2025 18:05:24 -0800
Subject: [PATCH 15/19] fix: Add comprehensive dark mode support to Issues
 Breakdown Chart

- Fix 'no data available' message visibility in dark mode
- Add dark mode styling for chart background (#253342)
- Update grid lines color for dark mode (rgba(255,255,255,0.1))
- Update all text colors (axis labels, tooltips, loading, error states)
- Improve error message visibility with lighter red (#ff6b6b)
- Apply consistent color scheme matching project standards (#1b2a41, #ffffff, #d1d5db)

All dark mode colors now align with the project's established theme.
---
 .../IssueBreakdownChart.module.css            | 38 ++++++++++++++++++-
 .../IssuesBreakdownChart.jsx                  | 20 +++++++---
 2 files changed, 51 insertions(+), 7 deletions(-)

diff --git a/src/components/BMDashboard/WeeklyProjectSummary/IssueBreakdownChart.module.css b/src/components/BMDashboard/WeeklyProjectSummary/IssueBreakdownChart.module.css
index cd3a8bbad8..125fa08d91 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/IssueBreakdownChart.module.css
+++ b/src/components/BMDashboard/WeeklyProjectSummary/IssueBreakdownChart.module.css
@@ -230,6 +230,12 @@
   width: 100%;
 }
 
+:global(.dark-mode) .errorMessage {
+  background: rgba(244, 67, 54, 0.15);
+  border: 1px solid rgba(244, 67, 54, 0.4);
+  color: #ff6b6b;
+}
+
 .errorMessage i {
   font-size: 16px;
 }
@@ -238,13 +244,17 @@
   width: 100%;
   height: 500px;
   margin-top: 20px;
-  background: var(--section-bg, transparent);
+  background: var(--section-bg, #ffffff);
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
+:global(.dark-mode) .chartContainer {
+  background: #253342;
+}
+
 .loadingContainer {
   display: flex;
   flex-direction: column;
@@ -262,6 +272,10 @@
   font-weight: 500;
 }
 
+:global(.dark-mode) .loadingText {
+  color: #d1d5db;
+}
+
 .errorContainer {
   display: flex;
   flex-direction: column;
@@ -280,12 +294,21 @@
   opacity: 0.7;
 }
 
+:global(.dark-mode) .errorContainer i {
+  color: #ff6b6b;
+  opacity: 0.8;
+}
+
 .errorText {
   color: var(--text-color, #333);
   font-size: 16px;
   font-weight: 500;
 }
 
+:global(.dark-mode) .errorText {
+  color: #ffffff;
+}
+
 .emptyContainer {
   display: flex;
   flex-direction: column;
@@ -304,18 +327,31 @@
   opacity: 0.5;
 }
 
+:global(.dark-mode) .emptyContainer i {
+  color: #d1d5db;
+  opacity: 0.7;
+}
+
 .emptyText {
   color: var(--text-color, #666);
   font-size: 18px;
   font-weight: 500;
 }
 
+:global(.dark-mode) .emptyText {
+  color: #ffffff;
+}
+
 .emptySubtext {
   color: var(--text-color, #999);
   font-size: 14px;
   margin-top: 4px;
 }
 
+:global(.dark-mode) .emptySubtext {
+  color: #d1d5db;
+}
+
 /* ===================== RESPONSIVE DESIGN ===================== */
 
 /* Tablet and smaller screens */
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/IssuesBreakdownChart.jsx b/src/components/BMDashboard/WeeklyProjectSummary/IssuesBreakdownChart.jsx
index 4781fef5ec..bc0c97b8b9 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/IssuesBreakdownChart.jsx
+++ b/src/components/BMDashboard/WeeklyProjectSummary/IssuesBreakdownChart.jsx
@@ -60,10 +60,12 @@ export default function IssuesBreakdownChart() {
   // Ref for abort controller to cancel API calls on unmount
   const abortControllerRef = useRef(null);
 
-  const rootStyles = getComputedStyle(document.body);
-  const textColor = rootStyles.getPropertyValue('--text-color') || '#666';
-  const gridColor = rootStyles.getPropertyValue('--grid-color') || (darkMode ? '#444' : '#ccc');
-  const tooltipBg = rootStyles.getPropertyValue('--section-bg') || '#fff';
+  // Dark mode colors for chart elements
+  const textColor = darkMode ? '#ffffff' : '#666';
+  const gridColor = darkMode ? 'rgba(255, 255, 255, 0.1)' : '#e0e0e0';
+  const tooltipBg = darkMode ? '#1b2a41' : '#ffffff';
+  const tooltipTextColor = darkMode ? '#ffffff' : '#333';
+  const tooltipBorderColor = darkMode ? 'rgba(255, 255, 255, 0.2)' : '#ddd';
 
   /**
    * Process API response data to map to three fixed issue types
@@ -646,9 +648,15 @@ export default function IssuesBreakdownChart() {
               <Tooltip
                 contentStyle={{
                   backgroundColor: tooltipBg,
-                  border: 'none',
+                  border: `1px solid ${tooltipBorderColor}`,
                   borderRadius: '8px',
-                  color: textColor,
+                  color: tooltipTextColor,
+                }}
+                labelStyle={{
+                  color: tooltipTextColor,
+                }}
+                itemStyle={{
+                  color: tooltipTextColor,
                 }}
               />
               {/* Fixed three bars: Equipment Issues, Labor Issues, Materials Issues */}

From 2d64a163597172fb8369ac326c4382ea04b933a3 Mon Sep 17 00:00:00 2001
From: Aditya Gambhir <67105262+Aditya-gam@users.noreply.github.com>
Date: Mon, 3 Nov 2025 18:12:54 -0800
Subject: [PATCH 16/19] feat: Update Issues Breakdown Chart to fetch only
 projects with issues

- Change endpoint from /projects to /bm/projectsNames?withIssuesOnly=true
- Ensures project filter dropdown only shows projects with actual issue data
- Improves UX by preventing selection of projects without issues
- All selected projects will now have corresponding data in the chart
---
 .../WeeklyProjectSummary/IssuesBreakdownChart.jsx           | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/BMDashboard/WeeklyProjectSummary/IssuesBreakdownChart.jsx b/src/components/BMDashboard/WeeklyProjectSummary/IssuesBreakdownChart.jsx
index bc0c97b8b9..82b4dd750a 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/IssuesBreakdownChart.jsx
+++ b/src/components/BMDashboard/WeeklyProjectSummary/IssuesBreakdownChart.jsx
@@ -274,9 +274,11 @@ export default function IssuesBreakdownChart() {
         return;
       }
 
-      // Fetch from API if not in Redux
+      // Fetch from API if not in Redux - only fetch projects with issues
       try {
-        const response = await httpService.get(`${process.env.REACT_APP_APIENDPOINT}/projects`);
+        const response = await httpService.get(
+          `${process.env.REACT_APP_APIENDPOINT}/bm/projectsNames?withIssuesOnly=true`,
+        );
         if (response.data && Array.isArray(response.data)) {
           setAvailableProjects(response.data);
         }

From b8ac54a8117724fedaafab0c1d82c52e431cb04e Mon Sep 17 00:00:00 2001
From: Aditya Gambhir <67105262+Aditya-gam@users.noreply.github.com>
Date: Mon, 3 Nov 2025 18:44:59 -0800
Subject: [PATCH 17/19] fix: Improve responsive design for Issues Breakdown
 Chart filters

- Add flex-basis (300px) to prevent filter overlap at all screen sizes
- Add new breakpoint at 1280px to handle medium screens smoothly
- Add breakpoint at 900px for small tablets
- Fix overlap issue at ~1155px width where issue type filter overlapped date range
- Ensure consistent wrapping behavior across all screen sizes
- Adjust flex properties for better responsive behavior

The filters now properly wrap to new lines before overlapping, ensuring
a consistent and responsive layout from 1280px down to mobile sizes.
---
 .../IssueBreakdownChart.module.css            | 23 +++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/components/BMDashboard/WeeklyProjectSummary/IssueBreakdownChart.module.css b/src/components/BMDashboard/WeeklyProjectSummary/IssueBreakdownChart.module.css
index 125fa08d91..d3c8ab17a3 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/IssueBreakdownChart.module.css
+++ b/src/components/BMDashboard/WeeklyProjectSummary/IssueBreakdownChart.module.css
@@ -74,7 +74,8 @@
   display: flex;
   flex-direction: column;
   min-width: 250px;
-  flex: 1;
+  flex: 1 1 300px;
+  max-width: 100%;
 }
 
 .filterLabel {
@@ -354,7 +355,15 @@
 
 /* ===================== RESPONSIVE DESIGN ===================== */
 
-/* Tablet and smaller screens */
+/* Large tablets and medium screens - prevent filter overlap */
+@media (max-width: 1280px) {
+  .filterGroup {
+    min-width: 220px;
+    flex: 1 1 280px;
+  }
+}
+
+/* Tablet screens - tighter spacing */
 @media (max-width: 1024px) {
   .filtersRow {
     gap: 16px;
@@ -362,6 +371,15 @@
 
   .filterGroup {
     min-width: 200px;
+    flex: 1 1 250px;
+  }
+}
+
+/* Small tablets - prevent overlap by wrapping earlier */
+@media (max-width: 900px) {
+  .filterGroup {
+    min-width: 180px;
+    flex: 1 1 220px;
   }
 }
 
@@ -385,6 +403,7 @@
   .filterGroup {
     min-width: 100%;
     width: 100%;
+    flex: 1 1 100%;
   }
 
   .datePickerGroup {

From 65e128ff8b51eb39111e994a8b38a351df97edb4 Mon Sep 17 00:00:00 2001
From: Aditya Gambhir <67105262+Aditya-gam@users.noreply.github.com>
Date: Mon, 3 Nov 2025 19:03:03 -0800
Subject: [PATCH 18/19] fix: Prevent filter clipping on small screens in Issues
 Breakdown Chart

Root cause: overflow-x: hidden was clipping Date Range and Issue Type filters
on screens < 768px, making them invisible while only showing Project filter.

Changes:
- Reduced base min-width from 280px to 250px for better wrapping
- Removed overflow-x: hidden from .container and .inner (was clipping content)
- Added 900px breakpoint for smooth transition to 2-column layout
- Changed flex properties from '1 1 100%' to '1 1 auto' for better flexibility
- Updated date picker widths from '100%' to 'auto' with flex: 1
- Added flex-shrink: 0 to date separator to prevent collapse
- Changed date separator width from '100%' to 'auto' at 480px

Result:
- All three filters now visible at all screen sizes
- No overflow or clipping issues
- Smooth responsive behavior from desktop to mobile
- Filters properly wrap without being cut off
---
 .../IssueBreakdownChart.module.css            | 82 ++++++++++++++-----
 1 file changed, 60 insertions(+), 22 deletions(-)

diff --git a/src/components/BMDashboard/WeeklyProjectSummary/IssueBreakdownChart.module.css b/src/components/BMDashboard/WeeklyProjectSummary/IssueBreakdownChart.module.css
index d3c8ab17a3..f573f74889 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/IssueBreakdownChart.module.css
+++ b/src/components/BMDashboard/WeeklyProjectSummary/IssueBreakdownChart.module.css
@@ -74,8 +74,16 @@
   display: flex;
   flex-direction: column;
   min-width: 250px;
-  flex: 1 1 300px;
+  flex: 1 1 350px;
   max-width: 100%;
+  box-sizing: border-box;
+}
+
+/* Ensure react-select doesn't overflow */
+.filterGroup :global(.customSelect__control) {
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
 }
 
 .filterLabel {
@@ -89,6 +97,8 @@
   display: flex;
   align-items: center;
   gap: 8px;
+  width: 100%;
+  box-sizing: border-box;
 }
 
 .datePicker {
@@ -100,7 +110,10 @@
   background: var(--section-bg, #fff);
   color: var(--text-color, #333);
   min-height: 38px;
+  min-width: 0;
+  max-width: 100%;
   transition: border-color 0.2s ease, box-shadow 0.2s ease;
+  box-sizing: border-box;
   /* Ensure browser adapts native controls to dark mode */
   color-scheme: light dark;
 }
@@ -355,38 +368,42 @@
 
 /* ===================== RESPONSIVE DESIGN ===================== */
 
-/* Large tablets and medium screens - prevent filter overlap */
-@media (max-width: 1280px) {
+/* At 1155px, force issue type filter to wrap to next line */
+@media (max-width: 1155px) {
   .filterGroup {
-    min-width: 220px;
-    flex: 1 1 280px;
+    /* Increase flex-basis to force wrapping */
+    flex: 1 1 370px;
   }
 }
 
-/* Tablet screens - tighter spacing */
+/* Tablet screens - reduce size for better fit */
 @media (max-width: 1024px) {
   .filtersRow {
     gap: 16px;
   }
 
   .filterGroup {
-    min-width: 200px;
-    flex: 1 1 250px;
+    min-width: 220px;
+    flex: 1 1 300px;
   }
 }
 
-/* Small tablets - prevent overlap by wrapping earlier */
+/* Transition to vertical layout at 900px to prevent overflow */
 @media (max-width: 900px) {
   .filterGroup {
-    min-width: 180px;
-    flex: 1 1 220px;
+    min-width: 0;
+    flex: 1 1 calc(50% - 8px);
   }
 }
 
-/* Mobile devices */
+/* Mobile and smaller tablets - single column layout */
 @media (max-width: 768px) {
   .container {
-    padding: 20px;
+    padding: 16px;
+  }
+
+  .inner {
+    width: 100%;
   }
 
   .heading {
@@ -395,24 +412,31 @@
 
   .filtersRow {
     flex-direction: column;
-    gap: 20px;
+    gap: 16px;
     margin-top: 20px;
     margin-bottom: 16px;
   }
 
   .filterGroup {
-    min-width: 100%;
+    min-width: 0;
     width: 100%;
-    flex: 1 1 100%;
+    flex: 1 1 auto;
   }
 
   .datePickerGroup {
     flex-direction: row;
     align-items: center;
+    width: 100%;
   }
 
   .datePicker {
     min-width: 0;
+    width: auto;
+    flex: 1;
+  }
+
+  .dateSeparator {
+    flex-shrink: 0;
   }
 
   .resetButtonContainer {
@@ -434,7 +458,7 @@
 /* Small mobile devices */
 @media (max-width: 480px) {
   .container {
-    padding: 16px;
+    padding: 12px;
   }
 
   .heading {
@@ -443,30 +467,44 @@
   }
 
   .legend {
-    gap: 16px;
+    gap: 12px;
     justify-content: flex-start;
+    flex-wrap: wrap;
   }
 
   .legendLabel {
-    font-size: 18px;
+    font-size: 16px;
   }
 
   .filtersRow {
-    gap: 16px;
+    gap: 12px;
     margin-top: 16px;
   }
 
+  .filterGroup {
+    min-width: 0;
+    width: 100%;
+  }
+
   .filterLabel {
     font-size: 13px;
   }
 
   .datePickerGroup {
-    flex-wrap: wrap;
+    flex-direction: column;
+    gap: 8px;
+    width: 100%;
   }
 
-  .dateSeparator {
+  .datePicker {
+    min-width: 0;
     width: 100%;
+  }
+
+  .dateSeparator {
+    width: auto;
     text-align: center;
+    margin: 0;
   }
 
   .chartContainer {

From af4ecefd7883d82a02eb6f40f5010715436db58f Mon Sep 17 00:00:00 2001
From: Aditya Gambhir <67105262+Aditya-gam@users.noreply.github.com>
Date: Mon, 3 Nov 2025 19:28:19 -0800
Subject: [PATCH 19/19] refactor: eliminate code duplication in
 IssuesBreakdownChart by extracting getSelectStyles utility function

---
 .../IssuesBreakdownChart.jsx                  | 264 ++++++------------
 1 file changed, 92 insertions(+), 172 deletions(-)

diff --git a/src/components/BMDashboard/WeeklyProjectSummary/IssuesBreakdownChart.jsx b/src/components/BMDashboard/WeeklyProjectSummary/IssuesBreakdownChart.jsx
index 82b4dd750a..f8393a1d78 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/IssuesBreakdownChart.jsx
+++ b/src/components/BMDashboard/WeeklyProjectSummary/IssuesBreakdownChart.jsx
@@ -37,6 +37,96 @@ const ISSUE_TYPE_MAPPING = {
   'Materials Issues': 'materialIssues',
 };
 
+/**
+ * Generate react-select custom styles based on dark mode
+ * @param {boolean} darkMode - Whether dark mode is enabled
+ * @returns {object} Custom styles object for react-select
+ */
+const getSelectStyles = darkMode => {
+  if (darkMode) {
+    return {
+      control: baseStyles => ({
+        ...baseStyles,
+        backgroundColor: '#2c3344',
+        borderColor: '#364156',
+        minHeight: '38px',
+        fontSize: '14px',
+      }),
+      menu: baseStyles => ({
+        ...baseStyles,
+        backgroundColor: '#2c3344',
+        fontSize: '14px',
+      }),
+      option: (baseStyles, state) => ({
+        ...baseStyles,
+        backgroundColor: state.isSelected ? '#0d55b3' : state.isFocused ? '#364156' : '#2c3344',
+        color: state.isSelected ? '#fff' : '#e0e0e0',
+        fontSize: '14px',
+      }),
+      multiValue: baseStyles => ({
+        ...baseStyles,
+        backgroundColor: '#375071',
+        borderRadius: '6px',
+      }),
+      multiValueLabel: baseStyles => ({
+        ...baseStyles,
+        color: '#fff',
+        fontSize: '12px',
+      }),
+      multiValueRemove: baseStyles => ({
+        ...baseStyles,
+        color: '#fff',
+        ':hover': {
+          backgroundColor: '#0d55b3',
+          color: '#fff',
+        },
+      }),
+      singleValue: baseStyles => ({
+        ...baseStyles,
+        color: '#e0e0e0',
+      }),
+      placeholder: baseStyles => ({
+        ...baseStyles,
+        color: '#aaaaaa',
+      }),
+    };
+  }
+
+  return {
+    control: baseStyles => ({
+      ...baseStyles,
+      minHeight: '38px',
+      fontSize: '14px',
+    }),
+    menu: baseStyles => ({
+      ...baseStyles,
+      fontSize: '14px',
+    }),
+    option: baseStyles => ({
+      ...baseStyles,
+      fontSize: '14px',
+    }),
+    multiValue: baseStyles => ({
+      ...baseStyles,
+      backgroundColor: '#e2e7ee',
+      borderRadius: '6px',
+    }),
+    multiValueLabel: baseStyles => ({
+      ...baseStyles,
+      color: '#333',
+      fontSize: '12px',
+    }),
+    multiValueRemove: baseStyles => ({
+      ...baseStyles,
+      color: '#333',
+      ':hover': {
+        backgroundColor: '#0d55b3',
+        color: '#fff',
+      },
+    }),
+  };
+};
+
 export default function IssuesBreakdownChart() {
   const [data, setData] = useState([]);
   const [loading, setLoading] = useState(true);
@@ -380,92 +470,7 @@ export default function IssuesBreakdownChart() {
               placeholder="Select Projects"
               isClearable
               isDisabled={availableProjects.length === 0}
-              styles={
-                darkMode
-                  ? {
-                      control: baseStyles => ({
-                        ...baseStyles,
-                        backgroundColor: '#2c3344',
-                        borderColor: '#364156',
-                        minHeight: '38px',
-                        fontSize: '14px',
-                      }),
-                      menu: baseStyles => ({
-                        ...baseStyles,
-                        backgroundColor: '#2c3344',
-                        fontSize: '14px',
-                      }),
-                      option: (baseStyles, state) => ({
-                        ...baseStyles,
-                        backgroundColor: state.isSelected
-                          ? '#0d55b3'
-                          : state.isFocused
-                          ? '#364156'
-                          : '#2c3344',
-                        color: state.isSelected ? '#fff' : '#e0e0e0',
-                        fontSize: '14px',
-                      }),
-                      multiValue: baseStyles => ({
-                        ...baseStyles,
-                        backgroundColor: '#375071',
-                        borderRadius: '6px',
-                      }),
-                      multiValueLabel: baseStyles => ({
-                        ...baseStyles,
-                        color: '#fff',
-                        fontSize: '12px',
-                      }),
-                      multiValueRemove: baseStyles => ({
-                        ...baseStyles,
-                        color: '#fff',
-                        ':hover': {
-                          backgroundColor: '#0d55b3',
-                          color: '#fff',
-                        },
-                      }),
-                      singleValue: baseStyles => ({
-                        ...baseStyles,
-                        color: '#e0e0e0',
-                      }),
-                      placeholder: baseStyles => ({
-                        ...baseStyles,
-                        color: '#aaaaaa',
-                      }),
-                    }
-                  : {
-                      control: baseStyles => ({
-                        ...baseStyles,
-                        minHeight: '38px',
-                        fontSize: '14px',
-                      }),
-                      menu: baseStyles => ({
-                        ...baseStyles,
-                        fontSize: '14px',
-                      }),
-                      option: baseStyles => ({
-                        ...baseStyles,
-                        fontSize: '14px',
-                      }),
-                      multiValue: baseStyles => ({
-                        ...baseStyles,
-                        backgroundColor: '#e2e7ee',
-                        borderRadius: '6px',
-                      }),
-                      multiValueLabel: baseStyles => ({
-                        ...baseStyles,
-                        color: '#333',
-                        fontSize: '12px',
-                      }),
-                      multiValueRemove: baseStyles => ({
-                        ...baseStyles,
-                        color: '#333',
-                        ':hover': {
-                          backgroundColor: '#0d55b3',
-                          color: '#fff',
-                        },
-                      }),
-                    }
-              }
+              styles={getSelectStyles(darkMode)}
             />
           </div>
 
@@ -508,92 +513,7 @@ export default function IssuesBreakdownChart() {
               onChange={handleIssueTypeChange}
               placeholder="Select Issue Types"
               isClearable
-              styles={
-                darkMode
-                  ? {
-                      control: baseStyles => ({
-                        ...baseStyles,
-                        backgroundColor: '#2c3344',
-                        borderColor: '#364156',
-                        minHeight: '38px',
-                        fontSize: '14px',
-                      }),
-                      menu: baseStyles => ({
-                        ...baseStyles,
-                        backgroundColor: '#2c3344',
-                        fontSize: '14px',
-                      }),
-                      option: (baseStyles, state) => ({
-                        ...baseStyles,
-                        backgroundColor: state.isSelected
-                          ? '#0d55b3'
-                          : state.isFocused
-                          ? '#364156'
-                          : '#2c3344',
-                        color: state.isSelected ? '#fff' : '#e0e0e0',
-                        fontSize: '14px',
-                      }),
-                      multiValue: baseStyles => ({
-                        ...baseStyles,
-                        backgroundColor: '#375071',
-                        borderRadius: '6px',
-                      }),
-                      multiValueLabel: baseStyles => ({
-                        ...baseStyles,
-                        color: '#fff',
-                        fontSize: '12px',
-                      }),
-                      multiValueRemove: baseStyles => ({
-                        ...baseStyles,
-                        color: '#fff',
-                        ':hover': {
-                          backgroundColor: '#0d55b3',
-                          color: '#fff',
-                        },
-                      }),
-                      singleValue: baseStyles => ({
-                        ...baseStyles,
-                        color: '#e0e0e0',
-                      }),
-                      placeholder: baseStyles => ({
-                        ...baseStyles,
-                        color: '#aaaaaa',
-                      }),
-                    }
-                  : {
-                      control: baseStyles => ({
-                        ...baseStyles,
-                        minHeight: '38px',
-                        fontSize: '14px',
-                      }),
-                      menu: baseStyles => ({
-                        ...baseStyles,
-                        fontSize: '14px',
-                      }),
-                      option: baseStyles => ({
-                        ...baseStyles,
-                        fontSize: '14px',
-                      }),
-                      multiValue: baseStyles => ({
-                        ...baseStyles,
-                        backgroundColor: '#e2e7ee',
-                        borderRadius: '6px',
-                      }),
-                      multiValueLabel: baseStyles => ({
-                        ...baseStyles,
-                        color: '#333',
-                        fontSize: '12px',
-                      }),
-                      multiValueRemove: baseStyles => ({
-                        ...baseStyles,
-                        color: '#333',
-                        ':hover': {
-                          backgroundColor: '#0d55b3',
-                          color: '#fff',
-                        },
-                      }),
-                    }
-              }
+              styles={getSelectStyles(darkMode)}
             />
           </div>
         </div>