feature/IO-1113-Online-Dark-Mode - Toggle / Local storage solution

client/src/components/header/header.component.jsx

@@ -12,7 +12,7 @@ import { createStructuredSelector } from "reselect";
 import { TASKS_CENTER_POLL_INTERVAL, useSocket } from "../../contexts/SocketIO/useSocket.js";
 import { GET_UNREAD_COUNT } from "../../graphql/notifications.queries.js";
 import { QUERY_MY_TASKS_COUNT } from "../../graphql/tasks.queries.js";
-import { selectRecentItems, selectSelectedHeader } from "../../redux/application/application.selectors";
+import { selectDarkMode, selectRecentItems, selectSelectedHeader } from "../../redux/application/application.selectors";
 import { setModalContext } from "../../redux/modals/modals.actions";
 import { signOutStart } from "../../redux/user/user.actions";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
@@ -22,13 +22,15 @@ import NotificationCenterContainer from "../notification-center/notification-cen
 import TaskCenterContainer from "../task-center/task-center.container.jsx";
 import buildAccountingChildren from "./buildAccountingChildren.jsx";
 import buildLeftMenuItems from "./buildLeftMenuItems.jsx";
+import { toggleDarkMode } from "../../redux/application/application.actions";
 
 // --- Redux mappings ---
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
   recentItems: selectRecentItems,
   selectedHeader: selectSelectedHeader,
-  bodyshop: selectBodyshop
+  bodyshop: selectBodyshop,
+  darkMode: selectDarkMode
 });
 
 const mapDispatchToProps = (dispatch) => ({
@@ -38,7 +40,8 @@ const mapDispatchToProps = (dispatch) => ({
   setReportCenterContext: (context) => dispatch(setModalContext({ context, modal: "reportCenter" })),
   signOutStart: () => dispatch(signOutStart()),
   setCardPaymentContext: (context) => dispatch(setModalContext({ context, modal: "cardPayment" })),
-  setTaskUpsertContext: (context) => dispatch(setModalContext({ context, modal: "taskUpsert" }))
+  setTaskUpsertContext: (context) => dispatch(setModalContext({ context, modal: "taskUpsert" })),
+  toggleDarkMode: () => dispatch(toggleDarkMode())
 });
 
 // --- Utility Hooks ---
@@ -84,22 +87,22 @@ function useIncompleteTaskCount(assignedToId, bodyshopId, isEmployee, isConnecte
 }
 
 // --- Main Component ---
-function Header(props) {
-  const {
-    handleMenuClick,
-    currentUser,
-    bodyshop,
-    selectedHeader,
-    signOutStart,
-    setBillEnterContext,
-    setTimeTicketContext,
-    setPaymentContext,
-    setReportCenterContext,
-    recentItems,
-    setCardPaymentContext,
-    setTaskUpsertContext
-  } = props;
-
+function Header({
+  handleMenuClick,
+  currentUser,
+  bodyshop,
+  selectedHeader,
+  signOutStart,
+  setBillEnterContext,
+  setTimeTicketContext,
+  setPaymentContext,
+  setReportCenterContext,
+  recentItems,
+  setCardPaymentContext,
+  setTaskUpsertContext,
+  toggleDarkMode,
+  darkMode
+}) {
   // Feature flags
   const {
     treatments: { ImEXPay, DmsAp, Simple_Inventory }
@@ -216,6 +219,10 @@ function Header(props) {
     [handleMenuClick]
   );
 
+  const handleDarkModeToggle = useCallback(() => {
+    toggleDarkMode();
+  }, [toggleDarkMode]);
+
   // --- Menu Items ---
 
   // built externally to keep the component clean, but on this level to prevent unnecessary re-renders
@@ -257,9 +264,21 @@ function Header(props) {
         setTaskUpsertContext,
         setReportCenterContext,
         signOutStart,
-        accountingChildren
+        accountingChildren,
+        darkMode,
+        handleDarkModeToggle
       }),
-    [t, bodyshop, recentItems, setTaskUpsertContext, setReportCenterContext, signOutStart, accountingChildren]
+    [
+      t,
+      bodyshop,
+      recentItems,
+      setTaskUpsertContext,
+      setReportCenterContext,
+      signOutStart,
+      accountingChildren,
+      darkMode,
+      handleDarkModeToggle
+    ]
   );
 
   const rightMenuItems = useMemo(() => {
@@ -292,6 +311,7 @@ function Header(props) {
       ),
       onClick: handleTaskCenterClick
     });
+
     return items;
   }, [
     scenarioNotificationsOn,