Yu Yan - Fix: Dark Mode compatibility for InjuryChart component (PR #4316 foll…

src/actions/bmdashboard/injuryActions.js

@@ -1,8 +1,8 @@
 import axios from 'axios';
-import { 
-  FETCH_INJURIES_REQUEST, 
-  FETCH_INJURIES_SUCCESS, 
-  FETCH_INJURIES_FAILURE 
+import {
+  FETCH_INJURIES_REQUEST,
+  FETCH_INJURIES_SUCCESS,
+  FETCH_INJURIES_FAILURE,
 } from './types';
 import { ENDPOINTS } from '../../utils/URL';
 
@@ -133,30 +133,21 @@ export const fetchInjuries = (projectId, startDate, endDate) => async dispatch =
   dispatch({ type: FETCH_INJURIES_REQUEST });
 
   try {
-    // Build query parameters
-    const params = {};
-    if (projectId && projectId !== 'all') {
-      params.projectId = projectId;
-    }
-    if (startDate) params.startDate = startDate;
-    if (endDate) params.endDate = endDate;
-
-    // API call
-    const response = await axios.get(ENDPOINTS.INJURIES, { params });
+    const data = await getInjuryData(projectId, startDate, endDate);
 
     dispatch({
       type: FETCH_INJURIES_SUCCESS,
-      payload: response.data
+      payload: data,
     });
 
-    return response;
+    return data;
   } catch (error) {
     dispatch({
       type: FETCH_INJURIES_FAILURE,
       payload: {
         message: error.response?.data?.message || 'Failed to fetch injury data',
-        status: error.response?.status
-      }
+        status: error.response?.status,
+      },
     });
 
     throw error;
@@ -165,17 +156,14 @@ export const fetchInjuries = (projectId, startDate, endDate) => async dispatch =
 
 // Function to get injury data (non-Redux version for direct component use)
 export const getInjuryData = async (projectId, startDate, endDate) => {
-  // Build query parameters
   const params = {};
   if (projectId && projectId !== 'all') {
     params.projectId = projectId;
   }
   if (startDate) params.startDate = startDate;
   if (endDate) params.endDate = endDate;
 
-  // API call
   const response = await axios.get(ENDPOINTS.INJURIES, { params });
 
-  // Return the data directly
   return response.data;
 };

src/components/BMDashboard/InjuryChart/InjuryChartForm.jsx

@@ -120,13 +120,13 @@ function InjuryChartForm({ dark }) {
       {/* Filter Form */}
       <div
         className={`${styles.filterForm} mb-4 p-3  ${
-          dark ? styles.wrapperDark : 'bg-white'
+          dark ? styles.wrapperDark : styles.lightBackground
         } rounded shadow-sm`}
       >
         <div className="row g-3">
           <div className="col-md-4">
             <FormGroup>
-              <Label for="project" className={dark ? styles.wrapperDark : ''}>
+              <Label for="project" htmlFor="project" className={dark ? styles.wrapperDark : ''}>
                 Project
               </Label>
               <Input id="project" type="select" value={projectId} onChange={handleProjectChange}>
@@ -140,7 +140,7 @@ function InjuryChartForm({ dark }) {
             </FormGroup>
           </div>
 
-          <div className="ol-md-4">
+          <div className="col-md-4">
             <FormGroup>
               <Label className={dark ? styles.wrapperDark : ''}>Start Date</Label>
               <DatePicker
@@ -184,7 +184,7 @@ function InjuryChartForm({ dark }) {
       {!error && chartData && chartData.length > 0 && (
         <div
           className={`${styles.injuryChartContainer} ${
-            dark ? styles.wrapperDark : 'bg-white'
+            dark ? styles.wrapperDark : styles.lightBackground
           } p-4 rounded shadow-sm`}
         >
           <div className="d-flex justify-content-end mb-2">
@@ -276,7 +276,11 @@ function InjuryChartForm({ dark }) {
 
       {/* No Data Display */}
       {!error && !loading && (!chartData || chartData.length === 0) && (
-        <div className="text-center p-5 bg-white rounded shadow-sm">
+        <div
+          className={`text-center p-5 rounded shadow-sm ${
+            dark ? styles.wrapperDark : styles.lightBackground
+          }`}
+        >
           <p className="text-muted">No injury data available for the selected criteria.</p>
         </div>
       )}

src/components/BMDashboard/InjuryChart/InjuryChartForm.module.css

@@ -37,6 +37,10 @@
   margin-right: 0.3rem;
 }
 
+.lightBackground {
+  background-color: #fff;
+}
+
 .wrapperDark {
   background-color: #1b2a41;
   color: #f5f7fa;