feature/IO-3096-GlobalNotifications - Checkpoint - Clicking the alert notification will also navigate you to the job.

client/src/App/App.jsx

@@ -4,7 +4,7 @@ import LogRocket from "logrocket";
 import { lazy, Suspense, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { Route, Routes } from "react-router-dom";
+import { Route, Routes, useNavigate } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import DocumentEditorContainer from "../components/document-editor/document-editor.container";
 import ErrorBoundary from "../components/error-boundary/error-boundary.component"; // Component Imports
@@ -46,6 +46,7 @@ export function App({ bodyshop, checkUserSession, currentUser, online, setOnline
   const client = useSplitClient().client;
   const [listenersAdded, setListenersAdded] = useState(false);
   const { t } = useTranslation();
+  const navigate = useNavigate();
 
   useEffect(() => {
     if (!navigator.onLine) {
@@ -200,7 +201,7 @@ export function App({ bodyshop, checkUserSession, currentUser, online, setOnline
             path="/manage/*"
             element={
               <ErrorBoundary>
-                <SocketProvider bodyshop={bodyshop}>
+                <SocketProvider bodyshop={bodyshop} navigate={navigate}>
                   <PrivateRoute isAuthorized={currentUser.authorized} />
                 </SocketProvider>
               </ErrorBoundary>
@@ -212,7 +213,7 @@ export function App({ bodyshop, checkUserSession, currentUser, online, setOnline
             path="/tech/*"
             element={
               <ErrorBoundary>
-                <SocketProvider bodyshop={bodyshop}>
+                <SocketProvider bodyshop={bodyshop} navigate={navigate}>
                   <PrivateRoute isAuthorized={currentUser.authorized} />
                 </SocketProvider>
               </ErrorBoundary>

client/src/contexts/SocketIO/socketContext.jsx

@@ -15,7 +15,7 @@ import { useMutation } from "@apollo/client";
 
 const SocketContext = createContext(null);
 
-export const SocketProvider = ({ children, bodyshop }) => {
+export const SocketProvider = ({ children, bodyshop, navigate }) => {
   const socketRef = useRef(null);
   const [clientId, setClientId] = useState(null);
   const [isConnected, setIsConnected] = useState(false);
@@ -279,9 +279,16 @@ export const SocketProvider = ({ children, bodyshop }) => {
             description: (
               <ul
                 onClick={() => {
-                  markNotificationRead({ variables: { id: notificationId } }).catch((e) =>
+                  markNotificationRead({ variables: { id: notificationId } })
-                    console.error(`Error marking notification read from info: ${e?.message || ""}`)
+                    .then(() => {
-                  );
+                      if (navigate) {
+                        navigate(`/manage/jobs/${jobId}`); // Use react-router-dom navigate
+                      } else {
+                        console.warn("Navigate function not provided to SocketProvider");
+                        window.location.href = `/manage/jobs/${jobId}`; // Fallback
+                      }
+                    })
+                    .catch((e) => console.error(`Error marking notification read from info: ${e?.message || ""}`));
                 }}
                 style={{ cursor: "pointer" }}
               >
@@ -345,7 +352,7 @@ export const SocketProvider = ({ children, bodyshop }) => {
         setIsConnected(false);
       }
     };
-  }, [bodyshop, notification, userAssociationId, markNotificationRead, markAllNotificationsRead]);
+  }, [bodyshop, notification, userAssociationId, markNotificationRead, markAllNotificationsRead, navigate]); // Add navigate to dependencies
 
   return (
     <SocketContext.Provider