Merge branch 'release/2025-03-14' into feature/IO-3172-RO-Basic-Payments

Signed-off-by: Allan Carr <allan.carr@thinkimex.com> # Conflicts: # client/src/components/header/header.component.jsx # client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx
2025-03-11 13:38:19 -07:00
parent 8045c228d6 b97bc0df8e
commit 87a55028e1
112 changed files with 6728 additions and 1933 deletions
--- a/client/src/components/chat-affix/chat-affix.container.jsx
+++ b/client/src/components/chat-affix/chat-affix.container.jsx
@@ -1,9 +1,9 @@
 import { useApolloClient } from "@apollo/client";
 import { getToken } from "@firebase/messaging";
 import axios from "axios";
-import React, { useContext, useEffect } from "react";
+import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import SocketContext from "../../contexts/SocketIO/socketContext";
+import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
 import { messaging, requestForToken } from "../../firebase/firebase.utils";
 import ChatPopupComponent from "../chat-popup/chat-popup.component";
 import "./chat-affix.styles.scss";
@@ -12,7 +12,7 @@ import { registerMessagingHandlers, unregisterMessagingHandlers } from "./regist
 export function ChatAffixContainer({ bodyshop, chatVisible }) {
  const { t } = useTranslation();
  const client = useApolloClient();
-  const { socket } = useContext(SocketContext);
+  const { socket } = useSocket();

  useEffect(() => {
    if (!bodyshop || !bodyshop.messagingservicesid) return;
--- a/client/src/components/chat-archive-button/chat-archive-button.component.jsx
+++ b/client/src/components/chat-archive-button/chat-archive-button.component.jsx
@@ -1,9 +1,9 @@
 import { useMutation } from "@apollo/client";
 import { Button } from "antd";
-import React, { useContext, useState } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { TOGGLE_CONVERSATION_ARCHIVE } from "../../graphql/conversations.queries";
-import SocketContext from "../../contexts/SocketIO/socketContext.jsx";
+import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors.js";
 import { connect } from "react-redux";
@@ -18,7 +18,7 @@ export function ChatArchiveButton({ conversation, bodyshop }) {
  const [loading, setLoading] = useState(false);
  const { t } = useTranslation();
  const [updateConversation] = useMutation(TOGGLE_CONVERSATION_ARCHIVE);
-  const { socket } = useContext(SocketContext);
+  const { socket } = useSocket();

  const handleToggleArchive = async () => {
    setLoading(true);
--- a/client/src/components/chat-conversation-title-tags/chat-conversation-title-tags.component.jsx
+++ b/client/src/components/chat-conversation-title-tags/chat-conversation-title-tags.component.jsx
@@ -1,11 +1,10 @@
 import { useMutation } from "@apollo/client";
 import { Tag } from "antd";
-import React, { useContext } from "react";
 import { Link } from "react-router-dom";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import { REMOVE_CONVERSATION_TAG } from "../../graphql/job-conversations.queries";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
-import SocketContext from "../../contexts/SocketIO/socketContext.jsx";
+import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors.js";
 import { connect } from "react-redux";
@@ -18,7 +17,7 @@ const mapDispatchToProps = () => ({});

 export function ChatConversationTitleTags({ jobConversations, bodyshop }) {
  const [removeJobConversation] = useMutation(REMOVE_CONVERSATION_TAG);
-  const { socket } = useContext(SocketContext);
+  const { socket } = useSocket();

  const handleRemoveTag = async (jobId) => {
    const convId = jobConversations[0].conversationid;
--- a/client/src/components/chat-conversation/chat-conversation.container.jsx
+++ b/client/src/components/chat-conversation/chat-conversation.container.jsx
@@ -1,10 +1,10 @@
 import { gql, useApolloClient, useQuery, useSubscription } from "@apollo/client";
 import axios from "axios";
-import React, { useCallback, useContext, useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import SocketContext from "../../contexts/SocketIO/socketContext";
-import { GET_CONVERSATION_DETAILS, CONVERSATION_SUBSCRIPTION_BY_PK } from "../../graphql/conversations.queries";
+import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
+import { CONVERSATION_SUBSCRIPTION_BY_PK, GET_CONVERSATION_DETAILS } from "../../graphql/conversations.queries";
 import { selectSelectedConversation } from "../../redux/messaging/messaging.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import ChatConversationComponent from "./chat-conversation.component";
@@ -16,7 +16,7 @@ const mapStateToProps = createStructuredSelector({

 function ChatConversationContainer({ bodyshop, selectedConversation }) {
  const client = useApolloClient();
-  const { socket } = useContext(SocketContext);
+  const { socket } = useSocket();
  const [markingAsReadInProgress, setMarkingAsReadInProgress] = useState(false);

  // Fetch conversation details
--- a/client/src/components/chat-label/chat-label.component.jsx
+++ b/client/src/components/chat-label/chat-label.component.jsx
@@ -1,10 +1,10 @@
 import { PlusOutlined } from "@ant-design/icons";
 import { useMutation } from "@apollo/client";
 import { Input, Spin, Tag, Tooltip } from "antd";
-import React, { useContext, useState } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { UPDATE_CONVERSATION_LABEL } from "../../graphql/conversations.queries";
-import SocketContext from "../../contexts/SocketIO/socketContext.jsx";
+import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors.js";
 import { connect } from "react-redux";
@@ -20,7 +20,7 @@ export function ChatLabel({ conversation, bodyshop }) {
  const [loading, setLoading] = useState(false);
  const [editing, setEditing] = useState(false);
  const [value, setValue] = useState(conversation.label);
-  const { socket } = useContext(SocketContext);
+  const { socket } = useSocket();
  const notification = useNotification();

  const { t } = useTranslation();
--- a/client/src/components/chat-new-conversation/chat-new-conversation.component.jsx
+++ b/client/src/components/chat-new-conversation/chat-new-conversation.component.jsx
@@ -1,12 +1,11 @@
 import { PlusCircleFilled } from "@ant-design/icons";
 import { Button, Form, Popover } from "antd";
-import React, { useContext } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { openChatByPhone } from "../../redux/messaging/messaging.actions";
 import PhoneFormItem, { PhoneItemFormatterValidation } from "../form-items-formatted/phone-form-item.component";
-import SocketContext from "../../contexts/SocketIO/socketContext.jsx";
+import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";

 const mapStateToProps = createStructuredSelector({
  //currentUser: selectCurrentUser
@@ -18,7 +17,7 @@ const mapDispatchToProps = (dispatch) => ({
 export function ChatNewConversation({ openChatByPhone }) {
  const { t } = useTranslation();
  const [form] = Form.useForm();
-  const { socket } = useContext(SocketContext);
+  const { socket } = useSocket();

  const handleFinish = (values) => {
    openChatByPhone({ phone_num: values.phoneNumber, socket });
--- a/client/src/components/chat-open-button/chat-open-button.component.jsx
+++ b/client/src/components/chat-open-button/chat-open-button.component.jsx
@@ -1,5 +1,4 @@
 import parsePhoneNumber from "libphonenumber-js";
-import React, { useContext } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { openChatByPhone } from "../../redux/messaging/messaging.actions";
@@ -8,7 +7,7 @@ import PhoneNumberFormatter from "../../utils/PhoneFormatter";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import { searchingForConversation } from "../../redux/messaging/messaging.selectors";
-import SocketContext from "../../contexts/SocketIO/socketContext.jsx";
+import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 const mapStateToProps = createStructuredSelector({
@@ -22,7 +21,7 @@ const mapDispatchToProps = (dispatch) => ({

 export function ChatOpenButton({ bodyshop, searchingForConversation, phone, jobid, openChatByPhone }) {
  const { t } = useTranslation();
-  const { socket } = useContext(SocketContext);
+  const { socket } = useSocket();
  const notification = useNotification();

  if (!phone) return <></>;
--- a/client/src/components/chat-popup/chat-popup.component.jsx
+++ b/client/src/components/chat-popup/chat-popup.component.jsx
@@ -1,7 +1,7 @@
 import { InfoCircleOutlined, MessageOutlined, ShrinkOutlined, SyncOutlined } from "@ant-design/icons";
 import { useApolloClient, useLazyQuery, useQuery } from "@apollo/client";
 import { Badge, Card, Col, Row, Space, Tag, Tooltip, Typography } from "antd";
-import React, { useContext, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -12,8 +12,9 @@ import ChatConversationListComponent from "../chat-conversation-list/chat-conver
 import ChatConversationContainer from "../chat-conversation/chat-conversation.container";
 import ChatNewConversation from "../chat-new-conversation/chat-new-conversation.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
+
 import "./chat-popup.styles.scss";
-import SocketContext from "../../contexts/SocketIO/socketContext.jsx";

 const mapStateToProps = createStructuredSelector({
  selectedConversation: selectSelectedConversation,
@@ -27,7 +28,7 @@ const mapDispatchToProps = (dispatch) => ({
 export function ChatPopupComponent({ chatVisible, selectedConversation, toggleChatVisible }) {
  const { t } = useTranslation();
  const [pollInterval, setPollInterval] = useState(0);
-  const { socket } = useContext(SocketContext);
+  const { socket } = useSocket();
  const client = useApolloClient(); // Apollo Client instance for cache operations

  // Lazy query for conversations
--- a/client/src/components/chat-tag-ro/chat-tag-ro.container.jsx
+++ b/client/src/components/chat-tag-ro/chat-tag-ro.container.jsx
@@ -2,13 +2,13 @@ import { PlusOutlined } from "@ant-design/icons";
 import { useLazyQuery, useMutation } from "@apollo/client";
 import { Tag } from "antd";
 import _ from "lodash";
-import React, { useContext, useState } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import { INSERT_CONVERSATION_TAG } from "../../graphql/job-conversations.queries";
 import { SEARCH_FOR_JOBS } from "../../graphql/jobs.queries";
 import ChatTagRo from "./chat-tag-ro.component";
-import SocketContext from "../../contexts/SocketIO/socketContext.jsx";
+import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors.js";
 import { connect } from "react-redux";
@@ -22,7 +22,7 @@ const mapDispatchToProps = () => ({});
 export function ChatTagRoContainer({ conversation, bodyshop }) {
  const { t } = useTranslation();
  const [open, setOpen] = useState(false);
-  const { socket } = useContext(SocketContext);
+  const { socket } = useSocket();

  const [loadRo, { loading, data }] = useLazyQuery(SEARCH_FOR_JOBS);

--- a/client/src/components/error-boundary/error-boundary.component.jsx
+++ b/client/src/components/error-boundary/error-boundary.component.jsx
@@ -123,7 +123,7 @@ class ErrorBoundary extends React.Component {
          <Row>
            <Col offset={6} span={12}>
              <Collapse bordered={false}>
-                <Collapse.Panel header={t("general.labels.errors")}>
+                <Collapse.Panel key="errors-panel" header={t("general.labels.errors")}>
                  <div>
                    <strong>{this.state.error.message}</strong>
                  </div>
--- a/client/src/components/eula/eula.component.jsx
+++ b/client/src/components/eula/eula.component.jsx
@@ -78,9 +78,7 @@ const Eula = ({ currentEula, currentUser, acceptEula }) => {
    } catch (err) {
      notification.error({
        message: t("eula.errors.acceptance.message"),
-        description: t("eula.errors.acceptance.description"),
-        placement: "bottomRight",
-        duration: 5000
+        description: t("eula.errors.acceptance.description")
      });
      console.log(`${t("eula.errors.acceptance.message")}`);
      console.dir({
--- a/client/src/components/header/header.component.jsx
+++ b/client/src/components/header/header.component.jsx
@@ -1,6 +1,19 @@
-import Icon, {
+import { Badge, Layout, Menu, Spin } from "antd";
+import { useTranslation } from "react-i18next";
+import { useEffect, useRef, useState } from "react";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { Link } from "react-router-dom";
+import { useQuery } from "@apollo/client";
+import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
+import { useSplitTreatments } from "@splitsoftware/splitio-react";
+import NotificationCenterContainer from "../notification-center/notification-center.container.jsx";
+import LockWrapper from "../lock-wrapper/lock-wrapper.component";
+import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
+import {
  BankFilled,
  BarChartOutlined,
+  BellFilled,
  CarFilled,
  CheckCircleOutlined,
  ClockCircleFilled,
@@ -25,26 +38,21 @@ import Icon, {
  UnorderedListOutlined,
  UserOutlined
 } from "@ant-design/icons";
-import { useSplitTreatments } from "@splitsoftware/splitio-react";
-import { Layout, Menu, Space } from "antd";
-import { useTranslation } from "react-i18next";
 import { BsKanban } from "react-icons/bs";
 import { FaCalendarAlt, FaCarCrash, FaCreditCard, FaFileInvoiceDollar, FaTasks } from "react-icons/fa";
 import { FiLogOut } from "react-icons/fi";
 import { GiPayMoney, GiPlayerTime, GiSettingsKnobs } from "react-icons/gi";
 import { IoBusinessOutline } from "react-icons/io5";
 import { RiSurveyLine } from "react-icons/ri";
-import { connect } from "react-redux";
-import { Link } from "react-router-dom";
-import { createStructuredSelector } from "reselect";
+import { GET_UNREAD_COUNT } from "../../graphql/notifications.queries.js";
 import { 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";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
-import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
-import LockWrapper from "../lock-wrapper/lock-wrapper.component";
+import day from "../../utils/day.js";

+// Redux mappings
 const mapStateToProps = createStructuredSelector({
  currentUser: selectCurrentUser,
  recentItems: selectRecentItems,
@@ -53,43 +61,13 @@ const mapStateToProps = createStructuredSelector({
 });

 const mapDispatchToProps = (dispatch) => ({
-  setBillEnterContext: (context) =>
-    dispatch(
-      setModalContext({
-        context: context,
-        modal: "billEnter"
-      })
-    ),
-  setTimeTicketContext: (context) =>
-    dispatch(
-      setModalContext({
-        context: context,
-        modal: "timeTicket"
-      })
-    ),
-  setPaymentContext: (context) => dispatch(setModalContext({ context: context, modal: "payment" })),
-  setReportCenterContext: (context) =>
-    dispatch(
-      setModalContext({
-        context: context,
-        modal: "reportCenter"
-      })
-    ),
+  setBillEnterContext: (context) => dispatch(setModalContext({ context, modal: "billEnter" })),
+  setTimeTicketContext: (context) => dispatch(setModalContext({ context, modal: "timeTicket" })),
+  setPaymentContext: (context) => dispatch(setModalContext({ context, modal: "payment" })),
+  setReportCenterContext: (context) => dispatch(setModalContext({ context, modal: "reportCenter" })),
  signOutStart: () => dispatch(signOutStart()),
-  setCardPaymentContext: (context) =>
-    dispatch(
-      setModalContext({
-        context: context,
-        modal: "cardPayment"
-      })
-    ),
-  setTaskUpsertContext: (context) =>
-    dispatch(
-      setModalContext({
-        context: context,
-        modal: "taskUpsert"
-      })
-    )
+  setCardPaymentContext: (context) => dispatch(setModalContext({ context, modal: "cardPayment" })),
+  setTaskUpsertContext: (context) => dispatch(setModalContext({ context, modal: "taskUpsert" }))
 });

 function Header({
@@ -115,24 +93,81 @@ function Header({
  });

  const { t } = useTranslation();
+  const { isConnected, scenarioNotificationsOn } = useSocket();
+  const [notificationVisible, setNotificationVisible] = useState(false);
+  const baseTitleRef = useRef(document.title || "");
+  const lastSetTitleRef = useRef("");
+  const userAssociationId = bodyshop?.associations?.[0]?.id;

-  // const deleteBetaCookie = () => {
-  //   const cookieExists = document.cookie.split("; ").some((row) => row.startsWith(`betaSwitchImex=`));
-  //   if (cookieExists) {
-  //     const domain = window.location.hostname.split(".").slice(-2).join(".");
-  //     document.cookie = `betaSwitchImex=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/; domain=.${domain}`;
-  //   }
-  // };
-  //
-  // deleteBetaCookie();
+  const {
+    data: unreadData,
+    refetch: refetchUnread,
+    loading: unreadLoading
+  } = useQuery(GET_UNREAD_COUNT, {
+    variables: { associationid: userAssociationId },
+    fetchPolicy: "network-only",
+    pollInterval: isConnected ? 0 : day.duration(60, "seconds").asMilliseconds(),
+    skip: !userAssociationId || !scenarioNotificationsOn
+  });

-  const accountingChildren = [];
+  const unreadCount = unreadData?.notifications_aggregate?.aggregate?.count ?? 0;

-  accountingChildren.push(
+  useEffect(() => {
+    if (userAssociationId) {
+      refetchUnread().catch((e) => console.error(`Error fetching unread notifications: ${e?.message}`));
+    }
+  }, [refetchUnread, userAssociationId]);
+
+  useEffect(() => {
+    if (!isConnected && !unreadLoading && userAssociationId) {
+      refetchUnread().catch((e) => console.error(`Error fetching unread notifications: ${e?.message}`));
+    }
+  }, [isConnected, unreadLoading, refetchUnread, userAssociationId]);
+
+  // Keep The unread count in the title.
+  useEffect(() => {
+    const updateTitle = () => {
+      const currentTitle = document.title;
+      // Check if the current title differs from what we last set
+      if (currentTitle !== lastSetTitleRef.current) {
+        // Extract base title by removing any unread count prefix
+        const baseTitleMatch = currentTitle.match(/^\(\d+\)\s*(.*)$/);
+        baseTitleRef.current = baseTitleMatch ? baseTitleMatch[1] : currentTitle;
+      }
+
+      // Apply unread count to the base title
+      const newTitle = unreadCount > 0 ? `(${unreadCount}) ${baseTitleRef.current}` : baseTitleRef.current;
+
+      // Only update if the title has changed to avoid unnecessary DOM writes
+      if (document.title !== newTitle) {
+        document.title = newTitle;
+        lastSetTitleRef.current = newTitle; // Store what we set
+      }
+    };
+
+    // Initial update
+    updateTitle();
+
+    // Poll every 100ms to catch child component changes
+    const interval = setInterval(updateTitle, 100);
+
+    // Cleanup
+    return () => {
+      clearInterval(interval);
+      document.title = baseTitleRef.current; // Reset to base title on unmount
+    };
+  }, [unreadCount]); // Re-run when unreadCount changes
+
+  const handleNotificationClick = (e) => {
+    setNotificationVisible(!notificationVisible);
+    if (handleMenuClick) handleMenuClick(e);
+  };
+
+  const accountingChildren = [
    {
      key: "bills",
      id: "header-accounting-bills",
-      icon: <Icon component={FaFileInvoiceDollar} />,
+      icon: <FaFileInvoiceDollar />,
      label: (
        <Link to="/manage/bills">
          <LockWrapper featureName="bills" bodyshop={bodyshop}>
@@ -144,42 +179,31 @@ function Header({
    {
      key: "enterbills",
      id: "header-accounting-enterbills",
-      icon: <Icon component={GiPayMoney} />,
+      icon: <GiPayMoney />,
      label: (
-        <Space>
-          <LockWrapper featureName="bills" bodyshop={bodyshop}>
-            {t("menus.header.enterbills")}
-          </LockWrapper>
-        </Space>
+        <LockWrapper featureName="bills" bodyshop={bodyshop}>
+          {t("menus.header.enterbills")}
+        </LockWrapper>
      ),
-      onClick: () => {
+      onClick: () =>
        HasFeatureAccess({ featureName: "bills", bodyshop }) &&
-          setBillEnterContext({
-            actions: {},
-            context: {}
-          });
-      }
-    }
-  );
-
-  if (Simple_Inventory.treatment === "on") {
-    accountingChildren.push(
-      {
-        type: "divider"
-      },
-      {
-        key: "inventory",
-        id: "header-accounting-inventory",
-        icon: <Icon component={FaFileInvoiceDollar} />,
-        label: <Link to="/manage/inventory">{t("menus.header.inventory")}</Link>
-      }
-    );
-  }
-
-  accountingChildren.push(
-    {
-      type: "divider"
+        setBillEnterContext({
+          actions: {},
+          context: {}
+        })
    },
+    ...(Simple_Inventory.treatment === "on"
+      ? [
+          { type: "divider" },
+          {
+            key: "inventory",
+            id: "header-accounting-inventory",
+            icon: <FaFileInvoiceDollar />,
+            label: <Link to="/manage/inventory">{t("menus.header.inventory")}</Link>
+          }
+        ]
+      : []),
+    { type: "divider" },
    {
      key: "allpayments",
      id: "header-accounting-allpayments",
@@ -209,16 +233,21 @@ function Header({
      onClick: () => {
        setCardPaymentContext({
          actions: {},
-          context: {}
-        });
-      }
-    });
-  }
-
-  accountingChildren.push(
-    {
-      type: "divider"
+          context: null
+        })
    },
+    ...(ImEXPay.treatment === "on"
+      ? [
+          {
+            key: "entercardpayments",
+            id: "header-accounting-entercardpayments",
+            icon: <FaCreditCard />,
+            label: t("menus.header.entercardpayment"),
+            onClick: () => setCardPaymentContext({ actions: {}, context: {} })
+          }
+        ]
+      : []),
+    { type: "divider" },
    {
      key: "timetickets",
      id: "header-accounting-timetickets",
@@ -230,132 +259,124 @@ function Header({
          </LockWrapper>
        </Link>
      )
-    }
-  );
-
-  if (bodyshop?.md_tasks_presets?.use_approvals) {
-    accountingChildren.push({
-      key: "ttapprovals",
-      id: "header-accounting-ttapprovals",
-      icon: <FieldTimeOutlined />,
-      label: <Link to="/manage/ttapprovals">{t("menus.header.ttapprovals")}</Link>
-    });
-  }
-  accountingChildren.push(
+    },
+    ...(bodyshop?.md_tasks_presets?.use_approvals
+      ? [
+          {
+            key: "ttapprovals",
+            id: "header-accounting-ttapprovals",
+            icon: <FieldTimeOutlined />,
+            label: <Link to="/manage/ttapprovals">{t("menus.header.ttapprovals")}</Link>
+          }
+        ]
+      : []),
    {
      key: "entertimetickets",
-      icon: <Icon component={GiPlayerTime} />,
+      id: "header-accounting-entertimetickets",
+      icon: <GiPlayerTime />,
      label: (
        <LockWrapper featureName="timetickets" bodyshop={bodyshop}>
          {t("menus.header.entertimeticket")}
        </LockWrapper>
      ),
-      id: "header-accounting-entertimetickets",
-      onClick: () => {
+      onClick: () =>
        HasFeatureAccess({ featureName: "timetickets", bodyshop }) &&
-          setTimeTicketContext({
-            actions: {},
-            context: {
-              created_by: currentUser.displayName
-                ? currentUser.email.concat(" | ", currentUser.displayName)
-                : currentUser.email
-            }
-          });
-      }
+        setTimeTicketContext({
+          actions: {},
+          context: {
+            created_by: currentUser.displayName
+              ? `${currentUser.email} | ${currentUser.displayName}`
+              : currentUser.email
+          }
+        })
    },
+    { type: "divider" },
    {
-      type: "divider"
-    }
-  );
-
-  const accountingExportChildren = [
-    {
-      key: "receivables",
-      id: "header-accounting-receivables",
+      key: "accountingexport",
+      id: "header-accounting-export",
+      icon: <ExportOutlined />,
      label: (
-        <Link to="/manage/accounting/receivables">
-          <LockWrapper featureName="export" bodyshop={bodyshop}>
-            {t("menus.header.accounting-receivables")}
-          </LockWrapper>
-        </Link>
-      )
+        <LockWrapper featureName="export" bodyshop={bodyshop}>
+          {t("menus.header.export")}
+        </LockWrapper>
+      ),
+      children: [
+        {
+          key: "receivables",
+          id: "header-accounting-receivables",
+          label: (
+            <Link to="/manage/accounting/receivables">
+              <LockWrapper featureName="export" bodyshop={bodyshop}>
+                {t("menus.header.accounting-receivables")}
+              </LockWrapper>
+            </Link>
+          )
+        },
+        ...(!((bodyshop && bodyshop.cdk_dealerid) || (bodyshop && bodyshop.pbs_serialnumber)) ||
+        DmsAp.treatment === "on"
+          ? [
+              {
+                key: "payables",
+                id: "header-accounting-payables",
+                label: (
+                  <Link to="/manage/accounting/payables">
+                    <LockWrapper featureName="export" bodyshop={bodyshop}>
+                      {t("menus.header.accounting-payables")}
+                    </LockWrapper>
+                  </Link>
+                )
+              }
+            ]
+          : []),
+        ...(!((bodyshop && bodyshop.cdk_dealerid) || (bodyshop && bodyshop.pbs_serialnumber))
+          ? [
+              {
+                key: "payments",
+                id: "header-accounting-payments",
+                label: (
+                  <Link to="/manage/accounting/payments">
+                    <LockWrapper featureName="export" bodyshop={bodyshop}>
+                      {t("menus.header.accounting-payments")}
+                    </LockWrapper>
+                  </Link>
+                )
+              }
+            ]
+          : []),
+        { type: "divider" },
+        {
+          key: "exportlogs",
+          id: "header-accounting-exportlogs",
+          label: (
+            <Link to="/manage/accounting/exportlogs">
+              <LockWrapper featureName="export" bodyshop={bodyshop}>
+                {t("menus.header.export-logs")}
+              </LockWrapper>
+            </Link>
+          )
+        }
+      ]
    }
  ];

-  if (!((bodyshop && bodyshop.cdk_dealerid) || (bodyshop && bodyshop.pbs_serialnumber)) || DmsAp.treatment === "on") {
-    accountingExportChildren.push({
-      key: "payables",
-      id: "header-accounting-payables",
-      label: (
-        <Link to="/manage/accounting/payables">
-          <LockWrapper featureName="export" bodyshop={bodyshop}>
-            {t("menus.header.accounting-payables")}
-          </LockWrapper>
-        </Link>
-      )
-    });
-  }
-
-  if (!((bodyshop && bodyshop.cdk_dealerid) || (bodyshop && bodyshop.pbs_serialnumber))) {
-    accountingExportChildren.push({
-      key: "payments",
-      id: "header-accounting-payments",
-      label: (
-        <Link to="/manage/accounting/payments">
-          <LockWrapper featureName="export" bodyshop={bodyshop}>
-            {t("menus.header.accounting-payments")}
-          </LockWrapper>
-        </Link>
-      )
-    });
-  }
-
-  accountingExportChildren.push(
-    {
-      type: "divider"
-    },
-    {
-      key: "exportlogs",
-      id: "header-accounting-exportlogs",
-      label: (
-        <Link to="/manage/accounting/exportlogs">
-          <LockWrapper featureName="export" bodyshop={bodyshop}>
-            {t("menus.header.export-logs")}
-          </LockWrapper>
-        </Link>
-      )
-    }
-  );
-
-  accountingChildren.push({
-    key: "accountingexport",
-    id: "header-accounting-export",
-    icon: <ExportOutlined />,
-    label: (
-      <LockWrapper featureName="export" bodyshop={bodyshop}>
-        {t("menus.header.export")}
-      </LockWrapper>
-    ),
-    children: accountingExportChildren
-  });
-
-  const menuItems = [
+  // Left menu items (includes original navigation items)
+  const leftMenuItems = [
    {
      key: "home",
-      icon: <HomeFilled />,
      id: "header-home",
+      icon: <HomeFilled />,
      label: <Link to="/manage/">{t("menus.header.home")}</Link>
    },
    {
      key: "schedule",
      id: "header-schedule",
-      icon: <Icon component={FaCalendarAlt} />,
+      icon: <FaCalendarAlt />,
      label: <Link to="/manage/schedule">{t("menus.header.schedule")}</Link>
    },
    {
      key: "jobssubmenu",
      id: "header-jobs",
-      icon: <Icon component={FaCarCrash} />,
+      icon: <FaCarCrash />,
      label: t("menus.header.jobs"),
      children: [
        {
@@ -388,31 +409,24 @@ function Header({
          icon: <FileAddOutlined />,
          label: <Link to="/manage/jobs/new">{t("menus.header.newjob")}</Link>
        },
-        {
-          type: "divider",
-          id: "header-jobs-divider"
-        },
+        { type: "divider" },
        {
          key: "alljobs",
          id: "header-all-jobs",
          icon: <UnorderedListOutlined />,
          label: <Link to="/manage/jobs/all">{t("menus.header.alljobs")}</Link>
        },
-        {
-          type: "divider",
-          id: "header-jobs-divider2"
-        },
+        { type: "divider" },
        {
          key: "productionlist",
          id: "header-production-list",
          icon: <ScheduleOutlined />,
          label: <Link to="/manage/production/list">{t("menus.header.productionlist")}</Link>
        },
-
        {
          key: "productionboard",
          id: "header-production-board",
-          icon: <Icon component={BsKanban} />,
+          icon: <BsKanban />,
          label: (
            <Link to="/manage/production/board">
              <LockWrapper featureName="visualboard" bodyshop={bodyshop}>
@@ -421,11 +435,7 @@ function Header({
            </Link>
          )
        },
-
-        {
-          type: "divider",
-          id: "header-jobs-divider3"
-        },
+        { type: "divider" },
        {
          key: "scoreboard",
          id: "header-scoreboard",
@@ -442,8 +452,8 @@ function Header({
    },
    {
      key: "customers",
-      icon: <UserOutlined />,
      id: "header-customers",
+      icon: <UserOutlined />,
      label: t("menus.header.customers"),
      children: [
        {
@@ -508,7 +518,6 @@ function Header({
        }
      ]
    },
-
    ...(accountingChildren.length > 0
      ? [
          {
@@ -526,7 +535,6 @@ function Header({
      icon: <PhoneOutlined />,
      label: <Link to="/manage/phonebook">{t("menus.header.phonebook")}</Link>
    },
-
    {
      key: "temporarydocs",
      id: "header-temporarydocs",
@@ -539,7 +547,6 @@ function Header({
        </Link>
      )
    },
-
    {
      key: "tasks",
      id: "tasks",
@@ -551,12 +558,7 @@ function Header({
          id: "header-create-task",
          icon: <PlusCircleOutlined />,
          label: t("menus.header.create_task"),
-          onClick: () => {
-            setTaskUpsertContext({
-              actions: {},
-              context: {}
-            });
-          }
+          onClick: () => setTaskUpsertContext({ actions: {}, context: {} })
        },
        {
          key: "mytasks",
@@ -581,7 +583,7 @@ function Header({
        {
          key: "shop",
          id: "header-shop",
-          icon: <Icon component={GiSettingsKnobs} />,
+          icon: <GiSettingsKnobs />,
          label: <Link to="/manage/shop?tab=info">{t("menus.header.shop_config")}</Link>
        },
        {
@@ -599,24 +601,18 @@ function Header({
          id: "header-reportcenter",
          icon: <BarChartOutlined />,
          label: t("menus.header.reportcenter"),
-          onClick: () => {
-            setReportCenterContext({
-              actions: {},
-              context: {}
-            });
-          }
+          onClick: () => setReportCenterContext({ actions: {}, context: {} })
        },
        {
          key: "shop-vendors",
          id: "header-shop-vendors",
-          icon: <Icon component={IoBusinessOutline} />,
+          icon: <IoBusinessOutline />,
          label: <Link to="/manage/shop/vendors">{t("menus.header.shop_vendors")}</Link>
        },
-
        {
          key: "shop-csi",
          id: "header-shop-csi",
-          icon: <Icon component={RiSurveyLine} />,
+          icon: <RiSurveyLine />,
          label: (
            <Link to="/manage/shop/csi">
              <LockWrapper featureName="export" bodyshop={bodyshop}>
@@ -627,14 +623,27 @@ function Header({
        }
      ]
    },
+    {
+      key: "recent",
+      id: "header-recent",
+      icon: <ClockCircleFilled />,
+      label: t("menus.header.recent"),
+      children: recentItems.map((i, idx) => ({
+        key: idx,
+        id: `header-recent-${idx}`,
+        label: <Link to={i.url}>{i.label}</Link>
+      }))
+    },
    {
      key: "user",
-      label: currentUser.displayName || currentUser.email || t("general.labels.unknown"),
+      id: "header-user",
+      icon: <UserOutlined />,
+      label: t("menus.currentuser.profile"),
      children: [
        {
          key: "signout",
          id: "header-signout",
-          icon: <Icon component={FiLogOut} />,
+          icon: <FiLogOut />,
          danger: true,
          label: t("user.actions.signout"),
          onClick: () => signOutStart()
@@ -642,33 +651,25 @@ function Header({
        {
          key: "help",
          id: "header-help",
-          icon: <Icon component={QuestionCircleFilled} />,
+          icon: <QuestionCircleFilled />,
          label: t("menus.header.help"),
-          onClick: () => {
-            window.open("https://help.imex.online/", "_blank");
-          }
+          onClick: () => window.open("https://help.imex.online/", "_blank")
        },
-        ...(InstanceRenderManager({
-          imex: true,
-          rome: false
-        })
+        ...(InstanceRenderManager({ imex: true, rome: false })
          ? [
              {
                key: "rescue",
                id: "header-rescue",
-                icon: <Icon component={CarFilled} />,
+                icon: <CarFilled />,
                label: t("menus.header.rescueme"),
-                onClick: () => {
-                  window.open("https://imexrescue.com/", "_blank");
-                }
+                onClick: () => window.open("https://imexrescue.com/", "_blank")
              }
            ]
          : []),
-
        {
          key: "shiftclock",
          id: "header-shiftclock",
-          icon: <Icon component={GiPlayerTime} />,
+          icon: <GiPlayerTime />,
          label: (
            <Link to="/manage/shiftclock">
              <LockWrapper featureName="export" bodyshop={bodyshop}>
@@ -677,64 +678,79 @@ function Header({
            </Link>
          )
        },
-
        {
          key: "profile",
          id: "header-profile",
          icon: <UserOutlined />,
          label: <Link to="/manage/profile">{t("menus.currentuser.profile")}</Link>
        }
-        // {
-        //   key: 'langselecter',
-        //   label: t("menus.currentuser.languageselector"),
-        //   children: [
-        //     {
-        //       key: 'en-US',
-        //       label: t("general.languages.english"),
-        //       onClick: () => {
-        //         window.location.href = "/?lang=en-US";
-        //       }
-        //     },
-        //     {
-        //       key: 'fr-CA',
-        //       label: t("general.languages.french"),
-        //       onClick: () => {
-        //         window.location.href = "/?lang=fr-CA";
-        //       }
-        //     },
-        //     {
-        //       key: 'es-MX',
-        //       label: t("general.languages.spanish"),
-        //       onClick: () => {
-        //         window.location.href = "/?lang=es-MX";
-        //       }
-        //     },
-        //   ]
-        // },
      ]
-    },
-    {
-      key: "recent",
-      icon: <ClockCircleFilled />,
-      id: "header-recent",
-      children: recentItems.map((i, idx) => ({
-        key: idx,
-        id: `header-recent-${idx}`,
-        label: <Link to={i.url}>{i.label}</Link>
-      }))
    }
  ];

+  // Notifications item (always on the right)
+  const notificationItem = scenarioNotificationsOn
+    ? [
+        {
+          key: "notifications",
+          id: "header-notifications",
+          icon: unreadLoading ? (
+            <Spin size="small" />
+          ) : (
+            <Badge offset={[8, 0]} size="small" count={unreadCount}>
+              <BellFilled />
+            </Badge>
+          ),
+          onClick: handleNotificationClick
+        }
+      ]
+    : [];
+
  return (
-    <Layout.Header>
-      <Menu
-        mode="horizontal"
-        theme={"dark"}
-        selectedKeys={[selectedHeader]}
-        onClick={handleMenuClick}
-        subMenuCloseDelay={0.3}
-        items={menuItems}
-      />
+    <Layout.Header style={{ padding: 0, background: "#001529" }}>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          height: "100%",
+          overflow: "hidden"
+        }}
+      >
+        <Menu
+          mode="horizontal"
+          theme="dark"
+          selectedKeys={[selectedHeader]}
+          onClick={handleMenuClick}
+          subMenuCloseDelay={0.3}
+          items={leftMenuItems}
+          style={{
+            flex: "1 1 auto",
+            minWidth: 0,
+            overflowX: "auto",
+            borderBottom: "none",
+            background: "transparent"
+          }}
+        />
+        {scenarioNotificationsOn && (
+          <Menu
+            mode="horizontal"
+            theme="dark"
+            selectedKeys={[selectedHeader]}
+            onClick={handleMenuClick}
+            subMenuCloseDelay={0.3}
+            items={notificationItem}
+            style={{ flex: "0 0 auto", minWidth: 0, borderBottom: "none", background: "transparent" }}
+          />
+        )}
+      </div>
+      {scenarioNotificationsOn && (
+        <NotificationCenterContainer
+          visible={notificationVisible}
+          onClose={() => setNotificationVisible(false)}
+          unreadCount={unreadCount}
+        />
+      )}
    </Layout.Header>
  );
 }
--- a/client/src/components/header/header.container.jsx
+++ b/client/src/components/header/header.container.jsx
@@ -1,30 +1,7 @@
 import { connect } from "react-redux";
 import HeaderComponent from "./header.component";

-// const mapDispatchToProps = (dispatch) => ({
-//   setUserLanguage: (language) => dispatch(setUserLanguage(language))
-// });
-
-// setUserLanguage was removed from signature because it is not used in the component, and it is throwing a deprecation warning
 export function HeaderContainer() {
-  // Commented out the handleMenuClick function because it is not used in the component, and it is throwing a deprecation warning
-
-  /*  const handleMenuClick = (e) => {
-    if (e.item.props.actiontype === "lang-select") {
-      i18next.changeLanguage(e.key, (err, t) => {
-        if (err) {
-          logImEXEvent("language_change_error", { error: err });
-
-          return console.log("Error encountered when changing languages.", err);
-        }
-        logImEXEvent("language_change", { language: e.key });
-
-        setUserLanguage(e.key);
-      });
-    }
-  };*/
-  // return <HeaderComponent handleMenuClick={handleMenuClick} />;
-
  return <HeaderComponent />;
 }

--- a/client/src/components/job-at-change/schedule-event.component.jsx
+++ b/client/src/components/job-at-change/schedule-event.component.jsx
@@ -3,12 +3,12 @@ import { useMutation } from "@apollo/client";
 import { Button, Divider, Dropdown, Form, Input, Popover, Select, Space } from "antd";
 import parsePhoneNumber from "libphonenumber-js";
 import queryString from "query-string";
-import React, { useContext, useState } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
-import SocketContext from "../../contexts/SocketIO/socketContext.jsx";
+import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
 import { UPDATE_APPOINTMENT } from "../../graphql/appointments.queries";
 import { openChatByPhone, setMessage } from "../../redux/messaging/messaging.actions";
 import { setModalContext } from "../../redux/modals/modals.actions";
@@ -51,7 +51,7 @@ export function ScheduleEventComponent({
  const searchParams = queryString.parse(useLocation().search);
  const [updateAppointment] = useMutation(UPDATE_APPOINTMENT);
  const [title, setTitle] = useState(event.title);
-  const { socket } = useContext(SocketContext);
+  const { socket } = useSocket();
  const notification = useNotification();

  const blockContent = (
--- a/client/src/components/job-close-ro-guard/job-close-ro-guard.container.jsx
+++ b/client/src/components/job-close-ro-guard/job-close-ro-guard.container.jsx
@@ -216,7 +216,7 @@ export function JobCloseRoGuardContainer({ job, jobRO, bodyshop, form }) {
          </Form.Item>
        </Collapse.Panel>

-        <Collapse.Panel header={t("jobs.labels.performance")}>
+        <Collapse.Panel key="job-performance" header={t("jobs.labels.performance")}>
          <Row gutter={[32, 32]}>
            <Col className="ro-guard-col" span={24}>
              <JobCloseRoGuardTtLifecycle job={job} />
--- a/client/src/components/job-detail-cards/job-detail-cards.component.jsx
+++ b/client/src/components/job-detail-cards/job-detail-cards.component.jsx
@@ -21,6 +21,8 @@ import JobDetailCardsInsuranceComponent from "./job-detail-cards.insurance.compo
 import JobDetailCardsNotesComponent from "./job-detail-cards.notes.component";
 import JobDetailCardsPartsComponent from "./job-detail-cards.parts.component";
 import JobDetailCardsTotalsComponent from "./job-detail-cards.totals.component";
+import JobWatcherToggleContainer from "../job-watcher-toggle/job-watcher-toggle.container.jsx";
+import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
@@ -37,6 +39,7 @@ const span = {
 };

 export function JobDetailCards({ bodyshop, setPrintCenterContext }) {
+  const { scenarioNotificationsOn } = useSocket();
  const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
    .filter((screen) => !!screen[1])
    .slice(-1)[0];
@@ -78,7 +81,12 @@ export function JobDetailCards({ bodyshop, setPrintCenterContext }) {
      {data ? (
        <Card
          title={
-            <Link to={`/manage/jobs/${data.jobs_by_pk.id}`}>{data.jobs_by_pk.ro_number || t("general.labels.na")}</Link>
+            <Space>
+              {scenarioNotificationsOn && <JobWatcherToggleContainer job={data.jobs_by_pk} />}
+              <Link to={`/manage/jobs/${data.jobs_by_pk.id}`}>
+                {data.jobs_by_pk.ro_number || t("general.labels.na")}
+              </Link>
+            </Space>
          }
          extra={
            <Space wrap>
@@ -122,7 +130,11 @@ export function JobDetailCards({ bodyshop, setPrintCenterContext }) {
            </Col>
            {!bodyshop.uselocalmediaserver && (
              <Col {...span}>
-                <JobDetailCardsDocumentsComponent loading={loading} data={data ? data.jobs_by_pk : null} bodyshop={bodyshop} />
+                <JobDetailCardsDocumentsComponent
+                  loading={loading}
+                  data={data ? data.jobs_by_pk : null}
+                  bodyshop={bodyshop}
+                />
              </Col>
            )}
            <Col {...span}>
--- a/client/src/components/job-totals-table/job-totals-table.component.jsx
+++ b/client/src/components/job-totals-table/job-totals-table.component.jsx
@@ -69,7 +69,7 @@ export function JobsTotalsTableComponent({ jobRO, currentUser, job }) {
                <Card title="DEVELOPMENT USE ONLY">
                  <JobCalculateTotals job={job} disabled={jobRO} />
                  <Collapse>
-                    <Collapse.Panel header="JSON Tree Totals">
+                    <Collapse.Panel key="json-totals" header="JSON Tree Totals">
                      <div>
                        <pre>
                          {JSON.stringify(
--- a/client/src/components/job-watcher-toggle/job-watcher-toggle.component.jsx
+++ b/client/src/components/job-watcher-toggle/job-watcher-toggle.component.jsx
@@ -0,0 +1,154 @@
+import React from "react";
+import { EyeFilled, EyeOutlined, UserOutlined } from "@ant-design/icons";
+import { Avatar, Button, Divider, List, Popover, Select, Tooltip, Typography } from "antd";
+import { useTranslation } from "react-i18next";
+import EmployeeSearchSelectComponent from "../../components/employee-search-select/employee-search-select.component.jsx";
+import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component.jsx";
+import { BiSolidTrash } from "react-icons/bi";
+
+const { Text } = Typography;
+
+export default function JobWatcherToggleComponent({
+  jobWatchers,
+  isWatching,
+  watcherLoading,
+  adding,
+  removing,
+  open,
+  setOpen,
+  selectedWatcher,
+  setSelectedWatcher,
+  selectedTeam,
+  bodyshop,
+  Enhanced_Payroll,
+  handleToggleSelf,
+  handleRemoveWatcher,
+  handleWatcherSelect,
+  handleTeamSelect
+}) {
+  const { t } = useTranslation();
+
+  const handleRenderItem = (watcher) => {
+    // Check if watcher is defined and has user_email
+    if (!watcher || !watcher.user_email) {
+      return null; // Skip rendering invalid watchers
+    }
+
+    const employee = bodyshop?.employees?.find((e) => e.user_email === watcher.user_email);
+    const displayName = employee ? `${employee.first_name} ${employee.last_name}` : watcher.user_email;
+
+    return (
+      <List.Item
+        actions={[
+          <Button
+            type="default"
+            danger
+            size="medium"
+            icon={<BiSolidTrash />}
+            onClick={() => handleRemoveWatcher(watcher.user_email)}
+            disabled={adding || removing} // Optional: Disable button during mutations
+          >
+            {t("notifications.actions.remove")}
+          </Button>
+        ]}
+      >
+        <List.Item.Meta
+          avatar={<Avatar icon={<UserOutlined />} />}
+          title={<Text>{displayName}</Text>}
+          description={watcher.user_email}
+        />
+      </List.Item>
+    );
+  };
+
+  const popoverContent = (
+    <div style={{ width: "30em" }}>
+      <List>
+        <List.Item
+          actions={[
+            <Button
+              type={isWatching ? "primary" : "default"}
+              danger={!isWatching}
+              icon={isWatching ? <EyeOutlined /> : <EyeFilled />}
+              size="medium"
+              onClick={handleToggleSelf}
+              loading={adding || removing}
+            >
+              {isWatching ? t("notifications.labels.unwatch") : t("notifications.labels.watch")}
+            </Button>
+          ]}
+        >
+          <List.Item.Meta>
+            <Text type="secondary" style={{ marginBottom: 8, display: "block" }}>
+              {t("notifications.labels.watching-issue")}
+            </Text>
+          </List.Item.Meta>
+        </List.Item>
+      </List>
+      {watcherLoading ? (
+        <LoadingSpinner />
+      ) : jobWatchers && jobWatchers.length > 0 ? (
+        <List dataSource={jobWatchers} renderItem={handleRenderItem} />
+      ) : (
+        <Text type="secondary">{t("notifications.labels.no-watchers")}</Text>
+      )}
+
+      <Divider />
+      <Text type="secondary">{t("notifications.labels.add-watchers")}</Text>
+      <EmployeeSearchSelectComponent
+        style={{ minWidth: "100%" }}
+        options={
+          bodyshop?.employees?.filter((e) =>
+            jobWatchers.every((w) => w.user_email !== e.user_email && e.active && e.user_email)
+          ) || []
+        }
+        placeholder={t("notifications.labels.employee-search")}
+        value={selectedWatcher}
+        onChange={(value) => {
+          setSelectedWatcher(value);
+          handleWatcherSelect(value);
+        }}
+      />
+      {Enhanced_Payroll && bodyshop?.employee_teams?.length > 0 && (
+        <>
+          <Divider />
+          <Text type="secondary">{t("notifications.labels.add-watchers-team")}</Text>
+          <Select
+            showSearch
+            style={{ minWidth: "100%" }}
+            placeholder={t("notifications.labels.teams-search")}
+            value={selectedTeam}
+            onChange={handleTeamSelect}
+            options={
+              bodyshop?.employee_teams?.map((team) => {
+                const teamMembers = team.employee_team_members
+                  .map((member) => {
+                    const employee = bodyshop?.employees?.find((e) => e.id === member.employeeid);
+                    return employee?.user_email && employee?.active ? employee.user_email : null;
+                  })
+                  .filter(Boolean);
+                return {
+                  value: JSON.stringify(teamMembers),
+                  label: team.name
+                };
+              }) || []
+            }
+          />
+        </>
+      )}
+    </div>
+  );
+
+  return (
+    <Popover placement="rightTop" content={popoverContent} trigger="click" open={open} onOpenChange={setOpen}>
+      <Tooltip title={t("notifications.tooltips.job-watchers")}>
+        <Button
+          shape="circle"
+          type={isWatching ? "primary" : "default"}
+          icon={isWatching ? <EyeFilled /> : <EyeOutlined />}
+          loading={watcherLoading}
+        />
+      </Tooltip>
+    </Popover>
+  );
+}
--- a/client/src/components/job-watcher-toggle/job-watcher-toggle.container.jsx
+++ b/client/src/components/job-watcher-toggle/job-watcher-toggle.container.jsx
@@ -0,0 +1,219 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useMutation, useQuery } from "@apollo/client";
+import { ADD_JOB_WATCHER, GET_JOB_WATCHERS, REMOVE_JOB_WATCHER } from "../../graphql/jobs.queries.js";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors.js";
+import { useSplitTreatments } from "@splitsoftware/splitio-react";
+import JobWatcherToggleComponent from "./job-watcher-toggle.component.jsx";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+  currentUser: selectCurrentUser
+});
+
+function JobWatcherToggleContainer({ job, currentUser, bodyshop }) {
+  const {
+    treatments: { Enhanced_Payroll }
+  } = useSplitTreatments({
+    attributes: {},
+    names: ["Enhanced_Payroll"],
+    splitKey: bodyshop && bodyshop.imexshopid
+  });
+
+  const userEmail = currentUser.email;
+  const jobid = job.id;
+
+  const [open, setOpen] = useState(false);
+  const [selectedWatcher, setSelectedWatcher] = useState(null);
+  const [selectedTeam, setSelectedTeam] = useState(null);
+
+  // Fetch current watchers with refetch capability
+  const {
+    data: watcherData,
+    loading: watcherLoading,
+    refetch
+  } = useQuery(GET_JOB_WATCHERS, {
+    variables: { jobid },
+    fetchPolicy: "cache-and-network" // Ensure fresh data from server
+  });
+
+  // Refetch jobWatchers when the popover opens (open changes to true)
+  useEffect(() => {
+    if (open) {
+      refetch().catch((err) =>
+        console.error(`Something went wrong fetching Notification Watchers on popover open: ${err?.message}`, {
+          stack: err?.stack
+        })
+      );
+    }
+  }, [open, refetch]);
+
+  const jobWatchers = useMemo(() => (watcherData?.job_watchers ? [...watcherData.job_watchers] : []), [watcherData]);
+  const isWatching = jobWatchers.some((w) => w.user_email === userEmail);
+
+  const [addWatcher, { loading: adding }] = useMutation(ADD_JOB_WATCHER, {
+    onCompleted: () =>
+      refetch().catch((err) =>
+        console.error(`Something went wrong fetching Notification Watchers after add: ${err?.message}`, {
+          stack: err?.stack
+        })
+      ),
+    onError: (err) => {
+      if (err.graphQLErrors && err.graphQLErrors.length > 0) {
+        const errorMessage = err.graphQLErrors[0].message;
+        if (
+          errorMessage.includes("Uniqueness violation") ||
+          errorMessage.includes("idx_job_watchers_jobid_user_email_unique")
+        ) {
+          console.warn("Watcher already exists for this job and user.");
+          refetch().catch((err) =>
+            console.error(
+              `Something went wrong fetching Notification Watchers after uniqueness violation: ${err?.message}`,
+              { stack: err?.stack }
+            )
+          ); // Sync with server to ensure UI reflects actual state
+        } else {
+          console.error(`Error adding job watcher: ${errorMessage}`);
+        }
+      } else {
+        console.error(`Unexpected error adding job watcher: ${err.message || JSON.stringify(err)}`);
+      }
+    },
+    update(cache, { data }) {
+      if (!data || !data.insert_job_watchers_one) {
+        console.warn("No data or insert_job_watchers_one returned from mutation, skipping cache update.");
+        refetch().catch((err) =>
+          console.error(`Something went wrong updating Notification Watchers after add: ${err?.message}`, {
+            stack: err?.stack
+          })
+        );
+        return;
+      }
+
+      const insert_job_watchers_one = data.insert_job_watchers_one;
+      const existingData = cache.readQuery({
+        query: GET_JOB_WATCHERS,
+        variables: { jobid }
+      });
+
+      cache.writeQuery({
+        query: GET_JOB_WATCHERS,
+        variables: { jobid },
+        data: {
+          ...existingData,
+          job_watchers: [...(existingData?.job_watchers || []), insert_job_watchers_one]
+        }
+      });
+    }
+  });
+
+  const [removeWatcher, { loading: removing }] = useMutation(REMOVE_JOB_WATCHER, {
+    onCompleted: () =>
+      refetch().catch((err) =>
+        console.error(`Something went wrong fetching Notification Watchers after remove: ${err?.message}`, {
+          stack: err?.stack
+        })
+      ), // Refetch to sync with server after success
+    onError: (err) => console.error(`Error removing job watcher: ${err.message}`),
+    update(cache, { data: { delete_job_watchers } }) {
+      const existingData = cache.readQuery({
+        query: GET_JOB_WATCHERS,
+        variables: { jobid }
+      });
+
+      const deletedWatcher = delete_job_watchers.returning[0];
+      const updatedWatchers = deletedWatcher
+        ? (existingData?.job_watchers || []).filter((watcher) => watcher.user_email !== deletedWatcher.user_email)
+        : existingData?.job_watchers || [];
+
+      cache.writeQuery({
+        query: GET_JOB_WATCHERS,
+        variables: { jobid },
+        data: {
+          ...existingData,
+          job_watchers: updatedWatchers
+        }
+      });
+    }
+  });
+
+  const handleToggleSelf = useCallback(async () => {
+    if (adding || removing) return;
+    if (isWatching) {
+      await removeWatcher({ variables: { jobid, userEmail } });
+    } else {
+      await addWatcher({ variables: { jobid, userEmail } });
+    }
+  }, [isWatching, addWatcher, removeWatcher, jobid, userEmail, adding, removing]);
+
+  const handleRemoveWatcher = useCallback(
+    async (email) => {
+      if (removing) return;
+      await removeWatcher({ variables: { jobid, userEmail: email } });
+    },
+    [removeWatcher, jobid, removing]
+  );
+
+  const handleWatcherSelect = useCallback(
+    async (selectedUser) => {
+      if (adding || removing) return;
+      const employee = bodyshop.employees.find((e) => e.id === selectedUser);
+      if (!employee) return;
+
+      const email = employee.user_email;
+      const isAlreadyWatching = jobWatchers.some((w) => w.user_email === email);
+
+      if (isAlreadyWatching) {
+        await handleRemoveWatcher(email);
+      } else {
+        await addWatcher({ variables: { jobid, userEmail: email } });
+      }
+      setSelectedWatcher(null);
+    },
+    [jobWatchers, addWatcher, handleRemoveWatcher, jobid, bodyshop, adding, removing]
+  );
+
+  const handleTeamSelect = useCallback(
+    async (team) => {
+      if (adding) return;
+      const selectedTeamMembers = JSON.parse(team);
+      const newWatchers = selectedTeamMembers.filter(
+        (email) => !jobWatchers.some((watcher) => watcher.user_email === email)
+      );
+
+      if (newWatchers.length === 0) {
+        console.warn("All selected team members are already watchers.");
+        setSelectedTeam(null);
+        return;
+      }
+      await Promise.all(newWatchers.map((email) => addWatcher({ variables: { jobid, userEmail: email } })));
+    },
+    [jobWatchers, addWatcher, jobid, adding]
+  );
+
+  return (
+    <JobWatcherToggleComponent
+      jobWatchers={jobWatchers}
+      isWatching={isWatching}
+      watcherLoading={watcherLoading}
+      adding={adding}
+      removing={removing}
+      open={open}
+      setOpen={setOpen}
+      selectedWatcher={selectedWatcher}
+      setSelectedWatcher={setSelectedWatcher}
+      selectedTeam={selectedTeam}
+      setSelectedTeam={setSelectedTeam}
+      bodyshop={bodyshop}
+      Enhanced_Payroll={Enhanced_Payroll}
+      handleToggleSelf={handleToggleSelf}
+      handleRemoveWatcher={handleRemoveWatcher}
+      handleWatcherSelect={handleWatcherSelect}
+      handleTeamSelect={handleTeamSelect}
+      currentUser={currentUser}
+    />
+  );
+}
+
+export default connect(mapStateToProps)(JobWatcherToggleContainer);
--- a/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx
+++ b/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx
@@ -4,13 +4,12 @@ import { useSplitTreatments } from "@splitsoftware/splitio-react";
 import { Button, Card, Dropdown, Form, Input, Modal, Popconfirm, Popover, Select, Space } from "antd";
 import axios from "axios";
 import parsePhoneNumber from "libphonenumber-js";
-import { useContext, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { Link, useNavigate } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
-import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
-import SocketContext from "../../contexts/SocketIO/socketContext.jsx";
+import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
 import { auth, logImEXEvent } from "../../firebase/firebase.utils";
 import { CANCEL_APPOINTMENTS_BY_JOB_ID, INSERT_MANUAL_APPT } from "../../graphql/appointments.queries";
 import { GET_CURRENT_QUESTIONSET_ID, INSERT_CSI } from "../../graphql/csi.queries";
@@ -130,7 +129,7 @@ export function JobsDetailHeaderActions({
  const [updateJob] = useMutation(UPDATE_JOB);
  const [voidJob] = useMutation(VOID_JOB);
  const [cancelAllAppointments] = useMutation(CANCEL_APPOINTMENTS_BY_JOB_ID);
-  const { socket } = useContext(SocketContext);
+  const { socket } = useSocket();
  const notification = useNotification();

  const {
--- a/client/src/components/jobs-detail-header/jobs-detail-header.component.jsx
+++ b/client/src/components/jobs-detail-header/jobs-detail-header.component.jsx
@@ -119,7 +119,7 @@ export function JobsDetailHeader({ job, bodyshop, disabled }) {
              <DataLabel label={t("jobs.labels.contracts")}>
                {job.cccontracts.map((c, index) => (
                  <Space key={c.id} wrap>
-                    <Link  to={`/manage/courtesycars/contracts/${c.id}`}>
+                    <Link to={`/manage/courtesycars/contracts/${c.id}`}>
                      {`${c.agreementnumber} - ${c.courtesycar.fleetnumber} ${c.courtesycar.year} ${c.courtesycar.make} ${c.courtesycar.model}`}
                      {index !== job.cccontracts.length - 1 ? "," : null}
                    </Link>
--- a/client/src/components/notification-center/notification-center.component.jsx
+++ b/client/src/components/notification-center/notification-center.component.jsx
@@ -0,0 +1,122 @@
+import { Virtuoso } from "react-virtuoso";
+import { Badge, Button, Space, Spin, Switch, Tooltip, Typography } from "antd";
+import { CheckCircleFilled, CheckCircleOutlined, EyeFilled, EyeOutlined } from "@ant-design/icons";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import "./notification-center.styles.scss";
+import day from "../../utils/day.js";
+import { forwardRef, useRef, useEffect } from "react";
+import { DateTimeFormat } from "../../utils/DateFormatter.jsx";
+
+const { Text, Title } = Typography;
+
+/**
+ * Notification Center Component
+ * @type {React.ForwardRefExoticComponent<React.PropsWithoutRef<{readonly visible?: *, readonly onClose?: *, readonly notifications?: *, readonly loading?: *, readonly showUnreadOnly?: *, readonly toggleUnreadOnly?: *, readonly markAllRead?: *, readonly loadMore?: *, readonly onNotificationClick?: *, readonly unreadCount?: *}> & React.RefAttributes<unknown>>}
+ */
+const NotificationCenterComponent = forwardRef(
+  (
+    {
+      visible,
+      onClose,
+      notifications,
+      loading,
+      showUnreadOnly,
+      toggleUnreadOnly,
+      markAllRead,
+      loadMore,
+      onNotificationClick,
+      unreadCount
+    },
+    ref
+  ) => {
+    const { t } = useTranslation();
+    const navigate = useNavigate();
+    const virtuosoRef = useRef(null);
+
+    // Scroll to top when showUnreadOnly changes
+    useEffect(() => {
+      if (virtuosoRef.current) {
+        virtuosoRef.current.scrollToIndex({ index: 0, behavior: "smooth" });
+      }
+    }, [showUnreadOnly]);
+
+    const renderNotification = (index, notification) => {
+      const handleClick = () => {
+        if (!notification.read) {
+          onNotificationClick(notification.id);
+        }
+        navigate(`/manage/jobs/${notification.jobid}`);
+      };
+
+      return (
+        <div
+          key={`${notification.id}-${index}`}
+          className={`notification-item ${notification.read ? "notification-read" : "notification-unread"}`}
+          onClick={handleClick}
+        >
+          <Badge dot={!notification.read}>
+            <div className="notification-content">
+              <Title level={5} className="notification-title">
+                <span className="ro-number">
+                  {t("notifications.labels.ro-number", { ro_number: notification.roNumber || t("general.labels.na") })}
+                </span>
+                <Text type="secondary" className="relative-time" title={DateTimeFormat(notification.created_at)}>
+                  {day(notification.created_at).fromNow()}
+                </Text>
+              </Title>
+              <Text strong={!notification.read} className="notification-body">
+                <ul>
+                  {notification.scenarioText.map((text, idx) => (
+                    <li key={`${notification.id}-${idx}`}>{text}</li>
+                  ))}
+                </ul>
+              </Text>
+            </div>
+          </Badge>
+        </div>
+      );
+    };
+
+    return (
+      <div className={`notification-center ${visible ? "visible" : ""}`} ref={ref}>
+        <div className="notification-header">
+          <Space direction="horizontal">
+            <h3>{t("notifications.labels.notification-center")}</h3>
+            {loading && <Spin spinning={loading} size="small"></Spin>}
+          </Space>
+          <div className="notification-controls">
+            <Tooltip title={t("notifications.labels.show-unread-only")}>
+              <Space size={4} align="center" className="notification-toggle">
+                {showUnreadOnly ? (
+                  <EyeFilled className="notification-toggle-icon" />
+                ) : (
+                  <EyeOutlined className="notification-toggle-icon" />
+                )}
+                <Switch checked={showUnreadOnly} onChange={(checked) => toggleUnreadOnly(checked)} size="small" />
+              </Space>
+            </Tooltip>
+            <Tooltip title={t("notifications.labels.mark-all-read")}>
+              <Button
+                type="link"
+                icon={!unreadCount ? <CheckCircleFilled /> : <CheckCircleOutlined />}
+                onClick={markAllRead}
+                disabled={!unreadCount}
+              />
+            </Tooltip>
+          </div>
+        </div>
+        <Virtuoso
+          ref={virtuosoRef}
+          style={{ height: "400px", width: "100%" }}
+          data={notifications}
+          totalCount={notifications.length}
+          endReached={loadMore}
+          itemContent={renderNotification}
+        />
+      </div>
+    );
+  }
+);
+
+export default NotificationCenterComponent;
--- a/client/src/components/notification-center/notification-center.container.jsx
+++ b/client/src/components/notification-center/notification-center.container.jsx
@@ -0,0 +1,202 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useQuery } from "@apollo/client";
+import { connect } from "react-redux";
+import NotificationCenterComponent from "./notification-center.component";
+import { GET_NOTIFICATIONS } from "../../graphql/notifications.queries";
+import { INITIAL_NOTIFICATIONS, useSocket } from "../../contexts/SocketIO/useSocket.jsx";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors.js";
+import day from "../../utils/day.js";
+
+// This will be used to poll for notifications when the socket is disconnected
+const NOTIFICATION_POLL_INTERVAL_SECONDS = 60;
+
+/**
+ * Notification Center Container
+ * @param visible
+ * @param onClose
+ * @param bodyshop
+ * @param unreadCount
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const NotificationCenterContainer = ({ visible, onClose, bodyshop, unreadCount }) => {
+  const [showUnreadOnly, setShowUnreadOnly] = useState(false);
+  const [notifications, setNotifications] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const { isConnected, markNotificationRead, markAllNotificationsRead } = useSocket();
+  const notificationRef = useRef(null);
+
+  const userAssociationId = bodyshop?.associations?.[0]?.id;
+
+  const baseWhereClause = useMemo(() => {
+    return { associationid: { _eq: userAssociationId } };
+  }, [userAssociationId]);
+
+  const whereClause = useMemo(() => {
+    return showUnreadOnly ? { ...baseWhereClause, read: { _is_null: true } } : baseWhereClause;
+  }, [baseWhereClause, showUnreadOnly]);
+
+  const {
+    data,
+    fetchMore,
+    loading: queryLoading,
+    refetch
+  } = useQuery(GET_NOTIFICATIONS, {
+    variables: {
+      limit: INITIAL_NOTIFICATIONS,
+      offset: 0,
+      where: whereClause
+    },
+    fetchPolicy: "cache-and-network",
+    notifyOnNetworkStatusChange: true,
+    pollInterval: isConnected ? 0 : day.duration(NOTIFICATION_POLL_INTERVAL_SECONDS, "seconds").asMilliseconds(),
+    skip: !userAssociationId,
+    onError: (err) => {
+      console.error(`Error polling Notifications: ${err?.message || ""}`);
+      setTimeout(() => refetch(), day.duration(2, "seconds").asMilliseconds());
+    }
+  });
+
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      // Prevent open + close behavior from the header
+      if (event.target.closest("#header-notifications")) return;
+      if (visible && notificationRef.current && !notificationRef.current.contains(event.target)) {
+        onClose();
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [visible, onClose]);
+
+  useEffect(() => {
+    if (data?.notifications) {
+      const processedNotifications = data.notifications
+        .map((notif) => {
+          let scenarioText;
+          let scenarioMeta;
+          try {
+            scenarioText = notif.scenario_text ? JSON.parse(notif.scenario_text) : [];
+            scenarioMeta = notif.scenario_meta ? JSON.parse(notif.scenario_meta) : {};
+          } catch (e) {
+            console.error("Error parsing JSON for notification:", notif.id, e);
+            scenarioText = [notif.fcm_text || "Invalid notification data"];
+            scenarioMeta = {};
+          }
+          if (!Array.isArray(scenarioText)) scenarioText = [scenarioText];
+          const roNumber = notif.job.ro_number;
+          if (!Array.isArray(scenarioMeta)) scenarioMeta = [scenarioMeta];
+          return {
+            id: notif.id,
+            jobid: notif.jobid,
+            associationid: notif.associationid,
+            scenarioText,
+            scenarioMeta,
+            roNumber,
+            created_at: notif.created_at,
+            read: notif.read,
+            __typename: notif.__typename
+          };
+        })
+        .sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
+      setNotifications(processedNotifications);
+    }
+  }, [data]);
+
+  const loadMore = useCallback(() => {
+    if (!queryLoading && data?.notifications.length) {
+      setIsLoading(true); // Show spinner during fetchMore
+      fetchMore({
+        variables: { offset: data.notifications.length, where: whereClause },
+        updateQuery: (prev, { fetchMoreResult }) => {
+          if (!fetchMoreResult) return prev;
+          return {
+            notifications: [...prev.notifications, ...fetchMoreResult.notifications]
+          };
+        }
+      })
+        .catch((err) => {
+          console.error("Fetch more error:", err);
+        })
+        .finally(() => setIsLoading(false)); // Hide spinner when done
+    }
+  }, [data?.notifications?.length, fetchMore, queryLoading, whereClause]);
+
+  const handleToggleUnreadOnly = (value) => {
+    setShowUnreadOnly(value);
+  };
+
+  const handleMarkAllRead = useCallback(() => {
+    setIsLoading(true);
+    markAllNotificationsRead()
+      .then(() => {
+        const timestamp = new Date().toISOString();
+        setNotifications((prev) => {
+          const updatedNotifications = prev.map((notif) =>
+            notif.read === null && notif.associationid === userAssociationId
+              ? {
+                  ...notif,
+                  read: timestamp
+                }
+              : notif
+          );
+          // Filter out read notifications if in unread only mode
+          return showUnreadOnly ? updatedNotifications.filter((notif) => !notif.read) : updatedNotifications;
+        });
+      })
+      .catch((e) => console.error(`Error marking all notifications read: ${e?.message || ""}`))
+      .finally(() => setIsLoading(false));
+  }, [markAllNotificationsRead, userAssociationId, showUnreadOnly]);
+
+  const handleNotificationClick = useCallback(
+    (notificationId) => {
+      setIsLoading(true);
+      markNotificationRead({ variables: { id: notificationId } })
+        .then(() => {
+          const timestamp = new Date().toISOString();
+          setNotifications((prev) => {
+            const updatedNotifications = prev.map((notif) =>
+              notif.id === notificationId && !notif.read ? { ...notif, read: timestamp } : notif
+            );
+            // Filter out the read notification if in unread only mode
+            return showUnreadOnly ? updatedNotifications.filter((notif) => !notif.read) : updatedNotifications;
+          });
+        })
+        .catch((e) => console.error(`Error marking notification read: ${e?.message || ""}`))
+        .finally(() => setIsLoading(false));
+    },
+    [markNotificationRead, showUnreadOnly]
+  );
+
+  useEffect(() => {
+    if (visible && !isConnected) {
+      setIsLoading(true);
+      refetch()
+        .catch((err) => console.error(`Error re-fetching notifications: ${err?.message || ""}`))
+        .finally(() => setIsLoading(false));
+    }
+  }, [visible, isConnected, refetch]);
+
+  return (
+    <NotificationCenterComponent
+      ref={notificationRef}
+      visible={visible}
+      onClose={onClose}
+      notifications={notifications}
+      loading={isLoading}
+      showUnreadOnly={showUnreadOnly}
+      toggleUnreadOnly={handleToggleUnreadOnly}
+      markAllRead={handleMarkAllRead}
+      loadMore={loadMore}
+      onNotificationClick={handleNotificationClick}
+      unreadCount={unreadCount}
+    />
+  );
+};
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop
+});
+
+export default connect(mapStateToProps, null)(NotificationCenterContainer);
--- a/client/src/components/notification-center/notification-center.styles.scss
+++ b/client/src/components/notification-center/notification-center.styles.scss
@@ -0,0 +1,175 @@
+.notification-center {
+  position: absolute;
+  top: 64px;
+  right: 0;
+  width: 400px;
+  max-width: 400px;
+  background: #fff;
+  color: rgba(0, 0, 0, 0.85);
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08), 0 3px 6px rgba(0, 0, 0, 0.06);
+  z-index: 1000;
+  display: none;
+  overflow-x: hidden;
+
+  &.visible {
+    display: block;
+  }
+
+  .notification-header {
+    padding: 4px 16px;
+    border-bottom: 1px solid #f0f0f0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: #fafafa;
+
+    h3 {
+      margin: 0;
+      font-size: 14px;
+      color: rgba(0, 0, 0, 0.85);
+    }
+
+    .notification-controls {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+
+      // Styles for the eye icon and switch (custom classes)
+      .notification-toggle {
+        align-items: center; // Ensure vertical alignment
+      }
+
+      .notification-toggle-icon {
+        font-size: 14px;
+        color: #1677ff;
+        vertical-align: middle;
+      }
+
+      .ant-switch {
+        &.ant-switch-small {
+          min-width: 28px;
+          height: 16px;
+          line-height: 16px;
+
+          .ant-switch-handle {
+            width: 12px;
+            height: 12px;
+          }
+
+          &.ant-switch-checked {
+            background-color: #1677ff;
+            .ant-switch-handle {
+              left: calc(100% - 14px);
+            }
+          }
+        }
+      }
+
+      // Styles for the "Mark All Read" button (restore original link button style)
+      .ant-btn-link {
+        padding: 0;
+        color: #1677ff;
+
+        &:hover {
+          color: #69b1ff;
+        }
+
+        &:disabled {
+          color: rgba(0, 0, 0, 0.25);
+          cursor: not-allowed;
+        }
+
+        &.active {
+          color: #0958d9;
+        }
+      }
+    }
+  }
+
+  .notification-read {
+    background: #fff;
+    color: rgba(0, 0, 0, 0.65);
+  }
+
+  .notification-unread {
+    background: #f5f5f5;
+    color: rgba(0, 0, 0, 0.85);
+  }
+
+  .notification-item {
+    padding: 12px 16px;
+    border-bottom: 1px solid #f0f0f0;
+    display: block;
+    overflow: visible;
+    width: 100%;
+    box-sizing: border-box;
+    cursor: pointer;
+
+    &:hover {
+      background: #fafafa;
+    }
+
+    .notification-content {
+      width: 100%;
+    }
+
+    .notification-title {
+      margin: 0;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      width: 100%;
+      box-sizing: border-box;
+
+      .ro-number {
+        margin: 0;
+        color: #1677ff;
+        flex-shrink: 0;
+        white-space: nowrap;
+      }
+
+      .relative-time {
+        margin: 0;
+        font-size: 12px;
+        color: rgba(0, 0, 0, 0.45);
+        white-space: nowrap;
+        flex-shrink: 0;
+        margin-left: auto;
+      }
+    }
+
+    .notification-body {
+      margin-top: 4px;
+
+      .ant-typography {
+        color: inherit;
+      }
+
+      ul {
+        margin: 0;
+        padding: 0;
+      }
+
+      li {
+        margin-bottom: 2px;
+      }
+    }
+  }
+
+  .ant-badge {
+    width: 100%;
+  }
+
+  .ant-alert {
+    margin: 8px;
+    background: #fff1f0;
+    color: rgba(0, 0, 0, 0.85);
+    border: 1px solid #ffa39e;
+
+    .ant-alert-message {
+      color: #ff4d4f;
+    }
+  }
+}
--- a/client/src/components/notification-settings/column-header-checkbox.component.jsx
+++ b/client/src/components/notification-settings/column-header-checkbox.component.jsx
@@ -0,0 +1,56 @@
+import { notificationScenarios } from "../../utils/jobNotificationScenarios.js";
+import { Checkbox, Form } from "antd";
+import { useTranslation } from "react-i18next";
+import PropTypes from "prop-types";
+
+/**
+ * ColumnHeaderCheckbox
+ * @param channel
+ * @param form
+ * @param disabled
+ * @param onHeaderChange
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const ColumnHeaderCheckbox = ({ channel, form, disabled = false, onHeaderChange }) => {
+  const { t } = useTranslation();
+
+  // Subscribe to all form values so that this component re-renders on changes.
+  const formValues = Form.useWatch([], form) || {};
+
+  // Determine if all scenarios for this channel are checked.
+  const allChecked =
+    notificationScenarios.length > 0 && notificationScenarios.every((scenario) => formValues[scenario]?.[channel]);
+
+  const onChange = (e) => {
+    const checked = e.target.checked;
+    // Get current form values.
+    const currentValues = form.getFieldsValue();
+    // Update each scenario for this channel.
+    const newValues = { ...currentValues };
+    notificationScenarios.forEach((scenario) => {
+      newValues[scenario] = { ...newValues[scenario], [channel]: checked };
+    });
+    // Update form values.
+    form.setFieldsValue(newValues);
+    // Manually mark the form as dirty.
+    if (onHeaderChange) {
+      onHeaderChange();
+    }
+  };
+
+  return (
+    <Checkbox onChange={onChange} checked={allChecked} disabled={disabled}>
+      {t(`notifications.channels.${channel}`)}
+    </Checkbox>
+  );
+};
+
+ColumnHeaderCheckbox.propTypes = {
+  channel: PropTypes.oneOf(["app", "email", "fcm"]).isRequired,
+  form: PropTypes.object.isRequired,
+  disabled: PropTypes.bool,
+  onHeaderChange: PropTypes.func
+};
+
+export default ColumnHeaderCheckbox;
--- a/client/src/components/notification-settings/notification-settings-form.component.jsx
+++ b/client/src/components/notification-settings/notification-settings-form.component.jsx
@@ -0,0 +1,168 @@
+import { useMutation, useQuery } from "@apollo/client";
+import { useEffect, useState } from "react";
+import { Button, Card, Checkbox, Form, Space, Table } from "antd";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectCurrentUser } from "../../redux/user/user.selectors";
+import AlertComponent from "../alert/alert.component";
+import { QUERY_NOTIFICATION_SETTINGS, UPDATE_NOTIFICATION_SETTINGS } from "../../graphql/user.queries.js";
+import { notificationScenarios } from "../../utils/jobNotificationScenarios.js";
+import LoadingSpinner from "../loading-spinner/loading-spinner.component.jsx";
+import PropTypes from "prop-types";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
+import ColumnHeaderCheckbox from "../notification-settings/column-header-checkbox.component.jsx";
+
+/**
+ * Notifications Settings Form
+ * @param currentUser
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const NotificationSettingsForm = ({ currentUser }) => {
+  const { t } = useTranslation();
+  const [form] = Form.useForm();
+  const [initialValues, setInitialValues] = useState({});
+  const [isDirty, setIsDirty] = useState(false);
+  const notification = useNotification();
+
+  // Fetch notification settings.
+  const { loading, error, data } = useQuery(QUERY_NOTIFICATION_SETTINGS, {
+    fetchPolicy: "network-only",
+    nextFetchPolicy: "network-only",
+    variables: { email: currentUser.email },
+    skip: !currentUser
+  });
+
+  const [updateNotificationSettings, { loading: saving }] = useMutation(UPDATE_NOTIFICATION_SETTINGS);
+
+  // Populate form with fetched data.
+  useEffect(() => {
+    if (data?.associations?.length > 0) {
+      const settings = data.associations[0].notification_settings || {};
+      // Ensure each scenario has an object with { app, email, fcm }.
+      const formattedValues = notificationScenarios.reduce((acc, scenario) => {
+        acc[scenario] = settings[scenario] ?? { app: false, email: false, fcm: false };
+        return acc;
+      }, {});
+
+      setInitialValues(formattedValues);
+      form.setFieldsValue(formattedValues);
+      setIsDirty(false); // Reset dirty state when new data loads.
+    }
+  }, [data, form]);
+
+  const handleSave = async (values) => {
+    if (data?.associations?.length > 0) {
+      const userId = data.associations[0].id;
+      // Save the updated notification settings.
+      const result = await updateNotificationSettings({ variables: { id: userId, ns: values } });
+      if (!result?.errors) {
+        notification.success({ message: t("notifications.labels.notification-settings-success") });
+        setInitialValues(values);
+        setIsDirty(false);
+      } else {
+        notification.error({ message: t("notifications.labels.notification-settings-failure") });
+      }
+    }
+  };
+
+  // Mark the form as dirty on any manual change.
+  const handleFormChange = () => {
+    setIsDirty(true);
+  };
+
+  const handleReset = () => {
+    form.setFieldsValue(initialValues);
+    setIsDirty(false);
+  };
+
+  if (error) return <AlertComponent type="error" message={error.message} />;
+  if (loading) return <LoadingSpinner />;
+
+  const columns = [
+    {
+      title: t("notifications.labels.scenario"),
+      dataIndex: "scenarioLabel",
+      key: "scenario",
+      render: (_, record) => t(`notifications.scenarios.${record.key}`),
+      width: "90%"
+    },
+    {
+      title: <ColumnHeaderCheckbox channel="app" form={form} onHeaderChange={() => setIsDirty(true)} />,
+      dataIndex: "app",
+      key: "app",
+      align: "center",
+      render: (_, record) => (
+        <Form.Item name={[record.key, "app"]} valuePropName="checked" noStyle>
+          <Checkbox />
+        </Form.Item>
+      )
+    },
+    {
+      title: <ColumnHeaderCheckbox channel="email" form={form} onHeaderChange={() => setIsDirty(true)} />,
+      dataIndex: "email",
+      key: "email",
+      align: "center",
+      render: (_, record) => (
+        <Form.Item name={[record.key, "email"]} valuePropName="checked" noStyle>
+          <Checkbox />
+        </Form.Item>
+      )
+    }
+    // TODO: Disabled for now until FCM is implemented.
+    // {
+    //   title: <ColumnHeaderCheckbox channel="fcm" form={form} disabled onHeaderChange={() => setIsDirty(true)} />,
+    //   dataIndex: "fcm",
+    //   key: "fcm",
+    //   align: "center",
+    //   render: (_, record) => (
+    //     <Form.Item name={[record.key, "fcm"]} valuePropName="checked" noStyle>
+    //       <Checkbox disabled />
+    //     </Form.Item>
+    //   )
+    // }
+  ];
+
+  const dataSource = notificationScenarios.map((scenario) => ({ key: scenario }));
+
+  return (
+    <Form
+      form={form}
+      onFinish={handleSave}
+      onValuesChange={handleFormChange}
+      initialValues={initialValues}
+      autoComplete="off"
+      layout="vertical"
+    >
+      <Card
+        title={t("notifications.labels.notificationscenarios")}
+        extra={
+          <Space>
+            <Button type="default" onClick={handleReset} disabled={!isDirty}>
+              {t("general.actions.clear")}
+            </Button>
+
+            <Button type="primary" htmlType="submit" disabled={!isDirty} loading={saving}>
+              {t("notifications.labels.save")}
+            </Button>
+          </Space>
+        }
+      >
+        <Table dataSource={dataSource} columns={columns} pagination={false} bordered rowKey="key" />
+      </Card>
+    </Form>
+  );
+};
+
+NotificationSettingsForm.propTypes = {
+  currentUser: PropTypes.shape({
+    email: PropTypes.string.isRequired
+  }).isRequired
+};
+
+const mapStateToProps = createStructuredSelector({
+  currentUser: selectCurrentUser
+});
+
+export default connect(mapStateToProps)(NotificationSettingsForm);
--- a/client/src/components/payments-generate-link/payments-generate-link.component.jsx
+++ b/client/src/components/payments-generate-link/payments-generate-link.component.jsx
@@ -2,15 +2,15 @@ import { CopyFilled } from "@ant-design/icons";
 import { Button, Form, message, Popover, Space } from "antd";
 import axios from "axios";
 import Dinero from "dinero.js";
-import { parsePhoneNumber } from "libphonenumber-js";
-import React, { useContext, useState } from "react";
+import { parsePhoneNumberWithError, ParseError } from "libphonenumber-js";
+import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { openChatByPhone, setMessage } from "../../redux/messaging/messaging.actions";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
 import CurrencyFormItemComponent from "../form-items-formatted/currency-form-item.component";
-import SocketContext from "../../contexts/SocketIO/socketContext.jsx";
+import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
@@ -29,22 +29,34 @@ export function PaymentsGenerateLink({ bodyshop, currentUser, callback, job, ope
  const [open, setOpen] = useState(false);
  const [loading, setLoading] = useState(false);
  const [paymentLink, setPaymentLink] = useState(null);
-  const { socket } = useContext(SocketContext);
+  const { socket } = useSocket();

  const handleFinish = async ({ amount }) => {
    setLoading(true);
    let p;
    try {
-      p = parsePhoneNumber(job.ownr_ph1 || "", "CA");
+      // Updated to use parsePhoneNumberWithError
+      p = parsePhoneNumberWithError(job.ownr_ph1 || "", "CA");
    } catch (error) {
-      console.log("Unable to parse phone number");
+      if (error instanceof ParseError) {
+        // Handle specific parsing errors
+        console.log(`Phone number parsing failed: ${error.message}`);
+      } else {
+        // Handle other unexpected errors
+        console.log("Unexpected error while parsing phone number:", error);
+      }
    }
    setLoading(true);
    const response = await axios.post("/intellipay/generate_payment_url", {
      bodyshop,
      amount: amount,
      account: job.ro_number,
-      comment: btoa(JSON.stringify({ payments: [{ jobid: job.id, amount }], userEmail: currentUser.email }))
+      comment: btoa(
+        JSON.stringify({
+          payments: [{ jobid: job.id, amount }],
+          userEmail: currentUser.email
+        })
+      )
    });
    setLoading(false);
    setPaymentLink(response.data.shorUrl);
@@ -106,7 +118,20 @@ export function PaymentsGenerateLink({ bodyshop, currentUser, callback, job, ope
            </Space>
            <Button
              onClick={() => {
-                const p = parsePhoneNumber(job.ownr_ph1, "CA");
+                let p;
+                try {
+                  // Updated second instance of phone parsing
+                  p = parsePhoneNumberWithError(job.ownr_ph1, "CA");
+                } catch (error) {
+                  if (error instanceof ParseError) {
+                    // Handle specific parsing errors
+                    console.log(`Phone number parsing failed: ${error.message}`);
+                  } else {
+                    // Handle other unexpected errors
+                    console.log("Unexpected error while parsing phone number:", error);
+                  }
+                  return;
+                }
                openChatByPhone({
                  phone_num: p.formatInternational(),
                  jobid: job.id,
--- a/client/src/components/production-board-kanban/production-board-kanban.component.jsx
+++ b/client/src/components/production-board-kanban/production-board-kanban.component.jsx
@@ -4,7 +4,7 @@ import { useApolloClient } from "@apollo/client";
 import { Button, Skeleton, Space } from "antd";
 import cloneDeep from "lodash/cloneDeep";
 import isEqual from "lodash/isEqual";
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
--- a/client/src/components/production-board-kanban/production-board-kanban.container.jsx
+++ b/client/src/components/production-board-kanban/production-board-kanban.container.jsx
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useMemo, useRef } from "react";
+import { useEffect, useMemo, useRef } from "react";
 import { useApolloClient, useQuery, useSubscription } from "@apollo/client";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -12,7 +12,7 @@ import { QUERY_KANBAN_SETTINGS } from "../../graphql/user.queries";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
 import ProductionBoardKanbanComponent from "./production-board-kanban.component";
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
-import SocketContext from "../../contexts/SocketIO/socketContext.jsx";
+import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
@@ -22,7 +22,7 @@ const mapStateToProps = createStructuredSelector({
 function ProductionBoardKanbanContainer({ bodyshop, currentUser, subscriptionType = "direct" }) {
  const fired = useRef(false);
  const client = useApolloClient();
-  const { socket } = useContext(SocketContext); // Get the socket from context
+  const { socket } = useSocket();
  const reconnectTimeout = useRef(null); // To store the reconnect timeout
  const disconnectTime = useRef(null); // To track disconnection time
  const acceptableReconnectTime = 2000; // 2 seconds threshold
--- a/client/src/components/production-list-detail/production-list-detail.component.jsx
+++ b/client/src/components/production-list-detail/production-list-detail.component.jsx
@@ -27,6 +27,8 @@ import ScoreboardAddButton from "../job-scoreboard-add-button/job-scoreboard-add
 import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
 import ProductionRemoveButton from "../production-remove-button/production-remove-button.component";
+import JobWatcherToggleContainer from "../job-watcher-toggle/job-watcher-toggle.container.jsx";
+import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
@@ -41,6 +43,7 @@ export function ProductionListDetail({ bodyshop, jobs, setPrintCenterContext, te
  const search = queryString.parse(useLocation().search);
  const history = useNavigate();
  const { selected } = search;
+  const { scenarioNotificationsOn } = useSocket();

  const { t } = useTranslation();
  const theJob = jobs.find((j) => j.id === selected) || {};
@@ -60,7 +63,12 @@ export function ProductionListDetail({ bodyshop, jobs, setPrintCenterContext, te
    <Drawer
      title={
        <PageHeader
-          title={theJob.ro_number}
+          title={
+            <Space>
+              {!technician && scenarioNotificationsOn && <JobWatcherToggleContainer job={theJob} />}
+              {theJob.ro_number}
+            </Space>
+          }
          extra={
            <Space wrap>
              {!technician ? <ProductionRemoveButton jobId={theJob.id} /> : null}
--- a/client/src/components/production-list-table/production-list-table.container.jsx
+++ b/client/src/components/production-list-table/production-list-table.container.jsx
@@ -1,5 +1,5 @@
 import { useApolloClient, useQuery, useSubscription } from "@apollo/client";
-import React, { useContext, useEffect, useState, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import {
  QUERY_EXACT_JOB_IN_PRODUCTION,
  QUERY_EXACT_JOBS_IN_PRODUCTION,
@@ -10,11 +10,11 @@ import {
 import ProductionListTable from "./production-list-table.component";
 import _ from "lodash";
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
-import SocketContext from "../../contexts/SocketIO/socketContext.jsx";
+import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";

 export default function ProductionListTableContainer({ bodyshop, subscriptionType = "direct" }) {
  const client = useApolloClient();
-  const { socket } = useContext(SocketContext);
+  const { socket } = useSocket();
  const [joblist, setJoblist] = useState([]);
  const reconnectTimeout = useRef(null); // To store the reconnect timeout
  const disconnectTime = useRef(null); // To store the time of disconnection
--- a/client/src/components/production-remove-button/production-remove-button.component.jsx
+++ b/client/src/components/production-remove-button/production-remove-button.component.jsx
@@ -39,7 +39,7 @@ export default function ProductionRemoveButton({ jobId }) {
  };

  return (
-    <Button loading={loading} onClick={handleRemoveFromProd} type={"danger"}>
+    <Button loading={loading} onClick={handleRemoveFromProd} type="default" danger>
      {t("production.actions.remove")}
    </Button>
  );
--- a/client/src/components/profile-my/profile-my.component.jsx
+++ b/client/src/components/profile-my/profile-my.component.jsx
@@ -1,6 +1,5 @@
 import { Button, Card, Col, Form, Input } from "antd";
 import { LockOutlined } from "@ant-design/icons";
-import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -9,6 +8,8 @@ import { selectCurrentUser } from "../../redux/user/user.selectors";
 import { logImEXEvent, updateCurrentPassword } from "../../firebase/firebase.utils";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
+import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
+import NotificationSettingsForm from "../notification-settings/notification-settings-form.component.jsx";

 const mapStateToProps = createStructuredSelector({
  currentUser: selectCurrentUser
@@ -22,6 +23,7 @@ export default connect(
 )(function ProfileMyComponent({ currentUser, updateUserDetails }) {
  const { t } = useTranslation();
  const notification = useNotification();
+  const { scenarioNotificationsOn } = useSocket();

  const handleFinish = (values) => {
    logImEXEvent("profile_update");
@@ -117,6 +119,11 @@ export default connect(
          </Card>
        </Form>
      </Col>
+      {scenarioNotificationsOn && (
+        <Col span={24}>
+          <NotificationSettingsForm />
+        </Col>
+      )}
    </>
  );
 });
--- a/client/src/components/update-alert/update-alert.component.jsx
+++ b/client/src/components/update-alert/update-alert.component.jsx
@@ -1,7 +1,7 @@
 import { AlertOutlined } from "@ant-design/icons";
 import { Alert, Button, Col, Row, Space } from "antd";
 import i18n from "i18next";
-import React, { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -81,8 +81,7 @@ export function UpdateAlert({ updateAvailable }) {
            imex: "$t(titles.imexonline)",
            rome: "$t(titles.romeonline)"
          })
-        }),
-        placement: "bottomRight"
+        })
      });
    }
    if (needRefresh && timerStarted && timeLeft <= 0) {