From ec7b85844c34be0ed86fe688868c0d25e113b4e1 Mon Sep 17 00:00:00 2001
From: Vamsidhar858 <145138793+Vamsidhar858@users.noreply.github.com>
Date: Sat, 29 Nov 2025 16:50:32 -0800
Subject: [PATCH 1/2] Fix dark mode styling for filter categories on Injury
 Severity by Category of Worker Injured card

---
 .../InjuryCategoryBarChart.css                | 162 +++++++++++++++++-
 .../InjuryCategoryBarChart.jsx                |  34 +++-
 2 files changed, 181 insertions(+), 15 deletions(-)

diff --git a/src/components/BMDashboard/WeeklyProjectSummary/GroupedBarGraphInjurySeverity/InjuryCategoryBarChart.css b/src/components/BMDashboard/WeeklyProjectSummary/GroupedBarGraphInjurySeverity/InjuryCategoryBarChart.css
index c83a439aa3..4d6f420bba 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/GroupedBarGraphInjurySeverity/InjuryCategoryBarChart.css
+++ b/src/components/BMDashboard/WeeklyProjectSummary/GroupedBarGraphInjurySeverity/InjuryCategoryBarChart.css
@@ -16,32 +16,178 @@
   margin-bottom: 2rem;
 }
 
+.filter {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.filter label {
+  font-weight: 500;
+  font-size: 0.875rem;
+  color: #333;
+}
+
 /* ------------------- DARK MODE STYLES ------------------- */
 .darkMode .injury-chart-title {
-  color: white;
+  color: #ffffff;
+}
+
+/* Filter labels in dark mode */
+.darkMode .filter label {
+  color: #e0e0e0 !important;
 }
 
+/* React-Select dark mode styles */
 .darkMode .injury-select__control {
   background-color: #2b3e59 !important;
-  color: white !important;
   border-color: #555 !important;
+  color: #ffffff !important;
+}
+
+.darkMode .injury-select__control:hover {
+  border-color: #777 !important;
+}
+
+.darkMode .injury-select__control--is-focused {
+  border-color: #0d55b3 !important;
+  box-shadow: 0 0 0 1px #0d55b3 !important;
 }
 
 .darkMode .injury-select__single-value,
 .darkMode .injury-select__multi-value__label,
 .darkMode .injury-select__input-container {
-  color: white !important;
+  color: #ffffff !important;
+}
+
+.darkMode .injury-select__input-container input {
+  color: #ffffff !important;
+}
+
+.darkMode .injury-select__placeholder {
+  color: #a0a0a0 !important;
 }
 
 .darkMode .injury-select__menu {
   background-color: #2b3e59 !important;
-  color: white !important;
+  border-color: #555 !important;
+}
+
+.darkMode .injury-select__option {
+  background-color: #2b3e59 !important;
+  color: #ffffff !important;
+}
+
+.darkMode .injury-select__option:hover,
+.darkMode .injury-select__option--is-focused {
+  background-color: #0d55b3 !important;
+  color: #ffffff !important;
+}
+
+.darkMode .injury-select__option--is-selected {
+  background-color: #375071 !important;
+  color: #ffffff !important;
+}
+
+.darkMode .injury-select__multi-value {
+  background-color: #375071 !important;
+}
+
+.darkMode .injury-select__multi-value__remove {
+  color: #ffffff !important;
+}
+
+.darkMode .injury-select__multi-value__remove:hover {
+  background-color: #0d55b3 !important;
+  color: #ffffff !important;
+}
+
+.darkMode .injury-select__indicator-separator {
+  background-color: #555 !important;
 }
 
+.darkMode .injury-select__dropdown-indicator,
+.darkMode .injury-select__clear-indicator {
+  color: #ffffff !important;
+}
+
+.darkMode .injury-select__dropdown-indicator:hover,
+.darkMode .injury-select__clear-indicator:hover {
+  color: #0d55b3 !important;
+}
+
+/* React-DatePicker dark mode styles */
 .darkMode .react-datepicker__input-container input {
   background-color: #2b3e59 !important;
-  color: white !important;
-  border: 1px solid #555;
-  padding: 0.5rem;
-  border-radius: 4px;
+  color: #ffffff !important;
+  border: 1px solid #555 !important;
+  padding: 0.5rem !important;
+  border-radius: 4px !important;
+}
+
+.darkMode .react-datepicker__input-container input::placeholder {
+  color: #a0a0a0 !important;
+}
+
+.darkMode .react-datepicker__input-container input:focus {
+  border-color: #0d55b3 !important;
+  outline: none !important;
+  box-shadow: 0 0 0 1px #0d55b3 !important;
+}
+
+.darkMode .react-datepicker {
+  background-color: #3A506B !important;
+  border-color: #555 !important;
+  color: #ffffff !important;
+}
+
+.darkMode .react-datepicker__header {
+  background-color: #1C2541 !important;
+  border-bottom-color: #555 !important;
+}
+
+.darkMode .react-datepicker__current-month,
+.darkMode .react-datepicker__day-name,
+.darkMode .react-datepicker__day,
+.darkMode .react-datepicker__time-name {
+  color: #ffffff !important;
+}
+
+.darkMode .react-datepicker__day:hover,
+.darkMode .react-datepicker__day--keyboard-selected {
+  background-color: #0d55b3 !important;
+  color: #ffffff !important;
+}
+
+.darkMode .react-datepicker__day--selected,
+.darkMode .react-datepicker__day--in-selecting-range,
+.darkMode .react-datepicker__day--in-range {
+  background-color: #0d55b3 !important;
+  color: #ffffff !important;
+}
+
+.darkMode .react-datepicker__navigation-icon::before {
+  border-color: #ffffff !important;
+}
+
+/* Chart elements dark mode */
+.darkMode .recharts-cartesian-axis-tick-value {
+  fill: #ffffff !important;
+}
+
+.darkMode .recharts-legend-item-text {
+  color: #ffffff !important;
+}
+
+/* Loading and error text in dark mode */
+.darkMode p {
+  color: #ffffff !important;
+}
+
+.darkMode .error {
+  color: #ff6b6b !important;
+}
+
+.darkMode .empty {
+  color: #a0a0a0 !important;
 }
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/GroupedBarGraphInjurySeverity/InjuryCategoryBarChart.jsx b/src/components/BMDashboard/WeeklyProjectSummary/GroupedBarGraphInjurySeverity/InjuryCategoryBarChart.jsx
index d08efd3405..f86d32a0d4 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/GroupedBarGraphInjurySeverity/InjuryCategoryBarChart.jsx
+++ b/src/components/BMDashboard/WeeklyProjectSummary/GroupedBarGraphInjurySeverity/InjuryCategoryBarChart.jsx
@@ -205,8 +205,10 @@ function InjuryCategoryBarChart() {
         </div>
       </div>
 
-      {loading && <p>Loading…</p>}
-      {!loading && error && <p className="error">Error: {String(error)}</p>}
+      {loading && <p className={darkMode ? 'darkMode' : ''}>Loading…</p>}
+      {!loading && error && (
+        <p className={`error ${darkMode ? 'darkMode' : ''}`}>Error: {String(error)}</p>
+      )}
 
       {!loading && !error && (
         <ResponsiveContainer width="100%" height={420}>
@@ -219,15 +221,24 @@ function InjuryCategoryBarChart() {
               height={80}
               tick={{ fill: darkMode ? '#fff' : '#000' }}
             />
-            <YAxis allowDecimals={false} />
+            <YAxis allowDecimals={false} tick={{ fill: darkMode ? '#fff' : '#000' }} />
             <Tooltip
+              contentStyle={{
+                backgroundColor: darkMode ? '#2b3e59' : '#fff',
+                border: darkMode ? '1px solid #555' : '1px solid #ccc',
+                color: darkMode ? '#fff' : '#000',
+              }}
               formatter={(value, name) => [
                 value,
                 projectNameById.get(String(name)) || 'Unknown Project',
               ]}
             />
             <Legend
-              wrapperStyle={{ maxHeight: 72, overflowY: 'auto' }}
+              wrapperStyle={{
+                maxHeight: 72,
+                overflowY: 'auto',
+                color: darkMode ? '#fff' : '#000',
+              }}
               payload={seriesProjectIds.map(pid => ({
                 id: pid,
                 type: 'square',
@@ -235,9 +246,18 @@ function InjuryCategoryBarChart() {
               }))}
             />
             {seriesProjectIds.map((pid, index) => (
-              <Bar key={pid} dataKey={pid} fill={index % 2 === 0 ? '#17c9d3' : '#000'}>
+              <Bar
+                key={pid}
+                dataKey={pid}
+                fill={index % 2 === 0 ? '#17c9d3' : darkMode ? '#888' : '#000'}
+              >
                 {showLabels && (
-                  <LabelList dataKey={pid} position="top" formatter={v => (v > 0 ? v : '')} />
+                  <LabelList
+                    dataKey={pid}
+                    position="top"
+                    formatter={v => (v > 0 ? v : '')}
+                    fill={darkMode ? '#fff' : '#000'}
+                  />
                 )}
               </Bar>
             ))}
@@ -246,7 +266,7 @@ function InjuryCategoryBarChart() {
       )}
 
       {!loading && !error && chartData.length === 0 && (
-        <div className="empty">No data for selected filters.</div>
+        <div className={`empty ${darkMode ? 'darkMode' : ''}`}>No data for selected filters.</div>
       )}
     </div>
   );

From a31a982465a17bd572e753615ec99792b8b6151b Mon Sep 17 00:00:00 2001
From: Vamsidhar858 <145138793+Vamsidhar858@users.noreply.github.com>
Date: Sat, 29 Nov 2025 18:06:49 -0800
Subject: [PATCH 2/2] Fix duplicate isAckLoading declaration in Header.jsx

---
 src/components/Header/Header.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
index bae1f5fd03..b45ed0a2ea 100644
--- a/src/components/Header/Header.jsx
+++ b/src/components/Header/Header.jsx
@@ -160,7 +160,6 @@ export function Header(props) {
   const [hasProfileLoaded, setHasProfileLoaded] = useState(false);
   const dismissalKey = `lastDismissed_${userId}`;
   const [lastDismissed, setLastDismissed] = useState(localStorage.getItem(dismissalKey));
-   const [isAckLoading, setIsAckLoading] = useState(false);
   const unreadNotifications = props.notification?.unreadNotifications; // List of unread notifications
   const dispatch = useDispatch();
   const history = useHistory();