From 73d7870aea3de9925669abb86babed999b48f483 Mon Sep 17 00:00:00 2001
From: Aditya Gambhir <67105262+Aditya-gam@users.noreply.github.com>
Date: Fri, 7 Nov 2025 21:23:33 -0800
Subject: [PATCH 01/29] fix(bm-tools): handle new structured API response
 format

- Extract data from structured response {success, data, message, ...}
- Add validation for success field in responses
- Display API message for empty results and errors
- Enhance error handling with specific messages for auth, network, and server errors
- Add console logging for debugging API failures
- Support backward compatibility with raw array responses

Fixes issue with component crashing when backend returns structured response format instead of raw arrays.
---
 .../Tools/ToolsStoppageHorizontalBarChart.jsx | 335 ++++++++++++++++++
 1 file changed, 335 insertions(+)
 create mode 100644 src/components/BMDashboard/Tools/ToolsStoppageHorizontalBarChart.jsx

diff --git a/src/components/BMDashboard/Tools/ToolsStoppageHorizontalBarChart.jsx b/src/components/BMDashboard/Tools/ToolsStoppageHorizontalBarChart.jsx
new file mode 100644
index 0000000000..e9861e7979
--- /dev/null
+++ b/src/components/BMDashboard/Tools/ToolsStoppageHorizontalBarChart.jsx
@@ -0,0 +1,335 @@
+import { useState, useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import Select from 'react-select';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import { Row, Col, Button } from 'react-bootstrap';
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip as ChartTooltip,
+  Legend as ChartLegend,
+} from 'chart.js';
+import ChartDataLabels from 'chartjs-plugin-datalabels';
+import { Bar } from 'react-chartjs-2';
+import axios from 'axios';
+import { ENDPOINTS } from '../../../utils/URL';
+import styles from './ToolsStoppageHorizontalBarChart.module.css';
+
+// Register Chart.js components
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  ChartTooltip,
+  ChartLegend,
+  ChartDataLabels,
+);
+
+export default function ToolsStoppageHorizontalBarChart() {
+  const darkMode = useSelector(state => state.theme.darkMode);
+  const [projects, setProjects] = useState([]);
+  const [selectedProject, setSelectedProject] = useState(null);
+  const [dateRange, setDateRange] = useState([null, null]);
+  const [startDate, endDate] = dateRange;
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [data, setData] = useState([]);
+  const emptyData = [];
+
+  useEffect(() => {
+    const fetchProjects = async () => {
+      setLoading(true);
+      setError(null);
+      try {
+        const response = await axios.get(ENDPOINTS.BM_TOOL_PROJECTS);
+        const responseData = response.data;
+
+        // Handle new structured response format
+        if (responseData.success === false) {
+          setError(responseData.message || 'Failed to load projects.');
+          setProjects([]);
+          return;
+        }
+
+        // Extract data array from structured response
+        const projectsData = responseData.data || responseData;
+        setProjects(Array.isArray(projectsData) ? projectsData : []);
+      } catch (err) {
+        console.error('Failed to load projects:', err);
+        if (err.response?.data?.message) {
+          setError(err.response.data.message);
+        } else if (err.response?.status === 401 || err.response?.status === 403) {
+          setError('Session expired. Please log in again.');
+        } else if (!err.response) {
+          setError('Network error. Please check your connection.');
+        } else {
+          setError('Failed to load projects. Please try again.');
+        }
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchProjects();
+  }, []);
+
+  useEffect(() => {
+    const fetchToolsStoppageData = async () => {
+      setLoading(true);
+      setError(null);
+      const formattedStart = startDate ? new Date(startDate).toISOString() : null;
+      const formattedEnd = endDate ? new Date(endDate).toISOString() : null;
+
+      try {
+        if (selectedProject) {
+          const url = ENDPOINTS.BM_TOOLS_STOPPAGE_BY_PROJECT(
+            selectedProject?.value,
+            formattedStart,
+            formattedEnd,
+          );
+          const response = await axios.get(url);
+          const responseData = response.data;
+
+          // Handle new structured response format
+          if (responseData.success === false) {
+            setError(responseData.message || 'Failed to load stoppage data.');
+            setData(emptyData);
+            return;
+          }
+
+          // Extract data array from structured response
+          const stoppageData = responseData.data || responseData;
+
+          if (stoppageData && Array.isArray(stoppageData) && stoppageData.length > 0) {
+            const sortedData = [...stoppageData].map(item => ({
+              ...item,
+              name: item.toolName || item.name,
+            }));
+            setData(sortedData);
+          } else {
+            setData(emptyData);
+            // Use message from API if available
+            const message =
+              responseData.message || 'No tool stoppage reason data found for this project.';
+            setError(message);
+          }
+        } else if (projects.length > 0) {
+          const firstProject = projects[0];
+          setSelectedProject({ value: firstProject.projectId, label: firstProject.projectName });
+          const url = ENDPOINTS.BM_TOOLS_STOPPAGE_BY_PROJECT(firstProject.projectId, null, null);
+          const response = await axios.get(url);
+          const responseData = response.data;
+
+          // Handle new structured response format
+          if (responseData.success === false) {
+            setError(responseData.message || 'Failed to load stoppage data.');
+            setData(emptyData);
+            return;
+          }
+
+          // Extract data array from structured response
+          const stoppageData = responseData.data || responseData;
+
+          if (stoppageData && Array.isArray(stoppageData) && stoppageData.length > 0) {
+            const sortedData = [...stoppageData].map(item => ({
+              ...item,
+              name: item.toolName || item.name,
+            }));
+            setData(sortedData);
+          } else {
+            setData(emptyData);
+          }
+        } else {
+          setData(emptyData);
+        }
+      } catch (err) {
+        console.error('Failed to load tools stoppage data:', err);
+        setData(emptyData);
+
+        // Enhanced error handling
+        if (err.response?.data?.message) {
+          setError(err.response.data.message);
+        } else if (err.response?.status === 401 || err.response?.status === 403) {
+          setError('Session expired. Please log in again.');
+        } else if (!err.response) {
+          setError('Network error. Please check your connection.');
+        } else if (err.response?.status >= 500) {
+          setError('Server error. Please try again later.');
+        } else {
+          setError('Failed to load tools stoppage reason data. Please try again.');
+        }
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchToolsStoppageData();
+  }, [selectedProject, startDate, endDate, projects]);
+
+  const projectOptions = projects.map(project => ({
+    value: project.projectId,
+    label: project.projectName,
+  }));
+
+  // Format date for display
+  const formatDate = date => date?.toISOString().split('T')[0];
+  const dateRangeLabel =
+    startDate && endDate ? `${formatDate(startDate)} - ${formatDate(endDate)}` : '';
+
+  const selectDarkStyles = {
+    control: base => ({
+      ...base,
+      backgroundColor: '#2c3344',
+      borderColor: '#364156',
+    }),
+    menu: base => ({
+      ...base,
+      backgroundColor: '#2c3344',
+    }),
+    option: (base, state) => ({
+      ...base,
+      backgroundColor: state.isFocused ? '#364156' : '#2c3344',
+      color: '#e0e0e0',
+    }),
+    singleValue: base => ({
+      ...base,
+      color: '#e0e0e0',
+    }),
+    placeholder: base => ({
+      ...base,
+      color: '#aaaaaa',
+    }),
+  };
+
+  // ✅ Prepare Chart.js data
+  const chartData = {
+    labels: data.map(item =>
+      item.name.length > 20 ? `${item.name.substring(0, 18)}...` : item.name,
+    ),
+    datasets: [
+      {
+        label: 'Used its lifetime',
+        data: data.map(item => item.usedForLifetime || 0),
+        backgroundColor: '#4589FF',
+        barThickness: 30,
+      },
+      {
+        label: 'Damaged',
+        data: data.map(item => item.damaged || 0),
+        backgroundColor: '#FF0000',
+        barThickness: 30,
+      },
+      {
+        label: 'Lost',
+        data: data.map(item => item.lost || 0),
+        backgroundColor: '#FFB800',
+        barThickness: 30,
+      },
+    ],
+  };
+
+  // ✅ Chart.js options for horizontal stacked bars
+  const chartOptions = {
+    indexAxis: 'y',
+    maintainAspectRatio: false,
+    responsive: true,
+    plugins: {
+      legend: {
+        position: 'top',
+        labels: { color: darkMode ? '#e0e0e0' : '#000' },
+      },
+      tooltip: { enabled: true, color: darkMode ? '#FFFFFF' : '#000000' },
+      datalabels: {
+        display: true,
+        color: '#fff',
+        font: { weight: 'bold' },
+      },
+    },
+    scales: {
+      x: {
+        stacked: true,
+        grid: { color: darkMode ? '#364156' : '#e0e0e0' },
+        ticks: { color: darkMode ? '#e0e0e0' : '#000' },
+      },
+      y: {
+        title: { display: true, text: 'Tools', color: darkMode ? '#FFFFFF' : '#000000' },
+        stacked: true,
+        grid: { display: false },
+        ticks: { color: darkMode ? '#e0e0e0' : '#000' },
+      },
+    },
+  };
+
+  return (
+    <div className={`tools-availability-page ${darkMode ? 'dark-mode' : ''}`}>
+      <h3 className={`tools-chart-title ${darkMode ? 'dark-mode' : ''}`}>
+        Reason of Stoppage of Tools
+      </h3>
+      <Row className="mb-3 align-items-center">
+        <Col xs={12} md={6}>
+          <div className={styles.datepickerWrapper}>
+            <DatePicker
+              selectsRange
+              startDate={startDate}
+              endDate={endDate}
+              onChange={update => {
+                setDateRange(update);
+              }}
+              placeholderText={dateRangeLabel || 'Filter by Date Range'}
+              className={`${styles.datePickerInput} form-control ${darkMode ? 'darkTheme' : ''}`}
+              calendarClassName={darkMode ? 'darkThemeCalendar' : 'customCalendar'}
+            />
+            <Button variant="outline-danger" size="sm" onClick={() => setDateRange([null, null])}>
+              ✕
+            </Button>
+          </div>
+        </Col>
+        <Col xs={12} md={4}>
+          <Select
+            className="w-100"
+            classNamePrefix="customSelect"
+            value={selectedProject}
+            onChange={opt => setSelectedProject(opt)}
+            options={projectOptions}
+            placeholder="Select a project ID to view data"
+            isClearable={false}
+            isDisabled={projects.length === 0}
+            styles={darkMode ? selectDarkStyles : {}}
+          />
+        </Col>
+        <Col xs={12} md={2}>
+          <Button
+            variant="danger"
+            size="sm"
+            onClick={() => {
+              setSelectedProject(null);
+              setDateRange([null, null]);
+            }}
+          >
+            Reset
+          </Button>
+        </Col>
+      </Row>
+
+      <div className="tools-horizontal-chart-container">
+        {error && <div className="tools-chart-error">{error}</div>}
+        {loading && <div className="tools-chart-loading">Loading tool availability data...</div>}
+
+        {!loading && selectedProject && data.length > 0 && (
+          <Bar data={chartData} options={chartOptions} height={600} />
+        )}
+
+        {!loading && selectedProject && data.length === 0 && (
+          <div className="tools-chart-empty">
+            <p>No data available for the selected filters.</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

From b9ffc1c844f16816e24fee613e078cdc3c0a5a4a Mon Sep 17 00:00:00 2001
From: Aditya Gambhir <67105262+Aditya-gam@users.noreply.github.com>
Date: Fri, 7 Nov 2025 21:28:26 -0800
Subject: [PATCH 02/29] refactor(bm-tools): replace direct axios with
 httpService wrapper

- Replace axios import with httpService for consistent auth handling
- Update all axios.get() calls to httpService.get() (3 locations)
- Enable automatic JWT token attachment to requests
- Enable automatic auth error interception (401/403 redirects)
- Align with codebase standard pattern used in other BM components

This ensures proper authentication handling and prevents intermittent failures when JWT tokens expire.
---
 .../BMDashboard/Tools/ToolsStoppageHorizontalBarChart.jsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/BMDashboard/Tools/ToolsStoppageHorizontalBarChart.jsx b/src/components/BMDashboard/Tools/ToolsStoppageHorizontalBarChart.jsx
index e9861e7979..84e61c6468 100644
--- a/src/components/BMDashboard/Tools/ToolsStoppageHorizontalBarChart.jsx
+++ b/src/components/BMDashboard/Tools/ToolsStoppageHorizontalBarChart.jsx
@@ -15,7 +15,7 @@ import {
 } from 'chart.js';
 import ChartDataLabels from 'chartjs-plugin-datalabels';
 import { Bar } from 'react-chartjs-2';
-import axios from 'axios';
+import httpService from '../../../services/httpService';
 import { ENDPOINTS } from '../../../utils/URL';
 import styles from './ToolsStoppageHorizontalBarChart.module.css';
 
@@ -46,7 +46,7 @@ export default function ToolsStoppageHorizontalBarChart() {
       setLoading(true);
       setError(null);
       try {
-        const response = await axios.get(ENDPOINTS.BM_TOOL_PROJECTS);
+        const response = await httpService.get(ENDPOINTS.BM_TOOL_PROJECTS);
         const responseData = response.data;
 
         // Handle new structured response format
@@ -92,7 +92,7 @@ export default function ToolsStoppageHorizontalBarChart() {
             formattedStart,
             formattedEnd,
           );
-          const response = await axios.get(url);
+          const response = await httpService.get(url);
           const responseData = response.data;
 
           // Handle new structured response format
@@ -122,7 +122,7 @@ export default function ToolsStoppageHorizontalBarChart() {
           const firstProject = projects[0];
           setSelectedProject({ value: firstProject.projectId, label: firstProject.projectName });
           const url = ENDPOINTS.BM_TOOLS_STOPPAGE_BY_PROJECT(firstProject.projectId, null, null);
-          const response = await axios.get(url);
+          const response = await httpService.get(url);
           const responseData = response.data;
 
           // Handle new structured response format

From 0a6d759edb0161f7ddd06e46d5d483d608e4c478 Mon Sep 17 00:00:00 2001
From: Aditya Gambhir <67105262+Aditya-gam@users.noreply.github.com>
Date: Fri, 7 Nov 2025 21:34:19 -0800
Subject: [PATCH 03/29] refactor(bm-tools): split useEffect into auto-select
 and data-fetch effects

- Create dedicated useEffect for auto-selecting first project
- Separate data-fetching useEffect with single responsibility
- Remove 'projects' from data-fetch dependencies (eliminates race condition)
- Add early return guard clause when no project selected
- Simplify logic by removing complex conditional branching

This follows React best practices (single responsibility principle) and eliminates the race condition that caused redundant API calls. The auto-select effect runs once when projects load, then the data-fetch effect runs when selectedProject changes.
---
 .../Tools/ToolsStoppageHorizontalBarChart.jsx | 100 ++++++++----------
 1 file changed, 44 insertions(+), 56 deletions(-)

diff --git a/src/components/BMDashboard/Tools/ToolsStoppageHorizontalBarChart.jsx b/src/components/BMDashboard/Tools/ToolsStoppageHorizontalBarChart.jsx
index 84e61c6468..501cbf32bc 100644
--- a/src/components/BMDashboard/Tools/ToolsStoppageHorizontalBarChart.jsx
+++ b/src/components/BMDashboard/Tools/ToolsStoppageHorizontalBarChart.jsx
@@ -78,74 +78,62 @@ export default function ToolsStoppageHorizontalBarChart() {
     fetchProjects();
   }, []);
 
+  // Auto-select first project when projects load
+  useEffect(() => {
+    if (!selectedProject && projects.length > 0) {
+      const firstProject = projects[0];
+      setSelectedProject({
+        value: firstProject.projectId,
+        label: firstProject.projectName,
+      });
+    }
+  }, [projects, selectedProject]);
+
+  // Fetch tools stoppage data when project or date filters change
   useEffect(() => {
     const fetchToolsStoppageData = async () => {
+      // Early return if no project selected
+      if (!selectedProject) {
+        setData(emptyData);
+        return;
+      }
+
       setLoading(true);
       setError(null);
       const formattedStart = startDate ? new Date(startDate).toISOString() : null;
       const formattedEnd = endDate ? new Date(endDate).toISOString() : null;
 
       try {
-        if (selectedProject) {
-          const url = ENDPOINTS.BM_TOOLS_STOPPAGE_BY_PROJECT(
-            selectedProject?.value,
-            formattedStart,
-            formattedEnd,
-          );
-          const response = await httpService.get(url);
-          const responseData = response.data;
-
-          // Handle new structured response format
-          if (responseData.success === false) {
-            setError(responseData.message || 'Failed to load stoppage data.');
-            setData(emptyData);
-            return;
-          }
-
-          // Extract data array from structured response
-          const stoppageData = responseData.data || responseData;
-
-          if (stoppageData && Array.isArray(stoppageData) && stoppageData.length > 0) {
-            const sortedData = [...stoppageData].map(item => ({
-              ...item,
-              name: item.toolName || item.name,
-            }));
-            setData(sortedData);
-          } else {
-            setData(emptyData);
-            // Use message from API if available
-            const message =
-              responseData.message || 'No tool stoppage reason data found for this project.';
-            setError(message);
-          }
-        } else if (projects.length > 0) {
-          const firstProject = projects[0];
-          setSelectedProject({ value: firstProject.projectId, label: firstProject.projectName });
-          const url = ENDPOINTS.BM_TOOLS_STOPPAGE_BY_PROJECT(firstProject.projectId, null, null);
-          const response = await httpService.get(url);
-          const responseData = response.data;
+        const url = ENDPOINTS.BM_TOOLS_STOPPAGE_BY_PROJECT(
+          selectedProject.value,
+          formattedStart,
+          formattedEnd,
+        );
+        const response = await httpService.get(url);
+        const responseData = response.data;
 
-          // Handle new structured response format
-          if (responseData.success === false) {
-            setError(responseData.message || 'Failed to load stoppage data.');
-            setData(emptyData);
-            return;
-          }
+        // Handle new structured response format
+        if (responseData.success === false) {
+          setError(responseData.message || 'Failed to load stoppage data.');
+          setData(emptyData);
+          return;
+        }
 
-          // Extract data array from structured response
-          const stoppageData = responseData.data || responseData;
+        // Extract data array from structured response
+        const stoppageData = responseData.data || responseData;
 
-          if (stoppageData && Array.isArray(stoppageData) && stoppageData.length > 0) {
-            const sortedData = [...stoppageData].map(item => ({
-              ...item,
-              name: item.toolName || item.name,
-            }));
-            setData(sortedData);
-          } else {
-            setData(emptyData);
-          }
+        if (stoppageData && Array.isArray(stoppageData) && stoppageData.length > 0) {
+          const sortedData = [...stoppageData].map(item => ({
+            ...item,
+            name: item.toolName || item.name,
+          }));
+          setData(sortedData);
         } else {
           setData(emptyData);
+          // Use message from API if available
+          const message =
+            responseData.message || 'No tool stoppage reason data found for this project.';
+          setError(message);
         }
       } catch (err) {
         console.error('Failed to load tools stoppage data:', err);
@@ -169,7 +157,7 @@ export default function ToolsStoppageHorizontalBarChart() {
     };
 
     fetchToolsStoppageData();
-  }, [selectedProject, startDate, endDate, projects]);
+  }, [selectedProject, startDate, endDate]);
 
   const projectOptions = projects.map(project => ({
     value: project.projectId,

From 3f72f15d1abb1810a904f7e942ac771096e99822 Mon Sep 17 00:00:00 2001
From: Aditya Gambhir <67105262+Aditya-gam@users.noreply.github.com>
Date: Fri, 7 Nov 2025 21:49:58 -0800
Subject: [PATCH 04/29] fix(bm-tools): enhance error handling with specific
 categorized messages

- Add 500+ server error detection in projects fetch useEffect
- Include HTTP status codes in generic error fallbacks for debugging
- Maintain consistent error handling pattern across both useEffects
- Distinguish between auth (401/403), network, server (500+), and unknown errors
- Provide actionable error messages for each error category

Users now receive specific guidance (login, check network, wait for server) instead of generic error messages. Status codes help developers diagnose production issues.
---
 .../Tools/ToolsStoppageHorizontalBarChart.jsx        | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/BMDashboard/Tools/ToolsStoppageHorizontalBarChart.jsx b/src/components/BMDashboard/Tools/ToolsStoppageHorizontalBarChart.jsx
index 501cbf32bc..5f9cd93d8e 100644
--- a/src/components/BMDashboard/Tools/ToolsStoppageHorizontalBarChart.jsx
+++ b/src/components/BMDashboard/Tools/ToolsStoppageHorizontalBarChart.jsx
@@ -67,8 +67,13 @@ export default function ToolsStoppageHorizontalBarChart() {
           setError('Session expired. Please log in again.');
         } else if (!err.response) {
           setError('Network error. Please check your connection.');
+        } else if (err.response?.status >= 500) {
+          setError('Server error. Please try again later.');
         } else {
-          setError('Failed to load projects. Please try again.');
+          setError(
+            `Failed to load projects. Please try again. (Status: ${err.response?.status ||
+              'unknown'})`,
+          );
         }
       } finally {
         setLoading(false);
@@ -149,7 +154,10 @@ export default function ToolsStoppageHorizontalBarChart() {
         } else if (err.response?.status >= 500) {
           setError('Server error. Please try again later.');
         } else {
-          setError('Failed to load tools stoppage reason data. Please try again.');
+          setError(
+            `Failed to load tools stoppage reason data. Please try again. (Status: ${err.response
+              ?.status || 'unknown'})`,
+          );
         }
       } finally {
         setLoading(false);

From 3fc9fdeb39f8a003b46b69d70b46bc0aa30f76a8 Mon Sep 17 00:00:00 2001
From: Aditya Gambhir <67105262+Aditya-gam@users.noreply.github.com>
Date: Fri, 7 Nov 2025 21:57:00 -0800
Subject: [PATCH 05/29] refactor(bm-tools): replace console.error with
 logService for proper error tracking

- Import logService from services directory
- Replace console.error calls with logService.logError in both catch blocks
- Leverage Sentry integration for centralized error monitoring
- Eliminates ESLint warnings about console statements
- Aligns with codebase logging standards

Errors are now properly captured in production monitoring instead of just browser console.
---
 .../BMDashboard/Tools/ToolsStoppageHorizontalBarChart.jsx    | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/BMDashboard/Tools/ToolsStoppageHorizontalBarChart.jsx b/src/components/BMDashboard/Tools/ToolsStoppageHorizontalBarChart.jsx
index 5f9cd93d8e..b9e9fd770a 100644
--- a/src/components/BMDashboard/Tools/ToolsStoppageHorizontalBarChart.jsx
+++ b/src/components/BMDashboard/Tools/ToolsStoppageHorizontalBarChart.jsx
@@ -16,6 +16,7 @@ import {
 import ChartDataLabels from 'chartjs-plugin-datalabels';
 import { Bar } from 'react-chartjs-2';
 import httpService from '../../../services/httpService';
+import logService from '../../../services/logService';
 import { ENDPOINTS } from '../../../utils/URL';
 import styles from './ToolsStoppageHorizontalBarChart.module.css';
 
@@ -60,7 +61,7 @@ export default function ToolsStoppageHorizontalBarChart() {
         const projectsData = responseData.data || responseData;
         setProjects(Array.isArray(projectsData) ? projectsData : []);
       } catch (err) {
-        console.error('Failed to load projects:', err);
+        logService.logError(err);
         if (err.response?.data?.message) {
           setError(err.response.data.message);
         } else if (err.response?.status === 401 || err.response?.status === 403) {
@@ -141,7 +142,7 @@ export default function ToolsStoppageHorizontalBarChart() {
           setError(message);
         }
       } catch (err) {
-        console.error('Failed to load tools stoppage data:', err);
+        logService.logError(err);
         setData(emptyData);
 
         // Enhanced error handling

From c970f70a05f1e6548a0bbbfff09a26f751224b1c Mon Sep 17 00:00:00 2001
From: Aditya Gambhir <67105262+Aditya-gam@users.noreply.github.com>
Date: Tue, 11 Nov 2025 15:29:33 -0800
Subject: [PATCH 06/29] fix: prevent card stretching in Tools and Equipment
 Tracking section

- Add align-items: start to grid container to prevent cards from stretching
- Change card min-heights from fixed 250px to auto for content-based sizing
- Cards now size to their content instead of matching tallest card height
---
 .../WeeklyProjectSummary/WeeklyProjectSummary.module.css      | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.module.css b/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.module.css
index 2a9ad25ff0..36de700a50 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.module.css
+++ b/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.module.css
@@ -306,7 +306,7 @@
 
 .wideCard {
   width: 100%;
-  min-height: 250px;
+  min-height: auto; /* Let content determine height instead of forcing 250px */
   grid-column: span 2;
 }
 
@@ -320,6 +320,7 @@
   max-width: 100%;
   min-height: 250px;
   box-sizing: border-box;
+  min-height: auto; /* Let content determine height instead of forcing 250px */
 }
 
 .mapCard {
@@ -359,6 +360,7 @@
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 20px;
+  align-items: start; /* Prevent cards from stretching to match tallest card */
   border-top: 1px solid var(--card-shadow);
   animation: fade-in 0.3s ease-in-out;
   background: var(--section-bg);

From 8dc39924822c3414a750d0710c12d2ddeb336957 Mon Sep 17 00:00:00 2001
From: Aditya Gambhir <67105262+Aditya-gam@users.noreply.github.com>
Date: Tue, 11 Nov 2025 15:29:43 -0800
Subject: [PATCH 07/29] fix: prevent chart containers from forcing excessive
 height

- Change ToolsHorizontalBarChart card height from 100% to auto
- Add height: auto and flex properties to donut chart wrapper
- Override tools-availability-page min-height 100vh to auto for card context
- Add styles for tools-horizontal-chart-container to prevent stretching
- Remove excessive padding from tools-availability-page wrapper
---
 .../ToolStatusDonutChart.css                  | 114 ++++++++++++++++++
 .../Tools/ToolsHorizontalBarChart.module.css  |   6 +-
 ...ToolsStoppageHorizontalBarChart.module.css |  15 +++
 3 files changed, 132 insertions(+), 3 deletions(-)
 create mode 100644 src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.css

diff --git a/src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.css b/src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.css
new file mode 100644
index 0000000000..cd93683818
--- /dev/null
+++ b/src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.css
@@ -0,0 +1,114 @@
+.tool-donut-wrapper {
+  --donut-text-color: #000;
+  --legend-text-color: #000;
+  width: 100%;
+  max-width: 400px;
+  margin: 0 auto;
+  text-align: center;
+  height: auto; /* Ensure wrapper doesn't stretch */
+  display: flex;
+  flex-direction: column; /* Stack content vertically */
+}
+
+.dark-mode.tool-donut-wrapper {
+  --donut-text-color: #fff;
+  --legend-text-color: #fff;
+}
+
+.tool-donut-title {
+  text-align: center;
+  font-weight: 600;
+  margin-bottom: 1.2rem;
+  font-size: 1.1rem;
+  color: var(--donut-text-color);
+}
+
+.tool-donut-filters {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 3rem;
+  margin-bottom: 1.5rem;
+}
+
+.filter-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-size: 14px;
+  text-align: center;
+}
+
+.filter-label {
+  font-weight: 600;
+  font-size: 14px;
+  color: var(--donut-text-color);
+}
+
+.filter-value {
+  font-size: 14px;
+  color: #888;
+  margin-top: 2px;
+  font-weight: 500;
+}
+
+.tool-donut-legend {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin-top: 1rem;
+  gap: 0.5rem;
+  width: 100%;
+}
+
+.tool-donut-legend-item {
+  color: #ffffff;
+  padding: 6px 16px;
+  border-radius: 0;
+  font-size: 14px;
+  font-weight: 500;
+  min-width: 140px;
+  text-align: center;
+}
+
+/* Responsive Donut Layout */
+.tools-tracking-layout {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+  justify-content: space-between;
+  align-items: stretch;
+  padding: 1rem;
+}
+
+.tools-donut-wrap {
+  flex: 0 0 60%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.tools-card-wrap {
+  flex: 0 0 40%;
+  background: #f9f9f9;
+  border-radius: 8px;
+  padding: 1rem;
+  font-size: 1rem;
+  font-weight: 500;
+  color: #333;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
+}
+
+@media (max-width: 768px) {
+  .tools-tracking-layout {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .tools-donut-wrap,
+  .tools-card-wrap {
+    flex: 1 1 100%;
+    max-width: 100%;
+  }
+}
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsHorizontalBarChart.module.css b/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsHorizontalBarChart.module.css
index 5a1a60d11b..46b4ecbfe9 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsHorizontalBarChart.module.css
+++ b/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsHorizontalBarChart.module.css
@@ -5,12 +5,12 @@
   background-color: var(--card-bg, #fff);
   border-radius: 8px;
   padding: 16px;
-  height: 100%;
-  box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
+  height: auto; /* Let card size to content instead of stretching to 100% */
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   display: flex;
   flex-direction: column;
   transition: transform 0.2s ease;
-  min-height: 280px;
+  min-height: 280px; /* Keep min-height for empty/loading states */
 }
 
 .tools-horizontal-bar-chart-card:hover {
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsStoppageHorizontalBarChart/ToolsStoppageHorizontalBarChart.module.css b/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsStoppageHorizontalBarChart/ToolsStoppageHorizontalBarChart.module.css
index 2e78b44dff..0a56bcfa11 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsStoppageHorizontalBarChart/ToolsStoppageHorizontalBarChart.module.css
+++ b/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsStoppageHorizontalBarChart/ToolsStoppageHorizontalBarChart.module.css
@@ -144,6 +144,21 @@
 
 
 
+/* Override min-height for tools-availability-page when used in card context */
+:global(.tools-availability-page) {
+  min-height: auto !important; /* Override 100vh from ToolsAvailabilityPage.css */
+  height: auto; /* Let content determine height */
+  padding: 8px; /* Remove excessive padding (24px) since card already has padding */
+}
+
+/* Chart container - prevent extra vertical space */
+:global(.tools-horizontal-chart-container) {
+  width: 100%;
+  height: auto; /* Ensure container doesn't force height */
+  display: flex;
+  flex-direction: column;
+}
+
 /* Filter controls layout for small screens */
 @media (width <= 768px) {
   :global(.datepickerWrapper) {

From b2bdd6c68a08863e3637dc936e4a239f89bdae06 Mon Sep 17 00:00:00 2001
From: Aditya Gambhir <67105262+Aditya-gam@users.noreply.github.com>
Date: Tue, 11 Nov 2025 15:29:52 -0800
Subject: [PATCH 08/29] feat: standardize chart heights and improve bar spacing

- Reduce Reason of Stoppage chart height from 600px to 300px
- Add categoryPercentage (0.6) and barPercentage (0.9) to reduce bar spacing
- Replace barThickness with maxBarThickness (25px) for better scaling
- Standardize donut chart height to 300px on desktop, 280px on tablet
- Increase Tools by Availability chart height from 200px to 280px
- All charts now fit on screen without scrolling and have consistent sizing
---
 .../Tools/ToolsStoppageHorizontalBarChart.jsx          | 10 ++++++----
 .../ToolStatusDonutChart/ToolStatusDonutChart.jsx      |  2 +-
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/BMDashboard/Tools/ToolsStoppageHorizontalBarChart.jsx b/src/components/BMDashboard/Tools/ToolsStoppageHorizontalBarChart.jsx
index b9e9fd770a..d32929c607 100644
--- a/src/components/BMDashboard/Tools/ToolsStoppageHorizontalBarChart.jsx
+++ b/src/components/BMDashboard/Tools/ToolsStoppageHorizontalBarChart.jsx
@@ -213,19 +213,19 @@ export default function ToolsStoppageHorizontalBarChart() {
         label: 'Used its lifetime',
         data: data.map(item => item.usedForLifetime || 0),
         backgroundColor: '#4589FF',
-        barThickness: 30,
+        maxBarThickness: 25, // Max thickness, allows scaling
       },
       {
         label: 'Damaged',
         data: data.map(item => item.damaged || 0),
         backgroundColor: '#FF0000',
-        barThickness: 30,
+        maxBarThickness: 25,
       },
       {
         label: 'Lost',
         data: data.map(item => item.lost || 0),
         backgroundColor: '#FFB800',
-        barThickness: 30,
+        maxBarThickness: 25,
       },
     ],
   };
@@ -258,6 +258,8 @@ export default function ToolsStoppageHorizontalBarChart() {
         stacked: true,
         grid: { display: false },
         ticks: { color: darkMode ? '#e0e0e0' : '#000' },
+        categoryPercentage: 0.6, // Reduce spacing between categories (default 0.8)
+        barPercentage: 0.9, // Increase bar width within category (default 0.9)
       },
     },
   };
@@ -318,7 +320,7 @@ export default function ToolsStoppageHorizontalBarChart() {
         {loading && <div className="tools-chart-loading">Loading tool availability data...</div>}
 
         {!loading && selectedProject && data.length > 0 && (
-          <Bar data={chartData} options={chartOptions} height={600} />
+          <Bar data={chartData} options={chartOptions} height={300} />
         )}
 
         {!loading && selectedProject && data.length === 0 && (
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.jsx b/src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.jsx
index 4a595f35a9..9089bca3ac 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.jsx
+++ b/src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.jsx
@@ -214,7 +214,7 @@ export default function ToolStatusDonutChart() {
   } else {
     innerRadius = 35;
     outerRadius = 60;
-    chartHeight = 220;
+    chartHeight = 300;
   }
 
   const wrapperClass = `${styles.toolDonutWrapper} ${darkMode ? styles.toolDonutWrapperDark : ''}`;

From 246a3216bae802879b8c3da14d5727d6fe984604 Mon Sep 17 00:00:00 2001
From: Aditya Gambhir <67105262+Aditya-gam@users.noreply.github.com>
Date: Tue, 11 Nov 2025 16:38:02 -0800
Subject: [PATCH 09/29] feat: make Tools and Equipment Tracking section
 responsive for mobile and tablet

- Add responsive grid layout: 1 column mobile, 2 columns tablet, 4 columns desktop
- Ensure cards span full width on mobile/tablet to prevent squishing
- Reduce spacing and padding on mobile to eliminate empty space
- Add width constraints (100%, max-width: 100%, box-sizing: border-box) to cards
- Ensure filter controls don't overflow on mobile screens
---
 .../WeeklyProjectSummary.module.css                 | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.module.css b/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.module.css
index 36de700a50..c51290dcdf 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.module.css
+++ b/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.module.css
@@ -702,6 +702,19 @@
   .weeklyProjectSummaryDashboardGrid {
     grid-template-columns: repeat(2, 1fr);
   }
+
+  /* Tools and Equipment Tracking - 2 column layout on tablet */
+  .weeklyProjectSummaryDashboardCategoryContent {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 15px;
+    padding: 12px;
+  }
+
+  /* Cards span full width on tablet */
+  .weeklyProjectSummaryDashboardCategoryContent .wideCard,
+  .weeklyProjectSummaryDashboardCategoryContent .normalCard {
+    grid-column: span 2;
+  }
 }
 
 /* Small Screens */

From 2340a6ed916c29f7909c742df9ecc9e86a6e31ce Mon Sep 17 00:00:00 2001
From: Aditya Gambhir <67105262+Aditya-gam@users.noreply.github.com>
Date: Tue, 11 Nov 2025 16:38:12 -0800
Subject: [PATCH 10/29] feat: add responsive sizing to ToolsHorizontalBarChart
 for mobile/tablet

- Add responsive margin calculation (mobile: {5,5,15,5}, tablet: {8,15,25,8}, desktop: {10,30,40,10})
- Add responsive Y-axis width (mobile: 20px, tablet: 28px, desktop: 35px)
- Add responsive font sizes for Y-axis ticks (mobile: 10px, tablet: 11px, desktop: 12px)
- Add width constraints to chart content container (100%, max-width: 100%)
- Add box-sizing: border-box to card container to prevent overflow
- Reduce padding and margins on mobile for better fit
---
 .../Tools/ToolsHorizontalBarChart.jsx         | 58 ++++++++++++++++++-
 .../Tools/ToolsHorizontalBarChart.module.css  | 31 +++++++++-
 2 files changed, 84 insertions(+), 5 deletions(-)

diff --git a/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsHorizontalBarChart.jsx b/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsHorizontalBarChart.jsx
index 25d3101279..d80fb2b058 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsHorizontalBarChart.jsx
+++ b/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsHorizontalBarChart.jsx
@@ -71,6 +71,7 @@ function ToolsHorizontalBarChart({ darkMode: darkModeProp }) {
   const [allTools, setAllTools] = useState([]);
   const [selectedTools, setSelectedTools] = useState([]);
   const [isPreviewHovering, setIsPreviewHovering] = useState(false);
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
 
   const currentDate = new Date();
   const startDate12MonthsAgo = new Date(currentDate.getFullYear() - 1, currentDate.getMonth(), 1);
@@ -79,6 +80,56 @@ function ToolsHorizontalBarChart({ darkMode: darkModeProp }) {
   const [startDate, setStartDate] = useState(startDate12MonthsAgo.toISOString().split('T')[0]);
   const [endDate, setEndDate] = useState(endOfCurrentMonth.toISOString().split('T')[0]);
 
+  // Responsive height calculation
+  useEffect(() => {
+    const handleResize = () => setWindowWidth(window.innerWidth);
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  // Calculate responsive chart height: 240px mobile, 260px tablet, 280px desktop
+  const getChartHeight = () => {
+    if (windowWidth <= 768) {
+      return 240; // Mobile
+    } else if (windowWidth <= 1024) {
+      return 260; // Tablet
+    }
+    return 280; // Desktop
+  };
+
+  // Calculate responsive margins: mobile {5,5,15,5}, tablet {8,15,25,8}, desktop {10,30,40,10}
+  const getChartMargins = () => {
+    if (windowWidth <= 768) {
+      return { top: 5, right: 5, left: 15, bottom: 5 }; // Mobile
+    } else if (windowWidth <= 1024) {
+      return { top: 8, right: 15, left: 25, bottom: 8 }; // Tablet
+    }
+    return { top: 10, right: 30, left: 40, bottom: 10 }; // Desktop
+  };
+
+  // Calculate responsive Y-axis width: mobile 20, tablet 28, desktop 35
+  const getYAxisWidth = () => {
+    if (windowWidth <= 768) {
+      return 20; // Mobile
+    } else if (windowWidth <= 1024) {
+      return 28; // Tablet
+    }
+    return 35; // Desktop
+  };
+
+  // Calculate responsive font size: mobile 10, tablet 11, desktop 12
+  const getYAxisFontSize = () => {
+    if (windowWidth <= 768) {
+      return 10; // Mobile
+    } else if (windowWidth <= 1024) {
+      return 11; // Tablet
+    }
+    return 12; // Desktop
+  };
+
+  // Date range logging removed for production
+
+  // Fetch projects list
   useEffect(() => {
     const fetchProjects = async () => {
       try {
@@ -495,8 +546,11 @@ function ToolsHorizontalBarChart({ darkMode: darkModeProp }) {
               <YAxis
                 type="category"
                 dataKey="name"
-                tick={{ fill: darkMode ? '#e0e0e0' : '#333', fontSize: 12 }}
-                width={80}
+                tick={{
+                  fill: darkMode ? '#e0e0e0' : '#333',
+                  fontSize: getYAxisFontSize(),
+                }}
+                width={getYAxisWidth()}
                 axisLine={false}
                 tickLine={false}
               />
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsHorizontalBarChart.module.css b/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsHorizontalBarChart.module.css
index 46b4ecbfe9..c63d101415 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsHorizontalBarChart.module.css
+++ b/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsHorizontalBarChart.module.css
@@ -11,6 +11,9 @@
   flex-direction: column;
   transition: transform 0.2s ease;
   min-height: 280px; /* Keep min-height for empty/loading states */
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
 }
 
 .tools-horizontal-bar-chart-card:hover {
@@ -42,6 +45,8 @@
   display: flex;
   flex-direction: column;
   min-height: 0;
+  width: 100%;
+  max-width: 100%;
 }
 
 .tools-horizontal-bar-chart-loading {
@@ -228,13 +233,19 @@
 /* Responsive adjustments */
 @media (width <= 768px) {
   .tools-horizontal-bar-chart-card {
-    padding: 12px;
-    min-height: 250px;
+    padding: 10px;
+    min-height: auto; /* Remove fixed min-height to prevent empty space */
+    max-height: none; /* Allow content to determine height */
   }
 
   .tools-horizontal-bar-chart-title {
     font-size: 14px;
-    margin-bottom: 12px;
+    margin-bottom: 10px;
+  }
+  
+  .tools-horizontal-bar-chart-filters {
+    padding: 8px 0;
+    margin-bottom: 10px;
   }
 
   .tools-horizontal-bar-chart-date-picker-group {
@@ -248,3 +259,17 @@
     width: 100%;
   }
 }
+
+  .tools-horizontal-bar-chart-loading,
+  .tools-horizontal-bar-chart-error,
+  .tools-horizontal-bar-chart-empty {
+    height: 180px; /* Reduce height on mobile */
+  }
+
+/* Tablet adjustments */
+@media (min-width: 769px) and (max-width: 1024px) {
+  .tools-horizontal-bar-chart-card {
+    padding: 12px;
+    min-height: auto;
+  }
+} 

From 7cef2c54e3d5a39ebd7eb27a2d6ad986caa0536d Mon Sep 17 00:00:00 2001
From: Aditya Gambhir <67105262+Aditya-gam@users.noreply.github.com>
Date: Tue, 11 Nov 2025 16:38:30 -0800
Subject: [PATCH 11/29] feat: add responsive sizing to
 ToolsStoppageHorizontalBarChart for mobile/tablet

- Add responsive Chart.js options: maxBarThickness, categoryPercentage, barPercentage
- Add responsive font sizes for scales, legend, and datalabels based on screen width
- Wrap Chart.js Bar component in constrained container div to prevent overflow
- Add Bootstrap Row/Col responsive fixes for mobile (full width, proper padding)
- Add width constraints (100%, max-width: 100%) to chart container
- Reduce title font size on mobile for better fit
- Ensure filter controls stack vertically and don't overflow on mobile
---
 .../Tools/ToolsStoppageHorizontalBarChart.jsx | 111 ++++++++++++++++--
 ...ToolsStoppageHorizontalBarChart.module.css |  64 ++++++++--
 2 files changed, 153 insertions(+), 22 deletions(-)

diff --git a/src/components/BMDashboard/Tools/ToolsStoppageHorizontalBarChart.jsx b/src/components/BMDashboard/Tools/ToolsStoppageHorizontalBarChart.jsx
index d32929c607..9208b51ff4 100644
--- a/src/components/BMDashboard/Tools/ToolsStoppageHorizontalBarChart.jsx
+++ b/src/components/BMDashboard/Tools/ToolsStoppageHorizontalBarChart.jsx
@@ -40,8 +40,76 @@ export default function ToolsStoppageHorizontalBarChart() {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
   const [data, setData] = useState([]);
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
   const emptyData = [];
 
+  // Responsive height calculation
+  useEffect(() => {
+    const handleResize = () => setWindowWidth(window.innerWidth);
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  // Calculate responsive chart height: 240px mobile, 280px tablet, 300px desktop
+  const getChartHeight = () => {
+    if (windowWidth <= 768) {
+      return 240; // Mobile
+    } else if (windowWidth <= 1024) {
+      return 280; // Tablet
+    }
+    return 300; // Desktop
+  };
+
+  // Calculate responsive maxBarThickness: mobile 20, tablet 22, desktop 25
+  const getMaxBarThickness = () => {
+    if (windowWidth <= 768) {
+      return 20; // Mobile
+    } else if (windowWidth <= 1024) {
+      return 22; // Tablet
+    }
+    return 25; // Desktop
+  };
+
+  // Calculate responsive categoryPercentage: mobile 0.5, tablet 0.55, desktop 0.6
+  const getCategoryPercentage = () => {
+    if (windowWidth <= 768) {
+      return 0.5; // Mobile
+    } else if (windowWidth <= 1024) {
+      return 0.55; // Tablet
+    }
+    return 0.6; // Desktop
+  };
+
+  // Calculate responsive barPercentage: mobile 0.85, tablet 0.87, desktop 0.9
+  const getBarPercentage = () => {
+    if (windowWidth <= 768) {
+      return 0.85; // Mobile
+    } else if (windowWidth <= 1024) {
+      return 0.87; // Tablet
+    }
+    return 0.9; // Desktop
+  };
+
+  // Calculate responsive font size: mobile 10, tablet 11, desktop 12
+  const getFontSize = () => {
+    if (windowWidth <= 768) {
+      return 10; // Mobile
+    } else if (windowWidth <= 1024) {
+      return 11; // Tablet
+    }
+    return 12; // Desktop
+  };
+
+  // Calculate responsive title font size: mobile 11, tablet 12, desktop 14
+  const getTitleFontSize = () => {
+    if (windowWidth <= 768) {
+      return 11; // Mobile
+    } else if (windowWidth <= 1024) {
+      return 12; // Tablet
+    }
+    return 14; // Desktop
+  };
+
   useEffect(() => {
     const fetchProjects = async () => {
       setLoading(true);
@@ -203,7 +271,7 @@ export default function ToolsStoppageHorizontalBarChart() {
     }),
   };
 
-  // ✅ Prepare Chart.js data
+  // Prepare Chart.js data with responsive bar thickness
   const chartData = {
     labels: data.map(item =>
       item.name.length > 20 ? `${item.name.substring(0, 18)}...` : item.name,
@@ -213,24 +281,24 @@ export default function ToolsStoppageHorizontalBarChart() {
         label: 'Used its lifetime',
         data: data.map(item => item.usedForLifetime || 0),
         backgroundColor: '#4589FF',
-        maxBarThickness: 25, // Max thickness, allows scaling
+        maxBarThickness: getMaxBarThickness(),
       },
       {
         label: 'Damaged',
         data: data.map(item => item.damaged || 0),
         backgroundColor: '#FF0000',
-        maxBarThickness: 25,
+        maxBarThickness: getMaxBarThickness(),
       },
       {
         label: 'Lost',
         data: data.map(item => item.lost || 0),
         backgroundColor: '#FFB800',
-        maxBarThickness: 25,
+        maxBarThickness: getMaxBarThickness(),
       },
     ],
   };
 
-  // ✅ Chart.js options for horizontal stacked bars
+  // Chart.js options for horizontal stacked bars with responsive settings
   const chartOptions = {
     indexAxis: 'y',
     maintainAspectRatio: false,
@@ -238,28 +306,43 @@ export default function ToolsStoppageHorizontalBarChart() {
     plugins: {
       legend: {
         position: 'top',
-        labels: { color: darkMode ? '#e0e0e0' : '#000' },
+        labels: {
+          color: darkMode ? '#e0e0e0' : '#000',
+          font: { size: getFontSize() },
+        },
       },
       tooltip: { enabled: true, color: darkMode ? '#FFFFFF' : '#000000' },
       datalabels: {
         display: true,
         color: '#fff',
-        font: { weight: 'bold' },
+        font: { weight: 'bold', size: getFontSize() },
       },
     },
     scales: {
       x: {
         stacked: true,
         grid: { color: darkMode ? '#364156' : '#e0e0e0' },
-        ticks: { color: darkMode ? '#e0e0e0' : '#000' },
+        ticks: {
+          color: darkMode ? '#e0e0e0' : '#000',
+          font: { size: getFontSize() },
+          maxRotation: 0,
+        },
       },
       y: {
-        title: { display: true, text: 'Tools', color: darkMode ? '#FFFFFF' : '#000000' },
+        title: {
+          display: true,
+          text: 'Tools',
+          color: darkMode ? '#FFFFFF' : '#000000',
+          font: { size: getTitleFontSize() },
+        },
         stacked: true,
         grid: { display: false },
-        ticks: { color: darkMode ? '#e0e0e0' : '#000' },
-        categoryPercentage: 0.6, // Reduce spacing between categories (default 0.8)
-        barPercentage: 0.9, // Increase bar width within category (default 0.9)
+        ticks: {
+          color: darkMode ? '#e0e0e0' : '#000',
+          font: { size: getFontSize() },
+        },
+        categoryPercentage: getCategoryPercentage(),
+        barPercentage: getBarPercentage(),
       },
     },
   };
@@ -320,7 +403,9 @@ export default function ToolsStoppageHorizontalBarChart() {
         {loading && <div className="tools-chart-loading">Loading tool availability data...</div>}
 
         {!loading && selectedProject && data.length > 0 && (
-          <Bar data={chartData} options={chartOptions} height={300} />
+          <div style={{ width: '100%', maxWidth: '100%', position: 'relative' }}>
+            <Bar data={chartData} options={chartOptions} height={getChartHeight()} />
+          </div>
         )}
 
         {!loading && selectedProject && data.length === 0 && (
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsStoppageHorizontalBarChart/ToolsStoppageHorizontalBarChart.module.css b/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsStoppageHorizontalBarChart/ToolsStoppageHorizontalBarChart.module.css
index 0a56bcfa11..875c71c31b 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsStoppageHorizontalBarChart/ToolsStoppageHorizontalBarChart.module.css
+++ b/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsStoppageHorizontalBarChart/ToolsStoppageHorizontalBarChart.module.css
@@ -144,27 +144,60 @@
 
 
 
-/* Override min-height for tools-availability-page when used in card context */
-:global(.tools-availability-page) {
-  min-height: auto !important; /* Override 100vh from ToolsAvailabilityPage.css */
-  height: auto; /* Let content determine height */
-  padding: 8px; /* Remove excessive padding (24px) since card already has padding */
-}
-
 /* Chart container - prevent extra vertical space */
 :global(.tools-horizontal-chart-container) {
   width: 100%;
+  max-width: 100%;
   height: auto; /* Ensure container doesn't force height */
   display: flex;
   flex-direction: column;
+  box-sizing: border-box;
+}
+
+/* Override min-height for tools-availability-page when used in card context */
+:global(.tools-availability-page) {
+  min-height: auto !important; /* Override 100vh from ToolsAvailabilityPage.css */
+  height: auto; /* Let content determine height */
+  padding: 8px; /* Remove excessive padding (24px) since card already has padding */
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
 }
 
 /* Filter controls layout for small screens */
-@media (width <= 768px) {
+@media (max-width: 768px) {
+  :global(.tools-availability-page) {
+    padding: 6px; /* Further reduce padding on mobile */
+  }
+
+  :global(.tools-chart-title) {
+    font-size: 0.9rem;
+    margin-bottom: 0.8rem;
+  }
+
+  /* Bootstrap Row/Col fixes for mobile */
+  :global(.tools-availability-page .row) {
+    width: 100%;
+    max-width: 100%;
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  :global(.tools-availability-page .col),
+  :global(.tools-availability-page [class*='col-']) {
+    width: 100%;
+    max-width: 100%;
+    padding-left: 8px;
+    padding-right: 8px;
+    margin-bottom: 8px;
+  }
+
   :global(.datepickerWrapper) {
     display: flex;
     flex-direction: column;
     align-items: stretch;
+    width: 100%;
+    max-width: 100%;
   }
 
   :global(.datepickerWrapper .btn) {
@@ -173,10 +206,23 @@
   }
 
   :global(.customSelect__control) {
-    font-size: 1rem;
+    font-size: 10px;
+    width: 100%;
+    max-width: 100%;
   }
 
   :global(.customSelect__multi-value) {
     font-size: 1rem;
   }
 }
+
+  :global(.tools-horizontal-chart-container) {
+    padding: 0;
+  }
+
+/* Tablet adjustments */
+@media (min-width: 769px) and (max-width: 1024px) {
+  :global(.tools-availability-page) {
+    padding: 10px;
+  }
+}

From 5a53b08f702bbfbc09f6dcb092d36a4a457c0e5c Mon Sep 17 00:00:00 2001
From: Aditya Gambhir <67105262+Aditya-gam@users.noreply.github.com>
Date: Tue, 11 Nov 2025 16:39:17 -0800
Subject: [PATCH 12/29] feat: add responsive sizing to ToolStatusDonutChart for
 mobile/tablet

- Add responsive margin calculation (mobile: {20,20,20,20}, tablet: {25,25,30,30}, desktop: {30,30,40,40})
- Add responsive font size for center text (mobile: 10px, tablet: 12px, desktop: 14px)
- Remove max-width: 400px constraint and add width: 100%, max-width: 100%
- Add box-sizing: border-box to wrapper for proper sizing
- Reduce spacing and font sizes on mobile for better readability
- Ensure chart fits within viewport without overflow
---
 .../ToolStatusDonutChart.css                  | 49 ++++++++++++++++++-
 .../ToolStatusDonutChart.jsx                  |  5 +-
 2 files changed, 50 insertions(+), 4 deletions(-)

diff --git a/src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.css b/src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.css
index cd93683818..92591361b7 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.css
+++ b/src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.css
@@ -2,12 +2,13 @@
   --donut-text-color: #000;
   --legend-text-color: #000;
   width: 100%;
-  max-width: 400px;
+  max-width: 100%;
   margin: 0 auto;
   text-align: center;
   height: auto; /* Ensure wrapper doesn't stretch */
   display: flex;
   flex-direction: column; /* Stack content vertically */
+  box-sizing: border-box;
 }
 
 .dark-mode.tool-donut-wrapper {
@@ -111,4 +112,50 @@
     flex: 1 1 100%;
     max-width: 100%;
   }
+
+  /* Mobile adjustments for donut chart */
+  .tool-donut-wrapper {
+    max-width: 100%;
+    padding: 0;
+  }
+
+  .tool-donut-title {
+    font-size: 1rem;
+    margin-bottom: 0.8rem;
+  }
+
+  .tool-donut-filters {
+    gap: 1.5rem;
+    margin-bottom: 1rem;
+  }
+
+  .filter-item {
+    font-size: 12px;
+  }
+
+  .filter-label {
+    font-size: 12px;
+  }
+
+  .tool-donut-legend {
+    margin-top: 0.8rem;
+    gap: 0.4rem;
+  }
+
+  .tool-donut-legend-item {
+    font-size: 12px;
+    padding: 5px 12px;
+    min-width: 120px;
+  }
+}
+
+/* Tablet adjustments */
+@media (min-width: 769px) and (max-width: 1024px) {
+  .tool-donut-wrapper {
+    max-width: 100%;
+  }
+
+  .tool-donut-filters {
+    gap: 2rem;
+  }
 }
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.jsx b/src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.jsx
index 9089bca3ac..251603feb0 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.jsx
+++ b/src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.jsx
@@ -13,8 +13,8 @@ const COLORS = {
 
 const RADIAN = Math.PI / 180;
 const renderCustomizedLabel = ({ cx, cy, midAngle, outerRadius, percent, width }) => {
-  const isSmall = width <= 768;
-  if (isSmall) return null;
+  // Hide labels on mobile/tablet for better readability
+  if (width <= 1024) return null;
 
   const radius = outerRadius + 20;
   const x = cx + radius * Math.cos(-midAngle * RADIAN);
@@ -162,7 +162,6 @@ export default function ToolStatusDonutChart() {
     return () => window.removeEventListener('resize', handleResize);
   }, []);
 
-  const isXS = windowWidth <= 480;
   const chartData = availabilityData?.data || [];
   const total = availabilityData?.total || 0;
 

From 781af06fafa989c46be2c3060b333921009f16e3 Mon Sep 17 00:00:00 2001
From: Aditya Gambhir <67105262+Aditya-gam@users.noreply.github.com>
Date: Fri, 5 Dec 2025 13:55:05 -0800
Subject: [PATCH 13/29] fix: improve ToolsStoppageHorizontalBarChart background
 and axis visibility

- Fix grey background in light mode: Add white background (#ffffff) to tools-availability-page and chart containers to match other charts in Tools and Equipment Tracking section
- Fix axis visibility in dark mode: Change axis border and tick colors from #e0e0e0 to #ffffff for better contrast and visibility
- Add !important flags to ensure background colors override parent card styles
- Add background styling to chart container wrapper divs to cover entire chart area including legend
---
 .../Tools/ToolsStoppageHorizontalBarChart.jsx | 23 ++++++++++++++++---
 ...ToolsStoppageHorizontalBarChart.module.css | 21 +++++++++++++++++
 2 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/src/components/BMDashboard/Tools/ToolsStoppageHorizontalBarChart.jsx b/src/components/BMDashboard/Tools/ToolsStoppageHorizontalBarChart.jsx
index 9208b51ff4..bcacdf538d 100644
--- a/src/components/BMDashboard/Tools/ToolsStoppageHorizontalBarChart.jsx
+++ b/src/components/BMDashboard/Tools/ToolsStoppageHorizontalBarChart.jsx
@@ -322,8 +322,12 @@ export default function ToolsStoppageHorizontalBarChart() {
       x: {
         stacked: true,
         grid: { color: darkMode ? '#364156' : '#e0e0e0' },
+        border: {
+          color: darkMode ? '#ffffff' : '#000000', // Make axis border visible in dark mode
+          width: 1,
+        },
         ticks: {
-          color: darkMode ? '#e0e0e0' : '#000',
+          color: darkMode ? '#ffffff' : '#000', // Brighter color in dark mode for better visibility
           font: { size: getFontSize() },
           maxRotation: 0,
         },
@@ -337,8 +341,12 @@ export default function ToolsStoppageHorizontalBarChart() {
         },
         stacked: true,
         grid: { display: false },
+        border: {
+          color: darkMode ? '#ffffff' : '#000000', // Make axis border visible in dark mode
+          width: 1,
+        },
         ticks: {
-          color: darkMode ? '#e0e0e0' : '#000',
+          color: darkMode ? '#ffffff' : '#000', // Brighter color in dark mode for better visibility
           font: { size: getFontSize() },
         },
         categoryPercentage: getCategoryPercentage(),
@@ -403,7 +411,16 @@ export default function ToolsStoppageHorizontalBarChart() {
         {loading && <div className="tools-chart-loading">Loading tool availability data...</div>}
 
         {!loading && selectedProject && data.length > 0 && (
-          <div style={{ width: '100%', maxWidth: '100%', position: 'relative' }}>
+          <div
+            style={{
+              width: '100%',
+              maxWidth: '100%',
+              position: 'relative',
+              backgroundColor: darkMode ? '#2c3344' : '#ffffff',
+              borderRadius: '4px',
+              padding: '8px',
+            }}
+          >
             <Bar data={chartData} options={chartOptions} height={getChartHeight()} />
           </div>
         )}
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsStoppageHorizontalBarChart/ToolsStoppageHorizontalBarChart.module.css b/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsStoppageHorizontalBarChart/ToolsStoppageHorizontalBarChart.module.css
index 875c71c31b..24c937b71f 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsStoppageHorizontalBarChart/ToolsStoppageHorizontalBarChart.module.css
+++ b/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsStoppageHorizontalBarChart/ToolsStoppageHorizontalBarChart.module.css
@@ -152,6 +152,21 @@
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
+  background-color: #ffffff !important; /* White background to show through transparent canvas */
+}
+
+/* Dark mode for chart container */
+:global(.tools-availability-page.dark-mode .tools-horizontal-chart-container) {
+  background-color: #2c3344 !important;
+}
+
+/* Ensure Chart.js canvas wrapper has background */
+:global(.tools-horizontal-chart-container > div) {
+  background-color: #ffffff !important;
+}
+
+:global(.tools-availability-page.dark-mode .tools-horizontal-chart-container > div) {
+  background-color: #2c3344 !important;
 }
 
 /* Override min-height for tools-availability-page when used in card context */
@@ -162,6 +177,12 @@
   width: 100%;
   max-width: 100%;
   box-sizing: border-box;
+  background-color: #ffffff !important; /* White background in light mode to prevent grey parent card background from showing through - !important to override any conflicting styles */
+}
+
+/* Dark mode background for tools-availability-page */
+:global(.tools-availability-page.dark-mode) {
+  background-color: #2c3344 !important; /* Dark background in dark mode */
 }
 
 /* Filter controls layout for small screens */

From b35adefbc7062abd779e55f446d9d4e8c9f22739 Mon Sep 17 00:00:00 2001
From: Aditya Gambhir <67105262+Aditya-gam@users.noreply.github.com>
Date: Sat, 6 Dec 2025 12:23:05 -0800
Subject: [PATCH 14/29] fix(tools-charts): improve responsive design and height
 matching in Tools section

- Add responsive breakpoint at 1366px for better chart visibility on medium screens
- Standardize chart heights across all three Tools charts (240px/280px/300px)
- Fix height matching so donut chart determines section height, other charts adapt
- Remove conflicting dark mode CSS overrides for react-select dropdowns
- Standardize all dropdowns to use consistent react-select dark mode styles
- Convert ToolStatusDonutChart native selects to react-select with proper theming
- Fix ToolStatusDonutChart to use unfiltered toolslist for options to prevent disappearing selections
- Ensure all charts stretch or shrink to match donut chart's natural height
- Remove min-height constraints that prevented proper height matching
---
 .../Tools/ToolsStoppageHorizontalBarChart.jsx |  84 ++++++-
 .../ToolStatusDonutChart.css                  |  19 ++
 .../ToolStatusDonutChart.jsx                  | 226 +++++++++++++-----
 .../Tools/ToolsHorizontalBarChart.jsx         |   7 +-
 .../Tools/ToolsHorizontalBarChart.module.css  |   4 +-
 ...ToolsStoppageHorizontalBarChart.module.css |  51 ++--
 .../WeeklyProjectSummary.module.css           |  49 +++-
 7 files changed, 349 insertions(+), 91 deletions(-)

diff --git a/src/components/BMDashboard/Tools/ToolsStoppageHorizontalBarChart.jsx b/src/components/BMDashboard/Tools/ToolsStoppageHorizontalBarChart.jsx
index bcacdf538d..56b392c9b8 100644
--- a/src/components/BMDashboard/Tools/ToolsStoppageHorizontalBarChart.jsx
+++ b/src/components/BMDashboard/Tools/ToolsStoppageHorizontalBarChart.jsx
@@ -246,28 +246,83 @@ export default function ToolsStoppageHorizontalBarChart() {
   const dateRangeLabel =
     startDate && endDate ? `${formatDate(startDate)} - ${formatDate(endDate)}` : '';
 
-  const selectDarkStyles = {
+  // Consistent react-select styles matching paid-labor-cost pattern
+  const selectStyles = {
     control: base => ({
       ...base,
-      backgroundColor: '#2c3344',
-      borderColor: '#364156',
+      minHeight: '38px',
+      fontSize: '12px',
+      backgroundColor: darkMode ? '#253342' : '#fff',
+      borderColor: darkMode ? '#2d4059' : '#ccc',
+      color: darkMode ? '#ffffff' : '#000',
+      boxShadow: 'none',
+      borderRadius: '6px',
+      '&:hover': {
+        borderColor: darkMode ? '#2d4059' : '#999',
+      },
+    }),
+    valueContainer: base => ({
+      ...base,
+      padding: '2px 8px',
+      color: darkMode ? '#ffffff' : '#000',
+    }),
+    input: base => ({
+      ...base,
+      margin: '0px',
+      padding: '0px',
+      color: darkMode ? '#ffffff' : '#000',
+    }),
+    indicatorsContainer: base => ({
+      ...base,
+      padding: '0 4px',
     }),
     menu: base => ({
       ...base,
-      backgroundColor: '#2c3344',
+      backgroundColor: darkMode ? '#253342' : '#fff',
+      fontSize: '12px',
     }),
     option: (base, state) => ({
       ...base,
-      backgroundColor: state.isFocused ? '#364156' : '#2c3344',
-      color: '#e0e0e0',
+      backgroundColor: state.isSelected
+        ? darkMode
+          ? '#e8a71c'
+          : '#0d55b3'
+        : state.isFocused
+        ? darkMode
+          ? '#3a506b'
+          : '#f0f0f0'
+        : darkMode
+        ? '#253342'
+        : '#fff',
+      color: state.isSelected ? (darkMode ? '#000' : '#fff') : darkMode ? '#ffffff' : '#000',
+      cursor: 'pointer',
+      padding: '8px 12px',
+      fontSize: '12px',
+      ':active': {
+        backgroundColor: darkMode ? '#3a506b' : '#e0e0e0',
+      },
     }),
     singleValue: base => ({
       ...base,
-      color: '#e0e0e0',
+      color: darkMode ? '#ffffff' : '#000',
+      fontSize: '12px',
     }),
     placeholder: base => ({
       ...base,
-      color: '#aaaaaa',
+      color: darkMode ? '#aaaaaa' : '#666',
+      fontSize: '12px',
+    }),
+    indicatorSeparator: base => ({
+      ...base,
+      backgroundColor: darkMode ? '#2d4059' : '#ccc',
+    }),
+    dropdownIndicator: base => ({
+      ...base,
+      color: darkMode ? '#ffffff' : '#999',
+      padding: '4px',
+      ':hover': {
+        color: darkMode ? '#ffffff' : '#666',
+      },
     }),
   };
 
@@ -389,7 +444,7 @@ export default function ToolsStoppageHorizontalBarChart() {
             placeholder="Select a project ID to view data"
             isClearable={false}
             isDisabled={projects.length === 0}
-            styles={darkMode ? selectDarkStyles : {}}
+            styles={selectStyles}
           />
         </Col>
         <Col xs={12} md={2}>
@@ -415,13 +470,22 @@ export default function ToolsStoppageHorizontalBarChart() {
             style={{
               width: '100%',
               maxWidth: '100%',
+              flex: 1,
+              display: 'flex',
+              flexDirection: 'column',
+              justifyContent: 'center',
+              alignItems: 'stretch',
               position: 'relative',
               backgroundColor: darkMode ? '#2c3344' : '#ffffff',
               borderRadius: '4px',
               padding: '8px',
+              /* Allow container to shrink to match donut chart height */
+              minHeight: 0,
             }}
           >
-            <Bar data={chartData} options={chartOptions} height={getChartHeight()} />
+            <div style={{ flex: 1, display: 'flex', alignItems: 'center' }}>
+              <Bar data={chartData} options={chartOptions} height={getChartHeight()} />
+            </div>
           </div>
         )}
 
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.css b/src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.css
index 92591361b7..528fdf13a0 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.css
+++ b/src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.css
@@ -22,6 +22,7 @@
   margin-bottom: 1.2rem;
   font-size: 1.1rem;
   color: var(--donut-text-color);
+  flex-shrink: 0;
 }
 
 .tool-donut-filters {
@@ -30,6 +31,7 @@
   flex-wrap: wrap;
   gap: 3rem;
   margin-bottom: 1.5rem;
+  flex-shrink: 0;
 }
 
 .filter-item {
@@ -38,12 +40,28 @@
   align-items: center;
   font-size: 14px;
   text-align: center;
+  min-width: 200px;
+  width: 100%;
+  max-width: 100%;
 }
 
 .filter-label {
   font-weight: 600;
   font-size: 14px;
   color: var(--donut-text-color);
+  margin-bottom: 4px;
+  width: 100%;
+}
+
+.tool-donut-select {
+  width: 100%;
+  max-width: 100%;
+}
+
+.tool-donut-chart-container {
+  flex-shrink: 0;
+  width: 100%;
+  margin: 0 auto;
 }
 
 .filter-value {
@@ -61,6 +79,7 @@
   margin-top: 1rem;
   gap: 0.5rem;
   width: 100%;
+  flex-shrink: 0;
 }
 
 .tool-donut-legend-item {
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.jsx b/src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.jsx
index 251603feb0..1c0f38b70a 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.jsx
+++ b/src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.jsx
@@ -1,6 +1,7 @@
-import { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
+import { useState, useEffect, useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+import Select from 'react-select';
 import { PieChart, Pie, Cell, Tooltip, ResponsiveContainer } from 'recharts';
 import { fetchToolAvailability, fetchTools } from '../../../../actions/bmdashboard/toolActions';
 import styles from './ToolStatusDonutChart.module.css';
@@ -165,54 +166,157 @@ export default function ToolStatusDonutChart() {
   const chartData = availabilityData?.data || [];
   const total = availabilityData?.total || 0;
 
-  // Check if we have no data for the selected combination
-  const hasNoData = (toolId || projectId) && chartData.length === 0 && total === 0;
-  const hasNoToolsMatch = total === 0;
-
-  // Use the stored initial data for dropdowns, or fall back to current data
-  const dropdownData = allToolsData || availabilityData;
-  const toolsFromDropdown = dropdownData?.tools || [];
-  const allAvailableTools =
-    Array.isArray(toolsFromDropdown) && toolsFromDropdown.length
-      ? toolsFromDropdown
-      : toolslist || [];
-
-  // Get all unique projects from the combined data
-  const uniqueProjects = Array.from(
-    new Map(
-      allAvailableTools
-        .filter(t => t?.projectId)
-        .map(t => [t.projectId, { id: t.projectId, name: t.projectName || 'Unnamed Project' }]),
-    ).values(),
+  // Use unfiltered toolslist for options to prevent options disappearing after selection
+  // availabilityData is only used for chart data, not for building dropdown options
+  const uniqueProjects = useMemo(
+    () =>
+      Array.from(
+        new Map(
+          toolslist
+            .filter(t => t?.projectId)
+            .map(t => [t.projectId, { id: t.projectId, name: t.projectName || 'Unnamed Project' }]),
+        ).values(),
+      ),
+    [toolslist],
   );
 
-  // Get all unique tools from the combined data
-  const uniqueTools = Array.from(
-    new Map(
-      allAvailableTools
-        .filter(t => t?.toolId)
-        .map(t => [t.toolId, { id: t.toolId, name: t.name || 'Unnamed Tool' }]),
-    ).values(),
+  const uniqueTools = useMemo(
+    () =>
+      Array.from(
+        new Map(
+          toolslist
+            .filter(t => t?.toolId)
+            .map(t => [t.toolId, { id: t.toolId, name: t.name || 'Unnamed Tool' }]),
+        ).values(),
+      ),
+    [toolslist],
   );
 
-  // Get the selected tool name
-  const selectedTool = uniqueTools.find(tool => tool.id === toolId);
-  const toolName = selectedTool ? selectedTool.name : null;
+  // Build react-select option lists
+  const projectOptions = useMemo(
+    () => [
+      { label: 'All', value: '' },
+      ...uniqueProjects.map(project => ({
+        label: project.name,
+        value: project.id,
+      })),
+    ],
+    [uniqueProjects],
+  );
+
+  const toolOptions = useMemo(
+    () => [
+      { label: 'All', value: '' },
+      ...uniqueTools.map(tool => ({
+        label: tool.name,
+        value: tool.id,
+      })),
+    ],
+    [uniqueTools],
+  );
 
+  // Consistent react-select styles matching paid-labor-cost pattern
+  const selectStyles = useMemo(
+    () => ({
+      control: base => ({
+        ...base,
+        minHeight: '38px',
+        fontSize: '12px',
+        backgroundColor: darkMode ? '#253342' : '#fff',
+        borderColor: darkMode ? '#2d4059' : '#ccc',
+        color: darkMode ? '#ffffff' : '#000',
+        boxShadow: 'none',
+        borderRadius: '6px',
+        '&:hover': {
+          borderColor: darkMode ? '#2d4059' : '#999',
+        },
+      }),
+      valueContainer: base => ({
+        ...base,
+        padding: '2px 8px',
+        color: darkMode ? '#ffffff' : '#000',
+      }),
+      input: base => ({
+        ...base,
+        margin: '0px',
+        padding: '0px',
+        color: darkMode ? '#ffffff' : '#000',
+      }),
+      indicatorsContainer: base => ({
+        ...base,
+        padding: '0 4px',
+      }),
+      menu: base => ({
+        ...base,
+        backgroundColor: darkMode ? '#253342' : '#fff',
+        fontSize: '12px',
+      }),
+      option: (base, state) => ({
+        ...base,
+        backgroundColor: state.isSelected
+          ? darkMode
+            ? '#e8a71c'
+            : '#0d55b3'
+          : state.isFocused
+          ? darkMode
+            ? '#3a506b'
+            : '#f0f0f0'
+          : darkMode
+          ? '#253342'
+          : '#fff',
+        color: state.isSelected ? (darkMode ? '#000' : '#fff') : darkMode ? '#ffffff' : '#000',
+        cursor: 'pointer',
+        padding: '8px 12px',
+        fontSize: '12px',
+        ':active': {
+          backgroundColor: darkMode ? '#3a506b' : '#e0e0e0',
+        },
+      }),
+      singleValue: base => ({
+        ...base,
+        color: darkMode ? '#ffffff' : '#000',
+        fontSize: '12px',
+      }),
+      placeholder: base => ({
+        ...base,
+        color: darkMode ? '#aaaaaa' : '#666',
+        fontSize: '12px',
+      }),
+      indicatorSeparator: base => ({
+        ...base,
+        backgroundColor: darkMode ? '#2d4059' : '#ccc',
+      }),
+      dropdownIndicator: base => ({
+        ...base,
+        color: darkMode ? '#ffffff' : '#999',
+        padding: '4px',
+        ':hover': {
+          color: darkMode ? '#ffffff' : '#666',
+        },
+      }),
+    }),
+    [darkMode],
+  );
+
+  // Responsive sizing standardized to match tallest chart: 240px mobile, 280px tablet, 300px desktop
   let innerRadius;
   let outerRadius;
   let chartHeight;
-  if (isXS) {
-    innerRadius = 25;
-    outerRadius = 40;
-    chartHeight = 180;
-  } else if (windowWidth <= 768) {
-    innerRadius = 30;
-    outerRadius = 50;
-    chartHeight = 200;
+  const isSmall = windowWidth <= 768;
+  if (windowWidth <= 768) {
+    // Mobile
+    innerRadius = 40;
+    outerRadius = 65;
+    chartHeight = 240;
+  } else if (windowWidth <= 1024) {
+    // Tablet
+    innerRadius = 50;
+    outerRadius = 80;
+    chartHeight = 280;
   } else {
-    innerRadius = 35;
-    outerRadius = 60;
+    // Desktop
+    innerRadius = 70;
+    outerRadius = 100;
     chartHeight = 300;
   }
 
@@ -226,32 +330,34 @@ export default function ToolStatusDonutChart() {
           <label htmlFor="tool-select" className={styles.filterLabel}>
             Tool/Equipment Name
           </label>
-          <select id="tool-select" value={toolId} onChange={e => setToolId(e.target.value)}>
-            <option value="">All</option>
-            {uniqueTools.map(tool => (
-              <option key={`tool-${tool.id}`} value={tool.id}>
-                {tool.name}
-              </option>
-            ))}
-          </select>
+          <Select
+            inputId="tool-select"
+            className="tool-donut-select"
+            classNamePrefix="select"
+            options={toolOptions}
+            value={toolOptions.find(option => option.value === toolId) || toolOptions[0]}
+            onChange={selected => setToolId(selected ? selected.value : '')}
+            isClearable={false}
+            placeholder="All"
+            styles={selectStyles}
+          />
         </div>
 
         <div className={styles.filterItem}>
           <label htmlFor="project-select" className={styles.filterLabel}>
             Project
           </label>
-          <select
-            id="project-select"
-            value={projectId}
-            onChange={e => setProjectId(e.target.value)}
-          >
-            <option value="">All</option>
-            {uniqueProjects.map(project => (
-              <option key={`project-${project.id}`} value={project.id}>
-                {project.name}
-              </option>
-            ))}
-          </select>
+          <Select
+            inputId="project-select"
+            className="tool-donut-select"
+            classNamePrefix="select"
+            options={projectOptions}
+            value={projectOptions.find(option => option.value === projectId) || projectOptions[0]}
+            onChange={selected => setProjectId(selected ? selected.value : '')}
+            isClearable={false}
+            placeholder="All"
+            styles={selectStyles}
+          />
         </div>
       </div>
 
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsHorizontalBarChart.jsx b/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsHorizontalBarChart.jsx
index d80fb2b058..99fc68b785 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsHorizontalBarChart.jsx
+++ b/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsHorizontalBarChart.jsx
@@ -87,14 +87,15 @@ function ToolsHorizontalBarChart({ darkMode: darkModeProp }) {
     return () => window.removeEventListener('resize', handleResize);
   }, []);
 
-  // Calculate responsive chart height: 240px mobile, 260px tablet, 280px desktop
+  // Calculate responsive chart height: 240px mobile, 280px tablet, 300px desktop
+  // Standardized to match tallest chart (ToolsStoppageHorizontalBarChart)
   const getChartHeight = () => {
     if (windowWidth <= 768) {
       return 240; // Mobile
     } else if (windowWidth <= 1024) {
-      return 260; // Tablet
+      return 280; // Tablet
     }
-    return 280; // Desktop
+    return 300; // Desktop
   };
 
   // Calculate responsive margins: mobile {5,5,15,5}, tablet {8,15,25,8}, desktop {10,30,40,10}
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsHorizontalBarChart.module.css b/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsHorizontalBarChart.module.css
index c63d101415..67c81ddacf 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsHorizontalBarChart.module.css
+++ b/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsHorizontalBarChart.module.css
@@ -5,12 +5,12 @@
   background-color: var(--card-bg, #fff);
   border-radius: 8px;
   padding: 16px;
-  height: auto; /* Let card size to content instead of stretching to 100% */
+  height: 100%; /* Fill parent card height - will match grid row height */
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   display: flex;
   flex-direction: column;
   transition: transform 0.2s ease;
-  min-height: 280px; /* Keep min-height for empty/loading states */
+  min-height: 0; /* Allow card to shrink to match donut chart height */
   width: 100%;
   max-width: 100%;
   box-sizing: border-box;
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsStoppageHorizontalBarChart/ToolsStoppageHorizontalBarChart.module.css b/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsStoppageHorizontalBarChart/ToolsStoppageHorizontalBarChart.module.css
index 24c937b71f..04af465ace 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsStoppageHorizontalBarChart/ToolsStoppageHorizontalBarChart.module.css
+++ b/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsStoppageHorizontalBarChart/ToolsStoppageHorizontalBarChart.module.css
@@ -103,31 +103,33 @@
   border-radius: 50%;
 }
 
-/* Dark mode for multi select */
+/* Dark mode for react-select - consistent with paid-labor-cost pattern */
 :global(.darkTheme .customSelect__control) {
-  background-color: #fff!important;
-  color: #000!important;
-  border-color: #ccc!important;
-  font-size: 1rem!important;
+  background-color: #253342 !important;
+  border-color: #2d4059 !important;
+  color: #ffffff !important;
+  font-size: 10px !important;
 }
 
 :global(.darkTheme .customSelect__menu) {
-  background-color: #2b3e59!important;
-  border-color: #666!important;
-  color: #fff!important;
+  background-color: #253342 !important;
+  border-color: #2d4059 !important;
+  color: #ffffff !important;
 }
 
 :global(.darkTheme .customSelect__option) {
-  background-color: #2b3e59!important;
-  color: #fff!important;
+  background-color: #253342 !important;
+  color: #ffffff !important;
 }
 
 :global(.darkTheme .customSelect__option--is-focused) {
-  background-color: #6c757d!important;
+  background-color: #3a506b !important;
+  color: #ffffff !important;
 }
 
 :global(.darkTheme .customSelect__option--is-selected) {
-  background-color: #007bff!important;
+  background-color: #e8a71c !important;
+  color: #000000 !important;
 }
 
 .darkSelectWrapper :global(.customSelect__control) {
@@ -145,14 +147,24 @@
 
 
 /* Chart container - prevent extra vertical space */
+:global(.darkTheme .customSelect__single-value) {
+  color: #ffffff !important;
+}
+
+:global(.darkTheme .customSelect__placeholder) {
+  color: #aaaaaa !important;
+}
+
+/* Chart container - expand to fill available space */
 :global(.tools-horizontal-chart-container) {
   width: 100%;
   max-width: 100%;
-  height: auto; /* Ensure container doesn't force height */
+  flex: 1; /* Expand to fill available space in flex container */
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
   background-color: #ffffff !important; /* White background to show through transparent canvas */
+  min-height: 0; /* Allow flex shrinking */
 }
 
 /* Dark mode for chart container */
@@ -172,12 +184,14 @@
 /* Override min-height for tools-availability-page when used in card context */
 :global(.tools-availability-page) {
   min-height: auto !important; /* Override 100vh from ToolsAvailabilityPage.css */
-  height: auto; /* Let content determine height */
+  height: 100%; /* Fill parent card height */
   padding: 8px; /* Remove excessive padding (24px) since card already has padding */
   width: 100%;
   max-width: 100%;
   box-sizing: border-box;
   background-color: #ffffff !important; /* White background in light mode to prevent grey parent card background from showing through - !important to override any conflicting styles */
+  display: flex;
+  flex-direction: column;
 }
 
 /* Dark mode background for tools-availability-page */
@@ -185,6 +199,15 @@
   background-color: #2c3344 !important; /* Dark background in dark mode */
 }
 
+/* Ensure title and filters don't shrink, allowing chart to expand */
+:global(.tools-availability-page .tools-chart-title) {
+  flex-shrink: 0;
+}
+
+:global(.tools-availability-page .row) {
+  flex-shrink: 0;
+}
+
 /* Filter controls layout for small screens */
 @media (max-width: 768px) {
   :global(.tools-availability-page) {
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.module.css b/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.module.css
index c51290dcdf..f1f2cd1dc8 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.module.css
+++ b/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.module.css
@@ -225,6 +225,9 @@
   max-width: 100%;
   box-sizing: border-box;
   overflow: hidden visible;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
 }
 
 .darkMode .weeklyProjectSummaryCard {
@@ -360,7 +363,7 @@
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 20px;
-  align-items: start; /* Prevent cards from stretching to match tallest card */
+  align-items: stretch; /* Make all cards in a row the same height */
   border-top: 1px solid var(--card-shadow);
   animation: fade-in 0.3s ease-in-out;
   background: var(--section-bg);
@@ -688,6 +691,27 @@
 
 /* Medium Screens */
 @media (width <= 1024px) {
+/* Large screens - Tools section layout optimization */
+@media (max-width: 1366px) {
+  /* Tools and Equipment Tracking - Switch to 2 column layout earlier for better chart visibility */
+  .weeklyProjectSummaryDashboardCategoryContent {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 15px;
+    padding: 12px;
+  }
+
+  /* Wide card spans 2 columns, normal cards span 1 column each */
+  .weeklyProjectSummaryDashboardCategoryContent .wideCard {
+    grid-column: span 2;
+  }
+
+  .weeklyProjectSummaryDashboardCategoryContent .normalCard {
+    grid-column: span 1;
+  }
+}
+
+/* Medium Screens - Wrap Items */
+@media (max-width: 1024px) {
   .weeklySummaryHeaderContainer {
     flex-direction: column;
     align-items: center;
@@ -800,6 +824,27 @@
   .financialsTrackingGrid {
     grid-template-columns: 1fr;
   }
+
+  /* Ensure charts are fully visible on mobile - prevent clipping */
+  .weeklyProjectSummaryDashboardCategoryContent .tools-horizontal-chart-container,
+  .weeklyProjectSummaryDashboardCategoryContent .tools-horizontal-bar-chart-content,
+  .weeklyProjectSummaryDashboardCategoryContent .tool-donut-wrapper {
+    width: 100%;
+    max-width: 100%;
+    overflow: visible;
+  }
+}
+
+/* Extra small screens */
+@media (max-width: 576px) {
+  .weeklyProjectSummaryDashboardCategoryContent {
+    padding: 8px;
+    gap: 10px;
+  }
+
+  .weeklyProjectSummaryCard {
+    padding: 6px;
+  }
 }
 
 /* Extra Small Screens */
@@ -899,4 +944,4 @@
   .weeklySummaryHeaderControls select {
     display: none;
   }
-}
+}
\ No newline at end of file

From 7171580b96c47dd117185f5f84e789b39ef5b8f5 Mon Sep 17 00:00:00 2001
From: Aditya Gambhir <67105262+Aditya-gam@users.noreply.github.com>
Date: Sat, 6 Dec 2025 12:35:40 -0800
Subject: [PATCH 15/29] fix(tools-charts): implement gradient responsive system
 for mobile devices

- Add granular breakpoints (375px, 428px, 480px) for better mobile support
- Implement progressive chart height scaling from 180px (small phones) to 300px (desktop)
- Scale all chart elements proportionally (fonts, margins, bar thickness, radii)
- Add overflow prevention to chart containers for small screens
- Update CSS media queries with gradient scaling for titles, filters, and legends
- Ensure charts scale smoothly across all device sizes preventing overflow on iPhones
- Reduce padding and spacing on smaller screens for optimal space utilization
---
 .../Tools/ToolsStoppageHorizontalBarChart.jsx | 105 +++++++++++-----
 .../ToolStatusDonutChart.css                  | 112 ++++++++++++++++-
 .../ToolStatusDonutChart.jsx                  |  56 ++++++++-
 .../Tools/ToolsHorizontalBarChart.jsx         |  66 ++++++----
 .../Tools/ToolsHorizontalBarChart.module.css  | 118 +++++++++++++++++-
 ...ToolsStoppageHorizontalBarChart.module.css |  62 ++++++++-
 .../WeeklyProjectSummary.module.css           |  63 ++++++++++
 7 files changed, 517 insertions(+), 65 deletions(-)

diff --git a/src/components/BMDashboard/Tools/ToolsStoppageHorizontalBarChart.jsx b/src/components/BMDashboard/Tools/ToolsStoppageHorizontalBarChart.jsx
index 56b392c9b8..44507eba19 100644
--- a/src/components/BMDashboard/Tools/ToolsStoppageHorizontalBarChart.jsx
+++ b/src/components/BMDashboard/Tools/ToolsStoppageHorizontalBarChart.jsx
@@ -50,64 +50,107 @@ export default function ToolsStoppageHorizontalBarChart() {
     return () => window.removeEventListener('resize', handleResize);
   }, []);
 
-  // Calculate responsive chart height: 240px mobile, 280px tablet, 300px desktop
+  // Gradient responsive chart height scaling based on screen width
+  // Scales smoothly from smallest phones (180px) to desktop (300px)
   const getChartHeight = () => {
-    if (windowWidth <= 768) {
-      return 240; // Mobile
+    if (windowWidth <= 375) {
+      // Small phones (iPhone SE, iPhone 12 mini): 180px
+      return 180;
+    } else if (windowWidth <= 428) {
+      // Medium phones (iPhone 12/13/14): 200px
+      return 200;
+    } else if (windowWidth <= 480) {
+      // Large phones: 220px
+      return 220;
+    } else if (windowWidth <= 768) {
+      // Tablets in portrait: 240px
+      return 240;
     } else if (windowWidth <= 1024) {
-      return 280; // Tablet
+      // Tablets in landscape: 280px
+      return 280;
     }
-    return 300; // Desktop
+    // Desktop: 300px
+    return 300;
   };
 
-  // Calculate responsive maxBarThickness: mobile 20, tablet 22, desktop 25
+  // Gradient responsive maxBarThickness scaling
   const getMaxBarThickness = () => {
-    if (windowWidth <= 768) {
-      return 20; // Mobile
+    if (windowWidth <= 375) {
+      return 15;
+    } else if (windowWidth <= 428) {
+      return 16;
+    } else if (windowWidth <= 480) {
+      return 18;
+    } else if (windowWidth <= 768) {
+      return 20;
     } else if (windowWidth <= 1024) {
-      return 22; // Tablet
+      return 22;
     }
-    return 25; // Desktop
+    return 25;
   };
 
-  // Calculate responsive categoryPercentage: mobile 0.5, tablet 0.55, desktop 0.6
+  // Gradient responsive categoryPercentage scaling
   const getCategoryPercentage = () => {
-    if (windowWidth <= 768) {
-      return 0.5; // Mobile
+    if (windowWidth <= 375) {
+      return 0.45;
+    } else if (windowWidth <= 428) {
+      return 0.47;
+    } else if (windowWidth <= 480) {
+      return 0.48;
+    } else if (windowWidth <= 768) {
+      return 0.5;
     } else if (windowWidth <= 1024) {
-      return 0.55; // Tablet
+      return 0.55;
     }
-    return 0.6; // Desktop
+    return 0.6;
   };
 
-  // Calculate responsive barPercentage: mobile 0.85, tablet 0.87, desktop 0.9
+  // Gradient responsive barPercentage scaling
   const getBarPercentage = () => {
-    if (windowWidth <= 768) {
-      return 0.85; // Mobile
+    if (windowWidth <= 375) {
+      return 0.8;
+    } else if (windowWidth <= 428) {
+      return 0.82;
+    } else if (windowWidth <= 480) {
+      return 0.84;
+    } else if (windowWidth <= 768) {
+      return 0.85;
     } else if (windowWidth <= 1024) {
-      return 0.87; // Tablet
+      return 0.87;
     }
-    return 0.9; // Desktop
+    return 0.9;
   };
 
-  // Calculate responsive font size: mobile 10, tablet 11, desktop 12
+  // Gradient responsive font size scaling
   const getFontSize = () => {
-    if (windowWidth <= 768) {
-      return 10; // Mobile
+    if (windowWidth <= 375) {
+      return 8;
+    } else if (windowWidth <= 428) {
+      return 9;
+    } else if (windowWidth <= 480) {
+      return 9.5;
+    } else if (windowWidth <= 768) {
+      return 10;
     } else if (windowWidth <= 1024) {
-      return 11; // Tablet
+      return 11;
     }
-    return 12; // Desktop
+    return 12;
   };
 
-  // Calculate responsive title font size: mobile 11, tablet 12, desktop 14
+  // Gradient responsive title font size scaling
   const getTitleFontSize = () => {
-    if (windowWidth <= 768) {
-      return 11; // Mobile
+    if (windowWidth <= 375) {
+      return 9;
+    } else if (windowWidth <= 428) {
+      return 10;
+    } else if (windowWidth <= 480) {
+      return 10.5;
+    } else if (windowWidth <= 768) {
+      return 11;
     } else if (windowWidth <= 1024) {
-      return 12; // Tablet
+      return 12;
     }
-    return 14; // Desktop
+    return 14;
   };
 
   useEffect(() => {
@@ -483,7 +526,7 @@ export default function ToolsStoppageHorizontalBarChart() {
               minHeight: 0,
             }}
           >
-            <div style={{ flex: 1, display: 'flex', alignItems: 'center' }}>
+            <div style={{ flex: 1, display: 'flex', alignItems: 'center', overflow: 'hidden' }}>
               <Bar data={chartData} options={chartOptions} height={getChartHeight()} />
             </div>
           </div>
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.css b/src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.css
index 528fdf13a0..94c5cd0f24 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.css
+++ b/src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.css
@@ -120,7 +120,116 @@
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
 }
 
-@media (max-width: 768px) {
+/* Gradient responsive scaling for donut chart */
+@media (max-width: 375px) {
+  .tool-donut-wrapper {
+    max-width: 100%;
+    padding: 0;
+  }
+
+  .tool-donut-title {
+    font-size: 0.85rem;
+    margin-bottom: 0.6rem;
+  }
+
+  .tool-donut-filters {
+    gap: 1rem;
+    margin-bottom: 0.8rem;
+  }
+
+  .filter-item {
+    font-size: 11px;
+  }
+
+  .filter-label {
+    font-size: 11px;
+  }
+
+  .tool-donut-legend {
+    margin-top: 0.6rem;
+    gap: 0.3rem;
+  }
+
+  .tool-donut-legend-item {
+    font-size: 11px;
+    padding: 4px 10px;
+    min-width: 100px;
+  }
+}
+
+@media (min-width: 376px) and (max-width: 428px) {
+  .tool-donut-wrapper {
+    max-width: 100%;
+    padding: 0;
+  }
+
+  .tool-donut-title {
+    font-size: 0.9rem;
+    margin-bottom: 0.7rem;
+  }
+
+  .tool-donut-filters {
+    gap: 1.2rem;
+    margin-bottom: 0.9rem;
+  }
+
+  .filter-item {
+    font-size: 11.5px;
+  }
+
+  .filter-label {
+    font-size: 11.5px;
+  }
+
+  .tool-donut-legend {
+    margin-top: 0.7rem;
+    gap: 0.35rem;
+  }
+
+  .tool-donut-legend-item {
+    font-size: 11.5px;
+    padding: 4px 11px;
+    min-width: 110px;
+  }
+}
+
+@media (min-width: 429px) and (max-width: 480px) {
+  .tool-donut-wrapper {
+    max-width: 100%;
+    padding: 0;
+  }
+
+  .tool-donut-title {
+    font-size: 0.95rem;
+    margin-bottom: 0.75rem;
+  }
+
+  .tool-donut-filters {
+    gap: 1.3rem;
+    margin-bottom: 0.95rem;
+  }
+
+  .filter-item {
+    font-size: 11.5px;
+  }
+
+  .filter-label {
+    font-size: 11.5px;
+  }
+
+  .tool-donut-legend {
+    margin-top: 0.75rem;
+    gap: 0.35rem;
+  }
+
+  .tool-donut-legend-item {
+    font-size: 11.5px;
+    padding: 5px 11px;
+    min-width: 115px;
+  }
+}
+
+@media (min-width: 481px) and (max-width: 768px) {
   .tools-tracking-layout {
     flex-direction: column;
     align-items: center;
@@ -132,7 +241,6 @@
     max-width: 100%;
   }
 
-  /* Mobile adjustments for donut chart */
   .tool-donut-wrapper {
     max-width: 100%;
     padding: 0;
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.jsx b/src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.jsx
index 1c0f38b70a..8a014fe357 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.jsx
+++ b/src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.jsx
@@ -298,18 +298,35 @@ export default function ToolStatusDonutChart() {
     [darkMode],
   );
 
-  // Responsive sizing standardized to match tallest chart: 240px mobile, 280px tablet, 300px desktop
+  // Gradient responsive sizing - matches other charts for consistent height
+  // Scales smoothly from smallest phones to desktop
   let innerRadius;
   let outerRadius;
   let chartHeight;
   const isSmall = windowWidth <= 768;
-  if (windowWidth <= 768) {
-    // Mobile
+
+  if (windowWidth <= 375) {
+    // Small phones (iPhone SE, iPhone 12 mini)
+    innerRadius = 30;
+    outerRadius = 50;
+    chartHeight = 180;
+  } else if (windowWidth <= 428) {
+    // Medium phones (iPhone 12/13/14)
+    innerRadius = 35;
+    outerRadius = 55;
+    chartHeight = 200;
+  } else if (windowWidth <= 480) {
+    // Large phones
+    innerRadius = 37;
+    outerRadius = 60;
+    chartHeight = 220;
+  } else if (windowWidth <= 768) {
+    // Tablets in portrait
     innerRadius = 40;
     outerRadius = 65;
     chartHeight = 240;
   } else if (windowWidth <= 1024) {
-    // Tablet
+    // Tablets in landscape
     innerRadius = 50;
     outerRadius = 80;
     chartHeight = 280;
@@ -321,6 +338,37 @@ export default function ToolStatusDonutChart() {
   }
 
   const wrapperClass = `${styles.toolDonutWrapper} ${darkMode ? styles.toolDonutWrapperDark : ''}`;
+  // Gradient responsive margins scaling
+  const getChartMargins = () => {
+    if (windowWidth <= 375) {
+      return { top: 15, bottom: 15, left: 15, right: 15 };
+    } else if (windowWidth <= 428) {
+      return { top: 18, bottom: 18, left: 18, right: 18 };
+    } else if (windowWidth <= 480) {
+      return { top: 19, bottom: 19, left: 19, right: 19 };
+    } else if (windowWidth <= 768) {
+      return { top: 20, bottom: 20, left: 20, right: 20 };
+    } else if (windowWidth <= 1024) {
+      return { top: 25, bottom: 25, left: 30, right: 30 };
+    }
+    return { top: 30, bottom: 30, left: 40, right: 40 };
+  };
+
+  // Gradient responsive font size for center text scaling
+  const getCenterTextFontSize = () => {
+    if (windowWidth <= 375) {
+      return 8;
+    } else if (windowWidth <= 428) {
+      return 9;
+    } else if (windowWidth <= 480) {
+      return 9.5;
+    } else if (windowWidth <= 768) {
+      return 10;
+    } else if (windowWidth <= 1024) {
+      return 12;
+    }
+    return 14;
+  };
 
   return (
     <div className={wrapperClass}>
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsHorizontalBarChart.jsx b/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsHorizontalBarChart.jsx
index 99fc68b785..294d9a1a55 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsHorizontalBarChart.jsx
+++ b/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsHorizontalBarChart.jsx
@@ -87,45 +87,69 @@ function ToolsHorizontalBarChart({ darkMode: darkModeProp }) {
     return () => window.removeEventListener('resize', handleResize);
   }, []);
 
-  // Calculate responsive chart height: 240px mobile, 280px tablet, 300px desktop
-  // Standardized to match tallest chart (ToolsStoppageHorizontalBarChart)
+  // Gradient responsive chart height scaling - matches ToolsStoppageHorizontalBarChart
+  // Scales smoothly from smallest phones (180px) to desktop (300px)
   const getChartHeight = () => {
-    if (windowWidth <= 768) {
-      return 240; // Mobile
+    if (windowWidth <= 375) {
+      return 180;
+    } else if (windowWidth <= 428) {
+      return 200;
+    } else if (windowWidth <= 480) {
+      return 220;
+    } else if (windowWidth <= 768) {
+      return 240;
     } else if (windowWidth <= 1024) {
-      return 280; // Tablet
+      return 280;
     }
-    return 300; // Desktop
+    return 300;
   };
 
-  // Calculate responsive margins: mobile {5,5,15,5}, tablet {8,15,25,8}, desktop {10,30,40,10}
+  // Gradient responsive margins scaling
   const getChartMargins = () => {
-    if (windowWidth <= 768) {
-      return { top: 5, right: 5, left: 15, bottom: 5 }; // Mobile
+    if (windowWidth <= 375) {
+      return { top: 3, right: 3, left: 12, bottom: 3 };
+    } else if (windowWidth <= 428) {
+      return { top: 4, right: 4, left: 13, bottom: 4 };
+    } else if (windowWidth <= 480) {
+      return { top: 4, right: 4, left: 14, bottom: 4 };
+    } else if (windowWidth <= 768) {
+      return { top: 5, right: 5, left: 15, bottom: 5 };
     } else if (windowWidth <= 1024) {
-      return { top: 8, right: 15, left: 25, bottom: 8 }; // Tablet
+      return { top: 8, right: 15, left: 25, bottom: 8 };
     }
-    return { top: 10, right: 30, left: 40, bottom: 10 }; // Desktop
+    return { top: 10, right: 30, left: 40, bottom: 10 };
   };
 
-  // Calculate responsive Y-axis width: mobile 20, tablet 28, desktop 35
+  // Gradient responsive Y-axis width scaling
   const getYAxisWidth = () => {
-    if (windowWidth <= 768) {
-      return 20; // Mobile
+    if (windowWidth <= 375) {
+      return 18;
+    } else if (windowWidth <= 428) {
+      return 19;
+    } else if (windowWidth <= 480) {
+      return 19.5;
+    } else if (windowWidth <= 768) {
+      return 20;
     } else if (windowWidth <= 1024) {
-      return 28; // Tablet
+      return 28;
     }
-    return 35; // Desktop
+    return 35;
   };
 
-  // Calculate responsive font size: mobile 10, tablet 11, desktop 12
+  // Gradient responsive Y-axis font size scaling
   const getYAxisFontSize = () => {
-    if (windowWidth <= 768) {
-      return 10; // Mobile
+    if (windowWidth <= 375) {
+      return 8;
+    } else if (windowWidth <= 428) {
+      return 9;
+    } else if (windowWidth <= 480) {
+      return 9.5;
+    } else if (windowWidth <= 768) {
+      return 10;
     } else if (windowWidth <= 1024) {
-      return 11; // Tablet
+      return 11;
     }
-    return 12; // Desktop
+    return 12;
   };
 
   // Date range logging removed for production
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsHorizontalBarChart.module.css b/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsHorizontalBarChart.module.css
index 67c81ddacf..a80901cb69 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsHorizontalBarChart.module.css
+++ b/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsHorizontalBarChart.module.css
@@ -47,6 +47,7 @@
   min-height: 0;
   width: 100%;
   max-width: 100%;
+  overflow: hidden; /* Prevent overflow on small screens */
 }
 
 .tools-horizontal-bar-chart-loading {
@@ -232,10 +233,119 @@
 
 /* Responsive adjustments */
 @media (width <= 768px) {
+/* Responsive adjustments - gradient scaling for mobile */
+@media (max-width: 375px) {
+  .tools-horizontal-bar-chart-card {
+    padding: 6px;
+    min-height: auto;
+    max-height: none;
+  }
+  
+  .tools-horizontal-bar-chart-title {
+    font-size: 12px;
+    margin-bottom: 6px;
+  }
+  
+  .tools-horizontal-bar-chart-filters {
+    padding: 6px 0;
+    margin-bottom: 8px;
+  }
+  
+  .tools-horizontal-bar-chart-date-picker-group {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 4px;
+  }
+  
+  .tools-horizontal-bar-chart-date-picker {
+    min-width: 80px;
+    width: 100%;
+    font-size: 11px;
+  }
+
+  .tools-horizontal-bar-chart-loading,
+  .tools-horizontal-bar-chart-error,
+  .tools-horizontal-bar-chart-empty {
+    height: 150px;
+  }
+}
+
+@media (min-width: 376px) and (max-width: 428px) {
+  .tools-horizontal-bar-chart-card {
+    padding: 8px;
+    min-height: auto;
+    max-height: none;
+  }
+  
+  .tools-horizontal-bar-chart-title {
+    font-size: 13px;
+    margin-bottom: 8px;
+  }
+  
+  .tools-horizontal-bar-chart-filters {
+    padding: 7px 0;
+    margin-bottom: 9px;
+  }
+  
+  .tools-horizontal-bar-chart-date-picker-group {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 5px;
+  }
+  
+  .tools-horizontal-bar-chart-date-picker {
+    min-width: 90px;
+    width: 100%;
+    font-size: 11.5px;
+  }
+
+  .tools-horizontal-bar-chart-loading,
+  .tools-horizontal-bar-chart-error,
+  .tools-horizontal-bar-chart-empty {
+    height: 165px;
+  }
+}
+
+@media (min-width: 429px) and (max-width: 480px) {
+  .tools-horizontal-bar-chart-card {
+    padding: 9px;
+    min-height: auto;
+    max-height: none;
+  }
+  
+  .tools-horizontal-bar-chart-title {
+    font-size: 13.5px;
+    margin-bottom: 9px;
+  }
+  
+  .tools-horizontal-bar-chart-filters {
+    padding: 7px 0;
+    margin-bottom: 9px;
+  }
+  
+  .tools-horizontal-bar-chart-date-picker-group {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 5px;
+  }
+  
+  .tools-horizontal-bar-chart-date-picker {
+    min-width: 95px;
+    width: 100%;
+  }
+
+  .tools-horizontal-bar-chart-loading,
+  .tools-horizontal-bar-chart-error,
+  .tools-horizontal-bar-chart-empty {
+    height: 175px;
+  }
+}
+
+@media (min-width: 481px) and (max-width: 768px) {
   .tools-horizontal-bar-chart-card {
     padding: 10px;
-    min-height: auto; /* Remove fixed min-height to prevent empty space */
-    max-height: none; /* Allow content to determine height */
+    min-height: auto;
+    max-height: none;
   }
 
   .tools-horizontal-bar-chart-title {
@@ -263,7 +373,7 @@
   .tools-horizontal-bar-chart-loading,
   .tools-horizontal-bar-chart-error,
   .tools-horizontal-bar-chart-empty {
-    height: 180px; /* Reduce height on mobile */
+    height: 180px;
   }
 
 /* Tablet adjustments */
@@ -272,4 +382,4 @@
     padding: 12px;
     min-height: auto;
   }
-} 
+} 
\ No newline at end of file
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsStoppageHorizontalBarChart/ToolsStoppageHorizontalBarChart.module.css b/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsStoppageHorizontalBarChart/ToolsStoppageHorizontalBarChart.module.css
index 04af465ace..51953fdab9 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsStoppageHorizontalBarChart/ToolsStoppageHorizontalBarChart.module.css
+++ b/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsStoppageHorizontalBarChart/ToolsStoppageHorizontalBarChart.module.css
@@ -165,6 +165,7 @@
   box-sizing: border-box;
   background-color: #ffffff !important; /* White background to show through transparent canvas */
   min-height: 0; /* Allow flex shrinking */
+  overflow: hidden; /* Prevent overflow on small screens */
 }
 
 /* Dark mode for chart container */
@@ -208,10 +209,65 @@
   flex-shrink: 0;
 }
 
-/* Filter controls layout for small screens */
-@media (max-width: 768px) {
+/* Filter controls layout for small screens - gradient scaling */
+@media (max-width: 480px) {
   :global(.tools-availability-page) {
-    padding: 6px; /* Further reduce padding on mobile */
+    padding: 4px;
+  }
+
+  :global(.tools-chart-title) {
+    font-size: 0.85rem;
+    margin-bottom: 0.6rem;
+  }
+
+  /* Bootstrap Row/Col fixes for mobile */
+  :global(.tools-availability-page .row) {
+    width: 100%;
+    max-width: 100%;
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  :global(.tools-availability-page .col),
+  :global(.tools-availability-page [class*='col-']) {
+    width: 100%;
+    max-width: 100%;
+    padding-left: 8px;
+    padding-right: 8px;
+    margin-bottom: 8px;
+  }
+
+  :global(.datepickerWrapper) {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    width: 100%;
+    max-width: 100%;
+  }
+
+  :global(.datepickerWrapper .btn) {
+    margin-top: 8px;
+    width: 100%;
+  }
+
+  :global(.customSelect__control) {
+    font-size: 10px;
+    width: 100%;
+    max-width: 100%;
+  }
+
+  :global(.customSelect__multi-value) {
+    font-size: 10px;
+  }
+
+  :global(.tools-horizontal-chart-container) {
+    padding: 0;
+  }
+}
+
+@media (min-width: 481px) and (max-width: 768px) {
+  :global(.tools-availability-page) {
+    padding: 6px;
   }
 
   :global(.tools-chart-title) {
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.module.css b/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.module.css
index f1f2cd1dc8..14e656fca8 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.module.css
+++ b/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.module.css
@@ -743,6 +743,69 @@
 
 /* Small Screens */
 @media (width <= 768px) {
+/* Extra Small Screens - Small phones */
+@media (max-width: 375px) {
+  .weeklyProjectSummaryDashboardCategoryContent {
+    padding: 8px;
+    gap: 8px;
+  }
+
+  .weeklyProjectSummaryCard {
+    padding: 6px;
+  }
+
+  /* Ensure charts are fully visible on small mobile - prevent clipping */
+  .weeklyProjectSummaryDashboardCategoryContent .tools-horizontal-chart-container,
+  .weeklyProjectSummaryDashboardCategoryContent .tools-horizontal-bar-chart-content,
+  .weeklyProjectSummaryDashboardCategoryContent .tool-donut-wrapper {
+    width: 100%;
+    max-width: 100%;
+    overflow: hidden;
+  }
+}
+
+/* Small Screens - Medium phones */
+@media (min-width: 376px) and (max-width: 428px) {
+  .weeklyProjectSummaryDashboardCategoryContent {
+    padding: 10px;
+    gap: 10px;
+  }
+
+  .weeklyProjectSummaryCard {
+    padding: 7px;
+  }
+
+  .weeklyProjectSummaryDashboardCategoryContent .tools-horizontal-chart-container,
+  .weeklyProjectSummaryDashboardCategoryContent .tools-horizontal-bar-chart-content,
+  .weeklyProjectSummaryDashboardCategoryContent .tool-donut-wrapper {
+    width: 100%;
+    max-width: 100%;
+    overflow: hidden;
+  }
+}
+
+/* Small Screens - Large phones and tablets */
+@media (min-width: 429px) and (max-width: 768px) {
+  .weeklyProjectSummaryDashboardCategoryContent {
+    padding: 12px;
+    gap: 12px;
+  }
+
+  .weeklyProjectSummaryCard {
+    padding: 8px;
+  }
+
+  .weeklyProjectSummaryDashboardCategoryContent .tools-horizontal-chart-container,
+  .weeklyProjectSummaryDashboardCategoryContent .tools-horizontal-bar-chart-content,
+  .weeklyProjectSummaryDashboardCategoryContent .tool-donut-wrapper {
+    width: 100%;
+    max-width: 100%;
+    overflow: hidden;
+  }
+}
+
+/* Small Screens - Make Dropdowns Vertical */
+@media (max-width: 768px) {
   .weeklySummaryHeaderContainer {
     flex-direction: column;
     align-items: center;

From 3b74916cd87acd1c3e775a7de4cca63b3c966127 Mon Sep 17 00:00:00 2001
From: Aditya Gambhir <67105262+Aditya-gam@users.noreply.github.com>
Date: Sat, 6 Dec 2025 13:00:24 -0800
Subject: [PATCH 16/29] fix(tools-charts): improve filter layout and dark mode
 text colors

- Add filter labels for date range and project filters with proper dark mode styling
- Fix label and chart title text colors to white in dark mode for better contrast
- Restructure filter layout to be symmetric and modular with consistent sizing
- Ensure all filter inputs have matching heights (38px) for proper alignment
- Improve date picker input group layout with clear button integration
- Add reset button wrapper for consistent spacing with other filters
- Fix date picker dark mode background styling with inline styles and CSS fallbacks
---
 .../Tools/ToolsStoppageHorizontalBarChart.jsx | 100 +++---
 ...ToolsStoppageHorizontalBarChart.module.css | 315 ++++++++++--------
 2 files changed, 246 insertions(+), 169 deletions(-)

diff --git a/src/components/BMDashboard/Tools/ToolsStoppageHorizontalBarChart.jsx b/src/components/BMDashboard/Tools/ToolsStoppageHorizontalBarChart.jsx
index 44507eba19..d75d6c9c94 100644
--- a/src/components/BMDashboard/Tools/ToolsStoppageHorizontalBarChart.jsx
+++ b/src/components/BMDashboard/Tools/ToolsStoppageHorizontalBarChart.jsx
@@ -458,49 +458,73 @@ export default function ToolsStoppageHorizontalBarChart() {
       <h3 className={`tools-chart-title ${darkMode ? 'dark-mode' : ''}`}>
         Reason of Stoppage of Tools
       </h3>
-      <Row className="mb-3 align-items-center">
-        <Col xs={12} md={6}>
+      <Row className={`mb-3 ${styles.filtersRow}`}>
+        <Col xs={12} md={5}>
           <div className={styles.datepickerWrapper}>
-            <DatePicker
-              selectsRange
-              startDate={startDate}
-              endDate={endDate}
-              onChange={update => {
-                setDateRange(update);
-              }}
-              placeholderText={dateRangeLabel || 'Filter by Date Range'}
-              className={`${styles.datePickerInput} form-control ${darkMode ? 'darkTheme' : ''}`}
-              calendarClassName={darkMode ? 'darkThemeCalendar' : 'customCalendar'}
-            />
-            <Button variant="outline-danger" size="sm" onClick={() => setDateRange([null, null])}>
-              ✕
-            </Button>
+            <label htmlFor="date-range-picker" className={styles.filterLabel}>
+              Filter by Date Range
+            </label>
+            <div className={styles.datePickerInputGroup}>
+              <DatePicker
+                id="date-range-picker"
+                selectsRange
+                startDate={startDate}
+                endDate={endDate}
+                onChange={update => {
+                  setDateRange(update);
+                }}
+                placeholderText={dateRangeLabel || 'Filter by Date Range'}
+                className={styles.datePickerInput}
+                calendarClassName={darkMode ? 'darkThemeCalendar' : 'customCalendar'}
+                wrapperClassName={darkMode ? 'darkThemeDatePickerWrapper' : ''}
+                style={{
+                  backgroundColor: darkMode ? '#2b3e59' : '#ffffff',
+                  color: darkMode ? '#ffffff' : '#000000',
+                  border: `1px solid ${darkMode ? '#666' : '#ccc'}`,
+                }}
+              />
+              <Button variant="outline-danger" size="sm" onClick={() => setDateRange([null, null])}>
+                ✕
+              </Button>
+            </div>
           </div>
         </Col>
         <Col xs={12} md={4}>
-          <Select
-            className="w-100"
-            classNamePrefix="customSelect"
-            value={selectedProject}
-            onChange={opt => setSelectedProject(opt)}
-            options={projectOptions}
-            placeholder="Select a project ID to view data"
-            isClearable={false}
-            isDisabled={projects.length === 0}
-            styles={selectStyles}
-          />
+          <div className={styles.filterWrapper}>
+            <label htmlFor="project-select" className={styles.filterLabel}>
+              Project
+            </label>
+            <Select
+              id="project-select"
+              className="w-100"
+              classNamePrefix="customSelect"
+              value={selectedProject}
+              onChange={opt => setSelectedProject(opt)}
+              options={projectOptions}
+              placeholder="Select a project ID to view data"
+              isClearable={false}
+              isDisabled={projects.length === 0}
+              styles={selectStyles}
+            />
+          </div>
         </Col>
-        <Col xs={12} md={2}>
-          <Button
-            variant="danger"
-            size="sm"
-            onClick={() => {
-              setSelectedProject(null);
-              setDateRange([null, null]);
-            }}
-          >
-            Reset
-          </Button>
+        <Col xs={12} md={3}>
+          <div className={styles.resetWrapper}>
+            <div className={styles.filterLabel} style={{ visibility: 'hidden', height: '19px' }}>
+              &nbsp;
+            </div>
+            <Button
+              variant="danger"
+              size="sm"
+              className={styles.resetButton}
+              onClick={() => {
+                setSelectedProject(null);
+                setDateRange([null, null]);
+              }}
+            >
+              Reset
+            </Button>
+          </div>
         </Col>
       </Row>
 
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsStoppageHorizontalBarChart/ToolsStoppageHorizontalBarChart.module.css b/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsStoppageHorizontalBarChart/ToolsStoppageHorizontalBarChart.module.css
index 51953fdab9..db3cb8f864 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsStoppageHorizontalBarChart/ToolsStoppageHorizontalBarChart.module.css
+++ b/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsStoppageHorizontalBarChart/ToolsStoppageHorizontalBarChart.module.css
@@ -1,62 +1,70 @@
-/* Light mode for multi select */
-:global(.customSelect__control) {
-  background-color: #fff !important;
-  color: #000 !important;
-  border-color: #ccc;
-  font-size: 1rem;
-}
-
-:global(.customSelect__single-value) {
-  font-size: 1rem;
-  color: #000 !important;
-}
-
-.datepickerWrapper {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.datePickerContainer {
-  flex: 0 0 auto;
-  position: relative;
-}
-
-.datePickerControl {
-  display: block;
-}
-
-.datepickerWrapper :global(.btn) {
-  flex: 0 0 auto;
-}
-
-:global(.customSelect__placeholder),
-:global(.customSelect__input-container) {
-  font-size: 1rem;
-}
+/* React-select styles are handled EXCLUSIVELY via inline styles in the component */
+/* No global CSS overrides - inline styles have higher specificity and are the proper way */
+/* Removing any global overrides that might conflict */
 
-.datePickerInput {
-  font-size: 1rem !important;
+/* Date picker input - light mode */
+:global(.datePickerInput) {
+  font-size: 10px !important;
   padding: 6px 8px;
   border-radius: 4px;
+  background-color: #ffffff !important;
+  color: #000000 !important;
+  border: 1px solid #ccc !important;
+}
+
+/* Date picker input - dark mode (when darkTheme class is applied) */
+/* react-datepicker applies className to the input wrapper, need to target input directly */
+:global(.react-datepicker-wrapper.darkThemeDatePickerWrapper .datePickerInput),
+:global(.react-datepicker-wrapper.darkThemeDatePickerWrapper input),
+:global(.darkTheme.datePickerInput),
+:global(.datePickerInput.darkTheme),
+:global(input.darkTheme.datePickerInput),
+:global(input.datePickerInput.darkTheme),
+:global(.form-control.darkTheme.datePickerInput),
+:global(.darkTheme.form-control.datePickerInput) {
+  background-color: #2b3e59 !important;
+  color: #ffffff !important;
+  border: 1px solid #666 !important;
+  font-size: 10px !important;
 }
 
-.datePickerInput:global(.darkTheme) {
+/* Also target the wrapper's input when darkTheme is on parent */
+:global(.tools-availability-page.dark-mode .react-datepicker-wrapper input.datePickerInput),
+:global(.tools-availability-page.dark-mode .datePickerInput),
+:global(.tools-availability-page.dark-mode .react-datepicker-wrapper input) {
   background-color: #2b3e59 !important;
-  color: #fff !important;
+  color: #ffffff !important;
   border: 1px solid #666 !important;
-  font-size: 1rem !important;
 }
 
-:global(.darkTheme .form-control .datePickerInput) {
+/* Ensure dark mode wrapper targets the input properly */
+:global(.react-datepicker-wrapper.darkThemeDatePickerWrapper input[type="text"]),
+:global(.react-datepicker-wrapper.darkThemeDatePickerWrapper input[type="text"].datePickerInput) {
   background-color: #2b3e59 !important;
-  color: #fff !important;
+  color: #ffffff !important;
   border: 1px solid #666 !important;
-  font-size: 10px !important;
+}
+
+/* Light mode calendar styles */
+:global(.customCalendar) {
+  background-color: #ffffff !important;
+  color: #000000 !important;
+  border: 1px solid #ccc !important;
+}
+
+:global(.customCalendar .react-datepicker__header) {
+  background-color: #f0f0f0 !important;
+  color: #000000 !important;
+  border-bottom: 1px solid #ccc !important;
+}
+
+:global(.customCalendar .react-datepicker__day) {
+  color: #000000 !important;
 }
 
 :global(.customCalendar .react-datepicker__day--keyboard-selected) {
   background-color: #7d7e7f !important;
+  color: #ffffff !important;
 }
 
 :global(.customCalendar .react-datepicker__navigation-icon::before) {
@@ -65,18 +73,34 @@
 
 /* Hover day styling in dark theme */
 :global(.customCalendar .react-datepicker__day:hover) {
-  background-color: #3b5a81 !important;
-  color: #fff !important;
+  background-color: #e0e0e0 !important;
+  color: #000000 !important;
   border-radius: 50%;
 }
 
+:global(.customCalendar .react-datepicker__day--selected) {
+  background-color: #007bff !important;
+  color: #ffffff !important;
+  border-radius: 50%;
+}
+
+:global(.customCalendar .react-datepicker__current-month),
+:global(.customCalendar .react-datepicker__day-name) {
+  color: #000000 !important;
+}
+
 /* Dark theme calendar container */
 :global(.darkThemeCalendar) { 
   background-color: #2b3e59 !important;
-  color: #fff !important;
+  color: #ffffff !important;
   border: 1px solid #6b6767 !important;
 }
 
+:global(.darkThemeCalendar .react-datepicker__current-month),
+:global(.darkThemeCalendar .react-datepicker__day-name) {
+  color: #ffffff !important;
+}
+
 /* Dark theme header */
 :global(.darkThemeCalendar .react-datepicker__header) {
   background-color: #1c2541 !important;
@@ -103,57 +127,8 @@
   border-radius: 50%;
 }
 
-/* Dark mode for react-select - consistent with paid-labor-cost pattern */
-:global(.darkTheme .customSelect__control) {
-  background-color: #253342 !important;
-  border-color: #2d4059 !important;
-  color: #ffffff !important;
-  font-size: 10px !important;
-}
-
-:global(.darkTheme .customSelect__menu) {
-  background-color: #253342 !important;
-  border-color: #2d4059 !important;
-  color: #ffffff !important;
-}
-
-:global(.darkTheme .customSelect__option) {
-  background-color: #253342 !important;
-  color: #ffffff !important;
-}
-
-:global(.darkTheme .customSelect__option--is-focused) {
-  background-color: #3a506b !important;
-  color: #ffffff !important;
-}
-
-:global(.darkTheme .customSelect__option--is-selected) {
-  background-color: #e8a71c !important;
-  color: #000000 !important;
-}
-
-.darkSelectWrapper :global(.customSelect__control) {
-  background-color: #1a1a1a !important;
-  border-color: rgb(255 255 255 / 20%);
-  color: #f5f7fa !important;
-}
-
-.darkSelectWrapper :global(.customSelect__single-value),
-.darkSelectWrapper :global(.customSelect__input-container),
-.darkSelectWrapper :global(.customSelect__placeholder) {
-  color: #f5f7fa !important;
-}
-
-
-
-/* Chart container - prevent extra vertical space */
-:global(.darkTheme .customSelect__single-value) {
-  color: #ffffff !important;
-}
-
-:global(.darkTheme .customSelect__placeholder) {
-  color: #aaaaaa !important;
-}
+/* React-select styling is handled ONLY via inline styles in JSX */
+/* No CSS overrides needed or wanted - inline styles are the proper method */
 
 /* Chart container - expand to fill available space */
 :global(.tools-horizontal-chart-container) {
@@ -200,15 +175,103 @@
   background-color: #2c3344 !important; /* Dark background in dark mode */
 }
 
-/* Ensure title and filters don't shrink, allowing chart to expand */
+/* Chart title styling */
 :global(.tools-availability-page .tools-chart-title) {
   flex-shrink: 0;
+  color: #000000;
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin-bottom: 1rem;
+  text-align: center;
+}
+
+/* Dark mode for chart title */
+:global(.tools-availability-page.dark-mode .tools-chart-title) {
+  color: #ffffff !important;
 }
 
 :global(.tools-availability-page .row) {
   flex-shrink: 0;
 }
 
+/* Filters row - ensure consistent spacing */
+.filtersRow {
+  gap: 12px;
+  align-items: flex-end; /* Align filter inputs at the bottom */
+}
+
+.resetWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  width: 100%;
+  min-width: 0;
+}
+
+.resetButton {
+  width: 100%;
+  height: 38px; /* Match other input heights */
+  font-size: 13px;
+  font-weight: 500;
+}
+
+/* Filter wrapper - symmetric and modular layout */
+.filterWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  width: 100%;
+  min-width: 0; /* Allow shrinking */
+}
+
+.datepickerWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0; /* Allow shrinking */
+}
+
+/* Date picker input group - includes input and clear button */
+.datePickerInputGroup {
+  display: flex;
+  gap: 8px;
+  align-items: stretch;
+  width: 100%;
+}
+
+.datePickerInputGroup :global(.react-datepicker-wrapper) {
+  flex: 1;
+  min-width: 0;
+}
+
+.datePickerInputGroup :global(button) {
+  flex-shrink: 0;
+  min-width: 38px;
+  height: 38px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Filter label styles - consistent across all filters */
+.filterLabel {
+  font-size: 13px;
+  font-weight: 600;
+  color: #000000;
+  margin: 0;
+  line-height: 1.4;
+  display: block;
+  min-height: 19px; /* Ensure consistent height for alignment */
+}
+
+/* Dark mode for filter labels - white text */
+:global(.tools-availability-page.dark-mode) .filterLabel,
+:global(.tools-availability-page.dark-mode .filterLabel) {
+  color: #ffffff !important;
+}
+
 /* Filter controls layout for small screens - gradient scaling */
 @media (max-width: 480px) {
   :global(.tools-availability-page) {
@@ -237,27 +300,26 @@
     margin-bottom: 8px;
   }
 
-  :global(.datepickerWrapper) {
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    width: 100%;
-    max-width: 100%;
+  .datepickerWrapper {
+    gap: 5px;
   }
 
-  :global(.datepickerWrapper .btn) {
-    margin-top: 8px;
-    width: 100%;
+  .filterWrapper {
+    gap: 5px;
   }
 
-  :global(.customSelect__control) {
-    font-size: 10px;
-    width: 100%;
-    max-width: 100%;
+  .resetWrapper {
+    gap: 5px;
   }
 
-  :global(.customSelect__multi-value) {
-    font-size: 10px;
+  .filterLabel {
+    font-size: 11px;
+    min-height: 16px;
+  }
+
+  .resetButton {
+    height: 36px;
+    font-size: 11px;
   }
 
   :global(.tools-horizontal-chart-container) {
@@ -292,27 +354,18 @@
     margin-bottom: 8px;
   }
 
-  :global(.datepickerWrapper) {
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    width: 100%;
-    max-width: 100%;
-  }
-
-  :global(.datepickerWrapper .btn) {
-    margin-top: 8px;
-    width: 100%;
+  .filterLabel {
+    font-size: 11.5px;
+    min-height: 17px;
   }
 
-  :global(.customSelect__control) {
-    font-size: 10px;
-    width: 100%;
-    max-width: 100%;
+  .resetWrapper {
+    gap: 5px;
   }
 
-  :global(.customSelect__multi-value) {
-    font-size: 1rem;
+  .resetButton {
+    height: 36px;
+    font-size: 11.5px;
   }
 }
 

From e6e9c89401b8b0e035b2ee5f272a2ef8ae775208 Mon Sep 17 00:00:00 2001
From: Aditya Gambhir <67105262+Aditya-gam@users.noreply.github.com>
Date: Sat, 6 Dec 2025 13:12:44 -0800
Subject: [PATCH 17/29] fix(tools-charts): ensure consistent date picker sizing
 across light and dark modes

- Standardize date picker input dimensions to match other form inputs (38px height)
- Ensure dark mode only changes colors, not sizes or dimensions
- Remove inline styles that could cause sizing inconsistencies
- Set consistent font-size (13px), padding (8px 12px), and border-radius (6px)
- Make date picker visually identical in both modes except for colors
---
 .../Tools/ToolsStoppageHorizontalBarChart.jsx |  5 --
 ...ToolsStoppageHorizontalBarChart.module.css | 56 +++++++++----------
 2 files changed, 27 insertions(+), 34 deletions(-)

diff --git a/src/components/BMDashboard/Tools/ToolsStoppageHorizontalBarChart.jsx b/src/components/BMDashboard/Tools/ToolsStoppageHorizontalBarChart.jsx
index d75d6c9c94..ebd812474e 100644
--- a/src/components/BMDashboard/Tools/ToolsStoppageHorizontalBarChart.jsx
+++ b/src/components/BMDashboard/Tools/ToolsStoppageHorizontalBarChart.jsx
@@ -477,11 +477,6 @@ export default function ToolsStoppageHorizontalBarChart() {
                 className={styles.datePickerInput}
                 calendarClassName={darkMode ? 'darkThemeCalendar' : 'customCalendar'}
                 wrapperClassName={darkMode ? 'darkThemeDatePickerWrapper' : ''}
-                style={{
-                  backgroundColor: darkMode ? '#2b3e59' : '#ffffff',
-                  color: darkMode ? '#ffffff' : '#000000',
-                  border: `1px solid ${darkMode ? '#666' : '#ccc'}`,
-                }}
               />
               <Button variant="outline-danger" size="sm" onClick={() => setDateRange([null, null])}>
                 ✕
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsStoppageHorizontalBarChart/ToolsStoppageHorizontalBarChart.module.css b/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsStoppageHorizontalBarChart/ToolsStoppageHorizontalBarChart.module.css
index db3cb8f864..17d007878a 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsStoppageHorizontalBarChart/ToolsStoppageHorizontalBarChart.module.css
+++ b/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsStoppageHorizontalBarChart/ToolsStoppageHorizontalBarChart.module.css
@@ -2,47 +2,38 @@
 /* No global CSS overrides - inline styles have higher specificity and are the proper way */
 /* Removing any global overrides that might conflict */
 
-/* Date picker input - light mode */
-:global(.datePickerInput) {
-  font-size: 10px !important;
-  padding: 6px 8px;
-  border-radius: 4px;
+/* Date picker input - consistent sizing in all modes */
+/* Base styles define size - dark mode only changes colors */
+:global(.datePickerInput),
+:global(.react-datepicker-wrapper input),
+:global(.react-datepicker-wrapper .datePickerInput) {
+  font-size: 13px !important;
+  padding: 8px 12px !important;
+  height: 38px !important;
+  line-height: 1.5 !important;
+  border-radius: 6px !important;
+  border-width: 1px !important;
+  border-style: solid !important;
+  box-sizing: border-box !important;
+  width: 100% !important;
+  min-width: 0 !important;
   background-color: #ffffff !important;
   color: #000000 !important;
-  border: 1px solid #ccc !important;
+  border-color: #ccc !important;
 }
 
-/* Date picker input - dark mode (when darkTheme class is applied) */
-/* react-datepicker applies className to the input wrapper, need to target input directly */
+/* Date picker input - dark mode (ONLY colors change, sizes stay the same) */
 :global(.react-datepicker-wrapper.darkThemeDatePickerWrapper .datePickerInput),
 :global(.react-datepicker-wrapper.darkThemeDatePickerWrapper input),
-:global(.darkTheme.datePickerInput),
-:global(.datePickerInput.darkTheme),
-:global(input.darkTheme.datePickerInput),
-:global(input.datePickerInput.darkTheme),
-:global(.form-control.darkTheme.datePickerInput),
-:global(.darkTheme.form-control.datePickerInput) {
-  background-color: #2b3e59 !important;
-  color: #ffffff !important;
-  border: 1px solid #666 !important;
-  font-size: 10px !important;
-}
-
-/* Also target the wrapper's input when darkTheme is on parent */
 :global(.tools-availability-page.dark-mode .react-datepicker-wrapper input.datePickerInput),
 :global(.tools-availability-page.dark-mode .datePickerInput),
-:global(.tools-availability-page.dark-mode .react-datepicker-wrapper input) {
-  background-color: #2b3e59 !important;
-  color: #ffffff !important;
-  border: 1px solid #666 !important;
-}
-
-/* Ensure dark mode wrapper targets the input properly */
+:global(.tools-availability-page.dark-mode .react-datepicker-wrapper input),
 :global(.react-datepicker-wrapper.darkThemeDatePickerWrapper input[type="text"]),
 :global(.react-datepicker-wrapper.darkThemeDatePickerWrapper input[type="text"].datePickerInput) {
+  /* Only override colors - sizes inherit from base */
   background-color: #2b3e59 !important;
   color: #ffffff !important;
-  border: 1px solid #666 !important;
+  border-color: #666 !important;
 }
 
 /* Light mode calendar styles */
@@ -244,6 +235,12 @@
 .datePickerInputGroup :global(.react-datepicker-wrapper) {
   flex: 1;
   min-width: 0;
+  display: flex;
+}
+
+.datePickerInputGroup :global(.react-datepicker-wrapper input) {
+  flex: 1;
+  min-width: 0;
 }
 
 .datePickerInputGroup :global(button) {
@@ -253,6 +250,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  padding: 0;
 }
 
 /* Filter label styles - consistent across all filters */

From e22157c1dddceb33d4494a6007ad0793f23c16db Mon Sep 17 00:00:00 2001
From: Aditya Gambhir <67105262+Aditya-gam@users.noreply.github.com>
Date: Sat, 6 Dec 2025 13:26:04 -0800
Subject: [PATCH 18/29] fix(tools-charts): populate dropdown options in
 ToolStatusDonutChart

- Fix tools dropdown to use correct data structure (tool.itemType._id and tool.itemType.name)
- Fetch projects from TOOLS_AVAILABILITY_PROJECTS endpoint instead of extracting from toolslist
- Fix projects dropdown to properly display available projects
- Add projects state and useEffect to fetch projects data
- Ensure dropdown options remain available after selection (use unfiltered data sources)
- Match data structure access pattern used in EquipmentUpdateForm component
---
 .../ToolStatusDonutChart.jsx                  | 20 +++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.jsx b/src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.jsx
index 8a014fe357..e06e9eb0c7 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.jsx
+++ b/src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.jsx
@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import { useState, useEffect, useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import Select from 'react-select';
+import axios from 'axios';
 import { PieChart, Pie, Cell, Tooltip, ResponsiveContainer } from 'recharts';
 import { fetchToolAvailability, fetchTools } from '../../../../actions/bmdashboard/toolActions';
 import styles from './ToolStatusDonutChart.module.css';
@@ -166,27 +167,30 @@ export default function ToolStatusDonutChart() {
   const chartData = availabilityData?.data || [];
   const total = availabilityData?.total || 0;
 
-  // Use unfiltered toolslist for options to prevent options disappearing after selection
-  // availabilityData is only used for chart data, not for building dropdown options
+  // Extract unique projects from fetched projects list
   const uniqueProjects = useMemo(
     () =>
       Array.from(
         new Map(
-          toolslist
-            .filter(t => t?.projectId)
-            .map(t => [t.projectId, { id: t.projectId, name: t.projectName || 'Unnamed Project' }]),
+          projects
+            .filter(p => p?.projectId)
+            .map(p => [
+              p.projectId,
+              { id: p.projectId, name: p.projectName || p.projectId || 'Unnamed Project' },
+            ]),
         ).values(),
       ),
-    [toolslist],
+    [projects],
   );
 
+  // Extract unique tools from toolslist using correct data structure (tool.itemType._id and tool.itemType.name)
   const uniqueTools = useMemo(
     () =>
       Array.from(
         new Map(
           toolslist
-            .filter(t => t?.toolId)
-            .map(t => [t.toolId, { id: t.toolId, name: t.name || 'Unnamed Tool' }]),
+            .filter(t => t?.itemType?._id && t?.itemType?.name)
+            .map(t => [t.itemType._id, { id: t.itemType._id, name: t.itemType.name }]),
         ).values(),
       ),
     [toolslist],

From 35caf31d8f06a8e6ca9df6750d3f3f6d5fda5d23 Mon Sep 17 00:00:00 2001
From: Aditya Gambhir <67105262+Aditya-gam@users.noreply.github.com>
Date: Sat, 6 Dec 2025 13:41:49 -0800
Subject: [PATCH 19/29] refactor(tools-charts): reduce cognitive complexity and
 eliminate code duplication

- Extract react-select option styling logic into shared utility functions
- Create reactSelectUtils.js with getOptionBackgroundColor and getOptionColor helpers
- Replace nested ternary operators with if-else statements in helper functions
- Remove duplicate helper functions from ToolStatusDonutChart and ToolsHorizontalBarChart
- Reduce cognitive complexity from 17 to below 15 in both components
- Eliminate code duplication by centralizing shared styling logic
---
 .../ToolStatusDonutChart.jsx                  | 14 ++------
 src/utils/reactSelectUtils.js                 | 34 +++++++++++++++++++
 2 files changed, 36 insertions(+), 12 deletions(-)
 create mode 100644 src/utils/reactSelectUtils.js

diff --git a/src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.jsx b/src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.jsx
index e06e9eb0c7..d9ba888985 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.jsx
+++ b/src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.jsx
@@ -257,18 +257,8 @@ export default function ToolStatusDonutChart() {
       }),
       option: (base, state) => ({
         ...base,
-        backgroundColor: state.isSelected
-          ? darkMode
-            ? '#e8a71c'
-            : '#0d55b3'
-          : state.isFocused
-          ? darkMode
-            ? '#3a506b'
-            : '#f0f0f0'
-          : darkMode
-          ? '#253342'
-          : '#fff',
-        color: state.isSelected ? (darkMode ? '#000' : '#fff') : darkMode ? '#ffffff' : '#000',
+        backgroundColor: getOptionBackgroundColor(state, darkMode),
+        color: getOptionColor(state, darkMode),
         cursor: 'pointer',
         padding: '8px 12px',
         fontSize: '12px',
diff --git a/src/utils/reactSelectUtils.js b/src/utils/reactSelectUtils.js
new file mode 100644
index 0000000000..0241695980
--- /dev/null
+++ b/src/utils/reactSelectUtils.js
@@ -0,0 +1,34 @@
+/**
+ * Utility functions for react-select styling to reduce code duplication
+ * and cognitive complexity
+ */
+
+/**
+ * Get background color for react-select option based on state and theme
+ * @param {Object} state - react-select option state (isSelected, isFocused, etc.)
+ * @param {boolean} isDarkMode - Whether dark mode is enabled
+ * @returns {string} Background color hex code
+ */
+export const getOptionBackgroundColor = (state, isDarkMode) => {
+  if (state.isSelected) {
+    return isDarkMode ? '#e8a71c' : '#0d55b3';
+  }
+  if (state.isFocused) {
+    return isDarkMode ? '#3a506b' : '#f0f0f0';
+  }
+  return isDarkMode ? '#253342' : '#fff';
+};
+
+/**
+ * Get text color for react-select option based on state and theme
+ * @param {Object} state - react-select option state (isSelected, isFocused, etc.)
+ * @param {boolean} isDarkMode - Whether dark mode is enabled
+ * @returns {string} Text color hex code
+ */
+export const getOptionColor = (state, isDarkMode) => {
+  if (state.isSelected) {
+    return isDarkMode ? '#000' : '#fff';
+  }
+  return isDarkMode ? '#ffffff' : '#000';
+};
+

From 0eee7bef0c685f902db1cb1b5e81af770f69c283 Mon Sep 17 00:00:00 2001
From: Aditya Gambhir <67105262+Aditya-gam@users.noreply.github.com>
Date: Sat, 6 Dec 2025 14:00:27 -0800
Subject: [PATCH 20/29] fix(tools-charts): resolve SonarQube issues and reduce
 code duplication

- Extract nested ternary operations to shared utility functions
- Reduce cognitive complexity from 17 to below 15 in ToolsStoppageHorizontalBarChart
- Fix CSS contrast issues in datepicker calendar (lines 58 and 69)
- Extract complete selectStyles object to shared getStandardSelectStyles utility
- Eliminate code duplication by centralizing react-select styling logic
- Update both ToolsStoppageHorizontalBarChart and ToolStatusDonutChart to use shared utilities
- Improve maintainability with single source of truth for react-select styles
---
 .../Tools/ToolsStoppageHorizontalBarChart.jsx | 82 +------------------
 .../ToolStatusDonutChart.jsx                  | 80 ++----------------
 ...ToolsStoppageHorizontalBarChart.module.css |  4 +-
 src/utils/reactSelectUtils.js                 | 75 +++++++++++++++++
 4 files changed, 88 insertions(+), 153 deletions(-)

diff --git a/src/components/BMDashboard/Tools/ToolsStoppageHorizontalBarChart.jsx b/src/components/BMDashboard/Tools/ToolsStoppageHorizontalBarChart.jsx
index ebd812474e..e22fe7c969 100644
--- a/src/components/BMDashboard/Tools/ToolsStoppageHorizontalBarChart.jsx
+++ b/src/components/BMDashboard/Tools/ToolsStoppageHorizontalBarChart.jsx
@@ -18,6 +18,7 @@ import { Bar } from 'react-chartjs-2';
 import httpService from '../../../services/httpService';
 import logService from '../../../services/logService';
 import { ENDPOINTS } from '../../../utils/URL';
+import { getStandardSelectStyles } from '../../../utils/reactSelectUtils';
 import styles from './ToolsStoppageHorizontalBarChart.module.css';
 
 // Register Chart.js components
@@ -289,85 +290,8 @@ export default function ToolsStoppageHorizontalBarChart() {
   const dateRangeLabel =
     startDate && endDate ? `${formatDate(startDate)} - ${formatDate(endDate)}` : '';
 
-  // Consistent react-select styles matching paid-labor-cost pattern
-  const selectStyles = {
-    control: base => ({
-      ...base,
-      minHeight: '38px',
-      fontSize: '12px',
-      backgroundColor: darkMode ? '#253342' : '#fff',
-      borderColor: darkMode ? '#2d4059' : '#ccc',
-      color: darkMode ? '#ffffff' : '#000',
-      boxShadow: 'none',
-      borderRadius: '6px',
-      '&:hover': {
-        borderColor: darkMode ? '#2d4059' : '#999',
-      },
-    }),
-    valueContainer: base => ({
-      ...base,
-      padding: '2px 8px',
-      color: darkMode ? '#ffffff' : '#000',
-    }),
-    input: base => ({
-      ...base,
-      margin: '0px',
-      padding: '0px',
-      color: darkMode ? '#ffffff' : '#000',
-    }),
-    indicatorsContainer: base => ({
-      ...base,
-      padding: '0 4px',
-    }),
-    menu: base => ({
-      ...base,
-      backgroundColor: darkMode ? '#253342' : '#fff',
-      fontSize: '12px',
-    }),
-    option: (base, state) => ({
-      ...base,
-      backgroundColor: state.isSelected
-        ? darkMode
-          ? '#e8a71c'
-          : '#0d55b3'
-        : state.isFocused
-        ? darkMode
-          ? '#3a506b'
-          : '#f0f0f0'
-        : darkMode
-        ? '#253342'
-        : '#fff',
-      color: state.isSelected ? (darkMode ? '#000' : '#fff') : darkMode ? '#ffffff' : '#000',
-      cursor: 'pointer',
-      padding: '8px 12px',
-      fontSize: '12px',
-      ':active': {
-        backgroundColor: darkMode ? '#3a506b' : '#e0e0e0',
-      },
-    }),
-    singleValue: base => ({
-      ...base,
-      color: darkMode ? '#ffffff' : '#000',
-      fontSize: '12px',
-    }),
-    placeholder: base => ({
-      ...base,
-      color: darkMode ? '#aaaaaa' : '#666',
-      fontSize: '12px',
-    }),
-    indicatorSeparator: base => ({
-      ...base,
-      backgroundColor: darkMode ? '#2d4059' : '#ccc',
-    }),
-    dropdownIndicator: base => ({
-      ...base,
-      color: darkMode ? '#ffffff' : '#999',
-      padding: '4px',
-      ':hover': {
-        color: darkMode ? '#ffffff' : '#666',
-      },
-    }),
-  };
+  // Use shared react-select styles to reduce duplication
+  const selectStyles = getStandardSelectStyles(darkMode);
 
   // Prepare Chart.js data with responsive bar thickness
   const chartData = {
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.jsx b/src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.jsx
index d9ba888985..f3096134be 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.jsx
+++ b/src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.jsx
@@ -5,7 +5,13 @@ import Select from 'react-select';
 import axios from 'axios';
 import { PieChart, Pie, Cell, Tooltip, ResponsiveContainer } from 'recharts';
 import { fetchToolAvailability, fetchTools } from '../../../../actions/bmdashboard/toolActions';
+<<<<<<< HEAD
 import styles from './ToolStatusDonutChart.module.css';
+=======
+import { ENDPOINTS } from '../../../../utils/URL';
+import { getStandardSelectStyles } from '../../../../utils/reactSelectUtils';
+import './ToolStatusDonutChart.css';
+>>>>>>> 5216f1f61 (fix(tools-charts): resolve SonarQube issues and reduce code duplication)
 
 const COLORS = {
   AVAILABLE: '#220F57',
@@ -219,78 +225,8 @@ export default function ToolStatusDonutChart() {
     [uniqueTools],
   );
 
-  // Consistent react-select styles matching paid-labor-cost pattern
-  const selectStyles = useMemo(
-    () => ({
-      control: base => ({
-        ...base,
-        minHeight: '38px',
-        fontSize: '12px',
-        backgroundColor: darkMode ? '#253342' : '#fff',
-        borderColor: darkMode ? '#2d4059' : '#ccc',
-        color: darkMode ? '#ffffff' : '#000',
-        boxShadow: 'none',
-        borderRadius: '6px',
-        '&:hover': {
-          borderColor: darkMode ? '#2d4059' : '#999',
-        },
-      }),
-      valueContainer: base => ({
-        ...base,
-        padding: '2px 8px',
-        color: darkMode ? '#ffffff' : '#000',
-      }),
-      input: base => ({
-        ...base,
-        margin: '0px',
-        padding: '0px',
-        color: darkMode ? '#ffffff' : '#000',
-      }),
-      indicatorsContainer: base => ({
-        ...base,
-        padding: '0 4px',
-      }),
-      menu: base => ({
-        ...base,
-        backgroundColor: darkMode ? '#253342' : '#fff',
-        fontSize: '12px',
-      }),
-      option: (base, state) => ({
-        ...base,
-        backgroundColor: getOptionBackgroundColor(state, darkMode),
-        color: getOptionColor(state, darkMode),
-        cursor: 'pointer',
-        padding: '8px 12px',
-        fontSize: '12px',
-        ':active': {
-          backgroundColor: darkMode ? '#3a506b' : '#e0e0e0',
-        },
-      }),
-      singleValue: base => ({
-        ...base,
-        color: darkMode ? '#ffffff' : '#000',
-        fontSize: '12px',
-      }),
-      placeholder: base => ({
-        ...base,
-        color: darkMode ? '#aaaaaa' : '#666',
-        fontSize: '12px',
-      }),
-      indicatorSeparator: base => ({
-        ...base,
-        backgroundColor: darkMode ? '#2d4059' : '#ccc',
-      }),
-      dropdownIndicator: base => ({
-        ...base,
-        color: darkMode ? '#ffffff' : '#999',
-        padding: '4px',
-        ':hover': {
-          color: darkMode ? '#ffffff' : '#666',
-        },
-      }),
-    }),
-    [darkMode],
-  );
+  // Use shared react-select styles to reduce duplication
+  const selectStyles = useMemo(() => getStandardSelectStyles(darkMode), [darkMode]);
 
   // Gradient responsive sizing - matches other charts for consistent height
   // Scales smoothly from smallest phones to desktop
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsStoppageHorizontalBarChart/ToolsStoppageHorizontalBarChart.module.css b/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsStoppageHorizontalBarChart/ToolsStoppageHorizontalBarChart.module.css
index 17d007878a..01f683cbc5 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsStoppageHorizontalBarChart/ToolsStoppageHorizontalBarChart.module.css
+++ b/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsStoppageHorizontalBarChart/ToolsStoppageHorizontalBarChart.module.css
@@ -54,7 +54,7 @@
 }
 
 :global(.customCalendar .react-datepicker__day--keyboard-selected) {
-  background-color: #7d7e7f !important;
+  background-color: #5a5a5a !important;
   color: #ffffff !important;
 }
 
@@ -70,7 +70,7 @@
 }
 
 :global(.customCalendar .react-datepicker__day--selected) {
-  background-color: #007bff !important;
+  background-color: #0066cc !important;
   color: #ffffff !important;
   border-radius: 50%;
 }
diff --git a/src/utils/reactSelectUtils.js b/src/utils/reactSelectUtils.js
index 0241695980..19cd0cf70c 100644
--- a/src/utils/reactSelectUtils.js
+++ b/src/utils/reactSelectUtils.js
@@ -32,3 +32,78 @@ export const getOptionColor = (state, isDarkMode) => {
   return isDarkMode ? '#ffffff' : '#000';
 };
 
+/**
+ * Get standardized react-select styles matching paid-labor-cost pattern
+ * This reduces code duplication across components
+ * @param {boolean} isDarkMode - Whether dark mode is enabled
+ * @returns {Object} react-select styles object
+ */
+export const getStandardSelectStyles = isDarkMode => ({
+  control: base => ({
+    ...base,
+    minHeight: '38px',
+    fontSize: '12px',
+    backgroundColor: isDarkMode ? '#253342' : '#fff',
+    borderColor: isDarkMode ? '#2d4059' : '#ccc',
+    color: isDarkMode ? '#ffffff' : '#000',
+    boxShadow: 'none',
+    borderRadius: '6px',
+    '&:hover': {
+      borderColor: isDarkMode ? '#2d4059' : '#999',
+    },
+  }),
+  valueContainer: base => ({
+    ...base,
+    padding: '2px 8px',
+    color: isDarkMode ? '#ffffff' : '#000',
+  }),
+  input: base => ({
+    ...base,
+    margin: '0px',
+    padding: '0px',
+    color: isDarkMode ? '#ffffff' : '#000',
+  }),
+  indicatorsContainer: base => ({
+    ...base,
+    padding: '0 4px',
+  }),
+  menu: base => ({
+    ...base,
+    backgroundColor: isDarkMode ? '#253342' : '#fff',
+    fontSize: '12px',
+  }),
+  option: (base, state) => ({
+    ...base,
+    backgroundColor: getOptionBackgroundColor(state, isDarkMode),
+    color: getOptionColor(state, isDarkMode),
+    cursor: 'pointer',
+    padding: '8px 12px',
+    fontSize: '12px',
+    ':active': {
+      backgroundColor: isDarkMode ? '#3a506b' : '#e0e0e0',
+    },
+  }),
+  singleValue: base => ({
+    ...base,
+    color: isDarkMode ? '#ffffff' : '#000',
+    fontSize: '12px',
+  }),
+  placeholder: base => ({
+    ...base,
+    color: isDarkMode ? '#aaaaaa' : '#666',
+    fontSize: '12px',
+  }),
+  indicatorSeparator: base => ({
+    ...base,
+    backgroundColor: isDarkMode ? '#2d4059' : '#ccc',
+  }),
+  dropdownIndicator: base => ({
+    ...base,
+    color: isDarkMode ? '#ffffff' : '#999',
+    padding: '4px',
+    ':hover': {
+      color: isDarkMode ? '#ffffff' : '#666',
+    },
+  }),
+});
+

From 3a6cf9962f6bf8bcff808d616953f75c9fbdbaa5 Mon Sep 17 00:00:00 2001
From: Aditya Gambhir <67105262+Aditya-gam@users.noreply.github.com>
Date: Wed, 18 Feb 2026 16:59:36 -0800
Subject: [PATCH 21/29] fix(tools): prevent chart clipping in stoppage and
 horizontal bar charts

- ToolsStoppageHorizontalBarChart: replace nested flex wrappers with single
  div using explicit pixel height; remove overflow clipping
- ToolsStoppageHorizontalBarChart.module.css: remove flex:1, min-height:0,
  overflow:hidden from .tools-horizontal-chart-container
- ToolsHorizontalBarChart.css: remove flex/min-height from content area,
  set overflow:visible to avoid tooltip clipping

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../Tools/ToolsStoppageHorizontalBarChart.jsx      | 14 ++------------
 .../Tools/ToolsHorizontalBarChart.module.css       |  7 ++-----
 .../ToolsStoppageHorizontalBarChart.module.css     |  6 ++----
 3 files changed, 6 insertions(+), 21 deletions(-)

diff --git a/src/components/BMDashboard/Tools/ToolsStoppageHorizontalBarChart.jsx b/src/components/BMDashboard/Tools/ToolsStoppageHorizontalBarChart.jsx
index e22fe7c969..d56817eadc 100644
--- a/src/components/BMDashboard/Tools/ToolsStoppageHorizontalBarChart.jsx
+++ b/src/components/BMDashboard/Tools/ToolsStoppageHorizontalBarChart.jsx
@@ -455,23 +455,13 @@ export default function ToolsStoppageHorizontalBarChart() {
           <div
             style={{
               width: '100%',
-              maxWidth: '100%',
-              flex: 1,
-              display: 'flex',
-              flexDirection: 'column',
-              justifyContent: 'center',
-              alignItems: 'stretch',
               position: 'relative',
+              height: `${getChartHeight()}px`,
               backgroundColor: darkMode ? '#2c3344' : '#ffffff',
               borderRadius: '4px',
-              padding: '8px',
-              /* Allow container to shrink to match donut chart height */
-              minHeight: 0,
             }}
           >
-            <div style={{ flex: 1, display: 'flex', alignItems: 'center', overflow: 'hidden' }}>
-              <Bar data={chartData} options={chartOptions} height={getChartHeight()} />
-            </div>
+            <Bar data={chartData} options={chartOptions} />
           </div>
         )}
 
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsHorizontalBarChart.module.css b/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsHorizontalBarChart.module.css
index a80901cb69..8e46a95859 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsHorizontalBarChart.module.css
+++ b/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsHorizontalBarChart.module.css
@@ -41,13 +41,10 @@
 }
 
 .tools-horizontal-bar-chart-content {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
+  display: block;
   width: 100%;
   max-width: 100%;
-  overflow: hidden; /* Prevent overflow on small screens */
+  overflow: visible; /* Allow chart tooltips and labels to show */
 }
 
 .tools-horizontal-bar-chart-loading {
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsStoppageHorizontalBarChart/ToolsStoppageHorizontalBarChart.module.css b/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsStoppageHorizontalBarChart/ToolsStoppageHorizontalBarChart.module.css
index 01f683cbc5..c45dbc1bdc 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsStoppageHorizontalBarChart/ToolsStoppageHorizontalBarChart.module.css
+++ b/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsStoppageHorizontalBarChart/ToolsStoppageHorizontalBarChart.module.css
@@ -121,17 +121,15 @@
 /* React-select styling is handled ONLY via inline styles in JSX */
 /* No CSS overrides needed or wanted - inline styles are the proper method */
 
-/* Chart container - expand to fill available space */
+/* Chart container - sized by explicit chart height, no overflow clipping */
 :global(.tools-horizontal-chart-container) {
   width: 100%;
   max-width: 100%;
-  flex: 1; /* Expand to fill available space in flex container */
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
   background-color: #ffffff !important; /* White background to show through transparent canvas */
-  min-height: 0; /* Allow flex shrinking */
-  overflow: hidden; /* Prevent overflow on small screens */
+  overflow: visible; /* Allow chart labels and tooltips to render outside */
 }
 
 /* Dark mode for chart container */

From 3314eab15baa9086791a2c228eb96303516d3f7c Mon Sep 17 00:00:00 2001
From: Aditya Gambhir <67105262+Aditya-gam@users.noreply.github.com>
Date: Wed, 18 Feb 2026 17:52:59 -0800
Subject: [PATCH 22/29] chore(utils): add chartResponsiveUtils for shared chart
 breakpoint logic

Centralize responsive breakpoints (375, 428, 480, 768, 1024) and export
getValueForBreakpoints plus getChartHeight, getChartMargins, getYAxisWidth,
getChartFontSize, getMaxBarThickness, getCategoryPercentage, getBarPercentage,
getChartTitleFontSize for use by tools charts.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 src/utils/chartResponsiveUtils.js | 64 +++++++++++++++++++++++++++++++
 1 file changed, 64 insertions(+)
 create mode 100644 src/utils/chartResponsiveUtils.js

diff --git a/src/utils/chartResponsiveUtils.js b/src/utils/chartResponsiveUtils.js
new file mode 100644
index 0000000000..5ae745cdb9
--- /dev/null
+++ b/src/utils/chartResponsiveUtils.js
@@ -0,0 +1,64 @@
+/**
+ * Shared responsive breakpoint utilities for BMDashboard charts.
+ * Uses consistent breakpoints (375, 428, 480, 768, 1024) to avoid duplication
+ * between ToolsHorizontalBarChart and ToolsStoppageHorizontalBarChart.
+ */
+
+const BREAKPOINTS = [375, 428, 480, 768, 1024];
+
+/**
+ * Resolve a value for current window width from an array of values per breakpoint.
+ * @param {number} windowWidth - Current window width
+ * @param {number[]} values - [at375, at428, at480, at768, at1024, default]
+ * @returns {number}
+ */
+export function getValueForBreakpoints(windowWidth, values) {
+  for (let i = 0; i < BREAKPOINTS.length; i++) {
+    if (windowWidth <= BREAKPOINTS[i]) return values[i];
+  }
+  return values[values.length - 1];
+}
+
+/** Chart height in px: 180 → 300 from small phone to desktop */
+export function getChartHeight(windowWidth) {
+  return getValueForBreakpoints(windowWidth, [180, 200, 220, 240, 280, 300]);
+}
+
+/** Recharts bar chart margins: { top, right, left, bottom } */
+export function getChartMargins(windowWidth) {
+  const tops = getValueForBreakpoints(windowWidth, [3, 4, 4, 5, 8, 10]);
+  const rights = getValueForBreakpoints(windowWidth, [3, 4, 4, 5, 15, 30]);
+  const lefts = getValueForBreakpoints(windowWidth, [12, 13, 14, 15, 25, 40]);
+  const bottoms = getValueForBreakpoints(windowWidth, [3, 4, 4, 5, 8, 10]);
+  return { top: tops, right: rights, left: lefts, bottom: bottoms };
+}
+
+/** Y-axis width for Recharts */
+export function getYAxisWidth(windowWidth) {
+  return getValueForBreakpoints(windowWidth, [18, 19, 19.5, 20, 28, 35]);
+}
+
+/** Font size for axis/tick labels (shared by both charts) */
+export function getChartFontSize(windowWidth) {
+  return getValueForBreakpoints(windowWidth, [8, 9, 9.5, 10, 11, 12]);
+}
+
+/** Chart.js maxBarThickness for ToolsStoppageHorizontalBarChart */
+export function getMaxBarThickness(windowWidth) {
+  return getValueForBreakpoints(windowWidth, [15, 16, 18, 20, 22, 25]);
+}
+
+/** Chart.js categoryPercentage for ToolsStoppageHorizontalBarChart */
+export function getCategoryPercentage(windowWidth) {
+  return getValueForBreakpoints(windowWidth, [0.45, 0.47, 0.48, 0.5, 0.55, 0.6]);
+}
+
+/** Chart.js barPercentage for ToolsStoppageHorizontalBarChart */
+export function getBarPercentage(windowWidth) {
+  return getValueForBreakpoints(windowWidth, [0.8, 0.82, 0.84, 0.85, 0.87, 0.9]);
+}
+
+/** Chart.js title font size for ToolsStoppageHorizontalBarChart */
+export function getChartTitleFontSize(windowWidth) {
+  return getValueForBreakpoints(windowWidth, [9, 10, 10.5, 11, 12, 14]);
+}

From cb49d2bf0bd32d00071f8f6a39d3fe9ae1eecda2 Mon Sep 17 00:00:00 2001
From: Aditya Gambhir <67105262+Aditya-gam@users.noreply.github.com>
Date: Wed, 18 Feb 2026 17:53:24 -0800
Subject: [PATCH 23/29] refactor(tools): use chartResponsiveUtils in both tools
 charts

Remove duplicated responsive logic from ToolsHorizontalBarChart and
ToolsStoppageHorizontalBarChart; both now import shared helpers from
chartResponsiveUtils. Reduces SonarQube duplicated lines on new code
while keeping behavior unchanged (same breakpoints and values).

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../Tools/ToolsStoppageHorizontalBarChart.jsx | 134 +++---------------
 .../Tools/ToolsHorizontalBarChart.jsx         |  72 +---------
 2 files changed, 21 insertions(+), 185 deletions(-)

diff --git a/src/components/BMDashboard/Tools/ToolsStoppageHorizontalBarChart.jsx b/src/components/BMDashboard/Tools/ToolsStoppageHorizontalBarChart.jsx
index d56817eadc..aa24bb49ae 100644
--- a/src/components/BMDashboard/Tools/ToolsStoppageHorizontalBarChart.jsx
+++ b/src/components/BMDashboard/Tools/ToolsStoppageHorizontalBarChart.jsx
@@ -19,6 +19,14 @@ import httpService from '../../../services/httpService';
 import logService from '../../../services/logService';
 import { ENDPOINTS } from '../../../utils/URL';
 import { getStandardSelectStyles } from '../../../utils/reactSelectUtils';
+import {
+  getChartHeight,
+  getMaxBarThickness,
+  getCategoryPercentage,
+  getBarPercentage,
+  getChartFontSize,
+  getChartTitleFontSize,
+} from '../../../utils/chartResponsiveUtils';
 import styles from './ToolsStoppageHorizontalBarChart.module.css';
 
 // Register Chart.js components
@@ -44,116 +52,12 @@ export default function ToolsStoppageHorizontalBarChart() {
   const [windowWidth, setWindowWidth] = useState(window.innerWidth);
   const emptyData = [];
 
-  // Responsive height calculation
   useEffect(() => {
     const handleResize = () => setWindowWidth(window.innerWidth);
     window.addEventListener('resize', handleResize);
     return () => window.removeEventListener('resize', handleResize);
   }, []);
 
-  // Gradient responsive chart height scaling based on screen width
-  // Scales smoothly from smallest phones (180px) to desktop (300px)
-  const getChartHeight = () => {
-    if (windowWidth <= 375) {
-      // Small phones (iPhone SE, iPhone 12 mini): 180px
-      return 180;
-    } else if (windowWidth <= 428) {
-      // Medium phones (iPhone 12/13/14): 200px
-      return 200;
-    } else if (windowWidth <= 480) {
-      // Large phones: 220px
-      return 220;
-    } else if (windowWidth <= 768) {
-      // Tablets in portrait: 240px
-      return 240;
-    } else if (windowWidth <= 1024) {
-      // Tablets in landscape: 280px
-      return 280;
-    }
-    // Desktop: 300px
-    return 300;
-  };
-
-  // Gradient responsive maxBarThickness scaling
-  const getMaxBarThickness = () => {
-    if (windowWidth <= 375) {
-      return 15;
-    } else if (windowWidth <= 428) {
-      return 16;
-    } else if (windowWidth <= 480) {
-      return 18;
-    } else if (windowWidth <= 768) {
-      return 20;
-    } else if (windowWidth <= 1024) {
-      return 22;
-    }
-    return 25;
-  };
-
-  // Gradient responsive categoryPercentage scaling
-  const getCategoryPercentage = () => {
-    if (windowWidth <= 375) {
-      return 0.45;
-    } else if (windowWidth <= 428) {
-      return 0.47;
-    } else if (windowWidth <= 480) {
-      return 0.48;
-    } else if (windowWidth <= 768) {
-      return 0.5;
-    } else if (windowWidth <= 1024) {
-      return 0.55;
-    }
-    return 0.6;
-  };
-
-  // Gradient responsive barPercentage scaling
-  const getBarPercentage = () => {
-    if (windowWidth <= 375) {
-      return 0.8;
-    } else if (windowWidth <= 428) {
-      return 0.82;
-    } else if (windowWidth <= 480) {
-      return 0.84;
-    } else if (windowWidth <= 768) {
-      return 0.85;
-    } else if (windowWidth <= 1024) {
-      return 0.87;
-    }
-    return 0.9;
-  };
-
-  // Gradient responsive font size scaling
-  const getFontSize = () => {
-    if (windowWidth <= 375) {
-      return 8;
-    } else if (windowWidth <= 428) {
-      return 9;
-    } else if (windowWidth <= 480) {
-      return 9.5;
-    } else if (windowWidth <= 768) {
-      return 10;
-    } else if (windowWidth <= 1024) {
-      return 11;
-    }
-    return 12;
-  };
-
-  // Gradient responsive title font size scaling
-  const getTitleFontSize = () => {
-    if (windowWidth <= 375) {
-      return 9;
-    } else if (windowWidth <= 428) {
-      return 10;
-    } else if (windowWidth <= 480) {
-      return 10.5;
-    } else if (windowWidth <= 768) {
-      return 11;
-    } else if (windowWidth <= 1024) {
-      return 12;
-    }
-    return 14;
-  };
-
   useEffect(() => {
     const fetchProjects = async () => {
       setLoading(true);
@@ -303,19 +207,19 @@ export default function ToolsStoppageHorizontalBarChart() {
         label: 'Used its lifetime',
         data: data.map(item => item.usedForLifetime || 0),
         backgroundColor: '#4589FF',
-        maxBarThickness: getMaxBarThickness(),
+        maxBarThickness: getMaxBarThickness(windowWidth),
       },
       {
         label: 'Damaged',
         data: data.map(item => item.damaged || 0),
         backgroundColor: '#FF0000',
-        maxBarThickness: getMaxBarThickness(),
+        maxBarThickness: getMaxBarThickness(windowWidth),
       },
       {
         label: 'Lost',
         data: data.map(item => item.lost || 0),
         backgroundColor: '#FFB800',
-        maxBarThickness: getMaxBarThickness(),
+        maxBarThickness: getMaxBarThickness(windowWidth),
       },
     ],
   };
@@ -330,14 +234,14 @@ export default function ToolsStoppageHorizontalBarChart() {
         position: 'top',
         labels: {
           color: darkMode ? '#e0e0e0' : '#000',
-          font: { size: getFontSize() },
+          font: { size: getChartFontSize(windowWidth) },
         },
       },
       tooltip: { enabled: true, color: darkMode ? '#FFFFFF' : '#000000' },
       datalabels: {
         display: true,
         color: '#fff',
-        font: { weight: 'bold', size: getFontSize() },
+        font: { weight: 'bold', size: getChartFontSize(windowWidth) },
       },
     },
     scales: {
@@ -350,7 +254,7 @@ export default function ToolsStoppageHorizontalBarChart() {
         },
         ticks: {
           color: darkMode ? '#ffffff' : '#000', // Brighter color in dark mode for better visibility
-          font: { size: getFontSize() },
+          font: { size: getChartFontSize(windowWidth) },
           maxRotation: 0,
         },
       },
@@ -359,7 +263,7 @@ export default function ToolsStoppageHorizontalBarChart() {
           display: true,
           text: 'Tools',
           color: darkMode ? '#FFFFFF' : '#000000',
-          font: { size: getTitleFontSize() },
+          font: { size: getChartTitleFontSize(windowWidth) },
         },
         stacked: true,
         grid: { display: false },
@@ -369,10 +273,10 @@ export default function ToolsStoppageHorizontalBarChart() {
         },
         ticks: {
           color: darkMode ? '#ffffff' : '#000', // Brighter color in dark mode for better visibility
-          font: { size: getFontSize() },
+          font: { size: getChartFontSize(windowWidth) },
         },
-        categoryPercentage: getCategoryPercentage(),
-        barPercentage: getBarPercentage(),
+        categoryPercentage: getCategoryPercentage(windowWidth),
+        barPercentage: getBarPercentage(windowWidth),
       },
     },
   };
@@ -456,7 +360,7 @@ export default function ToolsStoppageHorizontalBarChart() {
             style={{
               width: '100%',
               position: 'relative',
-              height: `${getChartHeight()}px`,
+              height: `${getChartHeight(windowWidth)}px`,
               backgroundColor: darkMode ? '#2c3344' : '#ffffff',
               borderRadius: '4px',
             }}
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsHorizontalBarChart.jsx b/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsHorizontalBarChart.jsx
index 294d9a1a55..9bf4d4d68b 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsHorizontalBarChart.jsx
+++ b/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsHorizontalBarChart.jsx
@@ -80,80 +80,12 @@ function ToolsHorizontalBarChart({ darkMode: darkModeProp }) {
   const [startDate, setStartDate] = useState(startDate12MonthsAgo.toISOString().split('T')[0]);
   const [endDate, setEndDate] = useState(endOfCurrentMonth.toISOString().split('T')[0]);
 
-  // Responsive height calculation
   useEffect(() => {
     const handleResize = () => setWindowWidth(window.innerWidth);
     window.addEventListener('resize', handleResize);
     return () => window.removeEventListener('resize', handleResize);
   }, []);
 
-  // Gradient responsive chart height scaling - matches ToolsStoppageHorizontalBarChart
-  // Scales smoothly from smallest phones (180px) to desktop (300px)
-  const getChartHeight = () => {
-    if (windowWidth <= 375) {
-      return 180;
-    } else if (windowWidth <= 428) {
-      return 200;
-    } else if (windowWidth <= 480) {
-      return 220;
-    } else if (windowWidth <= 768) {
-      return 240;
-    } else if (windowWidth <= 1024) {
-      return 280;
-    }
-    return 300;
-  };
-
-  // Gradient responsive margins scaling
-  const getChartMargins = () => {
-    if (windowWidth <= 375) {
-      return { top: 3, right: 3, left: 12, bottom: 3 };
-    } else if (windowWidth <= 428) {
-      return { top: 4, right: 4, left: 13, bottom: 4 };
-    } else if (windowWidth <= 480) {
-      return { top: 4, right: 4, left: 14, bottom: 4 };
-    } else if (windowWidth <= 768) {
-      return { top: 5, right: 5, left: 15, bottom: 5 };
-    } else if (windowWidth <= 1024) {
-      return { top: 8, right: 15, left: 25, bottom: 8 };
-    }
-    return { top: 10, right: 30, left: 40, bottom: 10 };
-  };
-
-  // Gradient responsive Y-axis width scaling
-  const getYAxisWidth = () => {
-    if (windowWidth <= 375) {
-      return 18;
-    } else if (windowWidth <= 428) {
-      return 19;
-    } else if (windowWidth <= 480) {
-      return 19.5;
-    } else if (windowWidth <= 768) {
-      return 20;
-    } else if (windowWidth <= 1024) {
-      return 28;
-    }
-    return 35;
-  };
-
-  // Gradient responsive Y-axis font size scaling
-  const getYAxisFontSize = () => {
-    if (windowWidth <= 375) {
-      return 8;
-    } else if (windowWidth <= 428) {
-      return 9;
-    } else if (windowWidth <= 480) {
-      return 9.5;
-    } else if (windowWidth <= 768) {
-      return 10;
-    } else if (windowWidth <= 1024) {
-      return 11;
-    }
-    return 12;
-  };
-
-  // Date range logging removed for production
-
   // Fetch projects list
   useEffect(() => {
     const fetchProjects = async () => {
@@ -573,9 +505,9 @@ function ToolsHorizontalBarChart({ darkMode: darkModeProp }) {
                 dataKey="name"
                 tick={{
                   fill: darkMode ? '#e0e0e0' : '#333',
-                  fontSize: getYAxisFontSize(),
+                  fontSize: getChartFontSize(windowWidth),
                 }}
-                width={getYAxisWidth()}
+                width={getYAxisWidth(windowWidth)}
                 axisLine={false}
                 tickLine={false}
               />

From 054e8ffa1229493232b865791276f34e80ac995c Mon Sep 17 00:00:00 2001
From: rithika-paii <rithika.rpai@gmail.com>
Date: Mon, 11 May 2026 13:14:59 -0500
Subject: [PATCH 24/29] fix: update yarn.lock

---
 yarn.lock | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/yarn.lock b/yarn.lock
index 05f438584b..2824898d6d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7524,6 +7524,15 @@ fast-png@^6.2.0:
     iobuffer "^5.3.2"
     pako "^2.1.0"
 
+fast-png@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/fast-png/-/fast-png-7.0.1.tgz#db8de3aa5c79f9a450d273f171ca5c9e28240ded"
+  integrity sha512-aD5BELuxRrAPlRhb9V/z1PVMFJy3cUXqIvoxM3IQ+7Rku+T4cbXxWclZ47f1XwhViEl4n30TAN8JmvTJKKc2Dw==
+  dependencies:
+    "@types/pako" "^2.0.3"
+    iobuffer "^6.0.0"
+    pako "^2.1.0"
+
 fast-string-truncated-width@^3.0.2:
   version "3.0.3"
   resolved "https://registry.npmjs.org/fast-string-truncated-width/-/fast-string-truncated-width-3.0.3.tgz"
@@ -8534,6 +8543,11 @@ iobuffer@^5.3.2:
   resolved "https://registry.npmjs.org/iobuffer/-/iobuffer-5.4.0.tgz"
   integrity sha512-DRebOWuqDvxunfkNJAlc3IzWIPD5xVxwUNbHr7xKB8E6aLJxIPfNX3CoMJghcFjpv6RWQsrcJbghtEwSPoJqMA==
 
+iobuffer@^6.0.0:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/iobuffer/-/iobuffer-6.0.1.tgz#e550d671384362d541b5a23e1a81ed46ecab36d8"
+  integrity sha512-SZWYkWNfjIXIBYSDpXDYIgshqtbOPsi4lviawAEceR1Kqk+sHDlcQjWrzNQsii80AyBY0q5c8HCTNjqo74ul+Q==
+
 is-any-array@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/is-any-array/-/is-any-array-3.0.0.tgz"

From 884c3b9ee425546cd3d596994b25dec0bab33eaa Mon Sep 17 00:00:00 2001
From: rithika-paii <rithika.rpai@gmail.com>
Date: Wed, 13 May 2026 11:07:36 -0500
Subject: [PATCH 25/29] fix: add PropTypes validation and fix contrast and
 chartResponsiveUtils issues

---
 .../ToolStatusDonutChart.jsx                  |  7 +--
 .../Tools/ToolsHorizontalBarChart.jsx         |  1 +
 ...ToolsStoppageHorizontalBarChart.module.css | 54 ++++++++++---------
 3 files changed, 31 insertions(+), 31 deletions(-)

diff --git a/src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.jsx b/src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.jsx
index f3096134be..fbaf4ed8b2 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.jsx
+++ b/src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.jsx
@@ -5,13 +5,8 @@ import Select from 'react-select';
 import axios from 'axios';
 import { PieChart, Pie, Cell, Tooltip, ResponsiveContainer } from 'recharts';
 import { fetchToolAvailability, fetchTools } from '../../../../actions/bmdashboard/toolActions';
-<<<<<<< HEAD
 import styles from './ToolStatusDonutChart.module.css';
-=======
-import { ENDPOINTS } from '../../../../utils/URL';
-import { getStandardSelectStyles } from '../../../../utils/reactSelectUtils';
-import './ToolStatusDonutChart.css';
->>>>>>> 5216f1f61 (fix(tools-charts): resolve SonarQube issues and reduce code duplication)
+import PropTypes from 'prop-types';
 
 const COLORS = {
   AVAILABLE: '#220F57',
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsHorizontalBarChart.jsx b/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsHorizontalBarChart.jsx
index 9bf4d4d68b..499a974076 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsHorizontalBarChart.jsx
+++ b/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsHorizontalBarChart.jsx
@@ -6,6 +6,7 @@ import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, CartesianGri
 import axios from 'axios';
 import { ENDPOINTS } from '../../../../utils/URL';
 import styles from './ToolsHorizontalBarChart.module.css';
+import PropTypes from 'prop-types';
 
 function CustomTooltip({ active, payload, label, darkMode }) {
   if (!active || !payload || !payload.length) {
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsStoppageHorizontalBarChart/ToolsStoppageHorizontalBarChart.module.css b/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsStoppageHorizontalBarChart/ToolsStoppageHorizontalBarChart.module.css
index c45dbc1bdc..271d7f95ec 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsStoppageHorizontalBarChart/ToolsStoppageHorizontalBarChart.module.css
+++ b/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsStoppageHorizontalBarChart/ToolsStoppageHorizontalBarChart.module.css
@@ -1,8 +1,11 @@
 /* React-select styles are handled EXCLUSIVELY via inline styles in the component */
+
 /* No global CSS overrides - inline styles have higher specificity and are the proper way */
+
 /* Removing any global overrides that might conflict */
 
 /* Date picker input - consistent sizing in all modes */
+
 /* Base styles define size - dark mode only changes colors */
 :global(.datePickerInput),
 :global(.react-datepicker-wrapper input),
@@ -17,8 +20,8 @@
   box-sizing: border-box !important;
   width: 100% !important;
   min-width: 0 !important;
-  background-color: #ffffff !important;
-  color: #000000 !important;
+  background-color: #fff !important;
+  color: #000 !important;
   border-color: #ccc !important;
 }
 
@@ -32,30 +35,30 @@
 :global(.react-datepicker-wrapper.darkThemeDatePickerWrapper input[type="text"].datePickerInput) {
   /* Only override colors - sizes inherit from base */
   background-color: #2b3e59 !important;
-  color: #ffffff !important;
+  color: #fff !important;
   border-color: #666 !important;
 }
 
 /* Light mode calendar styles */
 :global(.customCalendar) {
-  background-color: #ffffff !important;
-  color: #000000 !important;
+  background-color: #fff !important;
+  color: #000 !important;
   border: 1px solid #ccc !important;
 }
 
 :global(.customCalendar .react-datepicker__header) {
   background-color: #f0f0f0 !important;
-  color: #000000 !important;
+  color: #000 !important;
   border-bottom: 1px solid #ccc !important;
 }
 
 :global(.customCalendar .react-datepicker__day) {
-  color: #000000 !important;
+  color: #000 !important;
 }
 
 :global(.customCalendar .react-datepicker__day--keyboard-selected) {
   background-color: #5a5a5a !important;
-  color: #ffffff !important;
+  color: #fff !important;
 }
 
 :global(.customCalendar .react-datepicker__navigation-icon::before) {
@@ -65,31 +68,31 @@
 /* Hover day styling in dark theme */
 :global(.customCalendar .react-datepicker__day:hover) {
   background-color: #e0e0e0 !important;
-  color: #000000 !important;
+  color: #000 !important;
   border-radius: 50%;
 }
 
 :global(.customCalendar .react-datepicker__day--selected) {
-  background-color: #0066cc !important;
-  color: #ffffff !important;
+  background-color: #06c !important;
+  color: #fff !important;
   border-radius: 50%;
 }
 
 :global(.customCalendar .react-datepicker__current-month),
 :global(.customCalendar .react-datepicker__day-name) {
-  color: #000000 !important;
+  color: #000 !important;
 }
 
 /* Dark theme calendar container */
 :global(.darkThemeCalendar) { 
   background-color: #2b3e59 !important;
-  color: #ffffff !important;
+  color: #fff !important;
   border: 1px solid #6b6767 !important;
 }
 
 :global(.darkThemeCalendar .react-datepicker__current-month),
 :global(.darkThemeCalendar .react-datepicker__day-name) {
-  color: #ffffff !important;
+  color: #fff !important;
 }
 
 /* Dark theme header */
@@ -102,7 +105,7 @@
 
 /* Selected day styling in dark theme */
 :global(.darkThemeCalendar .react-datepicker__day--selected) {
-  background-color: #0050a8 !important;
+  background-color: #1a5fa8 !important;
   color: #fff !important;
   border-radius: 50%;
 }
@@ -119,6 +122,7 @@
 }
 
 /* React-select styling is handled ONLY via inline styles in JSX */
+
 /* No CSS overrides needed or wanted - inline styles are the proper method */
 
 /* Chart container - sized by explicit chart height, no overflow clipping */
@@ -128,7 +132,7 @@
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
-  background-color: #ffffff !important; /* White background to show through transparent canvas */
+  background-color: #fff !important; /* White background to show through transparent canvas */
   overflow: visible; /* Allow chart labels and tooltips to render outside */
 }
 
@@ -139,7 +143,7 @@
 
 /* Ensure Chart.js canvas wrapper has background */
 :global(.tools-horizontal-chart-container > div) {
-  background-color: #ffffff !important;
+  background-color: #fff !important;
 }
 
 :global(.tools-availability-page.dark-mode .tools-horizontal-chart-container > div) {
@@ -154,7 +158,7 @@
   width: 100%;
   max-width: 100%;
   box-sizing: border-box;
-  background-color: #ffffff !important; /* White background in light mode to prevent grey parent card background from showing through - !important to override any conflicting styles */
+  background-color: #fff !important; /* White background in light mode to prevent grey parent card background from showing through - !important to override any conflicting styles */
   display: flex;
   flex-direction: column;
 }
@@ -167,7 +171,7 @@
 /* Chart title styling */
 :global(.tools-availability-page .tools-chart-title) {
   flex-shrink: 0;
-  color: #000000;
+  color: #000;
   font-size: 1.25rem;
   font-weight: 600;
   margin-bottom: 1rem;
@@ -176,7 +180,7 @@
 
 /* Dark mode for chart title */
 :global(.tools-availability-page.dark-mode .tools-chart-title) {
-  color: #ffffff !important;
+  color: #fff !important;
 }
 
 :global(.tools-availability-page .row) {
@@ -255,7 +259,7 @@
 .filterLabel {
   font-size: 13px;
   font-weight: 600;
-  color: #000000;
+  color: #000;
   margin: 0;
   line-height: 1.4;
   display: block;
@@ -265,11 +269,11 @@
 /* Dark mode for filter labels - white text */
 :global(.tools-availability-page.dark-mode) .filterLabel,
 :global(.tools-availability-page.dark-mode .filterLabel) {
-  color: #ffffff !important;
+  color: #fff !important;
 }
 
 /* Filter controls layout for small screens - gradient scaling */
-@media (max-width: 480px) {
+@media (width <= 480px) {
   :global(.tools-availability-page) {
     padding: 4px;
   }
@@ -323,7 +327,7 @@
   }
 }
 
-@media (min-width: 481px) and (max-width: 768px) {
+@media (width >= 481px) and (width <= 768px) {
   :global(.tools-availability-page) {
     padding: 6px;
   }
@@ -370,7 +374,7 @@
   }
 
 /* Tablet adjustments */
-@media (min-width: 769px) and (max-width: 1024px) {
+@media (width >= 769px) and (width <= 1024px) {
   :global(.tools-availability-page) {
     padding: 10px;
   }

From c1359a9b14a7f21baba931c05442c6dfbade1f19 Mon Sep 17 00:00:00 2001
From: rithika-paii <rithika.rpai@gmail.com>
Date: Wed, 13 May 2026 11:10:59 -0500
Subject: [PATCH 26/29] fix: use .at(-1) instead of array length index in
 chartResponsiveUtils

---
 src/utils/chartResponsiveUtils.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils/chartResponsiveUtils.js b/src/utils/chartResponsiveUtils.js
index 5ae745cdb9..3fc0718217 100644
--- a/src/utils/chartResponsiveUtils.js
+++ b/src/utils/chartResponsiveUtils.js
@@ -16,7 +16,7 @@ export function getValueForBreakpoints(windowWidth, values) {
   for (let i = 0; i < BREAKPOINTS.length; i++) {
     if (windowWidth <= BREAKPOINTS[i]) return values[i];
   }
-  return values[values.length - 1];
+  return values.at(-1);
 }
 
 /** Chart height in px: 180 → 300 from small phone to desktop */

From 2af7fe22bc8618b0dd10c8c0dcdb12c1f53c768e Mon Sep 17 00:00:00 2001
From: rithika-paii <rithika.rpai@gmail.com>
Date: Wed, 20 May 2026 22:09:32 -0500
Subject: [PATCH 27/29] Fix duplicate import and JSX structure in
 WeeklyProjectSummary tools section

---
 .../WeeklyProjectSummary/WeeklyProjectSummary.jsx      | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.jsx b/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.jsx
index 68108ad932..cad6f39aa3 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.jsx
+++ b/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.jsx
@@ -295,7 +295,7 @@ function WeeklyProjectSummary() {
       {
         title: 'Tools and Equipment Tracking',
         key: 'Tools and Equipment Tracking',
-        className: 'half',
+        className: 'full',
         content: (
           <>
             {/* <div className="weekly-project-summary-card normal-card tools-tracking-layout"> */}
@@ -311,13 +311,7 @@ function WeeklyProjectSummary() {
             >
               <SupplierPerformanceGraph />
             </div>
-            <div
-              className={`${styles.weeklyProjectSummaryCard} ${styles.normalCard}`}
-              style={{ minHeight: '300px', gridColumn: 'span 2' }}
-            >
-              <ToolsStoppageHorizontalBarChart />
-            </div>
-          </>
+          </div>
         ),
       },
       {

From 8a05674ac9b37c9eddde9a93a60c28878ddbaa9c Mon Sep 17 00:00:00 2001
From: rithika-paii <rithika.rpai@gmail.com>
Date: Wed, 20 May 2026 22:20:36 -0500
Subject: [PATCH 28/29] Remove unused imports SupplierPerformanceGraph and
 EmbedInteractiveMap

---
 .../BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.jsx   | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.jsx b/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.jsx
index cad6f39aa3..9c177f8043 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.jsx
+++ b/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.jsx
@@ -20,11 +20,9 @@ import ExpenseBarChart from './Financials/ExpenseBarChart';
 import CostBreakDown from './Financials/CostBreakDown/CostBreakDown';
 import ActualVsPlannedCost from './ActualVsPlannedCost/ActualVsPlannedCost';
 import TotalMaterialCostPerProject from './TotalMaterialCostPerProject/TotalMaterialCostPerProject';
-import EmbedInteractiveMap from '../InteractiveMap/EmbedInteractiveMap';
 import InteractiveMap from '../InteractiveMap/InteractiveMap';
 import styles from './WeeklyProjectSummary.module.css';
 import LossTrackingLineChart from './Financials/LossTrackingLineCharts/LossTrackingLineChart';
-import SupplierPerformanceGraph from './SupplierPerformanceGraph.jsx';
 import MostFrequentKeywords from './MostFrequentKeywords/MostFrequentKeywords';
 import LessonsLearntChart from '../LessonsLearnt/LessonsLearntChart';
 import DistributionLaborHours from './DistributionLaborHours/DistributionLaborHours';

From 50a2d352e98bf4ece34022e7077e90f1b2dfa525 Mon Sep 17 00:00:00 2001
From: rithika-paii <rithika.rpai@gmail.com>
Date: Fri, 5 Jun 2026 20:54:32 -0500
Subject: [PATCH 29/29] fix: resolve duplicate PropTypes imports and JSX
 fragment mismatch

---
 .../ToolStatusDonutChart/ToolStatusDonutChart.jsx    |  2 --
 .../Tools/ToolsHorizontalBarChart.jsx                |  2 --
 .../WeeklyProjectSummary/WeeklyProjectSummary.jsx    | 12 ++++++++++--
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.jsx b/src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.jsx
index fbaf4ed8b2..7bf81f0bc3 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.jsx
+++ b/src/components/BMDashboard/WeeklyProjectSummary/ToolStatusDonutChart/ToolStatusDonutChart.jsx
@@ -2,11 +2,9 @@ import PropTypes from 'prop-types';
 import { useState, useEffect, useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import Select from 'react-select';
-import axios from 'axios';
 import { PieChart, Pie, Cell, Tooltip, ResponsiveContainer } from 'recharts';
 import { fetchToolAvailability, fetchTools } from '../../../../actions/bmdashboard/toolActions';
 import styles from './ToolStatusDonutChart.module.css';
-import PropTypes from 'prop-types';
 
 const COLORS = {
   AVAILABLE: '#220F57',
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsHorizontalBarChart.jsx b/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsHorizontalBarChart.jsx
index 499a974076..60e9f3713f 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsHorizontalBarChart.jsx
+++ b/src/components/BMDashboard/WeeklyProjectSummary/Tools/ToolsHorizontalBarChart.jsx
@@ -6,8 +6,6 @@ import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, CartesianGri
 import axios from 'axios';
 import { ENDPOINTS } from '../../../../utils/URL';
 import styles from './ToolsHorizontalBarChart.module.css';
-import PropTypes from 'prop-types';
-
 function CustomTooltip({ active, payload, label, darkMode }) {
   if (!active || !payload || !payload.length) {
     return null;
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.jsx b/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.jsx
index 9c177f8043..68108ad932 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.jsx
+++ b/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.jsx
@@ -20,9 +20,11 @@ import ExpenseBarChart from './Financials/ExpenseBarChart';
 import CostBreakDown from './Financials/CostBreakDown/CostBreakDown';
 import ActualVsPlannedCost from './ActualVsPlannedCost/ActualVsPlannedCost';
 import TotalMaterialCostPerProject from './TotalMaterialCostPerProject/TotalMaterialCostPerProject';
+import EmbedInteractiveMap from '../InteractiveMap/EmbedInteractiveMap';
 import InteractiveMap from '../InteractiveMap/InteractiveMap';
 import styles from './WeeklyProjectSummary.module.css';
 import LossTrackingLineChart from './Financials/LossTrackingLineCharts/LossTrackingLineChart';
+import SupplierPerformanceGraph from './SupplierPerformanceGraph.jsx';
 import MostFrequentKeywords from './MostFrequentKeywords/MostFrequentKeywords';
 import LessonsLearntChart from '../LessonsLearnt/LessonsLearntChart';
 import DistributionLaborHours from './DistributionLaborHours/DistributionLaborHours';
@@ -293,7 +295,7 @@ function WeeklyProjectSummary() {
       {
         title: 'Tools and Equipment Tracking',
         key: 'Tools and Equipment Tracking',
-        className: 'full',
+        className: 'half',
         content: (
           <>
             {/* <div className="weekly-project-summary-card normal-card tools-tracking-layout"> */}
@@ -309,7 +311,13 @@ function WeeklyProjectSummary() {
             >
               <SupplierPerformanceGraph />
             </div>
-          </div>
+            <div
+              className={`${styles.weeklyProjectSummaryCard} ${styles.normalCard}`}
+              style={{ minHeight: '300px', gridColumn: 'span 2' }}
+            >
+              <ToolsStoppageHorizontalBarChart />
+            </div>
+          </>
         ),
       },
       {